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

/*
|---------------------------------------------------------------------
|	Here are the markup for the page
|---------------------------------------------------------------------
*/
@import url('https://fonts.googleapis.com/css?family=Numans');
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
html, body{
    height: 100%; width: 100%; color: #222; background: #FAFAFA;
}
body.home a.home, body.about a.about,
body.ministries a.ministries,
body.events a.events, body.giving a.giving{
    font-weight: bold;
    color: white;
    pointer-events: none;
    cursor: default; 
}
body{
    margin: 0;
    padding: 0;
    font-family: 'Quicksand', sans-serif;
}
.common-font{
    font-family: 'Quicksand', sans-serif;
}
p.common-font1{
    font-family: 'Quicksand', sans-serif;
    font-size: 1.15em;
}
/* Set the menu icon border color */ 
.custom-toggler.navbar-toggler { 
    border-color: white; 
}
/*--------------------The menu: Setting the stroke to green using rgb values (0, 128, 0) --------------*/ 
.custom-toggler .navbar-toggler-icon { 
    background-image: url( 
"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); 
}
.dropdown-item{
    color: #888;
}
.dropdown-item:hover{
    color: #068e9a;
}
.dropdown-item a:hover{
    background-color: #adebad;
}
.dropdown:hover>.dropdown-menu {
  display: block;
}
.dropdown>.dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
    pointer-events: none;
}
.dropdown-item{
    color: #888;
}
.dropdown-item:hover{
    color: #068e9a;
}
.parallax{
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 70%;
}
.bgImage{
    margin-top: 3em;
}
.navbar{
    padding: 0.8rem;
}
.navbar-nav li{
    padding-right: 20px;
}
/*----------------------------------------------------------------------------------*/
.church-name{
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: bolder;
    color: #fff;
}
.church-name:hover{
    color: #fff;
    text-decoration: none;
}
.ebc-bg{
    background-color: #adebad;
}
a:hover{
  text-decoration: none!important;
}
.pg-heading{
    z-index: 5;
    position: absolute;
    top: 35%;
}
.main-heading{
    font-size: 3em;
    font-weight: lighter;
    text-align: center;
}
.page-verse{
    width: 40%;
    padding: 1rem;
    margin: 2em 0 4em 0;
    font-family: 'Quicksand', sans-serif;
}

/*-----------EBC button--------------------------------------------------------------*/
.ebc-button{
    position: relative;
    display: inline-block;
    background: var(--color-primary-500);
    color: var(--color-secondary-900);
    font-family: inherit;
    font-weight: 300;
    line-height: normal;
    border: 0;
    border-radius: 0.4rem;
    box-shadow: -1px 1px 8px rgba(0, 0, 0, 0.4);
    appearance: none;
    cursor: pointer;
    transition: background 250ms, box-shadow 250ms;
}

/*-----------Social Media-----------------------------------------------------------*/
.social a{
    font-size: 4.5em;
    padding: 3rem;
}
.fa-facebook{
    color: #3b5998;
}
.fa-twitter{
    color: #00aced;
}
.fa-instagram{
    color: #517fa4;
}
.fa-youtube{
    color: #bb0000;
}
.fa-facebook:hover, .fa-twitter:hover,
.fa-instagram:hover, .fa-youtube:hover{
    color: #d5d5d5;
}
/*----------------------------------------------------
    The footer
------------------------------------------------------*/
footer{
    background-color: #3f3f3f;
    color: #d5d5d5;
    padding-top: 2rem;
}
hr.light{
    border-top: 1px solid #d5d5d5;
    width: 75%;
    margin-top: 0.8rem;
    margin-bottom: 1rem;
}
hr.light-100{
    border-top: 1px solid #d5d5d5;
    width: 100%;
    margin-top: 0.8rem;
    margin-bottom: 1rem;
}
.mail-text{
    width: 75%;
}
form .btn{
    float: right;
    margin-right: 12.5%; 
}
@media (min-width: 326px) and (max-width: 576px){
    .main-heading{
        width: 95%;
        font-size: 2.25em;
    }
    .page-verse{
        width: 85%;
        margin: 1em 0 3em 0;
    }
}
@media screen and (max-width: 325px){
    .main-heading{
        margin-top: 0em;
        margin-left: 2.5%;
        width: 95%;
        font-size: 2em;
    }
    .page-verse{
        width: 85%;
        margin: 1em 0 3em 0;
    }
}