/*-----------SPINNER---------------------*/
@-moz-keyframes spinner {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}

@-webkit-keyframes spinner {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}

@-o-keyframes spinner {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes spinner {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}

// header-drop
//------------------------------------------------------------------
@-moz-keyframes header-drop {
	0% {
		-webkit-transform: translateY(-92px);
		-moz-transform: translateY(-92px);
		-ms-transform: translateY(-92px);
		-o-transform: translateY(-92px);
		transform: translateY(-92px);
	}
	100% {
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
}

@-webkit-keyframes header-drop {
	0% {
		-webkit-transform: translateY(-92px);
		-moz-transform: translateY(-92px);
		-ms-transform: translateY(-92px);
		-o-transform: translateY(-92px);
		transform: translateY(-92px);
	}
	100% {
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
}

@-o-keyframes header-drop {
	0% {
		-webkit-transform: translateY(-92px);
		-moz-transform: translateY(-92px);
		-ms-transform: translateY(-92px);
		-o-transform: translateY(-92px);
		transform: translateY(-92px);
	}
	100% {
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
}

@keyframes header-drop {
	0% {
		-webkit-transform: translateY(-92px);
		-moz-transform: translateY(-92px);
		-ms-transform: translateY(-92px);
		-o-transform: translateY(-92px);
		transform: translateY(-92px);
	}
	100% {
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
}

// header-drop-out
//------------------------------------------------------------------
@-moz-keyframes header-drop-out {
	0% {
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
	100% {
		-webkit-transform: translateY(-92px);
		-moz-transform: translateY(-92px);
		-ms-transform: translateY(-92px);
		-o-transform: translateY(-92px);
		transform: translateY(-92px);
	}
}

@-webkit-keyframes header-drop-out {
	0% {
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
	100% {
		-webkit-transform: translateY(-92px);
		-moz-transform: translateY(-92px);
		-ms-transform: translateY(-92px);
		-o-transform: translateY(-92px);
		transform: translateY(-92px);
	}
}

@-o-keyframes header-drop-out {
	0% {
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
	100% {

		-webkit-transform: translateY(-92px);
		-moz-transform: translateY(-92px);
		-ms-transform: translateY(-92px);
		-o-transform: translateY(-92px);
		transform: translateY(-92px);
	}
}

@keyframes header-drop-out {
	0% {
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
	100% {
		-webkit-transform: translateY(-92px);
		-moz-transform: translateY(-92px);
		-ms-transform: translateY(-92px);
		-o-transform: translateY(-92px);
		transform: translateY(-92px);
	}
}
//toRightFromLeft

@-webkit-keyframes toRightFromLeft {
	49% {
		-webkit-transform: translate(100%);
	}
	50% {
		opacity: 0;
		-webkit-transform: translate(-100%);
	}
	51% {
		opacity: 1;
	}
}
@-moz-keyframes toRightFromLeft {
	49% {
		-moz-transform: translate(100%);
	}
	50% {
		opacity: 0;
		-moz-transform: translate(-100%);
	}
	51% {
		opacity: 1;
	}
}
@keyframes toRightFromLeft {
	49% {
		transform: translate(100%);
	}
	50% {
		opacity: 0;
		transform: translate(-100%);
	}
	51% {
		opacity: 1;
	}
}

/* Wobble Horizontal */

@-webkit-keyframes hvr-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }

  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }

  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }

  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }

  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }

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

@keyframes hvr-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }

  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }

  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }

  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }

  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }

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

@keyframes anim-dash {
	0% {
		stroke-dashoffset: 1680;
	}
	100% {
		stroke-dashoffset: 0;
	}
}

@-webkit-keyframes anim-dash {
	0% {
		stroke-dashoffset: 1680;
	}
	100% {
		stroke-dashoffset: 0;
	}
}

/* Inner elements animations */

@-webkit-keyframes anim-elem-1 {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes anim-elem-1 {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
/* FadeInDown for Search Popup*/
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

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

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
// HEADER STICKY EFFECT
.animate {
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    will-change: transform, opacity
}

@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(-100%)
    }
    100% {
        -webkit-transform: translateY(0)
    }
}

@-moz-keyframes slideDown {
    0% {
        -moz-transform: translateY(-100%)
    }
    100% {
        -moz-transform: translateY(0)
    }
}

@-o-keyframes slideDown {
    0% {
        -o-transform: translateY(-100%)
    }
    100% {
        -o-transform: translateY(0)
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(-100%)
    }
    100% {
        transform: translateY(0)
    }
}

.animate.slideDown {
    -webkit-animation-name: slideDown;
    -moz-animation-name: slideDown;
    -o-animation-name: slideDown;
    animation-name: slideDown
}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(0)
    }
    100% {
        -webkit-transform: translateY(-100%)
    }
}

@-moz-keyframes slideUp {
    0% {
        -moz-transform: translateY(0)
    }
    100% {
        -moz-transform: translateY(-100%)
    }
}

@-o-keyframes slideUp {
    0% {
        -o-transform: translateY(0)
    }
    100% {
        -o-transform: translateY(-100%)
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(0)
    }
    100% {
        transform: translateY(-100%)
    }
}

.animate.slideUp {
    -webkit-animation-name: slideUp;
    -moz-animation-name: slideUp;
    -o-animation-name: slideUp;
    animation-name: slideUp
}

@-webkit-keyframes swingInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(-90deg)
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg)
    }
}

@-moz-keyframes swingInX {
    0% {
        -moz-transform: perspective(400px) rotateX(-90deg)
    }
    100% {
        -moz-transform: perspective(400px) rotateX(0deg)
    }
}

@-o-keyframes swingInX {
    0% {
        -o-transform: perspective(400px) rotateX(-90deg)
    }
    100% {
        -o-transform: perspective(400px) rotateX(0deg)
    }
}

@keyframes swingInX {
    0% {
        transform: perspective(400px) rotateX(-90deg)
    }
    100% {
        transform: perspective(400px) rotateX(0deg)
    }
}

.animate.swingInX {
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    -ie-transform-origin: top;
    -o-transform-origin: top;
    transform-origin: top;
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: swingInX;
    -moz-backface-visibility: visible !important;
    -moz-animation-name: swingInX;
    -o-backface-visibility: visible !important;
    -o-animation-name: swingInX;
    backface-visibility: visible !important;
    animation-name: swingInX
}

@-webkit-keyframes swingOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg)
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(-90deg)
    }
}

@-moz-keyframes swingOutX {
    0% {
        -moz-transform: perspective(400px) rotateX(0deg)
    }
    100% {
        -moz-transform: perspective(400px) rotateX(-90deg)
    }
}

@-o-keyframes swingOutX {
    0% {
        -o-transform: perspective(400px) rotateX(0deg)
    }
    100% {
        -o-transform: perspective(400px) rotateX(-90deg)
    }
}

@keyframes swingOutX {
    0% {
        transform: perspective(400px) rotateX(0deg)
    }
    100% {
        transform: perspective(400px) rotateX(-90deg)
    }
}

.animate.swingOutX {
    -webkit-transform-origin: top;
    -webkit-animation-name: swingOutX;
    -webkit-backface-visibility: visible !important;
    -moz-animation-name: swingOutX;
    -moz-backface-visibility: visible !important;
    -o-animation-name: swingOutX;
    -o-backface-visibility: visible !important;
    animation-name: swingOutX;
    backface-visibility: visible !important
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }
}

@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }
}

@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }
}

@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }
}

.animate.flipInX {
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    -moz-backface-visibility: visible !important;
    -moz-animation-name: flipInX;
    -o-backface-visibility: visible !important;
    -o-animation-name: flipInX;
    backface-visibility: visible !important;
    animation-name: flipInX
}

@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

@-moz-keyframes flipOutX {
    0% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }
    100% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

@-o-keyframes flipOutX {
    0% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }
    100% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

@keyframes flipOutX {
    0% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }
    100% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

.animate.flipOutX {
    -webkit-animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    -moz-animation-name: flipOutX;
    -moz-backface-visibility: visible !important;
    -o-animation-name: flipOutX;
    -o-backface-visibility: visible !important;
    animation-name: flipOutX;
    backface-visibility: visible !important
}

@-webkit-keyframes bounceInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-200px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(30px)
    }
    80% {
        -webkit-transform: translateY(-10px)
    }
    100% {
        -webkit-transform: translateY(0)
    }
}

@-moz-keyframes bounceInDown {
    0% {
        opacity: 0;
        -moz-transform: translateY(-200px)
    }
    60% {
        opacity: 1;
        -moz-transform: translateY(30px)
    }
    80% {
        -moz-transform: translateY(-10px)
    }
    100% {
        -moz-transform: translateY(0)
    }
}

@-o-keyframes bounceInDown {
    0% {
        opacity: 0;
        -o-transform: translateY(-200px)
    }
    60% {
        opacity: 1;
        -o-transform: translateY(30px)
    }
    80% {
        -o-transform: translateY(-10px)
    }
    100% {
        -o-transform: translateY(0)
    }
}

@keyframes bounceInDown {
    0% {
        opacity: 0;
        transform: translateY(-200px)
    }
    60% {
        opacity: 1;
        transform: translateY(30px)
    }
    80% {
        transform: translateY(-10px)
    }
    100% {
        transform: translateY(0)
    }
}

.animate.bounceInDown {
    -webkit-animation-name: bounceInDown;
    -moz-animation-name: bounceInDown;
    -o-animation-name: bounceInDown;
    animation-name: bounceInDown
}

@-webkit-keyframes bounceOutUp {
    0% {
        -webkit-transform: translateY(0)
    }
    30% {
        opacity: 1;
        -webkit-transform: translateY(20px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-200px)
    }
}

@-moz-keyframes bounceOutUp {
    0% {
        -moz-transform: translateY(0)
    }
    30% {
        opacity: 1;
        -moz-transform: translateY(20px)
    }
    100% {
        opacity: 0;
        -moz-transform: translateY(-200px)
    }
}

@-o-keyframes bounceOutUp {
    0% {
        -o-transform: translateY(0)
    }
    30% {
        opacity: 1;
        -o-transform: translateY(20px)
    }
    100% {
        opacity: 0;
        -o-transform: translateY(-200px)
    }
}

@keyframes bounceOutUp {
    0% {
        transform: translateY(0)
    }
    30% {
        opacity: 1;
        transform: translateY(20px)
    }
    100% {
        opacity: 0;
        transform: translateY(-200px)
    }
}

.animate.bounceOutUp {
    -webkit-animation-name: bounceOutUp;
    -moz-animation-name: bounceOutUp;
    -o-animation-name: bounceOutUp;
    animation-name: bounceOutUp
}
@-webkit-keyframes pulse-left-right {
  0% {-webkit-transform: translate(0px,0); opacity: 0; }
  50% {-webkit-transform: translate(20px,0); opacity: 1; }
  100% {-webkit-transform: translate(0px,0); opacity: 0; }
}

@-moz-keyframes pulse-left-right {
  0% {-moz-transform: translate(0px,0); opacity: 0; }
  50% {-moz-transform: translate(20px,0); opacity: 1; }
  100% {-moz-transform: translate(0px,0); opacity: 0; }
}

@keyframes pulse-left-right {
  0% {-moz-transform:translate(0px,0); -ms-transform: translate(0px,0); -webkit-transform: translate(0px,0); transform: translate(0px,0); opacity: 0; }
  50% {-moz-transform:translate(20px,0); -ms-transform: translate(20px,0); -webkit-transform: translate(20px,0); transform: translate(20px,0); opacity: 1; }
  100% {-moz-transform:translate(0px,0); -ms-transform: translate(0px,0); -webkit-transform: translate(0px,0); transform: translate(0px,0); opacity: 0; }
}

/* Buzz Out */
@-webkit-keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

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

@keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

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


@-webkit-keyframes toRightFromLeft {
    49% {
        -webkit-transform: translate(30%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate(-30%);
    }
    51% {
        opacity: 1;
    }
}
@-moz-keyframes toRightFromLeft {
    49% {
        -moz-transform: translate(30%);
    }
    50% {
        opacity: 0;
        -moz-transform: translate(-30%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes toRightFromLeft {
    49% {
        transform: translate(30%);
    }
    50% {
        opacity: 0;
        transform: translate(-30%);
    }
    51% {
        opacity: 1;
    }
}
@-webkit-keyframes toLeftFromRight {
    49% {
        -webkit-transform: translate(-30%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate(30%);
    }
    51% {
        opacity: 1;
    }
}
@-moz-keyframes toLeftFromRight {
    49% {
        -moz-transform: translate(-30%);
    }
    50% {
        opacity: 0;
        -moz-transform: translate(30%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes toLeftFromRight {
    49% {
        transform: translate(-30%);
    }
    50% {
        opacity: 0;
        transform: translate(30%);
    }
    51% {
        opacity: 1;
    }
}
@-webkit-keyframes moveFromLeft {
    from {
        -webkit-transform: translateX(-100%);
        opacity: 0;
    }
    to {
        -webkit-transform: translateX(0%);
        opacity: 1;
    }
}
@-moz-keyframes moveFromLeft {
    from {
        -moz-transform: translateX(-100%);
        opacity: 0;
    }
    to {
        -moz-transform: translateX(0%);
        opacity: 1;
    }
}
@-ms-keyframes moveFromLeft {
    from {
        -ms-transform: translateX(-100%);
        opacity: 0;
    }
    to {
        -ms-transform: translateX(0%);
        opacity: 1;
    }
}