/*****************************************************************************************************/

/* Menu */
*{
	margin:0px;
	paddding:0px;
	font-family: verdana;
	
}

header{
	margin:auto;
	margin-top:0px;
	width:1100px;
	height:130px;
	background-color: white;
	
}

div.contenedor{
	width: 100px;
	height: 130px;
	float: left;
	-webkit-transition: height .4s;
}

div#uno{
	/**/
	background-color: rgb(255, 255, 255);
}

div#dos{
	/**/
	background-color: rgb(247, 254, 46);
}

div#tres{
	/*background-color: rgb(249, 4, 4);*/
	background-color: rgb(88, 250, 130);
}

div#cuatro{
	/*background-color: rgb(58, 249, 4);*/
	background-color: rgb(46, 254, 247);
}

div#cinco{
	/*background-color: rgb(4, 249, 196);*/
	background-color: rgb(247, 211, 88);
}

div#seis{
	/*background-color: rgb(4, 17, 249);*/
	background-color: rgb(246, 191, 229);
}

div#siete{
	background-color: rgb(237, 249, 4);
}

div#ocho{
	background-color: rgb(249, 4, 180);
}



img.icon{
	display: block;
	margin:50px auto;
	background-color: rgba(255,255,255,.15);
	width: 40px;
	padding: 0px;
	-webkit-border-radius: 50%;
	-webkit-box-shadow: 0px 0px 0px 30px rgba(255,255,255,0);
	-webkit-transition: box-shadow .4s;
}

p.texto{
	font-size: 0.8em;
	color: black;
	text-align: center;
	padding-top: 0px;
	opacity: .6;
	-webkit-transition: padding-top .4s;
}

div.contenedor:hover{
	height: 150px;	
}

div.contenedor:hover p.texto{
	padding-top: 20px;
	opacity: 1;
}

div.contenedor:hover img.icon{
	-webkit-box-shadow: 0px 0px 0px 0px rgba(255,255,255,.6);
}

/*****************************************************************************************************/

/* Boton de rrespuesta */

  .boton_respuesta{
    text-decoration: none;
    padding: 10px;
    font-weight: 600;
    font-size: 20px;
    color: #ffffff;
    background-color: #1883ba;
    border-radius: 6px;
    border: 2px solid #0016b0;
  }
  .boton_respuesta:hover{
    color: #1883ba;
    background-color: #ffffff;
  }

/*****************************************************************************************************/

/* Boton OK */

  .boton_ok{

background-color: #2dc234;
background-image: -webkit-linear-gradient(rgba(41, 150, 47, .8), rgba(45, 194, 52, .2));
background-image: -moz-linear-gradient(rgba(41, 150, 47, .8), rgba(45, 194, 52, .2));
background-image: -o-linear-gradient(rgba(41, 150, 47, .8), rgba(45, 194, 52, .2));
background-image: linear-gradient(rgba(41, 150, 47, .8), rgba(45, 194, 52, .2));
-ms-border-radius:8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 8px 0 #197b1d, 0 10px 20px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 8px 0 #197b1d, 0 10px 20px rgba(0, 0, 0, .4);
box-shadow: 0 8px 0 #197b1d, 0 10px 20px rgba(0, 0, 0, .4);
color: #fff;
display: inline-block;
font-family: ‘Pacifico’, Arial, sans-serif;
font-size: 30px;
line-height: 1;
padding: 15px 25px;
text-decoration: none;
text-shadow: 0 -1px 1px rgba(25, 123, 29, .7);

}


/*****************************************************************************************************/

/* Boton NOK */

  .boton_nok{

background-color: #c2402c;
background-image: -webkit-linear-gradient(rgba(190, 62, 46, .8), rgba(194, 64, 44, .2));
background-image: -moz-linear-gradient(rgba(190, 62, 46, .8), rgba(194, 64, 44, .2));
background-image: -o-linear-gradient(rgba(190, 62, 46, .8), rgba(194, 64, 44, .2));
background-image: linear-gradient(rgba(190, 62, 46, .8), rgba(194, 64, 44, .2));
-ms-border-radius:8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 8px 0 #7b1919, 0 10px 20px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 8px 0 #7b1919, 0 10px 20px rgba(0, 0, 0, .4);
box-shadow: 0 8px 0 #7b1919, 0 10px 20px rgba(0, 0, 0, .4);
color: #fff;
display: inline-block;
font-family: ‘Pacifico’, Arial, sans-serif;
font-size: 30px;
line-height: 1;
padding: 15px 25px;
text-decoration: none;
text-shadow: 0 -1px 1px rgba(25, 123, 29, .7);

}

/*****************************************************************************************************/

/* Boton menu */

.button_inicio {
  background: #006699;
  border: none;
  color: #ffffff;
  font: 13px Tahoma, Arial, sans-serif;
  padding: 10px 15px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid #333;
  letter-spacing: 1px;
  /**** Sombra de texto ****/
  text-shadow: 0px -1px 0px #333333;
  /**** Bordes redondeados ****/
  /* W3C */
  border-radius: 5px;
  /* Firefox */
  -moz-border-radius: 5px;
  /**** Degradados ****/
  /*  Chrome 1-9 and Safari 4-5.0  */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #8b8b8b), color-stop(0.5, #707070), color-stop(0.5, #5e5e5e), color-stop(1, #777777));
  /*  Chrome 10+ Safari 5.1+ Mobile Safari  */
  background-image: -webkit-linear-gradient(top, #8b8b8b, #707070 50%, #5e5e5e 50%, #777777);
  /*  Firefox 3.6+  */
  background-image: -moz-linear-gradient(top, #8b8b8b, #707070 50%, #5e5e5e 50%, #777777);
  /*  IE 10+  */
  background-image: -ms-linear-gradient(top, #8b8b8b, #707070 50%, #5e5e5e 50%, #777777);
  /*  Opera 11.10+  */
  background-image: -o-linear-gradient(top, #8b8b8b, #707070 50%, #5e5e5e 50%, #777777);
  /*  W3C  */
  background-image: linear-gradient(top, #8b8b8b, #707070 50%, #5e5e5e 50%, #777777);
}

.button_inicio:hover {
  /*  Chrome 1-9 and Safari 4-5.0  */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5d5d5d), color-stop(0.5, #424242), color-stop(0.5, #383838), color-stop(1, #535353));
  /*  Chrome 10+ Safari 5.1+ Mobile Safari  */
  background-image: -webkit-linear-gradient(top, #5d5d5d, #424242 50%, #383838 50%, #535353);
  /*  Firefox 3.6+  */
  background-image: -moz-linear-gradient(top, #5d5d5d, #424242 50%, #383838 50%, #535353);
  /*  IE 10+  */
  background-image: -ms-linear-gradient(top, #5d5d5d, #424242 50%, #383838 50%, #535353);
  /*  Opera 11.10+  */
  background-image: -o-linear-gradient(top, #5d5d5d, #424242 50%, #383838 50%, #535353);
  /*  W3C  */
  background-image: linear-gradient(top, #5d5d5d, #424242 50%, #383838 50%, #535353);
}
.button_inicio:active {
  /*  Chrome 1-9 and Safari 4-5.0  */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000000), color-stop(0.05, #2b2b2b), color-stop(0.5, #434343), color-stop(1, #3e3e3e));
  /*  Chrome 10+ Safari 5.1+ Mobile Safari  */
  background-image: -webkit-linear-gradient(top, #000000, #2b2b2b 5%, #434343 50%, #3e3e3e);
  /*  Firefox 3.6+  */
  background-image: -moz-linear-gradient(top, #000000, #2b2b2b 5%, #434343 50%, #3e3e3e);
  /*  IE 10+  */
  background-image: -ms-linear-gradient(top, #000000, #2b2b2b 5%, #434343 50%, #3e3e3e);
  /*  Opera 11.10+  */
  background-image: -o-linear-gradient(top, #000000, #2b2b2b 5%, #434343 50%, #3e3e3e);
  /*  W3C  */
  background-image: linear-gradient(top, #000000, #2b2b2b 5%, #434343 50%, #3e3e3e);
}

/*****************************************************************************************************/

/* Botones colores */

.boton{
      text-shadow: 0px 1px rgba(0, 0, 0, 0.2);
            text-align:center;
            text-decoration: none;
      font-family: 'Helvetica Neue', Helvetica, sans-serif;
      display:inline-block;
            color: #FFF;
            background: #7F8C8D;
            padding: 7px 20px;
            white-space: nowrap;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 100px;
            margin: 10px 5px;
            -webkit-transition: all 0.2s ease-in-out;
            -ms-transition: all 0.2s ease-in-out;
            -moz-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
   
.azul{
  background: #3498DB;
  box-shadow: 0px 5px 0px 0px #2980B9;
}

.azul:hover{
  background: #39a0e5;
}

.azul:active{
  box-shadow: 0px 2px 0px 0px #2980B9;
}

.verde{
  background: #2ECC71;
  box-shadow: 0px 5px 0px 0px #27AE60;
}

.verde:hover{
  background: #32db78;
}

.verde:active{
  box-shadow: 0px 2px 0px 0px #27AE60;
}

.rojo{
  background: #E74C3C;
  box-shadow: 0px 5px 0px 0px #C0392B;
}

.rojo:hover{
  background: #ff5242;
}

.rojo:active{
  box-shadow: 0px 2px 0px 0px #C0392B;
}

/*****************************************************************************************************************/

/*  */

/****************************************************************************************************************/