/*  ------- NavBar -------  */


.dv-nav-font {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 500;
    font-size: 1.3rem;
    color: #FFFFFF;
    text-transform: uppercase;
}

.dv-navbar-top-color {
    position: relative;
    height: calc(var(--p)*1px);
    width: 100%;
    background-size: auto 100%;
    background-image: linear-gradient(to right, #3d3930, #3d3930, #3d3930, #141b25, #141b25, #141b25);
    border-bottom: 4px solid black;
    z-index: 9999; 
}

.dv-navbar-top {
    background-image: url("/images/HeaderFooter/Header_Background01.jpg");
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    height: calc(1px * var(--header-height));
    background-size: auto 100%;
    z-index: 9999; 
}

.dv-navbar-nav-top {
    /* NOTE: Nasia's edits set align-self:top; and disabled margin-right.  Figure out what works with Jay's requests, and clean this class up. */
    margin-right: auto !important;
    padding-top: 0.4rem;
    padding-bottom: 0.1rem;
    align-self: center;
    /* margin-left: 50px !important; */
    justify-content: center;

}

.dv-navbar-nav-top>.active>a {
    color: #ffa400;
    text-decoration: underline;
    text-decoration-thickness: 4px;
}

.dv-navbar-top-item {
    font-size: 1.25rem;
    padding: 5px;
}

.dv-navbar-nav-top .nav-link {
    color: rgba(255, 255, 255, 0.5);
}

.dv-navbar-nav-top .nav-link:hover {
    color: rgba(255, 192, 81);
}

.dv-navbar-top .navbar-collapse {
    z-index: 9001;
    align-items: start;
    justify-content: center;
}

.dv-navbar-container {
    display: flex;
    flex-wrap: inherit;
    justify-content: space-between;

    position: relative;
    margin-right: auto !important;
    margin-left: auto !important;
    align-items: center;

}

.dv-navbar-size {
    width: var(--header-width);
    height: calc(1px * var(--header-height));
}
.dv-navbar-width {
    width: var(--header-width);
}
.dv-center-children {
    display: flex;
    flex-direction: column;
    flex-wrap: inherit;
    justify-content: center;
    align-items: center;
}

.dv-navbar-brand-bounds {
    height: calc(1px * var(--header-height));
    /* width: calc(4px * var(--header-height)); */
    overflow-x: visible;
    display: flex;
}


.dv-navbar-brand {
    /* height: calc(1px * var(--header-height)); */
    align-self: center;
}

.dropdown-a{
    color: #cbcbcb;
    width: 100%;
    height: 100%;
    display: inline-block;
}

.dv-navbar-menu-icon-account-order{
    order: 3;
    z-index: 10000;
    /* position: relative; */
}
/*  ------- footer nav -------  */


.dv-nav-footer-font {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 500;
    font-size: 1.3rem;
    color: #FFFFFF;
    text-transform: uppercase;

}

.dv-footer {
    background-position: center;
    background-repeat: no-repeat;
    background-color: black;
    height: 164px;
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-top: auto;
    position: sticky;
    top: 100vh;
}

.dv-footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}

.dv-footer-left {
    order: 1;
    flex-grow: 1;
    flex-shrink: 0;
    align-self: flex-start;
}

.dv-footer-left .navbar {
    padding-bottom: 0;
}

.dv-footer-right {
    order: 2;
    flex-grow: 0;
    flex-shrink: 0;
}

.dv-footer-right-icons {
    display: flex;
    flex-wrap: none;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    ;
}

.dv-footer hr {
    border: 1px solid #606062;
    margin: 0 0;
}

.dv-footer-link-images {
    height: 60px;
}

/*  ------- Sub Header -------  */

.dv-page-title {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    /* background-image: url("/images/SubHeader_Background.jpg"); */
    background-repeat: no-repeat;
    background-position: center;
    background-color: black;

    /* background-size: cover; */
    /* padding: 20px; */
    height: calc(1px * var(--dv-title-header));

    position: relative;
    z-index: 9999; 
}

.dv-page-title-text {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;


    font-family: "acumin-variable",sans-serif;
    font-variation-settings: 'wght' 1000, 'wdth' 67.5, 'slnt' 0;
    /*text-align: left;*/
    font-size: 4.5em;
    color: var(--dv-yellow);
    text-transform: uppercase;

}

.dv-subheader-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dv-subheader-font::first-letter {
    font-size: 1.0em;
}

.dv-subheader-rip {
    display: flex;
    background-image: url("/images/General/SubHeader_PageRip.png");
    background-position: center;
    height: 29px;
    z-index: 4;
    position: relative;
    bottom: 29px;
    background-repeat: repeat-x;
    background-size: auto 100%;
}

.dv-navbar-menu-icon {
    color: white;
    background-color: rgba(0, 0, 0, 0);
}

button.dv-navbar-condensed {
    border-width: 0;
}

.dropdown-overlay {
    display: flex;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9000;
    width: 100vw;
    height: 100vh;
}
/*  ------- Reactive Sizing -------  */

/* dv-navbar-condensed and dv-navbar-expanded control the visibiliity on items when navbar is in condensed or expanded mode */

/* Mobile Screen */
@media screen and (max-width: 790px) {
    :root {
        --header-height: 87;
    }

    .dv-navbar-condensed {
        display: block;
    }

    .dv-navbar-expanded {
        display: none;
    }

    .dv-navbar-container {
        justify-content: space-between;
    }

    .dv-navbar-top .navbar-collapse {
        position: absolute;
        width: 100%;
        margin: 0px;
        color: #dee2e6;
        background-color: #343a40;
        border-color: rgba(0, 0, 0, 0.15);
        list-style: none;
        padding-left: 0px;
        top: calc(1px * var(--header-height));
        left: 0px;
    }

    .navbar-collapse .dv-navbar-top-item {
        font-family: 'Kanit';
        font-style: normal;
        font-weight: 500;
        font-size: 1.3rem;
        color: #cbcbcb;
        text-transform: none;
        cursor: pointer;
        padding: 10px;
    }

    .navbar-collapse .dv-navbar-top-item:hover{
        font-family:'Kanit';
        font-style: normal;
        font-weight: 500;
        font-size: 1.3rem;
        color: #FFFFFF;
        text-transform:none;
        cursor: pointer;
        background-color: #43301E;
    }

    .dv-navbar-brand-bounds {
        align-self: center;
        height: calc(0.35px * var(--header-height));
        /* width: calc(1.6px * var(--header-height)); */
        order: 2;
        background-image: url("/images/HeaderFooter/DominationsWorld_LogoBackground.png");
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dv-navbar-brand {
        /* height:calc(1px * var(--header-height) / 2); */
        display: none;
    }

    .dv-navbar-brand-mobile {
        /* width: 150px; */
        /* temporary for beta logo */
        width: 120px;
        display: none;
    }

    .account-menu-collapse {
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 82px;
        width: 100%;
    }

    .account-menu-collapse-signed-in {
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 82px;
        width: 100%;
        left: 0px;
    }

    .dropdown-a:hover{
        color: white!important;
    }

    .dv-footer-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .dv-footer-left {
        align-self: center;
    }

    .dv-footer-left hr {
        display: none;
    }
    .dv-nav-footer-font {
        font-family: 'Kanit';
        font-style: normal;
        font-weight: 500;
        font-size: 1rem;
        color: #FFFFFF;
        text-transform: uppercase;
    
    }
    .expanded-signup-button{
        display: none;
    }
    .expanded-login-button{
       display: none;
    }

}


/* Small Screen */
@media screen and (min-width: 791px) and (max-width: 1049px) {
    .dv-navbar-condensed {
        display: block;
    }

    .dv-navbar-expanded {
        display: none;
    }

    .dv-navbar-top .navbar-collapse {
        position: absolute;
        width: 450px;
        margin: 0px;
        color: #dee2e6;
        background-color: #343a40;
        border-color: rgba(0, 0, 0, 0.15);
        list-style: none;
        padding-left: 0px;
        top: calc(1px * var(--header-height));
    }

    .dv-navbar-container {
        justify-content: space-between;
    }

    .navbar-collapse .dv-navbar-top-item {
        font-family: 'Kanit';
        font-style: normal;
        font-weight: 500;
        font-size: 1.3rem;
        color: #cbcbcb;
        text-transform: none;
        cursor: pointer;
        padding: 10px;
    }

    .navbar-collapse .dv-navbar-top-item:hover{
        font-family:'Kanit';
        font-style: normal;
        font-weight: 500;
        font-size: 1.3rem;
        color: #FFFFFF;
        text-transform:none;
        cursor: pointer;
        background-color: #43301E;
    }

    .dropdown-a:hover{
        color: white!important;
    }

    .dv-navbar-brand-bounds {
        order: 2;
    }
    .dv-navbar-brand {
        width: 348px;
    }
    .dv-navbar-brand-mobile {
        display: none;
    }

    .account-menu-collapse {
        position: absolute;
        right: 0px;
        top: calc(1px * var(--header-height));
    }

    .account-menu-collapse-signed-in {
        position: absolute;
        right: 0px;
        top: calc(1px * var(--header-height));
    }
    .expanded-signup-button{
        display: none;
    }
    .expanded-login-button{
       display: none;
    }    

}



/* Medium Screen */
@media screen and (min-width: 1050px) and (max-width: 1280px) {

    .dv-navbar-condensed {
        display: block;
    }

    .dv-navbar-expanded {
        display: none;
    }

    .dv-navbar-container {
        justify-content: space-between;
    }

    .dv-navbar-top .navbar-collapse {
        position: absolute;
        width: 450px;
        margin: 0px;
        color: #dee2e6;
        background-color: #343a40;
        border-color: rgba(0, 0, 0, 0.15);
        list-style: none;
        padding-left: 0px;
        top: calc(1px * var(--header-height));
    }

    .navbar-collapse .dv-navbar-top-item {
        font-family: 'Kanit';
        font-style: normal;
        font-weight: 500;
        font-size: 1.3rem;
        color: #cbcbcb;
        text-transform: none;
        cursor: pointer;
        padding: 10px;
    }

    .navbar-collapse .dv-navbar-top-item:hover{
        font-family:'Kanit';
        font-style: normal;
        font-weight: 500;
        font-size: 1.3rem;
        color: #FFFFFF;
        text-transform:none;
        cursor: pointer;
        background-color: #43301E;
    }

    .dropdown-a:hover{
        color: white!important;
    }

    .dv-navbar-brand-bounds {
        order: 2;
    }
    .dv-navbar-brand {
        width: 348px;
    }

    .dv-navbar-brand-mobile {
        display: none;
    }

    .account-menu-collapse {
        position: absolute;
        right: 0;
        top: calc(1px * var(--header-height));
    }

    .account-menu-collapse-signed-in {
        position: absolute;
        right: 0;
        top: calc(1px * var(--header-height));
    }
    .expanded-signup-button{
        display: none;
    }
    .expanded-login-button{
       display: none;
    }
}

/* Large Screen */
@media screen and (min-width: 1281px) and (max-width: 1600px) {

    .dv-navbar-condensed {
        display: none;
    }

    .dv-navbar-expanded {
        display: block;
    }

    .navbar-collapse .dv-navbar-top-item {
        /*background-color: none;*/
    }

    .dv-navbar-brand-bounds {
        order: 0;
    }
    .dv-navbar-brand {
        width: 250px;
    }
    .dv-navbar-brand-mobile {
        display: none;
    }

    .modal-dialog {
        margin: 2.55rem auto;
    }

    .dv-navbar-top .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    .dv-navbar-top .navbar-nav {
        flex-direction: row;
        /* width: 400px */
    }
    .dv-navbar-top-item {
        padding: 10px;
    }

    .dv-navbar-top .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .account-menu-collapse {
        position: relative;
    }

    .dv-signed-in-mobile {
        display: none;
    }
    .dropdown-item-icon-hide{
        display: none;
    }

    .collapsed-login-button{
        display: none !important;
    }
    .collapsed-signup-button{
        display: none !important;
    }
    .expanded-signup-button{
    }
    .expanded-login-button{
    }    
}


/* X-Large Screen */
@media screen and (min-width: 1601px) {

    .dv-navbar-condensed {
        display: none;
    }

    .dv-navbar-expanded {
        display: block;
    }

    .navbar-collapse .dv-navbar-top-item {
        /*background-color: none;*/
    }

    .dv-navbar-brand-bounds {
        order: 0;
    }
    .dv-navbar-brand {
        width: 250px;
    }

    .dv-navbar-brand-mobile {
        display: none;
    }

    .modal-dialog {
        margin: 2.55rem auto;
    }

    .dv-navbar-top .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    .dv-navbar-top .navbar-nav {
        flex-direction: row;
        /* width: 400px; */
    }

    .dv-navbar-top .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    .dv-navbar-top-item {
        padding: 10px;
    }

    .account-menu-collapse {
        position: relative;
    }

    .dv-signed-in-mobile {
        display: none;
    }

    .dropdown-item-icon-hide{
        display: none;
    }

    .collapsed-login-button{
        display: none !important;
    }
    .collapsed-signup-button{
        display: none !important;
    }    
    .expanded-signup-button{
    }
    .expanded-login-button{
    }    
}


/*   0 1    2 3    4 5 */