@extends('frontend.layouts.app')

@section('title','Aura | Carrer')

@section('content')
	<!-- Page header + Bottom Mask style 3 -->
	<div id="page_header" class="page-subheader site-subheader-cst uh_flat_dark_blue maskcontainer--mask3">
		<div class="bgback"></div>

		<!-- Animated Sparkles -->
		<div class="th-sparkles"></div>
		<!--/ Animated Sparkles -->

		<!-- Background -->
		<div class="kl-bg-source">
			<!-- Gradient overlay -->
			<div class="kl-bg-source__overlay" style="background:rgba(36,36,36,1); background: -moz-linear-gradient(left, rgba(36,36,36,1) 0%, rgba(107,107,107,1) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(36,36,36,1)), color-stop(100%,rgba(107,107,107,1))); background: -webkit-linear-gradient(left, rgba(36,36,36,1) 0%,rgba(107,107,107,1) 100%); background: -o-linear-gradient(left, rgba(36,36,36,1) 0%,rgba(107,107,107,1) 100%); background: -ms-linear-gradient(left, rgba(36,36,36,1) 0%,rgba(107,107,107,1) 100%); background: linear-gradient(to right, rgba(36,36,36,1) 0%,rgba(107,107,107,1) 100%); ">
			</div>
			<!--/ Gradient overlay -->
		</div>
		<!--/ Background -->

		<!-- Sub-Header content wrapper -->
		<div class="ph-content-wrap">
			<div class="ph-content-v-center">
				<div class="container">
					<div class="row">
						<div class="col-sm-6">
							<!-- Breadcrumbs -->
							<ul class="breadcrumbs fixclear">
								<li><a href="index.php">Home</a></li>
								<li>PAGES – CAREERS</li>
							</ul>
							<!--/ Breadcrumbs -->

							<!-- Current date -->
							<span id="current-date" class="subheader-currentdate">August 25, 2016</span>
							<!--/ Current date -->
							<div class="clearfix"></div>
						</div>
						<!--/ col-sm-6 -->
						<div class="col-sm-6">
							<!-- Page sub-header titles -->
							<div class="subheader-titles">
								<h2 class="subheader-maintitle">JOB OFFERINGS</h2>
								<h4 class="subheader-subtitle">JOIN OUR TEAM</h4>
							</div>
							<!--/ Page sub-header titles -->
						</div>
						<!--/ col-sm-6 -->
					</div>
					<!-- end row -->
				</div>
				<!--/ container -->
			</div>
			<!--/ .ph-content-v-center -->
		</div>
		<!-- Sub-Header content wrapper -->

		<!-- Bottom mask style 3 -->
		<div class="kl-bottommask kl-bottommask--mask3">
			<svg width="5000px" height="57px" class="svgmask " viewBox="0 0 5000 57" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
			    <defs>
			        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-mask3">
			            <feOffset dx="0" dy="3" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
			            <feGaussianBlur stdDeviation="2" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur>
			            <feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
			            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.4 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix>
			            <feMerge>
			                <feMergeNode in="SourceGraphic"></feMergeNode>
			                <feMergeNode in="shadowMatrixInner1"></feMergeNode>
			            </feMerge>
			        </filter>
			    </defs>
			    <path d="M9.09383679e-13,57.0005249 L9.09383679e-13,34.0075249 L2418,34.0075249 L2434,34.0075249 C2434,34.0075249 2441.89,33.2585249 2448,31.0245249 C2454.11,28.7905249 2479,11.0005249 2479,11.0005249 L2492,2.00052487 C2492,2.00052487 2495.121,-0.0374751261 2500,0.000524873861 C2505.267,-0.0294751261 2508,2.00052487 2508,2.00052487 L2521,11.0005249 C2521,11.0005249 2545.89,28.7905249 2552,31.0245249 C2558.11,33.2585249 2566,34.0075249 2566,34.0075249 L2582,34.0075249 L5000,34.0075249 L5000,57.0005249 L2500,57.0005249 L1148,57.0005249 L9.09383679e-13,57.0005249 Z" class="bmask-bgfill" filter="url(#filter-mask3)" fill="#f5f5f5"></path>
			</svg>
		    <i class="glyphicon glyphicon-chevron-down"></i>
	    </div>
	    <!--/ Bottom mask style 3 -->
    </div>
	<!--/ Page header + Bottom Mask style 3 -->

	<!-- Content page section -->
    <section class="hg_section">
		<div class="container">
			<div class="row">
				<div class="col-md-12 col-sm-12">
					<!-- Page title & Subtitle-->
					<div class="kl-title-block clearfix tbk--left tbk-symbol--line tbk-icon-pos--after-title ptop-35 pbottom-65">
						<h2 class="tbk__title fs-34 black montserrat"><strong>WE'RE HIRING!</strong></h2>
						<div class="tbk__symbol">
							<span></span>
						</div>
						<h4 class="tbk__subtitle fs-30 fw-thin">This page should serve as a simple and practical way to display your latest job offerings.</h4>
					</div>
					<!--/ Page title & Subtitle-->	
				</div>
				<!--/ col-md-12 col-sm-12 -->

				<div class="col-md-4 col-sm-4">
					<!-- Content title -->
					<div class="kl-title-block clearfix tbk-symbol--line tbk-icon-pos--after-title">
						<h3 class="tbk__title fs-36 fw-extrabold gray">The amazing Kallyas theme.. reloaded!</h3>
						<div class="tbk__symbol"><span></span></div>
					</div>
					<!--/ Content title -->	
				</div>
				<!--/ col-md-4 col-sm-4 -->

				<div class="col-md-4 col-sm-4">
					<!-- Text box -->
					<div class="text_box">
						<p>Enthusiastically orchestrate premier web services whereas turnkey relationships. Competently procrastinate goal-oriented catalysts for change through resource-leveling paradigms.</p>
						<p>Assertively integrate resource sucking sources through resource maximizing channels. Seamlessly deliver virtual paradigms through web-enabled value. Progressively parallel task turnkey materials without effective leadership oriented catalysts for change through.</p>
					</div>
					<!--/ Text box -->	
				</div>	
				<!--/ col-md-4 col-sm-4 -->

				<div class="col-md-4 col-sm-4">
					<!-- Text box -->
					<div class="text_box">
						<p>Assertively integrate resource sucking sources through resource maximizing channels. Seamlessly deliver virtual paradigms through web-enabled value. Progressively parallel task turnkey materials without effective leadership skills.</p>
						<p>Enthusiastically orchestrate premier web services whereas turnkey relationships. Competently procrastinate goal-oriented catalysts for change through resource-leveling.</p>
					</div>
					<!--/ Text box -->	
				</div>
				<!--/ col-md-4 col-sm-4 -->

				<div class="col-md-8 col-sm-8">
					<!-- Accordion element text default style -->
					<div class="hg_accordion_element default-style">
						<div class="th-accordion">
							<div class="acc-group">
								<button data-toggle="collapse" data-target="#acc1" class="" aria-expanded="true">System engineer<span class="acc-icon"></span></button>
								<div id="acc1" class="collapse in" aria-expanded="true">
									<div class="content">
										<div class="row ">
											<div class="col-sm-6">
												<h4>Description</h4>
												<p>
													Mauris laoreet arcu tortor. Fusce neque felis, bibendum vel lacinia et, eleifend ut tortor. Sed imperdiet, purus porttitor vestibulum lobortis, lorem nunc adipiscing ipsum, at ullamcorper sem odio a tellus. Mauris a luctus nunc.<br>
													 Maecenas at nisl leo. Sed sed nisl a ligula eleifend posuere ut nec sapien. Proin tempor neque mi. Duis pretium dignissim elit nec feugiat. Morbi non orci felis. Nam vitae metus a orci iaculis facilisis.
												</p>
											</div>
											<div class="col-sm-6">
												<h4>Technical Skills</h4>
												<ul class="list-style2">
													<li>Aliquam feugiat eleifend metus vehicula;</li>
													<li>Fusce sit amet orci quis arcu;</li>
													<li>Quisque eget arcu ipsum. Nam sapien sem;</li>
													<li>Aliquam ultricies tincidunt augue quis;</li>
													<li>Vivamus id orci nec lacus pharetra fringilla;</li>
													<li>Donec ornare lobortis elit, non viverra diam.</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="acc-group">
								<button data-toggle="collapse" data-target="#acc2" class="collapsed">Ruby Developer<span class="acc-icon"></span></button>
								<div id="acc2" class="collapse ">
									<div class="content">
										<div class="row ">
											<div class="col-sm-6">
												<h4>Description</h4>
												<p>
													Mauris laoreet arcu tortor. Fusce neque felis, bibendum vel lacinia et, eleifend ut tortor. Sed imperdiet, purus porttitor vestibulum lobortis, lorem nunc adipiscing ipsum, at ullamcorper sem odio a tellus. Mauris a luctus nunc.<br>
													 Maecenas at nisl leo. Sed sed nisl a ligula eleifend posuere ut nec sapien. Proin tempor neque mi. Duis pretium dignissim elit nec feugiat. Morbi non orci felis. Nam vitae metus a orci iaculis facilisis.
												</p>
											</div>
											<div class="col-sm-6">
												<h4>Technical Skills</h4>
												<ul class="list-style2">
													<li>Aliquam feugiat eleifend metus vehicula;</li>
													<li>Fusce sit amet orci quis arcu;</li>
													<li>Quisque eget arcu ipsum. Nam sapien sem;</li>
													<li>Aliquam ultricies tincidunt augue quis;</li>
													<li>Vivamus id orci nec lacus pharetra fringilla;</li>
													<li>Donec ornare lobortis elit, non viverra diam.</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="acc-group">
								<button data-toggle="collapse" data-target="#acc3" class="collapsed">Illustrations Artist<span class="acc-icon"></span></button>
								<div id="acc3" class="collapse ">
									<div class="content">
										<div class="row ">
											<div class="col-sm-6">
												<h4>Description</h4>
												<p>
													Mauris laoreet arcu tortor. Fusce neque felis, bibendum vel lacinia et, eleifend ut tortor. Sed imperdiet, purus porttitor vestibulum lobortis, lorem nunc adipiscing ipsum, at ullamcorper sem odio a tellus. Mauris a luctus nunc.<br>
													 Maecenas at nisl leo. Sed sed nisl a ligula eleifend posuere ut nec sapien. Proin tempor neque mi. Duis pretium dignissim elit nec feugiat. Morbi non orci felis. Nam vitae metus a orci iaculis facilisis.
												</p>
											</div>
											<div class="col-sm-6">
												<h4>Technical Skills</h4>
												<ul class="list-style2">
													<li>Aliquam feugiat eleifend metus vehicula;</li>
													<li>Fusce sit amet orci quis arcu;</li>
													<li>Quisque eget arcu ipsum. Nam sapien sem;</li>
													<li>Aliquam ultricies tincidunt augue quis;</li>
													<li>Vivamus id orci nec lacus pharetra fringilla;</li>
													<li>Donec ornare lobortis elit, non viverra diam.</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!--/ Accordion element text -->
				</div>
				<!--/ col-md-8 col-sm-8 -->

				<div class="col-md-4 col-sm-4">
					<!-- Media container - set custom height -->
					<div class="media-container" style="height: 495px;">
						<!-- kl-bg-source -->
						<div class="kl-bg-source">
							<!-- video container -->
							<div class="kl-video-container kl-bg-source__video">
								<!-- video wrapper -->
								<div class="kl-video-wrapper video-grid-overlay">
									<!-- Youtube Source -->
									<div class="kl-video valign halign" style="width: 100%; height: 100%;" data-setup='{ 
										"position": "absolute", 
										"loop": true, 
										"autoplay": true, 
										"muted": true, 
										"youtube":"RAfIDUTPJJM", 
										"poster":"http://kallyas.themeforest.netdna-cdn.com/images/home-office-569359_640.jpg", 
										"video_ratio": "1.7778" }'>
									</div>
								</div>
								<!--/ video-wrapper -->
							</div>
							<!--/ video container -->

							<!-- Video overlay -->
							<div class="kl-bg-source__overlay" style="background-color:rgba(53,53,53,0.8)">
							</div>
							<!--/ Video overlay -->
						</div>
						<!--/ kl-bg-source -->

						<!-- Media container video pop-up -->
						<a class="#" href="#" data-lightbox="iframe">
							<div class="circleanim-svg">
								<svg height="108" width="108" xmlns="http://www.w3.org/2000/svg">
								<circle stroke-opacity="0.1" fill="#FFFFFF" stroke-width="5" cx="54" cy="54" r="48" class="circleanim-svg__circle-back"></circle>
								<circle stroke-width="5" fill="#FFFFFF" cx="54" cy="54" r="48" class="circleanim-svg__circle-front" transform="rotate(50 54 54) "></circle>
								<path d="M62.1556183,56.1947505 L52,62.859375 C50.6192881,63.7654672 49.5,63.1544098 49.5,61.491212 L49.5,46.508788 C49.5,44.8470803 50.6250889,44.2383396 52,45.140625 L62.1556183,51.8052495 C64.0026693,53.0173767 63.9947588,54.9878145 62.1556183,56.1947505 Z" fill="#FFFFFF"></path>
								</svg>
							</div>
						</a>
						<!--/ Media container video pop-up -->
					</div>
					<!--/ Media container -->
				</div>
				<!--/ col-md-4 col-sm-4 -->

				<div class="col-sm-12">
					<div class="hg_separator clearfix m-65"></div>
				</div>
				<!--/ col-sm-12 -->
			</div>
			<!--/ row -->
		</div>
		<!--/ container -->
	</section>
	<!-- Content page section -->
@endsection