/*CSS for cell : linkologyDidYouKnow*/

@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');

*
{
  margin: 0;
  padding: 0;
}




.container-DYK 
{
    width: 100%;
    margin: auto;
    font-weight: 400;
    
    text-align: center;
    padding: 0 0 200px;
    font-family: 'Bubblegum Sans';
    word-wrap:break-word;
}



.animate {
  font-size: 50;
  
}

.animate span {
  display: inline-block;

}



.animate span:nth-of-type(2) {
  animation-delay: .05s;
}
.animate span:nth-of-type(3) {
  animation-delay: .1s;
}
.animate span:nth-of-type(4) {
  animation-delay: .15s;
}
.animate span:nth-of-type(5) {
  animation-delay: .2s;
}
.animate span:nth-of-type(6) {
  animation-delay: .25s;
}
.animate span:nth-of-type(7) {
  animation-delay: .3s;
}
.animate span:nth-of-type(8) {
  animation-delay: .35s;
}
.animate span:nth-of-type(9) {
  animation-delay: .4s;
}
.animate span:nth-of-type(10) {
  animation-delay: .45s;
}
.animate span:nth-of-type(11) {
  animation-delay: .5s;
}
.animate span:nth-of-type(12) {
  animation-delay: .55s;
}
.animate span:nth-of-type(13) {
  animation-delay: .6s;
}
.animate span:nth-of-type(14) {
  animation-delay: .65s;
}
.animate span:nth-of-type(15) {
  animation-delay: .7s;
}
.animate span:nth-of-type(16) {
  animation-delay: .75s;
}
.animate span:nth-of-type(17) {
  animation-delay: .8s;
}
.animate span:nth-of-type(18) {
  animation-delay: .85s;
}
.animate span:nth-of-type(19) {
  animation-delay: .9s;
}
.animate span:nth-of-type(20) {
  animation-delay: .95s;
}


/* Animation One */

.one span {
  /*color: #24a8e6;*/
 /* color: #feb300;*/
 color: #7D3BBB;
  opacity: 0;
  transform: translate(-150px, -50px) rotate(-180deg) scale(3);
  animation: revolveScale .4s forwards;
}

@keyframes revolveScale {
  60% {
    transform: translate(20px, 20px) rotate(30deg) scale(.3);
  }

  100% {
    transform: translate(0) rotate(0) scale(1);
    opacity: 1;
  }
}


/* Animation Two */

.two span {
  color: #a5cb21;
  opacity: 0;
  transform: translate(200px, -100px) scale(2);
  animation: ballDrop .3s forwards;
}

@keyframes ballDrop {
  60% {
    transform: translate(0, 20px) rotate(-180deg) scale(.5);
  }

  100% {
    transform: translate(0) rotate(0deg) scale(1);
    opacity: 1;
  }
}


/* Animation Three */


.three span {
  color: #24a8e6;
  opacity: 0;
  transform: translate(-300px, 0) scale(0);
  animation: sideSlide .5s forwards;
}

@keyframes sideSlide {
  60% {
    transform: translate(20px, 0) scale(1);
    color: #24a8e6;
  }

  70% {
    transform: translate(20px, 0) scale(1);
    color: #24a8e6;
  }

  80% {
    transform: translate(0) scale(1.2);
    color: #a5cb21;
  }

  100% {
    transform: translate(0) scale(1);
    opacity: 1;
   
    color: #FEB300;
  }
}


/* Animation Four */


.four span {
  color: #8d6a00;
  opacity: 0;
  transform: translate(0, -100px) rotate(360deg) scale(0);
  animation: revolveDrop .3s forwards;
}


@keyframes revolveDrop {
  30% {
    transform: translate(0, -50px) rotate(180deg) scale(1);
  }

  60% {
    transform: translate(0, 20px) scale(.8) rotate(0deg);
  }

  100% {
    transform: translate(0) scale(1) rotate(0deg);
    opacity: 1;
  }
}


/* Animation Five */


.five span {
  color: #dd3f0f;
  opacity: 0;
  transform: translate(0, -100px) rotate(360deg) scale(0);
  animation: dropVanish .5s forwards;
}


@keyframes dropVanish {
  30% {
    transform: translate(0, -50px) rotate(180deg) scale(1);
  }

  50% {
    transform: translate(0, 20px) scale(.8) rotate(0deg);
    opacity: 1;
  }

  80% {
    transform: translate(-100px, -100px) scale(1.5) rotate(-180deg);
    opacity: 0;
  }

  100% {
    transform: translate(0) scale(1) rotate(0deg);
    opacity: 1;
  }
}



/* Animation Six */


.six span {
  color: #ddb40f;
  opacity: 0;
  transform: rotate(-180deg) translate(150px, 0);
  animation: twister .5s forwards;
}


@keyframes twister {
  10% {
    opacity: 1;
  }
  100% {
    transform: rotate(0deg) translate(0);
    opacity: 1;
  }
}



/* Animation Seven */


.seven span {
  color: #348c04;
  opacity: 0;
  transform: translate(-150px, 0) scale(.3);
  animation: leftRight .5s forwards;
}


@keyframes leftRight {
  40% {
    transform: translate(50px, 0) scale(.7);
    opacity: 1;
    color: #348c04;
  }

  60% {
    color: #0f40ba;
  }

  80% {
    transform: translate(0) scale(2);
    opacity: 0;
  }

  100% {
    transform: translate(0) scale(1);
    opacity: 1;
  }
}

.amazing-statement-span 
{
    color: #FEB300;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 28px;
    font-family: 'Bubblegum Sans';
}
.greenWord 
{
    color: aqua;
}