/*  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: rgba(234, 158, 176, 0.382);
    width: 520px;
    margin-left: 2px;
    padding-bottom: 500px;
    /*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: +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;
    }

    

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