/*
 |--------------------------------------------------------------------------
 | Helper mixins, feel free to add/remove any that you might not use
 | Won't be rendered in the output if not used
 |--------------------------------------------------------------------------
 */
video {
  width: 100%;
  height: auto; }

.video--controler {
  z-index: 9; }

.button-video {
  width: 80px;
  height: 80px;
  min-width: 80px !important;
  position: relative;
  opacity: 1;
  background-color: #fff !important;
  box-shadow: 0 8px 24px rgba(12, 56, 103, 0.04), 0 2px 8px rgba(12, 56, 103, 0.08);
  transition: all 0.3s ease-in-out; }
  @media (max-width: 991.98px) {
    .button-video {
      width: 70px;
      height: 70px;
      min-width: 70px !important; }
      .button-video svg {
        width: 25px !important;
        height: 25px !important; } }
  @media (max-width: 991.98px) {
    .button-video {
      transition: all 0.3s ease-in-out; } }
  .button-video span {
    position: absolute; }
  .button-video path {
    transition: all 0.3s ease-in-out;
    fill: #0C3867; }
  .button-video:hover {
    border-color: #fff !important;
    background-color: #fff; }
    .button-video:hover path {
      fill: #071f39; }

.modal-close {
  position: absolute;
  right: 32px;
  top: 32px;
  width: 20px;
  height: 20px;
  opacity: 0.9;
  background: none;
  border: none; }
  .modal-close:before, .modal-close:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 33px;
    width: 2px;
    background-color: #fff; }
  .modal-close:before {
    transform: rotate(45deg); }
  .modal-close:after {
    transform: rotate(-45deg); }
  .modal-close:focus {
    outline: none; }
  .modal-close:hover {
    opacity: 1; }

.modal-content {
  background-color: transparent !important;
  border: none !important;
  border-radius: unset !important; }