@import url(contacto.css);
@import url(servicios.css);
@import url(nosotros.css);
@import url(portafolio.css);
@import url(trabajo.css);

h1,h2,h3,h7,h8{
font-family: 'Libre Franklin', sans-serif;
letter-spacing: 1.5px;   
}
p{font-family: 'Libre Franklin', sans-serif;
letter-spacing: 1.5px;	
}
a{font-family:  'Libre Franklin', sans-serif;
letter-spacing: 1px;	
}
img{
display: block;
max-width: 100%;
}
*{
 margin: 0;
 padding:0;
 box-sizing:border-box;
}
body{
font-family: sans-serif; 
}
header{
position:absolute;
width: 100%;	
z-index:1000;	
height: 100px;
background: rgba(0,0,0,0.1);
}
header .nombre{
display: block;  
margin-top: 20px;
font-size: 18px;
color: white;
}
header .contenedor{
display:  flex;
justify-content: space-between;
}
.img_logosbg,.icon-menu{
margin: 20px;
}
.icon-menu{
display: block;
width: 40px;
height: 35px;
font-size: 25px;
background: #378bba;
color: white; 
text-align: center;
line-height: 35px;
border-radius: 5px; 
margin-left:auto;  
cursor: pointer;
}
.contenedor{
width: 98%;
margin: auto;
}
.contenedor_nosotros{
width: 98%;
margin: auto;    
}
section{
width: 100%;
}

/*------- M E N U ------*/
header nav{
position: absolute;
top:57px;
left:-100%;
width: 100%;  
transition: 2s all;	
}
header .menu{
list-style: none;
padding: 0;
margin: 0;    
}
header .menu__link{
display: block;
text-decoration: none;
padding: 15px;    
color: white;  
background:#378bba;  
border: 1px solid skyblue;    
}
.menu__link:hover{
background:white;
color: #378bba;     
}
header .select{
color: #378bba;
background: white;	
}
.mostrar{
left: 0;
}

/*------------- S L I D E R -----*/
.centrar{
position: absolute;
top:50%;
left:50%;
transform: translateX(-50%) translateY(-50%);
background: rgba(0,0,0,0.2);	
width:60%;
padding: 15px;	
border-radius: 10px;
}
.slider1_titulo{
font-size: 17px;
text-align: center;
color:#F7DC6F;  
margin-bottom: 5px;	
}
.slider1_txt{
text-align: center;	
color:#F7DC6F; 
padding: 5px;
margin-bottom: 5px;	
}
.centrar{
text-align: center;	
}
.slider2_txt{
display: inline-block;
color: #F7DC6F;
padding: 5px;
margin-bottom: 10px;
margin-left: 10px;	
}
.icon-phone{
display:inline-block;	
color:#F7DC6F;
font-size: 30px;
text-align: center;	
}
.centrar a{
display: block;	
text-align: center;	
text-decoration: none;
color: white;
padding:10px;
width: 60%;
margin: auto;	
background:rgba(0,0,0,0.4);
border-radius: 5px;	
}
.centrar a:hover{
background:rgba(55,139,186,.9);
transition: 1s all;	
}



/*---- I N T R O D U C C I O N ---*/

#aisi_1{
margin-top: -125px;
padding-bottom: 30px;
}
.aisi_titulop{
display: block;	
color:#F7DC6F;	
text-align: center;
padding-top: 15px;	
}

.aisi_txtp{
color:gray;	
text-align:justify;
margin-top: 15px;
margin-bottom:20px;
}
/*------- S E R V I C I O S----------*/
.aisi_titulo{
display: block;	
color:black;
background:#F7DC6F;    
text-align: center;
padding-top: 10px;
padding-bottom:10px;    
}
.aisi_servicios{
color:#F7DC6F;	
text-align: center;
padding-top: 5px;
margin-bottom: 30px;    
}	
.img_obra{	
width: 350px;
height: 250px;	
margin: auto;
padding: 15px;
}
.aisi_txt{
color:white;	
text-align: justify;
margin:12px;
}
.info_aisi{
margin-bottom: 20px;
background: black;    
}

/*--- N O S O T R O S -----*/
#nosotros{
background:#F8F9F9;
margin-bottom: 10px;    
}

.about_titulo{
display: block;	
font-size: 25px;
color:#F7DC6F;	
text-align: center;
padding-top: 20px;    
}
.about_txt{
color:gray;
font-size: 15px;    
text-align:justify;
margin-top: 15px;
margin-bottom:20px;   
font-weight: lighter;
}

.mision_titulo{
display: block;	
font-size: 22px;
color:#F7DC6F;	
text-align: center;
}
.mision_txt{
color:gray;
font-size: 15px;    
text-align:justify;
margin-top: 15px;
margin-bottom:20px;   
font-weight: lighter;
}


.img_nosotros{
height: 200px;    
}

/*------ P O R T A F O L I O  ------*/
#aisi_3{
margin-bottom: 25px;	
}


#aisi_3 img{
display: block;
width: 350px;
margin: auto;	
padding: 0;	
}

.portafolio_titulop{
display: block;	
color:#F7DC6F;	
text-align: center;
padding-top: 25px;	
margin-bottom: 35px;
}


.aisi_txtp{
color:gray;	
text-align:justify;
margin-top: 15px;
margin-bottom:20px;
}


.info_portafolio{

}


.content-img{
width: 100%;
height: 250px;
margin: auto;	
position: relative;
cursor: pointer;
overflow: hidden;	
}
.content-img img{
width: 100%;
transition: 1.3s all;	
}

.content-img:hover img{
transform: scale(1.5);
transition: 1.3s all;	
box-shadow: -2px -1px 4px 5px lightgray;
color: gray;	
	
}

.content-1{
width: 100%;
height: 250px;
background:rgba(0,0,0,0.4);	
display: block;
position: absolute;
top: 0;	
margin-left:-800px;	
}

.content-img:hover .content-1{
margin-left: 0px;	
}

.content_txt{
position: absolute;
width: 100%;
height: 250px;	
top: 0;
z-index: 1;	
}

.content_txt h2{
transform: scale(0.2);
transition: 1.3s all;	
}

.titulo{
margin-top:55px;	
margin-left: 20px;	
font-size: 14px;    
color:#F7DC6F;	
opacity: 0;	
}

.icon-thumbs-up{
font-size: 14x;	
text-align: right;
margin-right: 15px;	
margin-top: 15px;
opacity:0;
color:#F7DC6F;
transform: scale(0.2);
transition: 1.3s all;		
}
.content-img:hover .titulo{
opacity: 1;	
transition: 1.3s all;
transform: scale(1);
}
.content-img:hover .icon-thumbs-up{
opacity: .5;	
transition: 1.3s all;
transform: scale(1);	
}
.info_renta{
margin-bottom: 20px;	
}


/*--------- C O N T A C T O -------*/
#contacto{
background-image: url(../img/yellow_dudes.jpg);
background-size: 100% 100%;
margin-top: 50px;
margin-bottom: 50px; 
padding-bottom: 50px;    
}	

.contacto_titulop{
display: block;    
text-align: center;	
font-size: 40px;
padding-top: 40px;	
margin-bottom: 50px;
letter-spacing:3px;	
}
.img_contacto{
width: 100%;	
height: 950px;	
}

.contacto_titulo{
display: block;	
color:black;
text-align: center;	
margin-bottom: 20px;
letter-spacing:3px;	
}


#contacto p{	
width: 180px;
font-size: 13px;	
color: black;
margin-bottom:1px;	
}
.contacto_titulo2{
display: block;
width: 300px;	
}
	
.contacto_txtb{
display: block;
width: 110px;
font-size: 12px;	
}
form{
width:290px;
height: 350px;
box-sizing: border-box;   
}


input,textarea{
width: 100%;
margin-bottom: 10px; 
padding:7px;
box-sizing: border-box;
font-size: 14px;    
border: none;
border-radius: 5px;
}

textarea{
min-height: 50px;  
max-height: 100px;
max-width: 100%;    
}

#boton{
color: white;
background: rgba(55,139,186,.2);
padding: 10px;
margin-top: 5px;	
font-size: 14px;  
border-radius: 5px;	
transition: 1s all;			
}



#boton:hover{
cursor: pointer;
background: #F7DC6F;
color: black;	
transition: 1s all;		
}

.info_contacto{
width: 10%;	
}

.w50{
width: 48%;	
}

.w100{
width: 98%;	
}
iframe{
border-radius: 20px;
border: 5px solid #F7DC6F;
}

/*--------------- F O O T E R --------*/


#footer{
background-image: url(../img/footer_bg.png);
background-size: cover;	
padding-top: 30px;        
}

.navegacion{
display: block;
margin-bottom: 20px;
color: #F7DC6F;
letter-spacing: 1.5px;	
}
.navegacion_txt{
color: white;
letter-spacing: -1px;		
}
.menu_footer{
display: inline-grid;    
}
.menu_footer a{
text-decoration: none;
margin-bottom: 12px;
font-size: 13px;   
color: white;
letter-spacing: 1.5px;		
}
.sociales {
font-size: 24px;
display: block;
}
.sociales a{
color: white; 
text-decoration: none;    
}
.sucursales {
display: block;    
width: 100%;
margin: auto;    
color: white;
}


.regalo{
color: white;
font-size: 90px;    
}



#sect_footer img{
width: 100%;;
max-width: 160px;
}


#sect_footer iframe {
width: 320px;
max-width: 680px;    
}


.imglogozap_footer{
display: inline-block;
width: 70px;
}

footer span{
color: white;
}


#sect_footer .contenedor{
display: flex;
justify-content:space-around;
flex-wrap: wrap; 
}
#info_footer{
padding-bottom: 20px;	
 }

.email_i{
color: white;
margin-bottom: 10px;
}
.email_l{
color: white;
}
.autor_linea{
width: 80%;
height: 1px;
margin: auto;	
background: white;	
}
	
.autor{
color: white;
text-align: center;
font-size: 11px;	
padding-top: 5px;
padding-bottom: 5px;
font-family: 'Libre Franklin', sans-serif;	
}

/*** E S T I L O S  T A B L E T -----*/

@media(min-width:768px){
.contenedor{
width: 768px;		
}	

.centrar{
width:50%;
padding: 30px;	
}	
	

.slider1_titulo{
font-size: 22px;
}
.slider1_txt{
font-size: 19px;
}		
.centrar a{
width: 20%;
margin: auto;	
border-radius: 5px;	
}
.info_aisi{
width: 32%;
}
/*---- I N T R O D U C C I O N -----*/    
.aisi_titulop{
margin-top: 50px;	
font-size: 40px;        
}
    
 /*----------- S E R V I C I O S  ---------*/   
 .aisi_servicios{
font-size: 38px;    
}	   
#aisi_2{
display: flex;	
justify-content: space-between;	
flex-wrap: wrap;
margin-bottom: 90px;    
}
   
	
	
	
/*------- N O S O T R O S   ---------*/

   
.about_titulo{
text-align:center;
padding-left: 100px;    
font-size: 40px;        
}    
.about_txt{
margin-left: 120px;    
text-align: justify;        
}   
    
   
.mision_titulo{
text-align:center;
padding-left: 100px;    
margin-top: 30px;
font-size: 30px;        
}    
.mision_txt{
margin-left: 120px;    
text-align: justify;        
}       
    
#nosotros{
display: flex;
justify-content: space-between;    
    }    
.img_nosotros{
width: 100%;
height: 100%;    
}
    
.info_nosotros{
width: 45%;
}    
    
.contenedor_nosotros{
width: 100%;
    }   
	
#aisi_3{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}	
#aisi_3 img{
margin: 0;
padding: 0;	
}

/* --------- P O R T A F O L I O ----------- */
.portafolio_titulop{
font-size: 38px;
}	
	
/*---------- C O N T A C T O ---------*/
#contacto{
background-image: url(../img/yellow_dudes.jpg);
background-size: 100% 100%;
margin-top: 50px;
margin-bottom: 50px; 
padding-bottom: 50px;    
}	

.contacto_titulop{
display: block;    
text-align: center;	
font-size: 40px;
padding-top: 40px;	
margin-bottom: 50px;
letter-spacing:3px;	
}
  
.contacto{
margin: auto;        
}
    
 
#contacto p{	
text-align: left;    
}   
#contacto .contenedor {
display: flex;
justify-content: space-between;
width: 95%; 
}
    
.info_contacto{
width: 30%;  
text-align: center;
}

 
.contacto_titulo2{
display: block;
width: 100%;	
font-size: 25px;
margin-bottom: 15px;
}
.contacto_txtb{
display: block;
width: 100%;	
font-size:20px;
font-weight: lighter;
}   
iframe{
width: 400px;
height: 340px;	
border-radius: 20px;
border: 5px solid  black;
}   
    /* 
#contacto2 .contenedor{
position: absolute;	
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 90%;	
}

.img_contacto{
width: 100%;	
height: 600px;	
background: pink;    
}	

 
    } */   
/*------------ F O O T E R  ---------*/	


#footer .contenedor{
display: flex;
justify-content: space-between;	
}
}

/*--------E S T I L O S  P C -------*/



@media(min-width:1024px){
.contenedor{
width:1050px;		
}	
/*----- M E N U -----*/
.icon-menu{
display: none;
}
	
header .nombre{
display: block;	
color: white;
width: 350px;
height: 50px;	
font-size: 23px;
margin-top: 30px;
text-align: center;    
}	
.menu{
display: flex;		
}
.nav{
position: static;
width: auto;	
padding-top: 30px;
}	
header .menu__link{
background: none;	
border: 0;	
font-size: 15px;
padding: 8px;    
}
header .select{
border-bottom: 3px solid #378bba; 	
color: white;	
}
.menu__link:hover{
background: none;	
border-bottom: 3px solid #378bba; 	
color: white;	
}
/*----- SLIDER -----*/	
.centrar{
width: 950px;		
}
.slider1_titulo{
font-size: 32px;
}
.slider1_txt{
font-size: 26px;
}
.slider2_txt{
font-size: 24px;
}	
	
.centrar a{
width: 160px;	
font-size: 18px;
margin-top: 15px;	
}
#main_web{
background:#F8F9F9;  
margin-top: -145px;
padding-bottom: 80px;	
}
#main_hosting{
margin-top:  -10px;	
padding-bottom: 80px;	
}
.main_titulo{
font-size: 38px;	
padding-top: 65px;	
}
.main_txt{
font-size: 21px;
}
}