:root {
    /* Main Colors */
    --gray: #9e8f8b;
    --smoke-black: #210f07;
    --darker-smoke-black: #140e0b;
    --dark-brown: #2d211e;
    --smoke-brown: #44302c;
    --lighter-smoke-brown: #5a4541;
    --pale-cream-orange: #d6b7a7;
    --cream-orange: #ffa585;
    --light-orange: #f96e47;
    --oho-orange: #ff4926;
    --oho-orange-dark: #a5291c;
    --smoke-gray: #968783;
    --light-gray: #ede8e6;
    --pale-orangy-gray: #ead7ca;

    --round-corners: 8px;
    --rounder-corners: 10px;

    /* 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);
    background-image: url('../imgs/assets/index-bg.png');
    background-position: top center;
    /*background-attachment: fixed;*/
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 0px;
    margin: 0px;
    color: var(--light-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: rgba(150, 135, 131, 0.26); outline: none; }
::-webkit-scrollbar-thumb:hover{ background-color: var(--oho-orange);}

/* General Styles */
h1, h2, h3, h4 { margin: 0px; padding: 0px; display: block; }
p { display: block; padding: 0px; margin: 0px; }
a{ outline: none; border: none; cursor: pointer; color: var(--cream-orange); text-decoration: none;}
a:hover { color: var(--light-orange); text-decoration: none;}
a:focus{ color: inherit; }
b {font-weight: normal; font-family: 'Gotham Bold';}
img { outline: none; border: none; }

/* Top Banner */
#top-banner{
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    padding-top: 80px;
    padding-bottom: 45px;
}
    .main-title{
        font-family: 'Gotham Black', sans-serif;
        font-size: 48px;
        font-weight: normal;
        color: var(--pale-orangy-gray);
        text-align: center;
        margin-bottom: 22px;
        text-shadow: 0px 0px 20px rgba(249, 110, 71, 0.25);
    }
    .main-desc{
        width: 100%;
        max-width: 690px;
        font-family: 'Gotham Light', sans-serif;
        text-align: center;
        font-weight: 100;
        margin-bottom: 32px;
        line-height: 150%;
    }
    .tags_wrapper{
        width: 100%;
        max-width: 690px;
        display: flex;
        gap: 4px;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }
        .xp-tags{
            padding: 4px 7px;
            border-radius: 4px;
            background-color: var(--smoke-brown);
            font-family: 'Gotham Light', sans-serif;
            font-size: 12px;
        }
            .xp-tags:hover{background-color: var(--lighter-smoke-brown);}
    
        .pt-bubble {
            font-family: 'amp medium', sans-serif;
            font-size: 13px;
            text-transform: uppercase;
            color: var(--light-gray);
            border-radius: 100px;
            margin: 40px auto 0px auto;
            padding: 6px 12px;
            background-color: var(--light-orange);
            letter-spacing: 0.25pt;
        }

/* Model Info */
.mi-wrapper{
    width: 1080px;
    height: max-content;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-bottom: 40px;
}
    .mi-wrapper h2 {
        font-family: 'Gotham Bold', sans-serif;
        font-size: 28px;
        color: var(--pale-orangy-gray);
        text-align: center;
        margin-bottom: 14px;
    }

    .mi_details { display: flex; flex-direction: row; gap: 12px;}
        .mi_details P:nth-child(1) { color: var(--gray); }
        .mi_details P:nth-child(2) { font-family: 'Gotham Medium', sans-serif; }

/* Gallery Section */
.gallery-section{ padding-bottom: 40px; }

.g-wrapper{
    width: 1080px;
    height: max-content;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3px;
    row-gap: 3px;
    overflow: hidden;
    border-radius: var(--rounder-corners);
}

    .col-cont{
        display: grid;
        column-gap: 3px;
        row-gap: 3px;
    }
        .two-pics, .three-pics, .four-pics{ grid-template-columns: repeat(2, 1fr); }
        .single-pic{ grid-template-columns: 1fr; }
            .i-c{ display: grid;}
                .two-rows{ grid-template-rows: auto auto; row-gap: 3px;}
                .single-row { grid-template-rows: auto; row-gap: 0px;}
                .single-row img { height: 100%; }
                .single-row img.video { width: 100%; object-fit: cover;}

    .p-box{
        overflow: hidden;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--darker-smoke-black);
    }

        .p-box:hover > .hue-layer{ opacity: 0; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
        .p-box:hover > img:not(.video) {
            opacity: 1;
            -webkit-transform: scale(110%);
            -moz-transform: scale(110%);
            -o-transform: scale(110%);
            transform: scale(110%);
            -webkit-transition: all 0.25s ease-in-out;
            -moz-transition: all 0.25s ease-in-out;
            -o-transition: all 0.25s ease-in-out;
            transition: all 0.25s ease-in-out;
        }
        .p-box:hover > img.video, .p-box:hover > .black-screen{
            opacity: 0;
            -webkit-transition: all 0.25s ease-in-out;
            -moz-transition: all 0.25s ease-in-out;
            -o-transition: all 0.25s ease-in-out;
            transition: all 0.25s ease-in-out;
        }
        /*.p-box:hover > video{
            opacity: 1;
            visibility: visible;
            -webkit-transition: none;
            -moz-transition: none;
            -o-transition: none;
            transition: none;
        }*/

        .g-wrapper .hue-layer {
            width: 100%;
            height: 100%;
            background-color: var(--darker-smoke-black);
            mix-blend-mode: hue;
            position: absolute;
            z-index: 3;
            opacity: 1;
            -webkit-transition: all 0.25s ease-in-out;
            -moz-transition: all 0.25s ease-in-out;
            -o-transition: all 0.25s ease-in-out;
            transition: all 0.25s ease-in-out;
            pointer-events: none;
        }
        .g-wrapper .black-screen {
            width: 100%;
            height: 100%;
            background-color: var(--darker-smoke-black);
            position: absolute;
            z-index: 1;
            opacity: 1;
            -webkit-transition: all 0.25s ease-in-out;
            -moz-transition: all 0.25s ease-in-out;
            -o-transition: all 0.25s ease-in-out;
            transition: all 0.25s ease-in-out;
            pointer-events: none;
        }
        .g-wrapper img {
            display: block;
            position: relative;
            -webkit-transform: scale(100%);
            -moz-transform: scale(100%);
            -o-transform: scale(100%);
            transform: scale(100%);
            z-index: 2;
            width: 100%;
            opacity: 0.85;
            -webkit-transition: all 0.25s ease-in-out;
            -moz-transition: all 0.25s ease-in-out;
            -o-transition: all 0.25s ease-in-out;
            transition: all 0.25s ease-in-out;
            object-fit: cover;
            pointer-events: none;
        }
        .g-wrapper .vb img {
            -webkit-transition: all 0.25s ease-in-out;
            -moz-transition: all 0.25s ease-in-out;
            -o-transition: all 0.25s ease-in-out;
            transition: all 0.25s ease-in-out;
            object-fit: cover;
            pointer-events: none;
        }
        .g-wrapper video{
            position: absolute;
            z-index: 0;
            outline: none;
            display: block;
            /*visibility: hidden;*/
            height: 100%;
            object-fit: cover;
            /*opacity: 0;*/
            /*-webkit-transition: none;
            -moz-transition: none;
            -o-transition: none;
            transition: none;
            pointer-events: none;*/
        }
            .g-wrapper video.small{ width: 100%; }
            .g-wrapper video.long{ height: 100%; }

        /*a.gl{ display: flex; }*/
    
    /* ICONS */
    .vb::after {
        content: '';
        display: block;
        width: 28px;
        height: 28px;
        position: absolute;
        z-index: 5;
        top: 20px;
        right: 20px;
        background-image: url(../imgs/assets/video_icon.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        opacity: 0.9;
    }
    .cb::after {
        content: '';
        display: block;
        width: 28px;
        height: 28px;
        position: absolute;
        z-index: 5;
        top: 20px;
        right: 20px;
        background-image: url(../imgs/assets/collage_icon.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        opacity: 0.9;
    }

    line{
        display: flex;
        width: 100%;
        height: 1px;
        background-color: rgba(66, 61, 60, 0.60);
        position: relative;
        align-items: center;
        justify-content: center;
        margin-top: 80px;
        margin-bottom: 80px;
    }
    line.short {
        width: 175px;
        margin: auto;
        background-color: rgba(66, 61, 60, 0.50);
        height: 1.5px;
        border-radius: 3px;
        margin-top: 85px;
        margin-bottom: 80px;
    }
        .h-icon{
            width: 38px;
            height: 38px;
            border-radius: 100px;
            background-color: var(--darker-smoke-black);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: rgba(66, 61, 60, 0.50);
        }
    
    .ah_r {
        width: 11px;
        height: 15px;
        background-image: url(../imgs/assets/arrow-r_w_icon.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .ah_l {
        width: 11px;
        height: 15px;
        rotate: 180deg;
        background-image: url(../imgs/assets/arrow-r_w_icon.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }

a.pt-btn {
    width: fit-content;
    display: flex;
    flex-direction: row;
    gap: 11px;
    align-items: center;
    justify-content: center;
    margin: 50px auto 0px auto;
    border-radius: 6px;
    background-color: var(--light-orange);
    font-family: 'Gotham Medium', sans-serif;
    padding: 16px 22px;
    color: var(--light-gray);
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
 }
    a.pt-btn:hover {
        background-color: var(--oho-orange);
        color: #ffffff;
        -webkit-transition: all 0.25s ease-in-out;
        -moz-transition: all 0.25s ease-in-out;
        -o-transition: all 0.25s ease-in-out;
        transition: all 0.25s ease-in-out;
    }

    .pt-btn.disabled { background-color: rgba(150, 135, 131, 0.65); opacity: 0.55; pointer-events: none; cursor: pointer; }

#comment-box {
    display: flex;
    justify-content: center;
    position: relative;
    width: fit-content;
    min-width: 360px;
    padding: 14px 20px;
    margin: 15px auto 0px auto;
    border-radius: 100px;
    background-color: var(--dark-brown);
    color: var(--light-gray);
}
    #comment-box::after {
        content: '';
        display: block;
        top: -10px;
        position: absolute;
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 0px 10px 12px 10px;
        border-color: transparent transparent var(--dark-brown) transparent;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

.logo-cont { width: 100%; height: 38px; background-image: url('../imgs/assets/oho-logo_g.png'); background-position: center; background-repeat: no-repeat; background-size: 36px 36px; opacity: 0.35; margin-bottom: 80px; margin-top: 70px;}

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

@media (max-width: 2560px) {
    :root { --round-corners: calc(8px * 1.5); --rounder-corners: calc(10px * 1.5); --nav-bar-width: calc(8px * 1.5); }
    body { font-size: calc(1em * 1.5); }
    #top-banner{ padding-top: calc(80px * 1.5); padding-bottom: calc(45px * 1.5); }
    .main-title{ font-size: calc(48px * 1.5); margin-bottom: calc(22px * 1.5); text-shadow: 0px 0px calc(20px * 1.5) rgba(249, 110, 71, 0.25); }
    .main-desc{ max-width: calc(690px * 1.5); margin-bottom: calc(32px * 1.5); }
    .tags_wrapper{ max-width: calc(690px * 1.5); gap: calc(4px * 1.5); }
    .xp-tags{ padding: calc(4px * 1.5) calc(7px * 1.5); border-radius: calc(4px * 1.5); font-size: calc(12px * 1.5); }
    .pt-bubble { font-size: calc(13px * 1.5); margin: calc(40px * 1.5) auto 0px auto; padding: calc(6px * 1.5) calc(12px * 1.5); letter-spacing: calc(0.25pt * 1.5); }
    .mi-wrapper{ padding-bottom: calc(40px * 1.5); }
    .mi-wrapper h2 { font-size: calc(28px * 1.5); margin-bottom: calc(14px * 1.5); }
    .mi_details { gap: calc(12px * 1.5); }
    .gallery-section{ padding-bottom: calc(40px * 1.5); }
    .g-wrapper{ width: calc(1080px * 1.5); column-gap: calc(3px * 1.5); row-gap: calc(3px * 1.5); }
    .col-cont{ column-gap: calc(3px * 1.5); row-gap: calc(3px * 1.5); }
    .two-rows{ row-gap: calc(3px * 1.5); }
    .vb::after { width: calc(28px * 1.5); height: calc(28px * 1.5); top: calc(20px * 1.5); right: calc(20px * 1.5); }
    .cb::after { width: calc(28px * 1.5); height: calc(28px * 1.5); top: calc(20px * 1.5); right: calc(20px * 1.5); }
    line{ margin-top: calc(80px * 1.5); margin-bottom: calc(80px * 1.5); }
    line.short { width: calc(175px * 1.5); height: calc(1.5px * 1.5); border-radius: calc(3px * 1.5); margin-top: calc(85px * 1.5); margin-bottom: calc(80px * 1.5); }
    .h-icon{ width: calc(38px * 1.5); height: calc(38px * 1.5); font-size: calc(24px * 1.5); }
    .ah_r { width: calc(11px * 1.5); height: calc(15px * 1.5); }
    a.pt-btn { gap: calc(11px * 1.5); margin: calc(50px * 1.5) auto 0px auto; border-radius: calc(6px * 1.5); padding: calc(16px * 1.5) calc(22px * 1.5); }
    #comment-box { min-width: calc(360px * 1.5); padding: calc(14px * 1.5) calc(20px * 1.5); margin: calc(15px * 1.5) auto 0px auto; }
    #comment-box::after { top: calc(-10px * 1.5); border-width: 0 calc(10px * 1.5) calc(12px * 1.5) calc(10px * 1.5); }
    .logo-cont { height: calc(38px * 1.5); background-size: calc(36px * 1.5) calc(36px * 1.5); margin-bottom: calc(80px * 1.5); margin-top: calc(70px * 1.5); }
}

@media (max-width: 1680px) {
    :root { --round-corners: 8px; --rounder-corners: 10px; --nav-bar-width: 8px; }
    body { font-size: 1em; }
    #top-banner{ padding-top: 80px; padding-bottom: 45px; }
    .main-title{ font-size: 48px; margin-bottom: 22px; text-shadow: 0px 0px 20px rgba(249, 110, 71, 0.25); }
    .main-desc{ max-width: 690px; margin-bottom: 32px; }
    .tags_wrapper{ max-width: 690px; gap: 4px; }
    .xp-tags{ padding: 4px 7px; border-radius: 4px; font-size: 12px; }
    .pt-bubble { font-size: 13px; margin: 40px auto 0px auto; padding: 6px 12px; letter-spacing: 0.25pt; }
    .mi-wrapper{ padding-bottom: 40px; }
    .mi-wrapper h2 { font-size: 28px; margin-bottom: 14px; }
    .mi_details { gap: 12px; }
    .gallery-section{ padding-bottom: 40px; }
    .g-wrapper{ width: 1080px; column-gap: 3px; row-gap: 3px; }
    .col-cont{ column-gap: 3px; row-gap: 3px; }
    .two-rows{ row-gap: 3px; }
    .vb::after { width: 28px; height: 28px; top: 20px; right: 20px; }
    .cb::after { width: 28px; height: 28px; top: 20px; right: 20px; }
    line{ margin-top: 80px; margin-bottom: 80px; }
    .h-icon{ width: 38px; height: 38px; font-size: 24px; }
    .ah_r { width: 11px; height: 15px; }
    a.pt-btn { gap: 11px; margin: 50px auto 0px auto; border-radius: 6px; padding: 16px 22px; }
    #comment-box { min-width: 360px; padding: 14px 20px; margin: 15px auto 0px auto; }
    #comment-box::after { top: -10px; border-width: 0 10px 12px 10px; }
    .logo-cont { height: 38px; background-size: 36px 36px; margin-bottom: 80px; margin-top: 70px; }
}

@media (max-width: 1079px) { body { padding: 0px 20px; } .mi-wrapper { width: 100%; } .g-wrapper{ width: 100%; grid-template-columns: 100%; } }