.mq {
  position: fixed;
  content: 'sdf';
  top: 0px;
  left: 0px;
  background-color: orange;
  background-color: rgba(255, 165, 0, 0.5);
  z-index: 1000000000000;
  color: white;
  padding: 10px; }
  @media (max-width: 479px) {
    .mq::before {
      content: 'phone'; } }
  @media (min-width: 480px) and (max-width: 767px) {
    .mq::before {
      content: 'tablet'; } }
  @media (min-width: 768px) and (max-width: 991px) {
    .mq::before {
      content: 'laptop'; } }
  @media (min-width: 992px) and (max-width: 1199px) {
    .mq::before {
      content: 'desktop'; } }
  @media (min-width: 1200px) {
    .mq::before {
      content: 'large'; } }

* {
  font-family: "sofia-pro", sans-serif; }

.haven-button {
  border-radius: 50px;
  background: #EBA687;
  border: solid 2px #EBA687;
  -webkit-transition: all 0.3s;
  /* Safari */
  transition: all 0.3s;
  font-size: 1em;
  color: white;
  -webkit-box-shadow: 10px 10px 15px 1px rgba(0, 0, 0, 0.11);
  -moz-box-shadow: 10px 10px 15px 1px rgba(0, 0, 0, 0.11);
  box-shadow: 10px 10px 15px 1px rgba(0, 0, 0, 0.11);
  text-transform: uppercase;
  padding: 15px 60px;
  margin-bottom: 15px; }
  .haven-button.lilac {
    background-color: #CCA5D1;
    border-color: #CCA5D1; }
  .haven-button.lilac:hover {
    color: #CCA5D1; }

.haven-button:hover {
  background-color: white;
  cursor: pointer; }

.mode--single header {
  height: 300px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-position: center center;
  background-size: cover;
  -webkit-transition: all, 0.3s;
  -moz-transition: all, 0.3s;
  -ms-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s; }
  .mode--single header .mode-name {
    color: white; }

.mode--single.hidden-on-load {
  display: none; }

.mode--single.playing header {
  height: 100vh; }

.back-button {
  background-color: white;
  position: absolute;
  top: 15px;
  left: 15px;
  background-color: #EBA687;
  color: white;
  border: none;
  border-radius: 15px;
  padding: 10 15px;
  text-transform: uppercase;
  font-size: 0.9rem; }

.description-heading {
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: 600;
  color: #34334F; }

.mode--single-body {
  padding: 45px 0; }

.mode--single-body p {
  font-weight: 100;
  font-size: 1.6rem; }

body {
  /*background-image: url('img/desert-duotone.png');*/
  background-size: cover;
  /*display: flex;*/
  /*align-items: center;*/
  /*justify-content: center;*/
  /*flex-direction: column;*/
  height: 100vh; }

body[data-mode="modeOne"] {
  background-image: url("img/mode-one-preview.jpg"); }

body[data-mode="modeTwo"] {
  background-image: url("img/mode-two-preview.jpg"); }

.single-view h1 {
  display: none; }

.single-view h3 {
  text-align: center; }

.index-header.single-view {
  display: none; }

section.index-header {
  background-color: #EBA687;
  background-size: cover;
  background-position: center center;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center; }

section.index-header h1 {
  color: #34334F;
  font-size: 1.5rem;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0; }

section.index-header h3 {
  color: white;
  font-weight: 100;
  font-size: 4rem; }

#section--mode-index {
  padding: 45px 0;
  margin-top: -90px; }

#stopButton {
  background: transparent;
  display: none;
  color: white; }

#stopButton:hover {
  background-color: white;
  cursor: pointer;
  color: #333; }

#controls.hidden-on-load {
  display: none; }

.grid-item--inner {
  height: 200px;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  -webkit-box-shadow: 10px 10px 15px 1px rgba(0, 0, 0, 0.11);
  -moz-box-shadow: 10px 10px 15px 1px rgba(0, 0, 0, 0.11);
  box-shadow: 10px 10px 15px 1px rgba(0, 0, 0, 0.11);
  -webkit-transition: all, 0.3s;
  -moz-transition: all, 0.3s;
  -ms-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
  margin-bottom: 30px; }
  .grid-item--inner:hover {
    transform: translateY(-15px); }

.grid-item--inner .mode-name {
  color: white;
  text-align: center; }

/*# sourceMappingURL=style.css.map */