/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

/* TOP NAVIGATION */


/* Add a black background color to the top navigation */


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
    text-decoration: none;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #04AA6D;
    text-decoration: none;
  color: white;
}






html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: none;
    color: white;
  }



  a:link {
    text-decoration: none;
    color: white;
  }
  
  
    a:hover {
    text-decoration: none;
    color: white;
  }
  
  
  
    a:active {
    text-decoration: none;
    color: white;
  }
  
  
  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}



@media screen and (max-width: 750px) {
  .grid .item {
    padding: 1.5vw; /* Adjust padding for small screens */
  }
}



@supports (display: grid) {

  .grid {
    display: grid;
    grid-gap: 1.5vw;
    min-height: 100vh;
    padding: 1.5vw;
  }


  .grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 50vh 30vh repeat(7, minmax(20vh, 1fr));
    grid-template-areas:
      "hero   hero"
      "big1   big1"
      "med1   med1"
      "med2   med2"
      "small1 small2"
      "small3 small4"
      "small5 small6"
      "small7 small8"
      "small9 small10"
      
      "hero2  hero2"
      "big2   big2"
      "med3   med3"
      "med4   med4"
      "small15 small16"
      "small17 small18"
      "small19 small20"
      "small21 small22"
      "small23 small24"
      
      "hero3  hero3"
      "big3   big3"
      "med5   med5"
      "med6   med6"
      "small29 small30"
      "small31 small32"
      "small33 small34"
      "small35 small36"
      "small37 small38"
      
      "hero4  hero4"
      "big4   big4"
      "med7   med7"
      "med8   med8"
      "small43 small44"
      "small45 small46"
      "small47 small48"
      "small49 small50"
      "small51 small52"
      
      
      ;
  }
}
  @media screen and (min-width: 750px) {

    .grid {
      grid-template-columns: repeat(3, 1fr); /* changed from 5 to 3 */
      grid-template-rows: auto;
 /*     grid-template-rows: repeat(5, 25vh); */
      grid-template-areas:
      
   
        
        
        
         "hero   hero   hero"
         "big1   big1   med1"
         "med2   med2   med2" /* Med items can now be side-by-side */
         "small1 small2 small3"
         "small4 small5 small6"
         "small7 small8 small9"
         "small10 small10 small10"
         
         "hero2  hero2  hero2"
         "med3   big2   big2"
         "med4   med4  med4"
         "small15 small16 small17"
         "small18 small19 small20"
         "small21 small22 small23"
         "small24 small24 small24"  /* Adjust as needed */
        
         "hero3  hero3  hero3"
         "med5   big3   big3"
         "med6   med6  med6"
         "small29 small30 small31"
         "small32 small33 small34"
         "small35 small36 small37"
         "small38 small38 small38"  /* Adjust as needed */
        
         "hero4  hero4  hero4"
         "med7   big4   big4"
         "med8   med8   med8"
         "small43 small44 small45"
         "small46 small47 small48"
         "small49 small50 small51"
         "small52 small52 small52"  /* Adjust as needed */


        
        ;
    }
  }

  @media screen and (min-width: 1400px) {
    .grid {
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: auto;
      grid-template-areas:
      "small1 hero   hero hero med1   med1"
      "small2 hero   hero hero med2   med2"
      "small3 small5 big1 big1 small7 small8"
      "small4 small6 big1 big1 small9 small10"
      
      
      "med3 med3 hero2   hero2 hero2 small15"
      "med4 med4 hero2   hero2 hero2 small16"
      "small17 small19 big2 big2 small21 small22"
      "small18 small20 big2 big2 small23 small24"
      
            
      "hero3   hero3 hero3 small29 med5 med5"
      "hero3   hero3 hero3 small30 med6 med6"
      "small31 small32 big3 big3 small33 small34"
      "small35 small36 big3 big3 small37 small38"
      
      "small43 hero4 hero4 hero4 med7   med7"
      "small44 hero4 hero4 hero4 med8   med8"
      "small45 small47 big4 big4 small49 small50"
      "small46 small48 big4 big4 small51 small52"
      
      ;
    }
  }

  .grid .item:nth-child(1)  { grid-area: hero; }
  .grid .item:nth-child(2)  { grid-area: big1; }
  .grid .item:nth-child(3)  { grid-area: med1; }
  .grid .item:nth-child(4)  { grid-area: med2; }
  .grid .item:nth-child(5)  { grid-area: small1; }
  .grid .item:nth-child(6)  { grid-area: small2; }
  .grid .item:nth-child(7)  { grid-area: small3; }
  .grid .item:nth-child(8)  { grid-area: small4; }
  .grid .item:nth-child(9)  { grid-area: small5; }
  .grid .item:nth-child(10) { grid-area: small6; }
  .grid .item:nth-child(11) { grid-area: small7; }
  .grid .item:nth-child(12) { grid-area: small8; }
  .grid .item:nth-child(13) { grid-area: small9; }
  .grid .item:nth-child(14) { grid-area: small10; }
  
  .grid .item:nth-child(15)  { grid-area: hero2; }
  .grid .item:nth-child(16)  { grid-area: big2; }
  .grid .item:nth-child(17)  { grid-area: med3; }
  .grid .item:nth-child(18)  { grid-area: med4; }
  .grid .item:nth-child(19)  { grid-area: small15; }
  .grid .item:nth-child(20)  { grid-area: small16; }
  .grid .item:nth-child(21)  { grid-area: small17; }
  .grid .item:nth-child(22)  { grid-area: small18; }
  .grid .item:nth-child(23)  { grid-area: small19; }
  .grid .item:nth-child(24)  { grid-area: small20; }
  .grid .item:nth-child(25)  { grid-area: small21; }
  .grid .item:nth-child(26)  { grid-area: small22; }
  .grid .item:nth-child(27)  { grid-area: small23; }
  .grid .item:nth-child(28)  { grid-area: small24; }

  .grid .item:nth-child(29)  { grid-area: hero3; }
  .grid .item:nth-child(30)  { grid-area: big3; }
  .grid .item:nth-child(31)  { grid-area: med5; }
  .grid .item:nth-child(32)  { grid-area: med6; }
  .grid .item:nth-child(33)  { grid-area: small29; }
  .grid .item:nth-child(34)  { grid-area: small30; }
  .grid .item:nth-child(35)  { grid-area: small31; }
  .grid .item:nth-child(36)  { grid-area: small32; }
  .grid .item:nth-child(37)  { grid-area: small33; }
  .grid .item:nth-child(38)  { grid-area: small34; }
  .grid .item:nth-child(39)  { grid-area: small35; }
  .grid .item:nth-child(40)  { grid-area: small36; }
  .grid .item:nth-child(41)  { grid-area: small37; }
  .grid .item:nth-child(42)  { grid-area: small38; }

  .grid .item:nth-child(43)  { grid-area: hero4; }
  .grid .item:nth-child(44)  { grid-area: big4; }
  .grid .item:nth-child(45)  { grid-area: med7; }
  .grid .item:nth-child(46)  { grid-area: med8; }
  .grid .item:nth-child(47)  { grid-area: small43; }
  .grid .item:nth-child(48)  { grid-area: small44; }
  .grid .item:nth-child(49)  { grid-area: small45; }
  .grid .item:nth-child(50)  { grid-area: small46; }
  .grid .item:nth-child(51)  { grid-area: small47; }
  .grid .item:nth-child(52)  { grid-area: small48; }
  .grid .item:nth-child(53)  { grid-area: small49; }
  .grid .item:nth-child(54)  { grid-area: small50; }
  .grid .item:nth-child(55)  { grid-area: small51; }
  .grid .item:nth-child(56)  { grid-area: small52; }

/* flexbox fallback is the browser does not support display:grid */
@supports not (display: grid) {

  .grid {
    display: flex;
    flex-flow: row wrap;
    min-height: 100vh;
    padding: 0.75vw;
  }

  .grid .item {
    min-height: 20vh;
    margin: 0.75vw;
  }

/* 

  .grid .item:nth-child(1)  { flex: 0 1 calc(100% - 1.5vw); height: 50vh; }
  .grid .item:nth-child(2)  { flex: 0 1 calc(100% - 1.5vw); height: 30vh; }
  .grid .item:nth-child(3)  { flex: 0 1 calc(100% - 1.5vw); }
  .grid .item:nth-child(4)  { flex: 0 1 calc(100% - 1.5vw); }
  .grid .item:nth-child(5)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(6)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(7)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(8)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(9)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(10) { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(11) { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(12) { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(13) { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(14) { flex: 0 1 calc(50% - 1.5vw); }
  
  
  
  
  .grid .item:nth-child(15)  { flex: 0 1 calc(100% - 1.5vw); height: 50vh; }
  .grid .item:nth-child(16)  { flex: 0 1 calc(100% - 1.5vw); height: 30vh; }
  .grid .item:nth-child(17)  { flex: 0 1 calc(100% - 1.5vw); }
  .grid .item:nth-child(18)  { flex: 0 1 calc(100% - 1.5vw); }
  .grid .item:nth-child(19)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(20)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(21)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(22)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(23)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(24)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(25)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(26)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(27)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(28)  { flex: 0 1 calc(50% - 1.5vw); }
  
  
  
  .grid .item:nth-child(29)  { flex: 0 1 calc(100% - 1.5vw); height: 50vh; }
  .grid .item:nth-child(30)  { flex: 0 1 calc(100% - 1.5vw); height: 30vh; }
  .grid .item:nth-child(31)  { flex: 0 1 calc(100% - 1.5vw); }
  .grid .item:nth-child(32)  { flex: 0 1 calc(100% - 1.5vw); }
  .grid .item:nth-child(33)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(34)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(35)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(36)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(37)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(38)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(39)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(40)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(41)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(42)  { flex: 0 1 calc(50% - 1.5vw); } */
  
 }
 

 
  @media screen and (max-width: 749px) {
    .grid .item:nth-child(1)  { flex: 0 1 calc(60% - 1.5vw); height: 50vh;}
    .grid .item:nth-child(2)  { flex: 0 1 calc(40% - 1.5vw); height: 30vh;}
    .grid .item:nth-child(15)  { flex: 0 1 calc(60% - 1.5vw); height: 30vh;}
    .grid .item:nth-child(16)  { flex: 0 1 calc(40% - 1.5vw); height: 40vh;}
    .grid .item:nth-child(29)  { flex: 0 1 calc(60% - 1.5vw); height: 30vh;}
    .grid .item:nth-child(30)  { flex: 0 1 calc(40% - 1.5vw); height: 40vh;}
    .grid .item:nth-child(43)  { flex: 0 1 calc(60% - 1.5vw); height: 30vh;}
    .grid .item:nth-child(44)  { flex: 0 1 calc(40% - 1.5vw); height: 40vh;}

  
    .grid .item:nth-child(3)  { flex: 0 1 calc(50% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(4)  { flex: 0 1 calc(50% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(5)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(6)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(7)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(8)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(9)  { flex: 0 1 calc(25% - 1.5vw);height: 20vh; }
    .grid .item:nth-child(10) { flex: 0 1 calc(25% - 1.5vw);height: 20vh; }
    .grid .item:nth-child(11) { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(12) { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(13) { flex: 0 1 calc(25% - 1.5vw);height: 20vh; }
    .grid .item:nth-child(14) { flex: 0 1 calc(25% - 1.5vw);height: 20vh; }
    
 
 
    .grid .item:nth-child(17)  { flex: 0 1 calc(50% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(18)  { flex: 0 1 calc(50% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(19)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(20)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(21)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(22)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(23)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(24)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(25)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(26)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(27)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(28)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
 
 
 
    .grid .item:nth-child(31)  { flex: 0 1 calc(50% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(32)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(33)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(34)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(35)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(36)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(37)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(38)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(39)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(40)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(41)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(42)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}

 

    .grid .item:nth-child(45)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(46)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(47)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(48)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(49)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(50)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(51)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(52)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(53)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(54)  { flex: 0 1 calc(25% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(55)  { flex: 0 1 calc(50% - 1.5vw); height: 20vh;}
    .grid .item:nth-child(56)  { flex: 0 1 calc(50% - 1.5vw); height: 20vh;}
 
  }
 
 
  

  @media screen and (min-width: 750px) {
    .grid .item:nth-child(1)  { flex: 0 1 calc(60% - 1.5vw); }
    .grid .item:nth-child(2)  { flex: 0 1 calc(40% - 1.5vw); height: 50vh; }
    .grid .item:nth-child(15)  { flex: 0 1 calc(60% - 1.5vw); }
    .grid .item:nth-child(16)  { flex: 0 1 calc(40% - 1.5vw); height: 50vh; }
    .grid .item:nth-child(29)  { flex: 0 1 calc(60% - 1.5vw); }
    .grid .item:nth-child(30)  { flex: 0 1 calc(40% - 1.5vw); height: 50vh; }
    .grid .item:nth-child(43)  { flex: 0 1 calc(60% - 1.5vw); }
    .grid .item:nth-child(44)  { flex: 0 1 calc(40% - 1.5vw); height: 50vh; }
    
  }

  @media screen and (min-width: 1400px) {
    .grid .item:nth-child(1)  { flex: 0 1 calc(60% - 1.5vw); }
    .grid .item:nth-child(2)  { flex: 0 1 calc(40% - 1.5vw); }
    .grid .item:nth-child(3)  { flex: 0 1 calc(50% - 1.5vw); }
    .grid .item:nth-child(4)  { flex: 0 1 calc(50% - 1.5vw); }
    .grid .item:nth-child(5)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(6)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(7)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(8)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(9)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(10) { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(11) { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(12) { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(13) { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(14) { flex: 0 1 calc(25% - 1.5vw); }
    
    
    
    .grid .item:nth-child(15)  { flex: 0 1 calc(60% - 1.5vw); }
    .grid .item:nth-child(16)  { flex: 0 1 calc(40% - 1.5vw); }
    .grid .item:nth-child(17)  { flex: 0 1 calc(50% - 1.5vw); }
    .grid .item:nth-child(18)  { flex: 0 1 calc(50% - 1.5vw); }
    .grid .item:nth-child(19)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(20)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(21)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(22)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(23)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(24)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(25)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(26)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(27)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(28)  { flex: 0 1 calc(25% - 1.5vw); }
    
      
    .grid .item:nth-child(29)  { flex: 0 1 calc(60% - 1.5vw); }
    .grid .item:nth-child(30)  { flex: 0 1 calc(40% - 1.5vw); }
    .grid .item:nth-child(31)  { flex: 0 1 calc(50% - 1.5vw); }
    .grid .item:nth-child(32)  { flex: 0 1 calc(50% - 1.5vw); }
    .grid .item:nth-child(33)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(34)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(35)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(36)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(37)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(38)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(39)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(40)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(41)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(42)  { flex: 0 1 calc(25% - 1.5vw); }


    .grid .item:nth-child(43)  { flex: 0 1 calc(60% - 1.5vw); }
    .grid .item:nth-child(44)  { flex: 0 1 calc(40% - 1.5vw); }
    .grid .item:nth-child(45)  { flex: 0 1 calc(50% - 1.5vw); }
    .grid .item:nth-child(46)  { flex: 0 1 calc(50% - 1.5vw); }
    .grid .item:nth-child(47)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(48)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(49)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(50)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(51)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(52)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(53)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(54)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(55)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(56)  { flex: 0 1 calc(25% - 1.5vw); }


    
  }



/* Styles, just for fun */

*,*:before,*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #29343d;
}



.h1 {
    text-align:center;
    color: #000000;
}



@supports not (display: grid) {
  body:before {
    content: 'Sorry, seems like your browser doesn\'t support display: grid. Below is the flexbox fallback.';
    display: block;
    padding: 2rem 2rem 0;
    color: #ffffff;
    text-align: center;
  }
}

.header {
  margin: 10vh 1.5vw;
  text-align: center;
  color: #cedfe9;
}

.header h1,
.header h2 {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 1;
}

.header h1 {
  position: relative;
  padding-bottom: 0.5em;
  color: #ffffff;
  font-size: 2rem;
}

.header h2 {
  font-weight: normal;
  font-size: 0.875rem;
}

@media screen and (min-width: 750px) {

  .header h1 {
    font-size: 3.75rem;
  }

  .header h2 {
    font-weight: normal;
    font-size: 1.125rem;
    letter-spacing: 0.5em;
  }
}

@media screen and (min-width: 1400px) {

  .header h1 {
    font-size: 6rem;
  }

  .header h2 {
    font-weight: normal;
    font-size: 1.5rem;
  }
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.diamond {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  border: 1px solid #ffffff;
  box-shadow: 1px 1px 0px rgba(0,0,0,0.2);
  background-image: linear-gradient(to top left, #ddd 0%, #fff 100%);
  text-align: center;
  transform-origin: center;
  transform: rotateZ(45deg);
  transition: box-shadow 250ms, transform 250ms;
}

.diamond span {
  font-weight: bold;
  transform: rotateZ(-45deg)
}

.grid .item:hover .diamond,
.grid .item:focus .diamond {
  box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
  transform:  rotateZ(45deg) scale(1.2);
}

.tooltip {
  position: absolute;
  z-index: 1;
  padding: 0.25rem 1rem;
  border-radius: 5px;
  background: #29343d;
  opacity: 0;
  color: #cedfe9;
  font-size: 0.875rem;
  transition: opacity 500ms, transform 500ms;
}

.tooltip:before {
  content: '';
  position: absolute;
  top: -9px;
  left: calc(50% - 10px);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #29343d;
}

.grid .item:hover .tooltip,
.grid .item:focus .tooltip {
  opacity: 1;
  transform: translateY(70px);
}

.grid .item {
  position: relative;
  padding: 1vw;
  background-position:  left bottom;
  background-size: 150% 100%;
  transition: background 500ms, outline 500ms;
  background-position: top left;
  outline: transparent;
}

.grid .item:hover,
.grid .item:focus {
  background-position: top right;
}

.grid .item:focus {
  outline: 2px solid #3eabfa;
}

.grid .item:nth-child(1)  { background-image: linear-gradient(45deg, #cbabfb 0%, #fb7ef6 60%); }
.grid .item:nth-child(2)  { background-image: linear-gradient(45deg, #fb7ef6 0%, #cbabfb 60%); }
.grid .item:nth-child(3)  { background-image: linear-gradient(45deg, #70c1fb 0%, #79ebe0 60%); }
.grid .item:nth-child(4)  { background-image: linear-gradient(45deg, #79ebe0 0%, #70c1fb 60%); }
.grid .item:nth-child(5),
.grid .item:nth-child(6),
.grid .item:nth-child(7),
.grid .item:nth-child(8),
.grid .item:nth-child(9),
.grid .item:nth-child(10),
.grid .item:nth-child(11),
.grid .item:nth-child(12),
.grid .item:nth-child(13),
.grid .item:nth-child(14) { background-image: linear-gradient(45deg, #feeeab 0%, #fb7eb3 60%); }



.grid .item:nth-child(15)  { background-image: linear-gradient(45deg, #f53844 0%, #42378f 60%); }
.grid .item:nth-child(16)  { background-image: linear-gradient(45deg, #42378f 0%, #f53844 60%); }
.grid .item:nth-child(17)  { background-image: linear-gradient(45deg, #009ffd 0%, #2a2a72 60%); }
.grid .item:nth-child(18)  { background-image: linear-gradient(45deg, #2a2a72 0%, #009ffd 60%); }
.grid .item:nth-child(19),
.grid .item:nth-child(20),
.grid .item:nth-child(21),
.grid .item:nth-child(22),
.grid .item:nth-child(23),
.grid .item:nth-child(24),
.grid .item:nth-child(25),
.grid .item:nth-child(26),
.grid .item:nth-child(27),
.grid .item:nth-child(28) { background-image: linear-gradient(45deg, #ffa6b7 0%, #1e2ad2 60%); }



.grid .item:nth-child(29)  { background-image: linear-gradient(45deg, #92ffc0 0%, #002661 60%); }
.grid .item:nth-child(30)  { background-image: linear-gradient(45deg, #002661 0%, #92ffc0 60%); }
.grid .item:nth-child(31)  { background-image: linear-gradient(45deg, #ffcf71 0%, #2376dd 60%); }
.grid .item:nth-child(32)  { background-image: linear-gradient(45deg, #2376dd 0%, #ffcf71 60%); }
.grid .item:nth-child(33),
.grid .item:nth-child(34),
.grid .item:nth-child(35),
.grid .item:nth-child(36),
.grid .item:nth-child(37),
.grid .item:nth-child(38),
.grid .item:nth-child(39),
.grid .item:nth-child(40),
.grid .item:nth-child(41),
.grid .item:nth-child(42) { background-image: linear-gradient(45deg, #cbbacc 0%, #2580b3 60%); }


.grid .item:nth-child(43)  { background-image: linear-gradient(45deg, #cbabfb 0%, #fb7ef6 60%); }
.grid .item:nth-child(44)  { background-image: linear-gradient(45deg, #fb7ef6 0%, #cbabfb 60%); }
.grid .item:nth-child(45)  { background-image: linear-gradient(45deg, #70c1fb 0%, #79ebe0 60%); }
.grid .item:nth-child(46)  { background-image: linear-gradient(45deg, #79ebe0 0%, #70c1fb 60%); }
.grid .item:nth-child(47),
.grid .item:nth-child(48),
.grid .item:nth-child(49),
.grid .item:nth-child(50),
.grid .item:nth-child(51),
.grid .item:nth-child(52),
.grid .item:nth-child(53),
.grid .item:nth-child(54),
.grid .item:nth-child(55),
.grid .item:nth-child(56) { background-image: linear-gradient(45deg, #feeeab 0%, #fb7eb3 60%); }