creative_rails 1.0.2

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,416 @@
1
+ /*!
2
+ * Start Bootstrap - Creative v3.3.7+1 (http://startbootstrap.com/template-overviews/creative)
3
+ * Copyright 2013-2016 Start Bootstrap
4
+ * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
5
+ */
6
+ html,
7
+ body {
8
+ height: 100%;
9
+ width: 100%;
10
+ }
11
+ body {
12
+ font-family: 'Merriweather', 'Helvetica Neue', Arial, sans-serif;
13
+ }
14
+ hr {
15
+ border-color: #F05F40;
16
+ border-width: 3px;
17
+ max-width: 50px;
18
+ }
19
+ hr.light {
20
+ border-color: white;
21
+ }
22
+ a {
23
+ -webkit-transition: all 0.35s;
24
+ -moz-transition: all 0.35s;
25
+ transition: all 0.35s;
26
+ color: #F05F40;
27
+ }
28
+ a:hover,
29
+ a:focus {
30
+ color: #eb3812;
31
+ }
32
+ h1,
33
+ h2,
34
+ h3,
35
+ h4,
36
+ h5,
37
+ h6 {
38
+ font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
39
+ }
40
+ p {
41
+ font-size: 16px;
42
+ line-height: 1.5;
43
+ margin-bottom: 20px;
44
+ }
45
+ .bg-primary {
46
+ background-color: #F05F40;
47
+ }
48
+ .bg-dark {
49
+ background-color: #222222;
50
+ color: white;
51
+ }
52
+ .text-faded {
53
+ color: rgba(255, 255, 255, 0.7);
54
+ }
55
+ section {
56
+ padding: 100px 0;
57
+ }
58
+ aside {
59
+ padding: 50px 0;
60
+ }
61
+ .no-padding {
62
+ padding: 0;
63
+ }
64
+ .navbar-default {
65
+ background-color: white;
66
+ border-color: rgba(34, 34, 34, 0.05);
67
+ font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
68
+ -webkit-transition: all 0.35s;
69
+ -moz-transition: all 0.35s;
70
+ transition: all 0.35s;
71
+ }
72
+ .navbar-default .navbar-header .navbar-brand {
73
+ color: #F05F40;
74
+ font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
75
+ font-weight: 700;
76
+ text-transform: uppercase;
77
+ }
78
+ .navbar-default .navbar-header .navbar-brand:hover,
79
+ .navbar-default .navbar-header .navbar-brand:focus {
80
+ color: #eb3812;
81
+ }
82
+ .navbar-default .navbar-header .navbar-toggle {
83
+ font-weight: 700;
84
+ font-size: 12px;
85
+ color: #222222;
86
+ text-transform: uppercase;
87
+ }
88
+ .navbar-default .nav > li > a,
89
+ .navbar-default .nav > li > a:focus {
90
+ text-transform: uppercase;
91
+ font-weight: 700;
92
+ font-size: 13px;
93
+ color: #222222;
94
+ }
95
+ .navbar-default .nav > li > a:hover,
96
+ .navbar-default .nav > li > a:focus:hover {
97
+ color: #F05F40;
98
+ }
99
+ .navbar-default .nav > li.active > a,
100
+ .navbar-default .nav > li.active > a:focus {
101
+ color: #F05F40 !important;
102
+ background-color: transparent;
103
+ }
104
+ .navbar-default .nav > li.active > a:hover,
105
+ .navbar-default .nav > li.active > a:focus:hover {
106
+ background-color: transparent;
107
+ }
108
+ @media (min-width: 768px) {
109
+ .navbar-default {
110
+ background-color: transparent;
111
+ border-color: rgba(255, 255, 255, 0.3);
112
+ }
113
+ .navbar-default .navbar-header .navbar-brand {
114
+ color: rgba(255, 255, 255, 0.7);
115
+ }
116
+ .navbar-default .navbar-header .navbar-brand:hover,
117
+ .navbar-default .navbar-header .navbar-brand:focus {
118
+ color: white;
119
+ }
120
+ .navbar-default .nav > li > a,
121
+ .navbar-default .nav > li > a:focus {
122
+ color: rgba(255, 255, 255, 0.7);
123
+ }
124
+ .navbar-default .nav > li > a:hover,
125
+ .navbar-default .nav > li > a:focus:hover {
126
+ color: white;
127
+ }
128
+ .navbar-default.affix {
129
+ background-color: white;
130
+ border-color: rgba(34, 34, 34, 0.05);
131
+ }
132
+ .navbar-default.affix .navbar-header .navbar-brand {
133
+ color: #F05F40;
134
+ font-size: 14px;
135
+ }
136
+ .navbar-default.affix .navbar-header .navbar-brand:hover,
137
+ .navbar-default.affix .navbar-header .navbar-brand:focus {
138
+ color: #eb3812;
139
+ }
140
+ .navbar-default.affix .nav > li > a,
141
+ .navbar-default.affix .nav > li > a:focus {
142
+ color: #222222;
143
+ }
144
+ .navbar-default.affix .nav > li > a:hover,
145
+ .navbar-default.affix .nav > li > a:focus:hover {
146
+ color: #F05F40;
147
+ }
148
+ }
149
+ header {
150
+ position: relative;
151
+ width: 100%;
152
+ min-height: auto;
153
+ -webkit-background-size: cover;
154
+ -moz-background-size: cover;
155
+ background-size: cover;
156
+ -o-background-size: cover;
157
+ background-position: center;
158
+ background-image: url(<%= image_path 'header.jpg' %>);
159
+ text-align: center;
160
+ color: white;
161
+ }
162
+ header .header-content {
163
+ position: relative;
164
+ text-align: center;
165
+ padding: 100px 15px 100px;
166
+ width: 100%;
167
+ }
168
+ header .header-content .header-content-inner h1 {
169
+ font-weight: 700;
170
+ text-transform: uppercase;
171
+ margin-top: 0;
172
+ margin-bottom: 0;
173
+ font-size: 30px;
174
+ }
175
+ header .header-content .header-content-inner hr {
176
+ margin: 30px auto;
177
+ }
178
+ header .header-content .header-content-inner p {
179
+ font-weight: 300;
180
+ color: rgba(255, 255, 255, 0.7);
181
+ font-size: 16px;
182
+ margin-bottom: 50px;
183
+ }
184
+ @media (min-width: 768px) {
185
+ header {
186
+ min-height: 100%;
187
+ }
188
+ header .header-content {
189
+ position: absolute;
190
+ top: 50%;
191
+ -webkit-transform: translateY(-50%);
192
+ -ms-transform: translateY(-50%);
193
+ transform: translateY(-50%);
194
+ padding: 0 50px;
195
+ }
196
+ header .header-content .header-content-inner {
197
+ max-width: 1000px;
198
+ margin-left: auto;
199
+ margin-right: auto;
200
+ }
201
+ header .header-content .header-content-inner h1 {
202
+ font-size: 50px;
203
+ }
204
+ header .header-content .header-content-inner p {
205
+ font-size: 18px;
206
+ max-width: 80%;
207
+ margin-left: auto;
208
+ margin-right: auto;
209
+ }
210
+ }
211
+ .section-heading {
212
+ margin-top: 0;
213
+ }
214
+ .service-box {
215
+ max-width: 400px;
216
+ margin: 50px auto 0;
217
+ }
218
+ @media (min-width: 992px) {
219
+ .service-box {
220
+ margin: 20px auto 0;
221
+ }
222
+ }
223
+ .service-box p {
224
+ margin-bottom: 0;
225
+ }
226
+ .portfolio-box {
227
+ position: relative;
228
+ display: block;
229
+ max-width: 650px;
230
+ margin: 0 auto;
231
+ }
232
+ .portfolio-box .portfolio-box-caption {
233
+ color: white;
234
+ opacity: 0;
235
+ display: block;
236
+ background: rgba(240, 95, 64, 0.9);
237
+ position: absolute;
238
+ bottom: 0;
239
+ text-align: center;
240
+ width: 100%;
241
+ height: 100%;
242
+ -webkit-transition: all 0.35s;
243
+ -moz-transition: all 0.35s;
244
+ transition: all 0.35s;
245
+ }
246
+ .portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
247
+ width: 100%;
248
+ text-align: center;
249
+ position: absolute;
250
+ top: 50%;
251
+ transform: translateY(-50%);
252
+ }
253
+ .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
254
+ .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
255
+ font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
256
+ padding: 0 15px;
257
+ }
258
+ .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
259
+ text-transform: uppercase;
260
+ font-weight: 600;
261
+ font-size: 14px;
262
+ }
263
+ .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
264
+ font-size: 18px;
265
+ }
266
+ .portfolio-box:hover .portfolio-box-caption {
267
+ opacity: 1;
268
+ }
269
+ .portfolio-box:focus {
270
+ outline: none;
271
+ }
272
+ @media (min-width: 768px) {
273
+ .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
274
+ font-size: 16px;
275
+ }
276
+ .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
277
+ font-size: 22px;
278
+ }
279
+ }
280
+ .call-to-action h2 {
281
+ margin: 0 auto 20px;
282
+ }
283
+ .text-primary {
284
+ color: #F05F40;
285
+ }
286
+ .no-gutter > [class*='col-'] {
287
+ padding-right: 0;
288
+ padding-left: 0;
289
+ }
290
+ .btn-default {
291
+ color: #222222;
292
+ background-color: white;
293
+ border-color: white;
294
+ -webkit-transition: all 0.35s;
295
+ -moz-transition: all 0.35s;
296
+ transition: all 0.35s;
297
+ }
298
+ .btn-default:hover,
299
+ .btn-default:focus,
300
+ .btn-default.focus,
301
+ .btn-default:active,
302
+ .btn-default.active,
303
+ .open > .dropdown-toggle.btn-default {
304
+ color: #222222;
305
+ background-color: #f2f2f2;
306
+ border-color: #ededed;
307
+ }
308
+ .btn-default:active,
309
+ .btn-default.active,
310
+ .open > .dropdown-toggle.btn-default {
311
+ background-image: none;
312
+ }
313
+ .btn-default.disabled,
314
+ .btn-default[disabled],
315
+ fieldset[disabled] .btn-default,
316
+ .btn-default.disabled:hover,
317
+ .btn-default[disabled]:hover,
318
+ fieldset[disabled] .btn-default:hover,
319
+ .btn-default.disabled:focus,
320
+ .btn-default[disabled]:focus,
321
+ fieldset[disabled] .btn-default:focus,
322
+ .btn-default.disabled.focus,
323
+ .btn-default[disabled].focus,
324
+ fieldset[disabled] .btn-default.focus,
325
+ .btn-default.disabled:active,
326
+ .btn-default[disabled]:active,
327
+ fieldset[disabled] .btn-default:active,
328
+ .btn-default.disabled.active,
329
+ .btn-default[disabled].active,
330
+ fieldset[disabled] .btn-default.active {
331
+ background-color: white;
332
+ border-color: white;
333
+ }
334
+ .btn-default .badge {
335
+ color: white;
336
+ background-color: #222222;
337
+ }
338
+ .btn-primary {
339
+ color: white;
340
+ background-color: #F05F40;
341
+ border-color: #F05F40;
342
+ -webkit-transition: all 0.35s;
343
+ -moz-transition: all 0.35s;
344
+ transition: all 0.35s;
345
+ }
346
+ .btn-primary:hover,
347
+ .btn-primary:focus,
348
+ .btn-primary.focus,
349
+ .btn-primary:active,
350
+ .btn-primary.active,
351
+ .open > .dropdown-toggle.btn-primary {
352
+ color: white;
353
+ background-color: #ee4b28;
354
+ border-color: #ed431f;
355
+ }
356
+ .btn-primary:active,
357
+ .btn-primary.active,
358
+ .open > .dropdown-toggle.btn-primary {
359
+ background-image: none;
360
+ }
361
+ .btn-primary.disabled,
362
+ .btn-primary[disabled],
363
+ fieldset[disabled] .btn-primary,
364
+ .btn-primary.disabled:hover,
365
+ .btn-primary[disabled]:hover,
366
+ fieldset[disabled] .btn-primary:hover,
367
+ .btn-primary.disabled:focus,
368
+ .btn-primary[disabled]:focus,
369
+ fieldset[disabled] .btn-primary:focus,
370
+ .btn-primary.disabled.focus,
371
+ .btn-primary[disabled].focus,
372
+ fieldset[disabled] .btn-primary.focus,
373
+ .btn-primary.disabled:active,
374
+ .btn-primary[disabled]:active,
375
+ fieldset[disabled] .btn-primary:active,
376
+ .btn-primary.disabled.active,
377
+ .btn-primary[disabled].active,
378
+ fieldset[disabled] .btn-primary.active {
379
+ background-color: #F05F40;
380
+ border-color: #F05F40;
381
+ }
382
+ .btn-primary .badge {
383
+ color: #F05F40;
384
+ background-color: white;
385
+ }
386
+ .btn {
387
+ font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
388
+ border: none;
389
+ border-radius: 300px;
390
+ font-weight: 700;
391
+ text-transform: uppercase;
392
+ }
393
+ .btn-xl {
394
+ padding: 15px 30px;
395
+ }
396
+ ::-moz-selection {
397
+ color: white;
398
+ text-shadow: none;
399
+ background: #222222;
400
+ }
401
+ ::selection {
402
+ color: white;
403
+ text-shadow: none;
404
+ background: #222222;
405
+ }
406
+ img::selection {
407
+ color: white;
408
+ background: transparent;
409
+ }
410
+ img::-moz-selection {
411
+ color: white;
412
+ background: transparent;
413
+ }
414
+ body {
415
+ webkit-tap-highlight-color: #222222;
416
+ }
@@ -0,0 +1,351 @@
1
+ /* Magnific Popup CSS */
2
+ .mfp-bg {
3
+ top: 0;
4
+ left: 0;
5
+ width: 100%;
6
+ height: 100%;
7
+ z-index: 1042;
8
+ overflow: hidden;
9
+ position: fixed;
10
+ background: #0b0b0b;
11
+ opacity: 0.8; }
12
+
13
+ .mfp-wrap {
14
+ top: 0;
15
+ left: 0;
16
+ width: 100%;
17
+ height: 100%;
18
+ z-index: 1043;
19
+ position: fixed;
20
+ outline: none !important;
21
+ -webkit-backface-visibility: hidden; }
22
+
23
+ .mfp-container {
24
+ text-align: center;
25
+ position: absolute;
26
+ width: 100%;
27
+ height: 100%;
28
+ left: 0;
29
+ top: 0;
30
+ padding: 0 8px;
31
+ box-sizing: border-box; }
32
+
33
+ .mfp-container:before {
34
+ content: '';
35
+ display: inline-block;
36
+ height: 100%;
37
+ vertical-align: middle; }
38
+
39
+ .mfp-align-top .mfp-container:before {
40
+ display: none; }
41
+
42
+ .mfp-content {
43
+ position: relative;
44
+ display: inline-block;
45
+ vertical-align: middle;
46
+ margin: 0 auto;
47
+ text-align: left;
48
+ z-index: 1045; }
49
+
50
+ .mfp-inline-holder .mfp-content,
51
+ .mfp-ajax-holder .mfp-content {
52
+ width: 100%;
53
+ cursor: auto; }
54
+
55
+ .mfp-ajax-cur {
56
+ cursor: progress; }
57
+
58
+ .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
59
+ cursor: -moz-zoom-out;
60
+ cursor: -webkit-zoom-out;
61
+ cursor: zoom-out; }
62
+
63
+ .mfp-zoom {
64
+ cursor: pointer;
65
+ cursor: -webkit-zoom-in;
66
+ cursor: -moz-zoom-in;
67
+ cursor: zoom-in; }
68
+
69
+ .mfp-auto-cursor .mfp-content {
70
+ cursor: auto; }
71
+
72
+ .mfp-close,
73
+ .mfp-arrow,
74
+ .mfp-preloader,
75
+ .mfp-counter {
76
+ -webkit-user-select: none;
77
+ -moz-user-select: none;
78
+ user-select: none; }
79
+
80
+ .mfp-loading.mfp-figure {
81
+ display: none; }
82
+
83
+ .mfp-hide {
84
+ display: none !important; }
85
+
86
+ .mfp-preloader {
87
+ color: #CCC;
88
+ position: absolute;
89
+ top: 50%;
90
+ width: auto;
91
+ text-align: center;
92
+ margin-top: -0.8em;
93
+ left: 8px;
94
+ right: 8px;
95
+ z-index: 1044; }
96
+ .mfp-preloader a {
97
+ color: #CCC; }
98
+ .mfp-preloader a:hover {
99
+ color: #FFF; }
100
+
101
+ .mfp-s-ready .mfp-preloader {
102
+ display: none; }
103
+
104
+ .mfp-s-error .mfp-content {
105
+ display: none; }
106
+
107
+ button.mfp-close,
108
+ button.mfp-arrow {
109
+ overflow: visible;
110
+ cursor: pointer;
111
+ background: transparent;
112
+ border: 0;
113
+ -webkit-appearance: none;
114
+ display: block;
115
+ outline: none;
116
+ padding: 0;
117
+ z-index: 1046;
118
+ box-shadow: none;
119
+ touch-action: manipulation; }
120
+
121
+ button::-moz-focus-inner {
122
+ padding: 0;
123
+ border: 0; }
124
+
125
+ .mfp-close {
126
+ width: 44px;
127
+ height: 44px;
128
+ line-height: 44px;
129
+ position: absolute;
130
+ right: 0;
131
+ top: 0;
132
+ text-decoration: none;
133
+ text-align: center;
134
+ opacity: 0.65;
135
+ padding: 0 0 18px 10px;
136
+ color: #FFF;
137
+ font-style: normal;
138
+ font-size: 28px;
139
+ font-family: Arial, Baskerville, monospace; }
140
+ .mfp-close:hover,
141
+ .mfp-close:focus {
142
+ opacity: 1; }
143
+ .mfp-close:active {
144
+ top: 1px; }
145
+
146
+ .mfp-close-btn-in .mfp-close {
147
+ color: #333; }
148
+
149
+ .mfp-image-holder .mfp-close,
150
+ .mfp-iframe-holder .mfp-close {
151
+ color: #FFF;
152
+ right: -6px;
153
+ text-align: right;
154
+ padding-right: 6px;
155
+ width: 100%; }
156
+
157
+ .mfp-counter {
158
+ position: absolute;
159
+ top: 0;
160
+ right: 0;
161
+ color: #CCC;
162
+ font-size: 12px;
163
+ line-height: 18px;
164
+ white-space: nowrap; }
165
+
166
+ .mfp-arrow {
167
+ position: absolute;
168
+ opacity: 0.65;
169
+ margin: 0;
170
+ top: 50%;
171
+ margin-top: -55px;
172
+ padding: 0;
173
+ width: 90px;
174
+ height: 110px;
175
+ -webkit-tap-highlight-color: transparent; }
176
+ .mfp-arrow:active {
177
+ margin-top: -54px; }
178
+ .mfp-arrow:hover,
179
+ .mfp-arrow:focus {
180
+ opacity: 1; }
181
+ .mfp-arrow:before,
182
+ .mfp-arrow:after {
183
+ content: '';
184
+ display: block;
185
+ width: 0;
186
+ height: 0;
187
+ position: absolute;
188
+ left: 0;
189
+ top: 0;
190
+ margin-top: 35px;
191
+ margin-left: 35px;
192
+ border: medium inset transparent; }
193
+ .mfp-arrow:after {
194
+ border-top-width: 13px;
195
+ border-bottom-width: 13px;
196
+ top: 8px; }
197
+ .mfp-arrow:before {
198
+ border-top-width: 21px;
199
+ border-bottom-width: 21px;
200
+ opacity: 0.7; }
201
+
202
+ .mfp-arrow-left {
203
+ left: 0; }
204
+ .mfp-arrow-left:after {
205
+ border-right: 17px solid #FFF;
206
+ margin-left: 31px; }
207
+ .mfp-arrow-left:before {
208
+ margin-left: 25px;
209
+ border-right: 27px solid #3F3F3F; }
210
+
211
+ .mfp-arrow-right {
212
+ right: 0; }
213
+ .mfp-arrow-right:after {
214
+ border-left: 17px solid #FFF;
215
+ margin-left: 39px; }
216
+ .mfp-arrow-right:before {
217
+ border-left: 27px solid #3F3F3F; }
218
+
219
+ .mfp-iframe-holder {
220
+ padding-top: 40px;
221
+ padding-bottom: 40px; }
222
+ .mfp-iframe-holder .mfp-content {
223
+ line-height: 0;
224
+ width: 100%;
225
+ max-width: 900px; }
226
+ .mfp-iframe-holder .mfp-close {
227
+ top: -40px; }
228
+
229
+ .mfp-iframe-scaler {
230
+ width: 100%;
231
+ height: 0;
232
+ overflow: hidden;
233
+ padding-top: 56.25%; }
234
+ .mfp-iframe-scaler iframe {
235
+ position: absolute;
236
+ display: block;
237
+ top: 0;
238
+ left: 0;
239
+ width: 100%;
240
+ height: 100%;
241
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
242
+ background: #000; }
243
+
244
+ /* Main image in popup */
245
+ img.mfp-img {
246
+ width: auto;
247
+ max-width: 100%;
248
+ height: auto;
249
+ display: block;
250
+ line-height: 0;
251
+ box-sizing: border-box;
252
+ padding: 40px 0 40px;
253
+ margin: 0 auto; }
254
+
255
+ /* The shadow behind the image */
256
+ .mfp-figure {
257
+ line-height: 0; }
258
+ .mfp-figure:after {
259
+ content: '';
260
+ position: absolute;
261
+ left: 0;
262
+ top: 40px;
263
+ bottom: 40px;
264
+ display: block;
265
+ right: 0;
266
+ width: auto;
267
+ height: auto;
268
+ z-index: -1;
269
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
270
+ background: #444; }
271
+ .mfp-figure small {
272
+ color: #BDBDBD;
273
+ display: block;
274
+ font-size: 12px;
275
+ line-height: 14px; }
276
+ .mfp-figure figure {
277
+ margin: 0; }
278
+
279
+ .mfp-bottom-bar {
280
+ margin-top: -36px;
281
+ position: absolute;
282
+ top: 100%;
283
+ left: 0;
284
+ width: 100%;
285
+ cursor: auto; }
286
+
287
+ .mfp-title {
288
+ text-align: left;
289
+ line-height: 18px;
290
+ color: #F3F3F3;
291
+ word-wrap: break-word;
292
+ padding-right: 36px; }
293
+
294
+ .mfp-image-holder .mfp-content {
295
+ max-width: 100%; }
296
+
297
+ .mfp-gallery .mfp-image-holder .mfp-figure {
298
+ cursor: pointer; }
299
+
300
+ @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
301
+ /**
302
+ * Remove all paddings around the image on small screen
303
+ */
304
+ .mfp-img-mobile .mfp-image-holder {
305
+ padding-left: 0;
306
+ padding-right: 0; }
307
+ .mfp-img-mobile img.mfp-img {
308
+ padding: 0; }
309
+ .mfp-img-mobile .mfp-figure:after {
310
+ top: 0;
311
+ bottom: 0; }
312
+ .mfp-img-mobile .mfp-figure small {
313
+ display: inline;
314
+ margin-left: 5px; }
315
+ .mfp-img-mobile .mfp-bottom-bar {
316
+ background: rgba(0, 0, 0, 0.6);
317
+ bottom: 0;
318
+ margin: 0;
319
+ top: auto;
320
+ padding: 3px 5px;
321
+ position: fixed;
322
+ box-sizing: border-box; }
323
+ .mfp-img-mobile .mfp-bottom-bar:empty {
324
+ padding: 0; }
325
+ .mfp-img-mobile .mfp-counter {
326
+ right: 5px;
327
+ top: 3px; }
328
+ .mfp-img-mobile .mfp-close {
329
+ top: 0;
330
+ right: 0;
331
+ width: 35px;
332
+ height: 35px;
333
+ line-height: 35px;
334
+ background: rgba(0, 0, 0, 0.6);
335
+ position: fixed;
336
+ text-align: center;
337
+ padding: 0; } }
338
+
339
+ @media all and (max-width: 900px) {
340
+ .mfp-arrow {
341
+ -webkit-transform: scale(0.75);
342
+ transform: scale(0.75); }
343
+ .mfp-arrow-left {
344
+ -webkit-transform-origin: 0;
345
+ transform-origin: 0; }
346
+ .mfp-arrow-right {
347
+ -webkit-transform-origin: 100%;
348
+ transform-origin: 100%; }
349
+ .mfp-container {
350
+ padding-left: 6px;
351
+ padding-right: 6px; } }