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


.menuho{
    height: 40%;
    
}

}


@media screen and (min-height:1020px) and (max-height:1280px) {


.menuho{
    height: 50%;
    
}

}

@media screen and (min-height:1000px) {
    .header{
        height: 15%;
    }
    
    .rana{
    height: 85%;
    background: url('../images/personajes.png') bottom left/auto 68% no-repeat, url('../images/titulo.png') top center/80% auto no-repeat; 
    }
}

@media screen and (min-width:1000px) and (max-height:850px){
    .titulosvg{
    max-width: 900px;
    }
}

@media screen and (min-width:1000px) and (max-height:630px){
    .titulosvg{
    max-width: 40%;
    }
}







@media screen and (max-height:700px){


.menuho{
    height: 65%;
    width: 80px;
    
}

.botonho{
   width: 140px;
    display: block;
}
}




@media screen and (max-width:900px){
    .escuchar{
    width: 100px;
    height: 100px;
    border-radius: 50px;
    border: 2px dotted #eda12f;
    padding: 15px 10px 5px 10px;
    margin: -50px 0;
    font-size: 0.85em;
}
    
    .desa{
        display: none;
    }
    
    .apar{
        display: block;
    }
    
    .btnes{
        width: 20px;
    }
}


@media screen and (max-width:850px){
    
    
    
    .rana{
    background: url('../images/personajes.png') bottom left/auto 65% no-repeat, url('../images/titulo1.png') top center/60% auto no-repeat; 
}
}

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

    
    .creditin{
        flex-direction: column !important;
    }
    
    .info1{
        padding-top: 0;
    }
    
    .info2{
        padding-bottom: 0;
    }
    
}

@media screen and (max-width:620px) and (min-height:500px) {
    
    .titulosvg{
    max-width: 450px;
    }
    
    .header{
        height: 12%;
    }
    .rana{
        height: 87%;
    }
}


@media screen and (max-width:620px){
    .ocultar2{
        display: none;
    }
    
    
    
    .rana{
    background: url('../images/personajes1.png') bottom left/auto 60% no-repeat, url('../images/titulo.png') top center/80% auto no-repeat; 
}
    .aparece1{
        display: block;
    }
    
    .titulo{
        height: auto;
        
    }
    
    .biblio{
        font-size: 1.4em;
    }
    
    .presenta{
        font-size: 1em;
    }
    
    .header{
        border-bottom: 0;
    }
    .musical{
        font-size: 1.4em;
    }
    
    .logo img{
        width: 60px;
    }
    
    .flecha img{
        width: 25px;
    }
}

@media screen and (max-width:500px) and (min-height:530px){
    .escuchar{
        margin-top: -300px;
    }
    
    
}

@media screen and (max-width:450px){
   
    
    
    
    .cancionero{
        width: 60%;
    }
    .musical{
        font-size: 1.2em;
        line-height: 1.2em;
    }
    
    .flecha{
        padding-top: 40px;
    }
     .logo img{
        width: 50px;
    }
    
    
    .rana{   
        
        background: url('../images/personajes1.png') bottom left/auto 70% no-repeat, url('../images/titulo.png') top center/80% auto no-repeat; 
    }
    
     .lineares{  
    width: 60%;  
    }
    
     .padding1{
      padding-left: 15px;  
    }
    .padding2{
      padding-left: 15px;  
    }
    .padding3{
      padding-left: 15px;  
    }
}

@media screen and (max-width:396px){
.cancionero{
        padding-top: 22px;
    }
   
    
    header{
    height: 50px;
    }

    .conheader{
    height: 40px;
    }
    
    .titulo{
        margin-top: -75px;
    }

   
    
@media screen and (max-width:350px){
    
    .musical{
        font-size: 0.93em;
    }
    
    .info{
        padding: 0;
    }
    
    .titulo{
        margin-top: -95px;
    }
    
}