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}
43
44.modal .page-header {
45  padding-bottom: .7em;
46}
47
48.screen-reader-offscreen {
49  position:absolute;
50  left:-999px;
51  width:1px;
52  height:1px;
53  top:auto;
54}
55.modal__content {
56  border-bottom: 1px solid $lightbg__grey;
57  padding-bottom: 1em;
58  margin-bottom: 2em;
59}
60.modal__link {
61  display: block;
62  margin: .8em 0 1em;
63  @include mediaQuery(medium) {
64    display: inline-block;
65    margin: .6em 0;
66  }
67}
68.modal__button-wrapper {
69  float: right;
70  button {
71    margin-bottom: .8em;
72    margin-right: .8em;
73    display: inline-block;
74    @include mediaQuery(medium) {
75      margin-left: .8em;
76      margin-right: 0;
77    }
78  }
79}