@media screen and (min-width: 0px)  {

	html{
		margin:0 auto;
		background-color:#ffffff;
		color:#000000;
		font-family:kanit, sans-serif;
		font-weight:300;
		margin:0px;
		padding:0px;
		position:relative;
		height:100%;
	}
	
	body{
		height:100%;
	}
	
	.no-js #loader { display: none;  }
	
	.js #loader { display: block; position: absolute; left: 100px; top: 0; }
	
	
	

	input,textarea{
		border:1px solid #1e64b0;
		padding:10px;
		font-size:1.0em;
	}

	textarea{
		font-family:inherit;
		font-size:0.8em:
	}

	.auto_select input, .auto_select textarea{
		padding:5px;
		border-radius:5px;
		border:1px solid #c9c9c9;
	}

	.auto_select .frm_focus{

	}

	.auto_select .button, .button{
		width:auto;
		cursor:pointer;
		-webkit-appearance: none;
		border:0px;
		padding:15px;
		border;^px;
        -webkit-transition: opacity .15s ease-in-out;
        -moz-transition: opacity .15s ease-in-out;
        -ms-transition: opacity .15s ease-in-out;
        -o-transition: opacity .15s ease-in-out;
        transition: opacity .15s ease-in-out;
        outline:none;
		background-color:#000000;
		color:#ffffff;
		text-transform: uppercase;
		letter-spacing: 0.1em;
	}

	.button:hover{
		opacity: 0.8;
		outline:none;
	}

	.button:active{
		position:relative;
		top:1px;
		outline:none;
	}

	.btn-blauw{
		background-color:#1e64b0;
	}
	
	.btn-white{
		color:#1e64b0;
		background-color:#ffffff;
	}
	
	
	#popup-content{

		min-width:140px;
		color:#000000;
		border-radius:5px ;
		opacity: 0;
   	 	transform: translateY(-50px);
    	transition: all .3s;

	}

	.fancybox-container a, .fancybox-controls, .fancybox-buttons , .fancybox-button--close{
		outline: none;
	}

	.fancybox-slide--complete #popup-content {
		opacity: 1;
		transform: translateY(0);
	}

	.btn-popup {
		display: inline-block;
		text-align:right;
		float:right;
		border:0px;
		background-color:#ad2100;
		border-radius:12px;
		color:#ffffff;
		padding:8px 15px;
		font-size:10px;
		outline:none;

	}



	.frmerror{
		border:1px solid #ff0000;
	}


	.formfeedback{
		color:#ff0000;
		font-style:italic;
	}



	.point{
		cursor:pointer;
	}


	a{
		outline: none;
		text-decoration:underline;
		color:#1e64b0;
	}


	p, ul, ol{
		line-height:1.4em;
		margin-bottom:20px;
	}


	h1,h2,h3,h4{
		margin-bottom:30px;
		font-weight:bold;
	}

	h1{
		font-size:2.5em;
		text-transform: uppercase;

	}

	h2{
		font-size:1.9em;
	}

	h2 small{
		font-size:0.6em;
		font-weight:lighter;
	}

	h3{
		font-size:1.5em;
		margin-bottom:20px;
	}

	strong{
		font-weight:bold;
	}

	small{
		font-size:0.8em;
	}

	em{
		font-style:italic;
	}


	ul, ol{
		list-style-type:disc;
		position:relative;
	}

	ol{
		list-style-type:decimal;
	}

	li{

	}


	.clear{
		clear:both;
	    height:0;
	    font-size: 1px;
	    line-height: 0px;
	}

	#cookiebanner{
		height:310px;
		position:fixed;
		color:#000000;
		width:230px;
		right:20px;
		top:20px;
		z-index:9997;
		-webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
		-moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
		box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
		background-color:#ffffff;
		overflow:hidden;
		font-size:0.8em;
		text-align:center;
		border-radius:5px;
	}
	

	
	
	#cookiebanner a{
		color:inherit;
	}
	
	#cookiebanner-header {
		padding:8px 5px 0px 5px;
	}
	
	#cookiebanner-header h3{
		margin-bottom:7px;
		color:#000000;
		text-transform:uppercase;
		font-weight:bold;
		font-size:1.1em;
	}
	
	#cookiebanner-image img{
		width:100%;
		height:auto;
	}


	#cookiebanner-tekst{
		padding:10px;
		font-weight:lighter;
		line-height:1.5em;
		margin-bottom:5px;
	}

	#cookiebanner-accept{
	
	}

	#cookiebanner-accept button{
		width:auto;
		cursor:pointer;
		-webkit-appearance: none;
		border:0px;
		background-color:#ad2100;
		color:#ffffff;
		font-size:11px;
		border-radius:10px;
		font-size:12px;
		padding:5px;
		margin-bottom:0px;
	}
	#cookiebanner-accept button:hover{
		background-color:#d72900;
	}

	#trigger-nav{
		background-color:#1e64b0;
    	color:#ffffff;
    	-webkit-transition: .5s ease-in-out;
	 	 -moz-transition: .5s ease-in-out;
	  	-o-transition: .5s ease-in-out;
	  	transition: .5s ease-in-out;
	  	cursor:pointer;
	  	width:auto;
	  	height:27px;
	  	font-size:1.7em;
	  	padding:8px;
	  	position:absolute;
	  	top:0px;
	  	right:0px;
	  	z-index:901;
	}

	#trigger-nav:hover{
		background-color:#6a6a6a;
	}

	#nav-icon{
		width: 30px;
		height: 10px;
		position: relative;
		margin: 3px auto;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		-o-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
		cursor: pointer;
		display:inline-block;
		vertical-align:top;
	}

	#nav-icon span{
		display: block;
		position: absolute;
		height: 4px;
		width: 100%;
		background: #ffffff;
		border-radius: 4px;
		opacity: 1;
		left: 0;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .25s ease-in-out;
		-moz-transition: .25s ease-in-out;
		-o-transition: .25s ease-in-out;
		transition: .25s ease-in-out;
	}

	#nav-icon span:nth-child(1) {
	  top: 0px;
	}

	#nav-icon span:nth-child(2) {
	  top: 8px;
	}

	#nav-icon span:nth-child(3) {
	  top: 16px;
	}

	#nav-icon.open span:nth-child(1) {
	  top: 8px;
	  -webkit-transform: rotate(135deg);
	  -moz-transform: rotate(135deg);
	  -o-transform: rotate(135deg);
	  transform: rotate(135deg);
	}

	#nav-icon.open span:nth-child(2) {
	  opacity: 0;
	  left: -60px;
	}

	#nav-icon.open span:nth-child(3) {
	  top: 8px;
	  -webkit-transform: rotate(-135deg);
	  -moz-transform: rotate(-135deg);
	  -o-transform: rotate(-135deg);
	  transform: rotate(-135deg);
	}
	
	.quote{
		font-size:1.2em;
		font-style: italic;
		color:#aaaaaa;
	}
	
	#header-logo img{
		width:200px;
		height:auto;
	}
	
	#header-facebook img{
		width:30px;
		height:auto;
	}

	.nav-item{
		cursor:pointer;
	}
	.nav-item:hover{
		font-weight: bold;
	}
	
	.banner{
		margin-bottom:50px;
		background-repeat: no-repeat;
		background-size:cover;
		height:500px;
		position: relative;
		text-align: right
	}
	
	
	#banner-home{
		background-image: url("../img/banner.jpg");
		height:500px;
	}
	
	#banner-overons{
		background-image: url("../img/banner-about.jpg");
		height:300px;
	}
	
	
	#banner-contact{
		background-image: url("../img/banner-contact.jpg");
		height:300px;
	}
	
	#banner-leiendaken{
		background-image: url("../img/banner-leiendaken.jpg");
		height:300px;
	}
	
	#banner-pannendak{
		background-image: url("../img/banner-pannendak.jpg");
		height:300px;
	}
	
	
	#banner-isolatie{
		background-image: url("../img/banner-isolatie.jpg");
		height:500px;
	}
	
	
	#banner-plattedaken{
		background-image: url("../img/banner-plattedaken.jpg");
		height:300px;
	}
	
	#banner-herstellingen{
		background-image: url("../img/banner-herstellingen.jpg");
		height:300px;
	}
	
	
	#banner-content{
		position: absolute;
		bottom:30px;
		right:40px;
		color:#ffffff;
	}
	
	.content{
		padding-bottom:80px;
		padding-top:40px;
	}
	
	.container{
		width:90%;
		max-width:1100px;
		margin:0 auto;
	}
	.homecontact-icon img{
		height:40px;
		width:auto;
	}
	
	.homecontact-icon{
		display: inline-block;
		margin-right:10px;
	}
	.homecontact-tekst{
		display: inline-block;
	}
	
	.homecontact-item{
		margin-bottom:40px;
	}
	
	
	
	#home-daken-container{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.home-daken-item{
		width:250px;
		display:inline-block;
	}
	
	.home-daken-item img{
		width:250px;
		height:250px;
		margin-bottom:20px;
	}
	
	.home-daken-item strong, #dak-opsomming strong{
		display:inline-block;
		padding-top:3px;
		padding-left:65px;	
		color:#1e64b0;
		background-image: url("../img/quote.svg");
		background-repeat: no-repeat;
		background-size:50px;
		background-position: 0px 4px;
	}
	
	#dak-opsomming strong{
		
	}
	.imageblue{
		-webkit-box-shadow: 15px -15px 0px 0px rgba(30,100,176,1);
		-moz-box-shadow: 15px -15px 0px 0px rgba(30,100,176,1);
		box-shadow: 15px -15px 0px 0px rgba(30,100,176,1);
	}
	
	.home-onderhoud-waarom{
		background-color:#1e64b0;
		color:#ffffff;
		padding:40px;
	}
	
	.home-onderhoud-waarom ul{
		left:15px;
	}
	.home-onderhoud-waarom ul li{
		margin-bottom:20px;
	}

	footer{
		background-color:#1e64b0;
		color:#ffffff;
		padding:50px;
	}
	
	#footer-container{
		width:90%;
		max-width: 1400px;
		margin:0 auto;
		position: relative;
	}
	
	#footer-logo img{
		width:250px;
		height:auto;
	}
	
	footer a{
		color:#ffffff;
	}
	
	#about-foto{
		position: relative;
	}
	
	#about-foto p{
		position: absolute;
		bottom:5px;
		left:60px;
		width:120px;
		color:#ffffff;
		text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
	}
	
	#galerij, #contact, #leiendak-vergelijking, #leiendak-vergelijking{
		background-color:#e5e5e5;
		padding:50px 0px;
	}

	#pannendak-isolatie{
		background-color:#e5e5e5;
		
	}
	
	#galerij-overzicht{
		display:flex;
		justify-content:flex-start;
		flex-wrap: wrap;
	}
	
	#galerij-overzicht img{
		width:200px;
		margin:30px;
	}
	
	#contact{
		text-align:center;	
		
	}
	
	.form-row{
		margin-bottom:30px;
		
	}
	
	.form-row input,.form-row textarea{
		width:80%;
		max-width:500px	
	}
	
	.form-row .button, .form-row #frm-contact-privacy{
		width:auto;
	}
	
	#map{
		height:400px;
	}
	
	#dak-opsomming ul, #dakisolatie-content ul{
		list-style-type: none;
		
	}
	
	#dak-opsomming ul li, #dakisolatie-content ul li{	
		margin-bottom:20px;
		position:relative;
		padding-left:20px;
	}
	
	
	
	#leiendak-vergelijking{
		
	}
	
	.leien-item{
		background-color:#1d61a6;
		color:#ffffff;
		margin-bottom:30px;
	}
	
	.leien-item img{
		width:100%;
	}
	
	
	.leien-item>div{
		padding:40px;;
	}
	
	.leien-item>div ul{
		margin-left:20px;
	}
	
	.leien-item>div ul li{
		margin-bottom:20px;
	}
	
	#container-leien{
		display:flex;
		justify-content: space-around;
		flex-wrap: wrap;
			
	}
	
	#galerijdak{
		display: flex;
		wdith:100%;
		overflow: hidden;
	}
	
	
	#galerijdak img{
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
		display:inline-block;
		vertical-align:text-bottom;	
	}
	
	#container-dakisolatiefoto{
		background-repeat: no-repeat;
		background-size:cover;
		background-image: url("../img/isolatie.jpg");
	}
	
	#dakisolatie-content{
		max-width:700px;
		margin:0 auto;
		width:80%;
		padding:50px;
	}
	
	#container-derbigumlogo img{
		max-width:500px;
		width:80%;
		height:auto;
		padding-top:80px;
	}
}








@media screen and (max-width: 900px)  {		/* DIT IS VOOR DE MOBIELE BROWSERS */
	#cookiebanner{
		height:auto;
	}

	#cookiebanner-accept{
		top:55px;
		left:10px;
	}
	
	#cookiebanner-accept button{
		margin-bottom:20px;
	}
	

	nav{
		display:none;
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		background-color:#1e64b0;
		z-index:900;
		padding:20px 0px;
	}

	.nav-item{
		text-align:center;
		width:80%;
		margin:10px auto;
		color:#ffffff;
		padding:0px;
		font-size:1.2em;
		
		
	}

	.home-list{
		text-align:center;
	}

	.home-list ul{
		left:0px;
		list-style-type:none;
	}

	#header-container{
		position: relative;
		height:100px;
	}
	
	
	#header-logo img{
		width:140px;
		height:auto;
	}
	
	#header-logo{
		position: absolute;
		top:10px;
		left:0px;
	}
	
	#header-facebook{
		position: absolute;
		top:8px;
		right:70px;
	}
	
	#home-tekst{
		text-align:center;
		margin-bottom:40px;
	}
	
	#home-contact{
		text-align:center;
		border-top:10px solid #e5e5e5;
		padding-top:40px;
	}
	
	#banner-content{
		max-width:300px;
		width:80%;
	}
	
	#home-daken{
		background-color: #e5e5e5 ;
		padding-top:50px;
	}
	
	.home-daken-item{
		text-align:center;
		padding:10px;
		margin:10px auto;
	}
	
	
		
	footer{
		text-align:center;
	}
	
	.home-onderhoud-content{
		margin-bottom:50px;
	}
	
	#about-foto{
		text-align: center;
	}
	
	#about-foto p{
		position: absolute;
		bottom:5px;
		left: 50%;
	  	transform: translate(-50%, -50%);
		width:120px;
		color:#ffffff;
		text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
	}
	
	h2 small{
		display:block;
	}
	
	#galerij{
		text-align: center;
	}
	
	#galerij-overzicht{
		text-align:center;
		justify-content: space-around;
	}
	
	#dak-opsomming{
		text-align: center;
		
	}
	
	#dak-opsomming{
		text-align: center;
	}
	
	#dak-opsomming ul li:after{
		content:'+';
		font-weight:bold;
		color:#1d61a6;
		position:absolute;
		left:50%;
		top:22px;
		font-size:1.5em;
		margin-bottom: 20px;
	}
}




@media screen and (min-width: 900px)  {		/* DIT IS VOOR DE STANDAARD BROWSERS */
	#trigger-nav{
		display:none;
	}
	
	header{
		height:150px;
	}
	
	#header-container{
		width:90%;
		max-width: 1400px;
		margin:0 auto;
		position: relative;

	}
	
	#header-logo{
		position: absolute;
		top:20px;
		left:0px;
	}
	
	#header-facebook{
		position: absolute;
		top:20px;
		right:0px;
	}
	
	#header-container nav{
		position: absolute;
		top:90px;
		right:0px;
		width:70%;
		max-width:1000px;
	}

	#header-container nav{
		position: absolute;
		top:90px;
		right:0px;
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
	}
	
	nav .nav-item{
		display: inline-block;
		font-size:0.9em
		
	}
	
	#banner-content{
		max-width:350px;
		width:80%;
	}
	
	#banner-content h1{
		font-size: 3em;
	}
	
	#home-tekst{
		width:60%;
		max-width:600px;
		float:left;
	}
	
	#home-contact{
		width:25%;
		float:right;
		padding-left:40px;
		border-left:10px solid #e5e5e5;

	}
	
	
	
	#home-daken{
		background: linear-gradient(to bottom,  #ffffff 20%,#e5e5e5 20%,#e5e5e5 100%);
	}
	
	.home-onderhoud-content{
		float:left;
		width:50%;
		max-width:500px;
	}
	
	.home-onderhoud-waarom{
		float:right;
		width:30%;

	}
	
	
	#footer-container{
		display: flex;
		justify-content: space-between;
	}
	
	#footer-container >div{
		display:inline-block;
	}
	
	#about-foto{
		width:25%;
		float:right;
		padding-left:40px;
	}
	
	
	#about-foto img{
		max-width:200px;
		height: auto;
		width:90%;
	}
	
	#dak-opsomming{
		width:25%;
		float:right;
		padding-left:40px;
	}
	
	#dak-opsomming ul li:after{
		content:'+';
		font-weight:bold;
		color:#1d61a6;
		position:absolute;
		left:0px;
		top:0px;
		font-size:1.5em;
	}
	
	
	.leien-item{
		display:inline-block;
		width:400px;
	}
	
	#container-dakisolatie{
		width:70%;
		float:left;
	}
	
	
	#container-dakisolatiefoto{
		width:30%;
		float:right;
		min-height:400px;
	}
	
	#dakisolatie-content ul li:after{
		content:'+';
		font-weight:bold;
		color:#1d61a6;
		position:absolute;
		left:0px;
		top:0px;
		font-size:1.5em;
	}
	
	#container-derbigumlogo{
		width:30%;
		float:right;
		min-height:400px;
	}
}