.dl-animation {
     animation-duration: 0.3s;
     animation-fill-mode: both;
 }

 .animated {
     animation-duration: 0.3s;
     animation-fill-mode: both;
 }

 .dt-fadeIn {
     -webkit-animation-name: sgFadeIn;
     animation-name: sgFadeIn;
 }

 @-webkit-keyframes sgFadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 @keyframes sgFadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 .dt-fadeInLeft {
     -webkit-animation-name: sgFadeInLeft;
     animation-name: sgFadeInLeft;
 }

 @-webkit-keyframes sgFadeInLeft {
     from {
         -webkit-transform: translateX(-50px);
         transform: translateX(-50px);
         opacity: 0;
     }

     to {
         -webkit-transform: translateX(0);
         transform: translateX(0);
         opacity: 1;
     }
 }

 @keyframes sgFadeInLeft {
     from {
         -webkit-transform: translateX(-50px);
         transform: translateX(-50px);
         opacity: 0;
     }

     to {
         -webkit-transform: translateX(0);
         transform: translateX(0);
         opacity: 1;
     }
 }

 .dt-fadeInRight {
     -webkit-animation-name: sgFadeInRight;
     animation-name: sgFadeInRight;
 }

 @-webkit-keyframes sgFadeInRight {
     from {
         -webkit-transform: translateX(50px);
         transform: translateX(50px);
         opacity: 0;
     }

     to {
         -webkit-transform: translateX(0);
         transform: translateX(0);
         opacity: 1;
     }
 }

 @keyframes sgFadeInRight {
     from {
         -webkit-transform: translateX(50px);
         transform: translateX(50px);
         opacity: 0;
     }

     to {
         -webkit-transform: translateX(0);
         transform: translateX(0);
         opacity: 1;
     }
 }

 .dt-fadeInTop {
     -webkit-animation-name: sgFadeInTop;
     animation-name: sgFadeInTop;
 }

 @-webkit-keyframes sgFadeInTop {
     from {
         -webkit-transform: translateY(-50px);
         transform: translateY(-50px);
         opacity: 0;
     }

     to {
         -webkit-transform: translateY(0);
         transform: translateY(0);
         opacity: 1;
     }
 }

 @keyframes sgFadeInTop {
     from {
         -webkit-transform: translateY(-50px);
         transform: translateY(-50px);
         opacity: 0;
     }

     to {
         -webkit-transform: translateY(0);
         transform: translateY(0);
         opacity: 1;
     }
 }

 .dt-fadeInBottom {
     -webkit-animation-name: sgFadeInBottom;
     animation-name: sgFadeInBottom;
 }

 @-webkit-keyframes sgFadeInBottom {
     from {
         -webkit-transform: translateY(50px);
         transform: translateY(50px);
         opacity: 0;
     }

     to {
         -webkit-transform: translateY(0);
         transform: translateY(0);
         opacity: 1;
     }
 }

 @keyframes sgFadeInBottom {
     from {
         -webkit-transform: translateY(50px);
         transform: translateY(50px);
         opacity: 0;
     }

     to {
         -webkit-transform: translateY(0);
         transform: translateY(0);
         opacity: 1;
     }
 }

 .splitting.dt-textFadeIn.animated .char {
     -webkit-animation: textFadeIn 0.3s cubic-bezier(0.3, 0, 0.7, 1) both;
     animation: textFadeIn 0.3s cubic-bezier(0.3, 0, 0.7, 1) both;
     -webkit-animation-delay: calc(30ms * var(--char-index));
     animation-delay: calc(30ms * var(--char-index));
 }

 .splitting.dt-textFadeIn .whitespace {
     width: 5px;
 }

 @-webkit-keyframes textFadeIn {
     0% {
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
 }

 @keyframes textFadeIn {
     0% {
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
 }

 .splitting.dt-textFadeInTop.animated .char {
     -webkit-animation: textFadeInTop 0.4s cubic-bezier(0.3, 0, 0.7, 1) both;
     animation: textFadeInTop 0.4s cubic-bezier(0.3, 0, 0.7, 1) both;
     -webkit-animation-delay: calc(30ms * var(--char-index));
     animation-delay: calc(30ms * var(--char-index));
     display: inline-block;
 }

 .splitting.dt-textFadeInTop .whitespace {
     width: 10px;
 }

 @-webkit-keyframes textFadeInTop {
     0% {
         opacity: 0;
         -webkit-transform: translateY(-20px);
         transform: translateY(-20px);
     }

     100% {
         opacity: 1;
         -webkit-transform: translateY(0);
         transform: translateY(0);
     }
 }

 @keyframes textFadeInTop {
     0% {
         opacity: 0;
         -webkit-transform: translateY(-20px);
         transform: translateY(-20px);
     }

     100% {
         opacity: 1;
         -webkit-transform: translateY(0);
         transform: translateY(0);
     }
 }

 .splitting.dt-textFadeInBottom.animated .char {
     -webkit-animation: textFadeInBottom 0.4s cubic-bezier(0.3, 0, 0.7, 1) both;
     animation: textFadeInBottom 0.4s cubic-bezier(0.3, 0, 0.7, 1) both;
     -webkit-animation-delay: calc(30ms * var(--char-index));
     animation-delay: calc(30ms * var(--char-index));
     display: inline-block;
 }

 .splitting.dt-textFadeInBottom .whitespace {
     width: 10px;
 }

 @-webkit-keyframes textFadeInBottom {
     0% {
         opacity: 0;
         -webkit-transform: translateY(20px);
         transform: translateY(20px);
     }

     100% {
         opacity: 1;
         -webkit-transform: translateY(0);
         transform: translateY(0);
     }
 }

 @keyframes textFadeInBottom {
     0% {
         opacity: 0;
         -webkit-transform: translateY(20px);
         transform: translateY(20px);
     }

     100% {
         opacity: 1;
         -webkit-transform: translateY(0);
         transform: translateY(0);
     }
 }