/* Shared CSS for all pages */

* {
	  box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  -webkit-box-sizing: border-box;
	  -webkit-tap-highlight-color:rgba(0,0,0,0);
	}


html, body {
	margin:0; padding:0; height:100%; width:100%;
	background-color: #FAFAF8; color:#333;
	/*background-color:#000; color:#fff;*/
	font-family: 'Lora','Georgia', serif; font-size:18px;
	line-height: 175%;
}

o________________TEXT {}

h1, h2, h3 {
	margin:0; padding:0;
	font-family: "Lato", sans-serif; font-style:normal; font-weight: 100;
	text-transform: uppercase;
}

h1 {font-size: 4em; line-height:150%;}
h2 {font-size: 4em; line-height:150%;}
h3 {font-size: 2.25em}

/*b, h1, h3 {color:#333;}*/
.big {font-size:1.25em; line-height: 200%}
b {font-weight: 700;}
.colored {color:#FA8;}

.only-mobile {display:none;}

o________________FX {}
.easing {
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: 	ease-out;
	-ms-transition-timing-function: 	ease-out;
    transition-timing-function: 		ease-out;
}

.slow {
	-webkit-transition: 1500ms;
	-moz-transition: 	1500ms;
	-ms-transition: 	1500ms;
	transition: 		1500ms;
}


.fast {
	-webkit-transition: 500ms;
	-moz-transition: 	500ms;
	-ms-transition: 	500ms;
	transition: 		500ms;
}


o________________VIDEO {}
.old_video-container {
	position: relative; padding:100px;
	padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;
}
.video-container {
	position:absolute;
}
.video-container iframe, .video-container object, .video-container embed {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

o________________GUI {}
.arrow {
	position: fixed;
	display:block; width:64px; height:64px;
	color:#000;
	z-index:120;
	font-size: .75em;
	background-image: url('../img/gui.png');
	background-size:512px 160px;
	background-repeat: no-repeat;
	cursor:pointer;

}

.arrow {
	-webkit-transition: background-position 200ms;
	-moz-transition: 	background-position 200ms;
	transition: 		background-position 200ms;
}

.up { background-position:0 -12px; top:10%; left:50%; margin-left: -32px; }
.up:hover { background-position:0 -16px; }
.up span { position:absolute; bottom:0; width:100%; left:0; text-align: center }


.down { background-position:-64px -4px; bottom:10%; left:50%; margin-left: -32px; }
.down span { position:absolute; top:0; width:100%; left:0; text-align: center }
.down:hover { background-position:-64px 0px; }

.left { background-position:-128px -8px; left:0; top:50%; margin-top: -32px; }
.left span { position:absolute; top:50%; margin-top:-1em; width:100%; left:60%; padding:0; text-align: left }
.left:hover { background-position:-132px -8px; }

.right { background-position:-192px -8px; right:0; top:50%; margin-top: -32px; }
.right span { position:absolute; top:50%; margin-top:-1em; width:100%; right:60%; padding:0; text-align: right }
.right:hover { background-position:-188px -8px; }


.link { cursor:pointer;}

#white-out {
	position: fixed;
	left:0; top:0;
	display:none;
	width:100%; height:100vh;
	z-index: 200;
	background: #FAFAF8;
}

.visible {
	display:block !important;
}





#o______________________responsive {}

@media (max-width:920px) and (min-width: 741px) {
	body, html { font-size:14px;}
}


@media (max-width: 740px) and (min-width: 341px) {
	body, html { font-size:14px; line-height: 130%}
	.down {bottom:0;}
	.title {top:30%;}
}

@media (max-width: 460px) {

/*h1 {font-size:2em; font-weight: 400; margin:0;}*/

body, html { font-size:12px; line-height: 100%}
	.no-mobile {display:none;}
	.only-mobile {display:inline;}
	.onepage-pagination {bottom:32px !important;}
}