/* ----------- All Device Styles (ALL) ----------- */

#homepage-section-1 {
  background-color: #fff;
}

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

.home-page-hero,
.homepage-features {
  flex: 2;
}

#latest-news-header {
  border-bottom: 1px solid #CCC;
  padding: 24px 0px 4px 0px;
  margin-top: 15px;
}

#latest-news-header h3 {
  font-weight: 700;
  color: #0A70A5;
  margin: -26px 0px 4px 0px;
  display: inline;
  padding: 0px;
  float: left;
  width: 70%;
  font-family: lato, sans-serif;
  font-size: 22px;
}

#latest-news-header h4 {
  margin: -15px 0px 4px 0px;
  padding: 0px;
  text-align: right;
  display: inline;
  float: right;
  width: 30%;
  text-transform: uppercase;
  font-size: 12px;
}

.news-snippet {
  font-size: 16px;
  color: #58595B;
}

h4.newItem a {
  color: #425563;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 20px;
}

.news_item_fp {
  padding-bottom: 1rem;
  border-bottom: 1px solid #ccc;
}

div#latest-news {
  padding-top: 30px;
}

div#latest-news .news_item_fp:last-of-type {
  border-bottom: 0px;
}

.carousel-caption {
  position: absolute;
  right: 0%;
  bottom: 0px;
  left: 0%;
  padding: 0px 25px 15px 25px;
  color: #fff;
  text-align: left;
  text-shadow: none;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.carousel-caption h2 {
  font-size: 4rem;
  color: #fff;
  font-weight: bold;
  font-family: lato, sans-serif;
}

.carousel-caption p {
  color: white;
  font-weight: 700;
  font-size: 16px;
  line-height: 23px;
}

.text-column p {
  font-weight: 500;
  padding-right: 15px;
}

/*
inspired from https://codepen.io/Rowno/pen/Afykb 
*/
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d),
(-webkit-transform-3d) {

  .carousel-fade .carousel-inner>.item.next,
  .carousel-fade .carousel-inner>.item.active.right {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .carousel-fade .carousel-inner>.item.prev,
  .carousel-fade .carousel-inner>.item.active.left {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .carousel-fade .carousel-inner>.item.next.left,
  .carousel-fade .carousel-inner>.item.prev.right,
  .carousel-fade .carousel-inner>.item.active {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.carousel-control.right,
.carousel-control.left {
  background-image: none;
}

.news_item_fp h4 a {
  color: #0C213E;
  text-transform: uppercase;
  font-size: 16px;
  line-height: initial;
  font-family: lato, sans-serif;
  font-weight: 700;
}

.news_item_fp h4 a:hover {
  color: #4E87A0;
  border-bottom: 1px solid #4E87A0;
  text-decoration: none;
}

div#latest-news-header h4 a {
  color: #6D6E70;
}

div#latest-news-header h4 a:hover {
  color: #6D6E70;
  text-decoration: underline;
}

/* End ALL */

/* ----------- Smartphone Device Styles (XS)  ----------- */

@media (max-width: 767px) {

  .text-column p {
    font-size: 14px;
    padding-left: 0;
    padding-right: 15px;
    line-height: inherit;
  }

  div#latest-news {
    padding-bottom: 30px;
  }

  .carousel-inner .item.active,
  .carousel-inner .item.active img {
    min-height: 260px;
  }

  .involved-image img {
    max-height: 60px;
  }

}

/* End XS */

/* ---------------------- Tablet styles (SM)  ---------------------- */
@media (min-width: 768px) {

  .hmpg-features-1-text p {
    font-size: 16px;
    line-height: 1.4;
  }

  .carousel {
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .news-wrapper {
    padding-right: 30px;
  }

}

/* End SM */

/* ---------------------- Tablet styles (MD)  ---------------------- */
@media (min-width: 992px) {

  .carousel {
    position: relative;
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .news-snippet {
    line-height: 23px;
  }

  div#latest-news {
    padding-top: 0px;
  }

  .carousel-caption {
    width: 100%;
  }

}

/* End MD */

/* ---------------------- Tablet styles (LG)  ---------------------- */
@media (min-width: 1200px) {

  div#latest-news {
    padding-top: 30px;
  }

  .carousel-caption {
    width: 100%;
  }

}

/* End LG */