body {
  margin: 0;
  font-family: Helvetica, sans-serif;
  background-color: #FFFFFF;

}
 html {font-size: 62.5%;
}

a {
  color: #000;
}

/* header */

.header {
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  position: fixed;
  width: 100%;
  z-index: 3;
  background-image: linear-gradient(to right ,#008000, #FFFFFF);
  /* margin-bottom: 1rem;  */
  /* max-height: 23%;  */
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.header li a {
  display: block;
  padding: 2.5rem 2.5rem;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
  font-size: 2rem;
  background-color: #fff;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: #BECFDD;
}

.header .logo {
  width: 20%;
  max-width: 25%;
  display: block;
  float: left;
  padding: .8rem;
  max-height: 10rem;
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: background .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  float: right;
  padding: 2.8rem 2rem;
  position: relative;
  user-select: none;
}

.header .menu-icon .nav-icon {
  background: #333;
  display: block;
  height: .3rem;
  position: relative;
  transition: background .2s ease-out;
  width: 2rem;
}

.header .menu-icon .nav-icon:before,
.header .menu-icon .nav-icon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .nav-icon:before {
  top: .5rem;
}

.header .menu-icon .nav-icon:after {
  top: -.5rem;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 35rem;
  border-radius: 1rem;
}

.header .menu-btn:checked ~ .menu-icon .nav-icon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .nav-icon:before {
  transform: rotate(-45deg);
  top:0;
}

.header .menu-btn:checked ~ .menu-icon .nav-icon:after {
  transform: rotate(45deg);
  top:0;
}
/* end of header and burger menu*/


h2{
  font-size: 3rem;
}

p{
  font-size: 2rem;
  padding-right: 1rem;
  padding-left: 1rem;
}

.about-batreach{
  border-radius: 2rem;
  margin-top: 15rem;
  padding-top: 2rem;
  padding-left: 1rem;
  margin-bottom: 1rem;
  display: inline-block;
  background-image: linear-gradient(to right ,rgba(5,127,5,0.90), rgba(245,255,247,1.0));
}
.about-image{
  border-radius: 2.5rem;
  padding-left: .2rem;
  padding-right: 2rem;
  padding-bottom: 1rem;
  float: left;
  width: 30%;
 }

/*  our  mission  */
.mission{
  margin-top: 2rem;
  padding-top: 1rem;
  padding-left: 1rem;
  display: inline-block;
  background-image: linear-gradient(to left ,rgba(5,127,5,0.98), rgba(245,255,247,1.0));
  border-radius: 2rem;
  margin-bottom: 1rem;
}
.mission-image{
 padding-left: .5rem;
 padding-right: .5rem;
 padding-bottom: .2rem;
 margin-bottom: 2rem;
 float: right;
 width: 30%;
 border-radius: 2rem;
}

.visit{
 margin-top: 2rem;
 padding-top: 1rem;
 padding-left: 1rem;
 display: inline-block;
 background-image: linear-gradient(to right ,rgba(5,127,5,0.98), rgba(245,255,247,1.0));
 border-radius: 2rem;
 margin-bottom: 2rem;
}

  .visit-image{
    padding-left: .5rem;
    padding-right: 1rem;
    padding-bottom: .2rem;
    margin-bottom: 2rem;
    float: left;
    width: 20%;
    border-radius: 2rem;
   }

   .volunteer{
     margin-top: 2rem;
     padding-top: 1rem;
     padding-left: 1rem;
     display: inline-block;
     background-image: linear-gradient(to left ,rgba(5,127,5,0.98), rgba(245,255,247,1.0));
     border-radius: 2rem;
     margin-bottom: 2rem;
   }
   .volunteer-image{
    padding-left: .5rem;
    padding-right: .5rem;
    padding-bottom: .2rem;
    margin-bottom: 2rem;
    float: right;
    width: 30%;
    border-radius: 2rem;
   }

.donate-header{
  font-size: 5rem;
  text-align: center;
  color: #FFFFCC;
  text-shadow: 4px 4px #173D00;
}

   .donate{
     margin-top: 2rem;
     padding-left: 1rem;
     display: inline-block;
     background-image: linear-gradient(to right ,rgba(5,127,5,0.98), rgba(245,255,247,1.0));
     border-radius: 2rem;
     margin-bottom: 1rem;
   }


  .general-text{
    padding: 1rem;
    margin-top: 5%;
    margin-left: 8%;
    margin-bottom: 5rem;
    width: 80%;
    border-radius: 2rem;
}


@media (min-width: 70rem) {
  .header{
    height: 14%;
  }
  .header .logo{
    width: 20%;
    max-width: 30%;
    max-height: 90%;
  }
  .header li {
    float: right;
    padding-top: 4rem;
    padding-right: 4rem;
  }
  .header li a {
    padding: 1rem 3rem;
    border-radius: 2rem;
  }
  .header .menu {
    clear: none;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }

  p{
    font-size: 3rem;
  }


  body{
  background-image: url(barronfalls3.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

.about-batreach{
  float: right;
  width: 50%;
  max-width: 55%;
  border-radius: 25%;
  margin-top: 30rem;
  padding-top: 1rem;
  padding-left: 4rem;
  padding-bottom: 3rem;
  padding-right: 2rem;
  margin-bottom: 2rem;
  margin-right: 2rem;
  display: inline-block;
  color: white;
  background-image: linear-gradient(to right ,rgba(0,0,0,0.70), rgba(77,77,77,0.65));
}

.about-header{
  text-align: center;
}

.about-image{
  margin-right: 2rem;
}

.mission{
  background-image: linear-gradient(to right, rgba(0,0,0,0.7), rgba(77,77,77,0.65));
  width: 50%;
  max-width: 55%;
  border-radius: 25%;
  color: white;
  padding-left: 5rem;
  padding-bottom: 1rem;
  padding-right: 2rem;
  margin-left: 2rem;
  margin-right: 40rem;
  margin-bottom: 3rem;
}

.mission-header{
  text-align: center;
}

.visit{
  float: right;
  background-image: linear-gradient(to right, rgba(0,0,0,0.7), rgba(77,77,77,0.65));
  width: 70%;
  max-width: 85%;
  border-radius: 25%;
  color: white;
  padding-left: 4rem;
  padding-bottom: 3rem;
  margin-right: 3rem;
}
.visit-image{
  margin: 2rem;
}
.visit-header{
  text-align: center;
}

.volunteer{
  background-image: linear-gradient(to right, rgba(0,0,0,0.7), rgba(77,77,77,0.65));
  width: 70%;
  max-width: 85%;
  border-radius: 25%;
  color: white;
  padding-left: 5rem;
  padding-bottom: 1rem;
  padding-right: 2rem;
  margin-left: 2rem;
  margin-right: 40rem;
  margin-bottom: 3rem;
}
.volunteer-header{
  text-align: center;
}
.volunteer-image{
  width: 40%;
}

.donate-header{
  color: #A6A6A6;
  text-shadow: 2px 2px #FFFFCC;
  text-align: center;
  font-size: 5rem;
}
.donate{
  background-image: linear-gradient(to left, rgba(0,0,0,0.7), rgba(77,77,77,0.65));
  width: 90%;
  max-width: 95%;
  border-radius: 25%;
  color: white;
  padding-left: 5rem;
  padding-bottom: 1rem;
  padding-right: 2rem;
  margin-left: 2rem;
  margin-bottom: .3rem;
}

.general-text{
/*  background-image: linear-gradient(to right ,rgba(0,0,0,0.70), rgba(77,77,77,0.65));  */
 margin-left: 8%;
 color: white;
}
.general-text p{
  font-size: 2rem;
}
}