* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Georgia, Times, Times New Roman, serif;
  color: #000;
  -webkit-transition:background 2s;
  -moz-transition:background 2s;
  -o-transition:background 2s;
  transition:background 2s;
  background-color: #67B781;
  font-size: 10vw;
  line-height:115%;
}

.menu ul li a {
  font-family: Helvetica, Arial, sans-serif;
}

@media (orientation: landscape) {
  body {
    font-size: 10vh;
    line-height:115%;
  }
}

@media (max-width: 768px) {
  body {
    padding: 20px;
  }
  #logo {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 95px;
  }  
  .nav_toggle {
    bottom: 20px;
    right: 20px;
    width: 45px;     
  }
  .menu {
    display: none;
  }  
}

@media (min-width: 768px) {
  body {
    padding: 40px;
  }

  #logo {
    position: absolute;
    bottom: 40px;
    left: 40px;
    width: 100px;
  }

  .nav_toggle {
    display: none;
  }  

  .menu {
    line-height: 1;
    position: absolute;
    bottom: 40px;
    right: 60px;
  } 

  .menu ul li {
    line-height: 1;
    display: inline;
    list-style: none;
  }
  
  .menu ul li a{
    line-height: 1;
    text-decoration: none;
    font-size: 24px;
    color: #000;
  }
}

#progress {
  height: 7px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#progress .step{
  background: #000;
  display: block;
  height: 7px;
  float: left;
}

.container {
  max-width: 88%;
  margin: 10% auto;
  display: none;
}

.menu.open {
  display: block;
  background: #000;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

.menu.open ul {
  margin: 30px 0 0 30px;
}

.menu.open ul li a{
  color: #fff;
  text-decoration: none;
  line-height: 140%;
}

.menu.open ul li a:hover{
  opacity: .8;
}

.nav_toggle {
  background: none;
  cursor: pointer;
  border: 0;
  position: absolute;
}