/* 
Light Grey: #e3e3e3;
Dark Grey: #4e4d4d;
Red: #D81E05; 
*/

html{ height:100%; }

body{
	background-color: #fff;
	max-width: 100%;
	width: 100%;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	font-family: 'Roboto', sans-serif;
}

.flags{ height: 40px; float: left; text-align: right; }
.flags a{ line-height: 40px; margin-left: 20px; }
.flags ul, .flags li{ list-style-type: none; float: right; padding: 0; margin: 0; }

a, a:active, a:hover{ color:#d81e05; } 

h1,h2,h3,h4,h5,p,span{ font-family: 'Roboto', sans-serif; } 
h1,h2,h3,h4,h5{ color: #d81e05; }
h2, p{ font-size: 11pt; }

.wrapper{ overflow-x: hidden; min-height: 100%; max-width: 100%;}

/* Top settings */ 
.toprow{ background-color: #e3e3e3; padding: 10px 0; }
.toprow a{ float: left; }
.toprow a:hover{ text-decoration: none; }
.toprow a.phone{ margin-right: 20px; color: #d81e05; font-family: 'Roboto', sans-serif; font-size: 12pt; line-height: 40px; font-weight: 600; }
.toprow a.mail{ color: #000; font-family: 'Roboto', sans-serif; font-size: 9pt; text-transform: uppercase; line-height: 40px; font-weight: 600;  }

/* Logo settings */
.logo-container{ text-align: center; padding: 30px 0; }
.logo{ display: block; }
.logo img{ display: inline-block; max-width: 50%; }

/* Jumbotron settings */ 
.jumbotron {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: auto;
  padding: 150px 0;
  min-height: 432px;
  margin-bottom: 0;
}
.jumbotron h1{ color: #d81e05; font-weight: 900; font-size: 30pt; text-transform: uppercase; letter-spacing: 1px; }
.jumbotron p{ color: #fff; font-weight: 100; font-size: 14pt; }

/* Menu settings */ 
.menu{ margin-top: -40px; }
.menu ul{ display: table; padding: 0; width: 100%; }
.menu ul li{ display: table-cell; }
.menu ul li a{ display: block; padding: 30px 0; background-color: #e3e3e3; color: #000; text-transform: uppercase; font-size: 11pt; text-align: center; font-weight: 600; }
.menu ul li.active a{ background-color: #d81e05; color: #fff; }
.menu ul li a:hover{ color: #d81e05; text-decoration: none; }
.menu ul li.active a:hover{ color: #fff !important; }

/* Footer settings */
footer{ background-color: #4e4d4d ; padding: 50px 0 30px; color: #fff; font-size: 11pt; letter-spacing: 1px; }
footer .col-xs-12{ padding-top: 25px; }
footer .col-xs-12:first-of-type{ padding-left: 0; }
footer .heading{ color: #d81e05; font-size: 16pt; text-transform: uppercase; display: block; margin-bottom: 20px; font-weight: 900; }
footer a{ color: #fff; margin-left: 20px; }

footer .copyright{ margin-top: 50px; }
footer .copyright, footer .copyright a{ color: #000; font-size: 9pt; letter-spacing: 0; }
footer .copyright a{ margin-left: 0; margin-right: 10px; }

/* Default page settings */ 
section.content{ margin: 50px 0; }
section.content h2{ text-transform: uppercase; font-weight: 900; letter-spacing: 1px; }
section.content p{ line-height: 20pt; }
section.content .col-xs-12{ padding: 0; }
section.content .introtext{ margin-bottom: 20px; font-weight: 600; }

section.content .col-xs-2{ padding-left: 0; }
section.content .submenu{ background-color: #d81e05; display: block; padding: 20px; margin: 0 15px 0 0; }
section.content .submenu a{ display: block; color: #fff; text-transform: uppercase; line-height: 30px; }
section.content .submenu a.active{ text-decoration: underline; }
section.content a.btn{ display: block; margin: 0 15px 0 0; margin-top: 30px; background-color: #4e4d4d; color: #fff; text-transform: uppercase; padding: 10px; font-size: 10pt; border-radius: 0; }

/* Home specific styles */ 
.products{ background-color: #e3e3e3; padding: 75px 0 50px; }
.products .container{ padding: 0; }
.products .productitem{ text-align: center; margin-bottom: 25px; }
.products .productitem .image{ display: block; position: relative; }
.products .productitem .image .overlay{ background-color: #4e4d4d; opacity: 0.7; left: 0; right: 0; top: 0; bottom: 0; position: absolute; }
.products .productitem .image .overlay:hover{ opacity: 0; }
.products .productitem .image img{ max-width: 100%; }
.products .productitem .title{ display: block; text-align: center; color: #fff; background-color: #d81e05; text-transform: uppercase; padding: 20px 0; letter-spacing: 1px; font-weight: 600; }
.products .productitem .description{ display: block; font-size: 10pt; color: #000; font-weight: 600; line-height: 15pt; margin: 10px 0; text-align: center; min-height: 100px; }
.products .productitem a.productbtn{ display: inline-block; background-color: #4e4d4d; color: #fff; text-transform: uppercase; text-align: center; padding: 10px 20px; font-weight: 400; font-size: 10pt; }
.products .productitem a:hover{ text-decoration: none; }

section.gallery{ background-color: #e3e3e3; padding: 50px 0; }
section.gallery h2{ text-align: center; font-weight: bold; margin-bottom: 30px; text-transform: uppercase; font-weight: 600; font-size: 14pt; }
section.gallery div.galleryitem{ display: inline-block; padding-right: 10px; width: 33.33333333%; box-sizing: border-box; } 

div.gallery{ background-color: #e3e3e3; padding: 50px 0; margin-bottom: 50px; }
div.gallery h3{ font-weight: bold; margin-bottom: 0px; text-transform: uppercase; font-weight: 900; font-size: 11pt; letter-spacing: 1px; }
div.gallery div.galleryitem{ display: inline-block; margin-right: 2%; width: 32%; box-sizing: border-box; margin-bottom: 10px; } 

section.projects div.gallery{ padding: 0px; }
section.projects div.gallery .container{ width: 100% !important; max-width: 100% !important; }
section.projects div.gallery div.galleryitem:last-of-type{ margin-right: 0; }

/* Contactblock styles */
.contact { padding: 30px 0 50px; }
.contact .container{ padding: 0; }
.contact .container .col-sm-4{ padding-left: 0; }
.contact .container .col-sm-4 img{ max-width: 100%; }
.contact .container .col-sm-8{ padding-left: 0; }
.contact .container h3{ margin-bottom: 30px; text-transform: uppercase; font-weight: 600; font-size: 14pt; }

.contact .container .control-group{ margin-bottom: 30px; float: left; width: 100%; }
.contact .container .item-name, .contact .container .item-telephone{ width: 48%; }
.contact .container input, .contact .container textarea{ border: 1px solid #000000; padding: 20px; color: #000; font-size: 9pt; width: 100%; display: block;  }
.contact .container textarea{ height: 200px; }
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ text-transform: uppercase; color: #000000; opacity: 1; /* Firefox */ }
:-ms-input-placeholder { /* Internet Explorer 10-11 */ text-transform: uppercase; color: #000000; }
::-ms-input-placeholder { /* Microsoft Edge */ text-transform: uppercase; color: #000000; }
.contact .container .btn{ border-radius: 0;  background-color: #4e4d4d; color: #fff; text-transform: uppercase; text-align: center; padding: 10px 20px; font-weight: 400; font-size: 10pt; }
.contact .container{ padding: 0 15px; }
.contact .col-sm-12{ padding: 0; }

.pagina-contact .contact{ background-color: #e3e3e3; }

.fullwidth-filters,.show-mobile{ display: none; }
.mobilemenu{ display: none; }
.menu{ display: block; }
.justifyright{ text-align: right; }
.content td{ vertical-align: top; }
.pagina-projecten .content p{ display: inline-block; width: 45%; margin-right: 9.5%; vertical-align: top;}
.pagina-projecten .content p.justifyright{ text-align: right; margin-right: 0; }
.content p img{ max-width: 100%; }

.contact .container .col-sm-4.gmaps { padding: 0 0 0 20px; }
.gmaps iframe{ width: 100%; max-width: 100%; }

.subheading{ margin-top: 0; }

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

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

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

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

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

}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

}
@media only screen and (max-width: 767px){
	.row{ margin: 0; }
	.toprow a.phone{ margin-right: 15px; font-size: 10pt; }
	.logo img{ max-width: 90%; }
	.mobilemenu{ display: block; }
	.menu{ display: none; }
	.mobilemenu .navbar-default .navbar-collapse{ padding-top: 10px; border-top: 0; }
	.mobilemenu .navcontainer { border-top: 1px solid #e7e7e7 !important; } 
	.mobilemenu li{ list-style-type: none; display: block; }
	.mobilemenu li a{ display: block; text-align: center; margin-bottom: 20px; color: #000; font-size: 14pt; } 
	footer .heading{ font-size: 14pt; }
	.contact .container{ padding: 0 15px; } 
	.contact .container .col-xs-12{ padding: 0; margin-bottom: 30px; }
	section.content .introtext{ margin-bottom: 20px; }
	.pagina-projecten .content p{ display: inline-block; margin-right: 0; width: 100%; vertical-align: top; margin-bottom: 10px;}
	.pagina-projecten .content p.justifyright{ text-align: left; margin-right: 0; }
	.content p img{ max-width: 100%; }
}

@media only screen and (max-width: 767px){
	.flags{ max-width: 33%; width: 33%; }
	.toprow .pull-left{ width: 67%; max-width: 67%; }
	.mobilemenu .container{ padding: 0; }
}

/* Smartphones in landscape */ 
@media (min-width: 481px) and (max-width: 767px) {

}

@media (min-width: 570px) and (max-width: 767px) {

}

@media (min-width: 481px) and (max-width: 569px) {

}

/* Meeste Smartphones */
@media (min-width: 320px) and (max-width: 480px) {

}