footer{
  position: relative;
  padding: 20px 50px;
  display: flex;
  justify-content: space-between;
  gap: 50px;
  background-color: #222;
  box-shadow: -3px -3px 15px rgba(255, 255, 255, .1), 3px 3px 3px rgba(0, 0, 0, .6);
}

.footerSx{
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: calc(100% - 150px);
  color: #fff;
  font-size: 14px;
  /* padding: 20px 0; */
  /* margin-left: 40px; */
}

.footerSx > .ragioneSociale{
  font-weight: bold;
}

footer > div > .privacy{
  padding-top: 10px;
}

/* ================================================== Animazione scroll. ================================================== */

footer > .footerDx{
  width: 130px;
  height: auto;
}

.socialContainer{
  display: flex;
  justify-content: space-between;
}

.socialContainer:first-child{
  margin-bottom: 20px;
}

.socialContainer a{
  text-decoration: none;
  color: #fff;
  width: 50px;
  height: 50px;
  display: inline-block;
  box-shadow: -3px -3px 15px rgba(255, 255, 255, .1), 3px 3px 3px rgba(0, 0, 0, .6);
}

.socialContainer a div:first-child{
  font-size: 12px;
  text-align: center;
  margin-bottom: 4px;
  transition-delay: .1s;
  transition-property: font-weight;
}

.socialContainer a:hover div:first-child{
  font-weight: bold;
}

.socialContainer a div:last-child{
  width: 25px;
  height: 25px;
  margin: auto;
  background-color: #0877f0;
  border-radius: 5px;
  box-shadow: none;
  transition-duration: .5s;
  transition-property: box-shadow, background-color;
  transition-timing-function: ease;
}

.socialContainer a:hover div:last-child{
  background-color: #0ef;
  box-shadow: 0 0 20px #0ef;
}

.socialContainer img{
  height: 100%;
}

/* _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_ Responsive design. _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_ */

@media only screen and (max-width: 520px){
  footer{
    display: block;
  }

  footer > .footerSx{
    width: 100%;
    margin-bottom: 50px;
  }

  footer > .footerDx{
    margin: 0 auto;
  }
}