﻿/** SOUNDWAVE **/

.soundwave              {width: 1634px}
.soundwave-top          {width: 100%; position: relative; height: 223px; display: flex;}
.soundwave-cell         {width: 86px; position: relative; bottom: 0; height: 223px; flex-shrink: 0;}
.soundwave-cell-inner   {position: absolute; width: 100%; height: 100%; left: 0; bottom: 0; overflow: hidden;}
.soundwave-cell img     {position: absolute; bottom: -224px; width: 1634px; height: 447px; max-width: unset; z-index: 4}

.soundwave-cell:nth-child(1) .soundwave-cell-inner   {animation: 2s soundy3 linear infinite forwards;}
.soundwave-cell:nth-child(2) .soundwave-cell-inner   {animation: 1.9s soundy linear infinite forwards;}
.soundwave-cell:nth-child(3)  .soundwave-cell-inner  {animation: 1.85s soundy linear infinite forwards;}
.soundwave-cell:nth-child(4)  .soundwave-cell-inner  {animation: 1.8s soundy linear infinite forwards;}
.soundwave-cell:nth-child(5)  .soundwave-cell-inner  {animation: 1.75s soundy2 linear infinite forwards;}
.soundwave-cell:nth-child(6)  .soundwave-cell-inner  {animation: 1.7s soundy linear infinite forwards;}
.soundwave-cell:nth-child(7)  .soundwave-cell-inner  {animation: 1.65s soundy linear infinite forwards;}
.soundwave-cell:nth-child(8)  .soundwave-cell-inner  {animation: 1.6s soundy linear infinite forwards;}
.soundwave-cell:nth-child(9)  .soundwave-cell-inner  {animation: 1.55s soundy2 linear infinite forwards;}
.soundwave-cell:nth-child(10) .soundwave-cell-inner  {animation: 1.5s soundy linear infinite forwards;}
.soundwave-cell:nth-child(11) .soundwave-cell-inner  {animation: 1.55s soundy2 linear infinite forwards;}
.soundwave-cell:nth-child(12) .soundwave-cell-inner  {animation: 1.6s soundy linear infinite forwards;}
.soundwave-cell:nth-child(13) .soundwave-cell-inner  {animation: 1.65s soundy2 linear infinite forwards;}
.soundwave-cell:nth-child(14) .soundwave-cell-inner  {animation: 1.7s soundy linear infinite forwards;}
.soundwave-cell:nth-child(15) .soundwave-cell-inner  {animation: 1.75s soundy linear infinite forwards;}
.soundwave-cell:nth-child(16) .soundwave-cell-inner  {animation: 1.8s soundy2 linear infinite forwards;}
.soundwave-cell:nth-child(17)  .soundwave-cell-inner {animation: 1.85s soundy linear infinite forwards;}
.soundwave-cell:nth-child(18)  .soundwave-cell-inner {animation: 1.9s soundy2 linear infinite forwards;}
.soundwave-cell:nth-child(19)  .soundwave-cell-inner {animation: 2s soundy3 linear infinite forwards;}

.soundwave-cell:nth-child(2) img    {left: -86px;}
.soundwave-cell:nth-child(3) img    {left: -172px;}
.soundwave-cell:nth-child(4) img    {left: -258px;}
.soundwave-cell:nth-child(5) img    {left: -344px;}
.soundwave-cell:nth-child(6) img    {left: -430px;}
.soundwave-cell:nth-child(7) img    {left: -516px;}
.soundwave-cell:nth-child(8) img    {left: -602px;}
.soundwave-cell:nth-child(9) img    {left: -688px;}
.soundwave-cell:nth-child(10) img   {left: -774px;}
.soundwave-cell:nth-child(11) img   {left: -860px;}
.soundwave-cell:nth-child(12) img   {left: -946px;}
.soundwave-cell:nth-child(13) img   {left: -1032px;}
.soundwave-cell:nth-child(14) img   {left: -1118px;}
.soundwave-cell:nth-child(15) img   {left: -1204px;}
.soundwave-cell:nth-child(16) img   {left: -1290px;}
.soundwave-cell:nth-child(17) img   {left: -1376px;}
.soundwave-cell:nth-child(18) img   {left: -1462px;}
.soundwave-cell:nth-child(19) img   {left: -1548px;}

.soundwave-bottom                         {width: 100%; position: relative; height: 223px; display: flex;}
.soundwave-bottom .soundwave-cell         {width: 86px; position: relative; top: 0; height: 223px; flex-shrink: 0}
.soundwave-bottom .soundwave-cell-inner   {position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden;}
.soundwave-bottom .soundwave-cell img     {position: absolute; top: -224px; width: 1634px; height: 447px;}

@keyframes soundy {

    0%    {height: 223px}
    25%   {height: 0px}
    50%   {height: 223px}
    75%   {height: 10px}
    100%  {height: 223px}

}
@keyframes soundy2 {

    0%    {height: 223px}
    25%   {height: 0px}
    50%   {height: 223px}
    75%   {height: 100px}
    100%  {height: 223px}

}
@keyframes soundy3 {

    0%    {height: 80px}
    25%   {height: 10px}
    50%   {height: 80px}
    75%   {height: 50px}
    100%  {height: 80px}

}