/* *****************************************************************************
	BaseNet - website 
	fluid & mobile first

	Dit is het hoofd stijl bestand. Hierin zitten de meeste elementen verwerkt voor visuele vorm.
	Het bn-theme.css bestand bevat de layout van grid collomen en afwijkingen in stijl voor
	verschillende devices met behulp van media queries.
	Deze media queries worden afgevangen voor oudere browsers met behulp van javascript.

*/



/* *****************************************************************************
 * Global
 */

body {
	background-color: #EFEFEF;
	font-weight: lighter;
	font-size: 16px;
	color: #818181;
}
body.landing {
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	color: #444;
}
/*h1 {
	font-size: 30px;
}*/

fieldset {}

input, password, textarea {}

a {}

/* basenet specific */
.cms-content a[target="_blank"]:after {
	position: relative;
	/*top: 1px;*/
	display: inline-block;
	font-family: 'Glyphicons Halflings';
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e164";
	margin-left: 3px;
	font-size: 66%;
}


/* *****************************************************************************
 * Pageheader
 */
#webGLcontainer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0; 
	bottom: 0; 
	z-index: 0;
}
#webGLcontainer canvas {
	z-index: 0;
}

.yt-container {
	position: relative;
	overflow: visible;
	bottom: -3em;
	z-index: 1;
}
.yt-screen {
	display: block;
	z-index: 0;
	background-image: url(/images/yt-container.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 50%;
	pointer-events: none;
	position: absolute;
	top: -7%;
	right: -35%;
	bottom: -14%;
	left: -35%;
}

.preheader {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2000000 !important;
	transform: rotate(0deg) translateZ(0px) !important;
	background-color: #444;
	color: #FFF;
	padding: 15px;
}
.preheader a:not(.close) {
	border-bottom: 1px dashed #FFF;
	color: #FFF;
}
.preheader a:not(.close):hover {
	text-decoration: none;
	color: rgba(255,255,255,0.8);
}
.pageheader {
	position: relative;
	background: linear-gradient(180deg, #007DC1 0%, #006CA8 100%);
	color: #FFF;
}
.pageheaderSpacer {
	height: 4.5em;
	display: block;
	position: relative;
	background: #007DC1;
}
.pageheader nav {
	background: #007DC1;
	padding: 1em 0;
}

.pageheader.lg {
}

.pageheader h1,.pageheader h2,.pageheader h3 {
	color: #FFF;
}
.pageheader h1 {
	font-weight: 400;
}
.pageheader h2 {
	font-size: 20px;
	line-height: 30px;
}
.pageheader .btnFill {
	margin-right: 1em;
}

.drop-header {
	position: relative;
	display: inline-block;
}
.drop-header:after {
	content: " ";
	height: 0;
	clear: both;
	display: block;
}
.drop-header h1 {
	float: left;
}

.drop-header .nav {
	float: left;
}
@media (max-width: 1002px) {
	.drop-header .nav {
		float: none;
	}
	.nav-pills > li {
		float: none;
		display: inline;
	}
	.nav-pills a.dropdown-toggle:hover, .nav-pills a.dropdown-toggle:focus, .nav-pills a.dropdown-toggle:active {
		background-color: transparent;
	}
}
.drop-header .nav > li > a {
	color: #007DC1;
	margin-top: 10.5px;
	margin-bottom: 0;
}

.ctagroup {
	position: relative;
	margin-bottom: 1em;
}
.ctagroup .btn {
	margin-top: 1em;
	margin-right: 1em;
	margin-bottom: 1em;
	color: #FFF;
	background: #F59E00;
	border: 1px solid rgba(255,255,255,1);
	box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
}
.ctagroup .btn:hover {
	background-color: #F39200;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.25);
}

.jumbocontainer {
	position: relative;
	z-index: 1;
}
.jumbocontainer img {
	width: 100%;
	position: relative;
	bottom: -5px;
}

.jumbocontainer img.jumboImgTwo {
	position: absolute;
	bottom: -3em;
	right: 0.2em;
}

/* branche button */
.dropdown.special a.dropdown-toggle, 
.dropdown.special a.dropdown-toggle:hover,
.navbar-default .navbar-nav > .special.open > a, .navbar-default .navbar-nav > .special.open > a:hover, .navbar-default .navbar-nav > .special.open > a:focus {
	position: relative;
	font-weight: bold;
}

/* nav */
.navbar-default {
	background-color: transparent;
}
/* nav outline button */
.navbar-default .navbar-nav > li > a {
	border-radius: 3px;
}
.navbar-default .navbar-nav > li > a.outline {
	border: 1px solid #FFF;
	margin-top: -2px;
	transition: all 100ms ease-in;
}
.navbar-default .navbar-nav > li > a.outline:hover {
	background-color: #EEE;
	border-color: #EEE;
	color: #004b75;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
	border-color: transparent;
	box-shadow: none;
}
.navbar-collapse.collapsing {
    -webkit-transition: none;
    transition: none;
}

/* Button general style */
.btn.btn-primary {
	border-radius: 3px;	
}

/* Form validation */
.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline, .has-error.radio label, .has-error.checkbox label, .has-error.radio-inline label, .has-error.checkbox-inline label {
	color: #F39200;
}
.has-error .form-control {
	border-color: #F59E00;
}

@media (min-width: 992px) {
	.jumbocontainer img {
		width: 52%;
		position: absolute;
		right: 0;
		bottom: -5px;
	}
	.ctagroup {
		margin-bottom: 4em;
	}
}

@media (min-width: 1200px) {
	.navbar.lg, .navbar.md {
		margin-bottom: 6em;
	}
}
@media (max-width: 480px) {
	.pageheader .btnFill {
		margin-right: 0;
	}
}
@media (max-width: 1002px) {
	.pageheader h1 {
		text-align: center;
	}
	.pageheader h2 {
		text-align: center;
	}
	.navbar {
		margin-bottom: 1em;
	}
	.navbar-header {
		float: none;
	}
	.navbar-left,.navbar-right {
		float: none !important;
	}
	.navbar-toggle {
		display: block;
    }
    .navbar-collapse {
		border-top: 1px solid transparent;
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
		top: 0;
		border-width: 0 0 1px;
	}
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
		margin-top: 7.5px;
	}
	.navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
  		display:block !important;
	}
	.yt-container {
		margin: 3em;
		bottom: -2em;
	}
}





/* *****************************************************************************
 * Pagecontent / main
 */

main {
	position: relative;
	background-color: #FFF;
	padding-bottom: 5em;
}

.flex {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	/* Center vertically */
	align-items: center;
	/*Center horizontaly */
	justify-content: center;
	/*Center horizontaly ie */
	-ms-flex-pack: center;
	
    min-height: 100%;
}
.flex-item {
	flex: 1 1 0;
}
.flex-item img {
	display: inline-block;
	max-height: 600px;
}
@media \0screen\,screen\9 { /* IE6-10 and exclude FF2 */
  .flex { display: block; }
}

@media (max-width: 768px) {
	.flex { display: block; }
	.flex-item { flex: none; }
}

.btnProbeerFixed {
	transform: rotate(270deg);
	position: fixed;
	top: 50%;
	right: -55px;
	background-color: #F59E00;
	color: #FFF;
	display: block;
	z-index: 99;
	border-radius: 3px 3px 0 0;
	border: 1px solid #FFF;
	box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
}
.btnProbeerFixed:hover, .btnProbeerFixed:active, .btnProbeerFixed:focus {
	background-color: #F39200;
	color: #FFF;
	text-decoration: none;
	box-shadow: 0px 0px 2px rgba(0,0,0,0.25);
}

.mapRow {
	position: relative;
}
.mapRow:after {
	content: " ";
	height: 0;
	display: block;
	clear: both;
}

#map1info {
	display: none;
}
#map1 {
	height: 380px;
	margin-bottom: -5em;
}
#map1:after {
	content: " ";
	height: 0;
	clear: both;
	display: block;
}
#mapEvents {
	height: 300px;
}
#mapEvent {
	height: 300px;
}

.greyRow {
	position: relative;
	background-color: #FBFBFB;
	margin: 4em 0;
	padding: 3em 0;
}

blockquote.frontpage {
	position: relative;
	display: block;
}
blockquote.frontpage img {
	float: left;
	margin-right: 0.5em;
	width: 3em;
	background-color: #EFEFEF;
}
blockquote.frontpage:after {
	content: " ";
	height: 0;
	display: block;
	clear: both;
}
blockquote.frontpage div {
	margin-top: 2em;
}

.carousel blockquote.frontpage {
	border-left: none;
	text-align: left;
	height: 180px;	
}
.carousel-indicators .active {
   box-shadow: none;
   background: #CCC;
}
@media (max-width: 480px) {
	.carousel blockquote.frontpage {
		height: 355px;
	}
}
.carousel blockquote.frontpage div {
	margin-top: 0;
	margin-bottom: 1em;
}
.carousel blockquote.frontpage div:after {
	content: '';
	display: block;
	height: 0;
	clear: both;	
}
.carousel blockquote.frontpage img {
	width: 100px;
	margin: 0 1.25em 0 0;
}

.thumbnail .caption {
	color: #818181;
}

.img-enhance {
	cursor: pointer;
	box-shadow: 0 0 5px rgba(0,0,0,0.05);
}
.img-enhance:hover {
	box-shadow: 0 0 10px rgba(0,0,0,0.15);
}
.modal-body .img-enhance:hover {
	box-shadow: 0 0 5px rgba(0,0,0,0.05);
}

.modalEnhance {
	text-align: center;
}

.modalEnhance .modal-dialog {
	width: auto;
	display: inline-block;
}

.modalEnhance .modal-content {
	height: auto;
	min-height: 100%;
	border-radius: 0;
	box-shadow: none;
	border: none;
	background-color: transparent;
}

.modalEnhance .modal-content .modal-header {
	background-color: rgba(255,255,255,1);
}
.modalEnhance .modal-content .modal-body {
	background-color: rgba(255,255,255,1);
}

.modalEnhance .modal-content img {
	max-width: 100%;
	display: inline-block;
}

.container-number {
	position: relative;
}

.container-number .vr {
	position: absolute;
	top: 0;
	right: -15px;
	bottom: 0;
	background-color: #dddddd;
	width: 1px;
}

.popover-title {
	color: #FFF;
}

#sectionFunctionaliteiten {
	padding-top: 6em;
}

#sectionCijfers {
	padding-top: 6em;
	padding-bottom: 4em;
}
#sectionCijfers .label-number {
	color: #444;
}
#sectionCijfers .glyphicon, #sectionCijfers .base, #sectionCijfers .fa {
	color: #444;
	font-size: 48px;
	line-height: 1.8em;
}
#sectionCijfers a.bsPopover:focus, #sectionCijfers a.bsPopover:active {
	outline: none;	
}
#sectionCijfers a.bsPopover:focus .fa, #sectionCijfers a.bsPopover:active .fa {
	color: #007DC1;
}
#sectionCijfers a.bsPopover .glyphicon, #sectionCijfers a.bsPopover .base, #sectionCijfers a.bsPopover .fa {
	font-size: 16px;
	color: #CCC;
}
#sectionCijfers a.bsPopover .glyphicon:hover, #sectionCijfers a.bsPopover .base:hover, #sectionCijfers a.bsPopover .fa:hover {
	color: #007DC1;
}

#sectionCijfers .animated-number {
	font-size: 24px;
	display: block;
	margin-top: 10px;
}

.ico-container {
	display: block;
	min-width: 32px;
	color: #444;
	font-size: 26px;
}

.media-object.referer-image {
	background-color: #EFEFEF;
}

.fadeInScroll {
	opacity: 0;
	transition: all 0.5s ease-in-out 0.05s;
}

.action-response {
	padding: 15px;
}

.tarieven-group .panel-default, .tarieven-group .panel-heading, .tarieven-group .panel-default > .panel-heading + .panel-collapse > .panel-body {
	border-color: #F7F7F7;
}

.tarieven-group .panel-heading {
	position: relative;
}
.tarieven-group .panel-heading:after {
	content: " ";
	display: block;
	height: 0;
	clear: both;
}
.tarieven-group .panel-heading a {
	display: block;
	margin: -10px -15px;
	padding: 10px 15px;
	padding-right: 5em;
}
.tarieven-group .panel-heading a:hover {
	text-decoration: none;
}
.tarieven-group .panel-heading a:hover:before {
	content: "";
	display: block;
	background: rgba(255,255,255,0.2);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.tarieven-group .panel-heading a:focus {
	text-decoration: none;
	outline: none;
}
.tarieven-group .panel-heading a span {
	display: block;
	font-size: 12px;
	font-style: italic;
	margin-top: 5px;
}
.tarieven-group .panel-heading a span.money {
	margin-top: 0;
	font-size: 17px;
	font-style: normal;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 5em;
	text-align: center;
	line-height: 57px;
	background-color: rgba(255,255,255,0.4);
	font-weight: bold;
}

.mhBox {
	margin-bottom: 1em;
}
.mhBox + div.media {
	margin-bottom: 2em;
}

.changelog-container {
	display: block;
}
.changelog-container:after {
	display: block;
	content: "";
	heigth: 0;
	clear: both;
}

.nieuwsbrief-content {
	margin-top: 8em;
	margin-bottom: 5em;
}

.templatecodeTable {
    width: 100%;
	margin-bottom: 2em;
}

.templatecodeTable tr {
    background: none;
}

.templatecodeTable tr:nth-child(odd) {
    background: #F5F5F5;
}

.templatecodeTable tbody tr:hover {
    background: #F7F7F7;
}

.templatecodeTable th {
	padding: 0.3em;
    text-align: left;
	vertical-align: top;
    background: rgba(250,250,250,1);
	color: #444;
}

.templatecodeTable th.infoHeader {
    background: #007dc1;
	color: #FFFFFF;
	padding-top: 0.4em;
	padding-bottom: 0.4em;
}

.templatecodeTable td {
    padding: 0.3em;
	text-align: left;
	vertical-align: top;
}
#medewerkerLijst {
	display: block;
}
.medewerker img {
	border-radius: 50% 50%;
	background-color: #EFEFEF;
}

.partner img {
	margin-top: 1em;
}

/* *****************************************************************************
 * Pagefooter
 */

.pageprefooter {
	background-color: #FBFBFB;
	padding: 3em 0 3em 0;
	color: #777;
}

.pagefooter {
	font-size: 0.85em;
	background-color: #EFEFEF;
	color: #777;
	padding: 5em 0 5em 0;
}
.pagefooter a {
	color: #777;
}
.pagefooter .h4 {
	display: block;
	color: #444;
	font-weight: normal;
	margin-bottom: 0.8em;
}
.pagefooter ul {
	list-style: none;
	margin: 0 0 2em 0;
	padding: 0;
}
.ico-basenet {
	display: inline-block;
	margin-right: 1em;
	vertical-align: middle;
	width: 3em;
}

.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all {
	display: none;
}