<!-- User Profile Details -->
<div class="container">
	<div class="row-margin ">
		<div class="box-border">
			<div class="row ">
				<!-- User Profile -->
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
					<div class="user-profile-pic">
						<img src="<?php echo URL_FRONT_IMAGES;?>profile8.png" alt="" class="img-responsive img-circle">
					</div>
					<p class="user-status"><i class="fa fa-clock-o"></i> Online Now</p>
				</div>
				<div class="col-lg-5 col-md-5 col-sm-4 col-xs-12">
					<div class="user-profile-content">
						<ul class="user-badges">
							<li>
								<a href="#" data-content="One of our most popular teachers." data-style="primary" data-toggle="popover" data-placement="top" data-trigger="hover"><i class="fa fa-certificate"></i></a>
							</li>
							<li>
								<a href="#" title="Last Verified:" data-content="23th May, 2016" class="red-popover" data-toggle="popover" data-placement="top" data-trigger="hover"><i class="fa fa-heart"></i></a>
							</li>
						</ul>
						<h4 class="title">Jessica Morrison</h4>
						<p class="sub-title"><u>Cooking Teache</u></p>
						<ul class="user-info">
							<li>
								<div class="startRate"></div>
							</li>
							<li>2452 Ratings</li>
							<li><i class="fa fa-map-marker"></i> Miami, Florida</li>
						</ul>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a dui sit amet massa ultricies commodo eu vitae nisl. Duis viverra malesuada tincidunt. Cras et leo urna. </p>
						<p>Praesent ut ligula condimentum, egestas nisi commodo, gravida odio. Etiam varius lacus sed consequat ultricies. Quisque purus augue, congue vitae ligula sed, egestas faucibus leo. Etiam sit amet est nisi.</p>
						<hr>
						<h4><strong>Levels Taught: </strong> Beginner, Intermediate, Advanced</h4>
						<h4><strong>Ages Between:</strong>  18 and Up</h4>
						<h4><strong>Teaching Since:</strong>  2005</h4>
					</div>
				</div>
				<div class="col-lg-4 col-md-4 col-sm-5 col-xs-12">
					<div class="send-quote-block">
						<h2 class="heading-line">Ask me a question:</h2>
						<form class="form-quote" action="#" method="post">
							<div class="input-group">
								<input type="text" class="form-control" name="Name" placeholder="Name" required="">
							</div>
							<div class="dark-picker">
								<select class="select-picker ">
									<option selected="" disabled="" value="">Mediation</option>
									<option value="AL1">Mediation1</option>
									<option value="AL2">Mediation2</option>
									<option value="AL3">Mediation3</option>
									<option value="AL4">Mediation4</option>
								</select>
							</div>
							<div class="input-group">
								<input type="email" class="form-control" name="Last-name" placeholder="Email" required="">
							</div>
							<div class="input-group">
								<input type="text" class="form-control" name="Address" placeholder="Phone" required="">
							</div>
							<div class="input-group ">
								<textarea rows="3" placeholder="My question is ..."></textarea>
							</div>
							<p>We will never sell or rent your private info.</p>
							<button type="submit" class="btn-link-dark">Send Question</button>
						</form>
					</div>
				</div>
			</div>
		</div>

		<!--  More about Me -->
		<div class="row mtop7">
			<div class="col-sm-12">
				<h2 class="heading-line">More About Me</h2>
				<ul class="user-more-details">

					<li>
						<div class="media-left ">Subjects:</div>
						<div class="media-body">Chemistry, Physics</div>
					</li>
					<li>
						<div class="media-left ">Education:</div>
						<div class="media-body">Bachelors in Engineering, General from United States Naval Academy</div>
					</li>
					<li>
						<div class="media-left ">Career Experience:</div>
						<div class="media-body">Now I am in retirement after decades of teaching orem ipsum dolor sit amet, consectetur adipiscing elit. In a dui sit amet massa ultricies commodo eu vitae nisl. Duis viverra malesuada tincidunt. Cras et leo urna. Praesent ut ligula condimentum, egestas nisi commodo, gravida odio. Etiam varius lacus sed consequat ultricies.</div>
					</li>
					<li>
						<div class="media-left ">I love tutoring because:</div>
						<div class="media-body">I have a read appreciation for the Quisque purus augue, congue vitae ligula sed, egestas faucibus leo. Etiam sit amet est nisi. Curabitur mattis elit non tellus lacinia, sed pharetra purus cursus. Etiam gravida faucibus mi vel vulputate.</div>
					</li>
					<li>
						<div class="media-left ">Other Interests:</div>
						<div class="media-body">Hockey, Gardening, Swimming</div>
					</li>

				</ul>
			</div>
		</div>

		<!-- Phots & Videos -->
		<div class="row mtop7">
			<div class="col-sm-12">
				<h2 class="heading-line">Photos & Videos</h2>
			</div>
			<div class="col-sm-8">
				<div class="tab-content tabpill-content">
					<!-- Video 1 -->
					<div id="vid1" class="tab-pane fade active in ">
						<div class="my-images popup-gallery">
							<a href="<?php echo URL_FRONT_IMAGES;?>img13.png" title="Title of the photo">
								<img src="<?php echo URL_FRONT_IMAGES;?>img13.png" class="img-responsive" alt="">
							</a>
						</div>
					</div>
					<!-- Video 2 -->
					<div id="vid2" class="tab-pane fade">
						<div class="my-images popup-gallery">
							<a href="<?php echo URL_FRONT_IMAGES;?>img2.png" title="Title of the photo">
								<img src="<?php echo URL_FRONT_IMAGES;?>img2.png" class="img-responsive" alt="">
							</a>
						</div>
					</div>
					<!-- Video 3 -->
					<div id="vid3" class="tab-pane fade">
						<div class="my-images popup-gallery">
							<a href="<?php echo URL_FRONT_IMAGES;?>img3.png" title="Title of the photo">
								<img src="<?php echo URL_FRONT_IMAGES;?>img3.png" class="img-responsive" alt="">
							</a>
						</div>
					</div>
					<!-- Video 4 -->
					<div id="vid4" class="tab-pane fade">
						<div class="my-images popup-gallery">
							<a href="<?php echo URL_FRONT_IMAGES;?>img4.png" title="Title of the photo">
								<img src="<?php echo URL_FRONT_IMAGES;?>img4.png" class="img-responsive" alt="">
							</a>
						</div>
					</div>
					<!-- Video 5 -->
					<div id="vid5" class="tab-pane fade">
						<div class="my-images popup-gallery">
							<a href="<?php echo URL_FRONT_IMAGES;?>img5.png" title="Title of the photo">
								<img src="<?php echo URL_FRONT_IMAGES;?>img5.png" class="img-responsive" alt="">
							</a>
						</div>
					</div>
					<!-- Video 6 -->
					<div id="vid6" class="tab-pane fade">
						<div class="my-videos">
							<img src="<?php echo URL_FRONT_IMAGES;?>img6.png" class="img-responsive" alt="">
							<a class="videopopUp" href="https://www.youtube.com/watch?v=8e1lRY1hvi0">
								<img src="<?php echo URL_FRONT_IMAGES;?>play.png" alt="Play" title="Click to Play" class="play-btn">
							</a>
						</div>
					</div>
					<!-- Video 7 -->
					<div id="vid7" class="tab-pane fade">
						<div class="my-videos">
							<img src="<?php echo URL_FRONT_IMAGES;?>img7.png" class="img-responsive" alt="">
							<a class="videopopUp" href="https://www.youtube.com/watch?v=8e1lRY1hvi0">
								<img src="<?php echo URL_FRONT_IMAGES;?>play.png" alt="Play" title="Click to Play" class="play-btn">
							</a>
						</div>
					</div>
					<!-- Video 8 -->
					<div id="vid8" class="tab-pane fade">
						<div class="my-videos">
							<img src="<?php echo URL_FRONT_IMAGES;?>img8.png" class="img-responsive" alt="">
							<a class="videopopUp" href="https://www.youtube.com/watch?v=8e1lRY1hvi0">
								<img src="<?php echo URL_FRONT_IMAGES;?>play.png" alt="Play" title="Click to Play" class="play-btn">
							</a>
						</div>
					</div>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="NavPillTabs">
					<ul class=" video-tabs video-thumbs">
						<li class="active">
							<a data-toggle="pill" href="#vid1">
								<img src="<?php echo URL_FRONT_IMAGES;?>img13.png" alt="" class="img-responsive">
							</a>
						</li>
						<li>
							<a data-toggle="pill" href="#vid2">
								<img src="<?php echo URL_FRONT_IMAGES;?>img2.png" alt="" class="img-responsive">
							</a>
						</li>
						<li>
							<a data-toggle="pill" href="#vid3">
								<img src="<?php echo URL_FRONT_IMAGES;?>img3.png" alt="" class="img-responsive">
							</a>
						</li>
						<li>
							<a data-toggle="pill" href="#vid4">
								<img src="<?php echo URL_FRONT_IMAGES;?>img4.png" alt="" class="img-responsive">
							</a>
						</li>
						<li>
							<a data-toggle="pill" href="#vid5">
								<img src="<?php echo URL_FRONT_IMAGES;?>img5.png" alt="" class="img-responsive">
							</a>
						</li>
						<li>
							<a data-toggle="pill" href="#vid6">
								<img src="<?php echo URL_FRONT_IMAGES;?>img6.png" alt="" class="img-responsive">
								<div class="videopopUp">
									<img src="<?php echo URL_FRONT_IMAGES;?>play-small.png" alt="Play" title="Click to Play" class="play-btn">
								</div>
							</a>
						</li>
						<li>
							<a data-toggle="pill" href="#vid7">
								<div class="videopopUp">
									<img src="<?php echo URL_FRONT_IMAGES;?>play-small.png" alt="Play" title="Click to Play" class="play-btn">
								</div><img src="<?php echo URL_FRONT_IMAGES;?>img7.png" alt="" class="img-responsive">

							</a>
						</li>
						<li>
							<a data-toggle="pill" href="#vid8">
								<img src="<?php echo URL_FRONT_IMAGES;?>img8.png" alt="" class="img-responsive">
								<div class="videopopUp">
									<img src="<?php echo URL_FRONT_IMAGES;?>play-small.png" alt="Play" title="Click to Play" class="play-btn">
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<!--  More about Me -->
		<div class="row mtop7">
			<div class="col-sm-12">
				<h2 class="heading-line">My Experience</h2>
				<ul class="user-more-details">

					<li>
						<div class="media-left">Jan 2015 - Present:</div>
						<div class="media-body">
							<h4><strong>Big Great Corporation</strong> - Manager</h4> Nullam accumsan nulla in ex tincidunt semper. Cras vitae aliquam augue. Vestibulum venenatis lorem ante, non faucibus enim pellentesque pretium. In pulvinar interdum erat, vitae dignissim mauris convallis efficitur. Mauris a sodales arcu. Cras sollicitudin placerat tortor in ultricies. Nulla convallis finibus tortor feugiat luctus.</div>
					</li>
					<li>
						<div class="media-left ">Oct 2013 - Nov 2014:</div>
						<div class="media-body">
							<h4><strong>Denver Cibernetics</strong> - Assistant</h4> Fusce sodales nisl a lectus lobortis, non ornare leo sagittis. Duis eu condimentum sem. Etiam imperdiet tellus non nibh bibendum elementum. Nam hendrerit, est eget commodo ornare, mauris felis faucibus diam, ut dapibus ipsum nisl sed enim. Curabitur ut enim quis lacus ornare sagittis. Curabitur quis molestie libero. Nulla facilisi.</div>
					</li>

				</ul>
			</div>
		</div>


		<!-- Reserve Your Spot -->
		<div class="row mtop7">
			<div class="col-sm-12">
				<h2 class="heading-line">Reserve Your Spot</h2>
			</div>
			<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
				<h2 class="fee">$30.00</h2>
				<div class="feeperhour">/ 1 hour</div>
			</div>
			<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
				<form class="comment-form" action="#" method="post">
					<ul class="reserve-form">
						<li><span class="step-num">1</span> Select a location:
							<ul class="select-location">
								<li>
									<div>
										<input id="radio1" type="radio" name="radio" value="1" checked="checked">
										<label for="radio1"><span><span></span></span>2850 Diane Street, CA 93453</label>
									</div>
								</li>
								<li>
									<div>
										<input id="radio2" type="radio" name="radio" value="2">
										<label for="radio2"><span><span></span></span>Your Home</label>
									</div>
								</li>
								<li>
									<div>
										<input id="radio3" type="radio" name="radio" value="3">
										<label for="radio3"><span><span></span></span>Online</label>
									</div>
								</li>
							</ul>
						</li>
						<li><span class="step-num">2</span> Check Availability:
							<div class="table-responsive appointment-table">
								<table class="table">
									<thead>
										<tr>
											<th class="col">SUN</th>
											<th class="col">MON</th>
											<th class="col">TUE</th>
											<th class="col">WED</th>
											<th class="col">THU</th>
											<th class="col">FRI</th>
											<th class="col">SAT</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>-</td>
											<td>8-9</td>
											<td>9-10</td>
											<td>-</td>
											<td>-</td>
											<td>-</td>
											<td>9-10</td>
										</tr>
										<tr>
											<td>-</td>
											<td>-</td>
											<td>10-11</td>
											<td>-</td>
											<td>10-11</td>
											<td>-</td>
											<td>-</td>
										</tr>
										<tr>
											<td>-</td>
											<td>8-9</td>
											<td>8-9</td>
											<td>-</td>
											<td>-</td>
											<td>8-9</td>
											<td>-</td>
										</tr>
										<tr>
											<td>-</td>
											<td>11-12</td>
											<td>11-12</td>
											<td>-</td>
											<td>-</td>
											<td>11-12</td>
											<td>-</td>
										</tr>
										<tr>
											<td>-</td>
											<td>12-1</td>
											<td>-</td>
											<td>12-1</td>
											<td>-</td>
											<td>-</td>
											<td>12-1</td>
										</tr>
										<tr>
											<td>-</td>
											<td>1-2</td>
											<td>-</td>
											<td>-</td>
											<td>1-2</td>
											<td>-</td>
											<td>1-2</td>
										</tr>
										<tr>
											<td>-</td>
											<td>1-2</td>
											<td>-</td>
											<td>-</td>
											<td>1-2</td>
											<td>-</td>
											<td>1-2</td>
										</tr>
										<tr>
											<td>-</td>
											<td>1-2</td>
											<td>-</td>
											<td>-</td>
											<td>1-2</td>
											<td>-</td>
											<td>1-2</td>
										</tr>
										<tr>
											<td>-</td>
											<td>1-2</td>
											<td>-</td>
											<td>-</td>
											<td>1-2</td>
											<td>-</td>
											<td>1-2</td>
										</tr>
										<tr>
											<td>-</td>
											<td>1-2</td>
											<td>-</td>
											<td>-</td>
											<td>1-2</td>
											<td>-</td>
											<td>1-2</td>
										</tr>
										<tr>
											<td>-</td>
											<td>1-2</td>
											<td>-</td>
											<td>-</td>
											<td>1-2</td>
											<td>-</td>
											<td>1-2</td>
										</tr>
										<tr>
											<td>-</td>
											<td>1-2</td>
											<td>-</td>
											<td>-</td>
											<td>1-2</td>
											<td>-</td>
											<td>1-2</td>
										</tr>
									</tbody>
								</table>
							</div>
						</li>
						<li><span class="step-num">3</span> Write Your Message:
							<div class="appointment-msg">
								<div class="input-group ">
									<textarea rows="8" placeholder="Hello! My name is Diana and ..."></textarea>
								</div>
								<button class="btn btn-link-dark" name="Submit" type="Submit">Send Message</button>
							</div>
						</li>
					</ul>
				</form>
			</div>
		</div>

		<!-- My Reviews -->
		<div class="row mtop7">
			<div class="col-sm-12">
				<h2 class="heading-line">My Reviews (3)</h2>
				<ul class="tree">
					<li>
						<!-- Single comment -->
						<div class="media comments-list">
							<div class="media-left">
								<img src="<?php echo URL_FRONT_IMAGES;?>profile1.png" alt="" class="comment-profile img-circle">
							</div>
							<div class="media-body">
								<h4><strong>James Doe  </strong>on 20 May, 2016 <span class="startRate"></span></h4>
								<p class="time-stamp">Needed 5 hrs from Clark</p>
								<p>Aenean sed leo ullamcorper, suscipit sapien id, facilisis lectus. Donec aliquam auctor ex et fermentum. Maecenas congue lorem ac quam maximus, vel aliquet ligula dictum. Sed tempor augue arcu, vel congue felis aliquet quis. Nam egestas, sem vitae rutrum scelerisque, tellus diam tristique augue, id ullamcorper sem sem eu arcu.</p>
							</div>
						</div>
						<!-- Ends single comment -->

						<!-- Single comment -->
						<div class="media comments-list">
							<div class="media-left">
								<img src="<?php echo URL_FRONT_IMAGES;?>profile4.png" alt="" class="comment-profile img-circle">
							</div>
							<div class="media-body">
								<h4><strong>Dorothy James </strong>on 23 May, 2016 <span class="startRate"></span></h4>
								<p class="time-stamp">Needed 5 hrs from Clark</p>
								<p>Duis a laoreet nisi, eget feugiat ex. Vestibulum ornare pulvinar metus, ac cursus ex facilisis in. Proin faucibus tempor libero, eget imperdiet sem fermentum non. Cras gravida dictum erat quis dictum.</p>

							</div>
						</div>
						<!-- Ends single comment -->
						<!--< Nested comment #enable in css [.tree li]-->
						<ul>
							<li>
								<!-- Single comment -->
								<div class="media comments-list">
									<div class="media-left">
										<img src="<?php echo URL_FRONT_IMAGES;?>profile3.png" alt="" class="comment-profile img-circle">
									</div>
									<div class="media-body">
										<h4><strong>Jenny Hornes </strong><span class="startRate"></span></h4>
										<p class="time-stamp">Needed 15 hrs from Clark</p>
										<p>Ut nec ligula et quam laoreet lobortis. Duis posuere, lacus eu fermentum euismod, velit enim auctor risus, id auctor arcu ex id risus. Fusce rutrum sapien id faucibus faucibus. Curabitur pulvinar justo sed erat pulvinar fringilla. Duis max imus est vel tellus varius eleifend. Quisque scelerisque vitae arcu id scelerisque.</p>
									</div>
								</div>
								<!-- Ends single comment -->
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>

	</div>
</div>
<!-- User Profile Details  -->