/* Minification failed. Returning unminified contents. (3,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (30,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (33,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (34,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (35,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (36,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (37,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (38,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (39,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (40,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (41,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (46,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (79,35): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (112,34): run-time error CSS1039: Token not allowed after unary operator: '-transition' (113,26): run-time error CSS1039: Token not allowed after unary operator: '-transition' (151,19): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (152,34): run-time error CSS1039: Token not allowed after unary operator: '-transition' (153,26): run-time error CSS1039: Token not allowed after unary operator: '-transition' (171,25): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (172,30): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (179,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (185,21): run-time error CSS1039: Token not allowed after unary operator: '-container-width' (191,26): run-time error CSS1039: Token not allowed after unary operator: '-container-width' (195,21): run-time error CSS1039: Token not allowed after unary operator: '-container-width-full' (279,30): run-time error CSS1039: Token not allowed after unary operator: '-transition' (280,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (281,18): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (292,34): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-sm' (293,26): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-sm' (496,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (502,30): run-time error CSS1039: Token not allowed after unary operator: '-transition' (503,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (528,34): run-time error CSS1039: Token not allowed after unary operator: '-transition' (529,26): run-time error CSS1039: Token not allowed after unary operator: '-transition' (570,15): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (572,30): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (577,63): run-time error CSS1039: Token not allowed after unary operator: '-bg-color-primary' (577,88): run-time error CSS1039: Token not allowed after unary operator: '-bg-color-secondary' (604,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (605,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (629,25): run-time error CSS1039: Token not allowed after unary operator: '-b-width' (633,24): run-time error CSS1039: Token not allowed after unary operator: '-b-position' (634,36): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (650,48): run-time error CSS1067: Expected number, found 'auto-fill' (650,48): run-time error CSS1036: Expected expression, found 'auto-fill' (660,61): run-time error CSS1067: Expected number, found 'auto-fill' (660,61): run-time error CSS1036: Expected expression, found 'auto-fill' (666,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (668,35): run-time error CSS1039: Token not allowed after unary operator: '-delay' (669,27): run-time error CSS1039: Token not allowed after unary operator: '-delay' (673,30): run-time error CSS1039: Token not allowed after unary operator: '-transition' (674,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (813,18): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (819,22): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (822,15): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (826,37): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (827,38): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (856,39): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (875,22): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (913,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (935,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (942,30): run-time error CSS1039: Token not allowed after unary operator: '-transition' (943,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1080,19): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (1084,34): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1085,26): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1094,30): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1095,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1112,22): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (1290,38): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1291,30): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1302,27): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (1303,22): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (1312,19): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (1316,26): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (1337,22): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (1375,33): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-m' (1478,30): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1479,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1529,22): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (1537,30): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1538,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1570,30): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1571,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1599,17): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (1681,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (1695,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (1708,30): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (1719,30): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1720,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1733,34): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1734,26): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1738,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (1763,28): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (1767,30): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1768,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1774,28): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (1794,26): run-time error CSS1039: Token not allowed after unary operator: '-container-width' (1827,25): run-time error CSS1039: Token not allowed after unary operator: '-card-text-color' (1855,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (1871,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (1939,17): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (2000,17): run-time error CSS1039: Token not allowed after unary operator: '-card-text-color' (2010,17): run-time error CSS1039: Token not allowed after unary operator: '-card-text-color' (2015,21): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (2034,21): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (2113,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (2149,22): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-light' (2153,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-color-secondary' (2158,17): run-time error CSS1039: Token not allowed after unary operator: '-color-brand' (2159,28): run-time error CSS1039: Token not allowed after unary operator: '-color-brand' (2187,30): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-sm' (2188,22): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-sm' (2262,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2263,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2266,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (2268,22): run-time error CSS1039: Token not allowed after unary operator: '-background-color' (2272,17): run-time error CSS1039: Token not allowed after unary operator: '-color' (2288,28): run-time error CSS1039: Token not allowed after unary operator: '-color' (2307,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2313,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2319,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2325,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2338,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2339,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2340,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2347,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2356,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2357,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2381,21): run-time error CSS1039: Token not allowed after unary operator: '-size' (2382,22): run-time error CSS1039: Token not allowed after unary operator: '-size' (2385,31): run-time error CSS1039: Token not allowed after unary operator: '-size' (2386,32): run-time error CSS1039: Token not allowed after unary operator: '-size' (2387,26): run-time error CSS1039: Token not allowed after unary operator: '-border-size' (2387,51): run-time error CSS1039: Token not allowed after unary operator: '-color' (2388,28): run-time error CSS1039: Token not allowed after unary operator: '-border-size' (2389,27): run-time error CSS1039: Token not allowed after unary operator: '-border-size' (2389,52): run-time error CSS1039: Token not allowed after unary operator: '-color' (2398,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2412,21): run-time error CSS1039: Token not allowed after unary operator: '-size' (2413,22): run-time error CSS1039: Token not allowed after unary operator: '-size' (2417,36): run-time error CSS1039: Token not allowed after unary operator: '-color' (2419,37): run-time error CSS1039: Token not allowed after unary operator: '-color' (2712,39): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (2713,42): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (2721,29): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (2757,35): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (2825,30): run-time error CSS1039: Token not allowed after unary operator: '-transition' (2826,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (2973,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (2989,17): run-time error CSS1039: Token not allowed after unary operator: '-bg-color-secondary' (3011,26): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (3045,22): run-time error CSS1039: Token not allowed after unary operator: '-bc-color-secondary' (3078,29): run-time error CSS1039: Token not allowed after unary operator: '-row-space' (3155,17): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (3198,17): run-time error CSS1039: Token not allowed after unary operator: '-color-brand' (3202,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (3206,17): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (3414,39): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (3503,28): run-time error CSS1039: Token not allowed after unary operator: '-color-green' (3508,32): run-time error CSS1039: Token not allowed after unary operator: '-color-green' (3520,32): run-time error CSS1039: Token not allowed after unary operator: '-color-red' (3546,32): run-time error CSS1039: Token not allowed after unary operator: '-color-green-05' (3550,32): run-time error CSS1039: Token not allowed after unary operator: '-color-orange-04' (3554,32): run-time error CSS1039: Token not allowed after unary operator: '-color-red-05' (3583,26): run-time error CSS1030: Expected identifier, found '.' (3583,100): run-time error CSS1031: Expected selector, found ')' (3583,100): run-time error CSS1025: Expected comma or open brace, found ')' (3586,26): run-time error CSS1030: Expected identifier, found '.' (3586,100): run-time error CSS1031: Expected selector, found ')' (3586,100): run-time error CSS1025: Expected comma or open brace, found ')' (3614,26): run-time error CSS1030: Expected identifier, found '.' (3614,100): run-time error CSS1031: Expected selector, found ')' (3614,100): run-time error CSS1025: Expected comma or open brace, found ')' (3620,26): run-time error CSS1030: Expected identifier, found '.' (3620,100): run-time error CSS1031: Expected selector, found ')' (3620,100): run-time error CSS1025: Expected comma or open brace, found ')' (3672,22): run-time error CSS1030: Expected identifier, found '.' (3672,96): run-time error CSS1031: Expected selector, found ')' (3672,96): run-time error CSS1025: Expected comma or open brace, found ')' */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700;900&display=swap'); :root { --color-dark-900: #1E1A15; --header-height: 70px; --color-brand: #639; --color-brand-light: #9064cc; --color-primary: #a71d8e; --color-secondary: #001e42; --color-black: #111; --color-pink-light: #faf3f9; --color-gray-light: #efefef; --border-radius-sm: 4px; --border-radius: 6px; --border-radius-m: 8px; --border-radius-l: 12px; --box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); --box-shadow-sm: 0 0 5px rgba(0, 0, 0, 0.3); --transition: all 0.3s ease; --transition-s: all 0.5s ease; --bg-color-primary: #280736; --bg-color-secondary: #010126; --container-width: 1280px; --container-width-full: 100%; --card-text-color: #4c5260; --card-bg-color: #fff; --row-space: 16px; --color-green: #62c370; --color-green-02: #bfedc5; --color-green-03: #8eda97; --color-green-04: #3da74a; --color-green-05: #218d2f; --color-orange: #ec9132; --color-orange-01: #ffc483; --color-orange-02: #ffb05a; --color-orange-03: #c97111; --color-orange-04: #9f5402; --color-red: #f00; --color-red-02: #ff6464; --color-red-03: #ff3939; --color-red-04: #c60000; --color-red-05: #9b0000; } @media screen and (max-width: 767px) { :root { --header-height: 50px; } } *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } ul[class], ol[class] { padding: 0; } body, h1, h2, h3, h4, p, ul[class], ol[class], figure, blockquote, dl, dd { margin: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height, 80px) + 2rem); min-height: 100%; } /*RedOrbit HbbTV Emulator extension css inject prevention*/ html[style] {background:initial !important;width:auto !important;height:100% !important;overflow:initial !important} .card-item { min-height: auto !important; background-color: #151515; border-radius: 0.5rem; overflow: hidden; position: relative; width: 100%; } body { min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5; } ul[class], ol[class] { list-style: none; } a:not([class]) { text-decoration-skip-ink: auto; } .bc-link { text-decoration: none; -webkit-transition: all var(--transition) ease; transition: all var(--transition) ease; } .bc-link:hover, .bc-link:focus { text-decoration: underline; color: black; } img, picture { max-width: 100%; display: block; } input, button, textarea, select { font: inherit; } body { font-size: 16px; font-family: Montserrat, Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif; } body.nav-expanded { overflow: hidden; } @media screen and (max-width: 1023px) { body.nav-expanded:after { content: ""; position: absolute; background: rgba(0, 30, 66, 0.7); z-index: 1; width: 100%; height: 100%; top: var(--header-height); -webkit-transition: var(--transition); transition: var(--transition); } } @media screen and (max-width: 480px) { body.nav-expanded:after { content: none; } } body.bc-loading { max-height: 100vh; overflow: hidden; } .bc-wrapper { display: -ms-grid; display: grid; -ms-grid-rows: var(--header-height, 70px) 1fr auto; grid-template-rows: var(--header-height, 70px) 1fr auto; width: 100%; min-height: 100vh; } @media screen and (max-width: 767px) { .bc-wrapper { --header-height: 50px; } } .bc-container, .bc-container-m { max-width: var(--container-width); padding: 0 15px; margin: 0 auto; } .bc-container-m { max-width: calc(var(--container-width) / 1.75); } .bc-container-full { max-width: var(--container-width-full); } .bc-footer { padding: 2rem 0; border-top: 1px solid #efefef; background: #fff; color: #111; } .bc-footer .bc-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (max-width: 1023px) { .bc-footer .bc-container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .bc-footer .copyright-container { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px dotted #ddd; text-align: center; } .bc-footer .app-urls .url-item { margin-right: 1rem; } .bc-footer .app-urls .url-item:last-child { margin-right: 0; } @media screen and (max-width: 1023px) { .bc-footer .app-urls { -ms-flex-wrap: nowrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: center; padding-top: 1rem; margin-bottom:20px; gap:20px; } } .desktop-app-urls svg path:not(.ignore) { fill: #fff; } .desktop-app-urls svg.rect rect { fill: #000; } body.light .desktop-app-urls svg.rect rect { fill: #fff; } body.light .desktop-app-urls svg path:not(.ignore) { fill: #000; } body.light .desktop-app-urls svg.rect text { fill: #000; } /* Navigations */ .bc-header { background-image: -webkit-gradient(linear, left top, right top, from(#001e42), to(#a71d8e)); background-image: linear-gradient(to right, #001e42 0%, #a71d8e); position: -webkit-sticky; position: sticky; top: 0; width: 100%; z-index: 999; -webkit-transition: var(--transition); transition: var(--transition); height: var(--header-height); } .bc-header a, .bc-header a:hover, .bc-header a:active { color: #fff; text-decoration: none; } .bc-header .btn:focus, .bc-header .btn:hover { -webkit-box-shadow: var(--box-shadow-sm); box-shadow: var(--box-shadow-sm); } @media screen and (hover: hover) { .bc-header .btn:focus, .bc-header .btn:hover { -webkit-transform: none; transform: none; } } .bc-header .bc-container { min-height: 100%; position: relative; } @media screen and (max-width: 1023px) { .bc-header .bc-container { padding-left: 0; } } .bc-header .bc-container.flx { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; } .bc-header.logged-in .bc-container { max-width: 1920px; -ms-flex-wrap: nowrap; flex-wrap: nowrap; white-space: nowrap; } @media screen and (max-width: 767px) { .bc-header.logged-in .bc-container { padding-right: 1rem; } } .bc-header .nav-trigger { display: none; } @media screen and (max-width: 1023px) { .bc-header .nav-trigger { display: block; } } .bc-header .logo { margin-right: 1.5rem; -ms-flex-negative: 0; flex-shrink: 0; } @media screen and (max-width: 600px) { .bc-header .logo { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin-right: 0; } .bc-header .logo img { margin: 0 auto; } } @media screen and (max-width: 600px) { .bc-header.search-expanded .logo { visibility: hidden; } } @media screen and (max-width: 1023px) { .bc-header .bc-nav-desktop { display: none; } } .bc-header .actions-menu { margin-left: auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; } .bc-header .actions-menu .bc-user-nav-mobile { display: none; } .bc-header .actions-menu .user-actions .btn:first-child { margin-right: 1rem; } @media screen and (max-width: 600px) { .bc-header .actions-menu .bc-user-btn-label { display: none; } } @media screen and (max-width: 767px) { .bc-header .actions-menu .bc-user-nav-desktop { display: none; } .bc-header .actions-menu .bc-user-nav-mobile { display: block; } .bc-header .actions-menu .search .btn { padding: 0.5rem; } } .bc-header .actions-menu .btn { padding: 0.5rem 1.5rem; letter-spacing: 1px; font-size: 0.95rem; } .bc-header .actions-menu .btn svg { vertical-align: text-top; } .bc-header .actions-menu .btn-primary { background: #001e42; } .bc-header .actions-menu .btn-primary:hover, .bc-header .actions-menu .btn-primary:focus { background-color: rgba(0, 30, 66, 0.65); } .bc-header .actions-menu .btn-outline { border: 1px solid #fff; color: #fff; } .bc-header .actions-menu .btn-outline:hover, .bc-header .actions-menu .btn-outline:focus { background-color: rgba(255, 255, 255, 0.1); } @media screen and (max-width: 600px) { .bc-header .bc-nav-guest { display: none; } } @media screen and (max-width: 767px) { .bc-header .bc-nav-guest .btn { font-size: 0.8rem; padding: 0.4rem 1rem; } } .bc-header.logged-in .actions-menu .btn { padding: 0.5rem 1.5rem; } .bc-header.logged-in .actions-menu .search .btn { margin-right: 0; } .bc-header.logged-in .actions-menu .bc-user-nav .btn { padding: 0.5rem; } @media screen and (max-width: 767px) { .bc-header.logged-in .actions-menu .search .btn { margin-right: 0.5rem; padding: 0.5rem; } } @media screen and (min-width: 1024px) and (max-width: 1140px) { .bc-header.logged-in .actions-menu .bc-user-nav .btn { padding: 0.5rem 1rem; } .bc-header.logged-in .actions-menu .bc-user-nav .bc-btn-label { display: none; } .bc-header.logged-in .actions-menu .bc-nav-link-icon { margin-right: 0; } } .bc-header .search-form { position: absolute; display: none; opacity: 0; top: 50%; right: 1rem; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: rgba(0, 30, 66, 0.5); width: auto; height: 50px; border-radius: var(--border-radius-sm); -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 0 0 1rem; z-index: 10; -webkit-transition: var(--transition); transition: var(--transition); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .bc-header .search-form form { width: 100%; height: 100%; } .bc-header .search-form .search-input { width: 100%; height: 100%; background: transparent; border: 0; outline: none; color: #fff; font-weight: 700; } .bc-header .search .btn, .bc-header .search-form .btn { margin-right: 0.5rem; padding: 0.5rem 1rem; -webkit-transition: var(--transition); transition: var(--transition); } .bc-header .search .btn:hover, .bc-header .search .btn:focus, .bc-header .search-form .btn:hover, .bc-header .search-form .btn:focus { background: rgba(0, 0, 0, 0.2); } .bc-header.search-expanded .nav-primary, .bc-header.search-expanded .search > .btn, .bc-header.search-expanded .actions-menu, .bc-header.search-expanded .bc-nav-desktop { visibility: hidden; opacity: 0; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .bc-header.search-expanded .search-form { display: -webkit-box; display: -ms-flexbox; display: flex; left: 300px; opacity: 1; } @media screen and (max-width: 1023px) { .bc-header.search-expanded .search-form { left: 256px; } } @media screen and (max-width: 600px) { .bc-header.search-expanded .search-form { left: 64px; } } .bc-search-results-wrapper { position: fixed !important; top: var(--header-height); z-index: 99; height: calc(100% - var(--header-height)); width: 100%; background-color: #333; -o-object-fit: contain; object-fit: contain; background-image: radial-gradient(circle at 40% 30%, var(--bg-color-primary), var(--bg-color-secondary) 50%); overflow: auto; padding-bottom: 3rem; } .bc-search-results-wrapper.bc-loading:before, .bc-search-results-wrapper.bc-loading:after { position: fixed; } .bc-search-results-wrapper .search-header { padding-top: 2rem; padding-bottom: 1rem; color: #fff; } .bc-search-results-wrapper .search-header .bc-heading-m { font-weight: 500; margin-bottom: 0; color: currentColor; } .bc-search-results-wrapper .search-header .btn { border: 1px solid currentColor; text-transform: uppercase; } .bc-search-results-wrapper .search-filters { --b-position: 0; --b-width: 82px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: 1px solid rgba(167, 29, 142, 0.45); margin-bottom: 1rem; overflow-x: auto; overflow-y: hidden; -ms-overflow-style: none; scrollbar-width: none; -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; scroll-behavior: smooth; } .bc-search-results-wrapper .search-filters::-webkit-scrollbar { display: none; width: 0 !important; } .bc-search-results-wrapper .search-filters:after { content: ""; position: absolute; width: var(--b-width, 0); height: 2px; bottom: -1px; border-radius: 2px; left: var(--b-position, 0); background-color: var(--color-primary); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .bc-search-results-wrapper .search-filters .search-filter { padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.9rem; white-space: nowrap; scroll-snap-align: start; } .bc-search-results-wrapper .search-results { display: -ms-grid; display: grid; -ms-grid-columns: (minmax(192px, 1fr))[auto-fill]; grid-template-columns: repeat(auto-fill, minmax(192px, 1fr)); gap: 1.5rem 0.8rem; color: #fff; margin: 0 auto; float: unset; } @media screen and (max-width: 480px) { .bc-search-results-wrapper .search-results { -ms-grid-columns: (minmax(calc(50% - 1.6rem), 1fr))[auto-fill]; grid-template-columns: repeat(auto-fill, minmax(calc(50% - 1.6rem), 1fr)); } } .bc-search-results-wrapper .search-results .search-result { --delay: 200ms; padding-bottom: 0.5rem; -webkit-animation-delay: var(--delay); animation-delay: var(--delay); -webkit-animation: bcEaseIn 0.3s ease-in-out; animation: bcEaseIn 0.3s ease-in-out; will-change: transform; -webkit-transition: var(--transition); transition: var(--transition); } .bc-search-results-wrapper .search-results .search-result:hover { -webkit-transform: scale(1.1); transform: scale(1.1); background: -webkit-gradient(linear, left top, left bottom, from(0), color-stop(rgba(0, 0, 0, 0.2)), to(transparent)); background: linear-gradient(0, rgba(0, 0, 0, 0.2), transparent); -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); } .bc-search-results-wrapper .search-results .search-result:hover .item-overlay { visibility: visible; } .bc-search-results-wrapper .search-results .search-result .search-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; width: 100%; color: #fff; text-decoration: none; } .bc-search-results-wrapper .search-results .search-result .search-link h3 { margin-bottom: auto; font-size: 0.9rem; font-weight: 500; line-height: 1.6; text-align: center; } .bc-search-results-wrapper .search-results .search-result .item-media { margin-bottom: 0.8rem; padding: 1px; } .bc-search-results-wrapper .search-results .search-result .item-media img { width: 100%; } .bc-search-results-wrapper .search-results .search-result .item-overlay { position: absolute; visibility: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; top: 0; left: 0; width: 100%; height: 100%; z-index: 22; padding: 0.5rem 1rem; font-size: 0.8rem; background: -webkit-gradient(linear, left bottom, left top, from(#020929), color-stop(80%), to(rgba(2, 9, 41, 0))); background: linear-gradient(to top, #020929, 80%, rgba(2, 9, 41, 0)); } .bc-search-results-wrapper .search-results .search-result .item-info { width: 100%; margin-top: auto; } .bc-search-results-wrapper .search-results .search-result .item-info .bc-heading-s { font-size: 1rem; } .bc-search-results-wrapper .search-results .search-result .item-info .bc-heading-s .item-label { display: block; } .bc-search-results-wrapper .search-results .search-result .item-info p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bc-search-results-wrapper .search-results .search-result .item-info .item-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px; color: #efefef; margin-right: 0.3rem; } .bc-search-results-wrapper .search-results .bc-alert { grid-column: 1/-1; } .bc-search-results-wrapper .search-loadmore-container { padding: 1rem; margin-top: 1rem; text-align: center; } @-webkit-keyframes bcEaseIn { from { opacity: 0; visibility: hidden; } to { visibility: visible; opacity: 1; } } @keyframes bcEaseIn { from { opacity: 0; visibility: hidden; } to { visibility: visible; opacity: 1; } } @media screen and (max-width: 1023px) { .nav-desktop { display: none; } } .nav-primary .nav { height: var(--header-height); } .nav-primary .popover-nav { display: none; position: absolute; background: var(--color-secondary); -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3); top: var(--header-height); left: 0; min-width: 160px; z-index: 99; border-bottom-left-radius: var(--border-radius-sm); border-bottom-right-radius: var(--border-radius-sm); } .nav-primary .popover-nav.is-expanded { display: block; } .nav-primary .popover-nav .bc-nav { height: auto; } .nav-primary .popover-nav .bc-nav .bc-nav-item { display: block; } .nav-primary .popover-nav .bc-nav .bc-nav-link { padding: 0.8rem 1rem; } .nav-primary .popover-nav .bc-nav .bc-nav-link:hover, .nav-primary .popover-nav .bc-nav .bc-nav-link:focus { background: rgba(0, 0, 0, 0.2); } .nav-primary .popover-nav:before { content: ""; position: absolute; left: 1rem; top: -12px; border: 6px solid transparent; border-bottom: 6px solid var(--color-secondary); } .nav-primary .bc-nav-item { display: inline-block; } .nav-primary .bc-nav-item:hover > .bc-nav-link, .nav-primary .bc-nav-item:hover > .bc-nav-btn, .nav-primary .bc-nav-item:hover.is-active, .nav-primary .bc-nav-item:focus > .bc-nav-link, .nav-primary .bc-nav-item:focus > .bc-nav-btn, .nav-primary .bc-nav-item:focus.is-active, .nav-primary .bc-nav-item:focus-within > .bc-nav-link, .nav-primary .bc-nav-item:focus-within > .bc-nav-btn, .nav-primary .bc-nav-item:focus-within.is-active { background: rgba(0, 0, 0, 0.2); } .nav-primary .bc-nav-item.dd { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; height: var(--header-height); -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .nav-primary .bc-nav-item.dd .bc-nav-link, .nav-primary .bc-nav-item.dd .bc-nav-btn { padding-right: 1.5rem; } @media screen and (min-width: 1140px) { .nav-primary .bc-nav-item.dd .bc-nav-link, .nav-primary .bc-nav-item.dd .bc-nav-btn { padding-left: 1rem; } } .nav-primary .bc-nav-item.dd:after { content: ""; position: absolute; top: 50%; right: 0.5rem; width: 6px; height: 6px; border-style: solid; border-color: rgba(255, 255, 255, 0.7); border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg) translateX(-50%); transform: rotate(45deg) translateX(-50%); } .nav-primary .bc-nav-link, .nav-primary .bc-nav-btn { display: block; padding: 0.7rem 0.5rem; font-weight: 500; letter-spacing: 0.5px; border-radius: var(--border-radius-sm); } @media screen and (min-width: 1140px) { .nav-primary .bc-nav-link, .nav-primary .bc-nav-btn { padding-left: 1rem; padding-right: 1rem; } } .nav-primary .bc-nav-link:focus, .nav-primary .bc-nav-btn:focus { outline: none; } .nav-primary .bc-nav-btn:hover, .nav-primary .bc-nav-btn:focus { -webkit-transform: none; transform: none; } .nav-mega { background: var(--color-primary); width: 100%; height: 0; visibility: hidden; pointer-events: none; overflow: hidden; opacity: 0; -webkit-transition: var(--transition); transition: var(--transition); z-index: 100; outline: none; } .nav-mega .bc-container.flx { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .nav-mega.is-expanded { opacity: 1; height: auto; visibility: visible; pointer-events: all; } .nav-mega .container.flx { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .nav-mega .nav-tree { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding-top: 1.2rem; padding-bottom: 1.5rem; } .nav-mega .nav-featured-content { position: relative; width: 30%; margin-left: 1.2rem; width: 30%; margin-left: 1.2rem; background: -webkit-gradient(linear, left top, right top, from(#001e42), to(#a71d8e)); background: linear-gradient(to right, #001e42 0%, #a71d8e); padding: 1.2rem 1rem 1.2rem 1.4rem; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .nav-mega .nav-featured-content .featured-content-badge { position: absolute; top: 6px; left: -12px; background: #f79d2b; display: inline-block; padding: 0.3rem 0.5rem; text-transform: uppercase; font-size: 0.8rem; font-weight: 500; letter-spacing: 1px; border-bottom-right-radius: 8px; } .nav-mega .nav-featured-content .featured-content-badge:after { content: ""; position: absolute; bottom: -12px; left: 0; border-width: 6px; border-style: solid; border-color: transparent; border-top-color: #cc8021; border-right-color: #cc8021; } .nav-mega .nav-featured-content .featured-content-media { margin-bottom: .5rem; } .nav-mega .nav-featured-content .featured-content-title { margin-top: 1rem; margin-bottom: 0.5rem; font-size: 1.4rem; font-weight: 500; } .nav-mega .nav-featured-content .featured-content-text { font-size: 0.9rem; line-height: 1.8; } .nav-mega .nav-featured-content .featured-content-link { -ms-flex-item-align: start; align-self: flex-start; text-align: center; margin-top: 1rem; } .nav-mega .nav-featured-content .featured-content-link .btn:focus, .nav-mega .nav-featured-content .featured-content-link .btn:hover { background-color: rgba(255, 255, 255, 0.1); } .nav-mega .bc-nav { width: 20%; padding-right: 0.5rem; } .nav-mega .bc-nav .bc-nav-item:first-child { margin-bottom: 0.3rem; } .nav-mega .bc-nav .bc-nav-item:first-child .bc-nav-link { font-size: 1rem; font-weight: 500; } .nav-mega .bc-nav .bc-nav-link { display: block; font-weight: 400; padding: 0.3rem 0.5rem; } .nav-mega .bc-nav .bc-nav-link:hover, .nav-mega .bc-nav .bc-nav-link:focus { text-decoration: underline; outline: none; } .nav-mobile-container { display: none; } @media screen and (max-width: 1023px) { .nav-mobile-container { display: block; position: fixed; left: -150%; top: var(--header-height); bottom: 0; width: 50%; overflow-y: auto; -webkit-transition: var(--transition); transition: var(--transition); z-index: 99; } } .nav-mobile-container.right { left: auto; right: -100%; text-align: right; -webkit-transition: var(--transition); transition: var(--transition); } .nav-mobile-container.right .bc-nav-link { padding-right: 2rem; } .nav-mobile-container.right.is-expanded { left: auto; right: 0; } .nav-mobile-container.right .bc-nav-container { padding-top: 1.5rem; } .nav-mobile-container .bc-nav-container { background: var(--color-secondary); color: #fff; min-height: 100%; z-index: 99; padding-bottom: 2rem; } @media screen and (max-width: 480px) { .nav-mobile-container { width: 100%; } } .nav-mobile-container.is-expanded { left: 0; } .nav-mobile-container .nav-row, .nav-mobile-container .nav-expandable { border-bottom: 1px solid #00285a; } .nav-mobile-container .nav-search .icon { margin-right: 0.5rem; } .nav-mobile-container .nav-search .icon svg { vertical-align: middle; } .nav-mobile-container .nav-expandable { width: 100%; } .nav-mobile-container .nav-expandable .bc-nav .bc-nav-link { background-color: #00142b; } .nav-mobile-container .nav-expandable .nav-heading { position: relative; outline: 0; display: block; padding: 0.8rem 1rem; width: 100%; background: transparent; color: #fff; border: none; -webkit-box-shadow: none; box-shadow: none; cursor: pointer; list-style: none; font-weight: 700; letter-spacing: 0.5px; } .nav-mobile-container .nav-expandable .nav-heading:after { content: ""; position: absolute; top: 50%; right: 1rem; width: 6px; height: 6px; border-style: solid; border-color: rgba(255, 255, 255, 0.7); border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg) translateX(-50%); transform: rotate(45deg) translateX(-50%); } .nav-mobile-container .nav-expandable[open] .nav-heading:after { -webkit-transform: rotate(225deg) translateX(-50%); transform: rotate(225deg) translateX(-50%); -webkit-transform-origin: left; transform-origin: left; } .nav-mobile-container .nav-expandable .nav-heading::marker { display: none; } .nav-mobile-container .bc-nav-link { display: block; padding: 0.8rem 1rem; letter-spacing: 0.5px; font-weight: 500; } .nav-mobile-container .bc-nav .bc-nav-link { padding: 0.8rem 1rem 0.8rem 1.5rem; font-size: 0.9rem; border-bottom: 1px solid rgba(76, 82, 96, 0.2); } .nav-mobile-container .bc-nav .bc-nav-item:last-child .bc-nav-link { border-bottom: 0; } .nav-mobile-container .user-actions { -ms-flex-pack: distribute; justify-content: space-around; border-bottom: 0; margin-top: 2rem; } .nav-mobile-container .user-actions .btn { min-width: 40%; padding: 0.5rem 2rem; letter-spacing: 1px; font-size: 0.95rem; } .nav-mobile-container .bc-user-lists-container { margin-top: 1rem; border-top: 1px solid #00285a; padding-top: 1rem; } .nav-mobile-container .bc-user-lists-container .nav-icon { margin-right: 0.4rem; } .nav-mobile-container .bc-nav-search { padding: 0.5rem 0 0.5rem; border-bottom: 1px solid #00285a; margin-bottom: 1rem; font-weight: 700; } .nav-mobile-container .bc-nav-search svg { width: 20px; height: 20px; vertical-align: middle; margin-right: 0.4rem; } .bc-toggle-nav { border: 0; outline: none; color: #fff; background: transparent; } .bc-toggle-nav path { fill: currentColor; } .bc-nav, .bc-nav-dd { list-style: none; margin: 0; padding: 0; z-index: 999; } .bc-nav-item { display: block; position: relative; } .bc-nav-item:hover .bc-nav-dd { display: block; } .bc-nav-desktop, .bc-user-nav-desktop { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .bc-nav-desktop .bc-nav-item, .bc-user-nav-desktop .bc-nav-item { display: inline-block; height: 100%; } .bc-nav-desktop .bc-nav-item:hover, .bc-nav-desktop .bc-nav-item:focus-within, .bc-user-nav-desktop .bc-nav-item:hover, .bc-user-nav-desktop .bc-nav-item:focus-within { -webkit-transition: var(--transition); transition: var(--transition); background: rgba(0, 30, 66, 0.25); } .bc-nav-desktop .bc-nav-dd .bc-nav-item, .bc-user-nav-desktop .bc-nav-dd .bc-nav-item { display: block; } .bc-nav-desktop .bc-nav-link, .bc-user-nav-desktop .bc-nav-link { line-height: var(--header-height); height: var(--header-height); padding: 0 0.5rem; letter-spacing: 0; } .bc-nav-desktop .bc-nav-dd, .bc-user-nav-desktop .bc-nav-dd { display: none; position: absolute; top: var(--header-height); left: 0; width: 192px; max-width: 200px; background: var(--color-secondary); border-radius: 0 0 4px 4px; padding: 0.3rem 0 0.5rem !important; } .bc-nav-desktop .bc-nav-dd .bc-nav-link, .bc-user-nav-desktop .bc-nav-dd .bc-nav-link { height: auto; line-height: 24px; padding: 0.4rem 1rem; font-weight: 400; } .bc-nav-desktop .bc-nav-dd .bc-nav-link:hover, .bc-nav-desktop .bc-nav-dd .bc-nav-link:focus, .bc-user-nav-desktop .bc-nav-dd .bc-nav-link:hover, .bc-user-nav-desktop .bc-nav-dd .bc-nav-link:focus { background: #1c2d4d; } .bc-nav-desktop .bc-user-nav > .bc-nav-item, .bc-user-nav-desktop .bc-user-nav > .bc-nav-item { height: var(--header-height); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .logged-in .bc-user-nav .bc-nav-dd { left: auto; right: 0; } .bc-nav-link { display: block; font-size: 0.875rem; padding: 0.5rem 1rem; font-weight: 500; white-space: nowrap; letter-spacing: 1px; color: currentColor; text-decoration: none; text-decoration-skip-ink: auto; } .bc-nav-link :hover { text-decoration: underline; color: currentColor; } .bc-nav-link.active { padding: 0; } .bc-nav-link.active span { display: inline-block; padding: 0.375rem 0.5rem; border-radius: var(--border-radius-m); background-color: rgba(0, 0, 0, 0.2); line-height: 1; font-weight: 500; } .bc-nav-link.active:hover span { background-color: transparent; } .bc-nav-link .bc-nav-link-icon-custom { background-color: transparent; padding: 0; } .bc-nav-link .bc-nav-link-icon-custom svg { vertical-align: middle; margin-right: 0.2rem; } .bc-user-nav .bc-nav-link { letter-spacing: 0; } .bc-nav-mobile .bc-nav { position: relative; padding-bottom: 1rem; margin-bottom: 1rem; } .bc-nav-mobile .bc-nav:after { position: absolute; bottom: 0; content: ""; display: block; width: 80%; height: 1px; border-radius: 1px; background-image: linear-gradient(-45deg, transparent, #639); background-position: 1rem 0; } .bc-btn-icon svg { vertical-align: middle; } .bc-toggle-user-nav svg { vertical-align: text-top; } .bc-nav-link-icon { margin-right: 0.4rem; } .bc-nav-link-icon svg { vertical-align: text-bottom; } .bc-nav-link-icon path { fill: currentColor; } .bc-nav-heading { font-size: 16px; color: currentColor; margin: 0 0 8px; font-weight: 500; padding: 0 16px; letter-spacing: 1px; } .nav-footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 75%; } @media screen and (max-width: 1023px) { .nav-footer { max-width: 100%; } } .nav-footer .nav-container { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .nav-footer .bc-nav-item .bc-nav-link { display: block; color: #444; text-decoration: none; padding: 0.3rem 1rem; -webkit-transition: var(--transition); transition: var(--transition); } .nav-footer .bc-nav-item .bc-nav-link:hover, .nav-footer .bc-nav-item .bc-nav-link:focus { color: #000; text-decoration: underline; } .nav-footer .nav-heading { display: block; color: #222; padding: 0.3rem 1rem; font-weight: 700; font-size: 1rem; line-height: 1.5; } .nav-footer-secondary { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .nav-footer-secondary .nav-social { margin-bottom: 2rem; text-align: right; } .nav-footer-secondary .nav-social .bc-nav-item:hover {opacity:.9;transform:translateY(-2px)} @media screen and (max-width: 1023px) { .nav-footer-secondary .nav-social { text-align: center; margin-top: 2rem; } } .nav-footer-secondary .nav-social .bc-nav-item { display: inline-block; margin-right: 0.5rem; transition: opacity .3s ease, transform .3s ease; } .nav-footer-secondary .nav-social .bc-nav-item:last-child { margin-right: 0; } .nav-footer-secondary .nav-social .bc-nav-link { background: var(--color-secondary); width: 50px; height: 50px; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0; -webkit-transition: var(--transition); transition: var(--transition); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .nav-footer-secondary .app-urls { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media screen and (max-width: 1023px) { .nav-footer-secondary .app-urls { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .nav-footer-secondary .app-urls .url-item { opacity: 0.8; -webkit-transition: var(--transition); transition: var(--transition); } .nav-footer-secondary .app-urls .url-item:first-child { margin-bottom: 1rem; } @media screen and (max-width: 1023px) { .nav-footer-secondary .app-urls .url-item:first-child { margin-bottom: 0; margin-right: 1rem; } } .nav-footer-secondary .app-urls .url-item:hover, .nav-footer-secondary .app-urls .url-item:focus { opacity: 1; } /* Components */ .bc-heading, .bc-heading-primary, .bc-headin-s, .bc-heading-m, .bc-heading-l, .bc-heading-xl { font-weight: 700; font-size: 2.25rem; margin-bottom: 1.5rem; color: var(--color-secondary); } .bc-heading-primary { background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; background-image: -webkit-gradient(linear, left top, right top, from(#25265a), color-stop(50%, #5c2d91), to(#7f529e)); background-image: linear-gradient(to right, #25265a 0%, #5c2d91 50%, #7f529e 100%); } hgroup .bc-heading-primary { margin-bottom: 1rem; } .bc-heading-xl { font-size: 2.5rem; margin-bottom: 3.5rem; } .bc-heading-m { font-size: 1.5rem; margin-bottom: 1.4rem; } .bc-heading-s { font-size: 1.2rem; margin-bottom: 1rem; font-weight: 500; } .bc-form-label, .bc-custom-label { display: block; font-weight: 500; font-size: 0.9rem; cursor: pointer; position: relative; } .bc-form-label.is-required:after { content: "*"; color: red; display: inline-block; margin-left: 0.3rem; } .bc-custom-input { margin-bottom: 1px; padding: 0.75rem 1.5rem; } .bc-custom-input .bc-custom-label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bc-custom-input .bc-custom-label .bc-label { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; z-index: 1; } .bc-custom-input .bc-custom-label .label-text { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bc-custom-input .bc-custom-label:hover .bc-custom-radio-mask { border-color: var(--color-primary); } .bc-custom-input .bc-custom-radio-mask { position: relative; display: inline-block; border: 2px solid gray; border-radius: 50%; width: 24px; height: 24px; margin-right: 0.5rem; } .bc-custom-input .bc-custom-radio-input:checked + .bc-custom-radio-mask { border-color: var(--color-primary); } .bc-custom-input .bc-custom-radio-input:checked + .bc-custom-radio-mask:after { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary); } .bc-custom-toggle { border: 2px solid #ddd; background: #fff; border-radius: 999px; width: 40px; height: 24px; margin-right: 0.5rem; position: relative; -webkit-transition: var(--transition); transition: var(--transition); } .bc-custom-toggle .bc-toggle-thumb { width: 16px; height: 16px; top: 2px; left: 2px; right: auto; position: absolute; content: ""; background: #aaa; border-radius: 50%; -webkit-transition: var(--transition); transition: var(--transition); } .bc-toggle-checkbox:checked + .bc-custom-toggle { background: var(--color-primary); } .bc-toggle-checkbox:checked + .bc-custom-toggle .bc-toggle-thumb { -webkit-transform: translateX(16px); transform: translateX(16px); background: #fff; } .bc-custom-checkbox .bc-custom-checbox-label { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: nowrap; flex-wrap: nowrap; cursor: pointer; font-size: 0.9rem; } .bc-custom-checkbox .bc-custom-checkbox-mask { width: 18px; height: 18px; border: 2px solid var(--color-secondary); border-radius: 2px; display: inline-block; margin-right: 0.8rem; -webkit-transition: var(--transition); transition: var(--transition); -ms-flex-negative: 0; flex-shrink: 0; } .bc-custom-checkbox .bc-custom-checkbox-input:checked + .bc-custom-checkbox-mask { background-color: var(--color-secondary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 13l4 4L19 7' /%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 18px 18px; } .bc-custom-checkbox .bc-custom-checkbox-input.has-error + .bc-custom-checkbox-mask { border-color: #d90000 !important; } .bc-custom-checkbox .bc-custom-checkbox-input:focus + .bc-custom-checkbox-mask { -webkit-transition: 0ms; transition: 0ms; outline: 1px solid #66788e; outline-offset: 2px; } .bc-form-container { width: 100%; max-width: calc(var(--container-width) / 2); margin: 0 auto; } .bc-form-container-s { width: 100%; max-width: 360px; margin: 0 auto; } .bc-form { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .bc-form .bc-form-item { position: relative; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin-bottom: 1rem; padding: 0 0.5rem; } .bc-form .bc-form-item .bc-form-label { display: block; font-weight: 500; font-size: 0.9rem; margin-bottom: 0.4rem; color: var(--card-text-color); cursor: pointer; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .bc-form .bc-form-item .bc-form-label.flx { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .bc-form.bc-col-2 .bc-form-item { width: 50%; } @media screen and (max-width: 480px) { .bc-form.bc-col-2 .bc-form-item { width: auto; } } .bc-form .bc-form-input, .bc-form .bc-form-textarea, .bc-form .bc-form-select { width: 100%; background: transparent; border-radius: var(--border-radius-sm); padding: 0.6rem 0.8rem; outline: none; border-width: 1px; border-style: solid; border-color: #bebbba; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; color: #333; font-weight: 500; letter-spacing: 1px; } .bc-form .bc-form-input:focus, .bc-form .bc-form-textarea:focus, .bc-form .bc-form-select:focus { border-color: var(--color-primary); -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); } .bc-form .bc-form-group { position: relative; width: calc((100% / 2) - 0.5rem); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .bc-form .bc-form-group:nth-child(even) { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .bc-form .bc-form-group .bc-form-label { width: 100%; } .bc-form .bc-form-group .bc-form-label .bc-label-text { position: absolute; color: #333; font-size: 14px; pointer-events: none; -webkit-transform: translateX(10px) translateY(16px); transform: translateX(10px) translateY(16px); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .bc-form .bc-form-group .bc-form-label .bc-label-text-cbx { position: relative; -webkit-transform: none; transform: none; } .bc-form .bc-form-group .bc-form-label .bc-label-text.focused { -webkit-transform: translateX(10px) translateY(-10px); transform: translateX(10px) translateY(-10px); -webkit-padding-start: 4px; padding-inline-start: 4px; -webkit-padding-end: 4px; padding-inline-end: 4px; font-size: 14px; background: #fff; } .bc-form .bc-form-group-full { width: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .hints { padding: 0.5rem; font-size: 0.8rem; font-weight: 700; color: var(--color-secondary); } .hints span { display: inline-block; color: #888; padding: 0.5rem 0.325rem 0.5rem 1.5rem; font-weight: 500; line-height: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23888'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd' /%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 16px; background-position: 0.3rem center; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .hints span.ok { color: #9762cf; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239762cf'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd' /%3E%3C/svg%3E"); -webkit-animation: beat 0.3s ease; animation: beat 0.3s ease; } @-webkit-keyframes beat { from { -webkit-transform: scale(1.1); transform: scale(1.1); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes beat { from { -webkit-transform: scale(1.1); transform: scale(1.1); } to { -webkit-transform: scale(1); transform: scale(1); } } .has-error { border-color: #d90000 !important; } .bc-input-error { margin-top: 0.3rem; color: #d90000; font-size: 0.8rem; font-weight: 500; } .bc-login-container .login-info { color: var(--card-text-color); font-size: 0.9rem; font-weight: 500; margin-bottom: 1.5rem; } .bc-login-container .forgot-password, .bc-login-container .bc-custom-checkbox .label-text { font-size: 0.8rem; font-weight: 500; color: var(--card-text-color); } .bc-login-container .forgot-password:focus, .bc-login-container .bc-custom-checkbox .label-text:focus { color: var(--color-black); } .bc-login-container .bc-login-submit { text-align: center; margin: 0 auto; z-index:1002 } .bc-login-view .bc-login-container { max-width: 100%; border: 0; -webkit-box-shadow: none; box-shadow: none; padding-top: 0.5rem; } .bc-login-view .bc-login-container .bc-heading-primary { font-size: 1.6rem; color: var(--color-secondary); background-clip: text; -webkit-background-clip: unset; -webkit-text-fill-color: unset; background-image: none; } .bc-login-view .bc-login-container .login-info { max-width: 480px; font-weight: 500; color: #66788e; } .bc-login-view .bc-login-container .bc-form-item { width: 50%; } @media screen and (max-width: 480px) { .bc-login-view .bc-login-container .bc-form-item { width: 100%; } .bc-login-view .bc-login-container .bc-form-item.w100 { width: 100% !important; } } .bc-login-view .bc-login-container .bc-form-item.w100 { width: 50% !important; } .bc-login-view .bc-login-container .bc-form-item.flx { width: 100%; } .bc-login-view .bc-login-container .bc-form-item.bc-login-submit { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } .bc-form-input.bc-input-pin { text-align: center; font-size: 1.4rem; font-weight: 700; letter-spacing: 10px; } .bc-view-register-login .bc-form-container { max-width: 360px; } .bc-view-register-login.bc-login-view .bc-login-container .bc-form-item { width: 100%; } .bc-view-register-login .bc-login-container { padding-top: 0; } .bc-view-register-login .login-info { margin-bottom: 1.5rem; margin-top: 1.5rem; } .bc-view-register .register-info { color: #66788e; font-size: 0.9rem; font-weight: 500; margin-bottom: 1.5rem; margin-top: 1.5rem; text-align: center; } .btn { padding: 0.5rem 1rem; text-align: center; outline: 0; border: 1px solid transparent; border-radius: var(--border-radius-sm, 4px); color: #fff; -webkit-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1); cursor: pointer; font-weight: 500; letter-spacing: 0.5px; text-decoration: none; will-change: transform, box-shadow; } .btn.btn-s { font-size: 0.8rem; padding: 0.4rem 1rem; } .btn.btn-lg { padding: 0.8rem 2rem; } .btn.btn-full { width: 100%; } .btn.btn-xl { min-width: 320px; padding: 0.8rem 2rem !important; } @media screen and (max-width: 480px) { .btn.btn-xl { min-width: 100%; } } .btn.btn-primary { background: var(--color-brand-light); } .btn.btn-secondary { background: var(--bg-color-secondary, #010126); } .btn.btn-outline { background: none; color: var(--color-brand); border: 1px solid var(--color-brand); } .btn.btn-outline:disabled { color: #d9d9d9; border-color: #d9d9d9; } .btn.btn-ghost { background: transparent; } .btn.btn-ghost.is-active { background: rgba(0, 0, 0, 0.2); } .btn.btn-ghost:focus, .btn.btn-ghost:hover { -webkit-box-shadow: none; box-shadow: none; } .btn.btn-invert { background: none; color: #fff; border-color: #fff; } .btn:focus, .btn:hover { -webkit-box-shadow: var(--box-shadow-sm); box-shadow: var(--box-shadow-sm); } @media screen and (hover: hover) { .btn:focus, .btn:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } .btn:disabled { background: #888; } .btn:disabled:focus, .btn:disabled:hover { -webkit-box-shadow: none; box-shadow: none; -webkit-transform: none; transform: none; } .btn svg { vertical-align: middle; } a.btn { display: inline-block; } .bc-password-field-toggle { position: relative; width: 100%; } .bc-password-field-toggle button { color: #666; cursor: pointer; position: absolute; width: 32px; height: 32px; right: 0.5rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); outline: 0; background-color: transparent; border: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23666'%3E%3Cpath d='M10 12a2 2 0 100-4 2 2 0 000 4z' /%3E%3Cpath fill-rule='evenodd' d='M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z' clip-rule='evenodd' /%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 60%; background-position: center; } .bc-password-field-toggle button.is-visible { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23666'%3E%3Cpath fill-rule='evenodd' d='M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z' clip-rule='evenodd' /%3E%3Cpath d='M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z' /%3E%3C/svg%3E"); } .bc-password-field-toggle button:focus { outline: 1px solid; } .bc-password-field-toggle button:active { outline: 0; } .bc-password-field-toggle .bc-form-input { padding-right: 3rem; } .bc-btn-group .btn { margin: 0.5rem; } .bc-alert { --background-color: #fff; --color: #333; width: 100%; max-width: 600px; border-radius: var(--border-radius-sm); padding: 0.5rem 0.5rem 0.5rem 2.5rem; background: var(--background-color); margin-bottom: 2em; margin-right: auto; margin-left: auto; color: var(--color); line-height: 1.5; letter-spacing: 0.5px; font-size: 0.9rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: 500; background-repeat: no-repeat; background-size: 20px 20px; background-position: 10px center; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border: 1px solid var(--color); } .bc-alert, .bc-alert-compact { padding-left: 36px; background-position: 8px center; background-repeat: no-repeat; } .bc-alert-compact { background-size: 16px; padding-left: 28px; padding-top: 0.3rem; padding-bottom: 0.3rem; } .bc-alert.bc-alert-danger, .bc-alert-compact.bc-alert-danger { --color: #ff4646; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0D%0A%3Cpath%20d%3D%22M12.984%2012.984v-6h-1.969v6h1.969zM12.984%2017.016v-2.016h-1.969v2.016h1.969zM12%202.016q4.125%200%207.055%202.93t2.93%207.055-2.93%207.055-7.055%202.93-7.055-2.93-2.93-7.055%202.93-7.055%207.055-2.93z%22%20fill%3D%22%23ff4646%22%2F%3E%0D%0A%3C%2Fsvg%3E"); } .bc-alert.bc-alert-success, .bc-alert-compact.bc-alert-success { --color: #66ee88; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0D%0A%3Cpath%20d%3D%22M9.984%2017.016l9-9-1.406-1.453-7.594%207.594-3.563-3.563-1.406%201.406zM12%202.016q4.125%200%207.055%202.93t2.93%207.055-2.93%207.055-7.055%202.93-7.055-2.93-2.93-7.055%202.93-7.055%207.055-2.93z%22%20fill%3D%22%2366ee88%22%2F%3E%0D%0A%3C%2Fsvg%3E"); } .bc-alert.bc-alert-warning, .bc-alert-compact.bc-alert-warning { --color: #f9ae4e; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0D%0A%3Cpath%20d%3D%22M12.984%2014.016v-4.031h-1.969v4.031h1.969zM12.984%2018v-2.016h-1.969v2.016h1.969zM0.984%2021l11.016-18.984%2011.016%2018.984h-22.031z%22%20fill%3D%22%23f9ae4e%22%3E%0D%0A%3C%2Fpath%3E%0D%0A%3C%2Fsvg%3E"); } .bc-alert.bc-alert-info, .bc-alert-compact.bc-alert-info { --color: #30bbdd; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0D%0A%3Cpath%20d%3D%22M12.984%209v-2.016h-1.969v2.016h1.969zM12.984%2017.016v-6h-1.969v6h1.969zM12%202.016q4.125%200%207.055%202.93t2.93%207.055-2.93%207.055-7.055%202.93-7.055-2.93-2.93-7.055%202.93-7.055%207.055-2.93z%22%20fill%3D%22%2330bbdd%22%2F%3E%0D%0A%3C%2Fsvg%3E"); } .bg-dark .bc-alert { background-color: transparent; } .bc-loading, .bc-loading-sm, .bc-loading-inline, .bc-loading-right, .bc-loading-right-end { --size: 48px; --color: white; --border-size: 5px; position: relative; pointer-events: none; } .bc-light .bc-loading, .bc-light .bc-loading-sm { --color: var(--color-brand); } .bc-light .bc-loading:before, .bc-light .bc-loading-sm:before { background: rgba(255, 255, 255, 0.8); } .bc-loading-sm { --size: 24px; --border-size: 2px; } .bc-loading:before, .bc-loading:after, .bc-loading-sm:before, .bc-loading-sm:after { position: absolute; content: ""; z-index: 99; } .bc-loading:before, .bc-loading-sm:before { width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); } .bc-loading:after, .bc-loading-sm:after { display: block; width: var(--size); height: var(--size); top: 50%; left: 50%; margin-top: calc(var(--size) / -2); margin-left: calc(var(--size) / -2); border-top: var(--border-size) solid var(--color); border-right: var(--border-size) solid transparent; border-left: var(--border-size) solid var(--color); border-radius: 50%; -webkit-animation: infinite bc-loaderrotate 0.5s linear; animation: infinite bc-loaderrotate 0.5s linear; } .bc-loading-inline, .bc-loading-right, .bc-loading-right-end { --size: 14px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bc-loading-inline:before, .bc-loading-right:after, .bc-loading-right-end:after { content: ""; display: inline-block; width: var(--size); height: var(--size); -ms-flex-negative: 0; flex-shrink: 0; margin-right: 0.5em; border-top: 2px solid var(--color); border-right: 2px solid transparent; border-left: 2px solid var(--color); border-radius: 50%; -webkit-animation: infinite bc-loaderrotate 0.5s linear; animation: infinite bc-loaderrotate 0.5s linear; } .bc-loading-right:after, .bc-loading-right-end:after { margin-right: 0; margin-left: 0.5em; } .bc-loading-right:before, .bc-loading-right-end:before { content: none; } .bc-loading-right-end:after { margin-left: auto; } @-webkit-keyframes bc-loaderrotate { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes bc-loaderrotate { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .bc-modal-container { position: fixed; height: 100%; width: 100%; top: 0; right: 0; bottom: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 99; } .bc-modal-container .bc-modal { z-index: 1; background: #fff; -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.2); box-shadow: 0 0 25px rgba(0, 0, 0, 0.2); border-radius: 8px; width: 100%; max-width: 360px; } .bc-modal-container .bc-modal.bc-modal-l { max-width: 480px; max-height: 80%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media screen and (max-width: 480px) { .bc-modal-container .bc-modal.bc-modal-l { max-width: calc(100% - 2rem); } } .bc-modal-container .bc-modal .bc-modal-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: .5rem 1rem; } .bc-modal-container .bc-modal .bc-modal-header .modal-title { margin-bottom: 0; } .bc-modal-container .bc-modal .bc-modal-header .bc-icon-close, .bc-modal-container .bc-modal .bc-modal-header .btn-ghost { margin-left: auto; margin-right: -.5rem; padding: .5rem; color: #222; } .bc-modal-container .bc-modal-content { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 1rem; } .bc-modal-container:before { content: ""; position: fixed; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.2); top: 0; left: 0; z-index: -1; } .icon { display: inline-block; vertical-align: bottom; } .icon svg { width: 24px; height: 24px; vertical-align: middle; margin-right: .5rem; } .digito-chat { background-color: transparent; pointer-events: none; z-index: 1001; position: fixed; right: 1rem; bottom: 1rem; width: calc(100% - 2rem); height: 2.5rem; overflow: hidden; opacity: 1; max-width: 30rem; max-height: 75vh; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; text-align: right; } .digito-chat > .btn-secondary { display: none; } .digito-chat iframe { pointer-events: all; width: 100%; height: 100%; } .digito-chat.open { height: 100%; -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); background-color: #fff; } .digito-chat.minimized { height: 4rem; } .digito-chat.minimized > .btn-secondary { pointer-events: all; display: inline-block; } .digito-chat.minimized > .btn-secondary svg { -webkit-animation: tilt 1s ease; animation: tilt 1s ease; } .digito-chat.minimized .digito-chat-container { visibility: hidden; pointer-events: none; } .digito-chat-container { width: 100%; height: 100%; } .digito-chat-button { margin-bottom: 1.5rem; padding-right: 0.3rem; text-align: center; } @media screen and (max-width: 1023px) { .digito-chat-button { margin-bottom: 0; margin-top: 1rem; } } .digito-chat-button .btn { text-transform: uppercase; letter-spacing: 0.5px; } .digito-chat-button .btn svg { vertical-align: text-bottom; display: inline-block; margin-right: 0.2rem; } @-webkit-keyframes tilt { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: rotate(25deg); transform: rotate(25deg); } } @keyframes tilt { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: rotate(25deg); transform: rotate(25deg); } } /* Helpers */ .bc-break, .bc-break-xl, .bc-break-l, .bc-break-m, .bc-break-s { width: 100%; border: 0; height: 1px; background-color: #c2cad4; margin: 2.5rem 0; } .bc-break.break-silent, .bc-break-xl.break-silent, .bc-break-l.break-silent, .bc-break-m.break-silent, .bc-break-s.break-silent { background-color: transparent; } .bc-break-xl { margin: 3rem 0; } .bc-break-l { margin: 2.5rem 0; } .bc-break-m { margin: 1.5rem 0; } .bc-break-s { margin: 0.5rem 0; } .bc-scroll { scrollbar-color: #999 #555; scrollbar-width: thin; } .bc-scroll::-webkit-scrollbar { width: 6px; height: 6px; } .bc-scroll::-webkit-scrollbar-track { border-top-right-radius: var(--border-radius-sm); border-bottom-right-radius: var(--border-radius-sm); -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2); } .bc-scroll::-webkit-scrollbar-thumb { background-color: #999; outline: 0; border-radius: var(--border-radius-sm); } .bc-view { display: none; } .bc-view.active { display: block; -webkit-animation: bcSlideIn 0.3s ease-in-out; animation: bcSlideIn 0.3s ease-in-out; } @-webkit-keyframes bcSlideIn { from { opacity: 0; -webkit-transform: scale(0.9) translateY(2rem); transform: scale(0.9) translateY(2rem); } } @keyframes bcSlideIn { from { opacity: 0; -webkit-transform: scale(0.9) translateY(2rem); transform: scale(0.9) translateY(2rem); } } .full-width, .w100 { width: 100% !important; max-width: 100% !important; } .bc-h-vp-full { min-height: calc(100vh - var(--header-height)); } .flx { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .flx-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .flx-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .flx-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .flx-x-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .flx-y-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .flx-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .show { display: block; } .hide { display: none !important; } .is-hidden { visibility: hidden; opacity: 0; -webkit-transition: var(--transition); transition: var(--transition); } .screen-s { display: none; } @media screen and (max-width: 767px) { .screen-s { display: inline-block; } } .sr-only { border: 0px; clip: rect(0px, 0px, 0px, 0px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap; } .c-center { text-align: center; margin: 0 auto; } .px { padding-left: 1rem !important; padding-right: 1rem !important; } .px-s { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .py { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-m { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .pb { padding-bottom: 1rem !important; } .pb-s { padding-bottom: 0.5rem !important; } .pb-0 { padding-bottom: 0 !important; } .pt-0 { padding-bottom: 0 !important; } .mx { margin-left: 1rem; margin-right: 1rem; } .mx-s { margin-left: 0.5rem; margin-right: 0.5rem; } .mx-0 { margin-left: 0; margin-right: 0; } .my { margin-top: 1rem; margin-bottom: 1rem; } .mb { margin-bottom: 1rem !important; } .mb-s { margin-bottom: 0.5rem !important; } .mb-m { margin-bottom: 1.5rem !important; } .mb-l { margin-bottom: 2rem !important; } .mb-0 { margin-bottom: 0 !important; } .mt-0 { margin-top: 0 !important; } .mt-s { margin-top: 0.5rem !important; } .mt-m { margin-top: 1.5rem !important; } .mt-l { margin-top: 2rem !important; } .lh-1 { line-height: 1; } .bc-media { display: block; max-width: 100%; height: auto; margin: 0 auto; } .bc-media.bc-thumb { width: 160px; } .bc-media img { margin: 0 auto; } .op-5 { opacity: 0.5; } .color-primary { color: var(--color-primary) !important; } .color-white { color: #fff !important; } .color-gray { color: #cacaca !important; } .bb-light { border-bottom: 1px solid #efefef; } .show-more { color: var(--bg-color-secondary); font-weight: 700; text-decoration: underline; } .read-more .remaining-text { display: none; } .read-more.is-expanded .remaining-text { display: inline; } .bc-badge { display: inline-block; border-radius: 4px; font-weight: 500; padding: 0.1rem 0.5rem; font-size: 0.75rem; } .bc-badge.badge-primary { background: var(--color-secondary); color: #fff; } .bc-tooltip .bc-tooltip-body { display: none; position: absolute; top: 0; right: 0; background: #fff; font-size: 0.8rem; font-weight: 500; max-width: 50%; z-index: 10; border-radius: 6px; -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); padding: 0.6rem 1rem; } .bc-tooltip .bc-tooltip-body.is-visible { display: block; } .bc-tooltip-trigger { display: inline-block; padding: 0.1rem 0.2rem; border-radius: 50%; width: 2.5ch; height: 2.5ch; text-align: center; } .bc-tooltip-secondary { background: var(--bc-color-secondary, #333); color: #fff; } .td-none { text-decoration: none !important; } .bc-grid-column-full, .bc-grid-column-one-half, .bc-grid-column-one-quarter, .bc-grid-column-three-quarter, .bc-grid { width: 100%; display: -ms-grid; display: grid; } .bc-grid-column-full-row, .bc-grid-column-one-half-row, .bc-grid-column-one-quarter-row, .bc-grid-column-three-quarter-row, .bc-grid-row { -ms-grid-columns: (1fr)[8]; grid-template-columns: repeat(8, 1fr); padding: 0 1rem; } .bc-grid-column-full-row:not(:last-child), .bc-grid-column-one-half-row:not(:last-child), .bc-grid-column-one-quarter-row:not(:last-child), .bc-grid-column-three-quarter-row:not(:last-child), .bc-grid-row:not(:last-child) { margin-bottom: var(--row-space); } .bc-grid-column-full-column-full, .bc-grid-column-one-half-column-full, .bc-grid-column-one-quarter-column-full, .bc-grid-column-three-quarter-column-full, .bc-grid-column-full { -ms-grid-column: 1; -ms-grid-column-span: 8; grid-column: 1 / 9; } .bc-grid-column-full-column-one-half, .bc-grid-column-one-half-column-one-half, .bc-grid-column-one-quarter-column-one-half, .bc-grid-column-three-quarter-column-one-half, .bc-grid-column-one-half { -ms-grid-column: 1; -ms-grid-column-span: 4; grid-column: 1 / 5; } .bc-grid-column-full-column-one-quarter, .bc-grid-column-one-half-column-one-quarter, .bc-grid-column-one-quarter-column-one-quarter, .bc-grid-column-three-quarter-column-one-quarter, .bc-grid-column-one-quarter { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1 / 3; } .bc-grid-column-full-column-three-quarter, .bc-grid-column-one-half-column-three-quarter, .bc-grid-column-one-quarter-column-three-quarter, .bc-grid-column-three-quarter-column-three-quarter, .bc-grid-column-three-quarter { -ms-grid-column: 1; -ms-grid-column-span: 6; grid-column: 1 / 7; } .bc-text-xl, .bc-text-l, .bc-text-m, .bc-text-s { display: inline-block; font-weight: 500; } .bc-text-xl { font-size: 21px; } .bc-text-l { font-size: 18px; } .bc-text-m { font-size: 15px; } .bc-text-s { font-size: 12px; } .bc-text-xs { font-size: 12px; } .bc-body, .bc-body-xl, .bc-body-l, .bc-body-m .bc-body-s { display: block; font-weight: 500; color: var(--color-black); margin-bottom: 1rem; } .bc-body-xl { font-size: 28px; } .bc-body-l { font-size: 24px; } .bc-body-m { font-size: 18px; } .bc-body-s { font-size: 14px; } .bc-text-exbold { font-weight: 900 !important; } .bc-text-bold { font-weight: 700 !important; } .bc-text-light { font-weight: 300 !important; } .bc-text-danger { color: red !important; } .bc-text-center { text-align: center !important; } .bc-text-right { text-align: right !important; } .bc-color-brand { color: var(--color-brand) !important; } .bc-color-primary { color: var(--color-primary) !important; } .bc-color-secondary { color: var(--color-secondary) !important; } /*Kupon koduna ba�l� �neri paketinin g�sterimi*/ #bc-suggestionPack {display: flex;align-items: center;z-index: 1002;padding: 15px;} #bc-suggestionPack, #bc-suggestionPack .overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;} #bc-suggestionPack .modal {max-width: 900px;border-radius: 6px;background: #fff;padding:2rem;margin: 0 auto !important;flex:1;z-index:1003;position:relative;display:block !important; max-height:100%;overflow:auto} #bc-suggestionPack .overlay {background:rgba(0, 30, 66, .3);z-index:1002} #bc-suggestionPack .footer {display:flex;flex-flow:row wrap;gap:2vw;margin-top:3%} #bc-suggestionPack .footer > span {flex:1;white-space:nowrap;min-width:210px} #bc-suggestionPack .footer .btn {width:100%} #bc-suggestionPack .footer > span:last-child {flex:2} #bc-suggestionPack.show .modal {animation:suggestionModal .4s ease} .bc-alert-info a {color:#30bbdd;font-weight:700;padding:0 5px} /*gecis tod*/ .bc-page-login-wrapper { background-color: #030328; position: relative } .bc-login-right-bg { background-image: url(../images/_account/bg-desktop.png), linear-gradient(#080733, #221a27); background-repeat: no-repeat; background-position: right center; position: absolute; right: 0; top: 0; bottom: 0; height: 100%; width: 50%; background-size: contain; font-size:18px } .bc-login-container { width: 100%; max-width: 43%; } .bc-login-right-bg__texts { position: absolute; bottom: 15%; right: 0; left: 0; display: flex; flex-flow: column nowrap; align-items: center; gap: 3px; } .bc-login-right-bg__texts > span { font-weight: 800; font-stretch: normal; font-style: italic; line-height: normal; letter-spacing: -1.19px; color: #ffb61a; padding: .3em 1em; background-color: #000; font-size: 2em; animation-name: fadeAnim; animation-duration: 1s; animation-fill-mode:forwards } .bc-login-right-bg__texts > span + span{ animation-duration: 2s; } @keyframes fadeAnim { 0% {opacity:0;transform:scale(.9)} 100% {opacity:1;transform:scale(1)} } @keyframes slide { 0% {transform:translateX(-100%);} 100% {transform:translateX(100%);} } .bc-login-right-bg__texts > a { height: 56px; font-weight: bold; line-height: normal; letter-spacing: -0.5px; text-align: center; color: #000; background-color: #ffb61a; display: flex; text-decoration: none; min-width: 250px; align-items: center; justify-content: center; border-radius: 6px; transition: all .3s ease; margin-top: 20px; font-size: 16px; animation-name: fadeAnim; animation-duration: 3s; position: relative; overflow: hidden; } .bc-login-right-bg__texts > a:after { content: ''; top: 0; transform: translateX(100%); width: 100%; height: 220px; position: absolute; z-index: 1; animation: slide 1.5s 1 2s; background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(128,186,232,0) 99%, rgba(125,185,232,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.8)), color-stop(99%,rgba(128,186,232,0)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */ } .bc-login-right-bg__texts > a:hover { opacity: .8; transform:scale(.99) } .bc-login-container .bc-form-item { padding: 0; } .bc-login-container .mb-2 {margin-bottom:2rem} .bc-login-container > h1 { letter-spacing: -1.5px; color: #bebbba; font-weight: 700; line-height: 1.2; margin-bottom: 1rem; font-size:2.25em } .bc-login-container > h1 > span { color: #8f64cd; } /*.bc-login-container .bc-custom-checkbox .bc-custom-checkbox-input:checked + .bc-custom-checkbox-mask { background-color: #fff; background-image: url("../images/_account/icon-tick.png"); background-size: 15px 15px }*/ .bc-login-container .bc-custom-checkbox .bc-custom-checkbox-mask { width: 21px; height: 21px } .bc-login-container .login-info, .bc-login-container .bc-form .bc-form-item .bc-form-label, .bc-login-container .forgot-password, .bc-login-container .bc-custom-checkbox .label-text { color: #8b8f91 !important; } .bc-login-mobile { border-top: 1px solid #312940; padding:1rem; width:100%; height:130px; z-index:1002; } .bc-login-mobile h2 { color: #ddd; font-weight: bold; font-size:20px; margin-bottom:15px } .bc-login-container .bc-form-input { background: #fff; padding: 0.8rem 0.8rem; } @media screen and (max-width: 992px) { .bc-page-login-wrapper .bc-h-vp-full { padding-top: 5vw; padding-bottom: 5vw; } .bc-login-right-bg { background-image: url(../images/_account/bg-tablet.jpg), linear-gradient(#080733, #221a27); font-size:14px } .bc-login-container > h1 { font-size:2em } } @media screen and (max-width: 767px) { .bc-page-login-wrapper .bc-h-vp-full { flex-direction: column; padding: 0; } .bc-login-right-bg { width: 100%; background-position: top center; height: auto; position: relative; background-image: url(../images/_account/bg-mobile.png), linear-gradient(#080733, #221a27); background-size: cover; min-height: calc(100vh - var(--header-height) - 130px); font-size:12px } .bc-login-container { max-width:100%; padding:1rem; } .bc-login-right-bg__texts { display:none; bottom:0; padding:1rem } .bc-login-right-bg__texts > a { font-size:16px; width:100%; } } @media screen and (max-width: 360px) { .bc-login-right-bg { font-size:10px } } @media screen and (min-width: 768px) { .bc-login-container > h1 { white-space: nowrap } .bc-login-mobile { display: none } } /*gecis tod*/ @keyframes suggestionModal { 0% { opacity: 0; transform:scale(.8) } 100% { opacity: 1; transform: scale(1) } } @media screen and (max-width: 767px) { #bc-suggestionPack .modal {max-width:100%;padding:1rem} #bc-suggestionPack h2 {font-size:1.5rem} #bc-suggestionPack h3, #bc-suggestionPack h3>span {font-size:1rem} #bc-suggestionPack .footer .btn {font-size:14px} } /*Kupon koduna ba�l� �neri paketinin g�sterimi*/ .bmpui-container-wrapper > span.bmpui-ui-subtitle-label{ display:block !important } .bc-toast { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: fixed; bottom: 1rem; left: 50%; width: 100%; max-width: 726px; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #fff; font-size: 0.875rem; -webkit-animation: slideUp 0.2s ease; animation: slideUp 0.2s ease; z-index: 99; padding: 15px 16px 15px 23px; border-radius: 16px; font-size: 16px; font-weight: 600; font-stretch: normal; font-style: normal; line-height: 1.25; letter-spacing: -0.2px; box-shadow: 0 10px 30px 0 rgba(98, 195, 112, 0.5); background-color: var(--color-green); } .bc-toast.toast-body-success-wrapper { box-shadow: 0 10px 30px 0 rgba(98, 195, 112, 0.5); background-color: var(--color-green); z-index:10000; } .bc-toast.toast-body-warning-wrapper { box-shadow: 0 10px 30px 0 rgba(247, 140, 45, 0.5); background-color: #f78c2d; z-index:10000; } .bc-toast.toast-body-error-wrapper { box-shadow: 0 10px 30px 0 rgba(255, 0, 0, 0.5); background-color: var(--color-red); z-index:10000; } .bc-toast .toast-body { display: flex; align-items: center; } .bc-toast .toast-body > * + * { margin-left: 12px; } .bc-toast .btn { -ms-flex-negative: 0; flex-shrink: 0; padding: 13px; border-radius: 21px; } .bc-toast .toast-body > svg { -ms-flex-negative: 0; flex-shrink: 0; } .bc-toast.toast-body-success-wrapper .btn { background-color: var(--color-green-05); } .bc-toast.toast-body-warning-wrapper .btn { background-color: var(--color-orange-04); } .bc-toast.toast-body-error-wrapper .btn { background-color: var(--color-red-05); } .bc-toast .btn svg { vertical-align: top; } .grid-card-layout { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 15px; } @-webkit-keyframes slideUp { from { bottom: -100%; opacity: 0.5; } } @keyframes slideUp { from { bottom: -100%; opacity: 0.5; } } /*listeli cardlarda sagdan ve soldan yarim gosterme*/ @media screen and (min-width:1024px) { .swiper-container:is(.swiper-container-favourite, .swiper-container-comp, .swiper-container-kgw) { padding: 0 55px } .swiper-container:is(.swiper-container-favourite, .swiper-container-comp, .swiper-container-kgw):before, .swiper-container:is(.swiper-container-favourite, .swiper-container-comp, .swiper-container-kgw):after { content: ""; position: absolute; top: 0; height: 100%; background: #000000a8; width: 55px; z-index: 2 } .swiper-container:before { left: 0 } .swiper-container:after { right: 0 } .header-section h2 { padding: 15px 0 0 55px; } .bc-container-full { padding:0 70px } } @media screen and (min-width:1280px) { .bc-container-full { padding: 0 100px } .swiper-container:is(.swiper-container-favourite, .swiper-container-comp, .swiper-container-kgw) { padding: 0 85px } .header-section h2 { padding: 15px 0 0 85px; } .swiper-container:is(.swiper-container-favourite, .swiper-container-comp, .swiper-container-kgw):before, .swiper-container:is(.swiper-container-favourite, .swiper-container-comp, .swiper-container-kgw):after { width: 85px; } } .paramount-slider { background-color: #053175; padding-top: 32px; padding-bottom: 32px; position: relative; } .paramount-head-text { color: #d8d5d4; } .paramount-slider::before { content: ""; position: absolute; top: 0; right: 0; background-image: url(../../images/paramount/paramount-head.png); background-repeat: no-repeat; width: 50%; height: 100%; background-size: contain; } .paramount-slider-head { display: flex; justify-content: start; align-items: center; gap: 35px; position: relative; margin-bottom: 32px; } @media screen and (min-width: 1280px) { .paramount-slider-head { padding: 0 85px; } } .paramount-slider .card-item .info-container { background-color: #000a3d; } .paramount-bg { position: absolute; } .swiper-container:is(.swiper-container-favourite, .swiper-container-comp, .swiper-container-kgw):before, .swiper-container:is(.swiper-container-favourite, .swiper-container-comp, .swiper-container-kgw):after { background: transparent; } .paramount-detail { background-color: #030b3e !important; } .paramount-title-tr { color: #fff !important; } @media screen and (min-width: 1440px) { /** PARAMOUNT PAGE */ .paramount-container { padding-left: 99px !important; padding-right: 99px !important; } } @media screen and (min-width: 1024px) { .paramount-container { padding-left: 48px; padding-right: 48px; } } @media screen and (min-width: 768px) { .paramount-container { padding-left: 40px; padding-right: 40px; } } @media screen and (min-width: 480px) { .paramount-container { padding-left: 16px; padding-right: 16px; } } .paramount-content-head { display: flex; justify-content: start; align-items: center; padding-top: 52px; margin-bottom: 33px; } .paramount-container .info-container { background-color: #000a3d; } .paramount-container { position: relative; overflow-x: hidden; } .paramount-body-bg { position: absolute; right: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: end; opacity: .6; } .paramount-body-bg img { width: 100%; transform: translateX(613px); } @media screen and (max-width: 1600px) { .paramount-body-bg img { transform: translateX(518px); } } @media screen and (max-width: 1300px) { .paramount-body-bg img { transform: translateX(300px); } } @media screen and (max-width: 1024px) { .paramount-body-bg img { transform: translateX(300px) translateY(127px) } } @media screen and (min-width: 1024px) { .crunchyroll-head { padding: 0 55px; } } @media screen and (min-width: 1280px) { .crunchyroll-head { padding: 0 85px; } } .crunchyroll-head img { width: 192px; }