* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body.modalized{
  overflow: hidden;
}

.hidden {
  display: none;
}

.modal{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #002F67;
  z-index: 1000;
  padding: 15px;
  padding-top: 0px;
  }

  .modal-bg {
    width: 100%;
    height: 100%;
    opacity: 95;
  }
  
      .modal-body{
        background: #fff;
        padding: 15px;
      }
  
      .modal-close {
        position: absolute;
        right: 15px;
        top: 15px;
        outline: none;
        appearance: none;
        background: none;
        border: 0px;
        font-weight: bold;
        cursor: pointer;
      }
  
    
      .cnt-iframe-container__modal {
        display: block;
        height: auto;
        min-height: 1px;
        object-fit: cover;
        width: 100%;
        position: relative;
        box-sizing: border-box;
    }
  
    .cnt-iframe-container__modal:before {
      padding-top: calc(75% - 2rem);
      content: "";
      display: block;
      width: 100%;
  }

  .modal-close-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.4rem;
      color: #000 !important;
        font-size: 0.8rem;
        font-weight: bold;
        margin-right: 15px;
      text-align: right;
  }

  .modal-close-btn:hover{
    text-decoration: underline;
  }
  
  .modal-header {
      text-align: right;
      background: #FFD617;
      margin: 0 -15px 15px -15px;
  }

  .modal .cnt-iframe-container__modal iframe{
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
  }
  
  @media (orientation: landscape) {
    .cnt-iframe-container__modal:before {
      width: 100%;
      padding-top: calc(75% - 4rem);
    }
  }
  
  @media (orientation: portrait) {
  .cnt-iframe-container__modal:before {
      width: 100%;
      padding-top: calc(133% - 4rem);
  }
  }
  @media (orientation: landscape) and (min-device-aspect-ratio: 16/9) {
  .cnt-iframe-container__modal:before {
      width: 100%;
      padding-top: calc(48% - 4rem);
  }
  }
  
  @media (orientation: portrait) and (min-device-aspect-ratio: 37/81) {
  .cnt-iframe-container__modal:before {
      width: 100%;
      padding-top: calc(185% - 4rem);
  }

  }

  @media (orientation: portrait) and (min-device-aspect-ratio: 37/81) and (min-width: 540px) {
    .cnt-iframe-container__modal:before {
        width: 100%;
        padding-top: calc(140% - 4rem);
    }
  }