@charset "utf-8";
/* CSS Document */

p {
    margin: 0 0 20px 0;
}

#header h1, #pixels {
    color: #48941A;
}

.float-left {
    float: left;
    margin: 0 0 0 20px;
}

.float-right {
    float: right;
    margin: 0 20px 0 0;
}

.center {
    font-size: 2.5em;
    padding: 80px 0 0 0;
    text-align: center;
    width: 100%;
}

#nav {
    list-style: none;
    position: fixed;
    right: 20px;
}

#nav li {
    margin: 0 0 15px 0;
}

#header, #intro, #second {
    width: 100%;
}

.img-effect {
    width: 100%;
    height: 50%;
    position: absolute;
}

#banner {
    background: url(../images/logos/NZBC-wall.jpg) center center no-repeat fixed;
    background-size: cover; /* Ensures the image covers the entire banner area */
    color: white;
    height: 720px;
    margin: 0 auto;
    padding: 0;
	margin-top: 40px;
}

#banner2 {
    background: url(../images/church.jpg) 50% 0 no-repeat fixed;
    color: white;
    height: 720px;
    margin: 0 auto;
    padding: 0;
}

#intro {
    background: url(../images/countdown.jpg) no-repeat fixed;
    background-position: 50% 0 !important;
    color: white;
    height: 528px;
    margin: 0 auto;
    padding: 0;
}

#second {
    background: url(../images/secondbg.jpg) no-repeat fixed;
    background-position: 50% 70% !important;
    color: white;
    height: 528px;
    margin: 0 auto;
    padding: 0;
}

#third {
    background: url(../images/third.jpg) no-repeat fixed;
    color: white;
    height: 630px;
    margin: 0 auto;
    padding: 0;
}

	#fifth {
    background: url(../images/churchfront.jpg) 10% 0 no-repeat fixed;
    background-size: cover; /* Default size */
    color: white;
    margin: 0 auto;
    padding: 0;
    height: 100vh; /* Ensure a fixed height for the section */
}

@media screen and (max-width: 768px) {
    #fifth {
       background: url(../images/churchfront_small.jpg) 20% 0 no-repeat fixed;
	   background-position: center center; /* Center the image */
        height: auto; /* Allow the height to adjust */
    }
}

@media screen and (max-width: 480px) {
    #fifth {
		  background: url(../images/churchfront_small.jpg) 20% 0 no-repeat fixed;
        background-position: center center; /* Center the image */
        height: auto; /* Allow the height to adjust */
    }
}


	#fifth {
    background: url(../images/churchfront.jpg) 10% 0 no-repeat fixed;
    background-size: cover; /* Default size */
    color: white;
    margin: 0 auto;
    padding: 0;
    height: 100vh; /* Ensure a fixed height for the section */
}


}

.story {
    margin: 0 auto;
    min-width: 980px;
    overflow: auto;
    width: 980px;
}

.story .float-left, .story .float-right {
    padding: 100px 0 0 0;
    position: relative;
    width: 350px;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    /* Adjust the story container to full width */
    .story {
        width: 100%;
        min-width: 100%;
        padding: 20px;
    }
    
    /* Remove float and margin adjustments for mobile */
    .float-left, .float-right {
        float: none;
        margin: 0;
        width: 100%;
        padding: 20px 0;
    }

    /* Resize headers and sections */
    .center {
        font-size: 1.8em;
        padding: 40px 0 0 0;
    }

    /* Adjust banner height and background properties */
    #banner, #banner2, #intro, #second, #third, #fifth {
		margin-top:20px;
        height: auto;
        background-size: cover;
        background-attachment: scroll;
        padding: 20px;
    }

    /* Set fixed background images to scroll */
    #intro.fixed-bg, #second.fixed-bg, #third.fixed-bg {
        background-attachment: scroll !important;
    }
}