@font-face {
    font-family: Roboto-Regular;
    src: url('../Fonts/Roboto-Regular.ttf');
}

@font-face {
    font-family: Roboto-Light;
    /*src: url('../Fonts/Roboto-Light.ttf');*/
    src: url('../Fonts/OpenSans-Light.ttf');
}

.nav-button {
    display: none;
}
/* hide the navigation button by default */
.primary-nav {
    display: none;
}

@media only screen and (min-width: 0px) and (max-width: 900px) {

    /* Navigation Button
	-------------------------------------------------------- */

    .nav-button {
        /*\images\MobileMenuIcon.png*/
        display: block;
        position: absolute;
        top: 15px;
        right: 7px;
        width: 50px;
        height: 35px;
        background: url("../images/MobileMenuIcon.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 28px auto, 100% auto;
        cursor: pointer;
        border: 0 none;
        z-index: 999;
        text-indent: -999px;
    }

    .menu {
        display: none;
    }

    .nav-button:hover {
        /*background-color: rgba(0,0,0,.1);*/
    }

    .nav-button.open {
        background: url("../images/MobileMenuIcon.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 28px auto, 100% auto;
    }

    /* Navigation Bar
	-------------------------------------------------------- */

    .primary-nav {
        font-family: OpenSans-Regular, Calibri, Arial, Helvetica, sans-serif;
        width: 60%;
        float: none;
        display: block;
        height: 45px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 998;
        clear: both;
    }

        .primary-nav li {
            background-color: #F0F0F0; /* change the menu color */
            display: none;
            width: 100%;
            font-family: OpenSans-Regular, Calibri, Arial, Helvetica, sans-serif;
        }

            .primary-nav li a {
                font-family: OpenSans-Regular, Calibri, Arial, Helvetica, sans-serif;
                display: block;
                width: 100%;
                padding: 8px 6%;
                font-size: 18px;
                /*text-shadow: -1px -1px 0 rgba(0,0,0,.15);*/
                color: #000000;
                text-decoration: none;
                border-bottom: 1px solid #C2C2C2;
                border-top: none;
            }

                .primary-nav li a:hover {
                    background-color: #7f6f60;
                    color: #fff;
                }

    .primary-nav-childActive {
        background-color: #2270AF;
        color: #FFFFFF;
    }

    .primary-nav-ParentActive {
        background-color: #F7C446;
        color: #fff;
    }

    .primary-nav > li:first-child {
    }

    /* Toggle the navigation bar open  */

    .primary-nav.open {
        border: 1px solid #C3C3C3;
        height: auto;
        margin-top: 48px;
        max-width: 250px;
        min-width: 200px;
        width: 30%;
    }

        .primary-nav.open li {
            display: block;
        }

        .primary-nav.open img {
            width: 19px;
            height: 17px;
        }

    /* Submenus – optional .parent class indicates dropdowns */

    /*.primary-nav > li:hover > a {
       background-color: #F7C446;
        color: #FFFFFF;
    }*/

    .primary-nav li.parent > a:after {
        content: "▼";
        color: rgba(255,255,255,.5);
        float: right;
    }

    .primary-nav li.parent > a:hover {
        background-color: #F7C446;
        color: #FFFFFF;
    }

    .primary-nav li ul {
        display: none;
        background: rgba(0,0,0,.5);
        border-top: 0 none;
        padding: 0;
    }

        .primary-nav li ul a {
            font-family: OpenSans-Regular, Calibri, Arial, Helvetica, sans-serif;
            font-size: 14px;
            padding: 10px 9%;
            font-weight: normal;
            padding-left: 25px;
        }

    .primary-nav li:hover ul {
        display: block;
        border-top: 0 none;
    }



    /* Search box */

    /*Search box*/

    .clearMobileSearch {
        clear: both;
        border-bottom: 1px solid #C2C2C2;
        padding-top: 5px;
    }

    .Mobile-SearchBoxDiv {
        background-color: #FFFFFF;
        border: 1px solid #000000;
        display: block;
        float: left;
        margin-left: 5%;
        margin-top: 4px;
        min-width: 130px;
        padding: 7px 6px 4px;
        width: 86%;
    }

        .Mobile-SearchBoxDiv:hover {
            border: 1px solid #01ACD4;
        }


    .Mobile-SearchBox-TextBox {
        font-family: OpenSans-Regular, Calibri, Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #333333;
        border: 0 solid #FFFFFF;
        border-radius: 3px;
        height: 15px;
        background-color: #ffffff;
        margin: 0;
        float: left;
        padding: 1px 6px 6px 10px;
        width: 72%;
    }


    .Mobile-SearchBoxDiv-Button {
        background: url("../images/SearchIcon.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
        border: 0 solid #FFFFFF;
        height: 18px;
        margin: 0;
        padding: 2px 0;
        width: 20px;
        float: right;
        outline: none;
    }

        .Mobile-SearchBoxDiv-Button:hover {
            cursor: pointer;
        }
}
/* End Mobile Styles */
@media only screen and (min-width: 0px) and (max-width: 700px) {

    .nav-button {
        top: 20%;        
    }
}
@media only screen and (min-width: 0px) and (max-width: 500px) {

    .nav-button {
        top: 2%;
        right: 7px;
        width: 50px;
        height: 35px;
        background-size: 28px auto, 100% auto;
    }
}