.page-wrap { position: relative; max-width: 1200px; margin: 0 auto; }

.topbar { width: 100%; height: 100%; background: #253a73; z-index: 10000000; overflow: hidden; }
.topbar .page-wrap { height: 100%; }
.topbar span { display: block; float: left; height: 100%; }
.topbar span.color1 { background: #a8a9ad; width: 6%; }
.topbar span.color2 { background: #d4d4d6; width: 15%; }
.topbar span.color3 { background: #243a73; width: 3%; }
.topbar span.color4 { background: #1b2a55; width: 20%; }
.topbar span.color5 { background: #253a73; width: 42%; }
.topbar span.color6 { background: #17254a; width: 4%; }

#topbar { height: 10px; }

#background { position: fixed; z-index: -1000; top: 0; left: 0; width: 100%; height: 100%; background: #253a73; }

#header { position: fixed; z-index: 100000; min-height: 67px; width: 100%; padding: 10px 0; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); border-color: #fff; }
#header.active { padding: 0; min-height: 47px; border-bottom: 5px solid #fff }
#header .topbar { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100001; }
#header .logo { position: relative; z-index: 100002; margin-bottom: -15px; padding: 10px 0 0 8px; height: 47px; float: left; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
#header.active .logo { height: 31px; padding-top: 9px; }
#header .logo img { height: 100%; }
#header a { text-decoration: none; }

#header .navigation { position: relative; ; z-index: 100003; float: right; }
#header .navigation ul a { color: #fff; font-size: 16px; font-weight: bold; line-height: 17px; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
#header .navigation ul a:hover { color: #d0991b; }
#header .navigation ul a.active { border-bottom: 2px solid #d0991b; }
#header.active .navigation ul a { font-size: 13px; }
#header .navigation li { position: relative; float: left; padding: 25px 20px; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
#header.active .navigation li { padding: 15px 10px 15px 20px; }
#header .navigation li.login { float: right; }
#header .navigation li.login a { background: #222; margin-left: -10px; padding: 5px 15px; color: #d0991b; }
#header.active .navigation li.login a { padding: 5px 10px; }
#header .navigation li ul { position: absolute; top: 60px; left: 5px; background: #222; padding: 0; width: 170px; height: 0; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); overflow: hidden; z-index: 100005; }
#header.active .navigation li ul { top: 35px; }
#header .navigation li:hover ul { height: auto; padding: 15px 0; }
#header .navigation li ul li { float: none; margin: 0; padding: 5px 15px !important }
#header .navigation li ul li a { font-weight: normal; font-size: 14px; }
#header.active .navigation li ul { width: 130px; }
#header.active .navigation li ul li { padding: 3px 10px; }
#header.active .navigation li ul li a { font-size: 12px; }
#header .navigation .userinfo { color: #fff; font-size: 12px; position: absolute; top: 64px; right: 20px; text-align: right; background: #d0991b; padding: 7px 10px; white-space: nowrap; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); z-index: 100004; }
#header.active .navigation .userinfo { top: 38px; padding: 6px 8px; right: 10px; font-size: 11px; }

#header .navigation .loginform { position: absolute; top: 50px; right: 20px; background: #222; padding: 0 12px; width: 300px; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); height: 0; overflow: hidden; }
#header .navigation .loginform.active { padding: 12px; height: auto; }
#header .navigation .loginform .description { text-align: left; line-height: 1.5; width: 190px; padding: 12px; }
#header .navigation .loginform a { text-decoration: underline; }
#header .navigation .loginform .message { font-size: 13px; border-radius: 0; text-align: left; }

#sidebar { position: fixed; z-index: 6; top: 87px; left: 50%; margin-left: -600px; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
#sidebar.active { top: 47px; }
#sidebar .sidebar-wrap { width: 42%; }
#sidebar a { color: #1b2a55; text-decoration: none; }
#sidebar ul { border-left: 5px solid #d4d4d6; margin: 20px 2px; }
#sidebar li { font-size: 20px; font-weight: bold; padding: 15px; white-space: nowrap; }
#sidebar li ul { border-left: none; margin: 15px 0 0 2px; }
#sidebar li ul li { font-size: 16px; font-weight: normal; padding: 10px 0 }
#sidebar li ul li a { color: #999; }
#sidebar li ul li a.active { border-bottom: 2px solid #d0991b; }
@media only screen and ( max-width: 1200px ){
	#sidebar { left: 0; margin-left: 0; }
	#sidebar ul { margin: 15px; }
}

#body { position: relative; z-index: 5; background: #fff; min-height: calc(100vh - 270px); padding-top: 1px; margin: -1px 0 -10px; }
#body .body-wrap { margin-top: 87px; padding-left: 21%; padding-bottom: 50px; }

#footer { position: relative; z-index: 4; background: #222; color: #fff; margin-bottom: 10px; }
#footer .page-wrap::before { content: ""; position: absolute; top: 0; left: 86%; width: 4%; height: 100%; background: #17254a; }
#footer a { color: #fff; text-decoration: none; white-space: nowrap }
#footer .div { color: #d0991b; padding: 0 10px; }
#footer h1 { padding: 130px 20px 7px 20px; color: #d0991b; font-size: 14px; }
#footer h1 a { color: #d0991b; padding-bottom: 7px; }
#footer address { font-style: normal; padding: 0 0 10px 0; color: #a8a9ad; font-size: 12px; line-height: 1.5; margin: 0 20px; }
#footer address a { color: #a8a9ad; }
#footer .links { font-style: normal; color: #fff; font-size: 12px; line-height: 1.5; padding-bottom: 1px; }
#footer .links .links-wrap { padding: 8px 10px; background: rgba(255,255,255,0.15); display: inline-block; margin: 0 15px 19px 15px; }
#footer .icons { position: absolute; bottom: 20px; right: 20px; }
#footer .icons img { height:20px; }

@media only screen and ( max-width: 800px ){
	#header { padding: 0; min-height: 47px; }
	#header .topbar .color2 { min-width: 95px; }
	#header .logo { height: 31px; padding-top: 9px !important; padding-left: 8px }
	
	#header .navigation { float: none; }
	#header .navigation .navigation_button { cursor: pointer; height: 20px; width: 20px; position: absolute; top: 15px; right: 15px; }
	#header .navigation .navigation_button span { display: block; border-top: 2px solid #fff; margin-bottom: 5px; }
	#header .navigation ul { position: absolute; top: 47px; right: 0; background: #222; width: 260px; padding-left: calc(100vw - 260px); height: 0; overflow: auto; -webkit-overflow-scrolling: touch; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);  }
	#header .navigation.active ul { height: calc(100vh - 56px); padding-top: 10px; }
	#header .navigation ul a { font-size: 18px !important; color: #d0991b;}
	#header .navigation li { padding: 15px 15px 15px 0 !important; width: 110px; text-align: right; float: left; }
	#header .navigation li ul { position: static; width: auto !important; height: auto !important; padding: 15px 0 0 0 !important; min-height: 125px; background: transparent; }
	#header .navigation li ul li { padding: 7px 0 !important }
	#header .navigation li ul li a { color: #fff; font-size: 16px !important; }
	#header .navigation li.login { position: absolute; top: 10px; left: 15px; width: auto; }
	#header .navigation li.login a { background: #d0991b; color: #fff; margin-left: 0; padding: 5px 10px !important }
	#header .navigation .loginform { top: 99px; right: auto; left: 15px; background: #d0991b; padding: 0 5px; }
	#header .navigation .loginform.active { padding: 5px; }
	#header .navigation .loginform .description { color: #555; }
	#header .navigation .loginform .description a { color: #555; }
	
	#header .navigation .userinfo { top: 12px !important; right: 35px !important; background: none !important; color: #d0991b !important; font-size: 11px !important; padding: 7px 10px !important; }
	
	#sidebar { display: none; }
	#body { min-height: calc(100vh - 189px); }
	#body .body-wrap { margin-top: 46px; padding-left: 0; }
	
	#footer { margin-bottom: 5px; }
	#footer .page-wrap::before { display: none; }
	#footer h1 { padding-top: 80px; font-size: 13px; }
	#footer address { font-size: 11px; }
	#footer .links { font-size: 11px; }
	#footer .links .links-wrap { display: block; margin-bottom: 14px; } 
	#footer .icons { bottom: 2px; }
	
}