.main-area{ background: url("/images/theme-b67/about/item-bg-1.jpg") no-repeat left bottom; background-size: contain;   }

.faq{  width: 100%;max-width: 90%;  margin:5% auto 10% auto; list-style: none; padding:0px; /*counter-reset: index; background-color: rgba(255,255,255,.85);*/}
.faq > li { display: flex; flex-wrap: wrap;   margin-bottom:15px; background: rgb(245, 245, 245); outline: none; transition: color 0.2s ease-in-out 0s;}
.faq > li::before {  content: "Q";  margin: 10px 0px 0px 10px;  width:36px; height:36px;   font-size: 1.5rem; text-align:center; line-height: 2rem; font-weight: 900;color: #fff; background-image: linear-gradient(120deg, #f6d365 0%, #f39700 100%);  border-radius: 99rem;}
.faq > li:hover{ background:#f8f7f7;}

.faq > li.active .answer {display: block; max-height:100%;  background-color:#fff; transition: max-height 0.5s ease, padding-bottom 0.5s ease;    }
.faq > li.active h3.question { color:#f39800;  font-weight: 700; transition: color 0.5s ease;}
.faq > li.active { background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%); }

 .faq h3.question {position: relative; width: calc(100% - 60px); padding:15px 20px; cursor: pointer;font-size: 1.188rem;font-weight:700; color:#333;  transition: color 0.5s ease;}
.faq > li .answer { display: none;color: #495057; font-size: 16px; line-height: 24px;width: 100%; max-height: 0; padding:15px 15px 25px 50px;border: solid 1px #f5f5f5;background-color:transparent;  overflow: hidden;  transition: max-height 0.5s ease, padding-bottom 0.5s ease;}
.faq > li .answer a{ color:#3c9fcd; text-decoration: underline!important; }
.faq > li .answer a:hover{ color:#70a84a;}

.faq .plus-minus-toggle { position: absolute;top: 50%; right: 0px;  z-index: 2;cursor: pointer; width: 30px; height: 30px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; transition: background-color .3s ease, transform .3s ease;}
.faq .plus-minus-toggle.collapsed { background:#000; }
.faq .plus-minus-toggle:before,.faq .plus-minus-toggle:after { content: '';width: 21px;height:2px; right:15%; top: 45%; position: absolute; transform: translate(-50%, -50%);   transition: transform 500ms ease;}
.faq .plus-minus-toggle:after{transform: rotate(-45deg);  background:#f39700; }
.faq .plus-minus-toggle:before{ transform: rotate(45deg);  background:#f39700; }  
.faq .plus-minus-toggle.collapsed:after {transform: rotate(90deg); background:#fff;}
.faq .plus-minus-toggle.collapsed:before {transform: rotate(180deg);background:#fff;  }
.faq > li.active .answer:before{ -ms-transform: translateY(-50%) scaleX(1); transform: translateY(-50%) scaleX(1);}
.faq > li.active .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;}

.faq .cms-list{ width: 100%;  display: block; margin:0px;padding: 0px; background: none;}
.faq .cms-list li{ display: block; padding:0px 0px 0px 20px; margin:5px 0px; font-size:1rem; line-height:1.75em; color: #000; position: relative; background: none; }
.faq .cms-list li:before{ content: ''; width:6px; height:6px; background-color:#f39700; border-radius: 99rem; position: absolute; top: 0px; left: 0px;  transition: all 0.5s ease 0s;}
.faq .cms-list li:after{ display: none;}

@media (max-width:767.98px) {
.faq{max-width: 100%;padding-left:0px; padding-right:0px;}    
.faq .question { font-size: 16px;}
.faq h3.question { padding:10px 34px 10px 10px; font-size:0.9375rem; }
.faq .plus-minus-toggle { right: -25px; }
}

.show {display: block; max-height:100%;  background-color:#fff; transition: max-height 0.5s ease, padding-bottom 0.5s ease;    }


.toggle-box{width: 100%;  max-width: 90%; margin:20px auto;padding: 0px 20px;  display: flex; flex-wrap: wrap; justify-content: flex-end; position: relative; }
.switch { }
.switch input { display: none;}
.switch small { display: inline-block; width: 100px; height:40px; background-image: linear-gradient(120deg, #555 0%, #999 100%);border-radius: 30px; position: relative; cursor: pointer;}
.switch small:after { content: "Off"; position: absolute;  color: #fff; font-size: 1rem; font-weight: 700;  width: 100%; left: -10px; top: 10px; text-align: right; padding: 0 6px; box-sizing: border-box;line-height: 18px;}
.switch small:before { content: ""; position: absolute; width: 30px;  height:30px;  background: #fff;  border-radius: 50%; top: 5px; left: 10px; transition: .3s; box-shadow: -3px 0 3px rgba(0,0,0,0.1);}
.switch input:checked ~ small {  background-image: linear-gradient(120deg, #f6d365 0%, #f39700 100%);transition: .3s;}
.switch input:checked ~ small:before {  transform: translate(50px, 0px);  transition: .3s;}
.switch input:checked ~ small:after {  content: "On";  text-align: left;  left: 10px;}