.akordeon-wrapper.list-style li::after {background: black}

.akordeon-wrapper > div {
	box-sizing: border-box;
	padding: 20px 50px 20px 25px;
	position: relative;	
	background: #F7F7F7;
	transition: background 0.25s;
}

.akordeon-wrapper > div:nth-of-type(2n) {
	display: none;	
	top: -10px;
	padding-top: 0;
	background: #f6c413;
	color: black;
}

.akordeon-wrapper > div:nth-of-type(2n + 1) {
	margin-bottom: 10px;
	cursor: pointer;
}

.akordeon-wrapper > div:nth-of-type(2n + 1) figure {
	display: block;
	position: absolute;
	background-image: url(../img/akordeon-arrow.png);
	background-size: 100%;
	width: 25px;
	height: 25px;
	border: 2px solid black;
	border-radius: 50%;
	top: 20px;
	right: 20px;
}
.akordeon-wrapper > div:nth-of-type(2n + 1).active figure {background-position: bottom center}

.akordeon-wrapper h4 {
	width: 100%;
	position: relative;
	margin-bottom: 0;
}

.akordeon-wrapper > div:nth-of-type(2n + 1).active {background: #f6c413}
.akordeon-wrapper > div:nth-of-type(2n + 1):hover {background: #f6c413}



/*GRID: 768px */
@media all and (max-width: 768px) {

.akordeon-wrapper > div:nth-of-type(2n + 1) h4:hover {opacity: 1}
	
}



/*GRID: 440px */
@media all and (max-width: 440px) {

.akordeon-wrapper > div {padding: 20px 40px 20px 15px}

.akordeon-wrapper > div:nth-of-type(2n + 1) figure {
    width: 20px;
    height: 20px;
    border: 2px solid black;
    top: 20px;
    right: 10px;
}