@font-face {
  font-family: 'Canela';
  src: url('/wp-content/themes/wordpress-theme/web/assets/fonts/canela/Canela-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'Canela';
  src: url('/wp-content/themes/wordpress-theme/web/assets/fonts/canela/Canela-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: 'Canela';
  src: url('/wp-content/themes/wordpress-theme/web/assets/fonts/canela/Canela-RegularItalic.otf') format('opentype');
  font-weight: normal;
  font-style: italic; }

h3 {
  font-size: 40px;
  line-height: 48px;
  font-weight: 700; }

h2 {
  font-size: 64px; }

p {
  font-size: 20px;
  line-height: 28px; }

.flex-grow {
  flex: 1; }

.flex-row {
  display: flex;
  align-items: center; }

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    transform: scaleX(1); }

  100% {
    transform: scaleX(0);
    opacity: 0;
    display: none; } }

.fadeOutRight {
  animation: fadeOutRight 0.5s forwards;
  transform-origin: right; }

@keyframes fadeOutLeft {
  0% {
    opacity: 0;
    display: none;
    transform: scaleX(0); }

  100% {
    transform: scaleX(1);
    opacity: 1; } }

.fadeOutLeft {
  animation: fadeOutLeft 0.5s forwards;
  transform-origin: right; }

.container {
  max-width: 1500px;
  padding: 30px 50px; }

.flex-row {
  gap: 30px; }

.btn {
  position: relative;
  display: inline-block; }
  .btn button {
    border: none;
    border-radius: 40px;
    padding: 17px 40px;
    font-size: 20px;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
    cursor: pointer;
    transition: 0.3s; }
  .btn:hover button {
    margin-right: 20px; }
    .btn:hover .circle {
      opacity: 1;
      left: calc(100% + 20px); }
  .btn.black button {
    background: #222;
    color: white; }
    .btn.black .circle {
      border: 1px solid #222; }
      .btn.black .circle svg {
        fill: #222; }
  .btn.green button {
    background: #1bd3c5;
    color: #222; }
    .btn.green .circle {
      border: 1px solid #1bd3c5; }
      .btn.green .circle svg {
        fill: #1bd3c5; }
  .btn .circle {
    position: absolute;
    top: 50%;
    left: 100%;
    border-radius: 40px;
    padding: 17px 24px;
    transform: translate(-50%, -50%);
    height: 55px;
    border: 1px solid white;
    opacity: 0;
    transition: opacity 0.3s ease, left 0.3s ease; }
    .btn .circle svg {
      fill: white;
      width: 20px;
      height: 20px; }

.element-items {
  text-align: center;
  position: absolute;
  user-select: none;
  z-index: 999;
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.6s ease; }
  .element-items button {
    pointer-events: visible; }

.items {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  user-select: none;
  will-change: transform;
  font-size: 0;
  perspective: 500px;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

.items.active {
  transform: scale(1.2); }

.item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30vh;
  line-height: 27vh;
  font-style: italic;
  font-family: 'Canela', sans-serif;
  font-weight: 300;
  color: #b7e6e0;
  opacity: 0.3; }

video {
  width: 100%; }