body{
  display:flex;
  margin: 0px;
  padding:0px;
  
  min-height: 100vh;
  /* min-height: 1080px; */
  
 /*  background-image: url('bg/All_web_fade.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center top; 
  background-color: #3A3A3A; */
  
  
   /* background-image: radial-gradient(800px at 50% -200px, #828282, #3A3A3A); */
  background-image: radial-gradient(800px at 50% -200px, #aa71fb, #50228f);
  Background-repeat: no-repeat;
  background-color: #50228f;
  color: whitesmoke;
  /*font-family: arial; */
  font-family: Roboto Condensed, sans-serif;
  font-style: normal;
  font-weight: 300;
  style-decoration: none;
  
  /*display: flex; 
   align-items: center;*/
   /*text-align: center;*/
   justify-content: center;
  
 
  
}

body b, strong {
    font-weight: 700;
}

/* ======== Google Font ======== */

/* roboto-condensed-300 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-condensed-v25-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/roboto-condensed-v25-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-condensed-v25-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-condensed-v25-latin-300.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-condensed-v25-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-condensed-v25-latin-300.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-300italic - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 300;
  src: url('/fonts/roboto-condensed-v25-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/roboto-condensed-v25-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-condensed-v25-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-condensed-v25-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-condensed-v25-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-condensed-v25-latin-300italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/roboto-condensed-v25-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/roboto-condensed-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-condensed-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-condensed-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-condensed-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-condensed-v25-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-italic - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/roboto-condensed-v25-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/roboto-condensed-v25-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-condensed-v25-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-condensed-v25-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-condensed-v25-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-condensed-v25-latin-italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-700 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/roboto-condensed-v25-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/roboto-condensed-v25-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-condensed-v25-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-condensed-v25-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-condensed-v25-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-condensed-v25-latin-700.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-700italic - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 700;
  src: url('/fonts/roboto-condensed-v25-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/roboto-condensed-v25-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-condensed-v25-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-condensed-v25-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-condensed-v25-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-condensed-v25-latin-700italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* ======== End Google Roboto ======== */

/* ======== Google Montserrat ======== */


/* montserrat-100 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  src: url('/fonts/montserrat-v25-latin-100.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/montserrat-v25-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/montserrat-v25-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/montserrat-v25-latin-100.woff') format('woff'), /* Modern Browsers */
       url('/fonts/montserrat-v25-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/montserrat-v25-latin-100.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/montserrat-v25-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/montserrat-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/montserrat-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-100italic - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100;
  src: url('/fonts/montserrat-v25-latin-100italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/montserrat-v25-latin-100italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/montserrat-v25-latin-100italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/montserrat-v25-latin-100italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/montserrat-v25-latin-100italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/montserrat-v25-latin-100italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* ======== End Google Montserrat ======== */


/* ======== End Google Font ======== */


#BGVideo {
  position: fixed;
  right: 0;
  top: 0;
  min-width: 100%;
  min-height: 100%;
}
#PauseBtn {
	position: fixed;
	right: 5px;
	top: 5px;
	
  width: 60px;
  font-size: 14px;
  padding: 5px;
  border: none;
  border-radius: 6px;
  background: #000;
  color: whitesmoke;
  cursor: pointer;
  z-index: 4;
  opacity: 0.6;
  transition: 1.4s;
}

#PauseBtn:hover {
  background: #2A2A2A;
  color: whitesmoke;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
  opacity: 1.0;
  transition: 0.4s;
}


.bggrafic {
display: block;
min-width: 100%;
max-height: 10px;
opacity: 1.0;
margin-top: 0px;
margin-bottom: -400px;
 /* background-image: url("svg\me_r_v1.svg.sv");
 repeat: norepeat; */
}

.bggraficpic1 {
position: relative;
width: 40%;
float: right;
right: -8%;
bottom: 0px;
opacity: 1.0;
 /* background-image: url("svg\me_r_v1.svg.sv");
 repeat: norepeat; */
}

.bggraficpic2 {
position: relative;
width: 60%;
float: right;
right: -12%;
bottom: -50px;
opacity: 1.0;
 /* background-image: url("svg\me_r_v1.svg.sv");
 repeat: norepeat; */
}
.bggraficpic3 {
position: relative;
width: 40%;
float: right;
right: -10%;
bottom: -100px;
opacity: 1.0;
 /* background-image: url("svg\me_r_v1.svg.sv");
 repeat: norepeat; */
}



/* ======== Responsive Parts ======== */


 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 400px) {

.container{
	width: 320px;
	left: 6%;
	}
	
.container .card {
 position: relative;
 top: 80px;
}

.inhaltbox:hover {  
    background-image: radial-gradient(290px at 50% -140px, #828282, #2A2A2A);
}

.inhaltbox {
	background-image: radial-gradient(290px at 50% -80px, #828282, #2A2A2A);
	}

.inhaltbox img{
  width: 100%;
}


}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 450px) {
	
.container{
    width: 370px;
	left: 6%;
	}
	
.container .card{
  position: relative;
 top: 80px;
}	

.inhaltbox {
	background-image: radial-gradient(290px at 50% -140px, #828282, #2A2A2A);
	}


.inhaltbox:hover {  
    background-image: radial-gradient(290px at 50% -80px, #828282, #2A2A2A);
}

.inhaltbox img{
  width: 100%;
}

.bggrafic {
display: block;
height: 200px;

/* position: absolute; */
/*  top: 2020px; */
 /* right: 0px; */
 width:250px;
 height: 250px;
  opacity: 1.0;
 /* background-image: url("svg\me_r_v1.svg.sv");
 repeat: norepeat; */
}




}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 860px) {

	.container{
	width: 780px;
	left: 2%;
	}	
	.container .card {
  position: relative;
 top: 80px; 
}

.inhaltbox {
	background-image: radial-gradient(380px at 50% -200px, #828282, #2A2A2A);
}

.inhaltbox:hover {  
    background-image: radial-gradient(380px at 50% -80px, #828282, #2A2A2A);
}

.inhaltbox img{
  width: 60%;
}

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 1100px) {
	
.container{
	width: 860px;
	left: 4%;
		}
.container .card{
  position: relative;
 top: 80px;
}

.inhaltbox {
background-image: radial-gradient(380px at 50% -200px, #828282, #2A2A2A);
}
.inhaltbox:hover {  
    background-image: radial-gradient(380px at 50% -80px, #828282, #2A2A2A);
}

.inhaltbox img{
  width: 60%;
}

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1360px) {
	
.container{
		width: 1280px;
	left: 0%;	
	}
	.container .card{
  position: relative;
 top: 80px;
}

.inhaltbox {
background-image: radial-gradient(680px at 50% -380px, #828282, #2A2A2A);
}

.inhaltbox:hover {  
    background-image: radial-gradient(680px at 50% -200px, #828282, #2A2A2A);  
}

.inhaltbox img{
  width: 40%;
}

.bggrafic {
display: block;
/* position: absolute; */
/* top: 950px;*/
 right: 60px;
 width:420px;
 height: 420px;
  opacity: 1.0;
 /* background-image: url("svg\me_r_v1.svg.sv");
 repeat: norepeat; */
}

.bggrafic1 {
display: block;
/* position: absolute; */
/* top: 2420px;*/
 right: 10px;
 width:750px;
 height: 750px;
  opacity: 1.0;
 /* background-image: url("svg\nyg-a4.sv");
 repeat: norepeat; */
}

.bggrafic2 {
display: block;
/* position: absolute; */
/* top: 3650px;*/
 right: 50px;
 width:380px;
 height: 380px;
  opacity: 1.0;
 /* background-image: url("svg\nyg-a4.sv");
 repeat: norepeat; */
}

}
/* ========  End Responsive Parts ======== */


/* ======== Start Logo ======== */

.logobalken {
	position: fixed;
	top: 0px;
	width: 100%;
	height: 155px;
  display: block;
/* background-image: radial-gradient(800px at 50% -200px, #828282, #3A3A3A); */
background-image: radial-gradient(800px at 50% -200px, #aa71fb, #50228f);
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
background-color: #50228f;
opacity: 0.0;
z-index: 3;
transition: 0.4s;
}

.homelink {
	position: fixed;
	top: 115px;
	left: -43px;
	width: 100px;
	text-align: center;
	
	 background: #333;
   background-image: radial-gradient(80px at 50% -120px, #828282, #2A2A2A);
  padding: 10px 10px 10px 54px;
  /* padding: 10px 10px 20px 10px; */
   border-radius: 12px;
   box-sizing: border-box;
   box-shadow: inset 3px 4px 8px rgba(0,0,0,.6);
   font-size: 0.9em;
   color: #828282;
   z-index: 3;
   opacity: 0.0;
   transition: 0.8s;	
}

.homelink:hover {
     left: -12px;
	color: whitesmoke;
	background-image: radial-gradient(80px at 50% -40px, #828282, #2A2A2A);
	box-shadow: 3px 4px 8px rgba(0,0,0,.6);
    transition: 0.3s;

 /* animation navig */
	animation: navig 1s infinite;
}

.homelink a {
	color: whitesmoke;
	text-decoration: none;
	opacity: 0.4;
}

.homelink a:hover {
	color: whitesmoke;
	text-decoration: none;
	opacity: 1.0;
	
}



.logo {
position: fixed;
top: 10px;
/* height: 320px; */
z-index: 4;
}

.logopic {
	display:block;
	width: 100px;
left: 50%;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
 transition:.4s;
 
}



.logopic +#refl{
		position: relative;
	display:block;
	left: 0px;
	top: -10px;
	height: 80px;
	-moz-transform: scaleY(-1);
       -o-transform: scaleY(-1);
       -webkit-transform: scaleY(-1);
       transform: scaleY(-1);
	-webkit-mask-image: -webkit-gradient(linear, right top, right bottom, from(transparent), color-stop(44%, transparent), to(rgba(255, 255, 255, 0.2)));

}

.uppercase {
	position: relative;
	top: -30px;
	left: 0px;
  text-transform: uppercase;
  font-size: 12px;
  text-align: left;

color: #828282;
opacity: 0.0;
transition:.2s;
}

.logo .logopic:hover {
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
color: whitesmoke;
transition:.0.1s; 	 

 
  /* animation logowave */
	animation: logowave 1s infinite;
 
}
.logo .logopic:hover +#refl {
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
color: whitesmoke;
 transition:.0.1s; 	

 
  /* animation logowave */
	animation: logowave 1s infinite;
 
}

.logo .logopic:hover +#refl +.uppercase {
top: -80px;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
opacity: 1.0;
transition: 0.8s; 
color: whitesmoke;
/* animation logowave */
	animation: logowave 1s infinite;
 
}


 
 
 /* keyframe for logowave */
@keyframes logowave {
  5% {filter: drop-shadow(1px 1px 3px rgba(255, 255, 255, 0.8))}
     
}
	
/* ======== Stop Logo ======== */

/* ======== Start Navig ======== */

.navig {

position: fixed;
  
  top: 160px;
  left: -80px; 
  width: 200px;
z-index: 4;
opacity: 0.0;
transition: 1.2s;

text-decoration:none;
}

.navigslide {
     position: relative;
	 float: both;
	 width: 100%;
	 height: 14px;
	 left: -72px;
	
	/* background: #333;
   background-image: radial-gradient(80px at 50% -120px, #828282, #2A2A2A); */
   
   background: linear-gradient (
	135deg,
	rgba(255,255,255,0.1),
	rgba(255,255,255,0.1)
	);
	backdrop-filter: blur(21px);
	-webkit-backdrop-filter: blur(21px);
	box-shadow:0 20px 30px 0 rgba(0,0,0,0.36);
	border: 0px solid rgba(255,255,255,0.33);
   
   
   text-align: right;
   text-decoration:none;
  
   margin: 8px;
   padding: 15px 10px 28px 5px;
   border-radius: 12px;
   box-sizing: border-box;
   box-shadow: inset 3px 4px 8px rgba(0,0,0,.6);
   font-size: 1.0em;
   color: whitesmoke;
   transition: 0.8s;
}

.navigslide:hover {
     float: both;
	 width: 100%;
     left: -40px;
	 color: whitesmoke;
	 border: 0px solid rgba(255,255,255,0.33);
	background-image: radial-gradient(80px at 50% -40px, #828282, #2A2A2A);
	box-shadow: 3px 4px 8px rgba(0,0,0,.6);
    transition: 0.3s;

 /* animation navig */
	animation: navig 1s infinite;
}

/* keyframe for navig */
@keyframes navig {
  5% {box-shadow: 0 0 10px #fff, -10px 0 10px #f0f, 5px 0 10px #0ff;}
     
}

/* ======== Stop Navig ======== */


/* ======== Start Card ======== */


.cardpic1{
width: 180px;
/*transition:0.4s */
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.8));
margin-bottom: -100px;
    transition: 0.8s;
	pointer-events: none;
}

/*
.cardpic2{
width: 220px;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.8));
    margin-bottom: -100px;
    transition: 0.4s;
	pointer-events: none;
}

.cardpic3{
width: 160px;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.8));
    margin-bottom: -180px;
    transition: 0.4s;
	pointer-events: none;
}
*/


.container{
  /*width: 1300px; */
  position: relative;
  display: block;
  top:250px;
  display: flex;
  justify-content: space-between;
  flex-wrap:wrap;
  /*height: 400px; */
  /* min-height: 30vh; */
  max-height: 35vh;
}


.container .card{
  position: relative;
}

.infotext {
	position: relative;
	text-align: center;
	opacity: 0;
transition: 0.2s;
}

.glasscardbtncont {
	width: 80%;
	position: absolute;
	align-items: center;
	bottom: 20px;
}



.container .glasscard:hover .cardpic1{
    position: relative;
    /* top: -148px; */
	transform: translate(0px,-148px);
transition: 0.1s;
	width:180px;
  transition: 1.2s;
  margin-bottom: -40px;
    transition: 0.4s;
}

.container .glasscard:hover .infotext{

	opacity: 1;
  transition: 0.8s; 
}


/*
.container .glasscard:hover .cardpic2{
    position: relative;
    top: -130px;
	left: -20px;
    transition: 0.4s;
    width: 260px;
    /* transform: rotate(-25deg); 
      margin-bottom: -50px;
    transition: 0.4s;
    
}

.container .glasscard:hover .cardpic3{
    position: relative;
    top: -130px;
    transition: 0.4s;
    width: 220px;
	  margin-bottom: -100px;
    transition: 0.4s;
    
}

.container .glasscard:hover .cardpic4{
    position: relative;
    top: -30px;
    transition: 0.4s;
    width: 220px;
    transition: 0.4s;
    
}

*/

.container .card:hover .face.face2 .content a {
	width: 100%;
	transition: 0.4s;
}


.container .card .face.face1 .content{
  opacity: 0.4;
  transition:  0.5s;
  text-align: center;
}

.container .card:hover .face.face1 .content{
  opacity: 1;
 
}


.container .card .face.face1 .content i{
  font-size: 3em;
  color: whitesmoke;
  display: inline-block;
   
}

.container .card .face.face1 .content h3{
  font-size: 2.0em;
  color: whitesmoke;
  text-align: center;
  

}

.container .card .face.face1 .content a{

   text-decoration: none;
   transition: .5s;
}

.container .card .face.face2{
	opacity: .0;
   position: relative;
   background: whitesmoke;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 20px 30px rgba(0,0,0,.6);
  transform: translateY(-100px);
}

.container .card:hover .face.face2{
	opacity: 1;
    transform: translateY(0);

}

.container .card .face.face2 .content p, a{
  font-size: 1em;
  margin: 0 ;
  padding: 0;
  color: whitesmoke;
}

.container .card .face.face2 .content a{
  text-decoration:none;	
  text-align: center;
  background-color: #2A2A2A;
  color: whitesmoke;
  box-sizing: border-box;
   border: 0px solid #828282;
   border-radius: 12px;
   font-size: 1em;
  
  padding: 10px;
  margin: 20px 0 0;
  display: inline-block;
  transition: 2s;
}

.container .card .face.face2 .content a:hover{
  background-color: whitesmoke;
  color: whitesmoke;
  box-shadow: inset 2px -2px 4px rgba(0,0,0,.4),
  inset -2px 2px 4px rgba(0,0,0,.4);
  transition: 0.1s;
}



/* ======== Stop Card ======== */





/* ======== Start Music ======== */

.music {

position: fixed;
  
  top: 5px;
  left: -100px; 
  width: 400px;
z-index: 5;
}

.notepic {
	float: right;
	width: 15px;
	opacity: 0.4;
	pointer-events: none;
}


.music:hover .musicslide {
	float: both;
	 width: 100%;
	 height: 50px;
     left:95px;
	 color: whitesmoke;
	 border-radius: 12px 12px 0 0;
	background-image: radial-gradient(180px at 50% -100px, #828282, #2A2A2A);
	
	box-shadow: 3px 4px 8px rgba(0,0,0,.6);
	
    transition: 0.4s;

 /* animation navig */
	animation: navig 1s infinite;
}

.music:hover .musicslide1 {
	float: both;
	 width: 100%;
	 height: 232px;
     left:95px;
	 transform: translateY(-10px);
	 color: #2A2A2A;
	 border-radius: 0 0 12px 12px;
	/*box-shadow: 3px 4px 8px rgba(0,0,0,.6);*/
	box-shadow: 0 20px 30px rgba(0,0,0,.6);
    transition: 0.4s;
	opacity: 1.0;
}

.music:hover .music-player, .lcdscreen {
    transition: 0.4s;
	opacity: 1.0;
}
.music:hover .music-player {
    height: 250px;
    transition: 1.2s;
}

.music:hover .lcdscreen {
	width: 380px;
    transition: 0.8s;
	
	
}

.music:hover .notepic {
	float: right;
    transition: 0.4s;
	transform: rotate(25deg);
	opacity: 1.0;
}

.music:hover .playertitle {
	opacity: 1.0;
	transition: 0.4s;
}

.music:hover #myProgress {
  width: 380px;
  transition: 1.0s;
}


.playertitle {
	float: left;
	
	padding: 0px 5px 0px 10px;
	text-align: center;
	font-size: 1em;
	color: whitesmoke;
	opacity: 0.0;
	transition: 0.6s;
}


.musicslide {
     position: relative;
	 float: both;
	 width: 280px;
	 height: 14px;
	 left: -133px;
  
  
  /* background: #333;
   background-image: radial-gradient(80px at 50% -120px, #828282, #2A2A2A); */
   
   background: linear-gradient (
	135deg,
	rgba(255,255,255,0.1),
	rgba(255,255,255,0.1)
	);
	backdrop-filter: blur(21px);
	-webkit-backdrop-filter: blur(21px);
	box-shadow:0 20px 30px 0 rgba(0,0,0,0.36);
	border: 0px solid rgba(255,255,255,0.33);
  
  
  text-align: right;
   font-size: 0.96em;
  
   margin: 8px;
   padding: 15px 10px 28px 5px;
   border-radius: 12px;
   box-sizing: border-box;
   box-shadow: inset 3px 4px 8px rgba(0,0,0,.6);
   color: whitesmoke;
   transition: 0.8s;
   z-index: 2;
}



.musicslide1 {
     position: relative;
	 float: both;
	 width: 280px;
	 height: 14px;
	 left: -133px;
   background: whitesmoke;
  color: #2A2A2A;
   text-align: center;
transform: translateY(-50px);
   margin: 8px;
   padding: 15px 10px 28px 5px;
   border-radius: 0 0 12px 12px;
   box-sizing: border-box;
   box-shadow: inset 3px 4px 8px rgba(0,0,0,.6);
   font-size: 0.76em;
   color: #828282;
   transition: 0.8s;
   opacity: 0.0;
   z-index: 1;
}

.musicslide:hover  {
     float: both;
	 width: 100%;
	 height: 50px;
     left:95px;
	 color: whitesmoke;
	 border: 0px solid rgba(255,255,255,0.33);
	 border-radius: 12px 12px 0 0;
	background-image: radial-gradient(180px at 50% -100px, #828282, #2A2A2A);
	box-shadow: 3px 4px 8px rgba(0,0,0,.6);
    transition: 0.4s;

 /* animation navig */
	animation: navig 1s infinite;
}


.musicslide:hover +.musicslide1 {
     float: both;
	 width: 100%;
	 height: 232px;
     left:95px;
	 transform: translateY(-10px);
	 color: #2A2A2A;
	 border-radius: 0 0 12px 12px;
	box-shadow: 3px 4px 8px rgba(0,0,0,.6);
    transition: 0.4s;
	opacity: 0.4;

}


/* keyframe for navig */
@keyframes navig {
  5% {box-shadow: 0 0 10px #fff, -10px 0 10px #f0f, 5px 0 10px #0ff;}
     
}

/* ======== Stop Music ======== */

/* ======== Start Musicplayer ======== */

.music-player{
    width: 390px;
    height: 90px;
    border-radius: 12px;
    background: #whitesmoke;
    /*box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.6),
	inset 0px -3px 6px rgba(0, 0, 0, 0.6); */
    padding: 0px;
    overflow: hidden;
    color: whitesmoke;
	transition: 0.3s;
	opacity: 0.0;
	
}

.lcdscreen {
	width: 80px;
    height: 60px;
    border-radius: 12px;
	background: #2A2A2A;
    /* background: #ffa500;*/
	/* background: #008b8b; */
    /*box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.6),
	inset 0px -2px 3px rgba(0, 0, 0, 0.6);*/
    margin: 5px;
	padding: 0px;
    overflow: hidden;
    color: whitesmoke;
	/*color: #2A2A2A ;*/
	transition: 0.3s;
	opacity: 1.0;
	
}

/* ======== NewPlayer Start ======== */


#myProgress {
  width: 20px;
   /* background-color: #ffb90f; */
   background-color: #fff;
  cursor: pointer;
  border-radius: 10px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

#myBar {
  width: 0%;
  height: 5px;
  /* background-color: #ffc266;*/
  background-color: #aa71fb;
 
  border-radius: 10px;
}

.logo1 {
  fill: red;
}

.btn-action{
  cursor: pointer;
  padding-top: 10px;
  width: 30px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
}

.btn-ctn, .infos-ctn{
  display: flex;
  align-items: center;
  justify-content: center;
}
.infos-ctn{
padding-top: 10px;
}

.btn-ctn > div {
 padding: 5px;
 margin-top: 9px;
 margin-bottom: 9px;
}

.infos-ctn > div {
 margin-bottom: 8px;
 color: #fff;
}

.first-btn{
  margin-left: 3px;
}

.duration{
  margin-left: 10px;
}

.title{
  margin-left: 10px;
  width: 210px;
  text-align: center;
  
}

.player-ctn{
  border-radius: 12px;
  width: 380px;
  padding: 5px;
  background-color: #50228f;
  margin:auto;
  margin-top: 0px;
}

.playlist-track-ctn{
  display: flex;
  background-color: rgba(170, 113, 251, 0.4);
  margin-top: 3px;
  border-radius: 5px;
  cursor: pointer;
}
.playlist-track-ctn:last-child{
  /*border: 1px solid #ffc266;*/
}

.playlist-track-ctn > div{
  margin:5px;
}
.playlist-info-track{
  width: 80%;
}
.playlist-info-track,.playlist-duration{
  padding-top: 5px;
  padding-bottom: 5px;
  color: #fff;
  font-size: 1.2em;
  pointer-events: none;
}
.playlist-ctn{
   padding-bottom: 0px;
}
.active-track{
  background: rgba(170, 113, 251, 0.8);
  color: #fff !important;
  font-weight: bold;
  
}

.active-track > .playlist-info-track,.active-track >.playlist-duration,.active-track > .playlist-btn-play{
  color: #fff !important;
}


.playlist-btn-play{
  pointer-events: none;
  padding-top: 5px;
  padding-bottom: 5px;
  
}
.fas{
  /*color: #ffb90f;*/
color: #fff;
  font-size: 1.2em;
}

/* ======== NewPlayer Stop ==========*/

/* ======== Stop Musicplayer ======== */




/* ======== Start Image Protection ==========*/

.no-download {
  pointer-events: none;
}

/* ======== Stop Image Protection ==========*/



/* ======== Start Inhalt ======== */



.inhaltbox {
    position: relative;
	top: 300px;
	width: 108%;
	
	/* height: 600px; */
	/*min-height: 45vh;*/
  /*float: left; */
    align-items: center;
	text-align: left;
  flex-wrap: wrap;
  justify-content: space-between;
  
	padding: 40px 40px 40px 40px;
	
	margin-top: 120px;
	margin-bottom: 100px;
	
	
    border-radius: 12px;
    box-sizing: border-box;
    box-shadow: inset 3px -4px 8px rgba(0,0,0,.6),
	inset -3px 4px 8px rgba(0,0,0,.6);
    font-size:1.2em;
    color: whitesmoke;
	opacity: 0.6;
	transition: 1.6s;
	
 /* background-image: url('bg/All_web_fade.png');
	background-size: 1300px;
  background-repeat: no-repeat;
  background-attachment: relative;
  background-position: center top; */
  
	
	
}

.inhaltbox1 {
    position: relative;
	top: 300px;
	width: 108%;
	
	/* height: 600px; */
	/*min-height: 45vh;*/
  float: both;
    align-items: center;
	text-align: left;
  flex-wrap: wrap;
  justify-content: space-between;
  
	padding: 40px 40px 40px 40px;
	
	margin-top: 0px;
	margin-bottom: 300px;
	
	
    border-radius: 12px;
    box-sizing: border-box;
    box-shadow: inset 3px -4px 8px rgba(0,0,0,.1),
	inset -3px 4px 8px rgba(0,0,0,.2);
    font-size:1.3em;
    color: whitesmoke;
	transition: 0.8s;
	
	
	/* background-image: url('bg/All_web_fade.png');
	background-size: 1300px;
  background-repeat: no-repeat;
  background-attachment: relative;
  background-position: center top; */
	
	
	
}



.inhaltbox1:hover {
    
    box-shadow: inset 3px -4px 8px rgba(0,0,0,.2),
	inset -3px 4px 8px rgba(0,0,0,.6);
	opacity: 1.0;
	transition: 0.6s;
	
	
	background: linear-gradient (
	135deg,
	rgba(255,255,255,0.1),
	rgba(255,255,255,0.1)
	);
	backdrop-filter: blur(35px);
	-webkit-backdrop-filter: blur(35px);
	box-shadow:0 20px 30px 0 rgba(0,0,0,0.36);
	border: 1px solid rgba(255,255,255,0.33);
	
	box-shadow: inset 3px -4px 8px rgba(0,0,0,.6),
	inset -3px 4px 8px rgba(0,0,0,.6);
	
	/* background-image: url('bg/All_web_fade.png');
	background-size: 1300px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center top; */
	
}


.inhaltbox img{
 
 float: both;
 align-items: center;
display: block; 
  flex-wrap:wrap;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.8));
  opacity: 0.4;
transition: 0.6s;

margin-top:20px;
margin-left: 0px;
margin-bottom: 40px;
margin-right:40px;

}

.inhaltbox img:hover {
opacity: 1.0;
transition: 0.4s;
}

/*
.inhaltbox1 img{
 
/* float: center; 
 text-align: center;
/*display: block; 
  flex-wrap:wrap;
 width: 50%;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.8));
  opacity: 0.4;
transition: 0.6s;

/* margin-top:20px;
margin-left: 0px;
margin-bottom: 40px;
margin-right:40px; 
}
*/
/*
.inhaltbox1 img:hover {
opacity: 1.0;
transition: 0.4s;
}
*/



#ganzseitig{
width: 40%;

}


.inhaltbox1 p {
	display: block;
	  flex-wrap:wrap;
	  
  font-family: Montserrat, sans-serif;
  font-style: normal;
  font-weight: 100; 
	  
	font-size:1.0em;
	
}

.inhaltbox1 p a {
	color: whitesmoke;
	text-decoration: none;
	opacity: 0.6;
	transition: 1.2;
	font-size:1.0em;
	
}

.inhaltbox1 p a:hover {
	opacity: 1.0;
	transition: 0.4;
}

.inhaltbox1 h1 {
	color: whitesmoke;
	text-align: left;
	display: block;
	  flex-wrap:wrap;
	  
	font-family: Montserrat, sans-serif;
  font-style: normal;
  font-weight: 100;  	  
	  
	font-size:1.86em;
	/* text-transform: uppercase; */
	transition: 1.3s;
}

.inhaltbox1 h1:hover {
	color: whitesmoke;
	text-shadow: 4px 6px 10px rgba(0,0,0,.6),
	-2px 3px 5px rgba(255,255,255,.4),
	2px -3px 5px rgba(255,255,255,.4);
	transition: 0.4s;
}

.inhaltbox1 a {
	color: whitesmoke;
	text-decoration: none;
	opacity: 0.6;
	transition: 0.6;
}
.inhaltbox1 a:hover {
	opacity: 1.0;
	transition: 0.1;
}

.inhaltbox1 br / {
	margin-top: 40px;
	margin-bottom: 40px;
}


.ankerhalter {
    position: relative;
	width: 100%;
	height: 5px;
  display: block;  
  flex-wrap:wrap;	
	margin-top: 50px;
	margin-bottom: 0px;
}

.inhaltwrappics {
    width: 100%;
	
 display: block;  
  align-items: center;
  text-align: center;
}


.inhaltwrapcontent {
    width: 100%;
	min-height: 30vh;
	padding: 20px;
	
float: left;
 display: flex;  
  flex-wrap:wrap;
  /* justify-content: space-between; */
  align-items: left;
   border-radius: 30px;
    box-sizing: border-box;
   
  /* background-color: whitesmoke;
  color: #828282; */
  color: whitesmoke;
}


.inhaltcard{
  position: relative;
  display: block;
  width: 22%;
  min-width: 180px;
  height: 16%px;
  border-radius: 12px 12px 12px 12px;
  padding: 20px;
  
  margin-top: 40px;
  margin-right: 40px;
  margin-bottom: 40px;

  text-align: center;
  align-items: center;
  flex-wrap:wrap;
  color: #828282;
  
  background-image: radial-gradient(180px at 50% -180px, #828282, #2A2A2A);
  box-shadow: 0 20px 30px rgba(0,0,0,.6);
  transition: 0.8s; 
}

.inhaltcard:hover {
  color: whitesmoke;
  
  background-image: radial-gradient(180px at 50% -30px, #828282, #2A2A2A);
  
    
   /* animation shadowwave */
	animation: shadowwave 1s infinite;
 
  box-shadow: 0 20px 30px rgba(0,0,0,.6);
  
  transition: 0.2s;
 
  
}




.inhaltcard a{
  text-decoration:none;	
  text-align: center;
  background-color: #2A2A2A;
  color: whitesmoke;
  box-sizing: border-box;
   border: 0px solid #828282;
   border-radius: 12px;
   font-size: 1.4em;
  
 
  padding: 5px 40px 5px 40px;
  margin: 0px 0px 20px 0px;
  display: inline-block;
  transition: 2s;
}

.inhaltcard a:hover{
  background-color: whitesmoke;
  color: #828282;
  box-shadow: inset 2px -2px 4px rgba(0,0,0,.4),
  inset -2px 2px 4px rgba(0,0,0,.4);
  transition: 0.1s;
}

#bandcamp {
	width: 70px;	
}
#mx3 {
	width: 70px;	
}
#youtube {
	width: 70px;	
}
#soundcloud {
	width: 70px;	
}
#facebook {
	width: 50px;	
}
#instagram {
	width: 50px;	
}


.inhaltcard1{
  position: relative;
  display: block;
  width: 22%;
  min-width: 180px;
  height: 16%;
  border-radius: 12px 12px 12px 12px;
  padding: 20px;
  
  margin-top: 40px;
  margin-right: 40px;
  margin-bottom: 40px;

   text-align: center;
  align-items: center;
  flex-wrap:wrap;
  color: #828282;
  
  background-image: radial-gradient(180px at 50% -180px, #828282, #2A2A2A);
  box-shadow: 0 20px 30px rgba(0,0,0,.6);
  transition: 0.8s; 
}

.inhaltcard1:hover {
  color: whitesmoke;
  
  background-image: radial-gradient(180px at 50% -30px, #828282, #2A2A2A);
  
    
   /* animation shadowwave */
	animation: shadowwave 1s infinite;
 
  box-shadow: 0 20px 30px rgba(0,0,0,.6);
  
  transition: 0.2s;
 
}

.inhaltcard1 #bandcamp #mx3 #youtube #soundcloud #facebook #instagram{
text-align: center;
align-items: center;
justify-content: center;
float: right;
 
  text-decoration:none;	
  transition: 2s;
}

.inhaltbox .inhaltwrap .inhaltcard1 img:hover{
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.8));
  transition: 0.1s;
}



.inhaltcard2{
  position: relative;
  display: block;
  width: 33%;
  min-width: 180px;
  /* height: 620px; */
  border-radius: 12px 12px 12px 12px;
  padding: 20px;
  
  margin-top: 40px;
  margin-right: 40px;
  margin-bottom: 40px;

  text-align: center;
  align-items: left;
  flex-wrap:wrap;
  color: #828282;
  
  background-image: radial-gradient(180px at 50% -180px, #828282, #2A2A2A);
  box-shadow: 0 20px 30px rgba(0,0,0,.6);
  transition: 0.8s; 
}

.inhaltcard2:hover {
  color: whitesmoke;
  
  background-image: radial-gradient(180px at 50% -30px, #828282, #2A2A2A);
  
    
   /* animation shadowwave */
	animation: shadowwave 1s infinite;
 
  box-shadow: 0 20px 30px rgba(0,0,0,.6);
  
  transition: 0.2s;
 
  
}


.inhaltcardpic {
	
	display: block;
	width: 100%;
	height: 280px;
	background-color: whitesmoke;
	color: #2A2A2A;
	border-radius: 12px;
	opacity: 0.6;
}




.glasscard {
	float: left; 
	align-items: space-between;
	text-align: center;

min-width: 200px;
max-width: 300px;

height: 380px;


	 /* width: 22%;
 
  height: 16%;
	min-height: 100px; */
	
	background: linear-gradient (
	135deg,
	rgba(255,255,255,0.4),
	rgba(255,255,255,0.4)
	);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	box-shadow:0 20px 30px 0 rgba(0,0,0,0.2);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 44px;
	padding: 40px;
	margin: 20px 20px 80px 20px;

	transition: 0.2s;
	
}


.glasscard:hover {
	
min-width: 180px;
max-width: 300px;

height: 380px;

	 /* width: 22%;
 
  height: 16%;
	min-height: 100px; */
	
	background: linear-gradient (
	135deg,
	rgba(255,255,255,0.1),
	rgba(255,255,255,0.1)
	);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	box-shadow:0 20px 30px 0 rgba(0,0,0,0.76);
	border: 1px solid rgba(255,255,255,0.80);
	border-radius: 24px;
	padding: 40px;
	margin: 20px 20px 80px 20px;

transition: 0.3s;
	
}




.glasscard  img {
	margin: 20px;
	
	align-items: space-between;
	justify-content: center;
}



.glasscard :where(h2, p) {
	font-size: 1.8em;
	color: whitesmoke;
	text-align: center;
	margin: 0px;
}

.glasscard h2 {
	font-size: 1.8em;
	
}

.glasscard p {
	margin-top: 8px;
	font-size: 1.4em;
	color: #d1d1d1;
}


.glasscard button {
  text-decoration:none;	
  text-align: center;
  background-color: #2A2A2A;
  color: whitesmoke;
  box-sizing: border-box;
   border: 0px solid #828282;
   border-radius: 12px;
   font-size: 1.8em;
   text-decoration: none;
  
  padding: 10px 40px 10px 40px;
  margin: 20px 20px 20px 20px;
  display: inline-block;
  transition: 2s;
}

.glasscard button :where (h2, p){
font-size: 1.4em;
	color: whitesmoke;
	text-align: center;
	margin: 0px;

}

.glasscard button:hover{
  background-color: rgba(170, 113, 251, 1);
  color: #2A2A2A;
  text-decoration: none;
  box-shadow: inset 2px -2px 4px rgba(0,0,0,.4),
  inset -2px 2px 4px rgba(0,0,0,.4);
  transition: 0.1s;
}	
	
/* ========== Glasscard Flip ==========*/


.containerglasscard{
  /*width: 1300px; */
  position: relative;
  display: block;
  top:40px;
  /* display: flex; */
  justify-content: space-between;
  margin-right: 40px;
  /* flex-wrap:wrap; */
  float: left;
  /*height: 400px; */
  /* min-height: 30vh; */
  /* max-height: 25vh; */
}


.containerglasscard .glasscard1{
  position: relative;
margin-top: 20px;
margin-bottom: 60px;
}

.containerglasscard .glasscard1 .flip{

  width: 300px;
  /* max-width:300px; */
  max-height: 200px;
  transition:.4s;
}
.flip.flip1{
	border-radius: 12px 12px 12px 12px;
	border: 1px solid;
    border-color: rgba(255,255,255,.3);
	opacity: 1.0;
}

.containerglasscard .glasscard1:hover .flip.flip1{
	border-radius: 12px 12px 0 0;
border: 0px solid;
    border-color: rgba(255,255,255,.6);
	opacity: 1.0;
}


.flip.flip2{
	border-radius: 0 0 12px 12px;
}

.containerglasscard .glasscard1 .flip.flip1{
  position: relative;
  
  /* background: #333;
  background-image: radial-gradient(180px at 50% -180px, #828282, #2A2A2A); */
  
  	background: linear-gradient (
	135deg,
	rgba(255,255,255,0.1),
	rgba(255,255,255,0.1)
	);
	backdrop-filter: blur(21px);
	-webkit-backdrop-filter: blur(21px);
	box-shadow:0 20px 30px 0 rgba(0,0,0,0.36);
	border: 1px solid rgba(255,255,255,0.33);
	border-radius: 12px;
  
  
  display: flex;
  justify-content: center;
  align-content:center;
  align-items: center;
  z-index: 1;
  transform: translateY(100px);
  box-shadow: 0 20px 30px rgba(0,0,0,.6);
}

.containerglasscard .glasscard1 .flip.flip2 .glasscard1content a {
	width: 20%;
	transition: 0.2s;
}


.containerglasscard .glasscard1:hover .flip.flip1{
  transform: translateY(0);
  background-image: radial-gradient(180px at 50% -30px, #828282, #2A2A2A);
  
    
   /* animation shadowwave */
	animation: shadowwave 1s infinite;

}
/* keyframe for shadowwave */
@keyframes shadowwave {
   5% {box-shadow: 0 0 10px #fff, -10px 0 10px #f0f, 10px 0 10px #0ff;}
  /* 5% {box-shadow: 0 0 20px #FF7F24, -10px 0 20px #FFB90F, 10px 0 20px #ffd700; } */
     
}

.containerglasscard .glasscard1:hover .glasscard1pic1{
    position: relative;
    top: -30px;
    transition: 0.4s;
    width: 130px;
    transition: 0.4s;
	opacity: 1.0;
    
}

.containerglasscard .glasscard1:hover .glasscard1pic2{
    position: relative;
    top: -30px;
    transition: 0.4s;
    width: 240px;
    transform: rotate(-25deg);
    transition: 0.4s;
    
}

.containerglasscard .glasscard1:hover .glasscard1pic3{
    position: relative;
    top: -30px;
    transition: 0.4s;
    width: 160px;
    transition: 0.4s;
    
}

.containerglasscard .glasscard1:hover .glasscard1pic4{
    position: relative;
    top: -30px;
    transition: 0.4s;
    width: 220px;
    transition: 0.4s;
    
}


.containerglasscard .glasscard1:hover .flip.flip2 .glasscard1content a {
	width: 100%;
	transition: 0.4s;
}


.containerglasscard .glasscard1 .flip.flip1 .glasscard1content{
  opacity: 1.0;
  transition:  0.5s;
  text-align: center;
}

.containerglasscard .glasscard1:hover .flip.flip1 .glasscard1content{
  opacity: 1.0;
 
}


.containerglasscard .glasscard1 .flip.flip1 .glasscard1content i{
  font-size: 3em;
  color: white;
  display: inline-block;
   
}

.containerglasscard .glasscard1 .flip.flip1 .glasscard1content h3{
  font-size: 2.0em;
  color: whitesmoke;
  text-align: center;
  

}

.containerglasscard .glasscard1card .flip.flip1 .glasscard1content a{

   text-decoration: none;
   transition: .5s;
}

.containerglasscard .glasscard1 .flip.flip2{
	opacity: 0.0;
   position: relative;
   background: whitesmoke;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 20px 30px rgba(0,0,0,.6);
  transform: translateY(-100px);
}

.containerglasscard .glasscard1:hover .flip.flip2{
	opacity: 1.0;
    transform: translateY(0);

}

.containerglasscard .glasscard1 .flip.flip2 .glasscard1content p, a{
  font-size: 0.78em;
  margin: 0 ;
  padding: 0;
  color: #333;
}

.containerglasscard .glasscard1 .flip.flip2 .glasscard1content a{
  text-decoration:none;	
  text-align: center;
  background-color: #2A2A2A;
  color: whitesmoke;
  box-sizing: border-box;
   border: 0px solid #828282;
   border-radius: 12px;
   font-size: 0.86em;
  
  padding: 10px;
  margin: 20px 0 0;
  display: inline-block;
  transition: 2s;
}

.containerglasscard .glasscard1 .flip.flip2 .glasscard1content a:hover{
  background-color: whitesmoke;
  color: #828282;
  box-shadow: inset 2px -2px 4px rgba(0,0,0,.4),
  inset -2px 2px 4px rgba(0,0,0,.4);
  transition: 0.1s;
}



/* ======== Glasscard Flip End =======*/
	
	


	
/*======== Accordion Box ========== */

.accorwrap {
position: relative;
display: block;
left: 50%;

margin-top: 40px;
margin-bottom: 40px;

transform: translate(-50%);
max-width: 98%;
	
}



/* Accordion 
background-image: radial-gradient(800px at 50% -200px, #aa71fb, #50228f);
#aa71fb= rgba(170, 113, 251, 1)
#50228f= rgba(80, 34, 143, 1)


*/

.accordion {
	position: relative:
	top: 0px;
 /* background-color: #ffb90f; */
 background-color: rgba(80, 34, 143, 0.1);
  color: whitesmoke;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.2em;
  transition: 0.3s;
  
  background: rgba(0,0,0,.2);
  border: 1px  solid #aa71fb;
  border-radius: 12px;
  border-left: 44px ridge #50228f;
}


.active, .accordion:hover {
  border-left: 64px ridge #aa71fb;
  /* background-color: rgba(255,185,15,0.2); */
 background-color: rgba(170, 113, 251, 0.4);
  box-shadow: 0 5px 10px rgba(0,0,0,.6);
}

.active, .accordion {
  border-left: 44px ridge #aa71fb;
 background-color: rgba(80, 34, 143, 0.2);
  box-shadow: 0 5px 10px rgba(0,0,0,.6);
}

.panel {
  margin: 0px 2% 1%;
  padding: 0px 0% 0px;
  color: white;
 
  /* border-radius: 4em / 8em;  */
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 14px;
border-bottom-left-radius: 14px;
  /* background-color: rgba(255,185,15,.2); */
  background-color: rgba(80, 34, 143, 0.1);
  box-shadow: 0 5px 10px rgba(0,0,0,.8);
  /*background-color: white; */
  max-height: 0;
  
  overflow: hidden;
  transition: max-height 0.1s ease-out;
  
}

.panelcontent {
opacity: 1.0;
	padding: 10px;
	margin:4% 4% 4% 4%;

}



.accordion:after {
  content: "+"; /*   '\02795'   Unicode character for "plus" sign (+) */
  font-size: 1.2em;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "-"; /*   "\2796"     Unicode character for "minus" sign (-) */
}

.accordionimage img {
	opacity: 0.8;
}

.accordionimage img:hover {
	opacity: 1.0;
transition: 0.4s;
}

/* ========== End Accordion =========== */	




.fusszeile {
	 position: relative;
	width: 100%;
	height: 25px;
	bottom: 0px;
	
display: block;  
  display: flex;
  justify-content: center;
  flex-wrap:wrap;
  
	padding-top: 5px;
	padding-bottom: 5px;
	
	margin-top: 640px;

	
    background-image: radial-gradient(80px at 50% -120px, #828282, #2A2A2A);
    border-radius: 12px;
    box-sizing: border-box;
    box-shadow: inset 3px -4px 8px rgba(0,0,0,.6),
	inset -3px 4px 8px rgba(0,0,0,.6);
    font-size: 0.8em;
    color: whitesmoke;
	opacity: 0.4;
}

.fusszeile a {
	color: whitesmoke;
	text-decoration: none;
	opacity: 0.4;
	margin-right: 10px;
}

.fusszeile a:hover {
	color: whitesmoke;
	text-decoration: none;
	opacity: 1.0;
}







/* ======== Stop Inhalt ======== */







/* ======== Start Mailform ======== */


.mailformcontainer {
	
	
  display: block;
  
  background: linear-gradient (
	135deg,
	rgba(255,255,255,0.1),
	rgba(255,255,255,0.1)
	);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	box-shadow:0 20px 30px 0 rgba(0,0,0,0.36);
	border: 1px solid rgba(255,255,255,0.33);
  
  color: whitesmoke;
  
  border-radius: 12px;
  /* background-color: #f2f2f2; */
  padding: 20px;
  
  margin-top: 100px;
  margin-bottom: 20px;
  
}

.mailformcontainer strong {
	font-size: 0.8em;
	color: red;
}

textarea {
	border-style: none;
        border-color: Transparent;
        overflow: auto;
        outline: none;
		
		
	
		
		
      }
	  
input {
		  border-style: none;
        border-color: Transparent;
        overflow: auto;
        outline: none;
		
		
		
      }
	  

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 0px solid #ffb90f;
  border: none;
  border-radius: 8px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  opacity: 1.0;
  font-size: 1.2em;
  

  
}

input[type=text]:hover {
  
  border: none;
  border-radius: 8px;
  box-sizing: border-box;
  color: whitesmoke;
  background-color:#aa71fb;
  
  
}

input[type=select]:hover {
	
  border: none;
  border-radius: 8px;
  box-sizing: border-box;
  color: whitesmoke;
  background-color: #828282;
  
  
  
}


input[type=email] {
  width: 100%;
  padding: 12px;
  border: 0px solid #ffb90f;
  border: none;
  border-radius: 8px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  opacity: 1.0;
  font-size: 1.2em;


}


input[type=email]:hover {
  width: 100%;
  padding: 12px;
  border: 0px solid #ffb90f;
  border: none;
  background-color: #ffb90f;
  color: whitesmoke;
  
 
}




input[type=tel]{
	width: 100%;
  padding: 12px;
  border: 0px solid #ffb90f;
  border: none;
  border-radius: 8px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  opacity: 1.0;
  font-size: 1.2em;
  
  
  
}

input[type=tel]:hover {
  width: 100%;
  padding: 12px;
  border: 0px solid #ffb90f;
  border: none;
  background-color: #ffb90f;
  color: whitesmoke;
  
  

}


input[type=submit] {
  background-color: #2A2A2A;
  color: whitesmoke;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 1.2em;
  cursor: pointer;
  transition: 0.4s;
  
 
  
}

input[type=submit]:hover {
	color: #2A2A2A;
  background-color: #aa71fb;
  transition: 0.1s;
  
  
}

.inputtogle:active ~.success {
   
   /*transform: scaleX(60%);
   transform: scaleY(420px); */
   width: 60%;
   height: 420px;
   opacity: 1.0;
  transition: 0.8s;
}



select {
  width: 100%;
  padding: 12px;

border-radius: 8px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  opacity: 1.0;
  font-size: 1.2em;
  
  
  

  
}

.formclass {
	
	
	background: linear-gradient (
	135deg,
	rgba(255,255,255,0.1),
	rgba(255,255,255,0.1)
	);
	backdrop-filter: blur(21px);
	-webkit-backdrop-filter: blur(0px);
	box-shadow:0 20px 30px 0 rgba(0,0,0,0.36);
	border: 1px solid rgba(255,255,255,0.33);
	
}

.formclass:hover {
	
	
	background: linear-gradient (
	135deg,
	rgba(255,255,255,0.1),
	rgba(255,255,255,0.1)
	);
	backdrop-filter: blur(21px);
	-webkit-backdrop-filter: blur(21px);
	box-shadow:0 20px 30px 0 rgba(0,0,0,0.36);
	border: 1px solid rgba(255,255,255,0.33);
	
	
}


.success {
	position: relative;
	
	float: left; 
	
	text-align: left;
width: 0%;
height: 0px;
$overflow: auto;

color: whitesmoke;
	 
	
	background: linear-gradient (
	135deg,
	rgba(255,255,255,0.1),
	rgba(255,255,255,0.1)
	);
	backdrop-filter: blur(21px);
	-webkit-backdrop-filter: blur(21px);
	box-shadow:0 20px 30px 0 rgba(0,0,0,0.36);
	border: 1px solid rgba(255,255,255,0.33);
	border-radius: 12px;
	padding: 40px;
	margin: 20px 20px 20px 20px;
	opacity: 0.0;
}

.success1 {
   
   /*transform: scaleX(60%);
   transform: scaleY(420px); */
   width: 60%;
   height: 420px;
   opacity: 1.0;
  transition: 0.8s;
}


.success .iframester {
	border: 0px solid rgba(255,255,255,0.0);
	border-radius: 12px;
	color: whitesmoke;
}
	





/* ======== Stop Mailform ======== */



/* ========= Start Slider W3S =========*/

/* * {box-sizing:border-box} */



/* Slideshow container */
.slideshow-container-w3s {
  max-width: 100%;
  position: relative; /* Ensures buttons are positioned relative to this container */
  margin: auto;
  overflow: hidden; /* Prevents content overflow */
}

.slideshow-container-w3s img {
	vertical-align: middle;
	}

/* Hide the images by default */ 
.mySlides1, .mySlides2, .mySlides3, .mySlides4 {
  display: none;
}




/* Next & previous buttons */
.prev-w3s, .next-w3s {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 5px;
  color: lightgrey;
  background-color: rgba(80, 34, 143, 1);
  font-weight: bold;
  font-size: 12px;
  transition: 0.6s ease;
  border-radius: 6px;
  user-select: none;
  z-index: 1; /* Ensures buttons appear above images */
}

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

/* On hover, add a black background color with a little bit see-through */
.prev-w3s:hover, .next-w3s:hover {
	color: whitesnow;
  background-color: rgba(170, 113, 251, 0.8);
}

/* Caption text */
.text-w3s {
  color: whitesnow;
  max-width: 35%;
  font-size: 12px;
  /*padding: 8px 12px; */
  position: absolute;
  left: 2%;
  bottom: 2%;
  width: 100%;
  text-align: left; 
  padding: 5px;
  border-radius:6px;
  background-color: rgba(170, 113, 251, 0.6);


}

/* Number text (1/3 etc) */
.numbertext-w3s {
  color: whitesnow;
  font-size: 12px;
  /* padding: 8px 12px; */
  position: absolute;
  top: 2%;
  left: 2%;
   padding: 5px;
  border-radius:6px;
   background-color: rgba(170, 113, 251, 0.6);
}



/* The dots/circles */
.dot-w3s {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  border: 0px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot-active, .dot-w3s:hover {
	 border: 0px;
  text-decoration: none;
  background-color: rgba(170, 113, 251, 1);
}


/* Prevent dots from changing size */
.dot-active {
  height: 10px;
  width: 10px;
  border-radius: 50%; /* Ensure it stays circular */
}


/* Fading animation */
.fade-w3s {
  animation-name: fadeanimation-w3s;
  animation-duration: 1.5s;
}

@keyframes fadeanimation-w3s {
  from {opacity: .4}
  to {opacity: 1}
}



/*========== Stop Slider ============*/



/* ======== Start Youtube Video ======== */

.video-container {
  position: relative;
  padding-bottom: 56.25%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* ======== StopYoutube Video ======== */