/* --------------------------------------
=========================================
VibrantGYM Landing Page Template
Version: 1.0
Designed By: CreativeCary
=========================================
-----------------------------------------

1. GLOABL - CSS
	1.1 IMPORT GOOGLE WEBFONT
	1.2 GENERAL - CSS
	1.3 TYPOGRAPHY 
	1.4 PRE-LOADER 
	1.4 PRE-LOADER ANIMATIONS 

2. MASTER COLOR SETTINGS
	2.1 BACKGROUND COLOR SETTINGS
	2.2 BORDER COLOR SETTINGS 
	2.3 TEXT COLOR SETTINGS
	
3. SECTION CSS

4. HEADER SECTION
	4.1 HEADER LEFT 
	4.1 HEADER RIGHT 
	
5. STATISTICS SECTION
	5.1 GENERAL CSS

6. FEATURE SECTION
	6.1 GENERAL CSS

7. TRAINING CLASSES  SECTION
	7.1 GENERAL CSS

8. VIDEO  SECTION
	8.1 GENERAL CSS

9. CLIENT SECTION
	9.1 GENERAL CSS

10. SUBSCRIBE SECTION
	10.1 GENERAL CSS

11. FOOTER SECTION
	11.1 GENERAL CSS
	
-----------------------------------------*/

/* --------------------------------------
=========================================
   1. GLOABL - CSS
=========================================
-----------------------------------------*/

/*---------------------------------------
   1.1 IMPORT GOOGLE WEBFONT               
-----------------------------------------*/

@import url(http://fonts.googleapis.com/css?family=Raleway:400,300,500,700,800);

/*---------------------------------------
   1.2 GENERAL - CSS               
-----------------------------------------*/

body {
	background: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px; /* PIXEL FALLBACK */
	font-size: 1.6rem;
	line-height: 1.5;
	color: #8f96a9;
}

iframe {
	border: none;
}

/*---------------------------------------
   1.3 TYPOGRAPHY               
-----------------------------------------*/
	
h1, h2, h3, h4, h5, h6, p {
	font-family: 'Raleway', sans-serif;
}

h1 {
	font-size: 48px; /* PIXEL FALLBACK */
	font-size: 4.8rem;
	font-weight: normal;
}

h2 {
	font-size: 40px; /* PIXEL FALLBACK */
	font-size: 4rem;
	font-weight: normal;
	margin-top: 0;
}

h3 {
	font-size: 24px; /* PIXEL FALLBACK */
	font-size: 2.4rem;
}

h4 {
	font-size: 20px; /* PIXEL FALLBACK */
	font-size: 2rem;
	font-weight: bold;
	
}

p {
	font-size: 18px; /* PIXEL FALLBACK */
	font-size: 1.8rem;
}

section p {
	font-size: 16px; /* PIXEL FALLBACK */
	font-size: 1.6rem;
}

footer p {
	font-size: 14px; /* PIXEL FALLBACK */
	font-size: 1.4rem;
}

/*---------------------------------------
   1.4 PRE-LOADER              
-----------------------------------------*/

#loading{
	background:#eeeff1;
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 1;
	margin-top: 0px;
	top: 0px;
}
#loading-center{
	width: 100%;
	height: 100%;
	position: relative;
}
#loading-center-absolute {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 200px;
	width: 200px;
	margin-top: -100px;
	margin-left: -100px;
}
#object{
	background: #008000;
	width: 30px;
	height: 30px;
	-webkit-animation: animate 1s infinite ease-in-out;
	animation: animate 1s infinite ease-in-out;
	margin-right: auto;
	margin-left: auto;
	margin-top: 60px;
}

/*---------------------------------------
   1.5 PRE-LOADER ANIMATION               
-----------------------------------------*/

@-webkit-keyframes animate {
  0% { -webkit-transform: perspective(160px); }
  50% { -webkit-transform: perspective(160px) rotateY(-180deg); }
  100% { -webkit-transform: perspective(160px) rotateY(-180deg) rotateX(-180deg); }
}

@keyframes animate {
  0% { 
    transform: perspective(160px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg); 
  } 50% { 
    transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
    -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg) ;
  } 100% { 
    transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
    -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
  }
}


/* --------------------------------------
=========================================
   2. MASTER COLOR SETTINGS
=========================================
-----------------------------------------*/

/*---------------------------------------
   2.1 BACKGROUND COLOR SETTINGS               
-----------------------------------------*/

.gray {
	background: #f7f8f9;
}

.red {
	background: #ee2b49;
}

.blue {
	background: #00acb3;
}

.gold {
	background: #f6802b;
}

.purple {
	background: #d055de;
}
.green{
	background: #008000;
}

/*---------------------------------------
   2.2 BORDER COLOR SETTINGS               
-----------------------------------------*/	

.center-line {
	width: 60px;
	height: 2px;
	background: #008000;
	display: inline-block;
	margin: 17px 0;
}

/*---------------------------------------
   2.3 TEXT COLOR SETTINGS               
-----------------------------------------*/

h1, h2, h3, p {
	color: #fff;
}

section h2, h4 {
	color: #000;
}

section p {
	color: #666;
}

.gray-text {
	color: #f7f8f9;
}

.red-text {
	color: #ee2b49;
}

.blue-text {
	color: #00acb3;
}

.gold-text {
	color: #f6802b;
}

.purple-text {
	color: #d055de;
}
.green-text {
	color: #008000;
}

/* --------------------------------------
=========================================
   3. Section CSS
=========================================
-----------------------------------------*/	

section {
	padding: 70px 0;
	text-align: center;
}
.padd-both{
	padding:0 100px;
	}
/* --------------------------------------
=========================================
   4. HEADER SECTION
=========================================
-----------------------------------------*/

header {
	background: url(../img/bg.jpg)top center no-repeat;
	padding: 45px 0;
	background-size: cover;
	background-position-x: center;
}

/*---------------------------------------
   4.1 HEADER LEFT               
-----------------------------------------*/

.logo {
	display: inline-block;
}

header h1 {
	margin-top: 48px;
}

ul.header-list {
	padding: 0px;
}

ul.header-list li {
	list-style: none;
	background: url(../img/check.png) no-repeat;
	padding-left: 55px;
	font-size: 18px; /* PIXEL FALLBACK */
	font-size: 1.8rem;
	font-family: 'Raleway', sans-serif;
	margin: 0 0 15px;
}

ul.header-list_one li {
	list-style: none;
	/*background: url(../img/check.png) no-repeat;*/
	font-size: 18px; /* PIXEL FALLBACK */
	font-size: 1.8rem;
	font-family: 'Raleway', sans-serif;
	color: #736f6f;
	margin: 0 0 15px;
	text-align: left;
}
.fa-check-circle-o{color: #008000;
    font-size: 22px;
    margin-right: 14px;}

/*---------------------------------------
   4.1 HEADER RIGHT               
-----------------------------------------*/	

.form-bg {
	background-color: rgb(0 128 0);
	text-align: center;
	margin-top: 35px;
	padding: 20px;
}

.form-bg h3 {
	margin: 10px 0 20px;
}

.form-arrow {
	background: #fff url("../img/arrow.png") no-repeat scroll center center;
	display: inline-block;
	height: 72px;
	width: 72px;
	border-radius: 50%;
	cursor: pointer;
	margin: -55px 0 0;
}

.form-bg input {
	background: #fff;
	border: 1px solid #d1d1d1;
	height: 50px;
	border-radius: 0px;
	font-size: 12px;
	color: #000;
	margin: 0 0 15px;
}

.form-bg button {
	background: #ffffff none repeat scroll 0 0;
    border: 0 solid #ffffff;
    border-radius: 0;
    color: #008000 !important;
    font-size: 15px;
    height: 50px;
    margin: 0 0 15px;
    width: 100%;
    font-weight: bolder;
}

.error{
	background:#ee2b49;
	color:#fff;
	text-align:center;
	line-height:50px;
	margin-bottom:15px;
	}
	
.success{
	background:#00acb3;
	color:#fff;
	text-align:center;
	line-height:50px;
	margin-bottom:15px;
	}
/* --------------------------------------
=========================================
   5. STATISTICS SECTION
=========================================
-----------------------------------------*/

/*---------------------------------------
   5.1 GENERAL CSS              
-----------------------------------------*/	

.statistics {
	background: #008000;
	min-height: 125px;
	padding: 0 0 25px;
}

.stat-icon1 {
	background: url(../img/icon1.png) no-repeat left center;
}

.stat-icon2 {
	background: url(../img/icon2.png) no-repeat left center;
}

.stat-icon3 {
	background: url(../img/icon3.png) no-repeat left center;
}

.stat-text {
	margin: 25px 0 0;
	padding: 0 0 0 70px;
	text-align: left;
	display: inline-block;
}

.stat-text h3 {
	font-size: 36px;
	margin: 5px 0 0px;
	font-weight: normal;
}

.stat-text p {
	color: #fff;
}

/* --------------------------------------
=========================================
   6. FEATURE SECTION
=========================================
-----------------------------------------*/

/*---------------------------------------
   6.1 GENERAL CSS              
-----------------------------------------*/	

.feature {
	margin: 38px 0 0;
}

.feature-icon {
	margin: 0 0 25px;
}

/* --------------------------------------
=========================================
   7. TRAINING CLASSES  SECTION
=========================================
-----------------------------------------*/

/*---------------------------------------
   7.1 GENERAL CSS              
-----------------------------------------*/	

.training-image {
	margin: 35px 0 0;
}

.training-image img {
	width: 100%;
}

.price-box {
	display: inline-block;
	height: 160px;
	width: 100%;
}

.price-box h4 {
	color: #fff;
	margin: 32px 0 5px;
}

.price-box p {
	color: #fff;
}

/* --------------------------------------
=========================================
   8. VIDEO  SECTION
=========================================
-----------------------------------------*/	

/*---------------------------------------
   8.1 GENERAL CSS              
-----------------------------------------*/	

.video {
	margin: 38px 0 0;
}

.video iframe {
	width: 100%;
	height: 760px;
}

/* --------------------------------------
=========================================
   9. CLIENT SECTION
=========================================
-----------------------------------------*/	

/*---------------------------------------
   9.1 GENERAL CSS              
-----------------------------------------*/	


.client-box {
	margin: 105px 0 0;
}

.client-image {
	height: 90px;
}

.client-image img {
	border: 5px solid #f7f8f9;
	border-radius: 50%;
	height: 140px;
	margin: -70px 0 0;
	width: 140px;
}

.client-text {
	background: #fff;
	padding: 48px 10px;
}

/* --------------------------------------
=========================================
   10. SUBSCRIBE SECTION
=========================================
-----------------------------------------*/	

/*---------------------------------------
   10.1 GENERAL CSS              
-----------------------------------------*/	

.subscribe-bg {
	background: url(../img/Tetimonial.jpg) no-repeat fixed center center;
}
.subscribe-bg1 {
	background: url(../img/bg2.jpg) no-repeat fixed center center;
	    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.subscribe-bg1 h2, .subscribe-bg1 p {
	color: #fff;
}
.subscribe-bg1 .center-line {
	background: #fff;
}

.subscribe-bg h2, .subscribe-bg p {
	color: #fff;
}

.subscribe-bg .center-line {
	background: #fff;
}

.subscribe-form {
	margin: 35px 0 0;
	width: 100%;
	max-width: 635px;
	display: inline-block;
}

.subscribe-input {
	background: #fff;
	border: none;
	height: 50px;
	border-radius: 0px;
	font-size: 12px;
	color: #000;
	margin-bottom: 20px;
	padding: 10px;
	width: 70%;
	float: left;
}

.subscribe-button {
	background: #008000  none repeat scroll 0 0;
	border: 0 solid #ee2b49;
	border-radius: 0;
	color: #fff !important;
	font-size: 15px;
	height: 50px;
	width: 40%;
	
}

#newsletter-error {
	background:#ee2b49;
	color:#fff;
	padding:15px;
	margin-bottom:20px;
	display:none;
}


#newsletter-success {
	background:#00acb3;
	color:#fff;
	padding:15px;
	margin-bottom:20px;
	display:none;
}
/* --------------------------------------
=========================================
   11. FOOTER  SECTION
=========================================
-----------------------------------------*/		

/*---------------------------------------
   11.1 GENERAL CSS              
-----------------------------------------*/	


footer {
	padding: 70px 0;
	background: #fff;
	text-align: center;
}

ul.footer-social-icon {
	display: inline-block;
	margin-top: 0px;
	padding: 0px;
}

ul.footer-social-icon li {
	list-style: none;
	display: inline-block;
	margin: 0 5px;
	padding: 0px;
}

footer p {
	color: #696969;
	margin: 0;
}
/* --------------------------------------
=========================================
   14. RESPONSIVE FIXES
=========================================
-----------------------------------------*/

/*---------------------------------------
   14.1 FOR MAXIMUM WIDTH 992PX              
-----------------------------------------*/

@media (max-width: 993px) {

.video iframe {
	height: 440px;
}

}

/*---------------------------------------
   14.2 FOR MAXIMUM WIDTH 768PX              
-----------------------------------------*/

@media(max-width:769px) {

.form-bg {
    margin-top: 83px;
}

.padd-both{
	padding:0;
	}
	
.video iframe {
	height: 340px;
}

}

/*---------------------------------------
   14.3 FOR MAXIMUM WIDTH 380PX              
-----------------------------------------*/

@media(max-width:380px) {

.video iframe {
	height: 140px;
}

}

.text-green{color: #008000;}

@media screen and (min-width: 350px){
	header{background-size: inherit;}
	p {font-size: 1.5rem;}
	ul.header-list li {font-size: 1.6rem;}
}
@media screen and (min-width: 400px){
	header{background-size: inherit;}
	p {font-size: 1.5rem;}
	ul.header-list li {font-size: 1.6rem;}
}
@media screen and (min-width: 767px){
	header{background-size: inherit;}
	p {font-size: 1.5rem;}
	ul.header-list li {font-size: 1.6rem;}
}
@media screen and (min-width: 992px){
	header{background-size: inherit;
	p {font-size: 1.5rem;}
	ul.header-list li {font-size: 1.6rem;}
	}
}
@media screen and (min-width: 1366px){
	header{background-size: cover;}
}
.space{
	padding-left: 10px;
    padding-right: 10px;
}
.reviewText{
	color: green;
    font-weight: bold;
}
.banner-background{
	padding: 22px;
	background: url(../img/whitackground.jpg) center center no-repeat;
	padding-bottom: 1px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
}
.benner-text{color: #666;}