/* COLOR PALETTE 

-----------------

Bottle Green: #006837

Charcoal Gray: #333

Ash-White: #f0f6fc



*/



.menu

{

    float: right;

    height: 80px;

    color: #fff;

    box-sizing: border-box;

    overflow: hidden;

    font-size: 0px;

}



.menu ul

{

    padding: 0;

    margin: 0;

    list-style: none;

    display: inline-block;

    box-sizing: border-box;

    overflow: hidden;

    font-size: 0px;

}



.menu ul li

{

    margin: 0;

    padding: 0;

    height: 80px;

    text-decoration: none;

    font-size: 16px;

    border-color: #006837;

    box-sizing: border-box;

    position: relative;

    display: inline-block;

}







.menu ul:last-child

{

    margin-right: 40px;

}



.menu ul a

{

    height: 80px;

    padding: 0 20px;

    padding-top: 30px;

    display: inline-block;

    box-sizing: border-box;

}



a:link, a:visited, a:active

{

    text-decoration: none;

    color: #fff;

}



.menu ul li a:hover

{

    box-sizing: border-box;

    transition: all ease-in-out 200ms;

}







.menu ul li a:after {

	content: '';

	display: block;

	margin: 0 auto;

	height: 2px;

	width: 0px;

	background: transparent;

	transition: width .2s ease, background-color .2s ease;

    box-sizing: border-box;

}

.menu ul li a:hover:after {

	width: 100%;

	background: #006837;

    box-sizing: border-box;

}



.menu ul li.current_page_item a

{

    box-sizing: border-box;

    transition: all ease-in-out 200ms;

}





.menu ul li.current_page_item a:after {

	width: 100%;

	background: #006837;

    box-sizing: border-box;

}







/* MEDIA RESPONSE */

@media screen and (max-width: 510px) 

{

    .menu

    {

        width:100%;

        background-color: #fff;

        height: 40px;

    }

    

    .menu ul

    {

        display: table;

        width:100%;

        text-align: center;

        height: 40px;

    }

    

    .menu ul li

    {

        font-size: 14px;

        display: table-cell;

        text-align: center;

        height: 40px;

        

    }

    

    .menu ul li a

    {

        padding:0;

        padding-top: 10px;

        height: 40px;

    }

    

    .menu ul li

    {

        height: 40px;

        width: 33.33%;

    }

    

    .menu ul:last-child

    {

        margin-right: 0;

    }

    

    a:link, a:visited, a:active

    {

        text-decoration: none;

        color: #333;

    }

}