/*
Theme Name: eApp - 5 in 1 App Landing Page
更多模板：http://www.bootstrapmb.com/
Author: ENVALAB

Description: eApp – Creative App Landing Page HTML5 Templateis collection of App marketing pages which are perfect suit for showcase your App or services smart and flexible way. It's not only for a mobile Apps but also for mobile games showcase or any application website showcase. It's include stunning, powerful and unique landing page templates which are perfect to promoting Apps or web services & made for iOS and Android Apps makers.
Version: 1.0
*/

/*
====================================================
*   eApp DEMO 5 CSS
*   CSS INDEX
====================================================

        TOC:
        0.  RESET CSS
        1.  HEADER AREA CSS
        2.  BANNER AREA CSS
        3.  ABOUT AREA CSS
        4.  FEATURE AREA CSS
        5.  TESTIMONIAL AREA CSS
        6.  SCREENSHOT AREA CSS
        7.  FEEDBACK AREA CSS
        8.  PRICING AREA CSS
        9.  CONTACT AREA CSS
        10. FOOTER AREA CSS
        11. SCROLL-TO-TOP AREA CSS
        12. Pre Loader Style

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

/*----------------------------
---------- RESET CSS ---------
----------------------------*/
.ptb-100 {
    padding-top: 110px;
	padding-bottom: 105px;
}
.ptb-80 {
    padding-top: 80px;
	padding-bottom: 80px;
}
.owl-nav div {
    position: absolute;
    top: 50%;
    left: 0;
    width: 35px;
    background: #ff6892;
    color: #fff;
    height: 35px;
    line-height: 36px;
    border-radius: 100%;
    text-align: center;
    font-size: 29px;
    transition: 0.4s;
    margin-top: -20px;
}
.owl-nav div:hover {
    background: #000;
}
.owl-nav div.owl-next {
    right: 0;
    left: auto;
}
.owl-dot {
	border-color: #000;
}
.owl-dot.active {
    background: #000;
}
.appbox-btn {
    background: #ffffff;
    border: 1px solid #ffffff;
    color: #ff6892;
    padding: 10px 30px;
    display: inline-block;
    font-weight: 600;
	cursor: pointer;
    font-size: 18px;
	border-radius: 30px;
}
.appbox-btn2,
.appbox-btn:hover {
    background: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
}
.appbox-btn2:hover {
    background: #ffffff;
    color: #ff6892;
}
.appbox-btn3 {
    color: #ffffff;
    border: 1px solid #ff8965;
	background: #ff8965;
	background: -moz-linear-gradient(left, #ff8965 0%, #ff7e78 50%, #ff7092 82%, #ff65a5 100%); 
	background: -webkit-linear-gradient(left, #ff8965 0%,#ff7e78 50%,#ff7092 82%,#ff65a5 100%);
	background: linear-gradient(to right, #ff8965 0%,#ff7e78 50%,#ff7092 82%,#ff65a5 100%);
}
.appbox-btn3:hover {
    color: #ff8965;
    border: 1px solid #ff8965;
}

/*--------------------------------------
-------- HEADER AREA CSS START --------
---------------------------------------*/
.header {
    position: fixed;
    top: 0;
	padding: 30px 0;
    left: 0;
	transition: all 0.4s;
    width: 100%;
    z-index: 9;
	max-height: 110px;
}
.mainmenu {
    text-align: right;
}
.mainmenu li {
    display: inline-block;
    text-transform: uppercase;
    margin-left: 15px;
}
.mainmenu li a {
    display: inline-block;
	color: #fff;
	padding: 5px 0;
}
.slicknav_menu {
	padding: 0;
    background: transparent;
}
.slicknav_menu a.active,
.mainmenu ul li a:hover,
.mainmenu ul li a.active {
	color: #000;
}
.mainmenu {
    display: block;
}
.slicknav_menu {
	display: none;
}
.header.sticky {
    padding: 10px 0;
	border-bottom: 1px solid #fff;
    background: #ff65a5;
	background: -moz-linear-gradient(left, #ff65a5 0%, #ff7092 23%, #ff7e78 68%, #ff8965 100%); 
	background: -webkit-linear-gradient(left, #ff65a5 0%,#ff7092 23%,#ff7e78 68%,#ff8965 100%); 
	background: linear-gradient(to right, #ff65a5 0%,#ff7092 23%,#ff7e78 68%,#ff8965 100%);
}
/*--------------------------------------
--------- HEADER AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
-------- BANNER AREA CSS START --------
---------------------------------------*/
.banner-area {
    padding-top: 100px;
    padding-bottom: 70px;
	z-index: 1;
	position: relative;
    background: #ff65a5;
	background: -moz-linear-gradient(left, #ff65a5 0%, #ff7092 23%, #ff7e78 68%, #ff8965 100%); 
	background: -webkit-linear-gradient(left, #ff65a5 0%,#ff7092 23%,#ff7e78 68%,#ff8965 100%); 
	background: linear-gradient(to right, #ff65a5 0%,#ff7092 23%,#ff7e78 68%,#ff8965 100%);
}
.banner-area::before {
	content: "";
	top: 0;
	left: 0;
    opacity: 0.2;
	right: 0;
	bottom: 0;
    background-image: url(../img/appbox-img-5/header-shape.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
	z-index: -1;
	position: absolute;
}
.single-banner {
    color: #fff;
}
.single-banner h1 {
    color: #fff;
    max-width: 540px;
}
.single-banner p {
    margin: 35px 0 50px;
}
.single-banner .appbox-btn {
    margin-top: 15px;
    margin-right: 15px;
}
/*--------------------------------------
--------- BANNER AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
-------- ABOUT AREA CSS START --------
---------------------------------------*/
.about-area {
	text-align: center;
}
.single-about-box {
	margin-top: 35px;
}
.single-about-box i::before {
    font-size: 60px;
    transition: all 0.4s;
    display: block;
    background-color: #ff65a5;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #ff65a5), color-stop(0.5, #ff7092), color-stop(0.6, #ff7e78), color-stop(1, #ff8965) );
    background-image: gradient( linear, left top, right top, color-stop(0, #ff65a5), color-stop(0.5, #ff7092), color-stop(0.6, #ff7e78), color-stop(1, #ff8965) );
}
.single-about-box:hover i::before {
    transform: scale(0.8);
}
.single-about-box h4 {
	margin: 28px 0 20px;
}
/*--------------------------------------
--------- ABOUT AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
-------- FEATURE AREA CSS START --------
---------------------------------------*/
.feature-area {
    padding: 150px 0;
	z-index: 1;
	position: relative;
    overflow: hidden;
    background-image: url(../img/appbox-img-5/feature.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.feature-area::before {
	content: "";
	top: 0;
	left: 0;
    opacity: 0.95;
	right: 0;
	bottom: 0;
	background: #ff8965;
	background: -moz-linear-gradient(left, #ff8965 0%, #ff7e78 50%, #ff7092 82%, #ff65a5 100%); 
	background: -webkit-linear-gradient(left, #ff8965 0%,#ff7e78 50%,#ff7092 82%,#ff65a5 100%);
	background: linear-gradient(to right, #ff8965 0%,#ff7e78 50%,#ff7092 82%,#ff65a5 100%);
	z-index: -1;
	position: absolute;
}
.single-feature-box h4 {
    font-size: 20px;
    margin-bottom: 20px;
}
.single-feature-box li {
    padding-top: 30px;
    padding-bottom: 30px;
    display: flex;
}
.feature-box-info {
    flex: 6;
}
.feature-box-icon {
    flex: 1;
	font-size: 25px;
	transition: all 0.4s;
}
.single-feature-box h2,
.single-feature-box h3,
.single-feature-box h4,
.single-feature-box {
	color: #fff;
}
.single-feature-box img {
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    width: 80%;
	bottom: 0;
	margin: auto;
}
.single-feature-box li:hover .feature-box-icon {
    transform: scale(1.2);
	color: #000;
}
/*--------------------------------------
--------- FEATURE AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
-------- TESTIMONIAL AREA CSS START -------
---------------------------------------*/
.testimonial-area .sec-title h2 {
	color: #fff;
}
.testimonial-area {
    z-index: 1;
    position: relative;
    overflow: hidden;
	overflow: hidden;
	padding-top: 100px;
    background-image: url(../img/appbox-img-5/testimonial.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #fff;
}
.testimonial-area::before {
	content: "";
	top: 0;
	left: 0;
    opacity: 0.95;
	right: 0;
	bottom: 0;
	background: #ff8965;
	background: -moz-linear-gradient(left, #ff8965 0%, #ff7e78 50%, #ff7092 82%, #ff65a5 100%); 
	background: -webkit-linear-gradient(left, #ff8965 0%,#ff7e78 50%,#ff7092 82%,#ff65a5 100%);
	background: linear-gradient(to right, #ff8965 0%,#ff7e78 50%,#ff7092 82%,#ff65a5 100%);
	z-index: -1;
	position: absolute;
}
.testimonial-area::after {
	content: "";
	top: 0;
	left: -30px;
    opacity: 1;
	right: -30px;
	opacity: 0.25;
	bottom: 0;
    background-image: url(../img/appbox-img-1/overview-shape.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
	z-index: -1;
	position: absolute;
}
.video-popup {
    background: url(../img/appbox-img-5/video-overview.jpg) no-repeat center / cover;
    position: relative;
    padding: 118px 0;
    text-align: center;
    z-index: 1;
    color: #fff;
}
.single-testimonial-box {
	margin-bottom: 100px;
}
.single-testimonial-box p {
	margin-bottom: 20px;
}
.video-popup::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background: #ff8965;
	background: -moz-linear-gradient(left, #ff8965 0%, #ff7e78 50%, #ff7092 82%, #ff65a5 100%); 
	background: -webkit-linear-gradient(left, #ff8965 0%,#ff7e78 50%,#ff7092 82%,#ff65a5 100%);
	background: linear-gradient(to right, #ff8965 0%,#ff7e78 50%,#ff7092 82%,#ff65a5 100%);
    opacity: 0.2;
    z-index: -1;
}
.video-popup i {
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 25px;
	color: #fff;
    border: 4px solid #fff;
    border-radius: 50%;
    transition: all 0.4s;
    padding-left: 3px;
}
.video-popup i:hover {
	color: #000;
    background: #fff;
}
.nav.nav-tabs {
    background: #f2f2f2;
    border: none;
}
.nav.nav-tabs li {
    float: left;
    width: 16.66%;
    margin-bottom: 0;
    text-align: center;
    border: none;
}
.nav.nav-tabs li:nth-child(odd) {
	background: #ebebeb;
}
.nav-tabs .nav-link {
    border: none;
    padding: 18px;
	position: relative;
    border-radius: 0;
	border-bottom: 3px solid transparent;
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
	background: transparent;
}
.nav-tabs .nav-link.active {
	border-bottom: 3px solid #fe718a;
}
.nav-tabs .nav-link.active::before {
    position: absolute;
    bottom: 100%;
    height: 0;
    width: 0;
    content: "";
    left: 0;
    right: 0;
    margin: auto;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent #ebebeb transparent;
}
.nav.nav-tabs li:nth-child(even) .nav-link.active::before {
    border-color: transparent transparent #f2f2f2 transparent;
}
/*--------------------------------------
--------- TESTIMONIAL AREA CSS END --------
---------------------------------------*/

/*--------------------------------------
------ SCREENSHOT AREA CSS START -------
---------------------------------------*/
.screenshot-wrap {
	padding: 0 60px;
}
.screenshot-wrap .slick-list {
	padding-bottom: 100px !important;
	padding-top: 80px !important;
}
.single-screenshot.slick-slide {
	z-index: 1;
}
.single-screenshot.slick-active {
	-webkit-transform: scale(1.15);
	-ms-transform: scale(1.15);
	transform: scale(1.15);
	z-index: 2;
	transition: all 0.3s ease-in 0s;
}
.single-screenshot.slick-center {
	position: relative;
	-webkit-transform: scale(1.3);
	-ms-transform: scale(1.3);
	transform: scale(1.3);
	z-index: 3;
	transition: all 0.3s ease-in 0s;
}
.single-screenshot img {
	width: 100%;
}
.slick-dots {
	text-align: center;
	margin-top: 10px;
}
.slick-dots li.slick-active button {
    background-color: #000;
}
.slick-dots li {
    display: inline-block;
}
.screenshots-area .sec-title {
	margin-bottom: 25px;
}
.slick-dots li button {
    background: transparent;
    border: 1px solid #000;
    border-radius: 100%;
    font-size: 0;
    margin: 0 3px;
    padding: 0;
	cursor: pointer;
    width: 10px;
    height: 10px;
    display: inline-block;
}
.screenshot-wrap .slick-arrow {
    position: absolute;
    top: 50%;
    left: 0;
    width: 35px;
    background: #ff6892;
    color: #fff;
    height: 35px;
    line-height: 36px;
    border-radius: 100%;
    text-align: center;
    font-size: 29px;
    transition: 0.4s;
    margin-top: -60px;
	cursor: pointer;
}
.screenshot-wrap .slick-arrow.icofont-long-arrow-right {
    right: 0;
    left: auto;
}
.screenshot-wrap .slick-arrow:hover {
    background-color: #000;
}
/*--------------------------------------
--------- SCREENSHOT AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
-------- FEEDBACK AREA CSS START --------
---------------------------------------*/
.feedback-slider-thumb > div {
    margin: 60px auto 25px;
    max-width: 50%;
    background: #fe718a;
    text-align: center;
    padding: 70px 45px 20px;
    border-radius: 8px;
    position: absolute;
    top: -10px;
    width: 560px;
    transform: scale(0.65);
    left: -30px;
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s;
    opacity: .6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}
.feedback-slider-thumb > div.thumb-next {
	left: auto;
	right: -30px;
}
.feedback-slider-thumb > div:hover {
	opacity: 9;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
.author-feedback {
    padding: 0 120px;
}
.feedback-slider .owl-nav div.owl-prev {
	left: -50%;
}
.feedback-slider .owl-nav div.owl-next {
	right: -50%;
}
.feedback-slider {
    max-width: 50%;
    margin: auto;
}
.author-single-slide {
    margin: 46px 6px 6px;
    position: relative;
	box-shadow: 0 0 10px #aaa;
    z-index: 1;
    background: #fe718a;
    text-align: center;
    padding: 55px 35px 15px;
    border-radius: 8px;
}
.feedback-area h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}
.feedback-area span {
    font-weight: 300;
	font-size: 11px;
}
.feedback-slider-thumb p ,
.author-single-slide p {
	margin: 8px 0 15px;
}
.feedback-area h4,
.feedback-slider-thumb ,
.author-single-slide {
	color: #fff;
}
.feedback-area .author-rating {
	color: #ffee58;
}
.author-img {
    width: 80px;
    height: 80px;
    margin: auto;
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
}
.author-img img {
    max-width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-height: 100%;
	border: 2px solid #fff;
	border-radius: 100%;
    position: absolute;
    width: auto !important;
}
/*--------------------------------------
--------- FEEDBACK AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
-------- PRICING AREA CSS START --------
---------------------------------------*/
.pricing-area {
    z-index: 1;
    position: relative;
	color: #fff;
    overflow: hidden;
	background: #ff8965;
	background: -moz-linear-gradient(left, #ff8965 0%, #ff7e78 70%, #ff7092 90%, #ff65a5 100%); 
	background: -webkit-linear-gradient(left, #ff8965 0%,#ff7e78 70%,#ff7092 90%,#ff65a5 100%);
	background: linear-gradient(to right, #ff8965 0%,#ff7e78 70%,#ff7092 90%,#ff65a5 100%);
}
.pricing-area h1,
.pricing-area h3,
.pricing-area h4,
.pricing-area h5,
.pricing-area h6,
.pricing-area h2 {
	color: #fff;
}
.pricing-area::before {
    content: "";
    top: 0;
    left: 0;
    opacity: 0.2;
    right: 0;
    bottom: 0;
    background-image: url(../img/appbox-img-5/pricing-shape.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: -1;
    position: absolute;
}
.single-pricing-box {
	border-radius: 8px;
	margin-top: 20px;
	background: #fff;
	box-shadow: 0 0 8px #999;
	padding-bottom: 20px;
}
.price {
    background-image: url(../img/appbox-img-5/price-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    padding: 20px 20px 100px 35px;
    border-radius: 8px 8px 0 0;
	transition: all 0.4s;
}
.single-pricing-box:hover .price {
    background-image: url(../img/appbox-img-5/price-bg-hover.png);
}
.price h6 {
	margin-bottom: 20px;
	text-align: right;
}
.price h1 {
	font-weight: 400;
}
.price-details {
	text-align: center;
}
.price-details p {
	margin: 10px 0 30px;
	color: #2b3950;
}
.price-details .appbox-btn {
    padding: 5px 35px;
    font-weight: 400;
}
/*--------------------------------------
--------- PRICING AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
------- CONTACT AREA CSS START -------
---------------------------------------*/
.contact-form-7 button {
	width: 100%;
	padding: 15px;
}
.contact-form-7 button i {
	margin-left: 10px;
}
.contact-form-7 textarea ,
.contact-form-7 input {
	width: 100%;
	padding: 15px 20px;
	margin-bottom: 15px;
	border-radius: 5px;
	border: 1px solid #ccc;
}
.contact-form-7 {
    font-weight: 500;
	padding-top: 12px;
}
.contact-form-7 textarea {
	height: 135px;
	margin-bottom: 25px;
}
.contact-form-7 input[type=checkbox],
.contact-form-7 input[type=radio] {
    width: auto;
}
.contact-form-7 p {
    display: inline-block;
    margin-left: 10px;
}
.contact-container {
    position: relative;
    margin-bottom: 18px;
}
.contact-container input {
    padding-right: 40px;
}
.contact-container i {
    position: absolute;
    top: 20px;
    margin: auto;
    right: 20px;
    max-width: 15px;
    font-size: 15px;
    color: #888;
}
/*--------------------------------------
-------- CONTACT AREA CSS END --------
---------------------------------------*/

/*--------------------------------------
--------- FOOTER AREA CSS START --------
---------------------------------------*/
.footer {
	padding: 22px 0;
	font-size: 12px;
	color: #fff;
	background: #ff8965;
	background: -moz-linear-gradient(left, #ff8965 0%, #ff7e78 50%, #ff7092 82%, #ff65a5 100%); 
	background: -webkit-linear-gradient(left, #ff8965 0%,#ff7e78 50%,#ff7092 82%,#ff65a5 100%);
	background: linear-gradient(to right, #ff8965 0%,#ff7e78 50%,#ff7092 82%,#ff65a5 100%);
}
.footer a {
	color: #fff;
}
.footer a:hover {
	color: #000;
}
.footer-content ul {
	text-align: right;
}
.footer-content li {
    display: inline-block;
    margin-left: 15px;
}
/*--------------------------------------
---------- FOOTER AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
----- SCROLL-TO-TOP AREA CSS START -----
---------------------------------------*/
.scrolltotop {
    position: fixed;
    bottom: 30px;
    text-align: center;
    right: 30px;
    width: 50px;
    height: 50px;
    z-index: 1000;
    display: none;
    text-decoration: none;
    border-radius: 100%;
    color: #fff;
	font-size: 28px;
    line-height: 48px;
	border: 3px double #fff;
	background: #ff8965;
	background: -moz-linear-gradient(left, #ff8965 0%, #ff7e78 70%, #ff7092 90%, #ff65a5 100%); 
	background: -webkit-linear-gradient(left, #ff8965 0%,#ff7e78 70%,#ff7092 90%,#ff65a5 100%);
	background: linear-gradient(to right, #ff8965 0%,#ff7e78 70%,#ff7092 90%,#ff65a5 100%);
}
.scrolltotop:hover {
	transform: scale(0.9);
    color: #fff;
}
.scrolltotop:focus ,
.scrolltotop:hover {
	border: 3px double #fff;
}
/*--------------------------------------
------ SCROLL-TO-TOP AREA CSS END ------
---------------------------------------*/

/* Pre Loader Style */
.js div#preloader {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 988899;
    width: 100%;
    height: 100%;
    overflow: visible;
    background: #fff url('../img/loader.gif') no-repeat center center;
}
/* END of Pre Loader Style */