
/**
 * ----------------------------------------
 * animation color-change-2x
 * ----------------------------------------
 */
.color-change-2x {
	-webkit-animation: color-change-2x 10s linear infinite alternate both;
    animation: color-change-2x 10s linear infinite alternate both;
}
@-webkit-keyframes color-change-2x {
    0% {
        background-color: #88ECCB;
        background-position: 50% 0%;
    }
    100% {
        background-color: #32e0b8;
        background-position: 50% 100%;  
    }
}
@keyframes color-change-2x {
    0% {
        background-color: #88ECCB;
        background-position: 50% 0%;
    }
    100% {
        background-color: #32e0b8;
        background-position: 50% 100%;  
    }
}

.color-change-2x-inversed {
	-webkit-animation: color-change-2x-inversed 10s linear infinite alternate both;
    animation: color-change-2x-inversed 10s linear infinite alternate both;
}
@-webkit-keyframes color-change-2x-inversed {
    0% {
        /* color: #8fd3f4; */
        color: #32e0b8;
    }
    100% {
        /* color: #84fab0; */
        color: #88ECCB;
    }
}
@keyframes color-change-2x-inversed {
    0% {
        /* color: #8fd3f4; */
        color: #32e0b8;
    }
    100% {
        /* color: #84fab0; */
        color: #88ECCB;
    }
}
 
/**
 * ----------------------------------------
 * animation text-pop-up-tr work
 * ----------------------------------------
 */
.text-pop-up-tr {
    /* -webkit-animation: text-pop-up-tr 1500ms cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite alternate-reverse both;
	        animation: text-pop-up-tr 1500ms cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite alternate-reverse both; */
}
@-webkit-keyframes text-pop-up-tr {
    0% {
      -webkit-transform: translateY(0) translateX(0);
              transform: translateY(0) translateX(0);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      text-shadow: none;
    }
    100% {
      -webkit-transform: translateY(-50px) translateX(50px);
              transform: translateY(-50px) translateX(50px);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
              text-shadow: 0 1px 0 white, 0 2px 0 white, 0 3px 0 white, 0 4px 0 white, 0 5px 0 white, 0 6px 0 white, 0 7px 0 white, 0 8px 0 white, 0 9px 0 white, 0 50px 30px rgba(0, 0, 0, 0.3);
            }
        }
@keyframes text-pop-up-tr {
    0% {
      -webkit-transform: translateY(0) translateX(0);
              transform: translateY(0) translateX(0);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      text-shadow: none;
    }
    100% {
      -webkit-transform: translateY(-50px) translateX(50px);
              transform: translateY(-50px) translateX(50px);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      text-shadow: 0 1px 0 white, 0 2px 0 white, 0 3px 0 white, 0 4px 0 white, 0 5px 0 white, 0 6px 0 white, 0 7px 0 white, 0 8px 0 white, 0 9px 0 white, 0 50px 30px rgba(0, 0, 0, 0.3);
    }
}

/**
* ----------------------------------------
* animation scale-up-ver-bottom
* ----------------------------------------
*/
.section-work .scale-up-ver-bottom {
	-webkit-animation: scale-up-ver-bottom 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.2s both;
	        animation: scale-up-ver-bottom 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.2s both;
}
@-webkit-keyframes scale-up-ver-bottom {
    0% {
      -webkit-transform: scaleY(0.4);
              transform: scaleY(0.4);
      -webkit-transform-origin: 0% 100%;
              transform-origin: 0% 100%;
    }
    100% {
      -webkit-transform: scaleY(1);
              transform: scaleY(1);
      -webkit-transform-origin: 0% 100%;
              transform-origin: 0% 100%;
    }
}
@keyframes scale-up-ver-bottom {
    0% {
      -webkit-transform: scaleY(0.4);
              transform: scaleY(0.4);
      -webkit-transform-origin: 0% 100%;
              transform-origin: 0% 100%;
    }
    100% {
      -webkit-transform: scaleY(1);
              transform: scaleY(1);
      -webkit-transform-origin: 0% 100%;
              transform-origin: 0% 100%;
    }
}  