/*CSS for small screens such as Ipads and Note Pads*/




 Body {
    
   background-color: #8C001A; 
}

#flyer1 {

    width: 50%;
}

#cal {
    display: block;
    margin: auto;
    width: 50%;
}


#mediaBG {
    background-color: #ffffff;
}

#galleryBG {
    background-color: goldenrod;
}


#ministers {
    background-color: #8C001A;
    
}

#ministers h2 {
    text-align: center;
}

.ministers {
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    text-align: center;

}

.ministers p {
    text-align: center;
    font-size: 15px;
    padding-bottom: 15px;
    color: #a4a1a1;
}

.ministers img {
    max-width: 100%;
}

.board p {
    text-align: center;
    font-size: 15px;
    padding-bottom: 15px;
    color: #a4a1a1;
}

.board {
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.board img {
    max-width: 100%;
}

#menuback {display: none; padding: 20px;}
#A-menuback {display: none; padding: 20px;}
#giving-menuback {display: none; padding: 20px;}

#give {width: 100%;}

#givetext {
    color: #ffffff;
    text-shadow: 2px 1.5px #000000;
    margin-top: 70px;
    padding: 5px;
    font-size: 1.5em;
    text-align: center;
}

#bankbutton {
    width: 30%;
    margin-top: 75px;

}

#banner1 {
    
    display: block;

}

#dance {
    width: 100%;
    height: 225px;
    object-fit: cover; /*Object-fit makes images work like Background image parameters*/
    object-position: 0px -170px;  /* the 0px is no position change left to right.  -250px is bringing img up*/
}

#banner2 {
    
    display: block;

}

#media {
    display: inline-block;
    width: 100%;
    height: 768px;
    margin: 0 auto;
    text-align: center; /*Aligns Images and text*/
    color: #ffffff;
}

#banner3 {
    
    display: block;

}

#pictures {
    width: 100%;
    height: 175px;
    object-fit: cover;
    object-position: 0px -230px;  /* the 0px is no position change left to right.  -250px is bringing img up*/
    
    
    
}


#aboutBG {
    color: #ffffff;
    background-image: url(../img/six.png);
    background-repeat: no-repeat;
    background-attachment: local;
    background-position: right;
    background-position-y: -2px;
    background-size: 35%;
    
    
}

#about {
    width : 60%;
    height: 800px;
    float: left;
    margin: 30px auto;
    padding: 1%;
}

#about h3 {
    color: goldenrod;
    font-size: 3vw;
}

#pastor h2 {
    margin-top: 100px;
    color: rgb(237, 234, 234);
    font-size: 3vw;

}

#pastor {
    width: 900px;
    height: 2000px;
    margin: 0 auto;
    text-align: center; /*Aligns Images and text*/
    
}

#pastor img {
    width: 300px;
    padding: 10px 0;
}

#give {
    width: 100%;
    height: 768px;
    margin: 0 auto;
    text-align: center; /*Aligns Images and text*/
    color: #ffffff;
}

#giving h2 {color: #ffffff;}

a {font-size: 1em;}
a:link {color:white; text-decoration:none; padding: 2px;}
a:visited {color:white; text-decoration:none; padding: 2px}
a:hover {color:#8C001A; text-decoration:none; background-color: goldenrod; padding: 2px}

#give a:link {color:transparent; text-decoration:none;}
#give a:visited {color:transparent; text-decoration:none;}
#give a:hover {color:transparent; text-decoration:none; background-color:transparent; padding:}

#top {
    display: none;
    max-width: 320px;
    margin: 0px auto;
    
}

#top p {
    font-size: 1em;
    color: white;
    text-align: center;
}

#churchtop {
    display: block;
    max-width: 250px;
    margin: 10px auto;
    border: 2px solid goldenrod;
    
    
}

#menu {
    
    display: block;
    height: 30px;
    margin: auto;
    text-align: center;   /*centering text in a div*/
    vertical-align: middle;
    line-height:30px ;
    background-color: #8C001A;
}

#contactBG {
    color: #ffffff;
    background-image: url(../img/contact.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position-y: -745px;
    background-size: cover;
    
}

#contact {
    width: 100%;
    height: 768px;
    margin: 0 auto;
    text-align: center; /*Aligns Images and text*/
    
}


#contact h2 { font-size: 4vw; color: #ffffff; padding-top:100px;}

#contact p {
    padding-left: 20px;
    text-align: left;
    font-size: 3vw;
    
}

#contact span a {
    font-size: 2.5vw;
}

#contact a {font-size: 3vw; text-decoration: none;}
#contact a:link {color: goldenrod; text-decoration:none; padding: 2px;}
#contact a:visited {color: goldenrod; padding: 2px}
#contact a:hover { color: #8C001A; padding: 2px}

#pastorBG {
    background-image: url(../img/dummy.jpeg);
    background-repeat: no-repeat;
    background-attachment: local;
    background-position-y: -300px;
    background-size: cover;
    
}

#pastor img {
    width: 300px;
    padding: 10px 0;
}

#pastor {
    width: 800px;
    height: 1100px;
    margin: 0 auto;
    text-align: center; /*Aligns Images and text*/
    
}

#pastor p {
    text-align: left;
    font-size: 3vw;
    font-family: brush script MT, Dancing Script;
    color: #ffffff;
}
#paragraph {
    padding-bottom: 120px;
}


#announcements {
    width: 100%;
    height: 100%; /* keep height at 900px so Flyer can fit fully*/
    
}

#announcements img {
    max-width: 100%;
    margin-top: 50px;
    margin-bottom: 15px;
    box-shadow: 10px 10px 30px #000000;
}

.announce {color:black ; font-size: 200%; margin-top: 30px;}

/**************************************
This is the start of the Gallery Images
**************************************/

/*when you float elements, they do not take up space so your background can disappear. Use Overflow hidden in the Container div*/
/*in the HtML I made all images the same width in the img tag*/
#gall {
    width: 100%;
    overflow: hidden; 
    
    
    
}

#gall img {
    max-width: 100%;
}

#gall ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

#gall li {
    float: left;
    width: 28.3333%; /* the width and margin is set to equal 100% width of screen. This particular set up gives 3 columns*/
    margin: 2.5%;
}

/**************************
Left and Right Sections
***************************/
h1 {                               
    font-size: 9vw;
    font-family: brush script MT, Dancing Script;
    display: inline-block;
    text-shadow: 3px 3px #000000;
    line-height: 120px;

}

#about h3 {  padding-bottom: 100px;}


.board {
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.board img {
    max-width: 100%;
}

#leaders {
    margin: 0;
    padding: 0;
    list-style: none;
}

#leaders li {
    display: inline-block;
    width: 25%;
    margin: 2.5% auto;
}

#deacons {
    margin: 0;
    padding: 0;
    list-style: none;
}

#deacons li {
    float: left;
    width: 25%;
    margin: 2.5% auto;
}


.lower {
    font-size: 4vw;
}

#memorial {
    margin-left: 0px;
}


#left  {
    max-width: 40%;
    height: 768px;
    display: block;
    float: left;
    color: goldenrod;
    text-align: left;
    background-color: #8C001A;
    margin-top: 70px;
    padding-left: 10%;
    margin-left: 6%;
    
}
   
#right {
    max-width: 45%;
    height: 768px;
    display: block;
    float: right;
    margin-right: 13%;
    margin-top: 75px;
    background-color: #8C001A;
}

#cross {
    display: block;
    margin: 30px auto;
    max-width: 25%;
}

#church {
    display: block;
    margin: 0 auto;
    border: 7px solid goldenrod;
    max-width: 60%;
}

#scripture {
    margin-top: 60px;
    text-align: center;
    color: white;
    font-size: 1.5em;
}

/***********************************
Start of Footer Section
***********************************/
footer {
    background-color: dimgray;
    width: 100%;
    margin: 0px;
    margin-top: 30px;
    padding: 0px;
}

#map { 
    width: 30%;
    float: left;
    padding-top: 0px;
    margin: 25px;

}

#footermenu {
    display: block;
    float: left;
    margin-top: 25px;
    padding-left: 50px;
    
}

#footermenu a {
    display: block;
    margin-bottom: 4%;
    color: #a4a1a1;
    
}

#copyright {
    float: right;
    padding-top: 20%;
    padding-right: 25px;
    padding-bottom: 0px;
    font-size: 1em;
    color:#a4a1a1;
}