/* ==================================== Fonts  ==================================== */
@font-face {
    font-family: 'priori-sans-bold';
    src: url(/splash-screen/fonts/ufonts.com_priori_sans_bold-webfont.eot);
    src: url(/splash-screen/fonts/ufonts.com_priori_sans_bold-webfont.eot?#iefix) format("embedded-opentype"), url(/splash-screen/fonts/ufonts.com_priori_sans_bold-webfont.woff) format("woff"), url(/splash-screen/fonts/ufonts.com_priori_sans_bold-webfont.ttf) format("truetype"), url(/splash-screen/fonts/ufonts.com_priori_sans_bold-webfont.svg#priori_sansbold) format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'prior-sans-reg';
    src: url(/splash-screen/fonts/priori-sans-regular-1361508596-webfont.eot);
    src: url(/splash-screen/fonts/priori-sans-regular-1361508596-webfont.eot?#iefix) format("embedded-opentype"), url(/splash-screen/fonts/priori-sans-regular-1361508596-webfont.woff2) format("woff2"), url(/splash-screen/fonts/priori-sans-regular-1361508596-webfont.woff) format("woff");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'mendoza-medium';
    src: url(/splash-screen/fonts/mendozaroman-medium-webfont.eot);
    src: url(/splash-screen/fonts/mendozaroman-medium-webfont.eot?#iefix) format("embedded-opentype"), url(/splash-screen/fonts/mendozaroman-medium-webfont.woff) format("woff"), url(/splash-screen/fonts/mendozaroman-medium-webfont.ttf) format("truetype"), url(/splash-screen/fonts/mendozaroman-medium-webfont.svg#itc_mendoza_romanmedium) format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'mendoza-book';
    src: url(/splash-screen/fonts/mendozaroman-book-webfont.eot);
    src: url(/splash-screen/fonts/mendozaroman-book-webfont.eot?#iefix) format("embedded-opentype"), url(/splash-screen/fonts/mendozaroman-book-webfont.woff) format("woff"), url(/splash-screen/fonts/mendozaroman-book-webfont.ttf) format("truetype"), url(/splash-screen/fonts/mendozaroman-book-webfont.svg#itc_mendoza_roman_bookregular) format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'mendoza-book-italic';
    src: url(/splash-screen/fonts/mendozaroman-bookitalic-webfont.eot);
    src: url(/splash-screen/fonts/mendozaroman-bookitalic-webfont.eot?#iefix) format("embedded-opentype"), url(/splash-screen/fonts/mendozaroman-bookitalic-webfont.woff) format("woff"), url(/splash-screen/fonts/mendozaroman-bookitalic-webfont.ttf) format("truetype"), url(/splash-screen/fonts/mendozaroman-bookitalic-webfont.svg#itc_mendoza_roman_bookitalic) format("svg");
    font-weight: normal;
    font-style: normal
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'priori-sans-bold';
        src: url(/splash-screen/fonts/ufonts.com_priori_sans_bold-webfont.svg#priori_sansbold) format("svg")
    }

    @font-face {
        font-family: 'mendoza-medium';
        src: url(/splash-screen/fonts/mendozaroman-medium-webfont.svg#itc_mendoza_romanmedium) format("svg")
    }

    @font-face {
        font-family: 'mendoza-book-italic';
        src: url(/splash-screen/fonts/mendozaroman-bookitalic-webfont.svg#itc_mendoza_roman_bookitalic) format("svg")
    }

    @font-face {
        font-family: 'mendoza-book';
        src: url(/splash-screen/fonts/mendozaroman-book-webfont.svg#itc_mendoza_roman_bookregular) format("svg")
    }

    @font-face {
        font-family: 'aptifer-sans-bold';
        src: url(/splash-screen/fonts/raleway-bold-webfont.svg#ralewaybold) format("svg")
    }
}

body {
  font-family: "prior-sans-reg", sans-serif;
}

.vimeo-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.vimeo-wrapper iframe {
  width: 100vw;
  height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
  min-height: 100vh;
  min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#start-btn {
  width: 100%;
  display: grid;
  justify-content: center;
}

#logo {
  position: absolute;
  top: 50px;
  margin: auto;
  left: 0;
  right: 0;
  width: 300px;
}

header h1 {
  position: absolute;
  top: 130px;
  text-align: center;
  width: 325px;
  right: 50%;
  transform: translate(50%);
  color: #fff;
  border-top: solid 1px #fff;
  padding: 10px 0 0 0;
  text-shadow: 2px 2px 20px #000;
  font: 50px/44px prior-sans-reg, sans-serif
}

#audio-section {
  display: grid;
  justify-content: center;
  grid-template-columns: minmax(360px, 500px);
  margin: 0px 10px;
}

#audio-container .audioplayer {
  height: 60px;
}

audio {
  position: absolute;
  bottom: 30px;
  margin: auto;
  left: 0;
  right: 0;
}

#audio-play-footer {
  height: 60px;
  background-color: #FFFA;
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  color: #273d5e;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  grid-column-gap: 10px;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  text-transform: uppercase;
  cursor: pointer;
  animation: color 2s infinite;
}

#audio-play-footer p {
  margin: 0;
  padding: 0;
}


@keyframes color {
  0% {
    background-color: #FFFA;
  }
  50% {
    background-color: #FFFF;
  }
  100% {
    background-color: #FFFA;
  }
}

header::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: block;
  height: 14px;
  background: -o-linear-gradient(left, #00698b 0%, #614495 100%);
  background: -webkit-gradient(linear, left top, right top, from(#00698b), to(#614495));
  background: linear-gradient(to right, #00698b 0%, #614495 100%);
}

header {
  background: rgb(0,0,0);
  background: -moz-linear-gradient(180deg, rgba(0,0,0,0.6418942577030813) 23%, rgba(0,0,0,0) 89%);
  background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.6418942577030813) 23%, rgba(0,0,0,0) 89%);
  background: linear-gradient(180deg, rgba(0,0,0,0.6418942577030813) 23%, rgba(0,0,0,0) 89%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 20vh;
}

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 25vh;
  min-height: 200px;
  max-height: 250px;
  background: rgb(0,0,0);
  background: -moz-linear-gradient(0deg, rgba(0,0,0,0.6418942577030813) 23%, rgba(0,0,0,0) 89%);
  background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.6418942577030813) 23%, rgba(0,0,0,0) 89%);
  background: linear-gradient(0deg, rgba(0,0,0,0.6418942577030813) 23%, rgba(0,0,0,0) 89%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}


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

  #audio-play-footer p {
    font-size: 16px;
  }
}