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

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

}

/*@media (max-width: 940px) {
  .translateX600 {
      position: relative !important;
      transform: translateX(0px) !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: 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 (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;*/
  }  
}



/* double entries for font-face due to CORS issues }*/

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



/*a {
  color: antiquewhite;
}*/



@keyframes FadeInStartFadeOutEnd { 
  0%, 100% {
      opacity: 0;
  }
  5%, 95% {
      opacity: 1;
  }
}

@keyframes bergseewellen { 
  0% {
      background-position: 22% 40%;
  }
  100% {
      background-position: -278% 40%;
  }
}

@keyframes bergseewellen_front { 
  0% {
      background-position: 0% 40%;
  }
  100% {
      background-position: -234% 40%;
  }
}

@keyframes floatUpDown { 

  30% {
      transform: translateY(8px) rotate(-5deg);
  }
  100% {
      transform: translateY(0px) rotate(0deg);
  }
}      

@keyframes floatRightLeft { 
  10% {
      opacity: .8;
  }
  100% {
      transform: translateX(-310px);
  }
}




.grid-item {
  border-radius: 5px;
}

.ImageThumbTiltle, .ImageThumbDesc {
  border-radius: 5px;
  border: none;
}

/*.descItem{
  background: rgba(83, 77, 77, 0.75);
}*/

/*#descItemModal{
  background: rgba(83, 77, 77, 0.75);  
}*/

.QuickInfoBorder{
  color: rgb(180 185 191);
  background-color: rgb(134 129 129 / 20%);
}

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

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