/* ==============================
   Phone
   ============================== */
   .mobile-on{display: none;}
@media (max-width: 480px) and (min-width: 320px) {
    .footer-social a{
        font-weight: bold;
        font-size: 14px;
    }
    .mobile-on{display: block !important;}
    body .hero--list li:last-child {
        border-bottom: 0px solid white !important;
    }
    .pb-xs-0{
        padding-bottom: 0px !important;
    }
    .mb-xs-60{
        margin-bottom: 60px !important;
    }
    footer .container{
        max-width: calc(100% - 0px) !important;
    }
    body .box--video--cta {
        position: relative;
        right: 0;
        bottom: 0px;
        width: 100%;
        display: block;
        text-align: left;
    }
    body .loading span {
        margin: 0 10px;
        font-size: 20vw;
    }
    .decorative-1,
    .decorative-2{
        display: none!important;
    }
    body span.loading--circle {
        width: 300px;
        height: 300px;
        position: absolute;
        border-radius: 100%;
        border: 1px solid var(--gold-500);
        right: -50px;
        top: -265px;
        bottom: 0;
        margin: auto;
        z-index: 1;
    }
    .hero--list { 
        flex-wrap: wrap;
        flex-direction: column;
        padding: 20px 0px !important
    }
    .revert{
        flex-direction: column-reverse;
    }
    .text-xs-left{
        text-align: left!important;
    }
    body .hero--list li:nth-child(2){
        margin-bottom: 20px;
    }
    body .hero--list li {
        padding: 3px 0px;
        margin: 0px 0px;
        border-right: 0;
        border-bottom: 0px solid white;
    }
    body .hero--list li .hyperlink{
        font-size: 18px;
    }
        .gallery-container li  {
            flex: 0 0 100% !important;
        }
        .gallery-container li img{
            width: 100% !important;
        }
    body .height-100--hero {
        height: 50vh !important;
    }
    body .height-100--hero>img{
        height: 100% !important;
    }
        .height-100--hero video {
            background-color: #000;
            height: auto;
            left: 50%;
            min-height: 100%;
            min-width: 100%;
            position: absolute;
            top: 58%;
            -ms-transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            width: 120vh;
            z-index: 0;
            background-size: cover;
        }
        html body .height-100--hero .container.vertical-alignKids {
            max-width: calc(100% - 0px) !important;
            position: relative;
            top: 20% !important;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
        }
        .height-xs-fit .vertical-align{
            top: 0%;
                -webkit-transform: translateY(0%);
                -ms-transform: translateY(0%);
                transform: translateY(0%);
        }
        .height-100--hero.pastorxs:not(.active)>img {
            position: absolute;
            width: 116%;
            height: 75vh;
            object-fit: cover;
            object-fit: top;
            /* border-radius: 0px 0px 2rem 2rem; */
            transition-duration: 1.3s;
            transition-delay: .5s;
            transition-timing-function: cubic-bezier(.19, 1, .22, 1);
            object-position: 69% 50%;
            max-width: 150%;
        }
    .donation-icon img{height: 60px !important; width: 60px;}
    html body {
        font-size: 18px;
        line-height: 1.3;
    }
    body h2,
    body h1 {
        font-size: 90px;
        line-height: 1;
    }
    body h3 {
        font-size: 70px;
        line-height: 1;
    }
    body h5 {
        font-size: 24px;
        line-height: 1.3;
    }
    body .boxes--70,
    body .boxes--30 {
        width: 100%;
    }
    .decorative-1 {
        position: absolute;
        left: -10px;
        top: 9px;
    }
    .boxes--2x4>div {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
    }
    .boxes--2x4 .text-box{
        width: 100%;;
    }
        #home--effect4{
            padding: 80px 0px !important;
        }
        #home--effect4:before{
            opacity: 0 !important;
        }
    .slide-m {
        padding-top: 130px 0px;
        border-bottom:1px solid var(--navy-600);
    }
    .tobtn{width: 100%;}
    .tobtn a{
        justify-content: center;
        margin-bottom: 10px;
        margin-left: 0px !important;
    }
    #home--effect3 {
        min-height: 100vh;
        padding: 120px 0px 0px 0px;
        padding-bottom: 0vh;
    }
    .slide--box-x2{margin-bottom: 30px;flex-direction: row-reverse;}
    .card{
        flex-direction: column-reverse;
        top:0 !important;
        margin-bottom: 40px;
    }
    .card-content>h3 br{display: none;}
    #home--effect4{max-height: initial !important;}
    body .boxes--inline-x4 {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        left: 0%;
        position: relative;
        gap: 30px;
        flex-direction: column;
    }
    .slide-mKids__{
        margin-bottom: 0px !important;
        padding: 120px 0px !important;
    }
        .big input[type="text"].inputpv,
        .big select.inputpv{
            width: calc(100% - 10px);
            min-width: calc(100% - 10px) !important;
        }
        .height-100--hero.visisi>img {
            position: absolute;
            width: 100%;
            height: 70vh;
            object-fit: cover;
            object-position: 75% 0%;
            /* border-radius: 0px 0px 2rem 2rem; */
            transition-duration: 1.3s;
            transition-delay: .5s;
            transition-timing-function: cubic-bezier(.19, 1, .22, 1);
        }
    .order--1{
        order: 1 !important;
    }
    .boxes--inline-x4 > div{
        width: 100%;
    }
    .fz-xs-70{
        font-size: 70px!important;
    }
    .boxes--inline-x4 > div:nth-child(3) {
        order: 0;
    }
    .col-md-5 h1{
        margin-bottom: 0px !important;
    }
    .boxes-inline-x4--text {
        padding: 0px 0px;
        border-radius: 0 !important;
        overflow: initial !important;
    }
     .mt-xs-10{margin-top: -5px !important;}
    .cards--horizontal-scroll.pastor--effect2{
            transform: translateX(0%);
                gap: 20px;

        }
    .donation-method{
        border: 1px solid var(--navy-600);
        border-radius: 15px;
        text-align: left;
        padding: 70px 40px;
    }
        .donation-text{
            font-size: 14px !important;
        }
    .item--x2.wxs-100{
            flex: 1 1 calc(100% - 00px);
                max-width: calc(100% - 00px);
                overflow: hidden;
    }
    .text-navy-700.mh-42.mb-20.d-block{
        font-size: 20px !important;
    }
    .slider-container{
        max-height: 300px;
    }
        .gal-container img {
            border-radius: 5px;
        }
    .gal-container,
        .gal-top,
        .gal-middle,
        .gal-bottom {
            display: flex;
            gap: 5px;
        }
        .circle--kids-effect2{justify-content: flex-start;}
    body .bce2 {
        position: absolute !important;
        top: -7%;
        left: 76%;
        transform: translate(-50%, -50%) scale(.6);
        z-index: 0;
        width: 121%;
        max-width: 1500%;
        height: auto;
    }
    body .panel-body{
        width: 100% !important;
        font-size: 16px !important;
    }
    .px-xs-15{
        padding: 0 15px !important;
    }
    body .big p {
        font-size: 22px !important; 
    }
        body .panel-group * {
            transition-timing-function: none;
            -moz-transition-timing-function: none;
            -webkit-transition-timing-function: none;
            -o-transition-timing-function: none;
            transition-duration: .3s;
            -ms-transition-timing-function: none;
            -moz-transition-duration: .3s;
            -webkit-transition-duration: .3s;
            -o-transition-duration: .3s;
        }
        .card-content p{min-width: 100%;}
    .cards--horizontal-scroll { 
        flex-direction: column;
        width: 100% !important;
    }
    .cards--horizontal-scroll>div:not(.fullbg-cover){
        width: 100%;
    }
    body .height-xs-fit{
        height: auto !important;
        max-height: initial;
        padding: 120px 0px
    }
    .image-grid{
        margin-bottom: 30px;
    }
    .flex-xs-off{
        display: block !important;
    }
    .w-xs-100{width: 100%;}
    .mb-xs-40{margin-bottom: 40px;}
    .col-md-3.give--effect2-1,
    .col-md-3.give--effect2-2,
    .col-md-3.give--effect2-3{
        border:1px solid rgb(117, 117, 117);
        border-radius: 12px;
        padding:20px;
        width:calc(100% - 30px);
        margin: auto;
        margin-bottom: 30px;
    }
    .col-md-3.give--effect2-1 h5,
    .col-md-3.give--effect2-2 h5,
    .col-md-3.give--effect2-3 h5{
        margin-bottom: 10px;
    }
    body .card-content{
        padding: 40px 20px;
    }
    .accordion-style1 .panel-title {
        font-size: 16px !important;
    }
    .height-100--hero.yht>img{max-height: 80vh;}
    body .box--hover-1 span{
        padding: 15px !important;
    }
    .box--hover-1 span {
        opacity: 1;
        font-size: 22px !important;
        transform: translateY(0px);
    }
    section.pt-xs-110{padding-top: 110px;}
    .events-details{
        flex-direction: column;
    }
    body .events-details {
        margin-top: 60px;
    }
    body .events-details li{width: 100%;padding: 30px 0px}
    body .events-details li:first-child{
        border-right: 0px;
        border-bottom: 1px solid white;
    }
    body .events-details li:last-child {
        padding-left: 0px;
    }
    .mobile-off{
        display: none !important;
    }
    .portfolio-filter-tab-1 li a{padding: 0 20px !important}
    .portfolio-filter-tab-1 li{width: auto !important;}


        footer .accordion-style1 .panel-title {
            color: white;
            font-size: 14px !important
        }
    #home--effect1 .vertical-align {
        top: 0%;
        -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
        transform: translateY(0%);
    }
    #home--effect1{
        padding-top: 130px !important;
        height: auto !important;
    }
        .accordion-style1 .panel-heading i {
            color: var(--navy-300)
        }
        .panel-body{
            margin-bottom: 0px !important;
        }
    
        footer .accordion-style1.panel-group .panel-heading {
            border-color: var(--navy-600)
        }
         
    
        footer .panel-body a {
            color: white;
            opacity: .5;
            margin-bottom: 10px;
            font-size: 14px!important;
        }
    
        footer .panel-body {
            display: flex;
            flex-direction: column;
    
        }
        #about--effect1{
            border-top: 1px solid var(--navy-600);
        }
        .fz-xs-90{
            font-size: 90px!important;
        }
        .footer-social {
            padding: 0
        }
        .mb-xs-40{
            border-bottom: 40px !important;
        }
                .footer-bottom {
                    margin-top: 50px !important;
                    border-top: 1px solid var(--navy-600);
                }
        .signatureMobile {
            border-top: 1px solid var(--navy-600);
            padding: 20px 10px !important;
            justify-content: space-between !important;
        }
    
        .signatureMobile:before {
            content: "";
            height: 100%;
            position: absolute;
            width: 1px;
            background: var(--navy-600);
            left: 150px;
            top: 0
        }
    
        .signatureMobile {
            position: relative;
        }
    
        .signatureMobile p {
            font-size: 11px !important
        }
                .decorative-3{bottom: 0 !important;}
    .wrap-xs{
        flex-wrap: wrap !important;
        padding: 0 !important;
        padding-bottom: 30px !important;
    }
    .container.position-relative.pxs{
        max-width: calc(100% - 0px) !important;
        padding: 0 !important;
    }
    .container.mb-120,
    .container.w-nav-m.mb-120{
        margin-bottom: 0px !important;
    }
    .barheroyouth .col-md-12{
        padding: 0 !important;
    }
    .container.mb-120,
    .container.position-relative,
    .container.w-nav-m{
        max-width: calc(100% - 0px) !important;
    }
    .col-md-12 col-ip-12 d-flex justify-content-between align-items-center
    .barhero .container.position-relative{
        padding: 0 !important;
    }
}