@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');

.panels {
  display: flex;
  font-family: "IBM Plex Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  flex-direction: column;
}
.panel {
  width: 100%;
  height: 30vh;
  display: flex;
  justify-content: center;
  transition: width ease-in-out 1s;
  -moz-transition: 1s; /* Firefox 4 */
  -webkit-transition: 1s; /* Safari and Chrome */
  -o-transition: 1s; /* Opera */
  position: relative;
  .default-txt {
    position: absolute;
    transform: translateY(50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9;
    transition: all ease-in-out .5s;
    scale: calc(.7);
    .lrg-lttr {
      box-shadow: 1px 1px 10px 0px rgba(51,51,51,.4);
      font-size: 4rem;
      font-weight: 800;
      color: #fff;
      border-radius: 50%;
      width: 120px;
      height: 120px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: solid 2px #fff;
      -webkit-box-shadow: 3px 3px 10px 3px rgba(0,0,0,.6);
      box-shadow: 3px 3px 10px 3px rgba(0,0,0,.6);
    }
    b {
      font-size: 1.25rem;
      text-align: center;
      line-height: 1.25;
      a {
        text-decoration: none;
        color: #fff;
        padding: 5px 10px;
        border-radius: 20px;
        margin-top: 1rem;
        display: block;
        transition: background-position .3s cubic-bezier(.47, .1, 1, .63), color .2s linear;
        transition-delay: 0.0s, 0.15s;
        
        svg {
          display: none;
        }
      }
    }
  }
  i {
    font-size: 3rem;
    position: absolute;
    /* top: 47%;
    transform: translateY(-50%);
    right: -30px; */
    bottom: -53px;
    transform: translateY(-50%) rotate(90deg);
    z-index: 10;
  }
  i::after {
    color: #fff;
  }
  .sml-txt {
    display: none;
    width: 0;
    background-color: rgba(255,255,255,.75);
    color: #000;
    position: absolute;
    padding: 1rem;
    font-size: 1rem;
    line-height: 1.5;
    transition: width 0.3s ease-in-out;
    z-index: 8;
  }
  .bg-img {
    cursor: pointer;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: luminosity;
    width: 100%;
    height: 100%;
  }
}
.panel .default-txt b a:hover {
  border-bottom: none;
}
.panel img {
  height: 100vh;
}
.panel.active {
  height: 65vh;
  .default-txt {
    transform: translateY(50%);
  }
  .bg-img {
    background-blend-mode: inherit;
  }
  .sml-txt {
    display: block;
    bottom: 7%;
    width: 90%;
  }
}

.panel.sml {
  height: 22vh;
  .default-txt {
    scale: calc(.6);
    transform:translateY(10%);
  }
}

.panel.first {
  .bg-img {
    background-image: url('./imgs/L.JPG');
    background-color: rgba(0, 39, 76, .75);
  }
  .lrg-lttr,
  b a {
    background-color: #00274c;
  }
  i::before {
    color: #00274c;
  }
  b a {
    background-image: linear-gradient(90deg, #00274c 0%, #00274c 50%, #fff 50%, #fff 100%);
    background-size: 200%;
  }
  b a:hover {
    color: #00274c;
    background-position: -100% 100%;
  }
}
.panel.first::after { color: #00274c; }
.panel.second {
  .bg-img {
    background-image: url('./imgs/E.jpg');
    background-color: rgba(255, 203, 5, .75);
  }
  .lrg-lttr,
  b a {
    background-color: #ffcb05;
  }
  i::before {
    color: #ffcb05;
  }
  b a {
    background-image: linear-gradient(90deg, #ffcb05 0%, #ffcb05 50%, #fff 50%, #fff 100%);
    background-size: 200%;
  }
  b a:hover {
    color: #ffcb05;
    background-position: -100% 100%;
  }
}
.panel.second::after { color: #FFCB05; }
.panel.third {
  .bg-img {
    background-image: url('./imgs/A.jpg');
    background-color: rgba(47, 101, 167, .75);
  }
  .lrg-lttr,
  b a {
    background-color: #2F65A7;
  }
  i::before {
    color: #2F65A7;
  }
  b a {
    background-image: linear-gradient(90deg, #2F65A7 0%, #2F65A7 50%, #fff 50%, #fff 100%);
    background-size: 200%;
  }
  b a:hover {
    color: #2F65A7;
    background-position: -100% 100%;
  }
}
.panel.third::after { color: #2F65A7; }
.panel.fourth {
  .bg-img {
    background-image: url('./imgs/P.jpg');
    background-color: rgba(0, 178, 169, .75);
  }
  .lrg-lttr,
  b a {
    background-color: #00B2A9;
  }
  i::before {
    color: #00B2A9;
  }
  b a {
    background-image: linear-gradient(90deg, #00B2A9 0%, #00B2A9 50%, #fff 50%, #fff 100%);
    background-size: 200%;
  }
  b a:hover {
    color: #00B2A9;
    background-position: -100% 100%;
  }
}
.panel.fourth::after { color: #00B2A9; }
.panel.fifth {
  .bg-img {
    background-image: url('./imgs/S.jpg');  
    background-color: rgb(0, 129, 170, .75);
  }
  .lrg-lttr,
  b a {
    background-color: #0081AA;
  }
  i::before {
    color: #0081AA;
  }
  b a {
    background-image: linear-gradient(90deg, #0081AA 0%, #0081AA 50%, #fff 50%, #fff 100%);
    background-size: 200%;
  }
  b a:hover {
    color: #0081AA;
    background-position: -100% 100%;
  }
}
.panel.fifth::after { color: #0081AA; }

/* 1100px... for now */
/* @media screen and (min-width: 68.75rem) {
  .panels {
    flex-direction: row;
    overflow: hidden;
    margin-bottom: 0;
  }
  .panel {
    width: 20%;
    height: 100vh;
    .default-txt {
      top: 50%;
      left: inherit;
      transform: translateY(-50%);
      scale: calc(1);
    }
    i {
      font-size: 4rem;
      top: 47%;
      bottom: inherit;
      transform: translateY(-50%);
      right: -30px;
      transition: all ease-in-out .3s;
    }
  }
  .panel.active {
    height: 100vh;
    width: 100%;
    .default-txt {
      transform: translateY(-50%);
    }
    .sml-txt {
      top: 65%;
      font-size: 1.25rem;
      bottom: inherit;
    }
  }
  .panel.sml {
    height: 100vh;
    .default-txt {
      top: 45%;
      left: inherit;
      transform: translateY(-46%);
    }
    i {
      top:46%;
      scale: calc(.7);
    }
  }
} */