/* @import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,300'); */
	@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500&display=swap');

	html
	{
		margin: 0;
		padding: 0;
		height: 100%;
		font-size: 100.01%;
		/* font-family: 'Yanone Kaffeesatz', sans serif; */
		font-family: 'Raleway', sans serif;
		font-weight: 300;
	}

	body
	{
		margin: 0;
		min-height: 100%;
		display: flex;
		flex-direction: column;
		font-size: 1.5em;
	}

	header
	{
	    font-size: 1em;
	    width: 100%;
	    /* flex: 1; */
	    box-sizing: border-box;
	    text-align: center;
	    padding: 1vw 1em 1em 1em;
	}

	main
	{
		width: 100%;
		flex: 1;
		box-sizing: border-box;
		text-align: center;
		padding: 0 1em;
	}

	footer
	{
		box-sizing: border-box;
		text-align: center;
		margin: 1em 0;
		padding: 0 1em;
		font-size: 0.75em;
	}

	b,strong
    {
	    font-weight: 500;
	}

	h1,h2,h3,h4,h5,h6,h7
    {
	    font-weight: 500;
	}

	.nowrap
	{
		white-space: nowrap;
	}

	table.default-table
	{
		width: 100%;
		margin: 0 auto;
		border-collapse: collapse;
	}

	table.default-table th, table.default-table td
	{
		padding: 0.5em;
	}

	table.default-table th
	{
		color: #FFF;
		background: rgb(0,157,222);
		background: linear-gradient(0deg, rgba(0,157,222,1) 0%, rgba(0,172,229,1) 100%);
		border-bottom: 1px solid #777;
	}

	table.default-table.small-table
	{
		font-size: 0.7em;
	}

	.responsive-table-wrap
	{
		position: relative;
	}

	.responsive-table
	{
		overflow-x: auto;
	}

	.responsive-table-wrap > .leftarrow,
	.responsive-table-wrap > .rightarrow
	{
		position: absolute;
		top: 1em;
		bottom: 0;
		left: 0;
		width: 1em;
		display: none;
		align-items: center;
		justify-content: center;
		text-align: center;
		background: rgb(0,157,222);
		background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
		color: rgba(0,0,0,0.1);
		font-size: 2.5em;
	}

	.responsive-table-wrap > .leftarrow:hover,
	.responsive-table-wrap > .rightarrow:hover
	{
		cursor: pointer;
	}

	.responsive-table-wrap > .leftarrow:active,
	.responsive-table-wrap > .rightarrow:active
	{
		color: rgba(0,0,0,0.3);
	}

	.responsive-table-wrap > .rightarrow
	{
		right: 0vw;
		left: auto;
		background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	}

	table.default-table td
	{
		border-top: 1px solid #777;
	}

	table.default-table tr:nth-child(even) td
	{
		background-color: #EEEEEF;
	}

	.snowflake-enclosed::before
    {
	    content: "❃\a0";
	    color: deepskyblue;
	}

	.snowflake-enclosed::after
	{
		content: "\a0❃";
		color: deepskyblue;
	}

	.logo {
		display: inline-block;
	}

	.logo h1:hover,
	.logo h2:hover,
	.logo h3:hover	{
		cursor: pointer
	}
	
	.logo .h1 {
	    font-size: 2.1em !important;
	}

	.logo h2 {
	    margin: 0;
	    font-size: 0.9375em;
	}
	
	.logo .h2 {
		margin: 0 !important;
	    font-size: 0.9375em !important;
	}

	.logo h3 {
	    margin-top: 0;
	    font-size: 0.753em;
	}
	
	.logo .h3 {
		margin-top: 0 !important;
	    font-size: 0.753em !important;
	}

	.logo strong {
	    font-size: 0.753em;
	    margin: 0;
	    display: block;
	}

	h1, .h1
	{
		font-size: 2.1em;
	}

	h2, .h2
	{
		font-size: 1.5em;
	}

	h3, .h3
	{
		font-size: 1.25em;
	}

	h4, .h4
	{
		font-size: 1em;
	}

	h4.hoverUnderline:hover
	{
	font-size: 0.75em;
		text-decoration: underline;
	}
	
	p, li, address {
		line-height: 150%;
	}

	.narrow, .narrower {
		margin-left: auto;
		margin-right: auto;
	}

	.narrow
	{
	    max-width: 37.375em;
	}

	.narrower
	{
	    max-width: 47.375em;
	}

	.textLeft
	{
		text-align:left;
	}

	p.bottomline
	{
		border-bottom: 1px dotted black;
		padding-bottom: 1.5em;
	}

	main
	{
	    font-size: 0.75em;
	}

	a
	{
		color: #000;
		text-decoration: none;
		border-bottom: 1px dotted #000;
	}

	a:hover
	{
		color: #009dde;
		border-bottom-color: #009dde;
	}

	a:focus
	{
		outline: none;
		/*outline: 0.0625em dotted rgba(0,0,0,0.1);*/
		/*outline-offset: 0.1em;*/
	}

	ul.snowflake-list
	{
	    padding: 0;
	}

	ul.snowflake-list li
	{
	    list-style: none;
	}

	ul.snowflake-list li:not(:first-child)
	{
		margin: 0.25em 0;
	}

	ul.snowflake-list li::before
	{
	    content: "❃\a0";
	    color: deepskyblue;
	}

	ul.snowflake-list li.snowflake-list-hide::before
	{
		content: "";
		font-size: normal;
	}

	ul.snowflake-list li.snowflake-list-smaller-text
	{
		font-size: smaller;
		margin-left: -0.25em;
	}

	ul.snowflake-list li.snowflake-list-smaller-text::before
	{
		font-size: smaller;
		margin-left: 0 !important;
	}

	ul.snowflake-list.snowflake-list-left
	{
		padding-left: 1.25em;
	}

	ul.snowflake-list.snowflake-list-left li::before
	{
		margin-left: -1.25em;
	}

	ul.snowflake-list-left
	{
		text-align: left;
		margin: 1em auto;
		display: inline-block;
		max-width: 37.375em;
	}

	ul.menu
	{
		margin: 0;
		padding: 0;
		font-size: 1.05rem;
		font-weight: 400;
		list-style: none;
	}

	ul.menu li > a.active {
		color: #00ace5 /*deepskyblue*/;
		border-bottom-color: #009dde;
	}

	ul.menu > li
	{
		margin: 0;
		padding: 0;
		display: inline-block;
		white-space: nowrap;
	}

	ul.menu.block > li
	{
		display: block;
	}

	ul.menu > li > a
	{
		display: inline-block;
		margin: 0.4em;
	}
	
	ul.menu-header > li > a {
		margin-top: 0;
	}

	ul.menu-header > li:first-child > a,
	ul.menu-footer > li:first-child > a {
		margin-left: 0;
	}
	
	ul.menu-header > li:last-child > a,
	ul.menu-footer > li:last-child > a {
		margin-right: 0;
	}

	#landscape
	{
		z-index: -1;
		position: absolute;
		top: 0;
		left: 0;
		/*width: 100vw;*/
		width: 100%;
		height: 100vh;
	}
	
	.track-wrapper {
		position: relative;
		margin: 0 auto;
		min-height:660px;	
	}
	
	.track-image {
		width: 38%;
		min-height: 654px;
		margin-top: 3px;
		box-shadow: 0 1px 2px 1px rgba(0,0,0,0.1);
		float: left;
		display: inline-block;
		position: relative;
		overflow: hidden;
		/* background: url('#') center center/cover no-repeat; */
	}
	
	.track-image > img {
		vertical-align:top;
		object-fit: cover;
		object-position: center center;
		width: 100%;
		height: 654px;
	}
	
	.track-weather {
		position: absolute;
		z-index: 2;
		width: 100%;
		height: 654px;
		bottom: 0;
		background-color: rgba(255,255,255,0.6);
		background: radial-gradient(circle at center 656px, rgba(255,255,255,0.8) 30%,rgba(255,255,255,0) 60%);
	}
	
	.track-weather.hide-weather {
		animation: hide-weather-widget 0.5s ease-in alternate forwards;
	}

	@keyframes hide-weather-widget {
		from {
			bottom: 0px;
		}
		to {
			bottom: -238px;
		}
	}
	
	.arrow {
	  transform: rotate(0deg); /* rotate the arrow */
	  display: inline-block;
	  padding-bottom: calc(1/2 * 20px); /* vary size by synchronous px change */
	  width: calc(3/3 * 20px); /* vary size by synchronous px change */
	  height: calc(2/3 * 20px); /* vary size by synchronous px change */
	}

	.arrow:hover > *::before {
	  /*background-color: red;*/
	}

	.arrow > *::before {
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 25%; /* vary handle thickness by synchronous % change */
	  right: 25%; /* vary handle thickness by synchronous % change */
	  background-color: black;
	  content: '';
	}

	.arrow > * {
	  position: relative;
	  display: inline-block;
	  text-align: center;
	  width: 100%;
	  height: 100%;
	}

	.arrow > *::after {
	  transform: rotate(45deg);
	  position: absolute;
	  content: "";
	  top: 43.7%;
	  right: 0;
	  left: 14.6%;
	  width: 70.65%;
	  height: 106%;
	  background: linear-gradient(135deg, transparent 50%, black 50% 100%);
	}

	.arrow:hover > *::after {
	  /*background: linear-gradient(135deg, transparent 50%, red 50% 100%);*/
	}
	
	.track-weather .toggle-weather {
		position:absolute;
		z-index: 10;
		top:380px;
		left: 48%;
		border: none;
		animation: move-weather-toggle;
		animation-duration: 3s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}
	
	.hide-weather .toggle-weather {
		
		animation: rotate-weather-toggle 0.5s ease-in alternate forwards;
	}
	
	@keyframes rotate-weather-toggle {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(180deg);
		}
	}
	
	@keyframes move-weather-toggle {
		0% {
			top: 380px;
		}
		
		70% {
			top: 380px;
		}
		
		80% {
			top: 385px;
		}
		
		90% {
			top: 380px;
		}

        100% {
			top: 385px;
	   }
	}
	
	.track-map-komoot-full {
		position: relative;
		margin: 0 auto;
		min-height:660px;
	}
	
	.track-map-komoot {
		width: 62%;
		display: inline-block;
		min-height:660px;
		position:relative;
	}
	
	.licence {
		position:absolute;
		z-index:101;
		top:3.5%;
		right:4%;
		left:83%;
		border:none;
	}
	
	.licence > img {
		box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px;
	}

	.signature
	{
		display: inline-block;
		/*width: 104px;*/
		/*height: 83px;*/
		opacity:0.8;
		width:100%;
		height:100%;
		bottom:0;
		filter: drop-shadow(0 0 5px rgba(0, 0, 20, 0.5));
		background: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22104%22%20height%3D%2283%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23FFF%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%3E%3Cpath%20d%3D%22M16.961%202S6.908%2017.724%202.297%2046.269c-1.165%207.212%201.082%2014.479%206.832%2012.769%2013.498-4.015%2016.108-25.09%2010.942-26.651-4.038-1.22-9.53%2016.313-7.276%2019.402%202.888%203.959%205.73-8.134%208.554-7.081%203.888%201.45%202.833%2010.705%206.888%2010.649%206.109-.084%203.499-22.971%207.832-25.089s5.499%202.287%2011.22-2.063c3.648-2.772-3.499-7.025-5.666%2019.068-.68%208.195-9.498%203.903-4.888-4.238M62.674%204.732s-10.103%2017.226-9.665%2040.756c.222%2011.932%2013.275%202.454%2015.275-12.712%202.089-15.845-11.828-2.38-9.887%209.646%201.278%207.917%209.554-9.925%208.943-9.813-.504.092-3.814%206.451-1.444%2011.317%202.389%204.907%2012.609-12.655%2013.83-12.043.804.403-4.887%208.978-1.166%209.757%202.52.528%205.484-5.302%207.443-6.133%201.444-.612%203.2-.619%204.666-1.171%202.222-.835%209.806-11.282%205.443-13.715-3.496-1.95-12.131%2015.569-10.554%2035.514%201.111%2014.05-5.15%2026.695-8.721%2024.644-7.665-4.405%2010.554-38.972%2025.161-37.746%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') 0 0 / 100% auto no-repeat;
	}

	@media only screen and (max-width: 460px) {
		.fb-like {
			display: none !important;
		}
	}
	
	.ratingbox {
		position: relative;
		z-index: 1;
		display: block;
		margin-top: 0.2vw;
		margin-bottom: calc(0.25em - 1.2vw)
	}
	
	.rating {
		display: inline-block;
		border: none;
	}
	
	.rating .rating-stars {
	   display: block;
	   color: #EEB700;
	   white-space: nowrap;
	   text-shadow: 0px 0px 5px rgba(0,0,20,0.15);
	}

	.rating .rating-count {
	   display: block;
	   font-size:0.52em;
	   color: #EEB700;
	   white-space: nowrap;
	   text-shadow: 0px 0px 5px rgba(0,0,20,0.15);
	   border-bottom: 1px dotted #EEB700;
	   line-height: 1.2rem;
	}
	
	.rating:hover .rating-count {
		font-weight: 500;
	}

	.status {
		max-width: 37em;
		margin: 1em auto 0 auto;
		padding: 0.25em;
		border: 1px solid white;
		box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
		border-radius: 0.75em
	}

	.status > h4 {
		margin: 0;
	}

	.status > p {
		margin: 0;
	}

	.status > ul.snowflake-list {
		width: 70%;
		margin-top:0;
	}

	.status .status-image {
		width:20%;
		float:left;
		object-fit:cover;
		border-radius:0.65em;
		padding-right:0.25em;
	}

	.dot {
		height: 0.85em;
		width: 0.85em;
		margin-top: -0.2em;
		background-color: black;
		border-radius: 50%;
		display: inline-block;
		vertical-align:middle;
	}

	.dot.green {
		background-color: green;
	}

	.dot.orange {
		background-color: orange;
	}

	.dot.red {
		background-color: red;
	}

	.dot.orange-red {
		background: linear-gradient(135deg, orange 50%, red 50%);
	}

	.dot.green-orange {
		background: linear-gradient(135deg, green 50%, orange 50%);
	}

	/* <forms> */
	.msg {
		display: inline-block;
		padding: 0.5em 0.75em;
		margin-bottom: 1em;
		max-width: 36em;
		font-weight: 400;
		color: white;
		background-color: darkorange;
		box-shadow: 0 0 5px rgba(0,0,0,0.3);
		border-radius: 0.5em;
	}

	.msg-success {
		background-color: darkgreen;
	}

	.msg-warning {
		background-color: darkorange;
	}

	.msg-error {
		background-color: darkred;
	}

	.form select {
		font-family: inherit;
		font-size: smaller;
		font-weight: inherit;
		font-weight: 400;
		min-width: 13rem;
		padding: 0.1em;
	}

	.form input:not([type=checkbox]):not([type=radio]):not([type=submit]) {
		font-family: inherit;
		font-size: smaller;
		font-weight: inherit;
		font-weight: 400;
		width: 12.5rem;
	}

	.form input[type=submit] {
		font-family: inherit;
		font-size: inherit;
		color: white;
		background-color: green;
		border: none;
		box-shadow: 0 0 5px rgba(0,0,0,0.3);
		border-radius: 0.25em;
		padding: 0.25em 0.5em;
		font-weight: 500;
		cursor: pointer;
	}

	.form input[type=submit]:active {
		box-shadow: 0 0 1px rgba(0,0,0,0.3);
	}

	.form input:checked + span, .form input:checked + span * {
		color: #009dde !important;
		font-weight: 400;
	}

	.form input:disabled + span, .form input:disabled + span * {
		filter: opacity(0.4);
		font-weight: 400;
	}

	.form select option:first-child {
		font-weight: 300;
	}

	.form select option:checked:not(:first-child)/*,
	.form select:focus*/ {
		color: #009dde;
		font-weight: 400;
	}

	.form input {
		accent-color: #009dde/*deeppink*/;
	}

	.form {
		margin: 0 auto;
		max-width: 37.375em;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		/*align-content: stretch;*/
		align-items: center;
		gap: 0.75em;
	}

	.form-1col {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		text-align: left;
		gap: 0.75em;
	}

	.form-hcol, .form-pcol {
		flex: 100%;
		text-align: left;
		align-content: left;
		align-items: center;
	}

	.form-pcol {
		margin: 0.5em 0 0 0.375em;
	}

	.form-ncol {
		white-space: nowrap;
	}

	.form-4col {
		flex: 4 1 1;
		text-align: left;
		white-space: nowrap;
	}

	.warning-sign {
		display: none;
	}

	.warning-sign::after {
		content: " ⚠";
		font-size: 0.84em;
		font-weight: 300;
		color: #777;
	}

	.instagram-writing {
		height: 2em;
		margin: 1.5em auto 0 auto;
	}

	.instagram-widget {
		max-width: 37em;
		margin: 0 auto; 
		overflow: hidden;
		display: block;
		border: none;
		cursor: pointer;
	}

	.instagram-widget iframe {
		min-height:24em;
		pointer-events: none;
		border:none;
		overflow:hidden;
		width:100%;
		margin: /*-28px -6px -19px 0*/;
	}

	/*</forms> */

	@media screen and (max-width: 1250px) {

		.responsive-table-wrap > .leftarrow,
		.responsive-table-wrap > .rightarrow {
			display: flex;
		}
	}

	@media screen and (max-width: 992px) {

		.track-image {
			width: calc(100% - 4px);
			min-height: auto;
			margin-left: 2px;
		}
		
		.track-image > img {
			width: 100%;
			height: calc(30vw + 30vh);
			/* object-fit: none;
			object-position: unset; */
		}
		
		.track-map-komoot {
			width: 100%;
		}

		.instagram-writing {
			height: 1.75em;
			margin: 1.25em auto 0 auto;
		}

		.instagram-widget iframe {
			min-height:24em;
		}
	}
	
	
	@media screen and (max-width: 742px) {

		.logo h1 {
		    font-size: 6.78vw;
		    white-space: nowrap;
		    overflow: hidden;
		}
		
		.logo .h1 {
			font-size: 6.78vw !important;
		    white-space: nowrap !important;
		    overflow: hidden !important;
		}

		.logo h2 {
		   font-size: 3.02vw;
		}
		
		.logo .h2 {
		   font-size: 3.02vw !important;
		}

		.logo h3, .logo strong {
		    font-size: 2.43vw;
		}
		
		.logo .h3 {
		    font-size: 2.43vw !important;
		}

		ul.menu-header > li > a {
			margin: 0em 0.3em 0.4em 0.3em;
		}

		ul.menu-footer > li > a {
			margin: 0.4em 0.3em;
		}

		.status {
			font-size: 0.9em;
		}

		.instagram-writing {
			height: 1.5em;
			margin: 1.25em auto 0 auto;
		}

		.instagram-widget iframe {
			min-height:14em;
		}
	}

	@media screen and (max-width: 500px) {
		
		.logo h3:not(.h2) {
			display: none;
		}
		
		ul.menu {
			font-size: 0.8rem;
		}

		ul.menu > li > a {
			margin: 0.375em 0.125em;
		}

		ul.menu > li:first-child > a {
			margin-left: 0;
		}

		ul.menu > li:last-child > a {
			margin-right: 0;
		}
		
		.rating .rating-stars {
		   font-size:0.875em;
		}

		.rating .rating-count {
		   font-size:0.46em;
		   line-height: 1rem;
		}

		.status {
			font-size: 0.7em;
		}

		.status .status-image {
			width:33%;
		}

		.status > ul.snowflake-list {
			width: 58%;
		}

		.instagram-writing {
			height: 1.125em;
			margin: 1em auto 0 auto;
		}

		.instagram-widget iframe {
			min-height:12em;
		}
	}
	
	/*
	algorithm to determine the percentages and timings:

	For "n" images You must define:
	a=presentation time for one image
	b=duration for cross fading
	Total animation-duration is of course t=(a+b)*n

	animation-delay = t/n or = a+b

	Percentage for keyframes:

    0%
    a/t*100%
    (a+b)/t*100% = 1/n*100%
    100%-(b/t*100%)
    100%
	
	a=3 b=2 t=25
	*/
	
	@keyframes crossfadeImg {
	  0% {
		opacity:1;
	  }
	  12% {
		opacity:1;
	  }
	  20% {
		opacity:0;
	  }
	  92% {
		opacity:0;
	  }
	  100% {
		opacity:1;
	  }
	}

	.crossfadeImgs img:nth-of-type(1) {
	  animation-delay: 0;
	}
	.crossfadeImgs img:nth-of-type(2) {
	  animation-delay: 5s;
	}
	.crossfadeImgs img:nth-of-type(3) {
	  animation-delay: 10s;
	}
	.crossfadeImgs img:nth-of-type(4) {
	  animation-delay: 15s;
	}
	.crossfadeImgs img:nth-of-type(5) {
	  animation-delay: 20s;
	}
	
	.crossfadeImgs img {
		animation-name: crossfadeImg;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
		animation-duration: 25s;
		/* animation-direction: alternate; */
	}