/*

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
    10b. Media Query, (min-width: 1000px)

*/

/* ############ 1. Global Styles ############ */

@font-face {
    font-family: 'Rubik';
    src: url('../fonts/Rubik/Rubik-Regular.eot');
    src: url('../fonts/Rubik/Rubik-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Rubik/Rubik-Regular.woff2') format('woff2'),
        url('../fonts/Rubik/Rubik-Regular.woff') format('woff'),
        url('../fonts/Rubik/Rubik-Regular.ttf') format('truetype'),
        url('../fonts/Rubik/Rubik-Regular.svg#Rubik-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Dosis';
    src: url('../fonts/Dosis/Dosis-Bold.eot');
    src: url('../fonts/Dosis/Dosis-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Dosis/Dosis-Bold.woff2') format('woff2'),
        url('../fonts/Dosis/Dosis-Bold.woff') format('woff'),
        url('../fonts/Dosis/Dosis-Bold.ttf') format('truetype'),
        url('../fonts/Dosis/Dosis-Bold.svg#Dosis-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

 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: 'Rubik', Fallback, sans-serif;
   line-height: 1.4;
 }

 img {
   max-width: 100%;
   height: auto;
 }

 h1, h2, h3, h4 {
   font-family: 'Dosis', Fallback, 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;
  font-weight: bold;
}

i {
  padding-left: .5rem;
}

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

/* ############ 7a. Problem > Action ############ */


/* ############ 8. Gallery ############ */


/* ######### 9. Footer ######### */

/* ######### 9a. Footer > Contact ######### */

/* ######### 9b. Footer > Connect ######### */


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

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

}

/* ############ 10b. Media Query, (min-width: 1000px) ############ */
@media screen and (min-width: 1000px) {

}