body {
font-size: 10px;
font-family: 'Rosario', sans-serif, helvetica;
background-color: rgb(236,238,194)
}

div#bordesuperior {

width:990px;
height: 4.3rem;;
background-image: url(imagenes/bordearriba2.jpg);
margin: auto;
}


div#pagina {
margin: auto;
width:990px;
background-color: rgb(80, 81, 80);
overflow: hidden;

}

header {
width:95%;
overflow: hidden;
margin: auto;
margin-top: 1%;

}

div#logo {
padding-top: 3%;

width: 15%;
margin: auto;

}
div#logo img{

width: 100%;


}

header nav {

float: right;
width: 100%;
margin: auto;

border-bottom-style: solid;
border-bottom-color: rgb(93,177,102);
border-bottom-width: medium;
padding-bottom: 2%;
margin-top: 3%;
border-top-style: solid;
border-top-color: rgb(93,177,102);
border-top-width: medium;
}

header nav ul li {
border-right-style: solid;
border-right-color: rgb(47,48,62);
border-left-style: solid;
border-left-color: rgb(47,48,62);
float: left;
width: 14.7%;
margin-right: 2%;
margin-top: 1%;
list-style-type:none;
text-decoration: none;
margin-left: 1.5%; 

}


header nav#botoneradearriba ul li a {
color: rgb(236,238,194);
font-size: 0.9rem;
background-color: rgb(80, 81, 80);
text-decoration: none;
padding-bottom: 5%;
padding-left: 5%;
padding-right: 5%;
padding-top: 5%;
margin-left: 10%;
width: 100%;
height: 100%;
}

header nav#botoneradearriba ul li a:hover {

color: rgb(153, 192, 2);
background-color: rgb(47,48,62);
font-size: 0.90rem;
padding-bottom: 5%;
padding-left: 5%;
padding-right: 5%;
padding-top: 5%;    
}

div#botones{
width: 15%;
float: right;

}

div#botones img{

width: 100%;


}

div#botones ul li {
width: 7rem;
height:1.5rem;
float: right;
}

div#botones ul {
list-style: none;
width:4.2rem;
height:3rem;
float: right;
padding-top: 0%;
margin-bottom:9%;

}
div#volver{
float:right;
margin-right: 6%;
}


div#redesgale {
   
width: 20.4%;
height: 35%;
float: left;
margin-left: 0;
margin-top: 1%;
margin-bottom: 0;


}

div#redesgale img{

width: 100%;
height: 100%;

}

div#redes ul {
margin: 0;
padding: 0;
float: left;
width: 13rem;
height: 2rem;
margin-top: 0%;
list-style-type:none;
padding-top: 0%;
margin-bottom: 6%;
margin-top: 2%;
}

div#redes ul li {
margin-left: 0%;
float: right;
width:2rem;
height:2rem;
margin-right:15%;

}



div#lineas {

border-bottom-style: solid;
border-bottom-color: rgb(236,238,194);
border-bottom-width: thick;
margin-top:-8.5%;
    width: 62rem;
float: left;
}

div#lineas2 {

border-bottom-style: solid;
border-bottom-color: rgb(236,238,194);
border-bottom-width: thick;
margin-top: 0.6%;
width: 62rem;
float: right;
}



article {
border-top-color: rgb(236,238,194);
border-top-style: solid;
width: 95%;
margin: auto;
background-color: rgb(236,238,194);
overflow: hidden;
margin-top: 4%;

}


div#imagenes {
width:100%;
border-top-style: solid;
border-top-color: rgb(80,81,80);
margin-top: 3%;
border-bottom-style: solid;
border-bottom-color: rgb(80,81,80);
padding-bottom: 2%;   
}

div#imagenes img{
margin-top: 3%;
width: 95%;

margin-left: 2.5%;

}


div#niveles{
width: 100%;
height: 33%;
margin-top: 3%;


}

div#nivel1 h1{
font-weight: 700;
font-size: 8rem;
color: rgb(236,238,194);
}

div#niveles div#nivel1 {
margin-left: 2.5%;
float: left;
width:46% ;
height:100%;
background-image: url(imagenes/nivel1.jpg);
margin-top: 0;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
text-shadow:3px 3px 6px rgb(10,10,10);
}

div#niveles div#nivel1:hover {
background-image: url(imagenes/nivel1_color.jpg);
opacity: 0.25;
opacity: 0.25;
opacity: 1;

}

div#nivel2 h2{
font-weight: 700;
font-size: 8rem;
color: rgb(236,238,194);}

div#niveles div#nivel2 {
margin-right: 2.5%;
float: right;
width:46%;
height: 100%;
background-image: url(imagenes/nivel2.jpg);
margin-top: 0;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
text-shadow:3px 3px 6px rgb(10,10,10);

}


div#niveles h2 a{

text-decoration: none;
color: rgb(236,238,194);

}


div#niveles div#nivel2:hover {
background-image: url(imagenes/nivel2_color.jpg);
opacity: 0.25;
opacity: 0.25;
opacity: 1;

}


div#linea3 {
border-bottom-style: solid;
border-bottom-color: rgb(80,81,80);
margin-top: 3%;


}



div#taller{
float:left;
width: 280px;
height: 280px;
overflow: auto;
margin-left: 2%;
background-image: url(imagenes/taller.jpg);
padding-left: 1%;
margin-top: 2%;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;    
}

div#taller h2{
text-shadow:3px 3px 6px rgb(10,10,10);
color: rgb(153,203,0);
font-size: 3rem;
width: 50%;
}

div#taller:hover {
background-image: url(imagenes/taller_color.jpg);
opacity: 0.25;
opacity: 0.25;
opacity: 1;

}

div#referentes h2{
color: rgb(62,165,43);
font-size: 2rem;
width:70%;
text-shadow:3px 3px 6px rgb(10,10,10);
height: 50%;
}

div#referentes{
margin-bottom: 2%;
overflow: hidden;
background-image: url(imagenes/referentes.jpg);
float: left;
margin-left: 2%;
width: 280px;
height: 280px;
margin-top:2%;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;    
}


div#referentes:hover {
background-image: url(imagenes/referentes_color.jpg);
opacity: 0.25;
opacity: 0.25;
opacity: 1;

}

div#ranking h2{
text-shadow:3px 3px 6px rgb(10,10,10);
color: rgb(91,177,105);
font-size: 3rem;
}

div#ranking{
overflow: auto;

background-image: url(imagenes/ranking.jpg);
margin-top:2%;
margin-right: 2%;
float: right;
width: 280px;
height: 280px;
padding-top: 0;
padding-left: 1%;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;    
}


div#ranking:hover {
background-image: url(imagenes/ranking_color.jpg);
opacity: 0.25;
opacity: 0.25;
opacity: 1;

}

div#correlatividades h2 {

background-color: rgba(10, 10, 10, 0.28);
height: 92%;
width: 103%;
margin-top: -30.7%;
margin-right: ;
float: right;
padding-top: 8%;
padding-left: 1%;
margin-top: 0%;
}



div#cajon{

width: 100%;
height: 12%;
background-color: rgb(80,81,80);
margin: auto;
}

footer{

padding-top: 1%;   
padding-bottom: 1%;
padding-left: 1%;
padding-right: 1%;
height: 2.5rem;
clear: both; 
background: rgba(93, 177, 102, 0.58); 
text-align: center; 
color: rgb(236,238,194);
width: 100%;
margin: auto;
}
 /************************************************pestaña nivel2**************************************************/

div#lineas2 {

border-bottom-style: solid;
border-bottom-color: rgb(236,238,194);
border-bottom-width: thick;
margin-top:-8.9%;
width: 62rem;
float: left;
}

div#lineas22 {

border-bottom-style: solid;
border-bottom-color: rgb(236,238,194);
border-bottom-width: thick;
margin-top: 0.6%;
width: 62rem;
float: right;
}

div#contenidos2{
background-color: rgba(35,162,97,0.5);
border-radius: 1rem;
margin-left: 1%;
margin-right: 1%;
overflow: visible;
}



div#n2{

margin: auto;
width: 20%;
height: 8rem;
font-size: 6rem;
text-align: center;
color: rgb(236, 238, 194);
text-shadow:0.3rem 0.3rem 0.6rem rgb(10,10,10);
margin-top: 0%;
    
}
 div#tp1{
text-align: center;     
width: 29%;
overflow: hidden;    
margin-left: 4%;
padding-bottom: 8%;
    float: left;
     margin-top: 2%;
 }

div#cuadrado {border-radius: 1rem;
width: 230px;
height: 230px;
background-image: url(imagenes/tp1.jpg);
}

div#cuadrado:hover{
width: 99%;
height: 14.9rem;
background-image: url(imagenes/tp11.svg);

}

div#cuadrado a{
color: rgba(10, 10, 10, 0);
font-size: 1rem;
padding-left: 50%;
padding-right: 50%;
padding-bottom: 92%;
}
.texto22{
text-align: center;
font-size: 1.1rem;
font-weight: 700;
}

div#tp1 ul{ 
width: 12.2rem;
height: 1.5rem;
list-style-type:none;}

div#tp1 ul li {
font-size: 1rem;
width:90%;
height:1.5rem;
text-decoration:none;
margin-left: 0%;
background-color: rgb(47,48,62);
margin-top: 2%;}

div#tp1 ul li a {
text-decoration: none;
color: rgb(236,238,194);
width: 100%;}


div#tp1 ul li a:hover{color: rgb(153, 192, 2);}


div#cuadrado2 a{
color: rgba(10, 10, 10, 0);
font-size: 1rem;
padding-left: 50%;
padding-right: 50%;
padding-bottom: 0%;


}

div#cuadrado2 {border-radius: 1rem;
width: 230px;
height: 230px;
background-image: url(imagenes/tp2.jpg);
}

div#cuadrado2:hover{
width: 99%;
height: 14.9rem;
background-image: url(imagenes/tp22.svg);

}

div#cuadrad2o a{
color: rgba(10, 10, 10, 0);
font-size: 1rem;
padding-left: 50%;
padding-right: 50%;
padding-bottom: 92%
}

div#tp2{
    float: left;
margin-left: 4%;
margin-right: 3%;
margin-top: 2%;
width: 30%;
height: 29%;
text-align: center;
}


div#tp2 img{border-radius: 1rem;
width: 99%;
height: 29.5%;}

div#tp2 ul{ 
width: 12.2rem;
height: 1.5rem;
list-style-type:none;}

div#tp2 ul li {
font-size: 1rem;
width:90%;
height:1.5rem;
text-decoration:none;
margin-left: -7%;
background-color: rgb(47,48,62);
margin-top: 2%;}

div#tp2 ul li a {
text-decoration: none;
color: rgb(236,238,194);
width: 100%;
}

div#tp2 ul li a:hover{color: rgb(153, 192, 2);}

div#cuadrado3 {border-radius: 1rem;
width: 230px;
height: 230px;
background-image: url(imagenes/tp3.jpg);
}

div#cuadrado3:hover{
width: 99%;

background-image: url(imagenes/tp33.svg);

}

div#cuadrado3 a{
color: rgba(10, 10, 10, 0);
font-size: 1rem;
padding-left: 50%;
padding-right: 50%;
padding-bottom: 92%
}

div#tp3{

margin-left:0%;
margin-top: 2%;
width: 26%;
height: 30%;
float: left;
margin-right: 4%;
text-align: center;

}

div#tp3 img{border-radius: 1rem;
width: 99%;
height: 29.5%;}

div#tp3 ul{ 
width: 12.2rem;
height: 1.5rem;
list-style-type:none;}

div#tp3 ul li {
font-size: 1rem;
width:90%;
height:1.5rem;
text-decoration:none;
margin-left: -7%;
background-color: rgb(47,48,62);
margin-top: 2%;}

div#tp3 ul li a {
text-decoration: none;
color: rgb(236,238,194);
width: 100%;
}

div#tp3 ul li a:hover{color: rgb(153, 192, 2);}

div#cuadrado4 {border-radius: 1rem;
width: 230px;
height: 230px;
background-image: url(imagenes/tp4.jpg);
}

div#cuadrado4:hover{
width: 230px;
height: 230px;
background-image: url(imagenes/tp44.svg);

}

div#cuadrado4 a{
color: rgba(10, 10, 10, 0);
font-size: 1rem;
padding-left: 50%;
padding-right: 50%;
padding-bottom: 92%
}

div#tp4{
float: left;
margin-top:10%;
width: 30%;
padding-bottom:12%;
margin-left: -29%;
text-align: center;

}

div#tp4 img{border-radius: 1rem;
}

div#tp4 ul{ 
width: 12.2rem;
height: 1.5rem;
list-style-type:none;}

div#tp4 ul li {
font-size: 1rem;
width:90%;
height:1.5rem;
text-decoration:none;
margin-left: -7%;
background-color: rgb(47,48,62);
margin-top: 2%;}

div#tp4 ul li a {
text-decoration: none;
color: rgb(236,238,194);
width: 100%;
}

div#tp4 ul li a:hover{color: rgb(153, 192, 2);}

div#cuadrado5 {border-radius: 1rem;
width: 230px;
height: 230px;
background-image: url(imagenes/tp5.jpg);
}

div#cuadrado5:hover{
width: 230px;
height: 230px;
background-image: url(imagenes/tp55.svg);

}

div#cuadrado5 a{
color: rgba(10, 10, 10, 0);
font-size: 1rem;
padding-left: 50%;
padding-right: 50%;
padding-bottom: 92%
}

div#tp5{
float: left;
width: 30%;
text-align: center;
margin-top: 10%;
}

div#tp5 img{border-radius: 1rem;
width: 99%;
height: 29.5%;}

div#tp5 ul{ 
width: 12.2rem;
height: 1.5rem;
list-style-type:none;}

div#tp5 ul li {
font-size: 1rem;
width:90%;
height:1.5rem;
text-decoration:none;
margin-left: -7%;
background-color: rgb(47,48,62);
margin-top: 2%;}

div#tp5 ul li a {
text-decoration: none;
color: rgb(236,238,194);
width: 100%;
}

div#tp5 ul li a:hover{color: rgb(153, 192, 2);}


div#cuadrado6 {border-radius: 1rem;
width: 99%;
height: 14.9rem;
background-image: url(imagenes/tp6.jpg);
}

div#cuadrado6:hover{
width: 99%;
height: 14.9rem;
background-image: url(imagenes/tp66.svg);

}

div#cuadrado6 a{
color: rgba(10, 10, 10, 0);
font-size: 1rem;
padding-left: 50%;
padding-right: 50%;
padding-bottom: 92%
}

div#tp6{
float: left;
width: 30%;
float: right;
text-align: center;
margin-right: 4%;
margin-top: 10%;
}

div#tp6 img{border-radius: 1rem;
width: 99%;
height:29.5%;}

div#tp6 ul{ 
width: 12.2rem;
height: 1.5rem;
list-style-type:none;}

div#tp6 ul li {
font-size: 1rem;
width:90%;
height:1.5rem;
text-decoration:none;
margin-left: -7%;
background-color: rgb(47,48,62);
margin-top: 2%;}

div#tp6 ul li a {
text-decoration: none;
color: rgb(236,238,194);
width: 100%;
}

div#tp6 ul li a:hover{color: rgb(153, 192, 2);}



div#atras{

margin-left: 89%;
width: 10%;
height: 2%;
padding-top:0;
margin-top:-4.5%;
padding-bottom: 2%;
font-size: 1.1rem;
padding-left: 2%;
border-left-style: solid;
border-left-color: rgb(80,81,80);
padding-top: 2%;
}


div#atras a{
text-decoration: none;
color: rgb(236,238,194);
font-weight: 700;}

div#siguiente{
padding-top:15%;
margin-left: 78%;
width: 10%;

font-size: 1.1rem;

}

div#siguiente a{

text-decoration: none;
color: rgb(236,238,194);
font-weight: 700;}





/******************************************************RESPONSIVE*******************************************************************/


  /*-------------------------------320---------------------------------*/   
@media all and (min-width: 1px) and (max-width: 320px){
body {
font-size: 5pt;
font-family: 'Rosario', sans-serif, helvetica;
background-color: rgb(236,238,194)
}

div#bordesuperior {

width:320px;
height: 2rem;
background-image: url(imagenes/bordearriba2.jpg);
margin: auto;
}


div#pagina {
margin: auto;
width:320px;
background-color: rgb(80, 81, 80);


}

div#logo{
padding-top: 0%;
margin-top: 0%;
height: 30%;
margin: auto;
}

nav#botoneradearriba{
width: 100%;
margin: auto;
}
    
header{
    height: 26rem;
    }
    
header nav {
width: 100%;
height:23%;
border: none;
margin: auto;

}

header nav ul li {
height: 100%;
width: 100%;
list-style-type:none;
text-decoration: none;
border: none;  
margin-left: -15%;
text-align: center;
background-color: rgb(80, 81, 80);
    
}


header nav#botoneradearriba ul li a {
color: rgb(236,238,194);
font-size: 0.8rem;
background-color: rgb(80, 81, 80);
text-decoration: none;
width: 100%;
height: 50%;
padding-top: 0%;
padding-bottom: 0%;
margin-left: 10%;
text-align: center;
float: none;
margin-right: 0%;

}

header nav#botoneradearriba ul li a:hover {
color: rgb(153, 192, 2);
background-color: rgb(47,48,62);
font-size: 0.8rem;
 padding-top: 0%;
padding-bottom: 0%;
margin:auto;
}

div#botones{

width: 5rem;
float: none;
height: 4rem;
margin: auto;
}

div#botones img{

width: 100%;
height: 100%;
margin: auto;
}

div#botones ul li {
width: 5rem;
height:1rem;

}

div#botones ul {

margin-left: 0%;
list-style: none;
width:2.2rem;
height:2rem;

}



div#redesgale {
margin: auto;
width: 38%;
height: 15%;
float: none;
padding-right: 0%;
margin-top: 2%;
margin-bottom: 2%

}

div#redesgale img{

width: 90%;
height: 100%;

}

div#redes ul {
margin-bottom: 5%;
float: none;
width: 6rem;
height: 1.9rem;

list-style-type:none;
padding-top: 0%;
margin-bottom: 6%;
margin-top: 0%;
}

div#redes ul li {
margin-left: 0%;
float: left;
width:2rem;
height:2rem;
margin-right:0%;

}



div#lineas {

display: none;
}

div#lineas2 {

display: none;
}



article {
border-top-color: rgb(236,238,194);
border-top-style: solid;
width: 95%;
margin: auto;
background-color: rgb(236,238,194);
height: 30rem;
margin-top: 0%;

}


div#imagenes {
width:100%;
height: 25%;
padding-top: 0%
margin-top: 0%;
border: none;
padding-bottom: 2%;   
}

div#imagenes img{

width: 95%;
height:90;


}


div#niveles{
width: 100%;
height: 33%;
margin-top: 3%;
margin-bottom: 0%;

}

div#nivel1 h1{
font-weight: 700;
color: rgb(236,238,194);
font-size: 2rem;
font-weight: 700;
text-shadow:3px 3px 6px rgb(10,10,10);
}    
    
div#niveles div#nivel1 {
margin-left: 2.5%;
float: left;
width:46% ;
height:100%;
background-image: url(imagenes/nivel1.jpg);
margin-top: 0;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;

}

div#niveles div#nivel1:hover {
background-image: url(imagenes/nivel1_color.jpg);
opacity: 0.25;
opacity: 0.25;
opacity: 1;

}
div#niveles div#nivel2 {
margin-right: 2.5%;
float: right;
width:46%;
height: 100%;
background-image: url(nivel2.jpg);
margin-top: 0;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;


}

div#nivel2 h2{

color: rgb(236,238,194);
font-size: 2rem;
font-weight: 700;
text-shadow:3px 3px 6px rgb(10,10,10);


}    

div#niveles div#nivel2 a{

text-decoration: none;
color: rgb(236,238,194);

}


div#niveles div#nivel2:hover {
background-image: url(imagenes/nivel2_color.jpg);
opacity: 0.25;
opacity: 0.25;
opacity: 1;

}


div#linea3 {
display: none;

}

div#taller h2{
color: rgb(153,203,0);
font-size:1rem;
text-shadow:3px 3px 6px rgb(10,10,10);
}

div#taller{
float:left;
width: 29%;
height: 22%;
background-image: url(imagenes/taller.jpg);
padding-left: 1%;
margin-top: -5%;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;    
}



div#taller:hover {
background-image: url(imagenes/taller_color.jpg);
opacity: 0.25;
opacity: 0.25;
opacity: 1;

}

div#referentes{
background-image: url(imagenes/referentes.jpg);
margin-left: 34.5%;
width: 30%;
height: 22%;
margin-top: -9%;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;    
}

div#referentes h2{
color: rgb(62,165,43);
font-size: 0.8rem;
font-weight: 700;
text-shadow:3px 3px 6px rgb(10,10,10);
}

div#referentes:hover {
background-image: url(imagenes/referentes_color.jpg);
opacity: 0.25;
opacity: 0.25;
opacity: 1;

}


div#ranking{
height: 22.2%;
background-image: url(imagenes/ranking.jpg);

margin-top: -35%;
margin-right: 2%;
float: right;
width: 30%;
padding-top: 0;
padding-left: 1%;

transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;    
}

div#ranking h2{
color: rgb(91,177,105);
font-size: 0.8rem;
text-shadow:3px 3px 6px rgb(10,10,10);

}

div#ranking:hover {
background-image: url(imagenes/ranking_color.jpg);
opacity: 0.25;
opacity: 0.25;
opacity: 1;

}



div#linea5{
display: none
}

div#cajon{

width: 100%;
height: 16%;
background-color: rgb(80,81,80);
margin: auto;
}

footer{

padding-top: 1%;   
padding-bottom: 1%;
padding-left: 1%;
padding-right: 1%;
height: 2rem;
clear: both; 
background: rgba(93, 177, 102, 0.58); 
text-align: center; 
color: rgb(236,238,194);
width: 90%;
margin: auto;
font-size: 0.4rem;
}

}
 /*-----------------------------------------------------------------640------------------------------------------------*/

@media all and (min-width: 321px) and (max-width: 640px){

body {
font-size: 5pt;
font-family: 'Rosario', sans-serif, helvetica;
background-color: rgb(236,238,194)
}

div#bordesuperior {

width:600px;
height: 3rem;
background-image: url(imagenes/bordearriba2.jpg);
margin: auto;
}


div#pagina {
margin: auto;
width:600px;
background-color: rgb(80, 81, 80);


}

div#logo{
width: 30%;
height: 50%;


}

nav#botoneradearriba{
width: 100%;
}
    
header{
height: 8rem;
    }
    
header nav {
width: 100%;
height:10%;
border: none;
}

header nav ul li {
width: 14%;
list-style-type:none;
text-decoration: none;
border: none;  
}


header nav#botoneradearriba ul li a {
color: rgb(236,238,194);
font-size: 0.6rem;
background-color: rgb(80, 81, 80);
text-decoration: none;
width: 100%;
height: 100%;
}

header nav#botoneradearriba ul li a:hover {
color: rgb(153, 192, 2);
background-color: rgb(47,48,62);
font-size: 0.6rem;
    
}

div#botones{
width: 5rem;
float: right;
height: 4rem;
}

div#botones img{

width: 100%;
height: 100%;

}

div#botones ul li {
width: 5rem;
height:1rem;
float: right;
}

div#botones ul {
list-style: none;
width:2.2rem;
height:2rem;



}



div#redesgale {
   
width: 30%;
height: 27%;
float: left;



}

div#redesgale img{

width: 70%;
height: 70%;

}

div#redes ul {

float: left;
width: 13rem;
height: 2rem;

list-style-type:none;
padding-top: 0%;
margin-bottom: 1%;
margin-top: 0%;
}

div#redes ul li {
margin-left: 0%;
float: left;
width:2rem;
height:2rem;
margin-right:0%;

}



div#lineas {

display: none;
}

div#lineas2 {

display: none;
}



article {
border-top-color: rgb(236,238,194);
border-top-style: solid;
width: 95%;
margin: auto;
background-color: rgb(236,238,194);
height: 50rem;
margin-top: 0%;

}


div#imagenes {
width:100%;
height: 26%;
margin-top: 0%;
border: none;
padding-bottom: 2%; 
margin-bottom: 2%;
}

div#imagenes img{

width: 95%;
height:90;


}


div#niveles{
width: 100%;
height: 33%;
margin-top: 3%;


}

div#nivel1 h1{
font-weight: 700;
color: rgb(236,238,194);
font-size: 4rem;
text-shadow:3px 3px 6px rgb(10,10,10);

}    
    
    
div#niveles div#nivel1 {
margin-left: 2.5%;
float: left;
width:46% ;
height:100%;
background-image: url(imagenes/nivel1.jpg);
margin-top: 0;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;

}

div#niveles div#nivel1:hover {
background-image: url(imagenes/nivel1_color.jpg);
opacity: 0.25;
opacity: 0.25;
opacity: 1;

}
    
div#niveles div#nivel2 h2{
color: rgb(236,238,194);
font-size: 4rem;
font-weight: 700;

}    
    
div#niveles div#nivel2 {
margin-right: 2.5%;
float: right;
width:46%;
height: 100%;
background-image: url(imagenes/nivel2.jpg);
margin-top: 0;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
text-shadow:3px 3px 6px rgb(10,10,10);

}


div#nivel2 h2 a{

text-decoration: none;
color: rgb(236,238,194);

}


div#niveles div#nivel2:hover {
background-image: url(imagenes/nivel2_color.jpg);
opacity: 0.25;
opacity: 0.25;
opacity: 1;

}


div#linea3 {
display: none;

}



div#taller{
float:left;
width: 29%;
height: 22%;
background-image: url(imagenes/taller.jpg);
color: rgb(153,203,0);
font-size: 1.5rem;
padding-left: 1%;
margin-top: -1.5%;
text-shadow:3px 3px 6px rgb(10,10,10);
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;    
}



div#taller:hover {
background-image: url(imagenes/taller_color.jpg);
opacity: 0.25;
opacity: 0.25;
opacity: 1;

}

div#referentes{
background-image: url(imagenes/referentes.jpg);
margin-left: 34.5%;
width: 30%;
height: 22%;
color: rgb(62,165,43);
font-size: 1.5rem;
margin-top: -4%;
font-weight: 700;
text-shadow:3px 3px 6px rgb(10,10,10);
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;    
}


div#referentes:hover {
background-image: url(imagenes/referentes_color.jpg);
opacity: 0.25;
opacity: 0.25;
opacity: 1;

}


div#ranking{
height: 22.2%;
background-image: url(imagenes/ranking.jpg);
color: rgb(91,177,105);
font-size: 1.5rem;
margin-top: -31%;
margin-right: 2%;
float: right;
width: 30%;
padding-top: 0;
padding-left: 1%;
text-shadow:3px 3px 6px rgb(10,10,10);
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;    
}


div#ranking:hover {
background-image: url(imagenes/ranking_color.jpg);
opacity: 0.25;
opacity: 0.25;
opacity: 1;

}

div#correlatividades h2 {

background-color: rgba(10, 10, 10, 0.28);
height: 92%;
width: 103%;
margin-top: -30.7%;
margin-right: ;
float: right;
padding-top: 8%;
padding-left: 1%;
margin-top: 0%;
}

div#linea5{
display: none
}

div#cajon{

width: 100%;
height: 16%;
background-color: rgb(80,81,80);
margin: auto;
}

footer{

padding-top: 1%;   
padding-bottom: 1%;
padding-left: 1%;
padding-right: 1%;
height: 3rem;
clear: both; 
background: rgba(93, 177, 102, 0.58); 
text-align: center; 
color: rgb(236,238,194);
width: 90%;
margin: auto;
font-size: 0.6rem;
}
}   

/*--------------------------------------------------------------------------800---------------------------------------------------------------*/

@media all and (min-width: 641px) and (max-width: 800px){


body {
font-size: 10px;
font-family: 'Rosario', sans-serif, helvetica;
background-color: rgb(236,238,194)
}

div#bordesuperior {

width:800px;
height: 4.3rem;;
background-image: url(imagenes/bordearriba2.jpg);
margin: auto;
}


div#pagina {
margin: auto;
width:800px;
background-color: rgb(80, 81, 80);


}

header {
width:95%;
height: 16rem;
margin: auto;
margin-top: 1%;

}

div#logo {
padding-top: 3%;
height:8.5rem;
width: 8.5rem;
margin: auto;

}
div#logo img{

width: 100%;
height: 100%;

}

header nav {

float: right;
width: 100%;
margin: auto;
height: 17%;
padding-bottom: 2%;
margin-top: 3%;
border:none;
}

header nav ul li {
border-right-style: solid;
border-right-color: rgb(47,48,62);
border-left-style: solid;
border-left-color: rgb(47,48,62);
float: left;
width: 14.7%;
margin-right: 2%;
margin-top: 1%;
list-style-type:none;
text-decoration: none;
margin-left: 1.5%; 
height: 55%;  
}


header nav#botoneradearriba ul li a {
color: rgb(236,238,194);
font-size: 0.9rem;
background-color: rgb(80, 81, 80);
text-decoration: none;
padding-bottom: 5%;
padding-left: 5%;
padding-right: 5%;
padding-top: 5%;
margin-left: 10%;
width: 100%;
height: 100%;
}

header nav#botoneradearriba ul li a:hover {

color: rgb(153, 192, 2);
background-color: rgb(47,48,62);
font-size: 0.90rem;
padding-bottom: 5%;
padding-left: 5%;
padding-right: 5%;
padding-top: 5%;    
}

div#botones{
width: 8rem;
float: right;
height: 10rem;
}

div#botones img{

width: 100%;
height: 100%;

}

div#botones ul li {
width: 7rem;
height:1.5rem;
float: right;
}

div#botones ul {
list-style: none;
width:4.2rem;
height:3rem;
float: right;
padding-top: 0%;
margin-bottom:9%;

}
div#volver{
float:right;
margin-right: 6%;
}


div#redesgale {
   
width: 25%;
height: 35%;
float: left;
margin-left: 0;
margin-top: 1%;
margin-bottom: 0;


}

div#redesgale img{

width: 100%;
height: 100%;

}

div#redes ul {
margin: 0;
padding: 0;
float: left;
width: 13rem;
height: 2rem;
margin-top: 0%;
list-style-type:none;
padding-top: 0%;
margin-bottom: 6%;
margin-top: 2%;
}

div#redes ul li {
margin-left: 0%;
float: right;
width:2rem;
height:2rem;
margin-right:15%;

}



div#lineas {

border-bottom-style: solid;
border-bottom-color: rgb(236,238,194);
border-bottom-width: thick;
margin-top:-8.5%;
    width: 62rem;
float: left;
}

div#lineas2 {

border-bottom-style: solid;
border-bottom-color: rgb(236,238,194);
border-bottom-width: thick;
margin-top: 0.6%;
width: 62rem;
float: right;
}



article {
border-top-color: rgb(236,238,194);
border-top-style: solid;
width: 95%;
margin: auto;
background-color: rgb(236,238,194);
height: 60rem;
margin-top: 4%;

}


div#imagenes {
width:100%;
height: 26%;
margin-top: 0%;
border: none;
padding-bottom: 2%;   
}

div#imagenes img{
margin-top: 2%;
width: 95%;
height:90;
margin-left: 2.5%;

}


div#niveles{
width: 100%;
height: 33%;
margin-top: 3%;


}

div#nivel1 h1{
font-weight: 700;
font-size: 8rem;
color: rgb(236,238,194);
height: 100%;
margin-top: 0%
}

div#niveles div#nivel1 {
margin-left: 2.5%;
float: left;
width:46% ;
height:100%;
background-image: url(imagenes/nivel1.jpg);
margin-top: 0;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
text-shadow:3px 3px 6px rgb(10,10,10);
}

div#niveles div#nivel1:hover {
background-image: url(imagenes/nivel1_color.jpg);
opacity: 0.25;
opacity: 0.25;
opacity: 1;

}

div#nivel2 h2{
height: 100%;
margin-top: 0%;    
font-weight: 700;
font-size: 8rem;
color: rgb(236,238,194);}

div#niveles div#nivel2 {
margin-right: 2.5%;
float: right;
width:46%;
height: 100%;
background-image: url(imagenes/nivel2.jpg);
margin-top: 0;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
text-shadow:3px 3px 6px rgb(10,10,10);

}


div#niveles h2 a{

text-decoration: none;
color: rgb(236,238,194);

}


div#niveles div#nivel2:hover {
background-image: url(imagenes/nivel2_color.jpg);
opacity: 0.25;
opacity: 0.25;
opacity: 1;

}


div#linea3 {
border-bottom-style: solid;
border-bottom-color: rgb(80,81,80);
margin-top: 3%;


}



div#taller{
float:left;
width: 29%;
height: 22%;
margin-left: 2%;
background-image: url(imagenes/taller.jpg);
padding-left: 1%;
margin-top: 3%;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;    
}

div#taller h2{
text-shadow:3px 3px 6px rgb(10,10,10);
color: rgb(153,203,0);
font-size: 3rem;
width: 50%;
}

div#taller:hover {
background-image: url(imagenes/taller_color.jpg);
opacity: 0.25;
opacity: 0.25;
opacity: 1;

}

div#referentes h2{
color: rgb(62,165,43);
font-size: 2rem;
width:70%;
text-shadow:3px 3px 6px rgb(10,10,10);
height: 50%;
}

div#referentes{
background-image: url(imagenes/referentes.jpg);
margin-left: 34.5%;
width: 30%;
height: 22%;
margin-top:0%;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;    
}


div#referentes:hover {
background-image: url(imagenes/referentes_color.jpg);
opacity: 0.25;
opacity: 0.25;
opacity: 1;

}

div#ranking h2{
text-shadow:3px 3px 6px rgb(10,10,10);
color: rgb(91,177,105);
font-size: 3rem;
}

div#ranking{
height: 22%;
background-image: url(imagenes/ranking.jpg);
margin-top:-28%;
margin-right: 2%;
float: right;
width: 30%;
padding-top: 0;
padding-left: 1%;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;    
}


div#ranking:hover {
background-image: url(imagenes/ranking_color.jpg);
opacity: 0.25;
opacity: 0.25;
opacity: 1;

}

div#correlatividades h2 {

background-color: rgba(10, 10, 10, 0.28);
height: 92%;
width: 103%;
margin-top: -30.7%;
margin-right: ;
float: right;
padding-top: 8%;
padding-left: 1%;
margin-top: 0%;
}

div#linea5{
border-bottom-style: solid;
border-bottom-color: rgb(80,81,80);
margin-top: 3%;

}

div#cajon{

width: 100%;
height: 12%;
background-color: rgb(80,81,80);
margin: auto;
}

footer{

padding-top: 1%;   
padding-bottom: 1%;
padding-left: 1%;
padding-right: 1%;
height: 2.5rem;
clear: both; 
background: rgba(93, 177, 102, 0.58); 
text-align: center; 
color: rgb(236,238,194);
width: 58%;
margin: auto;
}    

}