.transition, p, #faq ul li i:before, #faq ul li i:after {
     transition: all 0.25s ease-in-out;
}
 .flipIn, #faq h1, #faq ul li {
     animation: flipdown 0.5s ease both;
}
 .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;
}
/*html {
     width: 100%;
     height: 100%;
     perspective: 900;
     overflow-y: scroll;
     background-color: #dce7eb;
     font-family: "Titillium Web", sans-serif;
     color: rgba(48, 69, 92, 0.8);
}
*/
 #faq {
     min-height: 0;
     display: inline-block;
     position: relative;
     left: 50%;
     margin: 0px 0;
     transform: translate(-50%, 0);
     background-color:;
     max-width: 1100px;
}
 @media (max-width: 550px) {
     #faq {
         box-sizing: border-box;
         transform: translate(0, 0);
         max-width: 100%;
         min-height: 100%;
         margin: 0;
         left: 0;
    }
}
 #faq h1, h2 {
     color: #0468d0;
}
 #faq h1 {
     text-transform: uppercase;
    /*font-size: 36px;
     line-height: 42px;
     letter-spacing: 3px;
     font-weight: 100;
     */
}
 #faq h2 {
    /*font-size: 26px;
     line-height: 34px;
     font-weight: 300;
     letter-spacing: 1px;
    */
     display: block;
     background-color:;
     margin-right: 20px;
     cursor: pointer;
     font-size: 1em;
}
 #faq p {
    /*color: rgba(48, 69, 92, 0.8);
    */
    /*font-size: 17px;
     line-height: 26px;
     letter-spacing: 1px;
    */
     position: relative;
     overflow: hidden;
     max-height: 800px;
     opacity: 1;
     transform: translate(0, 0);
     z-index: 2;
     padding: 5px 10px;
     border-radius: 15px;
}
 #faq ul {
     list-style: none;
     perspective: 900;
     padding: 0;
     margin: 0;
}
 #faq ul li {
     position: relative;
     padding: 0;
     margin: 0;
     padding-top: 5px;
     border-top: 1px solid lightgray;
}
 #faq ul li:nth-of-type(1) {
     animation-delay: 0.1s;
}
 #faq ul li:nth-of-type(2) {
     animation-delay: 0.2s;
}
 #faq ul li:nth-of-type(3) {
     animation-delay: 0.3s;
}
 #faq ul li:nth-of-type(4) {
     animation-delay: 0.4s;
}
 #faq ul li:nth-of-type(5) {
     animation-delay: 0.5s;
}
 #faq ul li:nth-of-type(6) {
     animation-delay: 0.6s;
}
 #faq ul li:nth-of-type(7) {
     animation-delay: 0.7s;
}
 #faq ul li:nth-of-type(8) {
     animation-delay: 0.8s;
}
 #faq ul li:nth-of-type(9) {
     animation-delay: 0.9s;
}
 #faq ul li:nth-of-type(10) {
     animation-delay: 1.0s;
}
 #faq ul li:nth-of-type(11) {
     animation-delay: 1.1s;
}
 #faq ul li:nth-of-type(12) {
     animation-delay: 1.2s;
}
 #faq ul li:nth-of-type(13) {
     animation-delay: 1.3s;
}
 #faq ul li:nth-of-type(14) {
     animation-delay: 1.4s;
}
 #faq ul li:nth-of-type(15) {
     animation-delay: 1.5s;
}
 #faq ul li:nth-of-type(16) {
     animation-delay: 1.6s;
}
 #faq ul li:nth-of-type(17) {
     animation-delay: 1.7s;
}
 #faq ul li:nth-of-type(18) {
     animation-delay: 1.8s;
}
 #faq ul li:nth-of-type(19) {
     animation-delay: 1.9s;
}
 #faq ul li:nth-of-type(20) {
     animation-delay: 2.0s;
}
 #faq ul li i {
     position: absolute;
     transform: translate(-6px, 0);
     margin-top: 5px;
     right: 0;
}
 #faq ul li i:before, ul li i:after {
     content: "";
     position: absolute;
     background-color: #0468d0;
     width: 3px;
     height: 9px;
}
 #faq ul li i:before {
     transform: translate(-2px, 0) rotate(45deg);
}
 #faq ul li i:after {
     transform: translate(2px, 0) rotate(-45deg);
}
 #faq ul li input[type=checkbox] {
     position: absolute;
     cursor: pointer;
     width: 100%;
     height: 100%;
     z-index: 1;
     opacity: 0;
}
 #faq ul li input[type=checkbox]:checked ~ p {
     margin-top: 0;
     max-height: 0;
     opacity: 0;
     transform: translate(0, 50%);
}
 #faq ul li input[type=checkbox]:checked ~ i:before {
     transform: translate(2px, 0) rotate(45deg);
}
 #faq ul li input[type=checkbox]:checked ~ i:after {
     transform: translate(-2px, 0) rotate(-45deg);
}
 @keyframes flipdown {
     0% {
         opacity: 0;
         transform-origin: top center;
         transform: rotateX(-90deg);
    }
     5% {
         opacity: 1;
    }
     80% {
         transform: rotateX(8deg);
    }
     83% {
         transform: rotateX(6deg);
    }
     92% {
         transform: rotateX(-3deg);
    }
     100% {
         transform-origin: top center;
         transform: rotateX(0deg);
    }
}