:root{
  --green-color:rgba(73,133,0,1);
  --blue-color:#2671a6;
  --sec-color:#2671a6;
}
body.safety-environment{--sec-color:#437a00;}
body.get-connected{--sec-color:#695eae;}
body.already-connected{--sec-color:#bc105b;}

#fields-optIn-field{
  display: inline-block;

}

#fields-optIn-field .form__label{
   
}

#fields-optIn-field .form__field{
    display: inline;
}
#fields-optIn-field .checkbox{  display: none; }
#fields-optIn-field .fake-checkbox-label{ margin-right: 10px; }

#fields-optIn-field.has-errors{ display: block; }
#fields-optIn-field .errors li{ color: #c00!important;   }



#mcontent table { font-size: 1.5rem; }


.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
}

.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}

.table tbody + tbody {
  border-top: 2px solid #dee2e6;
}

.table-sm th,
.table-sm td {
  padding: 0.3rem;
}

.table-bordered {
  border: 1px solid #dee2e6;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #dee2e6;
}

.table-bordered thead th,
.table-bordered thead td {
  border-bottom-width: 2px;
}

.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
  border: 0;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

.table-hover tbody tr:hover {
  color: #212529;
  background-color: rgba(0, 0, 0, 0.075);
}

.table-primary,
.table-primary > th,
.table-primary > td {
  background-color: #b8daff;
}

.table-primary th,
.table-primary td,
.table-primary thead th,
.table-primary tbody + tbody {
  border-color: #7abaff;
}

.table-hover .table-primary:hover {
  background-color: #9fcdff;
}

.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
  background-color: #9fcdff;
}

.table-secondary,
.table-secondary > th,
.table-secondary > td {
  background-color: #d6d8db;
}

.table-secondary th,
.table-secondary td,
.table-secondary thead th,
.table-secondary tbody + tbody {
  border-color: #b3b7bb;
}

.table-hover .table-secondary:hover {
  background-color: #c8cbcf;
}

.table-hover .table-secondary:hover > td,
.table-hover .table-secondary:hover > th {
  background-color: #c8cbcf;
}

.table-success,
.table-success > th,
.table-success > td {
  background-color: #c3e6cb;
}

.table-success th,
.table-success td,
.table-success thead th,
.table-success tbody + tbody {
  border-color: #8fd19e;
}

.table-hover .table-success:hover {
  background-color: #b1dfbb;
}

.table-hover .table-success:hover > td,
.table-hover .table-success:hover > th {
  background-color: #b1dfbb;
}

.table-info,
.table-info > th,
.table-info > td {
  background-color: #bee5eb;
}

.table-info th,
.table-info td,
.table-info thead th,
.table-info tbody + tbody {
  border-color: #86cfda;
}

.table-hover .table-info:hover {
  background-color: #abdde5;
}

.table-hover .table-info:hover > td,
.table-hover .table-info:hover > th {
  background-color: #abdde5;
}

.table-warning,
.table-warning > th,
.table-warning > td {
  background-color: #ffeeba;
}

.table-warning th,
.table-warning td,
.table-warning thead th,
.table-warning tbody + tbody {
  border-color: #ffdf7e;
}

.table-hover .table-warning:hover {
  background-color: #ffe8a1;
}

.table-hover .table-warning:hover > td,
.table-hover .table-warning:hover > th {
  background-color: #ffe8a1;
}

.table-danger,
.table-danger > th,
.table-danger > td {
  background-color: #f5c6cb;
}

.table-danger th,
.table-danger td,
.table-danger thead th,
.table-danger tbody + tbody {
  border-color: #ed969e;
}

.table-hover .table-danger:hover {
  background-color: #f1b0b7;
}

.table-hover .table-danger:hover > td,
.table-hover .table-danger:hover > th {
  background-color: #f1b0b7;
}

.table-light,
.table-light > th,
.table-light > td {
  background-color: #fdfdfe;
}

.table-light th,
.table-light td,
.table-light thead th,
.table-light tbody + tbody {
  border-color: #fbfcfc;
}

.table-hover .table-light:hover {
  background-color: #ececf6;
}

.table-hover .table-light:hover > td,
.table-hover .table-light:hover > th {
  background-color: #ececf6;
}

.table-dark,
.table-dark > th,
.table-dark > td {
  background-color: #c6c8ca;
}

.table-dark th,
.table-dark td,
.table-dark thead th,
.table-dark tbody + tbody {
  border-color: #95999c;
}

.table-hover .table-dark:hover {
  background-color: #b9bbbe;
}

.table-hover .table-dark:hover > td,
.table-hover .table-dark:hover > th {
  background-color: #b9bbbe;
}

.table-active,
.table-active > th,
.table-active > td {
  background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover {
  background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover > td,
.table-hover .table-active:hover > th {
  background-color: rgba(0, 0, 0, 0.075);
}

.table .thead-dark th {
  color: #fff;
  background-color: #343a40;
  border-color: #454d55;
}

.table .thead-light th {
  color: #495057;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

.table-dark {
  color: #fff;
  background-color: #343a40;
}

.table-dark th,
.table-dark td,
.table-dark thead th {
  border-color: #454d55;
}

.table-dark.table-bordered {
  border: 0;
}

.table-dark.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}

.table-dark.table-hover tbody tr:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.075);
}

@media (max-width: 575.98px) {
  .table-responsive-sm {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-sm > .table-bordered {
    border: 0;
  }
}

@media (max-width: 767.98px) {
  .table-responsive-md {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-md > .table-bordered {
    border: 0;
  }
}

@media (max-width: 991.98px) {
  .table-responsive-lg {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-lg > .table-bordered {
    border: 0;
  }
}

@media (max-width: 1199.98px) {
  .table-responsive-xl {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-xl > .table-bordered {
    border: 0;
  }
}

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive > .table-bordered {
  border: 0;
}
#ccc-icon svg{ margin-top: 0; }
#ccc-button-holder, #ccc-end{ text-align: right; }

.notification-bar{ color: #fff; padding: 40px 0; background: #695fae; }
.notification-bar p{ margin-bottom: 0; color: #fff; }
.notification-bar h1, .notification-bar h2, .notification-bar h3, .notification-bar h4, .notification-bar h5{ color: #fff; } 

body[data-slug="home"] .hero {
    border-top: 8px solid #695fae;
    border-bottom: 8px solid #695fae;
}

 body[data-slug="home"]#newheaderlayout .hero {
  border-top: 8px solid var(--green-color);
  border-bottom: 8px solid var(--green-color);
}

.ninga-headlogo{ margin-top:0px; display: block; }

@media (min-width: 768px) {
  .ninga-headlogo{ margin-top:-15px; }

}

/*
#17345E   Navy
#E35C24   Orange

*/

.ningahbg{ background: #17345E; }
.ninga .menu-bar{background: #17345E; }

@media (min-width: 992px) {
  .ninga .top-nav li a{color:#fff; }
  .ninga .top-nav li a:hover{ color:#E35C24; border-bottom-color: #E35C24; }
}

.ninga .gas-safe-topper{ background: #fff; }
.ninga .mob-nav{ color: #fff; }
.ninga .mob-nav:hover { color:#E35C24;}

[data-slug="home"] .hero .hero-text .button {background:linear-gradient(135deg,#695eae 0,#47215b 100%)}
[data-slug="home"]#newheaderlayout .hero .hero-text .button {background:linear-gradient(135deg,#695eae 0,#47215b 100%); background:var(--green-color);}

.nlogogrid{ display:grid; grid-template-columns: 1fr 1fr; gap:35px; align-items:center; }
@media (min-width: 576px) {
  .nlogogrid{grid-template-columns: 1fr 1fr 1fr;}
}
@media (min-width: 768px) {
  .nlogogrid{grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
}


.iconcontactlist{ display: flex; justify-content: flex-start; align-items: center; gap: 15px; margin-bottom:10px; font-size:1.5rem;}
.iconcontactlist a{ display: inline-block; text-decoration: none; }
.iconcontactlist a:hover{ text-decoration: none; }
.iconcontactlist .large-icon { border: none; width:40px; height:40px; display: flex; align-items: center; justify-content: center; font-size:2rem; margin: 0; line-height: normal; flex-shrink: 0;}
.iconcontactlist .large-icon:hover{ transform: none; }
.iconcontactlist .large-icon::after{ border: none; display: none;}

.large-icon { display: flex; align-items: center; justify-content: center; }

.form__row--checkboxes .form__label{ margin-bottom:10px; }
.form__row--checkboxes .form__label label{ display: block;}
.form__row--checkboxes .form__field label{ display: inline ; }
#fields-optIn-field.form__row--checkboxes .form__field label{ display: none ; }
.form__row--checkboxes .form__field div{ display: flex; align-items: center; margin-bottom: 5px; }
.form__row--checkboxes .form__field div .fake-checkbox-label{ margin-right:10px; }

.form__label em{ margin-bottom:8px; display: block; font-size:1.25em; }
.main-logo svg {max-height:70px;}
.footer-logo svg {max-height:50px;}

.d-none{ display: none; }


.topnavbar{ background: #0E7BC0; color: #fff; }

@media (min-width: 992px) {
  .top-nav li{ margin-right:18px; }
}
@media (min-width: 1200px) {
  .top-nav li{ margin-right:25px; }
}
.body-text ul{list-style-type: none;}

.newnbcontainer .mob-nav{ margin-top:2.5rem;  }

.topnav-container{ }
.topnav-container .topnav{display: none; justify-content: flex-end; align-items: center;}
.topnav-container .topnav ul{ list-style: none;}
.topnav-container .topnav ul li{ display: inline; }
.topnav-container .topnav ul li::before{ content:''; display: none;}
.topnav-container .topnav ul li a{ color: #fff; font-size:1.4rem; }
.topnav-container .top-bar-social{ margin-top:0; }
.topnav-container .top-bar-social a{ width:32px; height: 32px; display: flex; justify-content: center; align-items: center; text-decoration: none; margin-left:7px; }
.topnav-container .top-bar-social a svg{ margin-top:0;}

@media (min-width: 768px){
  .top-nav-dropdown{ display: block; }
}

@media (min-width: 992px) {
  .top-nav-dropdown{ display: none; }

  .topnav-container .topnav{ display: flex; }
  .topnav-container .topnav ul li{ margin-left: 3rem; }
  .topnav-container .top-bar-social{ display: flex;}
  .topnavlinks{ display: none; }

  .newnbcontainer{ display: flex; justify-content: space-between; align-items: center; }
  .newnbwrapper{ display: flex; flex-direction: column; align-items: end; }

  .newnbwrapper .gas-safe-topper{ min-height: auto; line-height: 3.5rem; margin-top:1rem; }

  .nbnew{ margin-top:2.5rem; }
  .nbnew .flex-sb{ justify-content: flex-end; }
  .nbnew .top-nav { max-width:100%; }
  .nbnew .top-nav li{ margin-right:0!important; margin-left:25px;  }
  .nbnew .top-nav li a{ display: inline-block;   }

  .menu-bar .top-nav .topnavlinks.show-for-landscape-up{ display: none!important; }
}

.home-gradient h2{ line-height:1.2; font-size:1.7rem;}

.top-nav li a.fuelling-the-future.active, .top-nav li a.fuelling-the-future:hover{color: #437a00!important; border-bottom:solid 2px #437a00!important; }
.lphead{line-height: 1.25;}

.licon-small{ width: 60px; height: 60px; font-size:3rem }
.licon-small:after{ width:auto; height:auto; border: none; }
.licon-head{ font-size:1.5rem; line-height: 1.5; font-weight:700; }

.h1{ font-size:4rem; line-height: 4.8rem; }
.h2{ font-size:2.4rem; line-height: 3.2rem; }

.h4{ font-size:1.7rem;}

.h6{font-size:1.3rem;}

.flickity-prev-next-button{display: none;}

.hero{ background: #2671a6; }

.herobg{ background-position: center center; background-size: cover; display: flex; align-items: center; justify-content: center;}
.herobg::before{content:''; position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0, 0, 0, 0.3);}

.herobg .hero-body{ width:500px; max-width: 100%; margin: auto;}


.herocontent{ padding: 0 40px; /* width: 650px; */ max-width: 100%; position: relative; z-index: 1;}

.text-center{text-align: center;}
.text-start{ text-align: left; }
.text-end{ text-align: right; }

.hs-standard{min-height: 402px;}
.hs-large{min-height: 402px;}
@media (min-width: 992px) {
  .hs-large{min-height: 668px;}  
}

.herobg h1{ text-transform: uppercase; line-height: 1; }

@media (min-width: 992px) {
  .herobg h1{ font-size:6rem; }
}


.hero-video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1; /* Ensure the video is behind other content */
}
.hbuttons{ display: flex; justify-content: center; gap:.75rem;  }
@media (max-width: 600px) {
  .hbuttons{flex-direction: column;}
  .hbuttons a{ text-align: center; justify-content: center;}
}
.ti-icons{ display: flex; justify-content: space-between; gap:2rem; width:100%;  }
.ti-icitem{ text-align: center; }
.ti-icon img{ width:88px; margin: 0 auto;}

.ti-icdesc{ color: var(--sec-color);font-size: 1.4rem;}
.ti-icons-3 .ti-icdesc{ /* width: 196px; */ max-width: 100%;}
.ti-icons-3up .ti-icdesc{ /* width: 136px; */ max-width: 100%; }

@media (max-width: 600px) {
  .ti-icons{flex-wrap: wrap; justify-content: center; }
  .ti-icitem{ width:100%; }
}


.ti-wrapper.whiteFeatureBox{ background: #fff; padding:20px; }
.ti-wrapper.whiteFeatureBox h4{ color:var(--sec-color); font-size: 2.5rem; margin-top:2.5rem;  margin-bottom:1.5rem!important; line-height: 1;}
@media (min-width: 992px) {
  .ti-wrapper.whiteFeatureBox{ padding:40px; }
  .ti-wrapper.whiteFeatureBox h4{ font-size: 4rem; margin-top:0;}

  .ti-wrapper.whiteFeatureBox .col-1-2{ flex-basis: 48%; max-width: 48%; }
  .ti-wrapper.whiteFeatureBox .col-1-2:not(:last-of-type){ margin-right:4%; }
}

.ti-wrapper.blueBoxSmallImage{ background: #C5EAFF; padding:20px 20px 0 20px; }
.ti-wrapper.blueBoxSmallImage .body-para{margin-top:2rem;}

@media (min-width: 768px) {
  .ti-wrapper.blueBoxSmallImage .row{ align-items: flex-end; }
  .ti-wrapper.blueBoxSmallImage .col-1-2{ flex-basis: 71%; max-width: 71%; }
  .ti-wrapper.blueBoxSmallImage .col-1-2:not(:last-of-type){flex-basis: 25%; max-width: 25%; margin-right:4%; }
  .ti-wrapper.blueBoxSmallImage{ padding:30px 40px 0 40px; }  

  .ti-wrapper.blueBoxSmallImage .body-para{margin-top:0rem; padding-bottom:2rem;}
}
@media (max-width: 767.99999px) {
  .blueBoxSmallImage .row > .mb-0{ order:8;  }
}







@media (min-width: 1080px) {
  .ti-wrapper.blueBoxSmallImage .col-1-2{ flex-basis: 75%; max-width: 75%; }
  .ti-wrapper.blueBoxSmallImage .col-1-2:not(:last-of-type){flex-basis: 21%; max-width: 21%; margin-right:4%; }
}

.blueboxlink{ padding: 2.5rem 1rem; }
.blueboxlink h2{ color: #fff; }

.mw-sm{ width:576px; max-width: 100%; }
.mw-md{ width:768px; max-width: 100%; }
.mw-lg{ width:992px; max-width: 100%; }
.mx-auto{ margin-left: auto; margin-right: auto; }


.button-container{ display: flex; gap:1rem;  }
.justify-content-center{ justify-content: center; }
.justify-content-end{ justify-content: end;}

.gs-top-new{ background-color: #0C7BC0!important; border-color: #0C7BC0!important; color: #fff; }
.gs-top-new .navy-color{ /* color:#95F1FF!important; */ color:#fff!important; }
.gs-top-new .blue-color{ color:#fff!important; }
.topshop-link{ border:solid 1px #2670A6; min-height: auto; line-height: 3.5rem; margin-top: 1rem; margin-right: 1rem; padding:0 15px; color: #3C5997; font-family: co-text,sans-serif; font-size:1.6rem; text-decoration:none;}

.topshop-link:hover{border-color: #0C7BC0!important; color: #0C7BC0!important; display: inline-block;}

.newnblinks{ display: flex; gap:1rem; }