﻿/*---------------------------*/

/*     T O P   N A V  S T Y L E S    */
/*---------------------------*/


.multi-level-nav > ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;

}
.multi-level-nav li{
    
}
header, header *{
overflow:visible !important;
	position:relative;
}
.multi-level-nav a{
    display: block;
    padding: .5em .67em .5em .67em;
    transition-delay: 0;
    transition-duration: 333ms;
    transition-property: color background-color;
    transition-timing-function: ease-in-out;
	white-space:nowrap;
		font-size:90%;

}
.multi-level-nav a, .multi-level-nav a:link,  .multi-level-nav a:visited{
    text-decoration: none;
    color:#000000;
			background-color: rgba(255,255,255,.9);
	

}
.multi-level-nav a:hover, .multi-level-nav a:active{
    background-color: #eeeeee;
    color:rgb(201, 49,71);

    background-color: #bbbbbb;
    color:white;
}

#nav-main{
	position:relative;
		transition-property: left margin-left;
		transition-duration: 333ms;
		transition-timing-function: ease-in-out;
			z-index:99;

}
.nav-main-container{
	position:absolute;
	bottom:0;
	right:0;
}
@media screen and (max-width:820px) {

	
	#nav-main > ul{
		display: block;
		background-color: rgba(255,255,255,.9);
	}

}

/*********** Styles for multi Level Menu ****************/

@media screen and (max-width: 820px){
	.header-nav{
		position:absolute;
		top:0;
		left:0;
		bottom:0;
		right:0;
	}
	.multi-level-nav ul ul li a {
		padding-left: 2em;
	}


	.dropdown-toggle {
		display: none;
	}
	#nav-main{
	position:absolute;
		
		top:2em;
		left:0;
		right:100%;
		width:100%;
	}
	
		.multi-level-nav ul ul ul{
		display:none;
	}
	.multi-level-nav ul ul:hover ul{
		display:flex;
	}
}

@media screen and (min-width: 820px){
	.multi-level-nav ul {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
	}	

	.multi-level-nav li {
        flex: 1 0 auto;
		position: relative;
	}

	li.has-children > a {
	q	padding-right: 0;
	}

	.multi-level-nav ul ul {
		display: none;
		position: absolute;
		z-index:100;
	}

	.multi-level-nav ul ul li {
        flex: 1 1 auto;
	}
	.multi-level-nav ul .sub-menu{
		display:none;
	}
	.multi-level-nav ul .toggled-on{
		
	}
	.multi-level-nav ul .has-children:hover .sub-menu, .multi-level-nav ul .has-children:active .submenu, .multi-level-nav ul .has-children:focus .sub-menu  {
		display: block;
	}

	.dropdown-toggle {
		margin: 0;
		padding: 0 .5em;
		border: 0;
		content: "";
		text-transform: lowercase; /* Stop screen readers to read the text as capital letters */
		background-color: transparent;
	}

	.dropdown-toggle:after {
		position: relative;
		top: 0;
		left: 0;
		width: 42px;
		color: white;
		content: "\f107";
		line-height: 1em;	
	}

	.dropdown-toggle:hover,
	.dropdown-toggle:focus {
		background: hsl(0, 0%, 25%);
	}

	.dropdown-toggle.toggle-on:after {
		content: "\f106";
	}
}