@import url("https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Qwigley&family=Raleway:ital,wght@0,100..900;1,100..900&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");
html, body {
  width: 100%;
}

body {
  background-color: #0a0908;
}

.open-menu {
  position: fixed;
  right: 0;
  top: 0;
  background-color: #000000;
  color: #fff !important;
  cursor: pointer;
  cursor: hand;
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999999999;
  font-size: 40px;
}

.overlay-menu {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.9);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99999999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 2s;
}
.overlay-menu .container .row .col-md-5 .img-fluid {
  filter: invert(100%);
}
.overlay-menu .container .row .col-md-7 .nav .nav-item .nav-link {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 30px;
}

h1, h2, h3, h4, h5 {
  font-family: "Cormorant", serif;
  font-style: normal;
}
h1.firma, h2.firma, h3.firma, h4.firma, h5.firma {
  font-family: "Qwigley", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 4.5rem;
}

.container-relative {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1920px;
  margin: 0px auto;
}
@media screen and (min-width: 1200px) {
  .container-relative {
    max-width: 1920px;
    margin: 0px auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .container-relative.full-h {
    height: 100vh;
    max-height: 1080px;
    background-color: #fefefe;
  }
  .container-relative .img-sfondo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
  }
  .container-relative .container {
    position: relative;
    z-index: 9;
  }
}
.container-relative .q {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 120%;
  height: 20%;
}
.container-relative .q.q-1 {
  background-color: #0a0908;
  transform: translate(-50%, 60%) rotate(-2deg);
  z-index: 10;
}
.container-relative .q.q-2 {
  background-color: #a9927d;
  transform: translate(-50%, 50%) rotate(2deg);
  z-index: 5;
}

.position-sticky {
  position: sticky;
  top: 5%;
}

p {
  font-size: 14px;
  line-height: 24px;
}

figure {
  margin-bottom: 0;
}
figure::before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(5deg);
  width: 85%;
  height: 85%;
  border: 1px solid #a9927d;
  z-index: 10;
  content: "";
}
figure::after {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  width: 101%;
  height: 101%;
  border: 1px solid #a9927d;
  z-index: 0;
  content: "";
}
figure img {
  z-index: 5;
  position: relative;
}

.dark-theme h2 {
  color: #a9927d;
}
.dark-theme p {
  color: #f2f4f3;
}

.bio {
  background: linear-gradient(#0a0908, rgba(10, 9, 8, 0.5), #0a0908), url("img/sf_bio.jpg");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
}

.skill {
  background: linear-gradient(#0a0908, rgba(10, 9, 8, 0.5), #0a0908), url("img/sf_skill.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 100vh;
  max-height: 1080px;
}

.contatti {
  background: linear-gradient(#0a0908, rgba(10, 9, 8, 0.5), #0a0908), url("img/sf_contatti.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 100vh;
  max-height: 1080px;
}
.contatti label {
  color: #a9927d;
}

.gallery {
  background: linear-gradient(#0a0908, rgba(10, 9, 8, 0.5), #0a0908), url("img/sf_gallery.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

@media screen and (min-width: 768px) {
  .timeline .container {
    position: relative;
    overflow: hidden;
  }
  .timeline .container::after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #fff;
    opacity: 0.2;
    content: "";
  }
  .timeline .container .row {
    position: relative;
  }
  .timeline .container .row::after {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 100%;
    background-color: #a9927d;
    opacity: 1;
    content: "";
  }
  .timeline .container .row::before {
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
    width: 12rem;
    height: 1px;
    background-color: #a9927d;
    opacity: 1;
    content: "";
  }
}
.timeline .row .col-md-6 h5 {
  color: #a9927d;
  font-size: 2rem;
}
@media screen and (min-width: 1200px) {
  .timeline .row .col-md-6 h5 {
    font-size: 4rem;
  }
}

.col-masonry {
  display: grid;
  gap: 10px;
  /*
  grid-template-columns: 1fr 1fr 1fr;
  .grid-content {
      img {

          width: 100%;
          height: 100%;
          object-fit: cover;
      }
  }
  .grid-content:first-child {
      grid-row-start: 1;
      grid-row-end:   3;
  }
  */
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: 1200px) {
  .col-masonry {
    grid-template-columns: repeat(5, 1fr);
  }
}
.col-masonry > * {
  aspect-ratio: 1;
}
.col-masonry img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.nav-gallery .nav-item .nav-link {
  color: #fff;
  background-color: transparent;
  border: 0;
  transition: all 0.5s;
}
.nav-gallery .nav-item .nav-link.active {
  background-color: #a9927d;
  color: #000;
}

.form-check .form-check-input {
  float: left;
  margin-left: 0em;
}/*# sourceMappingURL=stili.css.map */