@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
body{
    font-family: 'Roboto', sans-serif;
    font-size:14px;
    background-image: url('../img/deadpool-bg-2k.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width:100%;
    min-height:100vh;
    margin:0;
    padding:0;
}

#fs-btn{
    display:block;
    position:fixed;
    z-index: 2147483647;
    right:0px;
    bottom:0px;
    color:#fff;
    background-color:#990000;
    width: auto;
    height: auto;
    margin:0px;
    padding:.5rem;
}

.fullscreen #fs-btn{
    background-color: #673c39;
    border: 2px solid #f0c14b;
}

#player-holder{
    display:flex;
    flex: auto;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#player{
    width: 100%;
    height: auto;
    padding:0 .5rem;
}

#branding{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#branding img{
    max-width:100%;
    height:auto;
    position: relative;
}

#player iframe{
   width:100%;
}

.close{
    z-index: 2147483647;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    color:#fff;
    background:#900;
    position: absolute;
    top:2.5px;
    right:2.5px;
    font-size:17px;
    font-weight:400;
    text-shadow: black 1px 1px 1px;
    text-align: center;
    box-shadow: 0 0 35px black;
}

.close:hover{
    cursor: pointer;
    font-weight: 700;
    background:#bbb;
}

.card{
    z-index: 2147483600;
    width:auto;
    max-width: auto;
    position:fixed;
    padding:0;
    margin:0;
    overflow: hidden;
    box-shadow: rgba(0,0,0,.25) -8px -8px 30px;
}

.card.upper-right{
    top:0px;
    right:-400px;
}

.card.upper-right.animated{
    right:0px;
}

.card.upper-left{
    left: -450px;
    top:0px;
    box-shadow: rgba(0,0,0,.25) 8px 8px 30px;
}

.card.lower-left{
    left: -450px;
    bottom:0px;
    box-shadow: rgba(0,0,0,.25) 8px 8px 30px;
}

.card.lower-left .close, .card.upper-left .close{
    left: 2.5px;
}

.card.lower-left.animated, .card.upper-left.animated{
    left:0px;
}

.card iframe{
    border:none;
    background: none transparent;
    padding:0;
    margin:0;
    cursor:pointer;
    width: 100%;
    height:100%;
}

#vertical-cards{
    display:block;
    width: 100%;
    height: auto;
    padding:0;
    box-sizing: border-box;
}

body.mobile.vertical #player-holder{
    width:100%;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    padding:0;
}

body.mobile.vertical #player{
    padding:0;
}

.mobile.vertical #vertical-cards{
    display:block;
    min-height: 200px;
    overflow:hidden;
    float:left;
}

#vertical-cards .card{
    position: relative !important;
    width: 100% !important;
    height: 100px !important;
    float:left;
    clear:both;
    box-sizing: border-box;
}

#vertical-cards .card .close{
    box-sizing: border-box;
    left:unset !important;
    right:0px !important;
    top:0px !important;
}

#vertical-cards .card.lower-left .close, #vertical-cards .card.upper-left .close{
    left: unset !important;
    right:0px !important;
    top:0px !important;
}

#vertical-cards .card.lower-left, #vertical-cards .card.upper-left, #vertical-cards .card.lower-right, #vertical-cards .card.upper-right{
    left: unset !important;
    right:unset !important;
    top:unset !important;
}


.mobile.horizontal .card{
    width: 100% !important;
    height: .75in !important;
    box-sizing: border-box;
}

.mobile.horizontal .card.lower-left .close, .mobile.horizontal .card.upper-left .close{
    left: unset !important;
    right:0px !important;
    top:0px !important;
}

/*--FULLSCREEN--*/
body:fullscreen{
    background-image: url('../img/deadpool-bg-2k.jpg') !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: center !important;
    background-size: cover !important;
}

body:fullscreen #player-holder{
    background-image: url('../img/deadpool-bg-2k.jpg') !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: center !important;
    background-size: cover !important;
    width:100%;
    height:100%;
    max-width:100%;
}

body:fullscreen #player-holder .no-fs{
    display:none;
}

body:fullscreen #player-holder #player-video{
    width:100%;
    height:100%;
}

body:fullscreen #player-holder #player{
    width: 100%;
    height: 100vh;
    padding:0;
}

body:-moz-full-screen {
    background-image: url('../img/deadpool-bg-2k.jpg') !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: center !important;
    background-size: cover !important;
}

body:-moz-full-screen #player-holder{
    background-image: url('../img/deadpool-bg-2k.jpg') !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: center !important;
    background-size: cover !important;
    width:100%;
    height:100%;
    max-width:100%;
}

body:-moz-full-screen #player-holder .no-fs{
    display:none;
}

body:-moz-full-screen #player-holder #player-video{
    width:100%;
    height:100%;
}

body:-moz-full-screen #player-holder #player{
    width: 100%;
    height: 100vh;
    padding:0;
}

body:-webkit-full-screen {
    background-image: url('../img/deadpool-bg-2k.jpg') !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: center !important;
    background-size: cover !important;
    width:100%;
}

body:-webkit-full-screen #player-holder{
    background-image: url('../img/deadpool-bg-2k.jpg') !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: center !important;
    background-size: cover !important;
    width:100%;
    height:100%;
    max-width:100%;
}

body:-webkit-full-screen #player-holder .no-fs{
    display:none;
}

body:-webkit-full-screen #player-holder #player-video{
    width:100%;
    height:100%;
}

body:-webkit-full-screen #player-holder #player{
    width: 100%;
    height: 100vh;
    padding:0;
}

body:fullscreen {
    background-image: url('../img/deadpool-bg-2k.jpg') !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: center !important;
    background-size: cover !important;
}

body:-ms-fullscreen{
    background-image: url('../img/deadpool-bg-2k.jpg') !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: center !important;
    background-size: cover !important;
}

body:-ms-fullscreen #player-holder{
    background-image: url('../img/deadpool-bg-2k.jpg') !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: center !important;
    background-size: cover !important;
    width:100%;
    height:100%;
    max-width:100%;
}

body:-ms-fullscreen #player-holder .no-fs{
    display:none;
}

body:-ms-fullscreen #player-holder #player-video{
    width:100%;
    height:100%;
}

body:-ms-fullscreen #player-holder #player{
    width: 100%;
    height: 100vh;
    padding:0;
}

/*-- MANUAL FULLSCREEN --*/
.fullscreen.emulate #player-holder{
    width:100% !important;
    height:100% !important;
    background-image:none;
    background-color:#000;
    align-items: start;
}

.fullscreen.emulate #player-holder .no-fs{
    display:none;
}

.fullscreen.emulate #player{
    width:100% !important;
    padding:0 !important;
}

.fullscreen.emulate #player-video{
    width:100%;
}


/*--RESPONSIVE--*/
@media only screen and (min-width:1280px){
    #player-holder{ max-width:50%; }
    .fullscreen.emulate #player-holder{
        width:100% !important;
        height:100% !important;
        max-width:100% !important;
        background-image:none;
        background-color:#000;
    }
}
@media only screen and (min-width:769px) and (max-width:1279px){
    #player-holder{ max-width:75% !important; }
    #player{ width: 100% !important; max-width:100%; !important}
    #branding img{ width: 100% !important; max-width: 100% !important;}
    .fullscreen.emulate #player-holder{
        width:100% !important;
        height:100% !important;
        max-width:100% !important;
        background-image:none;
        background-color:#000;
    }
}
@media only screen and (max-width: 768px) {
    #player-holder{ width:100% !important; max-width:100% !important; }
    #player{ width: 100% !important; max-width:100%; !important}
    #branding img{ width: 100% !important; max-width: 100% !important;}
    .fullscreen.emulate #player-holder{
        width:100% !important;
        height:100% !important;
        max-width:100% !important;
        background-image:none;
        background-color:#000;
    }
    .card{ width: 100%; }
    .card.lower-left{}
    .card.upper-left{}
    .card.upper-right{}
    .close{ width:35px; height:35px; font-size: 25px; line-height: 35px;}
}