@charset "UTF-8";
/* INDEX */

@font-face {
	src:url("Ortica-Light.woff");
	font-family: ortica;
}

@font-face {
	src: url("helvetica.woff");
	font-family: helvetica;
}

@font-face {
	src: url("HelveticaLTStd-Light (1).woff");
	font-family: helveticalight;
}



/*FONDO COLOR */
body {
	background-color: #CCCCCC;
	background-size:cover;
	overflow-y: scroll;
	overflow-x: hidden;
	

	/*overflow-x: hidden;
	overflow-y: hidden;*/

}

.radial-gradient {
  position:fixed;
  top:0px;
  left:0px;
  height:100%;
  width:100%;
  
  /*Fallback if gradeints don't work */
  background: #cccccc;
  /*Linear gradient... */
  background: 
    linear-gradient(
     at left, #4ab2ff, #cccccc
    );
}

#grad1 {
  height: 100vw;
	width: 3vw;

  background-image: linear-gradient(to left, rgba(74,178,255,0), rgba(74,178,255,1));
}


#cristal {
	position: fixed;
	top: 1px;
	right: 1px;
	height: 200px;
	width: 100px;
	
}

#cristal-2 {
	position: absolute;
	height: 300px;
	width: 100px;
	
}

#tierra {
	
	height: 300px;
	width: 190px;
	left: 1px;
	bottom:9px;
	
}

#tierraanimada{
	position: fixed;
	height: 90px;
	width: 130px;
	left: 1px;
	bottom:19vw;
	transition-timing-function: ease-in-out;
	animation: adLove 15s linear infinite;
	
	z-index: 0;
	}
	
@keyframes adLove{
	from{
    bottom:150px;
	}

	33%{
    bottom:250px;
	}

	100%{
    bottom:150px;
	}  
	
	
}


#verde2 {
	position: fixed;
	height: 100px;
	width: 160px;
	left:290px;
	z-index: 2;
	
	
}



#verde1 {
	position: fixed;
	height: 500px;
	width: 100px;
	right: 300px;
	bottom:10px;
	
}


#cristalverde {
	position: absolute;
	height: 500px;
	width: 400px;
	right:2px;
	top: 190px;
	
	
	
}

#imagen {
	height: 320px;
	width: 30px;
	transform: rotate(-40deg);
}

#imganimate {
	animation: animate 8s linear infinite;
    perspective: 800px;
	
	z-index: 5;
	position: fixed;
	bottom:100px;
	width: 40px;
	height: 330px;
	right: 330px;
	
	mix-blend-mode:difference;
}


@keyframes animate {
    0%{
       transform: rotateY(0deg);
    }
    100%{
        transform: rotateY(360deg);
    }
}




#metal {
	position: absolute;
	height: 150px;
	width: 100px;
	left: 100px;
	top: 500px;
	
}

#mexico {
	position: absolute;
	height: 90px;
	width: 100px;
	top:250px;
	left: 200px;
	
}


#texturauno {
	position: absolute;
	height: 100px;
	width:1000px;
	top: 1600px;
	mix-blend-mode: exclusion;
	
}

#cristalverdedos {
	position: absolute;
	height: 400px;
	width: 900px;
	top:2400px;
	right: 1px;
	
}


#verdecopia {
	position: absolute;
	height: 900px;
	width: 200px;
	top: 1600px;
	right: 400px;
	mix-blend-mode:color-dodge;
}

#cristalfinal {
	position: absolute;
	height: 90px;
	width: 30px;
	top: 3000px;
	
	
}

/* CIERRE FONDOS COLOR */


#planisferios {
	font-family: ortica;
	font-size: 7vw;
	color: white;
	position: fixed;
	left: 25vw;
	top: 1vw;
	z-index: 3;
	text-align: center;
	text-shadow: 2px 2px 30px #724729;
	-webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: #CCCCCC;
	


	
	
}

/*a#planisferios:hover {
	text-shadow: 2px 2px 10px #724729;
	
}*/

#sonoros {
	font-family: ortica;
	font-size: 7vw;
	color: white;
	bottom: 1vw;
	left: 33vw;
	position: fixed;
	z-index: 3;
	text-shadow: 2px 2px 30px #724729;
	-webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: #CCCCCC;
	
	
}


.wrapper {
	
	z-index: 1;
	
}

/*ARTISTAS */

#numero {
	position: fixed;
	right:16vw;
	top: 3vw;
	font-family: 'Work Sans', sans-serif;
	font-size: 3vw;
	color: white;
	text-decoration: none;
	
	z-index: 1;

	border:0.1vw;
	border-radius: 25px;
	border-style:solid;
	border-color:white;
	padding: 2px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 4px;
}


#opencall {
	position: fixed;
	bottom: 2vw;
	right: 5vw;
	
	
	font-family: 'Work Sans', sans-serif;
	font-size: 3vw;
	color: white;
	
	z-index: 1;

	border:0.1vw;
	border-radius: 25px;
	border-style:solid;
	border-color:white;
	padding: 2px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 4px;
	text-decoration: none;
}

#info {
	position: fixed;
	top: 3vw;
	right: 5vw;
	
	font-family: 'Work Sans', sans-serif;
	font-size: 3vw;
	color: white;
	
	z-index: 1;

	border:0.1vw;
	border-radius: 25px;
	border-style:solid;
	border-color:white;
	padding: 2px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 4px;
	text-decoration: none;
	
}

#archive {
	position: fixed;
	top: 3vw;
	left: 4vw;
	font-family: 'Work Sans', sans-serif;
	font-size: 3vw;
	color: white;
	
	z-index: 4;

	border:0.1vw;
	border-radius: 25px;
	border-style:solid;
	border-color:white;
	padding: 2px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 4px;
	text-decoration: none;
	
	}

#artistas {
	position: absolute;
	left: 50px;
	top:900px;
	font-size: 1.5vw;
	font-family: 'Work Sans', sans-serif;
	color: white;
	text-align:justify;
	mix-blend-mode:soft-light;
	z-index: 1;
	
	/*text-shadow: 2px 2px 8px white;*/


	
}



#ninoarbol {
	position: fixed;
	top:140px;
	left:50px;
	font-family: 'Work Sans', sans-serif;
	color: #F94608;
	font-size: 15px;
	z-index: 1;
	/*text-shadow: 2px 2px 10px red;*/
	text-decoration: none;
	
}

a#ninoarbol:hover {
	text-shadow: 2px 2px 10px white;
	
}

.ninoarbolretrato {
	position: fixed;
	left: 48vw;
	width: 20vw;
	height: 20vw;
	top: 10vw;
	z-index: 4;
	display: none;
}


span:hover + .ninoarbolretrato{
	display: block;
}


#tropico {
	position: fixed;
	top:230px;
	right:130px;
	font-family: 'Work Sans', sans-serif;
	color: #F94608;
	font-size: 15px;
	z-index: 1;
	text-decoration: none;
	 /*text-shadow: 2px 2px 10px red;*/
	
}

a#tropico:hover {
	text-shadow: 2px 2px 10px white;
}

.tropicoretrato {
	position: fixed;
	right: 2vw;
	width: 20vw;
	height: 20vw;
	top: 26vw;
	z-index: 4;
	display: none;
	
}

span:hover + .tropicoretrato{
	display: block;
}



#junn {
	position: fixed;
	top:270px;
	right: 230px;
	font-family: 'Work Sans', sans-serif;
	color: #F94608;
	font-size: 15px;
	z-index: 1;
	text-decoration: none;
	/*text-shadow: 2px 2px 10px red;*/
	
}

a#junn:hover{
	text-shadow: 2px 2px 10px white;
}


.junnretrato {
	position: fixed;
	right: 33vw;
	width: 20vw;
	height: 20vw;
	top: 10vw;
	z-index: 4;
	display: none;
	
}

span:hover + .junnretrato{
	display: block;
}


#inteligencia {
	position: fixed;
	top:290px;
	right: 230px;
	font-family: 'Work Sans', sans-serif;
	color: #F94608;
	font-size: 15px;
	z-index: 1;
	text-decoration: none;
	/*text-shadow: 2px 2px 10px red;*/
}

a#inteligencia:hover{
	text-shadow: 2px 2px 10px white;
}


.intelretrato {
	position: fixed;
	left: 10vw;
	width: 20vw;
	height: 20vw;
	top: 15vw;
	z-index: 2;
	display: none;
	
}

span:hover + .intelretrato{
	display: block;
}




#qasio {
	position: fixed;
	top: 450px;
	left: 300px;
	font-family: 'Work Sans', sans-serif;
	color: #F94608;
	font-size: 15px;
	z-index: 1;
	text-decoration: none;
	/*text-shadow: 2px 2px 10px red;*/
}

.container {
	display: inline-block;
}

.qasioretrato{
	position: fixed;
	left:10vw;
	width: 20vw;
	height: 20vw;
	top: 13vw;
	z-index: 2;
	display: none;
	
}
a#qasio:hover{
	text-shadow: 2px 2px 10px white;
}



span:hover + .qasioretrato{
	display: block;
}

#mati {
	position: fixed;
	bottom: 130px;
	left:450px;
	font-family: 'Work Sans', sans-serif;
	color: #F94608;
	font-size: 15px;
	z-index: 1;
	text-decoration: none;
	/*text-shadow: 2px 2px 10px red;*/
	
}

.matiretrato {
	position: fixed;
	left: 42vw;
	width: 20vw;
	height: 20vw;
	top: 22vw;
	z-index: 2;
	display: none;
}

span:hover + .matiretrato{
	display: block;
}

a#mati:hover{
	text-shadow: 2px 2px 10px white;
}


@-ms-viewport{
  width: device-width;
}


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

body {
	overflow-y: scroll;
	overflow-x: hidden;
	max-width: 100%;
	
	}	
	
	
#planisferios {
	font-family: ortica;
	font-size: 14vw;
	color: white;
	position: fixed;
	left: 0vw;
	top: 8vw;
	z-index: 3;
	text-align: center;
	
	
}

#sonoros {
	font-family: ortica;
	font-size: 14vw;
	color: white;
	bottom: 3vw;
	left: 0vw;
	position: fixed;
	z-index: 1;
	text-align: center;
	
	
}
	
#artistas {
	position: absolute;
	left: 2vw;
	top:900px;
	font-size: 3vw;
	font-family: 'Work Sans', sans-serif;
	color: white;
	text-align:left;
	z-index: 1;
	mix-blend-mode:soft-light;
	}


		

#ninoarbol {
	position: fixed;
	top:140px;
	left:10px;
	font-size: 15px;
	/*text-shadow: 2px 2px 21px white;*/
	
}



#tropico {
	position: fixed;
	top:230px;
	right:30px;
	font-size: 15px;
	z-index: 1;
	text-decoration: none;
	/*text-shadow: 2px 2px 21px white;*/
	
}



#junn {
	position: fixed;
	top:270px;
	right: 29vw;
	font-size: 15px;
	text-decoration: none;
	/*text-shadow: 2px 2px 21px white;*/
	
}


#inteligencia {
	position: fixed;
	top:290px;
	right: 29vw;
	font-size: 15px;
	/*text-shadow: 2px 2px 21px white;*/
}

	
#qasio {
	position: fixed;
	top: 490px;
	left: 200px;
	font-size: 15px;
	z-index: 1;
	text-decoration: none;
	/*text-shadow: 2px 2px 21px white;*/
}


#mati {
	position: fixed;
	bottom: 130px;
	left:28vw;
	font-size: 15px;
	z-index: 1;
	text-decoration: none;
	
	/*text-shadow: 2px 2px 21px white;*/
	
}

#numero {
	position: fixed;
	right:18vw;
	top: 3vw;
	font-size: 3vw;
	text-decoration: none;
	z-index: 1;
	
}


#opencall {
	position: fixed;
	bottom: 6vw;
	right: 5vw;
	z-index: 1;
	
	font-family: 'Work Sans', sans-serif;
	font-size: 3vw;
	color: white;
	



}

#info {
	position: fixed;
	top: 3vw;
	right: 5vw;
	
	font-family: 'Work Sans', sans-serif;
	font-size: 3vw;
	color: white;
	
	z-index: 1;

	border:0.1vw;
	border-radius: 25px;
	border-style:solid;
	border-color:white;
	padding: 2px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 4px;
	text-decoration: none;
	overflow-y: hidden;
	
}

#archive {
	position: fixed;
	top: 3vw;
	left: 4vw;
	font-family: 'Work Sans', sans-serif;
	font-size: 3vw;
	color: white;
	
	z-index: 1;

	border:0.1vw;
	border-radius: 25px;
	border-style:solid;
	border-color:white;
	padding: 2px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 4px;
	
	}	
	
	
#cristal-2 {
	height: 200px;
	width: 50px;
	top: 18vw;
	
}
	
#cristal {
	position: fixed;
	top: 19vw;
	right: 0vw;
	height: 100px;
	width: 50px;
	
}

	
#cristalverde {
	height: 400px;
	width: 300px;
	right:0vw;
	top: 190px;
	
	
}

#cristalverdedos {
	position: absolute;
	height: 400px;
	width: 900px;
	top:2400px;
	right: 0vw;
	
}
	
#tierra {
	height: 90px;
	width: 130px;
	left: 1px;
	bottom:19vw;
	
}
	

#verde2 {
	position: fixed;
	height: 80px;
	width: 60px;
	left: 20vw;
	top: 4vw;
	
}

#verde1 {
	position: fixed;
	height: 90px;
	width: 80px;
	left: 25vw;
	bottom:6vw;
}

	
#texturauno {
	position: absolute;
	right: -50vw;
	height: 100px;
	width:1000px;
	top: 1600px;
	mix-blend-mode: exclusion;
	
}
	
#imganimate {
	transition-property: none !important;
    transform: none !important;
    animation: none !important;
	
	z-index: 0;
	position: fixed;
	bottom:70vw;
	width: 40px;
	height: 230px;
	right: 30px;
	
	mix-blend-mode:difference;
}

	
#tierraanimada{
	position: fixed;
	height: 90px;
	width: 130px;
	left: 1px;
	bottom:19vw;
	transition-property: none !important;
    transform: none !important;
    animation: none !important;
	
	
	}
	

	

	
	
}