.tabs {
    display: flex;
    margin: 30px 0;
}
.mobile {
    display: none;
}
.tabs__panel-collapse {
    display: none;
}
.tabs__panel-collapse.active {
    display: block;
}
.tabs__caption {
    display: flex;
    flex-direction: column;
    width: 32%;
    flex-wrap: wrap;
    list-style: none;
    position: relative;
}
.tabs__content {
    display: none;
    padding: 10px 20px;
    margin-top: 5px;
    height: 100%;
}
.tabs__content-wrapper {
    width: 80%;
    background-color: #f2efee;
}
.tabs__content.active {
    display: block;
}
.tabs__text {
    font-family: Georgia, sans-serif;
    font-style: italic;
    font-size: 15px;
    padding-bottom: 25px;
    line-height: 1.3;
}
.tabs__mobile{
    color: #666666;
    list-style: none;
    cursor: pointer;
    padding: 15px 10px;
    margin: 5px 0;
    border-left: 5px solid #cccccc;
    text-transform: uppercase;
    line-height: 1.4;
}
.tabs__mobile.active{
    color: #a5854c;
    border-left: 5px solid #a5854c;
    background-color: #f2efee;
}
.tabs__mobile:hover{
	background:rgba(165, 133, 76, .1);
}
li {
    color: #666666;
    list-style: none;
    cursor: pointer;
    padding: 15px 10px;
    margin: 5px 0;
    border-left: 5px solid #cccccc;
    text-transform: uppercase;
    line-height: 1.4;
}
li:nth-child(3) {
    margin-bottom: 0;
}
li:nth-child(1) {
    margin-top: 0;
}
li.active {
    color: #a5854c;
    border-left: 5px solid #a5854c;
    background-color: #f2efee;
}
#cao:hover svg #cao {
    fill: white;
}
@media all and (max-width: 1024px) {
    .tabs {
        display: none;
    }
    .mobile {
        display: block;
    }
    .tabs__caption {
        width: auto;
    }
    .tabs__content-wrapper {
        width: auto;
    }
    .panel-collapse {
        display: none;
    }
    .panel-collapse.active {
        display: block;
    }
}