/* > ANIMATION */

.rotate-loading{
    -webkit-animation: rotate-loading 0.7s infinite 0s ease-out;
        animation: rotate-loading 0.7s infinite 0s ease-out;
}

@keyframes rotate-loading{
    0%{
        transform: rotate(0deg);
        }
    100%{
        transform: rotate(360deg);
        }
}

.slide-in-bck-center {
	-webkit-animation: slide-in-bck-center 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-bck-center 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-bck-center {
    0% {
        -webkit-transform: translateZ(600px);
                transform: translateZ(600px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
                transform: translateZ(0);
        opacity: 1;
    }
}
@keyframes slide-in-bck-center {
    0% {
        -webkit-transform: translateZ(600px);
                transform: translateZ(600px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
                transform: translateZ(0);
        opacity: 1;
    }
}

.fade-in {
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fade-out {
	-webkit-animation: fade-out 1s ease-out both;
	        animation: fade-out 1s ease-out both;
}

@-webkit-keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


.zoom-in {
    -webkit-animation-name: zoom-in;
    animation-name: zoom-in;
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

 @-webkit-keyframes zoom-in {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    1000% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}
  
@keyframes zoom-in {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

.slide-in-down {
    -webkit-animation-name: slide-in-down;
    animation-name: slide-in-down;
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes slide-in-down {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
        visibility: visible;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes slide-in-down {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
        visibility: visible;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.slide-in-left {
    -webkit-animation-name: slide-in-left;
    animation-name: slide-in-left;
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        visibility: visible;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        visibility: visible;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.slide-in-right {
    -webkit-animation-name: slide-in-right;
    animation-name: slideInRight;
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        visibility: visible;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        visibility: visible;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}


.slide-in-up {
    -webkit-animation-name: slide-in-up;
    animation-name: slide-in-up;
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes slide-in-up {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        visibility: visible;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes slide-in-up {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        visibility: visible;
    }
    100% {
        -webkit-transform: translateY(0);
         transform: translateY(0);
    }
 } 

@-webkit-keyframes shrink{
    0%{
        -webkit-transform: scale(1.8);
        transform: scale(1.8);
    }
    50%{
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
    100%{
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes shrink{
    0%{
        -webkit-transform: scale(1.8);
        transform: scale(1.8);
    }
    50%{
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
    100%{
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes shrink-out{
    0%{
        -webkit-transform: scale(1);
        opacity:1;
    }
    50%{
        -webkit-transform: scale(1.5);
        opacity:0.5;
    }
    100%{
        -webkit-transform: scale(1.8);
        opacity:0;
        visibility: hidden;
    }
}

@keyframes shrink-out{
    0%{
        -webkit-transform: scale(1);
        opacity:1;
    }
    50%{
        -webkit-transform: scale(1.5);
        opacity:0.5;
    }
    100%{
        -webkit-transform: scale(1.8);
        opacity:0;
        visibility: hidden;
    }
}

@-webkit-keyframes pulsate{
    0%{
        -webkit-transform: scale(1);
    }
    50%{
        -webkit-transform: scale(1.2);
    }
    100%{ 
        -webkit-transform: scale(1);
    }
}

@keyframes pulsate{
    0%{
        -webkit-transform: scale(1);
    }
    50%{
          -webkit-transform: scale(1.2);
    }
    100%{ 
          -webkit-transform: scale(1);
    }
}

.fade-in-top {
	-webkit-animation: fade-in-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            animation: fade-in-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in-top {
    0% {
      -webkit-transform: translateY(-50px);
              transform: translateY(-50px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
}

@keyframes fade-in-top {
    0% {
      -webkit-transform: translateY(-50px);
              transform: translateY(-50px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
}
  
.fade-in-bottom {
	-webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in-bottom {
    0% {
      -webkit-transform: translateY(50px);
              transform: translateY(50px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
}

@keyframes fade-in-bottom {
    0% {
      -webkit-transform: translateY(50px);
              transform: translateY(50px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
}

.fade-in-right {
	-webkit-animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in-right {
    0% {
      -webkit-transform: translateX(50px);
              transform: translateX(50px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
}

@keyframes fade-in-right {
    0% {
      -webkit-transform: translateX(50px);
              transform: translateX(50px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
}
  
.fade-in-left {
	-webkit-animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

 @-webkit-keyframes fade-in-left {
    0% {
      -webkit-transform: translateX(-50px);
              transform: translateX(-50px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
}

@keyframes fade-in-left {
    0% {
      -webkit-transform: translateX(-50px);
              transform: translateX(-50px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
}
  
.delay-2{
    animation-delay: 2s;
}

.delay-1{
    animation-delay: 1s;
}

.delay-0-5{
    animation-delay: 0.5s;
}

/* < ANIMATION */