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

Template Name: APPAI 

Description: Creative App Landing HTML5 Template

Template URI: https://themeforest.net/item/appai-creative-app-landing-html5-template/19533013

Author: Marvel_Theme

Author URI: https://themeforest.net/user/marvel_theme

Version: 1.3 (18 March 2018)



=== CSS INDEX ===

1. THEME DEFAULT CSS

    1.1. TRANSITION

    1.2. BASIC MARGIN PADDING

    1.3. PAGE SECTION PADDING

    1.4. PAGE SECTION MARGIN

    1.5. BACKGROUND

    1.6. OVERLAY

    1.7. SECTION HEADDING STYLE

    1.8. SECTION HEADDING STYLE 2

2. HEADER AREA

    2.1. HEADER HOME STYLE 2

    2.2. BLOG PAGE HEADER STYLE

3. SLIDER AREA

    3.1. SLIDER HOME STYLE 2

    3.2. SLIDER HOME STYLE 3

4. APP FEATURES AREA

    4.1. APP FEATURES AREA HOME STYLE 2

5. APP ABOUT AREA

6. HOW IT WORKS AREA

    6.1. HOW IT WORKS AREA HOME STYLE 2

7. AWESOME FEATURES AREA

8. PROMO VIDEO AREA

9. FUN FACT AREA

10. APP SCREENSHOTS AREA

11. TEAM AREA

12. TESTIMONIAL AREA

    12.1. TESTIMONIAL AREA HOME STYLE 2

13. PRICING TABLE AREA

14. FAQ AREA

    14.1. FAQ AREA HOME STYLE 2

15. APP DOWNLOAD AREA

    15.1. APP DOWNLOAD AREA HOME STYLE 2

16. BLOG AREA

17. SUBSCRIBE AREA

18. CONTACT AREA

19. FOOTER AREA

    19.1. FOOTER AREA HOME STYLE 2

20. BLOG TWO COLUMNS

    20.1. BREADCRUMB

    20.2. BLOG

    20.3. PAGINATION 

21. BLOG LEFT SIDEBAR

22. BLOG DETAILS

    22.1. SOCIAL SHARE AND TAGS

    22.2. POST COMMENTS AREA

    22.3. POST NEW COMMENT

    22.4. RELATED POST AREA

23. COMMING SOON PAGE

    23.1. COMMING SOON SUBSCRIBE AREA

24. HOME PAGE 3 STYLE

25. HOME PAGE 4 STYLE

26. HOME PAGE 5 STYLE

27. HOME PAGE 6 STYLE

28. HOME PAGE 7 STYLE

29. HOME PAGE 8 STYLE

30. HOME PAGE 9 STYLE

31. HOME PAGE 10 STYLE

32. HOME PAGE 11 STYLE

33. PARTICLE BG

34. ANGLE BG

35. PRELOADER

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





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

1. THEME DEFAULT CSS

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



@import "https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700";

body {

    color: #4c5462;

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

    font-weight: normal;

    font-style: normal;

    font-size: 14px;

}



@media (min-width:1200px) {

    .container {

        width: 1200px

    }

}



.img {

    max-width: 100%;

}



a:focus,

.btn:focus {

    text-decoration: none;

    outline: none;

    box-shadow: none;

}



a:focus,

a:hover,

a:active {

    color: #4c5462;

    text-decoration: none;

}



a,

button {

    outline: medium none;

    color: #4c5462;

    text-decoration: none;

    display: inline-block;

}



h1,

h2,

h3,

h4,

h5,

h6 {

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

    color: #4c5462;

    margin-top: 0px;

    font-style: normal;

    font-weight: 700;

}



h1 a,

h2 a,

h3 a,

h4 a,

h5 a,

h6 a {

    color: inherit;

}



h1 {

    font-size: 48px;

}



h2 {

    font-size: 30px;

}



h3 {

    font-size: 24px;

    color: #2b323f;

}



h4 {

    font-size: 20px;

    color: #2b323f;

    font-weight: 600;

}



h5 {

    font-size: 18px;

    color: #2b323f;

    font-weight: 600;

}



h6 {

    font-size: 16px;

}



ul {

    margin: 0px;

    padding: 0px;

}



li {

    list-style: none

}



p {

    font-size: 14px;

    font-weight: 500;

    line-height: 24px;

    color: #4c5462;

    margin-bottom: 15px;

}



hr {

    margin: 60px 0;

    padding: 0px;

    border-bottom: 1px solid #eceff8;

    border-top: 0px;

}



label {

    color: #626262;

    cursor: pointer;

    font-size: 14px;

    font-weight: 400;

}



blockquote {

    background-color: #f6f6f6;

    border: 0 none;

    font-size: 14px;

    font-weight: 500;

    line-height: 24px;

    margin: 60px 0 30px 30px;

    padding: 30px;

}



*::-moz-selection {

    background: #4fc1f0;

    color: #fff;

    text-shadow: none;

}



::-moz-selection {

    background: #4fc1f0;

    color: #fff;

    text-shadow: none;

}



*::-moz-placeholder {

    color: #4c5462;

    font-size: 14px;

}



*::-webkit-input-placeholder {

    color: #4c5462;

    font-size: 14px;

}



*:-ms-input-placeholder {

    color: #4c5462;

    font-size: 14px;

}



.fix {

    overflow: hidden;

}



.media-left {

    padding-right: 30px;

}



.dsp-tc {

    display: table-cell;

    vertical-align: top;

}



.btn {

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(to right, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    border: 0 none;

    border-radius: 100px;

    color: #fff;

    font-size: 16px;

    font-weight: 600;

    line-height: 1;

    outline: 0 none;

    padding: 13px 30px;

    position: relative;

    text-align: center;

    text-decoration: none;

    z-index: 1;

}



.btn:hover,

.btn:focus,

.btn:active {

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

    color: #fff;

    outline: 0 none;

    border: 0 none;

    text-decoration: none;

}



.btn:active {

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(to right, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

}



.btn.btn-bordered-white {

    background: transparent none repeat scroll 0 0;

    border: 2px solid #fff;

    padding: 11px 30px;

}



.btn.btn-bordered-white:hover,

.btn.btn-bordered-white:focus {

    border-color: transparent;

    outline: 0 none;

}



.btn.btn-bordered-white:after {

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(to right, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    border-radius: 100px;

    content: "";

    height: calc(100% + 4px);

    left: -2px;

    opacity: 0;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    position: absolute;

    top: -2px;

    -webkit-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

    width: calc(100% + 4px);

    z-index: -1;

}



.btn.btn-bordered-white:hover:after,

.btn.btn-bordered-white:focus:after {

    opacity: 1;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

}



.btn.btn-bordered-grad {

    background: transparent none repeat scroll 0 0;

    color: #2b323f;

}



.btn.btn-bordered-grad:hover,

.btn.btn-bordered-grad:focus {

    color: #fff;

}



.btn.btn-bordered-grad:before {

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(to right, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    border-radius: 100px;

    content: "";

    height: calc(100% + 4px);

    left: -2px;

    position: absolute;

    top: -2px;

    -webkit-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

    width: calc(100% + 4px);

    z-index: -2;

}



.btn.btn-bordered-grad:after {

    background: #fff none repeat scroll 0 0;

    border-radius: 100px;

    content: "";

    height: 100%;

    left: 0;

    position: absolute;

    top: 0;

    -webkit-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

    width: 100%;

    z-index: -1;

}



.btn.btn-bordered-grad:hover:after,

.btn.btn-bordered-grad:focus:after {

    opacity: 0;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

}



.button-group a {

    margin-right: 30px;

}



.button-group a:last-child {

    margin-right: 0;

}



.header-space {

    margin-top: 120px;

}





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

1.1. TRANSITION

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



.transition-3s {

    -webkit-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

}



a,

.btn,

img {

    -webkit-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

}





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

1.2. BASIC MARGIN PADDING

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



.m-0 {

    margin-top: 0;

    margin-right: 0;

    margin-bottom: 0;

    margin-left: 0;

}



.p-0 {

    padding-top: 0;

    padding-right: 0;

    padding-bottom: 0;

    padding-left: 0;

}





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

MARGIN TOP

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



.mt-0 {

    margin-top: 0;

}



.mt-10 {

    margin-top: 10px;

}



.mt-15 {

    margin-top: 15px;

}



.mt-20 {

    margin-top: 20px;

}



.mt-30 {

    margin-top: 30px;

}



.mt-40 {

    margin-top: 40px;

}



.mt-50 {

    margin-top: 50px;

}



.mt-60 {

    margin-top: 60px;

}



.mt-70 {

    margin-top: 70px;

}



.mt-80 {

    margin-top: 80px;

}



.mt-90 {

    margin-top: 90px;

}



.mt-100 {

    margin-top: 100px;

}



.mt-110 {

    margin-top: 110px;

}



.mt-120 {

    margin-top: 120px;

}



.mt-130 {

    margin-top: 130px;

}



.mt-140 {

    margin-top: 140px;

}



.mt-150 {

    margin-top: 150px;

}





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

MARGIN BOTTOM

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



.mb-0 {

    margin-bottom: 0;

}



.mb-10 {

    margin-bottom: 10px;

}



.mb-15 {

    margin-bottom: 15px;

}



.mb-20 {

    margin-bottom: 20px;

}



.mb-30 {

    margin-bottom: 30px;

}



.mb-40 {

    margin-bottom: 40px;

}



.mb-50 {

    margin-bottom: 50px;

}



.mb-60 {

    margin-bottom: 60px;

}



.mb-70 {

    margin-bottom: 70px;

}



.mb-80 {

    margin-bottom: 80px;

}



.mb-90 {

    margin-bottom: 90px;

}



.mb-100 {

    margin-bottom: 100px;

}



.mb-110 {

    margin-bottom: 110px;

}



.mb-120 {

    margin-bottom: 120px;

}



.mb-130 {

    margin-bottom: 130px;

}



.mb-140 {

    margin-bottom: 140px;

}



.mb-150 {

    margin-bottom: 150px;

}





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

PADDING TOP

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



.pt-0 {

    padding-top: 0;

}



.pt-10 {

    padding-top: 10px;

}



.pt-15 {

    padding-top: 15px;

}



.pt-20 {

    padding-top: 20px;

}



.pt-30 {

    padding-top: 30px;

}



.pt-40 {

    padding-top: 40px;

}



.pt-50 {

    padding-top: 50px;

}



.pt-60 {

    padding-top: 60px;

}



.pt-70 {

    padding-top: 70px;

}



.pt-80 {

    padding-top: 80px;

}



.pt-90 {

    padding-top: 90px;

}



.pt-100 {

    padding-top: 100px;

}



.pt-110 {

    padding-top: 110px;

}



.pt-120 {

    padding-top: 120px;

}



.pt-130 {

    padding-top: 130px;

}



.pt-140 {

    padding-top: 140px;

}



.pt-150 {

    padding-top: 150px;

}





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

PADDING RIGHT

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



.pr-0 {

    padding-right: 0;

}



.pr-10 {

    padding-right: 10px;

}



.pr-15 {

    padding-right: 15px;

}



.pr-20 {

    padding-right: 20px;

}



.pr-30 {

    padding-right: 30px;

}



.pr-40 {

    padding-right: 40px;

}



.pr-50 {

    padding-right: 50px;

}



.pr-60 {

    padding-right: 60px;

}



.pr-70 {

    padding-right: 70px;

}



.pr-80 {

    padding-right: 80px;

}



.pr-90 {

    padding-right: 90px;

}



.pr-100 {

    padding-right: 100px;

}



.pr-110 {

    padding-right: 110px;

}



.pr-120 {

    padding-right: 120px;

}



.pr-130 {

    padding-right: 130px;

}



.pr-140 {

    padding-right: 140px;

}





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

PADDING BOTTOM

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



.pb-0 {

    padding-bottom: 0;

}



.pb-10 {

    padding-bottom: 10px;

}



.pb-15 {

    padding-bottom: 15px;

}



.pb-20 {

    padding-bottom: 20px;

}



.pb-30 {

    padding-bottom: 30px;

}



.pb-40 {

    padding-bottom: 40px;

}



.pb-50 {

    padding-bottom: 50px;

}



.pb-60 {

    padding-bottom: 60px;

}



.pb-70 {

    padding-bottom: 70px;

}



.pb-80 {

    padding-bottom: 80px;

}



.pb-90 {

    padding-bottom: 90px;

}



.pb-100 {

    padding-bottom: 100px;

}



.pb-110 {

    padding-bottom: 110px;

}



.pb-120 {

    padding-bottom: 120px;

}



.pb-130 {

    padding-bottom: 130px;

}



.pb-140 {

    padding-bottom: 140px;

}



.pb-150 {

    padding-bottom: 150px;

}





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

PADDING LEFT

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



.pl-0 {

    padding-left: 0;

}



.pl-10 {

    padding-left: 10px;

}



.pl-15 {

    padding-left: 15px;

}



.pl-20 {

    padding-left: 20px;

}



.pl-30 {

    padding-left: 30px;

}



.pl-40 {

    padding-left: 40px;

}



.pl-50 {

    padding-left: 50px;

}



.pl-60 {

    padding-left: 60px;

}



.pl-70 {

    padding-left: 70px;

}



.pl-80 {

    padding-left: 80px;

}



.pl-90 {

    padding-left: 90px;

}



.pl-100 {

    padding-left: 100px;

}



.pl-110 {

    padding-left: 110px;

}



.pl-120 {

    padding-left: 120px;

}



.pl-130 {

    padding-left: 130px;

}



.pl-140 {

    padding-left: 140px;

}



.pl-150 {

    padding-left: 150px;

}





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

1.3. PAGE SECTION PADDING

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



.ptb-0 {

    padding: 0;

}



.ptb-10 {

    padding: 10px 0;

}



.ptb-20 {

    padding: 20px 0;

}



.ptb-30 {

    padding: 30px 0;

}



.ptb-40 {

    padding: 40px 0;

}



.ptb-50 {

    padding: 50px 0;

}



.ptb-60 {

    padding: 60px 0;

}



.ptb-70 {

    padding: 70px 0;

}



.ptb-80 {

    padding: 80px 0;

}



.ptb-90 {

    padding: 90px 0;

}



.ptb-100 {

    padding: 100px 0;

}



.ptb-110 {

    padding: 110px 0;

}



.ptb-120 {

    padding: 120px 0;

}



.ptb-130 {

    padding: 130px 0;

}



.ptb-140 {

    padding: 140px 0;

}



.ptb-150 {

    padding: 150px 0;

}



.p-100 {

    padding: 100px;

}





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

1.4. PAGE SECTION MARGIN

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



.mtb-0 {

    margin: 0;

}



.mtb-10 {

    margin: 10px 0;

}



.mtb-15 {

    margin: 15px 0;

}



.mtb-20 {

    margin: 20px 0;

}



.mtb-30 {

    margin: 30px 0;

}



.mtb-40 {

    margin: 40px 0;

}



.mtb-50 {

    margin: 50px 0;

}



.mtb-60 {

    margin: 60px 0;

}



.mtb-70 {

    margin: 70px 0;

}



.mtb-80 {

    margin: 80px 0;

}



.mtb-90 {

    margin: 90px 0;

}



.mtb-100 {

    margin: 100px 0;

}



.mtb-110 {

    margin: 110px 0;

}



.mtb-120 {

    margin: 120px 0;

}



.mtb-130 {

    margin: 130px 0;

}



.mtb-140 {

    margin: 140px 0;

}



.mtb-150 {

    margin: 150px 0;

}





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

1.5. BACKGROUND

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



.gray-bg {

    background-color: #f5f7fb;

}



.blue-grad-bg {

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(to right, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

}



.blue-grad-bg-2 {

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #ee0f6f 0%, #f89482 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(to right, #ee0f6f 0%, #f89482 100%) repeat scroll 0 0;

}





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

1.6. OVERLAY

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



.overlay-white,

.overlay-dark,

.overlay-grad-one,

.overlay-grad-two {

    position: relative;

    z-index: 0;

}



.overlay-white:after {

    background-color: rgba(245, 247, 251, 1);

    content: "";

    height: 100%;

    left: 0;

    opacity: 0.9;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";

    position: absolute;

    right: 0;

    top: 0;

    width: 100%;

    z-index: -1;

}



.overlay-dark:after {

    background-color: rgba(39, 45, 58, 1);

    content: "";

    height: 100%;

    left: 0;

    opacity: 0.85;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";

    position: absolute;

    right: 0;

    top: 0;

    width: 100%;

    z-index: -1;

}



.overlay-grad-one:after,

.overlay-grad-two:after {

    content: "";

    height: 100%;

    left: 0;

    opacity: 0.9;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";

    position: absolute;

    right: 0;

    top: 0;

    width: 100%;

    z-index: -1;

}



.overlay-grad-one:after {

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(to right, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

}



.overlay-grad-three {

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(to right, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    content: "";

    height: 100%;

    left: 0;

    opacity: 0.85;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";

    position: absolute;

    right: 0;

    top: 0;

    width: 100%;

    z-index: 0;

}





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

1.7. SECTION HEADDING STYLE

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



.section-heading {

    margin: 0 auto 80px;

    width: 60%;

}



.section-heading h2 {

    margin-bottom: 25px;

    padding-bottom: 25px;

    position: relative;

    text-transform: uppercase;

}



.section-heading h2:after {

    background: rgba(0, 0, 0, 0) url("img/others/line-shape.png") no-repeat scroll 0 0;

    content: "";

    height: 11px;

    left: 0;

    margin: 0 auto;

    position: absolute;

    right: 0;

    bottom: 0;

    width: 73px;

}



.section-heading.white-shape h2:after {

    background: rgba(0, 0, 0, 0) url("img/others/line-shape-white.png") no-repeat scroll 0 0;

}



.section-heading p {

    margin-bottom: 10px;

}





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

1.8. SECTION HEADDING STYLE 2

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



.section-heading.shape-2 h2:after {

    background: rgba(0, 0, 0, 0) url("img/others/line-shape-2.png") no-repeat scroll 0 0;

}



.browserupgrade {

    margin: 0.2em 0;

    background: #ccc;

    color: #000;

    padding: 0.2em 0;

}





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

2. HEADER AREA

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



header {

    left: 0;

    position: absolute;

    right: 0;

    top: 0;

    z-index: 3;

}



#navigation {

    padding: 0 15px;

}



.navbar {

    border-radius: 0;

    margin: 0;

    padding: 0;

    -webkit-transition: all 0.7s ease 0s;

    transition: all 0.7s ease 0s;

}



.navbar.affix-top {

    padding: 30px 0;

}



.navbar.affix {

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(to right, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.8);

}



.navbar-brand {

    height: auto;

    line-height: normal;

}



.navbar-brand>img {

    -webkit-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

    height: 75px;

}



.navbar-nav li a {

    color: #fff;

    font-size: 16px;

    font-weight: 600;

    padding: 20px;

}



.nav>li>a:focus,

.nav>li>a:hover,

.nav>.active>a {

    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;

    color: #2b323f;

}





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

2.1. HEADER HOME STYLE 2

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



#slider-area.home-style-2 {

    background: rgba(0, 0, 0, 0) url("img/bg/7.jpg") no-repeat scroll center center / cover;

    padding-top: 90px;

}



.home-style-2 .navbar.affix {

    background: #272d3a none repeat scroll 0 0;

}



.home-style-2 .nav>li>a:focus,

.home-style-2 .nav>li>a:hover,

.home-style-2 .nav>.active>a {

    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;

    color: #ee0f6f;

}





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

2.2. BLOG PAGE HEADER STYLE

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



.navbar.navbar-white,

.navbar-white.navbar-fixed-top {

    background: #fff none repeat scroll 0 0;

}



.navbar-white .navbar-nav li a {

    color: #2b323f;

}



.navbar-white .nav>li>a:focus,

.navbar-white .nav>li>a:hover,

.navbar-white .nav>.active>a {

    color: #00c9fd

}



.navbar-white .navbar-toggle .icon-bar {

    background-color: #00c9fd;

}





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

3. SLIDER AREA

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



#slider-area,

.slider-wrapper {

    position: relative;

    z-index: 1;

    overflow: hidden;

}



#slider-area.home-style-1 {

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(to right, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    padding-top: 90px;

    position: relative;

}



#slider-area.home-style-1:after {

    border-left: 50vw solid #fff;

    border-top: 160px solid transparent;

    bottom: 0;

    content: "";

    height: 0;

    left: 0;

    position: absolute;

    width: 0;

    z-index: 1;

}



#slider-area.home-style-1:before {

    border-right: 50vw solid #fff;

    border-top: 160px solid transparent;

    bottom: 0;

    content: "";

    height: 0;

    position: absolute;

    right: 0;

    width: 0;

    z-index: 1;

}



.slide .container {

    position: relative;

    z-index: 1;

}



.slider-text {

    padding-bottom: 25em;

    padding-top: 15em;

    width: 85%;

    position: relative;

    z-index: 2;

}



.slider-text h1 {

    color: #fff;

    font-size: 72px;

    font-weight: 700;

    margin-bottom: 20px;

    text-transform: uppercase;

}



.slider-text p {

    color: #fff;

    font-size: 16px;

    width: 86%;

}



.button-group .btn-white {

    font-size: 16px;

}



.button-group .download-btn {

    margin-right: 30px;

}



.button-group {

    margin-top: 45px;

}



#slider-area .slider-image {

    position: absolute;

    right: 0px;

    top: 70px;

    z-index: 1;

}



.slider-image img {

    max-width: 385px;

    max-height: 600px;

}



.scroll-icon {

    bottom: 0;

    left: 0;

    position: absolute;

    right: 0;

    z-index: 2;

}



.scroll-icon a {

    display: inline-block;

    margin-bottom: 30px;

    position: relative;

    text-decoration: none;

    z-index: 1;

}



.scroll-icon a i {

    color: #fff;

    font-size: 48px;

}







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

3.1. SLIDER HOME STYLE 2

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



.promo-header-area {

    margin: 150px auto 0;

    width: 67%;

}



.promo-header-area h2 {

    color: #fff;

    font-size: 36px;

    font-weight: 300;

    letter-spacing: 8px;

    text-transform: uppercase;

}



.promo-header-area h1 {

    color: #fff;

    font-size: 72px;

    font-weight: 600;

    text-transform: uppercase;

}



.promo-header-area p {

    color: #fff;

    font-size: 16px;

    font-weight: 500;

    line-height: 26px;

    margin-bottom: 30px;

}



.promo-header-area .btn.btn-style-2:after {

    opacity: 1;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

}



.swiper-container.one {

    padding-top: 40px;

}



.promo-header-area .swiper-slide {

    padding: 0 43px;

}





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

3.2. SLIDER HOME STYLE 3

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



#slider-area.home-style-3 {

    padding-top: 90px;

}



.home-style-3 .slider-text>h1 {

    font-size: 60px;

}



.slider-text span {

    font-weight: 300;

}





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

4. APP FEATURES AREA

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



.single-feature {

    padding: 30px;

    position: relative;

    -webkit-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

}



.single-feature:hover {

    background-color: #fff;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

}



.single-feature:after {

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(to right, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    bottom: 0;

    content: "";

    height: 2px;

    left: 0;

    opacity: 0;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    position: absolute;

    right: 0;

    -webkit-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

    width: 100%;

}



.single-feature:hover:after {

    opacity: 1;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

}



.feature-icon img {

    margin-top: 10px;

}



.feature-details p {

    margin-bottom: 0;

}





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

4.1. APP FEATURES AREA HOME STYLE 2

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



#app-features-area.home-style-2 {

    padding-top: 40px;

}



.single-feature.feature-style-2 {

    padding: 50px 30px;

    text-align: center;

}



.feature-style-2 .feature-icon {

    margin-bottom: 30px;

    min-height: 50px;

}



.feature-style-2 .feature-icon img {

    margin-top: 0;

}





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

5. APP ABOUT AREA

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



#app-about-area .section-heading {

    margin-bottom: 0;

}



.about-app h3 {

    margin-bottom: 30px;

}



.about-app p {

    margin-bottom: 35px;

}



.store-buttons {

    margin-top: 50px;

}



.store-buttons a {

    text-align: left;

}



.store-buttons a i,

.store-buttons a p {

    -webkit-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

}



.about-app .store-buttons a:hover i,

.about-app .store-buttons a:hover p {

    color: #fff;

}



.store-buttons a p {

    line-height: 1.2;

}



.store-buttons i {

    color: #fff;

    font-size: 24px;

    padding-right: 10px;

    vertical-align: middle;

}



.about-app .store-buttons i {

    color: #2b323f;

}



.store-buttons span {

    font-size: 18px;

    font-weight: 700;

}



.about-app-mockup img {

    margin-left: auto;

}



.gray-bg .btn.btn-bordered-grad:after {

    background: #f5f7fb none repeat scroll 0 0;

}





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

6. HOW IT WORKS AREA

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



#how-it-works-area .section-heading {

    margin-bottom: 50px;

}



.hiw-feature {

    padding: 30px;

    -webkit-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

}



.hiw-feature:hover {

    background-color: #fff;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

}



.hiw-feature-content {

    position: relative;

}



.hiw-mockup {

    left: 0;

    position: absolute;

    right: 0;

    top: 45px;

}



.hiw-feature-icon img {

    margin-top: 15px;

}



.hiw-feature-details h5 {

    text-transform: uppercase;

}



.hiw-feature-details p {

    margin-bottom: 0;

}





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

6.1. HOW IT WORKS AREA HOME STYLE 2

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



.hiw-feature-content.style-2 {

    margin-top: 50px;

}



.hiw-mockup.style-2 {

    top: -20px;

}





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

7. AWESOME FEATURES AREA

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



#awesome-features-area {

    background: rgba(0, 0, 0, 0) url("img/bg/1.jpg") no-repeat scroll center center / cover;

}



#awesome-features-area .section-heading {

    margin-bottom: 0;

}



#awesome-features-area .awesome-feature {

    margin-top: 80px;

}



#awesome-features-area .media-left {

    padding-right: 20px;

}



.awesome-feature-icon span {

    display: block;

    height: 60px;

    margin-left: 10px;

    position: relative;

    width: 60px;

}



.awesome-feature-icon span:after {

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(to right, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    border-radius: 50px;

    content: "";

    height: 100%;

    left: 0;

    position: absolute;

    top: 0;

    width: 100%;

    z-index: 0;

}



.awesome-feature-icon i {

    background-color: #f5f7fa;

    border-radius: 60px;

    color: #4c5462;

    display: inline-block;

    font-size: 24px;

    height: calc(100% - 2px);

    left: 1px;

    line-height: 58px;

    position: relative;

    text-align: center;

    top: 1px;

    -webkit-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

    width: calc(100% - 2px);

    z-index: 1;

}



.awesome-feature:hover .awesome-feature-icon i {

    background: transparent;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

    color: #fff;

}



.asesome-feature-details h5 {

    font-weight: 700;

    text-transform: uppercase;

}





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

8. PROMO VIDEO AREA

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



#promo-video-area {

    position: relative;

    top: 120px;

    z-index: 2;

}



.video-demo-image {

    box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);

    display: inline-block;

    left: 50%;

    position: relative;

    -webkit-transform: translateX(-50%);

    transform: translateX(-50%);

}



#promo-video-area .overlay-grad-one:after {

    z-index: 1;

}



#promo-video-area .overlay-grad-two:after {

    z-index: 1;

}



.video-play-icon {

    left: 0;

    position: absolute;

    right: 0;

    text-align: center;

    top: 50%;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%);

}



.video-play-icon i {

    background-color: rgba(0, 0, 0, 0.5);

    border-radius: 80px;

    color: #fff;

    display: inline-block;

    font-size: 36px;

    height: 80px;

    line-height: 80px;

    text-align: center;

    width: 80px;

}





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

9. FUN FACT AREA

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



#fun-fact-area {

    background: rgba(0, 0, 0, 0) url("img/bg/2.jpg") no-repeat scroll center center / cover;

    padding: 220px 0 100px;

}



.single-fact i {

    color: #fff;

    display: inline-block;

    font-size: 48px;

    margin-bottom: 28px;

}



.single-fact h5 {

    color: #fff;

    font-weight: 700;

    margin-bottom: 20px;

}



.single-fact h2 {

    color: #fff;

    font-size: 30px;

}





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

10. APP SCREENSHOTS AREA

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



.slider-wrapper-2 .slide {

    margin: 0 15px;

}



.slider-wrapper-2 .slider-image {

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);

    margin: 5px 0 10px;

    position: relative;

}



.slider-wrapper-2 .slider-image:hover .preview-icon {

    opacity: 1;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

}



.preview-icon {

    background-color: rgba(0, 0, 0, 0.85);

    height: 100%;

    left: 0;

    opacity: 0;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    position: absolute;

    right: 0;

    text-align: center;

    top: 0;

    -webkit-transition: all 0.3s;

    transition: all 0.3s;

    width: 100%;

    margin: 0 auto;

}



.preview-icon i {

    background-color: rgba(255, 255, 255, 0.2);

    border-radius: 70px;

    color: #fff;

    font-size: 30px;

    height: 70px;

    left: 0;

    line-height: 70px;

    margin: 0 auto;

    position: absolute;

    right: 0;

    top: 50%;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%);

    width: 70px;

}



.slider-wrapper-2.slick-dotted.slick-slider {

    margin-bottom: 60px;

}



.slick-dots li {

    border: 1px solid #3AD7DF;

    border-radius: 50px;

    cursor: pointer;

    display: inline-block;

    height: 12px;

    margin: 0 5px;

    padding: 0;

    position: relative;

    width: 12px;

}



.slick-dots li.slick-active {

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(to right, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    border: medium none;

}



.slick-dots li button {

    display: none;

}



.slick-dots {

    bottom: 70px;

}



#app-screenshot-area .slick-dots {

    bottom: -70px;

}



.swiper-container {

    width: 100%;

    padding-bottom: 60px;

}



.swiper-slide {

    width: 390px;

    height: auto;

    padding: 0 15px;

}



.swiper-slide img {

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);

}



.swiper-slide .slider-image .preview-icon {

    z-index: -1;

    width: calc(100% - 30px);

}



.swiper-slide.swiper-slide-active .slider-image:hover .preview-icon {

    opacity: 1;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    z-index: 1;

}



.swiper-container-horizontal>.swiper-pagination-bullets,

.swiper-pagination-custom,

.swiper-pagination-fraction {

    bottom: 0;

}



.swiper-pagination-bullet {

    background: transparent none repeat scroll 0 0;

    border: 1px solid #ee0f6f;

    border-radius: 100%;

    display: inline-block;

    height: 12px;

    opacity: 1;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    width: 12px;

}



.swiper-pagination-bullet-active {

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #ee0f6f 0%, #f89482 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(to right, #ee0f6f 0%, #f89482 100%) repeat scroll 0 0;

    border: medium none;

    height: 12px;

    opacity: 1;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    width: 12px;

}





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

11. TEAM AREA

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



#team-area {

    background: rgba(0, 0, 0, 0) url("img/bg/3.jpg") no-repeat scroll center center / cover;

}



#team-area .section-heading h2,

#team-area .section-heading p {

    color: #fff;

}



.single-member {

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);

    position: relative;

}



.member-description {

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, rgba(0, 201, 253, 0.95) 0%, rgba(129, 238, 142, 0.95) 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(0, 201, 253, 0.95) 0%, rgba(129, 238, 142, 0.95) 100%) repeat scroll 0 0;

    height: 100%;

    left: 15px;

    opacity: 0;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    position: absolute;

    right: 0;

    top: 15px;

    width: 100%;

    -webkit-transition: all 0.5s;

    transition: all 0.5s;

}



.single-member:hover .member-description {

    left: 30px;

    opacity: 1;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    top: 30px;

}



.member-description-inner {

    left: 0;

    padding: 20px;

    position: absolute;

    right: 0;

    top: 50%;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%);

}



.member-name {

    margin-bottom: 5px;

}



.designation {

    color: #fff;

    font-weight: 600;

}



.short-description {

    color: #fff;

}



.social {

    margin: 0;

}



.social a {

    background: #fff none repeat scroll 0 0;

    border: 0 none;

    border-radius: 100px;

    color: #70798f;

    display: inline-block;

    font-size: 16px;

    height: 35px;

    line-height: 35px;

    position: relative;

    -webkit-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

    width: 35px;

    z-index: 1;

}



.social a:after {

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(to right, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    border-radius: 100px;

    content: "";

    height: 100%;

    left: 0;

    opacity: 0;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    position: absolute;

    top: 0;

    -webkit-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

    width: 100%;

    z-index: -1;

}



.social a:hover:after {

    opacity: 1;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

}



.social a:hover {

    color: #fff;

}



.social i {

    position: relative;

    z-index: 1;

}







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

12. TESTIMONIAL AREA

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



#testimonial-area .slick-dotted.slick-slider {

    margin-bottom: 0;

}



#testimonial-area .slider-content {

    box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);

    margin: 50px 0 30px;

    padding: 60px;

    position: relative;

}



#testimonial-area .slider-content:before {

    background: rgba(0, 0, 0, 0) url("./img/others/quote-icon.png") no-repeat scroll 0 0;

    content: "";

    height: 50px;

    left: 70px;

    position: absolute;

    top: 70px;

    width: 50px;

    z-index: 1;

}



.client-image img {

    border: 2px solid #dddddd;

}



.client-image {

    left: 0;

    position: absolute;

    right: 0;

    top: -50px;

    width: 100px;

    margin: 0 auto;

}



.client-testimonial {

    margin-bottom: 20px;

}



.home-style-2 .client-testimonial {

    margin-bottom: 0;

}



.client-testimonial h3 {

    margin-bottom: 0;

    margin-top: 20px;

}



.client-review {

    margin-bottom: 0;

    margin-top: 20px;

}



#testimonial-area.home-style-2 .slick-dots {

    bottom: -30px;

}





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

12.1. TESTIMONIAL AREA HOME STYLE 2

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



.testimonial-slider-2 .slide {

    padding: 0 40px;

    opacity: 0.5;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

}



.testimonial-slider-2 .slide.slick-active {

    opacity: 1;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

}



.testimonial-slider-2 .slick-prev,

.testimonial-slider-2 .slick-next {

    height: 50px;

    line-height: 50px;

    width: 50px;

    z-index: 5;

}



.testimonial-slider-2 .slick-prev {

    left: 170px;

}



.testimonial-slider-2 .slick-next {

    right: 170px;

}



.testimonial-slider-2 .slick-prev:before {

    content: "\eb8a";

}



.testimonial-slider-2 .slick-next:before {

    content: "\eb8b";

}



.testimonial-slider-2 .slick-prev:before,

.testimonial-slider-2 .slick-next:before {

    color: #ee0f6f;

    font-family: "icofont";

    font-size: 48px;

    line-height: 1;

    opacity: 0.75;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";

}





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

13. PRICING TABLE AREA

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



#pricing-table-area {

    background: rgba(0, 0, 0, 0) url("img/bg/4.jpg") no-repeat scroll center center / cover;

}



.single-price-table {

    background-color: #fff;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);

}



.single-price-table:hover {

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

}



.doller-sign {

    font-size: 18px;

    bottom: 0;

}



.duration {

    color: #4c5462;

    font-size: 12px;

    font-weight: 400;

    bottom: 0;

    text-transform: capitalize;

}



.plan-title {

    color: #fff;

    font-weight: 700;

    letter-spacing: 5px;

    margin: 0;

    padding: 20px 0;

}



.price-value {

    margin: 0;

    padding: 20px 0;

}



.pricing-content {

    padding: 40px 0;

}



.table-content li {

    color: #4c5462;

    margin-bottom: 15px;

}



.table-content li:last-child {

    margin-bottom: 0;

}



.pricing-footer {

    padding: 20px 0 30px;

    position: relative;

    z-index: 1;

}



.pricing-footer .btn-grad:before {

    background: #fff none repeat scroll 0 0;

}



.pricing-footer .btn-grad:hover:before {

    background: transparent none repeat scroll 0 0;

}



.pricing-footer .btn {

    font-size: 12px;

    letter-spacing: 2px;

    text-transform: uppercase;

}



.pricing-footer a:hover {

    color: #000;

}



.pricing-footer:after {

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(to right, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    content: "";

    height: 1px;

    left: 0;

    position: absolute;

    right: 0;

    top: 0;

    width: 100%;

}



.pricing-footer:before {

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(to right, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    content: "";

    height: 100%;

    left: 0;

    opacity: 0;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    position: absolute;

    top: 0;

    -webkit-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

    width: 100%;

    z-index: -1;

}



.single-price-table:hover .pricing-footer:before {

    opacity: 1;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

}



.single-price-table:hover .btn.btn-bordered-grad:after {

    opacity: 0;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

}



.single-price-table:hover .price-value {

    color: #00c9fd;

}



.single-price-table:hover .pricing-footer p,

.single-price-table:hover .pricing-footer a {

    color: #fff;

}





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

14. FAQ AREA

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



.faq-content-wrapper {

    position: relative;

}



.faq-content-wrapper:before {

    background-color: #70798f;

    content: "";

    height: calc(100% - 60px);

    left: -40px;

    position: absolute;

    top: 30px;

    width: 1px;

}



.panel-heading:before {

    background-color: #fff;

    border: 1px solid;

    border-radius: 50px;

    content: "";

    height: 15px;

    left: -48px;

    position: absolute;

    top: 50%;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%);

    width: 15px;

}



.faq-right-img-mockup {

    left: -200px;

    position: absolute;

}



.panel-group {

    margin: 0;

}



#accordion.panel-group .panel {

    border-radius: 0;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);

    margin-top: 30px;

    position: relative;

}



.panel:before {

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(top, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    content: "";

    height: 100%;

    left: -2px;

    position: absolute;

    top: 0;

    width: 2px;

}



#accordion .panel:first-child {

    margin-top: 0;

}



.panel-group .panel-body {

    border: 0 none;

    padding: 0 30px 10px;

}



#accordion .panel-body {

    border: 0 none;

}



.panel-heading {

    border: 0 none;

    border-radius: 0;

    margin: 0;

    padding: 20px 30px;

    position: relative;

}



.panel-title {

    color: #4c5462;

    font-size: 18px;

}



.panel-title a {

    color: inherit;

    display: block;

    position: relative;

}



.panel-title a.collapsed:after {

    content: "\f0a5";

}



.panel-title a:after {

    border: 1px solid #00c9fd;

    border-radius: 50px;

    color: #00c9fd;

    content: "";

    font-family: Icofont;

    font-size: 12px;

    font-weight: normal;

    height: 22px;

    line-height: 20px;

    position: absolute;

    right: -22px;

    text-align: center;

    top: 50%;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%);

    width: 22px;

}





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

14.1. FAQ AREA HOME STYLE 2

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



.faq-home-2 .faq-right-img-mockup {

    left: auto;

    right: -70px;

}





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

15. APP DOWNLOAD AREA

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



.download-app h1 {

    margin-bottom: 15px;

}



#app-download-area {

    position: relative;

}



#app-download-area:after {

    background: rgba(0, 0, 0, 0) url("img/mockups/download-app-mockup.png") no-repeat scroll right bottom;

    content: "";

    height: 100%;

    position: absolute;

    right: 0;

    top: 0;

    width: 100%;

    z-index: 0;

}



.download-app {

    position: relative;

    z-index: 1;

}



.download-app h1,

.download-app p {

    color: #fff;

}



.download-app h1 {

    margin-bottom: 15px;

}





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

15.1. APP DOWNLOAD AREA HOME STYLE 2

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



#app-download-area.home-style-2:after {

    background: rgba(0, 0, 0, 0) url("img/mockups/download-app-mockup-2.png") no-repeat scroll right bottom;

}





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

16. BLOG AREA

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



.post-content {

    margin-top: 10px;

}



.meta-info {

    margin-bottom: 15px;

}



.post-title {

    color: #2b323f;

    font-weight: 700;

    margin-bottom: 25px;

    text-transform: capitalize;

}



.post-title a:hover {

    color: #00c9fd;

}



.read-more-wrapper {

    margin-top: 30px;

}



.post-content .read-more-btn {

    color: #2b323f;

    font-size: 14px;

    font-weight: 600;

    text-transform: capitalize;

    position: relative;

}



.post-content .read-more-btn:hover {

    color: #00c9fd;

}



.meta-info li,

.meta-info li a {

    color: #757575;

}



.meta-info a:hover {

    color: #00c9fd;

}



.read-more-btn i {

    color: inherit;

    font-size: 24px;

    opacity: 0;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    position: absolute;

    right: -20px;

    top: 50%;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%);

    -webkit-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

}



.read-more-btn:hover i {

    color: #00c9fd;

    opacity: 1;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    right: -25px;

}





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

17. SUBSCRIBE AREA

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



.subscribe-wrapper {

    background-color: #2b323f;

    padding: 40px 100px;

}



.subscribe-text h2 {

    color: #fff;

    margin-right: 20px;

    padding-top: 17px;

    text-align: right;

    text-transform: uppercase;

}



.subscribe-box {

    position: relative;

}



.subscribe-box .form-control {

    background: #fff none repeat scroll 0 0;

    border: 0 none;

    border-radius: 50px;

    box-shadow: none;

    color: #4c5462;

    font-size: 18px;

    height: 65px;

    padding: 0 158px 0 50px;

}



.subscribe-box .form-control::-moz-placeholder {

    color: #4c5462;

    font-size: 18px;

}



.subscribe-box button {

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(to right, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    border: medium none;

    border-radius: 100px;

    color: #fff;

    font-size: 36px;

    height: 65px;

    padding: 0 60px;

    position: absolute;

    right: 0;

    top: 0;

}





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

18. CONTACT AREA

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



#contact-area {

    position: relative;

}



#map {

    width: 100%;

    height: 660px;

}



.contact-box {

    left: 50%;

    margin: 0 auto;

    position: absolute;

    top: 50%;

    transform: translateX(-50%);

}



.contact-box-inner {

    background-color: #00c9fd;

    box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);

}



.contact-box-inner .address-box {

    background-color: #00c9fd;

    padding-left: calc(100px - 30px);

}



.get-in-touch {

    background-color: #fff;

}



.get-in-touch h2 {

    text-transform: capitalize;

}



.get-in-touch form {

    margin-top: 30px;

    position: relative;

}



.form-group {

    position: relative;

}



.form-grad-border {

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(to right, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    bottom: 0;

    content: "";

    height: 1px;

    left: 0;

    opacity: 0;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    position: absolute;

    -webkit-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

    width: 100%;

}



.get-in-touch .form-control:focus+.form-grad-border {

    opacity: 1;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

}



.get-in-touch .form-control {

    -moz-border-bottom-colors: none;

    -moz-border-left-colors: none;

    -moz-border-right-colors: none;

    -moz-border-top-colors: none;

    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;

    border-color: -moz-use-text-color -moz-use-text-color #e5e5e5;

    -o-border-image: none;

    border-image: none;

    border-radius: 0;

    border-style: none none solid;

    border-width: 0 0 1px;

    box-shadow: none;

    color: #2b323f;

    height: auto;

    margin-bottom: 30px;

    padding: 10px 0;

    position: relative;

}



.get-in-touch .form-control::-moz-placeholder {

    color: #757575;

}



.get-in-touch .form-control:focus::-moz-placeholder {

    color: #2b323f;

}



.get-in-touch textarea {

    resize: vertical;

}



.get-in-touch .btn {

    color: #fff;

    font-size: 12px;

    letter-spacing: 2px;

    padding: 15px 30px;

}



.get-in-touch .btn:hover {

    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);

}



.get-in-touch .btn-grad:before {

    display: none;

}



.address-box h2 {

    color: #fff;

    margin-bottom: 25px;

    text-transform: capitalize;

}



.address-box p {

    color: #fff;

}



.address-info {

    margin-top: 40px;

}



.info-icon i {

    border: 1px solid #fff;

    border-radius: 50px;

    color: #fff;

    display: inline-block;

    font-size: 18px;

    height: 30px;

    line-height: 28px;

    text-align: center;

    width: 30px;

}



.info-icon {

    padding-right: 10px;

}



.info-details p {

    font-size: 18px;

}



.address-info li {

    margin-bottom: 10px;

}



.appai-form-send-message {

    bottom: -25px;

    left: 0;

    line-height: 1;

    margin: 0;

    position: absolute;

}



.appai-form-send-message.success {

    color: #3c763d;

}



.appai-form-send-message.error {

    color: #a94442;

}





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

19. FOOTER AREA

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



#footer-area {

    background-color: #2b323f;

    padding-bottom: 45px;

    padding-top: 23em;

}



#footer-area .social {

    margin-bottom: 25px;

    margin-top: 45px;

}



.copyright p {

    color: #fff;

    margin-bottom: 0;

}



.copyright a {

    color: #00c9fd;

}





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

19.1. FOOTER AREA HOME STYLE 2

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



.home-style-2 .copyright a {

    color: #ee0f6f;

}





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

20. BLOG TWO COLUMNS

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





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

20.1. BREADCRUMB

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



.breadcrumb-area {

    background: rgba(0, 0, 0, 0) url("img/bg/5.jpg") no-repeat scroll center center / cover;

    position: relative;

}



.breadcrumb-area:before {

    background: rgba(39, 45, 58, 0.75) none repeat scroll 0 0;

    content: "";

    height: 100%;

    left: 0;

    position: absolute;

    right: 0;

    top: 0;

    width: 100%;

}



.breadcrumb-area h2 {

    color: #fff;

    padding: 110px 0 70px;

    text-align: center;

}



.breadcrumb-nav {

    margin-bottom: 10px;

}



.breadcrumb-nav li a {

    color: #fff;

}



.breadcrumb-nav .active {

    color: #00c9fd;

}



.breadcrumb-nav li {

    font-weight: 500;

    position: relative;

}



.breadcrumb-nav li:after {

    color: #fff;

    content: "-";

    position: absolute;

    right: -5px;

}



.breadcrumb-nav li:last-child:after {

    display: none;

}





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

20.2. BLOG

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



.home-style-2 .blog-post a:hover,

.home-style-2 .post-content .read-more-btn:hover,

.home-style-2 .read-more-btn:hover i {

    color: #f89482;

}



.blog-post {

    margin-bottom: 50px;

}



.home-style-1 .blog-post,

.home-style-2 .blog-post {

    margin-bottom: 0;

}





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

20.3. PAGINATION 

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



.pagination-nav {

    text-align: center;

}



.pagination-nav li {

    padding: 0 3px;

}



.pagination-nav li a {

    border: 1px solid #858585;

    color: #858585;

    font-family: poppins;

    font-size: 12px;

    height: 35px;

    line-height: 35px;

    text-align: center;

    width: 35px;

}



.pagination-nav li a:hover,

.pagination-nav li a:focus,

.pagination-nav li a:focus,

.pagination-nav .active a {

    background-color: #00c9fd;

    border-color: #00c9fd;

    color: #fff;

}



.pagination-nav i {

    display: inline-block;

    font-size: 18px;

    position: relative;

    top: 2px;

}





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

21. BLOG LEFT SIDEBAR

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



.single-widget {

    margin-bottom: 30px;

}



.widget-content {

    position: relative;

}



.widget-title {

    border-bottom: 1px solid #e5e5e5;

    color: #2b323f;

    font-weight: 600;

    font-size: 18px;

    margin-bottom: 25px;

    padding-bottom: 10px;

    text-transform: uppercase;

}



.widget-content.search-widget {

    padding: 0;

}



.search-widget input {

    background-color: #f7f7f7;

    border: medium none;

    color: #2b323f;

    height: 45px;

    padding: 10px 45px 10px 15px;

    width: 100%;

}



.search-widget input::-moz-placeholder {

    color: #858585;

    font-size: 12px;

}



.search-widget button {

    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;

    border: medium none;

    color: #00c9fd;

    font-size: 18px;

    height: 45px;

    line-height: 45px;

    padding: 0;

    position: absolute;

    right: 0;

    top: 0;

    width: 45px;

}



.widget-content a {

    color: #2b323f;

    font-weight: 500;

    text-transform: capitalize;

}



.widget-content a:hover,

.widget-content a:focus,

.widget-content a:active,

.widget-content .dropdown li a:hover,

.widget-content .dropdown li a:focus,

.widget-content .dropdown li a:active {

    border-color: #00c9fd;

    color: #00c9fd;

}



.categories-widget li {

    margin-bottom: 15px;

}



.categories-widget .dropdown ul {

    margin-top: 10px;

    -webkit-transition: all 0.1s ease 0s;

    transition: all 0.1s ease 0s;

}



.categories-widget .dropdown li {

    margin-bottom: 0;

}



.categories-widget .dropdown li a {

    color: #4c5462;

    font-size: 12px;

    padding: 5px 10px;

}



.tags-widget a {

    border: 1px solid #e5e5e5;

    color: #4c5462;

    display: inline-block;

    font-size: 12px;

    height: 30px;

    line-height: 30px;

    margin-bottom: 5px;

    margin-right: 2px;

    padding: 0 15px;

}



.widget-single-post {

    border-bottom: 1px solid #f7f7f7;

    padding: 20px 0;

}



.widget-single-post:first-child {

    padding-top: 0;

}



.widget-single-post:last-child {

    border-bottom: 0 none;

}



.widget-post-thumb {

    padding-right: 20px;

}



.popular-post-widget p {

    color: #757575;

    font-size: 12px;

    font-weight: 400;

    line-height: 1;

    margin-bottom: 10px;

}



.widget-post-content h6 {

    font-size: 14px;

    line-height: 20px;

    margin-bottom: 0;

}



#instafeed>a {

    float: left;

    padding: 5px;

    width: 33.3333%;

}



#instafeed img {

    max-width: 100%;

}





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

22. BLOG DETAILS

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



.blog-single-post .meta-info {

    margin-bottom: 25px;

}



.blog-single-post p {

    margin-bottom: 25px;

}





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

22.1. SOCIAL SHARE AND TAGS

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



.share-post-wrapper {

    background-color: #f6f6f6;

    margin-top: 30px;

    padding: 15px 30px;

}



.social-share {

    float: left;

}



.social-share li {

    padding: 0;

}



.social-share a {

    color: #c4c4c4;

    font-size: 16px;

    padding: 0 7px;

}



.social-share a:hover {

    color: #00c9fd;

}



.post-tags {

    float: right;

    padding-left: 20px;

    position: relative;

    text-align: right;

}



.post-tags:before {

    color: #c4c4c4;

    content: "\f0eb";

    font-family: Icofont;

    font-size: 12px;

}



.post-tags>a {

    font-size: 12px;

    margin-right: 2px;

    position: relative;

}



.post-tags>a:hover {

    color: #00c9fd;

}



.post-tags>a:after {

    content: ",";

    position: absolute;

}



.post-tags>a:last-child:after {

    content: "";

}





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

22.2. POST COMMENTS AREA

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



.post-comments-area {

    margin-top: 80px;

}



.post-comments-area>h5 {

    margin-bottom: 15px;

}



.comment-author {

    font-size: 14px;

    text-transform: uppercase;

}



.comment-time-left {

    font-size: 12px;

    line-height: 1;

}



.post-comments-area .comment-time-left {

    margin-bottom: 15px;

}



.post-comments-area .media-left {

    padding-right: 15px;

}



.post-comments-area .media-body {

    position: relative;

}



.comment-reply {

    font-size: 12px;

    font-weight: 600;

    position: absolute;

    right: 0;

    text-transform: uppercase;

    top: 22px;

}



.post-comments-area a:hover {

    color: #00c9fd;

}



.post-comments-area .media {

    border-bottom: 1px solid #f7f7f7;

    margin: 0;

    padding: 25px 0;

}



.post-comments-area p {

    margin-bottom: 0;

}



.media-list>.media:last-child {

    border-bottom: 0 none;

}



.media-replay .media {

    padding-left: 30px;

}





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

22.3. POST NEW COMMENT

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



.post-new-comment {

    margin-top: 20px;

}



.post-new-comment>h5 {

    margin-bottom: 30px;

}



.post-new-comment .form-control {

    border: 1px solid #e5e5e5;

    border-radius: 0;

    box-shadow: none;

}



.post-new-comment input {

    height: 40px;

}



.post-new-comment .form-group {

    margin-bottom: 25px;

}



.post-new-comment textarea {

    height: 120px;

    resize: vertical;

}



.post-new-comment .btn-grad:before {

    display: none;

}



.post-new-comment .btn {

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 2px;

    padding: 15px 30px;

    text-transform: uppercase;

}





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

22.4. RELATED POST AREA

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



.related-posts-area {

    padding-top: 120px;

}



.related-posts-area .blog-post {

    margin-bottom: 0;

}





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

23. COMMING SOON PAGE

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



.comming-soon-wrapper {

    background: rgba(0, 0, 0, 0) url("./img/bg/8.jpg") no-repeat scroll center center / cover;

    position: relative;

    z-index: 1;

}



.ovarlay {

    background-color: #272d3a;

    height: 100%;

    left: 0;

    opacity: 0.95;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";

    position: absolute;

    right: 0;

    top: 0;

    width: 100%;

    z-index: -1;

}



.count-down-area {

    margin: 0 auto;

    width: 70%;

}



.header-text>h1 {

    color: #fff;

    font-size: 48px;

    font-weight: 300;

    margin-bottom: 70px;

}



.header-text span {

    font-weight: 600;

}



.cdown {

    float: left;

    width: 25%;

}



.cdown span {

    border: 1px solid #00c9fd;

    display: block;

    margin: 0 40px;

}



.cdown strong {

    color: #fff;

    display: block;

    font-size: 60px;

    font-weight: 700;

    line-height: 1;

    padding: 20px 0;

}



.cdown p {

    background-color: #00c9fd;

    color: #fff;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 2px;

    line-height: 1;

    margin: 0;

    padding: 10px 0;

    text-transform: uppercase;

}



.comming-soon-wrapper #footer-area {

    background-color: transparent;

    padding-bottom: 50px;

    padding-top: 120px;

}



.comming-soon-wrapper #footer-area .social {

    margin-bottom: 25px;

    margin-top: 0;

    padding-bottom: 0;

}



.comming-soon-wrapper header {

    position: static;

}



.comming-soon-wrapper .logo {

    margin-top: 100px;

}



.counter-area {

    padding: 170px 0 150px;

    text-align: center;

}





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

23.1. COMMING SOON SUBSCRIBE AREA

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



.comming-soon-wrapper .subscribe-wrapper {

    background: transparent none repeat scroll 0 0;

    margin: 0 auto;

    padding: 0;

    text-align: center;

    width: 50%;

}



.comming-soon-wrapper .subscribe-box .email-submit-btn {

    font-size: 12px;

    font-weight: 600;

    height: 42px;

    letter-spacing: 2px;

    padding: 0 30px;

}



.comming-soon-wrapper .subscribe-box .form-control {

    background: #303542 none repeat scroll 0 0;

    color: #fff;

    height: 42px;

    padding: 0 142px 0 30px;

    text-transform: lowercase;

}



.comming-soon-wrapper .subscribe-box .form-control::-moz-placeholder {

    color: #fff;

    font-size: 14px;

    letter-spacing: 1px;

}



.comming-soon-wrapper .subscribe-box:after {

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(to right, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    border-radius: 100px;

    content: "";

    height: calc(100% + 2px);

    left: -1px;

    position: absolute;

    top: -1px;

    width: calc(100% + 2px);

    z-index: -1;

}



.comming-soon-wrapper .subscribe-text h5 {

    color: #fff;

    margin-bottom: 25px;

}



.comming-soon-wrapper .social li {

    display: inline-block;

    padding-left: 10px;

    padding-right: 10px;

}



.comming-soon-wrapper .social a {

    color: #00c9fd;

    font-size: 25px;

    height: 45px;

    line-height: 45px;

    width: 45px;

    z-index: 1;

}



.comming-soon-wrapper .social li a i {

    background: #2f3441 none repeat scroll 0 0;

    border-radius: 50px;

    display: block;

    line-height: 45px;

    -webkit-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

}



.comming-soon-wrapper .grad-bg-hover li a:after {

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(to right, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    border-radius: 50px;

    content: "";

    height: calc(100% + 2px);

    left: -1px;

    opacity: 1;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    position: absolute;

    top: -1px;

    -webkit-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

    width: calc(100% + 2px);

    z-index: 0;

}



.comming-soon-wrapper .grad-bg-hover li a:hover i {

    background: transparent none repeat scroll 0 0;

    color: #fff;

}





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

24. HOME PAGE 3 STYLE

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



#slider-area.home-style-3 .slider-image {

    top: 120px;

}



#slider-area.home-style-3 .slider-text {

    padding-bottom: 19em;

    padding-top: 15em;

}



.single-usage {

    float: left;

    margin: 0;

    padding: 0 70px;

    position: relative;

    width: 33.3333%;

}



.single-usage:after {

    background-color: #cdcdcd;

    content: "";

    height: 30px;

    position: absolute;

    right: 0;

    top: 50%;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%);

    width: 1px;

}



.single-usage:last-child:after {

    display: none;

}



.single-usage:first-child {

    margin-left: 70px;

}



.single-usage:last-child {

    margin-left: -70px;

    padding-left: 140px;

    padding-right: 0;

}



.usage-icon.media-left {

    padding-right: 20px;

    vertical-align: middle;

}



.usage-icon i {

    color: #00c9fd;

    font-size: 30px;

}



.useges-quantity h2 {

    color: #00c9fd;

    font-size: 36px;

    line-height: 1;

    margin: 0;

}



.useges-quantity p {

    color: #4c5462;

    font-weight: 700;

    margin: 0;

    text-transform: uppercase;

}



#app-features-area.home-style-3.ptb-150 {

    padding-top: 110px;

}



.home-style-3 .about-app-mockup img {

    margin-left: -100px;

}



#fun-fact-area.home-style-3 {

    padding: 220px 0 150px;

}



.home-style-3 .download-app {

    margin-top: 100px;

    position: relative;

    z-index: 1;

}



.home-style-3 {

    position: relative;

    z-index: 1;

}



.home-style-3:before {

    content: "";

    height: 100%;

    left: 0;

    position: absolute;

    top: 0;

    -webkit-transform: skewY(170deg);

    transform: skewY(170deg);

    width: 100%;

    z-index: 0;

}



.home-style-3.gray-bg {

    background: transparent none repeat scroll 0 0;

}



.home-style-3:after {

    -webkit-transform: skewY(170deg);

    transform: skewY(170deg);

}



#slider-area.home-style-3:before {

    background: #fff none repeat scroll 0 0;

    height: 50%;

    top: 70%;

}



#app-features-area.home-style-3:before {

    background: #fff none repeat scroll 0 0;

    height: 50%;

    top: 50%;

}



#app-about-area.home-style-3:before {

    background: #f5f7fb none repeat scroll 0 0;

}



#how-it-works-area.home-style-3:before {

    background: #fff none repeat scroll 0 0;

}



#awesome-features-area.home-style-3:before {

    background: rgba(0, 0, 0, 0) url("img/bg/1.jpg") no-repeat scroll center center / cover;

}



#awesome-features-area.home-style-3 {

    background: transparent none repeat scroll 0 0;

}



#fun-fact-area.home-style-3 {

    background: transparent none repeat scroll 0 0;

}



#fun-fact-area.home-style-3:before {

    background: rgba(0, 0, 0, 0) url("img/bg/2.jpg") no-repeat scroll center center / cover;

}



#team-area.home-style-3 {

    background: transparent none repeat scroll 0 0;

}



#team-area.home-style-3:before {

    background: rgba(0, 0, 0, 0) url("img/bg/2.jpg") no-repeat scroll center center / cover;

}



#pricing-table-area.home-style-3 {

    background: transparent none repeat scroll 0 0;

}



#pricing-table-area.home-style-3:before {

    background: rgba(0, 0, 0, 0) url("img/bg/2.jpg") no-repeat scroll center center / cover;

}



#app-download-area.home-style-3 {

    background: transparent none repeat scroll 0 0;

}



#app-download-area.home-style-3:before {

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(to right, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

}







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

25. HOME PAGE 4 STYLE

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



#slider-area.home-style-1.home-style-4 {

    background: rgba(0, 0, 0, 0) url("img/slider_bg.jpg") repeat scroll center center / cover;

    overflow: hidden;

    padding-top: 0;

}



#slider-area.home-style-1.home-style-4:before {

    z-index: 1;

}





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

26. HOME PAGE 5 STYLE

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



#slider-area.home-style-5 {

    background: rgba(0, 0, 0, 0) url("img/bg/9.jpg") no-repeat scroll center center / cover;

    padding-top: 90px;

}



#slider-area.home-style-5:before {

    background: rgba(0, 0, 0, 0) url("img/bg/10.png") no-repeat scroll center bottom / 100% auto;

    bottom: 0;

    content: "";

    height: 100%;

    left: 0;

    position: absolute;

    right: 0;

    width: 100%;

    z-index: 0;

}





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

27. HOME PAGE 6 STYLE

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



#slider-area.home-style-6 {

    background: rgba(0, 0, 0, 0) url("img/bg/6.jpg") repeat scroll center center / cover;

    overflow: hidden;

    padding-top: 0;

}



.home-style-6 .overlay-grad-three {

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(to right, #00c9fd 0%, #81ee8e 100%) repeat scroll 0 0;

    content: "";

    height: 100%;

    left: 0;

    opacity: 0.85;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";

    position: absolute;

    right: 0;

    top: 0;

    width: 100%;

    z-index: -2;

}





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

28. HOME PAGE 7 STYLE

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



.video-background-area {

    position: relative;

    overflow: hidden;

}



#video-background {

    height: 100%;

    left: 0;

    position: absolute;

    top: 0;

    width: 100%;

    z-index: 0;

}





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

29. HOME PAGE 8 STYLE

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



.video-background-area.home-style-8 #video-background {

    z-index: -1;

}





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

30. HOME PAGE 9 STYLE

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



.video-background-area.home-style-9 #video-background {

    z-index: -2;

}





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

31. HOME PAGE 10 STYLE

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



#slider-area.home-style-1.home-style-10:before {

    border-right: 100vw solid #fff;

    border-top: 120px solid #fff;

    bottom: 0;

    content: "";

    height: 0;

    position: absolute;

    right: 0;

    width: 0;

    z-index: 0;

}



#slider-area.home-style-1.home-style-10:after {

    display: none;

}



#slider-area.home-style-10 .slider-image {

    top: 120px;

}



#slider-area.home-style-10 .slider-text {

    padding-bottom: 28em;

}



.home-style-10 .scroll-icon {

    bottom: 100px;

}



#app-features-area.home-style-10 {

    margin-top: -40px;

}





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

32. HOME PAGE 11 STYLE

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



#slider-area.home-style-11 {

    background: rgba(0, 0, 0, 0) url("img/bg/6.jpg") no-repeat scroll center center / cover;

}



#slider-area.home-style-1.home-style-11:before {

    z-index: 1;

}





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

33. PARTICLE BG

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



.particle-bg {

    overflow: hidden;

    position: relative;

    z-index: 1;

}



.shape {

    -webkit-animation: 15s ease-in 0s normal forwards infinite running shape;

    animation: 15s ease-in 0s normal forwards infinite running shape;

    border: 2px solid #fff;

    box-shadow: 0 0 20px #00c9fd;

    height: 10px;

    left: 0;

    position: absolute;

    top: 0;

    -webkit-transform: scale(0) rotate(0deg) translate(-50%, -50%);

    transform: scale(0) rotate(0deg) translate(-50%, -50%);

    -webkit-transform-origin: left top 0;

    transform-origin: left top 0;

    width: 10px;

}



.shape:nth-child(2n) {

    border-style: solid;

    border-width: 0 3px 5.196px 3px;

    border-color: transparent transparent #fff transparent;

    box-shadow: 0 0 20px #81ee8e;

    height: 0;

    left: 75vw;

    top: 50vh;

    width: 0;

}



.shape:nth-child(2) {

    -webkit-animation-delay: 4s;

    animation-delay: 4s;

    left: 75vw;

    top: 50vh;

}



.shape:nth-child(3) {

    -webkit-animation-delay: 4s;

    animation-delay: 4s;

    left: 25vw;

    top: 40vh;

}



.shape:nth-child(4) {

    -webkit-animation-delay: 6s;

    animation-delay: 6s;

    left: 90vw;

    top: 10vh;

}



.shape:nth-child(5) {

    -webkit-animation-delay: 8s;

    animation-delay: 8s;

    background-color: #fff;

    border: 0;

    left: 10vw;

    top: 85vh;

}



.shape:nth-child(6) {

    -webkit-animation-delay: 10s;

    animation-delay: 10s;

    left: 50vw;

    top: 100vh;

}



.shape:nth-child(7) {

    -webkit-animation-delay: 10s;

    animation-delay: 10s;

    left: 87vw;

    top: 80vh;

}



@-webkit-keyframes shape {

    0% {

        opacity: 0.5;

        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

        -webkit-transform: scale(0) rotate(0deg) translate(-50%, -50%);

        transform: scale(0) rotate(0deg) translate(-50%, -50%);

    }

    100% {

        opacity: 0;

        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

        -webkit-transform: scale(20) rotate(960deg) translate(-50%, -50%);

        transform: scale(20) rotate(960deg) translate(-50%, -50%);

    }

}



@keyframes shape {

    0% {

        opacity: 0.5;

        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

        -webkit-transform: scale(0) rotate(0deg) translate(-50%, -50%);

        transform: scale(0) rotate(0deg) translate(-50%, -50%);

    }

    100% {

        opacity: 0;

        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

        -webkit-transform: scale(20) rotate(960deg) translate(-50%, -50%);

        transform: scale(20) rotate(960deg) translate(-50%, -50%);

    }

}



#particles-js {

    height: 100%;

    left: 0;

    position: absolute;

    top: 0;

    width: 100%;

    z-index: -1;

}



#particles-js.home-style-16 {

    opacity: 0.;

}



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

34. ANGLE BG

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



#angle-bg {

    height: 100%;

    left: 0;

    position: absolute;

    top: 0;

    width: 100%;

    z-index: -1;

}





#slider-area.home-style-18::after {

    position: absolute;

    bottom: 0;

    width: 100%;

    height: 20%;

    z-index: 0;

    background: url(img/bg/10.png) no-repeat center bottom / 100% 100%;

    left: 0;

    right: 0;

    content: '';

}



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

35. PRELOADER

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

#preloader-wrapper {

    background: linear-gradient(to right, #00c9fd 0%, #81ee8e 100%);

    height: 100%;

    left: 0;

    position: fixed;

    right: 0;

    text-align: center;

    top: 0;

    width: 100%;

    z-index: 9999999;

}



.preloader-wave-effect {

    height: 50px;

    left: 50%;

    margin: 0 -25px;

    position: absolute;

    right: 0;

    text-align: center;

    top: 50%;

    transform: translate(-50%, -50%);

    width: 50px;

}



.preloader-wave-effect::before,

.preloader-wave-effect::after {

    animation: 1.6s linear 0s normal none infinite running preloader-wave;

    background: #fff none repeat scroll 0 0;

    border-radius: 100%;

    content: "";

    height: 50px;

    position: absolute;

    width: 50px;

}



.preloader-wave-effect::after {

    animation-delay: -0.8s;

}



@keyframes preloader-wave {

    0% {

        opacity: 1;

        transform: scale(0, 0);

    }

    100% {

        opacity: 0;

        transform: scale(1, 1);

    }

}