/* 



    FAQ LIST 

    

INDEX:

    - Core CSS

    - CSS Custom to individual pages

    

    

*/





/* ----------------------- CORE CSS ----------------------- */



.faq-list {

    padding: 0;

    margin: 100px auto;

    max-width: 996px;

}



.html-support-product-page .faq-list {margin-top: 20px;}





.faq-list>li:first-child {

    border-top: 1px solid #ccc;

}



.faq-list>li {

    border-bottom: 1px solid #ccc;

    width: 100%;

    padding: 0;

    margin: 0;

    text-align: left;

    list-style-type: none !important;

}



.faq-question {

    padding: 20px 20px 20px 0;

    font-weight: 100;

    display: -webkit-box;

    display: flex;

    display: -ms-flexbox;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;

    -webkit-transition: all 0.5s ease;

    -o-transition: all 0.5s ease;

    transition: all 0.5s ease;

}





.faq-question .text {

    -webkit-box-flex: 1;

        -ms-flex-positive: 1;

            flex-grow: 1;

}



.faq-answer>*:last-child {

    margin-bottom: 20px;

}



.faq-answer img {

    display: block;

    max-width: 100%;

    height: auto;

}



/* create plus-icon */



.plus-icon {

    position: relative;

    width: 20px;

    height: 20px;

    -webkit-transition: all .25s ease;

    -o-transition: all .25s ease;

    transition: all .25s ease;

    -webkit-box-flex: 0;

        -ms-flex: 0 0 auto;

            flex: 0 0 auto;

}



.plus-icon .vertical {

    background: #333;

    width: 2px;

    height: 20px;

    position: absolute;

    top: 0;

    left: 9px;

}



.plus-icon .horizontal {

    background: #333;

    height: 2px;

    width: 20px;

    position: absolute;

    top: 9px;

    left: 0;

}



.plus-icon .vertical,

.plus-icon .horizontal {

    -webkit-transition: all 0.5s ease;

    -o-transition: all 0.5s ease;

    transition: all 0.5s ease;

}







.faq-list .lightbox {

    position: relative;

    margin-top: 30px;

}



.faq-list .lightbox::before {

    content: "";

    background-image: url(../images/youtubeplay-grey.svg);

    background-size: cover;

    background-repeat: no-repeat;

    display: inline-block;

    position: absolute;

    z-index: 10;

    width: 75px;

    height: 53px;

    top: calc(50% - 24px);

    left: calc(0% + 90px);

    -webkit-transition-duration: 0.3s;

    -o-transition-duration: 0.3s;

    transition-duration: 0.3s;

}



.faq-list .lightbox:hover::before {

    background-image: url(../images/youtubeplay-orange.svg);

    -webkit-transition-duration: 0.3s;

    -o-transition-duration: 0.3s;

    transition-duration: 0.3s;

}



.faq-list .lightbox img {

    display: block;

    max-height: 100%;

    max-width: 100%;

    width: 100%;

    height: auto;

    max-width: 250px;

}







/* animate rotation */



.faq-question.open .plus-icon {

    -webkit-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

        transform: rotate(45deg);

}



.faq-answer {

    display: none;

    font-weight: 100;

}



.small-title {

    font-weight: normal;

}



@media all and (max-width: 996px) {

    .faq-question {

        padding-left: 15px;

    }



    .faq-answer {

        padding: 0 15px;

    }

}



@media all and (min-width: 600px) {

    .faq-question:hover .plus-icon>div {

        background: #ff6600;

    }



    .faq-question:hover {

        color: #ff6600;

        cursor: pointer;

    }

}









/* ----------------------- CUSTOM CSS ----------------------- */





.product-details-page .faq-list {

    margin: 0 auto 100px;

}