html { color: #222; font-size: 1em; line-height: 1.4; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
audio, canvas, iframe, img, svg, video { vertical-align: middle; } fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; } .browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

/* ==========================================================================
   Author's custom styles #f3523c  #b33c2d
   ========================================================================== */

#servicios{background: #f7b731; color: #202020; font-family: 'dm_sansbold'}

.boton{display: block; width: 150px; border-radius: 50px; border: 2px solid #f7b731; color: #202020; text-align: center; padding: 8px 0; font-family: 'dm_sansbold'; margin: 0 auto; font-size: 14px}
.boton:hover{background: #f7b731; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7b831', endColorstr='#fed130', GradientType=0 );
 color: #fff} 

section.hero{margin: 180px auto 0!important; display: block; height: 200px; width: 100%; background: url("../img/bann-servicios.jpg"); background-size: cover; background-position: center center; display: flex; justify-content: center; align-items: center; }
section.hero div.cont{width: 80%; margin: 0 auto}
section.hero div.cont p.tittle{font-size: 30px; color: #f7b731; text-align: center; font-family: 'dm_sansbold'}
section.hero div.cont p{font-size: 16px; color: #fff;  text-align: center; margin: 0 auto}

.navegacion{display: none}

section div.contI{width: 90%; margin: 0 auto}
section div.contD{width: 90%; margin: 0 auto}
section h2{font-size: 28px;  font-family: 'dm_sansbold'; font-weight: normal; text-align: center; margin: 20px 0}
section div.contI p, section div.contD p{font-size: 14px; text-align: center; margin: 0 0 30px}
.imgTerra, .imgDemo, .imgExca, .imgLeva, .imgPavi, .imgRenta{width: 100%; height: 250px; }
.imgTerra{background: url("../img/terraceria.jpg");  background-position: center center; background-size: cover;margin: 30px auto}
.imgDemo{background: url("../img/demolicion.jpg"); background-position: center center; background-size: cover;margin: 30px auto}
.imgExca{background: url("../img/excavaciones.jpg"); background-position: center center; background-size: cover;margin: 30px auto}
.imgLeva{background: url("../img/levantamientos-topograficos.jpg");  background-position: center center;background-size: cover;margin: 30px auto}
.imgPavi{background: url("../img/pavimentos.jpg"); background-position: center center; background-size: cover;margin: 30px auto}
.imgRenta{background: url("../img/renta-de-equipo.jpg"); background-position: center center; background-size: cover;margin: 30px auto 0}


aside{width: 100%; background:  #fed330; padding: 50px 0 }
aside .cont{width: 90%; margin: 0 auto}
aside p{margin: 0; text-align: center; font-size: 28px;  font-family: 'dm_sansbold'; font-weight: normal; line-height: 1.3em; margin-bottom: 20px}
aside a{background: #202020; color: #fff; font-size: 14px; text-align: center; display: block; width: 180px; margin: 0 auto; border-radius: 50px; padding: 10px;  font-family: 'dm_sansbold'; font-weight: normal; border: 2px solid #202020}
aside a::before{content: ''; width: 25px; height: 25px; background: url("../img/icono-tel.png"); background-size: 25px; background-position: center center; background-repeat: no-repeat;display: inline-block; margin: 0}
aside a span{transform: translateY(-7px); display: inline-block; margin-left: 10px}
aside a:hover{background: transparent; color: #202020}
aside a:hover::before{background: url("../img/icono-tel-B.png");; background-size: 25px; background-position: center center; background-repeat: no-repeat;}




/* == 768px MEDIA QUERY ========================================================================== */
@media only screen and (min-width:768px){
#servicios{background: none; color: #f7b731; font-family: 'dm_sansbold'}

section.hero{margin: 120px auto 0!important; height: 180px; width: 100%; }
section.hero div.cont{width: 90%; margin: 0 auto}
section.hero div.cont p.tittle{font-size: 30px; text-align: left}
section.hero div.cont p{font-size: 16px; ; }
	
.actives{color: #f7b731!important}
	
.navegacion{display: block; margin: 30px auto}
.navegacion .cont{width: 90%; margin: 0 auto}
.navegacion .cont a{color: #202020; font-size: 14px;font-family: 'dm_sansbold'; font-weight: normal; text-align: center; display: inline-block; width: 16%; vertical-align: top;}
.navegacion .cont a::before{content: ''; display: block; width: 100%; height: 100px; background-position: center center; background-repeat: no-repeat; border: 1px solid rgba(0,0,0,0.1); margin-bottom: 10px }
a.servTerra::before{background: url("../img/servicios/terracerias.jpg"); background-size: 80px; background-position: center center;}
a.servDemo::before{background: url("../img/servicios/demolicion.jpg"); background-size: 80px; background-position: center center;}
a.servExc::before{background: url("../img/servicios/excavaciones.jpg"); background-size: 80px; background-position: center center;}
a.servLev::before{background: url("../img/servicios/levantamientos.jpg"); background-size: 80px; background-position: center center;}
a.servPav::before{background: url("../img/servicios/pavimentacion.jpg"); background-size: 80px; background-position: center center;}
a.servRen::before{background: url("../img/servicios/renta-de-equipo.jpg"); background-size: 80px; background-position: center center;}


	#terracerias, #demolicion, #excavaciones, #levantamientos, #pavimentacion, #renta{padding: 50px 0}
	
section div.contI{width: 40%; margin: 0 auto; float: left; margin-left: 5%; padding-top: 30px}
section div.contD{width: 40%; margin: 0 auto; float: right; margin-right: 5%; padding-top: 30px}
section h2{font-size: 28px;  font-family: 'dm_sansbold'; font-weight: normal; text-align: left; margin: 20px 0}
section div.contI p, section div.contD p{font-size: 14px; text-align: justify; margin: 0 0 30px}
section div.contI a, section div.contD a{margin: 0}
.imgTerra, .imgDemo, .imgExca, .imgLeva, .imgPavi, .imgRenta{width: 50%; height: 450px; }
.imgTerra{float: right; margin: 0px auto}
.imgDemo{float: left; margin: 0px auto}
.imgExca{float: right; margin: 0px auto}
.imgLeva{float: left; margin: 0px auto}
.imgPavi{float: right; margin: 0px auto}
.imgRenta{float: left; margin: 0px auto }

	
	
}

/* == 1024px MEDIA QUERY ========================================================================== */
@media only screen and (min-width:1024px){
section.hero div.cont{width: 80%; margin: 0 auto}
section.hero div.cont p.tittle{font-size: 35px;}
section.hero div.cont p{font-size: 24px;}

	
.navegacion{display: block; margin: 30px auto}
.navegacion .cont{width: 90%; margin: 0 auto}
.navegacion .cont a{color: #202020; font-size: 14px;font-family: 'dm_sansbold'; font-weight: normal; text-align: center; display: inline-block; width: 14%; margin: 0 1% }
.navegacion .cont a::before{content: ''; display: block; width: 80%; height: 80px; background-position: center center; background-repeat: no-repeat; border: 1px solid rgba(0,0,0,0.1); margin:0 auto 10px }


#terracerias, #demolicion, #excavaciones, #levantamientos, #pavimentacion, #renta{padding: 50px 0}
	
section div.contI{margin-left: 0%; padding-left: 10%}
section div.contD{margin-right: 0%; padding-right: 10%}
section h2{font-size: 30px; }
section div.contI p, section div.contD p{font-size: 14px;}
	
aside{width: 100%; background:  #fed330; padding: 50px 0 }
aside .cont{width: 80%; margin: 0 auto}
aside p{width: 50%; float: left; text-align: left; font-size: 35px}
aside a{float: right; font-size: 20px; width: 250px; margin-top: 20px}
aside a::before{content: ''; width: 25px; height: 25px; background: url("../img/icono-tel.png"); background-size: 25px; background-position: center center; background-repeat: no-repeat;display: inline-block; margin: 0}
aside a span{transform: translateY(-2px); display: inline-block; margin-left: 10px}
aside a:hover{background: transparent; color: #202020}
aside a:hover::before{background: url("../img/icono-tel-B.png");; background-size: 25px; background-position: center center; background-repeat: no-repeat;}
	
.boton{font-size: 14px}	
}

/* == 1280px MEDIA QUERY ========================================================================== */
@media only screen and (min-width:1280px){
.boton{font-size: 16px}

section.hero div.cont{width: 75%; margin: 0 auto}
section.hero div.cont p.tittle{font-size: 45px;}
section.hero div.cont p{font-size: 24px;}
	
	
.navegacion{margin: 50px auto}
.navegacion .cont{width: 80%;}
.navegacion .cont a{font-size: 16px; width: 12%; margin: 0 2.15%; vertical-align: top}
	
section div.contI{padding-top: 30px; padding-left: 12%}
section div.contD{padding-top: 30px; padding-right: 12%}
section h2{margin: 20px 0}
section div.contI p, section div.contD p{font-size: 16px;}
section div.contI a, section div.contD a{margin: 0}
.imgTerra, .imgDemo, .imgExca, .imgLeva, .imgPavi, .imgRenta{width: 50%; height: 450px; }
.imgTerra{float: right; margin: 0px auto}
.imgDemo{float: left; margin: 0px auto}
.imgExca{float: right; margin: 0px auto}
.imgLeva{float: left; margin: 0px auto}
.imgPavi{float: right; margin: 0px auto}
.imgRenta{float: left; margin: 0px auto }

aside .cont{width: 76%; margin: 0 auto}
aside p{font-size: 40px}
aside a{font-size: 20px; width: 250px; margin-top: 30px}
aside a::before{width: 25px; height: 25px; background-size: 25px;}
aside a:hover::before{background: url("../img/icono-tel-B.png"); background-size: 25px;}
	
.boton{font-size: 16px}	
}

/* == 1600px MEDIA QUERY ========================================================================== */
@media only screen and (min-width:1600px){
.boton{font-size: 18px}

section.hero div.cont{width: 76%; margin: 0 auto}
section.hero div.cont p.tittle{font-size: 45px;}
section.hero div.cont p{font-size: 24px;}
	
	
.navegacion{display: block; margin: 30px auto}
.navegacion .cont{width: 76%; margin: 0 auto}
.navegacion .cont a{color: #202020; font-size: 18px}
section div.contI p, section div.contD p{font-size: 18px;}


aside .cont{width: 70%; margin: 0 auto}
aside p{font-size: 50px}
aside a{font-size: 30px; width: 250px; margin-top: 35px}
aside a::before{width: 25px; height: 25px; background-size: 25px;}
aside a:hover::before{background: url("../img/icono-tel-B.png"); background-size: 25px;}
	
.boton{ font-size: 18px}
}



/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden{display:none!important}.visuallyhidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;-webkit-clip-path:none;clip-path:none;height:auto;margin:0;overflow:visible;position:static;width:auto;white-space:inherit}.invisible{visibility:hidden}
.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}@media print{*,:before,:after{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}
a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre{white-space:pre-wrap!important}
pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}