body{
  margin: 0;
  padding: 0;
  border: 0;
}
/*======================================================================

        INICIO DE LA BARRA DE NAVEGACION

======================================================================*/
#fade {
    z-index: 2999;
    height: 83px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(31, 31, 31, 0.99);
}
.top_header {
    /* background-color: rgba(31, 31, 31, 0.85);*/

    z-index: 3000;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}
.row img {
    z-index: 3000;
    min-width: 150px;
    min-height: 80px;
    max-height: 80px;
    max-width: 160px;
    margin-left: 10%;
}
/*======================================================================

        INICIO DEL CONTENIDO GENERAL

======================================================================*/
.wrapper{
  width:100%;
  height: auto;
}
.title{
	margin:8px 0 8px 0;
	visibility: hidden;
	position: absolute;
}
.no-hide{
	visibility: visible;
	position: inherit;
	text-align: left;
}

.middle p{
	margin-bottom: 20px;
}
/*=======================================================

IMAGENES DE LA SECCION DE OBRAS: DONE

========================================================*/
.image{
  background: linear-gradient( rgba(31, 31, 31, .3), rgba(31, 31, 31, .3)), url("../Images/energia-min.jpeg");
  background-position: center;
  background-size: cover;
  height: 100vH;
  width: 100%;
  display: table;
}
	
	.array2{
		width: 33.33%;
		height: 100%;
		float: left;
		position: absolute;
		visibility: hidden;
	}
	.array3{
		width: 33.33%;
		height: 100%;
		float: left;
		position: absolute;
		visibility: hidden;
	}
/*=======================================================

IMAGENES DE LA SECCION DE MANO DE OBRA: DONE

========================================================*/
.image-1{
  background: linear-gradient( rgba(31, 31, 31, .3), rgba(31, 31, 31, .3)), url("../Images/estructura_servicios_mano_obra.jpg");
  background-position: center;
  background-size: cover;
  height: 100vH;
  width: 100%;
  display: table;
}

/*=======================================================

IMAGENES DE LA SECCION DE PERITAJE: DONE

========================================================*/
.image-3{
  background: linear-gradient( rgba(31, 31, 31, .3), rgba(31, 31, 31, .3)), url("../Images/ingenieria.jpg");
  background-position: center;
  background-size: cover;
  height: 100vH;
  width: 100%;
  display: table;
}
/*=======================================================

IMAGENES DE LA SECCION DE ESTRUCTURA: DONE

========================================================*/
.image-4{
  	background: linear-gradient( rgba(31, 31, 31, .3), rgba(31, 31, 31, .3)), 	url("../Images/estructura_servicios.jpg");
	background-position: center;
	background-size: cover;
	height: 100vH;
	width: 100%;
 	display: table;
}
/*=======================================================

IMAGENES DE LA SECCION DE INGENIERIA: DONE

========================================================*/
.image-5{
  	background: linear-gradient( rgba(31, 31, 31, .3), rgba(31, 31, 31, .3)), 	url("../Images/Ingenieria_servicio.jpeg");
	background-position: center;
	background-size: cover;
	height: 100vH;
	width: 100%;
 	display: table;
}
/*=======================================================================================================
=======================================================================================================*/

.text-over-image{
  display: table-cell;
  vertical-align: middle;
  padding: 0 0 0 5%;
  font-size: 3em;
  font-family: RaleWay, sans-serif;
  color: #FAFAFA;
  text-shadow: 3px 3px 2px #222;
  line-height: 1em;
}
.wrapper{
  width: 100%;
}
.content{
  padding: 15px 15px;
  text-align: justify;
  font-family: QuickSand, serif;
  height: auto;
  background-color: #FDFDFD;
}
@media screen and (min-width: 750px){
	.image/*OBRAS*/{
		height: 100%;
		widows: 32.33%;
  		display: table;
  	}
	.text-over-image{
 		visibility: hidden;
	}
	.image-array{
		height: 40vH;
		width: 100%;
		float: left;
		overflow: hidden;
		display: inline-block;
	}
	.array1{
		width: 33.5%;
		height: 100%;
		cursor: pointer;
		float: left;
		background-image: url("../Images/instalaciones_industriales.jpeg");
		background-position: right;
  		background-size: cover;
	}
	.array2{
		width: 33.33%;
		height: 100%;
		float: left;
		position: inherit;
		visibility: visible;
		background-image: url("../Images/Energia_residencial.jpeg");
		background-position: right;
  		background-size: cover;
	}
	.array3{
		width: 33.33%;
		height: 100%;
		float: left;
		position: inherit;
		visibility: visible;
		background-image: url("../Images/Energia_comercial.jpeg");
		background-position: right;
  		background-size: cover;
	}
	.image-1,/*MANO DE OBRA*/{
    	height: 43vH;
  	}
  	.image-3{/*OBRAS*/
		height: 43vH;
  	}
  	.image-4{
		height: 43vH;
  	}
  	.image-5{
		height: 43vH;
	}
  	.content{
		height: auto;
		font-size: 1.2em;
  	}
	.wrapper{
		padding: 83px 0 0 0;
	}
	.title{
		visibility: visible;
		position: inherit;
	}
	.no-hide{
	visibility: visible;
	position: inherit;
	text-align: left;
}
}
@media screen and (min-width: 1180px){
	.image-array{
		height: 100%;
		width: 50%;
		float: left;
		overflow: hidden;
	}
	.image{
		height: 33.7%;
	}
	.array1{
		height: 33.33% !important;
		cursor: pointer;
		width: 100%;
	}
	.array2{
		height: 33.33% !important;
		width: 100%;
		position: inherit;
		visibility: visible;
	}
	.array3{
		height: 33.33% !important;
		width: 100%;
		position: inherit;
		visibility: visible;
	}
  	.image-1/*MANO DE OBRA*/{
		height: 100%;
    	max-width: 50%;
    	float: left;
  	}
	.image-3/*PERITAJE REAL ONE*/{
		height: 100%;
    	max-width: 50%;
    	float: left;
  	}
  	.image-4{
		height: 100%;
    	max-width: 50%;
    	float: left;
  	}
  	.image-5{
		height: 100%;
    	max-width: 50%;
    	float: left;
	}
	.wrapper{
		margin: 0;
		height: 100vH;
		overflow-y: scroll;
	}
  	.content{
    	min-height: 100%;
    	width: 50%;
    	float: right;
    	display: table;
		font-size: 1em;
		line-height: 1.4em;
  	}
	.middle{
    	display: table-cell;
		vertical-align: middle;
    	padding: 10px 20px;
    	max-height: 100%;
    	width: 50%;
  	}
	.middle p{
		margin-bottom: 3%;
	}
	.text-over-image{
		visibility: hidden;
	}
	.title{
		visibility: visible;
		position: inherit;
		margin-top: -1px;
		font-size: 1.9em;
	}
	.less{
		font-size: 1.6em;
	}
}
@media screen and (min-height: 680px){
	.content h2{
		margin: 15px 0 14px 0;
	}
}
/*======================================================================

        INICIO DEL FOOTER

======================================================================*/
footer {
    padding:3% 3% 0 3%;
	margin: 19px 0 0 0;
    background-color: #333333;
    padding-bottom: 20px;
}
#title-footer {
    width: 100%;
}
#title-footer a {
    text-decoration: none;
    color: #DADADA;
    font-size: 25px;
    transition-duration: .5s;
}
#title-footer a:hover {
    color: #d6d6d6;
}
#bottom-hr {
    width: 100%;
	padding: 0;
	margin: 2% 0;
}
#social-icons{
	width: 100%;
	text-align: right;
	display: block;
}

#social-icons ul{
	width: 100%;
}

#social-icons ul li{
	width: 23px;
	height: 23px;
	display: inline-block;
	margin: 0 2%;
}

#social-icons ul li img{
	width: 100%;
	height: 100%;
}
#palabras-clave{
	color: transparent;
	position: relative;
	background-color: transparent;
	line-height: .1;
}