/* Loading */
.senna-loading .senna-loading-bar {
  -webkit-animation: shift-rightwards 1s ease-in-out infinite;
          animation: shift-rightwards 1s ease-in-out infinite;
  -webkit-animation-delay: .4s;
          animation-delay: .4s;
  display: block; }

.senna-loading-bar {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  background: #2fa4f5;
  display: none;
  height: 3px;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10000; }

@-webkit-keyframes shift-rightwards {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%); }
  40%,
  60% {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  to {
    -webkit-transform: translateX(100%);
            transform: translateX(100%); } }

@keyframes shift-rightwards {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%); }
  40%,
  60% {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  to {
    -webkit-transform: translateX(100%);
            transform: translateX(100%); } }

/* Transition */
[class^="senna-transition-"] .flipped {
  -webkit-animation-duration: 0.40s;
          animation-duration: 0.40s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both; }

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

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.senna-transition-fade .flipped {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn; }