<div class="wrapper">
  <div class="container">
    <div class="btn open">
      Click Me!
    </div>
    <div class="circle"></div>
    <div class="modal">
      <div class="modal-container">
        <div class="title">
          The More You Know
          <i class="fa fa-times close"></i>
        </div>
        <div class="copy">
          Modals are a great way to give your user access to additional or supporting information without taking up extra space on the page. This swing out modal is animated with SASS, with a little jQuery to help out with clicked states.
        </div>
        <div class="btn close">
          Continue
        </div>
      </div>
    </div>
  </div>
</div>

@import "bourbon";

@import url(https://fonts.googleapis.com/css?family=Varela+Round);

$bg: #1e1e1e;
$modal:#ECECEC;
$modal-accent: #4E9CFF;
$open: #F47265;
$open-shadow: #e84d3e;

%center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


//Base
* {box-sizing: border-box;}

html, body {
  height: 100%;
  width: 100%;
  background: $bg;
  overflow:hidden;
}

body {
  font-family: 'Varela Round', sans-serif;
}

//open
.btn.open {
  @extend %center;
  color: whitesmoke;
  width: 250px;
  height: 70px;
  background: $open;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  padding: 22px 0;
  border-radius: 3px;
  box-shadow: 0 8px 0 0 $open-shadow;
  cursor: pointer;
  transition: all .3s ease;
  z-index: 5;
  
  &:hover {
    box-shadow: 0 5px 0 0 darken($open-shadow, 2%);
    margin-top: 3px;
  }
  
  &:active {
    box-shadow: 0 0 0 0 darken($open-shadow, 6%);
    margin-top: 8px;    
  }
  
}

.circle {
  border-radius: 100%;
  height: 2px;
  width: 2px;
  background: $open;
  opacity: .3;
  @extend %center;
  z-index: 2;
  transition: all .8s ease;
}

//Modal 
.modal {
  @extend %center;
  //height: 250px;
  //width: 550px;
  background: $modal;
  border-radius: 3px;
  box-shadow: 0 8px 0 0 darken($modal, 18%);
  padding: 0;
  
  .title {
    color: $modal-accent;
    //float: left;
    font-size: 28px;
    font-weight: bold;
    margin-top: -5px;
    padding: 10px 15px 10px 20px;
    border-bottom: 5px solid $modal-accent;
    margin: -15px -20px 12px;
    
    i {
      float: right;
      color: $bg;
      opacity: .3;
      transition: all .2s ease;
      cursor: pointer;
      
      &:hover {
        opacity: .5;
      }
    }
  }
  
  .copy {
    float: none;
    clear: both;
    font-size: 16px;
  }
  
  .copy {
    line-height: 1.3;
  }
  
  .btn.close {
    @extend .btn.open;
    top: 78%;
    height: 50px;
    padding: 15.5px;
    font-size: 24px;
    background: lighten($modal-accent, 6%);
    box-shadow: 0 8px 0 0 $modal-accent;
    cursor: pointer;
    transition: all .3s ease;

    &:hover {
      box-shadow: 0 5px 0 0 darken($modal-accent, 2%);
      margin-top: 3px;
    }

    &:active {
      box-shadow: 0 0 0 0 darken($modal-accent, 6%);
      margin-top: 8px;    
    }
  }
}

.modal-container {
  display: none;
}

.in {
  animation: in 1s ease;
}

.out {
  animation: out 1s ease;
}

@keyframes in {
  0% {
    height: 0;
    width: 0;
    z-index: 0;
  }
  
  30% {
    top: 20%;
    z-index: 0;
  }
  
  60% {
    z-index: 1000;
  }

  100% {
    top: 50%;
    z-index: 1000;
    height: 250px;
    width: 550px;
  }
}

@keyframes out {
  0% {
    top: 50%;
    z-index: 1000;
    height: 250px;
    width: 550px;
  }
  
  30% {
    top: 80%;
    z-index: 1000;
    padding: 0;
  }
  
  60% {
    z-index: 0;   
    
  }
  
  90%, 100% {
    height: 0;
    width: 0;
    z-index: 0;
  }
}

.circle-active {
  height: 700px;
  width: 700px;
  opacity: 0;
}

.circle-hide {
  opacity: 0!important;
}

$( ".open" ).click(function() {
  $(".modal").removeClass("out");
  $(".modal").addClass("in");
  setTimeout(function() {
    $(".modal").css("z-index", "1000");
    $(".modal").css("height", "250px");
    $(".modal").css("width", "550px");
    $(".modal").css("padding", "20px");
  }, 700);
  setTimeout(function() {
    $(".modal-container").fadeIn("slow");
  }, 900);
  $(".circle").addClass("circle-active");
  setTimeout(function() {
    $(".circle").removeClass("circle-active");
    $(".circle").addClass("circle-hide");
  }, 800);
});

$( ".close" ).click(function() {
  $(".modal-container").fadeOut("fast");
  $(".circle").removeClass("circle-hide");
  setTimeout(function() {
    $(".modal").removeClass("in");
    $(".modal").addClass("out");
  }, 150);
  setTimeout(function() {
    $(".modal").css("z-index", "0");
    $(".modal").css("height", "0");
    $(".modal").css("width", "0");
    $(".modal").css("padding", "0");
  }, 150);
});