@charset "UTF-8";

/* ROBOTO REGULAR */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-regular.eot");
    src: local("Roboto Regular"), local("Roboto-Regular"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-regular.eot?#iefix") format("embedded-opentype"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-regular.woff2") format("woff2"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-regular.woff") format("woff"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-regular.ttf") format("truetype"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-regular.svg") format("svg");
}
/* ROBOTO MEDIUM */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-500.eot");
    src: local("Roboto Medium"), local("Roboto-Medium"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-500.eot?#iefix") format("embedded-opentype"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-500.woff2") format("woff2"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-500.woff") format("woff"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-500.ttf") format("truetype"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-500.svg") format("svg");
}
/* ROBOTO BOLD */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-700.eot");
    src: local("Roboto Bold"), local("Roboto-Bold"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-700.eot?#iefix") format("embedded-opentype"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-700.woff2") format("woff2"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-700.woff") format("woff"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-700.ttf") format("truetype"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-700.svg") format("svg");
}
/* ROCA LIGHT */
@font-face {
    font-family: "Roca";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/local/assets/fonts/roca/roca-Light.eot");
    src: local("Roboto Light"), local("Roboto-Light"),
    url("/local/assets/fonts/roca/roca-Light.eot?#iefix") format("embedded-opentype"),
    url("/local/assets/fonts/roca/roca-Light.woff2") format("woff2"),
    url("/local/assets/fonts/roca/roca-Light.woff") format("woff"),
    url("/local/assets/fonts/roca/roca-Light.ttf") format("truetype"),
    url("/local/assets/fonts/roca/roca-Light.svg") format("svg");
}
/* ROCA REGULAR */
@font-face {
    font-family: "Roca";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/local/assets/fonts/roca/roca-Regular.eot");
    src: local("Roboto Regular"), local("Roboto-Regular"),
    url("/local/assets/fonts/roca/roca-Regular.eot?#iefix") format("embedded-opentype"),
    url("/local/assets/fonts/roca/roca-Regular.woff2") format("woff2"),
    url("/local/assets/fonts/roca/roca-Regular.woff") format("woff"),
    url("/local/assets/fonts/roca/roca-Regular.ttf") format("truetype"),
    url("/local/assets/fonts/roca/roca-Regular.svg") format("svg");
}
/* ROCA BOLD */
@font-face {
    font-family: "Roca";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/local/assets/fonts/roca/roca-Bold.eot");
    src: local("Roboto Bold"), local("Roboto-Bold"),
    url("/local/assets/fonts/roca/roca-Bold.eot?#iefix") format("embedded-opentype"),
    url("/local/assets/fonts/roca/roca-Bold.woff2") format("woff2"),
    url("/local/assets/fonts/roca/roca-Bold.woff") format("woff"),
    url("/local/assets/fonts/roca/roca-Bold.ttf") format("truetype"),
    url("/local/assets/fonts/roca/roca-Bold.svg") format("svg");
}
/* ROCA BLACK */
@font-face {
    font-family: "Roca";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/local/assets/fonts/roca/roca-Black.eot");
    src: local("Roboto Black"), local("Roboto-Black"),
    url("/local/assets/fonts/roca/roca-Black.eot?#iefix") format("embedded-opentype"),
    url("/local/assets/fonts/roca/roca-Black.woff2") format("woff2"),
    url("/local/assets/fonts/roca/roca-Black.woff") format("woff"),
    url("/local/assets/fonts/roca/roca-Black.ttf") format("truetype"),
    url("/local/assets/fonts/roca/roca-Black.svg") format("svg");
}

:root {
    --accent-color: #9F9F9F;

    --header-background-color: #1E1E1E;
    --header-text-color: #FFFFFF;
    --header-accent-color:  #9F9F9F;
    --header-logotype-color: #FFFFFF;
    --header-credo-color: #FFFFFF;

    --footer-background-color: #1E1E1E;
    --footer-text-color: #FFFFFF;
    --footer-accent-color: #9F9F9F;
}

/* MAIN SETTINGS */
body {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    font-family: "Roca";
    font-weight: 300;
    font-size: 16px;
    line-height: 1;
    color: #222222;
}
html {
    scroll-behavior: smooth;
}
* {
    box-sizing: border-box;
}
h1, h2, p {
    padding: 0;
    margin: 0;
}

/*Edge - works to 41.16299.402.0*/
@supports (-ms-ime-align:auto) {
    html {
        overflow: hidden;
        height: 100%;
    }
    body {
        overflow: auto;
        height: 100%;
        position: relative;
    }
}
/*Ie 10/11*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    html {
        overflow: hidden;
        height: 100%;
    }
    body {
        overflow: auto;
        height: 100%;
    }
}

@media screen and (min-width: 0) {
    /* INTRO SLIDER */
    .af-intro {
        margin-bottom: 60px;
    }
    .af-intro-slide__image {
        max-width: 100%;
        height: auto;
        position: relative;
    }
    .af-intro-slide__image img {
        height: auto;
        object-fit: cover;
        object-position: center;
    }
    .af-intro-slide__content {
        position: absolute;
        bottom: 100px;
        left: 20px;
        width: 100%;
        max-width: 280px;
        height: auto;
    }
    .af-intro-slide__title {
        font-weight: 900;
        font-size: 40px;
        line-height: 1;
        color: #FFFFFF;
        margin-bottom: 10px;
    }
    .af-intro-slide__text {
        font-weight: 300;
        font-size: 16px;
        line-height: 1.2;
        color: #FFFFFF;
        margin-bottom: 30px;
    }
    .af-intro-slide__button {
        display: inline-block;
        font-family: "Roboto";
        font-weight: 700;
        font-size: 16px;
        line-height: 1;
        padding: 18px 21px;
        color: #FFFFFF;
        border: 1px solid #FFFFFF;
        text-decoration: none;
        transition: linear 200ms;
    }
    .af-intro-slide__button:hover {
        border: 1px solid rgba(255, 255, 255, .8);
        color: rgba(255, 255, 255, .8);
    }
    .af-intro-nav {
        position: absolute;
        top: 72px;
        left: 0;
        padding: 0 20px;
        width: 100%;
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        z-index: 2;
    }
    .af-intro-menu {
        display: none;
    }
    .af-intro-menu__item {
        font-size: 14px;
        line-height: 1;
        color: #FFFFFF;
    }
    .af-intro-logo {
        max-width: 87px;
        height: 58px;
    }
    .af-intro-logo img {
        width: 100%;
    }
    /* owl settings */
    .af-intro .owl-dots {
        position: absolute;
        bottom: 20px;
        left: 10px;
        margin: 0;
    }
    .af-intro .owl-theme .owl-dots .owl-dot{
        border-radius: 0;
        width: 35px;
        height: 2px;
        margin: 15px;
        background-color: rgba(255, 255, 255, .4);
        position: relative;
        z-index: 1;
    }
    .af-intro .owl-theme .owl-dots .owl-dot span {
        border-radius: 0;
        width: 0;
        height: 2px;
        margin: 0;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;

    }
    .af-intro .owl-theme .owl-dots .owl-dot.active span {
        width: 35px;
        background: #FFFFFF;
        transition: linear 6000ms;
    }

    /* CATEGORIES */
    .af-categories {
        margin-bottom: 80px;
    }
    .af-categories-wrapper {
        padding: 0 20px;
    }
    .af-categories__title {
        font-weight: 300;
        font-size: 30px;
        line-height: 1;
        color: #040404;
        text-align: center;
        margin-bottom: 30px;
    }
    .af-categories-sales {
        display: flex;
        width: 220px;
        max-width: 100%;
        height: 62px;
        font-family: "Roboto";
        font-weight: 700;
        font-size: 16px;
        line-height: 1;
        color: rgba(0, 0, 0, .6);
        border: 1px solid rgba(0, 0, 0, .6);
        text-decoration: none;
        justify-content: center;
        align-items: center;
        margin-left: auto;
        margin-right: auto;
        transition: linear 200ms;
        margin-top: 40px;
    }
    .af-categories-sales:hover {
        color: rgba(0, 0, 0, .8);
        border: 1px solid rgba(0, 0, 0, .8);
    }
    .af-categories-cards {
        display: grid;
        grid-template-rows: repeat(5, 1fr);
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 10px;
        width: 100%;
    }
    .af-card-link {
        text-decoration: none;
        display: block;
    }
    .af-categories-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .af-categories-card.af-categories-card__sale {
        padding: 10px;
    }
    .af-categories-card__sale .af-categories-card__img {
        width: 100%;
        height: 100%;
        margin: 0;
    }
    .af-categories-card__img {
        display: block;
        width: 100%;
        height: 150px;
        margin-bottom: 20px;
    }
    .af-categories-card__img img {
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
        object-fit: contain;
        -o-object-position: center;
        object-position: center;
    }
    .af-categories-card__title{
        font-weight: 300;
        font-size: 16px;
        line-height: 1;
        color: #000000;
        text-align: left;
        margin-bottom: 10px;
    }
    .af-categories-card__link {
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        font-family: "Roboto";
        font-weight: 400;
        font-size: 10px;
        line-height: 1;
        color: #9F9F9F;
        white-space: nowrap;
        text-decoration: none;
        transition: linear 200ms;
    }
    .af-categories-card__link:after {
        content: '';
        width: 100%;
        height: 10px;
        margin-left: 5px;
        border-bottom: 1px solid #9F9F9F;
    }
    .af-categories-card__link:hover {
        color: var(--header-background-color);
    }
    /* gift */
    .af-categories-card.card-gift {
        background-image: url(/upload/medialibrary/4a9/3hcy2i7exd0y3dila66ir6utp9dtjy1a/card_gift_bg_mobile.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    .af-categories-card__img.card-gift__img {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .af-categories-card__img .gift__desctop {
        display: none;
    }
    .af-categories-card__img .gift__mobile {
        display: block;
        width: 50px;
        height: 50px;
    }

    /* BESTSELLER */
    .af-bestseller {
        margin-bottom: 70px;
    }
    .af-bestseller-wrapper {
        padding: 0 20px;
    }
    .af-bestseller__title {
        font-weight: 300;
        font-size: 30px;
        line-height: 1;
        color: #040404;
        text-align: center;
        margin-bottom: 10px;
    }
    .af-bestseller-slider {
        padding: 0 40px;
    }
    .af-product {
        padding: 20px;
        margin: 10px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.08);
        position: relative;
    }
    .af-product:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 20px;
        height: 20px;
        background-image: url(../img/icon.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;

    }
    .af-bestseller .af-product-image {
        display: block;
        margin-bottom: 35px;
        height: 32vw;
        max-height: 150px;
    }
    .af-bestseller .af-product-image img {
        display: block;
        height: 100%;
        object-fit: scale-down;
    }
    .af-bestseller .af-product-collection {
        font-family: 'Roboto';
        font-weight: 400;
        font-size: 10px;
        line-height: 1;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: #00538B;
        margin-bottom: 10px;
    }
    .af-bestseller .af-product-title {
        text-decoration: none;
        font-weight: 400;
        font-size: 14px;
        line-height: 1.4;
        color: #000000;
        margin: 0;
        margin-bottom: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -moz-box;
        -moz-box-orient: vertical;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        line-clamp: 4;
        box-orient: vertical;
    }
    .af-bestseller .af-product-code {
        font-family: 'Roboto';
        font-weight: 500;
        font-size: 10px;
        line-height: 1;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #000000;
        opacity: .5;
        margin-bottom: 10px;
    }
    .af-bestseller .af-product-prices {
        margin-bottom: 10px;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: flex-end;
    }
    .af-bestseller .af-product-price__new {
        font-weight: 400;
        font-size: 14px;
        line-height: 1;
        color: #00538B;
        margin-right: 10px;
    }
    .af-bestseller .af-product-price__old {
        font-weight: 400;
        font-size: 12px;
        line-height: 1;
        text-decoration: line-through;
    }
    .af-bestseller .af-product-link {
        text-decoration: none;
        display: inline-block;
        width: 100%;
        padding: 10px 0;
        text-align: center;
        color: rgba(0, 0, 0, .5);
        border: 1px solid rgba(0, 0, 0, .5);
        font-weight: 400;
        font-size: 14px;
        line-height: 1;
        transition: linear 200ms;
    }
    /* owl settings */
    .af-bestseller .owl-theme .owl-nav {
        margin: 0;
    }
    .af-goods-control__prev,
    .af-goods-control__next {
        position: absolute;
        top: calc(50% - 15px);
        width: 15px;
        height: 30px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        cursor: pointer;
        transition: linear 200ms;
    }
    .af-goods-control__prev {
        left: 0;
        background-image: url(../img/arrow-right__black.svg);
        transform: rotate(180deg);
    }
    .af-goods-control__next {
        right: 0;
        background-image: url(../img/arrow-right__black.svg);
    }
    .af-goods-control__prev:hover,
    .af-goods-control__next:hover {
        opacity: 0.6;
    }

    /* ABOUT */
    .af-about {
        position: relative;
        margin-bottom: 80px;
    }
    .af-about__image {
        display: block;
        width: 100%;
    }
    .af-about__image img {
        width: 100%;
    }
    .af-about-content {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 20px;
        width: 100%;
        max-width: 280px;
        height: auto;
    }
    .af-about-content__title {
        font-weight: 900;
        font-size: 40px;
        line-height: 1;
        color: #FFFFFF;
        margin-bottom: 20px;
    }
    .af-about-content__text {
        line-height: 1.2;
        color: #FFFFFF;
        margin-bottom: 30px;
    }
    .af-about-content__button {
        display: inline-block;
        font-family: "Roboto";
        font-weight: 700;
        font-size: 16px;
        line-height: 1;
        padding: 18px 21px;
        color: #FFFFFF;
        border: 1px solid #FFFFFF;
        text-decoration: none;
        cursor: pointer;
        transition: linear 200ms;
    }
    .af-about-content__button:hover {
        border: 1px solid rgba(255, 255, 255, .8);
        color: rgba(255, 255, 255, .8);
    }

    /* VIDEOS */
    .af-videos {
        margin-bottom: 80px;
    }
    .af-videos-wrapper {
        padding: 0 20px;
    }
    .af-videos__title {
        font-size: 30px;
        font-weight: 300;
        line-height: 1;
        color: #040404;
        text-align: center;
        margin-bottom: 30px;
    }
    .af-videos-slider {
        padding: 0 50px;
    }
    .af-videos-slide video {
        margin-bottom: 10px;
        height: 38vw;
        width: 100%;
        object-fit: cover;
        object-position: center;
    }
    .af-videos-slide__text {
        font-weight: 400;
        font-size: 20px;
        line-height: 1.1;
        color: #000000;
    }
    /* owl settings */
    .af-videos .owl-theme .owl-nav {
        margin: 0;
    }
    .af-video-control__prev,
    .af-video-control__next {
        position: absolute;
        top: calc(19vw - 15px);
        width: 15px;
        height: 30px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        cursor: pointer;
        transition: linear 200ms;
    }
    .af-video-control__prev {
        left: 0;
        background-image: url(../img/arrow-right__black.svg);
        transform: rotate(180deg);
    }
    .af-video-control__next {
        right: 0;
        background-image: url(../img/arrow-right__black.svg);
    }
    .af-video-control__prev:hover,
    .af-video-control__next:hover {
        opacity: 0.6;
    }
}
@media screen and (min-width: 768px) {
    /* INTRO SLIDER */
    .af-intro {
        margin-bottom: 90px;
    }
    .af-intro-slide__content {
        bottom: 150px;
        left: 35px;
        max-width: 386px;
    }
    .af-intro-slide__title {
        font-size: 70px;
        margin-bottom: 20px;
    }
    .af-intro-slide__text {
        font-size: 20px;
        line-height: 1.5;
    }
    .af-intro-slide__button {
        padding: 22px 24px;
    }
    .af-intro-nav {
        height: 100px;
        padding: 0 35px;
        justify-content: space-between;
    }
    .af-intro-menu {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 1px solid #FFFFFF;
        height: 100px;
        width: calc(100% - 180px);
    }
    .af-intro-logo {
        max-width: 150px;
        height: 100px;
    }
    .af-intro-menu__item {
        text-decoration: none;
        font-size: 14px;
        line-height: 1;
        color: #FFFFFF;
    }
    .af-intro-menu__item:not(:last-child) {
        margin-right: 30px;
    }
    /* owl settings */
    .af-intro .owl-dots {
        bottom: 70px;
        left: 20px;
    }

    .af-intro .owl-theme .owl-dots .owl-dot{
        width: 50px;
        background-color: rgba(255, 255, 255, 0.4);
    }
    .af-intro .owl-theme .owl-dots .owl-dot span {
        margin: 0;
        background-color: #FFFFFF;
    }
    .af-intro .owl-theme .owl-dots .owl-dot.active span {
        width: 50px;
    }

    /* CATEGORIES */
    .af-categories {
        margin-bottom: 140px;
    }
    .af-categories-wrapper {
        padding: 0 35px;
    }
    .af-categories__title {
        font-size: 40px;
        margin-bottom: 40px;
    }
    .af-categories-cards {
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
        "card1 card2 card3"
        "card4 card5 card6"
        "card7 card8 card9"
        "card10 card11 card12";
        grid-gap: 20px;
    }
    .af-categories-card {
        padding: 25px;
    }
    .af-categories-card.card_1 {
        grid-area: card1;
    }
    .af-categories-card.card_2 {
        grid-area: card2;
    }
    .af-categories-card.card_3 {
        grid-area: card3;
    }
    .af-categories-card.card_4 {
        grid-area: card4;
    }
    .af-categories-card.card_5 {
        grid-area: card5;
    }
    .af-categories-card.card_6 {
        grid-area: card6;
    }
    .af-categories-card.card_7 {
        grid-area: card7;
    }
    .af-categories-card.card_8 {
        grid-area: card8;
    }
    .af-categories-card.card_9 {
        grid-area: card9;
    }
    .af-categories-card.card_10 {
        grid-area: card10;
    }
    .af-categories-card__img {
        height: 220px;
    }
    .af-categories-card__title{
        font-size: 20px;
    }
    .af-categories-card__link {
        font-size: 15px;
    }
    .af-categories-card__link:after {
        height: 15px;
        margin-left: 10px;
    }
    /* gift */
    .af-categories-card.card-gift {
        background-image: url(/upload/medialibrary/74c/9l1f3m76ax81c8g7g0yx2aa9irmi8fd0/card_gift_bg_tablet.png);
        grid-area: card-gift;
    }
    .af-categories-card__img.card-gift__img {
        justify-content: space-between;
        margin: 0 auto;
        padding: 0 110px;
        width: 100%;
    }
    .af-categories-card__img .gift__desctop {
        display: block;
        width: 68px;
        height: 68px;
    }
    .af-categories-card__img .gift__mobile {
        display: block;
        width: 68px;
        height: 68px;
    }

    /* BESTSELLER */
    .af-bestseller {
        margin-bottom: 170px;
    }
    .af-bestseller-wrapper {
        padding: 0 35px;
    }
    .af-bestseller__title {
        font-size: 40px;
        margin-bottom: 30px;
    }
    .af-bestseller-slider {
        padding: 0 50px;
    }
    .af-product {
        padding: 25px;
    }
    .af-product:after {
        width: 30px;
        height: 30px;
    }
    .af-bestseller .af-product-image {
        margin-bottom: 50px;
    }
    .af-bestseller .af-product-title {
        font-size: 20px;
        line-height: 1.2;
    }
    .af-bestseller .af-product-price__new {
        font-size: 16px;
    }
    .af-bestseller .af-product-price__old {
        font-size: 14px;
    }
    /* owl settings */
    .af-goods-control__prev,
    .af-goods-control__next {
        top: calc(50% - 20px);
        width: 20px;
        height: 40px;
    }

    /* ABOUT */
    .af-about {
        margin-bottom: 140px;
    }
    .af-about-content {
        left: 35px;
        max-width: 520px;
    }
    .af-about-content__title {
        font-size: 70px;
        margin-bottom: 40px;
    }
    .af-about-content__text {
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 70px;
    }
    .af-about-content__button {
        padding: 23px 24px;
    }

    /* VIDEOS */
    .af-videos {
        margin-bottom: 120px;
    }
    .af-videos-wrapper {
        padding: 0 35px;
    }
    .af-videos__title {
        font-size: 40px;
    }
    .af-videos-slider {
        padding: 0 60px;
    }
    .af-videos-slide video {
        margin-bottom: 20px;
        height: 24vw;
    }
    /* owl settings */
    .af-video-control__prev,
    .af-video-control__next {
        top: calc(12vw - 20px);
        width: 20px;
        height: 40px;
    }
}
@media screen and (max-width: 1023px) {
    .af-page.af-roca .af-product-tags {
        display: none;
    }
}
@media screen and (min-width: 1024px) {
    /* INTRO SLIDER */
    .af-intro {
        margin-bottom: 120px;
    }
    .af-intro-slide__content {
        bottom: 0;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
        max-width: 1740px;
        width: 100%;
        padding: 0 50px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    .af-intro-slide__title {
        font-size: 70px;
        margin-bottom: 20px;
    }
    .af-intro-slide__text {
        font-size: 20px;
        line-height: 1.5;
        max-width: 386px;
    }
    .af-intro-slide__button {
        padding: 22px 24px;
    }
    .af-intro-nav {
        padding: 0 50px;
    }

    /* owl settings */
    .af-intro .owl-dots {
        display: flex;
        justify-content: flex-start;
        max-width: 1740px;
        width: 100%;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        padding: 0 50px;
    }
    .af-intro .owl-theme .owl-dots .owl-dot {
        position: relative;
        cursor: pointer;
        background-color: rgba(255, 255, 255, .4);
    }
    .af-intro .owl-theme .owl-dots .owl-dot span {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        margin: 0;
        background-color: #FFFFFF;
    }
    .af-intro .owl-theme .owl-dots .owl-dot.active span {
        width: 50px;
    }
    .af-intro .owl-theme .owl-dots .owl-dot:first-child {
        margin-left: 0;
    }

    /* CATEGORIES */
    .af-categories {
        margin-bottom: 160px;
    }
    .af-categories-wrapper {
        padding: 0 50px;
        max-width: 1740px;
        width: 100%;
        margin: 0 auto;
    }
    .af-categories__title {
        font-size: 50px;
        margin-bottom: 60px;
    }
    .af-categories-cards {
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas:
        "card1 card2 card3 card4"
        "card5 card6 card7 card8"
        "card9 card10 card11 card12"
    ;
        grid-gap: 20px;
    }
    .af-categories-card {
        padding: 25px;
    }
    .af-categories-card.card_1 {
        grid-area: card1;
    }
    .af-categories-card.card_2 {
        grid-area: card2;
    }
    .af-categories-card.card_3 {
        grid-area: card3;
    }
    .af-categories-card.card_4 {
        grid-area: card4;
    }
    .af-categories-card.card_5 {
        grid-area: card5;
    }
    .af-categories-card.card_6 {
        grid-area: card6;
    }
    .af-categories-card.card_7 {
        grid-area: card7;
    }
    .af-categories-card.card_8 {
        grid-area: card8;
    }
    .af-categories-card.card_9 {
        grid-area: card9;
    }
    .af-categories-card__img {
        height: 220px;
    }
    .af-categories-card__title{
        font-size: 26px;
    }
    /* gift */
    .af-categories-card.card-gift {
        background-image: url(/upload/medialibrary/925/bvstek0gmx7rst53fbb4fuqn68nhpwdf/card_gift_bg_desctop.png);
        grid-area: card-gift;
    }

    /* BESTSELLER */
    .af-bestseller {
        margin-bottom: 160px;
    }
    .af-bestseller-wrapper {
        max-width: 1740px;
        width: 100%;
        padding: 0 50px;
        margin: 0 auto;
    }
    .af-bestseller__title {
        font-size: 50px;
        margin-bottom: 40px;
    }
    .af-bestseller-slider {
        padding: 0 90px;
    }
    .af-product {
        padding: 30px;
        margin: 20px;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08);
    }
    .af-bestseller .af-product-image {
        max-height: 180px;
    }
    .af-bestseller .af-product-price__new {
        font-size: 14px;
    }
    .af-bestseller .af-product-price__old {
        font-size: 12px;
    }
    .af-bestseller .af-product-link:hover {
        color: #000000;
        border-color: #000000;
    }
    .af-page.af-roca .af-product-tags {
        display: block;
        width: calc(100% - 20px);
        height: auto;
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 1;
    }
    .af-page.af-roca .af-product-tags .af-commoncontent-container {
        display: flex;
        width: 100%;
        flex-direction: column;
        flex-wrap: wrap;
    }
    .af-page.af-roca .af-product-tag,
    .af-page.af-roca .af-product-tags .af-commoncontent {
        display: flex;
        width: 100%;
        max-width: 28px;
        overflow: hidden;
        height: auto;
        flex-flow: row nowrap;
        transition: 300ms ease;
        margin: 0 0 5px 0;
    }
    .af-page.af-roca .af-product-tag > a,
    .af-page.af-roca .af-product-tags .af-commoncontent > a {
        display: flex;
        flex-flow: row nowrap;
        margin: 0;
        white-space: nowrap;
    }
    .af-page.af-roca .af-product-tag:hover,
    .af-page.af-roca .af-product-tags .af-commoncontent:hover {
        max-width: 300px;
    }
    /* owl settings */
    .af-goods-control__prev,
    .af-goods-control__next {
        top: calc(50% - 30px);
        width: 30px;
        height: 60px;
    }

    /* ABOUT */
    .af-about {
        margin-bottom: 150px;
    }
    .af-about-content {
        max-width: 1740px;
        width: 100%;
        padding: 0 50px;
        margin: 0 auto;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
    }
    .af-about-content__title,
    .af-about-content__text{
        max-width: 520px;
    }

    /* VIDEOS */
    .af-videos {
        margin-bottom: 120px;
    }
    .af-videos-wrapper {
        max-width: 1740px;
        width: 100%;
        padding: 0 50px;
        margin: 0 auto;
    }
    .af-videos__title {
        font-size: 50px;
    }
    .af-videos-slider {
        padding: 0 60px;
        max-width: 1740px;
        margin: 0 auto;
    }
    .af-videos-slide video {
        margin-bottom: 20px;
        height: 36vw;
        max-height: 371px;
    }
    /* owl settings */
    .af-video-control__prev,
    .af-video-control__next {
        top: 40%;
        width: 30px;
        height: 60px;
    }
}
@media screen and (min-width: 1440px) {
    .af-intro-nav {
        max-width: 1740px;
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
    }
    .af-intro-menu {
        width: calc(100% - 250px);
    }
    .af-intro-menu__item {
        font-size: 20px;
    }
    .af-intro-menu__item:not(:last-child) {
        margin-right: 50px;
    }
    .af-intro .owl-dots {
        bottom: 100px;
    }
    .af-intro .owl-dot {
        cursor: pointer;
    }
    .af-categories-cards {
        grid-gap: 40px;
    }
    .af-categories-card__img.card-gift__img {
        padding: 0 200px;
    }
    .af-product {
        padding: 30px;
        margin: 20px;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08);
    }
    .af-bestseller .af-product-price__new {
        font-size: 18px;
    }
    .af-bestseller .af-product-price__old {
        font-size: 16px;
    }
    .af-videos-slider {
        padding: 0 145px;
    }
}