/* BARRIOTHEME > NAVIGATION CSS */

/* =========================================================================================================== */
/*
    HH   HH   EEEEEEE     AAA     DDDDD     EEEEEEE   RRRRRR
    HH   HH   EE         AAAAA    DD  DD    EE        RR   RR
    HHHHHHH   EEEEE     AA   AA   DD   DD   EEEEE     RRRRRR
    HH   HH   EE        AAAAAAA   DD   DD   EE        RR  RR
    HH   HH   EEEEEEE   AA   AA   DDDDDD    EEEEEEE   RR   RR
*/

header {
  width: 100%;
  height: var(--header-height);
  padding-top: var(--distance);
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--null);
  z-index: 21;
  transition: all 0.42s ease-in-out;
}

header .header-content {
  width: 100%;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* =========================================================================================================== */
/*
  LL       OOOOO      GGGG     OOOOO
  LL      OO   OO    GG       OO   OO
  LL      OO   OO   GG        OO   OO
  LL      OO   OO   GG   GG   OO   OO
  LLLLLL   OOOO0     GGGGGG    OOOO0
*/

.logo-spazi {
  width: 210px;
  height: 50px;
  min-width: 210px;
  min-height: 50px;
  display: inline-block;
  -webkit-mask: url(../media/logo/logo-spazi-intero.svg) no-repeat 50% 50%;
  mask: url(../media/logo/logo-spazi-intero.svg) no-repeat 50% 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--bianco);
}

.logo-spazi-braille {
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  display: inline-block;
  -webkit-mask: url(../media/svg/braille/braille-logo.svg) no-repeat 50% 50%;
  mask: url(../media/svg/braille/braille-logo.svg) no-repeat 50% 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--bianco);
}

.logo-fondazione {
  width: 210px;
  height: 40px;
  min-width: 210px;
  min-height: 40px;
  display: inline-block;
  -webkit-mask: url(../media/logo/logo-fondazione.svg) no-repeat 50% 50%;
  mask: url(../media/logo/logo-fondazione.svg) no-repeat 50% 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--bianco);
}

/* diff */

footer .logo-spazi {
  width: 300px;
  height: 70px;
  min-width: 300px;
  min-height: 70px;
}

footer .logo-fondazione {
  width: 210px;
  height: 40px;
  min-width: 210px;
  min-height: 40px;
  background-color: var(--verde);
}

.footer-collaboratori [class*="logo-collaboratore-"] {
  width: 120px;
  height: 120px;
  min-width: 120px;
  min-height: 120px;
  display: inline-block;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--verde);
}

.footer-collaboratori .logo-collaboratore-1 {
  -webkit-mask: url(../media/logo/LoghiSO-01.svg) no-repeat 50% 50%;
  mask: url(../media/logo/LoghiSO-01.svg) no-repeat 50% 50%;
}
.footer-collaboratori .logo-collaboratore-2 {
  -webkit-mask: url(../media/logo/LoghiSO-02.svg) no-repeat 50% 50%;
  mask: url(../media/logo/LoghiSO-02.svg) no-repeat 50% 50%;
}
.footer-collaboratori .logo-collaboratore-3 {
  -webkit-mask: url(../media/logo/LoghiSO-03.svg) no-repeat 50% 50%;
  mask: url(../media/logo/LoghiSO-03.svg) no-repeat 50% 50%;
}
.footer-collaboratori .logo-collaboratore-4 {
  -webkit-mask: url(../media/logo/LoghiSO-04.svg) no-repeat 50% 50%;
  mask: url(../media/logo/LoghiSO-04.svg) no-repeat 50% 50%;
}

/* =========================================================================================================== */
/*
    MM    MM   EEEEEEE   NN   NN   UU   UU
    MMM  MMM   EE        NNN  NN   UU   UU
    MM MM MM   EEEEE     NN N NN   UU   UU
    MM    MM   EE        NN  NNN   UU   UU
    MM    MM   EEEEEEE   NN   NN    UUUUU
*/

.menu-header {
  /* min-width: 210px; */
  display: flex;
  flex-direction: column;
  list-style-type: none;
  padding: 0;
}

header .menu-header {
  transform: translateY(18px);
}

.menu-header li {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.menu-header li + li {
  margin-top: 5px;
}

.menu-header li .braille-container {
  width: 60px;
  height: 30px;
  margin-left: 5px;
  pointer-events: none;
  opacity: 0;
  transition: var(--transition);
}

.menu-header li:hover .braille-container {
  opacity: 1;
}

.menu-header li a {
  color: var(--bianco);
  transition: var(--transition);
}

/* Current menu item */

/* home */

body.page-template-page-home .menu-header li[data-link="home"] a {
  font-weight: 700;
}
body.page-template-page-home
  .menu-header
  li[data-link="home"]
  .braille-container {
  opacity: 1;
}

body.page-template-page-home li[data-link="home"] svg .dot {
  fill: var(--giallo);
}

/* about */

body.page-template-page-about .menu-header li[data-link="about"] a {
  font-weight: 700;
}
body.page-template-page-about
  .menu-header
  li[data-link="about"]
  .braille-container {
  opacity: 1;
}

body.page-template-page-about li[data-link="about"] svg .dot {
  fill: var(--giallo);
}

/* progetti */

body.single-progetto .menu-header li[data-link="progetti"] a,
body.page-template-page-progetti .menu-header li[data-link="progetti"] a {
  font-weight: 700;
}

body.page-template-page-progetti
  .menu-header
  li[data-link="progetti"]
  .braille-container,
body.single-progetto .menu-header li[data-link="progetti"] .braille-container {
  opacity: 1;
}

body.page-template-page-progetti li[data-link="progetti"] svg .dot,
body.single-progetto li[data-link="progetti"] svg .dot {
  fill: var(--giallo);
}

/* =========================================================================================================== */
/*
    HH   HH     AAA     MM    MM
    HH   HH    AAAAA    MMM  MMM
    HHHHHHH   AA   AA   MM MM MM
    HH   HH   AAAAAAA   MM    MM
    HH   HH   AA   AA   MM    MM
*/

.btn-hamburger {
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  border-radius: 50%;
  background-color: var(--verde);
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: var(--distance);
  bottom: var(--distance);
  z-index: 25;
  box-shadow: 4px 4px 10px rgba(var(--nero-rgb), 0.6);
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-hamburger .braille-hamburger {
  background-color: var(--blu);
  display: block;
}

.btn-hamburger .braille-times {
  background-color: var(--blu);
  display: none;
}

body.footer-inview .btn-hamburger {
  opacity: 0;
  pointer-events: none;
  bottom: var(--distance-half);
}

body.open-menu .btn-hamburger {
  box-shadow: none;
}

body.open-menu .btn-hamburger .braille-hamburger {
  display: none;
}

body.open-menu .btn-hamburger .braille-times {
  display: block;
}

/* =========================================================================================================== */
/*
     OOOOO    VV     VV   EEEEEEE   RRRRRR    LL        AAA     YY   YY
    OO   OO   VV     VV   EE        RR   RR   LL       AAAAA    YY   YY
    OO   OO    VV   VV    EEEEE     RRRRRR    LL      AA   AA    YYYY
    OO   OO     VV VV     EE        RR  RR    LL      AAAAAAA     YY
     OOOO0       VVV      EEEEEEE   RR   RR   LLLLL   AA   AA     YY
*/

body.open-menu {
  overflow: hidden;
}

.overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  transition: var(--transition-fast);
  background-color: rgba(var(--verde-scuro-rgb), 0.94);
  overflow: hidden;
  z-index: 22;
  opacity: 0;
  pointer-events: none;
}

body.open-menu .overlay {
  opacity: 1;
  pointer-events: all;
}

.overlay .overlay-content {
  min-width: 60%;
  min-height: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  right: var(--distance-half);
  bottom: var(--distance-half);
  background-color: var(--verde);
  transition: var(--transition-fast);
  transform: scale(0.9);
  transform-origin: bottom right;
  padding: 60px 80px;
  border-radius: 30px;
  z-index: 24;
}

body.open-menu .overlay .overlay-content {
  transform: scale(1);
}

.overlay .overlay-content .menu-overlay {
  height: 100%;
  margin: auto 0;
}

.menu-overlay {
  min-width: 210px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  list-style-type: none;
  padding: 0;
}

.menu-overlay li {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.menu-overlay li + li {
  margin-top: calc(var(--distance) * 1.5);
}

.menu-overlay li .braille-container {
  width: 90px;
  height: 30px;
  margin-left: 10px;
  opacity: 0;
}

.menu-overlay li .braille-container svg .dot {
  fill: var(--giallo);
}

.menu-overlay li a {
  color: var(--bianco);
}

/* Current menu item */

/* home */

body.page-template-page-home .menu-overlay li[data-link="home"] a {
  font-weight: 700;
  pointer-events: none;
}
body.page-template-page-home
  .menu-overlay
  li[data-link="home"]
  .braille-container {
  opacity: 1;
}

/* about */

body.page-template-page-about .menu-overlay li[data-link="about"] a {
  font-weight: 700;
  pointer-events: none;
}
body.page-template-page-about
  .menu-overlay
  li[data-link="about"]
  .braille-container {
  opacity: 1;
}

/* progetti */

body.page-template-page-progetti .menu-overlay li[data-link="progetti"] a {
  font-weight: 700;
  pointer-events: none;
}
body.single-progetto .menu-overlay li[data-link="progetti"] a {
  font-weight: 700;
}
body.page-template-page-progetti
  .menu-overlay
  li[data-link="progetti"]
  .braille-container,
body.single-progetto .menu-overlay li[data-link="progetti"] .braille-container {
  opacity: 1;
}

/* =========================================================================================================== */
/*
    LL         OOOOO      AAA     DDDDD     EEEEEEE   RRRRRR
    LL        OO   OO    AAAAA    DD  DD    EE        RR   RR
    LL        OO   OO   AA   AA   DD   DD   EEEEE     RRRRRR
    LL        OO   OO   AAAAAAA   DD   DD   EE        RR  RR
    LLLLLLL    OOOO0    AA   AA   DDDDDD    EEEEEEE   RR   RR
*/

/* animazione per il load la pagina in entrata */
.loader {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 1;
  background-color: var(--verde-scuro);
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  transition-delay: 1s;
  -webkit-animation: loader-comeOut 0.62s 0.6s ease-out forwards;
  animation: loader-comeOut 0.62s 0.6s ease-out forwards;
}

/* .loader.loading {
  -webkit-animation: loader-comeIn 2s ease-out forwards;
  animation: loader-comeIn 2s ease-out forwards;
} */

/* body.page-loaded .loader {
} */

@keyframes loader-comeOut {
  0% {
    height: 100%;
  }
  100% {
    height: 0;
  }
}

/* animazione per il load la pagina in uscita */
/* .page-loading .loader {
  -webkit-animation: loader-comeIn 2s ease-out forwards;
  animation: loader-comeIn 2s ease-out forwards;
}*/

/* @keyframes loader-comeIn {
  0% {
    height: 0;
    top: 100%;
  }
  100% {
    height: 100%;
    top: 0;
  }
} */

/* =========================================================================================================== */
/*
    FFFFFFF    OOOOO     OOOOO    TTTTTTTT   EEEEEEE   RRRRRR
    FF        OO   OO   OO   OO      TT      EE        RR   RR
    FFFF      OO   OO   OO   OO      TT      EEEEE     RRRRRR
    FF        OO   OO   OO   OO      TT      EE        RR  RR
    FF         OOOO0     OOOO0       TT      EEEEEEE   RR   RR
*/

footer {
  padding: var(--header-height) 0;
  background-color: var(--blu);
  color: var(--verde);
  position: relative;
}

/* body.page-template-page-home footer::after, */
body.single-progetto footer::after {
  content: "";
  width: calc(100% - 100px);
  max-width: 1820px;
  height: 1px;
  background-color: var(--bianco);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

footer .footer-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.footer-content .footer-block + .footer-block {
  margin-top: var(--distance-big);
}

footer .footer-block .logo-spazi {
  transform: translateY(5px);
}

.footer-block {
  width: calc(var(--column) * 3);
  min-height: 100px;
  display: flex;
  flex-direction: column;
}

.footer-block .occhiello {
  margin-bottom: var(--distance);
}

footer a {
  color: var(--verde);
  text-decoration: none;
  transition: var(--transition-fast) !important;
}

footer a:hover,
footer a:focus {
  color: var(--bianco);
}

/* Footer Collaboratori */

.footer-collaboratori {
  width: 100%;
  background-color: var(--blu);
  color: var(--verde);
  padding: 0 0 var(--distance) 0;
}

.footer-collaboratori .collaboratori-content {
  width: 100%;
  border-top: 1px solid var(--bianco);
  padding-top: var(--distance);
  display: flex;
  justify-content: space-between;
}

.lista-collaboratori {
  min-width: 62%;
  padding-right: 15%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-collaboratori a {
  width: 25%;
  pointer-events: none;
}

/* =========================================================================================================== */
/* Subfooter */

.subfooter {
  padding: calc(var(--distance) * 1.5) 0;
  background-color: var(--blu);
  color: var(--bianco);
  position: relative;
}

.subfooter::after {
  content: "";
  width: calc(100% - 100px);
  max-width: 1820px;
  height: 1px;
  background-color: var(--bianco);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.subfooter .subfooter-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.menu-footer {
  list-style-type: none;
  display: flex;
  padding: 0;
}

.menu-footer li {
  margin-bottom: 0;
}

.menu-footer > li + li {
  margin-left: var(--distance);
}

.menu-footer li a {
  color: var(--bianco);
  transition: var(--transition-fast) !important;
}

.menu-footer li.current-menu-item a {
  color: var(--verde);
  pointer-events: none;
}

.menu-footer li:hover a,
.menu-footer li:focus a {
  color: var(--verde);
}

.subfooter .credits-wrapper {
  width: auto;
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
  display: flex;
  align-items: flex-end;
  /* margin: 0 auto; */
  /* pointer-events: none; */
}

.credits {
  width: 86px;
  height: 12px;
  display: inline-flex;
  pointer-events: all;
  text-indent: -99999px;
  background-color: var(--bianco);
  border: none !important;
  -webkit-mask: url(../media/logo/logo-hellobarrio.svg) no-repeat 50% 50%;
  mask: url(../media/logo/logo-hellobarrio.svg) no-repeat 50% 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: var(--transition-fast);
  margin-left: 5px;
  margin-bottom: 2px;
}

.credits:hover,
.credits:focus {
  background-color: var(--verde);
}

.ie .credits {
  width: 86px;
  height: 12px;
  background-color: url(../media/logo/logo-hellobarrio.svg) no-repeat center
    center;
  background-size: contain;
  -webkit-mask: none;
  mask: none;
}

/* ________________________________________________________ */
/* social */

.social-wrapper {
  display: flex;
  align-items: center;
}

.social-wrapper .social + .social {
  margin-left: var(--distance);
}

.social-wrapper .social {
  display: inline-flex;
}

.social-wrapper .social * {
  text-indent: 100%;
}

.social-wrapper .social [class*="icon-"] {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  max-width: 26px;
  max-height: 26px;
  display: inline-flex;
  background-color: var(--verde);
}

.social-wrapper .social + .social {
  margin-left: var(--distance-half);
}

.social [class*="icon-"] {
  background-color: var(--nero);
}

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

/* diff page thanks */

.social-share .social-wrapper .social {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
}

.social-share .social-wrapper .social [class*="icon-"] {
  background-color: var(--giallo);
}

.social-share .social-wrapper .social:hover [class*="icon-"],
.social-share .social-wrapper .social:focus [class*="icon-"] {
  background-color: var(--bianco);
}