@charset "UTF-8";
/* CSS Document */
:root{
  --blu: #3892b1;
  --blu-10: rgba(56, 147, 177, 0.925);
  --blu-20:rgba(56, 147, 177, 0.85);
  --blu-30:rgba(56, 147, 177, 0.72);
  --blu-40:rgba(56, 147, 177, 0.62);
  --blu-50:rgba(56, 147, 177, 0.52);
  --blu-60:rgba(56, 147, 177, 0.925);
  --blu-70:rgba(56, 147, 177, 0.75);
  --blu-80:rgba(56, 147, 177, 0.62);
  --blu-90:rgba(56, 147, 177, 0.52);
}




body,
h1,
h2,
h3,
h4,
h5,
p {
    font-family: "Manrope", sans-serif;
}

.bg-blu{
  background-color: var(--blu);
}
.bg-blu-10{
  background-color: var(--blu-10);
}
.bg-blu-20{
  background-color: var(--blu-20);
}
.bg-blu-30{
  background-color: var(--blu-30);
}
.bg-blu-40{
  background-color: var(--blu-40);
}
.bg-blu-50{
  background-color: var(--blu-50);
}
.bg-blu-60{
  background-color: var(--blu-60);
}
.bg-blu-70{
  background-color: var(--blu-70);
}
.bg-blu-80{
  background-color: var(--blu-80);
}
.bg-blu-90{
  background-color: var(--blu-90);
}
.logo-nav{
  max-width: 80px;
  min-width: 80px;
}
.modal-content-custom{
  border:3px solid var(--blu);
}
.modal-title{
  font-size: 1.4rem;
  color:var(--blu-10);
  text-transform: uppercase;
  font-weight: 800;
}
.bg-light{
  background-color: transparent!important;
}
.nav-link{
  font-weight: 700;
  color: #151515;
  font-size: calc(16px + (24 - 16) * ((100vw - 300px) / (1920 - 300)));
  letter-spacing: 0.05rem;
  margin-right: 2rem;
  text-transform: uppercase;
}
.dropdown-menu {
  border-radius: 0px;
  background-color: transparent;
  border: 0px;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding:  0.5rem 1rem;
    margin-top: 0.5rem;
    clear: both;
    font-weight: 600;
    color: #151515;
    font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1920 - 300)));
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: #fff;
    border: 0;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;

}
.navbar-toggler {
    border: none;
}
.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none;
}
.head{
  background-image: url(../img/head.jpg);
  height: 80vh;
  background-size: cover;
  background-position: center;
}

.head-civile{
  background-image: url(../img/head-civile.jpg);
  background-size: cover;
  background-position: center bottom;
  height: 70vh;
}
.head-penale{
  background-image: url(../img/head-penale.jpg);
  background-size: cover;
  background-position: center;
}
.back-h1{
  background-image: url(../img/back-h1.svg);
  height: auto;
  background-size: cover;
  background-position: left;
}
.title-h1{
  font-weight: 200;
  color: #151515;
  font-size: calc(36px + (54 - 36) * ((100vw - 300px) / (1920 - 300)));
  letter-spacing: 0.05rem;
  padding-top: 40vh;
}
a:hover{
  color: var(--blu);
}
.nome-h1{
  font-weight: 700;
  color: #151515;
  font-size: calc(46px + (104 - 46) * ((100vw - 300px) / (1920 - 300)));
  letter-spacing: 0.05rem;
  line-height: 100px;
}
.dropdown-item.active, .dropdown-item:active {
  color: var(--bs-dropdown-link-active-color);
  text-decoration: none;
  background-color: var(--blu);
}
.iubenda-nostyle, .iubenda-cs-preferences-link{
  color:var(--blu)
}
.iubenda-nostyle:hover, .iubenda-cs-preferences-link:hover{
  color:white;
}
.title-h2{
  font-weight: 600;
  color: #F6F6F6;
  font-size: calc(22px + (40 - 22) * ((100vw - 300px) / (1920 - 300)));
  letter-spacing: 0.05rem;
}
.txt{
  font-weight: 400;
  color: #F6F6F6;
  font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1920 - 300)));
  letter-spacing: 0.05rem;
  text-align: justify;
  text-justify: inter-word;
}
.box-studio{
  padding: 6rem;
  margin-top: 1px;
}

.lato-studio{
  background-image: url(../img/lato-studio.jpg);
  background-size: cover;
  background-position: center bottom;
}

.title-h2-b{
  font-weight: 300;
  color: #2B2B2B;
  font-size: calc(24px + (66 - 24) * ((100vw - 300px) / (1920 - 300)));
  letter-spacing: 0.05rem;
}
.txt-b{
  font-weight: 400;
  color: #2B2B2B;
  font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1920 - 300)));
  letter-spacing: 0.05rem;
  text-align: justify;
  text-justify: inter-word;
}
.txt-w{
  font-weight: 400;
  color: #fff;
  font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1920 - 300)));
  letter-spacing: 0.05rem;
}
.lett{
  font-weight: 600;
  font-size: calc(50px + (90 - 16) * ((100vw - 300px) / (1920 - 300)));
  letter-spacing: -2rem;
  color: #3892b1;
}
.nome-avv{
  font-weight: 600;
  color: #2B2B2B;
  font-size: calc(24px + (40 - 24) * ((100vw - 300px) / (1920 - 300)));
  letter-spacing: 0.05rem;
}

.underline{
  background-image: url(../img/underline.svg);
  background-size: cover;
  background-position: center bottom;
}

.underline-w{
  background-image: url(../img/underline-w.svg);
  background-size: cover;
  background-position: center bottom;
}
.underline-serv{
  background-image: url(../img/underline-serv.svg);
  background-size: cover;
  background-position: center bottom;
}

.card{
  border: 0px;

}
.leggi{
  font-weight: 800;
  color: #2B2B2B;
  font-size: calc(18px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
  letter-spacing: 0.05rem;
  margin-left: -1rem;
  text-transform: uppercase;
}
.mail{
  font-weight: 800;
  color: #2B2B2B;
  font-size: calc(18px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
  letter-spacing: 0.05rem;
  margin-left: -1rem;
}

.leggi-diritti{
  font-weight: 800;
  color: #2B2B2B;
  font-size: calc(18px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
  letter-spacing: 0.05rem;
  text-transform: uppercase;
}
.box-diritto{
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.box-civile{
  
  border: 6px solid #3892b1;
  background-image: url(../img/box1.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right bottom;
}
.box-penale{
  border: 6px solid #3892b1;
  background-image: url(../img/box2.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left center;
}
.box-amministrativo{
  border: 6px solid #3892b1;
  background-image: url(../img/box3.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left center;
}
.box-diritti{
  padding: 3rem;
}
.sp-box{
  padding: 1.5rem;
}
.sp-box-top{
  padding-top: 0.2rem;
}
.sp-diritti{
  padding: 3rem;
}

.title-box{
  font-weight: 600;
  color: #F8F8F8;
  font-size: calc(24px + (66 - 24) * ((100vw - 300px) / (1920 - 300)));
  letter-spacing: 0.05rem;
}
.txt-box{
  font-weight: 400;
  color: #F8F8F8;
  font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1920 - 300)));
  letter-spacing: 0.05rem;
}
.sp-foot{
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.tit-foot{
  font-weight: 500;
  color: #F6F6F6;
  font-size: calc(16px + (26 - 16) * ((100vw - 300px) / (1920 - 300)));
  letter-spacing: 0.05rem;
}
.back-foot{
  background-image: url(../img/foot.png);
  background-size: cover;
  background-position: right center;
}
.logo-foot{
  max-width: 25%;
}
.white{
  color: #f6f6f6;
  letter-spacing: 0rem;
}
a{
  text-decoration: none;
}
.black{
  color: #151515!important;
}
@media only screen and (max-width: 1800px) {
  .nav-link {
      
      font-size: calc(13px + (24 - 16) * ((100vw - 300px) / (1920 - 300)));
      
      margin-right: 1rem;
      
  }
}
@media only screen and (max-width: 769px) {
  .box-studio{
    padding:1em;
  }
}
@media only screen and (max-width: 700px) {
.box-civile, .box-amministrativo, .box-penale {
  
    border: 3px solid #3892b1;
}
.title-h1{
  font-weight: 200;
  color: #151515;
  font-size: calc(26px + (54 - 26) * ((100vw - 300px) / (1920 - 300)));
  letter-spacing: 0.05rem;
  padding-top: 4vh;
}
.nome-h1{
  font-weight: 700;
  color: #151515;
  font-size: calc(56px + (164 - 56) * ((100vw - 300px) / (1920 - 300)));
  letter-spacing: 0.05rem;
  line-height: 60px;
}
.head{
  background-image: url(../img/head-mob.jpg);
  height: 90vh;
  background-size: cover;
  background-position: center;
}

.box-studio {
    padding: 1.5rem;
    margin-top: 1px;
}
.lett {
    font-weight: 600;
    font-size: calc(50px + (90 - 16) * ((100vw - 300px) / (1920 - 300)));
    letter-spacing: -0.4rem;
    color: #3892b1;
}
.lett-white {
    font-weight: 600;
    font-size: calc(50px + (90 - 16) * ((100vw - 300px) / (1920 - 300)));
    letter-spacing: -0.4rem;
    color: #ffffff;
}
.leggi {
    font-weight: 800;
    color: #2B2B2B;
    font-size: calc(18px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
    letter-spacing: 0.05rem;
    margin-left: -1rem;
    text-transform: uppercase;
}
.lato-studio{
  background-image: url(../img/lato-studio.jpg);
  background-size: cover;
  background-position: center bottom;
  height: 60vh;
}

.sp-diritti {
    padding: 2rem;
}
.sp-box {
    padding: 0.5rem;
}
.box-diritti {
    padding: 1rem;
}
.modal-dialog {
        max-width: 100%;
      }
}