/*
Theme Name: Push Button Child Theme
Theme URI: https://thinkpb.com
Version: 1.0
Description: Push Button Web Design theme framework.
Author: Push Button Web Design
Author URI: https://thinkpb.com
template: bb-theme
*/

/** TABLE OF CONTENTS
---------------------------------------------------------------------------/
1.0 - Global Styles
  1.1 - General
  1.2 - Selection Highlight
  1.3 - Buttons
  1.4 - Typography
  1.5 - Custom Font Face
  1.6 - Hero Styles
  1.7 - Forms
2.0 - Layout + Themer
  2.1 - Header
  2.2 - Navigation
  2.3 - Footer
3.0 - Page Specific CSS
  3.1 - Homepage
4.0 - Admin Branding
  4.1 - Admin Bar
  4.2 - Builder Styles
5.0 - Tablet Only Styles
6.0 - Tablet + Mobile Styles
7.0 - Mobile Only Styles
8.0 - Accessibility Styles
/// END TABLE OF CONTENTS
--------------------------------------------------------------------------*/

/** 1.0 - Global Settings
--------------------------------------------------------------------------*/

/* =========================
   1.1 - General
   ========================= */

:root {
    --clr-primary: #1a5ca7;
    --clr-primary-rgb: 18 166 55;

    --clr-secondary: #17507e;
    --clr-secondary-rgb: 18 166 55;

    --tr: 0.2s ease-in-out;

    --bs: 0 5px 10px rgb(0 0 0 / 0.25);
    --bs-small: 0 3px 8px rgb(0 0 0 / 0.25);
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Utility Classes */
.primary-color-text {
    color: var(--primary-color);
}

.wrapcenter {
    text-align: center !important;
}

.centeralign {
    margin: 0 auto;
    display: block;
}

.inlineblock {
    display: inline-block;
}

.flow,
.float {
    display: inline-block;
    position: relative;
}

/* Flexbox */

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.align-bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0;
    flex: 1 1 0;
}

.align-flex-start,
.align-flex-start .fl-row-content-wrap,
.align-flex-start.fl-row-custom-height.fl-row-align-center .fl-row-content-wrap {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-align-items: flex-start;
}

.justify-flex-start,
.justify-flex-start .fl-row-content-wrap,
.justify-flex-start.fl-row-custom-height.fl-row-align-center .fl-row-content-wrap {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
}

.align-flex-center,
.align-flex-center .fl-row-content-wrap,
.align-flex-center.fl-row-custom-height.fl-row-align-center .fl-row-content-wrap {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-items: center;
}

.justify-flex-center,
.justify-flex-center .fl-row-content-wrap,
.justify-flex-center.fl-row-custom-height.fl-row-align-center .fl-row-content-wrap {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-justify-content: center;
}

.align-flex-end,
.align-flex-end .fl-row-content-wrap,
.align-flex-end.fl-row-custom-height.fl-row-align-center .fl-row-content-wrap {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-align-items: flex-end;
}

.justify-flex-end,
.justify-flex-end .fl-row-content-wrap,
.justify-flex-end.fl-row-custom-height.fl-row-align-center .fl-row-content-wrap {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
}

/* Branch Locations */

/* Topbar */
.topbar-branches {
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topbar-branches li {
    padding: 0 10px;
    font-size: 12px;
    line-height: 1;
    border-right: 1px solid #ffffff;
}

.topbar-branches li:last-of-type {
    border: 0;
}

/* Vertical */
.branch-locations {
    list-style: none;
    padding-inline-start: 0;
    float: left;
}

.branch-locations li {
    border-bottom: 1px solid #ededed;
    padding-top: 10px;
    padding-bottom: 10px;
}

.branch-locations li:first-of-type {
    padding-top: 0;
}

.branch-locations li:last-of-type {
    border: 0;
    padding-bottom: 0;
}

.branch-location-item {
    display: flex;
    align-items: start;
}

.branch-locations h3 {
    color: var(--primary-color) !important;
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    margin: 0;
}

.branch-location-icon {
    width: 30px;
    color: var(--primary-color) !important;
}

/* Grid Locations */
.branch-locations-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.branch-location-map iframe {
    border: 0;
    width: 100%;
    height: 200px;
    pointer-events: none;
}

.branch-location-details {
    text-align: center;
    padding: 20px 20px 30px;
}

.branch-location-details h3 {
    color: var(--primary-color);
    font-size: 18px;
    text-transform: none;
    margin: 0 0 10px;
}

.branch-location-container {
    background: #ffffff;
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 20%);
}

/* Social Media Icons */
.social-media-icons {
    display: flex;
    justify-content: flex-start;
}

.social-media-icons a {
    font-size: 30px;
    text-decoration: none;
}

.social-media-icons .social-media-icon {
    margin-right: 15px;
}

.social-media-icons .social-media-icon i {
    color: var(--social-media-icon-color) !important;
}

.social-media-icons .social-media-icon i:hover {
    color: var(--social-media-icon-hover-color) !important;
}

.social-media-icons .social-media-icon:last-of-type {
    margin-right: 0;
}

/* Testimonial Carousel Module */
#testimonial .testimonial-wrapper {
    position: relative;
    background: #ffffff;
    padding: 60px 45px 40px;
    text-align: center;
}

#testimonial .testimonial-name {
    font-weight: 700;
}

#testimonial .testimonial-icon {
    position: relative;
    z-index: 2;
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 40px;
    background: var(--primary-color);
    margin: 0 auto -40px;
    color: #ffffff;
    border-radius: 100px;
    text-align: center;
}

/* Services */
.services-post .pp-content-post {
    display: flex;
    align-items: center;
}

/* Home Hero List */

.hero-feature-list {
    list-style: none;
    padding-inline-start: 0;
}

.feature-list-item {
    display: flex;
    align-items: center;
    padding: 5px 0;
}

.feature-list-item img {
    margin-right: 20px;
}

.feature-list-item h3 {
    font-size: 28px;
    line-height: 1.3;
    margin: 0;
    text-transform: none;
}

/* Lice Clinic Table */
.rwd-table {
    margin: auto;
    min-width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}

.rwd-table th {
    background: var(--primary-color);
    font-family: var(--ff-serif);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 0 0 1px var(--primary-color);
}


.rwd-table tbody tr {
    background-color: #dfdfdf;
}

.rwd-table tr td:first-child {
    text-transform: uppercase;
    font-size: 12px;
}

.rwd-table tbody tr:nth-child(odd) {
    background-color: #f5f5f5;
}

.rwd-table td {
    display: block;
}

.rwd-table td .fa-check-circle {
    color: var(--primary-color);
    font-size: 24px;
}

.rwd-table td:first-child {
    margin-top: .5em;
}

.rwd-table td:last-child {
    margin-bottom: .5em;
}

.rwd-table td:before {
    content: attr(data-th);
    font-weight: 500;
    width: 50%;
    display: inline-block;
    color: #000;
}

.rwd-table th,
.rwd-table td {
    text-align: center;
}

.rwd-table {
    overflow: hidden;
}


.rwd-table th,
.rwd-table td {
    padding: 15px 10px;
}

@media screen and (max-width: 480px) {
    .rwd-table tr:nth-child(2) {
        border-top: none;
    }

    .rwd-table thead {
        display: none;
    }

    .rwd-table td {
        text-align: left;
    }
}

@media screen and (min-width: 481px) {
   
    .rwd-table td:before {
        display: none;
    }

    .rwd-table th,
    .rwd-table td {
        display: table-cell;
        padding: 15px 10px;
    }

    .rwd-table th:first-child,
    .rwd-table td:first-child {
        padding-left: 0;
    }

    .rwd-table th:last-child,
    .rwd-table td:last-child {
        padding-right: 0;
    }

    .rwd-table th,
    .rwd-table td {
        padding: 15px 10px !important;
    }

    .rwd-table .features {
        width: 30%;
        background: none;
        box-shadow: none;
    }

    .rwd-table .clinic-name {
        width: 30%;
        border-top-left-radius: 10px;
    }

    .rwd-table .nit-pickers {
        background-color: var(--secondary-color);
        width: 20%;
    }

    .rwd-table .store-products {
        width: 20%;
        border-top-right-radius: 10px;
    }

    .rwd-table tbody tr:first-child {
        border-top: 1px solid var(--primary-color);
    }

    .rwd-table tbody tr:last-child {
        border-bottom: 1px solid var(--primary-color);
    }

    .rwd-table tbody tr td {
        border-left: 1px solid var(--primary-color);
        border-right: 1px solid var(--primary-color);
    }
}
/* Sticky Column for Desktop */
@media (min-width: 993px) {
    .sticky-col {
        position: -webkit-sticky;
        /* Safari */
        position: sticky;
        top: 125px;
    }
}

/* Fixes margins for when modules pull content from another saved module. */
.fl-builder-module-template {
    margin: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* Fixes pixel shifting for row shape layers */
.fl-builder-shape-layer>svg {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -ms-perspective: 1000;
    -webkit-perspective: 1000;
    perspective: 1000;
}

/* =========================
   1.2 - Selection Highlight
   ========================= */

::-moz-selection {
    background: #9c9c9c;
    color: white;
    -webkit-text-fill-color: white;
    text-shadow: none;
}

::selection {
    background: #9c9c9c;
    color: white;
    -webkit-text-fill-color: white;
    text-shadow: none;
}

/* =========================
   1.3 - Buttons
   ========================= */

button:active,
input[type="button"]:active,
input[type="submit"]:active,
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
.fl-builder-content .fl-button:active {
    top: inherit;
}

/* =========================
   1.4 - Typography
   ========================= */

.ff-sans-serif,
.ff-sans-serif span {
    font-family: var(--ff-ss);
}

.ff-serif,
.ff-serif span {
    font-family: var(--ff-serif);
}

.two-col .fl-rich-text p {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
}

.two-col .fl-rich-text ul {
    position: relative;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
}

.two-col .fl-rich-text li {
    position: relative;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    line-height: 1.4;
    margin-bottom: 15px;
}

/* =========================
   1.5 - Custom Font Face
   ========================= */



/* =========================
   1.6 - Hero Styles
   ========================= */



/* =========================
   1.7 - Forms
   ========================= */




/** END Global Settings
--------------------------------------------------------------------------*/

/** 2.0 - Layout + Themer
--------------------------------------------------------------------------*/

/* =========================
   2.1 - Header
   ========================= */

header {
    position: relative;
}

.fl-page-header-wrap {
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.15);
    z-index: 9999;
}

/* =========================
   2.2 - Navigation
   ========================= */

.menu-item a {
    -webkit-transition: var(--tr);
    transition: var(--tr);
}

/* =========================
   2.3 - Footer
   ========================= */




/** END Layout
--------------------------------------------------------------------------*/




/** 3.0 - Page Specific CSS
--------------------------------------------------------------------------*/

/* =========================
   3.1 - Homepage
   ========================= */




/** END Page Specific CSS
--------------------------------------------------------------------------*/

/** 4.0 - Admin Branding
--------------------------------------------------------------------------*/

/* =========================
   4.1 - Admin Bar
   ========================= */

#wpadminbar {
    background-color: var(--clr-primary);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

#wpadminbar .menupop .ab-sub-wrapper,
#wpadminbar .shortlink-input {
    background-color: var(--clr-secondary);
}

#wpadminbar .ab-top-menu>li.hover>.ab-item,
#wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus,
#wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item,
#wpadminbar:not(.mobile) .ab-top-menu>li>.ab-item:focus {
    background-color: var(--clr-secondary);
}

#wp-admin-bar-wp-logo,
#wp-admin-bar-rank-math,
#wpadminbar #wp-admin-bar-site-name>.ab-item:before {
    display: none;
}

li#wp-admin-bar-wlcms-admin-logo img {
    max-width: 30px;
}

/* =========================
   4.2 - Builder Styles
   ========================= */

.fl-builder-bar-title-icon,
#fl-builder-toggle-notifications {
    display: none;
}

.fl-builder-bar-title-area {
    padding: 4px 4px 4px 15px;
}

/** END Admin Branding
--------------------------------------------------------------------------*/

/** 5.0 - Tablet Only Styles
--------------------------------------------------------------------------*/

@media (min-width: 768px) and (max-width: 992px) {
    .tabletcenter {
        text-align: center !important;
        float: none !important;
    }
}

/** 6.0 - Tablet + Mobile Styles
--------------------------------------------------------------------------*/

@media (max-width: 992px) {

    /* For reverse tablet, must add tablet_reversed class to ROW */
    .tablet_reversed .fl-col-group.fl-col-group-responsive-reversed {
        display: -moz-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        -ms-box-orient: horizontal;
    }

    .tablet_reversed .fl-col-group-responsive-reversed .fl-col:nth-of-type(1) {
        -webkit-box-ordinal-group: 13;
        -ms-flex-order: 12;
        order: 12;
    }

    /* Typography */
    .two-col .fl-rich-text {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}

/** 7.0 - Mobile Only Styles
--------------------------------------------------------------------------*/

@media (max-width: 768px) {
    .mobilecenter {
        text-align: center !important;
        float: none !important;
    }
    .branch-locations-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .services-post .pp-content-post {
        flex-direction: column;
    }
    .services-post .pp-content-post .pp-post-image .fl-photo-content {
        width: 250px;
        margin: 0 auto;
    }
}

/** 8.0 - Accessibility Styles
--------------------------------------------------------------------------*/

/* Reduce Motion */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        -webkit-animation-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        -webkit-animation-delay: 0.01ms !important;
        animation-delay: 0.01ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        -webkit-transition-delay: 0.01ms !important;
        transition-delay: 0.01ms !important;
        -webkit-transition-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}