@media screen and (max-width: 640px) {
  audio, canvas, progress, video {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important; } }

.myclear {
  line-height: 0;
  font-size: 0;
  clear: both; }

.video_block {
  display: none;
  position: fixed;
  width: 534px;
  height: 300px;
  top: 50%;
  left: 50%;
  margin-top: -167px;
  margin-left: -250px;
  z-index: 10000; }

.sample-closed {
  background: url(closed.svg) 0 0 no-repeat;
  height: 15px;
  width: 15px;
  position: absolute;
  right: 0px;
  top: -25px;
  z-index: 10000;
  cursor: pointer; }

.bgbg {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: 0.7;
  z-index: 9999; }

@media screen and (min-width: 500px) and (max-width: 767px) {
  .video_block {
    width: 100%;
    height: 100%;
    max-height: 200px;
    max-width: 356px;
    margin-left: -178px;
    margin-top: -100px; } }

@media screen and (min-width: 240px) and (max-width: 500px) {
  .video_block {
    width: 100%;
    height: 100%;
    max-height: 180px;
    max-width: 320px;
    margin-left: -160px;
    margin-top: -90px; } }

.sample-popup {
  display: none; }

.red_block.video_block2 {
  display: block !important; }

.red_block .slick-slide {
  width: 100%; }
  .red_block__item {
    width: 100%;
    flex-direction: column; }
  .red_block__item-top {
    position: relative;
    padding-top: 56%;
    width: 100%;
    overflow: hidden;
    border-radius: 20px; }
    .red_block__item-top.video:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='160px' height='160px'%3E%3Cpath fill-rule='evenodd' opacity='0.8' fill='rgb(255, 255, 255)' d='M73.333,65.790 L73.333,94.210 L94.648,80.000 L73.333,65.790 ZM63.521,47.455 C65.689,46.295 68.319,46.422 70.365,47.787 L110.365,74.453 C112.219,75.689 113.333,77.770 113.333,80.000 C113.333,82.229 112.219,84.310 110.365,85.547 L70.365,112.214 C68.319,113.577 65.689,113.704 63.521,112.544 C61.353,111.384 60.000,109.125 60.000,106.667 L60.000,53.333 C60.000,50.874 61.353,48.616 63.521,47.455 ZM-0.000,80.000 C-0.000,35.817 35.817,-0.000 80.000,-0.000 C124.183,-0.000 160.000,35.817 160.000,80.000 C160.000,124.182 124.183,159.999 80.000,159.999 C35.817,159.999 -0.000,124.182 -0.000,80.000 ZM80.000,13.333 C43.181,13.333 13.333,43.181 13.333,80.000 C13.333,116.819 43.181,146.666 80.000,146.666 C116.819,146.666 146.667,116.819 146.667,80.000 C146.667,43.181 116.819,13.333 80.000,13.333 Z'/%3E%3C/svg%3E") 50% no-repeat rgba(0, 0, 0, 0.5);
      z-index: 1;
      pointer-events: none;
      transition: all 0.3s ease;
      will-change: transform;
      border-radius: 20px; }
      .red_block__item-top.video:hover:before {
        transform: scale(1.1); }
    @media (max-width: 991px) {
  .red_block__item-top {
    padding-top: 45%; } }
    @media (max-width: 480px) {
  .red_block__item-top {
    padding-top: 80%; } }
    .red_block__item-top img {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: 20px;
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .red_block__item-title {
    margin-top: 28px;
    text-align: center;
    font-size: 70px;
    color: #000;
    text-transform: uppercase;
    font-weight: 900;
    width: 100%; }
    @media (max-width: 991px) {
  .red_block__item-title {
    font-size: 65px; } }
    @media (max-width: 768px) {
  .red_block__item-title {
    font-size: 40px; } }
    @media (max-width: 480px) {
  .red_block__item-title {
    font-size: 27px; } }
  .red_block__item-text {
    text-align: center;
    font-size: 25px;
    margin-top: 25px;
    text-align: center;
    color: #037390;
    width: 100%; }
    @media (max-width: 768px) {
  .red_block__item-text {
    font-size: 20px; } }
    @media (max-width: 480px) {
  .red_block__item-text {
    font-size: 16px; } }
  .red_block .slick-dots {
    margin: 0;
    padding: 0;
    text-align: center;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }
    .red_block .slick-dots li {
      list-style-type: none;
      margin: 2px; }
      .red_block .slick-dots li.slick-active button, .red_block .slick-dots li:hover button {
        background: #037390; }
      .red_block .slick-dots li button {
        font-size: 0;
        border-radius: 100%;
        border: none;
        background: #ffdb00;
        width: 45px;
        height: 45px;
        min-width: 45px; }
        @media (max-width: 480px) {
  .red_block .slick-dots li button {
    width: 25px;
    height: 25px;
    min-width: 25px; } }