/*
	Theme Name: Intrasol Zonwering
	Theme URI: http://intrasolzonwering.nl
	Description: Website for Intrasol Zonwering
	Version: 1.0
	Author: Buro Schakel
	Author URI: http://buroschakel.nl
	Tags: Wordpress, HTML5, CSS3, jQuery

	Main
	Header
		- Nav
		- Logo
	Elements
		- Tiles
		- Tile 01
		- Tile 02
		- Pagination
	Sidebar
	Structure
		- Main
		- Wrapper
		- Inner
		- Content
	Sections
		- Section Titles
		- Covers
		- Services
		- References
		- Actions
		- Contact
		- Partners
		- Footer
	Modal Popup
*/

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700);

.grecaptcha-badge {
	display: none !important;
}

/*------------------------------------*\
    Main
\*------------------------------------*/

body {
	font: 400 18px/28px 'Source Sans Pro', sans-serif;;
	color: #283444;	
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0 0 30px 0;
	word-wrap: break-word;
	font-weight: 700;
}

p {
	font-weight: inherit;
}

h1, 
h2,
h3,
h4 {
	font-size: 30px;
	line-height: 40px;
}

h5 {
	font-size: 25px;
	line-height: 35px;
}

h6 {
	font-size: 18px;
	line-height: 30px;
}

.caption {
	font-size: 14px; 
	line-height: 20px;
	font-style: italic;
}

a {
	color: #283444;
	font-weight: 700;
	text-decoration: none;
    -webkit-transition: 		all 0.20s ease;
    -ms-transition: 			all 0.20s ease;
    transition: 				all 0.20s ease;
}
a:hover,
.current-menu-item a {
	color: #de6e00;
}
.home .current-menu-item a {
	color: #283444;
}
.home .current-menu-item a:hover {
	color: #de6e00;
}


/*------------------------------------*\
    Header
\*------------------------------------*/

header {
	width: 100%;
	height: 90px;
	background:#FFFFFF;
	position: fixed;
	top: 0 !important;
	z-index: 100;
	box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
    -webkit-transition: 		all 0.20s ease;
    -ms-transition: 			all 0.20s ease;
    transition: 				all 0.20s ease;
}

.header-ghost {
	width:100%;
	height:90px;
	display:block;
	float:left;
}

.logo {
	position: absolute;
	left: 40px;
	top: 16px;
}
.logo img {
	width: 180px;
}

.nav {
	position: absolute;
	right: 40px;
}
.nav li {
	float: left;
}
.nav li > a {
	height: 90px;
	line-height: 90px;
	display: block;
	padding: 0 15px;
}

.nav li > a > a {
	padding: 0 !important;
}

.slicknav_nav .menu a > a {
	padding: 0 !important;
}

.nav li.button-medium {
	padding: 0 0 0 15px;
}
.nav li.button-medium a {
	height: 40px;
	line-height: 40px;
	margin: 25px 0 0 0;
	padding: 0 20px;
}
.nav li.button-medium-aanbiedingen a {
	border: 2px solid #283444;
	background: none;
	color: #283444;
	line-height: 36px;
}
.nav li.button-medium-aanbiedingen a:hover {
	border: 2px solid #de6e00;
	background: none;
	color: #de6e00;
}


@media (min-width: 1140px) {
	nav ul.sub-menu {
		min-width: 200px;
		max-width: 250px;
	}

	/* Submenu Styling */
	nav ul.sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		background: #f9f9f9;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		padding: 10px 0;
		display: none; /* Hidden by default */
		z-index: 10;
	  }
	  
	  nav ul.sub-menu li {
		width: 100%;
	  }
	  
	  nav ul.sub-menu a {
		padding: 8px 20px;
		color: #333;
		line-height: 1.2;
		height: auto;
		white-space: nowrap; /* Prevent text wrapping */
	  }
	  
	  nav ul.sub-menu a:hover {
		background: #f1f1f1;
		color: #0073aa;
	  }
	  
	  /* Show Submenu on Hover */
	  nav li.menu-item-has-children:hover > ul.sub-menu {
		display: block;
	  }
	  
	  /* Responsive Adjustments for Mobile */
	  @media (max-width: 768px) {
		nav ul {
		  flex-direction: column;
		}
	  
		nav ul.sub-menu {
		  position: static;
		  display: none; /* Keep hidden unless toggled */
		  padding-left: 45px !important;
		}
	  
		nav li.menu-item-has-children > ul.sub-menu {
		  margin-left: 20px; /* Slight indent for submenus */
		}
	  
		nav li.menu-item-has-children > a::after {
		  content: "▼";
		  margin-left: 8px;
		  font-size: 0.8em;
		  display: inline-block;
		}
	  
		nav li.menu-item-has-children.open > ul.sub-menu {
		  display: block;
		}
	  }
}

.slicknav_menu ul {
	display: block;
	padding: 15px 15px 15px 45px;
	background: #cfcfcf;
  }
/*------------------------------------*\
    Elements
\*------------------------------------*/

/* Tiles */

.tile_1,
.tile_2 {
	width: 360px;
	margin: 0 10px 20px 10px;
	position: relative;
	display: block;
	float: left;
}

.tile_1 .title,
.tile_2 .title,
.tile_2 .subtitle {
	width: 100%;
	display: block;
    -webkit-transition: 					background 0.20s ease, height 0.20s ease;
    -ms-transition: 						background 0.20s ease, height 0.20s ease;
    transition: 							background 0.20s ease, height 0.20s ease;
}

/* Tile 01 */

.tile_1 {
	min-height: 300px;
}
.tile_1:hover {
	color: #ffffff;
}
.tile_1 .title {
	height: 90px;
	line-height: 60px;
	font-size: 30px;
	background: #DEDEDE;
	position: absolute;
	bottom: 0;
	padding: 0 25px;
}
.tile_1:hover .title {
	height: 100px;
	background: #283444;
}

/* Tile 02 */

.tile_2 {
	min-height: 420px;
	background: #fff;
}
.tile_2:hover {
	margin-top: -10px;
	margin-bottom: 30px;
}
.tile_2 .thumbnail {
	height: 280px;
	position: relative;
}
.tile_2 .thumbnail .icon {
	position: absolute;
	right: 30px;
	bottom: 30px;
}
.tile_2 .title {
	font-size: 35px;
	line-height: 25px;
	padding: 25px;
	background: #fff;
}
.tile_2 .subtitle {
	font-size: 18px;
	margin: 0 0 10px 0;
}

.page-template-template-about .tile_2 {
	min-height: auto;
}
.page-template-template-about .tile_2 .title {
	border-bottom: none;
}

/* Pagination */

.pagination {
	width: 100%;
	display: block;
	text-align: center;
	margin: 0 0 60px 0;
}


/*------------------------------------*\
    Sidebar
\*------------------------------------*/

aside  {
	flex-shrink:0;
	display: flex;
	flex-flow: column;
	width: 475px; 
	float: right; 
	background: #fbf7f7; 
}
aside .widget {
	padding: 60px 65px;
}
aside .widget p:last-child {
	margin: 0;
}
aside .widget-downloads {
	margin-bottom: 60px;
}
aside .widget h4 {
	font-size: 30px;
	line-height: 35px;
}
aside .button-large {
	margin: 45px 0 0 0;
}
aside .icon {
	width:35px;
	height:35px;
	line-height:32px;
	background: none;
	border: 2px solid #de6e00;
	color: #de6e00;
	font-size: 14px;
	margin: 0 10px 0 0;
	float: left;
}
aside .icon:hover {
	background: none;
	color: #de6e00;
}

aside ul {
	margin: 0 0 30px 0;
}
aside li {
	margin: 0 0 10px 0;
	line-height: 35px;
}


/* Sidebar: Productspecifications */

.list li {
	padding: 10px 0;
	border-bottom: 1px solid #dedede;
}
.list li:first-child {
	padding: 0 0 10px 0;
}
.list li:last-child {
	padding: 10px 0 0 0;
	border-bottom: none;
}
.list li span {
	font-weight: 700;
}

/* Sidebar: productgallery */

.gallery {
	height: 350px;
	display: block;
}
.gallery li {
	width: 100%;
	height: 350px;
	float: left;
	display: block;
}
.gallery .icon {
	position: absolute;
	right: 30px;
	bottom: 30px;
}

/* Sidebar: Productnavigation */

.shortnav {
	background: #283444;
	padding: 60px 65px;
	margin: 0 0 0 0;
	float: left;
	width: 100%;
	height: auto;
	display: block;
	color: #ffffff;
	flex: 1;
}


/*------------------------------------*\
    Structure
\*------------------------------------*/

/* Main */

main {
	width: 100%;
	margin: 0 auto;
	padding: 0 0 100px 0;
	background: #dedede;
}

.page-template-template-home main {
	padding: 0;
	background: #ffffff;
}

/* Wrapper */

.wrapper {
	width: 1170px;
	height: 100%;
	margin: 0 auto;
	padding: 0 30px;
	position: relative;
	display: table;
	z-index: 1;
}

/* Inner */

.inner ul {
	margin: 0 0 30px 0;
	display: inline-block;
}

.inner ul li {
	margin: 0 0 0 30px;
	list-style: circle;
}

.inner ul li > ul {
	margin: 0 0 0 30px;
}

/* Content */

section.content {
	margin: -150px 0 0 0;
}

section.content .wrapper {
	display: flex;
}
section.content .inner {
	width: 695px;
	background: #ffffff; 
	padding: 60px 65px; 
	flex-grow: 1;
	position: relative;
}




/*------------------------------------*\
	Sections
\*------------------------------------*/

section.cover,
section .section-title,
section.references,
section.actions,
section.services,
section.contact,
section.partners,
section.footer {
	width: 100%;
	position: relative;
}


/* Section Titles */

section .section-title {
	text-align: center;
	margin-bottom: 40px;
	padding: 0 20%;
}
section .section-title h3 {
	margin: 0 0 20px 0;
}


/* Covers */

section.cover {
	min-height: 450px;
	overflow: auto;
	background-size: cover !important;
}

section.cover span {
	font-size: 75px;
	line-height: 70px;
	margin-bottom: 0px;
}
section.cover h2 {
	margin-bottom: 10px;
}

section.cover .button-large {
	margin-top: 30px;
}

section.cover .gradient {
	width: 75%;
    height: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
	position: absolute;
	top: 0;
}

section.cover .wrapper {
	padding-right: 25%;
	display: table;
}
section.cover .wrapper .valign {
	display: table-cell;
	vertical-align: middle;
}
section.cover .wrapper-large {
	min-height: 450px;
}
section.cover .wrapper-medium {
	min-height: 300px;
}
section.cover .wrapper-medium h1 {
	font-size: 60px;
	line-height: 60px;
}


/* Services */

section.services {
	background: #F0F0F0;
}

section.services .service {
	width: 33.333%;
	height: 90px;
	float: left;
	display: table;
	padding-left: 15px;
}
section.services .service:first-child {
	padding-left: 0;
}

section.services h6 {
	line-height: 40px;
	margin: 0;
}

section.services .icon {
	float: left;
	margin: 0 20px 0 0;
	background: none;
	border: 2px solid #de6e00;
	color: #de6e00;
	line-height: 38px;
}


/* Products */

section.grid {
	padding: 60px 30px 20px 30px;
}
section.grid .wrapper {
	padding: 0 15px;
}
.home section.grid {
	background: #FFFFFF;
}


/* Actions */

section.actions {
	padding: 60px 0;
	background: #283444;
	color: #FFFFFF;;
	text-align: center;
}

section.actions .slick-slide {
	margin: 0 40px;
	font-size: 20px;
	line-height: 30px;
	font-weight: 600;
	text-align: left;
	display: flex;
	flex-wrap: wrap;
	color: #283444;
}

section.actions .slick-slide .button-large,
section.actions .slick-slide .button-large i,
section.actions .slick-slide .image {
    -webkit-transition: all 0.20s ease;
    -ms-transition:	all 0.20s ease;
    transition: all 0.20s ease;
}
section.actions .slick-slide:hover .button-large {
	background: #283444;
}
section.actions .slick-slide:hover .button-large i {
	color: #283444;
	transform: rotate(90deg);
}

section.actions h2 {
	font-size: 40px;
	line-height: 40px;
}

section.actions .text,
section.actions .image {
	width: 50%;
	min-height: 430px;
	background: #FFFFFF;
	position: relative;
}
section.actions .text {
	float: left;
	padding: 60px;
}
section.actions .image {
	float: right;
}

section.actions .button-large {
	margin-top: 10px;
}


/* References */

section.references {
	padding: 80px 0;
	text-align: center;
}
section.references .ref-content {
	width: 100%;
	text-align: center;
	padding: 0 180px;
	display: inline-block;
}
.page-template-template-referenties section.references {
	padding: 60px 0;
	width: 1110px;
	background: #FFFFFF;
	margin: 0 auto 20px auto;
}
.page-template-template-referenties section.references .wrapper {
	width: 100%;
}
.page-template-template-referenties section.references .ref-content {
	padding: 0 180px;
	border: none;
}
section.references .name {
	margin: 0 0 20px 0;
	font-weight: 700;
}
section.references .title {
	font-family: 'Caveat Brush', cursive;
	font-style: italic;
	font-size: 30px;
	line-height: 35px;
	margin: 0 0 20px 0;
}


/* Contact */

section.contact {
	padding: 60px 0 0 0;
	background: #fbf7f7;
	text-align: center;
}
section.contact h4 {
	margin: 10px 0;
	color: #de6e00;
}
section.contact h5 {
	margin: 0;
}

section.contact .wrapper {
	width: 1280px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 30px;
	row-gap: 0;
}

section.contact a {
	height: 220px;
	display: table;
	color: #283444;
	background: #FFFFFF;
	border: 1px solid #dedede;
	border-bottom: 2px solid #de6e00;
    -webkit-transition: 		all 0.20s ease;
    -ms-transition: 			all 0.20s ease;
    transition: 				all 0.20s ease;
	margin-bottom: 30px;
}

section.contact a:hover {
	border-color: #de6e00;
}


/* Lees meer */

.page-template-template-landingspagina main {
	background: #ffffff;
	padding-bottom: 0;
}

section.leesmeer {
	padding: 60px 20%;
	border-top: 1px solid #fbf7f7;
	text-align: center;
}

section.leesmeer img {
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	display: block;
}


section.leesmeer .intro {
	display: inline-block;
	margin-bottom: 20px;
}

section.leesmeer .intro p:last-child {
	margin-bottom: 0;
}

section.leesmeer #text {
	display: none;
}

section.leesmeer #toggle {
	cursor: pointer;
}

/* Google reviews */
section.googlereviews {
	padding: 60px 20%;
	border-top: 1px solid #fbf7f7;
	text-align: center;
}

/* Partners */

.page-template-template-about section.partners {
	background: #DEDEDE;
	padding: 30px 0 0 0;
}

section.partners {
	background: #FFFFFF;
	padding: 10px 0 60px 0;
}
section.partners h6 {
	margin: 0;
}
section.partners .section-title {
	margin: 0 0 15px 0;
}
section.partners .wrapper {
	width: 45%;
}
section.partners .slick-slide img {
	width: 90%;
	margin: 0 auto;
}


/* Nieuws */ 

.page-template-template-nieuws article {
	margin: 0 0 40px 0; 
	display: inline-block;
}


/* Footer */

footer {
	font-size: 16px;
	background: #fbf7f7;
	text-align: center;
	padding: 0 0 60px 0;
}

footer .copyright {
	display: inline-block;
	margin: 10px 0 0 0;
}

footer .copyright .info {
	float: left;
}

footer .copyright .menu-footer-container {
	float: left;
	margin: 0 0 0 10px;
}
footer .copyright .menu-footer-container li {
	float: left;
	padding: 0 10px;
	border-left: 1px solid #dedede;
}
footer .copyright .menu-footer-container li:last-child {
	padding: 0 0 0 10px;
}

footer .social-media ul {
	margin: 10px 0 0 0;
	display: inline-block;
}
footer .social-media li {
	float: left;
	margin: 0 5px;
}

.footer .landing-information {
	width: 100%;
	display: inline-block; 
	text-align: center;
	margin: 10px 0 0 0;
}


.postcode {
	text-transform: uppercase !important;
}



/*------------------------------------*\
	Modal Window
\*------------------------------------*/

.ui-dialog {
	width: 100% !important;
	height: auto !important;
	min-height: 100% !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	z-index: 1000000000 !important;
	background-color: rgba(40, 52, 68, 0.7);
	cursor: pointer;
}

.ui-widget-overlay {
  opacity: .50 !important; /* Make sure to change both of these, as IE only sees the second one */
  filter: Alpha(Opacity=50) !important;
  background: rgb(50, 50, 50) !important; /* This will make it darker */
}
.ui-dialog-titlebar {
	display: none !important;
}

#dialog {
	width: 600px !important;
	padding: 60px; 
	background: #FFFFFF;
	position: fixed;
	top: 140px;
    left: 50%;
    transform: translateX(-50%);
	display: none;
	cursor: default;
}

.close-button {
	width: auto;
	float: left;
	height: 50px;
	padding: 0 25px;
	line-height: 50px;
	display: block;
	background: #de6e00;
	color: #FFFFFF;
	border-radius: 25px;
}
.close-button:hover {
	background: #283444;
	color: #FFFFFF;
}

.intro h2{
	font-weight: 700 !important;
}