li {
  margin: 0 10px;
  padding: 2px;
}

a {
  text-decoration: none;
  color: #0d2a5c;
  font-size: 16px;
  display: inline-block;
  transition: color 0.2s ease-in-out;
}

a::after {
  content: "";
  width: 0;
  height: 2px;
  background-color: white;
  display: block;
  transition: width 0.5s;
}

a:hover::after {
  width: 100%;
}

.tlplink {
  position: relative;
  display: block;
  color: #fff;
  text-decoration: none;
}

.tlplink::before {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  border-radius: 4px;
  background-color: #9cd7f8;
  bottom: 5px;
  /*left: 0;*/
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

.tlplink:hover::before {
  transform-origin: center;
  transform: scaleX(1);
  width: 100%;
}

.carder {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: rgba(5, 55, 142, 0.075);
  border-radius: 8px;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  transition: background-color .2s;
  display: flex;
}

.carder:hover {
  background-color: #4c82f74f;
}

.form-wrapper {
  position: relative;
  transition: 0.3s ease-in-out;
  font-size: 16px;
  margin-top: 24px;
  /*margin-bottom: 32px;*/
  padding: var(--gap);
  background: var(--entry);
  border-radius: 8px;
  box-shadow: -1px 61px 77px -47px rgb(0 0 0 / 23%);
  -webkit-box-shadow: -1px 61px 77px -47px rgb(0 0 0 / 22%);
  -moz-box-shadow: -1px 61px 77px -47px rgb(0 0 0 / 23%);
}

.form-wrapper:hover {
  box-shadow: 0 0 0 1px rgba(53, 72, 91, 0.04), 0 2px 2px rgba(0, 0, 0, 0),
    0 4px 4px rgba(0, 0, 0, 0.01), 0px 4px 2px rgba(0, 0, 0, 0.02),
    0px 5px 2px rgba(0, 0, 0, 0.02), 1px 5px 2px rgba(0, 0, 0, 0.02),
    1px 6px 2px rgba(0, 0, 0, 0.03);
}

.card-wrapper {
  position: relative;
  transition: 0.3s ease-in-out;
  font-size: 16px;
  margin-top: 24px;
  margin-bottom: 32px;
  background: var(--entry);
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(53, 72, 91, 0.07), 0 2px 2px rgba(0, 0, 0, 0.01),
    0 4px 4px rgba(0, 0, 0, 0.02), 0px 10px 18px rgba(0, 0, 0, 0.03),
    1px 11px 19px rgba(0, 0, 0, 0.03), 0px 12px 9px rgba(0, 0, 0, 0.04),
    1px 8px 14px rgba(0, 0, 0, 0.05);
}

.card-wrapper:hover {
  box-shadow: 0 0 0 1px rgba(53, 72, 91, 0.04), 0 2px 2px rgba(0, 0, 0, 0),
    0 4px 4px rgba(0, 0, 0, 0.01), 0px 4px 2px rgba(0, 0, 0, 0.02),
    0px 5px 2px rgba(0, 0, 0, 0.02), 1px 5px 2px rgba(0, 0, 0, 0.02),
    1px 6px 2px rgba(0, 0, 0, 0.03);
}

.b-example-divider {
  width: 100%;
  height: 3rem;
  background-color: rgba(0, 0, 0, 0.1);
  border: solid rgba(0, 0, 0, 0.15);
  border-width: 1px 0;
  box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1),
    inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
}

.b-example-vr {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
}

.bi {
  vertical-align: -0.125em;
  fill: currentColor;
}

.product-device {
  position: absolute;
  right: 0%;
  bottom: 134px;
  width: auto;
  height: 890px;
  /*background-color: #333;*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.product-device::before {
  position: absolute;
  top: 10%;
  right: 10px;
  bottom: 10%;
  left: 10px;
  content: "";
  /*background-color: rgba(255, 255, 255, 0.1);*/
  border-radius: 5px;
}

/* Tiffs animate */
.animated.body-img,
.hero-img-container .animated.hero-img {
  -webkit-animation: trim-path 1.5s ease-out forwards;
  animation: trim-path 1.5s ease-out forwards;
}

.body-img.animated {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.overlay {
  position: relative;
}

.overlay:before {
  background: linear-gradient(270deg, #fff 50%, #e42222 0);
  content: "";
  width: 100%;
  height: 100%;
  transform-origin: right;
  position: absolute;
  background-position: 100% 100%;
  left: 0;
  top: 0;
  background-size: 200% 100%;
}

.overlay.inverted:before {
  background: #fff;
}

.bottom-up {
  /*overflow: hidden;*/
  opacity: 0;
}

.animated.overlay:before {
  -webkit-animation: overlay 1s forwards;
  animation: overlay 1s forwards;
}

.animated.bottom-up {
  -webkit-animation: bottom-up 1s forwards;
  animation: bottom-up 1s forwards;
}

@-webkit-keyframes bottom-up {
  0% {
    opacity: 0;
    transform: translateY(20%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bottom-up {
  0% {
    opacity: 0;
    transform: translateY(20%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@-webkit-keyframes overlay {
  50% {
    background-position: 0 100%;
    transform: scaleX(1);
  }

  to {
    background-position: 0 100%;
    transform: scaleX(0);
  }
}

@keyframes overlay {
  50% {
    background-position: 0 100%;
    transform: scaleX(1);
  }

  to {
    background-position: 0 100%;
    transform: scaleX(0);
  }
}

@-webkit-keyframes button-icon {
  0% {
    transform: translate(-14px, 14px);
  }

  80% {
    transform: translate(2px, -2px);
  }

  to {
    transform: translate(0);
  }
}

@keyframes button-icon {
  0% {
    transform: translate(-14px, 14px);
  }

  80% {
    transform: translate(2px, -2px);
  }

  to {
    transform: translate(0);
  }
}

@-webkit-keyframes trim-path {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes trim-path {
  to {
    stroke-dashoffset: 0;
  }
}

/* Tiffs cookie start */
#cookie-notice {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #333;
  color: #fff;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  z-index: 9999;
}

#cookie-notice a {
  color: #fff;
  text-decoration: underline;
}

#accept-cookies {
  background-color: #4caf50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

@media (max-width: 600px) {
  #cookie-notice {
    flex-direction: column;
  }

  #cookie-notice p {
    margin-bottom: 10px;
  }
}