/* ================================================ 12 COLUMN GRID - 980px grid - 56px columns (5.71428572%) - 14px margins (1.42857143%) = 28px gutter (2.85714286%) - first col has no left gutter, last col has no right gutter - .no-margin class switches gutter from margin to padding - .wrapper.gutter adds padding on left/right when content is within a colored container (WiiU/3DS pages) - width: ( 100 - ( NUM_GUTTERS * GUTTER_WIDTH ) ) / NUM_COLUMNS; ================================================ */ /* ----------------------------------- Common ----------------------------------- */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } img { height: auto; max-width: 100%; min-width: 0; outline: none; width: auto; } /* responsive video */ .video-player { height: 0; overflow: hidden; padding-bottom: 56.25%; position: relative; } .poster-player, .poster-player * { pointer-events: none; } .video-player iframe, .video-player object, .video-player embed, .video-player > div, .video-player video { height: 100% !important; left: 0; position: absolute; top: 0; width: 100% !important; } /* ----------------------------------- Grid Layout ----------------------------------- */ .wrapper { margin-left: auto; margin-right: auto; max-width: 980px; min-width: 960px; width: 980px; } header .wrapper { max-width: 1440px; width: 96%; } .wrapper.gutter { padding-left: 20px; padding-right: 20px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .row { display: block; list-style: none outside none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } .row:after { clear: both; content: ""; display: block; height: 0; visibility: hidden; } .row .column, .row > li { float: left; margin-left: 1.42857143%; margin-right: 1.42857143%; position: relative; width: 5.71428572%; } .no-margin .column, .no-margin > li { margin-left: 0; margin-right: 0; padding-left: 1.42857143%; padding-right: 1.42857143%; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } /* Remove margins by default on every 12th column */ .row > li:nth-child(12n+12), .row > .column:nth-child(12n+12) { margin-right: 0; } .row > li:nth-child(12n+1), .row > .column:nth-child(12n+1) { margin-left: 0; } .no-margin > li:nth-child(12n+12), .no-margin > .column:nth-child(12n+12) { padding-right: 0; } .no-margin > li:nth-child(12n+1), .no-margin > .column:nth-child(12n+1) { padding-left: 0; } /* Set uniform column widths */ .row-11cols > li, .row-11cols > .column { width:6.4935065%; } .row-10cols > li, .row-10cols > .column { width:7.4285714%; } .row-9cols > li, .row-9cols > .column { width:8.57142857%; } .row-8cols > li, .row-8cols > .column { width:9.99999999%; } .row-7cols > li, .row-7cols > .column { width:11.8367346%; } .row-6cols > li, .row-6cols > .column { width:14.2857143%; } .row-5cols > li, .row-5cols > .column { width:17.714285712%; } .row-4cols > li, .row-4cols > .column { width:22.85714286%; } .row-3cols > li, .row-3cols > .column { width:31.42857143%; } .row-2cols > li, .row-2cols > .column { width:48.57142857%; } .row-1cols > li, .row-1cols > .column { margin-left: 0; margin-right: 0; width: 100%; } /* Remove Margin/Padding on First/Last columns */ .row .column:first-child, .row li:first-child { margin-left: 0; } .row .column:last-child, .row li:last-child { margin-right: 0; } .row.no-margin .column:first-child, .row.no-margin li:first-child { padding-left: 0; } .row.no-margin .column:last-child, .row.no-margin li:last-child { padding-right: 0; } .colum .center { margin: 0 auto; text-align: center; } /* Custom column widths */ .row .col11 { width: 91.42857143%; } .row .col10 { width: 82.85714286%; } .row .col9 { width: 74.28571429%; } .row .col8 { width: 65.71428571%; } .row .col7 { width: 57.14285714%; } .row .col6 { width: 48.57142857%; } .row .col5 { width: 40%; } .row .col4 { width: 31.42857143%; } .row .col3 { width: 22.85714286%; } .row .col2 { width: 14.2857143%; } /*.col1 { width: 5.71428572%; }*/ /* ================================================ RESPONSIVE BASE ================================================ */ @media screen and (max-width: 980px) { .wrapper { max-width: 96%; min-width: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .wrapper.gutter { padding-left: 2%; padding-right: 2%; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } } @media screen and (min-width: 769px) and (max-width: 900px) { /* Custom column widths */ .row .col12-dtab { width: 100%; float: none; clear: both; margin-left: 0; margin-right: 0; } .row .col11-dtab { width: 91.42857143%; } .row .col10-dtab { width: 82.85714286%; } .row .col9-dtab { width: 74.28571429%; } .row .col8-dtab { width: 65.71428571%; } .row .col7-dtab { width: 57.14285714%; } .row .col6-dtab { width: 48.57142857%; } .row .col5-dtab { width: 40%; } .row .col4-dtab { width: 31.42857143%; } .row .col3-dtab { width: 22.85714286%; } .row .col2-dtab { width: 14.2857143%; } .row .col1-dtab { width: 5.71428572%; } } /* ================================================ DESKTOP VIEW ================================================ */ @media screen and (min-width: 769px) { /* Full Column Width */ .row .col12 { clear: both; float: none; margin-left: 0; margin-right: 0; width: 100%; } /* Remove margin/padding on first last columns in even width rows */ .row-1cols.no-margin > li .row-1cols.no-margin > .column { padding-left: 0; padding-right: 0; } .row-2cols > li:nth-child(odd), .row-2cols > .column:nth-child(odd), .row-3cols > li:nth-child(3n+1), .row-3cols > .column:nth-child(3n+1), .row-4cols > li:nth-child(4n+1), .row-4cols > .column:nth-child(4n+1), .row-5cols > li:nth-child(5n+1), .row-5cols > .column:nth-child(5n+1), .row-6cols > li:nth-child(6n+1), .row-6cols > .column:nth-child(6n+1), .row-7cols > li:nth-child(7n+1), .row-7cols > .column:nth-child(7n+1), .row-8cols > li:nth-child(8n+1), .row-8cols > .column:nth-child(8n+1), .row-9cols > li:nth-child(9n+1), .row-9cols > .column:nth-child(9n+1), .row-10cols > li:nth-child(10n+1), .row-10cols > .column:nth-child(10n+1), .row-11cols > li:nth-child(11n+1), .row-11cols > .column:nth-child(11n+1), .row-12cols > li:nth-child(12n+1), .row-12cols > .column:nth-child(12n+1) { clear: both; margin-left: 0; } .row-2cols > li:nth-child(even), .row-2cols > .column:nth-child(even), .row-3cols > li:nth-child(3n+3), .row-3cols > .column:nth-child(3n+3), .row-4cols > li:nth-child(4n+4), .row-4cols > .column:nth-child(4n+4), .row-5cols > li:nth-child(5n+5), .row-5cols > .column:nth-child(5n+5), .row-6cols > li:nth-child(6n+6), .row-6cols > .column:nth-child(6n+6), .row-7cols > li:nth-child(7n+7), .row-7cols > .column:nth-child(7n+7), .row-8cols > li:nth-child(8n+8), .row-8cols > .column:nth-child(8n+8), .row-9cols > li:nth-child(9n+9), .row-9cols > .column:nth-child(9n+9), .row-10cols > li:nth-child(10n+10), .row-10cols > .column:nth-child(10n+10), .row-11cols > li:nth-child(11n+11), .row-11cols > .column:nth-child(11n+11), .row-12cols > li:nth-child(12n+12), .row-12cols > .column:nth-child(12n+12) { margin-right: 0; } .row-2cols.no-margin > li:nth-child(odd), .row-2cols.no-margin > .column:nth-child(odd), .row-3cols.no-margin > li:nth-child(3n+1), .row-3cols.no-margin > .column:nth-child(3n+1), .row-4cols.no-margin > li:nth-child(4n+1), .row-4cols.no-margin > .column:nth-child(4n+1), .row-5cols.no-margin > li:nth-child(5n+1), .row-5cols.no-margin > .column:nth-child(5n+1), .row-6cols.no-margin > li:nth-child(6n+1), .row-6cols.no-margin > .column:nth-child(6n+1), .row-7cols.no-margin > li:nth-child(7n+1), .row-7cols.no-margin > .column:nth-child(7n+1), .row-8cols.no-margin > li:nth-child(8n+1), .row-8cols.no-margin > .column:nth-child(8n+1), .row-9cols.no-margin > li:nth-child(9n+1), .row-9cols.no-margin > .column:nth-child(9n+1), .row-10cols.no-margin > li:nth-child(10n+1), .row-10cols.no-margin > .column:nth-child(10n+1), .row-11cols.no-margin > li:nth-child(11n+1), .row-11cols.no-margin > .column:nth-child(11n+1), .row-12cols.no-margin > li:nth-child(12n+1), .row-12cols.no-margin > .column:nth-child(12n+1) { padding-left: 0; } .row-2cols.no-margin > li:nth-child(even), .row-2cols.no-margin > .column:nth-child(even), .row-3cols.no-margin > li:nth-child(3n+3), .row-3cols.no-margin > .column:nth-child(3n+3), .row-4cols.no-margin > li:nth-child(4n+4), .row-4cols.no-margin > .column:nth-child(4n+4), .row-5cols.no-margin > li:nth-child(5n+5), .row-5cols.no-margin > .column:nth-child(5n+5), .row-6cols.no-margin > li:nth-child(6n+6), .row-6cols.no-margin > .column:nth-child(6n+6), .row-7cols.no-margin > li:nth-child(7n+7), .row-7cols.no-margin > .column:nth-child(7n+7), .row-8cols.no-margin > li:nth-child(8n+8), .row-8cols.no-margin > .column:nth-child(8n+8), .row-9cols.no-margin > li:nth-child(9n+9), .row-9cols.no-margin > .column:nth-child(9n+9), .row-10cols.no-margin > li:nth-child(10n+10), .row-10cols.no-margin > .column:nth-child(10n+10), .row-11cols.no-margin > li:nth-child(11n+11), .row-11cols.no-margin > .column:nth-child(11n+11), .row-12cols.no-margin > li:nth-child(12n+11), .row-12cols.no-margin > .column:nth-child(12n+12) { padding-right: 0; } /* Push Full Column/Gutter Width */ .row .column.push11, .row li.push11 { left: 94.2857137%; } .row .column.push10, .row li.push10 { left: 85.7142852%; } .row .column.push9, .row li.push9 { left: 77.1428567%; } .row .column.push8, .row li.push8 { left: 68.5714282%; } .row .column.push7, .row li.push7 { left: 59.9999999%; } .row .column.push6, .row li.push6 { left: 51.4285711%; } .row .column.push5, .row li.push5 { left: 42.8571426%; } .row .column.push4, .row li.push4 { left: 34.2857141%; } .row .column.push3, .row li.push3 { left: 25.7142856%; } .row .column.push2, .row li.push2 { left: 17.1428571%; } .row .column.push1, .row li.push1 { left: 8.57142857%; } /* Push Column Width only. No Gutter */ .row .column.pushcol, .row li.pushcol { left: 5.71428572%; } /* Push Gutter Width only. No Column */ .row .column.pushmargin, .row li.pushmargin { left: 2.85714286%; } /* Pull Full Column/Gutter Width */ .row .column.pull11, .row li.pull11 { left: -94.2857137%; } .row .column.pull10, .row li.pull10 { left: -85.7142852%; } .row .column.pull9, .row li.pull9 { left: -77.1428567%; } .row .column.pull8, .row li.pull8 { left: -68.5714282%; } .row .column.pull7, .row li.pull7 { left: -59.9999999%; } .row .column.pull6, .row li.pull6 { left: -51.4285711%; } .row .column.pull5, .row li.pull5 { left: -42.8571426%; } .row .column.pull4, .row li.pull4 { left: -34.2857141%; } .row .column.pull3, .row li.pull3 { left: -25.7142856%; } .row .column.pull2, .row li.pull2 { left: -17.1428571%; } .row .column.pull1, .row li.pull1 { left: -8.57142857%; } /* Pull Column Width only. No Gutter */ .row .column.pullcol, .row li.pullcol { left: -5.71428572%; } /* Pull Gutter Width only. No Column */ .row .column.pullmargin, .row li.pullmargin { left: -2.85714286%; } .hide { display: none !important; } .hide-desktop { display: none !important; } } /* ================================================ TABLET VIEW ================================================ */ @media screen and (min-width: 571px) and (max-width: 768px) { /* Custom column widths */ .row .col12-tab { width: 100%; float: none; clear: both; margin-left: 0; margin-right: 0; } .row .col11-tab { width: 91.42857143%; } .row .col10-tab { width: 82.85714286%; } .row .col9-tab { width: 74.28571429%; } .row .col8-tab { width: 65.71428571%; } .row .col7-tab { width: 57.14285714%; } .row .col6-tab { width: 48.57142857%; } .row .col5-tab { width: 40%; } .row .col4-tab { width: 31.42857143%; } .row .col3-tab { width: 22.85714286%; } .row .col2-tab { width: 14.2857143%; } .row .col1-tab { width: 5.71428572%; } .row-1cols-tab > li, .row-1cols-tab > .column { margin-left: 0; margin-right: 0; width: 100%; } .row-1cols-tab.no-margin > li .row-1cols-tab.no-margin > .column { padding-left: 0; padding-right: 0; } /* Set widths for tablet classes */ .row-2cols-tab > li, .row-2cols-tab > .column { width:48.57142857%; } .row-3cols-tab > li, .row-3cols-tab > .column { width:31.42857143%; } .row-4cols-tab > li, .row-4cols-tab > .column { width:22.85714286%; } .row-5cols-tab > li, .row-5cols-tab > .column { width:17.714285712%; } .row-6cols-tab > li, .row-6cols-tab > .column { width:14.2857143%; } .row-7cols-tab > li, .row-7cols-tab > .column { width:11.8367346%; } .row-8cols-tab > li, .row-8cols-tab > .column { width:9.99999999%; } .row-9cols-tab > li, .row-9cols-tab > .column { width:8.57142857%; } .row-10cols-tab > li, .row-10cols-tab > .column { width:7.4285714%; } .row-11cols-tab > li, .row-11cols-tab > .column { width:6.4935065%; } .row-12cols-tab > li, .row-12cols-tab > .column { width: 5.71428572%; } /* Remove margin/padding on first last columns in even width rows */ .row-2cols-tab > li:nth-child(odd), .row-2cols-tab > .column:nth-child(odd), .row-3cols-tab > li:nth-child(3n+1), .row-3cols-tab > .column:nth-child(3n+1), .row-4cols-tab > li:nth-child(4n+1), .row-4cols-tab > .column:nth-child(4n+1), .row-5cols-tab > li:nth-child(5n+1), .row-5cols-tab > .column:nth-child(5n+1), .row-6cols-tab > li:nth-child(6n+1), .row-6cols-tab > .column:nth-child(6n+1), .row-7cols-tab > li:nth-child(7n+1), .row-7cols-tab > .column:nth-child(7n+1), .row-8cols-tab > li:nth-child(8n+1), .row-8cols-tab > .column:nth-child(8n+1), .row-9cols-tab > li:nth-child(9n+1), .row-9cols-tab > .column:nth-child(9n+1), .row-10cols-tab > li:nth-child(10n+1), .row-10cols-tab > .column:nth-child(10n+1), .row-11cols-tab > li:nth-child(11n+1), .row-11cols-tab > .column:nth-child(11n+1), .row-12cols-tab > li:nth-child(12n+1), .row-12cols-tab > .column:nth-child(12n+1) { clear: both; margin-left: 0; } .row-2cols-tab > li:nth-child(even), .row-2cols-tab > .column:nth-child(even), .row-3cols-tab > li:nth-child(3n+3), .row-3cols-tab > .column:nth-child(3n+3), .row-4cols-tab > li:nth-child(4n+4), .row-4cols-tab > .column:nth-child(4n+4), .row-5cols-tab > li:nth-child(5n+5), .row-5cols-tab > .column:nth-child(5n+5), .row-6cols-tab > li:nth-child(6n+6), .row-6cols-tab > .column:nth-child(6n+6), .row-7cols-tab > li:nth-child(7n+7), .row-7cols-tab > .column:nth-child(7n+7), .row-8cols-tab > li:nth-child(8n+8), .row-8cols-tab > .column:nth-child(8n+8), .row-9cols-tab > li:nth-child(9n+9), .row-9cols-tab > .column:nth-child(9n+9), .row-10cols-tab > li:nth-child(10n+10), .row-10cols-tab > .column:nth-child(10n+10), .row-11cols-tab > li:nth-child(11n+11), .row-11cols-tab > .column:nth-child(11n+11), .row-12cols-tab > li:nth-child(12n+12), .row-12cols-tab > .column:nth-child(12n+12) { margin-right: 0; } .row-2cols-tab.no-margin > li:nth-child(odd), .row-2cols-tab.no-margin > .column:nth-child(odd), .row-3cols-tab.no-margin > li:nth-child(3n+1), .row-3cols-tab.no-margin > .column:nth-child(3n+1), .row-4cols-tab.no-margin > li:nth-child(4n+1), .row-4cols-tab.no-margin > .column:nth-child(4n+1), .row-5cols-tab.no-margin > li:nth-child(5n+1), .row-5cols-tab.no-margin > .column:nth-child(5n+1), .row-6cols-tab.no-margin > li:nth-child(6n+1), .row-6cols-tab.no-margin > .column:nth-child(6n+1), .row-7cols-tab.no-margin > li:nth-child(7n+1), .row-7cols-tab.no-margin > .column:nth-child(7n+1), .row-8cols-tab.no-margin > li:nth-child(8n+1), .row-8cols-tab.no-margin > .column:nth-child(8n+1), .row-9cols-tab.no-margin > li:nth-child(9n+1), .row-9cols-tab.no-margin > .column:nth-child(9n+1), .row-10cols-tab.no-margin > li:nth-child(10n+1), .row-10cols-tab.no-margin > .column:nth-child(10n+1), .row-11cols-tab.no-margin > li:nth-child(11n+1), .row-11cols-tab.no-margin > .column:nth-child(11n+1), .row-12cols-tab.no-margin > li:nth-child(12n+1), .row-12cols-tab.no-margin > .column:nth-child(12n+1) { padding-left: 0; } .row-2cols-tab.no-margin > li:nth-child(even), .row-2cols-tab.no-margin > .column:nth-child(even), .row-3cols-tab.no-margin > li:nth-child(3n+3), .row-3cols-tab.no-margin > .column:nth-child(3n+3), .row-4cols-tab.no-margin > li:nth-child(4n+4), .row-4cols-tab.no-margin > .column:nth-child(4n+4), .row-5cols-tab.no-margin > li:nth-child(5n+5), .row-5cols-tab.no-margin > .column:nth-child(5n+5), .row-6cols-tab.no-margin > li:nth-child(6n+6), .row-6cols-tab.no-margin > .column:nth-child(6n+6), .row-7cols-tab.no-margin > li:nth-child(7n+7), .row-7cols-tab.no-margin > .column:nth-child(7n+7), .row-8cols-tab.no-margin > li:nth-child(8n+8), .row-8cols-tab.no-margin > .column:nth-child(8n+8), .row-9cols-tab.no-margin > li:nth-child(9n+9), .row-9cols-tab.no-margin > .column:nth-child(9n+9), .row-10cols-tab.no-margin > li:nth-child(10n+10), .row-10cols-tab.no-margin > .column:nth-child(10n+10), .row-11cols-tab.no-margin > li:nth-child(11n+11), .row-11cols-tab.no-margin > .column:nth-child(11n+11), .row-12cols-tab.no-margin > li:nth-child(12n+11), .row-12cols-tab.no-margin > .column:nth-child(12n+12) { padding-right: 0; } /* Push Full Column/Gutter Width */ .row .column.push11-tab, .row li.push11-tab { left: 94.2857137%; } .row .column.push10-tab, .row li.push10-tab { left: 85.7142852%; } .row .column.push9-tab, .row li.push9-tab { left: 77.1428567%; } .row .column.push8-tab, .row li.push8-tab { left: 68.5714282%; } .row .column.push7-tab, .row li.push7-tab { left: 59.9999999%; } .row .column.push6-tab, .row li.push6-tab { left: 51.4285711%; } .row .column.push5-tab, .row li.push5-tab { left: 42.8571426%; } .row .column.push4-tab, .row li.push4-tab { left: 34.2857141%; } .row .column.push3-tab, .row li.push3-tab { left: 25.7142856%; } .row .column.push2-tab, .row li.push2-tab { left: 17.1428571%; } .row .column.push1-tab, .row li.push1-tab { left: 8.57142857%; } /* Push Column Width only. No Gutter */ .row .column.pushcol-tab, .row li.pushcol-tab { left: 5.71428572%; } /* Push Gutter Width only. No Column */ .row .column.pushmargin-tab, .row li.pushmargin-tab { left: 2.85714286%; } /* Pull Full Column/Gutter Width */ .row .column.pull11-tab, .row li.pull11-tab { left: -94.2857137%; } .row .column.pull10-tab, .row li.pull10-tab { left: -85.7142852%; } .row .column.pull9-tab, .row li.pull9-tab { left: -77.1428567%; } .row .column.pull8-tab, .row li.pull8-tab { left: -68.5714282%; } .row .column.pull7-tab, .row li.pull7-tab { left: -59.9999999%; } .row .column.pull6-tab, .row li.pull6-tab { left: -51.4285711%; } .row .column.pull5-tab, .row li.pull5-tab { left: -42.8571426%; } .row .column.pull4-tab, .row li.pull4-tab { left: -34.2857141%; } .row .column.pull3-tab, .row li.pull3-tab { left: -25.7142856%; } .row .column.pull2-tab, .row li.pull2-tab { left: -17.1428571%; } .row .column.pull1-tab, .row li.pull1-tab { left: -8.57142857%; } /* Pull Column Width only. No Gutter */ .row .column.pullcol-tab, .row li.pullcol-tab { left: -5.71428572%; } /* Pull Gutter Width only. No Column */ .row .column.pullmargin-tab, .row li.pullmargin-tab { left: -2.85714286%; } .hide-tablet { display: none !important; } } /* ================================================ MOBILE VIEW ================================================ */ @media screen and (max-width: 570px) { /* Default Columns are Full Width */ .row > .column, .row > li { float: none; clear: both; margin-left: 0; margin-right: 0; width: 100%; } .no-margin > .column, .no-margin > li { padding-left: 0; padding-right: 0; } /* Custom column widths */ .row .col12-mob { width: 100%; float: none; clear: both; margin-left: 0; margin-right: 0; } .row .col11-mob { width: 91.42857143%; float: left; clear: none; } .row .col10-mob { width: 82.85714286%; float: left; clear: none; } .row .col9-mob { width: 74.28571429%; float: left; clear: none; } .row .col8-mob { width: 65.71428571%; float: left; clear: none; } .row .col7-mob { width: 57.14285714%; float: left; clear: none; } .row .col6-mob { width: 48.57142857%; float: left; clear: none; } .row .col5-mob { width: 40%; float: left; clear: none; } .row .col4-mob { width: 31.42857143%; float: left; clear: none; } .row .col3-mob { width: 22.85714286%; float: left; clear: none; } .row .col2-mob { width: 14.2857143%; float: left; clear: none; } .row .col1-mob { width: 5.71428572%; float: left; clear: none; } /* Push Full Column/Gutter Width */ .row .column.push11-mob, .row li.push11-mob { left: 94.2857137%; } .row .column.push10-mob, .row li.push10-mob { left: 85.7142852%; } .row .column.push9-mob, .row li.push9-mob { left: 77.1428567%; } .row .column.push8-mob, .row li.push8-mob { left: 68.5714282%; } .row .column.push7-mob, .row li.push7-mob { left: 59.9999999%; } .row .column.push6-mob, .row li.push6-mob { left: 51.4285711%; } .row .column.push5-mob, .row li.push5-mob { left: 42.8571426%; } .row .column.push4-mob, .row li.push4-mob { left: 34.2857141%; } .row .column.push3-mob, .row li.push3-mob { left: 25.7142856%; } .row .column.push2-mob, .row li.push2-mob { left: 17.1428571%; } .row .column.push1-mob, .row li.push1-mob { left: 8.57142857%; } /* Push Column Width only. No Gutter */ .row .column.pushcol-mob, .row li.pushcol-mob { left: 5.71428572%; } /* Push Gutter Width only. No Column */ .row .column.pushmargin-mob, .row li.pushmargin-mob { left: 2.85714286%; } /* Pull Full Column/Gutter Width */ .row .column.pull11-mob, .row li.pull11-mob { left: -94.2857137%; } .row .column.pull10-mob, .row li.pull10-mob { left: -85.7142852%; } .row .column.pull9-mob, .row li.pull9-mob { left: -77.1428567%; } .row .column.pull8-mob, .row li.pull8-mob { left: -68.5714282%; } .row .column.pull7-mob, .row li.pull7-mob { left: -59.9999999%; } .row .column.pull6-mob, .row li.pull6-mob { left: -51.4285711%; } .row .column.pull5-mob, .row li.pull5-mob { left: -42.8571426%; } .row .column.pull4-mob, .row li.pull4-mob { left: -34.2857141%; } .row .column.pull3-mob, .row li.pull3-mob { left: -25.7142856%; } .row .column.pull2-mob, .row li.pull2-mob { left: -17.1428571%; } .row .column.pull1-mob, .row li.pull1-mob { left: -8.57142857%; } /* Pull Column Width only. No Gutter */ .row .column.pullcol-mob, .row li.pullcol-mob { left: -5.71428572%; } /* Pull Gutter Width only. No Column */ .row .column.pullmargin-mob, .row li.pullmargin-mob { left: -2.85714286%; } /* Add margin/padding for multi columns */ .row-2cols-mob > li, .row-2cols-mob > .column, .row-3cols-mob > li, .row-3cols-mob > .column, .row-4cols-mob > li, .row-4cols-mob > .column, .row-5cols-mob > li, .row-5cols-mob > .column, .row-6cols-mob > li, .row-6cols-mob > .column, .row-7cols-mob > li, .row-7cols-mob > .column, .row-8cols-mob > li, .row-8cols-mob > .column, .row-9cols-mob > li, .row-9cols-mob > .column, .row-10cols-mob > li, .row-10cols-mob > .column, .row-11cols-mob > li, .row-11cols-mob > .column, .row-12cols-mob > li, .row-12cols-mob > .column { clear: none; float: left; margin-left: 1.42857143%; margin-right: 1.42857143%; } .row-2cols-mob.no-margin > li, .row-2cols-mob.no-margin > .column, .row-3cols-mob.no-margin > li, .row-3cols-mob.no-margin > .column, .row-4cols-mob.no-margin > li, .row-4cols-mob.no-margin > .column, .row-5cols-mob.no-margin > li, .row-5cols-mob.no-margin > .column, .row-6cols-mob.no-margin > li, .row-6cols-mob.no-margin > .column, .row-7cols-mob.no-margin > li, .row-7cols-mob.no-margin > .column, .row-8cols-mob.no-margin > li, .row-8cols-mob.no-margin > .column, .row-9cols-mob.no-margin > li, .row-9cols-mob.no-margin > .column, .row-10cols-mob.no-margin > li, .row-10cols-mob.no-margin > .column, .row-11cols-mob.no-margin > li, .row-11cols-mob.no-margin > .column, .row-12cols-mob.no-margin > li, .row-12cols-mob.no-margin > .column { padding-left: 1.42857143%; padding-right: 1.42857143%; } /* Set widths for mobile classes */ .row-2cols-mob > li, .row-2cols-mob > .column { width:48.57142857%; } .row-3cols-mob > li, .row-3cols-mob > .column { width:31.42857143%; } .row-4cols-mob > li, .row-4cols-mob > .column { width:22.85714286%; } .row-5cols-mob > li, .row-5cols-mob > .column { width:17.714285712%; } .row-6cols-mob > li, .row-6cols-mob > .column { width:14.2857143%; } .row-7cols-mob > li, .row-7cols-mob > .column { width:11.8367346%; } .row-8cols-mob > li, .row-8cols-mob > .column { width:9.99999999%; } .row-9cols-mob > li, .row-9cols-mob > .column { width:8.57142857%; } .row-10cols-mob > li, .row-10cols-mob > .column { width:7.4285714%; } .row-11cols-mob > li, .row-11cols-mob > .column { width:6.4935065%; } .row-12cols-mob > li, .row-12cols-mob > .column { width: 5.71428572%; } /* Remove margin/padding on first last columns in even width rows */ .row-2cols-mob > li:nth-child(odd), .row-2cols-mob > .column:nth-child(odd), .row-3cols-mob > li:nth-child(3n+1), .row-3cols-mob > .column:nth-child(3n+1), .row-4cols-mob > li:nth-child(4n+1), .row-4cols-mob > .column:nth-child(4n+1), .row-5cols-mob > li:nth-child(5n+1), .row-5cols-mob > .column:nth-child(5n+1), .row-6cols-mob > li:nth-child(6n+1), .row-6cols-mob > .column:nth-child(6n+1), .row-7cols-mob > li:nth-child(7n+1), .row-7cols-mob > .column:nth-child(7n+1), .row-8cols-mob > li:nth-child(8n+1), .row-8cols-mob > .column:nth-child(8n+1), .row-9cols-mob > li:nth-child(9n+1), .row-9cols-mob > .column:nth-child(9n+1), .row-10cols-mob > li:nth-child(10n+1), .row-10cols-mob > .column:nth-child(10n+1), .row-11cols-mob > li:nth-child(11n+1), .row-11cols-mob > .column:nth-child(11n+1), .row-12cols-mob > li:nth-child(12n+1), .row-12cols-mob > .column:nth-child(12n+1) { clear: both; margin-left: 0; } .row-2cols-mob > li:nth-child(even), .row-2cols-mob > .column:nth-child(even), .row-3cols-mob > li:nth-child(3n+3), .row-3cols-mob > .column:nth-child(3n+3), .row-4cols-mob > li:nth-child(4n+4), .row-4cols-mob > .column:nth-child(4n+4), .row-5cols-mob > li:nth-child(5n+5), .row-5cols-mob > .column:nth-child(5n+5), .row-6cols-mob > li:nth-child(6n+6), .row-6cols-mob > .column:nth-child(6n+6), .row-7cols-mob > li:nth-child(7n+7), .row-7cols-mob > .column:nth-child(7n+7), .row-8cols-mob > li:nth-child(8n+8), .row-8cols-mob > .column:nth-child(8n+8), .row-9cols-mob > li:nth-child(9n+9), .row-9cols-mob > .column:nth-child(9n+9), .row-10cols-mob > li:nth-child(10n+10), .row-10cols-mob > .column:nth-child(10n+10), .row-11cols-mob > li:nth-child(11n+11), .row-11cols-mob > .column:nth-child(11n+11), .row-12cols-mob > li:nth-child(12n+12), .row-12cols-mob > .column:nth-child(12n+12) { margin-right: 0; } .row-2cols-mob.no-margin > li:nth-child(odd), .row-2cols-mob.no-margin > .column:nth-child(odd), .row-3cols-mob.no-margin > li:nth-child(3n+1), .row-3cols-mob.no-margin > .column:nth-child(3n+1), .row-4cols-mob.no-margin > li:nth-child(4n+1), .row-4cols-mob.no-margin > .column:nth-child(4n+1), .row-5cols-mob.no-margin > li:nth-child(5n+1), .row-5cols-mob.no-margin > .column:nth-child(5n+1), .row-6cols-mob.no-margin > li:nth-child(6n+1), .row-6cols-mob.no-margin > .column:nth-child(6n+1), .row-7cols-mob.no-margin > li:nth-child(7n+1), .row-7cols-mob.no-margin > .column:nth-child(7n+1), .row-8cols-mob.no-margin > li:nth-child(8n+1), .row-8cols-mob.no-margin > .column:nth-child(8n+1), .row-9cols-mob.no-margin > li:nth-child(9n+1), .row-9cols-mob.no-margin > .column:nth-child(9n+1), .row-10cols-mob.no-margin > li:nth-child(10n+1), .row-10cols-mob.no-margin > .column:nth-child(10n+1), .row-11cols-mob.no-margin > li:nth-child(11n+1), .row-11cols-mob.no-margin > .column:nth-child(11n+1), .row-12cols-mob.no-margin > li:nth-child(12n+1), .row-12cols-mob.no-margin > .column:nth-child(12n+1) { padding-left: 0; } .row-2cols-mob.no-margin > li:nth-child(even), .row-2cols-mob.no-margin > .column:nth-child(even), .row-3cols-mob.no-margin > li:nth-child(3n+3), .row-3cols-mob.no-margin > .column:nth-child(3n+3), .row-4cols-mob.no-margin > li:nth-child(4n+4), .row-4cols-mob.no-margin > .column:nth-child(4n+4), .row-5cols-mob.no-margin > li:nth-child(5n+5), .row-5cols-mob.no-margin > .column:nth-child(5n+5), .row-6cols-mob.no-margin > li:nth-child(6n+6), .row-6cols-mob.no-margin > .column:nth-child(6n+6), .row-7cols-mob.no-margin > li:nth-child(7n+7), .row-7cols-mob.no-margin > .column:nth-child(7n+7), .row-8cols-mob.no-margin > li:nth-child(8n+8), .row-8cols-mob.no-margin > .column:nth-child(8n+8), .row-9cols-mob.no-margin > li:nth-child(9n+9), .row-9cols-mob.no-margin > .column:nth-child(9n+9), .row-10cols-mob.no-margin > li:nth-child(10n+10), .row-10cols-mob.no-margin > .column:nth-child(10n+10), .row-11cols-mob.no-margin > li:nth-child(11n+11), .row-11cols-mob.no-margin > .column:nth-child(11n+11), .row-12cols-mob.no-margin > li:nth-child(12n+11), .row-12cols-mob.no-margin > .column:nth-child(12n+12) { padding-right: 0; } .no-margin > .column, .no-margin > li { margin: 0; } .hide-mobile { display: none !important; } } /* ----------------------------------- Resets ----------------------------------- */ 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 { border: 0; font: inherit; font-size: 100%; margin: 0; padding: 0; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } html, body { max-width: 100%; overflow-x: hidden; width: 100%; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } hr, .hr { background: #dadada; border: none; display: block; height: 1px; margin: 30px auto; padding: 0; width: 100%; } /* ----------------------------------- Font Declarations ----------------------------------- */ @font-face { font-family: 'icons'; src:url('/asset/font/icons/icons.eot'); src:url('/asset/font/icons/icons.eot?#iefix') format('embedded-opentype'), url('/asset/font/icons/icons.ttf') format('truetype'), url('/asset/font/icons/icons.woff') format('woff'), url('/asset/font/icons/icons.svg#icons') format('svg'); font-weight: normal; font-style: normal; } [class*="icon-"] { font-family: 'icons'; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; speak: none; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [class*="icon-"]:before { display: block; position: absolute; text-indent: 0; } /* Logos */ .icon-amiibo:before { content: "\e62a"; } .icon-nintendo:before { content: "\e617\00a0"; } /* add nbsp after to fix android bug */ .icon-facebook:before { content: "\e616"; } .icon-instagram:before { content: "\e615"; } .icon-tumblr:before { content: "\e614"; } .icon-twitter:before { content: "\e613"; } .icon-youtube:before { content: "\e612"; } .icon-3ds:before { content: "\e619"; } .icon-wiiu:before { content: "\e61a"; } .icon-eshop-nin:before { content: "\e61e"; } /* eshop classes need to be wrapped in a .logo-eshop class defined in widgets.css */ .icon-eshop:before { content: "\e61f"; } /* Thick Pagination Arrow */ .icon-arrow-01-up:before { content: "\e603"; } .icon-arrow-01-right:before { content: "\e602"; } .icon-arrow-01-left:before { content: "\e601"; } .icon-arrow-01-down:before { content: "\e600"; } /* Thin Text Arrow */ .icon-arrow-02-up:before { content: "\e607"; } .icon-arrow-02-right:before { content: "\e606"; } .icon-arrow-02-left:before { content: "\e605"; } .icon-arrow-02-down:before { content: "\e604"; } /* Double Thin Text Arrow */ .icon-arrow-02-up-double:before { content: "\e607\A\e607"; line-height: 0.5; white-space: pre; } .icon-arrow-02-right-double:before { content: "\e606\e606"; letter-spacing: -0.5em; padding-right: 0.5em; } .icon-arrow-02-left-double:before { content: "\e605\e605"; letter-spacing: -0.5em; padding-right: 0.5em; } .icon-arrow-02-down-double:before { content: "\e604\A\e604"; line-height: 0.5; white-space: pre; } /* Solid Triangle */ .icon-arrow-03-up:before { content: "\e60b"; } .icon-arrow-03-right:before { content: "\e60a"; } .icon-arrow-03-left:before { content: "\e609"; } .icon-arrow-03-down:before { content: "\e608"; } /* Accordion Arrows */ .icon-arrow-04-up:before { content: "\e60f"; } .icon-arrow-04-right:before { content: "\e60e"; } .icon-arrow-04-left:before { content: "\e60d"; } .icon-arrow-04-down:before { content: "\e60c"; } /* Icons */ .icon-x-thick:before { content: "\e61b"; } .icon-x-thin:before { content: "\e61c"; } .icon-search:before { content: "\e610"; } .icon-menu:before { content: "\e611"; } .icon-rss:before { content: "\e618"; } .icon-play:before { content: "\e61d"; } .icon-check:before { content: "\e620"; } .icon-top:before { content: "\e621"; } .icon-wiiu:before { content: "\e622"; color: #00a0C8; } .icon-wii:before { content: "\e623"; color: #13b5ea; } .icon-web:before { content: "\e624"; color: #9b9b9b; } .icon-support:before { content: "\e625"; color: #9b9b9b; } .icon-news:before { content: "\e627"; color: #9b9b9b; } .icon-3dsxl:before { content: "\e628"; color: #b01e23; } .icon-ds:before { content: "\e629"; color: #000; } .icon-featured:before { content: "\e626"; color: #ffbf05; } @font-face { font-family: 'LatoHairline'; src: url('/asset/font/lato/Lato-Hai-Webfont.eot'); src: url('/asset/font/lato/Lato-Hai-Webfont.eot?#iefix') format('embedded-opentype'), url('/asset/font/lato/Lato-Hai-Webfont.woff') format('woff'), url('/asset/font/lato/Lato-Hai-Webfont.ttf') format('truetype'), url('/asset/font/lato/Lato-Hai-Webfont.svg#LatoHairline') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'LatoHairlineItalic'; src: url('/asset/font/lato/Lato-HaiIta-Webfont.eot'); src: url('/asset/font/lato/Lato-HaiIta-Webfont.eot?#iefix') format('embedded-opentype'), url('/asset/font/lato/Lato-HaiIta-Webfont.woff') format('woff'), url('/asset/font/lato/Lato-HaiIta-Webfont.ttf') format('truetype'), url('/asset/font/lato/Lato-HaiIta-Webfont.svg#LatoHairlineItalic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'LatoLight'; src: url('/asset/font/lato/Lato-Lig-Webfont.eot'); src: url('/asset/font/lato/Lato-Lig-Webfont.eot?#iefix') format('embedded-opentype'), url('/asset/font/lato/Lato-Lig-Webfont.woff') format('woff'), url('/asset/font/lato/Lato-Lig-Webfont.ttf') format('truetype'), url('/asset/font/lato/Lato-Lig-Webfont.svg#LatoLight') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'LatoLightItalic'; src: url('/asset/font/lato/Lato-LigIta-Webfont.eot'); src: url('/asset/font/lato/Lato-LigIta-Webfont.eot?#iefix') format('embedded-opentype'), url('/asset/font/lato/Lato-LigIta-Webfont.woff') format('woff'), url('/asset/font/lato/Lato-LigIta-Webfont.ttf') format('truetype'), url('/asset/font/lato/Lato-LigIta-Webfont.svg#LatoLightItalic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'LatoRegular'; src: url('/asset/font/lato/Lato-Reg-Webfont.eot'); src: url('/asset/font/lato/Lato-Reg-Webfont.eot?#iefix') format('embedded-opentype'), url('/asset/font/lato/Lato-Reg-Webfont.woff') format('woff'), url('/asset/font/lato/Lato-Reg-Webfont.ttf') format('truetype'), url('/asset/font/lato/Lato-Reg-Webfont.svg#LatoRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'LatoItalic'; src: url('/asset/font/lato/Lato-RegIta-Webfont.eot'); src: url('/asset/font/lato/Lato-RegIta-Webfont.eot?#iefix') format('embedded-opentype'), url('/asset/font/lato/Lato-RegIta-Webfont.woff') format('woff'), url('/asset/font/lato/Lato-RegIta-Webfont.ttf') format('truetype'), url('/asset/font/lato/Lato-RegIta-Webfont.svg#LatoItalic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'LatoBold'; src: url('/asset/font/lato/Lato-Bol-Webfont.eot'); src: url('/asset/font/lato/Lato-Bol-Webfont.eot?#iefix') format('embedded-opentype'), url('/asset/font/lato/Lato-Bol-Webfont.woff') format('woff'), url('/asset/font/lato/Lato-Bol-Webfont.ttf') format('truetype'), url('/asset/font/lato/Lato-Bol-Webfont.svg#LatoBold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'LatoBoldItalic'; src: url('/asset/font/lato/Lato-BolIta-Webfont.eot'); src: url('/asset/font/lato/Lato-BolIta-Webfont.eot?#iefix') format('embedded-opentype'), url('/asset/font/lato/Lato-BolIta-Webfont.woff') format('woff'), url('/asset/font/lato/Lato-BolIta-Webfont.ttf') format('truetype'), url('/asset/font/lato/Lato-BolIta-Webfont.svg#LatoBoldItalic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'LatoBlack'; src: url('/asset/font/lato/Lato-Bla-Webfont.eot'); src: url('/asset/font/lato/Lato-Bla-Webfont.eot?#iefix') format('embedded-opentype'), url('/asset/font/lato/Lato-Bla-Webfont.woff') format('woff'), url('/asset/font/lato/Lato-Bla-Webfont.ttf') format('truetype'), url('/asset/font/lato/Lato-Bla-Webfont.svg#LatoBlack') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'LatoBlackItalic'; src: url('/asset/font/lato/Lato-BlaIta-Webfont.eot'); src: url('/asset/font/lato/Lato-BlaIta-Webfont.eot?#iefix') format('embedded-opentype'), url('/asset/font/lato/Lato-BlaIta-Webfont.woff') format('woff'), url('/asset/font/lato/Lato-BlaIta-Webfont.ttf') format('truetype'), url('/asset/font/lato/Lato-BlaIta-Webfont.svg#LatoBlackItalic') format('svg'); font-weight: normal; font-style: normal; } /* ----------------------------------- Baselines ----------------------------------- */ html { height: 100%; } body { background: #989898; line-height: 1.2; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } div#page-container { background: #fff; box-shadow: 0 -10px 25px rgba(0,0,0,0.2); display: block; overflow: hidden; /* prevent selecting text and horizontally scrolling when content is off the right edge (carousel arrows) */ padding-top: 0; position: relative; width: 100%; } div.page-content { padding-top: 30px; } .no-top-margin { margin-top: 0 !important; } .no-bottom-margin { margin-bottom: 0 !important; } /* --- Desktop Headline Fonts --- */ h1, .h1 { color: #000; font-family: 'LatoLight'; font-size: 66px; margin: 0; } h2, .h2 { color: #000; font-family: 'LatoLight'; font-size: 44px; margin: 0 0 10px; } h3, .h3 { color: #000; font-family: 'LatoLight'; font-size: 30px; margin: 0 0 10px; } h4, .h4 { color: #484848; font-family: 'LatoBlack'; font-size: 40px; margin: 0 0 10px; } h5, .h5 { color: #484848; font-family: 'LatoBlack'; font-size: 32px; margin: 0 0 10px; } /* --- Desktop Body Fonts --- */ body, .b1 { color: #777; font-family: 'LatoRegular'; font-size: 16px; } .b2 { color: #999; font-family: 'LatoBold'; font-size: 16px; } .b3 { color: #777; font-family: 'LatoBold'; font-size: 20px; margin: 0 0 10px; } .b4 { color: #999; font-family: 'LatoRegular'; font-size: 14px; } .b5 { color: #777; font-family: 'LatoRegular'; font-size: 20px; } .b6 { color: #000; font-family: 'LatoLight'; font-size: 20px; } .b7 { color: #484848; font-family: 'LatoBlack'; font-size: 24px; margin: 0 0 10px; } small, .b8 { color: #777; font-family: 'LatoRegular'; font-size: 14px; } p { line-height: 1.5; margin: 0 0 20px; } ol, ul { } a { color: #2576bc; cursor: pointer; text-decoration: none; } a.h1, a.h2, a.h3, a.h4, a.h5, a.b1, a.b2, a.b3, a.b4, a.b5, a.b6, a.b7, a.b8 { color: #2576bc; } a:hover { color: #3aa4ff; text-decoration: underline; } a.h1:hover, a.h2:hover, a.h3:hover, a.h4:hover, a.h5:hover, a.b1:hover, a.b2:hover, a.b3:hover, a.b4:hover, a.b5:hover, a.b6:hover, a.b7:hover, a.b8:hover { color: #3aa4ff; } strong.sale-price { color: #f47b2b; } .sales-snipe { background-color: #f47b2b; color: white; border-radius: 8px 8px 0 0; font-size: 13px; margin-left: 8px; padding: 1px 14px; position: absolute; font-weight: bold; } h1 a:hover, a.h1:hover, h2 a:hover, a.h2:hover, h3 a:hover, a.h3:hover { border-bottom: 1px solid #3aa4ff; text-decoration: none; } a:visited div { border-color: inherit; /* Safari border-color bug fix */ } strong, b { font-family: 'LatoBold'; font-size: inherit; } i, em { font-family: 'LatoItalic'; } i b, em b, b i, b em { font-family: 'LatoBoldItalic'; } sup { font-size: 0.7em; vertical-align: super; } sub { font-size: 0.7em; vertical-align: sub; } input, textarea { font-family: 'LatoRegular'; } input::-webkit-search-cancel-button { -webkit-appearance: none; } input::-ms-clear { display: none; } /* ----------------------------------- Utilities ----------------------------------- */ .left { float: left; } .right { float: right; } .center { text-align: center; } .table { display: table; height: 100%; } .table-cell { display: table-cell; float: none; vertical-align: middle; } .nowrap { white-space: nowrap; } .invisible { opacity: 0; } .offscreen { display: block; left: -999999px; position: absolute; top: -999999px; } .hide-text { display: block; overflow: hidden; text-indent: 100%; white-space: nowrap; } .clear { clear: both; display: block; width: 100%; } .clearfix { display: inline-block; } .clear-fix:after { clear: both; content: ' '; display: block; font-size: 0; height: 0; visibility: hidden; } .loader { background: url('/images/global/loader.gif') center center no-repeat; height: 100%; width: 100%; } .jump-target { display: block; position: relative; top: -110px; } /* ================================================ TABLET VIEW ================================================ */ @media screen and (min-width: 571px) and (max-width: 768px) { /* ----------------------------------- Baselines ----------------------------------- */ div#page-container { padding-top: 0; } /* --- Desktop Headline Fonts --- */ h3, .h3 { font-size: 24px; } /* ----------------------------------- Utilities ----------------------------------- */ .left-tab { float: left; } .right-tab { float: right; } .center-tab { text-align: center; } } /* ================================================ MOBILE VIEW ================================================ */ @media screen and (max-width: 570px) { /* ----------------------------------- Baselines ----------------------------------- */ div#page-container { padding-top: 0; } /* --- Mobile Headline Fonts --- */ h1, .h1 { font-size: 46px; /*margin-bottom: 30px;*/ } h2, .h2 { font-size: 40px; } h3, .h3 { font-size: 24px; } h4, .h4 { font-size: 30px; } h5, .h5 { font-size: 30px; } /* --- Mobile Body Fonts --- */ body, .b1 { font-size: 18px; } .b4 { font-size: 16px; } .b5 { font-size: 18px; } .b6 { font-size: 18px; } .b7 { font-size: 22px; } .b8 { font-size: 16px; } /* ----------------------------------- Utilities ----------------------------------- */ .left-mob { float: left; } .right-mob { float: right; } .center-mob { text-align: center; } .jump-target { top: -80px; } } /* ================================================ 3DS Browser Specific Styles ================================================ */ body.nin3DS h1, body.nin3DS .h1 { font-size: 36px; } body.nin3DS h2, body.nin3DS .h2 { font-size: 28px; } body.nin3DS h3, body.nin3DS .h3 { font-size: 20px; } body.nin3DS h4, body.nin3DS .h4 { font-size: 24px; } body.nin3DS, body.nin3DS .b1 { font-size: 14px; } body.nin3DS .b3 { font-size: 16px; } body.nin3DS .b4 { font-size: 14px; } body.nin3DS .b7 { font-size: 18px; } body.nin3DS [class*="icon-"]:before { display: none; } body.nin3DS .icon-facebook, body.nin3DS .icon-twitter, body.nin3DS .icon-youtube, body.nin3DS .icon-tumblr, body.nin3DS .icon-instagram { background: url('/images/global/no-icon-font-header-footer.png') no-repeat; height: 35px; overflow: hidden; width: 35px; } body.nin3DS .icon-facebook { background-position: 0 -95px; } body.nin3DS .icon-twitter { background-position: -35px -95px; } body.nin3DS .icon-youtube { background-position: -70px -95px; } body.nin3DS .icon-tumblr { background-position: 0 -130px; } body.nin3DS .icon-instagram { background-position: -35px -130px; } /* ----------------------------------- NOTES: - Global nav is pinned via position:fixed on #global-header - On mobile it is NOT pinned via position:absolute. Remove this line from the mobile styles to pin. ----------------------------------- */ /* --- Global Back to top button (tablet/mobile) --- */ a.back-to-top { background: rgba(37, 118, 188, 1); opacity: 0; /* background: #2576bc; border-left: 1px solid #1660a0; border-right: 1px solid #1660a0; border-top: 1px solid #1660a0; */ border: 1px solid #fff; border-radius: 2px; box-shadow: 0 0 3px rgba(0,0,0,.5); bottom: 40px; -webkit-transform: translate3d(0, 0, 0px); display: block; height: 35px; width: 35px; overflow: hidden; position: fixed; right: 10px; text-indent: -99999em; text-decoration: none; z-index: 100; opacity: 0; -webkit-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; } a.back-to-top:before { color: #fff; content: "\e621"; display: block; font-family: 'icons'; font-size: 18px; height: 100%; line-height: 37px; text-align: center; text-indent: 0; width: 100%; } a.back-to-top.is-on { opacity: .7; } a.back-to-top.is-off { opacity: 0; } a.back-to-top.is-inactive { opacity: .2; } a.back-to-top.is-hidden { right: 999px; } /* ----------------------------------- Global Header ----------------------------------- */ /* --- Header Bar --- */ @media screen and (max-width: 600px) { .hide-small { display: none !important; } } @media screen and (min-width: 601px) { .hide-large { display: none !important; } } #header-overlay, #header-search-overlay { position: fixed; left: 0; top: 0; width: 100%; bottom: 0; opacity: 0; visibility: hidden; background: rgba(0,0,0,0.4); } #header-search-overlay { position: absolute; top: 40px; height: 30px; } #header-overlay.active, #header-search-overlay.active { visibility: visible; opacity: 1; z-index: 2; } #header-overlay.active { z-index: 9999; } #global-header { font-size: 14px; left: 0; position: fixed; top: 0; width: 100%; height: 70px; z-index: 10000; box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.2); } body { padding-top: 96px; } body.not-at-top #global-header { -webkit-transform: translateY(-96px); transform: translateY(-96px); -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.6, 0, 0.4, 1); transition: transform 0.8s cubic-bezier(0.6, 0, 0.4, 1); } body.not-at-top.scrolling-up #global-header { -webkit-transform: translateY(0px); transform: translateY(0px); } @media screen and (min-width: 601px) { body { padding-top: 70px; } body.not-at-top #global-header { -webkit-transform: translateY(-70px); transform: translateY(-70px); } } #global-header .top-nav .wrapper, #global-header nav .wrapper { max-width: 1440px; width: 100%; } #global-header a { color: #888; } #global-header .top-nav { background: #fff; height: 40px; line-height: 40px; border-bottom: 1px solid #e8e8e8; } #global-header .top-nav .wrapper { text-align: right; position: relative; } #global-header .top-nav .wrapper > a { text-decoration: none; display: inline-block; height: 40px; } #global-header .top-nav a.top-nav-search { z-index: 4; position: relative; } #global-header .top-nav a.top-nav-search.active span { /*display: none;*/ opacity: 0; } #search-close-button { display: block; width: 16px; height: 48px; position: absolute; top: -3px; right: 60px; z-index: 2; pointer-events: none; transition: .5s all ease-in-out; -webkit-transition: .5s all ease-in-out; opacity: 0!important; } #search-close-button svg { position: absolute; top: 16px; left: 0; } #search-close-button.active { opacity: 1 !important; pointer-events: auto; } #global-header .top-nav a.top-nav-search.active svg { transform: none; -webkit-transform: none; position: absolute; top: 10px; right: 0; z-index: 2; } #global-header .nintendo-logo { float: left; display: inline-block; padding-left: 15px; } #global-header .nintendo-logo a { font-size: 0; width: 90px; display: block; position: relative; line-height: 40px; } #global-header .nintendo-logo a:before { font-size: 22px; top: 0; left: 0; } .top-nav-change-region, .top-nav-search { margin-right: 20px; } .global-header-search { background: #fff; height: 40px; position: absolute; top: 0; left: 0; display: none; z-index: 3; } .global-header-search > * { opacity: 0; transition: opacity .3s; -webkit-transition: opacity .3s; } .global-header-search .search-form { position: absolute; top: 0; left: 0; width: 100%; text-align: left; } .global-header-search .search-form input { border: none; background-color: transparent; color: #888; font-size: 20px; width: 100%; height: 40px; outline: none; padding-left: 10px; -webkit-appearance: none; } .global-header-search .search-form input::-webkit-input-placeholder { color: #888; opacity: .8; } .global-header-search .search-form input:-moz-placeholder { color: #888; opacity: .8; } .global-header-search .search-form input::-moz-placeholder { color: #888; opacity: .8; } .global-header-search .search-form input:-ms-input-placeholder { color: #888; opacity: .8; } .global-header-search .search-form input:placeholder-shown { color: #888; opacity: .8; } .top-nav-search #search-bg { position: absolute; background: #dedede; width: 36px; height: 36px; border-radius: 50%; right: -6px; top: 2px; opacity: 0; z-index: 1; transition: opacity cubic-bezier(0.165, 0.84, 0.44, 1) 1s; -webkit-transition: opacity cubic-bezier(0.165, 0.84, 0.44, 1) 1s; } .top-nav-search.active #search-bg { opacity: 1; } .global-header-search .dropdown { background: #fff; background-image: linear-gradient(-180deg, #FFFFFF 1%, #DADADA 98%); box-shadow: 0px 4px 0px 0px rgba(0,0,0,0.20); margin-top: 40px; text-align: left; padding: 1rem 1rem 1.5rem; color: #000; border-radius: 0 0 4px 4px; } @media (max-width: 768px) { .global-header-search .dropdown { padding-bottom: 3.5rem; } } .global-header-search .dropdown #quick-links strong { color: #B1B1B1; } .global-header-search .dropdown #quick-links ul li { line-height: 1.85; } #global-header .top-nav .global-header-search .dropdown a { color: #888; } #global-header .top-nav .global-header-search .dropdown #quick-links ul li a { color: #2576BC; } #global-header .top-nav .global-header-search .dropdown #quick-links a:hover { color: #00d2be; } alps-account-nav { display: inline-block; vertical-align: middle; min-width: 121px; } #global-header .alps-account-nav .alps-account-name, #global-header .alps-account-nav .alps-login-door .alps-login-door-button .alps-login-door-title{ font-family: "LatoRegular"; font-size: 14px; font-weight: normal; } #global-header alps-account-nav .alps-login-door .alps-login-door-button .alps-login-door-title.is-mb { margin-top: 5px; } #global-header a.top-nav-change-region:hover, #global-header a.top-nav-search:hover { color: #00d2be; transition: color cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; -webkit-transition: color cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; } .top-nav-change-region:hover svg g, .top-nav-search:hover svg g { fill: #00d2be; transition: cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; -webkit-transition: cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; } .top-nav-change-region svg, .top-nav-search svg { transform: translateY(5px); -webkit-transform: translateY(5px); height: 20px; margin-left: 5px; } svg.nav-flag { display: inline-block; height: 18px; width: 28px; transform: translateY(4px); -webkit-transform: translateY(4px); margin-left: 5px; } #global-header nav { background: #F1F1F1; background-image: linear-gradient(-180deg, #F1F1F1 0%, #E1E1E1 100%); display: block; width: 100%; height: 30px; margin: 0 auto; text-align: center; } #global-header nav ul { display: block; height: 100%; width: 100%; white-space: nowrap; } #global-header nav ul li { display: inline-block; width: 14%; height: 100%; padding: 0; position: relative; white-space: nowrap; } body:lang(es-LA) #global-header nav ul li, body:lang(fr-CA) #global-header nav ul li { width: 20%; } #global-header nav ul li a { display: block; height: 100%; line-height: 30px; text-decoration: none; background: #F1F1F1; background-image: linear-gradient(-180deg, #F1F1F1 0%, #E1E1E1 100%); transition: all .3s; -webkit-transition: all .3s; color: #888; } @media screen and (min-width: 601px) and (max-width: 768px) { #global-header nav ul li a { font-size: .9em; } } @media screen and (max-width: 640px) { alps-account-nav { min-width: inherit; } } @media screen and (max-width: 600px) { #global-header { height: 96px; } #global-header .top-nav { height: 48px; line-height: 48px; } #global-header .nintendo-logo a { line-height: 48px; } #global-header .top-nav .wrapper > a { height: 48px; } #global-header .top-nav a.top-nav-search.active { position: absolute; top: 48px; margin-right: 0; right: 10px; } #global-header nav { height: 48px; } #global-header nav ul li a { line-height: 48px; } .global-header-search { width: 100%; top: 48px; left: 0!important; height: 48px; } .global-header-search .dropdown #quick-links ul li { line-height: 2.5; } .global-header-search .search-form input { height: 48px; } #header-search-overlay { display: none; } } @media screen and (max-width: 360px) { #global-header nav ul li a { font-size: .8em; } } #global-header nav ul li a.active, #global-header nav ul li a:hover { color: #fff; background: #B1B1B1; } body#games-page #global-header nav ul li a[data-section="gamestore"], body#threeDS-page #global-header nav ul li a[data-section="threeds"], body#wiiu-page #global-header nav ul li a[data-section="wiiu"], body#amiibo-page #global-header nav ul li a[data-section="amiibo"] { background: #848484; color: #d1d1d1; } #global-header.wiiu nav ul li a[data-section="wiiu"], #global-header nav ul li a[data-section="wiiu"]:hover { color: #fff!important; background: #0096C8!important; } #global-header.threeds nav ul li a[data-section="threeds"], #global-header nav ul li a[data-section="threeds"]:hover { color: #fff!important; background: #CE181E!important; } #global-header.gamestore nav ul li a[data-section="gamestore"], #global-header nav ul li a[data-section="gamestore"]:hover { color: #fff!important; background: #FF7D00!important; } #global-header.amiibo nav ul li a[data-section="amiibo"], #global-header nav ul li a[data-section="amiibo"]:hover, #global-header.mynintendo nav ul li a[data-section="mynintendo"], #global-header nav ul li a[data-section="mynintendo"]:hover { background: #fff!important; color: #484848!important; } #global-header.playnintendo nav ul li a[data-section="playnintendo"], #global-header nav ul li a[data-section="playnintendo"]:hover { background: #FF3F3F; color: #fff; } #global-header.support nav ul li a[data-section="support"], #global-header nav ul li a[data-section="support"]:hover { background: #00BFF3; color: #fff; } #global-header.additional nav ul li a[data-section="additional"], #global-header nav ul li a[data-section="additional"]:hover { background: #484848 } #global-header.additional nav ul li a[data-section="additional"] .dot, #global-header nav ul li a[data-section="additional"]:hover .dot { background: #fff; } .expanded-nav-container { position: relative; top: 0; left: 0; width: 100%; box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.2); display: none; background: #fff; } /* Wii U styles */ @media screen and (width: 854px) { #global-header.wiiu .expanded-nav-container, #global-header.threeds .expanded-nav-container, #global-header.gamestore .expanded-nav-container, #global-header.amiibo .expanded-nav-container, #global-header.playnintendo .expanded-nav-container, #global-header.mynintendo .expanded-nav-container, #global-header.support .expanded-nav-container, #global-header.additional .expanded-nav-container { height: 541px!important; overflow: hidden!important; display: block!important; margin: 0px!important; } } .expanded-nav { font-size: 0; padding: 2.5rem 0; display: none; } .expanded-nav .wrapper { position: relative; } #global-header a.expanded-nav-box { width: 23%; margin: 1%; border-radius: 20px; display: inline-block; font-size: 20px; color: rgba(0,0,0,0.2); text-align: center; text-decoration: none; vertical-align: top; float: left; position: relative; padding-bottom: 21.5%; overflow: hidden; transition: .5s background ease-in-out; -webkit-transition: .5s background ease-in-out; z-index: 1; } .expanded-nav-box-title { position: absolute; top: 8%; text-align: center; width: 100%; color: #fff; line-height: 1; transition: .35s all ease-in-out; -webkit-transition: .35s all ease-in-out; } .expanded-nav-box-copy { position: absolute; bottom: 1.5em; text-align: center; width: 80%; color: #fff; font-size: .54em; left: 10%; transition: .35s all ease-in-out; -webkit-transition: .35s all ease-in-out; } .expanded-nav-box:hover .expanded-nav-box-title, .expanded-nav-box.is-active .expanded-nav-box-title { transform: scale3d(1.06,1.06,1); top: 40%; } body:lang(es-LA) .expanded-nav-box:hover .expanded-nav-box-title, body:lang(es-LA) .expanded-nav-box.is-active .expanded-nav-box-title { top: 20%; } .expanded-nav-box:hover .expanded-nav-box-copy, .expanded-nav-box.is-active .expanded-nav-box-copy{ bottom: 3.5em; } @media screen and (max-width: 600px) { .expanded-nav-box-copy { display: none; } } #global-header a.expanded-nav-box.expanded-nav-box-two { padding-bottom: 45%; font-size: 30px; } .expanded-nav-box-split { float: left; width: 25%; } #global-header .expanded-nav-box-split a.expanded-nav-box.expanded-nav-box-one-and-half { width: 96%; margin: 4% 0 8%; padding-bottom: 140%; font-size: 30px; } #global-header .expanded-nav-box-split a.expanded-nav-box.expanded-nav-buy-now { width: 96%; padding-bottom: 32%; font-size: 32px; line-height: 100%; margin: 0; } body:lang(es-LA) #global-header .expanded-nav-box-split a.expanded-nav-box.expanded-nav-buy-now { font-size: 25px; } #global-header .expanded-nav-box-split a.expanded-nav-box.expanded-nav-buy-now .expanded-nav-box-title { top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); } .expanded-nav-container-backgrounds { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .expanded-nav-container-backgrounds > div { position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; transition: .2s opacity linear; transition-delay: .1s; -webkit-transition: .2s opacity linear; -webkit-transition-delay: .1s; } .expanded-nav-container-backgrounds .bg-wiiu { background: #0096C8; } .expanded-nav-container-backgrounds .bg-threeds { background: #CE181E; } .expanded-nav-container-backgrounds .bg-gamestore { background: #FF7D00; } .expanded-nav-container-backgrounds .bg-amiibo { background: #fff url(/images/global/navigation/amiibo/bg-amiibo.png); } .expanded-nav-container-backgrounds .bg-playnintendo { background: #FF3F3F; } .expanded-nav-container-backgrounds .bg-mynintendo { background-color: #fff; background-image: -webkit-radial-gradient(#efefef 25%,transparent 26%),-webkit-radial-gradient(#efefef 25%,transparent 26%); background-image: radial-gradient(#efefef 25%,transparent 26%),radial-gradient(#efefef 25%,transparent 26%); background-size: 20px 20px; background-position: 0 0,10px 10px; } .expanded-nav-container-backgrounds .bg-support { background: #00BFF3; } .expanded-nav-container-backgrounds .bg-additional { background: #484848; } #global-header.wiiu .bg-wiiu, #global-header.threeds .bg-threeds, #global-header.gamestore .bg-gamestore, #global-header.amiibo .bg-amiibo, #global-header.playnintendo .bg-playnintendo, #global-header.mynintendo .bg-mynintendo, #global-header.support .bg-support, #global-header.additional .bg-additional { opacity: 1; transition-delay: 0s; -webkit-transition-delay: 0s; } #global-header.wiiu .expanded-nav-box { background-color: rgb(60, 177, 217); } #global-header.wiiu .expanded-nav-box .background-overlay { background-color: rgba(60, 177, 217, .6); } #global-header.wiiu .expanded-nav-box:hover { box-shadow: 0 0 0 4px rgb(60, 177, 217); } #global-header.threeds .expanded-nav-box { background-color: rgb(255, 0, 8); } #global-header.threeds .expanded-nav-box .background-overlay { background-color: rgba(255, 0, 8, .6); } #global-header.threeds .expanded-nav-box:hover { box-shadow: 0 0 0 4px rgb(255, 0, 8); } #global-header.amiibo .expanded-nav-box { background-color: rgb(37, 173, 243); } #global-header.amiibo .expanded-nav-box .background-overlay { background-color: rgba(37, 173, 243, .6); } #global-header.amiibo .expanded-nav-box:hover { box-shadow: 0 0 0 4px rgb(37, 173, 243); } #global-header.amiibo .expanded-nav-box.amiibo-section-whatis { background-color: rgb(230, 0, 30); } #global-header.amiibo .expanded-nav-box.amiibo-section-whatis .background-overlay { background-color: rgba(230, 0, 30, .6); } #global-header.amiibo .expanded-nav-box.amiibo-section-whatis:hover { box-shadow: 0 0 0 4px rgb(230, 0, 30); } #global-header.amiibo .expanded-nav-box.amiibo-section-games { background-color: rgb(165, 200, 15); } #global-header.amiibo .expanded-nav-box.amiibo-section-games .background-overlay { background-color: rgba(165, 200, 15, .6); } #global-header.amiibo .expanded-nav-box.amiibo-section-games:hover { box-shadow: 0 0 0 4px rgb(165, 200, 15); } #global-header.amiibo .expanded-nav-box.amiibo-section-compatibility { background-color: rgb(0, 150, 130); } #global-header.amiibo .expanded-nav-box.amiibo-section-compatibility .background-overlay { background-color: rgba(0, 150, 130, .6); } #global-header.amiibo .expanded-nav-box.amiibo-section-compatibility:hover { box-shadow: 0 0 0 4px rgb(0, 150, 130); } #global-header.amiibo .expanded-nav-box.amiibo-section-faq { background-color: rgb(230, 45, 140); } #global-header.amiibo .expanded-nav-box.amiibo-section-faq .background-overlay { background-color: rgba(230, 45, 140, .6); } #global-header.amiibo .expanded-nav-box.amiibo-section-faq:hover { box-shadow: 0 0 0 4px rgb(230, 45, 140); } #global-header.wiiu .expanded-nav-buy-now, #global-header.threeds .expanded-nav-buy-now, #global-header.gamestore .expanded-nav-box, #global-header.amiibo .expanded-nav-box.amiibo-section-buynow { background-color: #F7A324; } #global-header.gamestore .expanded-nav-box .background-overlay { background-color: rgba(247, 163, 36, .6); } #global-header.gamestore .expanded-nav-box:hover { box-shadow: 0 0 0 4px #F7A324; } #global-header.wiiu .expanded-nav-buy-now:hover, #global-header.threeds .expanded-nav-buy-now:hover, #global-header.amiibo .expanded-nav-box.amiibo-section-buynow:hover { box-shadow: 0 0 0 4px #f9be66; } #global-header.playnintendo .expanded-nav-box { background-color: rgb(250, 106, 106); } #global-header.playnintendo .expanded-nav-box .background-overlay { background-color: rgba(250, 106, 106, .6); } #global-header.playnintendo .expanded-nav-box:hover { box-shadow: 0 0 0 4px rgb(250, 106, 106); } #global-header.mynintendo .expanded-nav-box { background-color: rgb(230, 0, 18); } #global-header.mynintendo .expanded-nav-box .background-overlay { background-color: rgba(230, 0, 18, .6); } #global-header.mynintendo .expanded-nav-box:hover { box-shadow: 0 0 0 4px rgb(230, 0, 18); } #global-header.support .expanded-nav-box { background-color: rgb(85, 212, 247); } #global-header.support .expanded-nav-box:hover { box-shadow: 0 0 0 4px rgb(85, 212, 247); } #global-header .expanded-nav-box .background-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } #global-header .expanded-nav-box .background-overlay:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .3); } #global-header .expanded-nav-box:hover .background-overlay, #global-header .expanded-nav-box.is-active .background-overlay { opacity: 1; } #global-header.wiiu .expanded-nav-wiiu, #global-header.threeds .expanded-nav-threeds, #global-header.gamestore .expanded-nav-gamestore { display: block; } @media screen and (min-width: 601px) { #global-header.amiibo .expanded-nav-amiibo, #global-header.support .expanded-nav-support, #global-header.playnintendo .expanded-nav-playnintendo, #global-header.mynintendo .expanded-nav-mynintendo { display: block; } .wiiu-section-wiiu svg, .threeds-section-threeds svg, .games-section-games svg, .expanded-nav-additional svg { display: none; } } @media screen and (min-width: 601px) and (max-width: 900px) { #global-header a.expanded-nav-box { font-size: 16px; } #global-header a.expanded-nav-box.expanded-nav-box-two, #global-header .expanded-nav-box-split a.expanded-nav-box.expanded-nav-box-one-and-half { font-size: 25px; } } @media screen and (min-width: 601px) and (max-width: 768px) { #global-header a.expanded-nav-box.expanded-nav-box-two, #global-header .expanded-nav-box-split a.expanded-nav-box.expanded-nav-box-one-and-half { font-size: 20px; } } @media screen and (max-width: 600px) { .expanded-nav { padding: 0; } .wiiu-section-wiiu svg { position: absolute; width: 50%; bottom: 42%; left: 25%; height: 44%; } .threeds-section-threeds svg { position: absolute; width: 32%; height: 48%; bottom: 39%; left: 34%; } .games-section-games svg { position: absolute; width: 16%; height: 48%; bottom: 43%; left: 42%; } .expanded-nav-additional svg { position: absolute; bottom: 40%; height: 54%; } .additional-amiibo svg { width: 12%; left: 44%; } .additional-play-nintendo svg { width: 18%; left: 42%; } .additional-support svg { width: 16%; left: 42%; } .additional-my-nintendo svg { height: 80%; bottom: 10%; width: 100%; left: 0; } .line-art-container { display: none; } #global-header.additional .expanded-nav-additional { display: block; } #global-header a.expanded-nav-box { width: 48%; border-radius: 2px; padding-bottom: 26%; } #global-header .expanded-nav-box-split a.expanded-nav-box.expanded-nav-box-one-and-half { width: 98%; text-align: center; padding-bottom: 32%; margin: 1%; } #global-header a.expanded-nav-box.expanded-nav-box-two { width: 98%; padding-bottom: 31%; } #global-header a.expanded-nav-box.expanded-nav-buy-now { width: 98%; padding-bottom: 12%; } .expanded-nav-box-title { width: 90%; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); left: 5%; } #global-header a.expanded-nav-box.expanded-nav-box-two .expanded-nav-box-title, #global-header a.expanded-nav-box.expanded-nav-box-one-and-half .expanded-nav-box-title { transform: none; top: initial; bottom: 5%; } #global-header a.expanded-nav-box.expanded-nav-box-one-and-half.threeds-section-threeds .expanded-nav-box-title { font-size: .9em; } body.new3DS #global-header a.expanded-nav-box.expanded-nav-box-two .expanded-nav-box-title, body.new3DS #global-header a.expanded-nav-box.expanded-nav-box-one-and-half .expanded-nav-box-title { bottom: -5%; } .expanded-nav-box-split { width: 100%; } } .line-art-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; } .line-art-container > div { position: absolute; left: 50%; opacity: 0; transition: opacity .2s; } .line-art-hover { animation: hover 5s infinite cubic-bezier(0.49, 0, 0.41, 0.99); } @keyframes hover { 0% { -moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -webkit-transform: translateY(-15px); transform: translateY(-15px); } 50% { -moz-transform: translateY(15px); -ms-transform: translateY(15px); -webkit-transform: translateY(15px); transform: translateY(15px); } 100% { -moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -webkit-transform: translateY(-15px); transform: translateY(-15px); } } .line-art-sway { animation: sway 5s infinite cubic-bezier(0.49, 0, 0.41, 0.99); } @keyframes sway { 0% { -moz-transform: translateX(-15px); -ms-transform: translateX(-15px); -webkit-transform: translateX(-15px); transform: translateX(-15px); } 50% { -moz-transform: translateX(15px); -ms-transform: translateX(15px); -webkit-transform: translateX(15px); transform: translateX(15px); } 100% { -moz-transform: translateX(-15px); -ms-transform: translateX(-15px); -webkit-transform: translateX(-15px); transform: translateX(-15px); } } .line-art-grow { animation: grow 3s infinite cubic-bezier(0.1, 0.55, 0.23, 0.88); } @keyframes grow { 0% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } 50% { -moz-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } } .line-art-rock { animation: rock 5s infinite linear; } @keyframes rock { 0% { -moz-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } 10% { -moz-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } 50% { -moz-transform: rotate(-25deg); -ms-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } 60% { -moz-transform: rotate(-25deg); -ms-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } 100% { -moz-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } } #global-header.wiiu .line-art-wiiu, #global-header.threeds .line-art-threeds, #global-header.gamestore .line-art-gamestore, #global-header.support .line-art-support, #global-header.playnintendo .line-art-playnintendo, #global-header.mynintendo .line-art-mynintendo { opacity: 1; } .line-art-wiiu.mario-running { margin-left: -735px; top: 140px; transform: translateX(-15px); } .line-art-wiiu.mushroom { top: 330px; margin-left: 610px; } .line-art-wiiu.question-block { margin-left: 540px; top: 130px; } .line-art-wiiu.goomba { margin-left: 460px; top: 280px; animation-delay: 3s; } .line-art-threeds.peach { top: 50px; margin-left: -800px; transform: translateX(-15px); animation-delay: 1s; } .line-art-threeds.pipe { top: 430px; margin-left: 510px; } .line-art-threeds.luigi { top: 50px; margin-left: 490px; transform: translateY(-15px); } .line-art-gamestore.brick { top: 100px; margin-left: -630px; } .line-art-gamestore.bobomb { margin-left: -700px; top: 250px; transform: translateX(-15px); } .line-art-gamestore.bowser { top: 50px; margin-left: 430px; } .line-art-support.question-block { margin-left: -650px; top: 110px; } .line-art-support.goomba-1 { margin-left: -600px; top: 250px; } .line-art-support.goomba-2 { margin-left: -710px; top: 330px; animation-delay: 1s; } .line-art-support.goomba-2 svg { width: 117px; } .line-art-support.toad-left { margin-left: 420px; top: 200px; animation: toadsLeft 5s infinite cubic-bezier(0.49, 0, 0.41, 0.99); } .line-art-support.toads-middle { margin-left: 620px; top: 90px; animation: toadsMiddle 5s infinite cubic-bezier(0.49, 0, 0.41, 0.99); transform: rotate(-5deg); } .line-art-support.toad-right { margin-left: 760px; top: 180px; animation: toadsRight 5s infinite cubic-bezier(0.49, 0, 0.41, 0.99); } @keyframes toadsLeft { 0% { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } 50% { -moz-transform: translateX(-15px); -ms-transform: translateX(-15px); -webkit-transform: translateX(-15px); transform: translateX(-15px); } 100% { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes toadsMiddle { 0% { -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 50% { -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -webkit-transform: rotate(5deg); transform: rotate(5deg); } 100% { -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } } @keyframes toadsRight { 0% { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } 50% { -moz-transform: translateY(15px); -ms-transform: translateY(15px); -webkit-transform: translateY(15px); transform: translateY(15px); } 100% { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } } .line-art-playnintendo.mario-and-yoshi { margin-left: 445px; top: 115px; animation-delay: 4s; transform: translateX(-15px); } .line-art-playnintendo.lakitu { top: 50px; margin-left: -630px; transform: translateY(-15px); } .line-art-playnintendo.spiny { top: 310px; margin-left: -670px; animation-delay: 1s; transform: translateX(-15px); } .line-art-playnintendo.goomba { top: 330px; margin-left: 290px; animation-delay: 3s; transform: translateX(-15px); } .line-art-playnintendo.bobomb { top: 310px; margin-left: 70px; animation-delay: 2s; transform: translateX(-15px); } #global-header .expanded-nav-additional .additional-amiibo { background-color: #25ADF3; } #global-header .expanded-nav-additional .additional-support { background: #00BFF3; } #global-header .expanded-nav-additional .additional-play-nintendo { background: #FF3F3F; } #global-header .expanded-nav-additional .additional-my-nintendo { background: #E60012; } @media screen and (min-width: 601px) { .expanded-nav-box .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center bottom; background-repeat: no-repeat; background-size: contain; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; transition: all .4s ease-out; -webkit-transition: all .4s ease-out; } .expanded-nav-box:hover .background, .expanded-nav-box.is-active .background { transform: scale3d(1.15,1.15,1); -webkit-transform: scale3d(1.15,1.15,1); -moz-filter: blur(5px); -webkit-filter: blur(5px); filter: blur(5px); } #global-header .nav-section-faq .background { background-image: url(/images/global/navigation/faq.png); } #global-header.wiiu .wiiu-section-whatis .background { background-image: url(/images/global/navigation/wiiu/what-is-wiiu.jpg); } #global-header.wiiu .wiiu-section-games .background { background-image: url(/images/global/navigation/wiiu/games.jpg); } #global-header.wiiu .wiiu-section-features .background { background-image: url(/images/global/navigation/wiiu/features.jpg); } #global-header.wiiu .wiiu-section-software .background { background-image: url(/images/global/navigation/wiiu/built-in-software.jpg); } #global-header.wiiu .wiiu-section-accessories .background { background-image: url(/images/global/navigation/wiiu/accessories.jpg); } #global-header.threeds .threeds-section-whatis .background { background-image: url(/images/global/navigation/threeds/what-is-nintendo-3ds.jpg); } #global-header.threeds .threeds-section-whatis2ds .background { background-image: url(/images/global/navigation/threeds/what-is-nintendo-2ds.jpg); } #global-header.threeds .threeds-section-games .background { background-image: url(/images/global/navigation/threeds/games.jpg); } #global-header.threeds .threeds-section-features .background { background-image: url(/images/global/navigation/threeds/features.jpg); } #global-header.threeds .threeds-section-software .background { background-image: url(/images/global/navigation/threeds/built-in-software.jpg); } #global-header.gamestore .games-section-wiiu .background { background-image: url(/images/global/navigation/gamestore/wiiu-games.jpg); } #global-header.gamestore .games-section-threeds .background { background-image: url(/images/global/navigation/gamestore/nintendo-3ds-games.jpg); } #global-header.gamestore .games-section-all-games .background { background-image: url(/images/global/navigation/gamestore/all-games.jpg); } #global-header.gamestore .games-section-miitomo .background { background-image: url(/images/global/navigation/gamestore/miitomo.jpg); } #global-header.gamestore .games-section-sales-and-offers .background { background-image: url(/images/global/navigation/gamestore/sales-and-offers.jpg); } #global-header.gamestore .games-section-coming-soon .background { background-image: url(/images/global/navigation/gamestore/star.jpg); } #global-header.amiibo .amiibo-section-whatis .background { background-image: url(/images/global/navigation/amiibo/what-is-amiibo.jpg); } #global-header.amiibo .amiibo-section-games .background { background-image: url(/images/global/navigation/amiibo/games.jpg); } #global-header.amiibo .amiibo-section-lineup .background { background-image: url(/images/global/navigation/amiibo/lineup.jpg); } #global-header.amiibo .amiibo-section-compatibility .background { background-image: url(/images/global/navigation/amiibo/compatibility.jpg); } #global-header.playnintendo .play-nintendo-section-friends .background { background-image: url(/images/global/navigation/playnintendo/donkey-kong-diddy-kong.jpg); } #global-header.playnintendo .play-nintendo-section-explore .background { background-image: url(/images/global/navigation/playnintendo/lakitu.jpg); } #global-header.playnintendo .play-nintendo-section-news .background { background-image: url(/images/global/navigation/playnintendo/peach.jpg); } #global-header.playnintendo .play-nintendo-section-parents .background { background-image: url(/images/global/navigation/playnintendo/baby-mario-and-yoshi.jpg); } #global-header.mynintendo .my-nintendo-section-about .background { background-image: url(/images/global/navigation/mynintendo/about-points.jpg); } #global-header.wiiu .wiiu-section-wiiu .background { background-image: url(/images/global/navigation/wiiu/wiiu.jpg); } #global-header.threeds .threeds-section-threeds .background { background-image: url(/images/global/navigation/threeds/3ds.jpg); } #global-header.gamestore .games-section-games .background { background-image: url(/images/global/navigation/gamestore/game-store.jpg); } #global-header.amiibo .amiibo-section-amiibo .background { background-image: url(/images/global/navigation/amiibo/mario-amiibo.jpg); } #global-header.support .support-section-mario .background { background-image: url(/images/global/navigation/support/mario.jpg); } #global-header.playnintendo .play-nintendo-section-group .background { background-image: url(/images/global/navigation/playnintendo/play-nintendo.jpg); } #global-header.mynintendo .my-nintendo-section-mii .background { background-image: url(/images/global/navigation/mynintendo/my-nintendo-mii.jpg); } .expanded-nav-support .expanded-nav-box svg, .expanded-nav-mynintendo .expanded-nav-box svg { position: absolute; top: 50%; left: 50%; height: 111px; transform: translate(-50%, -30%); -webkit-transform: translate(-50%, -30%); transition: transform .4s ease-out; -webkit-transition: transform .4s ease-out; } .expanded-nav-support .support-section-wiiu.expanded-nav-box svg { width: 87%; } .expanded-nav-support .support-section-threeds.expanded-nav-box svg { width: 77%; } .expanded-nav-support .support-section-forums.expanded-nav-box svg { width: 42%; } .expanded-nav-support .support-section-internet.expanded-nav-box svg { width: 42%; top: 47%; } .expanded-nav-support .support-section-digital.expanded-nav-box svg { width: 50%; } .expanded-nav-support .support-section-repair.expanded-nav-box svg { width: 41%; } .expanded-nav-mynintendo .expanded-nav-box svg { width: 45%; } .expanded-nav-mynintendo .expanded-nav-box.my-nintendo-section-whatis svg { width: 58%; } .expanded-nav-support .expanded-nav-box:hover svg, .expanded-nav-mynintendo .expanded-nav-box:hover svg, .expanded-nav-support .expanded-nav-box.is-active svg, .expanded-nav-mynintendo .expanded-nav-box.is-active svg { transform: translate(-50%, -30%) scale(1.15); -webkit-transform: translate(-50%, -30%) scale(1.15); -moz-filter: blur(5px); -webkit-filter: blur(5px); filter: blur(5px); } .threeds-section-threeds .expanded-nav-box-title { top: 5%; } .wiiu-section-wiiu .expanded-nav-box-title { top: 10%; } } @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 601px), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 601px), only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 601px), only screen and (min-device-pixel-ratio: 2) and (min-width: 601px), only screen and (min-resolution: 192dpi) and (min-width: 601px), only screen and (min-resolution: 2dppx) and (min-width: 601px) { #global-header .nav-section-faq .background { background-image: url(/images/global/navigation/faq@2x.png); } #global-header.wiiu .wiiu-section-wiiu .background { background-image: url(/images/global/navigation/wiiu/wiiu@2x.jpg); } #global-header.wiiu .wiiu-section-whatis .background { background-image: url(/images/global/navigation/wiiu/what-is-wiiu@2x.jpg); } #global-header.wiiu .wiiu-section-games .background { background-image: url(/images/global/navigation/wiiu/games@2x.jpg); } #global-header.wiiu .wiiu-section-features .background { background-image: url(/images/global/navigation/wiiu/features@2x.jpg); } #global-header.wiiu .wiiu-section-software .background { background-image: url(/images/global/navigation/wiiu/built-in-software@2x.jpg); } #global-header.wiiu .wiiu-section-accessories .background { background-image: url(/images/global/navigation/wiiu/accessories@2x.jpg); } #global-header.threeds .threeds-section-threeds .background { background-image: url(/images/global/navigation/threeds/3ds@2x.jpg); } #global-header.threeds .threeds-section-whatis .background { background-image: url(/images/global/navigation/threeds/what-is-nintendo-3ds@2x.jpg); } #global-header.threeds .threeds-section-whatis2ds .background { background-image: url(/images/global/navigation/threeds/what-is-nintendo-2ds@2x.jpg); } #global-header.threeds .threeds-section-games .background { background-image: url(/images/global/navigation/threeds/games@2x.jpg); } #global-header.threeds .threeds-section-features .background { background-image: url(/images/global/navigation/threeds/features@2x.jpg); } #global-header.threeds .threeds-section-software .background { background-image: url(/images/global/navigation/threeds/built-in-software@2x.jpg); } #global-header.gamestore .games-section-wiiu .background { background-image: url(/images/global/navigation/gamestore/wiiu-games@2x.jpg); } #global-header.gamestore .games-section-threeds .background { background-image: url(/images/global/navigation/gamestore/nintendo-3ds-games@2x.jpg); } #global-header.gamestore .games-section-all-games .background { background-image: url(/images/global/navigation/gamestore/all-games@2x.jpg); } #global-header.gamestore .games-section-miitomo .background { background-image: url(/images/global/navigation/gamestore/miitomo@2x.jpg); } #global-header.gamestore .games-section-sales-and-offers .background { background-image: url(/images/global/navigation/gamestore/sales-and-offers@2x.jpg); } #global-header.gamestore .games-section-coming-soon .background { background-image: url(/images/global/navigation/gamestore/star@2x.jpg); } #global-header.gamestore .games-section-games .background { background-image: url(/images/global/navigation/gamestore/game-store@2x.jpg); } #global-header.amiibo .amiibo-section-amiibo .background { background-image: url(/images/global/navigation/amiibo/mario-amiibo@2x.jpg); } #global-header.amiibo .amiibo-section-whatis .background { background-image: url(/images/global/navigation/amiibo/what-is-amiibo@2x.jpg); } #global-header.amiibo .amiibo-section-games .background { background-image: url(/images/global/navigation/amiibo/games@2x.jpg); } #global-header.amiibo .amiibo-section-lineup .background { background-image: url(/images/global/navigation/amiibo/lineup@2x.jpg); } #global-header.amiibo .amiibo-section-compatibility .background { background-image: url(/images/global/navigation/amiibo/compatibility@2x.jpg); } #global-header.playnintendo .play-nintendo-section-group .background { background-image: url(/images/global/navigation/playnintendo/play-nintendo@2x.jpg); } #global-header.playnintendo .play-nintendo-section-friends .background { background-image: url(/images/global/navigation/playnintendo/donkey-kong-diddy-kong@2x.jpg); } #global-header.playnintendo .play-nintendo-section-explore .background { background-image: url(/images/global/navigation/playnintendo/lakitu@2x.jpg); } #global-header.playnintendo .play-nintendo-section-news .background { background-image: url(/images/global/navigation/playnintendo/peach@2x.jpg); } #global-header.playnintendo .play-nintendo-section-parents .background { background-image: url(/images/global/navigation/playnintendo/baby-mario-and-yoshi@2x.jpg); } #global-header.mynintendo .my-nintendo-section-mii .background { background-image: url(/images/global/navigation/mynintendo/my-nintendo-mii@2x.jpg); } #global-header.mynintendo .my-nintendo-section-about .background { background-image: url(/images/global/navigation/mynintendo/about-points@2x.jpg); } #global-header.support .support-section-mario .background { background-image: url(/images/global/navigation/support/mario@2x.jpg); } } @media screen and (max-width: 600px) { #global-header nav ul li { width: 24%; } body:lang(es-LA) #global-header nav ul li, body:lang(fr-CA) #global-header nav ul li { width: 33.3%; } #global-header nav ul li a .dot { width: 7px; height: 7px; background: #888; border-radius: 7px; margin: 7px 3px 0; display: inline-block; } } @media screen and (max-width: 570px) { #global-header a.expanded-nav-box { font-size: 18px; } } @media screen and (max-width: 500px) { body:lang(es-LA) #global-header a.expanded-nav-box.expanded-nav-box-one-and-half.threeds-section-threeds .expanded-nav-box-title { font-size: 18px; bottom: 2%; } } /* Animate Drawer Open/Close */ div#page-container { -webkit-backface-visibility: hidden; } /* ----------------------------------- Global Footer ----------------------------------- */ footer#global-footer { width: 100%; } /* --- Top Section / Primary Links --- */ nav.global-footer-top { background: #e7e7e7; background: -moz-linear-gradient(bottom, #e7e7e7 0%, #f9f9f9 75%); background: -webkit-linear-gradient(bottom, #e7e7e7 0%,#f9f9f9 75%); background: -o-linear-gradient(bottom, #e7e7e7 0%,#f9f9f9 75%); background: -ms-linear-gradient(bottom, #e7e7e7 0%,#f9f9f9 75%); background: linear-gradient(to top, #e7e7e7 0%,#f9f9f9 75%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#f9f9f9',GradientType=0 ); padding: 20px 0; } /* General Styles */ nav.global-footer-top ul li { padding: 5px 0; } /* Links */ nav.global-footer-top a { color: #a0a0a0; } nav.global-footer-top a:hover { color: #484848; text-decoration: none; } /* Headings */ nav.global-footer-top ul > li, nav.global-footer-top ul > li a { font-family: 'LatoBold'; font-size: 16px; } nav.global-footer-top li.footer-icon-country { clear: none; } nav.global-footer-top li.footer-icon-country span.change { background-position: 0 -100px; display: inline; } /* Country Selector Icon */ nav.global-footer-top li.footer-icon-country span { background: url('/images/global/sprite-global-footer-flags.png') 0 0 no-repeat; display: inline-block; height: 12px; width: 16px; } /* Page Titles */ nav.global-footer-top ul ul li, nav.global-footer-top ul ul li a { display: block; font-family: 'LatoRegular'; font-size: 12px; } /* Prevent Word Wrapping */ nav.global-footer-top ul a div { white-space: nowrap; display: inline; } /* --- Bottom Section / Secondary Links & Social Media ---*/ section.global-footer-bottom { background: #989898; background: -moz-linear-gradient(top, #8c8a8a 0%, #989898 50%); background: -webkit-linear-gradient(top, #8c8a8a 0%,#989898 50%); background: -o-linear-gradient(top, #8c8a8a 0%,#989898 50%); background: -ms-linear-gradient(top, #8c8a8a 0%,#989898 50%); background: linear-gradient(to bottom, #8c8a8a 0%,#989898 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c8a8a', endColorstr='#989898',GradientType=0 ); color: #e2e2e2; height: auto; min-height: 145px; padding: 20px 0; text-align: center; } /* General Styles */ section.global-footer-bottom ul { margin-bottom: 15px; } section.global-footer-bottom ul li { display: inline-block; padding: 0 10px; } /* Links */ section.global-footer-bottom a { font-size: 14px; color: #e2e2e2; } section.global-footer-bottom a:hover { color: #fff; } /* Nintendo Logo */ section.global-footer-bottom a.icon-nintendo { display: block; height: 30px; margin: 30px auto; text-decoration: none; text-indent: -99999em; width: 120px; } section.global-footer-bottom a.icon-nintendo:before { color: #c1c1c1; font-size: 30px; } /* ESRB Logo */ section.global-footer-bottom a.footer-logo-esrb { display: block; width: 60px; } /* Social Media */ section.global-footer-bottom ul.footer-social a { background: #fff; display: block; font-size: 38px; height: 34px; margin: 2px; padding: 5px; position: relative; text-decoration: none; text-indent: -99999em; width: 34px; } section.global-footer-bottom a.icon-facebook { color: #4b689f; } section.global-footer-bottom a.icon-twitter { color: #00aee8; } section.global-footer-bottom a.icon-youtube { color: #ce1721; } section.global-footer-bottom a.icon-tumblr { color: #2c4760; } section.global-footer-bottom a.icon-instagram { color: #624338; } section.global-footer-bottom ul.footer-social a:before { height: 35px; left: -2px; top: -2px; width: 35px; } /* Copyright */ section.global-footer-bottom ul.footer-copyright { font-size: 12px; } section.global-footer-bottom ul.footer-copyright li { display: inline-block; padding: 0; } /* ================================================ DESKTOP VIEW ================================================ */ @media screen and (min-width: 769px) { a.back-to-top { display: none; } } /* ================================================ TABLET VIEW ================================================ */ @media screen and (min-width: 571px) and (max-width: 768px) { /* ----------------------------------- Global Footer ----------------------------------- */ nav.global-footer-top ul > li.col4-tab { margin-right: 0; } section.global-footer-bottom { padding-bottom: 40px; } } /* ================================================ MOBILE VIEW ================================================ */ @media screen and (max-width: 570px) { /* ----------------------------------- Global Footer ----------------------------------- */ /* --- Top Section / Primary Links --- */ nav.global-footer-top { background: #fff; padding: 0; } nav.global-footer-top .wrapper { max-width: 100%; } /* General Styles */ nav.global-footer-top ul.accordion { border-bottom: none; margin-bottom: 0; } nav.global-footer-top ul li { padding: 0; } /* Links */ nav.global-footer-top a { color: #484848; } nav.global-footer-top a:hover { color: #3aa4ff; } nav.global-footer-top li.closed ul { display: block; } /* Headings */ nav.global-footer-top ul > li, nav.global-footer-top ul > li a { font-family: 'LatoBold'; font-size: 22px; } nav.global-footer-top div.wrapper > ul > li > a { background: #fafafa; border-bottom: 1px solid #dadada; border-top: 1px solid #dadada; color: #2576bc; display: block; min-height: 60px; padding: 20px 40px 20px 20px; position: relative; } /* Arrow Icon */ nav.global-footer-top div.wrapper > ul > li > a:after { content: '\e60f'; display: block; font-family: 'icons'; font-size: 20px; position: absolute; right: 25px; top: 20px; } /* Country Select Icon */ nav.global-footer-top div.wrapper > ul > li.footer-icon-country > a:after { display: none; } nav.global-footer-top li.footer-icon-country span.change { background-position: 0 -100px; display: inline; } nav.global-footer-top li.footer-icon-country div > span { background-position: 0 -8px; background-size: 30px; height: 22px; vertical-align: top; width: 30px; } nav.global-footer-top ul a div { display: inline; } /* Closed State */ nav.global-footer-top div.wrapper > ul > li.closed > a { border-bottom: none; } nav.global-footer-top div.wrapper > ul > li.closed > a:after { content: '\e60c'; } nav.global-footer-top li.closed ul { display: none; } /* Open Drawer Links */ nav.global-footer-top ul ul { padding: 20px 20px 10px; display: none; } nav.global-footer-top ul ul li { margin-bottom: 15px; } nav.global-footer-top ul ul li, nav.global-footer-top ul ul li a, nav.global-footer-top ul ul li a:hover { font-family: 'LatoLight'; font-size: 18px; } nav.global-footer-top ul ul li a:hover { text-decoration: underline; } /* --- Bottom Section / Secondary Links & Social Media --- */ section.global-footer-bottom { padding-bottom: 40px; } /* General Styles */ section.global-footer-bottom ul { margin-bottom: 20px; } section.global-footer-bottom ul.footer-links li { display: block; margin-bottom: 10px; } section.global-footer-bottom ul.footer-social { margin-bottom: 10px; } section.global-footer-bottom ul.footer-social li { padding: 0 7px; } /* Links */ section.global-footer-bottom a { font-size: 16px; } /* Nintendo Logo */ section.global-footer-bottom a.icon-nintendo { margin: 10px auto; } /* ESRB Logo */ section.global-footer-bottom a.footer-logo-esrb { margin: 0 auto; width: 80px; } /* Copyright */ section.global-footer-bottom ul.footer-copyright { margin-top: 10px; } section.global-footer-bottom ul.footer-copyright li { display: block; font-size: 14px; } section.global-footer-bottom ul.footer-copyright li:last-child { margin-top: 10px; } } /* ================================================ 3DS Browser Specific Styles ================================================ */ body.nin3DS a.back-to-top { display: none; } body.nin3DS #global-footer ul, body.nin3DS #global-footer li { border: none; } body.nin3DS nav.global-footer-top ul > li, body.nin3DS nav.global-footer-top ul > li a { display: block; font-size: 18px; } body.nin3DS nav.global-footer-top div.wrapper > ul > li > a:after { background: url('/images/global/no-icon-font-arrows.png') 0 -20px no-repeat; content: ''; height: 17px; overflow: hidden; position: absolute; right: 25px; top: 20px; width: 25px; } body.nin3DS nav.global-footer-top div.wrapper > ul > li.closed > a:after { background-position: 0 0; content: ''; } body.nin3DS section.global-footer-bottom a.icon-nintendo { background: url('/images/global/no-icon-font-header-footer.png') 0 -30px no-repeat; } body.nin3DS section.global-footer-bottom a, body.nin3DS section.global-footer-bottom ul.footer-copyright { border: none; font-size: 12px; } body.nin3DS section.global-footer-bottom ul.footer-copyright li { border: none; display: block; padding: 0; } body.nin3DS ul.footer-social a { background: url('/images/global/no-icon-font-header-footer.png') no-repeat; height: 35px; overflow: hidden; width: 35px; } body.nin3DS ul.footer-social a.icon-facebook { background-position: 0 -95px; } body.nin3DS ul.footer-social a.icon-twitter { background-position: -35px -95px; } body.nin3DS ul.footer-social a.icon-youtube { background-position: -70px -95px; } body.nin3DS ul.footer-social a.icon-tumblr { background-position: 0 -130px; } body.nin3DS ul.footer-social a.icon-instagram { background-position: -35px -130px; } /* ----------------------------------- Backgrounds ----------------------------------- */ /* --- Gradient that stretches the browser width --- */ .container-gradient { position: relative; } .container-gradient:before { background: url('/images/global/gradient/radial-f2-fff.png') center top no-repeat; background-size: 100%; background: -moz-radial-gradient(top, ellipse cover, #f2f2f2 0%, rgba(255,255,255,0) 90%); background: -webkit-gradient(radial, center top, 0px, center top, 100%, color-stop(0%,#f2f2f2), color-stop(90%,rgba(255,255,255,0))); background: -webkit-radial-gradient(top, ellipse cover, #f2f2f2 0%,rgba(255,255,255,0) 90%); background: -o-radial-gradient(top, ellipse cover, #f2f2f2 0%,rgba(255,255,255,0) 90%); background: -ms-radial-gradient(top, ellipse cover, #f2f2f2 0%,rgba(255,255,255,0) 90%); background: radial-gradient(ellipse at top, #f2f2f2 0%, rgba(255,255,255,0) 90%); content: ''; height: 150px; left: 0; position: absolute; width: 100%; } /* Gradient on main content */ div#page-container.container-gradient:before { top: 180px; } /* Gradient on specific sections */ .container-gradient:before { top: 40px; } .container-gradient .page-content > .row { margin-bottom: 60px; padding-top: 25px; } /* --- Gradient that is within content --- */ .content-gradient { background: url('/images/global/gradient/radial-f2-fff.png') center top no-repeat; background-size: 100%; background: -moz-radial-gradient(top, ellipse cover, #f2f2f2 0%, #fff 50%); background: -webkit-gradient(radial, center top, 0px, center top, 100%, color-stop(0%,#f2f2f2), color-stop(50%,#fff)); background: -webkit-radial-gradient(top, ellipse cover, #f2f2f2 0%,#fff 50%); background: -o-radial-gradient(top, ellipse cover, #f2f2f2 0%,#fff 50%); background: -ms-radial-gradient(top, ellipse cover, #f2f2f2 0%,#fff 50%); background: radial-gradient(ellipse at top, #f2f2f2 0%, #fff 50%); margin-bottom: 80px; padding-top: 25px; position: relative; } /* --- Gradient that is within content but stretches full browser width --- */ .content-gradient-before, .content-gradient-after { position: relative; } .content-gradient-before:before, .content-gradient-after:after { background: url('../images/global/gradient/radial-f2-fff.png') center top no-repeat; background-size: 100%; background: -moz-radial-gradient(top, ellipse cover, #f2f2f2 0%, rgba(255,255,255,0) 90%); background: -webkit-gradient(radial, center top, 0px, center top, 100%, color-stop(0%,#f2f2f2), color-stop(90%,rgba(255,255,255,0))); background: -webkit-radial-gradient(top, ellipse cover, #f2f2f2 0%,rgba(255,255,255,0) 90%); background: -o-radial-gradient(top, ellipse cover, #f2f2f2 0%,rgba(255,255,255,0) 90%); background: -ms-radial-gradient(top, ellipse cover, #f2f2f2 0%,rgba(255,255,255,0) 90%); background: radial-gradient(ellipse at top, #f2f2f2 0%, rgba(255,255,255,0) 90%); content: ''; height: 150px; left: -50%; position: absolute; right: -50%; width: 200%; } .content-gradient-before:before { top: 0; } .content-gradient-after:after { bottom: -155px; } /* ----------------------------------- Platform Indicators ----------------------------------- */ /* --- Border --- */ .threeDS { border-bottom: 3px solid #ce181e; } .WiiU { border-bottom: 3px solid #0096c8; } .no-system { border-bottom: 3px solid #999; } /* --- Date with Border --- */ .date { border-bottom: 3px solid #dadada; color: #999; display: inline-block; font-size: 16px; font-family: 'LatoBold'; padding-bottom: 5px; } .threeDS .date, .date.threeDS { border-color: #ce181e; } .WiiU .date, .date.WiiU { border-color: #0096c8; } .no-system .date, .date.no-system { border-color: #999; } /* ----------------------------------- Buttons ----------------------------------- */ /* --- Default button --- */ .btn { background: #2576bc; border: 1px solid #1660a0; border-radius: 2px; color: #fff; display: inline-block; font-family: 'LatoBold'; font-size: 20px; line-height: 28px; padding: 10px 0; text-align: center; text-decoration: none; width: 98%; margin-left: 1%; -webkit-transition: all 150ms ease-in-out; -moz-transition: all 150ms ease-in-out; -ms-transition: all 150ms ease-in-out; -o-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } .btn:hover { background: #3aa4ff; border-color: #3aa4ff; color: #fff; text-decoration: none; } /* --- Display button as inline-block --- */ .btn-inline { display: inline-block; padding-left: 20px; padding-right: 20px; width: auto; } /* --- White button --- */ /* --- Preview button --- */ .btn-white, .btn-preview { background: #fff; border-color: #dadada; color: #2576bc; } .btn-white:hover, .btn-preview:hover { background: #fff; border-color: #3aa4ff; color: #3aa4ff; } /* --- White FILLED button w default text color --- */ .btn-white-filled { background: #ffffff; color: #000; } .btn-white-filled:hover { /*background: #51fd74 !important;*/ color: #000; } /* --- Orange button --- */ .btn-orange { background: #f47b2b; border-color: #f47b2b; color: #fff; } .btn-orange:hover { background: #f7a400; border-color: #f7a400; color: #fff; } /* --- Orange FILLED button w white text --- */ .btn-orange-filled { background: #f47b2b; } .btn-orange-filled:hover { background: #f8b050 !important; } /* --- Transparent button --- */ .btn-transparent { background: none; border-color: #2576bc; color: #2576bc; } .btn-transparent:hover { background: none; border-color: #3aa4ff; color: #3aa4ff; } /* --- White Transparent button --- */ .btn-white-transparent { background: none; border-color: #fff; color: #fff; } .btn-white-transparent:hover { background: #fff; border-color: #fff; color: #3aa4ff; } /* --- Grey button --- */ .btn-grey { background: #888; border-color: #888; color: #fff; } .btn-grey:hover { background: #b1b1b1; border-color: #b1b1b1; color: #fff; } /* --- eShop button --- */ .btn-eshop { background: #fff; border-color: #dadada; color: #ff7d00; } /* logo as an icon font */ .btn-eshop span.icon-eshop, .btn-eshop span.icon-eshop-nin, .logo-eshop span.icon-eshop, .logo-eshop span.icon-eshop-nin { display: inline-block; position: relative; text-indent: -99999em; } .btn-eshop span.icon-eshop, .logo-eshop span.icon-eshop { width: 2.7em; } .btn-eshop span.icon-eshop-nin, .logo-eshop span.icon-eshop-nin { width: 4em; } .btn-eshop span.icon-eshop:before, .logo-eshop span.icon-eshop:before { bottom: -3px; color: #ff7d00; } .btn-eshop span.icon-eshop-nin:before, .logo-eshop span.icon-eshop-nin:before { bottom: -2px; color: #8c8c8c; } /* hover state */ .btn-eshop:hover { background: #fff; border-color: #ff7d00; color: #ff7d00; } /* --- eShop button with smaller orange text --- */ .btn-eshop.orange { color: #ff7d00; font-size: 18px; } .btn-eshop.orange span.icon-eshop:before, .btn-eshop.orange span.icon-eshop-nin:before { font-size: 20px; } /* --- Official Site button --- */ /* --- Preview button --- */ .btn-site, .btn-preview { padding: 5px 0; } /* --- Preview button --- */ .btn-preview { font-size: 18px; } /* --- Large button --- */ .btn-large { font-size: 30px; } /* --- Text button with arrow --- */ .text-btn-arrow { /*white-space: nowrap;*/ } .text-btn-arrow:after { content: '\e606'; display: inline-block; font-family: 'icons'; font-size: 60%; height: 20px; position: relative; width: 20px; } /* --- Content separator button with top/bottom border --- */ .btn-borders { border-bottom: 1px solid #dadada; border-top: 1px solid #dadada; font-size: 24px; margin: 0 0 20px; padding: 15px 0; text-align: center; } /* --- Content separator button with top/bottom border --- */ .btn-no-borders { font-size: 28px; margin: 0 0 20px; text-align: center; } /* --- Block button --- */ a.btn-block { text-decoration: none; color: #fff; font-family: 'LatoBold'; line-height: 2em; padding: 10px 25px; white-space: nowrap; } a.btn-block:hover { color: #fff; } /* --- Text button with circle plus --- */ .text-btn-plus { white-space: nowrap; } .text-btn-plus:after { border: 2px solid #2576bc; border-radius: 50%; content: '+'; display: inline-block; font-family: 'LatoRegular'; font-size: 24px; font-style: normal; height: 26px; line-height: 22px; margin-left: 10px; position: relative; text-align: center; width: 26px; } .text-btn-plus:hover:after { border-color: #3aa4ff; } /* --- Video thumbnail links --- */ .modal-video-trigger { display: inline-block; position: relative; text-decoration: none; } .play-btn-container { background: #000; position: relative; } .play-btn-container img { opacity: 1; -webkit-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; } .play-btn-container:hover img { opacity: .7; } .play-btn { background: url(/images/global/play-button.png); display: block; height: 64px; width: 64px; left: 50%; top: 50%; margin-left: -32px; margin-top: -32px; position: absolute; opacity: .8; -webkit-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; } .play-btn:hover { opacity: 1; } .modal-video-trigger span.b8 { display: block; line-height: 1.2; margin-bottom: 10px; max-width: 166px; text-align: left; } .modal-video-trigger img { border-radius: 2px; display: block; } /* --- Split, single-row CTA buttons with top and bottom border --- */ ul.split-cta { border-top: 1px solid #dadada; border-bottom: 1px solid #dadada; line-height: 1.5; margin-bottom: 20px; } ul.split-cta li { border-left: 1px solid #dadada; display: inline-block; padding: 10px 0; margin: 0!important; } ul.split-cta li:first-child { border: none; text-align: right; padding-right: 7%; } ul.split-cta li:last-child { text-align: left; padding-left: 7%; } @media screen and (max-width: 570px) { ul.split-cta li { border-left: none; border-bottom: 1px solid #dadada; line-height: 1.2; } ul.split-cta li:first-child { border-bottom: 1px solid #dadada; text-align: center; padding-right: 0; } ul.split-cta li:last-child { border-bottom: none; text-align: center; padding-left: 0; } } /* ----------------------------------- Lists ----------------------------------- */ .bullet-list {} /* for list in a container that can not be reached. i.e: CMS body text */ div.cms-content ul, ul.bullets, .bullet-list ul { padding-left: 15px; } ul.bullets li, div.cms-content ul li, .bullet-list ul li { line-height: 1.5; margin-bottom: 2ex; position: relative; } ul.bullets li:before, div.cms-content ul li:before, .bullet-list ul li:before { color: #0096c8; content: '\2022'; display: block; font-size: 17px; left: -15px; position: absolute; top: 0; } ul.bullets.grey li:before { color: #777; } ul.bullets.red li:before { color: #ce181e; } ul.asterisk { margin-bottom: 20px; padding-left: 18px; } ul.asterisk li { margin-bottom: 5px; position: relative; } ul.asterisk li:before { content: '*'; display: block; left: -15px; position: absolute; top: 0; } ul.asterisk li.no-stars { margin-left: -15px; } ul.asterisk li.no-stars:before { content: ''; } ul.asterisk li.two-stars:before { content: '**'; } ul.asterisk li.three-stars:before { content: '***'; } ul.asterisk li.cross:before { content: '†'; } ol.numbers { list-style: decimal; padding-left: 20px; } /* ----------------------------------- Form Elements ----------------------------------- */ /* --- Custom Checkboxes --- */ input[type="checkbox"] { opacity: 0; position: absolute; } input[type="checkbox"] + label { clear: both; display: block; font-family: 'LatoBold'; margin-bottom: 12px; padding-left: 25px; position: relative; } /* Styled pseudo input */ input[type="checkbox"] + label:before { background: #dbdbdb; border-radius: 2px; color: #dbdbdb; content: '\e620'; display: block; font-family: 'icons'; font-size: 14px; height: 20px; left: 0; line-height: 20px; margin-right: 10px; position: absolute; text-align: center; top: -2px; width: 20px; } /* Focus state */ input[type="checkbox"]:focus + label:before { outline: 1px dotted #3aa4ff; } /* Active state */ input[type="checkbox"]:checked + label { color: #2576bc; } input[type="checkbox"]:checked + label:before { background: #2576bc; color: #fff; } input[type="checkbox"]:disabled + label { color: #dadada; } input[type="checkbox"]:disabled + label:before { background: #efefef; color: #efefef; } /* ----------------------------------- Pagination ----------------------------------- */ div.pagination-bar { border-bottom: 1px solid #dadada; border-top: 1px solid #dadada; margin-bottom: -1px; min-height: 49px; } /* General Styles */ div.pagination-bar ul { display: inline-block; font-family: 'LatoBold'; font-size: 14px; line-height: 28px; height: 100%; vertical-align: top; white-space: nowrap; } div.pagination-bar ul:after { clear: both; content: ''; display: block; } div.pagination-bar li { display: inline-block; } /* Sort Options */ div.pagination-bar ul.options { font-size: 16px; padding: 10px 0; width: 50%; } div.pagination-bar ul.sort { float: left; } div.pagination-bar ul.items { float: left; text-align: right; } ul.options li { border-left: 1px solid #dadada; font-family: 'LatoRegular'; } ul.options li:nth-child(1), ul.options li:nth-child(2) { border: none; } ul.options li a { display: block; font-family: 'LatoBold'; padding: 0 10px; } ul.options li.active a { color: #777; font-family: 'LatoRegular'; } ul.options li.active a:hover { color: #777; cursor: default; text-decoration: none; } /* Pagination - Pages */ div.pagination-bar div.bottom-row { clear: both; display: inline-block; text-align: center; width: 100%; } div.bottom-row:before { background: #dadada; content: ''; display: block; height: 1px; left: 0; position: absolute; width: 100%; } div.pagination-bar ul.pagination { padding: 10px 10px 10px 0; } ul.pagination li { min-width: 28px; text-align: center; } ul.pagination li a { display: block; height: 100%; width: 100%; } ul.pagination li.active a { background: #f5f5f5; border-radius: 50%; color: #777; } ul.pagination li a:hover { color: #3aa4ff; } ul.pagination li.ellipses a { color: #777; } ul.pagination li.ellipses a:hover { color: #777; cursor: default; text-decoration: none; } /* Pagination - Prev/Next Arrows */ div.pagination-bar ul.pagination-nav {} ul.pagination-nav li { border-left: 1px solid #dadada; border-right: 1px solid #dadada; display: block; float: left; height: 48px; margin-left: -1px; position: relative; text-indent: -99999em; vertical-align: top; width: 50px; } ul.pagination-nav li a { display: block; height: 100%; width: 100%; } ul.pagination-nav li a:before { font-size: 24px; height: 100%; padding-top: 12px; text-align: center; width: 100%; } ul.pagination-nav li a:hover { color: #3aa4ff; } ul.pagination-nav li.disabled a { color: #dbdbdb; cursor: default; } /* ----------------------------------- Modal Window ----------------------------------- */ div#overlay { background-color: #000; display: block; min-height: 100%; left: 0; opacity: .7; position: fixed; top: 0; width: 100%; z-index: 999998; } div#modal-window { background: #fff; border-radius: 2px; color: #000; display: block; min-height: 300px; margin: 0 auto; opacity: 0; padding: 2%; position: fixed; max-width: 780px; width: 80%; z-index: 999999; /* Had to remove this so video would play on ios6 devices*/ /*-webkit-transform: translate3d(0,0,0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0);*/ } div#modal-window.modal-video { min-height: 0; } div.video-player .innerWrapper, div.poster-player .innerWrapper, div#modal-window .innerWrapper { z-index: 1 !important; } /* Close Button */ #btn-modal-close { background: #2576bc; border: none; border-radius: 50%; cursor: pointer; height: 30px; padding: 0; position: absolute; right: -10px; text-indent: -99999em; text-decoration: none; top: -10px; width: 30px; z-index: 2; } #btn-modal-close:before { color: #fff; content: '\e61b'; display: block; font-family: 'icons'; font-size: 15px; left: 0; line-height: 30px; position: absolute; text-align: center; text-indent: 0; top: 0; width: 30px; } #btn-modal-close:hover { background: #3aa4ff; } div.modal-content { display: none; } div#modal-window div.modal-content { position: relative; -webkit-backface-visibility: hidden; } div#modal-window div#video-player { background-color: #000; height: 100%; position: relative; width: 100%; } /* ----------------------------------- Preview Popup Window ----------------------------------- */ div.preview-overlay, div.preview-overlay-pv { background: rgba(255,255,255,.5); height: 100%; left: 0; top: 0; position: fixed; width: 100%; z-index: 3; } /* --- Preview Window --- */ div.preview-container { background: #fff; box-shadow: 0 3px 5px rgba(0,0,0,0.2); max-width: 100%; opacity: 0; position: absolute; width: 600px; z-index: 5; min-height: 200px; } div.preview-container.loading { background: #fff url('/images/global/loader.gif') center center no-repeat; } div.preview-container:before, div.preview-container:after { background: #dadada; content: ''; position: absolute; left: 0; width: 100%; z-index: -1; } div.preview-container.no-border { background: #f5f5f7; } div.preview-container.no-border:before, div.preview-container.no-border:after { background: #f5f5f7; } div.preview-container:before { height: 30px; top: 0; } div.preview-container:after { height: 5px; bottom: 0; } /* Close Button */ div.preview-container a.preview-close, div.preview-container a.preview-close-pv { background: #fff; border-radius: 2px; height: 20px; position: absolute; right: 5px; text-indent: -99999em; text-decoration: none; top: 5px; width: 20px; z-index: 10; } div.preview-container a.preview-close:before, div.preview-container a.preview-close-pv:before { color: #2576bc; font-size: 12px; line-height: 20px; width: 100%; text-align: center; } div.preview-container a.preview-close:hover:before, div.preview-container a.preview-close-pv:hover:before { color: #3aa4ff; } /* Content Container Grid */ div.preview-container div.preview-content { border-bottom: 5px solid #dadada; border-top: 30px solid #dadada; padding: 20px; } div.preview-container div.preview-content[data-system*="DS"] { border-color: #ce181e; } div.preview-container div.preview-content[data-system*="Wii"] { border-color: #0096c8; } div.preview-container div.preview-content:before { color: #fff; display: block; font-family: 'icons'; left: 0; line-height: 30px; position: absolute; text-align: center; top: 0; width: 100%; } div.preview-container div.preview-content[data-system*="DS"]:before { content: '\e619'; font-size: 30px; } div.preview-container div.preview-content[data-system*="Wii"]:before { content: '\e61a'; font-size: 16px; } /* Video Player */ div.preview-content div.video-player { margin-bottom: 20px; } /* Title & Details */ div.preview-info {} div.preview-info li { margin-bottom: 5px; } div.preview-info li span { color: #484848; font-family: 'LatoBold'; } /* Learn More Buttons */ div.preview-buttons {} div.preview-buttons li { margin-bottom: 10px; text-align: center; } /* ----------------------------------- Tab Switcher ----------------------------------- */ .tab-switcher { position: relative; } .tab-switcher ul.tab-content { position: relative; } .tab-switcher ul.tab-content > li { display: none; } .tab-switcher ul.tab-content > li.active { display: block; } .tab-switcher ul.tab-nav { position: relative; } .tab-switcher ul.tab-nav li { display: inline-block; vertical-align: top; } /* ----------------------------------- Tab Slider (3DS Home Hero) ----------------------------------- */ .tab-slider { max-width: 980px; position: relative; z-index: 1; } .tab-slider ul.content { height: 488px; overflow: hidden; position: relative; } .tab-slider ul.content li { float: left; overflow: hidden; position: relative; width: 4%; -webkit-transition: width 500ms, height 500ms; -moz-transition: width 500ms, height 500ms; -o-transition: width 500ms, height 500ms; transition: width 500ms, height 500ms; } .tab-slider ul.content li .slideContent { opacity: 0; -webkit-transition: opacity 500ms cubic-bezier(0.785, 0.135, 0.150, 0.860); } .tab-slider ul.content li:first-child { width: 92%; } .tab-slider ul.triggers li { cursor: pointer; } /* ----------------------------------- Rating stars (Game detail page) ----------------------------------- */ .rating-stars { background-color: transparent; background-image: url('/images/global/sprite-rating-stars.png'); background-repeat: no-repeat; background-position: 0 0; width: 21px; height: 20px; display: inline-block; } .rating-stars.star-filled-gray { background-position: 0 0; } .rating-stars.star-empty { background-position: -22px 0; } .rating-stars.star-filled-yellow { background-position: -44px 0; } /* ================================================ DESKTOP VIEW ================================================ */ @media screen and (min-width: 769px) { /* Hover state */ input[type="checkbox"] + label:hover { color: #3aa4ff; cursor: pointer; } input[type="checkbox"] + label:hover:before { color: #c1c1c1; } /* Active state */ input[type="checkbox"]:checked + label { color: #2576bc; } input[type="checkbox"]:checked + label:before { background: #2576bc; color: #fff; } /* Disabled state */ input[type="checkbox"]:disabled + label:hover { color: #dadada; cursor: default; } input[type="checkbox"]:disabled + label:hover:before { background: #efefef; color: #efefef; } /* ----------------------------------- Pagination ----------------------------------- */ /* Sort Options */ div.pagination-bar ul.options { border-bottom: none; width: auto; } div.pagination-bar ul.sort { float: left; padding-right: 3%; } div.pagination-bar ul.items { text-align: left; } /* Pagination - Pages */ div.pagination-bar div.bottom-row { clear: none; float: right; width: auto; } div.bottom-row:before { display: none; } } /* ================================================ TABLET VIEW ================================================ */ @media screen and (min-width: 571px) and (max-width: 768px) { /* ----------------------------------- Backgrounds ----------------------------------- */ div#page-container.container-gradient:before { top: 160px; } /* ----------------------------------- Platform Indicators ----------------------------------- */ /* --- Date with Border --- */ .date { color: #999; } /* ----------------------------------- Buttons ----------------------------------- */ .btn, .btn-white, .btn-grey, .btn-orange { font-size: 18px; } .btn-large { font-size: 30px; } /* ----------------------------------- Tab Slider (3DS Home Hero) ----------------------------------- */ .tab-slider ul.content { height: 750px; -webkit-transition : height 300ms; -moz-transition : height 300ms; -ms-transition : height 300ms; -o-transition : height 300ms; transition : height 300ms; } .tab-slider.short ul.content { height: 580px; } .tab-slider ul.content li { width: 100%; } } /* ================================================ MOBILE VIEW ================================================ */ @media screen and (max-width: 570px) { /* ----------------------------------- Backgrounds ----------------------------------- */ div#page-container.container-gradient:before { top: 140px; } .page-gradient { margin-bottom: 40px; } /* ----------------------------------- Buttons ----------------------------------- */ .btn, .btn-white, .btn-grey, .btn-orange { font-size: 18px; } .btn-large { font-size: 30px; } body:lang(fr-CA) .text-btn-plus:after { font-size: 16px; height: 20px; line-height: 16px; margin-left: 6px; width: 20px; } .btn-no-borders { font-size: 1em; } /* ----------------------------------- Form Elements ----------------------------------- */ /* --- Custom Checkboxes --- */ input[type="checkbox"] + label { padding-left: 0; } /* Styled pseudo input */ input[type="checkbox"] + label:before { left: auto; right: 0; } /* ----------------------------------- Pagination ----------------------------------- */ /* General Styles */ div.pagination-bar ul { line-height: 20px; } /* Sort Options */ div.pagination-bar ul.options { padding: 10px 0; } ul.options li a { padding: 0 5px; } /* Pagination - Pages */ div.pagination-bar ul.pagination { line-height: 30px; padding: 5px 15px 0 5px; } ul.pagination li { margin-right: 5px; min-width: 30px; } ul.pagination li.ellipses { min-width: 10px; } /* Pagination - Prev/Next Arrows */ ul.pagination-nav li { height: 40px; width: 30px; } ul.pagination-nav li a:before { font-size: 20px; padding-top: 10px; } /* ----------------------------------- Tab Slider (3DS Home Hero) ----------------------------------- */ .tab-slider ul.content { height: 620px; } /* ----------------------------------- Accordion Links (similar to footer) ----------------------------------- */ /* --- Wrapper --- */ .accordion { border-bottom: 10px solid #2576bc; max-width: 100%; width: 100%; } /* --- Row --- */ .accordion-row {} /* --- Expandable Column --- */ .accordion-row .column { background: #fff; max-width: 100%; padding: 0; } /* General Styles */ .accordion-row .column ul li { padding: 0; margin-bottom: 15px; } /* Links */ .accordion-row .column li a { color: #484848; display: block; font-family: 'LatoLight'; font-size: 18px; } /* Subhead Links */ .accordion-row .column a.b2 { font-size: 22px; font-family: 'LatoRegular'; margin-bottom: 20px; } .accordion-row .column.closed ul { display: none; } /* Headings */ .accordion-row .column h2 { background: #fafafa; border-top: 1px solid #dadada; color: #2576bc; display: block; font-family: 'LatoBold'; font-size: 20px; height: 60px; margin: 0; padding: 20px; position: relative; } .accordion-row .column h2.trigger { border-bottom: 1px solid #dadada; } .accordion-row .column h2 a { color: #2576bc; display: block; height: 100%; width: 100%; } /* Arrow Icon */ .accordion-row .column h2.trigger:after { content: '\e60f'; display: block; font-family: 'icons'; font-size: 20px; position: absolute; right: 25px; top: 20px; } /* Closed State */ .accordion-row .column.closed h2 { border-bottom: none; } .accordion-row .column.closed h2:after { content: '\e60c'; } /* --- Open Drawer Links --- */ .accordion-row .column > ul { padding: 20px 20px 10px; display: none; } } @media screen and (max-width: 310px) { .btn-no-borders { font-size: 0.8em; } } /* ================================================ 3DS Browser Specific Styles ================================================ */ body.nin3DS .date { font-size: 14px; } body.nin3DS .accordion-row .column h2 { font-size: 18px; } body.nin3DS .accordion-row .column h2.trigger:after { background: url('../images/global/no-icon-font-arrows.png') 0 -20px no-repeat; content: ''; height: 17px; overflow: hidden; position: absolute; right: 25px; top: 20px; width: 25px; } body.nin3DS .accordion-row .column.closed h2:after { background-position: 0 0; content: ''; } body.nin3DS .text-btn-arrow:after, body.nin3DS .text-btn-plus:after { display: none; } body.nin3DS .modal-video-trigger.play-btn:before { background: url('../images/global/play-button.png') center center no-repeat; content: ''; } body.nin3DS input[type="checkbox"] + label:before { content: 'X'; } /* ================================================ Custom styles used in compel ================================================ */ p.gd-footnote { font-size: .8em; line-height: 1.2; } li.cms-indent { margin-left: 2em; } ul li.cms-indent:before { content: "-"; } /** * * Main container * */ #addToHomeScreen { z-index:9999; -webkit-user-select:none; user-select:none; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-touch-callout:none; touch-callout:none; width:240px; font-size:15px; padding:12px 14px; text-align:left; font-family:helvetica; background-image:-webkit-gradient(linear,0 0,0 100%,color-stop(0,#fff),color-stop(0.02,#eee),color-stop(0.98,#ccc),color-stop(1,#a3a3a3)); border:1px solid #505050; -webkit-border-radius:8px; -webkit-background-clip:padding-box; color:#333; text-shadow:0 1px 0 rgba(255,255,255,0.75); line-height:130%; -webkit-box-shadow:0 0 4px rgba(0,0,0,0.5); } #addToHomeScreen.addToHomeIOS7 { background:#f2f2f2 !important; -webkit-border-radius:1px !important; border:1px solid #ccc; -webkit-box-shadow:0 0 4px rgba(0,0,0,0.2); } #addToHomeScreen.addToHomeIpad { width:268px; font-size:18px; padding:14px; } /** * * The 'wide' class is added when the popup contains the touch icon * */ #addToHomeScreen.addToHomeWide { width:296px; } #addToHomeScreen.addToHomeIpad.addToHomeWide { width:320px; font-size:18px; padding:14px; } /** * * The balloon arrow * */ #addToHomeScreen .addToHomeArrow { position:absolute; background-image:-webkit-gradient(linear,0 0,100% 100%,color-stop(0,rgba(204,204,204,0)),color-stop(0.4,rgba(204,204,204,0)),color-stop(0.4,#ccc)); border-width:0 1px 1px 0; border-style:solid; border-color:#505050; width:16px; height:16px; -webkit-transform:rotateZ(45deg); bottom:-9px; left:50%; margin-left:-8px; -webkit-box-shadow:inset -1px -1px 0 #a9a9a9; -webkit-border-bottom-right-radius:2px; } #addToHomeScreen.addToHomeIOS7 .addToHomeArrow { background-image:-webkit-gradient(linear,0 0,100% 100%,color-stop(0,rgba(204,204,204,0)),color-stop(0.4,rgba(204,204,204,0)),color-stop(0.4,#f2f2f2)) !important; -webkit-box-shadow:inset -1px -1px 0 #fff !important; border-color:#ccc !important; } /** * * The balloon arrow for iPad * */ #addToHomeScreen.addToHomeIpad .addToHomeArrow { -webkit-transform:rotateZ(-135deg); background-image:-webkit-gradient(linear,0 0,100% 100%,color-stop(0,rgba(238,238,238,0)),color-stop(0.4,rgba(238,238,238,0)),color-stop(0.4,#eee)); -webkit-box-shadow:inset -1px -1px 0 #fff; top:-9px; bottom:auto; left:50%; } /** * * Close button * */ #addToHomeScreen .addToHomeClose { -webkit-box-sizing:border-box; position:absolute; right:4px; top:4px; width:18px; height:18px; line-height:14px; text-align:center; text-indent:1px; -webkit-border-radius:9px; background:rgba(0,0,0,0.12); color:#888; -webkit-box-shadow:0 1px 0 #fff; font-size:16px; } #addToHomeScreen.addToHomeIOS7 .addToHomeClose { line-height:12px; padding-right:1px; background:transparent; border: 1px solid #888; -webkit-box-shadow:none; } /** * * The '+' icon, displayed only on iOS < 4.2 * */ #addToHomeScreen .addToHomePlus { font-weight:bold; font-size:1.3em; } /** * * The 'share' icon, displayed only on iOS >= 4.2 * */ #addToHomeScreen .addToHomeShare { display:inline-block; width:18px; height:15px; background-repeat:no-repeat; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAeCAQAAADu6HTYAAADPElEQVR4Xq3TX2gcRRzA8e/M7mVv2+TSNpc/TZtrY6jUGqgaSAmEChKLrYK0YH0RFC2CSCkEfCghiKU04J8qNigq6os+iQV98MHWFwVBrQQRWs21lBw5cw3NNb1/udu72RGG5Y77IzXW77D7sAwf5scyYoL6BGXSDKFZwaGpLvIUaeoCkvX1MmsM0Ny6oRSQYOLuIS+YZOpfQdqslpUxcZrzTVAz4qPwW2O3CeIwC/RSzeY6Ow1QhUrkr+YOWfEKDkEP8Rij7CHKJmrFSDHBdwGEE5wiGChPN+PnT8VdRtEIl1d4gRj/1EVe5ZSBKGh8iqQpo/Fo5+3C/gz0MYg4zgwbqday1/Q4B8BGQ45d/Hi54lakCrU5obOcidJpu1+Lg9whjabyaOYLnrIBFFaRD+xe2ybMDWY66GmP/WA9cGfGp0CWhy0wkMN8inepFiH2rV1j0NQSNQbFLRQnS8/8YSDBBpadfv4CYDub2fmeHDNAsL1MBWUel0iA+Xik6eHcyvD3vAMSU1TGuA/YRS+dD7ovCQN43GKRFCU20Kd3V/avDVVyAZ5niTEuLA5/zBGWg9EEEhfJKN200Tat8CmRAQb9+wv7soPlHt2tQorsz1uPbr0HTY4sJwrH47zJZwABBAKLMBoQXepwgTwdHCo+fXMkQ4lrxEmQ5AaXipPqDY9V2vn09tgvTPI71EEGYxM+/uMJLJ4svpgaWGKOi/xKgmqLSUGSUd5f2vIVJ/CgBaTIUsZ7ZBsn0+NzfMOXLFCXQyTcybN6ep5ZZgUOHn7jpfUpsZshdugPGf+E5zjbyHTSRyQ8xfRPPM/s63RHeuknSoT22mjmmnAOIMkUZ6D1xSfPPAfd1WFKM3sO2CMaHx8M1NjnXKHaAGGkOW0C02WeYHUz4qMtx+w5gUDS8NckYe5lHsMYwCZEPyEEmjLDZFmAS7CDviMdxyTkMNVBKEmYLvbiQQBIBBbCQG04bGQvFWz6CfsCQLWCigILFwcfkGYBiOpbYuOizTAyYyDdCtrGaRG1LCkIgMYEFhI0WqQZoSlbGRyHKe4qOx7iv2bVQW9dp4dlM/x6kmwnWQcd/Q3FCqwTEiT5s+6D5v/pb0SSHyg7uhMWAAAAAElFTkSuQmCC); background-size:18px 15px; text-indent:-9999em; overflow:hidden; } #addToHomeScreen.addToHomeIOS7 .addToHomeShare { width:11px; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAA8CAYAAAAQTCjdAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAASCQAAEgkB80sG3AAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAKjSURBVGiB7dpPiFVVHMDxz7m9NCtMyI2bEJEC25WrEkzHUXCRraIwdNE8ZxfYIlcis1ZEbGEzT1QCF4XgH1CyWhUoJKIWNRGEiCNKmkSiYTzfcfGuOokx77x3ZlS8382959zfn+/invvn3RdijHIRBrwkOINCYXEcdjpb7VyiYdBsLScwt5y6IloYdzqXo36Ro0gY9IKWo+5JwmzBt2HQnBw9ehYNazyn5TBee8Dh+Vq+CWu92GufnkTDR6ab7gDeBNHouMM/l9tXTXM0fGBmL726Fg1Dam74EsvKqR8VNowL2Yzj5f7rnnE4DHq2235diYYhhTGfC94up35T0y+6di/ITU0rKVd+sEi0P7xr2pSJOu8zvF+OzqEv7vDH/WFxt7/cshy/ticsN8sXYUht0kXDOlsF9XJ4UaEvNoz9X3zc5bKaZThbyr5jzJ4wlNY7KTgM+ES0vhz+KeiPw36fKC/ucAF9uFBOrTZm26SJCtaV27+xIo7cXdkTEhvOoh+XyxprU1qnim7CQdGK2HAyKRexYVShT3RItDElN+mkjiP2Ym+S3f01hv2EVal5WW6hU0ElmptaqJuBpXg6MbeFH2LDpU6CQ93zWIKnEvs0cayGU3glMfkOo1jQYewZzOuyz7FC95Jwo5OgUFfgeg993hh/eTqCTxOSm/iuk8DY0Ap1b2GhtHXxsfZN4j/X0fOx4auEIknEhqv4OiUn1L13Z/+xWfWVaG4q0dxUormpRHNTieamEs1NJZqbJ1Q0jHvdiJo5S2cVjSNOCHZhn3/SnuYnIvl3yomIIz7MXZMn9hydRCrR3FSiualEc1OJ5qYSzU0lmptKNDePjWgwcPePT7/g+4cp8wCW4GXaryK3tL+mLdD5x62ppllgu7bso8q/2HIbzGWdNmWnSJwAAAAASUVORK5CYII=); background-size:11px 15px; } /** * * The touch icon (if available) * */ #addToHomeScreen .addToHomeTouchIcon { display:block; float:left; -webkit-border-radius:6px; border-radius:6px; -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.9); box-shadow:0 1px 3px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.9); background-repeat:no-repeat; width:57px; height:57px; -webkit-background-size:57px 57px; background-size:57px 57px; margin:0 12px 0 0; border:1px solid #333; -webkit-background-clip:padding-box; background-clip:padding-box; } .outdated-overlay { position: fixed; z-index: 1000; width: 100%; height: 100%; left: 0; top: 0; background: url(/images/outdatedbrowser/bg-overlay.png) repeat; } .outdated-message { position: absolute; z-index: 1999; top: 20%; left: 0; width: 100%; height: 583px; background: url(/images/outdatedbrowser/img-message.png) no-repeat center center; } .fr-message .outdated-message { background: url(/images/outdatedbrowser/img-message-fr.png) no-repeat center center; } .outdated-force-width { width: 980px; height: 583px; position: relative; margin: 0 auto; } #btn-outdated-continue { position: absolute; right: -11px; bottom: 98px; width: 200px; height: 54px; } #btn-browser-firefox, #btn-browser-ie, #btn-browser-chrome, #btn-browser-safari { position: absolute; right: -11px; bottom: 209px; height: 24px; } #btn-browser-firefox:hover , #btn-browser-ie:hover, #btn-browser-chrome:hover, #btn-browser-safari:hover { border-bottom: 1px solid #1e74bf; } #btn-browser-chrome { left: 526px; width: 107px; } .fr-message #btn-browser-chrome { width: 112px; } #btn-browser-ie { left: 643px; width: 117px; } .fr-message #btn-browser-ie { left: 650px; width: 128px; } #btn-browser-firefox { left: 771px; width: 101px; } .fr-message #btn-browser-firefox { left: 791px; width: 106px; } #btn-browser-safari { left: 880px; width: 46px; } .fr-message #btn-browser-safari { left: 908px; } .global-header-search .dropdown { position: relative; } #gsa-search-autosuggest { padding-top: 1em; border-top: 1px dashed #bbb; display: none; } #gsa-search-autosuggest.show-more { padding-bottom: 2em; } #gsa-search-autosuggest li a .gsa-result-title { font-size: .8em; color: #0096c8; } .gsa-result-title, #gsa-search-autosuggest [class*='icon-'] { display: inline-block; vertical-align: middle; } #gsa-search-autosuggest [class*='icon-'] { margin-right: .5em; width: 1.4em; text-align: center; } #gsa-search-autosuggest [class*="icon-"]:before { position: relative; } #gsa-search-autosuggest li a { line-height: 1.7em; display: block; } #gsa-search-autosuggest li a:hover { background: rgba(0,0,0,.1); } #autosuggest-footer { position: absolute; width: 100%; left: 0; padding-left: 1em; bottom: 0; background: #0096c8; display: none; } #autosuggest-footer a { color: #fff !important; } #autosuggest-footer a:hover { text-decoration: underline; } body.global-search-is-on #page-container > *:not(#global-header) { -moz-filter: blur(5px); -webkit-filter: blur(5px); filter: blur(5px); transition: blur 100ms ease-in-out; -webkit-transition: blur 100ms ease-in-out; -moz-transition: blur 100ms ease-in-out; } ul.autosuggest li:nth-child(n + 4) { display: none; } #gsa-search-autosuggest.is-on.show-more + #autosuggest-footer { display: block; } @media screen and (min-width: 769px) { ul.autosuggest.is-on { display: block; } ul.autosuggest li:nth-child(n + 4) { display: inline-block; } #gsa-search-autosuggest.is-on { display: block; } } ul.autosuggest {} ul.autosuggest * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } ul.autosuggest li { display: inline-block; overflow: hidden; position: relative; } ul.autosuggest li a.btn-autosuggest-main { display: block; height: 100px; text-align: left; font-size: 18px; padding-left: 10px; -webkit-transition: all 100ms ease-in-out; -moz-transition: all 100ms ease-in-out; -ms-transition: all 100ms ease-in-out; -o-transition: all 100ms ease-in-out; transition: all 100ms ease-in-out; } ul.autosuggest li:hover a.btn-autosuggest-main, ul.autosuggest li.active a.btn-autosuggest-main, ul.autosuggest li#see-all-game-results:hover a { background: rgba(0,0,0,.1); color: #000; text-decoration: none; display: block; } ul.autosuggest li#see-all-game-results { display: block; } ul.autosuggest li#see-all-game-results a { color: #000 !important; } /* Text */ ul.autosuggest li p { display: table-cell; vertical-align: middle; width: 240px; padding-left: 10px; margin-bottom: 0; line-height: 1.2; color: #000; } .autosuggest-extratext { font-size: 12px; color: #484848; display: block; margin-top: 2px; } /* Boxart */ .btn-autosuggest-boxart { display: table-cell; vertical-align: middle; width: 59px; height: 85px; padding: 0 10px; } .btn-autosuggest-boxart img { width: 100%; } .locale-modal-wrapper { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba( 0,0,0,0.5 ); z-index: 2000; } .locale-alert .locale-modal-wrapper { display: block; } .locale-modal { background: url(/images/global/locale-modal/bg.png) #fff repeat; max-width: 812px; min-height: 360px; width: 95%; margin: 90px auto 0; box-shadow: 0px 4px 0px 0px rgba(0,0,0,0.20); border-radius: 4px; } .locale-modal-bg-extra { background: url(/images/global/locale-modal/bg-character-pattern.svg) no-repeat right center; padding: 35px 55px; } .locale-modal p { max-width: 391px; } .locale-modal .locale-cta-container { padding-top: 20px; } /* These styles are being overridden (even thought hey should be global) */ .locale-modal .row .col6 { width: 48.57142857% !important; } /* ----------------------------------- Buttons ----------------------------------- */ /* --- Default button --- */ .locale-modal .btn { background: #2576bc; border: 1px solid #1660a0; border-radius: 2px; color: #fff; display: inline-block; font-family: 'LatoBold'; font-size: 20px; line-height: 28px; padding: 10px 0; text-align: center; text-decoration: none; width: 98%; margin: 0 0 0 1%; } .locale-modal .btn:hover { background: #3aa4ff; border-color: #3aa4ff; color: #fff; text-decoration: none; } /* --- White button --- */ /* --- Preview button --- */ .locale-modal .btn-white { background: #fff; border-color: #dadada; color: #2576bc !important; } .btn-white:hover { background: #fff !important; border-color: #3aa4ff; color: #3aa4ff !important; } /* --- White FILLED button w default text color --- */ .locale-modal .btn-white-filled { background: #ffffff; color: #000; } .locale-modal .btn-white-filled:hover { /*background: #51fd74 !important;*/ color: #000; } @media screen and (min-width: 600px) and (max-width: 811px) { .locale-modal-bg-extra { background-size: 30%; } .locale-modal p { margin-right: 30%; } } @media screen and (max-width: 599px) { .locale-modal { margin-top: 110px; overflow: scroll; height: 100%; width: 100%; border-radius: 0; } .locale-modal-bg-extra { background: transparent; padding: 35px 15px; min-height: 700px; } .locale-modal p { margin-right: 0; width: 100%; } .locale-modal .cta-container { padding-top: 0px; } .locale-modal .btn { margin-bottom: 15px; } } /* ================================================ Carousel Widget ================================================ */ /* ----------------------------------- Hero Carousel - CTA button ----------------------------------- */ .cta-container { width: 100%; position: absolute; right: 0; padding-right: -webkit-calc( (100% - 940px) / 2 ); padding-right: calc( (100% - 940px) / 2 ); } @media screen and (min-width: 571px) and (max-width: 768px) { .cta-container { padding-right: 10px; } } .cta-inner-container { width: 160px; float: right; } body:lang(fr-CA) .cta-inner-container { white-space: nowrap; } .cta-container .btn { padding: 10px 15px; width: initial; } /* ----------------------------------- Default Styles (.multiple) ----------------------------------- */ div.carousel { margin: 0 auto 30px; position: relative; width: 100%; } div.frame { margin: 0 auto; max-width: 980px; overflow: hidden; position: relative; width: 100%; z-index: 1; } div.frame.smooth-scroll { overflow-x: auto; padding-bottom: 10px; -webkit-overflow-scrolling: touch; } /* Filter Items */ .filtered-row .carousel.multiple { z-index: 1; top: 3em; } .filtered-row .filter-selector { text-align: right; float: right; padding-top: 11px; z-index: 2; } section.filtered-row h2.section-title { float: left; z-index: 2; } .filter-selector .btn-filter { display: inline-block; padding-bottom: 10px; } .filter-all #see-all, .filter-all #see-all:hover { color: #000; cursor: default; text-decoration: none; border-bottom: 3px solid #999; } .filter-WiiU #see-WiiU, .filter-WiiU #see-WiiU:hover { color: #000; cursor: default; text-decoration: none; border-bottom: 3px solid #0096c8; } .filter-threeDS #see-threeDS, .filter-threeDS #see-threeDS:hover { color: #000; cursor: default; text-decoration: none; border-bottom: 3px solid #ce181e; } .filtered-row div.frame { top: -2em; } div.carousel ul.panels li.filtered-out { display: none; } /* --- Content Items --- */ div.carousel ul.panels { overflow: hidden; position: relative; width: 100%; z-index: 1; } div.carousel ul.panels > li { float: left; margin-bottom: 30px; position: relative; opacity: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); } /* System Logo */ div.carousel ul.panels li:after { color: #d5d5d5; display: block; font-family: 'icons'; height: 20px; left: 0; position: absolute; width: 100%; } div.carousel ul.panels li.WiiU:after { bottom: -30px; display: block; content: ""; width: 60px; height: 20px; background: rgba(0, 0, 0, 0) url('/images/page/whats-new/sprite-logos.png') right 0 no-repeat; background-size: 240px; } div.carousel ul.panels li.WiiU:hover:after { background-position: right -20px; } div.carousel ul.panels li.threeDS:after { bottom: -30px; display: block; content: ""; width: 110px; height: 20px; background: rgba(0, 0, 0, 0) url('/images/page/whats-new/sprite-logos.png') right -80px no-repeat; background-size: 120px; } div.carousel ul.panels li.threeDS:hover:after { background-position: right -100px; } div.carousel ul.panels li img { display: block; } .container { overflow: hidden; position: relative; } .container > div { opacity: 0; position: absolute; transition: opacity 400ms; -webkit-transition: opacity 400ms; } /* --- Next/Prev Navigation --- */ div.carousel div.nav { position: absolute; display: none; height: 100%; top: 0; width: 100%; } div.carousel div.nav div.arrow { display: block; height: 100%; overflow: hidden; position: absolute; top: 0; width: 60px; } div.carousel div.nav div.prev { left: -2.5%; } div.carousel div.nav div.next { right: -2.5%; } div.carousel div.nav div.more { display: none; } div.carousel div.nav div.arrow a { background-image: url('/images/global/sprite-carousel-arrows.png'); background-repeat: no-repeat; display: block; height: 60px; position: absolute; text-decoration: none; text-indent: -99999em; top: 25%; top: -webkit-calc(35% - 30px); top: calc(35% - 30px); width: 60px; z-index: 1; } div.carousel div.nav div.prev a { background-position: 0 0; } div.carousel div.nav div.next a { background-position: -60px 0; } div.carousel div.nav div.prev a:hover { background-position: 0 -60px; } div.carousel div.nav div.next a:hover { background-position: -60px -60px; } /* --- Pagination --- */ div.carousel ul.carousel-pagination { margin: 30px 0; overflow: hidden; position: relative; text-align: center; z-index: 1; } div.carousel ul.carousel-pagination li { display: inline-block; margin: 5px; position: relative; width: 30px; } div.carousel ul.carousel-pagination li a { display: block; position: relative; text-decoration: none; z-index: 1; } div.carousel ul.carousel-pagination li span { background: #e0e0e0; border: 1px solid #e0e0e0; border-radius: 2px; cursor: pointer; display: block; height: 4px; text-indent: -99999em; } div.carousel ul.carousel-pagination li.is-active span { background: #2576bc; border-color: #1660a0; } div.carousel ul.carousel-pagination li a:hover span { background: #3aa4ff; border-color: #3aa4ff; } /* ----------------------------------- Detail Hero Carousel - Games Detail Page ----------------------------------- */ /* --- Next/Prev Navigation --- */ div.carousel.hero div.nav, div.carousel.sibling-hero div.nav {} div.carousel.hero div.nav div.arrow, div.carousel.sibling-hero div.nav div.arrow { width: 100px; } div.carousel.hero div.nav div.prev, div.carousel.sibling-hero div.nav div.prev { left: 0; } div.carousel.hero div.nav div.next, div.carousel.sibling-hero div.nav div.next { right: 0; } div.carousel.hero div.nav div.arrow a, div.carousel.sibling-hero div.nav div.arrow a { background: rgba(0,0,0,0.27); border: 5px solid rgba(255,255,255,0.27); border-radius: 50%; height: 64px; left: 18px; opacity: 0; top: 30%; top: -webkit-calc(45% - 30px); top: calc(45% - 30px); width: 64px; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -ms-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s; } div.carousel.hero:hover div.nav div.arrow a, div.carousel.sibling-hero:hover div.nav div.arrow a { opacity: 1; } div.carousel.hero div.nav div.arrow a:before, div.carousel.sibling-hero div.nav div.arrow a:before { font-size: 40px; line-height: 54px; text-align: center; } div.carousel.hero div.nav div.prev a:before, div.carousel.sibling-hero div.nav div.prev a:before { left: 4px; } div.carousel.hero div.nav div.next a:before, div.carousel.sibling-hero div.nav div.next a:before { right: 4px; } /* ----------------------------------- Hero Carousel - Center Stage ----------------------------------- */ div.carousel.hero { } div.carousel.hero div.frame { max-width: 1200px; } /* --- Content Items --- */ div.carousel.hero ul.panels li { margin-bottom: 0; text-align: center; border: none; } div.carousel.hero ul.panels li:after { display: none; } div.carousel.hero ul.panels li .hero-img { background-position: center top; background-repeat: no-repeat; background-size: cover; display: block; max-height: 510px; padding-bottom: 42.5%; /* Initially set height to 1200x510 */ width: 100%; position: relative; z-index: -1; height:50px; /* 56.25% = 16x9 */ } div.carousel.hero ul.panels li .hero-img.image-overlay { z-index: 1; } a div.hero-esrb { display: table; background-color: #fff; vertical-align: top; border: solid 1px white; } a div.hero-esrb-icon { width: 47px; } a div.hero-esrb-desc { display: table-cell; vertical-align: middle; color: #000; border-width: 3px 3px 3px 0; border-color: black; border-style: solid; -moz-box-sizing: border-box; margin-left: -3px; width: 120px; overflow: hidden; } .hero-esrb-desc p { margin-bottom: 1px; font-size: 10px; line-height: 1.1; padding-left: 5px; text-align: left !important; } /* Adjust image to display 980x510 and scale accordingly */ @media screen and (max-width: 1080px) { div.carousel.hero ul.panels li .hero-img { padding-bottom: 48%; } } @media screen and (max-width: 1024px) { div.carousel.hero ul.panels li .hero-img { padding-bottom: 50%; } } @media screen and (max-width: 980px) { div.carousel.hero ul.panels li .hero-img { padding-bottom: 53%; } } @media screen and (max-width: 768px) { div.carousel.hero ul.panels li .hero-img { padding-bottom: 59%; } } @media screen and (max-width: 570px) { div.carousel.hero ul.panels li .hero-img { padding-bottom: 62%; } } /* --- Slide Info --- */ div.carousel.hero div.info-bar { background: rgba(0,0,0, 0.7); height: 110px; opacity: 1; position: absolute; bottom: 0; width: 100%; z-index: 1; } div.carousel.hero div.info-bar a { text-decoration: none; } div.carousel.hero div.info-bar div.inner-content { border: none; margin: 10px auto; max-width: 980px; position: relative; } /* Inline Images */ div.carousel.hero div.info-bar img { display: inline-block; vertical-align: middle; } /* Title */ .carousel.hero .info-bar h3, .carousel.hero .info-bar .h3 { color: #fff; letter-spacing: -1px; line-height: 1; margin: 5px auto; text-align: center; } /* div.carousel.hero div.info-bar .txt-dark h3 { color: #000; } */ /* Sub Text */ div.carousel.hero div.info-bar p { text-align: center; } div.carousel.hero div.info-bar .txt-dark p { color: #000; } div.carousel.hero .BGImage { opacity: 0; width: 100%; height: 100%; position: absolute; top: 0; background-position: center center; } div.carousel.hero .BGImage .overlayWide { background: rgba(0,0,0, 0.7); width: 100%; position: absolute; bottom: 0; } /* --- Pagination --- */ div.carousel.hero ul.carousel-pagination { bottom: -1px; margin: auto; padding-right: -webkit-calc( (100% - 940px) / 2 ); padding-right: calc( (100% - 940px) / 2 ); position: absolute; text-align: right; width: 100%; } div.carousel.hero ul.carousel-pagination li { height: 30px; line-height: 30px; text-align: center; } div.carousel.hero ul.carousel-pagination li a, div.carousel.hero ul.carousel-pagination li a:hover { background: none; border: none; padding: 0; } div.carousel.hero ul.carousel-pagination li span, div.carousel.hero ul.carousel-pagination li a:hover span { background: url('/images/global/sprite-carousel-pagination.png') 0 0 no-repeat; border: none; color: #3aa4ff; cursor: pointer; display: block; height: 100%; text-indent: 0; width: 100%; } /* Dark Theme - default */ div.carousel.hero ul.carousel-pagination li.is-active span { background-position: -30px -30px; color: #fff; } div.carousel.hero ul.carousel-pagination li.step1 span { background-position: -60px -30px; } div.carousel.hero ul.carousel-pagination li.step2 span { background-position: -90px -30px; } div.carousel.hero ul.carousel-pagination li.step3 span { background-position: -120px -30px; } div.carousel.hero ul.carousel-pagination li.step4 span { background-position: -150px -30px; } /* Light Theme */ div.carousel.hero.light ul.carousel-pagination li.is-active span { background-position: -30px -60px; color: #000; } div.carousel.hero.light ul.carousel-pagination li.step1 span { background-position: -60px -60px; } div.carousel.hero.light ul.carousel-pagination li.step2 span { background-position: -90px -60px; } div.carousel.hero.light ul.carousel-pagination li.step3 span { background-position: -120px -60px; } div.carousel.hero.light ul.carousel-pagination li.step4 span { background-position: -150px -60px; } /* Hover State */ div.carousel.hero ul.carousel-pagination li a:hover span, div.carousel.hero ul.carousel-pagination li.is-active a:hover span { background-position: -30px 0; } div.carousel.hero ul.carousel-pagination li.step1 a:hover span { background-position: -60px 0; } div.carousel.hero ul.carousel-pagination li.step2 a:hover span { background-position: -90px 0; } div.carousel.hero ul.carousel-pagination li.step3 a:hover span { background-position: -120px 0; } div.carousel.hero ul.carousel-pagination li.step4 a:hover span { background-position: -150px 0; } div.carousel.hero ul.carousel-pagination li:first-child:before, div.carousel.hero ul.carousel-pagination li:last-child:after { bottom: -5px; content: ''; cursor: default; display: block; height: 20px; position: absolute; width: 10000em; z-index: -1; } div.carousel.hero.hero ul.carousel-pagination li:first-child:before { background: url('/images/global/sprite-carousel-pagination-bar.png') right 0 no-repeat; right: 20px; } div.carousel.hero ul.carousel-pagination li:last-child:after { background: url('/images/global/sprite-carousel-pagination-bar.png') 0 -20px no-repeat; left: 20px; } div.carousel.hero div.video-container { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; overflow: hidden; } div.carousel.hero div.video-container video { position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; min-height: 50%; max-height: 50%; min-width: 50%; } div.carousel.hero .mob-image-container { display: none; } /* Miitomo Specific */ div.carousel.hero .play-store-badge, div.carousel.hero .miitomo-promo.h3, div.carousel.hero .app-store-badge { margin-right: 10px; cursor: pointer; } div.carousel.hero .miitomo-promo { vertical-align: middle; } div.carousel.hero .miitomo-promo .cta-inner-container { display: none; } div.carousel.hero .miitomo-promo .cta-inner-container .miitomo-btn { vertical-align: middle; padding: 3px 20px !important; } /* ================================================ TABLET VIEW ================================================ */ @media screen and (min-width: 571px) and (max-width: 768px) { /* ----------------------------------- Default Styles (.multiple) ----------------------------------- */ div.carousel div.nav div.arrow { display: none; } div.carousel ul.carousel-pagination { margin: 0; } div.carousel ul.carousel-pagination li { width: 20px; } div.carousel ul.carousel-pagination li a { padding: 18px 0; } /* ----------------------------------- Hero Carousel ----------------------------------- */ div.carousel.hero ul.carousel-pagination { padding-right: 10px; } div.carousel.hero ul.carousel-pagination li { width: 30px; } /* ----------------------------------- Thumbnail Carousel ----------------------------------- */ div.carousel.sibling-thumbs div.nav div.arrow { /* display: block; */ } /* ----------------------------------- Filter Items ----------------------------------- */ .filtered-row .filter-selector { text-align: left; padding-bottom: 1em; float: none; } .filtered-row div.frame { top: 0; } section.filtered-row h2.section-title { float: none; } } /* ================================================ MOBILE VIEW ================================================ */ @media screen and (max-width: 768px) { /* ----------------------------------- Default Styles (.multiple) ----------------------------------- */ .wrapper.gutter div.carousel { width: 102%; /* extend carousel to right edge on wrappers with padding (WiiU/3DS pages) */ } div.carousel div.nav, div.carousel ul.carousel-pagination { display: none; opacity: 0; } div.carousel ul.carousel-pagination { margin: 0; } div.carousel ul.carousel-pagination li a { padding: 18px 0; } div.carousel ul.panels li.WiiU:after { font-size: 10px; } div.carousel ul.panels li.threeDS:after { font-size: 16px; } /* ----------------------------------- Hero Carousel ----------------------------------- */ div.carousel.hero ul.panels, div.carousel.hero ul.panels li { padding-bottom: 30px; } div.carousel.hero div.info-bar { background: -moz-linear-gradient(top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,1) 40%); background: -webkit-linear-gradient(top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,1) 40%); background: -o-linear-gradient(top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,1) 40%); background: -ms-linear-gradient(top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,1) 40%); background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,1) 40%); bottom: -30px; height: 90px; } div.carousel.hero div.info-bar div.inner-content { margin: 20px auto 0; } div.carousel.hero div.info-bar h3 { font-size: 18px; } div.carousel.hero ul.carousel-pagination { display: block; opacity: 1; padding-right: 0; text-align: center; } div.carousel.hero div.nav { display: none; } div.carousel.hero .video-container { display: none; } div.carousel.hero .mob-image-container { position: absolute; top: 0; display: block; } /* ----------------------------------- Accordion Drawer Carousel ----------------------------------- */ div.carousel.drawer { background: #fafafa; background: -moz-linear-gradient(bottom, #f8f8f8 0%, #fafafa 75%, #fff 100%); background: -webkit-linear-gradient(bottom, #f8f8f8 0%, #fafafa 75%, #fff 100%); background: -o-linear-gradient(bottom, #f8f8f8 0%, #fafafa 75%, #fff 100%); background: -ms-linear-gradient(bottom, #f8f8f8 0%, #fafafa 75%, #fff 100%); background: linear-gradient(to top, #f8f8f8 0%, #fafafa 75%, #fff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f8f8f8',GradientType=0 ); margin-bottom: 0; padding-bottom: 60px; } div.carousel.drawer div.nav { background: #fff; border-top: 1px solid #f2f2f2; bottom: 0; height: 30px; opacity: 1; top: auto; display:block; } div.carousel.drawer div.nav div.next, div.carousel.drawer div.nav div.prev { display: none; } div.carousel.drawer div.nav div.more { bottom: 30px; display: block !important; overflow: visible; top: auto; width: 100%; } div.carousel.drawer div.nav div.more a { left: 40%; left: -webkit-calc(50% - 30px); left: calc(50% - 30px); top: 0; } /* add full background path for iOS 6 bug fix */ div.carousel.drawer div.nav div.open a { background: url('/images/global/sprite-carousel-arrows.png') 0 -240px no-repeat; } div.carousel.drawer div.nav div.closed a { background: url('/images/global/sprite-carousel-arrows.png') -60px -240px no-repeat; } /* ----------------------------------- Filter Items ----------------------------------- */ .filtered-row .filter-selector { text-align: left; padding-bottom: 1em; float: none; } section.filtered-row h2.section-title { float: none; } .filtered-row div.frame { top: 0; } } /* ================================================ 3DS Browser Specific Styles ================================================ */ body.nin3DS div.carousel.multiple ul.carousel-pagination { opacity: 1; } body.nin3DS div.carousel ul.panels li:after { display: none; } .carousel.hero ul.panels { padding-bottom: 0 !important; } .carousel.hero ul.panels li { padding-bottom: 0 !important; } .carousel.hero ul.panels li .info-bar { bottom: 0; height: auto; padding: 0 1% 25px; } @media screen and (max-width: 570px) { .carousel.hero ul.panels li .info-bar { padding-bottom: 30px !important; } .carousel.hero ul.panels li .info-bar.no-pag { padding-bottom: 0 !important; } } .carousel.hero ul.panels li .info-bar.no-pag { padding: 0 1%; } div.carousel.hero div.info-bar div.inner-content { margin: 0 auto; padding: 10px 0 20px; font-size: 0; } div.carousel.hero div.info-bar.no-pag div.inner-content { padding: 10px 0; } div.carousel.hero div.info-bar div.inner-content div.column { display: inline-block; vertical-align: middle; float: none; } div.carousel.hero div.info-bar .cta-inner-container { float: none; width: auto; text-align: right; } div.carousel.hero div.info-bar .cta-inner-container .btn { width: auto; padding: 10px 20px; } #retailers-modal-overlay { display: none; z-index: 4 } #retailers-modal { color: #000; width: 100%; height: 560px; left: 50%; margin-left: -440px; top: 200px; opacity: 1; display: none; z-index: 5; max-width: 880px; padding-top: 3em; } @media screen and (max-width: 880px) { #retailers-modal { left: 0; width: 100%; margin-left: 0; } } @media screen and (max-width: 768px) { #retailers-modal { height: calc(100vh - 96px); top: 96px!important; position: fixed; } } #retailers-modal .preview-content { width: 100%; height: 100%; padding: 0 2%; } #retailers-modal div.preview-content { border-color: #2576BC; } #retailers-modal div.preview-content[data-system*="DS"] { border-color: #CE181E; border-bottom: 5px solid #ce181e; border-radius: 3px; } #retailers-modal div.preview-content[data-system*="Wii"] { border-color: #0096c8; border-bottom: 5px solid #0096c8; border-radius: 3px; } #retailers-modal div.preview-content[data-system*="amiibo"] { border-color: #000; } #retailers-modal div.preview-content[data-system*="DS"]:before { background-color: #ce181e; content: '\e619'; font-size: 30px; } #retailers-modal div.preview-content[data-system*="Wii"]:before { background-color: #0096c8; content: '\e61a'; font-size: 16px; } #retailers-modal div.preview-content[data-system*="amiibo"]:before { content: 'amiibo'; font-size: 16px; } #retailers-modal-iframe { width: 100%; height: 100%; } div.preview-overlay-pv.dark { background: rgba(0,0,0,.5); z-index: 30; } div.preview-container { z-index: 40; } div.preview-container div.preview-content { border: none; border-top: none; border-bottom: none; } div.preview-container div.preview-content.quickview { background-color: #f5f5f7; border-bottom: none; border-top: none; padding: 0; } div.preview-container div.preview-content.quickview .embed-video img { width: 100%; } div.preview-container div.preview-content.quickview h3 { color: #2576bc; font-size: 30px; line-height: 31px; } div.preview-container div.preview-content.quickview .preview-inset { padding: 10px 20px 20px 20px; } div.preview-container div.preview-content .lower-buttons { background-color: #fff; height: 50px; position: relative; } div.preview-container div.preview-content .lower-buttons ul { margin: 0 0 0 30px; position: absolute; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); width: 100%; } div.preview-container div.preview-content .preview-buttons { text-align: right; padding-right: 20px; } div.preview-container div.preview-content .preview-buttons li:after { content: ""; clear: both; display: block; } div.preview-container div.preview-content .preview-buttons .price { color: #727274; font-size: 25px; font-family: 'LatoBold'; text-align: right; } div.preview-container div.preview-content .preview-buttons .price.black { color: #333; } div.preview-container div.preview-content .preview-buttons .preview-btn { border-radius: 2px; display: block; float: right; font-size: 18px; padding: 10px 0; transition: all 150ms ease-in-out; width: 80%; } div.preview-container div.preview-content .preview-buttons .btn-orange-filled { color: #fff; font-family: 'LatoBold'; } div.preview-container div.preview-content .preview-buttons .btn-orange-filled:hover { text-decoration: none; } div.preview-container div.preview-content .preview-buttons .btn-learn-more { border: 1px solid #2576bc; } div.preview-container div.preview-content .preview-buttons .btn-learn-more:hover { text-decoration: none; } div.preview-container div.preview-content .preview-buttons .sale-price { color: #f47b2b; } div.preview-container div.preview-content .preview-buttons .strike { font-size: 22px; font-family: 'LatoLight'; margin-left: 10px; } div.preview-container div.preview-content .number-ratings ul, div.preview-container div.preview-content.quickview .star-ratings, div.preview-container div.preview-content .number-ratings span { float: left; } div.preview-container div.preview-content .number-ratings span { margin-top: 3px; } div.preview-container div.preview-content .number-ratings:after { content: ""; clear: both; display: block; margin-bottom: 20px; } div.preview-container div.preview-content.quickview .star-ratings { background: url('/images/page/games/detail/spr-five-star-rating-sm.png') top left no-repeat; height: 21px; margin: 0 auto; width: 110px; } div.preview-container div.preview-content.quickview .star-ratings .inner-ratings { background: url('/images/page/games/detail/spr-five-star-rating-sm.png') bottom left no-repeat; height: 100%; width: 0%; } div.preview-container div.preview-content a:hover { text-decoration: none; } div.preview-container div.preview-content a.text-btn-arrow { display: block; margin-top: 15px; } div.preview-container div.preview-content a.text-btn-arrow:after { margin-left: -2px; } div.preview-container div.preview-content .text-btn-arrow:after { font-size: 80%; } div.preview-container div.preview-content .preview-info { line-height: 17px; } div.preview-container .btn-orange-filled.disabled-owned, div.preview-container .btn-orange-filled.disabled-owned:hover, div.preview-container .btn-orange-filled.disabled-not-found, div.preview-container .btn-orange-filled.disabled-not-found:hover { color: #888888; background-color: #DADADA; pointer-events: none; cursor: default; } /** QUICKVIEW ICON */ .icon-quickview { background: url('/images/global/sprite-icon-quickview.png') top left no-repeat; height: 40px; bottom: 5px; right: 2px; position: absolute; width: 40px; visibility: hidden; } .icon-quickview:hover { background-position: 0px -40px; } .boxart-container .icon-quickview { bottom: 8px; position: absolute; right: 2px; } /* ================================================ TABLET VIEW ================================================ */ @media screen and (min-width: 571px) and (max-width: 768px) { .boxart-container .icon-quickview { opacity: 1 !important; visibility: visible !important; } /* games listing style only */ .games .boxart-container .icon-quickview { right: 15px; } } @media screen and (min-width: 571px) { /* Per NIN - if on a mobile device (and above mobile size), display the icon no matter what */ .boxart-container .icon-quickview.is-mobile { opacity: 1 !important; visibility: visible !important; } } /* ================================================ MOBILE VIEW ================================================ */ @media screen and (max-width: 570px) { .boxart-container .icon-quickview { display: none; opacity: 0; visibility: hidden; } } /* // Breakpoint Responder // ----------------------------------------------------- // An element that changes z-index when a breakpoint is crossed // Used in conjunction with BreakpointChange.js */ #breakpoint-responder { height: 1px; left: -1px; position: absolute; top: -1px; width: 1px; } /* DESKTOP */ @media screen and (min-width: 769px) { #breakpoint-responder { z-index: 3; } } /* TABLET */ @media screen and (min-width: 571px) and (max-width: 768px) { #breakpoint-responder { z-index: 2; } } /* MOBILE VIEW */ @media screen and (max-width: 570px) { #breakpoint-responder { z-index: 1; } } section#consumerChat{ position:fixed; top:80px; right:0; z-index:99; margin-right:-356px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; /* adds animation for all transitions */ -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; -webkit-text-size-adjust: none; } section#consumerChat #myChatLink{display:none !important;} section#consumerChat.rn_ChatAvailable iframe { display: block; } section#consumerChat iframe { display: none; } section#consumerChat.is-open{ margin-right:0px; } section#consumerChat #disabledFrame{ display: block; position: relative; margin:0 20px; padding-top: 3em; width: 315px; padding-bottom: 150px; } section#consumerChat.rn_ChatAvailable #disabledFrame { display: none; } #disabledFrame span.h2 { font-family: 'LatoLight'; font-size: 30px; color: #000000; line-height: 24px; } #disabledFrame .header-col { border-bottom: 1px solid #DADADA; margin-bottom: 1.5em; padding-bottom: 0.5em; } #disabledFrame p.b2 { font-family: 'LatoLight'; font-size: 16px; color: #000000; line-height: 20px; } #disabledFrame span.b3 { font-family: 'LatoBold'; font-size: 16px; color: #000000; line-height: 20px; } #disabledFrame .paratrooper-row { position: absolute; width: 100%; bottom: 1em; } section#consumerChat nav{ float:left; } section#consumerChat .main-content{ float:right; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50); background: #F6F6F6; overflow: hidden; } section#consumerChat.is-disabled .main-content { background-image: url("/images/global/chat-tile.png"); background-repeat: repeat-x; background-position: 0 85%; } section#consumerChat .main-content iframe { margin:0; width: 356px; height: 632px; } section#consumerChat nav{ background: #E7E7E7; background-image: url("/images/global/oracle_chat.png"); /* fallback */ background-image: url("/images/global/oracle_chat.png"), linear-gradient(-90deg, #F6F6F6 0%, #E7E7E7 42%); /* W3C */ cursor:pointer; background-repeat: no-repeat; width:44px; height:173px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; top: 150px; left: 0px; position: relative; box-shadow: -2px 1px 2px 0px rgba(0,0,0,0.50) } section#consumerChat.is-open nav { background: #E7E7E7; background-image: url("/images/global/oracle_close.png"); /* fallback */ background-image: url("/images/global/oracle_close.png"), linear-gradient(-90deg, #F6F6F6 0%, #E7E7E7 42%); /* W3C */ } section#consumerChat.is-unsupported { display: none!important; } p { line-height: 1.4em; } .legal p { font-size: 0.7em; } h1, h2, h3 { font-family: "LatoRegular"; } h1 { line-height: 1.15em; } .btn { color: #FFF !important; display: inline-block; margin: 0 0 1em 0; padding: 10px 40px; width: auto; } .btn.button-more:after { background: url(/images/page/games/sales-and-deals/down-arrow.png) right top no-repeat; content: ""; display: inline-block; height: 9px; margin-left: 10px; -webkit-transition: 0.5s -webkit-transform; transition: 0.5s transform; width: 19px; } .btn.button-more.button-less:after { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .row .column, .row > li { padding: 0 10px; } .row .column:first-child, .row > li:first-child { padding-left: 0; } .row .column:last-child, .row > li:last-child { padding-right: 0; } .sales-wrapper { background: center top repeat; font-size: 1.2em; padding: 50px 0; } .sales-wrapper img { max-width: 100%; } .sales-wrapper > .wrapper { max-width: 100%; width: 100%; } .sales-wrapper section { overflow: auto; padding: 30px; position: relative; z-index: 2; } .sales-wrapper section.matte { background: RGBA(255, 255, 255, 0.6); border-radius: 5px; } .sales-wrapper section p a { text-decoration: underline; } .sales-wrapper.light section.matte { background: RGBA(0, 0, 0, 0.2); } .sales-wrapper.light section * { color: #FFF; } .sales-wrapper.dark section p { color: #000; } .offer-wrapper.light .info p { color: #fff; } .offer-wrapper.dark .info p { color: #000; } #section-header { background: #FFF; position: relative; } .sales-wrapper { position: relative; z-index: 2; } .hero-wrapper { background: #ff8000; background: -moz-linear-gradient(top, #ff8000 0%, #f7a800 100%); background: -webkit-linear-gradient(top, #ff8000 0%, #f7a800 100%); background: linear-gradient(to bottom, #ff8000 0%, #f7a800 100%); padding: 0px; z-index: 1; overflow: hidden; } .hero-wrapper section { background: url(/images/page/games/sales-and-deals/decoration-hero-glow.png) right top no-repeat; /* FLEX */ display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 310px; margin-bottom: 0px; margin-top: 0px; overflow: visible; padding: 0px 30px; } .hero-wrapper section > .column { -webkit-flex: 1 1 auto; } .hero-wrapper section * { color: #FFF; } .browser-WiiU .hero-wrapper .title { height: 100%; position: relative; } .browser-WiiU .hero-wrapper .title > div { position: absolute; top: 50%; -webkit-transform: translateY(-50%); } .hero-wrapper .title { position: relative; z-index: 2; } .hero-wrapper .hero-artwork { height: 100%; position: relative; z-index: 1; } .hero-wrapper img.hero { bottom: 0px; left: 50%; max-width: 715px; position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 160%; } .price-drops-wrapper { background: #f7f7f7 url(/images/page/games/sales-and-deals/decoration-sales-bg.gif) center top repeat-x; margin-bottom: 5px; } .price-drops-wrapper div.games-list {} .price-drops-wrapper h2 { margin-bottom: 1em; } .price-drops-wrapper ul.games-list h4.price { color: #f77b18; font-weight: bold; font-size: 19px; } .price-drops-wrapper ul.games-list h4.price span.regular { color: #000; font-size: 14px; font-weight: bold; text-decoration: line-through; } div.games-list { text-align: center; } div.games-list h3 { margin-bottom: 1em; text-align: left; } div.games-list .btn { margin: 1em auto; } ul.games-list { /* FLEX */ display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; list-style-type: none; margin: 0; padding: 0; text-align: left; } ul.games-list li { -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; display: inline-block; min-height: 390px; padding-right: 15px; width: 50%; } body.new3DS ul.games-list li { vertical-align: top; width: 49%; } ul.games-list li a { color: #2576bc; } ul.games-list li a:hover { color: #3aa4ff; text-decoration: none; } ul.games-list li a:hover p[data-system*="Wii"] { color: #0096c8; } ul.games-list li a:hover p[data-system*="DS"] { color: #ce181e; } ul.games-list li .boxart-container[data-snipe]:before { background: #f77b18; color: #FFF; content: attr(data-snipe); display: inline-block; font-weight: bold; margin-left: 0.5em; padding: 1px 16px; position: absolute; font-size: .66em; border-radius: 8px 8px 0 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } ul.games-list .boxart { min-height: 202px; margin-bottom: 10px; position: relative; } ul.games-list .boxart .boxart-container { display: inline-block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } ul.games-list .boxart img { max-width: 141px; height: auto; width: 100%; } ul.games-list .info h3 { color: inherit; font-family: 'LatoBold'; font-size: 16px; line-height: 1.3; } ul.games-list .info h5 { color: #999; font-family: 'LatoRegular'; font-size: 14px; line-height: 1.2; margin-bottom: 13px; } ul.games-list .info h4 { font-family: 'LatoBold'; font-size: 20px; line-height: 1; } ul.games-list .info p { color: #9f9fa1; display: inline-block; margin-top: 5px; padding-bottom: 2px; } .hr { background: #FFF; clear: both; float: none; height: 1px; margin: 1em 0; overflow: hidden; } .feature-title { font-size: 44px; } .feature-header { font-weight: bold; } /* ================================================ SMALL ONLY VIEW ================================================ */ @media screen and (max-width: 571px) { h2 { font-size: 36px; } p { font-size: 18px; } .sales-wrapper {} .sales-wrapper .image, .sales-wrapper .content { padding: 0px; } .sales-wrapper .image { margin-bottom: 1em; text-align: center; } .hero-wrapper section { height: 60vw; } .hero-wrapper .title { z-index: 2; } .hero-wrapper img.hero { width: 280%; } .sales-wrapper section.matte { padding: 30px 20px; } .sales-wrapper section.matte .btn { font-size: 0.7em; padding: 10px; white-space: nowrap; } ul.games-list li .boxart-container[data-snipe]::before { display: none; } .price-drops-wrapper ul.games-list li { margin: 0; } .price-drops-wrapper ul.games-list .boxart .boxart-container { margin-top: 0; } } /* ================================================ TABLET VIEW ================================================ */ @media screen and (min-width: 571px) and (max-width: 768px) { .hero-wrapper .title { z-index: 2; } .hero-wrapper img.hero { width: 220%; } ul.games-list li { padding-right: 25px; width: 33.3333333%; } } /* ================================================ DESKTOP VIEW ================================================ */ @media screen and (min-width: 769px) { .sales-wrapper > .wrapper > section.hero { z-index: 1; margin: 0px auto -150px auto; } ul.games-list li { padding-right: 40px; width: 20%; } .browser-WiiU ul.games-list li { width: 19%; } } /* ================================================ LARGE DESKTOP VIEW ================================================ */ @media screen and (min-width: 1160px) { .sales-wrapper > .wrapper { max-width: 1160px; width: 1160px; } ul.games-list li { width: 16.666666667%; } } /* ----------------------------------- /page/games/games.css OVERRIDES ----------------------------------- */ body.games-landing nav.search-shortcuts { margin-top: 22px; } /* nav.search-shortcuts h2 a, nav.search-shortcuts h2 a:hover { color: #000; text-decoration: none; }*/ nav.search-shortcuts ul li a:hover { text-decoration: none; } /* ----------------------------------- Subnav Search Shortcuts - Global Store Navigation ----------------------------------- */ nav.search-shortcuts:after { clear: both; content: ""; display: block; } nav.search-shortcuts h2 { font-family: 'LatoBold'; float: left; font-size: 30px; font-weight: 800; margin-bottom: 20px; margin-left: 5px; color: #000; } nav.search-shortcuts h2 a { color: inherit; } nav.search-shortcuts h2 a:hover { text-decoration: none; border-bottom: none; } nav.search-shortcuts ul { float: right; padding-top: 7px; } nav.search-shortcuts li { font-family: 'LatoBold'; font-size: 16px; } nav.search-shortcuts li:last-child a:hover { position: relative; text-decoration: none; } nav.search-shortcuts li { border-left: 1px solid #333; display: inline-block; } nav.search-shortcuts li:first-child { padding: 0; margin: 0; border: none; } nav.search-shortcuts li a { color: #000; display: block; float: left; padding: 5px 15px; transition: all 150ms ease-out; } nav.search-shortcuts li a:hover, nav.search-shortcuts li a.active { color: #2978bb; } /** * small breakpoints for nav scaling */ @media screen and (min-width: 801px) and (max-width: 860px) { nav.search-shortcuts li a { padding-left: 10px; padding-right: 10px; } } @media screen and (min-width: 769px) and (max-width: 800px) { nav.search-shortcuts li a { padding-left: 7px; padding-right: 7px; } } @media screen and (min-width: 769px) { nav.search-shortcuts li a:hover { outline: none !important; } nav.search-shortcuts a.nav-toggle { display: none; } } /* ================================================ TABLET VIEW ================================================ */ @media screen and (max-width: 768px) { body.games-landing nav.search-shortcuts { margin-bottom: 10px; } nav.search-shortcuts h2 { margin-left: 0; } nav.search-shortcuts li:not(:last-child) a:hover { outline: none; position: relative; } nav.search-shortcuts li a { width: 100%; } } @media screen and (max-width: 570px) { nav.search-shortcuts h2 { font-size: 25px; padding-top: 4px; } } @media screen and (max-width: 450px) { nav.search-shortcuts h2 { font-size: 15px; font-size: 5vw; padding-top: 8px; } } @media screen and (max-width: 768px) { /* ----------------------------------- Section Header ----------------------------------- */ header#section-header { position: relative; width: 100%; } header#section-header div.pin { height: 60px; padding: 0 0 10px 0; position: relative; top: 10px; width: 100%; z-index: 3; -webkit-backface-visibility: hidden; } header#section-header div.pin:after { clear: both; content: ''; display: block; } body.pin-nav header#section-header div.pin { background: rgba(0, 0, 0, 0.8); position: fixed; } body.pin-shadow header#section-header div.pin { box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); } header#section-header div.wrapper { position: relative; } /* ----------------------------------- Secondary Nav ----------------------------------- */ nav.search-shortcuts { font-size: 16px; position: absolute; top: 0; width: 100%; } nav.search-shortcuts ul { background: #ce181e; border-radius: 2px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); overflow: auto; padding: 0; position: absolute; top: 41px; width: 100%; z-index: 1; } nav.search-shortcuts ul li { display: none; height: 40px; line-height: 40px; text-align: center; width: 100%; } nav.search-shortcuts.open ul li { display: block; } nav.search-shortcuts ul li a { display: block; height: 100%; padding: 0 10px; } nav.search-shortcuts ul li:first-child a { border-top-left-radius: 2px; border-top-right-radius: 2px; } nav.search-shortcuts ul li:last-child a { border: none; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } /* Active Item */ nav.search-shortcuts a.nav-toggle { display: none; } /* Active Item */ nav.search-shortcuts a.nav-toggle { background: #000; border-radius: 2px; color: #fff; display: block; height: 40px; line-height: 40px; padding: 0 6px; position: absolute; right: 0; text-align: left; top: 0; width: 65%; z-index: 1; } /* Toggle Arrow */ nav.search-shortcuts a.nav-toggle:after { border-radius: 2px; color: #fff; content: '\e608'; display: block; font-family: 'icons'; font-size: 20px; height: 40px; line-height: 40px; position: absolute; right: 0; text-align: center; top: 0; width: 32px; z-index: 1; } nav.search-shortcuts.open a.nav-toggle:after { content: '\e60b'; } nav.search-shortcuts div.overlay { display: none; height: 100%; left: 0; position: fixed; top: 0; width: 100%; } nav.search-shortcuts { display: block; float: right; font-family: 'LatoBold'; position: relative; } nav.search-shortcuts a { color: #fff; text-decoration: none; } nav.search-shortcuts ul { text-align: center; background: #000; } nav.search-shortcuts ul li a { border-bottom: 1px solid #666; color: #fff; } nav.search-shortcuts ul li:last-child a { border: none; } /* Hover, Focus, Active States */ nav.search-shortcuts ul li a:focus, nav.search-shortcuts ul li a:hover { background: rgba(255, 255, 255, 0.2); } nav.search-shortcuts ul li.active a { background: #00beff; } /* ================================================ 3DS Browser Specific Styles ================================================ */ body.nin3DS nav.search-shortcuts a.nav-toggle:after { background: url('/images/global/no-icon-font-arrows.png') -25px 0 no-repeat; content: ''; height: 20px; line-height: 20px; overflow: hidden; right: 5px; top: 11px; width: 25px; } body.nin3DS nav.search-shortcuts.open a.nav-toggle:after { background-position: -25px -20px; } } /* ----------------------------------- Section Header ----------------------------------- */ header#section-header { position: relative; width: 100%; } header#section-header div.pin { height: 60px; padding: 10px 0; position: relative; width: 100%; z-index: 20; -webkit-backface-visibility: hidden; } header#section-header div.pin:after { clear: both; content: ''; display: block; } body.pin-nav header#section-header div.pin { position: fixed; } body.pin-shadow header#section-header div.pin { box-shadow: 0 3px 5px rgba(0,0,0,0.1); } header#section-header div.wrapper { position: relative; } /* --- Logo --- */ header#section-header h1 { display: block; float: left; font-size: 0; } header#section-header h1 a { display: block; height: 100%; } header#section-header h1 a:hover { border: none; } header#section-header h1 img { max-height: 100%; vertical-align: middle; } /* --- Secondary Nav --- */ nav.secondary-nav { display: block; float: right; font-family: 'LatoBold'; position: relative; } /* Active Item */ nav.secondary-nav a.nav-toggle { display: none; } nav.secondary-nav a { color: #fff; text-decoration: none; } nav.secondary-nav ul { text-align: center; } /* Nav position based on chrome movement */ body.pin-nav.not-at-top header#section-header div.pin { -webkit-transition: top 0.8s cubic-bezier(0.6, 0, 0.4, 1); -moz-transition: top 0.8s cubic-bezier(0.6, 0, 0.4, 1); -ms-transition: top 0.8s cubic-bezier(0.6, 0, 0.4, 1); -o-transition: top 0.8s cubic-bezier(0.6, 0, 0.4, 1); transition: top 0.8s cubic-bezier(0.6, 0, 0.4, 1); } body.pin-nav:not(.scrolling-up) header#section-header div.pin { top: 0px !important; } /* ----------------------------------- 3DS Specific ----------------------------------- */ body#threeDS-page.pin-nav header#section-header div.pin { background: rgba(255,255,255,0.9); } /* --- Logo --- */ body#threeDS-page header#section-header h1 { height: 40px; } body#threeDS-page header#section-header h1 a:after { content: ''; display: inline-block; height: 100%; position: relative; vertical-align: middle; } /* --- Secondary Nav --- */ /* Hover, Focus, Active States */ body#threeDS-page nav.secondary-nav ul li a:focus, body#threeDS-page nav.secondary-nav ul li a:hover { background: rgba(255,0,8,0.5); } body#threeDS-page nav.secondary-nav ul li.active a { background: #ff0008; } /* ----------------------------------- Wii U Specific ----------------------------------- */ body#wiiu-page.pin-nav header#section-header div.pin { background: rgba(0,0,0,0.8); } /* --- Secondary Nav --- */ /* Hover, Focus, Active States */ body#wiiu-page nav.secondary-nav ul li a:focus, body#wiiu-page nav.secondary-nav ul li a:hover { background: rgba(0,190,255,0.5); } body#wiiu-page nav.secondary-nav ul li.active a { background: #00beff; } /* ----------------------------------- Game Store Specific ----------------------------------- */ body#games-page.pin-nav header#section-header div.pin, body#games-page:not(.pin-nav) header#section-header { background-image: url('/images/page/games/secondary-nav-bg.png'); background-position: center top; background-repeat: repeat-x; } /* --- Secondary Nav --- */ /* Hover, Focus, Active States */ body#games-page nav.secondary-nav ul li a:focus, body#games-page nav.secondary-nav ul li a:hover { background: rgba(247,164,0,0.5); } body#games-page nav.secondary-nav ul li.active a { background: #F7A400; } /* ----------------------------------- Buy Digital Specific ----------------------------------- */ body#buy-digital-page.pin-nav header#section-header div.pin, body#buy-digital-page:not(.pin-nav) header#section-header { background-image: url('/images/page/games/secondary-nav-bg.png'); background-position: center top; background-repeat: repeat-x; } /* --- Secondary Nav --- */ /* Hover, Focus, Active States */ body#buy-digital-page nav.secondary-nav ul li a:focus, body#buy-digital-page nav.secondary-nav ul li a:hover { background: rgba(247,164,0,0.5); } body#buy-digital-page nav.secondary-nav ul li.active a { background: #F7A400; } /* ----------------------------------- eShop Specific ----------------------------------- */ body#eshop-page.pin-nav header#section-header div.pin { background: rgba(255,255,255,0.9); } body#eshop-page header#section-header h1 { height: 40px; } body#eshop-page header#section-header h1 a:after { content: ''; display: inline-block; height: 100%; position: relative; vertical-align: middle; } /* --- Secondary Nav --- */ /* Hover, Focus, Active States */ body#eshop-page nav.secondary-nav ul li a:focus, body#eshop-page nav.secondary-nav ul li a:hover { background: rgba(248,202,29,0.5); } body#eshop-page nav.secondary-nav ul li.active a { background: #e46511; } /* ----------------------------------- amiibo Specific ----------------------------------- */ body#amiibo-page.pin-nav header#section-header div.pin { background: rgba(255,255,255,0.9); height: 70px; } body#amiibo-page header#section-header h1 { height: 40px; } body#amiibo-page header#section-header h1 a:after { content: ''; display: inline-block; /* height: 100%;*/ position: relative; vertical-align: middle; } body#amiibo-page nav.secondary-nav ul li { background: transparent; /* -webkit-box-shadow: 1px 1px 6px 0px rgba(0,0,0,0.1); -moz-box-shadow: 1px 1px 6px 0px rgba(0,0,0,0.1); box-shadow: 1px 1px 6px 0px rgba(0,0,0,0.1); */ } /* --- Secondary Nav --- */ /* Hover, Focus, Active States */ body#amiibo-page nav.secondary-nav ul li.whats a { background: #e6001e; /* Old browsers */ background: -moz-linear-gradient(top, #e6001e 0%, #ee4c61 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6001e), color-stop(100%,#ee4c61)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e6001e 0%,#ee4c61 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e6001e 0%,#ee4c61 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e6001e 0%,#ee4c61 100%); /* IE10+ */ background: linear-gradient(to bottom, #e6001e 0%,#ee4c61 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6001e', endColorstr='#ee4c61',GradientType=0 ); /* IE6-9 */ } body#amiibo-page nav.secondary-nav ul li.games a{ background: #a5c810; /* Old browsers */ background: -moz-linear-gradient(top, #a5c810 0%, #c0d957 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5c810), color-stop(100%,#c0d957)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #a5c810 0%,#c0d957 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #a5c810 0%,#c0d957 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #a5c810 0%,#c0d957 100%); /* IE10+ */ background: linear-gradient(to bottom, #a5c810 0%,#c0d957 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a5c810', endColorstr='#c0d957',GradientType=0 ); /* IE6-9 */ } body#amiibo-page nav.secondary-nav ul li.lineup a { background: #e6001e; /* Old browsers */ background: -moz-linear-gradient(top, #009beb 0%, #4cb9f1 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#009beb), color-stop(100%,#4cb9f1)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #009beb 0%,#4cb9f1 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #009beb 0%,#4cb9f1 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #009beb 0%,#4cb9f1 100%); /* IE10+ */ background: linear-gradient(to bottom, #009beb 0%,#4cb9f1 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009beb', endColorstr='#4cb9f1',GradientType=0 ); /* IE6-9 */ } body#amiibo-page nav.secondary-nav ul li.compatibility a { background: #e6001e; /* Old browsers */ background: -moz-linear-gradient(top, #009682 0%, #4cb5a7 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#009682), color-stop(100%,#4cb5a7)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #009682 0%,#4cb5a7 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #009682 0%,#4cb5a7 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #009682 0%,#4cb5a7 100%); /* IE10+ */ background: linear-gradient(to bottom, #009682 0%,#4cb5a7 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009682', endColorstr='#4cb5a7',GradientType=0 ); /* IE6-9 */ } body#amiibo-page nav.secondary-nav ul li.faq a { background: #e6001e; /* Old browsers */ background: -moz-linear-gradient(top, #f5aa00 0%, #f8c34c 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5aa00), color-stop(100%,#f8c34c)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f5aa00 0%,#f8c34c 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f5aa00 0%,#f8c34c 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f5aa00 0%,#f8c34c 100%); /* IE10+ */ background: linear-gradient(to bottom, #f5aa00 0%,#f8c34c 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5aa00', endColorstr='#f8c34c',GradientType=0 ); /* IE6-9 */ } body#amiibo-page nav.secondary-nav ul li.buynow a { background: #e6001e; /* Old browsers */ background: -moz-linear-gradient(top, #e62daa 0%, #ee6cc3 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e62daa), color-stop(100%,#ee6cc3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e62daa 0%,#ee6cc3 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e62daa 0%,#ee6cc3 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e62daa 0%,#ee6cc3 100%); /* IE10+ */ background: linear-gradient(to bottom, #e62daa 0%,#ee6cc3 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e62daa', endColorstr='#ee6cc3',GradientType=0 ); /* IE6-9 */ } body#amiibo-page nav.secondary-nav ul li a { -webkit-transition: all 150ms ease-in-out; -moz-transition: all 150ms ease-in-out; -ms-transition: all 150ms ease-in-out; -o-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } /* ================================================ DESKTOP VIEW ================================================ */ @media screen and (min-width: 769px) { /* ----------------------------------- Section Header ----------------------------------- */ header#section-header { min-height: 100px; overflow: hidden; } header#section-header div.pin { top: 20px; } /* --- Logo --- */ header#section-header h1 { max-width: 18%; } /* --- Secondary Nav --- */ nav.secondary-nav { font-size: 14px; } nav.secondary-nav ul { border-radius: 2px; height: 40px; padding: 0; text-align: center; } nav.secondary-nav ul li { display: inline-block; height: 100%; line-height: 40px; margin: 0 -2px 0 -1px; } nav.secondary-nav ul li a { display: block; height: 100%; padding: 0 20px; vertical-align: middle; } /* ----------------------------------- 3DS Specific ----------------------------------- */ /* --- Secondary Nav --- */ body#threeDS-page nav.secondary-nav ul { background: #ce181e; } /* ----------------------------------- Games Specific ----------------------------------- */ /* --- Secondary Nav --- */ body#games-page nav.secondary-nav ul, body#buy-digital-page nav.secondary-nav ul { background: #FF7D00; } /* Game Guide */ body.games-landing.pin-nav.not-at-top header#section-header div.pin { } /* ----------------------------------- eshop Specific ----------------------------------- */ /* --- Secondary Nav --- */ body#eshop-page nav.secondary-nav ul { background: #f47b2b; } /* --- Logo --- */ body#eshop-page header#section-header h1 { max-width: 20%; } /* ----------------------------------- amiibo Specific ----------------------------------- */ /* --- Secondary Nav --- */ body#amiibo-page nav.secondary-nav ul { background: transparent; } /* spacer */ .nav-spacer { visibility: hidden; width: 1px; cursor: default; } body#amiibo-page nav.secondary-nav ul li { background: transparent; margin: 0 2px; border-radius: 2px; } /* --- Logo --- */ body#amiibo-page header#section-header h1 { max-width: 20%; } body#amiibo-page:lang(fr-CA) header#section-header h1 { max-width: 15%; } /* --- Logo --- */ body#amiibo-page header#section-header h1 { height: 70px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; margin-top: -7px; } body#amiibo-page.pin-nav header#section-header h1 { height: 40px; margin-top: 0; } body#amiibo-page nav.secondary-nav ul li a { border-radius: 25px; } body#amiibo-page nav.secondary-nav ul li.active a, body#amiibo-page nav.secondary-nav ul li a:hover { font-family: 'latoBlack'; font-size: 18px; padding: 5px 20px; } /* ----------------------------------- Wii U Specific ----------------------------------- */ /* --- Logo --- */ body#wiiu-page header#section-header h1 { height: 70px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } body#wiiu-page.pin-nav header#section-header h1 { height: 40px; } /* --- Secondary Nav --- */ body#wiiu-page nav.secondary-nav ul { background: #0096c8; } } /* ----------------------------------- Game Shop Specific ----------------------------------- */ /* --- Logo --- */ body#games-page header#section-header h1 { top: 10px; position: relative; -webkit-transition: top 0.2s ease-in-out; -moz-transition: top 0.2s ease-in-out; -ms-transition: top 0.2s ease-in-out; -o-transition: top 0.2s ease-in-out; transition: top 0.2s ease-in-out; } body#games-page.pin-nav header#section-header h1 { top: 6px; } /* --- Logo --- */ body#buy-digital-page header#section-header h1 { top: 10px; position: relative; -webkit-transition: top 0.2s ease-in-out; -moz-transition: top 0.2s ease-in-out; -ms-transition: top 0.2s ease-in-out; -o-transition: top 0.2s ease-in-out; transition: top 0.2s ease-in-out; } body#buy-digital-page.pin-nav header#section-header h1 { top: 6px; } } /* ----------------------------------- Additional Breakpoints for Spacing ----------------------------------- */ @media screen and (max-width: 980px) { nav.secondary-nav ul li a { padding: 0 15px; } } @media screen and (max-width: 890px) { nav.secondary-nav ul li a { padding: 0 12px; } } @media screen and (max-width: 840px) { nav.secondary-nav ul li a { padding: 0 8px; } } /* ================================================ TABLET & MOBILE VIEWS ================================================ */ @media screen and (max-width: 768px) { /* ----------------------------------- Section Header ----------------------------------- */ header#section-header { height: 80px; } header#section-header div.pin { top: 10px; } /* --- Secondary Nav --- */ nav.secondary-nav { font-size: 16px; position: absolute; top: 0; width: 100%; } nav.secondary-nav ul { background: #ce181e; border-radius: 2px; box-shadow: 0 3px 5px rgba(0,0,0,0.1); overflow: auto; padding: 0; position: absolute; top: 41px; width: 100%; z-index: 1; } body#games-page nav.secondary-nav ul, body#buy-digital-page nav.secondary-nav ul { background: #FF7D00; } nav.secondary-nav ul li { display: none; height: 40px; line-height: 40px; text-align: center; width: 100%; } nav.secondary-nav.open ul li { display: block; } nav.secondary-nav ul li a { display: block; height: 100%; padding: 0 10px; } nav.secondary-nav ul li:first-child a { border-top-left-radius: 2px; border-top-right-radius: 2px; } nav.secondary-nav ul li:last-child a { border: none; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } /* Active Item */ nav.secondary-nav a.nav-toggle { background: #ce181e; border-radius: 2px; color: #fff; display: block; height: 40px; line-height: 40px; padding: 0 6px; position: absolute; right: 0; text-align: left; top: 0; width: 65%; z-index: 1; } body#games-page nav.secondary-nav a.nav-toggle, body#buy-digital-page nav.secondary-nav a.nav-toggle { background: #FF7D00; overflow: hidden; } /* Toggle Arrow */ nav.secondary-nav a.nav-toggle:after { border-radius: 2px; color: #fff; content: '\e608'; display: block; font-family: 'icons'; font-size: 20px; height: 40px; line-height: 40px; position: absolute; right: 0; text-align: center; top: 0; width: 32px; z-index: 1; } nav.secondary-nav.open a.nav-toggle:after { content: '\e60b'; } nav.secondary-nav div.overlay { display: none; height: 100%; left: 0; position: fixed; top: 0; width: 100%; } /* ----------------------------------- 3DS Specific ----------------------------------- */ /* --- Logo --- */ body#threeDS-page header#section-header h1 { max-width: 33%; } /* --- Secondary Nav --- */ body#threeDS-page nav.secondary-nav ul { background: #ce181e; } body#threeDS-page nav.secondary-nav ul li a { border-bottom: 1px solid #ff0008; } body#threeDS-page nav.secondary-nav ul li:last-child a { border: none; } /* Active Item */ body#threeDS-page nav.secondary-nav a.nav-toggle { background: #ce181e; } body#threeDS-page:lang(fr-CA) nav.secondary-nav, body#threeDS-page:lang(es-LA) nav.secondary-nav { font-size: 14px; } /* ----------------------------------- eshop Specific ----------------------------------- */ /* --- Secondary Nav --- */ body#eshop-page nav.secondary-nav ul { background: #f47b2b; } body#eshop-page nav.secondary-nav ul li a { border-bottom: none; } body#eshop-page nav.secondary-nav ul li:last-child a { border: none; } /* Active Item */ body#eshop-page nav.secondary-nav a.nav-toggle { background: #f47b2b; } /* ----------------------------------- amiibo Specific ----------------------------------- */ /* --- Secondary Nav --- */ body#amiibo-page nav.secondary-nav ul { background: rgba(0,0,0,0.5); } body#amiibo-page nav.secondary-nav ul li a { border-bottom: none; } body#amiibo-page nav.secondary-nav ul li:last-child a { border: none; } /* Active Item */ body#amiibo-page nav.secondary-nav a.nav-toggle { background: rgba(0,0,0,0.9); } .nav-spacer { display: none!important; cursor: default; } /* ----------------------------------- Wii U Specific ----------------------------------- */ /* --- Secondary Nav --- */ body#wiiu-page nav.secondary-nav ul { background: #0096c8; } body#wiiu-page nav.secondary-nav ul li a { border-bottom: 1px solid #00beff; } body#wiiu-page nav.secondary-nav ul li:last-child a { border: none; } /* Active Item */ body#wiiu-page nav.secondary-nav a.nav-toggle { background: #0096c8; } } /* ================================================ TABLET VIEW ================================================ */ @media screen and (min-width: 571px) and (max-width: 768px) { /* ----------------------------------- Wii U Specific ----------------------------------- */ /* --- Logo --- */ body#wiiu-page header#section-header h1 { height: 40px; width: 127px; } body#eshop-page header#section-header h1 { max-width: 33%; } body#eshop-page header#section-header h1 img { padding-top: 5px; } } /* ================================================ MOBILE VIEW ================================================ */ @media screen and (max-width: 570px) { /* ----------------------------------- Wii U Specific ----------------------------------- */ /* --- Logo --- */ body#wiiu-page header#section-header h1 { height: 40px; width: 90px; } body#eshop-page header#section-header h1, body#amiibo-page header#section-header h1 { max-width: 33%; } body#eshop-page header#section-header h1 img, body#amiibo-page header#section-header h1 img { padding-top: 5px; } } @media screen and (max-width: 480px) { body#games-page nav.secondary-nav, body#buy-digital-page nav.secondary-nav { top: 2px; right: 0; width: 80%; } } @media screen and (max-width: 378px) { body#games-page nav.secondary-nav a.nav-toggle { width: 160px; } } @media screen and (max-width: 350px) { body#games-page header#section-header h1 a, body#buy-digital-page header#section-header h1 a { width: 80%; } body#games-page nav.secondary-nav, body#buy-digital-page nav.secondary-nav { top: 0px; } } /* ================================================ 3DS Browser Specific Styles ================================================ */ body.nin3DS nav.secondary-nav a.nav-toggle:after { background: url('../../images/global/no-icon-font-arrows.png') -25px 0 no-repeat; content: ''; height: 20px; line-height: 20px; overflow: hidden; right: 5px; top: 11px; width: 25px; } body.nin3DS nav.secondary-nav.open a.nav-toggle:after { background-position: -25px -20px; }