html, body{
	font-family: 'Open Sans', sans-serif;
	color: #000;
}
body{
	background-color: #f2f3f7;
  overflow-x: hidden;
	overflow-y: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Anton', sans-serif;
	margin: 0;
	text-transform: uppercase;
}
h6{
	font-size: 10px;
}

p{
	margin: 0;
	line-height: 1.7;
	font-size: 1rem;
}
/*
p span{
	font-style: italic;
}*/

/*@media (min-width: 1200px){
	.container {
	    width: 1100px;
	}
}*/

.op-0{
  opacity: 0;
  transition: all 0.5s;
}
.op-1{
  opacity: 1;
  transition: all 0.5s;
}

/********************* MENÚ - BOTONERA ******************/
.menu{
  background-color: transparent;
  height: 50px;
}
.menu .container-fluid{
	padding: 0;
}
.redes .nav{
  width: 90%;
}
.redes .nav-item{
	display: flex;
	align-items: center;
}
.redes .nav-item:first-child a{
	border-left: 1px solid #000;
	padding-left: 
	30px;
}
.redes .nav-item a{
	color: #000;
	font-size: 22px;
	padding: 0 8px;
	transition: all 0.3s;
	opacity: 1
}
.redes .nav-item a:hover{
	color: red;
	font-style: none;
}
.redes .nav-link img{
	width: 130px;
}
.redes #regreso {
  list-style: none;
  padding: 0;
  margin: 0;
}
.redes #regreso a{
	padding: 17px 5px;
  background-color: red;
  display: flex;
  align-items: center;
  height: 30px;
}

.redes #regreso i{
	color: #000;
}
.redes #regreso a:hover{
	text-decoration: none;
}

/********************* / MENÚ - BOTONERA ******************/

*,
*:active,
*:active:focus,
*:focus,
*:visited,
*:hover,
.btn:focus,
.btn:active:focus,
.btn:focus,
a:focus,
.form-control:focus
{
    outline: 0 !important;
    outline-offset: 0;
    -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, .075), 0 0 0 rgba(102, 175, 233, .6);
            box-shadow: inset 0 0 0 rgba(0, 0, 0, .075), 0 0 0 rgba(102, 175, 233, .6);
}

#scene2 {
  display: none;
}
.info-youtubers{
  display: none;
}

.scene {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  overflow: hidden;
  right: 0;
  height: 100vh;
}

.scene > div {
  position: absolute;
  bottom: 0;
}

.ground {
  width: 100%;
  height: 100vh;
  background: url(../img/bg.png) no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
  z-index: 0;
}

.scene > div.joyas {
  left: 52%;
  top: 11%;
  z-index: 2;
  margin-left: -447px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  width: 378px;
  background: url(../img/joyas.png) no-repeat center;
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.scene > div.mueven {
  left: 53.5%;
  top: 19.8%;
  z-index: 2;
  margin-left: -447px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 43px;
  width: 257px;
  background: url(../img/mueven.png) no-repeat center;
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.scene > div.cuadro {
  left: 70%;
  top: 20%;
  z-index: 4;
  margin-left: -447px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 102px;
  width: 111px;
  background: url(../img/cuadro.png) no-repeat center;
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.scene > div.youtube {
  left: 77.5%;
  top: 20%;
  z-index: 3;
  margin-left: -447px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
  width: 477px;
  background: url(../img/youtube.png) no-repeat center;
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.scene > div.x {
  left: 1%;
  z-index: 50;
  top: -80%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.x a{
  cursor: default;
  z-index: 50;
  height: 65px;
  width: 71px;
  background: url(../img/x.png) no-repeat center;
  -webkit-background-size: contain;
  background-size: contain;
  transition: all 0.5s;
}
.x a:hover{
  height: 80px;
  width: 86px;
}

.intro{
  left: 46.5%;
  top: 92%;
  z-index: 101;
}
.intro a,
.intro2 a{
  color: #000;
  font-size: 1.3rem;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  border: 4px solid #000;
  padding: 0.3em 0.5em;
}
.regreso a{
  color: #000;
  font-size: 1.3rem;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  border: 4px solid #000;
  padding: 0.3em 0.5em;
}
#intro{
  position: absolute;
  bottom: -102%;
  height: 100vh;
  padding: 3em 1em 1em;
  background: url(../img/bg.png) no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
  overflow-y: scroll;
  z-index: 1;
}
#intro h1 span{
  color: #ec1d23;
  font-size: 3rem;
}
#intro h3{
  padding-bottom: 0em;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
}
#intro p{
  padding-bottom: 0.5em;
  font-size: 1.3rem;
  font-weight: 300;
}

.luz1{
  left: 6%;
  top: 15%;
  height: 136px;
  width: 200px;
  z-index: 1;
  opacity: 0.5;
  background: url(../img/luz1.png) no-repeat center;
  -webkit-background-size: contain;
  background-size: contain;
  transition: all 0.5s;
}
.luz2{
  left: 75%;
  top: 10%;
  height: 136px;
  width: 200px;
  z-index: 1;
  opacity: 0.5;
  background: url(../img/luz1.png) no-repeat center;
  -webkit-background-size: contain;
  background-size: contain;
  transition: all 0.8s;
}


/*poli*/

.scene > div.poli {
  left: 25%;
  z-index: 5;
  margin-left: -447px;
  bottom: 24%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.poli a{
  height: 530px;
  width: 552px;
  background: url(../img/poli.png) no-repeat center;
  -webkit-background-size: contain;
  background-size: contain;
  transition: all 0.5s;
}
.poli a:hover{
  height: 550px;
  width: 572px;
}
.poli-sliders{
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100vh;
}

.poli2{
  position: absolute;
  z-index: 8;
  left: 52%;
  top: 11%;
  margin-left: -482px;
  width: 468px;
  height: 894px;
  background: url(../img/poli2.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.poli3{
  position: absolute;
  z-index: 7;
  left: 30%;
  top: -31%;
  margin-left: -482px;
  width: 570px;
  height: 650px;
  background: url(../img/poli3.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.poli-s3 h2,
.poli-s3 p{
  float: left;
}
.poli4{
  position: absolute;
  z-index: 8;
  left: 155%;
  top: -88%;
  margin-left: -482px;
  width: 570px;
  height: 650px;
  background: url(../img/poli4.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}

.poli5{
  position: absolute;
  z-index: 8;
  left: 86%;
  top: 100%;
  margin-left: -482px;
  width: 800px;
  height: 844px;
  background: url(../img/poli.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
#poli-s1 .cuadro-txt {
  left: 78%;
}
#poli-s1 .cuadro-txt h2{
  font-size: 2.5rem;
}
#poli-s2 .cuadro-txt-2{
  width: 315px;
}
#poli-s5 .respuesta-2{
  top: -58%;
}
#poli-s5 .cr-5{
  top: -54%;
}
#poli-s7 .respuesta-4{
  top: 60%;
}
#poli-s7 .cr-8{
  top: 70%;
}
#poli-s8 .respuesta-5{
  top: 122%;
}
#poli-s7 .cr-9{
  top: 132%;
}
#poli-s9 .respuesta-6{
  top: 3%;
}
#poli-s9 .cr-12{
  top: 19%;
}
/*juan*/

.scene div.juan {
  z-index: 9;
  left: 44%;
  bottom: 9%;
  margin-left: -454px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.juan a{
  width: 440px;
  height: 414px;
  background: url(../img/juan.png) no-repeat center;
  -webkit-background-size: contain;
  background-size: contain;
  transition: all 0.5s;
}
.juan a:hover{
  width: 460px;
  height: 434px;
}
.juan-sliders{
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100vh;
}

.juan2{
  position: absolute;
  z-index: 8;
  left: 56%;
  top: 20%;
  margin-left: -482px;
  width: 318px;
  height: 744px;
  background: url(../img/juan2.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.juan3{
  position: absolute;
  z-index: 7;
  left: 18%;
  top: -24%;
  margin-left: -482px;
  width: 570px;
  height: 650px;
  background: url(../img/juan3.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.juan-s3 h2,
.juan-s3 p{
  float: left;
}
.juan4{
  position: absolute;
  z-index: 8;
  left: 148%;
  top: -88%;
  margin-left: -482px;
  width: 570px;
  height: 650px;
  background: url(../img/juan4.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
#juan-s4 .respuesta{
  top: 76%;
}

#juan-s5 .respuesta-2{
  top: -60%;
}
#juan-s5 .cr-5{
  top: -40%;
}
#juan-s6 .respuesta-3{
  top: -76%;
}
#juan-s7 .respuesta-4{
  top: 60%;
}
#juan-s7 .cr-8{
  top: 72%;
}



/*yuya*/

.scene div.yuya {
  z-index: 10;
  left: 65%;
  bottom: 8%;
  margin-left: -482px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.yuya a{
  width: 405px;
  height: 583px;
  background: url(../img/yuya.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  transition: all 0.5s;
}
.yuya a:hover{
  width: 450px;
  height: 628px;
}

.yuya-sliders{
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100vh;
}

.yuya2{
  position: absolute;
  z-index: 8;
  left: 60%;
  top: 20%;
  margin-left: -482px;
  width: 318px;
  height: 744px;
  background: url(../img/yuya2.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.yuya3{
  position: absolute;
  z-index: 7;
  left: 18%;
  top: -24%;
  margin-left: -482px;
  width: 570px;
  height: 650px;
  background: url(../img/yuya3.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.yuya-s3 h2,
.yuya-s3 p{
  float: left;
}
.yuya4{
  position: absolute;
  z-index: 8;
  left: 156%;
  top: -88%;
  margin-left: -482px;
  width: 570px;
  height: 650px;
  background: url(../img/yuya4.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.yuya5{
  position: absolute;
  z-index: 8;
  left: 90%;
  top: 100%;
  margin-left: -482px;
  width: 312px;
  height: 650px;
  background: url(../img/yuya5.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}



/*kim*/

.scene div.kim {
  z-index: 7;
  left: 85%;
  bottom: 19%;
  margin-left: -482px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.kim a{
  width: 277px;
  height: 530px;
  background: url(../img/kim.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  transition: all 0.5s;
}
.kim a:hover{
  width: 297px;
  height: 550px;
}

.kim-sliders{
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100vh;
}

.kim2{
  position: absolute;
  z-index: 8;
  left: 60%;
  top: 20%;
  margin-left: -482px;
  width: 318px;
  height: 744px;
  background: url(../img/kim2.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.kim3{
  position: absolute;
  z-index: 7;
  left: 18%;
  top: -24%;
  margin-left: -482px;
  width: 570px;
  height: 650px;
  background: url(../img/kim3.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.kim-s3 h2,
.kim-s3 p{
  float: left;
}
.kim4{
  position: absolute;
  z-index: 8;
  left: 146%;
  top: -88%;
  margin-left: -482px;
  width: 570px;
  height: 650px;
  background: url(../img/kim4.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.kim5{
  position: absolute;
  z-index: 8;
  left: 90%;
  top: 100%;
  margin-left: -482px;
  width: 412px;
  height: 750px;
  background: url(../img/kim.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}

#kim-s4 .respuesta{
  top: 75%;
}
#kim-s5 .respuesta-2{
  top: -60%;
}
#kim-s6 .respuesta-3{
  top: -74%;
}
#kim-s7 .respuesta-4{
  top: 60%;
}
#kim-s7 .cr-8{
  top: 69%;
}
/*luis*/

.scene div.luis {
  z-index: 8;
  left: 95%;
  bottom: 9%;
  margin-left: -482px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.luis a{
  width: 390px;
  height: 406px;
  background: url(../img/luis.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  transition: all 0.5s;
}
.luis a:hover{
  width: 410px;
  height: 426px;
}

.luis-sliders{
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100vh;
}

.luis2{
  position: absolute;
  z-index: 8;
  left: 59%;
  top: 20%;
  margin-left: -482px;
  width: 318px;
  height: 744px;
  background: url(../img/luis2.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.luis3{
  position: absolute;
  z-index: 7;
  left: 31%;
  top: -24%;
  margin-left: -482px;
  width: 243px;
  height: 650px;
  background: url(../img/luis3.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.luis-s3 h2,
.luis-s3 p{
  float: left;
}
.luis4{
  position: absolute;
  z-index: 8;
  left: 154%;
  top: -90%;
  margin-left: -482px;
  width: 520px;
  height: 600px;
  background: url(../img/luis4.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
#luis-s6 .cr-6 {
  left: 176%;
  top: -52%;
}

.luis5{
  position: absolute;
  z-index: 8;
  left: 95%;
  top: 110%;
  margin-left: -482px;
  width: 512px;
  height: 543px;
  background: url(../img/luis.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}

#luis-s7 .respuesta-4 {
    top: 66%;
}
#luis-s7 .cr-8 {
    left: 40%;
}
#luis-s8 .respuesta-5 {
    position: absolute;
    z-index: 7;
    left: 59%;
    top: 127%;
    margin-left: -482px;
    width: 574px;
    height: auto;
    cursor: default !important;
}
#luis-s9 .respuesta-6 {
    top: -5%;
}

/*werever*/

.scene div.werever {
  z-index: 6;
  left: 110%;
  bottom: 19%;
  margin-left: -482px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.werever a{
  width: 330px;
  height: 560px;
  background: url(../img/werever.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  transition: all 0.5s;
}
.werever a:hover{
  width: 350px;
  height: 580px;
}

.werever-sliders{
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100vh;
}

.werever2{
  position: absolute;
  z-index: 8;
  left: 57%;
  top: 20%;
  margin-left: -482px;
  width: 318px;
  height: 744px;
  background: url(../img/werever2.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.werever3{
  position: absolute;
  z-index: 7;
  left: 31%;
  top: -24%;
  margin-left: -482px;
  width: 345px;
  height: 650px;
  background: url(../img/werever3.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.werever-s3 h2,
.werever-s3 p{
  float: left;
}
.werever4{
  position: absolute;
  z-index: 8;
  left: 159%;
  top: -90%;
  margin-left: -482px;
  width: 520px;
  height: 600px;
  background: url(../img/werever4.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.werever5{
  position: absolute;
  z-index: 8;
  left: 90%;
  top: 110%;
  margin-left: -482px;
  width: 400px;
  height: 634px;
  background: url(../img/werever.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}

#werever-s4 .respuesta{
  top: 71%;
}
#werever-s4 .cr-3{
  top: 71%;
}

#werever-s5 .respuesta-2{
  top: -58%;
}
#werever-s5 .cr-5{
  top: -57%;
}


#werever-s10 .respuesta-7{
  top: 146%;
}

/*estilos generales*/

.cuadro-txt{
  position: absolute;
  padding: 2em;
  z-index: 9;
  left: 73%;
  top: 25%;
  margin-left: -482px;
  width: 401px;
  height: 558px;
  background: url(../img/txt.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.cuadro-txt h2{
  text-align: center;
  font-size: 4rem;
}
.cuadro-txt h4{
  font-size: 1.2rem;
}
.cuadro-txt h3{
  color: #ed1d25;
  font-size: 5rem;
  line-height: 50px;
  padding-top: 0.3em;
}
.cuadro-txt h3 span{
  font-size: 3rem;
}

.cuadro-txt-2{
  position: absolute;
  padding: 1em;
  z-index: 11;
  left: 110%;
  top: -17%;
  margin-left: -482px;
  width: 250px;
  height: auto;
  border: 8px solid #000;
  cursor: default !important;
}
.cuadro-txt-2 h2{
  text-align: center;
  font-size: 4rem;
  color: #ed1d25;
}
.cuadro-txt-2 h4{
  font-size: 1.2rem;
}
.cuadro-txt-3{
  position: absolute;
  padding: 1em;
  z-index: 11;
  left: -6%;
  top: -16%;
  margin-left: -482px;
  width: 600px;
  height: auto;
  cursor: default !important;
}
.cuadro-txt-3 h2{
  font-size: 6rem;
  padding-right: 0.1em;
  float: left;
  line-height: 65px;
}
.cuadro-pregunta{
  position: absolute;
  padding: 1em;
  z-index: 11;
  left: 117%;
  top: 60%;
  margin-left: -482px;
  width: 600px;
  height: auto;
  border: 8px solid #000;
  cursor: default !important;
}
.cuadro-pregunta h2{
  text-align: center;
  font-size: 2.3rem;
}
.cuadro-pregunta-2{
  position: absolute;
  padding: 1em;
  z-index: 11;
  left: 61%;
  top: -73%;
  margin-left: -482px;
  width: 600px;
  height: auto;
  border: 8px solid #000;
  cursor: default !important;
}
.cuadro-pregunta-2 h2{
  text-align: center;
  font-size: 2.3rem;
}
.cuadro-pregunta-3{
  position: absolute;
  padding: 1em;
  z-index: 7;
  left: 129%;
  top: -88%;
  margin-left: -482px;
  width: 600px;
  height: auto;
  border: 8px solid #000;
  cursor: default !important;
}
.cuadro-pregunta-3 h2{
  text-align: center;
  font-size: 2.3rem;
}
.cuadro-pregunta-4{
  position: absolute;
  padding: 1em;
  z-index: 7;
  left: 7%;
  top: 48%;
  margin-left: -482px;
  width: 600px;
  height: auto;
  border: 8px solid #000;
  cursor: default !important;
}
.cuadro-pregunta-4 h2{
  text-align: center;
  font-size: 2.3rem;
}
.cuadro-pregunta-5{
  position: absolute;
  padding: 1em;
  z-index: 7;
  left: 58%;
  top: 110%;
  margin-left: -482px;
  width: 600px;
  height: auto;
  border: 8px solid #000;
  cursor: default !important;
}
.cuadro-pregunta-5 h2{
  text-align: center;
  font-size: 2.3rem;
}
.cuadro-pregunta-6{
  position: absolute;
  padding: 1em;
  z-index: 7;
  left: 190%;
  top: -15%;
  margin-left: -482px;
  width: 600px;
  height: auto;
  border: 8px solid #000;
  cursor: default !important;
}
.cuadro-pregunta-6 h2{
  text-align: center;
  font-size: 2.3rem;
}
.cuadro-pregunta-7{
  position: absolute;
  padding: 1em;
  z-index: 7;
  left: 0%;
  top: 131%;
  margin-left: -482px;
  width: 600px;
  height: auto;
  border: 8px solid #000;
  cursor: default !important;
}
.cuadro-pregunta-7 h2{
  text-align: center;
  font-size: 2.3rem;
}
.cuadro-pregunta-8{
  position: absolute;
  padding: 1em;
  z-index: 7;
  left: 122%;
  top: 131%;
  margin-left: -482px;
  width: 600px;
  height: auto;
  border: 8px solid #000;
  cursor: default !important;
}
.cuadro-pregunta-8 h2{
  text-align: center;
  font-size: 2.3rem;
}
.respuesta{
  position: absolute;
  z-index: 7;
  left: 128%;
  top: 80%;
  margin-left: -482px;
  width: 420px;
  height: auto;
  cursor: default !important;
}
.respuesta-2{
  position: absolute;
  z-index: 7;
  left: 66%;
  top: -55%;
  margin-left: -482px;
  width: 420px;
  height: auto;
  cursor: default !important;
}
.respuesta-3{
  position: absolute;
  z-index: 7;
  left: 131%;
  top: -70%;
  margin-left: -482px;
  width: 420px;
  height: auto;
  cursor: default !important;
}
.respuesta-4{
  position: absolute;
  z-index: 7;
  left: 12%;
  top: 70%;
  margin-left: -482px;
  width: 420px;
  height: auto;
  cursor: default !important;
}
.respuesta-5{
  position: absolute;
  z-index: 7;
  left: 60%;
  top: 127%;
  margin-left: -482px;
  width: 420px;
  height: auto;
  cursor: default !important;
}
.respuesta-6{
  position: absolute;
  z-index: 7;
  left: 196%;
  top: 0%;
  margin-left: -482px;
  width: 420px;
  height: auto;
  cursor: default !important;
}
.respuesta-7{
  position: absolute;
  z-index: 7;
  left: 11%;
  top: 143%;
  margin-left: -482px;
  width: 420px;
  height: auto;
  cursor: default !important;
}
.respuesta-8{
  position: absolute;
  z-index: 7;
  left: 127%;
  top: 147%;
  margin-left: -482px;
  width: 420px;
  height: auto;
  cursor: default !important;
}
.video{
  position: absolute;
  left: 121%;
  top: -5%;
  height: auto;
  margin-left: -482px;
  z-index: 10;
}

video{
  width: 700px;
  height: auto;
}
.cuadros-rojos{
  position: absolute;
  z-index: 11;
  left: 167.5%;
  top: 94%;
  margin-left: -482px;
  width: 149px;
  height: 89px;
  background: url(../img/c-rojos.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}

.botones{
  position: absolute;
  bottom: 0%;
  top: 86%;
  width: 100%;
  z-index: 100;
  text-align: center;
}
.botones a{
  color: #000;
  background-color: #fff;
  padding: 0px 7px;
  margin-right: 5px;  
}
.botones a:nth-child(10){
  padding: 0px 4px; 
}
.botones a:nth-child(11){
  padding: 0px 4px; 
}
.botones a:last-child{
  margin: 0;
}
.botones a.active {
  color: #fff;
  background-color: #ed1e26;
}
.zi-1{
  z-index: -1;
}
.cr-1{
  position: absolute;
  z-index: 6;
  left: 28%;
  top: -27%;
  margin-left: -482px;
  width: 156px;
  height: 130px;
  background: url(../img/cr-1.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.cr-2{
  position: absolute;
  z-index: 6;
  left: 15%;
  top: 22%;
  margin-left: -482px;
  width: 156px;
  height: 130px;
  background: url(../img/cr-2.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.cr-3{
  position: absolute;
  z-index: 6;
  left: 116%;
  top: 91%;
  margin-left: -482px;
  width: 156px;
  height: 130px;
  background: url(../img/cr-2.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.cr-4{
  position: absolute;
  z-index: 6;
  left: 55%;
  top: -65%;
  margin-left: -482px;
  width: 156px;
  height: 130px;
  background: url(../img/cr-2.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.cr-5{
  position: absolute;
  z-index: 6;
  left: 96%;
  top: -30%;
  margin-left: -482px;
  width: 126px;
  height: 100px;
  background: url(../img/cr-2.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.cr-6{
  position: absolute;
  z-index: 6;
  left: 173%;
  top: -69%;
  margin-left: -482px;
  width: 126px;
  height: 100px;
  background: url(../img/cr-2.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.cr-7{
  position: absolute;
  z-index: 6;
  left: 3%;
  top: 59%;
  margin-left: -482px;
  width: 126px;
  height: 100px;
  background: url(../img/cr-2.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.cr-8{
  position: absolute;
  z-index: 6;
  left: 37%;
  top: 81%;
  margin-left: -482px;
  width: 126px;
  height: 100px;
  background: url(../img/cr-1.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.cr-9{
  position: absolute;
  z-index: 6;
  left: 68%;
  top: 140%;
  margin-left: -482px;
  width: 126px;
  height: 100px;
  background: url(../img/cr-1.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}

.cr-10{
  position: absolute;
  z-index: 6;
  left: 190%;
  top: 0%;
  margin-left: -482px;
  width: 96px;
  height: 70px;
  background: url(../img/cr-2.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}

.cr-11{
  position: absolute;
  z-index: 6;
  left: 223%;
  top: -19%;
  margin-left: -482px;
  width: 126px;
  height: 100px;
  background: url(../img/cr-2.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}

.cr-12{
  position: absolute;
  z-index: 6;
  left: 213%;
  top: 11%;
  margin-left: -482px;
  width: 116px;
  height: 90px;
  background: url(../img/cr-2.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}

.cr-13{
  position: absolute;
  z-index: 6;
  left: 1%;
  top: 145%;
  margin-left: -482px;
  width: 126px;
  height: 100px;
  background: url(../img/cr-1.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.cr-14{
  position: absolute;
  z-index: 6;
  left: 29%;
  top: 156%;
  margin-left: -482px;
  width: 96px;
  height: 70px;
  background: url(../img/cr-2.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.cr-15{
  position: absolute;
  z-index: 6;
  left: 118%;
  top: 145%;
  margin-left: -482px;
  width: 126px;
  height: 100px;
  background: url(../img/cr-2.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}
.cr-16{
  position: absolute;
  z-index: 6;
  left: 153%;
  top: 163%;
  margin-left: -482px;
  width: 96px;
  height: 70px;
  background: url(../img/cr-2.png) no-repeat center; 
  -webkit-background-size: contain;
  background-size: contain;
  cursor: default !important;
}


.coo-1{
  transition: all 0.5s;
  left: 0%;
  top: 0%;
}
.coo-2{
  transition: all 0.5s;
  left: -58%;
  top: 40%;

}
.coo-3{
  transition: all 0.5s;
  left: 51%;
  top: 35%;

}
.coo-4 {
  transition: all 0.5s;
  top: -48%;
  left: -46%;
}
.coo-5 {
  transition: all 0.5s;
  top: 87%;
  left: 0%;
}
.coo-6 {
  transition: all 0.5s;
  top: 92%;
  left: -67%;
}
.coo-7 {
  transition: all 0.5s;
  top: -35%;
  left: 56%;
}
.coo-8 {
  transition: all 0.5s;
  top: -70%;
  left: 0%;
}
.coo-9 {
  transition: all 0.5s;
  top: 47%;
  left: -125%;
}
.coo-10 {
  transition: all 0.5s;
  top: -85%;
  left: 61%;
}
.coo-11 {
  transition: all 0.5s;
  top: -99%;
  left: -57%;
}

#intro .nota p{
  font-size: 0.9rem;
  text-align: left;
  padding-top: 0.7em;
  padding-bottom: 2em;
}
#intro .nota p span{
  font-style: normal;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
}
#intro h2{
  padding-top: 1em;
  padding-bottom: 1em;
}
#intro .cita {
  padding-top: 2em;
  padding-bottom: 2em;
}
#intro .cita p:nth-child(1) {
  font-style: italic;
  text-align:center;
}
#intro .cita p:nth-child(2) {
  font-weight: 700;
  font-size: 1em;
  text-align: center;
}

@media screen and (max-width: 2000px) {
  .intro {
    left: 46.5%;
    top: 94%;
    z-index: 101;
  }
  .scene > div.joyas {
    left: 50%;
    top: 8%;
  }
  .scene > div.mueven {
    left: 54.5%;
    top: 17.8%;
  }
  .scene > div.cuadro {
    left: 73%;
    top: 19%;
  }
  .scene > div.youtube {
    left: 80.3%;
    top: 17%;
  }
  .poli-sliders {
    top: -14%;
  }
  .scene > div.poli {
    left: 33%;
  }
  .juan-sliders {
    top: 0%;
  }
  .scene div.juan {
    left: 48%;
  }
  .yuya-sliders {
    top: -14%;
  }
  .scene div.yuya {
    left: 68%;
  }
  .werever-sliders {
    top: -14%;
  }
  .scene div.werever {
    left: 112%;
  }
  .luis-sliders,
  .luis-sliders.coo-1 {
    top: 0%;
  }
  .scene div.luis {
    left: 96%;
  }
  .kim-sliders {
    top: -14%;
  }
  .scene div.kim {
    left: 88%;
  }
  .poli a {
    height: 430px;
    width: 452px;
  }
  .poli a:hover {
    height: 450px;
    width: 472px;
  }
  .juan a {
    width: 340px;
    height: 314px;
  }
  .juan a:hover {
    width: 360px;
    height: 334px;
  }
  .yuya a {
    width: 305px;
    height: 483px;
  }
  .yuya a:hover {
    width: 325px;
    height: 503px;
  }
  .yuya3 {
    left: 23%;
    top: -29%;
    width: 470px;
    height: 551px;
  }
  .yuya4 {
    left: 161%;
    top: -98%;
  }
  .yuya5 {
    left: 96%;
    top: 119%;
  }
  .kim a {
    width: 177px;
    height: 430px;
  }
  .kim a:hover {
    width: 197px;
    height: 450px;
  }

  .kim5 {
    top: 111%;
  }
  .luis a {
    width: 290px;
    height: 306px;
  }
  .luis a:hover {
    width: 310px;
    height: 326px;
  }
  .werever a {
    width: 230px;
    height: 460px;
  }
  .werever a:hover {
    width: 250px;
    height: 480px;
  }

  .botones {
    top: 88%;
  }

  .poli-sliders,
  .poli-sliders.coo-1 {
    top: -8%;
  }
  .poli2 {
    width: 424px;
    height: 843px;
  }
  .poli3 {
    left: 35%;
    top: -31%;
    width: 470px;
    height: 521px;
  }
  #poli-s4 .cuadro-pregunta{
    top: 56%;
  }
  #poli-s5 .cuadro-pregunta-2 {
    top: -76%;
  }
  .poli4 {
    left: 159%;
    top: -103%;
  }
  #poli-s7 .respuesta-4 {
    top: 67%;
  }
  #poli-s7 .cr-8 {
    top: 77%;
  }
  #poli-s8 .respuesta-5 {
    top: 141%;
  }
  .poli5 {
    left: 86%;
    top: 115%;
    width: 685px;
    height: 720px;
  }
  #poli-s9 .cuadro-pregunta-6 {
    top: -22%;
  }
  #poli-s9 .cr-12 {
    top: 23%;
  }
  #poli-s9 .cr-11 {
    left: 242%;
  }
  #poli-s10 .cuadro-pregunta-7 {
    top: 124%;
  }
  .poli-sliders.coo-10 {
    transition: all 0.5s;
    top: -111%;
    left: 61%;
  }

  .juan2 {
    top: 7%;
  }
  #juan-s7 .respuesta-4 {
    top: 68%;
  }

  #kim-s7 .respuesta-4 {
    top: 68%;
  }

  .luis2 {
    top: 8%;
  }
  #luis-s8 .cuadro-pregunta-5 {
    top: 103%;
  }
  #luis-s7 .respuesta-4 {
    top: 77%;
  }
  #luis-s9 .respuesta-6 {
    top: -1%;
  }
  #luis-s10 .respuesta-7 {
    top: 148%;
  }

  #werever-s8 .respuesta-5 {
    top: 160%;
  }
  #werever-s10 .respuesta-7 {
    top: 150%;
  }

  .cuadro-txt-2 {
    left: 115%;
    top: -22%;
  }
  .video {
    left: 126%;
    top: -10%;
  }
  .cuadro-txt-3 {
    left: -11%;
    top: -21%;
  }
  .cuadro-pregunta {
    left: 122%;
    top: 56%;
  }
  .respuesta {
    left: 133%;
  }
  .cr-3 {
    left: 121%;
  }
  .cuadro-pregunta-2 {
    top: -78%;
  }
  .cuadro-pregunta-3 {
    top: -98%;
  }
  .respuesta-3 {
    top: -75%;
  }
  .cr-6 {
    left: 178%;
    top: -75%;
  }
  .cuadro-pregunta-4 {
    left: 2%;
    top: 53%;
  }
  .respuesta-4 {
    left: 7%;
    top: 77%;
  }
  .cr-7 {
    left: -5%;
    top: 66%;
  }
  .cuadro-pregunta-5 {
    top: 126%;
  }
  .respuesta-5 {
    top: 145%;
  }
  .cr-9 {
    left: 63%;
    top: 162%;
  }
  .cuadro-pregunta-6 {
    left: 200%;
  }
  .respuesta-6 {
    left: 207%;
    top: 4%;
  }
  .cr-10 {
    left: 199%;
    top: 5%;
  }
  .cr-11 {
    left: 240%;
    top: -19%;
  }
  .cr-12 {
    left: 237%;
    top: 14%;
  }
  .cuadro-pregunta-7 {
    left: -5%;
  }
  .respuesta-7 {
    left: 2%;
  }
  .cr-13 {
    left: -8%;
  }
  .cuadro-pregunta-8 {
    left: 132%;
  }
  .respuesta-8 {
    left: 139%;
    top: 149%;
  }
  .cr-15 {
    left: 128%;
  }
  .cr-16 {
    left: 169%;
  }

  .coo-1{
    transition: all 0.5s;
    left: 0%;
    top: -14%;
  }
  .coo-2{
    transition: all 0.5s;
    left: -58%;
    top: 40%;

  }
  .coo-3{
    transition: all 0.5s;
    left: 51%;
    top: 35%;

  }
  .coo-4 {
    transition: all 0.5s;
    top: -48%;
    left: -46%;
  }
  .coo-5 {
    transition: all 0.5s;
    top: 87%;
    left: 0%;
  }
  .coo-6 {
    transition: all 0.5s;
    top: 117%;
    left: -76%;
  }
  .coo-7 {
    transition: all 0.5s;
    top: -35%;
    left: 56%;
  }
  .coo-8 {
    transition: all 0.5s;
    top: -100%;
    left: 0%;
  }
  .coo-9 {
    transition: all 0.5s;
    top: 47%;
    left: -125%;
  }
  .coo-10 {
    transition: all 0.5s;
    top: -85%;
    left: 61%;
  }
  .coo-11 {
    transition: all 0.5s;
    top: -99%;
    left: -57%;
  }
}
@media screen and (max-width: 1500px) {
	.scene > div.joyas {
    left: 50%;
    top: 8%;
  }
  .scene > div.mueven {
    left: 54.5%;
    top: 17.8%;
  }
  .scene > div.cuadro {
    left: 73%;
    top: 19%;
  }
  .scene > div.youtube {
    left: 80.3%;
    top: 17%;
  }
  .poli-sliders {
    top: -14%;
  }
  .scene > div.poli {
    left: 33%;
  }
  .juan-sliders {
    top: -14%;
  }
  .scene div.juan {
    left: 48%;
  }
  .yuya-sliders {
    top: -14%;
  }
  .scene div.yuya {
    left: 68%;
  }
  .werever-sliders {
    top: -14%;
  }
  .scene div.werever {
    left: 112%;
  }
  .luis-sliders {
    top: -14%;
  }
  .scene div.luis {
    left: 96%;
  }
  .kim-sliders {
    top: -14%;
  }
  .scene div.kim {
    left: 88%;
  }
  .poli a {
    height: 430px;
    width: 452px;
  }
  .poli a:hover {
    height: 450px;
    width: 472px;
  }
  .juan a {
    width: 340px;
    height: 314px;
  }
  .juan a:hover {
    width: 360px;
    height: 334px;
  }
  .yuya a {
    width: 305px;
    height: 483px;
  }
  .yuya a:hover {
    width: 325px;
    height: 503px;
  }
  .yuya3 {
    left: 23%;
    top: -29%;
    width: 470px;
    height: 551px;
  }
  .yuya4 {
    left: 161%;
    top: -98%;
  }
  .yuya5 {
    left: 96%;
    top: 119%;
  }
  .kim a {
    width: 177px;
    height: 430px;
  }
  .kim a:hover {
    width: 197px;
    height: 450px;
  }
  .luis a {
    width: 290px;
    height: 306px;
  }
  .luis a:hover {
    width: 310px;
    height: 326px;
  }
  .werever a {
    width: 230px;
    height: 460px;
  }
  .werever a:hover {
    width: 250px;
    height: 480px;
  }

  .botones {
    top: 88%;
  }

  .poli-sliders,
  .poli-sliders.coo-1 {
    top: -8%;
  }
  .poli2 {
    width: 424px;
    height: 843px;
  }
  .poli3 {
    left: 35%;
    top: -31%;
    width: 470px;
    height: 521px;
  }
  #poli-s4 .cuadro-pregunta{
    top: 56%;
  }
  #poli-s5 .cuadro-pregunta-2 {
    top: -76%;
  }
  .poli4 {
    left: 159%;
    top: -103%;
  }
  #poli-s7 .respuesta-4 {
    top: 67%;
  }
  #poli-s7 .cr-8 {
    top: 77%;
  }
  #poli-s8 .respuesta-5 {
    top: 141%;
  }
  .poli5 {
    left: 86%;
    top: 115%;
    width: 685px;
    height: 720px;
  }
  #poli-s9 .cuadro-pregunta-6 {
    top: -22%;
  }
  #poli-s9 .cr-12 {
    top: 23%;
  }
  #poli-s9 .cr-11 {
    left: 242%;
  }
  #poli-s10 .cuadro-pregunta-7 {
    top: 124%;
  }
  .poli-sliders.coo-10 {
    transition: all 0.5s;
    top: -111%;
    left: 61%;
  }

  .juan2 {
    top: 7%;
  }
  #juan-s7 .respuesta-4 {
    top: 68%;
  }

  #kim-s7 .respuesta-4 {
    top: 68%;
  }

  .luis2 {
    top: 8%;
  }
  #luis-s8 .cuadro-pregunta-5 {
    top: 103%;
  }
  #luis-s7 .respuesta-4 {
    top: 77%;
  }
  #luis-s9 .respuesta-6 {
    top: -1%;
  }
  #luis-s10 .respuesta-7 {
    top: 148%;
  }

  #werever-s8 .respuesta-5 {
    top: 160%;
  }
  #werever-s10 .respuesta-7 {
    top: 150%;
  }

  .cuadro-txt-2 {
    left: 115%;
    top: -22%;
  }
  .video {
    left: 126%;
    top: -10%;
  }
  .cuadro-txt-3 {
    left: -11%;
    top: -21%;
  }
  .cuadro-pregunta {
    left: 122%;
    top: 56%;
  }
  .respuesta {
    left: 133%;
  }
  .cr-3 {
    left: 121%;
  }
  .cuadro-pregunta-2 {
    top: -78%;
  }
  .cuadro-pregunta-3 {
    top: -98%;
  }
  .respuesta-3 {
    top: -75%;
  }
  .cr-6 {
    left: 178%;
    top: -75%;
  }
  .cuadro-pregunta-4 {
    left: 2%;
    top: 53%;
  }
  .respuesta-4 {
    left: 7%;
    top: 77%;
  }
  .cr-7 {
    left: -5%;
    top: 66%;
  }
  .cuadro-pregunta-5 {
    top: 126%;
  }
  .respuesta-5 {
    top: 145%;
  }
  .cr-9 {
    left: 63%;
    top: 162%;
  }
  .cuadro-pregunta-6 {
    left: 200%;
  }
  .respuesta-6 {
    left: 207%;
    top: 4%;
  }
  .cr-10 {
    left: 199%;
    top: 5%;
  }
  .cr-11 {
    left: 240%;
    top: -19%;
  }
  .cr-12 {
    left: 237%;
    top: 14%;
  }
  .cuadro-pregunta-7 {
    left: -5%;
  }
  .respuesta-7 {
    left: 2%;
  }
  .cr-13 {
    left: -8%;
  }
  .cuadro-pregunta-8 {
    left: 132%;
  }
  .respuesta-8 {
    left: 139%;
    top: 149%;
  }
  .cr-15 {
    left: 128%;
  }
  .cr-16 {
    left: 169%;
  }

  .coo-1{
    transition: all 0.5s;
    left: 0%;
    top: -14%;
  }
  .coo-2{
    transition: all 0.5s;
    left: -58%;
    top: 40%;

  }
  .coo-3{
    transition: all 0.5s;
    left: 51%;
    top: 35%;

  }
  .coo-4 {
    transition: all 0.5s;
    top: -48%;
    left: -46%;
  }
  .coo-5 {
    transition: all 0.5s;
    top: 87%;
    left: 0%;
  }
  .coo-6 {
    transition: all 0.5s;
    top: 117%;
    left: -76%;
  }
  .coo-7 {
    transition: all 0.5s;
    top: -35%;
    left: 56%;
  }
  .coo-8 {
    transition: all 0.5s;
    top: -100%;
    left: 0%;
  }
  .coo-9 {
    transition: all 0.5s;
    top: 47%;
    left: -125%;
  }
  .coo-10 {
    transition: all 0.5s;
    top: -85%;
    left: 61%;
  }
  .coo-11 {
    transition: all 0.5s;
    top: -99%;
    left: -57%;
  }
}

@media screen and (min-height: 900px) {
  
}

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

  .redes .nav{
    width: auto;
  }
  .scene > div.joyas {
    left: 50%;
    top: 15.5%;
  }
  .scene > div.mueven {
    left: 51.8%;
    top: 22.8%;
  }
  .scene > div.youtube {
    left: 89%;
    top: 22%;
  }
  .scene > div.cuadro {
    left: 78%;
    top: 22%;
  }
  .scene > div.poli {
    left: 45%;
    top: 20%;
  }
  .poli a, .poli a:hover{
    height: 450px;
    width: 428px;
  }
  .poli-sliders,
  .poli-sliders.coo-1 {
    top: 0%;
  }
  #poli-s1 .cuadro-txt {
    left: 95%;
  }
  .poli2 {
    left: 57%;
    top: 22%;
    width: 424px;
    height: 612px;
  }
  .poli3 {
    left: 26%;
    top: -7%;
    width: 470px;
    height: 521px;
  }
  #poli-s4 .cuadro-pregunta {
    top: 72%;
  }
  #poli-s5 .respuesta-2 {
    top: -61%;
  }
  .poli4 {
    left: 169%;
    top: -100%;
  }
  #poli-s7 .cuadro-pregunta-4 {
    left: 12%;
    top: 74%;
  }
  #poli-s7 .respuesta-4 {
    top: 84%;
    left: 21%;
  }
  #poli-s7 .cr-7 {
    left: 6%;
    top: 84%;
  }
  #poli-s7 .cr-8 {
    top: 88%;
    left: 65%;
  }
  .poli5 {
    left: 93%;
    top: 121%;
    width: 685px;
    height: 720px;
  }
  #poli-s9 .respuesta-6 {
    top: -5%;
  }
  #poli-s9 .cr-11 {
    left: 283%;
  }
  #poli-s9 .cr-12 {
    top: 9%;
  }
  .poli-sliders.coo-10 {
    transition: all 0.5s;
    top: -96%;
    left: 88%;
  }
  #poli-s10 .respuesta-7 {
    left: -4%;
    top: 136%;
  }
  #poli-s10 .cr-13 {
    left: -20%;
    top: 144%;
  }


  .scene div.juan {
    left: 42%;
  }
  .juan a, .juan a:hover{
    width: 400px;
    height: 374px;
  }
  .juan2 {
    top: 13%;
    left: 61%;
  }
  .juan3 {
    top: -21%;
  }
  #juan-s4 .respuesta {
    top: 86%;
  }
  #juan-s5 .respuesta-2 {
    top: -68%;
  }
  #juan-s6 .respuesta-3 {
    top: -88%;
  }
  .juan4 {
    left: 160%;
    top: -99%;
  }
  #juan-s7 .respuesta-4 {
    top: 64%;
  }
  #juan-s7 .cr-8 {
    top: 75%;
  }
  .juan-sliders.coo-7 {
    transition: all 0.5s;
    top: -11%;
    left: 56%;
  }



  .scene div.yuya {
    left: 73%;
    bottom: 7%;
  }
  .yuya a, .yuya a:hover{
    width: 360px;
    height: 538px;
  }
  .yuya2 {
    left: 65%;
  }
  .yuya3 {
    left: 29%;
    top: -17%;
  }
  .yuya4 {
    left: 176%;
    top: -96%;
    width: 470px;
    height: 548px;
  }
  .yuya5 {
    left: 108%;
    top: 127%;
  }

  .scene div.kim {
    left: 99%;
    bottom: 21%;
  }
  .kim a, .kim a:hover{
    width: 252px;
    height: 505px;
  }
  .kim2 {
    left: 66%;
  }
  .kim3 {
    left: 41%;
    width: 265px;
  }
  #kim-s4 .respuesta {
    top: 87%;
  }
  #kim-s5 .respuesta-2 {
    top: -66%;
  }
  .kim4 {
    left: 160%;
    top: -100%;
  }
  #kim-s6 .respuesta-3 {
    top: -84%;
  }
  .kim5 {
    left: 101%;
    top: 128%;
  }



  .scene div.luis {
    left: 108%;
  }
  .luis a, .luis a:hover{
    width: 340px;
    height: 356px;
  }
  .luis2 {
    top: 17%;
    left: 65%;
  }
  .luis3 {
    left: 47%;
  }
  .luis4 {
    left: 171%;
    top: -98%;
  }
  #luis-s7 .respuesta-4 {
    top: 68%;
  }
  #luis-s8 .cuadro-pregunta-5 {
    top: 111%;
  }
  .luis5 {
    left: 103%;
    top: 147%;
  }
  #luis-s10 .respuesta-7 {
    top: 121%;
  }



  .scene div.werever {
    left: 128%;
    bottom: 22%;
  }
  .werever a, .werever a:hover{
    width: 280px;
    height: 510px;
  }
  .werever2 {
    left: 62%;
  }
  .werever3 {
    left: 43%;
  }
  #werever-s4 .respuesta {
    top: 82%;
  }
  #werever-s4 .cr-3 {
    top: 81%;
  }
  #werever-s5 .respuesta-2 {
    top: -64%;
  }
  .werever4 {
    left: 174%;
    top: -97%;
  }
  .werever5 {
    left: 107%;
    top: 128%;
  }
  #werever-s10 .respuesta-7 {
    top: 122%;
  }


  .cuadro-txt {
    left: 88%;
  }
  .cr-1 {
    top: -32%;
  }
  .cr-2 {
    top: 11%;
  }
  .cuadro-pregunta {
    left: 145%;
    top: 73%;
  }
  .respuesta {
    left: 162%;
    top: 89%;
  }
  .cr-3 {
    left: 144%;
  }
  .respuesta-2 {
    left: 73%;
    top: -63%;
  }
  .respuesta-3 {
    top: -81%;
  }
  .respuesta-4 {
    left: 9%;
    top: 69%;
  }
  .cr-8 {
    left: 51%;
  }
  .respuesta-5 {
    top: 139%;
  }
  .cr-9 {
    left: 63%;
    top: 151%;
  }
  .cuadro-pregunta-6 {
    left: 226%;
  }
  .respuesta-6 {
    left: 236%;
    top: -2%;
  }
  .cr-10 {
    left: 224%;
    top: -1%;
  }
  .cr-11 {
    left: 280%;
  }
  .cr-12 {
    left: 272%;
    top: 7%;
  }
  .cuadro-pregunta-7 {
    left: -18%;
    top: 108%;
  }
  .respuesta-7 {
    left: -4%;
    top: 118%;
  }
  .cr-13 {
    left: -20%;
    top: 120%;
  }
  .cr-14 {
    top: 132%;
  }
  .cuadro-pregunta-8 {
    left: 160%;
  }
  .respuesta-8 {
    left: 171%;
    top: 144%;
  }
  .cr-15 {
    left: 156%;
  }
  .cr-16 {
    left: 210%;
  }





  .coo-1{
    transition: all 0.5s;
    left: 0%;
    top: 0%;
  }
  .coo-2{
    transition: all 0.5s;
    left: -65%;
    top: 48%;

  }
  .coo-3{
    transition: all 0.5s;
    left: 66%;
    top: 51%;

  }
  .coo-4 {
    transition: all 0.5s;
    top: -48%;
    left: -76%;
  }
  .coo-5 {
    transition: all 0.5s;
    top: 110%;
    left: 7%;
  }
  .coo-6 {
    transition: all 0.5s;
    top: 117%;
    left: -76%;
  }
  .coo-7 {
    transition: all 0.5s;
    top: -35%;
    left: 56%;
  }
  .coo-8 {
    transition: all 0.5s;
    top: -100%;
    left: 0%;
  }
  .coo-9 {
    transition: all 0.5s;
    top: 47%;
    left: -157%;
  }
  .coo-10 {
    transition: all 0.5s;
    top: -72%;
    left: 85%;
  }
  .coo-11 {
    transition: all 0.5s;
    top: -99%;
    left: -93%;
  }

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

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

}


@media (min-width: 480px) and (max-width: 767px) {
	

}
@media screen and (max-width: 768px) {
  .scene > div.joyas {
    left: 58%;
    top: 13%;
    height: 60px;
    width: 358px;
  }
  .scene > div.mueven {
    left: 60.5%;
    top: 19.8%;
    height: 33px;
    width: 247px;
  }
  .scene > div.cuadro {
    left: 90%;
    top: 20%;
    height: 82px;
    width: 91px;
  }
  .scene > div.youtube {
    left: 98%;
    top: 20%;
    height: 100px;
    width: 457px;
  }
  .scene > div.poli {
    left: 52%;
    top: 15%;
  }
  .poli a, .poli a:hover {
    height: 350px;
    width: 328px;
  }
  #poli-s1 .cuadro-txt {
    left: 104%;
  }
  .poli2 {
    left: 64%;
    top: 23%;
    width: 324px;
    height: 454px;
  }
  .poli3 {
    left: -4%;
    top: -13%;
    width: 470px;
    height: 521px;
  }
  #poli-s3 .cr-2 {
    top: 2%;
    left: -14%;
  }
  #poli-s4 .cuadro-pregunta {
    top: 70%;
  }
  #poli-s4 .respuesta-3 {
    top: -112%;
    left: 159%;
  }
  .poli4 {
    left: 183%;
    top: -95%;
    width: 420px;
    height: 500px;
  }
  #poli-s6 .respuesta-3 {
    top: -113%;
    left: 161%;
  }

  #poli-s7 .cuadro-pregunta-4 {
    left: -17%;
    top: 60%;
  }
  #poli-s7 .respuesta-4 {
    top: 72%;
    left: -3%;
  }
  #poli-s7 .cr-7 {
    left: -21%;
    top: 73%;
  }
  #poli-s7 .cr-8 {
    top: 87%;
    left: 45%;
  }
  #poli-s8 .respuesta-5 {
    top: 129%;
  }
  .poli5 {
    left: 97%;
    top: 131%;
    width: 585px;
    height: 620px;
  }
  #poli-s9 .cuadro-pregunta-6 {
    top: -41%;
  }
  #poli-s9 .respuesta-6 {
    top: -21%;
  }
  #poli-s9 .cr-12 {
    top: -4%;
  }
  #poli-s10 .respuesta-7 {
    left: 0%;
    top: 139%;
  }

  
  .scene div.juan {
    left: 51%;
  }
  .juan a, .juan a:hover {
    width: 346px;
    height: 355px;
  }
  .juan2 {
    top: 13%;
    left: 65%;
  }
  .juan3 {
    top: -29%;
  }
  #juan-s6 .respuesta-3 {
    top: -113%;
  }
  .juan4 {
    left: 183%;
    top: -97%;
    width: 299px;
    height: 550px;
  }
  .juan-sliders.coo-7 {
    transition: all 0.5s;
    top: -26%;
    left: 93%;
  }
  
  .scene div.yuya {
    left: 84%;
  }
  .yuya a, .yuya a:hover {
    width: 290px;
    height: 440px;
  }
  .yuya2 {
    left: 72%;
    top: 10%;
  }
  .yuya3 {
    left: 1%;
    top: -11%;
    width: 409px;
    height: 551px;
  }
  .yuya4 {
    left: 193%;
    top: -88%;
    width: 370px;
    height: 448px;
  }
  .yuya5 {
    left: 131%;
    top: 122%;
    width: 212px;
    height: 459px;
  }

  .scene div.kim {
    left: 112%;
    bottom: 20%;
  }
  .kim a, .kim a:hover {
    width: 202px;
    height: 455px;
  }
  .kim2 {
    left: 74%;
  }
  #kim-s5 .respuesta-2 {
    top: -71%;
  }
  #kim-s5 .cr-4 {
    left: 65%;
    top: -72%;
  } 
  #kim-s6 .respuesta-3 {
    top: -109%;
  }
  .kim4 {
    left: 166%;
    top: -95%;
    width: 420px;
    height: 500px;
  }
  .kim4 {
    left: 166%;
    top: -95%;
    width: 420px;
    height: 500px;
  }
  #kim-s7 .respuesta-4 {
    top: 60%;
  }
  #kim-s7 .cr-7 {
    left: -22%;
    top: 60%;
  }
  
  .scene div.luis {
    left: 121%;
  }
  .luis a, .luis a:hover {
    width: 290px;
    height: 306px;
  }
  .luis2 {
    top: 11%;
    left: 70%;
  }
  #luis-s6 .respuesta-3 {
    top: -109%;
    left: 157%;
  }
  .luis4 {
    left: 192%;
    top: -101%;
    width: 427px;
    height: 550px;
  }
  #luis-s6 .cr-6 {
    left: 168%;
    top: -71%;
  }
  #luis-s7 .respuesta-4 {
    top: 61%;
  }
  #luis-s8 .cuadro-pregunta-5 {
    top: 106%;
  }
  #luis-s8 .respuesta-5 {
    left: 78%;
    top: 126%;
    width: 415px;
  }
  .luis5 {
    left: 128%;
    top: 138%;
    width: 462px;
    height: 493px;
  }
  #luis-s9 .respuesta-6 {
    top: -31%;
  }
  #luis-s10 .respuesta-7 {
    top: 124%;
  }
  .cr-14 {
    top: 142%;
  }
  
  .scene div.werever {
    left: 142%;
  }
  .werever a, .werever a:hover {
    width: 230px;
    height: 460px;
  }
  .werever2 {
    left: 69%;
  }
  .werever3 {
    left: 27%;
    top: -17%;
  }
  #werever-s4 .respuesta {
    top: 86%;
  }
  #werever-s5 .respuesta-2 {
    top: -69%;
  }
  #werever-s6 .respuesta-3 {
    top: -108%;
    left: 168%;
  }
  .werever5 {
    left: 132%;
    top: 128%;
  }
  #werever-s8 .respuesta-5 {
    top: 132%;
  }
  .cuadro-txt {
    left: 103%;
    top: 19%;
  }
  .cuadro-txt-2 {
    left: 153%;
    top: -34%;
  }
  .video {
    left: 156%;
    top: -17%;
  }
  .cuadro-txt-3 {
    left: -11%;
    top: -39%;
  }
  .cr-1 {
    top: -51%;
  }
  .cr-2 {
    top: 5%;
    left: 5%;
  }
  .cuadro-pregunta {
    left: 176%;
    top: 73%;
  }
  .respuesta {
    left: 198%;
    top: 89%;
  }
  .cr-3 {
    left: 175%;
  }
  .cuadro-pregunta-2 {
    top: -84%;
    left: 65%;
  }
  .respuesta-2 {
    left: 86%;
    top: -69%;
  }
  .cr-4 {
    left: 65%;
  }
  .cr-5 {
    left: 122%;
    top: -40%;
  }
  .cuadro-pregunta-3 {
    top: -124%;
    left: 155%;
  }
  .respuesta-3 {
    top: -103%;
    left: 168%;
  }
  .cr-6 {
    left: 171%;
    top: -75%;
  }
  .cuadro-pregunta-4 {
    left: -18%;
    top: 47%;
  }
  .respuesta-4 {
    left: -4%;
    top: 67%;
  }
  .cr-7 {
    left: -22%;
    top: 66%;
  }
  .cuadro-pregunta-5 {
    top: 117%;
    left: 76%;
  }
  .respuesta-5 {
    top: 133%;
    left: 77%;
  }
  .cr-9 {
    left: 92%;
    top: 151%;
  }
  .cuadro-pregunta-6 {
    left: 265%;
    top: -45%;
  }
  .respuesta-6 {
    left: 277%;
    top: -29%;
  }
  .cr-10 {
    left: 263%;
    top: -28%;
  }
  .cr-11 {
    left: 336%;
    top: -49%;
  }
  .cr-12 {
    left: 323%;
    top: -16%;
  }
  .cr-13 {
    left: -24%;
    top: 120%;
  }
  .cuadro-pregunta-8 {
    left: 170%;
  }
  .respuesta-8 {
    left: 181%;
    top: 146%;
  }
  .cr-15 {
    left: 162%;
  }
  .cr-16 {
    left: 237%;
  }

  .coo-1 {
    transition: all 0.5s;
    left: 0%;
    top: 0%;
  }
  .coo-2 {
    transition: all 0.5s;
    left: -90%;
    top: 59%;
  }
  .coo-3 {
    transition: all 0.5s;
    left: 83%;
    top: 49%;
  }
  .coo-4 {
    transition: all 0.5s;
    top: -58%;
    left: -103%;
  }
  .coo-5 {
    transition: all 0.5s;
    top: 110%;
    left: 7%;
  }
  .coo-6 {
    transition: all 0.5s;
    top: 134%;
    left: -81%;
  }
  .coo-7 {
    transition: all 0.5s;
    top: -26%;
    left: 93%;
  }
  .coo-8 {
    transition: all 0.5s;
    top: -100%;
    left: 0%;
  }
  .coo-9 {
    top: 72%;
    left: -192%;
  }
  .coo-10 {
    transition: all 0.5s;
    top: -72%;
    left: 95%;
  }
  .coo-11 {
    transition: all 0.5s;
    top: -99%;
    left: -93%;
  }
  .cuadro-pregunta h2,
  .cuadro-pregunta-2 h2,
  .cuadro-pregunta-3 h2,
  .cuadro-pregunta-4 h2,
  .cuadro-pregunta-5 h2,
  .cuadro-pregunta-6 h2, 
  .cuadro-pregunta-7 h2,
  .cuadro-pregunta-8 h2 {
    text-align: center;
    font-size: 2rem;
  }

}

@media (min-width: 200px) and (max-width: 575px) {
	.redes .nav-link img {
	    width: 90px;
	}
	.redes .nav-item:first-child a {
	    padding-left: 10px;
	}
	.redes .nav-item a {
	    font-size: 20px;
	    padding: 0 7px;
	}
}

@media screen and (max-width: 479px) {
	.scene {
    display: none;
  }
  #intro {
    display: none;
  }
  #intro2{
    display: block;
  }
  #scene2 {
    display: block;
    padding: 0;
  }
  .info-youtubers{
    display: block;
    padding: 3em 1em 10em;
  }
  body{
    overflow: auto;
    background: url(../img/bg.png) no-repeat center;
    -webkit-background-size: cover;
    background-size: cover;
  }

  .cuadro-txt-m {
    padding: 15px;
    border: 8px solid #000;
    background: url(../img/txt-m.png) no-repeat center;
    -webkit-background-size: auto;
    background-size: auto;
    background-position: top right;
    cursor: default !important;
  }
  .cuadro-txt-m h2 {
    text-align: left;
    font-size: 2.5rem;
  }
  .cuadro-txt-m h3{
    padding-top: 5px;
    font-size: 2.5rem;
    color: #ed1d25;
    line-height: 29px;
  }
  .cuadro-txt-m h3 span{
    font-size: 1.5rem;
  }
  .cuadro-txt-m2 {
    padding: 15px;
    border: 8px solid #000;
    cursor: default !important;
    margin-bottom: 1em;
  }
  .cuadro-txt-m2 h2 {
    text-align: center;
    font-size: 4rem;
    color: #ed1d25;
  }
  video {
    width: 100%;
    height: auto;
  }
  .cuadro-txt-m3 h2 {
    font-size: 4rem;
    padding-right: 0.1em;
    float: left;
    line-height: 65px;
  }
  .cuadro-pregunta-m{
    border: 8px solid #000;
    padding: 15px;
    margin-top: 2em;
    margin-bottom: 1em;
  }
  .cuadro-txt-m2 h2 {
    text-align: center;
    font-size: 3rem;
    color: #ed1d25;
  }
  .regreso2 a{
    color: #000;
    font-size: 1.3rem;
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    border: 4px solid #000;
    padding: 0.3em 0.5em;
    transition: all 0.5s;
    float: right;
    margin-right: 0.5em;
    margin-bottom: 3em;
  }
  .regreso2 i{
    padding-left: 5px;
  }

  .arrastra .col-4 {
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
  }
  .h100{
    height: 100vh;
  }
  .h100 img{
    padding-top: 10%;
    margin-bottom: 20%;
  }
  .h100 .arrastra{
    margin-bottom: 20%;
  }
  .link2{
    height: 100vh;
  }
  #intro2 h1 span{
    color: #ec1d23;
    font-size: 3rem;
  }
  #intro2 h3{
    padding-top: 1em;
    padding-bottom: 1em;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 300;
  }
  #intro2 p{
    padding-bottom: 0.5em;
    font-size: 1.3rem;
    font-weight: 300;
  }


  
}



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