/* ======================================================================== */
/* ============================ EBC Stylesheet ============================ */
/* ======================================================================== */

header, footer, body, html {
    font-family: "semplicitapro", sans-serif;
}

body {
    width:100%;
}

h1 {
    font-size:30px;
    font-weight:700;
    margin-top: 0;
}

.wrapper {
    width:768px;
    max-width:100%;
    margin:0 auto 0 20px;
}

header {
    background-color:#333333;
    /*margin-top:40px;*/
    max-width:100%;
}

footer {
    background-color:#000;
    color:#fff;
    font-size:12px;
    width:100%;
    padding-bottom:20px;
    /*margin-bottom:100px;*/
    /*position: absolute;*/
    bottom: 0;
}

.staff-footer {
    background-color:#333333;
    margin-top:50px;
    padding-top:10px;
    padding-bottom:30px;
}

.about-footer {
    background-color:#333333;
    margin-top:-1px;
    padding-top:10px;
    padding-bottom:30px;
}

.media-footer {
    background-color:#333333;
    margin-top:50px;
    padding-top:10px;
    padding-bottom:30px;
}

footer div {
    padding-top:10px;
}

nav {
    height:60px;
    background-color:#333333;
    font-weight:600;
    font-size:20px;
}

nav ul {
    margin-left:-70px;
}

nav li {
    list-style:none;
    float:left;
    width:20%;
    color:#fff;
    margin-top:15px;
    margin-left:-10px;
    text-align:center;
}

nav a {
    text-decoration:none;
    color:#fff;
}

nav a:hover {
    color:#737373;
}

.header-space-holder {
    height: 60px;
    margin-bottom: 50px;
}

.home-image {
    background: #000 url('images/home-page-image-sm.jpg') no-repeat top left 100%;
}

.easter-image {
    background: #000 url('images/easter-image-sm.jpg') no-repeat 100%;
    background-position: top;
}

.christmas-image {
    background: #000 url('images/christmas-2023-sm.jpg') no-repeat 100%;
    background-position: top;
}

.vbs-image {
    background: rgb(255, 255, 255) url('images/vbs-image-sm.jpg') no-repeat 100%;
    background-position: top;
}

.media-image {
    background: #000 url('images/media-image.jpg') no-repeat top left 50%;
}

.beliefs-image {
    background: #000 url('images/beliefs-image-sm.jpg') no-repeat top left 100%;
}

.home-content, .about-content, .staff-content, .media-content, .beliefs-content, .content {
    color:#fff;
    min-height: 900px;
}

.christmas-content {
    color:#fff;
    min-height: 900px;
}

.vbs-content {
    color:rgb(0, 0, 0);
    min-height: 900px;
}

.home-content, .about-content, .staff-content, .beliefs-content, .content {
    width:70%;
}

.christmas-content {
    margin-top:225px;
}

.home-content {
    width:100%;
}

.home-content p {
    width:75%;
    font-size:20px;
    font-weight:400;
}

.about-content p, .about-content h2 {
    margin-left:25px;
}

.about-content p {
    margin-top:-10px;
}

.about-content div {
    margin-bottom:40px;
}

.staff-content h5, .staff-content p {
    margin-left:25px;
}

.staff-content h5 {
    margin-top:20px;
    margin-bottom:10px;
    font-size:20px;
}

.media-div {
    width:100%;
    margin-bottom:50px;
    clear:both;
}

.media-right {
    margin-top:15px;
    margin-left:20px;
}

.media-more {
    margin-top:100px;
}

.link {
    color:#fff;
}

.link:hover {
    color:rgba(255,255,255,0.8);
}








/* ======================================================================== */
/* ============================ STYLES FOR 480 ============================ */
/* ======================================================================== */


.home-image {
    background: #000 url('images/home-page-image-med.jpg') no-repeat top left 100%;
}









/* ======================================================================== */
/* ============================ STYLES FOR 768 ============================ */
/* ======================================================================== */

@media (min-width: 768px) {
    
    .wrapper {
        width:768px;
        margin-left:20px;
    }

    nav ul {
        margin-left:-70px;
    }

    nav li {
        margin-left:-20px;
    }

    .home-image {
        background: #000 url('images/home-page-image-med.jpg') no-repeat top left 100%;
    }

    .easter-image {
        background: #000 url('images/easter-image-med.jpg') no-repeat 100%;
        background-position: top;
    }

    .christmas-image {
        background: #000 url('images/christmas-2023-md.jpg') no-repeat 100%;
        background-position: top;
    }

    .vbs-image {
        background: rgb(255, 255, 255) url('images/vbs-image-med.jpg') no-repeat 100%;
        background-position: top;
    }

    .beliefs-image {
        background: #000 url('images/beliefs-image-med.jpg') no-repeat top left 100%;
    }

    .media-left {
        float:left;
        width:25%;
    }

    .media-right {
        float:left;
        width:70%;
    }
    
    .christmas-content {
        margin-top:500px;
    }
}














/* ======================================================================== */
/* ============================ STYLES FOR 960 ============================ */
/* ======================================================================== */


@media (min-width: 960px) {

    .wrapper {
        width:960px;
        margin:0 auto;
    }

    nav li {
        margin-left:-40px;
    }

    .home-image {
        background: #000 url('images/home-page-image.jpg') no-repeat top left 100%;
    }

    .easter-image {
        background: #000 url('images/easter-image.jpg') no-repeat 100%;
        background-position: top;
    }

    .christmas-image {
        background: #000 url('images/christmas-2023.jpg') no-repeat 100%;
        background-position: top;
    }

    .christmas-content {
        margin-top:1050px;
    }

    .vbs-image {
        background: rgb(255, 255, 255) url('images/vbs-image.jpg') no-repeat 100%;
        background-position: top;
    }

    .beliefs-image {
        background: #000 url('images/beliefs-image.jpg') no-repeat top left 100%;
    }

    .home-content div, .about-content div, .staff-content div, .beliefs-content div, .content div {
        margin-top:50px;
    }

    .header-space-holder {
        height: 0;
        margin-bottom: 0;
    }
}