/* Flexible Slide-to-top Accordion Style*/

.st-accordion{
    width:100%;
    min-width:240px;
    margin: 0 auto 0px auto;  border-top:0px solid #e8e8e8; padding-bottom: 20px;
}
.st-accordion ul { padding: 0;}
.st-accordion ul li{ margin-bottom: 0px; list-style: none;
    border-bottom: 0px solid #e8e8e8; height: auto !important;
    border-top:0px solid #fff;
   
}
.st-accordion ul li:first-child{
    border-top:none;
}
.icon-q, .icon-a {font-size: clamp(34px, 3.5vw, 48px); display: inline-block; position: absolute; top: 9px; left: 24px; font-weight: 700; border-radius: 100%; font-family: "Raleway", sans-serif; line-height: 1;	}
.icon-q { color: #000; }
.icon-a { color: #fff; background: #111;  left: 30px; top:20px;}
.st-accordion ul li > div:nth-of-type(1){
    padding: 15px 80px; margin-bottom: 20px; font-size: clamp(18px, 1.9vw, 24px); color: #000; line-height: 1.5; font-weight: 700; background: #bead9c;
    display: block;
	position: relative;
	outline:none;
    -webkit-transition:  color 0.2s ease-in-out;
	-moz-transition:  color 0.2s ease-in-out;
	-o-transition:  color 0.2s ease-in-out;
	-ms-transition:  color 0.2s ease-in-out;
	transition:  color 0.2s ease-in-out;
}
.st-accordion ul li > div:after { position: absolute; width: 100%; height: 1px; background: #e9e9e4; left: 0; bottom: 0;}
.st-accordion ul li > div span{ position: absolute; right: 30px; top: 50%; transform: translateY(-50%); display: block; text-indent: -9999px; border: 0px solid #dcdcdc; width: 28px; height: 28px;
	-webkit-transition:  all 0.2s ease-in-out;
	-moz-transition:  all 0.2s ease-in-out;
	-o-transition:  all 0.2s ease-in-out;
	-ms-transition:  all 0.2s ease-in-out;
	transition:  all 0.2s ease-in-out;
}
.st-accordion ul li > div span:before, .st-accordion ul li > div span:after  { content: ""; position: absolute; width: 28px; height: 3px; background: #000;top:50%; left: 50%;; transform: translate(-50%, -50%);transition: all 0.4s ease-out 0s;}
.st-accordion ul li > div span:before {  }
/*.st-accordion ul li > a span:after { transform: rotate(0deg);}*/
.st-accordion ul li > div:hover{
    color: #000;
}
.st-accordion ul li > div:hover span{
}
.st-accordion ul li.st-open > div:nth-of-type(1){ background: #000; color: #fff;
     
}
.st-accordion ul li.st-open > div .icon-q{color: #fff; }
.st-accordion ul li.st-open > div span { }
.st-accordion ul li.st-open > div span:before, .st-accordion ul li.st-open > div span:after { background: #fff;}
.st-accordion ul li.st-open > div span:after{ transform: translate(-50%, -50%) rotate(-90deg);}
.st-content{ padding:0 calc(20px + 1%) 25px calc(20px + 1%) ; font-weight: 400; font-size: 18px; line-height:1.7; }
.st-content:before { position: absolute;  width: 30px; height: 30px; background: #fff; transform: rotate(45deg);  left: 75px; top:-10px; box-shadow: -10px -10px 10px -5px rgba(0,0,0,0.07);}
.st-content p{
}
.st-content img{
    width:125px;
    border-right:1px solid #fff;
    border-bottom:1px solid #fff;
}
@media only screen and (max-width: 1279px) {
	.st-accordion ul li > div:nth-of-type(1) { padding-left: 55px; padding-right: 40px;}
	.icon-q { top:12px; left: 15px;}
	.st-accordion ul li > div span{ right: 10px;}
	.st-accordion ul li > div span:before, .st-accordion ul li > div span:after  { width: 18px; height: 3px; }
}
@media only screen and (max-width: 640px) {
	.st-accordion ul li > div{ font-size: 17px; }
	.st-content{ }
}