/* ! base style */

* {
  box-sizing: border-box; /* mette il bordo come ultimo elemento del box */
  margin: 0;
  padding: 0;
  background-color: black;
}
body {font-family: 'Avenir Next', 'Helvetica', 'Times New Roman'; color: white;}
a {text-decoration: none;}




/* WORKS */

.container-griglia{
  height: 1800px;
}

.griglia {
  z-index: 0;
  width: 100%;
  position: relative; top: 150px;
  padding: 0px 10px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-template-rows: repeat(6, auto);
  row-gap: 0px;
  column-gap: 10px;
}

/* stile griglia complessiva*/
.works {
  display: block;
  width: 100%;
}

/* Stile delle scritte che appaiono quando il mouse passa sulle immagini */
.image__overlay{
  position: relative; bottom: 555px;
  width: 100%;
  height: 100%;
  background: transparent;
  display: block;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
}
.image__overlay:hover{
  opacity: 1;
}

a{
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}

.image__title{
  font-weight:normal;
  font-size: 25px;
  text-align: center;
  position: relative;top:200px;
  background-color: transparent;
}

.image__description{
  font-size: 15px;
  position: relative; top: 220px;
  text-align: center;
  background-color: transparent;
  font-weight: lighter;
}

/* mediaquery WORKS: griglia con immagini e overlat di testo */
@media (max-width: 768px) {

  .image__overlay{
    display: none;
  }

  .griglia {
    width: 100%; height:100%;
    position: relative;
    padding: 0 0;
    text-align: center;
    grid-template-columns: repeat(1, auto);
    }
}




/* REELS */

.showreel{
  display: block; /* la versione pc viene mostrata */
  position: relative; top: 100px;
  margin: 0 auto;
  margin-bottom: 50px;
  display: table;
  height: 800px;
  border:none;
}
.showreel iframe {
  position:relative;
  margin:auto;
  float: none;
  box-sizing: border-box;
  border:none;
}

.showreel-responsive{
    display: none;}
    /* la versione responsive NON viene mostrata */

/* ! mediaquery showreel*/
@media (max-width: 768px) {

  .showreel,
  .showreel iframe {
    display:none; /* la versione pc NON viene mostrata */
  }

  .showreel-responsive{
      display: block; /* la versione responsive viene mostrata */
      position:relative; top: 100px;
      padding-bottom:100%;
      padding-top: 250px;
      border:none;
  }
  .showreel-responsive iframe{
      position:absolute;
      left:0;
      top:0;
      height:100%;
      width:100%;
      border:none;
  }

}


/*SERVICES */

/* VERSIONE PC
lista-services non viene visualizzato */
.lista-services{
  display:none
}

.main {
    position: relative;
    top: 100px;
    margin-bottom: 200px;
    background-color: transparent;
}
.p-titolo {
  margin-bottom: 30px;
  font-size: 28px;
  font-style: bold;
  letter-spacing: 3px;
  text-align: justify left;
  opacity: 90%;
}
.p-services {
  margin-top: 30px;
  font-size: 18px;
  font-weight: 100;
  text-align: justify;
  opacity: 60%;
}


.row {
    display: flex;
    gap: 80px;
    margin: 100px 200px;
}


/* ! mediaquery services */
@media (max-width: 768px) {

/* main con righe e colonne non viene visualizzato */
  .main {
    display: none;
  }

  .lista-services {
  display: block;
  position: relative; top: 130px; bottom:30px;
  margin:15px;

  list-style: none;

  }

  .p-titolo{
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 500;
    font-style: bold;
    letter-spacing: 3px;
    text-align: justify ;
  }

  .p-services {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 100;
    line-height: normal;
    text-align: justify;
  }

  .blocco {
    list-style: none;
    margin: 30px;
  }

}


/* ! ABOUT */

/* Contenitore generale */
.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
    padding-top: 150px;
}


/* proprietà animazione immagini */
.fade {
    animation-name: fade;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
    animation-direction: alternate;
}

@keyframes fade {
    from {opacity: 50%;}
    to {opacity: 100%;}
}


/* Bottoni avanti-indietro */

.buttons-container{
  position: relative;
  bottom: 400px;
  background-color: transparent;
  text-align: center;
}
  .prev,
  .next {
        cursor: pointer;
        position:relative;
        width: auto;
        padding: 10px;
        color: white;
        opacity: 60%;
        font-weight: lighter;
        font-size: 40px;
        transition: 0.4s ease;
        background-color: transparent;
        text-align: center;
    }

    /* Posizione di ciascun bottone, in modo che stiano fuori dalle immagini */
    .next {
      position: relative;
      left:550px;
    }
    .prev {
      position: relative;
      right:550px;
    }


/* DOTS */
  .dot {
      cursor: pointer;
      color: white;
      opacity: 60%;
      height: 10px;
      width: 10px;
      margin: 10px;
      margin-top: 40px;
      background-color: white;
      border-radius: 50%;
      display: inline-block;
      transition: 0.4s ease;
  }

  /* ! mediaquery contenitore slideshow: immagini, bottoni, dots */
  @media (max-width: 768px) {

    .slideshow-inner,
    .slideshow-container img{
      width: 100%;
      height: inherit;
      text-align: center;
      }

    /* nella versione responsive visualizziamo solo l'animazione automatica delle immagini*/
    .buttons-container,
    .dot {
      display: none;
    }
  }


/* Testo */

.langWrap{
  text-align: center;
  width:100%;
  padding: 3px;
  position: relative; top:30px;
  opacity: 70%;
}

a{
  color: white;
  text-decoration: none;
  padding: 0 15px;
}
a.active{
  text-decoration: underline;
}

.content{
  margin-top:20px;
}

  h3.title{
    font-size: 36px;
    font-weight: 650;
    font-style: normal;
    letter-spacing: 3px;
    margin-top: 10px;
  }

  h5.description {
    padding: 25px 0px;
    font-size: 25px;
    font-weight: 200;
    line-height: 40px;
    letter-spacing: 0px;
    position: relative; top: 0px;
    text-align: justify;

  }

  /* ! mediaquery testo */
  @media (max-width: 768px) {
    h3.title {font-size: 29px;}
    h5.description {font-size: 16px; padding: 20px; line-height: 25px;}
  }



/* CONTACTS */

/* mappa */
.google-maps{
  position: relative;
  padding: 12%; /* Definisco l'aspect ratio */
}

.google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter:grayscale(100%);
}

.map-responsive{
  display:none; /*la versione responsive non viene mostrata */
  position:relative;
  float: inherit;
  padding-bottom:100%;
  padding-top: 100px;
  overflow:hidden;
  height:0;
}
.map-responsive iframe{
  display:none;
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:100%;
  filter:grayscale(100%);
}

/* ! mediaquery mappa */
@media (max-width: 768px) {
  .google-maps,
  .google-maps iframe {display:none;}

  .map-responsive,
  .map-responsive iframe {display: block;}
}



/* testo */
.info{
  text-align: center;
  width:100%;

  background-color: black;
  position: relative; top:10px;
  color: white;
  display: block;
  z-index: 1;
}

  h2{
    font-size: 32px;
    font-style: normal;
    letter-spacing: 1px;
    background-color: black;
    margin-top: 30px;
  }

 p.p-info {
    text-align: center;
    font-size: 18px;
    line-height: 35px;
    letter-spacing: 1px;
    position: relative; top: 20px; left: 8px;
    color: white;
  }

/* ! mediaquery testo */
@media (max-width: 768px) {
  h2 {
    font-size: 15px;
    margin: 0px;
  }
  p.p-info{
    font-size:12px;
    line-height: 25px;
    margin: 0px;
  }
}

/* social media: img, link pagine esterne */
.social{
  text-align: center;
}

.social li{
  display: inline-block;
  padding: 20px;
  position: relative;top: 60px;
}

/* ! mediaquery social */
@media (max-width: 768px) {
  img.social {
    width: 30px;
    height: 30px;
  }
}
.social li{
  padding:5px;
  position: relative; top: 40px;
}



/* FOOTER: valido per tutte le pagine */

.footer{
position:fixed bottom;
width:100%;
height: 100%;
margin-top: 150px;
padding-left: 15px;
padding-bottom: 10px;
color: white;
opacity: 30%;
background-color: transparent;
clear: both;
}

/* mediaquery footer */
@media (max-width: 768px) {
  .footer {
    width:100%;
    height: 100%;
    padding-left: 10px;
  }

  .footer p {
    font-size: 12px;
    letter-spacing: 1px;
  }

}

/* ! codice che resetta il padding in modo che sia all'interno degli elementi
 per non avere sovrapposizione degli elementi */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}