@randstad-design/orbit-multitheme/dist/assets/theme-spherion/components/image-gallery.css.map

multitheme Front-end code based on Randstad Human Forward components

{"version":3,"sources":["../scss/07_vendor/_photoswipe.scss","components/image-gallery.css","00_helpers/variables/_image-gallery.scss","00_helpers/variables/_colors.scss","../scss/04_organisms/image-gallery/_custom.scss","00_helpers/variables/_spacing.scss","00_helpers/mixins/grid/_grid-columns.scss","00_helpers/variables/_sizing.scss","00_helpers/variables/_transitions.scss","00_helpers/mixins/_font-style.scss","00_helpers/variables/_fonts.scss","00_helpers/mixins/_media-queries.scss","../scss/04_organisms/image-gallery/_photoswipe-skin.scss","../scss/00_tools/cssVartoSass.scss"],"names":[],"mappings":"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","file":"image-gallery.css","sourcesContent":["/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */\n\n/*\n\tStyles for basic PhotoSwipe functionality (sliding area, open/close transitions)\n*/\n\n// PhotoSwipe uses Autoprefixer, so vendor prefixed are added automatically when needed.\n\n/* pswp = photoswipe */\n.pswp {\n  display: none;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  -ms-touch-action: none;\n  touch-action: none;\n  z-index: $pswp__root-z-index;\n  -webkit-text-size-adjust: 100%;\n  /* create separate layer, to avoid paint on window.onscroll in webkit/blink */\n  -webkit-backface-visibility: hidden;\n  outline: none;\n\n  @if $pswp__box-sizing-border-box == true {\n    * {\n      box-sizing: border-box;\n    }\n  }\n\n  img {\n    max-width: none;\n  }\n}\n\n/* style is added when JS option showHideOpacity is set to true */\n.pswp--animate_opacity {\n  /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */\n  opacity: 0.001;\n  will-change: opacity;\n  /* for open/close transition */\n  transition: opacity $pswp__show-hide-transition-duration cubic-bezier(0.4, 0, 0.22, 1);\n}\n\n.pswp--open {\n  display: block;\n}\n\n.pswp--zoom-allowed .pswp__img {\n  /* autoprefixer: off */\n  cursor: -webkit-zoom-in;\n  cursor: -moz-zoom-in;\n  cursor: zoom-in;\n}\n\n.pswp--zoomed-in .pswp__img {\n  /* autoprefixer: off */\n  cursor: -webkit-grab;\n  cursor: -moz-grab;\n  cursor: grab;\n}\n\n.pswp--dragging .pswp__img {\n  /* autoprefixer: off */\n  cursor: -webkit-grabbing;\n  cursor: -moz-grabbing;\n  cursor: grabbing;\n}\n\n/*\n\tBackground is added as a separate element.\n\tAs animating opacity is much faster than animating rgba() background-color.\n*/\n.pswp__bg {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background: $pswp__background-color;\n  opacity: 0;\n  transform: translateZ(0);\n  -webkit-backface-visibility: hidden;\n  will-change: opacity;\n}\n\n.pswp__scroll-wrap {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.pswp__container,\n.pswp__zoom-wrap {\n  -ms-touch-action: none;\n  touch-action: none;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n}\n\n/* Prevent selection and tap highlights */\n.pswp__container,\n.pswp__img {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  -webkit-touch-callout: none;\n}\n\n.pswp__zoom-wrap {\n  position: absolute;\n  width: 100%;\n  -webkit-transform-origin: left top;\n  -moz-transform-origin: left top;\n  -ms-transform-origin: left top;\n  transform-origin: left top;\n  /* for open/close transition */\n  transition: transform $pswp__show-hide-transition-duration cubic-bezier(0.4, 0, 0.22, 1);\n}\n\n.pswp__bg {\n  will-change: opacity;\n  /* for open/close transition */\n  transition: opacity $pswp__show-hide-transition-duration cubic-bezier(0.4, 0, 0.22, 1);\n}\n\n.pswp--animated-in {\n  .pswp__bg,\n  .pswp__zoom-wrap {\n    -webkit-transition: none;\n    transition: none;\n  }\n}\n\n.pswp__container,\n.pswp__zoom-wrap {\n  -webkit-backface-visibility: hidden;\n}\n\n.pswp__item {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  overflow: hidden;\n}\n\n.pswp__img {\n  position: absolute;\n  width: auto;\n  height: auto;\n  top: 15px;\n  left: 0;\n}\n\n/*\n\tstretched thumbnail or div placeholder element (see below)\n\tstyle is added to avoid flickering in webkit/blink when layers overlap\n*/\n.pswp__img--placeholder {\n  -webkit-backface-visibility: hidden;\n}\n\n/*\n\tdiv element that matches size of large image\n\tlarge image loads on top of it\n*/\n.pswp__img--placeholder--blank {\n  background: $pswp__placeholder-color;\n}\n\n.pswp--ie .pswp__img {\n  width: 100% !important;\n  height: auto !important;\n  left: 0;\n  top: 0;\n}\n\n/*\n\tError message appears when image is not loaded\n\t(JS option errorMsg controls markup)\n*/\n.pswp__error-msg {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  width: 100%;\n  text-align: center;\n  font-size: 14px;\n  line-height: 16px;\n  margin-top: -8px;\n  color: $pswp__error-text-color;\n}\n\n.pswp__error-msg a {\n  color: $pswp__error-text-color;\n  text-decoration: underline;\n}\n","/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */\n/*\n\tStyles for basic PhotoSwipe functionality (sliding area, open/close transitions)\n*/\n/* pswp = photoswipe */\n.pswp {\n  display: none;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  -ms-touch-action: none;\n  touch-action: none;\n  z-index: 1500;\n  -webkit-text-size-adjust: 100%;\n  /* create separate layer, to avoid paint on window.onscroll in webkit/blink */\n  -webkit-backface-visibility: hidden;\n  outline: none; }\n  .pswp * {\n    box-sizing: border-box; }\n  .pswp img {\n    max-width: none; }\n\n/* style is added when JS option showHideOpacity is set to true */\n.pswp--animate_opacity {\n  /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */\n  opacity: 0.001;\n  will-change: opacity;\n  /* for open/close transition */\n  transition: opacity 300ms cubic-bezier(0.4, 0, 0.22, 1); }\n\n.pswp--open {\n  display: block; }\n\n.pswp--zoom-allowed .pswp__img {\n  /* autoprefixer: off */\n  cursor: -webkit-zoom-in;\n  cursor: -moz-zoom-in;\n  cursor: zoom-in; }\n\n.pswp--zoomed-in .pswp__img {\n  /* autoprefixer: off */\n  cursor: -webkit-grab;\n  cursor: -moz-grab;\n  cursor: grab; }\n\n.pswp--dragging .pswp__img {\n  /* autoprefixer: off */\n  cursor: -webkit-grabbing;\n  cursor: -moz-grabbing;\n  cursor: grabbing; }\n\n/*\n\tBackground is added as a separate element.\n\tAs animating opacity is much faster than animating rgba() background-color.\n*/\n.pswp__bg {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background: #2e2e2e;\n  opacity: 0;\n  transform: translateZ(0);\n  -webkit-backface-visibility: hidden;\n  will-change: opacity; }\n\n.pswp__scroll-wrap {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: hidden; }\n\n.pswp__container,\n.pswp__zoom-wrap {\n  -ms-touch-action: none;\n  touch-action: none;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0; }\n\n/* Prevent selection and tap highlights */\n.pswp__container,\n.pswp__img {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  -webkit-touch-callout: none; }\n\n.pswp__zoom-wrap {\n  position: absolute;\n  width: 100%;\n  -webkit-transform-origin: left top;\n  -moz-transform-origin: left top;\n  -ms-transform-origin: left top;\n  transform-origin: left top;\n  /* for open/close transition */\n  transition: transform 300ms cubic-bezier(0.4, 0, 0.22, 1); }\n\n.pswp__bg {\n  will-change: opacity;\n  /* for open/close transition */\n  transition: opacity 300ms cubic-bezier(0.4, 0, 0.22, 1); }\n\n.pswp--animated-in .pswp__bg,\n.pswp--animated-in .pswp__zoom-wrap {\n  -webkit-transition: none;\n  transition: none; }\n\n.pswp__container,\n.pswp__zoom-wrap {\n  -webkit-backface-visibility: hidden; }\n\n.pswp__item {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  overflow: hidden; }\n\n.pswp__img {\n  position: absolute;\n  width: auto;\n  height: auto;\n  top: 15px;\n  left: 0; }\n\n/*\n\tstretched thumbnail or div placeholder element (see below)\n\tstyle is added to avoid flickering in webkit/blink when layers overlap\n*/\n.pswp__img--placeholder {\n  -webkit-backface-visibility: hidden; }\n\n/*\n\tdiv element that matches size of large image\n\tlarge image loads on top of it\n*/\n.pswp__img--placeholder--blank {\n  background: #222; }\n\n.pswp--ie .pswp__img {\n  width: 100% !important;\n  height: auto !important;\n  left: 0;\n  top: 0; }\n\n/*\n\tError message appears when image is not loaded\n\t(JS option errorMsg controls markup)\n*/\n.pswp__error-msg {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  width: 100%;\n  text-align: center;\n  font-size: 14px;\n  line-height: 16px;\n  margin-top: -8px;\n  color: #ccc; }\n\n.pswp__error-msg a {\n  color: #ccc;\n  text-decoration: underline; }\n\n.image-gallery-container {\n  width: 100%; }\n  .image-gallery-container .image-gallery-selector {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    width: 100%; }\n    .image-gallery-container .image-gallery-selector figure {\n      margin-bottom: 30px;\n      width: calc((18/58) * 100%); }\n    @supports (display: grid) {\n      .image-gallery-container .image-gallery-selector {\n        display: grid;\n        grid-gap: 20px;\n        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }\n        .image-gallery-container .image-gallery-selector figure {\n          margin-bottom: 0;\n          width: 100%; } }\n  .image-gallery-container .bg-image {\n    background-position: center;\n    background-repeat: no-repeat;\n    background-size: cover;\n    border-radius: 8px;\n    min-height: 200px;\n    transition-duration: 0.3s;\n    width: 100%; }\n    .image-gallery-container .bg-image:hover {\n      box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3);\n      transition-duration: 0.3s; }\n  .image-gallery-container figure[data-rs-image-gallery-totals-overlay='true'] {\n    position: relative; }\n    .image-gallery-container figure[data-rs-image-gallery-totals-overlay='true'] .bg-image {\n      box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3);\n      transition-duration: 0.3s; }\n    .image-gallery-container figure[data-rs-image-gallery-totals-overlay='true']:hover .bg-image {\n      box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.7);\n      transition-duration: 0.3s; }\n    .image-gallery-container figure[data-rs-image-gallery-totals-overlay='true'] .photo-totals-overlay {\n      font-family: Montserrat-ExtraBold, arial, sans-serif;\n      font-size: 20px;\n      text-transform: none;\n      line-height: 30px;\n      color: #fff;\n      cursor: pointer;\n      position: absolute;\n      text-align: center;\n      top: 45%;\n      width: 100%; }\n    @media (min-width: 501px) and (max-width: 622px) {\n      .image-gallery-container figure[data-rs-image-gallery-totals-overlay='true'] .photo-totals-overlay {\n        top: 35%; } }\n\n@media (min-width: 501px) and (max-width: 940px) {\n  @supports (display: grid) {\n    .image-gallery-container .image-gallery-selector {\n      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } } }\n\n@media (min-width: 941px) {\n  .image-gallery-container .bg-image {\n    min-height: 250px; } }\n\n/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */\n/* <button> css reset */\n.pswp__button {\n  -webkit-appearance: none;\n  background: none;\n  border: 0;\n  box-shadow: none;\n  cursor: pointer;\n  display: block;\n  float: right;\n  height: 20px;\n  margin: 0;\n  overflow: visible;\n  padding: 0;\n  position: relative;\n  transition: opacity 0.2s;\n  width: 20px;\n  z-index: 1; }\n  .pswp__button:active {\n    outline: none; }\n  .pswp__button::-moz-focus-inner {\n    border: 0;\n    padding: 0; }\n\n.pswp__button--close {\n  height: 25px;\n  margin: 20px 20px 0 0;\n  position: relative;\n  width: 25px;\n  z-index: 1; }\n  .pswp__button--close .icon {\n    color: var(--color-white);\n    height: 25px;\n    top: 0;\n    width: 25px;\n    z-index: -1; }\n  .pswp__button--close:hover {\n    opacity: 0.5; }\n\n.pswp--svg .pswp__button--arrow--left .icon,\n.pswp--svg .pswp__button--arrow--right .icon {\n  color: var(--color-white);\n  position: relative;\n  z-index: -1; }\n  .pswp--svg .pswp__button--arrow--left .icon svg,\n  .pswp--svg .pswp__button--arrow--right .icon svg {\n    fill: currentColor;\n    width: 25px; }\n\n.pswp--svg .pswp__button--arrow--left:hover,\n.pswp--svg .pswp__button--arrow--right:hover {\n  opacity: 0.5; }\n\n.pswp--touch .pswp__button--arrow--left,\n.pswp--touch .pswp__button--arrow--right {\n  bottom: -18px;\n  top: auto; }\n\n/*\n  Arrow buttons hit area\n  (icon is added to :before pseudo-element)\n*/\n.pswp__button--arrow--left,\n.pswp__button--arrow--right {\n  background: none;\n  height: 100px;\n  margin-top: -50px;\n  position: absolute;\n  top: 50%;\n  width: 70px; }\n\n.pswp__button--arrow--left {\n  left: 0; }\n\n.pswp__button--arrow--right {\n  right: 0; }\n\n.pswp__counter {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none; }\n\n.pswp__counter {\n  font-family: Montserrat, arial, sans-serif;\n  font-size: 16px;\n  text-transform: none;\n  line-height: 25px;\n  color: var(--color-white);\n  position: absolute;\n  left: 20px;\n  top: 20px; }\n\n.pswp__caption {\n  bottom: 0;\n  left: 0;\n  min-height: 44px;\n  position: absolute;\n  width: 100%; }\n  .pswp__caption small {\n    color: #bbb;\n    font-size: 11px; }\n\n.pswp__caption__center {\n  color: #ccc;\n  font-size: 13px;\n  margin: 0 auto;\n  max-width: 420px;\n  line-height: 20px;\n  padding: 10px;\n  text-align: left; }\n\n.pswp__caption--empty {\n  display: none; }\n\n/* Fake caption element, used to calculate height of next/prev image */\n.pswp__caption--fake {\n  visibility: hidden; }\n\n/*\n Loading indicator (preloader)\n */\n.pswp__preloader {\n  direction: ltr;\n  height: 44px;\n  left: 50%;\n  margin-left: -22px;\n  position: absolute;\n  opacity: 0;\n  transition: opacity 0.25s ease-out;\n  top: 0;\n  width: 44px;\n  will-change: opacity; }\n\n.pswp__preloader__icn {\n  height: 20px;\n  margin: 12px;\n  width: 20px; }\n\n.pswp__preloader--active {\n  opacity: 1; }\n\n.pswp--css_animation .pswp__preloader--active {\n  opacity: 1; }\n  .pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {\n    animation: clockwise 500ms linear infinite; }\n  .pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {\n    animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }\n\n.pswp--css_animation .pswp__preloader__icn {\n  background: none;\n  height: 14px;\n  left: 15px;\n  margin: 0;\n  opacity: 1;\n  position: absolute;\n  top: 15px;\n  width: 14px; }\n\n.pswp--css_animation .pswp__preloader__cut {\n  /*\n      The idea of animating inner circle is based on Polymer (\"material\") loading indicator\n       by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html\n    */\n  height: 14px;\n  position: relative;\n  overflow: hidden;\n  width: 7px; }\n\n.pswp--css_animation .pswp__preloader__donut {\n  background: none;\n  border: 2px solid #fff;\n  border-bottom-color: transparent;\n  border-radius: 50%;\n  border-left-color: transparent;\n  box-sizing: border-box;\n  height: 14px;\n  left: 0;\n  margin: 0;\n  position: absolute;\n  top: 0;\n  width: 14px; }\n\n@media screen and (max-width: 1024px) {\n  .pswp__preloader {\n    float: right;\n    left: auto;\n    margin: 0;\n    position: relative;\n    top: auto; } }\n\n@keyframes clockwise {\n  0% {\n    transform: rotate(0deg); }\n  100% {\n    transform: rotate(360deg); } }\n\n@keyframes donut-rotate {\n  0% {\n    transform: rotate(0); }\n  50% {\n    transform: rotate(-140deg); }\n  100% {\n    transform: rotate(0); } }\n\n/*\n  Additional styles\n */\n/* root element of UI */\n.pswp__ui {\n  opacity: 1;\n  visibility: visible;\n  z-index: 1550; }\n\n/* top black bar with buttons and \"1 of X\" indicator */\n.pswp__top-bar {\n  height: 50px;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%; }\n\n.pswp__caption,\n.pswp__top-bar,\n.pswp--has_mouse .pswp__button--arrow--left,\n.pswp--has_mouse .pswp__button--arrow--right {\n  -webkit-backface-visibility: hidden;\n  transition: opacity 300ms cubic-bezier(0.4, 0, 0.22, 1);\n  will-change: opacity; }\n\n/* pswp--has_mouse class is added only when two subsequent mousemove events occur */\n.pswp--has_mouse .pswp__button--arrow--left,\n.pswp--has_mouse .pswp__button--arrow--right {\n  visibility: visible; }\n\n.pswp__ui--idle .pswp__top-bar {\n  opacity: 1; }\n\n.pswp__ui--idle .pswp__button--arrow--left,\n.pswp__ui--idle .pswp__button--arrow--right {\n  opacity: 1; }\n\n/* pswp__ui--one-slide class is added when there is just one item in gallery */\n.pswp__ui--one-slide .pswp__button--arrow--left,\n.pswp__ui--one-slide .pswp__button--arrow--right,\n.pswp__ui--one-slide .pswp__counter {\n  display: none; }\n\n.pswp__element--disabled {\n  display: none !important; }\n\n.pswp--minimal--dark .pswp__top-bar {\n  background: none; }\n","$pswp__show-hide-transition-duration: 300ms !default;\n$pswp__controls-transition-duration: 300ms !default;\n$pswp__background-color: $color-brand--two !default;\n$pswp__placeholder-color: #222 !default;\n$pswp__box-sizing-border-box: true !default; // disable .pswp * { box-sizing:border-box } (in case you already have it in your site css)\n$pswp__root-z-index: 1500 !default;\n$pswp__assets-path: '..' !default; // path to skin assets folder (preloader, PNG and SVG sprite)\n$pswp__error-text-color: #ccc !default; // \"Image not loaded\" text color\n$pswp__include-minimal-style: true !default;\n","$color-brand--black: #000000;\n$color-brand--white: #fff;\n\n$color-brand--one: #ff661a;\n$color-brand--two: #2e2e2e;\n$color-brand--three: #1f82db;\n$color-brand--four: #c4c4c4;\n$color-brand--five: #f8f8f8;\n$color-brand--six: #97999b;\n\n$color-brand--gradient-orange: linear-gradient(\n  56.45deg,\n  #ff8200 0%,\n  #ed1f24 100%\n);\n$color-brand--gradient-orange-50: linear-gradient(\n  56.45deg,\n  #ff9b33 0%,\n  #ed4e52 100%\n);\n$color-brand--gradient-blue: linear-gradient(45deg, #1f82db 0%, #1166b3 100%);\n$color-brand--gradient-purple: linear-gradient(\n  45deg,\n  #595a9f 0%,\n  #6152a3 50%,\n  #292765 100%\n);\n// user interface colors\n//\n// additional colors, such as surface, background and error colors, typically don't\n// represent the brand but can be applied sparingly to accent select parts of your UI.\n//\n\n$color--black-80: #303030;\n\n$color--grey: #e2e2e2;\n$color--grey-10: #f8f8f8;\n\n$color--white: #fff;\n\n$color--one-10: #fff0e8;\n$color--one-80: #ff8548;\n$color--one-130: #e64c00;\n\n$color--two-50: #97999b;\n$color--two-80: #4d4d4d;\n$color--two-180: #000000;\n\n$color--three-5: #edf6ff;\n\n$color--four-80: #f9f7f3;\n$color--four-110: #dedcd8;\n\n$color--negative: #f13c23;\n$color--negative-5: #fef5f4;\n\n$color--positive: #11d15e;\n$color--positive-5: #f3fdf7;\n\n$color--warning: #e9a204;\n$color--warning-10: #fcf5e5;\n\n// user interface opacities\n//\n// opacity colors are only used on modal backgrounds. HEX colors would not be\n// used due to the colors' alpha layers.\n//\n\n$color-alpha--one-10: rgba(255, 102, 26, 0.1);\n$color-alpha--one-30: rgba(255, 102, 26, 0.3);\n\n$color-alpha--two-10: rgba(0, 0, 0, 0.1);\n$color-alpha--two-30: rgba(0, 0, 0, 0.3);\n$color-alpha--two-70: rgba(0, 0, 0, 0.7);\n$color-alpha--two-80: rgba(0, 0, 0, 0.8);\n\n$color-alpha--four-30: rgba(255, 255, 255, 0.2);\n$color-alpha--four-50: rgba(255, 255, 255, 0.5);\n\n// set color values\n$color--disabled: $color--two-50;\n$color--text: $color-brand--two;\n$color--one-light: $color--one-10;\n\n// degree brand colors\n// used in the charts as extra color scheme\n$color-brand--one-65: #ffc8ad;\n$color-brand--one-45: #ffe7da;\n$color-brand--one-25: #f7beb9;\n$color-brand--two-65: #afaf;\n$color-brand--two-45: #dbdbdb;\n$color-brand--two-25: #fce8b5;\n$color-brand--three-65: #afd2f2;\n$color-brand--three-45: #dbebf9;\n$color-brand--five-25: #a6c8f0;\n$color-brand--six-65: #dadadb;\n$color-brand--six-45: #eeefef;\n$color-brand--six-25: #c4dbe1;\n\n// degree user interface colors\n// used in the charts as extra color scheme\n$color--positive-65: #aaefc5;\n$color--positive-45: #d9f8e5;\n\n// notice colors\n$color-notice--warning: #fff2f2;\n",".image-gallery-container {\n  width: 100%;\n\n  .image-gallery-selector {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    width: 100%;\n\n    figure {\n      margin-bottom: $spacing--m; // margin bottom used because of IE11 (instead of grid-gap)\n      width: grid-columns(4, 12);\n    }\n\n    // if supported use grid\n    @supports (display: grid) {\n      display: grid;\n      grid-gap: 20px;\n      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n      figure {\n        margin-bottom: 0;\n        width: 100%;\n      }\n    }\n  }\n\n  .bg-image {\n    background-position: center;\n    background-repeat: no-repeat;\n    background-size: cover;\n    border-radius: $border-radius--l;\n    min-height: 200px;\n    transition-duration: $transition-duration;\n    width: 100%;\n\n    &:hover {\n      box-shadow: inset 0 0 0 2000px $color-alpha--two-30;\n      transition-duration: $transition-duration;\n    }\n  }\n\n  figure[data-rs-image-gallery-totals-overlay='true'] {\n    position: relative;\n\n    .bg-image {\n      box-shadow: inset 0 0 0 2000px $color-alpha--two-30;\n      transition-duration: $transition-duration;\n    }\n\n    &:hover {\n      .bg-image {\n        box-shadow: inset 0 0 0 2000px $color-alpha--two-70;\n        transition-duration: $transition-duration;\n      }\n    }\n\n    .photo-totals-overlay {\n      @include font-style('title--xs');\n      color: $color--white;\n      cursor: pointer;\n      position: absolute;\n      text-align: center;\n      top: 45%;\n      width: 100%;\n    }\n\n    // needed to align overlay text to the middle in this specific viewport\n    @media (min-width: 501px) and (max-width: 622px) {\n      .photo-totals-overlay {\n        top: 35%;\n      }\n    }\n  }\n}\n\n// viewport m\n@include viewport--range($breakpoint-viewport--m, $breakpoint-viewport--l) {\n  .image-gallery-container .image-gallery-selector {\n    // if supported use grid\n    @supports (display: grid) {\n      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n    }\n  }\n}\n\n// viewport l\n@include viewport--l {\n  .image-gallery-container {\n    .bg-image {\n      min-height: 250px;\n    }\n  }\n}\n","// | variable      | size  | calculation     |\n// |---------------|-------|-----------------|\n// | $spacing--xxs |  5px  | $baseline * 0.5 |\n// | $spacing--xs  | 10px  | $baseline * 1   |\n// | $spacing--s   | 20px  | $baseline * 2   |\n// | $spacing--m   | 30px  | $baseline * 3   |\n// | $spacing--l   | 50px  | $baseline * 5   |\n// | $spacing--xl  | 80px  | $baseline * 8   |\n// | $spacing--xxl | 130px | $baseline * 13  |\n\n$spacing--xxs: $baseline * 0.5;\n$spacing--xs: $baseline * 1;\n$spacing--s: $baseline * 2;\n$spacing--m: $baseline * 3;\n$spacing--l: $baseline * 5;\n$spacing--xl: $baseline * 8;\n$spacing--xxl: $baseline * 13;\n\n// grid spacings\n$grid-margin--s: 25px;\n$grid-margin--m: 50px;\n$grid-margin--l: 100px;\n","// @grid-columns($columns, $columns-total, $grid-gutter)\n\n// grid for viewport S & M:\n// 6 columns / 28 units\n//\n//  |   |   |   |   |   |   |   |   |   |   |   |\n//  | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 |\n//  |   |   |   |   |   |   |   |   |   |   |   |\n//\n//\n// grid for vieport L:\n// 12 columns / 58 units\n//\n//  |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |\n//  | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 |\n//  |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |\n\n@function grid-columns($columns, $columns-total, $grid-gutter: null) {\n  $column-gutter-diff: ($grid-column-units - $grid-gutter-units);\n\n  $column-units: ($columns * $grid-column-units) + (($columns - $column-gutter-diff) * $grid-gutter-units);\n  $columns-total: ($columns-total * $grid-column-units) + (($columns-total - $column-gutter-diff) * $grid-gutter-units);\n\n  // if grid gutter is provided use it in calculation\n  @if ($grid-gutter) {\n    @return calc(((#{$column-units} + (#{$grid-gutter} * #{$grid-gutter-units})) /#{$columns-total}) * 100%);\n  }\n  // if grid-gutter is not provided return default calculation\n  @else {\n    @return calc((#{$column-units}/#{$columns-total}) * 100%);\n  }\n}\n","// baseline size, used for every calculation\n$baseline: 10px;\n\n// border radius\n$border-radius: 4px;\n$border-radius--s: 3px;\n$border-radius--xs: 2px;\n$border-radius--m: 5px;\n$border-radius--m-l: 6px;\n$border-radius--l: 8px;\n$border-radius--max: 30px;\n","$transition-duration--faster: 0.1s;\n$transition-duration--fast: 0.2s;\n$transition-duration: 0.3s;\n$transition-duration--slow: 0.5s;\n$transition-duration--slower: 0.7s;\n$transition-duration--slowest: 0.9s;\n","// @font-style($font-style-small, $font-style-large)\n\n// $font-style-small - Desired type size for small/medium viewport.\n// $font-style-large - Desired type size for large viewport. This includes default fallback\n//                     for the S/M viewport.\n\n//\n// | viewport S       | viewport M       | viewport L      | default mapping |\n// |------------------|------------------|-----------------|-----------------|\n// | title l    | 40  | title l    | 40  | title xxl  | 80 | default         |\n// | title m    | 32  | title m    | 32  | title xl   | 60 | default         |\n// | title s    | 26  | title s    | 26  | title l    | 40 |                 |\n// | title s    | 26  | title s    | 26  | title m    | 32 | default         |\n// | title xs   | 20  | title xs   | 20  | title s    | 26 |                 |\n// | title xs   | 20  | title xs   | 20  | title xs   | 20 | default         |\n// | title xxs  | 18  | title xxs  | 18  | title xxs  | 18 |                 |\n// |            |     |            |     |            |    |                 |\n// | body l     | 18  | body l     | 18  | body l     | 18 |                 |\n// | body m     | 16  | body m     | 16  | body m     | 16 |                 |\n// | body s     | 12  | body s     | 12  | body s     | 12 |                 |\n\n// import variables needed for the mixins\n@import '../variables/__variables.scss';\n\n// mixin to get applicable properties for chosen type size\n@mixin typeset($type) {\n  $type: map-get($types, $type);\n\n  font-family: (map-get($type, font-family));\n  font-size: (map-get($type, font-size));\n  text-transform: (map-get($type, text-transform));\n  line-height: (map-get($type, line-height));\n}\n\n// get correct font characteristics based on font\n@mixin type-size($size) {\n  $size: map-get($type-sizes, $size);\n  @include typeset($size);\n}\n\n// mixin to get font-size\n@mixin font-style($font-style-small: 'body--l', $font-style-large: null) {\n  // if both arguments are added\n  @if ($font-style-large != null) {\n    // make sure $font-style-small & $font-style-large are not equal\n    @if ($font-style-small != $font-style-large) {\n      @include type-size($font-style-small);\n\n      @include viewport--l {\n        @include type-size($font-style-large);\n      }\n    } @else {\n      @include type-size($font-style-small);\n    }\n  } @else {\n    @include type-size($font-style-small);\n    // default font style mappings\n    @if ($font-style-small == 'title--l') {\n      @include viewport--l {\n        @include type-size('title--xxl');\n      }\n    } @else if ($font-style-small == 'title--m') {\n      @include viewport--l {\n        @include type-size('title--xl');\n      }\n    } @else if ($font-style-small == 'title--s') {\n      @include viewport--l {\n        @include type-size('title--m');\n      }\n    }\n  }\n}\n","// | viewport S       | viewport M       | viewport L      | default mapping |\n// |------------------|------------------|-----------------|-----------------|\n// | title l    | 40  | title l    | 40  | title xxl  | 80 | default         |\n// | title m    | 32  | title m    | 32  | title xl   | 60 | default         |\n// | title s    | 26  | title s    | 26  | title l    | 40 |                 |\n// | title s    | 26  | title s    | 26  | title m    | 32 | default         |\n// | title xs   | 20  | title xs   | 20  | title s    | 26 |                 |\n// | title xs   | 20  | title xs   | 20  | title xs   | 20 | default         |\n// | title xxs  | 18  | title xxs  | 18  | title xxs  | 18 |                 |\n// |            |     |            |     |            |    |                 |\n// | body l     | 18  | body l     | 18  | body l     | 18 |                 |\n// | body m     | 16  | body m     | 16  | body m     | 16 |                 |\n// | body s     | 12  | body s     | 12  | body s     | 12 |                 |\n\n// font family\n$font-family-theme: Montserrat, arial, sans-serif;\n$font-family-theme-semibold: Montserrat-SemiBold, arial, sans-serif;\n$font-family-theme-extrabold: Montserrat-ExtraBold, arial, sans-serif;\n// assets path to font\n// this path is overwritten in component CSS\n\n// font mappings - font-size / line-height / letter-spacing\n$types: (\n  12: (\n    font-size: 12px,\n    line-height: 15px,\n    text-transform: none,\n    font-family: $font-family-theme\n  ),\n  14: (\n    font-size: 14px,\n    line-height: 25px,\n    text-transform: none,\n    font-family: $font-family-theme\n  ),\n  16: (\n    font-size: 16px,\n    line-height: 25px,\n    text-transform: none,\n    font-family: $font-family-theme\n  ),\n  18: (\n    font-size: 18px,\n    line-height: 30px,\n    text-transform: none,\n    font-family: $font-family-theme\n  ),\n  20: (\n    font-size: 20px,\n    line-height: 30px,\n    text-transform: none,\n    font-family: $font-family-theme-extrabold\n  ),\n  20s: (\n    font-size: 20px,\n    line-height: 30px,\n    text-transform: none,\n    font-family: $font-family-theme-semibold\n  ),\n  26: (\n    font-size: 26px,\n    line-height: 30px,\n    text-transform: uppercase,\n    font-family: $font-family-theme-extrabold\n  ),\n  26s: (\n    font-size: 26px,\n    line-height: 30px,\n    text-transform: none,\n    font-family: $font-family-theme-semibold\n  ),\n  32: (\n    font-size: 32px,\n    line-height: 40px,\n    text-transform: uppercase,\n    font-family: $font-family-theme-extrabold\n  ),\n  32s: (\n    font-size: 32px,\n    line-height: 40px,\n    text-transform: none,\n    font-family: $font-family-theme-semibold\n  ),\n  40: (\n    font-size: 40px,\n    line-height: 45px,\n    text-transform: uppercase,\n    font-family: $font-family-theme-extrabold\n  ),\n  40s: (\n    font-size: 40px,\n    line-height: 45px,\n    text-transform: none,\n    font-family: $font-family-theme-semibold\n  ),\n  60: (\n    font-size: 60px,\n    line-height: 60px,\n    text-transform: uppercase,\n    font-family: $font-family-theme-extrabold\n  ),\n  80: (\n    font-size: 80px,\n    line-height: 80px,\n    text-transform: uppercase,\n    font-family: $font-family-theme-extrabold\n  )\n);\n\n// type-sizes - links the type-size to correct font mapping\n$type-sizes: (\n  title--xxl: 80,\n  title--xl: 60,\n  title--l: 40,\n  title--l-slim: 40s,\n  title--m: 32,\n  title--m-slim: 32s,\n  title--s: 26,\n  title--s-slim: 26s,\n  title--xs: 20,\n  title--xs-slim: 20s,\n  title--xxs: 18,\n  body--l: 18,\n  body--m: 16,\n  body--s: 14,\n  body--xs: 12\n);\n","// @viewport--x($reversed)\n\n// viewport s\n@mixin viewport--s($type: null) {\n  // inversed\n  @if ($type == 'inversed') {\n    @media (max-width: #{($breakpoint-viewport--s - 1)}) {\n      @content;\n    }\n  }\n  // range\n  @else if ($type== 'range') {\n    @media (min-width:0) and (max-width: #{($breakpoint-viewport--s - 1)}) {\n      @content;\n    }\n  }\n  // default\n  @else {\n    @media (min-width: #{$breakpoint-viewport--s}) {\n      @content;\n    }\n  }\n}\n\n// viewport m\n@mixin viewport--m($type: null) {\n  // inversed\n  @if ($type == 'inversed') {\n    @media (max-width: #{($breakpoint-viewport--m - 1)}) {\n      @content;\n    }\n  }\n  // range\n  @else if ($type== 'range') {\n    @media (min-width: $breakpoint-viewport--m) and (max-width: #{($breakpoint-viewport--l - 1)}) {\n      @content;\n    }\n  }\n  // default\n  @else {\n    @media (min-width: #{$breakpoint-viewport--m}) {\n      @content;\n    }\n  }\n}\n\n// viewport l\n@mixin viewport--l($type: null) {\n  // inversed\n  @if ($type == 'inversed') {\n    @media (max-width: #{($breakpoint-viewport--l - 1)}) {\n      @content;\n    }\n  }\n  // range\n  @else if ($type== 'range') {\n    @media (min-width: $breakpoint-viewport--l) and (max-width: #{($breakpoint-viewport--xl - 1)}) {\n      @content;\n    }\n  }\n  // default\n  @else {\n    @media (min-width: #{$breakpoint-viewport--l}) {\n      @content;\n    }\n  }\n}\n\n// viewport xl\n@mixin viewport--xl($type: null) {\n  @if ($type == 'inversed') {\n    @media (max-width: #{($breakpoint-viewport--xl - 1)}) {\n      @content;\n    }\n  }\n  // range\n  @else if ($type== 'range') {\n    @media (min-width: $breakpoint-viewport--xl) and (max-width: #{($breakpoint-viewport--xxl - 1)}) {\n      @content;\n    }\n  }\n  // default\n  @else {\n    @media (min-width: #{$breakpoint-viewport--xl}) {\n      @content;\n    }\n  }\n}\n\n// viewport xxl\n@mixin viewport--xxl($type: null) {\n  // inversed\n  @if ($type == 'inversed') {\n    @media (max-width: #{($breakpoint-viewport--xxl - 1)}) {\n      @content;\n    }\n  }\n  // default\n  @else {\n    @media (min-width: #{$breakpoint-viewport--xxl}) {\n      @content;\n    }\n  }\n}\n\n// viewport range\n@mixin viewport--range($viewport1, $viewport2) {\n  @media (min-width: #{($viewport1)}) and (max-width: #{($viewport2 - 1)}) {\n    @content;\n  }\n}\n\n// Internet Explorer 10 + 11\n@mixin internet-explorer-10-11 {\n  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n    @content;\n  }\n}\n","/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */\n\n// PhotoSwipe uses Autoprefixer, so vendor prefixed are added automatically when needed.\n\n/* <button> css reset */\n.pswp__button {\n  -webkit-appearance: none;\n  background: none;\n  border: 0;\n  box-shadow: none;\n  cursor: pointer;\n  display: block;\n  float: right;\n  height: 20px;\n  margin: 0;\n  overflow: visible;\n  padding: 0;\n  position: relative;\n  transition: opacity $transition-duration--fast;\n  width: 20px;\n  z-index: 1;\n\n  &:active {\n    outline: none;\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n    padding: 0;\n  }\n}\n\n.pswp__button--close {\n  height: 25px;\n  margin: $spacing--s 20px 0 0;\n  position: relative;\n  width: 25px;\n  z-index: 1;\n\n  .icon {\n    color: returnColorCSSVar('white');\n    height: 25px;\n    top: 0;\n    width: 25px;\n    z-index: -1;\n  }\n\n  &:hover {\n    opacity: 0.5;\n  }\n}\n\n.pswp--svg .pswp__button--arrow--left,\n.pswp--svg .pswp__button--arrow--right {\n  .icon {\n    color: returnColorCSSVar('white');\n    position: relative;\n    z-index: -1;\n\n    svg {\n      fill: currentColor;\n      width: 25px;\n    }\n  }\n\n  &:hover {\n    opacity: 0.5;\n  }\n}\n\n.pswp--touch {\n  .pswp__button--arrow--left,\n  .pswp__button--arrow--right {\n    bottom: -18px;\n    top: auto;\n  }\n}\n\n/*\n  Arrow buttons hit area\n  (icon is added to :before pseudo-element)\n*/\n.pswp__button--arrow--left,\n.pswp__button--arrow--right {\n  background: none;\n  height: 100px;\n  margin-top: -50px;\n  position: absolute;\n  top: 50%;\n  width: 70px;\n}\n\n.pswp__button--arrow--left {\n  left: 0;\n}\n\n.pswp__button--arrow--right {\n  right: 0;\n}\n\n.pswp__counter {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n}\n\n.pswp__counter {\n  @include font-style('body--m');\n  color: returnColorCSSVar('white');\n  position: absolute;\n  left: 20px;\n  top: $spacing--s;\n}\n\n.pswp__caption {\n  bottom: 0;\n  left: 0;\n  min-height: 44px;\n  position: absolute;\n  width: 100%;\n\n  small {\n    color: #bbb;\n    font-size: 11px;\n  }\n}\n\n.pswp__caption__center {\n  color: #ccc;\n  font-size: 13px;\n  margin: 0 auto;\n  max-width: 420px;\n  line-height: 20px;\n  padding: $spacing--xs;\n  text-align: left;\n}\n\n.pswp__caption--empty {\n  display: none;\n}\n\n/* Fake caption element, used to calculate height of next/prev image */\n.pswp__caption--fake {\n  visibility: hidden;\n}\n\n/*\n Loading indicator (preloader)\n */\n\n.pswp__preloader {\n  direction: ltr;\n  height: 44px;\n  left: 50%;\n  margin-left: -22px;\n  position: absolute;\n  opacity: 0;\n  transition: opacity 0.25s ease-out;\n  top: 0;\n  width: 44px;\n  will-change: opacity;\n}\n\n.pswp__preloader__icn {\n  height: 20px;\n  margin: 12px;\n  width: 20px;\n}\n\n.pswp__preloader--active {\n  opacity: 1;\n}\n\n.pswp--css_animation {\n  .pswp__preloader--active {\n    opacity: 1;\n\n    .pswp__preloader__icn {\n      animation: clockwise 500ms linear infinite;\n    }\n\n    .pswp__preloader__donut {\n      animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;\n    }\n  }\n\n  .pswp__preloader__icn {\n    background: none;\n    height: 14px;\n    left: 15px;\n    margin: 0;\n    opacity: 1;\n    position: absolute;\n    top: 15px;\n    width: 14px;\n  }\n\n  .pswp__preloader__cut {\n    /*\n      The idea of animating inner circle is based on Polymer (\"material\") loading indicator\n       by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html\n    */\n    height: 14px;\n    position: relative;\n    overflow: hidden;\n    width: 7px;\n  }\n\n  .pswp__preloader__donut {\n    background: none;\n    border: 2px solid #fff;\n    border-bottom-color: transparent;\n    border-radius: 50%;\n    border-left-color: transparent;\n    box-sizing: border-box;\n    height: 14px;\n    left: 0;\n    margin: 0;\n    position: absolute;\n    top: 0;\n    width: 14px;\n  }\n}\n\n@media screen and (max-width: 1024px) {\n  .pswp__preloader {\n    float: right;\n    left: auto;\n    margin: 0;\n    position: relative;\n    top: auto;\n  }\n}\n\n@keyframes clockwise {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes donut-rotate {\n  0% {\n    transform: rotate(0);\n  }\n  50% {\n    transform: rotate(-140deg);\n  }\n  100% {\n    transform: rotate(0);\n  }\n}\n\n/*\n  Additional styles\n */\n\n/* root element of UI */\n.pswp__ui {\n  opacity: 1;\n  visibility: visible;\n  z-index: $pswp__root-z-index + 50;\n}\n\n/* top black bar with buttons and \"1 of X\" indicator */\n.pswp__top-bar {\n  height: 50px;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n\n.pswp__caption,\n.pswp__top-bar,\n.pswp--has_mouse .pswp__button--arrow--left,\n.pswp--has_mouse .pswp__button--arrow--right {\n  -webkit-backface-visibility: hidden;\n  transition: opacity $pswp__controls-transition-duration\n    cubic-bezier(0.4, 0, 0.22, 1);\n  will-change: opacity;\n}\n\n/* pswp--has_mouse class is added only when two subsequent mousemove events occur */\n.pswp--has_mouse {\n  .pswp__button--arrow--left,\n  .pswp__button--arrow--right {\n    visibility: visible;\n  }\n}\n\n.pswp__ui--idle {\n  .pswp__top-bar {\n    opacity: 1;\n  }\n\n  .pswp__button--arrow--left,\n  .pswp__button--arrow--right {\n    opacity: 1;\n  }\n}\n\n/* pswp__ui--one-slide class is added when there is just one item in gallery */\n.pswp__ui--one-slide {\n  .pswp__button--arrow--left,\n  .pswp__button--arrow--right,\n  .pswp__counter {\n    display: none;\n  }\n}\n\n.pswp__element--disabled {\n  display: none !important;\n}\n\n@if $pswp__include-minimal-style == true {\n  .pswp--minimal--dark {\n    .pswp__top-bar {\n      background: none;\n    }\n  }\n}\n","// Returns CSS4 color variables\n@function returnColorCSSVar($color-name) {\n  @return var(--color-#{$color-name});\n}\n"]}