/* This stylesheet is for CSS that will be added ontop of site.css. The reason this file exists is because site.less no longer compiles to site.css properly, so the less is unusable without conflict resolution */

/* Limits content to widht of viewport */
html {
  overflow-x:hidden;
}

/* COOKIE NOTICE STYLES */
div#hs-eu-cookie-confirmation {
  position:fixed !important;
  background:rgba(12,33,62,1) !important;
  width:80% !important;
  max-width:400px !important;
  top:50% !important;
  left:50% !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  box-shadow:none !important;
  border:2px solid #fff !important;
  border-radius:7px !important;
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner {
  background:none !important;
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner p {
  color:white !important;
  margin:0 !important;
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner p span {
  line-height:1.6 !important;
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner p a {
  color:#7EAB42 !important;
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-en-cookie-confirmation-buttons-area {
  text-align:left !important;
  margin-top:15px;
}

/* makes room for Eolex Energy in main nav */
@media (min-width: 768px) {
  #header .industries-dropdown {
    max-width:550px;
  }
}
@media (min-width: 992px) {
  #header #primary-nav>li {
    width:auto;
  }
  #header #primary-nav>li>a {
    padding: 12.5px 5px;
  }
}
@media (min-width: 1200px) {
  #header #primary-nav>li>a {
    padding: 12.5px 5px;
  }
  #header #primary-nav>li>a:before {
    display:none;
  }
  #header .industries-dropdown {
    max-width:630px;
  }
  #header .industries-dropdown li {
    width: 33%;
  }
}


/* adds styles to unstyled hubspot forms */
.hbspt-form label {
  font-weight:400;
}
.hbspt-form .hs-form-required {
  color:red;
  margin-left:4px;
}
.hbspt-form input[type=email], .hbspt-form input[type=text] {
  border:1px solid #ccc;
  width:100%;
  box-shadow:none;
  border-radius:3px;
  padding:4px 8px;
}
.hbspt-form input[type=email]:focus, .hbspt-form input[type=text]:focus {
  border-color: #97bf3c;
}
.hbspt-form .hs-error-msgs {
  padding:0;
  list-style-type:none;
}
.hbspt-form .hs-error-msgs li {
  padding:0;
}
.hbspt-form .hs-error-msg {
  color: red;
  font-weight: 400;
  padding-top: 3px;
}
.hbspt-form .hs-button {
  background: #97bf3c;
  border: 2px solid #97bf3c;
  text-transform: uppercase;
  padding: 8px 24px;
  color: #fff;
  margin-bottom: 10px;
  font-size: 14px;
}


/* HOME PAGE PRODUCTS & SOLUTIONS */
#home-buckets h5::after {
  display:none;
}


/* BLOG ARCHIVE */
.NewsPage .article-list article {
  display:flex;
  align-items:flex-start;
}
.NewsPage .article-list .expert-image {
  margin-right:15px;
  margin-top:15px;
}
@media (max-width:576px) {
  .NewsPage .article-list .expert-image {
    max-width:60px;
  }
}


/* QUIK GALLERY */
.quik-gallery img {
  height:180px;
  width:auto;
  display:inline-block;
  float:none !important;
  clear:none !important;
  margin-right:10px !important;
}
@media (min-width: 1032px) {
  .quik-gallery img {
    height:260px;
    margin-right:15px !important;
  }
}

/* BLOG SINGLE */
.typography img.center {
  max-width:100%;
}


/* BUTTON */
.more-btn {
  display: inline-block;
  color: #fff !important;
  background-color: #7EAB42;
  cursor: pointer;
  padding: 4px 14px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 12px;
  font-weight: 400;
  border: none;
  border-radius: 3px;
}
.more-btn:after {
  font-family: "FontAwesome";
  content: "\f054";
  font-size: 14px;
  margin-left: 5px;
}


/* ICON-TEXT COMPONENT */
.icon-text {
  display:flex;
  flex-direction:row;
  align-items:center;
  width:100%;
  max-width:540px;
  margin-bottom:20px;
}
.icon-text img {
  width:76px;
  margin-right:20px;
}
.icon-text p {
  font-size:16px;
  margin-bottom:0;
}
.icon-text p span {
  font-size:18px;
  font-weight:700;
}
.icon-text__double {
  display:flex;
  flex-direction:column;
}
.icon-text__double .icon-text {
  max-width:260px;
  margin-right:20px;
}
.icon-text__double .icon-text img {
  width:69px;
}
.icon-text__double .icon-text p {
  font-size:14px;
}
@media (min-width:540px) {
  .icon-text__double {
    display:flex;
    flex-direction:row;
  }
}
@media (min-width:992px) {
  .icon-text__double {
    display:flex;
    flex-direction:column;
  }
}
@media (min-width:1200px) {
  .icon-text__double {
    display:flex;
    flex-direction:row;
  }
}