@import url('fonts.css');


/*------------------------------------------------------------------------------

    LAYOUT

------------------------------------------------------------------------------*/
:root {
    --main-color: #000;
    --font-color: #fff;

    /* sizes used for margins/paddings/font */
    --size-50: 0.5rem;
    --size-75: 0.75rem;
    --size-100: 1rem;
    --size-125: 1.25rem;
    --size-150: 1.5rem;
    --size-200: 2rem;
    --size-250: 2.5rem;
    --size-300: 3rem;
    --size-500: 5rem;
    --size-750: 7.5rem;
}

.viewport {
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: none;
}

.view.show {
    display: block;

    top: 0;
}

.pointer {
    cursor: pointer;
}

h1 {
    font-size: var(--size-750);
    line-height: var(--size-750);
}

h2 {
    font-size: var(--size-200);
}

h3 {
    font-size: 1.75rem;
    margin-top: 2rem;
}

/*------------------------------------------------------------------------------

    TYPO & LINKS

------------------------------------------------------------------------------*/
:root {
    color: var(--font-color);
    background: var(--main-color);

    font-family: "Syne Regular", sans-serif;
}


/*------------------------------------------------------------------------------

    SECTION "view_main"

------------------------------------------------------------------------------*/
.view_main--banner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.view_main--scroll_arrow {
    position: absolute;
    left: 0;
    bottom: 0;

    padding-left: var(--size-200);
    padding-bottom: var(--size-200);
}

.view_main--scroll_arrow img {
    width: 6rem;
    margin-top: calc(var(--size-100) * -1);
    margin-left: var(--size-100);
}


/*------------------------------------------------------------------------------

    SECTION "view_projects"

------------------------------------------------------------------------------*/
.view_projects--wrapper {
    display: grid;
    grid-template-columns: 300px auto;
    grid-template-rows: 5rem auto;
    height: 100%;
    width: 100%;

    --border: 2px solid white;
}

.view_projects--nav_home {
    grid-column: 1 / 2;
    grid-row: 1 / 2;

    border-right: var(--border);
    border-bottom: var(--border);

    font-size: var(--size-200);

    display: flex;
    align-items: center;
    justify-content: center;
}

.view_projects--nav_bars {
    grid-column: 1 / 2;
    grid-row: 2 / 3;

    border-right: var(--border);
}

.view_projects--view_projects--wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.view_projects--view_projects--bar {
    width: min(100%, 7rem);
    height: var(--size-150);
    cursor: pointer;
}

.view_projects--view_projects--bar::before {
    content: "";
    display: block;
    border-top: 3px solid white;
    width: var(--size-250);

    margin-top: calc(var(--size-150) / 2);
    margin-left: auto;
    margin-right: auto;

    transition: width 0.1s ease-in-out;
}

.view_projects--view_projects--bar.active::before, .view_projects--view_projects--bar:hover::before {
    width: var(--size-500);
}

.view_projects--nav_header {
    grid-column: 2 / 3;
    grid-row: 1 / 2;

    border-bottom: var(--border);

    font-size: var(--size-150);
    padding-right: var(--size-200);

    display: flex;
    align-items: center;
    justify-content: end;
    gap: var(--size-200);
}

.view_projects--nav_header img {
    max-width: var(--size-200);
}

.view_projects--projects_container {
    position: relative;
    overflow: hidden;
}

.view_projects--projects_container--entry {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: none;
}

.view_projects--projects_container--entry.show {
    grid-column: 2 / 3;
    grid-row: 2 / 3;

    display: grid;
    grid-template-columns: 5fr 12fr;

    top: 0;
}

.view_projects--project_container--text_section {
    margin: 5rem 0 5rem 5rem;  
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    position: absolute;
    height: calc(100vh - 15rem);
}

.view_projects--project_container--image_section {
    display: flex;
    z-index: -1;
    justify-content: flex-end;
    width: calc(100vw - 300px);
}

.view_projects--project_content-image {
    display: flex;
    margin: 5rem 5rem 5rem 15rem;
    border-radius: var(--size-300);
    overflow: auto;
    max-width: 950px;
    max-height: calc(100vh - 15rem);
}

.border-line {
    display: block;
    width: 88px;
    height: 4px;
    border-radius: 5px;
    background: #FFF;
}

.border {
    margin: 0 0 1.5rem;
}

.border-line:last-child {
    margin: 1rem 0 0 2rem;
}

.button {
    font-size: 18px;
    border: 1px solid #FFF;
    display: inline-block;
    color: #fff;
    line-height: 1;
    padding: 18px 0;
    letter-spacing: 0.1em;
    margin-top: 3rem;
    max-width: 13rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button:hover {
    background: #FFF;
    color: #000;
    font-weight: bold;
}

.view_projects--p_image {
    object-fit: cover;
}

.view_projects--p_image_gradient {
    position: absolute;
    width: calc(100% - 6rem);
    background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.26094187675070024) 85%, rgba(0,0,0,0.5018382352941176) 100%);
    height: 100%;
    border-radius: var(--size-300);
}

.sub_view_projects--nav_home {
    position: absolute;
    top:1rem;
    left:2rem;
}

section {
    width: calc(100vw - 1rem);
    height: 100vh;
    display: grid;
}

.section_image {
    width: calc(100vw - 1rem);
    height: 100vh;
}

.text_section {
    grid-column: 1 / 2;
    padding: 0 5rem 0 10rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.text_section_2 {
    grid-column: 1 / 2;
    padding: 0 5rem 0 10rem;
    max-width:52rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.image_section {
    grid-column: 2 / 3;
}

.image_section_2 {
    grid-column: 2 / 3;
    padding: 5rem 0 5rem 5rem;
    display: flex;
    justify-content: flex-start;
}

.image_section .thumbnail {
    height: 100vh;
    min-width: 65vw;
    object-fit: cover;
}

.section_image .thumbnail {
    height: 100vh;
    width: 100vw;
    object-fit: cover;
}

.image_section_2 .thumbnail {
    height: calc(100vh - 10rem);
    object-fit: cover;
    min-width: initial;
}


/*------------------------------------------------------------------------------

    ANIMATION STUFF

------------------------------------------------------------------------------*/

.view, .view_projects--projects_container--entry {
    transition: transform 0.25s ease-in-out;
    transition-delay: 0s;
}

.__sliding-down, .__sliding-up {
    transition: transform 0.25s ease-in-out;
    transition-delay: 0s;
}

.view.__sliding-up, .view_projects--projects_container--entry.__sliding {
    transform: translateY(-100%);
}

.view.__sliding-down, .view_projects--projects_container--entry.__sliding-down {
    transform: translateY(100%);
}


@media only screen and (max-width: 768px)  {
    h1 {
        font-size: var(--size-300);
        line-height: var(--size-300);
    }

    h3 {
        font-size: var(--size-125);
    }

    .view_main--banner_image {
        max-width: initial;    
    }

    .view_projects--wrapper {
        grid-template-columns: 200px auto;
        grid-template-rows: 5rem 8rem 50vh auto;
    }

    .view_projects--nav_bars {
        grid-column: 1 / 3;
        transform: rotate(-90deg);
        border: none;
    }

    .view_projects--projects_container {
        grid-column: 1 / 3;
        grid-row: 3 / 5;
    }

    .view_projects--project_container--text_section {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
        height: initial;
    }

    .view_projects--project_container--image_section {
        grid-column: 1 / 3;
        width: 100%;
    }

    .view_projects--project_container--text_section {
        margin: -21rem 1.5rem 0 1.5rem;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
    }

    .view_projects--project_content-image {
        display: flex;
        margin: 0 3rem;
        border-radius: var(--size-300);
        overflow: auto;
        max-width: 950px;
        max-height: initial;
        width: 100%;
    }

    .view_projects--p_image {
        height: 40vh;
        border-radius: var(--size-300);
        width: 100%;
    }

    .view_projects--view_projects--bar::before {
        width: var(--size-150);
        }

    .view_projects--view_projects--bar.active::before, .view_projects--view_projects--bar:hover::before {
        width: var(--size-300);
    }

    .view_projects--nav_home, .view_projects--nav_header {
        font-size: var(--size-125);
    }

    .view_projects--p_image_gradient {
        position: absolute;
        width: calc(100% - 6rem);
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.26094187675070024) 85%, rgba(0,0,0,0.5018382352941176) 100%);
        height: 40vh;
        border-radius: var(--size-300);
    }

    .text_section, .image_section {
        grid-column: 1 / 3;
    }

    .text_section {
        padding: 5rem 1.5rem;
        grid-row: 2 / 3;
    }

    .thumbnail {
        height: initial;
    }

    .text_section_2 {
        grid-row: 1 / 2;
    }

    .section_image {
        height: initial;
    }

    .section_image .thumbnail {
        height: initial;
    }

    .image_section .thumbnail_zero {
        height: initial;
    }
}

.jsSaveBtn{
    background: #000;
    color: #FFF;

}