/* var declarations */
:root {
  /* standard definitions required and used throughout the cms */
  --min-screen-width: 320px;
  --standard-width: 1200px;

  --sidebar-width: 300px;
  --sidebar-padding: 0 0 0 2rem;

  --brand-a: #0077b6; /* #bf202f;					/*main brand color used on backgrounds and buttons */
  --brand-a-color: white; /* text color used on main brand backgrounds */
  --brand-a-hover: #000; /* main brand background color used on hover */
  --brand-a-hover-color: white; /* text color for above */

  --brand-b: #18191a; /* secondary brand color. Used on secondary buttons and on menus, by default */
  --brand-b-color: #9a9da3;
  --brand-b-hover: #303031;
  --brand-b-hover-color: white;

  /* add site-specific definitions here, these are not supported by the core cms */
}

/* Since we can't use var declarations for media query widths, use the following notation to mark where they exist in css files
;sidebar-cutoff; using 900px
;padded-standard-width; using 1232px (1200 + 2x16)
*/

/*********************** STANDARD ELEMENTS ****************************/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  font-weight: 400;
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  color: #0a1718;
  text-align: left;
  background: white;
  line-height: 1.45rem;
  min-width: var(--min-screen-width);
}

/* for the admin page editing area */
.mceContentBody {
  background-color: #ffffff !important;
  background-image: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
td {
}

/* GENERAL FORMATTING */

a,
a:visited {
  text-decoration: none;
  color: #0077b6;
  font-weight: 600;
  transition: background 0.4s;
}
a:hover,
a:active {
  color: #0077b6;
  transition: color 0.4s;
}

button {
  font-weight: 600;
  font-size: 1rem;
  font-family: "Poppins", sans-serif;
}

strong {
  font-weight: 600;
}
em {
  font-weight: unset;
}

#content li:before {
  content: url("../../images/checkmark-bullet.svg");
  padding-right: 4px;
}

.jobNav li::before {
  content: none !important;
}

.cms-button-a,
.cms-button-b,
button {
  border-radius: 5px;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.45em;
  font-weight: 500;
}

h1 {
  margin-bottom: 1.5rem;
  line-height: 1.35em;
  color: #000;
  font-size: 2rem;
  font-weight: 600;
  color: #0a1718;
  xtext-transform: uppercase;
}

h2 {
  /* font-size: 1.6rem; */
  font-weight: 600;
  color: #000;
  margin-bottom: 0.5rem;
  line-height: 1.35em;
  xtext-transform: uppercase;
}

h3 {
  /* note that sidebar headings are all h3, these styles must work within that context 
	    use blog sidebar for reference */
  color: #0077b6;
  /* font-size: 1.4rem; */
  margin-bottom: 0.5rem;
  font-weight: 600;
  text-transform: unset;
  /* position: relative; */
  xdisplay: inline-block;
}

.div-home-logistics h3 {
  color: #000;
}
/* h3:after{
	content: '';
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    border-top: 1px solid var(--brand-a);
} */

img,
embed,
object,
video {
  max-width: 100%;
  border: 0 none;
}

#content img {
  border-radius: 1rem;
}

#content .main-services img {
  border-radius: 0;
}

p {
  color: #000;
  margin-bottom: 1.4rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}

ul,
ol {
  margin-left: 1.1em;
  margin-bottom: 1.5em;
  margin-top: 1.5em;
  list-style-type: none;
}

ul li,
ol li {
  color: #1d252c;
  margin-bottom: 0.4em;
  /* font-weight: 300; */
  line-height: 1.5em;
  font-size: 1rem;
}

/*********************** MAIN DIVS ****************************/
#top {
  min-width: var(--min-screen-width);
  width: 100%;
}

#middle {
  position: relative;
  min-width: var(--min-screen-width);
  overflow: hidden;
  box-sizing: border-box;
  margin-top: 2em;
  margin-bottom: 2em;
}
#middle:after {
  clear: both;
  display: table;
  content: "";
}
#middle.hasSidebar {
  max-width: var(--standard-width);
  margin-left: auto;
  margin-right: auto;
  padding: 0 1em;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1232px) {
  /* ;padded-standard-width; using 1232 */
  #middle.hasSidebar {
    padding: 0;
  }
}

#bottom {
  width: 100%;
  position: relative;
  min-width: var(--min-screen-width);
  background: #03045e;

  border-top: 15px solid #0077b6;
}
/* end main divs */

/*  CONTENT and Sidebar */
#middle.hasSidebar #content {
  order: 2; /* put_in-middle_using_flex:; */
}

/* default sidebar behaviour (small screens or default if device has js disabled) */
.sidebarPart {
  /*common class for sidebar-top and sidebar_bottom */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#sidebar-top {
  order: 1;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-left: -2em;
}

.opacity-none .cms-button-a {
  font-size: 0.8rem;
  padding: 5px 10px !important;
}

#sidebar-bottom {
  order: 3;
  margin-top: 1em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-left: -2em;
}

.sb_widget {
  margin-left: 2em;
  margin-bottom: 2em;
}

/* Rules for putting sidebar on the side */
@media (min-width: 900px) {
  /* ;sidebar-cutoff; */
  #middle.hasSidebar {
    display: block;
  }
  #middle.hasSidebar #content {
    width: calc(100% - var(--sidebar-width));
    float: left;
  }
  .sidebarPart {
    float: right;
    width: var(--sidebar-width);
    padding: var(--sidebar-padding);
  }

  #sidebar-top,
  #sidebar-bottom {
    display: block;
  }

  #sidebar-bottom {
    margin-top: 0;
  }

  .sb_widget {
    margin-left: 0;
  }
}

.standard-width {
  max-width: var(--standard-width);
  margin: 0 auto;
  padding: 0 1em;
  box-sizing: border-box;
}
@media (min-width: 1232px) {
  /* ;padded-standard-width; using 1232 */
  .standard-width {
    padding: 0;
  }
}
#middle.hasSidebar #content > .standard-width {
  padding: 0;
}

.full-width {
}

.inset-width {
  width: 80%;
  max-width: calc(var(--standard-width) * 0.8);
  margin: 0 auto;
  padding: 0 1em;
}
@media (min-width: 1232px) {
  /* ;padded-standard-width; using 1232 */
  .standard-width {
    padding: 0;
  }
}

/*  end CONTENT and Sidebar */
/*********************** Utility CLASSES ****************************/
/* divider-under is used in many modules and should be used within the site, for consistency
** 	- normally, this is added to a div or paragraph to replicate a styled <hr>
*/
.divider-under::after {
  border-bottom: 1px solid #f0efef;
  margin: 2em 0;
  content: "";
  display: block;
}
.clearAfter::after {
  display: "table";
  clear: "both";
  content: "";
}
.clear {
  clear: both;
}
.nobr,
.nowr {
  white-space: nowrap;
}
.whiteBG {
  background: white;
}
.blackBG {
  background: black;
}
.left {
  float: left;
}
.right {
  float: right;
}
.full {
  width: 100%;
}
.leftimg {
  clear: left;
  float: left;
  margin: 0.3em 2em 2em 0;
  font-style: italic;
}
.rightimg {
  clear: right;
  float: right;
  margin: 0.3em 0 2em 2em;
  font-style: italic;
}
.leftimg p,
.rightimg p {
  margin: 0.5em 0 0 0;
}
.fullimg {
  width: 100%;
  margin-bottom: 1em;
}
.half {
  width: 50%;
}
.halfleftimg {
  float: left;
  width: 48%;
  margin: 1em 0;
}
.halfrightimg {
  float: right;
  width: 48%;
  margin: 1em 0;
}
.imgfullwidth {
  width: 100%;
}
.side2sideleft {
  width: 49%;
  margin-right: 1%;
}
.side2sideright {
  width: 49%;
  margin-left: 1%;
}
.side3sideleft {
  width: 32%;
  margin-right: 1%;
}
.side3sidemid {
  width: 32%;
  margin-left: 1%;
  margin-right: 1%;
}
.side3sideright {
  width: 32%;
  margin-left: 1%;
}
.third {
  width: 35%;
}
.quarter {
  width: 25%;
}
.center {
  display: block;
  margin: 2em auto;
  text-align: center;
  font-style: italic;
  width: auto;
}
.noscale {
  max-width: none;
}
@media (max-width: 549px) {
  .left,
  .right {
    float: none;
  }
  .leftimg,
  .rightimg {
    float: none;
    margin: 2em auto;
    display: block;
    text-align: center;
    font-style: italic;
  }
  .half,
  .third,
  .quarter {
    width: auto;
  }
  .hideinmobile {
    display: none;
  }
}
.width25 {
  max-width: 25%;
  display: block;
}
.width50 {
  max-width: 50%;
  display: block;
}
.width75 {
  max-width: 75%;
  display: block;
}

#content .toggleExpandable,
#content .toggleExpandable p {
  cursor: pointer;
  color: #000;
  font-size: 1rem;
  padding: 0.5rem 1.5rem;
  font-weight: 600;
  text-transform: unset;
}

.toggleExpandable h3 {
  margin-bottom: 0;
}

.toggleExpandable::before {
  content: "\0025BC";
  margin-right: 1rem;
  float: left;
}

.toggleExpandable.open::before {
  content: "\0025B2";
}

.expandableItem {
  display: none;
}

/* JUSTIFY FLOATING DIVS */
ul.justify {
  font-size: 0 !important;
  line-height: 0;
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: justify;
  text-justify: distribute-all-lines;
}

ul.justify:after {
  content: "";
  display: inline-block;
  width: 100%;
}

ul.justify li {
  display: inline-block;
  font-size: 1rem;
  line-height: 1rem;
  margin: 0 auto !important;
  this-will-center-single-objects: ;
  padding: 0 !important;
}

/* (untested) IE hacks to make li's line up */
* + html ul.justify li {
  display: inline;
}
* html ul.justify li {
  display: inline;
}

@media screen and (max-width: 549px) {
  #content ul.justify {
    margin-left: 0;
  }

  #content ul.longList {
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
  }
}

/** FORMS **/

form.cms-form label .fmrequire,
.fmrequire {
  color: #ff0000;
  margin-left: 3px;
}

form.cms-form input[type="submit"] {
  padding: 3px;
}

#fmMessage {
  padding: 1em;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  display: none;
}

#fmMessage.fmError {
  background: #fc6c6c;
}

#fmMessage.fmSuccess {
  background: #7cff8c;
}

form.cms-form div.fmCheckboxRow,
form.cms-form div.fmRadioRow {
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  margin-bottom: 1rem;
}

form.cms-form div.fmCheckboxRow label,
form.cms-form div.fmRadioRow label {
  margin-left: 0;
}

form.cms-form div.fmRadioRow input[type="radio"] {
  margin-left: 1em;
}

form.cms-form input[type="text"],
form.cms-form input[type="email"],
form.cms-form input[type="password"],
form.cms-form textarea {
  width: 100%;
  background: #ffffff;
  padding: 0.5rem;
  margin: 0 0 1rem 0;
  vertical-align: middle;
  border: 1px solid #c0c0c0;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  font-family: "Poppins", sans-serif;
}

form.cms-form textarea[name="ftl:_type_of_equipment"],
form.cms-form textarea[name="ltl:_measurements_and_weight"] {
  min-height: 2em;
}

form.cms-form .selectType {
  width: 100%;
  ppheight: 2em;
  pppadding-left: 1em;
  padding: 1rem;
  margin: 0 0 1rem 0;
  vertical-align: middle;
  border: 1px solid #c0c0c0;
  color: #757579 !important;
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1.8em;
}

form.cms-form .selectType select,
form.cms-form select {
  color: #757579;
  padding: 0.5em;
  margin-bottom: 1rem;
}

form.cms-form textarea {
  margin-bottom: 1rem !important;
  min-height: 12em;
}

form.cms-form #form-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-left: -1em;
}
@media screen and (min-width: 600px) {
  form.cms-form #form-bottom {
    justify-content: center;
  }
}

form.cms-form #captchaContainer {
  display: block;
  max-width: 330px;
}

form.cms-form #captcha-image-box {
  display: block;
  max-width: 300px;
  flex: 1 1 auto;
  margin-left: 1em;
}

form.cms-form img#captcha {
  width: 100%;
}

form.cms-form #captcha-button-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 1em;
}

form.cms-form input[type="submit"],
form.cms-form input#button {
  padding: 0.7rem 1.5rem;
  text-transform: uppercase;
  font-size: 1.15em;
  border: 1px solid transparent;
  background: #0077b6;
  color: white;
  font-weight: 400;
  xmargin: 1rem 0 0 0;
  letter-spacing: 0.12rem;
  font-family: "Poppins", sans-serif;
}

form.cms-form input[type="submit"]:hover,
form.cms-form input#button:hover,
form.cms-form input[type="submit"]:active,
form.cms-form input#button:active {
  background: #ebeae8;
  color: #000;
  cursor: pointer;
  border: 1px solid #000;
  transition: all 0.4s;
}

/* used in blog and probably other places when I find them (members, ecom come to mind) */
/* html structure: <input type=text class=".cms_button-search"><button class=".cms-button-search-submit" type="submit"></button> */
form.cms-form input.cms-search-input {
  /*override default behaviour to work with adjoining search button */
  width: calc(100% - 50px);
  padding: 1em;
  margin-bottom: 1em;
}
.cms-search-button {
  /* must use <button> instead of <input> because <input> isn't elligble for ::before */
  position: relative;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  vertical-align: top;
  background: var(--brand-a);
  color: var(--brand-a-color);
  border: none;
}
.cms-search-button:hover {
  background: var(--brand-a-hover);
}

/* to change the color of this svg on hover, create a duplicate of the image and change the stroke value to the appropriate colour in the new svg */
.cms-search-button::after {
  content: url("../../images/magnifying-glass-white.svg");
}

/* standard branded buttons used throughout the cms */
/* these button definitions *must* support a.cms_button_ and button.cms_button_ */
/* standard behaviour should be a button that conforms to the size of the content */
/* .cms_button_fullwidth is a button that conforms to the full width of the parent, all 3 basic buttons need to have a cms_button_fullwidth option */
.cms-button-a,
.cms-button-b,
.cms-button-cancel,
.cms-button-a:visited,
.cms-button-b:visited,
.cms-button-cancel:visited {
  padding: 0.2rem 1.25rem;
  /* margin-bottom: 1rem; */
  box-sizing: border-box;
  border: none;
  transition: background 0.4s, color 0.4s, border-color 0.4s;
  display: inline-block;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  /* border-radius: 5px; */
  xtext-transform: uppercase;
}

/* using svg after effect*/
/* active for action link and blog lists
	disabled for normal buttons, but uncomment below to enable for all buttons
.cms-button-a::after, .cms-button-b::after, .cms-button-cancel::after, */
.cms-action-link::before,
.blog_widget ul.blog-list li::before {
  content: url("../../images/gt-white.svg");
  display: inline-block;
  vertical-align: middle;
  margin: 0 -0.5rem 0 0.5rem;
  width: 1rem;
  height: auto;
}

.cms-action-link::before,
.blog_widget ul.blog-list li::before {
  content: url("../../images/gt-black.svg");
  margin: 0 0.3rem 0 0;
  width: 0.7rem;
  height: auto;
}

.cms-button-a,
.cms-button-a:visited {
  /* main button style for all content */
  background: var(--brand-a);
  color: var(--brand-a-color);
  border: 1px solid var(--brand-a);
}
.cms-button-a:hover {
  background: var(--brand-a-hover);
  border-color: var(--brand-a-hover);
  color: var(--brand-a-hover-color);
}

.cms-button-b,
.cms-button-b:visited {
  /* not used in core cms, placeholder for sites that want an alternate button style for use in custom content. Note, more buttons can be added, but additional work will need to be undertaken to support them in tinymce */
  background: var(--brand-b);
  border: 2px solid var(--brand-b);
  color: var(--brand-b-color);
}
.cms-button-b:hover {
  background: var(--brand-b-hover);
  border-color: var(--brand-b-hover);
  color: var(--brand-b-hover-color);
}
button.cms-button-a,
button.cms-button-b,
button.cms-button-cancel,
button.cms-button-a:visited,
button.cms-button-b:visited,
button.cms-button-cancel:visited {
  border-width: 4px;
}

.cms-button-cancel {
  /* will be used in members */
  background: grey;
  color: white;
}
.cms-button-cancel {
  background: black;
}

.shoppingcart > svg {
  fill: green;
  transition: fill 1s;
  vertical-align: top;
}
.shoppingcart:hover > svg {
  fill: blue;
}

/****************************************************************/
/****************************************************************/

/****************************************************************/
/****************************************************************/

/****************************************************************/
/****************************************************************/

/****************************************************************/
/****************************************************************/

/****************************************************************/
/****************************************************************/

/****************************************************************/
/****************************************************************/

.footer-logo {
  width: 250px;
}

.fab {
  color: #b1ea03;
}

.copyrightContainer {
  margin-top: 2rem;
  border-top: 1px solid white;

  background: #03045e;
}

.copyrightContainer .coloredContainer {
  position: absolute;
  top: -19px;
  left: 0;
  width: 320px;
  height: 26px;
}

.copyrightContainer .standard-width {
  display: flex;
  /* border-top: 1px solid white; */

  position: relative;
}

.copyrightContainer .standard-width p {
  flex: 1;
}

.copyrightContainer .copyright-p.copyright-p-right {
  text-align: right;
}

.copyrightContainer .copyright-p {
  font-size: 0.75rem;
  color: white;
  font-weight: 300;
  margin: 0;
  padding: 1rem 0;
  /* border-top: 1px solid white; */

  /* font-family: 'Montserrat', sans-serif; */
}

.copyrightContainer .copyright-p a {
  color: white;
  font-weight: 300;
}

.copyrightContainer .copyright-p a:hover {
  color: #8bc445;
}

.page-home #content .standard-width {
  padding: 3rem 1rem;
}

.toggleExpandable {
  cursor: pointer;
  border-top: 1px solid #ababab;
  /* padding-top: .8rem; */
  position: relative;
  padding-left: 1.5rem;
}
.toggleExpandable::before {
  content: "\00002B";
  margin-right: 0.75rem;
  float: left;
  width: 15px;
  text-align: center;
  font-weight: 500;
  font-size: 1.2rem;
  top: 0.7rem;
  transition: all 0.3s;
  display: block;
  position: absolute;
  left: 0;
}
.toggleExpandable.open::before {
  content: "\00002D";
  font-size: 1.75rem;
  transition: all 0.3s;
}
.expandableItem {
  display: none;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.toggleExpandable.lasttoggleExpandable {
  border-bottom: 1px solid #ababab;
  margin-bottom: 1.5rem;
}
.toggleExpandable.lasttoggleExpandable.open {
  border-bottom: none;
  margin-bottom: 0;
}
.toggleExpandable.lasttoggleExpandable.open + .expandableItem {
  border-bottom: 1px solid #ababab;
}

.toggleExpandable h2 {
  margin-top: 0.35rem;
}

.column-text {
  display: flex;
}

.column-text > div {
  flex: 1;
}

.column-text > div p {
  text-align: center;
}

.column-text > div p a {
  font-weight: 600;
}

#topMenuBG #headerRight .topHeaderContact .cms-button-a {
  margin-left: 1.5rem;
  transition: all .5s;
}

.main-services .column-text > div {
  margin: 0 0.35rem;
}

.main-services .column-text {
  margin-bottom: 3rem;
}

.main-services .column-text p {
  margin-bottom: 0;
}

.main-services .column-text p img {
  min-width: 100%;
  vertical-align: bottom;
}

.main-services .column-text p:nth-of-type(2) {
  padding: 0.65rem 0;
  background: #0077b6;
}

.main-services .column-text p:nth-of-type(2) a {
  color: white;
  xtext-transform: uppercase;
  font-weight: 500;
}

.main-services h2 {
  width: 75%;
  margin: 0 auto 2rem;
  text-align: center;
  font-size: 2.2rem;
  font-weight: 500;
}

.main-services p.main-home-text {
  width: 60%;
  margin: 0 auto 2rem;
}

.main-services p.main-home-text a.cms-button-a {
  padding: 0.75rem 1.5rem;
}

.main-services p.main-home-text:last-child {
  margin-bottom: 0;
  text-align: center;
}

.div-home-logistics {
  background: #e8e6e6;
}

.div-home-logistics h2 {
  text-align: center;
  margin-bottom: 3rem;
  font-weight: 600;
  font-size: 2rem;
}

.div-home-logistics .column-text > div:nth-of-type(2) p {
  margin-bottom: 0;
}

.div-home-logistics .column-text > div:nth-of-type(2) p img {
  min-width: 100%;
}

.div-home-logistics .column-text > div:nth-of-type(1) p {
  margin-right: 3rem;
  margin-bottom: 3rem;
  text-align: left;
}

.div-home-logistics .column-text > div:nth-of-type(1) p:last-child {
  margin-bottom: 0;
}

.div-home-logistics .column-text > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.div-home-blog h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  xtext-transform: uppercase;
}

.div-home-blog p {
  xtext-transform: uppercase;
}

.div-home-blog p.p-blog-title {
  max-width: 296px;
  margin: 0 auto 1rem;
}

.div-home-contact-us-container h2 {
  text-align: center;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.div-home-contact-us-container {
  padding: 3rem;
  background: url(../../images/bg_div-home-contact.jpg) center no-repeat;
  background-size: cover;
  min-height: 710px;
  position: relative;
}

.home-contact-us {
  width: 25%;
  background: white;
  padding: 3rem;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-90%, -50%);
  transform: translate(-90%, -50%);
}

.div-home-contact-us-container .cms-button-a {
  padding: 0.75rem 1.5rem;
  font-weight: 500;
}

/*  Head Line Menu, start  */
/****************************************************************/
/****************************************************************/
.head-line-menu {
  background: #11879b;
  /* background: url("../../images/bg-header-line.jpg") center no-repeat;
	background-size: cover; */
  width: 100%;
  height: 39px;
  color: white;
  font-weight: 500;
  border-bottom: 1px solid #17613b;
  display: flex;
  align-items: center;

  display: none;
}

.head-line-menu > .standard-width {
  width: 100%;
  display: flex;
}

.head-line-menu .contact-container,
.head-line-menu .price-container {
  flex: 1;

  font-family: "Montserrat", sans-serif;
}

.head-line-menu .contact-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  margin-left: 1rem;
}

.head-line-menu .price-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.head-line-menu .contact-container a {
  font-size: 0.9rem;
  font-weight: 500;
  color: white;
  margin-right: 0.5rem;
  transition: all 0.4s;
}

.head-line-menu .contact-container a:hover {
  color: #8bc445;
  transition: all 0.4s;
}

.head-line-menu .contact-container a:nth-of-type(1) img {
  width: 18px;
  vertical-align: sub;
  margin-right: 0.3rem;
}

.head-line-menu .contact-container a:nth-of-type(2) img {
  width: 20px;
  vertical-align: middle;
  margin-right: 0.3rem;
}

.head-line-menu .contact-container a.btn-top-header {
  padding: 0.2rem 0.75rem;
  color: #231f20;
  text-transform: uppercase;
}

.btn-top-header-join {
  background: #d5dc30;
}

.btn-top-header-shop {
  background: #e84924;
}

.btn-top-header-donate {
  background: #8cc143;
}

.price-container .alert-price {
  color: #231f20;
  padding: 0 0.75rem;
  display: flex;
  align-items: center;
}

.price-container .alert-price.flags-price a {
  height: 17px;
  transition: all 0.4s;
}

.price-container .alert-price.flags-price a:hover {
  opacity: 0.6;
  transition: all 0.4s;
}

@media only screen and (max-width: 1185px) {
  /* .head-line-menu .contact-container {
	  display: none;
	} */
}

#widgetBar > div {
  margin: 0 2rem !important;
}

@media screen and (max-width: 1275px) {
  .shopAccount {
    margin-right: 0 !important;
  }
}
/****************************************************************/
/****************************************************************/
/*  Head Line Menu, finish  */

#middle {
  margin-bottom: 0;
}

.field--badges {
  padding-bottom: 15px;
}

.field--badges img {
  max-height: 20px;
  padding-left: 10px;
}

.page-blog #middle {
  padding-bottom: 3rem;
}

.blogcontent-homepage {
  margin-bottom: 3rem;
}

.blog_widget ul.blog-list li {
  position: relative;
  padding-left: 1rem;
}

.blog_widget ul.blog-list li::before {
  position: absolute;
  top: 2px;
  left: 0;
}

.freight-quote-form {
  width: 50%;
  margin: 2rem 0;
  border: 1px solid #ccc;
  padding: 0.75rem 1.5rem;
  box-shadow: 0 0 10px #c5c5c5;
  background: #fafafa;
}

.freight-quote-form select {
  display: block;
}

.page-freight-quote #middle,
.page-freight-quote-ocean #middle,
.page-freight-quote-truck #middle,
.page-freight-quote-air #middle {
  padding-bottom: 3rem;
}

.page-freight-quote .cms-button-a {
  padding: 0.5rem 1.5rem;
  margin-right: 2rem;
}

/****************************************************************/
/****************************************************************/
/*********************** Main styles ****************************/

/****** before inserting this code, re-write file js/junctions.js ******/

/****** before inserting this code, re-write file template/inc-header.php ******/

/****** before inserting this code, re-write file template/inc-bottom.php ******/

/****** before inserting this code, MOVE <div id="hamburger-wrap"> before <nav id='top-nav' class='cms-nav'> in template/inc-top-menu.php ******/

/****** before inserting this code, CHANGE line #455 to '1185px' in template/css/atf.navigation.css ******/

/****** for footer styles, overwrite file template/css/btf.footer.css ******/

/****** for dropdown menu styles, in template/css/atf.navigation.css line #101 change "width: 100%" to "width: calc(100% + 195px);" - "plus LOGO width" ******/

/***** Adding margin-top for header and height nopgbanner in case of E-comm top line *****/
.nopgbanner {
  height: 120px !important;
}

/* #header {
	margin-top: 40px;
  } */

#header-fixed {
  /* position: fixed; */
  position: relative;
  background: transparent !important;
  /* box-shadow: 0 0 7px #828282; */
}

.fixedContainer-opacity {
  position: absolute;
  width: 100%;
  height: 120px;
  top: 0;
  /* top: 40px;	*/ /***** Adding 40px top in case of E-comm top line *****/
  left: 0;
  background: white;
  opacity: 0.85;
  transition: all 0.5s;
  /* background: url("../../../images/bg_header-break.jpg") center no-repeat;
	  background-size: cover; */
}

.opacity-none {
  opacity: 1 !important;
  transition: all 0.5s;
}

.fixedContainer-opacity.opacity-none {
  height: 85px !important;
  transition: all 0.5s;
}

.topMenuBG {
  width: 100%;
  height: 120px;
}

.topMenuBG > .standard-width {
  display: flex;
}

#topMenuBG #header-logo {
  width: 250px;
  height: 120px;
  position: relative;
  display: inline-block;
  transition: all 0.4s;
}

#topMenuBG #header-logo:hover {
  opacity: 0.7;
  transition: all 0.4s;
}

#topMenuBG #header-logo a {
  width: unset;
  display: unset;
  height: unset;
  position: unset;
}

@media (min-width: 1186px) and (max-width: 1290px) {
  #topMenuBG #header-logo {
    margin-left: 1em;
  }
}

#topMenuBG #header-logo.logoWidthSmall {
  width: 180px !important;
  height: 80px;
  transition: all 0.2s;
}

#topMenuBG #header-logo.logoWidthSmall a {
  width: 180px !important;
  transition: all 0.2s;
}

#topMenuBG #header-logo a img {
  height: auto;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#topMenuBG #headerRight {
  display: flex;
  flex: 1;
  height: 120px;
  position: relative;
  align-items: flex-end;
  margin: 0 0 0 1rem;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 1186px) and (max-width: 1290px) {
  #headerRight {
    margin-right: 1em;
  }
}

#topMenuBG.opacity-none,
#topMenuBG.opacity-none #headerRight {
  height: 80px;
}

#topMenuBG #headerRight .topHeaderContact {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.25rem;
}
/****************************************/
/* this line, in case no up-menu buttons */
@media (min-width: 1186px) {
  /* #topMenuBG #headerRight .topHeaderContact {
	  display: none;
	} */
}

#headerRight .topHeaderContact p {
  margin-bottom: 0;
  margin-top: 0.5rem;
}

#top-nav-wrap {
  flex: 1;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
}

.div-phone-icon {
  display: none;
}

.jsGallery .insetSmall {
  display: none;
}

/* custom style */
#Key_Ingredients ul li::before {
  content: "";
  display: inline-block;
  height: 15px;
  width: 15px;
  background-image: url("../../images/list-icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: -15px;
  padding-right: 5px;
}

#Key_Ingredients ul > li::before {
}

/****** before inserting this code, COMMENT OUT all .insetLarge and .insetSmall in template/modules/galleries/frontend/btf.displaygallery.css ******/
/****** before inserting this code, COMMENT OUT all .insetLarge in template/css/atf.banner.css ******/

/**********************************************************************/
/*********************** insetLarge, start ****************************/
.insetLarge {
  width: 100%;
  height: calc(100% - 120px);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 60px;
}

.insetLarge > .standard-width {
  width: 100%;
}

.insetLarge .banner-header {
  color: black;
  font-size: 2.8rem;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 0 5px white;
  line-height: 1.35em;
  xtext-transform: uppercase;
  xfont-family: "Montserrat", sans-serif;
}

.insetLarge p {
  margin: 0.5rem auto;
  color: black;
  text-align: center;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2.1rem;
  width: 60%;
  /* text-transform: uppercase; */
  text-shadow: 0 0 5px white;
}

.insetLarge p:last-child {
  margin-top: 2rem;
  margin-bottom: 0;
  text-shadow: none;
}

#header .insetLarge p a.btn {
  color: white;
  font-weight: 500;
  font-size: 1rem;
  padding: 0.4rem 1rem;
  border: 1px solid transparent;
  text-transform: uppercase;
  text-shadow: none;
  background: #39b3e4;
  border: 1px solid #39b3e4;
  white-space: nowrap;
  line-height: 1.35rem;
  transition: all 0.4s;
}

#header .insetLarge p a.btn:hover {
  background: white;
  color: black;
  border: 1px solid #39b3e4;
  transition: all 0.4s;
}

/* Converters style start */

#converters {
  max-width: 500px;
  margin: 0 auto;
}

.converter-title {
  color: #1570a6;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 30px 0 10px;
  margin: 0;
}

.converter {
  background: #1570a6;
  border-radius: 15px;
  padding: 20px;
}

.converter p,
#cbm_result {
  margin: 0;
  color: white;
  padding: 2px;
}

.converter input,
.converter select {
  width: 90%;
  border-radius: 2px;
  border: 0;
  padding: 10px;
  margin-bottom: 10px;
}

.converter select {
  margin: 15px 0;
}

.length-converter-field,
.temperature-converter-field,
.volume-converter-field,
.weight-converter-field {
  display: flex;
}

/* Converters style end */

/* freight-resources-table style start */
.freight-resources-table-container table {
  border-collapse: collapse;
  caption-side: top;
  color: #888;
  font-size: 0.9rem;
  margin: 0 auto;
}

.freight-resources-table-container p {
  margin: 3px;
  color: #888;
  font-size: 0.9rem;
}

.freight-resources-table-container caption {
  text-align: left;
  position: fixed;
  left: 0;
  top: 0;
}

.freight-resources-table-container td,
.freight-resources-table-container th {
  border: 1px solid white;
  padding: 10px;
  box-sizing: border-box;
  text-align: left;
}

.freight-resources-table-container {
  position: relative;
  /* max-height: 600px; */
  width: 95%;
  overflow: scroll;
  overflow-y: hidden;
}

.freight-resources-table-container thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: #f8743a;
  color: #fff;
  text-align: center;
}

.freight-resources-table-container .blue {
  background-color: #2d91cc;
}

.freight-resources-table-container thead th:first-child {
  left: 0;
  z-index: 3;
}

.freight-resources-table-container tbody {
  overflow: scroll;
  height: 200px;
}

/* MAKE LEFT COLUMN FIXEZ */
.freight-resources-table-container tr > :first-child {
  position: -webkit-sticky;
  position: sticky;
  background-color: #dfdfdf;
  left: 0;
  color: rgb(102, 102, 102);
  font-weight: 600;
  min-width: 200px;
}

.freight-resources-table-container tr:nth-child(even) {
  background-color: #f2f2f2;
}
/* freight-resources-table style end */

@media only screen and (max-width: 1290px) {
  .insetLarge .standard-width {
    /* padding: 1.5rem; */
    width: calc(100% - 3rem);
  }
}

@media only screen and (max-width: 1185px) {
  .insetLarge {
    height: auto;
    /* margin-top: 80px; */
  }
}

@media only screen and (max-width: 1080px) {
  .insetLarge .banner-header {
    font-size: 1.8rem;
  }
}

@media only screen and (max-width: 1040px) {
  .insetLarge p {
    margin: 0 auto;
    line-height: 1.5rem;
    font-size: 1rem;
  }

  #header .insetLarge p a.btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
  }

  /* .insetLarge p:last-child {
	  margin-top: 0.5rem;
	} */

  .insetLarge p a.cms-button-a,
  .insetLarge p a.cms-button-a:visited {
    margin-bottom: 0;
  }
}

@media only screen and (max-width: 899px) {
  .insetLarge {
    height: 100%;
    /* margin-top: 0; if there is no ecomm top line */
    margin-top: 0;
  }
}

@media only screen and (max-width: 767px) {
  .insetLarge .banner-header {
    font-size: 1.4rem;
  }

  /* .insetLarge p {
		  width: 100%;
		  line-height: .5rem;
	  } */

  .insetLarge p:last-child {
    width: 100%;
    margin-top: 1rem;
  }

  .insetLarge p a.cms-button-a:nth-of-type(1) {
    margin-right: 0.5rem;
  }

  .table-mint {
    width: 100%;
  }

  .div-home-video,
  .div-home-promote {
    min-height: auto;
  }

  .freight-quote-form {
    width: calc(100% - 3rem);
  }
}

@media only screen and (max-width: 550px) {
  #header .insetLarge p a.btn {
    padding: 0.3rem 0.6rem;
  }
}

@media only screen and (max-width: 500px) {
  .insetLarge p {
    font-size: 0.9rem;
  }

  .btn-top-header-join,
  .btn-top-header-donate {
    display: none;
  }
}

@media only screen and (max-width: 479px) {
  .insetLarge .banner-header {
    font-size: 1.3rem;
    line-height: 1.4rem;
  }

  .insetLarge p {
    width: 90%;
  }

  /* .rich-history {
	  margin-top: -5rem;
	}
  
	.column-text.rich-history > div p {
	  width: 250px;
	}
  
	.rich-history img {
	  border: 2px solid #e84924;
	}
	
	
	.rich-history > div:nth-of-type(1) img {
	  border: 2px solid #d5dc30;
	}
	
	.rich-history > div:last-child img {
	  border: 2px solid #88c932;
	}
  
	.column-text.rich-history > div {
	  margin-bottom: 1rem;
	} */
}

@media only screen and (max-width: 360px) {
  .insetLarge .standard-width {
    padding: 0;
  }
}
/***********************************************************************/
/*********************** insetLarge, finish ****************************/

@media only screen and (max-width: 1185px) {
  #top .jsGallery {
    margin-top: 80px;
  }

  #header-fixed {
    position: fixed;
    width: 100%;
    max-width: 100%;
    z-index: 1000;
    top: 0;
    background: #fff;
    box-shadow: 0 0 7px #828282;
  }

  .fixedContainer-opacity {
    opacity: 1;
    height: 80px;
  }

  #topNav {
    display: block !important;
    order: 3;
  }

  #topMenuBG #header-logo {
    width: 180px;
    height: 80px;
  }

  #header-logo a {
    width: 250px;
  }

  .topHeaderContact {
    display: none;
  }

  #headerRight {
    margin-right: 0.5rem;
    float: right;
    flex: 1;
    position: relative;
    right: unset;
    display: block;
  }

  #headerRight .topHeaderContact p {
    display: none;
  }

  #headerRight .topHeaderContact {
    border-bottom: none;
    position: absolute;
    right: 6rem;
    margin: 1px 0 0 0;
    z-index: 100;
  }

  #topMenuBG #headerRight {
    height: 80px;
    right: 0;
  }

  #top-nav-wrap {
    display: block !important;
    position: relative;
    margin-top: 80px;
    clear: both;
  }

  #hamburger-wrap {
    clear: both;
    display: block !important;
    width: 30px;
    float: right;
    /* position: relative; */
    position: absolute;
    top: -62px;
    right: 0;
    background: transparent !important;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 700;
    color: #2c2a28;
    text-align: right;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0;
    padding: 0.4em 0 0.4em 0;
    line-height: 34px;
  }

  .hamburger {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
  }

  .hamburger-line {
    width: 100%;
    height: 3px;
    background: #231f20;
    transition: all 0.2s ease-in-out;
  }

  .hamburger .hamburger-line::before,
  .hamburger .hamburger-line::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    left: 0;
    background: #231f20;
    transition: all 0.2s ease-in-out;
  }

  .hamburger .hamburger-line::before {
    transform: translateY(-7px);
  }

  .hamburger .hamburger-line::after {
    transform: translateY(7px);
  }

  /*  ANIMATION for Hamburger Menu  */
  .hamburger.openHamburgerMenu .hamburger-line {
    transform: translateX(-50px);
    background: transparent;
  }
  .hamburger.openHamburgerMenu .hamburger-line::before {
    transform: rotate(45deg) translate(35px, -35px);
  }
  .hamburger.openHamburgerMenu .hamburger-line::after {
    transform: rotate(-45deg) translate(35px, 35px);
  }

  .topMenuBG {
    height: 80px;
  }

  .div-phone-icon {
    display: flex;
    float: right;
    width: 24px;
    height: 24px;
    margin: 7px -32px 0 0;
    align-items: center;
  }

  .div-home-contact-us-container {
    background: url(../../images/bg_div-home-contact_short.jpg) center no-repeat;
    background-size: cover;
  }

  .home-contact-us {
    width: 40%;
    -ms-transform: translate(-95%, -50%);
    transform: translate(-95%, -50%);
  }
}

@media only screen and (max-width: 899px) {
  .fixedContainer-opacity {
    opacity: 1;
    height: 80px;
  }

  .div-home-logistics .column-text {
    display: block;
  }

  .home-contact-us {
    width: 35%;
    padding: 1.5rem;
  }

  #sidebar-top {
    display: none;
  }
}

@media only screen and (max-width: 679px) {
  .copyrightContainer .standard-width {
    display: block;
  }

  .copyrightContainer .copyright-p.copyright-p-right {
    text-align: left;
  }

  .copyrightContainer .copyright-p {
    padding: 0.25rem 0;
  }

  .main-services p.main-home-text {
    text-align: center;
  }
}

@media only screen and (max-width: 555px) {
  .home-contact-us {
    width: 60%;
    -ms-transform: translate(-65%, -50%);
    transform: translate(-65%, -50%);
  }
}

@media only screen and (max-width: 484px) {
  .footer-cols {
    padding: 0 !important;
  }

  .footer-logo {
    margin: 0 auto;
  }
}

@media only screen and (max-width: 479px) {
  .fixedContainer-opacity {
    height: 80px !important;
  }

  .topMenuBG {
    height: 80px !important;
  }

  #header-logo {
    height: 180px !important;
  }
}

@media only screen and (max-width: 375px) {
  #mobileMenu {
    margin: 0 0.5rem 0 0;
  }
}

/*********************** Main styles, Responsiveness ****************************/

@media only screen and (max-width: 1400px) {
}

@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 1185px) {
  .column-text {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
    grid-gap: 3rem 0;
  }

  .main-services .column-text p img {
    min-width: auto;
  }

  .main-services .column-text p:nth-of-type(2) {
    width: 285px;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 992px) {
}

@media only screen and (max-width: 899px) {
  /* .home-contact-us {
	  width: 60%;
	}
  
	.home-contact-opacity {
	  width: 65%;
	} */

  .column-text > div {
    margin-bottom: 3rem;
  }
}

@media only screen and (max-width: 768px) {
}

@media only screen and (max-width: 679px) {
  h1 {
    font-size: 1.4rem !important;
  }

  h2 {
    font-size: 1.25rem !important;
  }

  h3 {
    font-size: 1.1rem !important;
  }

  /* .home-contact-us {
	  width: 80%;
	} */

  .home-contact-opacity {
    width: 75%;
  }

  .home-contact-us h2 {
    white-space: nowrap;
    font-size: 1.4rem;
  }

  .div-home-testimonials {
    padding: 0rem 1.5rem;
  }

  .column-text {
    display: block;
  }

  .main-services .column-text > div {
    margin: 0 0 2rem;
  }
}

@media only screen and (max-width: 576px) {
}

@media only screen and (max-width: 479px) {
  /* .home-contact-us {
	  width: 95%;
	}
  
	.home-contact-opacity {
	  width: 85%;
	} */
}

@media only screen and (max-width: 375px) {
}

/* Overriding */
#side-nav.cms-nav .menu-parent-row > li > div {
  padding-top: 0.5em !important;
  padding-bottom: 0.5em !important;
}

.menu-child-row > li > div {
  white-space: normal !important;
}

#jobs-body {
  margin-bottom: 40px;
}

#jobinnercontent .cms-button-a {
  margin-bottom: 20px;
}


/* Banner text style */

.wrap-landing p {
    text-shadow: 0 0 3px white;
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    width: unset;
}


.wrap-landing p:nth-of-type(1) {
    font-size: 3.75rem;
    line-height: 1.05em;
    
}

@media only screen and (max-width: 860px) {
  .wrap-landing p {
    font-size: 1.4rem;
  }


  .wrap-landing p:nth-of-type(1)
   {
      font-size: 2.75rem;   
  }
}

@media only screen and (max-width: 660px) {
  .wrap-landing p {
    font-size: 1.2rem;
  }


  .wrap-landing p:nth-of-type(1)
   {
      font-size: 1.8rem;   
  }
}