/* animation.css */

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

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

@-webkit-keyframes fadein-top {
  0% { top: -25%; opacity: 0; }
  100% { top: 0; opacity: 1; }
}

@keyframes fadein-top {
  0% { top: -25%; opacity: 0; }
  100% { top: 0; opacity: 1; }
}

@-webkit-keyframes fadein-bottom {
  0% { bottom: -25%; opacity: 0; }
  100% { bottom: 0; opacity: 1; }
}

@keyframes fadein-bottom {
  0% { bottom: -25%; opacity: 0; }
  100% { bottom: 0; opacity: 1; }
}

@-webkit-keyframes fadein-left {
  0% { left: -25%; opacity: 0; }
  100% { left: 0; opacity: 1; }
}

@keyframes fadein-left {
  0% { left: -25%; opacity: 0; }
  100% { left: 0; opacity: 1; }
}

@-webkit-keyframes fadein-right {
  0% { right: -25%; opacity: 0; }
  100% { right: 0; opacity: 1; }
}

@keyframes fadein-right {
  0% { right: -25%; opacity: 0; }
  100% { right: 0; opacity: 1; }
}

@-webkit-keyframes spin {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}

@keyframes spin {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}

@-webkit-keyframes spin-counter {
  from { transform:rotate(360deg); }
  to { transform:rotate(0deg); }
}

@keyframes spin-counter {
  from { transform:rotate(360deg); }
  to { transform:rotate(0deg); }
}

@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
  0%   { -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); opacity: 0; }
  20%  { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }
  40%  { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); }
  60%  { -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); opacity: 1; }
  80%  { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); }
  100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; }
}

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
  0%   { -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); opacity: 0; }
  20%  { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }
  40%  { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); }
  60%  { -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); opacity: 1; }
  80%  { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); }
  100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; }
}

@-webkit-keyframes flipInX {
  0%   { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; }
  40%  { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; }
  60%  { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; }
  80%  { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  100% { -webkit-transform: perspective(400px); transform: perspective(400px); }
}

@keyframes flipInX {
  0%   { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; }
  40%  { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; }
  60%  { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; }
  80%  { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  100% { -webkit-transform: perspective(400px); transform: perspective(400px); }
}

@-webkit-keyframes rubberBand {
  0%  { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
  30%  { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); }
  40%  { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); }
  50%  { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); }
  65%  { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); }
  75%  { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); }
  100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}

@keyframes rubberBand {
  0%  { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
  30%  { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); }
  40%  { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); }
  50%  { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); }
  65%  { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); }
  75%  { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); }
  100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}

@-webkit-keyframes tada {
  0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
  10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}

@keyframes tada {
  0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
  10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}

@-webkit-keyframes checked {
  0% { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); }
  90% { -webkit-transform: scale(4); -ms-transform: scale(4); transform: scale(4); }
  100% { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); }
}

@keyframes checked {
  0% { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); }
  90% { -webkit-transform: scale(4); -ms-transform: scale(4); transform: scale(4); }
  100% { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); }
}

@-webkit-keyframes marquee-content {
  from { transform: translateX( 50% ); }
  to { transform: translateX( -100% ); }
}

@keyframes marquee-content {
  from { transform: translateX( 50% ); }
  to { transform: translateX( -100% ); }
}

.fadein {
  /*animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
  -webkit-animation: fadein 2s linear;
  animation: fadein 2s linear;
}

.fadein-top {
  position: relative;
  -webkit-animation: fadein-top .5s ease-out;
  animation: fadein-top .5s ease-out;
}

.fadein-bottom {
  position: relative;
  -webkit-animation: fadein-bottom .5s ease-out;
  animation: fadein-bottom .5s ease-out;
}

.fadein-left {
  position: relative;
  -webkit-animation: fadein-left .5s ease-out;
  animation: fadein-left .5s ease-out;
}

.fadein-right {
  position: relative;
  -webkit-animation: fadein-right .5s ease-out;
  animation: fadein-right .5s ease-out;
}

.spin {
  -webkit-animation: spin .5s ease-out;
  animation: spin .5s ease-out;
}

.spin-counter {
  -webkit-animation: spin-counter .5s ease-out;
  animation: spin-counter .5s ease-out;
}

.bounceIn {
  -webkit-animation: bounceIn 1s ease .5s 3 normal both running;
  animation: bounceIn 1s ease .5s 3 normal both running;
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation: flipInX 1s ease .5s 3 normal both running;
  animation: flipInX 1s ease .5s 3 normal both running;
}

.rubberBand {
  -webkit-animation: rubberBand 1s ease .5s 3 normal both running;
  animation: rubberBand 1s ease .5s 3 normal both running;
}

.tada {
  -webkit-animation: tada 1s ease .5s 3 normal both running;
  animation: tada 1s ease .5s 3 normal both running;
}

.marquee-text-bar {
  display: inline-flex;
  overflow: hidden;
  white-space: nowrap;
  width: 10em;
  margin: 0;
  padding: 0;
  line-height: 1;
  clip-path: rect();
  /*background-color: rgba(256, 256, 256, .125);*/
}

.marquee-text {
  animation-duration: 7.5s;
  animation-iteration-count: infinite;
  animation-name: marquee-content;
  animation-timing-function: linear;
  /*padding: 5px 15px 5px 15px;*/
}

.marquee-text:hover {
  animation-play-state: paused;
  cursor: pointer;
  opacity: .75 !important;
}

.marquee-text .material-symbols-outlined {
  font-size: 1.125em;
  margin-top: -.125em;
}

/*@media only screen and (max-width: 575.98px) {*/
@media only screen and (max-width: 767.98px) {
  .marquee-text-bar {
    width: 14em;
    margin: auto;
  }
  
  .marquee-text-bar:not(.animate) {
    display: block;
  }
}