.bg__modal{
  background-color: rgba($clDark,0.8);
  display: block;
  z-index: 9999;
  height: 100%;
  left: 0;
  overflow-y: scroll;
  position: fixed;
  top: 95px; /* height of the header*/
  width: 100%;

  > .container{
    position: relative;
    background-color: $clWhite;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    margin: 40px auto;
    padding: 30px;
    height: calc(100% - 80px);
    box-sizing: border-box;
    padding: 0;

    &.medium {
      width:60%;
    }

    &.small {
      width:40%;
    }

    iframe{
      width: 100%;
      height: 100%;
    }

    > .close{
      background-color: rgba($clDark, 0.5);
      background-image: $iconCrossUrl;
      background-position: center right 15px;
      background-repeat: no-repeat;
      background-size: 20px;
      color: $clWhite;
      font-family: $fontHeading;
      cursor: pointer;
      display: block;
      height: 40px;
      line-height: 40px;
      opacity: 0.8;
      position: absolute;
      right: 0;
      text-shadow: none;
      text-transform: uppercase;
      top: -40px;
      width: 90px;
      font-size: 15px;

      &:hover{
        opacity: 1.0;
      }
    }

  }

}