<?php
	include('views/_header.tpl.php');
?>

<script type="text/javascript">
$(document).ready(function() {

});	
</script>

<!-- MAY WANT TO REMOVE THE OVERFLOW HIDDEN STYLES, SO THE PAGE IS SCROLLABLE -->
<style type="text/css">
	html {
		/*overflow:hidden !important;*/
	}
	body { height:100%; overflow:auto; background-color:#000; }
	.spacer { padding-top: 0px; }
	
	#mmen { display:none; }
    h1 { 
        text-transform:uppercase; 
        font-size:48px; 
		line-height:58px;
		font-weight:500;
		font-family: 'Open Sans', Montserrat, 'Montserrat-Light', 'Proxima-Nova-Thin', GillSans, DINOT-Medium, acherusgrotesque-regular, 'acherusgrotesque-regular', sans-serif;
        color:#19a9f4;
        margin-bottom:5px;
    }
    h3 span {
        font-size: 28px;
        text-transform:uppercase; 
		font-family: 'Open Sans', Montserrat, 'Montserrat-Light', 'Proxima-Nova-Thin', GillSans, DINOT-Medium, acherusgrotesque-regular, 'acherusgrotesque-regular', sans-serif;
        color:#19a9f4;   
        font-weight:normal;
        padding-bottom:20px;
    }
    h2, h3, h4, h5 {
        text-transform:uppercase; 
		font-family: 'Open Sans', Montserrat, 'Montserrat-Light', 'Proxima-Nova-Thin', GillSans, DINOT-Medium, acherusgrotesque-regular, 'acherusgrotesque-regular', sans-serif;		
		margin-bottom:15px !important;
        color:#000;       
    }    
	.nav-horizontal > li {
		padding: 0px 8px;
		line-height: 20px;
	}
	
	ul li {
		font-size: 17px;
		font-weight:300;
		line-height:29px;
		height:30px;
	}
	
	.textshadow {
		text-shadow: 0px 1px 1px rgba(0,0,0,.7);
	}
    
	/* ######################################################### */
	/*                     ACCORDION WRAPPER                     */
	/* ######################################################### */

    #accordionwrapper {
        display: flex;
        /*justify-content: space-evenly;*/
    }
    .accordion {
		width:100%;
    }
	.accordion__item {
		background:none;
		margin: 5px auto;
		width:100%;
		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 {
		max-width:100%;
        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('static/system/icons/skinny_plus.png') no-repeat;
		background-image: url('static/system/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('static/system/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: 0 30px 30px 30px;
        margin-bottom: 2px;
		font-weight:300;
        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;
    }
	strong {
		font-weight: 600;
	}
	
/* ######################################################### */
/*                       MOBILE STYLES                       */
/* ######################################################### */


/******************************************************************************/ 
/***************        LARGE DESKTOP DISPLAY SCREENS         *****************/
/******************************************************************************/ 
/* So, iMac is 2554 */
/*@media screen and (min-width:  1367px), screen and (max-width:  3200px) { */
@media (min-width: 2554px) and (max-width: 3200px) {

}	

/******************************************************************************/ 
/***************      VERY LARGE DESKTOP DISPLAY SCREENS      *****************/
/******************************************************************************/ 
/* This is the 2nd screen connected to the iMac */
/*@media screen and (min-width:  1367px), screen and (max-width:  3200px) { */
@media (min-width: 1922px) and (max-width: 2553px) {

}	

/******************************************************************************/ 
/***************      VERY LARGE DESKTOP DISPLAY SCREENS      *****************/
/******************************************************************************/ 
/* This is the 2nd screen connected to the iMac */
/*@media screen and (min-width:  1367px), screen and (max-width:  3200px) { */
@media (min-width: 1920px) and (max-width: 1921px) {

}	
	
/******************************************************************************/ 
/***************        LARGE DESKTOP DISPLAY SCREENS         *****************/
/******************************************************************************/ 

/*@media screen and (min-width:  1367px), screen and (max-width:  3200px) { */
@media (min-width: 1441px) and (max-width: 1919px) {

}		

/******************************************************************************/ 
/***************        MACBOOK AIR DISPLAY SCREENS         *****************/
/******************************************************************************/ 

/*@media screen and (min-width:  1367px), screen and (max-width:  3200px) { */
@media (min-width: 1367px) and (max-width: 1440px) {

}	

/******************************************************************************/ 
/***************      SMALLER THAN FULL SCREEN MACBOOK        *****************/
/******************************************************************************/ 

@media (min-width: 1364px) and (max-width: 1366px) {

}	
	
/******************************************************************************/ 
/***************       MACBOOK AIR SCREENS AND 1280 X 800     *****************/
/******************************************************************************/ 

@media (min-width: 1280px) and (max-width: 1363px) {

}		

/******************************************************************************/ 
/********************             Larger iPads           **********************/
/******************************************************************************/ 

@media (min-width: 1024px) and (max-width: 1279px) {

}

/* Landscape tablet to iPads */
@media (min-width: 980px) and (max-width: 1024px) {

}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {

}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
	
}

/* Landscape phones and down */
@media (max-width: 586px) {
	.spacer {
		padding-top: 51px;
	}
}

/* Landscape phones and down */
@media (max-width: 480px) {

}	

/* Older phones with super small screens */
@media (max-width: 320px) {

}	
</style>


<div class="home-feature-category" style="background:#fff; border:none; padding-top:0px;">
	<div class="tophdrimg" style="background:#000 !important; background-color:#000 !important; width:100%;
	max-height:500px; top:0;">
		<img class="topbgimg" src="/static/system/superskinnybanner.jpg" style="object-fit:cover;
		background-size:cover; background-position: top top; max-height:500px;" alt="Home" />
	</div>
	
    <div class="container_12 clearfix">
        <div class="grid_12 marked-category">
        
			<h1 style="margin-top:20px;">FAQs</h1>
			
			<div style="background:none; padding:3px; font-size:17px; line-height:27px">
				Other Helpful Links: 
				<a href="/contact" style="font-weight:600;" 
					title="Contact">Contact</a> |
				<a href="/about" style="font-weight:600;"
					title="About">About</a> |
				<a href="/" style="font-weight:600">Home</a>
				
			</div>
			<br />
					
			<div id="accordionwrapper" style="border-top:1px solid #ddd;">
		        <div class="accordion">
		        	<?php //print_r($faqs);
		        	foreach($faqs as $faq) {
		        	?>
		        	
		            <div class="accordion__item">
		                <div class="accordion__title">
		                    <div class="accordion__arrow"><span class="accordion__arrow-item"></span></div>
		                    <span class="accordion__title-text"><?= $faq['subtitle'] ?></span>
		                </div>
		                <div class="accordion__content">
							<?= $faq['description'] ?>
		                </div>
		        	</div>
		        	
		        	<?php  } ?>
		    	</div>
		    </div>
		
		</div><!-- GRID 12 DIV ENDS HERE -->
	</div><!-- CONTAINER 12 DIV END HERE -->
</div><!-- HOME FEATURE CATEGORY DIV ENDS HERE -->

	<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 rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

   <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>
		 //var $i = jQuery.noConflict();
		 //alert($i.fn.jquery);
		 //var jQuery_3_7_1 = $.noConflict(true);
		 //var jQuery_3_7_1 = jQuery.noConflict();
		 //var $j = jQuery.noConflict(true);
		 //var jQuery = $.noConflict(true);
		 var jQuery_3_7_1 = jQuery.noConflict(true);
		
	 </script>
	
  
    <script>
		//jQuery.noConflict();
		jQuery_3_7_1(function () {

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

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

				if (!$this.hasClass("accordion-active")) {
					jQuery_3_7_1(".accordion__content").slideUp(400);
					jQuery_3_7_1(".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>

<!--    <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>-->

<?php
	include('views/_footer.tpl.php');
?>