/*=============================================================
 # CUSTOM CSS
 - Please do not edit this file. this file is generated dynamically
 - All changes here will be overwritten
===============================================================*/

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

    1. Base Elements
    2. Layout
        2.1. Grid
        2.2. Header
            2.2.1. Logo
            2.2.2. Site Actions 
            2.2.3. Navigation 
        2.3. Page Heading
        2.4. Page
        2.5. Sidebar
        2.6. Blog
        2.7. Posts
        2.8. 404 Page   
        2.9. Footer
    3. Modules
        3.1. Media
            3.1.1. Iframe and Playlist
            3.1.2. Background Media
            3.1.3. Single Image
            3.1.4. Image Caption and Zoom Icon
         3.2. Elements
            3.2.1. Buttons
            3.2.2. Icons
            3.2.3. Separator
            3.2.4. Heading
            3.2.5. Call To Action
            3.2.6. Message Box
            3.2.7. Progress Bar
            3.2.8. Progress Circle
            3.2.9. Google Maps
            3.2.10. Tabs
            3.2.11. Accordion
            3.2.12. Before/After
            3.2.13. Counters
            3.2.14. Testimonials
            3.2.15. Team
            3.2.16. Service
            3.2.17. Pricing
        3.3. Share Buttons
        3.4. Comments
        3.4. Filter
        3.5. Pagination
        3.6. Widgets
    4. Supported Plugins
        4.1. aSlider
        4.2. Contact Form 7
        4.3. Viba Portfolio
        4.4. WooCommerce
        4.5. Fivo Docs
    5. Custom CSS from admin panel

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

/*==================================================================================================
1. Base Elements
================================================================================================= */
::-moz-selection { background-color: #feffc3; color: #555 }
::selection { background-color: #feffc3; color: #555 }

body {
    font-family: 'Ubuntu', Arial, Helvetica, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.75;
    background-color: #f8f7f6; color: #666
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Josefin Sans', Arial, Helvetica, sans-serif; font-weight: 700; color: #555 
}
h1 { font-size: 34px; line-height: 1.2 }
h2 { font-size: 28px; line-height: 1.2 }
h3 { font-size: 26px; line-height: 1.2 }
h4 { font-size: 24px; line-height: 1.3 }
h5 { font-size: 22px; line-height: 1.3 }
h6 { font-size: 20px; line-height: 1.3 }

hr { border-color: #e7e7e7; }

a { color: #9373DE; border-color: rgba(0,0,0,.1); }
a:hover { border-color: rgba(0,0,0,.2); }

b, strong, .bold-text { font-family: 'Ubuntu', Arial, Helvetica, sans-serif; font-weight: 700; }
dfn, cite, em, i { font-family: 'Ubuntu', Arial, Helvetica, sans-serif; font-weight: 400; font-style: italic }

cite { font-size: 15px; color: #999 }

blockquote { font-size: 20px; color: #555; }
blockquote::before,
q::before { background-color: #9373DE }

code, kbd, tt, var, samp, pre { font-size: 15px; background-color: #fff; border-color: #eee }

mark { background-color: #9373DE; color: #fff; }

fieldset { border-color: #e7e7e7 }

label { font-size: 15px; color: #999 }
input, select, textarea { font-size: 15px; }
input, textarea, select,
input[type=checkbox], input[type=radio] { background-color: #fff; border-color: #eee; color: #777 }
input[type=radio]:checked::before { background-color: #555; }
select { color: #999 }

::-webkit-input-placeholder { color: #bbb; }
::-moz-placeholder { color: #bbb; }
:-ms-input-placeholder { color: #bbb; }

table thead th { font-size: 15px; color: #999 }
table td,
table tbody th { background-color: #fff; border-color: #eee }
table label { color: #999 }


/*==================================================================================================
2. Layout
================================================================================================= */
/* 2.1. Grid
================================================== */
@media only screen and ( min-width : 320px ) { .container { max-width: 1180px } }


/* 2.2. Header
================================================== */
.site-header { height: 45px; background-color: #fff; }
.site-header:not(.is-transparent) { box-shadow: 0px -2px 20px 0px rgba(0,0,0,.07); }

.site-header.is-transparent { background-color: rgba(255,255,255,0); }
.site-header.is-transparent.is-light { background-color: rgba(0,0,0,0); }

/* Mobile Slide Out */
@media only screen and ( max-width : 1024px ) {
    .site-header-inner { background-color: #28353D }
    .site-header-inner::-webkit-scrollbar-thumb:vertical { background-color: #9373DE; }
}

@media only screen and ( min-width : 1025px ) {
    .site-header { height: 65px; }
    .site-header.is-resized { height: 50px; }
}

@media only screen and ( min-width : 320px ) { .site-header-container.container { max-width: 1180px } }


/* 2.2.1. Logo
-----------------------------*/
.logo img { padding: 8px 0; }

@media only screen and ( min-width : 1025px ) {
    .logo img { padding: 12px 0; }
    .site-header.is-resized .logo img { padding: 8px 0; }

}

/* 2.2.2. Site Actions
-----------------------------*/
.site-action-trigger { color: #777 }
.site-action-info { background-color: #9373DE; color: #fff }
.site-action-trigger:hover .site-action-info { background-color: #28353D; color: #fff }

.site-header.is-transparent .site-action-trigger { color: #555 }
.site-header.is-transparent .site-action-info { background-color: #9373DE; color: #fff }
.site-header.is-transparent .site-action-trigger:hover .site-action-info { background-color: #28353D; color: #fff }

.site-header.is-transparent.is-light .site-action-trigger { color: #fff }
.site-header.is-transparent.is-light .site-action-info { background-color: #fff; color: #9373DE }
.site-header.is-transparent.is-light .site-action-trigger:hover .site-action-info { background-color: #28353D; color: #fff }

/* Overlay */
.site-actions-overlay { background-color: rgba(244,244,244,.85); }

/* Close Action */
.slide-out-action-close::before,
.slide-out-action-close::after { background-color: #222 }

/* Header Cart */
.header-cart { background-color: #28353D }
.header-cart .mini-cart-empty { color: rgba(255,255,255,.6) }
.header-cart .mini-cart-content::-webkit-scrollbar-thumb:vertical { background-color: #9373DE }
.header-cart .mini-cart-link { color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.07) }
.header-cart .mini-cart-title { color: #fff }

.header-cart .mini-cart .remove { background-color: #fff; color: #777 }
.header-cart .mini-cart .remove:hover { background-color: #9373DE; color: #fff }

.header-cart .mini-cart-total { border-color: rgba(255,255,255,.07); color: rgba(255,255,255,.6) }
.header-cart .mini-cart-actions { border-color: rgba(255,255,255,.07) }
.header-cart .mini-cart-actions .button { color: rgba(255,255,255,.8) }
.header-cart .mini-cart-actions .button-checkout { border-color: rgba(255,255,255,.07) }
.header-cart .mini-cart-actions .button:hover { background-color: #9373DE; color: #fff; border-color: #9373DE }

@media only screen and ( max-width : 1024px ) {
    .header-search-form .search-form .search-field { background-color: #fff }
    .header-search-form .search-form .search-field,
    .header-search-form .search-form .search-submit:hover { color: #777 }
    .header-search-form .search-form .search-submit { color: #999 }
    .header-search-form .search-form .search-field::-webkit-input-placeholder { color: #999; }
    .header-search-form .search-form .search-field::-moz-placeholder { color: #999; }
    .header-search-form .search-form .search-field:-ms-input-placeholder { color: #999; }
}

@media only screen and ( min-width : 1025px ) {
    .header-search-form { background-color: #fafafa }
    .header-search-form .search-form .search-field,
    .header-search-form .search-form .search-submit:hover { color: #777 }
    .header-search-form .search-form .search-submit { color: #999 }
    .header-search-form .search-form .search-field::-webkit-input-placeholder { color: #999; }
    .header-search-form .search-form .search-field::-moz-placeholder { color: #999; }
    .header-search-form .search-form .search-field:-ms-input-placeholder { color: #999; }
    .header-search-form-close::before,
    .header-search-form-close::after { background-color: #777 }

    .site-header.is-transparent .header-search-form { background-color: #28353D }
    .site-header.is-transparent .header-search-form .search-form .search-field,
    .site-header.is-transparent .header-search-form .search-form .search-submit:hover { color: rgba(255,255,255,.8) }
    .site-header.is-transparent .header-search-form .search-form .search-submit { color: rgba(255,255,255,.6) }
    .site-header.is-transparent .header-search-form .search-form .search-field::-webkit-input-placeholder { color: rgba(255,255,255,.6); }
    .site-header.is-transparent .header-search-form .search-form .search-field::-moz-placeholder { color: rgba(255,255,255,.6); }
    .site-header.is-transparent .header-search-form .search-form .search-field:-ms-input-placeholder { color: rgba(255,255,255,.6); }
    .site-header.is-transparent .header-search-form-close::before,
    .site-header.is-transparent .header-search-form-close::after { background-color: rgba(255,255,255,.8) }

    .site-header.is-transparent.is-light .header-search-form { background-color: #fafafa }
    .site-header.is-transparent.is-light .header-search-form .search-form .search-field,
    .site-header.is-transparent.is-light .header-search-form .search-form .search-submit:hover { color: #777 }
    .site-header.is-transparent.is-light .header-search-form .search-form .search-submit { color: #999 }
    .site-header.is-transparent.is-light .header-search-form .search-form .search-field::-webkit-input-placeholder { color: #999; }
    .site-header.is-transparent.is-light .header-search-form .search-form .search-field::-moz-placeholder { color: #999; }
    .site-header.is-transparent.is-light .header-search-form .search-form .search-field:-ms-input-placeholder { color: #999; }
    .site-header.is-transparent.is-light .header-search-form-close::before,
    .site-header.is-transparent.is-light .header-search-form-close::after { background-color: #777 }
}

/* 2.2.3. Navigation 
-----------------------------*/
.hamburger-menu span,
.hamburger-menu::before,
.hamburger-menu::after { background-color: #777 }

.site-header.is-transparent .hamburger-menu span,
.site-header.is-transparent .hamburger-menu::before,
.site-header.is-transparent .hamburger-menu::after { background-color: #555 }

.site-header.is-transparent.is-light .hamburger-menu span,
.site-header.is-transparent.is-light .hamburger-menu::before,
.site-header.is-transparent.is-light .hamburger-menu::after { background-color: #fff }

/* First Level Menu */
.site-nav > li > a { font-family: 'Josefin Sans', Arial, Helvetica, sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; color: rgba(255,255,255,.6); }

.menu-item-description { font-family: 'Ubuntu', Arial, Helvetica, sans-serif; font-weight: 400; font-style: italic; font-size: 13px; text-transform: none; color: rgba(255,255,255,.4) }

.menu-item-tooltip { font-size: 10px; text-transform: uppercase; background-color: #9373DE; color: #fff }

.site-nav > li.menu-button:not(.menu-no-link) > a > span { background-color: #9373DE; color: #fff; border-color: #9373DE; }
.site-nav > li.menu-button:not(.menu-no-link):hover > a > span { background-color: #fff; color: #777; border-color: #fff; }

/* Sub-Menu */
.site-nav ul a { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.6); }

/* Mobile Navigation */
@media only screen and ( max-width : 1024px ) {
    .site-nav a,
    /* Sub-menu */
    .site-nav ul { border-color: rgba(255,255,255,.07) }

    .site-nav li:not(.menu-no-link):hover > a,
    .site-nav li.current-menu-item > a,
    .site-nav li.is-active > a { color: #fff }    
}

/* Desktop Navigation */
@media only screen and ( min-width : 1025px ) {
    .site-nav > li > a { font-size: 12px; text-transform: uppercase; color: #777; }
    .site-nav > li:not(.menu-no-link):hover > a > span { background-color: rgba(0,0,0,.02); color: #777 }
    .site-nav > li.current-menu-item > a > span,
    .site-nav > li.current_page_parent > a > span { background-color: rgba(0,0,0,.02); color: #777 }

    .site-nav > li.menu-button:not(.menu-no-link) > a > span { background-color: #9373DE; color: #fff; border-color: #9373DE }
    .site-nav > li.menu-button:not(.menu-no-link):hover > a > span { background-color: #28353D; color: #fff; border-color: #28353D }

    /* Menu Seperator */
    .site-nav ul li.menu-separator { border-color: rgba(255,255,255,.07) }

    /* Sub-menu */
    .site-nav ul { background-color: #28353D; box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.2); }
    .site-nav ul li:hover > a { color: #fff; }
    .site-nav ul li:hover > a > span { background-color: rgba(255,255,255,.07) }

    /* Sub-menu indicator */
    .site-nav li.menu-item-has-children::after,
    .site-nav ul li.menu-item-has-children > a::after { background-color: #9373DE }

    /* Menu Title */
    .site-nav ul li.menu-title > a,
    .mega-menu > ul > li > a { font-size: 13px; text-transform: uppercase; color: #fff }

    /* Menu Over Dark Transparent Header */
    .site-header.is-transparent .site-nav > li > a { color: #555; }
    .site-header.is-transparent .site-nav > li:not(.menu-no-link):hover > a > span { background-color: rgba(0,0,0,.07); color: #555 }
    .site-header.is-transparent .site-nav > li.current-menu-item > a > span,
    .site-header.is-transparent .site-nav > li.current_page_parent > a > span { background-color: rgba(0,0,0,.07); color: #555 }

    .site-header.is-transparent .site-nav > li.menu-button:not(.menu-no-link) > a > span { background-color: #9373DE; color: #fff; border-color: #9373DE }
    .site-header.is-transparent .site-nav > li.menu-button:not(.menu-no-link):hover > a > span { background-color: #28353D; color: #fff; border-color: #28353D }

    .site-header.is-transparent .site-nav > li.menu-item-has-children::after { background-color: #9373DE }

    /* Menu Over Light Transparent Header */
    .site-header.is-transparent.is-light .site-nav > li > a { color: #fff; }
    .site-header.is-transparent.is-light .site-nav > li:not(.menu-no-link):hover > a > span { background-color: rgba(0,0,0,.07); color: #fff  }
    .site-header.is-transparent.is-light .site-nav > li.current-menu-item > a > span,
    .site-header.is-transparent.is-light .site-nav > li.current_page_parent > a > span { background-color: rgba(0,0,0,.07); color: #fff  }

    .site-header.is-transparent.is-light .site-nav > li.menu-button:not(.menu-no-link) > a > span { background-color: #fff; color: #9373DE; border-color: #fff }
    .site-header.is-transparent.is-light .site-nav > li.menu-button:not(.menu-no-link):hover > a > span { background-color: #28353D; color: #fff; border-color: #28353D }

    .site-header.is-transparent.is-light .site-nav > li.menu-item-has-children::after { background-color: #fff }
}


/* 2.3. Page Heading
================================================== */
.site-heading { background: #e7e7e7; color: #666; }
.site-heading.is-light { background: #9373DE; color: #fff; }

.site-heading-container { min-height: 50px }
.header-transparent .site-heading-container { padding-top: 85px }

body:not(.header-transparent) .site-heading.is-full-height .site-heading-container { min-height: calc(100vh - 45px) }

.site-heading-inner { max-width: 740px }

.site-title { font-size: 34px; line-height: 1.1 }
.site-subtitle { font-size: 12px; text-transform: uppercase; color: rgba(102, 102, 102, 0.7) }
.site-title-desc { font-size: 16px; color: #666 }
.site-heading .bg-media-overlay { background-color: rgba(255, 255, 255, 0.85) }

.site-title em,
.site-title-desc em { color: rgba(102, 102, 102, 0.7) }
.site-title a,
.site-title-desc a { border-color: rgba(0, 0, 0, 0.07) }
.site-title a:hover,
.site-title-desc a:hover { background: rgba(0, 0, 0, 0.07) }

.site-heading.is-light .site-subtitle { color: rgba(255,255,255,.8) }
.site-heading.is-light .site-title-desc { color: #fff }
.site-heading.is-light .bg-media-overlay { background-color: rgba(147, 115, 222, 0.85) }

.site-heading.is-light .site-title em,
.site-heading.is-light .site-title-desc em { color: rgba(255,255,255,.8) }
.site-heading.is-light .site-title a,
.site-heading.is-light .site-title-desc a { border-color: rgba(255,255,255,.1) }
.site-heading.is-light .site-title a:hover,
.site-heading.is-light .site-title-desc a:hover { background: rgba(255,255,255,.1) }

@media only screen and ( min-width : 320px ) { .site-heading-container.container { max-width: 1180px } }

@media only screen and ( min-width : 660px ) {
    .site-heading-container { min-height: 50px }
    .site-title { font-size: 34px; line-height: 1.1 }
}

@media only screen and ( min-width : 1025px ) {
    .site-heading-container { min-height: 50px }
    .header-transparent .site-heading-container { padding-top: 105px }
    body:not(.header-transparent) .site-heading.is-full-height .site-heading-container { min-height: calc(100vh - 65px) }

    .site-title { font-size: 44px; line-height: 1.1 }
}


/* 2.4. Page
================================================== */
.site { padding-top: 45px }

@media only screen and ( min-width : 1025px ) {
    .site { padding-top: 65px }
}


/* 2.5. Sidebar
================================================== */
.widget-area { border-color: #e7e7e7 }

@media only screen and ( min-width : 1025px ) {
    .has-sidebar .content-area { width: 77%; border-color: #e7e7e7 }
    .has-sidebar .widget-area { width: 23%; }
}


/* 2.6. Blog
================================================== */
.blog-post { color: #777 }
.blog-post-link { background-color: #fff; color: #777; border-color: #eee; }
.blog-post-link:hover { border-color: #9373DE; box-shadow: 0 0 20px 0 rgba(0,0,0,.1) }

.blog-post-thumbnail { padding-bottom: 60%; background-color: #eee }

.blog-post-meta,
.blog-post-footer { font-size: 12px; font-weight: 500; color: #bbb; }
.blog-post-meta::after { background-color: #eee; }
.blog-post-cats { font-size: 12px; text-transform: uppercase; color: #999; }

.blog-post-title { font-size: 22px; color: #555; }
.blog-post-content p { font-size: 15px }

.blog-post-link:hover .blog-post-title { color: #9373DE }
.blog-post-link:hover .blog-post-footer { color: #999 }


/* 2.7. Posts
================================================== */
.single-post:not(.has-sidebar) .site-heading-container { max-width: 740px }
.single-post:not(.has-sidebar) .site-main { max-width: 700px; }


/* 2.8. 404 Page  
================================================== */
.error404-sign { color: #9373DE; }


/* 2.9. Footer
================================================== */
.site-footer { background-color: #28353D; color: rgba(255,255,255,.8) }
.site-footer a { color: rgba(255,255,255,.6) }
.site-footer a:hover { color: #fff; border-color: rgba(255,255,255,.3) }

.footer-menu { font-size: 16px }
.footer-menu ul li a { font-family: 'Josefin Sans', Arial, Helvetica, sans-serif; font-weight: 700; color: rgba(255,255,255,.8) }
.footer-menu ul li a:hover { color: #fff }

.copyright p { font-size: 13px; color: rgba(255,255,255,.4) }
.copyright a { color: rgba(255,255,255,.4); border-color: rgba(255,255,255,.07) }

.footer-social .social-icon { color: rgba(255,255,255,.6) }

@media only screen and ( min-width : 320px ) { .site-footer-container.container { max-width: 1180px } }


/*==================================================================================================
3. Modules
================================================================================================= */
/* 3.1. Media
================================================== */
/* 3.1.1. Iframe and Playlist
-----------------------------*/
.iframe-wrapper { background-color: #fff; color: #999; }

.wp-playlist { background-color: #fff; color: #999; border-color: #eee; }
.wp-playlist a { color: #777; }
.wp-playlist-tracks,
.wp-playlist-current-item,
.wp-playlist-item { border-color: #eee; }

.wp-playlist-playing a { color: #9373DE; }

/* 3.1.2. Background Media
-----------------------------*/
.bg-media-overlay { background-color: rgba(147,115,222,.85) }

/* 3.1.3. Single Image
-----------------------------*/
.image-thumbnail { background-color: #fff; color: #bbb; }

/* 3.1.4. Image Caption and Zoom Icon
-----------------------------*/
.image-caption,
.wp-caption-text { font-size: 12px; font-weight: 500; background-color: #28353D; color: rgba(255,255,255,.8); }

.image-zoom-icon { background-color: #9373DE; }
.image-zoom-icon::before { color: #fff; }

/* Lightbox */
.apalodi-mfp.mfp-bg { background: rgba(51,51,51,.9); }


/* 3.2. Elements
================================================== */
/* 3.2.1. Buttons
-----------------------------*/
/* Primary Button */
button,
.button,
p > a.button,
input[type='button'],
input[type='reset'],
input[type='submit'] { 
    font-family: 'Josefin Sans', Arial, Helvetica, sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase;
    background-color: #9373DE; color: #fff; border-color: #9373DE;
}

button:hover,
.button:hover,
p > a.button:hover,
input[type='button']:hover,
input[type='submit']:hover {
    background-color: #28353D; color: #fff; border-color: #28353D; box-shadow: 0 0 20px 0 rgba(0,0,0,.1)
}

/* Secondary Button */
.button-secondary,
input[type='reset'] { background-color: #fff; color: #9373DE; border-color: #9373DE; }

.button-secondary:hover,
input[type='reset']:hover { background-color: #28353D; color: #fff; border-color: #28353D; box-shadow: 0 0 20px 0 rgba(0,0,0,.1)}

/* Tertiary Button */
.button-tertiary { background-color: #fff; color: #999; border-color: #eee; }
.button-tertiary:hover { background-color: #fff; color: #9373DE; border-color: #9373DE; box-shadow: 0 0 20px 0 rgba(0,0,0,.1)}

.button-size-xs { font-size: 9px; text-transform: uppercase }
.button-size-sm { font-size: 11px; text-transform: uppercase }
.button-size-lg { font-size: 15px; text-transform: uppercase }

/* 3.2.2. Icons
-----------------------------*/
.icon-with-border { border-color: #e7e7e7 }
.icon-with-bg { background-color: #fff; color: #9373DE }

/* 3.2.3. Separator
-----------------------------*/
.separator-line { background-color: #e7e7e7 }
.separator-title { font-size: 18px; text-transform: uppercase; color: #666 }

/* 3.2.4. Heading
-----------------------------*/
.heading { font-size: 30px }
.subheading { font-size: 12px; text-transform: uppercase; color: #999; }
.heading-separator .icon { color: #999 }
.bg-heading { font-size: 100px; color: rgba(0,0,0,.07); }
.heading-desc { font-size: 16px }

/* 3.2.5. Call To Action
-----------------------------*/
.cta-wrapper { background-color: #9373DE; color: #fff }
.cta-heading { font-size: 30px; color: #fff }
.cta-subheading { font-size: 12px; text-transform: uppercase; color: rgba(255,255,255,.8); }
.cta-bg-meta { font-size: 80px; color: rgba(0,0,0,.07); }

/* 3.2.6. Message Box
-----------------------------*/
.message-box { background-color: #9373DE; color: #fff; border-color: #9373DE; }

/* 3.2.7. Progress Bar
-----------------------------*/
.progress-bar-label { font-size: 12px; text-transform: uppercase; font-weight: 500; color: #666 }
.progress-bar-line { background-color: #9373DE }
.progress-bar-background { background-color: #e7e7e7 }

/* 3.2.8. Progress Circle
-----------------------------*/
.progress-circle-background { border-color: #e7e7e7 }
.progress-circle-label { font-size: 26px; color: #666 }
.progress-circle-value { font-size: 50px; font-weight: 500; color: #666 }

/* 3.2.9. Google Maps
-----------------------------*/
.google-map { background-color: #fff; color: #bbb }

/* 3.2.10. Tabs
-----------------------------*/
.tabs-type-indicator .tabs { border-color: #e7e7e7 }
.tabs a { color: #555 }
.tabs a.is-active { color: #9373DE }

.tabs-type-fill .tabs a { background-color: #fff; color: #999; border-color: #eee; }
.tabs-type-fill .tabs a.is-active { background-color: #9373DE; color: #fff; border-color: #9373DE; }
.tabs-type-fill .tabs a:not(.is-active):hover { color: #9373DE; border-color: #9373DE; box-shadow: 0 0 20px 0 rgba(0,0,0,.1) }
.tabs .tab-indicator { background-color: #9373DE }

/* 3.2.11. Accordion
-----------------------------*/
.accordion-nav { background-color: #fff; color: #999; border-color: #eee; }
.accordion-nav.is-active { background-color: #9373DE; color: #fff; border-color: #9373DE; }
.accordion-nav:not(.is-active):hover { color: #9373DE; border-color: #9373DE; box-shadow: 0 0 20px 0 rgba(0,0,0,.1) }
.accordion .panel { background-color: #fff; color: #777; border-color: #eee; }

/* 3.2.12. Before/After
-----------------------------*/
.before-after-handle span { background-color: #9373DE; color: #fff; }

/* 3.2.13. Counters
-----------------------------*/
.counter-wrapper .icon { color: #9373DE }
.counter { font-size: 40px }
.counter-title { font-size: 18px; color: #999 }

.counter-type-box { background-color: #fff; color: #555; border-color: #eee }
.counter-type-box .icon { color: #9373DE }
.counter-type-box .counter-title { color: #999 }

.counter-type-border { border-color: #e7e7e7 }

/* 3.2.14. Testimonials
-----------------------------*/
.testimonial-type-box { background-color: #fff; color: #999; border-color: #eee; }
.testimonial-quote { font-size: 28px; line-height: 1.2; color: #9373DE; }
.testimonial-author { font-size: 20px; }
.testimonial-desc { font-size: 14px; color: #999; }
.testimonial-type-box .testimonial-quote { color: #9373DE; }
.testimonial-type-box .testimonial-author { color: #555; }

/* 3.2.15. Team
-----------------------------*/
.team-name { font-size: 24px }
.team-desc { font-size: 15px; color: #999 }
.team-info p { font-size: 15px }

.team-boxed.team-over-image,
.team-boxed:not(.team-over-image) .team-info { background-color: #fff; color: #999; border-color: #eee; }
.team-boxed:not(.team-over-image) .team-name { color: #555 }
.team-boxed:not(.team-over-image) .team-desc { color: #999 }
.team-boxed:not(.team-over-image) .team-info p { color: #777 }
.team-boxed:not(.team-over-image) .team-icon { color: #9373DE; border-color: rgba(0,0,0,.1) }
.team-boxed:not(.team-over-image) .team-icon:hover { border-color: rgba(0,0,0,.2) }

.team-over-image .image-thumbnail::after { background-color: rgba(147,115,222,.9) }
.team-over-image .team-name { color: #fff }
.team-over-image .team-desc { color: rgba(255,255,255,.8) }
.team-over-image .team-info p { color: #fff }
.team-over-image .team-icon { color: #fff; border-color: rgba(255,255,255,.2) }
.team-over-image .team-icon:hover { border-color: rgba(255,255,255,.4) }

/* 3.2.16. Services
-----------------------------*/
.service-title { font-size: 24px }
.service-meta { color: #9373DE; }
.service-desc { font-size: 15px; color: #999; }
.service-info p { font-size: 15px }
.service-bg-meta-wrapper { font-size: 80px; color: rgba(0,0,0,.07); }

.service-boxed { background-color: #fff; color: #999; border-color: #eee; }
.service-boxed .service-title { color: #555; }
.service-boxed .service-meta { color: #9373DE; }
.service-boxed .service-desc { color: #999; }
.service-boxed .service-info p { color: #777; }
.service-boxed .service-bg-meta-wrapper { color: rgba(0,0,0,.07); }

/* 3.2.17. Pricing
-----------------------------*/
.pricing-wrapper { background-color: #fff; color: #777; border-color: #eee; }

.pricing-title { font-size: 32px }
.pricing-desc { font-size: 15px; color: #999 }
.pricing-price-wrapper { color: #555 }
.pricing-unit { font-size: 20px }
.pricing-price { font-size: 65px }
.pricing-period { font-size: 12px; color: #999 }

.pricing-list { font-size: 15px; }
.pricing-additional-info { font-size: 12px; color: #999 }


/* 3.3. Share Buttons
================================================== */
.share-buttons .share-button { background-color: #fff; color: #999; border-color: #eee; }
.share-buttons .share-button:hover { border-color: #9373DE; color: #9373DE; box-shadow: 0 0 20px 0 rgba(0,0,0,.1) }
.share-buttons .share-button::before { font-size: 12px; }


/* 3.4. Comments
================================================== */
.comments-area .no-comments { color:  #999; }

.comment-body { font-size: 15px; background-color: #fff; color: #777; border-color: #eee; }
.bypostauthor > .comment-body { border-color: #9373DE; }
.comment-body a { color: #9373DE; border-color: rgba(0,0,0,.1); }
.comment-body a:hover { color: #777; border-color: rgba(0,0,0,.2); }

.comment-meta::after { background-color: #eee; }

.comments-title,
.comment-reply-title { font-size: 14px; text-transform: uppercase }
.comments-title::before,
.comment-reply-title::before,
.comments-title::after,
.comment-reply-title::after { border-color: #999; background-color: #999 }

.comment-awaiting-moderation { color: #9373DE }

.comment-author,
.comment-author a { font-size: 12px; text-transform: uppercase; font-weight: 500; color: #999; }

.comment-metadata,
.comment-metadata a,
.reply .comment-reply-link,
.comment-reply-login,
.comment-awaiting-moderation,
.pingback .comment-body,
.trackback .comment-body { font-size: 12px; font-weight: 500; color: #bbb; }

.comment-metadata a:hover,
.reply .comment-reply-link:hover { color: #999; }

.comment-meta .star-rating { font-size: 12px; text-transform: uppercase }

/* Respond Form */
.comment-respond .comment-notes,
.comment-respond .logged-in-as,
.comment-respond .must-log-in { font-size: 15px; color: #999; }

#cancel-comment-reply-link { background-color: #9373DE; color: #fff; border-color: #9373DE; }


/* 3.4. Filter
================================================== */
.filter-list li a { 
    font-size: 12px; font-weight: 500; background-color: #fff; color: #999; border-color: #eee;
 }
.filter-list li a:hover,
.filter-dropdown:hover .filter-button { border-color: #9373DE; color: #9373DE; box-shadow: 0 0 20px 0 rgba(0,0,0,.1) }
.filter-list li a.is-active { background-color: #9373DE; color: #fff; border-color: #9373DE }


/* 3.5. Pagination
================================================== */
.paging-navigation .page-numbers,
.paging-navigation .pagination-arrow a {
    font-size: 12px; font-weight: 500; color: #999
}

.paging-navigation .pagination-arrow a,
.paging-navigation .page-numbers .page-numbers { background-color: #fff; border-color: #eee; }

/* Pagination Arrows */
.paging-navigation .pagination-arrow { color: #bbb; }
.paging-navigation .pagination-arrow-desc {
    font-size: 12px; font-weight: 500; color: #bbb
}

/* Active */
.page-links.paging-navigation .page-numbers > span,
.paging-navigation .page-numbers .page-numbers.current { background-color: #9373DE; color: #fff; border-color: #9373DE }
.page-links.paging-navigation .page-numbers a:hover span,
.paging-navigation .page-numbers a.page-numbers:hover,
.paging-navigation .pagination-arrow a:hover { border-color: #9373DE; color: #9373DE; box-shadow: 0 0 20px 0 rgba(0,0,0,.1) }


/* Single Pagination */
.single-navigation .nav-single-links a { 
    font-size: 12px; font-weight: 500; background-color: #fff; border-color: #eee; color: #999;
}
.single-navigation .nav-single-links a:hover { border-color: #9373DE; color: #9373DE; box-shadow: 0 0 20px 0 rgba(0,0,0,.1) }


/* 3.6. Widgets
================================================== */
.widget-area { font-size: 14px; line-height: 1.4 }

.widget h3 { font-size: 14px; text-transform: uppercase }
.widget h3::before,
.widget h3::after { border-color: #999; background-color: #999 }

.widget button,
.widget .button,
.widget input[type='button'],
.widget input[type='reset'],
.widget input[type='submit'] { font-size: 11px; text-transform: uppercase; }

.widget ul li,
.widget ul.children,
.widget ul.sub-menu { border-color: #e7e7e7 }

/* Search Widget */
.widget .search-form .search-field { font-size: 14px }
.search-form .search-submit { color: #999 }
.search-form .search-submit:hover { color: #666  }

/* Recent Posts Widget */
.widget_recent_entries ul li::before { background-color: #9373DE; color: #fff }
.widget_recent_entries ul li a { font-weight: 500 }
.widget_recent_entries ul li span { font-size: 12px; font-weight: 500; color: #999 }

/* Tag Cloud Widget */
.tagcloud a {
    font-size: 12px; font-weight: 500; background-color: #fff; color: #999; border-color: #eee;
}
.tagcloud a:hover { border-color: #9373DE; color: #9373DE; box-shadow: 0 0 20px 0 rgba(0,0,0,.1) }

/* Calendar Widget */
.widget_calendar th,
.widget_calendar td,
.widget_calendar caption { font-size: 12px; font-weight: 500; color: #999 }
.widget_calendar tbody td { background-color: #fff; color: #999; border-color: #eee; }

/* RSS Widget */
.widget_rss .rss-date { font-size: 12px; font-weight: 500; color: #999 }

/* Mini Cart Widget */
.mini-cart-title { font-size: 16px }
.mini-cart .quantity,
.mini-cart .variation { font-size: 12px }
.mini-cart .quantity { font-weight: 500 }
.mini-cart-total { font-size: 12px; font-weight: 500 }

.mini-cart .remove { background-color: #fff; color: #999; box-shadow: 0 0 30px 0 rgba(0,0,0,.1); }
.mini-cart .remove:hover { background-color: #9373DE; color: #fff; }

/* Price Filter Widget */
.widget_price_filter .ui-slider { background-color: #fff; border-color: #eee }
.widget_price_filter .ui-slider-range,
.widget_price_filter .ui-slider-handle { background-color: #9373DE; }
.widget_price_filter .price_label { font-size: 12px; font-weight: 500; color: #999 }

/* Top Rated Products & Recent Reviews Widget */
.widget_recent_reviews .star-rating,
.widget_top_rated_products .star-rating { font-size: 12px }


/*==================================================================================================
4. Supported Plugins
================================================================================================= */
/* 4.1. aSlider
================================================== */
.header-transparent .aslider-content-wrapper { padding-top: 45px; }
body:not(.header-transparent) .aslider-wrapper.is-full-height .aslider-swiper-wrapper { height: calc(100vh - 45px) }

@media only screen and ( min-width : 1025px ) {
    .header-transparent .aslider-content-wrapper { padding-top: 65px; }
    body:not(.header-transparent) .aslider-wrapper.is-full-height .aslider-swiper-wrapper { height: calc(100vh - 65px) }
}

/* 4.2. Contact Form 7
================================================== */
.wpcf7-not-valid { border-color: #9373DE; }
.wpcf7-not-valid-tip { color: #9373DE }
.wpcf7-response-output { background-color: #9373DE; color: #fff; border-color: #9373DE; }


/* 4.3. Viba Portfolio
================================================== */
.viba-portfolio-media .viba-portfolio-link { padding-bottom: 100% }
.viba-portfolio-item-landscape .viba-portfolio-media .viba-portfolio-link { padding-bottom: 50% }
.viba-portfolio-item-portrait .viba-portfolio-media .viba-portfolio-link { padding-bottom: 200% }
.viba-portfolio-single-item .image-thumbnail { padding-bottom: 56.25% }

.viba-portfolio-single-meta { font-size: 15px }
.viba-portfolio-single-meta h3 { color: #666 }

.vp-ajax-loader span { background-color: #9373DE }

.vp-ajax-actions-wrapper .vp-ajax-actions a,
.viba-portfolio-single-meta .viba-portfolio-likes { 
    font-size: 12px; font-weight: 500; background-color: #fff; color: #999; border-color: #eee;
 }

.vp-ajax-actions-wrapper .vp-ajax-actions a:hover,
.viba-portfolio-single-meta .viba-portfolio-likes:hover { border-color: #9373DE; color: #9373DE; box-shadow: 0 0 20px 0 rgba(0,0,0,.1) }

.viba-portfolio-related > h3 { font-size: 14px; text-transform: uppercase }
.viba-portfolio-related > h3::before,
.viba-portfolio-related > h3::after { border-color: #999; background-color: #999 }

.vp-ajax-backdrop { background-color: rgba(51,51,51,.9) }
.vp-ajax-actions-wrapper { background-color: #fff; color: #999; border-color: #eee; }
.vp-ajax-content { background-color: #f8f7f6 }


/* 4.4. WooCommerce
================================================== */
.woocommerce-result-count { font-size: 15px; color: #999 }

.product-media .image-thumbnail { padding-bottom: 100%; background-color: #eee }
.single-product-media .image-thumbnail { padding-bottom: 100% }

.product { color: #777 }
.product-inner { background-color: #fff; color: #777; border-color: #eee; }
.product-inner:hover { border-color: #9373DE; box-shadow: 0 0 20px 0 rgba(0,0,0,.1) }

.product .onsale { font-size: 12px; font-weight: 500; background-color: #9373DE; color: #fff; }

.product-meta,
.product-content .price { font-size: 12px; font-weight: 500; color: #bbb; }
.product-meta::after { background-color: #eee; }
.product-cats { font-size: 12px; text-transform: uppercase; color: #999; }

.product-content h3 { font-size: 22px; color: #555; }
.product-inner:hover .product-content h3 { color: #9373DE }

.product-desc { font-size: 15px }
.product-inner:hover .product-content .price { color: #999 }

.single-product-content p.price,
.single-product-content .stock { font-size: 12px; font-weight: 500; background-color: #fff; color: #999; border-color: #eee; }

.product-tabs .page-numbers { font-size: 12px; font-weight: 500; color: #999 }
.product-tabs .page-numbers .page-numbers { background-color: #fff; color: #999; border-color: #eee; }

/* Active */
.product-tabs .page-numbers .page-numbers.current { background-color: #9373DE; color: #fff; border-color: #9373DE; }
.product-tabs .page-numbers a.page-numbers:hover { border-color: #9373DE; color: #9373DE; box-shadow: 0 0 20px 0 rgba(0,0,0,.1) }

.woocommerce-error,
.woocommerce-info,
.woocommerce-message { background-color: #9373DE; color: #fff; border-color: #9373DE; }

.woocommerce-error a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-message a:not(.button) { border-color: rgba(255,255,255,.2) }

.woocommerce-error a:not(.button):hover,
.woocommerce-info a:not(.button):hover,
.woocommerce-message a:not(.button):hover { border-color: rgba(255,255,255,.4) }

.woocommerce-error .button,
.woocommerce-info .button,
.woocommerce-message .button { background-color: #fff; color: #9373DE; border-color: #9373DE }

.woocommerce-error .button:hover,
.woocommerce-info .button:hover,
.woocommerce-message .button:hover { background-color: #28353D; color: #fff; border-color: #28353D; box-shadow: 0 0 20px 0 rgba(0,0,0,.1) }

.product-name .variation { font-size: 12px; font-weight: 500; color: #999 }

.woocommerce-invalid input { border-color: #9373DE; }

.payment_methods,
.payment_methods li { background-color: #fff; color: #999; border-color: #eee; }
#payment label { color: #555 }

.woocommerce-MyAccount-navigation ul li a { font-size: 12px; font-weight: 500; background-color: #fff; color: #999; border-color: #eee; }
.woocommerce-MyAccount-navigation ul li a:hover { border-color: #9373DE; color: #9373DE; box-shadow: 0 0 20px 0 rgba(0,0,0,.1) }
.woocommerce-MyAccount-navigation ul li.is-active a { background-color: #9373DE; color: #fff; border-color: #9373DE }

.checkout h3,
.cross-sells h2,
.cart-collaterals h2,
.product-tabs .panel h2:first-of-type,
.upsells.products h2:first-of-type,
.related.products h2:first-of-type,
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 { font-size: 14px; text-transform: uppercase }

.checkout h3::before,
.cross-sells h2::before,
.cart-collaterals h2::before,
.checkout h3::after,
.cross-sells h2::after,
.cart-collaterals h2::after,
.product-tabs .panel h2:first-of-type::before,
.product-tabs .panel h2:first-of-type::after,
.upsells.products h2:first-of-type::before,
.related.products h2:first-of-type::before,
.upsells.products h2:first-of-type::after,
.related.products h2:first-of-type::after,
.woocommerce-MyAccount-content h2::before,
.woocommerce-MyAccount-content h3::before,
.woocommerce-MyAccount-content h2::after,
.woocommerce-MyAccount-content h3::after { border-color: #999; background-color: #999  }


/* 4.5. Fivo Docs
================================================== */
.fivo-docs-list,
.fivo-docs-subcategories { background-color: #fff; }
.fivo-docs .fivo-docs-item { color: #777; border-color: #eee }
.fivo-docs .fivo-docs-item:hover { color: #9373DE }
.fivo-docs-item .fivo-docs-info { color: #bbb }

.fivo-docs-category-title,
.fivo-docs-boxed-title { background-color: #9373DE; color: #fff; border-color: #9373DE; }

.fivo-docs-subcategories,
.fivo-docs-subcategory,
.fivo-docs-boxed-list { border-color: #eee }

.fivo-docs-subcategory-title { background-color: #fff; color: #999; border-color: #fff }

.fivo-docs-subcategory-title.is-active,
.fivo-docs-subcategory-title:hover { color: #555; }
.fivo-docs-subcategory-title:hover { background-color: rgba(0,0,0,.07); border-color: rgba(0,0,0,.07) }
.fivo-docs-subcategory-title.is-active,
.fivo-docs-subcategory-title.is-active:hover { background-color: rgba(0,0,0,.07); border-color: rgba(0,0,0,.07) }

.fivo-docs-subcategory-action::before,
.fivo-docs-subcategory-action::after { background-color: #bbb; }
.fivo-docs-subcategory-title:hover span::before,
.fivo-docs-subcategory-title:hover span::after { background-color: #555; }
.fivo-docs-subcategory-title.is-active span::before,
.fivo-docs-subcategory-title.is-active span::after { background-color: #555 }

.fivo-docs-attachments-title,
.fivo-docs-attachments .fivo-docs-item { border-color: #e7e7e7 }
.fivo-docs-attachments .fivo-docs-item { color: #666; }
.fivo-docs-attachments .fivo-docs-item:hover { color: #9373DE; }
.fivo-docs-attachments-title { color: #666; }
.fivo-docs-attachments .fivo-docs-item .fivo-docs-info { color: #999; }


/*==================================================================================================
5. Custom CSS from admin panel
================================================================================================= */