<?php /*template name: Tutorials*/ get_header(); ?>

<div class="uk-cover-container banner back-right" uk-scrollspy="cls: uk-animation-fade; delay: 300">
	<canvas class="uk-visible@m" width="" height="250"></canvas>
	<canvas class="uk-hidden@m" width="" height="450"></canvas>

	<img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/tutorials-support-hero-1.webp"  uk-cover>

	<div class="uk-position-cover uk-text-center uk-container uk-container-large uk-flex uk-flex-center uk-flex-middle"  uk-scrollspy="cls: uk-animation-fade; delay: 500">
		<div>
			<h1 class="white">Tutorials &amp; Support</h1>
		</div>
	</div>
</div>


<div class="uk-container uk-container-large">
	<div class="uk-child-width-1-2@m uk-grid-large uk-margin-large-top " uk-grid  uk-scrollspy="cls: uk-animation-fade; delay: 300">
		<div>
			<h2 class="uk-margin-medium-bottom uk-text-center">User Manual Downloads</h2>
			<div class="uk-child-width-1-3@m uk-text-center uk-flex uk-flex-center" uk-grid>
				<div>
					<a href="<?php echo get_template_directory_uri(); ?>/images/FingerWorks 6.7 Manual.pdf" target="_BLANK" class="blue-hov">
						<i class="fa-regular fa-file-pdf blue fa-2x"></i>
						<h5 class="uk-text-bold">Finger Works 6.7 Manual</h5>
					</a>
				</div>
			</div>

			</div>
		<div>
			<h2 class="uk-margin-medium-bottom uk-text-center">Contact Support</h2>
			<div class="uk-child-width-1-2@m" uk-grid>
				<div>
					<div class="uk-grid-small" uk-grid>
						<div class="uk-width-auto">
							<i class="fa-regular fa-phone-flip blue fa-2x"></i>
						</div>
						<div class="uk-width-expand">
							<h5 class="uk-text-bold uk-margin-remove-top">North America</h5>
							<P class="uk-margin-remove small">9:00am – 5:00PM Pacific Time</P>
							<h5 class="uk-margin-remove"><a href="tel:1-877-834-1459" class="blue dark-hov">1-877-834-1459</a></h5>
						</div>
					</div>
				</div>
				<div>
					<div class="uk-grid-small" uk-grid>
						<div class="uk-width-auto">
							<i class="fa-regular fa-globe blue fa-2x"></i>
						</div>
						<div class="uk-width-expand">
							<h5 class="uk-text-bold uk-margin-remove-top">Global</h5>
							<P class="uk-margin-remove small">9:00am – 5:00PM Pacific Time</P>
							<h5 class="uk-margin-remove"><a href="tel:+1 (604) 862-4134" class="blue dark-hov">+1 (604) 862-4134</a></h5>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
	<hr>
</div>


<div class="uk-container uk-container-expand">
	<h2  uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-text-center uk-margin-large-top">iPad App Telestrator Tutorial Videos</h2>
	<?php if( have_rows('videos') ) : ?>

			<div class="uk-child-width-1-3@m uk-margin-large-top uk-grid-large" uk-grid  uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">

					<?php while( have_rows('videos') ) : the_row(); ?>

							<?php $video = get_sub_field('video_embed'); ?>

							<?php if( $video ) : ?>
									<div>
											<div class="video-item">

												<iframe uk-responsive width="560" height="315" src="https://www.youtube.com/embed/<?php echo $video; ?>" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>


											</div>
									</div>
							<?php endif; ?>

					<?php endwhile; ?>

			</div>

	<?php endif; ?>



	</div>

	<div class="uk-container ">
	<h6 uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-text-center blue uk-margin-remove-bottom uk-margin-xlarge-top">TELESTRATOR PRODUCTS</h6>
	<h2 uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-text-center uk-margin-remove-top">A Suite of Broadcast Solutions</h2>
	<div uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-width-2-5@m uk-margin-auto uk-text-center">
		<P>Need the full power of FingerWorks for production? Explore our broadcast servers, portable telestrators, and rentals trusted by the world’s biggest networks.</P>
	</div>

	<div class="uk-margin-large-top uk-margin-medium-bottom uk-flex uk-flex-center ">
		<hr class="uk-width-1-1">
		<h6 uk-scrollspy="cls: uk-animation-fade; delay: 300" class="over-hr">EXPLORE</h6>
	</div>
	<div class="uk-child-width-auto@m uk-flex uk-flex-center uk-margin-large-bottom" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
		<div>
			<a class="blue dark-hov" href="<?php echo home_url(); ?>/products/fingerworks-6/">FingerWorks 6 Telestrator <i class="fa-solid fa-caret-right uk-margin-small-left"></i></a>
		</div>
		<div>
			<a class="blue dark-hov" href="<?php echo home_url(); ?>/products/telestrator-server/">Telestrator Server <i class="fa-solid fa-caret-right uk-margin-small-left"></i></a>
		</div>
		<div>
			<a class="blue dark-hov" href="<?php echo home_url(); ?>/portable-telestrator/">Portable Telestrator <i class="fa-solid fa-caret-right uk-margin-small-left"></i></a>
		</div>
		<div>
			<a class="blue dark-hov" href="<?php echo home_url(); ?>/21-5″-thin-client/">21.5” Thin Client <i class="fa-solid fa-caret-right uk-margin-small-left"></i></a>
		</div>
	</div>
	</div>

	<?php get_footer(); ?>
