/*CSSFILE VERSION #4*/
@supports not ((width: -webkit-fit-content) or (width: -moz-fit-content) or (width: fit-content)) {
  @supports not (width: -webkit-fit-content) {
    @supports not (width: -moz-fit-content) {
      .modalImageCenter{
        display: table;
      }

      .ksLogo_Teaser li {
        display: table;
      }
    }
  }
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  .blurred-container {
    -webkit-backdrop-filter: saturate(2) contrast(0.8) blur(15px) brightness(0.9);
    backdrop-filter: saturate(2) contrast(0.8) blur(15px) brightness(0.9);
    background-color: rgba(251, 251, 251, 0) !important;
  }
}

/* slightly transparent fallback for not supporting backdrop-filter */
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .blurred-container {
    background: rgba(157, 157, 157, 0.85)
  }
}


@-moz-document url-prefix() { 
  .blurred-container {
    -webkit-backdrop-filter: saturate(2) contrast(0.8) blur(15px) brightness(0.9);
    backdrop-filter: saturate(2) contrast(0.8) blur(15px) brightness(0.9);
    background: rgba(157, 157, 157, 0.75) !important
  }
}

@media (pointer: coarse) {
    .HoverZoom{
      pointer-events: none;
      touch-action: none;
    }
}


@media (pointer: fine) {
    .HoverZoom{
      pointer-events: auto;
      touch-action: none;
    }
}



@media (min-width: 0px) and (max-width: 4000px){
/*  #ksWelcome{
    -webkit-transform: scale(1.5);
        -ms-transform: scale(1.5);
            transform: scale(1.5);
  }*/

  #barsTop{
    -webkit-transform: translate(1731px,32px);
        -ms-transform: translate(1731px,32px);
            transform: translate(1731px,32px);
  }

  #header div{
    display: inline-block;
  }

  #infowrapper{
    display: inline-block;
    max-width: 595px;
/*    width: 395px;*/
    padding: 0 2px;
    overflow: visible;
    /*transform: translateY(5px);*/
  }


  #who{
    font-size: 5em;
  }

  #where{
    font-size: 2.7em;
    margin: 0;
    /*width: 34%;*/
  }

  #what{
    font-size: 1.5em;
  }

  .format{
    margin: 0 .3%;
  }

  .mailer{
    width: 4.5em !important;
  }

  .wrapper, .grid, #header {
    width: 1800px;
  }

/*  .stamp {
    left: 50%;
    top: 7.5em;
    -webkit-transform: translate(-300px);
        -ms-transform: translate(-300px);
            transform: translate(-300px);
  }*/

  .tiltup{
    -webkit-transform: rotateX(90deg) translate(-300px);
            transform: rotateX(90deg) translate(-300px);
  }

  .translateX600{
    transform: translateX(600px) !important;
  }

}


@media (max-width: 1240px){
  #header {
    position: absolute !important;
  }
}


@media (min-width: 0px) and (max-width: 1240px){

  .translateX600 {
      position: relative !important;
      transform: translateX(0px) !important;
  }

}

@media (min-width: 1240px) and (max-width: 2000px){
  .typewriter{
    -webkit-transform: translateY(-8px);
        -ms-transform: translateY(-8px);
            transform: translateY(-8px);
  }
}


@media (min-width: 941px) and (max-width: 1240px) {
  .width600.translateX300 > .menuright {
      display: inline-table !important;
      right: 0px;
      transform: translate(-3px,-0.5em) !important;
  }

    .width600.translateX300 > .typewriter {
      transform: translate(-3px,-0.5em) !important;
  }
}

@media (min-height: 0px) and (max-height: 1000px) and (min-width: 0px) and (max-width: 800px) {

  .MapTile{
    max-height: 60vh;
/*    max-width: 100vw;*/
  }

}

@media (min-height: 0px) and (max-height: 1000px) and (min-width: 801px) {

  .MapTile{
    max-height: 100vh;
/*    max-width: 100vw;*/
  }

}

/*@media (min-width: 880px) and (max-width: 1000px){
  #ksWelcome{
    transform: scale(1.3);
  }
}


@media (min-width: 0px) and (max-width: 880px){
  #ksWelcome{
    transform: scale(0.98);
  }
}*/


/*@media (min-width: 0px) and (max-width: 760px){
  #ksWelcome{
    padding: 30px 0 !important;
    width: 100% !important;
  }
}*/


@media (min-width: 1541px) and (max-width: 1840px){

  #barsTop{
    -webkit-transform: translate(1431px,32px);
        -ms-transform: translate(1431px,32px);
            transform: translate(1431px,32px);
  }

  .wrapper, .grid, #header {
    width: 1500px;
  }

}



@media (min-width: 1241px) and (max-width: 1540px){

  #barsTop{
    -webkit-transform: translate(1133px,32px);
        -ms-transform: translate(1133px,32px);
            transform: translate(1133px,32px);
  }

  .wrapper, .grid, #header {
    width: 1200px;
  }

}


@media (min-width: 941px) and (max-width: 1240px){

  #barsTop{
    /*transform: translate(191px,71px);*/
    -webkit-transform: translate(835px,19px);
        -ms-transform: translate(835px,19px);
            transform: translate(835px,19px);
  }

  .wrapper, .grid, #header {
    width: 900px;
  }

  #header{
    min-height: 120px;
  }

  #header div{
    /*display: inline-table;*/
  }

  #who{
    font-size: 4em;
  }

  .typewriter{
    -webkit-transform: translate(-3px,-2em) !important;
        -ms-transform: translate(-3px,-2em) !important;
            transform: translate(-3px,-2em) !important; 
  }

  .menuright{
    padding: 0 !important;
    background-color: transparent !important;
    -webkit-transform: translate(-6px,-40px);
        -ms-transform: translate(-6px,-40px);
            transform: translate(-6px,-40px);
    position: absolute;
  }

  .grid {
      top: 8.5em !important;
  }

}


@media (max-width: 940px){

  #barsTop{
    -webkit-transform: translate(539px,19px);
        -ms-transform: translate(539px,19px);
            transform: translate(539px,19px);
  }

  #barsTop div{
    height: 100%;
    background: rgb(255, 255, 255);
    mix-blend-mode: color;
  }

  .wrapper, .grid, #header {
    width: 600px;
  }

  #who{
    font-size: 4em;
    -webkit-transform: translate(15px,.1em) scaleX(1.1) !important;
        -ms-transform: translate(15px,.1em) scaleX(1.1) !important;
            transform: translate(15px,.1em) scaleX(1.1) !important;
  }

  .menuright {
      padding: 0 !important;
      background-color: transparent !important;
      -webkit-transform: translate(5px, -88px);
      -ms-transform: translate(5px, -88px);
      transform: translate(5px, -88px);
      position: absolute;
      right: 0;
  }

  .grid {
      top: 10.5em !important;
  }

  #descItemModal {
      max-height: 42.5% !important;
  }

}



@media (max-height: 800px){   /*pixel that work with viewport initial scale - tested*/
  .grid-item--modalheight2x {height: calc(80vh) !important;}
}


@media (orientation: portrait) and (min-aspect-ratio: 1/1.5) {
  .expandforGPSInfo.InfoWidth {
    min-height: auto;
  }

  .expandforGPSInfo.InfoHeight {
    min-height: auto;
  }

  .topWithoutStamp {
      transform: translateY(0px) !important;
  }

  .MapTile.height2x{
    max-height: 60vh;
    /*    max-width: 100vw;*/
  }  
}

@media (orientation: portrait) and (max-aspect-ratio: 1/1.5) {
  .expandforGPSInfo.InfoWidth {
    min-height: 390px;
  }

  .expandforGPSInfo.InfoHeight {
    min-height: 690px;
  }

  .topWithoutStamp {
      transform: translateY(-100px) !important;
  }

  .MapTile.height2x{
    max-height: 100vh;
    /*    max-width: 100vw;*/
  }  
}

@media (orientation: landscape) and (min-width: 940px) {
  .expandforGPSInfo.InfoWidth {
    min-height: 390px;
  }

  .expandforGPSInfo.InfoHeight {
    min-height: 690px;
  }

  .topWithoutStamp {
      transform: translateY(-100px) !important;
  }

  .MapTile.height2x{
    max-height: 80vh;
/*    min-height: 160px;*/
    /*    max-width: 100vw;*/
  }  

}

@media (orientation: landscape) and (min-width: 940px) {
  .topWithoutStamp {
      transform: translateY(-100px) !important;
  }

  .expandforGPSInfo.InfoWidth {
    min-height: 390px;
  }

  .expandforGPSInfo.InfoHeight {
    min-height: 690px;
  }

  .MapTile.height2x{
    max-height: 70vh;
/*    min-height: 160px;*/
    /*    max-width: 100vw;*/
  }  

}

@media (orientation: landscape) and (max-width: 939px) {
  .expandforGPSInfo.InfoWidth {
    max-height: 40vh;
    min-height: 110px;
  }

  .expandforGPSInfo.InfoHeight {
    max-height: 70vh;
  }

  .MapTile{
    top: 0px !important;
  }  

  .topWithoutStamp {
      transform: translateY(0px) !important;
  }

  .MapTile.height2x{
    max-height: 60vh;
/*    min-height: 160px;*/
    /*    max-width: 100vw;*/
  }  
}

span[id*="_0_"] .HoverCursor {
  display:none;
}

/*@media (pointer:coarse){*/
/*@media  (hover:none) {*/
  .HoverCursor {
    bottom: 15%;
    left: 0;
    -webkit-transition: .8s ease-out;
    -o-transition: .8s ease-out;
    transition: .8s ease-out;
    opacity: 0;
    width: 100%;
    height: 85%;
    background-size: auto;
    position: absolute;
    z-index: 1;
    /*filter: drop-shadow(0 0 30px #fff);       performance better without blur*/
  }

.HoverCursorShowFull {
    background: url(../img/icons8-detective-blur-80.png) no-repeat center;
  }

  .HoverCursorShowHalf {
    background: url(../img/icons8-detective-blur-80.png) no-repeat 80% 50%;
    width: 50%;
  }

  .HoverCursorShowFull:hover, .HoverCursorShowHalf:hover {
    cursor: url(../img/icons8-detective-24.png), auto;
    /*cursor: pointer;*/
  }

/*  .HoverCursorShowFull:hover .grid-item-inner,
  .HoverCursorShowHalf:hover .grid-item-inner {
    cursor: url(../img/icons8-detective-24.png), auto;
    transform: scale(1.1);
  }*/


  .HoverCursorMore, .HoverCursorMoreFull {
    background: url(../img/icons8-view-more-blur-60.png) no-repeat center;
  }

  .HoverCursorMoreHalf {
    background: url(../img/icons8-view-more-blur-60.png) no-repeat 80% 50%;
    width: 50%;
  }

  .HoverCursorTextFull {
    background: url(../img/icons8-sms-blur-80.png) no-repeat center;
  }

  .HoverCursorTextHalf{
    background: url(../img/icons8-sms-blur-80.png) no-repeat 20% 50%;
    width: 50%;
    left: 50%;
  }

  .HoverCursorTextFull:hover, .HoverCursorTextHalf:hover {
    cursor: url(../img/icons8-sms-30.png), auto;
  }

  .HoverCursorBackHalf {
    background: url(../img/icons8-undo-filled-100.png) no-repeat 80% 50%;
    width: 50%;
  }

  .HoverCursorBackHalf:hover {
    cursor: url(../img/icons8-undo-filled-30.png), auto;
  }

  .HoverCursorHomeHalf{
    background: url(../img/icons8-home-90.png) no-repeat 20% 50%;
    width: 50%;
    left: 50%;
  }

  .HoverCursorHomeHalf:hover {
    cursor: url(../img/icons8-home-30.png), auto;
  }

  .HoverCursorFitFull {
    background: url(../img/icons8-fit-to-page-blur-48.png) no-repeat center;
    cursor: pointer;
    z-index: 401;
  }

  .HoverCursorCollapse {
    background: url(../img/icons8-collapse-blur-50.png) no-repeat center;
    cursor: pointer;
  }

  .HoverCursorGpxPlay {
    background: url(../img/icons8-play-64.png) no-repeat center;
    cursor: pointer;
  }

  .manualHover {
    opacity: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: .8s ease-out;
  }

  .manualHover:hover {
    opacity: 1;
    cursor: pointer; 
  }  

  .more:hover{
    cursor: url(../img/icons8-view-more-24.png), auto;
  }

/*}*/
/*}*/

@media (hover: hover){
  .HoverZoom{
    cursor: url(../img/icons8-detective-48.png), auto;
  }  

  .HoverPlay{
    cursor: url(../img/icons8-play-64.png), auto;
  }  

  .HoverStop{
    cursor: url(../img/icons8-stop-64.png), auto;
  }  

}



@font-face {
    font-family: 'Bauhaus Light BT';
    font-style: normal;
    font-weight: normal;
    src: local('Bauhaus Light BT'), url('../fonts/bauhauslightbt.woff') format('woff');
}

@font-face {
    font-family: 'Bauhaus-Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Bauhaus-Medium'), url('../fonts/BAUHAUSM.woff') format('woff');
}

@font-face {
    font-family: 'Bauhaus Md BT Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Bauhaus Md BT Bold'), url('../fonts/BAUHAUSB.woff') format('woff');
}

@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: normal;
    src: local('Caveat'), url('../fonts/Caveat-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'comic_andy';
    font-style: normal;
    font-weight: normal;
    src: local('comic_andy'), url('../fonts/comicandy.otf') format('truetype');
}

/*Internet Explorer restyles*/

html[data-useragent*='MSIE'] #oldBrowMsg {
  display: block;
}

html[data-useragent*='Trident'] #oldBrowMsg {
  display: block;
}



html[data-useragent*='MSIE'] #ImgTexDesWrap {
  display: block;
}

html[data-useragent*='MSIE'] #theImage {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

html[data-useragent*='MSIE'] #navigate_forward,    
html[data-useragent*='MSIE'] #navigate_backward,
html[data-useragent*='MSIE'] .displayFullTextModal,
html[data-useragent*='MSIE'] #overview {
  display: none;
}


html[data-useragent*='Trident'] #ImgTexDesWrap {
  display: block;
}

html[data-useragent*='Trident'] #theImage {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

html[data-useragent*='Trident'] #navigate_forward,    
html[data-useragent*='Trident'] #navigate_backward,
html[data-useragent*='Trident'] .displayFullTextModal,
html[data-useragent*='Trident'] #overview {
  display: none;
}


#oldBrowMsg{
  padding: 0px 10px; 
  top: 50%; 
  text-align: justify; 
  color: white; 
  font-size: 1.8em; 
  z-index: 1; 
  background-color: lightslategrey;
  display: none;
}




* { -webkit-box-sizing: border-box; box-sizing: border-box; }

html {
  opacity: 1 !important;
}

body {
  font-family: 'Bauhaus Light BT';
  margin: 0;
}

p{
  margin: 0;
}

a {
  color: darkslategrey;
  text-decoration: none;
  border-bottom: solid 1px grey;
}

img{
/*  image-rendering: pixelated;*/
}

.wrapper{
  position: relative;
  margin: auto;
}

.modalImageWrap{
  display: none;
  position: fixed;
  width: 100%;
  height:100%;
  top:0;
  left:0;
  background: rgba(34, 32, 33, .8);
  z-index: 10000;
  padding: 1vh;
  backdrop-filter: blur(5px);
}

.modalImageWrap:hover {
  cursor: url(../img/icons8-multiply-52.png), auto;
}

#ImgTexDesWrap{
  display: grid;
  vertical-align: middle;
  position: relative;
  overflow: visible;
}

.modalImageCenter{
  width: -webkit-fit-content;
  width: fit-content;
  width: -moz-fit-content;
  margin: auto;
  transition: margin .5s ease-in-out;
  overflow: hidden;
  /*display: table;*/
}

#modalImage{
  position: relative;
  display: contents;
  /*left: 50%;*/
  top:50%;
  -webkit-transform: translate(0%, -50%);
      -ms-transform: translate(0%, -50%);
          transform: translate(0%, -50%); /*vertical centering, was not able to fix this with relative positioning and fit-content*/
  /*margin-left: 4vw;*/
}

#modalImageDescr{
  font-size: 1.5em;
  text-align: center;
  color: white;
  display: none;
}

#theImage{
  max-width: 100%;
  max-height: 98vh;
  -webkit-transition: .5s ease-out;
  -o-transition: .5s ease-out;
  transition: .5s ease-out;
  z-index: 1;
}

.timelapse_container{
  width: -webkit-fill-available;
  width: -moz-available;
  /*max-width: 100vw;*/
  /*max-height: 98vh;*/
  /*display: block;*/
  top: 0;
  position: absolute;
}

#theVideo{
  max-width: 100%;
  max-height: 98vh;
  display: none;
/*  z-index: 900;*/
}

.modalImageZoomMax{
  max-width: 6600px !important;
/*  max-width: 3400px !important;*/
  max-height: 2000px !important;
}

.modalImageZoomMaxPositionPortrait{
  top: 0% !important;
  -webkit-transform: translate(-50%, 0%) !important;
      -ms-transform: translate(-50%, 0%) !important;
          transform: translate(-50%, 0%) !important;
}

.modalImageZoomMaxPositionLandscape{
  left: 0% !important;
  -webkit-transform: translate(0%, -50%) !important;
      -ms-transform: translate(0%, -50%) !important;
          transform: translate(0%, -50%) !important;
}

.FillHeightAvailable{
  height: -webkit-fill-available;   /*doesn't work in firefox*/
  height: -moz-available;
  height: 100%;
  overflow: auto;
}

.modalImageZoomMaxEnableScroll{
  overflow: auto;
}

#navigate_forward{
  background: url(../img/icons8-next-page-64.png) center/100% no-repeat;
  max-width: 100px;
  max-height: 100px;
  width: 8%;
  padding-top: 8%;
  /*display: inline-block;*/
  opacity: .5;
  cursor: pointer;
  position: fixed; 
  right: 0px;
  top: 42vh;
  z-index: 100;
}

#navigate_backward{
  background: url(../img/icons8-prev-page-64.png) center/100% no-repeat;
  max-width: 100px;
  max-height: 100px;
  width: 8%;
  padding-top: 8%;
  /*display: inline-block;*/
  opacity: .5;
  cursor: pointer;
  position: fixed; 
  z-index: inherit;
  top: 42vh;
  z-index: 100;
  transition: 0.5s ease-out;
}

.hovertime {
  position: absolute;
  top: 0;
  font-size: smaller;
  text-shadow: 0 0 black;
  right: 5px;
/*/  backdrop-filter: invert(0.1);*/
}

.hovertimeModal {
  position: absolute;
  top: 0;
  font-size: medium;
  text-shadow: 0 0 black;
  right: 5px;
  z-index: 1;
/*/  backdrop-filter: invert(0.1);*/
}

#overviewWrap {
  position: fixed;
  right: 4vw;
  z-index: 1;
  /*mix-blend-mode: screen;*/
}

/*#overviewWrap:hover {
  cursor: url(../img/icons8-detective-48.png), auto;
}*/

.overviewWrapFront:hover {
  cursor: url(../img/icons8-send-backward-filled-50.png), auto;  
}

.overviewWrapBack:hover {
  cursor: url(../img/icons8-bring-forward-filled-50.png), auto;  
}

#overviewWrap svg{
  position: absolute;
  width: 10%;
  cursor: pointer;
  color: dimgray;
}

#overview {
  max-height: 98vh;
  max-width: 30vw;
}

.nav_disabled{
  visibility: hidden;
}

.filterBlur{
  -webkit-filter: blur(10px);
          filter: blur(10px);
}

#barsTop{
  display: none;
  position: fixed;
  z-index: 100;
  cursor: pointer;
}

#header{
  position: fixed;
  background-color: rgba(255, 255, 255, .9);
  margin-top: 1em;
  z-index: 1000;
  transition: .5s ease-in-out;
}

.ImgZoomCenterAbsolute {
  max-width: 100%; 
  -webkit-transform: translate(-50%, -50%); 
      -ms-transform: translate(-50%, -50%); 
          transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  position: absolute !important; 
  z-index: 10;
  background-color: rgba(251,251,251,.95);
}


/*#header div {
  white-space: nowrap;
}*/

h1 {
  font-size: 23px;
  margin: 0;
}

h2 {
  margin: 0;
  font-size: 1.1em;
  margin-bottom: .5em;
}

h3{
  text-align: center;
  font-size: 23px;
}

h4 {
  font-size: 23px;
  margin: 0;
}

.story h2 {
  text-align: center;
  letter-spacing: 5px;
  color: cadetblue;
  font-variant: all-petite-caps;
  border-top-style: double;
  border-bottom-style: double;
  -webkit-padding-after: 0.2em;
          padding-block-end: 0.2em;
  -webkit-margin-start: 23%;
          margin-inline-start: 23%;
  -webkit-margin-end: 23%;
          margin-inline-end: 23%;
  -webkit-margin-before: 1.5em;
          margin-block-start: 1.5em;
}

.keyword{
  font-variant: petite-caps;
  font-weight: bold;
}

.menuright{
  /*width: 240px;*/
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  float: right;
  background-color: rgba(255, 255, 255, .8);
  padding: 8px 0px 8px 5px;
/*  display: table !important;*/
  display: flex !important;
}

.menuright i{
  cursor: pointer;
}

.format{
  width: 4em;
  height: 4em;
/*  display: table-cell;*/
  display: inline-block;
  opacity: .75;
  -webkit-transform: translateY(.5em);
      -ms-transform: translateY(.5em);
          transform: translateY(.5em);
}

.mailer{
  background: url(../img/icons8-secured-letter-100.png) center/100% no-repeat;
}

#background{
  background: url(../img/icons8-philosophy-64.png) center/100% no-repeat;
}

.displayChronoForward{
  background: url(../img/chrono_forw-64.png) center/100% no-repeat;
}

.displayChronoBackward{
  background: url(../img/chrono_back-64.png) center/100% no-repeat;
}

.menu{
  background: url(../img/icons8-menu-96.png) center/100% no-repeat;
}

.menuclose{
  /*background: url(../img/icons8-menuclose-96.png) center/100% no-repeat;*/
  background: url(../img/icons8-menu-96.png) center/100% no-repeat;
}

.displayHeaders{
  background: url(../img/icons8-headers-64.png) center/100% no-repeat;
}

.displayFullText{
  background: url(../img/icons8-fullTexts-64.png) center/100% no-repeat;
}

.displayFullTextModal{
  background: url(../img/icons8-fullTexts-64.png) center/100% no-repeat;
  mix-blend-mode: overlay;
  /*background: linear-gradient(rgba(205, 209, 242, 0.5), rgba(80, 80, 87, 0.5)), url(../img/icons8-fullTexts-64.png) center/100% no-repeat;*/
/*  max-width: 80px;
  max-height: 80px;*/
  width: 80px;
  height: 80px;
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: pointer;  
  z-index: 1000;
  -webkit-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
          transform-origin: right bottom;
  -webkit-filter: drop-shadow(rgb(255, 255, 255) 0px 0px 5px);
          filter: drop-shadow(rgb(255, 255, 255) 0px 0px 5px);
}

.displayAudio{
  /*mix-blend-mode: soft-light;*/
  /*background: linear-gradient(rgba(205, 209, 242, 0.5), rgba(80, 80, 87, 0.5)), url(../img/icons8-fullTexts-64.png) center/100% no-repeat;*/
/*  max-width: 80px;
  max-height: 80px;*/
/*  width: 80px;
  height: 80px;
  position: absolute;
  right: 80;
  bottom: 0;
  cursor: pointer;  
  z-index: 1;
  display: none;*/
}

.Audio{
  background: url(../img/icons8-music-64.png) center/100% no-repeat;  
  cursor: url(../img/icons8-music-64.png), auto;  
}

.noAudio{
  background: url(../img/icons8-nomusic-64.png) center/100% no-repeat;  
  cursor: url(../img/icons8-nomusic-64.png), auto;  
}


#back .grid-item-inner {
  background: url(../img/icons8-undo-filled-100.png) top left;
  background-size: 17%;
  margin: 10%;
  width: 80%;
  height: 80%;
}

#descItemModal{
  /*opacity: 0; */
  display: none;
  position: absolute;
  bottom: 0px;
  padding: 10px 80px 10px 10px;
  background: rgba(240, 248, 255, 0.8);
  text-align: center;
  font-size: calc(1em + 0.3vw);
  /*text-shadow: 0px 0px 10px rgba(255,255,255,0.8);*/
  /*transition: .5s;*/
  width: 100%;
  min-height: 80px;
  max-height: 22.5%;
  z-index: 101;
  overflow-y: overlay;
  cursor: default;
}


#descModalHeader{
  font-size: 1.2em;
  display: inline-block;
}

#slopeLegend{
  display: none;
  margin-top: 10px;
  padding: 0px 20px 0px 5px;
  text-align: center;
}

#slopeLegend span{
  cursor: pointer;
}

.displayPicsOnly{
  background: url(../img/icons8-picsOnly-64.png) center/100% no-repeat;
}

.displayPicsOnlyModal{
  background: url(../img/icons8-headers-64.png) center/100% no-repeat;
  /*mix-blend-mode: soft-light;*/
  /*background: linear-gradient(rgba(205, 209, 242, 0.5), rgba(80, 80, 87, 0.5)), url(../img/icons8-fullTexts-64.png) center/100% no-repeat;*/
/*  max-width: 80px;
  max-height: 80px;*/
  opacity: 0.7;
  width: 80px;
  height: 80px;
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: pointer;
  z-index: 1000;
}

.displaySlopeInfo{
  background: url(../img/icons8-RouteLines-64.png) center/100% no-repeat;
  /*mix-blend-mode: soft-light;*/
  /*background: linear-gradient(rgba(205, 209, 242, 0.5), rgba(80, 80, 87, 0.5)), url(../img/icons8-fullTexts-64.png) center/100% no-repeat;*/
/*  max-width: 80px;
  max-height: 80px;*/
  opacity: 0.7;
  width: 80px;
  height: 80px;
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: pointer;
  z-index: 1;
}


/* --------------------------------------------------------- animation ----------------------------------------------------------- */

.typewriter{
  overflow: hidden;
}

#who {
  overflow: hidden; 
  -webkit-transform: translate(15px,.2em) scaleX(1.1); 
      -ms-transform: translate(15px,.2em) scaleX(1.1); 
          transform: translate(15px,.2em) scaleX(1.1);
  font-family: 'Bauhaus Light BT';
  /*font-family: 'Fredericka the Great', cursive;*/
  margin-top: -0.2em;
  margin-bottom: -0.01em;
  font-weight: normal;
  /*display: inline-flex;*/
  width: 300px;
  -webkit-text-stroke-width: 1.5px;
}

#where {
  /*overflow: hidden; */
  display: table;
  /*transform: translateY(.1em);*/
  font-family: 'Bauhaus Light BT';
  font-weight: bolder;
  color: lightslategrey;
  -moz-text-align-last: justify;
       text-align-last: justify;
  white-space: nowrap;
}

#what {
  font-family: 'Bauhaus Light BT';
  font-weight: bolder;
  color: darkslategrey;
  margin: 0 0 0 0;
  line-height: 1.3em;
  text-align: justify;
  -moz-text-align-last: justify;
       text-align-last: justify;
  white-space: nowrap;
}

.showFullWhere{
  -webkit-animation-name: scrollLeftRightWhere;
          animation-name: scrollLeftRightWhere;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal
}

.showFullWhat{
  -webkit-animation-name: scrollLeftRightWhat;
          animation-name: scrollLeftRightWhat;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal
}


@keyframes scroll-text {
  /* Startposition: 2 Sekunden Pause (ca. 0% bis 30% bei 7s Gesamtdauer) */
  0%, 30% {
    transform: translateX(0%);
  }
  /* Endposition: 2 Sekunden Pause am Ende (70% bis 100%) */
  70%, 100% {
    transform: translateX(calc(-100% + 100px));
  }
}


@-webkit-keyframes fadeDisplayOut{
  95% {
    opacity: 0;
    -webkit-transform: scale(0.001);
            transform: scale(0.001);
  }
  100%{
    display: none;
  }
}

@keyframes fadeDisplayOut{
  95% {
    opacity: 0;
    -webkit-transform: scale(0.001);
            transform: scale(0.001);
  }
  100%{
    display: none;
  }
}

@-webkit-keyframes fadeDisplayIn{
  0% {
/*    opacity: 0;
    transform: scale(0.001);*/
    display: block;
  }
  100%{
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes fadeDisplayIn{
  0% {
/*    opacity: 0;
    transform: scale(0.001);*/
    display: block;
  }
  100%{
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes scrollLeftRight{
  0%, 100%{
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  10%, 90%{
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  50%{
    -webkit-transform: translateX(calc(-100% + 591px));
            transform: translateX(calc(-100% + 591px));  /*transform: translateX(-100%) translateX(591px); works opposite direction in IE11!!!*/
  }
}

@keyframes scrollLeftRight{
  0%, 100%{
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  10%, 90%{
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  50%{
    -webkit-transform: translateX(calc(-100% + 591px));
            transform: translateX(calc(-100% + 591px));  /*transform: translateX(-100%) translateX(591px); works opposite direction in IE11!!!*/
  }
}

@-webkit-keyframes scrollLeftRightWhere{
  0%, 100%{
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  10%, 90%{
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  50%{
    -webkit-transform: translateX(calc(-100% + 591px));
            transform: translateX(calc(-100% + 591px));  /*transform: translateX(-100%) translateX(591px); works opposite direction in IE11!!!*/
  }
}

@keyframes scrollLeftRightWhere{
  0%, 100%{
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  10%, 90%{
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  50%{
    -webkit-transform: translateX(calc(-100% + 591px));
            transform: translateX(calc(-100% + 591px));  /*transform: translateX(-100%) translateX(591px); works opposite direction in IE11!!!*/
  }
}


@-webkit-keyframes scrollLeftRightWhat{
  0%, 100%{
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  10%, 90%{
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  50%{
    -webkit-transform: translateX(calc(-100% + 591px));
            transform: translateX(calc(-100% + 591px));  /*transform: translateX(-100%) translateX(591px); works opposite direction in IE11!!!*/
  }
}

@keyframes scrollLeftRightWhat{
  0%, 100%{
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  10%, 90%{
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  50%{
    -webkit-transform: translateX(calc(-100% + 591px));
            transform: translateX(calc(-100% + 591px));  /*transform: translateX(-100%) translateX(591px); works opposite direction in IE11!!!*/
  }
}




svg {
  position: absolute;
  z-index: 1;
}

svg line, svg text {
    opacity: 0;
    stroke-width: 2;
}

svg path{
  -webkit-animation-fill-mode: forwards, forwards;
          animation-fill-mode: forwards, forwards;
}



.custom_OpacityBlend{
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; 
  -webkit-animation-iteration-count: infinite; 
          animation-iteration-count: infinite;
}


@keyframes rotate_round { 
  0% {
              transform: rotate(0deg);
              -webkit-transform: rotate(0deg);
  }
  50% {
              transform: rotate(360deg);
              -webkit-transform: rotate(360deg);
  }
  100% {
              transform: rotate(360deg);
              -webkit-transform: rotate(360deg);
  }
}


@keyframes Fade2PicsStabilize { 
  0%, 100% {
      opacity: 0;
  }
  10%, 90% {
      opacity: 0;
  }
  30%, 70% {
      opacity: 1;
  }
}

@-webkit-keyframes Fade2PicsStabilize { 
  0%, 100% {
      opacity: 0;
  }
  10%, 90% {
      opacity: 0;
  }
  40%, 60% {
      opacity: 1;
  }
}


@-webkit-keyframes Fade2Pics { 
  0%, 100% {
      opacity: 0;
  }
  50% {
      opacity: 1;
  }
}


@keyframes Fade2Pics { 
  0%, 100% {
      opacity: 0;
  }
  50% {
      opacity: 1;
  }
}

@-webkit-keyframes Fade3Pics { 
  0%, 66%, 100% {
      opacity: 0;
  }
  33% {
      opacity: 1;
  }
}

@keyframes Fade3Pics { 
  0%, 66%, 100% {
      opacity: 0;
  }
  33% {
      opacity: 1;
  }
}

@-webkit-keyframes Fade4Pics { 
  0%, 50%, 100% {
      opacity: 0;
  }
  25% {
      opacity: 1;
  }
}

@keyframes Fade4Pics { 
  0%, 50%, 100% {
      opacity: 0;
  }
  25% {
      opacity: 1;
  }
}

@-webkit-keyframes Fade5Pics { 
  0%, 40%, 100% {
      opacity: 0;
  }
  20% {
      opacity: 1;
  }
}

@keyframes Fade5Pics { 
  0%, 40%, 100% {
      opacity: 0;
  }
  20% {
      opacity: 1;
  }
}

@-webkit-keyframes Fade6Pics { 
  0%, 33%, 100% {
      opacity: 0;
  }
  16% {
      opacity: 1;
  }
}

@keyframes Fade6Pics { 
  0%, 33%, 100% {
      opacity: 0;
  }
  16% {
      opacity: 1;
  }
}

@-webkit-keyframes Fade7Pics { 
  0%, 29%, 100% {
      opacity: 0;
  }
  5%,24% {
      opacity: 1;
  }
}

@keyframes Fade7Pics { 
  0%, 29%, 100% {
      opacity: 0;
  }
  5%,24% {
      opacity: 1;
  }
}

@-webkit-keyframes Fade8Pics { 
  0%, 25%, 100% {
      opacity: 0;
  }
  12.5% {
      opacity: 1;
  }
}

@keyframes Fade8Pics { 
  0%, 25%, 100% {
      opacity: 0;
  }
  12.5% {
      opacity: 1;
  }
}

@-webkit-keyframes Fade9Pics { 
  0%, 22.22%, 100% {
      opacity: 0;
  }
  11.11% {
      opacity: 1;
  }
}

@keyframes Fade9Pics { 
  0%, 22.22%, 100% {
      opacity: 0;
  }
  11.11% {
      opacity: 1;
  }
}

@-webkit-keyframes Fade10Pics { 
  0%, 20%, 100% {
      opacity: 0;
  }
  10% {
      opacity: 1;
  }
}

@keyframes Fade10Pics { 
  0%, 20%, 100% {
      opacity: 0;
  }
  10% {
      opacity: 1;
  }
}

@-webkit-keyframes Fade11Pics { 
  0%, 18.18%, 100% {
      opacity: 0;
  }
  9.09% {
      opacity: 1;
  }
}

@keyframes Fade11Pics { 
  0%, 18.18%, 100% {
      opacity: 0;
  }
  9.09% {
      opacity: 1;
  }
}

@-webkit-keyframes FadeIn { 
  0%, 50% {
      opacity: 0;
  }
  5%, 45% {
      opacity: 1;
  }
}

@keyframes FadeIn { 
  0%, 50% {
      opacity: 0;
  }
  5%, 45% {
      opacity: 1;
  }
}

@-webkit-keyframes FadeIn2 { to {opacity: 0.75;} }

@keyframes FadeIn2 { to {opacity: 0.75;} }


@-webkit-keyframes growStroke { 
  50% {
      stroke-width: 15;
  }
}

@keyframes growStroke { 
  50% {
      stroke-width: 15;
  }
}

@-webkit-keyframes FadeIn3 { 
  0%, 40%, 100% {
      opacity: 0;
  }
  10%, 20% {
      opacity: 1;
  }
}

@keyframes FadeIn3 { 
  0%, 40%, 100% {
      opacity: 0;
  }
  10%, 20% {
      opacity: 1;
  }
}

.growStrokeAnim {  /*animation route lines on click identify;*/
  -webkit-animation-name : growStroke !important;
          animation-name : growStroke !important;
  -webkit-animation-duration : 2s !important;
          animation-duration : 2s !important;
  -webkit-animation-timing-function : ease-in-out !important;
          animation-timing-function : ease-in-out !important;
  -webkit-animation-iteration-count : 1 !important;
          animation-iteration-count : 1 !important;
}

.StrokeFillAnim {
  -webkit-transition-property: fill-opacity, stroke-width;
  -o-transition-property: fill-opacity, stroke-width;
  transition-property: fill-opacity, stroke-width;
  -webkit-animation-timing-function: ease-in-out, linear;
          animation-timing-function: ease-in-out, linear;
  -webkit-animation-fill-mode: forwards, forwards;
          animation-fill-mode: forwards, forwards;
  fill-opacity: 0;
}

.drawfadeStrokeAnim {
  -webkit-animation-name: drawStrokes, fadeStrokes !important;
          animation-name: drawStrokes, fadeStrokes !important;
  -webkit-animation-duration : 5s, 2s !important;
          animation-duration : 5s, 2s !important;
  -webkit-animation-delay: 0s, 5s;
          animation-delay: 0s, 5s;
  -webkit-animation-timing-function: ease-in-out, linear;
          animation-timing-function: ease-in-out, linear;
  -webkit-animation-fill-mode: backwards, forwards;
          animation-fill-mode: backwards, forwards;
  -webkit-animation-iteration-count : 1 !important;
          animation-iteration-count : 1 !important; 
  fill-opacity: 0;
}

@-webkit-keyframes drawStrokes {to {stroke-dashoffset: 0;}}

@keyframes drawStrokes {to {stroke-dashoffset: 0;}}

@-webkit-keyframes fadeStrokes {
  to {stroke-dashoffset: 0;}
  to {stroke-width: 0;}  
}

@keyframes fadeStrokes {
  to {stroke-dashoffset: 0;}
  to {stroke-width: 0;}  
}

@-webkit-keyframes fillShape_permanentStrokes { to {fill-opacity: 1;}}

@keyframes fillShape_permanentStrokes { to {fill-opacity: 1;}}

@-webkit-keyframes fillShape_fadeStrokes { to {fill-opacity: 1;} to {stroke-width: 0;}}

@keyframes fillShape_fadeStrokes { to {fill-opacity: 1;} to {stroke-width: 0;}}

@-webkit-keyframes fill_palegoldenrod { to {fill: hsla(55, 67%, 80%, 1);}}

@keyframes fill_palegoldenrod { to {fill: hsla(55, 67%, 80%, 1);}}

#logocam{
  -webkit-animation-name: logocam_out;
          animation-name: logocam_out;
  -webkit-animation-timing-function: cubic-bezier(0.71, 0.11, 0.9, 0.47);
          animation-timing-function: cubic-bezier(0.71, 0.11, 0.9, 0.47);
  -webkit-animation-duration: 12.5s;
          animation-duration: 12.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  /*transform: scale(1.8);*/
  /* transform: scale(0.55) translateX(-31%); */
  -webkit-transform-origin: 140% center;
      -ms-transform-origin: 140% center;
          transform-origin: 140% center;
  /*transition: 15s;*/
  /*transition-timing-function: cubic-bezier(1, 0.06, 0.86, 0.18);*/
}

#kurzski{
  -webkit-animation-name: drawStrokes;
          animation-name: drawStrokes;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-delay: 8s;
          animation-delay: 8s;
  stroke-dasharray: 960;
  stroke-dashoffset: 960;
}

#kurzski path{
  -webkit-animation-name: drawStrokes, fillShape_permanentStrokes;
          animation-name: drawStrokes, fillShape_permanentStrokes;
  -webkit-animation-fill-mode: forwards, forwards;
          animation-fill-mode: forwards, forwards;
  -webkit-animation-duration: 5s, 2s;
          animation-duration: 5s, 2s;
  -webkit-animation-delay: 8s, 13s;
          animation-delay: 8s, 13s;
}

#ksWelcome{
  background-color: rgba(255, 255, 255, .9);
  width: 63vmin;
  height: 63vmin;
  padding: .6em;
  max-height: 650px;
  max-width: 650px;
  font-size: 3vmin !important;
}

#ksWelcome2{
  background-color: rgba(255, 255, 255, .9);
  width: 650px;
  height: 650px;
  padding: 30 25;
}

#ksLogoWelcome{
  left: 24.5%;
  position: absolute;
  top: 6%;
  margin: 0;
  font-size: 1em;
  font-weight: lighter;
  -webkit-animation-name: FadeIn2;
          animation-name: FadeIn2;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-delay: 13s;
          animation-delay: 13s;
  opacity: 0;
}

#ksWelcome svg{
  position: relative;
  width: 100%;
  height: 100%;
}

.ksLogo_Teaser{
  position: relative;
  top: -66%;
  width: 100%;
  padding: 0 8%;
  overflow: hidden;
  height: 0;
  -webkit-animation-name: height300;
          animation-name: height300;
  -webkit-animation-delay: 14s;
          animation-delay: 14s;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.ksLogo_Teaser h1{
  font-weight: lighter;
  text-align: justify;
  -moz-text-align-last: justify;
       text-align-last: justify;
  overflow: hidden;
  margin: 0;
  display: inline-block;
  width: 100%;
}

#tease1{
  font-size: 1em;
  margin-bottom: .3em;
}

#tease2{
  font-size: .84em;
}

#tease3{
  font-size: .7em;
}

.ksLogo_Teaser ul{
  white-space: nowrap;
  width: 100%;
  margin: 1em auto;
  -moz-text-align-last: left;
       text-align-last: left;
/*  padding-inline-start: inherit;
  padding-inline-end: inherit;*/
}

.ksLogo_Teaser li {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  /*display: table;*/
  margin: auto;
  font-size: .7em;
}

.ksLogo_Teaser li::before {
    content: "■ ";
    font-size: .7em;
}

#QuickNote1::before {
    color: gray;
}

#QuickNote2::before {
    color: gray;
}

#QuickNote3::before {
    color: gray;
}

#ksWelcome i {
  width: 2em;
  height: 2em;
}

#ksWelcome i h1 {
  margin-left: 2em;
  font-size: 1em;
}

@-webkit-keyframes height300 { to {height: 300px;}}

@keyframes height300 { to {height: 300px;}}


.fadeInAndBounce{
  -webkit-animation-name: FadeIn2, jump;
          animation-name: FadeIn2, jump;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear, ease-out;
          animation-timing-function: linear, ease-out;
  -webkit-animation-duration: 1s, 0.5s;
          animation-duration: 1s, 0.5s;
  -webkit-animation-delay: ,23s;
          animation-delay: ,23s;
}

.fadeInAndBounce2{
  opacity: 0;
  -webkit-animation-name: FadeIn2, jump;
          animation-name: FadeIn2, jump;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear, ease-out;
          animation-timing-function: linear, ease-out;
  -webkit-animation-duration: 1s, 0.5s;
          animation-duration: 1s, 0.5s;
  -webkit-animation-delay: 15s, 16s;
          animation-delay: 15s, 16s;
}

.swallowWelcome{
  -webkit-animation-name: bounce;
          animation-name: bounce;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;  
}

@-webkit-keyframes bounce {
   30% { -webkit-transform: scale(1.0) translateY(.5em); transform: scale(1.0) translateY(.5em); }
   50% { -webkit-transform: scale(1.2) translateY(.5em); transform: scale(1.2) translateY(.5em); }
   55% { -webkit-transform: scale(1.1) translateY(.5em); transform: scale(1.1) translateY(.5em); }
   60% { -webkit-transform: scale(1.2) translateY(.5em); transform: scale(1.2) translateY(.5em); }
   90% { -webkit-transform: scale(1.0) translateY(.5em); transform: scale(1.0) translateY(.5em); }
}

@keyframes bounce {
   30% { -webkit-transform: scale(1.0) translateY(.5em); transform: scale(1.0) translateY(.5em); }
   50% { -webkit-transform: scale(1.2) translateY(.5em); transform: scale(1.2) translateY(.5em); }
   55% { -webkit-transform: scale(1.1) translateY(.5em); transform: scale(1.1) translateY(.5em); }
   60% { -webkit-transform: scale(1.2) translateY(.5em); transform: scale(1.2) translateY(.5em); }
   90% { -webkit-transform: scale(1.0) translateY(.5em); transform: scale(1.0) translateY(.5em); }
}

@-webkit-keyframes bounce2 {
   30% { -webkit-transform: scale(1.0) translateY(.5em); transform: scale(1.0) translateY(.5em); }
   50% { -webkit-transform: scale(1.5) translateY(.5em); transform: scale(1.5) translateY(.5em); }
   55% { -webkit-transform: scale(1.4) translateY(.5em); transform: scale(1.4) translateY(.5em); }
   60% { -webkit-transform: scale(1.5) translateY(.5em); transform: scale(1.5) translateY(.5em); }
   90% { -webkit-transform: scale(1.0) translateY(.5em); transform: scale(1.0) translateY(.5em); }
}

@keyframes bounce2 {
   30% { -webkit-transform: scale(1.0) translateY(.5em); transform: scale(1.0) translateY(.5em); }
   50% { -webkit-transform: scale(1.5) translateY(.5em); transform: scale(1.5) translateY(.5em); }
   55% { -webkit-transform: scale(1.4) translateY(.5em); transform: scale(1.4) translateY(.5em); }
   60% { -webkit-transform: scale(1.5) translateY(.5em); transform: scale(1.5) translateY(.5em); }
   90% { -webkit-transform: scale(1.0) translateY(.5em); transform: scale(1.0) translateY(.5em); }
}

@-webkit-keyframes teaseandfade { 
  0%, 33%, 66%, 100% {
      opacity: 1;
  }
  17%, 50%, 83% {
      opacity: .3;
  }
   1% { -webkit-transform: scale(1.0) translateY(.5em); transform: scale(1.0) translateY(.5em); }
   4% { -webkit-transform: scale(1.2) translateY(.5em); transform: scale(1.2) translateY(.5em); }
   5% { -webkit-transform: scale(1.1) translateY(.5em); transform: scale(1.1) translateY(.5em); }
   6% { -webkit-transform: scale(1.2) translateY(.5em); transform: scale(1.2) translateY(.5em); }
   9% { -webkit-transform: scale(1.0) translateY(.5em); transform: scale(1.0) translateY(.5em); }
}

@keyframes teaseandfade { 
  0%, 33%, 66%, 100% {
      opacity: 1;
  }
  17%, 50%, 83% {
      opacity: .3;
  }
   1% { -webkit-transform: scale(1.0) translateY(.5em); transform: scale(1.0) translateY(.5em); }
   4% { -webkit-transform: scale(1.2) translateY(.5em); transform: scale(1.2) translateY(.5em); }
   5% { -webkit-transform: scale(1.1) translateY(.5em); transform: scale(1.1) translateY(.5em); }
   6% { -webkit-transform: scale(1.2) translateY(.5em); transform: scale(1.2) translateY(.5em); }
   9% { -webkit-transform: scale(1.0) translateY(.5em); transform: scale(1.0) translateY(.5em); }
}

@-webkit-keyframes jump {
   0%, 100% { -webkit-transform: scale(1.0); transform: scale(1.0); }
   50% { -webkit-transform: scale(1.2); transform: scale(1.2); }
}

@keyframes jump {
   0%, 100% { -webkit-transform: scale(1.0); transform: scale(1.0); }
   50% { -webkit-transform: scale(1.2); transform: scale(1.2); }
}

@-webkit-keyframes logocam_out { 
  0% {
      -webkit-transform: scale(1.7);
              transform: scale(1.7);
  }
  100% {
      /*transform: scale(0.55) translateX(-31%);*/
      -webkit-transform: scale(0.47) translateX(-42%);
              transform: scale(0.47) translateX(-42%);
  }
}

@keyframes logocam_out { 
  0% {
      -webkit-transform: scale(1.7);
              transform: scale(1.7);
  }
  100% {
      /*transform: scale(0.55) translateX(-31%);*/
      -webkit-transform: scale(0.47) translateX(-42%);
              transform: scale(0.47) translateX(-42%);
  }
}

.custom_ksLogoAnim_Steps{
  -webkit-animation-name: FadeIn;
          animation-name: FadeIn;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; 
}

.custom_timelapse_OpacityBlend{
/*  cursor: url(../img/icons8-clock1200-filled-50.png), auto;*/
  -webkit-animation-name: FadeIn3;
          animation-name: FadeIn3;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; 
  -webkit-animation-iteration-count: infinite; 
          animation-iteration-count: infinite;
}

.AnimRunning{
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.AnimPaused{
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

._11s{
  -webkit-animation-duration: 11s;
          animation-duration: 11s;  
}

.LogoAnim_rotate_z{
  -webkit-animation-name: rotate_z;
          animation-name: rotate_z;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; 
  -webkit-animation-delay: 9s; 
          animation-delay: 9s;
}

@-webkit-keyframes rotate_z { 
  0% {
      -webkit-transform: rotate(20deg) scale(2) translate(51px, -194px);
              transform: rotate(20deg) scale(2) translate(51px, -194px);
  }
  100% {
      -webkit-transform: rotate(0deg) scale(2) translate(0px, 0px);
              transform: rotate(0deg) scale(2) translate(0px, 0px);
  }
}

@keyframes rotate_z { 
  0% {
      -webkit-transform: rotate(20deg) scale(2) translate(51px, -194px);
              transform: rotate(20deg) scale(2) translate(51px, -194px);
  }
  100% {
      -webkit-transform: rotate(0deg) scale(2) translate(0px, 0px);
              transform: rotate(0deg) scale(2) translate(0px, 0px);
  }
}

.custom_ksLogoAnim_s_trace{
  stroke-dasharray: 386;
  stroke-dashoffset: 386;
  -webkit-animation-name: drawStrokes;
          animation-name: drawStrokes;
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s;
  -webkit-animation-timing-function: steps(22);
          animation-timing-function: steps(22);
}

.custom_ksLogoAnim_z_trace{
  stroke-dasharray: 306;
  stroke-dashoffset: 306;
  -webkit-animation-name: drawStrokes;
          animation-name: drawStrokes;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  /*opacity: .9;*/
}

.custom_ksLogoAnim_z {
    stroke-dasharray: 308;
    stroke-dashoffset: 309;
    -webkit-animation-name: StrokesZ;
            animation-name: StrokesZ;
    -webkit-animation-duration: 6s;
            animation-duration: 6s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-delay: 6s;
            animation-delay: 6s; 
    opacity: .9;
}

.custom_ksLogoAnim_z_ski {
    stroke-dasharray: 308;
    stroke-dashoffset: 309;
    -webkit-animation-name: StrokesSkiZ;
            animation-name: StrokesSkiZ;
    -webkit-animation-duration: 5.9s;
            animation-duration: 5.9s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-delay: 5.98s;
            animation-delay: 5.98s; 
    opacity: .9;
}

.custom_ksLogoAnim_z2 {
/*    stroke-dasharray: 306;
    stroke-dashoffset: 306;*/
    -webkit-animation-name: StrokesZZ;
            animation-name: StrokesZZ;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-delay: 11s;
            animation-delay: 11s; 
    opacity: 0;
}

@-webkit-keyframes StrokesZ {
  25%, 50% {
    stroke-dashoffset: 0;
    stroke-dasharray: 306;
    opacity: .9;
  }
  80% {
    stroke-dashoffset: 150;
    stroke-dasharray: 120;
    opacity: .9;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 150;
    stroke-dasharray: 120;
  }
}

@keyframes StrokesZ {
  25%, 50% {
    stroke-dashoffset: 0;
    stroke-dasharray: 306;
    opacity: .9;
  }
  80% {
    stroke-dashoffset: 150;
    stroke-dasharray: 120;
    opacity: .9;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 150;
    stroke-dasharray: 120;
  }
}

@-webkit-keyframes StrokesSkiZ {
  25%, 50% {
    stroke-dashoffset: 0;
    opacity: .9;
  }
  55%, 100% {
    opacity: 0;
  }
}

@keyframes StrokesSkiZ {
  25%, 50% {
    stroke-dashoffset: 0;
    opacity: .9;
  }
  55%, 100% {
    opacity: 0;
  }
}

@-webkit-keyframes StrokesZZ { to{opacity: 1;}}

@keyframes StrokesZZ { to{opacity: 1;}}

@-webkit-keyframes Steps { 
  0%, 50% {
      opacity: 0;
  }
  20%, 30% {
      opacity: 1;
  }
}

@keyframes Steps { 
  0%, 50% {
      opacity: 0;
  }
  20%, 30% {
      opacity: 1;
  }
}



#seg1-1 {
  -webkit-animation: 
    typing1 20s steps(20, end) 0s,
    typing2 20s steps(20, end) 0s;
          animation: 
    typing1 20s steps(20, end) 0s,
    typing2 20s steps(20, end) 0s; /* include full loop */
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  /*animation-play-state: paused;*/
}

#seg2-1 {
  -webkit-animation: 
    typing3 20s steps(20, end) 0s;
          animation: 
    typing3 20s steps(20, end) 0s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  margin-top: -1.23em;
}

/* The typing effect */
@-webkit-keyframes typing1 {
  from { width: 0%; opacity: 1 }
  10% { width: 100% }
  59% { width: 100%; opacity: 1 }
  60% { width: 100%; opacity: 0 }
  100% { width: 100%; opacity: 0 }
}
@keyframes typing1 {
  from { width: 0%; opacity: 1 }
  10% { width: 100% }
  59% { width: 100%; opacity: 1 }
  60% { width: 100%; opacity: 0 }
  100% { width: 100%; opacity: 0 }
}

@-webkit-keyframes typing2 {
/*   from { transform: translateX(0) } */
  50% { -webkit-transform: translateX(0); transform: translateX(0) }
  60% {-webkit-transform: translateX(-3.91em);transform: translateX(-3.91em);}
  100% {-webkit-transform: translateX(-3.91em);transform: translateX(-3.91em);}
}

@keyframes typing2 {
/*   from { transform: translateX(0) } */
  50% { -webkit-transform: translateX(0); transform: translateX(0) }
  60% {-webkit-transform: translateX(-3.91em);transform: translateX(-3.91em);}
  100% {-webkit-transform: translateX(-3.91em);transform: translateX(-3.91em);}
}

@-webkit-keyframes typing3 {
  0% { width: 38%; opacity: 0 }
  59% { width: 38%; opacity: 0 }
  60% { width: 38%; opacity: 1 }
  65% { letter-spacing: 0em }  
  70% { width: 100%; letter-spacing: 0em }
  100% { width: 100%; letter-spacing: 0em }
}

@keyframes typing3 {
  0% { width: 38%; opacity: 0 }
  59% { width: 38%; opacity: 0 }
  60% { width: 38%; opacity: 1 }
  65% { letter-spacing: 0em }  
  70% { width: 100%; letter-spacing: 0em }
  100% { width: 100%; letter-spacing: 0em }
}

@-webkit-keyframes webcam {
/*   from { transform: translateX(0) } */
  0%, 100% {background-position: 0 0;}
  50% {background-position: 100% 0;}
}

@keyframes webcam {
/*   from { transform: translateX(0) } */
  0%, 100% {background-position: 0 0;}
  50% {background-position: 100% 0;}
}

@-webkit-keyframes webcamvert {
/*   from { transform: translateY(0) } */
  0%, 100% {background-position: 0 0;}
  50% {background-position: 0 100%;}
}

@keyframes webcamvert {
/*   from { transform: translateX(0) } */
  0%, 100% {background-position: 0 0;}
  50% {background-position: 0 100%;}
}

#countdowntimer:before {
  content: '';
  /* font-family: 'Arial', sans-serif;
  font-size: 5em;
  color: white; */
  animation: countdown 5s forwards;
  animation-delay: 2s;
}

@keyframes countdown {
  0% {
    content: '5';
  }
  20% {
    content: '4';
  }
  40% {
    content: '3';
  }
  60% {
    content: '2';
  }
  80% {
    content: '1';
  }
  100% {
    content: '';
  }
}

@-webkit-keyframes countdown {
  0% {
    content: '5';
  }
  20% {
    content: '4';
  }
  40% {
    content: '3';
  }
  60% {
    content: '2';
  }
  80% {
    content: '1';
  }
  100% {
    content: '';
  }
}


.activedaysAnim {
  opacity: 0;
  animation-duration: 10s;
  animation-delay: calc(var(--animation-order) * 700ms);
  animation-timing-function: ease-in;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

.out {
  animation-name: teaseDaysFadeOut;  
}

.in {
  animation-name: teaseDaysFadeIn;  
}

.out2 {
  animation-name: teaseDaysFadeOut2;  
}

.in2 {
  animation-name: teaseDaysFadeIn2;  
}

@keyframes teaseDaysFadeOut {
  0% {
    opacity: 0;
    transform: rotate(-25deg) scale(1.5);
  }
  
  2% {
    opacity: 1;
  }

  10% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }

  15% {
    opacity: 0;
  }
}


@keyframes teaseDaysFadeIn {
  0% {
    opacity: 0;
    transform: rotate(-25deg) scale(1.5);
  }
  
  2% {
    opacity: 1;
  }

  10% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }

  90% {
    opacity: 1;
  }

  95% {
    opacity: 0;
  }
}


@keyframes teaseDaysFadeOut2 {
  0% {
    opacity: 0;
    transform: rotate(-25deg) scale(1.5);
  }
  
  1% {
    opacity: 1;
  }

  4% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }

  6% {
    opacity: 0;
  }
}


@keyframes teaseDaysFadeIn2 {
  0% {
    opacity: 0;
    transform: rotate(-25deg) scale(1.5);
  }
  
  1% {
    opacity: 1;
  }

  5% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }

  90% {
    opacity: 1;
  }

  95% {
    opacity: 0;
  }
}

/* ---- grid ---- */

.grid {
  background: #fff;
  top: 7em;
  margin-bottom: 150px;
  min-height: 100vh;  /* isotope plugs height of container... observation 0 the header jumps down and up again  */
  position: relative;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid.are-images-unloaded {
  opacity: 0;
}

/* hide by default */
.grid.are-images-unloaded .image-grid-item {
  opacity: 0;
}

.page-load-status {
  display: none;
  /* margin-top: 15vh; */
  padding-top: 20px;
  border-top: 1px solid #DDD;
  text-align: center;
  color: #777;
  position: static;
  bottom: -183px;
  width: 100%;
}



/* ---------- .loader-ellips ---------- */

.loader-ellips {
  font-size: 20px; /* change size here */
  position: relative;
  width: 4em;
  height: 1em;
  top: -10px;
/*  margin: 10px auto;*/
}

.loader-ellips__dot {
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  background: #555; /* change color here */
  position: absolute;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.loader-ellips__dot:nth-child(1),
.loader-ellips__dot:nth-child(2) {
  left: 0;
}
.loader-ellips__dot:nth-child(3) { left: 1.5em; }
.loader-ellips__dot:nth-child(4) { left: 3em; }

@-webkit-keyframes reveal {
  from { -webkit-transform: scale(0.001); transform: scale(0.001); }
  to { -webkit-transform: scale(1); transform: scale(1); }
}

@keyframes reveal {
  from { -webkit-transform: scale(0.001); transform: scale(0.001); }
  to { -webkit-transform: scale(1); transform: scale(1); }
}

@-webkit-keyframes slide {
  to { -webkit-transform: translateX(1.5em); transform: translateX(1.5em) }
}

@keyframes slide {
  to { -webkit-transform: translateX(1.5em); transform: translateX(1.5em) }
}

.loader-ellips__dot:nth-child(1) {
  -webkit-animation-name: reveal;
          animation-name: reveal;
}

.loader-ellips__dot:nth-child(2),
.loader-ellips__dot:nth-child(3) {
  -webkit-animation-name: slide;
          animation-name: slide;
}

.loader-ellips__dot:nth-child(4) {
  -webkit-animation-name: reveal;
          animation-name: reveal;
  animation-direction: reverse;
}



/* ---- .grid-item ---- */

/*.stamp {
  position: sticky !important;
  border-color: #c1b06b !important;
  border-style: solid;
  z-index: 10;
  transform-origin: top;
  -webkit-transform-origin: top;
      -ms-transform-origin: top;
          transform-origin: top;
}*/

.anim{
  -webkit-transition: .5s ease-in;
  -o-transition: .5s ease-in;
  transition: .5s ease-in;
}

.grid-item {
  float: left;
  width: 300px;
  height: 300px;
  border: 1px solid #333;
  border-color: hsla(0, 0%, 0%, 0.7);
  background-color: white; 
  position: relative;
  overflow: hidden;
  display: grid;  /* ---- uses space with advantage when generating static html ---- */
}


.width4-3 {
  width: 450px;
  height: 360px;
}

.width3-4 {
  width: 360px;
  height: 450px;
}

.width16-9 {
  width: 600px;
  height: 360px;
}

.width9-16 {
  width: 360px;
  height: 600px;
}

.width2x { width: 600px; }
.height2x { height: 600px; }
.grid-item--modalheight2x { height: 600px; }


.detail{
  /*display: none;*/
}

.sold{
  border-color: hsla(0, 53%, 27%, 0.7);
  border-width: 2px;
  opacity: .7;
}

.free_gone{
  border-color: hsla(0, 53%, 27%, 0.7);
  border-width: 2px;
  opacity: .7;
}

.tempNoOpacity{
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
  opacity: 1;  
}

.descStatus{
  /*display: none;*/
  opacity: 0;
  position: relative;
  top: 10%;
  width: 100%;
  /*height: 50%;*/
  padding: 10px;
  text-align: center;
  font-size: 2em;
  /*text-shadow: 0px 0px 10px rgba(255,255,255,0.8);*/
  -webkit-transform: translateY(50%);
      -ms-transform: translateY(50%);
          transform: translateY(50%);
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

.descItem{
  /*display: none;*/
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 0px;
  padding: 10px 20px;
  background: rgba(251, 251, 251, 0.75);
  text-align: center;
  font-size: 23px;
  line-height: 1.05;    /* was 1.18; */ 
  /*text-shadow: 0px 0px 10px rgba(255,255,255,0.8);*/
  -webkit-transform: translateY(58%);
      -ms-transform: translateY(58%);
          transform: translateY(58%);
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

.useGPU{
  /* performance improve for image-blur as per https://stackoverflow.com/questions/31713468/css-blur-filter-performance */
  -webkit-transform: translateY(0%) translateZ(0) translate3d(0,0,0);
      -ms-transform: translateY(0%) translateZ(0) translate3d(0,0,0);
          transform: translateY(0%) translateZ(0) translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
      -ms-backface-visibility: hidden;  
          backface-visibility: hidden;
}

.descItemUp{
  opacity: 1;
  height: 100% !important;
  overflow-y: hidden;
  /* performance improve for image-blur as per https://stackoverflow.com/questions/31713468/css-blur-filter-performance */
  -webkit-transform: translateY(0%) translateZ(0) translate3d(0,0,0);
      -ms-transform: translateY(0%) translateZ(0) translate3d(0,0,0);
          transform: translateY(0%) translateZ(0) translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
      -ms-backface-visibility: hidden;  
          backface-visibility: hidden;
}

.descItemUpFixed{
  opacity: 1 !important;
  height: 100% !important;
  /* performance improve for image-blur as per https://stackoverflow.com/questions/31713468/css-blur-filter-performance */
  -webkit-transform: translateY(0%) translateZ(0) translate3d(0,0,0) !important;
      -ms-transform: translateY(0%) translateZ(0) translate3d(0,0,0) !important;
          transform: translateY(0%) translateZ(0) translate3d(0,0,0) !important;
  -webkit-backface-visibility: hidden;
      -ms-backface-visibility: hidden;  
          backface-visibility: hidden;
}


.tiltleUpdate{
  font-size: smaller;
  background: gold;
  margin: 10px;
  color: antiquewhite;
}


.grid-item:not(.width2x) .tiltle{
  /*width: 90%;*/
}

.descItemDetail{
  opacity: 0;
  /*height: 80%;*/
  /*overflow-y: auto;*/
  margin: 10px auto;
  padding: 0px;
  text-align: justify;  /*schön, aber nur mit automatischer Worttrennungung*/
  -ms-hyphens: auto;
      hyphens: auto;        /*Chrome mag hyphens nicht! Nerv!*/
  -webkit-hyphens: auto;
  overflow-wrap: break-word;  /*zu lange Wörter brechen...Fallback hyphens sollte das aber overrulen wo geht*/
}

.ImageThumbTiltle, .ImageThumbDesc{
  float: left;
  display: none;
  margin-right: 10px;
  height: 24px;         /*starting point for minimum height when processed by javascript*/
/*  border: solid #8796b1 1px;*/
}

.htmlContainerAnim{
  height: 100%;
  width: 100%;
  /*transform: translateY(-100%);*/
  -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
          transform-origin: top left;
  position: absolute;
  overflow: hidden;
}

.pseudoA{
  /*text-decoration: underline;*/
  font-weight: bold;
  color: darkgray;
  cursor: pointer;
/*  text-shadow: 0 0 20px whitesmoke;*/
  z-index: 10;
  position: relative;
  /* performance improve for image-blur as per https://stackoverflow.com/questions/31713468/css-blur-filter-performance */
  -webkit-transform: translateY(0%) translateZ(0) translate3d(0,0,0);
      -ms-transform: translateY(0%) translateZ(0) translate3d(0,0,0);
          transform: translateY(0%) translateZ(0) translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
      -ms-backface-visibility: hidden;  
          backface-visibility: hidden;
}

.offroute{
  background: url(../img/icons8-marker-off-50.png) no-repeat center /50px 44px;
  width: 50px;
  display: block;
  height: 50px;
  position: absolute;
  /*mix-blend-mode: soft-light;*/
  -webkit-filter: drop-shadow(0 0 4px #fff);
          filter: drop-shadow(0 0 4px #fff);
  opacity: .5;
  z-index: 1;
}

#offrouteModal{
  opacity: 0;
  background: url(../img/icons8-marker-off-50.png) no-repeat center /70px 60px;
  width: 70px;
  display: block;
  height: 70px;
  position: absolute;
  -webkit-filter: drop-shadow(0 0 4px #fff);
          filter: drop-shadow(0 0 4px #fff);
  top: 0;
  z-index: 1;
}

#timelapseModal{
  background: url(../img/play_handdrawn.png) no-repeat center /90%;
  width: 70px;
  display: block;
  height: 70px;
  position: absolute;
  -webkit-filter: drop-shadow(0 0 4px #fff);
          filter: drop-shadow(0 0 4px #fff);
  top: 0;
}

.InfoSymbolModal{
  width: 70px;
  display: block;
  height: 70px;
  position: absolute;
  -webkit-filter: drop-shadow(0 0 4px #fff);
          filter: drop-shadow(0 0 4px #fff);
  opacity: .5;
  top: 0;
}

.visible{
  opacity: 1;
}

.close{
  background: url(../img/icons8-multiply-26.png) center;
  background-size: cover;
  width: 25px;
  height: 25px;
  display: block;
  position: absolute;
  right: 7px;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.QuickInfo{
  font-size: 17px;
}

.QuickInfoBorder{
  border: 2px solid;
  border-radius: 11px;
  padding: 1px 2px;
  color: rgb(177 176 176);
  background: rgb(172 170 170 / 20%);
  display: inline-block;
  font-weight: bold;
}

#QuickInfoModal{
  margin-left: 10px;
}

ul{
  float: left;
  width: 27%;
  display: block;
  margin-top: .3em;
  -webkit-padding-start: .1em;
          padding-inline-start: .1em;
  -webkit-padding-end: .1em;
          padding-inline-end: .1em;
  -webkit-margin-before: 0;
          margin-block-start: 0;
  -moz-text-align-last: justify;
       text-align-last: justify;
}

ul li{
  display: block;
}

ul li a:hover{
  opacity: .7;
  color: #886262ee;
}

ul li a {
  text-decoration: none;
  color: #424242ee;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

ul li a p {
  -webkit-margin-before: .1em;
          margin-block-start: .1em;
  -webkit-margin-after: .1em;
          margin-block-end: .1em;
}

#navpic, #floehe, #ausstellung, #hausundmarkt, #termine {
  height: 98%;
  width: 73%;
  float: left;
  font-size: 1.5em;
}

#navpic, #ausstellung{
  background: url(../img/600px/20181126_152530_stitch.jpg) 
  right/100% no-repeat;
  background-size: contain;  
}

#ausstellung{
  background: url(../img/600px/20181126_152530_stitch.jpg) right 270px /100% no-repeat;
}

#floehe, #ausstellung, #hausundmarkt, #termine {
  display: none;
  overflow-y: scroll;
  padding-top: .6em;
}

.grid-item-inner{
  -webkit-transition: .8s ease-out;
  -o-transition: .8s ease-out;
  transition: .8s ease-out;
  width: 100%;
  height: 100%;
}

.item-inner{
  width: 100%;
  height: 100%;
  position: absolute;
}

@keyframes fade2grey {
   30% { filter: grayscale(0%); -webkit-filter: grayscale(0%);}
   45% { filter: grayscale(100%); -webkit-filter: grayscale(100%);}
   70% { filter: grayscale(100%); -webkit-filter: grayscale(100%);}
   85% { filter: grayscale(0%); -webkit-filter: grayscale(0%);}
   100% { filter: grayscale(0%); -webkit-filter: grayscale(0%);}
}

/* ---------------------------------------------  slightly smaller tiles, base for shifted irregular placement  -------------------------------------------------*/

.grid-item.width2x.height2x {
  width: 590px;
  height: 590px;
  margin:5px;
}

.grid-item.height2x {
  width: 290px;
  height: 590px;
  margin:5px;
}

.grid-item.width2x {
  width: 590px;
  height: 290px;
  margin:5px;
}

.grid-item.width3x {
  width: 890px;
  height: 290px;
  margin:5px;
}

.grid-item.width100 {
  width: 100%;
  height: auto;
  margin:5px;
}


.grid-item.width1200 {
  width: 1190px;
  height: auto;
  margin:5px;
}


.grid-item.width900 {
  width: 890px;
  height: auto;
  margin:5px;
}

.grid-item.width600 {
  width: 590px;
  height: auto;
  margin:5px;
}

.grid-item.width300 {
  width: 290px;
  height: auto;
  margin:5px;
}

.grid-item.height6x {
  width: 290px;
  height: 1790px;
  margin:5px;
}

.grid-item.height3x {
  width: 290px;
  height: 890px;
  margin:5px;
}


.grid-item:not(.width2x):not(.width3x):not(.width100):not(.width300):not(.width600):not(.width900):not(.width1200):not(.height2x):not(.height3x):not(.height6x){
  width: 290px;
  height: 290px;
  margin: 5px;
}


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



#help div {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 20px 0;
}

#help div i{
  width: 2em;
  height: 2em;
  display: inline-block;
  background-size: cover !important;
}

#help div i span{
  display: inline-block;
  margin-left: 2.5em;
  width: 500px;
}


#playercontrols{
  position: absolute;
  display: -ms-inline-grid;
  display: inline-grid;
  width: 100%;
  height: 10%;
  -ms-grid-columns: 25% (1fr)[4] 25%;
  grid-template-columns: 25% repeat(4, 1fr) 25%;
  -ms-flex-line-pack: start;
      align-content: start;
  mix-blend-mode: soft-light;
  -webkit-transition: .5s ease-out;
  -o-transition: .5s ease-out;
  transition: .5s ease-out;
  opacity: .0;
  z-index: 1000;
}

#playercontrols div{
  width: 7em;
  height: 7em;
  margin: auto;
  opacity: 0;
  -webkit-transition: .5s ease-in;
  -o-transition: .5s ease-in;
  transition: .5s ease-in;
}

/*#playercontrols div:nth-child(2){
  background: url(../img/icons8-skip-to-start-64.png) no-repeat;
  background-size: contain;
}*/

/*#playercontrols div:nth-child(3){
  background: url(../img/icons8-stop-64.png) no-repeat;
  background-size: contain;
}*/

#playercontrols div:nth-child(2){
  background: url(../img/icons8-play-64.png) no-repeat;
  background-size: contain;
  cursor: url(../img/icons8-play-64.png), auto;
}

#playercontrols div:nth-child(4){
  background: url(../img/icons8-fast-forward-64.png) no-repeat;
  background-size: contain;
  cursor: url(../img/icons8-fast-forward-64.png), auto;
}

#playercontrols div:nth-child(5){
  background: url(../img/icons8-multiply-52.png) no-repeat;
  background-size: contain;
  cursor: url(../img/icons8-multiply-52.png), auto;
}

/* -------------------------- custom loaded content -------------------------- */

#customImage{
  position: absolute;
  top: 0;
  -webkit-transition-property: height, opacity;
  -o-transition-property: height, opacity;
  transition-property: height, opacity;
  -webkit-transition: 40s cubic-bezier(0.82, 0.18, 0.95, 0.5);
  -o-transition: 40s cubic-bezier(0.82, 0.18, 0.95, 0.5);
  transition: 40s cubic-bezier(0.82, 0.18, 0.95, 0.5);
  /* opacity: .5; */
  background: url(../img/1971/10-19/_high/20180930_120646.png);
  background-size: cover;
  left: 0;
  right: 0;
  bottom: 0;
  /* margin: 0 0 4 4; */
  height: 36%;
}

/*#customStuff p {
    position: absolute;
    font-size: 1.5vw;
    left: 42%;
    top: 47%;
    -webkit-transition: 2s;
    -o-transition: 2s;
    transition: 2s;
    opacity: 0;
    -webkit-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
            transform: rotate(-5deg);
}*/



/* -------------------------- small scrollbar -------------------------- */

:root {
      --code-color: darkred;
      --code-bg-color: #aaaaaa;
      --code-font-size: 14px;
      --code-line-height: 1.4;
      --scroll-bar-color: #c5c5c5;
      --scroll-bar-bg-color: rgba(66, 66, 66, 0.5);
  }

  pre {
      color: var(--code-color);
      font-size: var(--code-font-size);
      line-height: var(--code-line-height);
      background-color: var(--code-bg-color);
  }


::-webkit-scrollbar-corner { background: rgba(0,0,0,0.5); }

* {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color);
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

*::-webkit-scrollbar-track {
    background: var(--scroll-bar-bg-color);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--scroll-bar-color);
    border-radius: 20px;
    border: 2px solid var(--scroll-bar-bg-color);
}

/* -------------------------- small scrollbar end -------------------------- */



/*do stuff for firefox only*/
@media(min--moz-device-pixel-ratio:0) {
  /* blur fixes - firefox slows down enormously! */ 
  .HoverCursor {
    /*filter: drop-shadow(rgb(255, 255, 255));*/
  }

}



/* -------------------------- bergsee implement -------------------------- */


._100width{
  width: 100% !important;
}

._100height{
  height: 100% !important;
}

._0padding{
  padding: 0 !important;
}

._0margin{
  margin: 0 !important;
}

.hoverScale{
  transform: scale(1.1);
}

.highlightTile{
/*  transform: scale(1.1);*/
  /*border: 3px solid rgb(51 181 229 / 40%)*/
  box-shadow: rgb(32 82 79 / 40%) 0px 2px 8px 3px;
}

.highlightInnerTile{
  transform: scale(1.1);
  /*border: 3px solid rgb(51 181 229 / 40%)*/
/*  box-shadow: rgb(32 82 79 / 40%) 0px 2px 8px 3px;*/
}

.highlightPointer{
/*  width: 25px !important;
  height: 25px !important;*/
  z-index: 10 !important;
  box-shadow:  0px 0px 5px 10px rgb(235 216 20 / 75%);
  border-radius: 20px;
}

.stamp {
  box-shadow: rgb(0 0 0 / 20%) 0px 4px 8px 0px, rgb(0 0 0 / 19%) 0px 6px 20px;
  top: 0;
  z-index: 501;
  position: sticky !important;  
}

.gpsInfo {
  width: 100%;
  bottom: 0;
  position: absolute;
  background: rgba(255 255 255 / 80%);
  z-index: 400;
  transition: 0.5s ease-in;
}

.gpsInfo:hover {
  border-top: 5px double slategrey;
}

.gpsInfo:hover #ArrowMinMax {
  opacity: 1 !important;
}

#ArrowMinMax:hover {
  opacity: 1;
}

.minimized {
  opacity: 1 !important;
  border-top: 5px double slategrey;
}

.inWidth {
  height: 110px;
}

.inHeight {
  height: 150px;
}

.gpsSummary {
  height: 110px;
  width: 100%;
  bottom: 0;
  position: absolute;
  background: rgba(255 255 255 / 80%);
  z-index: 400;
  display: none;
}

.minimizeGPSInfo {
  height: 90px !important;
}

.tilemarkerWaypoint{
  width: 20px; 
  height: 20px;
  bottom: 0; 
  position: absolute;
  z-index: 100;
}

.leaflet-custom-icon{
  margin-left: 0px !important;
  margin-top: 0px !important;
  width: 15px !important;
  height: 15px !important;
}

.leaflet-marker-icon{
  transition: 1s ease-out;
}

.leaflet-control-layers-expanded{
  padding: 1px !important;
}

/*.leaflet-bottom .leaflet-control {
    margin-bottom: 0px !important;
}*/

.translateX300{
  transform: translateX(300px) !important;
}

.width600header{
  width: 600px !important;
}

.width900header{
  width: 900px !important;
}

.width900header #who {
    width: 270px;
}

.width900header #infowrapper {
/*    max-width: 435px;*/
    max-width: 100%;
}

.showFullWhere900{
  -webkit-animation-name: scrollLeftRight435;
          animation-name: scrollLeftRight435;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal
}

@-webkit-keyframes scrollLeftRight435{
  0%, 100%{
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  10%, 90%{
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  50%{
    -webkit-transform: translateX(calc(-100% + 435px));
            transform: translateX(calc(-100% + 435px));  /*transform: translateX(-100%) translateX(591px); works opposite direction in IE11!!!*/
  }
}

.width1200header{
  width: 1200px !important;
}

.width1500header{
  width: 1500px !important;
}

.infogridinWidth{
  margin: 5px 10px 0 15%;
  display: grid;
  grid-template-columns: 60px 25px repeat(3, 1fr 25px) 1fr;
  grid-template-rows: 25px 25px 32px;
  font-size: 20px;
  color: grey;
}

.infogridinHeight{
  margin: 5px 5px 0 5px;
  display: grid;
  grid-template-columns: 60px 25px 1fr 25px 1fr;
  grid-template-rows: repeat(5, 25px);
  font-size: 20px;
  color: grey;
}

.summarygrid{
  margin: 5px 5% 0 15%;
  display: grid;
  grid-template-columns: 50px 25px repeat(3, 1fr 25px) 1fr;
  grid-template-rows: 20px 20px 20px;
  font-size: 20px;
  color: grey;
}

/* ------------ infogrid symbols Landscape ------------*/

.PSymbol.Landscape{
  grid-column: 1;
  grid-row: 1/span 2;
  text-align: start;
  font-size: smaller;
}

.PTimeMove.Landscape{
  grid-column: 3;
  grid-row: 1;
}

.PTime.Landscape{
  grid-column: 3;
  grid-row: 3;
}

.PPause.Landscape{
  grid-column: 3;
  grid-row: 2;
}

.PAlt.Landscape{
  grid-column: 9;
  grid-row: 1;
}

.PAltMinMax.Landscape{
  grid-column: 7/span 3;
  grid-row: 3;
}

.PDistSum.Landscape{
  grid-column: 5;
  grid-row: 3;
}

.PDist.Landscape{
  grid-column: 5;
  grid-row: 1;
}

.PDistFlat.Landscape{
  grid-column: 5;
  grid-row: 2;
}

.PUp.Landscape{
 grid-column: 7; 
  grid-row: 1;
}

.PDown.Landscape{
 grid-column: 7; 
  grid-row: 2;
}

.PTAir.Landscape{
  grid-column: 5; 
  grid-row: 3;
}

.PTWater.Landscape{
  grid-column: 7; 
  grid-row: 3;
}

.pad{
  padding-right: 5px;
  margin: auto;
}

.totLine{
  border-top: solid 2px;
}

.PTrackStat.Landscape {
  grid-column: 1;
  grid-row: 3;
}

.PTimeMoveSym.Landscape {
  background: url(../img/icons8-clockmove-25.png) no-repeat center;
  background-size: contain !important;
  grid-column: 2;
  grid-row: 1;
}

.PTimeSym.Landscape {
  background: url(../img/icons8-clock-25.png) no-repeat center;
  background-size: contain !important;
  grid-column: 2;
  grid-row: 3;
}

.PPauseSym.Landscape {
  background: url(../img/icons8-stopwatch-25.png) no-repeat center;
  background-size: contain !important;
  grid-column: 2;
  grid-row: 2;
}


.PDistSumSym.Landscape {
  background: url(../img/icons8-rulersum-25.png) no-repeat center;
  background-size: contain !important;
  grid-column: 4;
  grid-row: 3;
}

.PDistSym.Landscape {
  background: url(../img/icons8-rulerdiag-25.png) no-repeat center;
  background-size: contain !important;
  grid-column: 4;
  grid-row: 1;
}

.PDistFlatSym.Landscape {
  background: url(../img/icons8-ruler-25.png) no-repeat center;
  background-size: contain !important;
  grid-column: 4;
  grid-row: 2;
}

.PAltSym.Landscape {
  background: url(../img/icons8-mountains-25.png) no-repeat center;
  background-size: contain !important;
  grid-column: 8;
  grid-row: 1;
}

.PAltMinMaxSym.Landscape {
  background: url(../img/icons8-mountains-25.png) no-repeat center;
  background-size: contain !important;
  grid-column: 6;
  grid-row: 3;
}

.PUpSym.Landscape {
  background: url(../img/icons8-add-selection-25.png) no-repeat center;
  background-size: contain !important;
  grid-column: 6;
  grid-row: 1;
}

.PDownSym.Landscape {
  background: url(../img/icons8-minus-selection-25.png) no-repeat center;
  background-size: contain !important;
  grid-column: 6;
  grid-row: 2;
}

.PTAirSym.Landscape {
  background: url(../img/thermometerair-25.png) no-repeat center;
  background-size: contain !important;
  grid-column: 4;
  grid-row: 3;
  display: none;
}

.PTWaterSym.Landscape {
  background: url(../img/thermometerwater-25.png) no-repeat center;
  background-size: contain !important;
  grid-column: 6;
  grid-row: 3;
  display: none;
}

.PTTrack.Landscape {
  grid-column: 9;
  grid-row: 2;  
  background: darkcyan;
  font-size: medium;
  opacity: 1;
  color: ghostwhite;
  padding: 0px 3px;
  border-radius: 5px;  
  animation-name: Fade4Pics;
  animation-duration: 20s;
  animation-iteration-count: infinite;
}


/* ------------ infogrid symbols Portrait ------------*/

.PSymbol.Portrait{
  grid-column: 1;
  grid-row: 3/span 2;
  text-align: start;
  font-size: smaller;
}

.PTrackStat.Portrait {
  grid-column: 1;
  grid-row: 5;
}

.PTimeMove.Portrait{
  grid-column: 3;
  grid-row: 1;
}

.PTime.Portrait{
  grid-column: 3;
  grid-row: 3;
}

.PPause.Portrait{
  grid-column: 3;
  grid-row: 2;
}

.PAlt.Portrait{
  grid-column: 5;
  grid-row: 4;
}

.PAltMinMax.Portrait{
  grid-column: 4/span 2;
  grid-row: 5;
  font-size: medium;
}

.PDistSum.Portrait{
  grid-column: 5;
  grid-row: 3;
}

.PDist.Portrait{
  grid-column: 5;
  grid-row: 1;
}

.PDistFlat.Portrait{
  grid-column: 5;
  grid-row: 2;
}

.PUp.Portrait{
 grid-column: 3;
 grid-row: 4;
}

.PDown.Portrait{
 grid-column: 3;
 grid-row: 5;
}

.PTAir.Portrait{
  grid-column: 3;
  grid-row: 4;
}

.PTWater.Portrait{
  grid-column: 3;
  grid-row: 5;
}

.PTimeMoveSym.Portrait {
  background: url(../img/icons8-clockmove-25.png) no-repeat center;
  background-size: contain !important;
  grid-column: 2;
  grid-row: 1;
}

.PTimeSym.Portrait {
  background: url(../img/icons8-clock-25.png) no-repeat center;
  background-size: contain !important;
  grid-column: 2;
  grid-row: 3;
}

.PPauseSym.Portrait {
  background: url(../img/icons8-stopwatch-25.png) no-repeat center;
  background-size: contain !important;
  grid-column: 2;
  grid-row: 2;
}


.PDistSumSym.Portrait {
  background: url(../img/icons8-rulersum-25.png) no-repeat center;
  background-size: contain !important;
  grid-column: 4;
  grid-row: 3;
}

.PDistSym.Portrait {
  background: url(../img/icons8-rulerdiag-25.png) no-repeat center;
  background-size: contain !important;
  grid-column: 4;
  grid-row: 1;
}

.PDistFlatSym.Portrait {
  background: url(../img/icons8-ruler-25.png) no-repeat center;
  background-size: contain !important;
  grid-column: 4;
  grid-row: 2;
}

.PAltSym.Portrait {
  background: url(../img/icons8-mountains-25.png) no-repeat center;
  background-size: contain !important;
  grid-column: 4;
  grid-row: 4;
}

.PAltMinMaxSym.Portrait {
  background: url(../img/icons8-mountains-25.png) no-repeat center;
  background-size: contain !important;
  grid-column: 4;
  grid-row: 4;
}

.PUpSym.Portrait {
  background: url(../img/icons8-add-selection-25.png) no-repeat center;
  background-size: contain !important;
  grid-column: 2;
  grid-row: 4;
}

.PDownSym.Portrait {
  background: url(../img/icons8-minus-selection-25.png) no-repeat center;
  background-size: contain !important;
  grid-column: 2;
  grid-row: 5;
}

.PTAirSym.Portrait {
  background: url(../img/thermometerair-25.png) no-repeat center;
  background-size: contain !important;
  grid-column: 2;
  grid-row: 4;
  display: none;
}

.PTWaterSym.Portrait {
  background: url(../img/thermometerwater-25.png) no-repeat center;
  background-size: contain !important;
  grid-column: 2;
  grid-row: 5;
  display: none;
}

.PTTrack.Portrait {
  grid-column: 1;
  grid-row: 2;
  background: darkcyan;
  font-size: medium;
  opacity: 1;
  color: ghostwhite;
  padding: 0px 3px;
  border-radius: 5px;
  animation-name: Fade4Pics;
  animation-duration: 20s;
  animation-iteration-count: infinite;
}

.gpsdotted {
  stroke-dasharray: 1,10;
}

.gpsdashed {
  stroke-dasharray: 2,5;
}

/*.slopelines {
  stroke: darkred;
}
*/
.descentlines {
  opacity: .3 !important;
  stroke-width: 4;
/*  stroke: yellowgreen;*/
}

.flatlines {
  opacity: .3 !important;
/*  stroke: cornflowerblue;*/
}

.swim {
  opacity: .5 !important;
  stroke-dasharray: 2,5;
}

.flashred {
  animation-name: colorRed;
  animation-fill-mode: forwards;
  animation-duration: .8s;   
}

.flashblue {
  animation-name: colorBlue;
  animation-fill-mode: forwards;
  animation-duration: .8s;   
}

.flashblack {
  animation-name: colorBlack;
  animation-fill-mode: forwards;
  animation-duration: .8s;   
}


/*  https://codepen.io/sosuke/pen/Pjoqqp  */
@keyframes colorRed {
   30% { filter: invert(18%) sepia(31%) saturate(5276%) hue-rotate(344deg) brightness(83%) contrast(130%); }
   70% { filter: invert(18%) sepia(31%) saturate(5276%) hue-rotate(344deg) brightness(83%) contrast(130%); }
   100% { filter: invert(18%) sepia(31%) saturate(5276%) hue-rotate(344deg) brightness(0%) contrast(130%); }
}

@keyframes colorBlue {
   30% { filter: invert(11%) sepia(97%) saturate(5331%) hue-rotate(245deg) brightness(90%) contrast(153%); }
   70% { filter: invert(11%) sepia(97%) saturate(5331%) hue-rotate(245deg) brightness(90%) contrast(153%); }
   100% { filter: invert(11%) sepia(97%) saturate(5331%) hue-rotate(245deg) brightness(0%) contrast(153%); }
}

@keyframes colorBlack {
   30% { filter: invert(24%) sepia(66%) saturate(235%) hue-rotate(131deg) brightness(96%) contrast(92%); }
   70% { filter: invert(24%) sepia(66%) saturate(235%) hue-rotate(131deg) brightness(96%) contrast(92%); }
   100% { filter: invert(24%) sepia(66%) saturate(235%) hue-rotate(131deg) brightness(0%) contrast(92%); }
}

.MapModal {
  position: fixed !important;
  z-index: 10001 !important;
}

#MapModalCmdBar {
  background: rgba(83, 77, 77, 0.75);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  backdrop-filter: invert(0.8);
}

#MapModalCmdContainer {
  margin: 3px;
}

#cmdMapArea {
  font-size: 18px;
  color: lightgray;
  filter: invert(0);
}

#cmdMapExpand {
  background: url(../img/icons8-expanding-99.png) no-repeat center;
  background-size: contain;
  width: 25px;
  height: 25px;
  transform: rotate(90deg);
}

#cmdLockMap {
  background: url(../img/icons8-pushpin-99.png) no-repeat center;
  background-size: contain;
  width: 25px;
  height: 25px;
  display: none;
}

#cmdMapAndImage {
  background: url(../img/icons8-map&image-99.png) no-repeat center;
  background-size: contain;
  width: 25px;
  height: 25px;
}

#cmdLinkMapAndImage {
  background: url(../img/icons8-link-99.png) no-repeat center;
  background-size: contain;
  width: 25px;
  height: 25px;
}

#cmdMapArea.vertical {
  transform: rotate(-55deg);
  transform-origin: 20px 18px;
  margin: 20px 0px; 
}

#cmdMapArea.horizontal {
  margin: 0px 20px; 
}

#MapModalCmdContainer.vertical {
  display: grid;
}

#MapModalCmdContainer.horizontal {
  display: flex;
}

#cmdMapExpand.vertical, #cmdLockMap.vertical, #cmdMapAndImage.vertical, 
#cmdLinkMapAndImage.vertical {
  margin-top: 20px;
}

#cmdMapExpand.horizontal, #cmdLockMap.horizontal, #cmdMapAndImage.horizontal, 
#cmdLinkMapAndImage.horizontal {
  margin-left: 20px;
}

#cmdMapExpand.active, #cmdLockMap.active, #cmdMapAndImage.active, #cmdLinkMapAndImage.active{
  color: white;
  filter: invert(1);
}

.active{
  cursor: pointer;
}

.inactive{
  cursor: default;
  filter: invert(0.5);
}

.applied{
  background-color: gray !important;
}

#ImageBringFrontPane{
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translateY(-100%);
  display: none;
}

.Trkbtn{
  background-color: darkcyan;
  padding: 1px;
  border-radius: 10px;
  font-size: large;
  cursor: pointer;
  position: relative;
  z-index: 1000;
  text-shadow: none;
  color: whitesmoke;
}

.ExtraImage {
  z-index: 1;
}


/* If fade out option is set */
.typed-fade-out {
  animation-name: TypedFadeOut;
  animation-duration: 2s;
}


@keyframes TypedFadeOut { 
  100% {
      opacity: 1;
  }
  0% {
      opacity: 0;
  }
}

#mapMinMax {
  background: url(../img/icons8-minimize2-99.png) -100% 50%/90% no-repeat;
  width: 50px;
  height: 50px;
  position: absolute;
  transform: rotateZ(90deg) translateX(-9px);
  transform-origin: top center;
  background-color: lightgrey;
  border: 1px black solid;
  border-radius: 5px;
  opacity: 0.4;
  transition: .5s;
  bottom: 0;
  transform-origin: bottom left;
}

.mapMinMaxZIndexUp {
  z-index: 10;
}

.mapMinimized {
  background: url(../img/icons8-expanding-99.png) 20% 50%/80% no-repeat !important;
    /* transform: rotateZ(90deg) translateX(0px) !important; */
    background-color: lightgrey !important;
}

#mapMinMax:hover {
  transform: rotateZ(90deg) translateX(0px);
  cursor: pointer;
}


@keyframes Waterfade { 
  0%, 40%, 100% {
      opacity: .8;
  }
  20%, 70% {
      opacity: 1;
  }
  50%{
    transform: translate(10px,5px)
  }
}

.mapModalTopSpace {
/*add cmdbar-margin to shrink image so they align top/underneath - leads to unexpected shrink of image in portrait*/
/*  max-height: 93vh !important;*/
}

.visible {
  opacity: 1 !important;
}

#sliderlock {
  background: url(../img/lock_handdrawn.png) center center no-repeat;
  width: 30px;
  height: 30px;
/*  transition: all 0.5s ease-out 0s;*/
  position: absolute;
  bottom: 0px;
  left: 30px;
  opacity: 0.7;
  background-size: contain;
  cursor: pointer;
  display: none;
  z-index: 401;
}

.zoomreset {
  zoom: 1 !important;
}