/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
/* Style the header with a grey background and some padding */
.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;
}

/* Style the header links */
.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.logo {
  font-size: 25px;
  font-weight: bold;
}

/* Change the background color on mouse-over */
.header a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active/current link*/
.active {
  background-color: dodgerblue;
  color: white;
}

/* Float the link section to the right */
.header-right {
  float: right;
}

/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
}

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

/*Home Page Image Tiles when scrolling down */

{ box-sizing: border-box;
}
  .thumbs {

   width: 650px;
   border: 1px solid #ccc;
   margin: 10px auto;
   resize: both;
  }
  /* last row overstretch fix */
  .thumbs:after {
    content: "";
    flex: 100 0 auto;
  }
  
  .thumb {
   position: relative;
   display: inline-block;
   flex: 1 0 auto;
   width: auto;
   height: 120px;
   margin: 2px;
   text-decoration: none;
   background-color: rgba(0,0,0, 0.50);
   box-shadow: 0px 0px 0px 0px rgba(0,0,0, 0.0);
   transition: box-shadow 300ms, transform 400ms, z-index 400ms, background-position 400ms;
   z-index: 1;
  }
  .thumb:hover {
   box-shadow: 0px 0px 10px 0px rgba(0,0,0, 0.7);
   transform: scale(1.2, 1.2);
   z-index: 100;
  }
  
  .thumb-img > img,
  .thumb-txt > div {
   min-width: 60px;
   max-width: 300px;
  }
  
  .thumb-img {
   background-size: cover;
   background-position: 50% 50%;
   background-repeat: no-repeat;
  }
  .thumb-img:hover {
   animation-name: thumb-scroll;
   animation-delay: 400ms;
   animation-duration: 2.5s;
   animation-iteration-count: infinite;
   animation-direction: normal;
   animation-timing-function: linear;
   animation-fill-mode: forwards;
  }
  .thumb-img > img {
   display: block;
   height: 100%;
   opacity: 0;
  }
  @keyframes thumb-scroll {
   15%, 35% { background-position: 0% 0%; }
   65%, 85% { background-position: 100% 100%; }
  }
  
  .thumb > div {
   font-family: "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
   font-size: 14px;
   color: #fff;
   padding: 0px 2px;
   overflow: hidden;
  }
  .thumb > div > span {
   display: block;
  }
  .thumb > div > span:first-child {
   font-weight: bold;
  }
  .thumb > div > span:last-child {
   font-size: 0.8em;
  }
  
  .thumb-img > div {
   display: block;
   position: absolute;
   bottom: 0px;
   left: 0px;
   width: 100%;
   white-space: nowrap;
   background-color: rgba(0,0,0, 0.30);
   opacity: 0;
   transition: opacity 300ms;
  }
  .thumb-img > div > span {
   font-size: 0.8em;
  }
  .thumb-img:hover > div {
   opacity: 1;
  }
  
  .thumb-txt > div {
   display: block;
   width: auto;
   height: 100%;
  }