1.modal-overlay {
2  width:100%;
3  height:100%;
4  z-index:-1;
5  background-color:#000;
6  position:fixed;
7  top:0;
8  left:0;
9  margin:0;
10  padding:0;
11  opacity: 0;
12}
13
14.modal-overlay.active{
15  z-index:100;
16  opacity: .5;
17  display: block;
18  @include fastTransition-all;
19}
20
21.modal {
22  width:50%;
23  max-width: 850px;
24  margin: .5em auto;
25  padding: .8em 1.5em;
26  border: thin #000 solid;
27  background-color:#fff;
28  z-index:101;
29  position:fixed;
30  top:-100%;
31  left:25%;
32  overflow: hidden;
33  @include fastTransition-all;
34  @include mediaQuery(medium) {
35    padding: 2.5em;
36  }
37}
38
39.modal.active{
40  top: 25%;
41  @include fastTransition-all;
42  display: block;
43}
44
45.modal .page-header {
46  padding-bottom: .7em;
47}
48
49.screen-reader-offscreen {
50  position:absolute;
51  left:-999px;
52  width:1px;
53  height:1px;
54  top:auto;
55}
56.modal__content {
57  border-bottom: 1px solid $lightbg__grey;
58  padding-bottom: 1em;
59  margin-bottom: 2em;
60}
61.modal__link {
62  display: block;
63  margin: .8em 0 1em;
64  @include mediaQuery(medium) {
65    display: inline-block;
66    margin: .6em 0;
67  }
68}
69.modal__button-wrapper {
70  float: right;
71  button {
72    margin-bottom: .8em;
73    margin-right: .8em;
74    display: inline-block;
75    @include mediaQuery(medium) {
76      margin-left: .8em;
77      margin-right: 0;
78    }
79  }
80}
81