/*
 Theme Name:     Divi Oilon
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Juha Kerminen
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/

@import url("../Divi/style.css");
/* =Theme customization starts here
------------------------------------------------------- */

/*{
    transition: all .4s;
    -moz-transition: all .4s;
    -webkit-transition: all .4s;
}*/

body.loading,
body.loading * {
  cursor: wait !important;
}

a {
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
h1,
h2 {
  font-weight: 700 !important;
}
h1 {
  margin-bottom: 20px;
  text-align: center;
}
h3,
h4 {
  font-weight: 600;
}
h1 {
  font-size: 50px !important;
  font-weight: 300 !important;
}
h2 {
  font-size: 32px;
}
h3 {
  font-size: 28px;
}
h4 {
  font-size: 20px;
}

/* Hide and display custom mobile header or "normal" h1 header */
@media (min-width: 401px) {
  h1.custom-mobile-header {
    display: none;
  }
  h1.custom-desktop-header {
    display: block;
  }
}
@media (max-width: 400px) {
  h1.custom-mobile-header {
    display: block;
  }
  h1.custom-desktop-header {
    display: none;
  }
}

a.et_pb_button {
  color: white !important;
}
.et_pb_button_wrapper a.et_pb_button,
.et_pb_button_wrapper a.et_pb_button:hover {
  color: white !important;
  padding: 12px 20px !important;
}
.et_header_style_left #et-top-navigation nav > ul > li > a {
  font-weight: 500;
  font-size: 16px;
}
.et-pb-active-slide .et_pb_slide_description {
  -webkit-animation-name: fadeIn;
  -moz-animation-name: fadeIn;
  -ms-animation-name: fadeIn;
  -o-animation-name: fadeIn;
}
.et_pb_slider .et_pb_slides .et_parallax_bg:after,
.reference-section .et_parallax_bg:after,
.et_pb_slider .et_pb_slides .et_pb_slide:after {
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: " ";
}
#main-header,
body .et-fixed-header#main-header {
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1) !important;
  -moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1) !important;
  -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1) !important;
  /*border-bottom: 1px solid #f2f2f2;*/
}
/* mobile menu styles */
#main-header .et_mobile_menu .menu-item-has-children > a {
  background-color: transparent;
  position: relative;
}
#main-header .et_mobile_menu ul.sub-menu {
  display: none !important;
  visibility: hidden !important;
  transition: all 1.5s ease-in-out;
}
#main-header .et_mobile_menu .visible > ul.sub-menu {
  display: block !important;
  visibility: visible !important;
}

#main-header .et_mobile_menu .after {
  float: right;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 500;
  font-size: 20px;
  color: #005696;
}
#main-header .et_mobile_menu .menu-item-has-children > a {
  width: 90%;
}

#et-secondary-menu {
  padding-top: 5px;
}
@media (max-width: 980px) {
  #et-secondary-menu {
    /* padding-top: 0px;
        padding-bottom: 0.75em; */
  }
}
#top-menu li li a {
  line-height: 24px;
}
#et-secondary-nav .menu-item-has-children > a:after {
  color: #ed1b2e;
}
/*#et-secondary-menu, #et-secondary-nav, #et-secondary-nav li, #et-secondary-nav .sub-menu {
    width: 100%;
}*/
#et-secondary-nav li {
  margin-right: 0px;
}
#et-secondary-menu > ul > li a {
  font-size: 14px;
}

/* ---------------------------------------- Top header search form ---------------------------------------- */

/* Remove unnecessary padding */
#top-header .container {
  height: 100%;

  padding-top: 0;
}
#top-header #et-secondary-menu {
  display: flex;
  height: 100%;
  padding-top: 0;
}

#top-header #et-secondary-nav li {
  height: 100%;
}

/* Vertically center menu items when visible */
#top-header .lang-select:not(.hide) {
  display: flex !important;
  align-items: center;
}
#top-header .menu-close.show {
  display: flex !important;
  align-items: center;
}
/* Set clickable item heights to 30px and justify vertically */
#top-header #et-secondary-nav li a {
  display: flex;
  align-items: center;

  height: 30px;

  /* Disable text selection */
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}
#top-header #et-secondary-nav li a:after {
  height: 100%;
}

/* Make dropdown appear immediately below top header */
.lang-select-dropdown.show {
  margin-top: 44px;
}

/* Style search form */
#top-header .search-form {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
#top-header .search-form .search-submit {
  width: 30px;
  height: 30px;
  padding: 0px;
  border: none;
  background: white url("/wp-content/themes/Divi-oilon/media/icon/search.png") no-repeat;
  background-size: cover;
  color: transparent;
}
@media (min-width: 981px) {
  #top-header .search-form .search-submit:hover {
    cursor: pointer;
  }
}
#top-header .search-form label {
  display: flex;
  align-items: center;
  height: 100%;
}
#top-header .search-form input {
  height: 30px;
}
#top-header .search-form .search-field {
  padding-left: 5px;
  border: 0;
}

@media (max-width: 980px) {
  #top-header {
    height: 44px;
  }

  #top-header #et-secondary-nav {
    width: 150px;
  }
  #top-header .search-form .search-field {
    width: 120px;
  }
  #top-header #et-secondary-menu {
    justify-content: space-between;
  }

  /* Re-enable block visibility, messed up by Divi */
  #top-header,
  div#et-secondary-menu,
  ul#et-secondary-nav {
    display: flex !important;
  }
}

/* ---------------------------------------- Language select dropdown ---------------------------------------- */

.lang-select > a,
.menu-close > a {
  height: 18px;
  width: 142px;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center;
}

.lang-select > a::before,
.menu-close > a::before {
  display: inline-block;
  content: " ";
  background-image: url("./media/img/globe-solid.svg");
  background-size: 18px 18px;
  height: 18px;
  width: 18px;

  margin-right: 10px;
}

.lang-select a,
.menu-close a {
  padding-right: 20px;
}
.lang-select a:after,
.menu-close a:after {
  display: flex;
  align-items: center;

  height: 18px;

  font-family: ETmodules;
  content: "3";
  font-size: 16px;
  position: absolute;
  right: 0;
  top: 0;
  font-weight: 800;
  color: #ed1b2e;
}
#et-secondary-nav li.lang-select.hide {
  display: none;
}
.lang-select-dropdown {
  /*display: none;*/
  opacity: 0;
  visibility: hidden;
  position: absolute;
  width: 100%;
  background: #f2f2f2;
  left: 0px;
  padding: 15px 8% 30px 8%;
  transition: all 0.2s;
  -moz-transition: all 0.2s;
  -webkit-transition: all 0.2s;
}
.lang-select-dropdown.show {
  /*display: block;*/
  opacity: 1;
  visibility: visible;
  padding: 40px 8% 45px 8%;
  transition: all 0.4s;
  -moz-transition: all 0.4s;
  -webkit-transition: all 0.4s;
}
/* Enable scrolling on very thin but wide screens (e.g. sideway phones) */
@media (max-width: 980px) {
  .lang-select-dropdown.show {
    max-height: calc(100vh - 44px);
    overflow: scroll;
  }
}
.lang-select-dropdown .special-case {
  position: absolute;
  top: 0;
  font-weight: 500;
  font-size: 14px;
  border-left: none;
}
@media (max-width: 980px) {
  .lang-select-dropdown .special-case {
    position: relative;
    width: 96%; /* 2x 48% normal width */
  }
}

.lang-select-dropdown ul {
  display: inline-block;
  vertical-align: text-top;
  width: 24%;
  padding-right: 10px;
  /* border-left: 1px solid #dbdbdb; */
}
/* Remove center-align text forced by Divi */
@media (max-width: 767px) {
  .lang-select-dropdown ul {
    text-align: left;
  }
  #top-header .container {
    width: 90%;
  }
}

/* .lang-select-dropdown ul:nth-child(2) {
    border-left: none;
} */
.lang-select-dropdown li {
  list-style: none;
  line-height: initial;
}
.lang-select-dropdown li a {
  cursor: pointer;
  padding-top: 5px;
  padding-bottom: 6px;
  display: block;
  font-weight: 500;
  font-size: 14px;
}

#top-header .lang-select-dropdown li a:hover {
  color: #005696;
}
.lang-select-dropdown li:first-child {
  font-size: 28px;
  margin-bottom: 15px;
}
#et-secondary-nav li.menu-close {
  display: none;
}
#et-secondary-nav li.menu-close.show {
  display: inline-block;
}

.lang-select-dropdown li.active a {
  font-weight: bold;
}
.lang-select-dropdown li.active::before {
  content: "\2713";
  position: absolute;
  padding-top: 5px;
  padding-bottom: 6px;
  display: block;
  font-weight: bold;
  font-size: 14px;
  margin-left: -15px;
}

@media (min-width: 981px) {
  .lang-select-dropdown ul:not(.special-case):not(:nth-child(2))::before {
    content: "";
    width: 0;
    height: calc(100% - 40px - 45px);
    position: absolute;
    border-left: 1px solid #dbdbdb;
    top: 40px;
  }
  .lang-select-dropdown ul > * {
    padding-left: 30px;
  }
}

.ff-stream {
  background-color: transparent !important;
  min-height: 750px !important;
}
.ff-filter-holder .ff-search {
  display: none !important;
}
.ff-stream .picture-item__inner:before {
  transition: background 0.2s;
  -moz-transition: background 0.2s;
  -webkit-transition: background 0.2s;
}
.ff-item {
  box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1);
}
#footer-bottom {
  display: none;
}
#main-footer .textwidget img {
  width: 30px;
  height: auto;
  margin-top: 15px;
  margin-right: 14px;
}
#main-footer p {
  padding-bottom: 12px;
}
#main-footer .textwidget a {
  opacity: 1;
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
#main-footer .textwidget a:hover {
  opacity: 0.8;
}
.lightbuttons {
  margin-top: 10px;
}
.lightbuttons a {
  border: 1px solid #e2e2e2;
  border-radius: 3px;
  padding: 7px 14px;
  display: inline-block;
  margin-bottom: 5px;
}
.lightbuttons a:hover {
  border: 1px solid #005696;
}
.product-section img {
  margin-bottom: 30px;
}
.wp-block-group__inner-container {
  padding-bottom: 20px;
}

@media (min-width: 981px) {
  /*
    #top-header generates with height 43.5px, but #main-header adds top: 44px; style --> 0.5px of "empty" space
    */
  #top-header {
    height: 44px;
  }

  .et_pb_section {
    /* margin-left: 20px;
        margin-right: 20px; */
  }
  .container {
    width: 85%;
  }
  .et_pb_row {
    width: 85%;
  }
}

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

@media (max-width: 980px) {
  .et_fixed_nav #main-header,
  .et_fixed_nav #top-header {
    position: fixed;
  }
  #et-secondary-nav {
    text-align: right;
  }
  #top-header .container {
    /* padding-top: 0.75em !important; */
  }
  .et_secondary_nav_only_menu #main-header {
    top: 42px !important;
  }
  /*.et_secondary_nav_only_menu .et-fixed-header#main-header {
        top: 0px!important;
    }*/
  .lang-select-dropdown {
    padding: 15px 3% 30px 3%;
  }
  .lang-select-dropdown.show {
    padding: 30px 3% 45px 3%;
  }
  .lang-select-dropdown ul {
    padding-left: 20px;
    width: 48%;
    border-left: none;
    padding-bottom: 20px;
  }
  .lang-select-dropdown li:first-child {
    font-size: 24px;
    margin-bottom: 18px;
  }
  #mobile_menu li:not([id]) {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .container,
  .et_pb_row {
    width: 88%;
  }
  h1 {
    font-size: 32px !important;
  }
  .wp-block-image .aligncenter {
    margin-left: 0;
    margin-right: 0;
  }
  .frontpage-top-slider .et_pb_slide_content h2 {
    font-size: 30px;
  }
}

@media (max-width: 479px) {
}

@keyframes intro {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* ---------------------------------------- Divi fixes ---------------------------------------- */

/* Enable mobile dropdown menu to be scrolled + set its height */
@media (max-width: 980px) {
  #mobile_menu {
    max-height: calc(100vh - 80px - 44px);
    overflow: auto;
  }
}

/* Re-enable list bullet points in page content (disabled by style.css by Divi) */
#et-main-area ol,
#et-main-area ul {
  list-style: disc;
  padding-bottom: 1em;
  padding-left: 1em;
}

@media (min-width: 981px) {
  .divi-row-our-values {
    display: flex;
    align-items: center;
  }
}

/* Enable full-width images in Gutenberg editor to use full page width (instead of container width) */
/* .alignwide {
    margin-left: -80px;
    margin-right: -80px;
    max-width: 100vw;
  }

.alignfull {
    margin-left: calc(-100vw / 2 + 100% / 2);
    margin-right: calc(-100vw / 2 + 100% / 2);
    max-width: 100vw;
}
  .alignfull img {
    width: 100vw;
} */

/* Limit logo size, no overlap header goes to two rows */
@media (min-width: 981px) {
  .logo_container #logo {
    max-height: 56px;
  }
  .et-fixed-header .logo_container #logo {
    max-height: 36px;
  }
}

/* Fix horrible magnifying glass position when header goes to two rows */
@media (min-width: 981px) {
  #et_top_search {
    position: absolute;
    right: -40px;
  }
}

/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {
  background: none;
}

/*** Hide Sidebar ***/
#sidebar {
  display: none;
}

/**
Expand content area to full width
https://www.elegantthemes.com/blog/divi-resources/how-to-remove-sidebars-from-divi
*/
@media (min-width: 981px) {
  #left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
    float: none !important;
  }
}

/* Force logo image to stay at reasonable size, new width: auto; by Divi forces it to be too wide in some situations */
#logo {
  max-width: 180px;
}

/* ---------------------------------------- Kadence Gutenberg blocks ---------------------------------------- */

@media (min-width: 981px) {
  .kadence-contact-info .kt-tabs-title-list {
    display: flex;
    justify-content: center;
  }
  .kadence-contact-info .kt-tab-inner-content-inner {
    text-align: center;
  }

  .kadence-contact-info .wp-block-column {
    text-align: center;
    min-width: 350px;
  }

  .kadence-contact-info figure {
    display: block !important;
    margin: auto;
    margin-top: 20px;
  }
}

@media (min-width: 981px) {
  .kadence-location-info .kt-tabs-title-list {
    display: flex;
    justify-content: center;
  }
  .kadence-location-info .kt-tab-inner-content-inner {
    text-align: center;
  }

  .kadence-location-info .wp-block-column {
    text-align: center;
    min-width: 350px;
  }

  .kadence-location-info figure {
    display: block !important;
    margin: auto;
    margin-top: 20px;
  }
}

.kadence-contact-info h3 {
  margin-top: 20px;
}
.kadence-contact-info p {
  padding-bottom: 4px;
}

/* ---------------------------------------- Responsive tabs ---------------------------------------- */

.responsive-tabs .responsive-tabs__list {
  display: flex;
  justify-content: center;
  padding-bottom: 0 !important;
}

@media (min-width: 981px) {
  .responsive-tabs .tabcontent {
    text-align: center;
    min-width: 350px;
    min-height: 400px;
  }

  .responsive-tabs figure {
    display: block !important;
    margin: auto;
    margin-top: 20px;
  }

  .responsive-tabs .responsive-tabs__list__item--active {
    /* background-color: rgb(0, 86, 150) !important;
        color: white !important; */

    color: rgb(0, 86, 150) !important;
    font-weight: bold !important;
  }
}

/* ---------------------------------------- Top Header ---------------------------------------- */

/* Add pointer cursor to empty a-element hover (Select region -item) */
#et-secondary-menu > ul > li > a:hover {
  cursor: pointer;
}

/* ---------------------------------------- Frontpage top slide ---------------------------------------- */

.frontpage-top-slider h2 {
  font-size: 3rem;
  /* text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9); */
}

/* ---------------------------------------- Main Header ---------------------------------------- */

/*
https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting
*/
.menu-item-noselect {
  /* cursor: pointer; */

  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

.nav li ul {
  width: 300px;
}
nav li ul > li {
  width: 100% !important;
}
nav li ul > li > a {
  width: 100% !important;
}

/* ---------------------------------------- Material bank ---------------------------------------- */

.file-container {
  display: flex;
}
.file-thumbnail {
  width: 20%;

  display: flex;
  justify-content: center;
  align-items: center;
}
.file-content {
  width: 80%;

  padding: 20px;
  box-sizing: content-box; /* takes padding into account when calculating height and width */
}

/* -------------------- Material bank styling -------------------- */
.materialbank-no-results {
  margin-top: 10px;
  padding: 5px;
}

#material-bank-search-form {
  display: flex;
  flex-wrap: wrap;

  background-color: rgb(9, 78, 144);
  padding: 40px;
}
@media (max-width: 980px) {
  #material-bank-search-form {
    padding: 10px;
  }
}
#material-bank-search-form > div {
  font-size: 0; /* removes whitespace between input-elements */
}
#material-bank-search-form > div > * {
  width: 200px;
  height: 50px;
  margin: 5px;
}
@media (max-width: 980px) {
  #material-bank-search-form > div > * {
    width: 100%;
    max-width: calc(100% - 10px);
  }
}
#material-bank-search-form > div > * > option {
  min-width: 200px;
}

/* Disable default select dropdown UI and replace it with red triangle */
#material-bank-search-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: 14px;
  background-image: linear-gradient(45deg, transparent 50%, red 60%), linear-gradient(135deg, red 40%, transparent 50%) !important;
  background-position: calc(100% - 15px) 20px, calc(100% - 5px) 20px, 100% 0;
  background-size: 10px 10px, 10px 10px;
  background-repeat: no-repeat;
}
#material-bank-search-form select:hover {
  cursor: pointer;
}

/* IE compatibility (it draws its own arrows) */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  #material-bank-search-form select {
    background-image: none !important;
  }
}

#material-bank-search-form #search,
#material-bank-search-form select {
  padding: 12px;
  font-size: 14px;
}

#material-bank-results {
  margin-bottom: 45px;
  position: relative;
}

#material-bank-results .results-details-container {
  display: none;
}

.file-container {
  background: #f2f2f2;
  margin: 10px 0px;
  padding: 20px;
}

/* ---------------------------------------- Single product ---------------------------------------- */

#product-area {
  background-color: #f8f8f8;
}

@media (min-width: 981px) {
  #product-area,
  .single-products #left-area {
    padding-top: 120px;
    padding-bottom: 100px;

    /* margin-left: 20px;
        margin-right: 20px; */

    padding-left: 20px;
    padding-right: 20px;
  }

  .product-container {
    display: flex;
    width: 85%;
    margin: auto;
  }

  .product-container .picture-column {
    width: 47.25%;
    margin-right: 5.5%;
  }
  .product-container .content-column {
    width: 47.25%;
  }

  .product-capacity-range > div {
    margin-left: 5px;
  }

  /* Hide mobile link list in desktop mode */
  .product-container .third.mobile-view {
    display: none;
  }
}

@media (max-width: 980px) {
  .product-container {
    display: flex;
    flex-direction: column;
  }

  .product-container .product-description {
    padding: 10px;
  }

  .product-container .product-capacity-range {
    text-align: center;

    margin-top: 10px;
    margin-bottom: 10px;
  }

  .product-container .picture-column {
    width: 100%;
  }
  .product-container .content-column {
    width: 100%;
    padding: 15px;
  }

  /* Hide desktop link list in mobile mode */
  .product-container .third.desktop-view {
    display: none;
  }
}

/* Center image */
.product-image > img {
  display: block;
  margin: auto;
}

.product-links {
  display: flex;
  flex-wrap: wrap;
}
.product-links .link {
  /* flex-grow: 1; */
  flex: 1 1 200px;

  margin: 5px;
}
.product-links .link a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  width: 100%;
  height: 100%;

  background-color: #005696;
  color: white;

  border-radius: 3px;
  padding: 10px;
}

.product-links .link a:hover {
  background-color: #063460;
}

/* ---------------------------------------- Product list ---------------------------------------- */

.product-list .product {
  display: flex;
  min-height: 150px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-bottom: 25px;
  padding-top: 15px;
  border: 2px solid transparent;
  position: relative;
}
.product-list .product a {
  font-size: 20px;
}
.product-list .product::after {
  content: "";
  bottom: 0;
  position: absolute;
  width: 100%;
  border-bottom: 2px solid #f2f2f2;
}

/* Mobile */
@media (max-width: 767px) {
  .product-list .product {
    flex-wrap: wrap;
  }
  .product-list .product .image {
    width: 100%;
  }
  .product-list .product .title {
    width: 100%;

    text-align: center;
  }
  .product-list .product .capacity-range {
    flex: 100%;
    order: 3;

    text-align: center;
    margin-top: 20px;
  }
}
/* Tablet */
@media (min-width: 768px) {
  .product-list .product {
    flex-wrap: wrap;
  }
  .product-list .product .image {
    width: 35% !important;
    padding-right: 20px;
  }
  .product-list .product .title {
    width: 65% !important;
  }
  .product-list .product .capacity-range {
    flex: 100%;
    order: 3;

    text-align: center;
    margin-top: 20px;
  }
}
/* Desktop */
@media (min-width: 981px) {
  .product-list .product > div {
    flex-grow: 1 !important; /* Set divs to equal width in desktop mode */
    flex-basis: 0 !important;
    padding: 0px 10px;
  }
}

.product-list .title {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.product-list .capacity-range {
  display: flex;
  flex-direction: column;
  justify-content: center;

  font-size: 20px;
}

.product-list .image {
  display: flex;
  justify-content: center;
}
.product-list .image img {
  max-height: 100%;

  object-fit: contain;
}
@media (min-width: 981px) {
  .product-list .image img {
    max-width: 200px;
  }
}
@media (max-width: 980px) {
  .product-list .image img {
    max-width: 100%;
  }
}

/* ---------------------------------------- Single reference ---------------------------------------- */

/* Hide published-field under the title in references single page */
.single-references .post-meta {
  display: none;
}

.single-references article {
  max-width: 1000px;
  margin: auto;
}

/* ---------------------------------------- References ---------------------------------------- */

#references-results {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.reference-card {
  display: flex;
  flex-direction: column;
  height: 500px;
  border-radius: 0.25rem;
  border: thin solid #f2f2f2;
}
@media (min-width: 981px) {
  .reference-card {
    width: 49%;
    margin-top: 1%;
    margin-bottom: 1%;
  }
}
@media (max-width: 980px) {
  .reference-card {
    width: 100%;
    height: auto;
    min-height: 250px;

    margin-top: 10px;
    margin-bottom: 10px;
  }
}

.reference-thumbnail {
  display: flex;
  display: -ms-flexbox;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 80%;
  width: 100%;
}
.reference-thumbnail img {
  object-fit: cover;
  width: 100%;
  height: 100%;

  border-radius: 0.25rem 0.25rem 0 0; /* round top left/right corners of image */
}
.reference-thumbnail img:hover {
  /* NOTE: replaced with background-color rule in .reference-excerpt */
  /* filter: brightness(50%); */
}
@media (min-width: 981px) {
  .reference-thumbnail:hover .reference-excerpt {
    pointer-events: none;
    opacity: 1;
    padding-left: 35px;
    padding-right: 35px;
  }
}

/* Internet explorer 11 compatibility */
/* https://jonathannicol.com/blog/2014/06/16/centre-crop-thumbnails-with-css/ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .reference-thumbnail {
    overflow: hidden;
  }
  .reference-thumbnail img {
    position: absolute;
    left: 50%;
    top: 50%;
    height: auto;
    width: 100%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}

.reference-thumbnail .reference-excerpt {
  position: absolute;
  top: 0;
  left: 0;

  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;

  overflow: hidden;
  max-height: 100%;
  max-width: 100%;

  padding: 20px;
  opacity: 0;
  color: white;

  background-color: rgba(0, 0, 0, 0.5);
}

/* -------------------- References styling -------------------- */

#references-search-form {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  /*background-color: rgb(9, 78, 144);*/
}

.category-name {
  padding: 10px 15px;
  margin: 10px;
  border-radius: 3px;
  /*color: white;*/
  border: thin solid white;
  cursor: pointer;
  margin: 5px;
  background: #f2f2f2;
}
.category-name:hover {
  background-color: #e2e2e2;
}
.category-name[selected] {
  background-color: #005696;
  color: white;
}
@media (max-width: 980px) {
  .category-name {
    flex: 1 1 200px;
  }
  .category-name.all {
    flex: 1 1 1000px; /* Make All categories -item always full width in mobile mode */
  }
}

.reference-title {
  color: black;
  padding: 5px;
  margin-top: 14px;
  font-size: 18px;
  text-align: center;
}
.reference-indicator {
  text-align: center;
  margin-bottom: 15px;
}

/* ---------------------------------------- Single post ---------------------------------------- */

.single-post article {
  max-width: 1000px;
  margin: auto;
}

/* ---------------------------------------- Forms ---------------------------------------- */

.wpcf7 {
  width: 950px;
  max-width: 100%;
  margin: auto;
  margin-top: 10px;
}
.wpcf7-form input,
.wpcf7-form select {
  background-color: #e4f1fd;
  height: 58px;
  padding: 20px;
  color: #333;
  font-size: 14px;
  margin-top: 5px;
  margin-bottom: 5px;
  border: none;
}
.wpcf7-form textarea {
  background-color: #e4f1fd;
  padding: 20px;
  margin-top: 5px;
  margin-bottom: 5px;
  border: none;
}
.wpcf7-form input[type="submit"] {
  padding: 10px 20px;
  cursor: pointer;
  margin-bottom: 15px;
  border-radius: 3px;
  background: #005696;
  color: white;
  height: 50px;
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
.wpcf7-form input[type="submit"]:hover {
  background: #063460;
  color: white;
}

.wpcf7-form > p {
  padding-top: 1em;
}

.kt-tabs-title-list li.kt-tab-title-active .kt-tab-title {
  background: #005696 !important;
}
.kt-tabs-id_1e4e00-62 > .kt-tabs-content-wrap > .wp-block-kadence-tab {
  border-top: 2px solid #f2f2f2 !important;
  padding-top: 35px;
}
.kt-tabs-wrap .wp-block-kadence-tab {
  padding-top: 40px !important;
}

/* Set position form submit button to right side */
.wpcf7-form > p:last-of-type {
  display: flex;
  justify-content: flex-end;
}
.wpcf7-form > p > input {
  order: 2;
}
.wpcf7-form > p > span {
  order: 1;
}

.wpcf7-form .one-item > span {
  width: 100%;
}
.wpcf7-form .one-item > span > * {
  width: 100%;
}

.wpcf7-form .two-items {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.wpcf7-form .two-items > span {
  width: 49%;
}
.wpcf7-form .two-items > span > * {
  width: 100%;
}
@media (max-width: 980px) {
  .wpcf7-form .two-items > span {
    width: 100%;
  }
}

.wpcf7-form .three-items {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.wpcf7-form .three-items > span {
  width: 32%;
}
.wpcf7-form .three-items > span > * {
  width: 100%;
}
@media (max-width: 980px) {
  .wpcf7-form .three-items > span {
    width: 100%;
  }
}

.wpcf7-form .four-items {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.wpcf7-form .four-items > span {
  width: 24%;
}
.wpcf7-form .four-items > span > input {
  width: 100%;
}
@media (max-width: 980px) {
  .wpcf7-form .four-items > span {
    width: 100%;
  }
}

.custom-select .wpcf7-list-item > label > span {
  padding: 10px;
  cursor: pointer;
}

/* -------------------- Form multi-select fields -------------------- */

.custom-select .select-checkboxes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.custom-select .select-title {
  display: flex;
  justify-content: center;
}

.custom-select .wpcf7-list-item {
  border: 2px solid #e4f1fd;
  border-radius: 0.5rem;
}
@media (max-width: 980px) {
  .custom-select p {
    width: 100%;
  }
  .custom-select .wpcf7-list-item {
    margin: 5px;
    flex-grow: 1;
  }
}
.custom-select .wpcf7-list-item.checked {
  border: 2px solid rgb(9, 78, 144) !important; /* always use this, instead of brighter hover color  */
}
.custom-select .wpcf7-list-item:hover {
  border: 2px solid rgba(9, 79, 144, 0.5);
}
.custom-select .wpcf7-list-item > label {
  display: inline-block;
  height: 100%;
  width: 100%;

  padding: 10px;
}
.custom-select .wpcf7-list-item > label > input {
  display: none;
}
.custom-select .wpcf7-list-item > label > span {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; /* Disable text selection, label should work as a button */
}

/* Align error message to center (below multi-select) */
.custom-select .wpcf7-not-valid-tip {
  text-align: center;
}

.custom-select .select-title {
  margin-top: 10px;
  margin-bottom: 10px;
}
.custom-select .select-checkboxes {
  margin-top: 10px;
  margin-bottom: 10px;
}

.custom-select.single-select {
  display: flex;
  flex-wrap: wrap;
}
.custom-select.single-select .select-title {
  display: flex;
  align-items: center;
}

/* Remove extra whitespace before checkbox label span text */
span.wpcf7-list-item-label::before {
  content: none;
}

/* -------------------- Form conditional fields -------------------- */

#use-different-billing-address > *,
#accept-data-collection > *,
#accept-promo-material > *,
#use-different-delivery-address > * {
  margin-left: 0px;
}

#use-different-billing-address > span > label,
#accept-data-collection > span > label,
#accept-promo-material > span > label,
#use-different-delivery-address > span > label {
  display: flex;
  align-items: center;
}

/* Disable unified height setting (currently 60px) for checkbox inputs */
#use-different-billing-address input,
#accept-data-collection input,
#accept-promo-material input,
#use-different-delivery-address input {
  height: unset;
}

/* Initial setup when loading: hide infoboxes, cf7-show-box.js handles showing the boxes when checkbox is clicked  */
.data-collection-info-message,
.promo-material-info-message,
.different-billing-address {
  display: none;
}
.data-collection-info-message,
.promo-material-info-message {
  padding: 10px;
  border: thin solid #e4f1fd;
}

.data-collection-info-message .header {
  font-weight: bold;
}

/* ---------------------------------------- Leadgform ---------------------------------------- */

.lead-g-form-container {
  width: 950px;
  max-width: 100%;
  margin: auto;
  margin-top: 10px;
}
.lead-g-form-container input[type="text"],
.lead-g-form-container select,
.lead-g-form-container button {
  background-color: #e4f1fd;
  height: 58px;
  padding: 20px;
  color: #333;
  font-size: 14px;
  margin-top: 5px;
  margin-bottom: 5px;
  border: none;
  width: 500px;
  max-width: 100%;
}
.lead-g-form-container label {
  display: block;
  margin-top: 8px;
}
.lead-g-form-container textarea {
  background-color: #e4f1fd;
  padding: 20px;
  margin-top: 5px;
  margin-bottom: 5px;
  border: none;
  width: 500px;
  max-width: 100%;
}
.lead-g-form-container button[type="submit"] {
  padding-left: 20px;
  padding-right: 20px;
  background: #005696;
  border-radius: 3px;
  color: white;
  cursor: pointer;
  width: auto;
  margin-top: 15px;
  margin-bottom: 25px;
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
.lead-g-form-container button[type="submit"]:hover {
  background: #063460;
  color: white;
}

.lead-g-form-container input[type="text"],
.lead-g-form-container textarea {
  width: 100%;
}

.lead-g-form-fields > div:not(.lead-g-container-product-type):not(.lead-g-container-gdpr-checkbox):not(.lead-g-container-gdpr-text) > label {
  display: none;
}

.lead-g-error-msg,
.lead-g-success-msg {
  display: none;
  margin: 10px 0;
  padding: 20px;
  border-width: 1px;
  border-style: solid;
  max-width: 500px;
}

.lead-g-error-msg {
  background-color: rgba(255, 0, 0, 0.33);
  border-color: rgba(100, 0, 0, 0.45);
  color: rgb(150, 0, 0);
}

.lead-g-success-msg {
  background-color: rgba(0, 255, 0, 0.33);
  border-color: rgba(0, 100, 0, 0.45);
  color: rgb(0, 150, 0);
}

/* ---------------------------------------- History-page ---------------------------------------- */

/* Add background line */
@media (min-width: 981px) {
  #history-container {
    background-image: linear-gradient(#000, #000);
    background-size: 2px 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }
}

.history-row {
  display: flex;
  flex-wrap: wrap;
}

.history-row > div:nth-child(2) {
  display: flex;
  justify-content: center;
  align-items: center;
}

.center-item {
  background-color: white;
}
.center-item > div > h2 {
  font-size: 40px;
  padding-top: 10px;
}

/* Hide "template" row from view */
.history-row.template-row {
  display: none;
}

/*
https://www.peeayecreative.com/how-to-control-divi-column-stacking-order-on-mobile/
*/
@media (max-width: 980px) {
  .history-row > div:nth-child(1) {
    order: 2;
  }
  .history-row > div:nth-child(2) {
    order: 1; /* Set center-item as first item in mobile mode */
  }
  .history-row > div:nth-child(3) {
    order: 3;
  }
}

/* ---------------------------------------- Custom search ---------------------------------------- */

.custom-search-results {
  margin-top: 20px;
}

.custom-search-results img {
  width: 150px;
  max-width: 150px;
  max-height: 150px;
  object-fit: contain;
}

.custom-search-results h2 a {
  color: #005696;
}
.custom-search-results h2 a:hover {
  text-decoration: underline;
}
/*@media (max-width: 980px) {
    .custom-search-results h2 {
        text-align: center;
    }
}*/

.custom-search-results .results {
  /* border-radius: 3px; */

  border: thin solid lightgray;
  margin-bottom: 20px;
  position: relative; /* absolute-positioned anchor-tags now follow this box */
}

@media (max-width: 980px) {
  .custom-search-results .results > a {
    flex-direction: column;
  }
}

.custom-search-results .results .results-info {
  margin: 15px 0px;
}
.custom-search-results h3.results-info {
  font-size: 18px;
  padding-left: 35px;
  padding-right: 35px;
}

.search h2 {
  text-align: center;
  font-size: 20px;
  margin-bottom: 20px;
  padding-bottom: 0px;
}

.custom-search-results .results > a:not(.results-info) {
  display: flex;
  align-items: top;
  /* border: thin solid black;
    border-radius: 3px;*/
  padding: 25px;
}
.custom-search-results .results h2 {
  text-align: left;
  margin-bottom: 0px;
}
.custom-search-results .results a {
  color: #333;
}
.custom-search-results .results a:hover > h2 {
  color: #005696;
}
.custom-search-results .results > a:not(.results-info):nth-child(even) {
  background: #f9f9f9;
}
.custom-search-results .results .entry-title {
  flex: 1;
  max-width: 100%; /* Prevents overflow */
}
.custom-search-results .results .entry-content {
  flex: 2;
  max-width: 100%; /* Prevents overflow */
}
@media (max-width: 980px) {
  .custom-search-results .results .entry-content {
    display: none;
  }
  .custom-search-results .results .entry-content.mobile-trim {
    display: block;
  }
}
@media (min-width: 981px) {
  .custom-search-results .results .entry-content {
    display: block;
  }
  .custom-search-results .results .entry-content.mobile-trim {
    display: none;
  }
}

.custom-search-results .results > a:not(.results-info) > * {
  padding: 10px;
}

.results-anchor-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.results-anchor-links > a {
  padding: 10px;
  margin: 5px;
  border: 2px solid #e4f1fd;
  border-radius: 0.5rem;
}
@media (max-width: 980px) {
  .results-anchor-links > a {
    flex: 1 200px;
  }
}

/* Position anchor-elements, prevent content being placed under header */
#anchor-pages,
#anchor-posts,
#anchor-references,
#anchor-products,
#anchor-documents {
  position: absolute;
  top: 0;
  margin-top: -50px;
}
@media (max-width: 980px) {
  #anchor-pages,
  #anchor-posts,
  #anchor-references,
  #anchor-products,
  #anchor-documents {
    position: absolute;
    top: 0;
    margin-top: -140px;
  }
}

/* ---------------------------------------- Ask for quote ---------------------------------------- */

.ask-for-quote {
  position: fixed;
  /* bottom: 0px; */

  z-index: -1; /* Replaced with 10 000 through javascript */

  background-color: #df6522;
  color: white !important;
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 800;
  border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  z-index: 9999;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.6);
  font-family: 'Noto Sans',Helvetica,Arial,Lucida,sans-serif;

  border: 0px;
}
@media (max-width: 980px) {
  .ask-for-quote {
    right: 25% !important;
    bottom: 0px !important;
  }
}
@media (min-width: 981px) {
  .ask-for-quote {
    right: 40px !important;
  }
  #cc-window.cc-invisible+.ask-for-quote {
    bottom: 0px !important;
  }
  #cc-window:not(.cc-invisible)+.ask-for-quote {
    bottom: 75px !important;
  }
}
.ask-for-quote:hover {
  background-color: #df6522 !important;
  border: 0px !important;
  /* padding: 10px 40px 10px 20px !important; */
}

/* ---------------------------------------- Cookie notice ---------------------------------------- */

/* Set static min-height for desktop mode, helps setting the .ask-for-quote block position*/
@media (min-width: 981px) {
  #cc-window.cc-theme-classic {
    /* height: 75px; */
    min-height: 75px;
  }
}
@media (max-width: 980px) {
  #cc-window.cc-theme-classic {
    /* Leave room for .ask-for-quote block in mobile mode */
    padding-bottom: 55px;
  }
}

.cookie-notice-button {
  background-color: white !important;
  color: black !important;

  font-family: "Noto Sans", Helvetica, Arial, Lucida, sans-serif !important;
  font-weight: 500 !important;
}

/* ---------------------------------------- Language-specific styling ---------------------------------------- */

/* http://oilon.wpdemo.emedia.fi/zh/dealers-and-maintenance-companies/ */
.zh-two-columns {
  /* max-width: 900px;
    margin: auto; */
}

/* ---------------------------------------- Custom block styles ---------------------------------------- */

.custom-button-fullwidth {
  width: 100%;
}
.custom-button-fullwidth a {
  width: 100%;
}


/*2022*/
#main-header, #main-footer {
  background-image: linear-gradient(to right, #094e90 , #052748);
}
#main-header .et_mobile_menu .after {
  color: white;
  width: 92%;
  position: absolute;
  right: 20px;
  text-align: right;
  display: block;
  z-index: 999999999999;

}
#main-footer .textwidget {
  text-align: center;
}
#main-footer .widget_text {
  margin-bottom: 15px;
}
#main-footer .et_pb_widget {
  float: none;
}
.et_divi_100_custom_hamburger_menu__icon {
  width: 35px;
}
.et_divi_100_custom_hamburger_menu__icon div {
  height: 3px;
  border-radius: 0px;
}
@media (min-width: 981px) {
  .et-fixed-header #top-menu .sub-menu a {
    color: #333!important;
  }
  .et-fixed-header #et-top-navigation #top-menu li.current-menu-ancestor>a {
    color: white!important;
  }
  #top-menu li {
    padding-right: 50px;
  }
  .et_header_style_left #et-top-navigation nav > ul > li > a {
    font-weight: 400;
  }
  .nav li:last-child ul {
    width: 240px;
  }
}

/*.et_pb_section_0 {
  clip-path: polygon(0 0,100% 0,100% 85%,0 100%);
  min-height: 500px!important;
}
@media (max-width: 981px) {
  .et_pb_section_0 {
    min-height: 300px!important;
  }
}*/

/*from production*/
.wp-block-quote {
  border-color: #094e90;
}
#main-content ol, #main-content ul {
    list-style: disc;
}

/* CF7 forms */
.multi-select-traditional input {
  height: auto;
}
.multi-select-traditional .wpcf7-list-item {
  margin-left: 0px;
}
.multi-select-traditional .wpcf7-form-control {
  display: flex;
  flex-direction: column;
}

/* Disable gray overlay on first slide, "Fit"-rule images leave left/right or up/down empty space that show overlay + background color (not good) */
.et_pb_slider .et_pb_slides .et_pb_slide.et_pb_slide_0:after {
  background: rgba(0, 0, 0, 0);
}

/* Disable gray overlay on custom-content-slider class sliders */
.custom-content-slider .et_pb_slides .et_pb_slide:after {
  background: rgba(0, 0, 0, 0);
}

/* Set image to snap to left corner (possible cropping done from bottom and right side) */
/*.frontpage-top-slider .et_pb_slider .et_pb_slide_0 {
    background-position: top left;
}*/

@media only screen and (min-width: 981px) and (max-width: 1200px) {
  
  /* Adjust Divi mobile menu breakpoint*/
  #main-header #top-menu-nav {
        display: none;
    }
    #main-header #et_mobile_nav_menu {
        display: block
    }
  
  /* Mobile menu styling in target resolution */
  #mobile_menu li:not([id]) {
      display: none !important;
  }
  .et_divi_100_custom_hamburger_menu .mobile_menu_bar {
    margin-bottom: 26px;
  }
}

/* Show "Change cookie preferences"-button in mobile mode */
@media screen and (max-width: 981px) {
  .cc-revoke {
    display:block !important;
  }
}

@media screen and (max-width: 762px) {
  
  #cmplz-manage-consent .cmplz-manage-consent {
  display: unset!important;
  bottom: 10px!important;
  right: 10px!important;
  color: transparent!important;
  width: 50px;
  min-width: 50px!important;
}
  .cmplz-manage-consent::before {
  font-family: ETmodules!important;;  
    content: "\e037"; 
    display: inline-block;
    padding-right: 20px;
    vertical-align: middle;
    color: white;
    font-size: 18px;
}
  .cc-revoke.cc-bottom {
    left: unset;
    right: 0px;
    width: 50px;
    height: 50px;
    font-size: 0px;
  }
  .cc-revoke.cc-bottom:after {
    content: "\f111";
    font-size: 24px;
    font: normal 24px/1 'dashicons';
  }
  
  body.et_pb_recaptcha_enabled .grecaptcha-badge {
    bottom: 60px !important;
  }
}

/* Cookie policy buttons in desktop mode */
@media all and (min-width: 768px) {
  .cc-compliance.cc-highlight {
    margin-right: 50px;
  }
}

/* Force cookie wall (if enabled) on top of menus */
.cmplz-soft-cookiewall {
  z-index: 999999;
}

/* Force content of a block to center */
.custom-block-centering {
  text-align: center !important;
}

.cmplz-cookiebanner.cmplz-show {
  padding-top: 5px;
  padding-bottom: 10px;
}

.skew-slider .et_pb_slider {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}
.skew-slider .et_pb_slider h2 {
  font-weight: 800!important;
}
.lead-g-form-fields .lead-g-container-target-type label {
  display: block!important;
}
.data-collection-info-message, .promo-material-info-message, .different-billing-address {
  display: block;
  margin-bottom: 10px;
}
.wpcf7-form-control-wrap {
  display: block;
  margin-bottom: 4px;
}
.wpcf7-form input[type="submit"] {
  margin-top: 15px;
  margin-bottom: 25px;
}
#main-footer .textwidget img {
  display: inline-block;
  padding-bottom: 10px;
}

#material-bank-search-form > div .removedlabel {
  font-size: 14px;
  color: white;
  margin: 0;
  cursor: pointer;
  height: auto;
  width: auto;
  transform: translate(0px, -1px);
  display: inline-block;
}
#material-bank-search-form > div .removedbox {
  width:auto;
  height:auto;
  margin-left: 15px;
}

/*#main-header .et_mobile_menu .after:first-child {
  display: none;
}*/