/*

  Lightbox Stylesheet Version 1.07

  ---  ---  ---  ---  ---  ---  ---  ---  ---  ---  ---  ---  ---  ---  ---  ---  

  Based on https://www.w3schools.com/howto/howto_js_lightbox.asp
  Modified by Jonas Roller

  Styles
  Base   style for Lightbox core with light colour scheme for few images, say up to 10
  Float  style for traditional layout with most compatibility
  Grid   style for modern and flexible layout, not compatible to IE11
  Dark   style for dark colour scheme
  10plus style for galleries with many images

  Mobile first
  All definitions are targeting phones first and, where needed, with additional
  definitions for larger screens

-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */


/* SECTION: INITIALISATION AND BASIC SETUP */
* {
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;              /* define 'real' outer size (border and padding now accounted as inside of the element) */
                                       /* https://www.w3schools.com/css/css3_box-sizing.asp */
}

@font-face {
  font-family: WorkSansExtraLight;
  src: url('../fonts/WorkSans-ExtraLight.woff2') format('woff2'), /* 75kB */
       url('../fonts/WorkSans-ExtraLight.woff') format('woff'); /* 105kB */
  font-display: fallback;              /* wait for several 100ms if font is loaded, then use fallback font until font is loaded */
}

html {
  background-color: #eaeaea;           /* light scheme */
}

body {
  background-color: #eaeaea;           /* light scheme */
  font-family: WorkSansExtraLight, 'Helvetica Neue', Helvetica, Verdana, sans-serif;
  width: 100%;                         /* Solves left-border-snapping when Modal is opened (Modal Background Fix, uses body element). */
                                       /* % preferred over vw to avoid horizontal scroll bar under Windows */
  height: 100%;                        /* Solves issue with MacOS Safari, when opening fullscreen from small browser window, now body */
                                       /* is shown in full screen. % preferred over vh to avoid vertical scroll bar under Windows */
}

/* Mobile first */
h2,
h3 {
  color: #aaa;                         /* light scheme */
  font-weight: 100; 
  font-size: calc(1.65em + 6 * ((100vw - 300px) / (1600 - 300))); /* Values manually tuned based on */
                                       /* fluid typography which is wonderfully described here: */
                                       /* https://css-tricks.com/books/fundamental-css-tactics/scale-typography-screen-size/ */
  margin-top: calc(13px + 1.8vw);      /* partially dependent on device size, same as for font size */
  text-align: center;
}

h3 {
  color: #000;                         /* light scheme */
  font-weight: 200; 
  font-size: calc(1.1em + 3.5 * ((100vw - 300px) / (1600 - 300)));
  margin-top: calc(-5px + 2 * ((100vh - 5px) / (1200 - 20)));
}


/* SECTION: MODAL (CONTAINER FOR BIG GALLERY IMAGES) */

#myModal {                             /* The Modal container: layer, background, size */
  animation: modal-anim 0.2s;          /* Zoom-in animation for Modal, based on 'w3schools how to css modal' */
  background: rgba(234, 234, 234, .9); /* light scheme, change opacity here to get Modal transparency */
  display: none;                       /* Hidden by default */
  height: 100%;
  left: 0;
  overflow: auto;                      /* Enable scroll if needed */
  position: fixed;                     /* Stay in place */
  top: 0;
  width: 100%;
  z-index: 1;                          /* Sit on top */
}

@keyframes modal-anim {                /* describes which modal elements shall be animated and how */

  from {
    transform: scale(0);               /* starting point 0% */
    opacity: 0;                        /* starting point fully transparent */
  } 

  to {
    transform: scale(1);               /* end point 100% */
    opacity: 1;                        /* end point fully visible */
  }

}

.mySlides {                            /* The Modal content: large gallery image and navigation buttons */

  /* Limit max size for big gallery images on larger screens. Use the img's parent container. */
  /* https://stackoverflow.com/questions/13632985/limit-the-height-of-a-responsive-image-with-css */
  max-height: 1500px;                  /* Supported by all browsers (Mac + Windows + iOS) */
  max-width: 2000px;                   /* Only IE11 is ignoring the max-settings for width/height */
  height: 100%;                        /* and is straight going for the 100% width/height definitions */
  width: 100%;
  
  /* Same as for the actual gallery image, also the img's parent position is centred vertically + horizontally (duplicate to img) */
  position: fixed;                     /* Positioned in relation to viewport or browser window, 'fixed' to freeze position */
  left: 50%;                           /* Move top left corner of image half screen size left */
  top: 50%;                            /* Move top left corner of image half screen size down */
  transform: translate(-50%, -50%);    /* move half of the width/height if actual image up/left */
}

/* Images in the modal */
#myModal img,                          /* Position gallery image */
.preloadWrapper {                      /* Position preloader */

  /* use full available space, keeps image ratio and real image size (no upscaling)  */
  /* https://stackoverflow.com/questions/15685666/changing-image-sizes-proportionally-using-css */
  display: block;
  max-height: 100%;
  max-width: 100%;
  
  /* Center image vertically + horizontally */
  /* https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ */
  position: relative;                  /* Positioned relative to viewport or browser window */
  left: 50%;                           /* Move top left corner of image half screen size left */
  top: 50%;                            /* Move top left corner of image half screen size down */
  transform: translate(-50%, -50%);    /* Move half of the width/height of actual image up/left */
}




/* SECTION: NAVIGATION (BUTTONS PREVIOUS, NEXT, CLOSE, FULLSCREEN) */

.prev,
.next,
.close,
.fullscreen {
  background: rgba(0, 0, 0, .25);
  box-sizing: content-box;             /* content-box resets any definition to default. Ensures the follow up */
                                       /* positioning stays consistently independent from global definitions */
                                       /* see https://www.w3schools.com/CSSref/css3_pr_box-sizing.asp */
  color: #fff;
  cursor: pointer;
  font-weight: 100;
  position: absolute;
  text-decoration: none;
  text-align: center;
  z-index: 2;                          /* ensure buttons are above modal, fixes a layering issue when generating gallery images by script */

  /* deactivate selection of prev/next/close characters */
  /* https://css-tricks.com/almanac/properties/u/user-select/ */
  -webkit-user-select: none;           /* Chrome, Firefox, Safari */
  -ms-user-select: none;               /* IE 10+ */
  user-select: none;                   /* Modern browsers */
}

/* Modal close and fullscreen buttons */
.close,
.fullscreen {
  border-radius: 4px;
  font-size: 1.5em;
  height: 28px;
  padding: 0px;
  position: fixed;
  right: 10px;
  top: 10px;
  width: 28px;
}

.close {
  font-size: 1.4em;
  top: 41px;
}

.fullscreen {
  display: none;                       /*  by default not visible */
}

/* center svg in parent element */
.close svg,
.fullscreen svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); 
}

/* size of svg graphics */
svg.fullscreenopen,
svg.fullscreenclose,
.close svg {
  width: .75em;
  height: .75em;
}

.fullscreenopen {                      /* SVG icon for full screen mode */
  display: block;                      /* open icon by default visible */
}

.fullscreenclose {                     /* SVG icon for full screen mode */
  display: none;                       /* close icon by default invisible */
}

.prev,                                 /* inspired by https://blueimp.github.io/Gallery/ */
.next {
  border-radius: 23px;
  right: 5px;
  top: 50%;

  /* parts of this will be overwritten for lager screens later on */
  font-size: 2.7em;
  height: .68em;
  line-height: .52em;
  margin-top: -.34em;
  padding: 0 0 0 3px;
  width: .61em;
}

.prev {
  left: 5px;
  padding: 0 3px 0 0;
}

.close:hover,
.fullscreen:hover {
  background: rgba(0, 0, 0, .8);
}



/* SECTION: IMAGE PRELOADING */

/* 'Spinner' */
.preload,                              /* Outer ring, loading ring */
.preload_error {                       /* Outer ring, ring in case of loading error */
  width: 100px;                        /* use sizes dividable by 2 (for center alignment) */
  height: 100px;                       /* use sizes dividable by 2 (for center alignment) */
  border: 3px solid transparent;
  border-radius: 50%;
  border-top-color: white;             /* light scheme */
  border-bottom-color: #525252; 

  position: relative;
  left: calc(50% - 50px);              /* to center align horizontally deduce half of the circle's diameter */
  top: calc(50% - 50px);               /* to center align vertically deduce half of the circle's diameter */

  animation: preload 5s linear infinite;
}

.preload::before,
.preload::after {
  border-radius: 50%;
  content: '';
  position: absolute;
}

.preload::before {                     /* Center ring */
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;

  border: 2px solid transparent;
  border-top-color: #686868;
  animation: preload 3s linear infinite;
}

.preload::after {                      /* Inner ring */
  top: 13px;
  left: 13px;
  right: 13px;
  bottom: 13px;

  border: 6px solid transparent;
  border-top-color: #9c9c9c;
  animation: preload 20s linear infinite; /*unclear why large numbers don't have any effect*/
}

.preload_error {                       /* other design for loading error */
  border-top-color: red;
  border-bottom-color: red;
}

.preload_error::after {
  color: red;
  content: 'loading error';
  text-align: center;
  position: absolute;
  top: 37%;
}

/* 'Spinner' animation */
@keyframes preload {

  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }

}

@keyframes preload-fade-in {

  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
  
}



/* SECTION: IMAGE ANIMATIONS */

/* Image browsing animation 'slide' */
.slide-out-to-left {
  animation: slide-out-to-left .2s ease forwards;
}

.slide-out-to-right {
  animation: slide-out-to-right .2s ease forwards;
}

.slide-in-from-right {
  animation: slide-in-from-right .2s ease forwards;
}

.slide-in-from-left {
  animation: slide-in-from-left .2s ease forwards;
}

/* Slide border to border: each transform is reaching out to just outside the display border. */
/* An extra plus of 10px is added. IE11 is not able to handle calc() within translate(), thus */
/* ignoring these lines, not having an animation. Since the sliding out picture is removed */
/* after animation, no unwanted leftovers remain. */
@keyframes slide-out-to-left {
    0% { transform: translate(-50%, -50%); }
  100% { transform: translate(calc(-100% - 50vw - 10px), -50%); visibility: hidden;}
}

@keyframes slide-out-to-right {
    0% { transform: translate(-50%, -50%); }
  100% { transform: translate(calc(0% + 50vw + 10px), -50%); visibility: hidden;}
}

@keyframes slide-in-from-right {
    0% { transform: translate(calc(0% + 50vw + 10px), -50%); }
  100% { transform: translate(-50%, -50%); }
}

@keyframes slide-in-from-left {
    0% { transform: translate(calc(-100% - 50vw - 10px), -50%); }
  100% { transform: translate(-50%, -50%); }
}

/* Image browsing animation 'fade' */
.fade-in {
  animation: fade-in .5s normal forwards;
}

@keyframes fade-in {  
    0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Image preloading animation: after an image is loaded, add smooth fade in animation
.preload-fade-in {
  animation: preload-fade-in .5s linear forwards; 
}
*/



/* SECTION: IMAGE PREVIEWS (GENEARL DEFINITIONS) */

img.preview {                          /* fallack color */
  background-color: #f3f3f3;           /* light scheme */
  border-radius: 5px;
}

.preview {                             /* general definition for preview images: cursor, frame */
  border: 1px solid #ddd;              /* light scheme */
  cursor: pointer;
  display: block;
  -o-object-fit: cover;
  object-fit: cover;                   /* cuts picture into specified container size without scaling/distorting */
}

.preview:hover {
  opacity: .9;
}



/* SECTION: IMAGE PREVIEWS */
/* these definitions are available in separate .css files */



-- --



/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: > 0.5%
*/