/* ORIENTATION RULEZ */
@media (orientation:landscape){
    html, body{ background-image: none }
    video{ min-width: unset; min-height: 100%; }
    .content{ 
        bottom: 0;
        right: 0;
        position: fixed;
        bottom: initial;
        width: 50vw;
        text-align: right;
        height: auto;
        opacity: 0;
   }
   /*video:hover ~ .content{ opacity: 1; transition: .3s; }*/
   .content:hover{ opacity: 1; transition: .3s; }
   .content > hr { display: none; }
   .legendText { width: auto; height: auto; }
   .guiVideoBtns{ bottom: 0 }
}
@media (orientation:landscape) and (min-width: 768px){
    .legendHeader::after{ content: " - " }
    .content > h3{ display: inline; line-height: 3rem; }
}


/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
@media (max-width: 768px) { 
    .content { 
        top: calc(100% / 3);
        height: calc(100% / 1.7);
        /*padding-top: 1rem;*/
        /*color: red;
        /*overflow-y: auto; padding: .5rem;*/
    }
    .content > hr { max-width: 70% }
}
@media (max-width: 768px) and (orientation:landscape) { 
    .content { 
        top: 0;
        height: 100vh;
        /*padding-top: .5rem;*/
    }
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    .legendText{ font-size: 0.7rem } 
}

/* esempio ipad in modalità verticale ha il testo troppo in basso */
@media (min-width: 768px) and (orientation:portrait){ 
    .content{ padding-bottom: 25vh; width: unset; } /* TODO: vedere se tenere di default questa proprietà width responsive senza includerla nel css base*/
    .legendText{ font-size: 1rem;   width: 100%; }
}

/* Medium devices (desktops, 992px and up) */
/* @media (min-width: 992px) {  .legendText{ font-size: 0.8rem }  } */

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
    .legendText{ font-size: 1rem } 
}


/* PIU DI 21:9 : riduci la dimensione del video e piazzalo a sinistra */
@media (min-aspect-ratio: 21.1/9) and (orientation: landscape) {
    video{ 
        max-width: unset;
        width: 60%;
        left:0;
    }
    #toggleInfoBtn{ left: calc(65% - 5rem) }
    #togglePlayBtn{ left: calc(65% - 2.5rem) }
    #toggleFullscreenBtn{ left: 65% }
    .content{ height: 70vh }
}