@charset "UTF-8";
/* CSS Document */

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

// <weight>: Use a value from 400 to 700
// <uniquifier>: Use a unique and descriptive class name

.google-sans-<uniquifier> {
  font-family: "Google Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "GRAD" 0;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    background-image: none!important;
    left: 10px;
    right: auto;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background-image: none!important;
    right: 10px;
    left: auto;
}
.fjalla-one-regular {
  font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.wa {
  position: fixed;
  max-width: 100px;
  right: 1rem;
  bottom: 1rem;
  z-index: 100000;
}

.navbar {
  background-color: transparent;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
  padding: 0.5rem 1rem 0.5rem 1rem;
}

.navbar.navbar-scrolled {
  background-color: #fff;
  box-shadow: 0 8px 24px rgba(18, 33, 17, 0.1);
}

.nav-item {
  margin: 0.5rem 0;
}

.nav-link {
  font-family: "Google Sans", sans-serif;
  font-weight: 500;
  color: #121211;
  font-size: calc(18px + (22 - 18)*((100vw - 300px) /(1920 - 300)));
  margin-right: 2rem;
}

.btn-nav {
  background-color: #fff;
  border: 1px solid #121211;
  border-radius: 5rem;
  color: #111112;
  padding: 0.4rem 1.8rem;
}

.contatto {
  background-color: #8bc16f;
  border: 1px solid #121211;
  border-radius: 5rem;
  color: #111112;
  padding: 0.4rem 1.8rem;
}

.logo-nav {
  max-width: 170px;
  min-width: 170px;
}

.sotto {
  background-image: url("../img/sottolineato.svg");
  background-size: 100%;
  background-position: center right;
  background-repeat: no-repeat;
}

.sotto2 {
  background-image: url("../img/sottolineato2.svg");
  background-size: 100%;
  background-position: center right;
  background-repeat: no-repeat;
}



.f1 {
  position: absolute;
  width: 320px;
  top: 5%;
  left: 8%;
  animation: Movef1 6s linear infinite;
  z-index: 1000;

}

@keyframes Movef1 {

  0%,
  100% {
    top: 10%;
    rotate: calc(0.0);
    filter: blur(0);
    scale: calc(1);

  }

  50% {
    top: 15%;
    rotate: calc(10deg);
    filter: blur(0.4px);
    scale: calc(1.1);
  }
}

.f2 {
  position: absolute;
  width: 300px;
  top: 5%;
  right: 8%;
  animation: Movef2 6s linear infinite;
  z-index: 1000;
}

@keyframes Movef2 {

  0%,
  100% {
    top: 70%;
    rotate: calc(0.0);
    filter: blur(0);
    scale: calc(1.2);

  }

  50% {
    top: 65%;
    rotate: calc(10deg);
    filter: blur(0.4px);
    scale: calc(1.1);
  }
}

.f3 {
  position: absolute;
  width: 220px;

  left: 26%;
  animation: Movef3 6s linear infinite;
  z-index: 1000;
}

@keyframes Movef3 {

  0%,
  100% {
    top: 75%;
    rotate: calc(0.0);
    filter: blur(0);
    scale: calc(1.3);

  }

  50% {
    top: 70%;
    rotate: calc(-10deg);
    filter: blur(0.4px);
    scale: calc(1.4);
  }
}

.animazione span {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  filter: blur(0px);
  transition: all 0.8s ease;
}

.animazione span.show {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.box-feed {
  padding-top: 10%;
  padding-left: 0%;
  padding-right: 5%;
  
}


.title-head {
  font-size: calc(30px + (100 - 30)*((100vw - 300px) /(1920 - 300)));
  line-height: calc(30px + (100 - 30)*((100vw - 300px) /(1920 - 300)));
  text-align: center;
  color: #564436
}

.box-title {
  padding-top: 15%;
  padding-left: 5%;
  padding-right: 5%;
  z-index: 100 !important;
}

.hz {
  position: absolute;
  width: 100%;
  z-index: 100 !important;
}

.h-head {
  height: 100vh;
}

.menu-item {
  cursor: pointer;
  width: 100%;
  height: 100vh;
}

.flowers-container {
  z-index: 0;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
}

.flower {
  position: absolute;
  width: 180px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0 !important;
}

.logo {
  max-width: 80%;
}




/*---------------curva---------------*/

.curve-divider {
  width: 100%;
  overflow: hidden;
  background: #FFFFFD;
  background: linear-gradient(180deg, rgba(255, 255, 253, 1) 60%, rgba(182, 203, 165, 1) 40%);
}

.curve-svg {
  width: 100%;
  height: 800px;
  display: block;
}

/* fascia */
.curve-svg path:first-of-type {
  vector-effect: non-scaling-stroke;
}

/* testo */
.curve-text {
  font-size: calc(50px + (120 - 50)*((100vw - 300px) /(1920 - 300)));
  letter-spacing: 10px;
  font-weight: 900;
  text-transform: uppercase;
  fill: #e7d6e3;
  /* <-- fondamentale: contrasto */
  dominant-baseline: middle;
  padding-top: 7rem;
}

/*---------------fine-curva---------------*/



.box-img-1 {
  background-color: #e7d6e3;
  position: absolute;
  top: 15%;
  left: 0%;
  transition-duration: 1s;
  border-radius: 0.5rem;
  animation: img-1-m 24s linear infinite;
  z-index: 1000;
  box-shadow: 5px 5px 10px #1d1d1d34;
}

@keyframes img-1-m {

  0%,
  100% {
    rotate: calc(-10deg);
    scale: calc(1.1);
  }

  50% {
    rotate: calc(-14deg);
    scale: calc(1);
  }
}

.box-img-1:hover {
  background-color: #e7d6e3;
  position: absolute;
  top: 13%;
  left: -10%;
  transition-duration: 1s;
  border-radius: 0.5rem;
  animation: img-1-m 24s linear infinite;
  z-index: 1000;
}

@keyframes img-1-m {

  0%,
  100% {
    rotate: calc(-10deg);
    scale: calc(1.1);
  }

  50% {
    rotate: calc(-14deg);
    scale: calc(1);
  }
}

/*---------------------------------*/
.box-img-2 {
  background-color: #e7d6e3;
  position: absolute;
  top: 15%;
  left: 30%;
  transition-duration: 1s;
  border-radius: 0.5rem;
  animation: img-2-m 24s linear infinite;
  z-index: 1000;
  box-shadow: 8px 8px 10px #1d1d1d34;
}

@keyframes img-2-m {

  0%,
  100% {
    rotate: calc(-1deg);
    scale: calc(1.1);
  }

  50% {
    rotate: calc(2deg);
    scale: calc(1);
  }
}

.box-img-2:hover {
  background-color: #e7d6e3;
  position: absolute;
  top: 10%;
  left: 32%;
  transition-duration: 1s;
  border-radius: 0.5rem;
  animation: img-2-m 24s linear infinite;
  z-index: 1000;
}

@keyframes img-2-m {

  0%,
  100% {
    rotate: calc(-1deg);
    scale: calc(1.1);
  }

  50% {
    rotate: calc(2deg);
    scale: calc(1);
  }
}


/*---------------------------------*/
.box-img-3 {
  background-color: #e7d6e3;
  position: absolute;
  top: 15%;
  left: 53%;
  transition-duration: 1s;
  border-radius: 0.5rem;
  animation: img-3-m 24s linear infinite;
  z-index: 1000;
  box-shadow: 11px 11px 10px #1d1d1d34;
}

@keyframes img-3-m {

  0%,
  100% {
    rotate: calc(10deg);
    scale: calc(1.1);
  }

  50% {
    rotate: calc(12deg);
    scale: calc(1);
  }
}

.box-img-3:hover {
  background-color: #e7d6e3;
  position: absolute;
  top: 10%;
  left: 58%;
  transition-duration: 1s;
  border-radius: 0.5rem;
  animation: img-3-m 24s linear infinite;
  z-index: 1000;
}

@keyframes img-3-m {

  0%,
  100% {
    rotate: calc(10deg);
    scale: calc(1.1);
  }

  50% {
    rotate: calc(12deg);
    scale: calc(1);
  }
}

.img-1 {
  max-width: 400px;
  border-radius: 0.5rem;
  margin: 1rem;
}

.img-2 {
  max-width: 400px;
  border-radius: 0.5rem;
  margin: 1rem;
}

.img-3 {
  max-width: 400px;
  border-radius: 0.5rem;
  margin: 1rem;
}

.title-h1 {
  font-size: calc(50px + (110 - 50)*((100vw - 300px) /(1920 - 300)));
  line-height: calc(50px + (110 - 50)*((100vw - 300px) /(1920 - 300)));
  text-align: center;
  font-weight: 800;
  color: #564436;
  padding-bottom: 3rem;
}

.title-txt {
  font-family: "Fjalla One", sans-serif;
  font-size: calc(24px + (52 - 24)*((100vw - 300px) /(1920 - 300)));
  line-height: calc(24px + (52 - 24)*((100vw - 300px) /(1920 - 300)));

  font-weight: 900;
  color: #564436
}

.txt {
  font-size: calc(18px + (26 - 18)*((100vw - 300px) /(1920 - 300)));
  line-height: calc(22px + (30 - 22)*((100vw - 300px) /(1920 - 300)));
  font-weight: 500;
  color: #564436
}
.info {
  font-size: calc(18px + (22 - 18)*((100vw - 300px) /(1920 - 300)));
  line-height: calc(22px + (30 - 22)*((100vw - 300px) /(1920 - 300)));
  font-weight: 300;
  color: #564436;
}
.title-call {
  font-size: calc(24px + (36 - 24)*((100vw - 300px) /(1920 - 300)));
  font-weight: 800;
  color: #564436
}

.btn-call {
  font-size: calc(18px + (26 - 18)*((100vw - 300px) /(1920 - 300)));
  background-color: #214a1e;
  border: 1px solid #214a1e;
  border-radius: 5rem;
  color: #f7f1ec;
  padding: 0.4rem 1.8rem;
  margin-left: 1rem;
  transition-duration: 1s;
}

.btn-call:hover {
  background-color: #e7d6e3;
  border: 1px solid #e7d6e3;
  border-radius: 5rem;
  color: #214a1e;
  transition-duration: 1s;
}

.btn-call2 {
  font-size: calc(18px + (26 - 18)*((100vw - 300px) /(1920 - 300)));
  background-color: #e7d6e3;
  border: 1px solid #e7d6e3;
  border-radius: 5rem;
  color: #214a1e;
  padding: 0.4rem 1.8rem;
  margin-left: 1rem;
  transition-duration: 1s;
}

.btn-call2:hover {
  background-color: #214a1e;
  border: 1px solid #214a1e;
  border-radius: 5rem;
  color: #f7f1ec;
  transition-duration: 1s;
}

.data {
  font-family: "Fjalla One", sans-serif;
  font-size: calc(24px + (52 - 24)*((100vw - 300px) /(1920 - 300)));
  line-height: calc(26px + (52 - 26)*((100vw - 300px) /(1920 - 300)));
  font-weight: 900;
  color: #564436
}

.txt-date {
  position: absolute;
  top: 0.5rem;
  font-size: calc(18px + (26 - 18)*((100vw - 300px) /(1920 - 300)));
  line-height: calc(22px + (30 - 22)*((100vw - 300px) /(1920 - 300)));
  font-weight: 500;
  color: #564436;

}

.sp-bot-date {
  padding-top: 2rem;
}

.box-chisiamo {
  padding-top: 4%;
  padding-left: 6%;
  padding-right: 6%;
}

.video-vietti {
  padding-left: 0%;
  padding-right: 0%;
  padding-top: 15%;
}

.no-padding {
  padding-left: 0%;
  padding-right: 0%;
}

.top-video {
  width: 100%;
  position: absolute;
  top: 0px;
}

.box-lavoro {
  padding-left: 7%;
  padding-right: 7%;
  padding-top: 10%;
  padding-bottom: 10%;
}

.box-txt-lavoro {
  padding-left: 7%;
  padding-right: 7%;
}

.box-txt-lavoro2 {
  padding-left: 4%;
  padding-right: 4%;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.title-h3 {
  font-size: calc(40px + (110 - 40)*((100vw - 300px) /(1920 - 300)));
  line-height: calc(40px + (110 - 40)*((100vw - 300px) /(1920 - 300)));
  font-weight: 800;
  color: #564436;
  padding-bottom: 3rem;
}

.back-rosa {
  background-image: url(../img/back-rosa.svg);
  background-position: center;
  background-size: 80%;
  background-repeat: no-repeat;
}

.back-green {
  background-image: url(../img/back-green.svg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.back-rece {
  margin-bottom: -10rem;
}

.card {
  box-shadow: 5px 5px 10px #28282852;
  background-color: #fffffd;
  rotate: calc(2deg);
  border-radius: 1rem;
  border: 4px solid #e7d6e3;
}

.card2 {
  box-shadow: 5px 5px 10px #28282852;
  background-color: #fffffd;
  rotate: calc(-1deg);
  border-radius: 1rem;
  border: 4px solid #b6cba5;
}

.card3 {
  box-shadow: 5px 5px 10px #28282852;
  background-color: #fffffd;
  rotate: calc(4deg);
  border-radius: 1rem;
  border: 4px solid #e7d6e3;
}

.card4 {
  box-shadow: 5px 5px 10px #28282852;
  background-color: #fffffd;
  rotate: calc(-1deg);
  border-radius: 1rem;
  border: 4px solid #b6cba5;
}

.thumbnail {
  max-width: 100%;
  padding: 2rem;
}

.sp-rece {
  padding: 2rem;
}

.txt-recensione {
  font-size: calc(18px + (22 - 18)*((100vw - 300px) /(1920 - 300)));
  line-height: calc(22px + (26 - 22)*((100vw - 300px) /(1920 - 300)));
  font-weight: 500;
  color: #564436
}

.title-rece {
  font-family: "Fjalla One", sans-serif;
  font-size: calc(18px + (52 - 18)*((100vw - 300px) /(1920 - 300)));
  line-height: calc(22px + (52 - 22)*((100vw - 300px) /(1920 - 300)));

  font-weight: 900;
  color: #564436
}

.btn-green {
  background-color: #b6cba5;
  border: 4px solid #e7d6e3;
  box-shadow: 5px 5px 10px #28282852;
  padding: 0.4rem 1rem;
  border-radius: 5rem;
  font-size: calc(18px + (22 - 18)*((100vw - 300px) /(1920 - 300)));
  line-height: calc(22px + (26 - 22)*((100vw - 300px) /(1920 - 300)));
  font-weight: 500;
  color: #564436
}

.btn-pink {
  background-color: #e7d6e3;
  border: 4px solid #b6cba5;
  box-shadow: 5px 5px 10px #28282852;
  padding: 0.4rem 1rem;
  border-radius: 5rem;
  font-size: calc(18px + (22 - 18)*((100vw - 300px) /(1920 - 300)));
  line-height: calc(22px + (26 - 22)*((100vw - 300px) /(1920 - 300)));
  font-weight: 500;
  color: #564436
}

.sp-txt-coll {
  padding-top: 2rem;
}

.stelle {
  max-width: 30%;
  padding-bottom: 1rem;
}

.sez-collab {
  padding-top: 2rem;
  padding-bottom: 6rem;
}

.icn-partner {
  max-width: 50%;
}

.nome-partner {
  font-family: "Fjalla One", sans-serif;
  font-size: calc(18px + (32 - 18)*((100vw - 300px) /(1920 - 300)));
  line-height: calc(22px + (32 - 22)*((100vw - 300px) /(1920 - 300)));

  font-weight: 900;
  color: #564436
}



/*-----------------footer---------------*/


.logo-top-foot {
  max-width: 50%;
  padding-bottom: 4rem;
}

.back-footer {
  background-color: #b6cba5;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.sp-foot {
  padding-top: 6vh;
}

.log-foot {
  max-width: 30%;
}

.box-txt-foot {
  padding-top: 10%;
}

.tit-foot {
  font-size: calc(16px + (40 - 16)*((100vw - 300px) /(1920 - 300)));
  line-height: calc(20px + (40 - 20)*((100vw - 300px) /(1920 - 300)));
  color: #564436;
  font-weight: 800;
  margin-bottom: 0.7rem;
}

.txt-foot {
  font-size: calc(16px + (28 - 16)*((100vw - 300px) /(1920 - 300)));
  line-height: calc(20px + (36 - 20)*((100vw - 300px) /(1920 - 300)));
  color: #564436;
  font-weight: 400;
  margin-bottom: 0.7rem;
}

.logo-foot {
  padding-top: 0.5rem;
}

.dati {
  text-align: center;
  padding-bottom: 1rem;
  padding-left: 2rem;
  font-size: calc(12px + (20 - 12)*((100vw - 300px) /(1920 - 300)));
  line-height: calc(20px + (20- 20)*((100vw - 300px) /(1920 - 300)));
  color: #564436;
  font-weight: 400;
  margin-bottom: 0.7rem;
  padding-top: 2rem;
}

.form-control {
  margin-top: 1rem;
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: calc(16px + (28 - 16)*((100vw - 300px) /(1920 - 300)));
  font-weight: 400;
  line-height: 1.5;
  color: #564436;
  background-color: transparent;
  background-clip: padding-box;
  border: 0px;
  border-bottom: 5px solid #564436;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input::placeholder {
  opacity: 1;
  color: #564436 !important;
  font-size: calc(16px + (28 - 16)*((100vw - 300px) /(1920 - 300)));
  font-weight: 600;
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  opacity: 1;
  color: #564436 !important;
  font-size: calc(16px + (28 - 16)*((100vw - 300px) /(1920 - 300)));
  font-weight: 600;
}

.form-control:focus {
  color: #564436;
  background-color: transparent;
  border-color: #564436;
  outline: 0;
  box-shadow: 0 0 0 0;
}


.btn-blu {
  background-color: #15182d;
  border-radius: 8rem;
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: calc(16px + (18 - 16)*((100vw - 300px) /(1920 - 300)));
  box-shadow: 0px 0px 10px 0px #e01080;
  padding: 0.4rem 2rem;
}

a {
  color: #564436;
  text-decoration: none;
}

a:hover {
  color: #564436
}

.dsp-n {
  display: block;
}

.dsp-t {
  display: none;
}





@media only screen and (max-width: 1500px) {
  .f1 {
    width: 220px;
    top: 2%;
    left: 4%;
  }

  @keyframes Movef1 {

    0%,
    100% {
      top: 10%;
    }

    50% {
      top: 15%;
    }
  }

  .f2 {
    width: 200px;
    top: 5%;
  }

  @keyframes Movef2 {

    0%,
    100% {
      top: 70%;
    }

    50% {
      top: 65%;
    }
  }

  .f3 {
    width: 120px;
    top: 5%;
  }

  @keyframes Movef3 {

    0%,
    100% {
      top: 75%;
    }

    50% {
      top: 70%;
    }
  }

  .dsp-n {
    display: none;
  }

  .dsp-t {
    display: block;
  }

  .curve-svg {
    width: 100%;
    height: 400px;
    display: block;
  }

  .title-h1 {
    font-size: calc(40px + (90 - 40)*((100vw - 300px) /(1920 - 300)));
    text-align: center;
    font-weight: 800;
    color: #564436;
    padding-bottom: 3rem;
  }

  .txt {
    font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1920 - 300)));
    line-height: calc(22px + (26 - 22) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 500;
    color: #564436;
  }

  .txt-date {
    font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1920 - 300)));
    line-height: calc(22px + (26 - 22) * ((100vw - 300px) / (1920 - 300)));
  }

  .box-img-1 {
    background-color: #e7d6e3;
    position: absolute;
    top: 15%;
    left: 0%;
    transition-duration: 1s;
    border-radius: 0.5rem;
    animation: img-1-m 24s linear infinite;
    z-index: 1000;
    box-shadow: 5px 5px 10px #1d1d1d34;
  }

  @keyframes img-1-m {

    0%,
    100% {
      rotate: calc(-10deg);
      scale: calc(1.1);
    }

    50% {
      rotate: calc(-14deg);
      scale: calc(1);
    }
  }

  .box-img-1:hover {
    background-color: #e7d6e3;
    position: absolute;
    top: 13%;
    left: -10%;
    transition-duration: 1s;
    border-radius: 0.5rem;
    animation: img-1-m 24s linear infinite;
    z-index: 1000;
  }

  @keyframes img-1-m {

    0%,
    100% {
      rotate: calc(-10deg);
      scale: calc(1.1);
    }

    50% {
      rotate: calc(-14deg);
      scale: calc(1);
    }
  }

  /*---------------------------------*/
  .box-img-2 {
    background-color: #e7d6e3;
    position: absolute;
    top: 15%;
    left: 30%;
    transition-duration: 1s;
    border-radius: 0.5rem;
    animation: img-2-m 24s linear infinite;
    z-index: 1000;
    box-shadow: 8px 8px 10px #1d1d1d34;
  }

  @keyframes img-2-m {

    0%,
    100% {
      rotate: calc(-1deg);
      scale: calc(1.1);
    }

    50% {
      rotate: calc(2deg);
      scale: calc(1);
    }
  }

  .box-img-2:hover {
    background-color: #e7d6e3;
    position: absolute;
    top: 10%;
    left: 32%;
    transition-duration: 1s;
    border-radius: 0.5rem;
    animation: img-2-m 24s linear infinite;
    z-index: 1000;
  }

  @keyframes img-2-m {

    0%,
    100% {
      rotate: calc(-1deg);
      scale: calc(1.1);
    }

    50% {
      rotate: calc(2deg);
      scale: calc(1);
    }
  }


  /*---------------------------------*/
  .box-img-3 {
    background-color: #e7d6e3;
    position: absolute;
    top: 15%;
    left: 53%;
    transition-duration: 1s;
    border-radius: 0.5rem;
    animation: img-3-m 24s linear infinite;
    z-index: 1000;
    box-shadow: 11px 11px 10px #1d1d1d34;
  }

  @keyframes img-3-m {

    0%,
    100% {
      rotate: calc(10deg);
      scale: calc(1.1);
    }

    50% {
      rotate: calc(12deg);
      scale: calc(1);
    }
  }

  .box-img-3:hover {
    background-color: #e7d6e3;
    position: absolute;
    top: 10%;
    left: 58%;
    transition-duration: 1s;
    border-radius: 0.5rem;
    animation: img-3-m 24s linear infinite;
    z-index: 1000;
  }

  @keyframes img-3-m {

    0%,
    100% {
      rotate: calc(10deg);
      scale: calc(1.1);
    }

    50% {
      rotate: calc(12deg);
      scale: calc(1);
    }
  }

  .img-1 {
    max-width: 260px;
    border-radius: 0.5rem;
    margin: 1rem;
  }

  .img-2 {
    max-width: 260px;
    border-radius: 0.5rem;
    margin: 1rem;
  }

  .img-3 {
    max-width: 260px;
    border-radius: 0.5rem;
    margin: 1rem;
  }

}

@media only screen and (max-width: 1100px) {
  .h-head {
    height: 50vh;
  }

  .menu-item {
    cursor: pointer;
    width: 100%;
    height: 50vh;
  }

  .f1 {
    width: 220px;
    top: 2%;
    left: 4%;
  }

  @keyframes Movef1 {

    0%,
    100% {
      top: 6%;
      rotate: calc(0.0);
      filter: blur(0px);
      scale: calc(1);
    }

    50% {
      top: 8%;
      rotate: calc(3deg);
      filter: blur(0.1px);
      scale: calc(1.1);
    }
  }

  .f2 {
    width: 200px;
    top: 5%;
  }

  @keyframes Movef2 {

    0%,
    100% {
      top: 40%;
      rotate: calc(0.0);
      filter: blur(0px);
      scale: calc(1);
    }

    50% {
      top: 43%;
      rotate: calc(-5deg);
      filter: blur(0.1px);
      scale: calc(1.1);
    }
  }

  .f3 {
    width: 210px;
    top: 5%;
  }

  @keyframes Movef3 {

    0%,
    100% {
      top: 35%;
      rotate: calc(0.0);
      filter: blur(0px);
      scale: calc(1);
    }

    50% {
      top: 40%;
      rotate: calc(7deg);
      filter: blur(0.1px);
      scale: calc(1.3);
    }
  }

  .box-title {
    padding-top: 25%;
    padding-left: 5%;
    padding-right: 5%;
    z-index: 100 !important;
  }

  .dsp-n {
    display: none;
  }

  .dsp-t {
    display: block;
  }

  .box-img-1 {
    background-color: #e7d6e3;
    position: absolute;
    top: 7%;
    left: 0%;
    transition-duration: 1s;
    border-radius: 0.5rem;
    animation: img-1-m 24s linear infinite;
    z-index: 1000;
    box-shadow: 5px 5px 10px #1d1d1d34;
  }

  @keyframes img-1-m {

    0%,
    100% {
      rotate: calc(-10deg);
      scale: calc(1.1);
    }

    50% {
      rotate: calc(-14deg);
      scale: calc(1);
    }
  }

  .box-img-1:hover {
    background-color: #e7d6e3;
    position: absolute;
    top: 9%;
    left: -10%;
    transition-duration: 1s;
    border-radius: 0.5rem;
    animation: img-1-m 24s linear infinite;
    z-index: 1000;
  }

  @keyframes img-1-m {

    0%,
    100% {
      rotate: calc(-10deg);
      scale: calc(1.1);
    }

    50% {
      rotate: calc(-14deg);
      scale: calc(1);
    }
  }

  /*---------------------------------*/
  .box-img-2 {
    background-color: #e7d6e3;
    position: absolute;
    top: 25%;
    left: 30%;
    transition-duration: 1s;
    border-radius: 0.5rem;
    animation: img-2-m 24s linear infinite;
    z-index: 1000;
    box-shadow: 8px 8px 10px #1d1d1d34;
  }

  @keyframes img-2-m {

    0%,
    100% {
      rotate: calc(-1deg);
      scale: calc(1.1);
    }

    50% {
      rotate: calc(2deg);
      scale: calc(1);
    }
  }

  .box-img-2:hover {
    background-color: #e7d6e3;
    position: absolute;
    top: 22%;
    left: 32%;
    transition-duration: 1s;
    border-radius: 0.5rem;
    animation: img-2-m 24s linear infinite;
    z-index: 1000;
  }

  @keyframes img-2-m {

    0%,
    100% {
      rotate: calc(-1deg);
      scale: calc(1.1);
    }

    50% {
      rotate: calc(2deg);
      scale: calc(1);
    }
  }


  /*---------------------------------*/
  .box-img-3 {
    background-color: #e7d6e3;
    position: absolute;
    top: 55%;
    left: 4%;
    transition-duration: 1s;
    border-radius: 0.5rem;
    animation: img-3-m 24s linear infinite;
    z-index: 1000;
    box-shadow: 11px 11px 10px #1d1d1d34;
  }

  @keyframes img-3-m {

    0%,
    100% {
      rotate: calc(10deg);
      scale: calc(1.1);
    }

    50% {
      rotate: calc(12deg);
      scale: calc(1);
    }
  }

  .box-img-3:hover {
    background-color: #e7d6e3;
    position: absolute;
    top: 52%;
    left: 7%;
    transition-duration: 1s;
    border-radius: 0.5rem;
    animation: img-3-m 24s linear infinite;
    z-index: 1000;
  }

  @keyframes img-3-m {

    0%,
    100% {
      rotate: calc(10deg);
      scale: calc(1.1);
    }

    50% {
      rotate: calc(12deg);
      scale: calc(1);
    }
  }

  .img-1 {
    max-width: 260px;
    border-radius: 0.5rem;
    margin: 1rem;
  }

  .img-2 {
    max-width: 260px;
    border-radius: 0.5rem;
    margin: 1rem;
  }

  .img-3 {
    max-width: 260px;
    border-radius: 0.5rem;
    margin: 1rem;
  }

  .txt-date {
    padding-left: 1rem;
    position: relative;
  }

}

@media only screen and (max-width: 850px) {
  .box-img-3 {
    background-color: #e7d6e3;
    position: absolute;
    top: 15%;
    left: 57%;
    transition-duration: 1s;
    border-radius: 0.5rem;
    animation: img-3-m 24s linear infinite;
    z-index: 1000;
    box-shadow: 11px 11px 10px #1d1d1d34;
  }

  @keyframes img-3-m {

    0%,
    100% {
      rotate: calc(10deg);
      scale: calc(1.1);
    }

    50% {
      rotate: calc(12deg);
      scale: calc(1);
    }
  }

  .box-img-3:hover {
    background-color: #e7d6e3;
    position: absolute;
    top: 15%;
    left: 56%;
    transition-duration: 1s;
    border-radius: 0.5rem;
    animation: img-3-m 24s linear infinite;
    z-index: 1000;
  }

  @keyframes img-3-m {

    0%,
    100% {
      rotate: calc(10deg);
      scale: calc(1.1);
    }

    50% {
      rotate: calc(12deg);
      scale: calc(1);
    }
  }

  .dsp-n {
    display: none;
  }

  .dsp-t {
    display: none;
  }

  .h-foto {
    height: 300px;
  }

  .img-1 {
    max-width: 110px;
    border-radius: 0.5rem;
    margin: 0.5rem;
  }

  .img-2 {
    max-width: 120px;
    border-radius: 0.5rem;
    margin: 0.5rem;
  }

  .img-3 {
    max-width: 110px;
    border-radius: 0.5rem;
    margin: 0.5rem;
  }

  .h-head {
    height: auto;
  }

  .menu-item {
    cursor: pointer;
    width: 100%;
    height: 70vh;
  }

  .box-title {
    padding-top: 45%;
    padding-left: 5%;
    padding-right: 5%;
    z-index: 100 !important;
  }

  .f1 {
    width: 120px;
    top: 2%;
    left: 4%;
  }

  @keyframes Movef1 {

    0%,
    100% {
      top: 10%;
      rotate: calc(0.0);
      filter: blur(0px);
      scale: calc(1);
    }

    50% {
      top: 15%;
      rotate: calc(3deg);
      filter: blur(0.1px);
      scale: calc(1.1);
    }
  }

  .f2 {
    width: 100px;
    top: 5%;
  }

  @keyframes Movef2 {

    0%,
    100% {
      top: 70%;
      rotate: calc(0.0);
      filter: blur(0px);
      scale: calc(1);
    }

    50% {
      top: 65%;
      rotate: calc(-5deg);
      filter: blur(0.1px);
      scale: calc(1.1);
    }
  }

  .f3 {
    width: 100px;
    top: 5%;
  }

  @keyframes Movef3 {

    0%,
    100% {
      top: 60%;
      rotate: calc(0.0);
      filter: blur(0px);
      scale: calc(1);
    }

    50% {
      top: 65%;
      rotate: calc(7deg);
      filter: blur(0.1px);
      scale: calc(1.3);
    }
  }

  .data {
    margin-bottom: 0rem;
  }

  .txt-date {
    position: relative;
  }

  .sp-bot-date {
    padding-top: 0px;
  }

  .title-h3 {
    padding-bottom: 1rem;
  }

  .box-txt-lavoro2 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .box-txt-lavoro {
    padding-left: 2%;
    padding-right: 2%;
  }

  .back-rece {
    margin-bottom: -3rem;
  }

  .navbar-toggler {
    border: 0px solid transparent;
    background-color: #8bc16f;
    border-radius: 50rem;
    padding: 0.5rem 0.5rem;
  }

  .navbar-toggler:focus {
    border: 0px solid transparent;
    box-shadow: 0px 0px 0px transparent;
  }

  .logo-top-foot {
    max-width: 80%;
    padding-bottom: 2rem;
  }

  #chisono {
    scroll-margin-top: 8rem;
  }

  #comelavoro {
    scroll-margin-top: 5rem;
  }

  #contatti {
    scroll-margin-top: 5rem;
  }

  .wa {
    right: 0.2rem;
    bottom: 0.2rem;
    max-width: 90px;
  }
}