/*-------------------------------------------------------------------------------*/
/*																				 */
/* CSS-File: 	accordion.css       	                                         */
/* Version:		002																 */
/*																				 */
/* Datum:		24.01.2018														 */
/*																				 */
/* Author:		BoomArang Engineering											 */
/* Purpose:		css styles accordeon											 */
/*																				 */
/* History:		MOD 1 29.07.2023 transform avatar   							 */
/*																				 */
/*																				 */
/*-------------------------------------------------------------------------------*/
button.accordion {
    float:left;
	background-color:#F5F5F5;
    cursor: pointer;
    padding: 0 10% 1% 10%;
    width: 100%;
    border:none;
    text-align:left;  
    outline: none;
    font-size: 100%;
    transition: 0.4s;
}
button.accordion b {	
	color:#4C93AD; /*#999999;*/
	font-size:130%;
	font-weight:bold;	
}

button.accordion.active, button.accordion:hover {
    background-color: white;
}

button.accordion:after {
    /* content: '\002B';		/* + Zeichen */
	
	content: "\f107";
    font-family: FontAwesome;

    color:#808080;
   	font-size:180%;

    font-weight: bold;
    float:right;
    margin-left: 5px;
}

button.accordion.active:after {
	/* content: "\2212";			/* - Zeichen */

	content: "\f106";
    font-family: FontAwesome;
}

/*---------------------------------- MOD 1 start -*/

button.accordion img {
    border-radius:100px;

    transition:transform 0.8s;
}

button.accordion img:hover {
    transform: scale(1.5);
	
}

/*---------------------------------- MOD 1 end ---*/

div.panel {
	float:left;
	width:98%;
	padding-left:2%;
    background-color: #F5F5F5;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    
    font-size: 150%;
    font-weight:bold;
}

.panel_box {
	display: block;
	float:left;
	padding:1%;
	width:48%;
	font-size:60%;
	
}
.panel_box img{
	border-radius:10px;	
}

.avatar {
	display: block;
    margin-left: auto;
    margin-right: auto;
	width: 175px; 
	height: 175px; 
	text-align:center;
	/*border:1px solid black;*/
	
	-webkit-border-radius: 180px; /* 200/2 + 0 + 5 */
	-khtml-border-radius: 180px; 
	-moz-border-radius: 180px; 
	border-radius: 180px;  
}