/* *** MAIN STYLES *** */

/* FONTS */
@font-face {
    font-family: DejaVuSerifCondensed;
    src: url("../files/fonts/DejaVu_Serif/DejaVuSerifCondensed.ttf");
}
@font-face {
    font-family: DejaVuSerifCondensed-Bold;
    src: url("../files/fonts/DejaVu_Serif/DejaVuSerifCondensed-Bold.ttf");
}
@font-face {
    font-family: DejaVuSerifCondensed-BoldItalic;
    src: url("../files/fonts/DejaVu_Serif/DejaVuSerifCondensed-BoldItalic.ttf");
}
@font-face {
    font-family: DejaVuSerifCondensed-Italic;
    src: url("../files/fonts/DejaVu_Serif/DejaVuSerifCondensed-Italic.ttf");
}
@font-face {
    font-family: DINPro-Bold;
    src: url("../files/fonts/DINPro/DINPro-Bold.ttf");
}
@font-face {
    font-family: DINPro-Light;
    src: url("../files/fonts/DINPro/DINPro-Light.ttf");
}
@font-face {
    font-family: DINPro-Medium;
    src: url("../files/fonts/DINPro/DINPro-Medium.ttf");
}
@font-face {
    font-family: DINPro-Regular;
    src: url("../files/fonts/DINPro/DINPro-Regular.ttf");
}
/* END FONTS */

/* CATEGORY BUTTONS BACKGROUNDS */
.category-1 {
    background-image: url("../files/img/svg/buttons-categories/category-1.svg") !important;
}
.category-1:hover {
    background-image: url("../files/img/svg/buttons-categories/category-1-hover.svg") !important;
}

.category-2 {
    background-image: url("../files/img/svg/buttons-categories/category-2.svg") !important;
}
.category-2:hover {
    background-image: url("../files/img/svg/buttons-categories/category-2-hover.svg") !important;
}

.category-3 {
    background-image: url("../files/img/svg/buttons-categories/category-3.svg") !important;
}
.category-3:hover {
    background-image: url("../files/img/svg/buttons-categories/category-3-hover.svg") !important;
}

.category-11 {
    background-image: url("../files/img/svg/buttons-categories/category-11.svg") !important;
}
.category-11:hover {
    background-image: url("../files/img/svg/buttons-categories/category-11-hover.svg") !important;
}

.category-4 {
    background-image: url("../files/img/svg/buttons-categories/category-4.svg") !important;
}
.category-4:hover {
    background-image: url("../files/img/svg/buttons-categories/category-4-hover.svg") !important;
}

.category-5 {
    background-image: url("../files/img/svg/buttons-categories/category-5.svg") !important;
}
.category-5:hover {
    background-image: url("../files/img/svg/buttons-categories/category-5-hover.svg") !important;
}

.category-6 {
    background-image: url("../files/img/svg/buttons-categories/category-6.svg") !important;
}
.category-6:hover {
    background-image: url("../files/img/svg/buttons-categories/category-6-hover.svg") !important;
}

.category-7 {
    background-image: url("../files/img/svg/buttons-categories/category-7.svg") !important;
}
.category-7:hover {
    background-image: url("../files/img/svg/buttons-categories/category-7-hover.svg") !important;
}

.category-9 {
    background-image: url("../files/img/svg/buttons-categories/category-9.svg") !important;
}
.category-9:hover {
    background-image: url("../files/img/svg/buttons-categories/category-9-hover.svg") !important;
}

.category-10 {
    background-image: url("../files/img/svg/buttons-categories/category-10.svg") !important;
}
.category-10:hover {
    background-image: url("../files/img/svg/buttons-categories/category-10-hover.svg") !important;
}

.category-8 {
    background-image: url("../files/img/svg/buttons-categories/category-8.svg") !important;
}
.category-8:hover {
    background-image: url("../files/img/svg/buttons-categories/category-8-hover.svg") !important;
}

.ves\'_asortyment {
    background-image: url("../files/img/svg/buttons-categories/ves'_asortyment.svg") !important;
}
.ves\'_asortyment:hover {
    background-image: url("../files/img/svg/buttons-categories/ves'_asortyment-hover.svg") !important;
}
/* END CATEGORY BUTTONS BACKGROUNDS */

body {
    margin: 0;
}

/* HEADER */
.header {
    background-color: #242424;
    height: 33px;
    width: 100%;
    color: white;
    font-size: 14px;
    opacity: 0.9;
    font-family: DINPro-Light, Helvetica, Arial, serif;
    text-align: center;
}
.header-fixed {
    position: fixed;
    z-index: 99;
}

a.nav {
    position: relative;
    top: -22px;
    text-decoration: none;
    color: #FFFFFF;
}
a.nav:hover {
    color: #82C6D1;
}
a.nav-left {
    right: 27%;
}
a.nav-right {
    left: 27%;
}
a.active {
    color: #82C6D1;
}

img.logo {
    width: 126px;
    cursor: pointer;
}
/* END HEADER */

/* MAIN */
main {
    padding-top: 33px;
    margin: 0;
}

/* home */
.list-categories__wrapper {
    position: fixed;
    z-index: 99;
    margin-left: 11%;
    background-color: #8FCAD5;
    width: 135px;
    padding: 0 30px;
    display: none;
}
ul.list-categories {
    padding: 0;
    font-family: DINPro-Regular, Helvetica, Arial, serif;
    font-size: 14px;
}
ul.list-categories li {
    color: #FFFFFF;
    list-style-type: none;
    line-height: 40px;
}
ul.list-categories li:hover {
    font-size: 15px;
}
ul.list-categories a {
    text-decoration: none;
    color: inherit;
}
ul.list-categories hr {
    color: white;
    border: 0;
    height: 1px;
    background-color: white;
}

#logo-main {
    background-image: url('../files/img/svg/background-main.svg');
    width: 100%;
    height: 53vw;
    background-size: cover;
}
#logo-main .img__wrapper {
    width: 100%;
    text-align: center;
}
#logo-main img.konfeti-confectionery {
    width: 43vw;
    margin-top: 14vw;
}
#logo-main img.cookie-heart {
    width: 8vw;
    cursor: pointer;
    padding: 3vw 6vw;
}

#konfeti-about {
    background-image: url('../files/img/svg/background_rose-strips_slant.svg');
    width: 100%;
    height: 17vw;
    background-size: cover;
    text-align: center;
    color: #202020;
}
h1.konfeti-about-title {
    font-family: DejaVuSerifCondensed-BoldItalic, Helvetica, Arial, serif;
    font-size: 1.8vw;
    width: 25vw;
    margin: auto;
    padding: 4vw 0 1vw;
}
.konfeti-about-description {
    font-family: DINPro-Regular, Helvetica, Arial, serif;
    font-size: 1.05vw;
    width: 41vw;
    margin: auto;
}

#products-categories {
    background-image: url('../files/img/svg/background_blue-strips_slant_curved.svg');
    width: 100%;
    height: 31.5vw;
    background-size: cover;
    text-align: center;
}

h3.caption-products {
    font-family: DejaVuSerifCondensed-BoldItalic, Helvetica, Arial, serif;
    font-size: 3vw;
    margin: 0;
    padding-top: 6.5vw;
}
.caption-by_categories {
    font-family: DINPro-Regular, Helvetica, Arial, serif;
    font-size: 2vw;
}

.categories-table {
    display: inline-flex;
    flex-wrap: wrap;
    padding: 0 6.5vw;
    margin-top: 1.5vw;
}
.category-cell {
    cursor: pointer;
    margin: 1vw auto;
    background-repeat: round;
    background-image: url("../files/img/svg/buttons-categories/background-button.svg");
    font-family: DINPro-Regular, Helvetica, Arial, serif;
    font-size: 1.1vw;
    color: #202020;
    text-decoration: none;
}
.category-cell:hover {
    color: #FFFFFF;
}
.category-cell span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 12.5vw;
    height: 5vw;
}
.category-cell.ves\'_asortyment span {
    position: relative;
    top: 3.2vw;
}

main.home .pink-line {
    height: 1vw;
    background-color: #FFC6BF;
}

#download-catalog {
    width: 100%;
    height: 18vw;
    text-align: center;
}
#download-catalog h3 {
    margin: 5vw 0 1vw;
    font-family: DejaVuSerifCondensed-BoldItalic, Helvetica, Arial, serif;
    font-size: 1.7vw;
    color: #414042;
}
#download-catalog img {
    width: 13vw;
}
#download-catalog img:hover {
    width: 14vw;
}

#novelties {
    background-image: url('../files/img/svg/novelties-background.svg');
    width: 100%;
    height: 31.5vw;
    background-size: cover;
    text-align: center;
}
#novelties h3 {
    font-family: DejaVuSerifCondensed-BoldItalic, Helvetica, Arial, serif;
    font-size: 3vw;
    margin: 0;
    padding: 14.5vw 0 0;
}
hr.hr-dark-solid-wide {
    height: 2px;
    width: 100%;
    background-color: #414042;
    border: none;
    margin: 0;
}

#cantuccini {
    text-align: right;
}
#cantuccini .banner {
    background-image: url('../files/img/svg/cantuccini.svg');
    width: 100%;
    height: 18vw;
    background-size: cover;
}
#cantuccini .position {
    margin: 1.5vw 0 1.5vw;
}
#cantuccini .caption {
    color: #414042;
    width: 37vw;
    float: left;
    margin-left: 11vw;
}
h3.cantuccini-title {
    margin: 3vw 2vw 1.6vw 0;
    font-family: DejaVuSerifCondensed-BoldItalic, Helvetica, Arial, serif;
    font-size: 1.7vw;
}
.cantuccini-description {
    font-family: DINPro-Light, Helvetica, Arial, serif;
    font-size: 1.05vw;
}
.cantuccini-photo {
    width: 50vw;
}

#mini_grissini {
    text-align: right;
    margin-top: 12vw;
}
#mini_grissini .banner {
    background-image: url('../files/img/svg/mini_grissini.svg');
    width: 100%;
    height: 20vw;
    background-size: cover;
}
#mini_grissini .position {
    margin: 1.5vw 0 1.5vw;
}
#mini_grissini .caption {
    color: #414042;
    width: 37vw;
    float: left;
    margin-left: 20vw;
}
h3.mini_grissini-title {
    margin: 3vw 2vw 1.6vw 0;
    font-family: DejaVuSerifCondensed-BoldItalic, Helvetica, Arial, serif;
    font-size: 1.7vw;
}
.mini_grissini-description {
    font-family: DINPro-Light, Helvetica, Arial, serif;
    font-size: 1.05vw;
}
.mini_grissini-photo {
    width: 24vw;
    margin-right: 12vw;
}

#button-all-products {
    text-align: center;
    height: 5vw;
    margin-top: 7vw;
}
#button-all-products img {
    width: 17vw;
    cursor: pointer;

    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
}
#button-all-products img.hover {
    width: 18vw;
}
#button-all-products a {
    font-family: DejaVuSerifCondensed-BoldItalic, Helvetica, Arial, serif;
    font-size: 1.65vw;
    text-decoration: none;
    color: black;
    display: block;
    width: 18vw;
    margin: -4.3vw auto 0;

    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
}
#button-all-products a.hover {
    font-size: 1.8vw;
    margin-top: -4.5vw;
}

/* end home */

/* products */
#products-panel-top {
    background-image: url('../files/img/svg/konfeti-all_products-top.svg');
    width: 100%;
    height: 33.2vw;
    background-size: cover;
}

#products-panel-center {
    margin: 7vw 4vw 0;
}

.category-products {
    margin-bottom: 3.5vw;
}

.category-title__wrapper {
    height: 7vw;
}
.category-title__wrapper a {
    text-decoration: none;
    color: black;
    width: 40vw;
}

.category-products h3 {
    margin: 0;
    font-family: DejaVuSerifCondensed-BoldItalic, Helvetica, Arial, serif;
    font-size: 3vw;
    cursor: pointer;
}
.category-products h3:hover {
    font-size: 3.2vw;
}

.products-list {
    display: inline-flex;
    flex-wrap: wrap;
}

.products-list .category-product {
    margin: 0 2vw 3vw 0;
}

.category-product img {
    width: 13vw;
}

hr.hr-black-solid {
    color: black;
    border: 0;
    background-color: black;
    height: 1px;
}
/* end products */

/* category */
.category .panel-left {
    position: fixed;
    z-index: 98;
}
ul.menu-categories {
    margin: 5.5vw 5vw;
    font-family: DINPro-Regular, Helvetica, Arial, serif;
    font-size: 1.1vw;
}
ul.menu-categories li {
    color: black;
    list-style-image: url("../files/img/png/list-style-image-black.png");
    line-height: 2.5vw;
}
ul.menu-categories li.current, ul.menu-categories li:hover {
    color: #82C6D1;
    list-style-image: url("../files/img/png/list-style-image-current.png");
}
ul.menu-categories a {
    text-decoration: none;
    color: inherit;
}

.category-panel-center {
    text-align: center;
}
.category-title {
    font-family: DejaVuSerifCondensed-Bold, Helvetica, Arial, serif;
    font-size: 5vw;
    margin: 4vw 0 4vw 15vw;
}

.product {
    margin-left: 15vw;
}
img.product-img {
    width: 45vw;
}
.product-caption {
    width: 34vw;
    margin: 1.4vw 6vw 2vw auto;
}
.product-name {
    font-family: DejaVuSerifCondensed-BoldItalic, Helvetica, Arial, serif;
    font-size: 1.85vw;
    margin: 0 2vw 0 0;
    text-align: right;
}
.product-description {
    font-family: DINPro-Light, Helvetica, Arial, serif;
    font-size: 1.1vw;
    color: #414042;
    text-align: right;
}
hr.hr-grey-black {
    color: black;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, #ccc 21vw, black 21vw);
}
hr.hr-indent-bottom {
    margin-bottom: 15vw;
}

#button-next {
    background-color: #FFFFFF;
    margin-top: -15vw;
    padding-top: 7vw;
    height: 6.5vw;
    padding-bottom: 6vw;
}
#button-next .button {
    text-align: center;
    height: 6.5vw;
}
#button-next .button img {
    width: 17vw;
    cursor: pointer;
}
#button-next .button a {
    font-family: DejaVuSerifCondensed-BoldItalic, Helvetica, Arial, serif;
    font-size: 1.65vw;
    text-decoration: none;
    color: black;
    display: block;
    width: 18vw;
    margin: -4.3vw auto 0;
}
/* end category */

/* END MAIN */

/* FOOTER */
#contacts {
    outline: none;
    background-color: #FFFFFF;
}
.callMe {
    background-image: url('../files/img/svg/callme-background.svg');
    width: 100%;
    height: 27vw;
    background-size: cover;
}
.form-callMe__wrapper {
    text-align: left;
    width: 75vw;
    margin: auto;
    font-family: DINPro-Regular, Helvetica, Arial, serif;
    font-size: 1.1vw;
    padding-top: 10vw;
}
.callMe h3 {
    font-family: DejaVuSerifCondensed-BoldItalic, Helvetica, Arial, serif;
    font-size: 2.85vw;
    margin: 0;
}

input.error {
    box-shadow: 0 0 10px red inset;
}

form#form-callMe {
    margin: 3vw 0 2vw;
}
form#form-callMe input {
    border: 0.1vw solid black;
    border-radius: 0.4vw;
    padding: 0.5vw 1.1vw;
    outline: none;
    font-size: 1vw;
}
form#form-callMe input::placeholder {
    color: #B7B8B7;
    opacity: 1;
}
input.Name {
    width: 30vw;
    margin-right: 1.3vw;
}
input.Phone {
    width: 15vw;
    margin-left: 1.3vw;
    margin-right: 1.3vw;
}
input.Email {
    width: 22vw;
    margin-left: 1.3vw;
}

#form-callMe-submit {
    width: 1.6vw;
    border-radius: 50%;
    background-color: #82C6D1;
    padding: 0.6vw;
    cursor: pointer;
    margin: auto;
}
#form-callMe-submit:hover {
    box-shadow: 0 0 10px #82C6D1;
}

.footer-info {
    background: #202020 url('../files/img/svg/konfeti-footer-clipped.svg');
    width: 100%;
    height: 17vw;
    background-size: cover;
    color: #F2CB97;
    font-family: DINPro-Light, Helvetica, Arial, serif;
    font-size: 1.05vw;
}
.footer-info img.made_in_ukraine {
    width: 16vw;
    margin: 3vw 0 0 3vw;
}

.konfeti_year-caption {
    width: 5vw;
    position: relative;
    top: -4vw;
    display: inline-block;
}
.konfeti_year-caption p {
    margin: 0;
}
.konfeti_year-caption p.year {
    font-family: DINPro-Regular, Helvetica, Arial, serif;
    font-size: 1.65vw;
}

.addresses {
    float: right;
    text-align: right;
    margin-top: 5vw;
    margin-right: 6vw;
}
.addresses p {
    margin: 0;
    line-height: 1.4vw;
}
.addresses p a{
    text-decoration: none;
    color: inherit;
}
/* END FOOTER */

/****************/
/*** ADAPTIVE ***/
/****************/

/* >2300 */
@media (min-width: 2300px) {
    /* MAIN */
    /* home */
    .categories-table {
        padding: 0 18vw;
    }
    .category-cell {
        font-size: 0.85vw;
    }
    .category-cell span {
        height: 3vw;
        width: 9.5vw;
    }
    /* end home */
}

/* 2000-2300 */
@media (min-width: 2000px) and (max-width: 2300px){
    /* MAIN */
    /* home */
    .categories-table {
        padding: 0 15vw;
    }
    .category-cell span {
        height: 4vw;
        width: 10.5vw;
    }
    /* end home */
}

/* 1600-2000 */
@media (min-width: 1600px) and (max-width: 2000px){
    /* MAIN */
    /* home */
    .categories-table {
        padding: 0 10vw;
    }
    .category-cell span {
        height: 4vw;
        width: 11.5vw;
    }
    /* end home */
}

/* >750 */
@media (min-width: 750px) {
    .hide-on-desktop {
        display: none;
    }
}

/* <750 */
@media (max-width: 750px) {
    .hide-on-mobile {
        display: none;
    }

    /* HEADER */
    a.nav-left {
        right: 7vw;
    }
    a.nav-right {
        left: 7vw;
    }

    a[href="#menu"] {
        padding-right: 4vw;
    }
    a[href="#menu"]:hover {
        color: #FFFFFF;
    }
    /* END HEADER */

    /* MAIN */
    /* home */
    h1.konfeti-about-title {
        font-size: 2.4vw;
        width: 40vw;
        padding: 1.5vw 0 0.5vw;
    }
    .konfeti-about-description {
        font-size: 1.8vw;
        width: 80vw;
        line-height: 2.2vw;
    }

    hr.hr-dark-solid-wide {
        height: 1px;
    }
    /* end home */

    /* category */
    .category .panel-left {
        background-color: rgb(36, 36, 36);
        width: 100vw;
        opacity: 0.8;
        height: 100vh;
        display: none;
    }
    ul.menu-categories {
        padding-left: 4vw;
        font-size: 5vw;
    }
    ul.menu-categories li {
        color: white;
        list-style-type: none;
        list-style-image: none;
        line-height: 9vw;
    }
    ul.menu-categories li.current, ul.menu-categories li:hover {
        list-style-type: none;
        list-style-image: none;
    }
    ul.menu-categories li.to-home a {
        text-decoration: underline;
    }

    .category-title {
        margin-left: 0;
    }
    .product {
        margin-left: 0;
    }
    .product-caption {
        margin-right: 20vw;
    }

    hr.hr-grey-black {
        background: black;
    }
    hr.hr-indent-bottom {
        margin-bottom: 5vw;
    }

    #button-next {
        margin: 0;
    }
    /* category */

    /* END MAIN */

    /* FOOTER */
    form#form-callMe input {
        font-size: 1vw;
    }
    input.Name {
        width: 28vw;
    }
    input.Phone {
        width: 14vw;
    }
    input.Email {
        width: 20vw;
    }
    /* END FOOTER */
}

/* *** MOBILE STYLES *** */

@media (max-width: 800px) {
    #logo-main {
        height: auto;
    }
    
    #konfeti-about {
        height: auto;
    }
    
    #logo-main img.konfeti-confectionery {
        width: 100%;
        margin-left: -16px;
    }
    
    .konfeti-about-description {
        font-size: 14px;
        line-height: 16px;
        width: auto;
        margin: 16px auto 0;
        padding: 0 16px 64px;
    }
    
    h1.konfeti-about-title {
        font-size: 24px;
        width: 310px;
    }
    
    #logo-main img.cookie-heart {
        width: 100px;
    }
    
    h3.caption-products {
        font-size: 24px;
    }
    
    .caption-by_categories {
        font-size: 16px;
    }
    
    .category-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        margin: 0;
        width: 100%;
        height: 55px;
    }
    
    .category-cell span {
        width: auto;
        height: auto;
    }
    
    .category-cell.ves\'_asortyment span {
        top: 36px;
    }
    
    .categories-table {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        margin-top: 16px;
    }
    
    #products-categories {
        height: auto;
        padding-bottom: 48px;
    }
    
    #download-catalog h3 {
        font-size: 16px;
        margin: 48px 8px 8px;
    }
    
    #download-catalog img,
    #download-catalog img:hover {
        width: 130px;
    }
    
    #download-catalog {
        height: auto;
        padding-bottom: 48px;
    }
    
    #novelties h3 {
        font-size: 4.5vw;
        padding: 13.5vw 0 0;
    }
    
    #cantuccini,
    #mini_grissini {
        text-align: left;
    }
    
    #cantuccini .banner,
    #mini_grissini .banner {
        height: 150px;
        background-position-x: center;
    }
    
    #cantuccini .position,
    #mini_grissini .position {
        display: grid;
        justify-content: center;
        gap: 16px;
    }
    
    #cantuccini .caption,
    #mini_grissini .caption {
        width: calc(100% - 64px);
        margin: 0;
        padding: 0 32px;
    }
    
    #mini_grissini {
        margin-top: 80px;
    }
    
    .cantuccini-photo,
    .mini_grissini-photo {
        width: 100%;
        padding-bottom: 16px;
    }
    
    h3.cantuccini-title,
    h3.mini_grissini-title {
        font-size: 22px;
    }
    
    .cantuccini-description,
    .mini_grissini-description {
        font-size: 14px;
    }
    
    #button-all-products {
        margin-top: 64px;
    }
    
    #button-all-products img {
        width: 150px;
    }
    
    #button-all-products a {
        font-size: 16px;
        width: 130px;
        margin: -38px auto 0;
    }
    
    #button-all-products {
        height: auto;
        padding-bottom: 32px;
    }
    
    .callMe h3 {
        font-size: 18px;
    }
    
    form#form-callMe {
        display: grid;
        gap: 8px;
        margin: 12px 0 8px;
    }
    
    form#form-callMe input {
        font-size: 14px;
        border: 1px solid black;
        border-radius: 4px;
        padding: 4px;
    }
    
    input.Name,
    input.Phone,
    input.Email {
        width: 100%;
        margin: 0;
    }
    
    .form-callMe__wrapper {
        font-size: 14px;
        padding-top: 56px;
    }
    
    .callMe {
        height: auto;
        padding-bottom: 32px;
    }
    
    #form-callMe-submit {
        width: 24px;
        padding: 8px;
    }
    
    .footer-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        height: auto;
        font-size: 14px;
        line-height: 16px;
    }
    
    .konfeti_year-caption {
        width: auto;
        top: 0
    }
    
    .footer-info img.made_in_ukraine {
        width: 115px;
        margin: 0 0 0 3vw;
    }
    
    .konfeti_year-caption p.year {
        font-size: 12px;
    }
    
    .addresses {
        margin-bottom: 5vw;
    }

    .addresses p {
        line-height: 18px;
    }
    
    #products-panel-top {
        height: 300px;
        background-position-x: center;
    }
    
    .category-title__wrapper {
        height: 48px;
    }
    
    .category-products h3,
    .category-products h3:hover {
        font-size: 24px;
    }
    
    .products-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    .products-list .category-product {
        display: none;
    }
    
    .products-list .category-product:nth-of-type(1),
    .products-list .category-product:nth-of-type(2) {
        display: block;
        margin: 0;
    }
    
    .category-product img {
        width: 100%;
    }
    
    hr.hr-black-solid {
        margin: 32px 0;
    }
    
    .category-title {
        font-size: 24px;
        margin: 32px 16px;
    }
    
    img.product-img {
        width: calc(100% - 32px);
        padding: 0 16px;
    }
    
    .product-name {
        font-size: 24px;
    }
    
    .product-description {
        font-size: 16px;
    }
    
    .product-caption {
        width: 80%;
        margin-right: 32px;
    }
    
    hr.hr-indent-bottom {
        margin: 32px 0;
    }
    
    #button-next .button img {
        width: 130px;
    }
    
    #button-next .button a {
        font-size: 18px;
        width: 130px;
        margin: -35px auto 0;
    }
    
    .header {
        font-size: 16px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
        justify-items: center;
    }
    
    a.nav {
        top: -9px;
    }
    
    a.nav-left {
        right: 0;
    }
    
    a.nav-right {
        left: 0;
    }
}

@media (max-width: 575px) {
    .categories-table {
        grid-template-columns: 1fr 1fr;
    }
    
    .products-list {
        grid-template-columns: 1fr;
    }
    
    .products-list .category-product:nth-of-type(2) {
        display: none;
    }
}

@media (max-width: 450px) {
    .footer-info img.made_in_ukraine {
        margin: 0;
    }
    
    .konfeti_year-caption {
        margin-right: 16px;
    }
    
    .addresses {
        margin: 0 16px 16px 0;
        width: 100%;
    }
    
    #products-panel-top {
        height: 250px;
    }
}