/* #####################################################################################################################

    WPXP

    Temporary stylesheets, overriding the main ones.
    TODO, synchronize and merge the amends from this file to the appropriate classes in the SCSS sources.
    NOTE: This is not a compiled source, i.e. it's the actual source; TBD: refactor and synchronize w/ the SASS/SCSS.

##################################################################################################################### */


section[role="main"] {
    position: relative;
}


footer[role="contentinfo"] {
    position: relative;
    min-height: 320px;
    height: auto;
    padding: 20px 0 80px 0;
    box-sizing: border-box;
    overflow: visible;
}


footer[role="contentinfo"]
ul {
    width: 95%;
    max-width: 95%;
}


div.epic {
    margin: 40px 0 0 0;
    text-align: center;
}


div.teaser.video {
    width: 100%;
    height: 532px;
}


video {
    width: 100%;
    height: 100%;
}


/* ################################################################################################################## */


div.slider.full {
    padding: 0;
}


.single-img .flexslider .slides
img {
    width: 100%;
}


div.call {
    display: none;
}


article#post-not-found {
    width: 960px;
    margin: 60px auto;
}


/* ################################################################################################################## */


div.social-icons {
    overflow: hidden;
    position: absolute;
    bottom: 40px;
    background: #0075be;
}

a.icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 0 10px 0 0;
    text-indent: -9999px;
}

a.icon:hover {
    opacity: 0.9;
}

a.icon.facebook {
    background: url('../../media/img/facebook.png');
}

a.icon.twitter {
    background: url('../../media/img/twitter.png');
}

a.icon.linkedin {
    background: url('../../media/img/linkedin.png');
}

a.icon.instagram {
    background: url('../../media/img/instagram.png');
}

a.icon.brand {
    background: url('../../media/img/brandalizzer.png');
}


/* ################################################################################################################## */


div#showreel {
    overflow: hidden;
    width: 100%;
}


div#showreel .pinned {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 435px;
    height: 250px;
    z-index: 9999;
}


div#showreel .bottom {
    position: absolute;
    right: 0;
    bottom: 0;
}


div#embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}


div#embed iframe,
div#embed object,
div#embed embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* ################################################################################################################## */


@media (max-width: 640px) {

    footer[role="contentinfo"] {
        height: auto;
    }

    .touch .single-img .flexslider .slides img {
        width: 100%;
        height: 100%;
        margin: 0 !important;
    }

    .touch .slideshow .flexslider .slides>li {
        display: block !important;
    }

    [role="contentinfo"] ul {
        padding-bottom: 93px;
    }

    [role="contentinfo"] li.bottom {
        bottom: 0;
    }

    div.call {
        display: block;
    }

    div.social-icons {
        bottom: 10px;
    }
}