/* scalabBle - Consolidated Styles */
/* Optimized and cleaned CSS from all site pages */

/* ==========================================================================
   CSS Reset & Base Styles
   ========================================================================== */

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

/* ==========================================================================
   Typography & Fonts
   ========================================================================== */

/* BODY TEXT */  
body, h3#reply-title {
    font-family: 'robotoregular';
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    line-height: 26px;
    background: #f2f2f2;
    color: #414141;
}

/* QUOTE TEXT */   
.lead, blockquote, .tweet, .post-type-quote, .tweet b, aside .tweet, 
.widget-footer .tweet, .post-type-tweet {
    font-family: 'aleolightitalic';
    font-weight: normal;
    font-style: normal;
}

/* BOLD TEXT */ 
strong, h5, h6, b, .more, ol > li:before, .comment-reply-link, 
.comment-edit-link, ul.pagination li, ul.paging li, ul.page-numbers li, 
.link-pages p, #comments_pagination, ol.graphs > li, label, .price h3 span {
    font-family: 'robotobold';
    font-weight: normal;
    font-style: normal;
}

/* ITALIC TEXT */ 
em, .error[generated=true], .wp-caption-text, span.wpcf7-not-valid-tip {
    font-family: 'robotoitalic';
    font-weight: normal;
    font-style: normal;
}

/* MAIN HEADING TEXT */ 
.logo-text, h1, h2, h3, .text-seperator h5, input[type=text], 
input[type=email], input[type=password], textarea, input[type=tel], 
input[type=url], input[type=date], input[type=range] {
    font-family: "Ubuntu";
}

/* NAV STYLE TEXT */ 
.nav a, #menu-icon, .main ul.meta li, cite, aside ul li, ul.tab-nav li, 
.boxed h5, h3.v_nav, .product_meta {
    font-family: 'robotoregular', 'Ubuntu';
    font-weight: normal;
    font-style: normal;
}

h1, .logo-text {
    font-size: 40px;
}

h2:after, .tp-caption.heading:after {
    content: "";
}

/* ==========================================================================
   Color Scheme
   ========================================================================== */

/* Body Text Colors */
html, body, button, input, select, textarea, .page-numbers.current, 
ul.page-numbers a.page-numbers:hover, div.link-pages p a:hover, 
#comments_pagination a:hover, footer .foot.left a:hover, 
footer ul.social-link a:hover, h3.v_nav, .comments p {
    color: #414141;
}

/* Link Colors */
a {
    color: #fc604a;
}

/* Main Feature Color */
.main ul li:before, h1, h1 a, h3, h2 span, h4 span, h5 span, h6 span, 
.main a:hover, .feature a:hover, cite, nav a.active, #nav a:hover, #nav ul a:hover,  
.more:before, ol > li:before, .cta a:hover, .error[generated=true], 
#nav ul li a:hover, ul.pagination li a.active, ul.comments h5 a, h2:after, .tweet a, 
.meta.option-set a.selected, .tp-caption.heading:after, .tp-caption.cite, 
.icon-thirds li:hover em:before, .tab-nav li.active, ul.toggle .toggle-btn.active, 
ul.accordion .accordion-btn.active, .boxed ul.social-link a:hover, .boxed h5, 
.caption-cite, .comment-reply-link:before, .comment-edit-link:before, 
#cancel-comment-reply-link:before, nav li.current-menu-item > a, 
#nav ul.sub-menu li a:before, .logo-text:hover, .link-pages a, 
a.page-numbers, #comments_pagination a, .nav li.current-menu-ancestor > a, 
#nav .sub-menu li.current-menu-ancestor > a:hover, .tweet b, .nav a:hover, 
h3.v_nav.v_active, span.wpcf7-not-valid-tip {
    color: #fc604a;
}

/* Heading Colors */
h1 span, h2, h3 span, h2 a, h4, h5, .nav a, #response .success, 
.success:before, #response .failure, pre, .main h1 a:hover, strong, b, 
.lead, .main table th, blockquote, .more, .cta a, .tweet, ul.pagination li a, 
ul.comments h5 a:hover, .caption h1, .sub-menu li.current-menu-parent > a, 
#nav .sub-menu li.current-menu-ancestor > a {
    color: #000;
}

/* Meta Text Colors */
h6.tags a, .meta, .meta a, aside ul li a, aside ul li, .widget-footer .tweet:before, 
.text-seperator h5, .boxed ul.social-link a, ul.comments h6, .sticky h1:before, 
.wp-caption-text, .bypostauthor, .gallery-caption {
    color: #cacaca;
}

/* Input Text Colors */
.tweet, input[type=text], input[type=email], input[type=password], textarea, 
input[type=tel], input[type=url], input[type=date], input[type=range] {
    color: #969ca5;
}

/* Message Colors */
pre, .message, div.wpcf7-validation-errors {
    color: #414141;
}

/* Caption Colors */
.caption-h1, .caption-h2, .caption-text, .caption-text-small, 
.caption-italic, .caption-italic-fancy {
    color: #000;
}

/* ==========================================================================
   Background Colors
   ========================================================================== */

/* Main Background Tile */
body {
    background-image: url("../img/tile2.png");
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: top center;
}

/* Main Plate Background */
.outter-wrapper, #nav ul, ul.tab-nav li, .text-seperator h5, 
ul.tab-nav li.active, h3.v_nav.v_active {
    background-color: #fff;
}

/* Widget Footer Background */
.widget-footer, .main table th, .price:hover, .price {
    background: #f7f7f7;
}

/* Input Background */
ul.comments .odd, input[type=text], input[type=email], input[type=password], 
textarea, input[type=tel], input[type=url], input[type=date], input[type=range], 
ol.graphs > li, .message.promo, .main table tr:nth-child(2n+1), ul.tab-nav li, 
ul.pagination .left a, ul.pagination .right a, ul.paging a span, 
ul.page-numbers li a.next, ul.page-numbers li a.prev, ul.paging span, 
.boxed, ul.sitemap li a, .column-example div, h3.v_nav {
    background-color: #f5f5f5;
}

/* ==========================================================================
   Buttons & Interactive Elements
   ========================================================================== */

/* Button Backgrounds */
a.btn, input[type=button], input[type=submit], #menu-icon, ol.graphs > li div, 
.highlight, .flex-control-paging li a.flex-active, ul.pagination .left a:hover, 
ul.pagination .right a:hover, ul.paging a:hover span, footer, .price.price-feature h3, 
.btn.active:hover, .tp-caption.btn a, .caption-button, 
.tp-bullets.simplebullets.round .bullet.selected, ul.page-numbers li a.next:hover, 
ul.page-numbers li a.prev:hover, ul.paging span:hover, .tp-button.default {
    background-color: #fc604a;
}

/* Button Text Colors */
a.btn, input[type=button], input[type=submit], #menu-icon, ol.graphs > li div, 
.highlight, .flex-control-paging li a.flex-active, ul.pagination .left a:hover, 
ul.pagination .right a:hover, ul.paging a:hover span, footer, .price.price-feature h3, 
.btn.active:hover, .tp-caption.btn a, .caption-button, 
.tp-bullets.simplebullets.round .bullet.selected, ul.page-numbers li a.next:hover, 
ul.page-numbers li a.prev:hover, ul.paging span:hover, .tp-button.default, 
footer .foot.left a, ul.pagination .left a, ul.pagination .right a, 
ul.paging a span, ul.page-numbers li a.next, ul.page-numbers li a.prev, 
ul.paging span, .tp-button, footer ul.social-link a {
    color: #fff;
}

/* Button Hover States */
a.btn:hover, input[type=button]:hover, input[type=submit]:hover, 
#menu-icon.active, .btn.active, .price h3, .tp-caption.btn a:hover, 
.caption-button:hover, .flex-control-paging li a, 
.tp-bullets.simplebullets.round .bullet, .tp-button:hover.green, 
.tp-button:hover.blue, .tp-button:hover.red, .tp-button:hover.orange, 
.tp-button:hover.darkgrey, .tp-button:hover.default {
    background-color: #646d72;
}

a.btn:hover, input[type=button]:hover, input[type=submit]:hover, 
#menu-icon.active, .btn.active, .price h3, .tp-caption.btn a:hover, 
.caption-button:hover, .tp-bullets.simplebullets.round .bullet, 
.tp-button:hover.green, .tp-button:hover.blue, .tp-button:hover.red, 
.tp-button:hover.orange, .tp-button:hover.darkgrey, .tp-button:hover.default, 
ul.pagination .left a, ul.pagination .right a, ul.paging a span, 
ul.page-numbers li a.next, ul.page-numbers li a.prev, ul.paging span, 
.price h3 span, a.button:hover {
    color: #fff;
}

/* ==========================================================================
   Borders
   ========================================================================== */

/* General Borders */
hr, hr.dash, hr.dots, .right-aside, blockquote.right, .widget-footer, 
.widget-footer .fourth.widget, fieldset, .main table, .main table th, 
.main table td, .main ul.meta li, aside ul li, .recentwork, .text-seperator, 
.tab-nav li.active, .tab-content-block, .tab-nav li, ul.toggle li, 
.boxed ul.social-link, ul.accordion li, ul.social-link li:before, 
ul.tab-nav li.active, .thumb-gallery .third, .price-detail ul li, 
.price-detail ul li:last-child, .wp-caption-text, h3.v_active {
    border-color: #ededed;
}

/* Feature Borders */
#nav ul {
    border-color: #fc604a;
}

/* ==========================================================================
   Layout & Structure
   ========================================================================== */

/* Logo */
.logo {
    max-width: 250px;
}

/* Header */
.header-container header {
    padding-top: 53px;
    padding-bottom: 20px;
}

#header_logo {
    position: relative;
    top: 5px;
    left: 0px;
}

#nav-wrap {
    position: relative;
    top: 0px;
    right: 0px;
}

/* Wrapper and Layout */
.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.third {
    width: 33.33%;
    float: left;
    box-sizing: border-box;
    padding: 0 15px;
}

.third.last {
    margin-right: 0;
}

.centered {
    text-align: center;
}

.main-content {
    padding: 20px 0;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

#nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

#nav li {
    display: inline-block;
    position: relative;
}

#nav a {
    text-decoration: none;
    padding: 10px 15px;
    display: block;
}

#nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: none;
}

#nav li:hover .sub-menu {
    display: block;
}

.header-container .nav li {
    margin: 0;
}

/* Mobile Navigation */
@media only screen and (max-width: 768px) {
    #nav, #nav ul {
        background-color: #646d72;
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
    background: #646d72;
    color: #fff;
    padding: 20px 0;
    margin-top: 40px;
}

footer .foot {
    display: inline-block;
}

footer .foot.left {
    float: left;
}

footer .foot.right {
    float: right;
}

footer .social-link {
    list-style: none;
    margin: 0;
    padding: 0;
}

footer .social-link li {
    display: inline-block;
    margin: 0 5px;
}

/* ==========================================================================
   Blog & Content
   ========================================================================== */

.post {
    margin-bottom: 40px;
    padding-bottom: 20px;
}

.post h1 {
    margin-bottom: 10px;
}

.post .mosaic-block {
    margin-bottom: 15px;
}

.post .mosaic-block img {
    max-width: 100%;
    height: auto;
}

/* Pagination */
.page-numbers {
    list-style: none;
    text-align: center;
    margin: 40px 0;
    padding: 0;
}

.page-numbers li {
    display: inline-block;
    margin: 0 5px;
}

.page-numbers a, .page-numbers span {
    padding: 8px 12px;
    text-decoration: none;
    border: 1px solid #ddd;
    display: block;
}

.page-numbers .current {
    background: #fc604a;
    color: #fff;
    border-color: #fc604a;
}

/* ==========================================================================
   Special Components
   ========================================================================== */

/* Social Sharing */
div.sharedaddy h3, #content div.sharedaddy h3, #main div.sharedaddy h3, 
#primary div.sharedaddy h3 {
    font-size: 14px;
    font-family: 'robotoregular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #414141;
    font-weight: bold;
    width: 18.625%;
}

div.sharedaddy .sd-content {
    width: 79.125%;
    float: right;
    margin: -2px 0 0 0;
}

div.sharedaddy div.sd-block {
    border-top: 1px solid #ddd;
    border-top: 1px solid rgba(0,0,0,.13);
    padding: 10px;
    margin: 0;
    margin-top: 50px;
    width: 100% !important;
    background: #f7f7f7;
}

div.sharedaddy h3.sd-title:before {
    content: "";
    display: block;
    width: 100%;
    min-width: 30px;
    border-top: 0px solid #ddd;
    margin-bottom: 0em;
}

.sd-content ul li:before {
    content: "";
}

/* ScalabBle Specific */
.message.promoscalabBle {
    padding: 1.2em 2em;
    border: none;
    font-size: 100%;
    line-height: 120%;
    text-align: left;
    background-color: #f5f5f5;
}

/* Cookie Bar */
#cg_cookie_bar {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    background: #fafafa;
    border-bottom: 1px solid #ccc;
    padding: 20px;
    color: #000;
    font-size: 12px;
    line-height: 140%;
    z-index: 65535;
}

#cg_cookie_bar .close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 22px;
    line-height: 100%;
    color: #ccc;
    cursor: pointer;
}

#cg_cookie_bar .close:hover {
    color: #000;
}

/* ==========================================================================
   Blog Post Styling
   ========================================================================== */

/* Blog Post Container */
main {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    background: #fff;
    min-height: 600px;
}

/* Article Container */
article {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

/* Blog Post Headers */
article h1 {
    font-size: 2.2em;
    color: #2c3e50;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 3px solid #fc604a;
    line-height: 1.3;
}

article h3 {
    font-size: 1.4em;
    color: #fc604a;
    margin: 30px 0 15px 0;
    font-weight: bold;
}

/* Blog Post Content */
article p {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 20px;
    color: #414141;
    text-align: justify;
}

article p:first-of-type {
    font-size: 19px;
    font-weight: 400;
}

/* Blog Post Links */
article a {
    color: #fc604a;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

article a:hover {
    border-bottom: 1px solid #fc604a;
    background-color: rgba(252, 96, 74, 0.1);
}

/* Blog Post Lists */
article ul, article ol {
    margin: 20px 0;
    padding-left: 30px;
}

article ul li, article ol li {
    margin-bottom: 10px;
    color: #414141;
    line-height: 1.6;
}

article ul li::marker {
    color: #fc604a;
}

article ol li::marker {
    color: #fc604a;
    font-weight: bold;
}

/* Blog Post Images */
article img {
    max-width: 100%;
    height: auto;
    margin: 25px 0;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Blog Post Strong/Bold */
article strong {
    color: #2c3e50;
    font-weight: bold;
}

/* Blog Post Emphasis */
article em {
    color: #fc604a;
    font-style: italic;
}

/* Blog Post Footer */
article footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 2px solid #f0f0f0;
    color: #888;
    font-size: 16px;
}

article footer a {
    color: #fc604a;
    font-weight: bold;
}

/* Site Footer */
body > footer {
    background: #2c3e50;
    color: #fff;
    text-align: center;
    padding: 20px;
    margin-top: 0;
}

body > footer p {
    margin: 0;
    font-size: 14px;
}

/* Header Styling for Blog Posts */
header {
    background: #fff;
    padding: 20px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 0;
}

header .logo {
    text-align: center;
}

header .logo img {
    max-height: 60px;
}

/* Navigation Styling */
nav ul {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
    text-align: center;
}

nav ul li {
    display: inline-block;
    margin: 0 15px;
    position: relative;
}

nav ul li a {
    color: #2c3e50;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    padding: 10px 15px;
    display: block;
    transition: all 0.3s ease;
}

nav ul li a:hover {
    color: #fc604a;
    background-color: #f8f8f8;
    border-radius: 5px;
}

/* Dropdown Menu */
nav ul li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    min-width: 200px;
    z-index: 1000;
}

nav ul li:hover ul {
    display: block;
}

nav ul li ul li {
    display: block;
    margin: 0;
}

nav ul li ul li a {
    padding: 12px 20px;
    border-bottom: 1px solid #f0f0f0;
}

nav ul li ul li:last-child a {
    border-bottom: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    main {
        padding: 20px 15px;
    }
    
    article h1 {
        font-size: 1.8em;
    }
    
    article h3 {
        font-size: 1.2em;
    }
    
    article p {
        font-size: 16px;
    }
    
    nav ul li {
        display: block;
        margin: 5px 0;
    }
    
    nav ul li ul {
        position: static;
        display: block;
        box-shadow: none;
        background: #f8f8f8;
        margin-top: 10px;
    }
}

/* Utility Classes */
.abh_pwb {
    display: none;
}