/* Inner-page static CSS extracted from page.php (M4 Slice A) */

/* === inner-page layout / ticket / shared (ex-page.php ~L742) === */

/* Same Bootstrap 3 equal-height hack as page-home.css carried, but no inner
   markup or CMS row uses these classes -- keeping the display:table-row here
   would only lie in wait for whoever adds one. Box-sizing kept; see the note in
   page-home.css for why the table display cannot survive Bootstrap 4. */
.container-full-height {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.row-full-height {
    height: 100%;
}

.inline-block-tab a {
    text-decoration: none;
}

.inline-block-section {
    display: none;
}

.active-section-portfolio {
    display: block;
}

.active-tab-portfolio {
    background: #6A6565;
    font-weight: bold;
}

.active-tab-portfolio a {
    color: #FFF;
}

.portfolio-section {
    max-width: 1365px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.portfolio-section img {
    max-width: 300px;
    width: 100%;
    display: inline-block;
    margin: 18px;
}

.section-one-forth h2 {
    min-height: 68px;
    height: 100%;
}

.section-one-forth p {
    min-height: 200px;
    height: 100%;
}

.dark-btn-blue {
    background: #003471;
    padding: 10px 40px 11px 40px;
    line-height: 35px;
    border: 1px solid #003471;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 2px 2px 10px #777;
    color: #fff;
}

.dark-btn-blue:hover {
    background: #003470;
    color: #38A1DA;
    box-shadow: 0px 0px 0px #777;
}

.acsb-trigger.acsb-bg-lead.acsb-ready.acsb-trigger-position-x-right.acsb-trigger-position-y-bottom.acsb-trigger-size-medium {
    bottom: 126px !important;
}

.fancy-btn-blue {
    background: #38A1DA;
    font-weight: bold;
    padding: 10px 40px 15px 40px;
    line-height: 35px;
    border: 1px solid #38A1DA;
    cursor: pointer;
    box-shadow: 2px 2px 10px #777;
    COLOR: #fff;
    text-decoration: none;
}

.fancy-btn-blue:hover {
    background: #FFF;
    color: #38A1DA;
    box-shadow: 0px 0px 0px #777;
}

.fancy-btn {
    text-decoration: none;
}

.fancy-circle {
    background: #38a1da;
    border-radius: 50%;
    max-width: 100px;
    height: 100px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 28px;
    display: none;
}

.circle-active {
    display: block;
}

.no-ext-h {
    margin-bottom: 0px;
}

.ext-height {
    margin-bottom: 63px;
}

.rowtp-what-we-do .col-xs-12 {
    min-height: 500px;
}

.rowmiddle-what-we-do .col-xs-12 {
    min-height: 490px;
}

.rowbottom-what-we-do .col-xs-12 {
    min-height: 425px;
}

.read-more-link {
    color: #FFF;
    text-decoration: underline;
    font-style: italic;
}

.rb p:nth-child(4) {
    margin-bottom: 50px;
}

.padding-bottom-50px {
    padding: 35px 35px 50px 130px !important;
}

@media(max-width: 767px){

    .padding-bottom-50px {
        padding: 90px 10px 20px 40px !important;
    }

}



/* === jssor skins (ex-page.php ~L911) === */








/* jssor slider loading skin spin css */
.jssorl-009-spin img {
    animation-name: jssorl-009-spin;
    animation-duration: 1.6s;

    animation-timing-function: linear;
}

@keyframes jssorl-009-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.jssorb032 {position:absolute;}
.jssorb032 .i {position:absolute;cursor:pointer;}
.jssorb032 .i .b {fill:#fff;fill-opacity:0.7;stroke:#D8D8D8;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.25;}
.jssorb032 .i:hover .b {fill:#000;fill-opacity:.6;stroke:#fff;stroke-opacity:.35;}
.jssorb032 .iav .b {fill:#000;fill-opacity:1;stroke:#fff;stroke-opacity:.35;}
.jssorb032 .i.idn {opacity:.3;}

.jssora051 {display:block;position:absolute;cursor:pointer;}
.jssora051 .a {fill:none;stroke:#fff;stroke-width:360;stroke-miterlimit:10;}
.jssora051:hover {opacity:.8;}
.jssora051.jssora051dn {opacity:.5;}
.jssora051.jssora051ds {opacity:.3;pointer-events:none;}



@media(max-width: 1200px){

    .tmp-img {
        display: none;
    }

    .to-hide-tablets {
        display: none;
    }

}

@media(max-width: 1450px){

    .tmp-img {
        margin-left: 95px !important;
    }

}

@media(max-width: 1550px){

    .plate {
        width: 275px !important;
    }

}

@media(max-width: 1360px){

    .width-100-tb {
        max-width: 100% !important;
    }

}

@media(max-width: 1300px){

    .plate {
        width: 240px !important;
    }

}

@media(min-width: 1200px) and (max-width: 1600px){

    .rowmiddle-what-we-do .col-xs-12 {
        min-height: 375px;
    }

}




/* === inner extras formerly after slick (ex-page.php ~L2520+) === */


iframe#tidio-chat-iframe {
    bottom: 85px !important;
}

h1 {margin: 20px 0; text-align: center; color: #3c4135;}
h2 {text-align: center; color: #3c4135;}
p {text-align: center;}
a {color: #38A1DA;}
pre {width: 382px; margin: 10px auto; padding: 10px; background: #e8ece3;}
.pointer {cursor: pointer;}
.plate {width: 300px; background: #FFF; color: #38A1DA; margin: 0 auto; text-align: center; font-size: 24px; padding: 40px 25px 0px 25px;}
.plate i:before { font-size: 40px; }
.listener {display: flex; width: 400px; height: 300px; margin: 0 auto; border: 1px solid #3c4135; transition: background 200ms;}
.listener:hover {background: #adba93;}
.listener.small {width: 200px; height: 200px; margin-bottom: 20px;}
.listener .plate {margin: auto;}

.to-disp-on-desk {
    display: block;
}

.to-disp-on-mb {
    display: none;
}

/* BreezeTact */

.bt-pl-outer-container {
    max-width: 100%;
    width: 100%;
    position: fixed;
    color: #FFF;
    z-index: 999999;
}

.bt-conv-front p, .bt-conv-front img {
    display: inline-block;
    vertical-align: top;
    margin-bottom: 0px;
}

.bt-conv-front {
    z-index: 99999999;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 15px;
}

.bt-conv-front img {
    margin-top: -5px;
}

.bt-ext-space-cb-cv {
    height: 0px;
}

.bt-icons-txt-cb {
    text-align: center;
}

.bt-pl-outer-container .bt-pl-container-left {
    float: left;
}

.bt-pl-inner-container {
    width: 33.33%;
    padding-top: 15px;
    padding-bottom: 6px;
}

.bt-pl-inner-container-left {
    float: left;
}

.bt-pl-inner-container-center {
    display: inline-block;
    margin: 0 auto;
}

.bt-pl-inner-container-right {
    float: right;
}

.bt-pl-outer-container .bt-pl-container-center {
    display: inline-block;
    margin: 0 auto;
}

.bt-pl-outer-container .bt-pl-container-right {
    float: right;
}

.bt-pl-outer-container .bt-pl-container-section {
    width: 33.33%;
    padding-top: 15px;
    padding-bottom: 15px;
    border-right: 1px solid #FFF;
}

@media (min-width:300px) and (max-width:500px){
    .forbes-slide-logo{
        max-width: 190px !important;
        margin:0px 0px 17px -77px !important;
    }
    .fb-slide-logo{
        min-width: 115px !important;
    }
}

@media(min-width: 767px){

    .bt-pl-outer-container, .bt-conv-front {
        display: none;
    }

}

@media(max-width: 767px){

    .bt-pl-outer-container, .bt-conv-front {
        display: block;
        font-size: 12px;
        bottom: 0px;
    }

    .to-disp-on-desk {
        display: none;
    }

    .to-disp-on-mb {
        display: block;
    }

    .product-tabs {
        display: none;
    }



    .container.footer-bottom-section {
        padding-bottom: 48px !important;
    }

}

@media(max-width: 767px){

    .bt-fa-2x {
        font-size: 1.7em;
    }

}

.bt-conv-front {
    border-top: 1px solid #fff !important;
    background: #4a9cc8 !important;
    color: #fff !important;
}

.bt-icons-txt-cb, .bt-pl-outer-container a {
    color: #fff !important;
}

.bt-pl-outer-container {
    background: #4a9cc8 !important;
}

.bt-pl-inner-container {
    border-left: 1px solid #fff !important;
}

.bt-pl-inner-container-left {
    width: 33%;
}

.bt-icons-txt-cb, .bt-pl-outer-container a {
    color: #FFFFFF !important;
    text-align: center;
}

/* BreezeTact */

.product-previous-next-section {
    height: auto;
}

/* Support Ticket */

.support-ticket-section {
    position: fixed;
    z-index: 9999;
    bottom: 0;
    left: 30px;
    padding: 20px 30px 1px 30px !important;
    background: #38a1da;
    border: 1px solid #38a1da;
    max-width: 375px;
    width: 100%;
    max-height: 55%;
    box-shadow: 1px 0px 3px #7c7c7d;
}

.support-ticket-section input {
    max-width: 250px !important;
    width: 100% !important;
    height: 30px !important;
    margin-bottom: 15px;
    background: #fff !important;
    border-radius: 4px;
    padding: 15px;
    color: #7c7c7d !important;
    font-size: 13px;
}

.support-ticket-section textarea {
    max-width: 250px !important;
    width: 100% !important;
    height: 130px !important;
    border-radius: 4px;
    padding: 15px;

    color: #7c7c7d;
    font-size: 13px;
}

.support-ticket-btn {
    background: #2768AC;
    color: #FFF;
    padding: 10px 40px 10px 40px;
    border: 0px solid;
    font-size: 13px;
    font-weight: 400;
    margin-top: 20px;
    cursor: pointer;
    text-decoration: none !important;
    font-family: Roboto-Regular;
}

.support-ticket-btn:hover {
    color: #FFF !important;
    text-decoration: none !important;
}

.support-ticket-section ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #7d7b7b;
    opacity: 1; /* Firefox */
    font-family: Roboto-Light;
    font-size: 14px;
}

.support-ticket-section :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #7d7b7b;
    font-family: Roboto-Light;
    font-size: 14px;
}

.support-ticket-section ::-ms-input-placeholder { /* Microsoft Edge */
    color: #7d7b7b;
    font-family: Roboto-Light;
    font-size: 14px;
}

.fa-ticket:before {
    font-size: 26px;
    color: #fff;
    cursor: pointer;
    position: relative;
    top: -3px;
}

/* Support Ticket */

#contact-us-page-form input[type="text"] {
    max-width: 100% !important;
}

@media(max-width: 767px){

    body.page-chat-with-us #tidio-chat {
        display: block !important;
    }

    /* The referral page's DB content emits `.no-mheight-mb { max-height: 100% !important; }`
       at this same breakpoint, later in the document; the extra .form-full-container
       specificity keeps this cap winning now that source order no longer does. */
    .form-full-container.no-mheight-mb {
        max-height: 500px !important;
    }

}

/* ── Date circle (#30) ──────────────────────────────────────────────────
   One rule set covers two things:

     .date-circle          App\Cms\DateCircle output, used by the listings
     the legacy selectors  391 of the 393 circles in the corpus are inline-styled
                           <p>s baked into bcm_pages.page_content on 350 pages,
                           plus 3 pages using .blog-date, which the ~200-line
                           style island in views/page/not-found.php also targets

   Inline styles and that later-in-document island both beat a stylesheet, so the
   properties they set need !important here. That is what makes the fix reach the
   350 existing pages without a content migration; #14 is where the markup itself
   gets normalised, and these legacy selectors and their !important can go with it.

   What was wrong, measured before the change:
     - The disc is a 97x97 background image on a box sized by padding, so the box
       was 92.5x110 -- not square, and 4.5px narrower than the disc, which clipped
       the circle on the right. Text sat 5px below the disc centre.
     - The listing cards add `background-size: 88%`, making the disc a share of a
       box whose width comes from the container: it swung from ~90px to ~450px
       across viewports while the text stayed 43px, which is the separation that
       visibly broke.
     - 2 pages point at images/2022/04/Circle-for-Date.png, which 404s both on dev
       and locally, so they had no disc at all.

   The image is kept rather than drawn in CSS. It looks like a plain white disc
   but is not: a pixel profile shows opaque navy rings, rgb(34,52,88), around the
   white centre, so a flat background-color would have quietly thrown the design
   away. Instead the box is forced square and the image told to cover it exactly,
   which keeps the artwork and makes the disc track the box at any size. The URL
   is stated root-relative here, which also repairs those 2 pages: they asked for
   a copy that does not exist. */

.date-circle,
p.blog-date,
p[style*="Circle-for-Date"],
p[style*="circle-for-date"] {
    /* The single knob: every part below is relative to it. */
    --date-circle-size: 5.75rem;

    box-sizing: border-box !important;
    display: grid !important;
    /* Containing block for the .sr-only label, so it cannot anchor itself to a
       distant ancestor. */
    position: relative;
    place-content: center !important;
    inline-size: var(--date-circle-size) !important;
    block-size: var(--date-circle-size) !important;
    padding: 0 !important;
    /* center / 100% 100% makes the artwork exactly cover a box that is square by
       the two size declarations above, so it is always a circle and always
       concentric with its text. No background-color: the source has transparent
       corners, and filling them would turn the disc into a square. */
    background: transparent url("/images/2018/07/Circle-for-Date.png") center / 100% 100% no-repeat !important;
    color: #7c7c7d;
    font-family: Roboto-Regular, Roboto, sans-serif;
    font-size: calc(var(--date-circle-size) / 4.6);
    font-weight: 700;
    line-height: 1.05;
    text-align: center !important;
}

/* The legacy markup nudges its spans with `position: relative; top: 4px` and
   `top: -7px`, which is what made the parts drift apart as the box resized.
   Grid centring replaces all of it, so the offsets have to go. */
/* :not(.sr-only) so the Bootstrap utility keeps its `position: absolute` and
   stays out of the grid -- the blanket `position: static` below was demoting it
   to a 1x1 in-flow cell, and `clip` only applies to positioned elements. */
.date-circle > *:not(.sr-only),
p.blog-date span,
p[style*="Circle-for-Date"] span,
p[style*="circle-for-date"] span {
    position: static !important;
    top: auto !important;
    left: auto !important;
    display: block;
}

.date-circle sup,
p.blog-date sup,
p[style*="Circle-for-Date"] sup,
p[style*="circle-for-date"] sup {
    font-size: 0.62em;
    /* Its own line box, so a superscript cannot stretch the row it sits in. */
    line-height: 0;
    vertical-align: super;
}

.date-circle-year,
p.blog-date span span,
p[style*="Circle-for-Date"] span span,
p[style*="circle-for-date"] span span {
    color: #2869ab !important;
    font-size: 0.66em !important;
    font-weight: 200 !important;
}

/* Circle + title as a row (#30).

   Both listing card shapes previously floated the circle. A float is out of
   flow, so the card never contained it -- the inline-styled shape overflowed its
   own div at the bottom -- and the title could not be centred against it, which
   is what the `padding-top: 15px` on that title was compensating for. The
   .blog-details shape had the opposite problem once the circle stopped being a
   floated `.blog-date`: the component is a block, so the title dropped to the
   next line.

   One flex row fixes both, and needs no `clear` element to contain anything.
   These are fresh class names precisely so they do not have to out-specify the
   inline styles or the style island in views/page/not-found.php. */

.post-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Each child is a link wrapping one block. */
.post-heading > a:first-child {
    flex: none;
}

.post-heading > a:last-child {
    flex: 1;
    min-width: 0;
}

/* Beats `.blog-title` on specificity, so no !important and no dependence on
   which stylesheet comes last. */
.post-heading p {
    margin-bottom: 0;
    padding-top: 0;
}

/* Smaller where the cards themselves narrow, driven by the one property so the
   parts keep their proportions instead of drifting. */
@media(max-width: 767px){

    .date-circle,
    p.blog-date,
    p[style*="Circle-for-Date"],
    p[style*="circle-for-date"] {
        --date-circle-size: 4.75rem;
    }

}