nav
{
    font-size: 16px;
    background: white;
}

nav > #navbar-outer-wrapper
{
    position: relative;
}

nav > #navbar-outer-wrapper.sticky
{
	position: fixed;
	top: 0;
	z-index: 999;
	background: white;
	margin: 0;
    width: 100%;
    filter: drop-shadow(0 0 5px rgba(11, 24, 39, 0.5));
    -webkit-filter: drop-shadow(0 0 5px rgba(11, 24, 39, 0.5));
    -moz-filter: drop-shadow(0 0 5px rgba(11, 24, 39, 0.5));
    animation: sticky-navbar-slide 0.25s;
    -webkit-animation: sticky-navbar-slide 0.25s;
    -moz-animation: sticky-navbar-slide 0.25s;
    -o-animation: sticky-navbar-slide 0.25s;
}

nav > #navbar-outer-wrapper > #navbar-background
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-image: url("../../images/whitebg_hack.jpg");
    background-size: cover; 
    background-repeat: no-repeat;
    transition: 0.25s background-image;
    -webkit-transition: 0.25s background-image;
    -moz-transition: 0.25s background-image;
    -ms-transition: 0.25s background-image;
    -o-transition: 0.25s background-image;
}

@keyframes sticky-navbar-slide
{
    from { top: -100%; }
    to { top: 0; }
}

@-webkit-keyframes sticky-navbar-slide
{
    from { top: -100%; }
    to { top: 0; }
}

@-moz-keyframes sticky-navbar-slide
{
    from { top: -100%; }
    to { top: 0; }
}

@-o-keyframes sticky-navbar-slide
{
    from { top: -100%; }
    to { top: 0; }
}

nav > #navbar-outer-wrapper.sticky .nav-logo
{
	top: 0;
}

/*
    Left side of navbar
*/
nav > #navbar-outer-wrapper > #navbar-homebtn
{
    display: inline-block;
    width: 125px;
}

/*
    Home button
*/
#index-btn
{
	display: block;
    position: relative;
    z-index: 1000;
    text-decoration: none;
}

.nav-logo
{
	display: block;
	position: absolute;
    left: 120px;
    width: 120px;
	padding: 1%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    transition: 0.25s filter;
    -webkit-transition: 0.25s filter, 0.25s -webkit-filter;
    -moz-transition: 0.25s filter, 0.25s -moz-filter;
    -ms-transition: 0.25s filter;
    -o-transition: 0.25s filter;
}

/*
    Right side of navbar
*/
nav > #navbar-outer-wrapper > #navbar-right
{
    position: absolute;
    top: 0;
    right: 0;
}

/* Navbar text */
nav > #navbar-outer-wrapper > #navbar-right > h2
{
    position: relative;
    z-index: 1000;
    display: inline-block;
    vertical-align: top;
    color: rgb(11, 24, 39);
    margin: 0;
    line-height: 80px;
    font-family: "DIN Next LT Pro";
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-style: italic;
    font-size: 15px;
    font-weight: bold;
}

/* HHC logo */
nav > #navbar-outer-wrapper > #navbar-right > #hhc-logo
{
    position: relative;
    z-index: 1000;
    display: inline-block;
    vertical-align: top;
    height: 45px;
    margin-top: 16px;
    margin-left: 1em;
    margin-right: 1em;
}

/*
    Navbar content
*/
#navbar-content
{
    visibility: hidden;
    opacity: 0.0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    z-index: 990;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    top: -100%;
    width: 100%;
    background: rgb(78, 183, 71);
    transition: 0.25s visibility, 0.25s opacity, 0.25s top;
    -webkit-transition: 0.25s visibility, 0.25s opacity, 0.25s top;
    -moz-transition: 0.25s visibility, 0.25s opacity, 0.25s top;
    -ms-transition: 0.25s visibility, 0.25s opacity, 0.25s top;
    -o-transition: 0.25s visibility, 0.25s opacity, 0.25s top;
}

@media only screen and (max-width: 375px)
{
    nav > #navbar-outer-wrapper > #navbar-right > #navbar-userbtn-poswrapper
    {
        margin-right: 1.5em;
    }
}

@media only screen and (min-width: 375px) and (max-width: 500px)
{
    nav > #navbar-outer-wrapper > #navbar-right > #navbar-userbtn-poswrapper
    {
        margin-right: 2em;
    }
}

@media only screen and (min-width: 500px)
{
    nav > #navbar-outer-wrapper > #navbar-right > #navbar-userbtn-poswrapper
    {
        margin-right: 3em;
    }
}

nav > #navbar-outer-wrapper > #navbar-right > #navbar-userbtn-poswrapper
{
    position: relative;
    display: inline-block;
    vertical-align: top;
    height: 40px;
    margin-top: 18.5px;
}

nav > #navbar-outer-wrapper > #navbar-right #navbar-userbtn-outer-wrapper
{
    text-align: center;
}

nav > #navbar-outer-wrapper > #navbar-right #navbar-userbtn-outer-wrapper > button
{
    position: relative;
    z-index: 1001;
    display: block;
    border: none;
    background: transparent;
    padding: 0;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
}

nav > #navbar-outer-wrapper > #navbar-right #navbar-userbtn-outer-wrapper > button:focus
{
    outline: none;
}

nav > #navbar-outer-wrapper > #navbar-right #navbar-userbtn-outer-wrapper > button > img
{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1002;
}

nav > #navbar-outer-wrapper > #navbar-right #navbar-userbtn-outer-wrapper > #content
{
    position: absolute;
    z-index: 999;
    visibility: hidden;
    opacity: 0.0;
    top: 50px;
    display: inline-block;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    background: rgb(78, 183, 71);
    padding: 5px;
    width: 125px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    transition: 0.375s visibility, 0.375s opacity, 0.375s top;
    -webkit-transition: 0.375s visibility, 0.375s opacity, 0.375s top;
    -moz-transition: 0.375s visibility, 0.375s opacity, 0.375s top;
    -ms-transition: 0.375s visibility, 0.375s opacity, 0.375s top;
    -o-transition: 0.375s visibility, 0.375s opacity, 0.375s top;
}

nav > #navbar-outer-wrapper > #navbar-right #navbar-userbtn-outer-wrapper > #content > a
{
    display: block;
    color: white;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    text-decoration: none;
    font-size: 16px;
    line-height: 30px;
    font-family: "DIN Next LT Pro";
}

@media only screen and (max-width: 790px)
{
    #navbar-content > #navbar-lines
    {
        display: none;
    }
}

@media only screen and (max-width: 725px)
{
    #navbar-content > #navbar-link-container > .navbar-link
    {
        width: 100%;
        font-size: 32px;
    }

    #navbar-content > #navbar-link-container > .navbar-link > span
    {
        display: none;
    }
}

@media only screen and (min-width: 725px)
{
    #navbar-content > #navbar-link-container > .navbar-link
    {
        width: 425px;
        font-size: 40px;
    }

    #navbar-content > #navbar-link-container > .navbar-link > span
    {
        display: block;
    }
}

@media only screen and (min-width: 1400px)
{
    .profile-small
    {
        display: none !important;
    }

    .profile-large
    {
        display: inline-block !important;
    }
}

@media only screen and (max-width: 1400px)
{
    .profile-small
    {
        display: inline-block !important;
    }

    .profile-large
    {
        display: none !important;
    }
}

#navbar-content > #navbar-lines
{
    position: absolute;
    right: 0;
    top: 0;
    padding: 5%;
    pointer-events: none;
}

#navbar-content > #navbar-lines > img
{
    display: block;
}

#navbar-content > #navbar-link-container
{
    padding-top: 10%;
    padding-bottom: 10%;
    padding-left: 10%;
    letter-spacing: -1em;
}

#navbar-content > #navbar-link-container > .navbar-link
{
    display: inline-block;
    vertical-align: top;
    font-family: "DIN Next LT Pro Black";
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
    margin-top: 25px;
    margin-bottom: 25px;
    max-width: 100%;
    letter-spacing: 0.05em;
    text-decoration: none;
    color: white;
}

#navbar-content > #navbar-link-container > .navbar-link > span
{
    font-family: "DIN Next LT Pro";
    text-transform: none;
    letter-spacing: normal;
    font-style: normal;
    font-size: 16px;
    font-weight: normal;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

/*
    This is used to turn the navbar into the dark variant
*/
.navbar-dark
{
    background: rgb(11, 24, 39);
}

.navbar-dark > #navbar-outer-wrapper.sticky
{
    background: rgb(11, 24, 39);
}

.navbar-dark > #navbar-outer-wrapper > #navbar-background
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-image: url("../../images/och_navbar_background.png");
    background-size: cover; 
    background-repeat: no-repeat;
}

.navbar-dark > #navbar-outer-wrapper > #navbar-right > h2
{
    color: white;
}

@media only screen and (max-width: 1050px)
{
    nav > #navbar-outer-wrapper > #navbar-right > h2
    {
        font-size: 0;
    }
}

@media only screen and (min-width: 750px)
{
    nav
    {
        height: 80px;
    }
    
    nav > #navbar-outer-wrapper
    {
        height: 80px;
    }

    .navbar-dark > #navbar-outer-wrapper > #navbar-background,
    nav > #navbar-outer-wrapper > #navbar-background
    {
        height: 80px;
    }

    #navbar-content
    {
        height: calc(100vh - 80px);
        height: -webkit-calc(100vh - 80px);
        height: -moz-calc(100vh - 80px);
        height: expression(100vh - 80px);
    }

    /* AAAA */
    #navbar-right > #navbar-btn-outer-wrapper
    {
        display: inline-block;
        vertical-align: top;
        position: relative;
        height: 80px;
        width: 80px;
        margin-left: 80px;
        margin-right: 80px;
    }

    #navbar-right > #navbar-btn-outer-wrapper > #navbar-btn-container
    {
        position: absolute;
        z-index: 1000;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        background: rgb(80, 180, 80);
        height: 80px;
        width: 80px;
        transform-origin: 100% 0%;
        -webkit-transform-origin: 100% 0%;
        -moz-transform-origin: 100% 0%;
        -ms-transform-origin: 100% 0%;
        -o-transform-origin: 100% 0%;
        padding-top: 113.137px; /* Navbar is 80px tall and since our container has a stock width of 80px...*/
        padding-left: 5px;
        padding-right: 5px;

        /* Include padding in border radius */
        border-radius: 0 0 55px 55px;
        -webkit-border-radius: 0 0 55px 55px;
        -moz-border-radius: 0 0 55px 55px;
        
        /* Background transition */
        transition: 0.25s background-color;
        -webkit-transition: 0.25s background-color;
        -moz-transition: 0.25s background-color;
        -ms-transition: 0.25s background-color;
        -o-transition: 0.25s background-color;
    }

    #navbar-right > #navbar-btn-outer-wrapper > #navbar-btn-container > button
    {
        position: relative;
        top: 42.5px;
        left: 47.5px;
        font-size: 200%;
        
        /* Ensure positioning using top/left is always measured from the elements center instead of its edge */
        transform: translate(-50%, -50%) rotate(-45deg);
        -webkit-transform: translate(-50%, -50%) rotate(-45deg);
        -moz-transform: translate(-50%, -50%) rotate(-45deg);
        -ms-transform: translate(-50%, -50%) rotate(-45deg);
        -o-transform: translate(-50%, -50%) rotate(-45deg);
        background: transparent;
        color: white;
        padding: 0;
        border: none;
        cursor: pointer;
    }

    #navbar-right > #navbar-btn-outer-wrapper > #navbar-btn-container > button:focus
    {
        outline: none;
    }

    #navbar-right > #navbar-btn-outer-wrapper > #navbar-btn-container > button > img
    {
        display: block;
        width: 30px;
        height: 60px;
    }
}

@media only screen and (max-width: 750px)
{
    nav
    {
        height: 80px;
    }
    
    nav > #navbar-outer-wrapper
    {
        height: 80px;
    }

    .navbar-dark > #navbar-outer-wrapper > #navbar-background,
    nav > #navbar-outer-wrapper > #navbar-background
    {
        height: 80px;
    }

    #navbar-content
    {
        height: calc(100vh - 80px);
        height: -webkit-calc(100vh - 80px);
        height: -moz-calc(100vh - 80px);
        height: expression(100vh - 80px);
    }

    /* AAAA */
    #navbar-right > #navbar-btn-outer-wrapper
    {
        display: inline-block;
        vertical-align: top;
        position: relative;
        height: 80px;
        width: 80px;
        margin-left: 80px;
        margin-right: -40px;
    }

    #navbar-right > #navbar-btn-outer-wrapper > #navbar-btn-container
    {
        position: absolute;
        z-index: 1000;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        background: rgb(80, 180, 80);
        height: 80px;
        width: 80px;
        transform-origin: 100% 0%;
        -webkit-transform-origin: 100% 0%;
        -moz-transform-origin: 100% 0%;
        -ms-transform-origin: 100% 0%;
        -o-transform-origin: 100% 0%;
        padding-top: 113.137px; /* Navbar is 80px tall and since our container has a stock width of 80px...*/
        padding-left: 5px;
        padding-right: 5px;

        /* Include padding in border radius */
        border-radius: 0 0 55px 55px;
        -webkit-border-radius: 0 0 55px 55px;
        -moz-border-radius: 0 0 55px 55px;
        
        /* Background transition */
        transition: 0.25s background-color;
        -webkit-transition: 0.25s background-color;
        -moz-transition: 0.25s background-color;
        -ms-transition: 0.25s background-color;
        -o-transition: 0.25s background-color;
    }

    #navbar-right > #navbar-btn-outer-wrapper > #navbar-btn-container > button
    {
        position: relative;
        top: 42.5px;
        left: 47.5px;
        font-size: 200%;
        
        /* Ensure positioning using top/left is always measured from the elements center instead of its edge */
        transform: translate(-50%, -50%) rotate(-45deg);
        -webkit-transform: translate(-50%, -50%) rotate(-45deg);
        -moz-transform: translate(-50%, -50%) rotate(-45deg);
        -ms-transform: translate(-50%, -50%) rotate(-45deg);
        -o-transform: translate(-50%, -50%) rotate(-45deg);
        background: transparent;
        color: white;
        padding: 0;
        border: none;
        cursor: pointer;
    }

    #navbar-right > #navbar-btn-outer-wrapper > #navbar-btn-container > button:focus
    {
        outline: none;
    }

    #navbar-right > #navbar-btn-outer-wrapper > #navbar-btn-container > button > img
    {
        display: block;
        width: 30px;
        height: 60px;
    }

    nav > #navbar-outer-wrapper > #navbar-right > #hhc-logo
    {
        display: none;
    }

    .nav-logo
    {
        left: 5px;
        width: 100px;
    }
}

nav > #navbar-outer-wrapper > #navbar-right #navbar-userbtn-outer-wrapper > button > h1
{
    position: absolute;
    z-index: 1002; /* A z-index of 1000 matches the background hack element, so adding 2 will cause the h1 to be rendered afterwards. */
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    white-space: nowrap;
    color: white;
    font-size: 20px !important;
    pointer-events: none;
}

#login-btn
{
    position: relative;
    z-index: 1001;
    display: inline-block;
    vertical-align: middle;
    line-height: 80px;
    text-decoration: none;
    margin-right: 2em;
    color: rgb(78, 183, 71);
    font-weight: 500;
    font-size: 16px;
    font-family: "DIN Next LT Pro";
}

#login-btn > i
{
    color: rgb(255, 132, 0);
}