:root {
    /* Main Colors */
    --smoke-black: #210f07;
    --darker-smoke-black: #140e0b;
    --oho-orange: #ff4926;
    --oho-orange-dark: #a5291c;
    --gray: #9e8f8b;
    --light-gray: #eaeaea;

    /* VIDEO PLAYER ON LIGHT BOX THEME COLOR */
    --plyr-color-main: #ff4926 !important;

    /* MODIFY THE NAVIGATION SIDE BAR'S WIDTH HERE */
    --nav-bar-width: 8px;
}

/* FONTS */
/* Gotham */
@font-face {font-family: 'Gotham Book';src: url('../fonts/Gotham/gotham-book-webfont.woff') format('woff'), url('../fonts/Gotham/gotham-book-webfont.ttf') format('truetype'), url('../fonts/Gotham/gotham-book-webfont.svg#gothambook') format('svg');font-weight: normal;font-style: normal;}@font-face {font-family: 'Gotham Black';src: url('../fonts/Gotham/gotham-black-webfont.woff') format('woff'), url('../fonts/Gotham/gotham-black-webfont.ttf') format('truetype'), url('../fonts/Gotham/gotham-black-webfont.svg#gothamblack') format('svg');font-weight: normal;font-style: normal;}@font-face {font-family: 'Gotham Italic';src: url('../fonts/Gotham/gotham-blackitalic-webfont.woff') format('woff'), url('../fonts/Gotham/gotham-blackitalic-webfont.ttf') format('truetype'), url('../fonts/Gotham/gotham-blackitalic-webfont.svg#gothamitalic') format('svg');font-weight: normal;font-style: normal;}@font-face {font-family: 'Gotham Bold';src: url('../fonts/Gotham/Gotham-Bold.otf');src: url('../fonts/Gotham/gotham-bold-webfont.woff') format('woff'), url('../fonts/Gotham/gotham-bold-webfont.ttf') format('truetype'), url('../fonts/Gotham/gotham-bold-webfont.svg#gothambold') format('svg');font-weight: normal;font-style: normal;}@font-face {font-family: 'Gotham Light';src: url('../fonts/Gotham/gotham-light-webfont.woff') format('woff'), url('../fonts/Gotham/gotham-light-webfont.ttf') format('truetype'), url('../fonts/Gotham/gotham-light-webfont.svg#gothamlight') format('svg');font-weight: normal;font-style: normal;}@font-face {font-family: 'Gotham Medium';src: url('../fonts/Gotham/gotham-medium-webfont.woff') format('woff'), url('../fonts/Gotham/gotham-medium-webfont.ttf') format('truetype'), url('../fonts/Gotham/gotham-medium-webfont.svg#gothammedium') format('svg');font-weight: normal;font-style: normal;}@font-face {font-family: 'amp bold';src: url('../fonts/AMP/arsmaquettepro-bold-webfont.eot');src: url('../fonts/AMP/arsmaquettepro-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/AMP/arsmaquettepro-bold-webfont.woff') format('woff'), url('../fonts/AMP/arsmaquettepro-bold-webfont.ttf') format('truetype'), url('../fonts/AMP/arsmaquettepro-bold-webfont.svg#ars_maquette_probold') format('svg');font-weight: normal;font-style: normal;}@font-face {font-family: 'amp medium';src: url('../fonts/AMP/arsmaquettepro-medium-webfont.eot');src: url('../fonts/AMP/arsmaquettepro-medium-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/AMP/arsmaquettepro-medium-webfont.woff') format('woff'), url('../fonts/AMP/arsmaquettepro-medium-webfont.ttf') format('truetype'), url('../fonts/AMP/arsmaquettepro-medium-webfont.svg#ars_maquette_promedium') format('svg');font-weight: normal;font-style: normal;}
/* DejaVu Serif */
@font-face {font-family: 'DejaVu Serif';src: url('../fonts/Dejavu/DejaVuSerif-Italic.woff') format('woff'), url('../fonts/Dejavu/DejaVuSerif-Italic.ttf') format('truetype'), url('../fonts/Dejavu/DejaVuSerif-Italic.svg#DejaVuSerif-Italic') format('svg');font-weight: normal;font-style: italic;font-display: swap;}@font-face {font-family: 'DejaVu Serif';src: url('../fonts/Dejavu/DejaVuSerif.woff') format('woff'), url('../fonts/Dejavu/DejaVuSerif.ttf') format('truetype'), url('../fonts/Dejavu/DejaVuSerif.svg#DejaVuSerif') format('svg');font-weight: normal;font-style: normal;font-display: swap;}

/* Box Sizing Hack */
html { box-sizing: border-box; padding: 0px; margin: 0px; }
*, *:before, *:after { box-sizing: inherit; }

/* Index Body Styling */
body {
    background-color: var(--darker-smoke-black);
    padding: 0px;
    margin: 0px;
    color: var(--gray);
    font-size: 1em;
    font-family: 'Gotham Book', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    user-select: none;
    overflow-x: hidden;
}

/* Costum Scrollbar styling */
::-webkit-scrollbar { width: var(--nav-bar-width); border: none; outline: none;}
::-webkit-scrollbar-button { display: none;}
::-webkit-scrollbar-track { background-color: transparent; border: none; outline: none;}
::-webkit-scrollbar-thumb { background-color: var(--oho-orange); outline: none;}

/* General Styles */
h1, h2, h3, h4 { margin: 0px; padding: 0px; display: block; }
p { display: block; padding: 0px; margin: 0px; }
a{ outline: none; border: none; }
a:focus{ color: inherit; }

/* Loader de la pagina */
#p-loader_cont{
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: var(--darker-smoke-black);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 9999;
}

#loader-box{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
    pointer-events: none !important;
}
.loader-wrapper{
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    background-color: rgba(22, 21, 20, 0.7);
    border-radius: 5px;
}
.loader {
    width: 25px;
    height: 25px;
    aspect-ratio: 1;
    border-radius: 100%;
    background: radial-gradient(farthest-side, var(--light-gray) 94%,#0000) top/6px 6px no-repeat, conic-gradient(#0000 25%, var(--light-gray));
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 0);
    -moz-mask: radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 0);
    -o-mask: radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 0);
    mask: radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 0);
    -webkit-animation: l13 0.8s infinite linear;
    -moz-animation: l13 0.8s infinite linear;
    -o-animation: l13 0.8s infinite linear;
    animation: l13 0.8s infinite linear;
  }
  @-webkit-keyframes l13{ 100%{transform: rotate(1turn)} }
  @-moz-keyframes l13{ 100%{transform: rotate(1turn)} }
  @-o-keyframes l13{ 100%{transform: rotate(1turn)} }
  @keyframes l13{ 100%{transform: rotate(1turn)} }

    /* Loader de las paginas */
    .loader.color_b{
        width: 40px;
        height: 40px;
        background: radial-gradient(farthest-side, var(--oho-orange) 94%,#0000) top/5px 5px no-repeat, conic-gradient(#0000 25%, var(--oho-orange));
        -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 0);
        -moz-mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 0);
        -o-mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 0);
        mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 0);
    }

/* Load Preloader elements with priority */
#preloader { width: 0px; height: 0px; visibility: hidden; overflow: hidden; pointer-events: none !important; position: fixed; top: 1px; left: 1px; } #preloader img { border: none; outline: none; }

/* Top Banner */
#top-banner{
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    padding-top: 60px;
    padding-bottom: 40px;
    background-image: url(../imgs/banner_bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
}
    .main-title{
        font-family: 'Gotham Black', sans-serif;
        font-size: 5em;
        font-weight: normal;
        color: var(--oho-orange);
        text-align: center;
        margin-bottom: 40px;
    }
    .main-desc{
        width: 100%;
        max-width: 620px;
        text-align: center;
        color: var(--oho-orange);
        font-family: 'DejaVu Serif', serif;
        font-style: italic;
        font-size: 1.125em;
        font-weight: 100;
        margin-bottom: 40px;
    }
    #nsfw-warn{
        width: 256px;
        height: 32px;
        background-image: url(../imgs/nsfw-warning_graph.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        margin-bottom: 40px;
    }
    #nav-menu{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        width: 100%;
    }
        .nm_button{
            cursor: pointer;
            padding: 10px 15px;
            height: 43px;
            min-width: 43px;
            font-family: 'Gotham Medium', sans-serif;
            font-size: 1.125em;
            text-transform: uppercase;
            color: var(--gray);
            border: 1px solid transparent;
            -webkit-transition: all ease-in-out 0.2s;
            -moz-transition: all ease-in-out 0.2s;
            -o-transition: all ease-in-out 0.2s;
            transition: all ease-in-out 0.2s;
            user-select: none;
        }
            .active-info{
                background-color: var(--light-gray);
                color: var(--darker-smoke-black);
            }
            .nm_button:hover{
                border: 1px solid var(--light-gray);
                color: var(--light-gray);
                -webkit-transition: all ease-in-out 0.2s;
                -moz-transition: all ease-in-out 0.2s;
                -o-transition: all ease-in-out 0.2s;
                transition: all ease-in-out 0.2s;
            }
            .sm-icons {
                background-position: center;
                background-repeat: no-repeat;
                background-size: 1.125em 1.125em;
            }
                
                .fb-icon{ background-image: url('../imgs/fb_icon.png');}
                    .fb-icon:hover{ background-image: url('../imgs/fb_hover_icon.png'); }
                .bg-icon{ background-image: url('../imgs/bg_icon.png');}
                    .bg-icon:hover{ background-image: url('../imgs/bg_hover_icon.png'); }
                .bs-icon{ background-image: url('../imgs/bs_icon.png');}
                    .bs-icon:hover{ background-image: url('../imgs/bs_hover_icon.png'); }

        /* Ko-fi button styling */
        .kf_button{ display: flex; height: 40px; align-items: center; gap: 8px; cursor: pointer; padding: 0px 15px; font-family: 'Gotham Bold', sans-serif; font-size: 0.875em; text-decoration: none; color: var(--darker-smoke-black); background-color: #ff5927; border-radius: 6px; -webkit-transition: all ease-in-out 0.2s; -moz-transition: all ease-in-out 0.2s; -o-transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s; user-select: none; margin-left: 15px; }
            .kf_button:hover { background-color: #ff7927; -webkit-transition: all ease-in-out 0.2s; -moz-transition: all ease-in-out 0.2s; -o-transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s; }
            .kf_button img { aspect-ratio: 1; width: 22px; border: 0px; margin: 0px; padding: 0px; position: relative; -webkit-transform: rotate(0) scale(1); -moz-transform: rotate(0) scale(1); -o-transform: rotate(0) scale(1); transform: rotate(0) scale(1); -webkit-animation: kofi-wiggle 3s infinite; -o-animation: kofi-wiggle 3s infinite; -moz-animation: kofi-wiggle 3s infinite; animation: kofi-wiggle 3s infinite; }
            @-webkit-keyframes kofi-wiggle {0% { transform: rotate(0) scale(1); } 60% { transform: rotate(0) scale(1); } 75% { transform: rotate(0) scale(1.15); } 80% { transform: rotate(0) scale(1.12);} 84% { transform: rotate(-11deg) scale(1.12); } 88% { transform: rotate(11deg) scale(1.12); } 92% { transform: rotate(-11deg) scale(1.12); } 96% { transform: rotate(11deg) scale(1.12); } 100% { transform: rotate(0) scale(1); }}
            @-moz-keyframes kofi-wiggle {0% { transform: rotate(0) scale(1); } 60% { transform: rotate(0) scale(1); } 75% { transform: rotate(0) scale(1.15); } 80% { transform: rotate(0) scale(1.12);} 84% { transform: rotate(-11deg) scale(1.12); } 88% { transform: rotate(11deg) scale(1.12); } 92% { transform: rotate(-11deg) scale(1.12); } 96% { transform: rotate(11deg) scale(1.12); } 100% { transform: rotate(0) scale(1); }}
            @-o-keyframes kofi-wiggle {0% { transform: rotate(0) scale(1); } 60% { transform: rotate(0) scale(1); } 75% { transform: rotate(0) scale(1.15); } 80% { transform: rotate(0) scale(1.12);} 84% { transform: rotate(-11deg) scale(1.12); } 88% { transform: rotate(11deg) scale(1.12); } 92% { transform: rotate(-11deg) scale(1.12); } 96% { transform: rotate(11deg) scale(1.12); } 100% { transform: rotate(0) scale(1); }}
            @keyframes kofi-wiggle {0% { transform: rotate(0) scale(1); } 60% { transform: rotate(0) scale(1); } 75% { transform: rotate(0) scale(1.15); } 80% { transform: rotate(0) scale(1.12);} 84% { transform: rotate(-11deg) scale(1.12); } 88% { transform: rotate(11deg) scale(1.12); } 92% { transform: rotate(-11deg) scale(1.12); } 96% { transform: rotate(11deg) scale(1.12); } 100% { transform: rotate(0) scale(1); }}
/* Gallery Section */

#iv-info_cont{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
#iv_bg{
    width: 100vw;
    height: 100vh;
    background-color: rgba(20,14,11,0.80);
    position: absolute;
    z-index: 1;
}
    #close-iv_btn{
        position: fixed;
        top: 25px;
        right: 25px;
        width: 20px;
        height: 20px;
        opacity: 0.7;
        background-image: url('../imgs/ivb-close_icon_hover.svg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        cursor: pointer;
    }
        #close-iv_btn:hover { opacity: 1; }
    #iv-info-box{
        max-width: 520px;
        max-height: 95%;
        border-radius: 6px;
        /*max-height: 100vh;*/
        height: auto;
        padding: 60px calc(55px - var(--nav-bar-width)) 50px 55px;
        background-color: #161514;
        font-family: 'Gotham Book', sans-serif;
        color: var(--light-gray);
        user-select: text;
        /*overflow: hidden;*/
        overflow-x: hidden;
        box-shadow: 0px 0px 8px rgba(22, 21, 20, 0.6);
        z-index: 2;

        -webkit-transform: translateY(100px);
        -moz-transform: translateY(100px);
        -o-transform: translateY(100px);
        -ms-transform: translateY(100px);
        transform: translateY(100px);
        -webkit-animation: appearIn ease-in-out 0.3s forwards normal 1 running;
        -moz-animation: appearIn ease-in-out 0.3s forwards normal 1 running;
        -o-animation: appearIn ease-in-out 0.3s forwards normal 1 running;
        -ms-animation: appearIn ease-in-out 0.3s forwards normal 1 running;
        animation: appearIn ease-in-out 0.3s forwards normal 1 running;
    }
    @-webkit-keyframes appearIn { 0%{ transform: translateY(100px); } 100%{ transform: translateY(0px); } }
    @-moz-keyframes appearIn { 0%{ transform: translateY(100px); } 100%{ transform: translateY(0px); } }
    @-o-keyframes appearIn { 0%{ transform: translateY(100px); } 100%{ transform: translateY(0px); } }
    @keyframes appearIn { 0%{ transform: translateY(100px); } 100%{ transform: translateY(0px); } }

        #img-prev {
            width: 100%;
            max-width: 512px;
            max-height: 410px;
            height: fit-content;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            margin-bottom: 25px;
            background-color: #111111;
        }
            #img-prev img, #img-prev video{
                display: block;
                border: none;
                position: relative;
            }

                #img-prev img.square, #img-prev img.landscape, #img-prev video.landscape{ max-width: 100%; width: 100%; height: auto; }
                #img-prev img.portrait, #img-prev video.portrait{ max-height: 410px; height: 410px; width: auto;}

        #iv-info-box h2 {
            font-family: 'Gotham Bold';
            text-transform: uppercase;
            margin-bottom: 1em;
        }
        #iv-info-box p{ margin-bottom: 15px; }
        #iv-info-box b{ font-weight: normal; font-family: 'Gotham Bold', sans-serif; }
        #iv-info-box .tags{ margin-bottom: 10px; display: inline-block;}
        #iv-info-box a.desc-links {
            color: var(--light-gray);
            display: inline-block;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        #iv-info-box a.desc-links:hover{ color: var(--oho-orange); }
        #iv-info-box tag {
            display: inline-block;
            padding: 2px 4px;
            margin-bottom: 5px;
            color: #161514;
            font-weight: bold;
            background-color: var(--gray);
            font-size: 0.9375em;
            border-radius: 2px;
            user-select: none;
        }
        #iv-info-box tag:hover {background-color: #875341;}
        #iv-info-box .iv-logo-top {
            max-height: 50px;
            margin-bottom: 20px;
        }

#disclaimer-wrapper{
    display: flex;
    flex-wrap: wrap;
    flex-flow: column;
    align-items: center;
    color: var(--gray);
}
    #disclaimer-wrapper p{
        font-family: 'DejaVu Serif', sans-serif;
        text-align: center;
        font-style: italic;
        margin-bottom: 1.5em;
        font-size: 0.9375em;
        line-height: 160%;
    }

.expand_btn{
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 9;
    background-image: url('../imgs/expand_icon.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    background-color: rgba(20,14,11,0.8);
    user-select: none;
    pointer-events: none;
}
.view-info_link{
    display: inline-block;
    background-color: rgba(20,14,11,0.8);
    padding: 20px 25px;
    font-family: 'Gotham Medium', sans-serif;
    font-size: 0.875em;
    letter-spacing: 1pt;
    color: var(--light-gray);
    text-transform: uppercase;
    cursor: pointer;
    position: absolute;
    z-index: 10;
    left: 0px;
    bottom: 0px;
}
    .view-info_link:hover, .expand_btn:hover{ background-color: rgba(20,14,11,1);}

#logo-foot{
    margin-top: 30px;
    position: relative;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 40px;
    opacity: 0.6;
    background-image: url('../imgs/oh-logo-gs_graph.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.gallery-section{
    width: calc(100vw - var(--nav-bar-width));
    padding-top: 1px;
    padding-bottom: 30px;
    background-image: url(../imgs/BG_lighter.jpg);
    background-position: center;
    background-size: auto;
}
.gallery-section img {border: none; outline: none; display: block; object-fit: cover;}
.gallery-section video {border: none; outline: none; display: block; object-fit: cover;}
    #gallery-grid{
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
        .gg_img-box{
            width: calc((100vw - var(--nav-bar-width))/4);
            height: calc((100vw - var(--nav-bar-width))/4);
            cursor: pointer;
            position: relative;
        }
            .wrapper{
                position: relative;
                overflow: hidden;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
                .wrapper div{
                    -webkit-transition: all 0.15s ease-in-out;
                    -moz-transition: all 0.15s ease-in-out;
                    -o-transition: all 0.15s ease-in-out;
                    -ms-transition: all 0.15s ease-in-out;
                    transition: all 0.15s ease-in-out;
                }
            .smoked-screen{
                width: 100%;
                display: inline-block;
                position: absolute;
                z-index: 3;
                height: 100%;
                background-color: var(--smoke-black);
                opacity: 0.2;
            }
                .active-info{ background-color: var(--oho-orange); opacity: 0.5; }
            .hue-screen{
                width: 100%;
                display: inline-block;
                position: absolute;
                z-index: 2;
                height: 100%;
                background-color: var(--smoke-black);
                -webkit-mix-blend-mode: hue;
                -ms-mix-blend-mode: hue;
                -o-mix-blend-mode: hue;
                mix-blend-mode: hue;
            }
            .play-stv-btn{
                width: 100%;
                display: inline-block;
                position: absolute;
                z-index: 4;
                height: 100%;
                background-image: url("../imgs/play-stv-btn.svg"), url("../imgs/play-stv-btn.png");
                background-size: 20%;
                background-position: center;
                background-repeat: no-repeat;
                opacity: 0.65;
            }
            .gg_img-box img, .gg_img-box video{
                display: block;
                border: none;
                position: relative;
                z-index: 1;
                -webkit-transition: scale 0.2s ease-in-out;
                -moz-transition: scale 0.2s ease-in-out;
                -o-transition: scale 0.2s ease-in-out;
                -ms-transition: scale 0.2s ease-in-out;
                transition: scale 0.2s ease-in-out;
            }
                img.square, img.landscape, video.landscape{ max-height: 100%; height: 100%; }
                img.portrait, video.portrait, video.square{ max-width: 100%; width: 100%; }

/* -- REMUEVE EL 'LOADING' DEL FOOTER -- */
.ui-loader, .ui-corner-all, .ui-body-a, .ui-loader-default { display: none !important; }

/* BARRA DE NAVEGACIÓN */
.pagination_bar{
    position: sticky;
    top: -1px;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -1px;
    border-top: 1px solid #1D1714;
    width: 100%;
    max-height: 70px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: var(--darker-smoke-black);
    font-family: 'amp bold', sans-serif;
    font-size: 17px;
    gap: 3px;
}
    .pagination_bar a{ text-decoration: none; color: inherit; }
    .pagination_bar a:focus{ color: inherit; }
    .page_nav{
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1;
        height: 40px;
        border-radius: 3px;
        background-color: #1E1A19;
        cursor: pointer;
    }
        .page_nav:hover{ background-color: #372E2B; }
        .page_nav.active{ cursor: default; background-color: #372E2B; pointer-events: none;}

        .inactive-pgnt{ cursor: default !important; opacity: 0.5; pointer-events: none;}

    .pagination_bar.is-pinned{ 
        background-color: rgba(20, 14, 11, 0.90);
        -webkit-backdrop-filter: blur(10px);
        -moz-backdrop-filter: blur(10px);
        -o-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
     }

/* ------------------- RESPONSIVE ----------------------------- */                

@media (max-width: 1024px) {
    .main-title{
        font-size: 4.375em;
        line-height: 80px;
    }
    #top-banner{ background-size: cover; }
        .gg_img-box{
            width: calc(100vw/2 - var(--nav-bar-width)/2);
            height: calc(100vw/2 - var(--nav-bar-width)/2);
        }
        .main-desc {
            padding-left: 30px;
            padding-right: 30px;
        }
    #gallery-grid { grid-template-columns: repeat(2, 1fr); column-gap: 0px; row-gap: 0px;}
}
@media (max-width: 720px) {
    .main-title{ line-height: 60px; }
        .gg_img-box{
            width: calc(100vw - var(--nav-bar-width));
            height: calc(100vw - var(--nav-bar-width));
        }
        .main-desc {
            padding-left: 20px;
            padding-right: 20px;
        }
    #gallery-grid { grid-template-columns: repeat(2, 1fr); row-gap: 0px; column-gap: 0px;}
    .expand_btn{
        width: 70px;
        height: 70px;
    }
    .view-info_link{ font-size: 1.1875em; }
}
@media (max-width: 480px) {
    .main-title{
        font-size: 3.75em;
        line-height: 50px;
    }
    #iv-info-box{
        max-width: 100%;
        max-height: 100vh;/
    }
    #gallery-grid { grid-template-columns: 1fr; row-gap: 0px;}
}