@charset "utf-8";
/* CSS Document */

body, html {                
    height: 100%;           
}                           
body{
    font-size: 1em;
    margin: 0%; 
    background-image: url("img/opor00.jpg");   
    height: 100%;                                
    background-position: center;                 
    background-repeat: no-repeat;                
    background-size: cover;                     
}                                             

.mega, .continuar, .volver, .salir, .audio, .titulo,.post {
    /* Para poderlos alinear */
    float: left;
    /* Para que los elementos no tiendan a expandirse y pierdan el tamaño que se les dio en un inicio*/
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
.titulo, .post{
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    }



@media screen and (min-width: 1024px) {  
     .salir{
        width: 14%;
         margin: 0% 43%;
        height: 35px;
        }
      .titulo{
        margin: 10% 5%;
        text-align: center;
        width: 90%;
        left: 5%;
        font-size: 2.5em;
        }
  } 

@media screen and (min-width: 780px) and (max-width:1024px){
     .salir{
        width: 18%;
         margin: 0% 41%;
        height: 33px;
        }
      .titulo{
        margin: 10% 5%;;
        text-align: center;
        width: 90%;
        left: 5%;
        font-size: 2.5em;
        }

}
@media screen and (min-width: 480px) and (max-width:780px){
     .salir{
        width: 24%;
         margin: 0% 38%;
        height: 30px;
        }
      .titulo{
        margin: 25% 5%;
        text-align: center;
        width: 90%;
        left: 5%;
        font-size: 1.8em;
        }

}

@media screen and (max-width:480px){ 
     .salir{
        width: 30%;
         margin: 0% 35%;
        height: 30px;
        }
      .titulo{
        margin: 25% 5%;
        text-align: center;
        width: 90%;
        font-size: 1.6em;
        }

}