/*--------------------------------------------------------------------------------------
Theme Name: APPTON
Theme URI: http://quomodosoft.com
Author URI: http://quomodosoft.com
Description: 100% Responsive, Highly Customizable, SEO Friendly Apps Landing HTML5 template using Twitter Bootstrap Latest, Search Engine Friendly.
Author: Mehedi Hasan Nahid
Version: 1.0
----------------------------------------------------------------------------------------
    1. TOP AREA
        2.1. WELCOME TEXT AREA
    2. ABOUT AREA
    3. FEATURES AREA
    4. VIDEO AREA
    5. TESTMONIAL AREA
    6. FUN FACT AREA
    7. PRICE AERA
    8. FAQS AREA
    9. DOWNLOAD AREA
    10. BLOG AREA
    11. CONTACT AREA
    12. FOOTER AREA
    13. SCROLL TO TOP AREA
    14. HOME VERSION TWO
----------------------------------------------------------------------------------------*/

/*----------------------------
    1.1. WELCOME TEXT AREA
------------------------------*/

.welcome-text-area .area-bg::before {
    background: url(assets/img/home/home-shape.png) no-repeat scroll center center / cover;
}

/*---------------------------
    2. ABOUT AREA
----------------------------*/

.about-content h3 {
    color: #8256ff;
    font-size: 30px;
    font-weight: 400;
}

.read-more {
    background: #8256ff none repeat scroll 0 0;
    border: 2px solid #8256ff;
    border-radius: 5px;
    color: #ffffff;
    display: inline-block;
    font-size: 14px;
    letter-spacing: 2px;
    padding: 8px 30px;
    text-transform: uppercase;
}

.read-more:hover {
    background: #ffffff none repeat scroll 0 0;
    color: #8256ff;
}

/*--------------------------------
    3. FEATURES AREA
---------------------------------*/

.features-box-icon {
    background: #eef3f9 none repeat scroll 0 0;
    border-radius: 5px;
    padding: 30px;
    width: 120px;
}


/*--------------------------------
    4. VIDEO AREA
---------------------------------*/

.video-area .area-bg::before {
    background: #8256ff none repeat scroll 0 0;
    opacity: 0.75;
}

.video-promo-details {
    border-radius: 10px;
}

.video-area-popup {
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    font-size: 60px;
    height: 70px;
    line-height: 1;
    padding-top: 6px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 70px;
    text-align: center;
    color: #fff;
}

.video-area-popup:hover {
    background: #ffffff none repeat scroll 0 0;
    color: #8256ff;
}

/*---------------------------------
    5. TESTMONIAL AREA
----------------------------------*/

.author-content {
    background: #f7f9fc none repeat scroll 0 0;
    padding-bottom: 60px;
    padding-top: 60px;
    position: relative;
}

.author-content::after {
    border-bottom: 40px solid rgba(0, 0, 0, 0);
    border-left: 60px solid #f7f9fc;
    bottom: -40px;
    content: "";
    height: 0;
    left: 50px;
    position: absolute;
    width: 0;
}

.testmonial-quote {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.testmonial-quote::before,
.testmonial-quote::after {
    color: #dddddd;
    content: "\f10d";
    font-family: fontawesome;
    font-size: 41px;
    left: 20px;
    line-height: 1;
    opacity: 0.5;
    position: absolute;
    top: 20px;
}

.testmonial-quote::after {
    bottom: 16px;
    content: "\f10e";
    left: auto;
    right: 20px;
    top: auto;
}

.author-name-image {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 80px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 100px;
}

.author-img {
    border: 2px solid #8256ff;
    border-radius: 50%;
    height: 80px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 80px;
}

.author-name-image h4 {
    margin-bottom: 0;
}

.testmonial-slider.owl-carousel {
    overflow: hidden;
}

.testmonial-area .owl-nav > div {
    background: #8256ff none repeat scroll 0 0;
    border-radius: 50%;
    color: #ffffff;
    font-size: 20px;
    height: 40px;
    left: -30px;
    opacity: 0;
    padding-top: 7px;
    position: absolute;
    text-align: center;
    top: 30%;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    visibility: hidden;
    width: 40px;
}

.testmonial-area .owl-nav > div.owl-next {
    left: auto;
    right: -30px;
}

.testmonial-area .owl-nav > div:hover {
    background: #586082 none repeat scroll 0 0;
}

.owl-carousel:hover .owl-nav > div.owl-next {
    opacity: 1;
    right: 0;
    visibility: visible;
}

.owl-carousel:hover .owl-nav > div.owl-prev {
    left: 0;
    opacity: 1;
    visibility: visible;
}

/*.testmonial-area .owl-controls {
    height: 20px;
    margin-top: 30px;
}*/

.testmonial-area .owl-dots {
    left: 50%;
    position: absolute;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.testmonial-area .owl-dots > div {
    border: 1px solid #586082;
    border-radius: 50%;
    display: inline-block;
    height: 15px;
    margin: 0 5px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 15px;
}

.testmonial-area .owl-dots > div.active {
    background: #8256ff none repeat scroll 0 0;
    border-color: #8256ff;
}

/*----------------------------------
    6. FUN FACT AREA
----------------------------------*/

.fun-fact-area .area-bg {
    background: rgba(0, 0, 0, 0) url("assets/img/fact-bg.jpg") no-repeat scroll center center / cover;
}

.fun-fact-area .area-bg::after {
    background: #8256ff none repeat scroll 0 0;
    opacity: 0.9;
}

/*---------------------------------
    7. PRICE AERA
-----------------------------------*/

.single-price {
    border: 1px solid #f7f9fc;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    background: rgba(0, 0, 0, 0) url("../../assets/img/price-bg.svg") no-repeat scroll center center / 100% 100%;
}

.single-price .area-bg {
    z-index: -1;
}

.single-price .area-bg::before {
    background: rgba(0, 0, 0, 0) url("assets/img/price-bg.svg") no-repeat scroll center center / 100% 100%;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    z-index: -2;
}

/*.single-price .area-bg::after {
    background: rgba(0, 0, 0, 0) url("assets/img/price-bg-hover.svg") no-repeat scroll center center / 100% 100%;
    opacity: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    z-index: -1;
}*/

.single-price:hover .area-bg::after,
.single-price.active .area-bg::after {
    opacity: 1;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.price-hidding h3,
.price-rate h3 {
    color: #8256ff;
}

.price-rate h3 sub,
.price-rate h3 sup {
    font-size: 24px;
    font-weight: 400;
}

.price-rate h3 sub {
    color: #4d557d;
    font-size: 16px;
}

.price-details ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.price-details li {
    margin-bottom: 15px;
}

.purchase-button {
    background: #8256ff none repeat scroll 0 0;
    border: 2px solid #8256ff;
    border-radius: 5px;
    color: #ffffff;
    display: inline-block;
    letter-spacing: 1px;
    padding: 8px 30px;
}

.purchase-button:hover {
    background: #ffffff none repeat scroll 0 0;
    color: #8256ff;
}

/*--------------------------------
    8. FAQS AREA
---------------------------------*/

.panel.panel-default {
    margin-bottom: 30px;
}

.panel-default > .panel-heading {
    background-color: #ecf1fa;
}

.active .accordion-toggle {
    color: #8256ff;
}

.panel-body {
    border-top: 0;
}

.accordion-toggle .panel-title .fa-angle-down {
    margin-top: 5px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.accordion-toggle.collapsed .panel-title .fa-angle-down {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

/*--------------------------------
    9. DOWNLOAD AREA
---------------------------------*/

.download-button a {
    border: 2px solid;
    border-radius: 5px;
    color: #8256ff;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 5px;
    padding: 10px 25px 10px 60px;
    position: relative;
    width: 210px;
}

.download-button a i {
    font-size: 30px;
    left: 15px;
    line-height: 1;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.download-button a:hover,
.download-button a.active {
    background: #8256ff none repeat scroll 0 0;
    border-color: #8256ff;
    -webkit-box-shadow: 0 15px 50px rgba(130, 86, 255, 0.4);
    box-shadow: 0 15px 50px rgba(130, 86, 255, 0.4);
    color: #ffffff;
}

/*---------------------------------
    11. CONTACT AREA
----------------------------------*/

.contact-form-content {
    background: #ffffff none repeat scroll 0 0;
    -webkit-box-shadow: 0 12px 35px rgba(130, 86, 255, 0.3);
    box-shadow: 0 12px 35px rgba(130, 86, 255, 0.3);
}

.contact-form input,
.contact-form textarea {
    border: 1px solid #f3f3f3;
    border-radius: 0;
    -webkit-box-shadow: 0 0 0 1px #cacfda;
    box-shadow: 0 0 0 1px #cacfda;
    margin-bottom: 30px;
    min-height: 50px;
    padding: 10px;
}

.contact-form input:focus,
.contact-form textarea:focus {
    -webkit-box-shadow: 0 0 0 1px rgba(130, 86, 255, 0.9);
    box-shadow: 0 0 0 1px rgba(130, 86, 255, 0.9);
}

.contact-form button,
.contact-form input[type="submit"] {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 2px solid;
    border-radius: 5px;
    color: #8256ff;
    font-size: 14px;
    letter-spacing: 2px;
    padding: 8px 20px;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.contact-form button:hover,
.contact-form input[type="submit"]:hover {
    background: #8256ff none repeat scroll 0 0;
    border-color: #8256ff;
    color: #ffffff;
}


.subscriber-form {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #dddddd;
    border-radius: 5px;
    font-size: 18px;
    height: 70px;
    margin-bottom: 50px;
    position: relative;
    text-transform: capitalize;
}

.subscriber-form input {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
    border-radius: 5px;
    color: black;
    height: 100%;
    left: 0;
    letter-spacing: 1px;
    padding: 10px 11% 10px 30px;
    position: absolute;
    top: 0;
    width: 80%;
}

.subscriber-form button {
    background: #8256ff none repeat scroll 0 0;
    border: 2px solid #8256ff;
    border-radius: 5px;
    color: #ffffff;
    font-size: 14px;
    height: 100%;
    letter-spacing: 2px;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 150px;
}

.subscriber-form button:hover {
    background: #ffffff none repeat scroll 0 0;
    color: #8256ff;
}

label.mt10 {
    bottom: -52px;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
}

label.mt10.valid {
    bottom: 18px;
    color: #8256ff;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
}

.contact-area .box-icon {
    border: 2px solid #8256ff;
    border-radius: 50%;
    color: #8256ff;
    display: inline-block;
    font-size: 30px;
    height: 60px;
    padding-top: 14px;
    text-align: center;
    width: 60px;
}

.contact-area .text-icon-box:hover .box-icon {
    background: #8256ff none repeat scroll 0 0;
    border-color: #8256ff;
    color: #ffffff;
}

/*---------------------------------
    12. FOOTER AREA
----------------------------------*/

.footer-area {
    padding: 30px 0;
    background: rgba(0, 0, 0, 0) url("../../assets/img/footer-bg.png") no-repeat scroll center center / cover;
    color: #ffffff;
}

.footer-area a:hover {
    color: #ffffff;
}

body.page-template .footer-area {
    background: inherit;
    color: inherit;
}

body.page-template .footer-area a {
    background: inherit;
    color: inherit;
}

body.page-template .footer-area a:hover {
    color: #8256ff;
}

.social-bookmark li a {
    border: 1px solid;
    border-radius: 50%;
    height: 35px;
    margin: 0 3px;
    padding-top: 4px;
    text-align: center;
    width: 35px;
}

.footer-copyright {
    padding: 30px 0;
}

/*---------------------------------
    13. SCROLL TO TOP AREA
----------------------------------*/

.scrolltotop {
    background: #404873 none repeat scroll 0 0;
    bottom: 20px;
    color: #ffffff;
    display: none;
    font-size: 20px;
    height: 40px;
    padding-top: 8px;
    position: fixed;
    right: 20px;
    text-align: center;
    width: 40px;
    z-index: 9;
}

.scrolltotop:hover,
.scrolltotop:focus {
    background: #8256ff;
    color: #ffffff;
}

/*----------------------------------
    14. HOME VERIANT
-----------------------------------*/
.welcome-text-area {
    position: relative;
}
.home-shadow.welcome-text-area,
.home-perticle.welcome-text-area, 
.home-ribbon.welcome-text-area,
.home-graph.welcome-text-area 
{
    height: 100vh;
    position: relative;
}
.home-shadow.welcome-text-area a,
.home-ribbon.welcome-text-area a,
.home-graph.welcome-text-area a
{
    color: #ffffff;
}

section {
    background: #ffffff;
}
section.content-section{
    background: transparent;
}

canvas#canvas_shadow {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

#particle-canvas {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

.home-video .welcome-text-area:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: #000000;
    opacity: .5;
}

canvas#granim-canvas {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.canvas_graph {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background-color: #27253f;
}

.canvas_ribbon {
    /*
    rgba(0, 0, 0, 0) linear-gradient(-45deg, #8256ff, #292929) repeat scroll 0 0;
    background: #403060;*/
    background: #29295f;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -9;
}

@-webkit-keyframes infiniteStats {
    0% {
        -webkit-transform: translate3d(-1920px, 0px, 0px);
        transform: translate3d(-1920px, 0px, 0px);
    }
    100% {
        -webkit-transform: translate3d(0px, 0px, 0px);
        transform: translate3d(0px, 0px, 0px);
    }
}

@keyframes infiniteStats {
    0% {
        -webkit-transform: translate3d(-1920px, 0px, 0px);
        transform: translate3d(-1920px, 0px, 0px);
    }
    100% {
        -webkit-transform: translate3d(0px, 0px, 0px);
        transform: translate3d(0px, 0px, 0px);
    }
}

.canvas_graph::after {
    -webkit-animation: 120s linear 0s normal none infinite running infiniteStats;
    animation: 120s linear 0s normal none infinite running infiniteStats;
    background: rgba(0, 0, 0, 0) url("../../assets/img/lines.svg") repeat-x scroll 0 0;
    bottom: 0;
    content: "";
    height: 406px;
    left: -1440px;
    position: absolute;
    right: 0;
    width: calc(1920px * 3);
}
.kc-pricing-tables {
    background: rgba(0, 0, 0, 0) url("../../assets/img/price-bg.svg") no-repeat scroll center center / cover !important;
}
.home-city-animateor {
  height: 100vh;
  position: relative;
}
#city-canvas {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}