.botones{
    position:fixed;
    top:10vw;
    width:5vw;
    height:5vw;
    background-size:contain;
    background-position:center;
    transition:all 0.6s;
    background-repeat: no-repeat;
    }

    #bajar{
        background-image: url(bajar.png);
        bottom: 2vw;
        top:unset;
        right: 2vw;
        /* right:unset; */
    }

    #contacto{
        background-image: url(contacto.png);
        bottom: 2vw;
        top:unset;
        right: 9vw;
    }



.compoLogin{
  
position:fixed;
  
background-image:url(bienv.png);
  
height: 30vw;
  
width: 38vw;
  
background-size:contain;
  
background-repeat:no-repeat;
  
left:50%;
  
background-position: center;
  
top:50%;
  
transform: translate(-50%, -80%);
}

input:focus, textarea:focus, select:focus{
    outline: none;
}

body, html{
    margin:0px;
        overflow:hidden;
    }

    body{
        background-image:url(fondo.jpg);
        background-size:cover;
        background-repeat: no-repeat;
        height: 100vh;
        background-position: center;
    }


.compoLogin #login{

position:absolute;

width:60%;

left:20%;

font-size:40px;

top: 58%;

text-align:center;

font-family:Bevan;

background:transparent;

border:none !important;
}

#carton{
    position:fixed;
    display:none;
    height: 91vh;
    width: 60vw;
    background-size:contain;
    background-repeat:no-repeat;
    left:110%;
    background-position: center;
    top:50%;
    transform: translate(-50%, -50%);
    transition:all 0.5s;
}

#carton.adentro{left: 55%;}

    #porotos{

display: none;

background-image:url(fichas.png);

background-size: contain;

background-repeat:no-repeat;

width: 35vw;

height: 47vh;

position: fixed;

bottom: -72px;

left: -4vw;

}

    .unpo{
        display: none;
        background-image:url(fi.png);
        width:5vw;
        position: fixed;
        transform: translate(-50%, -50%);
        height:5vw;
        background-size:contain;
        background-repeat:no-repeat;
        }


.aceptar{

left: 5%;

position:absolute;

top: 85%;

width: 91%;

cursor:pointer;
}

/* portrait*/
@media (max-width:769px) and (max-height:1280px) and (min-width:240px) and (min-height:640px){

.botones{
    width:15vw;
    height:15vw;
    transform: rotate(-90deg);
}
#contacto{
    right:20vw;
    transform: rotate(-90deg);
}

    .compoLogin{
        width: 100vw;
        height: 49vw;
    }
    .compoLogin #login{
        border:unset !important;
        bottom: 31%;
        font-size: 30px;
    }

    .aceptar{
        top: 105%;
    }
    #carton{
        width: 80vh;
        top: 41vh;
        transform:translateX(-53%) translateY(-50%) rotate(-90deg) !important;
    }

    #porotos{
        width: 75vw;
        left: -28vw;
        bottom: -20vh;
        z-index: 9999;
        background-size: contain;
        
    }

    .unpo{
        width: 16vw;
        height: 16vw;
    }
}

@media (max-width:1300px) and (max-height:720px) {
  
   .compoLogin #login{
        border:unset !important;
        top: 61%;
        bottom:unset;
        font-size: 30px;
    }
    .aceptar{
        top: 105%;
        width: 90%;
        /* left:17.5%; */
        position:absolute;
    }

#carton{width: 95vw;height: 43vw;margin-top:-6vw;transform:translateX(-50%) translateY(-50%) rotate(-0deg) !important;}

    .compoLogin{
        
width: 65vw;
        
height: 32vw;
    }

.unpo{
        width: 10vw;
    height: 10vw;
}
#porotos{
    width:45vw;
    z-index: 9;
}


.botones{
    width:6vw;
    height:6vw;
    transform:rotate(0deg)
}
#contacto{
    right:12vw;
}


}