/*  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: 520px;
  position: relative;
  top: 0px;
  left: 0px;
  border-style: none;
}

#contenitore-supremo {
  margin-top: -150px;
  background-color: rgba(234, 158, 176, 0.382);
  width: 520px;
  margin-left: 2px;
  padding-bottom: 5px;
  /*per colorare rosa dopo ultimo quadro*/
}

/* qui foto qua0 iniziale*/
.boximg {
  background-color: rgba(234, 158, 176, 0.382);
  position: relative;
  margin-left: 2px;
  top: +100px;
  width: 445px;
  height: 300px;
  padding-left: 15px;
  opacity: 0.6;
}

.testoVitt {
  font-size: 12pt;
  position: absolute;
  top: +140px;
  width: 520px;
  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: relative;
  top: 80px;
  width: 540px;
  margin-left: 18px;
  margin-right: 1px;
  /*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;
}

#TestataQuadri {
  position: relative;
  color: brown;
  top: +50px;
  width: 440px;
  left: 0px;
  margin-left: 20px;
  font-size: 24px;
  text-align: left;
  padding-bottom: 20px;
}

#TestataQuadri:hover {
  background-color: yellow;
}

/*   in giu stessi parametri */

.Web5 {
  width: 450px;
  height: 250px;
  color: rgb(6, 23, 121);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  position: relative;
  bottom: -220px;
  left: 5px;
  margin-top: 40px;
  padding-left: 20px;
  padding-bottom: 310px;
}
.imglarg {
  position: relative;
  bottom: -100px;
  left: 5px;
  top: 10px;
  width: 400px;
  padding: 10px 10px 10px 0px;
  font-size: 20px;
  transition: all 1s ease;
  padding-left: 0px;
}

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

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

/* 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: 600px) {
  .imglarg {
    width: 400px;
    height: 520px;
    background-color: rgb(234, 158, 176, 0.382);
    padding: 0px;
    left: -5px;
  }

  .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);
  }
}

/*  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: 600px) {
  .imglarg {
    width: 400px;
    height: 520px;
    background-color: rgb(234, 158, 176, 0.382);
    padding: 0px;
    left: -5px;
  }

  .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);
  }
}