.drawer {
  position: relative;
  width: 100%;
  max-height: 0;
  background: $drawer-background-color;
  @include box-shadow(
    inset $drawer-inner-shadow-x-offset  #{-$drawer-inner-shadow-y-offset} $drawer-inner-shadow-blur $drawer-inner-shadow-color,
    inset $drawer-inner-shadow-x-offset $drawer-inner-shadow-y-offset $drawer-inner-shadow-blur $drawer-inner-shadow-color);
  ;
  overflow: hidden;
  @include transition-duration(.3s);
  &.active {
    height: auto;
    max-height: 800px;
    @include transition-duration(.5s);
  }
}

.modal {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -999999;
	display: none;
  background: rgb(0, 0, 0);
  background: $modal-overlay-color;
 	> .content {
	  	min-width: 50%;
 		max-width: 85%;
 		min-height: 50%;
		max-height: 95%;
 		position: relative;
 		top: 5%;
 		margin: 0 auto;
 		padding-top: 10px;
 		padding-bottom: 10px;
 		background: $modal-window-color;
 		z-index: 2;
 		overflow: auto;
    @include respond(portrait-tablets) {
      width: 90%;
      min-height: 80%;
      max-height: 95%;
      top: 10%;
    }
    @include respond(all-phones) {
      width: 92.5%;
      min-height: 92.5%;
      max-height: 95;
      top: 3.75%;
    }
 	  > .close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
    }
  }
  &, > .content {
    @include opacity(0);
    @include transition-duration(.1s);
  }
 	&.active {
	        display: block;
 		z-index: 999999;
    &, > .content {
      @include opacity(1);
    }
 	}
}