/* Setting fade transition and default settings */
body{
    background-color: rgb(0, 0, 0);
    scroll-behavior: smooth;
}

.wrapper
{
    position: fixed;
    height: 100vh;
    width: 100%;
    background-color: #000;
    -webkit-mask-image: linear-gradient(to bottom, black 71px, transparent 40%, transparent 60%, black 100%);
  mask-image: linear-gradient(to bottom, black 71px, transparent 50%, black 100%);
}

.bg {
    width: 100%;
    height: 100vh;
    color: #000;
    background-color: #fff;
    background-image: url(/./dev/tbx/assets/images/bg-top.jpg);
    -webkit-transition: background-image 2s ease;
    -o-transition: background-image 2s ease;
    transition: background-image 2s ease;
    transition: filter 2s ease;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: fixed;
    z-index: -1;
  }
  
  /* panel styles */
  .panel {
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-family: sans-serif;
  }
  
  /* colours */
  .bg.color-l1 {
    -webkit-filter: blur(13px) hue-rotate(80deg);
            filter: blur(13px) hue-rotate(80deg);
  }
  .bg.color-l2 {
    -webkit-filter: blur(13px) hue-rotate(40deg);
            filter: blur(13px) hue-rotate(40deg);
  }
  .bg.color-l3 {
    -webkit-filter: blur(13px) hue-rotate(320deg);
            filter: blur(13px) hue-rotate(320deg);
  }
  .bg.color-l4 {
    -webkit-filter: blur(13px) hue-rotate(120deg);
            filter: blur(13px) hue-rotate(120deg);
  }
  .bg.color-l5 {
    -webkit-filter: blur(13px) hue-rotate(90deg);
            filter: blur(13px) hue-rotate(90deg);
  }
  .bg.color-l6 {
    -webkit-filter: blur(13px) hue-rotate(40deg);
            filter: blur(13px) hue-rotate(40deg);
  }
  .bg.color-l7 {
    -webkit-filter: blur(13px) hue-rotate(320deg);
            filter: blur(13px) hue-rotate(320deg);
  }
  .bg.color-l8 {
    -webkit-filter: blur(13px) hue-rotate(120deg);
            filter: blur(13px) hue-rotate(120deg);
  }
  .bg.color-l9 {
    -webkit-filter: blur(13px) hue-rotate(80deg);
            filter: blur(13px) hue-rotate(80deg);
  }
  .bg.color-l10 {
    -webkit-filter: blur(13px) hue-rotate(40deg);
            filter: blur(13px) hue-rotate(40deg);
  }
  .bg.color-l11 {
    -webkit-filter: blur(13px) hue-rotate(320deg);
            filter: blur(13px) hue-rotate(320deg);
  }
  .bg.color-l12 {
    -webkit-filter: blur(13px) hue-rotate(120deg);
            filter: blur(13px) hue-rotate(120deg);
  }
  .bg.color-l13 {
    -webkit-filter: blur(13px) hue-rotate(90deg);
            filter: blur(13px) hue-rotate(90deg);
  }
  .bg.color-l14 {
    -webkit-filter: blur(13px) hue-rotate(40deg);
            filter: blur(13px) hue-rotate(40deg);
  }
  .bg.color-l14 {
    -webkit-filter: blur(13px) hue-rotate(320deg);
            filter: blur(13px) hue-rotate(320deg);
  }
  .bg.color-l15 {
    -webkit-filter: blur(13px) hue-rotate(120deg);
            filter: blur(13px) hue-rotate(120deg);
  }

  /* songs */
  .song p {
    display: none;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #d3e1de;
    text-align: center;
    margin: 0;
    font-size: 8pt;
    font-style: italic;
    margin-top: -14px;
  }
  .header--sticky .song.color-l1 .l1 {
    display: block;
  }
  .header--sticky .song.color-l2 .l2 {
    display: block;
  }
  .header--sticky .song.color-l3 .l3 {
    display: block;
  }
  .header--sticky .song.color-l4 .l4 {
    display: block;
  }
  .header--sticky .song.color-l5 .l5 {
    display: block;
  }
  .header--sticky .song.color-l6 .l6 {
    display: block;
  }
  .header--sticky .song.color-l7 .l7 {
    display: block;
  }
  .header--sticky .song.color-l8 .l8 {
    display: block;
  }
  .header--sticky .song.color-l9 .l9 {
    display: block;
  }
  .header--sticky .song.color-l10 .l10 {
    display: block;
  }
  .header--sticky .song.color-l11 .l11 {
    display: block;
  }
  .header--sticky .song.color-l12 .l12 {
    display: block;
  }
  .header--sticky .song.color-l13 .l13 {
    display: block;
  }
  .header--sticky .song.color-l14 .l14 {
    display: block;
  }
  .header--sticky .song.color-l15 .l15 {
    display: block;
  }