/**
 *
 *
 *  Impact animmations
 *
 *
 */

/*
 *  Login page fade
 */

 .inlog-fade-enter-active, .inlog-fade-leave-active {
    transition: opacity 1s;
  }
  .inlog-fade-enter, .inlog-fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }



  .fade-enter-active, .fade-leave-active {
	transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
	opacity: 0;
  }

/*
 *  Slide div in/out
 */

.slide-enter-active {
    animation: slide 1s;
}

.slide-leave-active {
    animation: slide 1s reverse;
}

@keyframes slide {
    0% {
        transform: translateY(-190px);
        max-height:0px;
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        transform: translateY(0px);
        max-height: 190px;
        opacity: 1;
    }
}

/*
 *  Slide playlist div in/out
 */

.slide-playlist-enter-active {
    animation: slide-playlist 1s;
}

.slide-playlist-leave-active {
    animation: slide-playlist 1s reverse;
}

@keyframes slide-playlist {
    0% {
        transform: translateY(-190px);
        max-height:0px;
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        transform: translateY(0px);
        max-height: 260px;
        opacity: 1;
    }
}

/*
 *  Warning icon animation
 */

.icon-field .animated.icon-warning {
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}

/*
 *  Bell icon animation
 */

.icon-field .animated.icon-bell-o {
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}

/*
 *  Success notification icon animation
 */
.notification.success .animated,
.notification-mobile.success .animated {
    animation-duration: 1.5s;
    animation-delay: 1s;
}


/*
 *  Danger notification icon animation
 */
.notification.danger .animated,
.notification-mobile.danger .animated {
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}

/*
 *  Error notification icon animation
 */
.notification.error .animated,
.notification-mobile.error .animated {
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}

/*
 *  Warning icon animation
 */

.block-draggable.animated {
	animation-duration: 5s;
    animation-iteration-count: infinite;
}

/*
 *  Simple fade animation
 */

.simple-fade-enter-active {
    transition: all .3s ease;
}
.simple-fade-leave-active {
    transition: all .3s ease;
}

.simple-fade-enter, .simple-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
    transform: translateY(50px);
    opacity: 0;
}

/*
 *  Loader animation
 */
.lds-spinner {
	color: official;
	display: inline-block;
	position: relative;
	width: 64px;
	height: 64px;
}
.lds-spinner div {
	transform-origin: 32px 32px;
	animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
	content: " ";
	display: block;
	position: absolute;
	top: 3px;
	left: 29px;
	width: 5px;
	height: 14px;
	border-radius: 20%;
	background: #6b9696;
}
.lds-spinner div:nth-child(1) {
	transform: rotate(0deg);
	animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
	transform: rotate(30deg);
	animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
	transform: rotate(60deg);
	animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
	transform: rotate(90deg);
	animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
	transform: rotate(120deg);
	animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
	transform: rotate(150deg);
	animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
	transform: rotate(180deg);
	animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
	transform: rotate(210deg);
	animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
	transform: rotate(240deg);
	animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
	transform: rotate(270deg);
	animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
	transform: rotate(300deg);
	animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
	transform: rotate(330deg);
	animation-delay: 0s;
}
@keyframes lds-spinner {
	0% {
	  	opacity: 1;
	}
	100% {
	  	opacity: 0;
	}
}


/* start pulse */
#pulse {
    /*-webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);*/
    animation: pulse 1.25s infinite cubic-bezier(0.1, 0, 0, 3);
}

.pulse {
	animation: pulse 1.25s infinite cubic-bezier(0.1, 0, 0, 3);
}


@keyframes pulse {
	0% {
	  transform: scale(1);
	}
	50% {
	  transform: scale(1.2);
	}
	100% {
	  transform: scale(1);
	}
  }

/* end pulse */