header, section, footer, aside, nav, main, article, figure {
  display: block;
}

html,
body {
height: 100%;
position: relative;
}

/* Header section */
header{
  padding: 3px 20px; 
  background-color: #673B90;
  color: white;
  text-align: left;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  height: 170px;
} 
.headerLeft{
  padding: 0;
  padding-left: 10%;
}
.headerItems{
  display: inline-block;
  padding: 0 10%;
}
#headerImg{
  display:none;
}

.topRight{
  display: inline-block; /* Puts the bulleted list items in a line */
  font-size: 1em; /* assigns font size to the nav text */
  padding: 5px 5px;
  margin: 5px 6px;
  color: white;
  text-decoration: none; /* no underline or special elements on the text */
  margin-top: 20%;
}

#headerRight{
  margin-right: 10%;
  text-align: right;
}

#navLinks{
  margin-top: -43px;
  }
  /* navigation  */
  #nav {
    margin: 0 auto;    /* Margin and padding set to 0 make the nav bar right */
    padding: 0 40px;   /*under the main header and right above the banner */
    background-color: #7EC056; 
    overflow: hidden;
    height: 86px;
    width: 80%;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 34px;
    z-index: 950;
  }
  
  .navItems {
    display: inline-block; /* Puts the bulleted list items in a line */
    font-size: 1.2em; /* assigns font size to the nav text */
    font-weight: bold;
    padding: 5px 10px;
    margin: 5px 6px;
    color: white;
    text-decoration: none; /* no underline or special elements on the text */
    margin-top: 18px;
  }
  
  .navItems:hover { /* when the user's mouse is over and element the bg color will change */
    color: #673B90;
  }
  .active{
    border-bottom: 3px #673B90 solid ;
  }
  
  #navArea{
    text-align: right;
    margin: 0 auto;
  }
  .navItems:nth-child(2),.navItems:nth-child(3),.navItems:nth-child(4){
    float: left;
  }
  .navItems:nth-child(3),.navItems:nth-child(4),.navItems:nth-child(5),.navItems:nth-child(6),.navItems:nth-child(7){
    display: inline-block;
  }
  
  #navImgDiv{
    position: absolute;
     left: 42%;
     top: 60px;
     z-index: 1000;
     width: 210px;
     height: 210px;
     background-color: white;
     border-radius: 50%;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
  } 
  #navImg{
     width: 180px;
     display:block;
     position: absolute;
     left: 9%;
     top: 14%;
  
  }
  #nav-toggle{
     display: none;
  }
  /* Banner */
  #banner{
    position:relative;
    width: 80%;
    height: auto;
    z-index: -1;
    margin: 0 auto;
  }
  #bannerImg{
  width: 100%;
  height: 100%;
  }

/* Body Section and Containers */
body{
  left: 0;
  top: 0;
  margin: 0px;
  padding: 0px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 2;
}

#mainContainer{
  position: relative;
  min-height: 100vh;  
  padding-bottom: 4.5rem; 
}
#contentContainer{
  width: 73.5%;
  margin: 0 auto; /* centers the section */
  padding: 3rem;
  padding-bottom: 10rem;
  background-color: #fafafa;
  z-index: -1;
  margin-top: -10px;
}

.innerText{
  margin: 0 5%;
}

/* Social Media Icons on the side of the page */
.icons{
  position: fixed;
  top: 30%;
  left: 0%;
  width: 80px;
  display: flex;
  flex-direction: column;
}
.icons a{
  text-decoration: none;
  text-transform: uppercase;
  padding: 10px;
  font-size: 22px;
  font-family: 'Oswald', sans-serif;
  color: white;
  margin: 2px 0;
  text-align: right;
  border-radius: 0 50px 50px 0;
}
.icons a i{
  background-color: white;
  height: 40px;
  width: 40px;
  color: black;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
}

.icons a i.fa-facebook-f{
  color: #2C80D3;
}
.icons a i.fa-twitter{
  color: #53C5FF;
}

.icons a i.fa-instagram{
  color: #d62976;
}

.facebook{
  background-color: #2C80D3;
}

.twitter{
  background-color: #53C5FF;
}

.instagram{
  background-image: linear-gradient(to right, #962fbf, #d62976, #feda75);
}

.amazon{
  background-color: black;
}

/* Buttons and their hovers */
.donateBtn{
  /* padding: 5px 15px; */
  margin-bottom: -18px;
}

.donateBtn:hover .donateBtn{
  display: none;
}


.donateBtn:hover .donateBtnHover{
  display: block;
}

.donateBtnHover{
  display: none;
}

.pageBtn{
  background-color: #feda75;
  color: #673B90;
  padding: 10px 15px;
  border: none;
  border-radius: 10px;
  text-decoration: none;
}

.pageBtn:hover{
  color: #7EC056;
  padding: 11px 16px;
}

.logIn:hover{
  color: #7EC056;
}

/* Floats and alignments*/
.floatRight { 
  float: right;    
}

.floatLeft { 
  float: left;    
}

.alignCenter{
  margin: 0 auto;
} 
.alignLeft{
  text-align: left;
}
hr { /* divider line that is not the whole page and is assigned a color */
  margin: 2rem 0;
  border: .5px solid #673B90;
}
footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 74%;
  height: auto;            /* Footer height */
  background-color: #673B90;
  color: white;
  padding: 1rem 13%;
  margin-top: 100px;
}
.footerNavItems{
  display: inline-block; /* Puts the bulleted list items in a line */
  font-size: .9em; /* assigns font size to the nav text */
  padding: 3px 10px;
  color: white;
  text-decoration: none; /* no underline or special elements on the text */
  margin-top: 18px;
  border-right: white 1px solid;
}
.footerImg{
  display: inline-block;
}
/* Box elements - sections */
#wrapper {
  width: 100%;
  overflow:hidden;
  margin: 0 auto;
}
.item {
  float:left;
  width:32.33%;
  margin-right: 0.7%;
  height: 300px;
  text-align:center;
}
.itemImg{
  width: 100%;
  max-width: 550px;
  height: auto;
  border-radius: 7px 7px 0 0;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  
}
.itemText{
  margin: 0 auto;
  max-width: 530px;
  margin-top: -9px;
  color: white;
  line-height: 1.5;
  font-size: 1.1rem;
  padding: 10px; 
  height: 200px;
  border-radius: 0 0 7px 7px;
  background-color: #7EC056;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.sectionLinks:hover .itemText{
  background-color: purple;
}

.sectionLinks{
  text-decoration: none;
}

.container {
  border-radius: 5px;
  padding: 20px;
}

.col-25 {
  float: left;
  width: 20%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 70%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.col-container {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 20px;

}
.col {
  display: table-cell;
  width: 45%;
  padding: 20px 30px;
  border-radius: 10%;
  margin-right: 100px;
  border-collapse: separate;
  border-spacing: 20px;
}

.bg-green{
  border: 2px solid #7EC056;
  background-color: white;
}

.bg-purple{
  border: 2px solid #673B90;
  background-color: white;
}

/* Tabbing System */

/* Style the tab */
.tab {
  overflow: hidden;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  border: 1px solid #673B90;
  color: #673B90;
  border-radius: 10px 10px 0px 0px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #45a049;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #7EC056;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: none;
  border: 1px #ccc solid;
}

/* Photo gallery */

div.gallery{
  display: inline-block;
  margin: 5px;
  padding: 15px;
  width: 200px;
  height: 250px;
  vertical-align:top;
}

div.officers {
  width: 200px;
  height: 300px;
  vertical-align:top;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

div.names{
  display: inline-block;
  margin: 5px;
  padding: 15px;
  width: 250px;
}

/* forms */
input[type=text], input[type=email], input[type=tel], select, textarea {
  width: 80%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

button, input[type=submit] {
  background-color: #7EC056;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
  font-size: 1rem;
}

input[type=submit]:hover {
  background-color: #45a049;
}

/* Media Queries for a responsive webpage */

@media screen and (max-width: 1220px) {
  #navImgDiv{
      display: none;
  }
  .active{
      border-bottom: 0px;
  }
  .navItems:nth-child(4),.navItems:nth-child(2),.navItems:nth-child(3){
      float: none;
  }
  #nav{
      text-align: center;
  }
  .itemText{
       font-size: .99rem;
  }
  #headerImg{
    display: inline-block;
    height: 180px;
  }
  .headerLeft{
    width: 60%;
    padding: 0;
  }
  .headerItems{
    margin-left: 6%;
  }
  header{
    height: 220px;
  }
}
  @media screen and (max-width: 1049px) {
      #nav{
          text-align: left;
          height: 80px;
      }
      #nav a{
        font-size: 1.2rem;
      }
      #nav-toggle{
          float:right;
          display:block;
      }
      .itemText{
          font-size: .8rem;
     }
    .headerLeft{
      width: 60%;
      font-size: .8rem;
    }
    .topRight{
      font-size: .9rem;
    }
    .donateBtn{
      height: 2rem;
    }
    body{
      font-size: 1.5rem;
    }
    .item {
      float:clear;
      width:70%;
      margin: 5% 0;
      margin-left: 15%;
      height: 525px;
      padding:2%;
    }
    .itemText{
      margin-top: -12px;
      font-size: 2rem;
      height: auto;
    }    
    .col{
      width: 90%;
      display: block;
      margin-bottom: 20px;
    }
    .col-container {
      border-spacing: 0px;

    }
    .gallery{
      font-size: 1.3rem;
    }
    div.gallery{
      padding-bottom: 3rem;
    }
  }
 @media screen and (max-width: 1049px) {   
    .responsive {
    float: none;
    display: block;
    width: 90%;
    text-align: left;
  }
  #nav a {
    font-size: 2.5rem;
  }
  #nav {
    height: 130px;
  }
  .itemImg{
  width: 100%;
  height: auto;
  }
}
@media screen and (max-width: 962px)
{
  #headerImg{
    height: 150px; 
  }
  .headerLeft{
      width: 50%;
      font-size: .8rem;
    }
    .topRight{
      font-size: .9rem;
    }
    header{
      height: 185px;
    }
}
@media screen and (max-width: 900px)
{
  .item {
          font-size: 1rem;
      }
  .itemImg{
  width: 100%;
  height: auto;
  }
}
@media screen and (max-width: 691px) {
  .headerLeft h2{
    display: none;
  }
   .headerLeft{
      width: 10%;
   }
 .itemImg{
  width: 100%;
  height: auto;
  }
}
@media screen and (max-width: 600px) {
  .navItems .responsive {position: relative;}
  .navItems .responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navItems .responsive {
    float: none;
    display: block;
    text-align: left;
  }
  footer{
      height: 100px;
  }
  .itemImg{
  width: 100%;
  height: auto;
  }
  
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
  
  .itemImg{
  width: 100%;
  height: auto;
  }
  
}

logo-slider {
  --image-size: 80px;
  /*border: 1px solid #575757;*/
  padding: 20px;
  overflow: hidden;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  display: flex;
}
logo-slider:hover div {
  animation-play-state: paused;
}
logo-slider div {
  display: flex;
  position: relative;
  animation: marquee 12s linear infinite;
  justify-content: space-around;
}
logo-slider img {
  display: block;
  min-width: var(--image-size);
  height: var(--image-size);
  margin: 0 1vw;
}
logo-slider:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: linear-gradient(to right, white, rgba(255, 255, 255, 0) 80px, rgba(255, 255, 255, 0) calc(100% - 80px), white);
}
@media (max-width: 900px) {
  logo-slider {
    --image-size: 50px;
    --image-size: min(max(50px, 10vw), 100px);
  }
  logo-slider div {
  display: flex;
  position: relative;
  animation: marquee 5s linear infinite;
  justify-content: space-around;
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}