/* Portions extracted from w3.css 4.13 June 2019 by Jan Egil and Borge Refsnes */
html {
  box-sizing: border-box;
  overflow-x: hidden
}

*,
*:before,
*:after {
    box-sizing: inherit
}

/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

footer,
header {
    display: block
}

a {
    background-color: transparent;
}

a:active,
a:hover {
    outline-width: 0
}

img {
    border-style: none
}
/* End extract */

html,
body {
  font-family: Verdana, sans-serif;
  font-size: 16px;
  line-height: 1.5
}

h1 {
  font-size: 3em
}

h2 {
  font-size: 2.25em
}

h3 {
  font-size: 1.5em
}

h4 {
  font-size: 1.25em
}

h5 {
  font-size: 1.125em
}

h6 {
  font-size: 1em
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  margin: 0.625em 0
}

/* Minor additional hyperlink styling */
a {
  color: inherit;
  text-decoration-line: none;
}

a:hover {
  opacity: 75%
}

.ftsi-navbar-block .ftsi-navbar-item,
.ftsi-navbar .ftsi-navbar-menu-button,
.ftsi-navbar .ftsi-navbar-button-right,
.ftsi-navbar .ftsi-navbar-button-left,
.ftsi-pill-button,
.ftsi-button {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: auto;
  border: none;
  display: inline-block;
  outline: none;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-color: inherit;
  text-align: center;
  cursor: pointer;
  white-space: nowrap
}

/* Create a navbar at the top of the page */
.ftsi-navbar-top {
  position: fixed;
  width: 100%;
  z-index: 1
}

/* Style the navigation bar */
.ftsi-navbar {
  width: 100%;
  overflow: hidden;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
}

.ftsi-navbar .ftsi-navbar-menu-button {
  padding: 0.5em 1em 0.5em;
}

.ftsi-navbar .ftsi-navbar-button-left {
  padding: 0.172em 0.5em;
  float: left;
  color: black !important;
  background-color: white !important
}

.ftsi-navbar .ftsi-navbar-button-right {
  padding: 0.5em 1em;
}

.ftsi-navbar-block,
.ftsi-navbar .ftsi-navbar-menu-button,
.ftsi-navbar .ftsi-navbar-button-right {
  float: right
}

.ftsi-navbar-block {
  display: none;
}

.ftsi-navbar-block .ftsi-navbar-item {
  display: block;
  text-align: right;
  width: 100%;
  float: none;
  outline: none;
  margin: 0.5em 1em 0.5em 0em;
}

.ftsi-navbar .ftsi-navbar-button-left:hover,
.ftsi-navbar .ftsi-navbar-menu-button:hover,
.ftsi-navbar .ftsi-navbar-button-right:hover,
.ftsi-navbar-block .ftsi-navbar-item:hover,
.ftsi-pill-button:hover,
.ftsi-button:hover {
  color: #223a5e !important;
  background-color: #eef2f9 !important
}

.ftsi-navbar-block,
.ftsi-navbar,
.ftsi-pill-button,
.ftsi-button,
.ftsi-section-title {
  color: white !important;
  background-color: #223a5e !important;
}

.ftsi-show {
    display: block !important
}

.ftsi-row:before,
.ftsi-row:after,
.ftsi-header:before,
.ftsi-header:after,
.ftsi-section:before,
.ftsi-section:after,
.ftsi-subsection:before,
.ftsi-subsection:after,
.ftsi-navbar:before,
.ftsi-navbar:after,
.ftsi-contact-icon:before,
.ftsi-contact-icon:after,
.ftsi-contact-text:before,
.ftsi-contact-text:after,
.ftsi-panel:before,
.ftsi-panel:after {
  content: "";
  display: table;
  clear: both
}

.ftsi-section,
.ftsi-heading {
  padding: 3em 1em 0em
}

/* Minimal styling for a standard page header */
.ftsi-header {
  text-align: center !important;
  padding-top: 2.6em
}

.ftsi-pill-button {
  margin: 1em;
  padding: 0.75em 1.5em !important;
  border: 1px solid #ccc !important;
  border-radius: 2em
}

.ftsi-responsive-image {
  max-width: 100%;
  height: auto
}

.ftsi-section,
.ftsi-subsection,
.ftsi-title,
.ftsi-section-title {
  margin-left: auto;
  margin-right: auto;
  max-width: 1140px
}

.ftsi-subsection,
.ftsi-section-title {
  padding: 0.75em 1.5em !important
}

.ftsi-subtitle {
  font-size: 1.5em
}

.ftsi-row {
  padding: 1em
}

/* Style panel */
.ftsi-panel {
  text-align: center;
  padding: 1em 0em;
}

.ftsi-product-card-image,
.ftsi-panel-image {
  padding: 1em 1em 1em;
  text-align: center !important
}

.ftsi-product-card-text,
.ftsi-panel-text {
  padding: 0.1em 1em;
  text-align: left !important
}

/* Style a pricing card */
.ftsi-pricing-card {
  text-align: center;
  border-radius: 1em;
}

/* Style a product card */
.ftsi-pricing-card,
.ftsi-product-card {
  margin: 1em;
  box-shadow: 0 0.125em 0.34em 0 rgba(0, 0, 0, 0.2), 0 0.0625em 0.625em 0 rgba(0, 0, 0, 0.19)
}

.ftsi-pricing-card:hover,
.ftsi-product-card:hover {
  box-shadow: 0 0.25em 0.625em 0 rgba(0, 0, 0, 0.2), 0 0.25em 1.25em 0 rgba(0, 0, 0, 0.19)
}

/* Style contact links*/
.ftsi-contact-icon,
.ftsi-contact-text {
  display: table-cell;
  padding: 0.01em 0.5em;
}

.ftsi-contact-icon {
  vertical-align: top;
}

.ftsi-contact-text {
  vertical-align: middle;
}

.ftsi-2-column-small {
  float: left;
  width: 49.99999%
}

/* Styling for unordered lists*/
.ftsi-ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.ftsi-ul li {
  font-size: 0.75em;
  padding: 0.5em 1em;
  border-bottom: 0.0625em solid #ddd
}

.ftsi-ul li.ftsi-heading {
  font-size: 1em
}

.ftsi-ul li:last-child {
  border-bottom: none
}

/* Styling for the Fleet Technology Services Logo */
.ftsi-logo {
  text-align: center
}

.ftsi-logo-text {
  font-size: 1.5em
}

.ftsi-quote-panel {
  display: block;
  width: 100%;
  border-radius: 0.5px;
  width: 100%;
  box-shadow: 0 0.25em 0.625em 0 rgba(0, 0, 0, 0.2), 0 0.25em 1.25em 0 rgba(0, 0, 0, 0.19)
}

.ftsi-quote-icon {
  font-size: 2em;
  text-align: left;
}
  
.ftsi-quote-text {
  font-size: 1.25em;
  text-align: left;
}

.ftsi-image-container{
  position: relative;
  padding: 1em;
}

.ftsi-border {
   border: .0625em solid #ccc;
}

@media (min-width:601px) {
  .ftsi-4-column-medium {
    float: left;
    width: 24.99999%
  }

  .ftsi-2-column-medium {
    float: left;
    width: 49.99999%
  }

  .ftsi-3-column {
    float: left;
    width: 33.33333%
  }

  .ftsi-panel {
    padding: 2em;
  }
}

@media (min-width:993px) {
  .ftsi-navbar-menu-button {
    display: none !important
  }

  .ftsi-3-column-large {
    float: left;
    width: 33.33333%
  }

  .ftsi-quote-icon,
  .ftsi-6-column-large {
    width: 16.66666%
  }

  .ftsi-quote-panel,
  .ftsi-twothirds-column-large {
    margin-left: auto;
    margin-right: auto;
    width: 66.66666%
  }
  
  .ftsi-quote-icon {
    float: left;
    display:inline-block;  
  }
  
  .ftsi-quote-text {
    float: left;
    display: inline-block;
    width: 83.33333%;
  }
}

@media (max-width:1205px) {
  .ftsi-section,
  .ftsi-subsection,
  .ftsi-heading,
  .ftsi-section-title {
    max-width: 95%
  }
}

@media (max-width:600px) {
  .ftsi-navbar .ftsi-navbar-button-right {
    display: none !important
  }

  .ftsi-contact-icon,
  .ftsi-contact-text {
    display: block;
    width: 100% !important
  }

  /* Styling for the Fleet Technology Services Logo */
  .ftsi-logo {
    margin: 1em 0em
  }

  .ftsi-hide-small {
      display: none !important
  }

  .ftsi-panel {
    margin: 1em 0em
  }

  .ftsi-quote-panel {
    display: block;
    width: 100%
  }

}

@media (max-width:992px) and (min-width:601px) {
  .ftsi-navbar-menu-button {
    display: none !important
  }

  .ftsi-quote-panel {
    margin-left: auto;
    margin-right: auto;
    width: 66.66666%
  }
  
  .ftsi-quote-icon {
    float: left;
    display:inline-block;  
    width: 16.66666%;
  }
  
  .ftsi-quote-text {
    float: left;
    display: inline-block;
    width: 83.33333%;
  }
}

@media (max-width:992px) {
  .ftsi-section,
  .ftsi-subsection,
  .ftsi-heading,
  .ftsi-section-title {
    max-width: 100%
  }
}

.w3-theme-light {
  color: black !important;
  background-color: white !important
}

.w3-theme-dark {
  color: white !important;
  background-color: #223a5e !important
}

.w3-theme-action {
  color: #eef2f9 !important;
  background-color: #223a5e !important
}

.w3-theme {
  color: white !important;
  background-color: steelblue !important
}

.w3-text-theme {
  color: #223a5e !important
}

.w3-border-theme {
  border-color: #223a5e !important
}

.w3-hover-theme:hover {
  color: #223a5e !important;
  background-color: #eef2f9 !important
}

.w3-hover-text-theme:hover {
  color: #eef2f9 !important
}

.w3-hover-border-theme:hover {
  border-color: #eef2f9 !important
}

.ft-theme {}

.ft-theme-light {}

.ft-theme-dark {}

.ft-text-theme {}

.ft-text-theme-light {
  color: #eef2f9
}

.ft-text-theme-dark {}

.ft-border-theme {}

.ft-border-theme-light {}

.ft-border-theme-dark {}

.ft-hover-theme {}

.ft-hover-theme-light {}

.ft-hover-theme-dark {}

.ft-hover-text-theme:hover {}

.ft-hover-text-theme-light:hover {}

.ft-hover-text-theme-dark:hover {}

.ft-hover-border-theme:hover {}

.ft-hover-border-theme-light:hover {}

.ft-hover-border-theme-dark:hover {}

/* Style the buttons that are used to open and close the accordion panel */
.ftsi-accordion {
  background-color: white;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.ftsi-active,
.ftsi-accordion:hover {
  color: white;
  background-color: #223a5e;
}

.ftsi-accordion:after {
  content: '\02C4';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px
}

.ftsi-active:after {
  content: "\02C5";
  color: white
}

/* Style the accordion panel. Note: hidden by default */
.ftsi-accordian-panel {
  padding: 0 18px;
  border: 1px solid lightgray;
  background-color: white;
  display: none;
  overflow: hidden
}