@import url(normalize.css);
@import url('https://fonts.googleapis.com/css?family=Lato');
@import url(fontello.css);
@import url(sweetalert2.min.css);
@import url(font-awesome.css);
@import url(menu.css);


:root{
    /*Colores Fondos*/
    --FondoBlanco: #ffffff;
    --fondoAmarillo: #ffcc00;
    --FondoNegro: #020202;
    --FondoBotonMasInformacion: #333333;
    /*Colores Letras*/
    --ColorAmarillo: #ff2e00;
    --Titulos: #ffffff;
    /*Fuente Letras*/
    --fuenteprincipal: 'Lato', sans-serif;


}
/**Globales**/
html {
  box-sizing: border-box;
  font-size: 62.5%;
}
*, *:before, *:after {
  box-sizing: inherit;
}
header{
position: relative;
background-color: var(--FondoNegro);
z-index: 100;
}
body{
font-family: var(--fuenteprincipal) ;
font-size: 1.6rem;
line-height: 1.5;
}  
p{
font-size: 2rem;
font-family: var(--fuenteprincipal);
color: var(--primarioazul);
}
a{
text-decoration: none;
}
img{
    max-width: 100%;
}
.contenedor{
max-width: 125rem;
margin: 0 auto;
position: relative;
}

h1, h2, h3, h4, h5, h6{
font-family: var(--fuenteprincipal) ;
}
h1{
font-size: 4rem ;
font-weight: bold ;
}
h2{
font-size: 3.2rem ;
}
h3{
font-size: 2.4rem ;
}
h4{
font-weight: 100 ;
font-size: 3rem ;
}

.centrar{
text-align: center;    
}
.izquierda{
text-align: left;
}


/*header*/
.header{
padding-top: 2rem;
padding-bottom: 2rem;
}

.header-logo{
display: flex;
justify-content: space-between;
align-items: center;
}
.header-redes-sociales{
display: none;
}

.fondo-amarillo{
border-radius: 20px;
padding: 0.9rem;
position: absolute;
right: 8rem;

background-color: var(--fondoAmarillo);  
}

/*Banner*/
.banner{
padding-bottom: 5rem;    
}
.slider {
	width: 100%;
	margin: auto;
	overflow: hidden;
}

.slider ul {
	display: flex;
	width: 400%;
	animation: cambio 20s infinite alternate linear;
}

.slider li {
	width: 100%;
	list-style: none;
}

.slider img {
	width: 100%;
}

@keyframes cambio {
	0% {margin-left: 0;}
	20% {margin-left: 0;}
	
	25% {margin-left: -100%;}
	45% {margin-left: -100%;}
	
	50% {margin-left: -200%;}
	70% {margin-left: -200%;}
	
	75% {margin-left: -300%;}
	100% {margin-left: -300%;}
}

/*Somos*/
.somos{
padding: 1rem;
padding-bottom: 5rem;
}

/*iconos*/
.iconos{
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;

}
.iconos-contenido{
position: relative;
}
    
.iconos-contenido-circulos{
position: relative;
background-color: var(--fondoAmarillo);
width: 300px;
height: 300px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
margin-bottom: 5rem;
}
.iconos-contenido-posicionar{
position: absolute;
top: 4rem;

}

.tamanoiconoimagen{
width: 40%;
}

.letreasblancas{
color: var(--FondoBlanco);
font-weight: bold;
font-size: 3rem;
}

/*Linea de Productos*/
.linea-productos{
padding: 1rem;
} 

.fondo-negro{
background-color: var(--FondoNegro);
}

.separacion{
padding: 5rem;
}

.negritas{
font-weight: bold;
font-size: 2.2rem;
}

.italicas{
font-weight: 100;
font-style: italic;
}

.texto-pequeno{
font-weight: 100;
font-size: 1.5rem;
}
.botoom{
 padding-bottom: 5rem; 
}


.linea-productos-fondo-amarillo{
background-image: url(../images/bkgamarillo.png);
background-size: 100% 100%;
background-position: bottom;
background-repeat: no-repeat;
color: var(--FondoNegro);
}

.boton-solicitar{
font-weight: bold;
background-color: var(--FondoNegro);
color: var(--Titulos);
padding: 1rem;
padding-left: 4.5rem;
padding-right: 4.5rem;
}

.boton-solicitar:hover{
cursor: pointer;
background-color: rgb(57, 57, 57);
transform:scale(1);
transition: all .4s ease;

}

/*Proyectos*/
.proyectos{
background-color: var(--FondoNegro);
color: var(--Titulos);
}

.proyectos-dos-columnas{
padding: 5rem;
}
.proyectos-dos-columnas-fondo{
background-image: url(../images/bkgamarillo.png);
background-size: 100% 100%;
background-position: bottom;
background-repeat: no-repeat;  
color: var(--FondoNegro);

}

.proyectos-texto{
padding-bottom: 5rem;
margin-top: 5rem;
}

/*Clientes*/

.clientes{
  background-image: url(../images/bkg_proyectos.png);
  background-size: 100% 100%;
  background-position: top;
  background-repeat: no-repeat;   
}

.clientes h2{
color: var(--FondoBlanco);
}
.separacion-clientes{
padding: 2rem;

}

.tamanoimagen{
width: 50%;
}

.fondo-clientes{
background-image: url(../images/bkgamarillotransparente.png);
background-size: 100% 100%;
background-position: top;
background-repeat: no-repeat;  
}
/* tamnaños*/

.diferentes-tamanos{
background-image: url(../images/bkgamarillo.png);
background-size: 100% 100%;
background-position: bottom;
background-repeat: no-repeat;  
}

.difentes-tamanos-titulo{
padding: 1rem;
}

.diferentes-tamanos-dos-columnas{
padding: 1rem; 
}

.imagen-separacion{
padding-right: 2rem;  
}

.separacion-abajo{
  padding-bottom:5rem;
  }

.centrar-tamanos{
text-align: center;
}
/*Estilos Formulario*/

.contacto{
background-color: var(--FondoNegro);
color: var(--Titulos);
}
.separacion-contenido a {
color: var(--fondoAmarillo);
}

.numeros-contacto {
border-top: 1px solid var(--fondoAmarillo)
}
  
.mismorenglon{
  display: flex;
  justify-content: center;
  } 
  
.amarillo{
color: var(--fondoAmarillo);
}
.numeros-contacto a{
  text-decoration: none; 
  color: var(--Titulos);
  }

.separacion-contenido h3{
    font-size: 4rem;
    } 
.mismorenglon b{
  font-size: 4rem;
}
form{
width: 100%;
box-sizing: border-box;
border-radius: 7px;
padding: 1rem;
}

select, input, textarea{
width: 100%;
margin-bottom: 15px;
padding: 7px;
box-sizing: border-box;
font-size: 15px;
font-family: var(--fuenteprincipal) ;
}
textarea{
min-height: 100px;
max-height: 200px;
max-width: 100%;
}
.boton{
font-size: 18px;
cursor: pointer;
width: 50%;
color: white;
border: white 1px solid;
background-color:transparent;
}
.boton:hover{
transform:scale(1);
transition: all .4s ease;
color: #ffffff;
background-color: rgb(57, 57, 57);
border: black 1px solid;
}
.contacto-gris{
color: rgb(152, 141, 141);
font-weight: bold;
}

.contacto-blanco{
color: var(--Titulos);
font-weight: bold;
}
.separacion-contenido 
{
padding: 1rem;  
}
.derecha{
text-align: center;  
}

.footer{
background-color: var(--fondoAmarillo);

}

.footer-contenido {
  padding: 3rem;

}

.footer-contenido p{
font-size: 1.5rem;

}
.btn-whatsapp {
  display:block;
  width:50px;
  height:50px;
  color:#fff;
  position: fixed;
  right:30px;
  bottom:100px;
  border-radius:50%;
  line-height:80px;
  text-align:center;
  z-index:100;
}


/************************************************************************************************************/
/*ESTILOS PAGINA RESULTADO*/



/************************************************************************************************************/
/*ESTILOS PAGINA DETALLE*/


/*******************************************************************************************************/
/*ESTILOS PAGINA SERVICIOS*/


    
@media (min-width: 768px){
/*Estilos Heeader*/



/*Estilos contacto*/
.contacto-contenido{
padding-top: 5rem;
padding-bottom: 5rem;
display: grid;
grid-template-columns: repeat(2, 1fr); 
column-gap: 10rem;

}

}



@media (min-width: 1024px){

/*Globales*/


/*Header*/
.header{
display: flex;
align-items: center;
justify-content: space-between;
}

.header-redes-sociales{
display: block;
}

/*Iconos*/
.iconos-contenido{
display: grid;
grid-template-columns: repeat(4, 1fr); 
column-gap: 2rem;
}

/*images empresas*/

.imagenes-empresa {
padding-top: 5rem;
padding-bottom: 5rem;
display: grid;
grid-template-columns: repeat(3, 1fr); 
column-gap: 0rem;
}

/*Linea productos*/
.linea-productos-dos-columnas{
 display: grid;
grid-template-columns: repeat(2, 1fr); 
column-gap: 2rem; 
}
.linea-productos-dos-columnas{
position: relative;
}
  
.posicion{
position: absolute;
top: 0;
right: 0;
padding-right: 10rem;
padding-top: 2rem;
}

.productos-letrero{
position: absolute;
top: 10rem;
right: 0;
}

.botoom{
padding-bottom: 0rem; 
 }

.posicion-derecha{
position: absolute;
top: 10rem;
right: -8rem;
padding-right: 10rem;
padding-top: 2rem;
}
.posicion-derecha2{
  position: absolute;
  top: 5rem;
  right: -8rem;
  padding-right: 10rem;
  padding-top: 2rem;
  }

/*Proyectos*/
.proyectos-dos-columnas{
  display: flex;


}
#articulo1{
  vertical-align: top;
  width: 49%;

}

#articulo2{
  vertical-align: top;
  width: 49%;
  margin-top: 5rem;
  

}

/*Clientes*/
.clientes-contenido-cuatro-columnas{
display: grid;
grid-template-columns: repeat(4, 1fr); 
column-gap: 2rem; 
}

/* tamnaños*/

.diferentes-tamanos-dos-columnas{
display: grid;
grid-template-columns: repeat(2, 1fr); 
column-gap: 2rem; 

}
.imagen-separacion{
padding-right: 5rem;  
}

.centrar-tamanos{
text-align: left;
}

form{
width: 100%;
}  
.imput25{
width: 25%;    
}
.imput24{
margin-right: 0.95rem;
width: 24%;    
}
.imput40{
width: 49%;    
} 
.imput40{
width: 49%;    
} 
.imput50{
width: 50%;    
} 
.imput100{
width: 100%;    
}        

.footer-contenido {
  padding: 3rem;
  display: flex;
  justify-content: flex-end;
  align-items: center; 
}
.derecha{
  text-align: right;  
  }



/************************************************************************************************************/
/*ESTILOS PAGINA RESULTADO*/



/*******************************************************************************************************/
/*ESTILOS PAGINA DETALLE*/


/*******************************************************************************************************/
/*ESTILOS PAGINA SERVICIOS*/



}