@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,300);

#cssmenu, #cssmenu>ul li.right 
{
    float: right;
}

#cssmenu 
{
    font-family: Poppins-Regular, Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 15px;
    text-align: right;
    font-weight: 400;
    width: 100%;
}

#cssmenu>ul 
{
    list-style: none;
    margin: 11px 170px;
    padding: 3px;
    position: absolute;
    bottom: 0;
    right: 62px;
    font-size: 14px;
    display: list-item;
    text-align: center;
}

#cssmenu>ul li#responsive-tab 
{
    display: none;
}

#cssmenu>ul li 
{
    display: inline-block;
    zoom: 1;
}

.arrow-icon 
{
    display: inline-block;
    width: 10px;
    height: 12px;
    background: url("/images/downarrow.webp") no-repeat center;
    background-size: contain;
    margin-left: 5px;
    vertical-align: middle;
}

#cssmenu>ul li.has-sub:hover ul 
{
    display: block;
    color: #fff;
}

#cssmenu>ul li.has-sub ul 
{
    display: none;
    position: absolute;
    margin: 0;
    padding: 0;
    list-style-type: none;
    background: #fff;
    border-radius: 0 0 10px 10px;
    border: 1px solid #ccc;
}

#cssmenu>ul li.has-sub ul li 
{
    display: block;
}

#cssmenu>ul li.has-sub>a 
{
    background-repeat: no-repeat;
    background-position: 90% -95%;
}

#cssmenu > ul li.has-sub > a:hover .arrow-icon, #cssmenu > ul li.has-sub > a.active .arrow-icon 
{
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}


#cssmenu>ul li a 
{
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #302424;
    text-align: left;
}

#menu1
{    
    width:0px;
    display:none;
	position:fixed;
    overflow:auto !important;
	background:#fff;
    transition:0.5s;
	white-space:nowrap;
	box-shadow:0px 0px 10px #EFE6E6;
	top: 71px;
}
@media screen and (min-device-width :972px)
{
	#cssmenu>ul 
    {
		margin: 11px 0px;
        right: -15px;
	}
}

@media screen and (max-width :960px)
{
	#cssmenu>ul
    {
		right: -12px;
	}	
}

@media only screen and (min-device-width :1024px) and (max-device-width :1366px) 
{
    #cssmenu>ul li a 
    {
        padding: 10px;
    }
}

#cssmenu>ul li a.active 
{
    background-color: #ff0;
}

#cssmenu>ul li a:hover 
{
    background: #5cbdfb;
    color: #fff;
    text-shadow: 0 0 0 0 #fff;
    border: 0 solid #ccc;
    border-bottom: none;
    line-height: 16px;
    font-weight: 400;
}

@media (max-width:767px) 
{
    #cssmenu>ul li#responsive-tab 
    {
        display: block;
        margin-top: 2px;
    }

    .cssmenu 
    {
        display: none;
    }

    .open_close 
    {
        display: grid;
        grid-template-columns: auto auto;
        align-items: center;
    }

    #cssmenu>ul li#responsive-tab:hover 
    {
        display: block;
        background-color: #5cbdfb;
    }

    #cssmenu>ul li a 
    {
        padding: 6px 5px;
        color: #fff;
    }

    #cssmenu>ul li#responsive-tab a 
    {
        background-position: 95% -35%;
    }

    #cssmenu>ul li 
    {
        background-color: #fff;
        display: none;
    }

    #cssmenu>ul li#responsive-tab a:hover 
    {
        background-color: #5cbdfb;
        background-position: 95% 135%;
    }

    #cssmenu>ul li.right 
    {
        float: none;
    }

    #cssmenu>ul li.has-sub 
    {
        position: relative;
        background-color: #fff;
    }

    #cssmenu>ul li.has-sub ul 
    {
        display: block;
        position: static;
        width: 100%;
        background: #fff;
        border: 0;
    }

    #cssmenu>ul li.has-sub ul li 
    {
        display: block !important;
        background-color: #fff;
    }

    #cssmenu>ul li.has-sub ul li a span 
    {
        display: block;
        padding-left: 24px;
    }

    #cssmenu>ul li.has-sub>a 
    {
        background-image: none;
        background-color: #fff;
    }
}

@media (prefers-color-scheme:dark) 
{
    #cssmenu>ul li a 
    {
        color: #fff;
    }

    #cssmenu>ul li.has-sub ul 
    {
        background: #2a2a2a;
        box-shadow: #cccdcf 0 2px 3px 0;
        color: #cdcdcd;
        border: none;
    }

    #cssmenu>ul li.has-sub .arrow-icon 
    {
		filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
	}
	#menu1 
    {
        background:#2a2a2a;
    }

    #menu1 a 
    {
        color:#cdcdcd !important;
    } 
}