/*! libs\pictures\scss\bundle.scss */ /*! @import "englishextra-ui-colors" */ /*! * englishextra-ui colors * use microsoft.com/en-us/design/color * localhost/tools/Tinter-Shader/index.html * localhost/tools/perfect_colors/ * localhost/tools/TinyColor/index.html * localhost/tools/color-palette-generator/index.html * localhost/tools/hexcolortool/index.html * localhost/tools/css3-playground/ */ /* 0073D2 007DD1 5E308F 9C0087 D13636 F23819 FF4141 00AC54 547E71 8C582C F5630E FDE000 C3C3C3 D54848 2D7C9A 2F79B6 EF6B50 EB5262 706D6A 60867B 615FC8 744DA5 3087CD */ /* \$(.*?)\: (.*?)\; \t\t\t\t\t\t\t\t\t\t
$\1
\$(.*?)\: (.*?)\; .bg-\1 { background-color: $\1; } */ /*! @import "englishextra-variables"; */ /*! @import "font-face"; */ /* @font-face { font-family: "Exo2"; src: url(../../../fonts/exo2-fontfacekit/Exo2Light.woff2) format("woff2"), url(../../../fonts/exo2-fontfacekit/Exo2Light.woff) format("woff"), url(../../../fonts/exo2-fontfacekit/Exo2Light.ttf) format("truetype"); font-style: normal; font-weight: 300; font-display: swap; } @font-face { font-family: "Exo2"; src: url(../../../fonts/exo2-fontfacekit/Exo2Regular.woff2) format("woff2"), url(../../../fonts/exo2-fontfacekit/Exo2Regular.woff) format("woff"), url(../../../fonts/exo2-fontfacekit/Exo2Regular.ttf) format("truetype"); font-style: normal; font-weight: 400; font-display: swap; } */ @font-face { font-family: Roboto; src: url(../../../fonts/roboto-fontfacekit/2.137/Roboto-Thin.woff2?v=2.137) format("woff2"), url(../../../fonts/roboto-fontfacekit/2.137/Roboto-Thin.woff?v=2.137) format("woff"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: Roboto; src: url(../../../fonts/roboto-fontfacekit/2.137/Roboto-ThinItalic.woff2?v=2.137) format("woff2"), url(../../../fonts/roboto-fontfacekit/2.137/Roboto-ThinItalic.woff?v=2.137) format("woff"); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: Roboto; src: url(../../../fonts/roboto-fontfacekit/2.137/Roboto-Light.woff2?v=2.137) format("woff2"), url(../../../fonts/roboto-fontfacekit/2.137/Roboto-Light.woff?v=2.137) format("woff"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: Roboto; src: url(../../../fonts/roboto-fontfacekit/2.137/Roboto-LightItalic.woff2?v=2.137) format("woff2"), url(../../../fonts/roboto-fontfacekit/2.137/Roboto-LightItalic.woff?v=2.137) format("woff"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: Roboto; src: url(../../../fonts/roboto-fontfacekit/2.137/Roboto-Regular.woff2?v=2.137) format("woff2"), url(../../../fonts/roboto-fontfacekit/2.137/Roboto-Regular.woff?v=2.137) format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: Roboto; src: url(../../../fonts/roboto-fontfacekit/2.137/Roboto-Regular.woff2?v=2.137) format("woff2"), url(../../../fonts/roboto-fontfacekit/2.137/Roboto-Regular.woff?v=2.137) format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: Roboto; src: url(../../../fonts/roboto-fontfacekit/2.137/Roboto-Italic.woff2?v=2.137) format("woff2"), url(../../../fonts/roboto-fontfacekit/2.137/Roboto-Italic.woff?v=2.137) format("woff"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: Roboto; src: url(../../../fonts/roboto-fontfacekit/2.137/Roboto-Italic.woff2?v=2.137) format("woff2"), url(../../../fonts/roboto-fontfacekit/2.137/Roboto-Italic.woff?v=2.137) format("woff"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: Roboto; src: url(../../../fonts/roboto-fontfacekit/2.137/Roboto-Medium.woff2?v=2.137) format("woff2"), url(../../../fonts/roboto-fontfacekit/2.137/Roboto-Medium.woff?v=2.137) format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: Roboto; src: url(../../../fonts/roboto-fontfacekit/2.137/Roboto-MediumItalic.woff2?v=2.137) format("woff2"), url(../../../fonts/roboto-fontfacekit/2.137/Roboto-MediumItalic.woff?v=2.137) format("woff"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: Roboto; src: url(../../../fonts/roboto-fontfacekit/2.137/Roboto-Bold.woff2?v=2.137) format("woff2"), url(../../../fonts/roboto-fontfacekit/2.137/Roboto-Bold.woff?v=2.137) format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: Roboto; src: url(../../../fonts/roboto-fontfacekit/2.137/Roboto-Bold.woff2?v=2.137) format("woff2"), url(../../../fonts/roboto-fontfacekit/2.137/Roboto-Bold.woff?v=2.137) format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: Roboto; src: url(../../../fonts/roboto-fontfacekit/2.137/Roboto-BoldItalic.woff2?v=2.137) format("woff2"), url(../../../fonts/roboto-fontfacekit/2.137/Roboto-BoldItalic.woff?v=2.137) format("woff"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: Roboto; src: url(../../../fonts/roboto-fontfacekit/2.137/Roboto-BoldItalic.woff2?v=2.137) format("woff2"), url(../../../fonts/roboto-fontfacekit/2.137/Roboto-BoldItalic.woff?v=2.137) format("woff"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: Roboto; src: url(../../../fonts/roboto-fontfacekit/2.137/Roboto-Black.woff2?v=2.137) format("woff2"), url(../../../fonts/roboto-fontfacekit/2.137/Roboto-Black.woff?v=2.137) format("woff"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: Roboto; src: url(../../../fonts/roboto-fontfacekit/2.137/Roboto-BlackItalic.woff2?v=2.137) format("woff2"), url(../../../fonts/roboto-fontfacekit/2.137/Roboto-BlackItalic.woff?v=2.137) format("woff"); font-weight: 900; font-style: italic; font-display: swap; } @font-face { font-family: "Roboto Mono"; src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Thin.eot); src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Thin.eot?#iefix) format("embedded-opentype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Thin.woff2?v=2.0.986) format("woff2"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Thin.woff?v=2.0.986) format("woff"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Thin.ttf) format("truetype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Thin.svg#RobotoMonoThin) format("svg"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto Mono"; src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-ThinItalic.eot); src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-ThinItalic.eot?#iefix) format("embedded-opentype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-ThinItalic.woff2?v=2.0.986) format("woff2"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-ThinItalic.woff?v=2.0.986) format("woff"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-ThinItalic.ttf) format("truetype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-ThinItalic.svg#RobotoMonoThinItalic) format("svg"); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: "Roboto Mono"; src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Light.eot); src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Light.eot?#iefix) format("embedded-opentype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Light.woff2?v=2.0.986) format("woff2"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Light.woff?v=2.0.986) format("woff"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Light.ttf) format("truetype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Light.svg#RobotoMonoLight) format("svg"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto Mono"; src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-LightItalic.eot); src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-LightItalic.eot?#iefix) format("embedded-opentype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-LightItalic.woff2?v=2.0.986) format("woff2"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-LightItalic.woff?v=2.0.986) format("woff"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-LightItalic.ttf) format("truetype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-LightItalic.svg#RobotoMonoLightItalic) format("svg"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "Roboto Mono"; src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Regular.eot); src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Regular.eot?#iefix) format("embedded-opentype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Regular.woff2?v=2.0.986) format("woff2"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Regular.woff?v=2.0.986) format("woff"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Regular.ttf) format("truetype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Regular.svg#RobotoMonoRegular) format("svg"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto Mono"; src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Regular.eot); src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Regular.eot?#iefix) format("embedded-opentype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Regular.woff2?v=2.0.986) format("woff2"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Regular.woff?v=2.0.986) format("woff"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Regular.ttf) format("truetype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Regular.svg#RobotoMonoRegular) format("svg"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto Mono"; src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Italic.eot); src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Italic.eot?#iefix) format("embedded-opentype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Italic.woff2?v=2.0.986) format("woff2"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Italic.woff?v=2.0.986) format("woff"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Italic.ttf) format("truetype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Italic.svg#RobotoMonoItalic) format("svg"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Roboto Mono"; src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Italic.eot); src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Italic.eot?#iefix) format("embedded-opentype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Italic.woff2?v=2.0.986) format("woff2"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Italic.woff?v=2.0.986) format("woff"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Italic.ttf) format("truetype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Italic.svg#RobotoMonoItalic) format("svg"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Roboto Mono"; src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Medium.eot); src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Medium.eot?#iefix) format("embedded-opentype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Medium.woff2?v=2.0.986) format("woff2"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Medium.woff?v=2.0.986) format("woff"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Medium.ttf) format("truetype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Medium.svg#RobotoMonoMedium) format("svg"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto Mono"; src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-MediumItalic.eot); src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-MediumItalic.eot?#iefix) format("embedded-opentype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-MediumItalic.woff2?v=2.0.986) format("woff2"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-MediumItalic.woff?v=2.0.986) format("woff"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-MediumItalic.ttf) format("truetype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-MediumItalic.svg#RobotoMonoMediumItalic) format("svg"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "Roboto Mono"; src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Bold.eot); src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Bold.eot?#iefix) format("embedded-opentype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Bold.woff2?v=2.0.986) format("woff2"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Bold.woff?v=2.0.986) format("woff"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Bold.ttf) format("truetype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Bold.svg#RobotoMonoBold) format("svg"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto Mono"; src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Bold.eot); src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Bold.eot?#iefix) format("embedded-opentype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Bold.woff2?v=2.0.986) format("woff2"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Bold.woff?v=2.0.986) format("woff"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Bold.ttf) format("truetype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-Bold.svg#RobotoMonoBold) format("svg"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto Mono"; src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-BoldItalic.eot); src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-BoldItalic.eot?#iefix) format("embedded-opentype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-BoldItalic.woff2?v=2.0.986) format("woff2"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-BoldItalic.woff?v=2.0.986) format("woff"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-BoldItalic.ttf) format("truetype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-BoldItalic.svg#RobotoMonoBoldItalic) format("svg"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Roboto Mono"; src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-BoldItalic.eot); src: url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-BoldItalic.eot?#iefix) format("embedded-opentype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-BoldItalic.woff2?v=2.0.986) format("woff2"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-BoldItalic.woff?v=2.0.986) format("woff"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-BoldItalic.ttf) format("truetype"), url(../../../fonts/roboto-mono-fontfacekit/2.0.986/RobotoMono-BoldItalic.svg#RobotoMonoBoldItalic) format("svg"); font-weight: 700; font-style: italic; font-display: swap; } /*! @import "normalize"; */ /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ /*! * 1. Change the default font family in all browsers (opinionated). * 2. Correct the line height in all browsers. * 3. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */ /* Document ========================================================================== */ html { font-family: sans-serif; /* 1 */ line-height: 1.15; /* 2 */ -ms-text-size-adjust: 100%; /* 3 */ -webkit-text-size-adjust: 100%; /* 3 */ } /* Sections ========================================================================== */ /*! * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /*! * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section { display: block; } /*! * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /*! * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main { /* 1 */ display: block; } /*! * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /*! * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { -webkit-box-sizing: content-box; box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /*! * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /*! * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /*! * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */ a:active, a:hover { outline-width: 0; } /*! * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /*! * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /*! * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /*! * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /*! * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /*! * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000000; } /*! * Add the correct font size in all browsers. */ small { font-size: 80%; } /*! * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /*! * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /*! * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /*! * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /*! * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ /*! * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /*! * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /*! * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /*! * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /*! * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /*! * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /*! * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /*! * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /*! * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /*! * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /*! * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /*! * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /*! * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /*! * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /*! * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, menu { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting ========================================================================== */ /*! * Add the correct display in IE 9-. */ canvas { display: inline-block; } /*! * Add the correct display in IE. */ template { display: none; } /* Hidden ========================================================================== */ /*! * Add the correct display in IE 10-. */ [hidden] { display: none; } /*! @import "photoswipe.default-skin.fixed"; */ /*! * @see {@link https://github.com/dimsemenov/PhotoSwipe v4.1.0 images integrated in css using base64} * PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license * photoswipe.min.css */ .pswp { display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; -ms-touch-action: none; touch-action: none; z-index: 1500; -webkit-text-size-adjust: 100%; outline: none; } .pswp *, *:after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; } ::selection { color: rgba(255, 255, 255, 0.9); background-color: rgba(58, 150, 221, 0.9); } ::-webkit-input-placeholder { color: #878787 !important; opacity: 1; } :-ms-input-placeholder { color: #878787 !important; opacity: 1; } ::-ms-input-placeholder { color: #878787 !important; opacity: 1; } ::placeholder { color: #878787 !important; opacity: 1; } .pswp img { max-width: none; } .pswp--animate_opacity { opacity: 0.001; /* will-change: opacity; */ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--open { display: block; } .pswp--zoom-allowed .pswp__img { cursor: -webkit-zoom-in; cursor: zoom-in; } .pswp--zoomed-in .pswp__img { cursor: -webkit-grab; cursor: grab; } .pswp--dragging .pswp__img { cursor: -webkit-grabbing; cursor: grabbing; } .pswp__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000000; opacity: 0; /* will-change: opacity; */ } .pswp__scroll-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .pswp__container, .pswp__zoom-wrap { -ms-touch-action: none; touch-action: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .pswp__container, .pswp__img { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .pswp__zoom-wrap { position: absolute; width: 100%; -webkit-transform-origin: left top; transform-origin: left top; -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1), -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp__bg { /* will-change: opacity; */ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap { -webkit-transition: none; transition: none; } .pswp__container, .pswp__zoom-wrap { /* will-change: transform; */ } .pswp__item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; } .pswp__img { position: absolute; width: auto; height: auto; top: 0; left: 0; } .pswp__img--placeholder--blank { background: #222; } .pswp--ie .pswp__img { width: 100% !important; height: auto !important; left: 0; top: 0; } .pswp__error-msg { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; font-size: 14px; line-height: 16px; margin-top: -8px; color: #ccc; } .pswp__error-msg a { color: #ccc; text-decoration: underline; } /*! * PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license * default-skin.css modified images base64 encoded */ .pswp__button { width: 44px; height: 44px; position: relative; background: none; cursor: pointer; overflow: visible; -webkit-appearance: none; display: block; border: 0; padding: 0; margin: 0; float: right; opacity: 0.75; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; -webkit-box-shadow: none; box-shadow: none; } .pswp__button:focus, .pswp__button:hover { opacity: 1; } .pswp__button:active { outline: none; opacity: 0.9; } .pswp__button::-moz-focus-inner { padding: 0; border: 0; } .pswp__ui--over-close .pswp__button--close { opacity: 1; } .pswp__button, .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjY0IiBoZWlnaHQ9Ijg4IiB2aWV3Qm94PSIwIDAgMjY0IDg4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGc+PHBhdGggZD0iTTY3LjAwMiA1OS41djMuNzY4Yy02LjMwNy44NC05LjE4NCA1Ljc1LTEwLjAwMiA5LjczMiAyLjIyLTIuODMgNS41NjQtNS4wOTggMTAuMDAyLTUuMDk4VjcxLjVMNzMgNjUuNTg1IDY3LjAwMiA1OS41eiIgaWQ9IlNoYXBlIiBmaWxsPSIjZmZmIi8+PGcgZmlsbD0iI2ZmZiI+PHBhdGggZD0iTTEzIDI5di01aDJ2M2gzdjJoLTV6TTEzIDE1aDV2MmgtM3YzaC0ydi01ek0zMSAxNXY1aC0ydi0zaC0zdi0yaDV6TTMxIDI5aC01di0yaDN2LTNoMnY1eiIgaWQ9IlNoYXBlIi8+PC9nPjxnIGZpbGw9IiNmZmYiPjxwYXRoIGQ9Ik02MiAyNHY1aC0ydi0zaC0zdi0yaDV6TTYyIDIwaC01di0yaDN2LTNoMnY1ek03MCAyMHYtNWgydjNoM3YyaC01ek03MCAyNGg1djJoLTN2M2gtMnYtNXoiLz48L2c+PHBhdGggZD0iTTIwLjU4NiA2NmwtNS42NTYtNS42NTYgMS40MTQtMS40MTRMMjIgNjQuNTg2bDUuNjU2LTUuNjU2IDEuNDE0IDEuNDE0TDIzLjQxNCA2Nmw1LjY1NiA1LjY1Ni0xLjQxNCAxLjQxNEwyMiA2Ny40MTRsLTUuNjU2IDUuNjU2LTEuNDE0LTEuNDE0TDIwLjU4NiA2NnoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMTExLjc4NSA2NS4wM0wxMTAgNjMuNWwzLTMuNWgtMTB2LTJoMTBsLTMtMy41IDEuNzg1LTEuNDY4TDExNyA1OWwtNS4yMTUgNi4wM3oiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMTUyLjIxNSA2NS4wM0wxNTQgNjMuNWwtMy0zLjVoMTB2LTJoLTEwbDMtMy41LTEuNzg1LTEuNDY4TDE0NyA1OWw1LjIxNSA2LjAzeiIgZmlsbD0iI2ZmZiIvPjxnPjxwYXRoIGlkPSJSZWN0YW5nbGUtMTEiIGZpbGw9IiNmZmYiIGQ9Ik0xNjAuOTU3IDI4LjU0M2wtMy4yNS0zLjI1LTEuNDEzIDEuNDE0IDMuMjUgMy4yNXoiLz48cGF0aCBkPSJNMTUyLjUgMjdjMy4wMzggMCA1LjUtMi40NjIgNS41LTUuNXMtMi40NjItNS41LTUuNS01LjUtNS41IDIuNDYyLTUuNSA1LjUgMi40NjIgNS41IDUuNSA1LjV6IiBpZD0iT3ZhbC0xIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMS41Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE1MCAyMWg1djFoLTV6Ii8+PC9nPjxnPjxwYXRoIGQ9Ik0xMTYuOTU3IDI4LjU0M2wtMS40MTQgMS40MTQtMy4yNS0zLjI1IDEuNDE0LTEuNDE0IDMuMjUgMy4yNXoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMTA4LjUgMjdjMy4wMzggMCA1LjUtMi40NjIgNS41LTUuNXMtMi40NjItNS41LTUuNS01LjUtNS41IDIuNDYyLTUuNSA1LjUgMi40NjIgNS41IDUuNSA1LjV6IiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMS41Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEwNiAyMWg1djFoLTV6Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEwOS4wNDMgMTkuMDA4bC0uMDg1IDUtMS0uMDE3LjA4NS01eiIvPjwvZz48L2c+PC9nPjwvc3ZnPg==); background-size: 264px 88px; background-position: 0 0; background-repeat: no-repeat; width: 44px; height: 44px; } .no-svg .pswp__button, .no-svg .pswp__button--arrow--left:before, .no-svg .pswp__button--arrow--right:before { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQgAAABYCAQAAACjBqE3AAAB6klEQVR4Ae3bsWpUQRTG8YkkanwCa7GzVotsI/gEgk9h4Vu4ySLYmMYgbJrc3lrwZbJwC0FMt4j7F6Y4oIZrsXtgxvx/1c0ufEX4cnbmLCmSJEmSJEmSJEmSJP3XCBPvbJU+8doWmDFwyZpLBmYlNJebz0KwzykwsuSYJSNwykEJreV2BaBMaLIQZ2xYcFgqDlmw4ayE/FwL0dDk4Qh4W37DAjgqIT+3HRbigjH+iikVdxgZStgyN0Su2sXIeTwTT+esdpcbIlfNAuZ/TxresG4zV8kYWSZNiKUTokMMSWeIwTNEn4fK2TW3gRNgVkJLuVksROA9G+bEvoATNlBCa7nZXEwdxEZxzpKRKFh+bsv8LmPFmhX1OwfIz81jIRJQ5eeqG9B+riRJkiRJkiRJkiRJkiRJkiRJUkvA/8RQoEpKlJWINFkJ62AlrEP/mNBibnv2yz/A3t7Uq3LcpoxP8COjC1T5vxoAD5VdoEqdDrd5QuW1swtUSaueh3zkiuBiqgtA2OlkeMcP/uDqugsJdbjHF65VdPMKwS0+WQc/MgKvrIOHysB9vgPwk8+85hmPbnQdvHZyDMAFD7L3EOpgMcVdvnHFS0/vlatrXvCVx0U9gt3fxvnA0/hB4nmRJEmSJEmSJEmSJGmHfgFLaDPoMu5xWwAAAABJRU5ErkJggg==); } @media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) { .pswp--svg .pswp__button--arrow--left, .pswp--svg .pswp__button--arrow--right { background: none; } } .pswp__button--close { background-position: 0 -44px; } .pswp__button--share { background-position: -44px -44px; } .pswp__button--fs { display: none; } .pswp--supports-fs .pswp__button--fs { display: block; } .pswp--fs .pswp__button--fs { background-position: -44px 0; } .pswp__button--zoom { display: none; background-position: -88px 0; } .pswp--zoom-allowed .pswp__button--zoom { display: block; } .pswp--zoomed-in .pswp__button--zoom { background-position: -132px 0; } .pswp--touch .pswp__button--arrow--left, .pswp--touch .pswp__button--arrow--right { visibility: hidden; } .pswp__button--arrow--left, .pswp__button--arrow--right { background: none; top: 50%; margin-top: -50px; width: 70px; height: 100px; position: absolute; } .pswp__button--arrow--left { left: 0; } .pswp__button--arrow--right { right: 0; } .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { content: ""; top: 35px; background-color: rgba(0, 0, 0, 0.3); height: 30px; width: 32px; position: absolute; } .pswp__button--arrow--left:before { left: 6px; background-position: -138px -44px; } .pswp__button--arrow--right:before { right: 6px; background-position: -94px -44px; } .pswp__counter, .pswp__share-modal { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .pswp__share-modal { display: block; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; top: 0; left: 0; padding: 10px; position: absolute; z-index: 1600; opacity: 0; -webkit-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; /* will-change: opacity; */ } .pswp__share-modal--hidden { display: none; } .pswp__share-tooltip { z-index: 1620; position: absolute; background: #FFFFFF; top: 56px; border-radius: 2px; display: block; width: auto; right: 44px; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); -webkit-transform: translateY(6px); transform: translateY(6px); -webkit-transition: -webkit-transform 0.25s; transition: -webkit-transform 0.25s; transition: transform 0.25s; transition: transform 0.25s, -webkit-transform 0.25s; /* will-change: transform; */ } .pswp__share-tooltip a { display: block; padding: 8px 12px; color: #000000; text-decoration: none; font-size: 14px; line-height: 18px; } .pswp__share-tooltip a:hover { text-decoration: none; color: #000000; } .pswp__share-tooltip a:first-child { border-radius: 2px 2px 0 0; } .pswp__share-tooltip a:last-child { border-radius: 0 0 2px 2px; } .pswp__share-modal--fade-in { opacity: 1; } .pswp__share-modal--fade-in .pswp__share-tooltip { -webkit-transform: translateY(0); transform: translateY(0); } .pswp--touch .pswp__share-tooltip a { padding: 16px 12px; } a.pswp__share--facebook:before { content: ""; display: block; width: 0; height: 0; position: absolute; top: -12px; right: 15px; border: 6px solid transparent; border-bottom-color: #FFFFFF; pointer-events: none; } a.pswp__share--facebook:hover { background: #3b5998; color: #FFFFFF; } a.pswp__share--facebook:hover:before { border-bottom-color: #3b5998; } a.pswp__share--twitter:hover { background: #1da1f2; color: #FFFFFF; } a.pswp__share--pinterest:hover { background: #ccc; color: #bd081c; } a.pswp__share--download:hover { background: #ddd; } .pswp__counter { position: absolute; left: 0; top: 0; height: 44px; font-size: 13px; line-height: 44px; color: #FFFFFF; opacity: 0.75; padding: 0 10px; } .pswp__caption { position: absolute; left: 0; bottom: 0; width: 100%; min-height: 44px; } .pswp__caption small { font-size: 11px; color: #bbb; } .pswp__caption__center { text-align: left; max-width: 420px; margin: 0 auto; font-size: 13px; padding: 10px; line-height: 20px; color: #ccc; } .pswp__caption--empty { display: none; } .pswp__caption--fake { visibility: hidden; } .pswp__preloader { width: 44px; height: 44px; position: absolute; top: 0; left: 50%; margin-left: -22px; opacity: 0; -webkit-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; /* will-change: opacity; */ direction: ltr; } .pswp__preloader__icn { width: 20px; height: 20px; margin: 12px; } .pswp__preloader--active { opacity: 1; } .pswp__preloader--active .pswp__preloader__icn { background-image: url(data:image/gif;base64,R0lGODlhFAAUAPMIAIeHhz8/P1dXVycnJ8/Pz7e3t5+fn29vb////wAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFBwAIACwAAAAAFAAUAEAEUxDJSatFxtwaggWAdIyHJAhXoRYSQUhDPGx0TbmujahbXGWZWqdDAYEsp5NupLPkdDwE7oXwWVasimzWrAE1tKFHErQRK8eL8mMUlRBJVI307uoiACH5BAUHAAgALAEAAQASABIAAAROEMkpS6E4W5upMdUmEQT2feFIltMJYivbvhnZ3R0A4NMwIDodz+cL7nDEn5CH8DGZh8MtEMBEoxkqlXKVIgQCibbK9YLBYvLtHH5K0J0IACH5BAUHAAgALAEAAQASABIAAAROEMkpjaE4W5spANUmFQX2feFIltMJYivbvhnZ3d1x4BNBIDodz+cL7nDEn5CH8DGZAsFtMMBEoxkqlXKVIgIBibbK9YLBYvLtHH5K0J0IACH5BAUHAAgALAEAAQASABIAAAROEMkpAaA4W5vpOdUmGQb2feFIltMJYivbvhnZ3Z0g4FNRIDodz+cL7nDEn5CH8DGZgcCNQMBEoxkqlXKVIgYDibbK9YLBYvLtHH5K0J0IACH5BAUHAAgALAEAAQASABIAAAROEMkpz6E4W5upENUmAQD2feFIltMJYivbvhnZ3V0Q4JNhIDodz+cL7nDEn5CH8DGZg8GtUMBEoxkqlXKVIggEibbK9YLBYvLtHH5K0J0IACH5BAUHAAgALAEAAQASABIAAAROEMkphaA4W5tpCNUmHQf2feFIltMJYivbvhnZ3d0w4BMAIDodz+cL7nDEn5CH8DGZBMLNYMBEoxkqlXKVIgoFibbK9YLBYvLtHH5K0J0IACH5BAUHAAgALAEAAQASABIAAAROEMkpQ6A4W5vpGNUmCQL2feFIltMJYivbvhnZ3R1B4NNxIDodz+cL7nDEn5CH8DGZhcINAMBEoxkqlXKVIgwGibbK9YLBYvLtHH5K0J0IACH5BAUHAAcALAEAAQASABIAAANCeLo6wzA6FxkhbaoQ4L3ZxnXLh0EjWZ4RV71VUcCLIByyTNt2PsO8m452sBGJBsNxkUwuD03lAQBASqnUJ7aq5UYSADs=); background-position: 0 0; background-repeat: no-repeat; } .pswp--css_animation .pswp__preloader--active { opacity: 1; } .pswp--css_animation .pswp__preloader--active .pswp__preloader__icn { -webkit-animation: clockwise 500ms linear infinite; animation: clockwise 500ms linear infinite; } .pswp--css_animation .pswp__preloader--active .pswp__preloader__donut { -webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; } .pswp--css_animation .pswp__preloader__icn { background: none; opacity: 0.75; width: 14px; height: 14px; position: absolute; left: 15px; top: 15px; margin: 0; } .pswp--css_animation .pswp__preloader__cut { position: relative; width: 7px; height: 14px; overflow: hidden; } .pswp--css_animation .pswp__preloader__donut { -webkit-box-sizing: border-box; box-sizing: border-box; width: 14px; height: 14px; border: 2px solid #FFFFFF; border-radius: 50%; border-left-color: transparent; border-bottom-color: transparent; position: absolute; top: 0; left: 0; background: none; margin: 0; } @media screen and (max-width: 1024px) { .pswp__preloader { position: relative; left: auto; top: auto; margin: 0; float: right; } } @-webkit-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes clockwise { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes donut-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(-140deg); transform: rotate(-140deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } @keyframes donut-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(-140deg); transform: rotate(-140deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } .pswp__ui { -webkit-font-smoothing: auto; visibility: visible; opacity: 1; z-index: 1550; } .pswp__top-bar { position: absolute; left: 0; top: 0; height: 44px; width: 100%; } .pswp__caption, .pswp__top-bar, .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { /* will-change: opacity; */ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { visibility: visible; } .pswp__top-bar, .pswp__caption { background-color: rgba(0, 0, 0, 0.5); } .pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption { background-color: rgba(0, 0, 0, 0.3); } .pswp__ui--idle .pswp__top-bar { opacity: 0; } .pswp__ui--idle .pswp__button--arrow--left, .pswp__ui--idle .pswp__button--arrow--right { opacity: 0; } .pswp__ui--hidden .pswp__top-bar, .pswp__ui--hidden .pswp__caption, .pswp__ui--hidden .pswp__button--arrow--left, .pswp__ui--hidden .pswp__button--arrow--right { opacity: 0.001; } .pswp__ui--one-slide .pswp__button--arrow--left, .pswp__ui--one-slide .pswp__button--arrow--right, .pswp__ui--one-slide .pswp__counter { display: none; } .pswp__element--disabled { display: none !important; } .pswp--minimal--dark .pswp__top-bar { background: none; } /*! @import "pictures-masonry-grid"; */ /*! * masonry grid */ .masonry-grid-wrapper { width: 100%; height: 100%; background-color: #2d2d2d; /** stackoverflow.com/questions/14967413/background-color-not-showing-for-a-div Because the content collapses when the children are floated and adding the overflow rule restores the behavior you'd expect. */ overflow-x: auto; overflow-y: hidden; } .masonry-grid { display: block; width: 100%; visibility: visible; opacity: 1; -webkit-transition: visibility 0s, opacity 0.2s ease; transition: visibility 0s, opacity 0.2s ease; margin: 0 auto; } .masonry-grid:after { display: block; content: ""; clear: both; } .masonry-grid-item { float: left; margin: 0; } .masonry-grid-item img { display: block; width: 100%; height: auto; background-color: transparent; } .masonry-grid-item img.data-src-img, .masonry-grid-item img[data-src] { opacity: 0; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; } .masonry-grid-item img.data-src-img.is-active, .masonry-grid-item img[data-src].is-active { opacity: 1; } .masonry-grid-item figure { display: none; /* font-size: 0.875rem; line-height: 1.200; background-color: $color-hex-disabled-input-bg; margin: 0; padding: 1.000em; */ } @media only screen and (max-width: 20em) { .masonry-grid-item { float: none; } .masonry-grid-sizer, .masonry-grid-item { width: 100%; } } @media only screen and (min-width: 20.063em) { .masonry-grid-item { float: none; } .masonry-grid-sizer, .masonry-grid-item { width: 100%; } } @media only screen and (min-width: 50.063em) { .masonry-grid-sizer, .masonry-grid-item { width: 50%; } .masonry-grid-item { float: left; } } @media only screen and (min-width: 74.063em) { .masonry-grid-sizer, .masonry-grid-item { width: 33.333%; } } @media only screen and (min-width: 90.063em) { .masonry-grid-sizer, .masonry-grid-item { width: 25%; } } /*! @import "main"; */ /*! * main */ /*! * Default CSS Values for HTML Elements * @see {@link https://www.w3schools.com/cssref/css_default_values.asp} */ html, body { height: 100%; } html { font-size: 15px; line-height: 20px; /** * set the parent to background transparent * and position relative to parent, absolute for child */ background-color: transparent; } body { font-family: "Roboto", "Segoe UI", "Segoe WP", "HelveticaNeue", "Roboto", "Source Sans Pro", "Open Sans", "Exo2", "Fira Sans", sans-serif; font-weight: 400; font-size: 1.000rem; line-height: 1.333rem; width: 100%; color: #191919; background-color: #f0f0f0; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: "liga", "kern"; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; outline: none; overflow-x: hidden; margin: 0; padding: 0; } /*! * englishextra specific rules */ a { color: inherit; text-decoration: none; } a:focus, a:active, button:focus, button:active, select:focus, select:active { -webkit-tap-highlight-color: transparent; outline: none; } input[type="button"]::-moz-focus-inner, button::-moz-focus-inner { border: 0; } img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: bottom; } p:first-child { margin-top: 0; } p:last-child { margin-bottom: 0; } b, strong, .bolder { font-weight: bold; } i, em, .italic { font-style: italic; } u, .underline { text-decoration: underline; } *, *:after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; } ::selection { color: rgba(255, 255, 255, 0.9); background-color: rgba(58, 150, 221, 0.9); } ::-webkit-input-placeholder { color: #878787 !important; opacity: 1; } :-ms-input-placeholder { color: #878787 !important; opacity: 1; } ::-ms-input-placeholder { color: #878787 !important; opacity: 1; } ::placeholder { color: #878787 !important; opacity: 1; } /*! * clearfix css-tricks.com/snippets/css/clear-fix/ */ .cf:after { content: ""; display: table; clear: both; } /*! * fit width */ .fit-width { min-width: 100%; } /*! * hide and show on mobile */ .page .show-inline-on-mobile, .page .show-block-on-mobile { display: none; } @media only screen and (max-width: 800px) { .page .hide-on-mobile { display: none; width: 0; height: 0; } .page .show-inline-on-mobile { display: inline; } .page .show-block-on-mobile { display: block; } } .page .hide { display: none; } .page .show-inline { display: inline; } .page .show-inline-block { display: inline-block; } .page .show-block { display: block; } /*! * other */ .page { width: 100%; /** * set the parent to min height 100%, not just height * and position relative to parent, absolute for child */ min-height: 100%; position: relative; top: 0; /* left: 18.133rem; */ left: 0; background-color: #f0f0f0; -webkit-transition: left 0.2s linear; transition: left 0.2s linear; } .page.is-active { position: relative; left: 18.133rem; } .page img, .pswp img { display: block; } .panel-nav-top { display: block; width: 100%; height: 3.200rem; background-color: #e7e7e7; } .container { width: 100%; height: 100%; padding: 0; margin: 0 auto; } /*! * nav menu */ .panel-nav-menu { display: block; width: 18.133rem; height: 100%; position: fixed; top: 0; /* left: 18.133rem; */ left: 0; bottom: 0; font-size: 0.933rem; line-height: 3.200rem; list-style: none; overflow-y: auto; -webkit-overflow-scrolling: touch; background-color: #232323; -webkit-transition: left 0.2s linear; transition: left 0.2s linear; padding: 0; margin: 0; margin-left: -18.133rem; } .panel-nav-menu li { position: relative; top: 0; left: 0; font-weight: 400; padding: 0; margin: 0; } .panel-nav-menu li a { display: block; text-decoration: none; white-space: normal; white-space: nowrap; font-size: 0.933rem; color: #FFFFFF; border: none; -webkit-transition: background-color 0.2s ease; transition: background-color 0.2s ease; padding-right: 1.333rem; padding-left: 1.333rem; } .panel-nav-menu li a:hover { background-color: #414141; } /* .panel-nav-menu li a:focus, */ .panel-nav-menu li a:active { color: #191919; background-color: #d83544; } .panel-nav-menu li a.is-active { background-color: #801e26; } .btn-nav-menu { display: block; width: 3.200rem; height: 3.200rem; position: fixed; top: 0; /* left: 18.133rem; */ left: 0; background-color: #E7E7E7; -webkit-transition: left 0.2s linear, background-color 0.2s ease; transition: left 0.2s linear, background-color 0.2s ease; outline: none; cursor: pointer; border: 0; } .btn-nav-menu .ui-icon { display: block; width: 3.200rem; height: 3.200rem; /*! @see {@link https://www.w3.org/Style/Examples/007/center.en.html#hv3} */ position: absolute; top: 0; left: 0; margin-top: auto; margin-right: auto; margin-left: auto; } .btn-nav-menu .ui-icon > * { fill: #616161; } .btn-nav-menu:hover { background-color: #D5D5D5; } .page.is-active .panel-nav-menu { left: 18.133rem; width: 18.133rem; } .page.is-active .btn-nav-menu { left: 18.133rem; } /*! * menu more */ .btn-menu-more { display: block; width: 3.200rem; height: 3.200rem; position: fixed; top: 0; left: 3.200rem; background-color: #E7E7E7; transition: left 0.2s linear, background-color 0.2s ease; outline: none; cursor: pointer; border: 0; } .btn-menu-more .ui-icon { display: block; width: 3.200rem; height: 3.200rem; /*! @see {@link https://www.w3.org/Style/Examples/007/center.en.html#hv3} */ position: absolute; top: 0; left: 0; margin-top: auto; margin-right: auto; margin-left: auto; } .btn-menu-more .ui-icon > * { fill: #616161; } .btn-menu-more:hover { background-color: #D5D5D5; } .btn-menu-more:active { color: #191919; background-color: #D83544; } .page.is-active .btn-menu-more { left: 21.333rem; } .holder-panel-menu-more { display: block; visibility: hidden; opacity: 0; position: fixed; top: 3.200rem; left: 3.200rem; color: #191919; background-color: #f2f2f2; border: 0.067rem solid #d83544; -webkit-box-shadow: 0.133rem 0.133rem 0.133rem 0 rgba(50, 50, 50, 0.3); box-shadow: 0.133rem 0.133rem 0.133rem 0 rgba(50, 50, 50, 0.3); -webkit-transition: visibility 0s, opacity 0.2s ease; transition: visibility 0s, opacity 0.2s ease; } .page.is-active .holder-panel-menu-more { left: 21.333rem; } .holder-panel-menu-more.is-active { visibility: visible; opacity: 1; } .panel-menu-more { display: block; width: 18.133rem; height: 100%; font-size: 0.933rem; line-height: 3.200rem; list-style-type: none; padding: 0; margin: 0; } .panel-menu-more li a { display: block; font-weight: 400; text-decoration: none; color: inherit; -webkit-transition: background-color 0.2s ease; transition: background-color 0.2s ease; overflow-x: hidden; white-space: nowrap; padding-right: 1.333rem; padding-left: 1.333rem; } .panel-menu-more li a:hover { color: inherit; background-color: #e6e6e6; } /* .panel-menu-more li a:focus, */ .panel-menu-more li a:active { color: #191919; background-color: #d83544; } /*! * other */ .container h1 { width: 100%; position: absolute; top: 0; font-size: 1.2rem; font-weight: 300; line-height: 3.200rem; text-align: center; white-space: nowrap; background-color: #e7e7e7; margin: 0; } /*! * ya-share2 * yandex.ru/blog/share/kak-uvelichit-shrift-tsifr-sch-tchika#comment-add */ #ya-share2 .ya-share2__icon { height: 3.200rem; width: 3.200rem; background-size: 3.200rem 3.200rem; } #ya-share2 .ya-share2__title { width: 0; height: 0; overflow: hidden; } #ya-share2 .ya-share2__item { margin: 0; } #ya-share2 .ya-share2__badge { border-radius: 0; } /*! * pluso, yashare */ .ya-share2 { display: inline-block; visibility: hidden; opacity: 0; position: fixed; right: 3.200rem; bottom: 0; -webkit-box-shadow: 0.133rem 0.133rem 0.133rem 0 rgba(50, 50, 50, 0.3); box-shadow: 0.133rem 0.133rem 0.133rem 0 rgba(50, 50, 50, 0.3); -webkit-transition: visibility 0s, opacity 0.2s ease; transition: visibility 0s, opacity 0.2s ease; } .ya-share2.is-active { visibility: visible; opacity: 1; } .btn-share-buttons { display: block; width: 3.200rem; height: 3.200rem; position: fixed; bottom: 0; right: 3.200rem; font-size: 0; background-color: #e6e6e6; outline: none; cursor: pointer; border: 0; } .btn-share-buttons .ui-icon { display: block; width: 3.200rem; height: 3.200rem; /*! @see {@link https://www.w3.org/Style/Examples/007/center.en.html#hv3} */ margin: 0; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } .btn-share-buttons .ui-icon > * { fill: #767676; } /*! * vk-like */ .holder-vk-like { display: block; visibility: hidden; opacity: 0; overflow: hidden; height: 3.200rem; position: fixed; right: 6.400rem; bottom: 0; line-height: 0; -webkit-transition: visibility 0s, opacity 0.2s ease; transition: visibility 0s, opacity 0.2s ease; background-color: #5181B8; -webkit-box-shadow: 0.133rem 0.133rem 0.133rem 0 rgba(50, 50, 50, 0.3); box-shadow: 0.133rem 0.133rem 0.133rem 0 rgba(50, 50, 50, 0.3); z-index: 1; } .holder-vk-like.is-active { visibility: visible; opacity: 1; } .vk-like { display: inline-block; height: 24px; position: absolute; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); margin: 0 0 0 0.667rem; line-height: 0; } .btn-show-vk-like { display: block; width: 3.200rem; height: 3.200rem; position: fixed; bottom: 0; right: 6.400rem; font-size: 0; background-color: #e6e6e6; outline: none; cursor: pointer; border: 0; } .btn-show-vk-like .ui-icon { display: block; width: 3.200rem; height: 3.200rem; /*! @see {@link https://www.w3.org/Style/Examples/007/center.en.html#hv3} */ margin: 0; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } .btn-show-vk-like .ui-icon > * { fill: #767676; } /*! * @see {@link https://github.com/sksmatt/UItoTop-jQuery-Plugin/} */ .btn-totop { display: none; width: 3.200rem; height: 3.200rem; position: fixed; bottom: 0; right: 0; background-color: #e6e6e6; outline: none; cursor: pointer; border: 0; } .btn-totop .ui-icon { display: block; width: 3.200rem; height: 3.200rem; /*! @see {@link https://www.w3.org/Style/Examples/007/center.en.html#hv3} */ margin: 0; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } .btn-totop.is-active { display: block; } .btn-totop .ui-icon > * { fill: #767676; } /*! * location qr code */ .holder-location-qrcode { display: block; width: 100%; float: left; text-align: left; background-color: #FFFFFF; } .holder-location-qrcode .qr-code-img, .holder-location-qrcode img { display: block; width: 9rem; height: 9rem; background-color: transparent; background-size: 9rem 9rem; border: 0; vertical-align: bottom; padding: 0; margin: 0; } /*! * @see {@link https://gist.github.com/englishextra/40b7c4ffde33bfb58aff259afe229d6a} */ /*------------------------------------------ Foundation Media Queries http://foundation.zurb.com/docs/media-queries.html --------------------------------------------*/ /* Small screens - MOBILE */ @media only screen { html { font-size: 12px; } } /* Define mobile styles - Mobile First */ @media only screen and (max-width: 40em) { html { font-size: 13px; } } /* max-width 640px, mobile-only styles, use when QAing mobile issues */ /* Medium screens - TABLET */ @media only screen and (min-width: 40.063em) { html { font-size: 13px; } } /* min-width 641px, medium screens */ @media only screen and (min-width: 40.063em) and (max-width: 64em) { html { font-size: 15px; } } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */ /* Large screens - DESKTOP */ @media only screen and (min-width: 64.063em) { html { font-size: 15px; } } /* min-width 1025px, large screens */ @media only screen and (min-width: 64.063em) and (max-width: 90em) { html { font-size: 15px; } } /* min-width 1024px and max-width 1440px, use when QAing large screen-only issues */ /* XLarge screens */ @media only screen and (min-width: 90.063em) { html { font-size: 15px; } } /* min-width 1441px, xlarge screens */ @media only screen and (min-width: 90.063em) and (max-width: 120em) { html { font-size: 18px; } } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ /* XXLarge screens */ @media only screen and (min-width: 120.063em) { html { font-size: 19px; } } /* min-width 1921px, xlarge screens */