/* CSS Document */
@media only screen and (max-width: 1889.98px) {}
@media only screen and (max-width: 1199.98px) {}
@media only screen and (max-width: 991.98px) {}
@media only screen and (max-width: 767.98px) {}
@media only screen and (max-width: 575px) { }


:root{
	--animate-duration:1.4s;
}


html, body{
	margin:0px;
	padding: 0px;
}

html{
	background: #0090E6;
	background: #0090E6 -webkit-linear-gradient(rgba(0, 46, 91, 1) 0%, rgba(29, 70, 136, 1) 25%, rgba(0, 144, 230, 1) 100%) no-repeat;
	background: #0090E6 -o-linear-gradient(rgba(0, 46, 91, 1) 0%, rgba(29, 70, 136, 1) 25%, rgba(0, 144, 230, 1) 100%) no-repeat;
	background: #0090E6 linear-gradient(rgba(0, 46, 91, 1) 0%, rgba(29, 70, 136, 1) 25%, rgba(0, 144, 230, 1) 100%) no-repeat;
	background-size: cover;
	min-height: 100%;
	overflow-y: hidden;
	overflow-x: auto;
}

@media screen and (max-width: 1199.98px) and (orientation: landscape) {
	html{
		overflow: hidden;
	}
}

body{
	font-family: "Open Sans Typekit";
	height: 100%;
	font-weight: 400;
	font-size: 16px;
	line-height: 28px;
	min-height: 100vh;
	color: #000;
	position: relative;
	overflow-y: hidden;
	overflow-x: auto;
}


@media screen and (max-width: 1199.98px){
	body{
		font-size: 14px;
		line-height: 22px;
	}

}

@media only screen and (max-width: 767.98px) {
	body{
		font-size: 12px;
		line-height: 20px;
	}

}



h1, h2, h3, h4, h5, h6{
	font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif; 
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
}

h1, h2{
	color:#0082C5;
	font-weight: 700;
	font-size: 28px;
	margin-bottom:20px;
	margin-top:0px;
}

@media screen and (max-width: 1199.98px){
	h1, h2{
		font-size: 20px;
	}
}

@media only screen and (max-width: 991.98px) {
	h1, h2{
		margin-bottom:10px;
	}
}


hr{
	border:none;
	height: 1px;
	background: #CCC;
	width: 100%;
	margin:40px 0px;
}



.show-on-mobile{
	display: none;
}

@media only screen and (max-width: 767.98px) {
	.show-on-mobile{
		display: block;
	}
}

.mobiel-horizontaal{
	position: fixed;
	top:0;
	right:0;
	bottom:0;	
	left:0;
	background: #0090E6;
	background: #0090E6 -webkit-linear-gradient(rgba(0, 46, 91, 1) 0%, rgba(29, 70, 136, 1) 25%, rgba(0, 144, 230, 1) 100%) no-repeat;
	background: #0090E6 -o-linear-gradient(rgba(0, 46, 91, 1) 0%, rgba(29, 70, 136, 1) 25%, rgba(0, 144, 230, 1) 100%) no-repeat;
	background: #0090E6 linear-gradient(rgba(0, 46, 91, 1) 0%, rgba(29, 70, 136, 1) 25%, rgba(0, 144, 230, 1) 100%) no-repeat;
	background-size: cover;
	z-index: 999;
	display:none;
	overflow: hidden;
}


@media screen and (max-width: 1199.98px) and (orientation: portrait) {
	.mobiel-horizontaal{
		display:block;
	}
}



.panel-mobiel-melding{
	width: 80%;
	margin-left: -40%;
	left:50%;
	top:30vh;
}


@media only screen and (max-width: 767.98px) {
	
	.panel-mobiel-melding{
		width: 90%;
		margin-left: -45%;
		top:30vh;
	}

	
}






.clearfix{
	float: none;
	clear: both;
}


.navigatie-top{
	position: absolute;
	top: 20px;
	right: 10px;
	z-index: 20;
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
	text-align: right;
}

@media only screen and (max-width: 767.98px) {
	.navigatie-top{
		top: 16px;
		right: 6px;
	}
}



.melding{
	background:#FFF;
	color:#FF6407;
	border:3px solid #FF6407;
	border-radius: 20px;
	font-size: 14px;
  	line-height: 20px;
	font-weight: 700;
	padding: 10px 20px;
	max-width: 400px;
	display: none;
	float: right;
	margin-top:20px;
	text-align: left;
}


@media only screen and (max-width: 991.98px) {
	.melding{
		font-size: 12px;
		line-height: 15px;
		font-weight: 600;
		padding: 5px 10px;
		max-width: 320px;
		margin-top: 15px;
	}
}

.melding-content{
	display: table-row;
}

.melding-icoon{
	width: 9%;
	display: table-cell;
	vertical-align: middle;
	font-size: 21px;
}

.melding-inner{
	width: 91%;
	display: table-cell;
	vertical-align: middle;
}

.ecodome-logo{
	position: absolute;
	width: 24vh;
	margin-left: 0px;
	left: 2%;
	top: 3vh;
	z-index: 15;
}

.ecodome-logo-welkom{
	width: 34vh;
	margin-left:-17vh;
	left:50%;
	top:10vh;
	z-index: 5;
}


@media only screen and (max-width: 1199.98px) {
	.ecodome-logo-welkom{
		left:260px;
		width: 260px;
	}
	
	.ecodome-logo-mobiel-melding{
		width: 34vh;
		margin-left:-17vh;
		left:50%;
	}
}

@media only screen and (max-width: 991.98px) {
	.ecodome-logo-welkom{
		left: 100px;
		top: 5vh;
        width: 200px;
	}
	
	.ecodome-logo-mobiel-melding{
		width: 34vh;
		margin-left:-17vh;
		left:50%;
	}
}

@media only screen and (max-width: 767.98px) {
	.ecodome-logo-welkom{
		top: 5vh;
		left: 80px;
        width: 200px;
	}
	
	.ecodome-logo-mobiel-melding{
		width: 34vh;
		margin-left:-17vh;
		left:50%;
	}
}


.btn{
	background:#1D4688;
	border:3px solid #1D4688;
	padding:8px 20px;
	margin-right: 10px;
	font-weight: 700;
	border-radius: 30px;
	color: #FFF;
	text-decoration: none;
	transition: 0.2s;
}

.panel-inner .btn{
	color: #FFF;
}

@media only screen and (max-width: 767.98px) {
	.panel-inner .btn{
		display:inline-block;
		margin-bottom: 10px;
	}
}


@media only screen and (max-width: 991.98px) {
	.panel-inner .btn{
		border:2px solid #1D4688;
		padding:4px 14px;
		font-weight: 600;
	}
}


.btn.btn-inverted{
	background:#FFF;
	border:3px solid #1D4688;
	color: #1D4688;
}

.btn:hover{
	background:#FF882B;
	border:3px solid #FF882B;
	color: #FFF;
}


.btn .fa{
	margin:0px 10px 0px 0px;	
}

.btn-nav{
	background:#043161;
	border:3px solid #FFF;
	color: #FFF;
	margin-left:10px;
	margin-right: 0px;
	font-size: 14px;
	line-height: 14px;
}

@media only screen and (max-width: 767.98px) {
	
	.btn-nav{
		font-size: 12px;
		padding: 6px 12px;
		margin-left: 4px;
	}
	
}


.btn-nav-inverted{
	background:#FFF;
	border:3px solid #FFF;
	color: #1D4688;
}

.btn-welkom .fa{
	margin:0px 30px;	
}


.navigatie-bottom-balk{
	position: fixed;
	bottom: 0px;
	width: 100%;
	height: 30px;
	z-index: 0;
	background: #1D4688;
	display: none;
}


.navigatie-bottom{
	position: fixed;
	bottom: 0px;
	width: 100%;
	height: 30px;
	z-index: 30;
	display: none;
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */

}


.navigatie-bottom-container{
	width: 400px;
	margin: -20px auto 0px;
	text-align: center;
}

@media only screen and (max-width: 991.98px) {
	.navigatie-bottom-container{
		width: 380px;
		margin: -20px 0px 0px 10px;
		text-align: left;
	}
}

.navigatie-bullet-container{
	display: inline-block;
	position: relative;
}

.bottom-nav-button-label{
	position: absolute;
	width: 278px;
	top:-53px;
	left:-20px;
	padding: 2px 0px;
	text-align: center;
	background:#0090E6;
	color: #FFF;
	font-size: 14px;
	border-radius: 40px;
	border:3px solid #FFF !important;
	opacity: 0;
	line-height: 26px;
  	height: 28px;
	transition: 0.2s;
}

@media only screen and (max-width: 991.98px) {
	.bottom-nav-button-label{
		font-size: 12px;
		height: 20px;
		top: -44px;
		line-height: 20px;
	}

}

.bottom-nav-button-label.current{
	opacity: 1;
}


.bottom-nav-button{
	position: relative;
	display: inline-block;
	margin:0 1px;
	border-radius: 20px;
	height: 30px;
	width: 30px;
	line-height: 30px;
	color: #FFF;
	background: #FFF;
	border:3px solid #1D4688;
	cursor: pointer;
	text-align: center;
}

.bottom-nav-button-inner{
	background: #FF882B;
	width: 60%;
	height: 60%;
	margin:20% 0px 0px 20%;
	border-radius: 20px;
	opacity: 0;
	transition: 0.2s;
}

.bottom-nav-button:hover .bottom-nav-button-inner,
.bottom-nav-button.current .bottom-nav-button-inner{
	opacity: 1;
}

.bottom-nav-button.bottom-nav-button-prev,
.bottom-nav-button.bottom-nav-button-next{
	background: #1D4688;
	border:3px solid #FFF;
	width: 40px;
	position: relative;
}

.bottom-nav-button.bottom-nav-button-prev:hover,
.bottom-nav-button.bottom-nav-button-next:hover{
	color: #1D4688;
	background: #FFF;
	border:3px solid #1D4688;
}

.bottom-nav-button span{
	position: absolute;
	font-size:18px;
	width: 100%;
	left: 0px;
	top:6px;
}


.hoofdstuk{
	display: none;
	height: 100vh;
	width: 100%;
	overflow: hidden;
	position: fixed;
	z-index: 10;

}



.container{
	max-width: 1600px;
	margin:0px auto;
	min-height: 100vh;
	position: relative;
}

@media only screen and (max-width: 1599.98px) {
	
	.container{
		max-width: 1200px;
	}
	
}

@media only screen and (max-height: 800px) {
	
	.container{
		max-width: 1200px;
	}
	
}


.panel{
	background:#FFF;
	position: absolute;
	border-radius: 30px;
	z-index:15;
}

.panel p{
	margin:0px 0px 30px;	
}

@media only screen and (max-width: 991.98px) {
	.panel p{
		margin:0px 0px 15px;	
	}
}

.panel-welkom{
	width: 800px;
	margin-left: -400px;
	left:50%;
	top:30vh;
}

@media only screen and (max-width: 767.98px) {
	.panel-welkom{
		width: 640px;
		margin-left: -320px;
	}
}


.panel-inner{
	padding:60px 50px 70px;
}

@media only screen and (max-width: 991.98px) {
	.panel-inner{
		padding:30px 30px 40px;
	}

}


.panel-inner a{
	color:#000;
}







.popover-background{
	background:#000;
	position: fixed;
	opacity: 0.6;
	z-index:999;
	top:0;
	right:0;
	bottom: 0;
	left: 0;
}

.popover{
	height: 100vh;
	position: absolute;
	width: 100%;
	z-index: 1999;
	display: none;
}

.popover .panel{
	z-index: 1000;
	width: 800px;
	margin-left:-400px;
	left:50%;
	position:absolute;
	top: 45%;
    transform: translateY(-50%);
}

.popover-big .panel{
	width: 1200px;
	margin-left:-600px;
}

@media screen and (max-width: 1199.98px) and (orientation: landscape) {
	.popover-big .panel{
		width: 900px;
		margin-left:-450px;
	}
}

@media only screen and (max-width: 991.98px) {
	.popover-big .panel{
		width: 800px;
		margin-left:-400px;
		top: 50%;
	}
}

.popover .panel-inner {
	padding:0px 50px 0px;
	margin:40px 0px 50px;
	max-height: 55vh;
	overflow-y: auto;
}

@media screen and (max-width: 1199.98px) and (orientation: landscape) {
	.popover .panel-inner {
		padding:0px 50px 0px;
		margin:40px 0px 50px;
		max-height: 55vh;
		overflow-y: scroll;
	}

}

.popover-big .panel-inner {
	overflow-y: hidden;
	overflow: hidden;
	padding: 0px 0px 0px 50px;
}

@media screen and (max-width: 1199.98px) and (orientation: landscape) {
	.popover-big .panel-inner {
		margin: 20px 0px 30px;
	}
}


.popover.popover-big .panel-inner {
	max-height: 65vh;
}

.popover h4{
	color:#72C73D;
	margin:0px 0px 10px;
}

.popover p{
	margin:0px 0px 10px;
}

.close-btn{
	position: absolute;
	background:#FF882B;
	top: -14px;
	right: -14px;
	text-decoration: none;
	height: 40px;
	width: 40px;
	line-height: 40px;
	text-align: center;
	color: #FFF;
	font-weight: 800;
	border-radius: 50%;
	border:4px #FF882B solid;
	-moz-box-shadow:0px 4px 0px rgba(0,0,0,0.2);
	-webkit-box-shadow:0px 4px 0px rgba(0,0,0,0.2);
	box-shadow:0px 4px 0px rgba(0,0,0,0.2);
	z-index: 15;
}

.close-btn:hover{
	background:#FFF;
	color: #FF882B;
}

.popover .btn{
	display: inline-block;
	margin-top:10px;
}

.popover-content{
	display: none;
}



.popover-big-image{
	width: 28%;
	margin-right: 5%;
	float: left;
	height: 65vh;
	overflow: hidden;
	text-align: center;
}

.popover-big-image img{
	max-width:100%;
	max-height:100%;
	height: auto;
	width:auto;
	display: inline;
}

.popover-big-text{
	width: 64%;
	padding-right: 3%;
	float: left;
	max-height: 65vh;
	overflow-y: auto;
}


@media screen and (max-width: 1199.98px) and (orientation: landscape) {
	
	.popover-big-text{
		max-height: 65vh;
		overflow-y: scroll;
	}

}




.bullet-list-row{
	width: 100%;
	margin-bottom: 20px;
}

.bullet-list-image{
	float: left;
	width: 6%; 
	margin-right: 3%;
}

.bullet-list-text{
	float: left;
	width: 91%;
}






#content-00-intro-welkom{
	display: block;
}



.welkom-tekst{
	width: 90%;
}

.mascotte-welkom{
	position: absolute;
	width: 45%;
	right: -90px;
	bottom: -110px;
}


@media only screen and (max-width: 991.98px) {
	.mascotte-welkom{
		width: 35%;
		right: -66px;
        bottom: -80px;
	}
}


.panel-mobiel-melding .mascotte-welkom{
	width: 200px;
	bottom: -20px;
	right: -30px;
}

@media only screen and (max-width: 767.98px) {
	.panel-mobiel-melding .mascotte-welkom{
		width: 180px;
	}

}


.welkom-wolken{
	width: 100%;
	height:100%;
	position: fixed;
	top:0px;
	z-index: 10;
}

.welkom-wolk-links{
	position: absolute;
	width: 38%;
	bottom: -10%;
	left: -10%;
	z-index:1;
}

.welkom-wolk-mid{
	position: absolute;
	width: 77%;
	bottom: -20%;
	left: 14%;
	z-index:0;
}

.welkom-wolk-rechts{
	position: absolute;
	width: 37%;
	bottom: -6%;
	right: -10%;
	z-index:1;
}





#content-00-pad-keuze{
	
}




.tegel-container{
	width: 70%;
	position: absolute;
	left:0px;
	z-index: 3;
	margin: auto;
    top: 0; 
	bottom: 0;
}

@media only screen and (max-width: 991.98px) {
	.tegel-container{
		width: 50%;
        bottom: 50px;
	}

	
}




.tegel-container .wolk-los{
	position: absolute;
	width: 45%;
	top: -22%;
	left: 60%;
}

.tegel-tekening{
	width:100%;
	position: absolute;
	bottom:0px;
}


#content-00-pad-keuze .tegel-tekening{
	width:48%;
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}

.tegel-nieuwbouw-klein{
	left: 26%;
	bottom: 21%;
}


.tegel-utiliteit-klein{
	bottom:2%;
	-webkit-animation-delay: 400ms;
}

.tegel-bestaande-bouw-klein{
	bottom:2%;
	right: 0px;
	-webkit-animation-delay: 800ms;
}


.tegel-infoknoppen{
	width: 100%;
	height: 100%;
}

.infoknop{
	position: absolute;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	background:#FF882B;
	border:3px solid #FFF;
	color: #FFF;
	border-radius: 60px;
	font-size: 30px;
	box-shadow: 0px 6px 0px rgb(0 0 0 / 0.2);
	transition: 0.4s;
	-webkit-animation-delay: 800ms;
}

@media only screen and (max-width: 991.98px) {
	.infoknop{
		width: 40px;
		height: 40px;
		line-height: 40px;
		font-size: 20px;
	}
}


.infoknop:hover{
	background:#0090E6;
}

.mascotte-met-spraakwolk{
	width: 33%;
	margin-right: 2%;
	position: fixed;
	bottom:0px;
	right: 0px;
	display: block;
	z-index: 15;
}

@media only screen and (max-width: 1199.98px) {
	.mascotte-met-spraakwolk{
		width: 36%;
		margin-right: 10px;
		bottom:10px;
	}
}

@media only screen and (max-width: 991.98px) {
	.mascotte-met-spraakwolk{
		width: 46%;
	}
}



.panel-vraag{
	display: none;
}


.mascotte-met-spraakwolk .panel{
	position: relative;
	
}

.tekstballon-hoekje{
	position: absolute;
	width: 30%;
	bottom: 0px;
	right: 35%;
	margin-bottom: -14%;
}

@media only screen and (max-width: 991.98px) {
	.tekstballon-hoekje{
		width: 10%;
        right: 11%;
        margin-bottom: -4%;
		display: none;
	}

}

.mascotte-met-spraakwolk .panel-inner{
	padding:30px 30px 40px;
}

@media only screen and (max-height: 800px) {
	.mascotte-met-spraakwolk .panel-inner{
		padding:30px 24px 30px;
		font-size: 14px;
  		line-height: 22px;
	}

}

@media only screen and (max-width: 991.98px) {
	.mascotte-met-spraakwolk .panel-inner{
		padding:20px 16px 20px;
		font-size: 12px;
  		line-height: 20px;
	}
}

.mascotte-met-spraakwolk .btn{
	display: block;
	text-align:center;
	margin-top:10px;
}

.mascotte-met-spraakwolk .mascotte{
	width: 60%;
	float:right;
	position:relative;
	z-index: 10;
	display: none;
}

@media only screen and (max-width: 1199.98px) {
	.mascotte-met-spraakwolk .mascotte{
		width: 50%;
	}

}

@media only screen and (max-width: 991.98px) {
	.mascotte-met-spraakwolk .mascotte{
		width: 0px;
		height: 0px;
		display: none;
	}
}


#animation_slides_idle_02_ed{
	display: none;
}




.ui-tooltip, .arrow:after {
	background: #0090E6;
	border:3px solid #FFF !important;
}

.ui-tooltip {
	padding: 2px 20px !important;
	color: white;
	font-size: 14px;
	border-radius: 40px;
	box-shadow: none !important;
	border:3px solid #FFF !important;
	margin-top: 20px;
}

.arrow {
	width: 70px;
	height: 16px;
	overflow: hidden;
	position: absolute;
	left: 50%;
	margin-left: -35px;
	bottom: -16px;
}

.arrow.top {
	top: -16px;
	bottom: auto;
}

.arrow.left {
	left: -20%;
}

.arrow:after {
	content: "";
	position: absolute;
	left: 20px;
	top: -20px;
	width: 25px;
	height: 25px;
	transform: rotate(45deg);
}

.arrow.top:after {
	bottom: -20px;
	top: auto;
}






#content-01-nieuwbouw .tegel-container,
#content-02-bestaande-bouw .tegel-container,
#content-03-utiliteit .tegel-container{
	width: 62%;
	left: 2%;
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}

@media only screen and (max-width: 991.98px) {
	
	#content-01-nieuwbouw .tegel-container,
	#content-02-bestaande-bouw .tegel-container,
	#content-03-utiliteit .tegel-container{
		width: 48%;
	}

}

.tegel-subcontainer{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
}


.tegel-subcontainer.current{
	display: block;
}



#content-01-nieuwbouw{
	display: none;
}

	.tegel-nieuwbouw{
		bottom: -9%;
	}




#content-02-bestaande-bouw{
	
}

	#content-02-bestaande-bouw .tegel-container{
		top: 20vh;
	}

	.tegel-bestaande-bouw{

	}





#content-03-utiliteit{
	
}

	#content-03-utiliteit .tegel-container{
		top: 20vh;
	}

	.tegel-utiliteit{

	}