#mainNav-container {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  letter-spacing: .1em;
  width: 700px;
  /*adjust main menue width here*/
  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:380px) {

#mainNav-container {
  height: 100%;
  width: 270px;
  position: fixed;
  background-color: #303030;
  /* background colour of side menu*/
  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: none transparent;
}

#mainNav-container.mainNav-sticky .sticky-mainNav-container { height: 100%!important }
}
@media (min-width:380px) {

#mainNav-container { margin: 10px 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: 700px;
  /*adjust main menue width when floating here*/
  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:380px) {

#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: #202020;
  /* transparent; #333333 #b3ccff #33ff33; #8ca33b; change the background colour top level menu and side menu top level here*/
  box-sizing: border-box;
	border-radius: 10px;
}

#mainNav-container #mainNav-menu li {
  box-sizing: border-box;
  background-color: transparent;
  padding: 10px 20px
	  
}
@media (max-width:380px) {

#mainNav-container #mainNav-menu li { border-bottom: 1px solid #2C3E50 }
}

#mainNav-container #mainNav-menu li:hover {
  background-color: #333333;
  /* #333333; #2C3E50; #a11c20 #33ff33 edit mouse over hover color here*/
  border-bottom: none transparent;
  cursor: pointer
}

#mainNav-container #mainNav-menu li:hover a { color: #fff }

#mainNav-container #mainNav-menu li a {
  text-decoration: bold;
  text-transform: uppercase;
  color: #fff
  /* #fff #8db2fc adjust text colour top menu here */
}

#mainNav-container #mainNav-menu li a:hover { color: #000000 }
/* #fff #000000 #8db2fc edit rolled over top menue text here */

#mainNav-container #mainNav-menu li ul li {
  background-color: #404040;
  /* #808080; #8ca305; #33ff33 #8acffa #0044ff #103cb5 Edit dropdown colour here   */
	border-radius: 10px; 
  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 }
/* #fff #000000 this controlls the text colour of the rolled over dropdown   */

#mainNav-container #mainNav-menu li ul>li:not(:last-child) { border-bottom: none transparent }
@media (min-width:380px) {

#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:380px) {

#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:380px) {

#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:380px) {

#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: none transparent
}

#mainNav-container #mainNav-menu>li.mainNav-dropdown-open>ul>li:first-of-type { border-top: none transparent }

#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: none transparent
}

#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:380px) {

#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;
  /* center: 100% */
  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:340px) {

.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: 700px;
  max-width: 100%;
  margin: 0 auto
}

.container.left, .container.right { margin-top: 50px }
@media (min-width:340px) {

.container { margin-top: 30px }
}