.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 10px;
}
[class*="col"] {
    grid-column-end: span 12;
}

.col1 {
  grid-column-end: span 12;
}
 .col3 {
        grid-column-end: span 10;
   margin: 0 auto;
    }
    .col2 {
        grid-column-end: span 6;
    }
    .col4 {
        grid-column-end: span 3;
    }
    .col6 {
        grid-column-end: span 2;
    }
    .col12 {
        grid-column-end: span 1;
    }


body{
    margin: 0;
    padding: 0;
    height: 100%
}
*{
    box-sizing: border-box;
}

#title{
    font-family: Arial, Helvetica, sans-serif;
    color: #fbf8f6;
    background: #000000;
     text-align: center;
    padding: 0.5px;
  width:100%;
}
nav{

    background: #ffffff;
    padding: 0.5px;
    text-align: center;
   outline: outset;
}

nav ul{
    list-style-type: none;
    padding:10 0;
}
nav li{
    display: inline;
    text-align: center;
    margin: 0 1vw;
}

a{
    text-decoration: none;
     font-family: Arial, Helvetica, sans-serif;
    padding: 10px 20px;
    color: #000000;
    font-weight: bold;
    display: inline-block;
    width: 14%;
    font-size: -3vw;
  
}

a:hover{
    color: #fff;
    background: #333;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 2%;
   font-family: Arial, Helvetica, sans-serif;
  font-weight: bolder;
  font-size: 3vw;
}

footer .socials {
  margin:0 0 0 10px;
}

footer .socials img {
  width: 207px;
  height: 151px;
  margin: 0 5px;
}
  nav li{
    margin: 0 0.1% 0 0;
    padding: 1%;
  }
  
  a{
    font-size: 1vw;
  }

.custom-image {
  width: 100%;
  max-width: 1519px;
  height: auto; 
  max-height: 800px; 
display: grid;
    outline: solid;
  outline-color: #010101;
}

#intro{
    background-color: rgb(220, 220, 220);
    height: 400px;
	outline: solid;
    
}

.centered {
  position: absolute;
  top: 40%;
  left: 50%;
  display: inline-flex;
  transform: translate(-50%, -50%);
  width: auto;
  max-width: 600px; 
  height: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
  font-size: 1.2vw;
    color: #ffffff;
    background: #474747;
  outline-color: aliceblue;
  outline: ridge;
    padding: 2%;
    opacity: 0.8;
}

#schedule h2{
  font-family: Arial, Helvetica, sans-serif;
  margin: 3% 0 0 7%;
  font-size: 2.3vw;

}

.scheduleinfo p{
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  margin: -3.5% 0 0 26%;
  font-size:1.3vw;
}

#scheduleimage {
	display: grid;
	grid-column-start:  4;
	grid-column-end:  10;
   background-color: rgb(220, 220, 220);
    height: 400px;
	outline: solid;
}

@media (max-width: 768px){
  .custom-image {
  width: 60%;
  max-width:700px;
  height: auto; 
  max-height: 400px; 
  margin: auto;
    align-items: center;
display: flex;
}
  .centered{
    top: 24%
    }
  #schedule h2{
  font-size: 3vw;
}
.scheduleinfo p{
  font-size:1.3vw;
  margin: 0 0 0 6%;
}
  .tabletbreak{
    display: block;
  }  
  #scheduleimage img{
  width: 65%;
  height: 50%;
  margin: -0.7% 0 -23% 32%;
  }
  }

#leadersheader {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    background: #000000;
     text-align: center;
    padding: 1em;
    margin: 1%;
}

.leadersbox{
    display: flex;
  flex-direction: column;
    gap: 20%;  
}

.leftleaders {
    display: flex;
    align-items: center;
    width: 80%;
    max-width: 800px;
    background-color: #c4c4c4;
    padding: 20px;
    gap: 20px; 
    margin: 3% 2%;
}

#leftleadertwo{
    bottom: 9%;
    left: 57%;
    margin-top: 1%;
}

.rightleaders {
display: flex;
    align-items: center;
    width: 80%;
    max-width: 800px;
    background-color: #c4c4c4;
    padding: 20px;
    gap: 20px; 
    margin: 10px 0;
    background: #c4c4c4;

  margin-left: 45%;
}

#rightleadertwo{
    bottom: 79%;
    left: 44%;
}

#siennaimage , #lukaimage , #adannaimage , #myaimage  {
    object-fit: cover;
    padding: 5px;
	background-color: #8e8e8e;
	outline: solid;
	width: 220px;
	grid-column-end: span 12;
	height: 340px;
}

.leaderinfo{
  display: flex;
    flex-direction: column;
    gap: 10px;
}

.leftmeet, .rightmeet {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2vw;
    color: #ffffff;
  margin: 0;
}

.leftmeet{
    display: block;
    padding: 0.5%;
    top: 35%;
    left: 24%;
}

#adannameet{
     top: 141%;
    left: 24%;
}

.rightmeet{
    display: block;
    padding: 0.5%;
    top: 90%;
    left: 72%;
}

#myameet{
    top: 196%;
    left: 72%;
}

.role, .rightrole {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.3vw;
    color: #ffffff;
  font-weight: bold;
    margin: 0;
  padding: 2%;
}

.quote, .rightquote{
  font-family: Arial, Helvetica, sans-serif;
    font-size: 1.3vw;
    color: #ffffff;
  font-weight: bold;
    margin: 0%;
}


 @media (max-width: 768px) {
   #leadersheader {
     width: 50%;
     align-items: center;
    padding: 1em;
    margin:1% 1% 0 25%;
}
   
   .leadersbox{
      align-items: center;
     max-width: 100%;
   }
    .leftleaders, .rightleaders {
       display: flex;
        flex-direction: row; 
        align-items: center;
        width: 80%; 
        padding: 15px;
        gap: 15px; 
        margin: 3% 0;
    }

    #siennaimage img, #lukaimage img, #adannaimage img, #myaimage img {
      width: 80%;  
      max-width: 241px; 
        max-height: 250px;
         padding: 5px;
    }

    .leftmeet, .rightmeet {
        font-size: 1.8vw;
      margin-top:-30%;
    }

    .role, .rightrole, .quote, .rightquote {
        font-size: 1.2vw;
    }
}
  

footer{
    background-color: #090909;
    color: #ffffff;
    padding-top: 10px ;
    padding-bottom: 50px ;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 32%;
}

footerwords{
     font-size: 40px;
}

#eventsheader {
  grid-column: span 12;
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    background: #000000;
     text-align: center;
    padding: 0.5%;
     margin: 2% 0 ;
  font-size: 1.2vw;
  width: 40%;
}

.content {
   display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
 grid-column: span 12;
}

.events {
    padding-right: 2%;
  grid-column: span 8;
}

.event {
    display: flex;
  flex-wrap: wrap;
  border: 1px solid #000000;
  padding: 2%;
  outline: solid;
  grid-column: span 12;
}

#critiqueimage , #potluckimage {
       object-fit: cover;
    padding: 5px;
	background-color: #8e8e8e;
	outline: solid;
	width: 220px;
	grid-column-end: span 12;
	height: 340px;
}



.eventdetails{
    font-family: Arial, Helvetica, sans-serif;
    width: 55%;
    align-items: center;
    justify-content: center;
   grid-column: span 6;
    font-size: 26px;
    margin: 0 20px 0 0;
  margin-left: 2%;
}

.eventdetails h2 {
text-align: left;
    font-size: 2vw;
    font-weight: bold;
    margin: 0;
}

.eventdetails p {
    margin: 5px 0;
}

.news {
  font-family: Arial, Helvetica, sans-serif;
  grid-column: span 4;
    background-color: #d8d8d8;
    padding: 2%;
}

.news h2 {
    background-color: #000000;
    color: #ffffff;
  font-size: 2vw;
    text-align: center;
    padding: 2%;
  width: 60%;
    margin: 0 auto;
       display: inline-block;
  justify-content: center;
}

.newscontent {
    border-bottom: 4px solid #000000;
  border-bottom-width: 20%;
    padding: 20px 2%;
}

.newscontent h3 {
    margin: 0;
    font-size: 2.3vw;
    font-weight: bold;
  text-align: center;
}

.newscontent p {
    font-size: 1.4vw;
    margin: 10px 0 0;
  text-align: center;
}
@media (max-width: 1024px) and (min-width: 600px){
   .content {
     display: grid;
    grid-template-columns: repeat(12, 1fr);
     gap: 16px; 
  }
  #critiqueimage img, #potluckimage img{
     width: 60%;
    max-width: 500px;
  height: auto;
    max-height: 316px;
}
  .eventdetails{
    align-items: center;
    justify-content: center;
   grid-column: span 6;
    font-size: 1.5vw;
    margin: 0;
  margin-left: -16%;
}
  
.eventdetails h2 {
text-align: left;
    font-size: 2vw;
    font-weight: bold;
    margin: 0 0 0 0;
}

.eventdetails p {
    margin: 3% 0 0 2%;
}
  .news {
    grid-column: span 4; 
  }



} 

/*phones*/
@media (max-width: 600px) {
  .content {
     display: grid;
    grid-template-columns: repeat(12, 1fr);
     gap: 16px; 
    justify-content: center;
  align-items: center; 
  }
  
  .news {
   grid-column: span 4;
    text-align: center;
  font-family: Arial, Helvetica, sans-serif;
    background-color: #ffffff;
    padding: 2%;
    margin: auto;
}

.news h2 {
  font-size: 7vw;
    text-align: center;
    padding: 2%;
  width: 139%;
    margin: 0 0 0 0;
       display: block;
  justify-content: center;
}

   .newscontent,
  #contentone,
  #contenttwo,
  #contenthree {
    margin: auto; 
    grid-column: span 6; 
    text-align: center; 
    padding: 16px; 
    background-color: #c5c5c5; 
  } 
.newscontent  {
   grid-column: span 12;
  text-align: center;
    border-bottom: none;
    padding: 20px 2%;
  outline: solid;
  background-color: #c5c5c5;
  margin: auto;
}

.newscontent h3 {
    font-size: 4vw;
    font-weight: bold;
}
  
  #contentone h3, #contenttwo h3, #contenthree h3{
    font-size: 4vw;
    background-color: #c5c5c5;

  }
  
 

 #contentone p, #contenttwo p, #contenthree p {
  font-size: 3.5vw;
  text-align: center;
}
  
  #contentone {
  margin-top: 5%; 
}
  
.newscontent p {
    font-size: 4vw;
    margin: 10px 0 0;
}
#eventsheader {
    display: none;
}



.events {
   display: none;
}

.event {
    display: none;
}

#critiqueimage img, #potluckimage img{
     display: none;
}



.eventdetails{
     display: none;
}

.eventdetails h2 {
 display: none;
}

.eventdetails p {
 display: none;
}

}
/*Contact Us*/
.contactusheader {
 background-color: rgb(220, 220, 220);
    height: 300px;
}

.contactusblock {
  display: grid;
  height: 100px;
     font-family: Arial, Helvetica, sans-serif;
  font-size: 2vw;
    color: #ffffff;
    background: #000000;
     text-align: center;
  padding: 0 87px 0 66px;
    grid-column-start: 3;
    grid-column-end: 10;
}

.socials {
  display: grid;
   font-family: Arial, Helvetica, sans-serif;
  font-size: 2vw;
  color: #707070;
  font-weight: bold;
  grid-column-start: 5;
  grid-column-end: 9;
}
.siennaemail {
  display: grid;
  
}

.lukaemail {
  display: grid;
  margin-top: 20px;
  margin-bottom: 30px;
  top: 131%;
}
#grouppicimage {
  display: grid;
  background-color: #d7d7d7;
   height: 400px;
  outline: solid;
  grid-column-start: 3;
  grid-column-end: 11;
}
/*Contact Us*/

/*FAQ'S*/
.faqsheader {
     font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
    background: #000000;
     text-align: center;
    padding: 1em;
    margin: 1%;
  margin-top: 2%;
  margin-left: 30%;
   display: inline-flex;
     width: 40%;
    height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}


.dropdowncontainer {
  width: 100%;
  max-width: 40%;
  margin: 1% auto;
}

.questionone {
  display: grid;
  justify-content: space-between;
  align-items: center;
  grid-column-start: 3;
  padding: 1em;
  background: #c4c4c4;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5vw;
  font-weight: bold;
  outline: groove;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-left: -130px;
}

.dropdowncheckbox {
  display: none;
}

.arrow {
  font-size: 18px;
  transition: transform 0.3s;
}

.dropdowncheckbox:checked + .questionone .arrow {
  transform: rotate(180deg);
}

/* Dropdown content */
.dropdowncontent {
  max-height: 0; 
  overflow: hidden; 
  padding: 0 1em; 
  background: #c4c4c4; 
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 23px; 
  font-weight: bold; 
  outline: groove; 
  transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out; 
  margin-left: -130px;
}


.dropdowncheckbox:checked + .questionone + .dropdowncontent {
  max-height: 200px; 
  padding: 1em;
}

/*FAQ'S*/

.gallerycontainer{
	margin-bottom: 800px;
}

#galleryimage1 {
width: 720px;
  height: 400px;
	 background-color: #a0a0a0;
    max-height: 900px;
align-items: center;
  object-fit: cover;
	margin-left: 6%;
	margin-bottom:5%;
	margin-top: 5%;
  outline: solid;

}

.galleryimagetwo , #galleryimage2 {
   width: 340px;
    max-width:340px;
  height: 200px;
    max-height: 300px;
	 background-color: #a0a0a0;
  align-items: center;
    padding: 3;
  outline: solid;
  left: 52%;
  top: 24%;
  position: absolute;
	margin-bottom: 50px;
}

#galleryimage3 {
  left: 76%;
  top: 24%
}

#galleryimage4 {
  left: 52%;
  top: 58%;
}

#galleryimage5 {
  left: 76%;
  top: 58%;
}

#galleryimage6 {
  left: 52%;
  top: 92%;
}

#galleryimage7 {
   left: 76%;
  top: 92%;
}

#galleryimage8 {
   left: 3%;
  top: 126%;
}

#galleryimage9 {
  left: 28%;
  top: 126%;
}

#galleryimage10 {
  left: 52%;
  top: 126%;
}

#galleryimage11 {
  left: 76%;
  top: 126%;
}


.imagecaption{
    display: inline;
    padding: 10px;
    position: absolute;
  color: black;
  width: 100%;
   max-width: 710px;
  height: 100%;
   max-height: 250px;
    left: 3%;
  justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    outline: solid;
}