.google-maps {
  position: relative;
  padding-bottom: 100%; /* Definisco l'aspect ratio */
  height: 0;
  overflow: hidden;
}
.google-maps > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

.font_home {
  font-family: 'Sofia';
}

.custom_bg_red {
  background-color: #F50057; /* #E91E63, #F50057 */
}

.custom_bg_black {
  background-color: #231f20;
}

.custom_color_red {
  color: #F50057;
}

.custom_color_red_accent {
  color: #FF4081;
}

.consigli-box {
  border-left-color: #F50057;
  border-left-width:thick;
  border-left-style: solid;
}

.nav-link.active {
  border-bottom-style: solid;
  border-color: #F50057;
  border-width: 3px;
}

.nav-link:hover:not(.active) {
  opacity: 0.7;
  border-bottom-style: solid;
  border-width: 3px;
}
        
.contatti-box {
  border-top-color:#F50057;
  border-top-width:thin;
  border-bottom-color:#F50057;
}

.logo-border {
  box-shadow: 0 0 5px #fff, 0 0 20px #F50057, 0 0 30px #F50057;
}

.slideanim {visibility:hidden;}
.slide {
  /* The name of the animation */
  animation-name: slide;
  -webkit-animation-name: slide;
  /* The duration of the animation */
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  /* Make the element visible */
  visibility: visible;
}

.modal-dialog,
.modal-content {
    /* 80% of window height */
    height: 80%;
}


/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
  0% {
    opacity: 0;
    transform: translateY(70%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@-webkit-keyframes slide {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}