/*
///////////////////////////////
// Fonts
//
*/
@font-face {
  font-family: "Arnhem";
  src: url("../fonts/ArnhemPro/ArnhemPro-Blond.eot");
  src: url("../fonts/ArnhemPro/ArnhemPro-Blond.woff") format("woff"),
  url("../fonts/ArnhemPro/ArnhemPro-Blond.otf") format("opentype"),
  url("../fonts/ArnhemPro/ArnhemPro-Blond.ttf") format("truetype");
}

.text-wrapper {
  color: #ffffff;
  font-family: 'Arnhem', serif;
  font-size: 38px;
  line-height: 1.35;
  text-shadow:2px 2px 2px rgba(0, 0, 0, 0.75);
  text-align: center;
  padding: 10px 20px;
  max-width: 800px;
}

@media only screen and (min-width: 768px) {
  .text-wrapper {
    font-size: 40px;
    line-height: 1.40;
  }
}

@media only screen and (min-width: 992px) {
  .text-wrapper {
    font-size: 45px;
    line-height: 1.46;
  }
}


/*
///////////////////////////////
// Animation keyframes
//
*/

/* image panning - will last ~14 seconds but may vary per day*/
@-webkit-keyframes panning {
  0% { background-position: top; }
  100% { background-position: center; }
}
@-moz-keyframes panning {
  0% { background-position: top; }
  100% { background-position: center; }
}
@-o-keyframes panning {
  0% { background-position: top; }
  100% { background-position: center; }
}
@keyframes panning {
  0% { background-position: top; }
  100% { background-position: center; }
}

/* fade in from black - will last 4 seconds */
@-webkit-keyframes overlay {
  0% { opacity: 1; }
  100% { opacity: 0;}
}
@-moz-keyframes overlay {
  0% { opacity: 1; }
  100% { opacity: 0;}
}
@-o-keyframes overlay {
  0% { opacity: 1; }
  100% { opacity: 0;}
}
@keyframes overlay {
  0% { opacity: 1; }
  100% { opacity: 0;}
}

/*  fade in/out of first block of text - will last 4 seconds */
@-webkit-keyframes textfirst {
  0% { opacity: 0; }
  5% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}
@-moz-keyframes textfirst {
  0% { opacity: 0; }
  5% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}
@-o-keyframes textfirst {
  0% { opacity: 0; }
  5% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes textfirst {
  0% { opacity: 0; }
  5% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

/*  fade in/out of second block of text - will last 6 seconds */
@-webkit-keyframes text {
  0% { opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}
@-moz-keyframes text {
  0% { opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}
@-o-keyframes text {
  0% { opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes text {
  0% { opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

/*  fade in of last block of text - will last 8 seconds (longer because it stays on screen) */
@-webkit-keyframes textlast {
  0% { opacity: 0; }
  25% { opacity: 1; }
  95% { opacity: 1; }
  100% { opacity: 0; }
}
@-moz-keyframes textlast {
  0% { opacity: 0; }
  25% { opacity: 1; }
  95% { opacity: 1; }
  100% { opacity: 0; }
}
@-o-keyframes textlast {
  0% { opacity: 0; }
  25% { opacity: 1; }
  95% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes textlast {
  0% { opacity: 0; }
  25% { opacity: 1; }
  95% { opacity: 1; }
  100% { opacity: 0; }
}

/*
///////////////////////////////
// Layout & Animation effects
//
*/

body {
  margin: 0;
  padding: 0
}

/*  the transparent png used to set the size/ratio of the container */
.image-pan img {
  /*max-width: 100%;*/
  width: 100%;
  height: auto;
  vertical-align: middle;
  margin: 0;
  padding: 0;
}

.image-pan img.desktop-ratio {
  display: none;
}

/*  the image pan animation */
.image-pan {
  position:relative;
  width: 100%;
  margin: 0 auto;
  background-repeat: no-repeat;
  /* name, duration, timing, delay, fill-mode (hold it at the end) */
  -webkit-animation: panning 10s linear 2s forwards;
  -moz-animation: panning 10s linear 2s forwards;
  -o-animation: panning 10s linear 2s forwards;
  animation: panning 10s linear 2s forwards;
}

/*  the fadein animation */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: #000000;
  /* name, duration, timing, delay, fill-mode (hold it at the end) */
  -webkit-animation: overlay 10s linear 2s forwards;
  -moz-animation: overlay 10s linear 2s forwards;
  -o-animation: overlay 10s linear 2s forwards;
  animation: overlay 10s linear 2s forwards;
}

/*  center the animated text blocks both horizontally and vertically */
.textblock {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;

  display:flex;
  align-items: center;
  justify-content: center;
}

/*  the text animations unique to each textblock */
.textblock.textblock-1 {
  opacity: 1;
  /* name, duration, timing, delay, fill-mode (hold it at the end) */
  -webkit-animation: textfirst 4s linear 0s forwards;
  -moz-animation: textfirst 4s linear 0s forwards;
  -o-animation: textfirst 4s linear 0s forwards;
  animation: textfirst 4s linear 0s forwards;
}

.textblock.textblock-2 {
  /* name, duration, timing, delay, fill-mode (hold it at the end) */
  -webkit-animation: text 6s linear 3.75s forwards;
  -moz-animation: text 6s linear 3.75s forwards;
  -o-animation: text 6s linear 3.75s forwards;
  animation: text 6s linear 3.75s forwards;
}

.textblock.textblock-3 {
  /* name, duration, timing, delay, fill-mode (hold it at the end) */
  -webkit-animation: textlast 8s linear 9.75s forwards;
  -moz-animation: textlast 8s linear 9.75s forwards;
  -o-animation: textlast 8s linear 9.75s forwards;
  animation: textlast 8s linear 9.75s forwards;
}

/*
///////////////////////////////
// Layout & Animation effects for non-mobile displays
//
*/

@media only screen and (min-width: 576px) {
  .image-pan img.mobile-ratio {
    display: none;
  }
  .image-pan img.desktop-ratio {
    display: block;
  }
}