/*region Header and Menu*/
body._opendNav {
    overflow: hidden
}

.l-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    background-color: transparent;
    -webkit-transition: background-color .5s ease;
    transition: background-color .5s ease;
    height: 19vw
}

@media screen and (min-width: 768px) {
    .l-header {
        height: clamp(70px, 9.588579795021962vw, 180px);
    }
}

.l-header.l-header__background-ocean {
    background-image: url("../img/background.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    height: clamp(100px, 19vw, 250px);
}

.l-header.l-header__background-white{
    background-color: var(--cloud);
}

.l-header .l-header__logo {
    position: absolute;
    z-index: 1;
    top: 6.133333333333333vw;
    left: 5.333333333333334vw;
    width: 38.666666666666664vw;
    height: 5.066666666666666vw;
    margin: 0;
}

@media screen and (min-width: 768px) {
    .l-header .l-header__logo {
        top: 2.562225475841874vw;
        left: 2.928257686676428vw;
        width: clamp(200px, 20.859443631039532vw, 400px);
        height: clamp(50px, 5.064128843338214vw, 100px);
    }
}

.l-header .l-header__logo__link {
    display: block;
}

@media screen and (min-width: 768px) {
    .l-header .l-header__logo__link {
        -webkit-transition: opacity .5s ease;
        transition: opacity .5s ease
    }

    .l-header .l-header__logo__link:hover {
        opacity: .5
    }
}

.l-header .l-header__logo__link__image {
    width: 100%;
    height: 100%
}

.l-header .l-header__logo__link__image-white {
    display: flex;
}

.l-header .l-header__logo__link__image-ocean {
    display: none;
}

.l-header .l-header__button {
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
    -webkit-transition: right .4s ease;
    transition: right .4s ease;
    right: 5.333333333333334vw;
    width: 16vw;
    height: 17.333333333333336vw
}

@media screen and (min-width: 768px) {
    .l-header .l-header__button {
        right: 2.928257686676428vw;
        width: 7.320644216691069vw;
        height: 7.393850658857979vw;
        cursor: pointer
    }
}

.l-header .l-header__button__inner {
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 768px) {
    .l-header .l-header__button__inner {
        -webkit-transition: opacity .5s ease;
        transition: opacity .5s ease
    }
}

@media screen and (min-width: 768px) {
    .l-header .l-header__button:hover .l-header__button__inner {
        opacity: .5
    }
}

.l-header .l-header__button__bar {
    position: absolute;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 1px;
    background-color: var(--charcoal);
    -webkit-transition-duration: .4s;
    transition-duration: .4s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}

.l-header.l-header__background-ocean .l-header__button__bar {
    background-color: var(--cloud);
}

.l-header .l-header__button__bar:first-child {
    -webkit-transition-property: top, -webkit-transform;
    transition-property: top, -webkit-transform;
    transition-property: top, transform;
    transition-property: top, transform, -webkit-transform;
    top: 6.666666666666667vw;
}

@media screen and (min-width: 768px) {
    .l-header .l-header__button__bar:first-child {
        top: 2.928257686676428vw;
    }
}

.l-header .l-header__button__bar:nth-child(2) {
    top: 8.533333333333333vw;
}

@media screen and (min-width: 768px) {
    .l-header .l-header__button__bar:nth-child(2) {
        top: 3.660322108345535vw;
    }
}

.l-header .l-header__button__bar:last-child {
    -webkit-transition-property: bottom, -webkit-transform;
    transition-property: bottom, -webkit-transform;
    transition-property: bottom, transform;
    transition-property: bottom, transform, -webkit-transform;
    bottom: 6.666666666666667vw;
}

@media screen and (min-width: 768px) {
    .l-header .l-header__button__bar:last-child {
        bottom: 2.928257686676428vw
    }
}

body._scrolling .l-header {
    /*background-color: var(--cloud_opacity);*/
    background-color: transparent;
}

body._scrolling .l-header.l-header__background-white {
    background-color: var(--cloud);
}

body._openedNav .l-header {
    background-color: transparent;
    height: 0;
}

body._openedNav .l-header .l-header__logo__link__image-white {
    display: none;
}

body._openedNav .l-header .l-header__logo__link__image-ocean {
    display: flex;
}

body._openedNav .l-header__button {
    right: 2.928257686676428vw;
}

body._openedNav .l-header__button.active {
    right: 0;
    display: none;
}

@media screen and (min-width: 768px) {
    body._openedNav .l-header__button.active {
        width: 2.928257686676428vw;
        height: 2.928257686676428vw
    }
}

body._openedNav .l-header__button__bar {
    background-color: var(--ocean);
}

body._openedNav .l-header__button__bar:first-child {
    -webkit-transform: rotate(405deg);
    transform: rotate(405deg);
    top: 5.600000000000001vw;
    left: 2.266666666666667vw;
    background-color: var(--ocean);
}

@media screen and (min-width: 768px) {
    body._openedNav .l-header__button__bar:first-child {
        top: 1.464128843338214vw;
        left: 0;
    }
}

body._openedNav .l-header__button__bar:nth-child(2) {
    opacity: 0
}

body._openedNav .l-header__button__bar:last-child {
    -webkit-transform: rotate(-405deg);
    transform: rotate(-405deg);
    bottom: 11.333333333333332vw;
    left: 2.266666666666667vw;background-color: var(--ocean);
}

@media screen and (min-width: 768px) {
    body._openedNav .l-header__button__bar:last-child {
        bottom: 1.464128843338214vw;
        left: 0;
    }
}

.l-navigation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: start;
    position: fixed;
    top: 0;
    left: 100%;
    z-index: 9998;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: var(--cloud);
    -webkit-transition: opacity .5s ease, left 0s linear .5s;
    transition: opacity .5s ease, left 0s linear .5s;
    background-image: url('../img/background_gray.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media screen and (max-width: 768px) {
    .l-navigation {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

}

.l-navigation .l-navigation__list {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    list-style: none;
    transition: all 0.3s ease;
}

@media screen and (min-width: 768px) {
    .l-navigation .l-navigation__list {
        top: 2.562225475841874vw;
        right: 2.928257686676428vw;
        left: unset;
        transform: translate(0, 0);
    }
}

.l-navigation .l-navigation__list__item {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 768px) {
    .l-navigation .l-navigation__list__item {
        justify-content: right;
    }
}

.l-navigation .l-navigation__list__item:not(:first-child) {
    margin-top: calc(2vh + 2vw);
}

@media (min-width: 768px) {
    .l-navigation .l-navigation__list__item:not(:first-child) {
        margin-top: calc(1.5vh + 1vw);
    }
}

.l-navigation .l-navigation__list__item__link {
    position: relative;
    text-wrap: nowrap;
    display: flex;
    align-items: center;
    color: var(--ocean);
    font-family: "Carisma Classic 400 Regular", serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(11px, 11vw, 56px);
    line-height: 1;
    letter-spacing: 0;
    text-align: right;
    vertical-align: middle;
    text-decoration: none;
    text-transform: uppercase;
    transition: font-size 0.3s ease,
    height 0.3s ease;
}

@media screen and (min-width: 768px) {
    .l-navigation .l-navigation__list__item__link {
        font-size: clamp(30px, 4.4vw, 86px);
        line-height: 0.85;
        display: inline-flex;
    }
}

@media screen and (min-width: 768px) {
    .l-navigation .l-navigation__list__item__link:hover:before {
        content: "";
        display: flex;
        flex-direction: row;
        width: 1vw;
        height: 1vw;
        margin-right: 1.5vw;
        background-color: var(--ocean);
        border-radius: 0.5vw;
    }
}

body._openedNav .l-navigation {
    left: 0;
    opacity: 1;
    -webkit-transition: opacity .5s ease, left 0s linear;
    transition: opacity .5s ease, left 0s linear
}

/*endregion*/