html,
body {
  box-sizing: border-box;
  background-color: #dddddd;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
ul {
  margin-bottom: 0;
  list-style: none;
}
ul li {
  margin-bottom: 0;
}
a {
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  text-decoration: none;
}
header nav {
  background-color: #18121e;
  font-size: 30px;
  font-size: 4vw;
  width: 100%;
  z-index: 1;
  position: absolute;
  bottom: 0;
}
header nav.fixed {
  position: fixed;
  top: 0;
  bottom: inherit;
}
header nav ul li a {
  padding: .25em .5em;
  color: #984b43;
}
header nav ul li a:hover {
  color: #eac67a;
  text-decoration: none;
}
nav ul {
  display: flex;
  justify-content: center;
}
#hero {
  font-size: 72px;
  font-size: 6vw;
  padding-top: .5em;
  background-color: #233237;
  height: 100vh;
  position: relative;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
#hero-text {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  line-height: 1;
  height: 50vh;
}
#hero-text li {
  padding-top: .5em;
}
#hero-title {
  color: #984b43;
}
#hero-title .dot {
  color: #eac67a;
}
#hero-list {
  color: #eac67a;
}
#hero-shaded-overlay {
  position: absolute;
  top: -0.5em;
  /* nav offset */
  width: 100%;
  height: 50%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#233237+0,233237+100&1+0,0.4+100 */
  background: -moz-linear-gradient(top, #233237 0%, rgba(35, 50, 55, 0.4) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #233237 0%, rgba(35, 50, 55, 0.4) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #233237 0%, rgba(35, 50, 55, 0.4) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#233237', endColorstr='#66233237', GradientType=0);
  /* IE6-9 */
}
@media screen and (max-aspect-ratio: 1/1) {
  #hero {
    height: 100vw;
  }
  #hero-text {
    height: 85vw;
  }
  #hero-shaded-overlay {
    height: 85%;
  }
  header {
    position: relative;
  }
}
.typed-cursor-blink {
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#slogan,
#contact {
  font-size: 22px;
  font-size: 2vw;
}
@media screen and (min-width: 1200px) {
  #slogan,
  #contact {
    font-size: 24px;
  }
}
#slogan-inner,
#contact-inner {
  margin: 1em;
  padding: 1em;
  border: 0.5em solid #f1d9a6;
  background-color: #edcf90;
}
#slogan-start {
  font-size: 1.7em;
}
#slogan-end {
  font-size: 2em;
}
h1 {
  text-align: center;
}
#services {
  background-color: #233237;
  color: #dddddd;
  padding: 1em 0;
}
footer {
  background-color: #18121e;
  color: #dddddd;
  text-align: center;
}
textarea {
  max-width: 100%;
}
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #984b43;
  border-color: #aa544b;
}
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #86423b;
  border-color: #753a33;
}