/*@import url('https://fonts.googleapis.com/css?family=Poppins');*/
 
/* poppins-regular - latin-ext_latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v19-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/poppins-v19-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/poppins-v19-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/poppins-v19-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/poppins-v19-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/poppins-v19-latin-ext_latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
}

/* Figtree - latin-ext_latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Figtree/Figtree-VariableFont_wght.ttf'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/Figtree/Figtree-VariableFont_wght.ttf') format('truetype'), /* IE6-IE8 */
       url('../fonts/Figtree/Figtree-VariableFont_wght.ttf') format('truetype'), /* Super Modern Browsers */
       url('../fonts/Figtree/Figtree-VariableFont_wght.ttf') format('truetype'), /* Modern Browsers */
       url('../fonts/Figtree/Figtree-VariableFont_wght.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/Figtree/Figtree-VariableFont_wght.ttf') format('truetype'); /* Legacy iOS */
}

// <weight>: Use a value from 300 to 900
// <uniquifier>: Use a unique and descriptive class name

.figtree-varWght750 {
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

 :root {
 --widthimgs: -15240px;
 --runstate: paused;
 }
 
 /*@keyframes slide {
 	from {left: 0px;}
 	to {left: var(--widthimgs);}
 }*/
 
 bilderstartdiv { 	
  display: flex;
  width: max-content;
  will-change: transform;
  transition: transform 2.3s ease-in-out;
 	/*
  will-change: transition-duration;
  will-change: transition-timing-function;
  transition-timing-function: ease-in-out;
  transition-duration: 0.5s;
 	animation-name: slide;
 	animation-duration: 24s;
 	animation-timing-function: linear;
 	animation-direction: normal;
  animation-iteration-count: infinite;
  animation-play-state: var(--runstate);*/
 }
 
 .bilderstartdiv > img {
  flex-shrink: 0;
  display: inline;
}

.bsd{
	display: flex;          /* 🔥 key */
  flex-direction: row;    /* horizontal */
  }
.bsdH{
	display: flex;          /* 🔥 key */
  flex-direction: row;    /* horizontal */
  max-height: 95lvh;
  }
  
.BilderStartHDivS img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

  bilderstartHdivS {
  	display: none;
 	animation-name: slide;
 	animation-duration: 2.3s;
 	animation-timing-function: linear;
 	animation-direction: normal;
  animation-iteration-count: infinite;
  animation-play-state: var(--runstate);
  white-space: nowrap;
 }
 /*
 BilderStartH {
 display: none;
 }*/
 
body {
	font-family: 'Figtree', sans-serif;
   font-weight: 350;
   font-size: 12px;
   /*font-family: 'Poppins', sans-serif;
   
   font-weight: lighter;*/
   color: #333333;
   background-color: #FFFFFF;/*#F9F9F9;*/
}
 bdy {
	font-family: 'Figtree', sans-serif;
   font-weight: 350;
   font-size: 12pt;
   color: #333333;
   /*visibility: hidden;*/
/*   background-color: #F9F9F9;*/
}
p {
	font-family: 'Figtree', sans-serif;
   font-weight: 350;
   width: 20%;
   /*visibility: hidden;*/
}

desc {
	font-family: 'Figtree', sans-serif;
   font-weight: 350;
   display: none;
}

.index{
font-family: 'Figtree', sans-serif;
   font-weight: 300;
 text-align: center;
 font-size: 20px;
 color: #000000;
 }

.index a{
font-family: 'Figtree', sans-serif;
   font-weight: 300;
 text-align: center;
 font-size: 20px;
 color: #000000;
 }
 
h1 {
   font-family: 'poppins';
   font-weight: 800;
	/*font-weight: lighter;*/
   font-size: 22pt;
   color: #AAAAAA; /*#a7ad2a;#FFF0FF*/
   z-index: 3;
   position: absolute;
   /*top: 10%;
   left: 3%;*/
   /*border-bottom: 3px solid #000000;*/
}
 
h2 {
	font-family: 'Figtree', sans-serif;
   font-weight: 500;
   /*font-weight: lighter;*/
   font-size: 16px;
/*   font-weight: bold;*/
   color: #000000;
  /* border-bottom: 1px solid #C6EC8C;*/
}
h3 {
   font-family: 'Figtree', sans-serif;
   font-weight: 400;
   font-size: 14px;
  /* font-weight: bold;*/
   color: #000000;
   border-bottom: 1px solid #C6EC8C;
}
/*ul.sidenav*/ 
w3-sidebar {
    list-style-type: none;
    margin-top: 2%;
    margin-left: 2%;
    margin-right:  5%;
    margin-bottom: 10%;
    /*margin: 0;*/
    padding:  0 2% 0 2%;
    width: 14%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}


/*ul.sidenav li a {*/
/*w3-sidebar */
li a{
	  font-family: 'Figtree', sans-serif;
   font-weight: 300;
     font-size: 12px;
    display: block;
    color: #000;
    padding: 8px 6px;
    text-decoration: none;
    word-wrap: break-word;
    word-break: normal;
}

.col-container{
   position: relative;
   /*padding: 50px 50px 20px 20px; /*top right bottom left
   margin-top: 50px;
   margin-right: 20%;*/
   display: -webkit-flex;
   flex-direction: row;
     /* -moz-flex-direction: column-reverse;
   -webkit-flex-direction: column-reverse;*/
   display: flex;
   align-content: stretch;
   width: 100%;
   height: auto;
}
.col-item {
    width: 85%;
    -webkit-flex: 8;
    flex: 1 5 auto;
    height: auto;
/*    margin: 10px 10px 10px 10px;*/
}
.flex-cont-col {
	   position: relative;
   /*padding: 50px 50px 20px 20px;*/ /*top right bottom left*/
   /*margin-top: 10%;
   margin-left: 3%;
   margin-right: 10%;*/
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
	-webkit-align-content: center;
	align-content: center;
	-webkit-justify-content: center;
	justify-content: center;
   max-width: 80%;
   max-height: 100lvh;
}
@media only screen and (orientation: landscape){
.col-item-nav {
	/*-moz-column-count: 1;
	-webkit-column-count: 1;
	-webkit-flex: 1;*/
	 flex: 4 1 auto;
    height: auto;
    justify-content: right;
/*    margin: 10px 10px 10px 10px;*/
}
}
.flex-container{
   position: relative;
   /*padding: 50px 50px 20px 20px;*/ /*top right bottom left*/
   /*margin-top: 10%;
   margin-left: 3%;
   margin-right: 10%;*/
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
	-webkit-align-content: center;
	align-content: center;
	-webkit-justify-content: center;
	justify-content: center;
   /*max-width: 80%;*/
   height: auto;
}
.flex-item {
    width: 100%;
    height: auto;
    margin: 20px 20px;
}
.flex-item-button{
	width: 5%;
	height: 80lvh;
}
.flex-item-ctr{
	width: 90%;
	height: 80lvh;
	}

.flex-text{
	color: #222222;
	margin: 10% 10%;
	   font-family: 'Figtree', sans-serif;
   font-weight: 300;
	/*font-weight: lighter;*/
   font-size: 16pt;
   color: #222222;//#a7ad2a;
   z-index: 3;
   position: absolute;
   width: 80%;
}

.flex-item.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 200px;
}
.flex-item.img img{
    width: 200px;
    max-height: 100px;
    height: auto;
}

.bildit:hover .img2 img{
/*display: inline;*/
visibility: visible;
align-content: center;
max-width: 80%;
max-height: 75%;
height: auto;
}
.bildit:hover .img3 img{
/*display: inline;*/
visibility: visible;
max-width: 80%;
max-height: 75%;
height: auto;
}
.bildit{
display: inline;
width: 200px;
max-height: 20%;
height: auto; /*100px;*/
}
.img2{
/*visibility: hidden;*/
position: fixed;
left: 50%;
top: 30px;	
max-width: 80%;
max-height: 45%;
height: auto;
display: none;
}
.img3{
visibility: hidden;
position: fixed;
left: 200px;
top: 30px;	
max-width: 80%;
max-height: 45%;
height: auto;
}
.img2 img{
	visibility: hidden;
	position: fixed;
left: 20%;  400px/
top: 30px;
    max-width: 70%;
    max-height: 55%;
    height: auto;
 }
.img3 img{
	visibility: hidden;
	position: fixed;
left: 200px;
top: 30px;	
    max-width: 70%;
    max-height: 45%;
    height: auto;
 }

 .index.img{
 visibility: visible;
 display:none;
 margin: auto;
 }

/*img.hidden{
	display: none;
}*/
@media only screen and (min-width:1300px){
ul.sidenav li a {
	  font-family: 'Figtree', sans-serif;
   font-weight: 300;
     font-size: 16px;
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
}

@media only screen and (orientation: portrait){
ul.sidenav li a {
	  font-family: 'Figtree', sans-serif;
   font-weight: 300;
     font-size: 22px;
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
.col-item {
    width: 20%;
    -webkit-flex: 5;
    flex: 1 5 auto;
    height: 100%;
/*    margin: 10px 10px 10px 10px;*/
}
.col-item-nav {
	-moz-column-count: 4;
	-webkit-column-count: 4;
	 -webkit-flex: 4;
	 flex: 1 1 auto;
    height: auto;
    justify-content: right;
/*    margin: 10px 10px 10px 10px;*/
}
.w3-button {
font-size: 24pt;
}
desc {
font-size: 20pt;
}
}