



/* ----------- 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) {
    #video {
        display: none;
    }
    #rotateBtn {
        display: none;
    }
    footer {
        display: none;
    }
    /*#imgIcon {
        display: inline;
    }*/
}


/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
#wrapper {
        width: 304px;
        height: auto;
        /*height: 460px;*/
    }
    #video_container {
        width: 100%;
        max-width: 304px;
        height: 304px;
        /*height: auto;*/
        background: #fff;
    }
    #canvas,
    #lipstick,
    #eyeshadow,
    #holder,
    #holder canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 304px;
        height: 304px;
    }
}
}

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
 #wrapper {
        width: 198px;
        height: 100%;
        /*height: 460px;*/
    }
    #video_container {
        width: 100%;
        max-width: 198px;
        height: 198px;
        /*height: auto;*/
        background: #fff;
    }
    #canvas,
    #lipstick,
    #eyeshadow,
    #holder,
    #holder canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 198px;
        height: 198px;
    }
}


/* ----------- 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) {
    #video {
        display: none;
    }
    #rotateBtn {
        display: none;
    }
    footer {
        display: none;
    }
    /*#imgIcon {
        display: inline;
    }*/
}

/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    #wrapper {
        width: 304px;
        height: auto;
    }
    #video_container {
        width: 100%;
        max-width: 304px;
        height: 304px;
        /*height: auto;*/
        background: #fff;
    }
    #canvas,
    #lipstick,
    #eyeshadow,
    #holder,
    #holder canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 304px;
        height: 304px;
    }
}


/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    #wrapper {
        width: 198px;
        height: auto;
    }
    #video_container {
        width: 100%;
        max-width: 198px;
        height: 198px;
        /*height: auto;*/
        background: #fff;
    }
    #canvas,
    #lipstick,
    #eyeshadow,
    #holder,
    #holder canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 198px;
        height: 198px;
    }
}


/* ----------- 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) {
    #video {
        display: none;
    }
    #rotateBtn {
        display: none;
    }
    footer {
        display: none;
    }
    
   /* #imgIcon {
        display: inline;
    }*/
}


/* Portrait */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: portrait) {
    #wrapper {
        width: 100%;
        height: auto;
    }
    #video_container {
        width: 100%;
        max-width: 198px;
        height: 198px;
        background: #fff;
    }
    #canvas,
    #lipstick,
    #eyeshadow,
    #holder,
    #holder canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 198px;
        height: 198px;
    }
}


/* Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: landscape) {
    #wrapper {
        width: 100%;
        height: auto;
    }
    #video_container {
        width: 100%;
        max-width: 304px;
        height: 304px;
        /*height: auto;*/
        background: #fff;
    }
    #canvas,
    #lipstick,
    #eyeshadow,
    #holder,
    #holder canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 304px;
        height: 304px;
    }
}


/* ----------- iPads ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .row {
        max-width: 420px;
    }
    #video {
        display: none;
    }
    #rotateBtn {
        display: none;
    }
    footer {
        display: none;
    }
    #wrapper {
        width: 420px;
        height: auto;
        /*height: 958px;*/
    }
    #video_container {
        width: 100%;
        width: 420px;
        height: 420px;
        background: #fff;
    }
    #canvas,
    #lipstick,
    #eyeshadow,
    #holder,
    #holder canvas {
        position: absolute;
        top: 0;
        left: 0;
        max-width: 420px;
        max-height: 420px;
    }
    #spinnerOverlay {
        max-width: 420px;
        max-height: 420px;
    }
    /*#imgIcon {
        display: inline;
    }*/
}
