.sf-menu {
	/* width: 80%; */ /* 1000px / 1250px */
	font-size: 0.8125em; /* 13 / 16 */
	/* max-width: 92.3em; */ /* 1200px / 13 */
	margin: 0 auto;
	padding: 0px;
	position: relative;
	text-align: left;
	display: table;
}

#mobnav-btn {
    display: none;
    font-size: 16px;
    font-weight: bold;
		background-color: #e32526;
    padding: 5px;
    cursor: pointer;
		text-align: center;
		font-size: 16px; line-height: 23px; color:#ffffff;
		overflow: hidden;
		width: auto;
		position: fixed;
		right: 0;
		top: 0;
		border-bottom-left-radius: 5px;
		z-index: 999;
		opacity: 0.5;
}
.mobnav-subarrow {
    display: none;
}

@media only screen and (max-width: 990px) {
    #mobnav-btn {
        display: block;
    }
    .mobnav-subarrow {
        display: block;
        background-color: #caa003;
        opacity: .3;
        border-bottom: 1px solid white;
        border-top: 1px solid black;
        height: 20px;
        width: 30px;
        background-position: top left!important;
        position: absolute;
        top: 8px;
        right: 10px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        cursor: pointer;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        cursor: pointer;
        -webkit-transition: all .1s ease-in-out;
        -moz-transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
        -o-transition: all .1s ease-in-out;
        transition: all .1s ease-in-out;
    }
    .sf-menu {
        width: 100%!important;
        display: none;
        margin:0px; padding:0px;
				position: absolute;
				text-align: center;
				background-color: #e32526;
    }
    .sf-menu.xactive {
        display: block!important;
    }
    .sf-menu li {
        float: none!important;
        display: block!important;
        width: 100%!important;
    }
    .sf-menu li a {
        float: none!important;
    }
    .sf-menu ul {
        position:static!important;
        display: none!important;
    }
    .xpopdrop ul {
        display: block!important;
    }
}

.sf-menu ul {position:absolute;top:-999px; display:none;/* left offset of submenus need to match (see below) */}
.sf-menu ul li {width:100%}
.sf-menu li {float:left;position:relative; list-style: none;}

.sf-menu>li>a{display:block;position:relative; font-size: 16px; line-height: 30px; color:#555555;padding-top: 5px;padding-bottom: 15px;padding-left: 40px;padding-right: 40px;}
.sf-menu>li>a:hover,.sf-menu>li.current>a,.sf-menu>li.sfHover>a{color:#e32526;background-position:0 0;text-decoration: none;}

.sf-menu>li{}
.sf-menu a{color:#ffffff;}

@media only screen and (max-width: 990px) {
	.sf-menu>li, .sf-menu>li>a
	{
		color: #ffffff;
	}
	.sf-menu>li>a:hover, .sf-menu>li.current>a, .sf-menu>li.sfHover>a
	{
		color: #ffffff;
	}
}

.sf-menu>li>a{
	padding-left: 15px;
	padding-right: 15px;
}

@media only screen and (min-width: 1320px) {
		.sf-menu>li>a{
			padding-left: 20px;
			padding-right: 20px;
		}
}

@media only screen and (max-width: 1140px) {
		.sf-menu>li>a{
			font-size: 16px;
			padding-left: 10px;
			padding-right: 10px;
		}
}

/*================================>> 2 Level <<========================================*/
.sf-menu li ul,.sf-menu li.sfHover ul{left:0;top:32px;width: 200px;padding:1px 0 0 0; z-index:99; background:#e32526;}
.sf-menu li ul li{}
.sf-menu li ul li:hover{}
.sf-menu li ul li a{margin: 0px;display:block; overflow: hidden;}
.sf-menu li li a:hover, .sf-menu li.sfHover li.sfHover>a{color:#000000;}

/*================================>> 3 Level <<========================================*/
.sf-menu li li ul{left:201px !important;top:-1px !important;}

.sf-menu li a .menu-arrow{
    display:block;
    width:5px;
    height:3px;
    position: absolute;
    left: 50%;
    bottom: 15px;
    text-indent:-100%;
    font-size:0;
    line-height:0;
    background: url('/wp-content/themes/timelineCMS/templates/images/menu_arrow.png') no-repeat;
    vertical-align: middle;
}
.sf-menu li li a .menu-arrow{
    display:block;
    width:5px;
    height:3px;
    position: absolute;
    left: auto;
    right: 20px;
    bottom: 15px;
    text-indent:-100%;
    font-size:0;
    line-height:0;
    background: url('/wp-content/themes/timelineCMS/templates/images/menu_arrow.png') no-repeat;
    vertical-align: middle;
}