@font-face {
    font-family: "Nioicon";
    src: url("/fonts/Nioicon.eot");
    src: url("/fonts/Nioicon.eot#iefix") format("embedded-opentype"),url("/fonts/Nioicon.ttf") format("truetype"),url("/fonts/Nioicon.woff") format("woff"),url("/fonts/Nioicon.svg#Nioicon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block
}

body {font-family: 'Apercu', sans-serif; color: #000;}
p {font-weight: 300;}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #fff;
    color: #000;
  }
}

.black-band {background:#2a2d2f; color:#fff;}
.black-band, header .black-band a {text-transform:uppercase; font-size: 10px; letter-spacing:2px; color:#fff; padding: 10px 0}
.black-band .flex-row > div {width: 33.33%; min-width: 33.33%}
.black-band .text-center {text-align:center}

.no-scroll {height: 100vh; overflow-y: hidden;}
.no-scroll header {z-index: 9999;}

.wrapper {width: 85%; margin: 0 auto;}
.wrapper-sml {width: 100%;margin: 0 auto;max-width: 1400px;}

.grid-3 {display: grid;grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));}

.button-dark {background: #011b23; font-size: 12px; letter-spacing:1px; box-sizing: border-box;padding: 12px 15px;border: none;outline: none;color: #fff;font-family: inherit;font-weight: bold;display: inline-block; transition: 0.5s; cursor: pointer;}
.button-dark:hover {background: #0079c2;}

.button-light {background: #inherit;box-sizing: border-box;padding: 15px 15px;border: none;outline: none;color: #000;font-family: inherit;font-weight: bold;display: inline-block; transition: 0.5s; cursor: pointer;}
.button-light:hover {background: #0079c2; color: #fff;}

.custom-navigation {display: flex;}
.custom-next, .custom-prev {width: 40px; height: 40px;position: relative; display: block; background: #fff;transition: 0.5s;}
.custom-next img, .custom-prev img {width: 25px;height: 25px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.custom-prev img {transform: translate(-50%,-50%)rotate(180deg);}

.custom-next:hover, .custom-prev:hover {background: #f0f0f0;}

.hamburger {width: 70px;height: 25px;position: fixed;right: 25px;cursor: pointer;transition: 0.3s;z-index: 99999;display: none;top: 45px;}
.hamburger span {height: 2px; background: #000; width: 100%; position: absolute; opacity: 1; transition: 0.5s;}
.hamburger span:nth-child(1) {top: 0; width: 50%; }
.hamburger span:nth-child(2) {top: 12px;}
.hamburger span:nth-child(3) {bottom: 0; width: 50%; right: 0px;}

.hamburger.active {position: fixed;}
.hamburger.active span:nth-child(2) {opacity: 0; transform: rotate(90deg); top: 15px;}
.hamburger.active span:nth-child(1) {top: 0; transform: rotate(135deg); top: 15px; width: 100%;}
.hamburger.active span:nth-child(3) {bottom: 0; transform: rotate(225deg); top: 15px; width: 100%;}

.mobile-header {display: none; position: absolute; left: 25px; top: 45px;}

.mobile-nav {box-sizing: border-box;position: fixed;display: block;background: #181818;top: 0;z-index: 9999;transition: 0.5s;height: 100vh;width: 100vw;left: -110%;border-radius: 50%;padding: 25px;min-height: 100vh;min-height: -webkit-fill-available;max-width: 100%;}
.mobile-nav > a {position: relative; color: #1d1f1e; display: inline-block;z-index: 9999; font-size: 60px;font-weight: 600; transition: 0.3s;}
.mobile-nav > a:hover {color: #18463e;}
.mobile-nav > a > img {padding: 0; width: 100px; filter: invert(1);}

.mobile-nav::after { box-sizing: border-box; content: ""; position: absolute; display: block; background: #f2f2f2;top: 0; transition: 0.5s; height: 100vh; width: 100%; left: -120%; border-radius: 50%;}
.mobile-nav.active {left: 0; border-radius: 0; bottom: 0px;}
.mobile-nav.active::after {left: 0; border-radius: 0;}

.mobile-nav ul {position: relative; z-index: 999; list-style: none; margin: 0; display: flex; flex-direction: column;}
.mobile-nav ul li {width: 100%; order: 3;}
.mobile-nav ul li:first-child {order: 1;}
.mobile-nav ul li a, .mobile-nav span {color: #1d1f1e;text-decoration: none;font-size: 25px;line-height: 1.3;transition: 0.3s ease;display: inline-block;padding: 10px;border:none; outline: none; box-sizing: border-box; text-transform: uppercase;}

.mobile-nav > ul {height: 100%; overflow-y: scroll;}

.mobile-dropdown {max-height: 0px; overflow: hidden; transition: 0.5s;}
.mobile-dropdown li a {font-size: 20px!important; width: 100%;}
.mobile-dropdown li.drop-parent {box-sizing: border-box; border-bottom: 1px solid #0000; position: relative;}
.mobile-dropdown li.drop-parent::after {font-family: 'Nioicon'; content: ""; font-style: normal; font-size: 20px; position: absolute; right: 5px; top: 12px; z-index: -1}
.mobile-dropdown li.drop-parent ul {max-height: 0px; overflow: hidden; transition: 0.5s;}
.mobile-dropdown li.drop-parent ul li a {color: #000;}
.mobile-dropdown li.drop-parent.active ul {max-height: 1000px;}
.mobile-dropdown li.drop-parent.active {border-bottom: 1px solid #000;}

.collections-parent {order: 2!important; width: 100%; position: relative;}
.collections-parent.active .mobile-dropdown {max-height: 2000px;}
.collections-parent span {cursor: pointer;width: 100%}
.collections-parent::after {font-family: 'Nioicon'; content: ""; font-style: normal; font-size: 30px; position: absolute; right: 5px; top: 10px; z-index: -1; transition: 0.3s; transform: rotate(0deg);}
.collections-parent.active::after {transform: rotate(-180deg);}

.close-icon {padding: 25px; background: #000; left: 0px; top: 0; position: absolute; z-index: 9999; overflow: hidden; transition: 0.5s; transform: rotate(180deg); cursor: pointer; border: 0; outline: 0;}
.close-icon::before {content: ''; position: absolute; width: 2px; height: 30px; background: #fff; transform: rotate(45deg); top: 10px; transition: 0.5s;}
.close-icon::after {content: ''; position: absolute; width: 2px; height: 30px; background: #fff; transform: rotate(-45deg); top: 10px; transition: 0.5s;}

.close-icon:hover {background: #0079c2;}
.close-icon:hover::before {transform: rotate(-135deg) !important;}
.close-icon:hover::after {transform: rotate(-225deg)!important;}


.my-details-card strong {font-size: 13px;letter-spacing:0px; opacity:0.6}
.my-details-card p {margin: 5px 0}
.my-details-card .row {margin-bottom: 20px;}

/* HEADER */

header {box-sizing: border-box; width: 100%; position: sticky; top: 0px; z-index: 999; border-bottom: 1px solid #011b2300; transition: 0.5s; user-select: none;}
header a, header .parent {color: #000; font-size: 15px; padding: 40px 15px; text-transform: uppercase; line-height: 20px; cursor: pointer;}
header .parent:first-of-type {padding-left: 0px; position: relative;}
header .parent::after {position: absolute;content: "";display: block;width: 10px;height: 10px;background: #f7f7f7;transform: rotate(-45deg);left: 40%;bottom: -5px; transition: 0.3s; opacity: 0;}
header .parent.active::after {opacity: 1;}
header a.account-login {padding: 0px; display: flex; align-items: center; font-size: 13px; margin-top: 3px;}
header a.account-login > img {width: 20px; margin-right: 5px;}
header .logo {width: 100px; position: absolute!important; left: 50%; transform: translate(-50%); padding: 0px;}
header .logo img {filter: invert(1);}
header .wrapper > div {display: flex; align-items: center;}
header .wrapper > div:nth-child(3) {font-size: 15px;}
header .form-field {margin-right: 25px; margin-bottom: 0px !important;width: auto !important; margin-top: 3px;}
header .form-field .check-label {margin: 0; display: flex;}
header .form-field label {color: #000; display: flex; flex-direction: row-reverse; user-select: none; text-transform: uppercase; font-size: 13px; align-items: center;}
header .form-field input {height: 20px;width: 22px;box-sizing: border-box;border: 2px solid #fff;outline: 1px solid #000;-webkit-appearance: none; margin-right: 15px; transition: 0.3s; padding: 0px;}
header .form-field input:checked {background: #32d59a;}

header.scroll .menu-wrapper { background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); }

.menu-wrapper {background: #fff; width: 100%;}

.desktop-search {margin-right: 20px; cursor: pointer; margin-top: 3px;}
.desktop-search img {width: 20px;}

.desktop-menu-cart {margin-left: 20px; position: relative;}
.desktop-menu-cart a {padding: 0px; display: inline-block; top: 3px;}
.desktop-menu-cart img {height: 20px;}
.desktop-menu-cart span {position: absolute; top: 3px; right: -5px;}
.desktop-menu-cart span p {border-radius: 100%; background: #ed1c24; width: 10px; height: 10px; font-size: 0px;}

.region-select {position: relative; display: block; min-width: 175px; height: 40px;}
.region-select ul {margin-left: 15px;padding: 5px;border-radius: 5px; transition: 0.3s; background: transparent; position: absolute; top: 0px; list-style: none; overflow: hidden; right: -10px;}
.region-select li {height: 0px; opacity: 0; transition: 0.3s; margin-bottom: 10px; z-index: -1; position: relative; margin-bottom: 0px;}
.region-select li a {display: flex; padding: 0px; align-items: center; font-weight: 300; padding-right: 25px; position: relative; transition: 0.3s; font-size: 13px;}
.region-select li a figure {width: 30px;height: 30px;border-radius: 50%;overflow: hidden;margin-right: 10px;}
.region-select li a figure img {width: 100%; height: 100%; object-fit: cover;}

.region-select ul:hover {background: #000;}
.region-select ul:hover li {height: 100%; opacity: 1; z-index: 1; margin-bottom: 10px;}
.region-select ul:hover li:last-child {margin-bottom: 0px;}
.region-select ul:hover li a {color: #fff;}

.region-select li.active {display: block; height: 100%; opacity: 1; z-index: 1;}
.region-select li.active a {font-weight: 500; height: auto;}
.region-select li.active a::after {content: ""; display: block; background: url('/img/arrow-down.svg'); position: absolute; top: 50%; transform: translateY(-50%);width: 13px;height: 8px;background-size: contain;background-repeat: no-repeat;right: 5px; transition: 0.3s; opacity: 1; filter: invert(1); left: auto;}
.region-select ul:hover li.active a::after {opacity: 0;}

/* MENU */

.mm-list > li > a {text-transform: uppercase;}

.dropdown-menu {display: block; position: absolute; margin: 0; top: 140px; background: #f7f7f7; color: #000; box-sizing: border-box; text-transform: uppercase; box-shadow: 0px 10px 10px #0004; opacity: 1; transition: 0.3s; visibility: hidden; left: 6.5%; overflow: hidden; z-index: 99999; height: auto; max-height: 0px;}
.dropdown-menu ul {margin: 0;list-style: none;column-count: 2; padding: 50px}
.dropdown-menu ul li {font-size: 13px;width: 150px; cursor: pointer;}
.dropdown-menu ul li a, .dropdown-menu ul li span {padding: 5px 0; display: block; font-size: 15px;}
.dropdown-menu ul li:first-of-type {margin-top: 0px;}
.dropdown-menu.drop-active {opacity: 1; visibility: visible; max-height: 1000px;}

.dropdown-menu ul li.drop-parent ul {position: absolute; width: 100%; max-width: 0%; background: #000; color: #fff; height: 100%; top: 0; left: 0; display: flex; flex-direction: column; padding: 50px 0px; box-sizing: border-box; opacity: 0; transition: 0.3s; overflow: hidden;}
.dropdown-menu ul li.drop-parent.active ul {max-width: 100%; opacity: 1; padding: 50px 40px;}
.dropdown-menu ul li.drop-parent.active ul li {width: auto;}

li p.close {font-weight: bold; text-transform: uppercase; margin-bottom: 10px;}

li.drop-parent a {color: #000; padding: 0px;}
li.drop-parent ul li a {color: #fff; }
li.drop-parent ul {z-index: 9;}

.show-search {position: fixed; z-index: 99; width: 100%; background: #2a2d2f; top: -100%; opacity: 0; transition: 0.5s;}
.show-search.active {top: 141px; opacity: 1;}
.show-search button {background: none; border: none; outline: none; width: 50px; height: 50px; box-sizing: border-box; padding: 15px; position: absolute; right: 0px; top: 0px;}
.show-search form {margin: 0;}

.show-search input {border-top:1px solid #2a2d2f; border-left:none; color:#2a2d2f; font-size: 14px; background:#fff}

#product-suggestions-rows {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));grid-gap: 30px;padding: 0 50px; }

#product-search-container .view-all {display: block;width: 100%;text-align: center;padding: 15px;border: none;text-transform: uppercase; background:#2a2d2f; color:#fff; font-size: 12px; letter-spacing:2px}


.product-rows a {text-decoration: none; color: #000; margin: 25px 0; border: 1px solid #fff; transition: 0.5s;}
.product-rows a figure {background: #f7f7f7;height: 350px;padding: 20px;box-sizing: border-box;position: relative;transition: 0.5s; overflow: hidden;}
.product-rows a figure img {mix-blend-mode: multiply;position: relative;top: 50%;transform: translate(-50%,-50%);left: 50%; object-fit: contain;}
.product-rows a figure .flex-row {position: absolute;bottom: 20px;width: 100%;left: 0px;padding: 0 20px;box-sizing: border-box;}
.product-rows a figure .flex-row .button-dark {padding: 8px 15px; opacity: 0; transition: 0.5s;}
.product-rows a article {position: relative; padding-top: 20px; box-sizing: border-box; border-top: 1px solid #fff; overflow: hidden; transition: 0.5s; min-height: 50px;}
.product-rows a article h2 {text-transform: uppercase; font-size: 18px; font-weight: 500; margin-bottom: 5px; display: block;}
.product-rows a article span {font-size: 18px; font-weight: 300; display: inline-block;}

.product-rows a article .colour-row p {font-size: 15px; color: #717171; margin-right: 10px; margin-top: 5px;}
.product-rows a article .hover-details {position: absolute; top: 125%; background: #fff; transition: 0.3s; box-sizing: border-box; padding-top: 15px;padding-left: 15px;height: 100%; width: 100%;}
.product-rows a article .hover-details p {font-size: 15px; font-weight: 400; text-transform: uppercase; margin-bottom: 5px;}

.price-row {position: relative; opacity: 0; bottom: -100px; transition: 0.3s; width: 100%; display: flex; justify-content: space-between; align-items: center; cursor: pointer;}
.price-row .button-dark {padding: 10px 20px; transition: 0.3s; border: 1px solid #011b23;}
.price-row .button-dark:hover {background: #ebebeb; color: #000;}
.price-row > div {display: flex; align-items: center;}
.price-row > div input {width: 20px;text-align: center;border: none;outline: none;font-weight: 500;font-size: 17px;}

.product-rows a:hover {border: 1px solid #000;}
.product-rows a:hover figure {background: #fff;}
.product-rows a:hover article {border-top: 1px solid #000;}
.product-rows a:hover article .hover-details {top: 0%;}
.product-rows a:hover .price-row {bottom: 35px; opacity: 1;}
.product-rows a:hover figure .flex-row .button-dark {opacity: 1;}

.category-item a article {position: relative; padding-top: 20px;}
.category-item a article h2 {text-transform: uppercase; font-size: 18px; font-weight: 500; margin-bottom: 5px; display: block;}
.category-item a article > span {font-size: 18px; font-weight: 300; display: inline-block; margin-right: 5px;}
.category-item a article .hover-details {position: absolute; top: 125%; background: #fff; transition: 0.3s; box-sizing: border-box; padding-top: 15px;padding-left: 15px;height: 100%; width: 100%;}
.category-item a article .hover-details p {font-size: 15px; font-weight: 400; text-transform: uppercase; margin-bottom: 5px;}
.category-item a:hover article .hover-details {top: 0%;}

/* CONTENT */

.login-banner {background: #ebebeb; padding: 20px 0; margin-bottom: 25px;}
.login-banner p {font-size: 16px; text-transform: uppercase; line-height: 1.5; user-select: none;}

.home-banner {margin: 0 25px 25px; box-sizing: border-box; height: 80vh;overflow: hidden; position: relative;}
.home-banner > div, .home-banner figure {height: 100%;}
.home-banner img {width: 100%; height: 100%; object-fit: cover;}
.home-banner p {position: absolute; bottom: 50px; right: 50px; color: #fff; text-transform:uppercase; letter-spacing:2px; font-size: 12px;}

.inner-banner {margin: 0 25px 25px; box-sizing: border-box; height: 60vh;overflow: hidden; position: relative;}
.inner-banner article {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.inner-banner article h1 {color: #fff; font-size: 45px;}
.inner-banner figure {height: 100%;}

.inner-banner.standard {background: #000; height: 150px;}

.banner {margin: 0 25px 25px; box-sizing: border-box; background: #000; display: flex; justify-content: space-between; overflow: hidden;}
.banner article {padding: 100px 7.5%;margin-left: -25px;width: 35%; position: relative; min-height: 25vh;}
.banner article > img {max-width: 250px; margin-bottom: 35px; max-height: 75px;}
.banner article p {color: #fff; line-height: 1.5; font-size: 17px;}
.banner article p strong {display: block; margin-bottom: 35px;}
.banner figure {width: 50%; position: relative;}
.banner figure::before {content: ''; display: block; position: absolute; top: 0; left: 0; width: 30%; height: 100%; z-index: 1; background: linear-gradient(90deg,rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%);}
.banner figure img {height: 100%; object-fit: cover; position: absolute;}

.logo-scroll {margin: 25px; box-sizing: border-box; padding: 25px 0; position: relative; overflow: hidden;}
.logo-scroll .swiper-wrapper { transition-timing-function : linear;}
.logo-scroll .swiper-slide img {mix-blend-mode: multiply;height: 45px;width: 100%;object-fit: contain; filter: grayscale(1);}

.logo-scroll::before,.logo-scroll::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60px; width: 50px; z-index: 9; box-shadow: 60px 0px 30px 30px white; background: linear-gradient(to left, rgba(255, 255, 255, 0), white);}

.logo-scroll::after {box-shadow: -60px 0px 30px 30px white; right: -60px; left: auto; background: linear-gradient(to right, rgba(255, 255, 255, 0), white);}

.dark {background: #000; padding: 100px 0 75px;}
.dark h2 {color: #fff;font-weight: bold;font-size: 20px;margin-bottom: 50px;text-align: center;}
.dark .logo-scroll {margin: 0px;}
.dark .logo-scroll .swiper-slide img {filter: grayscale(1) invert(1) brightness(1.5);}

.dark .logo-scroll::before,.dark .logo-scroll::after {box-shadow: 60px 0px 30px 30px black; background: linear-gradient(to left, rgba(255, 255, 255, 0), black);}
.dark .logo-scroll::after {box-shadow: -60px 0px 30px 30px black; background: linear-gradient(to right, rgba(255, 255, 255, 0), black);}

.brand-highlights {margin: 25px;}
.brand-highlights h1 {width: 100%; text-align: center; color: #180a0650; font-weight: 300; font-size: 20px;padding: 25px 0 50px;}
.brand-highlights img {transition: 0.3s;}

.brand-highlights a {display: block;}
.brand-highlights a figure, .brand-highlights .grid-3 > figure {display: block; height: 0; padding-bottom: 100%; position: relative;}
.brand-highlights figure img {position: absolute;}

.login-container {min-height: 75vh;}

.login-panel {width: 500px; margin: 25px auto;}
.login-panel p.fieldMessage {color: #61161f; background-color: #fdd; padding: 10px;}
.login-panel .button-row {display: flex; margin-bottom: 25px;}
.login-panel .button-row > a {width: 50%; box-sizing: border-box; border: 1px solid #000; text-align: center; padding: 20px; text-transform: uppercase; transition: 0.3s; background: #fff; user-select: none; cursor: pointer;}
.login-panel .button-row > a:first-child {border-right: none;}

.login-panel .button-row > a.active {color: #fff; background: #000;}

.login-panel h1 {margin-bottom: 25px;}
.login-screen > p {margin-bottom: 25px;}

.login-container p {margin-bottom: 25px; line-height:1.5}

.login-panel .content-container {display: none;}
.login-panel .content-container.active {display: block;}

.login-screen.reset {padding: 20px; border: 1px solid #222; margin-top: 3vw}
.login-screen.reset h1 {text-align:center; font-size: 20px;}

.login-panel .button-dark {background: #000; text-transform: uppercase; font-weight: normal; width: 100%; text-align: center;}

.account-nav {background: #e7e9f0; display: flex; justify-content: center; position: sticky; top: 100px; z-index:9}
.account-nav a {padding: 25px; transition: 0.3s; color: #000;}
.account-nav a:hover {color: #fff; background: #000;}

.account-main-container, .section-account {padding: 50px 0;}
.account-main-container .wrapper-sml, .section-account.wrapper-sml {max-width: 1200px; width: 85%;}
.account-main-container h1, .section-account h1 {font-size: 14px; font-weight: 500; margin-bottom: 15px; letter-spacing:2px; text-transform:uppercase; opacity:0.6}
.account-main-container h2, .section-account h2 {font-size: 17px; font-weight: 600; margin-bottom: 25px}

.section-account .box-wrapper {margin-bottom: 15px;}

.account-main-container .flex-row {align-items: flex-start;}

.standard-content {padding: 100px 0;}
.standard-content .wrapper-sml {display: flex; justify-content: space-between;}
.standard-content article,.standard-content figure, .standard-content .contact-wrapper {width: 47%;}
.standard-content h2 {font-weight: bold; font-size: 20px; margin-bottom: 25px;}
.standard-content article p {line-height: 1.5; margin-bottom: 15px;}

.standard-content .wrapper-sml.grids .grid {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 5vw;}

.standard-content .wrapper-sml.grids {display: block}
.standard-content .wrapper-sml.grids article, .standard-content .wrapper-sml.grids figure {width: 100%;}
.standard-content .wrapper-sml.grids figure {height: 0; padding-bottom: 75%; position: relative;}
.standard-content .wrapper-sml.grids figure img {position: absolute;}

.standard-content .wrapper-sml.grids .grid {margin-bottom: 5vw; align-items: center;}
.standard-content .wrapper-sml.grids .grid:nth-child(2n+2) article {order: 2;}

.standard-content .wrapper > p {margin-bottom: 25px;}

.technical-info {position: relative; width: 25%!important;}
.technical-info .swiper-pagination-bullet {background: none; width: 100%; height: auto; text-align: left; margin: 0 !important; padding: 5px 0px;}

.technical-slider-wrapper {width: 60%;}


.technicalSwiper p {line-height: 1.5; margin-bottom: 15px;}
.technicalSwiper ul {margin: 0 0 25px; list-style: none;}
.technicalSwiper li {line-height: 1.5; margin-bottom: 5px; font-weight: 300; margin-left: 20px; position: relative;}
.technicalSwiper li::before {content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); background: #000; width: 10px; height: 1px; left: -20px;}
.technicalSwiper h3 {font-weight: bold; font-size: 20px; margin-bottom: 25px;}

.technicalSwiper table td {vertical-align: middle; padding: 10px 25px; box-sizing: border-box; line-height: 1.5;}
.technicalSwiper table td:first-child {border-right: 1px solid #eee;}
.technicalSwiper tr {border: 1px solid #eee;}

.aboutSwiper {width: 70%; margin: 0 auto;}
.aboutSwiper .swiper-pagination {position: relative; left: 0px; bottom: auto; display: flex; margin-bottom: 50px; justify-content: center;}
.aboutSwiper .swiper-pagination-bullet {position: relative; font-size: 14px; letter-spacing: 1px;}
.aboutSwiper .swiper-pagination-bullet::after {content: ""; display: block; width: 0%; background: #000; height: 1px; position: absolute; bottom: 0px; left: auto; right: 0%; transition: 0.5s;}
.aboutSwiper .swiper-pagination .swiper-pagination-bullet {width: auto !important; height: auto!important; background: none; transition: 0.5s; margin: 0 10px;}
.aboutSwiper .swiper-pagination .swiper-pagination-bullet:first-child {margin-left: 0px;}

.aboutSwiper .swiper-pagination-bullet-active::after {width: 100%; left: 0%; right: auto;}

.aboutSwiper figure {height: 60vh;}

.australia {display: none;}

.account-main-container > .wrapper-sml > article {width: 55%;}

.small-container {width: 35%!important;}
.small-container a {border-bottom: 1px solid #000;}

.small-container .grey-container h3 {margin-bottom: 20px; display: flex; justify-content: space-between;}
.small-container .grey-container h3 .active {color: #2dd284; position: relative; display: inline-block; line-height: 27px;}
.small-container .grey-container h3 .inactive {color: #ed1c24; position: relative; display: inline-block; line-height: 27px;}

.dark-container {background:#222; padding: 20px; color:#fff; border-radius:2px;}
.dark-container h3 {color:#fff; position:relative; display: flex; justify-content:space-between; margin-bottom: 15px;}
.dark-container .button-dark {background:#0079c2;}
.dark-container h3 > div {display:flex; position:relative}
.dark-container h3 > div.active {font-weight: 700; text-transform:uppercase; font-size: 13px; letter-spacing:1px; background:#b3fad9; padding: 5px 10px; border-radius: 20px; color:#222; line-height: 16px;}

.circle {width: 15px;height: 15px;background: #2dd284;border-radius: 50%;position: absolute;top: 50%;left: -27px; transform: translateY(-50%);}
.active .circle {background: #2dd284;}
.inactive .circle {background: #ed1c24;}

.pay-container .payment-pop {position: fixed;top: 0px;width: 100vw;left: -150%;z-index: 9999;transition: 0.3s;z-index: 9999;height: 100vh;}
.pay-container.active .payment-pop {left: 0px;}
.pay-container.active .payment-pop::after {position: fixed; content: ""; display: block; background: #0005; height: 100vh; width: 100vw; max-width: 100%; left: 0px; top: 0px;}
.payment-pop.close-icon {position: fixed;}

.payment-wrapper {top: 50%;left: 50%;position: absolute;transform: translate(-50%,-50%);background: #fff;z-index: 9;width: 40%;box-sizing: border-box;height: auto;}
.payment-wrapper article {padding: 75px;box-sizing: border-box; user-select: none;}
.payment-wrapper article form {margin-bottom: 0px;}
.payment-wrapper article p,.terms-wrapper article li {margin-bottom: 10px;}
.payment-wrapper h2 {font-size: 20px; font-weight: 500; margin-bottom: 15px;}
.payment-wrapper input {width: 100%!important; background: #fff!important; border: 1px solid #000!important; outline: none!important; padding: 15px 10px!important; font-size: 15px!important; font-family: inherit!important; font-weight: normal!important; box-sizing: border-box;}

.ringring {border: 3px solid #2dd284; -webkit-border-radius: 50%; height: 29px; width: 29px; position: absolute; left: -34px; top: -1px; -webkit-animation: pulsate 1s ease-out; -webkit-animation-iteration-count: infinite; opacity: 0.0; box-sizing: border-box;}

@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}


.buy-button.active .successring {border: 3px solid #2dd284; -webkit-border-radius: 30px; height: 30px; width: 30px; position: absolute; left: -4px; top: -3px; -webkit-animation: successpulse 1s ease-out; opacity: 0.0}

@-webkit-keyframes successpulse {
    40% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

.small-container .grey-container h3:last-of-type {margin-bottom: 0px;}

.more-options {padding: 2px 5px 6px; display: inline-block; border: 1px solid transparent; box-sizing: border-box; line-height: 1; background: transparent; transition: 0.5s; cursor: default; position: relative; border-radius: 3px;}
.more-options span {width: 4px; height: 4px; background: #222; border-radius: 50%; border: 1px solid #000;display: inline-block;}
.more-options:hover {background: #f7f7f7;}

.expanded-options {position: absolute;right: -1px;top: 24px;width: 150px;text-align: center;background: #fff; display: none; z-index: 9; border-radius:3px;}
.expanded-options p {padding: 10px;display: block;border: 1px solid #000; border-bottom: none; background: #fff; transition: 0.5s;}
.expanded-options p:hover {background: #f7f7f7;}
.expanded-options p:last-child {border-bottom: 1px solid #000;}

.more-options:hover {border-radius: 3px 3px 0px 0px;}
.more-options:hover .expanded-options {display: block;}

.product-item .quantity-block {opacity: 1; transition: 0.5s; width: 95px;}
.product-item:hover .quantity-block {opacity: 1;}

.js-qty {position:relative;}

.ajaxcart__qty-adjust, .js-qty__adjust {    cursor: pointer;   position: absolute;   display: block;   top: 0;  bottom: 0;   border: 0 none;  padding: 0 8px;  background: 0 0;   text-align: center; overflow: hidden;
 -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;  user-select: none;}
.ajaxcart__qty input, .js-qty input { display: block; background: 0 0;  text-align: center;  width: 100%; padding: 5px 25px; margin: 0;}

.js-qty__adjust--minus {left: 0;border-right: 1px solid #222;}
.js-qty__adjust--plus {right:0;  border-left: 1px solid #222;}

.js-qty__adjust--minus span,.js-qty__adjust--plus span {color: #000;}

footer {padding: 40px 0; background: #000;color: #fff;}
footer a {color: #fff;}
footer .footer-top {width: 100%; padding-bottom: 35px; border-bottom: 1px solid #ffffff35;}
footer .footer-top article a {padding: 10px; font-weight: 300; font-size: 16px;}
footer .footer-top article a.active {font-weight: 500;}
footer .footer-top article a:first-of-type {padding-left: 0px;}

footer .footer-mid {border-bottom: 1px solid #ffffff35; width: 100%;}
footer .footer-mid article {width: 40%; padding: 50px 0;}
footer .footer-mid article p {line-height: 1.5; font-size: 16px;}
footer .footer-mid article p span {display: block;margin-bottom:30px;}

footer .footer-mid article.links {text-align: right;}
footer .footer-mid article.links ul {list-style: none; margin: 0;}
footer .footer-mid article.links ul li:first-child {font-weight: 500; margin-bottom: 15px}
footer .footer-mid article.links ul li {font-weight: 300; margin-bottom: 5px;}

footer .brands-row {padding: 40px 0; width: 100%; position: relative; overflow: hidden;}
footer .brands-row a {display: inline-block; font-weight: 300; text-transform: uppercase; font-size: 16px; text-align: center; width: 100%;}

footer .brands-row .brandScroll {width: 85%;}

footer .brands-row::before,footer .brands-row::after { content: ""; position: absolute; top: 0; bottom: 0; left: 20px; width: 50px; z-index: 9;
box-shadow: 60px 0px 30px 30px black; background: linear-gradient(to left, rgba(0, 0, 0, 0), black);}

footer .brands-row::after {box-shadow: -60px 0px 30px 30px black; right: 20px; left: auto; background: linear-gradient(to right, rgba(0, 0, 0, 0), black);}

footer .brands-row .swiper-wrapper { transition-timing-function : linear;}


.copyright {width: 100%;}
.copyright p,.copyright a {color: #fff4;}

.filter {background: #000; color: #fff;}
.filter h4 {display: block; width: 150px;}
.filter select {}
.filter .wrapper {display: flex; max-width: 500px; width: 100%; margin: 0 auto; align-items: center; padding: 10px 0px;}

.filter-tag {display: inline-block; position: relative; box-sizing: border-box; padding: 5px 10px; margin: -10px 0 20px; background: #e7e9f0; font-size: 12px; text-transform: uppercase;}

.download {display:block; position:absolute; right:10px; top:10px;}
.download svg { transform: rotate(180deg);}
h5 {text-transform:uppercase; letter-spacing:2px; margin: 30px 0; font-size: 14px; color:#0079c2}
.files-group {display: grid;grid-template-columns: repeat(3, 1fr); /* Three items in a row */gap: 20px; /* Space between the items */margin-top: 30px;}
.file-item {border: 1px solid #dbdfea; padding: 20px; border-radius: 3px; position:relative}
.file-item:hover {background:rgba(128, 145, 167, 0.15)}
.file-icon-type {width: 50px; border: 1px solid rgba(128, 145, 167, 0.15);  border-radius: 5px;}
.file-name-text {display: flex; align-items:center}
.file-name-text a {display: block; margin-left: 20px;}
.nk-file-desc {list-style-type: none; padding: 0;margin:10px 0 0 0;}
.nk-file-desc li {display:inline-block; opacity:0.6; font-size: 12px; margin-right: 15px}

.specifications { margin-bottom:20px; margin-top: 20px !important;
}

.specifications .accordion {
          overflow: hidden; border-top: 1px solid #222;
  }

.specifications.accordion article {padding: 20px 0}

.specifications  .accordion-header {
   border-bottom: 1px solid #222;
    padding: 10px 0px;
    margin: 0;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
  }

.specifications .accordion-header {margin-bottom:0 !important; font-weight:bold; position:relative}
.specifications .accordion-header:after {content:'+'; display:block; position: absolute; right:0; top: 8px; font-weight:normal; font-size:17px;}

.accordion-header.active:after {content:'-'; display:block; position: absolute; right:0; top: 8px; font-weight:normal; font-size:17px;}

.specifications  .accordion-header:hover {opacity:0.4}

.specifications  .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease;
    opacity: 0; padding:0px;
  }
  .accordion.active .accordion-content {

    opacity: 1;
  }

.accordion.active .accordion-header {border-bottom:1px solid #fff}


/* ADIDAS */

.adidas .intro {margin: 100px auto;}
.adidas .intro article {max-width: 690px; text-align: center; margin: 0 auto;}
.adidas .intro article h1 {display: block; margin-bottom: 10px; color: #0005; text-transform: uppercase; letter-spacing: 1px;}

.adidas .grid {display: grid; grid-template-columns: 1fr 1fr;}
.adidas .grid a {position: relative;}
.adidas .grid figure {position: relative; height: 0; padding-bottom: 75%; width: 100%;}
.adidas .grid figure img {position: absolute; top: 0; left: 0;}
.adidas .grid h3 {text-transform: uppercase; font-size: 14px; letter-spacing: 1px; font-weight: 500; display: block; position: absolute; bottom: 25px; left: 30px; color: #fff;}

.adidas .copyright p {margin-top: 40px;}

.adidas .standard-content {padding: 0; margin: 100px auto;}
.adidas .shop-main {margin: 0px 25px;}
.adidas .shop-main h2 {text-transform: uppercase; letter-spacing: 1px; font-weight: normal; font-size: 14px; display: block; margin-bottom: 5px;}
.adidas .product-item {margin-bottom: 0;}

.adidas .footer-logo {display: block; width: 100px;}

.adidas footer .footer-mid article {width: auto;}
.adidas footer .footer-mid article:first-child {width: 90%; max-width: 800px;}