body{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}

.skip-links a {
color: white; 
}






/*HEADER*/

.headerContainer { 
display: inline-flex;
width: 100%; height: 100px;
border-bottom: 1px solid grey;
}

.logo {
display: inline-flex;
vertical-align: top;
width: 300px;
height; 50px;
}  

.headerleft {
float: left 70%;
background-color: white;
width: 1700px
}

.donatebutton {
background-color: red;
width: 200px;
float:left 30%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
font-size: 20px;
font-family: sans-serif;

}

button {
font-size: 15px;
}








/*NAV bar*/

.primarynav {
display: inline-block;
padding: 5px 70px;
text-align: center;
font-family: sans-serif;

}

.current {
border-bottom: solid 3px black;
}

.nav-bar ul{ 
padding: 0px;
margin-top: 40px auto;
text-align: center;
display: inline-block;
vertical-align: top;
float: right;
display: flex;
justify-content: space-around;
font-size: 130%;
font-weight: bold;
}


.nav-bar {
width: 100%;
height: 100px;
background-color: white;
display: flex;
justify-content: space-evenly;
text-decoration: none;
}








/* hyperlink decoration*/

 .hlblack {
color: black;
text-decoration: none;
}








/*FOOTER*/

.footer {
    
background-color: black;
color: white;
width: 100%;
}

.footerlogos {
 width: 80%;
float: left;
background-color: black;
height: 70px;
padding-top: 10px;


    
}

.footerstamp {
width: 20%;
float: left;
background-color: black;
height: 70px;
padding-top: 10px;

}






/* HOMEPAGE CONTENT*/


h1 {
    
text-align: center;
font-family: sans-serif;

}

.homepagecontainer1 {
    
display: inline-flex;
width: 100%;
margin-bottom: 10px;
font-family: sans-serif;

}

.aboutus {
background-color: limegreen;
width: 50%;
padding: 20px;
margin-left: 200px;
margin-right: 50px;
font-size: 120%;
text-align: center
}

.whatweoffer {
background-color: limegreen;
width: 50%;
padding: 20px;
margin-left: 50px;
margin-right: 200px;
font-size: 120%;
text-align: center
}

hr {
    
width: 65%;
margin-left: auto;
margin-right: auto;
margin-top: 0px;

}

.homepagecontainer2 {
    
display:flex;
justify-content: center;
width: 100%;
margin-top: 40px;
margin-bottom: 40px;
font-family: sans-serif;

}

.homepagecontainer2 > div {
margin-left: 30px;
margin-right: 30px;
}

.box1{ 
background-color: 
midnightblue;
color: white;
text-align: center;
height: 350px;
width: 250px;
font-size: 25px;
}

.box2 {
background-color: 
midnightblue;
color: white;
text-align: center;
height: 350px;
width: 250px;
font-size: 25px;

  
}

.box3 {
background-color: midnightblue;
color: white;
text-align: center;
height: 350px;
width: 250px;
font-size: 25px;

}

.hph4 {
text-align: center;
font-size: 30px;
padding-bottom: 15px;
padding-top: 20px;
background-color: antiquewhite;
font-family: sans-serif;
}


.homepagecontainer3{   
display:flex;
justify-content: center;
width: 100%;
height: 100%;
margin-top: 0px;
padding-bottom: 65px;
font-family: sans-serif;
background-color: antiquewhite;

}

.homepagecontainer3 > div {
margin-left: 30px;
margin-right: 30px;
}

.box4 {
background-color: white;
text-align: center;
height: 450px;
width: 250px;
font-size: 25px;

}

.box5 {
background-color: white; 
text-align: center;
height: 450px;
width: 250px;
font-size: 25px;
}

.box6 {
background-color: white; 
text-align: center;
height: 450px;
width: 250px;
font-size: 25px;
}







/*GET INVOLVED CONTENT*/

.getinvolvedheader

{
background-color: #D22B2B;
color: white;
font-family: sans-serif;
text-align: center;
font-size: 30px;
width: 100%;
height: auto;
}

.involvedcontainer1{
 display:flex;
justify-content: center;
width: 100%;
height: 100%;
margin-top: 20px;
font-size: 22px;
font-family: sans-serif; 
margin-right: 480px;
}

.involvedbox1 {
width: 800px;
height:auto;
box-shadow: 6px 4px 4px grey;
padding-bottom: 8px; }

.involvedcontainer2 {
display:flex;
justify-content: center;
width: 100%;
height: 100%;
margin-top: 50px;
margin-bottom: 50px;
font-size: 18px;
font-family: sans-serif;  
}

.involvedcontainer2 > div {
margin-left: 60px;
margin-right: 60px;
}
.involvedbox2 {
font-family: sans-serif;
text-align: center;
width: 400px;
height: auto; 
}

.involvedbox3 {
font-family: sans-serif;  
width: 400px; 
height: 400px;
text-align: center;  
 background-color: black;
margin-top: 120px;
box-shadow: 10px 10px 10px;
}

.involvedbox4 {
  font-family: sans-serif;  
width: 400px; 
height: 400px;
text-align: center;  
margin-top: 120px;
box-shadow: 10px 10px 10px;  
    
}






/*FIND FOOD CONTENT*/

.findfoodheader {
background-color: midnightblue;
color: white;
font-family: sans-serif;
text-align: center;
font-size: 30px;
width: 100%;
height: auto;
}

.findfoodcontainer1 {
display:flex;
justify-content: center;
width: 100%;
height: 100%;
margin-top: 0px;
font-size: 20px;
font-family: sans-serif;
}

 .findfoodcontainer1 > div {
margin-left: 60px;
margin-right: 60px;
}

.findfoodbox1 {
text-align: center;
height: 300px;
width: 400px;
margin-top: 30px;
   
}

.findfoodbox2 {
text-align: center;
height: 300px;
width: 400px;
margin-top: 30px;  
}

.greenlist {
color: green;
text-align: start;
}

.findfoodheader1 {
background-color: firebrick;
color: white;
text-align: center;
font-family: sans-serif;
padding-top: 20px;
padding-bottom: 20px;
font-size: 25px;
}

.findfoodcontainer2 {
display:flex;
justify-content: center;
width: 100%;
height: 100%;
margin-top: 0px;
font-size: 20px;
font-family: sans-serif;
}

.findfoodcontainer2 > div {
margin-left: 60px;
margin-right: 60px;
}

.findfoodbox3 {
 text-align: center; 
margin-top: 45px;
height: 570px;
width: 400px;
}

.findfoodbox4 {
text-align: center;
width: 400px;
height: 570px;
margin-top: 45px;
}

.instruction {
color: dimgray;
}

.findfoodheader2 {
background-color: forestgreen;
color: white;
text-align: center;
font-family: sans-serif;
padding-top: 20px;
padding-bottom: 20px;
font-size: 25px;
}

.findfoodcontainer3 {
text-align: center;
font-family: sans-serif;
font-size:20px; 
background-color: white;
display: flex;
align-items: center;
justify-content: center;
}

.findfoodbox5 {
width: 400px;
height:560px;
margin-top: 40px;
}

.findfoodcontainer4 {
display:flex;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 40px;
margin-bottom: 40px;
font-family: sans-serif;  
}

.findfoodbox6 {
text-align: center;
font-family: sans-serif;
font-size: 20px;
width 400px;
height: 1500px;
margin-left: 200px;
margin-right: 25px;
padding: 20px;
}

.findfoodbox7 {
text-align: center;
font-family: sans-serif;
font-size: 20px; 
width 400px;
height: 1500px;
margin-right: 200px;
margin-left:25px;
border-left: 2px solid darkred;
padding: 20px;
}

.foodbanksubheading{
font-size: 25px;
color: darkred;
}

.findfoodheader3 
{
background-color: royalblue;
color: white;
text-align: center;
font-family: sans-serif;
padding-top: 20px;
padding-bottom: 20px;
font-size: 25px;
}

.findfoodcontainer5 > div {
margin-left: 60px;
margin-right: 60px;
}

.findfoodcontainer5 {
display:flex;
justify-content: center;
width: 100%;
height: 100%;
margin-top: 0px;
font-size: 20px;
font-family: sans-serif;
}


.findfoodbox8 {
text-align: center; 
margin-top: 45px;
height: 370px;
width: 400px;  
}

.findfoodbox9 {
text-align: center;
width: 400px;
height: 370px;
margin-top: 45px;
}

.soupkitchen {
height:400px;
width: 500px;

}

.findfoodcontainer6 {
display:flex;
justify-content: center;
width: 100%;
height: 100%;
margin-top: 0px;
font-size: 20px;
font-family: sans-serif;   
}

.findfoodcontainer6 > div {
margin-left: 60px;
margin-right: 60px;
}

.findfoodbox10 {
font-family: sans-serif;
text-align: center;
width: 400px;
height: auto;  
}

.findfoodbox11 {
font-family: sans-serif;  
width: 400px; 
text-align: center;
}

.findfoodcontainer7 {
 display:flex;
justify-content: center;
width: 100%;
height: 100%;
margin-top: 0px;
font-size: 22px;
font-family: sans-serif; 
margin-right: 480px;
}

.findfoodbox12 {
width: 1000px;
height:auto;
box-shadow: 6px 4px 4px grey;
padding-bottom: 8px;
}


.findfoodheader4 
{
background-color: yellow;
color: black;
text-align: center;
font-family: sans-serif;
padding-top: 20px;
padding-bottom: 20px;
font-size: 25px;
}

.findfoodcontainer8 {
 display: flex;
flex-direction: column;
align-content: center;
align-items: center;
align-self: center;
width: 100%;
height: 100%;
margin-top: 0px;
font-family: sans-serif;
font-size: 20px
}   

.findfoodcontainer8 > div
{
margin:30px;
}

.findfoodbox13 {
 font-family: sans-serif;
text-align: center;
width: 600px;
height: 100px;  
background-color: floralwhite;
padding: 15px;
margin: 0px;
border-bottom: solid 1px grey;
font-size: 20px;
box-shadow: 6px 4px 4px grey;
}

.findfoodbox13pt2 {
 font-family: sans-serif;
text-align: center;
width: 700px;
height: 150px;  
padding-bottom: 60px;
padding-top: 20px;
margin: 0px;
border-bottom: solid 1px grey;
font-size: 22px; 
}

.findfoodcontainer9 {
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
align-self: center;
width: 100%;
height: 100%;
margin-top: 0px;
font-family: sans-serif;
font-size: 20px  
}

.findfoodcontainer9 > div
{
margin:30px;
}

.findfoodbox14 {
font-family: sans-serif;
text-align: center;
width: 800px;
height: auto;  
padding-bottom: 60px;
padding-top: 20px;
margin-left: 90px;
font-size: 22px;    
}










/*FURTHER SUPPORT CONTENT*/

.furthersupportheader

{
background-color:forestgreen;
color: white;
font-family: sans-serif;
text-align: center;
font-size: 30px;
width: 100%;
height: auto;
}

.supportcontainer1 {
 display:flex;
justify-content: center;
width: 100%;
height: 100%;
margin-top: 0px;
font-size: 20px;
font-family: sans-serif;   
    
}

.supportcontainer1 > div {
 margin-left: 60px;
margin-right: 60px;   
    
}

.supportbox1 {
 text-align: center;
height: 300px;
width: 400px;
margin-top: 30px;
    
}

.supportbox2 {
 text-align: center;
height: 300px;
width: 400px;
margin-top: 30px;   
    
}

.supportheader1 {
background-color: midnightblue;
color: white;
text-align: center;
font-family: sans-serif;
padding-top: 20px;
padding-bottom: 20px;
font-size: 25px;    
}

.supportcontainer2 {
    
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
align-self: center;
width: 100%;
height: 100%;
margin-top: 0px;
font-family: sans-serif;
font-size: 20px  
    
}

.supportbox3 {
font-family: sans-serif;
text-align: center;
width: 800px;
height: auto;  
padding-bottom: 60px;
padding-top: 20px;
padding-left: 15px;
padding-right: 15px;
margin-left: 90px;
margin-top: 50px;
font-size: 22px;
background-color: whitesmoke;
box-shadow: 6px 8px 8px    
}

.supportheader2 {
background-color: forestgreen;
color: white;
text-align: center;
font-family: sans-serif;
padding-top: 20px;
padding-bottom: 20px;
font-size: 25px;       
    
}

.supportcontainer3 {
display:flex;
justify-content: center;
width: 100%;
margin-top: 40px;
margin-bottom: 0px;
font-family: sans-serif; 
}

.supportcontainer3 > div {
margin: 30px;   
}

.supportbox4 {
background-color: darkkhaki;
color: black;
text-align: center;
height: 320px;
width: 300px;
font-size: 20px;
padding:15px;
margin: 30px;
box-shadow: 5px 7px 7px;
}

.supportcontainer4 {
 display:flex;
justify-content: center;
width: 100%;
margin-top: 0px;
margin-bottom: 40px;
font-family: sans-serif;    
}

.supportheader3 {
 background-color: red;
color: white;
text-align: center;
font-family: sans-serif;
padding-top: 20px;
padding-bottom: 20px;
font-size: 25px;           
}


.supportbox5 {
 background-color: lightgray;
color: black;
text-align: center;
height: 320px;
width: 300px;
font-size: 20px;
padding:15px;
margin: 30px;
box-shadow: 5px 7px 7px;   
}

.supportheader4 {
background-color:yellow;
color: black;
text-align: center;
font-family: sans-serif;
padding-top: 20px;
padding-bottom: 20px;
font-size: 25px;  
}

.supportbox6 {
 background-color: lemonchiffon;
color: black;
text-align: center;
height: 320px;
width: 300px;
font-size: 20px;
padding:15px;
margin: 30px;
box-shadow: 5px 7px 7px;  
}

.supportheader5{
background-color:royalblue;
color: white;
text-align: center;
font-family: sans-serif;
padding-top: 20px;
padding-bottom: 20px;
font-size: 25px;    
}

.supportcontainer5 {
 display:flex;
justify-content: center;
width: 100%;
height: 100%;
margin-top: 20px;
font-size: 22px;
font-family: sans-serif; 
margin-right: 480px;
}

.supportbox7 {
width: 1000px;
height:auto;
box-shadow: 6px 4px 4px grey;
padding-bottom: 8px; }

.supportcontainer6 {
 display: flex;
flex-direction: column;
align-content: center;
align-items: center;
align-self: center;
width: 100%;
height: 100%;
margin-top: 20px;
font-family: sans-serif;
font-size: 20px     
    
}

.supportcontainer6 > div
{
margin:30px;
}

.supportbox8 {
font-family: sans-serif;
text-align: center;
width: 800px;
height: auto;  
padding-bottom: 40px;
padding-top: 20px;
margin-left: 90px;
margin-top: 20px;
font-size: 22px;   
    
}

/*CONTACT US CONTENT*/
.contactusheader {
background-color: teal;
color: white;
font-family: sans-serif;
text-align: center;
font-size: 30px;
width: 100%;
height: auto;
}


.contactuscontainer1 {
  display: flex;
flex-direction: column;
align-content: center;
align-items: center;
align-self: center;
width: 100%;
height: 100%;
margin-top: 0px;
font-family: sans-serif;
font-size: 20px  
}

.contactuscontainer1 > div
{
margin:30px;
}

.contactusbox1 {
font-family: sans-serif;
text-align: center;
width: 800px;
height: auto;  
padding-bottom: 60px;
padding-top: 20px;
margin-left: 90px;
font-size: 22px;
}

.privacypolicy {
 color: dimgrey;
padding: 30px;

}