/**/

@keyframes animate_awave {
  0% { width: 105%; margin-left: -2%; }
  10% { width: 140%; margin-left: -20%; }
  20% { width: 160%; margin-left: -10%; }
  30% { width: 100%; margin-left: 0%; }
  40% { width: 140%; margin-left: -20%; }
  50% { width: 150%; margin-left: 0%; }
  60% { width: 110%; margin-left: -10%; }
  70% { width: 130%; margin-left: -5%; }
  80% { width: 120%; margin-left: -10%; }
  90% { width: 140%; margin-left: -20%; }
  100% { width: 105%; margin-left: -2%; }
}

@keyframes animate_bwave {
  0% { width: 120%; margin-left: -10%; }
  10% { width: 100%; margin-left: 0%; }
  20% { width: 160%; margin-left: 0%; }
  30% { width: 120%; margin-left: -10%; }
  40% { width: 140%; margin-left: -20%;  }
  50% { width: 100%; margin-left: 0%; }
  60% { width: 140%; margin-left: -20%; }
  70% { width: 130%; margin-left: -5%; }
  80% { width: 120%; margin-left: -10%; }
  90% { width: 160%; margin-left: -20%; }
  100% { width: 120%; margin-left: 0; }
}

@keyframes animate_cwave {
  0% { width: 105%; margin-left: -2%; }
  10% { width: 110%; margin-left: -5%; }
  20% { width: 130%; margin-left: 0%; }
  30% { width: 120%; margin-left: -10%; }
  40% { width: 100%; margin-left: 0%;  }
  50% { width: 120%; margin-left: 0%; }
  60% { width: 100%; margin-left: 0%; }
  70% { width: 130%; margin-left: -5%; }
  80% { width: 165%; margin-left: -20%; }
  90% { width: 110%; margin-left: -5%; }
  100% { width: 105%; margin-left: -2%; }
}

.atom-waves { background: transparent; padding: 0; position: relative; z-index: 9999; }
.atom-waves .single-wave { display: block; margin: 0; width: 100%; position: absolute; left: 0; min-width: 700px; }
.atom-waves .single-wave svg { display: block; margin: 0; width: 110%; min-width: 110vw; }
.atom-waves .single-wave svg path { opacity: .75; fill: var( --color-pure-white ); }


.atom-waves .single-wave.wave-a { z-index: 30; }
.atom-waves .single-wave.wave-b { z-index: 20; }
.atom-waves .single-wave.wave-c { z-index: 10; }

/* WAVES MODE VARIATION */
.atom-waves.top-waves .single-wave { bottom: -2px; }
.atom-waves.top-waves .single-wave { left: 0; right: initial; }

.atom-waves.bottom-waves .single-wave { top: -2px; }
.atom-waves.bottom-waves .single-wave { left: initial; right: 0; }

.atom-waves.top-single-wave .single-wave { bottom: -2px; }
.atom-waves.top-single-wave .single-wave svg { transform: rotate(180deg); }
.atom-waves.bottom-single-wave .single-wave { top: -2px; }
.atom-waves.top-single-wave .single-wave.wave-single svg path { opacity: 1; }


/* WAVES ANIMATED VARIATION */
.atom-waves.animated .single-wave.wave-a svg { animation-duration: 30s; animation-name: animate_awave; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.atom-waves.animated .single-wave.wave-b svg { animation-duration: 26s; animation-name: animate_bwave; animation-iteration-count: infinite; animation-timing-function: ease-in; }
.atom-waves.animated .single-wave.wave-c svg { animation-duration: 33s; animation-name: animate_cwave; animation-iteration-count: infinite; animation-timing-function: ease-out; }
.atom-waves.animated.bottom-waves .single-wave.wave-a svg { animation-duration: 26s; animation-name: animate_awave; animation-iteration-count: infinite; }
.atom-waves.animated.bottom-waves .single-wave.wave-b svg { animation-duration: 33s; animation-name: animate_bwave; animation-iteration-count: infinite; }
.atom-waves.animated.bottom-waves .single-wave.wave-c svg { animation-duration: 30s; animation-name: animate_cwave; animation-iteration-count: infinite; }

.atom-waves.top-single-wave.animated .single-wave.wave-single svg { animation-duration: 33s; animation-name: animate_cwave; animation-iteration-count: infinite; animation-timing-function: ease-out; }

/* COLOR SCHEMES VARIATION */
.atom-waves.scheme-laurel-green .single-wave svg path { }
.atom-waves.scheme-laurel-green .single-wave.wave-a svg path { fill: var( --color-laurel-green-var-a ); }
.atom-waves.scheme-laurel-green .single-wave.wave-b svg path { fill: var( --color-laurel-green-var-b ); }
.atom-waves.scheme-laurel-green .single-wave.wave-c svg path { fill: var( --color-laurel-green-var-a ); }
.atom-waves.scheme-laurel-green .single-wave.wave-single svg path { fill: var( --color-laurel-green ); }

.atom-waves.scheme-fountain-blue .single-wave svg path { }
.atom-waves.scheme-fountain-blue .single-wave.wave-a svg path { fill: var( --color-fountain-blue-var-a ); }
.atom-waves.scheme-fountain-blue .single-wave.wave-b svg path { fill: var( --color-fountain-blue-var-b ); }
.atom-waves.scheme-fountain-blue .single-wave.wave-c svg path { fill: var( --color-fountain-blue-var-c ); }
.atom-waves.scheme-fountain-blue .single-wave.wave-single svg path { fill: var( --color-fountain-blue ); }

.atom-waves.scheme-hibiscus-violet .single-wave svg path { }
.atom-waves.scheme-hibiscus-violet .single-wave.wave-a svg path { fill: var( --color-hibiscus-violet-var-a ); }
.atom-waves.scheme-hibiscus-violet .single-wave.wave-b svg path { fill: var( --color-hibiscus-violet-var-b ); }
.atom-waves.scheme-hibiscus-violet .single-wave.wave-c svg path { fill: var( --color-hibiscus-violet-var-c ); }
.atom-waves.scheme-hibiscus-violet .single-wave.wave-single svg path { fill: var( --color-hibiscus-violet ); }

.atom-waves.scheme-meteorite-purple .single-wave svg path { }
.atom-waves.scheme-meteorite-purple .single-wave.wave-a svg path { fill: var( --color-meteorite-purple-var-a ); }
.atom-waves.scheme-meteorite-purple .single-wave.wave-b svg path { fill: var( --color-meteorite-purple-var-b ); }
.atom-waves.scheme-meteorite-purple .single-wave.wave-c svg path { fill: var( --color-meteorite-purple-var-c ); }
.atom-waves.scheme-meteorite-purple .single-wave.wave-single svg path { fill: var( --color-meteorite-purple ); }


/* NON OVERLAPING VARIATION */
.atom-waves.non-overlap .single-wave.wave-overlap { position: static; pointer-events: none; opacity: 0; }
.atom-waves.non-overlap .single-wave.wave-single { position: static; }


/* WAVES MODE VARIATION */
.atom-waves.top-waves .single-wave { bottom: -2px; }
.atom-waves.bottom-waves .single-wave { top: -2px; }

/* FIX WEIRD PIXEL */
.atom-waves .fix-pixel { background: var( --color-pure-white ); width: 100%; height: 5px; position: absolute; z-index: 999999; opacity: 1; left: 0;  }
.atom-waves.top-waves .fix-pixel { bottom: -3px; }
.atom-waves.bottom-waves .fix-pixel { top: -3px; }
.atom-waves.scheme-laurel-green .fix-pixel { background: var( --color-laurel-green ); }
.atom-waves.scheme-fountain-blue .fix-pixel { background: var( --color-fountain-blue ); }
.atom-waves.scheme-hibiscus-violet .fix-pixel { background: var( --color-hibiscus-violet ); }
.atom-waves.scheme-meteorite-purple .fix-pixel { background: var( --color-meteorite-purple ); }

@media only screen and ( min-width: 48em ) {

}

@media only screen and ( min-width: 62em ) { 

    .atom-waves .single-wave svg { display: block; margin: 0; width: 100%; min-width: 100vw; }
    .atom-waves .single-wave svg path { opacity: .75; fill: var( --color-pure-white ); }


}

@media only screen and ( min-width: 75em ) { 


}