/*  ZONA DE OTRO INTRO */
.swal-overlay { position: absolute; top: -75%; }
.swal-modal   { background-color: #4BD5EE; width: 250px; }
body { background-color: black; width: 100vw; height: 100vh; overflow: hidden; }
select, button, option { position: absolute; text-align: center; height: 30px; width: 150px; float: left; top: 20px; left: 50px;
	border: 1px solid #FFFF82; color: #FFF; text-shadow: .1px 0px #000; background-color: #000; }
#audioIcon {  background: url('../../assets/img/Speaker.png'); width: 20px; height: 20px; position: relative;
	left: 20px; top: 20px; transition: ease-in 1s; }
button:hover { background: #111; }
button { opacity: 0 }
select { display: none; opacity: 0 }
hr { height: 0px; border: 5px solid #FFFF82; }
.fadeIn { display: block; opacity: 1; transition: ease-in 1s }
.fadeOut{ opacity: 0; transition: ease-out 1s;}

/* CHRISTOPHER KADE'S STYLING STARTS HERE */
.star { position: absolute; width: 1px; height: 1px; background-color: white; }
p, a  { color: #FFFF82; text-decoration: none; }
li{  /* float: left; */  margin: 0 auto; float: left;  width: 10%; list-style: none; }
/* Set the animation & hide the logo */
.logo { position: absolute;top: 20%; left: 45%; z-index: 1; margin: auto; animation: logo 10s ease-out 5.2s; opacity: 0; }
.logo svg { width: inherit; }
/* Set the font, lean the board, position it */
#board {  font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;  transform: perspective(300px) rotateX(25deg);
	transform-origin: 50% 100%;  text-align: center; position: absolute; margin-left: -7.5em; font-weight: bold; 
	overflow: hidden;font-size: 350%; height: 50em; width: 18em; bottom: 0; left: 50%;}
#board:after { position: absolute; content: ' '; bottom: 60%; left: 0; right: 0; top: 0; }
/* Set the scrolling animation and position it */
#scrollingContent { animation: scroll 100s linear 13s; animation-iteration-count:infinite; position: absolute; top: 100%; }
 #title, #subtitle { text-align: center; } 
@keyframes scroll { 0% { top: 100%; } 100% { top: -170%; } }
/* Scale the logo down and maintain it centered */
@keyframes logo { 0% { width: 18em;  transform: scale(2.75);  opacity: 1;  } 50% { opacity: 1;width: 18em; } 
	100% { opacity: 0; transform: scale(0.1); width: 18em; } }
/* Center it, set the color, size and hide the text */
#intro {  position: absolute; width: 70%;  top: 20%;  left: 25%;  z-index: 1;  animation: intro 3s linear 1.4s;  color: rgb(75, 213, 238);font-weight: 300; font-size: 270%; font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;  opacity: 0;}
@keyframes intro { 0% { opacity: 0; } 20% { opacity: 1; } 90% {  opacity: 1; } 100% { opacity: 0;  }  }
p# start {position: absolute; width: 16em;font-size: 200%; font-weight: 400; margin: 50% auto;	color: #4ee; opacity: 0;z-index: 1;
	-webkit-animation: intro 2s ease-out;-moz-animation: intro 2s ease-out;-ms-animation: intro 2s ease-out;
	-o-animation: intro 2s ease-out;animation: intro 2s ease-out; }
@-webkit-keyframes intro {0% { opacity: 1;} 90% { opacity: 1; }100% { opacity: 0; }  }
@-moz-keyframes intro {	0% { opacity: 1; }	90% { opacity: 1; }100% { opacity: 0; }  }
@-ms-keyframes intro {	0% { opacity: 1; }	90% { opacity: 1; }100% { opacity: 0; }  }
@-o-keyframes intro {0% { opacity: 1; }	90% { opacity: 1; }	100% { opacity: 0; } }
@keyframes intro {0% { opacity: 1; }90% { opacity: 1; }	100% { opacity: 0; } }
h1 { position: absolute; width: 2.6em;left: 40%;top: 25%;font-size: 10em;text-align: center;margin-left: -1.3em;line-height: 0.8em;	letter-spacing: -0.05em;color: #000;text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;opacity: 0;	z-index: 1;-webkit-animation: logo 5s ease-out 2.5s;-moz-animation: logo 5s ease-out 2.5s;-ms-animation: logo 5s ease-out 2.5s;	-o-animation: logo 5s ease-out 2.5s;animation: logo 5s ease-out 2.5s; }
h1 sub {display: block;font-size: 0.3em;letter-spacing: 0;line-height: 0.8em; }
@-webkit-keyframes logo {
	0% { -webkit-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -webkit-transform: scale(0.1); opacity: 0; }}
@-moz-keyframes logo {
	0% { -moz-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -moz-transform: scale(0.1); opacity: 0; }}
@-ms-keyframes logo {
	0% { -ms-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -ms-transform: scale(0.1); opacity: 0; }}
@-o-keyframes logo {0% { -o-transform: scale(1); opacity: 1; }50% { opacity: 1; }100% { -o-transform: scale(0.1); 
	opacity: 0; } }
@keyframes logo {0% { transform: scale(1); opacity: 1; }50% { opacity: 1; }100% { transform: scale(0.1); opacity: 0; } }
/* the interesting 3D scrolling stuff */
#titles {position: absolute; width: 18em; height: 50em; bottom: 0; left: 50%; margin-left: -9em; font-size: 200%; 
	text-align: justify; overflow: hidden;-webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%;	transform-origin: 50% 100%;	
	-webkit-transform: perspective(300px) rotateX(25deg);-moz-transform: perspective(300px) rotateX(25deg);
	-ms-transform: perspective(300px) rotateX(25deg);-o-transform: perspective(300px) rotateX(25deg);
	transform: perspective(300px) rotateX(25deg); }
#titles:after {	position: absolute;	content: ' ';left: 0;right: 0;top: 0;bottom: 60%;
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -o-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);	pointer-events: none; }
#titles p {	text-align: justify; margin: 0.8em 0; }
#titles p.center {text-align: center; }
#titles a {	color: #ff6;text-decoration: underline; }
#titlecontent {	position: absolute;	top: 100%;	-webkit-animation: scroll 100s linear 4s infinite;
	-moz-animation: scroll 100s linear 4s infinite;	-ms-animation: scroll 100s linear 4s infinite;
	-o-animation: scroll 100s linear 4s infinite;animation: scroll 100s linear 4s infinite; }
/* animation */
@-webkit-keyframes scroll {	0% { top: 100%; }100% { top: -170%; } }
@-moz-keyframes scroll {0% { top: 100%; }100% { top: -170%; } }
@-ms-keyframes scroll  {0% { top: 100%; }100% { top: -170%; } }
@-o-keyframes scroll   {0% { top: 100%; }100% { top: -170%; } }
@keyframes scroll {	0% { top: 100%; }100% { top: -170%; } }