@font-face {
    font-family: 'KeepCalm';
    font-style: normal;    
    font-size: 1.0em;
    font-weight: 50;
    src: local('KeepCalm'),
         url('font/KeepCalm-Medium.ttf') format('truetype');
}
body {
	background: #ffffff;  
	font-family: "verdana", sans-serif;
	margin: 0; 
	padding:0;
}

a {text-decoration: none !important}
a:hover {color:#fff;}
h3 {color: #000000}
header {
	background-image: linear-gradient(90deg, #ea7c06 0%, #fe4f0d 100%);
	border-bottom: 2px solid #ffffff; 
	margin: 0; 
	color:#ffffff; 
	height: 90px
}
header .logo {padding-left:50px;}
header .menuxs {padding: 0 15px}
 
footer {
	width: 100%;
	/*background: #2E2E2E; */
	background-image: linear-gradient(120deg, #3d3d3d 0%, #0a0a0a 100%);
	color: #ffffff; 
	font-size: 1.1em; 
	border-top: 3px solid #ea7c06
}
footer #foot {padding: 20px 0}
footer img {display:block; position: relative; width:200px; border-bottom:5px; right: 5px;}
footer span {display:block;  text-align: left; font-size: 1.4em}
footer h3 {color:#fff;}
footer #der, footer #izq {display: inline-block; margin: 15px 0;}
footer #central {display: inline-block; margin-top:5px;}
footer #central ul {position:relative; right: 20px}
footer #der {margin-top: 5px}
footer #der p {text-align: justify}
footer .fab {display:inline-block; margin: 8px 5px;}
footer .icons a {color:#5087fa;}
footer .icons .fa-instagram{color:#fc7809}
footer .icons .fa-youtube{color:#d80505; font-size: 2.2em;}
footer .icons .fa-youtube:hover{color:#f5f4f3}
footer .icons .fa-instagram:hover{color:#f5f4f3}
footer .icons a:hover {color: #f5f4f3}

/* *****************************index ****************************/

body {width:100%; margin: 0; padding:0;} 

.sombra {background: #f5f5f5}

 /* imagen principal ***********************************************************************/
.inicio {background: #fff url("../imagenes/fondo_index.jpg") no-repeat fixed center;}
.inicio .intro {
	text-align: justify; 
	margin-top: 50px; 
	font-family: 'KeepCalm',Arial, Helvetica, 
	sans-serif; background: #e1e1e1; 
	opacity: 0.9; 	
}
.inicio .intro h2 {font-size:1.9em; line-height: 1.3em; margin-left: 20px; padding:8px 15px;}
.inicio .intro a:hover {color:#ea7c06;}
.inicio .constructor {text-align: center}
.inicio .constructor img {width: 120%; padding-top:30px}
.fadeIn {position:absolute; background:#000; color:#fff; padding:10px 5px; width:40%; font-size:2.0em; text-align: center}

/* area de articulos de la pagina ***********************************************************************/
#articulos {background: #BDBDBD url(../imagenes/portada/articulo.jpg) no-repeat fixed; border-top: 3px solid #ea7c06; font-family: 'KeepCalm',Arial, Helvetica, sans-serif}
#articulos h1{display:block; text-align:center;color:#fff;margin-top:25px;}
#articulos h3 {display:block; text-align:center;color:#fff; margin-bottom: 20px; line-height: 0.8em}
#articulos #bloque2 {position:relative; padding-bottom:70px; padding-top: 30px}
#articulos .blog section {background: rgba(0,0,0,0.6)}
#articulos .blog section:hover {background: rgba(0,0,0,0.9)}
#articulos .blog section span {font-size: 1.5em; font-weight:bold; color: #fd9d3d; text-align:center; display:block; margin: 15px 0; padding-top: 15px}
#articulos .blog section article {display:block; font-size: 1.0em; color: #ffffff; font-weight: normal; padding: 15px 20px; text-align:justify; border-bottom: 1px solid #424242}
#articulos .blog section img {display: block; margin: 8px auto; border:1px solid #656565; width:280px;}
#articulos a {display: block; position: relative; text-decoration:none; text-align: center; padding: 8px 0;} 
#articulos a:link{font-size: 1.2em; color:#fd9d3d}
#articulos a:visited{text-decoration: none; color:#ea7c06}
/* area de empresas *******************************************************************************/

#empresa {text-align: center; font-family: 'KeepCalm',Arial, Helvetica, sans-serif}
#empresa #bloque3 {margin-top:50px; margin-bottom:70px;}
#empresa #bloque3 h2{color:#ea7c06; font-weight: bold}
#empresa section {margin-bottom: 40px;}
#empresa section h1 {color:#ea7c06; font-weight: bold}
#empresa section h3 {color:#ea7c06}
#empresa .logoEmpresa {position:relative; display:inline-block; margin: 8px 0}
#empresa .logoEmpresa:hover {}
#empresa .logoEmpresa img{width:100%; max-width: 200px;}


/* area de contacto y mensajes ***********************************************************************/
#contacto {
	background-image: linear-gradient(120deg, #fc9929 0%, #fb5000 100%);
	display: block; 
	font-size: 0.8em
} 
#contacto #bloque4 {font-family: 'KeepCalm',Arial, Helvetica, sans-serif} 
#contacto .panel {
	-webkit-box-shadow: 6px 7px 13px 1px rgba(186,37,4,1);
	-moz-box-shadow: 6px 7px 13px 1px rgba(186,37,4,1);
	box-shadow: 6px 7px 13px 1px rgba(186,37,4,1);
	padding: 25px 15px; 
	margin-bottom: 80px
}
#contacto section {margin: 60px 0;}
#contacto section h1 {display: block; text-align: center; color:#fff; font-weight: bold}
#contacto section h3 {position:relative; display: block; text-align: center; line-height: 1.5em; color:#fff;bottom:8px;}
#contacto h4 {margin-bottom: 30px; line-height: 0.8em}
#contacto #guia span {
	display:block;
	text-align: justify; 
	padding-right: 45px; 
	line-height: 1.5em; 
	color:#fff; 
	font-size: 1.9em;
	margin-top: 45px;
}
#contacto #guia span a {color:#fff; text-decoration: underline}
#contacto #datoCliente{position:relative; display:block; margin:10px 15px;}
#contacto #datoCliente .titulos {display: inline; color:  #2E2E2E; font-size:1.4em; line-height: 2em;}
#contacto #datoCliente input {width: 100%;background: #fdfefe; height: 35px; border: 1px solid #bdc3c7}
#contacto #datoCliente input:invalid { box-shadow: none;}
#contacto #datoCliente textarea:invalid { box-shadow: none}
#contacto .cajaCliente {width: 100%; font-family: verdana; font-size: 1.2em}
#contacto .cajaMensaje{width:100%; height: 170px; font-family: verdana; font-size: 1.2em; resize:none}
#contacto #msjCliente{position:relative; display:inline-block; width:100%; margin-bottom:40px;}
#contacto #time {display: block; width: 100%; font-size: 1.3em; margin-bottom:10px;}
#contacto #enviar {float:right; background: #dc7633; margin: 10px 5px; width: 80px !important; display:inline-block; font-weight: bold}
#contacto #limpiar {float:right; margin: 10px 5px;  width: 80px !important; display:inline-block; font-weight: bold}
#contactoCliente .nota {display:block; font-size:1.2em; margin-top:20px;}
#datoCliente .titulos {display:block; padding-bottom:3px;}
#datoCliente .input-group {margin-bottom: 10px}
#datoCliente .fa-user {font-size: 1.5em; padding: 0 3px}
#datoCliente .fa-envelope {font-size: 1.5em}
#datoCliente .fa-tty {font-size: 1.5em}
#datoCliente .fa-home {font-size: 1.5em}
#datoCliente .fa-map-marker {font-size: 1.5em;padding: 0 3px}
#datoCliente #clock {height: 10px !important; margin:0;}
#datoCliente .fa-clock-o {font-size: 1.5em;padding:0;}
#datoCliente select {height: 35px; padding:0; margin:0}

.imgMapa {width: 250px; margin-bottom: 8px}

/************************cierre index*******************************/

.btnCotizar {position:relative; margin: 20px 5px;}
.videoResponsive {
position: relative;
width:80%;
margin:20px auto;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
height: 0;
overflow: hidden;
}
 
.videoResponsive iframe,
.videoResponsive object,
.videoResponsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

I/* formularios*****************/
#enviar {width:80px !important;}
#contactoCliente #btnFormCotizar {float: right; background: #098edb; color: #fff; margin: 25px 5px; display:inline-block}

/*Menú adaptable ***************/

header nav {
	position: relative;
	margin-top:25px;
	float:right;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 1.6em !important;
	z-index:100;
	padding-right: 50px;
}

.menuBar {
	display:none;
}
 
header nav ul {
	overflow:hidden;
	list-style:none;
}
 
header nav ul li {
	float:left;
}
header nav ul li a::before {
	color: #FFF;
    content: attr(title);
    position: absolute;
    transition: transform 0.5s ease 0s, opacity 0.5s ease 0s;
}
header nav ul li a {
	color: #000 !important;
	padding-left:20px;
	display:block;
	text-decoration:none;	
}
header nav ul li a:hover::before {
	transform: scale(0.9);
    opacity: 0;
}

.center {padding: 0 15px}


/* mapa ******************************************************************************************/

#map {height: 500px}

/* Error ******************************************************************************************/

.error {color: #ea7c06; text-align: center; margin-top: 100px;} 
.error span {position:relative; font-size: 8.0em}
.error a {color:#989898;}

/* articulos **************************************************************************************/ 
.contenido{font-size:1.2em; color:#6E6E6E; text-align: justify; margin: 25px 0;}
.contenido .titulo {display:block; font-size: 1.6em; color:#ea7c06; font-weight: bold; margin: 30px 0; text-align: center}
.contenido span {display: block; color: #000000; margin: 10px 0;}
.contenido .imagen {display:block; text-align: center}
.contenido img {margin: 25px auto}
.contenido .aviso {background: #F2F5A9; padding:5px 12px; margin-bottom: 15px;}
.contenido .row {margin-top:8px;}
.contenido section {border-top:2px solid #D8D8D8; margin-top:8px;}
.contenido .sideBar {background: #e8e8e8}
.contenido .sideBar h3 {color:#fc7809;}
.contenido .tags{margin: 35px 0;}
.contenido #artRelacionados a {text-decoration: none; position:relative; left: 8px; margin:25px 0; color: #6E6E6E; line-height: 1.5}
.contenido #artRelacionados a:hover {color:#fc7809; font-weight: bold}
#empRelacionadas {padding: 0 8px 0 25px;}
#empRelacionadas .margin40{margin:40px 0;}
#empRelacionadas .titulo {display:block; font-size: 1.6em; color:#ea7c06; font-weight: bold; margin: 30px 0; text-align: center}

article {text-align: justify;}
table {margin:40px 0;}
table th {text-align:center; border: 1px solid black;padding: 8px;}
table td {border: 1px solid black; width: 20%; text-align:center;}

.contenido .sinBorde{margin:0; border:0;}
.contenido .sinBorde h3{display:inline-block;}
.contenido .sinBorde h4{display:inline-block; margin:0; font-weight: bold}
.contenido .sinBorde h5{display:inline-block;}
.contenido .margin20 {margin:20px 0;}
.contenido .margin40 {margin:40px 0;}
.contenido .margin80 {margin:80px 0;}

.img500 {width:500px;}

.parrafo {padding-top: 20px;} 
.negrilla {font-weight: bolder; color:#454545;}

/* articulos calculo ladrillos **************************************************************************************/ 
#calcuLadrillo #selladrillo{width: 100%}
#calcuLadrillo #selTipoPega{width: 100%}

#calcuLadrillo select {
	font-size: 1.4em;
	width: 100px;
}
#calcuLadrillo img{
	width: 90%;
}

#calculadoraLadrillo {
	background: #ffb74d;
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	border: 1px solid #989898; 
	-webkit-box-shadow: 0px 6px 20px 1px rgba(207,205,207,1);
	-moz-box-shadow: 0px 6px 20px 1px rgba(207,205,207,1);
	box-shadow: 0px 6px 20px 1px rgba(207,205,207,1);
	padding: 25px 0 15px 0;
}
#calculadoraLadrillo .titulos{padding-left: 15px; color:#000;}
#calculadoraLadrillo .input-group{padding-left: 15px; color:#000;}
#calculadoraLadrillo .input-group #junta, #calculadoraLadrillo .input-group #dosificacion {color:#000; width: 90%; font-size: 1.0em; padding: 3px 0}
#calculadoraLadrillo input{width: 90%}
#calculadoraLadrillo .form-group {padding-left:15px; width: 100%}


.resLadrillo {font-size: 1.2em}

/******* cookie bar *****************************************/
.cookiebar-close{
	display:inline-block; 
	border: 1px solid #5d6d7e; 
	background: #7fb3d5; 
	padding: 5px; 
	font-weight: bold;
}

#polCookie{display:inline;font-size: 0.9em; cursor:pointer}
#polCookie:hover{font-weight: bold; text-decoration: underline #000;}

/*********** margin ********************/

.marginTop{margin-top:40px}
.marginBottom {margin-bottom:80px; padding-bottom: 50px;}

/********** Calculadora *************************/
#calculadora {padding:20px 0;}
#calculadora .tabla{
	background: #ffb74d; 
	color: #000; 
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	border: 1px solid #989898; 
	-webkit-box-shadow: 0px 6px 20px 1px rgba(207,205,207,1);
	-moz-box-shadow: 0px 6px 20px 1px rgba(207,205,207,1);
	box-shadow: 0px 6px 20px 1px rgba(207,205,207,1);
	padding:20px 0;
}
#calculadora .detailCalculadora ul li {margin: 15px 0}
#mtsCubico{width: 90px}
#resistencia select{width: 90px}
#boxMedida select{width: 90px}
.desper {border:1px solid red;}
#calcular {position:relative; padding: 5px 8px; margin:3px;}
.padding {padding: 8px 12px; margin: 0 20px;}
#resultado {display:none; padding: 8px 15px;}
#resultado h4 {margin: 12px 0}
#resultado span{display:inline;}
#resultado .borde {border:1px solid #454545; padding: 3px}
#calculadora #btnCalcular button{font-weight: bold; font-size: 1.0em; padding: 3px 15px; margin: 12px 0}
#calculadora #btnCalcular button{font-weight: bold; font-size: 1.0em; padding: 3px 15px; margin: 12px 0}
#calculadora #resCalculadoraConcreto {background: #fff; display:none;}
#calculadora #resCalculadoraConcreto h4 {padding: 15px}


/********** Politicas *****************************/
#contactoCliente .nota a:hover {color: red;}
#contactoCliente .nota label {display:inline-block;}
#contactoCliente .nota input {display:inline; width: 20px !important; height: 10px !important}

/************ articulo relacionado *********************************************/

.artSimilar {background: #e8e8e8; padding: 25px 0 65px 0; margin-top:30px;}
.artSimilar .titulo {display:block; font-size: 1.6em; color:#ea7c06; font-weight: bold; margin: 30px 0; text-align: center}
.artSimilar .articulo {margin:8px 0;}

/***************** efecto sobre imagenes ******************************************/

/*@import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800);*/
figure.snip {
  font-family: 'Raleway', Arial, sans-serif;
  color: #000;
  position: relative;
  float: left;
  overflow: hidden;
  /*margin: 10px 1%;
  min-width: 220px;
  max-width: 360px;
  max-height: 290px;
  width: 100%;*/
  background: #fff;
  text-align: center;
}
figure.snip * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.snip img {
  opacity: 1;
  width: 100%;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
figure.snip figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 3em 3em;
  width: 100%;
  height: 100%;
}
figure.snip figcaption::before {
  position: absolute;
  top: 50%;
  right: 30px;
  bottom: 50%;
  left: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  content: '';
  opacity: 0;
  background-color: #ffffff;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
figure.snip h2,
figure.snip p {
  margin: 0 0 5px;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s,-webkit-transform 0.35s,-moz-transform 0.35s,-o-transform 0.35s,transform 0.35s;
}
figure.snip h2 {
  word-spacing: -0.15em;
  font-weight: 300;
  text-transform: uppercase;
  -webkit-transform: translate3d(0%, 50%, 0);
  transform: translate3d(0%, 50%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
figure.snip h2 span {
  font-weight: 800;
}
figure.snip p {
  font-weight: 200;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
figure.snip a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  color: #ffffff;
}
figure.snip:hover img {
  opacity: 0.35;
}
figure.snip:hover figcaption h2 {
  opacity: 1;
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
figure.snip:hover figcaption p {
  opacity: 0.9;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
figure.snip:hover figcaption::before {
  background: rgba(255, 255, 255, 0);
  top: 30px;
  bottom: 30px;
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
/** videos *********************************************************/
.video-responsive {
	position: relative;
	width: 100%;
	height: 100%;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	margin-top: 20px;
	margin-top: 20px;
  }
  
  .video-responsive iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  }
 /** pasos cotizacion *********************************************************/

.pasos li {margin-bottom:20px;}
 
/* media screen ***************************************************************************************/
@media screen and (max-width:1024px){
	header #usuario {display:block;}
}
@media screen and (max-width:992px){
	header .menu {background: #000}
	header nav ul li a {color: #c4c4c4 !important}
	.inicio .intro{margin-left: 0; margin-top:15px; line-height: 1.0em} 
	.inicio .intro h2 {font-size:1.7em; line-height: 1.1em;}
	#msjCliente{top: 0;}	
}
@media screen and (max-width:768px){
	header .menu {background: #000}
	header .logo {padding-left:20px;}
	.fadeIn {font-size: 1.5em;}
	.inicio .intro{margin-left: 0; margin-top:20px; line-height: 1.0em}
	#msjCliente{top: 0;}
	.inicio .constructor img {width: 100%; padding-top:20px}
	
}

@media screen and (max-width:480px){
	header img {width: 100%;}
	header .menu {background: none}
	.fadeIn {font-size: 1.5em; width:70%;}
	.inicio {background:#fff}
	#guia {display:none;}

	header .menuxs {padding: 0}
	header nav {
		display: none;
		background: #454545;
		width:100%;
		left:-100%;
		margin:0;
		position: relative;
		z-index: 10;
	}
 
	header nav ul li {
		display:block;		
		float:none;
		position: relative;
		right: 20px;
		border-bottom:1px solid rgba(255,255,255, .3);
		margin-top: 10px;
		padding: 5px 0;
	}
 
	.menuBar {
		display:block;
		width:100%;
		background: #000;
	}
 
	.menuBar .bt-menu {
		display:block;
		padding:20px;
		color:#fff;
		font-weight: bold;
		font-size:1.5em;
		text-decoration: none;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}
 
	.menuBar span {
		float:right;
		font-size:40px;
	}	
}