#mainNav-container {letter-spacing: 2px; font-size:11px; width: 1024px; max-width: 100%; box-sizing: border-box; transition: top .6s ease, left .6s ease, right .6s ease;  position: relative; z-index: 5000}
#mainNav-container #mainNav-toggle { display: none }
#mainNav-container #mainNav-menu {width: 95%; background-color: transparent; box-sizing: border-box; margin: 0 2.5%;}
#mainNav-container #mainNav-menu li {background-color: transparent; padding: 15px 3px}
#mainNav-container #mainNav-menu li:hover {cursor: pointer;}
#mainNav-container #mainNav-menu li:hover a { }
#mainNav-container #mainNav-menu li a {text-decoration: none; color: #232323;}
#mainNav-container #mainNav-menu li a:hover { color: #ccc; }
#mainNav-container #mainNav-menu li ul li {background-color: #333; opacity: 0.8; font-size: 11px; color: #fff; }
#mainNav-container #mainNav-menu li ul li a { text-transform: none; color: #fff;}
#mainNav-container #mainNav-menu li ul li:hover a { color: #d1d1d1; }
#mainNav-container #mainNav-menu li ul>li:not(:last-child) { border-bottom: 1px dotted #fff; width:300px;}
#mainNav-container #mainNav-menu ul { display: none;}
#mainNav-container #mainNav-menu .mainNav-dropdown { position: relative;}
#mainNav-container #mainNav-menu .mainNav-dropdown::after {content: ""; position: absolute; right: 10px; top: 10px; }
#mainNav-container #mainNav-menu .mainNav-dropdown:hover { color: #fff; }
#mainNav-container #mainNav-menu .mainNav-dropdown.mainNav-dropdown-open::after {-webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);}
.clearfix::after, .clearfix::before {display: table; content: " "}
.clearfix::after { clear: both }
.container {width: 1024px; max-width: 100%; margin: 0 auto;}
.container.left, .container.right { margin-top: 50px;}

@media (max-width:1023px) {
#mainNav-container {height: 100%; width: 270px; position: fixed; background-color: #fff; top: 0;}
#mainNav-container.left { left: -270px }
#mainNav-container.left.mainNav-open { left: 0 }
#mainNav-container.left #mainNav-menu { height: 100% }
#mainNav-container.right { right: -270px }
#mainNav-container.right.mainNav-open { right: 0 }
#mainNav-container.right #mainNav-menu { height: 100% }
#mainNav-container.top {position: fixed; width: 100%; overflow: hidden; margin-top: 50px; max-height: 0; transition: max-height .6s ease, padding-bottom .6s ease; padding-bottom: 0; }
#mainNav-container.top.mainNav-open {max-height: 1000px; padding-bottom: 10px;}
#mainNav-container.top #mainNav-menu::after, #mainNav-container.top #mainNav-menu::before {display: table; content: " "}
#mainNav-container.top #mainNav-menu::after { clear: both }
#mainNav-container.top #mainNav-menu li {float: left; width: 100%; border-right: none transparent; border-left: none transparent; border-bottom: 1px dotted #fff;}
#mainNav-container.mainNav-sticky .sticky-mainNav-container { height: 100%!important }
#mainNav-container #mainNav-toggle { background-color: #fff; border: none transparent; border-radius: 3px; display: block; width: 30px; height: 30px; position: fixed; top: 10px; padding: 2px; transition: left .6s ease, right .6s ease;}
#mainNav-container #mainNav-toggle:hover {cursor: pointer; opacity: .7}
#mainNav-container #mainNav-toggle.left { left: 10px }
#mainNav-container #mainNav-toggle.left.mainNav-open { left: calc(270px + 10px) }
#mainNav-container #mainNav-toggle.right { right: 10px }
#mainNav-container #mainNav-toggle.right.mainNav-open { right: calc(270px + 10px) }
#mainNav-container #mainNav-toggle.top { left: 10px }
#mainNav-container #mainNav-toggle span {width: 100%; height: 3px; display: block; background-color: #ccc;}
#mainNav-container #mainNav-toggle span:nth-of-type(1) { margin-bottom: 4px }
#mainNav-container #mainNav-toggle span:nth-of-type(3) { margin-top: 4px }
#mainNav-container #mainNav-menu li { border-bottom: 1px dotted #424242; }
#mainNav-container #mainNav-menu>li.mainNav-dropdown-open>ul {display: block; position: relative; top: 10px; width: calc(100% + 40px); margin: 0 -20px}
#mainNav-container #mainNav-menu>li.mainNav-dropdown-open>ul>li {display: block; padding: 10px 0 10px 5px; width: 95%; border-right: none transparent! important; border-bottom: 1px dotted #fff;}
#mainNav-container #mainNav-menu>li.mainNav-dropdown-open>ul>li:first-of-type { border-top: 1px dotted #fff }
#mainNav-container #mainNav-menu>li.mainNav-dropdown-open>ul>li:last-of-type { border-bottom: none transparent }
#mainNav-container #mainNav-menu>li.mainNav-dropdown-open>ul>li.mainNav-dropdown-open ul {display: block; position: relative; top: 10px; width: calc(100% + 40px); margin: 0 -40px}
#mainNav-container #mainNav-menu>li.mainNav-dropdown-open>ul>li.mainNav-dropdown-open ul li { padding: 10px 0 10px 60px; border-right: none transparent!important; border-bottom: 1px dotted #fff;}
#mainNav-container #mainNav-menu>li.mainNav-dropdown-open>ul>li.mainNav-dropdown-open ul li:first-of-type { border-top: 1px dotted #fff }
#mainNav-container #mainNav-menu>li.mainNav-dropdown-open>ul>li.mainNav-dropdown-open ul li:last-of-type { border-bottom: none transparent }
.push-mainNav-container {position: relative; transition: top .6s ease, margin-left .6s ease, right .6s ease;}
.push-mainNav-container.left { margin-left: 0 }
.push-mainNav-container.left.push-mainNav-open { margin-left: 270px }
.push-mainNav-container.right { right: 0 }
.push-mainNav-container.right.push-mainNav-open { right: 270px }
}


@media (min-width:1024px) {
#mainNav-container { margin: 10px auto 0 }
#mainNav-container.mainNav-sticky {width: 100%;	max-width: 100%; /*top: 0; margin: 0; border:solid 1px red; background-color: transparent;	-webkit-box-shadow: 0 8px 5px -7px rgba(0,0,0,.7);-moz-box-shadow: 0 8px 5px -7px rgba(0,0,0,.7);	box-shadow: 0 8px 5px -7px rgba(0,0,0,.7)*/}
#mainNav-container.mainNav-sticky .sticky-mainNav-container {width: 1024px; max-width: 100%; top: 0; margin: 0 auto; }
#mainNav-container.mainNav-sticky .sticky-mainNav-container #mainNav-menu>li { float: left }
/*#mainNav-container.mainNav-sticky .sticky-mainNav-container #mainNav-menu>li:last-of-type { border-right: 1px dotted #fff }
#mainNav-container.mainNav-sticky .sticky-mainNav-container #mainNav-menu>li:first-of-type { border-left: 1px dotted #fff }*/
#mainNav-container #mainNav-menu.mainNav-horizontal::after, #mainNav-container #mainNav-menu.mainNav-horizontal::before {display: table; content: " "}
#mainNav-container #mainNav-menu.mainNav-horizontal::after { clear: both }
#mainNav-container #mainNav-menu.mainNav-horizontal li { float: left}
#mainNav-container #mainNav-menu.mainNav-horizontal.mainNav-justified>li {display: table-cell; width: 1%; text-align: center; float: none}
#mainNav-container #mainNav-menu .mainNav-dropdown::after {-webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg)}
#mainNav-container #mainNav-menu .mainNav-dropdown:hover::after {-webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg)}
#mainNav-container #mainNav-menu>li:hover>ul {display: block; position: absolute; top: 37px; width: 150px; margin-left: -20px}
#mainNav-container #mainNav-menu>li:hover>ul>li {display: block; padding: 10px 20px; width: 150px; border-right: none transparent!important}
#mainNav-container #mainNav-menu>li:hover>ul>li:hover ul {display: block; position: absolute; height: 36px!important; max-height: 36px!important; left: 100%; width: calc(100% + 40px); margin-top: -27px}
#mainNav-container #mainNav-menu>li:hover>ul>li:hover ul li {padding: 10px 20px; border-right: none transparent!important; border-bottom: 1px dotted #fff}
#mainNav-container #mainNav-menu>li:hover>ul>li:hover ul li:first-of-type { border-top: 1px dotted transparent }
#mainNav-container #mainNav-menu>li:hover>ul>li:hover ul li:last-of-type { border-bottom: none transparent }
.container { margin-top: 36px}
}