@media screen and (orientation: portrait) {
    body {
        width: 100%;
        margin: 0;
        border: none;
    }
    .background {
        position: fixed;
        top: 0%;
        left: 0%;
        right: 0%;
        bottom: 0%;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    .globes {
        position: fixed;
        top: 0%;
        left: 0%;
        -ms-transform: translate(-5%, -0%);
        transform: translate(-5%, -0%);
        width: auto;
        height: 100%;
        z-index: 2;
    }
    .protagonist {
        position: fixed;
        top: 43%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 90%;
        height: auto;
        z-index: 3;
    }
    .btnContinue {
        position: fixed;
        top: 83%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 55%;
        height: auto;
        cursor: pointer;
        z-index: 3;
    }
    .webcam-container {
        display: none;
    }
    .md-modal {
        display: none;
    }
    #webcam {
        display: none;
    }
    #canvas {
        display: none;
    }
    .horizontal {
        display: none;
    }
    .horizontalGlobes {
        display: none;
    }
}

@media (orientation: landscape) {
    body {
        width: 100%;
        margin: 0;
        border: none;
    }
    .background {
        position: fixed;
        top: 0%;
        left: 0%;
        right: 0%;
        bottom: 0%;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    .horizontalGlobes {
        position: fixed;
        top: 0%;
        left: 0%;
        right: 0%;
        bottom: 0%;
        width: 100%;
        height: auto;
        z-index: 2;
    }
    .horizontal {
        position: fixed;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: auto;
        height: 100%;
        z-index: 2;
    }
    .webcam-container {
        display: none;
    }
    .md-modal {
        display: none;
    }
    #webcam {
        display: none;
    }
    #canvas {
        display: none;
    }
    .globes {
        display: none;
    }
    .protagonist {
        display: none;
    }
    .btnContinue {
        display: none;
    }
}