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