| 1 | /* Magnific Popup CSS */ |
|---|
| 2 | |
|---|
| 3 | //////////////////////// |
|---|
| 4 | // Settings // |
|---|
| 5 | //////////////////////// |
|---|
| 6 | |
|---|
| 7 | // overlay |
|---|
| 8 | $mfp-overlay-color: #0b0b0b !default; // Color of overlay screen |
|---|
| 9 | $mfp-overlay-opacity: 0.8 !default; // Opacity of overlay screen |
|---|
| 10 | $mfp-shadow: 0 0 8px rgba(0, 0, 0, 0.6) !default; // Shadow on image or iframe |
|---|
| 11 | |
|---|
| 12 | // spacing |
|---|
| 13 | $mfp-popup-padding-left: 8px !default; // Padding from left and from right side |
|---|
| 14 | $mfp-popup-padding-left-mobile: 6px !default; // Same as above, but is applied when width of window is less than 800px |
|---|
| 15 | |
|---|
| 16 | $mfp-z-index-base: 1040 !default; // Base z-index of popup |
|---|
| 17 | |
|---|
| 18 | // controls |
|---|
| 19 | $mfp-include-arrows: true !default; // Include styles for nav arrows |
|---|
| 20 | $mfp-controls-opacity: 0.65 !default; // Opacity of controls |
|---|
| 21 | $mfp-controls-color: #FFF !default; // Color of controls |
|---|
| 22 | $mfp-controls-border-color: #3F3F3F !default; // Border color of controls |
|---|
| 23 | $mfp-inner-close-icon-color: #333 !default; // Color of close button when inside |
|---|
| 24 | $mfp-controls-text-color: #CCC !default; // Color of preloader and "1 of X" indicator |
|---|
| 25 | $mfp-controls-text-color-hover: #FFF !default; // Hover color of preloader and "1 of X" indicator |
|---|
| 26 | |
|---|
| 27 | // Iframe-type options |
|---|
| 28 | $mfp-include-iframe-type: true !default; // Enable Iframe-type popups |
|---|
| 29 | $mfp-iframe-padding-top: 40px !default; // Iframe padding top |
|---|
| 30 | $mfp-iframe-background: #000 !default; // Background color of iframes |
|---|
| 31 | $mfp-iframe-max-width: 98%; // 900px !default; // Maximum width of iframes |
|---|
| 32 | $mfp-iframe-ratio: 9/16 !default; // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.) |
|---|
| 33 | |
|---|
| 34 | // Image-type options |
|---|
| 35 | $mfp-include-image-type: true !default; // Enable Image-type popups |
|---|
| 36 | $mfp-image-background: #444 !default; |
|---|
| 37 | $mfp-image-padding-top: 40px !default; // Image padding top |
|---|
| 38 | $mfp-image-padding-bottom: 40px !default; // Image padding bottom |
|---|
| 39 | $mfp-include-mobile-layout-for-image: true !default; // Removes paddings from top and bottom |
|---|
| 40 | |
|---|
| 41 | // Image caption options |
|---|
| 42 | $mfp-caption-title-color: #F3F3F3 !default; // Caption title color |
|---|
| 43 | $mfp-caption-subtitle-color: #BDBDBD !default; // Caption subtitle color |
|---|
| 44 | |
|---|
| 45 | // A11y |
|---|
| 46 | $mfp-use-visuallyhidden: false !default; // Hide content from browsers, but make it available for screen readers |
|---|
| 47 | |
|---|
| 48 | //////////////////////// |
|---|
| 49 | // |
|---|
| 50 | // Contents: |
|---|
| 51 | // |
|---|
| 52 | // 1. General styles |
|---|
| 53 | // - Transluscent overlay |
|---|
| 54 | // - Containers, wrappers |
|---|
| 55 | // - Cursors |
|---|
| 56 | // - Helper classes |
|---|
| 57 | // 2. Appearance |
|---|
| 58 | // - Preloader & text that displays error messages |
|---|
| 59 | // - CSS reset for buttons |
|---|
| 60 | // - Close icon |
|---|
| 61 | // - "1 of X" counter |
|---|
| 62 | // - Navigation (left/right) arrows |
|---|
| 63 | // - Iframe content type styles |
|---|
| 64 | // - Image content type styles |
|---|
| 65 | // - Media query where size of arrows is reduced |
|---|
| 66 | // - IE7 support |
|---|
| 67 | // |
|---|
| 68 | //////////////////////// |
|---|
| 69 | |
|---|
| 70 | |
|---|
| 71 | |
|---|
| 72 | //////////////////////// |
|---|
| 73 | // 1. General styles |
|---|
| 74 | //////////////////////// |
|---|
| 75 | |
|---|
| 76 | // Transluscent overlay |
|---|
| 77 | .mfp-bg { |
|---|
| 78 | top: 0; |
|---|
| 79 | left: 0; |
|---|
| 80 | width: 100%; |
|---|
| 81 | height: 100%; |
|---|
| 82 | z-index: $mfp-z-index-base + 2; |
|---|
| 83 | overflow: hidden; |
|---|
| 84 | position: fixed; |
|---|
| 85 | |
|---|
| 86 | background: $mfp-overlay-color; |
|---|
| 87 | opacity: $mfp-overlay-opacity; |
|---|
| 88 | } |
|---|
| 89 | |
|---|
| 90 | // Wrapper for popup |
|---|
| 91 | .mfp-wrap { |
|---|
| 92 | top: 0; |
|---|
| 93 | left: 0; |
|---|
| 94 | width: 100%; |
|---|
| 95 | height: 100%; |
|---|
| 96 | z-index: $mfp-z-index-base + 3; |
|---|
| 97 | position: fixed; |
|---|
| 98 | outline: none !important; |
|---|
| 99 | -webkit-backface-visibility: hidden; // fixes webkit bug that can cause "false" scrollbar |
|---|
| 100 | } |
|---|
| 101 | |
|---|
| 102 | // Root container |
|---|
| 103 | .mfp-container { |
|---|
| 104 | text-align: center; |
|---|
| 105 | position: absolute; |
|---|
| 106 | width: 100%; |
|---|
| 107 | height: 100%; |
|---|
| 108 | left: 0; |
|---|
| 109 | top: 0; |
|---|
| 110 | padding: 0 $mfp-popup-padding-left; |
|---|
| 111 | box-sizing: border-box; |
|---|
| 112 | } |
|---|
| 113 | |
|---|
| 114 | // Vertical centerer helper |
|---|
| 115 | .mfp-container { |
|---|
| 116 | &:before { |
|---|
| 117 | content: ''; |
|---|
| 118 | display: inline-block; |
|---|
| 119 | height: 100%; |
|---|
| 120 | vertical-align: middle; |
|---|
| 121 | } |
|---|
| 122 | } |
|---|
| 123 | |
|---|
| 124 | // Remove vertical centering when popup has class `mfp-align-top` |
|---|
| 125 | .mfp-align-top { |
|---|
| 126 | .mfp-container { |
|---|
| 127 | &:before { |
|---|
| 128 | display: none; |
|---|
| 129 | } |
|---|
| 130 | } |
|---|
| 131 | } |
|---|
| 132 | |
|---|
| 133 | // Popup content holder |
|---|
| 134 | .mfp-content { |
|---|
| 135 | position: relative; |
|---|
| 136 | display: inline-block; |
|---|
| 137 | vertical-align: middle; |
|---|
| 138 | margin: 0 auto; |
|---|
| 139 | text-align: left; |
|---|
| 140 | z-index: $mfp-z-index-base + 5; |
|---|
| 141 | } |
|---|
| 142 | .mfp-inline-holder, |
|---|
| 143 | .mfp-ajax-holder { |
|---|
| 144 | .mfp-content { |
|---|
| 145 | width: 100%; |
|---|
| 146 | cursor: auto; |
|---|
| 147 | } |
|---|
| 148 | } |
|---|
| 149 | |
|---|
| 150 | // Cursors |
|---|
| 151 | .mfp-ajax-cur { |
|---|
| 152 | cursor: progress; |
|---|
| 153 | } |
|---|
| 154 | .mfp-zoom-out-cur { |
|---|
| 155 | &, .mfp-image-holder .mfp-close { |
|---|
| 156 | cursor: -moz-zoom-out; |
|---|
| 157 | cursor: -webkit-zoom-out; |
|---|
| 158 | cursor: zoom-out; |
|---|
| 159 | } |
|---|
| 160 | } |
|---|
| 161 | .mfp-zoom { |
|---|
| 162 | cursor: pointer; |
|---|
| 163 | cursor: -webkit-zoom-in; |
|---|
| 164 | cursor: -moz-zoom-in; |
|---|
| 165 | cursor: zoom-in; |
|---|
| 166 | } |
|---|
| 167 | .mfp-auto-cursor { |
|---|
| 168 | .mfp-content { |
|---|
| 169 | cursor: auto; |
|---|
| 170 | } |
|---|
| 171 | } |
|---|
| 172 | |
|---|
| 173 | .mfp-close, |
|---|
| 174 | .mfp-arrow, |
|---|
| 175 | .mfp-preloader, |
|---|
| 176 | .mfp-counter { |
|---|
| 177 | -webkit-user-select:none; |
|---|
| 178 | -moz-user-select: none; |
|---|
| 179 | user-select: none; |
|---|
| 180 | } |
|---|
| 181 | |
|---|
| 182 | // Hide the image during the loading |
|---|
| 183 | .mfp-loading { |
|---|
| 184 | &.mfp-figure { |
|---|
| 185 | display: none; |
|---|
| 186 | } |
|---|
| 187 | } |
|---|
| 188 | |
|---|
| 189 | // Helper class that hides stuff |
|---|
| 190 | @if $mfp-use-visuallyhidden { |
|---|
| 191 | // From HTML5 Boilerplate https://github.com/h5bp/html5-boilerplate/blob/v4.2.0/doc/css.md#visuallyhidden |
|---|
| 192 | .mfp-hide { |
|---|
| 193 | border: 0 !important; |
|---|
| 194 | clip: rect(0 0 0 0) !important; |
|---|
| 195 | height: 1px !important; |
|---|
| 196 | margin: -1px !important; |
|---|
| 197 | overflow: hidden !important; |
|---|
| 198 | padding: 0 !important; |
|---|
| 199 | position: absolute !important; |
|---|
| 200 | width: 1px !important; |
|---|
| 201 | } |
|---|
| 202 | } @else { |
|---|
| 203 | .mfp-hide { |
|---|
| 204 | display: none !important; |
|---|
| 205 | } |
|---|
| 206 | } |
|---|
| 207 | |
|---|
| 208 | |
|---|
| 209 | //////////////////////// |
|---|
| 210 | // 2. Appearance |
|---|
| 211 | //////////////////////// |
|---|
| 212 | |
|---|
| 213 | // Preloader and text that displays error messages |
|---|
| 214 | .mfp-preloader { |
|---|
| 215 | color: $mfp-controls-text-color; |
|---|
| 216 | position: absolute; |
|---|
| 217 | top: 50%; |
|---|
| 218 | width: auto; |
|---|
| 219 | text-align: center; |
|---|
| 220 | margin-top: -0.8em; |
|---|
| 221 | left: 8px; |
|---|
| 222 | right: 8px; |
|---|
| 223 | z-index: $mfp-z-index-base + 4; |
|---|
| 224 | a { |
|---|
| 225 | color: $mfp-controls-text-color; |
|---|
| 226 | &:hover { |
|---|
| 227 | color: $mfp-controls-text-color-hover; |
|---|
| 228 | } |
|---|
| 229 | } |
|---|
| 230 | } |
|---|
| 231 | |
|---|
| 232 | // Hide preloader when content successfully loaded |
|---|
| 233 | .mfp-s-ready { |
|---|
| 234 | .mfp-preloader { |
|---|
| 235 | display: none; |
|---|
| 236 | } |
|---|
| 237 | } |
|---|
| 238 | |
|---|
| 239 | // Hide content when it was not loaded |
|---|
| 240 | .mfp-s-error { |
|---|
| 241 | .mfp-content { |
|---|
| 242 | display: none; |
|---|
| 243 | } |
|---|
| 244 | } |
|---|
| 245 | |
|---|
| 246 | // CSS-reset for buttons |
|---|
| 247 | button { |
|---|
| 248 | &.mfp-close, |
|---|
| 249 | &.mfp-arrow { |
|---|
| 250 | overflow: visible; |
|---|
| 251 | cursor: pointer; |
|---|
| 252 | background: transparent; |
|---|
| 253 | border: 0; |
|---|
| 254 | -webkit-appearance: none; |
|---|
| 255 | display: block; |
|---|
| 256 | outline: none; |
|---|
| 257 | padding: 0; |
|---|
| 258 | z-index: $mfp-z-index-base + 6; |
|---|
| 259 | box-shadow: none; |
|---|
| 260 | touch-action: manipulation; |
|---|
| 261 | } |
|---|
| 262 | &::-moz-focus-inner { |
|---|
| 263 | padding: 0; |
|---|
| 264 | border: 0 |
|---|
| 265 | } |
|---|
| 266 | } |
|---|
| 267 | |
|---|
| 268 | |
|---|
| 269 | // Close icon |
|---|
| 270 | .mfp-close { |
|---|
| 271 | width: 44px; |
|---|
| 272 | height: 44px; |
|---|
| 273 | line-height: 44px; |
|---|
| 274 | |
|---|
| 275 | position: absolute; |
|---|
| 276 | right: 0; |
|---|
| 277 | top: 0; |
|---|
| 278 | text-decoration: none; |
|---|
| 279 | text-align: center; |
|---|
| 280 | opacity: $mfp-controls-opacity; |
|---|
| 281 | padding: 0 0 18px 10px; |
|---|
| 282 | color: $mfp-controls-color; |
|---|
| 283 | |
|---|
| 284 | font-style: normal; |
|---|
| 285 | font-size: 28px; |
|---|
| 286 | font-family: Arial, Baskerville, monospace; |
|---|
| 287 | |
|---|
| 288 | &:hover, |
|---|
| 289 | &:focus { |
|---|
| 290 | opacity: 1; |
|---|
| 291 | } |
|---|
| 292 | |
|---|
| 293 | &:active { |
|---|
| 294 | top: 1px; |
|---|
| 295 | } |
|---|
| 296 | } |
|---|
| 297 | .mfp-close-btn-in { |
|---|
| 298 | .mfp-close { |
|---|
| 299 | color: $mfp-inner-close-icon-color; |
|---|
| 300 | } |
|---|
| 301 | } |
|---|
| 302 | .mfp-image-holder, |
|---|
| 303 | .mfp-iframe-holder { |
|---|
| 304 | .mfp-close { |
|---|
| 305 | color: $mfp-controls-color; |
|---|
| 306 | right: -6px; |
|---|
| 307 | text-align: right; |
|---|
| 308 | padding-right: 6px; |
|---|
| 309 | width: 100%; |
|---|
| 310 | } |
|---|
| 311 | } |
|---|
| 312 | |
|---|
| 313 | // "1 of X" counter |
|---|
| 314 | .mfp-counter { |
|---|
| 315 | position: absolute; |
|---|
| 316 | top: 0; |
|---|
| 317 | right: 0; |
|---|
| 318 | color: $mfp-controls-text-color; |
|---|
| 319 | font-size: 12px; |
|---|
| 320 | line-height: 18px; |
|---|
| 321 | white-space: nowrap; |
|---|
| 322 | } |
|---|
| 323 | |
|---|
| 324 | // Navigation arrows |
|---|
| 325 | @if $mfp-include-arrows { |
|---|
| 326 | .mfp-arrow { |
|---|
| 327 | position: absolute; |
|---|
| 328 | opacity: $mfp-controls-opacity; |
|---|
| 329 | margin: 0; |
|---|
| 330 | top: 50%; |
|---|
| 331 | margin-top: -55px; |
|---|
| 332 | padding: 0; |
|---|
| 333 | width: 90px; |
|---|
| 334 | height: 110px; |
|---|
| 335 | -webkit-tap-highlight-color: rgba(0,0,0,0); |
|---|
| 336 | &:active { |
|---|
| 337 | margin-top: -54px; |
|---|
| 338 | } |
|---|
| 339 | &:hover, |
|---|
| 340 | &:focus { |
|---|
| 341 | opacity: 1; |
|---|
| 342 | } |
|---|
| 343 | &:before, |
|---|
| 344 | &:after { |
|---|
| 345 | content: ''; |
|---|
| 346 | display: block; |
|---|
| 347 | width: 0; |
|---|
| 348 | height: 0; |
|---|
| 349 | position: absolute; |
|---|
| 350 | left: 0; |
|---|
| 351 | top: 0; |
|---|
| 352 | margin-top: 35px; |
|---|
| 353 | margin-left: 35px; |
|---|
| 354 | border: medium inset transparent; |
|---|
| 355 | } |
|---|
| 356 | |
|---|
| 357 | &:after { |
|---|
| 358 | |
|---|
| 359 | border-top-width: 13px; |
|---|
| 360 | border-bottom-width: 13px; |
|---|
| 361 | top:8px; |
|---|
| 362 | } |
|---|
| 363 | |
|---|
| 364 | &:before { |
|---|
| 365 | border-top-width: 21px; |
|---|
| 366 | border-bottom-width: 21px; |
|---|
| 367 | opacity: 0.7; |
|---|
| 368 | } |
|---|
| 369 | |
|---|
| 370 | } |
|---|
| 371 | |
|---|
| 372 | .mfp-arrow-left { |
|---|
| 373 | left: 0; |
|---|
| 374 | &:after { |
|---|
| 375 | border-right: 17px solid $mfp-controls-color; |
|---|
| 376 | margin-left: 31px; |
|---|
| 377 | } |
|---|
| 378 | &:before { |
|---|
| 379 | margin-left: 25px; |
|---|
| 380 | border-right: 27px solid $mfp-controls-border-color; |
|---|
| 381 | } |
|---|
| 382 | } |
|---|
| 383 | |
|---|
| 384 | .mfp-arrow-right { |
|---|
| 385 | right: 0; |
|---|
| 386 | &:after { |
|---|
| 387 | border-left: 17px solid $mfp-controls-color; |
|---|
| 388 | margin-left: 39px |
|---|
| 389 | } |
|---|
| 390 | &:before { |
|---|
| 391 | border-left: 27px solid $mfp-controls-border-color; |
|---|
| 392 | } |
|---|
| 393 | } |
|---|
| 394 | } |
|---|
| 395 | |
|---|
| 396 | |
|---|
| 397 | |
|---|
| 398 | // Iframe content type |
|---|
| 399 | @if $mfp-include-iframe-type { |
|---|
| 400 | .mfp-iframe-holder { |
|---|
| 401 | padding-top: $mfp-iframe-padding-top; |
|---|
| 402 | padding-bottom: $mfp-iframe-padding-top; |
|---|
| 403 | .mfp-content { |
|---|
| 404 | line-height: 0; |
|---|
| 405 | width: 100%; |
|---|
| 406 | max-width: $mfp-iframe-max-width; |
|---|
| 407 | } |
|---|
| 408 | .mfp-close { |
|---|
| 409 | top: -40px; |
|---|
| 410 | } |
|---|
| 411 | } |
|---|
| 412 | .mfp-iframe-scaler { |
|---|
| 413 | width: 100%; |
|---|
| 414 | height: 0; |
|---|
| 415 | overflow: hidden; |
|---|
| 416 | padding-top: $mfp-iframe-ratio * 100%; |
|---|
| 417 | iframe { |
|---|
| 418 | position: absolute; |
|---|
| 419 | display: block; |
|---|
| 420 | top: 0; |
|---|
| 421 | left: 0; |
|---|
| 422 | width: 100%; |
|---|
| 423 | height: 100%; |
|---|
| 424 | box-shadow: $mfp-shadow; |
|---|
| 425 | background: $mfp-iframe-background; |
|---|
| 426 | } |
|---|
| 427 | } |
|---|
| 428 | } |
|---|
| 429 | |
|---|
| 430 | |
|---|
| 431 | |
|---|
| 432 | // Image content type |
|---|
| 433 | @if $mfp-include-image-type { |
|---|
| 434 | |
|---|
| 435 | /* Main image in popup */ |
|---|
| 436 | img { |
|---|
| 437 | &.mfp-img { |
|---|
| 438 | width: auto; |
|---|
| 439 | max-width: 100%; |
|---|
| 440 | height: auto; |
|---|
| 441 | display: block; |
|---|
| 442 | line-height: 0; |
|---|
| 443 | box-sizing: border-box; |
|---|
| 444 | padding: $mfp-image-padding-top 0 $mfp-image-padding-bottom; |
|---|
| 445 | margin: 0 auto; |
|---|
| 446 | } |
|---|
| 447 | } |
|---|
| 448 | |
|---|
| 449 | /* The shadow behind the image */ |
|---|
| 450 | .mfp-figure { |
|---|
| 451 | line-height: 0; |
|---|
| 452 | &:after { |
|---|
| 453 | content: ''; |
|---|
| 454 | position: absolute; |
|---|
| 455 | left: 0; |
|---|
| 456 | top: $mfp-image-padding-top; |
|---|
| 457 | bottom: $mfp-image-padding-bottom; |
|---|
| 458 | display: block; |
|---|
| 459 | right: 0; |
|---|
| 460 | width: auto; |
|---|
| 461 | height: auto; |
|---|
| 462 | z-index: -1; |
|---|
| 463 | box-shadow: $mfp-shadow; |
|---|
| 464 | background: $mfp-image-background; |
|---|
| 465 | } |
|---|
| 466 | small { |
|---|
| 467 | color: $mfp-caption-subtitle-color; |
|---|
| 468 | display: block; |
|---|
| 469 | font-size: 12px; |
|---|
| 470 | line-height: 14px; |
|---|
| 471 | } |
|---|
| 472 | figure { |
|---|
| 473 | margin: 0; |
|---|
| 474 | } |
|---|
| 475 | } |
|---|
| 476 | .mfp-bottom-bar { |
|---|
| 477 | margin-top: -$mfp-image-padding-bottom + 4; |
|---|
| 478 | position: absolute; |
|---|
| 479 | top: 100%; |
|---|
| 480 | left: 0; |
|---|
| 481 | width: 100%; |
|---|
| 482 | cursor: auto; |
|---|
| 483 | } |
|---|
| 484 | .mfp-title { |
|---|
| 485 | text-align: left; |
|---|
| 486 | line-height: 18px; |
|---|
| 487 | color: $mfp-caption-title-color; |
|---|
| 488 | word-wrap: break-word; |
|---|
| 489 | padding-right: 36px; // leave some space for counter at right side |
|---|
| 490 | } |
|---|
| 491 | |
|---|
| 492 | .mfp-image-holder { |
|---|
| 493 | .mfp-content { |
|---|
| 494 | max-width: 100%; |
|---|
| 495 | } |
|---|
| 496 | } |
|---|
| 497 | |
|---|
| 498 | .mfp-gallery { |
|---|
| 499 | .mfp-image-holder { |
|---|
| 500 | .mfp-figure { |
|---|
| 501 | cursor: pointer; |
|---|
| 502 | } |
|---|
| 503 | } |
|---|
| 504 | } |
|---|
| 505 | |
|---|
| 506 | |
|---|
| 507 | @if $mfp-include-mobile-layout-for-image { |
|---|
| 508 | @media screen and (max-width: 800px) and (orientation:landscape), screen and (max-height: 300px) { |
|---|
| 509 | /** |
|---|
| 510 | * Remove all paddings around the image on small screen |
|---|
| 511 | */ |
|---|
| 512 | .mfp-img-mobile { |
|---|
| 513 | .mfp-image-holder { |
|---|
| 514 | padding-left: 0; |
|---|
| 515 | padding-right: 0; |
|---|
| 516 | } |
|---|
| 517 | img { |
|---|
| 518 | &.mfp-img { |
|---|
| 519 | padding: 0; |
|---|
| 520 | } |
|---|
| 521 | } |
|---|
| 522 | .mfp-figure { |
|---|
| 523 | // The shadow behind the image |
|---|
| 524 | &:after { |
|---|
| 525 | top: 0; |
|---|
| 526 | bottom: 0; |
|---|
| 527 | } |
|---|
| 528 | small { |
|---|
| 529 | display: inline; |
|---|
| 530 | margin-left: 5px; |
|---|
| 531 | } |
|---|
| 532 | } |
|---|
| 533 | .mfp-bottom-bar { |
|---|
| 534 | background: rgba(0,0,0,0.6); |
|---|
| 535 | bottom: 0; |
|---|
| 536 | margin: 0; |
|---|
| 537 | top: auto; |
|---|
| 538 | padding: 3px 5px; |
|---|
| 539 | position: fixed; |
|---|
| 540 | box-sizing: border-box; |
|---|
| 541 | &:empty { |
|---|
| 542 | padding: 0; |
|---|
| 543 | } |
|---|
| 544 | } |
|---|
| 545 | .mfp-counter { |
|---|
| 546 | right: 5px; |
|---|
| 547 | top: 3px; |
|---|
| 548 | } |
|---|
| 549 | .mfp-close { |
|---|
| 550 | top: 0; |
|---|
| 551 | right: 0; |
|---|
| 552 | width: 35px; |
|---|
| 553 | height: 35px; |
|---|
| 554 | line-height: 35px; |
|---|
| 555 | background: rgba(0, 0, 0, 0.6); |
|---|
| 556 | position: fixed; |
|---|
| 557 | text-align: center; |
|---|
| 558 | padding: 0; |
|---|
| 559 | } |
|---|
| 560 | } |
|---|
| 561 | } |
|---|
| 562 | } |
|---|
| 563 | } |
|---|
| 564 | |
|---|
| 565 | |
|---|
| 566 | |
|---|
| 567 | // Scale navigation arrows and reduce padding from sides |
|---|
| 568 | @media all and (max-width: 900px) { |
|---|
| 569 | .mfp-arrow { |
|---|
| 570 | -webkit-transform: scale(0.75); |
|---|
| 571 | transform: scale(0.75); |
|---|
| 572 | } |
|---|
| 573 | .mfp-arrow-left { |
|---|
| 574 | -webkit-transform-origin: 0; |
|---|
| 575 | transform-origin: 0; |
|---|
| 576 | } |
|---|
| 577 | .mfp-arrow-right { |
|---|
| 578 | -webkit-transform-origin: 100%; |
|---|
| 579 | transform-origin: 100%; |
|---|
| 580 | } |
|---|
| 581 | .mfp-container { |
|---|
| 582 | padding-left: $mfp-popup-padding-left-mobile; |
|---|
| 583 | padding-right: $mfp-popup-padding-left-mobile; |
|---|
| 584 | } |
|---|
| 585 | } |
|---|
