/*********************************/
/**  HOME PAGE CSS DEFINITIONS  **/
/*********************************/

.slideshow-titles {
  position: absolute; display: block; width: 100%; height: 300px; z-index: 99;
  left: 50%; bottom: 140px; transform: translateX(-50%);
  }
.slideshow-titles div {
  position: absolute; width: 100%; top: 190px;
  font-family: "Raleway"; font-size: 36px; line-height: 1.35; color: white; text-align: center; font-weight: 300; letter-spacing: 0.02em;
  text-shadow: 0px 0px 8px #000000;
  opacity: 0;
  animation-name: fadeTitles;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-duration: 48s;
  }
.slideshow-titles div:nth-child(1) { animation-delay: 0s; }
.slideshow-titles div:nth-child(2) { animation-delay: 8s; }
.slideshow-titles div:nth-child(3) { animation-delay: 16s; }
.slideshow-titles div:nth-child(4) { animation-delay: 24s; }
.slideshow-titles div:nth-child(5) { animation-delay: 32s; }
.slideshow-titles div:nth-child(6) { animation-delay: 40s; }

.slideshow-titles div strong { font-weight: 600; }
.slideshow-titles div a { text-decoration: none; font-weight: 600; color: white; font-size: inherit; }
.slideshow-titles div a:hover { color: white; }

@keyframes fadeTitles {
  0% { opacity: 0;  }
  1% { opacity: 0;  }
  10% { opacity: 1;  }
  15% { opacity: 1;  }
  20% { opacity: 0;  }
  100% { opacity: 0;  }
  }

.slideshow-logo {
  position: absolute; display: block; width: 600px; bottom: 40%; transform: translateY(-50%);
  left: 50%; transform: translateX(-50%); z-index: 999; opacity: 0; z-index: 5;
  text-shadow: 0px 0px 8px #00000088; -webkit-filter: drop-shadow( 0px 0px 8px rgba(0, 0, 0, .7)); filter: drop-shadow( 0px 0px 8px rgba(0, 0, 0, .7));
  animation: fadeIn 2s forwards; animation-duration: 2s;
  }
@keyframes fadeIn {
  0% { opacity: 0; }
  15% { opacity: 0; }
  100% { opacity: 0.8; }
  }
@keyframes fadeInFull {
  0% { opacity: 0; }
  15% { opacity: 0; }
  100% { opacity: 1.0; }
  }
@media screen and (min-width: 1200px) {
  .slideshow-titles div { font-size: 36px; transition: 0.2s; }
  .slideshow-logo { width: 600px; }
  }
@media screen and (max-width: 600px) {
  .slideshow-titles { height: 180px; bottom: calc(50% - 60px); }
  .slideshow-logo { width: 60vw; bottom: 60px; }
  .slideshow-titles div { font-size: 3.6vw; line-height: 1.3; top: 125px; }
  }
/* END OF SLIDESHOW LOGO + HEADLINES */