@charset "UTF-8";
/* CSS Document */


/*
    ANIMATIONS
*/
.off{
    visibility: hidden;
    opacity:0;
    display:none;
}
.on{
    visibility: visible;
    opacity:1;
    /*display:block;*/

}
.dropin{

    -webkit-animation-name: dropin;
    -webkit-animation-duration: 1.4s; 
    -webkit-animation-timing-function: ease-out; 
    -webkit-animation-direction: normal;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-play-state: running;

    -moz-animation-name: dropin;
    -moz-animation-duration: 1.4s; 
    -moz-animation-timing-function: ease-out; 
    -moz-animation-direction: normal;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -moz-animation-play-state: running;

    animation-name: dropin;
    animation-duration: 1.4s; 
    animation-timing-function: ease-out; 
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: running;

}

@-moz-keyframes dropin { 
    0% { 
        width:0%;
        /*margin-top:-100%;*/
    } 
    100% { 
        width:100%;
        /*margin-top:0%;*/
    } 
}
@-webkit-keyframes dropin { 
    0% { 
        width:0%;
        /*margin-top:-100%;*/
    } 
    100% { 
        width:100%;
        /*margin-top:0%;*/
    } 
}
@keyframes dropin { 
    0% { 
        width:0%;
        /*margin-top:-100%;*/
    } 
    100% { 
        width:100%;
        /*margin-top:0%;*/
    } 
}

.longfadein{

    -webkit-animation-name: longfadein;
    -webkit-animation-duration: 1.4s; 
    -webkit-animation-timing-function: ease-out; 
    -webkit-animation-direction: normal;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-play-state: running;

    -moz-animation-name: longfadein;
    -moz-animation-duration: 1.4s; 
    -moz-animation-timing-function: ease-out; 
    -moz-animation-direction: normal;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -moz-animation-play-state: running;

    animation-name: longfadein;
    animation-duration: 1.4s; 
    animation-timing-function: ease-out; 
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: running;

}

@-moz-keyframes longfadein { 
    0% { 
        /*opacity:0;*/
        -webkit-filter: brightness(-100%);
        filter: brightness(-100%);
    } 
    35% { 
        /*opacity:0;*/
        -webkit-filter: brightness(0%);
        filter: brightness(0%);
    } 
    100% { 
        /*opacity:1;*/
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    } 
}
@-webkit-keyframes longfadein { 
    0% { 
        /*opacity:0;*/
        -webkit-filter: brightness(-100%);
        filter: brightness(-100%);
    } 
    35% { 
        /*opacity:0;*/
        -webkit-filter: brightness(0%);
        filter: brightness(0%);
    } 
    100% { 
        /*opacity:1;*/
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    } 
}
@keyframes longfadein { 
    0% { 
        /*opacity:0;*/
        -webkit-filter: brightness(-100%);
        filter: brightness(-100%);
    } 
    35% { 
        /*opacity:0;*/
        -webkit-filter: brightness(0%);
        filter: brightness(0%);
    } 
    100% { 
        /*opacity:1;*/
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    } 
}

.fadein{

    -webkit-animation-name: fadein;
    -webkit-animation-duration: .8s; 
    -webkit-animation-timing-function: ease-out; 
    -webkit-animation-direction: normal;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-play-state: running;

    -moz-animation-name: fadein;
    -moz-animation-duration: .8s; 
    -moz-animation-timing-function: ease-out; 
    -moz-animation-direction: normal;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -moz-animation-play-state: running;

    animation-name: fadein;
    animation-duration: .8s; 
    animation-timing-function: ease-out; 
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: running;

}

@-moz-keyframes fadein { 
    0% { 
        /*opacity:0;*/
        -webkit-filter: brightness(0%);
        filter: brightness(0%);
    } 
    100% { 
        /*opacity:1;*/
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    } 
}
@-webkit-keyframes fadein { 
    0% { 
        /*opacity:0;*/
        -webkit-filter: brightness(0%);
        filter: brightness(0%);
    } 
    100% { 
        /*opacity:1;*/
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    } 
}
@keyframes fadein { 
    0% { 
        /*opacity:0;*/
        -webkit-filter: brightness(0%);
        filter: brightness(0%);
    } 
    100% { 
        /*opacity:1;*/
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    } 
}

.fadeout{

    -webkit-animation-name: fadeout;
    -webkit-animation-duration: .5s; 
    -webkit-animation-timing-function: ease-out; 
    -webkit-animation-direction: normal;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-play-state: running;

    -moz-animation-name: fadeout;
    -moz-animation-duration: .5s; 
    -moz-animation-timing-function: ease-out; 
    -moz-animation-direction: normal;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -moz-animation-play-state: running;

    animation-name: fadeout;
    animation-duration: .5s; 
    animation-timing-function: ease-out; 
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: running;

}

@-moz-keyframes fadeout { 
    0% { 
        opacity:1;
    } 
    100% { 
        opacity:0;
    } 
}
@-webkit-keyframes fadeout { 
    0% { 
        opacity:1;
    } 
    100% { 
        opacity:0;
    } 
}
@keyframes fadeout { 
    0% { 
        opacity:1;
    } 
    100% { 
        opacity:0;
    } 
}
.closeout{

    -webkit-animation-name: closeout;
    -webkit-animation-duration: .5s; 
    -webkit-animation-timing-function: ease-out; 
    -webkit-animation-direction: normal;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-play-state: running;

    -moz-animation-name: closeout;
    -moz-animation-duration: .5s; 
    -moz-animation-timing-function: ease-out; 
    -moz-animation-direction: normal;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -moz-animation-play-state: running;

    animation-name: closeout;
    animation-duration: .5s; 
    animation-timing-function: ease-out; 
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: running;

}

@-moz-keyframes closeout { 
    0% { 
        width:100%;
    } 
    100% { 
        width:0%;
    } 
}
@-webkit-keyframes closeout { 
    0% { 
        width:100%;
    } 
    100% { 
        width:0%;
    } 
}
@keyframes closeout { 
    0% { 
        width:100%;
    } 
    100% { 
        width:0%;
    } 
}
.blurin{
    -webkit-animation-name: blurin;
    -webkit-animation-duration: 2s; 
    -webkit-animation-timing-function: ease-out; 
    -webkit-animation-direction: normal;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-play-state: running; 

    -moz-animation-name: blurin;
    -moz-animation-duration: 2s; 
    -moz-animation-timing-function: ease-out; 
    -moz-animation-direction: normal;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -moz-animation-play-state: running; 

    animation-name: blurin;
    animation-duration: 2s; 
    animation-timing-function: ease-out; 
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: running;


}

@-moz-keyframes blurin { 
    0% { 
        -webkit-filter:blur(10px);
        filter:blur(10px);
        transform:scaleX(300%);
    } 
    70% { 
        -webkit-filter:blur(8px);
        filter:blur(8px);
    } 
    100% { 
        -webkit-filter:blur(0px);
        filter:blur(0px);
        transform:scaleX(100%);

    } 
}
@-webkit-keyframes blurin { 
    0% { 
        -webkit-filter:blur(10px);
        filter:blur(10px);
        transform:scaleX(300%);
    } 
    70% { 
        -webkit-filter:blur(8px);
        filter:blur(8px);
    } 
    100% { 
        -webkit-filter:blur(0px);
        filter:blur(0px);
        transform:scaleX(100%);
    } 
}
@keyframes blurin { 
    0% { 
        -webkit-filter:blur(10px);
        filter:blur(10px);
        transform:scaleX(300%);
    } 
    70% { 
        -webkit-filter:blur(8px);
        filter:blur(8px);
    } 
    100% { 
        -webkit-filter:blur(0px);
        filter:blur(0px);
        transform:scaleX(100%);
    } 
}
.flashin{
    -webkit-animation-name: flashin;
    -webkit-animation-duration: .7s; 
    -webkit-animation-timing-function: ease; 
    -webkit-animation-direction: normal;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-play-state: running; 

    -moz-animation-name: flashin;
    -moz-animation-duration: .7s; 
    -moz-animation-timing-function: ease; 
    -moz-animation-direction: normal;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -moz-animation-play-state: running; 

    animation-name: flashin;
    animation-duration: .7s; 
    animation-timing-function: ease; 
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: running;


}

@-moz-keyframes flashin { 
    0% { 
        -webkit-filter:brightness(800%);
        filter:brightness(800%);
    } 
    100% { 
        -webkit-filter:brightness(100%);
        filter:brightness(100%);
    } 

}
@-webkit-keyframes flashin { 
    0% { 
        -webkit-filter:brightness(800%);
        filter:brightness(800%);
    } 
    100% { 
        -webkit-filter:brightness(100%);
        filter:brightness(100%);
    } 
}
@keyframes flashin { 
    0% { 
        -webkit-filter:brightness(800%);
        filter:brightness(800%);
    } 
    100% { 
        -webkit-filter:brightness(100%);
        filter:brightness(100%);
    } 
}

/* Default style, feel free to remove if not needed. */
body, body * {
    vertical-align: baseline;
    border: 0;
    outline: 0;
    padding: 0;
    margin: 0;
}

#video_footer{
    position:absolute;
    width: 100%;
    height:47px;
    bottom: 0px;
    left: 0px;
    background:transparent;
    z-index: 105;
}

#video_title {
    position:absolute;
    bottom:13px;
    left:15px;
    width:188px;
    height:29px;
    background:transparent url('970x250_video_title.png') no-repeat bottom left;
}

#video_tunein{
    position:absolute;
    bottom:10px;
    right:10px;
    width:307px;
    height:35px;
    background:transparent url('970x250_video_tunein_mar12.png') no-repeat bottom right;
}
.post_tonight #video_tunein {
    background:transparent url('970x250_video_tunein_postton.png') no-repeat bottom right;
}
.post_tomorrow #video_tunein {
    background:transparent url('970x250_video_tunein_posttom.png') no-repeat bottom right;
}
.post_sunday #video_tunein {
    background:transparent url('970x250_video_tunein_postsun.png') no-repeat bottom right;
}
.tonight #video_tunein {
    background:transparent url('970x250_video_tunein_tonight.png') no-repeat bottom right;
}
.tomorrow #video_tunein {
    background:transparent url('970x250_video_tunein_tomorrow.png') no-repeat bottom right;
}
.sunday #video_tunein {
    background:transparent url('970x250_video_tunein_sun.png') no-repeat bottom right;
}
.mar12 #video_tunein {
    background:transparent url('970x250_video_tunein_mar12.png') no-repeat bottom right;
}

#mobile_intro {
    position: absolute;
    top: 0px;
    right:0px;
    width: 970px;
    height: 250px;
    cursor: pointer;
}

#anim {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 970px;
    height: 250px;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    transition: all 1s ease-out;
}
#anim img{
    max-width: 970px;
}
#base {
    position: absolute;
    width: 100%;
    height: 100%;
    background: no-repeat center;
    background-size: contain;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out; 
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out; 
    transition: all .5s ease-in-out; 
}


#resolve_bg {
    position: absolute;
    top:0px;
    left:0px;
    width:970px;
    height:250px;
    background:transparent url('AC_S3_970x250_felicity_resolve_bg.jpg') no-repeat top left;
    /*  width: 100%;
    height: 100%;
   background:transparent url('strain_970x250_resolve_bg.jpg') no-repeat center;
    background-size: cover;
*/
}

#resolve_title{
    position: absolute;
    width: 463px;
    height: 69px;
    top: 30px;
    left: 125px;
    overflow:hidden;
    background: url('AC_S3_970x250_felicity_resolve_title.png') no-repeat top left;
}

#resolve_tunein{
    position:absolute;
    width: 665px;
    height: 106px;
    top: 110px;
    left: 24px;
    background: transparent url('AC_S3_970x250_resolve_tunein_mar12.png') no-repeat top center;

}

.post_tonight #resolve_tunein {
    background:transparent url('AC_S3_970x250_resolve_tunein_postton.png') no-repeat top center;
}
.post_tomorrow #resolve_tunein {
    background:transparent url('AC_S3_970x250_resolve_tunein_posttom.png') no-repeat top center;
}
.post_sunday #resolve_tunein {
    background:transparent url('AC_S3_970x250_resolve_tunein_postsun.png') no-repeat top center;
}
.tonight #resolve_tunein {
    background:transparent url('AC_S3_970x250_resolve_tunein_tonight.png') no-repeat top center;
}
.tomorrow #resolve_tunein {
    background:transparent url('AC_S3_970x250_resolve_tunein_tomorrow.png') no-repeat top center;
}
.sunday #resolve_tunein {
    background:transparent url('AC_S3_970x250_resolve_tunein_sunday.png') no-repeat top center;
}
.mar12 #resolve_tunein {
    background:transparent url('AC_S3_970x250_resolve_tunein_mar12.png') no-repeat top center;
}

#resolve_cta{
    position:absolute;
    width: 136px;
    height: 22px;
    bottom: 4px;
    left: 22px;
    cursor: pointer;
}


/*  IE9 FX OVERRIDES    */
.ie9 #resolve_bg,
.ie9 #resolve_title,
.ie9 #resolve_tunein,
.ie9 #resolve_cta{
    filter: progid:DXImageTransform.Microsoft.blur(enabled = false) !important;
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -o-filter: none !important;
    -ms-filter: none !important;
    filter: none !important;

}


/* Div layer for the entire banner. */
#container_dc {
    position: absolute;
    width: 970px;
    height: 250px;
    background-color: transparent;
    top: 0px;
    left: 0px;
    border:1px solid #000;
    overflow: hidden;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

#content_dc {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: #000;

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    overflow: hidden;
}

/* Invisible button for background clickthrough. */
#background_exit_dc {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    cursor: pointer;
    opacity: 0;
}

#video_exit_dc {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0px;
    left: 0px;
    cursor: pointer;
    opacity: 0;
    z-index: 110;

}


/* Div layer containing the video player and video controls. */
#video_container_dc {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background-color: #000;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#video_dc, #mobile_video, #video-container {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 970px;
    height: 250px;
    border-left: 1px solid #000;
    background-color: #000;
    z-index: 100;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*border-bottom:1px solid #222222;*/
}

#video_controls {
    position: absolute;
    top: 1px;
    /*right: 1px;*/
    right: -16px;
    width: 40px;
    height: 34px;
    /*background:transparent url('player_controls_bg.png') top left no-repeat;*/
    background:transparent;
    background-size:contain;
    z-index: 400;
}
#video_controls button {
    cursor: pointer;
}

/* Video button hiding an positioning */
#video_controls button:hover {
    background-position: bottom;
}

#video_control_play_dc {
    position: absolute;
    background: url('play_button.png') no-repeat top;
    width: 14px;
    height: 13px;
    left: 3px;
    top: 6.5px;
}

#video_control_pause_dc {
    position: absolute;
    background: url('pause_button.png') no-repeat top;
    width: 14px;
    height: 13px;
    left: 0px;
    top: 6.25px;
}

#video_controls button:hover {
    background-position: bottom;
}
#video_control_unmute_dc {
    position: absolute;
    background: url('sound_button_off.png') no-repeat top left;
    width: 20px;
    height: 15px;
    left: 18px;
    top: 4px;
}
#video_control_mute_dc {
    position: absolute;
    background: url('sound_button_on.png') no-repeat top left;
    width: 20px;
    height: 15px;
    left: 15px;
    top: 4px;
}

.mobile #video_control_pause_dc, .mobile #video_control_play_dc, .mobile #video_control_mute_dc{
    display:none !important;
} 

#social {
    position: absolute;
    top: 0px;
    left: 0px;
    overflow:visible;
}
#social a {
    width:20px;
    height:20px;
    display:block;
    position:absolute;
}
#facebookBn {
    top:9px;
    left:9px;
    background:transparent url('bn_social_facebook.png') top center no-repeat;
}
#twitterBn {
    top:36px;
    left:9px;
    background:transparent url('bn_social_twitter.png') top center no-repeat;
}
#instagramBn {
    top:63px;
    left:9px;
    background:transparent url('bn_social_instagram.png') top center no-repeat;
}
#social a:hover {
    background-position: bottom center;
}

#video_control_replay_dc {
    background: url('bn_replay.png') no-repeat center;
    position: absolute;
    right: -2px;
    top: -1px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    -webkit-backface-visibility: hidden;

    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
#video_control_replay_dc:hover {
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

:focus {outline:none;}
::-moz-focus-inner {border:0;}