/*Mobile, Tablet*/
@media only screen and (max-width: 900px) {
    :root {
        --scrollpadding1: calc(16px + 0.5vw);
        --fontsize-4: max(0.8vw, 11px);
        --hovercolor: #fb511e;
        --secondarycolor: rgb(240, 240, 240);
        --gap: 0.5vw;
    }
    
    * {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
      }
    
      body, html {
        height: 100%;
        margin: 0;
      }
    
        #navbar {
            display: none;
        }
    
        .kettyghnassia-mobile {
            text-align: center;
            height: -webkit-fit-content;
            height: -moz-fit-content;
            height: fit-content;
            width: 100%;
            font-size: 16px;
            position: fixed;
            top: var(--gap);
            mix-blend-mode: difference;
            display: block;
            text-transform: uppercase;
    
            color: var(--hovercolor);
    
            -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;
                            }
                        }
    
     .bg-image {
        height: 50%; 
        display: grid;
    
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    
        z-index: 1;
        -webkit-filter: grayscale(100%) invert(100%);
                filter: grayscale(100%) invert(100%);
    
            opacity: 0.3;
            -o-object-fit: contain;
               object-fit: contain;
        }
    
    .img1 { 
        background-image: url("images_videos/01_ElleAEleve/230512_KG_3_Web.jpg"); 
    }
        .img2 {
            background-image: url("images_videos/02_Schnorcheln/01_IMG_6906.jpg");
        }
            .img3 { 
                background-image: url("images_videos/03_Arpentage/10_Probetag-5_1.-Arpentage.jpg");
            }
                .img4 { 
                    background-image: url("images_videos/01_ElleAEleve/230512_KG_5_Web.jpg");
                }
                    .img5 { 
                        background-image: url("images_videos/02_Schnorcheln/04_IMG_6862.jpg");
                    }
                        .img6 { 
                            background-image: url("images_videos/01_ElleAEleve/230512_KG_6_Web.jpg"); 
                        }
    
    #news-container {
        display: none;
    }
    
    .appear {
        position: fixed;
        top: var(--gap);
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        z-index: 999;
    
        mix-blend-mode: difference;
        color: var(--secondarycolor);
        display: block;
    
            -webkit-transform: translateY(0);
    
                    transform: translateY(0);
    }
        .dropdown-content {
            display: none;
        }
    
        .introtext {
            display: none;
        }
    
        .introtext-mobile {
            display: block;
    
            grid-column: 1 / 3;
            margin-right: 3vw;
            margin-left: 3vw;
        
            -webkit-hyphens: auto;
        
                    hyphens: auto;
    
            color: var(--hovercolor);
    
            text-align: center;
        }
        
                .introtext-mobile a::before {
                    content: "\2192";
                }
    
        .images-container {
            display: none;
        }
    
        .image-small {
            display: none;
        }
    
        .caption {
            display: none;
        }
    
        .project-container {
            display: none;
        }
    
        .text-container {
            display: none;
        }
    
        
        #about-container {
            display: none;
        }
    
        #optimized-desktop {
            display: block;
            width: calc(100% - 6vw);
            font-size: 11px;
            line-height: 140%;
    
            mix-blend-mode: difference;
            text-align: center;
    
            position: fixed;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
    
            color: var(--hovercolor);
        }
    
    
        .contact-container-mobile {
            display: grid;
            grid-template-columns: 1fr;
            mix-blend-mode: difference;
    
            position: fixed;
            bottom: 3vw;
            left: 3vw;
    
            width: 100%;
    
            -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;
    
            color: var(--hovercolor);
    
            text-align: center;
    }
    
            @keyframes fadeInAnimation {
                0% {
                    opacity: 0;
                }
                100% {
                    opacity: 1;
                }
            }
    
                .cv {
                    grid-column: span 1;
                }
    
                .mail, .fon, .address {
                    grid-column: span 1;
                }
    
    
        .imprint-container {
            grid-column: span 4;
            margin-left: 3vw;
            margin-right: 3vw;
            mix-blend-mode: difference;
        }
    
        .content {
            display: none;
        }
    
        .design-code {
            display: none;
        }
    
        .privacy-policy {
            display: none;
        }
    
        .year {
            grid-column: span 2;
            text-align: center;
            position: fixed;
            bottom: 3vw;
            right: 3vw;
        }
        
        }
    
    
    /*max 1200px*/
        @media only screen and (min-width: 900px) and (max-width: 1200px) {
            .contact-container {
                font-size: var(--fontsize-4);
            }
        }