<!DOCTYPE html>
<html lang="en">

<head>
	<title>Flat Able - Premium Admin Template by Phoenixcoded</title>
	<!-- HTML5 Shim and Respond.js IE11 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 11]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
	<!-- Meta -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="description" content="" />
	<meta name="keywords" content="">
	<meta name="author" content="Phoenixcoded" />
	<!-- Favicon icon -->
	<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">

	<!-- vendor css -->
	<link rel="stylesheet" href="assets/css/style.css">
	
	

</head>
<body class="">
	<!-- [ Pre-loader ] start -->
	<div class="loader-bg">
		<div class="loader-track">
			<div class="loader-fill"></div>
		</div>
	</div>
	<!-- [ Pre-loader ] End -->
	<!-- [ navigation menu ] start -->
	<nav class="pcoded-navbar  ">
		<div class="navbar-wrapper  ">
			<div class="navbar-content scroll-div " >
				
				<div class="">
					<div class="main-menu-header">
						<img class="img-radius" src="assets/images/user/avatar-2.jpg" alt="User-Profile-Image">
						<div class="user-details">
							<span>John Doe</span>
							<div id="more-details">UX Designer<i class="fa fa-chevron-down m-l-5"></i></div>
						</div>
					</div>
					<div class="collapse" id="nav-user-link">
						<ul class="list-unstyled">
							<li class="list-group-item"><a href="user-profile.html"><i class="feather icon-user m-r-5"></i>View Profile</a></li>
							<li class="list-group-item"><a href="#!"><i class="feather icon-settings m-r-5"></i>Settings</a></li>
							<li class="list-group-item"><a href="auth-normal-sign-in.html"><i class="feather icon-log-out m-r-5"></i>Logout</a></li>
						</ul>
					</div>
				</div>
				
				<ul class="nav pcoded-inner-navbar ">
					<li class="nav-item pcoded-menu-caption">
						<label>Navigation</label>
					</li>
					<li class="nav-item">
					    <a href="index.html" class="nav-link "><span class="pcoded-micon"><i class="feather icon-home"></i></span><span class="pcoded-mtext">Dashboard</span></a>
					</li>
					<li class="nav-item pcoded-hasmenu">
					    <a href="#!" class="nav-link "><span class="pcoded-micon"><i class="feather icon-layout"></i></span><span class="pcoded-mtext">Page layouts</span></a>
					    <ul class="pcoded-submenu">
					        <li><a href="layout-vertical.html" target="_blank">Vertical</a></li>
					        <li><a href="layout-horizontal.html" target="_blank">Horizontal</a></li>
					    </ul>
					</li>
					<li class="nav-item pcoded-menu-caption">
						<label>UI Element</label>
					</li>
					<li class="nav-item pcoded-hasmenu">
						<a href="#!" class="nav-link "><span class="pcoded-micon"><i class="feather icon-box"></i></span><span class="pcoded-mtext">Basic</span></a>
						<ul class="pcoded-submenu">
							<li><a href="bc_alert.html">Alert</a></li>
							<li><a href="bc_button.html">Button</a></li>
							<li><a href="bc_badges.html">Badges</a></li>
							<li><a href="bc_breadcrumb-pagination.html">Breadcrumb & paggination</a></li>
							<li><a href="bc_card.html">Cards</a></li>
							<li><a href="bc_collapse.html">Collapse</a></li>
							<li><a href="bc_carousel.html">Carousel</a></li>
							<li><a href="bc_grid.html">Grid system</a></li>
							<li><a href="bc_progress.html">Progress</a></li>
							<li><a href="bc_modal.html">Modal</a></li>
							<li><a href="bc_spinner.html">Spinner</a></li>
							<li><a href="bc_tabs.html">Tabs & pills</a></li>
							<li><a href="bc_typography.html">Typography</a></li>
							<li><a href="bc_tooltip-popover.html">Tooltip & popovers</a></li>
							<li><a href="bc_toasts.html">Toasts</a></li>
							<li><a href="bc_extra.html">Other</a></li>
						</ul>
					</li>
					<li class="nav-item pcoded-menu-caption">
					    <label>Forms &amp; table</label>
					</li>
					<li class="nav-item">
					    <a href="form_elements.html" class="nav-link "><span class="pcoded-micon"><i class="feather icon-file-text"></i></span><span class="pcoded-mtext">Forms</span></a>
					</li>
					<li class="nav-item">
					    <a href="tbl_bootstrap.html" class="nav-link "><span class="pcoded-micon"><i class="feather icon-align-justify"></i></span><span class="pcoded-mtext">Bootstrap table</span></a>
					</li>
					<li class="nav-item pcoded-menu-caption">
						<label>Chart & Maps</label>
					</li>
					<li class="nav-item">
					    <a href="chart-apex.html" class="nav-link "><span class="pcoded-micon"><i class="feather icon-pie-chart"></i></span><span class="pcoded-mtext">Chart</span></a>
					</li>
					<li class="nav-item">
					    <a href="map-google.html" class="nav-link "><span class="pcoded-micon"><i class="feather icon-map"></i></span><span class="pcoded-mtext">Maps</span></a>
					</li>
					<li class="nav-item pcoded-menu-caption">
						<label>Pages</label>
					</li>
					<li class="nav-item pcoded-hasmenu">
					    <a href="#!" class="nav-link "><span class="pcoded-micon"><i class="feather icon-lock"></i></span><span class="pcoded-mtext">Authentication</span></a>
					    <ul class="pcoded-submenu">
					        <li><a href="auth-signup.html" target="_blank">Sign up</a></li>
					        <li><a href="auth-signin.html" target="_blank">Sign in</a></li>
					    </ul>
					</li>
					<li class="nav-item"><a href="sample-page.html" class="nav-link "><span class="pcoded-micon"><i class="feather icon-sidebar"></i></span><span class="pcoded-mtext">Sample page</span></a></li>

				</ul>
				
				<div class="card text-center">
					<div class="card-block">
						<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
						<i class="feather icon-sunset f-40"></i>
						<h6 class="mt-3">Upgrade To Pro</h6>
						<p>Please contact us on our email for need any support</p>
						<a href="https://1.envato.market/PgJNQ" target="_blank" class="btn btn-primary btn-sm text-white m-0">Upgrade</a>
					</div>
				</div>
				
			</div>
		</div>
	</nav>
	<!-- [ navigation menu ] end -->
	<!-- [ Header ] start -->
	<header class="navbar pcoded-header navbar-expand-lg navbar-light header-dark">
		
			
				<div class="m-header">
					<a class="mobile-menu" id="mobile-collapse" href="#!"><span></span></a>
					<a href="#!" class="b-brand">
						<!-- ========   change your logo hear   ============ -->
						<img src="assets/images/logo.png" alt="" class="logo">
						<img src="assets/images/logo-icon.png" alt="" class="logo-thumb">
					</a>
					<a href="#!" class="mob-toggler">
						<i class="feather icon-more-vertical"></i>
					</a>
				</div>
				<div class="collapse navbar-collapse">
					<ul class="navbar-nav mr-auto">
						<li class="nav-item">
							<a href="#!" class="pop-search"><i class="feather icon-search"></i></a>
							<div class="search-bar">
								<input type="text" class="form-control border-0 shadow-none" placeholder="Search hear">
								<button type="button" class="close" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
						</li>
						<li class="nav-item">
							<div class="dropdown">
								<a class="dropdown-toggle h-drop" href="#" data-toggle="dropdown">
									Dropdown
								</a>
								<div class="dropdown-menu profile-notification ">
									<ul class="pro-body">
										<li><a href="user-profile.html" class="dropdown-item"><i class="fas fa-circle"></i> Profile</a></li>
										<li><a href="email_inbox.html" class="dropdown-item"><i class="fas fa-circle"></i> My Messages</a></li>
										<li><a href="auth-signin.html" class="dropdown-item"><i class="fas fa-circle"></i> Lock Screen</a></li>
									</ul>
								</div>
							</div>
						</li>
						<li class="nav-item">
							<div class="dropdown mega-menu">
								<a class="dropdown-toggle h-drop" href="#" data-toggle="dropdown">
									Mega
								</a>
								<div class="dropdown-menu profile-notification ">
									<div class="row no-gutters">
										<div class="col">
											<h6 class="mega-title">UI Element</h6>
											<ul class="pro-body">
												<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Alert</a></li>
												<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Button</a></li>
												<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Badges</a></li>
												<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Cards</a></li>
												<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Modal</a></li>
												<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Tabs & pills</a></li>
											</ul>
										</div>
										<div class="col">
											<h6 class="mega-title">Forms</h6>
											<ul class="pro-body">
												<li><a href="#!" class="dropdown-item"><i class="feather icon-minus"></i> Elements</a></li>
												<li><a href="#!" class="dropdown-item"><i class="feather icon-minus"></i> Validation</a></li>
												<li><a href="#!" class="dropdown-item"><i class="feather icon-minus"></i> Masking</a></li>
												<li><a href="#!" class="dropdown-item"><i class="feather icon-minus"></i> Wizard</a></li>
												<li><a href="#!" class="dropdown-item"><i class="feather icon-minus"></i> Picker</a></li>
												<li><a href="#!" class="dropdown-item"><i class="feather icon-minus"></i> Select</a></li>
											</ul>
										</div>
										<div class="col">
											<h6 class="mega-title">Application</h6>
											<ul class="pro-body">
												<li><a href="#!" class="dropdown-item"><i class="feather icon-mail"></i> Email</a></li>
												<li><a href="#!" class="dropdown-item"><i class="feather icon-clipboard"></i> Task</a></li>
												<li><a href="#!" class="dropdown-item"><i class="feather icon-check-square"></i> To-Do</a></li>
												<li><a href="#!" class="dropdown-item"><i class="feather icon-image"></i> Gallery</a></li>
												<li><a href="#!" class="dropdown-item"><i class="feather icon-help-circle"></i> Helpdesk</a></li>
											</ul>
										</div>
										<div class="col">
											<h6 class="mega-title">Extension</h6>
											<ul class="pro-body">
												<li><a href="#!" class="dropdown-item"><i class="feather icon-file-plus"></i> Editor</a></li>
												<li><a href="#!" class="dropdown-item"><i class="feather icon-file-minus"></i> Invoice</a></li>
												<li><a href="#!" class="dropdown-item"><i class="feather icon-calendar"></i> Full calendar</a></li>
												<li><a href="#!" class="dropdown-item"><i class="feather icon-upload-cloud"></i> File upload</a></li>
												<li><a href="#!" class="dropdown-item"><i class="feather icon-scissors"></i> Image cropper</a></li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</li>
					</ul>
					<ul class="navbar-nav ml-auto">
						<li>
							<div class="dropdown">
								<a class="dropdown-toggle" href="#" data-toggle="dropdown">
									<i class="icon feather icon-bell"></i>
									<span class="badge badge-pill badge-danger">5</span>
								</a>
								<div class="dropdown-menu dropdown-menu-right notification">
									<div class="noti-head">
										<h6 class="d-inline-block m-b-0">Notifications</h6>
										<div class="float-right">
											<a href="#!" class="m-r-10">mark as read</a>
											<a href="#!">clear all</a>
										</div>
									</div>
									<ul class="noti-body">
										<li class="n-title">
											<p class="m-b-0">NEW</p>
										</li>
										<li class="notification">
											<div class="media">
												<img class="img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
												<div class="media-body">
													<p><strong>John Doe</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>5 min</span></p>
													<p>New ticket Added</p>
												</div>
											</div>
										</li>
										<li class="n-title">
											<p class="m-b-0">EARLIER</p>
										</li>
										<li class="notification">
											<div class="media">
												<img class="img-radius" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
												<div class="media-body">
													<p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>10 min</span></p>
													<p>Prchace New Theme and make payment</p>
												</div>
											</div>
										</li>
										<li class="notification">
											<div class="media">
												<img class="img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
												<div class="media-body">
													<p><strong>Sara Soudein</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>12 min</span></p>
													<p>currently login</p>
												</div>
											</div>
										</li>
										<li class="notification">
											<div class="media">
												<img class="img-radius" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
												<div class="media-body">
													<p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>30 min</span></p>
													<p>Prchace New Theme and make payment</p>
												</div>
											</div>
										</li>
									</ul>
									<div class="noti-footer">
										<a href="#!">show all</a>
									</div>
								</div>
							</div>
						</li>
						<li>
							<div class="dropdown drp-user">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">
									<i class="feather icon-user"></i>
								</a>
								<div class="dropdown-menu dropdown-menu-right profile-notification">
									<div class="pro-head">
										<img src="assets/images/user/avatar-1.jpg" class="img-radius" alt="User-Profile-Image">
										<span>John Doe</span>
										<a href="auth-signin.html" class="dud-logout" title="Logout">
											<i class="feather icon-log-out"></i>
										</a>
									</div>
									<ul class="pro-body">
										<li><a href="user-profile.html" class="dropdown-item"><i class="feather icon-user"></i> Profile</a></li>
										<li><a href="email_inbox.html" class="dropdown-item"><i class="feather icon-mail"></i> My Messages</a></li>
										<li><a href="auth-signin.html" class="dropdown-item"><i class="feather icon-lock"></i> Lock Screen</a></li>
									</ul>
								</div>
							</div>
						</li>
					</ul>
				</div>
				
			
	</header>
	<!-- [ Header ] end -->
	
	

<!-- [ Main Content ] start -->
<div class="pcoded-main-container">
	<div class="pcoded-content">
		<!-- [ breadcrumb ] start -->
		<div class="page-header">
			<div class="page-block">
				<div class="row align-items-center">
					<div class="col-md-12">
						<div class="page-header-title">
							<h5 class="m-b-10">Extra</h5>
						</div>
						<ul class="breadcrumb">
							<li class="breadcrumb-item"><a href="index.html"><i class="feather icon-home"></i></a></li>
							<li class="breadcrumb-item"><a href="#!">Basic Components</a></li>
							<li class="breadcrumb-item"><a href="#!">Extra</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- [ breadcrumb ] end -->
		<!-- [ Main Content ] start -->
		<div class="row">
			<!-- [ border ] start -->
			<div class="col-sm-12">
				<div class="card">
					<div class="card-header">
						<h5>Border <span class="badge badge-danger">NEW</span></h5>
					</div>
					<div class="card-body">
						<div class="row">
							<div class="col-sm-12">
								<h5>Border color</h5>
								<hr>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-primary" data-toggle="tooltip" title="border-primary"></span>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-secondary" data-toggle="tooltip" title="border-secondary"></span>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-success" data-toggle="tooltip" title="border-success"></span>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-danger" data-toggle="tooltip" title="border-danger"></span>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-warning" data-toggle="tooltip" title="border-warning"></span>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-info" data-toggle="tooltip" title="border-info"></span>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-light" data-toggle="tooltip" title="border-light"></span>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-dark" data-toggle="tooltip" title="border-dark"></span>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-white" data-toggle="tooltip" title="border-white"></span>
							</div>
							<div class="col-md-6 additive">
								<h5 class="mt-5">Additive</h5>
								<hr>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border" data-toggle="tooltip" title="border"></span>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border-top" data-toggle="tooltip" title="border-top"></span>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border-right" data-toggle="tooltip" title="border-right"></span>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border-bottom" data-toggle="tooltip" title="border-bottom"></span>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border-left" data-toggle="tooltip" title="border-left"></span>
							</div>
							<div class="col-sm-6">
								<h5 class="mt-5">Subtractive</h5>
								<hr>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-0" data-toggle="tooltip" title="border border-0"></span>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-top-0" data-toggle="tooltip" title="border border-top-0"></span>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-right-0" data-toggle="tooltip" title="border border-right-0"></span>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-bottom-0" data-toggle="tooltip" title="border border-bottom-0"></span>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-left-0" data-toggle="tooltip" title="border border-left-0"></span>
							</div>
							<div class="col-sm-12">
								<h5 class="mt-5">Border-radius</h5>
								<hr>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-secondary rounded" data-toggle="tooltip" title="rounded"></span>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-secondary rounded-top" data-toggle="tooltip" title="rounded-top"></span>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-secondary rounded-right" data-toggle="tooltip" title="rounded-right"></span>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-secondary rounded-bottom" data-toggle="tooltip" title="rounded-bottom"></span>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-secondary rounded-left" data-toggle="tooltip" title="rounded-left"></span>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-secondary rounded-circle" data-toggle="tooltip" title="rounded-circle"></span>
								<span class="hei-75 wid-120 bg-light d-inline-block mr-2 border border-secondary rounded-pill" data-toggle="tooltip" title="rounded-pill"></span>
								<span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-secondary rounded-0" data-toggle="tooltip" title="rounded-0"></span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- [ border ] end -->
			<!-- [ border ] start -->
			<div class="col-sm-12">
				<div class="card">
					<div class="card-header">
						<h5>Utility class</h5>
					</div>
					<div class="card-body">
						<div class="row">
							<div class="col-md-6">
								<h6 class="mb-0">Margin </h6>
								<hr class="my-2">
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-0">.m-0</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-5">.m-5</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-10">.m-10</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-15">.m-15</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-20">.m-20</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-25">.m-25</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-30">.m-30</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-35">.m-35</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-40">.m-40</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-45">.m-45</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-50">.m-50</label>
								<h6 class="mb-0 mt-3">Margin top</h6>
								<hr class="my-2">
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-top-0">.m-t-0</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-top-5">.m-t-5</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-top-10">.m-t-10</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-top-15">.m-t-15</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-top-20">.m-t-20</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-top-25">.m-t-25</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-top-30">.m-t-30</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-top-35">.m-t-35</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-top-40">.m-t-40</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-top-45">.m-t-45</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-top-50">.m-t-50</label>
								<h6 class="mb-0 mt-3">Margin bottom</h6>
								<hr class="my-2">
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-bottom-0">.m-b-0</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-bottom-5">.m-b-5</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-bottom-10">.m-b-10</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-bottom-15">.m-b-15</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-bottom-20">.m-b-20</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-bottom-25">.m-b-25</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-bottom-30">.m-b-30</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-bottom-35">.m-b-35</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-bottom-40">.m-b-40</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-bottom-45">.m-b-45</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-bottom-50">.m-b-50</label>
								<h6 class="mb-0 mt-3">Margin left</h6>
								<hr class="my-2">
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-left-0">.m-l-0</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-left-5">.m-l-5</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-left-10">.m-l-10</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-left-15">.m-l-15</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-left-20">.m-l-20</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-left-25">.m-l-25</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-left-30">.m-l-30</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-left-35">.m-l-35</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-left-40">.m-l-40</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-left-45">.m-l-45</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-left-50">.m-l-50</label>
								<h6 class="mb-0 mt-3">Margin right</h6>
								<hr class="my-2">
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-right-0">.m-r-0</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-right-5">.m-r-5</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-right-10">.m-r-10</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-right-15">.m-r-15</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-right-20">.m-r-20</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-right-25">.m-r-25</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-right-30">.m-r-30</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-right-35">.m-r-35</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-right-40">.m-r-40</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-right-45">.m-r-45</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="margin-right-50">.m-r-50</label>
							</div>
							<div class="col-md-6">
								<h6 class="mb-0">Padding</h6>
								<hr class="my-2">
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-0">.p-0</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-5">.p-5</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-10">.p-10</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-15">.p-15</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-20">.p-20</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-25">.p-25</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-30">.p-30</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-35">.p-35</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-40">.p-40</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-45">.p-45</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-50">.p-50</label>
								<h6 class="mb-0 mt-3">Padding top</h6>
								<hr class="my-2">
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-top-0">.p-t-0</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-top-5">.p-t-5</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-top-10">.p-t-10</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-top-15">.p-t-15</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-top-20">.p-t-20</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-top-25">.p-t-25</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-top-30">.p-t-30</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-top-35">.p-t-35</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-top-40">.p-t-40</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-top-45">.p-t-45</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-top-50">.p-t-50</label>
								<h6 class="mb-0 mt-3">Padding bottom</h6>
								<hr class="my-2">
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-bottom-0">.p-b-0</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-bottom-5">.p-b-5</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-bottom-10">.p-b-10</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-bottom-15">.p-b-15</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-bottom-20">.p-b-20</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-bottom-25">.p-b-25</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-bottom-30">.p-b-30</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-bottom-35">.p-b-35</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-bottom-40">.p-b-40</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-bottom-45">.p-b-45</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-bottom-50">.p-b-50</label>
								<h6 class="mb-0 mt-3">Padding left</h6>
								<hr class="my-2">
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-left-0">.p-l-0</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-left-5">.p-l-5</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-left-10">.p-l-10</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-left-15">.p-l-15</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-left-20">.p-l-20</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-left-25">.p-l-25</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-left-30">.p-l-30</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-left-35">.p-l-35</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-left-40">.p-l-40</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-left-45">.p-l-45</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-left-50">.p-l-50</label>
								<h6 class="mb-0 mt-3">Padding right</h6>
								<hr class="my-2">
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-right-0">.p-r-0</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-right-5">.p-r-5</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-right-10">.p-r-10</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-right-15">.p-r-15</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-right-20">.p-r-20</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-right-25">.p-r-25</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-right-30">.p-r-30</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-right-35">.p-r-35</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-right-40">.p-r-40</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-right-45">.p-r-45</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="padding-right-50">.p-r-50</label>
							</div>
							<div class="col-md-6">
								<h6 class="mb-0 mt-3">Width </h6>
								<hr class="my-2">
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-20">.wid-20</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-25">.wid-25</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-30">.wid-30</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-35">.wid-35</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-40">.wid-40</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-45">.wid-45</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-50">.wid-50</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-55">.wid-55</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-60">.wid-60</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-65">.wid-65</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-70">.wid-70</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-75">.wid-75</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-80">.wid-80</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-85">.wid-85</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-90">.wid-90</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-95">.wid-95</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-100">.wid-100</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-105">.wid-105</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-110">.wid-110</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-115">.wid-115</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-120">.wid-120</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-125">.wid-125</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-130">.wid-130</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-135">.wid-135</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-140">.wid-140</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-145">.wid-145</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="width-150">.wid-150</label>
							</div>
							<div class="col-md-6">
								<h6 class="mb-0 mt-3">Height </h6>
								<hr class="my-2">
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-20">.hei-20</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-25">.hei-25</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-30">.hei-30</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-35">.hei-35</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-40">.hei-40</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-45">.hei-45</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-50">.hei-50</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-55">.hei-55</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-60">.hei-60</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-65">.hei-65</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-70">.hei-70</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-75">.hei-75</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-80">.hei-80</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-85">.hei-85</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-90">.hei-90</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-95">.hei-95</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-100">.hei-100</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-105">.hei-105</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-110">.hei-110</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-115">.hei-115</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-120">.hei-120</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-125">.hei-125</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-130">.hei-130</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-135">.hei-135</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-140">.hei-140</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-145">.hei-145</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="height-150">.hei-150</label>
							</div>
							<div class="col-md-12">
								<h6 class="mb-0 mt-3">Font-size </h6>
								<hr class="my-2">
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-10">.f-10</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-12">.f-12</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-14">.f-14</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-16">.f-16</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-18">.f-18</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-20">.f-20</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-22">.f-22</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-24">.f-24</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-26">.f-26</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-28">.f-28</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-30">.f-30</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-32">.f-32</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-34">.f-34</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-36">.f-36</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-38">.f-38</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-40">.f-40</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-42">.f-42</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-44">.f-44</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-46">.f-46</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-48">.f-48</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-50">.f-50</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-52">.f-52</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-54">.f-54</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-56">.f-56</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-58">.f-58</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-60">.f-60</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-62">.f-62</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-64">.f-64</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-66">.f-66</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-68">.f-68</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-70">.f-70</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-72">.f-72</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-74">.f-74</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-76">.f-76</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-78">.f-78</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-size-80">.f-80</label>
							</div>
							<div class="col-md-6">
								<h6 class="mb-0 mt-3">Font weight </h6>
								<hr class="my-2">
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-weight-100">.f-w-100</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-weight-200">.f-w-200</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-weight-300">.f-w-300</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-weight-400">.f-w-400</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-weight-500">.f-w-500</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-weight-600">.f-w-600</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-weight-700">.f-w-700</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-weight-800">.f-w-800</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="font-weight-900">.f-w-900</label>
							</div>
							<div class="col-md-6">
								<h6 class="mb-0 mt-3">Border width </h6>
								<hr class="my-2">
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="border-width-1">.b-wid-1</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="border-width-2">.b-wid-2</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="border-width-3">.b-wid-3</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="border-width-4">.b-wid-4</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="border-width-5">.b-wid-5</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="border-width-6">.b-wid-6</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="border-width-7">.b-wid-7</label>
								<label data-toggle="tooltip" class="badge badge-light-danger p-1" title="border-width-8">.b-wid-8</label>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- [ border ] end -->
			<!-- [ shadows ] start -->
			<div class="col-sm-12">
				<div class="card">
					<div class="card-header">
						<h5>Shadows</h5>
					</div>
					<div class="card-body">
						<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
						<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
						<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
						<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>
					</div>
				</div>
			</div>
			<!-- [ shadows ] end -->
			<!-- [ embeds ] start -->
			<div class="col-sm-12">
				<div class="card">
					<div class="card-header">
						<h5>Embeds</h5>
					</div>
					<div class="card-body">
						<div class="row justify-content-center">
							<div class="col-md-8">
								<div class="embed-responsive embed-responsive-16by9">
									<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/IkyZHPnfFnE?rel=0" allowfullscreen></iframe>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- [ embeds ] end -->
			<!-- [ aspect-ratios ] start -->
			<div class="col-sm-12">
				<div class="card">
					<div class="card-header">
						<h5>Aspect Ratios</h5>
					</div>
					<div class="card-body">
						<div class="row">
							<div class="col-md-6">
								<h5 class="mt-5">Aspect Ratios 21 by 9</h5>
								<hr>
								<div class="embed-responsive embed-responsive-21by9">
									<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/IkyZHPnfFnE?rel=0" allowfullscreen></iframe>
								</div>
							</div>
							<div class="col-md-6">
								<h5 class="mt-5">Aspect Ratios 16 by 9</h5>
								<hr>
								<div class="embed-responsive embed-responsive-16by9">
									<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/IkyZHPnfFnE?rel=0" allowfullscreen></iframe>
								</div>
							</div>
							<div class="col-md-6">
								<h5 class="mt-5">Aspect Ratios 4 by 3</h5>
								<hr>
								<div class="embed-responsive embed-responsive-4by3">
									<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/IkyZHPnfFnE?rel=0" allowfullscreen></iframe>
								</div>
							</div>
							<div class="col-md-6">
								<h5 class="mt-5">Aspect Ratios 1 by 1</h5>
								<hr>
								<div class="embed-responsive embed-responsive-1by1">
									<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/IkyZHPnfFnE?rel=0" allowfullscreen></iframe>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- [ aspect-ratios ] end -->
		</div>
		<!-- [ Main Content ] end -->
	</div>
</div>
<!-- [ Main Content ] end -->
    <!-- Warning Section start -->
    <!-- Older IE warning message -->
    <!--[if lt IE 11]>
        <div class="ie-warning">
            <h1>Warning!!</h1>
            <p>You are using an outdated version of Internet Explorer, please upgrade
               <br/>to any of the following web browsers to access this website.
            </p>
            <div class="iew-container">
                <ul class="iew-download">
                    <li>
                        <a href="http://www.google.com/chrome/">
                            <img src="assets/images/browser/chrome.png" alt="Chrome">
                            <div>Chrome</div>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.mozilla.org/en-US/firefox/new/">
                            <img src="assets/images/browser/firefox.png" alt="Firefox">
                            <div>Firefox</div>
                        </a>
                    </li>
                    <li>
                        <a href="http://www.opera.com">
                            <img src="assets/images/browser/opera.png" alt="Opera">
                            <div>Opera</div>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.apple.com/safari/">
                            <img src="assets/images/browser/safari.png" alt="Safari">
                            <div>Safari</div>
                        </a>
                    </li>
                    <li>
                        <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">
                            <img src="assets/images/browser/ie.png" alt="">
                            <div>IE (11 & above)</div>
                        </a>
                    </li>
                </ul>
            </div>
            <p>Sorry for the inconvenience!</p>
        </div>
    <![endif]-->
    <!-- Warning Section Ends -->

    <!-- Required Js -->
    <script src="assets/js/vendor-all.min.js"></script>
    <script src="assets/js/plugins/bootstrap.min.js"></script>
    <script src="assets/js/pcoded.min.js"></script>



</body>

</html>
