/* Main css file for site: homepage. */

/* As recommended by SiteImprove */
.page-content p {
  line-height: 1.5;
}

/* Inspired by .landmark-section .content-box .content .date in /stylesheets/styles-formatted.css */
.home-header .transcript {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 10px 10px 0 10px;

  font-family: "Milo Pro Bold", serif;
  font-size: 1.4rem;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.88px;
  margin-bottom: 1.5rem;
  text-transform: uppercase
}

.home-header .transcript p a {
  color: #fff;
  opacity: 50%;
}

.home-header .transcript p a:hover { 
  text-decoration: underline;
  opacity: 100%;
}


@media only screen and (max-width: 992px) {
  .home-header .transcript {
    /* color: #fff; */
    font-size: 1.2rem;
    line-height: 1.67;
    letter-spacing: 0.75px;
    margin-bottom: 1.25rem;
  }
}


.jumbotron {
  /* position: relative;
  overflow: hidden; */
  /* background-color:black; */
  /* background-color: #54585a; */
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100vh;
  background-color: #c8102e;
  /* background-color: #000; */
}

.jumbotron video {
  position: absolute;
  z-index: 1;
  top: 0;
  width: 100%;
  height: 100%;
  /*  object-fit is not supported on IE  */
  object-fit: cover;
  /* opacity: 0.8; */
}

/* .jumbotron .container {
  z-index: 2;
  position: relative;
} */

/* The More Perspectives, the Better */
/* Giant background images for the modals on large screens. */
.modal#perspectives01 .modal-dialog .modal-content {
  background-image: url(/images/homepage/design/cg-cinemagraph-1200.gif);
  background-repeat: no-repeat;
  height: 720px;
}

.modal#perspectives02 .modal-dialog .modal-content {
  background-image: url(/images/homepage/design/noha-sahnoune-1600.jpg);
  height: 1067px;
}

.modal#perspectives03 .modal-dialog .modal-content {
  background-image: url(/images/homepage/design/ron-green-1600.jpg);
  height: 1067px;
}

/* @media only screen and (max-width: 992px) { */
@media only screen and (max-width: 992px) {
  .modal#perspectives01 .modal-dialog .modal-content, .modal#perspectives02 .modal-dialog .modal-content, .modal#perspectives03 .modal-dialog .modal-content {
    background-image: none;
    background-color: #888b8d;
    height: 800px;
  }
}

@media (min-width: 992px) {
  .modal-lg {
    max-width: 1600px;
  }

  .modal#perspectives01 .modal-lg {
    max-width: 1200px;
  }
}

/* The following was used Nov. 7-14, 2023 for WCE homepage /includes/homepage/header-home.php announcement */
.container .content h2.sub {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 3.8rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: center;
  color: #fff;
  text-transform: none;
}

@media only screen and (max-width: 1200px) {
  .container .content h2.sub {
    font-size: 2.5rem;
  }
}

/* Hide homepage image before video ends, when it does end the image is swapped in */
#image_title {
    display: none;
    /* width: 2560px;
    height: 1440px; */
}