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

/* Default style, feel free to remove if not needed. */

body,
body * {
    vertical-align: baseline;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
}

/* Div layer for the entire banner. */

#container_dc {
    position: absolute;
    width: 160px;
    height: 600px;
    -ms-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    left: -16px;
    top: -60px;
    overflow: hidden;

}

#content_dc {
    position: absolute;
    width: 158px;
    height: 598px;
    top: 0px;
    left: 0px;
    background-color: #FFF;
    border: 1px solid #666666;
    z-index: 100;
    overflow: hidden;
    /*background-image: url('DCRM_HTML5_inPage_Polite_Video_160x600_Background.jpg');*/
}

/* Invisible button for background clickthrough. */

#background_exit_dc {
    position: absolute;
    width: 160px;
    height: 600px;
    top: 0px;
    left: 0px;
    cursor: pointer;
    opacity: 0;
    z-index: 999;
}

/* Div layer containing the video player and video controls. */

#video1_container_dc {
    position: absolute;
    width: 158px;
    height: 598px;

    overflow: hidden;
    /*	background-color: #FFF;*/
    border: 1px solid #666666;
    z-index: 500;
}

#video1_dc {
    position: absolute;
    width: 160px;
    height: 299px;
}


:focus {
    outline: none;
}

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



.retina {
    position: absolute;
    width: 160px;
    height: 600px;
    top: 0px;
    left: 0px;
}


.fades {
    opacity: 0;
}

#endframe {
    opacity: 0;
    position: absolute;
    z-index: 500;
    top: 1px;
    left: 1px;
}


#flip_container {
    width: 160px;
    height: 600px;
    position: relative;
    -webkit-perspective: 800px;
    perspective: 800px;
}

#flip {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 84px 440px;
    -ms-transform-origin: 84px 440px;
    transform-origin: 84px 440px;

    transform: rotateX( 0deg);
    -moz-transform: rotateX( 0deg);
    -webkit-transform: rotateX( 0deg);
}

#flip .copy {
    margin: 0;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

}

#copy01 {
    /*background-color: red;*/
    transform: rotateX(-180deg) translate(0px, -280px);
    -moz-transform: rotateX(-180deg) translate(0px, -280px);
    -webkit-transform: rotateX(-180deg) translate(0px, -280px);
}

#copy02 {
    opacity: 0;
    transform: rotateX(0deg) translate(0px, 190px);
    -moz-transform: rotateX(0deg) translate(0px, 190px);
    -webkit-transform: rotateX(0deg) translate(0px, 190px);
    /*background-color: blue;*/
}

#copy03 {
    opacity: 0;
    transform: rotateX(-180deg) translate(0px, -280px);
    -moz-transform: rotateX(-180deg) translate(0px, -280px);
    -webkit-transform: rotateX(-180deg) translate(0px, -280px);
}


@media screen and (-ms-high-contrast: active),
screen and (-ms-high-contrast: none) {
    /* IE10+ specific styles go here */
    #copy01 {
        -ms-transform: rotateX(90deg);
        -ms-transform-origin: 84px 440px;
    }

    #copy02 {
        opacity: 1;
        -ms-transform: rotateX(90deg);
        -ms-transform-origin: 84px 440px;
    }

    #copy03 {
        opacity: 1;
        -ms-transform: rotateX(90deg);
        -ms-transform-origin: 84px 440px;
    }


}