/* Fonts */
/* Font Size */
/* Colors */
/** Breakpoint sizes */
/** Mixins */
/* stylelint-disable media-query-no-invalid -- The SCSS is confuses stylelint, compiled CSS is valid */
/* stylelint-enable media-query-no-invalid */
.video-with-content {
  background-color: #E5F1FC;
  position: relative;
  max-width: 2000px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  mask-image: url('data:image/svg+xml,<svg width="2000" height="820" viewBox="0 0 2000 820" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_47_190" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="2000" height="820"><path fill-rule="evenodd" clip-rule="evenodd" d="M2000 0H0V792V803.986C0 803.986 15 819.154 40 819.154C55.3539 819.154 69.3654 813.422 80 803.986C90.6346 813.422 104.646 819.154 120 819.154C135.354 819.154 149.365 813.422 160 803.986C170.635 813.422 184.646 819.154 200 819.154C215.354 819.154 229.365 813.422 240 803.986C250.635 813.422 264.646 819.154 280 819.154C295.354 819.154 309.365 813.422 320 803.986C330.635 813.422 344.646 819.154 360 819.154C375.354 819.154 389.365 813.422 400 803.986C410.635 813.422 424.646 819.154 440 819.154C455.354 819.154 469.365 813.422 480 803.986C490.635 813.422 504.646 819.154 520 819.154C535.354 819.154 549.365 813.422 560 803.986C570.635 813.422 584.646 819.154 600 819.154C615.354 819.154 629.365 813.422 640 803.986C650.635 813.422 664.646 819.154 680 819.154C695.354 819.154 709.365 813.422 720 803.986C730.635 813.422 744.646 819.154 760 819.154C775.354 819.154 789.365 813.422 800 803.986C810.634 813.422 824.646 819.154 840 819.154C855.354 819.154 869.365 813.422 880 803.986C890.635 813.422 904.646 819.154 920 819.154C935.354 819.154 949.365 813.422 960 803.986C970.634 813.422 984.646 819.154 1000 819.154C1015.35 819.154 1029.36 813.422 1040 803.986C1050.63 813.422 1064.65 819.154 1080 819.154C1095.35 819.154 1109.36 813.422 1120 803.986C1130.63 813.422 1144.65 819.154 1160 819.154C1175.35 819.154 1189.36 813.422 1200 803.986C1210.63 813.422 1224.65 819.154 1240 819.154C1255.35 819.154 1269.36 813.422 1280 803.986C1290.63 813.422 1304.65 819.154 1320 819.154C1335.35 819.154 1349.36 813.422 1360 803.986C1370.63 813.422 1384.65 819.154 1400 819.154C1415.35 819.154 1429.36 813.422 1440 803.986C1450.63 813.422 1464.65 819.154 1480 819.154C1495.35 819.154 1509.36 813.422 1520 803.986C1530.63 813.422 1544.65 819.154 1560 819.154C1575.35 819.154 1589.36 813.422 1600 803.986C1610.63 813.422 1624.65 819.154 1640 819.154C1655.35 819.154 1669.36 813.422 1680 803.986C1690.63 813.422 1704.65 819.154 1720 819.154C1735.35 819.154 1749.36 813.422 1760 803.986C1770.63 813.422 1784.65 819.154 1800 819.154C1815.35 819.154 1829.37 813.421 1840 803.986C1850.63 813.421 1864.65 819.154 1880 819.154C1895.35 819.154 1909.37 813.422 1920 803.986C1930.63 813.422 1944.65 819.154 1960 819.154C1986.5 819.154 2000 803.986 2000 803.986V792V790V0Z" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_47_190)"><rect width="2000" height="820" fill="%23E5F1FC"/></g></svg>');
  mask-size: cover; }
  @media (max-width: 989px) {
    .video-with-content {
      padding-left: 20px; } }
  .video-with-content__icon-top {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2; }
    .video-with-content__icon-top svg {
      width: initial; }
      .video-with-content__icon-top svg path {
        fill: #fff; }
  .video-with-content-inner {
    width: 100%;
    max-width: 1856px;
    margin: 0 0 0 auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    padding: 100px 0 89px;
    align-items: center;
    position: relative; }
    @media (min-width: 1200px) {
      .video-with-content-inner {
        padding-left: 20px; } }
    @media (max-width: 989px) {
      .video-with-content-inner {
        flex-direction: column-reverse; } }
    .video-with-content-inner-bg {
      position: absolute;
      top: 0;
      left: calc(28.05% + 162px);
      z-index: 1;
      object-fit: contain;
      background: url("./bears.png");
      background-position: center center;
      background-size: contain;
      opacity: 0.05; }
      @media (max-width: 989px) {
        .video-with-content-inner-bg {
          left: -20px;
          background: url("./bears-responsive.png");
          height: 322px;
          width: calc(100% + 20px); }
          .video-with-content-inner-bg svg {
            display: none; } }
    .video-with-content-inner__header {
      width: 28.05%; }
      @media (max-width: 989px) {
        .video-with-content-inner__header {
          width: 100%;
          margin-top: 34px;
          padding-right: 20px; } }
      .video-with-content-inner__header p.subtitle {
        font-weight: 700;
        font-size: 24px;
        line-height: 1;
        letter-spacing: 0.12em;
        margin-bottom: 28px; }
      .video-with-content-inner__header p.content {
        margin-top: 18px;
        font-size: 21px;
        line-height: 1.5; }
      .video-with-content-inner__header h2 {
        color: #007AE5; }
      .video-with-content-inner__header-buttons {
        display: inline-flex;
        height: 100%;
        column-gap: 14px;
        margin-top: 38px; }
        @media (max-width: 989px) {
          .video-with-content-inner__header-buttons {
            flex-direction: column;
            width: 100%;
            row-gap: 15px; } }
        @media (max-width: 989px) {
          .video-with-content-inner__header-buttons .button {
            width: 100%;
            display: block; }
            .video-with-content-inner__header-buttons .button:nth-child(1) {
              background: #007AE5; } }
        .video-with-content-inner__header-buttons .button:hover, .video-with-content-inner__header-buttons .button:focus {
          color: #fff;
          background: #007AE5; }
    .video-with-content-inner__blocks {
      width: calc(100% - 28.05% - 90px);
      display: flex;
      column-gap: 32px;
      flex-wrap: nowrap;
      justify-content: flex-start;
      overflow-x: scroll;
      padding-bottom: 23px;
      position: relative;
      z-index: 2; }
      @media (max-width: 989px) {
        .video-with-content-inner__blocks {
          width: 100%;
          column-gap: 22px;
          padding-bottom: 0; }
          .video-with-content-inner__blocks::-webkit-scrollbar {
            display: none; } }
      .video-with-content-inner__blocks::-webkit-scrollbar {
        height: 9px; }
      .video-with-content-inner__blocks::-webkit-scrollbar-track {
        box-shadow: none;
        background: #fff;
        border-radius: 120px;
        margin-right: 90px; }
        @media (max-width: 989px) {
          .video-with-content-inner__blocks::-webkit-scrollbar-track {
            margin-right: 0; } }
      .video-with-content-inner__blocks::-webkit-scrollbar-thumb {
        background: #007AE5;
        border-radius: 170px; }
      .video-with-content-inner__blocks .video-block {
        border: 3px solid #007AE5;
        border-radius: 18px;
        overflow: hidden;
        width: 322px;
        height: 572px;
        flex: 0 0 auto;
        background: #E5F1FC; }
        .video-with-content-inner__blocks .video-block.loading {
          position: relative; }
          .video-with-content-inner__blocks .video-block.loading::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 3px solid #007AE5;
            border-top-color: transparent;
            animation: spin 1s linear infinite; }
        .video-with-content-inner__blocks .video-block:nth-child(odd) {
          margin-top: 28px; }
          @media (max-width: 989px) {
            .video-with-content-inner__blocks .video-block:nth-child(odd) {
              margin-top: 0;
              margin-bottom: 18px; } }
        .video-with-content-inner__blocks .video-block:nth-child(even) {
          margin-bottom: 28px; }
          @media (max-width: 989px) {
            .video-with-content-inner__blocks .video-block:nth-child(even) {
              margin-bottom: 0;
              margin-top: 18px; } }
        .video-with-content-inner__blocks .video-block video {
          width: 100%;
          height: 100%;
          object-fit: cover; }
        .video-with-content-inner__blocks .video-block img {
          width: 100%;
          height: 100%;
          object-fit: cover; }
        @media (max-width: 989px) {
          .video-with-content-inner__blocks .video-block {
            width: 215px;
            height: 383px; } }

.video-block {
  cursor: pointer; }

.video-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: none;
  justify-content: center;
  align-items: center; }

.video-lightbox__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 28, 61, 0.75); }

.video-lightbox__content {
  position: relative;
  width: 100%;
  margin: auto 20px;
  z-index: 1;
  max-width: 500px; }

.video-lightbox__close {
  position: absolute;
  top: -40px;
  right: -15px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 2; }
  @media (min-width: 1200px) {
    .video-lightbox__close {
      top: -15px;
      right: -30px; } }

.video-lightbox__close svg {
  fill: white; }

.video-lightbox__video-container {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center; }

.video-lightbox__video-container video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }
  @media (min-width: 1200px) {
    .video-lightbox__video-container video {
      max-width: 600px;
      height: calc(80vh - 40px); } }

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg); } }