#landing-header {
  position: relative;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding: 10px 115px;
  z-index: 9999;
  transition: 0.3s all ease;
}
#landing-header .header-logo {
  display: inline-block;
}
#landing-header .header-navi {
  display: inline-block;
  float: right;
  margin: 11px 0;
}
#landing-header .header-navi ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#landing-header .header-navi ul li {
  display: inline-block;
}
#landing-header .header-navi ul li a {
  padding: 15px 40px 15px 0;
  display: inline-block;
  color: #fff;
  text-decoration: none;
}
#landing-header .header-navi ul li.cta a {
  padding: 15px 30px;
  background: #373851;
  border-radius: 3px;
  transition: 0.3s all ease;
}
#landing-header .header-navi ul li.cta a:hover {
  background: #222333;
  color: #fff;
}
#landing-header #toggleNav {
  display: none;
  line-height: 50px;
  color: #eee;
  font-size: 28px;
  float: right;
  margin: 11px 0;
}
#landing-header.active {
  background: #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
#landing-header.active #toggleNav {
  color: #333;
}
#landing-header.active .header-navi ul li a {
  color: #333;
  outline: none;
}
#landing-header.active .header-navi ul li.cta a {
  color: #fff;
}
body.admin-bar #landing-header {
  top: 32px;
}
@media all and (max-width: 1200px) {
  #landing-header {
    padding: 10px 60px;
  }
  #landing-header #toggleNav {
    display: inline-block;
  }
  #landing-header .header-navi ul {
    display: none;
  }
  #landing-header .header-navi ul li.cta a {
    padding: 15px 30px;
    background: white;
    border-color: black;
    color: black;
    border-radius: 3px;
    transition: 0.3s all ease;
  }
  #landing-header .header-navi.active {
    float: none;
    display: block;
    width: 100%;
    clear: both;
  }
  #landing-header .header-navi.active ul {
    display: block;
    clear: both;
    width: 100%;
  }
  #landing-header .header-navi.active ul li {
    width: 100%;
    display: block;
    clear: both;
    text-align: center;
  }
  #landing-header .header-navi.active ul li:not(.cta) a {
    padding: 15px 0;
  }
  #landing-header.active .header-navi ul li.cta a {
    color: black;
  }
  #landing-header.active .header-navi ul li.cta a:hover {
    background-color: white;
  }
}
