body{
    font-family: montserrat;
}

/*MENU*/

.menu{
    width: 25%; 
    position: fixed;
    top: 0;
    height: 100%;
    padding-left: 3%;
    float: left;
    
}
hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 0;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
    width: 70%;
}

.logo-menu{
    width: 60%;
    display: block;
    margin: 25% 0;
    padding: 0 4%;
}
ul {
  list-style-type: none;
    padding: 0;
}

.items-menu{
    color: #8b8d90;
    text-decoration: none;
    padding: 3% 0;
    position: relative;
    float: left;
}
.items-menu:hover{
    color: #f0b71b;   
}
.redes{
    margin-top: 30%;
}
.logos-rs{
    width: 7%;
    position: relative;
    float: left;
    margin-left: 1%;
}
.buscanos{ 
    color: #8b8d90;
    font-size: 0.8em;
    position: relative;
    float: left;

}

/*HOME*/
.cuadricula{
    position: relative;
    float: right;
    width: 70%;
}
.square-box{
    position: relative;
    width: 20%;
    overflow: hidden;
    float: left;
}
.modulo2{
    position: relative;
    width: 40%;
    overflow: hidden;
    float: left;
}
.modulo2:before{
  content: "";
    display: block;
    padding-top: 50%;
}

.modulo3{
    position: relative;
    width: 40%;
    overflow: hidden;
    float: left;
}
.modulo3:before{
  content: "";
    display: block;
    padding-top: 99%;
}

.modulo4{
    position: relative;
    width:60%;
    overflow: hidden;
    float: left;
}
.modulo4:before{
  content: "";
    display: block;
    padding-top: 66.7%;
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}
.square-content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
}
.square-content div {
   display: table;
   width: 100%;
   height: 100%;
}
.square-content span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: white
}
#celeste{
    background: #21aee4;   
}
#amarillo{
    background: #f8bf1c;   
}
#naranja{
    background: #f26322;   
}
#turquesa{
    background: #4fbfa5;   
}
#rosa{
    background: #e71857;   
}
.logo{
    margin: 30% 0;
}
.doble-cuadrado{
    position: relative;
    float: left;
    width: 40%;   
}
.square-box2{
    position: relative;
    width: 50%;
    overflow: hidden;
    float: left;
}
.square-box2:before{
  content: "";
    display: block;
    padding-top: 100%;
}
.modulo5{
    position: relative;
    width: 100%;
    overflow: hidden;
    float: left;
}
.modulo5:before{
  content: "";
    display: block;
    padding-top: 50%;
}

.barra{
    display: none;
}
     .cuadricula-resp{
    display: none;
    
}
/*----------COLOR PAGINA SELCCIONADA-----------
#nav a:link, a:visited {
    text-align: center;
    padding: 8px;
}
#nav a:hover {
    display: block;
    color: #f8bf1c;
}
#nav a.selected:link, a.selected:active{
    display: block;
    background-color: aqua;
    color: #fff;
}

#nav a.selected:hover, a.selected:active {
    display: block;
    color: #8b8d90;
}*/


#nav a:link,
a:visited {
  color: #8b8d90;
}
#nav a:hover,
a:active {
  display: block;
  color: #f8bf1c;
}
#nav a.selected, #nav a.selected:link,
a.selected:active {
  display: block;
  color: #f8bf1c;
}
#nav a.selected:hover,
a.selected:active {
  display: block;
  color: #8b8d90;
}
#menu{
 z-index: 999999999999;   
}


/*-----------------NOSOTROS-------------------*/

.main{
    position: relative;
    float: right;
    width: 70%;
    height: 100%;
}
.img-nosotros{
    width: 40%;
    position: absolute;
}
.quehacemos{
 position: absolute;
    z-index: 999;
    width: 40%;
    padding: 10%;
    border:8px solid #f8bf1c;
     margin: 8% 34%;

}
.quehacemos p{
color: #8b8d90;
    line-height: 30px;
}
h1{
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 5px;
    margin: 8% 0;
}   
h2{
    text-transform: uppercase;
    font-weight: 100;
    font-size: 1.3em;
    color: #8b8d90;

}   

.boton1{
    border:2px solid #21aee4;
    position: absolute;
    z-index: 9999999;
    background-color: white;
    text-transform: uppercase;
    font-family: montserrat;
    color: #21aee4;
    padding: 10px;
    cursor:pointer;

}   
.flecha-btn{
    width: 10%;
    margin: 1px;
    
}   

.titular{
    height: 50px;
    width: 100%;
    background-color: #21aee4;
    position: relative;
    float: left;
    margin-top: 75%;
    margin-bottom: 1%;
} 

.titular p{
    text-transform: uppercase;
    color: white;
    margin: 1% 2%;
    font-size: 1.5em;
    
} 

.titular2{
    height: 50px;
    width: 100%;
    background-color: #21aee4;
    position: relative;
    float: left;
    margin-top: 5%;
    margin-bottom: 1%;
} 

.titular2 p{
    text-transform: uppercase;
    color: white;
    margin: 1% 2%;
    font-size: 1.5em;
    
} 
.btn{
    position: relative;
    float: left;
}

/*CLIENTES*/
.img-clientes{
    width: 100%;
    position: relative;
    float: right;
}

.img-clientes img{
    width: 16%;
    }
    

.txt{
    font-size: 0.8em;
}
/*Servicios*/
.video-container{
    width: 100%;
    position: relative;
    background-color: white;
    float: left;
    padding-bottom: 56.25%;
    height: auto;
    
}
.video-container iframe{
    position: absolute;
    height: 100%;
    width: 100%;
}

.video-container2{
    width: 100%;
    position: relative;
    float: left;
    padding-bottom: 56.25%;
    height: auto;
    
}
.video-container2 iframe{
    position: absolute;
    height: 100%;
    width: 100%;
}


/*TRABAJOS*/
.trabajos-responsive{
    display: none;   
}

.trabajos .square-content_hover{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
}

.trabajos .square-content_hover div {
   display: table;
   width: 100%;
   height: 100%;
    margin: 1%;
    
}
.trabajos .square-content_hover span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    padding: 10px;
    font-family: montserrat;
    color: white;
    
}
.trabajos .square-box:hover>.square-content{
    display: none;
}
.trabajos .square-box:hover>.square-content_hover{
    display: block;
}
.trabajos .square-box:hover{
    background: #21aee4;
}

.trabajos .square-box2:hover>.square-content{
    display: none;
}
.trabajos .square-box2:hover>.square-content_hover{
    display: block;
}
.trabajos .square-box2:hover{
    background: #e71857;
}

.trabajos .modulo5:hover>.square-content{
    display: none;
}
.trabajos .modulo5:hover>.square-content_hover{
    display: block;
}
.trabajos .modulo5:hover{
    background: #f8bf1c;
}
.trabajos .modulo2:hover>.square-content{
    display: none;
}
.trabajos .modulo2:hover>.square-content_hover{
    display: block;
}
.trabajos .modulo2:hover{
    background: #f8bf1c;
}


/*------------------CONTACTO-------------------*/

.main-contacto{
    position: relative;
    float: right;
    width: 70%;
    background-color: #8b8d90;
    
}

.cont-formulario{
    width: 40%;
    background-color: white;
    min-height: 200px;
    position: relative;
    float: left;
    margin: 7% 8%;
    padding: 5% 25% 8% 5%;
    font-family: Montserrat;
}


h3{
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 3px;
    font-size: 1.8em;
    margin: 8% 0;

}
#contact-area {
	width: 100%;
	margin-top: 25px;
    font-family: Montserrat;
    font-size: 14px;
}

#contact-area input, #contact-area textarea {
	padding: 5px;
	width: 100%;
	font-family: Montserrat;
	margin: 0px 0px 10px 0px;
	border: 1px solid #ccc;
}

#contact-area textarea {
	height: 90px;
}

#contact-area textarea:focus, #contact-area input:focus {
	border:2px solid #21aee4;
}

#contact-area input.submit-button {
	float: right;
    border:2px solid #21aee4;
    width: 40%;
}
.submit-button{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2c9da5+0,2c9da5+0,cb6430+61,cb6430+95 */
background: white; /* Old browsers */


    border:5px solid #21aee4;
    box-shadow:none;
    margin-top: 10px;
    font-family: montserrat;
    color: #21aee4;
    letter-spacing: 2px;
    
}
label {
	float: left;
	text-align: right;
	width: 100%;
	padding-top: 5px;
	font-size: 1.4em;
}
.img_contacto{
    width: 100%;
    top:0;
    background-image: url(img/img-contacto.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    height: 360px;
}
::-webkit-input-placeholder {
   font-family: montserrat;
    font-size: 14px;
    padding: 5px 5px;
}

:-moz-placeholder { /* Firefox 18- */
   font-family: montserrat;
    font-size: 14px;
    padding: 5px 5px;
}

::-moz-placeholder {  /* Firefox 19+ */
   font-family: montserrat; 
    font-size: 14px;
    padding: 5px 5px;
}

:-ms-input-placeholder {  
   font-family: montserrat;
    font-size: 14px;
    padding: 5px 5px;
}
.formulario_contacto{
width: 40%;
    position: relative;
    float: right;
    padding: 2%;
    
}
.texto{
    font-family: arial;
    font-size: 13px;
}
.texto-italic{
    font-family: arial;
    font-size: 13px;
    font-style: italic;
}
.titulos_izq{
    font-family: moon_bold;
    color: #009fa7;
    text-align: left;
    font-size: 16px;
    text-decoration: none;
    margin: 0 auto;
    display: block;
    padding: 15px 0 5px 0;
}

.txt_ico_contacto{
    font-family: moon_light;
    font-size: 14px;
    color: #009fa7;
    position: relative;
    float: left;
    padding: 0 7px;
}
.ico_contacto{
    position: relative;
    float: left;
    padding: 6px 0 0 0;
}


.datos-contacto{
    background-color: #f8bf1c;
    width: 40%;
    height: auto;
    position: absolute;
    padding: 2%;
    margin: 16% 20% 0% 60%; 
    
}

.datos-contacto2{
    background-color: #f8bf1c;
    width: 25%;
    height: auto;
    position: absolute;
    padding: 2%;
    margin: 10% 00% 0% 0%; 
    right: 0;
    
}
.cont-contacto{
    margin: 21% 13%;
}
h4{
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 3px;
    font-size: 1.6em;
    margin: 0;
    color: white;

}

.txt-blanco{
    color: white;
    font-size: 0.7em;
    font-family: montserrat;
}
.items-contacto{
    width: 80%;
    margin: 20% 0 00% 0;
}

.items-contacto img{
    width: 17%;
    position: relative;
    float: left;
}
.texto-items{
    color: white;
    position: relative;
    float: right;
    font-size: 0.9em;
    width: 80%;
    margin: 1% 0;
}
.texto-items2{
    color: white;
    position: relative;
    float: right;
    font-size: 0.9em;
    width: 80%;
    margin: 3% 0;
}

/*-----------------RESPONSIVE------------------*/
@media only screen and (max-width: 1417px){
    
    .quehacemos p{
     font-size: 80%; 
        line-height: 25px;
    }
    .boton1{
        padding: 5px;
    }
}
@media only screen and (max-width: 1290px){
    .quehacemos p{
     line-height: 20px;   
    }
    .boton1{
        padding: 5px;
        
    }
}

@media only screen and (max-width: 1245px){
    .quehacemos{
     padding: 6% 10% 10% 10%;
    }
}

@media only screen and (max-width: 1130px){
    .quehacemos{
     padding: 6% 10% 10% 10%;
    }
    .quehacemos p{
     font-size: 75%;   
    }
}

@media only screen and (max-width: 1090px){
    body{
     font-size: 80%;   
    }
    .quehacemos p{
     line-height: 15px;   
    }
    .boton1{
        padding: 5px;   
    }
}
@media only screen and (max-width: 940px){
    body{
     font-size: 80%;   
    }
}

@media only screen and (max-width: 900px){
    .menu{
        display: none;
    }
#nav a:link,
a:visited {
  color: #fff;
}
    .main{
     width: 100%;   
    }
    .barra{
    width: 100%;
    background-color: #21aee4;
    display: block;
    overflow: hidden;
}
    .barra:before{
        content: "";
        display: block;
        padding-top: 0%
    }
    .logo-menu-responsive{
    position: relative;
    float: left;
    width: 18%;
    margin: 2%;
}   
    .barras-menu-responsive{
    position: relative;
    float: right;
    width: 5%;
    margin: 2%;
}
    .cuadricula{
        width: 100%;
        margin-top: 60px;
    }
.main-contacto{
    
width: 100%;

}

@media only screen and (max-width: 900px){
 .cuadricula{
 font-size: 100%;
 
 }

}
@media only screen and (max-width: 625px){
 .cuadricula{
 font-size: 90%;
 
 }
    
h1{
 margin: 5% 0;   
}
.img-nosotros{
    
    display: none;
}
.quehacemos{
      width: 92%;
    margin: 8% 0 0 0;
    padding: 2%;
    border: none;
}
.quehacemos p{
 
    font-size: 100%;
    line-height: 25px;
}
.boton1{
    margin: 3% 0;
}
.datos-contacto{
 display: none;   
}
.cont-formulario{
    width: 100%;
    background-color: white;
    min-height: 200px;
    position: relative;
    float: left;
    margin: 15% 10% 5% 0;
    padding: 5%;
    font-family: Montserrat;
    

}
    #contact-area{
        
        width: 80%;
    }
@media only screen and (max-width: 530px){
 .quehacemos p{
    font-size: 90%;
     line-height: 15px;
 }
    
}
@media only screen and (max-width: 500px){
    .trabajos .doble-cuadrado{
     display: none;   
    }
    .trabajos .ocultar{
        display: none;
    }
    .trabajos .modulo4{
        width: 100%;
    }
    .trabajos-responsive{
        display: block;
    }
    
    .quehacemos p{
    font-size: 90%;
     line-height: 25px;
 }
    .titular{
    
    margin-top: 100%;
        
    }
    
    .titular p{
    
    margin: 2% 2%;
        
    }
      .titular2 p{
    
    margin: 2% 2%;
        
    }
    .cuadricula{
    display: none;
}
    #cuadrado-oculto{
        display: none;
    }
    .equipo .square-box{
    width: 50%;   
    }
    .cuadricula-resp{
    display: block;
    padding-top: 60px;
        
}

    .square-box{
    position: relative;
    width: 33%;
    overflow: hidden;
    float: left;
}
.modulo2{
    position: relative;
    width: 66%;
    overflow: hidden;
    float: left;
}
.modulo2:before{
  content: "";
    display: block;
    padding-top: 50%;
}

.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}
 body{
    font-size: 100%;    
}
        .modulo3{
    position: relative;
    width: 66%;
    overflow: hidden;
    float: left;
}
.modulo3:before{
  content: "";
    display: block;
    padding-top: 99%;
}

}
@media only screen and (max-width: 450px) {
    body{
    font-size: 80%;
    }

}
    
@media only screen and (max-width: 410px) {
  .quehacemos{
    margin: 13% 0 0 0;
    }
    .titular{
        margin-top: 120%;
    }
    h1{
        letter-spacing: 2px;
    }

}

@media only screen and (max-width: 370px) {
    body{
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 70%;
    }

}
@media only screen and (max-width: 360px) {
    .titular{
        margin-top: 130%;
    }
    .quehacemos p{
        line-height: 25px;
        font-size: 110%;
    }

}
    
    @media only screen and (max-width: 340px) {
    .titular{
        margin-top: 160%;
    }

}
@media only screen and (max-width: 300px) {
    body{
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 55%;
    }
     .quehacemos p{
        line-height: 25px;
        font-size: 150%;
    }
     .titular{
        margin-top: 170%;
    }
    .quehacemos{
     margin: 20% 0 0 0;   
    }

}