/*
 * version 3.2 build 08/11/2015 by tienquang
 * 
 * support landscape view
 */

.rotate-notify {
    display: none;
}

.landscape {
    width: 720px;
    max-height: 400px;
    // height: 105vh;    

    & .rotate-notify {
        text-align: center;
        font-size: 12px;
        color: #fff;
    }

    & .view-mode {
        display: none;
        width: 100%;
        text-align: center;
        padding: 8px;
        color: #fff;
        &.landscape-mode {
            background: red;
        }
        &.portrait-mode {
            background: blue;
        }
    }

    & .main {
        max-height: 400px;
        // min-height: 400px;
        height: 100%;
        & .overlay-over {
            & img {
                max-width: 64px;
            }
        }
        & .info-user {
             & img {
                 max-width: 64px;
                 height: auto;
             }
         }
    }

    & .player {
        & .jwplayer, & .jwmain, & .jwvideo {
            display: block;
            width: 100%;
            // min-height: 400px;
            max-height: 400px;
            height: 100%;            
            // height: calc(100%);
            // height: 400px;
            // position: relative;
        }
        & video, & object, & embed {
            -moz-transform: none !important;
            -ms-transform: none !important;
            -o-transform: none !important;
            -webkit-transform: none !important;
            transform: none !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            top: 0 !important;
            height: 100% !important;
            width: 100% !important;
            // min-height: 400px;
            // max-height: 400px;
            // position: absolute !important;
        }
    }

}

@media screen and (orientation: portrait) {
    .landscape {
        .rotate-notify {
            display: block;
        }
        .view-mode2 {
            &[class*=landscape] {
                display: none;
            }
            &[class*=portrait] {
                display: block;
            }
        }
        .overlay-over {
            a { padding: 4px !important;
                img { width: 100%; }
            }
        }          
    }
}

@media screen and (orientation: portrait) and (min-width:720px) {
    .landscape {

    }
}

@media screen and (orientation: portrait) and (max-width:720px) {
    .landscape {
        /*
        & video, object {
            -o-object-fit: fill;
            object-fit: fill;
        }*/
        & .main, & .player {
            /*min-height: 400px;
            max-height: 100%;
            border: 1px solid red;*/
        }
        & video, & object, &embed {
            -o-object-fit: fill;
            object-fit: fill;
        }
    }
}

@media screen and (orientation: landscape) {
    .landscape {
        & .rotate-notify {
            display: none;
        }
        & .view-mode2 {
            &[class*=landscape] {
                display: block;
            }
            &[class*=portrait] {
                display: none;
            }
        }
        & video, & object, &embed {
            -o-object-fit: fill;
            object-fit: fill;
        }
    }
}

@media screen and (orientation: landscape) and (max-width: 720px) {
    .landscape {
        & .header, & .footer {
            display: none;
        }        
    }
}

@media screen and (orientation: landscape) and (min-width: 720px) {
    .landscape {
         & .main, & .player {
            /*max-height: 400px;
            min-height: 100vh;
            border: 1px solid red;*/
        }
    }
}

@media screen and (min-width: 720px) {
    .landscape {

    }
}

@media screen and (max-width: 720px) {
    .landscape {
        width: 100%;
        & video, & object {
            width: 100% !important;  
        }    
    }
}

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
/*
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
     .landscape {
        & .player, & .main {
            display: block !important;
            width: 100%;
            height: 100% !important;
            border: 2px solid blue;
            position: relative;

            & span {
                display: block !important;
                width: 100%;
                height: 100% !important;
                position: relative;
            }
        }
    }
}
*/

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
/*
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
     .landscape {
        & .player, & .main {
            display: block !important;
            width: 100%;
            height: 100vh !important;
            border: 2px solid red;
            position: relative;

            & span {
                display: block !important;
                width: 100%;
                height: 100vh !important;
                position: relative;
            }
        }
    }
}
    */

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
/*
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
     .landscape {
        & .player, & .main {
            display: block !important;
            width: 100%;
            height: 100vh !important;
            border: 2px solid red;
            position: relative;

            & span {
                display: block !important;
                width: 100%;
                height: 100vh !important;
                position: relative;
            }
        }
    }
}
    */

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
/*
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
     .landscape {
        & .player, & .main {
            display: block !important;
            width: 100%;
            height: 100vh !important;
            border: 2px solid red;
            position: relative;

            & span {
                display: block !important;
                width: 100%;
                height: 100vh !important;
                position: relative;
            }
        }
    }
}
    */

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}