/* Déclaration @font-face pour la police "Roboto" */

@font-face {
    font-family: "Roboto";
    src: url("../assets/font/RobotoCondensed-Bold.ttf");
}


/* Styles pour l'en-tête (header) */

header {
    width: 100%;
    height: 60px;
    background-image: url("../../images/index/block-text-1.jpg");
    background-repeat: no-repeat;
    background-size: auto;
    /* Ajustez cette valeur selon vos besoins */
    background-position-y: 30%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    font-family: "Roboto", sans-serif;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.55);
    position: relative;
    z-index: 1;
}

.main-nav__list li {
    padding: 0;
    margin: 0;
}

.main-nav__list li a {
    display: flex;
    align-items: center;
    /* Aligne le texte et l'image verticalement */
    text-decoration: none;
}

.main-nav__list li a img {
    margin-right: 8px;
    /* Espacement entre l'icône et le texte */
    vertical-align: middle;
    /* Aligne les images verticalement */
}

.nav-icon {
    vertical-align: middle;
    /* Aligne les images verticalement avec le texte */
    margin-right: 5px;
    /* Espace entre l'icône et le texte */
}


/* Logo de l'en-tête */

.logo2 {
    max-width: 100%;
    height: auto;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 25%;
    left: 60%;
    transform: translate(-50%, -50%);
    z-index: 2;
    animation: pulsate 2s infinite;
}

@keyframes pulsate {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

img {
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

img:hover {
    transform: scale(1.1);
    filter: brightness(1.2);
}


/* Styles pour la partie d'information sous l'en-tête */

header .info {
    width: 100%;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.145);
    display: flex;
    justify-content: center;
    color: #fff;
}


/* Styles pour le contenu de l'information sous l'en-tête */

header .info .content {
    width: 90%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* Styles pour les éléments du serveur dans l'information sous l'en-tête */

header .info .content .info-server {
    width: 10%;
    height: 100%;
    font-size: 0.7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    text-decoration: underline;
    cursor: pointer;
}

header .info .content .info-server:hover {
    color: #9bc12a;
}


/* Styles pour les éléments du compte dans l'information sous l'en-tête */

header .info .content .account {
    width: 20%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.221);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

header .info .content .account a {
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    width: 50%;
    height: 100%;
}

header .info .content .account a .case {
    width: 100%;
    height: 100%;
    font-size: 0.8rem;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
}

header .info .content .account a .case img {
    width: 25px;
    height: 25px;
    margin-left: 10px;
}

header .info .content .account a:nth-child(1) {
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}

header .info .content .account a:hover {
    color: #9bc12a;
    background-color: #3d3c5d;
}


/* Styles pour la partie du menu dans l'en-tête */

header .menu {
    width: 100%;
    height: 79px;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Styles pour le contenu du menu dans l'en-tête */

header .menu .content {
    width: 90%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* Styles pour le logo du menu dans l'en-tête */

header .menu .content .logo img {
    width: 100%;
}


/* Styles pour la navigation dans le menu de l'en-tête */

header .menu .content .nav {
    width: 80%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

header .menu .content .nav a {
    color: #fff;
    text-decoration: none;
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

header .menu .content .nav a .case {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
}

header .menu .content .nav a .case img {
    width: 25px;
    height: 25px;
    padding-right: 10px;
}

header .menu .content .nav a:hover {
    color: #9bc12a;
}


/* Styles pour le menu du compte dans l'en-tête (à partir de l'écran large) */

@media (min-width: 992px) {
    .nav-account {
        display: none;
    }
    .nav-account {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
        margin-left: auto;
        width: auto;
    }
    .nav-account .nav-account__item {
        font-size: 9px;
        line-height: 1.5em;
        text-transform: uppercase;
        font-weight: 700;
        font-family: montserrat, sans-serif;
    }
    .nav-account .nav-account__item::before {
        content: "\2F";
        display: inline-block;
        color: #6b6d70;
        margin: 0 16px 0 14px;
    }
    .nav-account__item img {
        vertical-align: middle;
        /* Assure l'alignement vertical avec le texte */
        margin-right: 5px;
        /* Espacement entre l'icône et le texte */
    }
    .nav-account .nav-account__item>a {
        color: #fff;
        transition: all 0.3s ease;
        display: inline-block;
        height: 48px;
        line-height: 48px;
    }
    .nav-account .nav-account__item>a:hover {
        color: #ffb347;
    }
    .nav-account .nav-account__item>a:focus {
        outline: none;
    }
    .nav-account .nav-account__item>a .highlight {
        color: #ffb347;
    }
    .nav-account .nav-account__item:first-child::before {
        display: none;
    }
    .nav-account .nav-account__item.has-children {
        position: relative;
    }
    .nav-account .nav-account__item.has-children::after {
        content: "";
        display: inline-block;
        margin-left: 9px;
        width: 6px;
        height: 4px;
        background-image: url(data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA2IDQnPjxwYXRoIHRyYW5zZm9ybT0ndHJhbnTsYXRlKC01ODYuMTU2IC0xMDQ3LjI4KScgZmlsbD0nI2ZmZicgZD0nTTU4Ni4xNzEsMTA0OGwsMC43MDgtLjcxLDIuODI4LDIuODMsMC43MDctLjcxW20xMC40NjIsNS4yNjMgMTEuODcyLDEwLjM2MyA1LjI2Myw5LjM1IDkuMzUsNS4yNjQsMTAuNTU3IDUuMjY0LDEwLjM2MywxMC40NjIsNS4yNjMiIHN0eWxlPSdmaWxsOmJsYWNrOyIvPjwvc3ZnPjwvc3ZnPjwvc3ZnPgo=);
        background-size: 6px 4px;
        background-repeat: no-repeat;
        background-position: center center;
        top: -2px;
        position: relative;
    }
}


/* Styles pour la section d'en-tête secondaire */

.header__secondary {
    background-color: #1e2024;
    display: none;
}


/* Styles pour la liste principale (main-nav) */

.main-nav__list {
    display: flex;
    justify-content: space-evenly;
}

@media (min-width: 992px) and (min-width: 992px) {
    .header--layout-4 .header__primary--center .main-nav__list>li:nth-of-type(1)>a {
        padding: 0 34px !important;
    }
    .header--layout-4 .header__primary-inner {
        background-color: #292c31;
    }
}


/* Styles pour la section d'en-tête secondaire */

.header--layout-4 .header__secondary {
    position: relative;
    z-index: 3;
}

.header--layout-4 .header__secondary-inner {
    position: relative;
    z-index: 1;
}


/* Styles pour la navigation principale (main-nav) */

.main-nav {
    text-align: right;
}

.main-nav .header-mobile__logo {
    display: none;
}

.main-nav__list {
    display: inline-block;
    text-align: left;
    padding: 0;
    margin: 0;
    list-style: none;
}

@media (min-width: 992px) {
    .main-nav__list {
        border-left: none;
    }
}

.main-nav__list>li {
    text-align: center;
    display: inline-block;
    padding: 0;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .main-nav__list>li>a {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.main-nav__list>li>a::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background-color: transparent;
}

.main-nav__list>li>a:hover {
    color: #fff;
    background-color: transparent;
    text-decoration: none;
}

.main-nav__list>li>a:hover::before {
    background-color: #ffb347;
}

.main-nav__list>li.active>a {
    color: #fff;
    text-decoration: none;
    background-color: transparent;
}

.main-nav__list>li.active>a::before {
    background-color: #ffb347;
}


/* Styles pour le bouton de langues */

.languages-container {
    position: absolute;
    right: 320px;
    /* Ajustez selon vos besoins */
    top: 50%;
    /* Centre verticalement dans le conteneur principal */
    transform: translateY(-50%);
    /* Corrige l'alignement vertical */
    display: flex;
    align-items: center;
}


/* Styles pour le menu des langues */

#langs {
    position: absolute;
    top: 100%;
    /* Positionne le menu juste sous le bouton */
    left: 0;
    /* Aligner à gauche du bouton */
    width: 150px;
    /* Largeur du menu */
    background-color: rgba(0, 0, 0, 0.9);
    /* Fond du menu */
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Ombre pour le menu */
    opacity: 0;
    /* Masqué par défaut */
    visibility: hidden;
    /* Masqué par défaut */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    /* Animation pour le déploiement */
    z-index: 1000;
    /* Assurer que le menu est au-dessus des autres éléments */
    transform: translateY(-10px);
    /* Position initiale légèrement décalée */
}


/* Lorsque le menu est visible */

#langs.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    /* Revenir à la position d'origine */
}


/* Styles pour les options de langue */

.lang {
    display: flex;
    align-items: center;
    /* Aligne les éléments au centre */
    padding: 10px;
    color: #fff;
    cursor: pointer;
    transition: background 0.3s;
    /* Animation de fond au survol */
}


/* Styles pour les images des options de langue */

.lang img {
    height: 20px;
    /* Hauteur des images */
    margin-right: 10px;
    /* Espacement entre l'image et le texte */
}


/* Effet au survol des options de langue */

.lang:hover {
    background: rgba(255, 255, 255, 0.1);
    /* Fond légèrement transparent au survol */
}


/* Styles pour le bouton de toggle */

#lang-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    /* Aligne les éléments verticalement au centre */
    padding: 5px;
}


/* Style pour l'image du bouton de langues */

#lang-toggle img {
    height: 24px;
    margin-right: 5px;
    vertical-align: middle;
    /* Espacement entre l'image et le texte */
}

@media (min-width: 992px) {
    .header--layout-4 .header-logo {
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        bottom: -10px;
    }
}

@media (min-width: 992px) {
    .header--layout-4 .main-nav {
        margin-right: auto;
    }
}

@media (min-width: 992px) {
    .header--layout-4 .header-search-form {
        padding-top: 16px;
        padding-bottom: 16px;
    }
}

@media (min-width: 992px) {
    .header--layout-4 .info-block--header .info-block__item {
        padding-top: 10px;
        padding-bottom: 22px;
    }
    .header--layout-4 .info-block--header .info-block__item .df-icon {
        top: 14px;
    }
    .header--layout-4 .info-block--header .info-block__item .info-block__menu-icon {
        top: 11px!important;
    }
}

.header--layout-4 .header__secondary {
    position: relative;
    z-index: 3;
}

.header--layout-4 .header__secondary-inner {
    position: relative;
    z-index: 1;
}

.main-nav {
    text-align: right;
}

.main-nav .header-mobile__logo {
    display: none;
}

.main-nav__list {
    display: inline-block;
    text-align: left;
    padding: 0;
    margin: 0;
    list-style: none;
}

@media (min-width: 992px) {
    .main-nav__list {
        border-left: none;
    }
}

.main-nav__list>li {
    text-align: center;
    display: inline-block;
    padding: 0;
}

@media (min-width: 992px) {
    .main-nav__list>li {
        margin-left: -.25em;
        border-right: none;
    }
    .main-nav__list>li:first-of-type {
        margin-left: 0;
    }
}

.main-nav__list>li>a {
    display: block;
    position: relative;
    color: #fff;
    padding: 0 34px;
    line-height: 62px;
    text-decoration: none;
    position: relative;
    font-family: montserrat, sans-serif;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    -webkit-transition: color .3s ease;
    transition: color .3s ease;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .main-nav__list>li>a {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.main-nav__list>li>a::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background-color: transparent;
    -webkit-transition: background-color .3s ease;
    transition: background-color .3s ease;
    z-index: -1;
}

.main-nav__list>li>a:hover {
    color: #fff;
    background-color: transparent;
    text-decoration: none;
}

.main-nav__list>li>a:hover::before {
    background-color: #ffb347;
}

.main-nav__list>li.active>a {
    color: #fff;
    text-decoration: none;
    background-color: transparent;
}

.main-nav__list>li.active>a::before {
    background-color: #ffb347;
}

.main-nav__list>li.has-children>a::after {
    content: "";
    display: inline-block;
    margin-left: 9px;
    width: 6px;
    height: 4px;
    background-image: url(data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMj...

}

>.main-nav__sub {
    display: block;
    opacity: 1;
    visibility: visible;
}

>.main-nav__sub-2 {
    display: block;
    opacity: 1;
    visibility: visible;
}

>.main-nav__sub-3 {
    display: block;
    opacity: 1;
    visibility: visible;
}

.main-nav__toggle,
.main-nav__toggle-2 {
    display: none;
}

@media only screen and (min-width: 992px) {
    .main-nav__list li:hover>.main-nav__sub,
    .main-nav__sub li:hover>.main-nav__sub-2,
    .main-nav__sub-2 li:hover>.main-nav__sub-3 {
        display: block;
    }
    .main-nav__list .nav-account__item {
        display: none;
    }
    .main-nav__list .social-links__item {
        display: none;
    }
    .main-nav__list .main-nav__item--social-links {
        display: none;
    }
    .main-nav .main-nav__item--shopping-cart {
        display: none;
    }
}

@media only screen and (max-width: 991px) {
    .main-nav {
        width: 270px;
        left: 0;
        transform: translateX(-270px);
        height: 100vh;
        position: fixed;
        top: 0;
        margin: 0;
        z-index: 103;
        overflow: auto;
        transition: all 0.4s ease-in-out;
        background-color: #1e2024;
    }
    .site-wrapper--has-overlay .main-nav {
        transform: translateX(0);
        transition: all 0.4s ease-in-out;
    }
    .main-nav .header-mobile__logo {
        position: relative;
        padding: 5px 0 18px;
        display: block;
        border-bottom: 1px solid #292c31;
    }
    .main-nav .main-nav__item--shopping-cart .info-block__link-wrapper {
        overflow: hidden;
        font-size: 11px;
        line-height: 1.5em;
        padding-right: 20px;
    }
    .main-nav .main-nav__item--shopping-cart .df-icon-stack--bag,
    .main-nav .main-nav__item--shopping-cart .df-icon--shopping-cart {
        display: none;
    }
    .main-nav .main-nav__item--shopping-cart .info-block__heading {
        margin-bottom: 0;
        float: left;
        font-size: 11px;
        line-height: 1.5em;
    }
    .main-nav .main-nav__item--shopping-cart .info-block__cart-sum {
        float: right;
        font-size: 11px;
        line-height: 1.5em;
        color: #ffb347;
    }
    .main-nav .main-nav__back {
        width: 49px;
        height: 44px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 4;
        background-image: url(data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMyA4Jz48cGF0aCB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgtMjM4Ljc1IC0x17.7o377o17.7o377o1CncnIHZpZXdCb3g9JzAgMCAxMyA4Jz48cGF0aCB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgtMjM4Ljc1IC0xNy43NSknIGZpbGw9JyNmZmYnIGQ9J00yNDAsMjFoMTJ2MkgyNDBWMjFabTAuMTcxLS40MTUsNC4yNDMsNC4yNDNMMjQzLDI2LjI0MiwyMzguNzU3LDIyWm00LjI0My0xLjQxNC00LjI0Myw0LjI0MkwyMzguNzU3LDIyLDI0Mywx17.7o377o177o377o17.7o377o1S43NTdaJy8+PC9zdmc+);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 13px 8px;
    }
    .main-nav .main-nav__back:hover {
        cursor: pointer;
    }
    .main-nav .main-nav__list>li>a::before {
        top: 0;
        bottom: 0;
        width: 4px;
        height: auto;
    }
    .main-nav .main-nav__list>li>a .highlight {
        color: #ffb347;
    }
    .main-nav .main-nav__list>li.has-children>a::after {
        display: none;
    }
    .main-nav .main-nav__list>li.nav-account__item--logout>a {
        color: #6b6d70;
    }
    .main-nav .main-nav__list>li.nav-account__item--wishlist>a {
        padding-right: 20px;
    }
    .main-nav .main-nav__list>li.nav-account__item--wishlist .highlight {
        float: right;
    }
    .main-nav .main-nav__list>li.main-nav__item--social-links {
        text-align: left;
        padding: 0 15px 20px;
    }
    .main-nav .main-nav__list>li.main-nav__item--social-links>a {
        display: inline-block;
        border-bottom: none;
        padding: 13px;
    }
    .main-nav .main-nav__list>li.main-nav__item--social-links>a::before {
        display: none;
    }
    .main-nav__list li:hover .main-nav__sub {
        display: none;
    }
    .main-nav__list li:hover .main-nav__sub .main-nav__sub-2 {
        display: none;
    }
    .main-nav__list .main-nav__sub li.has-children>a::after {
        display: none;
    }
    .main-nav__list .main-nav__sub .main-nav__sub-2 li:hover .main-nav__sub-3 {
        display: none;
    }
    .main-nav__toggle {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 8px;
        right: 10px;
        display: block;
        cursor: pointer;
        z-index: 1;
        background-image: url(data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNSAxNic+PHBhdGggZD0nTTEwLjg5LDEuMTA0QzEwLjg5LDAuMTUyNzEwNC4xMDksMS4xMDkuMTAsMTAuOTkzNjEwMSwxLjEwMUMxMS4xMTI3MTAwMSwxLjEwMSwxMi4yMDA5MTAzLDAuMzk1NzEwMyw5LjkxMzExMjgsMEwxMC45OTM2MTAxLDEyLjM0OTc4MjMsMEw3LjMzOTE1ODk4LDEyLjM0OTc4MjMsNy4zMzkxNTg5OCw4LjQwNzAxNDYzOSw3LjMzOTE1ODk4QzcuMzM5MTU4OTgsOC41NDY0MTA1MDIsMTAuMDUzNjEwNCw4LjMzNzYzMTAyLDEwLjA1MzYxMDQsOS4yODU0NzEwMVpNMTIuNDEwNTIwMSwxNy4zNzE1NTcxMzEyTDEzLjg2MjIwNjgsOS4yODg4NzEyMzQ2bDExLjE3MDYzNDIsMS4xMTMwMjM0MS43OTMwNzU0MzYsMzguMTYyOTY4MS0xLjQyODE0MjczLDE4LjQ4MzcxMjctMTguNDg0NTExNjMgMCwzOC4xNjI5NjgyLDE4LjUwNjUwMTg5NjM4NDgyLDE4LjUwNjUwMTg5NjM4NDgyTDEyLjQxMDUyMDEsMTcuMzcxNTU3MTMxMloiLz48L3N2Zz4=);
    }
    .main-nav__toggle:hover {
        cursor: pointer;
    }
    .main-nav__toggle-2 {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 0;
        right: 0;
        display: none;
        cursor: pointer;
        z-index: 1;
        background-color: transparent;
    }
}

.main-nav__sub {
    background-color: #fff;
    display: none;
    opacity: 0;
    width: 270px;
    position: absolute;
    top: 0;
    left: 270px;
    padding: 0;
    border-left: 1px solid #292c31;
    border-bottom: 1px solid #292c31;
    z-index: 3;
}

@media only screen and (max-width: 991px) {
    .main-nav__sub {
        border-left: 0;
        position: fixed;
        width: 270px;
        left: 0;
        transform: translateX(-270px);
    }
}

.main-nav__sub-2 {
    background-color: #fff;
    display: none;
    opacity: 0;
    width: 270px;
    position: absolute;
    top: 0;
    left: 270px;
    padding: 0;
    border-left: 1px solid #292c31;
    border-bottom: 1px solid #292c31;
    z-index: 4;
}

@media only screen and (max-width: 991px) {
    .main-nav__sub-2 {
        border-left: 0;
        position: fixed;
        width: 270px;
        left: 0;
        transform: translateX(-270px);
    }
}

.main-nav__sub-3 {
    background-color: #fff;
    display: none;
    opacity: 0;
    width: 270px;
    position: absolute;
    top: 0;
    left: 270px;
    padding: 0;
    border-left: 1px solid #292c31;
    border-bottom: 1px solid #292c31;
    z-index: 5;
}

@media only screen and (max-width: 991px) {
    .main-nav__sub-3 {
        border-left: 0;
        position: fixed;
        width: 270px;
        left: 0;
        transform: translateX(-270px);
    }
}

.main-nav .main-nav__item--shopping-cart {
    position: relative;
    margin-left: 7px;
    margin-right: 7px;
}

.main-nav .main-nav__item--shopping-cart .info-block__link-wrapper {
    display: none;
}

.main-nav .main-nav__item--shopping-cart .df-icon-stack--bag,
.main-nav .main-nav__item--shopping-cart .df-icon--shopping-cart {
    font-size: 25px;
    line-height: 1;
}

.main-nav .main-nav__item--shopping-cart .info-block__heading {
    display: none;
}

.main-nav .main-nav__item--shopping-cart .info-block__cart-sum {
    font-size: 16px;
    line-height: 1;
}

@media only screen and (max-width: 991px) {
    .main-nav .main-nav__item--shopping-cart .info-block__cart-sum {
        display: none;
    }
}

.main-nav .main-nav__back {
    display: none;
}

.main-nav .main-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav .main-nav__list>li {
    margin: 0;
    padding: 0;
}

.main-nav .main-nav__list>li>a {
    text-transform: uppercase;
    display: block;
    padding: 13px 15px;
    border-bottom: 1px solid #292c31;
    color: #1e2024;
    text-decoration: none;
}

.main-nav .main-nav__list>li>a::before {
    content: "";
    display: block;
    height: 0;
    width: 4px;
    background: #ffb347;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

.main-nav .main-nav__list>li>a:hover .highlight {
    color: #ffb347;
}

.main-nav .main-nav__list>li.has-children>a {
    position: relative;
    padding-right: 40px;
}

.main-nav .main-nav__list>li.has-children>a::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left-color: #1e2024;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -5px;
}

.main-nav .main-nav__list>li.has-children:hover>a::after {
    border-left-color: #ffb347;
}

.main-nav .main-nav__list>li.nav-account__item--wishlist {
    position: relative;
}

.main-nav .main-nav__list>li.nav-account__item--wishlist>a {
    padding-right: 35px;
}

.main-nav .main-nav__list>li.nav-account__item--wishlist .highlight {
    display: block;
    color: #ffb347;
    font-size: 14px;
}

.main-nav .main-nav__list>li.main-nav__item--social-links {
    padding: 0;
    margin: 0;
}

.main-nav .main-nav__list>li.main-nav__item--social-links>a {
    display: block;
    text-align: center;
    padding: 15px 0;
}

.main-nav .main-nav__list>li.main-nav__item--social-links>a::before {
    content: none;
}

.main-nav__list li:hover>.main-nav__sub {
    opacity: 1;
    display: block;
}

.main-nav__list .nav-account__item--logout {
    display: block;
    text-align: center;
}

.main-nav__list .nav-account__item--logout a {
    display: block;
    padding: 15px 0;
    color: #ffb347;
}

.main-nav .main-nav__list .social-links__item {
    display: block;
    padding: 10px 0;
}

.main-nav .main-nav__list .social-links__item a {
    color: #ffb347;
    font-size: 16px;
}

.main-nav .main-nav__list .social-links__item a:hover {
    color: #ffb347;
}


/* Styles for your main navigation mobile dropdown menu */

@media only screen and (max-width: 991px) {
    .main-nav .main-nav__list {
        display: none;
    }
    .main-nav.open .main-nav__list {
        display: block;
    }
    .main-nav .main-nav__item.has-children .main-nav__sub,
    .main-nav .main-nav__item--search-bar .main-nav__sub,
    .main-nav .main-nav__item--shopping-cart .main-nav__sub {
        display: none;
        width: 100%;
        position: relative;
        left: 0;
        padding: 0;
        background: #fff;
        opacity: 0;
        margin-top: 0;
    }
    .main-nav.open .main-nav__item.has-children .main-nav__sub,
    .main-nav.open .main-nav__item--search-bar .main-nav__sub,
    .main-nav.open .main-nav__item--shopping-cart .main-nav__sub {
        display: block;
        opacity: 1;
    }
}


/* Styles for the mobile menu toggle button */

.mobile-menu-toggle {
    display: none;
    cursor: pointer;
}


/* Adjust this breakpoint to control when the mobile menu toggle button appears */

@media only screen and (max-width: 991px) {
    .mobile-menu-toggle {
        display: block;
    }
}


/* Styles for the "hamburger" icon */

.mobile-menu-toggle .fa-bars {
    font-size: 30px;
    color: #1e2024;
}


/* Styles for the close icon (displayed when the mobile menu is open) */

.mobile-menu-toggle.open .fa-bars {
    display: none;
}

.mobile-menu-toggle .fa-times {
    font-size: 30px;
    color: #ffb347;
    display: none;
}


/* Additional styles for the close icon when the mobile menu is open */

.mobile-menu-toggle.open .fa-times {
    display: block;
}


/* Styles for your mobile navigation header background */

.mobile-header {
    display: none;
    background: #fff;
    border-bottom: 1px solid #292c31;
    position: fixed;
    width: 100%;
    z-index: 3;
}


/* Styles for your logo in the mobile navigation header */

.mobile-header .header__logo {
    padding: 10px 0;
}


/* Styles for your navigation menu on mobile */

.mobile-nav {
    display: none;
}


/* Additional styles for the navigation menu on mobile when it's open */

.mobile-menu-toggle.open~.mobile-header .mobile-nav {
    display: block;
}

.mobile-nav .main-nav__list>li {
    margin: 0;
    padding: 0;
}

.mobile-nav .main-nav__list>li>a {
    padding: 15px 15px;
    color: #1e2024;
    display: block;
    text-decoration: none;
}

.mobile-nav .main-nav__list>li>a::before {
    content: "";
    display: block;
    height: 0;
    width: 4px;
    background: #ffb347;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}


/* Styles for sub-menus in the mobile navigation */

.mobile-nav .main-nav__list>li.has-children>a {
    position: relative;
    padding-right: 40px;
}

.mobile-nav .main-nav__list>li.has-children>a::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left-color: #1e2024;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -5px;
}

.mobile-nav .main-nav__list>li.has-children:hover>a::after {
    border-left-color: #ffb347;
}


/* Styles for your mobile navigation footer */

.mobile-nav__footer {
    display: none;
    padding: 10px 0;
    border-top: 1px solid #292c31;
}


/* Additional styles for the mobile navigation footer when the mobile menu is open */

.mobile-menu-toggle.open~.mobile-header .mobile-nav__footer {
    display: block;
}


/* Styles for your mobile navigation footer links */

.mobile-nav__footer a {
    color: #1e2024;
    text-decoration: none;
    display: block;
    padding: 10px 15px;
}

.mobile-nav__footer a:hover {
    background: #ffb347;
    color: #fff;
}


/* Styles for the footer bar that appears above the mobile navigation footer */

.footer-bar {
    display: none;
    background: #292c31;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}


/* Additional styles for the footer bar when the mobile menu is open */

.mobile-menu-toggle.open~.mobile-header .footer-bar {
    display: block;
}


/* Responsive styles for tablets and smaller desktop screens */

@media only screen and (min-width: 992px) {
    .mobile-menu-toggle.open~.mobile-header .mobile-nav {
        display: none;
    }
    .mobile-menu-toggle.open~.mobile-header .footer-bar {
        display: none;
    }
    .main-nav .main-nav__list {
        display: block;
    }
    .main-nav .main-nav__item.has-children .main-nav__sub,
    .main-nav .main-nav__item--search-bar .main-nav__sub,
    .main-nav .main-nav__item--shopping-cart .main-nav__sub {
        display: block;
        position: absolute;
        left: 0;
        opacity: 1;
    }
    .main-nav .main-nav__item.has-children .main-nav__sub {
        display: none;
    }
    .main-nav .main-nav__item--search-bar .main-nav__sub {
        display: none;
    }
    .main-nav .main-nav__item--shopping-cart .main-nav__sub {
        display: none;
    }
    .mobile-header,
    .mobile-nav {
        display: none;
    }
}

.main-nav__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
}

@media (min-width: 992px) and (min-width: 992px) {
    .header--layout-4 .header__primary--center .main-nav__list>li:nth-of-type(1)>a {
        padding: 0 34px!important;
    }
}

.header--layout-4 .header__primary-inner {
    background-color: #292c31;
}

@media (min-width: 992px) {
    .header--layout-4 .header__primary-inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }
}

@media (min-width: 992px) {
    .header--layout-4 .header-logo {
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        bottom: -10px;
    }
}

@media (min-width: 992px) {
    .header--layout-4 .main-nav {
        margin-right: auto;
    }
}

@media (min-width: 992px) {
    .header--layout-4 .header-search-form {
        padding-top: 16px;
        padding-bottom: 16px;
    }
}

@media (min-width: 992px) {
    .header--layout-4 .info-block--header .info-block__item {
        padding-top: 10px;
        padding-bottom: 22px;
    }
    .header--layout-4 .info-block--header .info-block__item .df-icon {
        top: 14px;
    }
    .header--layout-4 .info-block--header .info-block__item .info-block__menu-icon {
        top: 11px!important;
    }
}

.header--layout-4 .header__secondary {
    position: relative;
    z-index: 3;
}

.header--layout-4 .header__secondary-inner {
    position: relative;
    z-index: 1;
}

.main-nav {
    text-align: right;
}

.main-nav .header-mobile__logo {
    display: none;
}

.main-nav__list {
    display: inline-block;
    text-align: left;
    padding: 0;
    margin: 0;
    list-style: none;
}

@media (min-width: 992px) {
    .main-nav__list {
        border-left: none;
    }
}

.main-nav__list>li {
    text-align: center;
    display: inline-block;
    padding: 0;
}

@media (min-width: 992px) {
    .main-nav__list>li {
        margin-left: -.25em;
        border-right: none;
    }
}

.main-nav__list>li:first-of-type {
    margin-left: 0;
}

.main-nav__list>li>a {
    display: block;
    position: relative;
    color: #fff;
    padding: 0 34px;
    line-height: 62px;
    text-decoration: none;
    position: relative;
    font-family: montserrat, sans-serif;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    -webkit-transition: color .3s ease;
    transition: color .3s ease;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .main-nav__list>li>a {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.main-nav__list>li>a:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #ff647b;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.main-nav__list>li>a:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

.main-nav__list .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    background-color: #fff;
    min-width: 190px;
    padding: 8px 0;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

@media (min-width: 992px) {
    .main-nav__list .sub-menu {
        min-width: 250px;
    }
}

.main-nav__list .sub-menu li {
    display: block;
    width: 100%;
}

.main-nav__list .sub-menu li a {
    padding: 10px 20px;
    line-height: 1.2;
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    -webkit-transition: color .3s;
    transition: color .3s;
    white-space: nowrap;
}

.main-nav__list .sub-menu li a:hover {
    color: #ff647b;
}

.main-nav__list>li:hover .sub-menu {
    display: block;
}

.main-nav__list>li ul li:hover .sub-menu {
    display: block;
}

.main-nav__list>li ul li ul li:hover .sub-menu {
    display: block;
}


/* CSS for the mobile navigation menu */

.main-nav__toggle {
    display: block;
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
    color: #333;
    -webkit-transition: color .3s;
    transition: color .3s;
    z-index: 200;
}

.main-nav__toggle:hover {
    color: #ff647b;
}

.main-nav__close {
    display: none;
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
    color: #333;
    -webkit-transition: color .3s;
    transition: color .3s;
    z-index: 200;
}

.main-nav__close:hover {
    color: #ff647b;
}

.main-nav__toggle,
.main-nav__close {
    display: none;
}

@media (max-width: 991px) {
    .main-nav__list {
        display: none;
        position: absolute;
        top: 60px;
        right: 0;
        left: 0;
        background: #fff;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
        border-top: 3px solid #ff647b;
    }
    .main-nav__list.active {
        display: block;
    }
    .main-nav__toggle.active~.main-nav__list {
        display: block;
    }
    .main-nav__close.active~.main-nav__list {
        display: block;
    }
    .main-nav__toggle.active+.main-nav__close {
        display: block;
    }
    .main-nav__close.active+.main-nav__toggle {
        display: block;
    }
}


/* CSS for the navigation items in the mobile menu */

.main-nav__item {
    padding: 15px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    display: block;
    -webkit-transition: color .3s;
    transition: color .3s;
    border-top: 1px solid #f0f0f0;
}

.main-nav__item:hover {
    color: #ff647b;
}


/* CSS for the footer section */

.footer {
    padding: 50px 0;
    background-color: #333;
    color: #fff;
    text-align: center;
}

.footer h3 {
    font-size: 24px;
    margin-bottom: 20px;
}

.footer p {
    font-size: 18px;
    margin-bottom: 20px;
}


/* CSS for responsive design */

@media (max-width: 767px) {
    .main-nav {
        margin-top: 60px;
    }
    .main-nav__item {
        padding: 15px;
    }
    .footer {
        padding: 30px 0;
    }
}

.main-nav__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly
}


}
@media(min-width:992px) and (min-width:992px) {
    .header--layout-4 .header__primary--center .main-nav__list>li:nth-of-type(1)>a {
        padding: 0 34px!important
    }
}
.header--layout-4 .header__primary-inner {
    background-color: #292c31
}
@media(min-width:992px) {
    .header--layout-4 .header__primary-inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end
    }
}
@media(min-width:992px) {
    .header--layout-4 .header-logo {
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        bottom: -10px
    }
}
@media(min-width:992px) {
    .header--layout-4 .main-nav {
        margin-right: auto
    }
}
@media(min-width:992px) {
    .header--layout-4 .header-search-form {
        padding-top: 16px;
        padding-bottom: 16px
    }
}
@media(min-width:992px) {
    .header--layout-4 .info-block--header .info-block__item {
        padding-top: 10px;
        padding-bottom: 22px
    }
    
    .header--layout-4 .info-block--header .info-block__item .df-icon {
        top: 14px
    }
    
    .header--layout-4 .info-block--header .info-block__item .info-block__menu-icon {
        top: 11px!important
    }
}
.header--layout-4 .header__secondary {
    position: relative;
    z-index: 3
}
.header--layout-4 .header__secondary-inner {
    position: relative;
    z-index: 1
}
.main-nav {
    text-align: right
}
.main-nav .header-mobile__logo {
    display: none
}
.main-nav__list {
    display: inline-block;
    text-align: left;
    padding: 0;
    margin: 0;
    list-style: none
}
@media(min-width:992px) {
    .main-nav__list {
        border-left: none
    }
}
.main-nav__list>li {
    text-align: center;
    display: inline-block;
    padding: 0
}
@media(min-width:992px) {
    .main-nav__list>li {
        margin-left: -.25em;
        border-right: none
    }
    
    .main-nav__list>li:first-of-type {
        margin-left: 0
    }
}
.main-nav__list>li>a {
    display: block;
    position: relative;
    color: #fff;
    padding: 0 34px;
    line-height: 62px;
    text-decoration: none;
    position: relative;
    font-family: montserrat, sans-serif;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    -webkit-transition: color .3s ease;
    transition: color .3s ease
}
@media(min-width:992px) and (max-width:1199px) {
    .main-nav__list>li>a {
        padding-left: 20px;
        padding-right: 20px
    }
}
.main-nav__list>li>a::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background-color: transparent;
    -webkit-transition: background-color .3s ease;
    transition: background-color .3s ease;
    z-index: -1
}
.main-nav__list>li>a:hover {
    color: #fff;
    background-color: transparent;
    text-decoration: none
}
.main-nav__list>li>a:hover::before {
    background-color: #ffb347
}
.main-nav__list>li.active>a {
    color: #fff;
    text-decoration: none;
    background-color: transparent
}
.main-nav__list>li.active>a::before {
    background-color: #ffb347
}
.main-nav__list>li.has-children>a::after {
    content: "";
    display: inline-block;
    margin-left: 9px;
    width: 6px;
    height: 4px;
    background-image: url(data:image/svg+xml;
 charset=utf8;
    base64,
    PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA2IDQnPjxwYXRoIHRyYW5zZm9ybT0ndHJhbnNsYXRlKC01ODYuMTU2IC0xMDQ3LjI4KScgZmlsbD0nI2ZmZicgZD0nTTU4Ni4xNzEsMTA0OGwwLjcwOC0uNzEsMi44MjgsMi44My0wLjcwNy43MVptNC45NS0uNzEsMC43MDcsMC43MUw1ODksMTA1MC44M2wtMC43MDctLjcxWicvPjwvc3ZnPg==);
    background-size: 6px 4px;
    background-repeat: no-repeat;
    background-position: center center;
    top: -2px;
    position: relative
}
.main-nav__megamenu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    left: 0;
    position: absolute;
    top: 62px;
    z-index: 1000;
    margin: 0;
    text-align: left;
    padding: 43px 55px;
    font-size: 15px;
    border: solid 1px #292c31;
    background-color: #1e2024;
    opacity: 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transition: opacity .3s, -webkit-transform .3s;
    transition: opacity .3s, -webkit-transform .3s;
    transition: transform .3s, opacity .3s;
    transition: transform .3s, opacity .3s, -webkit-transform .3s
}
.main-nav__megamenu .main-nav__title {
    font-size: 14px;
    letter-spacing: -.03em;
    padding: 3px 0;
    margin-bottom: 19px;
    color: #fff;
    text-align: left;
    text-transform: uppercase;
    font-family: montserrat, sans-serif;
    font-weight: 700
}
.main-nav__megamenu .row {
    width: 100%
}
.main-nav__ul:not([class*=col-]) {
    padding-left: 0
}
.main-nav__ul li {
    display: block;
    white-space: nowrap;
    text-align: left;
    text-transform: uppercase
}
.main-nav__ul li a {
    display: block;
    font-size: 11px;
    line-height: 18px;
    font-family: montserrat, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    text-align: left;
    padding: 5px 0;
    color: rgba(255, 255, 255, .4);
    -webkit-transition: color .3s ease;
    transition: color .3s ease
}
.main-nav__ul li a:hover {
    color: #fff;
    text-decoration: none
}
@media(min-width:992px) {
    .main-nav__ul-2cols,
    .main-nav__ul-3cols {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -ms-flex-line-pack: start;
        align-content: flex-start
    }
    
    .main-nav__ul-2cols li,
    .main-nav__ul-3cols li {
        padding-right: 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }
    
    .main-nav__ul-2cols li.main-nav__title,
    .main-nav__ul-3cols li.main-nav__title {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
    
    .main-nav__ul-2cols li a,
    .main-nav__ul-3cols li a {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }
}
@media(min-width:992px) {
    .main-nav__ul-2cols li {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%
    }
}
@media(min-width:992px) {
    .main-nav__ul-3cols li {
        -ms-flex-preferred-size: 33.3%;
        flex-basis: 33.3%
    }
}
.main-nav__list li>.main-nav__sub,
.main-nav__list li>.main-nav__megamenu,
.main-nav__list li>.main-nav__sub-2,
.main-nav__list li>.main-nav__sub-3 {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(-75deg);
    transform: rotateX(-75deg);
    visibility: hidden
}
.main-nav__list li:hover>.main-nav__sub,
.main-nav__list li:hover>.main-nav__megamenu,
.main-nav__list li:hover>.main-nav__sub-2,
.main-nav__list li:hover>.main-nav__sub-3 {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    opacity: 1;
    visibility: visible
}
.main-nav__megamenu .main-nav-banner {
    border: 1px solid #292c31;
    background-color: #1e2024;
    padding: 0;
    margin-bottom: 28px;
    border-radius: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 86px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 0
}
.main-nav__megamenu .main-nav-banner .main-nav-banner__link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -ms-flex-line-pack: center;
    align-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 0 0 66px
}
.main-nav__megamenu .main-nav-banner .main-nav-banner__title {
    width: 100%;
    font-size: 20px;
    line-height: 1.1em;
    color: #fff;
    font-family: montserrat, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}
.main-nav__megamenu .main-nav-banner .main-nav-banner__subtitle {
    font-size: 12px;
    color: #9a9da2;
    line-height: 1.2em;
    font-style: normal;
    text-transform: uppercase
}
.main-nav__megamenu .main-nav-banner--img-1 {
    background-image: url(../images/esports/samples/megamenu-banner-1.jpg)
}
.main-nav__megamenu .main-nav-banner--img-2 {
    background-image: url(../images/esports/samples/megamenu-banner-2.jpg)
}
.main-nav__megamenu .main-nav-banner--img-3 {
    background-image: url(../images/esports/samples/megamenu-banner-3.jpg)
}
@media(min-width:992px) {
    .main-nav__megamenu--no-paddings {
        padding: 0
    }
    
    .main-nav__megamenu--no-paddings .row {
        margin: 0
    }
    
    .main-nav__megamenu--no-paddings .row [class*=col-] {
        padding: 32px 35px
    }
    
    .main-nav__megamenu--no-paddings .row [class*=col-]:not(:first-child) {
        border-left: 1px solid #292c31
    }
    
    .main-nav__megamenu--no-paddings .main-nav-banner--top {
        margin-top: -33px;
        margin-left: -36px;
        margin-right: -36px;
        -ms-flex-preferred-size: calc(100% + 72px)!important;
        flex-basis: calc(100% + 72px)!important;
        border-radius: 0
    }
}
@media(min-width:992px) {
    .main-nav__megamenu--has-bg {
        background-image: url(../images/esports/samples/megamenu-bg.png);
        background-repeat: no-repeat;
        background-position: 100% 100%;
        padding-right: 142px
    }
}
.main-nav__sub {
    position: absolute;
    top: 60px;
    z-index: 1000;
    margin: 0;
    padding: 0;
    min-width: 240px;
    background-image: url(/assets/images/index/anim-header.gif);
    background-size: 180% 150%;
    background-color: rgba(32, 36, 30, 0.7);
    /* Couleur de fond avec opacité */
    
    border: solid 1px #2b3129;
    opacity: 1;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transition: opacity .3s, -webkit-transform .3s;
    transition: opacity .3s, -webkit-transform .3s;
    transition: transform .3s, opacity .3s;
    transition: transform .3s, opacity .3s, -webkit-transform .3s
}
.main-nav__sub>li>a {
    text-decoration: none
}
.main-nav__sub>li.has-children>a::after {
    content: "";
    display: block;
    position: absolute;
    right: 24px;
    top: 50%;
    margin-top: -2px;
    width: 6px;
    height: 4px;
    background-image: url(data:image/svg+xml;
 charset=utf8;
    base64,
    PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA2IDQnPjxwYXRoIHRyYW5zZm9ybT0ndHJhbnNsYXRlKC01ODYuMTU2IC0xMDQ3LjI4KScgZmlsbD0nI2ZmZicgZD0nTTU4Ni4xNzEsMTA0OGwwLjcwOC0uNzEsMi44MjgsMi44My0wLjcwNy43MVptNC45NS0uNzEsMC43MDcsMC43MUw1ODksMTA1MC44M2wtMC43MDctLjcxWicvPjwvc3ZnPg==);
    background-size: 6px 4px;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}
.main-nav__sub li {
    position: relative;
    margin: 0;
    padding: 0
}
.main-nav__sub li a {
    display: block;
    font-family: montserrat, sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    font-style: normal;
    font-size: 11px;
    color: #fff;
    text-align: left;
    line-height: 1.5em;
    padding: 16px 30px;
    letter-spacing: normal;
    border-bottom: 1px solid #292c31;
    -webkit-transition: background-color .3s ease;
    transition: background-color .3s ease
}
.main-nav__sub li a:hover {
    color: #c2ff1f;
    background-color: transparent
}
.main-nav__sub li:last-child>a {
    border-bottom: none
}
.main-nav__sub>li.active>a {
    color: #c2ff1f;
    background-color: transparent
}
.main-nav__list li:hover .main-nav__sub {
    display: block
}
.main-nav__sub li {
    position: relative;
    padding: 0;
    margin: 0;
    display: block
}
.main-nav__sub li:hover .main-nav__sub-2 {
    display: block;
    opacity: 1;
    list-style: none;
    padding: 0;
    background-color: #1e2024
}
.main-nav__sub-2 {
    min-width: 240px;
    border: solid 1px #292c31;
    position: absolute;
    left: 100%;
    top: -1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transition: opacity .4s, -webkit-transform .4s;
    transition: opacity .4s, -webkit-transform .4s;
    transition: transform .4s, opacity .4s;
    transition: transform .4s, opacity .4s, -webkit-transform .4s
}
.main-nav__sub-2 li:hover .main-nav__sub-3 {
    opacity: 1;
    list-style: none;
    padding: 0;
    border: solid 1px #292c31;
    background-color: #1e2024
}
.main-nav__sub-3 {
    min-width: 240px;
    position: absolute;
    left: 100%;
    top: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transition: opacity .4s, -webkit-transform .4s;
    transition: opacity .4s, -webkit-transform .4s;
    transition: transform .4s, opacity .4s;
    transition: transform .4s, opacity .4s, -webkit-transform .4s
}
.main-nav__toggle,
.main-nav__toggle-2 {
    display: none
}
@media only screen and (min-width:992px) {
    .main-nav__list li:hover>.main-nav__sub,
    .main-nav__sub li:hover>.main-nav__sub-2,
    .main-nav__sub-2 li:hover>.main-nav__sub-3 {
        display: block
    }
    
    .main-nav__list li:hover>.main-nav__megamenu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
    
    .main-nav__list .nav-account__item {
        display: none
    }
    
    .main-nav__list .social-links__item {
        display: none
    }
    
    .main-nav__list .main-nav__item--social-links {
        display: none
    }
    
    .main-nav .main-nav__item--shopping-cart {
        display: none
    }
}
@media only screen and (max-width:991px) {
    .main-nav {
        width: 270px;
        left: 0;
        -webkit-transform: translateX(-270px);
        transform: translateX(-270px);
        height: 100vh;
        position: fixed;
        top: 0;
        margin: 0;
        z-index: 103;
        overflow: auto;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
        background-color: #1e2024
    }
    
    .site-wrapper--has-overlay .main-nav {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }
    
    .main-nav .header-mobile__logo {
        position: relative;
        padding: 5px 0 18px;
        display: block;
        border-bottom: 1px solid #292c31
    }
    
    .main-nav .main-nav__item--shopping-cart .info-block__link-wrapper {
        overflow: hidden;
        font-size: 11px;
        line-height: 1.5em;
        padding-right: 20px
    }
    
    .main-nav .main-nav__item--shopping-cart .df-icon-stack--bag,
    .main-nav .main-nav__item--shopping-cart .df-icon--shopping-cart {
        display: none
    }
    
    .main-nav .main-nav__item--shopping-cart .info-block__heading {
        margin-bottom: 0;
        float: left;
        font-size: 11px;
        line-height: 1.5em
    }
    
    .main-nav .main-nav__item--shopping-cart .info-block__cart-sum {
        float: right;
        font-size: 11px;
        line-height: 1.5em;
        color: #ffb347
    }
    
    .main-nav .main-nav__back {
        width: 49px;
        height: 44px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 4;
        background-image: url(data:image/svg+xml;
 charset=utf8;
        base64,
        PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMyA4Jz48cGF0aCB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgtMjM4Ljc1IC0xNy43NSknIGZpbGw9JyNmZmYnIGQ9J00yNDAsMjFoMTJ2MkgyNDBWMjFabTAuMTcxLS40MTUsNC4yNDMsNC4yNDNMMjQzLDI2LjI0MiwyMzguNzU3LDIyWm00LjI0My0xLjQxNC00LjI0Myw0LjI0MkwyMzguNzU3LDIyLDI0MywxNy43NTdaJy8+PC9zdmc+);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 13px 8px
    }
    
    .main-nav .main-nav__back:hover {
        cursor: pointer
    }
    
    .main-nav .main-nav__list>li>a::before {
        top: 0;
        bottom: 0;
        width: 4px;
        height: auto
    }
    
    .main-nav .main-nav__list>li>a .highlight {
        color: #ffb347
    }
    
    .main-nav .main-nav__list>li.has-children>a::after {
        display: none
    }
    
    .main-nav .main-nav__list>li.nav-account__item--logout>a {
        color: #6b6d70
    }
    
    .main-nav .main-nav__list>li.nav-account__item--wishlist>a {
        padding-right: 20px
    }
    
    .main-nav .main-nav__list>li.nav-account__item--wishlist .highlight {
        float: right
    }
    
    .main-nav .main-nav__list>li.main-nav__item--social-links {
        text-align: left;
        padding: 0 15px 20px
    }
    
    .main-nav .main-nav__list>li.main-nav__item--social-links>a {
        display: inline-block;
        border-bottom: none;
        padding: 13px
    }
    
    .main-nav .main-nav__list>li.main-nav__item--social-links>a::before {
        display: none
    }
    
    .main-nav__list li:hover .main-nav__sub {
        display: none
    }
    
    .main-nav__list li:hover .main-nav__sub .main-nav__sub-2 {
        display: none
    }
    
    .main-nav__list .main-nav__sub li.has-children>a::after {
        display: none
    }
    
    .main-nav__list .main-nav__sub .main-nav__sub-2 li:hover .main-nav__sub-3 {
        display: none
    }
    
    .main-nav__toggle {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 8px;
        right: 10px;
        display: block;
        cursor: pointer;
        z-index: 1;
        background-image: url(data:image/svg+xml;
 charset=utf8;
        base64,
        PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA2IDQnPjxwYXRoIHRyYW5zZm9ybT0ndHJhbnNsYXRlKC01ODYuMTU2IC0xMDQ3LjI4KScgZmlsbD0nI2ZmZicgZD0nTTU4Ni4xNzEsMTA0OGwwLjcwOC0uNzEsMi44MjgsMi44My0wLjcwNy43MVptNC45NS0uNzEsMC43MDcsMC43MUw1ODksMTA1MC44M2wtMC43MDctLjcxWicvPjwvc3ZnPg==);
        background-size: 6px 4px;
        background-repeat: no-repeat;
        background-position: center center;
        -webkit-transition: all .4s ease;
        transition: all .4s ease
    }
    
    .main-nav__toggle-2 {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 3px;
        right: 15px;
        display: block;
        cursor: pointer;
        z-index: 1;
        background-image: url(data:image/svg+xml;
 charset=utf8;
        base64,
        PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA2IDQnPjxwYXRoIHRyYW5zZm9ybT0ndHJhbnNsYXRlKC01ODYuMTU2IC0xMDQ3LjI4KScgZmlsbD0nI2ZmZicgZD0nTTU4Ni4xNzEsMTA0OGwwLjcwOC0uNzEsMi44MjgsMi44My0wLjcwNy43MVptNC45NS0uNzEsMC43MDcsMC43MUw1ODksMTA1MC44M2wtMC43MDctLjcxWicvPjwvc3ZnPg==);
        background-size: 6px 4px;
        background-repeat: no-repeat;
        background-position: center center;
        -webkit-transition: all .4s ease;
        transition: all .4s ease
    }
    
    .main-nav__toggle--rotate {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
    
    .main-nav__sub-2 {
        width: 100%;
        position: static;
        left: 100%;
        top: 0;
        display: none;
        margin: 0;
        padding: 0!important;
        border: solid 0;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
        visibility: visible
    }
    
    .main-nav__sub-2 li {
        margin: 0;
        padding: 0;
        position: relative
    }
    
    .main-nav__sub-2 li a {
        display: block;
        padding: 10px 25px
    }
    
    .main-nav__sub-2 li:hover>a {
        color: #fff
    }
    
    .main-nav__sub-3 {
        width: 100%;
        position: static;
        left: 100%;
        top: 0;
        display: none;
        margin: 0;
        padding: 0!important;
        border: solid 0;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
        visibility: visible
    }
    
    .main-nav__sub-3 li {
        margin: 0;
        padding: 0;
        position: relative
    }
    
    .main-nav__sub-3 li a {
        display: block;
        padding: 10px 25px
    }
    
    .main-nav__sub-3 li:hover>a {
        color: #fff
    }
    
    .main-nav .main-nav__list {
        border-top: 1px solid #292c31;
        height: 100%;
        overflow-y: auto;
        display: block
    }
    
    .main-nav .main-nav__list>li {
        width: 100%;
        display: block;
        float: none;
        border-right: none;
        background-color: transparent;
        position: relative;
        white-space: inherit
    }
    
    .main-nav .main-nav__list>li>a {
        padding: 16px 30px;
        font-size: 11px;
        text-align: left;
        border-right: solid 0;
        background-color: transparent;
        color: #fff;
        line-height: 1.5em;
        border-bottom: 1px solid #292c31;
        position: static
    }
    
    .main-nav .main-nav__list li.has-children>a::after {
        -webkit-transform: none;
        transform: none;
        top: 13px;
        background-image: url(data:image/svg+xml;
 charset=utf8;
        base64,
        PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA2IDQnPjxwYXRoIHRyYW5zZm9ybT0ndHJhbnNsYXRlKC01ODYuMTU2IC0xMDQ3LjI4KScgZmlsbD0nI2ZmZicgZD0nTTU4Ni4xNzEsMTA0OGwwLjcwOC0uNzEsMi44MjgsMi44My0wLjcwNy43MVptNC45NS0uNzEsMC43MDcsMC43MUw1ODksMTA1MC44M2wtMC43MDctLjcxWicvPjwvc3ZnPg==)
    }
    
    .main-nav__list .main-nav__sub {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
        display: none;
        position: relative;
        top: 0;
        background-color: #292c31;
        border: none;
        padding: 15px 0;
        visibility: visible
    }
    
    .main-nav__list .main-nav__sub li a {
        line-height: 1.5em;
        font-size: 10px;
        padding: 7px 0 7px 40px;
        color: #9a9da2;
        -webkit-transition: color .3s ease;
        transition: color .3s ease;
        border-bottom: none;
        display: block;
        text-align: left;
        font-family: montserrat, sans-serif;
        text-transform: uppercase
    }
    
    .main-nav__list .main-nav__sub li a:hover {
        color: #fff
    }
    
    .main-nav__list .main-nav__sub li:hover>a {
        background-color: transparent;
        color: #fff
    }
    
    .main-nav__list .main-nav__sub li:hover .main-nav__sub-2 {
        background-color: transparent
    }
    
    .main-nav__list .main-nav__sub li .main-nav__sub-2 {
        padding: 15px 0
    }
    
    .main-nav__list .main-nav__sub li .main-nav__sub-2 li a {
        padding-left: 50px
    }
    
    .main-nav__list .main-nav__sub li .main-nav__sub-2 li a:hover {
        background-color: none
    }
    
    .main-nav__list .main-nav__sub li .main-nav__sub-2 li .main-nav__sub-3 li a {
        padding-left: 60px
    }
    
    .main-nav__list .main-nav__megamenu {
        background-color: #292c31;
        color: #9a9da2;
        display: none;
        position: relative;
        top: 0;
        padding: 15px 0;
        border: none;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
        visibility: visible
    }
    
    .main-nav__list .main-nav__megamenu [class^=col-] {
        padding-bottom: 15px
    }
    
    .main-nav__list .main-nav__megamenu [class^=col-]:first-child .main-nav-banner {
        margin-top: 0
    }
    
    .main-nav__list .main-nav__megamenu div[class^=col-] {
        padding-left: 30px;
        padding-right: 30px
    }
    
    .main-nav__list .main-nav__megamenu .row {
        margin: 0
    }
    
    .main-nav__list .main-nav__megamenu .main-nav__title {
        color: #fff;
        font-size: 11px;
        padding: 10px 30px;
        margin: 0
    }
    
    .main-nav__list .main-nav__megamenu .main-nav-banner {
        margin: 15px;
        padding: 0;
        min-height: 56px
    }
    
    .main-nav__list .main-nav__megamenu .main-nav-banner .main-nav-banner__link {
        padding: 15px 20px 15px 56px
    }
    
    .main-nav__list .main-nav__megamenu .main-nav-banner .main-nav-banner__subtitle {
        font-size: 11px
    }
    
    .main-nav__list .main-nav__megamenu .main-nav-banner .main-nav-banner__title {
        font-size: 18px
    }
    
    .main-nav__list .main-nav__megamenu>ul,
    .main-nav__list .main-nav__megamenu .main-nav__ul {
        width: 100%;
        margin: 0;
        padding: 0;
        font-size: 13px
    }
    
    .main-nav__list .main-nav__megamenu>ul>li>a,
    .main-nav__list .main-nav__megamenu .main-nav__ul>li>a {
        padding: 7px 20px 7px 40px;
        line-height: 1.5em;
        font-size: 10px;
        color: #9a9da2
    }
    
    .main-nav__list .main-nav__megamenu>ul>li>a:hover,
    .main-nav__list .main-nav__megamenu .main-nav__ul>li>a:hover {
        color: #fff
    }
    
    .main-nav__list li:hover .main-nav__megamenu {
        display: none;
        position: relative;
        top: 0
    }
    
    .main-nav__list li>.main-nav__sub,
    .main-nav__list li:hover>.main-nav__sub,
    .main-nav__sub li>.main-nav__sub-2,
    .main-nav__sub li:hover>.main-nav__sub-2,
    .main-nav__sub-2 li>.main-nav__sub-3,
    .main-nav__sub-2 li:hover>.main-nav__sub-3,
    .main-nav__list li>.main-nav__megamenu,
    .main-nav__list li:hover>.main-nav__megamenu {
        -webkit-transform: none;
        transform: none;
        visibility: visible
    }
    
    .main-nav__sub li:hover>.main-nav__sub-2,
    .main-nav__sub-2 li>.main-nav__sub-3,
    .main-nav__sub-2 li:hover>.main-nav__sub-3,
    .main-nav__list li>.main-nav__megamenu,
    .main-nav__list li:hover .btn-social-counter {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 0;
        text-align: center;
        margin-left: 5px;
        margin-right: 5px;
        width: 33.3%;
        max-width: 33.3%
    }
}