/* ############ 1. Global Styles ############ */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
* {padding: 0;margin: 0;box-sizing: border-box;font-size: 100%;}
body > * {font-family: 'Lato', sans-serif;line-height: 1.4;}
img {max-width: 100%;height: auto;}
h1, h2, h3, h4 {font-family: 'Nunito', sans-serif;line-height: 1;}
h1 {font-size: 2.5rem;}
h2 {font-size: 2rem;}
h3 {font-size: 1.6rem;}
h4 {font-size: 1.4rem;}
p {line-height: 1.4;}
a {color: #36bae6;font-weight: bold;}
a:hover {color: #e06630;}
i {padding-left: .5rem;}

/* ############ 2. Hero ############ */
.hero {background-color: #000000; background-size: cover; display: grid; grid-template-columns: 1fr;grid-template-rows: 1fr;}
.hero img {margin: auto;grid-column: 1;grid-row: 1;}

/* ############ 3. Navigation ############ */
.logo {max-width: 150px;}

.navWrap {position: -webkit-sticky;position: -moz-sticky;position: -o-sticky;position: -ms-sticky;position: sticky;top: 0;z-index: 99;height: 48px;width: 100%;background-color: #000000;border-top: 1px solid #ffffff;padding: 0 1.5rem;display: flex;align-items: center;justify-content: space-between;}

input#navToggle {display: none;}
input#navToggle ~ label {position: relative;padding: 0.25rem;width: 2rem;height: 1.25rem;height: 2rem;}
input#navToggle ~ label > span,
input#navToggle ~ label > span::before,
input#navToggle ~ label > span::after {content: "";display: block;position: absolute;top: .75rem;height: 0.125rem;width: 1.75rem;opacity: 1;background: #fff;transition: 0.14s ease-in-out;}
input#navToggle ~ label > span::before {top: -0.5rem;}
input#navToggle ~ label > span::after {top: 0.5rem;}
#navToggle:checked ~ label > span {width: 0;background: rgba(18, 18, 18, 0);}
#navToggle:checked ~ label > span::before {transform: rotateZ(45deg);top: 0;}
#navToggle:checked ~ label > span::after {transform: rotateZ(-45deg);top: 0;}
#navToggle:checked ~ nav {left: 0;}
nav {position: absolute;z-index: -1;top: 3.0rem;left: -110%;width: 100%;transition: 0.22s ease-in-out;}
nav::after {content: "";position: absolute;top: 0;z-index: -1;height: 100vh;width: 100vw;background-color: #13b1e7;background-size: cover;}
nav ul {list-style-type: none;}
nav ul li a {display: inline-block;text-decoration: none;width: 100%;padding: .75rem 1rem;color: #fff;border-bottom: solid 1px rgba(255,255,255,.5);transition: 0.14s ease-in-out;}
nav ul li a:hover {color: #36bae6;background: #e0e5eb;}
nav ul li:last-of-type::before {content: "";display: block;padding: .5rem;}
nav .btn {background: #fff;border-bottom: none;border-radius: 4px;box-shadow: inset 0 0 5px #eeb80c;color: #223054;width: 40%;padding: 0.25rem .6rem;letter-spacing: 1px;text-shadow: 0 0 1px rgb(19,177,231);text-align: center;display: flex;justify-content: center;margin: auto;}
nav .btn:hover { background-color: #223054;box-shadow: inset 0 0 5px #13b1e7;color: #fff;}

/* ############ 4. Trips ############ */
.trips {padding: 1rem;margin: auto;max-width: 1200px;}
.trips article {margin: 2rem auto;width: 80%;max-width: 1000px;}
.trips h1 {color: #3abadf;font-size: 3rem;margin-left: 1rem;}
.trips article p {border-left: solid 1px #dedede;padding-left: 1rem;}
.tripList {list-style-type: none;display: grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-gap: 1rem;}
.tripList li {background-color: rgba(255,255,255,.9);border-radius: 6px;border: solid 1px #dedede;box-shadow: 0 2px 5px rgba(0,0,0,0.1);padding: 1.8rem;display: grid;grid-template-columns: 1fr;grid-template-rows: auto minmax(140px, 1fr) auto;}
.tripList h3, .tripList img {grid-row: 1 / 2;grid-column: 1;}
.tripList h3 {background-color: rgba(255,255,255,.5);color: #fff;padding: .5rem;margin-bottom: 1rem;text-align: center;text-shadow: 1px 1px 2px rgba(51,51,51,.7);align-self: end;}
.trips a {border-radius: 3px;background-color: #39bae6;color: #fff;height: 2rem;margin-top: 1rem;text-decoration: none;display: flex;justify-content: center;align-items: center;}
.trips a:hover {background-color: #333;}

/* ############ 5. CTA ############ */
.cta {background-repeat: no-repeat;background-position: center center;background-size: cover;color: #fff;margin: 2rem auto;padding: 2rem;text-shadow: 1px 1px 1px rgb(0 0 0 / 50%);}
.cta1 {background-image: url("../images/ctaBG1_sm.jpg");}
.cta2 {background-image: url("../images/ctaBG2_sm.jpg");}
.cta3 {background-image: url("../images/ctaBG3_sm.jpg");}
.cta h1 {margin-left: 1rem;}
.cta p {border-left: solid 1px #fff;padding-left: 1rem;max-width: 700px;}

/* ############ 6. Team ############ */
.team {margin: 1rem;}
.team h1 {text-align: center;color: #39bae6;}
.team p {margin-bottom: 1rem;}
.teamMembers {list-style-type: none;margin: 1rem 0;display: grid;
  grid-template-columns: repeat(10, 1fr);
  align-items: center;}
.teamMembers li {grid-row: 1 / 2;}
.teamMembers li:nth-child(1) {grid-column: 1 / 4;order: 1;}
.teamMembers li:nth-child(2) {grid-column: 3 / 6;}
.teamMembers li:nth-child(3) {grid-column: 4 / 8;  order: 1; text-align: center;}
.teamMembers li:nth-child(4) {grid-column: -3 / 6;text-align: right;}
.teamMembers li:nth-child(5) {grid-column: -4 / -1;text-align: right;}
.teamMembers li:hover {order: 2;}
.teamMembers img {border-radius: 50%;width: 80%;box-shadow: 1px 1px 3px #fff, 2px 2px 6px rgb(28 121 138 / 50%);border: solid 2px rgba(255,255,255,.8);}
.teamMembers li:nth-child(3) img {width: 70%;}

/* ############ 7. Problem ############ */
section.problem {padding: 1rem;margin: auto;}
.problem h1 {margin-left: 1rem;color: #35b1e8;}
.problem h1 ~ p {border-left: solid 1px #dedede;padding-left: 1rem;}
.problem h3 {margin: 1rem 0 0 1rem;color: #223055;}
.problem ul {margin: 0 0 1rem 3rem;}
.problem img {margin: auto;display: block;}

/* ############ 7a. Problem > Action ############ */
.action {padding: 1rem;}
.action h3 {color: #35b1e8;font-style: italic;margin-bottom: .5rem;}
.action h1 + p {border-left: solid 1px #dedede;padding-left: 1rem;}
.action article h1 {margin-left: 1rem;}
.action ul li {border: solid 1px #dedede;border-radius: 6px;list-style-type: none;margin: 1rem auto;display: grid;grid-template-columns: 1fr 4fr;grid-template-rows: auto;}
.action li h1 {background: url(../images/action1.jpg) no-repeat center;background-size: cover;border-radius: 6px 0 0 6px;color: #fff;padding-top: 1rem;text-align: center;text-shadow: 1px 1px 2px #223055;grid-column: 1 / 2;grid-row: span 2;}
.action li h4 {background-color: #223055;border-radius: 0 6px 0 0;color: #fff;padding: .5rem 1rem;grid-column: 2 / -1;align-self: start;}
.action li p {padding: .5rem 1rem 1rem;grid-column: 2 / -1;}
.action li:nth-of-type(2) h1 {background-image: url(../images/action2.jpg);}
.action li:nth-of-type(3) h1 {background-image: url(../images/action3.jpg);}
.action li:nth-of-type(4) h1 {background-image: url(../images/action4.jpg);}
.action li:nth-of-type(5) h1 {background-image: url(../images/action5.jpg);}
.action li:nth-of-type(6) h1 {background-image: url(../images/action6.jpg);}

/* ############ 8. Gallery ############ */
.gallery {max-width: 1200px;margin: auto;}
.gallery h1 {text-align: center;color: #223055;padding: 0 1rem;margin-bottom: .5rem;}
.galleryWrap {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));grid-gap: .5em;grid-auto-flow: row dense;}
.galleryWrap img[src$="_w.jpg"] {grid-column-end: span 2;}
.galleryWrap img[src$="_p.jpg"] {grid-row-end: span 2;}
.galleryWrap img {width: 100%;height: 100%;object-fit: cover;}

/* ######### 9. Footer ######### */
footer {margin-top: 1rem;}

/* ######### 9a. Footer > Contact ######### */
.form {background-color: #000000;padding: 1rem 1rem 2rem;}
.form h3 {color: #00ABF5;}
.form p {font-weight: 300;color: #ffffff;padding-bottom: 1rem;}
.newsletter {width: 400px;margin: 0 auto;}

/* ######### Contact Form ######### */
form#contactForm {max-width: 350px;margin: auto;}
.contactForm div {margin-top: 1em;}
.contactForm div:first-of-type {margin-top: 0;}
.contactForm label {display: block;}
.contactForm input, .contactForm textarea {border: solid 1px #dedede;border-radius: 4px;color: #707070;cursor: text;font-size: 1rem;max-width: 350px;padding: .5rem;width: 100%;}
.contactForm textarea {min-height: 100px;}
.contactForm button {background-color: #13b1e7;border: none;border-radius: 4px;color: #fff;font-size: 1rem;padding: .5rem;min-width: 200px;width: 50%;display: flex;align-items: center;justify-content: center;}
.contactForm button:hover {background-color: #35b1e8;color: #ffc107;}
.contactForm i {font-size: 200%;padding-right: .5rem;}
.contactForm input[type="submit"]:active {box-shadow: 1px 1px 6px rgba(255,255,255,.6), 0px 0px 4px rgba(255,255,255,.8);}
.contactForm .checks {margin: .25em 0 1em .1em;}
.contactForm input[type="checkbox"] + label {display: inline-block;padding-top: 0;margin-top: 0;}



/* custom checkbox */
.contactForm .checks label {display: inline-block;}
.contactForm input[type="checkbox"] {position: absolute;opacity: 0;width: 20px;height: 20px;margin: 1px 0 0 -1px;}
input[type="checkbox"]:checked ~ span:before {content: "\f14a";}
.checks span:before {display: inline-block;box-sizing: border-box;color: #13b1e7;content: "\f0c8";font-family: "Font Awesome 5 Free";font-size: 1.3em;margin: -3px 3px 0 0;vertical-align: middle;}
.contactForm input:focus, .contactForm textarea:focus {border: solid 1px #13b1e7;box-shadow: 0 0 2px #0d92bf, 0px 0px 4px #0d92bf, 1px 1px 4px #13b1e7, 2px 2px 4px #13b1e7;outline: none;}

/* radio buttons */
.contactForm div.radioBtns {margin: 1em 0;max-width: 400px;display: grid;grid-template-columns: repeat(3, auto);grid-template-rows: repeat(2, 1fr);}
.radioBtns p {padding-bottom: 0;grid-column: span 3;}
 input[type="radio"]:first-of-type {margin-left: 0;}

/* make the new radio button */
.radioBtns span:before {display: inline-block;font-family: "Font Awesome 5 Free";content: "\f111"; color: #13b1e7;font-size: 1.2em;vertical-align: middle;margin: -4px 3px 0 0;}
.radioBtns label {position: relative;}

/* hide the default radio buttons */
.radioBtns input[type="radio"] {position: absolute;opacity: 0;}

/* create the on (selected) state */
input[type="radio"]:checked ~ span:before {content: "\f192"; /* unicode for fa dot circle */}

/* ######### 9b. Footer > Connect ######### */
.social, .contactInfo {background-color: #00ABF5;color: #fff;padding: 1rem 1rem 0;text-align: center;}
.social h3 {border-bottom: solid 1px #b6e8ff;font-weight: 400;padding-bottom: .25rem;}
.socialIcons {font-size: 200%;padding: 1rem 0;}
.socialIcons a {color: #000000;padding: 0 .5rem;}
.socialIcons a:hover {color: #ffc107;}
.contactInfo {padding-top: 0;}
.contactInfo article {padding: 1rem 0;}
.contactInfo h4 {font-weight: 400;}
.contactInfo li {font-weight: 300;list-style-type: none;}
.copy {font-size: 70%;font-weight: 300;padding-top: 1rem;}
.newsletter {width: 400px; margin: 0 auto;}

/* ############ 10. Media Queries ############ */

/* ############ 10a. Media Query, (min-width: 700px) ############ */
@media screen and (min-width: 700px) {
  /* ######### 10a-i. HERO, Large screen rules ######### */


/* ######### 10a-ii. Navigation, Large screen rules ######### */
  .navWrap {display: grid;grid-template-columns: 100px minmax(auto, 1100px);justify-content: center;height: auto;}
  .navToggleLabel {display: none;}
  nav {position: initial;}
  nav ul {display: flex;justify-content: flex-end;align-items: center;}
  nav ul li a {border-bottom: none;;}
  nav ul li a:hover {background: transparent;}
  nav::after, nav ul li:last-of-type::before {display: none;padding: initial;}
  nav .btn {width: auto;background: #13b1e7;color: #fff;letter-spacing: normal;text-shadow: none;box-shadow: none;}
  nav.btn:hover {box-shadow: inset 0 0 5px #13b1e7;background-color: #223054;}

/* ######### 10a-iii. Trips, Large screen rules ######### */
  .tripList {grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}
  .trips article {width: 90%;display: flex;align-items: center;}
  .trips h1 {margin: 0 1rem 0 0;}
  .trips p {flex: 3;}

/* ######### 10a-iv. CTA summaries, Large screen rules ######### */
  .cta {min-height: 200px;display: flex;align-items: center;justify-content: center;}
  .cta1 {background-image: url("../images/ctaBG1_lg.jpg");}
  .cta2 {background-image: url("../images/ctaBG2_lg.jpg");}
  .cta3 {background-image: url("../images/ctaBG3_lg.jpg");}
  .cta h1 {margin-right: 1rem;}

/* ######### 10a-v. Team, Large screen rules ######### */
  .team {max-width: 1000px;margin: auto;padding: 0 1rem;display: grid;grid-template-columns: 1fr .5fr;grid-template-rows: repeat(2, auto);}
  .team h1 {order: 2;grid-column: 2 / -1;align-self: center;}
  .teamMembers {order: 1;grid-column: 1 / -1;}
  .team p {border-right: solid 1px #dedede;padding-right: 1rem;order: 2;grid-column: 1 / 2;grid-row: 2 / 3;}

  /* ######### 10a-vi. Problem, Large screen rules ######### */
  section.problem {background: url(../images/problem1.png) no-repeat center left;max-width: 1200px;display: grid;grid-template-columns: repeat(8, 1fr);align-items: center;}
  .problem h1 {color: #233458;padding-right: 1rem;text-align: right;text-shadow: 1px 1px 2px #fff;grid-column: 1 / 5;}
  .problem h1 ~ p, .problem h3, .problem ul {grid-column: 5 / -1;}
  .problem ul {margin-left: 2rem;padding-right: 1rem;}
  .problem img {display: none;}

  /* ######### 10a-vii. Actions, Large screen rules ######### */
  .action {max-width: 1200px;margin: auto;}
  .action article {margin-bottom: 1rem;display: grid;grid-template-columns: repeat(2, 1fr);align-items: center;}
  .action article h1 {text-align: right;margin-right: 1rem;}
  .action ul {display: flex;flex-wrap: wrap;}
  .action ul li {flex-basis: 48%;grid-template-columns: 2fr 4fr;}

  /* ######### 10a-viii. Footer, Large screen rules ######### */
  footer {display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: 1fr .25fr;}
  .contact {  }
  .social h3 {border-bottom: none;padding: .5rem 1rem .5rem 0;text-align: right;}
  .social article{height: 100%;display: grid;grid-template-columns: 1fr .5fr;align-items: center;}
  .socialIcons {border-left: solid #fff 1px;font-size: 150%; padding: .5rem 0 .5rem 1rem;}
  .socialIcons a {display: block;}
  .contactInfo {background-color: #0076A8;color: #000000;padding: 1rem 0 0;grid-column: 1 / -1;}
}

/* ############ 10b. Media Query, (min-width: 1000px) ############ */
@media screen and (min-width: 1000px) {
  /* ######### 10b-i. Footer, X-Large screen rules ######### */
  .form {display: grid;grid-template-columns: auto minmax(min-content, 580px);grid-template-areas:  ". h"  ". p"  ". f";}
  .form h3 {grid-area: h;}
  .form p.formIntro {grid-area: p;}
  form#contactForm {max-width: initial;grid-area: f;display: grid;grid-template-areas:"name ph"  "email news"  "radio radio"  "msg msg"  "btn .";grid-gap: 1rem;}

  .contactForm div {margin-top: 0;}
  .contactForm div:nth-child(1) {grid-area: name;}
  .contactForm div:nth-child(2) {grid-area: ph;}
  .contactForm div:nth-child(3) {grid-area: email;}
  .contactForm div:nth-child(4) {grid-area: radio;}
  .contactForm div:nth-child(5) {grid-area: msg;}
  .contactForm div:nth-child(6) {margin: 1.8rem 0 0;grid-area: news;}
  .contactForm button {width: 100%;grid-area: btn;  }
  .contactForm textarea {max-width: 100%;}
  .social article {max-width: 580px;display: flex;flex-direction: column;justify-content: center;}
  .socialIcons {border-left: none;padding-left: 0;}
  .socialIcons a {display: inline-block;font-size: 180%;}
}

/* ############ 10c. Feature Query ############ */
/* SAFARI 11+ */
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) and (stroke-color:transparent) {
    .galleryWrap  {align-items: stretch;}
      .galleryWrap img {height: inherit;}
    }
  }