/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; background: transparent; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
/*html, body { width: 100%; height: 100%; }*/
body { line-height: 1; }
b, strong{ font-weight: bold; }
img { color: transparent; font-size: 0; vertical-align: middle; -ms-interpolation-mode: bicubic; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: separate; border-spacing: 0; }
th, td, caption { font-weight: normal; vertical-align: top; text-align: left; }
a img { border: 0; }
a, a:link, a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }
:focus { outline: 0; }
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner { border: 0; padding: 0; margin: 0; outline: 0; }

.clearfix:before,
.clearfix:after { content: '.'; display: block; clear: both; visibility: hidden; font-size: 0; line-height: 0; height: 0; zoom: 1; }
.clearfix { min-height: 1%; } /* IE 7 FIX */
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }

@font-face {
    font-family: 'UnitedSansSmCd';
    src: url('../fonts/unitedsanssemicond-medium-webfont.eot');
    src: url('../fonts/unitedsanssemicond-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/unitedsanssemicond-medium-webfont.woff') format('woff'),
         url('../fonts/unitedsanssemicond-medium-webfont.ttf') format('truetype'),
         url('../fonts/unitedsanssemicond-medium-webfont.svg#UnitedSansSmCdMdMedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'UnitedSansSmCd';
    src: url('../fonts/unitedsanssemicond-bold-webfont.eot');
    src: url('../fonts/unitedsanssemicond-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/unitedsanssemicond-bold-webfont.woff') format('woff'),
         url('../fonts/unitedsanssemicond-bold-webfont.ttf') format('truetype'),
         url('../fonts/unitedsanssemicond-bold-webfont.svg#UnitedSansSmCdBdBold') format('svg');
    font-weight: bold;
    font-style: normal;

}

/* style */
body { font-size: 12px; font-family: 'UnitedSansSmCd', sans-serif; color: #393939; background: #fff; }

a { color: #393939; text-decoration: none; }
a:hover { text-decoration: none; }

.wrap { margin: 0 auto; width: 972px; text-align: left; }
@media screen and (max-width: 971px) { .wrap { width: 100%; } }
@media screen and (max-width: 320px) { .wrap { width: 320px; } }

header { height: 172px; text-align: center; border-bottom: 1px solid #dedede; }
header a { display: inline-block; *display: inline; zoom: 1; margin-top: 40px; width: 180px; height: 28px; background: transparent url('../images/logo.png') no-repeat center top; font-size: 20px; line-height: 28px; font-weight: bold; text-transform: uppercase; padding-top: 88px; }

footer { padding: 40px 0; border-top: 1px solid #dedede; }
footer .links { text-align: center; }
footer .links section { display: inline-block; *display: inline; zoom: 1; width: 160px; font-size: 13px; line-height: 20px; text-transform: uppercase; vertical-align: top; padding-bottom: 8px; }
footer .links section a { font-weight: bold; }
footer .copyright { font-size: 13px; line-height: 14px; color: #c6c7c7; padding-top: 14px; text-align: center; }

.page-home { margin: 40px auto 20px; width: 972px; text-align: left; }
@media screen and (max-width: 971px) { .page-home { width: 648px; } }
@media screen and (max-width: 647px) { .page-home { width: 312px; } }

figure { float: left; width: 312px; height: 224px; margin: 0 6px; position: relative; }
@media screen and (max-width: 635px) { figure { margin: 0; } }
figure.last { margin-right: 0; }
figure img { width: 312px; height: 176px; }
figure .bg { position: absolute; top: 0; left: 0; z-index: 1; }
figure .image { display: none; position: absolute; top: 0; left: 0; z-index: 2; }
figure figcaption { margin-top: 176px; padding: 10px 0 15px 0; line-height: 23px; font-size: 18px; text-align: center; text-transform: uppercase; }

.page-movie { margin: 0 auto 20px; width: 972px; text-align: left; }
@media screen and (max-width: 971px) { .page-movie { width: 100%; } }
@media screen and (max-width: 320px) { .page-movie { width: 320px; } }

nav { margin: 0 6px; height: 96px; }
nav .name { padding: 12px 22px 0 22px; text-align: center; }
nav .name h1 { padding: 0 0 6px 0; color: #363636; font-size: 48px; text-transform: uppercase; font-weight: bold; }
nav .name a { color: #939393; font-size: 14px; text-transform: uppercase; }
nav .prev { float: left; width: 22px; height: 96px; background: transparent url('../images/prev.png') no-repeat left center; }
nav .next { float: right; width: 22px; height: 96px; background: transparent url('../images/next.png') no-repeat left center; }

.video-container { position: relative; margin: 0 6px; padding: 0 0 56.25% 0; height: 0; overflow: hidden; }
.video-container iframe,  
.video-container object,  
.video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.title { height: 75px; line-height: 75px; text-transform: uppercase; font-size: 23px; font-weight: bold; }

.movie { float: left; width: 393px; margin: 0 0 0 6px; }
@media screen and (max-width: 647px) { .movie { float: none; width: auto; margin: 0 6px; } }
@media screen and (max-width: 320px) { .movie { width: 308px; margin: 0 6px; } }
.movie .synopsis { padding-bottom: 20px; border-bottom: 1px solid #dedede; }
.movie .synopsis p { line-height: 20px; font-size: 16px; padding-bottom: 20px; }
.movie .download { padding-bottom: 20px; }
@media screen and (max-width: 647px) { .movie .download { border-bottom: 1px solid #dedede; } }
.movie .download .links { }
.movie .download .links a { float: left; font-size: 16px; line-height: 20px; background: transparent url('../images/download.png') no-repeat right center; padding: 0 20px 0 0; margin: 0 30px 0 0; }

.director { width: 555px; margin: 0 6px 0 411px; }
@media screen and (max-width: 971px) { .director { width: auto; min-width: 231px; } }
@media screen and (max-width: 647px) { .director { min-width: auto; margin: 0 6px; } }
@media screen and (max-width: 320px) { .director { width: 308px; margin: 0 6px; } }
.director .line { float: left; width: 100%; }
.director .avatar { float: right; width: 231px; text-align: center; padding-bottom: 20px; }
@media screen and (max-width: 971px) { .director .avatar { width: 100%; float: none; } }
.director .avatar img { width: 231px; }
.director .details { float: left; width: 312px; }
@media screen and (max-width: 971px) { .director .details { width: 100%; float: none; } }
.director .details h2 { font-size: 22px; padding-bottom: 19px; text-transform: uppercase; }
.director .details p { line-height: 20px; font-size: 16px; padding-bottom: 20px; }