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