/* FONTS */
@font-face {
    font-family: 'Messina Sans';
    src: url('/font/MessinaSans-Bold.woff2') format('woff2'),
         url('/font/MessinaSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Messina Sans';
    src: url('/font/MessinaSans-Regular.woff2') format('woff2'),
         url('/font/MessinaSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Messina Sans';
    src: url('/font/MessinaSans-Light.woff2') format('woff2'),
         url('/font/MessinaSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

:root {
  --gray1: #1A1C1E;
  --gray2: #726e68;
  --gray3: #A5A093;
  --gray4: #DBD7D0;
  --gray5: #F2EFEB;
  --yellow1: #BDA545;
  --green1: #428891;
  --red1: #B1444A;
  --bg-color: #DAD7D1;
  --cantina1: #D2A5AB;
  --cantina2: #BE5462;
  --cantina3: #7B2339;
}

* {
  /* transition: all .5s; */
}

html, body {
  font-family: 'Messina Sans';
  overflow-x: hidden;
  height: 100%;
  width: 100%;
}

body {
  background-color: var(--gray1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: hidden;
}

audio {
  display: none;
}

h1, h2, h3, h4, h5, p {
  color: var(--gray4);
}

p {
  text-transform: uppercase;
  text-align: left;
  font-weight: 100;
  letter-spacing: 3px;
}

a {
  font-weight: 900;
  color: var(--gray4);
}

.social {
  color: var(--gray4);
  text-transform: uppercase;
  font-weight: 800;
  text-decoration: none;
  margin-bottom: 1rem;
}

.social::after {
  content: '';
  width: 100%;
  display: block;
  border-top: 1px solid;
  animation-name: underline;
  animation-delay:  1.5s;
  animation-duration: 2.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: backwards;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes underline {
  from {width: 0%;}
  to {width: 100%;}
}

/* Standard syntax */
@keyframes underline {
  from {width: 0%;}
  to {width: 100%;}
}

#facebook {
  width: 25px;
  height: 25px;
  margin-left: 3px;
  position: relative;
  top: -4px;
}

.button {
  background-color: var(--gray1);
  color: var(--gray4);
  width: 60%;
  padding: 2rem 1rem;
  border-radius: 20px;
  border: 1px solid;
  cursor: pointer;
}

.block-message {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.block-message h4 {
  color: var(--gray4);
  padding: 0 1rem;
  text-transform: uppercase;
  text-align: center;
}

.block-message a {
  color: var(--gray5);
  width: 200px;
  text-align: center;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes appear {
  from {height: 0px;}
  to {height: 320px;}
}

/* Standard syntax */
@keyframes appear {
  from {height: 0px;}
  to {height: 320px;}
}

.logo-container {
  width: 75%;
  overflow: hidden;
  text-align: center;
  height: 0;
  opacity: 0;
  transition: all 1.5s ease-in-out;
  /* animation-name: appear;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards; */
}


.logo-container h4 {
  text-transform: uppercase;
  letter-spacing: 5px;
  font-weight: 100;
  color: var(--gray4);
}

.logo-container img {
  width: 100%;
}

.start-container {
  display: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  width: 100%;
  text-align: center;
  transition: all .5s;
}

#loading-spinner {
  color: var(--gray5);
  width: 80px;
  height: 80px;
}

#start-button {
  display: none;
  background-color: var(--gray1);
  color: var(--gray4);
}

#choose-experience-dialog {
  display: none;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#choose-experience-dialog > h5 {
  font-weight: 100;
}

#choose-experience-dialog > .flex-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

#choose-experience-dialog > .flex-row > .button {
  margin: 1rem;
}

.listening {
  display: none;
  width: 100%;
  text-align: center;
  justify-content: center;
}

@keyframes pulse {
  from: { transform: scale(1); }
  to { transform: scale(1.2); }
}

@-webkit-keyframes pulse {
  from: { transform: scale(1); }
  to { transform: scale(1.2); }
}

@-o-keyframes pulse {
  from: { transform: scale(1); }
  to { transform: scale(1.2); }
}

.listening-logo img {
  width: 60%;
  opacity: .7;
  -webkit-animation: pulse 3s ease-in-out infinite alternate;
     -moz-animation: pulse 3s ease-in-out infinite alternate;
      -ms-animation: pulse 3s ease-in-out infinite alternate;
       -o-animation: pulse 3s ease-in-out infinite alternate;
          animation: pulse 3s ease-in-out infinite alternate;
  /* animation-name: pulse;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  animation-iteration-count: infinite; */
}

.listening-buttons {
  position: absolute;
  top: 50px;
  width: 100%;
  justify-content: space-around;
  align-items: center;
}

.listening-buttons .listening-btn {
  background-color: var(--gray1);
  color: var(--gray4);
}

.listening-contacts {
  position: absolute;
  bottom: 50px;
  width: 100%;
  justify-content: space-around;
  align-items: center;
}

.listening-contacts > p {
  color: var(--gray4);
  padding: 1rem;
  font-weight: 100;
  font-style: italic;
}

.pause-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  display: none;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-color: rgba(26, 28, 30, .9);
  /* background-color: rgba(0, 0, 0, .8); */
}

.pause-overlay > h6 {
  text-transform: uppercase;
  letter-spacing: 5px;
  font-weight: 100;
  color: var(--gray4);
}

.pause-overlay > .pause-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 10;
}

.pause-overlay > .pause-buttons > .button {
  width: 60%;
  margin: 1rem 0;
  color: var(--gray5);
  background-color: var(--gray1);
  z-index: 10;
  cursor: pointer;
}

.pause-overlay > img {
  width: 40%;
}

#contacts-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--gray1);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

#contacts-overlay > .button {
  margin: 2rem 0;
}

#close-contacts-button {
  cursor: pointer;
  position: absolute;
  padding: 0 1rem;
  font-size: 2.5rem;
  color: var(--gray4);
  top: 0;
  right: 0;
}