<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

	<link href='//fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
	<link href='//fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
	<link href='//fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>
	<link href='//fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300' rel='stylesheet' type='text/css'>
</head>
<style>
    /*-------------------------------------*/

    #wrapper {
        display: flex;
        justify-content: space-evenly;
    }

    .accordion__item {
        margin: 5px auto;
		font-size: 17px;
		line-height:27px;
		font-family:Poppins,Helvetica,Verdana,sans-serif;
		min-width:700px;
		max-width:700px;
		border-bottom:1px solid #ddd;
    }

    .accordion__item:after {
        /* 
        content: '\02795';
        */
    }    

    .accordion__item .accordion__title {
        font-family:Poppins,Helvetica,Verdana,sans-serif;
		font-weight:600;
		font-size: 18px;
        position: relative;
        display: block;
        padding: 20px 60px 22px 13px;
        margin-bottom: 2px;
        margin-right:5px;
        color: #202020;
        text-decoration: none;
        background-color: none;
        border-radius: 3px;
        -webkit-transition: background-color 0.2s;
        transition: background-color 0.2s;
        cursor: pointer;
    }

    .accordion__item .accordion__title:hover {
		color:#0097CF;
        background-color: none;
        transition: all 0.5s ease-out;
    }

	.accordion__item .accordion__title .accordion-active {
		color:#0097CF;		
	}

    .accordion__item .accordion-active {
		color:#0097CF;
        background-color: none;
    }
    
    .accordion__item .accordion__title:after {
        /* content: '\02795'; */
        content: "";
        background: url('https://joincrossfireiq.com/static/images/icons/skinny_plus.png') no-repeat;
        background-image: url('https://joincrossfireiq.com/static/images/icons/skinny_plus.png') no-repeat;
        background-size: 30px;
        background-repeat: no-repeat;
        position: absolute;
        top: 13px;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        display: inline-block;
        vertical-align: middle;
        width: 30px;
        height: 30px;
        text-align: center;
        color: #fff;
        line-height: 30px;
        font-size: 20px;
        font-weight: 300;
        margin-right: 5px;
        background-color: none;
        border-radius: 50%;
        -webkit-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;  
    }
    
    .accordion__item .accordion-active:after {
        /*content: '\02796'; */
        content: "";
        background: url('https://joincrossfireiq.com/static/images/icons/skinny_minus.png');
        background-size: 30px;
        background-repeat: no-repeat;
        position: absolute;
        top: 13px;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        display: inline-block;
        vertical-align: middle;
        width: 30px;
        height: 30px;
        text-align: center;
        color: #fff;
        line-height: 30px;
        font-size: 20px;
        font-weight: 300;
        margin-right: 5px;
        background-color: none;
        border-radius: 50%;
        -webkit-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
    }
    
    .accordion__item .accordion__title .accordion__arrow:after {
        /*content: '\02795'; */
    }

    .accordion__item .accordion__title .accordion__arrow {
        position: absolute;
        top: 13px;
        right: 10px;
        display: inline-block;
        vertical-align: middle;
        width: 30px;
        height: 30px;
        text-align: center;
        color: #fff;
        line-height: 30px;
        font-size: 20px;
        font-weight: 700;
        margin-right: 5px;
        background-color: none;
        border-radius: 50%;
        -webkit-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
    }

    .accordion__item .accordion__rotate {
        transform: rotate(225deg);
    }

    .accordion__item .accordion__content {
        padding: 30px;
        margin-bottom: 2px;
        font-size: 17px;
		line-height:27px;
		font-family:Poppins,Helvetica,Verdana,sans-serif;
        display: none;
        background-color: none;
    }

    .accordion__item .accordion__arrow-item {
        font-weight: 700;
    }

    /*-------------------------------------*/
</style>

<body>

    <div id="wrapper">
        <div class="accordion">
            <div class="accordion__item">
                <div class="accordion__title">
                    <div class="accordion__arrow"><span class="accordion__arrow-item"></span></div>
                    <span class="accordion__title-text">What is 'dirty electricity' or 
                    'harmonic distortion' really?</span>
                </div>
                <div class="accordion__content">
					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem 
					Ipsum has been the industry's standard dummy text ever since the 1500s, when an 
					unknown printer took a galley of type and scrambled it to make a type specimen book. 
                </div>
            </div>
            <div class="accordion__item">
                <div class="accordion__title">
                    <div class="accordion__arrow"><span class="accordion__arrow-item"></span></div>
                    <span class="accordion__title-text">What savings will I see?</span>
                </div>
                <div class="accordion__content">
					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
					Ipsum has been the industry's standard dummy text ever since the 1500s, when an
					unknown printer took a galley of type and scrambled it to make a type specimen book.
                </div>
            </div>
            <div class="accordion__item">
                <div class="accordion__title">
                    <div class="accordion__arrow"><span class="accordion__arrow-item"></span></div>
                    <span class="accordion__title-text">Is there a warranty?</span>
                </div>
                <div class="accordion__content">
					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
					Ipsum has been the industry's standard dummy text ever since the 1500s, when an
					unknown printer took a galley of type and scrambled it to make a type specimen book.
                </div>
            </div>
        </div>

        <div class="accordion">
            <div class="accordion__item">
                <div class="accordion__title">
                    <div class="accordion__arrow"><span class="accordion__arrow-item"></span></div>
                    <span class="accordion__title-text">What are the main causes of EMF/EMI?</span>
                </div>
                <div class="accordion__content">
					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
					Ipsum has been the industry's standard dummy text ever since the 1500s, when an
					unknown printer took a galley of type and scrambled it to make a type specimen book.
                </div>
            </div>
            <div class="accordion__item">
                <div class="accordion__title">
                    <div class="accordion__arrow"><span class="accordion__arrow-item"></span></div>
                    <span class="accordion__title-text">What does the Pure Power Plug-In do?</span>
                </div>
                <div class="accordion__content">
					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
					Ipsum has been the industry's standard dummy text ever since the 1500s, when an
					unknown printer took a galley of type and scrambled it to make a type specimen book.
                </div>
            </div>
            <div class="accordion__item">
                <div class="accordion__title">
                    <div class="accordion__arrow"><span class="accordion__arrow-item"></span></div>
                    <span class="accordion__title-text">How do I know the Power Perfect box is working?</span>
                </div>
                <div class="accordion__content">
					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
					Ipsum has been the industry's standard dummy text ever since the 1500s, when an
					unknown printer took a galley of type and scrambled it to make a type specimen book.
                </div>
            </div>
        </div>
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
        integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        $(function () {

            //BEGIN
            $(".accordion__title").on("click", function (e) {

                e.preventDefault();
                var $this = $(this);

                if (!$this.hasClass("accordion-active")) {
                    $(".accordion__content").slideUp(400);
                    $(".accordion__title").removeClass("accordion-active");
                    //$('.accordion__arrow', this).removeClass('accordion__arrow');
                    //$('.accordion__arrow').removeClass('accordion__rotate');
                }

                $this.toggleClass("accordion-active");
                //$this.toggleClass("accordion__arrow");
                //$('.accordion__arrow', this).addClass('accordion__arrow');
                $this.next().slideToggle();
                //$('.accordion__arrow', this).addClass('accordion__arrow');
                //$('.accordion__arrow', this).toggleClass('accordion__rotate');
            });
            //END

        });
    </script>

</body>

</html>