.site-head {
    --height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
    position: fixed;
    top: var(--wp-admin--admin-bar--height, 0);
    left: 0;
    z-index: 20;
    width: 100%;
    color: var(--color-cream-1);
    transition: .3s transform cubic-bezier(0.645, 0.045, 0.355, 1);
    pointer-events: none
}

.site-head:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--height);
    background: #B41576;
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform .4s cubic-bezier(0.645, 0.045, 0.355, 1);
    content: ""
}

.is-nav-opened .site-head:after {
    transform: scaleY(1)
}

@media only screen and (max-width: 987px) {
    .is-nav-opened .site-head:after {
        transition-delay: .15s;
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }
}

.is-nav-opened .site-head {
    color: var(--color-brand-1)
}

.site-head__container {
    display: flex;
    flex-direction: column;
    align-items: normal;
    justify-content: normal;
    position: relative;
    height: 100vh
}

.site-head__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: -webkit-clip-path .4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: clip-path .4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: clip-path .4s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-clip-path .4s cubic-bezier(0.645, 0.045, 0.355, 1)
}

@media only screen and (max-width: 987px) {
    .site-head__bg {
        height: 115%;
        transition-delay: .4s;
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }
}

.site-head__bg-inner {
    width: 100%;
    height: 100%;
    background: #B41576
}

.is-nav-small .site-head__bg, .is-nav-opened .site-head__bg {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
}

@media only screen and (max-width: 987px) {
    .is-nav-small .site-head__bg, .is-nav-opened .site-head__bg {
        transition-delay: 0s;
        transition-duration: .15s;
        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
}

.site-head__top {
    position: relative;
    padding: 2.9rem 0 1.65rem;
    transition: color .05s .3s linear, transform .3s cubic-bezier(0.645, 0.045, 0.355, 1), padding-top .3s cubic-bezier(0.645, 0.045, 0.355, 1);
    pointer-events: initial
}

@media only screen and (max-width: 987px) {
    .site-head__top {
        z-index: 12;
        padding-bottom: 1.15rem;
        color: var(--color-cream-1)
    }
}

@media only screen and (max-width: 767px)and (orientation: landscape), only screen and (max-width: 576px) {
    .site-head__top {
        padding-top: 1.25rem;
        padding-bottom: 1rem
    }
}

.site-head__top-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between
}

.is-nav-small .site-head__top {
    padding-top: 1.65rem
}

@media only screen and (max-width: 767px)and (orientation: landscape), only screen and (max-width: 576px) {
    .is-nav-small .site-head__top {
        padding-top: 1.25rem
    }
}

.is-nav-opened .site-head__top {
    padding-top: 2.9rem;
    padding-right: var(--scrollbar-width, 0);
    color: var(--color-brand-7);
    transition-delay: .05s
}

@media only screen and (max-width: 987px) {
    .is-nav-opened .site-head__top {
        color: var(--color-cream-1)
    }
}

@media only screen and (max-width: 767px)and (orientation: landscape), only screen and (max-width: 576px) {
    .is-nav-opened .site-head__top {
        padding-top: 1.25rem
    }
}

.is-nav-small.is-nav-hidden .site-head__top {
    transform: translateY(-105%)
}

.site-head__bottom {
    scrollbar-width: thin;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
    padding-top: 1.25rem;
    width: 100%;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: -webkit-clip-path .4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: clip-path .4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: clip-path .4s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-clip-path .4s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.site-head__bottom::-webkit-scrollbar {
    width: .3rem;
    height: .3rem
}

.site-head__bottom::-webkit-scrollbar-button {
    display: none
}

.site-head__bottom::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .8);
    border-radius: 1rem
}

.site-head__bottom::-webkit-scrollbar-thumb:hover {
    background: #000
}

.site-head__bottom::-webkit-scrollbar-track, .site-head__bottom::-webkit-scrollbar-track-piece {
    background: none
}

@media only screen and (max-width: 987px) {
    .site-head__bottom {
        position: relative;
        margin-top: -1rem;
        padding-top: 0;
        height: 100%;
        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
}

.is-nav-opened .site-head__bottom {
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%)
}

@media only screen and (max-width: 987px) {
    .is-nav-opened .site-head__bottom {
        transition-delay: .15s;
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }
}

.site-head__bottom-inner {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: calc(var(--height) - 1.25rem);
    background: var(--color-cream-1);
    overflow-y: auto;
    visibility: hidden;
    transition: visibility 0s .5s linear;
    pointer-events: initial
}

@media only screen and (min-width: 2000px) {
    .site-head__bottom-inner {
        justify-content: center
    }
}

@media only screen and (max-width: 987px) {
    .site-head__bottom-inner {
        padding: 5rem 0 10rem;
        height: 100%;
        -webkit-clip-path: none !important;
        clip-path: none !important
    }
}

.is-nav-opened .site-head__bottom-inner {
    padding-right: var(--scrollbar-width, 0);
    visibility: visible;
    transition-delay: 0s
}

.site-head .b-logo {
    position: relative;
    z-index: 10
}

.site-head__menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    margin: 6.05rem 0 0;
    padding: 0;
    list-style: none
}

@media only screen and (min-width: 2000px) {
    .site-head__menu {
        flex: 0;
        justify-content: center
    }
}

@media only screen and (max-width: 1280px) {
    .site-head__menu {
        justify-content: center
    }
}

@media only screen and (max-width: 987px) {
    .site-head__menu {
        flex: 1;
        margin-top: 1.5rem
    }
}

.site-head__menu li {
    font: 400 var(--font-size-h-lg)/0.8 var(--font-heading);
    letter-spacing: normal;
    margin-bottom: .7344em;
    -webkit-clip-path: inset(-15% 0);
    clip-path: inset(-15% 0)
}

@media only screen and (max-width: 987px) {
    .site-head__menu li {
        margin-bottom: 1em;
        font-size: 3rem
    }
}

@media only screen and (max-width: 767px) {
    .site-head__menu li {
        font-size: 2.5rem
    }
}

.site-head__menu li:last-child {
    margin-bottom: 0
}

.site-head__menu li.current-menu-item > * {
    color: var(--color-accent-1)
}

.is-nav-opened .site-head__menu li:nth-child(1) a {
    animation-delay: .3s
}

.is-nav-opened .site-head__menu li:nth-child(2) a {
    animation-delay: .36s
}

.is-nav-opened .site-head__menu li:nth-child(3) a {
    animation-delay: .42s
}

.is-nav-opened .site-head__menu li:nth-child(4) a {
    animation-delay: .48s
}

.is-nav-opened .site-head__menu li:nth-child(5) a {
    animation-delay: .54s
}

.is-nav-opened .site-head__menu li:nth-child(6) a {
    animation-delay: .6s
}

.is-nav-opened .site-head__menu li:nth-child(7) a {
    animation-delay: .66s
}

.is-nav-opened .site-head__menu li:nth-child(8) a {
    animation-delay: .72s
}

.is-nav-opened .site-head__menu li:nth-child(9) a {
    animation-delay: .78s
}

.is-nav-opened .site-head__menu li:nth-child(10) a {
    animation-delay: .84s
}

.is-nav-opened .site-head__menu li:nth-child(11) a {
    animation-delay: .9s
}

.site-head__menu a {
    position: relative;
    display: block;
    color: var(--color-brand-1)
}

@keyframes site-head-menu-reveal {
    0% {
        transform: translateY(130%)
    }
    100% {
        transform: translateY(0%)
    }
}

.is-nav-opened .site-head__menu a {
    transform: translateY(130%);
    animation: site-head-menu-reveal .4s cubic-bezier(0.215, 0.61, 0.355, 1) forwards
}

.site-head__menu a span:before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-cream-1);
    -webkit-clip-path: ellipse(10% 0% at 50% 110%);
    clip-path: ellipse(10% 0% at 50% 110%);
    color: var(--color-accent-1);
    transition: -webkit-clip-path .5s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: clip-path .5s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: clip-path .5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-clip-path .5s cubic-bezier(0.215, 0.61, 0.355, 1);
    content: attr(data-text)
}

.site-head__menu a:hover span:before {
    -webkit-clip-path: ellipse(100% 100% at 50% 50%);
    clip-path: ellipse(100% 100% at 50% 50%)
}

.site-head__socials {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 2.875rem 0;
    color: var(--color-brand-1)
}

@media only screen and (min-width: 2000px) {
    .site-head__socials {
        margin-top: 8rem
    }
}

.site-head__socials li {
    transform: scale3d(0, 0, 0);
    transition: transform .8s .4s cubic-bezier(0.19, 1, 0.22, 1)
}

.is-nav-opened .site-head__socials li {
    transform: scale3d(1, 1, 1)
}

.is-nav-opened .site-head__socials li:nth-child(1) {
    transition-delay: .6s
}

.is-nav-opened .site-head__socials li:nth-child(2) {
    transition-delay: .7s
}

.is-nav-opened .site-head__socials li:nth-child(3) {
    transition-delay: .8s
}

.is-nav-opened .site-head__socials li:nth-child(4) {
    transition-delay: .9s
}

.is-nav-opened .site-head__socials li:nth-child(5) {
    transition-delay: 1s
}

.site-head__buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 10
}

.site-head__wolt, .site-head__whatsapp {
    display: none;
    background: var(--color-brand-5);
    -webkit-mask: no-repeat center/contain;
    mask: no-repeat center/contain;
    mask-mode: alpha;
    transition: background .5s .3s cubic-bezier(0.645, 0.045, 0.355, 1)
}

@media only screen and (max-width: 1280px) {
    .site-head__wolt, .site-head__whatsapp {
        display: block
    }
}

.site-head__wolt:hover, .site-head__whatsapp:hover {
    background: var(--color-cream-1);
    transition-delay: 0s
}

.is-nav-opened .site-head__wolt, .is-nav-opened .site-head__whatsapp {
    background: var(--color-brand-4)
}

@media only screen and (max-width: 987px) {
    .is-nav-opened .site-head__wolt, .is-nav-opened .site-head__whatsapp {
        background: var(--color-brand-5)
    }
}

.is-nav-opened .site-head__wolt:hover, .is-nav-opened .site-head__whatsapp:hover {
    background: var(--color-brand-1)
}

@media only screen and (max-width: 987px) {
    .is-nav-opened .site-head__wolt:hover, .is-nav-opened .site-head__whatsapp:hover {
        background: var(--color-cream-1)
    }
}

.site-head__wolt {
    margin-right: 1.5rem;
    width: 3rem;
    height: 1.0625rem;
}

.site-head__whatsapp {
    margin-right: 1.8rem;
    width: 1.5625rem;
    height: 1.5625rem;
    -webkit-mask-image: url("../images/social-networks/whatsapp.svg");
    mask-image: url("../images/social-networks/whatsapp.svg")
}

@media (max-width: 600px) {
    .site-head {
        top: 0
    }
}
