@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
a{
	text-decoration: none;
}
p{
	margin: 0;
}
h3{
	color: #606060;
	font-size: 18px;
	margin: 0;
}
.columns{
	display: flex;
	justify-content: center;
}
#wrapper{
	width: 800px;
	position: relative;
	left: calc(50% - 400px);
}
body{
	font-family: 'Roboto';
	margin: 0;
	/*background: #3ba4ad;*/
	background: #2E4D8B;
	font-size: 15px;
}
header{
	background: #f2f2f2;
}
header div#wrapper{
	padding: 10px 0;
	align-items: center;
}
header div img{
	height: 50px;
}
header div.aviso{
	background: #2E4D8B;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40px;
}
main section.banner{
	background: url(../img/banner.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	width: 100%;
	height: 500px;
	animation: slider 8s infinite;
}
@keyframes slider{
    0%, 20%, 100%{
    	background: url(../img/banner.jpg);
    	background-repeat: no-repeat;
    	background-position: center center;
    	background-size: cover;
    }
    30%, 60%{
    	background: url(../img/servicios.jpg);
    	background-repeat: no-repeat;
    	background-position: center top;
    	background-size: cover;
    }70%, 90%{
    	background: url(../img/productos.jpg);
    	background-repeat: no-repeat;
    	background-position: center bottom;
    	background-size: cover;
    }
}
main section.b-somos{
	background: url(../img/somos.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	animation: sliderintsom 8s infinite;
}
main section.b-servicios{
	background: url(../img/servicios.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	animation: sliderintser 8s infinite;
}
main section.b-productos{
	background: url(../img/productos.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	animation: sliderintpro 8s infinite;
}
@keyframes sliderintsom{
    0%, 100%{
    	background: url(../img/somos.jpg);
    	background-repeat: no-repeat;
    	background-position: center top;
    	background-size: cover;
    }
    50%, 60%{
    	background: url(../img/somos.jpg);
    	background-repeat: no-repeat;
    	background-position: center center;
    	background-size: cover;
    }
}
@keyframes sliderintser{
    0%, 100%{
    	background: url(../img/servicios.jpg);
    	background-repeat: no-repeat;
    	background-position: center top;
    	background-size: cover;
    }
    50%, 60%{
    	background: url(../img/servicios.jpg);
    	background-repeat: no-repeat;
    	background-position: center bottom;
    	background-size: cover;
    }
}
@keyframes sliderintpro{
    0%, 100%{
    	background: url(../img/productos.jpg);
    	background-repeat: no-repeat;
    	background-position: center top;
    	background-size: cover;
    }
    50%, 60%{
    	background: url(../img/productos.jpg);
    	background-repeat: no-repeat;
    	background-position: center bottom;
    	background-size: cover;
    }
}
main section#wrapper{
	padding: 20px;
	left: calc(50% - 420px);
}
main section#wrapper h1{
	width: calc(100% - 40px);
	padding: 20px;
	background: #000;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 0 20px 0;
}
div.servicios div.columns{
	align-items: flex-end;
	margin: 20px 0;
}
div.servicios div.columns div{
	text-align: center;
	flex: 1;
}
div.servicios div.columns div h4{
	color: #2E4D8B;
	font-size: 14px;
	margin-top: 0;
}
div.servicios div.columns div div.img{
	background: #fff url(../img/servicios/proyectos.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 120px;
	height: 120px;
	border: solid 10px #f2f2f2;
	position: relative;
	left: calc(50% - 70px);
	transition: all .5s;
}
div.servicios div.columns div div.img-2{
	background: #fff url(../img/servicios/obras.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
div.servicios div.columns div div.img-3{
	background: #fff url(../img/servicios/redes-electricas.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
div.servicios div.columns div div.img-4{
	background: #fff url(../img/servicios/pruebas.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
div.servicios div.columns div div.img-5{
	background: #fff url(../img/servicios/estudios.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
div.servicios div.columns div div.img-6{
	background: #fff url(../img/servicios/proteccion.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
div.servicios div.columns div div.img-7{
	background: #fff url(../img/servicios/mediciones.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
div.servicios div.columns div div.img-8{
	background: #fff url(../img/servicios/ejecutadas.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
div.servicios div.columns div a.active div.img, div.servicios div.columns div div.img:hover{
	border: solid 10px #2E4D8B;
}
main section.content{
	margin-top: -30px;
	background: #fff;
	box-shadow: 0 0 10px rgba(0,0,0,.5);
}
main section.content div article.contenido{
	width: calc(100% - 340px);
}
main section.content div article.contenido h3{
	color: #3ba4ad;
	margin-bottom: 5px;
}
main section.content div article.contenido img{
	width: 100%;
	margin: 10px 0;
}
main section.content div article.contenido form h3{
	margin-bottom: 20px;
}
article.contenido form input, article.contenido form textarea{
	width: calc(100% - 40px);
	padding: 10px;
	font-size: 14px;
	background: #f2f2f2;
	border: none;
	margin-bottom: 10px;
}
article.contenido form textarea{
	height: 100px;
	max-height: 100px;
	max-width: calc(100% - 40px);
}
article.contenido form button{
	background: rgba(0,0,0,.7);
	color: #fff;
	padding: 15px 30px;
	border: none;
	text-transform: uppercase;
	transition: all .5s;
}
article.contenido form button:hover{
	background: #000;
}
article.contenido ul.prod li{
	margin-bottom: 15px;
}
main section.content div article.column-right{
	width: 300px;
	padding: 0 0 0 20px;
}
main section.content div article.column-right h3{
	margin-bottom: 10px;
}
main section.content div article.column-right ul li{
	padding: 5px 0;
	border-bottom: solid 1px #000;
	color: #3ba4ad;
}
main section.content div article.column-right ul li:last-child{
	border: none;
}
main section.content div article.column-right ul.datos-contact li, main section.content div article.column-right ul.datos-contact li a{
	color: rgba(0,0,0,.6);
	border: none;
}
main section.content div article.column-right ul.datos-contact li.title{
	color: #000;
}
main section.content div.content div.space{
	background: #bcbcbc;
	padding: 20px;
	align-items: center;
	margin-bottom: 20px;
}
main section.content div.content h4{
	font-size: 18px;
	color: #3ba4ad;
}
main section.content div.content div.space ul{
	width: calc(100% - 200px);
}
main section.content div.content div.space ul p{
	margin-bottom: 10px;
	font-weight: 900;
}
main section.content div.content div.space ul li{
	font-size: 14px;
	margin-bottom: 10px;
	opacity: .7;
}
main section.content div.content div.space div.img{
	width: 200px;
}
main section.content div.content div.space div.img img{
	width: 100%;
	height: auto;
}
main section.somos{
	background: #bcbcbc;
	color: rgba(0,0,0,.7);
	box-shadow: 0 0 10px rgba(0,0,0,.5);
}
main section.somos article{
	flex: 1;
	margin-right: 10px;
}
main section.somos article:last-child{
	margin: 0;
}
main section.somos article h3{
	margin-bottom: 10px;
}
main section.somos article a{
	flex: 1;
	margin-right: 10px;
	color: #fff;
}
main section.somos div{
	margin-bottom: 20px;
}
main section.somos a.btn{
	background: #2E4D8B;
	width: 100%;
	height: 40px;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all .5s;
}
main section.somos a.btn:hover{
	box-shadow: 0 0 5px rgba(0,0,0,.5);
}
main section.content div.content div.obras-terminadas ul{
    width: 100%;
}
main section.content div.content div.obras-terminadas ul li{
    opacity: 1;
    justify-content: flex-start;
}
main section.content div.content div.obras-terminadas ul li.title{
    margin: 20px 0 10px 0;
    font-size: 18px;
}
main section.content div.content div.obras-terminadas ul li.title:first-child{
    margin: 0 0 10px 0;
}
main section.content div.content div.obras-terminadas ul li img{
    width: auto;
    height: 300px;
    margin: 0 20px 0 0;
}
main section.content div.content div.obras-terminadas ul li.columnsimg img{
    height: 207px;
}
main section.content div.content div.obras-terminadas ul li:nth-child(1) img{
    margin: 0 10px 0 0;
}
footer, footer a{
	color: #fff;
}
footer a:hover{
	border-bottom: solid 1px #fff;
}
footer section#wrapper article{
	flex: 1;
	padding-right: 20px;
}
footer section#wrapper article:first-child{
	min-width: 130px;
}
footer section#wrapper article.service{
	min-width: 350px;
}
footer section#wrapper article:last-child{
	padding: 0;
	min-width: 200px;
}
footer section#wrapper article:last-child img{
	width: 100%;
	margin: 22px 0 10px 0;
}
footer section#wrapper article:last-child a{
	text-transform: lowercase;
}
footer section#wrapper article h4{
	font-size: 18px;
	padding-bottom: 10px;
	border-bottom: solid 2px #fff;
}
footer section#wrapper article ul li{
	margin-bottom: 10px;
}
footer section#wrapper article ul li:last-child{
	margin: 0;
}
footer section#wrapper article a{
	text-transform: uppercase;
	font-size: 13px;
}
footer section.pie{
	background: #000;
	padding: 10px 0;
	font-size: 12px;
	margin-top: 20px;
}
footer section.pie ul li{
	flex: 1;
}
footer section.pie ul li:last-child{
	text-align: right;
}