html,body{width:100%;height:100%;margin:0;background:#f4f3f0;color:black;font-weight:bold;font-family: 'Quicksand', sans-serif;font-size:16px;}
.contenido{width:100%;float:left;}
.top{margin-top:150px;}

.contenido2{width:100%;float:left;position:relative;z-index:99999;background:white;padding-bottom:50px;}
.central{width:90%;margin:0 auto;}
#cabecera{background-color:white;width:100%;height:auto;padding:10px 0 40px 0;float:left;z-index:9999;position:fixed;border-bottom:solid 1px #BFBFBF;}
#mask_banner{width:100%;height:400px;position:absolute;left:0;top:110px;background:url('../img/pixel1.png');z-index:9999;}
#contServ{background-image:url('../images/fondo_g.png');}
#logo_white{height:120px;float:left;top:0;left:-80px;position:fixed;z-index:1;width:40%;}
#logo{height:80px;float:left;position:relative;z-index:9999;}
#logo img{height:100%;}
#mask{width:100%;height:100%;top:0;left:0;position:fixed;background-image:url('../img/pixel1.png');z-index:99;}
h1{margin:0;padding:0;font-family: 'Roboto Condensed', sans-serif;}
h2{font-family: 'Quicksand', sans-serif;font-size:24px;}
#infoHome ul{width:50%;margin:0;padding:0;height:auto;float:left;text-align:justify;min-width:500px;}
.topul{padding-top:30px;}
#fundacion{margin-top:70px;width:100%;padding:30px;background-color:#E5E5E5;border: solid 1px #BFBFBF; color:#4D4D4D;text-align:center;}
#infoHome ul li{list-style:none;padding-right:40px;}
#infoHome ul li h1{margin-left:50px;}
#infoHome ul li div{height:100px;padding:0 10% 0 10%;}
#infoHome ul li label{width:60%;margin-top:20px;float:left;}
#infoHome ul li img{width:90%;}
.block{height:100px;float:left;}
.icon_img{text-align:center;}
.icos_col{max-width:60px;float:right;width:30%;padding:0;margin-top:-20px;}
#liMail{list-style-image:url('../img/mail.png');}
#liTel{list-style-image:url('../img/tel.png');}
#liMarker{list-style-image:url('../img/marker.png');}
.col li{list-style-position:inside;}
.intro{text-align:center;padding:20px;}

/*SERVICIOS*/
#servicios{width:100%;height:350px;float:left;overflow:hidden;}
#servicios img{width:100%;}
#mapa{width:100%;height:500px;float:left;}
.ulServ ul{margin:0 auto;background:blue;}
.ulServ img{width:100%;}
.ulServ li{float:left;width:32%;padding:2%;float:left;min-width:400px;list-style:none;}
.ulServ ul li div{height:100px;padding:0 10% 0 10%;}
.ulServ ul li label{width:60%;margin-top:20px;float:left;}
/*FORMULARIO*/
#ulContacto img{width:100%;}
#formulario{
		width:50%;
		float:left;
		margin-top:20px;
		margin-bottom:70px;
		max-width:500px;
}
#datos_c{
	padding:20px;
	float:right;
	margin-top:10%;
	width:50%;
}
#datos_c li{list-style:none;}
#datos_c img{float:left;max-width:30px;margin-right:15px;}
#ulContacto li{border-top:solid 1px #db4f65;padding-top:10px;padding-bottom:20px;}
/* Chisato */
.input {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin: 1em;
	max-width: 500px;
	width: calc(100% - 2em);
	vertical-align: top;
}

.input__field {
	position: relative;
	display: block;
	float: right;
	padding: 0.8em;
	width: 60%;
	border: none;
	border-radius: 0;
	background: #f0f0f0;
	color: #aaa;
	font-weight: 400;
	font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-appearance: none; /* for box shadows to show on iOS */
}

.input__field:focus {
	outline: none;
}

.input__label {
	display: inline-block;
	float: right;
	padding: 0 1em;
	width: 40%;
	color: #696969;
	font-weight: bold;
	font-size: 100%;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.input__label-content {
	position: relative;
	display: block;
	padding: 1em 0;
	width: 100%;
}

.graphic {
	position: absolute;
	top: 0;
	left: 0;
	fill: none;
}

.icon {
	color: #ddd;
	font-size: 150%;
}
#btnEnviar{padding:10px;background:black;border:solid 1px black;color:white;float:right;width:80px;text-align:center;margin-right:15px;}
#btnEnviar:hover{color:black;border:solid 1px #b48608;background:white;cursor:pointer;cursor:hand;}
.input--chisato {
	padding-top: 2em;
}

.input__field--chisato {
	width: 100%;
	padding: 0.8em 0.5em;
	background: transparent;
	border: 2px solid;
	color: #b5b5b5;
	-webkit-transition: border-color 0.25s;
	transition: border-color 0.25s;
}

.input__label--chisato {
	width: 100%;
	position: absolute;
	top: 0;
	text-align: left;
	overflow: hidden;
	padding: 0;
	pointer-events: none;
	-webkit-transform: translate3d(0, 3em, 0);
	transform: translate3d(0, 3em, 0);
}

.input__label-content--chisato {
	padding: 0 1em;
	font-weight: 400;
	color: #b5b5b5;
}

.input__label-content--chisato::after {
	content: attr(data-content);
	position: absolute;
	top: -200%;
	left: 0;
	color: #da6484;
	font-weight: 800;
}

.input__field--chisato:focus,
.input--filled .input__field--chisato {
	border-color: #da6484;
}

.input__field--chisato:focus + .input__label--chisato,
.input--filled .input__label--chisato {
	-webkit-animation: anim-chisato-1 0.25s forwards;
	animation: anim-chisato-1 0.25s forwards;
}

.input__field--chisato:focus + .input__label--chisato .input__label-content--chisato,
.input--filled .input__label-content--chisato {
	-webkit-animation: anim-chisato-2 0.25s forwards ease-in;
	animation: anim-chisato-2 0.25s forwards ease-in;
}

@-webkit-keyframes anim-chisato-1 {
	0%, 70% {
		-webkit-transform: translate3d(0, 3em, 0);
		transform: translate3d(0, 3em, 0);
	}
	71%, 100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes anim-chisato-2 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	70%, 71% {
		-webkit-transform: translate3d(0, 125%, 0);
		transform: translate3d(0, 125%, 0);
		opacity: 0;
		-webkit-animation-timing-function: ease-out;
	}
	100% {
		color: transparent;
		-webkit-transform: translate3d(0, 200%, 0);
		transform: translate3d(0, 200%, 0);
	}
}

@keyframes anim-chisato-1 {
	0%, 70% {
		-webkit-transform: translate3d(0, 3em, 0);
		transform: translate3d(0, 3em, 0);
	}
	71%, 100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes anim-chisato-2 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	70%, 71% {
		-webkit-transform: translate3d(0, 125%, 0);
		transform: translate3d(0, 125%, 0);
		opacity: 0;
		-webkit-animation-timing-function: ease-out;
	}
	100% {
		color: transparent;
		-webkit-transform: translate3d(0, 200%, 0);
		transform: translate3d(0, 200%, 0);
	}
}

/*FOOTER*/
#footer{width:100%;float:left;font-size:12px;height:auto;position:fixed;z-index:9999;bottom:0;left:0;background-color:#272727;color:#E5E5E5;color:#b1c9d9;padding:20px 0 20px 0;}
#foot1{width:70%;float:left;text-align:left;}
#foot2{width:30%;float:left;text-align:right;}
#footer a{color:#E5E5E5;}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
	.central {width:90%;}
	#logo{height:auto;float:left;position:relative;z-index:9999;width:30%;margin-right:10%;}
	#logo img{width:100%;height:auto;}
	#logo h1{font-size:12px;}
	#cabecera {padding:15px;}
	#fundacion {width:inherit;}
	#infoHome ul {width:100%;}
	#footer {position:relative;float:left;margin-top:20px;}
	#formulario {width:100%;}
	#datos_c {width:100%;}
	#foot2 {width:100%;text-align:center;}
	#foot1 {width:100%;text-align:center;}
}
