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

=========================================

LandX - Responsive App Landing Page

Version: 1.0 (Initial Release)

Designed By: Mizanur Rahman

=========================================



1. IMPORT CSS



2. GLOBAL STYLES (USED IN VARIOUS SECTION OF THE WEBSITE)

	2.1 GENERAL STYLES

	2.2 PRE LOADER

	2.3 ANCHOR AND BOLD TEXT  



3. COMPONENTS (ELEMNTS USED IN MANY SECTION)

	3.1 BACKGROUND COLORS AND LINE

	3.2 TYPOGRAPHY

	3.3 BUTTONS



4. SECTION STYLES AND COMPONENTS

	4.1 SECTIONS PADDING AND COLOR OVERLAY



	4.2 SECTION: HOME

		4.2.1 BASIC STYLES

		4.2.2 NAVIGATION 

		4.2.3 FEATURE LIST 

		4.2.4 VERTICAL REGISTRATION FORM



	4.3 SECTION: WITH LEFT / RIGHT SCREENSHOT

		4.3.1 BASIC STYLES   

		4.3.2 FEATURE LIST    



	4.4 SECTION: FEATURES 



	4.5 SECTION: PRICING TABLE 



	4.6 SECTION: VIDEO   

		4.6.1 BASIC STYLE / RESET

		4.6.2 VIDEO FEATURES 



	4.7 SECTION: SCREENSHOTS 

	

	4.8 SECTION: CLIENTS AND FEEDBACKS

		4.8.1 CLIENTS LOGO 

		4.8.2 FEEDBACKS



	4.9 SECTION: CALL TO ACTION

		4.9.1 CALL TO ACTION WITH TEXT/BUTTON 

		4.9.2 SUBSCRIBE FORM 



	4.10 SECTION: CONTACT US

		4.10.1 BASIC STYLES

		4.10.2 CONTACT FORM   





	4.11 SECTION: FOOTER   



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



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

   1. IMPORT GOOGLE WEB FONTS                

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



@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic|Raleway:500,600,700);



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

=========================================

   2. GLOBAL STYLES

=========================================

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



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

   2.1 GENERAL STYLES                

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



html {

	font-size: 100%;

}



body {

	background: #ffffff;

	font-family: 'Source Sans Pro', sans-serif;

	font-size: 16px;

	color: #727272;

	line-height: 25px;

	text-align: center;

	overflow-x: hidden !important;

	margin: auto !important;

}



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

   2.2 PRE LOADER              

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

.preloader {

	position: fixed;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	background-color: #fefefe;

	z-index: 99999;

	height: 100%;

	width: 100%;

	overflow: hidden !important;

}



.status {

	width: 40px;

	height: 40px;

	position: absolute;

	left: 50%;

	top: 50%;

	background-image: url(../images/loading.gif);

	background-repeat: no-repeat;

	background-position: center;

	-webkit-background-size: cover;

	background-size: cover;

	margin: -20px 0 0 -20px;

}



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

   2.3 ANCHOR AND BOLD TEXT           

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

a {

	text-decoration: none;

	-webkit-transition: all ease 0.25s;

	transition: all ease 0.25s;

}



a:hover {

	text-decoration: underline;

}



a:focus {

	outline: inherit;

	color: inherit;

}



strong {

	font-weight: normal;

}



.strong {

	font-weight: normal;

}





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

   2.4 MISC FIXES         

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

@-webkit-viewport {

	width: device-width;

}



@-moz-viewport {

	width: device-width;

}



@-ms-viewport {

	width: device-width;

}



@-o-viewport {

	width: device-width;

}



@viewport {

	width: device-width;

}



*,

*:before,

*:after {

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

}



ul,

ol {

	padding-left: 0 !important;

}



li {

	list-style: none;

}



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

=========================================

   3. COMPONENTS 

=========================================

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



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

   3.1 BACKGROUND COLORS AND LINE               

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



.dark-bg {

	background: #323232;

	color: #ffffff;

}



.color-bg {

	color: #ffffff;

}



.bgcolor-2 {

	background-color: #EFEFF0;

}



.bgcolor-white {

	background: #ffffff;

}



.colored-line {

	height: 1px;

	width: 70px;

	margin: auto;

	margin-top: 10px;

	margin-bottom: 10px;

}





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

   3.2 TYPOGRAPHY               

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

h1,

h2,

h3,

h4,

h5,

h6 {

	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;

	color: #323232;

	margin-bottom: 0;

	margin-top: 0;

}



h1 {

	font-size: 2.813rem;

	line-height: 3.75rem;

	font-weight: 500;

}



h2 {

	font-size: 27PT;

	line-height: 3.125rem;

	font-weight: 500;

}



h3 {

	font-size: 1.5rem;

	line-height: 2.375rem;

	font-weight: 600;

	padding-bottom: 20px;

}



h4 {

	font-size: 1.25rem;

	line-height: 2rem;

	font-weight: 600;

}



h5 {

	font-size: 18px;

	line-height: 28px;

	font-weight: 700;

}



h6 {

	font-size: 17px;

	line-height: 25px;

	font-weight: 700;

}





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

   3.3 BUTTONS               

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

.btn:focus,

.btn:active,

.btn,

.open .dropdown-toggle.btn {

	outline: inherit;

	border: medium solid #ffffff;

}



.standard-button {

	font-family: 'Raleway', sans-serif;

	font-size: 16px;

	font-weight: 700;

	text-transform: uppercase;

	border-radius: 3px;

	padding: 15px 30px;

	border: thin solid #ffffff;

	margin: 5px;

	line-height: inherit;

	-webkit-transition: all ease 0.25s;

	transition: all ease 0.25s;

}



.secondary-button {

	font-family: 'Raleway', sans-serif;

	font-size: 16px;

	font-weight: 700;

	text-transform: uppercase;

	border-radius: 3px;

	padding: 15px 30px;

	border: 0;

	margin: 5px;

	border: thin solid #ffffff;

	color: #ffffff;

	line-height: inherit;

	-webkit-transition: all ease 0.25s;

	transition: all ease 0.25s;

}



.secondary-button-white {

	font-family: 'Raleway', sans-serif;

	font-size: 16px;

	font-weight: 700;

	text-transform: uppercase;

	border-radius: 3px;

	padding: 14px 30px;

	border: 0;

	margin: 5px;

	border: 1px solid #727272;

	color: #ffffff;

	background: transparent;

	line-height: inherit;

	border: 1px solid rgba(255,255,255,0.5)

	-webkit-transition: all ease 0.25s;

	transition: all ease 0.25s;

}



.secondary-button-white:hover {

    border: 1px solid rgba(255,255,255,1);

    color: #ffffff;

}



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

=========================================

   4. SECTION SPECIFIC CSS

=========================================

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



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

   4.1 SECTIONS PADDING AND COLOR OVERLAY                

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

.section1,

.section2,

.section3,

.section4,

.section5,

.section6,

.section7 {

	/* [disabled]padding-top: 100px; */

	/* [disabled]padding-bottom: 100px; */

}



.color-overlay {

	background: rgba(0, 0, 0, 0.6);

}





/*========================================

   4.2 SECTION: HOME                

==========================================*/



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

   4.2.1 BASIC STYLES               

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

header {

	background: url(../images/bg-image-1.jpg) no-repeat center top fixed;

	-webkit-background-size: cover;

	background-size: cover;

}



header .vertical-registration-form {

	margin-top: 60px;

}



.navigation-header {

	padding-top: 47px;

	padding-bottom: 30px;

}



.intro-section {

	margin-top: 100px;

	margin-bottom: 137px;

}



.intro {

	color: #ffffff;

}



.intro-section .sub-heading {

	font-size: 32px;

	padding-right: 10%;

	padding-left: 10%;

	color: #ffffff;

	margin-top: 40px;

	line-height: 30px;

}



.button-container {

    margin-top: 75px;

    margin-bottom: 25px;

}



.navbar-header img {

	max-height: 26px;

}





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

   4.2.2 NAVIGATION                

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

/* NAV RESETS */

.navbar-nav > li > a:hover {

	background: inherit;

}



/* NORMAL NAVIGATION WITH SOCIAL ICON AND LOGO ONLY */

.non-sticky .navbar-nav.navbar-right:last-child {

	margin-right: 0;

}



.non-sticky .navbar-nav > li > a {

	font-size: 25px;

	padding: 0;

	padding-left: 5px;

	padding-top: 3px;

	color: #ffffff;

}



/* STICKY NAVIGATION */

.sticky-navigation {

	min-height: 75px;

	background: #ffffff;

	-webkit-backface-visibility: hidden;

	border: 0;

	-webkit-box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.08);

	box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.08);

}



.sticky-navigation .navbar-header {

	padding-top: 8px;

}



.sticky-navigation .main-navigation {

	padding-top: 13px;

}



.sticky-navigation .main-navigation .current a {

	-webkit-backface-visibility: hidden;

	outline: inherit;

	position: relative;

}



.sticky-navigation .navbar-nav > li > a {

	font-family: 'Raleway', sans-serif;

	font-size: 13px;

	text-transform: uppercase;

	font-weight: 600;

	color: #323232;

}





/*========================================

   4.3 SECTION WITH LEFT / RIGHT SCREENSHOT             

==========================================*/

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

   4.3.1 BASIC STYLES               

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

.side-screenshot,

.side-screenshot2 {

	max-width: 532px;

}



.brief h2 {

	margin-top: 0;

	margin-bottom: 10px;

}



.brief p {

	margin-top: 45px;

}



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

   4.3.2 FEATURE LIST               

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



.feature-list-2 {

	margin-top: 25px;

}



.feature-list-2 li {

	overflow: auto;

	padding-top: 12px;

	padding-bottom: 12px;

}



.feature-list-2 li .icon-container {

	width: 32px;

	height: 32px;

	border-radius: 3px;

	color: #ffffff;

	line-height: 32px;

	margin-right: 15px;

	margin-top: 5px;

	text-align: center;

}



.feature-list-2 li .details {

	width: 89%;

}



.feature-list-2 li .details p {

	margin-top: 5px;

}





/*========================================

   4.4 SECTION: FEATURES                

==========================================*/

.features {

	margin-top: 35px;

}



.feature {

	margin-top: 40px;

	margin-bottom: 35px;

}



.feature .icon {

	font-size: 50px;

	margin-bottom: 30px;

}



.feature h4 {

	margin-bottom: 10px;

}





/*========================================

   4.5 SECTION: PRICING TABLE               

==========================================*/

.pricing-table {

	margin-top: 35px;

}



.package {

	overflow: auto;

	border: 1px solid #e5e5e5;

	border-radius: 3px;

	margin-top: 40px;

}



.package .header {

	padding-top: 20px;

	padding-bottom: 20px;

}



.package .header h3 {

	color: #ffffff;

}



.package-features .column-9p {

	width: 90%;

	float: left;

	text-align: left;

}



.package-features .column-1p {

	width: 10%;

	float: right;

	text-align: right;

	color: #323232;

}



.package-features .column-7p {

	width: 60%;

	float: left;

	text-align: left;

}



.package-features .column-3p {

	width: 40%;

	float: right;

	text-align: right;

}



.package-features ul li {

	overflow: auto;

	padding-top: 12px;

	padding-bottom: 12px;

	padding-right: 35px;

	padding-left: 35px;

	border-bottom: 1px dotted #e3e3e3;

}



.package-features .bottom-row {

	overflow: auto;

	padding-top: 8px;

	padding-bottom: 17px;

	padding-right: 35px;

	padding-left: 35px;

}



.package-features .bottom-row h6 {

	padding-top: 5px;

}



.package-features .bottom-row .secondary-button,

.package-features .bottom-row .standard-button {

	margin: 0;

	padding: 7px 15px;

	vertical-align: middle;

}





/*========================================

   4.6 SECTION: VIDEO              

==========================================*/

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

   4.6.1 BASIC STYLE / RESET         

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

video {

	max-width: 100%;

	height: auto;

}



iframe,

embed,

object {

	max-width: 100%;

}



.video-container {

	width: 100%;

	background: #ffffff !important;

	margin-top: 75px;

}



.video {

	background: #ffffff !important;

}





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

   4.6.2 VIDEO FEATURES         

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

.video-features {

	margin-top: 40px;

}



.video-features .inline-icon {

	padding-right: 5px;

}





/*========================================

   4.7 SECTION: SCREENSHOTS              

==========================================*/

.screenshots {

	margin-top: 68px;

}



.shot {

	margin: 10px;

	border-radius: 3px;

	border: 5px solid #ffffff;

}



.shot img {

	max-width: 100%;

	width: 100%;

}



.shot img:hover {

	cursor: crosshair;

	opacity: 0.8;

}





/*========================================

   4.8 SECTION: CLIENTS AND FEEDBACKS              

==========================================*/

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

   4.8.1 CLIENTS LOGO        

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

.clients {

	margin-top: 35px;

}



.client-logos li {

	display: inline-block;

	vertical-align: middle;

	margin: 15px;

}



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

   4.8.2 FEEDBACKS        

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



.testimonials {

	margin-top: 15px;

}



.single-feedback {

	position: relative;

	margin-top: 20px;

}



.single-feedback .client-pic {
	width: 210px;
	height: 40px;
	margin: auto;
	position: relative;
	margin-bottom: -24px;
	z-index: 999;
	border: 3px solid #ffffff;
	box-shadow: 0px 0px 0px 3px #f7f8fa;

}



.single-feedback .client-pic img {

	max-width: 200%;

}



.single-feedback .box {

	margin-right: 15px;

	margin-left: 15px;

	border-radius: 3px;

	position: relative;

	background-color: #EFEFF0;

	padding-top: 20px;

	-webkit-box-shadow: 0px 1px 0px 0px #c0c2c2;

	-moz-box-shadow: 0px 1px 0px 0px rgba(229, 229, 229, 0.75);

	box-shadow: 0px 1px 0px 0px #c0c2c2;

}



.single-feedback .box .message {

	padding: 25px;

	font-style: italic;

}



.single-feedback .box:after,

.single-feedback .box:before {

	top: 100%;

	left: 50%;

	border: solid transparent;

	content: " ";

	height: 0;

	width: 0;

	position: absolute;

	pointer-events: none;

}



.single-feedback .box:after {

	border-color: rgba(247, 248, 250, 0);

	border-top-color: #f7f8fa;

	border-width: 15px;

	margin-left: -15px;

}



.single-feedback .box:before {

	border-color: rgba(229, 229, 229, 0);

	border-top-color: #e5e5e5;

	border-width: 16px;

	margin-left: -16px;

}



.single-feedback .client-info {

	margin-top: 30px;

}



.single-feedback .client-info .client-name {

	line-height: 20px;

}



.single-feedback .client-info .company {

	font-size: 16px;

}





/*========================================

   4.9 SECTION: CALL TO ACTION              

==========================================*/

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

   4.9.1 CALL TO ACTION WITH TEXT/BUTTON          

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

.cta-section {

	background: url(../images/bg-image-2.jpg) no-repeat center fixed;

	-webkit-background-size: cover;

	background-size: cover;

}



.cta-section h4 {

	color: #ffffff;

}



.cta-section h2 {

	color: #ffffff;

	font-weight: 700;

	margin-top: 15px;

	margin-bottom: 40px;

}



.cta-section h3 {

	color: #ffffff;

}



.cta-section .color-overlay {

	padding-top: 175px;

	padding-bottom: 175px;

}





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

   4.9.2 SUBSCRIBE FORM           

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

.subscribe-section {

	margin-top: 75px;

}



.subscription-form .input-box {

	width: 300px;

	margin-top: 25px;

	margin-bottom: 25px;

	height: 55px;

	border-radius: 3px;

	font-size: 16px;

	color: #000000;

	box-shadow: inherit;

}



.subscription-success,

.subscription-error {

    color: #FFFFFF;

}



/*========================================

   4.10 SECTION: CONTACT US             

==========================================*/

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

   4.10.1 BASIC STYLES        

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

.contact-us {

	padding-top: 75px;

	padding-bottom: 75px;

	background-color: #E2E3DD;

}



.contact-us .heading {

	margin-bottom: 10px;

}



.contact-link {

	font-weight: 700;

	text-transform: uppercase;

	margin-top: 50px;

	font-family: 'Raleway', sans-serif;

}



.contact-link:hover {
	text-decoration: none;
	font-size: large;
	margin-top: 5px;
	color: #FF0204;

}



.contact-link span {

	margin-right: 10px;

}





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

   4.10.2 CONTACT FORM        

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

.contact-form {

	margin-top: 25px;

}



.contact-form .success,

.contact-form .error {

	display: none;

}



.contact-form .input-box,

.contact-form .textarea-box {

	margin-bottom: 15px;

	margin-top: 15px;

	outline: 0;

	border: 0;

	-webkit-box-shadow: none;

	box-shadow: none;

	border: 1px solid #e3e3e3;

	border-radius: 3px;

	color: #727272;

	padding-left: 12px;

	font-size: inherit;

	line-height: auto;

}



.contact-form .input-box {

	min-height: 50px;

}



.contact-form .textarea-box {

	min-height: 200px;

	-webkit-backface-visibility: hidden;

}



.contact-form .input-box:active,

.contact-form .textarea-box:active,

.contact-form .input-box:focus,

.contact-form .textarea-box:focus {

	color: #323232;

}



.contact-form .btn {

	margin-top: 25px;

	border: thin solid #8e8686;

	background-color: #CBCBCB;

}





/*========================================

   4.11 SECTION: FOOTER             

==========================================*/

footer {

	padding-top: 75px;

	padding-bottom: 75px;

}



.footer-logo {

	max-width: 180px;

	margin: auto;

}



.copyright {

	margin-top: 15px;

	margin-bottom: 15px;

}



.social-icons li {

	display: inline;

	margin: 2px;

}



.social-icons li a {

	font-size: 25px;

	color: #919191;

}



.social-icons li a:hover {

	text-decoration: none;

}

#section1 {

	background-color: #FFFFFF;

	padding-top: 75px;

	padding-bottom: 60px;

}

#section3 {

	background-color: #ffffff;

	padding-top: 90px;

	padding-bottom: 100px;

}

#section4 .container .sub-heading {

	font-size: 18pt;

}

.subscribe-section .contact-link.expand-form {

	text-decoration-color: #ffffff;

}

.contact-link {

	text-decoration-color: #ffffff;

}

.expanded-contact-form #contact #cf-submit {

}

.contact-form .btn:active :hover {

	border: medium solid #8e8686;

}

.contact-form .btn:focus {

	border: medium solid #8e8686;

}

.section2, .section3, .section4, .section5 {

	padding-top: 70px;

	padding-right: 0px;

	padding-left: 0px;

	padding-bottom: 60px;

}

#section2 {

	background-color: #EFEFF0;

	padding-bottom: 90px;

	padding-top: 90px;

}

#section5 .container .sub-heading {
	font-size: 20pt;

}

#section1 .container .sub-heading {

	font-size: x-large;

}

#section3 .col-md-6 .brief.text-center h2 {

	width: 50%;

}

#section6 .container .sub-heading {

	font-size: x-large;

	padding-top: 10px;

}