body { background-color: #fff !important; }



.navbar { border-bottom: 1px solid #ccc !important; box-shadow: none !important; }

/* NAV */
nav {
    z-index: 990; 
    background:var(--card-bg); color:var(--dark-text);
    box-shadow: 0px 2px 5px 0px var(--dark-25) !important;

}


nav .wrap { margin: 0 1em; }
nav .logo { height: 40px; margin-right: 0.5em; margin:0.75em; }
nav .churchTitle {
    font-weight: bold; font-size: 1.5em; color: var(--pri-color) !important;
    transform: translateY(3px);
}

#memberList { max-width: 600px; margin: 1em auto; }

.memberListItem { text-align: left; }

.tag {
    font-size:0.75em; line-height: 1;
    padding:0.5em 0.5em; color:#fff; border-radius:0.5em; margin: 0.1em;
    display: inline-block;
}

footer {
    font-size:0.85em;
    padding: 2em 0;
    margin: 1em auto 3em auto;
    /* background-color: #ccc; */
}

footer img { width:150px; margin-bottom:0.5em; }
footer .version { padding:1em 0 0.5em 0; }
footer a:hover { text-decoration:underline; }

footer picture { margin-right: 2em; height: 40px; }



@media only screen and (max-width: 415px) {  
    #kgMentorStat {
        /* margin-top:180px; */
    }
}




/* CUSTOM */

nav .logo {
    padding-left: 0.75em !important;
}

.btn-flat {
    border: 1px solid var(--hl-color); color: var(--hl-color);
}
.btn-flat:hover {
    background-color: var(--hl-color); color: var(--white);
}

.head-title {
    color: var(--sec-color) !important;
}

.card {
    border-radius: 1rem; overflow: hidden;
}


.contributors img.circle {
    /* height: 60px; */
    /* margin: 2em; */
}

.courses {
    font-size: 1rem;
    font-family: var(--font-title);
}

.courseCard {
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;

    cursor: pointer;

    overflow: hidden; border-radius: 0.75em;
    box-shadow: var(--shadow-lite-1);
}
.courseCard:hover {
    box-shadow: var(--shadow-lite-3);
}

.courseCard .img {
    width: 100%; padding-top: 50%; background-size: cover; background-position: center;
}

.courseCard .con {
    display: grid;
    grid-template-rows:auto 1fr;
}

.courseCard .content {
    display: block; 
    padding: 1.25em;
    padding-bottom: 1em;
}
.courseCard .content .title {
    font-weight: bold; font-size: 1.15em;
}
.courseCard .content .contributor {
    display: block; color: var(--pri-color);
}

.courseCard .info {
    display: grid; grid-template-columns: auto auto;
    padding: 0.75em 0.75em 0.75em 1.25em !important;
}

.courseCard .info .enrolled {
    background-color: green; color: #fff; padding: 0.25em 0.75em; border-radius: 0.5em;
}


.courseCard .info .price {
    color: var(--pri-color); font-weight: bold;
    font-size: 1.15em;
}

.courses .free {
    color: green !important;
}

.courses .price-con {
    
}
.courses .info-con {
    text-align: right; 
    /* width: auto !important; */
    /* margin:0 !important; */
}

.courses .price {
    /* font-size: 2.5em;
    color: var(--pri-color);
    font-weight: bold;
    padding-right: 5px; */
}

.cc-courses {
    background: var(--sec-color); color: var(--white) !important;
}

.cc-courses .head-title { color: var(--white) !important; }
.cc-courses .head-tag { color: var(--white) !important; }
.cc-courses .courseCard {
    color: #000000 !important;
    background-color: var(--white) !important;
}


.package .label {
    font-weight: bold;
    padding-right: 10px;
    color: var(--pri-color);
    height: 1.5em;
}

.package label {
    color: var(--gray);
    font-size: 0.85em;
}

.package ul {
    text-align: left; padding: 1em 0 0 0; margin: 1em 0 0 0;
    border-top: 1px solid var(--gray-lite);

}
.package ul li {
    line-height: 180%;
}

.package ul li i {
    color: green; margin-right: 0.25em;
}
.package ul li .label {
    line-height: inherit; height: auto;
    font-size: inherit;
}

.package.added .con {
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; align-content: stretch
}

.package.added .title {
    font-weight: bold; font-size: 1.5rem !important;
}
.package.added ul {
    border: none !important; margin: 0 !important;
    padding: 0.25em 0 !important;
}

.package.added .label, .package.added .price {
    padding:0 !important;
}

.package.added .con1 {
    text-align:left;
}

.package.added .con2 {
    text-align:right;
}

/* .col { background-color: #ccc; } */


.testimonial {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 1em;
    text-align: left;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: stretch;
}

blockquote {
    color: var(--sec-lite);
    font-family: Tahoma, sans-serif;
    width: 80%;
    padding: 1em 0 !important;
    margin: 1.5em 5% 1.5em 15% !important;
    border-left: none !important;
}

blockquote p {
    font-style: italic;
    margin-bottom: 0;
}

blockquote p::before {
    content: "“";
    font-family: Georgia;
    font-size: 8rem;
    margin: -5.5rem 0 0 -2rem;
    position: absolute;
    opacity: 0.5;
}

blockquote p::after {
    content: "”";
    margin: -1rem -4rem 0 0;
}

blockquote cite {
    font-size: 1.25rem;
    display: block;
    padding-top: 2em;
    /* background-color: #aaaaaa; */
}

blockquote cite label {
    font-size: 1rem;
}

.btn.getStart {
    background-color: var(--sec-lite);
    color: #ffffff;
    border-radius: 0.5em;
}

.cta {
    /* padding: 2em 0 1em 0; */
}
.cc-cta {
    background-color: var(--sec-color); 
}
.cc-cta, .cc-cta .head-title, .cc-cta .head-tag {
    color: var(--white) !important;
}

.cc-banner .iChurch {
    font-size: 0.75em; font-weight: 400; color: var(--sec-color);
}

.cc-banner h1 {
    margin: 0;
}
.cc-banner .title {
    font-size: 1.25em; margin-bottom: 0.25em; font-weight: bold;
    line-height: 80px; color: var(--sec-dark);
}

.sec-gradiantFont {
    background: -webkit-linear-gradient(var(--sec-lite), var(--sec-dark)) !important;
    -webkit-text-fill-color: transparent !important;
	-webkit-background-clip: text !important;
}



.home-banner {
    font-family: var(--font-title);
}
.home-banner .iChurch {
    font-size: 0.75em; font-weight: 400; color: var(--pri-color);
}

.home-banner .homeBannerText {
    text-align: left; width: 80%;
    font-size: 1.5em; line-height: 1.5;
    padding: 2em 0;
}

.home-banner h1 {
    font-weight: bold; color: #000000 !important;
    margin: 0 0 0.5em 0;
}

.home-banner h1 .title {
    font-size: 1em; margin-bottom: 0.25em;
    line-height: 80px; color: var(--sec-color);
}

.gradiantFont {
    background: -webkit-linear-gradient(var(--pri-lite), var(--pri-dark)) !important;
    -webkit-text-fill-color: transparent !important;
	-webkit-background-clip: text !important;
}

.home-banner ul {
    font-weight: bold; padding-bottom: 1em; font-size: 1.1rem;
}

.home-banner ul li i {
    margin-bottom: 0.25em;
    margin-right: 0.5em;
    color: var(--sec-lite);
}

.home-banner .btn.getStart {
    background-color: var(--sec-lite);
}

.cloudchurch .content {
    display:block; text-align:left; width:90%; margin:0 auto;
}

.cc-foot {
    text-align: left; color: #ffffff;
    font-family: var(--font-title);
    /* background: rgb(40,133,186);
    background: linear-gradient(0deg, rgba(40,133,186,1) 0%, rgba(233,245,250,1) 62%); */
}

.cc-foot .foot-logo {
    margin-bottom: 2em; width: 80%;
}

.cc-foot .menuhead {
    font-weight: bold; color: #ffffff;
    font-size: 1.35em; padding-bottom: 0.75em;

}
.ic_web_foot {
    background: #00AA9F !important; color: #ffffff;
}

.ic_web_foot .container {
    border-top:1px solid #ffffffaa; padding:1.5em 0 3em 0;
}

.ic_web_foot {
    font-family: var(--font-text);
}


@media only screen and (max-width: 993px) {


    .home-banner h1 {
        font-size: 3em;
    }
    
    .home-banner .homeBannerText {
        text-align: center !important;
    }

    .cloudchurch .content, .cta .content {
        text-align:center; 
    }

    .cc-foot .foot-logo {
        width: 80%;
    }
    
    
    
}

@media only screen and (max-width: 601px) {

    section .head-title { font-size: 2em; }
    section .head-tag { font-size: 1.25em; }
    .home-banner ul { font-size: 1em; }
    .home-banner h1 { font-size: 1.5rem; }

    /* section .head-tag { font-size: 1.25rem;} */

    .cloudchurch .btn { width: 100%; }

    .cloudchurch .content { width: 90%; }

    .package.added .con1, .package.added .con2 {
        text-align:center;
    }
    .package.add .con {
        display: block;
    }
    .package.added ul {
        margin: 1em 0 !important;
        border-bottom: 1px solid var(--gray-lite) !important;
        padding: 1em 0 !important;
    }
    
    
}