/*
  Simple FlexBox Grid created by Mary Adkins GraphixStation Updated Feb 2025.
  Copyright GraphixStation 
  All Rights Reserved
  Contact at https://www.graphixstation.com
*/
/* 
  ======================================
  GS FlexBox Grid 2023 Updated
  ======================================
*/
.grid-container {margin: 0 auto; max-width: 1200px; overflow: hidden;position: relative;transition: 0.3s linear; width: 100%;}
.grid-padding {padding: 1.5% 0 0 1.5%;}
.grid-row {display:flex; flex-flow: row wrap; justify-content: flex-start; transition:0.3s linear;}
.grid-row-align {align-items: center; display:flex; flex-flow: row wrap; justify-content: center; transition:0.3s linear;}
.align-all {align-content: flex-start;align-items: flex-start;align-self: stretch;display: flex;flex: 1 0 0;flex-direction: column;flex-wrap: nowrap;gap: 20px;height: auto;justify-content: center;padding: 0; position: relative;width: 1px;}
.align-img {display: flex;flex-direction: column;justify-content: center;}

/* new update to grid style to remove asterisk */
.gr-col {margin: 0 auto; padding: 0 1.5% 1.5% 0; position: relative; transition:0.3s linear;}
.col-1ew {flex: 1; margin: 0 auto; padding: 0 1.5% 1.5% 0; position: relative; transition:0.3s linear;} /* Equal widths */
.col-1-1 {flex-basis: 100%; width: 100%;}
.col-1-2, .col-6-12 {flex-basis: 50%; width: 50%;}
.col-1-3, .col-4-12 {flex: 1; flex-basis: 33.33%; width: 33.33%;}
.col-1-4, .col-3-12 {flex-basis: 25%; width: 25%;}
.col-1-5 {flex-basis: 20%; width: 20%;}
.col-5-12 {flex-basis: 41.66%; width: 41.66%;}
.col-7-12 {flex-basis: 58.33%; width: 58.33%;}
.col-8-12 {flex-basis: 66.66%; width: 66.66%;}
.col-9-12 {flex-basis: 75%; width: 75%;}
.grid-content {padding: 20px; position: relative;}
.grid-content-flex {display: flex; padding: 20px; position: relative;}

@media only screen and (max-width: 880px) {
.col-1-4 {flex-basis: 50%; width: 50%;} 
.col-3-12 {flex: 1; flex-basis: 30%; width: 30%;}
.col-4-12 {flex-basis: 40%; width: 40%;}
.col-8-12 {flex-basis: 60%; width: 60%;}
.col-9-12 {flex-basis: 70%; width: 70%;}
}
/* Styles for screen 880px to 768px added important for 4 column only */
@media screen and (max-width: 880px) and (min-width: 769px) {.col-1-4 {flex-basis: 25% !important; width: 25%;}}
@media (max-width: 810px) {
.revers_col {flex-direction: row-reverse;}
.revers_col-right {order: 1;margin: 0;padding: 0;}
.revers_col-left {order: 2;margin: 0;padding: 0;}
}
@media only screen and (max-width: 767px) {
.grid-padding {padding: 0;}
.gr-col {flex-basis: 100%; padding: 2.5% 3%;}
.col-1ew {flex-basis: 100%; padding: 2.5% 3%; width: 100%;}
.col-1-2, .col-1-3, .col-1-4,.col-3-12,.col-4-12, col-1-5, .col-5-12, .col-6-12, .col-7-12,.col-8-12,.col-9-12 {flex-basis: 100%; padding: 2.5% 3%;} 
}
@media only screen and (max-width: 428px) {
.grid-content-flex {padding: 5px 20px;}
.col-1-4 {flex-basis: 100%; padding: 0 3%;} 
}
/* 
  ======================================================================================
  GS FlexBox Grid 2021 with equal heights using Flex Direction Column for PUSH feature
  ======================================================================================
*/
/* to make each column equal width and height */
.rowF {display: flex;}
.rowF2 {display: flex; border-bottom: 1px solid #fff; padding: 20px 0;}
.colF {flex: 1; flex-direction: column; display: flex; padding: .5em; margin: 0 1.5% 1.5% 0;}
.colF:hover {-webkit-box-shadow: 0 10px 20px 2px rgba(0,0,0,.3); box-shadow:0 10px 20px 2px rgba(0,0,0,.3); transition: all ease-in-out 300ms;}
.push {align-self: center; background-color: #1f1f1f; border-radius: 4px; color: #fff; font-weight: 400; letter-spacing: 0.04em; margin-top: auto; margin-bottom: 10px; padding: 6px 12px 4px; text-align: center; text-transform: uppercase;} /* background-color: #d6272d; red for testing */
.push:hover {background-color: #FFD141; -webkit-box-shadow: 0 10px 20px 2px rgba(0,0,0,.3); box-shadow: 0 10px 20px 2px rgba(0,0,0,.3); transition: all ease-in-out 500ms;}
.push a {color: #fff;}
.push a:hover {color: #1f1f1f;}
@media only screen and (max-width: 810px) {.rowF {flex-wrap: wrap;} .colF {flex: 1 1 300px;}}
@media only screen and (max-width: 654px) {.rowF {display: block;} .colF {flex-basis: 100%;}}
@media only screen and (max-width: 480px) {.colF {margin: 6%;}}
/* end equal width and height */

/* ROOT STYLES FOR TESTIMONIAL ROTATOR ADDED OCT 2 2026 */
:root {
      --rcard-width: 320px;
      --rcard-gap: 20px;
      --animation-speed: 25s;
    }
    
/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
/* Addresses margins handled incorrectly in IE6/7. */
	*, *:after, *:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	border: 0; font: inherit; font-size: 100%; margin: 0; padding: 0; vertical-align: baseline;}
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
	section {position: relative;}
	body {line-height: 1;} ol, ul {list-style: none;} table {border-collapse: collapse; border-spacing: 0;} 
	figure {position: relative;} figure img {width: 100%;}

	* {margin: 0; padding: 0;}
	* {box-sizing: border-box;}
	
/* #Basic Styles================================================== */
	body {background-color: #fff; color: #232323; font-family: "Poppins", sans-serif; font-size: 16px; font-weight: 300; line-height: 21px; margin: 0; min-height: 100vh; position: relative;} /*  overflow-x: hidden; overflow-y: scroll; perspective: 4px; from old parallax scroll header no longer being used  */  

/* #Typography================================================== */
.montserrat {font-family: "Montserrat", sans-serif;font-style: normal;}
.gunplay {font-family: "gunplay", sans-serif; font-weight: 400;font-style: normal;}
.poppins-light {font-family: "Poppins", sans-serif;font-weight: 300;font-style: normal;}
.poppins-regular {font-family: "Poppins", sans-serif;font-weight: 400;font-style: normal;}
.poppins-medium {font-family: "Poppins", sans-serif;font-weight: 500;font-style: normal;}

	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {font-weight: inherit;}
	h1 {font-family: "Montserrat", sans-serif; font-size: 52px; font-weight: 600; line-height: 64px; margin-bottom: 10px; padding: 0;}
	h2 {color: #1f1f1f; font-family: "Montserrat", sans-serif; font-size: 46px; font-weight: 500; line-height: 56px; margin-bottom: 10px;}
	h3 {color: #1f1f1f; font-family: "Montserrat", sans-serif; font-size: 26px; font-weight: 400; line-height: 32px; margin-bottom: 12px;}
	h4 {font-size: 22px; font-weight: 400; line-height: 28px; margin-bottom: 8px;}
	h5 {font-size: 18px; line-height: 24px; margin-bottom: 8px; padding: 0;}
	p {color: #232323; font-family:"Poppins", sans-serif; font-size: 16px; font-weight: 300; line-height: 24px; margin: 0 0 18px 0;} 
	a, a:hover {text-decoration: none;}
	a {color: #333; transition: color 0.3s ease 0s;}
	em {font-style: italic; line-height: 14px;}
	.small {font-size: 80%;}
	strong {font-weight: 700;}
	blockquote:before {display: block; content: "\201C"; font-size: 80px; position: relative; left: -40px; color: #000; padding-left: 20px; top: 10px;}
	blockquote, blockquote p {color: #1f1f1f; font-size: 15px; font-style: italic; line-height: 22px; margin: 0 0 16px 0;}
	blockquote {margin: 0 0 35px;}
	blockquote cite {color: #1f1f1f; display: block; font-weight: 400; font-style: normal; margin-top: 5px;}
	blockquote cite:before {content: "\2014 \0020";}
	blockquote cite a, blockquote cite a:visited, blockquote cite a:visited {color: #555;}
	hr {border: dotted #929292; border-width: 1px 0 0; clear: both; height: 0; margin: 50px 0;}
	.hr-sm {border: solid #e4e4e4; border-width: 1px 0 0; clear: both; height: 0; margin: 30px 0;}
	.hr-ssm {border: solid #e4e4e4; border-width: 1px 0 0; clear: both; height: 0; margin: 20px 0;}
	.hr-y {border: solid #FFD141; border-width: 4px 0 0; clear: both; height: 0; margin: 40px 0 100px;}
	.break {display: inline-block; height: 0; width: 100%;}
	.no-wrap {text-wrap: nowrap;}
.visually-hidden { 
    border: 0; height: 1px; margin: 0; padding: 0;overflow: hidden; position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
	width: 1px;}
	/* #CLearFix */
.clearfix:before,.clearfix:after {content: " "; display: table;}.clearfix:after {clear: both;}.clear {clear: both;}.clearfix:after {clear: both; content: " "; display: block; font-size: 0; height: 0; visibility: hidden;}

/* ----------------------------- ADDITIONAL TEXT AND TITLE PADDING STYLES ---------------------------*/
.newspaper {column-gap: 30px; column-width: 400px;}
.newspaper3 {column-gap: 30px; column-width: 300px;}
.newspaper3 p {font-size: 15px; line-height: 22px;}
.newspaper3 a {background-color: #FFD141; color: #000;}
.newspaper3 a:hover {background-color: #fff;}

.heavy {font-weight: 700;}
.medium {font-weight: 500;}
.center-text {text-align: center !important;}
.stay-left {text-align: left;}
.section-header {margin: 80px 0 40px 0;}
.section-title {margin-bottom: 1.75rem; text-align: center;}
.section-title-heavy {margin-bottom: 5rem; text-align: center;}
.inner-section-title {margin-bottom: 3rem; text-align: center;}
.para-title-padding {margin-bottom: 2rem;}
.para-title {font-size: 34px; line-height: 36px; padding: 0;}
.expertise-title {font-family: "Montserrat", sans-serif; font-size: 24px; font-weight: 500; letter-spacing: -.05rem; line-height:30px; padding: 18px 0;}
.tagline {font-family: "Montserrat", sans-serif; font-size: 20px; font-weight: 300; line-height: 26px; margin-bottom: 0;}
.feature-text {font-size: 18px; line-height: 26px; padding-bottom: 16px;}
.lined-title {border-bottom: 1px solid #FFD141; display: block; font-size: 20px; margin-bottom: 2px; margin-top: 12px; padding-bottom: 2px; position: relative;}
.lined-title-msp {border-bottom: 2px solid #FFD141; display: block; font-size: 18px; font-weight: bold; padding-bottom: 8px; position: relative;}
.brand-titles {margin-bottom: 2px;}
.special-feature-text {background-color: #ffd141; margin-bottom: 10px; padding: 16px;}
.special-feature-text p {margin: 0;}
.featured-box {align-items: center; border: 1px solid #ccc; display: flex; justify-content: center; margin-bottom: 10px; padding: 20px; position: relative;}
.featured-box p {margin: 0;}
.feature-box-dark {border-radius: 10px; height: 100%; margin: 0 auto; padding: 25px 0 10px; position: relative;}
.feature-box-dark:hover {-webkit-box-shadow: 0 0 20px 0 rgba(255, 209, 65, 1); box-shadow: 0 0 20px 0 rgba(255, 209, 65, 1);}
.bk-dk-grey {background-color: #232323;}
.bk-dk-grey2 {background-color: #343434;}

/* ----------------------------- PAGE PADDING ---------------------------*/
.section-padding {padding: 8rem 0 8rem;}
.section-padding-sm {padding: 5rem 0 3rem;}
.semi-section {padding: 110px 0 20px; position: relative;}
.top-padding-only {margin-top: 30px;}
.top-padding-heavy {margin-top: 100px;}
.angle-top-padding {padding-top: 100px;}
.inner-section-padding {padding: 6.4rem 0 8.4rem;}

/* ---------------------- COLORS -------------------------*/
.coal-black {color: #0C0908;}
.yellow {color: #FFD141;}
.ltyellow {color: #FFF1C6;}
.white {color: #fff;}
.black {color: #1f1f1f;}
.grey {color: #4d4d4d;}
.datto-blue {color: #199ED9;}
.disaster-red {color: #bf2e1a;}
.light-grey {color: #e4e4e4;}
.diamond-blue {color:#0066FF;}
.diamond-green {color:#006100;}
.diamond-red {color:#CC0033;}
.diamond-purp {color:#333399;}
.red {color: #CC3333;} /* for temp text */
.highlighted-yellow-text {background-color: #FFD141; color: #1f1f1f; padding: 1px 8px; text-wrap: nowrap;}
.highlighted-white-text {background-color: #000; color: #fff; padding: 1px 8px; text-wrap: nowrap;}
.highlighted-redbox-text {background-color: #CC3333; color: #fff; padding: 1px 8px; text-wrap: nowrap;}
.highlighted-greybox-text {background-color: #0C0908; color: #fff; padding: 1px 8px; text-wrap: nowrap;}

.bkgnd-coal {background-color: #0C0908;}
.bkgnd-yellow {background-color: #FFD141;}
.bkgnd-ltyellow {background-color: #FFF1C6;}
.bkgnd-white {background-color: #fff;}
.bkgnd-blk {background-color: #f1f1f1;}
.bkgnd-red {background-color: red !important;}
.bkgnd-ltgrey {background-color: #e4e4e4;}
.bkgnd-lightest-grey {background-color: #fafafa;}
.grey-bkgnd {background-color: #e4e4e4;}

/* ---------------------- buttons ------------------------- */
.quickbtn a {background-color: #1f1f1f; border-radius: 50px; color: #fff; display: inline-block; font-size: 20px; font-weight: 400; margin: 0 auto; margin: 18px 0; padding: 12px 26px 12px; position: relative; text-align: center;}
.quickbtn a:hover {background-color: #fff; color: #1f1f1f; -webkit-box-shadow: 0 6px 10px 2px rgba(0,0,0,.3); box-shadow: 0 6px 10px 2px rgba(0,0,0,.3); transition: all ease-in-out 300ms;}

.quickcontact-btn a {background-color: #1f1f1f; border-radius: 50px; color: #fff; display: inline-block; font-size: 28px; font-weight: 400; margin: 0 auto; margin: 18px 0; padding: 12px 26px 12px; position: relative; text-align: center;}
.quickcontact-btn a:hover {background-color: #FFF1C6; color: #1f1f1f;}

.white-contact-btn a {background-color:#fff; border-radius: 50px; color: #1f1f1f; cursor: pointer; display: inline-block; font-size: 18px; font-weight: 400; margin: 0 auto; margin-bottom: 10px; padding: 12px 26px 12px; position: relative; text-align: center;}
.white-contact-btn a:hover {background-color: #FFD141; color: #1f1f1f;}

.yellow-contact-btn a {background-color:#FFD141; border-radius: 50px; color: #1f1f1f; cursor: pointer; display: inline-block; font-size: 18px; font-weight: 400; margin: 0 auto; margin-bottom: 10px; padding: 12px 26px 12px; position: relative; text-align: center;}
.yellow-contact-btn a:hover {background-color: #1f1f1f; color: #fff; -webkit-box-shadow: 0 6px 10px 2px rgba(0,0,0,.3); box-shadow: 0 6px 10px 2px rgba(0,0,0,.3); transition: all ease-in-out 300ms;}

/* ---------------------- IMAGES STYLES -------------------------*/
a img {border: none;}
img {display: block; margin: 0 auto;}
.side-imgs {display: block; margin: 0 auto; max-width: 100%; position: relative;}
.rounded {border-radius: 6px; outline: 8px solid #fff;}
.jump-up {bottom: 0; margin: 0 auto; max-width: 100%; height: auto; left: 0; right: 0; padding: 0; position: absolute;}
.pdftmbs {height: auto; float: right; max-width: 100%; margin: 10px 0 20px 0;}
.no-drag {pointer-events: none;} /* THIS PREVENTS IMAGES FROM BEING DRAGGED OFF THE WEB PAGE */
.temp {display: block; height: auto; margin: 0 auto; max-width: 100%; padding: 0; position: relative;}
.quote-bubble {display: inline-block; height: auto; margin: 0 0 0 8px; max-width: 100%; position: relative; padding: 0; vertical-align: bottom;}
.circle-shape {border-radius: 50%; border: 5px solid #000; float: left; height: auto; margin: 50px 40px 50px 0; max-width: 100%;}
.circle-img {border-radius: 50%; border: 5px solid #000; display: block; height: auto; margin: 0 auto; max-width: 100%;}
.about-imgs {display: block; margin: 0 auto; max-width: 100%;}
.solution-imgs {display: block; margin: 0 auto; max-width: 100%;}
.solution-placeholder {display: block; margin: 0 auto; max-width: 100%;}
.msp-imgs {display: block; margin: 0 auto; max-width: 100%;}
.brand-logos {display: block; margin: 0 10px 10px 0; max-width: 100%;}
.quote-logos {float: left; height: auto; margin: 0 12px 10px 0; padding: 0; max-width: 100%;}

/* ----------------------------- ICONS ---------------------------*/
.socialicons {float: left; max-width: 100%; margin: 3px 6px 10px 0;}
.serv-icons {display: block; margin: 0 auto; padding: 0 0 10px; position: relative; text-align: center;}
.table-icons {display: block; margin: 0 auto; max-width: 100%;}
.table-icons-left {display: inline-block; margin: 0 auto; margin-right: 5px; max-width: 100%; vertical-align: bottom;}
.center-icons {display: block; margin: 0 auto; margin-bottom: 20px; max-width: 100%;}
.text-icons {display: inline-block; height: auto; margin: 0 5px 0 0; padding: 0; max-width: 100%; vertical-align: sub;}
.left-icons {display: inline-block; height: auto; margin: 0 10px 0 0; padding: 0; max-width: 100%; vertical-align: central;}

/* ----------------------------- LOGOS ---------------------------*/
.gs {float: left; margin: 5px 8px 8px 0;}

/*--------------------- MAIN PAGE STYLES --------------------*/
.wrapper {height: 100%; margin: 0 auto; max-width: 100%; position: relative; width: 100%;}
header {box-shadow: 0 20px 20px -8px rgba(0,0,0,.05),0 24px 48px -4px rgba(0,0,0,.05); min-height: 125px; margin: 0 auto;} 
.header-top {background-color: #fff; height: auto; margin: 0 auto; max-width: 100%; min-height: 130px; padding: 0; position: relative; width: 100%;}
.header-top-stripe {background: rgb(254,209,64); background: linear-gradient(180deg, rgba(254,209,64,1) 90%, rgba(255,255,255,1) 90%); height: 10px; position: relative; width: 100%;}
.top-container {margin: 0 auto; max-width: 1200px; padding: 14px 40px 0; position: relative;}
.logo-container {float: left; height: 100%; margin: 0 auto; padding-right: 10px; position: relative;}
.logo {display: block; margin: 0 0 10px 0; max-width: 100%; padding: 0; position: relative; z-index: 100;}
.phone-text {color: #000; float: right; font-family: "gunplay", sans-serif; font-size: 22px; height: 100%; padding: 10px 0; position: relative; text-align: right; width: 200px; z-index: 100;}
.phone-text a {color: #000;}

/* ----------------------------- UPDATED NAVIGATION to new MEGA NAV March 2025 ---------------------------*/
.menu-container {clear: right; height: auto; margin: 0; padding: 0; position: relative; transition: all 0.5s ease 0s; width: 100%;}
.navbar {font-family: "Montserrat", sans-serif; font-weight: 400; height: 100%; margin: 0 auto; position: relative; z-index: 2;}
.menu {margin: 0;}
.menu .logo {float: left; margin-right: 10px;}
.menu img {max-width: 100%;}
.menu-mobile {display: none; padding: 20px; -webkit-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.menu-mobile:after {content: "\f394"; float: right; font-family: "Ionicons"; font-size: 2.5rem; padding: 0; position: relative; top: 50%; -webkit-transform: translateY(-40%); transform: translateY(-40%);}  
.menu-dropdown-icon:before {background: #fff; content: "\f489"; color: #333; cursor: pointer; display: none; float: right; font-family: "Ionicons"; padding: 1em 2em; border: 2px solid #e9e9e9;}
.menu > ul {box-sizing: border-box; clear: right; list-style: none; margin: 0 auto; padding: 0; position: relative; text-align: right; width: 100%;}
.menu > ul:before,
.menu > ul:after {content: ""; display: table;}
.menu > ul:after {clear: both;}
.menu > ul > li {background: #fff; font-size: 15.5px; display: inline-block; margin-left: 4px; padding: 0; text-align: left;}
.menu > ul > li a {display: block; padding: 1em 1em 1.5em; text-decoration: none;}
.menu > ul > li:hover {background: #FFD141; border-top-left-radius: 4px; border-top-right-radius: 4px;}
.menu-title {font-weight: 500; padding: 10px 0 !important;}
.menu-text {font-size: 90%; font-weight: 400; padding: 2px 0 8px !important;}
.menu-min-height {min-height: 200px;}
.menu > ul > li > ul {animation: delayPointerEvents .15s forwards; background: #fff; box-shadow: -3px 28px 86px -8px rgba(0,0,0,.3),0 14px 28px -4px rgba(0,0,0,.3); border-radius: .5rem; box-sizing: border-box; display: none; left: 0; list-style: none; margin: 0; padding: 20px; pointer-events: all; position: absolute; width: 100%; z-index: 99; transform: translateY(-10px);}
.menu > ul > li > ul:before,
.menu > ul > li > ul:after {content: ""; display: table;}
.menu > ul > li > ul:after {clear: both;}
.menu > ul > li > ul > li {background: none; float: left; list-style: none; margin: 0; padding-bottom: 0; width: 25%;}
.menu > ul > li > ul > li a {border-bottom: 1px solid #ccc; color: #777; display: block; padding: .5em; width: 100%;}
.menu > ul > li > ul > li a:hover {background: #FFD141; border-radius: 4px; color:#1f1f1f;}
.menu-last {border: none !important;}
.menu > ul > li > ul > li > ul {box-sizing: border-box; display: block; margin: 8px 0 20px; list-style: none; padding: 0;}
.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {content: ""; display: table;}
.menu > ul > li > ul > li > ul:after {clear: both;}
.menu > ul > li > ul > li > ul > li {float: left; font-size: .8em; margin: 0; padding: 0 12px 0 0; width: 100%;}
.menu > ul > li > ul > li > ul > li a {font-size: 14px; font-weight: 400;}
.menu > ul > li > ul.normal-sub {left: auto; padding: 10px 20px; width: 300px;}
.menu > ul > li > ul.normal-sub > li {width: 100%;}
.menu > ul > li > ul.normal-sub > li a {padding: 1em;}
.mega-menu-icons {display: inline-block; max-width: 100%; vertical-align: sub;}

/* HERO AREA */
.hero-container {background: #000 url('../images/bnb-hero-bknd.jpg'); margin: 0 auto; position: relative; max-width: 100%; min-height: 650px; width: 100%;}
.hero-text {height: 100%; padding: 100px 20px 10px; position: relative; width: 100%;}
.hero-right-text-area {text-align: center;}
.hero-side-imgs {display: block; margin: 0 auto; max-width: 100%; position: relative;}
.hero-icon {align-self: start; height: auto; margin: 0 auto; max-width: 100%; padding: 0 20px 10px 0; position: relative;}
.hero-h1 {font-family: "Montserrat", sans-serif; font-size: 52px; font-weight: 600; line-height: 56px; margin-bottom: 12px; padding: 0;}
.hero-h2 {font-size: 42px; line-height: 48px;}
.hero-h3 {font-size: 22px; font-weight: 400; line-height: 26px; margin-bottom: 0;}
.hero-footer {background-color: #FFD141; bottom: 0; height: auto; margin: 0 auto; max-width: 100%; min-height: 100px; padding: 0; position: absolute; width: 100%;}
.hero-footer-chip {bottom: 0; left: 0; right: 0; margin: 0 auto; max-width: 100%; position: absolute; width: 500px;}

/* WELCOME */
.intro {min-height: 600px; margin: 0 auto; max-width: 100%; padding: 60px 0 100px; position: relative; width: 100%;}
.intro-inner {margin: 0 auto; max-width: 100%; min-height: 550px; padding-bottom: 100px; position: relative; width: 100%;}
.intro-inner-wave {margin: 0 auto; max-width: 100%; min-height: 500px; padding-bottom: 20px; position: relative; width: 100%;}

/* Not Your Avg MSP section */
.not-average-msp {max-width: 100%; margin: 0 auto; padding: 0; position: relative; width: 100%;}

/* ANGLED SECTION YELLOW */
.angled-section {background-color: #FFD141; height: auto; margin: 0 auto; min-height: 500px; padding: 0; position: relative; width: auto;}
.angled-section:before {background-color: #FFD141; content: ""; height: 30%; position: absolute; top: 0; -webkit-transform: skewY(-5deg); -o-transform: skewY(-5deg); -ms-transform: skewY(5deg); -moz-transform: skewY(-5deg); transform: skewY(-5deg); transform-origin: 0; width: 100%;}
.angled-section p a {background-color: #1f1f1f; color: #fff; padding: 2px 8px;}
.angled-section p a:hover {background-color: #ccc;}
.angled-section ul {list-style-type: none; margin-bottom: 10px;}
.angled-section ul li {font-size: 16px; line-height: 24px; list-style: inside none; margin-left: 30px; padding-bottom: 10px; text-indent: -11px;}
.angled-section ul li::before {content: "\00BB \0020";}
.angled-section ul li a {background-color: #1f1f1f; color: #fff; padding: 2px 8px;}
.angled-section ul li a:hover {background-color: #ccc; color: #1f1f1f;}
.border-curve4 {border-radius: 8px;}

/* ANGLED SECTION BLACK */
.angled-section-blk {background-color: #000; height: auto; margin: 0 auto; min-height: 500px; padding: 0; position: relative; width: auto;}
.angled-section-blk:before {background-color: #000; content: ""; height: 30%; position: absolute; top: 0; -webkit-transform: skewY(-5deg); -o-transform: skewY(-5deg); -ms-transform: skewY(5deg); -moz-transform: skewY(-5deg); transform: skewY(-5deg); transform-origin: 0; width: 100%;}
.links-on-blk a {color: #FFD141;}
.links-on-blk a:hover {color: #fff;}

/* Why Choose BNB */
.whychoose-title {display: block; margin: 0 auto; padding: 0; text-align: left; width: 100%;}
.whychoose-icons {align-self: start; margin: 0 auto; padding: 0 10px 20px 0; position: relative;}
.whychoose-icons-white {align-self: start; background-color: #fff; border-radius: 10px; margin: 5px 10px 0 0; padding: 10px; position: relative;}

/* Our Services Enterprise Solutions - HOME pg */
.our-solutions {margin: 0 auto; max-width: 100%; padding: 0; position: relative; width: 100%;}
.our-solutions-icons {align-self: start; display: block; margin: 0 20px 10px 0;}
.our-solutions-content {display: block; margin: 0 auto; padding: 0; text-align: left; width: 100%;}
.our-solutions-titles {font-size: 24px; line-height: 30px; font-weight: 500; text-align: left;}
.our-solutions ul {list-style-type: none; margin-bottom: 10px;}
.our-solutions ul li {font-size: 16px; line-height: 22px; list-style: inside none; margin-left: 10px; padding-bottom: 6px; text-indent: -12px;}
.our-solutions ul li a {color: #FFD141;}
.our-solutions ul li a:hover {color: #CC3333;}

/* Reviews section */
.review-section {background-color: #ccc; margin: 0 auto; max-width: 100%; padding: 0; position: relative; text-align: center; width: 100%;}
.review-section p {font-size: 15px; line-height: 20px; margin: 0; padding: 0;}
.reviewers {font-size: 22px; font-weight: 500; line-height: 30px; text-align: center;}
.review-dates {color: #4F4F4F; font-size: 14px; margin: 0 auto; padding: 0; text-align: center;}
.review-stars {color: #FFCC33; font-size: 26px; height: auto; margin-bottom: 10px; text-align: center;}

/* NEW SCROLLING ROTATOR FOR TESTIMONIALS GOOGLE REVIEWS - Container that masks the overflowing cards */
    .review-slider-container {margin: 0 auto; max-width: 1200px; overflow: hidden; padding: 10px 0 20px; position: relative; width: 100%;}
    .review-slider-container::before,
    .review-slider-container::after {content: ""; height: 100%; pointer-events: none; position: absolute; top: 0; width: 100px; z-index: 2;}
    .review-slider-container::before {background: linear-gradient(to right, #ccc, transparent); left: 0;}   
    .review-slider-container::after {background: linear-gradient(to left, #ccc, transparent); right: 0;}

    /* The track holding the cards */
    .review-slider-track {animation: scroll var(--animation-speed) linear infinite; display: flex; width: calc((var(--rcard-width) + var(--rcard-gap)) * 4);}
    /* Pause animation on hover */
    .review-slider-track:hover {animation-play-state: paused;}

    /* Review Card Styling */
    .review-card {background: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); box-sizing: border-box; flex-shrink: 0; margin-right: var(--rcard-gap); padding: 20px; transition: transform 0.3s ease; width: var(--rcard-width);} 
    .review-card:hover {transform: scale(1.1);}
    .review-header {align-items: center; display: flex; margin-bottom: 4px;}
    .reviewer-name {color: #333; font-size: 15px;font-weight: bold;}
    .review-card-stars {color: #fbbc05; font-size: 18px; margin: 0;}
    .review-text {color: #666; font-size: 14px; line-height: 1.5; margin: 0;}
	.cust-icons {display: inline-block; margin: 0 auto; padding: 0; position: relative; text-align: center; vertical-align: center;}
	
    /* Crucial Keyframes for seamless looping */
    /* Moves the track left by exactly half its length (the first set of 4 cards) */
    @keyframes scroll {
      0% {transform: translateX(0);}
      100% {transform: translateX(calc(-1 * (var(--rcard-width) + var(--rcard-gap)) * 4));}
    }
    
/* Recently at BNB section - NOT CURRENTLY USING ----------------- */
.recent-events {max-width: 100%; margin: 0 auto; padding: 0; position: relative; width: 100%;}
.box-padding {padding: 20px 30px 0 40px;}
.recent-events-title {margin: 20px 0;}
.recent-events-title-h3 {font-weight: 500; line-height: 32px; text-transform: uppercase;}
.box-rowF {display: flex;}
.box-colF {flex: 1; flex-direction: column; display: flex; padding: 0; margin: 0 auto;}
.box-push {align-self: start; background-color: #1f1f1f; border-radius: 4px; color: #fff; font-weight: 400; letter-spacing: 0.04em; margin-top: auto; margin-left: 40px; margin-bottom: 30px; padding: 6px 12px 4px; text-align: center; text-transform: uppercase;}
.box-push:hover {background-color: #FFD141; -webkit-box-shadow: 0 10px 20px 2px rgba(0,0,0,.3); box-shadow: 0 10px 20px 2px rgba(0,0,0,.3); transition: all ease-in-out 500ms;}
.box-push a {color: #fff;}
.box-push a:hover {color: #1f1f1f;}
.box-img {height: auto; margin: 0 auto; max-width: 100%; padding: 0; position: relative; width: 100%;}

/* Inner page styles and body links */
.link-yellow-box {background-color: #FFD141; color: #1f1f1f; padding: 1px 8px;}
.link-yellow-box:hover {background-color: #ccc; color: #1f1f1f; padding: 1px 8px;}

.innerbody p a {background-color: #FFD141; color: #1f1f1f; padding: 2px 8px;}
.innerbody p a:hover {background-color: #ccc;}
.innerbody ul {list-style-type: none; margin-bottom: 10px;}
.innerbody ul li {font-size: 16px; line-height: 22px; list-style: inside none; margin-left: 30px; padding-bottom: 6px; text-indent: -11px;}
.innerbody ul li::before {content: "\00BB \0020";}
.innerbody ul li a {background-color: #FFD141; color: #1f1f1f; padding: 2px 8px;}
.innerbody ul li a:hover {background-color: #ccc;}
.innerbody ul ul {margin-top: 6px;}
.innerbody ul ul li {padding: 0;}
.innerbody ul ul li::before {content: "\2192 \0020";}
/* ---------------------- lt yellow wave top -------------------------*/
.custom-shape-divider-bottom-1739575032 {bottom: 0; left: 0; line-height: 0; overflow: hidden; position: absolute; transform: rotate(180deg); width: 100%;}
.custom-shape-divider-bottom-1739575032 svg {display: block; height: 61px; position: relative; width: calc(139% + 1.3px);}
.custom-shape-divider-bottom-1739575032 .shape-fill {fill: #FFF1C6;}
/* ---------------------- lt grey wave top -------------------------*/
.custom-shape-divider-bottom-1757974895 {bottom: 0; left: 0; line-height: 0; overflow: hidden; position: absolute; transform: rotate(180deg); width: 100%;}
.custom-shape-divider-bottom-1757974895 svg {display: block; height: 75px; position: relative; width: calc(140% + 1.3px);}
.custom-shape-divider-bottom-1757974895 .shape-fill {fill: #E4E4E4;}
/* MSP Cards */
.cards {border-radius: 5px; display: inline-block; padding: 8px; max-width: 100%;}
.cards:hover {box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)}
.price {border-radius: 5px; border: 1px solid #eee; list-style-type: none; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s;}
.price .header {background-color: #111; border-top-left-radius: 5px; border-top-right-radius: 5px; color: #fff; font-size: 25px;}
.price .header-popular {background-color: #FFD141;border-top-left-radius: 5px; border-top-right-radius: 5px; color: #1f1f1f; font-size: 25px;}
.price li {border-bottom: 1px solid #eee; line-height: 22px; padding: 20px; text-align: center;}
.price .grey {background-color: #eee; font-size: 20px;}
.price .grey-button {background-color: #eee; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; font-size: 20px;}
.card-button {background-color: #FFD141; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px;}
.card-button2 {border: none; background-color: #6ab04c; border-radius: 5px; color: #1f1f1f; cursor: pointer; font-size: 16px; font-weight: 400; margin-top: 1rem; padding: 12px; width: 100%;}
.card-button2:hover {background-color: #199ED9;}
.card-feature {transform: scale(1.08);}
@media only screen and (max-width: 768px) {.cards {width: 100%;}}

/* NEW REVISED LAYOUT of MSP Cards */
.msp-tier-options {display: flex;gap: 1.5rem;flex-wrap: wrap;font-family: "Poppins", sans-serif;margin: 0 auto;max-width: 1200px;padding: 20px 10px;}
.msp-tier-card {background: #fff;border-radius: 16px;box-shadow: 0 0 15px rgba(0,0,0,0.2);display: flex;flex: 1;flex-direction: column-reverse;font-family: "Poppins", sans-serif;height: 100%;margin-top: auto;padding: 0;position: relative;text-align: center;transition: all 0.25s ease;}
.msp-tier-card:hover {transform: scale(1.05);}
.tier-top {border-top-right-radius: 16px; border-top-left-radius: 16px;}
.tier-bottom {border-bottom-right-radius: 16px; border-bottom-left-radius: 16px;}
.tier-title {background: #000;color: #fff;font-size: 1.75rem;font-weight: 500;line-height: 1.2;padding: 10px 10px 20px;}
.tier-title-popular {background: #FFD141;color: #000;font-size: 1.75rem;font-weight: 500;line-height: 1.2;padding: 10px 10px 20px;}
.tier-icons {display: block;margin: 0 auto;max-width: 100%;}
.tier-text {color: #000;font-size: 1rem;font-weight: 400;line-height: 1.35;padding: 25px 20px;}
.tier-card__badge {align-items: center; background: #FFD141; border-radius: 50px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 0 0 4px rgba(255, 255, 255, 1); color: #000; display: inline-flex; gap: 4px; left: 50%; font-size: 12px; font-weight: 700; letter-spacing: 0.10em; padding: 4px 12px; position: absolute; top: -20px; transform: translateX(-50%); white-space: nowrap;}
.unlimited {border-bottom: 2px solid #FFD141; display: block; font-size: 1.2rem; font-weight: bold; line-height: 1.25; padding: 0 0 8px;}
.unlimited-blue {color: #0066FF;}

/* MSP Retainer Plus */
.inlc-desc-icons {align-self: start; display: block; margin-right: 12px; max-width: 100%; padding: 0; position: relative;}
.incl-desc {display: block; margin: 0 auto; padding: 0; text-align: left; width: 100%;}
.incl-desc-h3 {font-size: 26px; line-height: 32px; margin-bottom: 16px;}
.incl-desc p {line-height: 22px; margin: 0;}
.incl-desc ul {list-style-type: none; margin-bottom: 10px;}
.incl-desc ul li {font-size: 16px; line-height: 22px; list-style: inside none; margin-left: 11px; padding-bottom: 10px; text-indent: -11px;}
.incl-desc ul li::before {content: "\00BB \0020";}
/* About Us MISSION section */
.mission-blocks-container {margin: 0 auto; max-width: 1200px; padding: 10px 20px; position: relative;}
.mission-blocks {font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 300; line-height: 20px; margin-bottom: 0; padding: 0;}
/* BRANDS WE TRUST LIST */
.brands-we-trust {display: flex; align-items: center; justify-content: center;}
.brands-we-trust ul {text-align: center;}
.brands-we-trust li {display: inline-block; list-style: none; vertical-align: middle;}
.brands-we-trust .trusted-brands {fill: inherit; max-height: 75px; margin: 0 20px 20px 0; max-width: 100%;}
/* Quick Contact Button section */
.quick-contact-section {margin: 0 auto; max-width: 100%; padding: 0; position: relative; width: 100%;}

/* Contact Map Quote section */
.contact-maps {background-color: #000; height: auto; margin: 0 auto; max-width: 100%; padding: 0; position: relative; width: 100%;}
.contact-maps-lgtitle {font-size: 62px; font-weight: 800; line-height: 68px; margin: 0; padding: 0; text-align: center;}
.contact-maps-subtitle {font-size: 54px; font-weight: 400; line-height: 60px; text-align: center;}
.contact-form {height: auto; position: relative; max-width: 100%; width: 100%;}
.contact-maps-phnumber {font-size: 80px; font-weight: 800; line-height: 82px; margin: 0; padding: 0; text-align: center;}
.contact-icon-quote {display: block; margin: 0 auto; padding: 0; position: relative;}
.contact-icon-ph {display: inline-block; margin: 0 auto; padding: 0 10px 0 0; position: relative; vertical-align: middle;}
.contact-maps a[href^=tel] {color:#fff; text-decoration:none;}
.map-wrapper {background-color: #fff; border: #dddddd 2px solid; border-radius: 4px; clear: both; margin-bottom: 20px; max-width: 100%;}
.map-container {height: 0; overflow: hidden; padding-bottom: 40%; position: relative;}
.map-container iframe, .map-container object, .map-container embed {height: 100%; left: 0; position: absolute; top: 0; width: 100%;}

/* Quick Contact section from orig site */
.quick-contact {background-color: #fff; min-height: 300px; padding: 50px 0px; position: relative; text-align: center; width: 100%;}
.quick-contact a {background-color: #FFD141; color: #1f1f1f; padding: 1px 8px;}
.material-icons {display: inline-block; margin-bottom: 10px; white-space: nowrap;}

/* ----------------------- resp tables -------------------- */
.solutions-table a {background-color:#FFD141; color: #1f1f1f; padding: 4px;}
.solutions-table a:hover {background-color:#FFF1C6;}
.solutions-table table {border-collapse: collapse; margin: 0 auto; margin-bottom: 10px; width: 100%;}
/* Zebra striping */
	.solutions-table tr:nth-of-type(odd) {background: #eee;}
	.solutions-table th {background: #FFD141; color: #4d4d4d;}
	.solutions-table td, .solutions-table th {padding: 20px; border: 1px solid #fff; vertical-align: middle;}
	.solutions-table .table-subtitle {background-color: #FFF1C6; padding: 8px 12px;}
@media only screen and (max-width: 760px), (min-width: 768px) and (max-width: 1024px) {
	/* Force table to not be like tables anymore */
	.solutions-table table, .solutions-table thead, .solutions-table tbody, .solutions-table th, .solutions-table td, .solutions-table tr {display: block;}	
	/* Hide table headers (but not display: none;, for accessibility) */
	.solutions-table thead tr {position: absolute; top: -9999px; left: -9999px;}
	.solutions-table tr {border: 1px solid #ccc; }
	/* Behave  like a "row" */ 
	.solutions-table td {border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%;}
	/* Now like a table header */
	.solutions-table td:before {left: 6px; padding-right: 10px; position: absolute; top: 6px; white-space: nowrap; width: 45%; } /* Top/left values mimic padding */		
	/* Label the data */
	.solutions-table td:nth-of-type(1):before { content: "Service";}
	.solutions-table td:nth-of-type(2):before { content: "Retainer";}
	.solutions-table td:nth-of-type(3):before { content: "Platinum MSP";}
	.solutions-table td:nth-of-type(4):before { content: "Diamond MSP";}
	.solutions-table td:nth-of-type(5):before { content: "Diamond MSP+";}
}

/* ----------- datto ----------- */
.datto-partner {display: inline-block; height: auto; margin: 0; max-width: 100%; margin-right: 10px; vertical-align: central;}
.bkgnd-datto {background-color: #D1EBF7;}
.datto-blue {color: #199ED9;}
.datto-hiw-text {font-size: 18px; font-weight: 400; line-height: 26px; margin: 0; padding: 0;}
.datto table {border-collapse: collapse; margin-bottom: 10px; width: 100%;}
/* Zebra striping */
.datto tr:nth-of-type(odd) {background: #d2d2d2;}
.datto th {background: #fcd625; color: #000; font-size: 18px; line-height: 20px; text-align: center;}
.datto td, .datto th {border: 1px solid #fff; font-family: "Poppins", sans-serif; padding: 15px; vertical-align: middle;}
.datto td {font-size: 16px; line-height: 20px; text-align: left;}
.datto .table-icons {display: block; height: auto; margin: 0 auto; max-width: 100%;}

.custom-shape-divider-bottom-1739906419 {bottom: 0; left: 0; line-height: 0;  overflow: hidden; position: absolute; transform: rotate(180deg); width: 100%;}
.custom-shape-divider-bottom-1739906419 svg {display: block; height: 53px; position: relative; width: calc(118% + 1.3px);}
.custom-shape-divider-bottom-1739906419 .shape-fill {fill: #D1EBF7;}

/* ------------- FOOTER section ------------- */
footer {background-color: #333333; color: #fff; margin: 0 auto; min-height: 400px; padding: 50px 0; position: relative; width: 100%;}
footer p {color: #fff;}
footer a {color: #FFD141; display: inline-block;}
footer a:hover {color: #fff;}
footer a:active {color: #1f1f1f;}
.footer-title {color: #FFD141; font-size: 28px; margin-bottom: 10px;}
.footer-nav {margin:0 auto;}
.footer-nav ul {height: auto; margin: 0 auto; padding-bottom: 12px; position: relative;}
.footer-nav li {border-bottom: 1px solid #ccc; letter-spacing: 0.02em; line-height: 20px; list-style-type: none; margin-left: 0;}
.footer-nav li a {color: #fff; font-size: 14px; padding: 8px; width: 100%;}
.footer-nav li a:hover {background-color: #FFD141; color: #1f1f1f; font-weight: 400; width: 100%;}
.footer-nav li a:active {background-color: #FFD141; color: #1f1f1f; font-weight: 400; width: 100%;}
.bnb-logo-footer {display: block; margin: 0 auto; max-width: 100%; padding-bottom: 20px;}

.custom-shape-divider-top-1738966565 {left: 0; line-height: 0; overflow: hidden; position: absolute; top: 0;width: 100%;}
.custom-shape-divider-top-1738966565 svg {display: block; height: 50px; position: relative; transform: rotateY(180deg); width: calc(100% + 1.3px);}
.custom-shape-divider-top-1738966565 .shape-fill {fill: #333333;}

.social-icons-box {display: flex; margin-bottom: 10px; max-width: 100%; position: relative;}
.social-icons {display: block; height: auto; margin: 0; max-width: 100%; margin-right: 5px; position: relative; vertical-align: bottom;}
.social-icons:hover {box-shadow: 0 0 8px rgba(255,255,255,0.5);}

.copyright {background-color: #ccc; color: #1f1f1f; margin: 0 auto; height: auto; padding: 20px 0; position: relative; width: 100%;}
.copyright-text-sm {color: #1f1f1f; font-size: 14px; line-height: 20px; margin: 0 auto;}
.designed-by {display: block; position: relative; width: 100%;}
.designed-by p {font-size: 12px; line-height: 18px; margin: 0 auto;}
.designed-by a {color: #1f1f1f;}
.designed-by a:hover {color: #fff;}

/* -------------------------------------------MOBILE DEVICE AREA SETTINGS---------------------------------------------- */
@media screen and (max-width: 1150px) and (min-width: 980px) { }

/* Styles for ipads for NAVIGATION */
@media only screen and (max-width: 1040px) {.menu > ul > li a {padding: 1.10em;}}
@media only screen and (max-width: 1040px) {
  .menu-container {float: none; padding: 0; width: 100%;}
  .menu-container .menu {display:block;}
  .menu-mobile {display: block; padding: 20px 0 0;}
  .menu-dropdown-icon:before {display: block;}
  .menu-min-height {min-height: 100px;} 
  .menu > ul {clear: both; display: none; width:100%;}
  .menu > ul > li {background: #e9e9e9; border-bottom: 2px solid #fff; border-radius: 6px; display: block; float: none; margin: 0 auto; width: 100%;}
  .menu > ul > li > ul {box-shadow: 0 0 10px 8px rgba(0,0,0,.1),0 20px 10px -4px rgba(0,0,0,.08); margin-top: 10px; position: relative; width: 95%;}
  .menu > ul > li > ul.normal-sub {margin-top: 10px; width: 95%;}
  .menu > ul > li > ul > li {float: none; width: 100%;}
  .menu > ul > li > ul > li:first-child {margin: 0;}
  .menu > ul > li > ul > li > ul {position: relative;}
  .menu > ul > li > ul > li > ul > li {float: none;}
  .menu .show-on-mobile {display: block; transition: all 0.35s ease;}
}
/*Styles for screen 980px and lower for NAVIGATION*/
@media only screen and (max-width: 668px) {
	.menu-mobile {padding: 50px 0 0; transition: all 0.35s ease;}
	.logo {width: 250px;}
	.phone-text {display: inline-block; float: none; height: auto; margin: 0 auto; max-width: 100%; text-align: center; width: 100%;}
	}

@media only screen and (max-width: 430px) {
	.phone-text {display: inline-block; float: none; height: auto; margin: 0 auto; max-width: 100%; text-align: center; width: 100%;}
	.logo {display: block; margin: 0; padding: 0 0 10px 0;}
}
/* -------------------------------- END MOBILE NAVIGATION STYLES -------------------------------- */
@media screen and (max-width: 1024px){.hero-h1 {font-size: 48px;}}
@media screen and (max-width: 900px){
	.top-container {max-width: 100%; padding: 14px 30px;}
	.hero-container {min-height: 600px;}
}
@media only screen and (max-width: 834px) {
	.hero-h1 {font-size: 42px; line-height: 44px;}
	.hero-h2 {font-size: 34px; line-height: 42px;}
	.hero-icon {display: none;}
	.hero-side-imgs {max-width: 80%;}	
	.intro-inner {min-height: auto; padding-bottom: 50px;}
	.intro-inner-wave {min-height: auto;}
	.expertise-title {font-size: 20px; line-height: 24px;}
	.reviewers {font-size: 18px; line-height: 24px; margin-bottom: 0;}
	.review-stars {font-size: 22px;}
	.tagline {font-size: 18px; line-height: 24px;}
	.intro {min-height: 500px;}
	.contact-maps-lgtitle {font-size: 50px; line-height: 58px;}
	.contact-maps-subtitle {font-size: 46px;}
	.contact-maps-phnumber {font-size: 75px;}
	.whychoose-title h3 {font-size: 24px; line-height: 30px;}
	.whychoose-icons-white {width: 65px;}
	.our-solutions-icons {margin: 0 15px 10px 0; width: 50px;}
	.lined-title {font-size: 18px; line-height: 24px;}
	.msp-tier-options {display: grid; max-width: 100%;}
	.msp-tier-card {width: 400px; margin: 0 auto;}
	.footer-title {font-size: 24px;}
}
@media screen and (max-width: 834px) and (min-width: 768px) { }
/*  this box flexbox container is being used on the home page in the recently section to reverse cols */
@media only screen and (max-width: 810px) {
	.box-rowF {flex: auto; margin-right: 10px;}
	.box-colF {flex: auto;}
		.flex-box-container {flex-wrap: wrap;}
		.flex-box-container-right {order: 1;margin: 0;padding: 0;}
		.flex-box-container-left {order: 2;margin: 0;padding: 0;}
	.expertise-title {font-size: 22px; line-height: 28px;}
}

@media screen and (max-width: 767px) and (min-width: 668px) { .hero-text {padding: 50px 20px 0; text-align: center;}}
@media only screen and (max-width: 768px) {
	.circle-shape {display: block; float: none; margin: 0 auto;}
	.para-title {font-size: 32px;}
	h1 {font-size: 42px; line-height: 48px;}
	h2 {font-size: 36px; line-height: 40px;}
	h3 {font-size:24px; line-height: 30px;}
	.section-title {margin-bottom: 1rem;}
	.highlighted-yellow-text {margin: 0 4px; padding: 0 8px;}
	.highlighted-white-text {margin: 0 4px; padding: 0 8px;}
	.feature-text {padding-bottom: 0;}
	.side-imgs {max-width: 80%;}
}
@media only screen and (max-width: 668px) {
	.hero-container {background: #000 url('../images/bnb-hero-bknd-mobile.jpg');}
	.hero-text {text-align: center;}
	.hero-right-text-area {padding-top: 20px;}
	.section-title-heavy {margin-bottom: 1rem;}
	.header-top {height: auto;}
	h1 {font-size: 38px;}
	h2 {font-size: 34px; letter-spacing: -.010em;}
	.hero-h1 {font-size: 38px; line-height: 42px; margin-bottom: 8px;}
	.hero-h2 {font-size: 26px; line-height: 30px; margin-bottom: 6px;}
	p {margin: 0;}
	.hero-h3 {font-size: 20px; line-height: 24px;}
	.center-text-mobile {text-align: center;}
	.section-padding {padding: 4rem 0 6rem;}
	.section-padding-sm {padding: 4rem 0;}
	.expertise-title {font-size: 24px;}
	.our-services-content {padding: 2px;}
	.our-services-icons {display: block; margin-bottom: 10px; padding: 0;}
	.msp-tier-options {padding: 20px;}
	.msp-tier-card {width: 100%;}
	.contact-maps-icons {display: block; padding: 20px;}
	.contact-icon-ph {display: block; padding: 10px;}
	.contact-icon-quote {display: block; padding: 0 20px;}
	.contact-maps-lgtitle {font-size: 40px; line-height: 46px;}
	.contact-maps-subtitle {font-size: 36px; line-height: 40px;}
	.contact-maps-phnumber {font-size: 40px; line-height: 42px;}
	.innerbody ul li {margin-left: 10px;}
	.brands-we-trust .trusted-brands {height: auto; margin: 0 auto; margin-bottom: 25px;}
	.circle-img {width: 70%;}
	.card-feature {transform: none;}
	.social-icons-box {text-align: center;}
}
@media only screen and (max-width: 468px) {
	.hero-text {padding: 40px 20px 0;}
	.section-padding-sm {padding: 3rem 0;}
	.top-padding-heavy {margin-top: 0;}
	.hero-footer {min-height: 60px;}
	.header-top-stripe {margin: 0 auto;}
	.hero-text-area {padding: 0 20px;}
	.box-rowF {margin: 0 auto;}
	.para-title {line-height: 34px; text-align: center;}
	h2 {font-size:32px; line-height: 42px;}
	h3 {font-size:24px; line-height: 30px; margin-bottom: 16px; text-align: center;}
	h4 {font-size:18px; line-height: 24px; text-align: center;}
	h5 {text-align: center;}
	.intro {min-height: 500px; padding: 50px 0 0;}
	.solution-placeholder {width: 60%;}
	.msp-imgs {max-width: 70%;}
	.brand-logos {margin: 0 auto; padding-bottom: 12px;}
	.footer-nav li {text-align: center;}
	.social-icons-box {display: block;}
}
@media only screen and (max-width: 375px) {}