1/* Toggles */
2
3.drawer {
4  position: relative;
5  width: 100%;
6  max-height: 0;
7  background: $drawer-background-color;
8  @include box-shadow(
9    inset $drawer-inner-shadow-x-offset  #{-$drawer-inner-shadow-y-offset} $drawer-inner-shadow-blur $drawer-inner-shadow-color,
10    inset $drawer-inner-shadow-x-offset $drawer-inner-shadow-y-offset $drawer-inner-shadow-blur $drawer-inner-shadow-color);
11  ;
12  overflow: hidden;
13  @include transition-duration(.3s);
14  &.active {
15    height: auto;
16    max-height: 800px;
17    @include transition-duration(.5s);
18  }
19}
20
21.modal {
22	width: 100%;
23	height: 100%;
24	position: fixed;
25	top: 0;
26	left: 0;
27	z-index: 999999;
28  background: rgb(0, 0, 0);
29  background: $modal-overlay-color;
30 	> .content {
31 		width: 50%;
32 		min-height: 50%;
33    max-height: 65%;
34 		position: relative;
35 		top: 25%;
36 		margin: 0 auto;
37 		padding: $gutter-in-px;
38 		background: $modal-window-color;
39 		z-index: 2;
40 		overflow: auto;
41    @include respond(portrait-tablets) {
42      width: 80%;
43      min-height: 80%;
44      max-height: 80%;
45      top: 10%;
46    }
47    @include respond(all-phones) {
48      width: 92.5%;
49      min-height: 92.5%;
50      max-height: 92.5%;
51      top: 3.75%;
52    }
53 	  > .close {
54      position: absolute;
55      top: 10px;
56      right: 10px;
57      cursor: pointer;
58      z-index: 3;
59    }
60  }
61  &, > .content {
62    visibility: hidden;
63    @include opacity(0);
64  }
65 	&.active {
66    @include transition-property(opacity);
67    @include transition-duration(.3s);
68    &, > .content {
69      visibility: visible;
70      @include opacity(1);
71    }
72 	}
73}
74