/* --------------------------------------
=========================================
Cube Consulting - Multipurpose Landing Page
Version: 1.0
Designed By: CreativeCary
=========================================
-----------------------------------------

1. GLOABL-CSS
    1.1 IMPORT GOOGLE WEBFONT               
	1.2 GENERAL-CSS
	1.3 TYPOGRAPHY

2. PRE-LOADER
    2.1 LOADER              
	2.2 LOADING ANIMATION

3. SECTION CSS
    3.1 BASIC STYLE              

4. HEADER SECTION
    4.1 HEADER LEFT              
	4.2 SUBMIT FORM
	4.3 NOTIFICATIONS


5. BRAND SECTION
    5.1 BASIC STYLE              
	
6. FEATURE SECTION
    6.1 BASIC STYLE              

7. VIDEO SECTION
    7.1 BASIC STYLE              

8. OUR CLIENTS SECTION
    8.1 BASIC STYLE              

9. FAQ SECTION
    9.1 BASIC STYLE              


10. FOOTER SECTION
    10.1 FOOTER SOCIAL 
	10.2 FOOTER COPYRIGHT             


11. RESPONSIVE FIXES
    11.1 FOR MAXIMUM DEVICE WIDTH 1200PX  
    11.2 FOR MAXIMUM DEVICE WIDTH 992PX            
    11.2 FOR MAXIMUM DEVICE WIDTH 480PX            

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

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

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

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);
/*---------------------------------------
   1.2 GENERAL - CSS               
-----------------------------------------*/

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

button {
	color: #fff;
	font-size: 18px;
	line-height: 50px;
	text-align: center;
	width: 250px;
	border: none;
}

button:hover {
	background: #d65348;
}

iframe {
	border: none;
}

/*---------------------------------------
   1.3 TYPOGRAPHY               
-----------------------------------------*/

body{
	font-family: 'Roboto Slab', serif;
}

h1 {
	font-size: 48px; /* PIXEL FALLBACK */
	font-size: 4.8rem;
	color: #fff;
}

h2, h3, h4, h5 {
	color: #000;
}

h2 {
	font-size: 36px; /* PIXEL FALLBACK */
	font-size: 3.6rem;
}
h3 {
	font-size: 22px; /* PIXEL FALLBACK */
	font-size: 2.2rem;
}

h4 {
	font-size: 26px; /* PIXEL FALLBACK */
	font-size: 2.6rem;
}

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

/* --------------------------------------
=========================================
   2. PRELOADER
=========================================
-----------------------------------------*/

/*---------------------------------------
   2.1 LOADING               
-----------------------------------------*/

#loading{
	background:#34AA54;
	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{
	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;
	background:#fff;
}

/*---------------------------------------
   2.2 LOADING 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);
  }
}

/* --------------------------------------
=========================================
   3. SECTION CSS
=========================================
-----------------------------------------*/

/*---------------------------------------
   3.1 BASIC STYLE             
-----------------------------------------*/

section {
	padding: 70px 0 70px 0;
	text-align:center;
}

section h2 {
	margin: 0;
}

.seprator {
	display: inline-block;
	width: 100px;
	height: 2px;
	margin: 26px 0;
	background: #2980b9;
}

/* --------------------------------------
=========================================
   4. HEADER SECTION
=========================================
-----------------------------------------*/

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

#header-section {
	/*background: #2980b9;*/
	background: #34AA54;	
	color: #fff;
	text-align:left;
}

#header-section h1 {
	margin-top: 48px;
}

#header-section p {
	font-size: 18px; /* PIXEL FALLBACK */
	font-size: 1.8rem;
	color:#fff;
}

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

ul.header-list li {
	background: url("../img/check.png") no-repeat 0 8px;
	font-size: 18px; /* PIXEL FALLBACK */
	font-size: 1.8rem;
	line-height: 26px;
	list-style: outside none;
	margin-bottom: 26px;
	padding-left: 10px;
	text-align:left;
}

/*---------------------------------------
   4.2 SUBMIT FORM              
-----------------------------------------*/

.submit-form-position{
	position:absolute;
	top:-85px;
	}
	
.submit-form-position img{
	max-width:364px;
	width:100%;
	}
	
.submit-form {
	background: #f6f6f6;
	padding: 0 20px 43px;
	width:100%;
	float:left;
	border-radius: 15px;
}

.submit-form h3 {
    margin: 44px 0 20px;
	text-align: center !important;
    font-weight: bold;

}

.submit-form p {
	color: #000 !important;
	margin: 30px 0 0;
	padding: 0;
	text-align: center;
	width: 100%;
}

.submit-form input {
	background: #fff;
	border: none;
	color: #000;
	height: 48px;
	margin-bottom:22px;
	padding: 0 15px;
	width: 100%;
    border-radius: 0;
    -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,.075);
    box-shadow: inset 0 0 0 rgba(0,0,0,.075);
}

.submit-form button{
	width: 100%;
	margin: 0px;
	padding: 0px;
	height: 55px;
	background: #2b5d91;
	color: #fff;
	border: none;
}

.submit-form button:hover{
	background: #e22525;
}

/*---------------------------------------
   4.3 NOTIFICATIONS          
-----------------------------------------*/
#notifications {
    position: absolute;
    width: 100%;
    bottom: 392px;
    left: 0px;
}
.error {
    background: #d12323;
    color: #fff;
    text-align: center;
    line-height: 70px;
    margin-bottom: 15px;
}
	
.success{
	background:#42b089;
    color: #fff;
    text-align: center;
    line-height: 70px;
    margin-bottom: 15px;
	}

/* --------------------------------------
=========================================
   5. BRANDS SECTION
=========================================
-----------------------------------------*/

/*---------------------------------------
   5.1 BASIC STYLE           
-----------------------------------------*/

#brands-section h3 {
	font-weight: bold;
	margin: 0 0 30px;
	text-align:left;
}

.brand-logo {
	width:48%;
	display:inline-block;
	/*background: #f6f6f6;*/
	line-height: 90px;
	text-align: center;
	margin-bottom:20px;
}

.brand-logo.padd-right {
	margin-right:3%;
}

/* --------------------------------------
=========================================
   6. FEATURES SECTION
=========================================
-----------------------------------------*/

/*---------------------------------------
   6.1 BASIC STYLE            
-----------------------------------------*/

#feature-section {
	padding-top: 140px;
}

.feature {
	margin-top: 38px;
}

.feature h3 {
	font-weight: bold;
}
/* --------------------------------------
=========================================
   7. VIDEO SECTION
=========================================
-----------------------------------------*/

/*---------------------------------------
   7.1 BASIC STYLE            
-----------------------------------------*/

#video-section {
	background: #f6f6f6;
}

.video {
	margin-top: 38px;
	border:none;
}

.video iframe {
	width: 100%;
	float: left;
	height: 550px;
}

/* --------------------------------------
=========================================
   8. CLIENT SECTION
=========================================
-----------------------------------------*/

/*---------------------------------------
   8.1 BASIC STYLE            
-----------------------------------------*/

.client {
    margin-top: 112px;
    display: inline-block;
}

.client-img {
	margin: -75px 0 20px;
	text-align: center;
}

.client-inner {
	width: 100%;
	float: left;
	background: #f6f6f6;
	padding-bottom:20px;
}

.client-inner p {
	color: #666666;
	font-style: italic;
	line-height: 26px;
	padding:0 10px;
	text-align: center;
}

.client-inner p.normal {
	font-style: normal;
}

.client-inner h3 {
	text-align: center;
	font-weight: bold;
}

/* --------------------------------------
=========================================
   9. FAQ SECTION
=========================================
-----------------------------------------*/	

/*---------------------------------------
   4.1 BASIC STYLE            
-----------------------------------------*/

#faq-section {
	background: #f6f6f6;
}

.questions {
	text-align:left;
}

.questions h3 {
	font-weight: bold;
}

.questions p {
	color: #666666;
}
/* --------------------------------------
=========================================
   10. FOOTER SECTION
=========================================
-----------------------------------------*/

/*---------------------------------------
   10.1 FOOTER SOCIAL            
-----------------------------------------*/

#footer-section {
	background: #303d4a;
	padding:25px 0;
	text-align:center;
}

ul.footer-social-icons {
	display: inline-block;
	padding: 0px;
}

ul.footer-social-icons li {
	display:inline-block;
	margin: 0px 10px;
	list-style: none;
}

/*---------------------------------------
   10.2 FOOTER COPYRIGHT           
-----------------------------------------*/

#footer-section p {
	color: #fff;
	font-size: 14px;
	width: 100%
}

/* --------------------------------------
=========================================
   11. RESPONSIVE FIXES
=========================================
-----------------------------------------*/

/*---------------------------------------
   11.1 FOR MAXIMUM DEVICE WIDTH 1200PX            
-----------------------------------------*/

@media only screen and (max-width:1199px) {

.submit-form-position{
	top:-22px;
	}
	
}

/*---------------------------------------
   11.1 FOR MAXIMUM DEVICE WIDTH 992PX            
-----------------------------------------*/

@media only screen and (max-width:991px) {

.submit-form-position{
	position:relative;
	top:0;
}
	
#faq-section {
	text-align:left;
}

.video iframe {
	height: 450px;
}

}

/*---------------------------------------
   11.1 FOR MAXIMUM DEVICE WIDTH 480PX            
-----------------------------------------*/

@media only screen and (max-width:480px) {

.brand-logo {
	width:100%;
}

.video iframe {
	height: 250px;
}

}

.certs{
	padding-top: 140px;
}