.leveler-wrapper {
display: flex;
width: 100%;
margin: 0 0 20px;
padding: 25px;
background: #cfcfcf;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.leveler-wrapper-image {
flex: 0 0 40%;
display: flex;
height: 400px;
}
.leveler-wrapper-image div{
display: none;
}
.leveler-wrapper-image .active{
display: flex;
width: 100%;
}
.leveler-wrapper-image img {
max-width: 100%;
max-height: 400px;
height: auto;
object-fit: contain;
}
.leveler-wrapper-content {
flex: 1;
padding: 0  25px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.leveler-wrapper-closer {
position: absolute;
top: 0;
right: 0;
display: none;
width: 15px;
height: 15px;
justify-content: center;
align-items: center;
cursor: pointer;
}
.leveler-wrapper-closer:after {
content: 'x';
font-size: 20px;
}
.leveler-wrapper-content.item-clicked .leveler-wrapper-closer{
display: flex;
}
.leveler-wrapper-item  {
padding: 0 0 25px;
cursor: pointer;
opacity: 0.5;
transition: opacity 0.25s, max-height 0.25s, padding 0.25s;
overflow: hidden;
max-height: 1000px;
}
.leveler-wrapper-item.active,
.leveler-wrapper-item:hover{
opacity: 1;
}
.leveler-wrapper-content .headline {
font-size: 20px;
line-height: 24px;
font-weight: bold;
margin: 0;
}
.leveler-wrapper-content .short {
font-size: 16px;
line-height: 20px;
font-weight: normal;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0;
}
.leveler-wrapper-content .short:after {
content: '>>';
opacity: 0;
transition: opacity 0.25s;
}
.leveler-wrapper-item.active .short:after,
.leveler-wrapper-item:hover .short:after {
opacity: 1;
}
.leveler-wrapper-content .desc {
display: none;
margin-top: 25px;
}
.leveler-wrapper-content .desc .button {
background: #aa0000;
color: #ffffff;
display: inline-block;
padding: 5px 10px;
transition: background 0.25s;
text-decoration: none;
border-radius: 5px;
position: absolute;
right: 0;
bottom: 0;
z-index: 5;
}
.leveler-wrapper-content .desc .button:hover {
background-color: #990000;    
}
.leveler-wrapper-content.item-clicked .leveler-wrapper-item {
max-height: 0;
padding: 0;
}
.leveler-wrapper-content.item-clicked .leveler-wrapper-item.clicked {
max-height: 1000px;
padding: 0 0 25px;
}
.leveler-wrapper-content.item-clicked .leveler-wrapper-item.clicked .short:after {
display: none;
}
@media (max-width: 768px) {
.leveler-wrapper {
flex-direction: column;
padding: 0;
}
.leveler-wrapper-image {
margin-bottom: 25px;
}
.leveler-wrapper-image .active {
justify-content: center;
}
.leveler-wrapper-content {
padding: 0;
}
.leveler-wrapper-content .short {
white-space: inherit;
}
}