/* donkerblauw: #004666   
   lichtblauw: #609ab3
   rood: #CB051E
*/

body {
	background-color: #ffffff;
	font-family: 'Roboto Slab', serif;
	font-size: 14px;
}

p a {
	color: #333333;
	text-decoration: underline;
	-moz-text-decoration-color: #ffffff;
	text-decoration-color: #ffffff;
}

.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a.active {
	color: #afcbda;	
}


h1 {
	font-family: 'Roboto Slab', serif;
	font-size: 28px;
	color: #004666;
	font-weight: normal;
}

.navbar {
	background-color: #ffffff;
}

.navbar-toggle {
	background-color: #004464
}

.navbar-inverse {
	background-color: #004464;
	margin-top: 0px;
}

.navbar {
	background-color: #ffffff;
	height: 68px;
	min-height: 68px;
}

.navbar-inverse .navbar-nav>li>a {
	max-width: 130px;
	word-break: break-word;
	text-align: center;
	color: #004464;
	font-size: 14px;
	font-weight: 900;
	line-height: 15px;
}

.navbar-inverse .navbar-nav>li>a:hover {
	color: #609ab3
}

.navbar-inverse .divider {
	position: absolute;
	left: 100%;
	top: 15px;
	height: 30px;
	border-left: 2px solid #609ab3;
}

.navbar-inverse .navbar-nav>li:last-child .divider {
	display: none;
}

.navbar {
	border-bottom: 14x solid red
}

.navbar li a {
    margin-top: 4px;
}

.navbar:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 20px;
	background: linear-gradient(to right, #004666, #001c32);
	bottom: -1px;
	left: 0;
	z-index: -1
}



/*background: #004666; /* For browsers that do not support gradients 
    background: -webkit-linear-gradient(-90deg, #609ab3); /* For Safari 5.1 to 6.0 
    background: -o-linear-gradient(-90deg, #609ab3, #004666); /* For Opera 11.1 to 12.0 
    background: -moz-linear-gradient(-90deg, #609ab3, #004666); /* For Firefox 3.6 to 15 
    background: linear-gradient(90deg, #609ab3, #004666); */

#logo {
	position: relative;
	top: -6px;
}

.blue {
	background-color: #afcbda;
	color: #000000;
	margin-top: 18px;
}

.darkblue .inhoud,
.footercontact,
footer {
	background: linear-gradient(to right, #004666, #001c32);
	color: #ffffff;
	padding-bottom: 20px;
	margin-bottom: 0px;
}

footer { font-size: 14px; }


/*margin-bottom: 30px; }*/

.footercontact .tekst {
	margin-top: 20px;
	float: right;
}

.contactformulier {
	border: 10px solid #afcbda;
	padding: 20px 0;
	margin-top: 60px;
	margin-bottom: 50px;
}

.contactformulier .introtekst {
	color: #609ab3;
	margin-bottom: 20px;
}

.contactformulier input,
.contactformulier textarea {
	background-color: #afcbda;
	border: none;
	width: 100%;
	min-width: 100%
}

.contactformulier .postzegel {
	max-width: 95px;
	text-align: center;
	border: 1px solid #afcbda;
	color: #afcbda;
	float: right;
	padding: 10px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.contactformulier label {
	font-weight: 300;
}

.footercontact {
	min-height: 200px;
}

.lijn1,
.lijn2,
.lijn3,
.lijn4,
.lijn5,
.lijn6 {
	height: 200px;
	width: 0px;
	position: relative;
	border-left: 1px solid #ffffff;
	float: left;
	margin-left: 0px;
}

.lijn2,
.lijn3,
.lijn4,
.lijn5,
.lijn6 {
	margin-left: 40px
}

.footercontact a {
	color: #ffffff;
	text-decoration: none;
}

.buttons button {
	float: right;
	background-color: #004666;
	border-color: #004666;
	text-transform: uppercase
}

.darkblue h1 {
	color: #ffffff;
}

.row.homepage,
.row.inhoud,
.row.categorie {
	margin-left: 0;
	margin-right: 0;
}

.carousel {
	top: 18px;
	margin-bottom: 18px;
}

header.carousel {
	height: 550px;
}

#bs-example-navbar-collapse-1 {
	position: relative;
	left: 0px;
}

.categorie {
	margin-top: 50px;
}

.categorie img,
.projecten img {
	min-width: 100%;
	height: auto;
	max-width: 100%;
}

.categorie .panel-heading {
	background-color: #CB051E;
	height: 45px;
	border-radius: 0;
}

.categorie .panel-heading h2 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	font-size: 22px;
}

.categorie .panel-body,
.projecten .panel-body {
	padding: 0;
}

.categorie .panel-heading a {
	color: #ffffff;
}

.categorie .col-md-6 {
	
}

.panel {
	border-radius: 0;
	border: none;
	box-shadow: none;
}

.projecten .panel-heading h2 {
	font-size: 18px;
	font-weight: 500;
	color: #ffffff;
	margin-top: 0;
	margin-bottom: 0px;
	vertical-align: top;
	max-width: 80%;
}

.projecten .panel-heading {
	height: 45px;
	padding: 2px 10px;
	background: #004666;
	/* For browsers that do not support gradients */
	background: -webkit-linear-gradient(90deg, #004666, #001c32);
	/* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(90deg, #004666, #001c32);
	/* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(90deg, #004666, #001c32);
	/* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, #004666, #001c32);
	/* Standard syntax */
	border-radius: 0px; 
}

.fa-info-circle {
	color: #ffffff;
	float: right;
	font-size: 30px !important;
	margin-top: 5px;
}

.project {
	position: relative;
}

.project:hover .project-tekst {
	opacity: 1;
	position: absolute;
	top: 0px;
	font-size: 18px;
	-webkit-transition: opacity .25s ease;
	padding: 35px 0;
	height: 100%;
}

.project .project-tekst {
	opacity: 0;
	height: 0px;
}

.project .project-tekst p {
	padding: 0px 10px;
}

#navigatie .fa {
	float: right;
	margin-right: 15px;
	font-size: 30px;
}

.projectgrootschalige .fa {
	float: left;
	margin-right: 15px;
	font-size: 30px;
	color: #337ab7
}

.projectknop {
	font-family: 'Roboto Slab', serif;
	background-color: #afcbda;
	color: #004666;
	padding: 10px;
	font-size: 18px;
	border-radius: 0 0 0 15px;
	padding-left: 13px;
}

.grootschaligknop {
	font-family: 'Roboto Slab', serif;
	background-color: #004666;
	padding: 10px;
	font-size: 18px;
	border-radius: 0 0 15px 0;
	color: #afcbda;
}

.grootschaligknop a {
	color: #ffffff;
}

#feature {
	background-color: #ffffff;
	padding-top: 30px;
}

.project .overlay {
	background: rgba(0, 0, 0, 1);
	text-align: center;
	opacity: 1;
	-webkit-transition: opacity .25s ease;
}

.project:hover .overlay {
	opacity: .5;
}

.project1 .col-md-4,
.projectdeel .col-md-4 {
	padding-left: 0px;
}

.projectdeel { margin-top: 20px; }

.witregel {
	height: 30px;
	background-color: #ffffff;
}

#navigatie {
	background-color: #ffffff;
	margin-top: 30px;
}

.zoekknop {
	padding-left: 0px;
	padding-right: 30px;
	margin-top: 30px;
	height: 60px;
}

.search-box {
	padding-left: 10px;
	font-size: 28px;
	border: 2px solid #afcbda;
	border-radius: 15px;
	border-right: none;
	padding-left: 0;
	height: 52px;
}

input.form-control.search-box {
	padding-left: 25px;
}

.input-group-btn {
	font-size: 32px;
	color: #afcbda;
	border: 2px solid #afcbda;
	border-radius: 0 15px 15px 0;
	border-left: none;
}

.projectgrootschalige {
	background-color: #AFCBDA;
	margin-top: 30px;
	padding: 10px;
	font-size: 18px;
	border-radius: 15px;
	color: #afcbda;
}

.btn-secondary {
	background-color: #ffffff;
}

.grootschaligeprojecten {
	max-height: 155px;
	overflow: hidden;
	position: relative;
	-webkit-transition: max-height 0.8s ease-in-out;
	-moz-transition: max-height 0.8s ease-in-out;
	transition: max-height 0.8s ease-in-out;
}

.grootschaligeprojecten.open {
	height: auto;
	max-height: 2000px;
	overflow: hidden;
	padding-bottom: 30px;
	max-height 0.8s ease-in-out;
	-moz-transition: max-height 0.8s ease-in-out;
	transition: max-height 0.8s ease-in-out;
}

.grootschaligeprojecten h2 {
	font-size: 20px;
	margin-left: 10px;
	color: #004666;
}

.grootschaligeprojecten .col-md-4 p {
	padding: 0;
	word-wrap: break-word;
}

.grootschaligeprojecten img {
	max-width: 100%;
}

.grootschaligeprojecten .col-md-8 iframe {
	min-width: 100%;
	min-height: 350px;
}

.grootschaligeprojecten .project2 ps {
	max-height: 350px;
	overflow: hidden;
}

.grootschaligeprojecten .openbutton,
.grootschaligeprojecten .closebutton {
    position: absolute;
    top: 0px;
    right: 30px;
    color: #004666;
    font-weight: bold;
}

.grootschaligeprojecten.open .openbutton,
.grootschaligeprojecten .closebutton {
	display: none;
}

.grootschaligeprojecten.open .closebutton {
	display: inline;
}

.grootschaligeprojecten a {
    text-decoration: none;
    border-bottom: 1px solid #004666;
	  font-size: 14px;
		top: -10px;
    position: relative;
}

.homepage img {
	width: 100%;
	height: auto;
}

h1,
p {
	padding: 0 10px
}

footer .col-lg-12 {
	background: linear-gradient(to right, #004666, #001c32);
	text-align: center;
	color: #ffffff;
	padding: 10px 0
}

footer a {
	color: #ffffff;
}


	
.top { height: 60px; }

.downloads h2 { border-bottom: 1px solid #004666; margin-left: 10px; font-size: 26px; }
.datasheet { margin-left: 10px; }
.dsatasheetPreview { left: 50%; top: 40%; position: absolute; opacity: 0; max-width: 80%; max-height: 80%; transform: translate(-50%,0); z-index: 9999;}
#downloadPopup { position:absolute; max-width: 80%; background: #ffffff; max-height: 80%; opacity: 1; left: 50%; top: 50%; z-index: 2; -ms-transform: translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); display: none;}
#overlay { z-index:1; background: rgba(98,98,98,0.8); position: absolute; left: 0; top: 0; min-height: 100%; min-width: 100%; display:block; display: none;}
#popupDownload i, #closePopup i, #turnPages i { color: #ffffff; background-color: #004666; position: absolute; top: 0px; right: 0; padding: 6px; }
#popupImage, #popupImageAchter { max-width: 100%; }
#turnPages i { top: 25px; padding: 5px; right: 0px; width: 25px; }
#popupDownload i { top: 50px; padding: 5px; }

.datasheet img { -webkit-transition: opacity 1s; transition: opacity 1s; opacity: 0; border: 25px solid #ffffff; }
.datasheet a:hover { color: #ffffff; background-color: #004666; text-decoration: none;}
.distributeurs { margin-top: 40px; }
.distributeur div { float: left; }
.distributeur div.logo { text-align: center;  vertical-align: middle; valign: center; }
.distributeur { border-top: 2px solid #004666; padding-bottom: 15px; padding-top: 15px; }
.distributeur:last-child {  border-bottom: 2px solid #004666;  }
.distributeur .tekst { font-style: italic; }
.distributeur div.midden { display: table-cell; width: 100%; }
.distributeur img { margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; }
.distributeur a { color: rgb(51, 51, 51); }
.distributeur a:hover {  text-decoration: none; border-bottom: 1px solid  rgb(51, 51, 51); padding-bottom: 2px; }
.ruimte { padding-top: 40px; }

ul#hoofdmenu a { min-width: 120px; font-family: 'Roboto Slab', serif;}
ul.sub-menu { display: none; text-align: center; }
ul.sub-menu  li{ background: #ffffff; padding: 5px 10px; list-style: none;}
ul.sub-menu li a { color: #001C32;  font-size: 14px; font-weight: 400; line-height: 15px;}
ul.sub-menu li a:hover { font-weight: 900; text-decoration: none;}
ul.sub-menu li div.divider { display: none; }
ul.navbar-nav li:hover ul.sub-menu { display: inline; font-weight:900; }
.navbar-inverse .navbar-nav>li>a,
.navbar-inverse .navbar-nav>li>a {
	max-width: 130px;
	word-break: break-word;
	text-align: center;
	color: #004464;
	font-size: 14px;
	font-weight: 900;
	line-height: 15px;
}
.navbar-inverse .navbar-nav>li>a:before {
    content: '';
    border-left: 2px solid #609ab3;
    position: absolute !important;
    height: 80% !important;
    left: -3px !important;
    top: 25% !important;
	  max-height: 27px; 
}
.navbar-inverse .navbar-nav>li:first-child>a:before { border: none; }
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover { color: #afcbda; background: none;}
.max350 { max-width: 365px; margin-right: 15px;}

.btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

.engels .button {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
		color: #fff;
}

@media (min-width: 768px) {
	.navbar-nav>li>a {
		padding-top: 10px !important;
	}
	.container {
		width: 800px !important;
	}
	
}

@media (min-width: 948px) {
	.panel_left {
		padding-right:5px;	
	}

	.panel_right {
		padding-left:5px;
	}
	.col-md-8 {
    width: 66.66666667% !important;
		float: left;
	}
	.col-md-4 {
    width: 33.33333333% !important;
		float: left;
	}
	.col-md-12 {
    width: 100% !important;
		float: left;
	}
}

@media (min-width: 600px) {
	.col-md-6 {
			width: 50%; float: left;
	}
}

@media (min-width: 1300px) {
	.container {
		width: 1170px !important;
	}
	.grootschaligeprojecten {
		max-height: 225px; 
	}
}


@media (min-width: 768px) {
	.navbar-right {
		float: left!important;
		margin-left: 50px;
	}
}

@media ( max-width: 1300px) {
.navbar-nav { margin: 0px -13px 0 -15px;	}
	.nav>li>a { padding: 10px 6px; }

}

@media ( max-width: 947px) {
	.postzegel {
		display: none;
	}
	.contactformulier {
	  padding-bottom: 45px;
	}
	.projectdeel { max-height: 155px; }
	.navbar-inverse .navbar-nav>li>a { max-width: 115px; }
	}

@media ( max-width: 770px) {
    ul.sub-menu  li{ background: #ffffff; text-align: center; }
	ul.sub-menu  li a { color: #001C32;}
    li div.divider { display: none; }
	.lijntjes { display: none;}
	.navbar-inverse .navbar-nav>li>a { max-width: 100%; }
	.navbar li a { margin-top: 0px; }
	.navbar li { background-color: #ffffff; }
	.navbar-collapse { border-top: none;
     -webkit-box-shadow: none; 
     box-shadow: none; 
	}
	#downloadPopup { max-width: 90%; max-height: 90%; width: 71%; height: auto; margin-top: 34px;	}
	.distributeur .tekst, .distributeur .adres { margin-top: 20px;  }
}


	
@media (max-width: 600px) {
	.zoekknop { padding-right: 0px; }
	.grootschaligeprojecten img { width: 100%; }
	.grootschaligeprojecten { max-height: none;}
	.projectdeel { max-height: 999px;}
	.grootschaligeprojecten .col-md4, .grootschaligeprojecten .col-md-8, .grootschaligeprojecten .col-sm-12 { padding-left: 0px; padding-right: 7px; }
	.grootschaligeprojecten p, .grootschaligeprojecten h2 { margin-left: 0px; padding: 0px;  }
	header.carousel, header.carousel .item, header.carousel .item.active, header.carousel .carousel-inner { height: 300px; }
}