/*  dar  attenzione : verde SOLO PER COMMENTO ....
     css : selettore {}, proprieta : e valori (separati da ;) 
 # prima degli ID, UNIVOCO per elemento e fra tutti gli elem !!!
 . prima della classe , ripetibile su piu elementi, 
   separandoli con uno spazio se multipli sulla stessa riga
                   :hover {
                    background: yellow
           
absolute : scorre insieme al resto del box
            background-image: linear-gradient(rgb(0, 208, 255), red);
occhio : a sfondo e altro in @media....

RISPETTARE ordine elementi html su CSS, es."cont.supremo" dopo logo,
    altrim non 'sente' i suoi parametri !!! 

/*  - sotto diventa giallo mouse >*/

* {
  transition: all 2s ease 0.2s;
}

#LogoVittoriaB {
  background-color: blank;
  width: 400px;
  position: relative;
  top: 0px;
  left: 0px;
  border-style: none;
}

#contenitore-supremo {
  background-color: rgb(234, 158, 176, 0.382);
  width: 520px;
  height: 2238px;
  margin-left: 5px;
  padding-bottom: 120px;
  /*per colorare rosa dopo ultimo quadro ??? */
}

/* qui foto qua0 iniziale*/
.boximg {
  position: relative;
  margin-left: 2px;
  top: +100px;
  width: 445px;
  height: 300px;
  padding-left: 15px;
  opacity: 0.6;
}

.testoVitt {
  font-size: 12pt;
  position: absolute;
  top: +40px;
  margin-left: 10px;
  /*text-align: center;*/
  padding-left: 15px;
  color: rgb(6, 23, 121);
  font: bold 16px/25px helvetica, sans-serif;
  letter-spacing: +1px;
  opacity: 0.9;
}

.testoMail {
  position: absolute;
  bottom: -127px;
  margin-left: 18px;
  /*text-align: center;*/
  padding: 0px;
  color: rgb(6, 23, 121, 0.94);
  font: bold 14px/25px helvetica, sans-serif;
  letter-spacing: +1px;
  opacity: 0.9;
  padding-left: 20px;
}
/* sottoclasse 'hover:' */

.testoMail:hover {
  background-color: yellow;
}

#TitoloMemorial {
  position: relative;
  width: 450px;
  top: 300px;
  left: 0px;
  color: brown;
  font: bold 14px/25px helvetica, sans-serif;
  font-size: 20px;
  text-align: center;
  padding: 55px, 65px, 45px, 45px;
  opacity: 0.6;
}

/*#TitoloMemorial:hover {
        background-color: yellow;
    }*/

#Volantino {
  position: relative;
  padding-left: 60px;
  width: 450px;
  top: 170px;
  color: brown;
  background-color: rgba(234, 158, 176, 0.382);
  font-size: 18px;
  text-align: center;
}

/**/

.testospan {
  width: 450px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  position: relative;
  bottom: 0px;
  left: 2px;
  margin-top: 0px;
  padding-left: 0px;
}

.foto {
  background-color: rgba(234, 158, 176, 0.382);
  width: 520px;
  height: 300px;
  margin-top: 300px;
  padding-top: 70px;
  padding-bottom: 130px;
}
.foto2insu {
  background-color: rgba(234, 158, 176, 0.382);
  height: 300px;
  width: 520px;
  margin-top: -10px;
  padding-top: 0px;
  padding-bottom: 165px;
}

.imgPartecipanti {
  position: relative;
  float: left;
  margin-left: 80px;
  top: 10px;
  width: 320px;
  height: auto;
  transition: all 1s ease;
  padding-left: 0px;
  padding-bottom: 20px;
}

.imgPartecipanti:hover {
  width: 300px;
  height: 420px;
  /* prova con 15% in piu (di 400..) - max-width:??%;
            height:320px;
        */
}

.Classifica {
  position: relative;
  bottom: -100px;
  left: 15px;
  top: 0px;
  width: 400px;
  height: 500px;
  padding: 10px 10px 10px 10px;
  font-size: 20px;
  transition: all 1s ease;
  padding-left: 0px;
}

.Classifica:hover {
  width: 460px;
  /* prova con 15% in piu (di 400..) - max-width:480%;*/
  height: auto;
}

.video {
  float: none;
  position: relative;
  top: +120px;
  left: 0px;
  margin-left: 10px;
  width: 100%;
  height: 85%;
}

.sponsor {
  font-size: 10px;
}

/* adattamento iphone * 5h 49m -- max=fino a...
        (oltre max fino a min=neutro) -- oltre min ...
    con imglarg <=400 di @media, la visione è ok su iphone 12
    con imglarg  >400 si spezza ...16/04/23...
    con imglarg =200 ok completa MA dimezza larghezza foto
    determinare con prove rapporto medio fra wid/heig in bse ai quadri


        @media screen and (max-width: 600px) {   
            body   {
                    background-color: rgb(234, 158, 176, 0.382);
               
*/

@media screen and (max-width: 670px) {
  .imgPartecipanti {
    width: 250px;
    height: 350px;
    background-color: rgb(234, 158, 176, 0.382);
    padding: 2px;
    left: -5px;
  }

  .imgPartecipanti :hover {
    position: relative;
    bottom: -100px;
    left: 5px;
    top: 10px;
    width: 360px;
    height: 260px;
    padding: 10px 10px 10px 0px;
    font-size: 20px;
    transition: all 1s ease;
    padding-left: 0px;
  }

  .Classifica {
    position: relative;
    bottom: -100px;
    left: 15px;
    top: 0px;
    width: 400px;
    height: 500px;
    padding: 0px 0px 0px 0px;
    font-size: 20px;
    transition: all 1s ease;
    padding-left: 0px;
  }

  .testospan {
    color: rgb(60, 0, 255);
    margin-left: 10%px;
    margin-right: 5px;
    margin-bottom: 10px;
    text-align: left;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
  }

  #video {
    float: none;
    position: relative;
    bottom: -120px;
    left: 15px;
    margin-left: 50px;
    width: 100%;
    height: 100%;
    height: 85%;
  }

  div.style {
    width: 100%;
    float: none;
    background-color: rgb(234, 158, 176, 0.382);
  }
}

/*  sotto non so se attiva..qualcosa 160423

@media screen and (orientation:portrait) and (min-width:481px)
{    
    html,body
    {
        
        width: 480px;
        min-width: 470px;
        margin: 0px;
        overflow-x:hidden;  
    }
}

*/
@media screen and (min-width: 670px) {
  .imgPartecipanti {
    width: 290px;
    height: 360px;
    background-color: rgb(234, 158, 176, 0.382);
    padding: 0px;
    left: -5px;
  }

  .imgPartecipanti :hover {
    position: relative;
    bottom: -100px;
    left: 5px;
    top: 10px;
    width: 360px;
    height: 260px;
    padding: 10px 10px 10px 0px;
    font-size: 20px;
    transition: all 1s ease;
    padding-left: 0px;
  }

  .Classifica {
    position: relative;
    bottom: -100px;
    left: 15px;
    top: 0px;
    width: 400px;
    height: 500px;
    padding: 0px 0px 0px 0px;
    font-size: 20px;
    transition: all 1s ease;
    padding-left: 0px;
  }

  .testospan {
    color: rgb(60, 0, 255);
    margin-left: 55px;
    margin-right: 5px;
    margin-bottom: 10px;
    text-align: left;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
  }

  #video {
    float: none;
    position: relative;
    bottom: -120px;
    left: 15px;
    margin-left: 50px;
    width: 100%;
    height: 100%;
    height: 85%;
  }

  div.style {
    width: 100%;
    float: none;
    background-color: rgb(234, 158, 176, 0.382);
  }
}