/* - - site-wide - - */

.page-title,
h1 {
  text-align: left;
  font-family: "TradeGothicLTW05-BdCnNo.20";
  font-size: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0;
  color: #262626;
  letter-spacing: .5px;
  font-weight: normal;
}

h1 {
  font-size: 3.5rem
}

.banner-title {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, .5)) !important;
}

#white-background h2,
#image-background h2,
#gray-background h2,
#blue-background h2,
#research-focus-areas h2,
#testimonial h2 {
  font-family: "TradeGothicLTW05-BdCnNo.20";
  font-size: 2.5rem;
  font-weight: normal;
}

.form-submit-border {
  margin-bottom: 2rem
}

.btn {
  white-space: normal ! important;
}


/* - - makes top nav menu fit at in-between screensize - - */


@media (min-width: 768px) and (max-width: 840px) {
  .header-top-secondary .col-md-6:last-of-type .nav .nav-item:nth-child(3) {
    display: none;
  }
}


/* - - makes video embeds responsive and take up full width of container element - - */

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 0;
  height: 0;
  margin-bottom: 2rem;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* - - styling forms - - */

@media (max-width: 767.98px) {

  .page-title,
  h1 {
    font-size: 2.5rem;
  }

  #white-background h2,
  #image-background h2,
  #gray-background h2,
  #blue-background h2,
  #research-focus areas h2,
  #testimonial h2 {
    font-size: 2rem;
  }
}

@media (min-width: 540px) {
  .site-header .logo img {
    max-height: 57px;
    max-width: inherit;
    width: auto;
  }
}

@media (max-width: 577.98px) {
  img.img-left {
    float: none !important
  }
}

.page-title {
  text-align: left;
}


.site-footer h3,
.site-footer .footer-menu {
  text-align: center
}

/* - - reusable features - - */


.event-listing {
  clear: both;
  padding: 15px 0;
  border-top: 1px solid #ccc;
}

.event-block {
  background-color: #eee;
  width: 70px;
  padding: 10px;
  text-align: center;
  float: left;
  margin: 0 15px 15px 0;
}

.event-month {
  font-weight: bold;
}

.event-day {
  font-size: 28px;
  line-height: 24px;
}

.cta-button-group {
  padding-bottom: 1rem;
  clear: both;
}

.cta-button-group .btn {
  min-width: 220px;
  padding: 1rem;
  margin: 1rem;
}

@media (max-width: 767.98px) {
  .cta-button-group .btn {
    margin: 1rem 0 !important;
  }
}

@media (max-width: 576.98px) {
  .site-footer .cta-buttons a {
    margin: 10px 0;
  }
}



.story-boxes .card:nth-child(1) .card-title {
  border-bottom: 6px solid #59C3C3;
}

.story-boxes .card:nth-child(2) .card-title {
  border-bottom: 6px solid #F9C80E;
}

.story-boxes .card:nth-child(3) .card-title {
  border-bottom: 6px solid #354CA1;
}

.story-boxes .card:nth-child(4) .card-title {
  border-bottom: 6px solid #354CA1;
}

.stats-boxes .card {
  border: 0;
  background-color: transparent;
}

.stats-boxes .card-title {
  font-size: 5rem;
  font-weight: bold;
  text-align: center;
  padding-bottom: 0 !important;
}

.stats-boxes .card-body {
  text-align: center;
  font-size: 1.25rem;
  color: #333;
  font-weight: 600;
}

.stats-boxes .card:nth-child(1) .card-body {
  background-color: #354CA1;
  color: white;
}

.stats-boxes .card:nth-child(2) .card-body {
  background-color: #F9C80E;
  color: #354CA1;
}

.stats-boxes .card:nth-child(3) .card-body {
  background-color: #59C3C3;
  color: white;
}

.stats-boxes .card:nth-child(4) .card-body {
  background-color: #59C3C3;
  color: white;
}

@media (min-width: 768px) and (max-width: 977.98px) {
  .stats-boxes .card-title {
    font-size: 3.5rem;
  }
}

@media (max-width: 767.98px) {

  .stats-boxes .card {
    margin: 0 auto;
    padding: 0 1rem;
  }

}

#gray-background,
.gray-background {
  background-color: #e9ecef;
  padding: 2rem 0
}

#white-background {
  background-color: white;
  padding: 2rem 0
}

#white-background h2 {
  text-align: center
}

#image-background h2,
#image-background h3,
#gray-background h2,
.gray-background h2,
#gray-background h3,
.gray-background h3,
#blue-background h2,
#blue-background h3 {
  text-align: center;
  padding-bottom: 1rem
}

#blue-background {
  background-color: #354CA1;
  color: white;
  padding: 2rem 0
}

#image-background {
  background-color: white;
}

#image-background img {
  width: 100%;
  padding-bottom: 2rem;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {

  #image-background .stats-boxes {
    margin-top: -18rem;
  }
}

#news-events {
  background-color: white;
  padding: 2rem 0;
}

@media (min-width: 768px) {
  .promo-boxes.four-across .card {
    flex: 0 0 23% !important;
    margin: 0 auto;
  }

  .stats-boxes {
    padding: 0 6rem;
  }

  .stats-boxes .card {
    flex: 0 0 31% !important;
  }
}

@media (max-width: 768.98px) {

  .cta-button-group .btn {
    display: block;
    width: 100%;
  }
}

/* - - slide show that extends across the screen - - */

#slide-show-caption-lower {
  padding-bottom: 2rem;
}

#slide-show-caption-lower .carousel-control-prev,
#slide-show-caption-lower .carousel-control-next {
  bottom: 20%;
  font-size: 2rem;
}

#slide-show-caption-lower .carousel-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  padding: 10px 60px 60px;
  color: #fff;
  text-align: left;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(0, 0, 0));
  text-shadow: 2px 4px 6px #333;
  font-size: 1.25rem;
}

@media (min-width: 980px) {
  #slide-show-caption-lower .carousel-caption a {
    font-weight: 600;
    color: #59C3C3
  }

  #slide-show-caption-lower .carousel-caption h2,
  #slide-show-caption-lower .carousel-caption h3,
  #slide-show-caption-lower .carousel-caption h4 {
    color: #F9C80E;
    font-size: 1.75rem;
  }
}

@media (max-width: 979.98px) {
  #slide-show-caption-lower .carousel {
    background-color: #e9ecef
  }

  #slide-show-caption-lower .carousel-caption {
    position: inherit;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 2rem 2rem 3rem;
    color: #333;
    background-image: none;
    text-shadow: 0 0 0;
  }

  #slide-show-caption-lower .carousel-control-prev,
  #slide-show-caption-lower .carousel-control-next {
    bottom: 50%;
  }

}

#slide-show-caption-right {
  padding-bottom: 2rem;
}

#slide-show-caption-right .carousel {
  background-color: #e9ecef;
}

#slide-show-caption-right .carousel-item .carousel-caption {
  position: inherit;
  right: 0;
  left: 0;
  bottom: 0;
  color: #333;
  width: 100%;
}


@media (min-width: 768px) {

  #slide-show-caption-right .carousel-item img {
    width: 60% !important;
    float: left;
  }

  #slide-show-caption-right .carousel-item .carousel-caption {
    width: 40% !important;
    float: left;
    padding: 10% 2rem 0;
  }

}

@media (max-width: 767.98px) {
  #slide-show-caption-right .carousel-item .carousel-caption {
    padding-bottom: 2rem;
  }
}

#research-focus-areas {
  text-align: center;
}

#research-focus-areas .card {
  background-color: transparent;
  border: 0;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#research-focus-areas .card-body {
  padding: 0 1.25rem;
}

#testimonial {
  padding-bottom: 2rem
}

#testimonial .media {
  border-bottom: 0 !important;
  flex-direction: row-reverse;
  align-items: center;
  padding: 1rem 0 0 !important
}

#testimonial h2 {
  text-align: center
}

#image-full img {
  width: 100%
}



.banner-image {
background-position: center;
background-size: cover;
}

.banner-title {
margin: 0;
padding: 2rem .5rem;
color: white;
font-size: 1.75rem;
font-weight: 700;
background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(0,0,0,.3));
text-shadow: 2px 4px 6px #333;
}

.overlay, #overlay, #overlay0, #overlay1, #overlay2, #overlay3, #overlay4, #overlay5, #overlay6, #overlay7, #overlay8, #overlay9, #overlay10, #overlay11, #overlay12 {
    position: fixed;
    /* Sit on top of the page content */
    display: none;
    opacity: 1.0;
    /* Hidden by default */
    width: 80%;
    /* Full width (cover the whole page) */
    height: 80%;
    /* Full height (cover the whole page) */
    top: 5%;
    left: 10%;
    right: 10%;
    bottom: 20%;
    background-color: #000000;
    /* Black background with opacity */
    z-index: 10;
    /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer;
    /* Add a pointer on hover */
    border-width: 20px 20px;
    border-color: #00000a;
    border-style: solid; //-webkit-transition: all 2s ease-in-out;
    //-moz-transition: all 2s ease-in-out;
    //-ms-transition: all 2s ease-in-out;
    //-o-transition: all 2s ease-in-out;
    //transition: all 2s ease-in-out;
    margin-left: 0px;
    margin-right: 0px;
    // Make sure it scrolls if too much content
}

.overlay {
    position: fixed;
    /* Sit on top of the page content */
    display: none;
    opacity: 1.0;
    /* Hidden by default */
    width: 80%;
    /* Full width (cover the whole page) */
    height: 80%;
    /* Full height (cover the whole page) */
    top: 5%;
    left: 10%;
    right: 10%;
    bottom: 20%;
    background-color: #000000;
    /* Black background with opacity */
    z-index: 10;
    /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer;
    /* Add a pointer on hover */
    border-width: 20px 20px;
    border-color: #00000a;
    border-style: solid; //-webkit-transition: all 2s ease-in-out;
    //-moz-transition: all 2s ease-in-out;
    //-ms-transition: all 2s ease-in-out;
    //-o-transition: all 2s ease-in-out;
    //transition: all 2s ease-in-out;
    margin-left: 0px;
    margin-right: 0px;
    // Make sure it scrolls if too much content
}

#overlay_text {
    position: absolute;
    font-size: 4vh;
    color: #FFFFFF;
    padding-left: 10%;
    padding-right: 10%;
    vertical-align: middle;
    text-align: center;
    //line-height: 100%;
}

#overlay_text a:link,
#overlay_text a:visited,
#overlay_text a:hover {
    color: white;
    border: 3px;
    border-style: solid;
    border-color: white;
    padding: 0.25em;
}