.cms-main-content{background-image: linear-gradient(0deg, #EBEBEB 0%, rgba(235,235,235,0.00) 100%), url("../images/index/mask-2.png"); background-repeat: repeat, no-repeat; background-position: left top, right top; background-size: auto,100% auto;}
.cms-faq{  width: 100%; margin: 0 auto 40px auto; list-style: none; padding:0px; counter-reset: index; background:#fff;  }
.cms-faq li { display: flex; flex-wrap: wrap; border-bottom: solid 1px #ccc; counter-increment: index; }
.cms-faq li::before {  content: counters(index, ".", decimal-leading-zero); font-size: 1.5rem; text-align: right;  font-weight: 900;  min-width: 50px; padding-right: 12px; font-variant-numeric: tabular-nums; align-self:center; background-image: linear-gradient(to bottom, #fff8be, #c3262b); background-attachment: fixed;  -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

.cms-faq li:hover{ background:#f8f7f7;}

.cms-faq li.active .cms-answer { max-height: 100%; padding:15px 15px 25px 50px; transition: max-height 0.5s ease, padding-bottom 0.5s ease;    }
#cms-main .cms-faq li.active h3.cms-question { color:#de0a06; transition: color 0.5s ease;}
#cms-main .cms-faq li.active { background-color: #eb6786; }




 #cms-main .cms-faq h3.cms-question {position: relative; width: calc(100% - 100px);   padding: 0 20px; cursor: pointer;font-size: 1.5rem;font-weight:900; color:#333;  transition: color 0.5s ease;}
 #cms-main .cms-faq h3.cms-question a {display: block; padding: 20px 80px 20px 0;}
.cms-faq .cms-answer { color: #495057; font-size: 16px; line-height: 24px; max-height: 0;  background-color:#C8C8C8;  overflow: hidden;  transition: max-height 0.5s ease, padding-bottom 0.5s ease;}

 


.cms-faq .plus-minus-toggle { position: absolute;  top: 50%; right: 0px;  z-index: 2;cursor: pointer; width: 60px; height: 60px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; transition: background-color .3s ease, transform .3s ease;}
.cms-faq .plus-minus-toggle.collapsed { background:#d05248; }
.cms-faq .plus-minus-toggle:before,.cms-faq .plus-minus-toggle:after { content: '';width: 21px;height:4px; right: 30%; top: 50%; position: absolute; transform: translate(-50%, -50%);   transition: transform 500ms ease;}
.cms-faq a .plus-minus-toggle::after{transform: rotate(-45deg);  background:#d05248; }
.cms-faq a .plus-minus-toggle::before{ transform: rotate(45deg);  background:#d05248; }
.cms-faq a .plus-minus-toggle.collapsed::after {transform: rotate(90deg); background:#fff;}
.cms-faq a .plus-minus-toggle.collapsed::before {transform: rotate(180deg);background:#fff;  }
.cms-faq a:hover .plus-minus-toggle::after{transform: rotate(140deg)!important; top: 34px;}
.cms-faq a:hover .plus-minus-toggle::before{ transform: rotate(220deg)!important; top: 22px;}

.cms-faq li.active .cms-answer:before {
    -ms-transform: translateY(-50%) scaleX(1);
    transform: translateY(-50%) scaleX(1);
}

.cms-faq li.active .cms-answer:before {
    position: absolute;
    top: 50%;
    left: 0;
    -ms-transform-origin: left;
    transform-origin: left;
    -ms-transform: translateY(-50%) scaleX(0);
    transform: translateY(-50%) scaleX(0);
    width: 3%;
    height: 2px;
    background-color: #fff;
    transition: transform .3s ease;
}

@media screen and (max-width: 767px) {
.cms-faq{  padding-left:0px; padding-right:0px;}    
.cms-faq .cms-question { font-size: 16px;}
#cms-main .cms-faq h3.cms-question {position: relative; width: calc(100% - 50px); cursor: pointer;font-size:0.9375rem;font-weight:400; color:#54555a;  }
#cms-main .cms-faq p{line-height: 1.5rem;} 
}
