/* Fonts*/



  @charset "UTF-8";







/* =============================================================================

   colors + style

   ========================================================================== */

/* =============================================================================

 * GENERAL

 * ========================================================================== */

/*html, body {

  overflow-x: hidden;

  min-height: 100%; }*/



  body {
	   /*

  font-family: "klavika_regular", "Titillium Web", "Source Sans Pro", Arial, "Helvetica Neue", Helvetica, sans-serif;
  
 */
    
  font-family: "klavika_regular", Arial, "Helvetica Neue", Helvetica, sans-serif;

  background-color: #d3eaff;

  position: relative;

  color: #5a89a4; }



/*h1, h2, h3, h4, h5, h6 {

  font-family: "klavika_bold", "Titillium Web", "Source Sans Pro", Arial, sans-serif;

  color: #0078ff;

  font-weight: 400; }*/





  



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







/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */



/*







	Contents:







	1. Buttons



	2. Share modal and links



	3. Index indicator ("1 of X" counter)



	4. Caption



	5. Loading indicator



	6. Additional styles (root element, top bar, idle state, hidden state, etc.)







*/



/*



	



	1. Buttons

	

	*/



/* schmaler Abstand der Buttons */



.eng { 

	margin: -15px 0 0 -30px;

}



/*.durchstrich {text-decoration: line-through;}*/





/* <button> css reset */



.pswp__button {



  width: 88px;



  height: 88px;



  position: relative;



  background: none;



  cursor: pointer;



  overflow: visible;



  -webkit-appearance: none;



  display: block;



  border: 0;



  padding: 0;



  margin: 0; /*margin: -15px 0 0 -30px;*/



  float: right;


/* Deckkraft der Schalter bei Desktop war vorher nur 0.1*/

  opacity: 0.3;



  -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.8; }



  .pswp__button::-moz-focus-inner {



    padding: 0;







    border: 0; }







/* pswp__ui--over-close class it added when mouse is over element that should close gallery */



.pswp__ui--over-close .pswp__button--close {



  opacity: 1; }







.pswp__button, .pswp__button--arrow--left:before, .pswp__button--arrow--right:before {



  background: url(default-skin.png) 0 0 no-repeat ;



  /*------------------------achtung hier stehtsonst PNG-----------------------------------------------------*/



  background-size: 528px 176px;



  width: 88px;



  height: 88px; 



  }







@media (-webkit-min-device-pixel-ratio: 1.1), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {



  /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */



  .pswp--svg .pswp__button, .pswp--svg .pswp__button--arrow--left:before, .pswp--svg .pswp__button--arrow--right:before {



    background-image: url(default-skin-x2.png); 



/*hier steht sonst SVG -- geht nur mit x2 PNG, wenn SVG weg sind, sonst lädt er die SVG Datei!!!  ------------------------*/



	}







  .pswp--svg .pswp__button--arrow--left, .pswp--svg .pswp__button--arrow--right {



    background: none; 



	}







 }















 /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */



 



.pswp__button--close {



  background-position: -9px -88px; 

  margin-top: -10px; /* Test Abstand Button */

  /*margin-left: -30px; /* Test Abstand button*/

  width: 70px;

}







.pswp__button--share {



  background-position: -107px -88px; 

  margin-top: -10px; /* Test Abstand button*/

 /* margin-left: -5px; /* Test Abstand button*/

  width: 50px;



/* Teilen ausblenden */



  display: none; }



/* Teilen ausblenden */





.pswp__button--fs {



  display: none; 

    background-position: -19px 0; 

  margin-top: -10px; /* Test Abstand button*/

  /*margin-left: -35px; /* Test Abstand button*/

  width: 50px;

}





.pswp--supports-fs .pswp__button--fs {



  display: block; }







.pswp--fs .pswp__button--fs {



  background-position: -107px 0; 

     margin-top: -10px; /* Test Abstand button*/

  /* margin-left: -20px; /* Test Abstand button*/

   width: 50px;}







.pswp__button--zoom {



  display: none;



  background-position: -195px 0; 

   margin-top: -10px; /* Test Abstand button*/

  /* margin-left: -20px; /* Test Abstand button*/

   width: 50px;

}





.pswp--zoom-allowed .pswp__button--zoom {



  display: block; }







.pswp--zoomed-in .pswp__button--zoom {



  background-position: -283px 0; }







/* no arrows on touch screens */



.pswp--touch .pswp__button--arrow--left, .pswp--touch .pswp__button--arrow--right {



  visibility: hidden; }



  



 .pswp--touch .pswp__button--close {



	 /* close Button jetzt 80% statt 100% sichtbar bei touch- neu!! */



  opacity: 0.8; }







/*



	Arrow buttons hit area



	(icon is added to :before pseudo-element)



*/



.pswp__button--arrow--left, .pswp__button--arrow--right {



  background: none;



  top: 50%;



  margin-top: -100px;



  width: 100px;  /*War 70px */



  height: 200px;



  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: 56px;



  /*background-color: rgba(0, 0, 0, 0.3);*/



  height: 88px;



  width: 74px;



  position: absolute; 



} 







.pswp__button--arrow--left:before {



  left: 6px;



  background-position: -276px -88px; 



  }







.pswp__button--arrow--right:before {



  right: 6px;



  background-position: -188px -88px; }







/*







	2. Share modal/popup and links







 */



.pswp__counter, .pswp__share-modal {



  -webkit-user-select: none;



  -moz-user-select: none;



  -ms-user-select: none;



      user-select: none; }



/*







	Facebook Overlay ueber Bild







 */







.pswp__share-modal {



  display: block;



  background: rgba(0, 0, 0, );



  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;



  -webkit-backface-visibility: hidden;



  will-change: opacity; }







.pswp__share-modal--hidden {



  display: none; }







.pswp__share-tooltip {



  z-index: 1620;



  position: absolute;



  background: #FFF;



  top: 56px;



  border-radius: 2px;



  display: block;



  width: auto;



  right: 88px;



  -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);



      -ms-transform: translateY(6px);



          transform: translateY(6px);



  -webkit-transition: -webkit-transform 0.25s;



          transition: transform 0.25s;



  -webkit-backface-visibility: hidden;



  will-change: transform; }



  .pswp__share-tooltip a {



    display: block;



    padding: 8px 12px;



    color: #000;



    text-decoration: none;



    font-size: 14px;



    line-height: 18px; }



    .pswp__share-tooltip a:hover {



      text-decoration: none;



      color: #000; }



    .pswp__share-tooltip a:first-child {



      /* round corners on the first/last list item */



      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);



        -ms-transform: translateY(0);



            transform: translateY(0); }







/* increase size of share links on touch devices */



.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 rgba(0, 0, 0, 0);



  border-bottom-color: #FFF;



  -webkit-pointer-events: none;



  -moz-pointer-events: none;



  pointer-events: none; }



a.pswp__share--facebook:hover {



  background: #3E5C9A;



  color: #FFF; }



  a.pswp__share--facebook:hover:before {



    border-bottom-color: #3E5C9A; }







a.pswp__share--twitter:hover {



  background: #55ACEE;



  color: #FFF; }







a.pswp__share--pinterest:hover {



  background: #CCC;



  color: #CE272D; }







a.pswp__share--download:hover {



  background: #DDD; }







/*







	3. Index indicator ("1 of X" counter)







 */



.pswp__counter {



  position: absolute;



  left: 0;



  top: 0;



  height: 88px;

  

  margin-top: -12px;



  font-size: 13px;



  line-height: 88px;



  color: #FFF;



  opacity: 0.75;



  padding: 0 10px; }







/*



	



	4. Caption







 */



.pswp__caption {



  position: absolute;



  left: 0;



  bottom: 0;



  width: 100%;



  min-height: 88px; }



  .pswp__caption small {



   /* font-family: "klavika_regular", "Titillium Web", "Source Sans Pro", Arial, sans-serif;*/
    
	font-family: "klavika_regular", Arial, sans-serif;

    font-weight: 400; 

    letter-spacing: 0.05em;

	/*line-height: 20px; */

	font-size: 11px; /*font-size: 11px;*/

    color: #BBB; }

	

	

  .pswp__caption strong {



   /* font-family: "klavika_regular", "Titillium Web", "Source Sans Pro", Arial, sans-serif;*/
    
	font-family: "klavika_regular", Arial, sans-serif;

    letter-spacing: 0.15em;

	/*line-height: -100px;*/

    font-size: 13px;

    text-transform: uppercase;

    font-weight: 400; 

    /*line-height: 5em; /* geht nicht */

}







.pswp__caption__center {



  text-align: center;



  max-width: 420px;



  margin: 0 auto;



  font-size: 13px;  /*font-size: 13px;*/



  padding: 10px;



  line-height: 18px; /* 20pxauch für Stron und Small*/



  color: #CCC; }







.pswp__caption--empty {



  display: none; }







/* Fake caption element, used to calculate height of next/prev image */



.pswp__caption--fake {



  visibility: hidden; }







/*







	5. Loading indicator (preloader)







	You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR







 */



.pswp__preloader {



  width: 88px;



  height: 88px;



  position: absolute;



  top: 0;



  left: 50%;



  margin-left: -44px;



  opacity: 0;



  -webkit-transition: opacity 0.25s ease-out;



          transition: opacity 0.25s ease-out;



  will-change: opacity; }







.pswp__preloader__icn {



  width: 40px;



  height: 40px;



  margin: 12px; }







.pswp__preloader--active {



  opacity: 1; }



  .pswp__preloader--active .pswp__preloader__icn {



    /* We use .gif in browsers that don't support CSS animation */



    background: url(preloader.gif) 0 0 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: 28px;



  height: 28px;



  position: absolute;



  left: 15px;



  top: 15px;



  margin: 0; }



.pswp--css_animation .pswp__preloader__cut {



  /* 



			The idea of animating inner circle is based on Polymer ("material") loading indicator 



			 by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html



		*/



  position: relative;



  width: 14px;



  height: 28px;



  overflow: hidden; }



.pswp--css_animation .pswp__preloader__donut {



  -webkit-box-sizing: border-box;



          box-sizing: border-box;



  width: 28px;



  height: 28px;



  border: 2px solid #FFF;



  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); } }







/*



	



	6. Additional styles







 */



/* root element of UI */



.pswp__ui {



  -webkit-font-smoothing: auto;



  visibility: visible;



  opacity: 1;



  z-index: 1550; }







/* top black bar with buttons and "1 of X" indicator */



.pswp__top-bar {



  position: absolute;



  left: 0;



  top: 0;



  height: 66px; /*Wurde geändert in der Photoswipe.js Top-Bar:66 */



  width: 100%; }







.pswp__caption, .pswp__top-bar, .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right {



  -webkit-backface-visibility: hidden;



  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 class is added only when two subsequent mousemove events occur */



.pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right {



  visibility: visible; }



  



  /* ----------------------------------------- Info Hintergrundfläche oben und unten ?? 







 .pswp__top-bar, .pswp__caption {



  background-color: rgba(0, 0, 0, ); }*/







/* Unterer Balken bleibt schwarz & transparent */











.pswp__caption {



  background-color: rgba(67, 67, 67, 0.7); }  /* Wie Hintergrundfarbe ##434343, war vorher  background-color: rgba(0, 0, 0, ); }*/







/* ----------------------------------------- Info Hintergrundfläche oben und unten */











/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */



/*.pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption {



  background-color: rgba(0, 0, 0, 0.3); }*/







/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */



/* durch ".pswp__ui--idle .pswp__caption," wird auch unterer Balken unsichtbar ---------------------------------------*/







.pswp__ui--idle .pswp__caption, .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 class is added when controls are hidden



	e.g. when user taps to toggle visibility of controls



*/



.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 {



  /* Force paint & create composition layer for controls. */



  opacity: 0.001; }







/* pswp__ui--one-slide class is added when there is just one item in gallery */



.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; }