.-accordion {
margin: 0;
padding: 0;
}
.-accordion:before,
.-accordion:after {
content: " ";
display: table;
}
.-accordion:after {
clear: both;
}
.-accordion__panel {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.-accordion__heading {
position: relative;
display: block;
padding: 15px;
color: #9ea6aa;
font-size: 14px;
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.-accordion__heading > .-icon {
margin-top: 3px;
color: #bbb;
font-size: 18px;
font-style: normal;
font-weight: bold;
}
.-accordion__heading > .-icon--right {
float: right;
margin-left: 10px;
}
.-accordion__heading > .-icon--left {
float: left;
margin-right: 10px;
}
.-accordion__heading > .-icon:before {
content: "+";
}
.-accordion__expander {
padding: 15px;
color: #8b9597;
}
.-accordion--active .-accordion__heading {
color: #687175;
}
.-accordion--active .-accordion__heading > .-icon:before {
content: "-";
}
.-accordion--horizontal {
height: 570px;
}
.-accordion--horizontal img{
max-height: 500px;
width: auto;
}
.-accordion--horizontal strong{
display: block;
}
.-accordion--horizontal .-accordion__panel {
position: relative;
float: left;
height: 100%;
width: 100%;
}
.-accordion--horizontal .-accordion__heading {
width: 570px;
text-align: right;
-webkit-transform: translateX(-100%) rotate(-90deg) translateZ(0px);
-moz-transform: translateX(-100%) rotate(-90deg) translateZ(0px);
-ms-transform: translateX(-100%) rotate(-90deg) translateZ(0px);
-o-transform: translateX(-100%) rotate(-90deg) translateZ(0px);
transform: translateX(-100%) rotate(-90deg) translateZ(0px);
-webkit-transform-origin: right top 0;
-moz-transform-origin: right top 0;
-ms-transform-origin: right top 0;
-o-transform-origin: right top 0;
transform-origin: right top 0;
}
.-accordion--horizontal .-accordion__heading > .-icon {
right: 227px;
-webkit-transform: rotate(90deg) translateZ(0px);
-moz-transform: rotate(90deg) translateZ(0px);
-ms-transform: rotate(90deg) translateZ(0px);
-o-transform: rotate(90deg) translateZ(0px);
transform: rotate(90deg) translateZ(0px);
}
.-accordion--horizontal .-accordion__expander {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 450px;
margin-left: 50px;
overflow-y: auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #E4E4E4;
}
.-accordion--basic.-accordion--vertical .-accordion__panel {
border-bottom: 2px solid #edf1f2;
}
.-accordion--basic.-accordion--horizontal .-accordion__panel {
border-right: 2px solid #edf1f2;
}
.-accordion--basic .-accordion--active {
background-color: #f6f9f9;
}
.-accordion--box .-accordion__panel {
border-radius: 5px;
}
.-accordion--box.-accordion--vertical .-accordion__panel {
margin-bottom: 10px;
}
.-accordion--box.-accordion--horizontal .-accordion__panel {
margin-right: 10px;
}
.-accordion--box .-accordion__heading {
background-color: #306C80;
color: #fff;
}