/* ifame 560x315 - ratio 315/560=56.25 */

*  {box-sizing:border-box;}
.riga { padding: 10px 20px; }

.testo{
       text-align:center;
       padding: 40px;
       box-sizing:border-box;
       font:14px Arial;
       height:315px;
       overflow-y:auto;  
       background-color: #f7f7f7;
}

.testo a {
    color:#B9155D;                 /* Rosso porpora per le ancore */
    font:bold 16px Arial;
    text-decoration:none;
}

video { border-radius: 10px; }

/* Gli elementi della riga */

.sx {width: 50%; float:right; box-sizing: border-box;}
.ct {width: 2%;  float:right; padding:20px 3px 0 0; box-sizing: border-box;}
.dx {width: 48%; float:right; box-sizing: border-box;}

@media only screen and (max-width: 1100px) {
    .testo {font-size:13px;border:0px solid green;}
    .testo a {font-size:15px;}
    .sx {width: 40%;}
    .dx {width: 58%;}

}

@media only screen and (max-width: 1000px) {
    #testo {font-size:12px;padding:15px;border:0px solid red;}
    #testo a {font-size:14px;}
    .sx {width: 30%;}
    .dx {width: 68%;}

}

@media only screen and (max-width: 900px) {
    .testo {font-size:11px;
            border:0px solid yellow;
            height:236px;
            padding:10px;}
            .testo a {font-size:13px;}
    .riga video{width:420px; height:236px;}  /* video 75% pił piccolo */
    .sx {width: 45%;}
    .dx {width: 53%;}

}

@media only screen and (max-width: 800px) {
    .testo {font-size:10px;
            border:0px solid blue;
            height:204px;
            padding:5px;}
            .testo a {font-size:12px;}
    .riga video{width:364px; height:204px;}  /* video 65% pił piccolo */
    .sx {width: 45%;}
    .dx {width: 53%;}

}

@media only screen and (max-width: 700px) {
    .testo {font-size:14px; 
            border:0px solid pink;
            padding:20px;
            height:auto;}
            .testo a {font-size:16px;}
    .riga video{width:560px; height:315px;}  /* torna al 100% */
    .sx {width: 100%;}
    .ct {width: 100%; height:20px;}
    .dx {width: 100%; background:#fff;text-align:center;}

}

@media only screen and (max-width: 600px) {
    /* For mobile phones: */
    .testo {font-size:11px; 
            border:0px solid grey;
            padding:10px;}
            .testo a {font-size:13px;}
    .riga video {width:420px; height:236px;}  /* 75% */
}

@media only screen and (max-width: 500px) {
    /* Per sfigati: */
    .testo {font-size:10px; 
            border:0px dotted grey;
            padding:10px;}
            .testo a {font-size:12px;}
    .riga video{width:336px; height:189px;}  /* 60% */

} 

@media only screen and (max-width: 400px) {
    /* Per sfigatissimi: */
    .testo {font-size:10px; 
            border:0px solid black;
            padding:10px;}
            .testo a {font-size:12px;}
    .riga video{width:224px; height:126px;}  /* 40% */

}

@media only screen and (max-width: 300px) {
    /* Per ultra-sfigatissimi: */
    .testo {font-size:10px; 
            border:0px solid black;
            padding:10px;}
            .testo a {font-size:12px;}
    .riga video{width:168px; height:94px;}  /* 30% */

}