/* --------------------------------------
=========================================
VibrantGYM - Multipurpose Landing Page
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: #fed302;
	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;
	text-transform: uppercase;
}

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: #1d9ed9;
	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: #1d9ed9;
}

.gold {
	background: #f6802b;
}

.purple {
	background: #d055de;
}

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

.center-line {
	width: 60px;
	height: 2px;
	background: #f39049;
	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: #272727;
}

.gray-text {
	color: #f7f8f9;
}

.red-text {
	color: #ee2b49;
}

.blue-text {
	color: #1d9ed9;
}

.gold-text {
	color: #f6802b;
}

.purple-text {
	color: #d055de;
}

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

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

header {
	background: url(../img/bg.jpg) no-repeat fixed center center;
	padding: 30px 0;
}

/*---------------------------------------
   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: 5px;
	font-size: 1.7rem;
	font-family: 'Raleway', sans-serif;
	color: #555;
	margin: 0 0 5px;
}

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

.form-bg {
	background-color: #3051a0;
	text-align: center;
	margin-top: 0px;
	padding: 15px;
}

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

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

.form-bg input {
	background: #fff;
	border: 1px solid #d1d1d1;
	height: 30px;
	border-radius: 0px;
	font-size: 12px;
	color: #000;
	margin: 0 0 10px;
}
.form-bg select {
	background: #fff;
	border: 1px solid #d1d1d1;
	height: 30px;
	border-radius: 0px;
	font-size: 12px;
	color: #000;
	margin: 0 0 10px;
}
.form-bg button {
	background: #EA0C7B none repeat scroll 0 0;
	border: 0 solid #EA0C7B;
	border-radius: 5px;
	color: #fff !important;
	font-size: 16px;
	height: 35px;
	margin: 0 0 15px;
	width: 75%;
}

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

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

.statistics {
	background: #1d9ed9;
	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-icon4 {
	background: url(../img/icon4.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: 110px;
	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/subs.jpg) no-repeat fixed center center;
}

.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: #1d9ed9 none repeat scroll 0 0;
	border: 0 solid #ee2b49;
	border-radius: 0;
	color: #fff !important;
	font-size: 15px;
	height: 50px;
	width: 30%;
	float:left;
}

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


#newsletter-success {
	background:#1d9ed9;
	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: 10px;
}

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

}

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

@media(max-width:380px) {

.video iframe {
	height: 140px;
}

}