/* 
looks like a few things don't work great (responsive) as the responsive aspect of changing amount of columns etc.
at different breakpoints is maybe no longer being applied due to bypassing the sass files and working directly on the
css files instead.  whilst some sass files are present in assets folder there was no intro or guidance when I took
over this site and without knowing how the original developer built the site (what tools, gulpfile etc) updating the 
css directly was the quickest and easiest (and possibly only) way to get changes done
*/

/* so need to make some new rules to help with responsive presentation, e.g. chaning multi-column rows to singles etc such as cast and crew border-image-outset: */


/* Add updates for the Cast and Crew bios to give better presentation for mobile */

@media screen and (max-width: 800px) {

    .box.bio {
        width: 90%;
        padding-top: 2.5em;
        padding-bottom: 1em;
    }

    .feature {
        padding: 20px 0 20px;
    }

    .feature .row.\32 00\% {
        margin: 0 0px -1px -20px;
    }

    .feature .row.\32 00\25 {
        margin: 0;
    }

    .feature .row.\32 00\25 > * {
        padding: 40px 0 0 0;
    }

    .feature .\34 u, 
    .feature .\34 u\24 {
        width: 100%;
    }

    .feature .\38 u, 
    .feature .\38 u\24 {
        width: 100%;
    }

    .feature .image.fit {
        text-align: center;
    }

    .feature .image.fit img {
        display: inline-block;
        max-width: 200px;
    }

    .feature .suppl {
        text-align: center;
        padding-top: 1em;
    }

    .feature .suppl img {
        max-width: 280px;
    }


    #crew .feature .\34 u, 
    #crew .feature .\34 u\24 { 
        display: none;
    }
}



/* Add rules for the embedded trailer */

div.embeds-container {
    text-align: center;
    padding-top: 50px;
}

div.embeds-container h3 {
    text-align: left;
    color: #414141;
}

div.embeds {
    display: inline-block;
    overflow-y: auto;
    width: 100%;
    max-width: 800px;
}



div.trailer-vid {
    max-width: 800px;
    margin: 20px auto 40px;
    padding: 10px;
}


.video-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
    margin-bottom: 10px;
}

    .video-responsive iframe {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
    }


.main > .content.storyline {
    padding-top: 150px;
}

@media screen and (min-width: 800px) {
    .main > .content.storyline {
        padding-top: 170px;
    }        
}

@media screen and (min-width: 1000px) {
    .main > .content.storyline {
        padding-top: 190px;
    }        
}




/* Where to watch page */

#where-to-watch {
        /*background: url("images/overlay.png"), url("../../images/letters.jpg");*/
        /*background: url("images/overlay.png"), url("../../images/poster-bottom-woman.jpg");*/
        background: url("images/overlay.png"), url("../../images/film-poster-full.jpg");
        background-size: 256px 256px, cover;
        background-attachment: fixed, fixed;
        xbackground-position: top left, bottom center;
        background-repeat: repeat, no-repeat;

        padding-bottom: 100px;
    }

@media screen and (max-width: 800px) {
    #where-to-watch {
        padding-bottom: 200px;
    }
}

#where-to-watch h3 {
    margin-bottom: 1em;
}


.provider {
    xbackground: pink;
    text-align: center;
    margin-bottom: 2.5em;

}

.provider .details {
    display: inline-block;
    width: 240px;
    max-width: 70%;
    xbackground: yellow;
    text-decoration: none;
    font-size: 1.125em;
}

@media screen and (max-width: 800px) {
    .provider .details {
        max-width: 50%;
    }
}


.provider .details .logo {
    margin-bottom: 1.5em;
}

.provider .details .logo img {
    max-width: 100%;
    height: auto;
}

.provider .details .status {
    
    background: rgba(0,0,0,0.6);
    border: solid 1px rgba(255,255,255,0.7);
    xborder: solid 1px #fff;
    xborder: solid 1px rgba(206,86,120,0.7);
    xborder: solid 1px rgba(99,187,223,0.7);
    xborder: solid 1px rgba(99,187,223,0.8);
    xcolor: #eee;
    color: rgba(255,255,255,0.7);
    padding: 0.5em 1em;
    border-radius: 5px;
    transition: all 0.1s;
    
}

.provider a.details {
    xtransition: all 1s;
}
.provider a.details:hover {
    text-decoration: none;
    xtransition: all 1s;
}

.provider a.details:hover .status {
    background: rgba(0,0,0,0.8);
    xborder: solid 1px rgba(255,255,255,0.9);
    border: solid 1px rgba(213,107,109,1);
    border: solid 1px rgba(206,86,120,1);
    border: solid 1px rgba(99,187,223,0.9);
    color: #fff;
    transition: all 0.1s;
}



.provider .details {
    max-width: 90%;
}

#where-to-watch .item {
    xwidth: 33.3%;
    width: 25%;
}

#where-to-watch .item.item-vacant {
    height: 1px;
}


@media screen and (max-width: 1000px) { /* equiv to narrower */
    #where-to-watch .item {
        width: 50%;
    }
    #where-to-watch .item.item-vacant {
        width: 100%;
    }

    .provider .details {
        max-width: 70%;
    }

}


@media screen and (max-width: 736px) { /* equiv to mobile */
    #where-to-watch .item {
        width: 100%;
        xclear: none;
        xmargin-left: 0;
    }

    .provider .details {
        max-width: 55%;
    }
}