/*
Theme Name: Kemnater Achsen 2020
Theme URI: http://kemnater-achsen.de
Author: Kemnater Achsen Gruppe
Description: Theme für Kemnater Achsen
Version: 1.0
*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);

/* Allgemeines */
html, body, div {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;}

body {
	line-height: 1;
	-webkit-text-size-adjust: none;
	background:#fff;
	font-size:22px;
	line-height: 22px;
	color: black;
	word-wrap:break-word !important;
	font-family: 'Open Sans', sans-serif;
}

html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
ol, ul {font-size: 14px;list-style: initial;}
il {padding-left: 15px;list-style-type: circle;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
mark {background-color: transparent;color: inherit;}

img.alignnone {width:100%;}

section {padding-top: 90px;}
#container {margin: 0 auto;max-width: 890px;}
p {font-size: 15px;text-align: justify;}
p2 {font-size: 11px;text-align: justify;}
h1, h2, h3, h4, h5, h6 {font-family: 'Bree Serif', 'serif';margin:0px;}
h1{font-size: 35px; font-weight: bold;}
h2{font-size: 25px; font-weight: bold;}
h3{font-size: 20px; font-weight: bold;}
h4{font-size: 18px; font-weight: bold;}
td {font-size: 14px;text-align: justify; padding: 5px}
th {font-size: 14px;text-align: justify; padding: 5px; font-weight: bold;}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.toggle,
[id^=drop] {
	display: none;
}



/* Clear floats after the columns */
section:after {
	content: "";
	display: table;
	clear: both;
  }
/* Giving a background-color to the nav container. */
nav { 
	margin:0;
	padding: 0;
	background-color:black;
	height: 4em;
	position:fixed;
	top:0px;
	z-index:1000;
	width:100%;
}

#logo {
	display: block;
	padding: 0 30px;
	float: left;
	margin:5px;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	float: right;
	/*padding: 22px 0 0 0;*/
	margin:0;
	list-style: none;
	position: relative;
	}
	
/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	float: left;
    background-color:black;
	}

/* Styling the links */
nav ul#menu-navigation a {
	display: block;
	margin: 1px 40px;
	color: #ffca06;
	font-size: 17px;
	text-decoration: none;
	padding: 5px 13px 5px 13px;
}

nav ul#menu-navigation a:hover {color:black;}

/* retester la partie dessous*/
nav ul li a.haupt {color:#ffca06 !important;}
nav ul li a.haupt:hover {color:black !important;}
nav ul ul li { padding-left: 20px;}
nav ul li ul li { color:#ffca06!important; border-bottom: 1px solid #ffca06; border-top: 1px solid #ffca06;}
nav ul li ul li a {color:#ffca06!important;}
nav ul li ul li:hover a { color:black !important; }
nav ul li ul li:hover { background-color:#ffca06 !important; }

/* Background color change on Hover */
nav a:hover { 
	background-color: #ffca06; }

nav .current-menu-item a, nav .current-menu-item .menu-item-has-children a {
    color:#000000!important;
    text-decoration:none;
    background-color: #ffca06;}

/* fin de la partie à tester*/

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
	/* has to be the same number as the "line-height" of "nav a" 
	top: 50px; */
}

/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	float:none;
	display:list-item;
	position: relative;
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top:-60px;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	left:170px; 
}

/* Logo*/
.logo {padding:0 !important;display:unset !important}
a.logo:hover {background-color:unset!important;}

/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }

/* FOOTER */
footer {width:100%; position: absolute;  background-color: black;	font-family:'Open Sans', sans-serif;font-size:14px; text-decoration:none; color:#ffca06; padding-top: 10px;	padding-bottom: 10px;}
footer .impressum {float:left; padding: 0 30px; margin :0;}
footer .impressum a {color:#ffca06; }
footer .impressum a:hover {text-decoration:underline;}
footer .copyright {float:right; padding: 0 30px 0 0;margin :0;}

/******************************/
/*   MODIFICATION HOME PAGE   */
/*       PB image et Text     */
/******************************/
.row {
	display: flex;
	flex-wrap: wrap; /* Permet à la deuxième colonne de passer en dessous pour les petits écrans */
  }
  .halftext{flex: 1; /* Les deux éléments prennent la moitié de l'espace */}
  .text {  margin: 20px; /* Ajoute un espacement autour des éléments */}
  .halfimg {
	display: flex; /* Utiliser Flexbox */
	justify-content: center; /* Centre horizontalement */
	align-items: center; /* Centre verticalement */
	flex: 1; /* Les deux éléments prennent la moitié de l'espace */
	box-sizing: border-box; /* Inclut le padding dans la taille totale */
   /* background-color:white;*/
  }
  .halfimg img {
	max-width: 100%; /* Image s'ajuste pour être toujours contenue dans la moitié de la largeur */
	height: auto; /* Garde le ratio hauteur/largeur */
  }
  
  @media (max-width: 768px) {
	.row { flex-direction: column; /* Pour les petits écrans, aligne les éléments en colonne */ }
	.halftext, .halfimg {   width: 100%; /* Les éléments prennent toute la largeur */ }
	.halftext {  order: 2; /* Change l'ordre de l'affichage pour que le texte soit en dessous */}
	.halfimg {  order: 1; /* Change l'ordre de l'affichage pour que l'image soit au-dessus */}
  }
/************/
/*   TEXT   */
/************/
.w1 { width:100%;padding:20px 40px 20px 40px;}
.w3-container::after, .w3-container::before, .w3-row::after, .w3-row::before, .w3-row-padding::after, .w3-row-padding::before {
    display: table;
	clear: both;
	content: "";}
.w3-red, .w3-hover-red:hover { color: #fff !important; background-color: #f44336 !important;}
.w3-col.m6, .w3-half { width: 49.99999%;}
.w3-half { float: left;}
.w3-third {width:33.33%;float: left;text-align: center;}
.w3-half .img-teil { width:100%;}
.w3-text {padding:20px 40px 20px 40px;}
.reverse {float: right!important;}
.haupttitle { text-align: center; padding: 20px 40px 20px 40px;margin-top: 20px; margin-bottom: 20px;color:#ffca06;}
.haupttitlepunkt { text-align: center; padding: 20px 40px 20px 40px;margin-top: 20px;margin-bottom: 20px;}

/* AJOUT COLLONE*/
/* Conteneur principal de la colonne */
.kemnater-colonne {
    width: 100%;
    display: flex;
    flex-direction: column;
	/*max-width: 900px;*/
	margin: 0 auto;
}

/* Chaque élément de texte et d'image */
.kemnater-item {
    width: 100%;
    display: flex;
    flex-direction: column; /* Forcer l'affichage en colonne */
    padding: 20px 0;
}

/* Conteneur de texte */
.kemnater-text-container {
    padding: 20px;
    width: 100%;
}

.kemnater-text-content {
    font-size: 16px; /* Personnaliser la taille du texte si nécessaire */
}

/* Conteneur de l'image */
.kemnater-image-container {
    width: 100%;
    text-align: center;
}
.kemnater-img {
	/*max-width: 900px;*/
	width: 100%;
}

/* FIN AJOUT*/

/*************************/
/*   UNTERSCHRIFT BILD   */
/*************************/
piccap {font-size: 13px;display: inline-block;text-align: center;font-style: italic;width: 100%; }
.histo {background-color: #dbaf00 ;}
.unterschritbackground {background-color:#ffca06; color:black;}


/************ SLIDER *************/


/************ FIN SLIDER *************/




/************/
/*   HOME   */
/************/
/* Top Bild */
#topbild {width: 100%;height: auto; position: relative;}
#topbild img {width: 100%;margin-top: -7px;}
span.Top-Top-Satz {position: absolute;top: 30%;left: 10%;color: white;line-height: 1.3; background-color: #4f48488a;border-radius: 3px; padding: 10px;}
span.Top-Bottom-Satz {position: absolute;top: 60%;left: 50%;color: white;line-height: 1.3;background-color: #4f48488a;border-radius: 3px; padding: 10px;}
span.eyecatcher {position: absolute;top: 0;left: 80%;background-color: #ffca06;border-radius: 20px;padding: 5px;text-align: center;line-height: 0.8;}
span.eyecatcher a {color: black;font-size: 12px;}

/******************/
/*   CODE SEITE   */
/******************/
#codeeingeben {width: 100%;text-align: center;}
.submitbutton {
	border: none;
	color: black;
	padding: 10px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 20px;
	margin: 20px 12px;
	cursor: pointer;
	border-radius: 10px;
}

.submitbutton:hover {
 font-weight: bold;
}
.submitcolorcode {background-color: #ffca06;}

/***************/
/*   ÜBER UNS  */
/***************/
.gruppefoto{width:100%;}

.mitglieder {padding:40px 40px 40px 40px;
	height:auto;
	overflow: hidden;
	top:0px;
	left:0px;
	margin:0px auto; 
    position: relative;
    text-align:center;
	}

.namemitglieder {z-index:100; background-color: black;line-height: 35px; }

.box1{ width: 350px; 
	height: auto; 
	margin:30px auto;
	/*vertical-align:middle;
	display:inline-block;*/
	position: relative;
	text-align:center;
	float: left;
	margin-left: 20%;
}

.box2{ width: 350px; 
	height: auto; 
	margin:30px auto;
	/*vertical-align:middle;
	display:inline-block;*/
	position: relative;
	text-align:center;
	float: right;
	margin-right: 20%;
}

.flip-item-wrap {
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-ms-perspective: 800px;
	-o-perspective: 800px;
	perspective: 800px;
	}

	.flip-item-wrap img {
		width: 100%;
		height: auto;
		display: block;
		margin: 0;
		}

 .flip-item-wrap input {
	  display: none;
      }
      .flip-item-wrap .fake-image {
      visibility: hidden;
	  }
	  .flip-item {
		display: block;
		width: 100%;
		height: 100%;
		float: left;
		position: absolute;
		top: 0;
		left: 0;
		cursor: pointer;
		color: #fff;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-transition: -webkit-transform 1s;
		-moz-transition: -moz-transform 1s;
		-o-transition: -o-transform 1s;
		transition: transform 1s;
		}
		.flip-item figure {
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		margin: 0;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		-o-backface-visibility: hidden;
		backface-visibility: hidden;
		}
		.flip-item .back {
		width: 100%;
		display: block;
		margin: 0;
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
		-ms-transform: rotateY(180deg);
		-o-transform: rotateY(180deg);
		transform: rotateY(180deg);
		}
		.flipper:checked + .flip-item {
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
		-ms-transform: rotateY(180deg);
		-o-transform: rotateY(180deg);
		transform: rotateY(180deg);
		}
	
		.flip-item-desc {
		background: rgba(0, 0, 0, 0.5);
		border-radius: 20px;
		width: 100%;
		height: 99%;
		padding: 5%;
		position: absolute;
		top: 0;
		left: 0;
		text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9);
		overflow: hidden;
		}

/***************/
/*    ACHSEN   */
/***************/
#listeachsen {padding:40px 40px 40px 40px;
height:auto;
overflow: hidden;
top:0px;
left:0px;
width: 100%; 
margin:0px auto; 
position: relative;
text-align: center;
}

.boxachsen{ 
	width: 325px; 
	margin:10px auto;
	vertical-align:middle;
	display:inline-block;
	overflow: hidden; 
	position: relative;
	text-align: center;
}

.imgpin {width: 200px;margin: 20px;}
.titelpin {text-align: center; margin: 10px;}

/**************************/
/*      Haupt ACHSEN     */
/*************************/
/*.iframe-karte {width:100%; height:500px;}*/
h1.Top-Satz {position: absolute;top: 50%;left: 30%;color: white; background-color: #4f48488a;border-radius: 7px; padding: 10px 15px 10px 15px;}
.top-rahmen {border:solid 2px #ffca06; text-align: center;}
.top-uebersicht {font-size: 15px;font-style: italic; text-align: justify;position: relative;z-index: 3;}

/*********************/
/*    ACHSEN PUNKT   */
/********************/
/* bord jaune pour achse historique*/
.kindertoncolor {
	padding: 10px;
	background-color: #ffca06;}

/* bord jaune pour achse nature*/
.highlight-audio {
    border: 10px solid #ffca06;
}

.kinder-style {color: #ffca06;}

.submitcolorhisto {background-color: #dbaf00;}

/* TEST slideshow */
/* Style du conteneur du diaporama par défaut */

/*AJOUT COL*/
.colonne {
	/*max-width: 900px;*/
	margin: 0 auto;
	position: relative;
}
.top-uebersicht-col {font-size: 15px;font-style: italic; text-align: justify;position: relative;z-index: 3;border:solid 2px #ffca06;max-width: 900px;margin: 0 auto;}
.center{text-align: center; }
/*FIN AJOUT COL*/

#slideshow-container {
    position: relative;
    max-width: 100%;
    overflow: hidden;
}

/* Conteneur pour maintenir la hauteur constante */
#slideshow-wrapper {
    width: 100%;
  /*  padding-bottom: 50%;*/ /* Ajustez ce pourcentage pour changer la hauteur du diaporama */
	display: flex;
	flex-direction: column;
}

/* Style des images du diaporama */
.slide {
   /* position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
	background-color: #000;
	display: flex;
    flex-direction: column;*/
	position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: #000;
  display: flex;
  flex-direction: column;
}

.Topsatz-slide {
    position: absolute;
    top: 50%;
    left: 30%;
    color: white;
    background-color: #4f48488a;
    border-radius: 7px;
    padding: 10px 15px 10px 15px;
    transform: translate(-50%, -50%); /* Ajout de cette ligne pour centrer le titre */
}

.slide img { height: 100%;}
.slide .einfuehrbild { height: 600px;	object-fit: cover;}

.bildsup img {
  /*  max-height: 100%;
    width: auto;*/
  width: auto;
}

.bildsup {
    /*flex: 1; *//* Cela fait en sorte que bildsup occupe le reste de la hauteur disponible */
   /* overflow: hidden;*/
   position: relative;
  width: 100%;
  height: 600px;
  text-align: center;
  z-index: 1;
}

.bildseite img {
    max-height: 100%;
    width: auto;
}
.bildseite{
    flex: 1; /* Cela fait en sorte que bildsup occupe le reste de la hauteur disponible */
    overflow: hidden;
}

#prev-slide, #next-slide {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
    background-color: #000;
    color: #fff; /* Couleur de la police blanche */
    cursor: pointer;
    z-index: 2; /* Ajustez le z-index pour être au-dessus des autres éléments */
}

/* Ajoutez également une propriété z-index pour les légendes */
.bild-title {
  position: relative;
  font-size: 14px;
  padding: 5px 10px;
  box-sizing: border-box;
  height: 100%;
  z-index: 2;
}

#prev-slide {
    left: 0;
}

#next-slide {
    right: 0;
}

/* Styles pour les légendes */
.caption {
    position: absolute;
    bottom: 10px; /* Ajustez cette valeur selon votre besoin */
    left: 0;
    background: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
    color: #fff; /* Couleur du texte */
    width: 100%;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
	font-size: 14px;
  }

  @media (max-width: 1300px) {
	.bildsup {
		height: 450px; /* Réglez cette hauteur en fonction de vos besoins pour les petits écrans */
	  }
	  .slide .einfuehrbild { height: 450px;	}
}

@media (max-width: 899px) {
	#prev-slide, #next-slide {
		top: 35%;
	}
	.bildsup {
		height: 350px; /* Réglez cette hauteur en fonction de vos besoins pour les petits écrans */
	  }
	  .slide .einfuehrbild { height: 350px;	}

}

/* Ajustement pour les écrans plus étroits (par exemple, les téléphones portables) */
@media (max-width: 768px) {
    
	.Topsatz-slide { left: 40%;}

	.bildsup {
		height: 250px; /* Réglez cette hauteur en fonction de vos besoins pour les petits écrans */
	  }
	  .slide .einfuehrbild { height: 250px;	}
}

@media (max-width: 699px) {
	#prev-slide, #next-slide {
		top: 30%;
	}
}

@media (max-width: 599px) {
	#prev-slide, #next-slide {
		top: 25%;
	}
	.bildsup {
		height: 200px; /* Réglez cette hauteur en fonction de vos besoins pour les petits écrans */
	  }
	  .slide .einfuehrbild { height: 200px;	}
}

/* FIN TEST slideshow */

/**************************/
/*         AUDIO         */
/**************************/
.audio-item {margin: 20px;}


/**************************/
/*          WEG           */
/*************************/
.haupttitlehisto { text-align: center; padding: 20px 40px 20px 40px;margin-top: 20px;color:#dbaf00;}
td.check {text-align: center;}

table.achse.histo {border-collapse: collapse;  margin-left: auto;	margin-right: auto;margin-bottom: 20px;}
table.achse.histo thead th {border: 1px solid #dbaf00; padding:1px 5px 1px 5px!important;background-color:#dbaf00;}
table.achse.histo tbody td {border: 1px solid #dbaf00; padding:1px 5px 1px 5px!important;background-color:white;}
.zuruckhisto {text-align: center; width: 100%;display: inline-block; padding:10px 10px 0px 10px;font-size: 16px;color:#dbaf00; font-weight: bold;}
.zuruckhisto:hover {color:#dbaf00;}
.listachse {text-align: center;font-weight: bold; text-decoration:none!important ;}


table.achse {border-collapse: collapse;  margin-left: auto;	margin-right: auto;margin-bottom: 20px;}
table.achse thead th { padding:1px 5px 1px 5px!important;}
table.achse tbody td { padding:1px 5px 1px 5px!important;background-color:white;}
.zuruck {text-align: center; width: 100%;display: inline-block; padding:10px 10px 0px 10px;font-size: 16px;color:#008B06; font-weight: bold;}

.wegtitle {text-align: center; padding: 20px 40px 20px 40px;}

/* Media Queries
--------------------------------------------- */
@media all and (max-width : 1370px) {
	.Top-Top-Satz {font-size:30px !important;}
	.Top-Bottom-Satz {font-size:30px!important;}
}

@media all and (max-width : 1200px) {
	.Top-Top-Satz {font-size:25px !important;}
	.Top-Bottom-Satz {font-size:25px!important;}
	.wegtitle {font-size: 25px;padding: 10px 10px 2px 10px;}
	.karteweg {padding: 10px 2px 10px 2px!important;}
}

/* Version tablette/portable*/
@media all and (max-width : 998px) {
	section {padding-top: 80px;}

	a {text-decoration: underline;}

	#logo {
		display: block;
		padding: 0;
		width: 100%;
		text-align: center;
		float: none;
		margin: unset;
	}
	.haupttitle {margin-bottom:unset}
	.haupttitlepunkt {margin-bottom:unset}
	
	nav {
		margin: 0;
		height: unset;
		line-height: unset;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;
	}
	h1{font-size: 26px; font-weight: bold;}
	h2{font-size: 20px; font-weight: bold;}
	h3{font-size: 18px; font-weight: bold;}
	h4{font-size: 16px; font-weight: bold;}	

	.toggle {
		display: inline-block;
		background-color: black;
		color:#ffca06;
		font-size:17px;
		text-decoration:none;
		border:none;
		padding-left: 10px;
		position: absolute;
		top: 20px;	
	}

	.toggle:hover {
        background-color: #ffca06;
        color:black !important;
		padding-right: 20px;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

	nav ul {
		/*padding: 2px 30px 0 0;*/
		padding:unset;
	}
	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		}

	nav ul ul .toggle,
	nav ul ul a {
	padding: 0 40px;
	}

	nav ul ul ul a {
	padding: 0 80px;
    }
    
    nav a:hover { 
        background-color: #ffca06; }

 	nav ul ul ul a {
		background-color: black;
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
    nav ul ul ul a{
		padding:14px 20px;
		color:#FFF;
		font-size:17px; 
	}
  
    nav ul li ul li a { color:#ffca06 !important; }
    nav ul li:hover a { color:black}
    nav ul li ul li:hover a { color:black !important; }
	nav ul li ul li .toggle, nav ul ul a {
		background-color:black; 
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display:block ;
		/* display:none; EN ETTANT BLOCK ICI LE SOUS MENU ACHSEN REAPARAIT POUR LE PORTABLE...mais */
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 

	}

	/* Top Bild */
	#topbild img {margin-top: unset;}
	.Top-Top-Satz {font-size:20px!important;  }
	.Top-Bottom-Satz {font-size:20px!important;left: 30% !important; }
	/*#topbild {padding-top: 40px;}*/

	/*home*/
	.w3-half {
		float: left;
		width: 100%;
	}
}

@media all and (max-width : 590px) {

	.Top-Top-Satz {font-size:14px!important; }
	.Top-Bottom-Satz {font-size:14px!important;left: 15% !important;}
	h1.Top-Satz {left: 10%;}
	nav ul li {
		display:block;
		width: 94%;
	}

	.box1 {width: 300px;margin-left:unset;}
	.box2 {width: 300px;margin-right:unset;}
}