#e0{

}

.e0{
    opacity:1;
    z-index: 10000;
}
  
#e0Scroll{
    position: absolute;
    top:40px;
    width:100vw;
    height: 200px;
    max-width: 100vw;
}

#e0-instrucciones{
    position: absolute;
    top:0px;
    left: 0px;
    width:100vw;
    height: 100vh;;
    z-index: 10000;
    overflow:scroll;
}

#e0-h2{
    opacity:0;
    font-family: berlin;
    text-align: center;
    font-size: 2.5em;
    text-transform: uppercase;
    color:#fff;
    width: 60%;
    max-width: 1200px;
    margin: auto;
    margin-top: 4%;
}

#e0-p1{
    font-family: montserrat-bold;
    text-align: center;
    color:#fff;
    width: 80%;
    max-width: 1200px;
    margin: auto;
    margin-top: 2%;
    opacity: 0;
    font-size: 1.2em;
}

#descargando{
    color:#fff;
    left:0px;
    top:0px;
    width:100%;
    height: 80px;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity:0;
    font-family: montserrat-medium;
}

.div-logo-aas{
    text-align: center;
    opacity:0;
    max-width: 100vw;
    margin-top: 10px;
    margin-bottom: 30px;
}

.div-logo-aas img{
    width:240px;
}

@media only screen and (max-height: 420px) {
    .div-logo-aas img{
        width:140px;
    }
}

@media (orientation: portrait){
    #descargando{
        display:none !important;
    }

    .e0{
        display:none !important;
    }
}

#e0-indicaciones{
    font-family: montserrat-medium;
    font-size: 0.8em;
    text-align: center;
    color:#fff;
    width: 60%;
    margin:auto 20%;
    display: flex;
    box-sizing: border-box;
    opacity: 1;
}

#e0-audiofonos{
    position: absolute;
    left:-15%;
    top:-5%;
    width:10%;
}

#e0-audiofonos img{
    width: 100%;
}

#e0-indicaciones-texto{
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
    width:70%;
    padding: 0 2%;
}

#e0-pi{
    width:100%;
    margin: 10px;
    text-align: left;
}

#e0-indicaciones2{
    position: relative;
    font-size: 1em;
    text-align: left;
    color:#fff;
    width: 55%;
    margin:2% 5% 2% 40%;
    box-sizing: border-box;
    opacity: 1;
    font-family: montserrat-medium;
}

#e0-indicaciones3{
    text-align: left;
    color:#fff;
    opacity: 1;
}

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

    #e0-indicaciones-texto{
        width:80%;
    }  
}

.e0-redes{
    opacity:0;
    width: 60%;
    display: flex; 
    justify-content: center;
    margin: 20px auto; 
}

.redes-iframe{
    overflow: hidden;
    margin: 0 10px;
    overflow: hidden;
    cursor: pointer;
    width:60px;
    position: relative;
}

.redes-iframe:hover{
    transform: scale(1.2);
}

.redes-iframe iframe{
    position: absolute !important;
    width:100% !important;
    left:0;
    top:10px;
    opacity: 0.001 !important;
}

.redes-iframe>img{
    width:40px;
    margin: 0 10px;
    cursor: pointer;
}

.redes-url{
    margin: 0 10px;
    cursor: pointer;
    width:60px;
    position: relative;
}

.redes-url:hover{
    transform: scale(1.2);
}

.redes-url>img{
    width:40px;
    margin: 0 10px;
    cursor: pointer;
}

#copiado1{
    position: absolute;
    font-size: 10px;
    width:80px;
    height: 30px;
    top:-35px;
    left:-10px;
    background-color: rgb(50, 50, 50);
    color:rgb(241, 235, 235);
    border-radius: 8px;
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity:0;
    transition: 1s;
}

#copiado2{
    position: absolute;
    font-size: 10px;
    width:80px;
    height: 30px;
    top:-35px;
    left:-10px;
    background-color: rgb(50, 50, 50);
    color:rgb(241, 235, 235);
    border-radius: 8px;
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity:0;
    transition: 1s;
}

#copiado3{
    position: absolute;
    font-size: 10px;
    width:80px;
    height: 30px;
    top:-35px;
    left:-10px;
    background-color: rgb(50, 50, 50);
    color:rgb(241, 235, 235);
    border-radius: 8px;
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity:0;
    transition: 1s;
}

@media only screen and (max-width: 700px) {
    #e0-h2{
        width: 80%;
        margin: auto;
        margin-top: 6%;
    }

    #e0-p1{
        width:94%;
        margin: auto;
        margin-top: 4%;
    }

    #descargando{
        height: 60px;
        margin-top: 5px;
        margin-top: 4%;
    }
    
    #e0-indicaciones{
        width:80%;
        margin:4% 10%;
    }  
} 

@media only screen and (max-height: 500px) { 
    #e0-h2{
        width: 90%;
        margin: auto;
        margin-top: 2%;
        font-size: 1.2em;
    }

    #e0-p1{
        width:95%;
        margin: auto;
        margin-top: 2%;
        font-size: 0.9em;
    }

    #descargando{
        height: 30px;
        margin-top: 4%;
        font-size: 1em;
    }

    .entrar-btn div{
        border-radius: 14px;
        padding: 2px 4px;
        background-color: rgb(247, 247, 247);
        color:rgb(44, 44, 44);
        font-size: 10px;
    }

    #e0-indicaciones2 {
        font-size: 0.8em;
    }

    .e0-pi-correccion{
        font-size: 11px;
    }


    .e0-redes{
        margin: 10px auto;
    }

    #info{
        font-size: 11px;
    }
}

.entrar-btn{
    cursor: pointer;
    display: flex;
    justify-content: center;
}
  
.entrar-btn div{
    border-radius: 14px;
    padding: 8px 12px;
    background-color: rgb(247, 247, 247);
    color:rgb(44, 44, 44);
}
  
.entrar-btn div:hover{
    background-color: rgb(44, 44, 44);
    color:rgb(247, 247, 247);
}

.e0-f1{
    width: 100%;
    position: absolute;
    z-index: 10;
    opacity:0;
}

#e0-rio{
    width:100vw;
    position: absolute;
}

#e0-fondo1{
    width:100vw;
    position: absolute;
}

#e0-balsa{
    position:absolute;
    left:0;
    top:0;
    width: 100vw;
    height: 100vh;
}

#e0-balsa img{
    position: absolute;
    left: 20%;
    top:68%;
    width:30%;
    animation: wave 11.88889s 1s infinite linear;
}   

/* #e0-fondo2{
    width:100vw;
    position: absolute;
} */

#scene{
    position: fixed;
    left:0px;
    top:0px;
    z-index: 18;
    opacity:0;
    overflow: hidden;
    width:100vw !important;
    height: 100vh !important;
}

.nube1{
    position: relative;
    z-index: 19;
    width:100%;
    left:0%;
    top:0px;
    opacity:1;
}
  
.nube1 img{
    position: absolute;
    top:0;
    left:-15%;
    width:60%;
}
  
.nube2{
    width:100%;
    z-index: 19;
    position: relative;
    left:0%;
    top:0px;
    height: 100vh;
    opacity:1;
}
  
.nube2 img{
    position:absolute;
    left:30%;
    top:10%;
    width:100%;
}
  
.nube3{
    width:100%;
    position:relative;
    z-index: 19;
    left:0%;
    top:0px;
    height: 100vh;
    opacity:1; 
}
  
.nube3 img{
    position: absolute;
    top:30;
    width:90%;
}
  
.nube4{
    position: relative;
    z-index: 19;
    left:0%;
    top:0px;
    width:100vw;
    height: 100vh;
    opacity:1;
}
  
.nube4 img{
    position: absolute;
    top:0;
    width:80%;
}