body{font-family:'noto sans',sans-serif;background:#9bd url("imagenes/papel1920.jpg") no-repeat left top; background-attachment: fixed;background-size:100% 100%;min-height:100%;max-width:1920px;}
@font-face{font-family:'noto sans';src:url(../../fuentes/notosans.woff2);}
@font-face{font-family:'roboto';src:url(../../fuentes/roboto.woff2);}
@font-face{font-family:'Balsamiq Sans';src:url(../../fuentes/balsamiqsans.woff);}
h1{color:#046;font-size:60px;font-family:'Balsamiq Sans',cursive;text-shadow: 3px 3px 6px #777;font-weight: bold;}
h2{color:#046;font-size:30px;font-family:'Balsamiq Sans',cursive;font-weight: bold;}
strong{font-weight:bold;}
table{border-collapse:collapse;letter-spacing:4px;font-size:150px;color:#0ec;font-family:'Balsamiq Sans',cursive;height:50%;font-weight: bold;margin:0 220px 0 140px;
      text-shadow:-2px 0 #555,0 2px #555,2px 0 #555,0 -2px #555,3px 3px 5px #555;}
table td{min-width:100px;padding:0;min-height:60px;line-height:100%;text-align:center;}
td#l1,td#l2,td#l3{font-size:40px;color:#999;}
td#l0{font-size:2px;padding-top:20px;padding-bottom:20px;color:#cdf;text-shadow:none;}
td#s3, td#i3, td#i2{color:#f00;}
tr#r{border-top:20px solid #000;min-height:70px;}
div#fin{display:none;position:fixed;left:33%;top:25%;width:27%;border:7px solid #0f0;border-radius:10px;background-color:#fff;box-shadow:5px 5px 7px #555;z-index:20;padding:60px;}
div#the{display:none;position:fixed;left:33%;top:25%;width:27%;border:7px solid #f00;border-radius:10px;background-color:#fff;box-shadow:5px 5px 7px #555;z-index:20;padding:60px;}
div#the p, div#fin p{font-size:24px;}
div#botonest{margin:0 auto;text-align:center;line-height:320%;}
a#volver{text-decoration:none;font-family:'noto sans',sans-serif;font-size:20px;background-color:#f90;border:2px solid #000;border-radius:5px;padding:5px 10px;font-weight: bold;
       margin:0;cursor:pointer;box-shadow:3px 3px 5px #555;color:#000;position:absolute;top:0;left:0;}
a.btnt{text-decoration:none;font-family:'noto sans',sans-serif;font-size:20px;background-color:#f90;border:2px solid #000;border-radius:5px;padding:5px 10px;font-weight: bold;
       margin:20px 20px;cursor:pointer;box-shadow:3px 3px 5px #555;color:#000;}
.cancelalert{font-family:'noto sans',sans-serif;font-size:20px;background-color:#f90;border:2px solid #000;border-radius:5px;padding:5px 10px;font-weight: bold;margin:20px 40%;
           cursor:pointer;box-shadow:3px 3px 5px #555;color:#000;}
.cancelalert:hover, .btnt:hover, a.nivel:hover, a#volver:hover{background-color:#fe6;}
.cancelalert:active, .btnt:active, a.nivel:active, a#volver:active{box-shadow:1px 1px 3px #555;}
div#multiplicacion{position:relative;margin:5% auto 0 auto;width:720px;padding:0;}
div#teclado{position:absolute;top:660px;left:-10px;}
div#entrada{width:80px;height:117px;border:3px solid #555;border-radius:10px;background-color:#fff;margin:5px 0 18px 10px;box-shadow:3px 3px 5px #555;}
#info{font-size:60px;letter-spacing:1px;position:absolute;top:510px;right:240px;color:#f00;padding:0 15px;border:3px solid #555;border-radius:10px;background-color:#fff;font-weight:bold;
      margin:0;box-shadow:3px 3px 5px #555;}      
img#pun3{position:absolute;right:5px;top:-30px;}
img#pun2{position:absolute;right:75px;top:-29px;}
img#pun1{position:absolute;right:175px;top:-29px;}
img#pun1b{position:absolute;right:135px;top:-30px;}
img#pun0{position:absolute;right:240px;top:-30px;}
img#pun0b{position:absolute;right:162px;top:-15px;}
button.num{font-family:'noto sans',sans-serif;font-size:50px;background-color:#f90;border:2px solid #000;border-radius:5px;padding:5px 10px;font-weight: bold;line-height:100%;margin:8px;
           cursor:pointer;box-shadow:3px 3px 5px #555;}
button.num:hover{background-color:#fe6;}
button.num:active{box-shadow:1px 1px 3px #555;}
div.contenido{margin:80px 200px 10px 200px;}
div.contenido p{font-size:20px;color:#046;}
ul#enlaces li,ul#enlaces2 li{padding:20px;line-height:200%;font-size:20px;margin:0 0 0 40px;}
a.nivel{padding:6px 20px;font-size:25px;text-decoration:none;font-family:'noto sans',sans-serif;background-color:#f90;border:2px solid #000;border-radius:5px;
        cursor:pointer;box-shadow:3px 3px 5px #555;color:#000;}
span.verde{color:#080;font-size:25px;}
span.rojo{color:#d00;font-size:25px;}
span.naran{color:#d80;font-size:25px;}
div#comjugar{display:none;background-color:#fff;padding:40px 5%;box-shadow:5px 5px 7px #555;border:2px solid #046;opacity: 0.8;margin:0;}
div#comjugar ul{margin:0;padding:0 0 0 40px;}
div#comjugar ul li{margin:10px 0 10px 10px;font-size:17px;color:#046;padding:0;}
div#ayuda{border-top:2px solid #058;margin-top:80px;}
button#btnhelp{background-color:hsla(180,30%,80%,0);cursor:pointer;border:none;font-size:20px;color:#046;font-family:'Balsamiq Sans',cursive;}
button#btnhelp:hover{text-decoration:underline;color:#00e;}
a.ed{margin:50px auto 0 auto;display:block;width:193px;padding:0;}
img.edudiv{border:none;margin:0;width:193px;}
@media(max-width:1170px){
    div#fin{left:20%;top:15%;width:47%;}
    div#the p, div#fin p{font-size:22px;}
    div#the{left:20%;top:15%;width:47%;}
    div.contenido{margin:80px 100px 10px 100px;}
  }
  @media(max-width:860px){
    div.contenido{margin:80px 12% 10px 12%;}
    ul#enlaces li{margin:0;font-size:17px;}
    a.nivel{font-size:20px;}
    div.contenido p{font-size:17px;}
    span.naran, span.rojo, span.verde{font-size:22px;}
  }
  @media(max-width:650px){
    h1{font-size:40px;}
    ul#enlaces{padding:0;}
    ul#enlaces li{list-style-type:none;padding:20px 0;}
    div#comjugar ul{padding:0 0 0 20px;}
    div#comjugar ul li{margin:10px 0 10px 0;font-size:15px;}  
  }
  @media(max-width:540px){
    a.nivel{display:block;}
    ul#enlaces li{font-size:15px;line-height:170%;} 
  }
  @media(max-width:400px){
    h1{font-size:30px;}
    h2{font-size:25px;} 
  }
  
@media(orientation:landscape){
  @media(max-height:840px){
    div#multiplicacion{margin:1% auto 0 auto;}
    div#teclado{top:620px;left:-10px;}
    div#fin{left:20%;top:15%;width:47%;}
    div#the p, div#fin p{font-size:22px;}
    div#the{left:20%;top:15%;width:47%;}
  }
  @media(max-height:750px){
    table{letter-spacing:3px;font-size:120px;margin:0 160px 0 200px;}
    table td{min-width:80px;min-height:48px;}
    td#l1,td#l2,td#l3{font-size:35px;}
    td#l0{font-size:2px;padding-top:16px;padding-bottom:16px;}
    tr#r{border-top:16px solid #000;min-height:56px;}
    div#entrada{width:64px;height:94px;margin:4px 0 14px 8px;}
    #info{font-size:48px;top:408px;right:240px;padding:0 12px;}      
    img#pun3{position:absolute;right:4px;top:-30px;}
    img#pun2{position:absolute;right:60px;top:-29px;}
    img#pun1{position:absolute;right:140px;top:-29px;}
    img#pun1b{position:absolute;right:108px;top:-30px;}
    img#pun0{position:absolute;right:192px;top:-30px;}
    img#pun0b{position:absolute;right:130px;top:-15px;}
    div#teclado{top:496px;left:-10px;}    
  }
  @media(max-height:630px){
    div#multiplicacion{width:360px;}
    table{letter-spacing:2px;font-size:72px;margin:0 70px 0 75px;}
    table td{min-width:48px;min-height:29px;}
    td#l1,td#l2,td#l3{font-size:25px;text-shadow:-1px 0 #555,0 1px #555,1px 0 #555,0 -1px #555,3px 3px 5px #555;}
    td#l0{font-size:2px;padding-top:11px;padding-bottom:12px;}
    tr#r{border-top:10px solid #000;min-height:34px;}
    div#entrada{width:38px;height:56px;margin:2px 0 8px 5px;}
    #info{font-size:29px;top:257px;right:120px;padding:0 7px;}      
    img#pun3{position:absolute;right:4px;top:-30px;}
    img#pun2{position:absolute;right:30px;top:-29px;}
    img#pun1{position:absolute;right:75px;top:-29px;}
    img#pun1b{position:absolute;right:52px;top:-30px;}
    img#pun0{position:absolute;right:100px;top:-30px;}
    img#pun0b{position:absolute;right:76px;top:-15px;}
    div#teclado{top:305px;left:-10px;max-width:100%;}
    div#fin{left:10%;top:15%;width:58%;}
    div#the{left:10%;top:15%;width:58%;}
    div#the p, div#fin p{font-size:17px;}
    div#botonest{margin:0 auto;text-align:center;line-height:320%;}
    a.btnt{font-size:17px;padding:5px 10px;}
    .cancelalert{font-size:17px;padding:5px 10px;}
  }
  @media(max-height:490px){
    div#multiplicacion{width:295px;}
    table{letter-spacing:2px;font-size:58px;margin:0 60px 0 60px;text-shadow:-1px 0 #555,0 1px #555,1px 0 #555,0 -1px #555,3px 3px 5px #555;}
    table td{min-width:38px;min-height:23px;}
    td#l1,td#l2,td#l3{font-size:20px;}
    td#l0{font-size:2px;padding-top:9px;padding-bottom:10px;}
    tr#r{border-top:8px solid #000;min-height:27px;}
    div#entrada{width:30px;height:45px;margin:2px 0 7px 4px;}
    #info{font-size:23px;top:216px;right:100px;padding:0 6px;}      
    img#pun3{position:absolute;right:4px;top:-30px;}
    img#pun2{position:absolute;right:25px;top:-29px;}
    img#pun1{position:absolute;right:63px;top:-29px;}
    img#pun1b{position:absolute;right:40px;top:-30px;}
    img#pun0{position:absolute;right:85px;top:-30px;}
    img#pun0b{position:absolute;right:61px;top:-15px;}
    div#teclado{top:254px;left:-10px;max-width:100%;}
    button.num{font-size:40px;padding:4px 8px;margin:6px;}
    div#fin{left:5%;top:5%;width:68%;padding:50px;}
    div#the{left:5%;top:5%;width:68%;padding:50px;}
    a#volver{font-size:17px;left:-30px;}
  }
  @media(max-height:400px){
    div#multiplicacion{width:295px;}
    table{letter-spacing:2px;font-size:35px;margin:0 88px 0 88px;}
    table td{min-width:23px;min-height:14px;}
    td#l1,td#l2,td#l3{font-size:15px;}
    td#l0{font-size:2px;padding-top:7px;padding-bottom:8px;}
    tr#r{border-top:5px solid #000;min-height:16px;}
    div#entrada{width:18px;height:27px;margin:2px 0 4px 2px;border-radius:5px;}
    #info{font-size:17px;top:146px;right:122px;padding:0 6px;border-radius:5px;}      
    img#pun3{position:absolute;right:4px;top:-30px;}
    img#pun2{position:absolute;right:13px;top:-29px;}
    img#pun1{position:absolute;right:32px;top:-29px;}
    img#pun1b{position:absolute;right:17px;top:-30px;}
    img#pun0{position:absolute;right:45px;top:-30px;}
    img#pun0b{position:absolute;right:52px;top:-15px;width:15px;height:28px;}
    div#teclado{top:175px;left:-10px;max-width:100%;}
    button.num{font-size:40px;padding:4px 8px;margin:6px;}
    div#fin{left:2%;top:2%;width:79%;padding:25px;border:5px solid #0f0;}
    div#the{left:2%;top:2%;width:79%;padding:25px;border:5px solid #f00;}
  }
}
@media(orientation:portrait){
  @media(max-width:770px){
    div#multiplicacion{width:590px;}
    table{margin:0 90px 0 90px;}
    #info{right:160px;}
    button.num{font-size:40px;padding:4px 8px;margin:6px;}
    div#fin{left:10%;top:15%;width:58%;}
    div#the{left:10%;top:15%;width:58%;}
    div#the p, div#fin p{font-size:17px;}
    div#botonest{margin:0 auto;text-align:center;line-height:320%;}
    a.btnt{font-size:17px;padding:5px 10px;}
    .cancelalert{font-size:17px;padding:5px 10px;}
  }
  @media(max-width:630px){
    div#multiplicacion{width:370px;}
    table{letter-spacing:3px;font-size:120px;margin:0 10px 0 10px;}
    table td{min-width:80px;min-height:48px;}
    td#l1,td#l2,td#l3{font-size:35px;}
    td#l0{font-size:2px;padding-top:16px;padding-bottom:16px;}
    tr#r{border-top:16px solid #000;min-height:56px;}
    div#entrada{width:64px;height:94px;margin:4px 0 14px 8px;}
    #info{font-size:48px;top:408px;right:89px;padding:0 12px;}      
    img#pun3{position:absolute;right:4px;top:-30px;}
    img#pun2{position:absolute;right:55px;top:-29px;}
    img#pun1{position:absolute;right:135px;top:-29px;}
    img#pun1b{position:absolute;right:108px;top:-30px;}
    img#pun0{position:absolute;right:205px;top:-30px;} 
    img#pun0b{position:absolute;right:129px;top:-15px;}
    div#teclado{top:490px;left:-10px;}
    button.num{font-size:50px;padding:5px 10px;margin:8px;}
    a#volver{font-size:17px;left:-50px;}    
  }
  @media(max-width:510px){
    div#multiplicacion{width:290px;}
    table{letter-spacing:2px;font-size:72px;margin:0 45px 0 45px;}
    table td{min-width:48px;min-height:29px;}
    td#l1,td#l2,td#l3{font-size:25px;text-shadow:-1px 0 #555,0 1px #555,1px 0 #555,0 -1px #555,3px 3px 5px #555;}
    td#l0{font-size:2px;padding-top:11px;padding-bottom:12px;}
    tr#r{border-top:10px solid #000;min-height:34px;}
    div#entrada{width:38px;height:56px;margin:2px 0 8px 5px;}
    #info{font-size:29px;top:260px;right:75px;padding:0 7px;}      
    img#pun3{position:absolute;right:4px;top:-30px;}
    img#pun2{position:absolute;right:34px;top:-29px;}
    img#pun1{position:absolute;right:82px;top:-29px;}
    img#pun1b{position:absolute;right:56px;top:-30px;}
    img#pun0{position:absolute;right:108px;top:-30px;}
    img#pun0b{position:absolute;right:76px;top:-15px;}
    div#teclado{top:310px;left:-5px;max-width:110%;}
    div#fin{left:1%;top:5%;width:79%;padding:33px;border:5px solid #0f0;}
    div#the{left:1%;top:5%;width:79%;padding:33px;border:5px solid #f00;}
    div#the p, div#fin p{font-size:17px;}
    a.btnt{margin:20px 0;}
    button.num{font-size:40px;padding:4px 8px;margin:6px;}
    a#volver{left:-30px;}
  }
    @media(max-width:380px){
    div#fin{width:74%;}
    div#the{width:74%;}
    div#the p, div#fin p{font-size:15px;}
    a.btnt{font-size:15px;padding:6px 10px;font-weight: normal;}
    .cancelalert{font-size:15px;padding:6px 10px;font-weight: normal;}
    a#volver{padding:4px 8px;font-size:15px;left:0;}
  }
}