html {
					display: table;
					margin: auto;
				}
body {	background-color: #353c48;   color: #fff;  font-size: 12px; font-family: Poppins,sans-serif;	} /* #353c48 */


#DivSayfa {margin:auto;background-color: #6633bb;}

@media only screen and (max-width: 9999px) 
			{
				#DivSayfa{width:1280px;}
				.card {width: 1280px;}		
			}
			@media only screen and (max-width: 1305px) 
			{
				
				#DivSayfa{width:960px;}
				.card {width: 960px;}
			}
			@media only screen and (max-width: 995px) 
			{
				#DivSayfa{width:640px;}
				.card {width: 640px;}
			}
			@media only screen and (max-width: 675px) 
			{
				#DivSayfa{width:480px;}
				.card {width: 480px;}
			}
			@media only screen and (max-width: 515px) 
			{	
				#DivSayfa{width:320px;}
				.card {width: 320px;}
			}

.card
{
	position: fixed; top: 0; z-index: 2;
	
	height:80px;
	/*height: 400px;*/ /*görünür olduğunda 400'dü*/
	background: #000;
	box-shadow: 0 5px 5px rgba(0,0,0,0.2);
	padding: 0px;
	overflow: hidden; /*Gizleme sonradan eklendi*/
	transition: height 0.5s easy-in-out;
}
.card.active
{
	height: 480px;
	/*overflow: scroll;*/
}

.card .content 
{
	display: flex;
	align-items: center;
}

.card .content .imgBx
{
	position: relative;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
}

.card .content .imgBx img
{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.card .content h2
{
	margin-left: 15px;
	font-size: 1.2em;
	color: #fff;
}
.card .content h2 span
{
	font-size: 0.8em;
	font-weight: 400;
	color: #999;
}
.navigation li
{
	list-style: none;
	margin: 5px 0;
}
.navigation li a
{
	text-decoration: none;
	display: flex;
	align-items: center;
	color: #fff;
	font-size: 1.0em;
	transition: 0.25s;
}
.navigation li a:hover
{
	color: #36b3ff;
}

.toggle
{
	position: absolute;
	bottom: 0;
	right: 0;
	width:30px;
	height:30px;
	background: #eeeeee;
	display:flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	z-index: 100;
}
.toggle ion-icon 
{
	color: #fff;
	font-size: 1.4em;
	transition: transform easy-in-out 0.5s;
}
.card.active .toggle ion-icon
{
	transform: rotate(-180deg);
}