@font-face {
    font-family: CellophanBlack;
            src: 
            url(typefaces/Cellophan13-Black.woff2) format("woff2"),
            url(typefaces/Cellophan13-Black.woff) format("woff"); 
}

@font-face {
font-family: KanisterMono;
        src: 
        url(typefaces/KanisterMono06-Regular.woff2) format("woff2"),
        url(typefaces/KanisterMono06-Regular.woff) format("woff"); 
}

    :root {
        --main-color: rgb(10, 10, 10);
        --secondarycolor: rgb(240, 240, 240);
        --thirdcolor: rgb(169, 169, 169);
        --hovercolor: #fb511e;
            --fontsize-1: max(2.5vw, 16px); 
            --fontsize-2: max(1.3vw, 16px);
            --fontsize-3: max(1vw, 16px);
            --fontsize-4: max(0.8vw, 11px);
                --lineheight-100: 100%;
                --lineheight-120: 120%;
                --lineheight-140: 140%;
                    --scrollpadding1: calc(1.3vw + 0.5vw);
                    --gap: 0.5vw;
    }

/*Preloader*/
#loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;

background-color: var(--hovercolor);
color: var(--main-color);

display: -webkit-box;

display: flex;
-webkit-box-align: center;
        align-items: center;
-webkit-box-pack: center;
        justify-content: center;

cursor: none;

font-size: var(--fontsize-2);
line-height: var(--lineheight-100);
text-transform: uppercase;
}

.loader-text {
display: none;
}

/*General*/
    * {
        padding: 0;
        margin: 0;
    }

    html, body {
        font-family: CellophanBlack;
        font-size: var(--fontsize-2);
        line-height: var(--lineheight-140);
        
        -webkit-font-smoothing: antialiased;
        -moz-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
                -webkit-font-kerning: auto;
                        font-kerning: auto;
        
        scroll-behavior: smooth;

        -webkit-box-sizing: border-box;

                box-sizing: border-box; 

        color: var(--secondarycolor);
        background-color: var(--main-color);

            scroll-snap-type: y proximity;
        scroll-padding-top: var(--scrollpadding1);

        color: var(--secondarycolor);
        cursor: default;
    }

    ::-moz-selection {
        color: var(--hovercolor);
      }

    ::selection {
        color: var(--hovercolor);
      }

a {
text-decoration: none;
color: inherit;
-webkit-transition: color 0.5s;
-o-transition: color 0.5s;
transition: color 0.5s;
}

a:hover {
color: var(--hovercolor);
}

        .audiotext {
            text-decoration: none;
            color: var(--hovercolor);
            -webkit-transition: color 0.5s;
            -o-transition: color 0.5s;
            transition: color 0.5s;
        }
            
            .audiotext:hover {
            color: inherit;
            }

/*Mobile*/
#optimized-desktop {
display: none;
}

.contact-container-mobile {
display: none;
}

/*Fade-In-Animation*/
.appear {
-webkit-transition: 0.8s cubic-bezier(0.65, 0, 0.35, 1);
-o-transition: 0.8s cubic-bezier(0.65, 0, 0.35, 1);
transition: 0.8s cubic-bezier(0.65, 0, 0.35, 1);
opacity: 0;
-webkit-transform: translateY(50vh);
        transform: translateY(50vh);
}

    .appear.inview {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
        -webkit-transition-delay: 5s;
             -o-transition-delay: 5s;
                transition-delay: 5s;
    }

/*Background-Images Mobile*/ 
.bg-image {
display: none;
}   

/*News Pop up*/
#news-container {
font-family: KanisterMono;
font-size: var(--fontsize-3);
line-height: var(--lineheight-120);

position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);

width: calc(100% - 2vw);
max-height: 33%;
z-index: 999;

display: grid;
grid-template-columns: repeat(2, 1fr);

color: var(--thirdcolor);

background-color: var(--main-color);

-webkit-user-select: none;

   -moz-user-select: none;

        user-select: none;
}

#news-title {
text-align: left;
margin-left: 4vw;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;

grid-column: 1 / 2;
text-transform: uppercase;
}

.news-wrapper {
display: grid;
grid-template-columns: repeat(12, 1fr);
}

.news {
grid-column: 1 / 12;
}

    .news-heading {
        text-transform: uppercase;
    }

    .news-info {
        margin-left: 12vw;
    }

#closeButton {
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
display: -webkit-box;
display: flex;
float: right;

background-color: transparent;
border: none;
font-family: KanisterMono;
    -webkit-transition: color 0.5s;
    -o-transition: color 0.5s;
    transition: color 0.5s;
font-size: var(--fontsize-3);
line-height: var(--lineheight-120);
cursor: auto;
color: var(--thirdcolor);

grid-column: 12 / 13;
grid-row: 1 / -1;
}

#closeButton:hover {
color: var(--hovercolor);
cursor: pointer;
}

/*Navigation*/
    #navbar {
        position: fixed;
        top: var(--gap);
        -webkit-transition: top 0.3s;
        -o-transition: top 0.3s;
        transition: top 0.3s;
        width: 100%;

        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: var(--gap);

        font-size: var(--fontsize-2);
        line-height: var(--lineheight-100);
        text-transform: uppercase;

        height: 1.3vw;

        mix-blend-mode: difference;
        z-index: 999;

        -webkit-user-select: none;

           -moz-user-select: none;

                user-select: none;
       
                -webkit-animation: fadeInAnimation ease-in 2s;
       
                        animation: fadeInAnimation ease-in 2s;
                -webkit-animation-iteration-count: 1;
                        animation-iteration-count: 1;
                -webkit-animation-fill-mode: forwards;
                        animation-fill-mode: forwards;
                -webkit-animation-delay: 3s;
                        animation-delay: 3s;
    }

                @-webkit-keyframes fadeInAnimation {
                    0% {
                        opacity: 0;
                    }
                    100% {
                        opacity: 1;
                    }
                }

                @keyframes fadeInAnimation {
                    0% {
                        opacity: 0;
                    }
                    100% {
                        opacity: 1;
                    }
                }

                        .dropdown {
                            grid-column: 1 / 2;
                        }

                        .dropbtn {
                            text-align: left;
                            padding-left: 1vw;
                            text-decoration: none;
                            font-size: var(--fontsize-2);
                            line-height: var(--lineheight-100);
                            height: 1.3vw;
                            text-transform: uppercase;
                            font-family: CellophanBlack;

                            background:none;
                            border:none;
                            color: inherit;
                        }


                        .dropdown-content {
                            padding-left: 4vw;

                            line-height: var(--lineheight-140);

                            text-transform: none;

                        -webkit-user-select: none;

                           -moz-user-select: none;

                                user-select: none;
                        }
                                
                                .dropdown-content > a {
                                    display: -webkit-box;
                                    display: flex;
                                    -webkit-box-orient: horizontal;
                                    -webkit-box-direction: normal;
                                            flex-direction: row;
                                }


                .kettyghnassia {
                    text-align: center;
                    grid-column: 5 / 9;
                    height: 1.3vw;
                }

                .kettyghnassia-mobile {
                    display: none;
                }

                .about {
                    text-align: right;
                    padding-right: 1vw;
                    grid-column: 12 / 13;
                    height: 1.3vw;
                }

/*Introtext*/
.introtext-container {
display: grid;
grid-template-columns: repeat(2, 1fr);

margin-top: var(--scrollpadding1);

font-size: var(--fontsize-2);
line-height: var(--lineheight-140);

scroll-snap-align: start;
}

.introtext {
grid-column: 2 / 3;
margin-right: 1vw;

-webkit-hyphens: auto;

        hyphens: auto;
}

    .introtext a::before {
        content: "\2192";
    }

.introtext-mobile {
display: none;
}

/*Projects-Wrapper*/
.projects-wrapper > div:first-of-type {
opacity: 1 !important;
}


/*Project*/
.project-container {
grid-column: 1 / 2;

display: grid;

-webkit-column-gap: var(--gap);

   -moz-column-gap: var(--gap);

        column-gap: var(--gap);
row-gap: 1.8vw;

grid-template-columns: repeat(2, 1fr);

margin-top: 8vw;

scroll-snap-align: start;
}

.project-container:first-of-type {
margin-top: 13vw;
}

    .titel {
        grid-column: span 2;

        text-align: center;
        font-size: var(--fontsize-1);
        line-height: var(--lineheight-100);

        padding-left: 6vw;
        padding-right: 6vw;
        position: sticky;
        top: 1.8vw;

        text-transform: uppercase;

        mix-blend-mode: difference;
    }

            /*Image-Container*/
            .images-container {
                grid-column: 1 / 2;
                mix-blend-mode: difference;
            }

                .image-container {
                    display: grid;
                    gap: var(--gap);
                    grid-template-columns: repeat(12, 1fr);
                    grid-template-rows: repeat(2, 1fr);

                    -webkit-box-align: start;

                            align-items: start;

                    margin-bottom: var(--gap);

                    height: 25vw;
                }

                .image-big {
                    grid-column: 1 / span 9;
                    grid-row: 1 / -1;

                    height: 25vw;
                }

                        .image-big img {
                            height: 25vw;
                            width: auto;
                        }

                        .image-big video {
                            height: 25vw;
                            width: auto;
                        }

                .image-small {
                    grid-column: 12 / 13;


                    display: grid;
                    grid-template-columns: 1fr;
                    justify-items: end;
                }
                        .image-small img {
                            height: 3vw;
                            width: auto;
                            -webkit-filter: grayscale(100%) invert(100%);
                                    filter: grayscale(100%) invert(100%);
                            -webkit-transition: 0.7s;
                            -o-transition: 0.7s;
                            transition: 0.7s;
                        }

                        .image-small img:hover {
                            -webkit-filter: none;
                                    filter: none;

                            cursor: pointer;
                        }


                .caption {
                    grid-column: 10 / 13;
                    margin-left: 1vw;

                    font-size: var(--fontsize-4);
                    line-height: var(--lineheight-140);
                    text-align: right;
                    color: var(--thirdcolor);
                }
            

                    /*Text-Container*/
    .text-container {
        grid-column: 2 / 3;

        display: grid;
        gap: var(--gap);
        grid-template-columns: repeat(12, 1fr);

        height: -webkit-fit-content;

        height: -moz-fit-content;

        height: fit-content;
    }

            .project-text {
                grid-column: span 12;
                padding-right: 1vw;

                -webkit-hyphens: auto;

                        hyphens: auto;
            }

                    .project-text p:first-of-type {
                        text-indent: initial;
                    }

                    .project-text p {
                        text-indent: 3em;
                    }

                            .project-text a {
                                color: var(--secondarycolor);
                                -webkit-transition: 0.5s;
                                -o-transition: 0.5s;
                                transition: 0.5s;
                            }

                            .project-text a::before {
                                content: "\2192";
                            }

                            .project-text a:hover {
                                color: var(--hovercolor);
                            }

                            .project-text ul {
                                margin-left: 3em;

                                list-style-type: disc;
                            }

                            .project-text ul + p {
                                text-indent: 0;
                            }


            .dates {
                grid-column: 3 / span 10;
                font-size: var(--fontsize-3);
                line-height: var(--lineheight-140);
                padding-right: 1vw;
            }

                            .dates a::before {
                                content: "\2192";
                            }

            .credits {
                grid-column: 5 / span 8;
                font-size: var(--fontsize-4);
                line-height: var(--lineheight-140);

                color: var(--thirdcolor);

                padding-right: 1vw;
            }

                    .credits a {
                        color: var(--secondarycolor);
                        -webkit-transition: 0.5s;
                        -o-transition: 0.5s;
                        transition: 0.5s;
                    }

                    .credits a:hover {
                        color: var(--hovercolor);
                    }

                                    .audio-container {
                                        grid-column: 7 / span 6;
                                        padding-right: 1vw;
                                        padding-bottom: 5vw;

                                        display: grid;
                                        grid-template-columns: repeat(1, 1fr);
                                    }

                                    .audio-container a {
                                        grid-column: span 1;
                                        text-decoration: none;
                                        font-size: var(--fontsize-2);
                                        line-height: var(--lineheight-100);
                                        font-family: CellophanBlack;
        
                                        background:none;
                                        border:none;
                                        color: var(--hovercolor);
                                        -webkit-transition: 0.5s;
                                        -o-transition: 0.5s;
                                        transition: 0.5s;
                                        text-align: left;
                                    }

                                    .audio-container a::before {
                                        content: "\2192";
                                    }

                                    .audio-container a:hover {
                                        color: var(--secondarycolor);
                                    }

/*About*/
#about-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5vw;
margin-top: 3vw;
margin-bottom: 3vw;
}

.portrait-container {
grid-column: 1 / 3;

display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5vw;
justify-items: end;
-webkit-box-align: end;
        align-items: end;

height: 25vw;
}

.portrait {
grid-column: 2 / 3;
height: 3vw;
width: auto;

-webkit-filter: grayscale(100%) invert(100%);

        filter: grayscale(100%) invert(100%);

-webkit-transition: 0.7s;

-o-transition: 0.7s;

transition: 0.7s;
}

    .portrait:hover {
        -webkit-filter: none;
                filter: none;

        cursor: pointer;
    }

    .portrait-big {
        height: 25vw;
        -webkit-filter: none;
                filter: none;
    }

.contact-container {
grid-column: 1 / 2;

display: grid;
grid-template-columns: repeat(4, 1fr);

font-size: var(--fontsize-3);
line-height: var(--lineheight-140);

margin-left: 1vw;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
}

    .cv {
        grid-column: 1 / 2;
    }

            .cv::before {
                content:"\2192";
            }

    .mail, .fon, .address {
        grid-column: 2 / span 3;
    }

.about-text {
grid-column: 2 / 5;

font-size: var(--fontsize-2);
line-height: var(--lineheight-140);

margin-right: 1vw;

-webkit-hyphens: auto;

        hyphens: auto;
}

.about-text a::before {
content: "\2192";
}

/*Imprint*/
.imprint-container {
grid-column: 3 / span 2;

display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--gap);

margin-left: 1vw;
margin-right: 1vw;
margin-bottom: 1vw;

font-size: var(--fontsize-4);
line-height: var(--lineheight-140);

color: var(--thirdcolor);
}

            .imprint-container a {
                color: var(--secondarycolor);
                -webkit-transition: 0.5s;
                -o-transition: 0.5s;
                transition: 0.5s;
            }

            .imprint-container a:hover {
                color: var(--hovercolor);
            }

.content {
    grid-column: 1 / 2;
}

.design-code {
    grid-column: 2 / 3;
}


.privacy-policy {
    grid-column: 1 / span 2;
}

.year {
    grid-column: 1 / span 2;
}

/*Fade in Elements*/
.loadin {
opacity: 0;
-webkit-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
}

.loaded {
  opacity: 1;
  -webkit-transition-delay: 0s;
       -o-transition-delay: 0s;
          transition-delay: 0s;
}