* { padding:0; margin:0;}
.clearfix:after {visibility: hidden;  display: block;   font-size: 0;   content: " ";  clear: both;  height: 0; }

/*------ MENU STYLE --------*/


nav { background-color:#055bb5}
nav ul { background-color:#222; margin: 0; width: 100%; float:none;  position:relative; z-index: 999; list-style: none; padding: 0;}
nav ul li { padding: 0; margin: 0; display: block; float: left; position: relative;}
nav > ul > li > a { padding: 15px 25px; border-right: 1px solid rgba(255,255,255,0.2); text-decoration:none !important;}
nav > ul > li:last-child > a { border-right: none}
nav ul ul li a { padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.2)}
nav ul ul li:last-child a  {border-bottom: none}
nav a {font-size: 13px; color: #fff; display: block; outline: 0; text-decoration: none; -webkit-transition: all linear 0.3s; -moz-transition: all linear 0.3s; transition: all linear 0.3s;text-decoration:none !important;}
nav a:hover{ color: #fff;}

nav span a { color:#337ab7; }
nav span a:hover{ color: #337ab7;}

nav > ul > li > a:not(:only-child)::after { content:''; position: absolute; top:50%; margin-left: 5px; margin-top:-1px; border-top: 4px solid;border-right: 4px solid transparent;border-left: 4px solid transparent;}  
nav ul li li a:not(:only-child)::after { content:'';content:''; position: absolute; top:50%; right: 10px; margin-top:-4px; border-left: 4px dashed;border-top: 4px solid transparent;border-bottom: 4px solid transparent;}
nav ul ul { min-width:230px; position: absolute; left: -9999px; background-color: #4b9cef; text-align: left; list-style: none; margin: 0; box-sizing:content-box;}
nav ul li li { float: none; }
nav li:hover > a { background-color:#4b9cef;}
nav ul ul a:hover { color: #fff; background-color: rgba(0,0,0,.08);}
nav ul li:hover ul, nav ul li.onhover ul{left: -1px; top: auto;}
nav ul li:hover ul ul, nav ul li:hover ul ul ul, nav ul li:hover ul ul ul ul { left: -9999px; top:0;}
nav ul li li:hover ul, nav ul li li li:hover ul, nav ul li li li li:hover ul { left: 100%;}
.toggle-icon { display: none; position: absolute; z-index: 9999; right: 0; top: 0; width: 48px; height: 48px; background: rgba(255,255,255,0.3); font-size: 0; text-align: center; cursor: pointer}
.toggle-icon .minus { width: 8px; height: 2px; display:inline-block;background: #fff; left:0; right:0;top: 0; bottom:0; position: absolute; margin: auto}
.toggle-icon .plus::after { content:''; width: 8px; height: 2px; display:inline-block;background: #fff;left:0;right:0;position: absolute;top: 0; bottom:0;margin:auto;}
.toggle-icon .plus::before { content:''; width: 2px; height: 8px; display:inline-block;background: #fff;left:0;right:0;position: absolute;top: 0; bottom:0;margin:auto;}
.show { display: block !important}
.toggle-opt { background:#222; padding: 15px 10px; color:#fff; position: relative; display: none}
.toggle-opt .res-bar { position: absolute; right:10px; top: 17px; cursor:pointer}
.toggle-opt .res-bar span { width: 25px; height: 2px; background: #fff; display: block}
.toggle-opt .res-bar span:nth-child(2) { margin: 5px 0}
.toggle-opt a { color: #fff; text-decoration:none}
#navigation{margin-top:20px;margin-bottom:12px;}

@media screen and (max-width:1199px) {
	nav > ul > li > a { padding: 15px 18px;}
}
@media screen and (max-width:991px) {
	nav > ul > li > a:not(:only-child)::after{margin-left: 1px;}
	nav > ul > li > a { padding: 15px 10px; font-size:12px;} 
}

@media screen and (max-width:768px) {
	.toggle-opt {
		display: block;
	}
	nav {
		display: none;
	}
	nav ul li {
		float: none;
		display: block;
	}
	nav > ul > li > a {
		padding: 15px 10px;
		border-right: none;
		border-top: 1px solid rgba(255,255,255,0.2);
	}
	nav ul ul {
		position: relative;
		left: 0;
		display: none;
	}
	nav ul li:hover ul, nav ul li.onhover ul{
		left: 0px;
	}
	nav > ul > li > a:not(:only-child)::after,nav ul li li a:not(:only-child)::after {
		display: none;
	}
	.toggle-icon { 
		display: block;
	}
	nav ul li li:hover ul, nav ul li li li:hover ul, nav ul li li li li:hover ul, nav ul li:hover ul ul, nav ul li:hover ul ul ul, nav ul li:hover ul ul ul ul {
		left: 0;
	}
	nav ul li li .toggle-icon {
		width: 38px;
		height: 38px;
	}
	nav ul ul ul {
		background-color: #3b89d8;
	}
}