@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  src: url("/media/cases/lion/fonts/Montserrat-Light.ttf");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: url("/media/cases/lion/fonts/Montserrat-Regular.ttf");
}

@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 300;
  src: url("/media/cases/lion/fonts/Montserrat-LightItalic.ttf");
}

@font-face {
  font-family: "Montserrat";
  font-style: medium;
  font-weight: 500;
  src: url("/media/cases/lion/fonts/Montserrat-Medium.ttf");
}


@font-face {
  font-family: "Montserrat";
  font-style: bold;
  font-weight: 600;
  src: url("/media/cases/lion/fonts/Montserrat-SemiBold.ttf");
}

@font-face {
  font-family: "Montserrat";
  font-style: bold;
  font-weight: 700;
  src: url("/media/cases/lion/fonts/Montserrat-Bold.ttf");
}

@font-face {
  font-family: "Myriad Pro";
  font-style: normal;
  font-weight: 400;
  src: url("/media/cases/lion/fonts/MyriadPro-Regular.otf");
}

.no-drag {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 60px;
  scroll-margin-top: 60px;
}

html.fixed {
  overflow: hidden;
}

body {
  font-family: "Montserrat", sans-serif, monospace;
  background-color: #01172C !important;
  color: #FFF;
  scroll-behavior: smooth;
  width: 100vw;
  overflow-x: clip;
}

footer {
  color: #4f4f4f;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.1;
}

h1 strong,
h2 strong,
h3 strong,
h4 strong {
  color: #41B39C;
}

h1 {
  font-size: 20vw;
  letter-spacing: 2px;
  padding: 0 15px;
  letter-spacing: unset;
  font-weight: 700;
  color: #01172C;
}

@supports (mix-blend-mode: difference) {
  h1 {
    color: #01c9cf;
    mix-blend-mode: difference;
    text-shadow: 0 0 17px rgba(85, 85, 85, 0.2);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: visible;
  }
}

h2 {
  font-size: clamp(40px, 4vh, 70px);
  font-weight: 700;
  letter-spacing: unset;
}

h4 {
  font-size: 38px;
  letter-spacing: unset;
}

.fs-1 {
  font-size: 84px;
}

@media (max-width: 1200px) {

  h1,
  .fs-1 {
    font-size: 140px;
  }

  h2 {
    font-size: 54px;
  }

  h3 {
    font-size: 48px;
  }

  h4 {
    font-size: 32px;
  }
}

@media (max-width: 560px) {

  h1,
  .fs-1 {
    font-size: 100px;
  }

  h3 {
    font-size: 32px;
  }
}

b {
  font-weight: 600;
}

.mentol {
  color: #41B39C;
}

.petrol {
  color: #01172C;
}

.container-lion {
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
}

@media (max-width: 1500px) {
  .container-lion {
    padding: 0 15px;
  }
}

.btn-lion {
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 0.45em 1.35em;
  font-size: 2.25rem;
  transition: transform 300ms ease, background-color 300ms ease;
  font-weight: 300;
}

.btn-lion.arrow::before {
  content: "";
  display: inline-block;
  vertical-align: text-top;
  width: 1.25em;
  height: 1.25em;
  margin-right: 6px;
  -webkit-mask-image: url("/media/cases/lion/icons/play.svg");
  mask-image: url("/media/cases/lion/icons/play.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: #fff;
}

.btn-lion:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}

section {
  position: relative;
}

.section-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: -2;
}

.section-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.section-mask.grad-1 {
  background-image: linear-gradient(180deg, #41B39C 0%, rgba(60, 166, 146, 0.71) 7%, rgba(48, 133, 122, 0.69) 12%, rgba(29, 80, 84, 0.1) 48%, rgba(1, 23, 44, 0) calc(105% - 12vw), #01172C calc(115% - 12vw));
}

@media (max-width: 1500px) {
  .section-mask.grad-1 {
    background-image: linear-gradient(180deg, #41B39C 0%, rgba(60, 166, 146, 0.71) 7%, rgba(48, 133, 122, 0.69) 12%, rgba(29, 80, 84, 0.1) 48%, rgba(1, 23, 44, 0) calc(95% - 12vw), #01172C calc(100% - 9vw));
  }
}

.section-mask.grad-2 {
  background-image: linear-gradient(180deg, rgba(65, 179, 156, 0) 60%, #41B39C 98%);
}

header:not(.site-header) {
  display: flex;
  /* isolation root: contains the negative-z video/mask AND forms the blend
     group so the h1's mix-blend-mode: difference blends against them.
     (video z-index -2  <  mask z-index -1  <  headings in normal flow) */
  isolation: isolate;
  position: relative;
  min-height: 100vh;
  padding-top: 0;
  padding-bottom: 10vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

header:not(.site-header) .btn-lion {
  margin-top: 8rem;
}

@media (max-width: 560px) {
  header:not(.site-header) {
    min-height: 70vh;
  }
}

header:not(.site-header) h2 {
  font-size: 3vw;
  margin-top: 0;
  display: block;
  font-weight: 500;
  color: #01172C;
  letter-spacing: 1px;
}

@media (max-width: 768px) {
  header:not(.site-header) h2 {
    font-size: 22px;
  }
}

.btn-scroll {
  margin-top: 12vh;
  font-size: 2.5rem;
  background-color: transparent;
}

.btn-scroll svg {
  width: 3.5em;
  height: 3.5em;
}

.btn-scroll svg .wheel {
  transition: transform 500ms ease;
}

.btn-scroll:hover {
  background-color: transparent;
}

.btn-scroll:hover svg .wheel {
  transform: translateY(6px);
}

.btn-scroll:focus,
.btn-scroll:active {
  box-shadow: none;
  background-color: transparent;
}

.web-window {
  border-radius: 30px;
  overflow: hidden;
}

.web-window .web-window-bar {
  display: flex;
  width: 100%;
  height: 38px;
  min-height: 38px;
  background-color: #c0c0c0;
  gap: 10px;
  padding-left: 20px;
  align-items: center;
  z-index: 2;
  box-shadow: 0px 12px 20px -8px rgba(0, 0, 0, 0.15) inset;
}

.web-window .web-window-bar .point {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #f5f5f5;
}

@media (max-width: 768px) {
  .web-window:not(.mobile-frame) {
    border-radius: 20px;
  }
}

.section-1 {
  text-align: center;
  padding-top: 10vh;
  padding-bottom: 36vh;
  overflow-x: hidden;
  /* isolation root so the negative-z layers stay contained inside the section:
     image z-index -2  <  section-mask z-index -1  <  text in normal flow */
  isolation: isolate;
}

.section-1 .container-lion {
  max-width: 800px;
}

.section-1 h3 {
  max-width: 530px;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  font-size: 58px;
  font-weight: 700;
  padding-top: 10px;
}

.section-1 p {
  font-size: 27.5px;
  margin-top: 1.65em;
  margin-bottom: 1.5em;
  letter-spacing: 1px;
  line-height: 1.2em;
  font-weight: 300;
}

.section-1 p strong {
  font-weight: 500;
}

@media (max-width: 560px) {
  .section-1 h3 {
    max-width: 320px;
    font-size: 40px;
  }

  .section-1 p {
    font-size: 18px;
  }
}

.section-1 .section-bg {
  object-position: center -12vw;
  object-fit: cover;
  width: 145%;
  /* center the 145%-wide image box: (100% - 145%) / 2 = -22.5% */
  left: 2.5%;
  transform-origin: bottom center;
}

@media (max-width: 1500px) {
  .section-1 .section-bg {
    object-position: center -7vw;
  }
}

@media (max-width: 991px) {
  .section-1 {
    padding-bottom: 15vh;
  }
}

.section-2 {
  text-align: center;
  margin-top: -2vh;
  padding-bottom: 20vh;
  /* .section-3 below pulls up over this section (margin-top: -33vh) and, as a
     later isolated stacking context, would paint its section-mask on top of
     section-2's content. Lift section-2 (position:relative from the global
     `section` rule) into a higher stacking context so its content stays above
     that mask. */
  z-index: 1;
}

@media (max-width: 560px) {
  .section-2 {
    padding-bottom: 10vh;
  }
}

.section-2 h2 {
  max-width: 930px;
  margin-left: auto;
  margin-right: auto;
}

.section-2 h2 .strike {
  position: relative;
  display: inline-block;
}

.section-2 h2 .strike::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 10%;
  background-color: #fff;
  top: 53%;
  left: 0;
}

@media (max-width: 560px) {
  .section-2 h2 {
    margin-bottom: 2em;
  }
}

.section-2 .fs-1 {
  font-size: 80px;
}

@media (max-width: 1200px) {
  .section-2 .fs-1 {
    font-size: 64px;
  }
}

@media (max-width: 560px) {
  .section-2 .fs-1 {
    font-size: 40px;
    padding: 0 8px;
  }
}

.section-2 .logo-inspect {
  position: relative;
  margin-top: 40px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.section-2 .logo-inspect svg {
  width: 100%;
  max-height: 600px;
}

@media (max-width: 560px) {
  .section-2 .logo-inspect svg {
    margin-top: 48px;
  }
}

.section-2 .logo-inspect .caption {
  position: absolute;
  text-align: start;
  max-width: 380px;
  left: -70px;
  top: 95px;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 1px;
  z-index: 2;
}

.section-2 .logo-inspect .caption p {
  line-height: 1.15em;
}

@media (max-width: 991px) {
  .section-2 .logo-inspect .caption {
    font-size: 28px;
    max-width: 250px;
    left: -35px;
  }
}

@media (max-width: 768px) {
  .section-2 .logo-inspect .caption {
    left: 0;
  }
}

@media (max-width: 560px) {
  .section-2 .logo-inspect .caption {
    top: -30px;
    font-size: 20px;
  }
}

.section-2 .points {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.section-2 .points .point {
  position: absolute;
  transition: opacity 600ms ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
}

.section-2 .points .point .lion-tooltip-content {
  color: #41B39C;
}

.section-2 .points .point .number {
  position: relative;
  font-size: 1.5rem;
  display: flex;
  width: 62px;
  height: 62px;
  background-color: #41B39C;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  transition: all 400ms ease;
  z-index: 2;
}

.section-2 .points .point .number::before {
  content: "";
  position: absolute;
  transform-origin: center center;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #41B39C;
  border-radius: 50%;
  z-index: -1;
  animation: number-pulse 2000ms ease infinite;
  pointer-events: none;
}

.section-2 .points .point .number:hover {
  transform: scale(1.4);
  background-color: #fff;
  color: #41B39C;
}

.section-2 .points .point .number:hover::before {
  opacity: 0;
}

.section-2 .points .point.num-1 {
  right: 6%;
  top: 30%;
}

.section-2 .points .point.num-1 .number::before {
  animation-delay: 100ms;
}

.section-2 .points .point.num-2 {
  right: 22%;
  bottom: 25%;
}

.section-2 .points .point.num-2 .number::before {
  animation-delay: 700ms;
}

.section-2 .points .point.num-3 {
  left: 40%;
  bottom: 15%;
}

.section-2 .points .point.num-3 .number::before {
  animation-delay: 1300ms;
}

.section-2 .points .point.num-4 {
  right: 0%;
  bottom: 10%;
}

.section-2 .points .point.num-4 .number::before {
  animation-delay: 2000ms;
}

@media (max-width: 991px) {
  .section-2 .points .point.num-1 {
    right: 16%;
  }

  .section-2 .points .point.num-2 {
    right: 32%;
  }

  .section-2 .points .point.num-3 {
    left: 30%;
  }

  .section-2 .points .point.num-4 {
    right: 10%;
  }
}

.section-2 .points .point:not(.anim) {
  opacity: 0;
}

@media (max-width: 1200px) {
  .section-2 .points .point.break-bottom-left .lion-tooltip-content {
    left: unset;
    top: 100%;
    right: calc(100% + 70px);
  }

  .section-2 .points .point.break-bottom-left .tooltip-line {
    transform: scale(-1);
    top: unset;
    right: unset;
    bottom: -60%;
    left: -115%;
  }
}

@media (max-width: 991px) {
  .section-2 .points .point.break-top-left .lion-tooltip-content {
    left: unset;
    right: calc(100% + 70px);
  }

  .section-2 .points .point.break-top-left .tooltip-line {
    transform: scaleX(-1);
    right: unset;
    left: -115%;
  }
}

@media (max-width: 560px) {
  .section-2 .points {
    display: flex;
    flex-direction: column;
    gap: 2vh;
    top: 60px;
  }

  .section-2 .points .point {
    display: flex;
    position: unset;

    div {
      display: flex;
    }
  }

  .section-2 .points .point .number {
    font-size: 1.75rem;
    flex-shrink: 0;
  }

  .section-2 .points .point .lion-tooltip-content {
    position: unset;
    display: flex;
    align-items: center;
    margin-left: 24px;
    pointer-events: none;
    transform: none !important;
    margin-bottom: 0;
    font-size: 18px;
    color: #41B39C;
    font-weight: 600;
  }

  .section-2 .points .point .tooltip-line {
    display: none;
  }
}

@keyframes number-pulse {
  0% {
    transform: scale(0.95);
  }

  50% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(0.95);
  }
}

.section-3 {
  position: relative;
  padding-bottom: 5vh;
  overflow-x: hidden;
  margin-top: -33vh;
  padding-top: 33vh;
  pointer-events: none;
  /* isolation root so this section's negative-z background image isn't
     overpainted by later sections' backgrounds (also z-index -2):
     image z-index -2  <  section-masks z-index -1  <  content in normal flow */
  isolation: isolate;
}

.section-3 .brand-container {
  margin: 0 auto;
  text-align: start;
  max-width: 830px;
  padding: 0 15px;
  font-size: 16px;
  pointer-events: all;
}

.section-3 .brand-container h4 {
  margin-bottom: 24px;
  color: #41B39C;
}

.section-3 .brand-container p {
  margin-top: 20px;
  max-width: 330px;
  font-weight: 300;
}

.section-3 .brand-container p b {
  font-weight: 500;
}

.section-3 .brand-container .mentol {
  font-weight: 500;
}

.section-3 .section-bg {
  object-fit: contain;
  width: 62%;
  height: auto;
  top: 0;
  right: -7vw;
  left: unset;
}

@media (max-width: 560px) {
  .section-3 .section-bg {
    display: none;
  }
}

.section-3 .grad-custom {
  top: 0;
  background-image: linear-gradient(0deg, transparent 0%, rgba(1, 23, 44, 0.3) 85%, rgba(1, 23, 44, 0.7) 92%, #01172C 100%);
}

.section-3 .grad-custom-2 {
  background-image: linear-gradient(0deg, #41B39C 0%, rgba(61, 169, 149, 0.74) 9%, rgba(50, 144, 131, 0.58) 20%, rgba(34, 104, 102, 0.42) 37%, rgba(11, 48, 62, 0.39) 67%, rgba(1, 23, 44, 0) 79%);
}

.section-3 .brand-section {
  display: flex;
  justify-content: space-between;
  gap: 6em;
  margin-top: 25vh;
}

.section-3 .brand-section .brand-logo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex-basis: 35%;
}

.section-3 .brand-section .brand-logo .logo-gallery {
  position: relative;
  display: flex;
  justify-content: center;
}

.section-3 .brand-section .brand-logo .logo-gallery img {
  position: absolute;
  width: 200px;
  height: unset;
  min-height: 230px;
  min-width: 200px;
  top: 50%;
  left: 0;
  transition: opacity 700ms ease, transform 950ms ease;
}

.section-3 .brand-section .brand-logo .logo-gallery img:not(.active) {
  opacity: 0;
}

.section-3 .brand-section .brand-logo .logo-gallery img.active {
  transform: translateY(0);
}

.section-3 .brand-section .brand-colors {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-basis: 40%;
}

.section-3 .brand-section .brand-colors img {
  margin-top: 40px;
}

.section-3 .brand-section h4 {
  margin: 10px 0 14px;
}

.section-3 .brand-section img {
  height: 230px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
}

.section-3 .brand-section .content {
  margin-top: -30px;
}

@media (max-width: 560px) {
  .section-3 .brand-section {
    flex-direction: column-reverse;
    margin-top: 10vh;
  }

  .section-3 .brand-section img {
    height: 150px;
  }

  .section-3 .brand-section .brand-logo {
    flex-basis: 100%;
    gap: 1em;
  }

  .section-3 .brand-section .brand-logo .logo-gallery {
    width: 100%;
    height: 150px;
    margin-bottom: 50px;
  }

  .section-3 .brand-section .brand-logo .logo-gallery img {
    top: 0;
    left: 50%;
    width: auto;
    height: auto;
    max-width: 316px;
    min-height: 150px;
  }

  .section-3 .brand-section .brand-logo .logo-gallery img:not(.active) {
    opacity: 0;
    transform: translate(-50%, 15px);
  }

  .section-3 .brand-section .brand-logo .logo-gallery img.anim-top {
    transform: translate(-50%, -15px);
  }

  .section-3 .brand-section .brand-logo .logo-gallery img.active {
    transform: translate(-50%, 0);
  }

  .section-3 .brand-section .brand-colors {
    flex-basis: 100%;
    margin-top: 0px;
  }
}

.section-3 .brand-logo-points {
  margin-top: 25vh;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px;
}

.section-3 .brand-logo-points .item {
  text-align: center;
  flex: 1 1 0;
}

.section-3 .brand-logo-points .item .item-logo {
  display: flex;
  justify-content: center;
  perspective: 600px;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  height: 135px;
}

.section-3 .brand-logo-points .item .item-logo:not(:hover) {
  animation: logo-pulse 2500ms infinite;
}

.section-3 .brand-logo-points .item .item-logo .front,
.section-3 .brand-logo-points .item .item-logo .back {
  height: inherit;
  position: absolute;
  top: 0;
  z-index: 900;
  transform: rotateX(0deg) rotateY(0deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: all 0.4s ease-in-out;
}

.section-3 .brand-logo-points .item .item-logo .front {
  z-index: 900;
  transform: rotateX(0deg) rotateY(0deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.section-3 .brand-logo-points .item .item-logo .front img {
  opacity: 1;
}

.section-3 .brand-logo-points .item .item-logo .back {
  z-index: 1000;
  transform: rotateY(-180deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.section-3 .brand-logo-points .item .item-logo:hover .front {
  z-index: 900;
  transform: rotateY(180deg);
}

.section-3 .brand-logo-points .item .item-logo:hover .back {
  z-index: 1000;
  transform: rotateX(0deg) rotateY(0deg);
}

.section-3 .brand-logo-points .item img {
  width: 135px;
  height: 135px;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
}

@media (max-width: 991px) {
  .section-3 .brand-logo-points .item img {
    width: 110px;
    height: 110px;
  }
}

.section-3 .brand-logo-points .item h5 {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  margin: 38px 0 16px;
}

.section-3 .brand-logo-points .item p {
  font-weight: 400;
  color: #01172C;
  max-width: 250px;
}

.section-3 .brand-logo-points .item:nth-child(1),
.section-3 .brand-logo-points .item:nth-child(2) {
  position: relative;
}

.section-3 .brand-logo-points .item:nth-child(1) .plus,
.section-3 .brand-logo-points .item:nth-child(2) .plus {
  display: flex;
  position: absolute;
  top: 60px;
  right: -24px;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.section-3 .brand-logo-points .item:nth-child(1) .plus::after,
.section-3 .brand-logo-points .item:nth-child(2) .plus::after {
  content: "";
  display: block;
  position: absolute;
  width: 3px;
  height: 100%;
  border-radius: 10px;
  background-color: rgba(1, 23, 44, 0.9);
}

.section-3 .brand-logo-points .item:nth-child(1) .plus::before,
.section-3 .brand-logo-points .item:nth-child(2) .plus::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  border-radius: 5px;
  height: 3px;
  background-color: rgba(1, 23, 44, 0.9);
}

@media (max-width: 991px) {

  .section-3 .brand-logo-points .item:nth-child(1) .plus,
  .section-3 .brand-logo-points .item:nth-child(2) .plus {
    top: 40px;
  }
}

@media (max-width: 560px) {
  .section-3 .brand-logo-points {
    flex-direction: column;
    margin-top: 8vh;
  }

  .section-3 .brand-logo-points .item .item-logo {
    height: 110px;
  }

  .section-3 .brand-logo-points .item h5 {
    margin: 15px 0 5px;
  }

  .section-3 .brand-logo-points .item p {
    margin: 0 0 24px;
    max-width: unset;
  }

  .section-3 .brand-logo-points .item:nth-child(1),
  .section-3 .brand-logo-points .item:nth-child(2) {
    position: relative;
  }

  .section-3 .brand-logo-points .item:nth-child(1) .plus,
  .section-3 .brand-logo-points .item:nth-child(2) .plus {
    display: none;
  }
}

@keyframes logo-pulse {
  0% {
    transform: scale(0.94);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.94);
  }
}

.section-4 {
  position: relative;
  pointer-events: none;
  /* isolation root so the negative-z background image stays under the text
     yet isn't overpainted by later sections' backgrounds (also z-index -2):
     image z-index -2  <  content in normal flow */
  isolation: isolate;
}

.section-4 .skica-container {
  margin-top: -102px;
  position: relative;
  overflow: hidden;
}

.section-4 .skica-container .skica-text {
  position: absolute;
  width: 80%;
  max-width: 250px;
  top: 50vh;
  left: 34vw;
  z-index: 3;
  pointer-events: all;
}

.section-4 .skica-container .skica-text .arrow {
  display: flex;
  width: 100%;
  max-width: 100px;
  margin-left: 40px;
  margin-bottom: 50px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
}

.section-4 .skica-container .skica-text h4 {
  color: #fff;
  font-size: 36px;
  letter-spacing: 1px;
}

.section-4 .skica-container .skica-text p {
  font-size: 18px;
  font-weight: 300;
}

@media (max-width: 768px) {
  .section-4 .skica-container .skica-text {
    width: 100%;
    max-width: 350px;
  }
}

.section-4 .skica-container .logo {
  position: absolute;
  top: 50vh;
  right: 13vw;
  max-width: 280px;
  width: 30%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
}

.section-4 .skica-container .pencil {
  position: absolute;
  bottom: -25%;
  right: -6vw;
  max-width: 680px;
  width: 50%;
  z-index: 2;
  max-height: 100vh;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
}

.section-4 .skica-container .blok {
  position: relative;
  display: block;
  max-width: 1200px;
  width: 90%;
  margin-top: 5vh;
  margin-left: auto;
  margin-right: 8vw;
  object-fit: contain;
  z-index: 1;
  max-height: 110vh;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
}

@media (max-width: 1500px) {
  .section-4 .skica-container .blok {
    margin-right: 0;
  }

  .section-4 .skica-container .logo {
    top: 260px;
    right: 11vw;
  }

  .section-4 .skica-container .pencil {
    right: -10vw;
  }

  .section-4 .skica-container .skica-text {
    left: 28vw;
  }
}

@media (max-width: 1200px) {
  .section-4 .skica-container .logo {
    top: 280px;
  }

  .section-4 .skica-container .skica-text {
    left: 10vw;
    top: 30%;
  }
}

@media (max-width: 768px) {
  .section-4 .skica-container {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    padding-bottom: 200px;
  }

  .section-4 .skica-container .skica-text {
    position: unset;
    margin-top: -90px;
    align-self: flex-start;
    padding-left: 35px;
  }

  .section-4 .skica-container .skica-images {
    position: relative;
  }

  .section-4 .skica-container .blok {
    margin-right: 20vw;
    width: 80%;
  }

  .section-4 .skica-container .logo {
    top: 200px;
  }
}

@media (max-width: 560px) {
  .section-4 .skica-container {
    align-items: flex-start;
    padding-left: 15px;
    padding-right: 15px;
  }

  .section-4 .skica-container .skica-text {
    width: 100%;
    margin-top: 0;
    padding-left: 0;
  }

  .section-4 .skica-container .skica-text .arrow {
    display: none;
  }

  .section-4 .skica-container .blok {
    position: absolute;
    margin-right: 0;
    left: -20vw;
    top: 0;
    height: 100%;
    width: auto;
  }

  .section-4 .skica-container .logo {
    width: 45%;
    top: 130px;
    right: 15vw;
  }

  .section-4 .skica-container .pencil {
    height: 100%;
    width: auto;
    top: 100px;
    right: unset;
    left: 52%;
  }

  .section-4 .skica-container .skica-images {
    height: 300px;
    width: 100%;
  }
}

.section-4 .section-bg {
  top: 100px;
}

.section-5 {
  position: relative;
  margin-top: -200px;
  padding-bottom: 25vh;
  /* isolation root so the negative-z section-mask stays contained under the
     content: section-mask z-index -1  <  text + brandbook image in normal flow */
  isolation: isolate;
}

@media (max-width: 560px) {
  .section-5 {
    padding-bottom: 10vh;
    margin-top: -100px;
  }
}

.section-5 h4 {
  color: #fff;
}

.section-5 p {
  font-size: 18px;
  font-weight: 300;
}

@media (max-width: 768px) {
  .section-5 .container-lion {
    display: flex;
    flex-direction: column-reverse;
  }
}

.section-5 .brandbook-text {
  position: relative;
  max-width: 250px;
  margin-left: 20px;
  z-index: 2;
}

.section-5 .brandbook-text p {
  margin-bottom: 42px;
}

@media (max-width: 768px) and (max-width: 768px) {
  .section-5 .brandbook-text {
    width: 100%;
    max-width: 350px;
  }
}

@media (max-width: 560px) {
  .section-5 .brandbook-text {
    margin-top: 1em;
    margin-left: 0;
    margin-right: 0;
  }
}

.section-5 .brandbook-gallery {
  display: flex;
  perspective: 2400px;
  -webkit-perspective: 2400px;
  -moz-perspective: 2400px;
  height: 600px;
}

.section-5 .brandbook-gallery img {
  width: 100%;
  position: absolute;
  top: -100px;
  left: 0;
  object-fit: contain;
  transition: opacity 650ms ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
}

.section-5 .brandbook-gallery img:not(.active) {
  opacity: 0;
}

@media (max-width: 1400px) {
  .section-5 .brandbook-gallery {
    height: 450px;
  }
}

@media (max-width: 1200px) {
  .section-5 .brandbook-gallery {
    height: 350px;
  }
}

@media (max-width: 991px) {
  .section-5 .brandbook-gallery {
    height: 28vw;
  }

  .section-5 .brandbook-gallery img {
    top: 0;
    max-height: 40vw;
  }
}

@media (max-width: 768px) {
  .section-5 .brandbook-gallery {
    height: unset;
    max-height: unset;
    margin-bottom: 10px;
  }

  .section-5 .brandbook-gallery img {
    position: unset;
    max-height: max-content;
  }
}

.section-5 .grad-custom {
  height: 110%;
  background-image: linear-gradient(180deg, transparent -1%, rgba(65, 179, 156, 0.3) 3%, rgba(65, 179, 156, 0.7) 6%, #41B39C 11%, #41B39C 17%, #01172C 100%);
}

.section-6 {
  position: relative;
  margin-top: -50px;
}

.section-6 .container-lion {
  position: relative;
}

.section-6 .merch-gallery {
  position: relative;
}

.section-6 .merch-gallery img {
  width: 100%;
}

.section-6 .merch-gallery .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 500ms ease;
}

.section-6 .merch-gallery:hover .mask {
  opacity: 1;
}

.section-6 .merch-gallery .caption {
  position: absolute;
  right: calc(30% - 10vw);
  bottom: 43%;
  z-index: 15;
}

.section-6 .merch-gallery .caption .text {
  left: 25px;
  top: 10px;
  font-size: 20px;
}

.section-6 .merch-gallery .caption .tooltip-line::before {
  background-image: linear-gradient(to right, transparent 40%, #fff 60%);
  background-size: 400% 100%;
  width: 175px;
}

.section-6 .merch-gallery .caption .tooltip-line::after {
  background-image: linear-gradient(to right, transparent 40%, #fff 60%);
  background-size: 250% 100%;
  width: 70px;
}

@media (max-width: 560px) {
  .section-6 .merch-gallery .caption .tooltip-line::before {
    width: 100px;
  }

  .section-6 .merch-gallery .caption .tooltip-line::after {
    width: 50px;
  }

  .section-6 .merch-gallery .caption .tooltip-line .tooltip-circle {
    top: 90px;
    left: -116px;
  }
}

@media (max-width: 1400px) {
  .section-6 .merch-gallery .caption .text {
    font-size: 18px;
    white-space: nowrap;
  }
}

@media (max-width: 991px) {
  .section-6 .merch-gallery .caption {
    right: 30%;
    bottom: 53%;
  }
}

.section-6 .merch-text {
  position: absolute;
  max-width: 270px;
  left: 5%;
  bottom: 15%;
}

.section-6 .merch-text h4 {
  color: #41B39C;
  margin-bottom: 40px;
}

@media (max-width: 560px) {
  .section-6 .merch-text h4 {
    margin-bottom: 10px;
  }
}

.section-6 .merch-text p {
  font-size: 16px;
  font-weight: 300;
}

@media (max-width: 560px) {
  .section-6 .merch-text {
    margin-top: 3em;
  }
}

@media (max-width: 560px) {
  .section-6 {
    margin-top: 0;
  }

  .section-6 .merch-text {
    position: unset;
    max-width: unset;
  }

  .section-6 .merch-gallery .caption {
    right: 50%;
    bottom: 80%;
  }

  .section-6 .merch-gallery .caption .text {
    font-size: 16px;
    left: 10px;
    top: 7px;
  }
}

.section-7 {
  margin-top: -150px;
  padding-top: 200px;
  padding-bottom: 85px;
  pointer-events: none;
  /* isolation root so the negative-z section-mask stays contained under the
     content and isn't overpainted by neighbouring sections' backgrounds */
  isolation: isolate;
}

.section-7 .splide {
  pointer-events: all;
}

/* Splide's .splide__list is a flexbox; its default align-items: stretch
   stretches every slide to the tallest slide (70vh), so shorter slides
   (padded/bottle at ~66vh) end up taller than their image. Align instead so
   each slide is only as tall as its own content. */
.section-7 .splide__list {
  align-items: center;
  height: auto;
}

.section-7 .splide .item {
  text-align: center;
  position: relative;
}

.section-7 .splide .item img {
  height: 70vh;
  max-width: 800px;
  width: auto;
  object-fit: contain;
  /* block removes the inline baseline (descender) gap below the image */
  display: block;
  transition: transform 450ms ease-out;
}

@media (max-width: 991px) {
  .section-7 .splide .item img {
    height: 60vh;
  }
}

@media (max-width: 768px) {
  .section-7 .splide .item img {
    height: 50vh;
    max-width: 85vw;
  }
}

.section-7 .splide .item.padded.bottle img {
  height: 56vh;
  margin-top: 10vh;
}

@media (max-width: 768px) {
  .section-7 .splide .item.padded.bottle img {
    height: 40vh;
    margin-top: 9vh;
  }
}

.section-7 .splide .item.padded img {
  height: 62vh;
  margin-top: 4vh;
}

@media (max-width: 991px) {
  .section-7 .splide .item.padded img {
    height: 54vh;
  }
}

@media (max-width: 768px) {
  .section-7 .splide .item.padded img {
    height: 44vh;
  }
}

.section-7 .splide .item:not(.animate) img {
  transform: scale(0.8);
}

.section-7 .splide .item .caption {
  position: absolute;
}

.section-7 .splide .item .caption .lion-tooltip-content {
  font-size: 18px;
  left: 10px;
  top: 14px;
  min-width: 140px;
}

.section-7 .splide .item .caption .wysiwyg {
  pointer-events: all;
}

.section-7 .splide .item .caption .tooltip-line::before {
  background-image: linear-gradient(to right, transparent 40%, #fff 60%);
  background-size: 400% 100%;
  width: 150px;
  transform: rotateZ(128deg);
}

.section-7 .splide .item .caption .tooltip-line::after {
  background-image: linear-gradient(to right, transparent 40%, #fff 60%);
  background-size: 250% 100%;
  width: 50px;
}

.section-7 .splide .item .caption .tooltip-line .tooltip-circle {
  top: 138px;
  left: -138px;
}

@media (max-width: 768px) {
  .section-7 .splide .item .caption .tooltip-line::before {
    width: 110px;
  }

  .section-7 .splide .item .caption .tooltip-line::after {
    width: 35px;
  }

  .section-7 .splide .item .caption .tooltip-line .tooltip-circle {
    top: 106px;
    left: -113px;
  }
}

.section-7 .splide .item .caption.left .lion-tooltip-content {
  left: unset;
  right: 5px;
  text-align: right;
}

.section-7 .splide .item.helm .caption {
  right: -10%;
  top: 10%;
}

.section-7 .splide .item.id-card .caption {
  top: 15%;
  left: 38%;
}

.section-7 .splide .item.bottle .caption {
  bottom: 50%;
  left: -25%;
}

.section-7 .splide .item.billboard .caption {
  top: 35%;
  right: 0%;
}

.section-7 .splide .item.cards .caption {
  top: 30%;
  left: 10%;
}

@media (max-width: 768px) {
  .section-7 .splide .item.bottle .caption {
    bottom: 60%;
  }

  .section-7 .splide .item.billboard .caption {
    right: 30%;
  }

  .section-7 .splide .item.id-card .caption {
    top: 25%;
  }

  .section-7 .splide .item .caption .lion-tooltip-content {
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  .section-7 .splide .item.helm .caption {
    right: 20%;
  }

  .section-7 .splide .item.id-card .caption {
    top: 15%;
    left: 45%;
  }

  .section-7 .splide .item.cards .caption {
    left: 30%;
    top: 10%;
  }

  .section-7 .splide .item.billboard .caption {
    right: 41%;
    top: 5%;
  }
}

.section-7 .splide .splide__pagination {
  bottom: -65px;
}

.section-7 .splide .splide__pagination button {
  background-color: transparent;
  border: 2px solid #fff;
  width: 12px;
  height: 12px;
}

.section-7 .splide .splide__pagination button.is-active {
  background-color: #000000;
  border-color: #000000;
  transform: scale(1.2);
}

.section-7 .grad-custom {
  top: unset;
  bottom: 0;
  background-image: linear-gradient(0deg, #41B39C 1%, rgba(61, 169, 149, 0.94) 7%, rgba(50, 144, 131, 0.78) 21%, rgba(34, 104, 102, 0.52) 65%, rgba(11, 48, 62, 0.16) 96%, rgba(1, 23, 44, 0) 100%);
}

.section-8 {
  padding: 8vh 0 5vh;
  overflow: hidden;
  /* isolation root: section-bg (machine) z-index -2  <  section-mask z-index -1
     <  content in normal flow; also prevents overpaint by other sections */
  isolation: isolate;
}

.section-8 h2 {
  font-size: clamp(40px, 8vh, 70px) !important;
  margin-bottom: 1rem;
}

.section-8 h4 {
  color: #01172C;
  font-size: 40px;
  margin-bottom: 1rem;
}

@media (max-width: 560px) {
  .section-8 h4 {
    font-size: 30px;
  }
}

.section-8 .fs-1 {
  font-size: 78px;
}

@media (max-width: 768px) {
  .section-8 .fs-1 {
    font-size: 72px;
  }
}

@media (max-width: 560px) {
  .section-8 .fs-1 {
    font-size: 52px;
  }
}

.section-8 p {
  font-size: 16px;
}

.section-8 .product-header {
  position: relative;
}

.section-8 .product-header .claim {
  position: absolute;
  max-width: 350px;
  left: 3%;
  top: -15%;
}

.section-8 .product-header .title {
  text-align: center;
}

@media (max-width: 768px) {
  .section-8 .product-header .title {
    margin-left: 0;
  }
}

@media (max-width: 1200px) {
  .section-8 .product-header {
    display: flex;
  }

  .section-8 .product-header .claim {
    position: relative;
    left: unset;
  }
}

@media (max-width: 991px) {
  .section-8 .product-header {
    flex-direction: column-reverse;
    align-items: center;
  }

  .section-8 .product-header .claim {
    max-width: 400px;
  }
}

@media (max-width: 560px) {
  .section-8 .product-header .claim {
    margin-top: 10px;
  }
}

.section-8 .product-content {
  display: flex;
  margin-top: 18vh;
}

.section-8 .product-content .web-container {
  flex-basis: 70%;
}

.section-8 .product-content .web-container .web-scroll {
  overflow: hidden;
  max-height: 600px;
  width: 100%;
  box-shadow: 15px 14px 20px 2px rgba(0, 0, 0, 0.1);
  aspect-ratio: 980 / 600;
}

.section-8 .product-content .web-container .web-scroll .web-window-bar {
  position: relative;
}

.section-8 .product-content .web-container .web-scroll img {
  width: 100%;
}

.section-8 .product-content .web-container .web-scroll img.anim {
  animation: web-scroll 17500ms ease-in-out infinite;
}

.section-8 .product-content .product-text-container {
  flex-basis: 30%;
  padding-left: 9vw;
  padding-top: 10vh;
}

@media (max-width: 1200px) {
  .section-8 .product-content {
    margin-top: 10vh;
  }

  .section-8 .product-content .product-text-container {
    padding-left: 16px;
    padding-top: 20px;
  }
}

@media (max-width: 768px) {
  .section-8 .product-content {
    flex-direction: column-reverse;
    margin-top: 5vh;
    gap: 2em;
  }
}

@media (max-width: 560px) {
  .section-8 .product-content .product-text-container {
    padding-left: 0;
  }
}

.section-8 .grad-custom {
  top: unset;
  bottom: 0;
  background-image: linear-gradient(0deg, #41B39C 8%, rgba(65, 179, 156, 0.8) 15%, rgba(65, 179, 156, 0.65) 25%, rgba(65, 179, 156, 0.55) 85%, #41B39C 100%);
}

@keyframes web-scroll {

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

  20% {
    transform: translateY(-17%);
  }

  40% {
    transform: translateY(-36%);
  }

  60% {
    transform: translateY(-57%);
  }

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

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

.section-9 {
  padding: 28vh 0 30vh;
  /* isolation root: section-bg-alt z-index -3  <  section-bg (lion_3) z-index -2
     <  section-mask z-index -1  <  content in normal flow */
  isolation: isolate;
}

.section-9 strong {
  font-weight: 600;
}

.section-9 h4 {
  font-weight: 700;
  font-size: clamp(32px, 7vw, 40px);
  color: #01172C;
}

.section-9 h4.text-white {
  color: #fff;
}

.section-9 .container-community {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.section-9 .container-community .community-text-container {
  display: flex;
  flex-direction: column;
  flex-basis: 30%;
  padding-left: 40px;
  padding-right: 70px;
}

.section-9 .container-community .community-text-container div {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.section-9 .container-community .community-text-container h4 {
  margin: 0;
  flex-grow: 1;
}

.section-9 .container-community .community-text-container p {
  margin-bottom: 0;
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.5em;
}

.section-9 .container-community .stories-container {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-basis: 30%;
  max-width: 360px;
  height: 650px;
  background-color: rgba(1, 23, 44, 0.5);
}

.section-9 .container-community .stories-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-position: center center;
  object-fit: cover;
  flex-grow: 1;
  transition: opacity 800ms ease;
}

.section-9 .container-community .stories-container img:not(.active) {
  opacity: 0;
}

@media (max-width: 991px) {
  .section-9 .container-community .stories-container {
    height: 550px;
  }
}

.section-9 .container-community .web-container {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-basis: 30%;
  max-width: 360px;
  height: 650px;
  margin-right: 30px;
  background: #d0d0d0;
}

.section-9 .container-community .web-container img {
  width: 100%;
}

.section-9 .container-community .web-container .scroll-img,
.section-9 .container-community .web-container .scroll-img-2 {
  position: absolute;
  top: 0;
  left: 0;
}

.section-9 .container-community .web-container .scroll-img {
  background-image: url("/media/cases/lion/img/lion_posts.png");
  width: 100%;
  height: 100%;
  background-size: 100% auto;
  background-repeat: repeat-y;
  transition: background-position-y 1550ms cubic-bezier(0.26, 0.29, 0.45, 0.96);
}

.section-9 .container-community .web-container.web-scroll-anim {
  position: relative;
}

.section-9 .container-community .web-container.web-scroll-anim .web-window-bar {
  position: absolute;
  top: 0;
  left: 0;
}

.section-9 .container-community .web-container.nobg {
  background: transparent;
}

@media (max-width: 991px) {
  .section-9 .container-community .web-container {
    height: 550px;
  }
}

@media (max-width: 767px) {
  .section-9 .container-community {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }

  .section-9 .container-community .community-text-container {
    flex-basis: 100%;
  }

  .section-9 .container-community .stories-container {
    flex-basis: 45%;
    height: 500px;
  }

  .section-9 .container-community .web-container {
    flex-basis: 45%;
    height: 500px;
  }
}

@media (max-width: 560px) {
  .section-9 .container-community {
    flex-direction: column;
    align-items: center;
  }

  .section-9 .container-community .community-text-container {
    width: 100%;
    flex-basis: unset;
  }

  .section-9 .container-community .stories-container {
    width: 250px;
    height: 500px;
    flex-basis: unset;
  }

  .section-9 .container-community .web-container {
    width: 250px;
    height: 500px;
    flex-basis: unset;
    margin-right: 0;
  }
}

.section-9 .section-bg {
  top: unset;
  width: 100%;
  height: auto;
  bottom: 0;
}

.section-9 .grad-custom {
  background-image: linear-gradient(0deg, #01172C 2%, rgba(1, 23, 44, 0.8) 8%, rgba(1, 23, 44, 0.7) 12%, rgba(1, 23, 44, 0.3) 18%, rgba(65, 179, 156, 0.1) 40%, rgba(65, 179, 156, 0.6) 80%, #41B39C 100%);
}

.section-9 .section-bg-alt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #002332;
  z-index: -3;
}

@media (max-width: 1200px) {
  .section-9 {
    padding: 16vh 0 15vh;
  }

  .section-9 .container-community .community-text-container {
    padding: 0 10px;
  }
}

@media (max-width: 768px) {
  .section-9 {
    padding: 12vh 0 10vh;
  }
}

.mobile-frame::before {
  content: "";
  display: block;
  position: absolute;
  border: 6px solid #01172C;
  inset: -1px;
  z-index: 2;
  border-radius: 30px;
}

.mobile-frame::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 45%;
  height: 34px;
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
  z-index: 3;
  background-color: #01172C;
}

@media (max-width: 768px) {
  .mobile-frame::after {
    height: 22px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
}

.mobile-frame .home-btn {
  display: block;
  position: absolute;
  bottom: 12px;
  left: 50%;
  width: 50%;
  height: 5px;
  border-radius: 5px;
  background-color: #E0E0E0;
  z-index: 5;
  transform: translateX(-50%);
}

.section-10 {
  padding: 5vh 0 10vh;
}

.section-10 h2 {
  font-size: 74px;
  text-align: center;
  margin-bottom: 6vh;
}

@media (max-width: 1200px) {
  .section-10 h2 {
    font-size: 58px;
  }
}

.section-10 .text-stylized {
  position: relative;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-10 .text-stylized p {
  font-size: 30px;
  font-weight: 300;
  line-height: 1.35em;
  font-style: italic;
}

.section-10 .text-stylized .ticks {
  position: absolute;
  top: 0;
  left: -75px;
  width: 62px;
}

@media (max-width: 991px) {
  .section-10 .text-stylized p {
    font-size: 26px;
    margin: 0 20px;
  }

  .section-10 .text-stylized .ticks {
    left: -20px;
    top: -16px;
    width: 44px;
  }
}

@media (max-width: 768px) {
  .section-10 .text-stylized p {
    font-size: 22px;
  }

  .section-10 .text-stylized .ticks {
    top: -24px;
    left: 0px;
    width: 36px;
  }
}

@media (max-width: 560px) {
  .section-10 .text-stylized p {
    font-size: 20px;
    margin: 0 5px;
  }

  .section-10 .text-stylized .ticks {
    display: none;
  }
}

.section-10 .ceo-container {
  position: relative;
  width: 90%;
  max-width: 200px;
  margin-top: 45px;
  margin-left: auto;
  margin-right: auto;
  padding: 30px;
}

.section-10 .ceo-container img {
  width: 100%;
}

.section-10 .ceo-container p {
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translate(100%, -50%);
  font-size: 24px;
  white-space: nowrap;
}

.section-10 .ceo-container p strong {
  display: block;
  font-weight: inherit;
  color: #41B39C;
}

@media (max-width: 768px) {
  .section-10 .ceo-container {
    margin-left: 20px;
  }
}

@media (max-width: 560px) {
  .section-10 .ceo-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    max-width: none;
    gap: 10px;
    margin-left: 0;
  }

  .section-10 .ceo-container img {
    width: 150px;
  }

  .section-10 .ceo-container p {
    position: unset;
    transform: none;
  }
}

.section-10 .container-bg {
  margin-top: -120px;
  text-align: center;
}

.section-10 .container-bg .section-bg {
  display: block;
  position: unset;
  width: 100%;
  height: auto;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}

.section-10 .container-bg .section-title {
  font-size: 64px;
  margin-top: -50px;
}

.section-10 .container-bg .section-title strong {
  display: block;
}

@media (max-width: 1200px) {
  .section-10 .container-bg .section-title {
    font-size: 54px;
  }
}

@media (max-width: 991px) {
  .section-10 .container-bg .section-title {
    font-size: 6vw;
  }
}

@media (max-width: 560px) {
  .section-10 .container-bg .section-title {
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  .section-10 .container-bg {
    margin-top: 0px;
  }
}

@media (max-width: 768px) {
  .section-10 {
    padding: 0 0 8vh;
  }
}

.text-reveal {
  color: rgba(255, 255, 255, 0.3);
}

.text-reveal .text-reveal-revealed {
  color: #fff;
  position: relative;
}

[data-aos="custom-anim1"] {
  transform: scale(0.85);
  opacity: 0;
  transition-property: transform, opacity;
}

[data-aos="custom-anim1"].aos-animate {
  transform: scale(1);
  opacity: 1;
}

.cls-1 {
  clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
}

.cls-1.anim {
  animation: cls-1 1500ms ease 0ms forwards;
}

.cls-2 {
  clip-path: polygon(100% 0, 0 0, 0 0, 100% 0);
}

.cls-2.anim {
  animation: cls-2 1800ms ease 200ms forwards;
}

.cls-3 {
  clip-path: polygon(100% 100%, 0 0, 0 0, 100% 100%);
}

.cls-3.anim {
  animation: cls-3 1000ms ease 600ms forwards;
}

@keyframes cls-1 {
  0% {
    clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
  }

  100% {
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
  }
}

@keyframes cls-2 {
  0% {
    clip-path: polygon(100% 0, 0 0, 0 0, 100% 0);
  }

  100% {
    clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
  }
}

@keyframes cls-3 {
  0% {
    clip-path: polygon(100% 100%, 0 0, 0 0, 100% 100%);
  }

  100% {
    clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0);
  }
}

.point-tooltip .lion-tooltip-content {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 250px;
  text-align: start;
  left: calc(100% + 70px);
  font-size: 26px;
  font-weight: 600;
  top: -36px;
  transition: opacity 600ms ease, transform 800ms ease;
  transform: translateY(10px);
  z-index: 5;
}

.point-tooltip .lion-tooltip-content.in {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 500ms;
}

.point-tooltip .lion-tooltip-content.out {
  opacity: 0;
  transform: translateY(10px);
  transition-delay: 0;
}

@media (max-width: 1400px) {
  .point-tooltip .lion-tooltip-content {
    font-size: 24px;
    width: unset;
  }
}

@media (max-width: 1200px) {
  .point-tooltip .lion-tooltip-content {
    font-size: 18px;
  }
}

.point-tooltip:hover .lion-tooltip-content {
  opacity: 1;
}

.point-tooltip .tooltip-line {
  position: absolute;
  top: -60%;
  right: -115%;
}

.point-tooltip .tooltip-line .tooltip-circle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
  top: 140px;
  left: -165px;
  transform: scale(0);
  transition: transform 300ms ease;
}

.point-tooltip .tooltip-line .tooltip-circle.in {
  transform: scale(1);
}

.point-tooltip .tooltip-line::before {
  content: "";
  display: block;
  position: absolute;
  width: 45px;
  height: 2px;
  left: -40px;
  top: 20px;
  transform-origin: bottom left;
  transform: rotateZ(135deg);
  background-image: linear-gradient(to right, transparent 40%, #41B39C 60%);
  background-size: 300% 100%;
  background-position: 0;
  transition: background-position 500ms ease;
}

.point-tooltip .tooltip-line::after {
  content: "";
  display: block;
  position: absolute;
  width: 25px;
  height: 2px;
  left: -40px;
  top: 22px;
  background-image: linear-gradient(to right, transparent 40%, #41B39C 60%);
  background-size: 300% 100%;
  background-position: 0;
  transition: background-position 300ms ease;
}

.point-tooltip .tooltip-line.in::before {
  transition-delay: 0;
  background-position: 100%;
}

.point-tooltip .tooltip-line.in::after {
  transition-delay: 300ms;
  background-position: -50%;
}

.point-tooltip .tooltip-line.out::before {
  transition-delay: 300ms;
  background-position: 0;
}

.point-tooltip .tooltip-line.out::after {
  transition-delay: 0;
  background-position: 0;
}

.point-tooltip.left .lion-tooltip-content {
  right: calc(100% + 70px);
  left: unset;
}

.point-tooltip.left .tooltip-line {
  transform: scaleX(-1);
  left: -115%;
  right: unset;
}

.point-tooltip.padded-bottom .lion-tooltip-content {
  top: -48px;
}

.point-tooltip.wider .lion-tooltip-content {
  width: 300px;
}

@media (max-width: 1200px) {
  .point-tooltip.wider .lion-tooltip-content {
    width: 200px;
  }
}

@media (max-width: 991px) {
  .point-tooltip.wider .lion-tooltip-content {
    width: unset;
  }
}

.case-section-tag .content {
  color: #41b39c;
  font-weight: 700;
}

.case-section-tag .content a {
  color: #41B39C;
}

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

.case-section-tag .content a:hover .ico {
  transform: scale(1.1);
}

.case-section-tag .content a:active,
.case-section-tag .content a:target,
.case-section-tag .content a:focus {
  text-decoration: none;
}

.case-section-tag .content .ico {
  background-color: #41B39C;
  margin-right: 5px;
  transition: transform 250ms ease;
}

.case-section-tag .content.mentol {
  background-color: #41B39C;
  color: #fff;
}

.case-section-tag .content.mentol a {
  color: #fff;
}

.case-section-tag .content.mentol .ico {
  background-color: #fff;
}

.case-section-tag .content.white {
  background-color: #fff;
  color: #41B39C;
}

.case-section-tag .content.white a {
  color: #41B39C;
}

.case-section-tag .content.white .ico {
  background-color: #41B39C;
}

.contact-us {
  background-color: transparent;
  padding: 0;
}

.contact-us .btn-arrow {
  font-size: 18px;
}

.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;
}

#videotitle {
  z-index: 12000;
}

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

.brand-logo img {
  filter: none !important;
}