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