/* ESTILOS*/

/*RESET*/
* {
	margin: 0px;
	padding: 0px;
}

body {
	font-family: 'Titillium Web', sans-serif;
	font-size: 1em;
}

h1{
	color: #0080c5;
	font-size: 1.875em;
	border-bottom: solid #0080c5 1px;
}

h2{
	color: #0080c5;
	font-size: 1.750em;
	font-weight: normal;
	margin-top: 1em;
	margin-bottom: 0.250em;
	border-top: solid #0080c5 1px;
	border-bottom: solid #0080c5 1px;
}

h3{
	background-color: #0080c5;
	opacity: 0.8;
	filter: alpha(opacity=80); /* For IE8 and earlier */
	height: 1.875em;
	padding: 0.150em;
	margin-top: -1.875em;
	color: #fff;
	font-weight: normal;
}

a{
	text-decoration: none;
}

ul{
	list-style: none;
}


/*COMUNES-----------------------***/

#header_redes_sociales a:hover, nav ul li a:hover, footer a:hover, .contacto_gris a:hover, aside ul li a:hover, #productos article a:hover,
article.row.margin_bottom_20px a img:hover, article.row.margin_bottom_20px a h3:hover {
	opacity: 0.7;
	filter: alpha(opacity=70); /* For IE8 and earlier */
}

.button {
    display: inline-block;
    text-align: center;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    transition: all 0.25s ease-out;
    vertical-align: middle;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 0.85em 1em;
    margin: 0 1rem 1rem 0;
    font-size: 0.9rem;
    background: #1d92cf;
    color: #fff;
}

.button:hover {
    transition: all 0.25s ease-out;
    opacity: 0.8;
}

.margin_bottom_5px{ margin: 0.313em;}
.margin_right_5px{ margin-right: 0.313em;}
.margin_top_15px{ margin-top: 0.938em;}
.margin_bottom_20px{ margin-bottom: 1.250em;}
.margin_bottom_10px{ margin-bottom: 0.625em;}
.margin_top_30px{ margin-top: 1.875em;}
.margin_top_-30px{ margin-top: -1.875em;}
.align_center{ text-align: center;}
.text_left{ text-align: left;}
.text_right{ text-align: right!important;}
.center{ text-align: center;}
.inline{display: inline!important;}
/*--------------------------------*/


/*HEADER------------------------***/
#header_logo, #header_redes_sociales{
	margin-top: 2.375em;
}

#header_telefono{
	margin-top: 4.375em;
	color: #969696;
	font-weight: 700;
}

#header_redes_sociales{
	width: 50px !important;
	height: auto; 
	text-align: right;
}

.whatsapp{display: inline-block; margin-top: 6em; color: #959595!important; }
/*--------------------------------*/


/*NAV---------------------------***/
.promos{
	float: right;
	margin-top: -2.5em;
}

#contador{
	float: left;
	margin-top: -2em;
}

#navegacion{	
	margin-top: 1.250em;
	border-top: solid #0080c5 1px;
	border-bottom: solid #0080c5 1px;
	text-align: right;
}

nav { margin-bottom: 1em !important;}

nav ul {
	display: inline-block;
	margin: 0em;
	padding-top: 0.375em;
}

nav ul li{
	float: left;
}

nav ul li a{
	display: inline-block;
	color: #0080c5;
	font-size: 1.250em;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.nav_chat{
	margin-bottom: : 2px;
	float: left;
}

#navegacion_ultimo{
	padding-right: 0em;
}

.nav_activo{
	font-weight: 700;
	color: #666;
}
.menu_bar{
	display: none;
}

/*--------------------------------*/


/************************************************************************************/
  /* MENU DESPLEGABLE */
  .mi-menu  {
	/* la altura y su ancho dependerán de los textos */
	height: auto;
	padding-top: 2px;
  }

  /* si es necesario, evitamos que Blogger de problemas con los saltos de línea cuando escribimos el HTML */
  .mi-menu  br { display:none; }

  /* cada item del menu */
  .mi-menu  li {
	display: block;
	float: left;
	position: relative;
  }
  .mi-menu li a {
	display: block;
	text-decoration: none;
	/* animamos el cambio de color de los textos */
	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
  }
  

  /* eliminamos los bordes del primer y el último */
/*  .mi-menu li:first-child a { border-left: none; }
  .mi-menu li:last-child a{ border-right: none; }*/
  /* efecto hover cambia el color */
  .mi-menu li:hover > a {
	color: #666666;
}

  /* los submenús */
  .mi-menu ul {
  	text-align: left;
  	font-size: 1em;
	opacity: 0; /* no son visibles */
	position: absolute;
	left: 0px !important;
	top: 2.375em;
	/* animamos su visibildiad */
	-moz-transition: opacity .25s ease .1s;
	-webkit-transition: opacity .25s ease .1s;
	-o-transition: opacity .25s ease .1s;
	-ms-transition: opacity .25s ease .1s;
	transition: opacity .25s ease .1s;
	background-color: #008ED1;
	margin: 0px;
	padding: 0px;
	z-index: 999;
  }
  /* son visibes al poner el cursor encima */
  .mi-menu li:hover > ul { opacity: 1; }
   /* cada uno de los items de los submenús */
  .mi-menu ul li {
	height: 0; /* no son visibles */
	overflow: hidden;


	/* animamos su visibildiad */
	-moz-transition: height .25s ease .1s;
	-webkit-transition: height .25s ease .1s;
	-o-transition: height .25s ease .1s;
	-ms-transition: height .25s ease .1s;
	transition: height .25s ease .1s;
	width: 12.50em;
	border-bottom: 1px solid #79B4E2;
  }
  .mi-menu li:hover > ul li {
	height: 2.250em; /* los mostramos */
	overflow: visible;
	padding: 0;
	z-index: 999;
	width: 12.50em;
  }
  .mi-menu ul li a {
  	padding: 0.5em;
	font-size:1em;
	color: #FFF;
  }
  
  /* el último n otiene un borde */
  .mi-menu ul li:last-child a { border: none; }

/************************************************/

/*ASIDE--------------------------***/

aside ul{
	background-color: #C7DFF4;
	padding: 0;
}

aside ul li{
	border-bottom: solid #fff 1px;
	
}

aside ul li a{
	display: inline-block;
	width: 100%;
	font-size: 1em;
	color: #0080C5;
	padding: 1em;
}

.aside_titulo{
	padding: 0.250em 0.5em;
	font-size: 1.250em;
	font-weight: bold;
	background-color: #0080C5;
	color: #fff;
	border-bottom: solid #fff 2px;
}

.aside_activo{
	color: #666666;
	font-weight: bold;
}

.aside_strong{
	font-weight: bold;
}

.aside_h1{
	font-weight: normal;
}

/*--------------------------------*/

/*HOME--------------------------***/


/*--------------------------------*/


/*PRODUCTOS--------------------------***/

#productos h2{
	margin: 0;
	border: none;
	font-size: 1.5em;
}

#productos article{
	padding: 1em;

	border-bottom: solid #E6E6E6 1px;
}
#productos article h3{
	margin: 0;
	margin-bottom: -0.250em;
	padding: 0;
	background-color: #fff;	
	color: #0080C5;
}
#productos article p{
	margin: 0;
	padding: 0;
	margin-bottom: 1em;
}
.productos_pdf{
	display: block;
	margin-top: 1em;
	margin-bottom: 1em;
}



/*EVENTOS--------------------------***/

#eventos h2{
	margin: 0;
	margin-top: 1em;
	margin-bottom: 0.5em;
}

#eventos p{
	margin: 0;
}

/*--------------------------------*/

/*PRENSA--------------------------***/

#prensa h3{
	opacity: 1;
	filter: alpha(opacity=100); /* For IE8 and earlier */
	background-color: #fff;
	height: auto;
	padding: 0;
	margin-bottom: 0.750em;
	margin-top: 0.125em;
	border-top: solid 1px #666666;
	color: #666666;
}

#eventos p{
	margin: 0;
}

/*--------------------------------*/

/*REFORMAS--------------------------***/

.reformas_paso{
	position: absolute;
	top: 68%;
	left: 83%;
}

.reforma_parrafo{
	margin-top: 0;
	margin-top: 0.3em;
}

#reforma_tarjetas{
	font-weight: 700;
	font-size: 1.063em;
	margin: 0;
	padding-top: 6em;
}

#reforma_tarjeta_img{
	margin-top: 2em;
	margin-bottom: -2em;
}

/*--------------------------------*/

/*CERRAMIENTOS--------------------------***/

#cerramientos p{
	line-height: 2.2;
	margin-bottom: 2em;
}

/*--------------------------------*/

/*CLIENTES----------------------***/

.clientes_logos{
	margin-bottom: 1em;
}

/*--------------------------------*/

/*GALERIA-------------------------*/
.aside_activo_gal{
	color: #994587;
}

.galeria_div_principal, .galeria_thumbs{
	border-radius: 1em;
	border: solid 0.188em #0080C5;
}

.galeria_h3{
	color: #0080C5;
	background-color: #fff;
	max-width: 9.875em;
	font-size: 1em;
	margin: 0em;
}

.galeria_h4{
	color: #0080C5;
	margin-top: 1em;
}

.galeria_div_principal{
	text-align: center;
	margin: 1em auto;
	padding: 1em;
}

.galeria_div_principal img{
	width: 100%;
	box-shadow: 0px 0px 5px #888888;
}
.galeria_thumbs{
	width: 9.875em;
	max-height: 6.563em;
	margin-bottom: 1em;
}


/*--------------------------------*/


/*CONTACTO----------------------***/

#contacto input {
	width: 100%;
	height: 2em;
	margin-bottom: 1em;
}

#contacto textarea {
	width: 100%;
}

#contacto #comentario{
	height: 15em;
}

#contacto #opinion{
	height: 8em;
}

.contacto_form {
	border-radius:1em;
	padding: 1em;
	background-color: #dcdcdc;
	margin-bottom: 2em;
}

#enviar, #limpiar{
	border: none;
	margin-top: 1em;
}

.contacto_error{
	color: red;
	font-size: 0.750em;
}

form span{
	float: right;
}

#contacto h3 {
	margin: 0;
	margin-bottom: 0.150em;
	padding: 0;
	font-size: 1.5em;
	color: #0080c5;
	background-color: transparent;
}

#contacto h4 {
	margin: 0;
	color: #000000 !important;
}

#contacto p {
	margin: 0;
	margin-bottom: 1em;
}

.contacto_gris, .contacto_gris a{
	color: #969696;
}



/*--------------------------------*/


/*FOOTER------------------------***/

footer {
	margin-top: 2em;
	background-color: #0080c5;
	color: #e6e6e6;
	padding-top: 0.625em;
}

footer a{
	color: #e6e6e6;
}

footer ul {
	margin-top: 2.813em;
}

footer ul li, #left {
	float: left;
}

footer ul li a{
	display: inline-block;
	font-size: 0.975em;
	padding: 0em 0.4em;
}

#footer_logo{
	text-align: center;
	padding-top: 2em;
}

.footer_reg p{
	font-size: 0.875em;
	text-align: center;
}

#footer_banda_inferior{
	background-color: #e6e6e6;
	color: #000000;
}

#footer_banda_inferior a{
	color: #000000;
}

#footer_mail{
	text-align: left;
}

#footer_telefono{
	text-align: right;
}

/*--------------------------------*/

.home_clientes{
		margin-top: 1.5em;
		text-align: center;
	}



/*// Small screens - max-width 640px, mobile-only styles, use when QAing mobile issues */
@media only screen and (min-width: 0.063em) and (max-width: 40em) {
	h1, h2{
		margin-top: 1.250em !important;
		margin-bottom: 0.250em !important;
	}


	h1{
		font-size: 1.150em;
	}

	h2{
		font-size: 1em;
	}

	h3{
		font-size: 1em;
		margin-bottom: 0.5em;
		height: auto;
	}
	
	#header_telefono, #header_logo,#header_redes_sociales {
		text-align: center;
	}
	
	#header_logo{
		margin-top: 4em;
		margin-left: 0em;
	}

	#header_redes_sociales{ margin: 1em 0em;}
	.whatsapp{margin-top: 1em;}
	


	.menu_bar{
		position: fixed;
		top: 0px;
		padding: 0.5em;
		z-index: 999;
		display: block;
		width: 100%;
		background:#0080C5;	
		border-bottom: solid 2px #959595;
	}
	.menu_bar .bt_menu{
		display: block;
		color: #fff;
		text-decoration: none;
	}

	nav {
		width: 80% !important;
		height: 100%;
		position: fixed;
		top: 0em;
		background-color: #0080C5;
		z-index: 998;
		left: -100%;
		padding-top: 1.5em;
	}
	nav ul li {
		width: 100%;
		height: 2.5em;
		text-align: left !important;
		margin: 0em;
		padding: 0em;
		border-bottom: 0.063em solid rgba(255, 255, 255, .5);
	}

	nav li a{
		color: #fff !important;
		padding: 0em !important;
		padding-top: 0.5em !important;
		font-size: 1em !important;
	}
	.nav_separador_oculto, .promos, #contador{
		display: none !important;
	}

	.nav_activo{
	font-weight: 700;
	color: #fff;
	}
	.navegacion{
		float: right;
	}
	.mi-menu ul {
  		padding: 0.25em;
  	}

  	/*REFORMAS*/
  	#reforma_tarjetas{
		font-weight: 400;
		font-size: 1em;
		margin: 0;
		padding-top: 2em;
	}

	.reformas_paso{
		top: 70%;
		left: 70%;
	}
	/*******************/
	
	/*CERRAMIENTOS*/
	#cerramientos p{
		line-height: 1.5;
		margin-bottom: 0;
	}
	/*******************/

	/*GALERIAS*/
	.galeria_thumbs {
		width: 100% !important;
		max-height: 7.188em;
	}

	.galeria_h3{
		max-width: 100%;
		width: 100% !important;
	}
	/*****************/

	#amazingslider-wrapper-1{
		margin-top: 0.5em !important;
  		margin-bottom: 0.5em !important;
  	}

  	.margin_bottom_20px{
		margin-bottom: 0.250em;
	}

	.margin_top_30px, .margin_top_15px{
		margin-top: 0em;
	}
	

	#footer_redes_sociales{
		text-align: center;
		margin-bottom: 1em;
	}
	#footer_nav ul li{
		margin: 0em;
		float: none;
	}
	footer ul {
		margin-top: 0.5em;
		margin-bottom: 1em;
		text-align: center;
	}
	#footer_logo, #footer_nav{
		display: none;
	}

  	
} 

/*// Medium screens - min-width 360px and max-width 640px, use when QAing tablet-only issues */
@media only screen and (min-width: 22.500em) and (max-width: 40em) {

	/*GALERIA*/
	.galeria_thumbs {
		max-height: 10em !important;
	}
	/*--------------------------------*/
} 

/*// Medium screens - min-width 641px and max-width 1024px, use when QAing tablet-only issues */
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
	/*NAV---------------------------***/
	nav ul li a{
		font-size: 1.1em !important;
	}
	/*--------------------------------*/

	/*GALERIA*/
	.galeria_h3{
		width: 100% !important;
		height: auto;
	}
	/*--------------------------------*/

	/*CERRAMIENTOS*/
	.margin_top_medium{
	margin-top: 4em;
	}

	#cerramientos p{	line-height: 1.8;}
	/**************/
} 

/*
// Large screens
@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues 

// XLarge screens
@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues 

// XXLarge screens
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens 
*/