@font-face {
   font-family: bebas-regular;
   src: url(../fonts/Bebas_Neue/BebasNeue-Regular.woff2);
}

@font-face {
   font-family: montserrat-bold;
   src: url(../fonts/Montserrat/static/Montserrat-Bold.woff2);
}
@font-face {
   font-family: montserrat-light;
   src: url(../fonts/Montserrat/static/Montserrat-Light.woff2);
}
@font-face {
   font-family: montserrat-medium;
   src: url(../fonts/Montserrat/static/Montserrat-Medium.woff2);
}
@font-face {
   font-family: montserrat-regular;
   src: url(../fonts/Montserrat/static/Montserrat-Regular.woff2);
}

body {
	font-family: montserrat-regular;
}

.title {
	font-family: bebas-regular;
}

.montserrat-bold {
	font-family: montserrat-bold;
}

a {
	text-decoration: none;
}

.fhs-2 {
	font-size: 2rem;
}

.fhs-3 {
	font-size: 3rem;
}

.fhs-4 {
	font-size: 4rem;
}

.fhs-5 {
	font-size: 5rem;
}

.fhs-6 {
	font-size: 6rem;
}

.small-txt {
	font-size: 0.875rem;
}

.bg-darkblue {
	background-color: #232f3e;
}
.bg-hay {
	background-color: #eaeded;
}
.bg-red {
	background-color: #ec2d37;
}

.bg-light-gray {
	background-color: #f2f2f2;
}

.bg-cat {
	background-color: #f5f5f5;
}

.bg-location {
	background-color: #f7f7f7;
}

.bg-morado {
	background-color: #931f90;
}

.btn-orange {
	background-color: #ffa41c;
}

.btn-orange:hover {
	background-color: #ffb52d;
}

.text-red {
	color: #ff0000;
}

.text-morado {
	color: #931f90;
}

.text-green {
	color: rgb(33, 192, 99);
}

.title-3 {
	font-size: 1.125rem;
}
.shadow-1{
	text-shadow: 1px 1px 2px black;
}

.product-list .card {
	max-width: 300px;
}

.product-list .card-title {
	min-height: 80px;
}

.product-list .card-title a {
	color: #222222;
	text-decoration: none;
}

.product-list .card-title a:hover {
	color: #c45500;
}

.product-list .card-price {
	min-height: 60px;
}

#new-arraivals .card-title {
	min-height: 70px;
}

.banner-background {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	display: block;
}

.banner-background.short {
	height: 230px;
}

.banner-background.tall {
	height: 600px;
}

.banner-background-tall {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	display: block;
}

.banner-background-tall.banner-right {
	background-position: right -250px center;
}

.banner-content-tall {
	color: white;
	font-weight: bold;
	line-height: 1;
	min-height: 600px;
	overflow: hidden;
	padding-left: 40px;
	padding-top: 50px;
}

.banner-content-medium {
	color: white;
	font-weight: bold;
	line-height: 1;
	min-height: 500px;
	overflow: hidden;
	padding-left: 40px;
	padding-top: 50px;
}

.banner-content.producto {
	bottom: 5%;
	font-weight: bold;
	line-height: 1;
	overflow: hidden;
}

.banner-content .nombre-producto {
	font-size: 2rem;
	letter-spacing: -0.2rem;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px black;
}

.banner-content {
	color: white;
	overflow: hidden;
	position: absolute;
	transition: opacity 2s, z-index 2s;
	width: 100%;
	z-index: 50;
}

.banner-content.nosotros {
	padding-bottom: calc(3vw * 1);
	padding-left: calc(5vw - 1rem);
	padding-right: calc(10vw - 1rem);
	padding-top: calc(10vw * 1);
}

.banner-content.negocio {
	line-height: 1;
	padding-bottom: calc(3vw * 1);
	padding-left: calc(5vw - 1rem);
	padding-right: calc(10vw - 1rem);
	padding-top: calc(3vw * 1);
}

.banner-content .headline {
	font-size: 4rem;
	font-weight: bold;
	text-transform: uppercase;
	width: 100%;
}

.banner-content .subhead {
	width: 100%;
}

.subline {
	background-color: red;
	height: 8px;
	width: 100px;
}

.subline-morado {
	background-color: #931f90;
	height: 8px;
	width: 100px;
}

.subline-morado-sm {
	background-color: #931f90;
	height: 5px;
	width: 50px;
}

.subline-sm {
	background-color: red;
	height: 5px;
	width: 50px;
}

.image-container {
	height: 300px;
	position: relative;
}

.image-container img {
	bottom: 0;
	margin: auto;
	max-height: 300px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0%);
}

.show-menu {
	cursor: pointer;
}

#menu-modal {
	display: flex;
	flex-flow: column;
	font-size: var(--base_font_size);
	height: 100%;
	justify-content: flex-start;
	max-width: 100%;
	opacity: 0;
	position: fixed;
	left: 0;
	overflow-y: auto;
	top: 0;
	transform: translate3D(-100%,0,0);
	-webkit-transform: translate3D(-100%,0,0);
	transition: 500ms ease all;
	width: 100vw;
	z-index: 19999;
}

#modal-close {
	border: 0;
	border-radius: 0;
	bottom: 0;
	cursor: pointer;
	font-size: 1.5rem;
	inset-inline: 0;
	opacity: 0;
	position: fixed;
	inset-block-end: 0;
	width: 100%;
	z-index: 20000;
}

.velostore-dual-menu__mobile-close-bar {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	z-index: 8;
	inset-inline: 0;
	inset-block-end: 0;
	/* display: none; */
	/* align-items: center; */
	/* justify-content: center; */
	width: 100%;
	min-height: 6.8rem;
	border: 0;
	border-radius: 0;
	background: #050505;
	color: #fff;
	font: inherit;
	font-size: 2rem;
	cursor: pointer;
}

#contacto-social .icon {
	font-size: 70px;
	line-height: 1;
}

#beneficios-bottom .icon {
	font-size: 60px;
	line-height: 1;
}

#beneficios-bottom .border-end {
	border: none !important;
}

.producto .card-img-top {
	padding-left: 100px;
	position: relative;
}

#product-images {
	left: 0;
	position: absolute;
	top: 0;
	width: 70px;
}

.product-options {
	display: inline-flex;
}

.product-options .rounded-pill {
	cursor: pointer;
	background-color: #ccc;
	color: 222;
}


.product-options .active {
	background-color: #222;
	color: white;
}


.header-top {
	border-bottom: 1px solid #ad0da6;
}

#top-menu {
	text-transform: uppercase;
}
#mobil-menu {
	background: #222;
	color: #fff;
	display: none;
	font-size: 1.6rem;
	min-height: 100vh;
	position: absolute;
	right: 0;
	text-transform: uppercase;
	width: 100%;
	z-index: 100;
}
#hamburguer {
	display: inline-block;
	position: absolute;
	left: 20px;
	top: 20px;
	width: 50px;
	z-index: 100;
}

#main {
	min-height: 700px;
}

.top-menu li {
	list-style: none;
}
#menu-wrap {
	border-top: 1px solid #444;
}

.menu-group {
	cursor: pointer;
}

#miniCart {
	height: 100%;
	position: fixed;
	top: 0;
	width: 100vw;
	transform: translate3D(100%,0,0);
	-webkit-transform: translate3D(100%,0,0);
	z-index: 19999;
}
#mini-cart {
	display: flex;
	flex-flow: column;
	font-size: var(--base_font_size);
	height: 100%;
	justify-content: flex-start;
	max-width: 100%;
	opacity: 0;
	position: fixed;
	right: 0;
	top: 0;
	transform: translate3D(100%,0,0);
	-webkit-transform: translate3D(100%,0,0);
	transition: 500ms ease all;
	width: 100vw;
	z-index: 19999;
}

.empty-cart .fa-shopping-cart {
	font-size: 7rem;
}

#minicart-header {
	display: flex;
	flex-flow: row;
	height: 90px;
	width: 100%;
	background-color: rgba(0,0,0,.015);
	border-bottom: 1px solid rgba(0,0,0,.03);
	left: 0;
	position: relative;
}

.hide-cart {
	font-size: 30px;
	font-family: Arial;
	cursor: pointer;
	width: 90px;
	height: 100%;
	line-height: 90px;
	color: var(--upsell-modal-close-text);
	background-color: var(--upsell-modal-close);
}

.update-item {
	font-size: 1.3rem;
}

#minicart-footer {
	bottom: 0;
	position: absolute;
	width: 100%;
}

.footer .col {
	min-width: 200px;
}

.footer-content {
	border-bottom: 1px solid #666666;
}

/*home*/
.top-brands .col {
	min-width: 180px;
}

.img-fill {
	width: 100%;
}

.cat-txt {
	bottom: 70px;
	left: 20px;
	position: absolute;
}
.cat-btn {
	bottom: 20px;
	left: 20px;
	position: absolute;
}

#home-promo {

  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

#home-promo img {
	object-fit: cover;
	object-position: right;
}

.promo-txt {
	bottom: 40%;
	left: 5%;
	max-width: 600px;
	position: absolute;
	z-index: 100;
}
.promo-btn {
	bottom: 15%;
	left: 5%;
	position: absolute;
}

#home-ofertas .card-body {
	min-height: 115px;
}

.discount-tag {
	background-color: red;
	color: white;
	left: 5px;
	position: absolute;
	top: 5px;
	width: 50px;
}

.box-1 {
	max-width: 300px;
	min-width: 200px;
}

.location-box {
	background-color: #f7f7f7;
	padding-left: 0;
	padding-top: 20px;
	padding-bottom: 20px;
}

.location-box .location {
	position: absolute;
	left: 0;
	top: 20px;
}

.location-content {
	padding-left: 30px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.location-box .number {
	height: 32px;
	line-height: 32px;
}

@media (min-width: 576px) {
	.banner-background.short {
		height: 350px;
	}
	.banner-content .nombre-producto {
		font-size: 2.5rem;
	}
}

@media (min-width: 768px) {
	.banner-background.short {
		height: 450px;
	}
}

@media (min-width: 992px) {

	#menu-modal {
		width: 800px;
	}

	#hamburguer {
		display: none;
	}
	#mini-cart {
		width: 800px;
	}

	#minicart-header {
		width: calc( 100% + 90px );
	}
	.banner-background.short {
		height: 600px;
	}

	.banner-content .nombre-producto {
		font-size: 3rem;
	}

	.banner-content .headline {
		width: 80%;
	}
	.banner-content .subhead {
		width: 50%;
	}
	
	#beneficios-bottom .border-end.show {
		border-right: solid 1px #6c757d !important;
	}

	.banner-background-tall.banner-right {
		background-position: center;
	}

	.location-box {
		padding-left: 20px;
		padding-top: 0;
		padding-bottom: 10px;
	}

	.location-box .location {
		left: 5px;
		top: 4%;
	}

	.location-content {
		padding-left: 30px;
		padding-top: 4%;
		padding-bottom: 0;
	}

	.sucursales .direccion {
		padding-top: 5px;
	}

	.sucursales .whatsapp {
		padding-bottom: 0.2rem;
	}

	.sucursales .store {
		margin-bottom: 0;
		min-height: 60px;
	}
}

@media (min-width: 1200px) {
	
	.banner-background.short {
		height: 600px;
	}

	.banner-content .nombre-producto {
		font-size: 4.5rem;
	}

	#beneficios-bottom .d-flex {
		justify-content: center !important;	
	}

	#beneficios-bottom .border-end.middle {
		border-right: solid 1px #6c757d !important;
	}

	.location-box {
		padding-left: 20px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.location-box .location {
		top: 10px;
	}

	.location-content {
		padding-left: 40px;
		padding-top: 10px;
		padding-bottom: 0;
	}

	.sucursales .direccion {
		padding-top: 0;
	}

	.sucursales .whatsapp {
		padding-bottom: 0.5rem;
	}

	.sucursales .store {
		margin-bottom: 0;
		min-height: 60px;
	}

}

@media (min-width: 1400px) {
	#beneficios-bottom .d-flex {
		justify-content: center !important;	
	}
	.banner-content .headline {
		width: 50%;
	}
	.banner-content .subhead {
		width: 33%;
	}

	.location-box {
		padding-left: 20px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.location-box .location {
		top: 20px;
	}

	.location-content {
		padding-left: 50px;
		padding-top: 20px;
		padding-bottom: 0;
	}

	.sucursales .direccion {
		padding-top: 0.5rem;
	}

	.sucursales .whatsapp {
		padding-bottom: 0.5rem;
	}
}

@media (min-width: 1650px) {

	.banner-background.short {
		height: 800px;
	}

	.location-box {
		padding-left: 60px;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.sucursales .direccion {
		padding-top: 1rem;
	}

	.sucursales .whatsapp {
		padding-bottom: 1rem;
	}
}

@media (min-width: 1920px) {

}