/*!
 * animsition v4.0.2
 * A simple and easy jQuery plugin for CSS animated page transitions.
 * http://blivesta.github.io/animsition
 * License : MIT
 * Author : blivesta (http://blivesta.com/)
 */

/* Core animsition styles */
.animsition,
.animsition-overlay {
  position: relative;
  opacity: 0;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animsition-overlay-slide {
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #ddd;
}

/* Default loading spinner (fallback) */
.animsition-loading,
.animsition-loading:after {
  width: 32px;
  height: 32px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -16px;
  margin-left: -16px;
  border-radius: 50%;
  z-index: 100;
}

.animsition-loading {
  background-color: transparent;
  border-top: 5px solid rgba(0,0,0,.2);
  border-right: 5px solid rgba(0,0,0,.2);
  border-bottom: 5px solid rgba(0,0,0,.2);
  border-left: 5px solid #eee;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: animsition-loading .8s infinite linear;
  animation: animsition-loading .8s infinite linear;
}

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

/* Page transition animations */
@-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fade-in         { 0% { opacity: 0; } 100% { opacity: 1; } }
.fade-in { -webkit-animation-name: fade-in; animation-name: fade-in; }

@-webkit-keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fade-out         { 0% { opacity: 1; } 100% { opacity: 0; } }
.fade-out { -webkit-animation-name: fade-out; animation-name: fade-out; }

@-webkit-keyframes fade-in-up {
  0%   { -webkit-transform: translateY(500px); transform: translateY(500px); opacity: 0; }
  100% { -webkit-transform: translateY(0);     transform: translateY(0);     opacity: 1; }
}
@keyframes fade-in-up {
  0%   { -webkit-transform: translateY(500px); transform: translateY(500px); opacity: 0; }
  100% { -webkit-transform: translateY(0);     transform: translateY(0);     opacity: 1; }
}
.fade-in-up { -webkit-animation-name: fade-in-up; animation-name: fade-in-up; }

/* ============================================================
   Teddy Logo Preloader (sprite-sheet animation)
   14 frames at 150x150 in a 2100x150 horizontal strip
   ============================================================ */

.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.logo-preloader {
  width: 150px;
  height: 150px;
  background: url('../images/Preloader/teddy-logo-sprite.webp') 0 0 no-repeat;
  background-size: 2100px 150px;
  animation: logo-spin 0.834s steps(14) infinite;
}

@keyframes logo-spin {
  from { background-position: 0 0; }
  to   { background-position: -2100px 0; }
}