@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

 /*Navigation bar*/

 body {
     overflow-x: hidden;
     font-family: "Mulish", sans-serif;
     font-style: normal;
 }

 #nav-trigger {
     display: none;
 }

 .nav-trigger {
     position: absolute;
 }

 label[for="nav-trigger"] {
     position: fixed;
     right: 15px;
     top: 15px;
     z-index: 200;
     cursor: pointer;
 }

 .nav-trigger + label,
 .navigation {
     transition: right 0.4s;
 }

 .nav-trigger:checked + label {
     right: 215px;
 }

 .nav-trigger:checked ~ .navigation {
     right: 0;
 }

 nav ul {
     list-style-type: none;
     padding: 0;
     margin: 0;
     width: 200px;
     height: 100%;
     position: fixed;
     top: 0;
     right: -200px;
     bottom: 0;
     z-index: 200;
     text-align: left;
     background: #343232;
 }

 nav li {
     margin: 10px 0;
 }

 .navigation a {
     text-decoration: none;
     padding: 10px 20px;
     color: #000;
     background: #EEEE32;
     display: block;
     transition: all 0.7s;
 }

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

 .joinText {
     font-family: "Nunito", sans-serif;
     font-style: normal;
 }


 /*index.html*/

 .logo {
     width: 250px;
     height: auto;
     object-position: left;
 }

 .joinnow a {
     padding: 10px;
     padding-left: 30px;
     padding-right: 30px;
     background: #EEEE32;
     color: #333;
     text-decoration: none;
     transition: all 0.5s ease-in-out;
 }

 .joinnow a:hover {
     color: #fff;
     background: #000;
 }

 .grid {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     grid-gap: 20px;
     padding: 30px;
 }

 .cell {
     background-color: #434DA6;
     color: white;
     height: auto;
     padding: 20px;
 }

 .join {
     height: 55vh;
     background: url('../img/joinimage.jpg') center center;
     background-size: cover;
     display: grid;
     opacity: 80%;
 }

 .joinText {
     width: 60%;
     padding: 20px;
     padding-bottom: 30px;
     justify-self: end;
     align-self: end;
     margin: 0 auto;
     color: aliceblue;
     text-align: center;
     opacity: 100%;
     text-align: center;
 }

 .rsp {
     max-width: 100%;
     height: auto;
     object-fit: cover;
 }

 .rsp2 {
     max-width: 100%;
     height: auto;
     object-fit: cover;
     border-radius: 50%;
 }

 [class*="col"] {
     grid-column-end: span 12;
 }

 /* below 600px typical tablet*/
 @media only screen and (max-width: 600px) {
     .homesm2 {
         grid-column-end: span 6;
         padding: 90px;
         line-height: 1.8em;
         align-content: center;
     }

 }

 /* above 601px typical tablet*/
 @media only screen and (min-width: 601px) {

     .homemd2 {
         grid-column-end: span 6;
         padding: 90px;
         line-height: 1.8em;
         align-content: center;
     }

 }


 /* above 1025px typical destop*/

 @media only screen and (min-width: 1025px) {

     .homecol2 {
         grid-column-end: span 6;
         padding: 20px;
         line-height: 1.8em;
         align-content: center;

     }

 }

 /*location.html*/
 .locationjoin {
     height: 55vh;
     background: url('../img/locationjoinimg.jpg') center center;
     background-size: cover;
     display: grid;
     opacity: 80%;
 }


 [class*="locationcol"] {
     grid-column-end: span 12;
 }

 /* below 600px typical tablet*/
 @media only screen and (max-width: 600px) {
     .locationsm2 {
         grid-column-end: span 6;
         padding: 40px;
         line-height: 1.8em;
         align-content: center;

     }

 }

 /* above 601px typical tablet*/
 @media only screen and (min-width: 601px) {
     .locationmd2 {
         grid-column-end: span 6;
         padding: 90px;
         line-height: 1.8em;
         align-content: center;

     }

 }


 /* above 1025px typical destop*/

 @media only screen and (min-width: 1025px) {
     .locationcol2 {
         grid-column-end: span 6;
         line-height: 1.8em;
         padding: 40px;
         align-content: center;

     }

 }

 /*expectations.html*/
 .expectationsjoin {
     height: 55vh;
     background: url('../img/expectationsjoinimg.jpg') center center;
     background-size: cover;
     display: grid;
     opacity: 80%;
 }

 [class*="expectationscol"] {
     grid-column-end: span 12;
 }

 /* below 600px typical tablet*/
 @media only screen and (max-width: 600px) {
     .expectationssm2 {
         grid-column-end: span 6;
         padding: 90px;
         line-height: 1.8em;
         align-content: center;
     }

 }

 /* above 601px typical tablet*/
 @media only screen and (min-width: 601px) {
     .expectationsmd2 {
         grid-column-end: span 6;
         padding: 90px;
         line-height: 1.8em;
         align-content: center;
     }

 }


 /* above 1025px typical destop*/

 @media only screen and (min-width: 1025px) {
     .expectationscol2 {
         grid-column-end: span 6;
         line-height: 1.8em;
         align-content: center;

     }

 }

 /*equipment.html*/
 .equipmentjoin {
     height: 55vh;
     background: url('../img/equipmentjoin.jpg') center center;
     background-size: cover;
     display: grid;
     opacity: 80%;
 }

 .instructions a {
     padding: 10px;
     padding-left: 30px;
     padding-right: 30px;
     background: #EEEE32;
     color: #333;
     text-decoration: none;
     transition: all 0.5s ease-in-out;
     text-align: center;
 }

 .instructions a:hover {
     color: #fff;
     background: #000;
 }

 [class*="equipmentcol"] {
     grid-column-end: span 12;
 }

 /* below 600px typical tablet*/
 @media only screen and (max-width: 600px) {
     .equipmentsm2 {
         grid-column-end: span 6;
         padding: auto;
         line-height: 1.8em;
         align-content: center;
     }

 }

 /* above 601px typical tablet*/
 @media only screen and (min-width: 601px) {
     .equipmentmd2 {
         grid-column-end: span 6;
         padding: auto;
         line-height: 1.8em;
         align-content: center;
         margin: 30px;
     }

 }


 /* above 1025px typical destop*/

 @media only screen and (min-width: 1025px) {
     .equipmentcol2 {
         grid-column-end: span 6;
         padding: auto;
         line-height: 1.8em;
         align-content: center;
         margin: 30px;

     }

 }

 /*expectations.html*/

 .expectationsbutton a {
     padding: 10px;
     padding-left: 50px;
     padding-right: 50px;
     background: #EEEE32;
     color: #333;
     text-decoration: none;
     transition: all 0.5s ease-in-out;
     margin: auto;
     display: block;
     text-align: center;
 }

 .expectationsbutton a:hover {
     color: #fff;
     background: #000;
 }

 [class*="expectationscol"] {
     grid-column-end: span 12;
 }

 /* below 600px typical tablet*/
 @media only screen and (max-width: 600px) {
     .expectationssm1 {
         grid-column-end: span 12;
         padding: 80px;
         text-align: center;
         line-height: 1.8em;
     }

     .expectationssm2 {
         grid-column-end: span 6;
         padding: 90px;
         line-height: 1.8em;
         align-content: center;

     }

 }

 /* above 601px typical tablet*/
 @media only screen and (min-width: 601px) {
     .expectationsmd1 {
         grid-column-end: span 12;
         padding: 80px;
         text-align: center;
         line-height: 1.8em;
     }

     .expectationsmd2 {
         grid-column-end: span 6;
         padding: 90px;
         line-height: 1.8em;
         align-content: center;
         margin: 30px;
     }

 }


 /* above 1025px typical destop*/

 @media only screen and (min-width: 1025px) {
     .expectationscol1 {
         grid-column-end: span 12;
         padding: 80px;
         text-align: center;
         line-height: 1.8em;
     }

     .expectationscol2 {
         grid-column-end: span 6;
         line-height: 1.8em;
         align-content: center;
         margin: 30px;


     }

 }

 /*members.html*/
 .membersjoin {
     height: 55vh;
     background: url('../img/membersjoin.jpg') center center;
     background-size: cover;
     display: grid;
     opacity: 80%;
 }

 [class*="memberscol"] {
     grid-column-end: span 12;
 }

 /* below 600px typical tablet*/
 @media only screen and (max-width: 600px) {
     .memberssm1 {
         grid-column-end: span 12;
         text-align: center;
         padding: 70px;
         line-height: 1.8em;
     }


     .memberssm2 {
         grid-column-end: span 6;
         line-height: 1.8em;
         align-content: center;
     }

 }

 /* above 601px typical tablet*/
 @media only screen and (min-width: 601px) {
     .membersmd1 {
         grid-column-end: span 12;
         text-align: center;
         padding: 70px;
         line-height: 1.8em;

     }

     .membersmd2 {
         grid-column-end: span 6;
         line-height: 1.8em;
         align-content: center;
     }

 }


 /* above 1025px typical destop*/

 @media only screen and (min-width: 1025px) {
     .memberscol1 {
         grid-column-end: span 12;
         text-align: center;
         padding: 70px;
         line-height: 1.8em;

     }

     .memberscol2 {
         grid-column-end: span 6;
         line-height: 1.8em;
         align-content: center;

     }

 }

 /*footer*/

 .footgrid {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     grid-gap: 20px;
     padding: 30px;
     background: #434DA6;
     color: white;
 }

 [class*="footcol"] {
     grid-column-end: span 12;
 }

 /* below 600px typical tablet*/
 @media only screen and (max-width: 600px) {
     .footsm2 {
         grid-column-end: span 6;
         padding: 90px;
         line-height: 1.8em;
         align-content: center;
     }

 }

 /* above 601px typical tablet*/
 @media only screen and (min-width: 601px) {

     .footmd2 {
         grid-column-end: span 6;
         padding: 90px;
         line-height: 1.8em;
         align-content: center;
     }

 }


 /* above 1025px typical destop*/

 @media only screen and (min-width: 1025px) {

     .footcol2 {
         grid-column-end: span 6;
         padding: 20px;
         line-height: 1.8em;
         align-content: center;

     }

 }