@font-face{font-family:'roboto';src:url(../../fuentes/roboto.woff2);}
@font-face{font-family:'roboto';src:url(../../fuentes/roboto-latin-700.woff);font-weight:bold;}
@font-face{font-family:'awesome';src:url(../../fuentes/fa-regular-400.woff2);}
@font-face{font-family:'awesome';src:url(../../fuentes/fa-solid-900.woff2);font-weight:bold;}
body{margin:0; padding:0;text-align:center;display:block;font-family:roboto;background-color:#ffd;border:none;}
h1,h2{color:#058;}
canvas#canvas{background:#ffd;margin:0;padding:0;border:none;}
button#son{position:absolute;top:5px;left:40%;margin:0;padding:6px 10px;color:#058;font-weight:bold;display:block;}
button#soff{position:absolute;top:5px;left:40%;margin:0;padding:6px 10px;color:#058;font-weight:bold;display:none;}
button#ayuda{position:absolute;top:5px;right:40%;margin:0;padding:6px 10px;color:#058;display:block;}
button#son,button#soff,button#ayuda{border:none;background:transparent;font-family:awesome;font-size:40px;border-radius:5px;cursor:pointer;}
button#son:hover,button#soff:hover,button#ayuda:hover{border:5px solid #058;padding:1px 5px;}
button#volverj{text-align:center;padding:5px 20px;border:5px solid #058;border-radius:8px;background-color:#cef;
               cursor:pointer;margin-top:30px;font-family:roboto;font-size:25px;color:#058;}
button#volverj:hover{background-color:#eff;}
a#edd{position:absolute;top:10px;right:10%;margin:0;padding:0;color:#058;display:block;}
div#explicacion{position:absolute;top:60px;margin:0 10% 250px 10%;background-color:#fff;display:none;padding:100px 10% 200px 10%;
                box-shadow: 5px 5px 5px #555;font-family:roboto;}
div#explicacion p{font-size:1.5em;text-align:justify;line-height:150%;}

div#contanuncio{width:100%;height:90px;position:fixed;bottom:50px;}
div#anuncio{width:970px;height:90px;margin:0 auto;}
.horjuego{width:auto;max-width:100%;height:90px;}
div#avcookie{position:fixed;bottom:0;left:0;width:80%;margin:0;background-color:#fff;padding:30px 10%;z-index:10;opacity:0.92;filter:alpha(opacity=92);box-shadow:0 -3px 8px #444;line-height: 1.3em;}
form#fcook{display:block;width:500px;margin:10px auto;}
form#fcook a{font-family: Arial, verdana, sans-serif;font-size:1em;text-decoration:none;border:none;padding:7px 14px;margin:20px;cursor:pointer;background-color:#00f;color:#fff;border-radius:5px;}
form#fcook input[type=submit], form#fcook button{font-family: Arial, verdana, sans-serif;font-size:1em;border:none;padding:7px 14px;margin:20px;cursor:pointer;background-color:#00f;color:#fff;border-radius:5px;}
form#fcook a:hover{background-color:#0a0;font-weight:normal;}
form#fcook input[type=submit]:hover, form#fcook button:hover{background-color:#0a0;}
@media(orientation:portrait){
  @media(max-width:1150px){
    button#son,button#soff,button#ayuda{font-size:30px;}
    a#edd img{width:144px;}
    div#explicacion{top:10px;margin:0 5% 0 5%;padding:100px 10% 200px 10%;}
    div#explicacion p{font-size:1.2em;}
  }
  @media(max-width:850px){
    button#son,button#soff,button#ayuda{font-size:20px;}
    button#son,button#soff{left:20%;}
    button#ayuda{right:20%;}
    a#edd img{width:96px;}
    a#edd{right:2px;}
    div#explicacion{margin:0;padding:80px 10% 200px 10%;} 
  }
  @media(max-width:650px){
    button#son,button#soff,button#ayuda{font-size:16px;}
    a#edd img{width:77px;}
  }
  @media(max-width:450px){
    button#son,button#soff,button#ayuda{font-size:14px;}
    a#edd img{width:68px;}
    a#edd{right:0;}
    div#explicacion p{font-size:1em;}
  }
}
@media(orientation:landscape){
  @media(max-height:850px){
    button#son,button#soff,button#ayuda{font-size:30px;}
    a#edd img{width:144px;}
    div#explicacion{top:10px;margin:0 5% 0 5%;padding:100px 10% 200px 10%;}
    div#explicacion p{font-size:1.2em;} 
  }
  @media(max-height:650px){
    button#son,button#soff,button#ayuda{font-size:20px;}
    a#edd img{width:96px;} 
  }
  @media(max-height:500px){
    div#contanuncio{height:60px;bottom:0;}
    div#anuncio{height:60px;}
    .horjuego{height:60px;}
    div#explicacion p{font-size:1em;}
  }
}
@media(max-width:499px){
  form#fcook{width:350px;margin:10px auto;}
  form#fcook a{margin:20px 8px;}
  form#fcook input[type=submit], form#fcook button{margin:20px 8px;}
}
@media(max-width:360px){
  form#fcook{width:300px;}
}