@media screen and (max-width: 780px) {
    

    /* Header */
    
    header .title {
        z-index: 1;
        position: relative;
        height: var(--titleHeight);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    header .title img {
        max-width: 600px;
        min-width: 150px;
        margin-bottom:20px;
        
    
    }
    
    /* Navigation */
    
    nav.main {
        position: absolute;
        top: var(--titleHeight);
        background-color: rgb(255, 255, 255);
        height: calc(100vh - var(--titleHeight) - var(--footerHeight));
        width: 100vw;
        transition: all 1s;
    }
    
    nav.main.show {
        left: 0;
    }
    nav.main:not(.show) {
        left: calc(-100% + var(--navigationGap));
    }
    
    nav.main .toggle {
        position: absolute;
        top: 0;
        left: calc(100% - var(--navigationGap));
        width: var(--navigationGap);
        user-select: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-items: center;
        font-size: 30px;
        gap: 20px;
        cursor: pointer;
    
    }
    
    nav.main .toggle .box {
        width: inherit;
        height: 200px;
        position: relative;
    }
    
    nav.main .toggle .box div {
        position: absolute;
        top: 0;
        left: 0;
        width: inherit;
        height: inherit;
        display: flex;
        justify-content: center;
    }
    
    nav.main .toggle > .box div span {
    
        writing-mode: tb-rl;
        font-size: 30px;
    
    }
    
    nav.main.show .toggle::before {
        font-family: "FontAwesome";
        content: "\f18e";
    }
    
    nav.main.show .box div:first-child {
        opacity: 0;
    }
    nav.main.show .box div:last-child {
        opacity: 1;
    }
    nav.main:not(.show) .box div:first-child {
        opacity: 1;
    }
    nav.main:not(.show) .box div:last-child {
        opacity: 0;
    }
    
    nav.main:not(.show) .toggle::before {
        font-family: "FontAwesome";
        content: "\f190";
    }
    
    nav.main .toogle::before {
        content: "\f0c9";
        font-family: "FontAwesome";
    }
    
    
    
    
    
    /* Main Area */
    
    .container {
        height: 100vh;
        width: 100vw;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    
    main {
        margin-left: var(--navigationGap);
        overflow: scroll;
        height: 100%;
        overflow: scroll;
        padding:20px;
    }
    
    
    /* Gallery */
    
    .gallery {
        user-select: none;
        list-style: none;
    
        padding:0px;
        margin:0px;
        display: flex;
        flex-wrap: wrap;
        gap:10px;
    }
    
    .gallery li {
      
        flex-grow: 1;
        display: flex;
        justify-content: center;
    
    
    }
    /* Image Box */

    
    .imageBox {
        position: absolute;
        background-color: white;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 999;
    }
    
    .imageBox .image {
        pointer-events: none;
    }
    .imageBox .blendImage {
        z-index: 3;
    }
    
    .imageBox.loading .expand,
    .imageBox.loading .next,
    .imageBox.loading .prev,
    .imageBox.loading .rotate {
        opacity: 0.5;
        pointer-events: none;
    }
    
    .imageBox .image {
        z-index: 2;
        user-select: none;
        position: absolute;
        top: 50px;
        width: 100%;
        height: calc(100% - 50px);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .imageBox:not(.expand) .image img {
        width: 100%;
        object-fit: contain;
    }
    
    .imageBox.loading .image:not(.blendImage) {
        opacity: 1;
    };
    
    .imageBox.expand .image img {
        height: 100%;
    }
    
    .imageBox.rotate .image img {
        transform: rotate(90deg);
        width: auto !important;
        height: 100%;
    }
    
    .imageBox .loader {
        display: none;
    }
    

    
    /*
    .imageBox.loading .loader {
        position: absolute;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index:3;
        position: absolute;
        top:50px;
        width:100%;
        height:calc(100% - 50px);
        gap:10px;
        background-color: rgba(255,255,255,.7);
    }
    
     .imageBox.loading {display: flex;align-items: center;justify-content: center;} 
    .imageBox.loading img,.imageBox.loading .gallery_navigation {display:none;}*/
    
    .loaderIcon {
        width: 100px;
        height: 100px;
        animation-name: spin;
        animation-duration: 5000ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    
    .loaderIcon::before {
        content: "\f111";
        font-family: "FontAwesome";
    }
    
    .imageBox .gallery_navigation {
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(255,255,255,.2);
        width: 100vw;
        display: flex;
        flex-wrap: wrap;
        z-index: 3;
    }
    .imageBox menu a {
        flex-grow: 1;
        text-decoration: none;
        text-align: center;
    }
    
    .imageBox menu:hover {
        background-color: rgba(255,255,255,.7);
        color: rgba(0,0,0,1);
    }
    .imageBox menu a {
        font-size: 30px;
        cursor: pointer;
        color: inherit;
        user-select: none;
    }

    
    .head {
        user-select: none;
    }
    
    }