/* Navigation
------------------------------------------*/

/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */
  height:100%;
  width:0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgba(100, 189, 230, 0.8); /* Bluey fallback color */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.6s; /* 0.6 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  left:10%;
  top: 10%; /* 10% from the top */
  width: 40%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 10%; /* 30px top margin to avoid conflict with the close button on smaller screens */
}


/* The navigation links inside the overlay */
.overlay a {
  padding: 10% 10% 10% 20%;
  text-decoration: none;
  font-size: 3vw;
  color:rgba(224, 243, 252, 0.877); 
  display: block; /* Display block instead of inline */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color:rgb(255, 255, 255);
  transition: 0.7s;
}
  
  /* Position the close button (top right corner) */
  .overlay .closebtn {
    position: absolute;
    top: 8%;
    right: 6%;
    font-size: 5vw;
  }
  /* Hamburger Nav element */
  .head span {
  font-size:2em;
  visibility: visible;
  color: rgb(255, 255, 255); 
  left:0;
  margin-left:1%;
  margin-top:0%;
  display:flex;
  margin-right:1%;
  }
  
  .head span:hover{
  color:rgb(100, 178, 230); 
  transition: 0.2s;
  }
  
  header                                                                                                                                                                                                                                                                                           {
   font-family: 'Open Sans', monospace;
  }
  
  nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  }
  
  /* Navigation */
  ul {
    display:flex;
    top:0%;
    position:absolute;
    z-index: 7;
    width: 100%;
    height: 10%;
    font-family: 'Open Sans', monospace;
    font-size: 1.8vw;
    letter-spacing: 0;
    background-color:rgba(104, 201, 239);
    border-bottom: 5px solid rgb(255, 255, 255);
  }
  
  
  li {
    float:right;
  }
  
  .quiz{
    padding:0% 1% 10% 0%;
  }
  .learnmorenav {
    padding: 0% 10% 0% 50%;
  }
  .homenav {
    padding: 0% 10% 0% 50%;
  }
  
  li a {
    float:right;
    padding: 20px 20px 20px 20px;
    display: block;
    color:rgb(255, 255, 255);
    font-weight: bold;
    text-decoration: none;
  }
  
  li a:hover {
    background-color:rgba(39, 168, 228, 0.877) ;
  }
  
  @media screen and (max-width:600px) {
      span{visibility:visible;}
      nav{visibility:hidden;}
  }
  
  @media screen and (max-width:1800px) {
    nav{visibility:visible;}
  }

  @media only screen and (max-width: 800px) {
    ul {
      height:9%;
    }
  }
  
  @media only screen and (max-width: 800px) {
    .head span {
      font-size:4em;
    }
  }

   @media only screen and (max-width: 800px) {
    a {
      font-size:3vw;
    }
  }
    /* Body 
    ------------------------------------------*/
  body{
    background-color:rgba(104, 201, 239, 0.877);
  }
  .wrapper{
      font-family: 'Open Sans', monospace;
  }

  /* Header 
  ------------------------------------------*/
.container1{
  background:rgba(104, 201, 239, 0.877);
  padding:0% 0% 20% 0%;
}

.container2{
  background-color:white;
  padding:1em 0;
  left:0;
  right:0;
}


.container1 h1{
  color: white;
  padding:20% 20% 0% 8%;
  font-size:4.1vw;
  text-align: left;
}

.container1 p{
  color:white;
  padding:0% 0% 0% 9%;
  font-size:1.8vw;
  text-align: left;
}

.container2 h2{
  background-color:white;
  padding:10% 20% 0% 20%;
  text-align:center;
  font-size:3vw;
}
.container2 p{
  text-align:center;
  padding:5% 10% 15% 10%;
  font-size:1.5vw;
}

.container1 img {
  float:right;
  right:0%;
  top:10%;
  min-height:50%;
  min-width:50%;
  display:flex;
}

@media only screen and (max-width: 800px) {
  .container1 img {
    position:sticky;
    height:30%;
    width:30%;
    
  }
}
  

.learnmore h1{
    color: white;
    font-size: 3.6vw;
    font-weight: bold;
    text-align:center;
    padding: 10% 10% 0% 10%;
    letter-spacing: 0.4vw;
  }

  @media (max-width: 50em){
    .learnmore h1{
      font-size:30px;
    }
  }

  .column {
    width:20%;
    background-color: white;
    margin:2% 2% 2% 3%;
    padding:4% 4% 5% 4%;
    min-height:240px;
    min-width:200px;
  }
  
.containerlm1{
    background-color:rgba(104, 201, 239, 0.877);
  }
.container2lm{
    background-color:white;
    padding:1em 0;
    left:0;
    right:0;
  }
  
.container2lm h4{
    background-color:white;
    padding:10% 20% 0% 20%;
    text-align:center;
    font-size:3vw;
  }
.container2lm p{
    text-align:center;
    padding:5% 10% 15% 10%;
    font-size:1.5vw;
  }
  
.container3lm{
    background-color:rgba(104, 201, 239, 0.877);
    padding:1em 0;
    left:0;
    right:0;
  }
.container3lm h4{
      color: white;
      font-size: 3.6vw;
      font-weight: bold;
      text-align:left;
      padding: 2% 10% 0% 10%;
      letter-spacing: 0.4vw;
    }
  
 /*! Flickity v1.2.1
http://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus {
  outline: none;
}

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}


/* draggable */

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}


/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: white;
  background: hsla(0, 0%, 100%, 0.75);
  cursor: pointer;
  /* vertically center */
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.flickity-prev-next-button:hover {
  background: white;
}

.flickity-prev-next-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #09F;
}

.flickity-prev-next-button:active {
  opacity: 0.6;
}

.flickity-prev-next-button.previous {
  left: 10px;
}

.flickity-prev-next-button.next {
  right: 10px;
}


/* right to left */

.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}

.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button:disabled {
  opacity: 0.3;
  cursor: auto;
}

.flickity-prev-next-button svg {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

.flickity-prev-next-button .arrow {
  fill: #333;
}

/* ---- page dots ---- */

.flickity-page-dots {
  align-items: center;
  position: relative;
  width: 100%;
  bottom: -5%;
  left: -45%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}

.flickity-rtl .flickity-page-dots {
  direction: rtl;
}

.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: #333;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}


/* Flickity responsive
------------------------------------------*/

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

.flickity img {
  margin:0 auto;
  display:block;
}

.flickity div {
  width: 100%;
}

.flickity {
  margin-bottom: 2em;
  height: 100%;
}

.flickity img{
  min-width:30%;
  min-height:20%;
  max-width:70%;
  max-height:60%;
}

/* Gallery of Cards with information and span element
------------------------------------------*/


a {
  color: black;
  text-decoration: none;
}

a:hover {
  color: rgb(76, 129, 157);
  transition: 0.2s;
}

.gallery{
  display:flex;
  flex-wrap: wrap;
}

.gallery a {
  margin: 1em 1em 0 ;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.gallery span{
  position: absolute;
  bottom: -71px;
  left: 0;
  text-align:center;
  width: 100%;
  background: rgba(255, 255, 255, 0.6);
  padding: .7em 0 1.1em 0;
  font-size:1.5em;
  transition: 1s;
}

.gallery a:hover span {
  bottom: 0;
}

.gallery a,
.gallery p {
  display: block;
}

/* media queries for font size of learn more page 
------------------------------------------*/


@media only screen and (max-width: 800px) {
  a {
    font-size:3vw;
  }
}
@media only screen and (max-width: 700px) {
  column {
    padding-left:20%;
  }
}
@media only screen and (max-width: 700px) {
  .container2lm p {
    font-size:2vw;
  }
}

@media only screen and (max-width: 700px) {
   p {
    font-size:2vw;
  }
}