/* Give the image on the archive page the same margin as H2 and a with of 100% */
/* Size the images on archive/single/page */
.img-archive {
	margin-top:	25px;
	width:100% !important;
}

.img-left {
	display:inline;
	float:left;
	margin-right: 15px;
	margin-bottom: 15px;
}

.img-right {
	display:inline;
	float:right;
	margin-left: 15px;
	margin-bottom: 15px;
}

  @font-face {
    font-family: 'Museo100-Regular';
    src: url('fonts/museo100-regular.eot');
    src: local('☺'), url('fonts/museo100-regular.ttf') format('truetype'), url('fonts/museo100-regular.svg#webfont') format('svg');
  }

  @font-face {
    font-family: 'Museo300-Regular';
    src: url('fonts/museo300-regular.eot');
    src: local('☺'), url('fonts/museo300-regular.ttf') format('truetype'), url('fonts/museo300-regular.svg#webfont') format('svg');
  }

  @font-face {
    font-family: 'Museo500-Regular';
    src: url('fonts/museo500-regular.eot');
    src: local('☺'), url('fonts/museo500-regular.ttf') format('truetype'), url('fonts/museo500-regular.svg#webfont') format('svg');
  }

body.modal-open {
	margin-right:0px;
}
.modal-body p {
	font-size:12px;
	line-height:23px;
}

h1 {
	font-family: 'Montserrat', sans-serif;
	font-size:76px;
	text-transform:uppercase;
}

h2 {
	border-bottom:dotted 1px #a8a8a8;
	padding-bottom:25px;
	font-family:"Museo100-Regular";
	font-size:36px;
	margin-bottom:25px;
	line-height:44px;
	color: #333333;
}

h3 {
	font-family:"Museo100-Regular";
	font-size:20px;
	color:#565656;
	margin-top:3px;
	margin-bottom:3px;
}

p {
	font-family: 'Droid Serif', serif;
	font-size:16px;
	line-height:32px;
}

/*navigatie balk*/
.nav {
	padding-top:5px;
}
.navbar {
	margin-bottom:0px;
	border-radius:0px;
	padding:0px;
	background:white;
	font-family:"Museo100-Regular";
	font-size:15px;
	color:#565656;
	border:none;
}
.navbar li {
	margin-left:30px;
}
.navbar li a {
	padding-left:0px;
	padding-right:0px;
	padding-bottom:0px;
	text-transform: lowercase;
}
.navbar li a:hover {
	border-bottom: 1px dotted #e4312f;
}
.navbar-brand {
	padding:0px;
}

.brand-title {
	text-transform: uppercase;
	font-family: Museo500-Regular;
	font-size: 15px;
	word-spacing: -3px;
	color: #000;
	display: inline;
	margin-left: 20px;
}

.brand-title span {
	color: #f20622;
}

/*main*/

#bg { 
	width:100%; 
	position:relative; 
	overflow:hidden; 
	margin-top:22px; 
	text-align:center; 
	z-index:-1;
}

#bg img#background { 
	position:absolute; 
	top:0px; left:0px; 
	right:0px;  
}

.doenjulliedat {
	margin-top:-107px;
	text-align:center;
	height:97px;
	width:100%;
	background: url('img/arrowdown.png') center 30px no-repeat;
}

.doenjulliedat h5{
	font-family: 'Montserrat', sans-serif;
	font-size:15px;
	text-transform:uppercase;
	color:#fff;
}
.white {
	margin-top: 59px;
	height:22px;
	width:100%;
	background: url('img/bgarrow.png') center center;
}


.tekstcolom {
	position:absolute;
	text-align:center;
	color:white;
	top:25%;
	width: 436px;
	left: 50%;
	margin-left: -218px;
}

.tekstcolom h1 {
	font-size: 72px;
	line-height: 88px;
	margin-bottom: 20px;	
}

.tekstcolom p {
	font-family: 'Montserrat', sans-serif;
	font-size: 22px;
	text-transform: uppercase;
	font-weight: 400;
	margin-bottom: 6px;
}

/*over ons*/

#overons {
	background:url('img/bg.jpg');
	padding-top: 65px;
}

#wiezijnwij {
	background:url('img/bg.jpg');
	padding-top: 65px;
}



/*showcase*/

#showcase {
	background:url('img/bg2.jpg');
	padding-top:65px;
}
.images {
	margin-top:40px;
}
.images .col-sm-4 {
	margin-bottom:40px;
}
.images .tekstshowcase{
	color:#ec3002;
	font-family:"Museo100-Regular";
	font-size:13px;	
}

/* wie zijn wij */

#wiezijnwij .jelle {
	text-align: right;
	height: 480px;
	padding-top: 70px;
	z-index: 10;
}

#wiezijnwij .jelle h3 {
	color: #F20659;
	margin-bottom: 10px;
}

#wiezijnwij .jeroen h3 {
	color: #F20659;
	margin-bottom: 10px;
}

#wiezijnwij .jeroen {
	text-align: left;
	height: 400px;
	padding-top: 70px;
	z-index: 10;
}

#wiezijnwij .jelle p, #wiezijnwij .jeroen p {
	font-size: 14px;
	line-height: 30px;
}

#wiezijnwij .wij {
	position: relative;
}

#wiezijnwij .wij .qrulmedia {
	text-align: center;	
	position: absolute;
	width: 100%;
	top: 0;
	border-bottom: dotted 1px #cecece;	
}

/*modal*/

.modal-title {
	color: #000;
}

.modal-body {
	text-align: left;
}

.modal-body p {
	font-family: 'Helvetica Neue', Helvetica, Arial;
	font-weight: 200;
	font-size: 15px;
}

/* footer */

.mapfooter {
	position: relative;
}

.mapfooter .mapdetails {
	height: 256px;
	width: 450px;
	background: #fff;
	position: absolute;
	margin-top: -135px;
	top: 50%;
	right: 20%;
}

footer {
	background: #EC3002;
	height: 40px;
	width: 100%;
}

.mapdetails h5 {
	font-family: 'Montserrat', sans-serif;
	font-size: 22px;
	color: #EC3002;
	margin: 18px 0 18px 0px;
}

.mapdetails .pullpin {
	float: left;
	margin-left: 5px;
	line-height: 30px;
}

.mapdetails .meercontact {
	margin-top: 26px;
}

.mapdetails .contactgegevens {
	float: left;
	padding-left: 0;
	list-style: none;
	font-family: 'Droid Serif', serif;
	margin-left: 14px;
	margin-top: -8px;
}

.mapdetails .contactgegevens li {
	line-height: 30px;
}

#mapstab {
	margin-top: -45px;
}

.tabcontent {
	padding: 40px;
	padding-top:15px;
	padding-bottom:15px;
}

.mapdetails .nav-tabs {
	border-bottom: 0;
}

.mapdetails .nav-tabs > li.active > a, .mapdetails .nav-tabs > li > a:hover, .mapdetails .nav-tabs > li > a:focus {
	background: #fff;
	color: #000;
}

.mapdetails .nav-tabs > li > a {
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;	    
	border: 0;
	border-bottom: 1px solid #fff;		
	font-family: 'Droid Serif', serif;	
	padding: 10px 20px;
	background: #EC3002;
	color: #fff
}

.mapdetails .nav-tabs > li > a:hover {
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;	    
	border: 0;
	border-bottom: 1px solid #fff;	
}

.mapdetails .office {
	margin-top: 0px;
	width: 140px;
	background: #ec3002;
	border-radius: 50%;
	height: 140px;
	text-align:center;
}

.mapdetails .office .img-circle {
	width:128px;
	height:128px;
	margin: 0 auto;
	margin-top:6px;
}


/*-----------------------------------------------------------------------------*/

a, a:visited, a:hover, a:active { text-decoration: none; color: inherit; }

h4
{
	display: table;
	margin: 30px auto 0 auto;
	color: #FFF;
	padding: 0;
}


.linkedin {
margin-top:-8px;
height: 13px;
width: 13px;
background: url('img/linkedin.jpg');
display: block;
}



/* Circles */


.circle_total .img-circle {
	width:284px;
	height:284px;
}

.circle_total {
	width:300px;
	height:300px;
	background:#dfe0e1;
	border-radius: 50%;
	margin:0 auto;
	margin-bottom:30px;
	position:relative;
}

.img-circle {
	margin:0 auto;
	margin-top: 8px;
}

.img-overlay {
	position:absolute;
	width:100%;
	top: 0px;
}

.img-black {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
  background:black;
}

.img-black:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	-webkit-transition: opacity .35s ease-in-out;
    -moz-transition: opacity .35s ease-in-out;
    -ms-transition: opacity .35s ease-in-out;
    -o-transition: opacity .35s ease-in-out;
    transition: opacity .35s ease-in-out;
}

#showcase .circle_total {
	transition: all 1s;
	-moz-transition: all 1s;
	-webkit-transition: all 1s;
	-o-transition: all 1s;
	filter: grayscale(100%);
    -webkit-filter: grayscale(100%);  /* For Webkit browsers */
    filter: gray;  /* For IE 6 - 9 */
    -webkit-transition: all 1s ease;  /* Transition for Webkit browsers */
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix 		type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></			filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
}

#showcase .circle_total:hover {
	 filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: none;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix 		type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}


#overons .cirkels, #showcase .cirkels {
	text-align:center;
	margin-top:65px;
}

.cirkels .circle_total .text {
	position:absolute;
	width:100%;
	top:50%;
	margin-top:-13px;
	text-align:center;
}

.cirkels .circle_total p{
	color:white;
	font-family: 'Montserrat', sans-serif;
	font-size:26px;
	text-transform:uppercase;
}

#showcase .cirkels .circle_total p {
	text-shadow: 0px 0px 20px #000;
}



/* bootstrap responsive :) */

	@media screen and (min-width: 1850px) {
		#bg img#background { margin-top:-50px; } 
	}

	@media screen and (max-width: 1024px) and (min-width: 481px) {
		#bg { 
			height:600px !important; margin-top:-50px; 
		} 
		.tekstcolom {
			top: 110px;
		}
		.tekstcolom p {
			display: none;
		}
	}

	@media screen and (max-width: 1200px) {
		#overons .overlay, #showcase .overlay {
			margin-left: 0;
		}
		.circle_total { width:270px; height:270px; }
		.circle_total .img-circle{ width:254px; height:254px; } /* Circle total - 16 */
		.cirkels .circle_total p{ font-size:24px; }
		.cirkels .circle_total .text { margin-top: -12px; } /* Helft van font-size */
	}

	@media screen and (max-width: 992px) {
		.qrulmedia {
			position: relative !important;
			margin-bottom: 30px;
			margin-top: 30px;
		}
		.jelle, .jeroen {
			height: auto !important;
			text-align: left !important;
			padding: 14px 0 !important;
		}
		#overons {
			padding-top: 35px;
		}	
		.linkedin {
			display:none;
		}
		.circle_total { width:220px; height:220px; }
		.circle_total .img-circle{ width:204px; height:204px; }	/* Circle total - 16 */
		.cirkels .circle_total p{ font-size:20px; }
		.cirkels .circle_total .text { margin-top: -10px; } /* Helft van font-size */
	}

	@media screen and (max-width: 767px) {
		.navbar-collapse {
		
			border-bottom:1px solid grey;
		}
		.navbar-nav {
			padding-bottom:10px;
			
		}
		.navbar-nav li{
			padding:0px;
			line-height:40px;
		}
		.navbar-nav li a{
			display:inline;
			padding:0px;
		}
		.rondje, .overlay {
			padding: 0 25%;
		}

		#overons {
			padding-top: 15px;
		}
		#googleMap {
			display:none;
		}
	}

	@media screen and (max-width: 660px) {
		.mapfooter .mapdetails {
			width: 100%;
			right: 0;
		}
			
	}
	@media screen and (max-width: 480px) { 
		#bg { 
			height:340px !important; margin-top:-30px !important; 
			}

		.scroll .doenjulliedat h5 {
			display: none !important;
		}

		.tekstcolom {
			top: 75px;
			width:100%;
			left:0px;
			margin-left:0px;
		}
		.tekstcolom h1 {
			font-size: 36px;
			line-height: 48px
		}
		.tekstcolom p {
			display: none;
		}		
		.doenjulliedat {
			height: 22px;
			margin-top: -81px;
		}
		.doenjulliedat .white {
			margin-top: 59px;
			height: 22px;
		}
		.qrulmedia img{
			width:100%;
		}
		.tabcontent {
			padding:20px;
		}
		
		.mapdetails .office {
			margin-top: 0px;
			width: 106px;
			background: #ec3002;
			border-radius: 50%;
			height: 106px;
			text-align:center;
		}
		
		.mapdetails .office .img-circle {
			width:96px;
			height:96px;
			margin: 0 auto;
			margin-top:5px;
		}

	}