1  @import './assets/styles/global.scss';
 2  
 3  .modal {
 4    display: none;
 5  
 6    &.modal-open {
 7      display: block;
 8      position: fixed;
 9      top: 0;
10      left: 0;
11      width: 100vw;
12      height: 100vh;
13      z-index: 3;
14      background-color: $navy-dark;
15  
16      /* enable smooth scrolling on mobile devices */
17      overflow-y: scroll;
18      -webkit-overflow-scrolling: touch;
19    }
20  
21    &.modal-on-mobile-only {
22  
23      @media (min-width: $desktop) {
24        background-color: transparent;
25        height: auto;
26        display: block;
27        position: initial;
28        width: auto;
29  
30        .modal-inner {
31          position: initial;
32          padding: 0;
33          width: auto;
34          height: auto;
35          top: inherit;
36          left: inherit;
37        }
38  
39        .modal-close {
40          display: none;
41        }
42      }
43    }
44  }
45  
46  .modal-inner {
47    width: 100%;
48    padding-top: calculateRem(24);
49    position: relative;
50  
51    @media (min-width: $tablet) {
52      padding-top: calculateRem(40);
53    }
54  }
55  
56  .modal-close {
57    position: fixed;
58    top: calculateRem(16);
59    right: calculateRem(12);
60    z-index: 4;
61  
62    @media (min-width: $desktop) {
63      top: calculateRem(72);
64      right: inherit;
65      left: calc(370px + 50%);
66  
67      svg {
68        width: calculateRem(30);
69        height: calculateRem(30);
70      }
71    }
72  
73    &:hover svg path:last-child {
74      fill: $dark-red;
75    }
76  }