/*
Theme Name: zippd
Author: zippd
Description: zippd Theme
Version: 1.0
*/

:root {
  --black: #000000;
  --black-blue: #051042;
  --zippd-blue: #173DED;
  --barely-blue: #ABE1FA;
  --cloud-grey: #F2F3F5;
  --white-van: #FFFFFF;
  --green-light: #03EF79;
  --amber-light: #F9C909;
  --red-light: #FF4D4D;
  --hazard-light: #FFFC68;
  --red-light-tint: #FFEDED;
	
  --black-rgb: 0, 0, 0;
  --black-blue-rgb: 5, 16, 66;
  --zippd-blue-rgb: 23, 61, 237;
  --barely-blue-rgb: 171, 225, 250;
  --cloud-grey-rgb: 242, 243, 245;
  --white-van-rgb: 255, 255, 255;
  --green-light-rgb: 3, 239, 121;
  --amber-light-rgb: 249, 201, 9;
  --red-light-rgb: 255, 77, 77;
  --hazard-light-rgb: 255, 252, 104;
  --red-light-tint-rgb: 255, 237, 237;

  --hover-opacity: 0.5;
  --hover-scale-down: 0.975;
  --hover-scale-up: 1.075;
}

/********/
/* BASE */
/********/

html {
  scroll-padding-top: 4rem;
  font-size: 16px;
}

body {
  font-size: 1rem;
  font-family: "poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.25;
  color: var(--black-blue);
  overflow-x: hidden !important;
}

html,
body {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: none;
}

.hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.invisible {
  visibility: hidden;
}

@media (min-width: 576px) {
  body {
    font-size: 1.0625rem;
  }
}

@media (min-width: 1200px) {
  body {
    font-size: 1.125rem;
  }
}

/********************/
/* BOOTSTRAP EXTRAS */
/********************/

.mb-6 {
  margin-bottom: 4rem !important;
}

.mt-6 {
  margin-top: 4rem !important;
}

.pb-6 {
  padding-bottom: 4rem !important;
}

.pt-6 {
  padding-top: 4rem !important;
}

@media (min-width: 992px) {
    .col-flex-5 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/*****************/
/* IMAGE / VIDEO */
/*****************/

img.imageStretch {
  width: 100%;
  height: auto;
}

img.imageStretch90 {
  width: 90% !important;
  height: auto;
}

img.imageStretch80 {
  width: 80% !important;
  height: auto;
}

.four-logo img {
  width: 80% !important;
  height: auto;
}

.video-overlap {
  position: static;
  top: 0;
  z-index: 10;
}

.layout-usps img {
  max-height: 2.25rem;
}

.layout-usps .item {
  max-width: 28rem;
}

.layout-pillars img:not(.mainImage) {
  width: 2.5rem;
  height: 1.25rem;
  aspect-ratio: 1.4 / 1;
}

@media (max-width: 991px) {
  img.mainImage {
    max-width: 32.5rem;
  }
}

/*********/
/* LINKS */
/*********/

a {
  color: inherit;
  text-decoration: none;
  outline: none;
  cursor: pointer;
}

a,
.buttonPill,
[class*="hover-"] {
  transition: all 0.3s;
}

a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
  outline: none;
}

section p a,
section li a,
section label a {
  font-weight: 600;
  text-decoration: underline;
}

section p a:hover,
section li a:hover,
section label a:hover  {
  text-decoration: underline;
  text-decoration-color: var(--button-bg-color, var(--barely-blue));
}

a.text-link {
  font-weight: 600;
  text-decoration: underline;
}

a.text-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--button-bg-color, var(--barely-blue));
}

.page-links ul {
  list-style-type: none;
  padding-left: 0px;
}

.page-links ul li a {
  text-decoration: underline;
}

.page-links ul li a:hover {
  text-decoration: none;
  color: #00E169;
}

a.link-large {
  font-size: 18px;
  font-weight: 600;
  text-decoration: underline;
  transition: all 0.4s;
}

a.link-large:hover {
  text-decoration: underline;
  text-decoration-color: var(--button-bg-color, var(--barely-blue));
}

.active-link,
.active-link:hover {
  background-color: var(--black-blue);
  color: var(--white-van);
}

a.hover-op:hover,
.hover-op a:hover {
  opacity: var(--hover-opacity);
}

.hover-scale-down:hover {
  scale: var(--hover-scale-down);
}

.hover-scale-up:hover {
  scale: var(--hover-scale-up);
}

.arrow-link {
  display: block;
  width: 2rem;
}

.arrow-link-small {
  display: block;
  width: 1.5rem;
  margin-left: auto;
}

.arrow-text {
    font-size: 0.938rem;
    line-height: 1.466;
    font-weight: 700;
}

@media (min-width: 768px) {

  a.link-large {
    font-size: 25px;
  }

}

/************/
/* HEADINGS */
/************/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
  padding: 0px;
  margin: 2rem 0 0.75rem;
  font-style: normal;
}

:is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 0;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  margin-top: -0.266em;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
  margin-bottom: 0;
}

.sub-heading {
  line-height: 156%;
}

h1,
header+.layout-hero h2 {
  font-weight: 500;
  font-size: 2.375rem;
  line-height: 1.25;
}

h2 {
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.25;
}

h3 {
  font-weight: 600;
  font-size: 1.65rem;
  line-height: 1.25;
}

h4 {
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.5;
}

h5 {
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.5;
}

h6 {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5;
}

@media (min-width: 576px) {

  h1,
  header+.layout-hero h2 {
    font-size: 3rem;
  }

  h2 {
    font-size: 2.125rem;
  }

  h3 {
    font-size: 1.7rem;
  }

  h4 {
    font-size: 1.25rem;
  }

  h5 {
    font-size: 1.15rem;
  }
}


@media (min-width: 1200px) {

  h1,
  header+.layout-hero h2 {
    font-size: 3.75rem;
  }

  h2 {
    font-size: 2.25rem;
  }

  h3 {
    font-size: 1.75rem;
  }

  h4 {
    font-size: 1.3rem;
  }

  h5 {
    font-size: 1.2rem;
  }
}

#cmplz-document h2 {
	margin-top: 30px;
}

/**************/
/* TYPOGRAPHY */
/**************/

p {
  font-family: "Aptos", sans-serif;
  padding: 0px;
  margin: 0px;
  line-height: 1.25;
  margin-bottom: 0.75rem;
  font-style: normal;
}

p:last-child {
  margin-bottom: 0;
}

ul:last-child,
ol:last-child,
li:last-child {
  margin-bottom: 0;
}

.body-copy {
  font-family: "Aptos", sans-serif;
}

ul:not([class*="ubermenu"]), ol:not([class*="ubermenu"]) {
  font-family: "Aptos", sans-serif;
}

strong {
  font-weight: 700;
}

.semi-bold {
  font-weight: 600;
}

.intro-text {
  font-size: 22px;
  font-weight: 500;
  text-align: left;
  padding-bottom: 0px;
}

.layout-hero .left-col > *:not(h1) {
  max-width: 37.5rem;
}

/*********/
/* LISTS */
/*********/

ul li {
  margin-bottom: 0.75rem;
}

.layout-hero .left-col ul {
    list-style: none;
    padding-left: 0;
}

.layout-hero .left-col ul li {
    position: relative;
    padding-left: 2em;
}

.layout-hero .left-col ul li::before {
    content: "\f058"; 
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.25em;
    color: var(--button-bg-color, var(--zippd-blue));
    position: absolute;
	top: -0.15em;
    left: 0;
    display: inline-block;
}

/**************/
/* PAGINATION */
/**************/

.pagination {
  display: flex;
  justify-content: center;
  font-weight: 600;
}

.pagination a {
  color: var(--black-blue);
}

.pagination a:hover {
  color: #00E169;
}

/***************/
/* BREADCRUMBS */
/***************/

.breadcrumb-item {
  color: #B5FA70;
  font-size: 14px;
  font-weight: 400;
}

.breadcrumb-item.active {
  color: #B5FA70;
  font-weight: 600;
}

.breadcrumb-item+.breadcrumb-item::before {
  color: #B5FA70;
}

.breadcrumb-dark-blue .breadcrumb-item {
  color: var(--black-blue);
}

.breadcrumb-dark-blue .breadcrumb-item.active {
  color: var(--black-blue);
}

.breadcrumb-dark-blue .breadcrumb-item+.breadcrumb-item::before {
  color: var(--black-blue);
}

/**************/
/* CONTAINERS */
/**************/

.container,
.container-fluid {
  -webkit-transition: all 0.15s;
  transition: all 0.15s;
}

.overlap-container {
  position: relative;
  z-index: 10;
  margin-top: -25%;
}

.tab-container .tab-content-container {
  padding: 10% 8%;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}

.layout-hero.has-bg-color:not(:bgWhiteVan:not(.has-bg-image)) .container {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.layout-hero.has-bg-image .container {
  min-height: 26rem;
  padding-top: 3.125rem;
  padding-bottom: 3.125rem;
}

section[class*="has-bg"]:not(.bgWhiteVan:not(.has-bg-image)):last-of-type {
  margin-bottom: 0!important;
}

@media (min-width: 576px) {
  .layout-hero.has-bg-image .container {
    min-height: 27rem;
    padding-top: 4.6875rem;
    padding-bottom: 4.6875rem;
  }
}

@media (min-width: 768px) {

  .layout-hero.has-bg-image .container {
    min-height: 28rem;
    padding-top: 6.25rem;
    padding-bottom: 6.25rem;
  }

  .overlap-container {
    margin-top: -15%;
  }

  .tab-container .tab-content-container {
    padding: 8% 10%;
  }
}

/****************/
/* HEADER / NAV */
/****************/

header {
  font-size: 0.938rem;
}

header+.layout-hero {
	margin-top: 2.75rem!important;
}

header:has(+ .layout-hero[class*="has-bg"]:not(.bgWhiteVan:not(.has-bg-image))) {
  position: absolute;
  inset: auto 0;
  z-index: 1;
}

header:has(+ .layout-hero[class*="has-bg"]:not(.bgWhiteVan:not(.has-bg-image))) .header-navbar {
  border-color: transparent;
}

header+.layout-hero[class*="has-bg"]:not(.bgWhiteVan:not(.has-bg-image)) {
  padding-top: 5.1875rem;
  margin-top: 0!important;
}

.header-nav {
  margin: -0.125rem 0;
}

.header-navbar {
  background-color: var(--white-van);
  border-radius: 999px;
  padding: 0 0.75rem;
  border: 0.125rem solid var(--cloud-grey);
}

.header-logo {
  margin-left: 0.75rem;
  margin-right: 1.5rem;
}

.navbar-brand {
  padding: 0;
}

.navbar-brand img {
  width: 101px;
}

.header-buttons,
.mobile-menu-buttons {
  font-weight: 500;
}


nav.ubermenu .ubermenu-nav .ubermenu-submenu .ubermenu-target {
  color: var(--black-blue);
}

.ubermenu-mobile-view .navbar-brand {
  margin-left: 1rem;
  margin-right: 1rem;
}

nav.ubermenu.ubermenu-mobile-modal.ubermenu-mobile-view {
  --modal-margin: 1.5rem;
  --modal-radius: 1.8rem;
  font-size: 1.125rem;
  width: 100%;
  background-color: var(--black-blue);
  padding: var(--modal-margin);
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
  color: var(--black-blue);
}

nav.ubermenu.ubermenu-mobile-modal.ubermenu-mobile-view .ubermenu-nav {
  background-color: var(--white-van);
}

.ubermenu-mobile-view .ubermenu-mobile-header {
  background-color: var(--white-van);
  border-radius: var(--modal-radius) var(--modal-radius) 0 0;
}

.ubermenu-mobile-view .ubermenu-mobile-footer {
  background-color: var(--white-van);
  border-radius: 0 0 var(--modal-radius) var(--modal-radius);
}

nav.ubermenu.ubermenu-mobile-modal.ubermenu-mobile-view .ubermenu-nav .ubermenu-item .ubermenu-submenu {
  left: var(--modal-margin) !important;
  min-width: 0;
  right: var(--modal-margin);
  width: auto;
  padding: 0.75rem 0;
}

.ubermenu-mobile-view .ubermenu-nav .ubermenu-item-level-0>.ubermenu-target {
  font-size: 1.125rem;
}

.ubermenu-mobile-view .ubermenu-nav .ubermenu-item-level-0>.ubermenu-target,
.ubermenu-mobile-view .ubermenu-nav .ubermenu-submenu .ubermenu-target {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

nav.ubermenu.ubermenu-mobile-modal.ubermenu-mobile-view .ubermenu-mobile-footer .ubermenu-mobile-close-button {
  display: none;
}

nav.ubermenu .ubermenu-item .ubermenu-submenu-drop {
    transition-timing-function: ease-in-out;
}


.close-button {
  font-size: 1.875rem !important;
  padding: 1rem !important;
  color: var(--zippd-blue) !important;
}

/***********/
/* BUTTONS */
/***********/

.buttonLogin {
  display: inline-block;

  padding: 12px 40px;

  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid #FF8C4B;
  width: 90%;
  text-align: center;
  order: 1;
}

.buttonSocial {
  display: inline-block;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  overflow: hidden;
  text-align: center;
  font-size: 18px;
  line-height: 35px;
  color: var(--white-van) !important;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
}

.buttonSocial .fab {
  position: relative;
  top: 1px;
}

.buttonSocial:hover {
  background-color: #00E169;
  color: var(--black-blue) !important;
}

.buttonPill {
  display: inline-block;
  padding: 0.2rem 1.4rem;
  font-size: 0.938rem;
  line-height: 1.466;
  font-weight: 700;
  border-radius: 999px;
  border: 0.125rem solid transparent;
  text-align: center;
  max-width: 22.5rem;
  background: var(--button-bg-color, var(--zippd-blue));
  color:  var(--button-color, var(--white-van));
}

.buttonPill:hover {
  scale: var(--hover-scale-up);
}

.buttonPill:hover,
.buttonPill:focus {
  color:  var(--button-color, var(--white-van));
}

.buttonSmall {
  font-size: 1rem;
}

.buttonLarge {
  padding: 0.938rem 1.875rem;
  font-size: 1.125rem;
  width: 100%;
}

.buttonSmall,
.buttonLarge {
  -webkit-filter: brightness(1.0);
  filter: brightness(1.0);
}

.buttonSmall:hover,
.buttonLarge:hover {
  -webkit-filter: brightness(1.13);
  filter: brightness(1.13);
}

.buttonBorder {
  border: 0.125rem solid var(--button-bg-color, var(--black-blue));
}

.buttonBorderBlackBlue {
  border: 0.125rem solid var(--black-blue);
}



@media (min-width: 992px) {

  .buttonSmall {
    width: auto;
  }

  .buttonLarge {
    padding: 0.938rem 6.5625rem;
    width: auto;
    max-width: none;
  }

  .buttonLogin {
    width: auto;
  }

  .buttonPill {
    width: auto;
  }
}

/*************************/
/* COLOURS / BACKGROUNDS */
/*************************/

.bgBlack {
  background-color: var(--black);
  color: var(--white-van);
}

.bgBlackBlue {
  background-color: var(--black-blue);
  color: var(--white-van);
  --button-bg-color: var(--barely-blue);
  --button-color: var(--black-blue);
}

.bgZippdBlue {
  background-color: var(--zippd-blue);
  color: var(--white-van);
  --button-bg-color: var(--barely-blue);
  --button-color: var(--black-blue);
}

.bgBarelyBlue {
  background-color: var(--barely-blue);
  color: var(--black-blue);
  --button-bg-color: var(--white-van);
  --button-color: var(--black-blue);
}

.bgCloudGrey {
  background-color: var(--cloud-grey);
  color: var(--black-blue);
  --button-bg-color: var(--zippd-blue);
  --button-color: var(--white-van);
}

.bgWhiteVan {
  background-color: var(--white-van);
  color: var(--black-blue);
  --button-bg-color: var(--zippd-blue);
  --button-color: var(--white-van);
}

.bgGreenLight {
  background-color: var(--green-light);
  color: var(--black-blue);
  --button-bg-color: var(--white-van);
  --button-color: var(--black-blue);
}

.bgAmberLight {
  background-color: var(--amber-light);
  color: var(--black-blue);
  --button-bg-color: var(--white-van);
  --button-color: var(--black-blue);
}

.bgRedLight {
  background-color: var(--red-light);
  color: var(--white-van);
  --button-bg-color: var(--white-van);
  --button-color: var(--black-blue);
}

.bgHazardLight {
  background-color: var(--hazard-light);
  color: var(--black-blue);
  --button-bg-color: var(--white-van);
  --button-color: var(--black-blue);
}

.bgRedLightTint {
  background-color: var(--red-light-tint);
  color: var(--black-blue);
  --button-bg-color: var(--white-van);
  --button-color: var(--black-blue);
}

.bgZippdGrad1 {
  background: radial-gradient(ellipse farthest-corner at 90% 90%, var(--zippd-blue) 0%, var(--black-blue) 67%);
  color: var(--white-van);
  --button-bg-color: var(--barely-blue);
  --button-color: var(--black-blue);
}

.bgZippdGrad2 {
  background: linear-gradient(var(--zippd-blue) 0%, var(--black-blue) 100%);
  color: var(--white-van);
  --button-bg-color: var(--barely-blue);
  --button-color: var(--black-blue);
}

a.bgTransparent {
  background-color: transparent;
  color: var(--button-bg-color, --black-blue);
}


a.bgBlack:hover,
a.bgBlack:focus {
  color: var(--white-van);
}

a.bgBlackBlue:hover,
a.bgBlackBlue:focus {
  color: var(--white-van);
}

a.bgZippdBlue:hover,
a.bgZippdBlue:focus {
  color: var(--white-van);
}

a.bgBarelyBlue:hover,
a.bgBarelyBlue:focus {
  color: var(--black-blue);
}

a.bgCloudGrey:hover,
a.bgCloudGrey:focus {
  color: var(--black-blue);
}

a.bgWhiteVan:hover,
a.bgWhiteVan:focus {
  color: var(--black-blue);
}

a.bgGreenLight:hover,
a.bgGreenLight:focus {
  color: var(--black-blue);
}

a.bgAmberLight:hover,
a.bgAmberLight:focus {
  color: var(--black-blue);
}

a.bgRedLight:hover,
a.bgRedLight:focus {
  color: var(--white-van);
}

a.bgHazardLight:hover,
a.bgHazardLight:focus {
  color: var(--black-blue);
}

a.bgRedLightTint:hover,
a.bgRedLightTint:focus {
  color: var(--black-blue);
}

a.bgZippdGrad1:hover,
a.bgZippdGrad1:focus {
  color: var(--white-van);
}

a.bgZippdGrad2:hover,
a.bgZippdGrad2:focus {
  color: var(--white-van);
}

a.bgTransparent:hover,
a.bgTransparent:focus {
  color: var(--button-bg-color);
}


.hover-bgBlack:hover {
  background-color: var(--black);
}

.hover-bgBlackBlue:hover {
  background-color: var(--black-blue);
}

.hover-bgZippdBlue:hover {
  background-color: var(--zippd-blue);
}

.hover-bgBarelyBlue:hover {
  background-color: var(--barely-blue);
}

.hover-bgCloudGrey:hover {
  background-color: var(--cloud-grey);
}

.hover-bgWhiteVan:hover {
  background-color: var(--white-van);
}

.hover-bgGreenLight:hover {
  background-color: var(--green-light);
}

.hover-bgAmberLight:hover {
  background-color: var(--amber-light);
}

.hover-bgRedLight:hover {
  background-color: var(--red-light);
}

.hover-bgHazardLight:hover {
  background-color: var(--hazard-light);
}

.hover-bgRedLightTint:hover {
  background-color: var(--red-light-tint);
}


.cBlack,
.cBlack:hover,
.cBlack:focus {
  color: var(--black);
}

.cBlackBlue,
.cBlackBlue:hover,
.cBlackBlue:focus {
  color: var(--black-blue);
}

.cZippdBlue,
.cZippdBlue:hover,
.cZippdBlue:focus {
  color: var(--zippd-blue);
}

.cBarelyBlue,
.cBarelyBlue:hover,
.cBarelyBlue:focus {
  color: var(--barely-blue);
}

.cCloudGrey,
.cCloudGrey:hover,
.cCloudGrey:focus {
  color: var(--cloud-grey);
}

.cWhiteVan,
.cWhiteVan:hover,
.cWhiteVan:focus {
  color: var(--white-van);
}

.cGreenLight,
.cGreenLight:hover,
.cGreenLight:focus {
  color: var(--green-light);
}

.cAmberLight,
.cAmberLight:hover,
.cAmberLight:focus {
  color: var(--amber-light);
}

.cRedLight,
.cRedLight:hover,
.cRedLight:focus {
  color: var(--red-light);
}

.cHazardLight,
.cHazardLight:hover,
.cHazardLight:focus {
  color: var(--hazard-light);
}

.cRedLightTint,
.cRedLightTint:hover,
.cRedLightTint:focus {
  color: var(--red-light-tint);
}


section.has-bg-color:has(+ section.has-bg-color:not(.bgWhiteVan)) {
    margin-bottom: 0 !important;
}

section.has-bg-color + section.has-bg-color:not(.bgWhiteVan) {
    margin-top: 0 !important;
}

section.bgBlackBlue + section.bgZippdGrad1 {
    padding-top: 0 !important;
}

section.bgZippdBlue + section.bgZippdGrad2 {
    padding-top: 0 !important;
}

section.bgWhiteVan:not(.has-bg-image) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

section.bgBlackBlue:has(+ section.bgBlackBlue),
section.bgZippdBlue:has(+ section.bgZippdBlue),
section.bgBarelyBlue:has(+ section.bgBarelyBlue),
section.bgCloudGrey:has(+ section.bgCloudGrey),
section.bgWhiteVan:has(+ section.bgWhiteVan),
section.bgGreenLight:has(+ section.bgGreenLight),
section.bgAmberLight:has(+ section.bgAmberLight),
section.bgRedLight:has(+ section.bgRedLight),
section.bgHazardLight:has(+ section.bgHazardLight),
section.bgRedLightTint:has(+ section.bgRedLightTint) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}


section.bgBlackBlue + section.bgBlackBlue,
section.bgZippdBlue + section.bgZippdBlue,
section.bgBarelyBlue + section.bgBarelyBlue,
section.bgCloudGrey + section.bgCloudGrey,
section.bgWhiteVan + section.bgWhiteVan,
section.bgGreenLight + section.bgGreenLight,
section.bgAmberLight + section.bgAmberLight,
section.bgRedLight + section.bgRedLight,
section.bgHazardLight + section.bgHazardLight,
section.bgRedLightTint + section.bgRedLightTint {
    margin-top: 0 !important;
    padding-top: 0.375rem !important;
}


section[class*="has-bg-image"] a.bgTransparent {
  background: var(--white-van);
  border-color: transparent;
  color: var(--black-blue);
}

section[class*="has-bg-image"] .has-bg-color a.bgTransparent {
  background: transparent;
  border-color: var(--button-bg-color, --black-blue);
  color: var(--button-bg-color, --black-blue);
}


.bg-img-driver,
.bg-img-fleet {
  background-color: var(--black-blue);
}

.layout.has-bg-image {
  position: relative;
  background-size: cover;
  background-position: center;
}

.layout.has-bg-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--black-blue);
  opacity: 0.45;
}

.layout.has-bg-image {
  color: var(--white-van);
}

/*************/
/* CAROUSELS */
/*************/

.layout-client_logos .owl-carousel,
.layout-industry_client_logos .owl-carousel {
  max-width: 75rem;
  margin: auto;
}

.layout-client_logos .owl-stage,
.layout-industry_client_logos .owl-stage {
  display: flex;
  align-items: center;
}

.layout-client_logos .item,
.layout-industry_client_logos .item {
  background-color: var(--black-blue);
  margin: 0 1rem;
}

.layout-client_logos .item .client-logo,
.layout-industry_client_logos .item .client-logo {
  display: flex;
  justify-content: center;
  background-color: var(--white-van);
  mix-blend-mode: screen;
}

.layout-client_logos .item img,
.layout-industry_client_logos .item img {
  width: auto;
  max-width: 100%;
}

.carousel {
  margin-bottom: 6rem;
  overflow: hidden;
  position: relative;
  top: 60px;
}

.carousel-caption p {
  width: 100%;
}

@media (min-width: 768px) {
  .carousel {
    margin-bottom: 8rem;

  }
}


/**********/
/* FOOTER */
/**********/

.nav.policy-links li:not(:last-of-type) a::after {
    content: "|";
    margin: 0 1em;
}

/***********/
/* SPACERS */
/***********/


.spacer-small {
  height: 3rem;
}

.spacer {
  height: 3rem;
}

.spacer-md {
  height: 3rem;
}

.spacer-lg {
  height: 6rem;
}

@media (min-width: 768px) {

  .spacer {
    height: 4rem;
  }

  .spacer-md {
    height: 4rem;
  }

  .spacer-lg {
    height: 8rem;
  }
}

/********/
/* CTAs */
/********/

.app-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.app-cta h3 {
  font-size: 20px;
  margin-top: 0px;
  margin-bottom: 10px;
  margin-left: 30px;
  margin-right: 30px;
}

@media (min-width: 768px) {

  .app-cta {
    flex-wrap: nowrap;
  }

  .app-cta h3 {
    margin-top: 10px;
  }
}

/*******/
/* 404 */
/*******/

.content-404 h1 {
  font-size: 50px;
  margin-bottom: 20px;
}

.content-404 h2 {
  margin-bottom: 45px;
}

.content-404 p {
  font-size: 18px;
}

.content-404 img {
  width: 90%;
}

@media (min-width: 768px) {

  .content-404 h1 {
    font-size: 100px;
  }

  .content-404 h2 {
    font-weight: 700;
    font-size: 50px;
    margin-bottom: 80px;
  }

  .content-404 p {
    font-size: 25px;
  }

  .content-404 img {
    width: 75%;
  }
}

/*********/
/* FORMS */
/*********/

.form-progress {
  width: 80%;
}

.form-box .form-intro {
  border-radius: 10px 10px 0px 0px;
  padding: 5% 10%;
}

.form-box .form-content {
  border-radius: 0px 0px 10px 10px;
  padding: 5% 10%;
}

.form-content {
  padding: 0px;
}

@media (min-width: 768px) {

  .form-progress {
    width: 60%;
  }

  .form-box .form-intro {
    padding: 2% 14%;
  }

  .form-box .form-content {
    padding: 3% 15%;
  }

  .form-content {
    padding: 3% 15%;
  }
}

/***************/
/* SEARCH FORM */
/***************/

/* Style the search form container */
.search-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Style the search input field */
.search-form input[type="search"] {
  width: 100%;
  padding: 10px;
  border: 0.125rem solid #ccc;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.3s;
}

/* Change border color when focused */
.search-form input[type="search"]:focus {
  border-color: var(--black-blue);
}

/* Style the search button */
.search-form input[type="submit"] {
  width: 100%;
  background-color: #00E169;
  color: var(--black-blue);
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s;
  margin: 10px 0px;
}

@media (min-width: 768px) {

  /* Style the search form container */
  .search-form {
    flex-direction: row;
  }

  /* Style the search input field */
  .search-form input[type="search"] {
    width: 400px;
    border-radius: 10px 0 0 10px;
  }

  /* Style the search button */
  .search-form input[type="submit"] {
    width: auto;
    border-radius: 0 10px 10px 0;
    margin: 0px;
  }
}

/************/
/* DIVIDERS */
/************/

.content-divider-vertical {
  border-right: none;
  border-bottom: 1px solid #DCE7E8;
}

.vertical-line-solid-medium {
  height: 210px;
  border-left: 1px solid var(--black-blue);
  margin-left: 6px;
}

.vertical-line-dashed-long {
  height: 180px;
  border-left: 1px dashed var(--black-blue);
  margin-left: 6px;
}

@media (min-width: 768px) {

  .vertical-line-solid-medium {
    height: 100px;
  }

  .vertical-line-dashed-long {
    height: 120px;
  }
}

/***********/
/* COLUMNS */
/***********/

.left-col-radius,
.right-col-radius {
  border-radius: 25px;
}

.equal-height-col {
  height: auto;
}







/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
  html {
    scroll-padding-top: 6.5rem;
  }

  .container {
    overflow: visible;
  }

  .bg-img-driver,
  .bg-img-fleet {
    background-color: var(--black-blue);
  }

  /* Carousel base class */
  .carousel {
    margin-bottom: 4rem;
    overflow: hidden;
    position: relative;
    top: 0px;
  }

  .carousel-caption p {
    width: 50%;
  }

  .buttonSmall {
    display: inline-block;

    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 20px;
    padding-right: 20px;

    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid transparent;
    width: auto;
    text-align: center;
  }

  .buttonLogin {
    display: inline-block;

    padding: 8px 20px;

    font-size: 16px;
    font-weight: 500;
    border-radius: 10px;
    border: 1px solid #FF8C4B;
    width: auto;
    text-align: center;
    order: 1;
  }

  .buttonPill {
    width: auto;
  }

  #navbar-content,
  #navbar-content1 {
    height: auto;
    padding: 50px 20px;
    text-align: left;
  }

  #navbar-content .nav-item,
  #navbar-content1 .nav-item {
    padding: 5px 0px;
    border-bottom: 1px solid #00E169;
  }

  .spacer-small {
    height: 3rem;
  }

  .spacer {
    height: 4rem;
  }

  .spacer-md {
    height: 5rem;
  }

  .spacer-lg {
    height: 8rem;
  }

  .app-cta {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    padding: 20px;
  }

  .app-cta h3 {
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 30px;
    margin-right: 30px;
  }

  .overlap-container {
    position: relative;
    z-index: 10;
    margin-top: -9%;
  }

  .content-404 img {
    width: 50%;
  }


  .four-logo img {
    width: 65% !important;
    height: auto;
  }

  .intro-text {
    font-size: 26px;
    font-weight: 500;
    text-align: left;
    padding-bottom: 0px;
  }

  .tab-container .tab-content-container {
    padding: 8% 10%;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  }

  .form-progress {
    width: 65%;
  }

  a.link-large {
    font-size: 25px;
    font-weight: 600;
    text-decoration: underline;
  }

  a.link-large:hover {
    text-decoration: underline;
    text-decoration-color: var(--button-bg-color, var(--barely-blue));
  }

  .form-box .form-intro {
    border-radius: 10px 10px 0px 0px;
    padding: 2% 14%;
  }

  .form-box .form-content {
    border-radius: 0px 0px 10px 10px;
    padding: 3% 15%;
  }

  .form-content {
    padding: 3% 15%;
  }

  .content-divider-vertical {
    border-right: 1px solid #DCE7E8;
    border-bottom: none;
  }

  .vertical-line-solid-medium {
    height: 70px;
    border-left: 1px solid var(--black-blue);
    margin-left: 6px;
  }

  .vertical-line-dashed-long {
    height: 70px;
    border-left: 1px dashed var(--black-blue);
    margin-left: 6px;
  }

  .left-col-radius {
    border-radius: 25px 0px 0px 25px;
  }

  .right-col-radius {
    border-radius: 0px 25px 25px 0px;
  }

  .video-overlap {
    position: absolute;
    top: -70px;
    z-index: 10;
  }

  .equal-height-col {
    height: 100%;
  }

  /* Style the search form container */
  .search-form {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  /* Style the search input field */
  .search-form input[type="search"] {
    width: 500px;
    padding: 10px;
    border: 0.125rem solid #ccc;
    border-radius: 10px 0 0 10px;
    outline: none;
    transition: border-color 0.3s;
  }

  /* Change border color when focused */
  .search-form input[type="search"]:focus {
    border-color: var(--black-blue);
  }

  /* Style the search button */
  .search-form input[type="submit"] {
    width: auto;
    background-color: #00E169;
    color: var(--black-blue);
    padding: 10px 20px;
    border: none;
    border-radius: 0 10px 10px 0;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 0px;
  }
}


/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .fixed-top {
    background-color: transparent !important;
  }

  .navbar-dark .navbar-nav .nav-link {
    color: var(--black-blue);
  }

  .navbar-dark .navbar-nav .nav-link:hover {
    color: var(--black-blue);
  }

  .bg-nav {
    background-color: #E4E7E2 !important;
    border-bottom: 1px solid #EEEEEE;
  }

  .dropdown:hover .dropdown-menu {
    display: block;
  }

  .carousel-caption {
    bottom: 1rem !important;
  }

  .buttonLogin {
    display: inline-block;

    padding: 8px 20px;

    font-size: 16px;
    font-weight: 500;
    border-radius: 10px;
    border: 1px solid transparent;
    width: auto;
    text-align: center;
    order: 0;
  }

  #navbar-content,
  #navbar-content1 {
    height: auto;
    padding: 0px;
    text-align: left;
  }

  #navbar-content .nav-item,
  #navbar-content1 .nav-item {
    padding: 0px 20px;
    border: none;
  }

  header .header {
    margin-bottom: 142px;
  }
}


@media (min-width: 1400px) {
  .container {
    max-width: 1140px;
  }
}


@media (min-width: 1600px) {
  .container {
    max-width: 1320px;
  }

  .video-overlap {
    position: absolute;
    top: -130px;
    z-index: 10;
  }
}


@media (min-width: 1900px) {}



.fixed-top {
  transition: background-color 200ms linear;
}

.fixed-top.scrolled {
  background-color: var(--white-van) !important;
  transition: background-color 200ms linear;
}

.dropdown-item.active,
.dropdown-item:active {
  color: var(--black-blue);
  background-color: #00E169;
}

.header-mobile-blog {
  margin: 60px 0;
}

.stat-container {
	font-family: "Aptos", sans-serif;
	font-size: 5.5rem;
	line-height: 0.9;
}

.stat-container > div {
	position: relative;
    top: -0.2rem;
    margin-top: -0.4rem;
    margin-bottom: -0.4rem;
}

.stat-unit-text {
  font-size: 2.75rem;

}

.stat-unit-text::before {
  content: '\00a0 ';
}

.tab-container .nav-tabs {
  border-bottom: none;
  max-height: 60px !important;
}

.tab-container .nav-tabs .nav-link {
  background-color: #eee;
  font-size: 20px;
  font-weight: 600;
  color: #A7A7A7;
  border: 1px solid transparent;
  border-right: 1px solid #dee2e6;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  padding: 13px 5%;
  max-height: 60px !important;
  white-space: nowrap !important;
}

.tab-container .nav-tabs .nav-link.active {
  color: var(--black-blue);
  background-color: var(--white-van);
  border-color: transparent;
}

.accordion-button {
  color: var(--black-blue);
  font-weight: 600;
  font-size: 18px;
}

.accordion-button:not(.collapsed) {
  background-color: var(--white-van);
  color: var(--black-blue);
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-header {
	margin: 0!important;
}

p.intro-text-small {
  font-size: 18px;
  font-weight: 400;
  text-align: left;
}

.form-box {
  border-radius: 10px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}

.tick-icon {
  font-size: 22px;
}

.cross-icon {
  font-size: 22px;
}

.bullet-icon {
  color: #FF8C4B;
  font-size: 10px;
}

.bullet-icon-green {
  color: #00E169;
  font-size: 10px;
}

.vertical-border-orange {
  height: 85%;
  border-left: 2px solid #FF8C4B;
  margin-left: 4px;
}

.vertical-border-orange-long {
  height: 94%;
  border-left: 2px solid #FF8C4B;
  margin-left: 4px;
}

.vertical-border-green {
  height: 85%;
  border-left: 2px solid #00E169;
  margin-left: 4px;
}

.box-shadow-section-orange {
  transition: all 0.3s;
  box-shadow: 0 3px 10px rgba(var(--barely-blue-rgb), 0.3);
  padding: 15% 8%;
  margin-top: 15px;
  margin-bottom: 15px;
}

.box-shadow-section-orange:hover {
  box-shadow: 0 3px 10px rgba(var(--barely-blue-rgb), 1);
}

.bold-link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--button-bg-color, var(--barely-blue));
  text-decoration-thickness: 2px;
}

.bold-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--button-bg-color, var(--barely-blue));
  text-decoration-thickness: 2px;
}

.bold-link-dark {
  color: var(--black-blue);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--black-blue);
  text-decoration-thickness: 2px;
}

.bold-link-dark:hover {
  color: var(--black-blue);
  text-decoration: none;
}

.bold-link-orange {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #FF8C4B;
  text-decoration-thickness: 2px;
}

.bold-link-orange:hover {
  text-decoration: underline;
  text-decoration-color: #C5FF6C;
  text-decoration-thickness: 2px;
}

.bold-link-green {
  display: inline-block;
  font-size: 17px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #00E169;
  text-decoration-thickness: 2px;
}

.bold-link-green:hover {
  text-decoration: underline;
  text-decoration-color: #C5FF6C;
  text-decoration-thickness: 2px;
}

.italic-text {
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
}

.content-divider-horizontal {
  border-bottom: 1px solid #DCE7E8;
}

.bullet-icon-clear {
  color: var(--black-blue);
  font-size: 10px;
  margin-left: 2px;
}

.vertical-line-solid {
  height: 30px;
  border-left: 1px solid var(--black-blue);
  margin-left: 6px;
}

.vertical-line-solid-long {
  height: 90%;
  border-left: 1px solid var(--black-blue);
  margin-left: 6px;
}

.vertical-line-dashed {
  height: 70px;
  border-left: 1px dashed var(--black-blue);
  margin-left: 6px;
}

#accordionFlushTrack .accordion-body {
  padding-top: 0px;
}

.star-icon {
  color: var(--zippd-blue);
  font-size: 13px;
}

/* 5 star rating */
.rate {
  float: left;
  height: 46px;
}

.rate:not(:checked)>input {
  position: absolute;
  visibility: hidden;
}

.rate:not(:checked)>label {
	float: right;
  width: 0.9em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 45px;
    font-weight: 600;
}

.rate:not(:checked)>label:before {
  content: '☆ ';
}

.rate>input:checked~label {
  color: #ffc700;
}

.rate>input:checked~label:before,
.rate:not(:checked)>label:hover:before,
.rate:not(:checked)>label:hover~label:before {
  content: '★ ';
}

.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
  color: #deb217;
}

.rate>input:checked+label:hover,
.rate>input:checked+label:hover~label,
.rate>input:checked~label:hover,
.rate>input:checked~label:hover~label,
.rate>label:hover~input:checked~label {
  color: #c59b08;
}

#submit-driver-review-form #reviewSubmitBtn:disabled {
  opacity: 0.5;
}


.rank-math-breadcrumb p a {
  font-weight: 400;
  text-decoration: none;
}

.rank-math-breadcrumb p a:hover {
  text-decoration: underline;
  text-decoration-color: var(--button-bg-color, var(--barely-blue));
}

.number-step {
  display: inline-block;
  color: #00E169;
  font-weight: 700;
  font-style: normal;
  font-size: 30px;
  margin-top: -15px;
}

.intro-p {
  font-size: 18px;
}

.category-heading {
  font-size: 22px;
}

hr {
  height: 2px !important;
  color: #E6E7E8;
  opacity: 1;
  margin-top: 5px;
  margin-bottom: 25px;
}

footer {
  position: relative;
  font-size: 0.938rem;
}

.footer-row-top .nav .nav-item:first-child {
  font-weight: 600;
	margin-bottom: 0.75rem !important;
}

.text-muted {
  color: var(--black-blue) !important;
}

.navbar-dark .navbar-toggler {
  color: var(--black-blue);
  border: none;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.fa-ellipsis-h {
  font-size: 2rem;
}

.owl-theme .owl-dots .owl-dot span {
  width: 20px;
  height: 20px;
  margin: 5px 10px;
  background: transparent;
  display: block;
  transition: opacity .2s ease;
  border-radius: 30px;
  border: 0.125rem solid #00E169;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: #00E169;
  border: 0.125rem solid #00E169;
}

.bgEnergyGreen .owl-theme .owl-dots .owl-dot span {
  border: 0.125rem solid var(--black-blue);
}

.bgEnergyGreen .owl-theme .owl-dots .owl-dot.active span,
.bgEnergyGreen .owl-theme .owl-dots .owl-dot:hover span {
  background: var(--black-blue);
  border: 0.125rem solid var(--black-blue);
}

.author-info-section {
  padding-top: 40px;
  padding-bottom: 40px;
  border-top: 1px solid #E8E8E8;
  border-bottom: 1px solid #E8E8E8;
}

.author-info {
  display: flex;
}

.author-info p {
  padding: 15px 20px;
  text-align: left;
}

img.vehicle-size {
	max-width: 8.75rem;
    width: 100%;
}



.back-to-top {
  position: fixed;
  bottom: 40px;
  right: 20px;
  z-index: 30;
  background-color: var(--barely-blue);
  color: var(--black-blue);
  -webkit-filter: brightness(1.0);
  filter: brightness(1.0);
  display: none;
  line-height: 1.6;
}

.back-to-top:hover {
  scale: var(--hover-scale-up);
}








input[type="submit"] {
  transition: all 0.4s;
  -webkit-filter: brightness(1.0);
  filter: brightness(1.0);
}

input[type="submit"]:hover {
  -webkit-filter: brightness(1.13);
  filter: brightness(1.13);
}










.bgBlackBlueBorder {
  background-color: transparent;
  color: var(--black-blue);
  border: 0.125rem solid var(--black-blue);
}

.bgBlackBlueBorder:hover {
  background-color: var(--black-blue);
  color: var(--white-van);
}

.bgOrangeBorder {
  background-color: var(--white-van);
  color: var(--black-blue);
  border: 0.125rem solid #FF8C4B;
}

.bgOrangeBorder:hover {
  background-color: #FF8C4B;
}

.bgOrangeBorderSmall {
  background-color: transparent;
  color: var(--black-blue);
  border: 1px solid #FF8C4B;
}

.bgOrangeBorderSmall:hover {
  color: var(--black-blue);
}



.accordion .accordion-item {
  background-color: transparent;
}

.accordion .accordion-button {
  background-color: transparent;
}

.accordion .accordion-button:not(.collapsed) {
  background-color: transparent;
}

.faq-white .accordion-item {
  background-color: transparent;
  color: var(--white-van);
  border-bottom: 1px solid #969696;
}

.faq-white .accordion-button {
  background-color: transparent;
  color: var(--white-van);
  font-weight: 600;
}

.faq-white .accordion-button::after {
  background: none;
  content: "\f107";
  font-family: 'Font Awesome 5 Free';
  color: var(--white-van);
}

.faq-white .accordion-button:not(.collapsed) {
  background-color: transparent;
  color: var(--white-van);
}



img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.no-gutter>[class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}

.no-padding {
  padding: 0 !important;
}

.padding15 {
  padding: 15px;
}

.padding10Percent {
  padding: 10%;
}

.padding7Percent {
  padding: 7%;
}

.padding6Percent {
  padding: 6%;
}

.padding4Percent {
  padding: 4% 6%;
}

.radius10 {
  border-radius: 10px;
}

.radius25 {
  border-radius: 25px !important;
}

.radius-bottom {
  border-radius: 0px 0px 25px 25px;
}

.orange-border {
  border: 1px solid #FF8C4B;
}

.grey-border {
  border-top: 2px solid #E4E7E2;
  border-bottom: 2px solid #E4E7E2;
}

.grey-border-bottom {
  border-bottom: 2px solid #E4E7E2;
}

.grey-border-all {
  border: 0.125rem solid #E4E7E2;
}

.small-text {
  font-size: 11px;
}


iframe {
  width: 100%;
  margin-bottom: 30px;
}

.fancybox-skin {
  background-color: var(--white-van);
}

.videoStretch {
  width: 100%;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

.carousel-caption h1 {
  margin-bottom: 30px;
}

.heading-caption {
  bottom: 33% !important;
  z-index: 10;
}

.heading-caption30 {
  bottom: 30% !important;
  z-index: 10;
}

.heading-caption37 {
  bottom: 37% !important;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 40rem;
  background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.4));
}

.carousel-item>img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 40rem;
  object-fit: cover;
  z-index: -1;
}


/* RESPONSIVE CSS FOR CAROUSEL
-------------------------------------------------- */

@media (min-width: 40em) {

  /* Declare heights because of positioning of img element */
  .carousel-item {
    height: 40rem;
    background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.4));
  }

  .carousel-item>img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 40rem;
    object-fit: cover;
    z-index: -1;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.4;
  }
}


@media (max-width: 545px) {
  .tab-container .nav-tabs .nav-link {
    min-width: 140px;
  }
}


/* DIV CONTAINER PADDING ON MOBILE
-------------------------------------------------- */

@media (max-width: 575px) {
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .padding-small {
    padding: 0 10px;
  }
}


/* CUSTOM CONTACT FORM STYLES 
-------------------------------------------------- */

.contact-form .form-label {
  margin-bottom: 2px;
}

.contact-form .form-control {
  color: var(--black-blue);
  background-color: #F2F6F9;
  padding: 1rem;
  border: 1px solid #F2F6F9;
  transition: all 0.1s;
}

.contact-form .form-control:focus {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(61, 230, 64, 1);
}

.contact-form .form-control::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #A7A7A7;
  opacity: 1;
  /* Firefox */
}

.contact-form .form-control:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #A7A7A7;
}

.contact-form .form-control::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #A7A7A7;
}

.contact-form .input-group-text {
  background-color: #F2F6F9;
  border: 1px solid #F2F6F9;
}

.contact-form .form-select {
  color: var(--black-blue);
  background-color: #F2F6F9;
  padding: 1rem;
  border: 1px solid #F2F6F9;
  transition: all 0.1s;
}

.contact-form .form-select:focus {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(61, 230, 64, 1);
}

.contact-form .form-radio-label {
  display: block;
  margin-top: 25px;
  margin-bottom: 10px;
}

.contact-form .form-check-input {
  cursor: pointer;
	margin-top: 0.1em;
}

.contact-form .form-check-input:checked {
  background-color: var(--black-blue);
  border-color: var(--black-blue);
}

.contact-form .form-check-input:focus {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(61, 230, 64, 1);
}

.contact-form .form-check-input:active {
  filter: none;
}


/* password strength checker styles */
.js-hidden {
  display: none;
}

.password-strength-visibility {
  padding: 1.1rem 0.75rem;
}

.btn-outline-secondary {
  color: var(--black-blue);
  border-color: var(--black-blue);
}

.btn-outline-secondary:hover {
  background: var(--black-blue);
}


/* VEHICLE SIZES TABLE
-------------------------------------------------- */

.table-sticky {
  padding-bottom: 1rem;
  margin-bottom: 0;
}

.table-sticky thead th {
  font-size: 12px;
}

.table-sticky th:first-child,
.table-sticky td:first-child {
  position: sticky;
  left: 0;
  background-color: #F2F6F9;
}

.table-sticky th {
  vertical-align: middle;
}

.table-sticky td {
  white-space: nowrap;
  vertical-align: middle;
}


/* DELIVERY TRACKING TEMPLATE
-------------------------------------------------- */

.page-template-template-track-landing #live-tracking-map {
  height: 270px;
}

.page-template-template-track-landing #live-tracking-status.on {
  text-transform: uppercase;
  color: #1baa1e;
}

.page-template-template-track-landing #live-tracking-status.off {
  color: #ff0000;
}

.page-template-template-track-landing #live-tracking-status.connecting {
  color: #909090;
}

.page-template-template-track-landing .sender-logo {
  object-fit: contain;
	max-height: min(135px, 25vw);
    max-width: min(355px, 66vw);
	background-color: var(--white-van);
}

.page-template-template-track-landing .overlap-container {
  margin-top: -3rem;
}

.page-template-template-track-landing .driver-photo {
  border-radius: 50%;
  width: 118px;
  height: 118px;
  object-fit: cover;
}

.page-template-template-track-landing .section-heading {
    font-weight: 500;
}

.page-template-template-track-landing .accordion-item,
.page-template-template-track-landing .accordion-item:last-child {
	border: none;
    border-bottom: 2px solid var(--barely-blue);
}

.page-template-template-track-landing .accordion-item:first-child {
    border-top: 2px solid var(--barely-blue);
}

.page-template-template-track-landing .accordion-button:not(.collapsed) {
	box-shadow: none;
}

@media (max-width: 575px) {
  .page-template-template-track-landing .container-sm {
    padding: 0;
  }

  .page-template-template-track-landing .radius10 {
    border-radius: 0;
  }

  .page-template-template-track-landing .overlap-container {
    margin-top: 0;
  }

  .page-template-template-track-landing .section-heading {
    margin-left: 6%;
    margin-right: 6%;
  }
}

@media (min-width: 768px) {
  .page-template-template-track-landing .sender-logo {
    max-height: 170px;
	  max-width: 450px;
  }

  .page-template-template-track-landing h4 {
    font-size: 28px;
  }

  .page-template-template-track-landing .overlap-container {
    margin-top: -4rem;
  }
}