/**
 * Variables
 */
:root {
	--width-s: 50px;
	--width-m: 75px;
	--width-l: 100px;
	--color: #eee;
	--leftright: 6em;
}

/**
 * Key frames
 */
/* Keyframes - UpDown */
@keyframes updownzero {
  0%, 100% {
    transform: translate(0,0);
    -webkit-transform: translate(0,0); /** Chrome & Safari **/
    -o-transform: translate(0,0); /** Opera **/
    -moz-transform: translate(0,0); /** Firefox **/
  }
  50%{
    transform: translate(0,10px);
    -webkit-transform: translate(0,10px); /** Chrome & Safari **/
    -o-transform: translate(0,10px); /** Opera **/
    -moz-transform: translate(0,10px); /** Firefox **/
  }
}
@keyframes updownone {
  0%, 100% {
    transform: translate(0,-20px);
    -webkit-transform: translate(0,-20px); /** Chrome & Safari **/
    -o-transform: translate(0,-20px); /** Opera **/
    -moz-transform: translate(0,-20px); /** Firefox **/
  }
  50%{
    transform: translate(0,20px);
    -webkit-transform: translate(0,20px); /** Chrome & Safari **/
    -o-transform: translate(0,20px); /** Opera **/
    -moz-transform: translate(0,20px); /** Firefox **/
  }
}
@keyframes updowntwo {
  0%, 100% {
    transform: translate(0,-15px);
    -webkit-transform: translate(0,-15px); /** Chrome & Safari **/
    -o-transform: translate(0,-15px); /** Opera **/
    -moz-transform: translate(0,-15px); /** Firefox **/

  }
  50%{
    transform: translate(0,15px);
    -webkit-transform: translate(0,15px); /** Chrome & Safari **/
    -o-transform: translate(0,15px); /** Opera **/
    -moz-transform: translate(0,15px); /** Firefox **/
  }
}
@keyframes updownthree {
  0%, 100% {
    transform: translate(0,0);
    -webkit-transform: translate(0,0); /** Chrome & Safari **/
    -o-transform: translate(0,0); /** Opera **/
    -moz-transform: translate(0,0); /** Firefox **/
  }
  50%{
    transform: translate(0,20px);
    -webkit-transform: translate(0,20px); /** Chrome & Safari **/
    -o-transform: translate(0,20px); /** Opera **/
    -moz-transform: translate(0,20px); /** Firefox **/
  }
}


/* Keyframes - LeftRight */
@keyframes leftrightzero {
  0%, 100% {
    transform: translate(0,0);
    -webkit-transform: translate(0,0); /** Chrome & Safari **/
    -o-transform: translate(0,0); /** Opera **/
    -moz-transform: translate(0,0); /** Firefox **/
  }
  50%{
    transform: translate(20px,0);
    -webkit-transform: translate(20px,0); /** Chrome & Safari **/
    -o-transform: translate(20px,0); /** Opera **/
    -moz-transform: translate(20px,0); /** Firefox **/
  }
}
@keyframes leftrightone {
  0%, 100% {
    transform: translate(0,0);
    -webkit-transform: translate(0,0); /** Chrome & Safari **/
    -o-transform: translate(0,0); /** Opera **/
    -moz-transform: translate(0,0); /** Firefox **/
  }
  50%{
    transform: translate(50px,0);
    -webkit-transform: translate(50px,0); /** Chrome & Safari **/
    -o-transform: translate(50px,0); /** Opera **/
    -moz-transform: translate(50px,0); /** Firefox **/
  }
}
@keyframes leftrighttwo {
  0%, 100% {
    transform: translate(0,0);
    -webkit-transform: translate(0,0); /** Chrome & Safari **/
    -o-transform: translate(0,0); /** Opera **/
    -moz-transform: translate(0,0); /** Firefox **/

  }
  50%{
    transform: translate(30px,0);
    -webkit-transform: translate(30px,0); /** Chrome & Safari **/
    -o-transform: translate(30px,0); /** Opera **/
    -moz-transform: translate(30px,0); /** Firefox **/
  }
}
@keyframes leftrightthree {
  0%, 100% {
    transform: translate(0,0);
    -webkit-transform: translate(0,0); /** Chrome & Safari **/
    -o-transform: translate(0,0); /** Opera **/
    -moz-transform: translate(0,0); /** Firefox **/
  }
  50%{
    transform: translate(20px,0);
    -webkit-transform: translate(20px,0); /** Chrome & Safari **/
    -o-transform: translate(20px,0); /** Opera **/
    -moz-transform: translate(20px,0); /** Firefox **/
  }
}

/* Keyframes - Grow */
@keyframes grow {
	to { -webkit-transform:scale(0.6); transform:scale(0.6); }
}


/* Keyframes - Glow */
@keyframes glow{
	to { opacity:0.6; }
}

/**
 * Animation classes
 */
/* Animation Class - Grow */
.animation-grow-0 {    
  -webkit-animation: grow 8s linear infinite alternate;
  animation: grow 8s linear infinite alternate;
}
.animation-grow-1 {    
  -webkit-animation: grow 5s linear infinite alternate;
  animation: grow 5s linear infinite alternate;
}
.animation-grow-2 {    
  -webkit-animation: grow 10s linear infinite alternate;
  animation: grow 10s linear infinite alternate;
}
.animation-grow-3 {    
  -webkit-animation: grow 12s linear infinite alternate;
  animation: grow 12s linear infinite alternate;
}

/* Animation Class - UpDown */
.animation-updown-0 {
  -webkit-animation: updownzero 12s linear infinite alternate;
  animation: updownzero 12s linear infinite alternate;
}
.animation-updown-1 {
  -webkit-animation: updownone 15s linear infinite alternate;
  animation: updownone 15s linear infinite alternate;
}
.animation-updown-2 {
  -webkit-animation: updowntwo 6s linear infinite alternate;
  animation: updowntwo 6s linear infinite alternate;
}
.animation-updown-3 {
  -webkit-animation: updownthree 10s linear infinite alternate;
  animation: updownthree 10s linear infinite alternate;
}

/* Animation Class - LeftRight */
.animation-leftright-0 {
  -webkit-animation: leftrightzero 12s linear infinite alternate;
  animation: leftrightzero 12s linear infinite alternate;
}
.animation-leftright-1 {
  -webkit-animation: leftrightone 15s linear infinite alternate;
  animation: leftrightone 15s linear infinite alternate;
}
.animation-leftright-2 {
  -webkit-animation: leftrighttwo 6s linear infinite alternate;
  animation: leftrighttwo 6s linear infinite alternate;
}
.animation-leftright-3 {
  -webkit-animation: leftrightthree 10s linear infinite alternate;
  animation: leftrightthree 10s linear infinite alternate;
}

/* Animation Class - Glow */
.animation-glow-0 {
  -webkit-animation: glow 8s linear infinite alternate;
  animation: glow 8s linear infinite alternate;
}
.animation-glow-1 {
  -webkit-animation: glow 5s linear infinite alternate;
  animation: glow 5s linear infinite alternate;
}
.animation-glow-2 {
  -webkit-animation: glow 10s linear infinite alternate;
  animation: glow 10s linear infinite alternate;
}
.animation-glow-3 {
  -webkit-animation: glow 12s linear infinite alternate;
  animation: glow 12s linear infinite alternate;
}

/**
 * Shapes
 */
.animation-bubble {
  position: absolute;
  border-radius: 50%;
  border-width: 1px;    
  background: var(--color);
  opacity: 1;
  bottom: 2em;
  z-index:-1;
}
.animation-square {
  position: absolute;
  border-width: 1px;
  background: var(--color);
  opacity: 1;
  bottom: 2em;
  z-index:-1;
}
.animation-circle {
  position: absolute;
  border-radius: 50%;
  border-width: 1px;
  border-style: solid;
  border-color: var(--color);
  opacity: 1;
  bottom: 2em;
  z-index:-1;
}