@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://use.typekit.net/bsm4eui.css');

:root { 
	/* cores */
    --primary: #E00613;
    --primary-hover: #9F040D;
    --primary-active: #88050c;
    --secondary: #0D0D0C;
    --secondary-hover: #181816;
    --secondary-active: #242423;
    --green:#22B206;
	--green-hover: #177704;
	--green-active: #146305;
    --gray:#e6e6e6;
	--gray-hover: #e1e1e1;
	--gray-active: #dadada;
    --gray-light:#f3f3f3;
	--gray-light-hover: #e8e8e8;
	--gray-light-active: #e2e2e2;
	--white: #F0EFEF;
	/* cores */

	/* header */
	--header-topbar-background-color: var(--primary);
	--header-topbar-text-color: #fafafa;
	--header-topbar-icon-color: #fafafa;
	--header-background-color: #fff;
	--header-border-color: #DAD7D7;
	--header-color-text: var(--text);
	--header-svg-color: #151414;
	--header-svg-width: 20px;
	--header-svg-height: 20px;
	--header-search-background-color: var(--white);
	--header-search-background-color-focus: var(--gray);
	--header-search-color: var(--text);
	--header-menu-color-text: var(--text);
	--header-menu-mobile-color-text: var(--text);
	--header-menu-icon-color: var(--text);
	--header-menu-mobile-icon-color: var(--text);
	--header-menu-font-size: 14px;
	--header-menu-text-height: 64px;
	/* header */

	/* footer */
	--footer-background-color: #fff;
	--footer-border-color: #DAD7D7;
	--footer-color-text: var(--text-gray);
	--footer-space: 40px;
	/* footer */

	/* fontes */
    --font-primary: 'Roboto', sans-serif;
    --font-secondary: 'bebas-neue-pro-expanded', sans-serif;
	/* fontes */
   
	/* botões */
    --btn-primary:var(--primary);
    --btn-primary-hover: var(--primary-hover);
    --btn-primary-active: var(--primary-active);
    --btn-secondary: var(--secondary);
    --btn-secondary-hover: var(--secondary-hover);
    --btn-secondary-active: var(--secondary-active);
	/* botões */

	--variant-button-background-color: #fff;
	--variant-button-color: var(--text), #141414;
	--variant-button-border-color: #DAD7D7;
	--variant-button-selected-background-color: var(--primary);
	--variant-button-selected-color: #fff;
	--variant-button-selected-border-color: var(--primary);
	--variant-button-border-radius: var(--border-radius-default);
	
	/* radius */
	--border-radius-default: 8px;
	--btn-border-radius: var(--border-radius-default);
	--input-border-radius: var(--border-radius-default);
	/* radius */
	
	/* geral */
	--products-gutter-x: 8px;
	--products-gutter-y: 8px;

	--product-thumb-spacing: 4px;
	--plyr-color-main: var(--primary);
	--spacing-sections-home: 40px;
    --text: #151414;
    --text-gray: #6A6262;
	--background: #fff;
    --container-small: 1530px;
    --container-xxl: 1760px;
    --container-large: 1920px;
    --logo-max-height: 40px;
	@media (max-width: 991px) {
		--spacing-sections-home: 16px;
		--footer-space: 24px;
		--logo-max-height: 36px;
	}
	/* geral */
}

/* top 10 masterway */
.top-masterway .top-masterway-item {border-radius: 16px; background: radial-gradient(137.15% 100% at 50% 0%, #4F0207 0%, #0B0A0A 100%); padding: 20px; color: #fff; transition: ease all .5s; position: relative;}
.top-masterway .top-masterway-title {font-family: var(--font-secondary); font-size: 40px; font-style: italic; font-weight: 700; letter-spacing: -0.8px;}
.top-masterway .number {position: absolute; top: 16px; left: 16px; background: var(--primary); width: 40px; height: 40px; border-radius: 50%; font-family: var(--font-secondary); font-size: 24px; font-weight: 700; display: flex; justify-content: center; align-items: center;}
.top-masterway .top-masterway-attributes {line-height: normal;}
.top-masterway .top-masterway-attribute i {color: var(--green);}
.top-masterway .top-masterway-btn {text-transform: uppercase; font-size: 16px; font-weight: 700; letter-spacing: -0.32px; padding: 16px 0;}
@media (max-width: 1600px) {
	.top-masterway .top-masterway-item {font-size: 12px;}
}
@media (max-width: 991px) {
	.top-masterway .top-masterway-item {padding: 16px;}
	.top-masterway .top-masterway-title {font-size: 28px;}
	.top-masterway .number {top: 8px; left: 8px; width: 24px; height: 24px; font-size: 16px;}
	.top-masterway .top-masterway-attributes {font-size: 10px;}
	.top-masterway .top-masterway-btn {font-size: 12px; padding: 12px 0;}
	.top-masterway .vowt-prev, .top-masterway .vowt-next {display: none;}
}
/* top 10 masterway */

/* tipos de suplementos */
.supplements-type .supplements-type-content {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;}
.supplements-type .supplements-type-item {border-radius: 16px; overflow: hidden;}
.supplements-type .supplements-type-item:hover img {transform: scale(1.1);}
.supplements-type .supplements-type-item::before {content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.00) 25%, rgba(0, 0, 0, 0.75) 100%); z-index: 1;}
.supplements-type .supplements-type-title {font-size: 24px; font-weight: 700; font-style: italic; font-family: var(--font-secondary); color: #fff; text-transform: uppercase;}
@media (max-width: 991px) {
	.supplements-type .supplements-type-title {font-size: 20px;}
	.supplements-type .vowt-prev, .supplements-type .vowt-next {display: none;}
}
/* tipos de suplementos */

/* videos atletas */
.shorts-videos {background: var(--primary); padding: 80px 0;}
.shorts-videos h2 {color: #fff; margin-bottom: 24px;}
.shorts-videos h2 span {color: #000;}
.shorts-videos .swiper-slide {width: calc(19.25% - 16px); margin-right: 16px; transition: ease all .5s;}
.shorts-videos .swiper-slide:last-child {margin: 0;}
.shorts-videos .swiper-slide-next + .swiper-slide {width: 23%;}
.shorts-videos .video-wrapper {overflow: hidden; display: flex; align-items: center;}
.shorts-videos .plyr--video {aspect-ratio: 9/16; width: 100%; border-radius: 16px;}
/* .shorts-videos iframe {pointer-events: none;} */
.shorts-videos iframe.iframe-yt, .shorts-videos video.shorts-video {aspect-ratio: 9/16; width: 100%; border-radius: 16px;}
/* .shorts-videos .video-placeholder {background-image: linear-gradient(90deg,#1c1c1c 0%, #2a2a2a 50%, #1c1c1c 100%); aspect-ratio: 9/16; animation: shimmer 1.5s infinite linear; display: flex; align-items: center; justify-content: center;} */
/* .shorts-videos .plyr__controls {display: none;} */
.shorts-videos .plyr__poster {background-size: cover;}
.shorts-videos .plyr__time, .shorts-videos .plyr__progress__container {display: none;}
@media (max-width: 991px) {
	.shorts-videos {padding: 32px 0;}
	.shorts-videos .vowt-prev, .shorts-videos .vowt-next {display: none;}
}
/* videos atletas */

/* blocos de informações */
.block-information .block-information-content {position: absolute; left: 40px; bottom: 40px; color: #fff; padding-right: 40px;}
.block-information .block-information-title {font-size: 32px; font-weight: 700; letter-spacing: -0.64px; font-family: var(--font-secondary); font-style: italic;}
.block-information .block-information-description {font-size: 14px; line-height: 150%; margin-top: 8px;}
.block-information .block-information-item {border-radius: 16px; overflow: hidden;}
.block-information .block-information-item::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 25%, rgba(0, 0, 0, 0.75) 100%);}
.block-information .btn {text-transform: uppercase; font-size: 16px; font-weight: 700; letter-spacing: -0.32px; padding: 16px 40px; margin-top: 24px;}
@media (max-width: 991px) {
	.block-information .block-information-content {left: 24px; bottom: 24px;}
	.block-information .block-information-title {font-size: 26px;}
	.block-information .block-information-description {font-size: 11px;}
	.block-information .btn {font-size: 12px; padding: 12px 16px; margin-top: 16px;}
}
/* blocos de informações */

/* cupons disponíveis */
.coupons-available .btn.btn-open-coupons {bottom: 112px; left: 30px;}
.coupons-available .coupons, .coupons-available .coupon-divisor::after, .coupons-available .coupon-divisor::before {background: var(--primary);}
@media (max-width: 991px) {
	.coupons-available .btn.btn-open-coupons {bottom: 80px;}
}
/* cupons disponíveis */

.filter {border-color: #DAD7D7; border-radius: 16px;}