/*---------------------------------------------------------------------
|	This is the css file for the various pages of the website
|----------------------------------------------------------------------
|	Authour: NDI Jones TANYU
|	Company: roameye
|	File location: _ebc_/assets/home.css
/* --------------------------------------------------------------------

/*
|---------------------------------------------------------------------
|	Here are the markup for the page
|---------------------------------------------------------------------
*/
.bgImage{
    margin-top: 3em;
}
.padding{
    padding-bottom: 2rem;
}
.department-container{
    font-family: 'Quicksand', sans-serif;
}
.ministries-container{
    font-family: 'Quicksand', sans-serif;
    padding: 4em 0;
}
.landing-info{
    z-index: 5;
    width: 85%;
    position: absolute;
    top: 40%;
    left: 7.5%;
}
p{
    font-family: 'Quicksand', sans-serif;
    /**font-size: 1.15em;*/
}
.landing-info h1{
    font-size: 500%;
}
.landing-info h3{
    font-size: 200%;
}
.meet-pst-btn{
    padding: 0.9rem;
    font-size: 1.75em;
    font-weight: 500;
}
.welcome{
    padding: 3rem 0 2em 0;
}
.welcome p{
    text-align: center;
    /**font-size: 1.25em;*/
    width: 60%;
    margin: 0.5em auto 0;
}
.heading{
    font-family: 'Raleway', sans-serif;
}
.ministries-row{
    padding: 3em 0;
}
.prayer-row{
    padding: 3em 3em 0 3em;
}
.vision-row{
    padding: 0 3em 3em 3em;
}
.prayer-vision{
    padding: 4em 0;
}
.prayer-vision p, 
.prayer-vision h1, #prayer-vision{
    width: 80%;
}
.prayer-vision p, .prayer-vision h1{
    float: left;
}
.praying-image1, 
.vision p, .vision h1{
    float: right;
}
.vision-image1, .cbcwomen-image{
    float: left;
}
.vision-image{
    width: 85%;
}
.prayer-vision img{
    width: 100%;
}
.prayer-btn{
    float: left;
    padding: 0.9rem;
    font-size: 1rem;
    /*margin-right: 7.5em;*/
}
.vision-btn{
    width: 25%;
    padding: 0.9rem;
    font-size: 1.0rem;
}
.input-length{
    width: 85%;
}
.value-vision img, .ministries img{
    width: 100%;
}
.form-control{
    height: 200px;
}
/*
|--------------------------------------------------------------------
|   Media queries
|--------------------------------------------------------------------
*/
@media (min-width: 769px) and (max-width: 992px){
    .social a{
        font-size: 4em; padding: 2rem;
    }
    .landing-info{
        width: 85%;
        position: absolute;
        top: 55%;
    }
    .landing-info h1{
        font-size: 350%;
    }
    .bgImage{
        height: 130%;
    }
    .welcome{
        width: 95%;
        margin: 10em 0 0 0;
        padding-top: 2rem;
    }
    .prayer-row{
        padding: 3em 1em 0 1em;
    }
    /*.prayer-row p, .prayer-row h1,
    .vision-row p, .vision-row h1{
        width: 100%;
    }*/
    .vision-row{
        padding: 0 1em;
    }
    .vision-row p, .vision-row h1{
        float: right;
        margin-left: 5%;
    }
    .vision-btn{
        float: none;
        width: 40%;
        margin-left: 30%;
    }
    .vision-heading{
        margin-top: 1em;
    }
    .vision p, .vision h1{
        float: left;
    } 
}

@media (min-width: 577px) and (max-width: 768px){
    .bgImage{
        height: 125%;
    }
    .landing-info{
        width: 85%;
        position: absolute;
        top: 45%;
    }
    .landing-info h1{
        font-size: 300%;
    }
    .common-font-heading{
        font-size: 170%;
        padding: 0.5em;
    }
    .welcome{
        width: 90%;
        margin: 7em 0 0 0;
    }
    .welcome p{
        width: 80%;
        margin: 0 auto;
        text-align: center;
    }
    .praying-image{
        width: 100%;
    }
    .prayer-vision p, .prayer-vision h1{
        width: 100%;
    }
    .common-font-x{
        font-size: 2rem;
    }
    .lead{
        width: 100%;
        text-align: justify;
    }
    .social a{
        font-size: 2.5em;
        padding: 1.2rem;
    }
    hr.light{
        width: 100%;
    }
    form .btn{
        margin: 0 auto;
        margin-right: 40%;
    }
    .prayer-btn{
        margin-right: 35%;
    }
    .history-info h1, .history-info p,
    .values-info h1, .values-info p{
        width: 100%;
        text-align: justify;
    }
    .vision-row img{
        margin-top: 3em;
    }
    .vision-btn{
        float: none;
        width: 40%;
        margin-left: 30%;
    }
    .vision-info h1, .vision-info p{
        width: 100%;
        text-align: justify;
    }
    .vision-heading{
        margin-top: 1em;
    }
    .vision h1{
        margin-top: 1em;
    }
    .vision p, .vision h1{
        float: left;
        text-align: left;
    }
    .prayer-vision p, .prayer-vision h1,
    #prayer-vision{
        width: 100%;
        text-align: left;
    }
}

@media (min-width: 326px) and (max-width: 576px){
    .social a{
        font-size: 2.5em;
        padding: 1.2rem;
    }
    .bgImage{
        height: 130%;
    }
    .landing-info{
        width: 85%;
        position: absolute;
        top: 50%;
    }
    .meet-pst-btn{
        padding: 0.5rem;
        font-size: 1.15em;
    }
    .landing-info h1{
        font-size: 250%;
    }
    .landing-info h2{
        font-size: 1em;
    }
    .landing-info h3{
        font-size: 1.25em;
    }
    .welcome{
        width: 92.5%;
        margin: 7em 0 0 0;
    }
    .welcome p{
        width: 92.5%;
        margin-left: 3.75%;
        text-align: justify;
    }
    .prayer-row p, .vision-row p{
        text-align: justify;
    }
    .prayer-vision, .prayer-vision p, .prayer-vision h1, 
    #prayer-vision, .prayer-form{
        width: 100%;
    }
    .prayer-row{
        padding: 0;
    }
    .prayer-box{
        padding-bottom: 4em;
    }
    .vision{
        padding-top: 2em;
    }
    .prayer-vision h1, #prayer-vision{
        width: 100%;
    }
    .prayer-row img, .vision-row img{
        width: 95%;
        margin: 0 2.5%;
    }
    .prayer-btn{
        width: 40%;
        margin-left: 30%;
        font-size: 1em;
    }
    .vision-row{
        padding: 3em 0 0 0;
    }
    .vision{
        margin-top: 3em;
    }
    .vision-btn{
        float: none;
        width: 40%;
        margin-left: 30%;
    }
    .vision-heading{
        margin-top: 0em;
    }
    .vision p, .vision h1{
        float: left;
    }
    .ministry-card{
        margin: 1.25em 0;
    }
    .padding-container{
        padding: 2em 0;
    }
    .padding{
        padding-bottom: 0;
    }
    .social-container{
        padding: 3.5em 0;
    }
}

@media screen and (max-width: 325px){
    .big-heading{
        display: none;
    }
    .bgImage{
        height: 125%;
    }
    .landing-info{
        top: 85%;
    }
    .landing-info h3{
        font-size: 1.5em;
    }
    .landing-info h2{
        font-size: 0.85em;
    }
    .meet-pst-btn{
        padding: 0.5rem;
        font-size: 1em;
    }
    .welcome p{
        width: 90%;
        margin-left: 5%;
    }
    .prayer-row, .vision-row{
        padding: 0;
    }
    .prayer-box h1, .prayer-box p,
    .vision h1, .vision p{
        width: 100%;
    }
    .prayer-btn{
        width: 40%;
        margin-left: 30%;
    }
    .prayer-row img, .vision-row img{
        width: 95%;
        margin: 0 2.5%;
    }
    .vision-row img{
        margin-top: 3em;
    }
    .vision h1{
        margin-top: 1em;
    }
    .vision-btn{
        width: 40%;
        margin: 0 30%;
    }
}