/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : App Launch - App Landing page HTML5 Template
* File          : App Launch main CSS file
* Version       : 2.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. General css
02. Navigation area css
03. Slider area css
04. Feature area css
05. Benefits area css
06. Screenshot Slider area css
07. How it Work area css
08. Pricing area css
09. Testimonial area css
10. Application info & Download area Css
11. Stay Updated area css
12. Footer area css
13. Media Screens
-------------------------------------------------------------------------------------- */

/************************************/
/***** 	   01. General css		 ****/
/************************************/

body{
	font-size: 16px;
	font-family: 'Montserrat', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6{
	margin-top:0;
	font-weight: 700;
}

img{
	max-width: 100%;
}

a:hover{
	text-decoration: none;
	outline: 0;
}

a:focus{
	text-decoration: none;
	outline: 0;
}

.preloader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #3dabaf;
	background: linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -webkit-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -moz-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -o-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	z-index: 9999;
}

.sk-wave{
	width: 50px;
	height: 40px;
	text-align: center;
	font-size: 10px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -20px;
	margin-left: -25px;
}

.sk-wave .sk-rect{
	background-color: #fff;
	height: 100%;
	width: 6px;
	display: inline-block;
	-webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
	-moz-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
	animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
}

.sk-wave .sk-rect1{
	-webkit-animation-delay: -1.2s;
	-moz-animation-delay: -1.2s;
	animation-delay: -1.2s;
}

.sk-wave .sk-rect2{
	-webkit-animation-delay: -1.1s;
	-moz-animation-delay: -1.1s;
	animation-delay: -1.1s;
}

.sk-wave .sk-rect3{
	-webkit-animation-delay: -1s;
	-moz-animation-delay: -1s;
	animation-delay: -1s;
}

.sk-wave .sk-rect4{
	-webkit-animation-delay: -0.9s;
	-moz-animation-delay: -0.9s;
	animation-delay: -0.9s;
}

.sk-wave .sk-rect5{
	-webkit-animation-delay: -0.8s;
	-moz-animation-delay: -0.8s;
	animation-delay: -0.8s;
}

.btn-custom{
	border: 2px solid;
	display: inline-block;
	font-size: 18px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 10px;
	min-width: 176px;
	text-align: center;
}

.btn-custom i{
	margin-right: 6px;
}

.btn-fill{
	position: relative;
	box-shadow: 0 0 1px transparent;
	transform: perspective(1px) translateZ(0);
	-webkit-transform: perspective(1px) translateZ(0);
	-webkit-transition-property: color;
	transition-property: color;
	transition: color 0.3s;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.btn-fill:before{
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	-webkit-transform-origin-x: 0px;
	-webkit-transform-origin-y: 50%;
}

.btn-fill:hover{
	color: #fff;
}

.btn-fill:hover:before{
	-webkit-transform: scaleX(1);
    transform: scaleX(1);
}

/************************************/
/***** 02. Navigation area css  *****/
/************************************/

.navbar{
	margin-bottom: 0;
}

.navbar-brand{
	padding: 32px 15px 0;
	height: auto;
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
}

.navbar-brand h1{
	font-size: 34px;
	margin: 0;
	text-transform: uppercase;
	color: #fff;
	font-weight: 700;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

.navbar-default{
	background: none;
	border: none;
	border-bottom: none;
	border-radius: 0;
	z-index: 101;
	padding: 0;
	transition: all 1s;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
}

.navbar-nav li{
	padding: 40px 0;
	margin:0 2px;
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
}

.nav li{
    position: relative;
}


.navbar-default .navbar-nav>li>a{
	font-weight: 300;
	font-size: 14px;
	text-transform: uppercase;
	color: #fff;
	letter-spacing: 0.05em;
	padding: 6px 16px 6px; 
	position: relative;
	border: 1px solid transparent;
}

.nav ul{
	display: none;
	padding: 0;
	min-width: 214px;
	list-style: none;
    position: absolute;
	top: 100%;
	left: 0;
	background: #3dabaf;
	background: linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -webkit-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -moz-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -o-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	margin-top: 0px;
}

.nav ul li{
	transition: all 0.4s;
	margin: 0;
}

.nav ul li:hover{
	background: rgba(255,255,255,0.14);
}

.nav li:hover a{
	border: 1px solid rgba(255,255,255,0.5);
}

.nav ul li a{
	border: none !important;
}

.nav .active a{
	background: none !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,0.5) !important;
	transition: all 0.3s;
}

.nav ul li a{
	display: block;
	color: #fff;
	padding: 12px 20px;
}

.nav .active ul li a{
	border: none !important;
}

.nav ul ul{
	left: 100%;
	top: 0;
	margin-top: -1px;
}

.nav ul li{
	padding: 0;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 1px solid rgba(255,255,255,0.12);
}

.nav ul li:last-child{
	border-bottom: none;
}

.sticky-header{
	background: #3dabaf;
	background: linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -webkit-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -moz-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -o-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
}

.sticky-header .navbar-brand{
	padding-top: 22px;
}

.sticky-header .navbar-nav>li{
	padding: 25px 0;
}

.sticky-header .navbar-brand h1{
	color: #fff;
}


.navbar-default .navbar-nav>li>a:hover{
	color: #fff;
}

.navbar-default .navbar-nav>li>a:focus{
	color: #fff;
}

.sticky-header .navbar-nav>li>a{
	color: #fff;
}

/************************************/
/*****   03. Slider area css    *****/
/************************************/

.banner{
	position: relative;
	top: 0px;
	left: 0;
	width: 100%;
	background: #3dabaf;
	background: linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -webkit-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -moz-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -o-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	padding: 160px 0 130px;
}

.banner:before{
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../images/header-curve.png) no-repeat bottom center;
	background-size: 100% auto;
}

.banner:after{
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../images/launch-gradient.png) no-repeat center center;
}

.banner .row{
	position: relative;
	z-index: 1;
}

.watermark-image{
	margin-bottom: 50px;
}

.header-content{
	padding-top: 40px;
}

.header-content p{
	font-size: 30px;
	color: #fff;
	font-weight: 500;
}

.btn-header{
	position: relative;
	display: inline-block;
	color: #fff;
	background: #3dabaf;
	background: linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -webkit-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -moz-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -o-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	padding: 10px 20px 8px 70px;
	font-size: 24px;
	font-weight: 500;
	min-width: 236px;
	border: 1px solid #54d4c0;
	margin-right: 30px;
	transition: all 0.3s linear;
}

.btn-header span{
	font-size: 13px;
	font-weight: 400;
	display: block;
}

.btn-header i{
	font-size: 40px;
	position: absolute;
	top: 16px;
	left: 20px;
}

.btn-header:focus,
.btn-header:hover{
	border: 1px solid #fff;
	color: #fff;
}

.download-button{
	margin-top: 40px;
}

.slider-image{
	text-align: right;
}

/************************************/
/*****   04. Feature area css   *****/
/************************************/

.features{
	background: #222327;
	padding: 100px 0;
}

.section-title{
	margin-bottom: 60px;
}

.section-title h2{
	color: #222327;
	font-size: 40px;
	text-align: center;
	font-weight: 600;
	line-height: 1.2em;
}

.features .section-title h2{
	color: #2dcda5;
}

.feature-tagline{
	margin-bottom: 40px;
}

.feature-tagline p{
	text-align: center;
	color: #c0bbbb;
	line-height: 1.5em;
}

.feature-single{
	text-align: center;
	margin-bottom: 30px;
}

.feature-single .icon-box{
	color: #fff;
	font-size: 100px;
	padding: 30px 0;
}

.feature-single h3{
	font-size: 26px;
	font-weight: 600;
	color: #34dca2;
	text-transform: uppercase;
	margin-bottom: 40px;
}

.feature-single p{
	color: #c0bbbb;
	font-size: 14px;
	line-height: 1.5em;
}

/************************************/
/*****   05. Benefits area css  *****/
/************************************/

.benefits{
	position: relative;
}

.benefits-image-cover{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100%;
	margin-top: -160px;
	max-width: 1170px;
	transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	-moz-transform: translate(-50%,0);
	-o-transform: translate(-50%,0);
}

.benefits-image{
	width: 33.33%;
	position: absolute;
	top: 50%;
	right: 0;
	z-index: 1;
	transform: translate(0,-50%);
	-webkit-transform: translate(0,-50%);
	-moz-transform: translate(0,-50%);
	-o-transform: translate(0,-50%);
}

.boost-app{
	padding:100px 0;
}

.benefits-entry{
	position: relative;
	z-index: 2;
}

.benefits-entry h2{
	font-size: 40px;
	font-weight: 600;
	color: #222327;
	line-height: 1.2em;
	margin-bottom: 40px;
}

.benefits-entry p{
	color: #727374;
	font-size: 14px;
	line-height: 1.5em;
}

.benefits-feature{
	padding: 200px 0;
	position: relative;
	margin-bottom: -11em;
}

.benefits-feature:before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #3dabaf;
	background: linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -webkit-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -moz-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -o-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	transform: skewY(-10deg);
	-webkit-transform: skewY(-10deg);
	-moz-transform: skewY(-10deg);
	-o-transform: skewY(-10deg);
}

.benefits-feature:after{
	content: '';
	display: block;
	position: absolute;
	top: calc(100% - 11em);
	left: 0;
	right: 0;
	height: 100%;
	background: #fff;
}

.benefits-single{
	position: relative;
	z-index: 2;
}

.benefits-feature ul{
	padding: 0;
	margin: 0 0 60px;
	list-style: none;
}

.benefits-feature ul li{
	font-size: 25px;
	color: #fff;
	font-weight: 300;
	line-height: 1.4em;
	margin-bottom: 30px;
	padding-left: 60px;
	position: relative;
}

.benefits-feature ul li:before{
	content: '\f00c';
	font-family: FontAwesome;
	position: absolute;
	top: 3px;
	left: 0;
}

/******************************************/
/***** 06. Screenshot Slider area css *****/
/******************************************/

.screenshot{
	padding: 100px 0;
	position: relative;
	background: #f8f8f8;
}

.screenshot-slider{
	position: relative;
	padding-top: 1.9%;
}

.screenshot-phone{
	position: absolute;
	top: 0;
	left: 50%;
	width: calc(20% + 5%);
	cursor: pointer;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	text-align: center;
	z-index: 100;
}

.screenshot-phone img{
	width: 100%;
}

.screenshot-single p{
	padding-top: 60px;
	position: relative;
	width: 140%;
	margin-left: -20%;
	text-align: center;
	font-size: 14px;
	color: #595757;
	line-height: 1.5em;
	opacity: 0;
	transition: all 0.5s;
}


.screenshot-slider .center .screenshot-single p{
	opacity: 1;
}

.screenshot-single img{
	border-radius: 16px;
}

.screenshot-slider .owl-nav{
	text-align: center;
	padding-top: 30px;
}

.screenshot-slider .owl-nav .owl-next,
.screenshot-slider .owl-nav .owl-prev{
	font-size: 33px;
	color: #222327;
	display: inline-block;
	margin: 0 60px;
}

.screenshot-slider .owl-nav .owl-next{
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	position: relative;
	top: -1px;
}

/******************************************/
/*****   07. How it Work area css     *****/
/******************************************/

.how-work{
	padding: 100px 0;
	background: #222327;
}

.how-work .section-title{
	margin-bottom: 100px;
}

.how-work .section-title h2{
	color: #fff;
}

.nav-tabs{
	border-bottom: none;
	margin-bottom: 30px;
}

.how-work .nav>li{
	width: 25%;
}

.how-work .nav>li>a{
	display: block;
	padding: 0;
	border: none;
	text-align: center;
	text-transform: uppercase;
	margin-right: 0;
	color: #fff;
}

.how-work .nav>li>a i{
	display: block;
	width: 62px;
	height: 62px;
	margin: 0 auto 30px;
	border-radius: 50%;
	background: #fff;
	color: #3dabaf;
	font-size: 28px;
	text-align: center;
	padding-top: 10px;
	position: relative;
}

.how-work .nav>li>a i:after{
	content: '';
	display: block;
	width: 17px;
	height: 17px;
	background: url(../images/circle.png) no-repeat center center;
	position: absolute;
	bottom: -39px;
	margin-left: -8px;
	left: 50%;
	z-index: 1;
}

.how-work .nav>li>a span{
	display: block;
	padding-top: 30px;
	position: relative;
}

.how-work .nav>li>a span:before{
	content: '';
	display: block;
	height: 2px;
	background: #fff;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.how-work .nav-tabs>li.active>a{
	border: none !important;
}

.how-work .nav-tabs>li.active>a i{
	color: #fff;
	background: #3dabaf;
	background: linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -webkit-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -moz-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -o-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
}

.how-work .nav-tabs>li.active>a span:before{
	background: #3dabaf;
	background: linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -webkit-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -moz-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -o-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
}

.how-work .nav li:hover a{
	border: none;
}

.how-work .nav-tabs li a:hover{
	background: none;
}

.how-work-tab .tab-content{
	padding: 30px 0;
}

.how-work-tab .tab-content .tab-pane h3,
.how-work-tab .panel h3{
	color: #fff;
	font-size: 20px;
	font-weight: 400;
	text-transform: uppercase;
	margin: 0 0 1.5em;
}

.how-work-tab .tab-content .tab-pane p,
.how-work-tab .panel p{
	font-size: 14px;
	color: #d4d1d1;
	line-height: 1.8em;
	margin-bottom: 1.5em;
	font-weight: 300;
}

.how-work-tab .panel{
	border: none;
	border-radius: 0;
	background: rgba(255,255,255,0.1);
}

.how-work-tab .panel-heading{
	background: #3dabaf;
	background: linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -webkit-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -moz-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -o-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	border-radius: 0;
	color: #fff;
	padding: 0;
}

.how-work-tab .panel-heading .panel-title{
	font-weight: 400;
	font-size: 18px;
}

.how-work-tab .panel-heading .panel-title a{
	display: block;
	padding: 16px 20px;
}

.how-work-tab .panel-heading i{
	margin-right: 10px;
	font-size: 22px;
}

.how-work-tab .panel .panel-body{
	padding: 30px;
}

.how-work-tab .panel-group .panel-heading+.panel-collapse>.panel-body{
	border-top: 0;
}
/************************************/
/*****   08. Pricing area css   *****/
/************************************/

.pricing{
	padding: 100px 0;
}

.row.no-gutters {
	margin: 0;
}

.row.no-gutters > [class*='col-'] {
	padding: 0;
}

.pricing-single{
	position: relative;
	margin-top: 30px;
}

.pricing-first{
	border-left: 1px solid #2dcda5;
	border-bottom: 1px solid #2dcda5;
}

.pricing-last{
	border-right: 1px solid #2dcda5;
	border-bottom: 1px solid #2dcda5;
}

.pricing-single:before{
	content: '';
	display: block;
	position: absolute;
	top: 0px;
	right: 0;
	left: 0;
	height: 10px;
	background: #3dabaf;
	background: linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -webkit-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -moz-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -o-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
}

.pricing-header{
	text-align: center;
	padding: 44px 30px 34px;
	border-bottom: 1px solid #2dcda5;
}

.pricing-header h3{
	font-size: 40px;
	color: #36383e;
	font-weight: 700;
	margin: 0;
}

.pricing-header h3 span{
	color: #afb0b3;
	font-size: 16px; 
	display: block;
	font-weight: 300;
	font-style: italic;
	margin-top: 6px;
}

.pricing-body{
	padding: 40px 30px;
	text-align: center;
}

.pricing-body ul{
	padding: 0;
	margin: 0;
	list-style: none;
	display: inline-block;
}

.pricing-body ul li{
	font-size: 18px;
	color: #b1b0b0;
	padding: 8px 0 8px 30px;
	text-align: left;
	position: relative;
}

.pricing-body ul li:before{
	content: '\f00c';
	font-family: FontAwesome;
	color: #2dcda5;
	padding-right: 10px;
	position: absolute;
	top: 8px;
	left: 0;
}

.pricing-footer{
	text-align: center;
	
}

.btn-order{
	display: inline-block;
	color: #fff;
	padding: 14px 20px;
	margin-bottom: 40px;
	text-transform: uppercase;
	background: #3dabaf;
	background: linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -webkit-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -moz-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -o-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	transition: all 0.3s;
}

.btn-order:focus,
.btn-order:hover{
	color: #fff;
}

.recommended{
	background: #3dabaf;
	background: linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -webkit-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -moz-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -o-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	margin-top: 0;
	border: none;
}

.recommended:before{
	display: none;
}

.recommended .pricing-header{
	padding: 59px 30px 49px;
}

.recommended .pricing-header h3,
.recommended .pricing-header h3 span{
	color: #fff;
}

.recommended .pricing-body ul li{
	color: #fff;
}

.recommended .pricing-body ul li:before{
	color: #fff;
}

.recommended .btn-order{
	background: #4d7dbb;
	margin-bottom: 70px;
}

.pricing-note{
	text-align: center;
	max-width: 768px;
	margin: 40px auto 0;
}

.pricing-note p{
	color: #a3a4a6;
	font-size: 14px;
	line-height: 1.6em;
}

/******************************************/
/*****    09. Testimonial area css    *****/
/******************************************/

.testimonial{
	padding: 100px 0;
	background: url(../images/testimonial.jpg) no-repeat center center fixed;
	background-size: cover;
	position: relative;
}

.testimonial:before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #3dabaf;
	background: linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -webkit-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -moz-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -o-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	opacity: 0.9;
}

.testimonial .section-title h2{
	color: #fff;
}

.testimonial-single{
	background: rgba(255,255,255,0.14);
	padding: 12px;
	transition: all 0.3s;
}

.testimonial-content{
	background: #fff;
	padding: 40px 30px;
}

.testimonial-single figure{
	margin-bottom: 30px;
}

.testimonial-single img{
	width: auto !important;
	border-radius: 50%;
}

.testimonial-single p{
	font-size: 14px;
	color: #817f7f;
	line-height: 1.5em;
	margin-bottom: 1.5em;
}

.testimonial-single h3{
	color: #444445;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 8px;
}

.testimonial-single h4{
	font-size: 14px;
	color: #817f7f;
	font-weight: 400;
}

.owl-testimonial .owl-dots{
	text-align: center;
	margin-top: 60px;
}

.owl-testimonial .owl-dots .owl-dot{
	display: inline-block;
}

.owl-testimonial .owl-dots .owl-dot span{
	display: block;
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
	margin: 0 4px;
}

.owl-testimonial .owl-dots .owl-dot.active span{
	background: #222327;
}

/****************************************************/
/***** 10. Application info & Download area Css *****/
/****************************************************/

.application-info{
	padding: 100px 0;
}

.application-info .section-title{
	margin-bottom: 0;
}

.application-info .section-title h2{
	color: #2dcda5;
	text-align: left;
}

.application-info .download-button{
	text-align: center;
	margin-top: 20px;
}

.application-info .download-button .btn-header{
	margin: 0 15px;
}

.app-info-single{
	text-align: center;
	margin-bottom: 80px;
}

.app-info-single .icon-box{
	display: inline-block;
	height: 60px;
	width: 60px;
	border-radius: 50%;
	padding: 3px;
	margin-bottom: 20px;
	background: #3dabaf;
	background: linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -webkit-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -moz-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -o-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
}

.app-info-single .icon-box i{
	display: block;
	width: 54px;
	height: 54px;
	background: #fff;
	border-radius: 50%;
	font-size: 28px;
	padding-top: 6px;
	color: #3dabaf;
}

.app-info-single h3{
	font-size: 34px;
	margin-bottom: 4px;
	color: #222327;
}

.app-info-single p{
	font-size: 14px;
	color: #817f7f;
}

/******************************************/
/*****    11. Stay Updated area css   *****/
/******************************************/

.stay-contact{
	background: #222327;
	padding: 100px 0;
}

.stay-contact .section-title h2{
	color: #fff;
	text-align: left;
}

.contact-form .form-control{
	margin-bottom: 20px;
	background: none;
	border: none;
	border-bottom: 1px solid #a6a2a2;
	font-size: 18px;
	padding: 12px 0;
	height: auto;
	border-radius: 0;
	box-shadow: none;
	font-weight: 400;
	resize: none;
	color: #a6a2a2;
}

.has-error .form-control:focus{
	border: none;
	border-bottom: 1px solid #a6a2a2;
	box-shadow: none;
}

.text-success,
.text-danger{
	font-size: 16px;
}

.btn-contact{
	display: inline-block;
	padding: 16px 30px;
	border: none;
	font-size: 16px;
	color: #fff;
	text-transform: uppercase;
	font-size: 16px;
	outline: 0;
	background: #3dabaf;
	background: linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -webkit-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -moz-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -o-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
}

.btn-contact:focus,
.btn-contact:hover{
	background: #3dabaf;
	color: #fff;
	outline: 0 !important;
	box-shadow: none;
}

.newsletter-form{
	margin-bottom: 40px;
}

.newsletter-form .form-control{
	background: #fff;
	border: none;
	border-radius: 0;
	height: 50px;
}

.btn-subscribe{
	height: 50px !important;
	border: none;
	color: #fff;
	border-radius: 0 !important;
	text-transform: uppercase;
	padding: 10px 30px !important;
	outline: 0;
	box-shadow: none;
	background: #3dabaf;
	background: linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -webkit-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -moz-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -o-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
}

.btn-subscribe:focus,
.btn-subscribe:hover{
	background: #3dabaf;
	color: #fff;
	outline: 0 !important;
	box-shadow: none;
}

.stay-note p{
	color: #a6a2a2;
	font-size: 14px;
	line-height: 1.7em;
	font-weight: 300;
}

.footer-social{
	margin-top: 60px;
}

.footer-social a{
	display: inline-block;
	width: 40px;
	height: 40px;
	color: #fff;
	text-align: center;
	font-size: 18px;
	background: #3dabaf;
	padding-top: 9px;
	border-radius: 50%;
	margin-right: 6px;
	background: linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -webkit-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -moz-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	background: -o-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
}

.footer-social a:hover{
	background: #3dabaf;
}

/***********************************/
/*****   12. Footer area css   *****/
/***********************************/

footer{
	background: #222327;
	padding: 30px 0 60px;
	text-align: center;
}

.footer-logo{
	margin-bottom: 20px;
}

.footer-siteinfo p{
	color: #78797f;
	font-size: 14px;
}

.footer-siteinfo a{
	color: #78797f;
	text-transform: uppercase;
}

.footer-siteinfo a:hover{
	color: #2dcda5;
}

/************************************/
/*****    13. Media Screens     *****/
/************************************/


@media only screen and (max-width: 1200px){
	.navbar-default .navbar-nav>li>a{
		padding: 6px 12px;
	}
	
	.screenshot-phone{
		width: calc(20% + 4%);
	}
}

@media only screen and (max-width: 1024px){
	.screenshot-phone{
		width: calc(38% + 4%);
	}
	
	.screenshot-slider{
		padding-top: 2.9%;
	}
}

@media only screen and (max-width: 991px){
	
	.navbar-toggle{
		display: block;
	}
	
	.navbar-header{
		float: none;
	}
	
	#main-nav .navbar-collapse{
		display: none !important;
	}
	
	.navbar-default .navbar-toggle{
		border-color: #fff;
		border-radius: 0;
		padding: 0;
	}
	
	.navbar-brand{
		padding: 21px 0 22px 15px;
	}
	
	.sticky-header .navbar-brand{
		padding: 21px 0 22px 15px;
	}
	
	.slicknav_menu{
		background: #3dabaf;
		background: linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
		background: -webkit-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
		background: -moz-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
		background: -o-linear-gradient(62deg,#2dcda5 0%,#3dabaf 32%,#4b83ba 68%,#5468bf);
	}
	
	.sticky-header .slicknav_menu{
		background: none;
	}
	
	.slicknav_menu{
		margin-left: -15px;
		margin-right: -15px;
		padding: 0;
	}
	
	.slicknav_menu li{
		padding: 0 10px;
	}

	.slicknav_menu a{
		color: #fff;
		padding-top: 6px;
		padding-bottom: 6px;
		text-transform: uppercase;
		border: 1px solid transparent;
	}

	.slicknav_menu a a{
		border: none !important;
	}
	
	.slicknav_nav .slicknav_row:hover,
	.slicknav_nav a:hover{
		background: none;
		color: #fff;
		border: 1px solid #fff;
		border-radius: 0;
	}
	
	.slicknav_btn{
		padding: 4px 4px;
		background: none;
	}
	
	.slicknav_icon-bar{
		box-shadow: none;
		border-radius: 0;
		margin: 2px 0;
	}
	
	.navbar-toggle{
		top: 16px;
		margin-right: 0;
		transition: all 0.3s;
	}

	.sticky-header .navbar-toggle{
		top: 16px;
	}
	
	.navbar-collapse{
		border: none !important;
		border-top: 1px solid #fa534a !important;
		box-shadow: none;
		padding: 30px;
		background: #f93f35;
	}
	
	.navbar-toggle:hover{
		background: transparent !important;
	}
	
	.navbar-toggle .icon-bar{
		margin: 4px 0;
	}
	
	.banner{
		padding: 140px 0;
	}
	
	.btn-header{
		font-size: 20px;
		min-width: auto;
		padding: 10px 14px 8px 60px;
		margin-right: 10px;
	}
	
	.btn-header i{
	    font-size: 36px;
		position: absolute;
		top: 14px;
		left: 16px;
	}
	
	.section-title,
	.how-work .section-title{
		margin-bottom: 50px;
	}
	
	.section-title h2,
	.benefits-entry h2{
		font-size: 28px;
	}
	
	.benefits-feature{
		padding: 140px 0 200px;
	}
	
	.how-work-image{
		text-align: center;
		margin-bottom: 40px;
	}
	
	.contact-us{
		margin-bottom: 60px;
	}
	
	.benefits-image-cover{
		display: none;
	}
}

/* Mobile Layout */
@media only screen and (max-width: 767px){
	.navbar-toggle {
		top: 16px;
		margin-right: 15px;
	}
	
	.header-content{
		margin-bottom: 50px;
		text-align: center;
	}
	
	.header-content p{
		font-size: 22px;
	}
	
	.slider-image{
		text-align: center;
	}
	
	.btn-header{
		margin: 0 5px;
	}
	
	.features,
	.boost-app,
	.screenshot,
	.how-work,
	.pricing,
	.testimonial,
	.application-info,
	.stay-contact{
		padding: 60px 0;
	}
	
	.feature-single .icon-box{
		padding: 10px 0;
		font-size: 80px;
	}
	
	.feature-single h3{
		margin-bottom: 20px;
		font-size: 20px;
	}
	
	.benefits-feature ul li{
		font-size: 20px;
		padding-left: 40px;
	}
	
	.screenshot-phone{
		display: none;
	}
	
	.screenshot-slider{
		padding-top: 0;
	}
	
	.screenshot-single{
		max-width: 210px;
		margin: 0 auto;
	}
	
	.pricing-single{
		max-width: 380px;
		margin: 0 auto 30px;
		border-right: 1px solid #2dcda5;
		border-left: 1px solid #2dcda5;
	}

	.recommended {
		border: none;
	}
	
	.application-info .section-title h2{
		text-align: center;
	}
	
}

/* Small Mobile Layout */

@media only screen and (max-width: 480px) {
	.btn-header,
	.application-info .download-button .btn-header{
		display: block;
		max-width: 200px;
		margin: 0 auto 20px;
	}
	
	.navbar-brand img{
		height: 30px;
	}
	
	.navbar-brand,
	.sticky-header .navbar-brand{
		padding: 27px 0 27px 15px;
	}
	
	.banner{
		padding: 80px 0;
	}
	
	.section-title h2,
	.benefits-entry h2{
		font-size: 24px;
	}

	.section-title h2 br,
	.benefits-entry h2 br{
		display: none;
	}
	
	.feature-tagline p{
		font-size: 14px;
	}
	
	.benefits-feature{
		padding: 100px 0 200px;
	}
	
	.screenshot-slider .owl-nav .owl-next,
	.screenshot-slider .owl-nav .owl-prev{
		margin: 0 20px;
	}
	
	.how-work-tab .panel .panel-body{
		padding: 20px;
	}
	
	.testimonial-content{
		padding: 20px 30px;
	}

	.app-info-single{
		margin-bottom: 40px;
	}
	
	.app-info-single h3{
		font-size: 24px;
	}
	
	.application-info .section-title h2{
		text-align: center;
		margin-top: 20px;
	}
	
	.contact-form .form-control{
		margin-bottom: 30px;
	}
	
	.newsletter-form .input-group{
		display: block;
	}
	
	.newsletter-form .form-control{
		margin-bottom: 20px;
	}
	
	.footer-social a{
		margin-right: 2px;
	}
}