/* NAVIGATION CONTAINTER */
#navcontain {
  text-align: right;
  position: inherit;
  top: 0;
  z-index: 10;
  margin: 0;
  font-family: "Open Sans Condensed", sans-serif!important;
}

.bttn {display: none;}

/* NAVIGATION STYLES START */
.nav {
  position: relative;
  margin: 0 auto;
  font-family: "Open Sans Condensed", sans-serif!important;
  color: black;
}

/* MOBILE NAV TO NOT DISPLAY ON DESKTOP */
#cssmenu #head-mobile {
  display: none;
}

/* NAV AND LIST GLOBAL STYLES */
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #head-mobile {
  position: relative;
  list-style: none;
  line-height: 1;
  display: block;
}

/* DESKTOP NAV FIRST LEVEL STYLES*/

#cssmenu > ul {
  margin: 0 0 0 0;
  display: inline-block;
  padding: 0;
}

#cssmenu > ul > li {
  position: relative;
  display: inline-block;
  text-align: center;
  padding: 0;
}

#cssmenu > ul > li > a {
  display: inline-block;
  margin: 8px 1vw;
  font-size: 18px;
  color: black;
  font-weight: bold;
  line-height: 1.4;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
  -moz-transition: color 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out;
}

a.active {
  border-bottom: 5px solid #bc0311;
}

/* NAV FIRST LEVEL HOVER EFFECTS */
#cssmenu > ul > li:hover,
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li:focus > a {
  color: #bc0311;
}

#cssmenu > ul > li.has-sub:hover > a:before {
  top: 23px;
  height: 0;
}

@media screen and (max-width: 1369px) {
  #cssmenu > ul > li > a {
    font-size: 15px;
  }
}

@media screen and (max-width: 1130px) {
  /* NAVIGATION CONTAINTER */
  #navcontain {
    width: 100%;
    margin: 0 auto;
	background: #f4ce85;
  }

  #cssmenu {
    width: 100%;
    padding: 0;
    background: none;
  }

  /* DESTOP NAV TO NOT DISPLAY ON MOBILE
    ALSO BAKCGROUND STYLES OF MOBILE NAV DROPDOWN */
  #cssmenu ul {
    display: none;
    /*START BACKGROUND STYLES */
    width: 100%;
    background: none;
    box-shadow: 0 3px 3px #363636;
    margin-top: 0;
  }

  /* MOBILE NAV TO DISPLAY AT QUERY WIDTH
    ALSO BAKCGROUND STYLES OF MOBILE NAV BAR */
  #cssmenu #head-mobile {
    display: block;
  }

  /* MOBILE MENU HAMBURGER BUTTON STYLES */
  .bttn {
    display: flex;
    justify-content: center;
	align-items: center;
    text-decoration: none;
    z-index: 999;
    color: #151515;
    width: 100%;
	cursor: pointer;
	padding: 5px 0;
    position: relative !important;
  }

  /* MOBILE MENU HAMBURGER LINE STYLES */
  .bttn:after {
    content: "";
    position: absolute;
    display: block;
    width: 30px;
    height: 4px;
    top: 19px;
    right: 0;
	left: 15px;
    border-top: 3px solid black;
    border-bottom: 3px solid black;
	box-sizing: content-box;
  }

  .bttn:before {
    content: "";
    position: absolute;
    display: block;
    width: 30px;
    height: 3px;
    top: 12px;
    right: 0;
	left: 15px;
    background: black;
	box-sizing: content-box;
  }

  .bttn p {
    letter-spacing: 1px;
    color: black;
    font-size: 19px;
    font-weight: 600;
    font-family: "Open Sans Condensed", sans-serif;
    margin: 0 auto;
    text-align: right;
	width: 100%;
	padding-right: 15px;
  }

  .bttn.menu-opened:after {
    width: 22px;
    height: 4px;
    top: 18px;
    border: 0;
    background: black;
    transform: rotate(45deg);
  }
  .bttn.menu-opened:before {
    width: 22px;
    top: 18px;
    background: black;
    transform: rotate(-45deg);
  }

  /* MOBILE NAV FIRST LEVEL STYLES*/
  #cssmenu ul li {
    width: 100%;
    margin: 0 0 0 0;
    padding: 0;
    border-left: none;
    border-right: none;
    text-align: center;
    border-top: 1px solid black;
    background: none;
  }

  #cssmenu ul li a,
  #cssmenu ul ul li a {
    width: 100%;
    border-bottom: 0;
    padding-left: 0;
    line-height: 1;
    margin: 8px 0 !important;
  }

  /* MOBILE NAV SUBMENU STYLES*/
  /*MOBILE NAV TO NOT DISPALY DESKTOP SUBMENU BUTTON */
  #cssmenu > ul > li.has-sub > a:after,
  #cssmenu > ul > li.has-sub > a:before {
    display: none;
  }

  ul.open {
    padding: 0;
  }

  /*MOBILE NAV SUBMENU BUTTON STYLES */
  #cssmenu .submenu-button {
    position: absolute;
    display: block;
    height: 38px;
    right: 0;
    top: 0;
    padding: 0 27px;
    background: #ffcc01;
    cursor: pointer;
    z-index: 99;
  }
  #cssmenu .submenu-button.submenu-opened {
    background: white
      /*MOBILE SUBMENU BUTTON BACKGROUND COLOR (SUBMENU OPENED) */;
  }

  /*MOBILE NAV SUBMENU ICON STYLES */
  #cssmenu .submenu-button:before {
    content: "";
    position: absolute;
    display: block;
    width: 2px;
    height: 8px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    background: white;
  }
  #cssmenu .submenu-button:after {
    content: "";
    position: absolute;
    display: block;
    width: 8px;
    height: 2px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    background: white;
  }
  #cssmenu .submenu-button.submenu-opened:before {
    display: none;
    background: black;
  }
  #cssmenu .submenu-button.submenu-opened:after {
    background: black;
  }

  /* MOBILE NAV SECOND LEVEL STYLES*/
  #cssmenu ul ul,
  #cssmenu ul ul ul {
    position: relative;
    left: 0;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 0;
  }

  #cssmenu ul ul li {
    background: white;
    padding: 0 0;
    border-bottom: 2px solid antiquewhite;
    font-family: "Lato", sans-serif;
  }

  #cssmenu ul ul li a {
    color: black;
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
  }

  #cssmenu ul ul li:hover #cssmenu ul ul li:hover > a,
  #cssmenu ul ul li.active > a {
    color: black;
    font-weight: bold;
  }
}

@media screen and (max-width: 530px) {
  #cssmenu > ul > li > a {
    font-size: 16px;
  }
}

@media screen and (max-width: 410px) {
  h6 {
    padding: 0 0 0 12% !important;
    width: 88%;
  }
}

@media screen and (max-width: 300px) {
  h6 {
    padding: 0 0 0 15% !important;
    width: 85%;
  }
}

@media screen and (max-width: 250px) {
  h6 {
    padding: 0 0 0 20% !important;
    width: 80%;
  }
}
