@charset "utf-8";
/* CSS Document */

@font-face {
	font-family: 'Pacifico';
	font-style: normal;
	font-weight: 400;
	src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
	font-display: swap;
  }

html, body, ul{
	margin: 0;
	padding: 0;
	font-family: 'Work Sans', sans-serif;
	scroll-behavior: smooth;
}

.clear{
	clear: both;
}

p::selection {
    background: #c8995d;
}

/* Firefox */
p::-moz-selection {
    background: #c8995d;
}


#areas-practica{
	padding-top: 100px;
	padding-bottom: 50px;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	color:#555;

	
}

#areas-practica p{
	margin-bottom: 80px;
}

#areas-practica li{
	width: 60%;
	border-radius: 50px;
	margin: 0px auto 0px auto;
	text-align: center;
	padding: 20px 20px 20px 20px;
	margin-top: 25px;
	color: white;
	background-color:cadetblue;
	font-size: 18px;
	font-weight: bold;
}


/*clientes*/

#contenedor-img{

	margin: 30px 0 50px 0;
	padding: 30px 0 50px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	flex-direction: row;
	overflow-x: auto;
  
  }
  #contenedor-img img{
		  width: 100%;
		  max-width: 225px;
		  height: 99px;
		  margin: 34px 25px 34px 25px;
	  }
  
  

@media only screen and (max-width: 951px)  {
	

#logo{
	width: 100%;
	max-width: 230px;
	margin: 15px auto 0 auto;
	text-align: center;
}
	

#row{

	flex-direction: column;
}
	

}

.portada {
	height: 620px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-direction: column;
	
  }

#cotizador{
	margin-top: 30px;
  }

#cotizador a{
	padding: 33px 38px 33px 38px;
	border: 2px solid white;
	color: white;
	border-radius: 50px;
	font-size: 18px;
	font-family: 'Roboto', sans-serif;
	font-weight: bold;

}

#cotizador a:hover{
	padding: 33px 38px 33px 38px;
	border: 2px solid white;
	background-color: white;
	color: gray;
	border-radius: 50px;
	cursor: pointer;
}


#servicios{
	padding: 133px 0 133px 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	}

#servicios figure{
 	height: 380px;
 	width: 280px;
	margin: 10px;
 	background-color: #2b3e51;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border-bottom: 5px solid #c8995d;

}
#servicios figure img{
	width: 140px;
	text-align: center;
    display: flex;
	margin: auto;
	margin-top: 10px;

}

#servicios figcaption h2{
	background-color: #c8995d;
	margin-top: 15px;
	padding: 15px;
	font-size: 21px;
	color:  #2b3e51;
	font-family: 'Roboto', sans-serif;
	font-weight: bolder;
	text-align: center;
}

#servicios figure figcaption p{
	font-size: 14px;
	font-weight: lighter;
	color: white;
	text-align: center;
	padding: 10px;
}


#btn-servicios{
	margin-top: 25px;
	text-align: center;
  }

#btn-servicios a{
	padding: 10px 18px 10px 18px;
	border: 2px solid white;
	color: white;
	border-radius: 10px;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
}

#btn-servicios a:hover{
	padding: 10px 18px 10px 18px;
	background-color: white;
	color: gray;
	cursor: pointer;

}

#icon {
	margin-top: 80px;
	animation: UpDown 1s linear infinite;
	position: relative;
	left: 0;
	bottom: 0;
	font-size: 4em;
	  cursor: pointer;
	  color: white;
  
  }
  
  @keyframes UpDown {
	0% {
	  bottom: 0;
	}
	50% {
	  bottom: .5em;
	}
	100% {
	  bottom: 0;
	}
  }


  
  .portada h1{
	font-size: 50px;
	font-family: 'Roboto', sans-serif;
	color: white;
	padding: 10px 0 10px 0;
  
  }


  .linea-nosotros{
	width: 100px;
	margin-top: 10px;
	float: left;
	border: solid 2px #2b3e51;
  }

  #nosotros strong{
	color: #2b3e51;;
  }
  
  
  @media only screen and (max-width: 951px)  {
	
	#contenedor{
	margin-top: -150px;
	transform: skewY(-5deg);
	background-color: white;
	padding-top: 50px;
	padding-bottom: 5px;
	}


	#nosotros {
		max-width: 50em;
		padding-top: 50px;
		transform: skewY(5deg);
		width: 70%;
		margin-left: auto;
		margin-right: auto;
		text-align: justify;
		font-family: 'Roboto', sans-serif;
		font-weight: 100;
		font-size: 18px;
		color:#555;
	}


	#home{

		background-image: url("../img/fondo.webp");
		height: 120vh;
		width: 100%; 
		background-size:cover;
		background-repeat: no-repeat;
		background-position: center;
		
	}

  
	.portada {
		height: 380px;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		flex-direction: column;
		
	  }
	
  .portada h1{
	font-size: 35px;
	font-family: 'Roboto', sans-serif;
	color: white;
	padding: 10px 0 10px 0;
  
  }
  
  #cotizador{
	margin-top: 30px;
  }

#cotizador a{
	padding: 25px 30px 25px 30px;
	border: 2px solid white;
	color: white;
	border-radius: 50px;
	font-size: 18px;
	font-family: 'Roboto', sans-serif;
	font-weight: bold;

}

#cotizador a:hover{
	padding: 25px 30px 25px 30px;
	border: 2px solid white;
	background-color: white;
	color: gray;
	border-radius: 50px;
	cursor: pointer;
}

#icon {
	margin-top: 80px;
	animation: UpDown 1s linear infinite;
	position: relative;
	left: 0;
	bottom: 0;
	font-size: 3em;
	  cursor: pointer;
	  color: white;
  
  }

  #icon a {

	  color: white;
  
  }
  
  @keyframes UpDown {
	0% {
	  bottom: 0;
	}
	50% {
	  bottom: .5em;
	}
	100% {
	  bottom: 0;
	}
  }

  

  
  
  }








@media only screen and (min-width: 951px)  {
	
	
	#logo{
	width: 100%;
	max-width: 230px;
	margin: 0px 0px 10px 38px;
	}


	#contenedor{
		margin-top: -150px;
		transform: skewY(-5deg);
		background-color: white;
		padding-top: 100px;
		padding-bottom: 80px;
	}


	#nosotros {
		max-width: 50em;
		padding-top: 100px;
		transform: skewY(5deg);
		width: 70%;
		margin-left: auto;
		margin-right: auto;
		text-align: justify;
		font-family: 'Roboto', sans-serif;
		font-weight: 100;
		font-size: 18px;
		color:#555;
	}
	
	#home{

		background-image: url("../img/fondo.webp");
		height: 133vh;
		width: 100%; 
		background-attachment: fixed;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: top;
		
	}


	
	.portada-secciones {
		height: 170px;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	  }
	  
	  .portada-secciones h2{
		font-size: 50px;
		font-family: 'Roboto', sans-serif;
		color: white;
		padding: 10px 0 10px 0;

	  
	  }
	  


}




/* CONTACTO */

#bancos{
	padding-top: 15px;
}


#contacto input{
	margin-bottom: 10px;
	padding-bottom: 30px;
	border-bottom: 1px solid #ccc;
	text-transform: uppercase;

}

#info-contacto{

	font-size: 22px;
	color: white;
	text-align: center;
	margin-top: 30px;	
	margin-bottom: 100px;


}




@media only screen and (max-width: 700px)  {
	
#info-contacto span{
	display: inline-block;
	padding: 10px;
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 18px;
	color: white;
	
}
	
#telefono-contacto a{
	font-size: 38px;
}
	.fa-whatsapp{
		font-size: 38px;
	}

}


@media only screen and (min-width: 701px)  {
	

#info-contacto span{
	display: inline-block;
	padding: 10px;
	padding-top: 15px;
	padding-bottom: 15px;
	color: white;

}


}
#info-contacto span a{
	text-decoration: none;
	color: white;

}

#telefono-contacto{
	font-size: 75px;
	font-family: 'Roboto', sans-serif;
	

}

#direccion{
	margin-top: 15px;
	font-size: 30px;
}




#clientes{
	margin-top: 80px;

}


@media (min-width: 951px) {
   #separador {
	background-image: url("../img/fondo2.webp");
	height: auto;
	padding: 100px 0px 100px 0px;
	width: 100%; 
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
    }

	#contacto {
		background-image: url("../img/rapidez.webp");
		height: auto;
		padding: 233px 0px 150px 0px;
		width: 100%; 
		background-attachment: fixed;
		background-size: cover;
		background-repeat: no-repeat;
		}
}

@media (max-width: 951px) {
    #separador {
        background-image: url("../img/fondo2.jpg");
		height: auto;
		padding: 5px 0px 5px 0px;
		width: 100%; 
		background-size: cover;
		background-repeat: no-repeat;
    }

	#contacto {
		background-image: url("../img/rapidez.webp");
		height: auto;
		padding: 100px 0px 50px 0px;
		width: 100%; 
		background-attachment: fixed;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		}
}

@media (max-width: 950px) {
    #separador {
        background-image: url("../img/fondo2.webp");
		height: auto;
		padding: 2px 0px 2px 0px;
		width: 100%; 
		background-attachment: fixed;
		background-size: cover;
		background-repeat: no-repeat;
    }
}


.pie{

	width: 100%; 
}


footer{
	padding: 50px;
	text-align: center;
	background-color: black;
	color: white;
}

#iconos-sociales{
	margin-top: 16px;
	float: right;
	margin-left: 25px;
}

#iconos-sociales a{

  padding-left: 5px;
  padding-right: 5px;
	border: none;
	color: white;
}



#iconos-sociales .fa-instagram, #iconos-sociales .fa-facebook .fa-phone{
	font-size: 22px;
}

#iconos-sociales .fa-instagram:hover, #iconos-sociales .fa-facebook .fa-phone:hover{
	padding-top: 0px;
	border:none;

}



/* ENVIADO */


#logo-enviado{
	width: 100%;
	max-width: 250px;
	min-width: 100px;
	margin-bottom: 20px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

#texto-enviado a{
	color: black;
	text-decoration: none;
	padding: 10px;
	background-color: white;

}

#texto-enviado a:hover{
 background-color: sandybrown;
}

#texto-enviado{
	width: 50%;
	margin-top: 100px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	padding: 10px;
	color: #fff;
}

#texto-enviado h2{
	font-size: 21px;
	font-weight: 500;
}
        
::selection {
    background: black;
    color: white;
}

/* WHATSAPP */


.whats-float {
    position: fixed;
    transform:translate(108px,0px);
    top:50%;
    right:0;
    width:150px;
    overflow: hidden;
    background-color: #25d366;
    color: #FFF;
    border-radius: 4px 0 0 4px;
    z-index: 10;
    transition: all 0.5s ease-in-out;
    vertical-align: middle
}
.whats-float a span {
    color: white;
    font-size: 15px;
    padding-top: 8px;
    padding-bottom: 10px;
    position: absolute;
    line-height: 16px;
    font-weight: bolder;
}

.whats-float i {
    font-size: 30px;
    color: white;
    line-height: 30px;
    padding: 10px;
    transform:rotate(0deg);
    transition: all 0.5s ease-in-out;
    text-align:center;

}

.whats-float:hover {
    color: #FFFFFF;
    transform:translate(0px,0px);
}

.whats-float:hover i  {
    transform:rotate(360deg);
}