/* ================================================================================================================== */ /* Moviepanel (c)2015 S&L etc. */ /* Created by Freddy Leitner - virtuo.de - Made In Japan */ /* ================================================================================================================== */ /* ================================================================================================================== */ /* Preparations and imports */ /* Fonts */ @import url(//fonts.googleapis.com/css?family=Open+Sans:400,500,600,700|Open+Sans+Condensed:700); /* @import url(forms.css?20190211); */ @font-face { font-family: 'Moviepanel Icons'; font-weight: normal; font-style: normal; src: url('../fonts/moviepanel-icons.eot'); src: url('../fonts/moviepanel-icons.eot?#iefix') format('embedded-opentype'), url('../fonts/moviepanel-icons.svg#icons') format('svg'), url('../fonts/moviepanel-icons.woff') format('woff'), url('../fonts/moviepanel-icons.ttf') format('truetype'); } /* CSS reset */ /* removed i and b from list (Max, 0705.2021) */ 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, u, 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.nav_bottom, header, hgroup, menu.nav_top, output, ruby, section, summary, time, mark, audio, video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0 } article, aside, details, figcaption, figure.nav_bottom, header, hgroup, menu, main, section { display: block } body { line-height: 1 } ol, ul { list-style: none } blockquote, q { quotes: none } blockquote:before, blockquote:after, q:before, q:after { content: none } table { border-collapse: collapse; border-spacing: 0 } /* Globally deactivate text selection */ 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.nav_bottom, header, hgroup, menu.nav_top, output, ruby, section, summary, time, mark, audio, video { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Reactivate text selection with this class on demand */ .selectable, .selectable * { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } /* Generic adjustments */ html { box-sizing: border-box; } html, body { height: 100%; } *, *:before, *:after { box-sizing: inherit; } img { display: block; width: 100%; height: auto; } input, textarea, button, select { font: inherit; } label { display: block; -moz-user-select: none; -webkit-user-select: none; user-select: none; } input[type=submit] { -webkit-appearance: none; -moz-appearance: none; } /* ================================================================================================================== */ /* Basics */ body { color: #555; font: 14px/1.4 'Open Sans',sans-serif; background-color: #e8ebed; } /* Standalone-Variante (, mit Fallback auf body.standalone) */ body.standalone, html.standalone body { height: auto; background-color: #fff; } html.standalone { height: auto; } img.originalsize { width: auto; } .container { position: relative; max-width: 1200px; margin: 0 auto; } .content { padding: 1em 2em; } .header, .promo, .nav, .main, .footer, .metabox { overflow: hidden; position: relative; margin: 2vmin 0; } .promo, .nav, .main, .metabox, .landing_teaser, .landing_teaser_full { background: #fff; box-shadow: 0 2px 2px rgba(0,0,0,0.1); } .promo, .main, .footer { width: 100%; clear: both; } /* ================================================================================================================== */ /* Page Header */ .header { float: left; width: 60%; padding: 0 2em; } .standalone .header { float: none; width: 100%; } .logo { width: 45%; } .logo img { /* this can be fixed values because space does not change until next screen width limit is reached */ height: 115px; width: 299px; } .logo_mobile { display: none; } /* ================================================================================================================== */ /* Metabox */ .metabox { margin-top: 0; float: right; width: 40%; } .metabox h2 { margin-top: 0; } .metabox .row { margin-bottom: 0; } /* ================================================================================================================== */ /* Promo */ .promo { font-size: 1.1em; } .promo.trailer { height: 405px; font-size: 1.442em; } .promo_images { position: absolute; top: 0; left: 0; bottom: 0; right: 40%; background: none; background-repeat: no-repeat; background-position: left center; background-size: cover; } .promo_trailer { position: absolute; top: 0; left: 0; bottom: 0; right: 40%; } .promo_image_claim_part { position: absolute; bottom: 0.4em; right: 0; padding: 0.25em 3em 0.25em 1em; background: rgba(255,255,255,0.9); z-index: 101; } .promo_image_claim_part_1 { right: 2em; bottom: 1em; padding-right: 1.5em; font-size: 2.5em; line-height: 1; letter-spacing: -0.025em; } .promo_image_claim_part_2 { font-size: 1.5em; line-height: 1; letter-spacing: -0.025em; } .promo_image_slider, .promo_image_slide, .promo_image_cover { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .promo_image_cover { display: none; } /* ================================================================================================================== */ /* Landing Page */ .sweepstake { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .sweepstake img:not([src$='landing_default_2.jpg']) { max-width: 637px; } .sweepstake img[src$='landing_default_2.jpg'] { max-width: none; } .landing .area_side:after { border: none; } .landing .area_side.content { /* min-height: 350px; */ } .landing .row { margin: 0; } #RegFrame { width: 100%; height: 455px; border: 1px solid #e3e3e3; } .bvm img { width: 20%; display: inline-block; cursor: pointer; padding-right: 1em; } /* Landing page trailer */ #play { position: absolute; width: 526px; height: 296px; background-image: url(/sweepstakes/landing_default_2.jpg); } #play_button { margin: 106px 0 0 232px; cursor: pointer; } #play_button, #endClipImage { width: auto; } #apDivContainer { position: absolute; width: 526px; height: 296px; border: 1px solid #aaa; z-index: 2; visibility: hidden; } #endClipImage { border: 1px solid #aaa; position: absolute; top: 0; display: none; width: 100%; z-index: 4; } /* Landing page teasers */ .landing_teasers { overflow: hidden; } .landing_teaser { position: relative; float: left; width: 32%; margin-left: 2%; cursor: pointer; } .landing_teaser_full { width: 100%; margin-left: 0; } .landing_teaser:first-child { margin-left: 0; } .landing_teaser_image { width: 33%; } .landing_teaser_full .landing_teaser_image { width: 10%; display: inline-block; vertical-align: top; } .landing_teaser_title, .landing_teaser_link { position: absolute; bottom: 1.2em; left: 40%; width: 60%; } .landing_teaser_title { top: 1.2em; bottom: auto; font-weight: 700; font-size: 1.2em; line-height: 1; } .landing_teaser_full .landing_teaser_title { display: inline-block; position: static; padding: 1% 0 1% 3%; width: 85%; line-height: 1.6em; } /* ================================================================================================================== */ /* Area divisions */ .area_main { float: left; width: 60%; } .area_side { position: relative; float: right; width: 40%; } .area_side.bonus { background: url(../img/recommend.png) 98% 2% no-repeat; } .area_side .with-image.linked { cursor: pointer; } .area_side:after { display: block; content: ''; position: absolute; top: 0; left: 0; bottom: 0; z-index: 2; width: 0; border-left: 1px solid #e3e3e3; } .area_below { position: relative; z-index: 3; clear: both; width: 100%; border-top: 1px solid #e3e3e3; background: #fff; } .area_below .grid_item img[src='/assets/img/partner_logos/amazon.svg'], .area_below .grid_item img[src='/assets/img/partner_logos/closeup.svg'] { margin: 0.3em 0 0.75em 0; } .area_below .grid_item:first-child { margin-bottom: 6em; } .area_below .grid_item { width: 20%; } @media (max-width: 480px) { .area_below .grid_item:first-child { margin-bottom: auto; float: none; } .area_below .grid_item img[src='/assets/img/partner_logos/moviechoice_padded.svg'] { margin-top: 0.3em; } } /* ================================================================================================================== */ /* Main Navigation */ nav ul { margin: 0; } .nav { margin: 1.5% 0; background-color: #ccc; box-shadow: 0 4px 2px rgba(0,0,0,0.05); } .nav ul { display: table; width: 100%; margin: 0; border-collapse: collapse; } .nav li { display: table-cell; } .nav a { display: block; height: 40px; padding: 0 0.6em; border: 0; color: #192e45; font: 700 1.125em/40px 'Open Sans Condensed'; text-decoration: none; text-align: center; transition: background-color 0.2s, color 0.2s; } .nav .active a { background-color: #192e45; color: #fff; } .nav .inactive a { color: #9fa4aa; } .nav a:hover { background-color: #fff; color: #192e45; } .nav_login { display: none; } /* ================================================================================================================== */ /* Footer */ .footer { padding: 0 2.33em; font-size: 0.857em; } .footer_nav { float: left; } .footer_copyright { float: right; } /* ================================================================================================================== */ /* Content formatting */ /* Content box */ .main_box { overflow: hidden; border: 1px solid #cbeaf7; padding: 0.5em; margin-top: 1.4em; } .main_box.has-error { border: 1px solid #f00; } .main_box.has-error h2, .main_box.has-error p.has-error { color: #f00; } .main_box.has-error p.has-error { font-size: 0.857em; } .main_box_part { float: left; padding: 0.5em; } .main_box_part_content { width: 65%; } .main_box.redeem .main_box_part_content { width: 35%; } .main_box_part_aside { width: 35%; text-align: center; } .main_box.redeem .main_box_part_aside { width: 65%; text-align: justify; } .main_box.mobile_extra_menu { padding: 0 3em; display: none; } .main_box.mobile_extra_menu div:last-child { float: right; } h1, .h1, h2.big { margin: 0.35em 0 0.7em; color: #246d92; font: 700 2em/1em 'Open Sans Condensed'; } h1.bonus { margin-top: 1em; } h2, .h2, dt { margin: 1em 0 0.5em; color: #246d92; font: 700 1.5em/1.2em 'Open Sans Condensed'; } h2:first-child { margin-top: 0; } .h1, .h2 { margin-top: 0; } h3 { font-weight: 600; } p { margin: 1em 0; } p.connector { margin: 0.1em 0; text-align: center; } p:first-child { margin-top: 0; } ul { margin: 1.4em 0; } .trailer ul { margin: 2em 0; } .trailer.ticket ul { margin: 1em 0; } .trailer.ticket h1 { margin: 0.35em 0 0.2em; } .trailer.star ul { margin: 1em 0; } .trailer.star h1 { margin: 0.35em 0 0.2em; } p:last-child, ul:last-child { margin-bottom: 0; } a { border-bottom: 1px dotted #192e45; color: #2eabde; font-weight: 700; text-decoration: none; transition: color 0.2s, background-color 0.2s; } a:hover { color: #192e45; border-bottom-style: solid; } strong { font-weight: 700; } /* Content trailer */ .content_trailer { position: relative; top: 0; left: 0; } /* MoviePanel proper name */ .moviepanel { font-weight: bold; color: #182d45; } .moviepanel span { color: #2dabde; } /* Grids */ .grid { overflow: hidden; } .grid_item { float: left; } .grid_5 .grid_item { width: 20%; } /* Icon lists */ ul.with-icon li { position: relative; margin-bottom: 0.75em; padding-left: 2em; } ul.with-icon li:after { display: inline-block; content: '✓'; position: absolute; top: 0; left: 0.25em; color: #7ac967; font-weight: 700; font-size: 1.5em; line-height: 1em; } ul.with-icon.disc li:after { content: '•'; top: -1px; color: #555; } .trailer ul.with-icon li:after { font-size: 1.6em; } /* Text with images */ .with-image { overflow: hidden; margin: 1.5em 0; } .with-image_image { float: left; width: 16%; } .with-image_text { float: right; width: 80%; } /* Horizontal row items */ .row { margin: 1em 0; } .row::after { display: block; content: ' '; clear: both; visibility: hidden; height: 0; font-size: 0; } .row_item, ul.row > li { float: left; margin-right: 1.5em; } .row_item:last-child { margin-right: 0; } .row_item_right { float: right; margin: 0; } /* Bonus Logo */ .bonus_logo { position: relative; top: 55px; left: 43%; background: url(../img/recommend.png) no-repeat; width: 95px; height: 95px; } /* Badge */ .badge { width: 100%; border-radius: 3em; padding: 0.1em 0.25em 0.35em 0.25em; margin-bottom: 0.7em; color: #2eabde; font-weight: 700; font-size: 2.5em; text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,0.2); border: 1px solid; } .badge span { display: block; font-size: 0.5em; } /* Content list */ .List li { margin-bottom: 20px; padding-left: 14px; line-height: 20px; } .List li:before { content: "»"; font-size: 14px; color: #2dabde; width: 13px; margin-left: -14px; text-align: left; display: inline-block; } /* Content table */ .table_points td { padding: 3px; } /* ================================================================================================================== */ /* Responsive "obfuscated" images */ .roi.magnifier { cursor: url(/assets/img/magnify.cur), auto; } .roic { border: 1px solid #555; } .roii { position: relative; background-repeat: no-repeat; background-size: cover; } .roid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .display_at_480 { display: none; } /* ================================================================================================================== */ /* Responsive/adaptive Layout */ @media screen and (max-width: 1140px) { #RegFrame { height: 545px; } input#LoginBox_SubmitButton { padding: 0.5em 0.5em; } } @media screen and (max-width: 1036px) { .promo.trailer { font-size: 1.2em; } .landing_teaser_title { font-size: 0.95em; } input#LoginBox_SubmitButton { padding: 0.5em 0.2em; } } @media screen and (max-width: 965px) { .area_side.bonus { background: none; } } @media screen and (max-width: 768px) { .area_side.bonus { background: url(../img/recommend.png) 98% 2% no-repeat; } #RegFrame { height: 455px; } .landing_teaser_title { font-size: 1.2em; } .landing_teaser_full .landing_teaser_title { top: 0.7em; font-size: 1em; } .promo_images, .area_main, .area_side, .area_below, .metabox { position: relative; top: 0; left: 0; bottom: 0; right: 0; float: none; width: auto; max-width: none; height: auto; max-height: none; } .promo.trailer { height: auto; } .promo_trailer { position: inherit; } body { font-size: 12px; } p, li { font-size: 1.1em; } body.standalone { margin-top: 45px; } .container { padding-top: 50px; } .no_menu .container { padding-top: 64px; } .container.no_header { padding-top: 0; } .content { padding: 0.5em 1em; } .header { position: fixed; top: 0; left: 0; z-index: 7233; width: 100%; height: 49px; margin: 0; padding-left: 6px; border-bottom: 1px solid rgba(0,0,0,0.2); background-color: rgba(255,255,255,0.95); transition: top 0.5s; } .header div.input_button { right: 30px; } .no_menu .header { padding-left: 12px; } .logo { display: none; } .logo_mobile { width: auto; display: block; } .logo_mobile img { width: auto; height: 36px; margin: 7px 0; } .promo_images { padding-bottom: 20vh; } .promo_images .promo_image_slide { background-size: 150%; } .landing_teaser { float: none; width: auto; margin-bottom: 1em; margin-left: 0; } .landing_teaser_full { float: left; } .area_main.landing, .area_side.landing { width: 100%; } .sweepstake { position: static; /* margin-top: 30px; */ } .sweepstake img { max-width: none; max-height: none; } .row { margin: 0.2em 0; } ul.with-icon li { margin-bottom: 0.35em; } .promo_image_claim_part_1 { bottom: 0.7em; } .promo_image_claim_part_2 { bottom: 0; } /* Mobile navigation */ .nav { position: fixed; top: 49px; right: -300px; bottom: 0; z-index: 7234; width: 80%; max-width: 280px; padding: 1em 0; margin: 0; border-right: 1px solid rgba(0,0,0,0.2); background-color: rgba(255,255,255,0.97); transition: right 0.6s; } .nav_open .nav { right: 0; } .nav ul, .nav li { display: block; } .nav_toggle { position: fixed; top: 0; right: 0; z-index: 7236; width: 48px; height: 48px; background: #fff; cursor: pointer; } .nav_toggle_icon, .nav_toggle_icon::before, .nav_toggle_icon::after { display: block; content: ''; position: absolute; top: 23px; left: 14px; width: 20px; height: 2px; background: #ccc; } .nav_toggle_icon::before, .nav_toggle_icon::after { top: -6px; left: 0; } .nav_toggle_icon::after { top: 6px; } .nav_open { overflow: hidden; } .faq h2 { cursor: pointer; text-decoration: underline; } .faq p { display: none; } /* Styles for trailer in content area */ .content_trailer { margin-left: 0.5em; } .promo_image_cover { display: block; z-index: 100; } .noShow768 { display: none; } /* Landing Page */ .landing .area_side.content { min-height: initial; } } @media screen and (max-width: 546px) { #RegFrame { height: 545px; } } @media screen and (max-width: 480px) { h1, .h1, h2.big { font-size: 1.5em; } h2, .h2, dt { font-size: 1.2em; } .promo_image_claim_part { background: rgba(255,255,255,0.8); } .promo_image_claim_part_1 { font-size: 2em; } .promo_image_claim_part_2 { font-size: 1.2em; } .main_box_part { /* Position reset */ position: relative; top: 0; left: 0; bottom: 0; right: 0; float: none; width: auto; max-width: none; height: auto; max-height: none; } .main_box.redeem .main_box_part_aside, .main_box.redeem .main_box_part_content { width: auto; } .grid_m2 .grid_item:first-of-type { width: 100% } .grid_m2 .grid_item { width: 25%; } .area_side.bonus { background: none; } .bonus_logo { left: 65%; } .section.promo ul, aside#LoginBox_LoginContainer, .noShow480 { display: none; } .nav_login { display: inline-block; position: fixed; top: 10px; right: 48px; z-index: 7237; } #Content_LoginBox_SubmitButton { padding: 0.5em 0; } .main_box.mobile_extra_menu { display: block; } .promo { font-size: 1em; } .sweepstake { /* margin-top: 77px; */ } .display_at_480 { display: block; } }