/* =========================================
TYPOGRAPHY
========================================= */

h1,
h2,
h3,
h4,
h5,
h6 {

    font-family: 'Playfair Display', serif !important;

}

p,
span,
li,
a,
input,
textarea,
button {

    font-family: 'Playfair Display', serif !important;
    .covers_description{
    font-family: 'Playfair Display', serif !important;
}

}

/* =========================================
GLOBAL
========================================= */

body {

    overflow-x: hidden;

}

/* =========================================
HEADER
========================================= */

.header_top {

    position: relative;

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    min-height: 82px;

    padding: 0 20px;

}

.header_left {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    z-index: 999999;
}

.header_brand {

    position: relative;

    left: auto;

    top: auto;

    transform: none;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto;

    text-decoration: none;
}

.header_brand img {

    height: 55px !important;

    width: auto !important;

    display: block;

}

.header_menu {

    width: 46px;

    height: 46px;

    border: 0;

    background: transparent;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    margin: 0;
}

.toggle_menu {

    display: none;

}

.header_menu .close_menu {

    display: none;

}

.header_menu.active .burger_menu {

    display: none;

}

.header_menu.active .close_menu {

    display: block;

}

/* =========================================
SOCIAL HEADER
========================================= */

.header_socials {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 10px;

    z-index: 999;
}

.header_socials a {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    background: #111;

    border: 1px solid #111;

    color: #fff;

    font-size: 15px;

    transition: all .3s ease;
}

.header_socials a:hover {

    background: #000;

    border-color: #000;

    color: #fff;

    transform: translateY(-2px);
}

.header_socials i {

    color: #fff;

}

/* =========================================
TOP NAV
========================================= */

.nav_primary {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

}

.nav_primary_with_topics {

    display: flex !important;

    justify-content: center !important;

    align-items: center;

    gap: 28px;

    width: 100%;

    margin: 0 auto;

    padding: 0;

    list-style: none;

}

.nav_primary_with_topics li {

    flex: 0 0 auto;

}

.nav_primary_with_topics a {

    text-decoration: none;

    text-align: center;

    transition: .3s;
}

.nav_primary_with_topics a:hover {

    opacity: .65;

}

/* =========================================
MENU
========================================= */

.main_menu_nav {

    position: fixed;

    top: 0;

    left: -420px;

    width: 420px;

    height: 100vh;

    background: #fff;

    z-index: 99999998;

    overflow-y: auto;

    transition: left .3s ease;

    box-shadow: 0 0 60px rgba(0,0,0,.12);

    padding-top: 90px;
}

.main_menu_nav.active {

    left: 0;
}

.menu_nav {

    min-height: 100%;

    padding-bottom: 120px;

}

.menu_center_left {

    padding: 24px;

}

.menu_center__title {

    margin-bottom: 30px;
}

.menu_center__title span {

    font-family: 'Playfair Display', serif;

    font-size: 34px;

    font-weight: 700;

    color: #111;
}

.menu_category_links_left {

    margin: 0;

    padding: 0;

    list-style: none;
}

.menu_category_links_left li {

    border-bottom: 1px solid #f2f2f2;
}

.menu_label_header {

    min-height: 62px;

    display: flex;

    align-items: center;
}

.menu_label {

    width: 100%;

    color: #111;

    text-decoration: none;

    font-size: 17px;

    font-weight: 500;

    transition: all .3s ease;
}

.menu_label:hover {

    padding-left: 10px;

    color: #777;
}

/* =========================================
CLOSE BUTTON
========================================= */

.menu_close_top {

    position: absolute;

    top: 20px;

    right: 20px;

    z-index: 999999;
}

.menu_close_top button {

    width: 42px;

    height: 42px;

    border: none;

    border-radius: 50%;

    background: #111;

    color: #fff;

    cursor: pointer;

    transition: all .3s ease;
}

.menu_close_top button:hover {

    transform: rotate(90deg);
}

/* =========================================
FOOTER MENU
========================================= */

.menu_footer {

    margin-top: 50px;

    padding-top: 30px;

    border-top: 1px solid #e5e5e5;
}

.menu_footer_socials {

    display: flex;

    gap: 14px;

    flex-wrap: wrap;
}

.menu_footer_socials a {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #111;

    border: 1px solid #111;

    color: #fff;

    text-decoration: none;

    transition: all .3s ease;
}

.menu_footer_socials a:hover {

    background: #000;

    border-color: #000;

    transform: translateY(-2px);
}

.menu_footer_socials i {

    color: #fff;

}

/* =========================================
MOBILE
========================================= */

@media (max-width: 768px) {

    .header_top {

        grid-template-columns: auto 1fr auto;

        min-height: 66px;

    }

    .header_brand img {

        height: 42px !important;

    }

    .header_socials {

        gap: 6px;

    }

    .header_socials a {

        width: 32px;

        height: 32px;

        font-size: 13px;

    }

    .main_menu_nav {

        width: 100%;

        left: -100%;

        padding-top: 82px;

    }

    .menu_center__title span {

        font-size: 28px;

    }

    .nav_primary_with_topics {

        justify-content: flex-start !important;

        overflow-x: auto;

        gap: 20px;

        padding: 0 15px;

        white-space: nowrap;

    }

}