/* common */

.nav-tabs {
    border-bottom: none;
}
:root {
}
@keyframes move {
    from {
        transform: translateX(100px) scale(1.2);
        animation-timing-function: cubic-bezier(.2,0,.8,1);
    }

    to {
        transform: translateX(0px) scale(1);
    }
}
@-webkit-keyframes spinspin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(180deg);
    }
}

@keyframes spinspin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}


@-webkit-keyframes updown {
    0% {
        bottom: 0;
    }

    100% {
        bottom: 30px;
    }
}

@-webkit-keyframes updown2 {
    0% {
        bottom: 0;
    }

    100% {
        bottom: 15px;
    }
}
@-webkit-keyframes updown { 0% {
        bottom: 0;
    }

    100% {
        bottom: 30px;
    }
}
@-webkit-keyframes spinspin {0% {-webkit-transform: rotate(0deg);}100% {-webkit-transform:rotate(180deg);}}
@keyframes spinspin {0% {transform: rotate(0deg);}100% {transform:rotate(180deg);}}
.plus {
    position: absolute;
    top: 0;
    right: 0;
}

    .plus:hover {
        opacity: 0.8;
        transition: 0.3s all ease;
    }

.box {
    display: inline-block;
    position: relative;
    opacity: 0;
    top: 50px;
}
.slider video { width: 100vw;
    object-fit: cover;
    height: auto;
    display: block;
    max-height: calc(100vh - 58px);
}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {display: none;}
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after  {display: none;}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {background-image: none !important;}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {background-image: none !important;}
.swiper-pagination-bullet-active {background: #fff !important;}
#my-menu {
    display: none;
}


#main-slider img { width: 100%;}
a:hover {text-decoration: none; }
#main0 { background: #5B695A; } 
#main0 h3 {text-align: center; letter-spacing: 15px; color: #fff; margin: 20px 0px; font-size: 16px;}
#main1{padding:50px 0 50px;}
#main1 .title { text-align: center;}
#main1 .title h3 {color: #009FA7; font-size: 20px; font-weight: bold; letter-spacing: .5px;}
#main1 .title h1 {margin-top: 15px; font-size: 30px; font-weight: bold;}
#main1 .link {margin-top: 50px;}
#main1 .main1M{display: inline-flex;justify-content: center;align-items: center;width: 100%;  }
#main1 .main1L iframe {width: 100%; aspect-ratio: 840/ 450; border-radius: 20px;}

#main1 .main1R .col-md-6 {padding: 10px;}
#main1 .main1R iframe {aspect-ratio: 203/ 337; width: 100%; border-radius: 20px; }
#main1 .main1R iframe-media-controls-play-button { display: none;}
#main1 .ytp-large-play-button.ytp-shorts-mode {display: none !important;}
#main1 .detail-video iframe {}

#main1 .main1M a:hover {
    position: relative;
    animation-name: updown;
    animation-duration: 1s;
    animation-duration: leaner;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}
#main1 .main1M a .main1BT{display: inline-flex;flex-direction: column;}
#main1 .main1M a .main1BT{padding: 30px 66px;display: inline-block;position: relative;}
#main1 .main1M a .main1BT .on{padding: 35px;background-repeat: no-repeat;background-position: center;
position: absolute;top: 50%;text-align: center;border: none;display: block;transform: translate(-50%,-50%);}
#main1 .main1M a h1{text-align: center;font-size: 20px;margin: 0;line-height: 1.5;color:#000;}
.slide .slider_text {position: absolute; left: 23%; top: 50%; transform: translate(-50%, -50%);}
.slide .slider_button {position: absolute; left: 21%; top: 68%; transform: translate(-50%, -50%); z-index: 1000;}
#main2{padding: 100px 0; background: #FBFBFB;}
#main2 .main2M {display: inline-flex ; justify-content: space-around; align-items: center; width: 100%; gap: 30px; }

#main2 .main2RBT { text-align: center;}
#main2 .main2RBT p { font-size: 17px; font-weight: bold; color: #000;}
#main2 .main2RBT h5 { margin: 5px 0; color: #969696; font-weight: normal; font-size: 15px;}
#main3 {padding: 100px 0;}
#main3 .main3M {position: relative;}
#main3 .PhotoM {overflow: hidden;}
#main3 .main3T {text-align: center;}
#main3 .main3T h3 {color: #009FA7; font-size: 20px; font-weight: bold; letter-spacing: .5px; margin-top: 0px;}
#main3 .main3T h1 { margin-top: 15px; font-size: 30px; font-weight: bold;}
#main3 .link {margin-top: 50px;}
#main3 .PhotoM .PhotoIMG { display: block; position: relative; aspect-ratio: 1027 / 813; overflow: hidden; background-color: #000; margin: 0 auto; background-size: cover; background-position: 50% 50%; background-origin: border-box; background-repeat: no-repeat;}
#main3 .PhotoM .PhotoIMT h5 { font-size: 14px; color: #0f4c82;}
#main3 .PhotoM .PhotoIMT h1 { font-size: 17px; color: #000; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all;}
#main4 { background-image: url(/UserData/daerimchurch/Layouts/daerimchurch_Layout/Images/5_new_bg.jpg); padding: 100px 0;} 
#main4 .PhotoM { overflow: hidden; position: relative; margin-top: 60px;}
#main4 .PhotoM .PhotoIMG { display: block; position: relative; aspect-ratio: 1920/1280; overflow: hidden; background-color: #000; margin: 0 auto; background-size: cover; background-position: 50% 50%; background-origin: border-box; background-repeat: no-repeat;}
#main4 .main4M { display: flex; justify-content: space-between; grid-gap: 10%;}
#main4 .main4M .main4L { width: 48%;}
#main4 .main4M .main4L .main4T h1{ color: #fff; font-size: 35px; font-weight: bold; margin-top: 0px;}
#main4 .main4M .main4L .main4T h2{ color: #fff; font-size: 25px; font-weight:bold;}
#main4 .main4M .main4R h3 { font-size: 17px; color: #fff; line-height: 145%; margin-top: 0px;}
#main4 .main4M .main4R .main4T {padding-left: 35px; border-left: 1px solid #fff;}
#main3 .PhotoN { position: absolute; z-index: 2; top: 50%; text-align: center; right: -6%; border: none; display: block; transform: translate(0, -50%);}
#main3 .PhotoP { position: absolute; z-index: 2; top: 50%; text-align: center; left: -6%; border: none; display: block; transform: translate(0, -50%);}

@media(min-width:1310px) {
    #main4 .container {
        width: 1110px;
    }
}

@media (max-width:1699px) {
}

@media (max-width:1499px) {
    #main2 .main2M2 .main2M2R a { width: 45%;}
    #main1 .main1M { flex-wrap: wrap;}

}

@media (max-width:1199px) {
    #main3 {padding: 50px 0;}
    #main1 .title h3 {margin: 0px;}
    #main1 .link {margin-top: 25px;}
    #main4 .main4L a {width: 15%;}
    .slide .slider_text {width: 20%;}
    .slide .slider_button {top: 74%; left: 24%;} 
    #main2 .main2M2 .main2M2L .main2M2T a {font-size: 20px;}
    #main2 { padding: 50px 0;}
    #main2_5 .main2_5T { margin-bottom: 25px;}
    #main2_5 { padding: 50px 0;}
    #main2 .main2M .main2R .main2RM h1 { font-size: 25px;}
    #main2 .main2M .main2R .main2RT .sermonSN img{ height: 100%;}
    #main2 .main2M .main2R .main2RT .sermonSN {height: 140px;}
    #main2 .main2M .main2L img { width: 100%;}
    #main2 .main2M .main2R { width: 100%;}
    #main2 .main2M .main2R { padding: 30px 0px; }
    #main2 .main2M .main2L .main2LM {padding: 30px 20px;}
    #main1 {padding: 50px 0;}
    .container-fluid { width: 100%; }
    #main2_5 #main2_5M .PhotoP {left: 3%;}
    #main2_5 #main2_5M .PhotoN { right: 3%;}
    #main1 .main1M a h1 {font-size: 16px;}
    #main1 .main1M a .main1BT { padding: 30px 50px;}
    #main3 .main3M .main3WS {padding: 20px 0;}
    #main3 .main3M .main3WS .main3MT {padding: 0 5px;}
    #main3 .main3M .main3WS .main3CT {padding: 0 5px;}
    #main3 .main3M .main3WS .main3LT {padding:0px 5px;}
    #main3 .main3M .main3WS ul li { width: 130px;}
}

@media (max-width:992px) {
#main3 .PhotoN {  right: 0%; }
#main3 .PhotoP {  left: 0%; }
    #main4 {padding: 50px 0;}
    #main4 .main4M .main4L {width: 100%;}
    #main4 .main4M {flex-direction: column; grid-gap: 30px;}
    #main2 .main2RBT a img {width: 100px;}
    #main2 .main2M { flex-wrap: wrap; justify-content: center; grid-gap: 10px;}
    #main3 .link {margin-top: 25px;}
    #main1 .main1R .col-md-6 {width: 50%;}
    #main4 .main4L a {width: 33%;}
    #main2 .main2M .main2L .main2LM h1 {margin: 0 0 20px;}
    #main3 .main3T h1 strong { font-size: 25px;}
    #main2_5 .main2_5T a { width: 14%;}
    #main3 .main3M { grid-gap: 20px;}
    #main1 .main1M {margin-top: 25px;}
    #main0 h3 {letter-spacing: 4px;}
    #main1 .title h3 { font-size: 20px;}
    #main1 .title h1 { font-size: 25px;}
    #main2 .main2M2 {margin-top: 25px;}
    #main2 .main2M2 .main2M2L .main2M2T {padding: 0 0px 15px 0;}
    .slide .slider_button {width: 21%;}
    #main2 { padding: 50px 0px;}
    #main2 .main2M .main2L .main2LM h1 { font-size: 25px;}
    #main2 .main2M .main2L .main2LM h2 { font-size: 20px; margin: 0px; line-height: 1.3;}
    #main2 .main2M .main2L .main2LM h5 {font-size: 18px;}
    #main2 .main2M .main2R .main2RT {padding: 10px 0px;}
    #main2 .main2M .main2R .main2RM a{ width: 14%;}
    #main2 .main2M2 .main2M2R a:nth-child(3) {margin-top: 20px;}
    #main2 .main2M2 .main2M2R a:nth-child(4) {margin-top: 20px;}
   
}

@media (max-width:767px) {
    #main2 .main2RBT {width: 45%;}
    #main2 .main2RBT h5 {word-break: keep-all;}
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {top: 60% !important;}
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next {top: 60% !important;}
    #main3 .link {padding: 0 15px;}
    #main1 .link {padding: 0 15px; margin-top: 0px;}
    #main3 .link a img {width: 100px;}
    #main1 .link a img {width: 100px;}
    #main4 .main4M .main4R h3 {font-size: 15px;}
    #main4 .PhotoM {margin-top: 25px;}
    #main4 {padding: 25px 0;}
    #main3 {padding: 25px 0;}
    #main3 .main3T h3 {font-size: 18px; margin: 0px;}
    #main3 .main3T h1 {font-size: 20px;}
    #main1 .link {margin-top: 10px;}
    .swiper-button-next img, .swiper-container-rtl .swiper-button-prev img {width: 20px !important;}
    .swiper-button-prev img, .swiper-container-rtl .swiper-button-next img {width: 20px !important;}
    #main4 .main4M .main4R .main4T {padding-left: 0px; border-left: none;}
    #main4 .main4M .main4L .main4T h1 {font-size: 25px;}
    #main4 .main4M .main4L .main4T h2 {font-size: 20px;}
    #main2 .main2M .main2R .main2RT .sermonST .date {font-size: 13px;}
    #main3 .main3M .main3WS ul li br {display: none;}
    #main4 .main4L a div {padding: 5px; word-break: keep-all;}
    #main2 {padding: 15px;}
    #main0 h3 {letter-spacing: 2px;}
        #main1 .main1M { grid-gap: 10px;}
    #main2 .main2M .main2R .main2RM h1 {font-size: 20px;}
    #main2 .main2M .main2R .main2RT {padding: 5px 0;}
    #main2 .main2M .main2R .main2RT a img {width: 20px;}
    #main4 .main4M .main4SM .addersT p{ word-break: keep-all;}
    #main2_5 #main2_5M .PhotoM .PhotoIMG {height: 250px;}
    #main2 .main2M2 .main2M2R span {font-size: 18px; width: 100%; text-align: center;}
    #main2 .main2M2 .main2M2L .main2M2T {justify-content: center; }
    #main2 .main2M2 .main2M2R {position: relative; width: 100%;}
    #main2 .main2M2 .main2M2L {flex-wrap: initial; width: 100%;}
    #main2 .main2M2 {display: inline-block;}
    #main2 .main2M .main2L .main2LM h5 {font-size: 15px;}
    #main2 .main2M .main2L .main2LM h1 {margin-bottom: 10px;}
    #main2 .main2M .main2L .main2LM { padding: 15px; }
    :root {
        --width2: 4;
    }
    #main1 .main1M .main1T {text-align: center; width:calc(100% / var(--width2) - 10px);display: inline-flex;position:relative;
justify-content: center;align-items: center; gap: 20px;flex-direction: column;text-decoration:none;color:inherit;}
    #main1 .main1M {margin-top: 15px; }
    #main0 h3 {font-size: 14px; margin: 15px 0;}
    #main1 .main1M a .main1BT .on{padding: 0px; width: 100%; height: 100%; background-size: contain;}
    #main1 .main1M a h1 {font-size: 14px; word-break:keep-all;}
    #main1 .title h3 { font-size: 18px; margin: 0;}
    #main1 .title h1 { font-size: 20px;}
    #main1 .main1M a .main1BT {padding: 20px 25px;}
    #main2 .main2M .main2R .main2RT .sermonST {width: 60%;}
    #main2 .main2M2 .main2M2L .main2M2T a {font-size: 17px;}
    #main2 .main2M .main2R {padding: 15px 0;}
     #main2 .main2M2 {margin-top: 0px;}
    #main2_5 .main2_5T h1 {font-size: 25px;}
    #main4 .main4M { padding: 0 15px;}
    #main4 .main4T img{ width: 40%;}
    #main3 .main3M .main3WS {padding: 0 20px;}
    #main3 .main3T h1 { padding: 0 15px;}
    #main2_5 { padding: 25px 15px;}
    #main2 .main2M .main2R .main2RT .sermonSN { height: 85px; }
    #main1 { padding: 25px 0;}
    #main3 .main3M .main3WS .main3MT {padding: 0 20px;}
    #main3 .main3M .main3WS .main3CT {padding: 0  20px;}
    #main3 .main3M .main3WS .main3LT {padding: 0 20px}
    #main3 .main3M .main3WS ul li { width: 100%; margin-bottom: 5px;}
    #main3 .main3M .main3WS ul li strong {font-size: 18px;}
    #main3 .main3T h1 strong {font-size: 20px;}
    #main4 .main4L {grid-gap: 5px;}

 }

@media (max-width:600px) {
    #main2 .main2M .main2R .main2RT .sermonSN {height: 70px;}
    #main2 .main2M .main2L .main2LM h1 {font-size: 20px;}
    #main2 .main2M .main2L .main2LM h2 {font-size: 18px;}
    #main3 .main3M .main3WS ul li { width: 230px;}

}

    @media (max-width:400px) {
        #main3 .main3M .main3WS ul li {width: 160px;}
        #main2 .main2M .main2R .main2RT .sermonSN {height: 50px;}
    }