.fp-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto;
    z-index: 2000;
    visibility: hidden;
    backface-visibility: hidden;
    @include transform( translateX(-50%) translateY(-65%) );
    color: $fp-white;

    &.shown{ visibility: visible; }

    .content{
      text-align: center;

      h2                { font-size: 175%; font-weight: 400; margin-bottom: $base-space; }
      p.text            { margin-top: 0; line-height: 1.2; }
      p.controls        { margin-top: $base-space * 4; }
    }
}

 
.fp-modal-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;
    background: $fp-primary-color - 30;
    transition: all 0.3s;
}
 
.fp-modal.shown ~ .fp-modal-overlay {
    opacity: 1;
    visibility: visible;
}

// The effect
.fp-modal .content {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.fp-modal.shown ~ .fp-modal-overlay {
    background: $fp-primary-color;
} 

.fp-modal .content h2,
.fp-modal .content {
    background: transparent;
}

.fp-modal.shown .content {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}