.ani-cell{
  display:inline-block;
  width:49%;
  text-align:center;
}

.circle{
  width:100px;
  height:100px;
  border-radius:50%;
  background:whitesmoke;
  margin:auto;
  box-shadow:4px -40px 60px 5px rgb(26,117,206) inset;
}

.square{
  width:100px;
  height:100px;
  border-radius:20px;
  background:whitesmoke;
  margin:auto;
  box-shadow:4px -40px 60px 5px rgb(26,117,206) inset;
}


/* ================= Animations ================= */

.ani-loader{
  background:linear-gradient(to right,#1671ca 50%,transparent 50%);
  animation:spin 1s linear infinite;
}

.ani-loader:before{
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  background:#222;
  border-radius:50%;
  transform:translate(5px,5px);
}

.ani-gelatine{animation:gelatine .8s ;}

@keyframes gelatine{
  from,to{transform:scale(1,1);}
  25%{transform:scale(.9,1.1);}
  50%{transform:scale(1.1,.9);}
  75%{transform:scale(.95,1.05);}
}

.ani-spin{animation:spin 1s linear infinite;}

@keyframes spin{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}

.ani-elastic-spin{animation:elastic-spin 1s ease infinite;}

@keyframes elastic-spin{
  from{transform:rotate(0)}
  to{transform:rotate(720deg)}
}

.ani-pulse{animation:pulse 1s ease-in-out infinite alternate;}

@keyframes pulse{
  from{transform:scale(1)}
  to{transform:scale(1.1)}
}

.ani-flash{animation:flash .5s infinite alternate;}

@keyframes flash{
  from{opacity:1}
  to{opacity:0}
}

.ani-hithere{animation:hithere 1s infinite;}

@keyframes hithere{
  30%{transform:scale(1.2)}
  40%,60%{transform:rotate(-20deg) scale(1.2)}
  50%{transform:rotate(20deg) scale(1.2)}
  70%{transform:rotate(0) scale(1.2)}
  100%{transform:scale(1)}
}

.ani-grow{animation:grow 5s ;}

@keyframes grow{
  from{transform:scale(0)}
  to{transform:scale(1)}
}

.ani-fade-in{animation:fade-in 2s infinite;}

@keyframes fade-in{
  from{opacity:0}
  to{opacity:1}
}

.ani-fade-out{animation:fade-out 2s infinite;}

@keyframes fade-out{
  from{opacity:1}
  to{opacity:0}
}

.ani-bounce{animation:bounce 2s infinite;}

@keyframes bounce{
  70%{transform:translateY(0)}
  80%{transform:translateY(-15%)}
  90%{transform:translateY(0)}
  95%{transform:translateY(-7%)}
  97%{transform:translateY(0)}
  99%{transform:translateY(-3%)}
}

.ani-bounce2{animation:bounce2 2s infinite;}

@keyframes bounce2{
  0%,20%,50%,80%,100%{transform:translateY(0)}
  40%{transform:translateY(-30px)}
  60%{transform:translateY(-15px)}
}

.ani-shake{animation:shake 2s infinite;}

@keyframes shake{
  0%,100%{transform:translateX(0)}
  10%,30%,50%,70%,90%{transform:translateX(-10px)}
  20%,40%,60%,80%{transform:translateX(10px)}
}

.ani-flip{
  animation:flip 2s infinite;
  backface-visibility:visible!important;
}

@keyframes flip{
  0%{transform:perspective(400px) rotateY(0)}
  40%{transform:perspective(400px) translateZ(150px) rotateY(170deg)}
  50%{transform:perspective(400px) translateZ(150px) rotateY(190deg)}
  80%{transform:perspective(400px) rotateY(360deg)}
  100%{transform:perspective(400px) scale(1)}
}

.ani-swing{
  transform-origin:top center;
  animation:swing 5s ;
}

@keyframes swing{
  20%{transform:rotate(15deg)}
  40%{transform:rotate(-10deg)}
  60%{transform:rotate(5deg)}
  80%{transform:rotate(-5deg)}
  100%{transform:rotate(0)}
}

.ani-wobble{animation:wobble 2s infinite;}

@keyframes wobble{
  0%{transform:translateX(0)}
  15%{transform:translateX(-25%) rotate(-5deg)}
  30%{transform:translateX(20%) rotate(3deg)}
  45%{transform:translateX(-15%) rotate(-3deg)}
  60%{transform:translateX(10%) rotate(2deg)}
  75%{transform:translateX(-5%) rotate(-1deg)}
  100%{transform:translateX(0)}
}

.ani-roll-in{animation:roll-in 2s;}

@keyframes roll-in{
  0%{opacity:0;transform:translateX(-100%) rotate(-120deg)}
  100%{opacity:1;transform:translateX(0) rotate(0)}
}

.ani-roll-out{animation:roll-out 2s infinite;}

@keyframes roll-out{
  0%{opacity:1;transform:translateX(0) rotate(0)}
  100%{opacity:0;transform:translateX(100%) rotate(120deg)}
}

.ani-hinge{animation:hinge 2s infinite;}

@keyframes hinge{
  0%{transform:rotate(0);transform-origin:top left}
  20%,60%{transform:rotate(80deg)}
  40%{transform:rotate(60deg)}
  80%{transform:rotate(60deg) translateY(0);opacity:1}
  100%{transform:translateY(700px);opacity:0}
}