/*--------------------------------------------------------------------------------------
Theme Name: Applic
Theme URI: http://quomodosoft.com
Author URI: http://quomodosoft.com
Description: 100% Responsive, Highly Customizable, SEO Friendly Business template using Twitter Bootstrap Latest, Search Engine Friendly.
Author: Mehedi Hasan Nahid
Version: 2.0
----------------------------------------------------------------------------------------
    1. THEME BG COLOR
    2. PRELOADER
    3. SCROLL TO TOP
    4. AREA BACKGROUND
    5. TOP AERA
    6. SECTION TITLE
    7. SLIDER CONTROL BUTTONS
    8. SERVICE BOX
    9. READ MORE BUTTON
    10. WELCOME TEXT AREA
    11. FEATURES AREA
    12. ABOUT AREA
    13. PROCESS AREA
    14. GOAL AREA
    15. VIDEO PROMO AREA
    16. SCREENSHOT SLIDER
    17. TESTMONIAL AREA
    18. PRICE AREA
    19. FAQS AREA
    20. BLOG AREA
    21. CONTACT AREA
    22. HOME TWO LAYERS
    23. HOME THREE
    24. HOME FOUR
    25. SINGLE PAGE
    26. PRODUCT PAGE
    27. SINGE PRODUCT PAGE
----------------------------------------------------------------------------------------*/
/*---------------------------
    1. THEME BG COLOR
-----------------------------*/
.overflow-xhidden {
    overflow-x: hidden;
    overflow-y: inherit;
}

section,
header {
    background: #ffffff none repeat scroll 0 0;
}

.area-image-content,
.area-content {
    position: relative;
    z-index: 9;
}

/*--------------------------
    BUTTONS & BACKGROUND
----------------------------*/
.blue-btn {
    background: #4d84fc none repeat scroll 0 0;
    color: #fff;
}

.blue-btn:hover {
    background: #ffffff none repeat scroll 0 0;
    color: #4d84fc;
}

.purple-btn {
    background: #4431a7 none repeat scroll 0 0;
    color: #ffffff;
}

.purple-btn:hover {
    background: #ffffff none repeat scroll 0 0;
    color: #4431a7;
}

.soft-purple-btn {
    background: #614dc7 none repeat scroll 0 0;
    color: #ffffff;
}

.soft-purple-btn:hover {
    background: #fff;
    color: #614dc7;
}

/*---------------------------
    2. PRELOADER
-----------------------------*/
.preeloader {
    background: rgba(255, 255, 255, 1) none repeat scroll 0 0;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 999999;
}

.preloader-spinner {
    -webkit-animation: 1s ease-out 0s normal none infinite running pulsate;
    animation: 1s ease-out 0s normal none infinite running pulsate;
    border: 5px solid #292929;
    border-radius: 40px;
    display: block;
    height: 40px;
    left: 50%;
    margin: -20px 0 0 -20px;
    opacity: 0;
    position: fixed;
    top: 50%;
    width: 40px;
    z-index: 10;
}

@-webkit-keyframes pulsate {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@keyframes pulsate {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

/*---------------------------------
    3. SCROLL TO TOP
----------------------------------*/

.scrolltotop {
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, #584bfb 0%, #45aafd 99%) repeat scroll 0 0;
    border-radius: 50%;
    bottom: 20px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
    color: #ffffff;
    display: none;
    font-size: 24px;
    height: 60px;
    padding-top: 17px;
    position: fixed;
    right: 20px;
    text-align: center;
    width: 60px;
    z-index: 99;
}

.scrolltotop:hover,
.scrolltotop:focus {
    background: #ffffff none repeat scroll 0 0;
    color: #584bfb;
}

/*---------------------------------
    4. AREA BACKGROUND
----------------------------------*/

.area-bg {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.area-bg::after,
.area-bg::before {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}


/*---------------------------------
    5. TOP AERA
----------------------------------*/

.top-area {
    position: relative;
    width: 100%;
    /*height: 100%;*/
}

.welcome-text-area {
    height: 100%;
    padding-top: 100px;
    width: 100%;
}

/*---------------------------------
    6. SECTION TITLE
----------------------------------*/
.area-title {
    margin-bottom: 80px;
    position: relative;
}

.subtitle {
    color: #5368fd;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 30px;
    overflow: hidden;
    text-transform: uppercase;
}

.subtitle .letter {
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    display: inline-block;
    line-height: 1em;
}

.area-title h2 {
    font-size: 48px;
    line-height: 1.2;
    margin-bottom: 20px;
    text-transform: capitalize;
    font-weight: 600;
}

.area-title h2 span {
    color: #5368fd;
}

@media only screen and (min-width: 1920px) {}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .top-area {
        overflow: hidden;
    }
}

@media (min-width: 768px) and (max-width: 991px) {}

@media only screen and (max-width: 767px) {
    .area-title {
        margin-bottom: 50px;
    }

    .area-title h2 {
        font-size: 28px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .area-title h2 {
        font-size: 32px;
    }

    .download-area .area-title h2 {
        font-size: 32px;
    }
}

/*---------------------------------
    7. SLIDER CONTROL BUTTONS
---------------------------------*/
.owl-carousel .owl-item img {
    max-width: 100%;
    width: auto;
}

.owl-carousel .owl-nav > div {
    display: inline-block;
    font-size: 24px;
    height: 30px;
    padding-top: 3px;
    text-align: center;
    transition: all 0.3s ease 0s;
    width: 60px;
}

.owl-carousel .owl-nav > div:hover {
    background: #ffffff;
    color: #5368fd;
}

.owl-carousel .owl-dots {
    margin-top: 40px;
    text-align: center;
}

.owl-carousel .owl-dots > div {
    background: #bdc0f3 none repeat scroll 0 0;
    display: inline-block;
    height: 3px;
    margin: 0 5px;
    transition: all 0.3s ease 0s;
    width: 20px;
}



.owl-carousel .owl-dots > div.active {
    background: #ff911d none repeat scroll 0 0;
    width: 30px;
}

/*---------------------------------
    8. SERVICE BOX
----------------------------------*/
.text-icon-box {
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    z-index: 1;
}

.box-icon {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 20px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

/*.box-img-icon {
    display: inline-block;
    margin-bottom: 20px;
    width: 120px;
}*/

.box-img-icon {
    display: inline-block;
    margin-bottom: 20px;
    width: 60px;
}

.box-img-icon img {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.text-icon-box:hover .box-img-icon img {
    -webkit-filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(100deg) brightness(200%) contrast(100%) drop-shadow(7px 10px 3px #2d1e9d);
    filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(100deg) brightness(200%) contrast(100%) drop-shadow(7px 10px 3px #2d1e9d);
}

.box-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 20px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.box-subtitle {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.box-button {
    border: 1px solid;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-top: 20px;
    min-width: 130px;
    padding: 8px 25px;
    text-align: center;
    text-transform: uppercase;
}

/* ----------------------------
    BOX DEFAULT STYLE
------------------------------- */

.box-default-style {
    padding-left: 80px;
    position: relative;
}

.box-default-style .box-img-icon,
.box-default-style .box-icon {
    font-size: 50px;
    left: 0;
    top: 0;
    position: absolute;
    width: 80px;
}

.box-default-style .box-img-icon img {
    width: 64px;
}

.box-default-style .box-icon {
    background: -webkit-gradient(linear, left top, right top, from(#21c2f8), to(#00deff));
    background: linear-gradient(to right, #21c2f8, #00deff);
    -ms-background: transparent;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    display: inline-block;
    font-size: 50px;
    height: 70px;
    width: 70px;
}

.box-default-style .box-title {
    font-size: 22px;
}

.box-default-style .box-subtitle {
    font-size: 18px;
    letter-spacing: 0.5px;
}

.box-default-style .box-button {
    border: 1px solid;
    display: inline-block;
    margin-top: 20px;
    padding: 8px 30px;
}

.box-default-hover:hover {
    -webkit-box-shadow: 0 7px 14px rgba(0, 0, 0, 0.3);
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.3);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

/* ---------------------------
    BOX STYLE
---------------------------- */

.box-style-1,
.box-style-2,
.box-style-3,
.box-style-4,
.box-style-5,
.box-style-6,
.box-style-10,
.box-style-11,
.box-style-12,
.box-style-13,
.box-style-14,
.box-style-15,
.box-style-22,
.box-style-23,
.box-style-24 {
    -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
    background: #ffffff;
}

.box-style-25,
.box-style-27,
.box-style-29,
.box-style-31,
.box-style-33,
.box-style-35 {
    padding-left: 80px;
}

.box-style-26,
.box-style-28,
.box-style-30,
.box-style-32,
.box-style-34,
.box-style-36 {
    padding-right: 80px;
}

.box-style-1 .box-icon,
.box-style-2 .box-icon,
.box-style-3 .box-icon,
.box-style-4 .box-icon,
.box-style-5 .box-icon,
.box-style-6 .box-icon,

.box-style-10 .box-icon,
.box-style-11 .box-icon,
.box-style-12 .box-icon,
.box-style-13 .box-icon,
.box-style-14 .box-icon,
.box-style-15 .box-icon,
.box-style-19 .box-icon,
.box-style-20 .box-icon,
.box-style-21 .box-icon,
.box-style-22 .box-icon,
.box-style-23 .box-icon,
.box-style-24 .box-icon,
.box-style-25 .box-icon,
.box-style-26 .box-icon,
.box-style-27 .box-icon,
.box-style-28 .box-icon,
.box-style-33 .box-icon,
.box-style-34 .box-icon,
.box-style-35 .box-icon,
.box-style-36 .box-icon {
    border: 1px solid;
    border-radius: 50%;
    display: inline-block;
    height: 70px;
    padding-top: 16px;
    text-align: center;
    width: 70px;
}

.box-style-7 .box-icon,
.box-style-8 .box-icon,
.box-style-9 .box-icon,
.box-style-16 .box-icon,
.box-style-17 .box-icon,
.box-style-18 .box-icon,
.box-style-29 .box-icon,
.box-style-30 .box-icon,
.box-style-31 .box-icon,
.box-style-32 .box-icon {
    font-size: 50px;
}

.box-style-4 .box-icon,
.box-style-5 .box-icon,
.box-style-6 .box-icon,
.box-style-13 .box-icon,
.box-style-14 .box-icon,
.box-style-15 .box-icon,
.box-style-27 .box-icon,
.box-style-28 .box-icon,
.box-style-33 .box-icon,
.box-style-34 .box-icon {
    border-radius: 0;
}


.icon-pos-left .box-icon,
.icon-pos-right .box-icon {
    position: absolute;
}

.icon-pos-left .box-icon {
    left: 0;
    top: 0;
}

.icon-pos-right .box-icon {
    right: 0;
    top: 0;
}

.box-style-37 .box-img-icon {
    width: 100%;
}

.box-style-38 .box-img-icon {
    float: left;
    margin-right: 20px;
    width: 50%;
}

.box-style-39 .box-img-icon {
    float: right;
    margin-left: 20px;
    width: 50%;
}

.box-style-38,
.box-style-39 {
    overflow: hidden;
}

.box-style-38 .box-title,
.box-style-39 .box-title {
    margin-top: 20px;
}

/* ---------------------------
    BOX HOVER STYLE
------------------------------ */

.box-hover-1::before,
.box-hover-2::before,
.box-hover-3::before,
.box-hover-4::before,
.box-hover-5::before,
.box-hover-6::before,
.box-hover-7::before,
.box-hover-8::before {
    background: #5368fd none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 3px;
    left: 0;
    opacity: 0;
    position: absolute;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
    z-index: -1;
}

.box-hover-6::before,
.box-hover-7::before {
    opacity: 1;
}

.box-hover-2::before {
    bottom: auto;
    top: 0;
}

.box-hover-3::before {
    height: 100%;
    width: 3px;
}

.box-hover-4::before {
    height: 100%;
    left: auto;
    right: 0;
    width: 3px;
}

.box-hover-5::before,
.box-hover-6::before,
.box-hover-7::before {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 3px solid;
    height: 100%;
    width: 100%;
}

.box-hover-6::before,
.box-hover-7::before {
    border-left: 3px solid;
    border-right: 3px solid;
    border-top: 0;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    border-bottom: 0;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
}

/*--------------------------
    BOX HOVER
----------------------------*/

.box-hover-1:hover,
.box-hover-2:hover,
.box-hover-3:hover,
.box-hover-4:hover,
.box-hover-5:hover,
.box-hover-6:hover,
.box-hover-7:hover {
    -webkit-box-shadow: 0 7px 14px rgba(0, 0, 0, 0.3);
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.3);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

.box-hover-6::after,
.box-hover-7::after {
    border-bottom: 3px solid;
    border-top: 3px solid;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center 0;
    transform-origin: left center 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}

.box-hover-7::before,
.box-hover-7::after {
    -webkit-transform-origin: center center 0;
    transform-origin: center center 0;
}

.box-hover-1:hover:before,
.box-hover-2:hover:before,
.box-hover-3:hover:before,
.box-hover-4:hover:before,
.box-hover-5:hover::before,

.box-hover-6:hover::before,
.box-hover-6:hover::after,

.box-hover-7:hover::before,
.box-hover-7:hover::after {
    opacity: .7;
}

/* -----------------
    BOX HOVER 6
-------------------- */

.box-hover-6:hover::before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

.box-hover-6:hover::after {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

/* ---------------
    BOX HOVER 7
------------------ */

.box-hover-7:hover::before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

.box-hover-7:hover::after {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

/* ---------------
BOX HOVER 8
------------------- */

.box-hover-8::before {
    opacity: .7;
}

.box-hover-8:hover,
.box-hover-8:hover a {
    color: #fff;
}

.box-hover-8:hover::before {
    height: 100%;
}

/* ------------------
    BOX HOVER 9
-------------------- */

.box-hover-9:hover,
.box-hover-9:hover a {
    color: #ffffff;
}

.box-hover-9::before {
    background: #5368fd none repeat scroll 0 0;
    border-radius: 50%;
    content: "";
    height: 50px;
    left: calc(50% - 25px);
    position: absolute;
    top: calc(50% - 25px);
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 50px;
    z-index: -1;
}

.box-hover-9:hover:before {
    -webkit-transform: scale(20);
    transform: scale(20);
}

/* --------------------------
    BOX HOVER 10 TO 17
---------------------------- */

.box-hover-10::before,
.box-hover-11::before,
.box-hover-12::before,
.box-hover-13::before,
.box-hover-14::before,
.box-hover-15::before,
.box-hover-16::before,
.box-hover-17::before {
    background: #5368fd none repeat scroll 0 0;
    border-radius: 50%;
    content: "";
    height: 50px;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: center center 0;
    transform-origin: center center 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 50px;
    z-index: -1;
}

.box-hover-11::before {
    bottom: 0;
    top: auto;
}

.box-hover-12::before {
    left: auto;
    right: 0;
}

.box-hover-13::before {
    bottom: 0;
    left: auto;
    right: 0;
    top: auto;
}

.box-hover-14::before {
    left: 50%;
    margin-left: -25px;
}

.box-hover-15::before {
    bottom: 0;
    left: 50%;
    margin-left: -25px;
    top: auto;
}

.box-hover-16::before {
    left: 0;
    margin-top: -25px;
    top: 50%;
}

.box-hover-17::before {
    left: auto;
    margin-top: -25px;
    right: 0;
    top: 50%;
}

.box-hover-10:hover::before,
.box-hover-11:hover::before,
.box-hover-12:hover::before,
.box-hover-13:hover::before,
.box-hover-14:hover::before,
.box-hover-15:hover::before,
.box-hover-16:hover::before,
.box-hover-17:hover::before {
    -webkit-transform: scale(20);
    transform: scale(20);
}

.box-hover-10:hover,
.box-hover-10:hover a,
.box-hover-11:hover,
.box-hover-11:hover a,
.box-hover-12:hover,
.box-hover-12:hover a,
.box-hover-13:hover,
.box-hover-13:hover a,
.box-hover-14:hover,
.box-hover-14:hover a,
.box-hover-15:hover,
.box-hover-15:hover a,
.box-hover-16:hover,
.box-hover-16:hover a,
.box-hover-17:hover,
.box-hover-17:hover a {
    color: #ffffff;
}

/* ----------------------
    HOVER 18 & 19
----------------------- */

.box-hover-18:hover,
.box-hover-19:hover,
.box-hover-20:hover,
.box-hover-21:hover,
.box-hover-18.active,
.box-hover-19.active,
.box-hover-20.active,
.box-hover-21.active {
    -webkit-box-shadow: 0 7px 14px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 7px 14px 0 rgba(0, 0, 0, 0.1);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

.box-hover-18::before,
.box-hover-19::before,
.box-hover-20::before,
.box-hover-20::after,
.box-hover-21::before,
.box-hover-21::after {
    content: "";
    height: 0;
    position: absolute;
    width: 0;
    opacity: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.box-hover-18::before,
.box-hover-20::before {
    border-top: 15px solid #5368fd;
    border-left: 15px solid #5368fd;
    border-bottom: 15px solid transparent;
    border-right: 15px solid transparent;
    left: 0;
    top: 0;
}



.box-hover-19::before,
.box-hover-20::after {
    border-top: 15px solid transparent;
    border-left: 15px solid transparent;
    border-bottom: 15px solid #5368fd;
    border-right: 15px solid #5368fd;
    bottom: 0;
    right: 0;
}

.box-hover-21::before {
    border-bottom: 15px solid transparent;
    border-left: 15px solid transparent;
    border-top: 15px solid #5368fd;
    border-right: 15px solid #5368fd;
    right: 0;
    top: 0;
}

.box-hover-21::after {
    border-left: 15px solid #5368fd;
    border-bottom: 15px solid #5368fd;
    border-top: 15px solid transparent;
    border-right: 15px solid transparent;
    bottom: 0;
    left: 0;
}

.box-hover-18:hover::before,
.box-hover-19:hover::before,
.box-hover-20:hover::before,
.box-hover-20:hover::after,
.box-hover-21:hover::before,
.box-hover-21:hover::after,
.box-hover-18.active::before,
.box-hover-19.active::before,
.box-hover-20.active::before,
.box-hover-20.active::after,
.box-hover-21.active::before,
.box-hover-21.active::after {
    opacity: 1;
}

/* ---------------------------
    BOX HOVER 22
---------------------------- */

.box-hover-22::before {
    background: #5368fd none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    width: 100%;
    z-index: -1;
}

.box-hover-22:hover::before {
    opacity: 1;
}

.box-hover-22:hover,
.box-hover-22:hover a,
.box-hover-22:hover h1,
.box-hover-22:hover h2,
.box-hover-22:hover h3,
.box-hover-22:hover h4,
.box-hover-22:hover h5,
.box-hover-22:hover h6 {
    color: #ffffff;
}


/*----------------------------
    9. READ MORE BUTTON
----------------------------*/
/*.read-more {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0;
    border-radius: 50px;
    color: rgb(255, 255, 255);
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    height: 55px;
    letter-spacing: 3px;
    margin-top: 50px;
    overflow: hidden;
    padding: 14px 40px;
    position: relative;
    text-transform: uppercase;
    transition: all 0.3s ease 0s;
    z-index: 1;
}

.read-more::before {
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, #584bfb 0%, #45aafd 99%) repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: all 0.3s ease 0s;
    width: 100%;
    z-index: -1;
}

.read-more:hover::before,
.read-more:focus::before,
.read-more.active::before {
    opacity: 0;
    visibility: hidden;
}

.read-more:hover,
.read-more:focus,
.read-more.active {
    background: #fff none repeat scroll 0 0;
    color: #5368fd;
    box-shadow: 0 16px 32px rgb(88, 75, 251, .3);
}

.read-more.active:hover {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: rgb(255, 255, 255);
}

.read-more.active:hover::before {
    opacity: 1;
    visibility: visible;
}*/

.read-more {
    background: #f0f1ff none repeat scroll 0 0;
    border: 0 none;
    border-radius: 50px;
    color: #252525;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    height: 55px;
    letter-spacing: 3px;
    margin-top: 50px;
    overflow: hidden;
    padding: 14px 40px;
    position: relative;
    text-transform: uppercase;
    transition: all 0.3s ease 0s;
    z-index: 1;
}

.read-more:hover,
.read-more:focus,
.read-more.active {
    color: #ffffff;
}

.read-more::before {
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, #584bfb 0%, #45aafd 99%) repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 0.3s ease 0s;
    width: 100%;
    z-index: -1;
}

.read-more.active:before,
.read-more:hover::before {
    opacity: 1;
}

.read-more.active:hover::before {
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, #45aafd 0%, #584bfb 99%) repeat scroll 0 0
}

/*----------------------------
    10. WELCOME TEXT AREA
------------------------------*/
.welcome-text-area .area-bg {
    background: url(assets/img/background/blue_bg.png) no-repeat scroll center center / 100% 100%;
}

.welcome-area {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
}

.welcome-text h4 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.welcome-text h1 {
    font-size: 60px;
    margin-bottom: 30px;
    font-weight: 700;
}

.welcome-text h1 span {
    display: block;
    font-weight: 300;
}

.home-button a {
    background: #4d84fc none repeat scroll 0 0;
    border-radius: 50px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
    color: #ffffff;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-right: 15px;
    padding: 15px 40px;
    position: relative;
    text-transform: uppercase;
}

.home-button a:hover {
    background: #ffffff;
    color: #4d84fc;
}

.home-button a i {
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.home-button a:hover i {
    margin-left: 10px;
}

.welcome-layer-1 {
    width: 70%;
}

@media only screen and (min-width: 1920px) {}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .welcome-text h1 {
        /*font-size: 52px;*/
        font-size: 50px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .welcome-text {
        text-align: center;
    }

    .top-area {
        height: auto;
    }
}

@media only screen and (max-width: 767px) {
    .welcome-text {
        text-align: center;
    }

    .welcome-text h1 {
        font-size: 26px;
    }

    .top-area {
        height: auto;
    }

}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .welcome-text h1 {
        font-size: 32px;
    }
}

/*-------------------------------
    HOME ONE WELCOME LAYERS
--------------------------------*/

.welcome-text {
    position: relative;
    z-index: 9;
}

.welcome-layer-1 {
    height: 100%;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}

.welcome-layer-1 img {
    -webkit-filter: drop-shadow(16px 32px 16px rgba(212, 212, 212, 0.5));
    filter: drop-shadow(16px 32px 16px rgba(212, 212, 212, 0.5));
}

.welcome-layer-1 .home1-layer-1 {
    position: absolute;
    right: 5%;
    text-align: right;
}

.welcome-layer-1 .home1-layer-1 img {
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
    width: 60%;
}

.welcome-layer-1 .home1-layer-2 {
    position: absolute;
    right: 15%;
    top: 42%;
}

.welcome-layer-1 .home1-layer-2 img {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    width: 60%;
}

.welcome-layer-1 .home1-layer-3 {
    bottom: -27%;
    position: absolute;
    right: -14%;
}

.welcome-layer-1 .home1-layer-3 img {
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
    width: 60%;
}

@media only screen and (min-width: 1920px) {
    .welcome-layer-1 .home1-layer-1 {
        position: absolute;
        right: 5%;
        text-align: right;
    }

    .welcome-layer-1 .home1-layer-1 img {
        -webkit-transform: rotate(-60deg);
        transform: rotate(-60deg);
        width: 70%;
    }

    .welcome-layer-1 .home1-layer-2 {
        position: absolute;
        right: 20%;
        top: 40%;
    }

    .welcome-layer-1 .home1-layer-2 img {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
        width: 70%;
    }

    .welcome-layer-1 .home1-layer-3 {
        bottom: -18%;
        position: absolute;
        right: -9%;
    }

    .welcome-layer-1 .home1-layer-3 img {
        -webkit-transform: rotate(-60deg);
        transform: rotate(-60deg);
        width: 70%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .welcome-layer-1 .home1-layer-1 {
        position: absolute;
        right: 4%;
        text-align: right;
        top: 7%;
    }

    .welcome-layer-1 .home1-layer-1 img {
        -webkit-transform: rotate(-60deg);
        transform: rotate(-60deg);
        width: 50%;
    }

    .welcome-layer-1 .home1-layer-2 {
        position: absolute;
        right: 1%;
        top: 48%;
    }

    .welcome-layer-1 .home1-layer-2 img {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
        width: 50%;
    }

    .welcome-layer-1 .home1-layer-3 {
        bottom: -15%;
        position: absolute;
        right: -35%;
    }

    .welcome-layer-1 .home1-layer-3 img {
        -webkit-transform: rotate(-60deg);
        transform: rotate(-60deg);
        width: 50%;
    }
}

/*--------------------------
    11. FEATURES AREA
---------------------------*/

.features-slider {
    width: 100vw;
}

.single-features {
    box-shadow: 0 16px 32px rgba(199, 199, 199, 0.3);
    margin: 30px 20px;
    padding: 50px 20px;
    text-align: center;
}

.single-features .box-icon {
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, #584bfb 0%, #45aafd 99%) repeat scroll 0 0;
    border-radius: 50%;
    color: #fff;
    font-size: 28px;
    height: 80px;
    margin: 0 auto 20px;
    padding-top: 26px;
    width: 80px;
}

.single-features::after {
    background: #e4e7ff none repeat scroll 0 0;
    bottom: 50px;
    content: "";
    height: 3px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 50px;
}

.single-features h3 {
    margin-bottom: 30px;
}

.features-slider .owl-nav {
    position: absolute;
    right: 30%;
    top: -170px;
}

/*-----------------------------
    12. ABOUT AREA
-------------------------------*/

.details-content-box {
    padding-left: 50px;
    position: relative;
}

.details-content-box .box-icon {
    color: #5368fd;
    font-size: 24px;
    left: 0;
    position: absolute;
    top: 0;
}

.area-content h3 {
    font-size: 48px;
    margin-bottom: 50px;
}

/*------------------------------
    13. PROCESS AREA
------------------------------*/
.process-content {
    counter-reset: process;
    position: relative;
}

.process-content .area-bg {
    background: rgba(0, 0, 0, 0) url("assets/img/process/process-bg.png") no-repeat scroll center center / contain;
}

.process-icon i {
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, rgb(88, 75, 251) 0%, rgb(69, 170, 253) 99%);
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.process-icon {
    align-items: center;
    background: rgba(0, 0, 0, 0) url("assets/img/process/process-icon-bg.png") no-repeat scroll center center / 100% 100%;
    display: flex;
    font-size: 45px;
    height: 90px;
    justify-content: center;
    line-height: 1;
    margin: 0 auto 40px;
    position: relative;
    width: 100px;
}

.single-process-box {
    padding-top: 30px;
    position: relative;
    text-align: center;
}

.single-process-box::after {
    background: #e6e8fe none repeat scroll 0 0;
    bottom: 0;
    content: "";
    display: block;
    height: 3px;
    margin: 40px auto 0;
    transition: all 0.3s ease 0s;
    width: 50px;
}

.single-process-box:hover::after {
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, rgb(88, 75, 251) 0%, rgb(69, 170, 253) 99%) repeat scroll 0 0;
}

.process-icon::before {
    background: #f29c1f;
    border-radius: 50%;
    box-shadow: 0 16px 32px rgba(127, 143, 255, 0.54);
    color: #ffffff;
    content: "0"counter(process, decimal) "";
    counter-increment: process;
    font-size: 14px;
    font-weight: 700;
    height: 40px;
    left: 0;
    letter-spacing: 2px;
    padding-top: 12px;
    position: absolute;
    top: -30px;
    width: 40px;
}

/*---------------------------------
    14. GOAL AREA
---------------------------------*/
.goal-area .read-more {
    margin-right: 20px;
}

.goal-layers {
    position: relative;
    z-index: 9;
}

.goal-layer-2 {
    position: absolute;
    right: 0;
    top: -100px;
}

.goal-layer-3 {
    bottom: -35px;
    position: absolute;
    z-index: -1;
}

/*--------------------------------
    15. VIDEO PROMO AREA
---------------------------------*/

.video-promo-area {
    position: relative;
}

.area-image-content > img {
    filter: drop-shadow(0px 16px 32px rgba(0, 0, 0, 0.1));
}

.video-promo-area .area-bg {
    background: rgba(0, 0, 0, 0) url("assets/img/background/blue_bg.png") no-repeat scroll center center / cover;
}

.video-bg-layer {
    left: 0;
    position: absolute;
    top: 0;
    z-index: -1;
}

.item-center {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 1;
}

.video-button button {
    background: #ffffff none repeat scroll 0 0;
    border: 0 none;
    border-radius: 50%;
    color: #5368fd;
    font-size: 16px;
    height: 80px;
    transition: all 0.3s ease 0s;
    width: 80px;
}

.video-button button:hover {
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, #584bfb 0%, #45aafd 99%) repeat scroll 0 0;
    box-shadow: 0 16px 32px rgba(199, 199, 199, 0.3);
    color: #ffffff;
}

.video-promo-area .area-content {
    padding-left: 50px;
}

.single-fun-fact {
    text-align: center;
}

.single-fun-fact h3 {
    font-size: 80px;
    line-height: 1;
    margin-bottom: 0;
}

/*------------------------------
    16. SCREENSHOT SLIDER
------------------------------*/
.screenshot-slider {
    width: calc(100% + 200px);
}

.single-screenshot {
    margin: 20px 20px 40px;
    transition: 0.3s;
}

.single-screenshot img {
    filter: drop-shadow(0px 20px 8px rgba(212, 212, 212, 0.56));
}

.screenshot-area .owl-nav {
    bottom: 80px;
    left: -150px;
    position: absolute;
}

/*-----------------------------
    17. TESTMONIAL AREA
------------------------------*/
.testmonial-area {
    position: relative;
}

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

.testmonial-layers > div {
    position: absolute;
}

.testmonial-layer-1 {
    left: 5%;
    position: absolute;
    top: 50px;
}

.testmonial-layer-2 {
    right: 0;
    top: 0;
}

.testmonial-layer-3 {
    bottom: 12%;
    right: 5%;
}

.single-testmonial {
    box-shadow: 0 16px 32px rgba(221, 221, 221, 0.82);
    margin: 20px 20px 40px;
    padding: 40px 30px;
    position: relative;
    background: #ffffff;
    z-index: 1;
}

.single-testmonial::after {
    bottom: 30px;
    content: url("assets/img/testmonial/quote.png");
    position: absolute;
    right: 40px;
    z-index: -1;
}

.author-name-and-thumb {
    display: flex;
    flex-direction: column;
    height: 80px;
    justify-content: center;
    margin-top: 20px;
    padding-left: 60px;
    position: relative;
}

.author-tumb {
    border-radius: 50%;
    height: 50px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
}

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

.author-name-and-thumb p {
    color: #ff911d;
}

/*------------------------------
    18. PRICE AREA
------------------------------*/

.price-menu {
    border-radius: 50px;
    box-shadow: 0 16px 32px rgba(208, 208, 208, 0.61);
    display: inline-block;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 9;
}

.price-menu li {
    display: inline-block;
}

.price-menu li a {
    display: block;
    font-size: 14px;
    font-weight: 700;
    height: 50px;
    letter-spacing: 3px;
    padding: 10px 30px;
    text-transform: uppercase;
}

.price-menu li.active a {
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, #584bfb 0%, #45aafd 99%) repeat scroll 0 0;
    border-radius: 50px;
    color: #ffffff;
}

.single-price {
    border: 1px solid #ebecff;
    padding: 50px 40px;
    transition: all 0.3s ease 0s;
    position: relative;
    z-index: 1;
}

.single-price:before {
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, #584bfb 0%, #45aafd 99%) repeat scroll 0 0;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: all 0.5s ease 0s;
    opacity: 0;
}

.price-header {
    border-bottom: 1px solid #e6f1f9;
    margin-bottom: 60px;
    padding-bottom: 60px;
}

.sale-promo {
    background: #ff911d none repeat scroll 0 0;
    border-radius: 50px;
    color: #ffffff;
    display: inline-block;
    font-weight: 500;
    letter-spacing: 3px;
    padding: 10px 30px;
    position: absolute;
    right: 30px;
    text-transform: uppercase;
    top: -24px;
}

.sale-promo span {
    font-size: 24px;
}

.price-thumb-hidding {
    display: flex;
    flex-direction: column;
    height: 110px;
    justify-content: center;
    padding-left: 120px;
    position: relative;
}

.price-thumb-hidding img {
    left: 0;
    position: absolute;
    top: 0;
}

.price-rate {
    color: #5368fd;
    font-size: 30px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: 600;
}

.price-rate .currency {
    font-size: 20px;
}

.price-title {
    letter-spacing: 2px;
    text-transform: uppercase;
}

.price-details {}

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

.price-details ul li {
    display: block;
    margin-bottom: 10px;
}

.price-details ul li i {
    margin-right: 10px;
}

.single-price .dripicons-cross {
    color: #ff911d;
}

.price-footer {
    margin-top: 40px;
}

.purchase-button {
    background: #f0f1ff none repeat scroll 0 0;
    border-radius: 50px;
    color: #252525;
    display: inline-block;
    font-size: 14px;
    letter-spacing: 3px;
    padding: 15px 40px;
    text-transform: uppercase;
    font-weight: 600;
    z-index: 1;
    overflow: hidden;
    position: relative;
}

.purchase-button:before {
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, #584bfb 0%, #45aafd 99%) repeat scroll 0 0;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: all 0.3s ease 0s;
    opacity: 0;
}

.purchase-button:hover:before {
    opacity: 1;
}

.single-price:hover,
.single-price.active {
    color: #ffffff;
}

.single-price.active:before,
.single-price.active:before {
    opacity: 1;
}

.single-price:hover .price-rate,
.single-price.active .price-rate {
    color: #ffffff;
}

.purchase-button:hover {
    box-shadow: 0 16px 32px rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

/*--------------------------------
    19. FAQS AREA
---------------------------------*/
.faqs-mockup-1 {
    position: relative;
    text-align: center;
    top: -100px;
}

.faqs-mockup-1 img {
    max-width: 70%;
}

.faqs-mockup-2 {
    animation: 5s ease 0s normal none infinite running zbounce;
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.5s;
}

.panel.panel-default {
    border: 0 none;
    border-radius: 0;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.panel.panel-default:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, #584bfb 0%, #45aafd 99%) repeat scroll 0 0;
    transition: 0.3s;
    opacity: 0;
    z-index: -1;
}

.panel.panel-default.active {
    color: #ffffff;
}

.panel.panel-default.active:before {
    opacity: 1;
}

.panel-default > .panel-heading {
    background: transparent;
}

.accordion-toggle {
    font-weight: 600;
}

.active .accordion-toggle {
    color: #fff;
}

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

.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);
}

@keyframes zbounce {
    0% {
        transform: scale(0.9)translateY(-50%);
    }

    50% {
        transform: scale(1)translateY(-60%);
    }

    100% {
        transform: scale(0.9)translateY(-50%);
    }
}

/*-------------------------------
    20. BLOG AREA
--------------------------------*/
.single-blog-item img {
    width: 100%;
    border-radius: 0;
}

.blog-post-details h3 {
    font-size: 22px;
    margin-bottom: 20px;
}

.blog-area hr.mb50 {
    display: none;
}

/*-------------------------------
    21. CONTACT AREA
--------------------------------*/

.contact-content {
    background: #ffffff none repeat scroll 0 0;
}

.single-contact {
    border-bottom: 1px solid #e3e5fe;
    margin-bottom: 50px;
    padding-bottom: 50px;
    padding-left: 60px;
    position: relative;
}

.single-contact .contact-icon {
    color: #5368fd;
    font-size: 40px;
    left: 0;
    position: absolute;
    top: 0;
}

.single-contact:last-child {
    border: 0 none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.contact-form label {
    color: #252525;
    text-transform: capitalize;
}

.contact-form input,
.contact-form textarea {
    background: #ffffff none repeat scroll 0 0;
    border: 0 none;
    border-radius: 0;
    font-size: 16px;
    margin-bottom: 18px;
    max-height: 140px;
    min-height: 60px;
    padding: 10px 30px;
}

/*---------------------------------
    22. HOME TWO LAYERS
----------------------------------*/
/*---------------------------------
    COLOR VARIANT
----------------------------------*/
.home-two .welcome-text-area .area-bg {
    background: rgba(0, 0, 0, 0) url("assets/img/home/home-purple-bg.png") no-repeat scroll center center / cover;
}

.home-two .header-call-to-action .action-button,
.home-two .header-call-to-action .search-button {
    background: #614dc7 none repeat scroll 0 0;
}

.home-two .header-call-to-action .action-button:hover,
.home-two .header-call-to-action .search-button:hover {
    background: #ffffff none repeat scroll 0 0;
    color: #614dc7;
}

.home-two .home-button a {
    background: #4431a7 none repeat scroll 0 0;
}

.home-two .home-button a:hover {
    background: #ffffff none repeat scroll 0 0;
    color: #4431a7;
}

.home-two .single-features .box-icon {
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, #553fbf 0%, #8573e7 99%) repeat scroll 0 0;
}

.home-two .read-more::before {
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, #553fbf 0%, #8573e7 99%) repeat scroll 0 0;
}

.home-two .read-more.active:hover::before {
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, #8573e7 0%, #553fbf 99%) repeat scroll 0 0;
}

.home-two .video-button button:hover {
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, #553fbf 0%, #8573e7 99%) repeat scroll 0 0;
}

.home-two .price-menu li.active a {
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, #553fbf 0%, #8573e7 99%) repeat scroll 0 0;
}

.home-two .single-price:before {
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, #553fbf 0%, #8573e7 99%) repeat scroll 0 0;
}

.home-two .purchase-button:before {
    background: linear-gradient(135deg, #553fbf 0%, #8573e7 99%);
}

.home-two .panel.panel-default:before {
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, #553fbf 0%, #8573e7 99%) repeat scroll 0 0;
}

.home-two .footer-area .area-bg {
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, #553fbf 0%, #8573e7 99%) repeat scroll 0 0;
}

.home-two .footer-search-form form {
    background: #5741c4 none repeat scroll 0 0;
}

.home-two .footer-subscriber-form form input {
    background: #8776df none repeat scroll 0 0;
}

.home-two .footer-subscriber-form form button {
    background: #6957c8 none repeat scroll 0 0;
}

.home-two .footer-subscriber-form form button:hover {
    background: #ffffff none repeat scroll 0 0;
    color: #6957c8;
}

/*---------------------------------
    HOME TWO LAYERS
----------------------------------*/

.welcome-layer-2 {
    height: 100%;
    position: absolute;
    width: 100%;
}

.welcome-layer-2 > div {
    position: absolute;
}

.home2-layer-1 {
    right: 0;
    text-align: right;
    top: 10%;
}

.home2-layer-2 {
    bottom: 0;
    right: 27%;
}

.home2-layer-1 img {
    width: 80%;
}

@media only screen and (min-width: 1920px) {
    .home2-layer-1 img {
        width: auto;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .home2-layer-1 img {
        width: 70%;
    }

    .home2-layer-2 {
        right: 22%;
    }
}

/*--------------------------------
    ABOUT AREA
----------------------------------*/
.home-two .about-area .area-content {
    margin-left: 70px;
}

/*--------------------------------
    VIDEO
---------------------------------*/
.home-two .video-promo-area .area-bg {
    background: rgba(0, 0, 0, 0) url("assets/img/background/purple_bg.png") no-repeat scroll center center / cover;
}

/*---------------------------------
    SCREENSHOT TWO
---------------------------------*/
.home-two .single-screenshot {
    margin: 50px 20px;
    transition: all 0.3s ease 0s;
}

.home-two .single-screenshot img {
    filter: none;
}

.screenshot-slider2 {
    width: 90%;
    margin: 0 auto;
}

.owl-item.active.center .single-screenshot {
    transform: scale(1.3);
    z-index: 9;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .home-two .about-area .area-content {
        margin-left: 30px;
    }

    .home-two .about-area .area-content h3 {
        font-size: 32px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .home-two .about-area .area-content {
        margin-left: 0;
    }
}

@media only screen and (max-width: 767px) {
    .home-two .about-area .area-content {
        margin-left: 0;
    }
}

/*-------------------------------------
    23. HOME THREE
--------------------------------------*/
.home-three .subtitle {
    color: #35982c;
}

.home-three .scrolltotop {
    background: linear-gradient(180deg, #1b8112 0%, #73bd30 99%);
}

.home-three .welcome-text-area .area-bg {
    background: rgba(0, 0, 0, 0) url("assets/img/background/green_bg.png") no-repeat scroll center center / 100% 100%;
}

.welcome-layer-3 {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.welcome-layer-3 > div {
    position: absolute;
}

.home3-layer-1 {
    right: 10%;
    top: 18%;
}

.home3-layer-2 {
    bottom: -10%;
    right: -5%;
}

.welcome-layer-3 > div img {
    transform: rotate(30deg);
    width: 60%;
}


@media only screen and (min-width: 1920px) {
    .home3-layer-1 {
        right: 15%;
        top: 20%;
    }

    .home3-layer-2 {
        bottom: -2%;
        right: 5%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .home3-layer-1 {
        right: -6%;
        top: 17%;
    }

    .home3-layer-2 {
        bottom: -6%;
        right: -10%;
    }

    .welcome-layer-3 > div img {
        width: 50%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {}

@media only screen and (max-width: 767px) {}

@media only screen and (min-width: 480px) and (max-width: 767px) {}

/*---------------------------------
    COLOR VARIANT
----------------------------------*/

.home-three .header-call-to-action .action-button,
.home-three .header-call-to-action .search-button {
    background: #35982c none repeat scroll 0 0;
}

.home-three .header-call-to-action .action-button:hover,
.home-three .header-call-to-action .search-button:hover {
    background: #ffffff none repeat scroll 0 0;
    color: #35982c;
}

.home-three .home-button a {
    background: #35982c none repeat scroll 0 0;
}

.home-three .home-button a:hover {
    background: #ffffff none repeat scroll 0 0;
    color: #35982c;
}

.home-three .single-features .box-icon {
    background: rgba(0, 0, 0, 0) linear-gradient(180deg, #1b8112 0%, #73bd30 99%) repeat scroll 0 0;
}

.home-three .read-more::before {
    background: rgba(0, 0, 0, 0) linear-gradient(180deg, #1b8112 0%, #73bd30 99%) repeat scroll 0 0;
}

.home-three .read-more.active:hover::before {
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, #73bd30 0%, #1b8112 99%) repeat scroll 0 0;
}

.home-three .video-button button:hover {
    background: rgba(0, 0, 0, 0) linear-gradient(180deg, #1b8112 0%, #73bd30 99%) repeat scroll 0 0;
}

.home-three .price-menu li.active a {
    background: rgba(0, 0, 0, 0) linear-gradient(180deg, #1b8112 0%, #73bd30 99%) repeat scroll 0 0;
}

.home-three .single-price:before {
    background: rgba(0, 0, 0, 0) linear-gradient(180deg, #1b8112 0%, #73bd30 99%) repeat scroll 0 0;
}

.home-three .purchase-button:before {
    background: linear-gradient(180deg, #1b8112 0%, #73bd30 99%);
}

.home-three .panel.panel-default:before {
    background: rgba(0, 0, 0, 0) linear-gradient(180deg, #1b8112 0%, #73bd30 99%) repeat scroll 0 0;
}

.home-three .footer-area .area-bg {
    background: rgba(0, 0, 0, 0) linear-gradient(180deg, #1b8112 0%, #73bd30 99%) repeat scroll 0 0;
}

.home-three .footer-search-form form {
    background: #35982c none repeat scroll 0 0;
}

.home-three .footer-subscriber-form form input {
    background: #35982c none repeat scroll 0 0;
}

.home-three .footer-subscriber-form form button {
    background: #35982c none repeat scroll 0 0;
}

.home-three .footer-subscriber-form form button:hover {
    background: #ffffff none repeat scroll 0 0;
    color: #35982c;
}

/*----------------------------
    ABOUT AREA
------------------------------*/

.about-process-box {
    padding-left: 80px;
}

.about-process-box .box-icon {
    background: #35982c none repeat scroll 0 0;
    border-radius: 50%;
    color: #ffffff;
    font-size: 18px;
    height: 50px;
    left: 0;
    padding-top: 16px;
    position: absolute;
    text-align: center;
    top: 5px;
    width: 50px;
}

.about-area .area-image-content > img {
    margin-left: -50px;
    width: 100%;
}

.owl-item.active.center .single-screen img {
    transform: scale(1.3);
    z-index: 9;
}

.single-screen > img {
    margin-bottom: 60px;
    margin-top: 60px;
    transition: all 0.3s ease 0s;
}

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

.features-list {
    list-style: outside none none;
    margin: 30px 0 0;
    padding: 0;
}

.features-list li {
    margin-bottom: 10px;
}

.features-list li:last-child {
    margin-bottom: 0;
}

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


.single-process-box-two {
    background: #f6f7ff none repeat scroll 0 0;
    padding: 0 40px 50px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.single-process-box-two:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
    background: rgba(0, 0, 0, 0) linear-gradient(180deg, #1b8112 0%, #73bd30 99%) repeat scroll 0 0;
    transition: 0.5s;
    opacity: 0;
}

.process-icon-two {
    background: #ffffff none repeat scroll 0 0;
    border-radius: 50%;
    box-shadow: 0 16px 32px rgba(206, 206, 206, 0.63);
    color: #1b8112;
    display: inline-block;
    font-size: 36px;
    height: 80px;
    padding-top: 21px;
    text-align: center;
    transform: translateY(-40px);
    width: 80px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.process-icon-two:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, #35972b 0%, #85d141 99%) repeat scroll 0 0;
    transition: 0.5s;
    opacity: 0;
}

.single-process-box-two:hover .process-icon-two,
.single-process-box-two.active .process-icon-two {
    box-shadow: 0 0 0;
    color: #ffffff;
}

.single-process-box-two:hover,
.single-process-box-two.active {
    color: #ffffff;
}

.single-process-box-two:hover:before,
.single-process-box-two.active:before {
    opacity: 1;
}

.single-process-box-two:hover .process-icon-two:before,
.single-process-box-two.active .process-icon-two:before {
    opacity: 1;
}

.single-process-box-two:hover h3,
.single-process-box-two.active h3 {
    color: #ffffff;
}

/*--------------------------*/
.home-three .video-promo-area .area-bg {
    background: rgba(0, 0, 0, 0) url("assets/img/video/video-bg-2.jpg") no-repeat scroll center center / cover;
}

.home-three .video-promo-area .area-bg::after {
    background: rgba(0, 0, 0, 0) linear-gradient(180deg, #1b8112 0%, #73bd30 99%) repeat scroll 0 0;
    opacity: 0.8;
}

.home-three .video-button button {
    color: #35982c;
    font-size: 20px;
    height: 100px;
    width: 100px;
}

.home-three .video-button button:hover {
    background: rgba(0, 0, 0, 0) linear-gradient(180deg, #1b8112 0%, #73bd30 99%) repeat scroll 0 0;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
    color: #ffffff;
}

.home-three .accordion-toggle:hover {
    color: #35982c;
}

.home-three .single-contact .contact-icon {
    color: #35982c;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .about-area .area-image-content > img {
        margin-left: 0;
    }

    .single-process-box-two {
        padding: 0 30px 50px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .about-area .area-image-content > img {
        margin-left: 0;
    }

    .single-process-box-two {
        padding: 0 30px 50px;
    }
}

@media only screen and (max-width: 767px) {
    .about-area .area-image-content > img {
        margin-left: 0;
    }
}

/*---------------------------------
    24. HOME FOUR
----------------------------------*/
/*---------------------------------
    COLOR VARIANT
----------------------------------*/
.home-four .welcome-text-area .area-bg {
    background: rgba(0, 0, 0, 0) url("assets/img/background/pink_bg.png") no-repeat scroll center center / cover;
}

.home-four .header-call-to-action .action-button,
.home-four .header-call-to-action .search-button {
    background: #553fbf none repeat scroll 0 0;
}

.home-four .header-call-to-action .action-button:hover,
.home-four .header-call-to-action .search-button:hover {
    background: #ffffff none repeat scroll 0 0;
    color: #553fbf;
}

.home-four .home-button a {
    background: #553fbf none repeat scroll 0 0;
}

.home-four .home-button a:hover {
    background: #ffffff none repeat scroll 0 0;
    color: #553fbf;
}

.home-four .single-features .box-icon {
    background: linear-gradient(135deg, #553fbf 0%, #ad9ff7 99%);
}

.home-four .read-more::before {
    background: linear-gradient(135deg, #553fbf 0%, #ad9ff7 99%);
}

.home-four .read-more.active:hover::before {
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, #ad9ff7 0%, #553fbf 99%) repeat scroll 0 0;
}

.home-four .video-button button:hover {
    background: linear-gradient(135deg, #553fbf 0%, #ad9ff7 99%);
}

.home-four .price-menu li.active a {
    background: linear-gradient(135deg, #553fbf 0%, #ad9ff7 99%);
}

.home-four .single-price:before {
    background: linear-gradient(135deg, #553fbf 0%, #ad9ff7 99%);
}

.home-four .purchase-button:before {
    background: linear-gradient(135deg, #553fbf 0%, #8573e7 99%);
}

.home-four .panel.panel-default:before {
    background: linear-gradient(135deg, #553fbf 0%, #ad9ff7 99%);
}

.home-four .footer-area .area-bg {
    background: linear-gradient(135deg, #553fbf 0%, #ad9ff7 99%);
}

.home-four .footer-search-form form {
    background: #553fbf none repeat scroll 0 0;
}

.home-four .footer-subscriber-form form input {
    background: #553fbf none repeat scroll 0 0;
}

.home-four .footer-subscriber-form form button {
    background: #553fbf none repeat scroll 0 0;
}

.home-four .footer-subscriber-form form button:hover {
    background: #ffffff none repeat scroll 0 0;
    color: #553fbf;
}

.top-sponsors {
    align-items: center;
    bottom: 5%;
    display: flex;
    left: 20%;
    letter-spacing: 2px;
    position: absolute;
    text-transform: uppercase;
}

.sponsor-slider {
    margin-left: 30px;
    width: 386px;
}

.sngle-sponsor {
    align-items: center;
    display: flex;
    height: 80px;
    justify-content: center;
}


.welcome-layer-4 {
    align-items: center;
    display: flex;
    height: 100%;
    position: absolute;
    width: 40%;
}

.home-four .top-area .video-button button {
    background: #553fbf none repeat scroll 0 0;
    box-shadow: 0 0 0 20px rgba(85, 63, 191, 0.3);
    color: #ffffff;
}

.home-four .top-area .video-button button:hover {
    background: #ffffff none repeat scroll 0 0;
    color: #553fbf;
}

.haeder-subscribe-form .subscribe-form {
    background: #a07de4 none repeat scroll 0 0;
    border-radius: 50px;
    height: 80px;
    position: relative;
}

.haeder-subscribe-form .subscribe-form input {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    border-radius: 50px;
    height: 60px;
    left: 10px;
    padding: 20px;
    position: absolute;
    top: 10px;
    width: calc(100% - 200px);
}

.haeder-subscribe-form .subscribe-form button {
    background: #614dc7 none repeat scroll 0 0;
    border: 0 none;
    border-radius: 50px;
    font-size: 14px;
    height: 60px;
    letter-spacing: 3px;
    padding: 12px 50px;
    position: absolute;
    right: 10px;
    text-transform: uppercase;
    top: 10px;
    transition: all 0.3s ease 0s;
}

.haeder-subscribe-form .subscribe-form button:hover {
    background: #ffffff none repeat scroll 0 0;
    color: #614dc7;
}

@media only screen and (min-width: 1920px) {}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .top-sponsors {
        left: 5%;
    }
}

.home-four .video-promo-area .area-bg {
    background: rgba(0, 0, 0, 0) url("assets/img/background/purple_bg.png") no-repeat scroll center center / cover;
}

.screenshot-slider-4 .single-screenshot {
    margin: 0;
}


.single-team {
    text-align: center;
}

.member-thumb {
    margin-bottom: 50px;
    position: relative;
}

.member-thumb img {
    background: #ffffff none repeat scroll 0 0;
    padding: 20px;
}

.member-social {
    background: rgba(0, 0, 0, 0) linear-gradient(90deg, #6955be 0%, #d69aff 100%) repeat scroll 0 0;
    border-radius: 50px;
    bottom: -15px;
    height: 70px;
    overflow: hidden;
    position: absolute;
    right: 40px;
    transition: 0.3s;
    width: 70px;
}

.member-social ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.member-social ul li {}

.member-social ul li a {
    color: #ffffff;
    display: block;
    margin: 5px 0;
    padding: 10px 0;
}

.member-social ul li:first-child a {
    margin-top: 12px;
}

.member-social ul li:last-child a {
    margin-bottom: 12px;
}

.single-team:hover .member-social {
    height: 180px;
}

.name-designation p {
    color: #f29c1f;
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.team-slider-two .owl-nav {
    align-items: center;
    background: #e2e4ff none repeat scroll 0 0;
    border-radius: 50px;
    box-shadow: 0 16px 33px rgba(0, 0, 0, 0.2);
    display: flex;
    height: 90px;
    padding: 10px 20px;
    position: absolute;
    right: 0;
    top: -150px;
}

.team-slider-two .owl-nav > div {
    align-items: center;
    background: #ffffff none repeat scroll 0 0;
    border-radius: 50%;
    display: flex;
    height: 60px;
    justify-content: center;
    margin: 0 5px;
    width: 60px;
}

.team-slider-two .owl-nav > div:hover {
    background: rgba(0, 0, 0, 0) linear-gradient(90deg, #6955be 0%, #d69aff 100%) repeat scroll 0 0;
    color: #ffffff;
}

/*=======================
    HOME 5
========================*/
.welcome-layer-5 {
    position: absolute;
    width: 35%;
    right: 0;
    display: flex;
    align-items: center;
    height: 100%;
}

.home5-layer-1 {
    max-width: 350px;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .home5-layer-1 {
        max-width: 280px;
    }
}


/*============================
    25. SINGLE PAGE
===============================*/
.barner-area .area-bg {
    background: rgba(0, 0, 0, 0) url("assets/img/background/blue_bg.png") no-repeat scroll center center / cover;
}

/*----------------------------
    26. PRODUCT PAGE
-----------------------------*/
.product-filter-and-order {
    margin-bottom: 50px;
    min-height: 50px;
}

.product-grid-left {
    float: left;
}

.product-filter-right {
    float: right;
}

.product-grid-left ul li a {
    background: #f9f9ff none repeat scroll 0 0;
    border-radius: 50%;
    color: #6b6e85;
    display: block;
    font-size: 20px;
    height: 50px;
    margin-right: 15px;
    padding-top: 13px;
    text-align: center;
    width: 50px;
}

.product-grid-left ul li {
    display: inline-block;
}

.product-grid-left ul li a:hover,
.product-grid-left ul li.active a {
    background: #ffffff none repeat scroll 0 0;
    -webkit-box-shadow: 0 16px 32px rgba(83, 104, 253, .2);
    box-shadow: 0 16px 32px rgba(83, 104, 253, .2);
    color: #5368fd;
}

.woocommerce-result-count,
.woocommerce-ordering,
.product-search {
    display: inline-block;
    position: relative;
    margin-left: 30px;
}

.woocommerce-product-title a {
    color: #252525;
}

.woocommerce-product-title a:hover {
    color: #5368fd;
}

ul.products {
    list-style: outside none none;
    margin: 0 -15px;
    padding: 0;
}

ul.products .product {
    float: left;
    margin-bottom: 30px;
    padding: 0 15px;
    width: 33.331%;
}

ul.products .product img {
    width: 100%;
}

.product-filter-right form {
    position: relative;
}

.product-filter-right form input,
.product-filter-right form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    border: 1px solid #e5e5e5;
    border-radius: 50px;
    height: 50px;
    padding: 10px 20px;
}

.product-search button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    border-radius: 0 50px 50px 0;
    font-size: 16px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
}

.product {
    margin-bottom: 40px;
}

.product-thumb {
    margin-bottom: 30px;
}

.product-thumb img {
    width: 100%;
}

.category-and-ratting {
    margin-bottom: 20px;
    overflow: hidden;
    line-height: 1;
}

.product-category {
    color: #5368fd;
    float: left;
    font-weight: 500;
    font-size: 16px;
}

.ratting {
    color: #ffba00;
    float: right;
}

.product-title-details .price {
    font-size: 16px;
    letter-spacing: 1px;
}

.discount-price {
    margin-right: 20px;
}

.related-portfolio-area .owl-carousel .owl-nav > div:hover {
    background: #5368fd;
    color: #ffffff;
}

@media (min-width: 768px) and (max-width: 991px) {
    .product-search {
        display: none;
    }
}

@media only screen and (max-width: 767px) {
    .product-search {
        display: none;
    }

    .woocommerce-result-count,
    .woocommerce-ordering {
        display: none;
    }
}

/*--------------------------
    PRODUCT PAGINATION
----------------------------*/
.products-pagination ul li {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #dddddd none repeat scroll 0 0;
    border-radius: 50%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin: 5px;
    place-content: center;
    text-align: center;
}

.products-pagination ul li a {
    background: #ffffff;
    border: 1px solid #e0deff;
    border-radius: 50%;
    -webkit-box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
    color: #7886a0;
    display: block;
    height: 50px;
    padding-top: 11px;
    width: 50px;
}

.products-pagination ul li a:hover,
.products-pagination ul li.active a {
    background: #5368fd none repeat scroll 0 0;
    color: #ffffff;
    -webkit-box-shadow: 0 16px 32px rgba(83, 104, 253, .2);
    box-shadow: 0 16px 32px rgba(83, 104, 253, .2);
}

/*-----------------------------
    27. SINGE PRODUCT PAGE
-----------------------------*/
.single-thumb img {
    width: 100%;
}

.total-review .ratting {
    float: none;
    margin-right: 20px;
}

.total-review {
    margin-bottom: 19px;
}

.product-title .product-category {
    display: block;
    float: none;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.product-title h2 {
    margin-bottom: 30px;
}

.product-price {
    font-size: 50px;
    margin-bottom: 30px;
}

.product-price .discount-price {
    color: #5368fd;
}

.product_attributes {
    margin-bottom: 30px;
}

.product_attributes th {
    display: block;
    margin-right: 15px;
    overflow: hidden;
}

.product_attributes th,
.product_attributes td {
    padding: 5px 0;
}

.total-product-and-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 40px;
}

.quantity,
.wishlist-and-popup {
    display: inline-block;
}

.quantity {
    border: 2px solid #e5e5e5;
    border-radius: 50px;
    height: 50px;
    margin-right: 30px;
    overflow: hidden;
    position: relative;
    width: 120px;
}

.quantity input {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    height: 100%;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}

.quantity span {
    background: #ffffff none repeat scroll 0 0;
    border-right: 2px solid #e5e5e5;
    cursor: pointer;
    font-size: 20px;
    height: 100%;
    left: 0;
    padding-top: 9px;
    position: absolute;
    text-align: center;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 40px;
    z-index: 9;
}

.quantity span.plus-quantity {
    border-left: 2px solid #e5e5e5;
    border-right: 0 none;
    left: auto;
    right: 0;
}

.quantity span:hover {
    background: #5368fd none repeat scroll 0 0;
    color: #ffffff;
}

.wishlist-and-popup {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.wishlist-and-popup li {
    display: inline;
}

.wishlist-and-popup li a {
    background: #fff7f1 none repeat scroll 0 0;
    border-radius: 50%;
    color: #db8e93;
    display: inline-block;
    height: 50px;
    margin-right: 6px;
    padding-top: 12px;
    text-align: center;
    width: 50px;
}

.wishlist-and-popup li a:hover {
    background: #5368fd none repeat scroll 0 0;
    -webkit-box-shadow: 0 16px 32px rgba(83, 104, 253, .2);
    box-shadow: 0 16px 32px rgba(83, 104, 253, .2);
    color: #ffffff;
}

.product-details-tab {
    margin-top: 80px;
}

.product-speacification-menu {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
}

.product-speacification-menu::before {
    background: #ebebeb none repeat scroll 0 0;
    content: "";
    height: 2px;
    left: 0;
    margin-top: -1px;
    position: absolute;
    top: 50%;
    width: 100%;
}

.product-speacification-menu > li {
    display: inline-block;
}

.product-speacification-menu > li a {
    background: #ffffff none repeat scroll 0 0;
    border: 2px solid #ebebeb;
    border-radius: 50px;
    color: #63688e;
    display: block;
    letter-spacing: 1px;
    margin: 0 10px;
    padding: 13px 50px;
    text-transform: uppercase;
}

.product-speacification-menu > li a:hover,
.product-speacification-menu > li.active a,
.product-speacification-menu > li a:focus {
    background: #5368fd none repeat scroll 0 0;
    border-color: #5368fd;
    -webkit-box-shadow: 0 16px 32px rgba(83, 104, 253, .2);
    box-shadow: 0 16px 32px rgba(83, 104, 253, .2);
    color: #ffffff;
}

.product-details-specification {
    margin-top: 40px;
}

.shop_attributes {
    width: 100%;
}

.shop_attributes th,
.shop_attributes td {
    border-bottom: 1px solid #f0f0f0;
    padding: 10px 0;
}

.shop_attributes th {
    color: #252525;
    font-weight: 400;
}

.product-details-tab h3 {
    margin-top: 40px;
    margin-bottom: 40px;
}

@media only screen and (max-width: 767px) {
    .product-title h2 {
        font-size: 22px;
    }

    .product-price {
        font-size: 30px;
    }

    .product-speacification-menu > li a {
        margin: 10px;
    }

    .wish-and-cart-button {
        text-align: center;
    }

    .total-product-and-button {
        display: block;
    }

    .quantity {
        margin-bottom: 20px;
        margin-right: 0;
    }
}

/*------------------------------
    ADDITIONAL
-------------------------------*/
/*--------------------------------
    HEADER SEARCH FORM
--------------------------------*/
.cd-main-header {
    position: absolute;
    height: 50px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    width: 100%;
}

.cd-main-header.nav-is-visible {
    -webkit-transform: translateX(-260px);
    -moz-transform: translateX(-260px);
    -ms-transform: translateX(-260px);
    -o-transform: translateX(-260px);
    transform: translateX(-260px);
}

.cd-main-header::before {
    display: none;
    content: 'mobile';
}

@media only screen and (min-width: 1024px) {
    .cd-main-header {
        height: 100px;
    }

    .cd-main-header.nav-is-visible {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }

    .cd-main-header::before {
        content: 'desktop';
    }
}

.cd-main-nav-wrapper {
    padding: 0 5%;
}

.cd-main-nav-wrapper::after {
    clear: both;
    content: "";
    display: table;
}

.cd-logo {
    display: inline-block;
    height: 100%;
    margin-left: 15px;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.cd-logo img {
    display: block;
    margin-top: 14px;
}

@media only screen and (min-width: 1024px) {
    .cd-logo {
        position: absolute;
        z-index: 3;
        margin-left: 5%;
    }

    .cd-logo img {
        margin-top: 29px;
    }
}

.cd-nav-trigger {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 50px;
}

.cd-nav-trigger span {
    position: absolute;
    height: 2px;
    width: 20px;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-color: #ffffff;
    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    transition: background-color 0.3s;
}

.cd-nav-trigger span::before,
.cd-nav-trigger span::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
}

.cd-nav-trigger span::before {
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    -o-transform: translateY(-6px);
    transform: translateY(-6px);
}

.cd-nav-trigger span::after {
    -webkit-transform: translateY(6px);
    -moz-transform: translateY(6px);
    -ms-transform: translateY(6px);
    -o-transform: translateY(6px);
    transform: translateY(6px);
}

.nav-is-visible .cd-nav-trigger span {
    background-color: rgba(255, 255, 255, 0);
}

.nav-is-visible .cd-nav-trigger span::before {
    -webkit-transform: translateY(0) rotate(-45deg);
    -moz-transform: translateY(0) rotate(-45deg);
    -ms-transform: translateY(0) rotate(-45deg);
    -o-transform: translateY(0) rotate(-45deg);
    transform: translateY(0) rotate(-45deg);
}

.nav-is-visible .cd-nav-trigger span::after {
    -webkit-transform: translateY(0) rotate(45deg);
    -moz-transform: translateY(0) rotate(45deg);
    -ms-transform: translateY(0) rotate(45deg);
    -o-transform: translateY(0) rotate(45deg);
    transform: translateY(0) rotate(45deg);
}

@media only screen and (min-width: 1024px) {
    .cd-nav-trigger {
        display: none;
    }
}

.cd-main-nav {
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    width: 260px;
    height: 100vh;
    overflow: auto;
    background: #1f2029;
    visibility: hidden;
    -webkit-transition: visibility 0s 0.3s;
    -moz-transition: visibility 0s 0.3s;
    transition: visibility 0s 0.3s;
}

.cd-main-nav a,
.cd-main-nav input[type="search"] {
    display: block;
    font-size: 1.6rem;
    padding: 0 2em 0 1em;
    line-height: 50px;
    color: #ffffff;
    border-bottom: 1px solid #333545;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
}

.cd-main-nav input[type="search"] {
    background-color: #292a37;
    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    transition: background-color 0.3s;
}

.cd-main-nav input[type="search"]:focus {
    background-color: #333545;
}

.cd-main-nav.nav-is-visible {
    -webkit-transition: visibility 0s;
    -moz-transition: visibility 0s;
    transition: visibility 0s;
    visibility: visible;
    -webkit-overflow-scrolling: touch;
}

@media only screen and (min-width: 1024px) {
    .cd-main-nav {
        position: static;
        visibility: visible;
        width: auto;
        height: 80px;
        background: transparent;
        overflow: visible;
        float: right;
    }

    .cd-main-nav li {
        display: inline-block;
        float: left;
        height: 100%;
        padding: 1.375em .4em;
    }

    .cd-main-nav a {
        padding: .625em .8em;
        line-height: 1;
        border-bottom: none;
    }

    .cd-main-nav a:hover {
        opacity: .6;
    }
}

/*-------------------------------- 
    SEARCH FORM
--------------------------------*/
.stellarnav.active-search,
.action-button.active-search {
    visibility: hidden;
    opacity: 0;
}

.cd-main-search .cd-select {
    display: none;
}

.cd-main-search .close {
    display: none;
}

.cd-main-search input[type="search"] {
    width: 100%;
    color: #ffffff;
}

.cd-main-search input[type="search"]:focus {
    outline: none;
}

.cd-main-search input[type="search"]::-webkit-input-placeholder {
    color: #5c5d6a;
}

.cd-main-search input[type="search"]::-moz-placeholder {
    color: #5c5d6a;
}

.cd-main-search input[type="search"]:-moz-placeholder {
    color: #5c5d6a;
}

.cd-main-search input[type="search"]:-ms-input-placeholder {
    color: #5c5d6a;
}

@media only screen and (min-width: 1024px) {
    .cd-main-search {
        position: absolute;
        z-index: 99;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: #14151c;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: opacity 0.3s, visibility 0.3s;
        -moz-transition: opacity 0.3s, visibility 0.3s;
        transition: opacity 0.3s, visibility 0.3s;
    }

    .cd-main-search form {
        position: relative;
        height: 100%;
        margin: 0 calc(5% + 116px) 0 calc(5% + 170px);
    }

    .cd-main-search input[type="search"] {
        font-size: 2.4rem;
        height: 100%;
        background-color: transparent;
        padding-right: 170px;
        border: 0;
        padding: 20px;
    }

    .cd-main-search .cd-select {
        display: inline-block;
        position: absolute;
        right: 0;
        top: 50%;
        bottom: auto;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        color: #5c5d6a;
        font-size: 1.4rem;
        overflow: hidden;
    }

    .cd-main-search span {
        display: inline-block;
    }

    .cd-main-search option {
        color: #333545;
        background-color: #ffffff;
    }

    .cd-main-search select {
        position: absolute;
        right: 0;
        top: 50%;
        bottom: auto;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        opacity: 0;
        color: transparent;
    }

    .cd-main-search select:focus {
        outline: none;
    }

    .cd-main-search select:focus + span.selected-value {
        background-color: #3d3f4e;
    }

    .cd-main-search .selected-value {
        color: #ffffff;
        pointer-events: none;
        -webkit-transition: background-color 0.3s;
        -moz-transition: background-color 0.3s;
        transition: background-color 0.3s;
    }

    .cd-main-search select,
    .cd-main-search .selected-value {
        padding: 0.5em 1.7em 0.5em .3em;
        font-size: 1.4rem;
        border-radius: 3px;
    }

    .no-pointerevents .cd-main-search .selected-value {
        display: none;
    }

    .no-pointerevents .cd-main-search select {
        position: relative;
        color: #ffffff;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }

    .no-pointerevents .cd-main-search select:focus {
        background-color: #3d3f4e;
    }

    .cd-main-search .close {
        display: inline-block;
        position: absolute;
        right: 5%;
        top: 50%;
        height: 40px;
        width: 40px;
        -webkit-transform: translateY(-50%) scale(0);
        -moz-transform: translateY(-50%) scale(0);
        -ms-transform: translateY(-50%) scale(0);
        -o-transform: translateY(-50%) scale(0);
        transform: translateY(-50%) scale(0);
        -webkit-transition: -webkit-transform 0.3s;
        -moz-transition: -moz-transform 0.3s;
        transition: transform 0.3s;
    }

    .cd-main-search .close::before,
    .cd-main-search .close::after {
        content: '';
        position: absolute;
        height: 20px;
        width: 2px;
        background-color: #ffffff;
        left: 50%;
        top: 50%;
    }

    .cd-main-search .close::before {
        -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
        -moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
        -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
        -o-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
        transform: translateX(-50%) translateY(-50%) rotate(-45deg);
    }

    .cd-main-search .close::after {
        -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
        -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
        -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
        -o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
        transform: translateX(-50%) translateY(-50%) rotate(45deg);
    }

    .cd-main-search.is-visible {
        opacity: 1;
        visibility: visible;
    }

    .cd-main-search.is-visible .close {
        -webkit-transform: translateY(-50%) scale(1);
        -moz-transform: translateY(-50%) scale(1);
        -ms-transform: translateY(-50%) scale(1);
        -o-transform: translateY(-50%) scale(1);
        transform: translateY(-50%) scale(1);
    }

    .animate-search .cd-main-search.is-visible {
        -webkit-animation: cd-slide-in 0.3s;
        -moz-animation: cd-slide-in 0.3s;
        animation: cd-slide-in 0.3s;
    }
}

@-webkit-keyframes cd-slide-in {
    0% {
        -webkit-transform: translateY(-100%);
    }

    100% {
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes cd-slide-in {
    0% {
        -moz-transform: translateY(-100%);
    }

    100% {
        -moz-transform: translateY(0);
    }
}

@keyframes cd-slide-in {
    0% {
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

.cd-search-suggestions {
    display: none;
}

@media only screen and (min-width: 1024px) {
    .cd-search-suggestions {
        display: block;
        position: absolute;
        top: 100px;
        left: 0;
        width: calc(90% - 286px);
        padding: 2em;
        margin: 0 calc(5% + 116px) 0 calc(5% + 170px);
        background-color: #ffffff;
        box-shadow: 0 4px 40px rgba(0, 0, 0, 0.39);
    }

    .cd-search-suggestions::after {
        clear: both;
        content: "";
        display: table;
    }

    .cd-search-suggestions .quick-links,
    .cd-search-suggestions .news {
        display: inline-block;
    }

    .cd-search-suggestions .quick-links {
        float: right;
        width: 140px;
        text-align: right;
    }

    .cd-search-suggestions .news {
        float: left;
        width: calc(100% - 140px);
    }

    .cd-search-suggestions h3 {
        margin-bottom: 1.5em;
        text-transform: uppercase;
        color: #7a7c86;
        font-size: 1.2rem;
        font-weight: bold;
        letter-spacing: .1em;
    }

    .cd-search-suggestions h4 {
        font-weight: bold;
        font-size: 1.4rem;
    }

    .cd-search-suggestions h4 a {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        padding: .2em 0;
    }

    .cd-search-suggestions a {
        display: inline-block;
        color: #333545;
    }

    .no-touch .cd-search-suggestions a:hover {
        opacity: .8;
    }

    .cd-search-suggestions time {
        font-size: 1.2rem;
        color: #70727d;
    }

    .cd-search-suggestions .news li {
        position: relative;
        padding: 0.625em 0.75em 0.75em 4em;
        margin-bottom: 0.25em;
    }

    .cd-search-suggestions .news li:last-of-type {
        margin-bottom: 0;
    }

    .cd-search-suggestions .image-wrapper {
        position: absolute;
        left: 0;
        top: 50%;
        bottom: auto;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
    }

    .cd-search-suggestions .image-wrapper img {
        display: block;
    }

    .cd-search-suggestions .quick-links a {
        padding: .5em 0;
        font-size: 1.4rem;
        line-height: 1.2;
    }

    .animate-search .is-visible .cd-search-suggestions {
        -webkit-transform-origin: center top;
        -moz-transform-origin: center top;
        -ms-transform-origin: center top;
        -o-transform-origin: center top;
        transform-origin: center top;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-animation: cd-3d-rotation 0.5s 0.3s;
        -moz-animation: cd-3d-rotation 0.5s 0.3s;
        animation: cd-3d-rotation 0.5s 0.3s;
        -webkit-animation-fill-mode: backwards;
        -moz-animation-fill-mode: backwards;
        animation-fill-mode: backwards;
    }
}

@-webkit-keyframes cd-3d-rotation {
    0% {
        -webkit-transform: perspective(1000px) rotateX(-90deg);
    }

    100% {
        -webkit-transform: perspective(1000px) translateY(0);
    }
}

@-moz-keyframes cd-3d-rotation {
    0% {
        -moz-transform: perspective(1000px) rotateX(-90deg);
    }

    100% {
        -moz-transform: perspective(1000px) translateY(0);
    }
}

@keyframes cd-3d-rotation {
    0% {
        -webkit-transform: perspective(1000px) rotateX(-90deg);
        -moz-transform: perspective(1000px) rotateX(-90deg);
        -ms-transform: perspective(1000px) rotateX(-90deg);
        -o-transform: perspective(1000px) rotateX(-90deg);
        transform: perspective(1000px) rotateX(-90deg);
    }

    100% {
        -webkit-transform: perspective(1000px) translateY(0);
        -moz-transform: perspective(1000px) translateY(0);
        -ms-transform: perspective(1000px) translateY(0);
        -o-transform: perspective(1000px) translateY(0);
        transform: perspective(1000px) translateY(0);
    }
}

.cd-search-trigger {
    display: none;
}

@media only screen and (min-width: 1024px) {
    .cd-search-trigger {
        display: block;
        position: relative;
        z-index: 99;
        height: 40px;
        width: 40px;
        margin: 1.25em .5em;
        float: right;
        -webkit-transition: -webkit-transform 0.3s;
        -moz-transition: -moz-transform 0.3s;
        transition: transform 0.3s;
        cursor: pointer;
    }

    .cd-search-trigger::after,
    .cd-search-trigger:before {
        content: '';
        position: absolute;
    }

    .cd-search-trigger.search-form-visible {
        -webkit-transform: translateX(-46px);
        -moz-transform: translateX(-46px);
        -ms-transform: translateX(-46px);
        -o-transform: translateX(-46px);
        transform: translateX(-46px);
    }

    .cd-search-trigger.search-form-visible::before {
        -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
        -moz-transform: translateX(-50%) translateY(-50%) scale(1);
        -ms-transform: translateX(-50%) translateY(-50%) scale(1);
        -o-transform: translateX(-50%) translateY(-50%) scale(1);
        transform: translateX(-50%) translateY(-50%) scale(1);
    }
}

/* -------------------------------- 
    CONTENT COVER LAYER
-------------------------------- */
.cd-cover-layer {
    display: none;
}

@media only screen and (min-width: 1024px) {
    .cd-cover-layer {
        display: block;
        position: fixed;
        z-index: -3;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        -webkit-transition: opacity 0.3s, visibility 0.3s;
        -moz-transition: opacity 0.3s, visibility 0.3s;
        transition: opacity 0.3s, visibility 0.3s;
    }

    .cd-cover-layer.search-form-visible {
        opacity: 1;
        visibility: visible;
    }
}

@media only screen and (max-width: 992px) {
    .cd-main-header.animate-search {
        display: none;
    }
}

.cd-search-suggestions ul {
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 500px;
}

.cd-search-suggestions ul li h4 {
    margin-bottom: 0;
}