/*--Font Awesome--*/
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

/*--Main Container--*/
:root{
	--primary:#f00;
	--secondary:#6c757d;
	--success:#28a745;
	--info:#17a2b8;
	--warning:#ffc107;
	--danger:#dc3545;
	--light:#f8f9fa;
	--dark:#343a40;
	--navlink:#000;
	--navlinkhover:#f7c155;
	--navcollapse:#0b6fb5;
	--navtitle:#fdd901;
	--navbutton:rgba(240,0,0,1);
}
body{
	font:16px/22px Arial;
	min-width: 320px;
}
#wrapper{
	position: relative;
	overflow: hidden;
	height: 100%;
	min-height: 600px;
}
.resize-active .hold{transition:none!important;}
input:focus, textarea:focus{
	outline: none !important;
	box-shadow: none !important;
}
.btn-info{background: var(--info);border-color:  var(--info);}
.btn-primary{background: var(--primary);border-color:  var(--primary);}
.btn-secondary{background: var(--secondary);border-color:  var(--secondary);}
.btn-success{background: var(--success);border-color:  var(--success);}
.btn-light{background: var(--light);border-color:  var(--light);}
.btn-dark{background: var(--dark);border-color:  var(--dark);}


.text-info{color: var(--info) !important;}
.text-primary{color:  var(--primary) !important;}
.text-secondary{color: var(--secondary) !important;}
.text-success{color: var(--success) !important;}
.text-light{color: var(--light) !important;}
.text-dark{color: var(--dark) !important;}
/*--Header--*/
#header{
	position: relative;
	z-index: 999;
	background: #fff;
	min-width: 320px;
}
#header.clone {
	top:-111px;
	transition: all linear 0.2s;
	position: absolute;
	width: 100%;
	visibility:hidden;
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
}
#header.clone.fixed {
	position: fixed;
	z-index: 9995;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	visibility:visible;
}
/*--Logo--*/
.navbar-brand{padding:0;}
.navbar-brand img{max-width:100%;height:auto;display:block;}
/*--Logo--*/
/*--Navigation--*/
#header .navbar-nav>li{position:relative;}
.navbar-light .navbar-nav .nav-link{color:var(--navlink);}
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover{
	color: var(--navlinkhover);
}
.navbar-nav > li ul{
	position: absolute;
	width: 200px;
	left: 0;
	top: 100%;
	list-style: none;
	padding: 0;
	margin: 0;
	background: #fff;
	opacity: 0;
	transition:all linear 0.2s; 
	pointer-events: none;
	transform: scaleY(0); 
	transform-origin: 50% 0;
	box-shadow: 0 0.38em 1em rgba(0, 0, 0, 0.25);
}
.navbar-nav > li ul li{
	border-bottom:1px solid #ccc;
	position: relative;
}
.navbar-nav > li ul li.has-drop-down{background: #ccc;}
.navbar-nav > li ul ul{
	left: auto;
	right: 100%;
	top: 0;
}
.navbar-nav li li a{
	padding: 5px 10px;
	display: block;
	color: #000;
}
.navbar-nav li li a:hover{
	text-decoration: none;
	background: #054fad;
	color: #fff;
}
.navbar-nav li .opener{display: none;}
.navbar-nav > li ul li.has-drop-down>a{background: #ccc;}
.has-drop-down-a{position:relative;}
.navbar-nav li li>.has-drop-down-a:after{
	content: '';
	position: absolute;
	right: 10px;
	top: 50%;
	border:5px solid transparent;
	border-top-color: #000;
	transform: translateY(-50%);
}
.navbar-nav li li.hover>.has-drop-down-a:after{
	border-top-color: transparent;
	border-bottom-color: #000;
}
/*--Navigation--*/
/*--nav--*/
@media screen and (min-width:767px){
	.navbar-nav > li .opener{display: none;}
}
@media screen and (min-width:1025px){
	.navbar-nav > li:hover > ul, .navbar-nav > li ul li:hover > ul, 
	.navbar-nav > li:focus > ul, .navbar-nav > li ul li:focus > ul{
		pointer-events: auto;
		transform: scaleY(1);
		opacity: 1;
	}
}
@media screen and (max-width:1024px){
	.navbar-nav > li.hover> ul, .navbar-nav > li ul li.hover > ul,
	.navbar-nav > li:hover> ul, .navbar-nav > li ul li:hover > ul,
	.navbar-nav > li:focus > ul, .navbar-nav > li ul li:focus > ul{
		pointer-events: auto;
		transform: scaleY(1);
		opacity: 1;
	}
}
@media screen and (max-width:991px){
	.navbar-nav > li ul ul{
		position: static;
		max-height: 0;
	}
	.navbar-nav > li ul li.hover>ul{max-height:400px;}
	/*--Header--*/
	#header.clone{display: none !important;}
	#header .navbar-nav>li{padding: 0;}
	.navbar-nav > li ul li{border-bottom:none;background: #aeaeae;}
	.navbar-light .navbar-nav .nav-link{
		border-bottom:1px solid #ddd;
		padding:7px 15px;
		line-height: 26px;
		display: block;
		color: #fff;
	}
	.navbar-nav li li a{
		line-height: 20px;
		padding-bottom: 10px;
		padding-top: 10px;
		color: #000;
	}
	.navbar-nav li .opener{
		width: 50px;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 999;
		text-indent: -999px;
		overflow: hidden;
		background: #eee !important;
		height: 40px;
		border-left:1px solid #ddd;
		border-bottom:none!important;
		display: block;
	}
	.navbar-nav li{overflow:hidden;display:block;}
	.navbar-nav > li ul{
		position: relative;
		opacity: 1;
		visibility: visible;
		max-height: 0;
		width: 100%;
		z-index: 99;
		top: 0;
		left: 0 !important;
		right: auto !important;
		background: #fff;
	}
	.navbar-light .navbar-toggler{
		border-color: var(--navbutton);
		margin-top: 10px;
		height: 40px;
		z-index: 99;
	}
	.navbar-light .navbar-toggler-icon{background-image: url("data:image/svg+xml;charset=utf8,%3Csvg  xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(240,0,0,1)' stroke-width='2'  d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");width: 30px;height: 30px;}
	.navbar-nav > li.hover > ul, .navbar-nav > li ul li.hover > ul{max-height: 400px;}
	.nav-open .nav li>li{display: none;}
	.nav-open .nav li.hover{
		position:relative;
		width: 100%;
		z-index: 999;
		background: #eee;
		top: 0;
		overflow: hidden;
		display: block !important;
	}
	.nav-open .nav li.hover a{color: #000;}	
	.nav-open .nav	 li > a.opener:after{
		position: absolute;
		width: 10px;
		height: 10px;
		border:2px solid transparent;
		border-color: #000 #000 transparent transparent;
		transform: rotate(45deg) translateY(-50%);
		left: 10px;
		top: 50%;
		content: '';
	}
	.nav-open .nav	 li.hover > a.opener:after{
		position: absolute;
		width: 10px;
		height: 10px;
		border:2px solid transparent;
		border-color:transparent transparent #000 #000 ;
		transform: rotate(45deg) translateY(-50%);
		left: 10px;
		top: 50%;
		content: '';
	}
	.navbar-collapse, .navbar-collapse.collapse {
		position: fixed;
		left: -245%;
		top: 0;
		width: 245px;
		background: var(--navcollapse);
		/*height: 100vh !important;*/
		max-height: 0;
		z-index: 99999;
		transition: all linear 0.2s;
		-webkit-transition: all linear 0.2s;
		-ms-transition: all linear 0.2s;
		border: none;
		overflow: auto;
		padding: 0;
		margin: 0;
		display: block !important;
		height: 0;
	}
	.navbar-right{text-align: left;}
	.navbar-collapse.collapse:before{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		content: 'Menu';
		text-align: center;
		width: 100%;
		padding:14px 10px;
		color: white;
		font-weight: 700;
		border-bottom:2px solid white;
		display: block;
	}
	#header .navbar-nav {
		padding: 52px 0 0; 
		margin: 0;
	}
	.navbar-collapse.show {left: 0;
	height: 100vh !important;
    max-height: 100%;}
}