/*!------------------------------------------------------------------
[MAIN STYLESHEET]

PROJECT:	Project Name
VERSION:	Versoin Number
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[TABLE OF CONTENTS]
-------------------------------------------------------------------*/
body {
  font: 14px/2 "Open sans", sans-serif;
  letter-spacing: 0.05em;
}

.left_first {
  padding: 1px;
  float: left;
  width: 6%; /* The width is 20%, by default */
}

.left {
  padding: 5px;
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.main {
  padding: 1px;
  float: left;
  width: 48%; /* The width is 60%, by default */
}

.right {
  padding: 20px;
  padding-top: 35px;
  float: left;
  width: 20%; /* The width is 20%, by default */
}

/* Use a media query to add a break point at 800px: */
@media screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
/*
.btn {
  display: inline-block;
  padding: 13px 20px;
  color: #fff;
  text-decoration: none;
  position: relative;
  background: transparent; 
  border: 1px solid #e1e1e1;
  font: 12px/1.2 "Oswald", sans-serif;
  letter-spacing: 0em;
  text-align: center;
  text-indent: 2px;
  text-transform: uppercase;
  transition: color 0.1s linear 0.05s;

  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #e1e1e1;
    z-index: 1;
    opacity: 0;
    transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0.2s;
  }

  &::after {
    transition:border 0.1s linear 0.05s;
  }

  .btn-inner {
    position: relative;
    z-index: 2;
  }

  &:hover {
    color: #373737;
    transition: color 0.1s linear 0s;

    &::before {
      top: 0;
      height: 100%;
      opacity: 1;
      transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0s;
    }

    &::after {
      border-color: #373737;
      transition:border 0.1s linear 0s;
    }
  }
}
*/
.slideshow {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100vh;
  z-index: 1;
}
.slideshow .slideshow-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slideshow .slides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.slideshow .slide {
  display: none;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.slideshow .slide.is-active {
  display: block;
}
.slideshow .slide.is-loaded {
  opacity: 1;
}
.slideshow .slide .caption {
  padding: 0px 100px;
  padding-top: 100px;
}
.slideshow .slide .image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  z-index: 1;
  background-size: cover;
  image-rendering: optimizeQuality;
}
.slideshow .slide .image-container::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.slideshow .slide .image {
  width: 100%;
  object-fit: cover;
  height: 100%;
}
.slideshow .slide-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.slideshow .slide .title {
  margin: 0 auto 15px;
  width: 1700px;
  max-width: 1700px;
  font: 300 2.5vw "aller-display", sans-serif;
  font-size: calc(16px + 1vw);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.slideshow .slide .title_shorter {
  margin: 0 auto 15px;
  font: 300 2.5vw "aller-display", sans-serif;
  font-size: calc(16px + 1vw);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.slideshow .slide .text {
  margin: 0 auto;
  max-width: 1000px;
  font-size: 18px;
  line-height: 1.4;
}
.slideshow .slide {
  /*
  .btn {
    margin: 15px 0 0;
    border-color: #fff;

    &::before {
      background:#fff
    }
  }
  */
}
.slideshow .pagination {
  position: absolute;
  bottom: 35px;
  left: 0;
  width: 100%;
  height: 12px;
  cursor: default;
  z-index: 2;
  text-align: center;
}
.slideshow .pagination .item {
  display: inline-block;
  padding: 15px 5px;
  position: relative;
  width: 46px;
  height: 32px;
  cursor: pointer;
  text-indent: -999em;
  z-index: 1;
}
.slideshow .pagination .item + .page {
  margin-left: -2px;
}
.slideshow .pagination .item::before {
  content: "";
  display: block;
  position: absolute;
  top: 15px;
  left: 5px;
  width: 36px;
  height: 4px;
  background: rgba(255, 255, 255, 0.5);
  transition: background 0.2s ease;
}
.slideshow .pagination .item::after {
  width: 0;
  background: #fff;
  z-index: 2;
  transition: width 0.2s ease;
}
.slideshow .pagination .item:hover::before, .slideshow .pagination .item.is-active::before {
  background-color: #fff;
}
.slideshow .arrows .arrow {
  margin: -33px 0 0;
  padding: 20px;
  position: absolute;
  top: 50%;
  cursor: pointer;
  z-index: 3;
}
.slideshow .arrows .prev {
  left: 30px;
}
.slideshow .arrows .prev:hover .svg {
  left: -10px;
}
.slideshow .arrows .next {
  right: 30px;
}
.slideshow .arrows .next:hover .svg {
  left: 10px;
}
.slideshow .arrows .svg {
  position: relative;
  left: 0;
  width: 14px;
  height: 26px;
  fill: #fff;
  transition: left 0.2s ease;
}

/* --- Slide 2: button at bottom center --- */
.slide.slide-2 .caption {
  position: relative;
}

.slide.slide-2 .btn.btn-primary {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  /* reset any float-related positioning */
  float: none;
  display: inline-block;
}

/* Ensure caption doesn't overflow when button is absolutely positioned */
.slide.slide-2 .caption .title_shorter,
.slide.slide-2 .caption .left_first,
.slide.slide-2 .caption .main {
  display: inline-block; /* make float layout not affect button */
}

/*  typography */
/*@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700');




/* ALLER */
@font-face {
  font-family: "aller-display";
  src: url("../fonts/aller/allerdisplay-webfont.woff2") format("woff2"), url("../fonts/aller/allerdisplay-webfont.woff") format("woff");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "aller-bold";
  src: url("../fonts/aller/aller-bold.woff2") format("woff2"), url("../fonts/aller/aller-bold.woff") format("woff");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
/* UBUNTU */
@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/ubuntu/UbuntuSans-Variable.woff2") format("woff2"), url("../fonts/ubuntu/UbuntuSans-Variable.woff") format("woff");
  font-weight: 460;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/ubuntu/UbuntuSans-Variable.woff2") format("woff2"), url("../fonts/ubuntu/UbuntuSans-Variable.woff") format("woff");
  font-weight: 750;
  font-display: swap;
  font-style: bold;
}
@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/ubuntu/UbuntuSans-ItalicVariable.woff2") format("woff2"), url("../fonts/ubuntu/UbuntuSans-IalicVariable.woff") format("woff");
  font-weight: 460;
  font-display: swap;
  font-style: italic;
}
/*
@font-face {
  font-family: 'Ubuntu';
  src: url('../fonts/ubuntu/ubuntu-r.eot');
  src: url('../fonts/ubuntu/ubuntu-r.eot?#iefix') format('embedded-opentype'),
      url('../fonts/ubuntu/ubuntu-r.woff2') format('woff2'),
      url('../fonts/ubuntu/ubuntu-r.woff') format('woff'),
      url('../fonts/ubuntu/ubuntu-r.svg#KeterYG-Medium') format('svg');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Ubuntu';
  src: url('../fonts/ubuntu/ubuntu-bi.eot');
  src: url('../fonts/ubuntu/ubuntu-bi.eot?#iefix') format('embedded-opentype'),
      url('../fonts/ubuntu/ubuntu-bi.woff2') format('woff2'),
      url('../fonts/ubuntu/ubuntu-bi.woff') format('woff'),
      url('../fonts/ubuntu/ubuntu-bi.svg#KeterYG-BoldOblique') format('svg');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'Ubuntu';
  src: url('../fonts/ubuntu/ubuntu-ri.eot');
  src: url('../fonts/ubuntu/ubuntu-ri.eot?#iefix') format('embedded-opentype'),
      url('../fonts/ubuntu/ubuntu-ri.woff2') format('woff2'),
      url('../fonts/ubuntu/ubuntu-ri.woff') format('woff'),
      url('../fonts/ubuntu/ubuntu-ri.svg#KeterYG-MediumOblique') format('svg');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'Ubuntu';
  src: url('../fonts/ubuntu/ubuntu-b.eot');
  src: url('../fonts/ubuntu/ubuntu-b.eot?#iefix') format('embedded-opentype'),
      url('../fonts/ubuntu/ubuntu-b.woff2') format('woff2'),
      url('../fonts/ubuntu/ubuntu-b.woff') format('woff'),
      url('../fonts/ubuntu/ubuntu-b.svg#KeterYG-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
}
*/
/* CLASH GROTESK */
@font-face {
  font-family: "clashgrotesk";
  src: url("../fonts/clashgrotesk/ClashGrotesk-Variable.woff2") format("woff2"), url("../fonts/clashgrotesk/ClashGrotesk-Variable.woff") format("woff");
  font-weight: 450;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "clashgrotesk";
  src: url("../fonts/clashgrotesk/ClashGrotesk-Variable.woff2") format("woff2"), url("../fonts/clashgrotesk/ClashGrotesk-Variable.woff") format("woff");
  font-weight: 620;
  font-display: swap;
  font-style: bold;
}
/* ARCHIVO */
@font-face {
  font-family: "archivo";
  src: url("../fonts/archivo/Archivo-ExtraBold.woff2") format("woff2"), url("../fonts/archivo/Archivo-ExtraBold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "archivo";
  src: url("../fonts/archivo/Archivo-ExtraBoldItalic.woff2") format("woff2"), url("../fonts/archivo/Archivo-ExtraBoldItalic.woff") format("woff");
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: "archivo";
  src: url("../fonts/archivo/Archivo-Italic.woff2") format("woff2"), url("../fonts/archivo/Archivo-Italic.woff") format("woff");
  font-weight: 500;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: "archivo";
  src: url("../fonts/archivo/Archivo-Variable.woff2") format("woff2"), url("../fonts/archivo/Archivo-Variable.woff") format("woff");
  font-weight: 430;
  font-display: swap;
  font-style: normal;
}
/* MERRIWEATHER */
@font-face {
  font-family: "merriweather";
  src: url("../fonts/merriweather/MerriweatherSans-ExtraBold.woff2") format("woff2"), url("../fonts/merriweather/MerriweatherSans-ExtraBold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "merriweather";
  src: url("../fonts/merriweather/MerriweatherSans-ExtraBoldItalic.woff2") format("woff2"), url("../fonts/merriweather/MerriweatherSans-ExtraBoldItalic.woff") format("woff");
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: "merriweather";
  src: url("../fonts/merriweather/MerriweatherSans-Italic.woff2") format("woff2"), url("../fonts/merriweather/MerriweatherSans-Italic.woff") format("woff");
  font-weight: 500;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: "merriweather";
  src: url("../fonts/merriweather/MerriweatherSans-Regular.woff2") format("woff2"), url("../fonts/merriweather/MerriweatherSans-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
/* AMULYA */
@font-face {
  font-family: "amulya";
  src: url("../fonts/amulya/amulya-bold.woff2") format("woff2"), url("../fonts/amulya/amulya-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "amulya";
  src: url("../fonts/amulya/amulya-bolditalic.woff2") format("woff2"), url("../fonts/amulya/amulya-bolditalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "amulya";
  src: url("../fonts/amulya/amulya-italic.woff2") format("woff2"), url("../fonts/amulya/amulya-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "amulya";
  src: url("../fonts/amulya/amulya-regular.woff2") format("woff2"), url("../fonts/amulya/amulya-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
/* RUBIK */
@font-face {
  font-family: "rubik";
  src: url("../fonts/rubik/rubik-bold-webfont.woff2") format("woff2"), url("../fonts/rubik/rubik-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "rubik";
  src: url("../fonts/rubik/rubik-bolditalic-webfont.woff2") format("woff2"), url("../fonts/rubik/rubik-bolditalic-webfont.woff") format("woff");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "rubik";
  src: url("../fonts/rubik/rubik-italic-webfont.woff2") format("woff2"), url("../fonts/rubik/rubik-italic-webfont.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "rubik";
  src: url("../fonts/rubik/rubik-regular-webfont.woff2") format("woff2"), url("../fonts/rubik/rubik-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
/* RALEWAY */
@font-face {
  font-family: "raleway";
  src: url("../fonts/raleway/raleway-bold-webfont.woff2") format("woff2"), url("../fonts/raleway/nunitoraleway-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "raleway";
  src: url("../fonts/raleway/raleway-bolditalic-webfont.woff2") format("woff2"), url("../fonts/raleway/raleway-bolditalic-webfont.woff") format("woff");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "raleway";
  src: url("../fonts/raleway/raleway-italic-webfont.woff2") format("woff2"), url("../fonts/raleway/raleway-italic-webfont.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "raleway";
  src: url("../fonts/raleway/raleway-regular-webfont.woff2") format("woff2"), url("../fonts/raleway/raleway-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
/* POPPINS */
@font-face {
  font-family: "poppins";
  src: url("../fonts/poppins/poppins-bold-webfont.woff2") format("woff2"), url("../fonts/poppins/nunitopoppins-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "poppins";
  src: url("../fonts/poppins/poppins-bolditalic-webfont.woff2") format("woff2"), url("../fonts/poppins/poppins-bolditalic-webfont.woff") format("woff");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "poppins";
  src: url("../fonts/poppins/poppins-italic-webfont.woff2") format("woff2"), url("../fonts/poppins/poppins-italic-webfont.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "poppins";
  src: url("../fonts/poppins/poppins-regular-webfont.woff2") format("woff2"), url("../fonts/poppins/poppins-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
/* NUNITO */
@font-face {
  font-family: "nunito";
  src: url("../fonts/nunito/nunito-bold-webfont.woff2") format("woff2"), url("../fonts/nunito/nunitonunito-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "nunito";
  src: url("../fonts/nunito/nunito-bolditalic-webfont.woff2") format("woff2"), url("../fonts/nunito/nunito-bolditalic-webfont.woff") format("woff");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "nunito";
  src: url("../fonts/nunito/nunito-italic-webfont.woff2") format("woff2"), url("../fonts/nunito/nunito-italic-webfont.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "nunito";
  src: url("../fonts/nunito/nunito-regular-webfont.woff2") format("woff2"), url("../fonts/nunito/nunito-regular-webfont.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}
/* NUNITO SANS*/
@font-face {
  font-family: "nunito-sans";
  src: url("../fonts/nunito_sans/nunitosans-bold-webfont.woff2") format("woff2"), url("../fonts/nunito_sans/nunitosans-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "nunito-sans";
  src: url("../fonts/nunito_sans/nunitosans-bolditalic-webfont.woff2") format("woff2"), url("../fonts/nunito_sans/nunitosans-bolditalic-webfont.woff") format("woff");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "nunito-sans";
  src: url("../fonts/nunito_sans/nunitosans-italic-webfont.woff2") format("woff2"), url("../fonts/nunito_sans/nunitosans-italic-webfont.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "nunito-sans";
  src: url("../fonts/nunito_sans/nunitosans-regular-webfont.woff2") format("woff2"), url("../fonts/nunito_sans/nunitosans-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
/* LATO */
@font-face {
  font-family: "lato";
  src: url("../fonts/lato/lato-bold-webfont.woff2") format("woff2"), url("../fonts/lato/lato-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "lato";
  src: url("../fonts/lato/lato-bolditalic-webfont.woff2") format("woff2"), url("../fonts/lato/lato-bolditalic-webfont.woff") format("woff");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "lato";
  src: url("../fonts/lato/lato-italic-webfont.woff2") format("woff2"), url("../fonts/lato/lato-italic-webfont.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "lato";
  src: url("../fonts/lato/lato-regular-webfont.woff2") format("woff2"), url("../fonts/lato/lato-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
/* SOURCE SANS PRO */
@font-face {
  font-family: "source-sans-pro";
  src: url("../fonts/source_sans_pro/sourcesanspro-bold-webfont.woff2") format("woff2"), url("../fonts/source_sans_pro/sourcesanspro-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "source-sans-pro";
  src: url("../fonts/source_sans_pro/sourcesanspro-bolditalic-webfont.woff2") format("woff2"), url("../fonts/source_sans_pro/sourcesanspro-bolditalic-webfont.woff") format("woff");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "source-sans-pro";
  src: url("../fonts/source_sans_pro/sourcesanspro-italic-webfont.woff2") format("woff2"), url("../fonts/source_sans_pro/sourcesanspro-italic-webfont.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "source-sans-pro";
  src: url("../fonts/source_sans_pro/sourcesanspro-regular-webfont.woff2") format("woff2"), url("../fonts/source_sans_pro/sourcesanspro-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
body {
  line-height: 1.5;
  font-family: "Ubuntu", "redhat", "merriweather", "archivo", "poppins", "lato", "raleway", "amulya", "source-sans-pro", "clashgrotesk", "nunito", "nunito-sans", "rubik";
  -webkit-font-smoothing: antialiased;
  font-size: 19px;
  color: #5c5c77;
  letter-spacing: 0.5px;
}

p, .paragraph {
  font-weight: 400;
  color: #5c5c77;
  font-size: 19px;
  line-height: 1.5;
  font-family: "Ubuntu", "redhat", "merriweather", "archivo", "poppins", "lato", "raleway", "amulya", "source-sans-pro", "clashgrotesk", "nunito", "nunito-sans", "rubik";
  letter-spacing: 0.5px;
}

h1, h2, h3, h4, h5, h6 {
  color: #1e1e4b;
  font-family: "aller-bold";
  text-align: center;
  font-weight: 700;
  line-height: 1.2;
}

h1, .h1 {
  font-size: 60px;
}
@media (max-width: 575px) {
  h1, .h1 {
    font-size: 45px;
  }
}

h2, .h2 {
  font-size: 40px;
}
@media (max-width: 575px) {
  h2, .h2 {
    font-size: 30px;
  }
}

h3, .h3 {
  font-size: 25px;
}
@media (max-width: 575px) {
  h3, .h3 {
    font-size: 20px;
  }
}

h4, .h4 {
  font-size: 20px;
}
@media (max-width: 575px) {
  h4, .h4 {
    font-size: 18px;
  }
}

h5, .h5 {
  font-size: 18px;
}
@media (max-width: 575px) {
  h5, .h5 {
    font-size: 16px;
  }
}

h6, .h6 {
  font-size: 16px;
}
@media (max-width: 575px) {
  h6, .h6 {
    font-size: 14px;
  }
}

/*  popups */
.pop-button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

.pop-button:hover {
  background: #06D85F;
}

.pop-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}

.pop-overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 270px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}

.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

.popup .close:hover {
  color: #06D85F;
}

.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px) {
  .popup {
    width: 70%;
  }
}
/*

h1,h2,h3,h4,h5,h6 {
  color: $text-color-dark;
  font-family: $secondary-font;
  text-align: center;
  font-weight: 700;
  line-height: 1.2;
}

h1, .h1{
  font-size: 60px;
  @include mobile {
    font-size: 45px;
  }
}

h2, .h2{
  font-size: 40px;
  @include mobile {
    font-size: 30px;
  }
}

h3, .h3{
  font-size: 25px;
  @include mobile {
    font-size: 20px;
  }
}

h4, .h4{
  font-size: 20px;
  @include mobile {
    font-size: 18px;
  }
}

h5, .h5{
  font-size: 18px;
  @include mobile {
    font-size: 16px;
  }
}

h6, .h6{
  font-size: 16px;
  @include mobile {
    font-size: 14px;
  }
}

*/
.wrapper {
  --background: #62ABFF;
  --icon-color: #414856;
  --shape-color-01: #B8CBEE;
  --shape-color-02: #7691E8;
  --shape-color-03: #FDD053;
  --width: 170px; /*90*/
  --height: 20px; /*90*/
  --border-radius: var(--height);
  width: var(--width);
  height: var(--height);
  position: relative;
  border-radius: var(--border-radius);
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper .btn {
  width: 100px;
  height: 24px;
  font-size: 16px;
  font-family: "Ubuntu", "redhat", "merriweather", "archivo", "poppins", "lato", "raleway", "amulya", "source-sans-pro", "clashgrotesk", "nunito", "nunito-sans", "rubik";
  text-transform: capitalize;
  text-align: center;
  padding: 0px;
  border-radius: 0;
  font-weight: 600;
  border: 0px;
  z-index: 1;
  transition: 0.2s ease;
  overflow: hidden;
  white-space: nowrap;
  /*
  &::before {
    position: absolute;
    content: "";
    height: 80%;
    width: 100%;
    left: 0;
    bottom: 10%;
    z-index: -1;
    transition: transform .2s ease-in-out;
    transform-origin: top;
    transform: scaleY(0);
  }*/
  /*
  &:active,
  &:hover,
  &.focus,
  &:focus,
  &.active {
    outline: 0;
    box-shadow: none !important;

    &::before {
      transform: scaleY(1);
      transform-origin: bottom;
    }
  }*/
}
.wrapper {
  /* 
  .btn {
    background: var(--background);
    width: var(--width);
    height: var(--height);
    position: relative;
    z-index: 3;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(#414856, 0.05);
    display: flex;
    justify-content: center;
    align-items: center; 
    animation: plus-animation-reverse .5s ease-out forwards;
    &::before,
    &::after {
      content: "";
      display: block;
      position: absolute;
      border-radius: 4px;
      background: #fff;
    }
    &::before {
      width: 4px;
      height: 28px;
    }
    &::after {
      width: 28px;
      height: 4px;
    }
  }
  */
}
.wrapper .tooltip {
  /*width: 90px;
  height: 75px;
  border-radius: 70px;*/
  position: absolute;
  background: #fff;
  z-index: 2;
  padding: 0;
  /*box-shadow: 0 10px 30px rgba(#414856, 0.05);*/
  opacity: 0;
  top: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /*transition: opacity .15s ease-in, top .15s ease-in, width .15s ease-in;*/
  /* gambetta del callout */
  /*
  > svg { 
    width: 100%;
    height: 26px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;      
  }
  &::after {
    content: "";
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    margin-left: -10px;
    bottom: -8px;
    transform: rotate(45deg);
    z-index: 0;
  }*/
}
.wrapper input {
  height: 45px;
  width: 45px;
  margin-top: 4px;
  /*border-radius: var(--border-radius);*/
  cursor: pointer;
  position: absolute;
  z-index: 5;
  opacity: 0;
}
.wrapper input:checked ~ .btn { /* animazione del bottone con il testo in esso compreso */
  animation: plus-animation 1s ease-out backwards;
  color: red; /* #FF9C4B */
  border: 2px solid red;
}
.wrapper input:checked ~ .tooltip { /* regolazione misure tooltip */
  padding: 0px;
  width: 490px;
  height: 60px;
  animation: stretch-animation 1s ease-out forwards 0.15s;
  /*left: 150px;
  top: -45px;*/
  opacity: 1;
}

.rotated-title {
  margin: 5px;
  writing-mode: vertical-lr;
  transform: scale(-1);
  position: relative;
}

@keyframes pang-animation {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.1);
    opacity: 0;
  }
}
@keyframes plus-animation {
  0% {
    transform: rotate(0) scale(1);
  }
  20% {
    transform: rotate(60deg) scale(0.93);
  }
  55% {
    transform: rotate(35deg) scale(0.97);
  }
  80% {
    transform: rotate(48deg) scale(0.94);
  }
  100% {
    transform: rotate(45deg) scale(0.95);
  }
}
@keyframes plus-animation-reverse {
  0% {
    transform: rotate(45deg) scale(0.95);
  }
  20% {
    transform: rotate(-15deg);
  }
  55% {
    transform: rotate(10deg);
  }
  80% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(0) scale(1);
  }
}
@keyframes stretch-animation {
  0% {
    transform: scale(1, 1);
  }
  10% {
    transform: scale(1.1, 0.9);
  }
  30% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.05, 0.95);
  }
  100% {
    transform: scale(1, 1);
  }
}
/* Buttons style */
.btn {
  font-size: 16px;
  font-family: "Ubuntu", "redhat", "merriweather", "archivo", "poppins", "lato", "raleway", "amulya", "source-sans-pro", "clashgrotesk", "nunito", "nunito-sans", "rubik";
  text-transform: none; /* capitalize */
  /* [27/10/2026 12:40] altezza ridotta di tutti i bottoni del sito: padding verticale da 15px a 9px */
  padding: 9px 40px;
  border-radius: 0;
  font-weight: 500;
  border: 0;
  position: relative;
  z-index: 1;
  transition: 0.2s ease;
  overflow: hidden;
  white-space: nowrap;
}
.btn::before {
  position: absolute;
  content: "";
  height: 80%;
  width: 100%;
  left: 0;
  bottom: 10%;
  z-index: -1;
  transition: transform 0.2s ease-in-out;
  transform-origin: top;
  transform: scaleY(0);
}
.btn:active, .btn:hover, .btn.focus, .btn:focus, .btn.active {
  outline: 0;
  box-shadow: none !important;
}
.btn:active::before, .btn:hover::before, .btn.focus::before, .btn:focus::before, .btn.active::before {
  transform: scaleY(1);
  transform-origin: bottom;
}

.btn-sm {
  font-size: 16px;
  padding: 10px 35px;
}

/* [03/11/2026 16:55] Bottoni rossi delle schede "Prodotti correlati": un po' piu'
   bassi degli altri btn-sm (padding verticale da 10px a 5px, circa 34px di
   altezza invece di 44px) */
.btn-correlati {
  font-size: 15px;
  padding: 5px 30px;
}

.btn-xs {
  font-size: 14px;
  padding: 5px 15px;
}

.btn-primary {
  color: #fff;
  background-color: #E1251B;
}
.btn-primary::before {
  background-color: #fff;
}
.btn-primary:active, .btn-primary:hover, .btn-primary.focus, .btn-primary:focus, .btn-primary.active {
  color: #E1251B !important;
  background-color: rgb(179.4642857143, 29.5119047619, 21.5357142857) !important;
  border-color: rgb(179.4642857143, 29.5119047619, 21.5357142857) !important;
}

.btn-outline-primary {
  color: #E1251B;
  background-color: transparent;
  border: 1px solid #E1251B;
}
.btn-outline-primary::before {
  background-color: #fff;
}
.btn-outline-primary:active, .btn-outline-primary:hover, .btn-outline-primary.focus, .btn-outline-primary:focus, .btn-outline-primary.active {
  color: #E1251B !important;
  background-color: #E1251B !important;
  border-color: #E1251B !important;
}

.btn-light {
  color: #E1251B;
  background-color: #fff;
  border: 1px solid #fff;
}
.btn-light::before {
  background-color: #E1251B;
}
.btn-light:active, .btn-light:hover, .btn-light.focus, .btn-light:focus, .btn-light.active {
  color: #fff !important;
  background-color: #fff !important;
  border: 1px solid #fff !important;
}

/* Classe che centra le immagini orizzontalmente */
.marginauto {
  margin: 10px auto 20px;
  display: block;
}

body {
  background-color: #fff;
  overflow-x: hidden;
}

::selection {
  background: rgb(232.8214285714, 78.3928571429, 70.1785714286);
  color: #fff;
}

/* preloader */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #FFDC11;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
ol,
ul {
  list-style-type: none;
  margin: 0px;
}
*/
ol {
  list-style-type: decimal;
  margin-top: -10px;
  margin-bottom: 6px;
}

ul {
  list-style-type: disc;
  margin-top: -10px;
  margin-bottom: 6px;
}

img {
  vertical-align: middle;
  border: 0;
}

.lang-link {
  color: rgb(89, 253, 7); /* Default color */
  text-decoration: none; /* Remove underline */
}

.lang-link:hover {
  color: black; /* Hover color */
}

a,
a:hover,
a:focus {
  text-decoration: none;
}

a {
  color: inherit;
}

a,
button,
select {
  cursor: pointer;
  transition: 0.2s ease;
}
a:focus,
button:focus,
select:focus {
  outline: 0;
}

a:hover {
  color: #0000FF; /*$primary-color;*/
  font-weight: 600;
}

a.text-primary:hover {
  color: #E1251B !important;
}

a.text-light:hover {
  color: #E1251B !important;
}

h4 {
  transition: 0.2s ease;
}

a h4:hover {
  color: #E1251B;
}

.slick-slide {
  outline: 0;
}

.section {
  padding-top: 90px;
  padding-bottom: 90px;
}
.section-sm {
  padding-top: 40px;
  padding-bottom: 40px;
}
.section-title {
  margin-bottom: 30px;
}

.bg-cover {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.border-primary {
  border-color: #ededf1 !important;
}

/* Mia aggiunta: si tratta del bordo che dal titolo della sezione Our Products della home page arriva fino al margine orizzontale della pagina */
.border-line-primary {
  border-color: #1a1a37 !important;
}

/* overlay Si tratta della patina scura che viene sovrapposta all'immagine del banner delle pagine secondarie del sito */
.overlay {
  position: relative;
}
.overlay::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #1a1a37;
  opacity: 0.7;
}

.outline-0 {
  outline: 0 !important;
}

.d-unset {
  display: unset !important;
}

.bg-primary {
  background: #E1251B !important;
}

.bg-secondary {
  background: #1a1a37 !important;
}

.bg-gray {
  background: #f8f8f8;
}

.text-primary {
  color: #E1251B !important;
}

.text-color {
  color: #5c5c77;
}

.text-light {
  color: #8585a4 !important;
}

.text-lighten {
  color: #d6d6e0 !important;
}

.text-muted {
  color: #b5b5b7 !important;
}

.text-dark {
  color: #1e1e4b !important;
}

.font-secondary {
  font-family: "aller-bold";
}

.mb-10 {
  margin-bottom: 10px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.mb-30 {
  margin-bottom: 30px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

.mb-50 {
  margin-bottom: 50px !important;
}

.mb-60 {
  margin-bottom: 60px !important;
}

.mb-70 {
  margin-bottom: 70px !important;
}

.mb-80 {
  margin-bottom: 80px !important;
}

.mb-90 {
  margin-bottom: 90px !important;
}

.mb-100 {
  margin-bottom: 100px !important;
}

.pl-150 {
  padding-left: 150px;
}

.zindex-1 {
  z-index: 1;
}

@media (max-width: 991px) {
  .overflow-md-hidden {
    overflow: hidden;
  }
}

.vertical-align-middle {
  vertical-align: middle;
}

.icon-md {
  font-size: 36px;
}

/* page title */
.page-title-section {
  padding: 200px 0 80px;
}

.no-header-page-title-section {
  padding: 74px 0 80px;
}

.custom-breadcrumb li.nasted {
  position: relative;
  padding-left: 25px;
}
.custom-breadcrumb li.nasted::before {
  position: absolute;
  font-family: "themify";
  content: "\e649";
  font-size: 20px;
  top: 50%;
  left: -5px;
  color: #fff;
  transform: translateY(-50%);
}

/* /page title */
.list-styled {
  padding-left: 25px;
}
.list-styled li {
  position: relative;
  margin-bottom: 15px;
}
.list-styled li::before {
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #E1251B;
  left: -25px;
  top: 5px;
}

textarea.form-control {
  height: 200px;
  padding: 20px;
}

#map_canvas {
  height: 500px;
}

.post-thumb-sm {
  max-width: 100px;
}

/* pagination */
.pagination {
  justify-content: center;
}
.pagination .page-item {
  margin: 0 10px;
}
.pagination .page-item.active .page-link {
  background: #E1251B;
  color: #fff;
  border-color: #E1251B;
}
.pagination .page-item:first-child .page-link, .pagination .page-item:last-child .page-link {
  border-radius: 0;
}
.pagination .page-item .page-link {
  color: #5c5c77;
}

.content * {
  margin-bottom: 20px;
}
.content a {
  text-decoration: underline;
}
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
  margin-bottom: 10px;
}
.content ol {
  padding-left: 20px;
}
.content ul {
  padding-left: 0;
}
.content ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  list-style-type: none;
}
.content ul li::before {
  position: absolute;
  content: "\e65d";
  font-family: "themify";
  font-size: 14px;
  left: 0;
  top: 1px;
  color: #E1251B;
  transition: 0.3s ease;
}
.content blockquote p {
  margin-bottom: 0;
  color: #5c5c77;
  font-style: italic !important;
}
.content pre {
  padding: 10px 20px;
  background: #f8f9fe;
}

.teacher-thumb-sm {
  height: 85px;
  width: 85px;
  object-fit: cover;
}

/* Elimino tutta l'originaria formattazione delle tabelle, che personalizzo con il codice seguente

  table {
    text-align: left;
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    border: 1px solid #dee2e6;

    th,
    td {
      padding: .75rem;
      vertical-align: top;
      border: 1px solid #dee2e6
    }

    thead {
      background: darken($color: $light, $amount: 2);
    }

    tbody {
      background: $light;

      td {
        text-align: left !important;
      }
    }
  }
*/
/* inizio FORMATTAZIONE PERSONALIZZATA TABELLE */
/*
body {
  background-color: #3e94ec;
  font-family: "Roboto", helvetica, arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}

div.table-title {
   display: block;
  margin: auto;
  max-width: 600px;
  padding:5px;
  width: 100%;
}
*/
/* Ho creato una colonna di larghezza minima, modificando la larghezza della classe col-1, presente nel plugin boostrap, dagli originali 8.333333 agli 3.333333 punti percentuali, onde essa possa fungere da margine dx per spostare verso sx le altre pagine-colonne */
.my-margin-col-1 {
  -ms-flex: 0 0 4.333333%;
  flex: 0 0 4.333333%;
  max-width: 4.333333%;
}

.table-title {
  color: #1a1a37;
  font-size: 24px;
  font-weight: 600;
  font-family: "Ubuntu", "Roboto", helvetica, arial, sans-serif;
  text-shadow: -1px -1px 1px #c7c5c5;
  text-transform: none;
  padding-top: 30px;
  padding-bottom: none;
}

.center {
  text-align: center;
}

.table-centered {
  margin-left: auto;
  margin-right: auto;
}

.text-centered {
  text-align: center;
}

.table-fill {
  background: white;
  border-radius: 3px;
  border-collapse: collapse;
  /*height: 320px;*/
  margin: auto;
  max-width: 1300px;
  padding: 0px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}

th, .like-th {
  color: white;
  /* [04/11/2026 15:30] intestazioni delle tabelle in grigio medio-scuro neutro
     (prima verde-grigio #738e97).
     [04/11/2026 15:35] schiarito un po': da #5e6670 a #6f7781 (testo bianco,
     contrasto circa 4,6:1) */
  background: #6f7781;
  /*border-bottom:4px solid #9ea7af;*/
  border-right: 1px solid #C1C3D1; /*#343a45;*/
  font-size: 14px;
  font-weight: 400;
  padding: 5px;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align: middle;
  /*height: 100px;*/
}

.big-th-font {
  font-size: 20px;
  font-weight: 600;
  font-family: "Roboto", helvetica, arial, sans-serif;
  text-transform: none;
}

.standard-cell-padding {
  padding-bottom: 3px;
  padding-top: 3px;
  padding-left: 10px;
  padding-right: 10px;
}

/*
th:first-child {
  border-top-left-radius:5px;
}

th:last-child {
  border-top-right-radius:5px;
  border-right:none;
}
*/
.myth-first {
  border-top-left-radius: 5px;
}

.myth-last {
  border-top-right-radius: 5px;
  border-right: none;
}

.th2 {
  color: white;
  background: #E1251B;
  /*border-bottom:4px solid #9ea7af;*/
  border-right: 1px solid #C1C3D1; /*#343a45;*/
  font-size: 18px;
  font-weight: 400;
  padding: 8px;
  text-align: left;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align: middle;
}

.th2:first-child {
  border-top-left-radius: 0px;
}

.th2:last-child {
  border-top-right-radius: 0px;
  border-right: none;
}

tr {
  border-top: 1px solid #C1C3D1;
  border-bottom: 1px solid #C1C3D1;
  color: #000000; /*666B85;*/
  font-size: 16px;
  font-weight: normal;
  /*text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);*/
}

/*
tr:hover td {
  background:#4E5066;
  color:#FFFFFF;
  border-top: 1px solid #22262e;
}
*/
/*
tr:hover td {
  background:#4E5066;
  color:#FFFFFF;
  border-top: 1px solid #22262e;
}
*/
.my-bold {
  font-weight: 600;
}

.hover {
  color: #f90000;
  font-weight: 500;
}

/* border-bottom: 4px solid #22262e; */
/*
.standardHoverTable{
  width:100%; 
  border-collapse:collapse; 
}

.standardHoverTable td{ 
  padding:7px; border:#4e95f4 1px solid;
}
*/
/* Define the default color for all the table rows */
/*
.standardHoverTable tr{
  background: #b8d1f3;
}
*/
/* highlight color personalizzato per tabella di classe standardHoverTable */
.standardHoverTable tr:hover td {
  background-color: #ffff99;
}

.my-pointer {
  cursor: pointer;
}

.special-bckgr {
  background: #d8d7d7;
}

.highlight-bckgr {
  background: #f4ef9a;
}

/* 2026-10-14 17:45 - CORREZIONE cornice rossa invisibile a sinistra sugli schermi non 4K.
   Causa: le tabelle usano border-collapse: collapse (impostato da Bootstrap) e la cella alla
   sinistra della cornice ha un proprio border-right grigio di 1px (regola "td" più sotto).
   Nel modello a bordi collassati due bordi adiacenti si contendono lo stesso spazio: vince il
   più largo e, a parità di larghezza, quello della cella più a sinistra (cioè il grigio).
   Su schermi a densità normale (devicePixelRatio = 1) il browser arrotonda 1.5px a 1px, quindi
   il bordo rosso pareggia col grigio e perde; sui 4K (DPR >= 2) 1.5px resta più largo e vince.
   Soluzione: larghezza intera di 2px, sempre maggiore di 1px a qualunque densità, così il rosso
   vince in ogni caso. Uniformate a 2px anche le altre tre classi per avere una cornice omogenea. */
.special-left-border {
  border-left: 2px solid #f90000;
}

.special-right-border {
  border-right: 2px solid #f90000; /* 2026-10-14 17:45 - da 1.5px a 2px, vedi commento su .special-left-border */
}

.special-top-border {
  border-top: 2px solid #f90000; /* 2026-10-14 17:45 - da 1.5px a 2px, vedi commento su .special-left-border */
}

.special-bottom-border {
  border-bottom: 2px solid #f90000; /* 2026-10-14 17:45 - da 1.5px a 2px, vedi commento su .special-left-border */
}

.no-right-border {
  border-right: 0px;
}

.no-border {
  border: 0px;
}

.no-bottom-border {
  border-bottom: 0px;
}

tr:first-child {
  border-top: none;
}

tr:last-child {
  border-bottom: none;
}

/*
tr:nth-child(odd) td {
  background:#EBEBEB;
}

tr:nth-child(odd):hover td {
  background:#4E5066;
}

tr:last-child td:first-child {
  border-bottom-left-radius:3px;
}

tr:last-child td:last-child {
  border-bottom-right-radius:3px;
}
*/
td {
  background: #EBEBEB;
  padding: 8px;
  text-align: center;
  vertical-align: middle;
  font-weight: 400;
  font-size: 14px;
  /*text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);*/
  border-right: 1px solid #C1C3D1;
  /*border-left: 1px solid #C1C3D1;*/
}

.td-vertical {
  color: #E1251B;
  font-size: 20px;
  font-weight: 600;
}

/*
td:last-child {
  border-right: 0px;
}
*/
th.text-left {
  text-align: left;
}

th.text-center {
  text-align: center;
}

th.text-right {
  text-align: right;
}

td.text-left {
  text-align: left;
}

td.text-center {
  text-align: center;
}

td.text-right {
  text-align: right;
}

.td-last {
  border-right: 0px;
}

/* fine FORMATTAZIONE PERSONALIZZATA TABELLE */
/* inizio FORMATTAZIONE TABELLE PER TOOLTIPS */
.tool-table-fill {
  background: white;
  border-radius: 3px;
  border-collapse: collapse;
  /*height: 320px;*/
  margin: auto;
  max-width: 490px;
  padding: 0px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}

.th-tool {
  color: white;
  background: #0E7294;
  border-top: 1px solid white;
  border-right: 1px solid white; /*#343a45;*/
  border-bottom: 1px solid white;
  font-size: 16px;
  font-weight: 400;
  padding: 0px 5px 3px 5px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align: middle;
}

.th-tool-vertical {
  color: white;
  background: #0E7294;
  font-size: 16px;
  font-weight: 400;
  padding: 0px 5px 3px 5px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align: middle;
}

.th-tool:first-child {
  border-top-left-radius: 5px;
}

.th-tool:last-child {
  border-top-right-radius: 5px;
  border-right: none;
}

.th-tool-special {
  color: #E1251B;
  background: white;
  border-bottom: none;
  font-size: 16px;
  font-weight: 500;
  padding: 0px 5px 3px 5px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align: middle;
}

.tr-tool {
  border-top: 1px solid #C1C3D1;
  border-bottom: 1px solid #C1C3D1;
  color: #666B85;
  font-size: 16px;
  font-weight: normal;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);
}

.tr-tool-special {
  border-bottom: 1px solid #C1C3D1;
  color: #666B85;
  height: 44px;
}

.tr-tool:hover td {
  background: #4E5066;
  color: #FFFFFF;
  border-top: 1px solid #22262e;
}

/*background:4E5066;*/
.tr-tool:first-child {
  border-top: none;
}

.tr-tool:last-child {
  border-bottom: none;
}

.tr-tool:nth-child(odd) td {
  background: #EBEBEB;
}

.tr-tool:nth-child(odd):hover td {
  background: #4E5066;
}

.tr-tool:last-child td:first-child {
  border-bottom-left-radius: 3px;
}

.tr-tool:last-child td:last-child {
  border-bottom-right-radius: 3px;
}

.b-tool {
  font-weight: 600;
  color: red;
}

.td-tool {
  background: #FFFFFF;
  padding: 0px;
  text-align: left;
  vertical-align: middle;
  font-weight: 300;
  font-size: 14px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
}

.td-tool-vertical {
  color: #E1251B;
  font-size: 20px;
  font-weight: 600;
}

.td-tool:last-child {
  border-right: 0px;
}

.th-tool.text-left {
  text-align: left;
}

.th-tool.text-center {
  text-align: center;
}

.th-tool.text-right {
  text-align: right;
}

.td-tool.text-left {
  text-align: left;
}

.td-tool.text-center {
  text-align: center;
}

.td-tool.text-right {
  text-align: right;
}

/* [03/11/2026 15:10] Pagine di famiglia dei prodotti (layouts/home_products/famiglia.html):
   il primo titolo di tabella non ha lo spazio superiore di 30px della classe
   .table-title, cosi' resta vicino allo header della pagina. Vale solo per il
   titolo che apre il contenuto: eventuali altri titoli di tabella e tutte le
   altre pagine del sito mantengono i 30px. */
.famiglia-prodotti .content > .table-title:first-child {
  padding-top: 0;
}

/* Si tratta della porzione di barra superiore bianca contenente il telefono a la email */
.top-header {
  font-size: 12px;
  transition: transform 0.2s ease;
  transform-origin: top;
  font-weight: 600;
}
.top-header.hide {
  transform: scaleY(0);
  transform-origin: top;
}

/* Si tratta della porzione di barra contenente il menu delle lingue */
.navigation {
  background: linear-gradient(to right, transparent 50%, #E1251B 50%);
  transition: 0.2s ease;
}
@media (max-width: 991px) {
  .navigation {
    background: #1a1a37;
  }
  .navigation .navbar-brand {
    padding: 12px 0;
  }
}

@media (max-width: 991px) {
  .navbar-collapse {
    background: #1a1a37;
  }
}

/* Si tratta della porzione di barra contenente il menu principali */
.navbar-nav {
  /* Dall'impostazione della width (che ho aggiunto io), da quella seguente del padding (che crea il margine sx) e, infine, dal numero dei titoli di menu presenti dipende l'altezza della barra stessa e la grandezza con cui viene reso il logo alla sx della barra */
  width: 650px;
  padding-left: 50px;
  background: #E1251B;
}
@media (max-width: 991px) {
  .navbar-nav {
    padding-left: 0;
    background: #1a1a37;
  }
}

/* Si tratta del colore di fondo della porzione di barra contenente il logo */
.nav-bg {
  background-color: #182b45;
}

.nav-item .nav-link {
  text-transform: uppercase;
  font-weight: 600;
}
.nav-item {
  margin: 0 15px;
  position: relative;
}
.nav-item::before {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 6px;
  width: 100%;
  content: "";
  background: #fff;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease;
}
.nav-item:hover::before, .nav-item.active::before {
  transform: scaleY(1);
  transform-origin: bottom;
}

.navbar-dark .navbar-nav .nav-link {
  color: #fff;
}

link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
  color: #fff;
}

.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show > .nav-link {
  color: #fff;
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding: 40px 0px;
}
@media (max-width: 991px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding: 20px;
  }
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.0509803922);
}

.navbar .dropdown:hover .dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.navbar .dropdown-menu {
  box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.12);
  border-bottom: 5px solid #E1251B;
  padding: 15px;
  top: 96px;
  border-radius: 0;
  display: block;
  visibility: hidden;
  transition: 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
  background: #fff;
}
@media (max-width: 991px) {
  .navbar .dropdown-menu {
    display: none;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transform-origin: unset;
  }
}
.navbar .dropdown-menu.show {
  visibility: hidden;
}
@media (max-width: 991px) {
  .navbar .dropdown-menu.show {
    visibility: visible;
    display: block;
  }
}
.navbar .dropdown-item {
  position: relative;
  color: #1e1e4b;
  transition: 0.2s ease;
  text-transform: capitalize;
  font-family: "Ubuntu", "redhat", "merriweather", "archivo", "poppins", "lato", "raleway", "amulya", "source-sans-pro", "clashgrotesk", "nunito", "nunito-sans", "rubik";
}
@media (max-width: 991px) {
  .navbar .dropdown-item {
    text-align: center;
  }
}
.navbar .dropdown-item:not(:last-child) {
  margin-bottom: 10px;
}
.navbar .dropdown-item:hover {
  color: #E1251B;
  background: transparent;
}
.navbar .dropdown-item-bis {
  position: relative;
  color: #1e1e4b;
  transition: 0.2s ease;
  text-transform: capitalize;
  font-family: "Ubuntu", "redhat", "merriweather", "archivo", "poppins", "lato", "raleway", "amulya", "source-sans-pro", "clashgrotesk", "nunito", "nunito-sans", "rubik";
}
@media (max-width: 991px) {
  .navbar .dropdown-item-bis {
    text-align: center;
  }
}
.navbar .dropdown-item-bis:not(:last-child) {
  margin-bottom: 10px;
}
.navbar .dropdown-item-bis:hover {
  color: #E1251B;
  background: transparent;
}

.hero-section {
  padding: 250px 0 290px;
}

.hero-slider .prevArrow,
.hero-slider .nextArrow {
  position: absolute;
  bottom: -123px;
  z-index: 9;
  padding: 15px;
  color: rgba(255, 255, 255, 0.5);
  border: 0;
  font-size: 30px;
  transition: all linear 0.2s;
  background: transparent;
}
.hero-slider .prevArrow:focus,
.hero-slider .nextArrow:focus {
  outline: 0;
}
.hero-slider .prevArrow:hover,
.hero-slider .nextArrow:hover {
  color: #E1251B;
}
.hero-slider .prevArrow {
  right: 60px;
}
.hero-slider .nextArrow {
  right: 0;
}
.hero-slider .slick-dots {
  position: absolute;
  left: 0;
  bottom: -100px;
  padding-left: 0;
}
.hero-slider .slick-dots li {
  display: inline-block;
  margin: 0 6px;
}
.hero-slider .slick-dots li.slick-active button {
  background: #E1251B;
}
.hero-slider .slick-dots li button {
  color: transparent;
  padding: 0;
  overflow: hidden;
  height: 10px;
  width: 10px;
  background: rgba(255, 255, 255, 0.5);
  border: 0;
  outline: 0;
}

/* banner feature */
.feature-icon {
  font-size: 50px;
  color: #E1251B;
  display: inline-block;
}

.feature-blocks {
  margin-top: -100px;
  padding-left: 70px;
  padding-top: 80px;
  padding-right: 30%;
}
@media (max-width: 1400px) {
  .feature-blocks {
    padding-right: 10%;
  }
}
@media (max-width: 1200px) {
  .feature-blocks {
    padding-right: 50px;
    padding-left: 50px;
    padding-top: 30px;
  }
  .feature-blocks h3 {
    font-size: 20px;
  }
}
@media (max-width: 991px) {
  .feature-blocks {
    margin-top: 0;
    padding: 50px;
  }
  .feature-blocks h3 {
    font-size: 25px;
  }
}

/* /banner feature */
/* course */
.card-btn {
  font-size: 12px;
  padding: 5px 10px;
}

.flex-basis-33 {
  flex-basis: 33.3333%;
}

.hover-shadow {
  transition: 0.3s ease;
}
.hover-shadow:hover {
  box-shadow: 0px 4px 25px 0px gray;
}

/* /course */
/* success story */
.success-video {
  min-height: 300px;
}
.success-video .play-btn {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
@media (max-width: 767px) {
  .success-video .play-btn {
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.play-btn {
  display: inline-block;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  background: #E1251B;
  color: #fff;
  font-size: 20px;
  text-align: center;
}
.play-btn i {
  line-height: 80px;
}
.play-btn::before {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  z-index: -2;
  transition: 0.3s ease;
  transition-delay: 0.2s;
}
.play-btn::after {
  position: absolute;
  content: "";
  height: 80%;
  width: 80%;
  transform: translate(-50%, -50%);
  background: #E1251B;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  z-index: -1;
  transition: 0.3s ease;
}
.play-btn:hover::before {
  height: 80%;
  width: 80%;
  transition-delay: 0s;
}
.play-btn:hover::after {
  height: 0;
  width: 0;
  transition: 0s ease;
}

/* /success story */
/* events */
.card-date {
  position: absolute;
  background: #E1251B;
  font-family: "aller-bold";
  text-align: center;
  padding: 10px;
  color: #fff;
  top: 0;
  left: 0;
  text-transform: uppercase;
}
.card-date span {
  font-size: 40px;
}

/* /events */
/* teacher */
.teacher-info {
  width: 70%;
  bottom: 0;
  right: 0;
}

/* /teacher */
/* footer */
.newsletter {
  background-image: linear-gradient(to right, transparent 50%, #E1251B 50%);
  margin-bottom: -170px;
  position: relative;
  z-index: 1;
}
.newsletter-block {
  padding-left: 50px;
}
@media (max-width: 575px) {
  .newsletter-block {
    padding-left: 15px;
  }
}

.input-wrapper {
  position: relative;
}
.input-wrapper button {
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 575px) {
  .input-wrapper button {
    position: static;
    transform: translateY(-10px);
    width: 100%;
    outline: 5px solid #fff;
    outline-offset: -5px;
  }
}

.form-control {
  height: 60px;
  background: #fff;
  border-radius: 0;
  padding-left: 25px;
}
.form-control:focus {
  border-color: #E1251B;
  box-shadow: none;
}

.newsletter-block .form-control {
  height: 80px;
  padding-right: 160px;
}
@media (max-width: 575px) {
  .newsletter-block .form-control {
    padding-right: 25px;
  }
}

.bg-footer {
  background-color: #182b45;
}

.logo-footer {
  margin-top: -20px;
  display: inline-block;
}

.footer {
  border-color: #494a43 !important;
  padding-top: 70px;
  color: #8996a7;
}
.footer a {
  color: #8996a7;
  text-transform: capitalize;
}
.footer a:hover {
  text-decoration: underline;
  color: #fff;
}

.copyright p {
  color: #8996a7;
  text-transform: capitalize;
}

/* /footer */
.filter-controls li {
  cursor: pointer;
  transition: 0.1s ease;
}
.filter-controls li.active {
  font-weight: 600;
  color: #E1251B;
}
.filter-controls li:hover {
  color: #E1251B;
}

.tag-list a {
  display: block;
  padding: 5px 10px;
  background: #f8f9fe;
  color: #5c5c77;
}
.tag-list a:hover {
  background-color: #E1251B;
  color: #fff;
}

.media a:hover h5 {
  color: #E1251B;
  transition: 0.3s;
}

/* ==========================================================================
   [27/10/2026 14:00] OTTIMIZZAZIONE PER CELLULARI E TABLET
   --------------------------------------------------------------------------
   Il controllo del sito su schermi larghi 320-412px (cellulari) ha mostrato
   che quasi tutte le pagine erano piu' larghe dello schermo: il browser del
   cellulare allargava la pagina e la rimpiccioliva (testo minuscolo, header
   tagliato, scorrimento orizzontale). Le cause e le correzioni sono qui
   raccolte in un unico file, importato per ultimo in main.scss cosi' da
   prevalere sulle regole del tema. Sugli schermi grandi non cambia nulla.
   ========================================================================== */
/* 1. Menu principale: in _navigation.scss la barra dei menu ha larghezza fissa
      di 650px (necessaria su desktop per la grafica della barra rossa). Sotto
      i 992px il menu diventa a comparsa (pulsante "hamburger") e quei 650px
      allargavano l'intera pagina: qui la larghezza torna al 100%. */
@media (max-width: 991px) {
  .navbar-nav {
    width: 100%;
  }
}

/* 2. Logo nell'header: lasciava troppo poco spazio al pulsante del menu e su
      schermi stretti usciva dallo schermo; ora occupa al massimo lo spazio
      disponibile meno i ~90px del pulsante "hamburger" (56px) e del margine
      destro del logo (16px): cosi' logo e pulsante stanno sulla stessa riga. */
@media (max-width: 991px) {
  .navbar-brand {
    max-width: calc(100% - 90px);
  }
}

@media (max-width: 767px) {
  /* 3. Immagini con larghezza fissa (es. logo della homepage alto 200px, foto
        dei certificati larghe 400px, foto della homepage con width="400"):
        non possono superare la larghezza dello schermo e mantengono le
        proporzioni. */
  img {
    max-width: 100%;
    height: auto;
  }
  /* 4. Bottoni: il tema impedisce di andare a capo (white-space: nowrap), per
        cui le etichette lunghe ("Scopri di più su di noi e sulla nostra lunga
        storia") uscivano dallo schermo. Su cellulare il testo va a capo. */
  .btn {
    white-space: normal;
  }
}
/* [27/10/2026 14:10] Tabelle e sezioni a scomparsa: regole valide fino a 991px
   (cellulari e tablet), perche' alcune tabelle delle schede prodotto superano
   la larghezza dello schermo anche su tablet da 768px. */
@media (max-width: 991px) {
  /* 5. Tabelle tecniche (famiglie e schede prodotto): hanno colonne di larghezza
        fissa e non possono stringersi senza diventare illeggibili. Su cellulare
        la tabella resta della sua larghezza ma scorre in orizzontale al suo
        interno (con il dito), senza allargare tutta la pagina. */
  table.table-centered {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* 6. Sezioni a scomparsa (<details>, es. "Analisi chimica", "Proprietà fisiche"
        nelle schede prodotto): finche' sono chiuse il browser non calcola lo
        scorrimento interno delle tabelle che contengono e le considerava a
        larghezza piena, allargando comunque la pagina (da 360 a ~470px).
        Limitare la sezione alla larghezza dello schermo risolve: aperta la
        sezione, la tabella scorre al suo interno come le altre. */
  details {
    max-width: 100%;
    overflow-x: hidden;
  }
}
/* [27/10/2026 14:15] 7. Pagina "Specifiche dimensionali comuni"
   (layouts/home_products/single.html): rientri della foto e dell'elenco delle
   misure e rientro facoltativo "padding_sx" delle foto dei formati applicati
   solo da 768px in su; sotto, foto ed elenco sono centrati a tutta larghezza. */
.specifiche-foto {
  padding-top: 20px;
}

@media (min-width: 768px) {
  .specifiche-foto {
    padding-left: 60px;
    margin-left: 60px;
  }
  .specifiche-lista {
    margin-left: -30px;
  }
  .foto-rientro {
    padding-left: var(--rientro);
  }
}
/* [27/10/2026 14:15] 8. Titolo grande delle schede prodotto
   (partials/page-header-no-bckgrimage.html, 32pt in linea): sul cellulare
   occupava 4-5 righe e l'intero primo schermo; ridotto a 20pt. */
@media (max-width: 767px) {
  .titolo-pagina-grande {
    font-size: 20pt !important;
  }
}
/* [27/10/2026 14:20] 9. Tre bottoni in fondo alla pagina delle specifiche: sul
   cellulare vanno uno sotto l'altro, tutti della stessa larghezza (prima il
   primo, con l'etichetta corta, era piu' stretto degli altri due). */
@media (max-width: 767px) {
  .bottoni-famiglie .btn {
    flex: 1 1 100%;
  }
}
/* [27/10/2026 14:25] 10. Schede delle singole qualita' (content/<lingua>/single_*_products/*.md):
   titolo rosso "Vedi ulteriori specifiche tecniche:" / "Further Technical
   Specifications:" (classe titolo-specifiche) e righe cliccabili con il
   triangolino (<summary class="voce-specifiche"> negli shortcode delle tabelle).
   - Computer: aspetto invariato, con il titolo a sinistra sulla stessa riga
     della prima voce (stessi valori che prima erano scritti in linea).
   - Cellulari e tablet (fino a 991px): il titolo sta su una riga propria, al
     centro della pagina, sopra tutte le voci; le voci partono da sinistra e
     sfruttano tutta la larghezza (prima il rientro fisso di 359px le spingeva
     fuori dallo schermo). */
.titolo-specifiche {
  color: red;
  text-align: left;
  margin-left: 34px;
  margin-bottom: -59px;
}

.voce-specifiche {
  margin-left: 359px;
}

@media (max-width: 991px) {
  .titolo-specifiche {
    text-align: center;
    margin-left: 0;
    margin-bottom: 0;
  }
  .voce-specifiche {
    margin-left: 0;
    padding-right: 10px;
  }
}
/* [27/10/2026 14:35] 11. Tabelle "Spessori e tolleranze disponibili" con graffa e testo
   laterale (shortcode tabelle_affiancate_1.html, schede degli acciai).
   - Da 992px in su: disposizione originale (graffa e testo in colonne accanto
     alla tabella); la cella interna "cella-graffa" e' nascosta.
   - Fino a 991px: le colonne laterali sono nascoste e graffa + testo compaiono
     nell'ultima cella della tabella, accanto alle righe evidenziate; la tabella
     scorre in orizzontale con il dito (regola 5) e mostra anche la graffa. */
.cella-graffa {
  display: none;
}

@media (max-width: 991px) {
  .colonne-graffa-laterali {
    display: none;
  }
  .colonna-tabella-graffa {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .table-centered .cella-graffa {
    display: table-cell;
    position: relative;
    min-width: 230px;
    padding: 0 0 0 10px;
    border: 0 !important;
    background: transparent !important;
    vertical-align: middle;
    box-shadow: none !important;
  }
  /* il contenuto e' posizionato in assoluto sull'intera altezza della cella,
     cosi' l'immagine della graffa e' alta esattamente quanto le righe evidenziate */
  .cella-graffa-contenuto {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    left: 10px;
    right: 0;
    display: flex;
    align-items: center;
  }
  /* [27/10/2026 14:45] margin 0: il tema aggiunge margini sotto immagini e testi
     dentro .content, che accorciavano e spostavano la graffa */
  .cella-graffa-contenuto img,
  .cella-graffa-testo {
    margin: 0 !important;
  }
  .cella-graffa-contenuto img {
    height: 100%;
    width: auto;
    max-width: none;
    flex: 0 0 auto;
  }
  .cella-graffa-testo {
    padding-left: 8px;
    white-space: pre-line;
    text-align: center;
    color: rgb(187, 14, 14);
    font-size: 14px;
    line-height: 1.4;
  }
}
/* [27/10/2026 14:50] 11 (seguito). Le linee orizzontali tra le righe sono disegnate
   dalle righe (<tr>) della tabella e proseguivano anche nella colonna della
   graffa: nelle tabelle con graffa, fino a 991px, la linea passa alle singole
   celle, tranne quelle della graffa. */
@media (max-width: 991px) {
  .tabella-con-graffa tr {
    border-top: 0 !important;
    border-bottom: 0 !important;
  }
  .tabella-con-graffa td:not(.cella-graffa),
  .tabella-con-graffa th:not(.cella-graffa) {
    border-bottom: 1px solid rgb(193, 195, 209);
  }
}
/* [27/10/2026 15:00] 12. Menu a tendina sul cellulare: sul computer le voci restano
   su una riga (white-space:nowrap in linea in partials/header.html), ma sullo
   schermo stretto una voce lunga come "Specifiche dimensionali, di finitura e
   d'imballaggio" veniva tagliata: fino a 991px le voci vanno a capo. */
@media (max-width: 991px) {
  .navbar .dropdown-menu {
    white-space: normal !important;
  }
}
/* [27/10/2026 15:05] 13. Voci-titolo dei menu a tendina (computer e cellulare):
   "Specifiche generali", "Famiglie di materiali" ecc. (vedi partials/header.html). */
.dropdown-titolo {
  display: inline-block;
  color: #E1251B;
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.5px;
  font-size: 17px;
  cursor: default;
}

.dropdown-titolo-gruppo {
  margin-top: 10px;
}

/* ==========================================================================
   [27/10/2026 16:05] LOGO PIU' GRANDE NELL'HEADER (solo da 992px in su)
   --------------------------------------------------------------------------
   Richiesta: logo Lamina a sinistra della barra rossa dei menu piu' grande,
   senza aumentare l'altezza della barra (98px) e senza allargare la pagina.
   - Logo: da 64px a 84px di altezza (da 329 a ~431px di larghezza): la barra
     e' alta 98px (link del menu con 40px sopra e sotto), il logo con i suoi 5px
     di margine sopra e sotto ne occupa 94, quindi la barra non cresce.
   - Lo spazio in piu' per il logo (~100px) e' recuperato riducendo i margini:
       * barra dei menu (.navbar-nav): da larghezza fissa 650px (con 43px vuoti
         in fondo) a larghezza del contenuto, rientro sinistro da 50 a 25px;
       * spazio tra le voci del menu: da 15 a 13px per lato;
       * spazio tra logo e barra rossa: da 16px a 0 (l'immagine ha gia' un
         margine bianco proprio);
       * rientro del selettore della lingua: da 30 a 15px.
   - Sugli schermi da 992 a 1199px (contenitore di 960px) il logo si riduce da
     solo fino a quanto c'e' spazio (resta comunque piu' grande di prima).
   - Sotto i 992px (menu a comparsa) non cambia nulla.
   PER TORNARE ALLA VERSIONE PRECEDENTE basta togliere da main.scss la riga
   "@import 'logo_header';" (copia dei file originali in _backup_2026-10-27_logo/).
   ========================================================================== */
@media (min-width: 992px) {
  .navigation .navbar-brand {
    flex: 0 1 auto;
    min-width: 0;
    margin-right: 0;
  }
  .navigation .navbar-brand img {
    height: 84px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
  }
  .navigation .navbar-nav {
    width: auto;
    padding-left: 25px;
    flex-shrink: 0;
  }
  .navigation .nav-item {
    margin: 0 13px;
  }
  .navigation .navbar-collapse > nav {
    padding-left: 15px !important;
    flex-shrink: 0;
  }
}
/* [03/11/2026 16:10] Tutte le regole sono ora limitate a .testo-famiglia (colonna
   del testo): prima ".content table/th/td" valeva anche per le tabelle delle
   qualita' in cima alla pagina e ne cambiava l'aspetto (allineamento, padding,
   caratteri). Ora quelle tabelle sono identiche alle pagine definitive di prima.
   [03/11/2026 15:40] Approfondimenti tecnici nelle pagine di famiglia dei prodotti
   (layouts/home_products/famiglia.html). Stile delle figure inserite con lo
   shortcode {{< figure >}} e delle tabelle Markdown nella colonna del testo.
   Vale solo dentro .famiglia-prodotti: il resto del sito non cambia. */
.famiglia-prodotti {
  /* titoli dei paragrafi tecnici */
}
.famiglia-prodotti .testo-famiglia h3 {
  font-size: 24px;
  margin-top: 35px;
  margin-bottom: 15px;
}
.famiglia-prodotti .testo-famiglia h3:first-child {
  margin-top: 0;
}
.famiglia-prodotti {
  /* figure: larghe quanto la colonna, con didascalia piccola e centrata */
  /* [03/11/2026 16:05] pagina a una colonna: le figure non superano la loro
     larghezza nativa (720px) e sono centrate */
}
.famiglia-prodotti figure {
  margin: 10px auto 35px;
  max-width: 720px;
}
.famiglia-prodotti figure img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 8px;
  border: 1px solid #ededf1;
}
.famiglia-prodotti figcaption,
.famiglia-prodotti figcaption p {
  font-size: 15px;
  line-height: 1.4;
  font-style: italic;
  color: #8585a4;
  text-align: center;
  margin-bottom: 0;
}
.famiglia-prodotti {
  /* tabelle Markdown (es. famiglie degli acciai inossidabili) */
  /* [03/11/2026 16:05] larghezza "auto": la tabella e' larga quanto il suo
     contenuto (al massimo la colonna) invece di allungarsi su tutta la riga */
}
.famiglia-prodotti .testo-famiglia table {
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.45;
}
.famiglia-prodotti .testo-famiglia th {
  background: #6f7781; /* [04/11/2026 15:35] grigio come le altre tabelle (prima #708c99, poi #5e6670) */
  color: #fff;
  font-weight: 600;
  padding: 8px 10px;
  text-align: left;
}
.famiglia-prodotti .testo-famiglia td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #ededf1;
  vertical-align: top;
}
.famiglia-prodotti .testo-famiglia td * {
  margin-bottom: 0;
}
.famiglia-prodotti {
  /* sui cellulari la tabella scorre in orizzontale invece di schiacciarsi */
}
@media (max-width: 767px) {
  .famiglia-prodotti .testo-famiglia table {
    display: block;
    overflow-x: auto;
  }
  .famiglia-prodotti .testo-famiglia td:last-child {
    min-width: 260px;
  }
}

/* [03/11/2026 16:45] Fascia foto delle pagine delle singole qualita'
   (shortcode layouts/shortcodes/fascia_foto.html).
   La fascia esce dal contenitore centrato e occupa tutta la larghezza della
   finestra (100vw), con uno sfondo grigio un po' piu' scuro di quello della
   pagina; al centro c'e' la foto (o il segnaposto) con la didascalia. */
.fascia-foto {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* [04/11/2026 11:30] spazi aumentati del 50%: dalla tabella soprastante
     da 40px a 60px; fra il bordo superiore della fascia e la foto da 45px a 68px */
  margin-top: 45px; /* [04/11/2026 14:20] ridotto di un quarto (da 60px), ora che la fascia sta dopo le specifiche tecniche */
  margin-bottom: 40px !important;
  padding: 68px 15px 40px;
  /* [04/11/2026 14:35] grigio un po' piu' scuro: sfondo da #e1e4e8 a #d5d9de,
     bordi da #d3d7dc a #c5cad0 */
  background: #d5d9de;
  border-top: 1px solid #c5cad0;
  border-bottom: 1px solid #c5cad0;
}

/* 100vw comprende anche la barra di scorrimento verticale: senza questa regola
   comparirebbe una piccola barra orizzontale. "clip" taglia solo l'eccedenza
   orizzontale della sezione che contiene la fascia. */
section:has(.fascia-foto) {
  overflow-x: clip;
  /* [04/11/2026 13:55] la fascia e' l'ultimo elemento della sezione, subito prima di
     "Prodotti correlati": spazio fra fascia e titolo dimezzato, da 130px
     (40 di margine della fascia + 90 della sezione) a 65px (40 + 25) */
  padding-bottom: 25px;
}

.fascia-foto-box {
  max-width: 640px;
  margin: 0 auto !important;
  text-align: center;
}
.fascia-foto-box img,
.fascia-foto-box .fascia-foto-segnaposto {
  display: block;
  width: 100%;
  /* [03/11/2026 16:50] altezza ridotta di un terzo a parita' di larghezza:
     da 3:2 (circa 427px su 640px) a 9:4 (circa 284px) */
  aspect-ratio: 9/4;
  border-radius: 6px;
  box-shadow: 0 6px 22px rgba(26, 26, 55, 0.18);
  margin-bottom: 14px !important;
}
.fascia-foto-box img {
  object-fit: cover;
  background: #fff;
}
.fascia-foto-box figcaption {
  /* [04/11/2026 11:40] didascalia di nuovo centrata (dal 03/11 17:00 era a sinistra) */
  text-align: center;
  /* [04/11/2026 11:25] didascalia in corsivo */
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: #1e1e4b;
  margin-bottom: 0 !important;
}
.fascia-foto-box figcaption * {
  margin-bottom: 0 !important;
}

.fascia-foto-etichetta {
  color: #E1251B;
  font-weight: 600;
}

.fascia-foto-segnaposto {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #f5f6f8;
  border: 2px dashed #a9b0b9;
  color: #8a93a0;
  font-size: 17px;
}
.fascia-foto-segnaposto svg,
.fascia-foto-segnaposto span {
  margin-bottom: 0 !important;
}

@media (max-width: 575px) {
  .fascia-foto {
    /* [04/11/2026 11:30] cellulari: spazio sopra la foto da 30px a 45px (+50%) */
    padding: 45px 15px 28px;
  }
  .fascia-foto-box figcaption {
    font-size: 15px;
  }
}
/* [04/11/2026 11:15] Variante per foto verticali (classe aggiunta dallo shortcode
   quando l'immagine e' piu' alta che larga): la foto e' alta 420px con la sua
   larghezza naturale, centrata; la didascalia (display: table-caption) resta
   larga quanto la foto e allineata a sinistra. */
.fascia-foto--verticale .fascia-foto-box {
  display: table;
  max-width: 100%;
}
.fascia-foto--verticale .fascia-foto-box img {
  aspect-ratio: auto;
  width: auto;
  height: 420px;
  max-width: 100%;
  object-fit: contain;
}
.fascia-foto--verticale .fascia-foto-box figcaption {
  display: table-caption;
  caption-side: bottom;
  text-align: center;
}
@media (max-width: 575px) {
  .fascia-foto--verticale .fascia-foto-box img {
    height: 360px;
  }
}

/* [04/11/2026 11:10] Variante per foto orizzontali con proporzioni diverse da 9:4
   (classe aggiunta dallo shortcode): la foto si vede intera, alta al massimo
   284px (l'altezza del riquadro 9:4 largo 640px) e larga di conseguenza; sui
   cellulari si restringe alla larghezza disponibile. Didascalia larga quanto
   la foto, allineata a sinistra. */
.fascia-foto--adatta .fascia-foto-box {
  display: table;
  max-width: 100%;
}
.fascia-foto--adatta .fascia-foto-box img {
  aspect-ratio: auto;
  width: auto;
  height: auto;
  max-height: 284px;
  max-width: 100%;
}
.fascia-foto--adatta .fascia-foto-box figcaption {
  display: table-caption;
  caption-side: bottom;
  text-align: center;
}

/* [04/11/2026 11:35] Variante con piu' foto affiancate (foto="a.jpg|b.jpg"):
   la larghezza massima del riquadro e la quota di riga di ogni foto sono
   calcolate dallo shortcode; qui solo la disposizione. Sui cellulari le foto
   vanno una sotto l'altra, a tutta larghezza. */
.fascia-foto--coppia .fascia-foto-box {
  width: 100%;
}
.fascia-foto--coppia .fascia-foto-coppia {
  display: flex;
  gap: 20px;
  margin-bottom: 14px !important;
}
.fascia-foto--coppia .fascia-foto-voce {
  min-width: 0;
  margin-bottom: 0 !important;
}
.fascia-foto--coppia .fascia-foto-box .fascia-foto-voce img {
  aspect-ratio: auto;
  width: 100%;
  height: auto;
  margin-bottom: 0 !important;
}
@media (max-width: 575px) {
  .fascia-foto--coppia .fascia-foto-coppia {
    flex-direction: column;
    gap: 15px;
  }
  .fascia-foto--coppia .fascia-foto-voce {
    flex: none !important;
  }
}