/****************************************/
/* Content Header - when navsub is active
/****************************************/
#content_header.my-navsub-active{
	position:relative;
	z-index:2;
	box-shadow:none;
}

/****************************************/
/* Generic
/****************************************/
.my-navsub{
	margin-top:-1px;
	overflow: hidden;
	width: 100%;
    z-index:1;
    position: relative;
}
.my-navsub-container{
    overflow: auto;
}
.my-navsub-container > .container{
	white-space: nowrap;
	padding:0px;
}
.my-navsub-ul{
	display: inline-block !important;
    float: none !important;
    margin: 0;
	padding-left:15px;
	padding-right:15px;
}
.my-navsub-ul > li{
	text-align:center;
	display: inline-block !important;
    float: none;
}
.my-navsub-ul > li > a{
	min-width:95px;
	position:relative;
	line-height:normal;
	padding-top:14px;
	padding-bottom:11px;
}

/* icon */
.my-navsub-icon{
	display:block;
	line-height:20px;
	height:20px;
}

/* label */
.my-navsub-label{
	display:block;
	margin-top:6px;
}
.my-navsub-label > span{
	display:block;
	line-height:1em;
}

/* Mobile (XS) */
@media (max-width: 767px){
	.my-navsub:not(.private){
		text-align:center;
	}
	.my-navsub:not(.private) .my-navsub-ul{
		padding-left:8px;
		padding-right:8px;
	}
	.my-navsub-ul > li > a {
		min-width:85px;
		padding-top:13px;
		padding-bottom:10px;
	}
	.my-navsub-label{
		margin-top:5px;
	}
}

/* Mobile (XXS) */
@media (max-width: 599px){
	.my-navsub-overflow{
		z-index:3;
	   	height:100%;
	    position: absolute;
	    top: 0;
	    width:15px;
	    pointer-events: none;
	}
	.my-navsub-overflow-right{
		background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1));
		right: 0;
	}
	.my-navsub-overflow-left{
		background-image: linear-gradient(-90deg, transparent, rgba(0, 0, 0, 0.1));
		left:0;
	}
	.my-navsub-ul > li > a{
		min-width:70px;
		padding-top:9px;
		padding-bottom:7px;
	}
	.my-navsub-label{
		margin-top:3px;
	}
}

/****************************************/
/* Alert
/****************************************/
.my-navsub-ul > li.my-navsub-alert .my-navsub-icon i{
	position:relative;
}
.my-navsub-ul > li.my-navsub-alert .my-navsub-icon i:after{
	content:"\e101";
	font-family: 'Glyphicons Halflings';
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	font-size:12px;
	position:absolute;
	top:-5px;
	right:-15px;
}

/* Mobile (XS) */
@media (max-width: 767px){
	.my-navsub-ul > li.my-navsub-alert .my-navsub-icon i:after{
		top:-4px;
		right:-13px;
		font-size:11px;
	}
}
/* Mobile (XXS) */
@media (max-width: 599px){
	.my-navsub-ul > li.my-navsub-alert .my-navsub-icon i:after{
		top:-3px;
		ht:-12px;
		font-size:11px;
	}	
}

/* alert context - danger */
.my-navsub-ul > li.my-navsub-alert-danger .my-navsub-icon i:after{
	color:rgba(180, 43, 35, 0.7);	
}
.my-navsub-ul > li.my-navsub-alert-danger.active .my-navsub-icon i:after,
.my-navsub-ul > li.my-navsub-alert-danger:hover .my-navsub-icon i:after{
	color:rgba(180, 43, 35, 1);
}

/* alert context - success */
.my-navsub-ul > li.my-navsub-alert-success .my-navsub-icon i:after{
	color:#00993c;
}
.my-navsub-ul > li.my-navsub-alert-success:hover .my-navsub-icon i:after{
	color:#00993c;
}

/* alert context - warning */
.my-navsub-ul > li.my-navsub-alert-warning .my-navsub-icon i:after{
	color:rgba(212, 106, 0, 0.7);	
}
.my-navsub-ul > li.my-navsub-alert-warning.active .my-navsub-icon i:after,
.my-navsub-ul > li.my-navsub-alert-warning:hover .my-navsub-icon i:after{
	color:rgba(212, 106, 0, 1);	
}

/****************************************/
/* Theme
/****************************************/
.my-navsub{
	box-shadow:0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.12), 0 2px 1px -1px rgba(0,0,0,.10), 0 2px 12px 0 rgba(140,140,140,0.2);	
}

.my-navsub-icon{
	font-size:18px;
}

.my-navsub-label{
	font-weight:bold;
	text-transform:uppercase;
	font-size:12px;
}

.my-navsub-label .my-navsub-label_base_page{
	font-weight:normal;
	font-size:8px;
}

.my-navsub-ul > li > a{
	border-bottom:3px solid transparent;
	color:#000 !important;
}

.my-navsub-ul > li.active > a{
	border-bottom:3px solid  #222;
}

.my-navsub-ul > li:not(.active):not(:hover){
	opacity:0.6;
}

/* Mobile (XXS) */
@media (max-width: 767px){
	.my-navsub-icon{
		font-size:17px;
	}
	.my-navsub-label{
		font-size:11px;
	}
}

/* Mobile (XXS) */
@media (max-width: 599px){
	.my-navsub-icon{
		font-size:15px;
	}
	.my-navsub-label{
		font-size:10px;
	}
	.my-navsub-label .my-navsub-label_base_page{
		font-size:7px;
	}
}