/* BARRIOTHEME > CUSTOM CSS */

/* =========================================================================================================== */
/*
    IIIIII   NN   NN   IIIIII   TTTTTTT
      II     NNN  NN     II       TT
      II     NN N NN     II       TT
      II     NN  NNN     II       TT
    IIIIII   NN   NN   IIIIII     TT
*/

/* I Font da Google Font e Adobe vanno nel footer come link */

/* =========================================================================================================== */
/*
    RRRRRR     OOOOO     OOOOO    TTTTTTTT
    RR   RR   OO   OO   OO   OO      TT
    RRRRRR    OO   OO   OO   OO      TT
    RR  RR    OO   OO   OO   OO      TT
    RR   RR    OOOO0     OOOO0       TT
*/

:root {
  /* set rem = 10px */
  font-size: 62.5%;

  /* ======================================================================== */
  /* Colors */

  /* #FFFFFF */
  --bianco-rgb: 255, 255, 255;
  --bianco: rgb(var(--bianco-rgb));

  /* #000000 */
  --nero-rgb: 0, 0, 0;
  --nero: rgb(var(--nero-rgb));

  /* #FF7434 */
  --arancione-rgb: 255, 116, 52;
  --arancione: rgb(var(--arancione-rgb));

  /* #7FC9B6 */
  --verde-chiaro-rgb: 127, 201, 182;
  --verde-chiaro: rgb(var(--verde-chiaro-rgb));

  /* #00946E */
  --verde-rgb: 0, 148, 110;
  --verde: rgb(var(--verde-rgb));

  /* #004936 */
  --verde-scuro-rgb: 0, 73, 54;
  --verde-scuro: rgb(var(--verde-scuro-rgb));

  /* #F6DFA4 */
  --giallo-rgb: 246, 223, 164;
  --giallo: rgb(var(--giallo-rgb));

  /* #A5C5ED*/
  --blu-rgb: 165, 197, 237;
  --blu: rgb(var(--blu-rgb));

  /* others */
  --null: transparent;
  --error: #ba2e2e;

  /* ======================================================================== */
  /* Sizes */

  --header-height: calc(80px + var(--distance-big));
  --nav-height: calc(var(--header-height) - var(--distance));
  --distance: 25px;
  --distance-half: calc(var(--distance) / 2);
  --distance-big: calc(var(--distance) * 3);
  --column: calc(var(--width_wrapper) / 12);

  /* ======================================================================== */
  /* transitions */

  --transition: all 0.3s ease-out;
  --transition-fast: all 0.15s ease-out;
}

/* =========================================================================================================== */
/*
      AAA     LL     LL
     AAAAA    LL     LL
    AA   AA   LL     LL
    AAAAAAA   LL     LL
    AA   AA   LLLLL  LLLLL
*/

body,
html {
  /* font-family: "Almarai", sans-serif; */
  font-family: "Atkinson Hyperlegible", sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--bianco);
  color: var(--nero);
  overscroll-behavior-block: none;
  /* scroll-behavior: auto !important; <- it removes scroll smooth */
}

main *,
*::after,
*::before {
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

/* __________________________________________________________________________ */
/* no gutter Bootstrap */

/* .row {
  margin: 0;
}

.container-fluid,
.container,
.col,
[class*="col-"] {
  padding: 0;
} */

/* =========================================================================================================== */
/*
    TTTTTTYT  YY   YY   PPPPPP     OOOOO
       TT     YY   YY   PP   PP   OO   OO
       TT      YYYY     PPPPPP    OO   OO
       TT       YY      PP        OO   OO
       TT       YY      PP         OOOO0
*/

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
ul,
ol {
  margin-bottom: 0;
}

/* ul {
    list-style-type: none;
} */

li {
  margin-bottom: 4px;
}

p a {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* __________________________________________________________________________ */
/* custom style */

h1,
.titolo-big {
  font-family: "Almarai", sans-serif;
  /* font-size: clamp(8rem, 16vw, 15rem);
  line-height: clamp(8rem, 16vw, 15rem); */
  font-size: 15rem;
  line-height: 15rem;
  letter-spacing: normal;
  font-weight: 400;
  text-transform: uppercase;
}

h2,
h3,
.titolo {
  font-family: "Almarai", sans-serif;
  font-size: 4.2rem;
  line-height: 5rem;
  letter-spacing: normal;
  font-weight: 400;
  text-transform: uppercase;
}

h4,
h5,
h6,
.titolo-small {
  font-family: "Almarai", sans-serif;
  font-size: 3.6rem;
  line-height: 4.2rem;
  letter-spacing: normal;
  font-weight: 400;
}

#submitVoto input,
#submitVoto select,
#submitVoto input::placeholder,
#messageSubmit div {
  font-family: "Almarai", sans-serif;
  font-size: 2.4rem;
  line-height: 4.2rem;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--verde-scuro);
}

#submitVoto .vota-check label,
#submitVoto .vota-input label {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-size: 1.2rem;
  line-height: 1.8rem;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--giallo);
}

#submitVoto .vota-input label {
  padding-left: var(--distance);
  margin-bottom: var(--distance-half);
}

#submitVoto select {
  text-transform: uppercase;
}

#submitVoto input::placeholder {
  opacity: 0.3;
}

p,
ul,
li,
ul,
ol,
.testo,
div.testo * {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-size: 1.8rem;
  line-height: 2.7rem;
  letter-spacing: normal;
  font-weight: 400;
}

div.testo strong {
  font-weight: 700;
}

.numero {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-size: 1.8rem;
  line-height: 2.7rem;
  letter-spacing: 2px;
  font-weight: 400;
  text-transform: uppercase;
}

.numero.big {
  font-size: 3.5rem;
}

.occhiello {
  font-size: 1.5rem;
  line-height: 2.4rem;
  letter-spacing: 2px;
  font-weight: 400;
  text-transform: uppercase;
}

/* __________________________________________________________________________ */
/* specials (footer, links, tags, span) */

.button,
.button *,
.button-submit,
.button-submit *,
.cursor-content {
  font-family: "Almarai", sans-serif;
  font-size: 2.4rem;
  line-height: 2.4rem;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  font-weight: 300;
  text-decoration: none;
}

.tag span,
.menu-header li a,
.numero.small {
  font-size: 1.5rem;
  line-height: 2.4rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
}

.subfooter-content * {
  font-size: 1rem;
  line-height: 1rem;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  text-decoration: none;
}

/* =========================================================================================================== */
/*
      GGGG    EEEEEEE   NN   NN   EEEEEEE   RRRRRR      AAA     LL
     GG  GG   EE        NNN  NN   EE        RR   RR    AAAAA    LL
    GG        EEEEE     NN N NN   EEEEE     RRRRRR    AA   AA   LL
    GG   GG   EE        NN  NNN   EE        RR  RR    AAAAAAA   LL
     GGGGGG   EEEEEEE   NN   NN   EEEEEEE   RR   RR   AA   AA   LLLLL
*/

.wrapper {
  width: calc(100% - 100px);
  max-width: 1820px;
  margin: 0 auto;
}

main section:nth-child(1) {
  min-height: 610px;
}

section {
  width: 100%;
  padding: var(--header-height) 0;
  position: relative;
}

/* main section:nth-child(1) {
  padding-top: var(--header-height);
  padding-bottom: var(--header-height);
} */

.section-content > * + * {
  margin-top: var(--distance-big);
}

.fullScreen {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

.relative {
  position: relative;
}

.centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

.centered-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bold {
  font-weight: 700;
}

.extrabold {
  font-weight: 800;
}

.uppercase {
  text-transform: uppercase;
}

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

/* Prosition */

[data-position="top"] {
  position: absolute !important;
  left: 0;
  top: var(--distance-big);
}

[data-position="top-left"] {
  position: absolute !important;
  left: var(--distance-big);
  top: var(--distance-big);
}

[data-position="bottom-left"] {
  position: absolute !important;
  left: var(--distance-big);
  bottom: var(--distance-big);
}

[data-position="bottom"] {
  position: absolute !important;
  left: 50%;
  bottom: var(--distance-big);
  transform: translateX(-50%);
}

/* =========================================================================================================== */
/* Dots */

/* section.has-dots {
  position: relative;
} */

section.has-dots .wrapper {
  position: relative;
}

section.has-dots .wrapper * {
  position: relative;
  z-index: 2;
}

.dots {
  width: 100%;
  height: calc(100% + calc(var(--header-height) * 2));
  position: absolute !important;
  top: calc(var(--header-height) * -1);
  left: 0;
  z-index: 1 !important;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.dots .dot {
  width: 1px;
  height: 100%;
  background-position: left;
  background-size: 8px 5px;
  background-repeat: repeat-y;
  background-image: linear-gradient(
    var(--verde) 25%,
    rgba(var(--verde-rgb), 0) 0%
  );
}

/* [data-background="verde-scuro"] .dot {
  background-image: linear-gradient(
    var(--verde) 25%,
    rgba(var(--verde-rgb), 0) 0%
  );
} */

/* =========================================================================================================== */
/*
   CCCCC    OOOOO    LL       OOOOO    RRRRRR     SSSSS
  CC       OO   OO   LL      OO   OO   RR   RR   SS
  CC       OO   OO   LL      OO   OO   RRRRRR     SSSSS
  CC       OO   OO   LL      OO   OO   RR  RR         SS
   CCCCC    OOOO0    LLLLLL   OOOO0    RR   RR    SSSSS
*/

/* __________________________________________________________________________ */
/* Backgrounds */

[data-background="gradient"],
.gradient {
  background: rgb(var(--blu-rgb));
  background: linear-gradient(
    180deg,
    rgba(var(--blu-rgb), 1) 0%,
    rgba(var(--giallo-rgb), 1) 100%
  );
  color: var(--verde);
}

[data-background="gradient-2"] {
  background: rgb(var(--blu-rgb));
  background: linear-gradient(
    180deg,
    rgba(var(--blu-rgb), 1) 0%,
    rgba(var(--arancione-rgb), 0.7) 100%
  );
  color: var(--verde);
}

[data-background="gradient-3"] {
  background: rgb(var(--blu-rgb));
  background: linear-gradient(
    180deg,
    rgba(207, 208, 196, 1) 0%,
    rgba(246, 173, 115, 1) 100%
  );
  color: var(--verde);
}

/* [data-background="gradient"] .titolo-occhiello span,
.gradient .titolo-occhiello span {
  color: var(--verde);
}

[data-background="gradient"] .gradient .titolo-occhiello .line,
.gradient .titolo-occhiello .line {
  background-color: var(--giallo);
} */

[data-background="gradient"] .titolo-big .letter.has-smile .smile,
[data-background="gradient-2"] .titolo-big .letter.has-smile .smile,
[data-background="gradient-3"] .titolo-big .letter.has-smile .smile {
  background-color: var(--bianco);
}

/* bianco/nero */
[data-background="bianco"],
.back-bianco {
  background-color: var(--bianco) !important;
  color: var(--nero);
}
[data-background="nero"],
.back-nero {
  background-color: var(--nero) !important;
  color: var(--bianco);
}

/* verde */

[data-background="verde"],
.back-verde {
  background-color: var(--verde) !important;
  color: var(--giallo);
}

[data-background="verde"] strong,
.back-verde strong {
  color: var(--verde);
  background: var(--giallo);
}

[data-background="verde"] .titolo-big,
[data-background="verde"] .titolo {
  color: var(--blu);
}

[data-background="verde"] .titolo-big .letter.has-smile .smile {
  background-color: var(--bianco);
}

/* verde-scuro */

[data-background="verde-scuro"],
.back-verde-scuro {
  background-color: var(--verde-scuro) !important;
  color: var(--giallo);
}

[data-background="verde-scuro"] strong,
.back-verde-scuro strong {
  color: var(--verde-scuro);
  background: var(--giallo);
}

[data-background="verde-scuro"] .titolo-big,
[data-background="verde-scuro"] .titolo {
  color: var(--blu);
}

[data-background="verde-scuro"] .titolo-big .letter.has-smile .smile {
  background-color: var(--arancione);
}

/* blu */

[data-background="blu"],
.back-blu {
  background-color: var(--blu) !important;
  color: var(--verde);
}

[data-background="blu"] strong,
.back-blu strong {
  color: var(--blu);
  background: var(--verde-scuro);
}

[data-background="blu"] .titolo-big,
[data-background="blu"] .titolo {
  color: var(--verde);
}

/* [data-background="blu"] .titolo-big .letter.has-smile .smile {
  background-color: var(--giallo);
} */

/* giallo */

[data-background="giallo"],
.back-giallo {
  background-color: var(--giallo) !important;
}

/* __________________________________________________________________________ */
/* Colors */

.color-nero {
  color: var(--nero) !important;
}

.color-bianco {
  color: var(--bianco) !important;
}

.color-bianco strong {
  color: var(--bianco) !important;
  background: var(--verde);
}

.color-verde {
  color: var(--verde) !important;
}

.color-verde-scuro {
  color: var(--verde-scuro) !important;
}

.color-blu {
  color: var(--blu) !important;
}

.color-giallo {
  color: var(--giallo) !important;
}

/* =========================================================================================================== */
/*
    MM    MM   EEEEEEE   DDDDD     IIIIII     AAA
    MMM  MMM   EE        DD  DD      II      AAAAA
    MM MM MM   EEEEE     DD   DD     II     AA   AA
    MM    MM   EE        DD   DD     II     AAAAAAA
    MM    MM   EEEEEEE   DDDDDD    IIIIII   AA   AA

    // Media
*/

.sticky {
  position: sticky;
  top: 0;
}

.contain {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.cover {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* Media Sizes */

/* .cont-img img {
  max-height: 600px;
}

.cont-img.img-square {
  width: 300px;
  height: 300px;
}

.carousel-parallax {
  height: 600px;
}

[class*="carousel-"] .swiper-slide img {
  width: 100%;
  height: 600px;
} */

/* =========================================================================================================== */
/*
    IIIIII   CCCCC   OOOOO    NN   NN    SSSSSS
      II    CC      OO   OO   NNN  NN   SS
      II    CC      OO   OO   NN N NN    SSSSS
      II    CC      OO   OO   NN  NNN        SS
    IIIIII   CCCCC   OOOO0    NN   NN   SSSSSS
*/

[class*="icon-"] {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  max-width: 12px;
  max-height: 12px;
  background-color: var(--nero);
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: var(--transition);
}

[class*="icon-"].big {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  max-width: 24px;
  max-height: 24px;
}

/* __________________________________________________________________________ */
/* arrows */

.icon-arrow-top {
  -webkit-mask: url(../media/icons/icon-arrow-top.svg) no-repeat 50% 50%;
  mask: url(../media/icons/icon-arrow-top.svg) no-repeat 50% 50%;
}
.icon-arrow-bottom {
  -webkit-mask: url(../media/icons/icon-arrow-bottom.svg) no-repeat 50% 50%;
  mask: url(../media/icons/icon-arrow-bottom.svg) no-repeat 50% 50%;
}
.icon-arrow-left {
  -webkit-mask: url(../media/icons/icon-arrow-left.svg) no-repeat 50% 50%;
  mask: url(../media/icons/icon-arrow-left.svg) no-repeat 50% 50%;
}
.icon-arrow-right {
  -webkit-mask: url(../media/icons/icon-arrow-right.svg) no-repeat 50% 50%;
  mask: url(../media/icons/icon-arrow-right.svg) no-repeat 50% 50%;
}

/* __________________________________________________________________________ */
/* socials */

.icon-facebook {
  -webkit-mask: url(../media/icons/icon-facebook.svg) no-repeat 50% 50%;
  mask: url(../media/icons/icon-facebook.svg) no-repeat 50% 50%;
}
.icon-instagram {
  -webkit-mask: url(../media/icons/icon-instagram.svg) no-repeat 50% 50%;
  mask: url(../media/icons/icon-instagram.svg) no-repeat 50% 50%;
}
.icon-vimeo {
  -webkit-mask: url(../media/icons/icon-vimeo.svg) no-repeat 50% 50%;
  mask: url(../media/icons/icon-vimeo.svg) no-repeat 50% 50%;
}
.icon-twitter {
  -webkit-mask: url(../media/icons/icon-twitter.svg) no-repeat 50% 50%;
  mask: url(../media/icons/icon-twitter.svg) no-repeat 50% 50%;
}
.icon-whatsapp {
  -webkit-mask: url(../media/icons/icon-whatsapp.svg) no-repeat 50% 50%;
  mask: url(../media/icons/icon-whatsapp.svg) no-repeat 50% 50%;
}

/* __________________________________________________________________________ */
/* utils */

.icon-spinner {
  -webkit-mask: url(../media/icons/icon-spinner.svg) no-repeat 50% 50%;
  mask: url(../media/icons/icon-spinner.svg) no-repeat 50% 50%;
}

/* __________________________________________________________________________ */
/* Braille */

.braille-arrow-top,
.braille-arrow-right,
.braille-arrow-left,
.braille-arrow-bottom,
.braille-hamburger,
.braille-times {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  max-width: 30px;
  max-height: 30px;
  background-color: var(--bianco);
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: var(--transition);
}

.braille-arrow-top {
  -webkit-mask: url(../media/icons/braille-arrow-top.svg) no-repeat 50% 50%;
  mask: url(../media/icons/braille-arrow-top.svg) no-repeat 50% 50%;
}
.braille-arrow-bottom {
  -webkit-mask: url(../media/icons/braille-arrow-bottom.svg) no-repeat 50% 50%;
  mask: url(../media/icons/braille-arrow-bottom.svg) no-repeat 50% 50%;
}
.braille-arrow-right {
  -webkit-mask: url(../media/icons/braille-arrow-right.svg) no-repeat 50% 50%;
  mask: url(../media/icons/braille-arrow-right.svg) no-repeat 50% 50%;
}
.braille-arrow-left {
  -webkit-mask: url(../media/icons/braille-arrow-left.svg) no-repeat 50% 50%;
  mask: url(../media/icons/braille-arrow-left.svg) no-repeat 50% 50%;
}
.braille-hamburger {
  -webkit-mask: url(../media/icons/braille-hamburger.svg) no-repeat 50% 50%;
  mask: url(../media/icons/braille-hamburger.svg) no-repeat 50% 50%;
}
.braille-times {
  -webkit-mask: url(../media/icons/braille-times.svg) no-repeat 50% 50%;
  mask: url(../media/icons/braille-times.svg) no-repeat 50% 50%;
}

/* =========================================================================================================== */
/*
    BBBBB     UU   UU   TTTTTTTT   TTTTTTTT    OOOOO    NN   NN    SSSSSS
    BB   B    UU   UU      TT         TT      OO   OO   NNN  NN   SS
    BBBBBB    UU   UU      TT         TT      OO   OO   NN N NN    SSSSS
    BB   BB   UU   UU      TT         TT      OO   OO   NN  NNN        SS
    BBBBBB     UUUUU       TT         TT       OOOO0    NN   NN   SSSSSS
*/

/* __________________________________________________________________________ */
/* Button */

/* button {
  display: inline-flex;
  padding: 4px 20px;
  border-radius: 8px;
  border: 0;
  background-color: var(--giallo);
  transition: var(--transition);
  color: var(--nero);
}

button:hover,
button:focus,
button:visited {
  background-color: var(--nero);
} */

.button {
  /* min-width: 300px; */
  padding: calc(var(--distance) * 1.4) calc(var(--distance) * 2);
  /* padding: var(--distance) var(--distance-big); */
  /* border: 1px solid var(--nero); */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: var(--transition);
  position: relative;
}

.button::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--nero);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: var(--transition-fast);
  pointer-events: none;
}

.button .button-content {
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  color: var(--nero);
}

.button:hover::after,
.button:focus::after {
  border-width: 3px;
}

/* diff colors */

/* color-verde-scuro */
.button.color-verde-scuro .button-content {
  color: var(--verde-scuro) !important;
}
.button.color-verde-scuro::after {
  border-color: var(--verde-scuro) !important;
}

/* blu */
.button.color-blu .button-content {
  color: var(--blu) !important;
}
.button.color-blu::after {
  border-color: var(--blu) !important;
}

/* bianco */
.button.color-bianco .button-content {
  color: var(--bianco) !important;
}
.button.color-bianco::after {
  border-color: var(--bianco) !important;
}

/* verde */
.button.color-verde .button-content {
  color: var(--verde) !important;
}
.button.color-verde::after {
  border-color: var(--verde) !important;
}

/* __________________________________________________________________________ */
/* File button */

.braille-button {
  display: inline-flex;
  align-items: center;
  color: var(--bianco) !important;
  text-decoration: none;
  transition: var(--transition);
  opacity: 0.5;
}

.braille-button:hover,
.braille-button:focus {
  opacity: 1;
}

.braille-button [class*="icon-"],
.braille-button [class*="braille-"] {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  background-color: var(--bianco);
}

.braille-button > *:nth-child(2) {
  margin-left: var(--distance-half);
}

section:nth-child(1) .braille-button:not(.go-back) {
  pointer-events: none;
}

/* __________________________________________________________________________ */

.button-submit {
  /* min-width: 300px; */
  /* padding: var(--distance) var(--distance-big); */
  padding: calc(var(--distance) * 1.4) calc(var(--distance) * 2);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: var(--transition);
  position: relative;
}

.button-submit span {
  color: var(--bianco);
}

.button-submit::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--giallo);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: var(--transition-fast);
  pointer-events: none;
}

.button-submit:hover::after,
.button-submit:focus::after {
  border: 3px solid var(--giallo);
}

/* __________________________________________________________________________ */
/* Link */

/* .link {
  width: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
} */

/* link > span */

/* .link span {
  position: relative;
  color: var(--nero);
  transition: var(--transition);
  z-index: 2;
}

.link span + [class*="icon-"] {
  margin-left: 10px;
}

.link:hover span,
.link:focus span {
  color: var(--nero);
} */

/* link > icon */

/* .link [class*="icon-"] {
  position: relative;
  background-color: var(--nero);
  transition: var(--transition);
  z-index: 2;
}

.link [class*="icon-"] + span {
  margin-left: 10px;
} */

/* link > border / background */

/* .link span::before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--nero);
  position: absolute;
  bottom: 0;
  left: 0;
  transition: var(--transition);
  z-index: 1;
}

.link:hover span::before,
.link:focus span::before {
  animation: link_animation 0.6s ease-out forwards;
}

@keyframes link_animation {
  0% {
    width: 100%;
    left: 0%;
  }
  40% {
    width: 0%;
    left: 100%;
  }
  60% {
    width: 0%;
    left: 100%;
  }
  61% {
    width: 0%;
    left: 0%;
  }
  100% {
    width: 100%;
    left: 100;
  }
} */

/* diff color */

/* .link.color-bianco span,
.link.color-bianco:hover span,
.link.color-bianco:focus span {
  color: var(--bianco);
}
.link.color-bianco span::before,
.link.color-bianco:hover span::before,
.link.color-bianco:focus span::before,
.link.color-bianco [class*="icon-"] {
  background-color: var(--bianco);
} */

/* =========================================================================================================== */
/*
    EEEEEEE   LL        EEEEEEE   MM    MM   EEEEEEE   NN   NN   TTTTTTTT    SSSSSS
    EE        LL        EE        MMM  MMM   EE        NNN  NN      TT      SS
    EEEEE     LL        EEEEE     MM MM MM   EEEEE     NN N NN      TT       SSSSS
    EE        LL        EE        MM    MM   EE        NN  NNN      TT          SS
    EEEEEEE   LLLLLLL   EEEEEEE   MM    MM   EEEEEEE   NN   NN      TT      SSSSSS
*/

/* __________________________________________________________________________ */
/* Tag */

.tag {
  width: auto;
  height: fit-content;
  display: inline-flex;
  padding: 3px 15px;
  background-color: rgba(var(--verde-rgb), 0.5);
  border-radius: 30px;
  color: var(--bianco);
}

.tag span {
  white-space: nowrap;
}

/* __________________________________________________________________________ */
/* Accordion */

/* .accordions .accordion {
  width: 100%;
}

.accordion .accordion-head {
  width: 100%;
  height: 50px;
  background-color: rgba(var(--nero-rgb), 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 0 30px;
  border: 1px solid var(--nero);
  cursor: pointer;
}

.accordion .accordion-body {
  width: 100%;
  overflow: hidden;
  transition: all 0.15s ease-out;
  background-color: rgba(var(--nero-rgb), 0.4);
  padding: 0 30px;
}

.accordion.opened .accordion-body {
  padding: var(--distance-big) 30px;
} */

/* __________________________________________________________________________ */
/* Quote */

/* [class*="has-quote-"] span {
  position: relative;
}

[class*="has-quote-"] span::after,
[class*="has-quote-"] span::before {
  content: "";
  width: 40px;
  height: 33px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
}

[class*="has-quote-"] span::before {
  top: 0;
  left: -50px;
}

[class*="has-quote-"] span::after {
  bottom: -20px;
  right: -50px;
  transform: rotate(180deg);
}

.has-quote-giallo span::after,
.has-quote-giallo span::before {
  background-image: url(/wp-content/themes/barriotheme/media/svg/quote-giallo.svg);
}

.has-quote-nero span::after,
.has-quote-nero span::before {
  background-image: url(/wp-content/themes/barriotheme/media/svg/quote-nero.svg);
} */