html, div, body {
    box-sizing: border-box;
    font-family: 'Lato', sans-serif, Verdana, Arial;
    font-size: inherit;
    border: none;
    padding: 0;
    margin: 0;
}

.container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    background: black;
}

.container-player, .container-chat {
    position: absolute;
    transition: all ease-in-out .3s;
}

.btn-expand {
    font-family: 'FontAwesome';
    position: absolute;
    padding: 0;
    margin: 0;
    color: white;
}

@media (orientation: portrait) {

    .container-player {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .container-chat {
        width: 100%;
        height: 50%;
        top: 100%;
        left: 0;
    }

    .btn-expand {
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2em;
    }

        .btn-expand:after {
            content: '\f077'
        }

    .chat-expanded .btn-expand {
        transform: translateY(100%);
    }
    .chat-expanded .btn-expand:after {
        content: '\f078'
    }

    .chat-expanded .container-player {
        height: 50%;
    }

    .chat-expanded .container-chat {
        top: 50%;
    }

    /*.chat .container-player > iframe {
        height: calc(100% - 2em) !important;
    }*/
}

@media (orientation: landscape) {
    .container-player {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .container-chat {
        width: 30em;
        height: 100%;
        top: 0;
        left: 100%;
        border-left: 1px solid #212121;
    }

    .btn-expand {
        top: 0;
        right: 0;
        width: 2em;
        height: 100%;
    }

        .btn-expand:after {
            content: '\f053'
        }
    .chat-expanded .btn-expand {
        transform: translateX(100%);
    }

    .chat-expanded .btn-expand:after {
        content: '\f054'
    }

    .chat-expanded .container-player {
        width: calc(100% - 30em);
    }

    .chat-expanded .container-chat {
        left: calc(100% - 30em);
    }


    /*.chat .container-player > iframe {
        width: calc(100% - 2em) !important;
    }*/
}