/****************************************/
/* SURROUNDINGS							*/
/****************************************/


#page-surroundings-video {
	position: relative;
	display: block;
	z-index: 2;
	/*
	width: 100%;
	height: auto;
	*/
	opacity: 1;
	-webkit-transition: opacity 1s ease, z-index 0s ease 0s; 
	   -moz-transition:	opacity 1s ease, z-index 0s ease 0s; 
		-ms-transition: opacity 1s ease, z-index 0s ease 0s; 
		 -o-transition: opacity 1s ease, z-index 0s ease 0s; 
			transition:	opacity 1s ease, z-index 0s ease 0s; 
}
#page-surroundings-video.off {
	opacity: 0;
	z-index: -2;
	-webkit-transition: opacity 1s ease, z-index 0s ease 1s; 
	   -moz-transition:	opacity 1s ease, z-index 0s ease 1s; 
		-ms-transition: opacity 1s ease, z-index 0s ease 1s; 
		 -o-transition: opacity 1s ease, z-index 0s ease 1s; 
			transition:	opacity 1s ease, z-index 0s ease 1s; 
}




.video-cover {
	display: none;
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABRJREFUeNpiYGBg8GXAAkgQBAgwACdeATVW/h9KAAAAAElFTkSuQmCC);
	background-repeat: repeat; 
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}
.video-cover.off {
	display: none;
}
.video-popup-open {
	position: absolute;
	z-index: -9;
	top: 50%;
	left: 50%;
	width: 64px;
	height: 64px;
	margin-top: -32px;
	margin-left: -32px;
	background: url(../img/play-btn.png) no-repeat;
	opacity: 0;
	-webkit-transition: opacity 1s ease, z-index 0s ease 1s; 
	   -moz-transition:	opacity 1s ease, z-index 0s ease 1s; 
		-ms-transition: opacity 1s ease, z-index 0s ease 1s; 
		 -o-transition: opacity 1s ease, z-index 0s ease 1s; 
			transition:	opacity 1s ease, z-index 0s ease 1s; 
}
.video-popup-open.on {
	opacity: 1;
	z-index: 9;
	-webkit-transition: opacity 1s ease, z-index 0s ease 0s; 
	   -moz-transition:	opacity 1s ease, z-index 0s ease 0s; 
		-ms-transition: opacity 1s ease, z-index 0s ease 0s; 
		 -o-transition: opacity 1s ease, z-index 0s ease 0s; 
			transition:	opacity 1s ease, z-index 0s ease 0s; 
}	





#surroundings-yt-player {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
}
#surroundings-yt-player.on {

}





















	
	
.section-content {
	vertical-align: middle;
}
#page-surroundings .section-content:not(.box) > .content-img {
	width: 120%;
	margin-right: -10%;
}
	


#page-surroundings-sec-1 {
	margin-top: 0;
}





#page-surroundings-sec-2 .section-content,
#page-surroundings-sec-3 .section-content {
	-webkit-transform: translate3d(0, 10%, 0);
	   -moz-transform: translate3d(0, 10%, 0);
		-ms-transform: translate3d(0, 10%, 0);
		 -o-transform: translate3d(0, 10%, 0);
			transform: translate3d(0, 10%, 0);
	opacity: 0;
	-webkit-transition: opacity 0.5s ease,	-webkit-transform 1s ease;
	   -moz-transition: opacity 0.5s ease,	   -moz-transform 1s ease;
		-ms-transition: opacity 0.5s ease,		-ms-transform 1s ease;
		 -o-transition: opacity 0.5s ease,		 -o-transform 1s ease;
			transition: opacity 0.5s ease,			transform 1s ease;
}
#page-surroundings-sec-2.active .section-content,
#page-surroundings-sec-3.active .section-content {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	   -moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		 -o-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
}




#page-surroundings-sec-4  {
	padding-top: 45%;
	opacity: 0.6;
	-webkit-transition: opacity 0.5s ease,	-webkit-transform 1s ease;
	   -moz-transition: opacity 0.5s ease,	   -moz-transform 1s ease;
		-ms-transition: opacity 0.5s ease,		-ms-transform 1s ease;
		 -o-transition: opacity 0.5s ease,		 -o-transform 1s ease;
			transition: opacity 0.5s ease,			transform 1s ease;
}
#page-surroundings-sec-4.active  {
	opacity: 1;
}






#page-surroundings-sec-4 #map {
	width: 100%;
}



@media (min-width: 480px) {
	
}
@media (min-width: 768px) {
	#page-surroundings .section-content:not(.box) > .content-img {
		width: 100%;
		margin-right: 0;
	}
}
@media (min-width: 992px) {
	.video-cover {
		display: block;
	}
	#page-surroundings .section-content:not(.box) > .content-img {
		width: 60%;
	}
}
@media (min-width: 1152px) {
}
@media (min-width: 1600px) {
}