@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;}
@font-face{font-family:'Balsamiq Sans';src:url(../../fuentes/balsamiqsans.woff);}
html{height:100%;}
h1{color:#fa0;font-family:'Balsamiq Sans',cursive;font-weight: bold;
      text-shadow:-2px 0 #860,0 2px #860,2px 0 #860,0 -2px #860,3px 3px 5px #555;text-align:center;margin:0;/* */padding:90px 0;font-size:6vw; /* */}
h2,h3,h4{font-weight:bold;color:#094;}
h2{font-size:2.7em;}
h3{font-size:2em;}
h4{font-size:1.5em;}
strong{font-weight:bold;}
body{font-family:roboto, sans-serif;margin:0;padding:0;height:100%;background:linear-gradient(#cfe,#fff,#cfc);}
a{ text-decoration:none;}
div#pantini{width:100%;height:100%;}
div#apsumar{width:100%;height:100%;background:linear-gradient(#cfe,#fff,#cfc);}
button{cursor:pointer;}
div#niveles{position:relative;width:1400px;height:1000px;margin:0 auto;padding:0;}
button#empezar1{position:absolute;top:0;left:0;}
button#empezar2{position:absolute;top:0;right:0;}
button#empezar3{position:absolute;top:33%;left:0;}
button#empezar4{position:absolute;top:33%;right:0;}
button#empezar5{position:absolute;top:66%;left:calc(50% - 300px);}
button.empezar{font-size:5em;border:5px solid #264;padding:8px 2px;width:600px;border-radius:10px;display:block;
               background-color:#ced;color:#264;}
button.empezar:hover{background-color:#f5fffa;}
button#son{position:absolute;bottom:5px;left:50%;margin:0;padding:6px 10px;color:#264;font-weight:bold;display:block;}
button#soff{position:absolute;bottom:5px;left:50%;margin:0;padding:6px 10px;color:#264;font-weight:bold;display:none;}
button#pancom{margin:0;padding:6px 10px;color:#264;font-weight:bold;display:block;}
button#spancom{margin:0;padding:6px 10px;color:#264;font-weight:bold;display:none;}
button.pantcom{position:absolute;bottom:5px;left:30%;}
button.pantcomp{position:absolute;top:5px;right:100px;}
button#home{margin:0;padding:6px 10px;color:#264;font-weight:bold;display:none;}
button.home{position:absolute;top:5px;right:10px;}
button.home2{position:absolute;top:5px;right:10px;}
button#ayuda{position:absolute;bottom:5px;right:30%;margin:0;padding:6px 10px;color:#264;display:block;}
button#son,button#soff,button#ayuda,button#pancom,button#spancom,button#home{border:none;background:transparent;font-family:awesome;
    font-size:40px;border-radius:5px;}
button#son:hover,button#soff:hover,button#ayuda:hover,button#pancom:hover,button#spancom:hover,button#home:hover{
	border:5px solid #264;padding:1px 5px;}
button#edudiver{background:transparent;padding:5px;border:none;}
.dropdown{position:absolute;bottom:10px;right:20px;margin:0;display:block;z-index:51;}
.dropdown:hover button#edudiver{border:5px solid #008;padding:0;background-color:#d5d5d5;border-radius:5px;}
.dropdown-content{display:none;position:absolute;bottom:60px;background-color:#d5d5d5;width:100%;z-index:52;border-bottom:5px solid #008;}
.dropdown-content a{color:black;padding:16px;text-decoration:none;display:block;font-size:1.1em;}
.dropdown-content a:hover{background-color:#00e;color:#fff;}
.dropdown:hover .dropdown-content{display:block;}
button#volverj{text-align:center;padding:5px 20px;border:5px solid #264;border-radius:8px;background-color:#ced;color:#264;
               font-family:roboto;font-size:1.5em;display:block;margin:30px auto;}
button#volverj:hover{background-color:#f5fffa;;}
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:#667;}
div#explicacion{position:absolute;top:5%;margin:0 300px;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;z-index:55;max-height:calc(95% - 300px);overflow:scroll;}
div#explicacion p,div#explicacion ul{font-size:1.5em;text-align:justify;line-height:150%;}
button#bot1{position:absolute;top:10%;left:10%;}
button#bot2{position:absolute;top:10%;left:calc(50% - 22px);}
button#bot3{position:absolute;top:10%;right:10%;}
button#bot4{position:absolute;top:calc(50% - 22px);left:10%;}
button#bot5{position:absolute;top:calc(50% - 22px);left:calc(50% - 22px);}
button#bot6{position:absolute;top:calc(50% - 22px);right:10%;}
button#bot7{position:absolute;bottom:10%;left:10%;}
button#bot8{position:absolute;bottom:10%;left:calc(50% - 22px);}
button#bot9{position:absolute;bottom:10%;right:10%;}
div#juego{position:relative;width:955px;height:955px;margin:0 auto;display:none;}
div#bloqnuma{background-color:#ffe;position:absolute;top:10%;padding:0;border:1px solid #bbb;border-radius:20px;}
div#bloqnumb{background-color:#ffe;position:absolute;top:30%;padding:0;border-bottom:10px solid #000;border:1px solid #bbb;border-radius:20px;}
div#bloqnumc{background-color:#ffe;position:absolute;top:40%;padding:0;border:1px solid #bbb;border-radius:20px;display:none;}
p#lleva2{position:absolute;left:25%;color:#aaa;margin:0;z-index:10;}
div.bloqnum{width:30%;height:20%;left:50%;letter-spacing:20px;text-align:right;font-size:170px;}
div.bloqnum2{width:45%;height:20%;left:40%;letter-spacing:20px;text-align:right;font-size:170px;}
div.bloqnum3{width:45%;height:15%;left:40%;letter-spacing:20px;text-align:right;font-size:140px;}
div#bloqnumr{height:20%;position:absolute;top:52%;padding:0;}
div.bloqnumr{width:45%;height:20%;left:35%;letter-spacing:20px;text-align:right;font-size:170px;}
div.bloqnumr2{width:60%;height:20%;left:25%;letter-spacing:20px;text-align:right;font-size:170px;}
div.bloqnumr3{width:60%;height:15%;left:25%;letter-spacing:20px;text-align:right;font-size:140px;}
div#masmenos{background-color:#fff;width:10%;height:20%;position:absolute;left:80%;top:52%;z-index:10;}
div#signb{height:18%;position:absolute;top:32%;font-size:225px;text-align:center;}
div.sign{width:10%;left:40%;}
div.raya{position:absolute;top:50%;width:40%;height:2%;left:40%;}
div.sign2{width:10%;left:30%;}
div.raya2{position:absolute;top:50%;width:55%;height:2%;left:30%;}
div.raya3{position:absolute;top:55%;width:55%;height:1.7%;left:30%;}
div#rayan{background-color:#f90;border:2px solid #860;border-radius:10px;}
button#posizq,button#posder{font-family:awesome;width:50%;height:100%;font-size:140px;border:3px solid #aaa;
                            border-radius:10px;background-color:#eee;font-weight:bold;margin:0;position:absolute;}
button#posizq:hover,button#posder:hover{border-color:#777;background-color:#f2f2f2;}
div#poslat{position:absolute;left:-60%;top:20%;width:60%;height:60%;display:none;}
button#posizq{left:0;}
button#posder{right:0;}
div#bloqnuma p,div#bloqnumb p,div#bloqnumr p,div#bloqnumc p{margin:10px 0 0 0;padding:0;}
div#bloqnuma,div#bloqnumb,div#bloqnumc,div#signb,div#bloqnumr{color:#f90;font-family:'Balsamiq Sans',cursive;font-weight:bold;
      text-shadow:-2px 0 #860,0 2px #860,2px 0 #860,0 -2px #860,3px 3px 5px #555;display:none;line-height:100%;}
span#sumando3a,span#sumando3b{display:none;width:45%;}
span#sumando2a,span#sumando2b,span#sumando1a,span#sumando1b,span#sumando1c,span#sumando2c,span#respuesta,span#respuesta2,span#respuesta3{display:inline-block;}
div#btnnum{width:1400px;height:10%;position:absolute;left:calc(50% - 700px);top:85%;z-index:10;}
button.btnum{color:#264;border:5px solid #264;border-radius:10px;padding:2px 20px;font-size:8.4em;font-family:"roboto",sans-serif;
             margin:5px;display:inline-block;background-color:#ced;}
button.btnum:hover{background-color:#f5fffa;}			 
button#comprobar{padding:10px 20px;border:5px solid #264;border-radius:10px;font-size:4em;
                 color:#264;background-color:#ced;display:none;}
button#comprobar:hover{background-color:#f5fffa;}
div#marcador{position:absolute;top:10%;right:10px;width:3%;height:60%;background-color:#ccc;border:2px solid #aaa;border-radius:10px;
             display:none;box-shadow:3px 3px 3px #777;}
div#puntuacion{top:2%;left:10%;width:80%;height:92%;background-color:#555;position:absolute;}
div#puntnum{position:absolute;bottom:1%;left:10%;width:80%;height:4%;background-color:#555;text-align:center;color:#ff0;padding:1px 0;
            font-size:40px;}
div#p1,div#p2,div#p3,div#p4,div#p5,div#p6,div#p7,div#p8,div#p9,div#p10{width:100%;height:10%;}				 
div#alertOK{display:none;position:fixed;width:60%;height:60%;top:20%;left:20%;border:8px solid #0e0;border-radius:20px;
            background-color:#fff;font-size:7vw;text-align:center;box-shadow:8px 8px 10px #777;color:#090;z-index:20;}
div#alertOK p{margin:80px 0;}
button#salir{position:absolute;left:20%;bottom:15%;border:5px solid #080;border-radius:10px;width:250px;padding:0;display:block;background-color:#fff;}
button#seguir{position:absolute;right:20%;bottom:15%;border:5px solid #080;border-radius:10px;width:250px;padding:0;display:block;background-color:#fff;}
button#salir:hover span.simbolo,button#seguir:hover span.simbolo{color:#0d0;}
button#salir:hover span.textbtn,button#seguir:hover span.textbtn{color:#000;background-color:#0f0;}
button#salir:hover,button#seguir:hover{border:0.6vh solid #0d0;}
span.simbolo{font-size:150px;font-family:awesome;font-weight:bold;display:block;color:#d80;}
span.textbtn{width:100%;background-color:#080;margin:0;padding:2px 0;color:#fff;font-size:2em;font-family:roboto, sans-serif;display:block;}
div#alertKO{display:none;position:fixed;width:80%;height:80%;top:10%;left:10%;border:none;font-size:40vw;text-align:center;color:#f00;
			font-family:'Balsamiq Sans',cursive;font-weight: bold;z-index:20;
            text-shadow:-3px 0 #a00,0 3px #a00,3px 0 #a00,0 -3px #a00,5px 5px 8px #555;}
div#alertKO p{margin:0;}
@media(max-width:1800px){
  div#explicacion{top:30px;margin:0 160px;}	
}
@media(max-width:1190px){
  div#explicacion{top:20px;margin:0 80px;}
  div#explicacion p,div#explicacion ul{font-size:1.3em;}  
}
@media(max-width:850px){
  div#explicacion{top:10px;margin:0 30px;}
  div#explicacion p,div#explicacion ul{font-size:1.1em;}
  h4{font-size:1.2em;}
  h3{font-size:1.5em;}
  h2{font-size:2.2em;}  
}
@media(max-width:500px){
  div#explicacion{margin:0;}
  div#explicacion p,div#explicacion ul{font-size:1em;} 
}
@media(orientation:landscape){
  h1{padding:10vh 0;font-size:12vh;}
  div#niveles{width:74vh;height:53vh;}
  button.empezar{font-size:4vh;width:32vh;border:0.6vh solid #264;padding:0.8vh 0.2vh;border-radius:1.2vh;}
  button#empezar5{left:calc(50% - 16vh);}
  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;}
  button#ayuda,button#pancom,button#spancom,button#home{font-size:4.4vh;padding:0.7vh 1.2vh;}
  button#son,button#soff{font-size:4.4vh;padding:0.7vh;}
  button#ayuda:hover,button#pancom:hover,button#spancom:hover,button#home:hover{border:0.6vh solid #264;padding:0.1vh 0.6vh;}
  button#son:hover,button#soff:hover{border:0.6vh solid #264;padding:0.1vh;}
  div#signb{font-size:13.3vh;}
  div#juego{width:100vh;height:100vh;}
  div.bloqnum,div.bloqnum2{font-size:18vh;letter-spacing:2.1vh;}
  div.bloqnum3{font-size:14.8vh;letter-spacing:2.1vh;}
  div#rayan{border-radius:2vh;border:0.3vh solid #860;}
  div.bloqnumr,div.bloqnumr2{font-size:18vh;letter-spacing:2.1vh;}
  div.bloqnumr3{font-size:14.8vh;letter-spacing:2.1vh;}  
  #lleva2{font-size:18vh;top:208%;}
  div#bloqnuma,div#bloqnumb,div#bloqnumc{border-radius:2vh;}
  div#bloqnuma,div#bloqnumb,div#bloqnumc,div#signb,div#bloqnumr{text-shadow:-0.2vh 0 #860,0 0.2vh #860,0.2vh 0 #860,0 -0.2vh #860,
                3px 3px 5px #555;}
  div#bloqnuma p,div#bloqnumb p,div#bloqnumr p,div#bloqnumc p{margin:1.1vh 0 0 0;}
  button#posizq,button#posder{font-size:9vh;border:0.4vh solid #aaa;border-radius:1.1vh;}
  div#btnnum{left:1vh;width:98vh;font-size:3.1vh;}
  button.btnum{padding:0.2vh 1.5vh;font-size:8vh;margin:0.2vh;border:0.6vh solid #264;border-radius:1.1vh;} 
  button#comprobar{position:absolute;bottom:17%;right:2%;font-size:4vh;padding:0.8vh 2.2vh;border:0.6vh solid #264;border-radius:1.1vh;}
  div#marcador{border-radius:1.1vh;}
  div#puntnum{font-size:2.2vh;}
  div#alertKO{font-size:80vh;}
  div#alertOK{border-radius:2.3vh;border:1vh solid #0e0;}
  div#alertOK p{margin:9vh 0;}
  button#salir,button#seguir{width:17vh;border:0.6vh solid #080;border-radius:1.1vh;}
  span.simbolo{font-size:10.1vh;line-height:120%;}
  span.textbtn{font-size:2vh;padding:0.2vh 0;}  
  @media(max-height:500px){
	h1{padding:8vh 0;font-size:10vh;}
    button.empezar{font-size:6vh;width:42vh;}
    button#empezar5{left:calc(50% - 21vh);}
	div#niveles{width:94vh;}
	button#son,button#soff,button#ayuda,button#pancom,button#spancom,button#home{font-size:6.4vh;}
	button#ayuda{right:90%;}
    button#edudiver img{width:44vh;}
    .dropdown-content{bottom:12vh;}
    .dropdown-content a{padding:3.2vh;font-size:3.9vh;}
    .dropdown{bottom:0.5vh;}
    button#comprobar{font-size:6vh;bottom:67%;right:unset;left:2%;}
	div#marcador{width:4%;height:80%;border-radius:1.1vh;}
    div#puntnum{font-size:2.9vh;}	
  }
  @media(max-height:300px){
	div#btnnum{font-size:2.2vh;}  
    div#marcador{width:4.5%;}
    div#puntnum{font-size:3.7vh;height:5%;} 
	div#puntuacion{height:90%;}
  }
}
@media(orientation:portrait){
  h1{padding:14vh 0;font-size:10vw;}
  div#niveles{width:74vw;height:53vw;}
  button.empezar{font-size:4vw;width:32vw;border:0.6vw solid #264;padding:0.8vw 0.2vw;border-radius:1.2vw;}
  button#empezar5{left:calc(50% - 16vw);}
  button#edudiver{padding:0.5vw;}
  button#edudiver img{width:22vw;}
  .dropdown{bottom:1vw;right:2vw;}
  .dropdown:hover button#edudiver{border:0.5vw solid #008;border-radius:0.5vw;padding:0;}
  .dropdown-content{bottom:6vw;border-bottom:0.5vw solid #008;}
  .dropdown-content a{padding:1.6vw;font-size:1.8vw;} 
  button#ayuda,button#pancom,button#spancom,button#home{font-size:4.4vw;padding:0.7vh 1.2vw;}
  button#son,button#soff{font-size:4.4vw;padding:0.7vw;}
  button#ayuda:hover,button#pancom:hover,button#spancom:hover,button#home:hover{border:0.6vw solid #264;padding:0.1vw 0.6vw;}
  button#son:hover,button#soff:hover{border:0.6vw solid #264;padding:0.1vw;}
  div#signb{font-size:13.3vw;}
  div#juego{width:100vw;height:100vw;margin:0 auto 14vh auto;top:10vh;}
  div.bloqnum,div.bloqnum2{font-size:18vw;letter-spacing:2.1vw;}
  div.bloqnum3{font-size:14.8vw;letter-spacing:2.1vw;}
  div#rayan{border-radius:2vw;border:0.3vw solid #860;}
  div.bloqnumr,div.bloqnumr2{font-size:18vw;letter-spacing:2.1vw;}
  div.bloqnumr3{font-size:14.8vw;letter-spacing:2.1vw;}  
  #lleva2{font-size:18vw;top:208%;}
  div#bloqnuma,div#bloqnumb,div#bloqnumc{border-radius:2vw;}
  div#bloqnuma,div#bloqnumb,div#bloqnumc,div#signb,div#bloqnumr{text-shadow:-0.2vw 0 #860,0 0.2vw #860,0.2vw 0 #860,0 -0.2vw #860,
                3px 3px 5px #555;}
  div#bloqnuma p,div#bloqnumb p,div#bloqnumr p,div#bloqnumc p{margin:1.1vw 0 0 0;}
  button#posizq,button#posder{font-size:9vw;border:0.4vw solid #aaa;border-radius:1.1vw;}
  div#btnnum{left:1vw;width:98vw;font-size:3.1vw;}
  button.btnum{padding:0.2vw 1.5vw;font-size:8vw;margin:0.2vw;border:0.6vw solid #264;border-radius:1.1vw;} 
  button#comprobar{font-size:4vw;padding:0.8vw 2.2vw;border:0.6vw solid #264;border-radius:1.1vw;margin:0 auto;}
  div#marcador{border-radius:1.1vw;width:5%;right:1%;height:60vw;}
  div#puntnum{font-size:2.2vw;}
  div#alertKO{font-size:65vw;top:calc(45% - 32vw);left:5%;}
  div#alertOK{border-radius:2.3vw;border:1vw solid #0e0;width:80%;height:40%;top:25%;left:10%;font-size:8vw;}
  div#alertOK p{margin:9vw 0;}
  button#salir,button#seguir{width:17vw;border:0.6vw solid #080;border-radius:1.1vw;}
  button#salir:hover,button#seguir:hover{border:0.6vw solid #0d0;}
  span.simbolo{font-size:10.1vw;line-height:120%;}
  span.textbtn{font-size:2vw;padding:0.2vw 0;}
  @media(min-aspect-ratio:3/4){
	div#juego{margin:0 auto 4vh auto;top:0;}	
  }  
  @media(max-width:500px){
    button.empezar{font-size:6vw;width:42vw;}
    button#empezar5{left:calc(50% - 21vw);}
	div#niveles{width:94vw;}
	button#son,button#soff,button#ayuda,button#pancom,button#spancom,button#home{font-size:6.4vw;}
	button#ayuda{right:90%;}
    button#edudiver img{width:44vw;}
    .dropdown-content{bottom:12vw;}
    .dropdown-content a{padding:3.2vw;font-size:3.9vw;}
    .dropdown{bottom:10vw;}
    button#comprobar{font-size:6vw;}
	div#marcador{width:6%;border-radius:1.1vw;}
    div#puntnum{font-size:2.9vw;}
	div#puntuacion{height:91%;}
	div#alertOK{width:98%;left:0;}
    @media(min-aspect-ratio:5/8){
	  h1{padding:8vh 0;}	
	}
  }
  @media(max-width:300px){
	div#btnnum{font-size:2.2vw;}  
    div#marcador{width:7%;}
    div#puntnum{font-size:3.7vw;height:5%;} 
	div#puntuacion{height:90%;}
  }
}