@font-face {
  font-family: 'Handlee';
  src: url('../fonts/Handlee-Regular.ttf');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  padding-right: 0;
  padding-left: 0;
}
 
.row {
  margin-right: 0;
  margin-left: 0;
}

.row>* {
  padding-right: 0;
  padding-left: 0;
}

[app-theme="warm-light"] {
  --app-font-family: 'Handlee';
  --app-navbar-bg-color: rgba(70,110,70,1.0);
  --app-footer-bg-color: rgba(70,110,70,1.0);
  --app-bg-body: #f4f1ed;
  --app-bg-page: rgba(255,255,255,0.6);
  --app-bg-title-page: #00000000;
  --app-bg-content: rgba(255,255,255,0.7);
  --app-bg-image-text: rgba(255,255,255,0.7);
  --app-bg-heading: rgba(255,255,255,0.7);
  --app-bg-status-bar: #d0d0d0;
  --app-bg-control-bar: #d0d0d0;
  --app-page-card-border: 1px solid #000;
  --app-page-card-box-shadow: 0 0 0 1px #fff, 0 0 0 2px #000, 4px 4px 6px #777;
  --app-media-card-box-shadow: 5px 5px 7px 0px rgba(100,100,100,0.75);
  --app-heading-box-shadow: 5px 5px 7px 0px rgba(100,100,100,0.75);
  --app-input-bg: #ffffff;
  --app-input-text: #2c353d;
  --app-input-border: #2c353d;
  --app-input-placeholder-color: rgba(120,120,120,0.7);
  --app-text-color: #2c353d;
  --app-link-color: #4a6c4a;
  --home-bg-img: url('../img/home.webp');
  --knowledge-bg-img: url('../img/knowledge.webp');
  --nutrition-bg-img: url('../img/nutrition.webp');
  --shopping-bg-img: url('../img/shopping.webp');
  --sports-bg-img: url('../img/sports.webp');
  --progress-bg-img: url('../img/progress.webp');
  --login-bg-img: url('../img/login.webp');
  --languages-bg-img: url('../img/languages.webp');
  --import-bg-img: url('../img/import.webp');
  --export-bg-img: url('../img/export.webp');
  --colors-bg-img: url('../img/colors.webp');
  --confirmation-bg-img: url('../img/confirmation.webp');
  --settings-bg-img: url('../img/settings.webp');
  --app-btn-color: #ffffff;
  --app-btn-bg-color: #6c757d;
  --app-btn-border-color: #ffffff;
  --app-btn-hover-color: #6c757d;
  --app-btn-hover-bg-color: #ffffffcc;
  --app-btn-hover-border-color: #6c757d;
  --app-radio-btn-color: #ffffff;
  --app-radio-btn-bg-color: #6c757d;
  --app-radio-btn-border-color: #ffffff;
  --app-radio-btn-hover-color: #6c757d;
  --app-radio-btn-hover-bg-color: #ffffffcc;
  --app-radio-btn-hover-border-color: #6c757d;
  --app-table-bg: #ffffff;
  --app-table-text: #212529;
  --app-table-border: #dee2e6;
  --app-table-stripe: rgba(0,0,0,0.05);
  --app-title-font-size: calc(1.28rem + 0.3vw) !important;
}
[app-theme="warm-dark"] {
  --app-font-family: 'Handlee';
  --app-navbar-bg-color: rgba(70,110,70,1.0);
  --app-footer-bg-color: rgba(70,110,70,1.0);
  --app-bg-body: #1f1f1f;
  --app-bg-page: rgba(40,40,40,0.9);
  --app-bg-title-page: rgba(70,70,70,0.6);
  --app-bg-content: rgba(40,40,40,0.9);
  --app-bg-image-text: rgba(40,40,40,0.9);
  --app-bg-heading: rgba(40,40,40,0.9);
  --app-bg-status-bar: #202020;
  --app-bg-control-bar: #202020;
  --app-page-card-border: 1px solid #000;
  --app-page-card-box-shadow: 0 0 0 1px #444, 0 0 0 2px #000, 4px 4px 6px #777;
  --app-media-card-box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  --app-heading-box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  --app-input-bg: #2a2a2a;
  --app-input-text: #f0f0f0;
  --app-input-border: #444;
  --app-input-placeholder-color: rgba(180,180,180,0.6);
  --app-text-color: #eeeeee;
  --app-link-color: #99cc99;
  --home-bg-img: url('../img/home.webp');
  --knowledge-bg-img: url('../img/knowledge.webp');
  --nutrition-bg-img: url('../img/nutrition.webp');
  --shopping-bg-img: url('../img/shopping.webp');
  --sports-bg-img: url('../img/sports.webp');
  --progress-bg-img: url('../img/progress.webp');
  --login-bg-img: url('../img/login.webp');
  --languages-bg-img: url('../img/languages.webp');
  --import-bg-img: url('../img/import.webp');
  --export-bg-img: url('../img/export.webp');
  --colors-bg-img: url('../img/colors.webp');
  --confirmation-bg-img: url('../img/confirmation.webp');
  --settings-bg-img: url('../img/settings.webp');
  --app-btn-color: #ffffff;
  --app-btn-bg-color: #333;
  --app-btn-border-color: #444;
  --app-btn-hover-color: #000000;
  --app-btn-hover-bg-color: #555;
  --app-btn-hover-border-color: #555;
  --app-radio-btn-color: #ffffff;
  --app-radio-btn-bg-color: #333;
  --app-radio-btn-border-color: #444;
  --app-radio-btn-hover-color: #ffffff;
  --app-radio-btn-hover-bg-color: #555;
  --app-radio-btn-hover-border-color: #555;
  --app-table-bg: #1f1f1f;
  --app-table-text: #f1f1f1;
  --app-table-border: #333;
  --app-table-stripe: rgba(255,255,255,0.05);
  --app-title-font-size: calc(1.28rem + 0.3vw) !important;
}
[app-theme="clean-light"] {
  --app-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --app-navbar-bg-color: rgba(70,110,70,1.0);
  --app-footer-bg-color: rgba(70,110,70,1.0);
  --app-bg-body: #f8f9fa;
  --app-bg-page: #00000000;
  --app-bg-title-page: #00000000;
  --app-bg-heading: #00000000;
  --app-bg-content: #00000000;
  --app-bg-image-text: rgba(255,255,255,0.7);
  --app-bg-status-bar: #d0d0d0;
  --app-bg-control-bar: #d0d0d0;
  --app-page-card-border: 1px solid #000000;
  --app-page-card-box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  --app-media-card-box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  --app-heading-box-shadow: none;
  --app-input-bg: #ffffff;
  --app-input-text: #212529;
  --app-input-border: #212529;
  --app-input-placeholder-color: rgba(120,120,120,0.7);
  --app-text-color: #212529;
  --app-link-color: #0d6efd;
  --home-bg-img: none;
  --knowledge-bg-img: none;
  --nutrition-bg-img: none;
  --shopping-bg-img: none;
  --sports-bg-img: none;
  --progress-bg-img: none;
  --login-bg-img: none;
  --languages-bg-img: none;
  --import-bg-img: none;
  --export-bg-img: none;
  --colors-bg-img: none;
  --confirmation-bg-img: none;
  --settings-bg-img: none;
  --app-btn-color: #ffffff;
  --app-btn-bg-color: rgba(70,110,70,1.0);
  --app-btn-border-color: #ffffff;
  --app-btn-hover-color: rgba(70,110,70,1.0);
  --app-btn-hover-bg-color: #ffffff;
  --app-btn-hover-border-color: rgba(70,110,70,1.0);
  --app-radio-btn-color: rgba(70,110,70,1.0);
  --app-radio-btn-bg-color: #00000000;
  --app-radio-btn-border-color: rgba(70,110,70,1.0);
  --app-radio-btn-hover-color: #ffffff;
  --app-radio-btn-hover-bg-color: rgba(70,110,70,1.0);
  --app-radio-btn-hover-border-color: #ffffff;
  --app-table-bg: #ffffff;
  --app-table-text: #212529;
  --app-table-border: #dee2e6;
  --app-table-stripe: rgba(0,0,0,0.05);
  --app-title-font-size: calc(1.15rem + 0.3vw) !important;
}
[app-theme="clean-dark"] {
  --app-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --app-navbar-bg-color: rgba(70,110,70,1.0);
  --app-footer-bg-color: rgba(70,110,70,1.0);
  --app-bg-body: #121212;
  --app-bg-page: #1a1a1a;
  --app-bg-title-page: rgba(70,70,70,0.6);
  --app-bg-content: #1a1a1a;
  --app-bg-image-text: rgba(40,40,40,0.9);
  --app-bg-heading: #1a1a1a;
  --app-bg-status-bar: #202020;
  --app-bg-control-bar: #202020;
  --app-page-card-border: 1px solid #444;
  --app-page-card-box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  --app-media-card-box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  --app-heading-box-shadow: none;
  --app-input-bg: #2a2a2a;
  --app-input-text: #f1f1f1;
  --app-input-border: #555;
  --app-input-placeholder-color: rgba(180,180,180,0.6);
  --app-text-color: #f0f0f0;
  --app-link-color: #66bfff;
  --home-bg-img: none;
  --knowledge-bg-img: none;
  --nutrition-bg-img: none;
  --shopping-bg-img: none;
  --sports-bg-img: none;
  --progress-bg-img: none;
  --login-bg-img: none;
  --languages-bg-img: none;
  --import-bg-img: none;
  --export-bg-img: none;
  --colors-bg-img: none;
  --confirmation-bg-img: none;
  --settings-bg-img: none;
  --app-btn-color: #ffffff;
  --app-btn-bg-color: #333;
  --app-btn-border-color: #444;
  --app-btn-hover-color: #ffffff;
  --app-btn-hover-bg-color: #555;
  --app-btn-hover-border-color: #555;
  --app-radio-btn-color: #ffffff;
  --app-radio-btn-bg-color: #333;
  --app-radio-btn-border-color: #444;
  --app-radio-btn-hover-color: #ffffff;
  --app-radio-btn-hover-bg-color: #555;
  --app-radio-btn-hover-border-color: #555;
  --app-table-bg: #1f1f1f;
  --app-table-text: #f0f0f0;
  --app-table-border: #333;
  --app-table-stripe: rgba(255,255,255,0.05);
  --app-title-font-size: calc(1.15rem + 0.3vw) !important;
}

[app-theme="warm-light"],
[app-theme="warm-dark"],
[app-theme="clean-light"],
[app-theme="clean-dark"]
  body,
  .form-control,
  .form-control::placeholder,
  .app-btn,
  .app-btn,
  .app-radio-btn,
  .app-radio-btn,
  .app-table,
  .app-table *,
  .app-page-card,
  .app-media-card,
  .app-text-card,
  .app-failure-feedback-card,
  .app-success-feedback-card,
  .app-video-card,
  .app-image-card,
  .app-image-card-text,
  .app-heading-1,
  .app-heading-2,
  .app-heading-3,
  .app-heading-4,
  .app-sub-heading,
  .status-bar,
  .control-bar {
    transition: 
      background-color 0.5s ease;
}

body {
  font-family: var(--app-font-family);
  /*word-break: break-all;*/
  background-color: var(--app-bg-body);
  color: var(--app-text-color);
}

#content {
  padding-top: env(safe-area-inset-top);
}

.app-title-text {
  font-size: var(--app-title-font-size)!important;
}

a {
  color: var(--app-link-color);
}
a:hover {
  opacity: 0.8;
}

.navbar {
  position: fixed;
  margin-top: env(safe-area-inset-top);
  width: 100%;
  z-index: 1020;
  padding-top: 0;
  padding-bottom: 0;
  background-color: var(--app-navbar-bg-color);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.footer {
  background-color: var(--app-footer-bg-color);
  border: 1px solid #000000;
  color: white;
  width: 100%;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: calc(env(safe-area-inset-left) + 20px);
  padding-right: calc(env(safe-area-inset-right) + 20px);
}

#footer-activator {
  height: 30px;
  margin-bottom: env(safe-area-inset-bottom);
}

.footer-link {
    color: white;
}

.footer-link:hover {
    color: black;
}

.app-nav-btn {
  background-color: rgba(0,0,0,0.45);
  border: 1px solid #ffffff;
  border-radius: 5px;
  color: #ffffff;
}
.app-nav-btn:hover {
  background-color: rgba(0,0,0,0.65);
}
.app-nav-btn:disabled {
  background-color: rgba(0,48,160,0.95);
}

.app-page-bg-home,
.app-page-bg-knowledge,
.app-page-bg-nutrition,
.app-page-bg-shopping,
.app-page-bg-sports,
.app-page-bg-progress,
.app-page-bg-login,
.app-page-bg-languages,
.app-page-bg-import,
.app-page-bg-export,
.app-page-bg-colors,
.app-page-bg-confirmation,
.app-page-bg-settings {
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.app-page-bg-home {
  background-image: var(--home-bg-img);
}
.app-page-bg-knowledge {
  background-image: var(--knowledge-bg-img);
}
.app-page-bg-nutrition {
  background-image: var(--nutrition-bg-img);
}
.app-page-bg-shopping {
  background-image: var(--shopping-bg-img);
}
.app-page-bg-sports {
  background-image: var(--sports-bg-img);
}
.app-page-bg-progress {
  background-image: var(--progress-bg-img);
}
.app-page-bg-login {
  background-image: var(--login-bg-img);
}
.app-page-bg-languages {
  background-image: var(--languages-bg-img);
}
.app-page-bg-import {
  background-image: var(--import-bg-img);
}
.app-page-bg-export {
  background-image: var(--export-bg-img);
}
.app-page-bg-colors {
  background-image: var(--colors-bg-img);
}
.app-page-bg-confirmation {
  background-image: var(--confirmation-bg-img);
}
.app-page-bg-settings {
  background-image: var(--settings-bg-img);
}

.app-title-page-card-1,
.app-title-page-card-2,
.app-title-page-card-3,
.app-title-page-card-4,
.app-title-page-card-5,
.app-title-page-card-6 {
  background-size: cover;
  background-position: center;
  background-color: var(--app-bg-title-page);
  background-blend-mode: overlay;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
.app-title-page-card-1 {
  background-image: url('../img/bg-003.webp');
}
.app-title-page-card-2 {
  background-image: url('../img/bg-002.webp');
  transition: opacity 1s ease 10s;
  animation: fadeSequence2 20s infinite;
}
.app-title-page-card-3 {
  background-image: url('../img/bg-001.webp');
  transition: opacity 1s ease 5s;
  animation: fadeSequence3 20s infinite;
}
.app-title-page-card-4 {
  background-image: url('../img/bg-006.webp');
}
.app-title-page-card-5 {
  background-image: url('../img/bg-005.webp');
  transition: opacity 1s ease 10s;
  animation: fadeSequence5 20s infinite;
}
.app-title-page-card-6 {
  background-image: url('../img/bg-004.webp');
  transition: opacity 1s ease 5s;
  animation: fadeSequence6 20s infinite;
}
.landing-page-bg {
  background-color: rgba(30,30,30,0.8);
}
.animate-transition {
  transition: background-color 1.95s ease, color 1.95s ease, border-color 1.95s ease;
}
.form-control {
  background-color: var(--app-input-bg);
  color: var(--app-input-text);
  border: 1px solid var(--app-input-border);
}
.form-control::placeholder {
  color: var(--app-input-placeholder-color);
}

.app-btn {
  color: var(--app-btn-color);
  background-color: var(--app-btn-bg-color);
  border-color: var(--app-btn-border-color);
}
.app-btn:hover {
  opacity: 0.9;
  color: var(--app-btn-hover-color);
  background-color: var(--app-btn-hover-bg-color);
  border-color: var(--app-btn-hover-border-color);
}
.app-radio-btn {
  color: var(--app-radio-btn-color);
  background-color: var(--app-radio-btn-bg-color);
  border-color: var(--app-radio-btn-border-color);
}
.app-radio-btn:hover,
.app-radio-btn:focus {
  opacity: 0.8;
  color: var(--app-radio-btn-hover-color) !important;
  background-color: var(--app-radio-btn-hover-bg-color) !important;
  border-color: var(--app-radio-btn-hover-border-color) !important;
}
.btn-check:checked + .btn.app-radio-btn {
  opacity: 1.0;
  color: var(--app-radio-btn-hover-color) !important;
  background-color: var(--app-radio-btn-hover-bg-color) !important;
  border-color: var(--app-radio-btn-hover-border-color) !important;
}

.app-table {
  width: 100%;
  border: 1px solid var(--app-table-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px 8px 8px 8px;
  overflow: hidden;
  background-color: var(--app-table-bg);
  color: var(--app-table-text);
}

.app-table th,
.app-table td {
  border: 1px solid var(--app-table-border);
  padding: 0.75rem;
  vertical-align: top;
}

.app-table tbody tr:nth-of-type(odd) {
  background-color: var(--app-table-stripe);
}

.app-table td,
.app-table th {
  border-left: none;
  border-right: none;
}

.app-table thead th {
  border-top: none;
  border-bottom: none;
}

.app-table tbody td {
  border-bottom: none;
}

.status-bar {
  position: fixed;
  top: 0;
  width: 100%;
  height: env(safe-area-inset-top);
  background-color: var(--app-bg-status-bar);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.control-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: env(safe-area-inset-bottom);
  background-color: var(--app-bg-control-bar);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.flip-container {
  perspective: 1000px;
  width: 100%;
  height: 100%;
}

.flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.flip-front, .flip-back {
  overflow: auto;
  position: absolute;
  transform-style: preserve-3d;
  width: 100%;
  backface-visibility: hidden;
}

.flip-front {
  animation: flip-front-unflipped 1s ease-in-out forwards;
}

.flip-front.flipped {
  animation: flip-front-flipped 1s ease-in-out forwards;
}

.flip-back {
  animation: flip-back-unflipped 1s ease-in-out forwards;
}

.flip-back.flipped {
  animation: flip-back-flipped 1s ease-in-out forwards;
}

.animation-container {
  position: relative;
  overflow-x: hidden;
  padding: 0;
  height: 100vh;
  width: 100%;
}

.animation-box {
  overflow: auto;
  position: absolute;
  width: 100%;
  width: 100%;
  transform: scale(1) translateX(0);
  animation-timing-function: linear;
}

.animation-box.slide-out {
  animation: zoomOutAndSlideRight 1s forwards;
}

.animation-box.slide-in {
  animation: slideInAndZoom 1s forwards;
}

.animation-box.fade-out {
  animation: fadeOut 0.5s forwards;
}

.animation-box.fade-in {
  animation: fadeIn 0.5s forwards;
}

.app-content-page-card {
  width: 100%;
  padding: 10px;
}

.app-page-card {
  border: var(--app-page-card-border);
  background-color: var(--app-bg-page);
  border-radius: 8px;
  box-shadow: var(--app-page-card-box-shadow);
  margin: 8px;
  width: calc(100% - 16px);
}

.app-media-card {
  background-color: var(--app-bg-content);
  border-radius: 8px;
  box-shadow: var(--app-media-card-box-shadow);
  box-sizing: border-box;
  padding: 5px;
}

.app-text-card {
  background-color: var(--app-bg-content);
  border: 1px solid var(--app-input-border);
  border-radius: 8px;
  padding: 5px;
}

.app-failure-feedback-card {
  background-color: var(--app-bg-content);
  border: 1px solid #cc0000;
  border-radius: 8px;
  padding: 5px;
  width: 100%;
  color: #cc0000;
}

.app-success-feedback-card {
  background-color: var(--app-bg-content);
  border: 1px solid #00cc00;
  border-radius: 8px;
  padding: 5px;
  width: 100%;
  color: #007700;
}

.app-video-card {
  width: 100%;
  min-height: 3rem;
  border: 1px solid var(--app-input-border);
  border-radius: 8px;
  overflow: hidden;
}

.app-image-card {
  width: 100%;
  min-height: 3rem;
  border: 1px solid var(--app-input-border);
  border-radius: 8px;
  overflow: hidden;
}

.app-image-card-text {
  color: var(--app-text-color);
  background-color: var(--app-bg-image-text);
}

.app-image-card-image {
  height: auto;
  display: block;
  padding: 0;
  box-sizing: content-box;
}

.app-heading-1,
.app-heading-2,
.app-heading-3,
.app-heading-4,
.app-sub-heading {
  font-family: var(--app-font-family);
  background-color: var(--app-bg-heading);
  color: var(--app-text-color);
  text-align: center;
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: var(--app-heading-box-shadow);
}
.app-heading-1 {
  font-weight: bold;
  font-size: 2.5rem;
}
.app-heading-2 {
  font-weight: normal;
  font-size: 2rem;
}
.app-heading-3 {
  font-weight: normal;
  font-size: 1.4rem;
}
.app-heading-4 {
  font-weight: normal;
  font-size: 1.1rem;
}
.app-sub-heading {
  font-weight: normal;
  font-size: 1.1rem;
}

.bodyMuscleContainer {
    position: relative;
    display: inline-block;
}

.bodyMuscleIntensityCanvas {
    position: absolute;
    top: 0;
    left: 0;
}

.bodyMuscleHitmapCanvas {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

@keyframes fadeSequence2 {
  0% {
    opacity: 1;
  }
  45.00% {
    opacity: 1;
  }
  50.00% {
    opacity: 0;
  }
  70.00% {
    opacity: 0;
  }
  75.11% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeSequence3 {
  0% {
    opacity: 1;
  }
  20.00% {
    opacity: 1;
  }
  25.00% {
    opacity: 0;
  }
  95.00% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeSequence5 {
  0% {
    opacity: 1;
  }
  45.00% {
    opacity: 1;
  }
  50.00% {
    opacity: 0;
  }
  70.00% {
    opacity: 0;
  }
  75.11% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeSequence6 {
  0% {
    opacity: 1;
  }
  20.00% {
    opacity: 1;
  }
  25.00% {
    opacity: 0;
  }
  95.00% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes flip-front-unflipped {
  0% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

@keyframes flip-front-flipped {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

@keyframes flip-back-unflipped {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-180deg);
  }
}

@keyframes flip-back-flipped {
  0% {
    transform: rotateY(-180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

@keyframes zoomOutAndSlideRight {
  0% {
    transform: scale(1) translateX(0);
    opacity: 1;
  }
  25% {
    transform: scale(0.85) translateX(0);
    opacity: 1;
  }
  75% {
    transform: scale(0.85) translateX(200%);
    opacity: 0;
  }
  99% {
    transform: scale(0.85) translateX(200%);
    opacity: 0;
  }
  100% {
    transform: scale(1.00) translateX(0);
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes slideInAndZoom {
  0% {
    transform: scale(0.85) translateX(-200%);
    opacity: 0;
    visibility: visible;
  }
  25% {
    transform: scale(0.85) translateX(-200%);
    opacity: 1;
  }
  75% {
    transform: scale(0.85) translateX(0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

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