@font-face{font-family:'BDCartoonShoutRegular';src:url('BD_Cartoon_Shout-webfont.ttf') format('truetype');font-weight:normal;
           font-style:normal;}
@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%;}
h1{font-family:roboto,sans-serif;text-align:center;margin:0;padding:90px 0;text-shadow:-2px 0 #908,0 3px #908,3px 0 #908,0 -2px #908;
   color:#ff0;font-size: 4vw;}
h2,h3,h4{font-weight:bold;color:#008;}
h2{font-size:2.7em;}
h3{font-size:2em;}
h4{font-size:1.5em;}
strong{font-weight:bold;}
div.modo{list-style-type:none;padding:0;margin:15px 0;}
div#seltabla{border:5px solid #b87;border-radius:20px;background-color:#fbfbfb;
           margin:0 400px 20px 400px;padding:20px 5px 10px 20px;font-size:1.2em;color:#600;
		   box-shadow:5px 5px 5px #777;}
span#nomj{font-family: BDCartoonShoutRegular;}
body { font-family:roboto, sans-serif;margin:0;padding:0;height:100%;}
a { text-decoration:none; }
div#multipacman{width:100%;height:100%;background-color:#fff;}
div#pantini{width:100%;height:100%;background-color:#dedeae;}
#pacman{height:730px;width:630px;margin:0 auto;display:none;}
button{cursor:pointer;}
button#empezar{position:absolute;top:60%;left:42%;}
button#volver{position:absolute;top:30%;left:42%;}
button#volver,button#empezar{z-index:100;display:none;font-size:1.5em;border:5px solid #008;padding:15px 8px;border-radius:10px;
                             background-color:#f8f8f8;color:#008;width:16%;margin:0;}

button.empezar{font-size:1.2em;border:5px solid #008;padding:10px 8px;margin:30px 30px;width:100px;border-radius:10px;
               background-color:#f8f8f8;color:#008;}
button.empezar:hover,button#empezar:hover,button#volver:hover{background-color:#ff0;}

div.btns-der{position:absolute;bottom:10px;right:10px;z-index:50;margin:0;padding:0;}
div.btns-izq{position:absolute;bottom:10px;left:10px;z-index:50;margin:0;padding:0;}
div#botones-der button, div#botones-izq button{margin:0;border:2px solid #888;font-size:62px;border-radius:8px;font-family:'awesome';
                                               font-weight:bold;color:#000;background-color:#eee;}
button#btnup, button#btndown{padding:2px 19px;display:none;}
button#btnleft, button#btnright{padding:2px 23px;display:none;}
button#son{position:absolute;bottom:5px;left:50%;margin:0;padding:6px 10px;color:#008;font-weight:bold;display:block;}
button#soff{position:absolute;bottom:5px;left:50%;margin:0;padding:6px 10px;color:#008;font-weight:bold;display:none;}
button#pancom{position:absolute;bottom:5px;left:30%;margin:0;padding:6px 10px;color:#008;font-weight:bold;display:block;}
button#spancom{position:absolute;bottom:5px;left:30%;margin:0;padding:6px 10px;color:#008;font-weight:bold;display:none;}
button#home{position:absolute;top:5px;right:10px;margin:0;padding:6px 10px;color:#008;font-weight:bold;display:none;}
button#ayuda{position:absolute;bottom:5px;right:30%;margin:0;padding:6px 10px;color:#008;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 #008;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 #058;border-radius:8px;background-color:#f8f8f8;color:#008;
               margin-top:30px;font-family:roboto;font-size:25px;}
button#volverj:hover{background-color:#ff0;}
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:60px;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;}
div#explicacion p,div#explicacion ul{font-size:1.5em;text-align:justify;line-height:150%;}
@media(max-width: 1600px){
  div#explicacion p,div#explicacion ul{font-size:1.2em;}
  h3{font-size:1.7em;}
  h4{font-size:1.2em;}
}
@media(max-width: 1240px){
  button#empezar,button#volver{left:40%;font-size:1.2em;padding:12px 0;width:20%;}
  button#son{left:20%;}
  button#soff{left:20%;}
  button#pancom{left:10px;}
  button#spancom{left:10px;}
  button#ayuda{right:50%;}  
}
@media(max-width: 870px){
  h2{font-size:2em;}
  h3{font-size:1.5em;}
  h4{font-size:1em;}
  div#explicacion p,div#explicacion ul{font-size:1em;}
  button#empezar,button#volver{left:35%;width:30%;}	
}
@media(max-width: 590px){
  button#empezar,button#volver{left:25%;width:50%;}
}
@media(orientation:landscape){
  div#pantini{background-image:url(imagenes/mpacman-h.jpg);background-repeat:no-repeat;background-size:auto 100%;background-position:center;}	
  div#contanuncio{display:none;}
  div#contanunciov{display:block;height:600px;width:300px;position:absolute;top:0;left:0;}
  @media(max-aspect-ratio: 1.3/1) {
	  div#contanunciov{display:none;}
	  div#explicacion{margin:0 10%;}
	  div#seltabla{margin:0 150px 20px 150px;}
  }
  @media(max-height: 1400px){
	@media(min-aspect-ratio: 1.3/1) {
	  div#contanunciov{height:600px;width:160px;}
      div#explicacion{margin:0 160px;}
      div#seltabla{margin:0 200px 20px 200px;}	  
    }
	@media(min-aspect-ratio: 1.77/1) {
	  div#contanunciov{height:600px;width:300px;}
      div#explicacion{margin:0 300px;}
      div#seltabla{margin:0 400px 20px 400px;}	  
    }	
  }
  @media(max-height: 900px){
	@media(min-aspect-ratio: 1.3/1) {
	  div#contanunciov{display:none;}
      div#explicacion{margin:0 10%;}
      div#seltabla{margin:0 150px 20px 150px;}	  
    }
	@media(min-aspect-ratio: 1.77/1) {
	  div#contanunciov{height:300px;width:300px;display:block;}
      div#explicacion{margin:0 300px;}
      div#seltabla{margin:0 350px 20px 350px;}	  
    }	
  }
  @media(max-height: 800px){
	h1{padding:70px 0 50px 0;}
	button.empezar{font-size:1em;margin:20px auto;width:100px;}  
  }
  @media(max-height: 700px){
    div#botones-der button, div#botones-izq button{font-size:40px;}
    button#btnup, button#btndown{padding:0 10px;}
    button#btnleft, button#btnright{padding:0 13px;}
  }
  @media(max-height: 680px){
	h1{padding:70px 0 30px 0;}
	div#seltabla{font-size:1em;margin:0 50px 20px 50px;}
    @media(min-aspect-ratio: 1.77/1) {
	  div#contanunciov{display:none;}
      div#explicacion{margin:0 10%;}	  
    }
    @media(min-aspect-ratio: 2/1) {
	  div#contanunciov{height:200px;width:200px;display:block;}
      div#explicacion{margin:0 200px;}
      div#seltabla{margin:0 220px 20px 220px;}	  
    }	
  }
  @media(max-height: 600px){
	h1{padding:40px 0 20px 0;}
	button.empezar{margin:20px auto;width:100px;}    
  }
  @media(max-height: 550px){
    h1{padding:30px 0 0 0;}
	div#seltabla{padding:10px 5px 0 20px;margin:0 50px 10px 50px;}
	button.empezar{padding:7px 8px;}
    @media(min-aspect-ratio: 2/1) {
      div#seltabla{margin:0 220px 10px 220px;}	  
    }    
  }
  @media(max-height: 450px){
	h1{padding:20px 0 0 0;}
	div#contanunciov{display:none;}	
	div#explicacion{margin:0 10%;}
	div#seltabla{margin:0 10px;}
	button.empezar{margin:15px auto;width:100px;}  	
  }
  @media(max-height: 410px){
    h1{padding:10px 0 0 0;}
	div.modo{margin:5px 0;}
	div#seltabla{font-size:0.9em;}
    button.empezar{margin:10px auto;}  	
  }
  @media(max-height: 340px){
	div#seltabla{font-size:0.8em;}
    button#edudiver{padding:5px;}
    .dropdown{bottom:0;}  
  }
  @media(max-width:510px){
     button#edudiver img{width:190px;}
     .dropdown{bottom:0;right:0;}  
     .dropdown-content{bottom:60px;}
     .dropdown-content a{font-size:1em;}	 
  }
}
@media(orientation:portrait){
  h1{font-size: 6vw;}
  button#home{top:unset;right:unset;bottom:5px;left:50%;}
  div#pantini{background-image: url(imagenes/mpacman-v.jpg);background-repeat:no-repeat;background-size:100%;background-position:center;}
  div.btns-der{bottom:5px;right:5px;}
  div.btns-izq{bottom:5px;left:5px;}
  div#contanuncio{display:block;position:absolute;top:0;width:100%;}
  div#contanunciov{display:none;}
  div#explicacion{margin:0 5%;}
  div#seltabla{margin: 0 10px 20px 10px;}
  @media(min-aspect-ratio: 1/1.3){div#contanuncio{display:none;}}
  @media(max-aspect-ratio: 1/1.3){
	#pacman{margin-top:50px;}
    div#contanuncio{height:50px;}
    div#pantini{height:calc(100% - 50px);padding-top:50px;}	
  }
  @media(max-aspect-ratio: 1/1.77){
	#pacman{margin-top:300px;}
    div#contanuncio{height:300px;}
    div#pantini{height:calc(100% - 300px);padding-top:300px;}
    div#explicacion{margin:240px 5% 0 5%;}	
  }
  @media(max-width:1000px){
	@media(max-aspect-ratio: 1/1.3){
	  #pacman{margin-top:0;}
      div#contanuncio{display:none;}
      div#pantini{height:100%;padding-top:0;}
      div#explicacion{margin:0 5%;}	  
    }
    @media(max-aspect-ratio: 1/1.77) {
	  #pacman{margin-top:300px;}
      div#contanuncio{height:300px;display:block;}
      div#pantini{height:calc(100% - 300px);padding-top:300px;}
      div#explicacion{margin:240px 5% 0 5%;}	  
    }  
  }
  @media(max-width:700px){
    @media(max-aspect-ratio: 1/1.77) {
	  #pacman{margin-top:90px;} 
      div#contanuncio{height:90px;}
      div#pantini{height:calc(100% - 90px);padding-top:90px;}
      div#explicacion{margin:30px 5% 0 5%;padding:80px 10% 200px 10%;}	  
    }	
  }
  @media(max-width:660px){  
    button#btnup{padding:0 19px;}
    button#btnleft{padding:0 23px;}
    button#btnright{padding:0 23px;}
    button#btndown{padding:0 19px;}
  }
  @media(max-width:610px){   
    div#botones-der button, div#botones-izq button{font-size:50px;}
    button#btnup{padding:0 15px;}
    button#btnright{top:64px;padding:0 18px;}
    button#btndown{top:64px;padding:0 15px;}
    button#btnleft{padding:0 18px;} 
  }
  @media(max-width: 590px){
	h1{padding:60px 0 50px 0;}
    button#son{left:45%;}
    button#soff{left:45%;}
    button#pancom{left:10px;}
    button#spancom{left:10px;}
    button#ayuda{right:10px;}
    button#edudiver{padding:5px;}
    .dropdown{bottom:70px;right:10px;}  
    .dropdown:hover button#edudiver{border:5px solid #008;padding:0;}
    .dropdown-content{bottom:60px;}
    .dropdown-content a{font-size:1em;}
	button.empezar{font-size:1em;margin:25px auto;}
	div#seltabla{padding:20px 5px 0 20px;font-size: 1em;}
	div.modo{margin:0;}
}
  @media(max-width:500px){
	button.empezar{margin:15px auto;padding:7px 8px;width:80px;}
	button#home{bottom:unset;top:0;left:5px;margin-top:110%;background-color:#eee;}
	div.btns-der{left:50%;width:114px;right:unset;bottom:87px;height:66px;}
    div.btns-izq{right:50%;width:114px;left:unset;bottom:25px;height:66px;}
    button#btnup{position:absolute;left:-32px;bottom:15px;}
    button#btnright{position:absolute;left:50px;top:32px;}
    button#btndown{position:absolute;right:-32px;top:15px;}
    button#btnleft{position:absolute;right:50px;bottom:32px;}
	div#seltabla{margin:0 0 10px 0;padding:15px 5px 0 20px;}
	@media(max-aspect-ratio: 1/1.77){
	  button#home{top:90px;}	  
    }
	@media(max-height:620px){
	  h1{padding:30px 0;}	  
	}
  }
  @media(max-width:475px){
    @media(max-aspect-ratio: 1/1.77){
	  #pacman{margin-top:60px;}
	  button#home{top:60px;}
      div#contanuncio{height:60px;}
      div#pantini{height:calc(100% - 60px);padding-top:60px;}
      div#explicacion{margin:0;}	  
    }
    @media(max-aspect-ratio: 1/2) {
	  #pacman{margin-top:100px;}
	  button#home{top:100px;}
      div#contanuncio{height:100px;}
      div#pantini{height:calc(100% - 100px);padding-top:100px;}
      div#explicacion{margin:40px 0 0 0;}	  
    } 	
  }
  @media(max-width:414px){
	  h1{padding:30px 0 20px 0;}
    @media(max-aspect-ratio: 1/1.77){
	  #pacman{margin-top:50px;}
	  button#home{top:50px;}
      div#contanuncio{height:50px;}
      div#pantini{height:calc(100% - 50px);padding-top:50px;}	  
    }
    @media(max-aspect-ratio: 1/2){
	  #pacman{margin-top:100px;}
	  button#home{top:100px;}
      div#contanuncio{height:100px;}
      div#pantini{height:calc(100% - 100px);padding-top:100px;}	  
    } 	
  }
  @media(max-width:400px){
    @media(max-aspect-ratio: 1/1.77) {
	  #pacman{margin-top:0;}
	  button#home{top:0;}
      div#contanuncio{display:none;}
      div#pantini{height:100%;padding-top:0;}	  
    }
    @media(max-aspect-ratio: 1/2) {
	  #pacman{margin-top:100px;}
	  button#home{top:100px;}
      div#contanuncio{height:100px;display:block;}
      div#pantini{height:calc(100% - 100px);padding-top:100px;}	  
    }
    @media(max-height: 560px){
	  div#seltabla{padding:10px 5px 0 20px;font-size: 0.9em;}
      button.empezar{margin:10px auto;}
      h1{padding:20px 0 10px 0;}
	} 	
  }
  @media(max-width:350px){
	
    @media(max-aspect-ratio: 1/2) {
	  #pacman{margin-top:60px;}
	  button#home{top:60px;}
      div#contanuncio{height:60px;display:block;}
      div#pantini{height:calc(100% - 60px);padding-top:60px;}
      div#explicacion{margin:0;}	  
    }
    @media(max-height: 495px){
	  h1{padding:10px 0 5px 0;}
	  button.empezar{margin:5px auto;}
	  div#seltabla{padding:10px 5px 0 10px;font-size:0.8em;}
	}  	
  }  
}