@font-face {

    font-family: Calibri_Regular;

    src: url('../Fonts/Calibri_Regular.TTF');

}



@font-face {

    font-family: Calibri_Bold;

    src: url('../Fonts/Calibri_Bold.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: 15px;

        width: 40px;

        height: 30px;

        background: url("../images/MobileMenuIcon.png");

        background-position: center center;

        background-repeat: no-repeat;

        background-size: 30px auto, 100% auto;

        cursor: pointer;

        border: 0 none;

        z-index: 999;

        text-indent: -999px;

        background-color: #F68121;

        padding: 3px;

    }



    .menu {

        display: none;

    }



    .nav-button:hover {

        /*background-color: rgba(0,0,0,.1);*/

    }







    /* Navigation Bar

	-------------------------------------------------------- */



    .primary-nav {

        font-family: Calibri_Bold, 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: Calibri_Bold, Arial, Helvetica, sans-serif;

        }



            .primary-nav li a {

                font-family: Calibri_Bold, Arial, Helvetica, sans-serif;

                font-size: 14px;

                font-weight: normal;

                display: block;

                width: 100%;

                padding: 10px 6%;

                color: #333333;

                text-decoration: none;

                border-bottom: 1px solid #C2C2C2;

                border-top: none;

            }



                .primary-nav li a:hover {

                    background-color: #F68121;

                    color: #fff;

                }



    .primary-nav-childActive {

        background-color: #F68121;

        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: 55px;

        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: Calibri_Bold, Arial, Helvetica, sans-serif;

            font-size: 14px;

            font-weight: normal;

            padding: 10px 9%;

            padding-left: 25px;

        }



    .primary-nav li:hover ul {

        display: block;

        border-top: 0 none;

    }

}

/* End Mobile Styles */