.clog	{position: fixed; z-index: 9; top:0px; left:1px; 
			background-color:lightgrey; 
			color:white; 
			width:100%; border:0.5px solid #005aa1;
			padding:1px 0 0 2px;
			}

	.flip-card {float:left; border-radius: 12px; height: 100%; overflow:hidden; margin-left:0.5%;}
	.flip-card-span {font-size:1.0em; font-family:'Segoe Script'; border: 2px solid #3983ab; border-radius: 50px;  float: left; padding: 0.3em; }
	.cmittel {float:left; border-radius: 12px; overflow:hidden;  font-family:'Segoe Script'; display:none;}
	.cmitter {float:left;  border-radius: 12px;overflow:hidden; display:none;  font-family:'Segoe Script';display:none;}
	.cwerbung {float:left;  border-radius: 12px; height: 100%; overflow:hidden; display:none;}
	.cchat   {float:left;  border-radius: 12px; height: 100%; overflow:hidden;}
	
	.clogin {float:right; border-radius: 12px; height: 98%; border-color:white; z-index:99;}
		.clogin input[type=text] 	{background-color: white; color:black; outline: none;	padding: 1px;  margin: 1px 0 2px 0;  border: 1px solid white;  }
		.clogin input[type=password] 	{background-color: white; color:black; outline: none;	padding: 1px;  margin: 1px 0 2px 0;  border: 1px solid white;  }
	
	.clogout {float:right; border-radius: 12px; border-color:white; z-index:99; display:none; height:100%;   }
		.clogoutt {float:right; border:none; color:black; margin: 1px 1px 0 0; font-size:10px;max-width:120px;}
		.clogoutimg {height:25px;width:25px;border-radius:5px;float:right;}
		.clogoutbtn {height:25px;width:25px;border-radius:5px;float:right; background-color:red;}

.cfuart {height:25px;width:25px;border-radius:50px;cursor:pointer; margin-left:35%;} 


.cstart {position:absolute; top:3.1em; left:0px; height:100%; min-height:500px; width:100%; float:left; 
		background-color:lightgrey; color:white; overflow:auto;
	}

	.ciframepop {position:absolute; top:0; display:block; float:left; overflow:scroll; border:none; 	
		height:100%; width:100%;
	}

	.ciframes {height:82%; width:98%; overflow:auto; float:left; border:none;
			background-color:lightgrey;
			color:white;
			display:none;
	}
		.ciframeorg {display:none; float:left; overflow:scroll; border:none; 	height:99%; width:100%;
		}
		.ciframe {display:none; float:left; overflow:scroll; border:none; 	height:98%; width:100%;
		}
		.ciframechat {background-color: #005aa1; color:white; display:none;  position: absolute; top:8em;  left:1px;  width:390px; height:780px; cursor:move;  z-index: 9; border: 3px solid #f1f1f1; border-radius:20px;  padding: 10px;}

.retciframe {height:100%; width:100%; border: none; display:block; overflow:auto;}


.cicons {height:3.2em; width:99%; float:left;  background-color:#003a66; color:white; border:none; display:none; text-align:center; 
		margin:0.2em; overflow:auto;
	border: 2px solid red;
}

span.psw {  float: right;  padding-top: 16px;}


.retaktbild   {height:100%; width:2.5em; bottom: 1px; float:left;  margin-left:5px; display:block; cursor:pointer; background-color: black; border-radius:20px;}
.retaktbildr  {height:100%; width:2.5em; bottom: 1px; float:right; margin-left:5px; display:block; cursor:pointer; background-color: black; border-radius:20px;}
.aktbild   {height:100%; bottom: 1px; float:left;  margin-left:5px; display:block; cursor:pointer;  border-radius:20px;}
.aktbildr  {height:100%; width:2em; bottom: 1px; float:right; margin-left:5px; display:block; cursor:pointer;  border-radius:20px;}

.retbild 	 { height:70%;  width:70%; border-radius:10px;}
.bild 	 { height:25px;  width:25px; border-radius:10px; margin-top:5px; background-color:red;}
.bild:hover{filter:sepia(50%);}	
.tltext  { height:30%;  width:100%; color: white; overflow:hidden; font-size:11px;}


.kubtn {cursor:pointer; background-color:#e6f2ff; color:white; background-image: linear-gradient(to right, #005aa1,#33a7ff); border-radius:5px; border-width:0.2px; font-size:13px; margin-left: 10px;}


.retcstart {position:absolute; top:6em; left:0px; height:100%; width:100%; min-height:700px;float:left; 
	background-image: linear-gradient(to bottom, #005aa1,#33a7ff,#005aa1,#33a7ff,#005aa1,#33a7ff); 
}

/* The Modal (background) */
.retmodal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9; /* Sit on top */
  width: 60%; /* Full width */
  height: 80%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: #005aa1; /* Fallback color */
  margin: 1% auto 1% auto; /* 5% from the top, 15% from the bottom and centered */
  top:10%; left:10%;
}

/* Modal Content/Box */
.retmodal-content {
  background-color: #00004d;
	
  
  width: 100%; /* Could be more or less, depending on screen size */
  height:100%;
}

.retcmodalein {position:absolute; left:150px; background-color:white;outline: none; border: 1px solid #3983ab;}
.retcmodallabel {font-family:'Segoe UI'; color:white;}


/* The Close Button (x) */
.retclose {position: absolute;  right:25px;  top: 0;  color: #000;  font-size: 35px;  font-weight: bold; color: red;}
.retclose:hover,
.retclose:focus {  color: red;  cursor: pointer;}



button:hover {  opacity: 0.8;}

/* Extra styles for the cancel button */
.cancelbtn {  width: auto;  padding: 10px 18px;  background-color: #f44336;}

/* Center the image and position the close button */
.retimgcontainer {  text-align: center;  margin: 0px 0 1px 0;  position: relative;}

.container {  margin: 16px;}


img.avatar {  width: 10%;  border-radius: 50%;}

@keyframes loginopa {
  0%   {background-color:red;  opacity: 0.5;}
  25%   {background-color:red; opacity: 0.6;}
  50%   {background-color:red; opacity: 0.7;}
  75%   {background-color:red; opacity: 0.8;}
  100%  {background-color:red; opacity: 3;}
}

@keyframes loginpop {
  0%    {opacity: 1;}
  25%   {opacity: 0.9;}
  50%   {opacity: 0.8;}
  75%   {opacity: 0.7;}
  100%  {opacity: 0;}
}


/* Add Zoom Animation */
.retanimate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

  
@keyframes mycolor {  
  from {background-color: #ff0000;}
  to {background-color:   #990000;}
}