html { -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */ }
body { background: #fff; font: 300 14px/18px 'Open Sans', Arial, Verdana, san-serif; color: #5e5e5e; margin: 0; min-width: 320px; }
a { text-decoration: none; outline: none; }
a img { border: 0; }
.video_list, #nav ul, #banner .slider .slider_images, #footer nav ul { list-style: none; margin: 0; padding: 0; }
.col1, .col2, .col4, .video_list li { margin: 6px; float: left; box-sizing: border-box; background: #f0f0f0; }
.col1img, .col2 img, .col4 img, .video_list li picture img { width: 100%; }
.col1, .video_list li { width: 20.972222222vw; max-width: 302px; height: 18.402777778vw; max-height: 265px; } /* vw width = 302/1440*100 vw height: 265/1440*100 */
.col2 { width: 42.777777778vw; max-width: 616px; /*height: 542px;*/ } /* vw width = 616/1440*100 */
.col4 { width: 86.388888889vw; max-width: 1244px; float: none; } /* vw width = 1244/1440*100 */
.col2.list { width: 43.611111111vw; max-width: 628px; margin: 6px 0; background: transparent; } /* vw width = 628/1440*100 */
.col2.list h2 { margin-top: 0; }
.video_list li { background: #f0f0f0; position: relative; }
.video_list li h3, .video_list li div { padding: 0 16px; }
.video_list li .overlay, .video_list li .selected { position: absolute; text-align: center; }
.video_list li .overlay { display: none; width: 5.9027777778vw; max-width: 85px; height: 3.8194444444vw; max-height: 55px; top: 30%; left: 40%; background: rgba(0,0,0,0.7); border-radius: 15%; box-shadow: 0 0 4px rgba(0,0,0,0.5); font-size: 58px; line-height: 45px; color: #fff; } /* vw width/height = 55/1440*100 */
.video_list li .selected { display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.5); top: 0; left: 0; color: #fff; font-size: 24px; text-transform: uppercase; line-height: 265px; }
.video_list li .selected img { width: 3.8194444444vw; max-width: 55px; }
.video_list li:hover, .video_list li.default { cursor: pointer; background: #222; box-shadow: 0 0 4px rgba(0,0,0,0.5); color: #fff; }
.video_list li:hover h3, .video_list li.default h3 { color: #d0aa27; }
.video_list li.hover .overlay { display: block; cursor: pointer; }
.video_list li iframe { position: absolute; top: 0; left: 0; z-index: -1; } /* For touch screen, iframe added by jquery */
.video_info { background: #eee; padding: 16px; }
.video_info h2 { color: #000; margin: 0 0 4px 0; }
.request_password { display: inline-block; background: #d0aa27; color: #fff; font-weight: 400; text-transform: uppercase; border-radius: 6px; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); margin: 6px auto; padding: 10px 20px; }
.request_password:hover { background: #03569c; }
.video_container { position: relative; width: 100%; height: 48.611111111vw; max-height: 700px; overflow: hidden; } /* vw width = 700/1440*100 */
/*
#video_message { display: block; width: 85vw; max-width: 1216px; padding: 5vw; text-align: center; background: rgba(3,86,156,0.9); color: #fff; margin: auto; position: fixed; z-index: 100; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#video_message div { width: 100%; height: 48.611111111vw; max-height: 700px; }
#video_message .close { display: block; font-size: 20px; border: none; background: transparent; color: #fff; padding: 10px; margin: auto; }
#video_message .close:hover { cursor: pointer; }
*/
.video_list li .video_message { padding: 0; display: block; width: 100%; height: 100%; text-align: center; background: rgba(3,86,156,1); color: #fff; margin: auto; position: absolute; top: 0; left: 0; }
.video_list li .video_message div { padding: 0; margin: auto auto 1.4285714286vw auto; width: 96%; height: 60%; position: relative; overflow: hidden; }
.video_list li .video_message div iframe { position: relative; z-index: 102; }
.video_list li .video_message .close { display: block; font-size: 20px; border: none; background: transparent; color: #fff; padding: 0 10px; margin: auto; }
.video_list li .video_message .close:hover { cursor: pointer; }
.coming_up { text-align: center; }
.coming_up h3 { font-size: 16px; text-transform: uppercase; }
.coming_up p { margin-bottom: 33px; }
.coming_up.col2 { height: 41.694444444vw; max-height: 586px; }
h1 { margin: 16px 0; }
h1 a { background: url('../images/logo.png') no-repeat left center; background-size: 100%; display: inline-block; width: 30.833333333vw; max-width: 444px; font: normal 65px/65px 'Maven Pro', Arial, Verdana, san-serif; letter-spacing: -5px; color: #bbb; text-indent: -1000em; } /* vw width = 444/1440*100 */
h1 a .gold, h2 span, #nav li.selected a, .gold, #footer nav ul li a:hover, #footer nav ul li.selected a, .video_message h2 { color: #d0aa27; }
h1 a .blue, h2, #nav li a:hover { color: #03569c; }
h2 { font-size: 24px; font-weight: 600; text-transform: uppercase; margin: 26px 6px 20px 0; }
#home h2, #all_episodes h2 { margin-left: 6px; }
h3 { font-size: 14px; font-weight: 600; color: #000; margin: 10px 0 0 0; }
#header, #nav { text-align: center; }
#nav { font-weight: 600; font-size: 18px; margin-bottom: 20px; }
#nav .nav_title { color: #a7a7a7; display: inline-block; }
#nav .nav_title:after { content: " \25B8 "; color: #d0aa27; }
#nav ul { display: inline-block; }
#nav li { display: inline-block; margin: 0 7px; }
#nav li + li { border-left: 1px dotted #d0aa27; padding-left: 14px; }
#nav li a { color: #000; text-transform: uppercase; }
#banner { width: 100%; height: 38.263888889vw; max-height: 551px; background: #222; position: relative; } /* vw height = 551/1440*100 */
#banner .slider { width: 100vw; max-width: 1440px; margin: 0 auto; position: relative; overflow: hidden; }
#banner .slider .slider_images { width: 300%; }
#banner .slider .slider_images li { width: 33.3334%; float: left; position: relative; transition: all 1s ease; }
#banner .slider img { width: 100%; display: block; }
#banner .slider .tooltip { left: 100px; bottom: 60px; padding: 20px; width: 41.666666667vw; max-width: 600px; color: #fff; font-size: 20px; /*vw width = 600/1440*100 */
background: #035aa4; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, rgba(3,90,164,0.6), rgba(2,56,101,0.6)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, rgba(3,90,164,0.6), rgba(2,56,101,0.6)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, rgba(3,90,164,0.6), rgba(2,56,101,0.6)); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, rgba(3,90,164,0.6), rgba(2,56,101,0.6)); /* Standard syntax */
}
#banner .slider .tooltip h2 { color: #d0aa27; font-size: 38px; font-weight: 700; line-height: 38px; margin: 4px 0; }
#banner .slider .tooltip date { font-size: 16px; }
#banner .slider .indicators { top: 90%; left: 50%; transform: translateX(-50%); padding: 20px; }
#banner .slider .indicators span { display: inline-block; width: 0.7vw; height: 0.7vw; border-radius: 50%; border: 1px solid #fff; margin: 0 6px; }
#banner .slider .indicators span.current { background: #d0aa27; border-color: #d0aa27; }
#banner .slider button { border: 0; background: rgba(255,255,255,0.5); padding: 5px 13px 8px 10px; transform: translateY(-50%); font-size: 36px; outline: 0; color: #222; }
#banner .slider button.next { top: 50%; right: 0; padding-right: 10px; padding-left: 13px; }
#banner .slider button.prev { top: 50%; left: 0; }
#banner .slider button, #banner .slider .indicators { cursor: pointer; display: none; }
#banner .slider .tooltip, #banner .slider .indicators, #banner .slider .next, #banner .slider .prev { position: absolute; }
#container { width: 87.22222222vw; max-width: 1256px; padding: 40px; margin: -200px auto 50px auto; position: relative; background: #fff; }
#home #container { padding: 0; margin-top: 20px; }
#home aside, #all_episodes { float: left; }
#synopsis.col4 { background: transparent; margin-bottom: 20px; }
#synopsis > article { float: left; width: 42%; }
#synopsis > article h2, #container > article h2 { margin-top: 0; }
#synopsis aside { float: right; width: 53%; text-align: center; background: #f0f0f0; padding-right: 16px; position: relative; }
#synopsis aside img { width: 280px; float: left; margin-right: 16px; }
#synopsis aside .showtime { position: absolute; top: 50%; transform: translateY(-50%); padding-left: 280px; width: 100%; box-sizing: border-box; }
#synopsis aside .showtime h2 { margin-top: 0; }
#property-asia #synopsis > article { width: 100%; }
#contact-us #container article { width: 35%; float: left; }
#google_map { width: 65%; float: right; }
#footer { color: #fff; width: 100%;
background: #035aa4; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, #035aa4, #023865); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #035aa4, #023865); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #035aa4, #023865); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #035aa4, #023865); /* Standard syntax */
}
#footer > div { width: 86.388888889vw; max-width: 1244px; margin: auto; padding: 30px 0; }
#footer small { display: inline-block; font-size: 14px; width: 30%; }
#footer img { margin-bottom: 20px; width: 19.166666667vw; max-width: 276px; } /* vw width = 276/1440*100 */
#footer nav { float: right; width: 70%; text-align: right; }
#footer nav ul li { display: inline-block; margin-left: 20px; vertical-align: middle; }
#footer nav ul li a { color: #fff; }
#footer nav ul li a img { margin: 0; opacity: 0.8; width: 1.5972222222vw; max-width: 23px; } /* vw width = 23/1440*100 */
#footer nav ul li a:hover img { opacity: 1; }
.fixed:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.fixed { display:block; }
/* \*/
.fixed { min-height:1%; }
* html .fixed { height:1%; }
@media (max-width: 1439px) {
.col1, .col2, .col4, .video_list li { margin: 0.4166666667vw; } /* margin in vw = 6/1440*100 */
.video_list li h3, .video_list li div { padding: 0 1.1111111111vw; }
.video_list li .overlay { font-size: 4.0277777778vw; line-height: 3.125vw; }
.video_list li .selected { font-size: 1.6666666667vw; line-height: 15.625vw; }
.video_info { padding: 1.1111111111vw; }
.video_info h2 { margin-bottom: 0.2777777778vw; }
h1 { margin: 1.1111111111vw 0; }
h1 a { font-size: 4.5138888889vw; line-height: 4.5138888889vw; letter-spacing: -0.3472222222vw; }
h2 { /*font-size: 1.6666666667vw;*/ margin: 1.8055555556vw 0.4166666667vw 1.3888888889vw 0; }
#home h2, #all_episodes h2 { margin-left: 0.4166666667vw; }
h3 { /*font-size: 0.9722222222vw;*/ margin: 0.6944444444vw 0 0 0; }
#nav { /*font-size: 1.25vw;*/ margin-bottom: 1.3888888889vw; }
#nav li { margin: 0 0.4861111111vw; }
#nav li + li { padding-left: 0.9722222222vw; }
#banner .slider .tooltip { left: 6.9444444444vw; bottom: 4.1666666667vw; padding: 1.3888888889vw; /*font-size: 1.3888888889vw;*/ }
#banner .slider .tooltip h2 { /*font-size: 3.3333333333vw; line-height: 3.3333333333vw;*/ margin: 0.2777777778vw 0; }
#banner .slider .tooltip date { /*font-size: 1.1111111111vw;*/ }
#banner .slider .indicators { padding: 1.3888888889vw; }
#banner .slider .indicators span { margin: 0 0.4166666667vw; }
#banner .slider button { padding: 0.3472222222vw 0.9027777778vw 0.5555555556vw 0.6944444444vw; font-size: 2.5vw; }
#banner .slider button.next { padding-right: 0.6944444444vw; padding-left: 0.9027777778vw; }
#container { padding: 2.7777777778vw; margin: -13.888888889vw auto 3.4722222222vw auto; }
#home #container { margin-top: 1.3888888889vw; }
#synopsis.col4 { margin-bottom: 1.3888888889vw; }
#synopsis aside .showtime { padding-left: 19.444444444vw; }
#footer > div { padding: 2.0833333333vw 0; }
#footer small { /*font-size: 0.9722222222vw;*/ }
#footer img { margin-bottom: 1.3888888889vw; }
#footer nav ul li { margin-left: 1.3888888889vw; }
}
@media (max-width: 1280px) and (min-width: 900px) {
body { line-height: 17px; }
h2 { font-size: 22px; line-height: 24px; }
h3 { margin-top: 0.546875vw; } /* 7px */
.coming_up h3 { font-size: 15px; }
#nav { font-size: 16px; }
#banner .slider .tooltip { font-size: 18px; }
#banner .slider .tooltip h2 { font-size: 34px; line-height: 34px; }
#banner .slider .tooltip date { font-size: 15px; }
#synopsis aside img { width: 21.875vw; } /* vw width = 280/1280*100 */
#synopsis aside .showtime { padding-left: 21.875vw; }
}
@media (max-width: 1100px) and (min-width: 900px) {
.col1, .video_list li { height: 20.545vw; max-height: 215px; }
.coming_up.col2 { height: 46.9vw; max-height: 489px; }
}
@media only screen and (max-width: 900px) {
.col1, .col2, .col4, .video_list li { margin: 0.6666666667vw; } /* 6/900*100 */
.col1, .video_list li { width: 42.277777777vw; max-width: 380px; height: 34.444444444vw; max-height: 310px; } /* vw width = container vw width - total col1 margin / 2 col = (87.22222222vw - (0.6666666667vw * 4)) / 2*/
.col2 { width: 85.8888888874vw; max-width: 773px; }
.col2.list { width: 87.2222222208vw; max-width: 785px; }
.col2.list h2 { margin-top: 1.3888888889vw; }
.video_list li h3, .video_list li div { padding: 0 1.7777777778vw; }
.video_list li .overlay { width: 10.555555556vw; max-width: 95px; height: 7.2222222222vw; max-height: 65px; font-size: 6.4444444444vw; line-height: 6.1111111111vw; } /* vw width/height = 65/900*100, font-size = 58/900*100 */
.video_list li .selected { font-size: 2.6666666667vw; line-height: 34.444444444vw; } /* font-size: 24/900*100 */
.video_list li .selected img { width: 6.1111111111vw; }
.video_info { padding: 1.7777777778vw; }
.request_password { padding: 7px 14px; }
.coming_up.col2 { height: auto; max-height: 900px; }
h1 { margin: 1vw 0; }
h1 a { font-size: 8.125vw; line-height: 8.125vw; letter-spacing: -0.625vw; width: 60vw; max-width: 384px; } /* new width = 384 from mock (60% of 640), new vw width = 384/640*100 */
h2 { margin: 2.8888888889vw 0.6666666667vw 2.2222222222vw 0; }
#home h2, #all_episodes h2 { margin-left: 0.6666666667vw; }
#nav { font-size: 24px; margin-bottom: 2.5vw; }
#nav .nav_title { vertical-align: top; cursor: pointer; display: block; }
#nav .nav_title:after { content: " ☰ "; margin-left: 1vw; }
#nav ul { display: none; }
#nav li { display: none; margin: 2.5vw auto; }
#nav li + li { border: none; }
#nav li:last-child { margin-bottom: 0; }
#nav .icon, #nav.responsive ul, #nav.responsive li { display: block; }
#banner { height: 58.111111111vw; max-height: 523px; } /* vw height = 523/900*100 */
#banner .slider .tooltip { bottom: 5vw; width: 83.333333333vw; max-width: 750px; font-size: 18px; } /* 750/900*100 */
#banner .slider .tooltip h2 { font-size: 34px; line-height: 34px; }
#banner .slider .indicators { padding: 2.5vw; }
#banner .slider .indicators span { width: 1.26vw; height: 1.26vw; margin: 0 0.7500000001vw; }
#banner .slider button { padding: 0.625vw 1.625vw 1.0000000001vw 1.2499999999vw; font-size: 4.5vw; }
#banner .slider button.next { padding-right: 1.2499999999vw; padding-left: 1.625vw; }
#container { padding: 2.5vw; margin-top: -20vw; }
#home #container { margin-top: 2.5vw; }
#synopsis.col4 { margin-bottom: 2.5vw; }
#synopsis > article, #synopsis aside { width: 100%; padding-right: 0; }
#synopsis aside img { width: 31.111111111vw; } /* vw width = 280/900*100 */
#synopsis aside .showtime { padding-left: 31.111111111vw; }
#footer > div { padding: 3.7499999999vw 0; }
#footer small { font-size: 13px; width: 100%; }
#footer img { margin-bottom: 2.5vw; width: 30.666666667vw; margin-top: 2.5vw; } /* 276/900*100 */
#footer nav { width: 100%; text-align: left; }
#footer nav ul li { margin-left: 2.5vw; }
#footer nav ul li:first-child { margin-left: 0; }
#footer nav ul li a img { width: 2.875vw; }
}
@media only screen and (max-width: 800px) {
.col1, .video_list li { height: 100%; padding-bottom: 6px; } /******* CONTENT MUST HAVE EQUAL HEIGHT *******/
}
@media only screen and (max-width: 600px) {
.col1, .video_list li { height: 42.666666667vw; }
h2 { font-size: 20px; line-height: 22px; }
#contact-us #container article, #google_map { width: 100%; float: left; }
#footer img { width: 46vw; } /* 276/600*100 */
#footer nav ul li { display: block; margin: 4px 0; }
#footer nav ul li:nth-child(n+5) { display: inline-block; margin-left: 8px; }
#footer nav ul li a img { width: 3.8333333333vw; }
}
@media only screen and (max-width: 450px) {
.col1, .col2, .col4, .video_list li { margin: 1.3333333333vw; }
.col1, .video_list li { width: 85.8888888874vw; height: 100%; }
.video_list li .overlay { width: 21.111111111vw; height: 14.444444444vw; font-size: 12.888888889vw; line-height: 12.888888889vw; } /* vw width/height = 65/450*100, font-size = 58/450*100 */
.video_list li .selected { font-size: 5.3333333333vw; line-height: 66.555555556vw; } /* font-size: 24/900*100 */
.video_list li .selected img { width: 12.222222222vw; }
h1 { margin: 2vw 0; }
h1 a { font-size: 8.125vw; line-height: 8.125vw; letter-spacing: -0.625vw; width: 70vw; }
.coming_up h3 { font-size: 14px; }
#nav { font-size: 18px; }
#banner { height: 71.111111111vw; max-height:320px; } /* vw height = 320/450*100 */
#banner .slider .tooltip { font-size: 16px; }
#banner .slider .tooltip h2 { font-size: 28px; line-height: 28px; }
#synopsis aside { padding-bottom: 10px; }
#synopsis aside img { width: 100%; float: none; }
#synopsis aside .showtime { position: static; top: 0; transform: none; padding-left: 0; }
#synopsis aside .showtime h2 { margin-top: 2.9166666667vw; }
#footer img { width: 61.333333333vw; } /* 276/450*100 */
#footer nav ul li a img { width: 5.1111111111vw; }
}