/*
    Red Dwarf XII Page Skin
    -------------------------------
    - Background Image is set in the pseudo element 'body:before'
    - Background Gradient - default image slice already applied to body
 */

/* Re-brand Updates */
/*
#logo a {
    background: url("//s3-eu-west-1.amazonaws.com/uktv-refresh/adman_assets/img/logo-white.png") repeat scroll 0 0 / 132px 69px rgba(0, 0, 0, 0);
    height: 69px;
}

@media (min-width: 800px) {

    #logo a {
        background: url("//s3-eu-west-1.amazonaws.com/uktv-refresh/adman_assets/img/logo-white.png");
        background-size: 215px 110px;
        height: 110px;
    }

}
*/
.head-wrap {
    background-color: transparent !important;
}

body.theme-1 {
    background-image: none !important;
}


/* Hide brand page image, but preserve its aspect ratio */

body figure.brand-hero img {
    visibility: hidden;
}


/* Override existing backgrounds and set up new ones */

body {
    background-color: #000000 !important;
}
body:before {
		background-image: none;
		background-repeat: no-repeat;
		background-image: url('//s3-eu-west-1.amazonaws.com/uktv-adman/adman_assets/img/dave_reddwarf_xii_mobile.jpg') !important;
		background-color: #000000 !important;
		height: 770px;
}
@media (min-width: 600px) {
    body:before {
        background-image: none;
        background-image: url('//s3-eu-west-1.amazonaws.com/uktv-adman/adman_assets/img/dave_reddwarf_xii_tablet.jpg') !important;
        background-color: #000000 !important;
		height: 1550px;
    }
}
@media (min-width: 800px) {
    body:before {
        background-image: none;
        background-image: url('//s3-eu-west-1.amazonaws.com/uktv-adman/adman_assets/img/dave_reddwarf_xii_desktop.jpg') !important;
        background-color: #000000 !important;
		height: 1400px;
    }
}


/*
 *  Episode Guide Moved down to keep image in focus
 */
@media (min-width: 1000px) {
    #episode-guide {
        margin-top: 390px;
    }
}



/*
    Positioning Breakpoints
    -----------------------
    Positioning the background is set across multiple media
    queries to keep it looking good and in the right place:
 */

body.cookie-notice:before   { margin-top: 70px; }
body:before                 { margin-top: 50px; }

@media (min-width: 480px) {
    body.cookie-notice:before   { margin-top: 70px; }
    body:before                 { margin-top: 50px; }
}

@media (min-width: 600px) {
    body.cookie-notice:before   { margin-top: -140px; }
    body:before                 { margin-top: -160px; }
}

@media (min-width: 800px) {
    body.cookie-notice:before   { margin-top: 120px; }
    body:before                 { margin-top: 100px; }
}


@media (min-width: 900px) {
    body.cookie-notice:before   { margin-top: 120px; }
    body:before                 { margin-top: 100px; }
}
@media (min-width: 1000px) {
    body.cookie-notice:before   { margin-top: 0px; }
    body:before                 { margin-top: -20px; }
}