/*
    Dara O'Briain Page Skin
    -----------------------
    - Here we override styles accordingly, including the pseudo element 'body:before'
    - Setting the background position separately means we can move it around
      easily with the breakpoints below.
    - Using a mobile first approach we move/change the background accordingly.
 */

/*
 *  Override breadcrumb colours if they are not visible with new background image
 */

header.hub-title-box .hub-title { color: #000; text-shadow: none; }
.breadcrumbs ol li a, .breadcrumbs ol li { color: #000; }
.breadcrumbs ol li a .icon-home, .breadcrumbs ol li.active { color: #444; }

/*
 *  Override any existing backgrounds
 */
body.theme-1:before, body.theme-2:before, body.theme-3:before,
body.theme-4:before, body.theme-5:before, body.theme-6:before {
    background-image: none;
}
body.theme-1, body.theme-2, body.theme-3,
body.theme-4, body.theme-5, body.theme-6 {
    background-image: none;
}


/*
 *  Set Up Background Images for Each Viewport Size
 */
body {
    background-color: #1c1c1c !important;
    background-image: url('//s3-eu-west-1.amazonaws.com/uktv-refresh/adman_assets/img/dara-obriain-mobile-gradient.jpg') !important;
}
body:before {
    background-image: none !important;
    background-color: #1c1c1c !important;
    background-image: url('//s3-eu-west-1.amazonaws.com/uktv-refresh/adman_assets/img/Dave_brand_page_Dara_OBriain_Mobile_01.jpg') !important;
    background-repeat: no-repeat;
    display: block !important;
}
body figure.brand-hero img {
    visibility: hidden !important;
}
@media (min-width: 560px) {
    body {
        background-image: url('//s3-eu-west-1.amazonaws.com/uktv-refresh/adman_assets/img/dara-obriain-tablet-gradient.jpg') !important;
    }
    body:before {
        background-image: none;
        background-image: url('//s3-eu-west-1.amazonaws.com/uktv-refresh/adman_assets/img/Dave_brand_page_Dara_OBriain_Tablet_01.jpg') !important;
    }
}
@media (min-width: 800px) {
    body {
        background-image: url('//s3-eu-west-1.amazonaws.com/uktv-refresh/adman_assets/img/dara-obriain-desktop-gradient.jpg') !important;
    }
    body:before {
        background-image: none;
        background-color: #ebebe9;
        background-image: url('//s3-eu-west-1.amazonaws.com/uktv-refresh/adman_assets/img/Dave_brand_page_Dara_OBriain_Desktop_01.jpg') !important;
        height: 1200px !important;
    }
}

/*
 *  Episode Guide Moved down to keep image in focus
 */
#episode-guide {
    margin-top: 390px;
}

/*
    Positioning Breakpoints
    -----------------------
    We change the position of the ":before" element
    at the breakpoints below
 */
body.cookie-notice:before {
    margin-top: 75px;
}
body:before {
    margin-top: 55px;
}
@media (min-width: 460px) {
    body.cookie-notice:before {
        margin-top: 75px;
    }
    body:before {
        margin-top: 55px;
    }
}
@media (min-width: 500px) {
    body.cookie-notice:before {
        margin-top: 40px;
    }
    body:before {
        margin-top: 20px;
    }
}
@media (min-width: 640px) {
    body.cookie-notice:before {
        margin-top: 40px;
    }
    body:before {
        margin-top: 20px;
    }
}

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

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

@media (min-width: 800px) {

    body.cookie-notice:before {
        margin-top: 200px;
    }
    body:before {
        margin-top: 180px;
    }
}

@media (min-width: 900px) {
    body.cookie-notice:before {
        margin-top: 135px;
    }
    body:before {
        margin-top: 105px;
    }
}

@media (min-width: 960px) {
    body.cookie-notice:before {
        margin-top: 195px;
    }
    body:before {
        margin-top: 175px;
    }
}

@media (min-width: 1000px) {
    body.cookie-notice:before {
        margin-top: 105px;
    }
    body:before {
        margin-top: 85px;
    }
}