@media screen and (max-width: 600px) {
  body, html {
    font-size: 40%;
  }
}

@media screen and (min-width: 600px) {
  body, html {
    font-size: 43%;
  }
}

@media screen and (min-width: 800px) {
  body, html {
    font-size: 46%;
  }
}

@media screen and (min-width: 1200px) {
  body, html {
    font-size: 49%;
  }
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  text-align: right;
  transition: 200ms all;
  height: 4rem;
}

header nav#normal {
  color: black;
  display: inline-block;
}

@media screen and (max-width: 800px) {
  header nav#normal {display: none;}
}

header nav#normal ul {
  margin: 0;
  padding: 0;
  transition: all 300ms;
  display: inline-block;
}

header nav#normal ul li {
  margin: 0;
  padding:0;
  float: left;
  list-style: none;
  position: relative;
  transition: all 300ms;
}

header nav#normal ul li a {
  display: inline-block;
  padding: 2.17rem;
  float: left;
  min-width: 12rem;
  text-align: center;
  font-size: 2rem;
  color: #ffffff;
  margin: 0 1px 0 0;
  text-decoration: none;
  background: #303030;
  font-weight: 300;
  transition: all 300ms;
  font-family: 'Arial', sans-serif;
}

header nav#normal ul li:hover > a {
  background: #13705b;
}

header nav#normal ul li ul {
  overflow: hidden;
  position: absolute;
  top:100%;
  left: 0;
  width: 100%;
  transition: 300ms all;
  max-height: 0;
}

header nav#normal ul li ul li {
  border-bottom: 1px solid #8c1e31;
}

header nav#normal ul li:hover > ul {
  max-height: 700px;
}





header nav#mobile  {
  color: black;
  display: none;
}

@media screen and (max-width: 800px) {
  header nav#mobile { display: block;}
}

header nav #menu {
  padding: 2.17rem 5% 2.17rem 5%;
  float: left;
  width: 90%;
  text-align: center;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  font-weight: 300;
  transition: all 500ms;
  font-family: 'Arial', sans-serif;
}

header nav#mobile ul {
  width: 100%;
  margin: 0;
  padding: 0;
  max-height: 0;
  transition: all 500ms;
  overflow: hidden;
  float: left;
}

header nav#mobile:hover > ul {
  max-height: 800px;
}

header nav#mobile ul li {
  margin: 0;
  padding:0;
  float: left;
  width: 100%;
  list-style: none;
  position: relative;
  transition: all 500ms;
}

header nav#mobile ul li a {
  display: inline-block;
  padding: 2.17rem 5% 2.17rem 5%;
  float: left;
  min-width: 12rem;
  width: 90%;
  text-align: center;
  font-size: 2rem;
  color: #fff;
  text-decoration: none;
  background: black;
  font-weight: 300;
  transition: all 500ms;
  font-family: 'Arial', sans-serif;
}

header nav#mobile ul li:hover > a {
  background: #8c1e31;
}

header nav#mobile ul li ul {
  width: 100%;
  transition: all 500ms;
  max-height: 0;
  overflow: hidden;
  float: left;
}

header nav#mobile ul li ul li {
  display: block;
  float: left;
  background: #8c1e31;
  transition: all 500ms;
}

header nav#mobile ul li ul li a {
  background: #8c1e31;
}

header nav#mobile ul li:hover > ul {
  max-height: 500px;
}