html,body{
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	line-height: 146%;
	color: #2C2C2C;
	font-size: 24px;
	overflow-x: hidden;
}

header{
	height: 8.42rem;
	background: #2C2C2C;
	color: #ffffff;
	font-weight: 500;
	font-size: 0.58rem;
	line-height: 200%;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

h1{
	font-family: 'Rokkitt';
	font-weight: 900;
	font-size: 5.42rem;
	line-height: 0.9230769231em;
	color: #2C2C2C;
}

h2{
	font-family: 'Rokkitt';
	font-weight: 800;
	font-size: 2.67rem;
	line-height: 1.09em;
	text-align: center;
	letter-spacing: 0.02em;
}
h3{
	font-family: 'Rokkitt';
	font-weight: 800;
	font-size: 2.29rem;
	line-height: 0.87em;
	letter-spacing: 0.01em;
}
h4{
	font-family: 'Rokkitt';
	font-weight: 700;
	font-size: 1.64rem;
	line-height: 1.125em;
}
input.form-control{
	border:	none;
	border-radius: 1em;
	line-height: 2.96em;
}
textarea.form-control{
	border:	none;
	border-radius: 1em;
	line-height: 1.2em;
	height: 6.9em;
	padding-top: .75rem;
}
.contenedor-1{
	padding-left: 80px;
	padding-right: 80px;
}
.contenedor-2{
	padding-left: 120px;
	padding-right: 120px;	
}
.contenedor-3{
	padding-left: 192px;
	padding-right: 192px;	
}
.contenedor-4{
	padding-left: 320px;
	padding-right: 320px;	
}
.contenedor-5{
	padding-left: 434px;
	padding-right: 434px;	
}

.texto-morado{
	color: #A180E8;
}

.btn-amarillo{
	font-family: 'Montserrat';
	font-weight: 600;
	font-size: 0.71rem;
	line-height: 1.24em;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #FFFFFF;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 12px 40px;
	gap: 8px;
	background: linear-gradient(360deg, #FDA700 0%, #FED47C 100%);
	box-shadow: 0px 4px 4px rgba(255, 191, 67, 0.5);
	border: none;
	border-radius: 40px;
	transition: .2s ease-in-out;
	text-decoration: none;
}
.btn-amarillo:hover{
	box-shadow: 0px 2px 2px rgba(255, 191, 67, 0.2);
}
.btn-amarillo:disabled {
	background: linear-gradient(
360deg, #999, #CCC);
	box-shadow: 0px 4px 4px rgba(255, 191, 67, 0.2);
}
.btn-negro{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 12px 40px;
	gap: 8px;
	background: #000000;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
	border: none;
	border-radius: 40px;
	font-family: 'Montserrat';
	font-weight: 600;
	font-size: 0.71rem;
	line-height: 1.24em;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #FFFFFF;
	transition: .2s ease-in-out;
	text-decoration: none;
}
.btn-negro:hover{
	color: #FFC33F;
	box-shadow: 0px 2px 2px rgba(255, 191, 67, 0.2);
}
.btn-amarillo-out{
	font-weight: 600;
	font-size: 0.71rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #FFC33F;
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.5));
	border-radius: calc(2.41em - 4px);
	line-height: 241%;
	background: linear-gradient(#FED47C,#FDA700);
	display: inline-block;
	padding: 2px;
	transition: .2s ease-in-out;
}
.btn-amarillo-out span{
	border-radius: 2.41em;
	padding-left: 38px;
	padding-right: 38px;
	background: #2C2C2C;
	width: 100%;
	height: 100%;
	display: inline-block;
}
.btn-amarillo-out:hover{
	filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.5));
	background: linear-gradient(#FFC33F,#FFC33F);
}

@keyframes extrellas {
  0% {transform: rotate(0deg)}
  25% {transform: rotate(-10deg)}
  50% {transform: rotate(0deg)}
  75% {transform: rotate(10deg)}
  100% {transform: rotate(10deg)}
}
.estrella{
	animation-name: extrellas;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
.estrella:nth-child(2){
	animation-delay: .3s;
	animation-duration: 1.7s;
	animation-direction: alternate-reverse;
}
.estrella:nth-child(3){
	animation-delay: .7s;
	animation-duration: 2.3s;
}
.estrella:nth-child(4){
	animation-delay: .15s;
}
header #logo{
	max-height: 5.167rem;
}

header a{
	color: white;
	text-decoration: none;
}
header a:hover{
	color: white;
	text-decoration: underline;
}
header .contact-info{
	text-transform: lowercase;
}
header img#burguer {
	margin-left: 2em;
	margin-top: 1em;
}
#offcanvasMenuMobile{
	background: #2C2C2C;
	width: 100%;
}
#offcanvasMenuMobile .offcanvas-header .btn-close {
	opacity: 1;
}
#offcanvasMenuMobile nav.navbar{
	height: 90%;
}
#offcanvasMenuMobile li{
	color: white;
	text-decoration: none;
	font-size: 1rem;
	line-height: 3em;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: .7rem;
}
#offcanvasMenuMobile a{
	color: white;
	text-decoration: none;
}
#offcanvasMenuMobile button{
	width: 100%;
	margin-bottom: 2rem;
	margin-top: .7rem;
}
#offcanvasMenuMobile .menu-marcas{
	border-radius: 16px;
	background: #FFF;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	list-style: none;
	margin: 0px;
	padding: 0px;
	width: 240px;
	height: 80px;
}
#offcanvasMenuMobile .menu-marcas img{
	width: 50px;
}
#offcanvasMenuMobile img#icon-fondo-1 {
	position: absolute;
	top: 3em;
	left: 0%;
}
#offcanvasMenuMobile img#icon-fondo-2 {
	position: absolute;
	top: 9em;
	right: -10%;
}
#offcanvasMenuMobile img#icon-fondo-3 {
	position: absolute;
	bottom: 7em;
	right: 0px;
}
div#menu_marcas {
	position: fixed;
	right: 0px;
	top: 50%;
	z-index: 1;
	padding: 25px 20px;
	background: #ededed;
	border-top-left-radius: 16px;
	border-bottom-left-radius: 16px;
	transition: .5s ease-in-out;
	transform: translate(100%,-50%);
}
div#menu_marcas.open {
	transform: translate(0%,-50%);;
}
div#menu_marcas #menu_marcas_open{
	position: absolute;
	top: 50%;
	left: 0px;
	transform: translate(-100%,-50%);
	cursor: pointer;
}
div#menu_marcas ul{
	list-style: none;
	padding: 0px;
	margin: 0px;
}
div#menu_marcas ul li{
	margin-top: 15px;
	margin-bottom: 15px;
}

div#menu_marcas ul li img{
	width: 82px;
}

footer{
	background: #2C2C2C;
	color: #ffffff;
	font-weight: 500;
	font-size: 0.58rem;
	line-height: 200%;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	margin-top: 8.5em;
	position: relative;
}
footer .barra-amarilla{
	height: 80px;
	background: linear-gradient(360deg, #FDA700 0%, #FED47C 100%);
	margin-bottom: 2em;
}
footer .navbar-nav{
	width: 100%;
	z-index: 1;
}
footer a{
	color: white;
	text-decoration: none;
	z-index: 1;
	position: relative;
}
footer a:hover{
	color: white;
	text-decoration: underline;
}
footer #logo-footer{
	height: 6.167rem;
}
footer .contact-info{
	text-transform: lowercase;
	z-index: 1;
}
footer .btn-amarillo{
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
}
footer a.contacto:hover{
	text-decoration: none;
}
footer hr{
	border: 1.5px solid white;
	opacity: 1;
	z-index: 1;
	position: relative;
}
footer .copyright{
	font-weight: 500;
	font-size: 0.54rem;
	line-height: 1em;
	letter-spacing: 0.01em;
	padding-bottom: 2em;
	margin: 0px;
	z-index: 1;
}
footer .elementos{
	z-index: 1;
	position: relative;
}
footer img.cara-negra {
	position: absolute;
	right: 4rem;
	height: 66%;
	bottom: .5rem;
	z-index: 0;
}
/* Extra extra large */
@media only screen and (min-width: 1440px) {
	.contenedor-1{
		padding-left: 80px;
		padding-right: 80px;
		width: 1440px;
		margin-left: calc((100vw - 1440px) / 2);
	}
	.contenedor-2{
		padding-left: 120px;
		padding-right: 120px;	
		width: 1440px;
		margin-left: calc((100vw - 1440px) / 2);
	}
	.contenedor-3{
		padding-left: 192px;
		padding-right: 192px;	
		width: 1440px;
		margin-left: calc((100vw - 1440px) / 2);
	}
	.contenedor-4{
		padding-left: 320px;
		padding-right: 320px;	
		width: 1440px;
		margin-left: calc((100vw - 1440px) / 2);
	}
	.contenedor-5{
		padding-left: 434px;
		padding-right: 434px;	
		width: 1440px;
		margin-left: calc((100vw - 1440px) / 2);
	}
}
/* Extra large */
@media only screen and (max-width: 1400px) and (min-width: 1200px){
	html, body {
		font-size: 22px;
	}
	h1 {
		font-size: 4.5rem;
	}
	.contenedor-1{
		padding-left: 40px;
		padding-right: 40px;
	}
	.contenedor-2{
		padding-left: 80px;
		padding-right: 80px;	
	}
	.contenedor-3{
		padding-left: 120px;
		padding-right: 120px;	
	}
	.contenedor-4{
		padding-left: 280px;
		padding-right: 280px;	
	}
	.contenedor-5{
		padding-left: 434px;
		padding-right: 434px;	
	}
	header .nav-item{
		padding: 0 .25em;
	}

}
/* Large */
@media only screen and (max-width: 1200px) and (min-width: 992px) {
	html, body {
		font-size: 18px;
	}
	h1 {
		font-size: 4rem;
	}
	.contenedor-1{
		padding-left: 40px;
		padding-right: 40px;
	}
	.contenedor-2{
		padding-left: 80px;
		padding-right: 80px;	
	}
	.contenedor-3{
		padding-left: 120px;
		padding-right: 120px;	
	}
	.contenedor-4{
		padding-left: 150px;
		padding-right: 150px;	
	}
	.contenedor-5{
		padding-left: 150px;
		padding-right: 150px;	
	}
	header .nav-item{
		padding: 0 .25em;
	}

}
/* Medium */
@media only screen and (max-width: 992px) and (min-width: 768px) {
	html, body {
		font-size: 18px;
	}
	.contenedor-1{
		padding-left: 20px;
		padding-right: 20px;
	}
	.contenedor-2{
		padding-left: 20px;
		padding-right: 20px;	
	}
	.contenedor-3{
		padding-left: 20px;
		padding-right: 20px;	
	}
	.contenedor-4{
		padding-left: 30px;
		padding-right: 30px;	
	}
	.contenedor-5{
		padding-left: 40px;
		padding-right: 40px;	
	}
	header .nav-item{
		padding: 0 .25em;
	}
	footer hr{
		margin-top: 1rem;
		margin-bottom: 1rem;
	}
}
/* Medium, small & x-small */
@media only screen and (max-width: 992px) {
	html, body {
		font-size: 18px;
		width: 100vw;
		overflow-x: hidden;
	}
	h1{
		font-size: 4rem;
	}
	h2{
		font-size: 1.5rem;
	}
	.contenedor-1{
		padding-left: 20px;
		padding-right: 20px;
	}
	.contenedor-2{
		padding-left: 20px;
		padding-right: 20px;	
	}
	.contenedor-3{
		padding-left: 20px;
		padding-right: 20px;	
	}
	.contenedor-4{
		padding-left: 30px;
		padding-right: 30px;	
	}
	.contenedor-5{
		padding-left: 40px;
		padding-right: 40px;	
	}
	header #logo {
		height: 50px;
	}
	header .nav-item{
		padding: 0 .25em;
	}
	footer{
		font-size: 1rem;
		text-align: center;
		font-size: 0.58rem;
	}
	footer #logo-footer{
		margin-bottom: 2em;
	}
	footer .navbar-nav li{
		text-align: center;
		padding-top: .75em;
		padding-bottom: .75em;
	}
	footer hr {
		margin-top: 2.5em;
		margin-bottom: 2.5em;
	}
}
/* Small & X-small */
@media only screen and (max-width: 768px) {
	html, body {
		font-size: 18px;
	}
	header {
		height: 80px;
	}
	input.form-control{
		line-height: 1.35em;
	}
	footer{
		margin-top: 0px;
	}
}
/* Small */
@media only screen and (max-width: 768px) and (min-width: 576px) {
}
/* X-small */
@media only screen and (max-width: 576px) {
}