@font-face {
      font-family: 'bask-info-fontello';
      src: url('../webfont/bask-info-fontello/font/bask-info-fontello.eot?33122017');
      src: url('../webfont/bask-info-fontello/font/bask-info-fontello.eot?33122017#iefix') format('embedded-opentype'),
           url('../webfont/bask-info-fontello/font/bask-info-fontello.woff?33122017') format('woff'),
           url('../webfont/bask-info-fontello/font/bask-info-fontello.ttf?33122017') format('truetype'),
           url('../webfont/bask-info-fontello/font/bask-info-fontello.svg?33122017#bask-info-fontello') format('svg');
      font-weight: normal;
      font-style: normal;
    }

  
    .bask-info-webfont
    {
      font-family: "bask-info-fontello";
      font-style: normal;
      font-weight: normal;
      speak: none;
      font-size:0.9em;
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      margin-top: 0.2em;
      text-align: center;
      /* opacity: .8; */
     
      /* For safety - reset parent styles, that can break glyph codes*/
      font-variant: normal;
      text-transform: none;
     
      /* fix buttons height, for twitter bootstrap */
      line-height: 1em;
     
      /* Animation center compensation - margins should be symmetric */
      /* remove if not needed */
      margin-left: .2em;
     
      /* You can be more comfortable with increased icons size */
      /* font-size: 120%; */
     
      /* Font smoothing. That was taken from TWBS */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
     
      /* Uncomment for 3D effect */
      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
    }

li {
    line-height: 1.5em;
}





/* header */

.hamburger-nav {
 background-color: #DEDEDE;
 box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
 width: 100%;
 z-index: 3;
 display: block;
 margin: 0 auto;
 max-width: 79em;
}

.nav-menu-title-container {
margin: 0 0.7em;
background-color: #9D0A0E;
}

.hamburger-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #9D0A0E;
  text-align: left;

}


.hamburger-nav ul li
{list-style-type:none;
}


.hamburger-nav ul li .menuclass {
font-size: 1.5em;
}

.hamburger-nav ul li a:before {	
	font-family: "bask-info-fontello";
	content: "\e816";
	float: left;
	width: 1.4em;
	padding-right: 1.5em;
}

.menu-name-1:before, .hamburger-nav ul li a.activeclass-1:before, .hamburger-nav ul li a.menuclass-1:hover:before {
	content: "\e814";
}

.hamburger-nav ul li a.activeclass-2:before, .hamburger-nav ul li a.menuclass-2:hover:before {	
	content: "\e813";
}

.hamburger-nav ul li a.activeclass-3:before, .hamburger-nav ul li a.menuclass-3:hover:before {	
	content: "\e810";
}

.hamburger-nav ul li a.activeclass-4:before, .hamburger-nav ul li a.menuclass-4:hover:before {	
	content: "\e815";
}

.hamburger-nav ul li a.activeclass-5:before, .hamburger-nav ul li a.menuclass-5:hover:before {	
	content: "\e805";
}

.hamburger-nav ul li a.activeclass-6:before, .hamburger-nav ul li a.menuclass-6:hover:before {	
	content: "\e80f";
}
.hamburger-nav ul li a.activeclass-7:before, .hamburger-nav ul li a.menuclass-7:hover:before {	
	content: "\e80e";
}

.hamburger-nav ul li a.activeclass-8:before, .hamburger-nav ul li a.menuclass-8:hover:before {	
	content: "\e811";
}

.hamburger-nav li a {
  display: block;
  padding: 1em 1em;
  text-decoration: none;
  color: #fff;
  font-weight: normal;
  font-size: 1.25em;
}

.hamburger-nav li a.activeclass {
  color: #21C0F8;
  }

.hamburger-nav li a:hover,
.hamburger-nav .menu-btn:hover {
  color: #21C0F8;
}

.hamburger-nav .logo {
  display: block;
  float: left;
  font-size: 2em;
  padding: 10px 20px;
  text-decoration: none;
}

/* menu */

.hamburger-nav .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.hamburger-nav .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 1.8em 1em;
  position: relative;
  user-select: none;
  margin-right: 0.5em;
}

.hamburger-nav .menu-icon .navicon {
  background: #DEDEDE;
  display: block;
  height: 3px;
  position: relative;
  transition: background .2s ease-out;
  width: 2.5em;
}

.hamburger-nav .menu-icon .navicon:before,
.hamburger-nav .menu-icon .navicon:after {
  background: #DEDEDE;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}


.hamburger-nav .menu-icon .navicon:before {
  top: 8px;
}

.hamburger-nav .menu-icon .navicon:after {
  top: -8px;
}

.menu-name {
    font-size: 2em;
    color: #DEDEDE;
    float: left;
    margin: 0.34em;
    margin-left: 0.7em;
}


/* menu btn */

.hamburger-nav .menu-btn {
  display: none;
}

.hamburger-nav .menu-btn:checked ~ .menu {
  max-height: 100%;
}

.hamburger-nav .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.hamburger-nav .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.hamburger-nav .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.hamburger-nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.hamburger-nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

.menuspace {display:inline-block}


@media screen and (min-width: 600px) {

.hamburger-nav {
    width: 100%;
}

.nav-menu-title-container {
    padding-bottom: 0;
    }


.hamburger-nav ul {
padding-bottom: 0.7em;
padding-top: 0.7em;
text-align: center;
}

  .hamburger-nav li {
   display: inline-block;
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
  }
  .hamburger-nav li a {
    padding: 0.4em 0.9em 0.4em 0.9em;
  }
  
  .hamburger-nav ul li a:before {	
	padding-right: 0;
}
  
  
  
  .nav-menu-title-container {
margin: 0 1.5em;
}
  .hamburger-nav .menu {
	clear: none;
	max-height: none;
	background-color: #9D0A0E;
	margin: 0 1.5em 0 1.5em;
	}
  
  .hamburger-nav .menu-icon {
    display: none;
  }
}

@media screen and (min-width: 800px) {
.hamburger-nav li a {
font-size: 1.55em
}
}