/* CSS Document */

#top nav ul li#boton1 {
    background: url(../images/btn-inicio-n.png) no-repeat top center;
}

#top nav ul li#boton1:hover {
    background: url(../images/btn-inicio.png) no-repeat top center;
}

#top nav ul li#boton5 {
    background: url(../images/btn-contacto-over.png) no-repeat top center;
}

header {
    width: 100%;
    height: 856px;
    background: url(../images/back-header-contacto.jpg) top center no-repeat;
}

#header-contacto {
    width: 1080px;
    height: 551px;
    margin: auto;
}

#texto-header-contacto {
    width: 380px;
    height: 220px;
    float: left;
    margin: 100px 0 0 80px;
}

#texto-header-contacto h2 {
    margin: 0;
    color: #80B93F;   
}

#texto-header-contacto h3 {
    color: #EA861E; 
    margin: 0 0 35px 0;
}

#texto-header-contacto a {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    color: white;
    background: #299ED5;
    padding: 10px 28px 10px 28px;
    transition: background 0.3s ease-in;
    border-radius: 40px;
    text-decoration: none;
}

#texto-header-contacto a:hover {
    background: #2FB5EA;     
}

#info-contacto {
    width: 1080px;
    height: 119px;
    text-align: center;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

#info-contacto img {
    margin: 0;   
}

#info-contacto1, #info-contacto2, #info-contacto3 {
    width: 360px;
    height: 119px;
    float: left;
}

#info-contacto1 p {
    font-size: 26px;   
    margin-top: 10px; 
}

#info-contacto2 p {
    font-size: 22px;   
    margin-top: 5px; 
}

#info-contacto3 p {
    font-size: 22px;   
    margin-top: 10px; 
}

#mapa {
    width: 100%;
    height: 516px;
}

#fin-contacto {
    width: 1080px;
    height: 1030px;
    margin: auto;
    text-align: center;
}

#fin-contacto h2 {
    margin: 50px 0 5px 0;
    color: #EA861E;   
}

#fin-contacto h3 {
    margin: 0;
    color: #2FB5EA;   
}

#fin-contacto p {
    width: 970px;
    margin: 15px 0 0 58px;
    color: #777777;   
}



.contact_form ul {
    width: 703px;
    height: 676px;
    background: #F9F9F9;
    list-style-type:none;
	list-style-position:outside;
	margin: 50px 0 0 140px;
	padding: 40px 60px;
    text-align: left;
}

.contact_form li{
	padding:12px; 
} 

/* === Form Elements === */

.contact_form input {
	height: 65px; 
	width: 651px; 
	padding: 5px 8px;
    border: none;
    background: url(../images/contacto-input-1.png) top left no-repeat;
    font-family: cursive;
    font-size: 22px;
    margin-top: -5px;
}

#inp1 {
    height: 65px; 
	width: 286px; 
    float: left;
    background: url(../images/contacto-input-2.png) top left no-repeat;   
    margin: 10px 10px 0 0;
}

#inp1:focus {
    background: url(../images/contacto-input-2-h.png) top left no-repeat;    
}

#inp2 {
    height: 65px; 
	width: 306px;
    background: url(../images/contacto-input-3.png) top left no-repeat;  
    margin: -13px 0 0 0;
}

#inp3 { 
    margin: 13px 0 0 0;
}

#inp2:focus {
    background: url(../images/contacto-input-3-h.png) top left no-repeat;    
}

.contact_form label {
    font-family: cursive;
    font-size: 22px;
    color: #777777;
    margin: 10px;
}

.contact_form textarea {
    padding:8px; 
    width: 645px;
    height: 133px;
    font-family: cursive;
    font-size: 22px;
    background: url(../images/contacto-mensaje.png) left top no-repeat;
    border: none;
    margin: 30px 0 0 0;
}

.contact_form textarea:focus {
    background: url(../images/contacto-mensaje-h.png) top left no-repeat;   
}

	/* form element visual styles */
	.contact_form input, .contact_form textarea { 
		border-radius:2px;
		padding-right:30px;
        color: #299ED5;
	}

	.contact_form input:focus { 
        background: url(../images/contacto-input-1-h.png) top left no-repeat;
        border: none;
        box-shadow: none;
	}


/* === Form hints === */
.form_hint {
	background: #299ED5;
	border-radius: 3px 3px 3px 3px;
	color: white;
	margin-left:8px;
	padding: 1px 6px;
	z-index: 999; /* hints stay above all other elements */
	position: absolute; /* allows proper formatting if hint is two lines */
	display: none;
    font-size: 15px;
}

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

.contact_form input:focus + .form_hint {display: inline;}
.contact_form input:required:valid + .form_hint {background: #299ED5;}
.contact_form input:required:valid + .form_hint::before {color:#28921f;}

button.submit { 
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    color: white;
    background: #299ED5;
    padding: 10px 28px 10px 28px;
    transition: background 0.3s ease-in;
    border-radius: 40px;
    margin: 20px 0 0 210px;
}

button.submit:hover {
    background: #2FB5EA;     
}