﻿#uppermenu
{
    margin:auto;
    text-align:center;
    padding:0;
    list-style-type: none;
}

#uppermenu a
{
    text-decoration:none;
    color:#fff;
    transition:all 0.3s;
}

#uppermenu li
{
    position:relative;
    display:inline-block;
    text-align:center;
    padding:8px 24px;
    font-size:14px;
    transition:all 0.3s;
    text-transform:uppercase;
    
}

#uppermenu li:hover
{
    background-color:#4C6B8B;
}

#uppermenu li:hover ul
{
    opacity:0.9;
    transition:all 0.5s;
    height:auto;
}

#uppermenu li:hover a
{
    color:#FFA500;
}

#uppermenu li ul
{
    position:absolute;
    opacity:0;
    top:32px;
    left:0px;
    width:200%;
    background-color:#4C6B8B;
    padding:0;
    transition:all 0.5s;
    height:0;
    overflow:hidden;
}

#uppermenu li ul a li
{
    color:#fff !important;
}

#uppermenu li ul a li:hover
{
    color:#FFA500 !important;
}

#uppermenu li ul li
{
    display:block;
    text-align:left;
    font-size:13px !important;
}


/****************************/

#categoryMenu
{
    margin:auto;
    text-align:center;
    padding:0;
    opacity:0.8;
    background-color:transparent;
    border-spacing:1px;
}

#categoryMenu li
{
    display:table-cell;
    width:10.5%;
    vertical-align:middle;
    padding:0 1%;
    height:63px;
    background-color:rgb(33, 48, 71);
    transition:all 0.5s;
    font-size:17px;
}

#categoryMenu li:hover
{
    color:#FFA500;
    background-color:#4C6B8B;
}

#categoryMenu li img
{
    height:30px;
    vertical-align:middle;
    padding-right:8px;
}

#categoryMenu a
{
    text-decoration:none;
    color:#fff;
    transition:all 0.3s;   
}


/**********************************/

#menuIcon
{
    position:fixed;
    display:none;
    cursor:pointer;
    top:8px;
    right:8px;
    z-index:1000;
}

#menuWrapperResp
{
    display:none;
    position:fixed;
    width:100%;
    min-width:300px;
    border-bottom:1px solid #fff;
}

#menuResp
{
    position:fixed;
    left:-100%;
    width:100%;
    top:96px;
    z-index:1000;
    max-height:calc(100vh - 96px);
    transition: all 0.3s linear;
    overflow:auto;
    bottom:0;
}

#menuResp a
{
    text-decoration:none;
    color:#fff;
    padding-bottom:4px;
}

.menuRespItem
{
    background-color:rgb(33, 48, 71);
    font-weight:bold;
    width:100%;
    padding:8px 0;
    border-top:1px solid #fff;
    text-align:center;
    position:relative;
}

.menuRespItem a
{
    padding-bottom:14px;
}

.menuRespSubitem
{
    font-weight:normal;
    width:100%;
    background-color:#4C6B8B;
    padding:4px 0;
    text-align:center;
    transition: all 0.3s linear;
}

.subMenuResp
{
    overflow:hidden;
    height:0;
    transition: all 0.3s linear;
}

.menuItemArrow
{
    position:absolute;
    top:0;
    right:0;
    padding:8px 16px;
    cursor:pointer;
}

.menuItemArrow span
{
    color:#fff;
}

@media only screen and (max-width: 1048px)
{
	#uppermenu li
	{
		padding:8px 14px;
	}
}

@media only screen and (max-width: 920px)
{
	#uppermenu li
	{
		padding:8px 7px;
	}
}


@media only screen and (max-width: 800px)
{
    #menu
    {
        display:none;
    }

    #menuResp
    {
        display:block;
    }

    #menuIcon
    {
        display:block;
    }
}
