@import url('https://fonts.googleapis.com/css?family=Open+Sans:300i,400,700');
@import url('https://fonts.googleapis.com/css?family=Khula|Oswald');

@charset "UTF-8";
/* BASICS */

@font-face {font-family: 'ocean_sans_stdbook';src: url(../fonts/ocean.eot);src: url(../fonts/d41d.html?#iefix) format('embedded-opentype'),url(../fonts/ocean.woff) format('woff'),url(../fonts/ocean.ttf) format('truetype'),url(../fonts/.html#ocean) format('svg');font-weight: normal;font-style: normal;}
@font-face {font-family: 'icomoon';src: url(../fonts/icomoon.eot);src: url(../fonts/d41d.html?#iefix) format('embedded-opentype'),url(../fonts/icomoon.woff) format('woff'),url(../fonts/icomoon.ttf) format('truetype'),url(../fonts/.html#icomoon) format('svg');font-weight: normal;font-style: normal;}
p {text-rendering: optimizeLegibility;font-smooth:always; font-size:14px;}
h1 { font-size:1em;text-transform:uppercase;text-rendering: optimizeLegibility;font-smooth:always;}
html,body {margin:0; font-family:ocean_sans_stdbook; text-rendering: optimizeLegibility;font-smooth:always;}
li { list-style: square; color:#FFF; font-size:14px;}

.icon {width: auto; height:250px; float:left; }
.icon img{width:auto;}
.gear { width:auto; height:auto; float:left; visibility:hidden;}
.line {width:100%; height:1px; background:#fff;}
.line2 {width:80%; height:1px; background:#fff; margin-left:10%; float:left; visibility:hidden;}
.line_vertical {width:1px; height:250px; background:#fff; float:left; margin:0 30px; visibility:hidden;}

*{
	box-sizing:border-box;
}



header{
	display: flex;
	justify-content:space-between;
	align-items:center;
	width: 100%;
	position: absolute;
	top:0;
	left:0;
	
	z-index: 999;padding: 0 20px;
}

header .logotipo{
	width: 20%;
	padding: 10px 0
	
}

header .logotipo img{
	width: 100%;
}

header nav{
	width: 70%;
}

header nav > ul{
	display: flex;
	list-style: none;
}

header nav > ul > li{
	flex:auto;
	list-style: none;
}

header nav  > ul > li > a{
	text-decoration: none;
	color:#fff;
	padding: 20px 15px;
	display: block;
	font-family: Open Sans;
	font-size: 15px;
	letter-spacing: 1px;
	font-weight: 700;
}

header nav > ul > li > a i{
	font-size: 14px;
	margin-left: 7px
}

header nav ul ul {
	background: #fff;
    list-style: none;
    padding: 10px;
    display: block;
    position: absolute;
    width: 340px;
    transform:scaleX(0);
    transition:all .4s;
    border-radius: 5px
}


header nav > ul > li:hover ul.submenu{
	transform:scaleX(1);
}


header nav ul ul > li > a i{
	margin-right: 10px
}

header nav ul ul > li > a{
	text-decoration: none;
    color: #666;
    display: block;
    padding: 8px;
    font-size: 14px;
}

header nav ul ul > li {
	list-style: none;
}




/*-----------------------------SECTIONS-----------------------------*/


.column img{width:auto;}
#icon1 {vertical-align:text-top;}
#icon2 {vertical-align:middle;}
.home {width:100%; max-height:800px;}


.footer {width:100%; height:auto; padding:10px 0; text-align:center; float:left; border-top:#EF0F25 10px solid;}
.footer p{font-family: 'ocean_sans_stdbook'; font-size:13px; color:#666;}
.footer .accesos{ padding:0 30px; }
.footer .accesos a{ font-family: 'ocean_sans_stdbook'; font-size:13px; color:#c00; text-decoration:none; margin:30px; height:30px; line-height:30px;}
.footer .accesos a:hover{ font-family: 'ocean_sans_stdbook'; font-size:13px; color:#333; text-decoration:none; margin:30px}
.footer a{font-family: 'ocean_sans_stdbook'; font-size:13px; color:#666; text-decoration:none;}
.footer a:hover{ color:#DE1E25;}
.aboutus {
padding:60px 0;
width:100%;
font-family: Open Sans;
background: #ed1c24; /* Old browsers *
/background: -moz-radial-gradient(center, ellipse cover,  #ed1c24 0%, #c82127 100%); /* FF3.6+ */background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ed1c24), color-stop(100%,#c82127)); /* Chrome,Safari4+ */background: -webkit-radial-gradient(center, ellipse cover,  #ed1c24 0%,#c82127 100%); /* Chrome10+,Safari5.1+ */background: -o-radial-gradient(center, ellipse cover,  #ed1c24 0%,#c82127 100%); /* Opera 12+ */background: -ms-radial-gradient(center, ellipse cover,  #ed1c24 0%,#c82127 100%); /* IE10+ */background: radial-gradient(ellipse at center,  #ed1c24 0%,#c82127 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed1c24', endColorstr='#c82127',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.aboutus > h1{
	text-align: center;
	color: #fff;
	font-family: Oswald;
	letter-spacing: 10px;
	margin: 0px 0 40px;
	font-size: 40px;
}

.about_content {width: 90%;
    height: auto;
    margin: 0 auto;
    color: #FFF;
    overflow: hidden;
    max-width: 980px;
    display: flex;
    justify-content: space-between;}


.aboutus .about_content .column span {
    width: 100%;
    text-align: center;
    margin: 20px auto;
    display: block;}

.aboutus .about_content .column span i{
	color: #fff;
    font-size: 60px;
    text-align: center;
    margin: auto;
}

.aboutus .about_content .column > h3{
	margin-bottom: 30px;
	text-align: center;
}

.aboutus .about_content .column p{
	line-height: 25px;
	text-align: center;
}

.aboutus .about_content .column:last-child p li{
	text-align: left;
	padding-left: 20px
}

.aboutus .about_content .column  li{
	list-style: none;
	margin-bottom: 5px
}

.aboutus .about_content .column  li > i{
	margin-right: 5px;
}

.aboutus .about_content .column {width:25%;padding: 15px;
	}

.banner {width:100%; visibility:hidden; overflow:hidden;}
.banner img{ width:100%;}


.proyectos{
	padding:60px 0;
	width:100%;
	font-family: Open Sans;

}

.proyectos > h1 {
	text-align: center;
	color: red;
	font-family: Oswald;
	letter-spacing: 10px;
	margin: 0px 0 40px;
	font-size: 40px;
}

.proyectos .proyectos-content{
	display: flex;
	width: 100%;
}

.proyectos .proyectos-content .proyect{
	width: 33.3%;
	position: relative;
	overflow: hidden;
}



.proyectos .proyectos-content .imagen-proy{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.proyectos .proyectos-content .imagen-proy img{
	width: 100%;
	-webkit-filter: blur(0px); /* Safari */
    filter: blur(0px);
    transition:all .4s;
}

.proyectos .proyectos-content .proyect a{
	position: absolute;
	top: 0;
	left:0;
	width: 100%;
	height: 100%;
	z-index: 10;
	flex-direction:column;
	display: flex;
	align-items:center;
	justify-content:center;
	text-decoration: none;
	border:0px solid rgba(0,0,0,.5);
	opacity: 0;
	transition:all .5s;
	transform:scale(1);
}

.proyectos .proyectos-content .proyect a i{
	margin:auto;
	text-align: center;
	color: #fff;
	font-size: 30px;
	border-radius: 50%;
	background: rgb(218, 31, 38);
	display: block;
	padding: 20px;
	opacity: 1;
}

.proyectos .proyectos-content .proyect a p{
	color: #fff;
	font-family: Oswald;
	font-size: 20px;
	text-align: center;
	padding: 5px;
	margin-bottom: 20px;
	text-shadow:3px 3px 2px rgba(0,0,0,.5);

}

.proyectos .proyectos-content .proyect:hover a{
	opacity: 1;
	border:40px solid rgba(218, 31, 38, .5);
}

.proyectos .proyectos-content .proyect:hover img{
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px); /* Safari */
    filter: blur(3px);
}


.section{
	margin: 100px auto 30px;
	width: 95%;
	max-width: 980px;
}

.section h1{
	color: #666;
	font-family: Oswald;
	letter-spacing: 5px;
	font-size: 25px;
	text-transform: normal;
	margin:50px;
}

.section .pro-content{
	display: flex;
	width: 100%;
	align-items:center;
}

.section .pro-content .descrip-pro{
	width: 50%;
	text-align: center;
}


.section .pro-content .img-puro{
	width: 50%;
	display: flex;
}

.section .pro-content .img-puro .img-pro{
width: 100%;
}

.section .pro-content .img-pro img{
	width: 100%
}

.clients 
{width:100%; height:auto; margin-bottom:80px;}
.clients_content 
{max-width:980px; width:auto; height:auto; margin:0 auto; color:#FFF; overflow:hidden;}
.clients h2{ font-size:1.5em; color:#7f272d; text-transform:uppercase; padding:50px; text-align:center; }
.client_logo { width:205px; height:205px; margin:20px; float:left; visibility:hidden; border-color:#CCC; border-style:solid; border-width:thin; display: table-cell;text-align: center;vertical-align: middle; overflow:hidden;}
.client_logo img{width:100%; height:100%; overflow:hidden;}
.banner2 { overflow:hidden; visibility:hidden; width:100%; background: url(../images/banner/b4.png) center center;}
.welding{ width:40%; float:right; visibility:hidden; max-height:710px;}
.digger { width:60%;float:left; visibility:hidden;}
.digger_content{width:97%; height:auto; vertical-align:middle; text-align:center; color:#fff; float:left; margin-top:5%;}
.digger_content img{ float:left; width:60%; align:middle;}
.digger_content_title {margin-top:20%; float:right; margin-right:10%; text-align:right; font-size:25px; visibility:hidden;  text-shadow: 2px 2px #000;}
.digger_content p{width:80%; height:auto; vertical-align:middle; text-align: justify; color:#fff; font-size:15px; padding:10px; margin-left:10%; margin-right:10%; text-shadow: 2px 2px #000;}
.services {width:100%; height:500px; overflow:hidden; background:url(../images/banner/b3.jpg) center center no-repeat fixed; background-size:cover; text-align:center; }
.services h2{ width:100%; color:#FFF; background:rgba(255,255,255,.8); padding:15px;font-size:1.5em; color:#7f272d; text-transform:uppercase;}
.services p{ width:100%; color:#FFF; background:rgba(0,0,0,.5); padding:15px;font-size:1.5em; text-transform:uppercase;}
.services a{ cursor:pointer}
.services a:hover{ cursor:pointer; color:#c00}
.magazine {width:100%; height:auto; padding-bottom:10px; background:url(../images/banner/b5.png) center center fixed; background-size:cover;}
.magazine_logo { cursor:pointer;width:205px; height:205px; margin:20px; float:left; border:none; display: table-cell;text-align: center;vertical-align: middle;}
.magazine_logo img{width:100%;}
.magazine h2{ text-align:center; background:rgba(0,0,0,.6); width:100%; color:#fff; padding:5px 0;}

.left { float:left; width:40%; margin-left:10%; margin-top:5%; visibility:visible;}
.right{ float:right; width:40%; margin-top:-66px; visibility:hidden;}

.red_separator {width:100%; height:20px; background: #ed1c24; /* Old browsers */background: -moz-radial-gradient(center, ellipse cover,  #ed1c24 0%, #c82127 100%); /* FF3.6+ */background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ed1c24), color-stop(100%,#c82127)); /* Chrome,Safari4+ */background: -webkit-radial-gradient(center, ellipse cover,  #ed1c24 0%,#c82127 100%); /* Chrome10+,Safari5.1+ */background: -o-radial-gradient(center, ellipse cover,  #ed1c24 0%,#c82127 100%); /* Opera 12+ */background: -ms-radial-gradient(center, ellipse cover,  #ed1c24 0%,#c82127 100%); /* IE10+ */background: radial-gradient(ellipse at center,  #ed1c24 0%,#c82127 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed1c24', endColorstr='#c82127',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}

.contact { width:100%; visibility:hidden;} 
.contact img{float: left; width:50%;}
.form { background:#CCC; float:left; width:500px; padding:20px; margin-top:5px;}

 /*------------------------------------Form------------------------------------*/
label {display: block; margin:0 auto; text-align:center;}
label>span {float: left;width: 80px;text-align: right;padding-right: 10px;color: #FFF;font-size: 14px;}
input[type="text"], .basic-grey input[type="email"], .basic-grey textarea,.basic-grey select{border: 1px solid #DADADA; color: #888; height: 24px; margin-bottom: 5px; margin-right: 6px; margin-top: 2px; outline: 0 none; padding: 3px 3px 3px 5px; width: 300px;} 
textarea{height:100px; width:300px; resize:none; padding: 3px 3px 3px 7px;color: #888;border: 1px solid #DADADA; font-family: tahoma;font-size: 11px; }
input[type="password"], .basic-grey input[type="password"], .basic-grey textarea,.basic-grey select{border: 1px solid #DADADA; color: #888; height: 24px; margin-bottom: 5px; margin-right: 6px; margin-top: 2px; outline: 0 none; padding: 3px 3px 3px 5px; width: 70%;}

iframe {width: 100% !important;}
.ajaxgif {visibility:hidden; height:1px;}




/*-----------------------------ANIMATIONS-----------------------------*/

.animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.animated.infinite {-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}
.animated.hinge {-webkit-animation-duration: 2s;animation-duration: 2s;}

.fadeInLeft {-webkit-animation-name: fadeInLeft;animation-name: fadeInLeft;visibility:visible;}
@-webkit-keyframes fadeInLeft {0% {opacity: 0;-webkit-transform: translateX(-20px);transform: translateX(-20px);}100% {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}}
@keyframes fadeInLeft {0% {opacity: 0;-webkit-transform: translateX(-20px);-ms-transform: translateX(-20px);transform: translateX(-20px);}100% {opacity: 1;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}}

.fadeInRight {-webkit-animation-name: fadeInRight;animation-name: fadeInRight; visibility: visible;}
@-webkit-keyframes fadeInRight {0% {opacity: 0;-webkit-transform: translateX(20px);transform: translateX(20px);}100% {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}}
@keyframes fadeInRight {0% {opacity: 0;-webkit-transform: translateX(20px);-ms-transform: translateX(20px);transform: translateX(20px);}100% {opacity: 1;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}}

.fadeInDown {-webkit-animation-name: fadeInDown;animation-name: fadeInDown; visibility:visible;}
@-webkit-keyframes fadeInDown {0% {opacity: 0;-webkit-transform: translateY(-20px);transform: translateY(-20px);}100% {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);}}
@keyframes fadeInDown {0% {opacity: 0;-webkit-transform: translateY(-20px);-ms-transform: translateY(-20px);transform: translateY(-20px);}100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}}

.slideInLeft {-webkit-animation-name: slideInLeft;animation-name: slideInLeft; visibility:visible;}
@-webkit-keyframes slideInLeft {0% {opacity: 0;-webkit-transform: translateX(-2000px);transform: translateX(-2000px);}100% {-webkit-transform: translateX(0);transform: translateX(0);}}
@keyframes slideInLeft {0% {opacity: 0;-webkit-transform: translateX(-2000px);-ms-transform: translateX(-2000px);transform: translateX(-2000px);}100% {-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}}

.fadeInUp {-webkit-animation-name: fadeInUp;animation-name: fadeInUp; visibility:visible;}
@-webkit-keyframes fadeInUp {0% {opacity: 0;-webkit-transform: translateY(20px);transform: translateY(20px);}100% {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);}}
@keyframes fadeInUp {0% {opacity: 0;-webkit-transform: translateY(20px);-ms-transform: translateY(20px);transform: translateY(20px);}100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}}

.bounceIn {-webkit-animation-name: bounceIn;animation-name: bounceIn; visibility:visible;}
@-webkit-keyframes bounceIn {0% {opacity: 0;-webkit-transform: scale(.3);transform: scale(.3);}50% {opacity: 1;-webkit-transform: scale(1.05);transform: scale(1.05);}70% {-webkit-transform: scale(.9);transform: scale(.9);}100% {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}}
@keyframes bounceIn {0% {opacity: 0;-webkit-transform: scale(.3);-ms-transform: scale(.3);transform: scale(.3);}50% {opacity: 1;-webkit-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05);}70% {-webkit-transform: scale(.9);-ms-transform: scale(.9);transform: scale(.9);}100% {opacity: 1;-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}}

.slideInRight {-webkit-animation-name: slideInRight;animation-name: slideInRight; visibility:visible;}
@-webkit-keyframes slideInRight {0% {opacity: 0;-webkit-transform: translateX(2000px);transform: translateX(2000px);}100% {-webkit-transform: translateX(0);transform: translateX(0);}}
@keyframes slideInRight {0% {opacity: 0;-webkit-transform: translateX(2000px);-ms-transform: translateX(2000px);transform: translateX(2000px);}100% {-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}}

.pulse{animation-name: pulse;-webkit-animation-name: pulse;	animation-duration: 1.5s;	-webkit-animation-duration: 1.5s;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;}
@keyframes pulse {0% {transform: scale(0.9);opacity: 0.7;		}50% {transform: scale(1);opacity: 1;	}	100% {transform: scale(0.9);opacity: 0.7;	}			}
@-webkit-keyframes pulse {0% {-webkit-transform: scale(0.95);opacity: 0.7;		}50% {-webkit-transform: scale(1);opacity: 1;	}	100% {-webkit-transform: scale(0.95);opacity: 0.7;	}			}




@media only screen 
and (min-width : 320px) 
and (max-width : 480px) { 
.aboutus { padding:80px 0; width:100%; height:750px; background: #ed1c24; /* Old browsers */background: -moz-radial-gradient(center, ellipse cover,  #ed1c24 0%, #c82127 100%); /* FF3.6+ */background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ed1c24), color-stop(100%,#c82127)); /* Chrome,Safari4+ */background: -webkit-radial-gradient(center, ellipse cover,  #ed1c24 0%,#c82127 100%); /* Chrome10+,Safari5.1+ */background: -o-radial-gradient(center, ellipse cover,  #ed1c24 0%,#c82127 100%); /* Opera 12+ */background: -ms-radial-gradient(center, ellipse cover,  #ed1c24 0%,#c82127 100%); /* IE10+ */background: radial-gradient(ellipse at center,  #ed1c24 0%,#c82127 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed1c24', endColorstr='#c82127',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ }
.about_content {width:300px; height:auto; margin:0 auto; color:#FFF; overflow:hidden;}
.about_content p{text-rendering: optimizeLegibility;font-smooth:always; font-size:10px;}
.line_vertical {width:80%px; height:1px; background:#fff; float:left; margin:0 auto; visibility:hidden;}
#empresa { height:150px;}
.client_logo {width: 100px;height: 100px;margin: 20px 0px 0px 40px;float: left;border-color: #CCC;border-style: solid;border-width: thin;}
.digger {width: 100%;float: left;}
.welding {width: 100%;float: left;max-height: 710px;}
.left {float: left;width: 94%;margin: 10px;margin-top: 5%;}
.right {float: left;width: 100%; margin-top:0px;}
.contact img {float: left;width: 100%;}
.form {background: none repeat scroll 0% 0% #CCC;float: left;width: 100%;padding: 20px;margin-top: 5px;}
input[type="text"]{ width:90%; margin:5px auto;}
textarea { width:90%; margin:5px auto;font-family: tahoma;font-size: 11px;}
.services h2{font-size:1.5em; color:#7f272d; text-transform:uppercase; margin-top:20px; position:absolute; margin-left:60px;}
#dl-menu{float: left;margin-left: 7px;}
.services {height:300px;}


}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
.about_content {color: #FFFFFF;height: auto;margin: 0 auto;overflow: hidden;width: 700px;}
.aboutus { padding:80px 0; width:100%; height:500px; background: #ed1c24; /* Old browsers */background: -moz-radial-gradient(center, ellipse cover,  #ed1c24 0%, #c82127 100%); /* FF3.6+ */background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ed1c24), color-stop(100%,#c82127)); /* Chrome,Safari4+ */background: -webkit-radial-gradient(center, ellipse cover,  #ed1c24 0%,#c82127 100%); /* Chrome10+,Safari5.1+ */background: -o-radial-gradient(center, ellipse cover,  #ed1c24 0%,#c82127 100%); /* Opera 12+ */background: -ms-radial-gradient(center, ellipse cover,  #ed1c24 0%,#c82127 100%); /* IE10+ */background: radial-gradient(ellipse at center,  #ed1c24 0%,#c82127 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed1c24', endColorstr='#c82127',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ }
#equipo { float:right; margin-right:70px;}
.gear { margin-left:-330px; margin-top:-100px;}
.form {background: none repeat scroll 0% 0% #CCC;float: left;width: 100%;padding: 20px;margin-top: 5px;}
textarea {font-family: tahoma;font-size: 11px;margin: 5px auto 5px -5px;width: 41%;}
.contact img {float: left;margin-left: 220px;width: 50%;}
.welding {float: right;margin-top: 20px;width: 40%;}

}