.magictime {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.puffIn {
    -webkit-animation-name: puffIn;
    animation-name: puffIn;
}
@-webkit-keyframes puffIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(2,2);
        transform: scale(2,2);
        -webkit-filter: blur(2px);
        filter: blur(2px);
    }
  
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(1,1);
        transform: scale(1,1);
        -webkit-filter: blur(0px);
        filter: blur(0px);
    }
}
@keyframes puffIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(2,2);
        transform: scale(2,2);
        -webkit-filter: blur(2px);
        filter: blur(2px);
    }
  
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(1,1);
        transform: scale(1,1);
        -webkit-filter: blur(0px);
        filter: blur(0px);
    }
}

.swashIn {
    -webkit-animation-name: swashIn;
    animation-name: swashIn;
}
@-webkit-keyframes swashIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(0, 0);
        transform: scale(0, 0);
    }
  
    90% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
    }
  
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
}
@keyframes swashIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(0, 0);
        transform: scale(0, 0);
    }
  
    90% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
    }
  
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translate3d(0, -100%, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.fadeInDown {
    animation: fadeInDown 1.5s;
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translate(-100%, -50%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

.slide .animate {
    animation-name: zoomIn;
}
.slide.slice .animate, .slide.slice2 .animate, .slide.offerSlice .animate {
    animation-name: fadeInLeftContent;
}
.slide .slide_inner .slide_content {
     opacity: 0;
}
.slide .slide_inner .slide_content.fadeInLeftContent {
     opacity: 1;
}
@keyframes fadeInLeftContent {
     from { opacity: 0; transform: translate(-100%, 0); }
     to { opacity: 1; transform: translate(0, 0); }
}
.fadeInLeftContent {
     animation-name: fadeInLeftContent;
}
@keyframes zoomIn {
    from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
    50% { opacity: 1; transform: translate(-50%, -50%); }
}
  
.zoomIn {
    animation-name: zoomIn;
}

@keyframes pulse {
    from { transform: scale3d(1, 1, 1); }
    50% { transform: scale3d(1.05, 1.05, 1.05); }
    to { transform: scale3d(1, 1, 1); }
}
      
.pulse {
    animation-name: pulse;
}