/* Button colours -- change these two values to restyle every
   primary button on the site.
   #007a37 = Wakefield Connect green, darkened to meet WCAG AA / AODA.
             Connect itself uses #009343, but its button labels are
             18.7px weight 700, which WCAG counts as "large text" (3:1).
             These labels are 16px normal weight and need 4.5:1 --
             #009343 gives only 4.00:1, #007a37 gives 5.47:1. Do not
             raise it back to #009343 without also enlarging the labels.
   #02503a = Wakefield corporate dark green (the pre-2026 colour) */
:root {
  --wf-btn-bg: #007a37;
  --wf-btn-bg-hover: #00602b;
  --wf-btn-fg: #fff;
  --wf-btn-radius: 2rem; }

@font-face {
  font-family: 'Castrol Sans Consensed';
  src: url(../fonts/castrolsanscon-regular-webfont.eot);
  src: url(../fonts/castrolsanscon-regular-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/castrolsanscon-regular-webfont.woff) format("woff"), url(../fonts/castrolsanscon-regular-webfont.ttf) format("truetype"), url(../fonts/castrolsanscon-regular-webfont.svg#castrolsanscon-regularregular) format("svg");
  font-weight: normal;
  font-style: normal; }
.green-corp {
  color: #02503a; }

body {
  font-family: Helvetica,Arial,sans-serif;
  font-size: 16px;
  line-height: 125%; }

.container {
  max-width: 1150px; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Castrol Sans Consensed",Helvetica,Arial,sans-serif; }

.content_title {
  text-align: center;
  margin: 0 auto;
  font-family: "Castrol Sans Consensed",Helvetica,Arial,sans-serif;
  font-size: 1.5em;
  line-height: 115%;
  width: 90%;
  color: #02503a; }

.content_subtitle {
  text-align: center;
  margin: 0 auto;
  font-family: "Castrol Sans Consensed",Helvetica,Arial,sans-serif;
  font-size: 1.2em;
  line-height: 115%;
  width: 90%;
  color: #4f5050; }

.carousel-item h3 {
  font-size: 1.25em; }

@media (max-width: 767.98px) {
  .content_title, .content_subtitle {
    width: 100%; } }
a, a:hover, a:active, a:visited {
  color: #02503a; }

a:hover > button {
  cursor: pointer; }

p > a, ol li a {
  text-decoration: underline;
  font-weight: bold; }

.zoom:hover img {
  -ms-transform: scale(1.025);
  /* IE 9 */
  -webkit-transform: scale(1.025);
  /* Safari 3-8 */
  transform: scale(1.025); }

.zoom img {
  transition: transform .5s; }

.content-image {
  border: 1px solid rgba(0, 0, 0, 0.5); }

/* ----------------------------------------------------------------- */
/* header and navigation */
/* ----------------------------------------------------------------- */
.header {
  background: #02503a;
  width: 100%;
  height: 170px; }
  .header .container {
    height: 170px;
    position: relative; }
  .header .wakefield_brand {
    position: relative;
    height: 120px;
    float: none;
    padding: 1em 0 1em 1em; }
    .header .wakefield_brand img {
      max-height: 100%; }
  @media (max-width: 767.98px) {
    .header .wakefield_brand {
      width: 50%;
      float: left;
      height: 90px;
      margin-left: 10px;
      margin-top: -5px; } }
  @media (max-width: 767.98px) {
    .header .navbar-toggler {
      position: absolute;
      top: -55px;
      right: 15px; } }
  @media (max-width: 767.98px) {
    .header .navbar, .header .navbar.navbar-dark {
      width: 100%;
      padding-top: 0;
      padding-bottom: 0;
      position: relative !important; }
      .header .navbar li, .header .navbar .dropdown-menu a, .header .navbar .dropdown-menu a:hover, .header .navbar.navbar-dark li, .header .navbar.navbar-dark .dropdown-menu a, .header .navbar.navbar-dark .dropdown-menu a:hover {
        border-bottom: none !important;
        border-left: none !important; }
      .header .navbar .dropdown-menu, .header .navbar.navbar-dark .dropdown-menu {
        -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
      .header .navbar li:last-child, .header .navbar.navbar-dark li:last-child {
        margin-bottom: 15px; } }
  .header .navbar, .header .navbar.navbar-dark {
    position: absolute;
    left: 0;
    bottom: 0;
    padding-bottom: 0;
    padding-top: 0; }
    .header .navbar .dropdown-item:hover, .header .navbar .dropdown-item:focus, .header .navbar.navbar-dark .dropdown-item:hover, .header .navbar.navbar-dark .dropdown-item:focus {
      background: inherit; }
    .header .navbar li, .header .navbar.navbar-dark li {
      padding-left: .5em;
      padding-right: .5em; }
      .header .navbar li a, .header .navbar.navbar-dark li a {
        font-family: "Castrol Sans Consensed",Helvetica,Arial,sans-serif;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
        font-size: .9em; }
        .header .navbar li a:hover, .header .navbar.navbar-dark li a:hover {
          color: #fff; }
        .header .navbar li a.sub, .header .navbar.navbar-dark li a.sub {
          padding-left: 2.75em; }
        .header .navbar li a.sub2, .header .navbar.navbar-dark li a.sub2 {
          padding-left: 5em; }
      .header .navbar li.active, .header .navbar.navbar-dark li.active {
        border-bottom: .5em solid white; }
        .header .navbar li.active > a, .header .navbar.navbar-dark li.active > a {
          color: #fff; }
    .header .navbar .navbar-toggler, .header .navbar.navbar-dark .navbar-toggler {
      color: white;
      border-color: rgba(255, 255, 255, 0.5); }
    .header .navbar .navbar-toggler-icon, .header .navbar.navbar-dark .navbar-toggler-icon {
      background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(255, 255, 255, 0.75)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>"); }
    .header .navbar .dropdown-menu, .header .navbar.navbar-dark .dropdown-menu {
      margin-top: 0;
      border-radius: 0;
      padding-top: .5em;
      padding-bottom: .75em;
      border: 0;
      background: #02503a; }
      .header .navbar .dropdown-menu a, .header .navbar.navbar-dark .dropdown-menu a {
        color: rgba(255, 255, 255, 0.6);
        border-left: 5px solid transparent; }
        .header .navbar .dropdown-menu a:hover, .header .navbar.navbar-dark .dropdown-menu a:hover {
          background: #02503a;
          color: #fff;
          border-left: 5px solid white; }
      .header .navbar .dropdown-menu .dropdown-item.active, .header .navbar.navbar-dark .dropdown-menu .dropdown-item.active {
        background: #02503a;
        color: #fff;
        border-left: 5px solid white; }
  @media (min-width: 768px) {
    .header .connect_callout {
      display: table !important; } }
  .header .connect_callout {
    position: absolute !important;
    right: 0;
    top: 0;
    height: 170px;
    width: 420px;
    background: url(../images/hdr_connect_bck.png) no-repeat;
    background-position: 100% 0%;
    background-size: cover;
    display: table; }
    .header .connect_callout .connect_text {
      display: table-cell;
      vertical-align: top;
      text-align: right;
      width: 70%;
      color: #fff;
      font-size: 1em;
      line-height: 110%;
      font-family: "Castrol Sans Consensed",Helvetica,Arial,sans-serif;
      padding-top: 20px; }
      .header .connect_callout .connect_text img {
        max-width: 170px; }
    .header .connect_callout .connect_button {
      display: table-cell;
      width: 30%;
      vertical-align: middle;
      text-align: center; }
      .header .connect_callout .connect_button img {
        max-width: 120px; }

@media (max-width: 767.98px) {
  .header {
    min-height: 90px;
    height: auto !important; }
    .header .container {
      min-height: 90px;
      height: auto !important;
      padding-left: 0;
      padding-right: 0; } }
.footer {
  background: #dadbdc; }
  .footer p {
    font-size: .7em;
    color: rgba(0, 0, 0, 0.3) !important;
    line-height: 120%; }
  .footer a {
    color: rgba(0, 0, 0, 0.3) !important;
    text-decoration: underline; }
  .footer img {
    opacity: 0.5; }
  .footer .footer_social {
    width: 30px;
    margin: 0 .5em !important;
    opacity: 0.25; }
    .footer .footer_social:first-child {
      margin-left: 0; }
    .footer .footer_social:last-child {
      margin-right: 0; }
    .footer .footer_social:hover {
      opacity: .5; }

/* carousel */
.carousel {
  border: 1px solid rgba(0, 0, 0, 0.5); }
  .carousel .carousel-caption-content {
    width: 100%;
    height: 100px;
    background: #343434; }
  .carousel .carousel-caption {
    width: calc( 100% );
    left: 0;
    bottom: 0;
    text-align: left;
    padding: 5px 50px;
    height: 80px; }
    .carousel .carousel-caption h5, .carousel .carousel-caption p {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
    .carousel .carousel-caption p {
      color: rgba(255, 255, 255, 0.8); }
    .carousel .carousel-caption a {
      color: #fff !important; }
  .carousel .carousel-control-holder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; }
    .carousel .carousel-control-holder .carousel-control-prev, .carousel .carousel-control-holder .carousel-control-next {
      pointer-events: all; }
  .carousel .carousel-control-prev, .carousel .carousel-control-next {
    width: 45px;
    height: 100px;
    position: absolute;
    bottom: 0px;
    margin-top: auto; }

.d-flex {
  display: flex !important;
  flex-wrap: wrap; }

.img-wrapper {
  border: 1px solid rgba(0, 0, 0, 0.5); }

.card {
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  max-width: 100%; }
  .card .img-wrapper {
    border: 1px solid rgba(0, 0, 0, 0.5); }
  .card .card-img-top {
    border-radius: 0; }
  .card .card-img-product {
    max-width: 66%;
    margin: 0 auto; }
  .card .card-body {
    padding: 1em 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1; }
  .card .img-wrapper {
    overflow: hidden; }

.hr_sep {
  clear: both;
  height: 1px;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.5);
  border-top: none;
  background: none; }
  .hr_sep.light {
    border-bottom: 1px dotted rgba(255, 255, 255, 0.25); }

.shadow {
  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); }

/* breadcrumbs */
.breadcrumb {
  background: none;
  border-radius: 0;
  padding: 0;
  margin: 20px 0 5px 0;
  text-decoration: none !important; }
  .breadcrumb li, .breadcrumb li h1 {
    font-size: 21px !important;
    font-family: "Castrol Sans Consensed",Helvetica,Arial,sans-serif;
    font-weight: 500;
    color: #02503a;
    line-height: 125%; }
    .breadcrumb li a, .breadcrumb li h1 a {
      color: #999999;
      cursor: pointer;
      text-decoration: none !important; }
    .breadcrumb li.active, .breadcrumb li h1.active {
      color: #02503a; }
      .breadcrumb li.active a, .breadcrumb li h1.active a {
        color: #02503a; }
    .breadcrumb li.inactive, .breadcrumb li h1.inactive {
      color: #999999; }

.breadcrumb > li + li:before {
  content: "/ ";
  padding: 0 5px;
  color: #999999; }

/* ----------------------------------------------------------------- */
/* buttons                                                           */
/* Pill style, matching the buttons on wakefieldconnect.ca.           */
/* Changed 2026: flat fill (was a gradient), 2rem radius (was         */
/* 3.2px), solid border (was "outset").                               */
/* Label casing stays UPPERCASE -- the wakefieldcanada.ca             */
/* convention -- and horizontal padding stays 1em. Widening it        */
/* wraps "COMPLETE DETAILS" onto two lines in the card grid.          */
/* The :not(:disabled):not(.disabled):active selector is required --  */
/* Bootstrap 4 uses that high-specificity form for active states, and */
/* without it the button reverts to the old colour when clicked.      */
/* ----------------------------------------------------------------- */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--wf-btn-bg);
  background-image: none;
  background-repeat: repeat-x;
  border: 1px solid var(--wf-btn-bg);
  border-radius: var(--wf-btn-radius);
  color: var(--wf-btn-fg);
  text-transform: uppercase;
  padding: .5rem 1em;
  font-size: 1em;
  font-weight: normal;
  line-height: 1.25;
  font-family: "Castrol Sans Consensed",Helvetica,Arial,sans-serif;
  box-shadow: none;
  transition: background-color .2s ease, border-color .2s ease; }

.btn-primary:hover {
  background-color: var(--wf-btn-bg-hover);
  border-color: var(--wf-btn-bg-hover); }

.btn-primary:focus-visible {
  outline: 2px solid var(--wf-btn-bg);
  outline-offset: 2px; }

/* Cookie consent banner buttons ("Accept" / "Manage cookie
   preferences"). These are the only .btn-success on the site.
   Delete this block to leave the banner on stock Bootstrap green.
   Keep both buttons identical in weight -- PIPEDA and Quebec Law 25
   expect declining or managing consent to be as prominent as
   accepting it. */
.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success:not(:disabled):not(.disabled):active {
  background-color: var(--wf-btn-bg);
  background-image: none;
  border: 1px solid var(--wf-btn-bg);
  border-radius: var(--wf-btn-radius);
  color: var(--wf-btn-fg);
  font-family: "Castrol Sans Consensed",Helvetica,Arial,sans-serif;
  box-shadow: none;
  transition: background-color .2s ease, border-color .2s ease; }

.btn-success:hover {
  background-color: var(--wf-btn-bg-hover);
  border-color: var(--wf-btn-bg-hover); }

.btn-success:focus-visible {
  outline: 2px solid var(--wf-btn-bg);
  outline-offset: 2px; }

/* Buttons that are links. The site-wide rule
   `a, a:hover, a:active, a:visited { color: #02503a; }` has specificity
   (0,1,1) on :visited, which outranks a bare class (0,1,0) -- so an <a>
   styled as a button turns dark once its target has been visited. The
   cookie banner's "Manage cookie preferences" does exactly that. These
   selectors are (0,2,0) and put the button colour back. Hover and active
   are already covered by the blocks above. */
.btn-primary:visited,
.btn-success:visited {
  color: var(--wf-btn-fg); }

.jumbotron-image {
  background-repeat: no-repeat;
  background: 50% 50%; }

.jumbotron {
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, 0.5);
  background-size: cover;
  background-repeat: no-repeat; }

@media (max-width: 767.98px) {
  .jumbotron.jumbotron-image {
    height: 200px !important; } }
/* forms */
form label {
  text-transform: uppercase;
  font-family: "Castrol Sans Consensed",Helvetica,Arial,sans-serif;
  color: #02503a; }

iframe {
  border: 1px solid #999999; }

.language-toggle {
  position: absolute;
  top: 62px;
  left: 275px; }
  .language-toggle select, .language-toggle select:active {
    font-size: .8em;
    border-color: #aaa;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.6) !important;
    color: #000;
    transition: all .15s; }
    .language-toggle select:hover, .language-toggle select:active:hover {
      background: white !important;
      color: #000; }

@media (max-width: 767.98px) {
  .language-toggle {
    display: none; } }
.language-toggle-mobile select {
  width: 80px;
  font-size: 14px; }
.language-toggle-mobile li {
  margin-bottom: 0 !important; }

@media (min-width: 768px) {
  .language-toggle-mobile {
    display: none; } }
table thead th {
  background-color: #02503a;
  color: #fff; }

.product-background-col {
  text-align: center; }

@media (max-width: 767.98px) {
  .product-background-col {
    text-align: center; }
    .product-background-col img {
      margin: 0 auto !important;
      max-width: 75%; } }
.spec-holder {
  display: none; }

.spec-table {
  margin-bottom: 1.5em; }
  .spec-table th, .spec-table td {
    font-size: .9em;
    text-align: center;
    padding: .5em; }
  .spec-table th {
    text-align: center; }
  .spec-table tr td:first-child, .spec-table tr th:first-child {
    text-align: left; }
  .spec-table.spec-table-multilhead thead tr th {
    border-bottom-width: 0 !important;
    border-top-width: 0 !important; }
  .spec-table tr.highlight, .spec-table td.highlight {
    background: #83a89d !important;
    color: #fff; }

.footnote {
  font-weight: bold;
  font-size: .75em;
  float: right; }

.anchor-link {
  float: right;
  text-transform: uppercase;
  font-weight: bold;
  font-size: .9em; }



.modal-bio-pic {
  width: 100%;
  padding-bottom: 100%;
  /*border-radius: 50%;*/
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.4);
  margin-bottom: 1rem; }

.team-modal .modal-dialog {
  max-width: 550px; }
.team-modal .modal-body {
  min-height: 250px;
  margin:.5rem auto;
  padding-bottom: 2rem; }
.team-modal .modal-bio-holder {
  display: table-row;
  width: 100%; }
  .team-modal .modal-bio-holder .modal-bio-pic-holder {
    display: table-cell;
    width: 40%;
    padding: .25rem 1.25rem 0 .75rem;
    vertical-align: top; }
  .team-modal .modal-bio-holder .modal-bio-content {
    vertical-align: top;
    padding-right: 1rem; }


.carousel-careers{
  border: 0px solid rgba(0, 0, 0, 0.5);
}
.carousel-careers .carousel-inner{
  
}
.carousel-careers .carousel-item{
  padding-top:1rem;
  padding-bottom:1rem;
  /*background-image: url(../images/careers_quote_bck.gif);*/
  background-repeat: repeat-x;
  background-size:contain;
  background-position:center;
}
.careers-quote-table-holder{
  display:table;
  height:100%;
  width:80%;
  margin-left:10%;
  margin-right:10%;
  min-height:300px;
}
.careers-quote-table{
  display: table-cell;
  vertical-align: middle;
  text-align:center;
  height:100%;
  width:100%;
}
.carousel-careers .carousel-item .careers-quote-holder{
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
  padding:1rem 1rem;
  text-align:center;
  background-color:#eef0f1;
  border-radius:10px;
  color:#02503a;
  position:relative;

  /*box-shadow: 5px 5px 20px rgba(255,255,255,0.5); 
  -webkit-box-shadow: 5px 5px 20px rgba(255,255,255,0.5); 
  -moz-box-shadow: 5px 5px 20px rgba(255,255,255,0.5); */
}
@media (max-width: 767.98px) {
  .carousel-careers .carousel-item .careers-quote-holder{
    max-width:100%;
  }
}
.carousel-careers .carousel-item .careers-quote-holder .careers-quote{
  width:100%;
  height:100%;
}
.carousel-careers .carousel-item .careers-quote-holder .careers-quote .careers-text{
  font-size:1.2rem;
  font-family: "Castrol Sans Consensed",Helvetica,Arial,sans-serif; 
}
.carousel-careers .carousel-item .careers-quote-holder .quote-arm {
    position: absolute;
    width: 1rem;
    height: 1rem;
    right: 1rem;
    margin-top: .9rem;
    background: #eef0f1;
    content: '';
    clip-path: polygon(0 0, 100% 0, 0 100%);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
.carousel-careers .carousel-control-prev, .carousel-careers .carousel-control-next {
  color:#02503a !important;
  bottom: calc( 50% - 17.5px );
  height:35px !important;
  width:35px !important;
  border-radius:22.5px;
  overflow:hidden;
  padding:1px;
  background-color:#ffffff !important;
}
.carousel-careers .carousel-control-prev{
  left:10px;
}
.carousel-careers .carousel-control-next{
  right:10px;
}


.carousel-careers .carousel-control-prev-icon {
  width:20px;
  height:20px;
  margin-left:-2px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2302503a' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"); 
}

.carousel-careers .carousel-control-next-icon {
  margin-right:-2px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2302503a' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"); 
}