
/* 
******************************************************************************************************************************************************************************************************************
*********************************************************************************** CONTACTO *******************************************************************************************************
******************************************************************************************************************************************************************************************************************
*/


/*====================================================== 
CABECERA
========================================================
*/

header{ border-bottom:1px solid #9a999e;}


/* CON MAPA */
#contacto .padd-15{ padding:0 15px;}
#contacto #cabecera .mapa{ width:100%; height:520px; padding-top:80px; border-bottom:1px solid #00c000;}

/* CON FOTO */
#contacto #cabecera .caja-fondo{ background: url(../img/contacto/img-cabecera.png) no-repeat 30% bottom; height:495px;}
#contacto #cabecera.degradado{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #eaeaea 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eaeaea)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#eaeaea 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#eaeaea 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#eaeaea 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#eaeaea 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */
	
}

/*====================================================== 
DATOS DE CONTACTO
========================================================
*/

#contacto #datos-contacto{ padding:50px 0;}
#contacto #datos-contacto h1{font-family: 'Oswald', sans-serif; font-weight:300; font-size:36px; color:#000; margin-bottom:50px; text-align:center;}
#contacto #datos-contacto .contenedor{ background:#c3c4c9; padding:10px; }
#contacto #datos-contacto .contenedor .contenido{ border:1px solid #fff; padding:20px; text-align:center; height:510px;}
#contacto #datos-contacto .contenedor .contenido h2{font-family: 'Oswald', sans-serif; font-weight:400; font-size:30px; margin-bottom:25px; color:#fff; text-align:center;}
#contacto #datos-contacto .contenedor .contenido .foto-distri{ margin-bottom:25px; text-align:left;}
#contacto #datos-contacto .contenedor .contenido .foto-distri img{border:1px solid #5b5b5f; text-align:left; max-width:100%;}
#contacto #datos-contacto .contenedor .contenido .nombre-distri{font-family: 'Raleway', sans-serif; font-weight:400; font-size:14px; color:#5b5b5f; margin-bottom:25px; text-align:left;}
#contacto #datos-contacto .contenedor .contenido .nombre-distri strong{ display:block; font-weight:600; font-size:16px; margin-bottom:3px;}
#contacto #datos-contacto .contenedor .contenido .direccion{font-family: 'Raleway', sans-serif; font-weight:500; font-size:14px; color:#5b5b5f; line-height:23px; text-align:left;}

#contacto #datos-contacto .contenedor .contenido .icono{ display:none;}
#contacto #datos-contacto .contenedor .contenido .tel-fijo{font-family: 'Oswald', sans-serif; font-weight:300; font-size:30px; color:#fff; margin-bottom:25px; text-align:left;}
#contacto #datos-contacto .contenedor .contenido .tel-fijo strong{ display:block; font-family: 'Oswald', sans-serif; font-weight:400; font-size:30px; color:#5b5b5f;}
#contacto #datos-contacto .contenedor .contenido .tel-movil{font-family: 'Oswald', sans-serif; font-weight:300; font-size:30px; color:#fff; margin-bottom:25px; text-align:left;}
#contacto #datos-contacto .contenedor .contenido .tel-movil img{width:31px; height:30px;}
#contacto #datos-contacto .contenedor .contenido .tel-movil strong{display:block; font-family: 'Oswald', sans-serif; font-weight:400; font-size:30px; color:#5b5b5f;}
#contacto #datos-contacto .contenedor .contenido .email{font-family: 'Oswald', sans-serif; font-weight:300; font-size:30px; color:#fff; margin-bottom:25px; text-align:left;}
#contacto #datos-contacto .contenedor .contenido .email strong{display:block; font-family: 'Oswald', sans-serif; font-weight:400; font-size:20px; color:#5b5b5f;}

#contacto #datos-contacto .contenedor .contenido .redes { font-size:18px; font-weight:500; text-align:left; color:#FFF;}
#contacto #datos-contacto .contenedor .contenido .redes div{ margin-top:8px;}
#contacto #datos-contacto .contenedor .contenido .redes .facebook-contacto{ margin-right:10px;}

#contacto #datos-contacto .contenedor .contenido p{font-family: 'Raleway', sans-serif; font-weight:400; font-size:18px; line-height:32px; color:#5b5b5f; margin-bottom:25px; text-align:left;}
#contacto #datos-contacto .contenedor .contenido .campos{ margin-bottom:25px;}
#contacto #datos-contacto .contenedor .contenido input[type=text],
#contacto #datos-contacto .contenedor .contenido input[type=email],
#contacto #datos-contacto .contenedor .contenido input[type=tel]{width:100%; background:#FFF; padding:5px 10px; height:40px; margin-bottom:12px; border:1px solid #5b5b5f; font-family: 'Raleway', sans-serif; font-weight:400; font-size:15px; color:#5b5b5f;}
#contacto #datos-contacto .contenedor .contenido .privacidad{font-family: 'Raleway', sans-serif; font-weight:500; font-size:14px; color:#5b5b5f;}
#contacto #datos-contacto .contenedor .contenido .privacidad a{font-family: 'Raleway', sans-serif; font-weight:500; font-size:14px; color:#5b5b5f; text-decoration:underline;}
#contacto #datos-contacto .contenedor .contenido .privacidad input[type=checkbox]{ margin-right:5px;}

#contacto #datos-contacto .contenedor .contenido .boton{ display:inline-block; margin-top:20px;}
#contacto #datos-contacto .contenedor .contenido .boton a{ display:block; background:#000; font-family: 'Raleway', sans-serif; font-weight:500; font-size:20px; color:#fff; padding:9px 15px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}
#contacto #datos-contacto .contenedor .contenido .boton a:hover{ text-decoration:none; background-color:#92c04f;}
#contacto #datos-contacto .contenedor .contenido .boton a img{display:none;}
#contacto #datos-contacto .contenedor .contenido .boton img{display:none;}






/*
*****************************************************************************************************************************************************************************************************
-------------------------------------------------------------------------------------  992 PIXELS ---------------------------------------------------------------------------------------------------
*****************************************************************************************************************************************************************************************************
*/

@media (min-width:992px) and (max-width:1199px){



/* 
******************************************************************************************************************************************************************************************************************
*********************************************************************************** CONTACTO *******************************************************************************************************
******************************************************************************************************************************************************************************************************************
*/


/*====================================================== 
CABECERA
========================================================
*/

/* CON MAPA */
#contacto .padd-15{ padding:0 12px;}
#contacto #cabecera .mapa{ width:100%; height:370px; padding-top:80px;}
#contacto #cabecera .foto{}

/* CON FOTO */
#contacto #cabecera .caja-fondo{ background-size:495px; background-position:40% bottom; height:355px;}

/*====================================================== 
DATOS DE CONTACTO
========================================================
*/

#contacto #datos-contacto{ padding:40px 0;}
#contacto #datos-contacto h1{font-size:30px; margin-bottom:40px; }

#contacto #datos-contacto .contenedor .contenido{ padding:15px; height:455px;}
#contacto #datos-contacto .contenedor .contenido h2{font-size:25px; margin-bottom:25px;}
#contacto #datos-contacto .contenedor .contenido .foto-distri{ margin-bottom:25px; text-align:left;}

#contacto #datos-contacto .contenedor .contenido .tel-fijo{font-size:22px; margin-bottom:25px;}
#contacto #datos-contacto .contenedor .contenido .tel-fijo strong{font-size:25px;}
#contacto #datos-contacto .contenedor .contenido .tel-movil{font-size:22px; margin-bottom:25px;}
#contacto #datos-contacto .contenedor .contenido .tel-movil img{width:25px; height:auto;}
#contacto #datos-contacto .contenedor .contenido .tel-movil strong{font-size:25px;}
#contacto #datos-contacto .contenedor .contenido .email{font-size:22px; color:#fff; margin-bottom:25px;}
#contacto #datos-contacto .contenedor .contenido .email strong{font-size:20px;}

#contacto #datos-contacto .contenedor .contenido p{font-size:16px; line-height:24px; margin-bottom:25px;}
#contacto #datos-contacto .contenedor .contenido .campos{ margin-bottom:20px;}

#contacto #datos-contacto .contenedor .contenido .boton{ margin:0;}
#contacto #datos-contacto .contenedor .contenido .boton a{ font-size:16px;}

#contacto #datos-contacto .contenedor .contenido .siguenos ul{margin-top:15px;}
#contacto #datos-contacto .contenedor .contenido .siguenos ul li{display:inline-block;}
#contacto #datos-contacto .contenedor .contenido .siguenos ul li:first-child{margin:0 10px 0 0;}
#contacto #datos-contacto .contenedor .contenido .siguenos ul li a.instagram-cont{display:inline-block; width:40px; height:40px; }
#contacto #datos-contacto .contenedor .contenido .siguenos a.instagram-cont:hover{ background-position:0 -40px;}
#contacto #datos-contacto .contenedor .contenido .siguenos a.facebook-cont{display:inline-block; width:40px; height:40px; }
#contacto #datos-contacto .contenedor .contenido .siguenos a.facebook-cont:hover{ background-position:0 -40px;}

}



/*
*****************************************************************************************************************************************************************************************************
-------------------------------------------------------------------------------------  768 PIXELS ---------------------------------------------------------------------------------------------------
*****************************************************************************************************************************************************************************************************
*/


@media (min-width:768px) and (max-width:991px){



/* 
******************************************************************************************************************************************************************************************************************
*********************************************************************************** CONTACTO *******************************************************************************************************
******************************************************************************************************************************************************************************************************************
*/

header{ height:70px;}



/*====================================================== 
CABECERA
========================================================
*/

/* CON MAPA */
#contacto .padd-15{ padding:0 10px;}
#contacto #cabecera .mapa{ width:100%; height:350px; padding-top:80px;}
#contacto #cabecera .foto{ }

/* CON FOTO */
#contacto #cabecera .caja-fondo{ background-size:357px; background-position:45% bottom; height:255px;}

/*====================================================== 
DATOS DE CONTACTO
========================================================
*/


#contacto #datos-contacto{ padding:30px 0 50px 0;}
#contacto #datos-contacto h1{font-size:25px; margin-bottom:30px;}

#contacto #datos-contacto .contenedor .contenido{padding:10px; height:350px;}
#contacto #datos-contacto .contenedor .contenido h2{font-size:18px; margin-bottom:15px;}
#contacto #datos-contacto .contenedor .contenido .foto-distri{ margin-bottom:15px;}
#contacto #datos-contacto .contenedor .contenido .nombre-distri{font-size:14px; margin-bottom:15px;}
#contacto #datos-contacto .contenedor .contenido .nombre-distri strong{font-size:14px; margin-bottom:3px;}
#contacto #datos-contacto .contenedor .contenido .direccion{ font-size:12px; line-height:18px;}


#contacto #datos-contacto .contenedor .contenido .tel-fijo{font-size:18px; line-height:22px; margin-bottom:20px;}
#contacto #datos-contacto .contenedor .contenido .tel-fijo strong{font-size:22px; margin-top:8px;}
#contacto #datos-contacto .contenedor .contenido .tel-movil{font-size:18px; line-height:20px; margin-bottom:20px;}
#contacto #datos-contacto .contenedor .contenido .tel-movil img{ width:25px; height:auto;}
#contacto #datos-contacto .contenedor .contenido .tel-movil strong{font-size:22px; margin-top:8px;}
#contacto #datos-contacto .contenedor .contenido .email{font-size:18px; line-height:20px; margin-bottom:20px;}
#contacto #datos-contacto .contenedor .contenido .email strong{font-size:14px; margin-top:8px;}
#contacto #datos-contacto .contenedor .contenido .redes { font-size:18px;}
#contacto #datos-contacto .contenedor .contenido .redes div{ margin-top:8px;}
#contacto #datos-contacto .contenedor .contenido .redes div a img{ width:30px; height:auto;}

#contacto #datos-contacto .contenedor .contenido .siguenos {font-size:18px;margin-bottom:20px;}
#contacto #datos-contacto .contenedor .contenido .siguenos ul{margin-top:10px;}
#contacto #datos-contacto .contenedor .contenido .siguenos ul li:first-child{margin:0 10px 0 0;}
#contacto #datos-contacto .contenedor .contenido .siguenos ul li a.instagram-cont{width:35px; height:35px; }
#contacto #datos-contacto .contenedor .contenido .siguenos a.instagram-cont:hover{ background-position:0 -35px;}
#contacto #datos-contacto .contenedor .contenido .siguenos a.facebook-cont{width:35px; height:35px; }
#contacto #datos-contacto .contenedor .contenido .siguenos a.facebook-cont:hover{ background-position:0 -35px;}


#contacto #datos-contacto .contenedor .contenido p{font-size:14px; line-height:18px; margin-bottom:20px;}
#contacto #datos-contacto .contenedor .contenido .campos{ margin-bottom:0px;}
#contacto #datos-contacto .contenedor .contenido input[type=text],
#contacto #datos-contacto .contenedor .contenido input[type=email],
#contacto #datos-contacto .contenedor .contenido input[type=tel]{ padding:5px 10px; height:30px; margin-bottom:8px;font-size:13px;}
#contacto #datos-contacto .contenedor .contenido .privacidad input[type="checkbox"] {margin-right:2px;}
#contacto #datos-contacto .contenedor .contenido .privacidad{ font-size:10px;}
#contacto #datos-contacto .contenedor .contenido .privacidad a{font-size:10px;}

#contacto #datos-contacto .contenedor .contenido .boton{ display:inline-block;}
#contacto #datos-contacto .contenedor .contenido .boton a{ font-size:13px; padding:5px 8px;}

}




/*
*****************************************************************************************************************************************************************************************************
-------------------------------------------------------------------------------------  320 PIXELS ---------------------------------------------------------------------------------------------------
*****************************************************************************************************************************************************************************************************
*/


@media (min-width: 576px) and (max-width: 767.98px) { 


/* 
******************************************************************************************************************************************************************************************************************
*********************************************************************************** CONTACTO *******************************************************************************************************
******************************************************************************************************************************************************************************************************************
*/


/*====================================================== 
CABECERA
========================================================
*/

/* CON MAPA */
#contacto .padd-15{ padding:0 10px;}
#contacto #cabecera .mapa{ width:100%; height:170px; padding-top:60px;}
#contacto #cabecera .foto{ }

/* CON FOTO */
#contacto #cabecera .caja-fondo{background-position: 45% 63px; background-size: 195px auto; height: 160px; overflow: hidden; border-bottom:1px solid #00c000;}

/*====================================================== 
DATOS DE CONTACTO
========================================================
*/
#contacto{ margin:100px 0 0; }
#contacto #datos-contacto{ padding:30px 0 50px 0;}
#contacto #datos-contacto h1{font-size:20px; margin-bottom:30px;}

#contacto #datos-contacto .contenedor{margin:0 auto 20px auto;}
#contacto #datos-contacto .contenedor .contenido{padding:20px 10px 10px; height:auto;}
#contacto #datos-contacto .contenedor .contenido h2{font-size:20px; margin-bottom:30px;}
#contacto #datos-contacto .contenedor .contenido .foto-distri{ margin-bottom:15px;}
#contacto #datos-contacto .contenedor .contenido .nombre-distri{font-size:14px; margin-bottom:15px;}
#contacto #datos-contacto .contenedor .contenido .nombre-distri strong{font-size:16px; margin-bottom:3px;}
#contacto #datos-contacto .contenedor .contenido .direccion{ font-size:14px; line-height:22px;}

#contacto #datos-contacto .contenedor .contenido .tel-fijo{font-size:18px; line-height:22px; margin-bottom:25px;}
#contacto #datos-contacto .contenedor .contenido .tel-fijo strong{font-size:22px; margin-top:8px;}
#contacto #datos-contacto .contenedor .contenido .tel-movil{font-size:18px; line-height:20px; margin-bottom:25px;}
#contacto #datos-contacto .contenedor .contenido .tel-movil img{ width:23px; height:auto;}
#contacto #datos-contacto .contenedor .contenido .tel-movil strong{font-size:22px; margin-top:8px;}
#contacto #datos-contacto .contenedor .contenido .email{font-size:18px; line-height:20px; margin-bottom:25px;}
#contacto #datos-contacto .contenedor .contenido .email strong{font-size:14px; margin-top:8px;}
#contacto #datos-contacto .contenedor .contenido .redes { font-size:18px; margin-bottom:27px;}
#contacto #datos-contacto .contenedor .contenido .redes div{ margin-top:8px;}
#contacto #datos-contacto .contenedor .contenido .redes div a img{ width:30px; height:auto;}

#contacto #datos-contacto .contenedor .contenido .siguenos ul li a.instagram-cont{width:40px; height:40px; }
#contacto #datos-contacto .contenedor .contenido .siguenos a.instagram-cont:hover{ background-position:0 -40px;}
#contacto #datos-contacto .contenedor .contenido .siguenos a.facebook-cont{width:40px; height:40px; }
#contacto #datos-contacto .contenedor .contenido .siguenos a.facebook-cont:hover{ background-position:0 -40px;}


#contacto #datos-contacto .contenedor .contenido p{font-size:14px; line-height:22px; margin-bottom:20px;}
#contacto #datos-contacto .contenedor .contenido .campos{ margin-bottom:0px;}
#contacto #datos-contacto .contenedor .contenido input[type=text],
#contacto #datos-contacto .contenedor .contenido input[type=email],
#contacto #datos-contacto .contenedor .contenido input[type=tel]{ padding:5px 10px; height:30px; margin-bottom:8px;font-size:14px;}
#contacto #datos-contacto .contenedor .contenido .privacidad{ font-size:14px;}
#contacto #datos-contacto .contenedor .contenido .privacidad a{font-size:14px;}

#contacto #datos-contacto .contenedor .contenido .boton{ display:inline-block; margin-top:20px;}
#contacto #datos-contacto .contenedor .contenido .boton a{ font-size:18px; padding:8px 15px;}

}

@media (max-width: 575.98px) {
	
#contacto{ margin:100px 0 0; }
#contacto #datos-contacto{ padding:30px 0 50px 0;}
#contacto #datos-contacto h1{font-size:20px; margin-bottom:30px;}

#contacto #datos-contacto .contenedor{margin:0 auto 20px auto;}
#contacto #datos-contacto .contenedor .contenido{padding:20px 10px 10px; height:auto;}
#contacto #datos-contacto .contenedor .contenido h2{font-size:20px; margin-bottom:30px;}
#contacto #datos-contacto .contenedor .contenido .foto-distri{ margin-bottom:15px;}
#contacto #datos-contacto .contenedor .contenido .nombre-distri{font-size:14px; margin-bottom:15px;}
#contacto #datos-contacto .contenedor .contenido .nombre-distri strong{font-size:16px; margin-bottom:3px;}
#contacto #datos-contacto .contenedor .contenido .direccion{ font-size:14px; line-height:22px;}

#contacto #datos-contacto .contenedor .contenido .tel-fijo{font-size:22px; margin-bottom:25px;}
#contacto #datos-contacto .contenedor .contenido .tel-fijo strong{font-size:25px;}
#contacto #datos-contacto .contenedor .contenido .tel-movil{font-size:22px; margin-bottom:25px;}
#contacto #datos-contacto .contenedor .contenido .tel-movil img{width:25px; height:auto;}
#contacto #datos-contacto .contenedor .contenido .tel-movil strong{font-size:25px;}
#contacto #datos-contacto .contenedor .contenido .email{font-size:22px; color:#fff; margin-bottom:25px;}
#contacto #datos-contacto .contenedor .contenido .email strong{font-size:20px;}

#contacto #datos-contacto .contenedor .contenido .siguenos ul li a.instagram-cont{width:40px; height:40px; }
#contacto #datos-contacto .contenedor .contenido .siguenos a.instagram-cont:hover{ background-position:0 -40px;}
#contacto #datos-contacto .contenedor .contenido .siguenos a.facebook-cont{width:40px; height:40px; }
#contacto #datos-contacto .contenedor .contenido .siguenos a.facebook-cont:hover{ background-position:0 -40px;}


#contacto #datos-contacto .contenedor .contenido p{font-size:14px; line-height:22px; margin-bottom:20px;}
#contacto #datos-contacto .contenedor .contenido .campos{ margin-bottom:0px;}
#contacto #datos-contacto .contenedor .contenido input[type=text],
#contacto #datos-contacto .contenedor .contenido input[type=email],
#contacto #datos-contacto .contenedor .contenido input[type=tel]{ padding:5px 10px; height:30px; margin-bottom:8px;font-size:14px;}
#contacto #datos-contacto .contenedor .contenido .privacidad{ font-size:14px;}
#contacto #datos-contacto .contenedor .contenido .privacidad a{font-size:14px;}

#contacto #datos-contacto .contenedor .contenido .boton{ display:inline-block; margin-top:20px;}
#contacto #datos-contacto .contenedor .contenido .boton a{ font-size:18px; padding:8px 15px;}
	
	
}

