/**
 * index.scss
 * - Add any styles you want here!
 */
body{
  text-align: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #626868;
  color: white;
}
h1{
  display:block;
  width: 100%;
  font-weight: 100;
  font-size: 2.5em;
  position: ;
}
h2{
  margin-bottom: 5%:
}
.container{
  margin-top: 5%;
  width: 1200px;
  height: 1000px;
  position: absolute;
  top: 60%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color: white;
}
.block{
  width:100px;
  height:150px;
  position: absolute;
  overflow: hidden;
}
/* position & background-color all boxes*/
#orbit{
  background-color: #104974;
  color: white;
  top: 150px;
  left: 200px;
}
#fractal-noise{
  top: 300px;
 left: 1200px;
 background-color: black;
}
#offset{
  top: 150px;
  background-color: #FFBF00;
}
#line-weight{
  top: 150px;
  left: 100px;
  background-color: #7F5A83;
}
#blur{
  top: 150px;
  left: 300px;
  background-color: #E4572E;
}
#move{
  top: 150px;
  left: 400px;
  background-color: #0CA4A5;
}
#rotate{
  top: 150px;
  left: 500px;
  background-color: #403F4C;
}
#scale{
  top: 150px;
  left: 600px;
  background-color: #F4E3B2;
}
#trim-line{
  top: 150px;
  left: 700px;
  background-color: #A2D729;
}
#vegas{
  top: 300px;
  background-color: #DA5552;
}
#shape-transform{
  top:300px;
  left: 100px;
  background-color: #2CA6A4;
}
#easing{
  top: 300px;
  left: 200px;
  background-color: #F28F3B;
}
#depth-of-field{
  top: 300px;
  left: 300px;
  background-color: #D55672;
}
#symmetric-move{
  top: 300px;
  left: 400px;
  background-color: #E8985E;
}
#symmetric-rotate{
  top: 300px;
  left: 500px;
  background-color: #00A676;
}
#symmetric-scale{
  top: 300px;
  left: 600px;
  background-color: #456990;
}
#trim-circle{
  top: 300px;
  left: 700px;
  background-color: #C1666B;
}
#loop{
  top:300px;
  left: 800px;
  background-color: #2274A5;
}
#repeat-transform{
    top:150px;
  left: 800px;
  background-color: #BD4089;
}
#rhythm{
  top:150px;
  left: 900px;
  background-color: #8D5B4C;
}
#tip-shape{
  top:300px;
  left: 900px;
  background-color: #2FBF71;
}
#link{
  top: 150px;
  left: 1000px;
  background-color: #FFE066;
}
#mask-wipe{
  top: 300px;
  left: 1000px;
  background-color: #6B818C;
}
#spin-fade{
  top: 150px;
  left: 1100px;
  background-color: #76BED0;
}
#seribble{
  top: 300px;
  left: 1100px;
  background-color: #59C9A5;
}
#text{
  top: 150px;
  left: 1200px;
  background-color: #B5446E;
}
#bend{
  top: 450px;
  left: 900px;
  background-color: #E07A5F;
}




/* ORBIT */
.circle-orbit{
  width:70px;
  height:70px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 50%;
  position: absolute;
  left: 15px;
}
.small-circle-orbit{
  width:10px;
  height:10px;
  border-radius:50%;
  background-color: white;
  position:absolute;
  left: 45px;
  top: 81px;
  -webkit-animation: orbit-animation 2s linear infinite;
}
/* FRACTAL NOISE */
.fnstroke{
  display: inline-block;
  height: 100px;
  width: 3px;
  background-color: white;
  position: absolute;
  -webkit-animation: fractal-noise-animation 1s steps(5, end) infinite; 
}
.fnstroke1{
  left: 0px;
  animation-delay: 0ms;
}
.fnstroke2{
  left: 3px;
  animation-delay: 100ms;
}
.fnstroke3{
  left: 6px;
  animation-delay: 700ms;
}
.fnstroke4{
  left: 9px;
  animation-delay: 200ms;
}
.fnstroke5{
  left: 12px;
  animation-delay: 800ms;
}
.fnstroke6{
  left: 15px;
  animation-delay: 100ms;
}
.fnstroke7{
  left: 18px;
  animation-delay: 500ms;
}
.fnstroke8{
  left: 21px;
  animation-delay: 300ms;
}
.fnstroke9{
  left: 24px;
  animation-delay: 800ms;
}
.fnstroke10{
  left: 27px;
  animation-delay: 100ms;
}
.fnstroke11{
  left: 30px;
  animation-delay: 500ms;
}
.fnstroke12{
  left: 33px;
  animation-delay: 300ms;
}
.fnstroke13{
  left: 36px;
  animation-delay: 700ms;
}
.fnstroke14{
  left: 39px;
  animation-delay: 0ms;
}
.fnstroke15{
  left: 42px;
  animation-delay: 300ms;
}
.fnstroke16{
  left: 45px;
  animation-delay: 800ms;
}
.fnstroke17{
  left: 48px;
  animation-delay: 600ms;
}
.fnstroke18{
  left: 51px;
  animation-delay: 100ms;
}
.fnstroke19{
  left: 53px;
  animation-delay: 500ms;
}
.fnstroke20{
  left: 56px;
  animation-delay: 800ms;
}
.fnstroke21{
  left: 59px;
  animation-delay: 200ms;
}
.fnstroke22{
  left: 62px;
  animation-delay: 600ms;
}
.fnstroke23{
  left: 65px;
  animation-delay: 100ms;
}
.fnstroke24{
  left: 68px;
  animation-delay: 700ms;
}
.fnstroke25{
  left: 71px;
  animation-delay: 300ms;
}
.fnstroke26{
  left: 74px;
  animation-delay: 800ms;
}
.fnstroke27{
  left: 77px;
  animation-delay: 500ms;
}
.fnstroke28{
  left: 80px;
  animation-delay: 200ms;
}
.fnstroke29{
  left: 83px;
  animation-delay: 700ms;
}
.fnstroke30{
  left: 86px;
  animation-delay: 300ms;
}
.fnstroke31{
  left: 89px;
  animation-delay: 0ms;
}
.fnstroke32{
  left: 92px;
  animation-delay: 100ms;
}
.fnstroke33{
  left: 95px;
  animation-delay: 400ms;
}
.fnstroke34{
  left: 98px;
  animation-delay: 900ms;
}

/*  OFFSET  */
.offset-line {
  stroke-dasharray: 30;
  stroke-width: 3px;
  animation: offset-animation 5s linear infinite both;
}

/*  LINE WEIGHT*/
.line-weight-circle{
  width: 75px;
  height:75px;
  border: 5px solid red;
  border-radius: 50%;
  margin-left: 6px;
  -webkit-animation-name: line-weight;
  -webkit-animation-duration: 500ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}
/* BLUR */
.blur-div{
  width:80px;
  height:80px;
  background-color: #FFBF00;
  border-radius: 50%;
  margin-left: 10px;
  -webkit-animation: blur-animation 1s linear infinite;
}
/* MOVE */
.move-div{
  width: 30px;
  height: 30px;
  background-color: #8EB1C7;
  position: absolute;
  left: -40px;
  top: 65px;
  -webkit-animation: move-animation 1s linear infinite reverse;
}
/* ROTATE */
.rotate-div{
  width: 45px;
  height: 45px;
  border: 10px solid #3454D1;
  margin-left: 17px;
  -webkit-animation: rotate-animation 2s linear infinite;
}
/* SCALE */
.scale-div{
  background-color: #E84855;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 32px;
  top: 60px;
  -webkit-animation: scale-animation 3s linear infinite alternate;
}
/* TRIM LINE */
.trimline-overflow{
  width: 90px;
  height: 90px;
  margin-left: 5px;
  overflow: hidden;
}
.trimline-div{
  width: 98px;
  height: 10px;
  background-color: white;
  -webkit-animation: trimline-animation 2.5s ease-in-out infinite;
  margin-left: -100px;
  margin-top: 20px;
}
/* ROUGH EDGE*/
/* VEGAS */
.vegas-ball{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  left: 20px;
  -webkit-animation: vegas-animation 1.3s linear infinite;
}
.vb1{
  animation-delay:0s;
  background-color: rgba(255,255,255,1);
}
.vb2{
  animation-delay:25ms;
  background-color: rgba(255,255,255,.9);
}
.vb3{
  animation-delay:50ms;
  background-color: rgba(255,255,255,.8);
}
.vb4{
  animation-delay:75ms;
  background-color: rgba(255,255,255,.7);
}
.vb5{
  animation-delay:100ms;
  background-color: rgba(255,255,255,.6);
}
.vb6{
  animation-delay:125ms;
  background-color: rgba(255,255,255,.5);
}
.vb7{
  animation-delay:150ms;
  background-color: rgba(255,255,255,.4);
}
.vb8{
  animation-delay:175ms;
  background-color: rgba(255,255,255,.3);
}
.vb9{
  animation-delay:200ms;
  background-color: rgba(255,255,255,.2);
}
.vb10{
  animation-delay:225ms;
  background-color: rgba(255,255,255,.1);
}
.vb11{
  animation-delay:250ms;
  background-color: rgba(255,255,255,0);
}
.vb12{
  animation-delay:325ms;
  background-color: rgba(255,255,255,1);
}
.vb13{
  animation-delay:350ms;
  background-color: rgba(255,255,255,.9);
}
.vb14{
  animation-delay:375ms;
  background-color: rgba(255,255,255,.8);
}
.vb15{
  animation-delay:400ms;
  background-color: rgba(255,255,255,.7);
}
.vb16{
  animation-delay:425ms;
  background-color: rgba(255,255,255,.6);
}
.vb17{
  animation-delay:450ms;
  background-color: rgba(255,255,255,.5);
}
.vb18{
  animation-delay:475ms;
  background-color: rgba(255,255,255,.4);
}
.vb19{
  animation-delay:500ms;
  background-color: rgba(255,255,255,.3);
}
.vb20{
  animation-delay:525ms;
  background-color: rgba(255,255,255,.2);
}
.vb21{ 
  animation-delay:550ms;
  background-color: rgba(255,255,255,.1);}
.vb22{
  animation-delay:575ms;
  background-color: rgba(255,255,255,0);
}
.vb23{
  animation-delay:640ms;
  background-color: rgba(255,255,255,1);
}
.vb24{
  nimation-delay:650ms;
  background-color: rgba(255,255,255,.9);
}
.vb25{
  animation-delay:675ms;
  background-color: rgba(255,255,255,.8);
}
.vb26{
  animation-delay:700ms;
  background-color: rgba(255,255,255,.7);
}
.vb27{
  animation-delay:725ms;
  background-color: rgba(255,255,255,.6);
}
.vb28{
  animation-delay:750ms;
  background-color: rgba(255,255,255,.5);
}
.vb29{
  animation-delay:775ms;
  background-color: rgba(255,255,255,.4);
}
.vb30{
  animation-delay:800ms;
  background-color: rgba(255,255,255,.3);
}
.vb31{
  animation-delay:825ms;
  background-color: rgba(255,255,255,.2);
}
.vb32{
  animation-delay:850ms;
  background-color: rgba(255,255,255,.1);
}
.vb33{
  animation-delay:875ms;
  background-color: rgba(255,255,255,0);
}
.vb34{
  animation-delay:950ms;
  background-color: rgba(255,255,255,1);
}
.vb35{
  animation-delay:975ms;
  background-color: rgba(255,255,255,.9);
}
.vb36{
  animation-delay:1000ms;
  background-color: rgba(255,255,255,.8);
}
.vb37{
  animation-delay:1025ms;
  background-color: rgba(255,255,255,.7);
}
.vb38{
  animation-delay:1050ms;
  background-color: rgba(255,255,255,.6);
}
.vb39{
  animation-delay:1075ms;
  background-color: rgba(255,255,255,.5);
}
.vb40{
  animation-delay:1100ms;
  background-color: rgba(255,255,255,.4);
}
.vb41{
   animation-delay:1125ms;
  background-color: rgba(255,255,255,.3);
}
.vb42{
   animation-delay:1150ms;
  background-color: rgba(255,255,255,.2);
}
.vb43{
   animation-delay:1175ms;
  background-color: rgba(255,255,255,.1);
}
.vb{
 animation-delay:1200ms;
  background-color: rgba(255,255,255,0);
}
/* SHAPE TRANSFORM */
.st{
  background-color: #D1FAFF;
  margin-left: 17px;
  margin-top: -5px;
  width: 65px;
  height: 70px;
 -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: shape-transform-animation 2s ease-in-out alternate infinite;
}
.st-smaller{
  width: 55px;
  height: 60px;
  position: absolute;
  top: 75px;
  left: 5px;
  background-color: #2CA6A4;
}
/* EASING */
.easing-ball{
  width:10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 85px;
  animation: ease-ball 2s infinite;
}
.easing-stroke{
  border-left: 1px dashed white;
  height: 100px;
  position: absolute;
  left: 4px;
  animation: ease-stroke 2s infinite;
}
.easing-s1{
  width: 3px;
  height: 90px;
  background-color: rgba(255,255,255, 0);
  transform: rotate(30deg);
}
.easing-s2{
  width:3px;
  height: 120px;
  background-color: rgba(255,255,255, 0);
  transform: rotate(-40deg);
  position: absolute;
  left: 60px;
  top: 42px;
}
.easing-s1, .easing-s2{
  animation: easing-background 2s infinite;
}
/* DEPTH OF FIELD */
.dof-block, .dof-circle{
  animation: depth-of-field 2.2s linear infinite;
}
.dof-block{
  width: 45px;
  height: 45px;
  background-color: #EEABC4;
  margin-top: 10px;
  margin-left: 45px;
  position: absolute;
  z-index: 2;
  animation-delay: 1.1s;
}
.dof-circle{
  width:45px;
  height: 45px;
  border: 5px solid #EEABC4;
  border-radius: 50%;
  position: absolute;
  top: 80px;
  left: 10px;
  z-index: 1;
  
}
/* SYMMETRIC MOVE */
.sm-div{
  background-color: #694A38;
  width: 30px;
  height: 30px;
  animation: symmetric-move-animation 1.5s linear infinite;
}
.sm2{
  margin-top: 15px;
}
.sm1{
  animation-direction: reverse;
}
/* SYMMETRIC ROTATE */
.sr-div{
  background-color: white;
  width: 17px;
  height: 17px;
  position: absolute;
}
.sr1, .sr2{
  left: 40px;
  top: 90px;
}
.sr1{
    animation: symmetric-rotate-animation-1 3s ease-in-out infinite;
}
.sr2{
    animation: symmetric-rotate-animation-2 3s ease-in-out infinite;
}
/* SYMMETRIC SCALE */
.ss-div{
  background-color: #ABD2FA;
  width: 60px;
  height: 60px;
  position:absolute;
  animation: symmetric-scale-animation 2s linear infinite;
}
.ss1{
  right: 2px;
}
.ss2{
  left: 2px;
  animation-delay: 1s;
}
/* TRIM CIRCLE */
.tc-wrapper {
  position: absolute;
  width: 4em;
  height: 4em;
  left: 20%;
}
.tc-dial-container {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  width: 2em;
}
.tc-wedge {
  background: #FFF3B0;
  height: 4em;
  width: 2em;
}
.tc-container1 {
  left: 2em;
}
.tc-container1 .tc-wedge {
  animation: trim-circle-rotate-bg-1 2s infinite ease-in;
  border-radius: 0 4em 4em 0;
  left: 0;
  transform-origin: 0 50%;
}
.tc-container2 {
  left: 0;
}
.tc-container2 .tc-wedge {
  animation: trim-circle-rotate-bg-2 2s infinite ease-out;
  border-radius: 4em 0 0 4em;
  transform-origin: 2em 2em;
}
.tc-wrapper::after {
  content: "";
  background: #C1666B;
  border-radius: 50%;
  width: 3em;
  height: 3em;
  position: absolute;
  top: 0.5em;
  left: 0.5em;
}

/* LOOP */
.loop-hexagon {
        position: absolute;
        overflow: hidden;
        background: transparent;
        width: 60px;
        height: 60px;
        transform: rotate(-30deg) skewX(30deg) scaleY(.866);
    }
    .loop-hexagon:before {
        position: absolute;
        right: 6.7%;
        bottom: 0;
        left: 6.7%;
        top: 0;
        transform: scaleY(1.155) skewX(-30deg) rotate(30deg);
        background: #9DC3C2;
        content: '';
    }    
.lh1{left: -400px;}
.lh2{left: -300px; }
.lh3{left: -200px; }
.lh4{left: -100px;}
.lh5{left: 0px;}
.loop-div{
  display:inline-block;
    animation: loop-animation 1.3s infinite;
}
/* REPEAT TRANSFORM */
.rt-shape{
  background-color: rgba(255,255,255,.3);
  width: 65px;
  height: 70px;
  position: absolute;
  top: 70px;
  left: 19px;
 -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: repeat-transform-animation 3s ease-in-out alternate infinite;
} 
.rts2{
  animation-delay: 200ms;
}
.rts3{
  animation-delay: 400ms;
}
.rts4{
  animation-delay: 600ms;
}
.rts5{
  animation-delay: 800ms;
}
/* RHYTHM */
.rhytm-div{
  width: 50px;
  height: 50px;
  border: 5px solid #D5A18E;
  position: absolute;
  left: 20px;
  top: 60px;
  transform: rotate(45deg);
  animation: rhytm-rotate-animation 3s ease infinite;
}
.rhytm-div:before{
  content: "";
  width: 25px;
  height: 55px;
  border: 5px solid red;
  border-radius: 50%;
  position: absolute;
  left: 7px;
  top: -8px;
  transform: rotate(45deg);
}
.rhytm-div:after{
  content: "";
  width: 25px;
  height: 55px;
  border: 5px solid red;
  border-radius: 50%;
  position: absolute;
  left: 7px;
  top: -6px;
  transform: rotate(-45deg);
}
.rhytm-div:before,
.rhytm-div:after{
  animation:  rhytm-change-animation 3s steps(1,end) infinite reverse;
}
/* TIP SHAPE */
.ts-ball{
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  left: 46px;
  top: 56px;
  animation: tip-shade-ball-animation 6s linear infinite reverse;
}
.ts-hexagon{
  border: 2px solid transparent;
  width: 0px;
  height: 30px;
  position: absolute;
}
.tsline1{
  left: 35px;
  transform: rotate(-120deg);
}
.tsline2{
  transform: rotate(120deg);
  left: 64px;
}
.tsline3{
  left: 20px;
  top: 76px;
}
.tsline4{
  top: 76px;
  left: 78px;
}
.tsline5{
  transform: rotate(120deg);
  top: 101px;
  left: 35px;
}
.tsline6{
    transform: rotate(-120deg);
  top: 100px;
  left: 64px;
}
.ts-hexagon{
  animation:  tip-shade-hexagon-animation 6s infinite alternate-reverse;
}
.tsline1{
  animation-delay: 0ms;
}
.tsline2{
  animation-delay: 2500ms;
}
.tsline3{
  animation-delay: 300ms;
}
.tsline4{
  animation-delay: 1600ms;
}
.tsline5{
  animation-delay: 100ms;
}
.tsline6{
  animation-delay: 900ms;
}
/* LINK */
.link-small-ball{
   width: 7px;
  height: 7px;
  background-color: #CF5C36;
  border-radius: 50%;
  position: absolute;

}
.link-big-ball{
     width: 12px;
  height: 12px;
  background-color: #CF5C36;
  border-radius: 50%;
  position: absolute;
  left: 45px;
  top: 85px;
  animation: link-big-ball 2s infinite;
}
.lsb1{
  top: 120px;
  left: 30px;
  animation: link-small-ball-1 2s infinite;
}
.lsb2{
  top: 120px;
  left: 80px;
  animation: link-small-ball-2 2s infinite;
}
.lsb3{
  top: 70px;
  left: 70px;
  animation: link-small-ball-3 2s infinite;
}
/* MASK WIPE */
.mw-outside{
  width: 70px;
  height: 70px;
  background-color: #CCDAD1;
  border-radius: 50%;
  margin-left: 14px;
  animation: move-wipe-animation-1 2s ease-out infinite;
}
.mw-inside{
  position: absolute;
  left: -1px;
  top:-1px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: #6B818C;
  animation: move-wipe-animation-2 2s ease-in infinite;
}
/* SPIN FADE */
.sfblock{
  background-color: white;
  width: 60px;
  height:10px;
  position: absolute;
  top: 80px;
  left: 20px;
  animation: spin-fade-animation 2s ease-in infinite;
}
.sf2{
  animation-delay: 1s;
}

/* SERIBBLE */
.seribble-container{
  width: 80px;
  height: 80px;
  overflow: hidden;
  margin-left: 10px;
  z-index: 2;
}
.sline{
  width: 100px;
  border: 1px solid white;
  transform: rotate(-30deg);
  margin-left: -20px;
  margin-top: 4px;
  animation: seribble-animation 2s linear  infinite reverse;
}
.sl1{ /*3*/
  position: absolute;
  width: 35px;
  left: 26px;
  top: 54px;
  animation-delay: 50ms;
}
.sl2{ /**/
  position: absolute;
  width: 25px;
  left: 27px;
  top: 50px;
  animation-delay: 0ms;
}
.sl3{animation-delay: 100ms;}
.sl4{animation-delay: 150ms;}
.sl5{animation-delay: 200ms;}
.sl6{animation-delay: 250ms;}
.sl7{animation-delay: 300ms;}
.sl8{animation-delay: 350ms;}
.sl9{animation-delay: 400ms;}
.sl10{animation-delay: 450ms;}
.sl11{animation-delay: 500ms;}
.sl12{animation-delay: 550ms;}
.sl13{animation-delay: 600ms;}
.sl14{animation-delay: 650ms;}
.sl15{animation-delay: 700ms;}
.sl16{animation-delay: 750ms;}
.sl17{animation-delay: 800ms;}
.sl18{animation-delay: 850ms;}
.sl19{animation-delay: 900ms;}

/* TEXT */
.text-container{
  width: 95px;
  margin-left: 2px;  
  height: 30px;
  border-bottom: 2px solid white;
  overflow: hidden;
  padding-bottom: 15px;
}
.textp{
  display: inline-block;
  font-size: 2em;
  width: 30px;
  margin-top: 5px;
  animation: text-animation 1s infinite;
}
.t-small{
  animation-delay: 140ms;
}

/* 
 * Animations
*/

@keyframes orbit-animation{
0%{transform: rotate(0deg) translateX(35px);}
	100%{transform: rotate(360deg) translateX(35px);}
}

@keyframes offset-animation {
  from{}
  to { stroke-dashoffset: 1000;  }
}

@keyframes line-weight{
  from { border: 8px solid #D1BCE3;
    margin-top: -9px;}
  to {border: 0px solid #D1BCE3;
  margin-left: 15px;}
}
@keyframes fractal-noise-animation{
  from{background-color: rgba(255,255,255, .8);}
  to{ background-color: rgba(255,255,255, .1); }
}
@keyframes blur-animation{
  0%{filter: blur(0px);}
  30%{filter: blur(0px);}
  100%{  filter: blur(40px);}
}
@keyframes move-animation{
  from{transform: translateX(0px);}
  to{transform: translateX(150px);}
}
@keyframes rotate-animation{
  from{transform: rotate(0deg);}
  to{transform: rotate(360deg);}
}
@keyframes scale-animation{
  0%{}
  33%{width: 90px;
  transform: translateX(-26px);}
  65%{width: 90px;
  transform: translateX(-26px);}
  66%{width: 90px;
    height: 90px;
   transform: translateX(-26px)
     translateY(-20px);}
  95%{width: 0px;
  height:0px;
    transform: translateX(20px)
     translateY(20px);}
  100%{width: 0px;
  height:0px;
    transform: translateX(20px)
     translateY(20px);
  }
}
@keyframes trimline-animation{
  0%{transform: translateX(0px);}
  50%{transform: translateX(100px);}
  55%{transform: translateX(100px);}
  100%{transform: translateX(200px);}
}

@keyframes vegas-animation{
  0%{transform: translateX(0px);}
  25%{transform: translateX(50px);}
  50%{transform: translateX(50px) translateY(50px);}
  75%{transform: translateX(0px) translateY(50px);}
  100%{transform: translateX(0px) translateY(0px);}
}

@keyframes shape-transform-animation {
  0% {clip-path: polygon(50% 0%, 50% 0, 100% 0, 50% 100%, 0 0, 50% 0);}
  10%{clip-path: polygon(50% 0%, 50% 0, 100% 0, 50% 100%, 0 0, 50% 0);}
  40%{clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);}
  50% {clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);}
  90%{clip-path: polygon(50% 0%, 100% 100%, 50% 100%, 50% 100%, 50% 100%, 0 100%);}
  100% {clip-path: polygon(50% 0%, 100% 100%, 50% 100%, 50% 100%, 50% 100%, 0 100%);}
}
/*ease*/
@keyframes ease-ball{
  0%{}
  50%{transform: translateX(20px) translateY(-30px);}
  100%{transform: translateX(130px) translateY(100px);}
}
@keyframes ease-stroke{
    0%{}
  50%{transform: translateX(20px);}
  100%{transform: translateX(130px);}
}
@keyframes easing-background{
  0%{background-color: rgba(255,255,255,0);}
  60%{background-color: rgba(255,255,255,0);}
  100%{background-color: rgba(255,255,255,.7);}
}
/*ease end*/
/* depth of field */
@keyframes depth-of-field{
  0%{filter: blur(0px);
    transform: scale(1.1);}
  10%{filter: blur(0px);
  transform: scale(1.1);}
  40%{filter: blur(4px);}
  50%{filter: blur(4px);}
  90%{filter: blur(0px);
    transform: scale(1.1);}
  100%{  filter: blur(0px);
    transform: scale(1.1);}
}
@keyframes symmetric-move-animation{
  from{transform: translateX(-50px);}
  to{transform: translateX(150px);}
}
@keyframes symmetric-rotate-animation-1{
  0%{transform: rotate(0deg) translateY(30px);}
  50%{transform: rotate(180deg) translateY(30px);}
  100%{transform: rotate(0deg) translateY(30px);}
}
@keyframes  symmetric-rotate-animation-2{
    0%{transform: rotate(-180deg) translateY(30px);}
   50%{transform: rotate(0deg) translateY(30px);}
  100%{transform: rotate(-180deg) translateY(30px);}
}
@keyframes symmetric-scale-animation {
  0%{transform: scale(0);}
  50%{transform: scale(1);}
  100%{transform: scale(0);}
}
/* TRIM CIRCLE animations*/
@keyframes trim-circle-rotate-bg-1 {
  50%, 100% {
    transform: rotateZ(180deg);
  }
}
@keyframes trim-circle-rotate-bg-2 {
  0%, 50% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(180deg);
  }
}
/*TRIM CIRCLE animations end*/

@keyframes loop-animation{
  0%{transform: translateX(0px);}
  80%{transform: translateX(370px);}
  100%{transform: translateX(370px);}
}

@keyframes repeat-transform-animation{
  0%{clip-path: polygon(50% 25%, 50% 25%, 100% 25%, 50% 100%, 0 25%, 0% 25%);}
  20%{clip-path: polygon(50% 25%, 50% 25%, 100% 25%, 50% 100%, 0 25%, 0% 25%);}
  40%{clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);}
  60%{clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);}
  80%{clip-path: polygon(50% 0%, 100% 75%, 50% 75%, 50% 75%, 50% 75%, 0 75%);}
  100%{clip-path: polygon(50% 0%, 100% 75%, 50% 75%, 50% 75%, 50% 75%, 0 75%);}
}
/* animation rhytm */
@keyframes rhytm-rotate-animation{
  0%{transform: rotate(45deg);}
  25%{transform: rotate(135deg);}
  26%{transform: rotate(135deg); border-radius: 20%;}
  50%{transform: rotate(225deg); border-radius: 20%;}
  75%{transform: rotate(315deg); border-radius: 0%;}
  100%{transform: rotate(405deg);}
}
@keyframes rhytm-change-animation{
  0%{border-color: transparent;}
  25%{border-color: transparent;}
  45%{border-color: transparent;}
  50%{border-color: #D5A18E;}
  75%{border-color: #D5A18E;}
  76%{border-color: #D5A18E;}
  100%{border-color: transparent;}
}
/* tip shape */
@keyframes tip-shade-ball-animation{
  0%{}
  2%{transform: translateX(-28px) translateY(15px);}
  4%{transform: translateX(-28px) translateY(50px);}
  6%{transform: translateX(0px) translateY(65px);}
  8%{transform:  translateX(0px) translateY(65px);}
  10.5%{transform: translateX(28px) translateY(50px);}
  12.5%{transform: translateX(28px) translateY(15px);}
  15%{transform: translateX(0px) translateY(0px);}
  25%{transform: translateX(0px) translateY(0px);}
  37.5%{transform: translateX(28px) translateY(15px);}
  50%{transform: translateX(28px) translateY(50px);}
  62.5%{transform: translateX(0px) translateY(65px);}
  75%{transform: translateX(-28px) translateY(50px);}
  87.5%{transform: translateX(-28px) translateY(15px);}
  100%{}
}
@keyframes tip-shade-hexagon-animation{
    0%{height: 0px;}
  6%{height:0px;
   border-color: transparent;}
  8%{height:0px;
   border-color: transparent;}
  10.5%{height:0px;
   border-color: transparent;}
  12.5%{;}
  15%{height:0px;}
  25%{height:30px;}
  37.5%{height: 30px;}
  50%{height: 30px;}
  62.5%{height: 30px;
  border-color: white;}
  75%{height: 30px;
  border-color: white;}
  87.5%{height:0px;
  border-color: transparent;}
  100%{height:0px;
  border-color: transparent;}
}
@keyframes move-wipe-animation-1{
  0%{transform: scale(0);}
  50%{transform: scale(1);}
  100%{transform: scale(1);}
}
@keyframes move-wipe-animation-2{
  0%{transform: scale(0);}
  50%{transform: scale(0);}
  100%{transform: scale(1);}
}
@keyframes spin-fade-animation{
  0%{}
  25%{background-color: white;}
  50%{background-color: transparent;}
  75%{transform: rotate(180deg);}
  100%{transform: rotate(180deg);}
}
@keyframes seribble-animation {
  0%{border-color: transparent;}
  2%{border-color: white;}
  68%{border-color: white;}
  70%{border-color: transparent;}
  100%{border-color: transparent;}
}
@keyframes text-animation{
  0%{transform: translateY(-670px);}
  80%{transform: translateY(0px);}
  100%{transform: translateY(0px);}
}
/* LINK */
@keyframes link-big-ball{
  0%{transform: translateX(0px) translateY(0px);}
  25%{transform: translateX(28px) translateY(-20px);}
  50%{transform: translateX(0px) translateY(0px);}
  100%{transform: translateX(0px) translateY(0px);}
}
@keyframes link-small-ball-1{
  0%{}
  25%{transform: translateX(-10px) translateY(10px);}
  50%{transform: translateX(-5px) translateY(-50px);}
  100%{transform: translateX(0px) translateY(0px);}
}
@keyframes link-small-ball-2{
  0%{}
  20%{transform: translateX(-50px) translateY(0px);}
  30%{transform: translateX(0px) translateY(-50px);}
  40%{transform: translateX(0px) translateY(0px);}
  100%{transform: translateX(0px) translateY(0px);}
}
@keyframes link-small-ball-3{
  0%{}
  25%{transform: translateX(-50px) translateY(0px);}
  50%{transform: translateX(0px) translateY(0px);}
  75%{transform: translateX(0px) translateY(0px);}
  100%{transform: translateX(-50px) translateY(50px);}
}