﻿/* slider */
.slider .slider-dots .each-dot.active{background: white!important;border-color: white!important;width: 30px;border-radius: 15px;transition: all 0.3s;}

/* main */

#main1 { margin:20px 0px 0px; }
#main1 .main1-box { position:relative; cursor:pointer; overflow:hidden;}
#main1 .main1-box:hover img {opacity:0.7; transition:0.3s all;}
#main1 .main1-cont { position:absolute; bottom:0px; width:100%; padding:24px 30px; background-color: rgba(28,62,113,.8);}
#main1 .main1-cont h3 { font-size:28px; color:#fff; margin:0 0 10PX;}
#main1 .main1-cont p { font-size:18px; color:#fff; margin:0px;}
#main1 > div > div > div { margin:0px 0px 20px;}
#main1 .main1-box img { width: 100%;}

.main2 { margin: 25px 0; }

.sermon { background:url(../Images/sermon_2.png) no-repeat; height:381px; background-size:auto 100%; padding:60px 0; background-position-x:right;}
.sermon > div { padding:0 90px;}
.sermon-cont { text-align:left; display:inline-block; padding: 80px 50px 0; width:100%;}
.sermon-cont a { color:#fff; text-decoration:none; }
.sermon-cont h3 { color:#fff; font-size:20px; }
.sermon-cont h2 { color:#fff; font-size:30px; margin:25px 0 0; }
.sermon-cont h2 span { color:#fff; font-size:19px; }
.sermon-cont h4 { color:#fff; font-size:22px; margin:0 0 20px;}
.sermon-cont h5 { font-size:35px; margin:15px 0; }
.sermon-cont h5 a{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;display: inline-block;width: 100%;}
.sermon-cont .view { padding:5px 40px; font-size:17px; color:#fff; display:inline-block; background:rgba(255,255,255,0.4); margin:15px 0 0; border:1px solid #fff;}
.sermon-cont .view:hover {background:rgba(28,62,113,1); transition:0.3s all; }
.sermon-cont { font-size:19px; line-height:30px; }
.sermon-cont .live-off{padding: 5px 15px; font-size: 17px; color: #fff; display: inline-block; background: rgba(255,255,255,0.4);
 margin: 15px 0 0; border: 1px solid #fff; float: right; cursor: pointer;}
.sermon-cont .live-off:hover,.sermon-cont .live-off:focus{background: rgba(28,62,113,1); transition: 0.3s all;}
.sermon-cont .live-off img{margin-bottom: 3px; margin-left:15px;}
.sermon-cont .live-on{padding: 5px 15px; font-size: 17px; color: #fff; display: inline-block; background: rgba(255,255,255,0.4);
 margin: 15px 0 0; border: 1px solid #fff; float: right; cursor: pointer;}
.sermon-cont .live-on:hover,.sermon-cont .live-on:focus{background: rgba(28,62,113,1); transition: 0.3s all;}
.sermon-cont .live-on img{margin-bottom: 3px; margin-left:15px;}
.main2 .main2-bg{height:100%;background-size: 100% 100%; background:url(../Images/sermon_bg_2025_1.jpg) no-repeat;height: 382px;}
.main2 .main2-1{height: 100%; padding: 0; width: 68%; position:relative;}
.main2 > div > .main2-bg > .main2-1 > img{position: absolute;bottom: 0;left: 50%;}
.main2 .main2-1 .main2-1-box{width: 40%;display: inline-block;position: absolute;padding: 20px;bottom: 20px;
left: 14%;background-color: rgb(5 5 5 / 60%); z-index:1;}
.main2 .main2-1 .main2-1-box h3{margin: 0 0 15px 0;color: #fff;font-size: 27px;font-weight: bold;letter-spacing: 1px;}
.main2 .main2-1 .main2-1-box h5{margin: 0 0 15px 0;color: #fff;font-size: 20px;}
.main2 .main2-1 > .main2-1-box > h5:last-child{margin:0px;}
.main2 .main2-2{height: 100%; padding: 0; background-color:rgba(28,62,113,.6); width: 32%;}
/* media */
.generation li a img{max-width: 436px; max-height: 366px;height: auto!important; width: auto!important;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) }
.tab-content>.tab-pane{height: 368px; background-color:#000;}
.main1-cont{position: absolute;bottom: 0px;width: 100%;padding: 24px 30px;background-color: rgba(0,0,0,.5);}
.tab-dots{text-align: center;width: 30%;position: absolute;right: 10px;bottom: 15px; border:none;}
.tab-dots li{display: inline-block;text-align: center;float: inherit;margin-left: 2px;margin-right: 2px;}
.tab-dots li a{display: inline-block;width: 16px;height: 16px;background: #e7e4df;cursor: pointer;border-radius: 50%;padding: 0;}

/* sitemap */
#main3{padding: 50px 0;}
#sitemap-wrap { background-color: #FFF; padding:80px 0; display:none; }
#sitemap { margin:0px; text-align:center;}
#sitemap a { text-decoration:none; }
#sitemap a:hover { font-weight:bold; transition:0.2s all;}
#sitemap > li { display:inline-block; vertical-align:top; padding: 0px 60px; text-align:left;}
#sitemap > li > a { color:#708da2; font-size:20px; font-weight:600;}
#sitemap > li > ul { margin-top:10px;}
#sitemap > li > ul > li { padding:3px 0px;}
#sitemap > li > ul > li > a { color:#555555; font-size:17px;}
#sitemap > li > ul > li > a:hover { color:#30318B; transition:all ease 0.3s; }
#sitemap > li > ul > li > ul > li { padding-left:10px; }
#sitemap > li > ul > li > ul > li > a { color:#777; font-size:14px;}
#sitemap .depth3 { margin:3px 0 0;}
#sitemap .depth3 li { font-size:17px; padding:3px 0;}

@media (min-width:1200px) and (max-width:1499px) {
    .main2 .main2-1 .main2-1-box{width:42%;}
    .main2 > div > .main2-bg > .main2-1 > img{}
    #main1 .main1-cont{padding: 24px 10px;}
    #main1 > div > div > div:nth-child(2) > .main1-box > .main1-cont,
    #main1 > div > div > div:nth-child(3) > .main1-box > .main1-cont{padding: 36px 10px;}
    #sitemap > li{padding: 0px 43px;}
    .sermon-cont{padding: 65px 22px;}
    
}

@media (min-width:992px) and (max-width:1199px) {
     .main2 .main2-bg{background-position: center;}
     .main2 .main2-1 .main2-1-box{left: 20px;width: 57%;}
    .main2 .main2-1 .main2-1-box h3{line-height: 1.5;}
    #main1 .main1-cont{padding: 24px 15px;}
    #main1 .main1-cont h3{font-size:24px;}
    #main1 .main1-cont p{font-size: 17px; letter-spacing: 0px;}
    #main1 > div > div > div:nth-child(2) > .main1-box > .main1-cont,
    #main1 > div > div > div:nth-child(3) > .main1-box > .main1-cont{padding: 36px 10px;}
    #sitemap > li{padding: 0px 25px;}
    .main2 .main2-1{width:60%;}
    .main2 .main2-2{width:40%;}
    .main2 .main2-2 .sermon-cont{padding: 70px 30px; width:100%;}
    .main2 > div > .main2-bg > .main2-1 > img{}
}

@media (min-width:768px) and (max-width:991px) {
    .main2 .main2-1{width:100%;}
    .main2 .main2-1 .main2-1-box{left: 20px;width: 45%;}
    .main2 .main2-bg{background-position: center;}
    .main2 .main2-2{background-size: 100%;width: 100%;background-color: rgba(28,62,113,1);height: 71%;}
    .main2 .main2-2 .sermon-cont{padding: 23px 50px;width:100%;text-align: right;}
    .main2 > div > .main2-bg > .main2-1 > img{left: 25%;}
    #main1 > div > div > div:nth-child(3){margin: 0 24%;}
    #main1 .main1-cont{padding: 24px 24px;}
    #main1 > div > div > div:nth-child(2) > .main1-box > .main1-cont,
    #main1 > div > div > div:nth-child(3) > .main1-box > .main1-cont{padding: 36px 24px;}
    .sermon-cont h4{margin: 0 0 15px;}
    .sermon-cont h5{font-size:30px;}
    .sermon-cont h3{margin-top:10px;}
    .sermon-cont .view{float:left;}
    .sermon-cont .view,.sermon-cont .live-off,.sermon-cont .live-on{margin: 10px 0 0;width: 45%; text-align: center;}
    .sermon-cont h2{margin: 20px 0 0; display:inline-block;}
}

@media (max-width:767px) {
    .slider .slider-dots .each-dot.active {
        width: 15px; height: 5px;
    }
    .slider .slider-dots .each-dot {
        height: 5px !important;
        width: 6px !important;
    }
    .main2 .main2-1 {
        width: 100%;
    }
    .main2 .main2-1 .main2-1-box{left: 12px; width: 93%; padding:10px;}
    .main2 .main2-1 .main2-1-box h5,.main2 .main2-1 .main2-1-box h3{margin: 0 0 10px 0;}
    .main2 .main2-bg{background-position: center;}
    .main2 > div > .main2-bg > .main2-1 > img{width: 70%; left: 18%;}
    .main2 .main2-2{background-size: 100%;width: 100%;background-color: rgba(28,62,113,1);height: 69%;}
    .main2 .main2-2 .sermon-cont{padding: 15px 30px;width:100%; text-align:right;}
    #main1 .main1-cont{padding: 8px 24px;}
    #main1 .main1-cont h3{font-size: 25px;}
    #main1 > div > div > div:nth-child(2) > .main1-box > .main1-cont,
    #main1 > div > div > div:nth-child(3) > .main1-box > .main1-cont{padding: 20px 24px;}
    .sermon-cont h4{margin: 0 0 15px;}
    .sermon-cont h5{font-size:30px;}
    .sermon-cont h3{margin-top:10px;}
    .sermon-cont .view{margin: 10px 0 0;float: left;width: 48%;text-align: center;}
    .sermon-cont h2{margin: 20px 0 0; display: inline-block;}
    .sermon-cont .live-off img,.sermon-cont .live-on img{margin-left: 5px;}
    .sermon-cont .live-off, .sermon-cont .live-on{margin: 10px 0 0;width: 55%;}
}
@media (max-width:465px) {
    .sermon-cont .view{width: 45%;}
    .sermon-cont .live-off, .sermon-cont .live-on{width: 45%;}
}
@media (max-width:403px) {
    .sermon-cont .view{width: 45%;}
    .sermon-cont .live-off, .sermon-cont .live-on{width: 50%;}
}
@media (max-width:375px) {
    .main2 > div > .main2-bg > .main2-1 > img{width: 70%; left: 18%;}
    .sermon-cont .view{width: 40%; padding: 5px 20px;}
    .sermon-cont .live-off, .sermon-cont .live-on{width: 55%;}
    .sermon-cont .live-off img,.sermon-cont .live-on img{margin-left: 5px;}
    #main1 .main1-cont h3{margin: 0 0 5PX;}
    #main1 .main1-cont{padding: 10px 24px;}
    #main1 > div > div > div:nth-child(2) > .main1-box > .main1-cont, #main1 > div > div > div:nth-child(3) > .main1-box > .main1-cont{padding: 23px 24px;}
}
