/* Reset
-------------------------------------------------- */
*, *:before, *:after {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, main, nav, section, summary {
  display: block;
}

/* Maintenance
-------------------------------------------------- */

#frame {
  position: relative;
  background-color: #233237;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

#box {
  position: absolute;
  left: 50%;
  top: 50%;

  font-family: 'Lato', sans-serif;
  font-weight: 100;
  letter-spacing: 0.05rem;
  text-align: center;


      -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Safari */
          transform: translate(-50%, -50%);
}

#text {
  color: white;
  font-size: 1rem;
  margin: 0 3rem;
}

#text h1 {
  font-size: 2rem;
  text-transform: uppercase;
  font-weight: 100;
  margin-bottom: 0.5rem;
}

#text p {
  font-size: 1rem;
  font-weight: 300;
}

#logo {
  display: inline-block;

  height: 213px;
  width: 580px;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(img/logo.png);
}

@media screen and (max-width: 699px) {

  #box {
      width: 100%;
  }

  #logo {
    width: calc(100% - 6rem);
    margin: 0 3rem;
    height: 250px;
  }
}