/* ADD CHANGE 28.11.2023 */

/* ADD LEFT FLEX BANNER */
#sp-footer .sp-module.myFixedLeftBanner,
.sp-module.myFixedLeftBanner {
  margin: 0px;
  position: fixed;
  top: 164px;
  right: 0px;
  z-index: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  box-shadow: 0px 0px 7px black;
}
.sp-module.myFixedLeftBanner > .sp-module-title {
  background-color: #987d30;
  color: white;
  margin: 0px;
  padding: 10px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-transform: none;
  font-size: 14px;
  line-height: 100%;
  cursor: pointer;
}
.sp-module.myFixedLeftBanner > .sp-module-content {
  background-color: white;
  overflow: hidden;
  transition: width 0.4s linear 0s;
  width: 0px;
}
.sp-module.myFixedLeftBanner:hover > .sp-module-content,
.sp-module.myFixedLeftBanner > .sp-module-content div.custommyFixedLeftBanner {
  width: 280px;
}
.sp-module.myFixedLeftBanner > .sp-module-content div.custommyFixedLeftBanner {
  padding: 10px;
  color: black;
  font-size: 20px;
  line-height: 120%;
  font-weight: 400;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#sp-footer .sp-module.myFixedLeftBanner > .sp-module-content div.custommyFixedLeftBanner p:nth-last-child(n+2) {
  margin-bottom: 10px;
}
#sp-footer .sp-module.myFixedLeftBanner > .sp-module-content div.custommyFixedLeftBanner a {
  color: #987d30;
  text-decoration: none;
}
#sp-footer .sp-module.myFixedLeftBanner > .sp-module-content div.custommyFixedLeftBanner a:hover {
  color: #987d30;
  text-decoration: underline;
}


/* CHANGE HEADER */
@media (max-width: 991px) {
  /* headre part 1 */
  section#sp-top-bar {
    border-bottom: 0px;
  }
  div#sp-menu2 > div.sp-column {
    gap: 10px 15px;
    max-width: 100%;
  }
  #sp-top-bar div#sp-menu2 > div.sp-column > .sp-module.myHeaderText {
    display: none;
  }
  .vm_currency_module > span.myTitle {
    display: none;
  }
  #sp-top-bar div#sp-menu2 > div.sp-column:after {
    content: '';
    display: block;
    /*width: 81px;*/
    width: 34px;
  }
  /* headre part 2 */
  section#sp-top-bar-2 > div {
    position: relative;
  }
  section#sp-top-bar-2 > div > div.row {
    position: static !important;
  }
  div#sp-menu {
    position: absolute !important;
    bottom: 0px;
    right: 0px;
    padding: 0px;
    width: auto;
    height: 105px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
  }
  a#offcanvas-toggler:after {
    display: none;
  }
  a#offcanvas-toggler i {
    color: #AA9969;
  }
  section#sp-top-bar-2:after {
    z-index: 1;
  }
}

@media (max-width: 767px) {
  section#sp-top-bar > div.container,
  section#sp-top-bar-2 > div.container {
    width: calc(100% - 14px);
  }
  .custommyLogo > div > a > img:nth-child(2) {
    display: block;
  }
  div#sp-menu2 > div.sp-column > .sp-module.myLogo {
    flex-grow: 1;
  }
  /* intro banner bottom slide (Banner Collagen) */
  .sppb-section.myBannerCollagen > div.sppb-row-container > div.sppb-row>div:nth-child(2) {
    padding-left: 10px;
  }
  .sppb-section.myBannerCollagenLeftLine > div.sppb-container-inner > div.sppb-row > div {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    background-size: 20px;
    padding: 20px 10px;
    padding-left: 30px;
  }
  /* ADD LEFT FLEX BANNER */
  .sp-module.myFixedLeftBanner > .sp-module-title {
    font-size: 12px;
    padding: 10px 4px;
  }
}

@media (max-width: 659px) {
  .custommyLogo > div > a > img:nth-child(2) {
    display: none;
  }
}

@media (max-width: 424px) {
  div#sp-menu2 > div.sp-column > .sp-module.myLogo {
    width: 100%;
    flex-grow: 0;
  }
  .custommyLogo > div {
    margin: auto;
  }
  div#sp-menu {
    height: 50px;
    bottom: 7px;
  }
}



/*.custommyHeaderText {

}
.custommyHeaderText > div {
  font-size: 15px;
  line-height: 112%;
  margin-top: 5px;
}
.custommyHeaderText a {
  color: #987d30;
}
.custommyHeaderText a:hover {
  color: #e40421;
}

@media (max-width: 1359px) and (min-width: 1200px) {
  .custommyHeaderText {
    max-width: 405px;
    margin: auto;
  }
}
@media (max-width: 1199px) and (min-width: 992px) {
  .custommyLogo > div > a > img:nth-child(2) {
    margin-top: 70px;
  }
  div#sp-menu2>div.sp-column > .sp-module.myHeaderText {
    bottom: 35px;
  }
}
@media (max-width: 991px) and (min-width: 768px) {
  .custommyHeaderText > div {
    margin-top: 2px;
  }
}*/