* {margin:0; padding:0; }
html, body { height: 100%; }
li {list-style:none;}
h1,h2,h3,h4,h5,h6 {font-family: 'Roboto Slab', serif; color:#464646; font-size:30px; font-weight: 300;}
a{text-decoration:none; color:#464646; font-family: 'Muli', sans-serif; font-weight:300;}
p {color:#464646; font-family: 'Muli', sans-serif; font-weight:300; padding:0 15px;}
img {border:none;}



.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -50px; }
.button {border:solid 2px; height:35px; display:block; width:130px; text-align:center; margin: 30px auto; font-family: 'Roboto Slab', serif; line-height:30px;}
.red {color:#e41313; border-color:#e41313;}
.yellow{color:#ffea00; border-color:#ffea00;}
.green {color:#75b72a; border-color:#75b72a;}
.blue {color:#009fe3; border-color:#009fe3;}
.icon {border:solid 3px; border-radius:50%; height:80px; width:80px; margin: 25px auto; display:block;}
.icon.red {background:url('/img/logoie.png') no-repeat 25px 15px;}
.icon.yellow {background:url('/img/logogs.png') no-repeat 16px 16px;}

.icon.green {background:url('/img/logowp.png') no-repeat 17px 15px;}

.icon.blue {background:url('/img/logohdv.png') no-repeat 13px 15px;}


header {height:100px;}
header .c5 img {height:60px; margin: 20px; width:auto;}
header nav ul {overflow:hidden; width:100%;}
header nav ul li {float:left; line-height:100px; width:auto; margin-right:24px;}
header nav ul li a {font-family: 'Roboto Slab', serif; font-size:20px;}
header nav ul li ul {background:white; margin: -4px 0 0 0; width: 275px; display:none; position: absolute;}
header nav ul li:hover ul{display:block; cursor:pointer;}
header nav ul li ul li {float:none; line-height: normal; width: 100%; padding: 10px 5px;}
header nav ul li ul li a {font-size:20px;}
header nav ul li a:hover, header nav ul li ul li a:hover {font-weight:400;}

/*Style 'show menu' label button and hide it by default*/
.show-menu { text-decoration: none; color: #464646; padding: 10px 5%; display: none; font-family: 'Roboto Slab', serif; font-size:24px; font-weight: 300;text-transform:uppercase;   }
.show-menu i {float:right;}
/*Hide checkbox*/
input[type=checkbox]{ display: none; }
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{ display: block; }
/* END Navigation */

.banner {background:url('../img/background.jpg');}
.banner.large {height:550px;}
.banner.large {text-align:center; }
.banner.large h1 {color:white; font-size:60px; margin:0; padding-top: 150px;}
.banner.large h2 {color:white; font-size:48px; font-weight:100;}
.home-blocks { background:#eeeeee; padding-bottom:50px;}
.home-blocks .row {}
.home-blocks h2{text-align:center; font-size:24px; height:80px;}
.home-blocks .c3 {background:white; position:relative; margin-top:-50px;}
.block1 {border-top: 5px solid #e41313;}
.block1:hover .button {background:#e41313; color:white;}
.block1:hover .icon.red {background: #e41313 url('/img/wlogoie.png') no-repeat 25px 15px;}
.block2 {border-top: 5px solid #ffea00;}
.block2:hover .button {background:#ffea00; color:white;}
.block2:hover .icon.yellow {background: #ffea00 url('/img/wlogogs.png') no-repeat 16px 16px;}
.block3 {border-top: 5px solid #75b72a;}
.block3:hover .button {background:#75b72a; color:white;}
.block3:hover .icon.green {background: #75b72a url('/img/wlogowp.png') no-repeat 17px 15px;}
.block4 {border-top: 5px solid #009fe3;}
.block4:hover .button {background:#009fe3; color:white;}
.block4:hover .icon.blue {background: #009fe3 url('/img/wlogohdv.png') no-repeat 13px 15px;}
.banner.small {height:250px;}

section.slogan {height:250px; background:url('/img/kwasten.jpg');}
section.slogan span {font-size:48px; color:white; text-align:center; line-height:200px; display:block; position: relative; font-family: 'Roboto Slab', serif;}
section.slogan.overlay { position: relative; }
section.slogan.overlay:before { position: absolute; content:""; top:0; left:0; width:100%; height:100%; }
section.slogan:before { background-color: rgba(0,159,227,0.6); }
section.slogan .arrow-down:before, section.slogan .arrow-down:after { box-sizing: border-box; content: " "; position: absolute; display: block; width: 50%; height: 50px; border-bottom: 50px solid white; }

section.slogan .arrow-down:before { left: 0; border-right: 35px solid transparent; border-left: 0; }
section.slogan .arrow-down:after { right: 0; border-left: 35px solid transparent; border-right: 0; }

section .button:hover {background:#009fe3; color:white;}

section.partners-banner {height:150px; background:#eeeeee;margin-top:50px; text-align: center;}
section.partners-banner a{height:70px; margin:40px; display:inline-block;}
section.partners-banner a img{height:100%; width:auto; -webkit-filter: grayscale(100%); filter: grayscale(100%);}
section.partners-banner a img:hover{-webkit-filter: grayscale(0%); filter: grayscale(0%);}

section.offerte {text-align:center;font-family: 'Roboto Slab', serif;}
section.offerte p {font:inherit;}
section.offerte hr {margin:0 auto; border:none; border-top:1px solid #646463;}

section.contact-footer{height:600px; background:url('/img/levedeeenheidvandeschilder.jpg');}
section.contact-footer.overlay { position: relative; }
section.contact-footer.overlay:before { position: absolute; content:""; top:0; left:0; width:100%; height:100%; }
section.contact-footer:before { background-color: rgba(0,159,227,0.6); }
section.contact-footer .row { position: relative;}
table {color:#333437; font-family: 'Muli', sans-serif; font-weight:300; padding:10px 15px;}
section.contact-footer form input {padding:10px 20px; border:none; background:rgba(255,255,255,0.6); width:60%; margin-bottom:10px;  font-family: 'Muli', sans-serif; font-weight:300; color:#333437;}
section.contact-footer form textarea {padding:10px 20px; border:none; background:rgba(255,255,255,0.6); width:80%; margin-bottom:10px; height:175px;  font-family: 'Muli', sans-serif; font-weight:300; color:#333437;}
section.contact-footer form input[type="submit"]{background:#00577c; color:white; height:50px; width:200px;} 
::-webkit-input-placeholder {
   color:#333437;
}

:-moz-placeholder { /* Firefox 18- */
   color:#333437; 
}

::-moz-placeholder {  /* Firefox 19+ */
   color:#333437;  
}

:-ms-input-placeholder {  
   color:#333437;  
}
section.contact-footer table td {padding: 24px 0;}
section.contact-footer table td i {color:#00577c; font-size:30px; margin: 0 25px;}

section.diensten h1 {text-align:center;}
section.diensten h3 {text-align:center; font-size:22px; margin-top:20px;}
section.diensten .button {width:325px; margin-top:10px;}
section.diensten .button.red:hover {background:#e41313; font:white;}
section.diensten .button.yellow:hover {background:#ffea00; font:white;}
section.diensten .button.green:hover {background:#75b72a; font:white;}
section.diensten .button.blue:hover {background:#009fe3; font:white;}
section.overige-diensten h3 {text-align:center;}
section.overige-diensten h4{font-size:20px;}
section.overige-diensten .block1, section.overige-diensten .block2, section.overige-diensten .block3, section.overige-diensten .block4 {text-align:center; border:none; }
section.overige-diensten .grid:not(:first-child) {margin-bottom: 30px;}

/* Foto carousel */

.jssora05l, .jssora05r { display: block; position: absolute; /* size of arrow element */ width: 40px; height: 40px; cursor: pointer; background: url(../img/a17.png) no-repeat; overflow: hidden; }
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }
.jssora05l.jssora05ldn { background-position: -250px -40px; }
.jssora05r.jssora05rdn { background-position: -310px -40px; }

.jssort01 { position: absolute; /* size of thumbnail navigator container */ width: 800px; height: 100px; }
.jssort01 .p { position: absolute; top: 0; left: 0; width: 72px; height: 72px; }
.jssort01 .t { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.jssort01 .w { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } 
.jssort01 .c { position: absolute; top: 0px; left: 0px; width: 68px; height: 68px; border: #000 2px solid; box-sizing: content-box; background: url(../img/t01.png) -800px -800px no-repeat; _background: none; }
.jssort01 .pav .c { top: 2px; _top: 0px; left: 2px; _left: 0px; width: 68px; height: 68px; border: #000 0px solid; _border: #fff 2px solid; background-position: 50% 50%; }
.jssort01 .p:hover .c { top: 0px; left: 0px; width: 70px; height: 70px; border: #fff 1px solid; background-position: 50% 50%; }
.jssort01 .p.pdn .c { background-position: 50% 50%; width: 68px; height: 68px; border: #000 2px solid; } 
* html .jssort01 .c, * html .jssort01 .pdn .c, * html .jssort01 .pav .c { /* ie quirks mode adjust */ width /**/: 72px; height /**/: 72px; }




section.partners h2 {font-size:20px;}
section.partners p {padding:0; margin-top:10px;}
section.partners .row {margin: 0 0 40px 0;}
section.partners .row i {margin: 5px 15px 5px 0;}
section.partners .row .glansgarant-cijfer {margin-left: 35px; margin-top: 20px; width: 97px; font-size: 40px; display: inline-block; overflow: hidden; padding: 20px 21px; height: 139px;background:url('https://www.klantenvertellen.nl/widgets/images/v1_bg_blue.png');}
section.partners iframe {margin:20px auto;    display: block;}

.offerte-page img{width:70%;}
form.offerte-form  {}
form.offerte-form  input,  form.offerte-form select{background:#efefef; border:none; padding:5px; width: 100%; max-width: 350px; margin-bottom: 25px; border-radius:0;}
form.offerte-form  textarea {background:#efefef; border:none; padding:5px; width: 100%; max-width: 400px; height:150px; border-radius:0;}
form.offerte-form  label{display:inline-block; width:140px;}
form.offerte-form   input[type="submit"] {border:2px solid #75b72a; background:none; margin:30px 0; width:250px; line-height:normal; border-radius:0;}
form.offerte-form   input[type="submit"]:hover {background:#75b72a;}


section.contact-page img{width:70%;}
section.contact-page form {}
section.contact-page form input{background:#efefef; border:none; padding:5px; width: 100%; max-width: 350px; margin-bottom: 25px; border-radius:0;}
section.contact-page form textarea {background:#efefef; border:none; padding:5px; width: 100%; max-width: 400px; height:150px; border-radius:0;}
section.contact-page form label{display:inline-block; width:140px;}
section.contact-page form  input[type="submit"] {border:2px solid #75b72a; background:none; margin:30px 0; width:250px; line-height:normal; border-radius:0;}
section.contact-page form  input[type="submit"]:hover {background:#75b72a;}

.push { height: 50px; }
footer {min-height:50px; background:#00577c; color:white; line-height:50px; text-align:center;}
footer p, footer a {color:white;}


@media all and (max-width: 768px) and (min-width: 600px) {
 section.slogan { height:200px;}
}

/* =Media query for iPad and tablets
-------------------------------------------------------------- */
@media handheld, only screen and (max-width: 768px), only screen and (max-device-width: 768px) and (orientation:portrait){
	img {max-width:80%;}
	.c4 img {width:initial;}
	header .c5 img { margin:20px auto;}
	header {height:auto;}
	
		/*Make dropdown links appear inline*/
	nav ul {
		position: static;
		display: none;
		width:90%; margin:0 auto;
		padding:0;
	}
	/*Create vertical spacing*/
	nav li {
		margin-bottom: 1px;
		border-bottom:1px solid #bdbdbd;
		text-align:center; 
	}
	nav li:first-child {border-top:1px solid #BDBDBD;}
	/*Make all menu links full width*/
	nav ul li, li a {
		width: 100%;
		
	}
	header nav ul li {  padding: 10px 0; float:none; line-height:normal; width:100%;}
	header nav ul li a:hover, header nav ul li a.active {border:none;}
	/*Display 'show menu' link*/
	.show-menu {
		display:block;
		margin: 10px auto;
	}
	
	header nav ul {float:none;}
	header nav ul li ul {display:block; position: static; width:auto; margin:0;}
	header nav ul li ul li {border:none;}
	
	.banner.large h1 {color:white; font-size:60px; margin:0; padding-top: 75px;}
	
	/*.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12 {padding-left:20px;padding-right:20px;}*/
	.home-blocks .c3 {background:white; position:relative; margin-top:20px; padding-bottom:1px;}
	section.slogan span{ padding: 51px 0; line-height:normal; font-size:37px;}
	
	section.partners-banner {height:auto;}
	section.contact-footer { height:auto;}
	section.contact-footer form {margin-top:50px;}
	section.contact-footer form input, section.contact-footer form textarea {width:100%; border-radius:0;}
}