.modal {
    z-index: 99;
    padding: 20px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: center;
            justify-content: center;
  }
  .modal__checkbox {
    display: none;
  }
  .modal__checkbox:checked + .modal {
    display: -webkit-box;
    display: flex;
  }
  .modal__backdrop {
    position: absolute;
    display: -webkit-box;
    display: flex;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
  }
  .modal__content {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-align: stretch;
            align-items: stretch;
    padding: 20px;
    width: 600px;
    height: 400px;
    background-color: #fff;
    border-radius: 10px;
    z-index: 10;
    -webkit-animation: animation 1.5s linear both;
            animation: animation 1.5s linear both;
  }
  .modal__image {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-align: stretch;
            align-items: stretch;
    border-radius: 10px;
    z-index: 10;
    -webkit-animation: zoom 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
            animation: zoom 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  }
  .modal__image img {
    width: 100%;
    max-width: 800px;
    height: auto;
  }
  .modal__video {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-align: stretch;
            align-items: stretch;
    border-radius: 10px;
    z-index: 10;
    -webkit-animation: zoom 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
            animation: zoom 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  }
  .modal__video .video-player {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    height: auto;
  }
  .modal__video .video-player video {
    width: 100%;
    max-width: 700px;
  }
  .modal__close {
    position: absolute;
    right: 0;
    top: -30px;
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 0;
            flex-grow: 0;
    width: 25px;
    height: 25px;
    -webkit-box-pack: end;
            justify-content: flex-end;
    cursor: pointer;
    font-family: arial;
    color: #ffffff;
  }
  .modal__close:after, .modal__close:before {
    position: absolute;
    right: 15px;
    content: ' ';
    height: 25px;
    width: 2px;
    background-color: white;
  }
  .modal__close:after {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .modal__close:before {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  .modal__close.outside {
    margin: 0 0 10px 0;
  }

  @-webkit-keyframes zoom {
    0% {
      -webkit-transform: scale(0);
              transform: scale(0);
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }

  @keyframes zoom {
    0% {
      -webkit-transform: scale(0);
              transform: scale(0);
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }
  @-webkit-keyframes animation {
    0% {
      -webkit-transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    4.7% {
      -webkit-transform: matrix3d(0.659, 0, 0, 0, 0, 0.725, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(0.659, 0, 0, 0, 0, 0.725, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    5.71% {
      -webkit-transform: matrix3d(0.688, 0, 0, 0, 0, 0.776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(0.688, 0, 0, 0, 0, 0.776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    9.41% {
      -webkit-transform: matrix3d(0.779, 0, 0, 0, 0, 0.942, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(0.779, 0, 0, 0, 0, 0.942, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    11.31% {
      -webkit-transform: matrix3d(0.818, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(0.818, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    14.11% {
      -webkit-transform: matrix3d(0.865, 0, 0, 0, 0, 1.07, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(0.865, 0, 0, 0, 0, 1.07, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    17.02% {
      -webkit-transform: matrix3d(0.905, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(0.905, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    18.72% {
      -webkit-transform: matrix3d(0.923, 0, 0, 0, 0, 1.106, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(0.923, 0, 0, 0, 0, 1.106, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    22.62% {
      -webkit-transform: matrix3d(0.957, 0, 0, 0, 0, 1.089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(0.957, 0, 0, 0, 0, 1.089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    24.32% {
      -webkit-transform: matrix3d(0.968, 0, 0, 0, 0, 1.075, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(0.968, 0, 0, 0, 0, 1.075, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    28.33% {
      -webkit-transform: matrix3d(0.986, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(0.986, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    29.93% {
      -webkit-transform: matrix3d(0.992, 0, 0, 0, 0, 1.024, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(0.992, 0, 0, 0, 0, 1.024, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    33.93% {
      -webkit-transform: matrix3d(1.001, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(1.001, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    35.54% {
      -webkit-transform: matrix3d(1.003, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(1.003, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    41.04% {
      -webkit-transform: matrix3d(1.008, 0, 0, 0, 0, 0.98, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(1.008, 0, 0, 0, 0, 0.98, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    45.15% {
      -webkit-transform: matrix3d(1.009, 0, 0, 0, 0, 0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(1.009, 0, 0, 0, 0, 0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    52.15% {
      -webkit-transform: matrix3d(1.007, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(1.007, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    63.26% {
      -webkit-transform: matrix3d(1.004, 0, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(1.004, 0, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    72.57% {
      -webkit-transform: matrix3d(1.002, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(1.002, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    85.49% {
      -webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(1, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    100% {
      -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
  }
  @keyframes animation {
    0% {
      -webkit-transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    4.7% {
      -webkit-transform: matrix3d(0.659, 0, 0, 0, 0, 0.725, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(0.659, 0, 0, 0, 0, 0.725, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    5.71% {
      -webkit-transform: matrix3d(0.688, 0, 0, 0, 0, 0.776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(0.688, 0, 0, 0, 0, 0.776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    9.41% {
      -webkit-transform: matrix3d(0.779, 0, 0, 0, 0, 0.942, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(0.779, 0, 0, 0, 0, 0.942, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    11.31% {
      -webkit-transform: matrix3d(0.818, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(0.818, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    14.11% {
      -webkit-transform: matrix3d(0.865, 0, 0, 0, 0, 1.07, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(0.865, 0, 0, 0, 0, 1.07, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    17.02% {
      -webkit-transform: matrix3d(0.905, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(0.905, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    18.72% {
      -webkit-transform: matrix3d(0.923, 0, 0, 0, 0, 1.106, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(0.923, 0, 0, 0, 0, 1.106, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    22.62% {
      -webkit-transform: matrix3d(0.957, 0, 0, 0, 0, 1.089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(0.957, 0, 0, 0, 0, 1.089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    24.32% {
      -webkit-transform: matrix3d(0.968, 0, 0, 0, 0, 1.075, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(0.968, 0, 0, 0, 0, 1.075, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    28.33% {
      -webkit-transform: matrix3d(0.986, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(0.986, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    29.93% {
      -webkit-transform: matrix3d(0.992, 0, 0, 0, 0, 1.024, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(0.992, 0, 0, 0, 0, 1.024, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    33.93% {
      -webkit-transform: matrix3d(1.001, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(1.001, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    35.54% {
      -webkit-transform: matrix3d(1.003, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(1.003, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    41.04% {
      -webkit-transform: matrix3d(1.008, 0, 0, 0, 0, 0.98, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(1.008, 0, 0, 0, 0, 0.98, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    45.15% {
      -webkit-transform: matrix3d(1.009, 0, 0, 0, 0, 0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(1.009, 0, 0, 0, 0, 0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    52.15% {
      -webkit-transform: matrix3d(1.007, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(1.007, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    63.26% {
      -webkit-transform: matrix3d(1.004, 0, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(1.004, 0, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    72.57% {
      -webkit-transform: matrix3d(1.002, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(1.002, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    85.49% {
      -webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(1, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    100% {
      -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
  }