html { height:100%; }
body { height:100%; background:#fff; font-family: 'Frutiger Next LT W1G'; }
body.locked {overflow:hidden;}
h1, h2, h3 {font-weight:normal;}
.clear {display:block; clear:both;}
* { line-height:100% }

/* CSS BEGIN */


.wrapper { width:calc(2560px/3); height:calc(1600px/3); background-size:contain; overflow:hidden; margin:0 auto; }
.wrapper { min-width:256px; min-height:160px; }
.scene,
.layer {
	display: block;
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}

.scene {
	position: relative;
	overflow: hidden;
}

.layer {
	position: absolute;
}
.layer div {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	position:absolute;
}

.size-1 { width:100%; height:100%; }
.size-2 { top:0; position:absolute; }

.tree-1 { width:7.5%; left:6.9%; }
.tree-1.hide { left:-20%; }

.tree-2 { width:12.6%; left:15%; }
.tree-2.hide { left:-20%; }

.tree-3 { width:9.7%; left:18.2%; }
.tree-3.hide { left:-20%; }

.tree-4 { width:10%; left:68.5%; }
.tree-4.hide { left:120%; }

.tree-5 { width:15.9%; left:74.6%; }
.tree-5.hide { left:120%; }

.tree-6 { width:7.3%; left:88.6%; }
.tree-6.hide { left:120%; }

.tree-7 { width:20.7%; left:-1.8%; top:45.5%; }
.tree-7.hide { left:-30%; }

.tree-8 { width:11%; left:23.7%; top:67.1%; }
.tree-8.hide { top:100%; }

.tree-9 { width:13.2%; left:62.3%; top:61%;  }
.tree-9.hide { top:100%; }

.tree-10 { width:14.9%; left:81.8%; top:53.9%; }
.tree-10.hide { left:100%; }



.standart-transitions,
.tree-transitions,
.house-transitions {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.extended-transitions {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.house-1 { width:17%; left:5.2%; top:100%; }
.house-1.active { top:55%; }

.house-2 { width:12.6%; left:22.4%; top:100%; }
.house-2.active { top:61.8%; }

.house-3 { width:12.7%; left:66.3%; top:100%; }
.house-3.active { top:61.8%; }

.house-4 { width:12.5%; left:81%; top:100%; }
.house-4.active { top:56%; }


.big-house { width:32.8%; left:33.5%; top:100%; }
.big-house.active { top:16.3%; }
.big-house.clickable {  pointer-events: all }

.arrow.p-1 { width:6.3%; left:64.5%; top:35.3%; opacity:0; }
.arrow.p-1.active { left:59.5%; top:40.3%; opacity:1; }

.arrow.p-2 { width:6.3%; left:64.5%; top:49%; opacity:0; }
.arrow.p-2.active { left:59.5%; top:54%; opacity:1; }

.arrow.p-3 { width:6.3%; left:64.5%; top:62%; opacity:0; }
.arrow.p-3.active { left:59.5%; top:68%; opacity:1; }

.arrow.p-4 { width:6.3%; left:28.5%; top:35.3%; opacity:0; -webkit-transform: scaleX(-1); transform: scaleX(-1); }
.arrow.p-4.active { left:32.5%; top:40.3%; opacity:1; }
    
.arrow.p-5 { width:6.3%; left:28.5%; top:49%; opacity:0; -webkit-transform: scaleX(-1); transform: scaleX(-1); }
.arrow.p-5.active { left:32.5%; top:54%; opacity:1; }

.arrow.p-6 { width:6.3%; left:28.5%; top:62%; opacity:0; -webkit-transform: scaleX(-1); transform: scaleX(-1); }
.arrow.p-6.active { left:32.5%; top:68%; opacity:1; }   


.fox { width:9.21%; left:72.5%; top:91.25%;
	/*
	-webkit-animation: foxmove 8s  normal forwards cubic-bezier(0.455, 0.03, 0.515, 0.955);
	-moz-animation: foxmove 8s  normal forwards cubic-bezier(0.455, 0.03, 0.515, 0.955);
	animation: foxmove 8s  normal forwards cubic-bezier(0.455, 0.03, 0.515, 0.955);
	transform-style: preserve-3d;
	*/
}
.fox.transitions {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.fox.hide {
	 top:100%;
}



.background { background:url(../images/bg.jpg) 0 0 no-repeat; background-size:contain; width:119%; height:119%; left:-5%; top:-5% }
.frame { background:url(../images/frame.png) 0 0 no-repeat; background-size:cover; width:100%; height:100%; }

.demo {position:absolute; background-color:blue; z-index:999; pointer-events: all; font-size:5vh;}
.demo:hover {background:red;}
.demo2 {position:absolute; background-color:blue; top:7vh; z-index:999; pointer-events: all; font-size:5vh;}
.demo2:hover {background:red;}



.snow-2 { background:url(../images/snow-2.png) 0 0 no-repeat; background-size:cover; }
.snow-3 { background:url(../images/snow-3.png) 0 0 no-repeat; background-size:cover; }
.snow-4 { background:url(../images/snow-4.png) 0 0 no-repeat; background-size:cover; }
.snow-5 { background:url(../images/snow-5.png) 0 0 no-repeat; background-size:cover; }
.snow-6 { background:url(../images/snow-6.png) 0 0 no-repeat; background-size:cover; }
.snow-7 { background:url(../images/snow-7.png) 0 0 no-repeat; background-size:cover; }
.snow-8 { background:url(../images/snow-8.png) 0 0 no-repeat; background-size:cover; }

.window { height:112.5%; top:100%; }
.window.active { top:-6.25%; }

.roomlight { height:100%; top:-100%; }
.roomlight.active { top:0%; }

.r-right a { border:2px solid #404b6f; padding:2% 10%; color:#404b6f; text-transform:lowercase; cursor:pointer; pointer-events: all; position:relative; font-family: 'Frutiger Next for EVN'; }

/** ROOMS **/

#room-one .r-left { width:56.8%; top:21.2%; left:-100%;}
#room-one .r-right { width:28%; left:100%; color:#404b6f; line-height:120%; text-align:center; display:table; height:100%; }
#room-one .r-right > div { display:table-cell; vertical-align:middle; position:relative; }
#room-one.active .r-left {left:5.7%; }
#room-one.active .r-right { left:60%; }

#room-two .r-left { width:44.6%; top:21.8%; left:-50%;}
#room-two .r-right { width:28%; left:100%; color:#404b6f; line-height:120%; text-align:center; display:table; height:100%; }
#room-two .r-right > div { display:table-cell; vertical-align:middle; position:relative; }
#room-two.active .r-left {left:3.2%; }
#room-two.active .r-right { left:60%; }

#room-three .r-left { width:47.3%; top:14.9%; left:-50%;}
#room-three .r-right { width:28%; left:100%; color:#404b6f; line-height:120%; text-align:center; display:table; height:100%; }
#room-three .r-right > div { display:table-cell; vertical-align:middle; position:relative; }
#room-three.active .r-left {left:4.8%; }
#room-three.active .r-right { left:60%; }

#room-four .r-left { width:39.1%; top:13.3%; left:-50%;}
#room-four .r-right { width:28%; left:100%; color:#404b6f; line-height:120%; text-align:center; display:table; height:100%; }
#room-four .r-right > div { display:table-cell; vertical-align:middle; position:relative; }
#room-four.active .r-left {left:6%; }
#room-four.active .r-right { left:60%; }

#room-five .r-left { width:48.4%; top:17.3%; left:-50%;}
#room-five .r-right { width:28%; left:100%; color:#404b6f; line-height:120%; text-align:center; display:table; height:100%; }
#room-five .r-right > div { display:table-cell; vertical-align:middle; position:relative; }
#room-five.active .r-left {left:2.1%; }
#room-five.active .r-right { left:60%; }

#room-six .r-left { width:52.3%; top:0; left:-50%;}
#room-six .r-right { width:28%; left:100%; color:#404b6f; line-height:120%; text-align:center; display:table; height:100%; }
#room-six .r-right > div { display:table-cell; vertical-align:middle; position:relative; }
#room-six.active .r-left {left:6%; }
#room-six.active .r-right { left:60%; }

#room-seven .r-left { width:44.45%; top:8.33%; left:-50%;}
#room-seven .r-right { width:32%; left:100%; color:#404b6f; line-height:120%; text-align:center; display:table; height:100%; }
#room-seven .r-right > div { display:table-cell; vertical-align:middle; position:relative; }
#room-seven.active .r-left {left:3.9%; }
#room-seven.active .r-right { left:60%; }

#room-eight .r-left { width:34.1%; top:15.3%; left:-50%;}
#room-eight .r-right { width:32%; left:100%; color:#404b6f; line-height:120%; text-align:center; display:table; height:100%; }
#room-eight .r-right > div { display:table-cell; vertical-align:middle; position:relative; }
#room-eight.active .r-left {left:10%; }
#room-eight.active .r-right { left:60%; }

#room-nine .r-left { width:53.3%; top:10.6%; left:-100%;}
#room-nine .r-right { width:32%; left:100%; color:#404b6f; line-height:120%; text-align:center; display:table; height:100%; }
#room-nine .r-right > div { display:table-cell; vertical-align:middle; position:relative; }
#room-nine.active .r-left {left:1%; }
#room-nine.active .r-right { left:60%; }


.room .r-right { width:38% !important; }
.room.active .r-right { left:55% !important; }



.homescreen { position:absolute; left:0; top:0; text-align:center; color:#fff; width:100%; height:100%; pointer-events: all  }
.homescreen img { position:absolute; left:46.5%; top:26.5%; height:10%; }
.homescreen h1 { position:absolute; width:50%; top:38.1%; text-align:center; left:25%; font-family: 'Frutiger Next for EVN'; }
.homescreen p { position:absolute; top:45%; width:44%; left:28%; text-align:center; line-height:120%; }
.homescreen a { border:3px solid #fff; padding:1.1% 4.4%; font-size:30px; color:#fff; text-transform:lowercase; cursor:pointer; pointer-events: all; font-family: 'Frutiger Next for EVN'; }
.homescreen.hide { opacity:0; top:-20%; pointer-events: none }


.windows { position:absolute; width:5%; height:12%; cursor:pointer; }
.windows.clickable { pointer-events: all; }
.windows.w-1 { left:38.6%; top:37.7%; }
.windows.w-2 { left:46.6%; top:37.7%; }
.windows.w-3 { left:54.6%; top:37.7%; }
.windows.w-4 { left:38.6%; top:51.7%; }
.windows.w-5 { left:46.6%; top:51.7%; }
.windows.w-6 { left:54.6%; top:51.7%; }
.windows.w-7 { left:38.6%; top:66%; }
.windows.w-8 { left:46.6%; top:66%; }
.windows.w-9 { left:54.6%; top:66%; }


.share { position:absolute; color:#ec1c24; top:95%; left:2%; white-space: nowrap; cursor:pointer; pointer-events:all; z-index:999; }
.share > * { padding:0 0.5%; pointer-events:all; }


/* DEBUGGING */

/*
#viewport-size {
	position:fixed;
	top:0;
	left:0;
	width:50px;
	height:50px;
	background-color:blue;
	font-size:13px;
	padding:5px;
	font-family:verdana;
	color:black;
}


* {
	-webkit-box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.75);
	-moz-box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.75);
	box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.75);
}
*/

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


@media (orientation: portrait) {
	#turn-screen { position:fixed; width:100vw; height:100vh; top:0; left:0; background:url(../images/rotate.jpg) left center no-repeat; background-size:cover; z-index:9999 }
	html, body { width:100vw; height:100vh; overflow:hidden !important; }
	.english #turn-screen { position:fixed; width:100vw; height:100vh; top:0; left:0; background:url(../images/rotate_en.jpg) left center no-repeat; background-size:cover; z-index:9999 }

}

/*
@media screen and (min-width: 1920px){
	
	body #viewport-size { background-color:silver; }
	
}

	
@media screen and (max-width: 1400px){

	body #viewport-size { background-color:red; }

}


@media screen and (max-width: 1024px){

	body #viewport-size { background-color:green; }

}
	
	
	
@media screen and (max-width: 768px){

	body #viewport-size { background-color:black; }

}


@media screen and (max-width: 480px){

	body #viewport-size { background-color:yellow; }
	
}
*/

/*
@-webkit-keyframes foxmove {
	from,to  { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
	25% {
		-webkit-transform: rotateZ(0deg) translateY(0vh);
	}
	40% {
		-webkit-transform: rotateZ(5deg) translateY(-6%);
	}
	50% {
		-webkit-transform: rotateZ(5deg) translateY(-6%);
	}
	70% {
		-webkit-transform: rotateZ(5deg) translateY(5%);
	}
	80% {
		-webkit-transform: rotateZ(7deg) translateY(-15%) rotateY(3turn);
	}
	85% {
		-webkit-transform: rotateZ(7deg) translateY(-10%) rotateY(3turn);
	}
	100% {
		-webkit-transform: rotateZ(7deg) translateY(-10%) rotateY(3turn);
	}
}

@keyframes foxmove {

	25% {
		-moz-transform: rotateZ(0deg) translateY(0%);
		-ms-transform: rotateZ(0deg) translateY(0%);
		transform: rotateZ(0deg) translateY(0%);
	}
	40% {
		-moz-transform: rotateZ(5deg) translateY(-50%);
		-ms-transform: rotateZ(5deg) translateY(-50%);
		transform: rotateZ(5deg) translateY(-50%);
	}
	50% {
		-moz-transform: rotateZ(5deg) translateY(-50%);
		-ms-transform: rotateZ(5deg) translateY(-50%);
		transform: rotateZ(5deg) translateY(-50%);
	}
	70% {
		-moz-transform: rotateZ(5deg) translateY(0%);
		-ms-transform: rotateZ(5deg) translateY(0%);
		transform: rotateZ(5deg) translateY(0%);
	}
	80% {
		-moz-transform: rotateZ(7deg) translateY(-150%) rotateY(3turn);
		-ms-transform: rotateZ(7deg) translateY(-150%) rotateY(3turn);
		transform: rotateZ(7deg) translateY(-150%) rotateY(3turn);
	}
	85% {
		-moz-transform: rotateZ(7deg) translateY(-70%) rotateY(3turn);
		-ms-transform: rotateZ(7deg) translateY(-70%) rotateY(3turn);
		transform: rotateZ(7deg) translateY(-70%) rotateY(3turn);
	}
	100% {
		-moz-transform: rotateZ(7deg) translateY(-70%) rotateY(3turn);
		-ms-transform: rotateZ(7deg) translateY(-70%) rotateY(3turn);
		transform: rotateZ(7deg) translateY(-70%) rotateY(3turn);
	}
}

*/


#overlay {display:none; position:absolute; top:0; left:0; width:100vw; height:100vh; background:rgba(0, 0, 0, 0.5); z-index:8888}
#modal {display:none; padding:30px 20px; background:#fff; position:absolute; z-index:9999; width:400px; box-sizing: border-box; font-size:20px; text-align: center; left:50%; margin-left:-200px; top:50%; margin-top:-100px; -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75); -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}

.share-buttons { font-size:30px; padding:5px; padding-top:20px; text-align: center}
.share-buttons > * { margin:0 15px; cursor: pointer; color:#000}
.close { position:absolute; top:15px; right:15px; cursor:pointer; }