@charset "UTF-8";
/* CSS Document */

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

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

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

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

 h1, h2, h3, h4 {
   line-height: 1;
 }

 h1 {
	font-family: 'Dosis', Fallback, sans-serif; 
	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;
}
 body {
  background: rgba(255,226,62,.1);
  }
.hero {
  color: #fff;
  font-size: 17px;
  text-align: center;
  display: grid;
  grid-template-columns: 20px 25% 3fr 1fr;
  grid-template-rows: 20px 1fr 20px;
  grid-template-areas:
		  ". . . . . ."
		  ". hero-img article article article ."
		  ". . . . . .";
  grid-gap: 0px;
  background-color: #cf1f45;
  justify-content: center;
  align-content: center;
  align-items: center;
 }
.hero img {
  margin: auto;
  grid-area: hero-img;
  display: flex;
  width: 100px;
  align-content: center;
  justify-content: center;
  align-self: center;
  align-items: baseline;
  padding-bottom: 10px;
  padding-right: 10px;
}
.masthead {
  font-family: 'Dosis', Fallback, sans-serif;
  font-size: 48px;
  line-height: 1;
}
.hero article {
  grid-area: article;
  background-color: #cf1f45;
  padding-right: 50px;
  color: #ffe23e;
}

/* ############ 3. Navigation ############ */

.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: #395da9;  /*#212f54*/
  border-bottom: 1px solid #e0e5eb;
  box-shadow: 0px 1px 8px #223055;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

input#navToggle {
  display: none;
}

input#navToggle ~ label {
  position: relative;
  padding: 0.25rem;
  width: 2rem;
  height: 1.25rem;
  height: 2rem;
  cursor:pointer;/*mine*/
}

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: rgba(57, 93, 169, 1);
  background-size: cover;
}

nav ul {
    list-style-type: none;
	/*justify-content: flex-end;*/
}

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;
  }
  
  ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
  background-color: #eee;
}

/* Display list items side by side */
ul.breadcrumb li {
  display: inline;
  font-size: 16px;
  color: #696969;
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
  padding: 18px;
  color: #696969;
  content: ">\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
  color: rgba(57, 93, 169, .7);
  text-decoration: none;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}
  

  /* ############ Main ############ */

  .main-search-container {
	grid-area: main-search;
	/*min-width: auto;*/
  }
 .main-search {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	max-height: 100px;
	padding-top: 20px;
	padding-bottom: 10px;
  } 
   .topnav .search-container {
	font-size: 15px;
	border-color: rgba(57, 93, 169, .8);
	border-width: 1px;
  }
  
  .topnav .search-container {
	
  }
  .topnav input[type=text] {
	padding: 6px;
	margin-top: 8px;
	font-size: 15px;
	/*width: 80%;*/ /* mine, there was no width rule */
	/*flex-shrink:1*/
	width: auto;
  }
  .topnav .search-container button {
	justify-content: flex-start;
	padding: 7px 14px 6px 5px;
	margin-top: 8px;
	margin-right: 0px;
	background: rgba(57, 93, 169, .3);
	font-size: 15px;
	border: none;
	cursor: pointer;
	font-family: 'Rubik', Fallback, sans-serif;
  }
  
  .topnav .search-container button:hover {
	background: rgba(57, 93, 169, .7);
  }
	
  img {
   max-width: 100%;
   height: auto;
  }
 article {
	 text-align: center;
 }
.trips {
  padding-top: 1rem;
  margin: auto;
  max-width: 1200px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  align-items: center;
}
.trips h3 {
  color: #395da9; /*#32A9F9;*/
  margin: auto;
  padding-right: 1rem;
  align-items: flex-end;
  flex: 1;
}
.trips article h3 {
  margin: auto;
  text-align: end;
  padding-right: 1rem;
}
.trips article p {
  border-left: solid 2px rgba(57, 93, 169, .5);
  padding-left: 1rem;
  font-size: 1.2rem;
  text-align: start;
  text-justify:auto;
  flex: 2;
}
.trips article {
  display: flex;
  margin: auto;
  padding-top: 0px;
  padding-bottom: 20px;
  align-items: center;
  }
  .trips article h3 {
	text-align: right;
	}
  .trips article p {
	text-align: left;
	/*text-align-last: center;*/
	}
	article p {
	color: rgba(57, 93, 169, .8); /*#395da9;*/ /*f7db05*/
  }
.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,.8);
  border-radius: 10px;
  border: solid 1px #dedede;
  box-shadow: 0 2px 5px rgba(0,0,0,0.8);
  padding: 1.8rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(140px, 1fr) auto;
  /*grid-template-rows: auto;*/
  /*vertical-align:central;*/
  /*text-align:center;*/
  align-items: center; /* mine */
}

.tripList h3, .tripList img {
  grid-row: 1 / 2;
  grid-column: 1;
}

.tripList h3 {
  background-color: rgba(255,255,255,0.85);
  color: #3abadf; /*#fff*/
  padding: .5rem;
  margin-bottom: 1rem;
  text-align: center;
  text-shadow: 1.5px 1.5px 3px rgba(51,51,51,1.0);
  text-shadow: 1.5px 1.5px 3px rgba(51,51,51,0);
  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;
}

  .topnav input[type=text] {
	  /*width: 50%;*/ /* mine, there was no width rule */
  }
  
  .cta {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	margin: 2rem auto;
	padding: 2rem;
	text-shadow: 1px 1px 1px rgba(0 0 0 / 50%);
}
  
  .cta1 {
    background-image: url("../img/cassette20.png");
	background-repeat: no-repeat;
	background-size: 60%;
	background-position: center center;
	color: #fff;
	background-color:#395da9;
  }

  .cta2 {
    background-image: url("../img/atari20.png");
	background-repeat: no-repeat;
	background-size: 55%;
	background-position: center center;
	color: #fff;
	background-color:#cf1f45;
  }

  .cta3 {
    background-image: url("../img/fashion-couple20.png");
	background-repeat: no-repeat;
	background-size: 48%;
	background-position: center center;
	color: #fff;
	background-color:#f7db05;
  }

  .cta h1 {
    margin-right: 1rem;
  }
  
  .copyright {
	  text-align:center;
  }
  
  @media screen and (min-width: 320px) {
	  
	  
  .cta1 {
	background-size: 88%;
  }

  .cta2 {
	background-size: 85%;
  }

  .cta3 {
	background-size: 76%;
  }
  }
  @media screen and (min-width: 355px) {
	.cta1 {
	background-size: 75%;
  }

  .cta2 {
	background-size: 72%;
  }

  .cta3 {
	background-size: 70%;
  }  
	  
  }
  
@media screen and (min-width: 390px) {

.hero {
  color: #fff;
  font-size: 18px;
  text-align: center;
  display: grid;
  grid-template-columns: 20px 20% 3fr 20px;
  grid-template-rows: 20px 1fr 20px;
  grid-template-areas:
		  ". . . . . ."
		  ". hero-img article article article ."
		  ". . . . . .";
  grid-gap: 0px;
  background-color: #cf1f45;
  justify-content: center;
  align-content: center;
  align-items: center;
 }
.hero img {
  margin: auto;
  grid-area: hero-img;
  display: flex;
  width: 100px;
  align-content: center;
  justify-content: center;
  align-self: center;
  align-items: baseline;
  padding-bottom: 10px;
  padding-right: 10px;
}
.masthead {
	font-family: 'Dosis', Fallback, sans-serif;
	font-size: 42px;
	line-height: 1;
}
.cta1 {
	background-size: 70%;
  }

  .cta2 {
	background-size: 67%;
  }

  .cta3 {
	background-size: 64%;
  }
  }
  
  @media screen and (min-width: 438px) {
	.cta1 {
	background-size: 60%;
  }

  .cta2 {
	background-size: 57%;
  }

  .cta3 {
	background-size: 55%;
  }  
	  
  }

@media screen and (min-width: 484px) {
	
.hero {
  color: #fff;
  font-size: 20px;
  grid-template-columns: 3% 16% 3fr 4%;
  grid-template-areas:
		  ". . . . . . . ."
		  ". hero-img article article ."
		  ". . . . . . . .";
 }
.hero img {
  width: 120px;
  padding-bottom: 10px;
}
.masthead {
	font-size: 54px;
}
.cta1 {
	background-size: 50%;
  }

  .cta2 {
	background-size: 47%;
  }

  .cta3 {
	background-size: 44%;
  }

}
@media screen and (min-width: 550px) {
/* ############ 2. Hero ############ */
body {
	  background: rgba(255,226,62,.1);
  }
.hero {
  font-size: 20px;
  grid-template-rows: 20px 1fr 20px;
  grid-template-areas:
		  ". . . . . . . ."
		  ". hero-img article article article article article ."
		  ". . . . . . . .";
 }
.hero img {
  width: 120px;
}
.masthead {
	font-size: 64px;
}
.cta1 {
	background-size: 35%;
  }

  .cta2 {
	background-size: 30%;
  }

  .cta3 {
	background-size: 25%;
  }

/* ############ 3. Navigation ############ */

}




/* ############ 4. Trips ############ */


/* ############ 5. CTA ############ */


/* ############ 6. Team ############ */


/* ############ 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) {
  /* ######### 10a-i. HERO, Large screen rules ######### */
  
  body {
	  background: rgba(255,226,62,.1);
  }
  
  header .hero {
    text-align: center;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 70px 60px;
	grid-template-areas:
		  "hero-img article article article article article"
		  "main-search main-search main-search main-search main-search main-search";
	text-align: center;
    align-items: center;
  }

  .hero img {
	display: flex;
    width: 180px;
	}
  .hero article {
	grid-area: article;
	/*background-color: #32A9F9;
	background-image: url("../img/clock.png");
	background-repeat: no-repeat;
	background-size: 10%;
    background-position: 4% center;*/
	background-color: #cf1f45;  /*395da9*/
	/* max-width: 1000px;*/
	color: #ffe23e; /*f7db05*/
  }
 
/* ######### 10a-ii. Navigation, Large screen rules ######### */
  .navWrap {
    display: flex;
    grid-template-columns: 100px minmax(auto, 1100px);
    justify-content: center;
    height: auto;
	background-color: #395da9;
  }

  .navToggleLabel {
    display: none;
  }

  nav {
	margin-left: 10%; /* mine */
	margin-right: 10%; /* mine */
    position: initial;
  }

  nav ul {
    display: flex;
    justify-content: flex-end;
	justify-content:center; /* mine */
	justify-content:space-between; /* mine */
    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;
  }

/* ######### 10a-iiI. Trips, Large screen rules ######### */
  .tripList {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  }

  .trips article {
   /*width: 90%;*/
   display: flex;
   align-items: center;
  }
  .trips p {
    flex: 3;
  }
  .topnav input[type=text] {
	/*width: 50%;*/ /* mine, there was no width rule */
  }
   .cta1 {
	background-size: 24%;
  }

  .cta2 {
	background-size: 24%;
  }

  .cta3 {
	background-size: 22%;
  }
  
  /* ######### 10a-iv. CTA summaries, Large screen rules ######### */
  
  }
  @media screen and (min-width: 820px) {
	  
  body {
	  background: rgba(255,226,62,.1);
  }

  .tripList {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-gap: 1rem;
  }
  .cta1 {
	background-size: 20%;
  }

  .cta2 {
	background-size: 17%;
  }

  .cta3 {
	background-size: 18%;
  }
}

/* ############ 10b. Media Query, (min-width: 1000px) ############ */
@media screen and (min-width: 1000px) {
	
  body {
	  background: rgba(255,226,62,.1);
  }
	.topnav input[type=text] {
	/*width: 50%;*/ /* mine, there was no width rule */
  }
  .cta1 {
	background-size: 15%;
  }

  .cta2 {
	background-size: 13%;
  }

  .cta3 {
	background-size: 12%;
  }

  .cta h1 {
    margin-right: 1rem;
  }
}

/* ############ 10b. Media Query, (min-width: 1000px) ############ */
@media screen and (min-width: 1000px) {
	body {
	  background: rgba(255,226,62,.1);
  }
  
}
@media screen and (min-width: 1160px) {
	
	body {
	  background: rgba(255,226,62,.1);
  }
  article p {
	color: rgba(57, 93, 169, .9); /*#395da9;*/ /*f7db05*/
  }
	  
  .tripList {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  grid-gap: 1rem;
  }
}

/*  justify-content:center;  */