@charset "utf-8";
/* CSS Document */

#todisimo{
	
	}
body {
	background-color: #F6F6F6;
}
@font-face{
 font-family: "voda";
 src: url("../dis.ttf");
}
.cuadrado{
	cursor:pointer;
	width:20%;
	min-width:250px;
	float:left;
	margin-left:2.5%;
	padding:1%;
	border-radius: 20px 20px 20px 20px;
	-moz-border-radius:  20px 20px 20px 20px;
	-webkit-border-radius:  20px 20px 20px 20px;

	background-color: #FFF;
	
	background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(245,245,245,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#f5f5f5", GradientType=0 );
-webkit-box-shadow: -8px 9px 35px -1px rgba(0,0,0,0.01);
-moz-box-shadow: -8px 9px 35px -1px rgba(0,0,0,0.01);
box-shadow: -8px 9px 35px -1px rgba(0,0,0,0.01);

filter: url("#grayscale"); /* Versión SVG para IE10, Chrome 17, FF3.5, Safari 5.2 and Opera 11.6 */
opacity:0.5;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%); /* Para cuando es estándar funcione en todos */
filter: Gray(); /* IE4-8 and 9 */

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.cuadrado:hover{
	opacity:1;
	-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
-webkit-box-shadow: -8px 9px 35px -1px rgba(0,0,0,0.08);
-moz-box-shadow: -8px 9px 35px -1px rgba(0,0,0,0.08);
box-shadow: -8px 9px 35px -1px rgba(0,0,0,0.08);
filter: none;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
	
	}
 
.cuadrado1 {
	width:100%;
	background:#f2f2f2;
	float:left;
	margin-top:100px;
	border-radius: 6px 6px 6px 6px;
	-moz-border-radius: 6px 6px 6px 6px;
	-webkit-border-radius: 6px 6px 6px 6px;
	padding-top: 1%;
	padding-right: 0%;
	padding-bottom: 1%;
	padding-left: 0%;
	border-top-width: 2px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #dedede;
	border-right-color: #dedede;
	border-bottom-color: #dedede;
	border-left-color: #dedede;
}
.cuadrado2 {
	border: 0px solid #000000;
	border: 0px solid #000000;
	width:150px;
	
	float:left;
	text-align:left;
	padding:1%;
	border-radius: 6px 6px 6px 6px;
	-moz-border-radius: 6px 6px 6px 6px;
	-webkit-border-radius: 6px 6px 6px 6px;
	margin-left:2.5%;
	font-family: voda;
	font-size: 12px;
	color: #000;
	line-height: 22px;
	letter-spacing: 0.1em;
	word-spacing: .1em;
}
.cuadrado3 {
	border: 0px solid #000000;
	border: 0px solid #000000;
	width:150px;
	
	float:left;
	text-align:left;
	padding:1%;
	border-radius: 6px 6px 6px 6px;
	-moz-border-radius: 6px 6px 6px 6px;
	-webkit-border-radius: 6px 6px 6px 6px;
	margin-left:15%;

	font-size: 12px;
	color: #000;
	line-height: 22px;;}
	.boton{
		font-family:voda;
	/* estilos para la tipografia del botón*/
	color: #000;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
	border: 0;
	text-decoration:none;

	/* propiedades para la animacion del boton */
	
	transition: all .2s linear;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	position: relative;
	bottom: 0;
	letter-spacing: .1em;
	
}


.boton:hover{
	font-size:12px;
	/* Posicion del boton al clickearlo */
letter-spacing: .2em;
		color:#3f89c6;
}


#fadimgg1
{
	display: none;
	position: absolute;
	width: 100%;
}

#fadimgg2
{
	display: none;
	position: absolute;
	width: 100%;
}
#fadimgg3
{	width: 100%;
	display: none;
	position: absolute;
}
#fadimgg4
{	width: 100%;
	display: none;
	position: absolute;
}
#fadimgg5
{	width: 100%;
	display: none;
	position: absolute;
}
#fadimgg6
{	width: 100%;
	display: none;
	position: absolute;
}
#fadimgg7
{	width: 100%;
	display: none;
	position: absolute;
}
#fadimgg8
{	width: 100%;
	display: none;
	position: absolute;
}
#fadimgg9
{	width: 100%;
	display: none;
	position: absolute;
}

.grises  {
filter: url("#grayscale"); /* Versión SVG para IE10, Chrome 17, FF3.5, Safari 5.2 and Opera 11.6 */
-webkit-filter: grayscale(20%);
-moz-filter: grayscale(20%);
-ms-filter: grayscale(20%);
-o-filter: grayscale(20%);
filter: none;

 /* IE4-8 and 9 */

-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-ms-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
transition: all 0.9s ease;
}
.grises:hover { 
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%); /* Para cuando es estándar funcione en todos */
filter: Gray();

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.botonul{
	font-family:voda;
	/* estilos para la tipografia del botón*/
	color:#333;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
	border: 0;
	text-decoration:none;
	

	/* propiedades para la animacion del boton */
	
	transition: all .2s linear;
	line-height:15px;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	position: relative;
	bottom: 0;
	letter-spacing: 0.1em;	
}


.botonul:hover{
	font-size:10px;
	/* Posicion del boton al clickearlo */
letter-spacing: .2em;
		color:#000;
}



.cuadrado2 {	border: 0px solid #000000;
	border: 0px solid #000000;
	margin-left:40px;	width:110px;
	float:left;
	text-align:left;
	padding:1%;
	border-radius: 6px 6px 6px 6px;
	-moz-border-radius: 6px 6px 6px 6px;
	-webkit-border-radius: 6px 6px 6px 6px;
	margin-left:35px;
	font-family: voda;
	font-size: 12px;
	color: #000;
	line-height: 22px;
	letter-spacing: 0.1em;
	word-spacing: .1em;
}
.cuadrado3 {	border: 0px solid #000000;
	border: 0px solid #000000;
width:110px;
	float:left;
	text-align:left;
	padding:1%;
	border-radius: 6px 6px 6px 6px;
	-moz-border-radius: 6px 6px 6px 6px;
	-webkit-border-radius: 6px 6px 6px 6px;

	font-size: 12px;
	color: #000;
	line-height: 22px;
font-family: voda;
}