/*------------------------------------*\
    $HOMEPAGE
\*------------------------------------*/
.slider-1 .slick-arrow {
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0;
  cursor: pointer;
  width: 60px;
  height: 60px;
  background: none;
  border: none;
}
.slider-1 .slick-arrow::before {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  background-color: white;
}
.slider-1 .slick-arrow:hover {
  background-color: rgba(0, 88, 158, 0.8);
}

.slider-1 .slick-prev {
  left: 0;
}
.slider-1 .slick-prev::before {
  -webkit-mask: url(../images/arrow_carrot-left.svg) center/contain no-repeat;
  mask: url(../images/arrow_carrot-left.svg) center/contain no-repeat;
}

.slider-1 .slick-next {
  right: 0;
}
.slider-1 .slick-next::before {
  -webkit-mask: url(../images/arrow_carrot-right.svg) center/contain no-repeat;
  mask: url(../images/arrow_carrot-right.svg) center/contain no-repeat;
}

.slider-1 .slick-dots {
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  text-align: center;
}
.slider-1 .slick-dots li {
  display: inline-block;
  margin: 0 5px;
}
.slider-1 .slick-dots li button {
  font-size: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  display: block;
}
.slider-1 .slick-dots li.slick-active button {
  background-color: #0872b9;
}

.slider-1 {
  color:white;
}
.slider-1 h2 {
  margin-bottom: 15px;
  color:inherit;
}
summary {
  font-family:"Lato",sans-serif;
}
.slider-1 .slider-item > div {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  padding-bottom:40%;
  min-height:320px;
}
.slider-1 .slider-item > div::before {
  content:"";
  display:block;
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+50 */
background: -moz-linear-gradient(45deg,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
@media (min-width:1200px) {
  .slider-1 .slider-item > div {
    padding-bottom:0;
    height:480px;
  }
}
.slider-1 .slider-item .container-fluid {
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
}
figure > span,
figure > a {
  display: block;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 56.25%;
}

section article {
  background-color:white;
  height:100%;
}
section article .info {
  padding:15px 15px 25px;
}
section article .title {
  font-weight:400;
  margin-top:5px;
}
section article summary {
  margin-top:10px;
}
section article .more {
  font-weight:400;
  color:#00589E;
}
section article .more:hover {
  text-decoration:underline;
}

.content-top {
  padding:30px 0;
}
.block-title {
  font-weight:bold;
  text-align:center;
  padding:15px 0;
  
}

.yd-news .title {
  font-size:24px;
  line-height:32px;
}
.yd-news .title a:hover {
  color:#00589E;
}
.daily-bread li {
  margin-top:5px;
  background-color:white;
  position:relative;
}
.daily-bread li a {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.daily-bread .date {
  text-align:center;
  text-transform:uppercase;
  font-weight:bold;
  padding:10px 20px;
  color:#00589E;
  border-right:1px solid #eee;
}
.daily-bread .date span {
  display: block;
}
.daily-bread .date .month {
  font-size:14px;
}
.daily-bread .date .day {
  font-size:24px;
}
.daily-bread .title {
  flex: 1;
  padding:10px 15px;
  font-weight:400;
}
.daily-bread li:hover {
  background-color:#00589E;
  color:white;
}
.daily-bread li:hover .date {
  color:rgba(255,255,255,.6);
}
.gallery {
  position:relative;
  background-color:white;
  margin-bottom:30px;
}
.gallery .info {
  padding:30px;
}
.gallery summary {
  margin-bottom:30px;
}
.gallery figure > span,
.gallery figure > a {
  padding-top:70%;
}
.slider-2 .slick-dots li button {
  background-color: #e0e0e0;
}
.slider-2 .slick-dots li.slick-active button {
  background-color: #0872b9;
}
.slider-nav-item {
  cursor: pointer;
  border:5px solid transparent;
}
.slider-nav-item figure {
  background: #666;
}
.slider-nav-item span {
  mix-blend-mode: screen;
  -webkit-filter: grayscale(100%) contrast(200%);
  filter: grayscale(100%) contrast(200%);
  opacity: 1;
}
.slider-nav .slick-current span {
  /*mix-blend-mode: normal;
  -webkit-filter:none;
  filter: none;*/
}
.slider-nav .slick-current {
  border-color:#003E84;
}
/*.verse p::before {
  content:'“';
  color:rgba(255,255,255,.2);
  position:absolute;
  top:0;
  left:0;
  font-style:normal;
  font-weight:bold;
  font-size:100px;
}*/
.programs li {
  margin-bottom:30px;
  overflow:hidden;
}
.programs .info {
  position:relative;
  height:100%;
}
.programs .info a {
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.programs article {
  position:relative;
}
.programs article:hover .info {
  background-color:#00589E;
  color:white;
}
.programs article:hover .topic {
  color:rgba(255,255,255,.6);
}
.programs .title {
  font-size:20px;
  line-height:26px;
}
/*.programs figure {
  background: #00589E;
}
.programs figure a {
  mix-blend-mode: screen;
  -webkit-filter: grayscale(100%) contrast(200%);
  filter: grayscale(100%) contrast(200%);
  opacity: 1;
}*/

@media only screen and (min-width: 768px) {
  .daily-bread {
    height:100%;
  }
  .slider-nav {
    margin-bottom:30px;
  }
}
@media only screen and (min-width: 1024px) {
  .slider-nav figure > span {
    padding-top:75%;
  }
}
@media only screen and (max-width: 767px) {
  .programs article {
    display:flex;
  }
  .programs figure {
    width: 40%;
  }
  .programs .info {
    flex: 1;
  }
}
@media only screen and (max-width: 600px) {
  .programs figure > a {
    padding-top:0;
    height:100%;
  }
}