/* --------------------------------------
=========================================
Flat Vault - Multipurpose Landing Page
Version: 1.0
Designed By: CreativeCary
=========================================
-----------------------------------------

1. GLOABL-CSS
	1.1 GENERAL-CSS
	1.2 TYPOGRAPHY

2. MASTER COLOR SETTINGS (TO CHANGE ENTIRE THEME)
	2.1 BACKGROUND COLOR SETTINGS
	2.2 BORDER COLOR SETTINGS
	2.3 TEXT COLOR SETTINGS 

3. PRELOADER
	3.1 LOADING
	3.2 LOADING ANIMATION
	
4. SECTIONS-CSS
	4.1 SECTION WHITE
	4.2 SECTION RED
	
5. HEADER-SECTION
	5.1 HEADER TOP
	5.2 HEADER CONTENT

6. ADVERTISED-SECTION
	6.1 BASIC STYLE
	6.2 ARROW LEFT AND DOWN

7. FEATURE-SECTION
	7.1 BASIC STYLE
	7.2 FEATURE LIST
	7.3 PHONE IMAGE
	
8. DESIGNE-SECTION

9. BENIFITS-SECTION

10. CLIENT-SECTION

11. PRICE-SECTION
	11.1 BASIC STYLE
	11.2 PRICE COLUMN
	11.3 PRICE RED COLUMN
	
12. SUBSCRIBE-SECTION
	12.1 BASIC STYLE
	12.2 NEWSLETTER
	12.3 SOCIAL MEDIA

13. FOOTER-SECTION

14. RESPONSIVE FIXES
	14.1 FOR MAXIMUM WIDTH 992PX
	14.2 FOR MAXIMUM WIDTH 768PX
	14.3 FOR MAXIMUM WIDTH 380PX

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

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

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

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


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

body {
	background: #eeeff1;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px; /* PIXEL FALLBACK */
	font-size: 1.4rem;
	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               
-----------------------------------------*/
	
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'lato', sans-serif;
	color: #474c56;
}

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

h2 {
	font-size: 36px; /* PIXEL FALLBACK */
	font-size: 3.6rem;
	font-weight:bold;
	margin-top:0;
}

h3 {
	font-size: 22px; /* PIXEL FALLBACK */
	font-size: 2.2rem;
	font-weight: bold;
}
h4 {
	font-size: 26px; /* PIXEL FALLBACK */
	font-size: 2.6rem;
	font-weight: bold;
	text-transform:uppercase;
}

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

/*---------------------------------------
   2.1 BACKGROUND COLOR SETTINGS               
-----------------------------------------*/
#object,
h2.form-title,
button,
.submit-btn,
.advertised.red,
.feature-bullet,
.red-bg,
.price-bg.red,
.separator.red,
.price-bg .price-seprator.red,
.newsletter-button,
ul.icons li a{
	background:#e2574c;
	}
	
button:hover,
.submit-btn:hover,
.newsletter-button:hover,
ul.icons li a:hover{
	background:#d65348;
	text-decoration:none;
	}

/*---------------------------------------
   2.2 BORDER COLOR SETTINGS               
-----------------------------------------*/	
.logo img {
    border-color: #e2574c;
}
.verticle-line{
	  border-color: #e2574c !important;
}
.arrow-left{
	  	border-left:10px solid #e2574c !important; 
}
.arrow-down{
	border-top: 25px solid #e2574c !important; 
}

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

.price-circle span,
 a{
	color: #e2574c;
}

a:hover {
	color: #d65348;
}

/* --------------------------------------
=========================================
   3. PRELOADER
=========================================
-----------------------------------------*/

/*---------------------------------------
   3.1 LOADING               
-----------------------------------------*/

#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{
	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;
}

/*---------------------------------------
   3.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);
  }
}


/* --------------------------------------
=========================================
   4. SECTIONS-CSS
=========================================
-----------------------------------------*/

/*---------------------------------------
   4.1 SECTION WHITE               
-----------------------------------------*/

section{
	margin-top:30px;
	text-align:center;
	}
	
.white-bg {
	width:100%;
	background: #fff;
	padding-top:50px;
	padding-bottom:50px;
	float:left;
}

.separator {
	background: #fff;
	display: inline-block;
	height: 4px;
	margin-top: 21px;
	width: 80px;
}

section p {
	color: #8f96a9;
	margin: 23px 0 0;
}

/*---------------------------------------
   4.2 SECTION RED               
-----------------------------------------*/

.red-bg {
	width:100%;
	padding-top:50px;
	padding-bottom:50px;
	float:left;
}

.red-bg h2 {
	color:#FFFFFF;
	font-size: 36px; /* PIXEL FALLBACK */
	font-size:3.6rem;
	font-weight: bold;
}
.red-bg p {
	color: #fff;
}


/* --------------------------------------
=========================================
   5. HEADER-SECTION
=========================================
-----------------------------------------*/
.jumbotron {
	background: url(../img/texture.jpg);
	margin-bottom:0;
	text-align:center;
}

/*---------------------------------------
   5.1 HEADER TOP               
-----------------------------------------*/
.shadow {
	-webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5)); filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
}

.logo{
	padding-top:20px;
	text-align:center;
	}
.logo img {
    width: 200px;
    height: auto;
}
	
.social-icons-align{
	text-align:left;
}
	
.languages-align{
	text-align:right;
}

.jumbotron h1 {
	font-size: 48px; /* PIXEL FALLBACK */
	font-size: 4.8rem;
	color: #fff;
	margin-top:30px;
}

.jumbotron h1 span {
	width:380px;
	text-align:right;
}

.jumbotron h2 {
	font-size:28px; /* PIXEL FALLBACK */
	font-size:2.8rem;
	font-weight:normal;
	color: #fff;
	margin-bottom:10px;
}

.jumbotron p {
	color: #fff;
	font-size: 18px; /* PIXEL FALLBACK */
	font-size: 1.8rem;
	margin: 25px 0;
	padding: 0 100px;
}

button.view-detail  {
	width: 250px;
}

/*---------------------------------------
   5.2 HEADER CONTENT               
-----------------------------------------*/
h2.form-title {
	color: #fff;
	padding: 36px 0;
	text-align: center;
	position:relative;
}

/* --------------------------------------
=========================================
   6. ADVERTISED-SECTION
=========================================
-----------------------------------------*/

/*---------------------------------------
   6.1 BASIC STYLE               
-----------------------------------------*/
#advertised-section {
	background: #243842;
	padding: 50px 0;
	margin-top:0;
}

.advertised {
	background: #374d5b;
	height: 75px;
}

.advertised.red {
	position: relative;
}

.advertised p {
	line-height: 73px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #fff;
	width: 100%;
	margin: 0px;
	text-align: center;
}

/*---------------------------------------
   6.2 ARROW LEFT AND DOWN               
-----------------------------------------*/
.arrow-left {
	position: absolute;
	right: -10px;
	top: 23px;
	width: 0; 
	height: 0; 
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent; 
	border-left:10px solid #e2574c; 
}

.arrow-down-2 {
	width: 0; 
	height: 0; 
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 10px solid #e2574c;
	top:75px;
	left:48%;
	position:absolute;
	display:none;
}

/* --------------------------------------
=========================================
   7. FEATURE-SECTION
=========================================
-----------------------------------------*/

/*---------------------------------------
   7.1 BASIC STYLE               
-----------------------------------------*/
#feature-section{
	text-align:left;
	}

section .verticle-line {
	margin: 0;
}

/*---------------------------------------
   7.2 FEATURE LIST              
-----------------------------------------*/
.feature-list {
	padding: 0px;
	float: left;
	width: 100%;
	margin: 47px 0 0;
}

.feature-list li {
	list-style: none;
	width: 100%;
	float: left;
	margin-bottom:15px;
}

.feature-bullet {
	border-radius: 50%;
	color: #fff;
	font-size: 24px; /* PIXEL FALLBACK */
	font-size: 2.4rem;
	font-weight:bold;
	height: 45px;
	float:left;
	line-height: 44px;
	text-align: center;
	width: 45px;
}

.feature-content {
	width:70%;
	margin-left:20px;
	float:left;
}

.feature-list h3 {
	margin: 0;
}

.feature-list p {
	margin: 0px;
}

/*---------------------------------------
   7.3 PHONE IMAGE              
-----------------------------------------*/
.phone-img {
	text-align: right;
}

/* --------------------------------------
=========================================
   8. DESIGN-SECTION
=========================================
-----------------------------------------*/
.video-img {
	margin-top: 20px;
	position: relative;
}

.video {
	height: 306px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 34px;
	width: 482px;
	z-index: 0;
}

.video iframe {
	width: 100%;
	height: 306px;
}
/* --------------------------------------
=========================================
   9. BENIFITS-SECTION
=========================================
-----------------------------------------*/
.benefit .single {
	margin-top:10px;
}
.single .col-md-8{
	padding-left: 40px;
	text-align:left;
	margin-top: 7%;
}

.benefit-title{
	display:inline;
    color: #474c56;
    font-size: 16px;
	text-align:left;
}
.benifit-icon{
	display:inline;
    border-radius: 100px;
    width: 100px;
    height: auto;
}

.benifit-icon img {
	border-radius: 100%;
    width: auto;
	max-width: 100px;
    height: 100px;
}

/* --------------------------------------
=========================================
   10. CLIENT SECTION
=========================================
-----------------------------------------*/
.client-img {
	float: left;
	margin: 0px 0 0 30px;
}

.client-saying {
	float: left;
	margin: 10px 0 0 25px;
	padding: 0 0 0 29px;
	width: 75%;
	text-align:left;
    border-left: 5px solid #FFF;
}

.client-saying p {
	font-style: italic;
	margin: 0px;
}

.client-saying h3 {
	color: #fff;
	margin-bottom:0;
}

/* --------------------------------------
=========================================
   11. PRICE-SECTION
=========================================
-----------------------------------------*/

/*---------------------------------------
   11.1 PRICE COLUMN              
-----------------------------------------*/
.price-bg {
	width:100%;
	background: #fff;
	text-align:center;
	padding:50px 0;
	float:left;
}

.price-circle {
	width: 165px;
	height: 165px;
	line-height: 160px;
	background: #ededed;
	border-radius: 50%;
	color: rgb(71, 77, 86);
	display: inline-block;
	font-size: 60px; /* PIXEL FALLBACK */
	font-size: 6rem;
	font-weight: bold;
	position: relative;
	margin-bottom:20px;
}

.price-circle span {
	background: #ededed;
	border-radius: 50%;
	font-size: 30px; /* PIXEL FALLBACK */
	font-size: 3rem;
	font-weight: normal;
	height: 50px;
	left: -5px;
	line-height: 50px;
	margin: 16px 0 0;
	position: absolute;
	width: 50px;
}

.price-seprator {
	display: inline-block;
	height: 4px;
	margin: 20px 0 0;
	width: 78px;
}

ul.price-list {
	padding: 0px;
	margin: 13px 0 0;
	width: 100%;
}

ul.price-list li {
	width: 100%;
	margin: 0px;
	padding: 0px;
	list-style: none;
	color: #8f96a9;
	font-size: 18px; /* PIXEL FALLBACK */
	font-size: 1.8rem;
	line-height: 42px;
}

.price-btn{
	display: inline-block;
	margin-top: 37px;
	color: #fff;
}

/*---------------------------------------
   11.2 PRICE RED COLUMN               
-----------------------------------------*/
.price-bg.red .price-seprator {
	background: #fff;
}

.price-bg.red h4 {
	color: #fff;
}

.price-bg.red ul.price-list li {
	color: #fff;
}

.price-bg.red .price-btn {
	background: #fff;
	color: rgb(71, 77, 86);
}

.price-bg.red .price-btn:hover {
	background: #ededed;
}

.price-bg.red .price-circle span {
	background: #fff;
}

.price-bg.red .price-circle {
	background: #fff;
}
/* --------------------------------------
=========================================
   12. SUBSCRIBE-SECTION
=========================================
-----------------------------------------*/

/*---------------------------------------
   12.1 BASIC STYLE               
-----------------------------------------*/
#subscribe-bg {
	background: url(../img/texture.jpg);
	padding: 25px 0px 0px 0px;
}

#subscribe-bg h2,#subscribe-bg h3,#subscribe-bg h4 {
	color: #fff;
}

#subscribe-bg p {
	font-size:16px;
	color: #fff;
}



/*---------------------------------------
   12.2 NEWSLETTER               
-----------------------------------------*/
.newsletter {
	display: inline-block;
	margin: 28px 0;
	width: 635px;
}

.newsletter-input {
	float: left;
	border: none;
	background: #fff;
	padding: 0;
	height: 50px;
	padding: 0 10px;
	width: 76%;
	color: #8f96a9;
	font-size: 14px;
}

.newsletter-button {
	font-size: 15px;
	color: #fff;
	border: none;
	width: 24%;
	height: 50px;
	float: right;
}

.newsletter-button:hover {
	background: #d65348;
}

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


#newsletter-success {
	background:#42b089;
	color:#fff;
	padding:15px;
	margin-bottom:20px;
	display:none;
}

/*---------------------------------------
   12.3 SOCIAL MEDIA              
-----------------------------------------*/

.social {
	width: 100%;
	float: left;
}

.social p {
	color: #fff;
	width: 100%;
}

ul.icons {
	display: inline-block;
	padding: 0px;
	margin-top:10px;
}

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

ul.icons li a {
	float: left;
	height: 40px;
	width: 40px;
    color: white;
    font-weight: bold;
    text-align: center;
    padding-top: 10px;
}

ul.social-icons li a {
    font-size: 20px;
	padding-top: 6px;
}
/* --------------------------------------
=========================================
   13. FOOTER-SECTION
=========================================
-----------------------------------------*/
.copyright-section {
	background: #17262d;
	height: 100px;
}

.copyright-section p {
	width: 100%;
	padding-top:45px;
	text-align: center;
	font-size: 14px;
	color: #fff;
	margin: 0px;
}


/* --------------------------------------
=========================================
   14. RESPONSIVE FIXES
=========================================
-----------------------------------------*/

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

@media (max-width: 993px) {

.logo {
	text-align:center;
}
.logo img {
	padding: 0 0 25px;
}	

.jumbotron .verticle-line {
	border: none;
	margin: 25px 0 0;
	padding: 0;
}

.jumbotron p {
	padding: 0;
}

.languages-align{
	text-align:center;
}

.social-icons-align{
	text-align:center;
}

.single .col-md-8{
	padding-left: 0px;;
	text-align:center;
	margin-top: 0px;
}

button.view-detail {
	width: 100%;
}
.arrow-down {
	left:42%;
}
.detail-btn {
	margin: 0 0 50px;
}

.col-md-3 .advertised {
	margin:20px 0;
}
.arrow-left{
	display:none;
	}
.arrow-down-2 {
	display:block;
}
.form-title h1 {
	font-size: 23px;
}

.features-holder {
	margin: 0;
	padding: 30px 10px 0;
}

.phone-img {
	margin-top: 30px;
	text-align: center;
}

.phone-img img {
	max-width: 270px;
	width: 90%;
}

.video-img > img {
	display: none;
}

.video {
	top: 11px;
	width: 90%;
	position: relative;
}

.video iframe {
	height: 300px;
	float: left;
}

#benifits-holder p {
	padding: 13px 15px 0;
}

.client-img {
	margin: 0;
	text-align: center;
	width: 100%;
	float:none;
}

.client-img > img {
	border-bottom: 4px solid #fff;
	padding: 0 0 25px;
}

.client-saying {
	border-left: 0 none;
	margin: 0;
	padding: 20px 10px 0;
	width: 100%;
	text-align: center;
	float:none;
}

.price-btn {
	width: 90%;
}

.price-bg{
	margin:10px 0;
	}

.newsletter {
	width: 100%;
}
}

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

@media(max-width:769px) {

.logo {
	text-align:center;
}
.logo img {
	padding: 0 0 25px;
}

.jumbotron h1 {
    margin-top: 48px;
	font-size:26px;
}

.social-icons-align{
	text-align:center;
	}
	
#join-us-form {
	margin-top:50px;
}

}

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

@media(max-width:480px) {

.jumbotron h1 span {
	width:auto;
	text-align:center;
}
.newsletter-input {
	width: 66%;
}

.newsletter-button {
	width: 34%;
}

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

@media(max-width:381px) {

.arrow-down {
	left:38%;
}
    
.copyright-section p {
	padding-top:35px;
}

}