@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:#fff;border:none;}
div#juego{padding:0;margin:0;height:100%;width:100%;background-color:#fff;}
h1,h2,h3{color:#058;font-weight:bold;}
h1{font-size:2.7em;}
h2{font-size:2em;}
h3{font-size:1.5em;}
canvas#canvas{background:#fff;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#pancom{position:absolute;top:5px;left:30%;margin:0;padding:6px 10px;color:#058;font-weight:bold;display:block;}
button#spancom{position:absolute;top:5px;left:30%;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,button#pancom,button#spancom{border:none;background:transparent;font-family:awesome;font-size:40px;border-radius:5px;cursor:pointer;}
button#son:hover,button#soff:hover,button#ayuda:hover,button#pancom:hover,button#spancom:hover{border:5px solid #058;padding:1px 5px;}
span.ejemploa{font-family:awesome;}
span.ejemploab{font-family:awesome;font-weight:bold;}
img#ejemploai{width:1.2em;}
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;}
button#volverjx{position:absolute;top:0;right:0;margin:0;padding:0;border:none;font-family:'awesome';font-weight:bold;border-radius:0;
                font-size:40px;width:45px;height:45px;background-color:#667;color:#fff;}
button#volverjx:hover{background-color:#eee;color:#060;}
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%;text-align:left;
                box-shadow: 5px 5px 5px #555;font-family:roboto;border:1px solid #eee;}
div#explicacion p,div#explicacion ul{font-size:1.5em;text-align:justify;line-height:150%;}
div#contanuncio{width:100%;height:90px;position:fixed;bottom:0;margin:0;}
div#anuncio{width:970px;height:90px;margin:0 auto;}
div#contanunciov{position:absolute;top:0;left:0;width:300px;height:600px;margin:0}
/* div#anunciov{width:100%;height:100%;margin:0;background-color:#fff;border:1px solid #999;} */
.horjuego{width:auto;max-width:100%;height:90px;}
.izqjuego{width:auto;max-width:100%;}
span#pla{font-family:awesome;}
@media(orientation:portrait){
  div#contanunciov, .izqjuego{display:none;}
  @media(max-width:1150px){
    button#son,button#soff,button#ayuda,button#pancom,button#spancom{font-size:30px;}
    a#edd img{width:144px;}
	h1{font-size:2.5em;}
    h2{font-size:1.7em;}
    h3{font-size:1.2em;}
    div#explicacion{top:10px;margin:0 5% 0 5%;padding:100px 10% 200px 10%;}
    div#explicacion p,div#explicacion ul{font-size:1.2em;}
  }
  @media(max-width:850px){
    button#son,button#soff,button#ayuda,button#pancom,button#spancom{font-size:20px;}
    button#son,button#soff{left:20%;}
    button#ayuda{right:20%;}
	button#pancom,button#spancom{left:10%;}
    a#edd img{width:96px;}
    a#edd{right:2px;}
    div#explicacion{margin:0;padding:80px 10% 200px 10%;} 
  }
  @media(max-width:650px){
	button#ayuda{right:30%;}
    button#son,button#soff,button#ayuda,button#pancom,button#spancom{font-size:16px;}
    a#edd img{width:77px;}
  }
  @media(max-width:520px){
	canvas#canvas{position:absolute;left:-14%;}
  }
  @media(max-width:450px){
    button#son,button#soff,button#ayuda,button#pancom,button#spancom{font-size:14px;}
    a#edd img{width:68px;}
    a#edd{right:0;}
	h1{font-size:2.2em;}
    h2{font-size:1.5em;}
    h3{font-size:1em;}
    div#explicacion p,div#explicacion ul{font-size:1em;}
	canvas#canvas{position:absolute;left:-21%;}
  }
  @media(max-width:420px){
	canvas#canvas{position:absolute;left:-24%;}
  }
  @media(max-width:402px){
	canvas#canvas{position:absolute;left:-27%;}
  }
  @media(max-width:387px){
	canvas#canvas{position:absolute;left:-29%;}
  }
  @media(max-height:833px){
	@media (max-aspect-ratio: 1/1.1) {canvas#canvas{position:absolute;left:0;}}
	@media (max-aspect-ratio: 1/1.5) {canvas#canvas{position:absolute;left:-7%;}}
    @media (max-aspect-ratio: 1/1.6) {canvas#canvas{position:absolute;left:-12%;}}
    @media (max-aspect-ratio: 1/1.8) {canvas#canvas{position:absolute;left:-23%;}}
    @media (max-aspect-ratio: 1/2.1) {canvas#canvas{position:absolute;left:-29%;}}
    @media (max-aspect-ratio: 1/2.2) {canvas#canvas{position:absolute;left:-31%;}}  
  }
}
@media(orientation:landscape){
  @media (max-aspect-ratio: 1.3/1) {div#contanunciov{width:160px;}}
  @media(max-height:1590px){
	@media (max-aspect-ratio: 1.7/1) {div#contanunciov{width:160px;}}  
  }
  @media(max-height:1090px){
	@media (max-aspect-ratio: 1.3/1) {div#contanunciov, .izqjuego{display:none;}}  
  }
  @media(max-height:929px){
	div#contanunciov{width:160px;}
    @media (max-aspect-ratio: 1.3/1) {div#contanunciov, .izqjuego{display:none;}}	
  } 
  @media(max-height:850px){
    button#son,button#soff,button#ayuda,button#pancom,button#spancom{font-size:30px;}
    a#edd img{width:144px;}
	h1{font-size:2.5em;}
    h2{font-size:1.7em;}
    h3{font-size:1.2em;}
    div#explicacion{top:10px;margin:0 5% 0 5%;padding:100px 10% 200px 10%;}
    div#explicacion p,div#explicacion ul{font-size:1.2em;} 
  }
  @media(max-height:695px){
    div#contanunciov, .izqjuego{display:none;}}  
  }
  @media(max-height:650px){
    button#son,button#soff,button#ayuda,button#pancom,button#spancom{font-size:20px;}
    a#edd img{width:96px;} 
  }
  @media(max-height:500px){
    div#contanuncio{height:60px;}
    div#anuncio{height:60px;}
	.horjuego{height:60px;}
	h1{font-size:2.2em;}
    h2{font-size:1.5em;}
    h3{font-size:1em;}
    div#explicacion p,div#explicacion ul{font-size:1em;}
  }
}