<?php
/**
* The template used to display archive content for FAQS
*/
?>
<?php get_header(); ?>
<div class="container">
	<?php while(have_rows('hero_banner_rows','cpt_faqs')) : the_row(); ?>
		<div class="banner-list-item p-rel parallax-section parallax-scroll">	
			<div class="parallax-inner cover back-pos-center" style="background-image: url(<?php echo get_sub_field('hero_bkgd_image','cpt_faqs'); ?>);"></div>
			<div class="p-absolute top-0 bottom-0 left-0 right-0">
				<div class="w-20-p brk-1200-w-30-p brk-600-w-40-p <?php echo get_sub_field('hero_box_position','cpt_faqs'); ?> pd-70 brk-600-pd-40 font-30 brk-1800-font-25 brk-900-font-20 brk-600-font-15" style="background-color:<?php echo get_sub_field('hero_box_color','cpt_faqs'); ?>;color:<?php echo get_sub_field('hero_box_text_color','cpt_faqs'); ?>;">
					<h1 class="brk-600-font-23"><?php echo get_sub_field('hero_box_title','cpt_faqs'); ?></h1>
					<div><?php echo get_sub_field('hero_box_content','cpt_faqs'); ?></div>
				</div>
			</div>
		</div>
		<div class="ht-10 site-white-bk"></div>
	<?php endwhile; ?>
</div>

<script>

	thewidth=$(".banner-list-item").width();

	if ($(".query-check").css("z-index") == "0" ){
		$(".banner-list-item").css({"height":thewidth/2.5});
	}

	if ($(".query-check").css("z-index") == "1" ){
		$(".banner-list-item").css({"height":thewidth/2.5});
	}

	if ($(".query-check").css("z-index") == "50" ){
		$(".banner-list-item").css({"height":thewidth/1.5});
	}

	if ($(".query-check").css("z-index") == "100" ){
		$(".banner-list-item").css({"height":thewidth/1.5});
	}

	if ($(".query-check").css("z-index") == "500" ){
		$(".banner-list-item").css({"height":thewidth/0.7});
	}

$(window).resize(function() {
	thewidth=$(".banner-list-item").width();
	
	if ($(".query-check").css("z-index") == "0" ){
		$(".banner-list-item").css({"height":thewidth/2.5});
	}

	if ($(".query-check").css("z-index") == "1" ){
		$(".banner-list-item").css({"height":thewidth/2.5});
	}

	if ($(".query-check").css("z-index") == "50" ){
		$(".banner-list-item").css({"height":thewidth/1.5});
	}

	if ($(".query-check").css("z-index") == "100" ){
		$(".banner-list-item").css({"height":thewidth/1.5});
	}

	if ($(".query-check").css("z-index") == "500" ){
		$(".banner-list-item").css({"height":thewidth/0.7});
	}
});

</script>

<?php 
// Get all the FAQs
$args = array( 
	'post_type'			=> 'faqs',
	'posts_per_page'	=> -1,
	'order'				=> 'DESC'
);

$the_query = new WP_Query( $args );
?>

<!-- ############################################# //-->
<!-- ############## ANIMATED CONTENT ############# //-->
<!-- ############################################# //-->

<div class="container overflow-hidden">
<?php if ( $the_query->have_posts()) : ?> 
	<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
	<div id="animate-1" class="flex row justify-center cover back-pos-center text-center mgt-5 p-rel">
		<div class="mgt-40 mgb-35 w-70-p mgl-auto mgr-auto brk-900-w-85-p site-black p-rel z-index-50">    			
				<h2 class="font-40 brk-600-font-40 site-font-2"><?php echo get_field('faq_title'); ?></h2>
			<div class="font-20 mgt-40">
				<?php echo get_field('faq_description') ?>
			</div>  
		</div>  
		<div class="p-absolute top-0 bottom-0 right-0 left-0 z-index-1" style="background-color:rgba(255,255,255,1.0);"><hr></div>
	</div>
	<?php endwhile; ?>

<?php else:  ?>

	<div id="post-<?php the_ID(); ?>">
		<div>
			<h2>Not Found</h2>
		</div>
	</div>

<?php endif; ?>

</div>

<script>
	animateme('#animate-1','fadeInUp','fadeOutDown','0.7');
</script>

<?php get_footer(); ?>