*{
  margin:0px;
  padding:0px;  
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
a{
	text-decoration: none;
	transition: .5s;
	color: #fff;
}
ul,
li{list-style-type: none;}

img{
	max-width: 100%;
	height: auto;
}
body{
	margin:0;
	padding:0;
	font-family: "Cabin", serif;
	background-image: url(imagenes/bg.jpg);
  background-size: auto; 150vh;
  background-position: center 0;

}
span{display: none}

.slides-promos{
	width: 100%;
	height: auto;
	
}
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
}

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
}

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
}

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
}
/* --- --- HEADER --- --- */
header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1em 2em;
	background-color: #1a1a1a;
}
.logo{
	width: 30%;
	height: auto;
}
.logo img{
	max-width: 7em;
}
.firma{
	width: 30%;
	height: auto;
	display: flex;
	justify-content: end;
}
.firma img{
	max-width: 20em;
}
.nav-list{
	list-style-type: none;
	display: flex;
	gap: 1.5em;
	font-size: 1.2em;
}
.nav-list li a{
	text-decoration: none;
	color: #ececec;
}
.nav-list li a:hover{color: #889199}
.abrir-menu{display: none;}
.cerrar-menu{display: none;}









.marca{
	width: 30%;
	height: auto;
	max-width: 25em;
	margin: auto;
	padding: 18em 0;
	display: flex;	
	flex-direction: column;
	justify-content: center;
	align-items:center ;
	
}
.marca img{
	display: block;
	max-width: 100%;
	height: auto;
}
.texto-marca{
	width: 100%;
	background-color: #ececec;
	padding: .5em;
	

}
.texto-marca h2{
	color: #1c1c1c;
	font-size: 1.3em;
	text-align: center;
	
}
/* --- --- NOSOTROS --- --- */

.nosotros{
	width: 100%;
	background-color: #ececec;
	height: auto;
	margin: auto;
	padding: 3em 0;
	
}

.nosotros h1{
	color:#1a1a1a;
	text-align: center;
	font-weight: 600;
	padding: 0.8em 0;
}
 
.nosotros h2{
	color:#4a4a4a;
	text-align: center;
	line-height: 1.8em;
	font-weight: 400;
}


.texto-contenedor{
	width: 90%;
	margin: auto;
}
.nosotros p{
	color:#1a1a1a;
	font-size: 1.3em;
	font-weight: 400;
	text-align: center;
	line-height: 1.5em;
	padding: .5em 0;
}

.eslogan{
	width: 100%;
	height: auto;
	background-color: #ececec;
	display: flex;
	justify-content: center;
	padding: 1em 0;
}

.infoeslogan{
	background-color: #ececec;
	color: #4a4a4a;
	border: solid 2px #4a4a4a;
	border-radius: 25px;
	transition: all 400ms ease;
	padding: .5em 1.5em;
	font-size: 1.3em;
}




.saber-mas{
	width: 100%;
	height: auto;
	background-color: #ececec;
	display: flex;
	justify-content: center;
	padding: 1em 0;
}
.mas-info{
	background-color: #1a1a1a;
	color: #ececec;
	border: solid 2px #1a1a1a;
	transition: all 400ms ease;
	padding: .5em 1.5em;
	font-size: 1.2em;
}

.mas-info:hover{
	background-color: #434548;
	border: solid 2px #434548;
	cursor: pointer;

}

.mas-info2{
	background-color: #96979b;
	color: #fff;
	border: solid 2px #fff;
	border-radius: 25px;
	transition: all 400ms ease;
	padding: .5em 1.5em;
	font-size: 1.2em;
}
h1, h2, h3{
	font-family: "Cabin", serif;
	font-weight: 700;
	color: #ececec;
}
p{
	color: #1a1a1a;
}

.nosotros2{
	width: 100%;
	background-color: #96979b;
	height: auto;
	margin: auto;
	padding: 3em 0;
	
}

.nosotros2 h1{
	color:#fff;
	text-align: center;
	font-weight: 600;
	padding: 0.8em 0;
}
 
.nosotros2 h2{
	color:#fff;
	text-align: center;
	line-height: 1.8em;
	font-weight: 400;
}

.nosotros2 p{
	color:#1a1a1a;
	font-size: 1.3em;
	font-weight: 400;
	text-align: center;
	line-height: 1.5em;
	padding: .5em 0;
}

.saber-mas2{
	width: 100%;
	height: auto;
	background-color: #96979b;
	display: flex;
	justify-content: center;
	padding: 1em 0;
}






.carousel__trabajos{
	width: 100%;
	background-color: #1a1a1a;
	height: auto;
	margin: auto;
	padding: 3em 0;
}


/* --- --- CAROUSEL --- --- */


.carousel__contenedor {
	position: relative;
	background-color: #1a1a1a;
	width: 95%;
	margin: auto;
}
.carousel__contenedor h2{
	padding-bottom: .8em;
}
.carousel__anterior,
.carousel__siguiente {
	position: absolute;
	display: block;
	width: 30px;
	height: 30px;
	border: none;
	top: calc(50% - 35px);
	cursor: pointer;
	line-height: 30px;
	text-align: center;
	background: none;
	color: #fff;
	
}
.carousel__anterior:hover,
.carousel__siguiente:hover {
	opacity: 100%;
}

.carousel__anterior {
	left: -30px;
}
.carousel__siguiente {
	right: -30px;
}
.carousel__lista {
	overflow: hidden;
}
.carousel__elemento {
	text-align: center;
}
.carousel__elemento p{
	font-size: 1.2em;
	font-weight: 500;
	color: #bac1c2;
	padding: .5em 0;
}
 .carousel__indicadores .glider-dot {
 	display: block;
 	width: 30px;
 	height: 4px;
 	background: #fff;
 	opacity: .2;
 	border-radius: 0;

 }
 .carousel__indicadores .glider-dot:hover {
 	opacity: .5;
 }
.carousel__indicadores .glider-dot.active {
	opacity: 1;
}

/* --- --- VIDEO --- --- */

.audiovisual{
	width: 100%;
	height: auto;
	background:#bac1c2;
	padding: 8em 0;
	display: flex;	
	flex-direction: column;
	justify-content: center;
	align-items:center ;
}
.conteiner-video{
	width: 30%;
	height: auto;
}


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


.contacto{
	width: 100%;
	background-image: url(imagenes/fondo-cto.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	padding:6em 0;

}

form{
	width: 30%;
	margin: auto;
	background: #1a1a1a;
	padding: 1em 2em;
	box-sizing: border-box;

}
form h1{
	padding-bottom:.7em;
}
input, textarea{
	width: 100%;
	margin-bottom: 1em;
	padding:.7em;
	box-sizing:border-box;
	border: none;
}
textarea{
	min-height: 8em;
	max-height: 12em;
	max-width: 100%;
}
#boton{
	background: #bac1c2;
	color: #1a1a1a;
	padding-bottom: 1em;
}
#boton:hover{
	cursor: pointer;
}

/* --- --- FOOTER --- --- */

footer{
	background-color: #1a1a1a;
	color: #bac1c2;
}
footer p{color: #bac1c2}
.footer_info{
	width: 90%;
	margin: 0 auto;
	display: flex;
	padding: 4em 0;
}
.footer_info .footer_width{padding: 0 3em;}
.footer_info h2{margin-bottom: 1.6em;}
.about,
.contact{
	width: 40%;
}
.contact a{color: #bac1c2}
.link{
	width: 20%;
	text-align: center;

}
.link li a{
font-size: 1.4;
line-height: 1.6;


}

.social_media{
	margin-top: 3em;
}
.social_media ul{
	display: flex;

}
.social_media ul li a{
	display: inline-block;
	margin-right: 4em;
	width: 3em;
	height: 3em;
	padding-top: 1em;
	background-color: #bac1c2;
	color: #000;
	border: 1px solid #bac1c2;
	text-align: center;
}
.social_media ul li a:hover{
	background-color: #fff;
	color: #000;
}
.link ul li a{
	display: block
	
	
}

.link ul li a:hover{
	color: #000
}
.contact ul li{
	display: flex;
	align-items: center;
	margin-bottom: 2em;
}
.contact ul li a{
	margin-right: 2em;
}
.copy_rigth{
	padding: 2em 0;
	text-align: center;
	background-color: #000;
}








/* M E D I A  Q U E R I E S */

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

.firma,
.logo{width: 20%;}
.firma img{max-width: 15em;}
.logo img{max-width: 4em;}
.nav-list{font-size: 1em;}


}







@media screen and (max-width : 1280px) {
.texto-marca h2{font-size: 1.1em;}
.carousel__elemento p{font-size: 1em;}
footer h2{font-size: 1.2em;}
.footer_info{width: 96%;}
.about p{font-size: 1em;}
.social_media ul li a{
	
	margin-right: 2em;
	width: 2em;
	height: 2em;
	padding-top: 0.5em;

}



}

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

	.nosotros h1{font-size: 1.6em;}
	.nosotros p{font-size: 1.1em;}
	.audiovisual{padding: 6em 0;}
	.conteiner-video{width: 40%;}
	.carousel__elemento p{font-size: .9em;}
	form{width: 40%;}
	
	.mas-info{padding: .4em 1.3em; font-size: 1em;}


}


@media screen and (max-width : 1050px){
	.texto-marca h2{font-size: 1em;}
	.firma{display: none;}

}

	

@media screen and (max-width : 960px){
	.texto-marca h2{font-size: 0.9em;}
	.nosotros p{
		margin: 0 2em;

	}


	

}
@media screen and (max-width : 900px){
.texto-marca h2{font-size: .8em;}
.about{width: 40%;}
.link{width: 20%;}
.contact{width: 30%;}


}

@media screen and (max-width : 800px){
	
	
	.nosotros h1{font-size: 1.4em;}
	.nosotros p{font-size: 1em;}
	.nosotros2 h2{font-size: 0.9em;}
	.mas-info{padding: .4em 1.3em; font-size: .9em;}
	.audiovisual{padding: 4em 0;}
	.carousel__elemento p{font-size: .8em;}
	form{width: 50%;}
	form h1{font-size: 1.5em;}
	
.about,
.contact,
.link{
	width: 100%;
	margin-bottom: 3em;
}

.link ul{
	display: flex;
	justify-content: space-between;
}

.footer_info{
	flex-direction: column;
}

.contact h2,
.link h2{display: none;}
}


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

.marca h2{font-size: .9em;}
.nosotros h2{font-size: 0.9em;}
}






@media screen and (max-width : 640px){
	body{
	background-image: url(imagenes/bgsmall.jpg);
  background-size: auto; 150vh;
  background-position: center 0;
	}

	.abrir-menu,
	.cerrar-menu{
		display: block;
		border: 0;
		font-size: 1.5em;
		background-color: transparent;
		cursor: pointer;
	}
	.abrir-menu,
	.cerrar-menu{color: #cecece}

	.nav{
		opacity: 0;
		visibility: hidden;
		display: flex;
		flex-direction: column;
		align-items: end;
		gap: 2rem;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		padding: 2rem;
		background-color: black;
		box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);
	}
	.nav.visible{
		opacity: 1;
		visibility: visible;
	}
	.nav-list{
		flex-direction: column;
		align-items: end;

	}
	.nav-list li a{color: #cecece}


	.nosotros p{font-size: .9em;}

.mas-info2{font-size: .9em;}

.infoeslogan{font-size: .9em;}



}

@media screen and (max-width : 480px){
	.marca h2{font-size: .7em;}



}




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

	.marca h2{display: none;}
	.audiovisual{padding: 2em 0;}
	.conteiner-video{width: 60%;}
	form{width: 80%;}



}