/*
Page: Home
*/
.animation {
	pointer-events: none;
}
#hero {
	padding-top: 229px;
	padding-bottom: 68px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../../images/hero-back.jpg);
	background-image: -webkit-image-set(url(../../images/hero-back.jpg) 1x, url(../../images/hero-back@2x.jpg) 2x);
}
#hero .animation {
	height: auto;
	min-width: 100%;
	right: 0;
	bottom: 0;
	aspect-ratio: 1 / 0.271875;
}
#hero .hero-left {
	margin-right: 40px;
    max-width: calc(49.751% - 40px);
}
#hero .hero-left .button,
#hero .hero-right .button {
	width: 298px;
	height: 60px;
	border-radius: 15px;
	font-size: 1.5em;
	margin-top: 52px;
    letter-spacing: 0.1em;
}
#hero .hero-right {
    max-width: 50.249%;
}
#hero .hero-bottom {
	gap: 92px;
	margin-top: 123px;
}
#hero .hero-bottom .button {
	width: 261px;
	height: 60px;
	border-radius: 15px;
	font-size: 1.5em;
    letter-spacing: 0.1em;
}
#featured-products {
	padding-top: 112px;
	padding-bottom: 134px;
}
#featured-products .sticky {
    color: #E8EAEB;
    font-size: 11.458333vw;
    letter-spacing: 0.1em;
    position: sticky;
    top: 120px;
	margin-bottom: calc( -0.63 * var(--self-height));
} 
#featured-products .fp-top h4 {
    font-size: 3.125em;
    letter-spacing: 0.1em;
    padding: 25px 42px;
    line-height: .76;
    border-radius: 120px;
}
#featured-products .button {
    width: 200px;
    height: 60px;
    border-radius: 15px;
    letter-spacing: 0.1em;
    font-size: 1.5em;
	margin-top: 60px;
}
#featured-products .woocommerce ul.products,
#featured-products .woocommerce ul.products li.product {
    margin-bottom: 0;
}
#shark-products {
	margin-top: 87px;
}
#compromise {
	padding-bottom: 112px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../../images/compromise-back.jpg);
	background-image: -webkit-image-set(url(../../images/compromise-back.jpg) 1x, url(../../images/compromise-back@2x.jpg) 2x);
}
#compromise .animation {
	height: auto;
	width: 39.583333vw;
	right: -8.75vw;
	bottom: -3.3vw;
	aspect-ratio: 1 / 0.20255864;
}
#compromise h3 {
	font-size: 8.1875em;
    line-height: 0.85;
	font-weight: normal;
}
#compromise h3 strong {
	font-size: 0.38167939em;
	text-transform: uppercase;
}
#compromise .button {
	width: 261px;
	height: 60px;
	border-radius: 15px;
	font-size: 1.5em;
	letter-spacing: 0.1em;
	margin-top: 8px;
	margin-bottom: 5px;
}
.c-main {
	gap: 53px;
}
.c-text {
	flex-basis: 483px;
	flex-grow: 0;
}
.c-text ul {
	list-style: none;
	padding-left: 0;
}
.c-text li {
	font-size: 1.75em;
	color: #fff;
	position: relative;
	padding-left: 53px;
	line-height: 1;
	margin-bottom: 43px;
}
.c-text li:before {
	content: '';
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	left: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../../images/checkmark.png);
	background-image: -webkit-image-set(url(../../images/checkmark.png) 1x, url(../../images/checkmark@2x.png) 2x);
}
.c-text li strong {
	color: var(--yellow);
	font-size: 1.14285714em;
}
#sizes {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../../images/gray-back.jpg);
	background-image: -webkit-image-set(url(../../images/gray-back.jpg) 1x, url(../../images/gray-back@2x.jpg) 2x);
	padding-bottom: 150px;
}
#sizes .swiper-pagination-progressbar {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(153, 153, 153, 1) 22%, rgba(153, 153, 153, 0.74) 80%, rgba(255, 255, 255, 0) 100%);
    width: 3px;
}
#sizes .swiper-pagination-progressbar-fill {
	background-color: transparent;
}
#sizes .swiper-pagination-progressbar-fill:after {
	content: '';
	display: block;
	width: 38px;
	height: 38px;
	left: -19px;
	position: absolute;
	bottom: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../../images/nav-dot.png);
	background-image: -webkit-image-set(url(../../images/nav-dot.png) 1x, url(../../images/nav-dot@2x.png) 2x);
}
#sizes h3 {
	font-weight: normal;
	font-size: 8.125em;
	line-height: 0.7;
	margin-bottom: 30px;
}
#sizes h3 strong {
	font-size: 0.49230769em;
	text-transform: uppercase;
}
#sizes .s-main {
	column-gap: 190px;
}
#sizes .s-slider {
	padding-left: 79px;
}
#sizes .s-slider:before {
	content: '';
	display: block;
	width: auto;
	height: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	position: absolute;
	z-index: -1;
	top: 0;
	background-color: var(--lightgray2);
}
#sizes .swiper {
    width: calc(100% - 58px);
    height: auto;
    margin-left: 58px;
    aspect-ratio: 1 / 1.15716753;
}
#sizes .s-text {
	flex-basis: 578px;
	flex-grow: 0;
}
#sizes .s-text p {
	font-size: 1.5em;
	line-height: 1.5;
	margin-bottom: 31px;
}
#sizes .s-text p:first-child {
	font-family: "bebas-neue-pro-semiexpanded", sans-serif;
	font-size: 2.75em;
	line-height: 1.18181818;
	margin-bottom: 27px;
}
#sizes .s-text .button {
	width: 200px;
	height: 60px;
	border-radius: 15px;
	letter-spacing: 0.1em;
	font-size: 1.5em;
}
#banner {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../../images/gray-back.jpg);
	background-image: -webkit-image-set(url(../../images/gray-back.jpg) 1x, url(../../images/gray-back@2x.jpg) 2x);
}
.banner-inner {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../../images/hero-back.jpg);
	background-image: -webkit-image-set(url(../../images/hero-back.jpg) 1x, url(../../images/hero-back@2x.jpg) 2x);
	border-radius: 5px;
	padding: 74px;
	gap: 26px;
}
.banner-text {
	flex-basis: 902px;
	flex-grow: 0;
	font-size: 1.875em;
	line-height: 1.5333;
}
.banner-cta {
	flex-shrink: 0;
}
.banner-cta .button {
	width: 298px;
	height: 60px;
	border-radius: 15px;
	font-size: 1.5em;
	letter-spacing: 0.1em;
}
#video {
	padding-top: 146px;
	padding-bottom: 167px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../../images/gray-back.jpg);
	background-image: -webkit-image-set(url(../../images/gray-back.jpg) 1x, url(../../images/gray-back@2x.jpg) 2x);
}
#video h3 {
	font-size: 7.5em;
	line-height: 0.4;
	font-weight: normal;
}
#video h3 strong {
	font-size: 0.36666667em;
}
#video ul {
	font-size: 1.4375em;
	line-height: 1.2173913;
	font-family: "bebas-neue-pro", sans-serif;
	list-style: none;
	padding: 0;
	margin-top: 31px;
}
#video ul li{
	position: relative;
	padding-left: 50px;
}
#video ul li + li {
	margin-top: 1em;
}
#video ul li:before{
	content: '';
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	left: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../../images/checkmark-blue.png);
	background-image: -webkit-image-set(url(../../images/checkmark-blue.png) 1x, url(../../images/checkmark-blue@2x.png) 2x);
}
#video .button {
	width: 261px;
	height: 60px;
	border-radius: 15px;
	font-size: 1.5em;
    letter-spacing: 0.1em;
}
#video .video-title {
	width: 472px;
	max-width: calc(100% - 30px);
}
#video .video-title p{
	font-size: 2.875em;
    line-height: 1.04347826;
	margin-bottom: 16px;
}
#reviews {
	position: relative;
	z-index: 1;
	padding-top: 121px;
	padding-bottom: 180px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../../images/rating-back.jpg);
	background-image: -webkit-image-set(url(../../images/rating-back.jpg) 1x, url(../../images/rating-back@2x.jpg) 2x);
}
#reviews .sub {
    width: 348px;
    height: 32px;
	mask-image: url(../../assets/images/bite.png);
	mask-size: auto;
	mask-clip: border-box;
	mask-position: bottom left;
	mask-repeat: no-repeat;
	z-index: 1;
}
#reviews:after {
	content: '';
	display: block;
	width: 100%;
	height: 53.3%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: linear-gradient(0deg, #000 0%, rgba(255, 255, 255, 0.00) 100%);
	background-blend-mode: multiply;
	pointer-events: none;
}
#reviews .animation {
	height: auto;
	min-width: 100%;
	bottom: 0;
	aspect-ratio: 1 / 0.271875;
}
#reviews h4 {
	margin-bottom: 170px;
}
@media screen and (min-width: 1920px) {
	.rate:nth-child(odd) .stars {
		right: inherit;
		left: -97px;
		top: -24px;
	}
	.rate:nth-child(even) .stars {
		right: -97px;
	}
}
@media screen and (min-width: 1276px) and (max-width: 1919px) {
	.rate:nth-child(odd) .stars,
	.rate:nth-child(even) .stars {
		left: inherit;
		right: 20px;
	}
}
@media screen and (min-width: 1276px) {
	.rate-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 95px;
	}
	.rate:nth-child(odd) {
		text-align: right;
	}
	.rate:nth-child(even) {
		margin-left: auto;
	}
	.rate.rate-2 {
		margin-right: 34px;
	}
	.rate.rate-3 {
		margin-left: 108px;
	}
	.rate:nth-child(odd) .rate-top {
		justify-content: flex-end;
		flex-direction: row-reverse;
	}
	.rate:nth-child(odd) .rate-checkmark {
		margin-left: inherit;
		margin-right: 19px;
	}
}
@media screen and (max-width: 1275px) {
	#compromise .c-main {
		margin-top: 50px;
	}
	#compromise .c-image {
		flex-basis: 60%;
	}
	#reviews {
		overflow: hidden;
	}
}
@media screen and (max-width: 1199px) {
	#sizes .s-main {
		column-gap: 60px;
	}
}
@media screen and (max-width: 991px) {
	#hero {
		padding-top: 119px;
		padding-bottom: 40px;
	}
	#hero .container {
		flex-wrap: nowrap;
		flex-direction: column;
		align-items: center;
	}
	#hero .hero-left {
		margin-right: 0;
	}
	#hero .hero-left,
	#hero .hero-right {
		max-width: 100%;
	}
	#hero .hero-left .button,
	#hero .hero-right .button {
		width: 246px;
		height: 43px;
		border-radius: 10px;
		font-size: 1.375em;
		margin-top: 0;
	}
	#hero .hero-bottom {
		margin-top: 62px;
		flex-wrap: wrap;
		column-gap: 40px;
		row-gap: 23px;
	}
	#compromise {
		padding-bottom: 60px;
	}
	#compromise .c-main {
		flex-direction: column;
	}
	#compromise .c-text {
		flex-basis: auto;
	}
	#sizes {
		overflow: hidden;
	}
	#sizes .s-main {
		flex-direction: column;
	}
	#sizes .s-slider  {
		width: 100%;
		padding-left: 0;
        display: flex;
        justify-content: center;
	}
	#sizes .swiper {
        width: 579px;
        height: inherit;
        margin-left: auto;
        aspect-ratio: inherit;
	}
	#sizes .swiper-pagination-progressbar {
		background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(153, 153, 153, 1) 22%, rgba(153, 153, 153, 0.74) 80%, rgba(255, 255, 255, 0) 100%);
		width: 100%;
		height: 3px;
		top: inherit;
		bottom: 0;
		display: none;
	}
	#sizes .swiper-pagination-progressbar-fill:after {
		left: inherit;
		right: 0;
		bottom: -19px;
	}
	#sizes .s-text {
        flex-basis: auto;
		text-align: center;
		margin-top: 30px;
	}
	#sizes .s-text .button {
		margin-left: auto;
		margin-right: auto;
	}
	.banner-inner {
		flex-direction: column;
		text-align: center;
	}
	.banner-text {
		flex-basis: auto;
	}
}
@media screen and (max-width: 767px) {
	#featured-products {
		padding-top: 63px;
		padding-bottom: 79px;
	}
	#featured-products .sticky {
		font-size: 72px;
		line-height: 0.8333;
		white-space: normal;
		top: 120px;
		margin-bottom: calc( -0.8 * var(--self-height));
        width: 310px;
        margin-left: auto;
        margin-right: auto;
	} 
	#featured-products .fp-top h4 {
		font-size: 2.125em;
		padding: 22px 15px;
		line-height: 0.67647059;
		border-radius: 70px;
	}
	#featured-products .button {
		width: 185px;
		height: 42px;
		border-radius: 10px;
		font-size: 1.375em;
		margin-top: 30px;
	}
	#featured-products .woocommerce ul.products,
	#featured-products .woocommerce ul.products li.product {
		margin-bottom: 0;
	}
	#shark-products {
		margin-top: 87px;
	}
	#compromise h3 {
		font-size: 4.6875em;
		line-height: 0.64285714;
	}
	#compromise h3 strong {
		font-size: 0.32em;
		line-height: 1.125;
	}
	#compromise .button {
		width: 185px;
		height: 42px;
		border-radius: 15px;
		font-size: 1.375em;
		margin-top: 15px;
		margin-bottom: 13px;
	}
	#compromise .c-main {
        max-width: calc(100% + 30px);
        margin: 0 -15px;
	}
	#compromise .c-image {
		flex-basis: auto;
		width: 100%;
	}
	#compromise .c-text {
        max-width: calc(100% + 30px);
        margin: 0 -15px;
	}
	.c-text ul::-webkit-scrollbar {
		display: none;
	}
	.c-text ul {
		margin-bottom: 0;
		display: flex;
		overflow-x: auto;
		column-gap: 20px;
		padding: 0 30px;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	.c-text li {
		font-size: 1.5em;
		width: 280px;
		padding: 28px 7px 0 55px;
		line-height: 1.1667;
		margin-bottom: 0;
		flex-shrink: 0;
		border: 1px solid #3CBACC;
		background-color: var(--darker-blue);
		min-height: 235px;
		border-radius: 20px;
	}
	.c-text li:before {
		width: 28px;
		height: 28px;
		top: 28px;
		left: 13px;
		background-size: contain;
	}
	#sizes {
		padding-top: 30px;
		padding-bottom: 90px;
	}
	#sizes h3 {
		font-size: 5em;
		line-height: 0.7;
		margin-bottom: 14px;
	}
	#sizes h3 strong {
		font-size: 0.5em;
	}
	#sizes .s-slider:before {
		top: 0;
	}
	#sizes .s-text p {
		font-size: 1.125em;
		line-height: 1.555;
		margin-bottom: 23px;
	}
	#sizes .s-text p:first-child {
		font-size: 2em;
		line-height: 1.125;
		margin-bottom: 28px;
	}
	#sizes .s-text .button {
		width: 185px;
		height: 42px;
		border-radius: 10px;
		font-size: 1.375em;
	}
	.banner-inner {
		padding: 53px 31px 63px;
	}
	.banner-text {		
		font-size: 1.375em;
		line-height: 1.45454545;
	}
	.banner-cta .button {
		width: 250px;
		height: 43px;
		border-radius: 11px;
		font-size: 1.375em;
	}
	#video {
		padding-top: 116px;
		padding-bottom: 85px;
	}
	#video h3 {
		font-size: 4.8125em;
		line-height: 0.4;
	}
	#video h3 strong {
		font-size: 0.41558442em;
	}
	#reviews h4 {
		margin-bottom: 63px;
	}
	#reviews .swiper {
		margin: 0 -15px;
	}
}

@media screen and (max-width: 567px) {
	#hero {
		background-image: url(../../images/hero-back-m.jpg);
		background-image: -webkit-image-set(url(../../images/hero-back-m.jpg) 1x, url(../../images/hero-back-m@2x.jpg) 2x);
	}
	#hero .animation {
		aspect-ratio: 1 / 2.17098446;
	}
	.banner-inner {
		background-image: url(../../images/banner-back-m.jpg);
		background-image: -webkit-image-set(url(../../images/banner-back-m.jpg) 1x, url(../../images/banner-back-m@2x.jpg) 2x);
	}
	#video .video-image {
		margin-top: 30px;
	}
	#video ul {
		font-size: 1.75em;
		line-height: 1.14285714;
		margin-top: 38px;
		margin-bottom: 34px;
	}
	#video ul li{
		padding-left: 35px;
	}
	#video ul li:before{
		width: 25px;
		height: 25px;
		background-size: contain;
	}
	#video .button {
		width: 240px;
		height: 43px;
		border-radius: 10px;
		font-size: 1.375em;
	}
	#video .video-title {
		width: 260px;
		max-width: calc(100% - 30px);
	}
	#video .video-title p{
		font-size: 1.625em;
		line-height: 1.11538462;
		margin-bottom: 9px;
	}
	#video .video-title img {
		width: 38px;
	}
	#reviews {
		background-image: url(../../images/rate-inner-back-m.jpg);
		background-image: -webkit-image-set(url(../../images/rate-inner-back-m.jpg) 1x, url(../../images/rate-inner-back-m@2x.jpg) 2x);
	}
	#reviews .animation {
		aspect-ratio: 1 / 2.17098446;
	}
}

@media screen and (max-width: 389px) {
	#hero .hero-bottom {
		column-gap: 34px;
	}
}