/*------------------------------------------------------------------------------
  animation
------------------------------------------------------------------------------*/
@-webkit-keyframes startFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 1;
    }
}

@media not print {
    .anm {
        opacity: 0;
    }

    .anm.is-animated {
        -webkit-animation: fadeIn 0s forwards;
        animation: fadeIn 1.5s forwards;
    }

    .anm-up {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }

    .anm-up.is-animated {
        -webkit-animation: fadeInUp 1.5s forwards;
        animation: fadeInUp 1.5s forwards;
    }

    .anm-down {
        opacity: 0;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    .anm-down.is-animated {
        -webkit-animation: fadeInDown 0.5s forwards;
        animation: fadeInDown 0.5s forwards;
        animation-delay: 0.6s;
    }

    .anm-left {
        opacity: 0;
        -webkit-transform: translateX(30px);
        transform: translateX(30px);
    }

    .anm-left.is-animated {
        -webkit-animation: fadeInLeft 1.5s forwards;
        animation: fadeInLeft 1.5s forwards;
    }

    .anm-right {
        opacity: 0;
        -webkit-transform: translateX(-30px);
        transform: translateX(-30px);
    }

    .anm-right.is-animated {
        -webkit-animation: fadeInRight 1.5s forwards;
        animation: fadeInRight 1.5s forwards;
    }
}

.anm-list>* {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
}

.anm-list>*.is-animated {
    -webkit-animation: fadeInUp 1.5s forwards;
    animation: fadeInUp 1.5s forwards;
}

.anm-list-fast>* {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
}

.anm-list-fast>*.is-animated {
    -webkit-animation: fadeInUp 0.8s forwards;
    animation: fadeInUp 0.8s forwards;
}

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

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        -webkit-transition-timing-function: cubic-bezier(0, 0.4, 0.2, 1);
        transition-timing-function: cubic-bezier(0, 0.4, 0.2, 1);
    }

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

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
        -webkit-transition-timing-function: cubic-bezier(0, 0.4, 0.2, 1);
        transition-timing-function: cubic-bezier(0, 0.4, 0.2, 1);
    }

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

@keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
        -webkit-transition-timing-function: cubic-bezier(0, 0.4, 0.2, 1);
        transition-timing-function: cubic-bezier(0, 0.4, 0.2, 1);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(30px);
        transform: translateX(30px);
        -webkit-transition-timing-function: cubic-bezier(0, 0.4, 0.2, 1);
        transition-timing-function: cubic-bezier(0, 0.4, 0.2, 1);
    }

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

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-30px);
        transform: translateX(-30px);
        -webkit-transition-timing-function: cubic-bezier(0, 0.4, 0.2, 1);
        transition-timing-function: cubic-bezier(0, 0.4, 0.2, 1);
    }

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

@keyframes fadeInLeftFast {
    0% {
        opacity: 0;
        -webkit-transform: translateX(30px);
        transform: translateX(30px);
        -webkit-transition-timing-function: cubic-bezier(0, 0.2, 0.1, 0.5);
        transition-timing-function: cubic-bezier(0, 0.2, 0.1, 0.5);
    }

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

/* shake */
@keyframes phoneRinging {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(8deg); }
  20%  { transform: rotate(-8deg); }
  30%  { transform: rotate(6deg); }
  40%  { transform: rotate(-6deg); }
  50%  { transform: rotate(4deg); }
  60%  { transform: rotate(-4deg); }
  70%  { transform: rotate(2deg); }
  80%  { transform: rotate(-2deg); }
  90%  { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}

.phone-ring {
  animation: phoneRinging 1s ease-in-out infinite;
}