

/******************************************************************
Theme Name: PONIGYM
Description: 
Author: 
Author URI: 
Version: 1.0
Created: 
******************************************************************/

/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Service Section
6.  Class Section
7.  Trainer Table Section
8.  Team Section
9.  Contact
10.  Footer Style

-------------------------------------------------------------------*/

$primary-color: #f34e3a;
$white-color: #ffffff;
$heading-color: #191919;
$para-color: #6e6e6e;

/*----------------------------------------*/
/* Template default CSS
/*----------------------------------------*/

html,
body {
	height: 100%;
	font-family: "Roboto", sans-serif;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: #111111;
	font-weight: 400;
	font-family: 'Oswald', sans-serif;
}

h1 {
	font-size: 70px;
}

h2 {
	font-size: 36px;
}

h3 {
	font-size: 30px;
}

h4 {
	font-size: 24px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

p {
	font-size: 16px;
	font-family: "Roboto", sans-serif;
	color: #8f8fa8;
	font-weight: 400;
	line-height: 26px;
	margin: 0 0 15px 0;
}

img {
	max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
	outline: none;
}

a:hover,
a:focus {
	text-decoration: none;
	outline: none;
	color: $white-color;
}

ul,
ol {
	padding: 0;
	margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/

.section-title {
	margin-bottom: 45px;
}

.section-title h2 {
	color: #191919;
	font-size: 36px;
	font-weight: 500;
	padding-left: 12px;
	margin-bottom: 20px;
	line-height: 26px;
	position: relative;
	&:before {
		position: absolute;
		left: 0;
		top: 0;
		width: 3px;
		height: 29px;
		background: $primary-color;
		content: "";
	}
}

.section-title p {
	color: #6e6e6e;
	line-height: 24px;
}

.set-bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}

.spad {
	padding-top: 100px;
	padding-bottom: 100px;
}

.spad-2 {
	padding-top: 50px;
	padding-bottom: 70px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
	color: $white-color;
}

/* buttons */

.primary-btn {
	display: inline-block;
	font-size: 14px;
	font-family: 'Oswald', sans-serif;
	padding: 12px 39px;
	color: $white-color;
	background: $primary-color;
	line-height: normal;
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* Preloder */

#preloder {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999999;
	background: #000;
}

.loader {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -13px;
	margin-left: -13px;
	border-radius: 60px;
	animation: loader 0.8s linear infinite;
	-webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

@-webkit-keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

.spacial-controls {
	position: fixed;
	width: 111px;
	height: 91px;
	top: 0;
	right: 0;
	z-index: 999;
}

.spacial-controls .search-switch {
	display: block;
	height: 100%;
	padding-top: 30px;
	background: #323232;
	text-align: center;
	cursor: pointer;
}

.search-model {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: #000;
	z-index: 99999;
}

.search-model-form {
	padding: 0 15px;
}

.search-model-form input {
	width: 500px;
	font-size: 40px;
	border: none;
	border-bottom: 2px solid #333;
	background: none;
	color: #999;
}

.search-close-switch {
	position: absolute;
	width: 50px;
	height: 50px;
	background: #333;
	color: #fff;
	text-align: center;
	border-radius: 50%;
	font-size: 28px;
	line-height: 28px;
	top: 30px;
	cursor: pointer;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

/*---------------------
  Header
-----------------------*/

.header-section {
	padding-top: 35px;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 99;
	&.header-normal {
		position: relative;
		padding-top: 0;
		.logo {
			padding: 35px 0;
		}
		.nav-menu {
			.mainmenu {
				ul {
					li {
						margin-right: 45px;
						&.active {
							a {
								color: $primary-color;
							}
						}
						a {
							color: $heading-color;
							padding: 33px 5px;
							-webkit-transition: .2s;
							-o-transition: .2s;
							transition: .2s;
						}
						&:hover {
							.dropdown {
								top: 94px;
							}
							&>a {
								color: $primary-color;
							}
						}
						.dropdown {
							top: 124px;
							li {
								a {
									padding: 10px 20px;
									color: $white-color;
									&:hover {
										color: #252525;
									}
								}
							}
						}
					}
				}
			}
			.nav-right {
				padding: 39px 0;
				i {
					color: $heading-color;
				}
			}
		}
	}
}

.logo {
	float: left;
	a {
		display: inline-block;
	}
}

.nav-menu {
	text-align: right;
	.mainmenu {
		display: inline-block;
		ul {
			li {
				display: inline-block;
				list-style: none;
				margin-right: 55px;
				position: relative;
				&.active {
					a {
						color: $primary-color;
					}
				}
				a {
					color: $white-color;
					font-size: 16px;
					text-transform: uppercase;
					font-weight: 500;
					line-height: 28px;
					-webkit-transition: .2s;
					-o-transition: .2s;
					transition: .2s;
					display: block;
					font-family: 'Oswald', sans-serif;
				}
				&:hover {
					.dropdown {
						opacity: 1;
						visibility: visible;
						top: 40px;
					}
					&>a {
						color: $primary-color;
					}
				}
				.dropdown {
					position: absolute;
					left: 0;
					top: 70px;
					width: 180px;
					background: $primary-color;
					opacity: 0;
					visibility: hidden;
					-webkit-transition: all .3s;
					-o-transition: all .3s;
					transition: all .3s;
					z-index: 99;
					li {
						display: block;
						margin-right: 0;
						a {
							text-align: left;
							text-transform: capitalize;
							padding: 10px 20px;
							color: $white-color;
							&:hover {
								color: #252525;
							}
						}
					}
				}
				&:last-child {
					.dropdown {
						left: auto;
						right: 0;
					}
				}
			}
		}
	}
	.nav-right {
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		margin-left: 20px;
		i {
			color: $white-color;
			cursor: pointer;
		}
	}
}

.slicknav_menu {
	display: none;
}

/*---------------------
  Hero Section
-----------------------*/

.hero-items {
	.owl-item {
		&.active {
			.single-hero-item {
				.hero-text {
					h4,
					h1,
					.primary-btn {
						top: 0;
						opacity: 1;
					}
					h4 {
						-webkit-transition: all 0.5s ease 0.2s;
						-o-transition: all 0.5s ease 0.2s;
						transition: all 0.5s ease 0.2s;
					}
					h1 {
						-webkit-transition: all 0.4s ease 0.4s;
						-o-transition: all 0.4s ease 0.4s;
						transition: all 0.4s ease 0.4s;
					}
					.primary-btn {
						-webkit-transition: all 0.6s ease 0.6s;
						-o-transition: all 0.6s ease 0.6s;
						transition: all 0.6s ease 0.6s;
					}
				}
			}
		}
	}
	.owl-nav {
		button[type=button] {
			position: absolute;
			left: 65px;
			top: 50%;
			-webkit-transform: translateY(-24px);
			-ms-transform: translateY(-24px);
			transform: translateY(-24px);
			line-height: 20px;
			font-size: 50px;
			color: $white-color;
		}
		button[type=button].owl-next {
			left: auto;
			right: 65px;
		}
	}
}

.single-hero-item {
	height: 950px;
	padding-top: 358px;
	.hero-text {
		text-align: center;
		h4 {
			color: $white-color;
			text-transform: uppercase;
			letter-spacing: 4px;
			margin-bottom: 36px;
			position: relative;
			top: 50px;
			opacity: 0;
		}
		h1 {
			color: $white-color;
			font-size: 110px;
			font-weight: 700;
			letter-spacing: 22px;
			text-transform: uppercase;
			margin-bottom: 64px;
			position: relative;
			top: 50px;
			opacity: 0;
			span {
				color: $primary-color;
			}
		}
		.primary-btn {
			position: relative;
			top: 100px;
			opacity: 0;
		}
	}
}

/*---------------------
  Services Section
-----------------------*/

.services-section {
	padding-top: 90px;
	padding-bottom: 115px;
}

.services-items {
	overflow: hidden;
	.single-service-item {
		float: left;
		width: calc(50% - 10px);
		background: #9d69d8;
		margin-right: 10px;
		margin-bottom: 10px;
		padding: 30px 22px 10px 30px;
		&.color-1 {
			background: #62b3d3;
		}
		&.color-2 {
			background: #5acd57;
		}
		&.color-3 {
			background: #ed5e4c;
		}
		h5 {
			color: $white-color;
			font-size: 20px;
			margin-bottom: 16px;
			margin-top: 25px;
		}
		p {
			color: $white-color;
			line-height: 22px;
		}
	}
}

.service-video {
	height: 636px;
	.play-btn {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		height: 100%;
		width: 100%;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		a {
			display: inline-block;
			position: relative;
			z-index: 1;
			&:before {
				position: absolute;
				left: -28px;
				top: -20px;
				height: 66px;
				width: 66px;
				background: #fff;
				content: "";
				border-radius: 50%;
				opacity: .2;
				z-index: -1;
			}
			&:after {
				position: absolute;
				left: -20px;
				top: -12px;
				height: 50px;
				width: 50px;
				background: $primary-color;
				content: "";
				border-radius: 50%;
				z-index: -1;
			}
			i {
				color: $white-color;
			}
		}
	}
}

/*---------------------
  Cta Section
-----------------------*/

.cta-section {
	text-align: center;
	padding-top: 110px;
	padding-bottom: 120px;
	h2 {
		color: $white-color;
		font-weight: 500;
		letter-spacing: 2px;
		text-transform: uppercase;
		margin-bottom: 20px;
	}
	p {
		color: $white-color;
		margin-bottom: 35px;
	}
}

/*---------------------
  Class Section
-----------------------*/

.class-section {
	padding-top: 75px;
	padding-bottom: 70px;
	.primary-btn {
		margin-top: 25px;
		float: right;
	}
}

.class-item {
	margin-bottom: 30px;
	.single-class-item {
		img {
			min-width: 100%;
		}
		.class-text {
			padding-top: 60px;
			h3 {
				color: #191919;
				font-weight: 500;
				margin-bottom: 35px;
			}
			p {
				color: $para-color;
				margin-bottom: 45px;
			}
			.schedule-btn {
				color: $primary-color;
				font-size: 14px;
				font-family: 'Oswald', sans-serif;
				letter-spacing: 1px;
				text-transform: uppercase;
				i {
					font-size: 18px;
					margin-left: 7px;
				}
			}
		}
	}
}

.class-author {
	ul {
		li {
			width: 160px;
			margin-right: 30px;
			a {
				&.active {
					.author-text {
						h5 {
							color: $primary-color;
						}
					}
				}
			}
			&:last-child {
				margin-right: 0;
			}
		}
	}
	.author-text {
		margin-bottom: 30px;
		img {
			min-width: 100%;
			margin-bottom: 26px;
		}
		h5 {
			color: $heading-color;
			font-size: 20px;
			font-weight: 500;
		}
	}
}

/*---------------------
  Trainer Section
-----------------------*/

.trainer-schedule {
	&.class-timetable {
		.section-title {
			h2 {
				color: $heading-color;
				margin-bottom: 61px;
			}
			.nav-controls {
				ul {
					li {
						color: #232530;
						display: inline-block;
						list-style: none;
						font-size: 16px;
						font-weight: 500;
						font-family: 'Oswald', sans-serif;
						text-transform: uppercase;
						margin-right: 54px;
						cursor: pointer;
						&.active {
							color: $primary-color;
						}
						&:last-child {
							margin-right: 0;
						}
					}
				}
			}
		}
	}
	.section-title {
		text-align: center;
		h2 {
			font-weight: 600;
			color: $white-color;
			margin-bottom: 46px;
			&:before {
				width: 70px;
				height: 3px;
				right: 0;
				left: 0;
				top: 49px;
				margin: 0 auto;
			}
		}
		p {
			color: $white-color;
		}
	}
}

.schedule-table {
	overflow-x: auto;
	.ts-item {
		-webkit-transition: all 0.4s;
		-o-transition: all 0.4s;
		transition: all 0.4s;
	}
	&.filtering {
		.ts-item {
			opacity: 0;
			&.show {
				opacity: 1;
			}
		}
	}
	table {
		width: 100%;
		text-align: center;
		border: 1px solid #e1e1e1;
		thead {
			tr {
				background: $white-color;
				th {
					color: #000000;
					font-size: 16px;
					font-family: 'Oswald', sans-serif;
					font-weight: 500;
					text-transform: uppercase;
					padding: 25px 0;
				}
			}
		}
		tbody {
			border-top: 1px solid #e5e5e5;
			tr {
				border-bottom: 1px solid #e5e5e5;
				background: #F0F0F0;
				&:nth-child(even) {
					background: $white-color;
				}
				td {
					border-right: 1px solid #e5e5e5;
					padding: 20px 10px 16px;
					width: 146px;
					font-family: 'Oswald', sans-serif;
					font-weight: 500;
					&.gym,
					&.crossfit,
					&.running {
						h6 {
							color: $primary-color;
						}
					}
					&.yoga {
						h6 {
							color: #247cc6;
						}
					}
					&.body,
					&.box {
						h6 {
							color: #6dcff6;
						}
					}
					&.cardio {
						h6 {
							color: #4cbcc3;
						}
					}
					&.box.g {
						h6 {
							color: #00a651;
						}
					}
					h6 {
						font-weight: 500;
						text-transform: uppercase;
						margin-bottom: 6px;
					}
					span {
						font-size: 14px;
						display: block;
						color: $heading-color;
						font-family: "Roboto", sans-serif;
						font-weight: 500;
						line-height: 26px;
					}
					.trainer-name {
						font-size: 14px;
						color: $para-color;
						font-family: "Roboto", sans-serif;
						font-weight: 400;
					}
				}
				.workout-time {
					color: #000000;
					font-size: 16px;
					font-weight: 500;
				}
			}
		}
	}
}

/*---------------------
  Team Member
-----------------------*/

.team-section {
	background: #f2f4f5;
	.section-title {
		float: left;
		margin-bottom: 30px;
	}
	.primary-btn {
		float: right;
		margin-top: 25px;
	}
}

.team-members {
	.member-pic {
		position: relative;
		&:before {
			position: absolute;
			right: -65px;
			top: 50%;
			height: 70px;
			width: 70px;
			background: #ffffff;
			content: "";
			-webkit-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			transform: rotate(45deg);
			margin-top: -35px;
		}
		&.second {
			&:before {
				top: auto;
				bottom: -60px;
				left: 50%;
				margin-left: -35px;
			}
		}
		img {
			min-width: 100%;
		}
	}
	.member-text {
		padding: 95px 30px 50px 45px;
		background: $white-color;
		height: 100%;
		position: relative;
		overflow: hidden;
		z-index: 99;
		span {
			font-size: 16px;
			font-family: "Roboto", sans-serif;
			color: $primary-color;
			line-height: 36px;
		}
		h5 {
			color: $heading-color;
			font-size: 20px;
			line-height: 30px;
			margin-bottom: 18px;
			font-weight: 500;
		}
		p {
			color: $para-color;
			margin-bottom: 5px;
		}
		.member-social {
			a {
				display: inline-block;
				font-size: 12px;
				color: $para-color;
				margin-right: 8px;
			}
		}
	}
}

/*---------------------
  Latest News Section
-----------------------*/

.latest-news-section {
	padding-bottom: 70px;
	.section-title {
		text-align: center;
		h2 {
			font-weight: 600;
			color: $heading-color;
			margin-bottom: 46px;
			&:before {
				width: 70px;
				height: 3px;
				right: 0;
				left: 0;
				top: 49px;
				margin: 0 auto;
			}
		}
		p {
			color: $para-color;
		}
	}
}

.latest-items {
	margin-bottom: 30px;
	img {
		min-width: 100%;
	}
	.latest-text {
		border-left: 1px solid #ebebeb;
		border-right: 1px solid #ebebeb;
		border-bottom: 1px solid #ebebeb;
		padding: 25px 30px 25px 30px;
		.latest-tag {
			overflow: hidden;
			margin-bottom: 10px;
			.tag-clock {
				float: left;
				font-size: 14px;
				color: #9a9a9a;
				i {
					margin-right: 8px;
				}
			}
			.tag-comments {
				margin-left: 28px;
				@extend .tag-clock;
			}
		}
		h5 {
			font-size: 20px;
			font-weight: 500;
			color: $heading-color;
			line-height: 28px;
			a {
				color: $heading-color;
				-webkit-transition: 0.3s;
				-o-transition: 0.3s;
				transition: 0.3s;
				&:hover {
					color: $primary-color;
				}
			}
		}
	}
}

/*---------------------
  Footer
-----------------------*/

.footer-section {
	overflow: hidden;
}

.map-location {
	height: 610px;
	position: relative;
	margin-left: -15px;
	margin-right: -15px;
	iframe {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
	.map-widget {
		position: absolute;
		left: 20%;
		top: 40%;
		i {
			position: absolute;
			left: 77%;
			top: 109px;
			font-size: 35px;
			color: $primary-color;
		}
		.map-address {
			height: 100px;
			width: 330px;
			background: $white-color;
			img {
				float: left;
			}
			ul {
				display: table;
				padding-left: 20px;
				padding-top: 15px;
				padding-bottom: 22px;
				padding-right: 25px;
				li {
					list-style: none;
					color: #707070;
					font-size: 14px;
					font-family: "Roboto", sans-serif;
					&:last-child {
						color: $primary-color;
					}
					span {
						color: #252525;
					}
				}
			}
		}
	}
}

.footer-form {
	margin-left: -15px;
	margin-right: -15px;
	height: 610px;
	padding-left: 85px;
	padding-top: 80px;
	.section-title {
		h2 {
			color: $white-color;
			margin-bottom: 28px;
			font-weight: 600;
		}
		p {
			color: $white-color;
		}
	}
	form {
		input {
			width: 100%;
			height: 44px;
			border: 1px solid #ebebeb;
			margin-bottom: 20px;
			padding-left: 20px;
		}
		textarea {
			width: 100%;
			height: 100px;
			border: 1px solid #ebebeb;
			padding-left: 20px;
			padding-top: 10px;
			margin-bottom: 25px;
			resize: none;
		}
		button {
			font-size: 14px;
			font-family: 'Oswald', sans-serif;
			color: $white-color;
			background: $primary-color;
			border: 1px solid $primary-color;
			letter-spacing: 2px;
			text-transform: uppercase;
			padding: 10px 52px 10px 39px;
			position: relative;
			cursor: pointer;
			i {
				font-size: 10px;
				position: absolute;
				right: 35px;
				top: 16px;
			}
		}
	}
}

.register {
	background: $heading-color;
	padding: 15px 0;
	&.normal-register {
		.copyright {
			span {
				color: $primary-color;
			}
		}
		.footer-widget {
			ul {
				li {
					&.active {
						color: $primary-color;
					}
				}
			}
		}
	}
	.copyright {
		float: left;
		font-size: 14px;
		color: $para-color;
		line-height: 28px;
		margin-right: 220px;
	}
	.footer-widget {
		float: left;
		ul {
			li {
				display: inline-block;
				list-style: none;
				font-size: 14px;
				color: $para-color;
				margin-right: 34px;
				position: relative;
				&:after {
					color: $para-color;
					content: "|";
					position: absolute;
					right: -21px;
					top: -1px;
				}
				&:last-child {
					margin-right: 0;
					&:after {
						display: none;
					}
				}
			}
		}
	}
	.footer-links {
		float: right;
		a {
			display: inline-block;
			font-size: 18px;
			margin-left: 25px;
			color: $para-color;
		}
	}
}

/*----------------------------- Other Pages Styles -------------------------*/

/*---------------------
  Breadcrumb Section
-----------------------*/

.breadcrumb-section {
	height: 200px;
	padding-top: 55px;
}

.site-text {
	text-align: center;
	h2 {
		color: $white-color;
		font-weight: 500;
		text-transform: uppercase;
		margin-bottom: 12px;
	}
	.site-breadcrumb {
		.sb-item {
			color: $white-color;
			font-size: 14px;
			margin-right: 20px;
			position: relative;
			&:last-child {
				margin-right: 0;
				&:after {
					display: none;
				}
			}
			&:after {
				position: absolute;
				right: -15px;
				top: -1px;
				content: "";
				font-family: "FontAwesome";
			}
		}
	}
}

/*---------------------
  About Us
-----------------------*/

.about-us-section {
	.about-pic {
		margin-left: -15px;
		margin-right: -15px;
		img {
			min-width: 100%;
		}
	}
}

.about-text {
	margin-left: -15px;
	margin-right: -15px;
	.section-title {
		margin-bottom: 20px;
		h2 {
			font-weight: 600;
		}
		p {
			font-size: 20px;
			color: $heading-color;
			line-height: 28px;
			font-weight: 500;
		}
	}
	p {
		color: #6e6e6e;
		line-height: 24px;
	}
}

/*---------------------
  Chose Section
-----------------------*/

.choseus-section {
	padding-bottom: 66px;
	@extend .trainer-schedule;
	.section-title {
		h2 {
			color: $white-color;
			&:before {
				background: $white-color;
			}
		}
	}
}

.chose-items {
	.ci-item {
		margin-bottom: 30px;
		text-align: center;
		i {
			font-size: 48px;
			color: $white-color;
		}
		h5 {
			color: $white-color;
			font-size: 20px;
			font-weight: 500;
			margin-bottom: 15px;
			margin-top: 22px;
		}
		p {
			color: $white-color;
			line-height: 24px;
		}
	}
}

/*---------------------
  About Page Trainer
-----------------------*/

.about-page-trainer {
	padding-bottom: 70px;
	@extend .choseus-section;
	.section-title {
		h2 {
			color: $heading-color;
			font-weight: 600;
			&:before {
				background: $primary-color;
			}
		}
		p {
			color: $para-color;
		}
	}
	.single-trainer-item {
		text-align: center;
		-webkit-transition: .3s;
		-o-transition: .3s;
		transition: .3s;
		&:hover {
			-webkit-box-shadow: 1px 2px 30px 5px #d8d8d8;
			box-shadow: 1px 2px 30px 5px #d8d8d8;
		}
		.trainer-pic {
			img {
				min-width: 100%;
			}
		}
		.trainer-text {
			padding: 25px 30px 25px;
			h5 {
				color: $heading-color;
				font-size: 20px;
				font-weight: 500;
				text-transform: uppercase;
				margin-bottom: 8px;
			}
			span {
				color: $para-color;
				font-size: 16px;
				line-height: 30px;
				display: block;
				margin-bottom: 14px;
			}
			.trainer-social {
				border-top: 1px solid #ebebeb;
				padding-top: 15px;
				a {
					display: inline-block;
					color: $para-color;
					font-size: 14px;
					margin-right: 26px;
					&:last-child {
						margin-right: 0;
					}
				}
			}
		}
	}
}

/*---------------------
  Gallery Section
-----------------------*/

.gallery-section {
	padding-top: 75px;
	padding-bottom: 50px;
}

.filter-controls {
	margin-bottom: 33px;
	ul {
		li {
			color: #1b251f;
			display: inline-block;
			list-style: none;
			font-size: 16px;
			font-weight: 500;
			font-family: 'Oswald', sans-serif;
			text-transform: uppercase;
			margin-right: 54px;
			cursor: pointer;
			&.active {
				color: $primary-color;
			}
			&:last-child {
				margin-right: 0;
			}
		}
	}
}

.gallery-item {
	margin-bottom: 30px;
	&:hover {
		.gi-img {
			&:after {
				opacity: .8;
			}
		}
		.gi-text {
			opacity: 1;
		}
	}
	.gi-img {
		position: relative;
		z-index: 1;
		-webkit-transition: .3s;
		-o-transition: .3s;
		transition: .3s;
		&:after {
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 100%;
			background: -o-linear-gradient(50deg, #6d2264, #f83351);
			background: linear-gradient(40deg, #6d2264, #f83351);
			content: "";
			opacity: 0;
		}
		img {
			min-width: 100%;
		}
	}
	.gi-text {
		position: absolute;
		left: 0;
		top: 50%;
		text-align: center;
		width: 100%;
		-webkit-transform: translateY(-43px);
		-ms-transform: translateY(-43px);
		transform: translateY(-43px);
		z-index: 99;
		opacity: 0;
		-webkit-transition: .3s;
		-o-transition: .3s;
		transition: .3s;
		h5 {
			font-size: 20px;
			color: $white-color;
			line-height: 30px;
		}
		span {
			display: inline-block;
			color: #e0dede;
			font-size: 14px;
			line-height: 30px;
		}
	}
}

/*---------------------
  Blog Section
-----------------------*/

.blog-section {
	padding-top: 80px;
	padding-bottom: 80px;
}

.blog-items {
	margin-left: -15px;
	margin-right: -15px;
	.single-blog-item {
		margin-bottom: 55px;
		.blog-text {
			.blog-tag {
				overflow: hidden;
				padding: 18px 0;
				border-bottom: 1px solid #E5E5E5;
				.post-info {
					float: left;
					font-size: 14px;
					color: #9a9a9a;
					span {
						color: $primary-color;
					}
				}
				.tag-details {
					float: right;
					.tag-event {
						float: left;
						font-size: 14px;
						color: #9a9a9a;
						margin-right: 44px;
						i {
							margin-right: 6px;
						}
					}
					.tag-comments {
						float: right;
						font-size: 14px;
						color: #9a9a9a;
						i {
							margin-right: 6px;
						}
					}
				}
			}
			a {
				h3 {
					color: $heading-color;
					font-weight: 500;
					padding-top: 14px;
					margin-bottom: 14px;
				}
			}
			p {
				color: $para-color;
				line-height: 24px;
			}
			.blog-btn {
				color: $primary-color;
				font-size: 14px;
				font-weight: 400;
				font-family: 'Oswald', sans-serif;
				text-transform: uppercase;
				letter-spacing: 2px;
				i {
					font-size: 16px;
				}
			}
		}
	}
}

.blog-pagination {
	text-align: center;
	a {
		display: inline-block;
		color: $para-color;
		font-size: 14px;
		border: 1px solid #e5e5e5;
		padding: 9px 14px;
		i {
			margin-left: 4px;
		}
	}
}

.blog-sidebar {
	margin-left: -15px;
	margin-right: -15px;
	.sidebar-recent {
		margin-bottom: 32px;
		h4 {
			color: #232530;
			font-weight: 500;
			margin-bottom: 20px;
		}
		.sr-item {
			border-bottom: 1px solid #e5e5e5;
			padding-bottom: 15px;
			margin-bottom: 15px;
			&:last-child {
				border-bottom: none;
			}
			a {
				display: block;
				-webkit-transition: all .3s;
				-o-transition: all .3s;
				transition: all .3s;
				&:hover {
					h5 {
						color: $primary-color;
					}
				}
				h5 {
					color: $heading-color;
					font-weight: 500;
					line-height: 26px;
					margin-bottom: 10px;
				}
			}
			.blog-date {
				color: $para-color;
				font-size: 14px;
			}
		}
	}
	.sidebar-categories {
		margin-bottom: 42px;
		h4 {
			color: #232530;
			font-weight: 500;
			margin-bottom: 20px;
		}
		.cat-list {
			li {
				list-style: none;
				&:hover {
					a {
						color: $primary-color;
					}
				}
				a {
					color: $para-color;
					font-size: 16px;
					line-height: 34px;
					padding-left: 20px;
					position: relative;
					display: inline-block;
					-webkit-transition: all .3s;
					-o-transition: all .3s;
					transition: all .3s;
					&:before {
						position: absolute;
						left: 0;
						top: 12px;
						width: 8px;
						height: 8px;
						background: $primary-color;
						content: "";
						border-radius: 50%;
					}
				}
			}
		}
	}
	.popular-tags {
		margin-bottom: 44px;
		h4 {
			color: #232530;
			font-weight: 500;
			margin-bottom: 28px;
		}
		a {
			display: inline-block;
			font-size: 12px;
			color: $para-color;
			text-transform: uppercase;
			border: 1px solid #e5e5e5;
			padding: 6px 14px;
			margin-right: 6px;
			margin-bottom: 10px;
			-webkit-transition: all .3s;
			-o-transition: all .3s;
			transition: all .3s;
			&:hover {
				color: $primary-color;
				border-color: $primary-color;
			}
		}
	}
	.weekly-time {
		h4 {
			color: #232530;
			font-weight: 500;
			margin-bottom: 28px;
		}
		ul {
			li {
				list-style: none;
				overflow: hidden;
				line-height: 48px;
				padding-bottom: 12px;
				margin-bottom: 12px;
				border-bottom: 1px solid #e5e5e5;
				-webkit-transition: all .3s;
				-o-transition: all .3s;
				transition: all .3s;
				&:hover {
					p {
						color: $primary-color;
					}
					span {
						color: $primary-color;
					}
				}
				&:last-child {
					border-bottom: none;
				}
				p {
					color: $para-color;
					margin-bottom: 0;
					float: left;
				}
				span {
					color: $para-color;
					font-size: 16px;
					float: right;
					line-height: 25px;
				}
			}
		}
	}
}

.blog-details {
	margin-left: -15px;
	margin-right: -15px;
	.bd-text {
		img {
			margin-bottom: 32px;
		}
		h3 {
			color: $heading-color;
			font-weight: 500;
		}
		.blog-tag {
			overflow: hidden;
			padding: 20px 0 18px;
			.post-info {
				float: left;
				font-size: 14px;
				color: #9a9a9a;
				span {
					color: $primary-color;
				}
			}
			.tag-details {
				float: right;
				.tag-event {
					float: left;
					font-size: 14px;
					color: #9a9a9a;
					margin-right: 44px;
					i {
						margin-right: 6px;
					}
				}
				.tag-comments {
					float: right;
					font-size: 14px;
					color: #9a9a9a;
					i {
						margin-right: 6px;
					}
				}
			}
		}
		p {
			color: $para-color;
			margin-bottom: 32px;
			span {
				text-decoration: underline;
				color: $primary-color;
			}
		}
		.bd-video {
			margin-bottom: 24px;
			.video-bg {
				height: 316px;
				.play-btn {
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-align: center;
					-ms-flex-align: center;
					align-items: center;
					-webkit-box-pack: center;
					-ms-flex-pack: center;
					justify-content: center;
					height: 100%;
					a {
						display: inline-block;
						position: relative;
						z-index: 1;
						font-size: 19px;
						color: $white-color;
						&:after {
							position: absolute;
							left: -20px;
							top: -12px;
							height: 50px;
							width: 50px;
							background: $primary-color;
							content: "";
							border-radius: 50%;
							z-index: -1;
						}
					}
				}
			}
			.video-text {
				h5 {
					font-size: 20px;
					font-weight: 500;
					color: $heading-color;
					margin-bottom: 28px;
				}
				ul {
					li {
						font-size: 16px;
						list-style: none;
						color: $para-color;
						line-height: 36px;
						i {
							color: $primary-color;
							margin-right: 8px;
						}
					}
				}
			}
		}
		.bd-desc {
			h5 {
				font-size: 20px;
				font-weight: 500;
				color: $heading-color;
				margin-bottom: 15px;
			}
		}
	}
	.blog-quote {
		padding-top: 25px;
		p {
			color: $para-color;
			position: relative;
			padding-left: 34px;
			margin-bottom: 0;
			position: relative;
			z-index: 1;
			i {
				font-size: 41px;
				position: absolute;
				top: -7px;
				left: 45px;
				z-index: -1;
				color: $primary-color;
				opacity: .1;
			}
			&:before {
				position: absolute;
				left: 0;
				top: 0;
				width: 5px;
				height: 100%;
				background: $primary-color;
				content: "";
			}
		}
	}
	.bd-info {
		overflow: hidden;
		padding-top: 50px;
		padding-bottom: 10px;
		border-bottom: 1px solid #e9e9e9;
		.bi-tags {
			float: left;
			a {
				display: inline-block;
				font-size: 12px;
				color: $para-color;
				text-transform: uppercase;
				border: 1px solid #e5e5e5;
				padding: 6px 14px;
				margin-right: 6px;
				margin-bottom: 10px;
			}
		}
		.bi-social {
			float: right;
			a {
				color: $para-color;
				font-size: 14px;
				margin-left: 25px;
			}
		}
	}
	.bd-comments {
		padding-top: 54px;
		h4 {
			color: $heading-color;
			font-weight: 500;
			margin-bottom: 37px;
		}
		.comments-item {
			margin-bottom: 44px;
			.avatar-pic {
				float: left;
				margin-right: 30px;
				img {
					height: 70px;
					width: 70px;
					border-radius: 50%;
				}
			}
			.avatar-text {
				display: table;
				position: relative;
				padding-left: 30px;
				position: relative;
				&:before {
					position: absolute;
					left: 0;
					top: 8px;
					height: 97px;
					width: 1px;
					background: #e9e9e9;
					content: "";
				}
				span {
					color: #9a9a9a;
					font-size: 14px;
					display: inline-block;
					margin-bottom: 8px;
				}
				h6 {
					color: $primary-color;
					font-weight: 500;
					margin-bottom: 10px;
				}
				p {
					color: $para-color;
					line-height: 24px;
					margin-bottom: 0;
				}
				.reply-btn.primary-btn {
					padding: 6px 30px;
					font-size: 12px;
					position: absolute;
					right: 0;
					top: 0;
					border: 1px solid $primary-color;
					color: $heading-color;
					background: transparent;
					font-weight: 500;
					-webkit-transition: all 0.4s;
					-o-transition: all 0.4s;
					transition: all 0.4s;
					&:hover {
						background: $primary-color;
						color: #fff;
					}
				}
			}
		}
	}
	.comment-form {
		h4 {
			color: $heading-color;
			font-weight: 500;
			margin-bottom: 37px;
		}
		form {
			input {
				width: 100%;
				height: 40px;
				border: 1px solid #e5e5e5;
				font-size: 14px;
				color: $heading-color;
				padding-left: 19px;
				margin-bottom: 30px;
				&:focus {
					border-color: $primary-color;
					font-weight: 500;
					&::-webkit-input-placeholder {
						font-weight: 400;
					}
					&::-moz-placeholder {
						font-weight: 400;
					}
					&:-ms-input-placeholder {
						font-weight: 400;
					}
					&::-ms-input-placeholder {
						font-weight: 400;
					}
					&::placeholder {
						font-weight: 400;
					}
				}
				&::-webkit-input-placeholder {
					color: $para-color;
				}
				&::-moz-placeholder {
					color: $para-color;
				}
				&:-ms-input-placeholder {
					color: $para-color;
				}
				&::-ms-input-placeholder {
					color: $para-color;
				}
				&::placeholder {
					color: $para-color;
				}
			}
			textarea {
				width: 100%;
				height: 100px;
				border: 1px solid #e5e5e5;
				padding-left: 19px;
				padding-top: 14px;
				font-size: 14px;
				color: $heading-color;
				resize: none;
				margin-bottom: 23px;
				&:focus {
					border-color: $primary-color;
					font-weight: 500;
					&::-webkit-input-placeholder {
						font-weight: 400;
					}
					&::-moz-placeholder {
						font-weight: 400;
					}
					&:-ms-input-placeholder {
						font-weight: 400;
					}
					&::-ms-input-placeholder {
						font-weight: 400;
					}
					&::placeholder {
						font-weight: 400;
					}
				}
				&::-webkit-input-placeholder {
					color: $para-color;
				}
				&::-moz-placeholder {
					color: $para-color;
				}
				&:-ms-input-placeholder {
					color: $para-color;
				}
				&::-ms-input-placeholder {
					color: $para-color;
				}
				&::placeholder {
					color: $para-color;
				}
			}
			button {
				font-size: 14px;
				font-family: "Oswald", sans-serif;
				color: #ffffff;
				background: $primary-color;
				border: 1px solid $primary-color;
				letter-spacing: 2px;
				text-transform: uppercase;
				padding: 10px 30px 10px 33px;
				position: relative;
				cursor: pointer;
			}
		}
	}
}

/*---------------------
  Contact Map
-----------------------*/

.contact-map {
	height: 610px;
	position: relative;
	iframe {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
	i {
		position: absolute;
		left: 50%;
		top: 50%;
		font-size: 48px;
		color: $primary-color;
		-webkit-transform: translate(-24px, -24px);
		-ms-transform: translate(-24px, -24px);
		transform: translate(-24px, -24px);
	}
}

/*---------------------
  Contact Section
-----------------------*/

.contact-section {
	padding-top: 80px;
	padding-bottom: 80px;
	.contact-info {
		text-align: center;
		margin-bottom: 30px;
		i {
			color: $primary-color;
			font-size: 48px;
			margin-bottom: 25px;
			display: inline-block;
		}
		p {
			font-size: 18px;
			color: $heading-color;
		}
		ul {
			li {
				list-style: none;
				font-size: 18px;
				color: $heading-color;
				line-height: 28px;
				span {
					color: #9a9a9a;
				}
			}
		}
	}
	.contact-form {
		padding-top: 35px;
		.section-title {
			text-align: center;
			h2 {
				margin-bottom: 28px;
				&:before {
					display: none;
				}
			}
		}
		input {
			width: 100%;
			height: 50px;
			border: 1px solid #e1e1e1;
			padding-left: 25px;
			margin-bottom: 30px;
			font-size: 14px;
			color: #9a9a9a;
		}
		textarea {
			width: 100%;
			height: 150px;
			border: 1px solid #e1e1e1;
			padding-left: 25px;
			padding-top: 12px;
			resize: none;
			margin-bottom: 45px;
			font-size: 14px;
			color: #9a9a9a;
		}
		button {
			font-size: 14px;
			font-family: "Oswald", sans-serif;
			color: #ffffff;
			background: $primary-color;
			border: 1px solid $primary-color;
			letter-spacing: 2px;
			text-transform: uppercase;
			padding: 13px 35px 14px 37px;
			position: relative;
			cursor: pointer;
		}
	}
}

/*--------------------------------- Responsive Media Quaries -----------------------------*/

@media only screen and (min-width: 1200px) {
	.container {
		max-width: 1170px;
	}
}

/* Medium Device = 1200px */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.latest-items .latest-text .latest-tag .tag-comments {
		margin-left: 15px;
	}
	.team-members .member-text {
		padding: 40px 30px 40px 45px;
	}
}

@media only screen and (max-width: 992px) {
	.class-section .primary-btn {
		margin-bottom: 20px;
		float: none;
	}
	.services-items {
		margin-bottom: 20px;
	}
	.team-members .member-pic:before {
		top: auto;
		bottom: -60px;
		left: 50%;
		margin-left: -35px;
	}
	.team-members .member-pic.third:before {
		left: 50%;
	}
	.footer-form {
		padding: 50px 80px 45px 80px;
	}
	.register .copyright {
		margin-right: 30px;
	}
	.about-us-section .about-pic {
		margin-bottom: 30px;
	}
	.about-page-trainer .single-trainer-item {
		margin-bottom: 40px;
	}
	.blog-sidebar .sidebar-recent {
		padding-top: 40px;
	}
	.blog-details .bd-text .bd-video .video-bg {
		margin-bottom: 30px;
	}
	.team-section .primary-btn {
		float: none;
		margin-top: 0;
		margin-bottom: 20px;
	}
}

/* Tablet Device = 768px */

@media only screen and (min-width: 768px) and (max-width: 992px) {
	.nav-menu .mainmenu ul li {
		margin-right: 25px;
	}
	.nav-menu .nav-right {
		margin-left: 0px;
	}
	.header-section.header-normal .nav-menu .mainmenu ul li {
		margin-right: 20px;
	}
}

/* Wide Mobile = 480px */

@media only screen and (max-width: 767px) {
	.slicknav_menu {
		display: block;
		background: transparent;
		padding: 0;
	}
	.nav-menu .mainmenu {
		display: none;
	}
	.nav-menu {
		position: relative;
	}
	.nav-right {
		position: absolute;
		right: 110px;
		top: 7px;
	}
	.slicknav_btn {
		margin: 0;
	}
	.slicknav_nav {
		padding: 15px 10px;
		background: #222;
	}
	.slicknav_nav a {
		padding: 10px 10px;
		margin: 0;
	}
	.slicknav_nav a:hover {
		border-radius: 0;
		background: #f34a3a;
		color: #fff;
	}
	.slicknav_nav ul {
		margin: 0;
	}
	.hero-items .owl-nav button[type=button] {
		left: 5px;
	}
	.hero-items .owl-nav button[type=button].owl-next {
		right: 5px;
	}
	.single-hero-item {
		padding-top: 200px;
	}
	.register .copyright {
		margin-right: 0;
		float: none;
		text-align: center;
		margin-bottom: 10px;
	}
	.register .footer-widget {
		float: none;
		text-align: center;
		margin-bottom: 10px;
	}
	.register .footer-links {
		float: none;
		text-align: center;
	}
	.register .footer-links a {
		&:first-child {
			margin-left: 0;
		}
	}
	.header-normal .slicknav_btn {
		margin-top: 31px;
		margin-bottom: 30px;
	}
	.header-section.header-normal .nav-menu .nav-right {
		position: absolute;
		top: 0;
		right: 110px;
	}
	.filter-controls ul li {
		margin-right: 30px;
		margin-bottom: 10px;
	}
	.trainer-schedule.class-timetable .section-title .nav-controls ul li,
	.class-timetable.choseus-section .section-title .nav-controls ul li,
	.class-timetable.about-page-trainer .section-title .nav-controls ul li {
		margin-right: 25px;
		margin-bottom: 10px;
	}
	.blog-items {
		margin-left: 0;
		margin-right: 0;
	}
	.blog-sidebar {
		margin-left: 0;
		margin-right: 0;
	}
	.about-us-section .about-pic {
		margin-left: 0;
		margin-right: 0;
	}
	.about-text {
		margin-left: 0;
		margin-right: 0;
	}
	.blog-details {
		margin-left: 0;
		margin-right: 0;
	}
	.blog-details .bd-info .bi-social a {
		margin-left: 15px;
	}
}

/* Small Device = 320px */

@media only screen and (min-width: 320px) and (max-width: 479px) {
	.single-hero-item .hero-text h1 {
		font-size: 75px;
	}
	.services-items .single-service-item {
		width: 100%;
		margin-right: 0;
	}
	.map-location .map-widget {
		left: 2%;
	}
	.map-location .map-widget .map-address {
		width: 309px;
	}
	.map-location .map-widget .map-address ul {
		padding-left: 14px;
		padding-right: 14px;
	}
	.footer-form {
		padding: 10px 20px 10px 20px;
	}
	.blog-items .single-blog-item .blog-text .blog-tag .post-info {
		float: none;
	}
	.blog-items .single-blog-item .blog-text .blog-tag .tag-details {
		float: none;
	}
	.blog-details .bd-text .blog-tag .post-info {
		float: none;
	}
	.blog-details .bd-text .blog-tag .tag-details {
		float: none;
	}
	.blog-details .bd-info .bi-tags {
		float: none;
	}
	.blog-details .bd-info .bi-social {
		float: none;
	}
	.blog-details .bd-comments .comments-item .avatar-text .reply-btn.primary-btn {
		padding: 5px 10px;
		position: relative;
		margin-top: 20px;
	}
	.blog-details .bd-comments .comments-item {
		.avatar-pic {
			float: none;
			margin-bottom: 20px;
		}
		.avatar-text {
			padding-left: 0;
			&:before {
				display: none;
			}
		}
	}
}