@charset "UTF-8";

html, body {
  background-color: #111;
  position: relative;
}

#top_bar {
  position: fixed;
  top: 0px;
  height: 68px;
  width: 84%;
  background-color: #111;
  z-index: 4;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding: 0% 8%;
}

#main {
  margin-top: 0px;
  padding: 0% 8%;
  width: 84%;
}

h1 {
  font-family: 'Titillium Web', sans-serif;
  font-size: 22px;
  font-weight: 300;
  /*line-height: 28px;*/
  margin: 0px;
}

h1.logo {
  color: #ffffff;
  display: inline;
}

h1.tag {
  color: #ff6600;
  display: inline;
}


h3 {
  font-family: 'Titillium Web', sans-serif;
  font-size: 18px;
  font-weight: 300;
  margin: 0px;
  color: #ff6600;
  /* text-transform: uppercase; */
}

span.white {
  color: #ffffff;
}

@media screen and (max-width: 1000px) and (orientation: portrait) {
    h1.logo {
      font-size: 7vw;
      line-height: 5vw;
    }
    h1.tag {
      font-size: 7vw;
      line-height: 5vw;
    }
    #top_bar {
      padding: 0px;
      width:100%;
      height: 14vw;
    }


}

@media screen and (max-width: 1000px) and (orientation: landscape) {
    h1.logo {
      font-size: 5vw;
      line-height: 5vw;
    }
    h1.tag {
      font-size: 5vw;
      line-height: 5vw;
    }
    #top_bar {
      padding: 0px;
      width:100%;
    }


}