/* corporate identity */
/* The CSS box-sizing property allows us to include the padding and border in an element's total width and height. */
* {box-sizing: border-box;} 	/* Sonst entsteht ein ungewollter schmaler rechten Rand */

.pfeil_l::first-letter {
  font-size: 100%;
  color: darkred;
}

h1	{		/* Überschrift mit JavaScript */
		color: darkgreen;
		/* float: none;
		 padding: 5%; */
		 text-align: center;
		 text-shadow: 2px 2px 5px yellow; /* blur effect (5px) to the shadow: */
	}
	
h2	{
		color: darkblue;
		/* margin-left: 2%; 	 um Überschrift über den Text zu plazieren */
		text-align: center;
	}	
	
h3	{	/* Hinweis Seitennavigation" */
		color: darkblue;
		
		
		/* position: relative;  absolute; Überschrift auf dem Text */
		
		}

h4	{
		color: darkgreen;
		 
	}

body {
		font-family: Verdana, sans-serif;
		font-size: 	1em;	/* 0.8em;  */
		margin: 0px;			/* sonst wird Überschriftblock vom Rand weggerückt */
		/*background:  linear-gradient( to top right, lightyellow, lightgreen );*/
		/* background: transparent; */
		/*background-color: linear-gradient( to top right, lightyellow, lightgreen );*/
		background: linear-gradient( to top right, lightyellow, lightgreen );
		/*font-variant: small-caps;	 			Kapitälchen, Großbuchstaben, erster Buchstabe der Zeile größer, aber Schrift  wird auch zarter */
        /*	background-color: lightyellow; /* #cccccc;  Used if the image is unavailable */
		/*background-image: url('./../images/Zaufensgraben_IMG_1093_klein.JPG') ;  
		
		background-size: 50%;
		background-repeat: no-repeat; */
		/*background-attachment: fixed; Bild bleibt stehen Rest scrollt darüber*/
		/*background-position: right top; 		*/
	
			
		/*background-image: transparent url('./../images/Zaufensgraben_IMG_1093_klein.JPG') no-repeat top right; */
		
		
		/*background-size: 50%;	 nur Foto in halber Größe 
		content: "Zaufensgraben"; */
		}

main
	{
	padding: 2%;			/* für Rand um die Elemente der Webseite */
	}
	 
p	{
		/* margin: 0px; beseitigt den Abstand zwischen den Absätzen */
		color: black;
		/*Blocksatz und Silbentrennung*/
		text-align:justify;  
		text-justify:auto;
		hyphens: auto;
	}
	
/* Staionsüberschrift besser als Klasse ausweisen
b
	{
		color: darkgreen ;
	}
*/

.station
	{
		color: darkgreen ;
	}
	
.clear 
{				/* <br clear=all>	 <!--  clear=all veraltet, nach float-Elementen genutzt um am linken Rand zu starten --> */
  clear: both; 
  /* display: flow-root; ist kein richtiger Ersatz, z.B. <p> und <details>-Bereich verschwinden */
}

a {
		cursor: pointer;
		color: steelblue;
	}

nav ul li {
		display: block;
		/*padding: 5px; */
	}

 /* unvisited link */
a:link {
  color: darkblue;
}

/* visited link */
a:visited {
  color: darkgreen;
}

/* mouse over link */
a:hover {
  color: darkred;
}

/* selected link */
a:active {
  color: hotpink; 
}

/*
nav, section, article, details, footer, H1 
	{
		margin: 5px;
		padding: 8px;
	}
	#content 
{
		margin-left: 5px;
		margin-right: 5px;
		text-align: justify;
	}

#content			Inhalt JavaScript Text 
	{
		
		width: 44%;   	analog Navigation 
	}
	
	
*/	


/* -- auf der Seite getestet-- */	
	
#ticker
	{
	/* margin: 5%;			Hält Anbstand nach allen Seiten, aber unnötig für Ticker */
	float: left;			/* ? testen ? */
	}

details
	{
		background-color: lightyellow;
	}

blockquote
	{
	margin: 2%;	
	}
	
hr
	{
	background: lightyellow;
	
	}		

.navigation			/* Navigation zu anderen Seiten als Klasse, da 2x Navigationsbereich */
{
	font-size: 	1.5em;		/* 1em;  */
	float: none;  			/*  Floaten bricht die Navigationsbezeichnungen zwischen den Wörtern um, Navigation unter dem Foto */
	/*width: 44%;		   analog JavaScript Text, sonst liegt das Startfoto etwas auf dem Text */
	
	/* padding-left: 3%;			hält Abstand und färbt Bereich ab Rand ein, zu Testzwecken 
	background: red; */
	/* background-color: lightyellow; */
}

nav
	{
		/* display: inline; 	alles rutscht unter das Startbild */
		color: darkred;				/* rote Pfeile, wenn diese außerhalb von a href='. */
		margin: 3% 3% 3% 0%;
		/*text-shadow: 2px 2px 5px yellow;  blur effect (5px) to the shadow: */
		/* display: block; */
		/* text-align: center; auch keine Lösung */
	}
	
nav a
	{
	display: inline;				/* bei block landet der Beschreibungstext in der nächsten Zeile */
	margin: 2%; 					/* steuert auch den Abstand zum Pfeil */
	text-decoration: none; 
	/* text-shadow: 2px 2px 5px yellow;   blur effect (5px) to the shadow: */
	/* text-decoration:  yellow underline overline dotted; */
	text-align: center;
	}

/* Schaltelemente */	
button
	{
		margin: auto; 				/* zentriert den Button/Text, 1% */
		color: darkblue;
		padding: 1%;
		background: white;
		border-color: lightyellow olive olive lightyellow;
		border-style: solid;
		border-width: thick;		/* auch thick; thin; medium */
		float: none;
		/*width: auto;
		display: block;
		text-align: center; */
	}	

.arrow_l
	{
	color: darkblue;
	text-decoration: none; 
	display: inline;	/* inline, damit Pfeil und Hinweistext auf einer Zeile, inline-block bricht nicht um */
	}

.arrow_l:before 						/* \a0 =/= \2003 Abstand größer */
	{
	color: darkred;
	display: inline;				/*inline, damit Pfeil und Hinweistext auf einer Zeile, auch inline-block*/
	content: '\21D0';				/* \21E6 \00AB https://www.toptal.com/designers/htmlarrows/ */
	font-size: 	1.5em;
	}

.arrow_r
	{
	color: darkblue;
	text-decoration: none; 
	display: inline;	/* inline, damit Pfeil und Hinweistext auf einer Zeile, inline-block bricht nicht um */
	/* font-size: 	2em; */
	}

.arrow_r:after
	{
	color: darkred;
	display: inline;				/*inline, damit Pfeil und Hinweistext auf einer Zeile, auch inline-block*/
	content: '\21D2';				/* \21E8 \27AF \00BB \0000BB Natur&shy;lehr&shy;pfad"; wird auch so dargestellt */
	font-size: 	1.5em;
	}	
/*	
.pfeil_links
{
		display: flex;
		padding: 2%;
		float: right;
		margin: auto;
		
	}
	
.pfeil_links:before
	{
	content: '\0000BB\0000BB';		
	color: darkred;
	display: inline;				
	}
*/		
.nach_oben							/* hoch RÜCKSPRUNG nach_oben*/
	{
		display: flex;
		padding: 2%;
		float: none;
		margin: auto;
		/* font-size: 	2em; */
	}

.nach_oben:before
	{
	content: '\21D1\2003';			/* \21E7 \21D1\2003\a0 https://www.toptal.com/designers/htmlarrows/ */
	color: darkred;
	display: block;				/*damit Pfeil und Hinweistext auf einer Zeile */
	font-size: 	1.5em;
	}
	
.nach_oben:after
	{
	content: '\2003\21D1';			/* \21E7 \2003\21D1\a0 https://www.toptal.com/designers/htmlarrows/ */
	color: darkred;
	display: inline;				/*damit Pfeil und Hinweistext auf einer Zeile */
	font-size: 	1.5em;
	}
	
	
/* --- Doppelpfeil (&#x21D2;) + Abstand nach links für alle Links --- 	
.main a[href]:before { 
	content: '\0000BB\a0';  
	padding-left: 1em;
	}
*/

/* --- Link Status --- */

 /* unvisited link */
button:link {
  color: darkblue;
}
/* selected link */
button:active {
	color: hotpink;
	background: lightyellow;
	border-color: olive white white olive;
	border-style: solid;
	border-width: thick;						/* auch thick; thin; medium */
	text-decoration: none;	
	}
/* mouse over link */
button:hover {
  color: darkred;
}	
/* visited link */
button:visited {
  color: darkgreen;
}
	
#fahrplan        /* Hilfstext zum Fahrplanlink */
	{
	float: left;
	margin: 2% 0;    /* nur oben und unten Abstand */
	}

	
.logo_rechts
	{
	float: right; 
	/*margin:	5%; */
	margin-right:5%;
	margin-left:5%;	
	width: 15%;
	height: auto;
	}

.otegau 
	{
	float: right; 
	margin:	5%;
	margin-right:5%;	
	width: 15%;
	height: auto;
	}

	
.kontakt
	{
	width: 10%;	
	}

.zertifikat  /* Prüf-Icons auf Seitengröße eingestellt */
	{
	width: 10%;
	}

footer
{
	margin: 0%;
	padding: 2%;
	background: linear-gradient(to bottom right, lightyellow, lightgreen );
	/* background-color: lightyellow; */
}

/*
#starttext_container
	{
	margin: 2%;
	}
*/
#startbild_container 
	{
	  position: relative;		/* sonst rutscht Overlaytext unters Foto */
	  float: right;				/* damit Folgetext links vorbei läuft */
	   /*max-width: 50%;  			nur 50 % der Seitenbreite wird genutzt*/
	  margin-right: 2%;			/* damit Abstand zum rechten Rand bleibt */
	  margin-left: 2%;			/* damit Abstand zum linken Rand verringert */
	  /* margin-top: -8%;		damit das Bild in den Starttext hineinreicht, was aber auf dem Handy stört */
	}

#startbild_image 
	{
	  max-width: 100%;				/*da nur Fotos mit 20% Originalgröße genutzt werden */
	  height: auto;
	  display: block;
	}

.bild_image 	/* want an image to scale down if it has to, but never scale up to be larger than its original size */
	{
			
		max-width: 100%;		   /* da nur Fotos mit 20% Originalgröße genutzt werden */
		height: auto;
	}

#bild_einstellung /* der Impressionen am Seitenende */
	{
		
		display: flex;				/* ohne flex wird Seitenbreite genutzt */
		flex-wrap: wrap; 			/* ohne wrap erscheinen keine Fotos */
		width: auto;				/* da nur 20% Kopien der Fotos genutzt */	
		height: auto;				/* gesamate Bildhöhe nutzen */
	}

#impressionen_headline
	{
		text-align: center;
		margin: 3%;
	}
	
.impressionen  /*zentrieren der Fotos, wo möglich */
	{
		
		display: block;
		margin-left: auto;
		margin-right: auto;
		max-width: 100%;
		height: auto;
	}
		
/* auf der Seite Auswahl nach Zahlen-Seite */
#bild_container
	{
		width: auto;				/*da volle Bildbreite wird angezeigt, volle Seitenbreite auf Handy */
		/* margin: 5%; 				auto funktioniert nicht */
		position: relative;		/* sonst rutscht Overlaytext unters Foto */
		float: right; 			/* left; */
		height: auto;		/*da nur Fotos mit 20% Originalgröße genutzt werden */
	}

#startbild_overlay 
	{
	  position: absolute; 
	  bottom: 5%; 			/* nur zum Ausgleich der aufgetretenen Verschiebung */
	  background: rgb(0, 0, 0);
	  background: rgba(0, 0, 0, 0.5); /* Black see-through */
	  color: #f1f1f1; 
	  width: 100%;
	  transition: .5s ease;
	  opacity:0;
	  color: white;
	  font-size: 120%;			/* 20px; */
	  padding: 2.5%;			/* Text ins Bild einpassen 20px; */
	  text-align: center;		/* justify; Blocksatz, bei Bildtitel text-align: center; */
	}

#startbild_container:hover #startbild_overlay 
	{
	  opacity: 1;
	}

/* Erzwungener Zeilenumbruch vor und nach Wörtern */
 .Zeilenumbruch_vor_Wort::before, .Zeilenumbruch_nach_Wort::after 
		{
            content: "\A"; /* \D Text kann noch angefügt werden "\A weiterer Text"; */
            white-space: pre; /*pre-line;  Leerzeile davor,  pre; setzt ein Leerzeichen davor */
        }
/* Bilderauswahl präsentieren */
.ctrls
	{
	display: flex;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3%;
	margin-bottom: 3%;
	}
	
.ctrls button
	{
		/* display: inline-flex; 
		margin-left: 20%; */
		padding: 1%;
	}
	
#weiter										/* Knopf vorwärts */
	{
		float: right;							/* Button an den rechten Rand */		
		/* margin-right: 3%;					/* Abstand zum rechten Rand */
	}

/* https://cssarrowplease.com/ */
.boxArrow 
{
	min-width: 10%;
	display: flex;
	flex-wrap: wrap;
	position: relative;
	background: lightgreen;		/* #88b7d5; */
	border: 4px solid darkgreen;	/* #c2e1f5; */
	margin-left: 1%;
	margin-right: 1%;			/* damit rechts und links auf dem Handy-Display ein Rand erscheint */
	border-radius: 10px;
	padding: 1%; 
	/* display: inline; Box zerlegt, block; Box über die ganze Seite */
}
#boxStartseite
	{
	margin-bottom: 1%;			/* damit die Spitze nicht in den Navigationstext sticht */
	margin-top: 3%;				/* sonst liegt die Box versetzt neben dem Foto */
	}
	
#boxKartenseite1
	{
	margin-bottom: 8%;			/* damit die Spitze nicht in die Karte sticht */
	margin-top: 1%;				
	}

#boxKartenseite2
	{
	margin-bottom: 8%;			/* damit die Spitze nicht in die Karte sticht */
	margin-top: 1%;				
	}	
	
.boxArrow:after, .boxArrow:before 
{
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.boxArrow::before		/* egal ob : oder ::, nach jedem Wort wird umgebrochen? display: block; funktioniert nicht */
	{
		content: "";
	}
	
.aboxArrow:after 
{
	border-color: rgba(136, 183, 213, 0);
	border-top-color: darkgreen;		/* #88b7d5; */
	border-width: 30px; /* funktiniert nicht mit %*/
	margin-left: -30px; 
}
.boxArrow:before 
{
	border-color: rgba(194, 225, 245, 0);
	border-top-color:  darkgreen;	/* solid #c2e1f5; */
	border-width: 36px; 
	margin-left:  -36px; 
}
#zentriert {
  margin-left: auto;
  margin-right: auto;
}
.boxText	
	{
	padding-right: 2%;
	text-align: center;
	overflow: auto;   /* auto - Similar to scroll, but it adds scrollbars only when necessary, hidden; */
	hyphens: auto;
	}

.boxHinweis
	{
		margin: auto;
		
		/*text-align: center; funktioniert nicht */
		text-shadow: 2px 2px 5px yellow; /* blur effect (5px) to the shadow: */
		overflow: auto;    /*auto - Similar to scroll, but it adds scrollbars only when necessary, hidden; */
	}	

/* für JavaScript Kopf */
.headerColor 
	{
		background-color:  green;
	}

#headerDescription 						/* für JavaScript Titel im Kopfbereich */
	{
		/* clear: both; */
		/*margin: 1%;	 5px; */
		padding: 0% 5% 2% 5% ;	/* 8px; */
		margin-top: -3%;
		color: white;
	}

/* Hauptnavigation Startseite https://css-tricks.com/triangle-breadcrumbs/ */

.breadcrumb 
{ 
	
	/*display: flex;
	float: none;
	 display:line;  flex; */
	  list-style: none; 
	  overflow: hidden; 
	  margin-left: -5%;
	  margin-right: 5%;
  
}
.breadcrumb li 
{ 
	float: left; 
}
.breadcrumb li a 
{
	  color: white;
	  text-decoration: none;  
	  padding:     2em 0 2em 3em; /* 2% 0 2% 20%; 10px 0 10px 65px;*/
	  background: brown; /* fallback color */
	  background: hsla(34,85%,35%,1); 
	 
	  position: relative; 
	  display: block;
 }

.breadcrumb li a::after { 
	  content: " "; 
	  display: block; 
	  width: 0; 
	  height: 0;
	  border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
	  border-bottom: 50px solid transparent;
	  border-left: 30px solid hsla(34,85%,35%,1);
	  position: absolute;
	  top: 50%;
	  margin-top: -50px; 
	  left: 100%;
	  z-index: 2; 
}

.breadcrumb li a::before { 
	  content: " "; 
	  display: block; 
	  width: 0%; 
	  height: 0%;
	  border-top: 50px solid transparent;       
	  border-bottom: 50px solid transparent;
	  border-left: 30px solid white;
	  position: absolute;
	  top: 50%;
	  margin-top: -50px; 
	  margin-left: 1px;
	  left: 100%; 
	  z-index: 1; 
}

.breadcrumb li:first-child a 
{
	margin-left: 3%;	/* padding-left: 3%; Abstand links 0px; */
}
.breadcrumb li:nth-child(2) a       { background:        hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(3) a       { background:        hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(4) a       { background:        hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(5) a       { background:        hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }

/*
.breadcrumb li:last-child a {
  background:transparent !important;
  color: darkgreen;
  pointer-events: none;
  cursor: default;  
}


.breadcrumb li:last-child a::after { 
  border: 0; 
}
*/ 
.breadcrumb li a:hover { 
	background: hsla(34, 85%, 25%, 1); 
}
.breadcrumb li a:hover:after { 
	border-left-color: hsla(34, 85%, 25%, 1) !important; 
}

/* ------- Meldung im Div-Container erscheint auf dem Bildschirm und verschwindet rechts, fortlaufende Schleife ---------------- */
.ticker
	{
	padding: 1%;
	background: darkred;
	position: relative;
	animation: myticker 25s infinite;
	color: white;
	text-align: center;
	}

@keyframes myticker 
{
  from {left: -10%;}   to {left: 110%;}
}

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

/*--- Wandertagebuch --- */
/* animierte Meldungen ohne <MARQUEE> aber leider auch ohne Grafiken, infinite = fortlaufende Schleife  */
#zug 		
{
	margin-top: 5%;
	position: relative;
	animation: myLok 60s infinite;
	display: inline;
	color: darkred;
}

@keyframes myLok 
{
   from {right: -100%;}   to {right: 350%;}
}

#kalenderBreite
	{
		
		font-size: 1.5em;
		margin: 5%;
		/* background: white;     durchsichtig */
	}

.calendar 
{
   /* position: absolute;   Kalender liegt über Webseite */	
  
  top: 5%;
  /* margin: -145px 0px 0px -140px; 
	
  border:2px solid black;
  border-radius: 4px; */
	
  overflow: hidden; 
  margin: 3%;
  padding: 1%;
  background-color: lightyellow;

}
.ui-datepicker-header 		/* Überschrift Kalender */
{
  left: 50%;
  /*height: 50%;    50px; */
  line-height: 50px;   /*  10%;*/
  color: blue; /* #654321; */
   background: olive;	/* #987456;*/
  margin-bottom: 10px;
}
.ui-datepicker-prev,
.ui-datepicker-next {
  width: 20px;
  height: 20px;
 /* text-indent: 9999px; */
  border: 2px solid white;
  border-radius: 100%;
  cursor: pointer;
  overflow: hidden;
  margin-top: 12px;
}
.ui-datepicker-prev 
{
  float: left;
  margin-left: 1%; /* 12px; */
  background: white;	/* black */
  
}
.ui-datepicker-prev:after {
  transform: rotate(45deg);
  margin: -43px 0px 0px 8px;
}

.ui-datepicker-prev:after /*,.ui-datepicker-next:after */
{
  content: '\21D1\ Teste es!';
  position: absolute;
  display: block;
  width: 4px;
  color: red;
  height: 4px;
  border-left: 2px solid green;
  border-bottom: 2px solid green;
}

.ui-datepicker-next 
{
  float: right;
  margin-right: 1%; 	/* 12px; */
  background: white;	/* black */
}
.ui-datepicker-next:after {
  transform: rotate(220deg); /* -135 */
  margin: -43px 0px 0px 6px;
}

.ui-datepicker-next:after 
{
  content: '';
  position: absolute;
  display: block;
  width: 4px;
  color: red;
  height: 4px;
  border-left: 2px solid green;
  border-bottom: 2px solid green;
}

/* beim Anklicken der Kalenderschaltung */
.ui-datepicker-prev:hover,
.ui-datepicker-next:hover,
.ui-datepicker-prev:hover:after,
.ui-datepicker-next:hover:after 
{
  border-color: orange; 
}
.ui-datepicker-title 
{
  text-align: center;
  font-weight:900;
  color: orange;    /*lightblue; */
}
.ui-datepicker-calendar 
{
  width: 10%;				/* 100% */
  text-align: center;
}
.ui-datepicker-calendar thead tr th span 
{
  display: block;
  width: 40px;
  color: darkgreen;
  margin-bottom: 5px;
  font-size: 13px;
}
.ui-state-default 
{
  display: block;
  text-decoration: none;	/* Datumsfeld */
  color: blue;
  line-height: 40px;
  font-size: 12px;
}

.ui-state-default:hover 
{
  background:yellow;
}
.ui-state-highlight {
  color: blue;			/* eingegbener Tag */
}
.ui-state-active {
  color: green;
  font-weight:900;
}

/* Auswahlliste von Wanderberichten */
option
	{
	font-family: Verdana, sans-serif;
	font-size: 	2em;	
	margin: 20% 0% 20% 0%;		/* Maßeinheit nötig */
	padding: 2%;
	color: darkgreen;
	background-color: lightyellow;
	display: block;				/* entsprechend Textlänge bzw. über die ganze Seitenbreite */
	clear: both;
	float: left;
	
	}

label
	{
	padding:2%;
	color: white;
	background-color: olive;
	text-align: center;
	font-size: 	1.5em;	
	display: inline-block;			/* flex-wrap;	Länge an Text angepasst, block; reicht über die ganze Seitenbreite */
	clear: both;
	}

/* Mit CSS wird jedem Textabsatz ein leeres Pseudoelement mitgegeben, das die Höhe des gefloateten Vorgängerelements berücksichtigt. */
label:after { 
  content: ""; 
  display: block; 
  clear: both; 
	}

.untenRand
	{
	margin-bottom: 100px;
	}

.zentriert
	{
	text-align: center;	
	}	

.bild_einstellung 	/* img */
	{
		position: relative;	
		max-width: 100%;				/*die volle Bildbreite wird angezeigt = volle Seitenbreite auf Handy */
		height: auto;
		display: block;
		margin-bottom: 10%;
		}	

/* Auswahl nach StationsNr */
#stationsbeschreibung 
	 {
		background-color: beige; /*#FFFFFF; weiß */
		padding: 2%;
	 } 

#gallery
	{
		margin: auto; 				/*  20% verkleinert auch die knöpfe,	 auto bewirkt nichts */
		margin-bottom: 1%;
	}	
#gallery img 
	{
		/* border: 5px solid white ;  funktioniert nicht mit % deshalb weglassen */
		 width: 80px;			/* 	5vw;	 3.5%; alle 28 nebeneinander, % zu Bildschirm Auflösung*/
		height: auto;
	}	

/* Slideshow container */
.mySlides1, .mySlides2 
{
display: none
}

.slideshow-container 
{
  /* max-width: 100%;		100%; 1000px;  auto;= nutzt immer den vollen Bildschirm */
  position: relative;
  margin: auto;
 
}

/* Next & previous buttons */
.prev, .next 
{
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;				/* lime;white; */
  font-weight: bold;
  font-size: 2em;			/* für größere Anfasser < >,  18px; */
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a grey background color */
.prev:hover, .next:hover 
{
  background-color: #f1f1f1;
  color: darkred;                /* black; */
}