/* ======================================================= Body */

html{scroll-behavior: smooth;}

body{
  font-family: var(--NonSerifFont);
}

/* ======================================================= Variables */

:root {
  --PageWidth: 1355px;
}


/* ======================================================= Main Page Content Wrapper */

div.MainWrap {
  position: relative;
  max-width: var(--PageWidth);
  transition: max-width 1s;
  overflow-x: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  /*border: 1px solid blue; */
}

div.MainWrap p{
  padding: 10px;
}

/* ======================================================= Tracks and Tipps Banner */

#route-info-overview{
  width: 100%;
  margin-top: -2vw;
}

/* ======================================================= Chapter Titles */

/* Table properties */
table.titleTable{
  width: calc(100% - 10px);
  border-collapse: collapse;
  margin-left: 10px;
}

/* Cell Properties */
table.titleTable td.title, table.DWrap-Table td.title{
  color: var(--TourColor);
  font-size: 18pt;
  font-weight: normal;
  text-align: left;
}
table.DWrap-Table td.title{
  padding-left: 10px;
}

table.DWrap-Table td.title{padding-bottom: 20px;}


/* ======================================================= Spacer */

div.Spacer{margin-bottom: 100px;}
div.HalfSpacer{margin-bottom:  50px;}

/* ======================================================= Wrapper for each map */

/* Zentralasien-Tour */
div#map-wrapper-UE, div#map-wrapper-UE > div{z-index: 45; height: 60.50vw;}
div#map-wrapper-BA, div#map-wrapper-BA > div{z-index:  5; height: 49.75vw;}
div#map-wrapper-VA, div#map-wrapper-VA > div{z-index: 10; height: 58.50vw;}
div#map-wrapper-NO, div#map-wrapper-NO > div{z-index: 15; height: 39.70vw;}
div#map-wrapper-ZA, div#map-wrapper-ZA > div{z-index: 20; height: 47.50vw;}
div#map-wrapper-AL, div#map-wrapper-AL > div{z-index: 30; height: 40.70vw;}
div#map-wrapper-CH, div#map-wrapper-CH > div{z-index: 35; height: 54.35vw;}
div#map-wrapper-SO, div#map-wrapper-SO > div{z-index: 38; height: 83.50vw;}
div#map-wrapper-OZ, div#map-wrapper-OZ > div{z-index: 40; height: 67.00vw;}
div#map-wrapper-OA, div#map-wrapper-OA > div{z-index: 42; height: 56.00vw;}
div#map-wrapper-OS, div#map-wrapper-OS > div{z-index: 43; height: 58.10vw;}
div#map-wrapper-BA.img-gallery-active{height: calc(49.75vw + 100px);}
div#map-wrapper-VA.img-gallery-active{height: calc(58.50vw + 100px);}
div#map-wrapper-NO.img-gallery-active{height: calc(39.70vw + 100px);}
div#map-wrapper-ZA.img-gallery-active{height: calc(47.50vw + 100px);}
div#map-wrapper-AL.img-gallery-active{height: calc(40.70vw + 100px);}
div#map-wrapper-CH.img-gallery-active{height: calc(54.35vw + 100px);}
div#map-wrapper-SO.img-gallery-active{height: calc(83.50vw + 100px);}          
div#map-wrapper-OZ.img-gallery-active{height: calc(67.00vw + 100px);}          
div#map-wrapper-OA.img-gallery-active{height: calc(56.00vw + 100px);} 
div#map-wrapper-OS.img-gallery-active{height: calc(58.10vw + 100px);} 

/* ======================================================= Map Title */

div.map-title{
  font-family: var(--NonSerifFont);
  position: absolute;
  background-color: rgb(255, 255, 255, 0.8);
  color: var(--TourColor);
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
  z-index: 5000;
  transition: 1s;
  left: 0px;
}

/* ======================================================= Collapse Cover */

div.collapse-cover{
  position: absolute;
  background-color: white;
  width: 100%;
  height: 100%;
  z-index: 9;
  opacity: 0.8;
  transition: 0.2s;
  display: none;
  z-index: 1000;
}

/* ======================================================= Stage Rectangulars on the Overview Map */

/* Whole svg element in which all borders, covers and paths are organized */
svg#stage-rects{
  position: absolute;
  z-index: 9;
  width: 100vw;
}

/* all semi-transparent covers */
path.stage-rect-cover, path.frame-cover{
  color: rgba(255,255,255,0.0);
  transition: 0.2s;
}
path.stage-rect-cover.active,
path.frame-cover.active{
  color: rgba(255,255,255,0.7);
}

/* The borders of the etappe map regions */
path.stage-rect-border{
  stroke: transparent;
  stroke-width: 0;
  transition: 0.2s;
  fill: transparent;
}
/* If the map regions are displayed */
path.stage-rect-border.preactive{
    stroke: var(--TourColor);
    stroke-width: 0.15;
}
/* If this stage rectangular is hovered */
path.stage-rect-border.active{
  stroke: var(--TourColor);
  stroke-width: 0.2;
  cursor: pointer;
}
/* If another stage rectangular is hovered */
path.stage-rect-border.passive{
  stroke-width: 0.1;
  stroke: #DDDDDD;
}

/* Etappe Names */
svg#stage-rects text{
  font-size: 1pt;
  font-family: var(--NonSerifFont);
  fill: var(--TourColor);
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white, -2px 0 white, 0 2px white, 2px 0 white, 0 -2px white, -1px -1px white, -1px 1px white, 1px -1px white, 1px 1px white;
  opacity: 0;
  transition: 0.2s;
}
/* If the hover trigger is hovered */
svg#stage-rects text.preactive{opacity: 1;}
/* If this stage rectangular is hovered */
svg#stage-rects text.active{opacity: 1;}
/* If another stage rectangular is hovered */
svg#stage-rects text.passive{
  opacity: 1;
  fill: #DDDDDD;
}

/*===================================================== */
/* Ein- und Ausschalten der Elemente                    */
/*===================================================== */

/* Etappennamenschriftgröße in Abhängigkeit der Viewpointbreite  */
@media only screen and (max-width: 1200px) {
	div.map-title{
		font-size: 15pt;
		box-shadow: 0px 0px 4px 4px rgb(255, 255, 255, 0.8);
		margin-top: 10px;
		margin-left: 10px;
	}
	div.map-wrapper.collapsed{height: 40px !important; cursor: pointer;}
}
@media only screen and (min-width: 1201px) {
	div.map-title{
		font-size: 25pt;
		box-shadow: 0px 0px 5px 8px rgb(255, 255, 255, 0.8);
		margin-top: 20px;
		margin-left: 20px;
	}
	div.map-wrapper.collapsed{height: 75px !important; cursor: pointer;}
}

div.collapse-cover.collapsed{display: block;}
div.map-wrapper.collapsed:hover div.collapse-cover.collapsed{opacity: 0;}