/*  Este CSS es sólo para la creación de la "libreta" de "Municipios y Comarcas" */


.icono
{
  height:80px; 
  width:80px;
  position: absolute;
  z-index:0;
  left:0px;
  margin:0;
  padding:0;
}

.caja
{
  height:80px; 
  width:240px;
  position: absolute;
  z-index:1;
  left:80px;
  overflow:hidden;
  margin:0;
  padding:0;
}

.verde 
{
  background: rgb(185,223,200); /* Old browsers */
  background: -moz-linear-gradient(left,  rgba(185,223,200,1) 0%, rgba(109,183,139,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(185,223,200,1)), color-stop(100%,rgba(109,183,139,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  rgba(185,223,200,1) 0%,rgba(109,183,139,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  rgba(185,223,200,1) 0%,rgba(109,183,139,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  rgba(185,223,200,1) 0%,rgba(109,183,139,1) 100%); /* IE10+ */
  background: linear-gradient(to right,  rgba(185,223,200,1) 0%,rgba(109,183,139,1) 100%); /* W3C */
  /*   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9dfc8', endColorstr='#6db78b',GradientType=1 ); /* IE6-9 */ 
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9dfc8', endColorstr='#6db78b',GradientType=1 )"; /* IE6-9 */
  top:0px;
}

/*background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(115,88,100,0.9220063025210083) 100%, rgba(0,212,255,1) 100%);*/
.azul 
{
  background: rgb(184,198,223); /* Old browsers */
  background: -moz-linear-gradient(left,  rgba(184,198,223,1) 0%, rgba(109,136,183,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(184,198,223,1)), color-stop(100%,rgba(109,136,183,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  rgba(184,198,223,1) 0%,rgba(109,136,183,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  rgba(184,198,223,1) 0%,rgba(109,136,183,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  rgba(184,198,223,1) 0%,rgba(109,136,183,1) 100%); /* IE10+ */
  background: linear-gradient(to right,  rgba(184,198,223,1) 0%,rgba(109,136,183,1) 100%); /* W3C */
  /*   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8c6df', endColorstr='#6d88b7',GradientType=1 ); /* IE6-9 */ 
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8c6df', endColorstr='#6d88b7',GradientType=1 )"; /* IE6-9 */
 
  top:80px;
}

.rojo 
{
  background: rgb(223,185,199); /* Old browsers */
  background: -moz-linear-gradient(left,  rgba(223,185,199,1) 0%, rgba(183,109,136,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(223,185,199,1)), color-stop(100%,rgba(183,109,136,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  rgba(223,185,199,1) 0%,rgba(183,109,136,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  rgba(223,185,199,1) 0%,rgba(183,109,136,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  rgba(223,185,199,1) 0%,rgba(183,109,136,1) 100%); /* IE10+ */
  background: linear-gradient(to right,  rgba(223,185,199,1) 0%,rgba(183,109,136,1) 100%); /* W3C */
  /*   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfb9c7', endColorstr='#b76d88',GradientType=1 ); /* IE6-9 */ 
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfb9c7', endColorstr='#b76d88',GradientType=1 )";
  top:160px;
}
.marron {
	
	background: rgb(255,128,0);
 background: -moz-linear-gradient(left,  rgba(255,128,0,1) 0%, rgba(245,125,105,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,212,255,1)), color-stop(100%,rgba(245,125,105,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  rgba(255,128,0,1) 0%,rgba(245,125,105,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  rgba(255,128,0,1) 0%,rgba(245,125,105,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  rgba(255,128,0,200,1) 0%,rgba(245,125,105,1) 100%); /* IE10+ */
  background: linear-gradient(to right,  rgba(255,128,0,200,1) 0%,rgba(245,125,105,1) 100%); /* W3C */
top:240px;  
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfd1b9', endColorstr='#b79c6d',GradientType=1 )";
}
.amarillo 
{
  background: rgb(223,209,185); /* Old browsers */
  background: -moz-linear-gradient(left,  rgba(223,209,185,1) 0%, rgba(183,156,109,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(223,209,185,1)), color-stop(100%,rgba(183,156,109,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  rgba(223,209,185,1) 0%,rgba(183,156,109,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  rgba(223,209,185,1) 0%,rgba(183,156,109,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  rgba(223,209,185,1) 0%,rgba(183,156,109,1) 100%); /* IE10+ */
  background: linear-gradient(to right,  rgba(223,209,185,1) 0%,rgba(183,156,109,1) 100%); /* W3C */
  /*   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfd1b9', endColorstr='#b79c6d',GradientType=1 ); /* IE6-9 */ 
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfd1b9', endColorstr='#b79c6d',GradientType=1 )";
  top:320px;
}


.libreta {
  cursor:pointer;
  position: relative;
  background: black;
  overflow:hidden;
  margin: 20px;
  padding:0px;
  height: 400px;
  width: 320px;
  
  font-size:1.2em;
  font-family: Arial, Helvetica, sans-serif;
  
  border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
    
  -webkit-box-shadow: 10px 10px 5px -2px rgba(0,0,0,0.81);
  -moz-box-shadow: 10px 10px 5px -2px rgba(0,0,0,0.81);
  box-shadow: 10px 10px 5px -2px rgba(0,0,0,0.81);

  text-align:center;
  font-size:1.5em;
  font-family: Arial, Helvetica, sans-serif;

  margin:4rem auto;  /* Al ser el posicionamiento relativo, utilizamos "auto" para centrar horizontalmente */
  
}

.libreta img
{        
  max-width: 10%;
  max-height: 10%;
  transform: scale(7);
}

.libreta form
{
  /*margin:25px auto; */
  /*
 margin:15px auto;   
 visibility:hidden; */ /* ocultamos los formularios, que mostraremos en siguiente propiedad */
 display:none;
}

.libreta figure[class~="caja"]:hover form, 
#icono_1:hover ~ #entidades form, 
#icono_2:hover ~ #comarcas form, 
#icono_3:hover ~ #partidos form, 
#icono_4:hover ~ #emisoras form
	{
		/*visibility:visible;   */
		display:block;
	}

.libreta p
{
  text-align:center;
}

.libreta input
{
  font-size:0.5em;
}

.libreta figure
{
  -webkit-transition: all 1600ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
    -moz-transition: all 1600ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
      -o-transition: all 1600ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
	  transition: all 1600ms cubic-bezier(0.075, 0.820, 0.165, 1.000); /* easeOutCirc */

  -webkit-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
    -moz-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
      -o-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
	  transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); /* easeOutCirc */
  
  padding-top:30px;
}


.libreta figure[class~="caja"]:hover , #icono_1:hover ~ #entidades, #icono_2:hover ~ #comarcas, #icono_3:hover ~ #partidos, #icono_4:hover ~ #emisoras
{
  z-index:6;

  top:0px;
  height:400px;
  width:240px;
  text-align:center;
  padding-top:10px;

  
  -webkit-transition: all 1600ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
    -moz-transition: all 1600ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
      -o-transition: all 1600ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
	  transition: all 1600ms cubic-bezier(0.075, 0.820, 0.165, 1.000); /* easeOutCirc */

  -webkit-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
    -moz-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
      -o-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
	  transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); /* easeOutCirc */

}

.libreta figure[class~="caja"]:hover 
{
  top:0px;
}