
#mainNav-container {
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: .1em;
  width: 1024px;
  max-width: 100%;
  box-sizing: border-box;
  transition: top .6s ease, left .6s ease, right .6s ease;
  position: relative;
  z-index: 5000
}
@media (max-width:767px) {

#mainNav-container {
  height: 100%;
  width: 270px;
  position: fixed;
  background-color: #FC6D58;
  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 solid #fff
}

#mainNav-container.mainNav-sticky .sticky-mainNav-container { height: 100%!important }
}
@media (min-width:768px) {

#mainNav-container { margin: 30px auto 0 }

#mainNav-container.mainNav-sticky {
  width: 100%;
  max-width: 100%;
  top: 0;
  margin: 0;
  position: fixed;
  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 solid #fff }

#mainNav-container.mainNav-sticky .sticky-mainNav-container #mainNav-menu>li:first-of-type { border-left: 1px solid #fff }
}

#mainNav-container #mainNav-toggle { display: none }
@media (max-width:767px) {

#mainNav-container #mainNav-toggle {
  background-color: #f1f1f1;
  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: 2px;
  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 {
  width: 100%;
  background-color: transparent;
  box-sizing: border-box
}

#mainNav-container #mainNav-menu li {
  box-sizing: border-box;
  background-color: transparent;
  padding: 10px 20px
}
@media (max-width:767px) {

#mainNav-container #mainNav-menu li { border-bottom: 1px solid #2C3E50 }
}

#mainNav-container #mainNav-menu li:hover {
  background-color: #2C3E50;
  border-bottom: 1px solid #fff;
  cursor: pointer
}

#mainNav-container #mainNav-menu li:hover a { color: #fff }

#mainNav-container #mainNav-menu li a {
  text-decoration: none;
  text-transform: uppercase;
  color: #333
}

#mainNav-container #mainNav-menu li a:hover { color: #fff }

#mainNav-container #mainNav-menu li ul li {
  background-color: #2C3E50;
  font-size: 14px
}

#mainNav-container #mainNav-menu li ul li a { text-transform: none }

#mainNav-container #mainNav-menu li ul li:hover a { color: #fff }

#mainNav-container #mainNav-menu li ul>li:not(:last-child) { border-bottom: 1px solid #fff }
@media (min-width:768px) {

#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 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;
  color: #333
}
@media (min-width:768px) {

#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 { color: #fff }
@media (min-width:768px) {

#mainNav-container #mainNav-menu .mainNav-dropdown:hover::after {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg)
}
}

#mainNav-container #mainNav-menu .mainNav-dropdown.mainNav-dropdown-open::after {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg)
}
@media (max-width:767px) {

#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 40px;
  width: 100%;
  border-right: none transparent!important;
  border-bottom: 1px solid #fff
}

#mainNav-container #mainNav-menu>li.mainNav-dropdown-open>ul>li:first-of-type { border-top: 1px solid #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 solid #fff
}

#mainNav-container #mainNav-menu>li.mainNav-dropdown-open>ul>li.mainNav-dropdown-open ul li:first-of-type { border-top: 1px solid #fff }

#mainNav-container #mainNav-menu>li.mainNav-dropdown-open>ul>li.mainNav-dropdown-open ul li:last-of-type { border-bottom: none transparent }
}
@media (min-width:768px) {

#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 solid #fff
}

#mainNav-container #mainNav-menu>li:hover>ul>li:hover ul li:first-of-type { border-top: 1px solid transparent }

#mainNav-container #mainNav-menu>li:hover>ul>li:hover ul li:last-of-type { border-bottom: none transparent }
}
@media (max-width:767px) {

.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 }
}

.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 (min-width:768px) {

.container { margin-top: 30px }
}
