.modal-open {
  overflow: hidden;
  height: 100vh;
}


.modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: auto;
  overflow: hidden;
  z-index: @zindex-modal;

    .no-touch &.fade {
      .translate3d(0, -150px, 0);
      .transition(transform 500ms ease-in-out);
    }


    .no-touch &.in {
      .translate3d(0, 0, 0);
    }
}


.modal-dialog {
  position: relative;
  display: block;
  .square(100%);
  padding: 15px;
  font-size: 0;
  .text-center;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

    &:after {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
}


.modal-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  font-size: @font-size-base;
  background: #ececec;
  .clearfix;
}



.m-close {
  position: absolute;
  top: 0px;
  right: 0px;
  .square(50px);

    &:before,
    &:after {
      content: '';
      .element-center;
      .size(30px, 4px);
      .rounded(2px);
      background-color: #fff;
    }

    &:before {
      .rotate(45deg);
    }


    &:after {
      .rotate(-45deg);
    }
}


.backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  .opacity(0);
  visibility: hidden;
  background-color: #000;
  .transition(all 500ms ease-in-out);

    &.in {
      .opacity(.7);
      visibility: visible;
    }
}