#faq {  max-width: 1100px; border-top:3px solid #123467;  margin: 20px auto; overflow:hidden;  padding: 0 ;  text-align: center;}
#faq ul {  text-align: left;}
.transition, p, ul li i:before, ul li i:after {  transition: all 0.3s;}
#faq .no-select, #faq h2 {  -webkit-tap-highlight-color: transparent;  -webkit-touch-callout: none;  -webkit-user-select: none;
  -khtml-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;}
#faq h2 {  font-size: 25px;  line-height: 34px;  text-align: left;  padding: 30px 25px ;  text-transform: none;  font-weight: 300;
  letter-spacing: 1px;  display: block;  margin: 0;  cursor: pointer;  transition: .2s;}
#faq p {max-height:300px;   color: #333; background-color:#e9f0f4;  text-align: left;  font-size: 16px;  line-height: 35px;  position: relative;
  overflow: hidden;  will-change: max-height;  contain: layout;  opacity: 1;  transform: translate(0, 0);
  padding: 0px 25px; margin:0;  transition: .3s  max-height;  -webkit-hyphens: auto;  -ms-hyphens: auto;
  hyphens: auto;  z-index: 2;}
#faq p span {display:block; padding:25px 0;}

#faq ul {  list-style: none;  perspective: 900;  padding: 0;  margin: 0;}
#faq ul li {  position: relative; border-bottom:1px solid #ccc;  overflow: hidden;  padding: 0;   background: #fff;}
#faq ul li:last-of-type {  padding-bottom: 0;}
#faq ul li i {  position: absolute;  transform: translate(-6px, 0);  margin-top: 38px;  right: 20px;}
#faq ul li i:before, ul li i:after {  content: "";  position: absolute;  background-color: #123467;  width: 3px;  height: 14px;}
#faq ul li i:before {  transform: translate(-4px, 0) rotate(45deg);}
#faq ul li i:after {  transform: translate(4px, 0) rotate(-45deg);}
#faq ul li input[type=checkbox] {  position: absolute;  cursor: pointer;  width: 100%;  height: 100%;  z-index: 1;  opacity: 0;  touch-action: manipulation;}
#faq ul li input[type=checkbox]:checked ~ h2 {  color: #000; }
#faq ul li input[type=checkbox]:checked ~ p { max-height:0px;  transition: .3s;  opacity: 1;   padding: 0 25px; margin:0;}
#faq ul li input[type=checkbox]:checked ~ i:before {  transform: translate(4px, 0) rotate(45deg);}
#faq ul li input[type=checkbox]:checked ~ i:after {  transform: translate(-4px, 0) rotate(-45deg);}

/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
#faq {  max-width: 100%; border-top:3px solid #123467;  margin: 0 auto;  padding: 0 ;  text-align: center;}}
@media (max-width: 768px) {
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}