@font-face { 
    
    font-family: "bold_extended"; 
    src: url("fonts/AkzidenzGrotesk-BoldExtended.otf"); 

}

@font-face { 
    
    font-family: "bold"; 
    src: url("fonts/AkzidenzGrotesk-Bold.otf"); 

}

@font-face { 
    
    font-family: "regular"; 
    src: url("fonts/AkzidenzGrotesk-Regular.otf"); 

}

@font-face { 
    
    font-family: "extended"; 
    src: url("fonts/AkzidenzGrotesk-Extended.otf"); 

}




/* Utility classes */



.flex_row {

    display:flex;
    flex-direction: row;
}

.flex_column {

    display:flex;
    flex-direction: column;
}

.percentage_fullscreen {

    height:100%;
    width:100%;

}

.percentage_halfscreen_width {

    width:50%;

}

.viewport_fullscreen {

    height:100vh;
    width:100vw;

}

.centered {

    align-items: center;
    justify-content: center;

}

.t-ease {

    transition: 250ms;
    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    transition-timing-function: ease-out;


}

.sticky_header {

    position:sticky; 
    top:25vh; 

}

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





/* General things */

:root {

    --margin_width: 5vw;

    --padding_vertical: 250px;

    --background_color_1:black;
    --background_color_2:#f5eadb;

    --text_color_1:white;
    --text_color_2:#222222ff;

    --highlight_color_1:#da8f1f; /* cb1c1c */
    --highlight_color_2:#27412dff;



    --text_size_base: 18px;
    --text_size_scaler: 25vw;

    --text_size_small:calc(var(--text_size_base) - 2px);
    --text_size_medium:var(--text_size_base);
    --text_size_large:calc(var(--text_size_base) + 4px);
    --text_size_extralarge:calc(var(--text_size_base) + 8px);
    --text_size_huge:calc(var(--text_size_base) + 12px);




    --icon_gap: 25px;
    --icon_size: 25px;
    --icon_size_large: 50px;


    --carbon-black: #222222ff;
    --golden-earth: #9c6615ff;
    --cotton-candy: #f8a0a0ff;
    --pearl-beige: #e8dcb9ff;
    --pine-teal: #27412dff;

    --border_radius_size:8px;

    

}

html {


    color: var(--text_color_1);

    background-color:var(--background_color_1);

    cursor: crosshair;

    scroll-behavior: smooth; 
    scroll-snap-align: start;
    scroll-snap-stop: always;

}

body { 

    margin:0;

}




section {

    margin-top: 50px;
    margin-bottom: 50px;

    margin-left: var(--margin_width);
    margin-right: var(--margin_width);
 
}

h1 {

    font-size: var(--text_size_huge);
    font-family:"bold_extended";


}

h2 {

    font-size: var(--text_size_large);
    font-family:"bold_extended";

}


h3 {

    font-size: var(--text_size_medium);
    font-family:"bold_extended";

}

h4 {

    font-size: var(--text_size_small);
    font-family:"bold_extended";

}

p {

    font-size: var(--text_size_medium);
    font-family:"regular";
    

}

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










/* Loader */


#loader {

    z-index:99999;

    position:fixed;

    background-color: black;

    display:flex;


}

#loader_wrapper {


    height:300vh;
    width:300vw;
    background-color:black;
    position:fixed;
    top:0;
    left:0;
    z-index:99999;
    overflow:hidden;

}

svg.loader_anim {

    width:var(--icon_size_large);
    height:var(--icon_size_large);

    filter:invert();

}

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






/* SECTION - NAVBAR */


header {


    height: 100px;

    width: 100%;

    position:fixed;

    margin:0;

    z-index:99;

    white-space: nowrap;

    background: transparent;

    mix-blend-mode: difference;

    transition: transform 0.25s ease-in-out;

}

.hide_Header {

    transform: translateY(-200%);

}

.show_Header {

    transform: translateY(0%);

}

.navbar {


    height:100%;

    position:sticky;

    background:transparent;


}

.navbar .name_container {


    width:50%;

    margin-left: var(--margin_width);

    justify-content: left;

    align-items: center;

    font-family:"bold_extended";

}

.navbar .menu_container {

    
    width:50%;

    margin-right: var(--margin_width);

    justify-content: right;

    align-items: center;

    font-family:"bold_extended";

    gap:20px;
  

}

.navbar .menu_container_small {

    width:50%;

    margin-right: var(--margin_width);

    justify-content: right;

    align-items: center;

    display: none;

    flex-direction: row;


}

.menu_small {

    width:var(--icon_size);
    height:var(--icon_size);
    
}

#index_chevron_wrapper{

    position:absolute;

    display:flex;

    bottom:calc(10% - var(--icon_size_large));
    left:calc(50% - var(--icon_size_large)/2);
  
}

#index_chevron {

    width:var(--icon_size_large);
    height:var(--icon_size_large);
  
    animation-name: updown_chevron;

    animation-duration: 2s;

    animation-iteration-count: infinite;

    animation-timing-function: ease-in-out;

}

#menu_overlay_container{

    z-index:-999;

    background-color:rgba(0, 0, 0, 0.95);

    opacity:0%;

    position: fixed;

    gap:16px;


    overflow:hidden;


}

.menu_overlay_text {

    
    color:var(--text_color_1);

    opacity:0%;

}

.btn:hover {

    cursor:pointer;

    color:var(--highlight_color_1);

    /*
    filter:brightness(75%);
    opacity:75%;

    /* transform:translateY(-5px); */

}

.socials_wrapper { 

    gap:25px;

    position:absolute;

    bottom:10vh;

}

.socials_wrapper img, .socials_container img  {


    width:var(--icon_size);
    height:auto;

}


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









/* homepage - showreel */

#reel {

    margin:0;

    background-color:black;

}

#reel_background_container {


    overflow:hidden;

    display: flex;

    background: black;

    opacity:100%;

}

.reel_background {


    object-fit:cover;

    width:100vw;
    height:100vh;
    
}

.reel_background_mobile {


    display:none;

    object-fit: cover;


}

.close_icon {

    position:absolute;

    top:37.5px;
    right:5vw;

    height:var(--icon_size);
    width:var(--icon_size);

}

#reel_container {

    min-height:50vh;

}

#reel_iframe {

    width:75vw;
    aspect-ratio: 16/9;

}


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










/* homepage - projects and projects page */

section#projects {


    align-items: center;

    gap:15vh;
   
}

section.page_contact {


    margin-top:0;

    padding-top:150px;

    height:65vh;


}


section#archive {

    margin-top:0;

    padding-top:150px;

}

#projects_container {


    display:grid;

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

    object-fit: cover;
  
    overflow: hidden;

    gap:16px;

}

.project {

    max-width: 100%;

    opacity: 0%;

    position:relative;



}

.project.show {

    opacity:100%;
}

.project_image {

    width:100%;
    height:auto;

    object-fit: cover;

    display:block;

    border-radius: var(--border_radius_size);

}



.project_title_overlay {

    position:relative;

    color:var(--text_color_1);

    user-select: none;

    font-family:"bold";

}

.project_video_overlay {


    opacity:0%;

    position:absolute;

    top:0;
    left:0;

    object-fit:cover;

    overflow:hidden;

    border-radius: var(--border_radius_size);


}

.project_video_overlay.show {

    opacity:100%;

}

.project:hover {

    cursor: pointer;
}

.project:hover .project_title_overlay {

    transform:translateX(10px);
    color:var(--highlight_color_1);

}

.project:hover .project_video_overlay {

    opacity:100%;
}

.project:hover .project_image{

    opacity: 0%;
}


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









/* project description page */


#btn_viewProjects, #btn_nextProject, #btn_prevProject {

    background-color:var(--background_color_2);

    border-radius:calc(var(--border_radius_size)*2);

    padding:var(--border_radius_size);

    color:var(--text_color_2);

    
}

#btn_viewProjects:hover {

    color:var(--text_color_1);

    background-color:var(--background_color_1);

    /* font-size:calc(var(--text_size_medium)*1.1); */


}

#btn_nextProject:hover, #btn_prevProject:hover {


    color:var(--text_color_1);

    background-color:var(--background_color_1);

    /* font-size:calc(var(--text_size_small)*1.1); */

}

#backTop, #backTop::after {

    background-color:var(--background_color_1);

    border-radius:calc(var(--border_radius_size)*2);

    padding:var(--border_radius_size);

    color:var(--text_color_1);

}

#backTop:hover {

    color:var(--text_color_2);

    background-color:var(--background_color_2);

    /* font-size:calc(var(--text_size_small)*1.1); */


}



#project_video_trailer {

    aspect-ratio:16/9;

    border-radius:var(--border_radius_size);

}

#backdrop_project_image {

    width:100vw;
    height:100vh;

    object-fit:cover;

    position:fixed;

    opacity:25%;
    filter:blur(15px);

}

section#banner_contact_wrapper {

    height:15vh;
    width:100%;
    margin:0;
    overflow:hidden;
}

.decorative_topImage{

    transform:translateY(-50%);

}

.banner_contact {

    width:100vw;

    transform:translateY(-50%);

    overflow:hidden;

}


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







/* contact page */




#contact_info {

    padding-top:32px;

}

#introduction_header {

    color:var(--text_color_1);

    text-align:left;

}

#project_banner_title {

    position:absolute;

    z-index:1;

    top:50%;
    left:10vw;

    transform:translate(-5vw,-50%);

    color:var(--text_color_1);

    opacity:100%;

    user-select: none;

    white-space: wrap;

}

#banner_project_wrapper {

    height:25vh; 
    width:100%; 
    margin:0;

}

#project_description {


    gap:50px;

}

#display_project_wrapper {

    min-height:55vh;

    gap:50px;


}

#contact_services {

    line-height: 30px;
}


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




/* footer */


footer {

    width:100%;


    background-color: var(--background_color_2);
    color: var(--text_color_2);

    padding-bottom: 50px;

}

#footer_wrapper{

    margin-left: var(--margin_width);
    margin-right: var(--margin_width);
    margin-top: 15vh;

    flex-basis:auto;

    

}

#contact_container {


    justify-content: space-between;

    align-items: center;

    white-space: nowrap;


    gap:15px;

    margin-top:25px;

}

#information_container {

    width:50%;
    
    gap:8px;


}

#socials_container {


    width:50%;

    align-items: center;
    justify-content: end;

    gap:15px;
   

}


#copyright_wrapper{


    gap:8px;

    margin-top:50px;

    padding-top:15px;
    border-top: solid  2px black;

    color: var(--text_color_2);

    justify-content: space-between;

    align-items:center;

    

}


#copyright_container {

    gap:5px;

}

#backTop_wrapper {

   justify-content:end;

}





#introduction_header, #services_wrapper, #cta_wrapper, #showcase_studio {

    padding-top:calc(var(--padding_vertical)*1);
    padding-bottom:calc(var(--padding_vertical)*1);

}


#showcase_clients {

    padding-top:calc(var(--padding_vertical)* 0.5);
    padding-bottom:calc(var(--padding_vertical)* 0.5);

}

#services_wrapper, #cta_wrapper, #showcase_studio, #showcase_clients {

    border-top: solid  2px rgb(40, 40, 40);

}









a ,a:link , a:visited{

    text-decoration: none;
    color: var(--text_color_1);

}

.alt_color{

    color: var(--text_color_2);

}

a.alt_color{

    color: var(--text_color_2);

}

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










/* General SVG Rules */


svg>path, svg>image {

    fill:var(--text_color_2)
}

svg.menu>path, a.menu_overlay_text>svg>path, path.menu_overlay_text {

    fill:var(--text_color_1)
}

a:hover>svg>path , a:hover>svg>image, div:hover>svg>path {

    fill:var(--highlight_color_1);

}

svg {

    width:var(--icon_size);
    height:var(--icon_size);

}

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






img.company_icon {
    width: 128px;
    height: 128px;

}


img.inverted {

    filter:invert(100) saturate(0);



}

#showcase_clients {

    overflow: hidden;

    gap:75px;

    mask-image: linear-gradient(

    to right,
    transparent,
    black 10% 90%,
    transparent

    );

}

.company_slider {

    min-width:100%;
    height:200px;

    gap:75px;
    
    display: flex;
    flex-shrink: 0;

    justify-content: space-between;
    align-items: center;

    animation: infinite-slider 20s infinite linear; 

}


.client_icon {

    width:128px;
    height:auto;

}





@keyframes infinite-slider {

    from {

        transform: translateX(calc(-100% - 75px));

    }



}




/* Override for index chevron */


svg#index_chevron>path, svg#index_chevron>image {

    fill:var(--text_color_1);

}

div:hover>svg#index_chevron>path {

    fill:var(--highlight_color_1);

}


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












/* media changes and animations */


@keyframes updown_chevron {

0% {

    transform:translateY(0px);



}

50% {

    transform:translateY(5px);
    scale:120%;


}

100% {

    transform:translateY(0px);


}



}




@media (min-width:1920px) {

    :root {

        --text_size_base:32px;

    }
    
}



@media (max-width:1200px) {



}

@media (max-width:1024px) {



    .navbar .menu_container {


        display: none;

    }

    .navbar .menu_container_small {


        display: flex;

    }

    #projects_container {

        grid-template-columns: 1fr 1fr ;

    }

    #reel_iframe {

        width:87.5vw;
        height:auto;

    }
    
    #contact_container {


        flex-direction:column;

    }
    
    #information_container {


        justify-content: start;

        width: 100%;

        white-space:wrap;

    }

    #socials_container {

        justify-content: start;

        width: 100%;

    }

    #backTop_wrapper {

        justify-content:left;

    }

    .halfscreen_wrapper {

        flex-direction:column;

    }

    #introduction_header{


        text-align: left;
        justify-content: space-between;
    }

    .percentage_halfscreen_width {

        width:100%;
    }

    #display_project_wrapper{

        flex-direction: column;

        gap:100px;
    }

    
    #services_wrapper, #showcase_studio  {

        gap:50px;
        
    }


}

@media (max-width:768px) {



    .navbar .name_container {

        width:75%;
        
    }

    #projects_container {

        grid-template-columns: 1fr ;

    }

    #copyright_wrapper, #copyright_container {

        flex-direction: column;

    }

    #information_container, #socials_container, #copyright_email_container, #backTop_wrapper, #services_wrapper{

        justify-content:center;
            

    }


    #cta_wrapper {

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

    #contact_title {

        text-align: center;
    }

    h1 {

        font-size:var(--text_size_large);
    }

    h2#name_id{

        font-size:var(--text_size_medium);

    }

    :root {

        --text_size_base:16px;
        --border_radius_size:6px;

    }



}

@media (max-width:425px) {
}





@media(max-height: 500px) {

    .menu_overlay_text {

        margin:0;
    }

}






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