www/resources/Magnific-Popup/magnific-popup.css

   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   filter: alpha(opacity=80); }
  13
  14 .mfp-wrap {
  15   top: 0;
  16   left: 0;
  17   width: 100%;
  18   height: 100%;
  19   z-index: 1043;
  20   position: fixed;
  21   outline: none !important;
  22   -webkit-backface-visibility: hidden; }
  23
  24 .mfp-container {
  25   text-align: center;
  26   position: absolute;
  27   width: 100%;
  28   height: 100%;
  29   left: 0;
  30   top: 0;
  31   padding: 0 8px;
  32   -webkit-box-sizing: border-box;
  33   -moz-box-sizing: border-box;
  34   box-sizing: border-box; }
  35
  36 .mfp-container:before {
  37   content: '';
  38   display: inline-block;
  39   height: 100%;
  40   vertical-align: middle; }
  41
  42 .mfp-align-top .mfp-container:before {
  43   display: none; }
  44
  45 .mfp-content {
  46   position: relative;
  47   display: inline-block;
  48   vertical-align: middle;
  49   margin: 0 auto;
  50   text-align: left;
  51   z-index: 1045; }
  52
  53 .mfp-inline-holder .mfp-content,
  54 .mfp-ajax-holder .mfp-content {
  55   width: 100%;
  56   cursor: auto; }
  57
  58 .mfp-ajax-cur {
  59   cursor: progress; }
  60
  61 .mfp-zoom-out-cur,
  62 .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  63   cursor: -moz-zoom-out;
  64   cursor: -webkit-zoom-out;
  65   cursor: zoom-out; }
  66
  67 .mfp-zoom {
  68   cursor: pointer;
  69   cursor: -webkit-zoom-in;
  70   cursor: -moz-zoom-in;
  71   cursor: zoom-in; }
  72
  73 .mfp-auto-cursor .mfp-content {
  74   cursor: auto; }
  75
  76 .mfp-close,
  77 .mfp-arrow,
  78 .mfp-preloader,
  79 .mfp-counter {
  80   -webkit-user-select: none;
  81   -moz-user-select: none;
  82   user-select: none; }
  83
  84 .mfp-loading.mfp-figure {
  85   display: none; }
  86
  87 .mfp-hide {
  88   display: none !important; }
  89
  90 .mfp-preloader {
  91   color: #cccccc;
  92   position: absolute;
  93   top: 50%;
  94   width: auto;
  95   text-align: center;
  96   margin-top: -0.8em;
  97   left: 8px;
  98   right: 8px;
  99   z-index: 1044; }
 100
 101 .mfp-preloader a {
 102   color: #cccccc; }
 103
 104 .mfp-preloader a:hover {
 105   color: white; }
 106
 107 .mfp-s-ready .mfp-preloader {
 108   display: none; }
 109
 110 .mfp-s-error .mfp-content {
 111   display: none; }
 112
 113 button.mfp-close,
 114 button.mfp-arrow {
 115   overflow: visible;
 116   cursor: pointer;
 117   background: transparent;
 118   border: 0;
 119   -webkit-appearance: none;
 120   display: block;
 121   padding: 0;
 122   z-index: 1046; }
 123
 124 button::-moz-focus-inner {
 125   padding: 0;
 126   border: 0; }
 127
 128 .mfp-close {
 129   width: 44px;
 130   height: 44px;
 131   line-height: 44px;
 132   position: absolute;
 133   right: 0;
 134   top: 0;
 135   text-decoration: none;
 136   text-align: center;
 137   opacity: 0.65;
 138   padding: 0 0 18px 10px;
 139   color: white;
 140   font-style: normal;
 141   font-size: 28px;
 142   font-family: Arial, Baskerville, monospace; }
 143   .mfp-close:hover, .mfp-close:focus {
 144     opacity: 1; }
 145   .mfp-close:active {
 146     top: 1px; }
 147
 148 .mfp-close-btn-in .mfp-close {
 149   color: #333333; }
 150
 151 .mfp-image-holder .mfp-close,
 152 .mfp-iframe-holder .mfp-close {
 153   color: white;
 154   right: -6px;
 155   text-align: right;
 156   padding-right: 6px;
 157   width: 100%; }
 158
 159 .mfp-counter {
 160   position: absolute;
 161   top: 0;
 162   right: 0;
 163   color: #cccccc;
 164   font-size: 12px;
 165   line-height: 18px; }
 166
 167 .mfp-arrow {
 168   position: absolute;
 169   opacity: 0.65;
 170   margin: 0;
 171   top: 50%;
 172   margin-top: -55px;
 173   padding: 0;
 174   width: 90px;
 175   height: 110px;
 176   -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
 177
 178 .mfp-arrow:active {
 179   margin-top: -54px; }
 180
 181 .mfp-arrow:hover,
 182 .mfp-arrow:focus {
 183   opacity: 1; }
 184
 185 .mfp-arrow:before, .mfp-arrow:after,
 186 .mfp-arrow .mfp-b,
 187 .mfp-arrow .mfp-a {
 188   content: '';
 189   display: block;
 190   width: 0;
 191   height: 0;
 192   position: absolute;
 193   left: 0;
 194   top: 0;
 195   margin-top: 35px;
 196   margin-left: 35px;
 197   border: medium inset transparent; }
 198 .mfp-arrow:after,
 199 .mfp-arrow .mfp-a {
 200   border-top-width: 13px;
 201   border-bottom-width: 13px;
 202   top: 8px; }
 203 .mfp-arrow:before,
 204 .mfp-arrow .mfp-b {
 205   border-top-width: 21px;
 206   border-bottom-width: 21px; }
 207
 208 .mfp-arrow-left {
 209   left: 0; }
 210   .mfp-arrow-left:after,
 211   .mfp-arrow-left .mfp-a {
 212     border-right: 17px solid white;
 213     margin-left: 31px; }
 214   .mfp-arrow-left:before,
 215   .mfp-arrow-left .mfp-b {
 216     margin-left: 25px;
 217     border-right: 27px solid #3f3f3f; }
 218
 219 .mfp-arrow-right {
 220   right: 0; }
 221   .mfp-arrow-right:after,
 222   .mfp-arrow-right .mfp-a {
 223     border-left: 17px solid white;
 224     margin-left: 39px; }
 225   .mfp-arrow-right:before,
 226   .mfp-arrow-right .mfp-b {
 227     border-left: 27px solid #3f3f3f; }
 228
 229 .mfp-iframe-holder {
 230   padding-top: 40px;
 231   padding-bottom: 40px; }
 232
 233 .mfp-iframe-holder .mfp-content {
 234   line-height: 0;
 235   width: 100%;
 236   max-width: 900px; }
 237
 238 .mfp-iframe-scaler {
 239   width: 100%;
 240   height: 0;
 241   overflow: hidden;
 242   padding-top: 56.25%; }
 243
 244 .mfp-iframe-scaler iframe {
 245   position: absolute;
 246   display: block;
 247   top: 0;
 248   left: 0;
 249   width: 100%;
 250   height: 100%;
 251   box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
 252   background: black; }
 253
 254 .mfp-iframe-holder .mfp-close {
 255   top: -40px; }
 256
 257 /* Main image in popup */
 258 img.mfp-img {
 259   width: auto;
 260   max-width: 100%;
 261   height: auto;
 262   display: block;
 263   line-height: 0;
 264   -webkit-box-sizing: border-box;
 265   -moz-box-sizing: border-box;
 266   box-sizing: border-box;
 267   padding: 40px 0 40px;
 268   margin: 0 auto; }
 269
 270 /* The shadow behind the image */
 271 .mfp-figure:after {
 272   content: '';
 273   position: absolute;
 274   left: 0;
 275   top: 40px;
 276   bottom: 40px;
 277   display: block;
 278   right: 0;
 279   width: auto;
 280   height: auto;
 281   z-index: -1;
 282   box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
 283   background: #444444; }
 284
 285 .mfp-figure {
 286   line-height: 0; }
 287
 288 .mfp-bottom-bar {
 289   margin-top: -36px;
 290   position: absolute;
 291   top: 100%;
 292   left: 0;
 293   width: 100%;
 294   cursor: auto; }
 295
 296 .mfp-title {
 297   text-align: left;
 298   line-height: 18px;
 299   color: #f3f3f3;
 300   word-break: break-word;
 301   padding-right: 36px; }
 302
 303 .mfp-figure small {
 304   color: #bdbdbd;
 305   display: block;
 306   font-size: 12px;
 307   line-height: 14px; }
 308
 309 .mfp-image-holder .mfp-content {
 310   max-width: 100%; }
 311
 312 .mfp-gallery .mfp-image-holder .mfp-figure {
 313   cursor: pointer; }
 314
 315 @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
 316   /**
 317    * Remove all paddings around the image on small screen
 318    */
 319   .mfp-img-mobile .mfp-image-holder {
 320     padding-left: 0;
 321     padding-right: 0; }
 322
 323   .mfp-img-mobile img.mfp-img {
 324     padding: 0; }
 325
 326   /* The shadow behind the image */
 327   .mfp-img-mobile .mfp-figure:after {
 328     top: 0;
 329     bottom: 0; }
 330
 331   .mfp-img-mobile .mfp-bottom-bar {
 332     background: rgba(0, 0, 0, 0.6);
 333     bottom: 0;
 334     margin: 0;
 335     top: auto;
 336     padding: 3px 5px;
 337     position: fixed;
 338     -webkit-box-sizing: border-box;
 339     -moz-box-sizing: border-box;
 340     box-sizing: border-box; }
 341
 342   .mfp-img-mobile .mfp-bottom-bar:empty {
 343     padding: 0; }
 344
 345   .mfp-img-mobile .mfp-counter {
 346     right: 5px;
 347     top: 3px; }
 348
 349   .mfp-img-mobile .mfp-close {
 350     top: 0;
 351     right: 0;
 352     width: 35px;
 353     height: 35px;
 354     line-height: 35px;
 355     background: rgba(0, 0, 0, 0.6);
 356     position: fixed;
 357     text-align: center;
 358     padding: 0; }
 359
 360   .mfp-img-mobile .mfp-figure small {
 361     display: inline;
 362     margin-left: 5px; } }
 363 @media all and (max-width: 900px) {
 364   .mfp-arrow {
 365     -webkit-transform: scale(0.75);
 366     transform: scale(0.75); }
 367
 368   .mfp-arrow-left {
 369     -webkit-transform-origin: 0;
 370     transform-origin: 0; }
 371
 372   .mfp-arrow-right {
 373     -webkit-transform-origin: 100%;
 374     transform-origin: 100%; }
 375
 376   .mfp-container {
 377     padding-left: 6px;
 378     padding-right: 6px; } }
 379 .mfp-ie7 .mfp-img {
 380   padding: 0; }
 381 .mfp-ie7 .mfp-bottom-bar {
 382   width: 600px;
 383   left: 50%;
 384   margin-left: -300px;
 385   margin-top: 5px;
 386   padding-bottom: 5px; }
 387 .mfp-ie7 .mfp-container {
 388   padding: 0; }
 389 .mfp-ie7 .mfp-content {
 390   padding-top: 44px; }
 391 .mfp-ie7 .mfp-close {
 392   top: 0;
 393   right: 0;
 394   padding-top: 0; }