/*

TABLE OF CONTENTS

  1. Global styles
  2. Hero
  3. Navigation
  4. Trips
  5. CTA
  6. Team
  7. Problem
    7a. Actions
  8. Gallery
  9. Footer
    9a. Contact 
    9b. Connect
  10. Media Queries
    10a. Media Query, (min-width: 700px)
        10a-i. Hero
        10a-ii. Navigation, Large screen
        10a-iiI. Trips, Large screen
        10a-iv. CTA summaries, Large screen rules
        10a-v. Team, Large screen rules
        10a-vi. Problem
        10a-vii. Actions
    10b. Media Query, (min-width: 1000px)

*/

/* ############ 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: 0.5rem;
}

/* ############ 2. Hero ############ */
.hero {
  background: url("../images/header1_sm.jpg") no-repeat center right;
  background-size: cover;
  color: #fff;
  font-size: 20px;
  text-align: center;
  display: grid;
  grid-template-columns: 10px 2fr 10px;
  grid-template-rows: 0.5fr 1fr 20px;
  grid-gap: 20px;
}

.hero img {
  margin: auto;
  padding-top: 1rem;
  grid-column: 2 /3;
  grid-row: 1 / 2;
}

.hero article {
  grid-column: 2 /3;
  grid-row: 2 / 3;
}

.hero h1 {
  font-size: 2rem;
  text-transform: uppercase;
}

.hero button {
  background-color: #fff;
  border: none;
  border-radius: 4px;
  color: #2abadf;
  font-size: 1rem;
  padding: 5px 10px;
  margin: 0.75rem auto 0;
}

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

.navWrap {
  position: sticky; /*  ** note the menu will not be sticky until we add more page content */
  top: 0;
  z-index: 99;
  height: 48px;
  width: 100%;
  background-color: #212f54;
  border-bottom: 1px solid #e0e5eb;
  box-shadow: 0px 1px 8px #223055;
  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: 0.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: 3rem;
  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;
  display: flex;

}

nav ul li a {
  display: inline-block;
  text-decoration: none;
  width: 100%;
  padding: 0.75rem 1rem;
  color: #fff;
  border-bottom: solid 1px rgba(255, 255, 255, 0.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: 0.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 0.6rem;
  letter-spacing: 1px;
  text-shadow: 0 0 1px rgb(19, 177, 231);
  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, 0.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, 0.5);
  color: #fff;
  padding: 0.5rem;
  margin-bottom: 1rem;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(51, 51, 51, 0.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: 1;
}

.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, 0.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: 0.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: 0.5rem 1rem;
  grid-column: 2 / -1;
  align-self: start;
}

.action li p {
  padding: 0.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: 0.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: #223055;
  color: #fff;
  padding: 1rem 1rem 2rem;
}
.form p {
  font-weight: 300;
  padding-bottom: 1rem;
}

/* ######### 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: 0.5rem;
  width: 100%;
}

.contactForm textarea {
  min-height: 100px;
}

.contactForm button {
  background-color: #13b1e7;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 1rem;
  padding: 0.5rem;
  min-width: 200px;
  width: 50%;
}

.contactForm button:hover {
  background-color: #35b1e8;
  color: #ffc107;
}

.contactForm i {
  font-size: 200%;
  padding-right: 0.5rem;
}

.contactForm input[type="submit"]:active {
  box-shadow: 1px 1px 6px rgba(255, 255, 255, 0.6),
    0px 0px 4px rgba(255, 255, 255, 0.8);
}

.contactForm .checks {
  margin: 0.25em 0 1em 0.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;
}

.radioBtns p {
  padding-bottom: 0;
}

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 */
}

/*  ########### Note viewers, I am going to place all of our new code for the 05_03 lecture here, in between these new code start/end comments. I will end up deleting these comments once we hvae finished. I just want you to be clear on what is different compared with what we had before :) ########### */
/*  ########### NEW CODE START (05_03) ########### */
form#contactForm {
  max-width: initial;
}

.contactForm div {
  margin-top: 0;
}

.contactForm div:nth-child(1) {
}

.contactForm div:nth-child(2) {
}

.contactForm div:nth-child(3) {
}

.contactForm div:nth-child(4) {
}

.contactForm div:nth-child(5) {
}

.contactForm div:nth-child(6) {
  margin: 1.8rem 0 0;
}

.contactForm button {
  width: 100%;
}

.contactForm textarea {
  max-width: 100%;
}
/*  ########### NEW CODE END (05_03) ########### */

/* ######### 9b. Footer > Connect ######### */
.social,
.contactInfo {
  background-color: #13b1e7;
  color: #fff;
  padding: 1rem 1rem 0;
  text-align: center;
}

.social h3 {
  border-bottom: solid 1px #b6e8ff;
  font-weight: 400;
  padding-bottom: 0.25rem;
}

.socialIcons {
  font-size: 200%;
  padding: 1rem 0;
}

.socialIcons a {
  color: #223055;
  padding: 0 0.5rem;
}

.socialIcons a:hover {
  color: #ffc107;
}

.contactInfo {
  padding-top: 0;
}

.contactInfo article {
  border-top: solid 1px #b6e8ff;
  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;
}

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

/* ############ 10a. Media Query, (min-width: 700px) ############ */
@media screen and (min-width: 700px) {
  /* ######### 10a-i. HERO, Large screen rules ######### */
  header.hero {
    background: url(../images/header1_lg.jpg) no-repeat center left;
    background-size: cover;
    text-align: left;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: .25fr 1fr .25fr;
    align-items: center;
  }

  .hero img {
    margin: 0 0 0 auto;
    grid-row: 2 / 3;
  }

  .hero article {
    max-width: 1000px;
    grid-column: 3 / 6;
  }

  /* ######### 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;
    display: flex;
    justify-content: center;
    margin: auto;
  }

  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-viii. Footer, 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 article h1 {
    text-align: right;
    margin-right: 1rm;
  }

  .action ul{
    display: flex;
    flex-wrap: wrap;
  }

  .action ul li{
    flex-basis: 48%;
    grid-template-columns: 2fr 4fr;
  }
  
  footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr .25fr;
  }

  .contact {
  }

  .social h3 {
    border-bottom: none;
    padding: 0.5rem 1rem 0.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: 0.5rem 0 0.5rem 1rem;
  }

  .socialIcons a {
    display: block;
  }

  .contactInfo {
    background-color: #b6e8ff;
    color: #233156;
    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-contnt, 580px);
    grid-template-areas: 
    ". h"
    ". p";
  }

  .form h3 {
    grid-area: h;
  }

  .form p.formIntro {
    grid-area: p;
  }

  .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%;
  }
}