1/*!
2Title: TITLE
3Author: Nick Salloum
4Author URI: http://callmenick.com/
5Description: My theme
6Version: 0.1.0
7*/
8
9.mm-menu-bg {
10    position: fixed;
11    background-color: __background__;
12    bottom: 7px;
13    left: 12px;
14    width: 44px;
15    height: 44px;
16    border-radius: 1rem;
17}
18
19.mm-menu-toggle {
20    position: fixed;
21    /* top: 12px;
22    left: 12px; */
23    left: 20px;
24    bottom: 20px;
25    z-index: 20;
26    width: 28px;
27    height: 18px;
28    /* background: -webkit-linear-gradient(90deg, rgba(33, 33, 33, 0), rgba(33, 33, 33, 0) 7px, #fff 7px, #fff 11px, rgba(33, 33, 33, 0) 11px, rgba(33, 33, 33, 0) 18px); */
29    /* background: linear-gradient(0deg, rgba(33, 33, 33, 0), rgba(33, 33, 33, 0) 7px, #fff 7px, #fff 11px, rgba(33, 33, 33, 0) 11px, rgba(33, 33, 33, 0) 18px); */
30    background: -webkit-linear-gradient(90deg, rgba(33, 33, 33, 0), rgba(33, 33, 33, 0) 7px, __theme_color__ 7px, __theme_color__ 11px, rgba(33, 33, 33, 0) 11px, rgba(33, 33, 33, 0) 18px);
31    background: linear-gradient(0deg, rgba(33, 33, 33, 0), rgba(33, 33, 33, 0) 7px, __theme_color__ 7px, __theme_color__ 11px, rgba(33, 33, 33, 0) 11px, rgba(33, 33, 33, 0) 18px);
32    font-size: 0;
33    text-indent: -9999px;
34    border: none!important;
35    box-shadow: none!important;
36}
37
38.mm-menu-toggle::after,
39.mm-menu-toggle::before {
40    display: block;
41    position: absolute;
42    left: 0;
43    width: 100%;
44    height: 4px;
45    background-color: __theme_color__;
46    content: ""
47}
48
49.mm-menu-toggle::before {
50    top: 0;
51    -webkit-transform-origin: bottom left;
52    -ms-transform-origin: bottom left;
53    transform-origin: bottom left
54}
55
56.mm-menu-toggle::after {
57    bottom: 0;
58    -webkit-transform-origin: top left;
59    -ms-transform-origin: top left;
60    transform-origin: top left
61}
62
63.mm-menu-toggle,
64.mm-menu-toggle::after,
65.mm-menu-toggle::before {
66    -webkit-transition: all .5s;
67    transition: all .5s
68}
69
70.mm-menu-toggle.active {
71    -webkit-transform: rotate(360deg);
72    -ms-transform: rotate(360deg);
73    transform: rotate(360deg)
74}
75
76.mm-menu-toggle.active::before {
77    width: 75%;
78    -webkit-transform: translateY(7px) rotate(-45deg);
79    -ms-transform: translateY(7px) rotate(-45deg);
80    transform: translateY(7px) rotate(-45deg)
81}
82
83.mm-menu-toggle.active::after {
84    width: 75%;
85    -webkit-transform: translateY(-7px) rotate(45deg);
86    -ms-transform: translateY(-7px) rotate(45deg);
87    transform: translateY(-7px) rotate(45deg)
88}
89
90.mm-menu {
91    position: fixed;
92    top: 0;
93    left: 0;
94    z-index: 10;
95    background-color: __background__;
96    width: 100%;
97    height: 100%;
98    overflow-y: auto;
99    box-shadow: 0;
100    -webkit-transform: translateX(-100%);
101    -ms-transform: translateX(-100%);
102    transform: translateX(-100%);
103    -webkit-transition: -webkit-transform .5s, box-shadow .5s;
104    transition: transform .5s, box-shadow .5s
105}
106
107
108/* Hide scrollbar for Chrome, Safari and Opera */
109
110.mm-menu::-webkit-scrollbar {
111    display: none;
112}
113
114
115/* Hide scrollbar for IE, Edge and Firefox */
116
117.mm-menu {
118    -ms-overflow-style: none;
119    /* IE and Edge */
120    scrollbar-width: none;
121    /* Firefox */
122}
123
124.mm-menu.active {
125    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
126    -webkit-transform: translateX(0);
127    -ms-transform: translateX(0);
128    transform: translateX(0)
129}
130
131@media all and (min-width:300px) {
132    .mm-menu {
133        width: 300px;
134        -webkit-transform: translateX(-300px);
135        -ms-transform: translateX(-300px);
136        transform: translateX(-300px)
137    }
138}
139
140.mm-menu__header {
141    position: relative;
142    width: 100%;
143    /* height: 188px; */
144    /* background-color: #CDDC39 */
145    margin-bottom: 0.5rem;
146}
147
148.mm-menu__title {
149    /* position: absolute; */
150    bottom: 12px;
151    left: 12px;
152    margin: 0;
153    padding: 0;
154    color: #fff;
155    font-size: 22px
156}
157
158.mm-menu__items {
159    list-style: none;
160    margin: 0;
161    padding: 0
162}
163
164.mm-menu__item {
165    display: block;
166    width: 100%;
167    opacity: 0;
168    -webkit-transform: translateX(-50%);
169    -ms-transform: translateX(-50%);
170    transform: translateX(-50%)
171}
172
173.mm-menu__item.in-view {
174    opacity: 1;
175    -webkit-transform: translateX(0);
176    -ms-transform: translateX(0);
177    transform: translateX(0)
178}
179
180.mm-menu__item.item-1 {
181    -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
182    transition: opacity .5s .1s, transform .5s .1s
183}
184
185.mm-menu__item.item-2 {
186    -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
187    transition: opacity .5s .2s, transform .5s .2s
188}
189
190.mm-menu__item.item-3 {
191    -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
192    transition: opacity .5s .3s, transform .5s .3s
193}
194
195.mm-menu__item.item-4 {
196    -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
197    transition: opacity .5s .4s, transform .5s .4s
198}
199
200.mm-menu__item.item-5 {
201    -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
202    transition: opacity .5s .5s, transform .5s .5s
203}
204
205.mm-menu__item.item-6 {
206    -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
207    transition: opacity .5s .6s, transform .5s .6s
208}
209
210.mm-menu__item.item-7 {
211    -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
212    transition: opacity .5s .7s, transform .5s .7s
213}
214
215.mm-menu__item.item-8 {
216    -webkit-transition: opacity .5s .8s, -webkit-transform .5s .8s;
217    transition: opacity .5s .8s, transform .5s .8s
218}
219
220.mm-menu__item.item-9 {
221    -webkit-transition: opacity .5s .9s, -webkit-transform .5s .9s;
222    transition: opacity .5s .9s, transform .5s .9s
223}
224
225.mm-menu__item.item-10 {
226    -webkit-transition: opacity .5s 1s, -webkit-transform .5s 1s;
227    transition: opacity .5s 1s, transform .5s 1s
228}
229
230.mm-menu__item.item-11 {
231    -webkit-transition: opacity .5s 1.1s, -webkit-transform .5s 1.1s;
232    transition: opacity .5s 1.1s, transform .5s 1.1s
233}
234
235.mm-menu__item.item-12 {
236    -webkit-transition: opacity .5s 1.2s, -webkit-transform .5s 1.2s;
237    transition: opacity .5s 1.2s, transform .5s 1.2s
238}
239
240.mm-menu__item.item-13 {
241    -webkit-transition: opacity .5s 1.3s, -webkit-transform .5s 1.3s;
242    transition: opacity .5s 1.3s, transform .5s 1.3s
243}
244
245.mm-menu__item.item-14 {
246    -webkit-transition: opacity .5s 1.4s, -webkit-transform .5s 1.4s;
247    transition: opacity .5s 1.4s, transform .5s 1.4s
248}
249
250.mm-menu__item.item-15 {
251    -webkit-transition: opacity .5s 1.5s, -webkit-transform .5s 1.5s;
252    transition: opacity .5s 1.5s, transform .5s 1.5s
253}
254
255.mm-menu__item.item-16 {
256    -webkit-transition: opacity .5s 1.6s, -webkit-transform .5s 1.6s;
257    transition: opacity .5s 1.6s, transform .5s 1.6s
258}
259
260.mm-menu__item.item-17 {
261    -webkit-transition: opacity .5s 1.7s, -webkit-transform .5s 1.7s;
262    transition: opacity .5s 1.7s, transform .5s 1.7s
263}
264
265.mm-menu__item.item-18 {
266    -webkit-transition: opacity .5s 1.8s, -webkit-transform .5s 1.8s;
267    transition: opacity .5s 1.8s, transform .5s 1.8s
268}
269
270.mm-menu__item.item-19 {
271    -webkit-transition: opacity .5s 1.9s, -webkit-transform .5s 1.9s;
272    transition: opacity .5s 1.9s, transform .5s 1.9s
273}
274
275.mm-menu__item.item-20 {
276    -webkit-transition: opacity .5s 2s, -webkit-transform .5s 2s;
277    transition: opacity .5s 2s, transform .5s 2s
278}
279
280.mm-menu__link {
281    display: block;
282    position: relative;
283    overflow: hidden;
284    margin: 4px 0;
285    padding: 12px;
286    color: #727272;
287    font-size: 16px;
288    text-decoration: none;
289    -webkit-transition: background .5s, color .5s;
290    transition: background .5s, color .5s
291}
292
293.mm-menu__link-text {
294    position: relative;
295    z-index: 2
296}
297
298.mm-menu__link--touch-effect {
299    display: block;
300    position: absolute;
301    z-index: 1;
302    width: 0;
303    height: 0;
304    border-radius: 100%;
305    background-color: #B6B6B6;
306    -webkit-transform: scale(0);
307    -ms-transform: scale(0);
308    transform: scale(0);
309    -webkit-transform-origin: 50% 50%;
310    -ms-transform-origin: 50% 50%;
311    transform-origin: 50% 50%
312}
313
314.mm-menu__link--touch-effect.animating {
315    -webkit-transform: scale(1);
316    -ms-transform: scale(1);
317    transform: scale(1);
318    -webkit-transition: -webkit-transform .5s;
319    transition: transform .5s
320}
321
322.mm-menu-mask {
323    display: block;
324    position: fixed;
325    top: 0;
326    left: 0;
327    z-index: 8;
328    width: 100%;
329    height: 100%;
330    background-color: rgba(0, 0, 0, .8);
331    visibility: hidden;
332    opacity: 0;
333    -webkit-transition: opacity .5s, visibility .5s;
334    transition: opacity .5s, visibility .5s
335}
336
337.mm-menu-mask.active {
338    visibility: visible;
339    opacity: 1
340}
341
342.mm-menu {
343    width: 256px;
344}