@charset "utf-8";
/* Gibu Bestratingen 2020 redesign by Sven Uilhoorn*/



body {	
	font-family:'Raleway', serif;
	font-size:1.2em;
	color:white;
	line-height:1.6em;
	margin:0;
	padding:0;
	background:#151515;
	background:white;
}

html,body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 	
}

#container {
	width:100%;
	min-height:100%;
	}
	
#header {		
	max-width:750px;
	margin:0 auto;
}

#nav {
	line-height:56px;	
	font-weight:500;
	font-size:1.65em;
	
	font-size:1.5em;
	
	color:#3156A3;
	font-family: 'Lato'; 
	font-weight:900;
	text-transform:uppercase;
	max-width:750px;
	padding:16px 32px 0px 32px;
	margin:0 auto;
	margin-bottom:-2px;
	
	/* FIX DIT */
	}
	
#nav a{
	text-decoration:none;	
	color:#669900;
	padding:12px 12px 12px 12px;
}

#nav a:hover{
	text-decoration:none;	
	color:black;
	color:white;
	background:#669900;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

.active {
	background-color:#669900;
	color:#CCC;
	}
	
img.logo {
	width:180px;
	margin:0;
	padding:0;
}	

.project-thumbnail {
	height:140px;
	width:220px;	
	margin:0px 12px 12px 0px;
	display:inline-block;
	overflow:hidden;
	
	position:relative;
}

.project-thumbnail img {
	width:100%;
	transition: 0.5s all ease-in-out;
}

img.project-thumbnail {
	background:gray;height:140px;min-width:220px;margin:0px 12px 12px 0px;display:inline-block;
}

.project-thumbnail:hover img {
	transform:scale(1.2);
}

.project-image img{width:100%;}

img.project-image {
	background:gray;height:440px;min-width:100%;max-width:720px;margin:0px 12px 12px 0px;display:inline-block;
}

h1{
	font-size:3em;line-height:1.2em;
	color:white;
	font-family:'Lato';
	font-weight:900;
text-transform:uppercase;padding:0;}
h2{
	font-size:1.65em;line-height:1.2em;
	font-family:'Lato';
	font-weight:900;
	text-transform:uppercase;}

p{font-size:1.4em;line-height:1.4em}

p.label-categorie {padding:4px 12px;color:white;position: absolute;bottom: -24px;left: 0px;background:#669900;font-size:1.1em;
}

.image-number {display:inline-block;background:#669900;color:white;padding:0px 12px;width:10px;text-align:center;
/*font-size:.7em;*/
}

p.footer {font-size:.9em;}

a.footer-link {color:white;}

a.footer-link:hover {color:#669900;}

.text-box {
	max-width:680px;
	max-width:750px;
	padding:80px;
	margin:0 auto;
	font-family: 'Raleway'; 	
}

a.button, button {display:;max-width:;padding:24px;color:white;background:#669900;border:4px solid white;font-family: 'Lato';font-weight:900;text-decoration:none;text-transform:uppercase;font-size:1.2em;cursor:pointer;}

a.button:hover, button:hover {
	background:white;
	color:#669900;
	}
	
/* alleen gebruikt op pagina offerte, want andere achtergrondkleur */
a.button-offerte {display:block;max-width:420px;padding:24px;color:#669900;background:white;border:4px solid #669900;font-family: 'Lato';font-weight:900;text-decoration:none;text-transform:uppercase;font-size:1.2em;cursor:pointer;} 	
	
a.button-offerte:hover {
	background:#669900;
	color:white;
	}	

label {
	/*display:block;*/
	color:black;
	font-size:1.2em;	
}

input[type=text], input, textarea {
	width:100%;		
    padding: 16px 20px;
    margin: 8px 0;
    box-sizing: border-box;
	background-color:#F9F9F9;
	border:4px solid #F9F9F9;
	font-size:1.2em;
	font-family: 'Lato';	
	font-weight:900;
	color:#669900;
}

input[type=text]:focus, input:focus, textarea:focus {
	border:4px solid #669900;
}

input[type=checkbox] {
	margin-left:8px;
}

input[type=checkbox]:hover {
	cursor:pointer;
}

input[type=submit] {
	font-size:1.0em;
	line-height:1em;
    padding: 16px 20px;
    margin: 8px 0;
    box-sizing: border-box;
	border:none;
}

.button button-primary {
	font-size:1.em;
	line-height:1.6em;
	}

input[type=submit]:hover {
	text-decoration:none;
	background-color:#669900;
	cursor:pointer;
}


@media only screen and (max-width: 960px) and (min-width:751px) {

.text-box {
	padding:60px;
}
}


/*opgerekt, normaal 540px */

@media only screen and (max-width: 750px) and (min-width:601px) {

#nav {
	font-size: calc(1.0em + (20 - 13) * ((100vw - 540px) / (750 - 540)));
	line-height:48px;
	}

#nav a{
	padding: calc(10px + (16 - 8) * ((100vw - 540px) / (750 - 540)));
	font-weight:900;
}	

.text-box {
	padding:48px;
}

}


/* opgerekt, normaal 540px */

@media only screen and (max-width: 600px) {

#nav {
	padding:0px 32px 0px 32px;
	margin:0;
	font-size:1.1em;
	line-height:30px;
	}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
	width:100%;
    overflow: hidden;
}

li {
    float: left;
	width:50%;
}

li a {
    display: block;
	font-weight:900;
}

.active {
	background-color:#669900;
	color:#CCC;
	}
	
.project-thumbnail {min-width:100%;width:100%;height:50%;border:12px green;}
	
.project-thumbnail img {min-width:500px;width:500px;margin:12px 0px;}

.project-thumbnail:hover img {
	transform:scale(1);
}

img {max-width:100%;}

img.logo {width:120px; display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;}

h1 {font-size:1.8em;}
h2 {font-size:1.4em;}

p.label-categorie {bottom: -10px;}

br:h1 {display:none;}

br.remove-mobile {display:none;}

.text-box {
	padding:32px;
}

a.button {display:block;margin:bottom:100px;text-align:center;}
}