/* CSS Document */

* {

	padding:0;
	margin:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	
@font-face { font-family: 'MiNuevaFuente';
src: url('../FUTURAM.ttf');
}

@font-face { font-family: 'FuturaBold';
src: url('../FUTURAB.ttf');
}

/*estilos formulario*/

h1 {
	width:100%;
	height:auto;
	float:left;
	color: #666666;
	padding:3px;
	text-align:center;
	position:relative;
	font-size:28px;	
}


#contacto {
	width:70%;
	height:auto;
	padding:2%;
	display:inline-block;
	font-family: Arial, Helvetica, sans-serif;
	background: #fff;
	float:left;
	
}

.contact_form {
	list-style:none;
	width:100%;
	height:auto;
		
}

.contact_form ul {
	list-style:none;
	width:100%;	
	padding:0px;
	display:inline-block;
	float:left;
	vertical-align:top;
}

.contact_form li {
	width:33.33%;
	padding:10px;
	position:relative;
	color:#000;
	margin-top:10px;
	
	float:left;	
}
.contact_form input {
	height:42px;
	padding:5px 8px;
	width:100%;
	border:#E4E4E4;
}

.contact_form .comenta {
	width:100%;
	padding: 1%;
	position:relative;
	color:#000;
	float:left;
	margin:0px;
}

.contact_form textarea {
	padding:8px;
	width:100%;
	background-color: #E4E4E4;
	border:#E4E4E4;
}

.nota {
	display:inline;
	margin-left:15px;
	margin-top:10px;
	font-size:10px;
	float:left;
}

.contact_form .check {
	width:100%;
	padding-bottom:0px;
	padding-top:0px;
	position:relative;
	color:#000;
	float:left;
	text-align:left;
	margin:0px;
	vertical-align:middle;
}

.contact_form button {
	width:20%;
	float:right;
}

.contact_form input, .contact_form textarea {
	padding-right:30px;
	
}

.contact_form input:focus, .contact_form textarea:focus {
	background:#E4E4E4;
	padding-right:70px;
	-moz-padding-right:70px;
	-webkit-padding-right:70px;
}

.contact_form input:required, .contact_form textarea:required {
	background: #E4E4E4  url(../Imagenes/asterix.png) no-repeat 98% center;
}
	
.contact_form input:required:valid, .contact_form textarea:required:valid, .contact_form input:valid {
	background:#E4E4E4 url(../Imagenes/valido.png) no-repeat 98% center;		
}

.contact_form input:focus:invalid, .contact_form textarea:focus:invalid{
	background:#E4E4E4 url(../Imagenes/invalido.png) no-repeat 98% center;	
}

.form_hint {
	text-decoration:none;
	list-style:none;
	background: #FF0000;
	color:#FFFFFF;
	margin-left:8px;
	padding:1px 6px;
	z-index:999;
	position: absolute;
	display:none;
	font-size:15px;
}

.form_hint::before {
	content:"\25C0";
	color: #009900;
	position:absolute;
	top:1px;
	left:-10px;
}

.contact_form input:focus + .form_hint {
	display:inline
}

.contact_form input:required:valid + .form_hint {
	background:#28912f;
}

.contact_form input:required:valid + .form_hint::before {
	color:#28921f;
}

button.submit {
	background: #fff;
	color: #495677;
	padding:6px 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:18px;
	text-align:center;
	border: solid 1px #495677;
}

button.submit:hover {
	background:  #495677;
	color:#fff;
	cursor:pointer;
}

button.submit:active {
	box-shadow:0 0 10px 5px #D7EDFB inset;
	-moz-box-shadow:0 0 10px 5px #D7EDFB inset;
	-webkit-box-shadow:0 0 10px 5px #D7EDFB inset;
}

input.aviso {
	font-size:1rem;
	width:19px;
	height:19px;
	display:inline;
	float:left;
	margin-right:10px;
	vertical-align:top;
}	
	
/*termina estilo formulario*/

#contel {
	width:30%;
	height:auto;
	display:inline-block;
	text-align:center;
	float:left;
}

#telefonos {
	width:100%;
	height:auto;
	display:inline-block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	text-align:left;
	padding: 12% 0;
	color:#000;
	
}

#telefonos li {
	list-style:none;
	margin-top:3px;
	color:#666666;
}

#telefonos li.salto {
	list-style:none;
	margin-bottom:15px;
	margin-top:3px;	
}

#telefonos li#bold{
	font-size:22px;
	font-weight:bold;
}

#telefonos li a {
	text-decoration:none;
	color: #495677;
}



#ubicacion {
	width:100%;
	height:auto;
	display:inline-block;
	font-family:'MiNuevaFuente';
	float:left;
}

#mapa {
	width:100%;
	height:350px;
	float:left;
}

@media (max-width: 1200px) and (min-width: 1025px) {

#contacto {
	width:70%;
	height:auto;
	padding:8px 10px;
	margin-bottom:1%;
}

h1 {
	width:100%;
	height:auto;
	padding:3px;
	font-size:1.4rem;
}

.contact_form ul {
	width:100%;	
	padding:0 0;
}

.contact_form li {
	width:33%;
	padding:5px;
	margin-top:0px;
	margin-right:0px;
}

.contact_form input {	
    height: 40px;
}

.contact_form .comenta {
	width:100%;
	padding:5px;
	margin-top:0px;
}

.nota {
	margin-left:10px;
	margin-top:0px;
	font-size:.7rem;
}

.contact_form .check {
	width:100%;
	float:left;
	font-size:1.1rem;
	margin-top:1%;
}

input.aviso {
	font-size:.9rem;
	width:18px;
	height:18px;
	margin-bottom:0;
}

button.submit {
	padding:3px;
	font-size:1.1rem;
	vertical-align: top;
	float:right;
	margin:0px;
}

.contact_form button {
	width:25%;
}

#contel {
	width:30%;
	height:auto;
	background-color:#FFFFFF;
	margin-bottom:1%;
}

#telefonos {
	width:100%;
	height:auto;
	font-size:1.1rem;
	padding: 2% 4%;
}

}

@media (max-width: 1024px) and (min-width: 769px) {

#contacto {
	width:70%;
	height:auto;
	padding:2px 10px;
	margin-bottom:1%;
}

h1 {
	width:100%;
	height:auto;
	padding:3px;
	font-size:1.4rem;
}

.contact_form ul {
	width:100%;	
	padding:0 0;
}

.contact_form li {
	width:33%;
	padding:5px;
	margin-top:0px;
	margin-right:0px;
}

.contact_form input {	
    height: 30px;
}

.contact_form .comenta {
	width:100%;
	padding:5px;
	margin-top:0px;
}

.nota {
	margin-left:10px;
	margin-top:5px;
	font-size:.7rem;
}

.contact_form .check {
	width:100%;
	float:left;
	font-size:1.1rem;
}

input.aviso {
	font-size:.9rem;
	width:18px;
	height:18px;
	margin-bottom:1%;
}

button.submit {
	padding:3px;
	font-size:1.1rem;
	vertical-align: top;
	float:right;
	margin:0px;
}

.contact_form button {
	width:18%;
}

#contel {
	width:30%;
	height:auto;
	background-color:#FFFFFF;
}

#telefonos {
	width:100%;
	height:auto;
	font-size:0.9rem;
	padding: 2% 4%;
}


}

@media (max-width: 768px) and (min-width: 481px) {

#contacto {
	width:100%;
	height:auto;
	padding:2px;	
}

h1 {
	width:100%;
	height:auto;
	padding:3px;
	font-size:1.4rem;
}

.contact_form ul {
	width:100%;	
	padding:0 0;
}

.contact_form li {
	width:33%;
	padding:5px;
	margin-top:0px;
	margin-right:0px;
}

.contact_form input {	
    height: 30px;
}

.contact_form .comenta {
	width:100%;
	padding:5px;
	margin-top:0px;
}

.contact_form .check {
	width:100%;
	float:left;
	font-size:1.1rem;
}

input.aviso {
	font-size:1rem;
	width:19px;
	height:19px;
	margin-bottom:1%;
}

button.submit {
	padding:4px;
	font-size:1.1rem;
	vertical-align: top;
	float:right;
}

.contact_form button {
	width:25%;
	margin-left:5%;
}

#contel {
	width:50%;
	height:auto;
	background-color:#FFFFFF;
	margin-top: 3%;
}

#telefonos {
	width:100%;
	height:auto;
	font-size:1rem;
	padding: 0 4%;
	float: left;
}

#ubicacion {
	width:50%;
	height:auto;
	display:inline-block;
	font-family:'MiNuevaFuente';
	float:left;
}

}


@media (max-width: 480px) and (min-width: 320px) {

h1 {
	width:100%;
	height:auto;
	padding:3px;
	font-size:1.4rem;
}

#contacto {
	width:100%;
	height:auto;
	padding:2px;	
}

.contact_form ul {
	width:100%;	
	padding:0 0;
}

.contact_form li {
	width:100%;
	padding:10px;
	margin-top:0px;
	margin-right:0px;
}

.contact_form .check {
	width:100%;
	float:left;
	font-size:1.1rem;
}

input.aviso {
	font-size:0.9rem;
	width:17px;
	height:17px;
	margin-bottom:4%;
}

.contact_form .comenta {
	width:100%;
	padding:12px;
	margin-top:0px;
}

button.submit {
	padding:6px 6px;
	font-size:1.3rem;
	vertical-align:middle;
}

.contact_form button {
	width:100%;
	margin-left:0px;
}

#contel {
	width:100%;
	height:auto;
	background-color:#FFFFFF;
}

#telefonos {
	width:100%;
	height:auto;
	font-size:18px;
	padding: 4%;
}

}