/* CSS DOCUMENT - WEBDOC - INSTINCT DE SURVIE - Par Stefano Rossi et Raza Haq Qazi */



/* NORMALIZE.CSS */
html {
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
body {
	margin: 0;
	background: #000;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
	display: block;
}
audio, canvas, progress, video {
	display: inline-block;
	vertical-align: baseline;
}
audio:not([controls]) {
	display: none;
	height: 0;
}
[hidden], template {
	display: none;
}
a {
	background: transparent;
}
a:active, a:hover {
	outline: 0;
}
abbr[title] {
	border-bottom: 1px dotted;
}
b, strong {
	font-weight: bold;
}
dfn {
	font-style: italic;
}
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}
mark {
	background: #ff0;
	color: #000;
}
small {
	font-size: 80%;
}
sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}
img {
	border: 0;
}
svg:not(:root) {
	overflow: hidden;
}
figure {
	margin: 1em 40px;
}
hr {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0;
}
pre {
	overflow: auto;
}
code, kbd, pre, samp {
	font-family: monospace, monospace;
	font-size: 1em;
}
button, input, optgroup, select, textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}
button {
	overflow: visible;
}
button, select {
	text-transform: none;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}
button[disabled], html input[disabled] {
	cursor: default;
}
button::-moz-focus-inner, input::-moz-focus-inner {
	border: 0;
	padding: 0;
}
input {
	line-height: normal;
}
input[type="checkbox"], input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}
input[type="search"] {
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}
fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}
legend {
	border: 0;
	padding: 0;
}
textarea {
	overflow: auto;
}
optgroup {
	font-weight: bold;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
td, th {
	padding: 0;
}



/* PERFECT-SCROLLBAR.JS */
.ps-container .ps-scrollbar-x-rail {
    position: absolute; /* please don't change 'position' */
    bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x-rail */
    height: 8px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    opacity: 0.1;
    filter: alpha(opacity = 0);
    -o-transition: background-color .2s linear, opacity .2s linear;
    -webkit-transition: background-color .2s linear, opacity .2s linear;
    -moz-transition: background-color .2s linear, opacity .2s linear;
    transition: background-color .2s linear, opacity .2s linear;
}
.ps-container:hover .ps-scrollbar-x-rail,
.ps-container.hover .ps-scrollbar-x-rail {
    opacity: 1;
    filter: alpha(opacity = 60);
}
.ps-container .ps-scrollbar-x-rail:hover,
.ps-container .ps-scrollbar-x-rail.hover {
    background-color: #eee;
    opacity: 1;
    filter: alpha(opacity = 90);
}
.ps-container .ps-scrollbar-x-rail.in-scrolling {
    opacity: 1;
    filter: alpha(opacity = 90);
}
.ps-container .ps-scrollbar-y-rail {
    position: absolute; /* please don't change 'position' */
    right: 3px; /* there must be 'right' for ps-scrollbar-y-rail */
    width: 8px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    opacity: 1;
    filter: alpha(opacity = 0);
    -o-transition: background-color .2s linear, opacity .2s linear;
    -webkit-transition: background-color .2s linear, opacity .2s linear;
    -moz-transition: background-color .2s linear, opacity .2s linear;
    transition: background-color .2s linear, opacity .2s linear;
}
/*.ps-container:hover .ps-scrollbar-y-rail,*/
.ps-container.hover .ps-scrollbar-y-rail {
    opacity: 1;
    filter: alpha(opacity = 60);
}
/*.ps-container .ps-scrollbar-y-rail:hover,*/
.ps-container .ps-scrollbar-y-rail.hover {
    background-color: #eee;
    opacity: 1;
    filter: alpha(opacity = 90);
}
.ps-container .ps-scrollbar-y-rail.in-scrolling {
    opacity: 1;
    filter: alpha(opacity = 90);
}
.ps-container .ps-scrollbar-x {
    position: absolute; /* please don't change 'position' */
    bottom: 0; /* there must be 'bottom' for ps-scrollbar-x */
    height: 8px;
    background-color: #aaa;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -o-transition: background-color .2s linear;
    -webkit-transition: background-color.2s linear;
    -moz-transition: background-color .2s linear;
    transition: background-color .2s linear;
}
.ps-container.ie6 .ps-scrollbar-x {
    font-size: 0; /* fixed scrollbar height in xp sp3 ie6 */
}
.ps-container .ps-scrollbar-x-rail:hover .ps-scrollbar-x,
.ps-container .ps-scrollbar-x-rail.hover .ps-scrollbar-x {
    background-color: #999;
}
.ps-container .ps-scrollbar-y {
    position: absolute; /* please don't change 'position' */
    right: 0; /* there must be 'right' for ps-scrollbar-y */
    width: 8px;
    background-color: #aaa;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -o-transition: background-color .2s linear;
    -webkit-transition: background-color.2s linear;
    -moz-transition: background-color .2s linear;
    transition: background-color .2s linear;
}
.ps-container.ie6 .ps-scrollbar-y {
    font-size: 0; /* fixed scrollbar height in xp sp3 ie6 */
}
.ps-container .ps-scrollbar-y-rail:hover .ps-scrollbar-y,
.ps-container .ps-scrollbar-y-rail.hover .ps-scrollbar-y {
    background-color: #999;
}
.ps-container.ie .ps-scrollbar-x,
.ps-container.ie .ps-scrollbar-y {
    visibility: hidden;
}
.ps-container.ie:hover .ps-scrollbar-x,
.ps-container.ie:hover .ps-scrollbar-y,
.ps-container.ie.hover .ps-scrollbar-x,
.ps-container.ie.hover .ps-scrollbar-y {
    visibility: visible;
}



/* @FONT-FACE */
@font-face {
    font-family: "Dosis";
    src: url("../font/dosis-regular.eot");
    src: url("../font/dosis-regular.eot?#iefix") format("embedded-opentype"),
         url("../font/dosis-regular.woff") format("woff"),
         url("../font/dosis-regular.ttf") format("truetype"),
         url("../font/dosis-regular.svg#Dosis") format("svg");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Poly";
    src: url("../font/poly-regular.eot");
    src: url("../font/poly-regular.eot?#iefix") format("embedded-opentype"),
         url("../font/poly-regular.woff") format("woff"),
         url("../font/poly-regular.ttf") format("truetype"),
         url("../font/poly-regular.svg#Poly") format("svg");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Poly";
    src: url("../font/poly-italic.eot");
    src: url("../font/poly-italic.eot?#iefix") format("embedded-opentype"),
         url("../font/poly-italic.woff") format("woff"),
         url("../font/poly-italic.ttf") format("truetype"),
         url("../font/poly-italic.svg#Poly") format("svg");
    font-weight: 400;
    font-style: italic;
}



/* @KEYFRAMES */
@-webkit-keyframes circle {
	0% {
		-webkit-transform: rotate(5deg);
	}
	100% {
		-webkit-transform: rotate(-5deg);
	}
}
@keyframes circle {
	0% {
		-moz-transform: rotate(5deg);
		-ms-transform: rotate(5deg);
		-o-transform: rotate(5deg);
		transform: rotate(5deg);
	}
	100% {
		-moz-transform: rotate(-5deg);
		-ms-transform: rotate(-5deg);
		-o-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}
}


/* GENERAL */
html, body {
	width: 100%; height: 100%;
	margin: 0; padding: 0;
	overflow: hidden;
}
body {
	color: #fff;
	font-family: 'Dosis', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	text-shadow: 0 0 2px #000;
	background-color: #000;
	background-image: url(../img/ui/pixel.png);
	background-repeat: repeat;
}
a, a:hover, a:visited {
	color: #fff;
	text-decoration: none;
}
.c-white {color: #fff;}
.c-dark {color: #3f3f3f;}
.c-red {color: #c64a4a;}
.transition-A {
	-webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
	-ms-transition: all .1s ease-in-out;
	-o-transition: all .1s ease-in-out;
	transition: all .1s ease-in-out;
}
.transition-B {
	-webkit-transition: opacity .1s ease-in-out;
	-moz-transition: opacity .1s ease-in-out;
	-ms-transition: opacity .1s ease-in-out;
	-o-transition: opacity .1s ease-in-out;
	transition: opacity .1s ease-in-out;
}
.transition-C {
	-webkit-transition: -webkit-transform .5s ease-in-out;
	-moz-transition: -moz-transform .5s ease-in-out;
	-ms-transition: -ms-transform .5s ease-in-out;
	-o-transition: -o-transform .5s ease-in-out;
	transition: transform .5s ease-in-out;
}
.transition-D {
	-webkit-transition: top .5s ease-in-out, left .5s ease-in-out;
	-moz-transition: top .5s ease-in-out, left .5s ease-in-out;
	-ms-transition: top .5s ease-in-out, left .5s ease-in-out;
	-o-transition: top .5s ease-in-out, left .5s ease-in-out;
	transition: top .5s ease-in-out, left .5s ease-in-out;
}
.transition-E {
	-webkit-transition: -webkit-transform .25s ease-in-out;
	-moz-transition: -moz-transform .25s ease-in-out;
	-ms-transition: -ms-transform .25s ease-in-out;
	-o-transition: -o-transform .25s ease-in-out;
	transition: transform .25s ease-in-out;
}
.transition-F {
	-webkit-transition: top .5s ease-in-out, left .5s ease-in-out, -webkit-transform .5s ease-in-out;
	-moz-transition: top .5s ease-in-out, left .5s ease-in-out, -moz-transform .5s ease-in-out;
	-ms-transition: top .5s ease-in-out, left .5s ease-in-out, -ms-transform .5s ease-in-out;
	-o-transition: top .5s ease-in-out, left .5s ease-in-out, -o-transform .5s ease-in-out;
	transition: top .5s ease-in-out, left .5s ease-in-out, transform .5s ease-in-out;
}
.transition-G {
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}
.transition-H {
	-webkit-transition: opacity .5s ease-in-out 0s;
	-moz-transition: opacity .5s ease-in-out 0s;
	-ms-transition: opacity .5s ease-in-out 0s;
	-o-transition: opacity .5s ease-in-out 0s;
	transition: opacity .5s ease-in-out 0s;
}
.transition-I {
	-webkit-transition: bottom .5s ease-in-out;
	-moz-transition: bottom .5s ease-in-out;
	-ms-transition: bottom .5s ease-in-out;
	-o-transition: bottom .5s ease-in-out;
	transition: bottom .5s ease-in-out;
}
.transition-J {
	-webkit-transition: left .5s ease-in-out;
	-moz-transition: left .5s ease-in-out;
	-ms-transition: left .5s ease-in-out;
	-o-transition: left .5s ease-in-out;
	transition: left .5s ease-in-out;
}
.transition-K {
	-webkit-transition: top .5s ease-in-out;
	-moz-transition: top .5s ease-in-out;
	-ms-transition: top .5s ease-in-out;
	-o-transition: top .5s ease-in-out;
	transition: top .5s ease-in-out;
}
.table {
	width: 100%; height: 100%;
	display: table;
	position: fixed;
	top: 0; left: 0;
	/* background: url("../img/ui/dust.png"); */
	z-index: 100;
}
#pI .table {
	background: url("../img/ui/dust.png");
}
	.table .content {
		width: 100%;
		display: table-cell;
		vertical-align: middle;
	}
header nav {
	position: fixed;
	top: -180px; left: 90px;
	z-index: 9999;
}
header nav.slideMenuA { top: -180px; } /* 90px */
header nav.slideMenuB { top: 0px; }
header nav.slideMapA { left: 90px; }
header nav.slideMapB { left: 390px; }
	header nav ul {
		margin: 0; padding: 0;
		list-style: none;
	}
		header nav ul li {
			display: block;
			position: relative;
			float: left;
		}
		header nav ul li.cross:after {
			content: "";
			width: 35px; height: 35px;
			position: absolute;
			top: 27.5px; right: -17.5px;
			background: url("../img/ui/sprite.png");
			background-position: -455px -35px;
			opacity: 1;
		}
			header nav ul li a {
				padding: 0 20px;
				font-size: 14px;
				font-family: 'Dosis', sans-serif;
				font-weight: 400;
				font-style: normal;
				text-align: center;
				text-transform: uppercase;
				line-height: 90px;
				opacity: .8;
			}
			header nav ul li a:hover {
				text-decoration: line-through;
				opacity: 1;
			}
			header nav ul li a.active {
				text-decoration: line-through;
				opacity: .4;
			}
footer {
	position: fixed;
	bottom: 16px; left: 20px;
}
	footer p {
		margin: 0; padding: 0;
		font-size: 10px;
		font-family: 'Dosis', sans-serif;
		font-weight: 400;
		font-style: normal;
		text-align: left;
		text-transform: uppercase;
		opacity:.8;
	}
		footer a:hover {
			text-decoration: line-through;
		}
/*
footer {
	position: fixed;
	bottom: 16px; left: 20px;
}
	footer p {
		margin: 0; padding: 0;
		font-size: 14px;
		font-family: 'Dosis', sans-serif;
		font-weight: 400;
		font-style: normal;
		text-align: left;
		text-transform: uppercase;
		opacity:.8;
	}
		footer a:hover {
			text-decoration: line-through;
		}
*/
aside {
	width: 300px; height: 100%;
	display: inline-block;
	position: fixed;
	top: 0; left: -305px;
	background: rgba(63,64,59,.98);
	box-shadow: 2px 0 5px #000;
	overflow: hidden;
	z-index: 99999;
}
aside.slideMapA { left: -305px; }
aside.slideMapB { left: 0px; }
	aside nav {
		width: 210px; height: 700px;
		position: relative;
		margin: 30px auto;
	}
	aside nav:before {
		content: "";
		width: 700px; height: 210px;
		position: absolute;
		top: 0; left: 210px;
		background-image: url(../img/ui/sprite.png);
		background-position: -560px 0;
		-webkit-transform-origin: left top;
		-moz-transform-origin: left top;
		-ms-transform-origin: left top;
		-o-transform-origin: left top;
		transform-origin: left top;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
		aside nav ul {
			width: 210px; height: 700px;
			display: inline-block;
			margin: 0; padding: 0;
			list-style: none;
			position: relative;
		}
		aside nav ul li {
			position: absolute;
		}
		aside nav ul li:hover {
			/*cursor: pointer;*/
		}
			aside nav ul li a {
				display: inline-block;
				font-size: 14px;
				font-family: 'Dosis', sans-serif;
				font-weight: 400;
				font-style: normal;
				text-align: left;
				text-transform: uppercase;
				line-height: 30px;
				opacity: 1;
			}
			aside nav ul li a:hover {
				cursor: pointer;
			}




		aside nav ul li:before, aside nav ul li:after {
			content: "";
			position: absolute;
			background: url("../img/ui/sprite.png");
		}
		aside nav ul li:after {
			width: 35px; height: 35px;
			background-position: -420px 0;
			opacity: 1;
		}
		aside nav ul li.done a {
			opacity: 1;
		}
		aside nav ul li.done:after {
			background-position: -420px -35px;
			opacity: 1;
		}
		aside nav ul li.active:before {
			width: 70px; height: 70px;
			background-position: -350px -140px;
		}
		aside nav ul li.active:after {
			width: 35px; height: 35px;
			background-position: -420px 0;
		}


			aside nav ul li#p-1 { top: 40px; left: -8px; }
			aside nav ul li#p-1:after { top: -33px; left: 1px; }
			aside nav ul li#p-1.active { top: 55px; left: -8px; }
			aside nav ul li#p-1.active:before { top: -65px; left: -16px; }
			aside nav ul li#p-1.active:after { top: -48px; left: 1px; }


			aside nav ul li#p-2 { top: 140px; left: 107px; }
			aside nav ul li#p-2:after { top: -34px; left: -13px; }
			aside nav ul li#p-2.active { top: 145px; left: 125px; }
			aside nav ul li#p-2.active:before { top: -56.5px; left: -48.5px; }
			aside nav ul li#p-2.active:after { top: -39px; left: -31px; }


			aside nav ul li#p-3 { top: 270px; left: 40px; }
			aside nav ul li#p-3:after { top: -34px; left: 20px; }
			aside nav ul li#p-3.active { top: 285px; left: 45px; }
			aside nav ul li#p-3.active:before { top: -66px; left: -2.5px; }
			aside nav ul li#p-3.active:after { top: -49px; left: 15px; }


			aside nav ul li#p-4 { top: 440px; left: 114px; }
			aside nav ul li#p-4:after { top: 12px; left: 33px; }
			aside nav ul li#p-4.active { top: 435px; left: 105px; }
			aside nav ul li#p-4.active:before { top: 0px; left: 25px; }
			aside nav ul li#p-4.active:after { top: 17px; left: 42px; }

			aside nav ul li#p-5 { top: 587px; left: 88px; }
			aside nav ul li#p-5:after { top: -2px; left: 94px; }
			aside nav ul li#p-5.active { top: 587px; left: 77px; }
			aside nav ul li#p-5.active:before { top: -20px; left: 88px; }
			aside nav ul li#p-5.active:after { top: -2px; left: 105px; }



#infobulle {
	width: 450px; height: 90px;
	display: table;
	position: fixed;
	right: 90px;
	padding: 0 10px;
}
#infobulle p {
	display: table-cell;
	vertical-align: middle;
	font-size: 14px;
	font-family: 'Dosis', sans-serif;
	font-weight: 400;
	font-style: normal;
	text-align: left;
	/*text-transform: uppercase;*/
	opacity: .8;
}
#infobulle.slideInfoA { top: -300px; }
#infobulle.slideInfoB { top: 0; }

























/* BUTTONS */
.button {
	width: 70px; height: 70px;
	display: block;
	position: fixed;
	background-image: url(../img/ui/sprite.png);
	background-repeat: no-repeat;
	background-clip: content-box;
	opacity: .8;
	cursor: pointer;
	z-index: 9999;
}
.button:hover {
	opacity: 1;
}


#mute {
	bottom: 0; right: 0;
	background-position: -210px 0;
	border: solid 10px;
	border-color: rgba(0,0,0,0);
}
#mute.off {
	background-position: -280px 0;
}



#menu-box, #menu-img {
	top: 0; left: 0;
	background-position: 0 0;
	border: solid 10px;
}
#menu-box.slideMapA, #menu-img.slideMapA { left: 0; }
#menu-box.slideMapB, #menu-img.slideMapB { left: 300px; }
#menu-box {
	background-image: none;
	background-color: rgba(0,0,0,0);
	border-color: rgba(0,0,0,0);
	/* border-radius: 0 10px 10px 0; */
}
#menu-img {
	background-image: url(../img/ui/sprite.png);
	background-color: rgba(0,0,0,0);
	border-color: rgba(0,0,0,0);
}
#menu-img.rotateA {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}
#menu-img.rotateB {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}



#map {
	bottom: 0; left: 0;
	background-position: -70px 0;
	border: solid 10px;
	border-color: rgba(0,0,0,0);
}
#map.slideMapA { left: 10px; }
#map.slideMapB { left: 310px; }
#map.rotateA {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}
#map.rotateB {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}



#info {
	top: 0; right: 0;
	background-position: -140px 0;
	border: solid 10px;
	border-color: rgba(0,0,0,0);
}
#info.rotateA {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}
#info.rotateB {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}




















/* PAGE-I - INTRO */
#pI #info, #pI #map { display: none; }
#pI #table {
	z-index: 100;
}
	#pI header {
		width: 100%; height: auto;
	}
		#pI header h1 {
		}
			/*
			#pI header h1 a {
				width: 200px; height: 150px;
				display: block;
				margin: auto;
				background: url("../img/ui/logo-small.png");
			}
			*/
			#pI header h1 a {
				width: 339px; height: 124px;
				display: block;
				margin: auto;
				background: url("../img/ui/logo-large.png");
			}
			#pI header h1 a:hover {
			}
				#pI header h1 a span {
					display: none;
				}
		#pI main p {
			max-width: 600px;
			margin: auto; padding: 10px 5%;
			font-family: 'Poly', serif;
			font-style: italic;
			text-align: center;
		}
		#pI main p#start {
			margin: 15px auto;
		}
			#pI main p a {
				padding: 10px 20px;
				font-size: 14px;
				font-family: 'Dosis', sans-serif;
				font-weight: 400;
				font-style: normal;
				text-align: center;
				text-transform: uppercase;
				background: rgba(255,255,255, 0);
				border: solid 2px;
				border-color: rgba(255,255,255, 1);
			}
			#pI main p a:hover {
				color:rgba(255,255,255,1);
				background: rgba(255,255,255, .2);
				border-color: rgba(255,255,255, .5);
				text-shadow: 0 0 0 #000;
			}
			#pI main p a:active {
				color:rgba(255,255,255,.5);
				background: rgba(255,255,255, .1);
				border-color: rgba(255,255,255, .5);
				text-shadow: 0 0 0 #000;
			}







/* PAGE-T - TEMPLATE */
#pT #video {
	z-index: -100;
}
#pT #compass {
	z-index: 100;
}
#pT #text {
	z-index: 1000;
}
#pT .arrow {
	z-index: 1500;
}
#pT #main {
	z-index: 5000;
}
#pT header {
	z-index: 9000;
}

	#pT #boussole {
		width: 420px; height: 420px;
		position: relative;
		margin: auto;
	}
		#pT .b-all {
			width: 420px; height: 420px;
			position: absolute;
			top: 0; left: 0;
			background-image: url("../img/ui/sprite.png");
		}
		#pT #boussole #grad {
			background-position: 0 -210px;
			opacity: .8;
		}
		#pT #boussole #circle {
			background-position: -420px -210px;
			opacity: .8;
			-webkit-animation: circle 2s ease-in-out 0s infinite alternate;
			animation: circle 2s ease-in-out 0s infinite alternate;
		}
		#pT #boussole #aig {
			background-position: -840px -210px;
			opacity: 1;
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
		}
	#pT .arrow {
		width: 35px; height: 35px;
		position: fixed;
		display: block;
		background-image: url("../img/ui/sprite.png");
		cursor: pointer;
		opacity: .8;
	}
	#pT .arrow:hover {
		opacity: 1;
	}
	#pT #left, #pT #right { top: 0;}
	#pT #left { left: 27.5px; background-position: -490px -70px; }
	#pT #right { right: 27.5px; background-position: -490px -105px; }
	#pT #back { top: -84px; left: 300px; background-position: -525px -105px; }
	#pT #left.slideArrowA { left: 27.5px; }
	#pT #left.slideArrowB { left: 327.5px; }
	#pT #back.slideBackA { top: -84px; }
	#pT #back.slideBackB { top: 8.5px; } /* 27.5 - 19px */
		#pT .arrow .txt {
			width: 75px; height: 44.8px;
			position: absolute;
			display: block;
			padding: 20px;
			font-family: "Dosis", sans-serif;
			font-size: 14px;
			text-align: center;
			text-transform: uppercase;
			opacity: 0;
		}
		#pT .arrow:hover .txt {
			opacity: 1;
		}
		#pT .arrow #txt-left, #pT .arrow #txt-right { top: -22.5px; }
		#pT .arrow #txt-left {
			left: 30px;
			text-align: left;
		}
		#pT .arrow #txt-right {
			right: 30px;
			text-align: right;
		}
		#pT .arrow #txt-back {
			top: 20px; right: -40px;
		}






#pT #title {
	width: 280px; height: 280px;
	position: fixed;
	top: 0; left: 0;
	display: table;
	border-radius: 50%;
}
	#pT #title div {
		width: 100%; height: 100%;
		position: relative;
		display: table-cell;
		margin: auto;
		vertical-align: middle;
		border-radius: 50%;
	}
	#pT #title div:hover {
		cursor: help;
	}
		#pT #title div p {
			padding: 10%;
			margin: auto;
			font-size: 18px;
			font-family: 'Poly', serif;
			font-style: italic;
			text-align: center;
			opacity: 0;
			z-index: 100;
		}
		#pT #title div:hover p {
			opacity: 1;
		}
		#pT #title div p:after {
			content: "";
			width: 100%; height: 100%; /* height: 200% */ /************************************ IE FIX */
			position: absolute;
			top: -10px; left: -10px;
			border: solid 10px;
			background: rgba(63,64,59, 0);
			border-color: rgba(255,255,255, .8);
			border-radius: 50%;
			z-index: -100;
			-webkit-transform: scale(0);
			-moz-transform: scale(0);
			-ms-transform: scale(0);
			-o-transform: scale(0);
			transform: scale(0);
			-webkit-transition: all .4s ease-in-out;
			-moz-transition: all .4s ease-in-out;
			-ms-transition: all .4s ease-in-out;
			-o-transition: all .4s ease-in-out;
			transition: all .4s ease-in-out;
		}
		#pT #title div p.ie:after { height: 200%; } /* height: 200% */ /************************************ IE FIX */
		#pT #title div:hover p:after {
			background: rgba(63,64,59,.95);
			-webkit-transform: scale(1);
			-moz-transform: scale(1);
			-ms-transform: scale(1);
			-o-transform: scale(1);
			transform: scale(1);
		}
		#pT #title div.tempo p { opacity: 1; }
		#pT #title div.tempo p:after {
			background: rgba(63,64,59,.95);
			-webkit-transform: scale(1);
			-moz-transform: scale(1);
			-ms-transform: scale(1);
			-o-transform: scale(1);
			transform: scale(1);
		}



#pT #main {
	width: 100%; height: 100%;
	display: block; /*display: inline;*/ /*************************************************** FIREFOX FIX */
}
	#pT #main div {
		width: 50%; height: 50%;
		display: block; /*display: table;*/ /*************************************************** FIREFOX FIX */
		float: left;
		cursor: pointer;
	}
	#pT #main div#b-1 {}
	#pT #main div#b-2 {}
	#pT #main div#b-3 {}
	#pT #main div#b-4 {}

		#pT #main div div {
			width: 100%; height: 100%;
			display: table;
		}
		#pT #main div div p {
			width: 100%; height: 100%;
			display: table-cell;
			vertical-align: middle;
			font-size: 18px;
			font-family: 'Poly', serif;
			font-style: italic;
			text-align: center;
		}
		#pT #main div div p.tempo {
			opacity: 0;
		}
		#pT #main div div p.tempo:hover {
			cursor: default;
		}
		#pT #main div div p span {
			position: relative;
			display: inline-block;
			margin: auto;
		}
			#pT #main div div p span:before {
				content: "";
				width: 35px; height: 35px;
				position: absolute;
				top: -5px; left: -50px;
				background: url("../img/ui/sprite.png");
				opacity: 0;
				-webkit-transition: opacity .5s ease-in-out 0s;
				-moz-transition: opacity .5s ease-in-out 0s;
				-ms-transition: opacity .5s ease-in-out 0s;
				-o-transition: opacity .5s ease-in-out 0s;
				transition: opacity .5s ease-in-out 0s;
			}
			#pT #main div div p span.icon:before {
				opacity: 1;
			}
			#pT #main div div span.video:before { background-position: -490px -35px; }
			#pT #main div div span.img:before { background-position: -490px 0; }




/* PAGE-X - ABOUT */
#pX #about #main {
	width: 100%;
	display: block;
	position: fixed;
	top: 0;
	overflow: hidden;
}
	#pX #about #main  {
		width: 100%; height: 100%;
		display: inline-block;
	}
		#pX #about #main div.list {
			width: 50%; height: 100%;
			display: table;
			float: left;
		}
		#pX #about #main div.list div {
			width: 100%; height: 100%;
			display: table-cell;
			vertical-align: bottom;
			text-align: center;
		}
			#pX #about #main div.list div h2 {
				color: rgba(255,255,255,1);
				font-size: 18px;
				font-family: "Poly", serif;
				font-style: normal;
				margin: 10px;
			}
			#pX #about #main div.list div h3 {
				color: rgba(255,255,255,.8);
				font-size: 16px;
				font-family: "Poly", serif;
				font-style: italic;
				margin: 10px;
			}
			#pX #about #main div.list div ul {
				width: 220px;
				margin: 0 auto 50px auto; padding: 0;
				font-size: 16px;
				font-family: "Dosis", sans-serif;
				font-style: normal;
				list-style: none;
				overflow: hidden;
			}
			#pX #about #main div.list div ul li {
				float: left;
				display: block;
				width: 35px; height: 35px;
				margin: 10px;
				text-align: center;
			}
				#pX #about #main div.list div ul li a {
					color: rgba(255,255,255,.8);
					display: block;
					width: 35px; height: 35px;
					background: url("../img/ui/sprite.png");
					opacity: .8;
				}
				#pX #about #main div.list div ul li a:hover { opacity: 1; }
				#pX #about #main div.list div ul li a.google { background-position: -420px -70px; }
				#pX #about #main div.list div ul li a.twitter { background-position: -455px -70px; }
				#pX #about #main div.list div ul li a.siteweb { background-position: -420px -105px; }
				#pX #about #main div.list div ul li a.email { background-position: -455px -105px; }
					#pX #about #main div.list div ul li a span {
						display: none;
					}


/* PAGE-X - CREDITS */
	#pX #credits #main h2 {
		color: rgba(255,255,255,1);
		font-size: 18px;
		font-family: "Poly", serif;
		font-style: normal;
		text-align: center;
	}
	#pX #credits #main ul {
		margin: 0; padding: 0;
		list-style: none;
		color: rgba(255,255,255,.8);
		font-size: 16px;
		font-family: "Poly", serif;
		font-style: italic;
		text-align: center;
		/*text-transform: uppercase;*/
	}
		#pX #credits #main ul li a {
			color: rgba(255,255,255,1);
			text-decoration: none;
		}
		#pX #credits #main ul li a:hover {
			text-decoration: line-through;
		}
	#pX #credits #main p {
		max-width: 500px;
		margin: auto; padding: 0 50px;
		color: rgba(255,255,255,.8);
		font-size: 16px;
		font-family: "Poly", serif;
		font-style: italic;
		text-align: center;
	}
	#pX #credits #main p a {
		color: rgba(255,255,255,1);
	}
	#pX #credits #main p a:hover {
		text-decoration: line-through;
	}
















/* ALL */
#media {
	width: 100%; height: 100%;
	position: fixed;
	top: 0; left: 0;
	opacity: .6;
	z-index: -100;
}
	#media .video-f {
		position: fixed;
		top: 0; left: 0;
	}
		#media .video-f .v-full {
			margin: 0; padding: 0;
			-webkit-object-fit: cover;
			-moz-object-fit: cover;
			-ms-object-fit: cover;
			-o-object-fit: cover;
			object-fit: cover;
			-webkit-object-position: center center;
			-moz-object-position: center center;
			-ms-object-position: center center;
			-o-object-position: center center;
			object-position: center center;
		}
	#media .video-h {
		width: 50%; height: 100%;
		float: left;
		overflow: hidden;
	}
		#media .video-h .v-half {
			margin: 0; padding: 0;
			-webkit-object-fit: cover;
			-moz-object-fit: cover;
			-ms-object-fit: cover;
			-o-object-fit: cover;
			object-fit: cover;
			-webkit-object-position: center center;
			-moz-object-position: center center;
			-ms-object-position: center center;
			-o-object-position: center center;
			object-position: center center;
		}
	#media .video-q {
		width: 50%; height: 50%;
		float: left;
		overflow: hidden;
	}
		#media .video-q .v-quart {
			margin: 0; padding: 0;
			-webkit-object-fit: cover;
			-moz-object-fit: cover;
			-ms-object-fit: cover;
			-o-object-fit: cover;
			object-fit: cover;
			-webkit-object-position: center center;
			-moz-object-position: center center;
			-ms-object-position: center center;
			-o-object-position: center center;
			object-position: center center;
			-webkit-transition: opacity .5s ease-in-out 0s;
			-moz-transition: opacity .5s ease-in-out 0s;
			-ms-transition: opacity .5s ease-in-out 0s;
			-o-transition: opacity .5s ease-in-out 0s;
			transition: opacity .5s ease-in-out 0s;
		}
	#media .img-f {
		width: 100%; height: 100%;
		position: fixed;
		top: 0; left: 0;
	}
		#media .img-f .i-full {
			margin: 0; padding: 0;
			background-image: url("../photo/p0-0.png");
			background-position: center center;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-ms-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
		}
	#media .img-q {
		width: 50%; height: 50%;
		float: left;
		overflow: hidden;
	}
		#media .img-q .i-quart {
			margin: 0; padding: 0;
			background-image: url("../photo/p1-3.jpg");
			background-position: center center;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-ms-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
			-webkit-transition: opacity .5s ease-in-out 0s;
			-moz-transition: opacity .5s ease-in-out 0s;
			-ms-transition: opacity .5s ease-in-out 0s;
			-o-transition: opacity .5s ease-in-out 0s;
			transition: opacity .5s ease-in-out 0s;
		}
		/*
		#media .bad { background: rgba(199,75,75,.7); }
		#media .good { background: rgba(107,171,75,.7); }
		#media .bad .v-quart, #media .good .v-quart { opacity: .4; }*/
		#media #v-1, #media #v-2, #media #v-3, #media #v-4, #media #i-1, #media #i-2, #media #i-3, #media #i-4  {
			opacity: .6;
		}
@media (min-aspect-ratio: 16/9) {
	.v-full {
		width: 100%;
		height: auto;
	}
	.i-full {
		width: 100%;
		height: 100%;
	}
	.v-quart {
		width: 100%;
		height: auto;
	}
	.i-quart {
		width: 100%;
		height: 100%;
	}
	.v-half {
		width: 100%;
		height: auto;
	}
}
@media (max-aspect-ratio: 16/9) {
	.v-full {
		width: auto;
		height: 100%;
	}
	.i-full {
		width: 100%;
		height: 100%;
	}
	.v-quart {
		width: auto;
		height: 100%;
	}
	.i-quart {
		width: 100%;
		height: 100%;
	}
	.v-half {
		width: 100%;
		height: auto;
	}
}










#pT #interface {
	width: 100%; height: 100%;
	display: table;
	position: fixed;
	top: 0; left: 0;
}
	#pT #interface #middle {
		width:100%; height:100%;
		display: table-cell;
		vertical-align: middle;
		position: absolute; /* relative */
		bottom: -84px; left: 0;
		-webkit-transition: bottom .5s ease-in-out 0s;
		-moz-transition: bottom .5s ease-in-out 0s;
		-ms-transition: bottom .5s ease-in-out 0s;
		-o-transition: bottom .5s ease-in-out 0s;
		transition: bottom .5s ease-in-out 0s;
	}
	#pT #interface #middle.slideMiddleA { bottom: -84px; }
	#pT #interface #middle.slideMiddleB { bottom: 0; }

		#pT #interface #middle #choice {
			position: fixed; /* fixed */
			bottom: 70px; left: 100px;
		}
			#pT #interface #middle #choice h2 {
				max-width: 500px;
				display: block;
				margin-right: 100px;
				margin-bottom: 0;
				padding: 0;
				color: rgba(255,255,255,1);
				font-size: 18px;
				font-family: "Poly", serif;
				font-style: normal;
			}
			#pT #interface #middle #choice p {
				max-width: 500px;
				display: block;
				margin-right: 100px;
				margin-top: 5px;
				color: rgba(255,255,255,.8);
				font-size: 16px;
				font-family: "Poly", serif;
				font-style: italic;
			}
			#pT #interface #middle #choice p a {
				color: rgba(255,255,255,1);
			}
			#pT #interface #middle #choice p a:hover {
				text-decoration: line-through;
			}
		#pT #interface #middle #playpause {
			width: 35px; height: 35px;
			position: absolute; /* fixed */
			bottom: 27.5px; right: 232.5px;
			display: block;
			background: url("../img/ui/sprite.png");
			opacity: .8;
			cursor: pointer;
		}
		#pT #interface #middle #playpause:hover { opacity: 1; }
		#pT #interface #middle #playpause.play { background-position: -525px -35px; }
		#pT #interface #middle #playpause.pause{ background-position: -525px 0; }
		#pT #interface #middle #playpause.replay{ background-position: -525px -70px; }
/*
	#pT #interface #bottom {
		width:100%; height:0;
		position: absolute;
		bottom: 0; left: 0;
		display: block;
		background: yellow;
	} */
		#pT #interface #middle #progressbar {}
		#pT #interface #progressbar.progressor {
			width: 100%; height: 8px;
			position: absolute;
			bottom: 41px; left: 0;
			margin: 0 100px;
			background: rgba(255,255,255,.1);
			box-shadow: 0 0 2px rgba(0,0,0,.5);
			cursor: pointer;
			-webkit-transition: all.1s ease-in-out 0s;
			-moz-transition: all .1s ease-in-out 0s;
			-ms-transition: all .1s ease-in-out 0s;
			-o-transition: all .1s ease-in-out 0s;
			transition: all .1s ease-in-out 0s;
		}

		#pT #interface #progressbar.progressor:hover {
			height: 20px;
			bottom: 35px;
			background: rgba(255,255,255,.3);
		}
			#pT #interface #progressbar .progressor-progress {
				background: rgba(255,255,255,.6);
				-webkit-transition: all .5s ease-in-out 0s;
				-moz-transition: all .5s ease-in-out 0s;
				-ms-transition: all .5s ease-in-out 0s;
				-o-transition: all .5s ease-in-out 0s;
				transition: all .5s ease-in-out 0s;
			}


#volume {
	width: 100px; height: 84px;
	display: block;
	position: absolute;
	bottom: -84px; right: 90px;
	padding: 0 10px;
	z-index:999999;
}
#volume.slideVolumeA { bottom: -84px; }
#volume.slideVolumeB { bottom: 0; }
	#bar {
		width: 100px; height: 8px;
		display: block;
		position: absolute;
		bottom: 6px; right: 0;
		margin: 35px 10px;
		background: rgba(255,255,255,.1);
		box-shadow: 0 0 2px rgba(0,0,0,.5);
		-webkit-transition: bottom .1s ease-in-out 0s, height .1s ease-in-out 0s, background .1s ease-in-out 0s;
		-moz-transition: bottom .1s ease-in-out 0s, height .1s ease-in-out 0s, background .1s ease-in-out 0s;
		-ms-transition: bottom .1s ease-in-out 0s, height .1s ease-in-out 0s, background .1s ease-in-out 0s;
		-o-transition: bottom .1s ease-in-out 0s, height .1s ease-in-out 0s, background .1s ease-in-out 0s;
		transition: bottom .1s ease-in-out 0s, height .1s ease-in-out 0s, background .1s ease-in-out 0s;
	}
	#bar:hover {
		height: 20px;
		bottom: 0;
		background: rgba(255,255,255,.3);
		cursor: pointer;
	}
		.cursor {
			width: 50px; height: 8px;
			display: block;
			position: absolute;
			top: 0; left: 0;
			background: rgba(255,255,255,.6);
			-webkit-transition: height .1s ease-in-out 0s, background .1s ease-in-out 0s, width .5s ease-in-out 0s;
			-moz-transition: height .1s ease-in-out 0s, background .1s ease-in-out 0s, width .5s ease-in-out 0s;
			-ms-transition: height .1s ease-in-out 0s, background .1s ease-in-out 0s, width .5s ease-in-out 0s;
			-o-transition: height .1s ease-in-out 0s, background .1s ease-in-out 0s, width .5s ease-in-out 0s;
			transition: height .1s ease-in-out 0s, background .1s ease-in-out 0s, width .5s ease-in-out 0s;
		}
		#bar:hover .cursor {
			height: 20px;
		}





footer, #pI #map, #pI #info, #pX #map, #pT header h1, #pX header h1, .pC #info, #pX #info { display: none; }

#pI footer {
	display: block;
}










/* SCREEN SIZE + NOSCRIPT */
#screensize, noscript {
	width: 100%; height: 100%;
	display: table; position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background-color: rgba(63,64,59,1);
	z-index: 10000;
}
#screensize { z-index: 10000; }
noscript { z-index: 10100; }
#screensize div, noscript div {
	width: 100%; height: 100%;
	display: table-cell;
	vertical-align: middle;
}
#screensize div p.info-h2, noscript div p.info-h2 {
	width: 90%; max-width: 550px;
	display: block;
	margin: 0 auto 0;
	font-family: 'Poly', sans-serif;
	font-size: 32px; /* 2rem; */
	text-align: center;
	line-height: 1.8;
	speak: normal;
	opacity: .8;
}
#screensize div p.info-p1, noscript div p.info-p1 {
	width: 90%;
	max-width: 450px;
	margin: auto;
	font-family: 'Poly', sans-serif;
	text-align: center;
	speak: normal;
	opacity: .6;
}
#screensize div p.info-p2 {
	margin: 25px auto 0;
	font-size: 14px;
	font-family: 'Poly', sans-serif;
	text-align: center;
	opacity: .8;
}
#screensize div p.info-h1, noscript div p.info-h1,
#screensize div p.info-footer, noscript div p.info-footer {
	display: inline; position: absolute;
	bottom: 5px;
	padding: 0; margin: 0;
	line-height: auto;
	opacity: 1;
	color: rgba(255,255,255,.6);
}
#screensize div p.info-h1, noscript div p.info-h1 { left: 5px; }
#screensize div p.info-footer, noscript div p.info-footer { right: 5px; }
#screensize div p.info-h1 a, noscript div p.info-h1 a,
#screensize div p.info-footer, noscript div p.info-footer {
	display: inline;
	padding: 5px; margin: 0;
	font-family: 'Poly', sans-serif;
	font-size: 14px; line-height: 1.6;
	speak: normal;
	float: left;
}
#screensize div p.info-h1 a, noscript div p.info-h1 a { text-align: left; font-size: 16px; }
#screensize div p.info-footer, noscript div p.info-footer { text-align: right; }

#screensize a, noscript a { color: rgba(255,255,255,.8); }
#screensize a:hover, noscript a:hover { text-decoration: line-through; }



@media screen and (min-width: 0px) and (max-width: 1144px) {
	body { width: 100%; height: 100%; overflow: hidden; }
	#pI div.table, #pT div.table, #pX div.table, #media,
	#left, #right, #mute, #volume, #menu-box, #menu-img, #map, #info, #back
	{ display: none !important; }
}
@media screen and (min-height: 0px) and (max-height: 489px) {
	body { width: 100%; height: 100%; overflow: hidden; }
	#pI div.table, #pT div.table, #pX div.table, #media,
	#left, #right, #mute, #volume, #menu-box, #menu-img, #map, #info, #back
	{ display: none !important; }
}
@media screen and (min-width: 1145px) and (min-height: 490px) {
	#screensize { display: none; }
}
#screensize { opacity: 1; }