/* header */
.navbar {position: fixed; z-index: 999; width: 100%;}

.mnlogo {display: block; position: absolute; z-index: 20; top: 40px; left: 40px; width: 219px; height: 57px; transition: all 0.5s;}
.logo {position: fixed; z-index: 999; left: 40px;}
.blogo {display: none;}
.mbreser {position: absolute; top: 40px; right: 40px; z-index: 110; font-size: 12px; font-weight: bolder; text-align: center; letter-spacing: 0.025em; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
.mbreser i {font-size: 35px; vertical-align: middle; margin-right: 5px;}
#sticky_navs {display: block; position: fixed; width: 100%; /*top: -70px;*/ top: 40px; z-index: 100; transition: all .5s ease;}
.mlogo,
.mreser {display: none;}
.mopen {position: fixed; z-index: 110; top: 0px; right: 200px; line-height: 70px; color: #fff; font-size: 15px; font-weight: bold;}
#cssmenu {position: relative; width: 100%; background: transparent !important; margin: 0 auto;}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #head-mobile {display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 0;}
#cssmenu:after,
#cssmenu > ul:after {content: "."; display: block; clear: both; height: 0; visibility: hidden; line-height: 0;}
#cssmenu #head-mobile {display: none;}
#cssmenu {background: #333;}
#cssmenu > ul {text-align: center;}
#cssmenu > ul > li {display: inline-block !important; vertical-align: top;}
#cssmenu > ul > li > a {display: inline-block; font-size: 15px; font-weight: bold; line-height: 60px; letter-spacing: 0.025em; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); padding: 0 30px; cursor: pointer;}
#cssmenu ul li.active a {color: #000; text-shadow: none;}
#cssmenu ul ul {position: absolute; left: -9999px; background: rgba(49, 49, 49, 0.7); padding: 20px 0 40px;}
#cssmenu ul ul li {height: 0; -webkit-transition: all .25s ease; -ms-transition: all .25s ease; transition: all .25s ease;}
#cssmenu ul ul li:hover {}
#cssmenu li:hover > ul {left: auto;}
#cssmenu li:hover > ul > li {height: 30px;}
#cssmenu ul ul li a {display: inline-block; min-width: 120px; font-size: 13px; font-weight: normal; line-height: 30px; text-transform: uppercase; letter-spacing: 0.05em; color: #fff; padding: 0 20px;}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {border-bottom: 0;}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {text-decoration: underline;}

@media(min-width:1000px) {
	.navbar {padding: 40px 0 0; -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out; -moz-transition: background .5s ease-in-out,padding .5s ease-in-out; transition: background .5s ease-in-out,padding .5s ease-in-out;}
    .navbar.top-nav-collapse {height: 60px; background: #fff; padding: 0;}
}

@media screen and ( max-width:1000px ){
	.navbar {position: static;}

    .logo,
	.blogo,
	.mbreser {display: none !important;}
    .mbreser {right: 15px; font-size: 0; line-height: 60px;}
    .mbreser i{font-size: 35px !important;}

	#sticky_navs {position: static;}
    .mlogo,
	.mreser {display: block;}
    .mlogo {position: absolute; width: 100%; text-align: center; text-align: center;}
    .mlogo a {display: inline-block;}
    .mreser {position: absolute; z-index: 110; top: 10px; right: 20px; font-size: 13px; color: #2a2a2a; font-weight: bolder;}
	.mreser i {top: 10px; right: 20px; font-size: 30px; color: #2a2a2a; vertical-align: middle; margin-right: 5px;}
    nav {width: 100%;}
    #cssmenu {width: 100%;}
    #cssmenu ul {display: none; width: 100%;}
	#cssmenu > ul {position: absolute; top: 60px; z-index: 999; padding: 0;}
    #cssmenu > ul > li {width: 100%; float: none; }
    #cssmenu > ul > li:last-child {}
    #cssmenu > ul > li:hover,
	#cssmenu ul li.active:hover,
	#cssmenu ul li.active {}
    #cssmenu > ul > li > a {font-size: 15px; line-height: 280%; background: #fff; color: #000 !important; text-shadow: none !important; padding: 0 25px;}
    #cssmenu > ul > li > a
    #cssmenu ul li a {}
    #cssmenu ul li a,
	#cssmenu ul ul li a {width: 100%;}
	#cssmenu > ul > li:hover > a,
    #cssmenu ul li.active a {background: #000; color: #fff !important;}
    #cssmenu ul ul li,
	#cssmenu li:hover > ul > li {height: auto;}
	#cssmenu ul ul,
    #cssmenu > ul > ul > li {background: #313131 !important;}
    #cssmenu ul ul li:hover {}
    #cssmenu ul ul li a {color: #fff; padding-left: 25px; text-align: center}
    #cssmenu ul ul li:hover > a,
	#cssmenu ul ul li.active > a {color: #fff; }
    #cssmenu ul ul {position: relative; left: 0; width: 100%; text-align: left; padding: 0; margin: 0;}
    #cssmenu #head-mobile {display: block; font-size: 12px; font-weight: 700; color: #ddd; padding: 30px;}

    .button {position: absolute; top: 0; left: 15px; z-index: 12399994; width: 25px; height: 60px; color: #000; cursor: pointer;}
    .button:after {content: ''; display: block; position: absolute; top: 27px; right: 0px; width: 25px; height: 12px; border-top: 3px solid #000; border-bottom: 3px solid #000;}
    .button:before {content: ''; display: block; position: absolute; top: 17px; right: 0px; width: 25px; height: 3px; background: #000; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease;}
    .button.menu-opened:after {top: 27px; width: 25px; height: 3px; background: #000; border: 0; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
    .button.menu-opened:before {top: 27px; width: 25px; background: #000; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
}

@media ( max-width: 767px ) {
    .mlogo img {display: inline-block; width: 70%; padding: 5% 0;}
    #cssmenu > ul > li > a {font-size: 13px;}
	#cssmenu ul ul li a {font-size: 11px;}
    #cssmenu ul ul li:hover > a,
	#cssmenu ul ul li.active > a {text-decoration: none;}
}