/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;
}

body {
    overflow: hidden;

    background: #fff;
    color: #000;

    font-family: Arial, Helvetica, sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}


/* =========================================================
   SITE
========================================================= */

.site {
    position: relative;

    width: 100vw;
    height: 100dvh;

    overflow: hidden;

    background: #fff;
}


/* =========================================================
   HEADER — DESKTOP
========================================================= */

/*
 * Галерея = Bootstrap col-lg-5 = 41.666667%
 *
 * Тому сам header починається ПІСЛЯ галереї.
 *
 * Це автоматично ставить перемикач мов
 * справа від галереї, а не поверх неї.
 */

.site-header {
    position: absolute;

    top: 0;
    left: 41.66666667%;

    width: 58.33333333%;

    height: 60px;

    display: flex;
    align-items: flex-start;

    padding: 15px 18px 0 18px;

    z-index: 1000;

    pointer-events: none;
}

.site-header a,
.site-header button {
    pointer-events: auto;
}


/* =========================================================
   LANGUAGE — DESKTOP
========================================================= */

.language-switcher {
    display: flex;
    align-items: center;

    gap: 20px;

    font-size: 14px;
    font-weight: 400;
    line-height: 1;
}

.language-switcher a {
    color: #000;

    opacity: 1;

    transition: opacity 0.2s ease;
}

.language-switcher a:hover {
    opacity: 0.5;
}

.language-switcher a.active {
    opacity: 1;
}


/* =========================================================
   MAIN MENU — DESKTOP
========================================================= */

.main-menu {
    display: flex;
    align-items: center;

    gap: 35px;

    margin-left: auto;
    margin-right: 45px;

    font-size: 14px;
    line-height: 1;
}

.main-menu a {
    color: #000;

    transition: opacity 0.2s ease;
}

.main-menu a:hover {
    opacity: 0.5;
}


/* =========================================================
   LOGO
========================================================= */

.logo {
    display: block;

    color: #000;

    font-size: 14px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0;

    white-space: nowrap;
}


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

.mobile-menu-button {
    display: none;
    border: 0;
    background: transparent;
    margin: 0;
    padding: 0;
    color: #000;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
}

.menu-symbol {
    display: inline-block;
    width: 10px;
}


/* =========================================================
   MOBILE FULLSCREEN MENU
========================================================= */

.mobile-menu {
    display: none;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.site main {
    width: 100%;
    height: 100%;
}

.site main > .row {
    width: 100%;
    height: 100%;
    margin: 0;
}


/* =========================================================
   PHOTO COLUMN
========================================================= */

.photo-column {
    position: relative;
    height: 100dvh;
    padding: 0;
    overflow: hidden;
    background: #fff;
}


/* =========================================================
   PHOTO SCROLL
========================================================= */

.photo-scroll {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: pan-x;
    overscroll-behavior: contain;
}


/* =========================================================
   PHOTO TRACK
========================================================= */

.photo-track {
    width: 100%;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}


/* =========================================================
   PHOTO ITEM
========================================================= */

.photo-item {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.photo-item img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    z-index: 1;
    user-select: none;
    pointer-events: none;
    -webkit-user-drag: none;
}


/* =========================================================
   HOVER VIDEO
========================================================= */

.photo-hover-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


/*
 * Відео показується лише після того,
 * як JS додасть клас.
 */
.photo-item.video-active .photo-hover-video {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   CONTENT COLUMN
========================================================= */

.content-column {
    position: relative;
    height: 100dvh;
    padding: 0;
    overflow: hidden;
    background: #fff;
}
.content-column.text{
    display: flex;
    align-items: center;
    padding-left: 22px;
    padding-right: 22px;
}
.text-block p.gohome {
    margin-top: 4rem;
}

.content {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    width: 100%;
    height: 100%;
}


/* =========================================================
   ROWS
========================================================= */

.content-row {
    display: flex;
    width: 100%;
    min-height: 0;
    padding-left: 22px;
    padding-right: 22px;
}


/* 1 row — vertically centered */

.content-row-1 {
    align-items: center;
}

/* 2 row — vertically centered */
.content-row-2 {
    align-items: center;
}

/* 3 row — content at bottom */
.content-row-3 {
    align-items: flex-end;
    padding-bottom: 14px;
}

/* =========================================================
   TEXT
========================================================= */

.text-block {
    width: 100%;
    color: #333;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.05;
}

.text-block p {
    margin: 0;
}


/* =========================================================
   THIRD BLOCK
========================================================= */

.text-block-bottom {
    width: 100%;
    text-align: right;
}


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

@media (max-width: 768px) {

    body {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .site {
        height: auto;
        min-height: 100dvh;
        overflow: visible;
    }


    .site main,
    .site main > .row {
        height: auto !important;
    }


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

    .site-header {
        position: fixed;

        top: 0;
        left: 0;

        width: 100%;
        height: 37px;

        padding: 10px 8px 0 9px;

        display: flex;
        align-items: flex-start;
        justify-content: space-between;

        background: #fff;

        z-index: 3000;
    }


    /* desktop items off */

    .desktop-language-switcher,
    .main-menu {
        display: none;
    }


    /* + menu */

    .mobile-menu-button {
        display: block;

        order: 1;
    }


    /* logo right */

    .logo {
        order: 2;

        margin-left: auto;

        font-size: 14px;
        font-weight: 700;
    }


    /* =====================================================
       MOBILE MENU OVERLAY
    ===================================================== */

    .mobile-menu {
        position: fixed;

        top: 0;
        left: 0;

        display: block;

        width: 100%;
        height: 100dvh;

        background: #fff;

        z-index: 2000;

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        transition:
            opacity 0.2s ease,
            visibility 0.2s ease;
    }


    .mobile-menu.open {
        opacity: 1;
        visibility: visible;

        pointer-events: auto;
    }


    /* =====================================================
       WORK / INFO
    ===================================================== */

    .mobile-menu-nav {
        padding-top: 50px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 52px;
        font-size: 14px;
        line-height: 1;
    }

    .mobile-menu-nav a {
        color: #000;
    }


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

    .mobile-language-switcher {
        width: 100%;
        padding-top: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 23px;
        font-size: 14px;
        line-height: 1;
    }

    .mobile-language-switcher a {
        color: #000;
    }


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

    .photo-column {
        height: auto;
        overflow: visible;
    }

    .photo-item[aria-hidden="true"] {
        display: none;
    }

    .photo-scroll {
        height: auto;
        overflow: visible;
        touch-action: auto;
        overscroll-behavior: auto;
    }

    .photo-track {
        transform: none !important;
    }

    .content-column {
        height: auto;
    }
    .content {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
    }

    .content-row {
        display: block;
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    .content-row-1 {
        padding-top: 65px;
        padding-bottom: 30px;
    }

    .content-row-2 {
        padding-top: 0;
        padding-bottom: 35px;
    }

    .content-row-3 {
        padding-top: 0;
        padding-bottom: 15px;
    }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 577px) {

    .site-header {
        height: 37px;
        padding-left: 9px;
        padding-right: 7px;
    }
}

#vimeoModal .modal-dialog {
    width: 70vw;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}


/* MOBILE */
@media (max-width: 767.98px) {

    #vimeoModal .modal-dialog {
        width: calc(100% - 24px);
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

}

#vimeoModal .modal-content {
    position: relative;
    border: 0;
    border-radius: 0;
    background: #000;
    overflow: visible;
}

#vimeoModal iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

#vimeoModal .modal-backdrop {
    background: #000;
}

.video-modal-close {
    position: absolute;
    top: -35px;
    right: 0;
    z-index: 10;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
}
#vimeoModal .modal-dialog {
    max-width:70vw;
}