/* ******** ******** IE 9 FIX ******** Horizontal grid must be 100% height of viewport. ******** Modern browsers are okay if some wrapping tags do not specify height ******** Old IE req's that every wrapping tag up the chain to be height 100% ******** */ html.ie9 #wbk-body div[class^="dnn"], html.ie9 #wbk-body div[class^="Dnn"], html.ie9 #wbk-body div[class^="DNN"], html.ie9 #wbk-body div[id^="dnn"], html.ie9 #wbk-body div[id^="Dnn"], html.ie9 #wbk-body div[id^="DNN"] { height: 100%; } html.wbk-layout-desktop .isotope-wrapper div[class^="dnn"], html.wbk-layout-desktop .isotope-wrapper div[class^="Dnn"], html.wbk-layout-desktop .isotope-wrapper div[class^="DNN"], html.wbk-layout-desktop .isotope-wrapper div[id^="dnn"], html.wbk-layout-desktop .isotope-wrapper div[id^="Dnn"], html.wbk-layout-desktop .isotope-wrapper div[id^="DNN"] { /*height: 100%;*/ } html.ie9 #siteWrapper { height: 100%; } html.wbk-page-home.wbk-layout-phone #siteWrapper { position: relative; /* allows "return arrow, position absolute" to sit at bottom of page */ } /* ******** ******** ISOTOPES WRAPPER (table) ******** */ html.wbk-page-home.wbk-layout-desktop #wbk-body { min-width: 100%; } html.wbk-page-home.wbk-layout-desktop #isotopes-wrapper { display: table; height: 100%; min-width: 100%; } html.wbk-page-home.wbk-layout-phone #isotopes-wrapper { padding-top: 20px; } /* ******** ******** ISOTOPES (table row) ******** */ html.wbk-page-home.wbk-layout-desktop #isotopes { display: table-row; height: 100%; } html.wbk-page-home.wbk-layout-phone #isotopes { } /* ******** ******** ISOTOPE WRAPPERS (table cell) ******** */ html.wbk-page-home #isotopes .isotope-wrapper { background-color: #38a3a9; -webkit-transition: background-color, 1.5s; -moz-transition: background-color, 1.5s; -ms-transition: background-color, 1.5s; -o-transition: background-color, 1.5s; transition: background-color, 1.5s; } html.wbk-page-home.wbk-layout-desktop #isotopes .isotope-wrapper { background-image: url(images/desktop/page-home/background_pattern_black.png); background-position: top left; background-repeat: repeat-x, repeat-x; background-size: auto 100%; } html.wbk-page-home.wbk-layout-phone #isotopes .isotope-wrapper { background-image: url(images/phone/page-home/mobile_background_pattern_black.png); background-position: top left; background-repeat: repeat-y; background-size: 100% auto; } html.wbk-page-home #isotopes .isotope-wrapper.landing { background-color: #38a3a9; } html.wbk-page-home #isotopes .isotope-wrapper.videos { background-color: #6c419a; /*#8F5CD1;*/ } html.wbk-page-home #isotopes .isotope-wrapper.games { background-color: #f04d2a; /* #DA303B;*/ } html.wbk-page-home #isotopes .isotope-wrapper.comics { background-color: #feca12; /*#F8BA0A;*/ } html.wbk-page-home #isotopes .isotope-wrapper.downloads, html.wbk-page-home #isotopes .isotope-wrapper.showsmore { background-color: #a8cf38; /*#8FB50A;*/ } html.wbk-page-home.wbk-layout-desktop .isotope-wrapper { display: table-cell; position: relative; height: 100vh; min-width: 100vw; } /* hide any DNN titles, just in case */ html.wbk-page-home .isotope-wrapper h2 span.TitleH2 { display: none; } html.wbk-page-home.wbk-layout-phone .isotope-wrapper h2 span.TitleH2 { display: none; } html.wbk-page-home.wbk-layout-phone .isotope-wrapper { min-height: 500px; /* ensures each section is at least the height of the screen for better UX */ position: relative; margin-top: -50px; padding-top: 50px; } html.wbk-page-home.wbk-layout-phone .landing ul { padding-top: 0 !important; } /*Phone Title*/ html.wbk-page-home.wbk-layout-phone .featured-title { color: #ffffff; padding: 15% 3% 0; max-width: 80%; overflow: hidden; display: block; font-weight: bold; font-size: 26px; line-height: 29px; margin: 0 auto -10%; text-align: center; } html.wbk-page-home.wbk-layout-phone .featured-title { font-family: "Tobi","Arial Black",Arial,Helvetica,sans-serif; } html.wbk-page-home.wbk-layout-phone .featured-title { /* see also skins.css line 875 */ text-shadow: -1px 0 rgba(0, 0, 0, 0.7), 1px -1px 0 rgba(0, 0, 0, 0.7), -1px 1px 0 rgba(0, 0, 0, 0.7), 1px 1px 0 rgba(0, 0, 0, 0.7), -2px 2px rgba(48, 48, 48, 0.6); } html.wbk-page-home .isotope-wrapper-title, html.wbk-page-home.wbk-layout-phone .featured-title { display: none; } /* ******** ******** ISOTOPES ******** */ html.wbk-page-home .isotope { list-style: none outside none; margin: 0; padding: 0; } html.wbk-page-home.wbk-layout-desktop .isotope { height: 83%; margin: 3% 0 0; /*position: absolute !important;*/ /* for "animate out" */ top: 0; } /* ******** ******** ISOTOPE ITEMS: DEFAULT THUMBNAILS ******** */ .isotope-item { overflow: hidden; opacity: 0; /* hide until the item's image has been sized correctly, see wbk-page-home.js */ } /* exceptions */ .isotope-item.visibleStyle { opacity: 1; } html.wbk-layout-phone .isotope-item { overflow: inherit; opacity: 1; } html.wbk-layout-phone .isotope-item:last-child { padding-bottom: 25px; } /* Having the transform enabled while the isotope/page is resizing will probably break the layout. See wbk-page-home.js for when "on-hover" is added and removed. */ html.wbk-page-home.wbk-layout-desktop .isotope-item.on-hover:not(.mysterybox) { -moz-transform: scale(1.0); -ms-transform: scale(1.0); -o-transform: scale(1.0); -webkit-transform: scale(1.0); transform: scale(1.0); -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -moz-transition: all 0.7s ease-out; -o-transition: all 0.7s ease-out; -webkit-transition: all 0.7s ease-out; transition: all 0.7s ease-out; } html.wbk-page-home.wbk-layout-desktop .isotope-item.on-hover:not(.mysterybox).w05:hover, html.wbk-page-home.wbk-layout-desktop .isotope-item.on-hover:not(.mysterybox).w06:hover { -moz-transform: scale(1.04); -ms-transform: scale(1.04); -o-transform: scale(1.04); -webkit-transform: scale(1.04); transform: scale(1.04); -moz-transition-duration: 0.15s; -o-transition-duration: 0.15s; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; } html.wbk-page-home.wbk-layout-desktop .isotope-item.on-hover:not(.quickcard).w10:hover, html.wbk-page-home.wbk-layout-desktop .isotope-item.on-hover:not(.quickcard).w12:hover, html.wbk-page-home.wbk-layout-desktop .isotope-item.on-hover.joke.w10:hover, html.wbk-page-home.wbk-layout-desktop .isotope-item.on-hover.joke.w12:hover { -moz-transform: scale(1.015); -ms-transform: scale(1.015); -o-transform: scale(1.015); -webkit-transform: scale(1.015); transform: scale(1.015); } html.wbk-page-home.wbk-layout-desktop .isotope-item-inner { height: 100%; width: 99.8%; /*was 100%; - but this lets the indicator fit better*/ } html.wbk-page-home.wbk-layout-desktop .isotope-item.w06.h12 .aspect-ratio { height: 100%; } html.wbk-page-home.wbk-layout-desktop .isotope-item.w06.h12 .aspect-ratio a, html.wbk-page-home.wbk-layout-desktop .isotope-item.w06.h12 .aspect-ratio a figure, html.wbk-page-home.wbk-layout-desktop .isotope-item.w06.h12 .aspect-ratio a figure .wbk-image-wrapper { height: 100%; } html.wbk-page-home.wbk-layout-desktop .isotope-item.w06.h12 .indicator { height: 11.4%; } html.wbk-page-home.wbk-layout-phone .isotope-item.w06.h12 .indicator { top: -1.7%; } html.wbk-page-home .indicator { background-color: transparent; background-position: right top; background-repeat: no-repeat; background-size: 100% 100%; position: absolute; right: 2px; top: 3px; /* heights and widths are set in js */ /*height: 85px;*/ /*width: 120px;*/ } html.wbk-page-home .isotope-item.bucket-mobilepromo figcaption, html.wbk-page-home .isotope-item.gallery figcaption { background: none; } /*Hide promo title*/ html.wbk-page-home .isotope-item.carousel .image figcaption { display: none; } html.wbk-page-home.wbk-layout-desktop .isotope-item.gallery figcaption { height: 21%; } html.wbk-page-home.wbk-layout-desktop .isotope-item.gallery h3 { color: #fff; text-align: center; } html.wbk-page-home .isotope-item.game .indicator, .carousel .game .indicator { background-image: url("images/desktop/page-home/Hub_ContentIndicator_Games.png"); } html.wbk-page-home .isotope-item.video .indicator, .carousel .video .indicator { background-image: url("images/desktop/page-home/Hub_ContentIndicator_Videos.png"); } html.wbk-page-home .isotope-item.comicbook .indicator, .carousel .comicbook .indicator { background-image: url("images/desktop/page-home/Hub_ContentIndicator_Comics.png"); } html.wbk-page-home .isotope-item.downloadable .indicator, .carousel .downloadable .indicator { background-image: url("images/desktop/page-home/Hub_ContentIndicator_Downloads.png"); } html.wbk-page-home .isotope-item.character .indicator, .carousel .character .indicator, html.wbk-page-home .isotope-item.character.h12 .indicator { background-image: url("images/desktop/page-home/CharactersTab.png"); } html.wbk-page-home .isotope-item.product .indicator, .carousel .product .indicator, html.wbk-page-home .isotope-item.product.h12 .indicator { background-image: url("images/desktop/page-home/ProductsTab.png"); } html.wbk-page-home.wbk-layout-phone .isotope-item-inner { margin: 0 10px 1%; position: relative; } /* positioning only */ html.wbk-page-home figcaption, html.wbk-page-home .figcaption-bg { position: absolute; } html.wbk-page-home figcaption { color: #fff; /*height: 58px;*/ padding: 1% 2%; } html.wbk-page-home figcaption h3 { /*height: 1.2em;*/ line-height: 1.2em; margin: 1% 0; /*overflow: hidden;*/ text-shadow: 0 -1px black, -3px 3px rgba(27, 27, 27, 1); text-transform: uppercase; } html.wbk-page-home.wbk-layout-phone figcaption h3 { margin: 2% 0; overflow-wrap: break-word; font-size: 5.0vw; } html.wbk-page-home.wbk-layout-desktop figcaption div.indicator-offset { display: none; } html.wbk-page-home.wbk-layout-phone .w05.h04 figcaption div.indicator-offset, html.wbk-page-home.wbk-layout-phone .w12.h08 figcaption div.indicator-offset { display: none; } html.wbk-page-home.wbk-layout-phone .w06.h04 figcaption div.indicator-offset { float: right; width: 33%; height: 22%; } html.wbk-page-home.wbk-layout-desktop figcaption p { display: none; } html.wbk-page-home .w06.h12 .isotope-item-inner .featured-tile-caption { width: 62%; height: 15%; bottom: 3%; left: 22%; position: absolute; display: block; } html.wbk-page-home.wbk-layout-phone .w06.h12 .isotope-item-inner .featured-tile-caption { height: 28vw; height: calc(34vw - 20px); bottom: 4.5%; } html.wbk-page-home .w06.h12 .isotope-item-inner .featured-tile-caption h3 { font-family: "Tobi","Arial Black",Arial,Helvetica,sans-serif; font-size: 2vh; font-style: normal; font-weight: 400; line-height: 1.1em; text-shadow: none; color: #333; text-transform: uppercase; width: 100%; display: inline-block; vertical-align: middle; } html.wbk-page-home.wbk-layout-desktop .w06.h12 .isotope-item-inner .featured-tile-caption h3 { transform: translateY(-50%); top: 47%; position: relative; } html.wbk-page-home.wbk-layout-phone .w06.h12 .isotope-item-inner .featured-tile-caption h3 { transform: translateY(-50%); top: 50%; position: relative; } html.wbk-page-home.wbk-layout-phone .w06.h12 .isotope-item-inner .featured-tile-caption h3 { font-size: 4.5vw; } html.wbk-page-home .w06.h12 .isotope-item-inner .featured-tile-caption h3 .featured-copy { display: block; font-size: 1.4em; line-height: 1.1em; } /* exceptions > tablet */ @media (min-width: 768px) and (max-width: 1199px) { html.wbk-page-home.wbk-layout-desktop figcaption h3 { font-size: 16px; } html.wbk-page-home.wbk-layout-desktop figcaption p { font-size: 12px; } } html.wbk-page-home figcaption { background: none repeat scroll 0 0 rgba(0, 22, 36, 0.8); height: auto; -moz-transform: skewX(-5deg); -ms-transform: skewX(-5deg); -o-transform: skewX(-5deg); -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } html.wbk-page-home .w12 figcaption { left: 1.8%; right: 2.3%; } html.wbk-page-home.wbk-layout-phone .w12 figcaption { left: 1.6%; right: 2.5%; } html.wbk-page-home .w10 figcaption { left: 2%; right: 2.5%; } html.wbk-page-home.wbk-layout-phone .w10 figcaption { right: 3%; } html.wbk-page-home.wbk-layout-desktop .w06 figcaption { left: 3%; right: 4.5%; } html.wbk-page-home .w06.h12 figcaption { background: none; position: relative; top: -11.5%; left: 19%; width: 62%; max-width: 62%; } html.wbk-page-home .w06.h12 figcaption h3 { overflow: visible; font-size: 2vh; word-wrap: break-word; color: #333; position: relative; text-shadow: none; line-height: 1; } html.wbk-page-home.wbk-layout-phone .w06.h12 { position: relative; } html.wbk-page-home.wbk-layout-phone .w06.h12 figcaption { background: none; position: absolute; top: 87.5%; left: 18.5%; max-width: 66%; width: 66%; height: auto; } html.wbk-page-home.wbk-layout-phone .w06.h12 figcaption h3 { /* overflow: visible; */ /* word-wrap: break-word; */ color: #333; position: relative; text-shadow: none; font-size: 4.5vw !important; } html.wbk-page-home.wbk-layout-desktop .w05 figcaption { left: 4%; right: 6%; } html.wbk-page-home.wbk-layout-phone .h04 .figcaption-bg { display: none; } html.wbk-page-home .h12 figcaption { bottom: 0.8%; } html.wbk-page-home .h08 figcaption { bottom: 4%; } html.wbk-page-home.wbk-layout-desktop .h04 figcaption { bottom: 8%; } /*6X4 5X4 thumbnails for mobile*/ html.wbk-page-home.wbk-layout-phone .h04 .aspect-ratio { padding-bottom: 39.5%; } /*html.wbk-page-home.wbk-layout-phone .w05.h04 .aspect-ratio { padding-bottom: 32%; }*/ html.wbk-page-home.wbk-layout-phone .h04 a { position: absolute; height: 100%; width: 100%; } .wbk-page-home.wbk-layout-phone .h04 .aspect-ratio > a .wbk-image-wrapper { margin-top: 5%; margin-left: 6%; margin-right: 1%; } .wbk-page-home.wbk-layout-phone .w10.h08 .aspect-ratio { padding-bottom: 80%; height: 0; } .wbk-page-home.wbk-layout-phone .w12.h08 .aspect-ratio { padding-bottom: 66%; height: 0; } html.wbk-page-home.wbk-layout-phone figcaption p { display: none; } html.wbk-page-home.wbk-layout-phone figcaption h3 { top: 5px; /* height: inherit; */ } html.wbk-page-home.wbk-layout-phone .isotope-item.w10 figcaption h3, html.wbk-page-home.wbk-layout-phone .isotope-item.w12 figcaption h3 { line-height: 1em; } html.wbk-page-home.wbk-layout-phone .h08 figcaption, html.wbk-page-home.wbk-layout-phone .h08 .figcaption-bg { bottom: 3%; } html.wbk-page-home.wbk-layout-phone .h12 figcaption, html.wbk-page-home.wbk-layout-phone .h12 .figcaption-bg { bottom: 0.3%; } /*5X4 Image to the right*/ html.wbk-page-home.wbk-layout-phone .w05.h04 .aspect-ratio > a .wbk-image-wrapper { width: 40%; float: right; margin-right: 5%; height: 100%; margin-top: 4%; margin-left: 0; } html.wbk-page-home.wbk-layout-phone .w05.h04 figcaption { padding: 0 0 10px 8%; width: 49%; } /*MysteryBox Phone full width*/ html.wbk-page-home.wbk-layout-phone .mysterybox canvas { width: 100%; } html.wbk-page-home.wbk-layout-phone .mysterybox .isotope-item-inner { background-image: none !important; } .mystery-box-wrapper { cursor: pointer; position: relative; width: 100%; } .mystery-box-wrapper img { width: 100%; z-index: 1; } .mystery-box-wrapper canvas { left: 0; position: absolute; top: 0; width: 100%; z-index: 2; } /* KW-3832 Mobile carousel */ html.wbk-layout-phone .isotope-item.carousel .bxslider li a:hover { -moz-transform: none; -ms-transform: none; -o-transform: none; -webkit-transform: none; transform: none; } html.wbk-layout-phone .isotope-item.carousel .isotope-item-inner { background: none !important; } html.wbk-page-home.wbk-layout-phone .carousel .aspect-ratio > a .wbk-image-wrapper, html.wbk-page-home.wbk-layout-phone .carousel .aspect-ratio > a .wbk-image-wrapper img { margin: 0; width: 100%; height: 100%; max-height: 100%; } html.wbk-page-home.wbk-layout-phone .isotope-item.carousel .aspect-ratio { padding-bottom: 66%; } /* ******** ******** ISOTOPE BRIDGES ******** */ html.wbk-page-home .bridge { } html.wbk-page-home.wbk-layout-desktop .bridge { display: none; background-image: url('images/desktop/page-home/bridge.png'); background-position: top center; background-repeat: no-repeat; background-color: transparent; background-size: auto 100%; position: absolute; right: 0; top: 0; z-index: 1; } html.wbk-page-home.wbk-layout-desktop #downloadables .bridge { background-image: url('images/desktop/page-home/bridge-end.png'), url(images/desktop/page-home/grad-downloadables.jpg); background-position: top right; } html.wbk-page-home.wbk-layout-phone .bridge { background-image: url('images/phone/page-home/bridge.png'); background-position: center left; background-repeat: no-repeat; background-color: transparent; background-size: 100% auto; position: absolute; right: 0; left: 0; width: 100vw; } html.wbk-page-home.wbk-layout-phone #downloadables .bridge { /*background-color: ;*/ background-image: url('images/phone/page-home/bridge-end.png'); background-position: bottom left; } /* ******** ******** ISOTOPE PLACEHOLDERS ******** */ .isotope .placeholder { opacity: 0; } /* ******** ******** ISOTOPE IMAGES ******** */ .isotope .wbk-thumb { width: 100%; } .wbk-layout-desktop .isotope .h12.w06 .wbk-thumb { /* see line 286 */ /* height: 96.5%; position: relative; top: -2.8%; */ height: 100%; } .wbk-layout-phone .isotope .h12.w06 .wbk-thumb { /* see line 286 */ height: auto; position: relative; top: -4.7vw; } .isotope .wbk-thumb-type { display: none; } /** hide title is checked in CMS KW-6736 */ .wbk-layout-phone .isotope .h12.w06 .hide-title .featured-tile-caption, .wbk-layout-desktop .isotope .h12.w06 .hide-title .featured-tile-caption { display: none; } /* ******** ******** ENDLESS SCROLL (DESKTOP) ******** */ /* placeholder: vertical center, horizontal 50% */ html.wbk-layout-desktop #nudge-arrow-outer { position: fixed; right: 0; top: 45%; } html.wbk-layout-desktop #nudge-arrow { background: url("images/desktop/page-home/arrow-right.png") no-repeat scroll top right transparent; cursor: pointer; height: 156px; position: relative; /*right: see skin.css ;*/ top: -78px; width: 111px; /* http://matthewlein.com/ceaser/ */ -webkit-transition: right 500ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition: right 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: right 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: right 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: right 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ } /*right: see skin.css ;*/ /*html.wbk-layout-desktop #nudge-arrow:hover { right: ; }*/ html.wbk-layout-desktop #wbk-body { left: 0; /* http://matthewlein.com/ceaser/ */ -webkit-transition: left 500ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition: left 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: left 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: left 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: left 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ } html.wbk-layout-desktop #wbk-body.SWAP_DOWNLOADABLES { background-image: url(images/desktop/page-home/hero-downloadables.jpg), url(images/desktop/page-home/grad-downloadables.jpg); } html.wbk-layout-desktop.page-nudge-right #wbk-body { left: -100px; } /* placeholder: vertical center, horizontal 50% */ html.wbk-layout-desktop #return-arrow-outer { display: none; position: fixed; right: 0; top: 45%; } html.wbk-layout-desktop #return-arrow { background: url("images/desktop/page-home/arrow-left.png") no-repeat scroll top right transparent; cursor: pointer; height: 156px; position: relative; /*right: see skin.css ;*/ top: -78px; width: 111px; /* http://matthewlein.com/ceaser/ */ -webkit-transition: right 500ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition: right 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: right 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: right 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: right 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ } /*right: see skin.css ;*/ /*html.wbk-layout-desktop #return-arrow:hover { right: ; }*/ /* exceptions > tablet */ @media (min-width: 768px) and (max-width: 1199px) { html.wbk-layout-desktop #nudge-arrow, html.wbk-layout-desktop #return-arrow { background-size: 80%; height: 120px; } } /* ******** ******** ENDLESS SCROLL (PHONE) ******** */ html.wbk-layout-phone #wbk-body { overflow-y: hidden; } html.wbk-layout-phone #nudge-arrow-outer { display: none; } html.wbk-layout-phone #return-arrow-outer { position: absolute; bottom: 0; left: 50%; } html.wbk-layout-phone #return-arrow { cursor: pointer; height: 100px; left: -90px; position: relative; width: 180px; } #endlessScrollNoClick { background: #000; bottom: 0; display: none; left: 0; opacity: 0.75; position: fixed; top: 0; right: 0; z-index: 1000; } /* ******** ******** ENDLESS SCROLL (CANVASES) ******** */ #endlessScrollWeb-wrapper { display: none; opacity: 0; position: fixed; z-index: 1001; bottom: 0; left: 0; right: 0; top: 0; } #endlessScrollWeb { position: fixed; z-index: 1001; top: 0; left: 0; } #endlessScrollMobile-wrapper { display: none; opacity: 0; position: fixed; z-index: 1001; bottom: 0; left: 0; right: 0; top: 0; } #endlessScrollMobile { position: fixed; z-index: 1001; bottom: 0; left: 0; } html.wbk-layout-desktop .bridge-wrapper { position: relative; float: right; } html.wbk-layout-desktop .isotope-wrapper > div { float: left; } html.wbk-page-home .isotope-item.bucket-mobilepromo figcaption, html.wbk-page-home .isotope-item.bucket-mobilepromo .indicator { display: none; } html.wbk-page-home.wbk-layout-phone .isotope-item.bucket-mobilepromo.w05.h04 .aspect-ratio { padding-bottom: 80%; } html.wbk-page-home.wbk-layout-phone .isotope-item.bucket-mobilepromo.w06.h04 .aspect-ratio { padding-bottom: 66%; } html.wbk-page-home.wbk-layout-phone .isotope-item.bucket-mobilepromo.h04 .isotope-item-inner { background: none; } html.wbk-page-home.wbk-layout-phone .isotope-item.bucket-mobilepromo.h04 .aspect-ratio > a .wbk-image-wrapper { float: none; width: 100%; margin: 0; height: 100%; } html.wbk-page-home.wbk-layout-phone .isotope-item.bucket-mobilepromo.h04 .aspect-ratio > a .wbk-image-wrapper img { max-height: 100%; } /*Home page Carousel*/ .isotope-item-inner .bxslider { height: 100% !important; margin: 0 !important; } .isotope-item-inner .bx-viewport { left: 0; } .isotope-item-inner .bx-viewport, .isotope-item-inner { position: relative; } .isotope-item-inner .bx-wrapper .bx-controls-direction a { background: url('images/desktop/carousel/carousel-arrows-homepage.png') no-repeat 0 0 transparent !important; padding: 0; top: 50%; margin-top: -37px; /*-40px;*/ width: 12%; /*10%;*/ height: 25%; /*22%;*/ z-index: 0; background-size: 200% !important; z-index: 0; opacity: 0.5; } .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-prev { left: 15px; /*26px;*/ background-position: right top !important; } .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-prev:hover { background: url('images/desktop/carousel/carousel-arrows-homepage-hit.png') no-repeat 0 0 transparent !important; left: 15px; /*26px;*/ background-position: right top !important; background-size: 200% !important; opacity: 1.0; } .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-next { right: 6px; /*21px;*/ background-position: left top !important; } .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-next:hover { background: url('images/desktop/carousel/carousel-arrows-homepage-hit.png') no-repeat 0 0 transparent !important; right: 6px; /*21px;*/ background-position: left top !important; background-size: 200% !important; opacity: 1.0; } /* KW-2887 */ @media (min-width: 501px) and (max-width: 1199px) { .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-prev:hover, .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-prev, .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-next:hover, .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-next { margin-top: -37px; height: 30%; width: 10%; } .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-next:hover, .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-next { right: 6px; } .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-prev:hover, .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-prev { left: 15px; } } @media (min-width: 501px) and (max-width: 667px) { .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-prev:hover, .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-prev, .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-next:hover, .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-next { margin-top: -37px; height: 30%; width: 10%; } .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-next:hover, .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-next { right: 0px; margin-right: 3.5%; } .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-prev:hover, .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-prev { left: 0px; margin-left: 5%; } } @media (max-width: 500px) { .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-prev:hover, .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-prev, .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-next:hover, .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-next { margin-top: -10%; height: 35%; width: 15%; } .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-next:hover, .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-next { right: 0px; margin-right: 4%; } .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-prev:hover, .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-prev { left: 0px; margin-left: 5%; } } /* LEFT LOGO */ #wbk-left-logo { /*background-image: url('images/desktop/nav-left/hub_wbkidsicon.png'), url('images/desktop/nav-left/logoheader.png'); background-size: auto 100%, auto 100%; background-repeat: no-repeat, no-repeat; background-position: 15px -10px, left top; width: 100%; height: 180px; position: absolute; left: 0; top: 0;*/ background-image: url('images/desktop/nav-top/logo-header-horizontal.png'); background-repeat: no-repeat; width: 188px; height: 208px; position: absolute; top: 0; left: 0; cursor: pointer; background-size: 90%; } /* TOP NAV RWD */ @media screen and (max-width: 1200px) { html.wbk-page-home #wbk-desktop-top-nav .local-nav, html.wbk-page-home #wbk-desktop-bottom-nav, html.wbk-page-home #wbk-left-logo { -moz-transform: scale(0.80); -ms-transform: scale(0.80); -o-transform: scale(0.80); -webkit-transform: scale(0.80); transform: scale(0.80); } html.wbk-page-home #wbk-left-logo { -moz-transform-origin: left top 0; -ms-transform-origin: left top 0; -o-transform-origin: left top 0; -webkit-transform-origin: left top 0; transform-origin: left top 0; } } @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) { /* KW-4300 */ html.wbk-page-home4 #wbk-desktop-top-nav .local-nav, html.wbk-page-home4 #wbk-desktop-bottom-nav { -moz-transform: scale(0.85); -ms-transform: scale(0.85); -o-transform: scale(0.85); -webkit-transform: scale(0.85); transform: scale(0.85); } html.wbk-page-home4 #wbk-left-logo { -moz-transform: scale(0.65); -ms-transform: scale(0.65); -o-transform: scale(0.65); -webkit-transform: scale(0.65); transform: scale(0.65); } } @media screen and (max-width: 900px) { html.wbk-page-home #wbk-desktop-top-nav .local-nav, html.wbk-page-home #wbk-desktop-bottom-nav, html.wbk-page-home #wbk-left-logo { -moz-transform: scale(0.70); -ms-transform: scale(0.70); -o-transform: scale(0.70); -webkit-transform: scale(0.70); transform: scale(0.70); } html.wbk-page-home #wbk-left-logo { -moz-transform-origin: left top 0; -ms-transform-origin: left top 0; -o-transform-origin: left top 0; -webkit-transform-origin: left top 0; transform-origin: left top 0; } } /* SCROLL ARROWS */ html.wbk-layout-desktop #scroll-right-arrow-outer { position: fixed; right: 0; top: 45%; } html.wbk-layout-desktop #scroll-right-arrow { background: url("images/desktop/page-home/arrow-right.png") no-repeat scroll top right transparent; cursor: pointer; height: 156px; position: relative; top: -78px; width: 111px; right: -111px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); -webkit-transform: scale(0.8); transform: scale(0.8); -moz-transform-origin: right center 0; -ms-transform-origin: right center 0; -o-transform-origin: right center 0; -webkit-transform-origin: right center 0; transform-origin: right center 0; -webkit-transition: right 500ms ease-in-out; -moz-transition: right 500ms ease-in-out; -o-transition: right 500ms ease-in-out; transition: right 500ms ease-in-out; } html.wbk-layout-desktop #scroll-right-arrow.visible-arrow { right: 0; } html.wbk-layout-desktop #scroll-right-arrow.visible-arrow.reverse { background: url("images/desktop/page-home/arrow-left.png") no-repeat scroll top right transparent; } html.wbk-layout-desktop #scroll-left-arrow-outer { position: fixed; left: 0; top: 45%; } html.wbk-layout-desktop #scroll-left-arrow { background: url("images/desktop/page-home/arrow-left1.png") no-repeat scroll top left transparent; cursor: pointer; width: 111px; height: 156px; position: relative; left: -111px; top: -78px; -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); -webkit-transform: scale(0.8); transform: scale(0.8); -moz-transform-origin: left center 0; -ms-transform-origin: left center 0; -o-transform-origin: left center 0; -webkit-transform-origin: left center 0; transform-origin: left center 0; -webkit-transition: left 500ms ease-in-out; -moz-transition: left 500ms ease-in-out; -o-transition: left 500ms ease-in-out; transition: left 500ms ease-in-out; } html.wbk-layout-desktop #scroll-left-arrow.visible-arrow { left: 0; } /* SCROLL ARROWS RWD */ @media screen and (max-width: 1200px) { html.wbk-layout-desktop #scroll-left-arrow-outer, html.wbk-layout-desktop #scroll-right-arrow-outer { -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); -webkit-transform: scale(0.8); transform: scale(0.8); } html.wbk-layout-desktop #scroll-left-arrow-outer { -moz-transform-origin: left center 0; -ms-transform-origin: left center 0; -o-transform-origin: left center 0; -webkit-transform-origin: left center 0; transform-origin: left center 0; } html.wbk-layout-desktop #scroll-right-arrow-outer { -moz-transform-origin: right center 0; -ms-transform-origin: right center 0; -o-transform-origin: right center 0; -webkit-transform-origin: right center 0; transform-origin: right center 0; } } @media screen and (max-width: 900px) { html.wbk-layout-desktop #scroll-left-arrow-outer, html.wbk-layout-desktop #scroll-right-arrow-outer { -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); -webkit-transform: scale(0.7); transform: scale(0.7); } html.wbk-layout-desktop #scroll-left-arrow-outer { -moz-transform-origin: left center 0; -ms-transform-origin: left center 0; -o-transform-origin: left center 0; -webkit-transform-origin: left center 0; transform-origin: left center 0; } html.wbk-layout-desktop #scroll-right-arrow-outer { -moz-transform-origin: right center 0; -ms-transform-origin: right center 0; -o-transform-origin: right center 0; -webkit-transform-origin: right center 0; transform-origin: right center 0; } } /** QUICK CARDS **/ .quick-card-inner { font-family: Tobi, "Arial Black", Arial, Helvetica, sans-serif; color: #fff; font-weight: 400; line-height: 1.1em; text-shadow: 0 -1px rgba(0, 0, 0, 0.3), -3px 3px rgba(27, 27, 27, 0.3); word-wrap: break-word; -webkit-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; } .wbk-layout-desktop .quick-card-inner { font-size: 2.8vh; } .wbk-layout-phone .quick-card-inner { font-size: 4vw; } .wbk-layout-phone .w12.h08 .quick-card-inner { font-size: 3.5vw; } .quick-card-inner .question, .quick-card-inner .correct, .quick-card-inner .incorrect { background-repeat: no-repeat; background-size: 100% auto; width: 100%; height: 100%; position: absolute; } .w12.h08 .quick-card-inner .question, .w12.h08 .quick-card-inner .correct, .w12.h08 .quick-card-inner .incorrect { width: 90%; left: 5%; } .quick-card-inner .question-inner { width: 100%; height: 50%; position: absolute; top: 0; left: 0; display: table; table-layout: fixed; padding-left: 15%; padding-right: 30%; } .w12.h08 .quick-card-inner .question-inner { height: 55%; padding-right: 25%; } .quick-card-inner .question-inner p { line-height: inherit; vertical-align: middle; display: table-cell; text-align: left; } .quick-card-inner .question-inner p strong { display: block; color: black; text-shadow: none; font-size: 1.1em; font-weight: 200; line-height: 1.3em; } .quick-card-inner .character img { width: 40%; position: absolute; bottom: 0; right: 0; } .w10.h08 .quick-card-inner .character img { bottom: 2%; /*KW-5363*/ } .w12.h08 .quick-card-inner .character img { width: 34%; } .quick-card-inner .answers { position: absolute; bottom: 5%; left: 8%; width: 55%; white-space: nowrap; } .w12.h08 .quick-card-inner .answers { bottom: 2%; left: 12%; } .quick-card-inner .answers li { list-style: none; position: relative; display: block; cursor: pointer; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; height: 2em; width: 100%; overflow: hidden; } .wbk-layout-phone .w12.h08 .quick-card-inner .answers li { height: 1.8em; } .wbk-layout-desktop .quick-card-inner .answers li:hover { -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); -webkit-transform-origin: 1em center; -moz-transform-origin: 1em center; -ms-transform-origin: 1em center; -o-transform-origin: 1em center; transform-origin: 1em center; } .quick-card-inner .answers li .answer-check-box { background-repeat: no-repeat; background-size: auto 100%; width: 2em; height: 1.6em; display: inline-block; vertical-align: middle; } .quick-card-inner .answers li .answer-check-mark { background-repeat: no-repeat; background-size: auto 100%; width: 2em; height: 1.6em; position: absolute; display: block; top: -0.4em; left: 0.2em; } .quick-card-inner .results { position: absolute; bottom: 5%; left: 6%; width: 50%; white-space: nowrap; } .w12.h08 .quick-card-inner .results { bottom: 2%; left: 12%; width: 40%; } .quick-card-inner .results li { list-style: none; position: relative; display: block; margin-bottom: 6%; width: 100%; } .quick-card-inner .results li:nth-child(2) { margin-left: -0.2em; } .quick-card-inner .results li:nth-child(3) { margin-left: -0.4em; } .quick-card-inner .results li:nth-child(4) { margin-left: -0.6em; } .quick-card-inner .results li .result-progress-bar { width: 100%; height: 2em; position: absolute; display: block; background-size: 100% auto; background-repeat: no-repeat; z-index: -10; padding-left: 0.35em; padding-top: 0.08em; padding-right: 0.1em; } .quick-card-inner .results li .result-progress-bar-inner { position: relative; display: block; width: 100%; height: 100%; } .quick-card-inner .results li .result-progress-line { width: 100%; height: 100%; position: absolute; display: block; background-size: 100% auto; background-repeat: no-repeat; background-clip: content-box; } .quick-card-inner .results li .answer { padding-left: 0.8em; font-size: 0.8em; display: block; position: relative; width: 80%; overflow: hidden; } .quick-card-inner .results li .result { font-size: 0.7em; color: black; text-shadow: none; display: block; position: absolute; top: 0; right: 0.5em; } .quick-card-inner .punchline { position: absolute; top: 50%; left: 10%; width: 50%; height: 40%; display: table; } .quick-card-inner .punchline p { line-height: inherit; vertical-align: middle; display: table-cell; text-align: center; } .wbk-layout-phone .w12.h08 .quick-card-inner .punchline { top: 60%; } html.wbk-page-home.wbk-layout-desktop .isotope-item.joke { cursor: pointer; }