@font-face {
  font-family: "arial_condensed_boldregular";
  src: url("../fonts/arial-condensed-bold-webfont.eot");
  src:
    url("../fonts/arial-condensed-bold-webfont.eot?#iefix") format("embedded-opentype"),
    url("../fonts/arial-condensed-bold-webfont.woff2") format("woff2"),
    url("../fonts/arial-condensed-bold-webfont.woff") format("woff"),
    url("../fonts/arial-condensed-bold-webfont.ttf") format("truetype"),
    url("../fonts/arial-condensed-bold-webfont.svg#arial_condensed_boldregular") format("svg");
  font-weight: 400;
  font-style: normal;
}

#sp-product-menu .container-inner {
  padding-left: 15px;
  padding-right: 15px;
}

/* menuproduct */
#menuproduct {
  display: flex;
  gap: 15px;
  align-items: stretch; /* FIX typo */
}

#sp-menuproduct {
  background: #fff0;
  margin-bottom: 15px;
  margin-top: 30px;
  position: relative;
  padding: 20px 0 0px 0;
}

ul.menuproduct > li a img {
  display: block;
  height: 50px;
  width: auto;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}

#sp-menuproduct ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: stretch;
  gap: 15px;
}

#sp-menuproduct ul li {
  flex: 0 0 calc(33.333% - 10px);
  display: flex;
}

ul.menuproduct li:last-child {
  border-right: none;
}

ul.menuproduct > li a {
  color: #fff;
  font-family: "arial_condensed_boldregular";
  text-transform: uppercase;
  font-size: 1.4rem;
  line-height: 1;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
  text-align: left;
  padding: 10px 20px !important;
  flex: 1;
  height: 100%;

  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
}

#sp-product-menu .menuproduct-link:hover {
  transform: translateY(-3px);
}

ul.menuproduct > li a:before {
  content: " ";
  position: absolute;
  display: inline;
  width: 0;
  height: 0;
  line-height: 0;
  border: 0.45em solid #fff0;
  border-right: 0.45em solid #fff;
  border-top: 0.45em solid #fff;
  right: 0;
  top: 0;
}

ul.menuproduct > li a.menuproduct-link.artigiani { background: var(--fr-dark-blue); }
ul.menuproduct > li a.menuproduct-link.acciai    { background: var(--fr-dark-grey); }
ul.menuproduct > li a.menuproduct-link.idro      { background: var(--fr-light-blue); }

ul.menuproduct .open > a,
ul.menuproduct .open > a:hover,
ul.menuproduct .open > a:focus {
  background: transparent !important;
  color: var(--fr-blue) !important;
}

ul.menuproduct > li {
  text-align: left;
}

ul.menuproduct > li a:hover img {
  animation: divisionscaling ease-in-out 0.4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode: forwards;
}

ul.menuproduct > li a span {
  color: #fff;
  font-family: "arial_condensed_boldregular";
  text-transform: uppercase;
  font-size: 1.4rem;
  line-height: 1;
  transition: color ease-in-out 0.4s;
  padding-top: 4px;
}

ul.menuproduct > li a span:before {
  font-family: "Font Awesome 6 Free";
  content: "\f054";
  position: relative;
  top: -1px;
  left: -4px;
  color: #ffffff;;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.5;
  transition: 0.4s;

}

ul.menuproduct > li.current.active a span {
  color: #ffffff;
}

ul.menuproduct > li a span:hover,
ul.menuproduct > li a span:focus,
ul.menuproduct > li a span:focus:before,
ul.menuproduct > li a span:hover:before {
  color: var(--fr-blue);
}

ul.menuproduct > li.current.active a:before {
  content: " ";
  position: absolute;
  display: inline;
  width: 0;
  height: 0;
  line-height: 0;
  border: 0.45em solid #fff0;
  border-right: 0.45em solid var(--fr-blue);
  border-top: 0.45em solid var(--fr-blue);
  right: 0;
  top: 0;
}

/* ======================================================================
   MAIN MENU ETC
   ====================================================================== */

.menu-front-left-1 .sp-module-content {
  margin-bottom: 60px;
  min-height: auto !important;
  text-transform: uppercase;
  font-size: 22px;
}

.leftmenu.off-cvs .sp-module-content {
  margin-bottom: 75px;
}

.sp-module:first-child { margin-top: 0; }

.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li:hover > a {
  color: var(--fr-blue);
}

.sticky-wrapper.is-sticky .sp-megamenu-parent > li.active > a,
.sticky-wrapper.is-sticky .sp-megamenu-parent > li:hover > a {
  color: var(--fr-light-blue) !important;
}

.sp-megamenu-parent {
  list-style: none;
  padding: 0;
  margin: 0 -15px;
  z-index: 99;
  display: block;
  float: right;
  position: relative;
}

.sp-megamenu-parent > li > a {
  font-family: "arial_condensed_boldregular" !important;
  display: inline-block;
  padding: 0 15px;
  line-height: 1;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--fr-dark-blue);
  font-weight: 900;
  margin: 0;
}

#sp-header.header-sticky .sp-megamenu-parent > li > a {
  color: #fff;
  font-size: 1.1rem;
}

.sp-megamenu-parent > li a.contact-link { padding-right: 0; }

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  font-family: "arial_condensed_boldregular" !important;
  display: block;
  padding: 10px;
  color: var(--fr-dark-grey);
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
}

.sp-megamenu-parent .sp-dropdown-inner li.active > a {
  color: var(--fr-blue);
  font-family: "arial_condensed_boldregular" !important;
}

.sp-megamenu-parent .sp-dropdown-inner li:hover > a {
  color: #fff;
  background: var(--fr-blue);
}

.sp-megamenu-parent .sp-dropdown-inner li.sp-menu-item.current-item.active a {
  background: var(--fr-blue);
  color: #fff;
  font-family: "arial_condensed_boldregular" !important;
}

.sp-megamenu-parent
  .sp-dropdown-inner
  li.sp-menu-item.sp-has-child.current-item.active
  .sp-dropdown-items
  li.sp-menu-item
  a {
  color: var(--fr-dark-grey);
  background: #fff0;
}

.sp-megamenu-parent
  .sp-dropdown-inner
  li.sp-menu-item.sp-has-child.current-item.active
  .sp-dropdown-items
  li.sp-menu-item
  a:hover {
  color: #fff;
  background: var(--fr-blue);
}

.sp-megamenu-parent .sp-menu-item > a img,
.sp-megamenu-parent .sp-menu-item > span img {
  display: inline-block;
}

.sp-megamenu-parent > li {
  display: inline-block;
  position: relative;
  padding: 0;
}

.sp-megamenu-parent > li.menu-justify { position: static; }

.sp-megamenu-parent > li:last-child > a {
  padding: 0 0 0 15px;
}

.sp-megamenu-parent > li.active > a { font-weight: 600; }

.sp-megamenu-parent > li .sp-menu-badge {
  height: 20px;
  line-height: 20px;
  padding: 0 5px;
  font-size: 10px;
  letter-spacing: 1px;
  display: inline-block;
  text-transform: uppercase;
  background: #d60000;
  color: #fff;
  border-radius: 3px;
}

.sp-megamenu-parent .sp-module { padding: 10px; }

.sp-megamenu-parent .sp-mega-group {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sp-megamenu-parent .sp-mega-group > li > a {
  display: block;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}

.sp-megamenu-parent .sp-mega-group .sp-mega-group-child {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sp-megamenu-parent .sp-dropdown {
  margin: 0;
  position: absolute;
  z-index: 10;
  display: none;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  box-shadow: 0 3px 5px 0 rgb(0 0 0 / 0.2);
  padding: 15px;
  background: #fff;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner > .row:not(:first-child) {
  margin-top: 20px;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sp-megamenu-parent .sp-dropdown.sp-dropdown-main { top: 100%; }
.sp-megamenu-parent .sp-dropdown.sp-dropdown-sub  { top: 0; }

.sp-megamenu-parent .sp-dropdown.sp-dropdown-sub .sp-dropdown-inner {
  box-shadow: 0 0 5px rgb(0 0 0 / 0.2);
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item {
  display: block;
  padding: 0;
  position: relative;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a.sp-group-title,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge).sp-group-title {
  text-transform: uppercase;
  font-weight: 700;
}

.sp-megamenu-parent .sp-dropdown .sp-module { padding: 0; }

.sp-megamenu-parent .sp-dropdown .sp-module .sp-module-title {
  margin: 0 0 15px;
  text-transform: uppercase;
  font-weight: 700;
}

.sp-megamenu-parent .sp-dropdown-mega > .row { margin-top: 30px; }
.sp-megamenu-parent .sp-dropdown-mega > .row:first-child { margin-top: 0; }

.sp-megamenu-parent .sp-dropdown-mega .sp-module {
  margin-left: 0px !important;
}

.sp-megamenu-parent .sp-has-child:hover > .sp-dropdown { display: block; }

.sp-megamenu-parent.menu-animation-fade .sp-has-child:hover > .sp-dropdown { animation: spFadeIn 600ms; }
.sp-megamenu-parent.menu-animation-fade-up .sp-has-child:hover > .sp-dropdown { animation: spFadeInUp 400ms ease-in; }
.sp-megamenu-parent.menu-animation-fade-down .sp-has-child:hover > .sp-dropdown { animation: spFadeInDown 400ms ease-in; }
.sp-megamenu-parent.menu-animation-zoom .sp-has-child:hover > .sp-dropdown { animation: spZoomIn 300ms; }
.sp-megamenu-parent.menu-animation-rotate .sp-has-child:hover > .sp-dropdown { animation: spRotateIn 300ms; }
.sp-megamenu-parent.menu-animation-pulse .sp-has-child:hover > .sp-dropdown { animation: spPulse 300ms; }

body.ltr .sp-megamenu-parent > li.sp-has-child > a:after,
body.ltr .sp-megamenu-parent > li.sp-has-child > span:after {
  font-family: "Font Awesome 6 Free";
  content: "";
  float: right;
  margin-left: 7px;
  font-weight: 900;
}

/* footer menu */
.footer-menu-centri h4 { color: #fff; }

.sp-module ul.menufooter {
  text-align: left !important;
  list-style-type: none;
  padding: 0;
}

.sp-module ul.menufooter > li { float: none; }

.sp-module ul.menufooter > li > a {
  font-weight: 600;
  font-size: 15px;
  color: #ffffff !important;
  padding: 0 0 10px 0 !important;
  display: block;
}

.sp-module ul.menufooter li.open > a,
.sp-module ul.menufooter li.open > a:hover,
.sp-module ul.menufooter li.open > a:focus {
  background: transparent !important;
}

.sp-module ul.menufooter li.open > a,
.sp-module ul.menufooter li > a:hover,
.sp-module ul.menufooter li > a:focus {
  color: var(--fr-dark-blue) !important;
  background: transparent !important;
}

.sp-module ul.menufooter > li.current.active > a {
  color: var(--fr-light-blue) !important;
}

@media (min-width: 768px) and (max-width: 991px) {
  .sp-module ul.menufooter > li > a { font-size: 13px !important; }
}

@media (max-width: 767px) {
  .sp-module ul.menufooter { margin-top: 30px; }
}

.sp-module ul.menufooter img { display: none !important; }

.offcanvas-menu .hide-on-offcanvas { display: none !important; }

.offcanvas-menu .fa,
.offcanvas-menu .fab,
.offcanvas-menu .far,
.offcanvas-menu .fas {
  color: #252525;
}

.offcanvas-menu .offcanvas-inner ul.menu li.active a { color: #ec430f; }

#offcanvas-toggler > i { color: var(--fr-blue); }

.sticky-wrapper.is-sticky #offcanvas-toggler > i {
  color: #fff;
  font-size: 34px;
}

#offcanvas-toggler > i:hover { color: var(--fr-light-blue); }

.sticky-wrapper.is-sticky #offcanvas-toggler > i:hover { color: var(--fr-light-blue); }

.offcanvas-menu .offcanvas-inner .sp-module .sp-module-title {
  margin: 40px 0 10px;
  padding-bottom: 10px;
  font-size: 24px;
  font-weight: 700;
  border-bottom: 1px solid var(--fr-light-blue);
  font-family: "arial_condensed_boldregular";
  text-transform: uppercase;
}

.accordeonck-wrap { margin-bottom: 30px; }
.promobanner { margin-bottom: 30px; }

/* ======================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width: 1439px) {
  #sp-menuproduct img { height: 44px; }
}

@media (max-width: 1199px) {
  ul.menuproduct > li a span { font-size: 1.3rem; }
  .sp-megamenu-parent > li > a { font-size: 1.1rem; }
}

@media (max-width: 991px) {
    #sp-menuproduct {
        margin-top: 0;
    }
  #sp-menuproduct .custommenuproduct:before,
  #sp-menuproduct ul.menuproduct:before {
    border: 0.9em solid #fff0;
    border-left: 0.9em solid #fff;
    border-top: 0.9em solid #fff;
  }

  ul.menuproduct > li a { min-height: 40px; }
  ul.menuproduct > li a span { font-size: 1.1rem; }
}

@media (min-width: 768px) and (max-width: 991px) {
  ul.menuproduct > li a { font-size: 13px; }

  ul.menuproduct li a.acciaimetalli-link { padding-left: 45px; }
  ul.menuproduct .acciaimetalli-link img { width: 35px; height: 33px; left: 0; top: 0; }

  ul.menuproduct li a.edilizia-link { padding-left: 58px; }
  ul.menuproduct .edilizia-link img { width: 33px; height: 33px; left: 12px; top: 3px; }

  ul.menuproduct li a.impiantistica-link { padding-left: 50px; }
  ul.menuproduct .impiantistica-link img { width: 27px; height: 32px; left: 12px; top: 4px; }

  ul.menuproduct li a.energie-link { padding-left: 50px; }
  ul.menuproduct .energie-link img { width: 32px; height: 28px; left: 10px; top: 4px; }

  ul.menuproduct li a.attrezzatura-link { padding-left: 45px; }
  ul.menuproduct .attrezzatura-link img { width: 40px; height: 30px; left: -5px; top: 0; }

  ul.menuproduct li a.elettroutensili-link { padding-left: 58px; }
  ul.menuproduct .elettroutensili-link img { width: 38px; height: 25px; left: 10px; top: 12px; }

  ul.menuproduct li a.prodottitecnici-link { padding-left: 50px; }
  ul.menuproduct .prodottitecnici-link img { width: 30px; height: 30px; left: 12px; top: 4px; }

  ul.menuproduct li a.sicurezza-link { padding-left: 50px; }
  ul.menuproduct .sicurezza-link img { width: 22px; height: 30px; left: 15px; top: 8px; }
}

@media (max-width: 767px) {
  #sp-menuproduct ul.menuproduct {
    padding: 0;
    display: block;
  }

  #sp-menuproduct ul li {
    width: 100%;
    margin: 5px 0;
  }

  ul.menuproduct > li a { font-size: 17px; }

  ul.menuproduct .menuproduct-link img,
  ul.menuproduct > li a img,
  #sp-menuproduct img {
      height: 28px;
  }

  .sp-product-menu .menuproductmobile {
    display: block !important;
  }
}

@media (max-width: 479px) {
  ul.menuproduct > li {
    width: 100%;
    text-align: left;
  }

  ul.menuproduct li {
    border: none !important;
  }
}

@media (min-width: 992px) {
  ul.menuproduct > li a { font-size: 1.6rem; }
  .offcanvas-toggler-right { display: none !important; }
  .sp-megamenu-parent > li > a.disclaimer { display: none; }
}

/* ======================================================================
   ANIMATION
   ====================================================================== */
@keyframes divisionscaling {
  0%   { transform: scale(1); }
  100% { transform: scale(1.1); }
}