@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');

*{
  box-sizing: border-box;
}

body{
  padding: 0;
  margin: 0;
}

html{
  font: 400 14px 'Roboto', sans-serif;
}
.wrapper{
  max-width: 1600px;
  width: 100%;
  margin: auto;
}
.ferma{clear: both;}

.bg{
  background-color: #0000ff;
  width: 100%;
  padding-bottom: 30px;
}

.logo{
  width: 38%;
  max-width: 1080px;
  margin-left: 31%;
  margin-top: 10px;
}

.hamb{
  max-width: 30px;
  width: 100%;
  margin-right: 8%;
}

.testata{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}


.boxmenu{
  width: 100%;
  height: 20vh;
  background-color: #0000ff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  transform: translate(100%,0);
  transition: all 0.5s ease-in-out;
  line-height: 16px;
  border: 2px solid #fff;
  border-radius: 20px;
}

.ingresso{
  transform: translate(0,0);
}

.close{
  position: absolute;
  top: 20px;
  right: 30px;
  width: 7%;
  max-width: 240px;
}

.menupiccolo li{
  margin: 15px 0;
}

.voci{
  color: #fff;
  font-size: 14px;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.voci a, .voci a:link, .voci a:active, .voci a:visited{
  color: #fff;
  text-decoration: none;
}

.voci a:hover{
  text-decoration: underline;
}
.box-stringa{
  width: 100%;
  overflow: hidden;
}
.stringa-small{
width: 100%;
max-width: 800px;
margin-top: 50px;
margin-bottom: -25px;
}
.stringa{
  display: none;
}
.box-intro{
  width: 97%;
  border: 2px solid #fff;
  border-radius: 20px;
  margin:40px 1.5% 50px;
}
.intro{
  width: 100%;
  font-size: 15px;
  line-height: 18px;
  padding: 10px 2%;
  /* margin: 10px 5% 40px 5%; */
  color: #fff;
  /* width: 90%; */
}
.affordance{
  color: #fff;
  font-size: 12px;
  text-align: center;
  padding-bottom: 2px;
}
.linkYT{
  background-color: #fff;
  width: 100%;
  color: #00f;
  text-align: center;
  padding: 4px;
  margin-bottom: 40px;
  margin-top: -10px;
  font-size: 24px;
}
.linkYT a, .linkYT a:link, .linkYT a:active, .linkYT a:visited {
  text-decoration: underline;
  color: #0000fd;
}
.linkYT a:hover{
  text-decoration: none;
}
.provavaso{
width: 76%;
max-width: 700px;
margin-bottom: 20px;
margin-top: 20px;
border-radius: 350px;
}

.title{
  font-size: 60px;
  color: #fff;
  margin: 90px 0 0 0;
  padding: 15px;
  text-align: center;
  font-weight: 300;
  letter-spacing: 3.5px;

}


.descr{
  font-size: 15px;
  line-height: 17px;
  margin: 10px 3% 5px 3%;
  color: #fff;
}

.descrizionevaso{
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.carosello{
  max-width: 960px;
  border-radius: 50px;
  border: 2px solid #fff;
}

.menugrande{
  display: none;
}

.descr2, .provavaso2{
  display: none;
}

.footer{
  width: 100%;
  background-color: #fff;
  margin-top: 30px;
}
.contatti{
  width: 97%;
  border: 2px solid #00f;
  display: flex;
  justify-content: space-between;
  margin: 0 1.5%;
  border-radius: 20px;
}
.info-contatti{
  color: #00f;
  width: 60%;
  padding: 0 8px;
}
.info-contatti ul{
padding:0;
}
.info-contatti li{
  list-style-type: none;
  margin-bottom: 2px;
}
.icone-social{
  width: 26%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 180px;
}
.icone-social img{
  width: 40%;
  margin-top: 10px;
}
.icone{
  width: 80%;
  margin: 20px 10%;
}
.icone a{
  width: 45%;
    float: left;
}
.logonid{
  width: 100%;
transform: translateY(-25px);
}
.logo-sara{
  width: 30%;
  float: left;
}
.logo-base{
  width: 25%;
  float: left;
  transform: translateY(10px);
}
.separatore{
  border: 1px solid #00f;
}
.info-legali{
  color: #00f;
}
.info-legali p{
  margin: 0;
  padding: 10px;
}
.policy{
  display:flex;
  justify-content: flex-start;
}
.policy p{
  padding:10px;
  margin: 0;
}
.info-legali a, .info-legali a:link, .info-legali a:active, .info-legali a:visited {
  text-decoration: underline;
  color: #0000fd;
}
@media screen and (min-width:500px){
  .intro, .descr{
    font-size: 14px;
    line-height: 18px;

  }

  .provavaso{
    width: 50%;
  }

}/*500PX*/


@media screen and (min-width:600px){
  .logo{
    width: 30%;
    margin-top: 10px;
    margin-left: 35%;

  }

  .provavaso{
    width: 50%;
  }

.hamb{
  display: none;
}
.box-intro{
  display:flex;
  justify-content: space-around;
}
.menugrande{
  display: block;
  margin-right: 3%;
  width: 27%;
}

.vocimenu{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width:100%;
}

.voci{
  margin-right: 17%;
  font-size: 15px;
  line-height: 19px;
}
}/*600PX*/

.title{
  font-size: 60px;
}

@media screen and (min-width:700px){
  .descr, .intro, .voci{
    font-size: 16px;
    line-height: 20px;
  }

  .logo{
    width: 25%;
    margin-left: 37.5%;
  }
  .title{
    font-size: 70px;
  }
  .box-foot{
    width: 100%;
    margin-bottom: 30px;
  }
  .contatti{
    width: 52%;
    float: left;
    margin:10px 2%;
  }
  .icone{
    width: 40%;
    float: left;
    margin:40px 2%;
  }
  .box-intro{
    margin: 65px 1.5% 85px;
  }
}/*700PX*/


@media screen and (min-width:800px){

  .descrizionevaso{
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
  }

  .title{
    font-size: 80px;
    margin: auto;

}

.provavaso{
  width: 40%;
  margin-left: 3%;
}

.descr{
  font-size: 16px;
  line-height: 20px;
  margin: 0 3%;
  padding: 0;
  width: 45%;
}

.grande{
  flex-direction: row-reverse;
}

.reverse{
  margin-right: 3%;
  margin-left: 0;
}

.juvenate{
  width: 58%;
}

.blooming{
  width: 63%;
}

.union{
  width: 45%;
}
.creation{
  width: 57%;
}
.sound{
  width: 48%;
}
.stringa-small{
  display: none;
}
.stringa{
  display: block;
  max-width: 1920px;
  margin-bottom: 130px;
  margin-top: 130px;
}
.linkYT{
  padding: 20px;
  font-size: 32px;
  margin-bottom: 75px;
}

}/*800PX*/

@media screen and (min-width:900px){

  .title{
    font-size: 80px;
  }
  .bg{
    padding-bottom: 60px;
  }
}/*900PX*/

@media screen and (min-width:1000px){
.menugrande{
  width: 23%;
}
.provavaso{
  width: 40%;
}

.descr{
  width: 50%;
}
.juvenate{
  width: 53%;
}

.blooming{
  width: 60%;
}

.union{
  width: 45%;
}
.creation{
  width: 55%;
}
.sound{
  width: 50%;
}
.provavaso{
  width: 35%;
}
.icone-social{
  flex-direction: row;
}
.icone-social img{
  width: 60%;
}
}/*1000PX*/

@media screen and (min-width: 1100px){
  .juvenate{
    width: 48%;
  }

  .blooming{
    width: 51%;
  }

  .union{
    width:37%;
  }
  .creation{
    width: 46%;
  }
  .sound{
    width: 39%;
  }
}/*1100PX*/

@media screen and (min-width: 1200px){
  .juvenate{
    width: 44%;
  }

  .blooming{
    width: 47%;
  }

  .union{
    width:34%;
  }
  .creation{
    width: 43%;
  }
  .sound{
    width: 36%;
  }

  .descr{
    width: 40%;
  }

}/*1200PX*/

@media screen and (min-width: 1300px){
  .juvenate{
    width: 41%;
  }

  .blooming{
    width: 44%;
  }

  .union{
    width:31%;
  }
  .creation{
    width: 39%;
  }
  .sound{
    width: 33%;
  }

  .logo{
    width: 20%;
  }
}/*1300PX*/

@media screen and (min-width: 1400px){
  .juvenate{
    width: 38%;
  }

  .blooming{
    width: 40%;
  }

  .union{
    width:29%;
  }
  .creation{
    width: 37%;
  }
  .sound{
    width: 31%;
  }

  .provavaso{
    width: 32%;
  }

  .descr{
    width: 37%;
  }

}/*1400PX*/

@media screen and (min-width: 1500px){
  .title{
    margin-top: 170px;
  }
  .juvenate{
    width: 35%;
    margin-top: 20px;
  }

  .blooming{
    width: 38%;
  }

  .union{
    width:29%;
  }
  .creation{
    width: 37%;
  }
  .sound{
    width: 31%;
  }

  .logo{
    width: 18%;
    margin-left: 42%;
  }
  .box-foot{
    width: 98%;
    margin: 0 1%;
  }
.contatti{
  width: 71%;
  margin: 30px 0;
}
.icone{
  width: 25%;
  margin:30px 0 30px 4%;
}
}/*1500PX*/

@media screen and (min-width: 1600px){
  .juvenate{
    width: 33%;
  }

  .blooming{
    width: 35%;
  }

  .union{
    width:25%;
  }
  .creation{
    width: 32%;
  }
  .sound{
    width: 27%;
  }

  .logo{
    width: 15%;
  }

}/*1600PX*/



/* - vedere voce menu Visual exhibition (va a capo) (da 600px), a cosa si collegano le voci del menù?
-img carosello (da 600px) appaiono 3 foto insieme invece che una
-aggiungere footer
-da 1600 scrolla in orizzontale

- IMG VASI GRANDEZZA 1000px
-IMG CAROSELLO GRANDEZZA 1920PX*/