/* 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,
.header-bottom {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 21;
  background-color: var(--bianco);
  color: var(--nero);
  transition: var(--transition);
}

body.page-template-page-home header,
body.page-template-page-landing header {
  background-color: var(--blu);
  color: var(--bianco);
}

body.scroll-down header {
  transform: translateY(-100%);
}

header.visible {
  transform: translateY(0%) !important;
}

.header-bottom {
  top: calc(100% - var(--header-height));
  background-color: var(--null);
  border-bottom: none;
}

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

header .navigation > * + * {
  margin-left: var(--distance);
}

/* Header Bottom */

.header-bottom {
  transition: var(--transition);
}

.header-bottom,
.header-bottom .wrapper,
.navigation {
  pointer-events: none;
}

.navigation > * {
  pointer-events: all;
}

.header-bottom .navigation .button {
  margin-left: auto;
}

/* .header-bottom .lang-selector {
  color: var(--bianco);
} */

body.footer-inview .header-bottom,
body.footer-inview .header-bottom * {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ________________________________________________________ */
/* logo header */

.logo-header {
  width: 300px;
  height: 38px;
  min-width: 300px;
  min-height: 38px;
  margin-right: auto;
  -webkit-mask: url(../media/logo/logo-BF22.svg) no-repeat 50% 50%;
  mask: url(../media/logo/logo-BF22.svg) no-repeat 50% 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--nero);
  display: block;
}

body.page-template-page-home header .logo-header,
body.page-template-page-landing header .logo-header {
  background-color: var(--bianco);
}

/* ________________________________________________________ */
/* Toggle audio */

#toggle-audio {
  cursor: pointer;
}

/* ________________________________________________________ */
/* SOUND status */

.sound-status,
.sound-status span.status {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--nero);
}

body.page-template-page-home .sound-status,
body.page-template-page-landing .sound-status {
  color: var(--bianco);
}

.sound-status > * + * {
  margin-left: 5px;
}

.sound-status span.status::before {
  content: "Off";
  display: inline-flex;
  color: var(--nero);
}

body.page-template-page-home .sound-status span.status::before,
body.page-template-page-landing .sound-status span.status::before {
  color: var(--bianco);
}

.sound-status span.status::after {
  content: "";
  width: 34px;
  height: 34px;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask: url(../media/icons/icon-sound-off.svg) no-repeat 50% 50%;
  mask: url(../media/icons/icon-sound-off.svg) no-repeat 50% 50%;
  display: inline-flex;
  background-color: var(--nero);
  margin-left: 5px;
}

body.page-template-page-home .sound-status span.status::after,
body.page-template-page-landing .sound-status span.status::after {
  background-color: var(--bianco);
}

.sound-status.active span.status::before {
  content: "On" !important;
}

.sound-status.active span.status::after {
  -webkit-mask: url(../media/icons/icon-sound-on.svg) no-repeat 50% 50% !important;
  mask: url(../media/icons/icon-sound-on.svg) no-repeat 50% 50% !important;
}

/* =========================================================================================================== */
/*
  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
*/

body.page-template-page-landing .menu-header-container,
body.page-template-page-landing .menu-mobile {
  display: none !important;
}

.menu-header-container {
  width: 160px;
  position: relative;
  background-color: var(--nero);
  border-radius: 20px;
  transition: var(--transition);
}

.menu-header-container::before {
  content: "";
  width: 160px;
  height: 37px;
  z-index: 1;
  background-color: var(--nero);
  border-radius: 20px;
  transition: var(--transition);
  position: absolute;
  top: 0;
  left: 0;
}

body.open-menu .menu-header-container::before {
  height: 214px;
}

.menu-header-container .button-container,
.menu-header-container .menu-header {
  width: 160px;
  z-index: 2;
}

.menu-header-container .button-container {
  display: flex;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.menu-header-container .menu-header {
  position: absolute;
  top: 100%;
  left: 0;
  color: var(--bianco);
  padding: var(--distance-half);
  list-style-type: none;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
}

body.open-menu .menu-header {
  opacity: 1;
  pointer-events: all;
  transition-delay: 0.4s;
}

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

.menu-header li.menu-item {
  margin-bottom: 0;
}

.menu-header > li.menu-item + li {
  margin-top: var(--distance-half);
}

.menu-header li.menu-item a {
  width: 100%;
  display: block;
  text-align: center;
  color: var(--bianco);
  transition: var(--transition);
  text-decoration: none;
}

.menu-header li.menu-item a:hover,
.menu-header li.menu-item a:focus {
  color: var(--blu);
}

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

/* Menu Mobile */

.menu-mobile {
  display: none;
  position: fixed;
  bottom: var(--distance-half);
  right: var(--distance-half);
  z-index: 14;
  transition: var(--transition);
}

.menu-mobile .button-container {
  padding: 0 6px;
}

.menu-mobile .button-container div {
  position: relative;
  z-index: 2;
}

.menu-mobile .button-container::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--nero);
  border-radius: 15px;
  position: absolute;
  bottom: 0;
  right: 0;
  transition: var(--transition);
  z-index: 1;
}

body.open-menu .menu-mobile .button-container::before {
  width: 160px;
  height: 190px;
}

body.footer-inview .menu-mobile {
  opacity: 0 !important;
  pointer-events: none !important;
}

.menu-mobile .menu-header {
  width: 160px;
  position: absolute;
  bottom: 100%;
  right: 0;
  color: var(--bianco);
  padding: var(--distance) var(--distance-half);
  list-style-type: none;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
  z-index: 2;
}

.menu-mobile .menu-header::after {
  content: "";
  width: calc(100% - var(--distance-half));
  height: 1px;
  background-color: var(--bianco);
  position: absolute;
  top: calc(100% - 8px);
  left: 50%;
  transform: translateX(-50%);
}

.menu-mobile .menu-header li.menu-item a {
  text-align: right;
}

/* =========================================================================================================== */
/*
    LL         AAA     NN   NN     GGGG
    LL        AAAAA    NNN  NN    GG
    LL       AA   AA   NN N NN   GG
    LL       AAAAAAA   NN  NNN   GG   GG
    LLLLLL   AA   AA   NN   NN    GGGGGG
*/

.lang-selector {
  display: flex;
  align-items: center;
  list-style-type: none;
  margin-bottom: 0;
  padding: 0;
}

.lang-selector li {
  margin: 0;
  display: flex;
  align-items: center;
}

.lang-selector li + li {
  margin-left: 10px;
}

.lang-selector li a {
  color: var(--nero);
  opacity: 0.4;
  transition: var(--transition);
}

body.page-template-page-home .lang-selector li a,
body.page-template-page-landing .lang-selector li a {
  color: var(--bianco);
}

body.page-template-page-landing header .lang-selector {
  display: none;
}

.lang-selector li a:hover {
  opacity: 1;
}

.lang-selector li a.active {
  opacity: 1;
  pointer-events: none;
}

/* =========================================================================================================== */
/*
    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: 25px;
  height: 15px;
  position: relative;
  cursor: pointer;
}

.btn-hamburger .line {
  width: 100%;
  height: 1px;
  background-color: var(--nero);
  position: absolute;
  left: 0;
  transition: var(--transition);
}

.btn-hamburger .line.top {
  top: 0;
  transform: translateY(0);
}

.btn-hamburger .line.center-1,
.btn-hamburger .line.center-2 {
  top: 50%;
  transform: translateY(-50%);
}

.btn-hamburger .line.bottom {
  bottom: 0;
  transform: translateY(0);
} */

/* open-menu */

/* .open-menu .btn-hamburger .line.top {
  width: 0;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
}

.open-menu .btn-hamburger .line.center-1 {
  transform: translateY(-50%) rotate(45deg);
}

.open-menu .btn-hamburger .line.center-2 {
  transform: translateY(-50%) rotate(-45deg);
}

.open-menu .btn-hamburger .line.bottom {
  width: 0;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
} */

/* =========================================================================================================== */
/*
  IIIIII   NN   NN   FFFFFF   OOOOO
    II     NNN  NN   FF      OO   OO
    II     NN N NN   FFFF    OO   OO
    II     NN  NNN   FF      OO   OO
  IIIIII   NN   NN   FF       OOOO0
*/

body.open-modale-info {
  overflow: hidden;
}

.modale-info {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--rosso-rgb), 0.95);
  transition: var(--transition);
  overflow: hidden;
  z-index: 25;

  opacity: 0;
  pointer-events: none;

  /* opacity: 1;
  pointer-events: all; */
}

body.open-modale-info .modale-info {
  opacity: 1;
  pointer-events: all;
}

.modale-info .info-content {
  height: calc(100% - var(--header-height));
  overflow: auto;
  display: flex;
  /* flex-wrap: wrap; */
  flex-direction: column;
  justify-content: space-between;
  color: var(--nero);
}

/* __________________________________________________________________________ */
/* modale info: Top */

.modale-info .info-content .cont-top {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* modale info: Top Left */

.modale-info .info-content .cont-left {
  width: 70%;
  padding-right: var(--distance-big);
  padding-bottom: var(--distance-big);
}

.modale-info .info-content .cont-left .logo-container {
  width: 100%;
  height: var(--header-height);
  display: flex;
  align-items: center;
}

.modale-info .info-content .cont-left .logo-info {
  width: 300px;
  height: 38px;
  min-width: 300px;
  min-height: 38px;
  display: block;
  -webkit-mask: url(../media/logo/logo-BF22.svg) no-repeat 50% 50%;
  mask: url(../media/logo/logo-BF22.svg) no-repeat 50% 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--nero);
}

/* modale info: Top Right */

.modale-info .info-content .cont-right {
  width: 30%;
  border-left: 1px solid var(--nero);
  padding: var(--distance-big);
  padding-right: 0;
  margin-top: 0;
}

.modale-info .info-content .cont-right .gruppo-modale + .gruppo-modale {
  margin-top: var(--distance-big);
}

.modale-info .info-content .cont-right .gruppo-modale p {
  margin-top: var(--distance-half);
}

/* __________________________________________________________________________ */
/* modale info: Partners */

.modale-info .info-content .cont-partners {
  width: 100%;
  border-top: 1px solid var(--nero);
  padding: var(--distance) 0;
  display: flex;
}

.modale-info .info-content .cont-partners .occhiello {
  width: 300px;
}

.cont-partners .partners-container {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  margin-bottom: calc(var(--distance-half) * -1);
}

.cont-partners .partners-container .partner-link {
  width: 200px;
  height: 200px;
  display: inline-block;
  margin-right: var(--distance);
  margin-bottom: var(--distance-half);
}

/* __________________________________________________________________________ */
/* modale info: Bottom */

.modale-info .cont-bottom {
  /* width: 100%; */
  height: var(--header-height);
  min-height: var(--header-height);
  margin-top: auto;

  position: bottom;
  bottom: 0;
  left: 50%;
  /* transform: translateX(-50%); */

  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  border-top: 1px solid var(--nero);
}

.modale-info .cont-bottom * {
  margin: 0;
}

/* =========================================================================================================== */
/*
     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 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--rosso-rgb), 0.9);
  transition: var(--transition);
  overflow: hidden;
  z-index: 25;

  opacity: 0;
  pointer-events: none;
}

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

.overlay .overlay-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
} */

/* __________________________________________________________________________ */
/* Overlay Top */

/* .overlay .cont-top {
  width: 100%;
  margin-bottom: var(--distance);
  padding: var(--distance) 0;
  border-bottom: 1px solid var(--nero);
} */

/* __________________________________________________________________________ */
/* Overlay Center */

/* .overlay .cont-center {
  width: 100%;
}

ul.menu-overlay {
  padding: 0;
  list-style-type: none;
}

ul.menu-overlay li {
  margin-bottom: 10px;
}

ul.menu-overlay li a {
  color: var(--nero);
  white-space: nowrap;
}

ul.menu-overlay li a:hover,
ul.menu-overlay li a:focus {
  color: var(--blu);
}

ul.menu-overlay a {
  color: var(--bianco);
} */

/* =========================================================================================================== */
/*
    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(--blu);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  -webkit-animation: loader-comeout 2s 0.5s ease-in-out both;
  animation: loader-comeout 2s 0.5s ease-in-out both;
}

@keyframes loader-comeout {
  0% {
    opacity: 1;
    pointer-events: all;
    z-index: 99;
  }
  100% {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  }
}

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

@keyframes loader-comein {
  0% {
    opacity: 0;
    pointer-events: none;
    z-index: 99;
  }
  100% {
    opacity: 1;
    pointer-events: all;
    z-index: -1;
  }
} */

#loader .loader-gif {
  width: 200px;
  height: 200px;
  background-image: url(../media/gif/loader.gif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
}

/* =========================================================================================================== */
/*
    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,
.sub-footer {
  width: 100%;
  height: var(--header-height);
  padding: var(--distance) 0;
  background-color: var(--nero);
  color: var(--bianco);
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}

.sub-footer {
  height: calc(var(--header-height) / 2);
  /* background-color: var(--grigio-chiaro); */
  background-color: var(--blu);
  color: var(--nero);
}

.footer-content {
  /* width: 100%; */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* .sub-footer .footer-content {
  justify-content: center;
} */

.footer-content > * {
  min-width: 200px;
  /* height: 100%; */
}

.menu-footer-container {
  /* width: 100%; */
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
}

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

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

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

.menu-footer li a {
  color: var(--bianco);
  cursor: pointer;
  position: relative;
}

.menu-footer li a::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translateY(-50%);
  background-color: var(--bianco);
  transition: var(--transition);
  pointer-events: none;
  opacity: 0;
}

.menu-footer li a:hover::after,
.menu-footer li.current_page_item a::after {
  opacity: 1;
}

/* =========================================================================================================== */
/*
     SSSSS     OOOOO     CCCCC   IIIIII     AAA     LL
    SS        OO   OO   CC         II      AAAAA    LL
     SSSSS    OO   OO   CC         II     AA   AA   LL
         SS   OO   OO   CC         II     AAAAAAA   LL
    SSSSSS     OOOO0     CCCCC   IIIIII   AA   AA   LLLLLL
*/

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

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

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

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

.social [class*="icon-"] {
  text-indent: -100%;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
  background-color: var(--bianco);
}

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

/* diff modale info */

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

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

.social-wrapper .credits {
  background-color: var(--bianco);
}

/* ________________________________________________________ */
/* credits */

.credits-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  width: auto;
  min-width: auto;
}

.credits-wrapper a {
  color: var(--nero);
  text-decoration: none;
}

.credits-wrapper a:hover {
  color: var(--bianco);
}

.credits {
  display: inline-flex;
  width: 86px;
  height: 12px;
  text-indent: -99999px;
  background-color: var(--nero);
  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: none !important;
}

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

.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;
}

.recaptcha-text {
  color: black !important;
}
.recaptcha-text a {
  color: black !important;
  text-decoration: underline !important;
}

/* =========================================================================================================== */
/* breakpoint-css */

#breakpoint-css {
  width: 100px;
  height: 100px;
  border: 4px solid salmon;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  z-index: 9999999999999;
}

#breakpoint-css div {
  width: 100%;
  height: 100%;
  position: relative;
  border: 4px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.page-template-page-landing #breakpoint-css {
  display: none !important;
}