/* Wrapper macht das Ding*/
.wrapper{display:none; z-index:300}/* der wrapper display none macht den trick - wenn auf none ist der chat und aside aus*/
.aside{} /*mit aside auf display none blendets das werbeframe link aus und das ganue Fenster ist chat, ansonsten leer lassen zwischen den Klammern*/

a.go2tut:link{color:#ff0000; font-weight:bold;}
a.go2tut:hover{color:#0000ff; font-weight:bold;}


.clickmetop { 
  position:absolute;
color:#fff;
  background:transparent;
  z-index:59;
  top:0;
  right:0;
  border:1px solid red}
/*wenn man hier eine höhe von 100 einträgt dann füllt das ueberblendbild die ganze card das ganze div - ein genereller link*/ 

.clickmebottom { 
  color:#fff;
  position:absolute;
  z-index:53;
  bottom:40px;
  left:0;
  width:100%;
height:7%; text-align:center; margin:0 auto;}

.nogood { position:absolute;
  color:#fff;
  background-color:transparent;
  z-index:63;
  top:0;
  left:0;
  width:100%;
  min-height:7%; text-align:right; margin:0 auto;}

a.nogood:link {font-size:22px; z-index:61;color:#01A5DE;text-shadow: 0 -1px #0000ff, 1px 0 #ffffff, 0 1px #ffffff, -1px 0 #0000ff; }
.rand{color:#ffffff; background-color:red;font-weight:600; padding-left:3px; padding-right:3px; padding:3px;border-radius:7px; border-width:3px;border-style:double; border-color:yellow; }

#clickbottom {height:8%; font-size:20px;}

/*headerzone*/
.header{position:absolute; 
margin:0 auto;
left: 0;
right: 0;
text-align: center; z-index:1}
/*./headerzone*/

.h1head{color:#ff00ff; margin:0; padding:0: line-height:1}
.h2head{color:#007bff;}
.headerslogan{color:#000;}

.h1head{color:#e0a526;text-shadow:1px 0 0 #181818,-1px 0 0 #181818,0 2px 0 #181818,0 -2px 0 #181818,1px 1px 0 #181818,-1px -1px 0 #181818,1px -1px 0 #181818,-1px 1px 0 #181818,1px 1px 5px #181818}
div.headerslogan{margin-top:-20px;font-size:1.1rem;padding:0;}

div.logo{display:inline-flex; justify-content:center; align-items:center;text-align:center;}
div.logo img{float:left;display:block; height:80px;align-items:center; }
div.logo .h1head{float:left;padding-top:15px}/*korrektur wenn link*/


@media (max-width: 800px) {
div.logo img{float:none;display:block;margin:0 auto}
div.logo .h1head{float:none;margin:14px 0 0 0;padding:8px 0 2px 0;}
.h2head{padding:28px 0 10px 0;}
div.headerslogan{line-height:1;margin-top:20px;}
}


div.thb{margin:20px 0 0
  background: transparent;
  display: flex; width:100%;
  justify-content:center;
  padding: 5px;
  flex-flow:row nowrap;
}
div.thb img{max-width:80px; margin:5px 10px 5px 10px;border:1px solid #000;padding:0}


/* draggable window*/
#mydiv {
  position: absolute; width:600px;
  z-index: 400;
  background-color: #f1f1f1;
  border: 1px solid #d3d3d3;
  text-align: center;
display:none;
resize: both;
overflow: auto;
}

#mydivheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
  
  }
div.mydiv{
  overflow: hidden;
}


/*video embeds */
.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  display: block;
  content: "";
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%; margin-left:0;
}