@charset "UTF-8";

 :root {
   --prim: #223e7fff;
   --wh: #fff;
   --ts: all .3s ease;
   --br: 20px;
   --swiper-theme-color: var(--prim);
   --shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
 }

 .col-12 .col-12 {
   padding: 0;
 }

 #videotitle {
   z-index: 12000;
 }

 #videotitle iframe {
   width: 100%;
   height: 100%;
   border: none;
 }

 .play-ico {
   display: inline-block;
   width: 1em;
   height: 1em;
   -webkit-mask-image: url("/media/cases/lion/icons/play-button.svg");
   mask-image: url("/media/cases/lion/icons/play-button.svg");
   -webkit-mask-size: contain;
   mask-size: contain;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   background-color: var(--prim);
   margin-right: 5px;
   transition: transform 250ms ease;
 }

 .case-section-tag .content a:hover {
   text-decoration: none;
 }

 .case-section-tag .content {
   color: var(--prim);
   font-weight: bold;
 }

 /* header */
 main#bs-5 {
   /*!
   * Bootstrap  v5.3.2 (https://getbootstrap.com/)
   * Copyright 2011-2023 The Bootstrap Authors
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   */
   /* rtl:raw:
  [type="tel"],
  [type="url"],
  [type="email"],
  [type="number"] {
    direction: ltr;
  }
  */
   /* rtl:begin:ignore */
   /* rtl:end:ignore */
   /* rtl:begin:ignore */
   /* rtl:end:ignore */
   /* rtl:begin:ignore */
   /* rtl:end:ignore */
   /* rtl:begin:ignore */
   /* rtl:end:ignore */
   /* rtl:options: {
    "autoRename": true,
    "stringMap":[ {
      "name"    : "prev-next",
      "search"  : "prev",
      "replace" : "next"
    } ]
  } */
   /* rtl:begin:remove */
   /* rtl:end:remove */
   overflow: hidden;
 }

 main#bs-5 *,
 main#bs-5 *::before,
 main#bs-5 *::after {
   box-sizing: border-box;
 }

 main#bs-5 h4,
 main#bs-5 h3,
 main#bs-5 h2 {
   margin-top: 0;
   margin-bottom: 0.5rem;
   font-weight: 500;
   line-height: 1.2;
   color: var(--bs-heading-color);
 }

 main#bs-5 h2 {
   font-size: 40px;
 }

 @media (min-width: 1200px) {
   main#bs-5 h2 {
     font-size: 60px;
   }
 }

 main#bs-5 h3 {
   font-size: 50px;
 }

 main#bs-5 h4 {
   font-size: calc(1.275rem + 0.3vw);
 }

 @media (min-width: 1200px) {
   main#bs-5 h4 {
     font-size: 1.5rem;
   }
 }

 main#bs-5 p {
   margin-top: 0;
   margin-bottom: 1rem;
 }

 main#bs-5 blockquote {
   margin: 0 0 1rem;
 }

 main#bs-5 a {
   color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
   text-decoration: underline;
 }

 main#bs-5 a:hover {
   --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
 }

 main#bs-5 img,
 main#bs-5 svg {
   vertical-align: middle;
 }

 main#bs-5 button:focus:not(:focus-visible) {
   outline: 0;
 }

 main#bs-5 [role=button] {
   cursor: pointer;
 }

 main#bs-5 button:not(:disabled),
 main#bs-5 [type=button]:not(:disabled),
 main#bs-5 [type=reset]:not(:disabled),
 main#bs-5 [type=submit]:not(:disabled) {
   cursor: pointer;
 }

 main#bs-5 ::-moz-focus-inner {
   padding: 0;
   border-style: none;
 }

 main#bs-5 ::-webkit-datetime-edit-fields-wrapper,
 main#bs-5 ::-webkit-datetime-edit-text,
 main#bs-5 ::-webkit-datetime-edit-minute,
 main#bs-5 ::-webkit-datetime-edit-hour-field,
 main#bs-5 ::-webkit-datetime-edit-day-field,
 main#bs-5 ::-webkit-datetime-edit-month-field,
 main#bs-5 ::-webkit-datetime-edit-year-field {
   padding: 0;
 }

 main#bs-5 ::-webkit-inner-spin-button {
   height: auto;
 }

 main#bs-5 ::-webkit-search-decoration {
   -webkit-appearance: none;
 }

 main#bs-5 ::-webkit-color-swatch-wrapper {
   padding: 0;
 }

 main#bs-5 ::file-selector-button {
   font: inherit;
   -webkit-appearance: button;
 }

 main#bs-5 .blockquote {
   margin-bottom: 1rem;
   font-size: 1.25rem;
 }

 main#bs-5 .container {
   --bs-gutter-x: 1.5rem;
   --bs-gutter-y: 0;
   width: 100%;
   padding-right: calc(var(--bs-gutter-x));
   padding-left: calc(var(--bs-gutter-x));
   margin-right: auto;
   margin-left: auto;
 }

 @media (min-width: 576px) {
   main#bs-5 .container {
     max-width: 540px;
   }
 }

 @media (min-width: 768px) {
   main#bs-5 .container {
     max-width: 720px;
   }
 }

 @media (min-width: 992px) {
   main#bs-5 .container {
     max-width: 960px;
   }
 }

 @media (min-width: 1200px) {
   main#bs-5 .container {
     max-width: 1140px;
   }
 }

 @media (min-width: 1400px) {
   main#bs-5 .container {
     max-width: 1320px;
   }
 }

 main#bs-5 .row {
   --bs-gutter-x: 1.5rem;
   --bs-gutter-y: 0;
   display: flex;
   flex-wrap: wrap;
   margin-top: calc(-1 * var(--bs-gutter-y));
   margin-right: calc(-0.5 * var(--bs-gutter-x));
   margin-left: calc(-0.5 * var(--bs-gutter-x));
 }

 main#bs-5 .row>* {
   flex-shrink: 0;
   width: 100%;
   max-width: 100%;
   padding-right: calc(var(--bs-gutter-x));
   padding-left: calc(var(--bs-gutter-x));
   margin-top: var(--bs-gutter-y);
 }

 main#bs-5 .col {
   flex: 1 0 0%;
 }

 main#bs-5 .col-auto {
   flex: 0 0 auto;
   width: auto;
 }

 main#bs-5 .col-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
 }

 main#bs-5 .col-2 {
   flex: 0 0 auto;
   width: 16.66666667%;
 }

 main#bs-5 .col-4 {
   flex: 0 0 auto;
   width: 33.33333333%;
 }

 main#bs-5 .col-8 {
   flex: 0 0 auto;
   width: 66.66666667%;
 }

 main#bs-5 .col-10 {
   flex: 0 0 auto;
   width: 83.33333333%;
 }

 main#bs-5 .col-11 {
   flex: 0 0 auto;
   width: 91.66666667%;
 }

 main#bs-5 .col-12 {
   flex: 0 0 auto;
   width: 100%;
 }

 main#bs-5 .form-control[type=file]:not(:disabled):not([readonly]) {
   cursor: pointer;
 }

 main#bs-5 .form-control::file-selector-button {
   padding: 0.375rem 0.75rem;
   margin: -0.375rem -0.75rem;
   margin-inline-end: 0.75rem;
   color: var(--bs-body-color);
   background-color: var(--bs-tertiary-bg);
   pointer-events: none;
   border-color: inherit;
   border-style: solid;
   border-width: 0;
   border-inline-end-width: var(--bs-border-width);
   border-radius: 0;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }

 @media (prefers-reduced-motion: reduce) {
   main#bs-5 .form-control::file-selector-button {
     transition: none;
   }
 }

 main#bs-5 .form-control:hover:not(:disabled):not([readonly])::file-selector-button {
   background-color: var(--bs-secondary-bg);
 }

 main#bs-5 .form-control-sm::file-selector-button {
   padding: 0.25rem 0.5rem;
   margin: -0.25rem -0.5rem;
   margin-inline-end: 0.5rem;
 }

 main#bs-5 .form-control-lg::file-selector-button {
   padding: 0.5rem 1rem;
   margin: -0.5rem -1rem;
   margin-inline-end: 1rem;
 }

 main#bs-5 .form-control-color:not(:disabled):not([readonly]) {
   cursor: pointer;
 }

 main#bs-5 [data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus) {
   --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
 }

 .was-validated main#bs-5 .input-group>.form-control:not(:focus):valid,
 main#bs-5 .input-group>.form-control:not(:focus).is-valid,
 .was-validated main#bs-5 .input-group>.form-select:not(:focus):valid,
 main#bs-5 .input-group>.form-select:not(:focus).is-valid,
 .was-validated main#bs-5 .input-group>.form-floating:not(:focus-within):valid,
 main#bs-5 .input-group>.form-floating:not(:focus-within).is-valid {
   z-index: 3;
 }

 .was-validated main#bs-5 .input-group>.form-control:not(:focus):invalid,
 main#bs-5 .input-group>.form-control:not(:focus).is-invalid,
 .was-validated main#bs-5 .input-group>.form-select:not(:focus):invalid,
 main#bs-5 .input-group>.form-select:not(:focus).is-invalid,
 .was-validated main#bs-5 .input-group>.form-floating:not(:focus-within):invalid,
 main#bs-5 .input-group>.form-floating:not(:focus-within).is-invalid {
   z-index: 4;
 }

 main#bs-5 .btn {
   --bs-btn-padding-x: 0.75rem;
   --bs-btn-padding-y: 0.375rem;
   --bs-btn-font-family: ;
   --bs-btn-font-size: 1rem;
   --bs-btn-font-weight: 400;
   --bs-btn-line-height: 1.5;
   --bs-btn-color: var(--bs-body-color);
   --bs-btn-bg: transparent;
   --bs-btn-border-width: var(--bs-border-width);
   --bs-btn-border-color: transparent;
   --bs-btn-border-radius: var(--bs-border-radius);
   --bs-btn-hover-border-color: transparent;
   --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
   --bs-btn-disabled-opacity: 0.65;
   --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
   display: inline-block;
   padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
   font-family: var(--bs-btn-font-family);
   font-size: var(--bs-btn-font-size);
   font-weight: var(--bs-btn-font-weight);
   line-height: var(--bs-btn-line-height);
   color: var(--bs-btn-color);
   text-align: center;
   text-decoration: none;
   vertical-align: middle;
   cursor: pointer;
   user-select: none;
   border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
   border-radius: var(--bs-btn-border-radius);
   background-color: var(--bs-btn-bg);
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }

 @media (prefers-reduced-motion: reduce) {
   main#bs-5 .btn {
     transition: none;
   }
 }

 main#bs-5 .btn:hover {
   color: var(--bs-btn-hover-color);
   background-color: var(--bs-btn-hover-bg);
   border-color: var(--bs-btn-hover-border-color);
 }

 main#bs-5 .btn:focus-visible {
   color: var(--bs-btn-hover-color);
   background-color: var(--bs-btn-hover-bg);
   border-color: var(--bs-btn-hover-border-color);
   outline: 0;
   box-shadow: var(--bs-btn-focus-box-shadow);
 }

 .btn-check:focus-visible+main#bs-5 .btn {
   border-color: var(--bs-btn-hover-border-color);
   outline: 0;
   box-shadow: var(--bs-btn-focus-box-shadow);
 }

 :not(.btn-check)+main#bs-5 .btn:active {
   color: var(--bs-btn-active-color);
   background-color: var(--bs-btn-active-bg);
   border-color: var(--bs-btn-active-border-color);
 }

 .btn-check:checked+main#bs-5 .btn:focus-visible,
 :not(.btn-check)+main#bs-5 .btn:active:focus-visible,
 main#bs-5 .btn:first-child:active:focus-visible,
 main#bs-5 .btn.active:focus-visible,
 main#bs-5 .btn.show:focus-visible {
   box-shadow: var(--bs-btn-focus-box-shadow);
 }

 main#bs-5 .btn:disabled {
   color: var(--bs-btn-disabled-color);
   pointer-events: none;
   background-color: var(--bs-btn-disabled-bg);
   border-color: var(--bs-btn-disabled-border-color);
   opacity: var(--bs-btn-disabled-opacity);
 }

 main#bs-5 .btn-link:focus-visible {
   color: var(--bs-btn-color);
 }

 main#bs-5 .btn-sm {
   --bs-btn-padding-y: 0.25rem;
   --bs-btn-padding-x: 0.5rem;
   --bs-btn-font-size: 0.875rem;
   --bs-btn-border-radius: var(--bs-border-radius-sm);
 }

 main#bs-5 .nav-link:focus-visible {
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }

 main#bs-5 .icon-link-hover:focus-visible>.bi {
   transform: var(--bs-icon-link-transform, translate3d(0.25em, 0, 0));
 }

 main#bs-5 .visually-hidden-focusable:not(:focus):not(:focus-within) {
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
   margin: -1px !important;
   overflow: hidden !important;
   clip: rect(0, 0, 0, 0) !important;
   white-space: nowrap !important;
   border: 0 !important;
 }

 main#bs-5 .visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
   position: absolute !important;
 }

 main#bs-5 .overflow-hidden {
   overflow: hidden !important;
 }

 main#bs-5 .d-flex {
   display: flex !important;
 }

 main#bs-5 .flex-column-reverse {
   flex-direction: column-reverse !important;
 }

 main#bs-5 .position-relative {
   position: relative !important;
 }

 main#bs-5 .w-100 {
   width: 100% !important;
 }

 main#bs-5 .w-60 {
   width: 60% !important;
 }

 main#bs-5 .h-auto {
   height: auto !important;
 }

 main#bs-5 .flex-column {
   flex-direction: column !important;
 }

 main#bs-5 .flex-grow-0 {
   flex-grow: 0 !important;
 }

 main#bs-5 .flex-grow-1 {
   flex-grow: 1 !important;
 }

 main#bs-5 .justify-content-end {
   justify-content: flex-end !important;
 }

 main#bs-5 .justify-content-center {
   justify-content: center !important;
 }

 main#bs-5 .justify-content-between {
   justify-content: space-between !important;
 }

 main#bs-5 .align-items-start {
   align-items: flex-start !important;
 }

 main#bs-5 .align-items-center {
   align-items: center !important;
 }

 main#bs-5 .mt-3 {
   margin-top: 1rem !important;
 }

 main#bs-5 .mt-5 {
   margin-top: 3rem !important;
 }

 main#bs-5 .mb-2 {
   margin-bottom: 0.5rem !important;
 }

 main#bs-5 .mb-5 {
   margin-bottom: 3rem !important;
 }

 main#bs-5 .my-5 {
   margin-top: 3rem !important;
   margin-bottom: 3rem !important;
 }

 main#bs-5 .gap-3 {
   gap: 1rem !important;
 }

 main#bs-5 .gap-5 {
   gap: 3rem !important;
 }

 main#bs-5 .text-center {
   text-align: center !important;
 }

 main#bs-5 .text-end {
   text-align: end !important;
 }

 main#bs-5 .z-2 {
   z-index: 2 !important;
 }

 main#bs-5 .z-3 {
   z-index: 3 !important;
 }

 @media (min-width: 576px) {
   main#bs-5 .mt-sm-0 {
     margin-top: 0 !important;
   }

   .web p {
     width: 60%;
   }
 }

 @media (min-width: 992px) {
   main#bs-5 .mt-lg-0 {
     margin-top: 0 !important;
   }

   main#bs-5 .mt-lg-5 {
     margin-top: 3rem !important;
   }

   main#bs-5 .mb-lg-0 {
     margin-bottom: 0 !important;
   }
 }

 @media (min-width: 768px) {
   main#bs-5 .col-md-1 {
     flex: 0 0 auto;
     width: 8.33333333%;
   }

   main#bs-5 .col-md-5 {
     flex: 0 0 auto;
     width: 41.66666667%;
   }

   main#bs-5 .col-md-6 {
     flex: 0 0 auto;
     width: 50%;
   }

   main#bs-5 .col-md-7 {
     flex: 0 0 auto;
     width: 58.33333333%;
   }

   main#bs-5 .col-md-8 {
     flex: 0 0 auto;
     width: 66.66666667%;
   }

   main#bs-5 .mt-md-0 {
     margin-top: 0 !important;
   }

   main#bs-5 .offset-md-2 {
     margin-left: 16.66666667%;
   }

   main#bs-5 .col-md-auto {
     flex: 0 0 auto;
     width: auto;
   }

   main#bs-5 .gap-md-5 {
     gap: 3rem !important;
   }

   main#bs-5 .text-md-center {
     text-align: center !important;
   }

   .graph__percent {
     font-size: 2.5rem !important;
   }

   main#bs-5 .col-md-1 {
     flex: 0 0 auto;
     width: 8.33333333%;
   }

   main#bs-5 .col-md-11 {
     flex: 0 0 auto;
     width: 91.66666667%;
   }
 }

 @media (min-width: 992px) {
   main#bs-5 .col-lg-3 {
     flex: 0 0 auto;
     width: 25%;
   }

   main#bs-5 .col-lg-4 {
     flex: 0 0 auto;
     width: 33.33333333%;
   }

   main#bs-5 .col-lg-5 {
     flex: 0 0 auto;
     width: 41.66666667%;
   }

   main#bs-5 .col-lg-6 {
     flex: 0 0 auto;
     width: 50%;
   }

   main#bs-5 .col-lg-8 {
     flex: 0 0 auto;
     width: 66.66666667%;
   }

   main#bs-5 .col-lg-10 {
     flex: 0 0 auto;
     width: 83.33333333%;
   }

   main#bs-5 .flex-lg-row {
     flex-direction: row !important;
   }
 }

 @media (min-width: 1200px) {
   .col-xl-4 {
     flex: 0 0 auto;
     width: 33.33333333%;
   }
 }

 header:not(.site-header) {
   height: 60svh;
   position: relative;
   overflow: hidden;
 }

 .header-bcg {
   width: 100%;
   height: 100%;
   background-color: var(--wh);
   overflow: hidden;
 }

 .header-bcg__before,
 .header-bcg__after {
   width: 100%;
   height: 100%;
   position: absolute;
 }

 .header-bcg__after {
   background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 200px), url(/media/cases/esthe/headr_celek_plny.webp);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
 }

 .header-bcg__before {
   background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 400px), url(/media/cases/esthe/headr_celek_outline.webp);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
 }

 .header-bcg__after.en {
   background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 200px), url(/media/cases/esthe/header-after-en.webp);
 }

 .header-bcg__before.en {
   background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 400px), url(/media/cases/esthe/header-before-en.webp);
 }

 .header-bcg svg line {
   stroke: white;
   stroke-width: 2px;
 }

 .header-bcg svg {
   position: absolute;
   top: 0;
   left: -1px;
   width: 100%;
   height: 100%;
   display: none;
 }

 /* digitalizace */
 .dig-head {
   color: white;
   background-color: var(--prim);
   padding: 10vh 0 10vh 0;
   position: relative;
   z-index: 2;
 }


 .dig-head__h {
   font-weight: 100 !important;
   color: white;
   opacity: 0;
 }

 .dig-head__text {
   font-weight: 200;
   opacity: 0;
 }

 main#bs-5 .dig-head__text p {
   font-size: 18px;
 }

 .dig-head__h.anim,
 .dig-head__text.anim {
   animation: slide-dwn 0.5s ease-in-out forwards;
 }

 .dig-head::after {
   content: url(/media/cases/esthe/vlnkaBTop.svg);
   position: absolute;
   left: -1vw;
   bottom: 0;
   transform: translateY(90%);
   width: 101vw;
   height: auto;
 }

 /* web */
 .web {
   background: linear-gradient(180deg, rgb(34, 62, 126) -2%, rgba(90, 100, 127, 0.4) 50%), url(/media/cases/esthe/web_pozadi_foto.webp) no-repeat center center;
   background-size: cover;
   padding: 10vh 0;
   position: relative;
   overflow: hidden;
 }

 .web h2,
 .metrics h2 {
   color: white !important;
 }

 .web p {
   color: white;
   font-weight: 200;
   margin: 0 auto;
   font-size: 24px;
 }

 .web::after {
   content: url(/media/cases/esthe/vlnkaWBot.svg);
   position: absolute;
   left: -1vw;
   bottom: -2px;
   width: 101vw;
   transform: translateY(15%);
   height: auto;
   z-index: 0;
 }

 .web-window {
   border-radius: 30px;
   overflow: hidden;
   aspect-ratio: 16/10;
   padding: 0.75rem;
   border: 1px solid var(--wh);
   box-shadow: var(--shadow);
   position: relative;
   z-index: 3;
   display: flex;
   flex-direction: column;
   gap: .75rem;
 }

 .web-window--blue {
   border: 1px solid var(--prim);
   aspect-ratio: 1;
 }

 .web-window--portrait {
   aspect-ratio: 10/15;
   position: relative;
   z-index: 4;
   box-shadow: none;
 }

 .web-window--portrait img {
   opacity: 0.95;
 }

 .web-window .web-window__bar {
   display: flex;
   width: 100%;
   gap: 10px;
   padding-left: 20px;
   align-items: center;
   z-index: 2;
   position: relative;
   min-height: 15px;
 }

 .web-window .overflow-hidden {
   flex: 1;
 }

 .web-window .web-window__bar .point {
   display: block;
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background-color: var(--wh);
 }

 .web-window--blue .web-window__bar .point {
   background-color: var(--prim);
 }

 .web-window .overflow-hidden {
   border-radius: 0 0 var(--br) var(--br);
 }

 .web-window__img {
   width: 100%;
   height: auto;
 }

 .web-window__vid {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
 }

 .media-fce.anim .web-window__img {
   animation: article-scroll 17500ms ease-in-out infinite;
 }

 .media-fce__text {
   opacity: 0;
   display: flex;
   flex-direction: column;
 }

 .media-fce.anim .media-fce__text {
   animation: slide-dwn 0.5s ease-in-out forwards;
 }

 .media-fce {
   padding: 10vh 0;
 }

 .media-fce::after {
   content: url(/media/cases/esthe/vlnkaBBot.svg);
   position: absolute;
   left: -1vw;
   bottom: -5px;
   width: 102vw;
   height: auto;
 }

 /* soc */
 .soc,
 .media-fce {
   color: var(--prim);
   position: relative;
   overflow: hidden;
 }

 .media-fce {
   background: linear-gradient(180deg, #dee2ed 0%, #f2edf1 40%);
 }

 .media-fce p {
   font-size: 24px;
 }

 .soc {
   background: linear-gradient(180deg, var(--wh) 0%, #f2f3f7 40%);
 }

 .soc p {
   font-size: 24px;
 }

 .soc-icons {
   margin-top: 15rem !important;
   position: relative;
   gap: 5rem;
 }

 .soc-icons::before,
 .soc-icons::after {
   content: none;
 }

 .soc-icons div img {
   max-height: 80px;
   height: 10vw;
   width: auto;
 }

 .soc-icons div span {
   font-size: 16px;
 }

 .swiper--stories,
 .swiper--marketing {
   clip-path: polygon(0% 0%, 0% 0%, 0% 10.189%, 0% 22.077%, 0% 35.01%, 0% 48.336%, 0% 61.403%, 0% 73.557%, 0% 84.147%, 0% 92.519%, 0% 98.021%, 0% 100%, 100% 100%, 100% 0%, 100% 0%, 99.483% 0%, 98.041% 0%, 95.838% 0%, 93.04% 0%, 89.81% 0%, 86.314% 0%, 82.716% 0%, 79.18% 0%, 75.871% 0%, 72.953% 0%, 72.953% 0%, 72.558% 0.003%, 72.203% 0.015%, 71.889% 0.042%, 71.616% 0.088%, 71.384% 0.16%, 71.193% 0.262%, 71.044% 0.4%, 70.938% 0.579%, 70.874% 0.804%, 70.852% 1.081%, 70.852% 1.081%, 70.809% 1.403%, 70.672% 1.753%, 70.427% 2.116%, 70.061% 2.478%, 69.563% 2.823%, 68.918% 3.138%, 68.114% 3.408%, 67.139% 3.618%, 65.978% 3.755%, 64.62% 3.804%, 35.38% 3.804%, 35.38% 3.804%, 34.022% 3.755%, 32.862% 3.618%, 31.886% 3.408%, 31.082% 3.138%, 30.437% 2.823%, 29.939% 2.478%, 29.574% 2.116%, 29.329% 1.753%, 29.191% 1.403%, 29.148% 1.081%, 29.148% 1.081%, 29.127% 0.804%, 29.062% 0.579%, 28.956% 0.4%, 28.807% 0.262%, 28.617% 0.16%, 28.385% 0.088%, 28.111% 0.042%, 27.797% 0.015%, 27.442% 0.003%, 27.047% 0%);
   aspect-ratio: 9/17;
   border-radius: 2rem;
 }

 .swiper--stories .swiper-slide,
 .swiper--marketing .swiper-slide {
   object-fit: cover;
 }

 .swiper-cube {
   overflow: hidden !important;
 }

 .swiper-pagination--stories.swiper-pagination {
   grid-template-columns: repeat(3, 1fr);
   display: grid;
   grid-gap: 0.5rem;
   bottom: 2rem;
   transform: translateY(-50%);
   padding: 0 5rem;
 }

 .swiper-pagination--stories .swiper-pagination-bullet {
   width: 100%;
 }

 .soc__story {
   border: 2px solid var(--prim);
   border-radius: 2rem;
   padding: 0.75rem;
   position: relative;
   box-shadow: var(--shadow);
 }

 .swiper-pagination--stories .swiper-pagination-bullet {
   width: 100%;
   height: 4px;
   border-radius: 0;
   position: relative;
   overflow: hidden;
 }

 .swiper-pagination--stories .swiper-pagination-bullet::before {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
 }

 #bs-5 .swiper-pagination--stories .swiper-pagination-bullet:not(.swiper-pagination-bullet-active)+.swiper-pagination-bullet:not(.swiper-pagination-bullet-active),
 #bs-5 .swiper-pagination--stories .swiper-pagination-bullet:first-child:not(.swiper-pagination-bullet-active) {
   background: #9698ab;
   opacity: 1;
 }

 #bs-5 .swiper-pagination--stories .swiper-pagination-bullet-active+.swiper-pagination-bullet+.swiper-pagination-bullet:nth-child(3) {
   background: rgb(0, 0, 0);
   opacity: 0.2;
 }

 #bs-5 .swiper-pagination--stories .swiper-pagination-bullet-active {
   background: rgb(199, 204, 219);
 }

 #bs-5 .swiper-pagination--stories .swiper-pagination-bullet-active::before {
   background-color: #9698ab;
   animation: slide-progress 2s cubic-bezier(0.3, 0, 0.3, 1) forwards;
 }

 #bs-5 .swiper-paused .swiper-pagination--stories .swiper-pagination-bullet-active::before {
   animation-play-state: paused;
 }

 @keyframes slide-progress {
   0% {
     transform: translateX(-100%);
   }

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

 .soc__story .swiper-button-prev {
   left: 4%;
 }

 .soc__story .swiper-button-next {
   right: 4%;
 }

 .row--soc {
   gap: 5rem;
 }

 .insta-post {
   display: flex;
 }

 .insta-post__imgs img {
   width: 100%;
   height: auto;
   object-fit: cover;
   object-position: center;
 }

 .insta-post__imgs img {
   width: 100%;
   height: auto;
 }

 .insta-post__comments {
   width: auto;
   height: 100%;
   display: none;
 }

 .soc h2.anim {
   animation: slide-dwn 0.5s ease-in-out forwards;
 }

 .soc .soc__text {
   opacity: 0;
 }

 .soc__text.anim {
   animation: slide-dwn 0.5s ease-in-out forwards;
 }

 .caption {
   display: block;
   width: auto !important;
   position: absolute;
 }

 .caption__circle {
   position: absolute;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: var(--prim);
   top: -1em;
   left: -2px;
   opacity: 0;
 }

 .caption__lines {
   position: absolute;
   top: -1rem;
   right: 0;
 }

 .caption.anim .caption__circle {
   animation: grow 0.2s ease forwards;
 }

 .caption.anim .caption__lines::before {
   animation: line 0.2s ease forwards;
   animation-delay: 0.2s;
 }

 .caption.anim .caption__lines::after {
   animation: line 0.2s ease forwards;
   animation-delay: 0.4s;
 }

 .caption__lines::before,
 .caption__lines::after {
   content: "";
   display: block;
   position: absolute;
   height: 1px;
   background-color: var(--prim);
   background-size: 300% 100%;
   background-position: 0;
   opacity: 0;
   transform-origin: right;
 }

 .caption__lines::before {
   width: 100px;
   left: 0;
   bottom: 1em;
   transform-origin: bottom left;
   transform: rotateZ(-135deg);
   transition: background-position 500ms ease;
 }

 .caption__lines::after {
   width: 50px;
   top: -87px;
   left: -121px;
 }

 .caption__text {
   position: absolute;
   top: -107px;
   left: -150px;
   font-size: 20px;
   opacity: 0;
   transition: 0.2s ease;
   transition-delay: 0.6s;
   font-weight: bold;
 }

 .caption.anim .caption__text {
   opacity: 1;
 }

 /* kampan */
 .campaign {
   background-color: var(--wh);
   color: var(--prim);
   padding: 5vh 0;
   position: relative;
   z-index: 2;
   margin-top: -6rem;
   overflow: hidden;
 }

 .campaign p {
   font-size: 24px;
 }

 .campaign .container {
   position: relative;
   z-index: 5;
 }

 .campaign>.container>.row {
   gap: 5rem;
 }

 .swiper--bcg {
   position: absolute !important;
   width: 100%;
   height: 100%;
   top: 0;
   z-index: 3;
   border-radius: 0;
   opacity: 0.4;
   clip-path: none;
 }

 .swiper--bcg::after {
   content: "";
   position: absolute;
   z-index: 4;
   background: url("/media/cases/esthe/pozadi_kampan_prechod.svg");
   background-size: cover;
   width: 100%;
   height: 100%;
   top: 0;
 }

 .swiper-slide--marketing {
   display: flex !important;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   gap: 2.5rem;
   position: relative;
   padding: 3rem;
   background: url("/media/cases/esthe/kampane_pozadi_ramecku.svg") no-repeat center center;
   background-size: cover;
   text-align: center;
 }

 .swiper-slide--marketing img {
   width: 60%;
   height: auto;
 }

 .swiper-slide--marketing q,
 .swiper-slide--marketing p {
   font-size: 15px !important;
 }

 .swiper-slide--marketing h4 {
   font-size: 1.5rem;
 }

 .swiper-slide--marketing q:before,
 .swiper-slide--marketing q:after {
   content: '"';
 }

 .swiper-pagination--marketing.swiper-pagination {
   bottom: -4rem;
 }

 .campaign__text.hid {
   opacity: 0;
 }

 .campaign__text {
   margin-top: 6rem !important;
 }

 .campaign__text.anim {
   animation: slide-dwn 0.5s ease-in-out forwards;
 }

 /* Metrics */
 .metrics {
   padding: 10vh 0 10vh 0;
   position: relative;
   overflow: hidden;
 }

 /* SVG overlay sits above the video; its partial transparency lets the video show through */
 .metrics::before {
   content: "";
   position: absolute;
   inset: 0;
   background: url(/media/cases/esthe/prechod_ruce.svg) center center / cover no-repeat;
   z-index: 1;
   pointer-events: none;
 }

 .metrics .container {
   position: relative;
   z-index: 2;
 }

 .metrics video {
   position: absolute;
   width: 110%;
   height: 110%;
   object-fit: cover;
   object-position: center;
   z-index: 0;
   top: 0;
   filter: opacity(0.6);
 }

 main#bs-5 .metric p {
   color: var(--prim);
   font-size: 24px;
   text-align: center;
   font-weight: 700;
 }

 main#bs-5 p.metrics__text {
   color: white;
   font-size: 24px;
 }

 .graph__percent:after {
   content: "%";
 }

 .graph__percent {
   text-align: center;
   color: var(--prim) !important;
   font-weight: 400 !important;
 }

 #count-130::before {
   content: "+";
 }

 .graph {
   position: relative;
   padding: 10%;
   aspect-ratio: 1;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .graph svg {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
 }

 .graph svg circle {
   stroke: white;
   stroke-width: 0.5%;
   fill: none;
 }

 .graph svg .graph__circle {
   stroke-width: 6%;
   transform: rotate(-90deg);
   transform-origin: center;
   stroke: url(#GradientColor);
 }

 .graphs.anim>div:nth-child(1)>div>svg>circle.graph__circle {
   animation: graph300 ease 2s forwards;
 }

 .graphs.anim>div:nth-child(2)>div>svg>circle.graph__circle {
   animation: graph130 ease 2s forwards;
 }

 .graphs.anim>div:nth-child(3)>div>svg>circle.graph__circle {
   animation: graph83 ease 2s forwards;
 }

 /* reference */
 .reference {
   padding-bottom: 5vh;
   color: white;
   background-color: var(--prim);
   position: relative;
   z-index: 2;
   overflow: hidden;
 }

 .reference__person {
   display: block;
   font-weight: 700;
   line-height: 150%;
 }

 .reference__person span {
   display: block;
   font-weight: 100;
 }

 .quote img {
   width: 100%;
   height: auto;
 }

 .reference h2 {
   font-size: max(3rem, 5vw) !important;
   text-shadow:
     1px 1px 0 var(--wh),
     -1px 1px 0 var(--wh),
     -1px -1px 0 var(--wh),
     1px -1px 0 var(--wh);
   color: var(--prim) !important;
 }

 .reference blockquote {
   padding: unset;
   border: unset;
   font-size: 25px !important;
   line-height: 100%;
 }


 .media-fce b {
   border-radius: var(--br);
   border: 1px solid var(--prim);
   padding: 2.25rem;
   background: #f2edf1;
   user-select: none;
 }

 .media-fce strong {
   line-height: 150%;
   font-size: 24px;
   font-weight: 600;
 }

 /* footer */
 .footer-cta {
   background: linear-gradient(45deg, #dee2ed 0%, #f2edf1 40%);
   color: var(--prim);
   padding: 5vh 0;
 }

 .footer-cta a {
   color: #ffffff !important;
   text-decoration: none !important;
 }

 .footer-cta .btn-arrow {
   font-size: 18px;
   color: black !important;
 }

 .footer-cta__text p {
   font-size: max(2rem, 3vw) !important;
   color: var(--prim);
   line-height: 115%;
   font-weight: bold;
   opacity: 0;
 }

 .btn--footer-cta {
   background-color: transparent !important;
   color: var(--prim) !important;
   border: 2px solid var(--prim) !important;
   border-radius: 2rem !important;
   padding: 1.5rem 3rem !important;
   font-size: 2.25rem !important;
   transition: transform 300ms ease, background-color 300ms ease !important;
   text-decoration: none !important;
   display: inline-block;
   font-weight: 300;
   text-align: center;
 }

 .btn--footer-cta:hover {
   color: var(--wh) !important;
   background-color: var(--prim) !important;
 }

 .footer-cta.anim .footer-cta__text p {
   animation: slide-dwn 0.5s ease-in-out forwards;
 }

 .footer-cta.anim .btn--footer-cta {
   animation: slide-dwn 0.5s ease-in-out forwards !important;
   animation-delay: 0.5s;
 }

 .p-0 {
   padding: 0 !important;
 }

 /* Media Queries */
 @media screen and (min-width: 768px) {

   .swiper-slide--marketing q,
   .swiper-slide--marketing p {
     font-size: 20px;
   }

   .swiper-slide--marketing img {
     width: 80%;
   }

   .soc__story {
     border-radius: 4.75rem;
   }

   .swiper--marketing,
   .swiper--stories {
     border-radius: 4rem;
   }

   .swiper-slide--marketing h4 {
     font-size: 2rem;
   }

   .swiper--bcg {
     border-radius: 0;
   }

   .header-bcg svg {
     display: block;
   }

   .media-fce b {
     font-size: 24px;
   }
 }

 @media screen and (min-width: 992px) {
   .media-fce .container {
     margin-bottom: -7%;
   }

   .media-fce {
     padding: 10vh 0 25vh 0;
   }

   .soc__story .swiper-button-prev {
     left: -10%;
   }

   .soc__story .swiper-button-next {
     right: -10%;
   }

   header:not(.site-header) {
     height: 100svh;
   }

   .web-window .web-window__bar .point {
     width: 8px;
     height: 8px;
   }

   .media-fce b {
     opacity: 0;
   }

   .media-fce.anim b {
     animation: slide-up 0.5s ease-in-out forwards;
   }

   .campaign {
     clip-path: polygon(100% 0%, 100% 95.555%, 100% 95.555%, 99.546% 95.896%, 99.091% 96.222%, 98.636% 96.533%, 98.181% 96.829%, 97.726% 97.11%, 97.271% 97.377%, 96.815% 97.63%, 96.36% 97.869%, 95.904% 98.094%, 95.448% 98.305%, 95.448% 98.305%, 95.169% 98.428%, 94.889% 98.545%, 94.61% 98.658%, 94.331% 98.766%, 94.051% 98.869%, 93.772% 98.967%, 93.492% 99.061%, 93.213% 99.15%, 92.933% 99.234%, 92.654% 99.313%, 92.654% 99.313%, 92.168% 99.44%, 91.681% 99.554%, 91.195% 99.654%, 90.708% 99.741%, 90.222% 99.815%, 89.735% 99.876%, 89.249% 99.925%, 88.762% 99.961%, 88.276% 99.985%, 87.789% 99.998%, 87.789% 99.998%, 87.358% 99.999%, 86.927% 99.992%, 86.496% 99.976%, 86.065% 99.951%, 85.634% 99.918%, 85.204% 99.876%, 84.773% 99.827%, 84.342% 99.769%, 83.912% 99.704%, 83.481% 99.631%, 83.481% 99.631%, 83.152% 99.57%, 82.823% 99.505%, 82.494% 99.435%, 82.166% 99.362%, 81.837% 99.284%, 81.508% 99.202%, 81.18% 99.117%, 80.851% 99.027%, 80.523% 98.934%, 80.194% 98.837%, 80.194% 98.837%, 79.943% 98.76%, 79.691% 98.682%, 79.439% 98.601%, 79.188% 98.517%, 78.936% 98.432%, 78.685% 98.345%, 78.433% 98.256%, 78.182% 98.165%, 77.931% 98.072%, 77.679% 97.978%, 77.679% 97.978%, 77.522% 97.917%, 77.364% 97.856%, 77.207% 97.795%, 77.049% 97.732%, 76.892% 97.669%, 76.735% 97.605%, 76.577% 97.541%, 76.42% 97.476%, 76.263% 97.41%, 76.105% 97.343%, 76.105% 97.343%, 75.9% 97.256%, 75.694% 97.167%, 75.488% 97.077%, 75.282% 96.986%, 75.077% 96.893%, 74.871% 96.8%, 74.666% 96.706%, 74.461% 96.611%, 74.255% 96.515%, 74.05% 96.418%, 74.05% 96.418%, 73.753% 96.277%, 73.456% 96.133%, 73.16% 95.987%, 72.863% 95.84%, 72.567% 95.691%, 72.27% 95.54%, 71.974% 95.388%, 71.678% 95.235%, 71.382% 95.079%, 71.087% 94.923%, 71.087% 94.923%, 70.843% 94.793%, 70.6% 94.661%, 70.356% 94.53%, 70.113% 94.397%, 69.87% 94.263%, 69.627% 94.129%, 69.384% 93.994%, 69.141% 93.858%, 68.898% 93.721%, 68.655% 93.584%, 68.655% 93.584%, 68.461% 93.473%, 68.266% 93.362%, 68.071% 93.251%, 67.877% 93.139%, 67.682% 93.027%, 67.488% 92.915%, 67.294% 92.802%, 67.1% 92.689%, 66.905% 92.576%, 66.711% 92.462%, 66.711% 92.462%, 66.49% 92.332%, 66.268% 92.202%, 66.047% 92.071%, 65.826% 91.94%, 65.604% 91.809%, 65.383% 91.678%, 65.162% 91.546%, 64.942% 91.415%, 64.721% 91.283%, 64.5% 91.151%, 64.5% 91.151%, 64.27% 91.013%, 64.039% 90.874%, 63.809% 90.736%, 63.578% 90.598%, 63.348% 90.46%, 63.118% 90.321%, 62.888% 90.183%, 62.659% 90.045%, 62.429% 89.907%, 62.2% 89.769%, 62.2% 89.769%, 62.059% 89.685%, 61.918% 89.6%, 61.778% 89.516%, 61.637% 89.432%, 61.497% 89.348%, 61.356% 89.264%, 61.216% 89.18%, 61.076% 89.096%, 60.936% 89.012%, 60.796% 88.929%, 60.796% 88.929%, 60.663% 88.85%, 60.531% 88.771%, 60.398% 88.692%, 60.266% 88.613%, 60.134% 88.535%, 60.001% 88.457%, 59.869% 88.378%, 59.737% 88.3%, 59.605% 88.223%, 59.473% 88.145%, 59.473% 88.145%, 59.386% 88.094%, 59.299% 88.043%, 59.212% 87.992%, 59.125% 87.941%, 59.038% 87.89%, 58.951% 87.839%, 58.864% 87.788%, 58.777% 87.738%, 58.69% 87.687%, 58.604% 87.637%, 58.604% 87.637%, 58.357% 87.494%, 58.11% 87.352%, 57.864% 87.21%, 57.618% 87.069%, 57.372% 86.93%, 57.126% 86.791%, 56.88% 86.653%, 56.635% 86.516%, 56.39% 86.379%, 56.145% 86.244%, 56.145% 86.244%, 55.804% 86.058%, 55.464% 85.874%, 55.124% 85.692%, 54.784% 85.512%, 54.445% 85.335%, 54.106% 85.16%, 53.768% 84.988%, 53.43% 84.818%, 53.093% 84.651%, 52.756% 84.488%, 52.756% 84.488%, 52.257% 84.294%, 51.756% 84.106%, 51.254% 83.925%, 50.752% 83.749%, 50.249% 83.578%, 49.745% 83.414%, 49.24% 83.255%, 48.735% 83.102%, 48.229% 82.955%, 47.722% 82.813%, 47.722% 82.813%, 47.223% 82.68%, 46.723% 82.552%, 46.223% 82.429%, 45.723% 82.312%, 45.222% 82.201%, 44.72% 82.095%, 44.218% 81.994%, 43.715% 81.899%, 43.212% 81.81%, 42.708% 81.725%, 42.708% 81.725%, 42.144% 81.637%, 41.579% 81.556%, 41.014% 81.482%, 40.448% 81.415%, 39.882% 81.354%, 39.315% 81.3%, 38.749% 81.252%, 38.182% 81.212%, 37.614% 81.178%, 37.047% 81.151%, 37.047% 81.151%, 36.727% 81.138%, 36.407% 81.128%, 36.088% 81.12%, 35.768% 81.114%, 35.448% 81.11%, 35.128% 81.108%, 34.808% 81.109%, 34.488% 81.111%, 34.168% 81.116%, 33.849% 81.122%, 33.849% 81.122%, 33.411% 81.135%, 32.974% 81.151%, 32.537% 81.171%, 32.099% 81.195%, 31.662% 81.223%, 31.225% 81.255%, 30.788% 81.291%, 30.352% 81.331%, 29.915% 81.374%, 29.479% 81.422%, 29.479% 81.422%, 28.92% 81.488%, 28.362% 81.561%, 27.805% 81.64%, 27.247% 81.725%, 26.691% 81.816%, 26.134% 81.914%, 25.579% 82.018%, 25.023% 82.128%, 24.469% 82.245%, 23.914% 82.367%, 23.914% 82.367%, 23.229% 82.528%, 22.544% 82.698%, 21.861% 82.877%, 21.178% 83.066%, 20.497% 83.264%, 19.817% 83.472%, 19.139% 83.689%, 18.462% 83.916%, 17.786% 84.151%, 17.112% 84.396%, 17.112% 84.396%, 16.601% 84.589%, 16.09% 84.787%, 15.58% 84.99%, 15.071% 85.199%, 14.563% 85.413%, 14.056% 85.632%, 13.551% 85.857%, 13.046% 86.087%, 12.543% 86.322%, 12.041% 86.562%, 12.041% 86.562%, 11.725% 86.717%, 11.409% 86.873%, 11.094% 87.031%, 10.78% 87.192%, 10.466% 87.355%, 10.152% 87.519%, 9.84% 87.686%, 9.527% 87.855%, 9.215% 88.026%, 8.904% 88.199%, 8.904% 88.199%, 8.387% 88.492%, 7.871% 88.79%, 7.356% 89.095%, 6.844% 89.405%, 6.333% 89.72%, 5.823% 90.042%, 5.316% 90.369%, 4.81% 90.701%, 4.306% 91.039%, 3.804% 91.383%, 3.804% 91.383%, 3.606% 91.521%, 3.408% 91.659%, 3.211% 91.798%, 3.014% 91.938%, 2.817% 92.079%, 2.62% 92.221%, 2.424% 92.364%, 2.228% 92.507%, 2.033% 92.652%, 1.838% 92.797%, 1.838% 92.797%, 1.653% 92.936%, 1.468% 93.075%, 1.283% 93.215%, 1.099% 93.356%, 0.915% 93.498%, 0.732% 93.641%, 0.548% 93.784%, 0.365% 93.928%, 0.182% 94.073%, 0% 94.219%, 0% 0%);
     padding: 15vh 0;
   }

   .campaign .container {
     margin-bottom: 20vh;
   }

   .metrics {
     padding: 30vh 0 15vh;
     margin-top: -30vh;
   }

   .footer-cta {
     padding: 15vh 0;
   }

   .reference {
     padding-bottom: 15vh;
   }

   .insta-post__comments {
     display: block;
   }

   .web-window--blue:not(.web-window--portrait) {
     aspect-ratio: 16/10;
   }

   .header-bcg__before,
   .header-bcg svg {
     display: block;
   }

   .header-bcg__after {
     background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 400px), url(/media/cases/esthe/headr_celek_plny.webp);
   }

   .caption__lines::before {
     width: 210px;
   }

   .caption__lines::after {
     top: -165px;
     left: -199px;
   }

   .caption__text {
     top: -185px;
     left: -245px;
   }

   .web {
     padding: 30vh 0;
   }

 }

 @media screen and (min-width: 2100px) {
   .media-fce {
     padding: 10vh 0 33vh 0;

   }
 }

 @keyframes article-scroll {

   0%,
   8% {
     transform: translateY(0);
   }

   90%,
   95% {
     transform: translateY(-55%);
   }

   100% {
     transform: translateY(0);
   }
 }

 @keyframes slide-dwn {
   0% {
     transform: translateY(-100%);
     opacity: 0;
   }

   100% {
     transform: translateY(0);
     opacity: 1;
   }
 }

 @keyframes slide-up {
   0% {
     transform: translateY(100%);
     opacity: 0;
   }

   100% {
     transform: translateY(0);
     opacity: 1;
   }
 }

 @keyframes grow {
   0% {
     opacity: 0;
     width: 0;
     height: 0;
   }

   100% {
     opacity: 1;
     width: 8px;
     height: 8px;
   }
 }

 @keyframes line {
   0% {
     scale: 0;
     opacity: 0;
   }

   100% {
     scale: 1;
     opacity: 1;
   }
 }

 @keyframes graph300 {
   0% {
     stroke-dasharray: 0, 100;
   }

   33.3% {
     stroke-dasharray: 100, 31;
     transform: rotate(-90deg);
   }

   100% {
     transform: rotate(720deg);
   }
 }

 @keyframes graph130 {
   0% {
     stroke-dasharray: 0, 100;
   }

   76.9% {
     stroke-dasharray: 100, 31;
     transform: rotate(-90deg);
   }

   100% {
     transform: rotate(108deg);
   }
 }

 @keyframes graph83 {
   0% {
     stroke-dasharray: 0, 100;
   }

   100% {
     stroke-dasharray: 83, 31;
   }
 }