/*-------- CSS for the navbar --------*/

/*
nav {
    width: 100%;
    height: 7vh;
    z-index: 80;
}*/

#loginRegister{
    display: none;
}

/*-------- Mobile --------*/

@media only screen and (max-width: 499px) {
    nav {
        display: flex;
        align-items: center;
        width: 100%;
        height: 42px;
        z-index: 80;
        position: fixed;
        top: 0;
        left: 0;
        background: white;
        width: 100%;
        border-bottom: 1px solid #208cff;
    }
    #logoImg {
        height: 100%;
    }
    .logo {
        position: relative;
        left: 1%;
        width: 40%;
        float: left;
        z-index: 1;
    }
    #hamburgerIcon {
        margin-left: auto;
        padding-right: 15px;
    }
    .hamburgerLine {
        width: 30px;
        height: 2px;
        background-color: #208cff;
        margin: 6px 0;
    }
    #hamburgerIconWhite {
        float: right;
        margin-top: 1vh;
        padding-right: 15px;
    }
    .hamburgerLineWhite {
        width: 30px;
        height: 2px;
        background-color: white;
        margin: 6px 0;
    }
    #sideNav {
        position: fixed;
        right: -100%;
        min-height: 100vh;
        top: 0;
        height: 100vh;
        width: 100%;
        opacity: 0.9;
        z-index: 100;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        /* mobile safari */
    }
    #sideNavRow {
        height: 100%;
    }
    #sideNav::after {
        content: "";
        display: table;
        clear: both;
    }
    #sideNavWrapper {
        min-height: 500px;
        background: #195089;
        z-index: 200;
        padding-left: 0px;
        width: 100%;
    }
    #sideNavList {
        position: relative;
        top: 4vh;
        list-style: none;
        text-align: right;
        clear: both;
    }
    .sideNavListItem {
        float: right;
        font-size: large;
        color: white;
        padding: 10px 15px 10px 0px;
        width: 80%;
        border-bottom: 1px solid white;
        clear: right;
    }
    .donut {
        width: 40px;
        opacity: 0.8;
        float: left;
    }
    #sideNavTop {
        position: fixed;
        width: 100%;
        height: 10px;
        top: 0;
        background: #195089;
    }/*
    @supports not (-webkit-touch-callout: none) {
        /* CSS for other than iOS devices *
        #sideNavBottom {
            position: fixed;
            height: 100px;
            width: 68.2%;
            bottom: 0;
            padding: 0;
            background: #195089;
            z-index: 1000;
        }*/
        #sideNavFooter {
            position: relative;
            top: 80px;
            clear: both;
            width: 100%;
            margin: auto;
            text-align: center;
        }
    /*
    @supports (-webkit-touch-callout: none) {
        /* CSS specific to iOS devices
        #sideNavBottom {
            height: 100px;
            width: 100%;
            bottom: 0;
            padding: 0;
            background: #195089;
            z-index: 1000;
        }
        #sideNavFooter {
            position: relative;
            top: 80px;
            clear: both;
            width: 100%;
            margin: auto;
            text-align: center;
        }
    }*/
    .sideNavFooterItem {
        padding: 2px;
        margin: 1px;
        width: 60%;
        clear: right;
        font-size: xx-small;
    }
    .sideNavFooterItem a {
        color: white;
    }
}

/*----- Mobile Landscape Mode -----*/

@media only screen and (min-width: 500px) and (max-width: 767px) {
    nav {
        display: flex;
        align-items: center;
        width: 100%;
        height: 50px;
        z-index: 80;
        position: fixed;
        top: 0;
        left: 0;
        background: white;
        width: 100%;
        border-bottom: 1px solid #208cff;
    }
    #logoImg {
        height: 100%;
    }
    .logo {
        position: relative;
        left: 0.7%;
        height: 100%;
        float: left;
    }
    #hamburgerIcon {
        margin-left: auto;
        padding-right: 15px;
    }
    .hamburgerLine {
        width: 30px;
        height: 2px;
        background-color: #208cff;
        margin: 6px 0;
    }
    #hamburgerIconWhite {
        float: right;
        margin-top: 1vh;
        padding-right: 15px;
    }
    .hamburgerLineWhite {
        width: 30px;
        height: 2px;
        background-color: white;
        margin: 6px 0;
    }
    #sideNav {
        position: fixed;
        right: -100%;
        top: 0;
        height: 100vh;
        min-height: 100vh;
        width: 100%;
        opacity: 0.9;
        z-index: 100;
        overflow-y: scroll;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        /* mobile safari */
    }
    #sideNavRow {
        height: 180%;
     /*   max-height: 720px;*/
    }
    #sideNavWrapper {
        height: 100%;
        background: #195089;
        margin-left: auto;
        z-index: 200;
        padding-left: 0px;
    }
    #sideNav::after {
        content: "";
        display: table;
        clear: both;
    }
    #sideNavList {
        position: relative;
        top: 30px;
        height: 359px;
        list-style: none;
        text-align: right;
        clear: both;
        background: #195089;
        z-index: 100;
    }
    .sideNavListItem {
        float: right;
        font-size: large;
        color: white;
        padding: 10px 15px;
        width: 80%;
        border-bottom: 1px solid white;
        clear: right;
    }
    .donut {
        width: 40px;
        opacity: 0.8;
        float: left;
    }
    #sideNavTop {
        position: fixed;
        width: 100%;
        height: 10px;
        top: 0;
        background: #195089;
    }/*
    @supports not (-webkit-touch-callout: none) {
        /* CSS for other than iOS devices
        #sideNavBottom {
            position: fixed;
            height: 50px;
            width: 68.2%;
            bottom: 0;
            padding: 0;
            background: #195089;
            z-index: -1000;
        }*/
        #sideNavFooter {
            position: relative;
            top: 80px;
            clear: both;
            width: 100%;
            margin: auto;
            text-align: center;
        }
    /*
    @supports (-webkit-touch-callout: none) {
        /* CSS specific to iOS devices
        #sideNavBottom {
            height: 100px;
            width: 100%;
            bottom: 0;
            padding: 0;
            background: #195089;
            z-index: 1000;
        }
        #sideNavFooter {
            position: relative;
            top: 80px;
            clear: both;
            width: 100%;
            margin: auto;
            text-align: center;
        }
    }*/
    .sideNavFooterItem {
        padding: 2px;
        margin: 1px;
        width: 60%;
        clear: right;
        font-size: small;
    }
    .sideNavFooterItem a {
        color: white;
    }
}

/*----- Tablet Upright Mode -----*/

@media only screen and (min-width: 768px) and (max-width: 899px) {
    nav {
        display: flex;
        align-items: center;
        width: 100%;
        height: 50px;
        z-index: 80;
        position: fixed;
        top: 0;
        left: 0;
        background: white;
        border-bottom: 1px solid #208cff;
    }
    #logoImg {
        height: 100%;
    }
    .logo {
        position: relative;
        left: 0.7%;
        height: 100%;
        float: left;
    }
    #hamburgerIcon {
        margin-left: auto;
        padding-right: 15px;
    }
    .hamburgerLine {
        width: 30px;
        height: 2px;
        background-color: #208cff;
        margin: 6px 0;
    }
    #hamburgerIconWhite {
        float: right;
        margin-top: 1vh;
        padding-right: 15px;
    }
    .hamburgerLineWhite {
        width: 30px;
        height: 2px;
        background-color: white;
        margin: 6px 0;
    }
    #sideNav {
        position: fixed;
        right: -100%;
        top: 0;
        height: 100vh;
        min-height: 100vh;
        /*max-height: 1024px;*/
        width: 100%;
        opacity: 0.9;
        z-index: 100;
        overflow-y: scroll;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        /* mobile safari */
    }
    #sideNavRow {
        height: 150%;
        /*max-height: 1024px;*/
    }
    #sideNavWrapper {
        height: 100%;
        background: #195089;
        margin-left: auto;
        z-index: 200;
        padding-left: 0px;
    }
    #sideNav::after {
        content: "";
        display: table;
        clear: both;
    }
    #sideNavList {
        position: relative;
        top: 30px;
        list-style: none;
        text-align: right;
        clear: both;
    }
    .sideNavListItem {
        float: right;
        font-size: large;
        color: white;
        padding: 10px 15px;
        width: 80%;
        border-bottom: 1px solid white;
        clear: right;
    }
    .donut {
        width: 40px;
        opacity: 0.8;
        float: left;
    }
    #sideNavFooter {
        position: relative;
        top: 80px;
        clear: both;
        width: 100%;
        margin: auto;
        text-align: center;
    }
    .sideNavFooterItem {
        padding: 2px;
        margin: 1px;
        width: 60%;
        clear: right;
        font-size: small;
    }
    .sideNavFooterItem a {
        color: white;
    }
}

/* ----- Tablet Landscape Mode ----- */

@media only screen and (min-width: 900px) and (max-width: 1279px) {
    nav {
        display: flex;
        align-items: center;
        width: 100%;
        height: 50px;
        z-index: 80;
        position: fixed;
        top: 0;
        left: 0;
        background: white;
        width: 100%;
        border-bottom: 1px solid #208cff;
    }
    #logoImg {
        height: 100%;
    }
    .logo {
        position: relative;
        left: 0.7%;
        height: 100%;
        float: left;
    }
    #hamburgerIcon {
        margin-left: auto;
        padding-right: 15px;
    }
    .hamburgerLine {
        width: 30px;
        height: 2px;
        background-color: #208cff;
        margin: 6px 0;
    }
    #hamburgerIconWhite {
        float: right;
        margin-top: 1vh;
        padding-right: 15px;
    }
    .hamburgerLineWhite {
        width: 30px;
        height: 2px;
        background-color: white;
        margin: 6px 0;
    }
    #sideNav {
        position: fixed;
        right: -100%;
        top: 0;
        width: 100%;
        opacity: 0.9;
        z-index: 100;
        height: 100vh;
        min-height: 100vh;
        overflow-y: hidden;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        /* mobile safari */
    }
    #sideNavRow {
        height: 100%;
    }
    #sideNav::after {
        content: "";
        display: table;
        clear: both;
    }
    #sideNavWrapper {
        height: 100%;
        background: #195089;
        margin-left: auto;
        z-index: 200;
    }
    #sideNavList {
        position: relative;
        top: 30px;
        list-style: none;
        text-align: right;
        clear: both;
    }
    .sideNavListItem {
        float: right;
        font-size: large;
        color: white;
        padding: 10px 15px;
        width: 80%;
        border-bottom: 1px solid white;
        clear: right;
    }
    .donut {
        width: 40px;
        opacity: 0.8;
        float: left;
    }
    #sideNavFooter {
        position: relative;
        top: 80px;
        clear: both;
        width: 100%;
        margin: auto;
        text-align: center;
    }
    .sideNavFooterItem {
        padding: 2px;
        margin: 1px;
        width: 60%;
        clear: right;
        font-size: small;
    }
    #sideNavFooter::after {
        clear: both;
    }
    .sideNavFooterItem a {
        color: white;
    }
}

/*-------- Desktop --------*/

@media only screen and (min-width: 1280px) {
    nav {
        width: 100%;
        height: 0vh;
        z-index: 80;
    }
    .logo {
        position: fixed;
        width: 20%;
        left: 0.5%;
        top: 0.1%;
        z-index: 1;
    }
    #logoImg {
        width: 100%;
    }
    #sideNav {
        display: none;
    }
    #scrollToTop {
        display: none;
    }

    #logout{
        display: block;
        margin-left: 10px;
        margin-bottom: 10px;
        z-index: 10;
    }

    #newsLetterBtn{
        background: white;
        color: #387BB1;
        border: 1px solid #387BB1;
    }
    #newsLetterBtn:hover{
        background: #387BB1;
        color: white;
        border: 1px solid #387BB1;
    }

    #loginRegister{
        display: flex;
        margin-left: 10px;
        margin-bottom: 10px;
        z-index: 10;
    }

    .loginRegisterBtn{
        cursor: pointer;
        background: white;
        color: #387BB1;
        border: 1px solid #387BB1;
        height: 20px;
        font-size: 11px;
        margin-right: 5px;
    }

    .loginRegisterBtn:hover{
        cursor: pointer;
        background: #387BB1;
        color: white;
        border: 1px solid #387BB1;
    }

    .loginRegisterBtn:focus{
        outline: 2px solid #387BB1;
    }

    #loginRegisterSideNav{
        display: none;
    }
}

@media (orientation: portrait) {
    #sideNav{
        overflow-y: hidden;
    }
}