@font-face{font-family:'awesome';src:url(../../fuentes/fa-solid-900.woff2);font-weight:bold;}
@font-face{font-family:'awesome';src:url(../../fuentes/fa-regular-400.woff2);}
@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;}
html{height:100%;}
body{font-family:roboto,sans-serif;background-color:#eef0f6;margin:0;}
#pyf{background-color:#eef0f6;}
.cajagrande{margin-left:auto;margin-right:auto;}
#instrucciones{text-align:justify;display:none;}
h1{font-weight:bold;text-align:center;color:#006;margin:0;position:relative;z-index:96;}
h2{font-size:3em;font-weight:bold;}
table{border-collapse:collapse;border:5px solid #fff;color:#ffb;text-align:center;box-shadow:4px 4px 4px #888;}
tr{background-color:#126;border:4px solid #fff;}
td,th{border-left:1px solid #ddf;border-right:1px solid #ddf;padding:2px;}
th{background-color:#014;color:#eef;}
button{cursor:pointer;font-family:roboto,sans-serif;}
#nentrante{border:3px solid #888;background-color:#fff;position:absolute;margin:0;text-align:center;border-radius:5px;z-index:1;
           box-shadow:2px 2px 2px #888;}
#escri{position:relative;}
#nbot0,#nbot1,#nbot2,#nbot3,#nbot4,#nbot5,#nbot6,#nbot7,#nbot8,#nbot9{display:none;background-color:#fff;}
#tapa{position:fixed;background-color:#000;width:100%;height:100%;display:none;opacity:0.7;z-index:90;}
#inicial{position:fixed;background-color:#eef0f6;width:100%;height:100%;z-index:95;}
#alerta{position:fixed;background-color:#fff;display:none;border:5px solid #f00;border-radius:10px;margin:0;padding:0;
        box-shadow:5px 5px 5px #222;z-index:91;}
#alertag{position:fixed;background-color:#fff;display:none;border:10px solid #0f0;z-index:91;border-radius:10px;margin:0;padding:0;
         box-shadow:5px 5px 5px #222;}
#alertg{position:fixed;background-color:transparent;display:none;border:0;z-index:91;left:0;margin:0;padding:0;bottom:50%;
        font-weight:bold;text-align:center;width:100%;color: #fff;text-shadow:8px 8px #555;}
button.btnum,button.btnnum{text-align:center;font-weight:bold;border-radius:35px;background-color:#eef0f6;}
button.btnum{border:5px solid #777;color:#555;box-shadow:2px 2px 2px #888;}
button.btnum:hover,#comprobar:hover,#borrar:hover,#rendirse:hover{background-color:#fff;border-color:#555;color:#333;}
button.btnnum{border:5px solid #aaa;color:#aaa;}
div#teclas{margin-left:auto;margin-right:auto;}
#comprobar,#borrar,#rendirse{text-align:center;border:5px solid #777;color:#555;border-radius:20px;box-shadow:2px 2px 2px #888;background-color:#eef0f6;}
#empezar,#comjugar,#noayuda{text-align:center;border:5px solid #777;color:#555;border-radius:20px;box-shadow:2px 2px 2px #888;background-color:#eef0f6;}
#empezar:hover,#comjugar:hover,#noayuda:hover{background-color:#fff;border-color:#555;color:#333;}
#palerta,#palertag{text-align:center;}
#nuevap,#salir,#nuevapg,#salirg{text-align:center;border:5px solid #777;color:#555;border-radius:15px;background-color:#eef0f6;}
#nuevap:hover,#salir:hover,#nuevapg:hover,#salirg:hover{background-color:#fff;border-color:#555;color:#333;}
button#son,button#soff,button#pancom,button#spancom{border:none;background:transparent;font-family:awesome;font-weight:bold;}
button#son,button#soff{position:absolute;color:#555;}
button#pancom,button#spancom{position:absolute;color:#555;z-index:96;}
button#son:hover,button#soff:hover,button#pancom:hover,button#spancom:hover{color:#111;}
button#edudiver{background:transparent;padding:0.5vh;border:none;}
.dropdown{position:absolute;bottom:1vh;right:2vh;margin:0;display:block;z-index:51;}
.dropdown:hover button#edudiver{border:0.5vh solid #008;padding:0;background-color:#d5d5d5;border-radius:0.5vh;}
.dropdown-content{display:none;position:absolute;bottom:6vh;background-color:#d5d5d5;width:100%;z-index:52;border-bottom:0.5vh solid #008;}
.dropdown-content a{color:black;padding:1.6vh;text-decoration:none;display:block;font-size:1.8vh;}
.dropdown-content a:hover{background-color:#00e;color:#fff;}
.dropdown:hover .dropdown-content{display:block;}
button#soff{display:none;}
button#noayudax{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#noayudax:hover{background-color:#eee;color:#667;}
div#instrucciones{position:absolute;top:5%;background-color:#fff;display:none;text-align:left;box-shadow:5px 5px 5px #555;
                  font-family:roboto;border:1px solid #eee;z-index:97;overflow:scroll;}
div#instrucciones p,div#instrucciones ul{font-size:2em;text-align:justify;line-height:150%;}
@media(orientation:portrait){  
  .cajagrande{width:98%;padding-top:calc(50vh - 64vw);margin-left:1%;margin-right:1%;} 
  .h1ini{font-size:10vw;padding:17.2vw 10px 0 10px;}
  .h1normal{font-size:4.5vw;padding:2.8vw 10px 1.4vw 10px;}
  h2{font-size:2.5em;}
  table{min-width:100px;width:100%;}
  tr{height:6.8vw;font-size:4.8vw;}
  #escribe{font-size:3.8vw;} 
  #nentrante{width:14.4vw;height:4.8vw;font-size:3.8vw;position:absolute;left:59vw;top:-3px;border-radius:5px;}
  #alerta{width:80vw;height:50vw;top:calc(50% - 35vw);left:calc(50% - 40vw);border-radius:10px;z-index:91;} 
  #alertag{width:80vw;height:50vw;top:50%;left:calc(50% - 41.8vw);border-radius:2vw;z-index:91;border:1.8vw solid #0f0;}
  #alertg{font-size:12vw;} 
  button.btnum,button.btnnum{margin:15px;font-size:40px;width:70px;height:70px;border-radius:35px;}
  div#teclas{width:1040px;}
  #comprobar,#borrar,#rendirse{margin:90px 50px;font-size:35px;height:60px;padding:0 40px;border-radius:20px;}
  #empezar,#comjugar,#noayuda{margin:3.6vh 0;width:30vh;font-size:3.7vh;height:6.3vh;border-radius:2vh;padding:0 4.3vh;
                              border:0.6vh solid #777;}
  #palerta{font-size:4vw;margin:13vw 10px 10vw 10px;}
  #palertag{font-size:4vw;margin:11vw 10px 10vw 10px;}
  #nuevap,#salir,#nuevapg,#salirg{margin:0 8.5vw;font-size:3.5vw;height:7vw;padding:0 3vw;border-radius:1.5vw;border:0.8vw solid #777;}
  #botcentral{width:30vh;margin:45vh auto 10px auto;}
  button#son,button#soff{bottom:2vw;left:3%;}
  button#pancom,button#spancom{top:1.6vh;left:5%;}
  button#son,button#soff,button#pancom,button#spancom{font-size:5.6vw;padding:0.6vw;}
  div#instrucciones{top:5vh;margin:0 5%;padding:10vh 10% 20vh 10%;box-shadow:5px 5px 8px #555;z-index:97;}
  div#instrucciones p,div#instrucciones ul{font-size:1.5em;}
  #noayuda{margin:7vh auto;display:block;}
  button#noayudax{font-size:4.3vh;width:4.8vh;height:4.8vh;}
  button#edudiver{padding:0.6vw;}
  button#edudiver img{width:30vw;}
  .dropdown{bottom:2vw;right:3vw;}
  .dropdown:hover button#edudiver{border:0.6vw solid #008;border-radius:0.5vh;padding:0;}
  .dropdown-content{bottom:8.6vw;border-bottom:0.6vw solid #008;}
  .dropdown-content a{padding:2.2vw;font-size:3.7vw;}
  .dropdown-content a:hover{background-color:#00e;}
  @media(max-width:1040px){
	.cajagrande{padding-top:calc(50vh - 70vw);}
	.h1normal{padding:2vw 10px 1.5vw 10px;}
	tr{height:5.6vw;font-size:3.2vw;}
	#escribe{font-size:3.8vw;margin:3.8vw 1vw;}
	#nentrante{width:14vw;height:4.5vw;font-size:3.8vw;left:60vw;}
	button.btnum,button.btnnum{margin:1.7vw;font-size:4.7vw;width:7.9vw;height:7.9vw;border-radius:4vw;}
    div#teclas{width:60vw;}
    #comprobar,#borrar,#rendirse{padding:0 3.4vw;margin:3.4vw;font-size:3.4vw;height:6vw;border-radius:1.5vw;}
	#rendirse{margin:2.2vw 2vw 1vw 19vw;}	
  }
  @media(max-width:750px){
	table{border:4px solid #fff;}
	tr{font-size:3.2vw;border:3px solid #fff;}
    div#teclas{width:61vw;}    
    button.btnum{border:4px solid #777;}
	button.btnnum{border:4px solid #aaa;}
    #comprobar,#borrar,#rendirse{border:4px solid #777;}  
  }
  @media(max-width:455px){
	h2{font-size:2em;}
	table{border:3px solid #fff;}
    tr{border:2px solid #fff;}	
    button.btnum,button.btnnum {font-size:4.5vw;}
    button.btnum{border:3px solid #777;}
    button.btnnum{border:3px solid #aaa;}
    #comprobar,#borrar,#rendirse{border:3px solid #777;}
	#noayuda{width:25vh;padding:0;}
	div#instrucciones{margin:0;}
    div#instrucciones p,div#instrucciones ul{font-size:1.3em;}
    button#edudiver img{width:40vw;}
    .dropdown-content{bottom:11vw;}
    .dropdown-content a{padding:3.2vw;font-size:5.7vw;}	
  }
  @media(max-width:360px){
	div#teclas{width:65vw;}
    button.btnum{border:2px solid #777;}
	button.btnnum{border:2px solid #aaa;}
    #comprobar,#borrar,#rendirse{border:2px solid #777;}
  }	
}
@media(max-aspect-ratio: 1/1.75){ /* x1,6 */
  .cajagrande{width:98%;padding-top:calc(50vh - 87.5vw);margin-left:1%;margin-right:1%;} 
  .h1normal{font-size:6.5vw;padding:2.8vw 10px 1.4vw 10px;}
  table{min-width:100px;width:100%;}
  tr{height:6.8vw;font-size:4.8vw;}
  #escribe{font-size:3.8vw;} 
  #nentrante{width:14.4vw;height:4.8vw;font-size:3.8vw;position:absolute;left:59vw;top:-3px;border-radius:5px;}
  #alerta{width:80vw;height:50vw;top:calc(50% - 35vw);left:calc(50% - 40vw);border-radius:10px;} 
  #alertag{width:80vw;height:50vw;top:50%;left:calc(50% - 41.8vw);border-radius:2vw;z-index:91;border:1.8vw solid #0f0;}
  #alertg{font-size:12vw;} 
  button.btnum,button.btnnum{margin:2.7vw;font-size:7.5vw;width:12.6vw;height:12.6vw;border-radius:6.3vw;}
  div#teclas{width:98vw;}
  #comprobar,#borrar,#rendirse{padding:0 5.4vw;margin:5.4vw;font-size:5.4vw;height:9.6vw;border-radius:2.4vw;}
  #palerta{font-size:4vw;margin:13vw 10px 10vw 10px;}
  #palertag{font-size:4vw;margin:11vw 10px 10vw 10px;}
  #nuevap,#salir,#nuevapg,#salirg{margin:0 8.5vw;font-size:3.5vw;height:7vw;padding:0 3vw;border-radius:1.5vw;border:0.8vw solid #777;}
  #rendirse{margin:3.5vw 6.2vw 1.6vw 30vw;}
  @media(max-width:260px){
    button.btnum,button.btnnum{margin:2.4vw;}
  }
}
@media(orientation:landscape){  
  .cajagrande{margin-left:auto;margin-right:auto;width:120vh;max-width:100%;padding-top:0;} 
  .h1ini{font-size:10vh;padding:17.2vh 10px 0 10px;}
  .h1normal{font-size:4.2vh;padding:3.2vh 10px 1.5vh 10px;}
  table{min-width:200px;width:100%;border:0.6vh solid #fff;}
  tr{height:5.3vh;font-size:3.1vh;border:0.5vh solid #fff;}
  #escribe{font-size:2.7vh;} 
  #nentrante{width:11vh;height:3.2vh;font-size:2.7vh;left:47vh;position:absolute;top:-3px;border-radius:5px;}
  #alerta{width:79.5vh;height:48vh;top:calc(50% - 24.7vh);left:calc(50% - 40.4vh);border-radius:1.5vh;border:0.7vh solid #f00;} 
  #alertag{top:50%;width:79.5vh;height:41vh;left:calc(50% - 40.4vh);border-radius:1.5vh;border:1vh solid #0f0;}
  #alertg{font-size:15vh;} 
  button.btnum,button.btnnum{margin:1.9vh;font-size:4.5vh;width:7.4vh;height:7.4vh;border-radius:3.7vh;padding:0;}
  div#teclas{width:120vh;display:none;}
  #comprobar,#borrar,#rendirse{margin:1.6vh 7.5vh;font-size:3.7vh;height:6.3vh;border-radius:2vh;padding:0 4.3vh;border:0.6vh solid #777;}
  #empezar,#comjugar,#noayuda{margin:3.6vh 0;width:30vh;font-size:3.7vh;height:6.3vh;border-radius:2vh;padding:0 4.3vh;
                              border:0.6vh solid #777;}
  #palerta{font-size:3.9vh;margin:12.7vh 10px 9.5vh 10px;}
  #palertag{font-size:3.9vh;margin:9vh 10px 7vh 10px;}
  #nuevap,#salir,#nuevapg,#salirg{margin:0 9.1vh;font-size:3.1vh;height:7.3vh;padding:0 3.1vh;border-radius:2vh;border:0.6vh solid #777;}
  button.btnum{border:0.6vh solid #777;}
  button.btnnum{border:0.6vh solid #aaa;}
  #botcentral{width:30vh;margin:45vh auto 10px auto;}
  button#son,button#soff{bottom:1.6vh;left:5%;}
  button#pancom,button#spancom{top:1.6vh;left:5%;}
  button#son,button#soff,button#pancom,button#spancom{font-size:4.2vh;padding:0.6vh 1.1vh;}
  div#instrucciones{top:5vh;margin:0 5%;padding:10vh 10% 20vh 10%;box-shadow:5px 5px 8px #555;z-index:97;}
  #noayuda{margin:7vh auto;display:block;}
  button#noayudax{font-size:4.3vh;width:4.8vh;height:4.8vh;}
  button#edudiver{padding:0.5vh;}
  button#edudiver img{width:22vh;}
  .dropdown{bottom:1vh;right:2vh;}
  .dropdown:hover button#edudiver{border:0.5vh solid #008;border-radius:0.5vh;padding:0;}
  .dropdown-content{bottom:6vh;border-bottom:0.5vh solid #008;}
  .dropdown-content a{padding:1.6vh;font-size:1.8vh;}
  .dropdown-content a:hover{background-color:#00e;}  
  @media(max-height:1550px){
	h2{font-size:2.6em;}
    div#instrucciones p,div#instrucciones ul{font-size:1.5em;}  
  }
  @media(max-height:450px){
    button.btnum,button.btnnum{margin:1.7vh;}
	h2{font-size:2em;}
    div#instrucciones p,div#instrucciones ul{font-size:1.1em;}
    button#edudiver img{width:40vh;}
    .dropdown-content{bottom:11vh;}
    .dropdown-content a{padding:3.2vh;font-size:5.7vh;}	
  }
  @media(max-height:300px){
    button.btnum,button.btnnum{margin:1.2vh;}
	#comprobar,#borrar,#rendirse{margin: 1.6vh 7.1vh;}
	h2{font-size:1.5em;}
    div#instrucciones p,div#instrucciones ul{font-size:1em;}
  }
}