.jech-content {}

/* s1 */
.s1 {position: relative; top: 0; left: 0; padding: 3.5em 0 5em; box-sizing: border-box;}
.col-md-4 > div.s1-box-top {width: 100%; height: 0;padding-top: calc(268/480*100%); position: relative; top: 0; left: 0; box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;}
.col-md-4 > div.s1-box-top > div {display: none; width: 100%;height: 100%; padding: 1em 20px; color: #fff;}
.col-md-4 > div.s1-box-top h2 {font-size: 2.6rem; line-height: 1.8;}
.col-md-4 > div.s1-box-top p {font-size: 1.8rem; letter-spacing: 2px;}

.s1-left > div.s1-box-top { background: url(../../jech_layout/Images/sermon_bg_1.png)no-repeat center/cover;}
.s1-mid > div.s1-box-top { background: url(../../jech_layout/Images/sermon_bg_2.png)no-repeat center/cover;}
.s1-right > div.s1-box-top { background: url(../../jech_layout/Images/sermon_bg_3.png)no-repeat center/cover;}

.col-md-4 > div.s1-box-btm {box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; width: 100%; height: 104px; position: relative; top: 0; left: 0;display: block; background: url(../../../Layouts/jech_layout/Images/sermon_title_bg.png) no-repeat center/cover; }
.col-md-4 > div.s1-box-btm > div {display: block; width: 100%;height: 100%; padding: 1em 20px; color: #fff;}
.col-md-4 > div.s1-box-btm h3 {font-size: 2rem; font-weight: normal; line-height: 2; color: #fff;}
.col-md-4 > div.s1-box-btm p {color: #fff;}
.col-md-4 > div.s1-box-btm img.plyBtn { transition: all .25s ease-in-out; position: absolute; right: 0;position: absolute; right: 20px; top: 55%;}
.col-md-4 > div.s1-box-btm img.plyBtn:hover {transform: translateY(-5px);}

/* s2 */
.s2 {background: #F6F6EE; padding: 3em 0; box-sizing: border-box;}
.s2 ul {justify-content: space-around;}
.s2 ul li {}
.s2 ul > li > a, .s2 ul > li > a > img {display: block; width: 100%; height: 100%; text-align: center; transition: all .35s ease-in-out;}
.s2 ul li a img {padding-bottom: 1.5em;}
.s2 ul > li > a > p {color: #4D2823; font-size: 2.2rem; font-weight: bold;}
.s2 ul li a:hover img {transform: translateY(-10px);} 

/* s3 */
.s3 {background:  url(../../jech_layout/Images/gallery_bg.png)no-repeat center/cover; margin: 3.5em auto 0; padding: 3em 0; box-sizing: border-box;}
.s3 > div.container {overflow: hidden;}
#s3Swiper {position: relative; top: 0; left: 0;}
#s3Swiper .swiper-slide > a {display: block; width: 100%; height: 100%; position: relative; top: 0; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;transition: all .35s ease-in-out;}
#s3Swiper .swiper-slide a > img { max-width: 100%; width: 100%; display: block; height: 215px; object-fit: cover; object-position: center; }
#s3Swiper .swiper-slide a::after {content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0;}
#s3Swiper .swiper-slide a:hover::after {opacity: .5;}
#s3Swiper .swiper-slide a:hover { box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}
#s3Swiper .swiper-slide a p {width: 100%; position: absolute; top: 50%; transform: translateY(-50%); text-align: center; color: #fff; opacity: 0;}
#s3Swiper .swiper-slide a:hover p {opacity: 1; z-index: 1;}

.swiper-button-next:after, .swiper-button-prev:after {display: none;}
.swiper-button-next {right: -5px;} 
.swiper-button-prev {left: -5px;} 
.swiper-button-next img, .swiper-button-prev img {max-width: 45px;}


/* responsive */
@media (max-width:1499px) {
    #s3Swiper .swiper-slide a > img {height:175px;}
}


@media (max-width: 1199px) {
    .col-md-4 > div.s1-box-top h2 {font-size: 1.1em; }
    .col-md-4 > div.s1-box-top p { font-size: .8em; letter-spacing: normal;}
    .col-md-4 > div.s1-box-btm h3 {font-size: 1em; }
    .col-md-4 > div.s1-box-btm p { font-size: .8em; }

    .col-md-4 > div.s1-box-btm img.plyBtn {width: 2em;}

    #s3Swiper .swiper-slide a > img { height: 140px; }
}


@media (max-width: 991px) {
    .s1 {padding: 3em 0;}
    .s1 > div.container {width: 100%;}


    .s2 ul { justify-content: space-between; }
    .s2 ul li a img { max-width: 3.5em; margin: 0 auto;}
    .s2 ul > li > a > p {font-size : 1em;}

    .s1 .container .flex > div {
        width:33%;
    }

    #s3Swiper .swiper-slide a > img { height: 150px; }
}


@media(max-width: 767px) {
    .s1 div.flex {flex-direction: column;}
    .s1 div.flex > div {width: 100%; margin-bottom: 1em;}

    .s1 .container .flex > div {
        width: 100%;
    }

    #s3Swiper .swiper-slide a > img { height: 195px; }
}


@media (max-width: 414px) {
    .slider .move-btn {display: none!important;} 

    .s2 {padding: 1.5em 0;}
    .s2 ul li a img {max-width: 3em;}
    .s2 ul > li > a > p {font-size: .7em; }

}