<style>


.clog	{position: fixed; z-index: 9; top:1px; left:1px; 
			background:#005aa1; 
			color:white; 
			width:100%; height:6em; border:none;
			}

	.flip-card {float:left; border-radius: 12px; height: 100%; overflow:hidden;}
	.flip-card-span {font-size:1.0em; font-family:'Segoe Script'; border: 2px solid #3983ab; border-radius: 50px;  float: left; padding: 0.5em; }
	.cmittel {float:left; border-radius: 12px; height: 100%; overflow:hidden;  font-family:'Segoe Script';}
	.cmitter {float:left;  border-radius: 12px; height: 100%; overflow:hidden; display:none;  font-family:'Segoe Script';}
	.cwerbung {float:left;  border-radius: 12px; height: 100%; overflow:hidden;}
	.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;  height: 98%; border-color:white; z-index:99; display:none; height:3em;}

.clogoutt {float:left; border:none; background-color:#005aa1; color:white;}

.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); 
}
.cstart {position:absolute; top:6em; left:0px; height:100%; width:100%; min-height:700px;float:left; background-color:#005aa1; color:white; overflow:auto;

}

.cicons {height:3em; width:100%; float:left;  background-color:#003a66; color:white; border:none; display:none; text-align:center; left:50%; right:50%; margin:auto; 
}

span.psw {  float: right;  padding-top: 16px;}

/* The Modal (background) */
.modal {
  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 */
.modal-content {
  background-color: #00004d;
	
  
  width: 100%; /* Could be more or less, depending on screen size */
  height:100%;
}

.cmodalein {position:absolute; left:150px; background-color:white;outline: none; border: 1px solid #3983ab;}
.cmodallabel {font-family:'Segoe UI'; color:white;}


/* The Close Button (x) */
.close {position: absolute;  right:25px;  top: 0;  color: #000;  font-size: 35px;  font-weight: bold; color: red;}

.close:hover,
.close: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 */
.imgcontainer {  text-align: center;  margin: 24px 0 12px 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;}
}



/* Add Zoom Animation */
.animate {
  -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 animatebtn {
  0%   {transform: scale(0.90);}
  25%   {transform: scale(0.92);}
  50%   {transform: scale(0.94);}
  75%   {transform: scale(0.96);}
  100%  {transform: scale(1);}
}
  
@keyframes mycolor {  
  from {background-color: #ff0000;}
  to {background-color:   #990000;}
}



@media only screen and (max-width: 720px)
{

.clog	{position: fixed; z-index: 9; top:1px; left:1px; 
			background:#005aa1; 
			color:white; 
			width:100%; height:6em; border:none;
}

	.flip-card {float:left; border-radius: 12px; height: 100%; overflow:hidden;}
	.flip-card-span {font-size:1.0em; font-family:'Segoe Script'; border: 2px solid #3983ab; border-radius: 50px;  float: left; padding: 0.5em; }
	.cmittel {float:left; border-radius: 12px; height: 100%; overflow:hidden;  font-family:'Segoe Script';}
	.cmitter {float:left;  border-radius: 12px; height: 100%; overflow:hidden; display:none;  font-family:'Segoe Script';}
	.cwerbung {float:left;  border-radius: 12px; height: 100%; overflow:hidden;}
	.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;  height: 98%; border-color:white; z-index:99; display:none; height:3em;}

.clogoutt {float:left; border:none; background-color:#005aa1; color:white;}
.cstart {
	position:absolute; top:6em; left:0px; height:100%; width:100%; min-height:700px; float:left; 
	overflow:auto;
}


}
  
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 370px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }


.clog	{position: fixed; z-index: 9; top:1px; left:1px; 
			background:#005aa1; 
			color:white; 
			width:100%; height:6em; border:none;
}

	.flip-card {float:left; border-radius: 12px; height: 100%; overflow:hidden;}
	.flip-card-span {font-size:1.0em; font-family:'Segoe Script'; border: 2px solid #3983ab; border-radius: 50px;  float: left; padding: 0.5em; }
	.cmittel {float:left; border-radius: 12px; height: 100%; overflow:hidden;  font-family:'Segoe Script';}
	.cmitter {float:left;  border-radius: 12px; height: 100%; overflow:hidden; display:none;  font-family:'Segoe Script';}
	.cwerbung {float:left;  border-radius: 12px; height: 100%; overflow:hidden;}
	.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;  height: 98%; border-color:white; z-index:99; display:none; height:3em;}

.clogoutt {float:left; border:none; background-color:#005aa1; color:white;}

.cstart {
	position:absolute; top:6em; left:0px; height:100%; width:100%; min-height:700px;float:left; 
	overflow:auto;
}



}

  
</style>
