/*
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 2 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: #fff;
    color: #7c9afc;
    height: 35px;
    line-height: 36px;
    border-radius: 100%;
    text-align: center;
    font-size: 29px;
    transition: 0.4s;
    margin-top: -60px;
}
.owl-nav div:hover {
    background: #000;
}
.owl-nav div.owl-next {
    right: 0;
    left: auto;
}
.appbox-btn {
    background: #ffffff;
    border: 1px solid #ffffff;
	color: #7c9afc;
    padding: 10px 30px;
    display: inline-block;
    font-weight: 600;
	cursor: pointer;
    font-size: 18px;
	border-radius: 30px;
}
.appbox-btn2,
.appbox-btn:hover {
    border: 1px solid #ffffff;
    background: transparent;
    color: #ffffff;
}
.appbox-btn2:hover {
    background: #ffffff;
    color: #7c9afc;
}
.appbox-btn3 {
    color: #ffffff;
    border: 1px solid #e1a0f7;
	background: #e1a0f7; /* Old browsers */
	background: -moz-linear-gradient(left, #e1a0f7 0%, #d39ff8 21%, #9b9cfa 75%, #7c9afc 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #e1a0f7 0%,#d39ff8 21%,#9b9cfa 75%,#7c9afc 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #e1a0f7 0%,#d39ff8 21%,#9b9cfa 75%,#7c9afc 100%);
}
.appbox-btn3:hover {
    color: #7c9afc;
    border: 1px solid #7c9afc;
}

/*--------------------------------------
-------- 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: #e1a0f7; /* Old browsers */
	background: -moz-linear-gradient(left, #e1a0f7 0%, #d39ff8 21%, #9b9cfa 75%, #7c9afc 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #e1a0f7 0%,#d39ff8 21%,#9b9cfa 75%,#7c9afc 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #e1a0f7 0%,#d39ff8 21%,#9b9cfa 75%,#7c9afc 100%);
}
/*--------------------------------------
--------- HEADER AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
-------- BANNER AREA CSS START --------
---------------------------------------*/
.banner-area {
    padding-top: 100px;
    padding-bottom: 70px;
	z-index: 1;
	position: relative;
	background: #7c9afc; /* Old browsers */
	background: -moz-linear-gradient(left, #e1a0f7 0%, #d39ff8 21%, #9b9cfa 75%, #7c9afc 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #e1a0f7 0%,#d39ff8 21%,#9b9cfa 75%,#7c9afc 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #e1a0f7 0%,#d39ff8 21%,#9b9cfa 75%,#7c9afc 100%);
}
.banner-area::before {
	content: "";
	top: 0;
	left: 0;
    opacity: 0.07;
	right: 0;
	bottom: 0;
    background-image: url(../img/appbox-img-1/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: 42px 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: #7c9afc;
	color:transparent;
	-webkit-background-clip: text;
	background-clip: text;
	background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #7c9afc), color-stop(0.5, #9b9cfa), color-stop(0.6, #d39ff8), color-stop(1, #e1a0f7) );
	background-image: gradient( linear, left top, right top, color-stop(0, #7c9afc), color-stop(0.5, #9b9cfa), color-stop(0.6, #d39ff8), color-stop(1, #e1a0f7) );
}
.single-about-box:hover i::before {
    transform: scale(0.7);
}
.single-about-box h4 {
	margin: 28px 0 20px;
}
/*--------------------------------------
--------- ABOUT AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
-------- FEATURE AREA CSS START --------
---------------------------------------*/
.feature-area {
    padding-top: 85px;
    padding-bottom: 20px;
	z-index: 1;
	position: relative;
    overflow: hidden;
	background: #7c9afc; /* Old browsers */
	background: -moz-linear-gradient(left, #e1a0f7 0%, #d39ff8 21%, #9b9cfa 75%, #7c9afc 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #e1a0f7 0%,#d39ff8 21%,#9b9cfa 75%,#7c9afc 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #e1a0f7 0%,#d39ff8 21%,#9b9cfa 75%,#7c9afc 100%);
}
.feature-area#overview {
    padding-top: 80px;
    padding-bottom: 80px;
}
.feature-area::before {
	content: "";
	top: -30px;
	left: 0;
    opacity: 0.3;
	right: 0;
	bottom: -30px;
    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;
}
.single-feature-box h2 {
    text-transform: uppercase;
    max-width: 360px;
    line-height: normal;
    margin-bottom: 25px;
    margin-top: -32px;
}
.single-feature-box li {
    margin-bottom: 15px;
    font-size: 16px;
    position: relative;
    padding-left: 30px;
}
.single-feature-box li::before {
    font-family: 'icofont';
    content: "\eb55";
    position: absolute;
    left: 0;
	max-width: 50px;
}
.single-feature-box p {
    margin-bottom: 25px;
}
.single-feature-box .appbox-btn {
    margin-top: 30px;
    margin-right: 15px;
}
.single-feature-box .appbox-btn2 {
    margin-right: 0;
}
.single-feature-box h2,
.single-feature-box h3,
.single-feature-box h4,
.single-feature-box {
	color: #fff;
}
.single-feature-box ul {
    padding-bottom: 5px;
    padding-top: 15px;
}
/*--------------------------------------
--------- FEATURE AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
-------- OVERVIEW AREA CSS START --------
---------------------------------------*/
.single-overview-box h2 {
    text-transform: uppercase;
}
.single-overview-box p {
	margin-top: 25px;
}
.single-overview-box .appbox-btn {
	margin-top: 55px;
}
/*--------------------------------------
--------- OVERVIEW AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
------ ACTIVITY AREA CSS START -------
---------------------------------------*/
.activity-area .sec-title {
	margin-bottom: 20px;
}
.single-activity-box {
    text-align: center;
	margin-top: 50px;
}
.single-activity-box h2,
.single-activity-box h3,
.single-activity-box h4,
.single-activity-box h5,
.single-activity-box h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}
.single-activity-box h2 {
    margin: 15px 0 10px;
}
.single-activity-box i::before {
    font-size: 80px;
    transition: all 0.4s;
    display: block;
    background-color: #7c9afc;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #7c9afc), color-stop(0.4, #9b9cfa), color-stop(0.7, #d39ff8), color-stop(1, #e1a0f7) );
    background-image: gradient( linear, left top, right top, color-stop(0, #7c9afc), color-stop(0.4, #9b9cfa), color-stop(0.7, #d39ff8), color-stop(1, #e1a0f7) );
}
.single-activity-box:hover i::before {
    transform: scale(0.7);
}
/*--------------------------------------
------- ACTIVITY AREA CSS END --------
---------------------------------------*/

/*--------------------------------------
-------- SCREENSHOT AREA CSS START --------
---------------------------------------*/
.screenshots-area {
	background: #7c9afc; /* Old browsers */
	background: -moz-linear-gradient(left, #e1a0f7 0%, #d39ff8 15%, #9b9cfa 85%, #7c9afc 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #e1a0f7 0%,#d39ff8 15%,#9b9cfa 85%,#7c9afc 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #e1a0f7 0%,#d39ff8 15%,#9b9cfa 85%,#7c9afc 100%);
}
.screenshot-area-slider {
    padding: 0 50px;
}
.screenshot-single-slide {
	position: relative;
	overflow: hidden;
}
.screenshot-overlay {
    position: absolute;
    width: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    top: 0;
	right: 0;
    transition: all 0.4s;
}
.screenshot-single-slide:hover .screenshot-overlay {
    width: 100%;
}
.screenshot-overlay a {
    background: #7c9afc;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    font-size: 18px;
    color: #fff;
    line-height: 60px;
    top: 0;
    text-align: center;
    bottom: 0;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
}
.screenshots-area h2,
.screenshots-area {
	color: #fff;
}
/*--------------------------------------
--------- SCREENSHOT AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
-------- FEEDBACK AREA CSS START --------
---------------------------------------*/
.author-feedback {
    padding: 0 60px;
}
.author-feedback .owl-dot {
    border: 1px solid #7c9afc;
}
.author-feedback .owl-dots div.active {
    background: #7c9afc;
}
.author-feedback .owl-nav div {
    background: #7c9afc;
	color: #fff;
    margin-top: -10px;
}
.author-single-slide::before {
    content: "";
    top: -10px;
    left: 15px;
    opacity: 0.5;
    right: 15px;
    bottom: -10px;
    background: #7c9afc;
    z-index: -1;
    position: absolute;
    border-radius: 5px;
}
.author-single-slide::after {
    content: "";
    top: 15px;
    left: -10px;
    opacity: 0.5;
    right: -10px;
    bottom: 15px;
    background: #7c9afc;
    z-index: -1;
    position: absolute;
    border-radius: 5px;
}
.author-single-slide {
    margin: 40px 20px 25px;
    position: relative;
    z-index: 1;
    background: #7c9afc;
    text-align: center;
    padding: 55px 50px 20px;
    border-radius: 5px;
}
.author-single-slide h4 {
    font-size: 20px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}
.author-single-slide p {
	margin: 15px 0 20px;
}
.author-single-slide h4,
.author-single-slide {
	color: #fff;
}
.author-single-slide .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 ---------
---------------------------------------*/

/*--------------------------------------
-------- CONTACT AREA CSS START --------
---------------------------------------*/
.contact-area {
    z-index: 1;
    position: relative;
    overflow: hidden;
	background: #7c9afc;
    background: -moz-linear-gradient(left, #e1a0f7 0%, #d39ff8 15%, #9b9cfa 85%, #7c9afc 100%);
    background: -webkit-linear-gradient(left, #e1a0f7 0%,#d39ff8 15%,#9b9cfa 85%,#7c9afc 100%);
    background: linear-gradient(to right, #e1a0f7 0%,#d39ff8 15%,#9b9cfa 85%,#7c9afc 100%);
}
.contact-area::before {
    content: "";
    top: -50px;
    left: -50px;
    opacity: 0.4;
    right: -50px;
    bottom: -50px;
    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;
}
.contact-area h2,
.contact-area {
	color: #fff;
}
.contact-form-7 button {
	width: 100%;
	color: #2b3950;
	padding: 15px 30px;
}
.contact-form-7 textarea ,
.contact-form-7 input {
	width: 100%;
	padding: 15px 30px;
	border-radius: 35px;
	background: #fff;
}
.contact-form-7 {
    font-weight: 500;
}
.contact-form-7 textarea {
	border-radius: 25px;
	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: 60px;
}
.contact-container i {
    position: absolute;
    top: 18px;
    margin: auto;
    right: 35px;
    max-width: 20px;
    font-size: 18px;
    color: #363843;
}
/*--------------------------------------
--------- CONTACT AREA CSS END ---------
---------------------------------------*/

/*--------------------------------------
------- FAQ AREA CSS START -------
---------------------------------------*/
.faq-area {
    box-shadow: 0 0 15px #eee;
}
.card {
    background: #fff;
    border: 1px solid #f2f2f2;
    border-radius: 0;
    padding: 10px 30px;
}
.card-header {
    background: transparent;
}
.card-header {
    border: none;
    border-radius: 0;
    padding: 0;
}
.card-header a {
    color: #303030;
    padding: 15px;
    font-size: 16px;
    display: block;
    position: relative;
}
.card-header a::after {
    font-family: 'icofont';
    font-size: 20px;
    content: "\eb5a";
    position: absolute;
    right: 0;
    top: 0;
    display: table;
    vertical-align: middle;
    bottom: 0;
    margin: auto;
	opacity: 0.7;
}
.card-header a[aria-expanded="true"]::after {
    content: "\eb62";
}
.card-body {
    padding: 0;
    margin: 10px 40px 20px;
    position: relative;
    padding-left: 30px;
}
.card-body::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: #7c9afc;
    content: "";
}
/*--------------------------------------
-------- FAQ AREA CSS END --------
---------------------------------------*/

/*--------------------------------------
--------- FOOTER AREA CSS START --------
---------------------------------------*/
.footer {
	padding: 22px 0;
	font-size: 12px;
	color: #fff;
	background: #7c9afc;
    background: -moz-linear-gradient(left, #e1a0f7 0%, #d39ff8 21%, #9b9cfa 75%, #7c9afc 100%);
    background: -webkit-linear-gradient(left, #e1a0f7 0%,#d39ff8 21%,#9b9cfa 75%,#7c9afc 100%);
    background: linear-gradient(to right, #e1a0f7 0%,#d39ff8 21%,#9b9cfa 75%,#7c9afc 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: #7c9afc;
    background: -moz-linear-gradient(left, #e1a0f7 0%, #d39ff8 21%, #9b9cfa 75%, #7c9afc 100%);
    background: -webkit-linear-gradient(left, #e1a0f7 0%,#d39ff8 21%,#9b9cfa 75%,#7c9afc 100%);
    background: linear-gradient(to right, #e1a0f7 0%,#d39ff8 21%,#9b9cfa 75%,#7c9afc 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 */