/* GENERAL */
/* width */
* {
	margin :0;
}

::-webkit-scrollbar { display: none; }

*::-webkit-scrollbar {
  display: none;
  -webkit-appearance: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
* {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
	
body::-webkit-scrollbar {
	-webkit-appearance: none;

}
html, body {
	background: black;
}
::selection{
	background: rgba(0, 0, 0, 0); 
	color: black;
}


/* Firefox */
::-moz-selection {
	background: rgba(0, 0, 0, 0); 
	color: black;
}


::-moz-selection { /* Code for Firefox */
  color: black;
  background: rgba(0, 0, 0, 0); 
}

::selection {
  color: black;
  background: rgba(0, 0, 0, 0); 
}
/*
	-webkit-touch-callout: none;
   	-webkit-user-select: none;
   	-khtml-user-select: none;
   	-moz-user-select: none;
   	-ms-user-select: none;
   	user-select: none;
*/

::-webkit-scrollbar {
  width: 0px;
}
/* Track */
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0); 
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0); 
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0); 
}

body {
overflow-x: hidden;
}

html, body {
	background: black;
}

@font-face {
    font-family: 'HelveticaNeue-Medium';
    src: url("fonts/HelveticaNeue-Medium.woff") format("woff");
}

input, textarea, button, select, a {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

a {
	color: inherit; /* blue colors for links too */
	text-decoration: inherit; /* no underline */
}

/* TONE */
#tone{
	position: fixed;
	height: 100%;
	width: 100%;
	z-index: 100;
	top: 0px;
  left: 50%;
  transform: translate(-50%);
	background: url(content/trame.png) repeat;
	mix-blend-mode: multiply;
	pointer-events: none;
}



/*LOGO*/
#logo-content{
	border: 0px solid green;
	z-index: 200;
	display: flex;
	position: fixed;
	height: 50px;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	color: white;
	text-align: center;
	cursor: default;
	font-family: Futura;
}
#logo {
	cursor: grab;
	font-family:'HelveticaNeue-Medium', serif;
	position: fixed;
	top:10px;
	z-index:3;
	color: white;
	width: 400px;
	transition: 0.5s;
}

#logo:hover {
	transform: scale(1.05) translateX(10px);;
	transition: 0.5s;
}

#logo-content > span {

	padding: 10px;
}
/*LOGO*/



/* HEADER */
#header{
	z-index: 5;
	display: flex;
	position: fixed;
	height: 90px;
	width: 101%;
	font-family: HelveticaNeue-Medium;
	background: url(content/gradient.png);
	mix-blend-mode: multiply;
	background-color: rgba(0, 0, 0, 0);
	background-size: 100% 90px;
	font-size: 10pt;
	justify-content: space-around;
	align-items: center;
	color: white;
	text-align: center;
	cursor: default;
}

#header > span > {mix-blend-mode: normal;}


#header > div > span > a {cursor: default; text-decoration: none;}


/* FOOTER */
#footer{
	display: flex;
	position: fixed;
	height: 40px;
	width: 100%;
	bottom: 0;
	font-family: futura;
	background: rgba(0, 0, 0, 1);
	z-index: 200;
	font-size: 10pt;
	justify-content: space-between;
	align-items: center;
	color: white;
}

#footer > div {

padding: 15px;
}

#footer > span > a {text-decoration: none;color: white}



.videoInsert {
    position: absolute; 
    top: 0;
    left: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto;
    height: auto;
    /*z-index: -100;*/
    background-size: cover;
    overflow: hidden;
    opacity: 0.8;
    filter: grayscale(80%) contrast(150%) brightness(50%);
}


.videoInsert:hover {
	filter: grayscale(0%) contrast(100%);
	opacity: 1;

}

/*TOP VIDEO*/
#screenTop {
	border: 0px solid red;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
}

#screenMiddle {
	border: 0px solid blue;
  position: fixed;
  left: 0;
  bottom:0;
  overflow: hidden;
}

#screenBottom {
	border: 0px solid blue;
  position: fixed;
  left: 0;
  bottom:0;
  overflow: hidden;
}

.startTp {
	width: 100%;
	height: 33%;
	transition: 0.5s;
	top: 0;
}

.openTp {
  width: 100%;
  height: 100%;
  top: 0;
  transition: 0.5s;
}

.offTp {
  width: 100%;
  height: 50%;
  transition: 0.5s;
}


.startMd {
	width: 100%;
	height: 33%;
	top: 33%;
	transition: 0.5s;
}


.openMd {
  width: 100%;
  height: 100%;
  top: 0;
  transition: 0.5s;
}

.offMd {
  width: 100%;
  height: 0%;
  transition: 0.5s;
}


.startBt {
	width: 100%;
	height: 33%;
	top: 66%;
	transition: 0.5s;
}

.openBt {
  width: 100%;
  height: 100%;
  top: 0;
  transition: 0.5s;
}

.offBt {
  width: 100%;
  height: 0%;
  transition: 0.5s;
}










#logoTop {
	cursor: default;
	position: fixed;
	left:50%;
	transform: translate(-50%,-50%);
	z-index:100;
	width: 520px;
	opacity: 1;
	transition: 0.5s;
}

#logoMiddle{
	cursor: default;
	position: fixed;
	left:50%;
	transform: translate(-50%,-50%);
	z-index:100;
	width: 600px;
	opacity: 1;
	transition: 0.5s;
}
/*LOGO*/


#logoBottom {
	cursor: default;
	position: fixed;
	left:50%;
	transform: translate(-50%,-50%);
	z-index:100;
	width: 300px;
	opacity: 1;
	transition: 0.5s;
}
/*LOGO*/


.sSetTp {
	top:16.5%;
}

.sSetMd {
	top:50%;
}

.sSetBt {
	top:81%;
}

.sOn {
	top:50%;
	transition: 0.5s;
}

.sOff {

}



#pInfo{
	border: 0px solid red;
	width: 99%;
	height: 66%;
	top: 0%;
	z-index: 100;
	position: fixed;
  pointer-events: none;
  text-align: right;
  right: -10px;
}

#markP1{
	position: absolute;
	width: 10px;
	height: 10px;
	right: 20px;
	bottom: 34px;
	animation: blink 2s both infinite;;
}

#markInfoP1{
	border: 0px solid red;
	position: absolute;
	width: 400px;
	height: 20px;
	color:white;
	font-family: Futura;
	bottom: 30px;
	right: 35px;
}




#zButton, #pButton, #vButton {
	position: fixed;
	display: none;
	bottom: 100px;
	left: 0px;
	font-size: 40pt;
	font-family: Futura;
	color: white;
	z-index: 500;
	text-align: center;
	width: 100%;
	border: 0px solid red;
	justify-content: space-evenly;
	mix-blend-mode: screen;
}

/*
#zButton > span:hover, #pButton > span:hover, #vButton > span:hover{
	text-decoration: underline;
}
*/


@keyframes blink {
  0% {opacity: 1}
  50% {opacity: 0}
  100% {opacity: 1}
}


#psubOrder{
	position: fixed;
	display: none;
	bottom: 100px;
	left: 50%;
	transform: translate(-10%,0%);
	font-size: 40pt;
	font-family: Futura;
	color: white;
	z-index: 500;
	text-align: center;
	width: 40%;
	border: 0px solid red;
	justify-content: space-between;

}


#pPres, #zPres, #vPres {
		position: fixed;
		cursor: default;
		display: none;
  	top: 0;
  	left: 0;
  	width: 80%;
		left:50%;
		top: 15%;
		transform: translate(-50%,0%);
		z-index:100;
		width: 80%;
		opacity: 1;
		transition: 0.5s;
		border: 0px solid red;
}


.pkText {
	font-size: 18pt;
	color: white;
	font-family: Director-Bold;
	text-align: center;
	text-shadow: black 0.1em 0.1em 0.2em;
	line-height: 24pt;
}


.mButton  {
	cursor: pointer;
	font-size: 25pt;
	width: 100px;
	height: auto;
	color: black;
	filter: invert(100%);
	transform: translate(30%,18%);
}


.mButton:hover  {
	opacity: 0.5;
}


.oButton  {
	cursor: grab;
	width: 80px;
	height: auto;
	transition: 0.25s;
	mix-blend-mode: screen;
	border: 0.5px solid white;
	border-radius: 20px;

}

/*
.oButton:hover  {
	filter: invert(100%);
}
*/

#menu {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 800;
	background: black;
	opacity: 0.9;
}

#menu-content {
	position: fixed;
	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
	font-family: 'Director-Bold';
	font-size: 1.5em;
	vertical-align: center;
	border: 0px solid yellow;
	justify-content: center;
	line-height: 40pt;
	z-index: 800;
	width: auto;
	height: 100%;
}


#menu-content > img{
	width: auto;
	height: 100%;

}



#info {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 500;
	background: black;
	opacity: 0.85;
}

#button {
	position: fixed;
	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
	font-family: 'Director-Bold';
	font-size: 1.5em;
	vertical-align: center;
	border: 0px solid yellow;
	justify-content: center;
	line-height: 40pt;
	z-index: 200;
}

#button > div {
	margin: 30px;
	padding: 5px;
	padding-left: 15px;
	padding-right: 15px;
	border-radius: 10px;
	border: 1px solid white;
	color: white;
	background: black;
}

#button > div:hover{
	color: black;
	background: white;;
	border: 1px solid black;
}


.loc {
	cursor: pointer;
	font-size: 18pt;
	color: white;
	background:blue;
}




/* MOBILE VERSION */
@media only screen and (max-width: 800px) {
	#logo {width:90%;}

	#logoTop {width:70%; height: auto}

	#logoMiddle{width:85%; height: auto}

	#logoBottom {width:40%; height: auto}

	#header {height: 60px; background-size: 100% 60px;}
	#header, #footer {font-size: 5pt;}

	#zButton, #pButton, #vButton {font-size: 20pt;}


/*
	.videoInsert {
  	position: absolute; 
  	top: 0;
  	left: 0;
  	min-width: 100%; 
  	min-height: 200%;
  	max-height:200%;
  	filter: grayscale(0%) contrast(100%) brightness(100%);
  	opacity: 1;
}
*/

.sSetTp {
	top:20%;
}

.sSetMd {
	top:50%;
}

.sSetBt {
	top:79%;
}

.sOn {
	top:67%;
	transition: 0.5s;
}

.sOff {

}

	.videoInsert {
  	position: absolute; 
  	top: 0;
  	left: 0;
    min-width: 100%; 
    min-height: 100%;
    max-height: 125%;
  	filter: grayscale(0%) contrast(100%) brightness(100%);
  	opacity: 1;
    background-size: cover;
    overflow: hidden;
    width: auto;
    height: auto;
    border: 0px solid red;
}



#button {
	top: 40%;
}


#pPres, #zPres, #vPres {
  	width: 95%;
		border: 0px solid red;
}


.pkText {
	transform: translate(0%, -10%);
	font-size:9pt;
	line-height: 11pt;
}


#zButton, #pButton, #vButton {
	transform: translate(0%, 30%);
	mix-blend-mode: screen;
	border: 0px solid white;
	height: 0px;

}


.oButton  {
	width: 50px;
	height: auto;
	transform: translate(0%, -5%);
	border: 0.5px solid white;
	border-radius: 10px;
}

.mButton  {
	font-size: 15pt;
	width: 50px;
	height: 50px;
	transform: translate(-10%, 15%);
	filter: invert(100%);
	border: 0px solid red;

}

#zInfo, #pInfo, #vInfo {
  font-size:8pt;
}


#pInfoAdd{
	font-size:6pt;
}

	#tone{
		display: none;
		height: 100%;
		width: 100%;
		top: 0px;
	  left: 50%;

	  transform: translate(-50%);
		background: url(content/trame.png) repeat;
	}

}