html[lang=ko] {
word-break: keep-all;
font-family: RixSGo, sans-serif
}
@-webkit-keyframes fade-in {
100% {
opacity: 1
}
}
@keyframes fade-in {
100% {
opacity: 1
}
}
@-webkit-keyframes reveal-down {
100% {
transform: translateY(0);
opacity: 1
}
}
@keyframes reveal-down {
100% {
transform: translateY(0);
opacity: 1
}
}
@-webkit-keyframes reveal-up {
100% {
transform: translateY(0);
opacity: 1
}
}
@keyframes reveal-up {
100% {
transform: translateY(0);
opacity: 1
}
}
@-webkit-keyframes mask-reveal-from-right {
0.1% {
opacity: 1
}
100% {
opacity: 1;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}
}
@keyframes mask-reveal-from-right {
0.1% {
opacity: 1
}
100% {
opacity: 1;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}
}
@-webkit-keyframes mask-hide-to-left {
100% {
-webkit-clip-path: polygon(0 0, .001% 0, .001% 100%, 0 100%);
clip-path: polygon(0 0, .001% 0, .001% 100%, 0 100%)
}
}
@keyframes mask-hide-to-left {
100% {
-webkit-clip-path: polygon(0 0, .001% 0, .001% 100%, 0 100%);
clip-path: polygon(0 0, .001% 0, .001% 100%, 0 100%)
}
}
@-webkit-keyframes mask-reveal-from-top {
0.1% {
opacity: 1
}
100% {
opacity: 1;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}
}
@keyframes mask-reveal-from-top {
0.1% {
opacity: 1
}
100% {
opacity: 1;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}
}
@-webkit-keyframes hero-mask-reveal-from-top {
0.1% {
opacity: 1
}
100% {
opacity: 1;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 30px));
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 30px))
}
}
@keyframes hero-mask-reveal-from-top {
0.1% {
opacity: 1
}
100% {
opacity: 1;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 30px));
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 30px))
}
}
@-webkit-keyframes page-header-mask-reveal-from-top {
0.1% {
opacity: 1
}
100% {
opacity: 1;
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 100%);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 100%)
}
}
@keyframes page-header-mask-reveal-from-top {
0.1% {
opacity: 1
}
100% {
opacity: 1;
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 100%);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 100%)
}
}
@-webkit-keyframes scale-down {
100% {
transform: scaleY(1);
opacity: 1
}
}
@keyframes scale-down {
100% {
transform: scaleY(1);
opacity: 1
}
}
@-webkit-keyframes watercolour-reveal {
0% {
opacity: 1;
-webkit-mask-position: 100% 0;
mask-position: 100% 0
}
100% {
opacity: 1;
-webkit-mask-position: 0 0;
mask-position: 0 0
}
}
@keyframes watercolour-reveal {
0% {
opacity: 1;
-webkit-mask-position: 100% 0;
mask-position: 100% 0
}
100% {
opacity: 1;
-webkit-mask-position: 0 0;
mask-position: 0 0
}
}
@-webkit-keyframes letter-spacing-reveal {
100% {
opacity: 1;
letter-spacing: -.03em
}
}
@keyframes letter-spacing-reveal {
100% {
opacity: 1;
letter-spacing: -.03em
}
}
@font-face {
font-family: ClassicGrotesqueW02;
src: url(/assets/font/classic-grotesque/1d0a2bea1bd63ba916f0349f94cdc0ab/16a6c882-93be-44df-91ef-cd2d1a4e1cf0.eot?#iefix);
src: url(/assets/font/classic-grotesque/1d0a2bea1bd63ba916f0349f94cdc0ab/16a6c882-93be-44df-91ef-cd2d1a4e1cf0.eot?#iefix) format('eot'), url(/assets/font/classic-grotesque/fdff8b8694a2414bcb3348805cf84a0b/8e2788cd-a785-455b-93cc-f5fb15402e9a.woff2) format('woff2'), url(/assets/font/classic-grotesque/d7cf4c46deb3c588e5de720be34efc17/fca9df38-1e22-4929-b74c-73c370864380.woff) format('woff'), url(/assets/font/classic-grotesque/4971c3581c552b22f36be6ac4c3b8973/898faaf4-7e3b-45ed-82a1-ddc4bafeb662.ttf) format('truetype'), url(/assets/font/classic-grotesque/068c3e2b5b7c78a3fc088e60120f3d9d/6dcd25d6-0bd1-424a-b256-106c8d6ccf95.svg#6dcd25d6-0bd1-424a-b256-106c8d6ccf95) format('svg');
font-style: normal;
font-weight: 400;
font-display: swap
}
@font-face {
font-family: ClassicGrotesqueW02;
src: url(/assets/font/classic-grotesque/5bea61fef7ff9f870a95ffe56825f0d5/494fe135-3539-4bcf-870d-83b50a6d5db5.eot?#iefix);
src: url(/assets/font/classic-grotesque/5bea61fef7ff9f870a95ffe56825f0d5/494fe135-3539-4bcf-870d-83b50a6d5db5.eot?#iefix) format('eot'), url(/assets/font/classic-grotesque/3e82e63b3a2fe3ce7903346ae6e8c0f7/432830ec-8265-4e04-afc8-23b5ee54b405.woff2) format('woff2'), url(/assets/font/classic-grotesque/81b2dbe532b43c4d67a3d5a07ecf2a02/d50748e0-d768-4a0b-a6f0-77e5cd97f829.woff) format('woff'), url(/assets/font/classic-grotesque/a102a866aa45b0e71f18fb1537d0c498/bdcaa8ac-96a2-4e54-ba5c-d8eb92088ce2.ttf) format('truetype'), url(/assets/font/classic-grotesque/ba5023de40cf7b233b8b2b44c95db3e2/69f14d1c-2667-49b8-800d-cc10dc31c5b4.svg#69f14d1c-2667-49b8-800d-cc10dc31c5b4) format('svg');
font-style: normal;
font-weight: 700;
font-display: swap
}
@font-face {
font-family: 'Eco Coding W02 WGL4';
src: url(/assets/font/eco-coding/3500f2d9b3703a6aba13c568d50ef3f6/b51e4ca9-2cfa-47d3-8081-91c35bc60525.eot?#iefix);
src: url(/assets/font/eco-coding/3500f2d9b3703a6aba13c568d50ef3f6/b51e4ca9-2cfa-47d3-8081-91c35bc60525.eot?#iefix) format('eot'), url(/assets/font/eco-coding/528d6f896b04896a5c76fb713c00aba2/3b868a50-4d05-4472-b3b0-135735a61967.woff2) format('woff2'), url(/assets/font/eco-coding/46c797b71e7d40e45b64d129dbdbeae1/9c5ad59d-3f77-47a7-a6ec-15d218fd6d2b.woff) format('woff'), url(/assets/font/eco-coding/45a2f34a2874f4fa1f80f31b3d91e482/c5f6e2eb-18ef-48fd-b323-699764bc954e.ttf) format('truetype'), url(/assets/font/eco-coding/feb50259da2dc50c61889fa13a1e07f9/d0400f06-ffff-4ac0-81d1-6525d1a52903.svg#d0400f06-ffff-4ac0-81d1-6525d1a52903) format('svg');
font-style: normal;
font-weight: 400;
font-display: swap
}
@font-face {
font-family: 'Eco Coding WGL4 W06 Regular';
src: url(/assets/font/eco-coding/027aa26299e9d31a6b04abf44ebcebc4/fcae666f-7193-44df-b880-ea75ff7c1b63.eot?#iefix);
src: url(/assets/font/eco-coding/027aa26299e9d31a6b04abf44ebcebc4/fcae666f-7193-44df-b880-ea75ff7c1b63.eot?#iefix) format('eot'), url(/assets/font/eco-coding/9bb1c1ba6768cf92b334350f7400ca90/de69253d-0fda-4aa0-ae87-e74632cef0ee.woff2) format('woff2'), url(/assets/font/eco-coding/7695aa86a83c9f34f23aa115fa6df029/5e5762bf-7892-4b0e-a9cc-bdc05dc8153d.woff) format('woff'), url(/assets/font/eco-coding/ffcc6a71600f12c9ea48013a0a17c9a0/9e9b1e5f-6459-445d-aa7d-d4259573af32.ttf) format('truetype'), url(/assets/font/eco-coding/9133f2d20e48a9c79f8d5a5dc5d952be/d88147ab-6a72-4188-8d1e-b6f09f26451a.svg#d88147ab-6a72-4188-8d1e-b6f09f26451a) format('svg');
font-style: normal;
font-weight: 400;
font-display: swap
}
@font-face {
font-family: 'Eco Coding W10 WGL4';
src: url(/assets/font/eco-coding/daa33ac901367847eaad327dc1299222/a90d92ae-bc39-4a7f-98c9-527ff50efb38.eot?#iefix);
src: url(/assets/font/eco-coding/daa33ac901367847eaad327dc1299222/a90d92ae-bc39-4a7f-98c9-527ff50efb38.eot?#iefix) format('eot'), url(/assets/font/eco-coding/db325112c1a4375d92e5d046c6d70694/10b0b593-72e9-4a75-aff9-72ced8deb941.woff2) format('woff2'), url(/assets/font/eco-coding/6690f6e31cce418859ac69e05b443edf/a2adba85-7049-4b6c-b19f-0c49f3c1d1c7.woff) format('woff'), url(/assets/font/eco-coding/145e801c8315754865acc609a16ad11e/eed3c193-6c70-4331-8c63-60f3a56a2bc5.ttf) format('truetype'), url(/assets/font/eco-coding/19a3f5c0a9499f9f09ae7db7a38f6a9e/a8236e2b-f206-465c-b747-6fef0911db83.svg#a8236e2b-f206-465c-b747-6fef0911db83) format('svg');
font-style: normal;
font-weight: 400;
font-display: swap
}
@font-face {
font-family: 'Eco Coding WGL4 W15 Regular';
src: url(/assets/font/eco-coding/04e5c432767f63ea777556eadee368b3/5560b170-286a-4151-96df-e26b86c2c0ff.eot?#iefix);
src: url(/assets/font/eco-coding/04e5c432767f63ea777556eadee368b3/5560b170-286a-4151-96df-e26b86c2c0ff.eot?#iefix) format('eot'), url(/assets/font/eco-coding/0522c8204d21475726f6699d10e45c60/e5c4ec5e-baea-46a1-bddc-7854c35d3f99.woff2) format('woff2'), url(/assets/font/eco-coding/3e6b8534345de1cd611d176b7d85df4e/f9406b66-62bd-4081-bf78-d0cbcf866d96.woff) format('woff'), url(/assets/font/eco-coding/df3b14df210722e934bc2e8dbd331415/2b34b2e7-2ae7-44da-be4f-494fd7f3ca56.ttf) format('truetype'), url(/assets/font/eco-coding/2d08a56bc4e2c78ccc9bb419e1337bec/d297a7fe-a769-481b-99cc-eb9e79cfa13d.svg#d297a7fe-a769-481b-99cc-eb9e79cfa13d) format('svg');
font-style: normal;
font-weight: 400;
font-display: swap
}
@font-face {
font-family: 'Proxima Nova W02';
src: url(/assets/font/proxima-nova/18502808b5ce1a7e9f43ecfc47fc9610/b9234758-e038-4622-b531-1e89eef11dc8.eot?#iefix);
src: url(/assets/font/proxima-nova/18502808b5ce1a7e9f43ecfc47fc9610/b9234758-e038-4622-b531-1e89eef11dc8.eot?#iefix) format('eot'), url(/assets/font/proxima-nova/8862912f49452e5892aa670c4c32ba42/301b29be-a6b5-467a-ba10-926b40436a87.woff2) format('woff2'), url(/assets/font/proxima-nova/d2fb46419a6ce547693ecc7d53ad906b/a01242ac-07ee-44eb-97b4-3f6df729e51a.woff) format('woff'), url(/assets/font/proxima-nova/7dfa7467ba75dddd3a87304dfc45fc5b/713e8042-cdd9-4f87-b79b-59bb8e43daca.ttf) format('truetype'), url(/assets/font/proxima-nova/fdee91d76606679cd158f45a749036d7/b39f961b-4c68-4114-8a71-76bfe004cf14.svg#b39f961b-4c68-4114-8a71-76bfe004cf14) format('svg');
font-style: normal;
font-weight: 700;
font-display: swap
}
@font-face {
font-family: 'Proxima Nova W10';
src: url(/assets/font/proxima-nova/7d02986c711e8a17b7831d62ba9523bf/a4999e3a-aee7-4d8f-941d-42cfacb06ad1.eot?#iefix);
src: url(/assets/font/proxima-nova/7d02986c711e8a17b7831d62ba9523bf/a4999e3a-aee7-4d8f-941d-42cfacb06ad1.eot?#iefix) format('eot'), url(/assets/font/proxima-nova/04c3897a10f873eb65c471e19207d2d9/900734c7-277f-466b-a32d-2e89b6bb4c0c.woff2) format('woff2'), url(/assets/font/proxima-nova/fd226c117b02c91def299b70bfe01708/967e80a8-e866-45db-a45b-46bd5a5cd901.woff) format('woff'), url(/assets/font/proxima-nova/26778c08c5bf4ef2b7327e507ca4d337/5941dac3-8a82-4fe3-af6e-38921cbc0d86.ttf) format('truetype'), url(/assets/font/proxima-nova/98fbd39349274bd07a4da98056098264/831e7b75-679b-4120-ae9e-d4ea9b0b919c.svg#831e7b75-679b-4120-ae9e-d4ea9b0b919c) format('svg');
font-style: normal;
font-weight: 700;
font-display: swap
}
@font-face {
font-family: 'Proxima Nova W15';
src: url(/assets/font/proxima-nova/a8714a8aca127848ba2c4bf2bdff8482/9682bb7d-efd6-4254-8771-e146c89a72d4.eot?#iefix);
src: url(/assets/font/proxima-nova/a8714a8aca127848ba2c4bf2bdff8482/9682bb7d-efd6-4254-8771-e146c89a72d4.eot?#iefix) format('eot'), url(/assets/font/proxima-nova/e4973c2e22b53d68cb751de8656a43cd/4db8e0c6-4c06-45f0-a821-ec66fa7bf2f3.woff2) format('woff2'), url(/assets/font/proxima-nova/8321934ce881c0051aba3af99f554094/a3a867b8-141c-4865-9f8d-6dc5766a6bc5.woff) format('woff'), url(/assets/font/proxima-nova/0774cb1c1d4f2c52b2cae2f717bcbcde/b9d6d5ca-ba9b-4fa1-a81e-366891676e4a.ttf) format('truetype'), url(/assets/font/proxima-nova/f937c2699ba1c9d8d09b083d257b83ff/844c48e5-7a2b-488b-9e47-ff8dda98e5e2.svg#844c48e5-7a2b-488b-9e47-ff8dda98e5e2) format('svg');
font-style: normal;
font-weight: 700;
font-display: swap
}
@font-face {
font-family: 'Proxima Nova W02';
src: url(/assets/font/proxima-nova/a5ae9c23f76fca032007e94a41caff4e/98efc59a-892b-4055-a50c-3a62f5f46e88.eot?#iefix);
src: url(/assets/font/proxima-nova/a5ae9c23f76fca032007e94a41caff4e/98efc59a-892b-4055-a50c-3a62f5f46e88.eot?#iefix) format('eot'), url(/assets/font/proxima-nova/55afc74d43e4a996097c0e7262f2261a/fc89076c-e531-4a6c-a0a0-cb26387f4260.woff2) format('woff2'), url(/assets/font/proxima-nova/d1e7295b88c9e0ae33bfc3aa4baee4f8/0333c78e-0245-4dd1-91f0-95e76486e4fe.woff) format('woff'), url(/assets/font/proxima-nova/aaede7da801a9cfa92d770e821c182de/075af3d9-ba60-4f41-8fa1-fc89feed423d.ttf) format('truetype'), url(/assets/font/proxima-nova/fad19351dca53650813252b9744d3ff5/7eec8f01-73b9-4a88-a52d-6e36ef34ccec.svg#7eec8f01-73b9-4a88-a52d-6e36ef34ccec) format('svg');
font-style: normal;
font-weight: 800;
font-display: swap
}
@font-face {
font-family: 'Proxima Nova W10';
src: url(/assets/font/proxima-nova/775d3c6e51c64072d3933ea6fc0f0197/480c441c-5f2f-4323-b02f-7bc606cb8826.eot?#iefix);
src: url(/assets/font/proxima-nova/775d3c6e51c64072d3933ea6fc0f0197/480c441c-5f2f-4323-b02f-7bc606cb8826.eot?#iefix) format('eot'), url(/assets/font/proxima-nova/5ec344a7b48ec237f39b3a95d2b140c5/f95555b7-26d6-4e09-8c69-eb3e3a865b27.woff2) format('woff2'), url(/assets/font/proxima-nova/e63e3387b56c53dfa68a275d77d87c62/4650234f-c266-4528-a258-6b8343d23110.woff) format('woff'), url(/assets/font/proxima-nova/a42f9196cf6c2fa7991cb09f610fb8b8/2863c141-0354-4869-bef4-8ca7d60e6828.ttf) format('truetype'), url(/assets/font/proxima-nova/b0b85c8dbf9a37ffecd75acd0e9917ee/d7cad8f0-5565-4736-ade8-47002789b8ab.svg#d7cad8f0-5565-4736-ade8-47002789b8ab) format('svg');
font-style: normal;
font-weight: 800;
font-display: swap
}
@font-face {
font-family: 'Proxima Nova W15';
src: url(/assets/font/proxima-nova/176ba252745e66137405f6dbd25b6102/cb5f0f95-1865-4557-ae6b-0e9ccc2ed381.eot?#iefix);
src: url(/assets/font/proxima-nova/176ba252745e66137405f6dbd25b6102/cb5f0f95-1865-4557-ae6b-0e9ccc2ed381.eot?#iefix) format('eot'), url(/assets/font/proxima-nova/e456887ad6d4360b3dcf47d03b9d2c0f/e1b82715-19b5-4f45-a0e8-d3edf4ad52dc.woff2) format('woff2'), url(/assets/font/proxima-nova/1bcb543b7b8f526d4f53ec20a6a0d2d0/eb0161c8-594e-41a7-8f41-4c3f9b822f92.woff) format('woff'), url(/assets/font/proxima-nova/3d88ef10ce390d0b89bafcab1dbcc988/4ecc8dd1-2bf7-4ff5-a850-0cbd5be239b3.ttf) format('truetype'), url(/assets/font/proxima-nova/30bcfbea027703d4c9413690803e6f24/766f394e-b73a-44e2-816e-1da61c8550b5.svg#766f394e-b73a-44e2-816e-1da61c8550b5) format('svg');
font-style: normal;
font-weight: 800;
font-display: swap
}
@font-face {
font-family: 'Proxima Nova W02';
src: url(/assets/font/proxima-nova/2cc8f586bd43b00bc7bd0a38d3386a1e/9e87ad7f-6820-4b24-82f0-00f80e23b088.eot?#iefix);
src: url(/assets/font/proxima-nova/2cc8f586bd43b00bc7bd0a38d3386a1e/9e87ad7f-6820-4b24-82f0-00f80e23b088.eot?#iefix) format('eot'), url(/assets/font/proxima-nova/5483b77cea9aa119ad1741c5163b68cd/301904b9-fe52-494e-aeca-bb946a866993.woff2) format('woff2'), url(/assets/font/proxima-nova/3d43eaf5368842962012f834aa65e856/ab408b66-5692-4473-b167-5819ca620b83.woff) format('woff'), url(/assets/font/proxima-nova/39480fcfa9011a97621c77e2a34c0924/19260682-1047-465b-b29b-66c48ea2e00e.ttf) format('truetype'), url(/assets/font/proxima-nova/947a2ee3ebdb84ccf307d66b1b27e5d0/3943e845-1e8d-442c-b4fd-222b664b7e35.svg#3943e845-1e8d-442c-b4fd-222b664b7e35) format('svg');
font-style: normal;
font-weight: 900;
font-display: swap
}
@font-face {
font-family: 'Proxima Nova W10';
src: url(/assets/font/proxima-nova/ab0b34698bc2a1fbc7feead6fa6a9ef5/bae820bd-8b83-4810-b1e3-ab842b18bfc5.eot?#iefix);
src: url(/assets/font/proxima-nova/ab0b34698bc2a1fbc7feead6fa6a9ef5/bae820bd-8b83-4810-b1e3-ab842b18bfc5.eot?#iefix) format('eot'), url(/assets/font/proxima-nova/f94d8d1136e619b3729bda9c9c101d81/f8dc2e19-43a0-4292-bb9d-08d2e1aaebea.woff2) format('woff2'), url(/assets/font/proxima-nova/42137fb8e5f883866646ba010dbb6b16/cce1b3ec-391c-4fb5-8860-0078520df4f9.woff) format('woff'), url(/assets/font/proxima-nova/ceeac06b342abc02eb7ad252fed260dc/cabd45bd-b900-4e58-bf0e-aac9a6efe9b4.ttf) format('truetype'), url(/assets/font/proxima-nova/e2d9fce6b279ae0abc6d94c3933e0aa7/7804a64b-4073-4ee3-adfb-d314a3c8a6ed.svg#7804a64b-4073-4ee3-adfb-d314a3c8a6ed) format('svg');
font-style: normal;
font-weight: 900;
font-display: swap
}
@font-face {
font-family: 'Proxima Nova W15';
src: url(/assets/font/proxima-nova/728bd2b126a76afa9f9a6f0246457a4d/40b18343-f287-42bc-a93d-3d2ce419f8e4.eot?#iefix);
src: url(/assets/font/proxima-nova/728bd2b126a76afa9f9a6f0246457a4d/40b18343-f287-42bc-a93d-3d2ce419f8e4.eot?#iefix) format('eot'), url(/assets/font/proxima-nova/3e67546159fd47e33d4e6dbefec4d6e8/ec8959f9-c0db-4eff-84e6-0a6c546d43a4.woff2) format('woff2'), url(/assets/font/proxima-nova/2c98c6e830d40c016387cc3790e8e52b/e33f2c3e-1652-4366-a060-49534a5c9cc7.woff) format('woff'), url(/assets/font/proxima-nova/21dd900da4e46a287eebe3406406b943/a61b629e-6ed5-4647-8f5b-7479d1ae9ddb.ttf) format('truetype'), url(/assets/font/proxima-nova/9a5bd5559ab22dd8c31e1ba8cbe3a2c4/43852b29-fe22-4990-89f2-9a0040038171.svg#43852b29-fe22-4990-89f2-9a0040038171) format('svg');
font-style: normal;
font-weight: 900;
font-display: swap
}
@font-face {
font-family: RixSGo;
src: url(/assets/font/rixsgo/efea508e6f3502782e06e182465a4fdf/RixSGoEB.eot?#iefix);
src: url(/assets/font/rixsgo/efea508e6f3502782e06e182465a4fdf/RixSGoEB.eot?#iefix) format('eot'), url(/assets/font/rixsgo/24d7d82e6475705b170b4f9eeaa38b46/RixSGoEB.woff) format('woff');
font-style: normal;
font-weight: 700;
font-display: swap
}
@font-face {
font-family: RixSGo;
src: url(/assets/font/rixsgo/87051ef823349029ecd51d7b00ac05e0/RixSGoB.eot?#iefix);
src: url(/assets/font/rixsgo/87051ef823349029ecd51d7b00ac05e0/RixSGoB.eot?#iefix) format('eot'), url(/assets/font/rixsgo/eb51f3900b913c07ace88dfe7504cd82/RixSGoB.woff2) format('woff2'), url(/assets/font/rixsgo/382c47f17b26a873785d927648032f38/RixSGoB.woff) format('woff'), url(/assets/font/rixsgo/896edd7bf5c963886933b686a741c825/RixSGoB.svg#RixSGoB) format('svg');
font-style: normal;
font-weight: 400;
font-display: swap
}
@font-face {
font-family: RixSGo;
src: url(/assets/font/rixsgo/a9d0f1670410751731529b7b3e5388c9/RixSGoM.eot?#iefix);
src: url(/assets/font/rixsgo/a9d0f1670410751731529b7b3e5388c9/RixSGoM.eot?#iefix) format('eot'), url(/assets/font/rixsgo/484080a3a9a11c8360443c18bfc209f8/RixSGoM.woff2) format('woff2'), url(/assets/font/rixsgo/3b9d3be61a948281205bd820d09fec23/RixSGoM.woff) format('woff'), url(/assets/font/rixsgo/936c22029449fa7c1cdbf724db8a2f00/RixSGoM.svg#RixSGoM) format('svg');
font-style: normal;
font-weight: 300;
font-display: swap
}
@font-face {
font-family: 'Mark Pro';
src: url(/assets/font/mark-pro/3391bdd524cb9518c071fde2140f8ceb/mark-pro--regular.woff2) format('woff2'), url(/assets/font/mark-pro/41d2c0a9832206d3ff07dd01412c3eb3/mark-pro--regular.woff) format('woff');
font-style: normal;
font-weight: 400;
font-display: swap
}
@font-face {
font-family: 'Mark Pro';
src: url(/assets/font/mark-pro/51550598c78023cf86846f6e2f7f0d88/mark-pro--bold.woff) format('woff');
font-style: normal;
font-weight: 700;
font-display: swap
}
@font-face {
font-family: 'Mark Pro';
src: url(/assets/font/mark-pro/e38a5f193f7759080063bd6a30c11786/mark-pro--heavy.woff2) format('woff2'), url(/assets/font/mark-pro/ba6eb5756c08031b98ff748aea68b83f/mark-pro--heavy.woff) format('woff');
font-style: normal;
font-weight: 800;
font-display: swap
}
@font-face {
font-family: 'Mark Pro';
src: url(/assets/font/mark-pro/5e7fd92c0215adf4d44ceb061425f05e/mark-pro--medium.woff2) format('woff2'), url(/assets/font/mark-pro/de9c2a79821cdae65741aa9f61f35201/mark-pro--medium.woff) format('woff');
font-style: normal;
font-weight: 600;
font-display: swap
}
@font-face {
font-family: 'Riot Sans';
src: url(/assets/font/riot-sans/2d3bae9f9ee532de82e2b333db0f4918/RiotSans-Bold.woff2) format('woff2');
font-style: normal;
font-weight: 700;
font-display: swap
}
@font-face {
font-family: 'Riot Sans';
src: url(/assets/font/riot-sans/c8dfed42f1a5c908d9e82fb6b6bc11d7/RiotSans-Regular.woff2) format('woff2');
font-style: normal;
font-weight: 400;
font-display: swap
}
@font-face {
font-family: 'Inter V';
src: url(/assets/font/inter-v/1c393196fa220d25e2137f0e758bab9a/Inter-V.woff2) format('woff2');
font-style: normal;
font-display: swap
}
@font-face {
font-family: 'Riot Sans Latin';
src: url(/assets/font/riot-sans/latin/d1846f4a4c3c6ac829aa451cf0dbbc83/RiotSans-Regular.woff2) format('woff2');
font-style: normal;
font-weight: 400;
font-display: swap
}
@font-face {
font-family: 'Riot Sans Latin';
src: url(/assets/font/riot-sans/latin/e957f09605fcd39d5d579de63c47a7ca/RiotSans-Bold.woff2) format('woff2');
font-style: normal;
font-weight: 700;
font-display: swap
}
@font-face {
font-family: 'Inter V Latin';
src: url(/assets/font/inter-v/latin/c5ea62dad69425af26b34aa46594219a/Inter-Light.woff2) format('woff2');
font-style: normal;
font-weight: 300;
font-display: swap
}
@font-face {
font-family: 'Inter V Latin';
src: url(/assets/font/inter-v/latin/dc131113894217b5031000575d9de002/Inter-Regular.woff2) format('woff2');
font-style: normal;
font-weight: 400;
font-display: swap
}
@font-face {
font-family: 'Inter V Latin';
src: url(/assets/font/inter-v/latin/c5def91baa5e1b546aac64e0bf01dd72/Inter-Medium.woff2) format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap
}
@font-face {
font-family: 'Inter V Latin';
src: url(/assets/font/inter-v/latin/6bf627e6b612c4180630d975ec12ad09/Inter-SemiBold.woff2) format('woff2');
font-style: normal;
font-weight: 600;
font-display: swap
}
@font-face {
font-family: 'Inter V Latin';
src: url(/assets/font/inter-v/latin/179a878ed31d2edb1dd04fa364c73ddc/Inter-Bold.woff2) format('woff2');
font-style: normal;
font-weight: 700;
font-display: swap
}
@font-face {
font-family: 'Inter V Latin';
src: url(/assets/font/inter-v/latin/0d16cfe85b5d9ec85fb981d0e070d198/Inter-ExtraBold.woff2) format('woff2');
font-style: normal;
font-weight: 800;
font-display: swap
}
@font-face {
font-family: 'Inter V Latin';
src: url(/assets/font/inter-v/latin/dad3b6635dd61f7ffe9cbfd95c952846/Inter-Black.woff2) format('woff2');
font-style: normal;
font-weight: 900;
font-display: swap
}
@font-face {
font-family: 'Riot Sans Korean';
src: url(/assets/font/riot-sans/ko/1124c273ee2348c43ce4b6eb640d9c66/RiotSansKR-Regular.woff2) format('woff2');
font-style: normal;
font-weight: 400;
font-display: swap
}
@font-face {
font-family: 'Riot Sans Korean';
src: url(/assets/font/riot-sans/ko/d9febf5867e6b22668f094781a3359bd/RiotSansKR-Bold.woff2) format('woff2');
font-style: normal;
font-weight: 700;
font-display: swap
}
@font-face {
font-family: 'Noto Sans Korean';
src: url(/assets/font/noto-sans/ko/7007ec2825370ea0f22ff15919f85c32/NotoSansKR-Regular.woff2) format('woff2');
font-style: normal;
font-display: swap
}
@font-face {
font-family: 'Riot Sans Thai';
src: url(/assets/font/riot-sans/th/6fad80c560251f758531108df3790a73/RiotSansTH-Regular.woff2) format('woff2');
font-style: normal;
font-weight: 400;
font-display: swap
}
@font-face {
font-family: 'Riot Sans Thai';
src: url(/assets/font/riot-sans/th/3775c96fd925e79d52348fa3b9abbdd6/RiotSansTH-Bold.woff2) format('woff2');
font-style: normal;
font-weight: 700;
font-display: swap
}
@font-face {
font-family: 'Noto Sans Thai';
src: url(/assets/font/noto-sans/th/15014a3ca752a8d3344a3605448a4fe8/NotoSansThai-Regular.woff2) format('woff2');
font-style: normal;
font-display: swap
}
@font-face {
font-family: 'Riot Sans SC';
src: url(/assets/font/riot-sans/cn/e475b0f5d275601d51d3d77fb69bc22a/RiotSansSC-Regular.woff2) format('woff2');
font-style: normal;
font-weight: 400;
font-display: swap
}
@font-face {
font-family: 'Riot Sans SC';
src: url(/assets/font/riot-sans/cn/5c78b5405daa6d73d8fadd44004d1173/RiotSansSC-Bold.woff2) format('woff2');
font-style: normal;
font-weight: 700;
font-display: swap
}
@font-face {
font-family: 'Noto Sans SC';
src: url(/assets/font/noto-sans/cn/ea3c714cff4231924506cc2aa6b2a493/NotoSerifTC-Regular.woff2) format('woff2');
font-style: normal;
font-display: swap
}
@font-face {
font-family: 'Riot Sans JP';
src: url(/assets/font/riot-sans/jp/aade8455f00598ac1e9c33e8e3334995/RiotSansJP-Regular.woff2) format('woff2');
font-style: normal;
font-weight: 400;
font-display: swap
}
@font-face {
font-family: 'Riot Sans JP';
src: url(/assets/font/riot-sans/jp/709bd9c7fc95b56d9cb5e434f5f8ad82/RiotSansJP-Bold.woff2) format('woff2');
font-style: normal;
font-weight: 700;
font-display: swap
}
@font-face {
font-family: 'Noto Sans JP';
src: url(/assets/font/noto-sans/jp/ed5a0bc850b732dcd96028e56c0c4a15/NotoSansJP-Regular.woff2) format('woff2');
font-style: normal;
font-display: swap
}
@font-face {
font-family: 'Riot Sans AR';
src: url(/assets/font/riot-sans/ar/dc41f2e130470a9a6a39410de1ea7426/RiotSansAR-Regular.woff2) format('woff2');
font-style: normal;
font-weight: 400;
font-display: swap
}
@font-face {
font-family: 'Riot Sans AR';
src: url(/assets/font/riot-sans/ar/fc6f150789b249477e26f364685a25c7/RiotSansAR-Bold.woff2) format('woff2');
font-style: normal;
font-weight: 700;
font-display: swap
}
@font-face {
font-family: 'Noto Sans AR';
src: url(/assets/font/noto-sans/ar/NotoSerifAR-Regular.woff2) format('woff2');
font-style: normal;
font-display: swap
}
*,
:after,
:before {
box-sizing: border-box
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
margin: 0;
padding: 0
}
address,
blockquote,
body,
button,
code,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
html,
input,
legend,
li,
ol,
p,
pre,
table,
td,
textarea,
th,
ul {
margin: 0;
padding: 0
}
html {
scroll-behavior: smooth;
scroll-padding-top: 90px
}
body {
background-color: #252423
}
li {
list-style-position: outside;
margin-left: 2em
}
li ol,
li ul {
margin-bottom: 0
}
ul>li {
list-style-type: disc
}
ul>li ul>li {
list-style-type: circle
}
ol>li {
list-style-type: decimal
}
ol>li ol>li {
list-style-type: lower-roman
}
nav ol,
nav ul {
margin-bottom: 0
}
nav li {
list-style: none;
margin-left: 0
}
img,
object {
vertical-align: bottom;
border: 0
}
img {
max-width: 100%;
width: auto;
height: auto
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline
}
audio:not([controls]) {
display: none;
height: 0
}
svg:not(:root) {
overflow: hidden
}
iframe {
border: 0
}
pre code {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch
}
label {
display: block
}
input[type=reset],
input[type=search]::-webkit-search-decoration,
input[type=submit] {
-webkit-appearance: none
}
input::-moz-focus-inner {
border: 0;
padding: 0
}
button {
cursor: pointer;
font-family: inherit;
border-radius: 0
}
button::-moz-focus-inner {
border: 0;
padding: 0
}
hr {
display: block;
height: 1px;
width: 100%;
border: 0;
background-color: #2b2a29
}
::-moz-selection {
color: #e7e6e3;
background: #d1363a;
text-shadow: none
}
::selection {
color: #e7e6e3;
background: #d1363a;
text-shadow: none
}
html {
font-size: 16px;
line-height: 1.5;
color: #e7e6e3;
font-weight: 400;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
font-size: 1em;
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
[lang=cs_CZ] body,
[lang=hu_HU] body,
[lang=pl_PL] body,
[lang=tr_tr] body,
[lang=vi_vi] body,
html[lang=cs] body,
html[lang=hu] body,
html[lang=pl] body,
html[lang=tr] body,
html[lang=vi] body {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] body,
html[lang=ko] body {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] body,
html[lang=th] body {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] body,
html[lang=ja] body {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] body,
[lang=zh-hant] body,
html[lang=zh-cn] body,
html[lang=zh-hant] body {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Riot Sans Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-weight: 700;
font-size: inherit;
line-height: inherit
}
[lang=cs_CZ] h1,
[lang=cs_CZ] h2,
[lang=cs_CZ] h3,
[lang=cs_CZ] h4,
[lang=cs_CZ] h5,
[lang=cs_CZ] h6,
[lang=hu_HU] h1,
[lang=hu_HU] h2,
[lang=hu_HU] h3,
[lang=hu_HU] h4,
[lang=hu_HU] h5,
[lang=hu_HU] h6,
[lang=pl_PL] h1,
[lang=pl_PL] h2,
[lang=pl_PL] h3,
[lang=pl_PL] h4,
[lang=pl_PL] h5,
[lang=pl_PL] h6,
[lang=tr_tr] h1,
[lang=tr_tr] h2,
[lang=tr_tr] h3,
[lang=tr_tr] h4,
[lang=tr_tr] h5,
[lang=tr_tr] h6,
[lang=vi_vi] h1,
[lang=vi_vi] h2,
[lang=vi_vi] h3,
[lang=vi_vi] h4,
[lang=vi_vi] h5,
[lang=vi_vi] h6,
html[lang=cs] h1,
html[lang=cs] h2,
html[lang=cs] h3,
html[lang=cs] h4,
html[lang=cs] h5,
html[lang=cs] h6,
html[lang=hu] h1,
html[lang=hu] h2,
html[lang=hu] h3,
html[lang=hu] h4,
html[lang=hu] h5,
html[lang=hu] h6,
html[lang=pl] h1,
html[lang=pl] h2,
html[lang=pl] h3,
html[lang=pl] h4,
html[lang=pl] h5,
html[lang=pl] h6,
html[lang=tr] h1,
html[lang=tr] h2,
html[lang=tr] h3,
html[lang=tr] h4,
html[lang=tr] h5,
html[lang=tr] h6,
html[lang=vi] h1,
html[lang=vi] h2,
html[lang=vi] h3,
html[lang=vi] h4,
html[lang=vi] h5,
html[lang=vi] h6 {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] h1,
[lang=ko_ko] h2,
[lang=ko_ko] h3,
[lang=ko_ko] h4,
[lang=ko_ko] h5,
[lang=ko_ko] h6,
html[lang=ko] h1,
html[lang=ko] h2,
html[lang=ko] h3,
html[lang=ko] h4,
html[lang=ko] h5,
html[lang=ko] h6 {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] h1,
[lang=th_th] h2,
[lang=th_th] h3,
[lang=th_th] h4,
[lang=th_th] h5,
[lang=th_th] h6,
html[lang=th] h1,
html[lang=th] h2,
html[lang=th] h3,
html[lang=th] h4,
html[lang=th] h5,
html[lang=th] h6 {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] h1,
[lang=ja] h2,
[lang=ja] h3,
[lang=ja] h4,
[lang=ja] h5,
[lang=ja] h6,
html[lang=ja] h1,
html[lang=ja] h2,
html[lang=ja] h3,
html[lang=ja] h4,
html[lang=ja] h5,
html[lang=ja] h6 {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] h1,
[lang=zh-cn] h2,
[lang=zh-cn] h3,
[lang=zh-cn] h4,
[lang=zh-cn] h5,
[lang=zh-cn] h6,
[lang=zh-hant] h1,
[lang=zh-hant] h2,
[lang=zh-hant] h3,
[lang=zh-hant] h4,
[lang=zh-hant] h5,
[lang=zh-hant] h6,
html[lang=zh-cn] h1,
html[lang=zh-cn] h2,
html[lang=zh-cn] h3,
html[lang=zh-cn] h4,
html[lang=zh-cn] h5,
html[lang=zh-cn] h6,
html[lang=zh-hant] h1,
html[lang=zh-hant] h2,
html[lang=zh-hant] h3,
html[lang=zh-hant] h4,
html[lang=zh-hant] h5,
html[lang=zh-hant] h6 {
font-family: 'Riot Sans CN', sans-serif
}
.text-button,
a {
color: #d1363a;
text-decoration: none
}
.text-button:focus,
.text-button:hover,
a:focus,
a:hover {
color: #2b2a29;
outline: 0;
text-decoration: underline
}
.text-button:active,
a:active {
color: #2b2a29
}
blockquote,
cite,
dfn,
em,
i,
q,
var {
font-style: italic
}
b,
dt,
strong,
th {
font-weight: 700
}
blockquote p:after,
blockquote p:before,
q:after,
q:before {
content: ''
}
blockquote p {
font-size: 1.5em;
margin-bottom: 0
}
ins {
text-decoration: none;
border-bottom: 3px double
}
del,
s {
text-decoration: line-through
}
mark {
background-color: #29ffa3;
color: #2b2a29;
margin-left: -2px;
margin-right: -2px;
padding-left: 2px;
padding-right: 2px
}
code,
kbd,
pre,
samp {
font-family: Monaco, monospace;
font-size: .9em
}
address {
font-style: normal
}
abbr[title] {
border-bottom: 1px dotted;
text-decoration: none
}
small {
font-size: inherit
}
sub,
sup {
position: relative;
font-size: .75em;
line-height: 0;
vertical-align: baseline
}
sup {
top: -.5em
}
sub {
bottom: -.25em
}
.content-center {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 1440px
}
.content-center:after,
.content-center:before {
content: "";
display: table
}
.content-center:after {
clear: both
}
.content-center--no-clearfix:after,
.content-center--no-clearfix:before {
content: none
}
.content-center--4-12 {
max-width: 466.667px
}
.content-center--6-12 {
max-width: 710px
}
.content-center--6-12-reverse-gutter {
max-width: 670px
}
@media screen and (min-width:550px) {
.content-center--6-12-reverse-gutter {
max-width: 630px
}
}
.content-center--8-12 {
max-width: 1440px
}
.content-center--8-12-reverse-gutter {
max-width: 913.333px
}
@media screen and (min-width:550px) {
.content-center--8-12-reverse-gutter {
max-width: 873.333px
}
}
.content-center--10-12 {
max-width: 1196.667px
}
.content-center--large {
max-width: 1890px;
margin-left: auto !important;
margin-right: auto !important
}
.content-center--xlarge {
max-width: 1920px;
margin-left: auto !important;
margin-right: auto !important
}
.content-center--xxlarge {
max-width: 2560px;
margin-left: auto !important;
margin-right: auto !important
}
.content-gutter {
padding-left: 20px;
padding-right: 20px
}
@media screen and (min-width:550px) {
.content-gutter {
padding-left: 40px;
padding-right: 40px
}
}
@media screen and (min-width:550px) {
.content-gutter--tablet {
padding-left: 40px;
padding-right: 40px
}
}
@media screen and (min-width:960px) {
.content-gutter--desktop {
padding-left: 40px;
padding-right: 40px
}
}
@media screen and (min-width:960px) {
.content-gutter--not-desktop {
padding-left: 0;
padding-right: 0
}
}
.content-gutter--large {
padding-left: 20px;
padding-right: 20px
}
@media screen and (min-width:960px) {
.content-gutter--large {
padding-left: 40px;
padding-right: 40px
}
}
@media screen and (min-width:1280px) {
.content-gutter--large {
padding-left: 80px;
padding-right: 80px
}
}
.content-right {
margin-right: 0;
margin-left: auto;
width: 100%;
max-width: 1440px
}
@media screen and (min-width:960px) {
.content-right--small-desktop {
margin-left: 150px
}
}
@media screen and (min-width:1640px) {
.content-right--small-desktop {
margin: auto
}
}
.control-wrap {
display: table;
width: auto
}
.control-wrap--full-width {
width: 100%
}
.control-wrap__item {
display: table-cell;
vertical-align: top
}
.control-wrap--vertical-middle .control-wrap__item {
vertical-align: middle
}
.control-wrap__item--shrink {
width: 1px
}
.has-drop-cap>p:first-of-type:first-letter {
font-size: 30px;
float: left;
display: block;
padding: 0 20px;
height: 60px;
line-height: 60px;
margin-right: 15px;
margin-top: 5px;
color: #e7e6e3;
background: #d1363a;
background-image: url(/assets/img/structure/939db09e5391a2ed948ed0b3db2adb26/texture-white-dots.png), url(/assets/img/content/c2f329a2ea48bb95f64a722d812ee80f/boom.png);
background-repeat: repeat;
background-position: 50% 50%, 0 30%;
background-size: auto auto, 80px 80px;
font-family: 'Riot Sans Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-weight: 800
}
[lang=cs_CZ] .has-drop-cap>p:first-of-type:first-letter,
[lang=hu_HU] .has-drop-cap>p:first-of-type:first-letter,
[lang=pl_PL] .has-drop-cap>p:first-of-type:first-letter,
[lang=tr_tr] .has-drop-cap>p:first-of-type:first-letter,
[lang=vi_vi] .has-drop-cap>p:first-of-type:first-letter,
html[lang=cs] .has-drop-cap>p:first-of-type:first-letter,
html[lang=hu] .has-drop-cap>p:first-of-type:first-letter,
html[lang=pl] .has-drop-cap>p:first-of-type:first-letter,
html[lang=tr] .has-drop-cap>p:first-of-type:first-letter,
html[lang=vi] .has-drop-cap>p:first-of-type:first-letter {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .has-drop-cap>p:first-of-type:first-letter,
html[lang=ko] .has-drop-cap>p:first-of-type:first-letter {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .has-drop-cap>p:first-of-type:first-letter,
html[lang=th] .has-drop-cap>p:first-of-type:first-letter {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .has-drop-cap>p:first-of-type:first-letter,
html[lang=ja] .has-drop-cap>p:first-of-type:first-letter {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .has-drop-cap>p:first-of-type:first-letter,
[lang=zh-hant] .has-drop-cap>p:first-of-type:first-letter,
html[lang=zh-cn] .has-drop-cap>p:first-of-type:first-letter,
html[lang=zh-hant] .has-drop-cap>p:first-of-type:first-letter {
font-family: 'Riot Sans CN', sans-serif
}
@media screen and (min-width:550px) {
.has-drop-cap>p:first-of-type:first-letter {
font-size: 50px;
line-height: 74px;
background-position: 50% 50%, 0 40%;
background-size: auto auto, 110px 110px
}
}
@media screen and (min-width:960px) {
.has-drop-cap>p:first-of-type:first-letter {
font-size: 64px;
line-height: .65;
padding: 26px 22px;
background-position: 50% 50%, 0 50%;
background-size: auto auto
}
}
.grid {
margin-left: -20px
}
.grid__item {
padding-left: 20px;
box-sizing: border-box;
vertical-align: top;
display: inline-block;
width: 100%;
padding-bottom: 50px;
}
.grid--reverse {
direction: rtl;
text-align: right
}
.grid--reverse>.grid__item {
direction: ltr;
text-align: left
}
.one-half {
width: 50%
}
@media screen and (min-width:550px) {
.tablet-one-half {
width: 50%
}
.tablet-one-third {
width: 33.3333%
}
.tablet-two-thirds {
width: 66.6667%
}
.tablet-one-quarter {
width: 25%
}
.tablet-two-quarters {
width: 50%
}
.tablet-three-quarters {
width: 75%
}
.tablet-one-fifth {
width: 20%
}
.tablet-two-fifths {
width: 40%
}
.tablet-three-fifths {
width: 60%
}
.tablet-four-fifths {
width: 80%
}
}
@media screen and (min-width:800px) {
.tablet-landscape-one-half {
width: 48%;
padding-bottom: 80px;
}
.tablet-landscape-one-third {
width: 33.3333%
}
.tablet-landscape-two-thirds {
width: 66.6667%
}
.tablet-landscape-one-quarter {
width: 25%
}
.tablet-landscape-two-quarters {
width: 50%
}
.tablet-landscape-three-quarters {
width: 75%
}
}
@media screen and (min-width:960px) {
.desktop-one-half {
width: 50%
}
.desktop-one-third {
width: 33.3333%
}
.desktop-two-thirds {
width: 66.6667%
}
.desktop-one-quarter {
width: 25%
}
.desktop-two-quarters {
width: 50%
}
.desktop-three-quarters {
width: 75%
}
.desktop-one-fifth {
width: 20%
}
.desktop-two-fifths {
width: 40%
}
.desktop-three-fifths {
width: 60%
}
.desktop-four-fifths {
width: 80%
}
.desktop-one-eleventh {
width: 9.0909%
}
.desktop-two-elevenths {
width: 18.1818%
}
.desktop-three-elevenths {
width: 27.2727%
}
.desktop-four-elevenths {
width: 36.3636%
}
.desktop-five-elevenths {
width: 45.4545%
}
.desktop-six-elevenths {
width: 54.5455%
}
.desktop-seven-elevenths {
width: 63.6364%
}
.desktop-eight-elevenths {
width: 72.7273%
}
.desktop-nine-elevenths {
width: 81.8182%
}
.desktop-ten-elevenths {
width: 90.9091%
}
}
@media screen and (min-width:1280px) {
.desktop-medium-one-half {
width: 50%
}
.desktop-medium-one-third {
width: 33.3333%
}
.desktop-medium-two-thirds {
width: 66.6667%
}
.desktop-medium-one-quarter {
width: 25%
}
.desktop-medium-two-quarters {
width: 50%
}
.desktop-medium-three-quarters {
width: 75%
}
}
@media screen and (min-width:1440px) {
.desktop-large-one-half {
width: 50%
}
.desktop-large-one-third {
width: 33.3333%
}
.desktop-large-two-thirds {
width: 66.6667%
}
}
.grid--gutterless {
margin-left: 0
}
.grid--gutterless>.grid__item {
padding-left: 0
}
.grid--half {
margin-left: -10px
}
.grid--half>.grid__item {
padding-left: 10px
}
.grid--double {
margin-left: -40px
}
.grid--double>.grid__item {
padding-left: 40px
}
@media screen and (min-width:960px) {
.grid--desktop-double {
margin-left: -40px
}
.grid--desktop-double>.grid__item {
padding-left: 40px
}
}
@media screen and (min-width:960px) {
.grid--desktop-quadruple {
margin-left: -80px
}
.grid--desktop-quadruple>.grid__item {
/*padding-left: 80px*/
}
}
@media screen and (min-width:1280px) {
.grid--desktop-medium-quadruple {
margin-left: -80px
}
.grid--desktop-medium-quadruple>.grid__item {
padding-left: 80px
}
}
.grid--align-center {
text-align: center
}
.grid--align-center>.grid__item {
text-align: left
}
.grid--align-right {
text-align: right
}
.grid--align-right>.grid__item {
text-align: left
}
.grid--valign-middle>.grid__item {
vertical-align: middle
}
.grid--flex {
display: -ms-flexbox;
display: flex
}
.grid--flex-center {
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center
}
.grid--reverse {
direction: rtl
}
@media screen and (min-width:960px) {
.grid--desktop-flex {
display: -ms-flexbox;
display: flex
}
.grid--desktop-flex-center {
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center
}
.grid--desktop-flex-center--x {
-ms-flex-pack: center;
justify-content: center
}
}
@media screen and (min-width:550px) {
.grid--tablet-flex {
display: -ms-flexbox;
display: flex
}
.grid--tablet-flex-center {
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center
}
}
@media screen and (min-width:960px) {
.grid--sticky-desktop {
position: relative
}
.grid__item--sticky-desktop {
position: sticky;
top: 110px
}
}
@media screen and (min-width:1280px) {
.grid--desktop-medium-flex {
display: -ms-flexbox;
display: flex
}
.grid--desktop-medium-flex-center {
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center
}
.grid--desktop-medium-flex-center--x {
-ms-flex-pack: center;
justify-content: center
}
}
@media screen and (min-width:1440px) {
.grid--desktop-large-flex {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%
}
}
.list--unstyled {
margin-bottom: 0
}
.list--unstyled>li {
list-style: none;
margin-left: 0
}
.list--inline>li {
display: inline-block;
margin-left: 0
}
body.has-locked-scrolling {
overflow: hidden;
position: fixed;
width: 100%
}
.cssanimations .sequential-reveal>:nth-child(1) {
-webkit-animation: mask-reveal-from-right 1s .1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s .1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.cssanimations .sequential-reveal>:nth-child(2) {
-webkit-animation: mask-reveal-from-right 1s .2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s .2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.cssanimations .sequential-reveal>:nth-child(3) {
-webkit-animation: mask-reveal-from-right 1s .3s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s .3s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.cssanimations .sequential-reveal>:nth-child(4) {
-webkit-animation: mask-reveal-from-right 1s .4s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s .4s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.cssanimations .sequential-reveal>:nth-child(5) {
-webkit-animation: mask-reveal-from-right 1s .5s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s .5s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.cssanimations .sequential-reveal>:nth-child(6) {
-webkit-animation: mask-reveal-from-right 1s .6s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s .6s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.cssanimations .sequential-reveal>:nth-child(7) {
-webkit-animation: mask-reveal-from-right 1s .7s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s .7s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.cssanimations .sequential-reveal>:nth-child(8) {
-webkit-animation: mask-reveal-from-right 1s .8s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s .8s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.cssanimations .sequential-reveal>:nth-child(9) {
-webkit-animation: mask-reveal-from-right 1s .9s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s .9s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.cssanimations .sequential-reveal>:nth-child(10) {
-webkit-animation: mask-reveal-from-right 1s 1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s 1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.cssanimations .sequential-reveal>:nth-child(11) {
-webkit-animation: mask-reveal-from-right 1s 1.1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s 1.1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.cssanimations .sequential-reveal>:nth-child(12) {
-webkit-animation: mask-reveal-from-right 1s 1.2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s 1.2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.cssanimations .sequential-reveal>:nth-child(13) {
-webkit-animation: mask-reveal-from-right 1s 1.3s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s 1.3s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.cssanimations .sequential-reveal>:nth-child(14) {
-webkit-animation: mask-reveal-from-right 1s 1.4s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s 1.4s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.cssanimations .sequential-reveal>:nth-child(15) {
-webkit-animation: mask-reveal-from-right 1s 1.5s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s 1.5s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.cssanimations .sequential-reveal>:nth-child(16) {
-webkit-animation: mask-reveal-from-right 1s 1.6s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s 1.6s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.cssanimations .sequential-reveal>:nth-child(17) {
-webkit-animation: mask-reveal-from-right 1s 1.7s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s 1.7s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.cssanimations .sequential-reveal>:nth-child(18) {
-webkit-animation: mask-reveal-from-right 1s 1.8s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s 1.8s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.cssanimations .sequential-reveal>:nth-child(19) {
-webkit-animation: mask-reveal-from-right 1s 1.9s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s 1.9s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.cssanimations .sequential-reveal>:nth-child(20) {
-webkit-animation: mask-reveal-from-right 1s 2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s 2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.table {
border-collapse: collapse;
width: 100%
}
@property --angle {
syntax: '';
initial-value: -90deg;
inherits: false
}
@-webkit-keyframes rotate {
to {
--angle: 270deg
}
}
@keyframes rotate {
to {
--angle: 270deg
}
}
.text-center {
text-align: center
}
.is-vhidden {
position: absolute !important;
clip: rect(0, 0, 0, 0) !important;
overflow: hidden !important;
height: 1px !important;
width: 1px !important;
padding: 0 !important;
margin: -1px !important;
border: 0 !important
}
.is-hidden {
display: none !important
}
@media screen and (max-width:549px) {
.is-hidden-mobile {
display: none !important
}
}
@media screen and (min-width:550px) and (max-width:959px) {
.is-hidden-tablet {
display: none !important
}
}
@media screen and (min-width:960px) {
.is-hidden-desktop {
display: none !important
}
}
.js .is-hidden--js {
display: none !important
}
.no-js .is-hidden--nojs {
display: none !important
}
.article-authors {
background-color: #dbd9d6;
background-image: url(/assets/img/structure/6d79447d110ef217a5a784efe55ba29b/texture-light@2x.jpg);
background-size: 50%;
background-repeat: repeat;
-webkit-clip-path: polygon(0 0, 100% 10px, 100% calc(100% - 10px), 0 100%);
clip-path: polygon(0 0, 100% 10px, 100% calc(100% - 10px), 0 100%);
margin-top: 40px;
padding-top: 40px;
padding-bottom: 40px
}
@media screen and (min-width:550px) {
.article-authors {
margin-top: 80px;
padding-top: 50px;
padding-bottom: 50px
}
}
.article-authors img {
border-radius: 50%;
overflow: hidden
}
.article-authors__inner>*+* {
margin-top: 40px
}
@media screen and (min-width:550px) {
.article-authors__inner>*+* {
margin-top: 60px
}
}
.article-author {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.article-author__content {
min-width: 0
}
.article-author__content>*+* {
margin-top: 10px
}
.article-author__image {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
margin-right: 20px;
display: none
}
@media screen and (min-width:400px) {
.article-author__image {
display: block
}
}
@media screen and (min-width:550px) {
.article-author__image {
margin-right: 40px
}
}
.article-author__image-alt {
display: block;
max-width: 200px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px
}
@media screen and (min-width:400px) {
.article-author__image-alt {
display: none
}
}
.article-author__footer a {
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
max-width: 100%
}
@media screen and (min-width:1850px) {
.article-authors--move-when-large {
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
margin-top: 0;
padding-top: 0 !important;
padding-bottom: 0 !important;
background: 0 0;
-webkit-clip-path: none;
clip-path: none
}
.showLatestNews .article-authors--move-when-large {
left: -60px
}
.article-authors--move-when-large .article-authors__inner>*+* {
margin-top: 20px !important
}
.article-authors--move-when-large .content-center {
position: relative;
max-width: 953.333px !important
}
.article-authors--move-when-large .copy {
font-size: 1rem !important;
line-height: 1.4 !important
}
.article-authors--move-when-large .article-authors__inner {
position: absolute;
right: 100%;
pointer-events: auto;
width: calc((100vw - 950px)/ 2 - 20px);
max-width: calc((1440px - 870px - 80px)/ 2 - 20px);
margin-left: 20px
}
.article-authors--move-when-large .article-authors__inner:before {
content: '';
position: absolute;
top: -20px;
right: -20px;
bottom: -20px;
left: -20px;
background-color: #dbd9d6;
background-image: url(/assets/img/structure/6d79447d110ef217a5a784efe55ba29b/texture-light@2x.jpg);
background-size: 50%;
background-repeat: repeat;
-webkit-clip-path: polygon(0 0, 100% 10px, 100% calc(100% - 10px), 0 100%);
clip-path: polygon(0 0, 100% 10px, 100% calc(100% - 10px), 0 100%)
}
.article-authors--move-when-large .article-author__header {
margin-bottom: 10px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.article-authors--move-when-large .article-author__image {
display: none
}
.article-authors--move-when-large .article-author__image-alt {
-ms-flex: 1 1 60px;
flex: 1 1 60px;
display: block;
margin-bottom: 0;
margin-left: 0;
margin-right: 10px
}
.article-authors--move-when-large .article-author__content {
position: relative;
max-width: 100%
}
.article-authors--move-when-large .article-author__heading {
font-weight: 700;
letter-spacing: -.03em;
font-size: 18px !important;
line-height: 20px !important
}
.article-author__image-alt+.article-authors--move-when-large .article-author__heading {
margin-left: 10px
}
}
.article-body {
position: relative;
margin-bottom: 30px
}
@media screen and (min-width:550px) {
.article-body {
margin-bottom: 40px
}
}
@media screen and (min-width:960px) {
.article-body {
margin-bottom: 70px
}
}
.showLatestNews .article-body .content-gutter {
padding: 0 16px
}
@media screen and (min-width:960px) {
.showLatestNews .article-body .content-gutter {
padding: 0
}
}
.article-carousel {
position: relative;
padding-top: 40px;
padding-bottom: 40px
}
@media screen and (min-width:550px) {
.article-carousel {
padding-top: 50px;
padding-bottom: 50px
}
}
@media screen and (min-width:1600px) {
.article-carousel {
padding-top: 80px;
padding-bottom: 80px
}
}
.article-carousel.impact-report {
background-color: #eff3ef;
padding-top: 0;
padding-bottom: 0;
margin-bottom: 80px
}
@media screen and (min-width:960px) {
.article-carousel.impact-report {
margin-bottom: 0
}
}
.article-carousel__bg {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #dbd9d6;
background-image: url(/assets/img/structure/6d79447d110ef217a5a784efe55ba29b/texture-light@2x.jpg);
background-size: 50%;
background-repeat: repeat;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 10px));
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 10px));
margin-top: -10px
}
@media screen and (min-width:550px) {
.article-carousel__bg {
-webkit-clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 calc(100% - 20px));
clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 calc(100% - 20px))
}
}
@media screen and (min-width:960px) {
.article-carousel__bg {
-webkit-clip-path: polygon(0 15px, 100% 0, 100% 100%, 0 calc(100% - 25px));
clip-path: polygon(0 15px, 100% 0, 100% 100%, 0 calc(100% - 25px))
}
}
.article-carousel__intro {
position: relative;
padding-bottom: 30px
}
@media screen and (min-width:1440px) {
.article-carousel__intro {
padding-bottom: 50px
}
}
.impact-report .article-carousel__intro {
padding-bottom: 0;
margin: 0 auto
}
.impact-report .article-carousel__intro .text-with-cta {
text-align: left !important;
padding-left: 10px
}
.impact-report .article-carousel__intro .copy,
.impact-report .article-carousel__intro .heading {
max-width: 100%
}
.impact-report .article-carousel__intro .heading {
font-family: 'Riot Sans Latin', Arial, sans-serif;
font-weight: 700;
line-height: 1.2
}
[lang=cs_CZ] .impact-report .article-carousel__intro .heading,
[lang=hu_HU] .impact-report .article-carousel__intro .heading,
[lang=pl_PL] .impact-report .article-carousel__intro .heading,
[lang=tr_tr] .impact-report .article-carousel__intro .heading,
[lang=vi_vi] .impact-report .article-carousel__intro .heading,
html[lang=cs] .impact-report .article-carousel__intro .heading,
html[lang=hu] .impact-report .article-carousel__intro .heading,
html[lang=pl] .impact-report .article-carousel__intro .heading,
html[lang=tr] .impact-report .article-carousel__intro .heading,
html[lang=vi] .impact-report .article-carousel__intro .heading {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .impact-report .article-carousel__intro .heading,
html[lang=ko] .impact-report .article-carousel__intro .heading {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .impact-report .article-carousel__intro .heading,
html[lang=th] .impact-report .article-carousel__intro .heading {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .impact-report .article-carousel__intro .heading,
html[lang=ja] .impact-report .article-carousel__intro .heading {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .impact-report .article-carousel__intro .heading,
[lang=zh-hant] .impact-report .article-carousel__intro .heading,
html[lang=zh-cn] .impact-report .article-carousel__intro .heading,
html[lang=zh-hant] .impact-report .article-carousel__intro .heading {
font-family: 'Riot Sans CN', sans-serif
}
.impact-report .article-carousel__intro .copy {
font-family: 'Inter V Latin', Arial, sans-serif;
margin-top: 0;
padding-bottom: 30px
}
[lang=cs_CZ] .impact-report .article-carousel__intro .copy,
[lang=hu_HU] .impact-report .article-carousel__intro .copy,
[lang=pl_PL] .impact-report .article-carousel__intro .copy,
[lang=tr_tr] .impact-report .article-carousel__intro .copy,
[lang=vi_vi] .impact-report .article-carousel__intro .copy,
html[lang=cs] .impact-report .article-carousel__intro .copy,
html[lang=hu] .impact-report .article-carousel__intro .copy,
html[lang=pl] .impact-report .article-carousel__intro .copy,
html[lang=tr] .impact-report .article-carousel__intro .copy,
html[lang=vi] .impact-report .article-carousel__intro .copy {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .impact-report .article-carousel__intro .copy,
html[lang=ko] .impact-report .article-carousel__intro .copy {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .impact-report .article-carousel__intro .copy,
html[lang=th] .impact-report .article-carousel__intro .copy {
font-family: 'Noto Sans Thai', sans-serif
}
[lang=ja] .impact-report .article-carousel__intro .copy,
html[lang=ja] .impact-report .article-carousel__intro .copy {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .impact-report .article-carousel__intro .copy,
[lang=zh-hant] .impact-report .article-carousel__intro .copy,
html[lang=zh-cn] .impact-report .article-carousel__intro .copy,
html[lang=zh-hant] .impact-report .article-carousel__intro .copy {
font-family: 'Noto Sans CN', sans-serif
}
.article-header {
position: relative;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
background-color: #dbd9d6;
background-image: url(/assets/img/structure/6d79447d110ef217a5a784efe55ba29b/texture-light@2x.jpg);
background-size: 50%;
background-repeat: repeat
}
@media screen and (min-width:550px) {
.article-header {
padding-top: 30px;
padding-bottom: 30px
}
}
@media screen and (min-width:1280px) {
.article-header {
padding-top: 40px;
padding-bottom: 40px
}
}
@media screen and (min-width:1600px) {
.article-header {
padding-top: 50px;
padding-bottom: 50px
}
}
.article-header__eyebrow {
margin-bottom: 10px
}
@media screen and (min-width:960px) {
.article-header__eyebrow {
margin-bottom: 20px
}
}
.article-header__heading {
margin: 0 30px
}
.article-header__heading.heading.heading--2 {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em
}
[lang=cs_CZ] .article-header__heading.heading.heading--2,
[lang=hu_HU] .article-header__heading.heading.heading--2,
[lang=pl_PL] .article-header__heading.heading.heading--2,
[lang=tr_tr] .article-header__heading.heading.heading--2,
[lang=vi_vi] .article-header__heading.heading.heading--2,
html[lang=cs] .article-header__heading.heading.heading--2,
html[lang=hu] .article-header__heading.heading.heading--2,
html[lang=pl] .article-header__heading.heading.heading--2,
html[lang=tr] .article-header__heading.heading.heading--2,
html[lang=vi] .article-header__heading.heading.heading--2 {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .article-header__heading.heading.heading--2,
html[lang=ko] .article-header__heading.heading.heading--2 {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .article-header__heading.heading.heading--2,
html[lang=th] .article-header__heading.heading.heading--2 {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .article-header__heading.heading.heading--2,
html[lang=ja] .article-header__heading.heading.heading--2 {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .article-header__heading.heading.heading--2,
[lang=zh-hant] .article-header__heading.heading.heading--2,
html[lang=zh-cn] .article-header__heading.heading.heading--2,
html[lang=zh-hant] .article-header__heading.heading.heading--2 {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
.article-header__heading.heading.heading--2.discipline-office-hero__heading {
font-family: 'Riot Sans Latin', Arial, sans-serif;
letter-spacing: -.03em
}
[lang=cs_CZ] .article-header__heading.heading.heading--2.discipline-office-hero__heading,
[lang=hu_HU] .article-header__heading.heading.heading--2.discipline-office-hero__heading,
[lang=pl_PL] .article-header__heading.heading.heading--2.discipline-office-hero__heading,
[lang=tr_tr] .article-header__heading.heading.heading--2.discipline-office-hero__heading,
[lang=vi_vi] .article-header__heading.heading.heading--2.discipline-office-hero__heading,
html[lang=cs] .article-header__heading.heading.heading--2.discipline-office-hero__heading,
html[lang=hu] .article-header__heading.heading.heading--2.discipline-office-hero__heading,
html[lang=pl] .article-header__heading.heading.heading--2.discipline-office-hero__heading,
html[lang=tr] .article-header__heading.heading.heading--2.discipline-office-hero__heading,
html[lang=vi] .article-header__heading.heading.heading--2.discipline-office-hero__heading {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .article-header__heading.heading.heading--2.discipline-office-hero__heading,
html[lang=ko] .article-header__heading.heading.heading--2.discipline-office-hero__heading {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .article-header__heading.heading.heading--2.discipline-office-hero__heading,
html[lang=th] .article-header__heading.heading.heading--2.discipline-office-hero__heading {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .article-header__heading.heading.heading--2.discipline-office-hero__heading,
html[lang=ja] .article-header__heading.heading.heading--2.discipline-office-hero__heading {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .article-header__heading.heading.heading--2.discipline-office-hero__heading,
[lang=zh-hant] .article-header__heading.heading.heading--2.discipline-office-hero__heading,
html[lang=zh-cn] .article-header__heading.heading.heading--2.discipline-office-hero__heading,
html[lang=zh-hant] .article-header__heading.heading.heading--2.discipline-office-hero__heading {
font-family: 'Riot Sans CN', sans-serif
}
@media screen and (min-width:960px) {
.article-header__heading {
margin: 0 100px
}
}
@media screen and (min-width:1280px) {
.article-header__heading {
margin: 0 auto;
max-width: 960px
}
}
.article-header__detail-list {
margin-top: 15px;
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-weight: 700;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px
}
[lang=cs_CZ] .article-header__detail-list,
[lang=hu_HU] .article-header__detail-list,
[lang=pl_PL] .article-header__detail-list,
[lang=tr_tr] .article-header__detail-list,
[lang=vi_vi] .article-header__detail-list,
html[lang=cs] .article-header__detail-list,
html[lang=hu] .article-header__detail-list,
html[lang=pl] .article-header__detail-list,
html[lang=tr] .article-header__detail-list,
html[lang=vi] .article-header__detail-list {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .article-header__detail-list,
html[lang=ko] .article-header__detail-list {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .article-header__detail-list,
html[lang=th] .article-header__detail-list {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .article-header__detail-list,
html[lang=ja] .article-header__detail-list {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .article-header__detail-list,
[lang=zh-hant] .article-header__detail-list,
html[lang=zh-cn] .article-header__detail-list,
html[lang=zh-hant] .article-header__detail-list {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
@media screen and (min-width:960px) {
.article-header__detail-list {
margin-top: 30px;
padding-left: 80px;
padding-right: 80px
}
}
.article-header__detail-list strong {
font-weight: 800
}
.article-header__detail-list .icon {
margin-bottom: 5px;
fill: #d1363a
}
@media screen and (min-width:550px) {
.article-header__detail-list .icon {
margin-right: 5px
}
}
.article-header__detail-list li {
display: block
}
@media screen and (min-width:550px) {
.article-header__detail-list li {
display: inline-block
}
}
.article-header__detail-list a {
font-weight: 700;
color: #2b2a29;
display: inline;
background-image: url(/assets/img/structure/149a1d9c51c7bf69816f75699be94a7e/distressed-underline.svg), url(/assets/img/structure/7d7cf62b9e1571d8046c681d85759354/distressed-underline--primary.svg);
background-repeat: repeat-x, no-repeat;
background-position: 0 95%;
background-size: 680px 2px, 0 0
}
.article-header__detail-list a:active,
.article-header__detail-list a:focus,
.article-header__detail-list a:hover {
background-position: 0 95%;
background-image: url(/assets/img/structure/7d7cf62b9e1571d8046c681d85759354/distressed-underline--primary.svg);
text-decoration: none
}
.article-header__detail-list-seperator:after {
content: ''
}
@media screen and (min-width:550px) {
.article-header__detail-list-seperator:after {
content: '/';
padding: 0 5px
}
}
.showLatestNews .article-header {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
row-gap: 12px;
padding-top: 0;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 32px
}
@media screen and (min-width:960px) {
.showLatestNews .article-header {
padding-left: 0;
padding-right: 0;
padding-bottom: 64px
}
}
.showLatestNews .article-header h1 {
font-size: 28px
}
.showLatestNews .article-header .article-header__detail-list {
padding: 0;
margin: 0
}
.showLatestNews .article-header .article-header__eyebrow {
margin: 0
}
.showLatestNews .article-header .article-header__heading {
max-width: auto;
margin: 0
}
@media screen and (min-width:960px) {
.showLatestNews .article-header {
text-align: left
}
.showLatestNews .article-header h1 {
font-size: 44px
}
}
.article-images {
position: relative;
margin-bottom: 40px
}
@media screen and (min-width:550px) {
.article-images {
margin-bottom: 50px
}
}
@media screen and (min-width:1600px) {
.article-images {
margin-bottom: 80px
}
}
.article-images:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background-image: url(/assets/img/structure/6d79447d110ef217a5a784efe55ba29b/texture-light@2x.jpg);
background-size: 50%;
background-repeat: repeat
}
.article-images .figure {
position: relative
}
.article-image__action {
text-align: center;
margin-bottom: 40px
}
@media screen and (min-width:550px) {
.article-image__action {
margin-bottom: 50px
}
}
@media screen and (min-width:1600px) {
.article-image__action {
margin-bottom: 80px
}
}
.article-image__action .brush-icon {
margin-left: 10px
}
.article-image__action .heading.heading--7 {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em
}
[lang=cs_CZ] .article-image__action .heading.heading--7,
[lang=hu_HU] .article-image__action .heading.heading--7,
[lang=pl_PL] .article-image__action .heading.heading--7,
[lang=tr_tr] .article-image__action .heading.heading--7,
[lang=vi_vi] .article-image__action .heading.heading--7,
html[lang=cs] .article-image__action .heading.heading--7,
html[lang=hu] .article-image__action .heading.heading--7,
html[lang=pl] .article-image__action .heading.heading--7,
html[lang=tr] .article-image__action .heading.heading--7,
html[lang=vi] .article-image__action .heading.heading--7 {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .article-image__action .heading.heading--7,
html[lang=ko] .article-image__action .heading.heading--7 {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .article-image__action .heading.heading--7,
html[lang=th] .article-image__action .heading.heading--7 {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .article-image__action .heading.heading--7,
html[lang=ja] .article-image__action .heading.heading--7 {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .article-image__action .heading.heading--7,
[lang=zh-hant] .article-image__action .heading.heading--7,
html[lang=zh-cn] .article-image__action .heading.heading--7,
html[lang=zh-hant] .article-image__action .heading.heading--7 {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
.article-images--small-spacing {
margin-bottom: 40px
}
.badge {
background-color: #403f3e;
color: #e7e6e3;
padding: 2px 5px;
border-radius: 20px
}
.caption {
width: 100%;
padding-top: 15px;
font-size: 14px;
color: #8a8887;
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-weight: 700
}
[lang=cs_CZ] .caption,
[lang=hu_HU] .caption,
[lang=pl_PL] .caption,
[lang=tr_tr] .caption,
[lang=vi_vi] .caption,
html[lang=cs] .caption,
html[lang=hu] .caption,
html[lang=pl] .caption,
html[lang=tr] .caption,
html[lang=vi] .caption {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .caption,
html[lang=ko] .caption {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .caption,
html[lang=th] .caption {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .caption,
html[lang=ja] .caption {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .caption,
[lang=zh-hant] .caption,
html[lang=zh-cn] .caption,
html[lang=zh-hant] .caption {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
.caption strong {
font-weight: 800
}
@media screen and (min-width:960px) {
.caption--spaced {
padding-top: 30px
}
}
.card-grid {
position: relative;
background: #e7e6e3;
margin: -10px;
padding: 10px;
padding-bottom: 0;
margin-bottom: 0
}
.card-grid .grid__item {
margin-bottom: 10px
}
.osano-cm-list__list-item.osano-cm-list-item {
list-style: none
}
.osano-cm-widget svg {
display: none
}
.copy {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em;
color: #2b2a29;
font-weight: 400;
font-size: 1rem;
line-height: 1.5
}
[lang=cs_CZ] .copy,
[lang=hu_HU] .copy,
[lang=pl_PL] .copy,
[lang=tr_tr] .copy,
[lang=vi_vi] .copy,
html[lang=cs] .copy,
html[lang=hu] .copy,
html[lang=pl] .copy,
html[lang=tr] .copy,
html[lang=vi] .copy {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .copy,
html[lang=ko] .copy {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .copy,
html[lang=th] .copy {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .copy,
html[lang=ja] .copy {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .copy,
[lang=zh-hant] .copy,
html[lang=zh-cn] .copy,
html[lang=zh-hant] .copy {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
@media screen and (min-width:960px) {
.copy {
font-size: 1.125rem;
line-height: 1.667
}
}
.copy--small {
font-size: .75rem;
line-height: 1.5
}
@media screen and (min-width:550px) {
.copy--small {
font-size: .875rem;
line-height: 1.571
}
}
.copy--large {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
@media screen and (min-width:550px) {
.copy--large {
font-size: 1.125rem;
line-height: 1.667
}
}
@media screen and (min-width:960px) {
.copy--large {
font-size: 1.375rem;
line-height: 1.636;
font-size: 1.3rem
}
}
.copy--muted {
color: #656462
}
.copy--light {
color: #e7e6e3
}
.copy--light.copy--muted {
color: #8a8887
}
.discipline-randomiser {
position: relative
}
@media screen and (min-width:960px) {
.discipline-randomiser:before {
content: '';
position: absolute;
width: 439.5px;
height: 436.5px;
top: 150px;
right: 0;
background-size: 100%;
pointer-events: none
}
}
.discipline-randomiser>* {
position: relative
}
@media screen and (min-width:550px) {
.discipline-randomiser .randomiser {
margin-top: 60px
}
}
@media screen and (min-width:960px) {
.discipline-randomiser .randomiser {
margin-top: 100px
}
}
@media screen and (min-width:1440px) {
.discipline-randomiser .randomiser {
margin-top: 160px
}
}
.eyebrow-text {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-weight: 700;
font-size: .625rem;
line-height: 1.6;
text-transform: uppercase
}
[lang=cs_CZ] .eyebrow-text,
[lang=hu_HU] .eyebrow-text,
[lang=pl_PL] .eyebrow-text,
[lang=tr_tr] .eyebrow-text,
[lang=vi_vi] .eyebrow-text,
html[lang=cs] .eyebrow-text,
html[lang=hu] .eyebrow-text,
html[lang=pl] .eyebrow-text,
html[lang=tr] .eyebrow-text,
html[lang=vi] .eyebrow-text {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .eyebrow-text,
html[lang=ko] .eyebrow-text {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .eyebrow-text,
html[lang=th] .eyebrow-text {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .eyebrow-text,
html[lang=ja] .eyebrow-text {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .eyebrow-text,
[lang=zh-hant] .eyebrow-text,
html[lang=zh-cn] .eyebrow-text,
html[lang=zh-hant] .eyebrow-text {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
@media screen and (min-width:550px) {
.eyebrow-text {
font-size: .688rem;
line-height: 1.364
}
}
.eyebrow-text--light {
color: #e7e6e3
}
.eyebrow-text--light-muted {
color: #656462
}
.eyebrow-text--muted {
color: #8a8887
}
.featured-article__intro {
margin-bottom: 40px
}
@media screen and (min-width:960px) {
.featured-article__intro {
margin-bottom: 60px
}
}
.featured-article__intro:empty {
margin-bottom: 0
}
.featured-article__intro .heading+.copy {
margin-top: 10px
}
@media screen and (min-width:960px) {
.featured-article__intro .heading+.copy {
margin-top: 20px
}
}
.flickity-enabled {
position: relative
}
.flickity-enabled:focus {
outline: 0
}
.flickity-viewport {
overflow: hidden;
position: relative;
height: 100%
}
.flickity-slider {
position: absolute;
width: 100%;
height: 100%
}
.flickity-enabled.is-draggable {
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.flickity-enabled.is-draggable .flickity-viewport {
cursor: move;
cursor: -webkit-grab;
cursor: grab
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
cursor: -webkit-grabbing;
cursor: grabbing
}
.flickity-prev-next-button {
border: 0;
cursor: pointer;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
transition: all .3s ease-out;
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 30px;
background: 0 0
}
@media screen and (min-width:550px) {
.flickity-prev-next-button {
width: 60px;
height: 60px;
line-height: 60px
}
}
.flickity-prev-next-button svg {
position: absolute;
left: 50%;
top: 50%;
width: 14px;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.flickity-prev-next-button svg path {
fill: #2b2a29;
transition: fill .3s ease-out
}
.flickity-prev-next-button:active,
.flickity-prev-next-button:focus,
.flickity-prev-next-button:hover {
transition-duration: .1s
}
.flickity-prev-next-button:active svg path,
.flickity-prev-next-button:focus svg path,
.flickity-prev-next-button:hover svg path {
fill: #d1363a;
transition-duration: .1s
}
.carousel--image .flickity-prev-next-button {
background-color: #e7e6e3;
background-image: linear-gradient(-183deg, #e7e6e3 49.5%, #d1363a 50.5%);
background-size: 100% 255%;
background-position: 50% 0;
background-repeat: no-repeat
}
.carousel--image .flickity-prev-next-button:active,
.carousel--image .flickity-prev-next-button:focus,
.carousel--image .flickity-prev-next-button:hover {
background-color: #d1363a;
background-position: 0 100%
}
.carousel--image .flickity-prev-next-button:active svg path,
.carousel--image .flickity-prev-next-button:focus svg path,
.carousel--image .flickity-prev-next-button:hover svg path {
fill: #e7e6e3
}
.flickity-prev-next-button.previous {
left: 10px
}
.flickity-prev-next-button.next {
right: 10px
}
.flickity-rtl .flickity-prev-next-button.previous {
left: auto;
right: 10px
}
.flickity-rtl .flickity-prev-next-button.next {
right: auto;
left: 10px
}
.flickity-prev-next-button:disabled {
background: rgba(231, 230, 227, .3);
cursor: auto;
pointer-events: none
}
.flickity-prev-next-button:disabled svg {
opacity: .5
}
.flickity-page-dots {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
line-height: 1
}
@media screen and (min-width:960px) {
.carousel--image .flickity-page-dots {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: auto;
pointer-events: none
}
.carousel--image .flickity-page-dots:before {
content: '';
width: 100%;
display: block;
height: 0;
padding-bottom: 66.66666666666666%;
margin-bottom: -40px
}
.carousel--image .flickity-page-dots .dot {
pointer-events: auto
}
}
@media screen and (min-width:960px) {
.carousel--image.carousel--featured .flickity-page-dots:before {
padding-bottom: 56.25%
}
}
.carousel--summary .flickity-page-dots {
margin-top: 20px
}
.flickity-rtl .flickity-page-dots {
direction: rtl
}
.flickity-page-dots .dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 8px;
background: #adacaa;
border-radius: 50%;
opacity: .25;
cursor: pointer
}
.flickity-page-dots .dot.is-selected {
opacity: 1
}
#riotbar-navmenu .second-logo svg {
margin-top: 12px !important
}
.header-search-container,
.side-nav-search-container {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center
}
.header-search-container {
-ms-flex-pack: right;
justify-content: right
}
.side-nav-search-container {
-ms-flex-direction: column;
flex-direction: column;
margin-top: 20px !important
}
.search-container {
background: #2b2a29;
border-radius: 1.6rem;
display: -ms-flexbox;
display: flex;
-ms-flex-align: right;
align-items: right;
-ms-flex-pack: justify;
justify-content: space-between;
padding: .3rem 1.4rem !important
}
.search-button {
height: 17px;
width: 16px
}
.search-input {
background-color: transparent;
font-weight: 700;
text-transform: uppercase;
color: #fff;
font-size: 12px !important;
border-top-style: hidden;
border-right-style: hidden;
border-left-style: hidden;
border-bottom-style: hidden;
outline: 0;
margin-right: 10px
}
@media (max-width:1024px) {
#riotbar-navbar .riotbar-explore-label svg {
margin: 22px auto 0 !important
}
.header-search-container {
display: none
}
}
.image-grid__images {
margin-bottom: -20px
}
@media screen and (min-width:960px) {
.image-grid__images {
margin-bottom: -40px
}
}
.image-grid__image {
margin-bottom: 20px
}
@media screen and (min-width:960px) {
.image-grid__image {
margin-bottom: 40px
}
}
.prose.impact-text {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=cs_CZ] .prose.impact-text,
[lang=hu_HU] .prose.impact-text,
[lang=pl_PL] .prose.impact-text,
[lang=tr_tr] .prose.impact-text,
[lang=vi_vi] .prose.impact-text,
html[lang=cs] .prose.impact-text,
html[lang=hu] .prose.impact-text,
html[lang=pl] .prose.impact-text,
html[lang=tr] .prose.impact-text,
html[lang=vi] .prose.impact-text {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .prose.impact-text,
html[lang=ko] .prose.impact-text {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .prose.impact-text,
html[lang=th] .prose.impact-text {
font-family: 'Noto Sans Thai', sans-serif
}
[lang=ja] .prose.impact-text,
html[lang=ja] .prose.impact-text {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .prose.impact-text,
[lang=zh-hant] .prose.impact-text,
html[lang=zh-cn] .prose.impact-text,
html[lang=zh-hant] .prose.impact-text {
font-family: 'Noto Sans CN', sans-serif
}
.prose.impact-text h1,
.prose.impact-text h2,
.prose.impact-text h3,
.prose.impact-text h4,
.prose.impact-text h5,
.prose.impact-text h6 {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=cs_CZ] .prose.impact-text h1,
[lang=cs_CZ] .prose.impact-text h2,
[lang=cs_CZ] .prose.impact-text h3,
[lang=cs_CZ] .prose.impact-text h4,
[lang=cs_CZ] .prose.impact-text h5,
[lang=cs_CZ] .prose.impact-text h6,
[lang=hu_HU] .prose.impact-text h1,
[lang=hu_HU] .prose.impact-text h2,
[lang=hu_HU] .prose.impact-text h3,
[lang=hu_HU] .prose.impact-text h4,
[lang=hu_HU] .prose.impact-text h5,
[lang=hu_HU] .prose.impact-text h6,
[lang=pl_PL] .prose.impact-text h1,
[lang=pl_PL] .prose.impact-text h2,
[lang=pl_PL] .prose.impact-text h3,
[lang=pl_PL] .prose.impact-text h4,
[lang=pl_PL] .prose.impact-text h5,
[lang=pl_PL] .prose.impact-text h6,
[lang=tr_tr] .prose.impact-text h1,
[lang=tr_tr] .prose.impact-text h2,
[lang=tr_tr] .prose.impact-text h3,
[lang=tr_tr] .prose.impact-text h4,
[lang=tr_tr] .prose.impact-text h5,
[lang=tr_tr] .prose.impact-text h6,
[lang=vi_vi] .prose.impact-text h1,
[lang=vi_vi] .prose.impact-text h2,
[lang=vi_vi] .prose.impact-text h3,
[lang=vi_vi] .prose.impact-text h4,
[lang=vi_vi] .prose.impact-text h5,
[lang=vi_vi] .prose.impact-text h6,
html[lang=cs] .prose.impact-text h1,
html[lang=cs] .prose.impact-text h2,
html[lang=cs] .prose.impact-text h3,
html[lang=cs] .prose.impact-text h4,
html[lang=cs] .prose.impact-text h5,
html[lang=cs] .prose.impact-text h6,
html[lang=hu] .prose.impact-text h1,
html[lang=hu] .prose.impact-text h2,
html[lang=hu] .prose.impact-text h3,
html[lang=hu] .prose.impact-text h4,
html[lang=hu] .prose.impact-text h5,
html[lang=hu] .prose.impact-text h6,
html[lang=pl] .prose.impact-text h1,
html[lang=pl] .prose.impact-text h2,
html[lang=pl] .prose.impact-text h3,
html[lang=pl] .prose.impact-text h4,
html[lang=pl] .prose.impact-text h5,
html[lang=pl] .prose.impact-text h6,
html[lang=tr] .prose.impact-text h1,
html[lang=tr] .prose.impact-text h2,
html[lang=tr] .prose.impact-text h3,
html[lang=tr] .prose.impact-text h4,
html[lang=tr] .prose.impact-text h5,
html[lang=tr] .prose.impact-text h6,
html[lang=vi] .prose.impact-text h1,
html[lang=vi] .prose.impact-text h2,
html[lang=vi] .prose.impact-text h3,
html[lang=vi] .prose.impact-text h4,
html[lang=vi] .prose.impact-text h5,
html[lang=vi] .prose.impact-text h6 {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .prose.impact-text h1,
[lang=ko_ko] .prose.impact-text h2,
[lang=ko_ko] .prose.impact-text h3,
[lang=ko_ko] .prose.impact-text h4,
[lang=ko_ko] .prose.impact-text h5,
[lang=ko_ko] .prose.impact-text h6,
html[lang=ko] .prose.impact-text h1,
html[lang=ko] .prose.impact-text h2,
html[lang=ko] .prose.impact-text h3,
html[lang=ko] .prose.impact-text h4,
html[lang=ko] .prose.impact-text h5,
html[lang=ko] .prose.impact-text h6 {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .prose.impact-text h1,
[lang=th_th] .prose.impact-text h2,
[lang=th_th] .prose.impact-text h3,
[lang=th_th] .prose.impact-text h4,
[lang=th_th] .prose.impact-text h5,
[lang=th_th] .prose.impact-text h6,
html[lang=th] .prose.impact-text h1,
html[lang=th] .prose.impact-text h2,
html[lang=th] .prose.impact-text h3,
html[lang=th] .prose.impact-text h4,
html[lang=th] .prose.impact-text h5,
html[lang=th] .prose.impact-text h6 {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .prose.impact-text h1,
[lang=ja] .prose.impact-text h2,
[lang=ja] .prose.impact-text h3,
[lang=ja] .prose.impact-text h4,
[lang=ja] .prose.impact-text h5,
[lang=ja] .prose.impact-text h6,
html[lang=ja] .prose.impact-text h1,
html[lang=ja] .prose.impact-text h2,
html[lang=ja] .prose.impact-text h3,
html[lang=ja] .prose.impact-text h4,
html[lang=ja] .prose.impact-text h5,
html[lang=ja] .prose.impact-text h6 {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .prose.impact-text h1,
[lang=zh-cn] .prose.impact-text h2,
[lang=zh-cn] .prose.impact-text h3,
[lang=zh-cn] .prose.impact-text h4,
[lang=zh-cn] .prose.impact-text h5,
[lang=zh-cn] .prose.impact-text h6,
[lang=zh-hant] .prose.impact-text h1,
[lang=zh-hant] .prose.impact-text h2,
[lang=zh-hant] .prose.impact-text h3,
[lang=zh-hant] .prose.impact-text h4,
[lang=zh-hant] .prose.impact-text h5,
[lang=zh-hant] .prose.impact-text h6,
html[lang=zh-cn] .prose.impact-text h1,
html[lang=zh-cn] .prose.impact-text h2,
html[lang=zh-cn] .prose.impact-text h3,
html[lang=zh-cn] .prose.impact-text h4,
html[lang=zh-cn] .prose.impact-text h5,
html[lang=zh-cn] .prose.impact-text h6,
html[lang=zh-hant] .prose.impact-text h1,
html[lang=zh-hant] .prose.impact-text h2,
html[lang=zh-hant] .prose.impact-text h3,
html[lang=zh-hant] .prose.impact-text h4,
html[lang=zh-hant] .prose.impact-text h5,
html[lang=zh-hant] .prose.impact-text h6 {
font-family: 'Riot Sans CN', sans-serif
}
.in-page-anchor {
position: relative
}
.in-page-anchor:before {
content: '';
position: relative;
top: -160px
}
.inline-image {
clear: both;
margin: 5px auto 0;
width: 100%
}
.inline-image>a {
display: block;
text-decoration: none
}
@media screen and (min-width:550px) {
.inline-image--left {
float: left;
margin-right: 20px
}
}
@media screen and (min-width:960px) {
.inline-image--left {
margin-right: 40px
}
}
@media screen and (min-width:550px) {
.inline-image--right {
float: right;
margin-left: 20px
}
}
@media screen and (min-width:960px) {
.inline-image--right {
margin-left: 40px
}
}
.inline-image--center {
margin-left: auto;
margin-right: auto
}
@media screen and (min-width:550px) {
.inline-image--small {
max-width: 33.333%
}
}
.inline-image--small.inline-image--center.inline-image--free,
.inline-image--small.inline-image--center.inline-image--landscape {
max-width: 461.667px
}
@media screen and (min-width:550px) {
.inline-image--small.inline-image--center.inline-image--portrait,
.inline-image--small.inline-image--center.inline-image--square {
max-width: 300px
}
}
@media screen and (min-width:550px) {
.inline-image--medium {
max-width: 50%
}
}
@media screen and (min-width:550px) {
.inline-image--medium.inline-image--center.inline-image--free,
.inline-image--medium.inline-image--center.inline-image--landscape {
max-width: 705px
}
}
@media screen and (min-width:550px) {
.inline-image--medium.inline-image--center.inline-image--portrait,
.inline-image--medium.inline-image--center.inline-image--square {
max-width: 500px
}
}
.inline-image--full {
margin-left: auto;
margin-right: auto;
float: none
}
.showLatestNews .inline-image--full img {
width: 100%
}
@media screen and (min-width:550px) {
.inline-image--full.inline-image--portrait,
.inline-image--full.inline-image--square {
max-width: 705px
}
}
.inline-image--with-overlay {
position: relative
}
.inline-image__overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
cursor: pointer
}
.inline-image__overlay-button {
opacity: 0;
width: 100%;
height: 100%
}
.inline-video {
margin-left: auto;
margin-right: auto
}
.inline-video--small {
max-width: 464.167px
}
@media screen and (min-width:550px) {
.inline-video--small {
max-width: 461.667px
}
}
.inline-video--medium {
max-width: 707.5px
}
@media screen and (min-width:550px) {
.inline-video--medium {
max-width: 705px
}
}
.job-description {
position: relative;
z-index: 1;
max-width: 1000px;
margin: 0 auto
}
.job-description .prose li,
.job-description .prose p {
font-size: 1.2rem
}
@media screen and (min-width:960px) {
.job-description {
min-height: 550px
}
}
.job-location-range {
margin-bottom: 2rem
}
.job-location-range li {
font-size: 1.1rem;
list-style: none;
margin-left: 0;
margin-top: 1rem
}
.job-eeo {
font-size: .9rem;
font-style: italic
}
.showLatestNews .latest-news {
padding: 32px
}
.showLatestNews .latest-news .grid {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
row-gap: 32px
}
@media screen and (min-width:960px) {
.showLatestNews .latest-news {
padding: 0;
margin-top: 0
}
}
.showLatestNews .latest-news .tablet-landscape-one-half {
width: 100%;
padding-left: 0 !important
}
.showLatestNews .latest-news .content-gutter {
padding-left: 0;
padding-right: 0
}
.showLatestNews .latest-news h2 {
font-size: 32px;
margin-bottom: 32px
}
.showLatestNews .latest-news h2 span {
position: relative
}
.showLatestNews .latest-news h2 span:after {
position: absolute;
width: 100%;
height: 4px;
bottom: 0;
left: 0;
content: '';
background-image: url(/assets/img/structure/a05cc7654fae18a3cb2be7ffde1de684/brush-line.svg)
}
@media screen and (min-width:550px) {
.showLatestNews .latest-news h2 {
font-size: 38px
}
}
@media screen and (min-width:1440px) {
.showLatestNews .latest-news h2 {
text-align: left;
font-size: 44px
}
}
.showLatestNews .widget.widget--spacing-small:has(.latest-news) {
margin-top: 0
}
.showLatestNews .grid__item.two-twelfths.tablet-one-twelfth.desktop-one-quarter {
width: 100%;
padding-left: 0
}
.showLatestNews .grid__item.ten-twelfths.tablet-eleven-twelfths.desktop-three-quarters {
width: 100%;
padding-left: 0
}
@media screen and (min-width:960px) {
.showLatestNews .visible--mobile .latest-news {
display: none
}
}
.showLatestNews .visible--desktop .latest-news {
display: none
}
@media screen and (min-width:960px) {
.showLatestNews .visible--desktop .latest-news {
display: block
}
}
@media screen and (min-width:960px) {
.load-more {
margin-top: 60px
}
}
@media screen and (min-width:960px) {
.flexbox body {
min-height: 100vh;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column
}
}
.main {
position: relative;
background-color: #e7e6e3;
color: #2b2a29
}
.main:after,
.main:before {
content: "";
display: table
}
.main:after {
clear: both
}
@media screen and (min-width:960px) {
.main {
min-height: 25rem
}
.flexbox .main {
-ms-flex-positive: 1;
flex-grow: 1
}
}
.impact-report-page .main {
background-color: #eff3ef
}
.main.showLatestNews {
background-color: #dbd9d6;
max-width: 1440px;
margin: 0 auto;
padding: 48px 0 32px
}
.main.showLatestNews .grid {
margin-left: 0
}
@media screen and (min-width:960px) {
.main.showLatestNews {
padding: 64px 0
}
.main.showLatestNews .grid.row {
display: grid;
grid-template-columns: 2fr 1fr;
-moz-column-gap: 64px;
column-gap: 64px;
max-width: 1440px;
padding-left: 16px;
padding-right: 16px
}
}
@media screen and (min-width:960px) {
.main.showLatestNews .grid.row {
padding-left: 100px;
padding-right: 16px
}
}
@media screen and (min-width:1440px) {
.main.showLatestNews .grid.row {
-moz-column-gap: 120px;
column-gap: 120px;
padding-left: 0;
padding-right: 0
}
}
body:has(.showLatestNews) {
background-color: #dbd9d6
}
.maxi-grid>.heading {
margin-bottom: 20px
}
@media screen and (min-width:550px) {
.maxi-grid>.heading {
margin-bottom: 30px
}
}
.maxi-grid .summary {
margin-bottom: 40px
}
@media screen and (min-width:1280px) {
.maxi-grid .summary {
margin-bottom: 100px
}
}
@media screen and (min-width:800px) {
.maxi-grid .tablet-landscape-one-half:nth-last-child(1) .summary,
.maxi-grid .tablet-landscape-one-half:nth-last-child(2):nth-child(odd) .summary {
margin-bottom: 0
}
}
@media screen and (max-width:959px) {
.maxi-grid .summary__sell {
display: none
}
}
.media-list__row {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column
}
.media-list__row+.media-list__row {
margin-top: 20px
}
@media screen and (min-width:550px) {
.media-list__row {
-ms-flex-direction: row;
flex-direction: row
}
.media-list__row+.media-list__row {
margin-top: 0
}
}
.no-flexbox.no-flexboxlegacy .media-list__row {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 1440px
}
.media-list__left {
display: -ms-flexbox;
display: flex;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-order: 2;
order: 2;
margin-top: 20px
}
@media screen and (min-width:550px) {
.media-list__left {
margin-top: 0;
-ms-flex-order: 1;
order: 1
}
}
.no-flexbox.no-flexboxlegacy .media-list__left {
display: inline-block;
width: 100%;
vertical-align: middle;
padding-left: 20px
}
@media screen and (min-width:550px) {
.no-flexbox.no-flexboxlegacy .media-list__left {
width: 50%;
padding-left: 40px
}
}
.media-list__left-inner {
padding: 0 20px;
width: 100%
}
@media screen and (min-width:960px) {
.media-list__left-inner {
width: 450px;
padding: 0
}
}
.media-list__button,
.media-list__content,
.media-list__heading {
margin-top: 20px
}
.media-list__right {
-ms-flex: 1 1 100%;
flex: 1 1 100%;
height: 320px;
-ms-flex-order: 1;
order: 1;
overflow: hidden;
position: relative;
background-color: #2b2a29
}
@media screen and (min-width:550px) {
.media-list__right {
-ms-flex-order: 2;
order: 2;
height: calc(100vh - 70px)
}
}
@media screen and (min-width:960px) {
.media-list__right {
height: calc(100vh - 90px)
}
}
.no-flexbox.no-flexboxlegacy .media-list__right {
display: inline-block;
width: 100%;
vertical-align: middle
}
@media screen and (min-width:550px) {
.no-flexbox.no-flexboxlegacy .media-list__right {
width: 50%
}
}
.media-list__right .video-preview__background-image {
transition: all .3s ease-out;
transform: translateZ(0)
}
.media-list__right .media-list__right-inner {
height: 100%
}
.media-list__right:active .video-preview__background-image,
.media-list__right:focus .video-preview__background-image,
.media-list__right:hover .video-preview__background-image {
transition-duration: .1s;
transform: scale(1.05) translateZ(0);
opacity: .4
}
.media-list__video-heading {
pointer-events: none
}
.media-list__video-heading .media-caption {
position: absolute;
bottom: 20px;
left: 20px
}
@media screen and (min-width:960px) {
.media-list__video-heading .media-caption {
left: 40px;
bottom: 40px
}
}
.media-list__video-heading:before {
content: '';
position: absolute;
height: 100px;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to top, rgba(43, 42, 41, .5) 70px, rgba(43, 42, 41, 0))
}
@media screen and (min-width:960px) {
.media-list__video-heading:before {
content: none
}
}
@media screen and (max-width:549px) {
.mobile-carousel .grid {
margin-left: 0
}
.mobile-carousel .grid__item {
padding-left: 0
}
}
.mobile-carousel .flickity-prev-next-button {
display: none !important
}
.monospace {
color: #d1363a;
font-size: .75rem;
line-height: 1.667;
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em
}
[lang=cs_CZ] .monospace,
[lang=hu_HU] .monospace,
[lang=pl_PL] .monospace,
[lang=tr_tr] .monospace,
[lang=vi_vi] .monospace,
html[lang=cs] .monospace,
html[lang=hu] .monospace,
html[lang=pl] .monospace,
html[lang=tr] .monospace,
html[lang=vi] .monospace {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .monospace,
html[lang=ko] .monospace {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .monospace,
html[lang=th] .monospace {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .monospace,
html[lang=ja] .monospace {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .monospace,
[lang=zh-hant] .monospace,
html[lang=zh-cn] .monospace,
html[lang=zh-hant] .monospace {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
@media screen and (min-width:550px) {
.monospace {
font-size: .875rem;
line-height: 1.571
}
}
.monospace--light {
color: #e7e6e3
}
.monospace--dark {
color: #656462
}
.navigation {
font-family: 'Riot Sans Latin', Arial, sans-serif;
letter-spacing: -.03em
}
[lang=cs_CZ] .navigation,
[lang=hu_HU] .navigation,
[lang=pl_PL] .navigation,
[lang=tr_tr] .navigation,
[lang=vi_vi] .navigation,
html[lang=cs] .navigation,
html[lang=hu] .navigation,
html[lang=pl] .navigation,
html[lang=tr] .navigation,
html[lang=vi] .navigation {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .navigation,
html[lang=ko] .navigation {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .navigation,
html[lang=th] .navigation {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .navigation,
html[lang=ja] .navigation {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .navigation,
[lang=zh-hant] .navigation,
html[lang=zh-cn] .navigation,
html[lang=zh-hant] .navigation {
font-family: 'Riot Sans CN', sans-serif
}
@media screen and (max-width:959px) {
.navigation--primary {
transform: translateZ(0);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background-color: #252423;
transition: height .3s ease-out;
z-index: 1;
background-image: url(/assets/img/structure/7d776943173a38525a926c9d1cafde3c/texture-dark@2x.jpg);
background-size: 50%;
background-repeat: repeat
}
.navigation--primary.is-active {
height: 100%
}
.navigation--primary.is-active .navigation__link--1 {
transition: none !important
}
.cssanimations .navigation--primary.is-active .navigation__link--1 {
-webkit-animation: reveal-down 1s 175ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 175ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0
}
.navigation--primary.is-active .navigation__link--2 {
transition: none !important
}
.cssanimations .navigation--primary.is-active .navigation__link--2 {
-webkit-animation: reveal-down 1s 250ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 250ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0
}
.navigation--primary.is-active .navigation__link--3 {
transition: none !important
}
.cssanimations .navigation--primary.is-active .navigation__link--3 {
-webkit-animation: reveal-down 1s 325ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 325ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0
}
.navigation--primary.is-active .navigation__link--4 {
transition: none !important
}
.cssanimations .navigation--primary.is-active .navigation__link--4 {
-webkit-animation: reveal-down 1s .4s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s .4s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0
}
.navigation--primary.is-active .navigation__link--5 {
transition: none !important
}
.cssanimations .navigation--primary.is-active .navigation__link--5 {
-webkit-animation: reveal-down 1s 475ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 475ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0
}
.navigation--primary.is-active .navigation__link--6 {
transition: none !important
}
.cssanimations .navigation--primary.is-active .navigation__link--6 {
-webkit-animation: reveal-down 1s 550ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 550ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0
}
.navigation--primary.is-active .navigation__link--7 {
transition: none !important
}
.cssanimations .navigation--primary.is-active .navigation__link--7 {
-webkit-animation: reveal-down 1s 625ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 625ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0
}
.navigation--primary.is-active .navigation__link--8 {
transition: none !important
}
.cssanimations .navigation--primary.is-active .navigation__link--8 {
-webkit-animation: reveal-down 1s .7s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s .7s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0
}
.navigation--primary.is-active .navigation__link--9 {
transition: none !important
}
.cssanimations .navigation--primary.is-active .navigation__link--9 {
-webkit-animation: reveal-down 1s 775ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 775ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0
}
.navigation--primary.is-active .navigation__link--10 {
transition: none !important
}
.cssanimations .navigation--primary.is-active .navigation__link--10 {
-webkit-animation: reveal-down 1s 850ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 850ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0
}
.navigation__close {
height: 50px;
line-height: 50px;
width: 61px;
background: 0 0;
border: 0;
transition: all .3s ease-out
}
.navigation__close:active .icon path,
.navigation__close:focus .icon path,
.navigation__close:hover .icon path {
fill: #d1363a;
transition-duration: .1s
}
.navigation__item {
display: block;
position: relative;
list-style: none;
padding-left: 40px
}
.navigation__link {
display: inline-block;
font-weight: 800;
line-height: 1;
color: #e7e6e3;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 10px;
font-size: 1.25rem
}
.navigation__link:active,
.navigation__link:focus,
.navigation__link:hover {
text-decoration: none;
color: #e7e6e3
}
.navigation__link--primary {
position: relative;
font-weight: 800
}
.navigation__link--primary:before {
content: '';
position: absolute;
height: 36px;
width: 6px;
top: 2px;
left: -40px;
background-image: url(/assets/img/structure/ea324fbda710409b6501b211fed6df41/brush-line--vertical.svg);
background-repeat: no-repeat;
background-position: 100% 0;
background-size: 6px 36px;
display: none
}
.navigation__link--primary.is-active:before,
.navigation__link--primary:focus:before {
display: block
}
.navigation__sub-items .navigation__item {
padding-left: 30px
}
.navigation__sub-items .navigation__link {
font-weight: 700;
font-size: 1rem
}
.navigation__sub-items .navigation__link.is-active,
.navigation__sub-items .navigation__link:focus {
color: #d1363a
}
}
@media screen and (min-width:550px) and (max-width:959px) {
.navigation__item {
padding-left: 80px
}
.navigation__link {
padding: 20px;
font-size: 1.625rem
}
.navigation__link--primary:before {
top: 15px;
left: -80px
}
.navigation__sub-items .navigation__link {
font-size: 1.125rem
}
}
@media screen and (min-width:960px) {
.navigation--primary {
position: relative
}
.navigation__item {
margin-left: 0;
display: inline-block;
vertical-align: top;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center
}
.navigation__link--primary {
position: relative;
font-weight: 800
}
.navigation__link--primary:after {
content: '';
position: absolute;
height: 4px;
width: 0;
bottom: 18px;
right: 50%;
margin-right: -60px;
transition: width .3s ease-out;
border-radius: 4px;
background-image: url(/assets/img/structure/df039d781584a56af15c56e80deb0f8d/brush-line--muted.svg);
background-repeat: no-repeat;
background-position: 100% 0;
background-size: 120px 4px
}
.navigation__link--primary.is-active:after,
.navigation__link--primary:active:after,
.navigation__link--primary:focus:after,
.navigation__link--primary:hover:after {
background-position: 0 0;
width: 120px;
margin-left: -60px;
left: 50%;
right: auto;
transition-duration: .1s
}
.navigation__link--primary.is-active:after {
background-image: url(/assets/img/structure/a05cc7654fae18a3cb2be7ffde1de684/brush-line.svg)
}
.navigation__link {
display: block;
padding: 20px;
min-height: 70px;
line-height: 30px
}
.navigation__link.is-active,
.navigation__link:active,
.navigation__link:focus,
.navigation__link:hover {
color: #e7e6e3
}
.navigation__link.is-active:after,
.navigation__link:active:after,
.navigation__link:focus:after,
.navigation__link:hover:after {
display: block
}
.navigation__sub-items {
height: 0;
transition: height .2s ease-out
}
.navigation__sub-items .navigation__link {
text-transform: uppercase;
padding-top: 6px;
padding-bottom: 4px;
font-size: .688rem;
letter-spacing: -.03em;
color: #8a8887;
min-height: 30px;
line-height: 20px
}
.navigation__sub-items .navigation__link.is-active,
.navigation__sub-items .navigation__link:active,
.navigation__sub-items .navigation__link:focus,
.navigation__sub-items .navigation__link:hover {
color: #e7e6e3
}
.navigation__sub-items-list {
height: 0;
overflow: hidden;
position: absolute;
bottom: 0;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
white-space: nowrap
}
.navigation__link.is-active+.navigation__sub-items {
height: 30px;
margin-top: 20px
}
.navigation__link.is-active+.navigation__sub-items .navigation__sub-items-list {
height: 30px;
margin-top: 20px
}
}
.navigation--secondary .icon {
margin-right: 10px;
vertical-align: 0
}
.navigation--secondary .navigation__link {
color: #adacaa;
font-size: .875rem;
font-weight: 700;
position: relative
}
.navigation--secondary .navigation__link:after {
content: '';
position: absolute;
height: 2px;
width: 0;
bottom: 20px;
right: 50%;
margin-right: -30px;
transition: width .3s ease-out;
border-radius: 4px;
background-image: url(/assets/img/structure/df039d781584a56af15c56e80deb0f8d/brush-line--muted.svg);
background-repeat: no-repeat;
background-position: 100% 0;
background-size: 60px 2px;
-ms-transform: translateX(15px);
transform: translateX(15px)
}
.navigation--secondary .navigation__link.is-active:after,
.navigation--secondary .navigation__link:active:after,
.navigation--secondary .navigation__link:focus:after,
.navigation--secondary .navigation__link:hover:after {
background-position: 0 0;
width: 60px;
margin-left: -30px;
left: 50%;
right: auto;
transition-duration: .1s
}
.navigation--secondary .navigation__link.is-active:after {
background-image: url(/assets/img/structure/a05cc7654fae18a3cb2be7ffde1de684/brush-line.svg)
}
@media screen and (min-width:960px) and (max-width:1279px) {
.navigation__link {
padding: 20px 10px
}
}
.office-randomiser {
position: relative;
background-color: #2b2a29;
background-image: url(/assets/img/structure/7d776943173a38525a926c9d1cafde3c/texture-dark@2x.jpg);
background-size: 50%;
background-repeat: repeat;
-webkit-clip-path: polygon(0 20px, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 20px, 100% 0, 100% 100%, 0 100%);
margin-top: -20px;
padding-top: 40px;
padding-bottom: 40px
}
@media screen and (min-width:550px) {
.office-randomiser {
padding-top: 50px
}
}
@media screen and (min-width:1280px) {
.office-randomiser {
padding-top: 80px
}
}
@media screen and (min-width:550px) {
.office-randomiser:before {
content: '';
position: absolute;
width: 256px;
height: 256px;
top: 300px;
right: 0;
background-size: cover;
pointer-events: none
}
}
@media screen and (min-width:960px) {
.office-randomiser:before {
width: 320px;
height: 320px;
top: 350px
}
}
.office-randomiser>* {
position: relative
}
@media screen and (min-width:550px) {
.office-randomiser .randomiser {
margin-top: 60px
}
}
@media screen and (min-width:1440px) {
.office-randomiser .randomiser {
margin-top: 100px
}
}
.office-randomiser .randomiser .grid__item {
transform: translateZ(0)
}
.office-randomiser__heading {
margin-bottom: 40px
}
.widget--office-randomise {
margin-bottom: 0 !important
}
.offset-images {
max-width: 1440px;
margin-left: auto;
margin-right: auto
}
.offset-images:after,
.offset-images:before {
content: "";
display: table
}
.offset-images:after {
clear: both
}
.offset-images__one,
.offset-images__three,
.offset-images__two {
position: relative;
width: 72%;
margin-bottom: 90px
}
@media screen and (min-width:960px) {
.offset-images__one,
.offset-images__three,
.offset-images__two {
margin-bottom: 10%
}
}
.offset-images__one {
max-width: 820px;
float: left
}
@media screen and (min-width:550px) {
.offset-images__one {
width: 48%
}
}
.offset-images__two {
float: right
}
@media screen and (min-width:550px) {
.offset-images__two {
width: 40%;
padding-top: 15%
}
}
.offset-images__three {
position: relative;
clear: left;
float: left
}
@media screen and (min-width:550px) {
.offset-images__three {
margin-bottom: 0;
width: 48%;
padding-left: 13%
}
}
.offset-images__three:before {
content: '';
position: absolute;
width: 133.28px;
height: 138.38000000000002px;
top: -60px;
left: 0;
background-image: url(/assets/img/content/9edf70513347a77b93f46fe05e0623db/sketch-1--small.jpg);
background-size: 100%
}
@media screen and (min-width:400px) {
.offset-images__three:before {
top: -70px;
width: 188.16px;
height: 195.35999999999999px
}
}
@media screen and (min-width:550px) {
.offset-images__three:before {
width: 219.52px;
height: 227.92000000000002px;
left: auto;
top: -80px;
right: 30%
}
}
@media screen and (min-width:960px) {
.offset-images__three:before {
background-image: url(/assets/img/content/dab62b3c7fc7d2adc1930f831843b9c5/sketch-1.jpg);
width: 392px;
height: 407px;
top: -10%;
right: 40%
}
}
@media screen and (min-width:1280px) {
.offset-images__three:before {
right: 50%
}
}
.offset-images__content {
position: relative;
clear: right;
float: right;
padding-left: 20px;
padding-right: 20px
}
@media screen and (min-width:550px) {
.offset-images__content {
padding-right: 40px;
padding-left: 0;
width: 40%
}
}
.offset-images__content .copy {
max-width: 440px
}
.offset-images__caption {
position: absolute;
left: 100%;
bottom: 0;
white-space: nowrap;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
margin-left: 20px
}
@media screen and (min-width:550px) {
.offset-images__caption {
margin-left: 30px
}
}
@media screen and (min-width:960px) {
.offset-images__caption {
margin-left: 40px
}
}
.offset-images__caption path {
fill: #2b2a29
}
.offset-images__caption span {
vertical-align: 0
}
.offset-images__caption--left {
left: 0;
margin-left: 0;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%
}
@media screen and (min-width:960px) {
.offset-images__caption--left {
margin-left: -10px
}
}
.pre-footer {
position: relative;
overflow: hidden;
padding-bottom: 400px
}
@media screen and (min-width:550px) {
.pre-footer {
padding-bottom: 500px
}
}
@media screen and (min-width:960px) {
.pre-footer {
padding-bottom: 0
}
}
.pre-footer .heading {
text-shadow: 0 0 10px #e7e6e3
}
.pre-footer__bg {
content: '';
position: absolute;
width: 100%;
height: 416.5px;
bottom: 0;
left: 0;
pointer-events: none;
background-size: auto 100%;
background-position: 0 100%;
background-repeat: no-repeat
}
@media screen and (min-width:550px) {
.pre-footer__bg {
height: 541.45px
}
}
@media screen and (min-width:1440px) {
.pre-footer__bg {
width: 624.75px;
height: 624.75px
}
}
.pre-footer__inner {
position: relative;
text-align: center
}
@media screen and (min-width:1280px) {
.pre-footer__inner {
text-align: left
}
}
@media screen and (min-width:550px) {
.pre-footer__heading {
white-space: pre-wrap;
margin-bottom: 20px
}
}
@media screen and (min-width:960px) {
.pre-footer__heading {
margin-bottom: 40px
}
}
@media screen and (min-width:960px) {
.pre-footer__items {
width: 40%;
margin-left: auto;
margin-bottom: 20px;
min-height: 470px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
}
@media screen and (min-width:1440px) {
.pre-footer__items {
width: 50%;
min-height: 560px
}
}
.pre-footer__item {
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
display: -ms-flexbox;
display: flex;
height: 100%;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between
}
@media screen and (min-width:960px) {
.pre-footer__item {
text-align: left
}
}
@media screen and (min-width:1440px) {
.pre-footer__item {
padding-top: 50px;
padding-bottom: 50px
}
}
.pre-footer__item-heading {
padding-top: 10px;
padding-bottom: 10px;
white-space: pre-wrap
}
.pre-footer__item-separator {
transform: rotate(-1.5deg) translateZ(0);
opacity: .5;
max-width: 570px
}
.prose>*+*,
.prose>div>*+* {
margin-top: 20px
}
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-weight: 800;
color: #2b2a29;
margin-top: 30px
}
[lang=cs_CZ] .prose h1,
[lang=cs_CZ] .prose h2,
[lang=cs_CZ] .prose h3,
[lang=cs_CZ] .prose h4,
[lang=cs_CZ] .prose h5,
[lang=cs_CZ] .prose h6,
[lang=hu_HU] .prose h1,
[lang=hu_HU] .prose h2,
[lang=hu_HU] .prose h3,
[lang=hu_HU] .prose h4,
[lang=hu_HU] .prose h5,
[lang=hu_HU] .prose h6,
[lang=pl_PL] .prose h1,
[lang=pl_PL] .prose h2,
[lang=pl_PL] .prose h3,
[lang=pl_PL] .prose h4,
[lang=pl_PL] .prose h5,
[lang=pl_PL] .prose h6,
[lang=tr_tr] .prose h1,
[lang=tr_tr] .prose h2,
[lang=tr_tr] .prose h3,
[lang=tr_tr] .prose h4,
[lang=tr_tr] .prose h5,
[lang=tr_tr] .prose h6,
[lang=vi_vi] .prose h1,
[lang=vi_vi] .prose h2,
[lang=vi_vi] .prose h3,
[lang=vi_vi] .prose h4,
[lang=vi_vi] .prose h5,
[lang=vi_vi] .prose h6,
html[lang=cs] .prose h1,
html[lang=cs] .prose h2,
html[lang=cs] .prose h3,
html[lang=cs] .prose h4,
html[lang=cs] .prose h5,
html[lang=cs] .prose h6,
html[lang=hu] .prose h1,
html[lang=hu] .prose h2,
html[lang=hu] .prose h3,
html[lang=hu] .prose h4,
html[lang=hu] .prose h5,
html[lang=hu] .prose h6,
html[lang=pl] .prose h1,
html[lang=pl] .prose h2,
html[lang=pl] .prose h3,
html[lang=pl] .prose h4,
html[lang=pl] .prose h5,
html[lang=pl] .prose h6,
html[lang=tr] .prose h1,
html[lang=tr] .prose h2,
html[lang=tr] .prose h3,
html[lang=tr] .prose h4,
html[lang=tr] .prose h5,
html[lang=tr] .prose h6,
html[lang=vi] .prose h1,
html[lang=vi] .prose h2,
html[lang=vi] .prose h3,
html[lang=vi] .prose h4,
html[lang=vi] .prose h5,
html[lang=vi] .prose h6 {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .prose h1,
[lang=ko_ko] .prose h2,
[lang=ko_ko] .prose h3,
[lang=ko_ko] .prose h4,
[lang=ko_ko] .prose h5,
[lang=ko_ko] .prose h6,
html[lang=ko] .prose h1,
html[lang=ko] .prose h2,
html[lang=ko] .prose h3,
html[lang=ko] .prose h4,
html[lang=ko] .prose h5,
html[lang=ko] .prose h6 {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .prose h1,
[lang=th_th] .prose h2,
[lang=th_th] .prose h3,
[lang=th_th] .prose h4,
[lang=th_th] .prose h5,
[lang=th_th] .prose h6,
html[lang=th] .prose h1,
html[lang=th] .prose h2,
html[lang=th] .prose h3,
html[lang=th] .prose h4,
html[lang=th] .prose h5,
html[lang=th] .prose h6 {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .prose h1,
[lang=ja] .prose h2,
[lang=ja] .prose h3,
[lang=ja] .prose h4,
[lang=ja] .prose h5,
[lang=ja] .prose h6,
html[lang=ja] .prose h1,
html[lang=ja] .prose h2,
html[lang=ja] .prose h3,
html[lang=ja] .prose h4,
html[lang=ja] .prose h5,
html[lang=ja] .prose h6 {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .prose h1,
[lang=zh-cn] .prose h2,
[lang=zh-cn] .prose h3,
[lang=zh-cn] .prose h4,
[lang=zh-cn] .prose h5,
[lang=zh-cn] .prose h6,
[lang=zh-hant] .prose h1,
[lang=zh-hant] .prose h2,
[lang=zh-hant] .prose h3,
[lang=zh-hant] .prose h4,
[lang=zh-hant] .prose h5,
[lang=zh-hant] .prose h6,
html[lang=zh-cn] .prose h1,
html[lang=zh-cn] .prose h2,
html[lang=zh-cn] .prose h3,
html[lang=zh-cn] .prose h4,
html[lang=zh-cn] .prose h5,
html[lang=zh-cn] .prose h6,
html[lang=zh-hant] .prose h1,
html[lang=zh-hant] .prose h2,
html[lang=zh-hant] .prose h3,
html[lang=zh-hant] .prose h4,
html[lang=zh-hant] .prose h5,
html[lang=zh-hant] .prose h6 {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
@media screen and (min-width:550px) {
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
margin-top: 40px
}
}
.prose h1 {
font-family: 'Riot Sans Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-size: 1.875rem;
line-height: 1.133
}
[lang=cs_CZ] .prose h1,
[lang=hu_HU] .prose h1,
[lang=pl_PL] .prose h1,
[lang=tr_tr] .prose h1,
[lang=vi_vi] .prose h1,
html[lang=cs] .prose h1,
html[lang=hu] .prose h1,
html[lang=pl] .prose h1,
html[lang=tr] .prose h1,
html[lang=vi] .prose h1 {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .prose h1,
html[lang=ko] .prose h1 {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .prose h1,
html[lang=th] .prose h1 {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .prose h1,
html[lang=ja] .prose h1 {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .prose h1,
[lang=zh-hant] .prose h1,
html[lang=zh-cn] .prose h1,
html[lang=zh-hant] .prose h1 {
font-family: 'Riot Sans CN', sans-serif
}
@media screen and (min-width:550px) {
.prose h1 {
font-size: 3.125rem;
line-height: 1.16
}
}
@media screen and (min-width:960px) {
.prose h1 {
font-size: 4rem;
line-height: 1.156
}
}
.prose h2 {
font-size: 1.125rem;
line-height: 1.333
}
@media screen and (min-width:550px) {
.prose h2 {
font-size: 1.625rem;
line-height: 1.231
}
}
@media screen and (min-width:960px) {
.prose h2 {
font-size: 1.75rem;
line-height: 1.357
}
}
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
font-size: 1rem;
line-height: 1.375
}
@media screen and (min-width:550px) {
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
font-size: 1.125rem;
line-height: 1.333
}
}
@media screen and (min-width:960px) {
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
font-size: 1.375rem;
line-height: 1.273
}
}
.prose ol,
.prose ul {
display: table
}
.prose li {
margin-left: 25px;
padding-left: 20px
}
.prose a:not(.button) {
font-weight: 700;
color: #2b2a29;
display: inline;
background-image: url(/assets/img/structure/149a1d9c51c7bf69816f75699be94a7e/distressed-underline.svg), url(/assets/img/structure/7d7cf62b9e1571d8046c681d85759354/distressed-underline--primary.svg);
background-repeat: repeat-x, no-repeat;
background-position: 0 95%;
background-size: 680px 2px, 0 0
}
.prose a:not(.button):active,
.prose a:not(.button):focus,
.prose a:not(.button):hover {
background-position: 0 95%;
background-image: url(/assets/img/structure/7d7cf62b9e1571d8046c681d85759354/distressed-underline--primary.svg);
text-decoration: none
}
.prose>:first-child {
margin-top: 0
}
.prose--inverse h1,
.prose--inverse h2,
.prose--inverse h3,
.prose--inverse h4,
.prose--inverse h5,
.prose--inverse h6 {
color: #e7e6e3
}
.prose--inverse a:not(.button) {
color: #e7e6e3;
background-image: url(/assets/img/structure/8be0c3fae45d871dfda6cc462ac74ff2/distressed-underline--light.svg)
}
.prose--inverse a:not(.button):active,
.prose--inverse a:not(.button):focus,
.prose--inverse a:not(.button):hover {
background-image: url(/assets/img/structure/7d7cf62b9e1571d8046c681d85759354/distressed-underline--primary.svg)
}
.prose [style*=box-sizing] {
box-sizing: inherit !important
}
.prose [style*=color] {
color: inherit !important
}
.prose [style*=font-family] {
font-family: inherit !important
}
.prose [style*=font-size] {
font-size: inherit !important
}
.prose [style*=font-style] {
font-style: inherit !important
}
.prose [style*=font-weight] {
font-weight: inherit !important
}
.prose [style*=line-height] {
line-height: inherit !important
}
.prose [style*=text-decoration] {
text-decoration: inherit !important
}
.prose [style*=margin] {
margin: inherit !important
}
.prose ol>br,
.prose ul>br {
display: none
}
.prose li h4 {
margin-top: 0
}
.prose .white-stone>*+* {
margin-top: 20px;
margin-bottom: 20px
}
.prose .white-stone>*+:last-child {
margin-bottom: 0
}
.prose .white-stone hr+br,
.prose .white-stone p+br {
display: none
}
.prose .ui-accordion {
margin-top: 0;
margin-bottom: 0
}
.prose .ui-accordion-content>*+* {
margin-top: 20px
}
.prose .content-right {
float: none !important;
text-align: right
}
.prose hr {
height: 2px;
width: 100%;
max-width: 1440px;
margin-left: auto;
margin-right: auto;
background: 0 0;
background-image: url(/assets/img/structure/ec52d55f0f379518c25d286fb69f4ea6/distressed-stroke.svg);
background-repeat: repeat-x;
background-position: 50% 50%;
background-size: 420px 2px;
border: 0;
opacity: .3;
margin-top: 20px;
margin-bottom: 20px
}
@media screen and (min-width:960px) {
.prose hr {
margin-top: 40px;
margin-bottom: 40px
}
}
.prose ol[type='a']>li {
list-style-type: lower-alpha
}
.prose ol[type='i']>li {
list-style-type: lower-roman
}
.quote p {
font-style: normal;
font-family: 'Riot Sans Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-weight: 800;
font-size: 1.875rem;
line-height: 1.133
}
[lang=cs_CZ] .quote p,
[lang=hu_HU] .quote p,
[lang=pl_PL] .quote p,
[lang=tr_tr] .quote p,
[lang=vi_vi] .quote p,
html[lang=cs] .quote p,
html[lang=hu] .quote p,
html[lang=pl] .quote p,
html[lang=tr] .quote p,
html[lang=vi] .quote p {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .quote p,
html[lang=ko] .quote p {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .quote p,
html[lang=th] .quote p {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .quote p,
html[lang=ja] .quote p {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .quote p,
[lang=zh-hant] .quote p,
html[lang=zh-cn] .quote p,
html[lang=zh-hant] .quote p {
font-family: 'Riot Sans CN', sans-serif
}
@media screen and (min-width:550px) {
.quote p {
font-size: 2.125rem;
line-height: 1.235
}
}
@media screen and (min-width:960px) {
.quote p {
font-size: 2.75rem;
line-height: 1.227
}
}
.quote__image {
width: 100%;
height: 0;
padding-bottom: 100%;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat
}
.quote__content {
padding: 20px 0;
text-align: center
}
.quote__content p {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em
}
[lang=cs_CZ] .quote__content p,
[lang=hu_HU] .quote__content p,
[lang=pl_PL] .quote__content p,
[lang=tr_tr] .quote__content p,
[lang=vi_vi] .quote__content p,
html[lang=cs] .quote__content p,
html[lang=hu] .quote__content p,
html[lang=pl] .quote__content p,
html[lang=tr] .quote__content p,
html[lang=vi] .quote__content p {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .quote__content p,
html[lang=ko] .quote__content p {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .quote__content p,
html[lang=th] .quote__content p {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .quote__content p,
html[lang=ja] .quote__content p {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .quote__content p,
[lang=zh-hant] .quote__content p,
html[lang=zh-cn] .quote__content p,
html[lang=zh-hant] .quote__content p {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
.quote__citation {
display: block;
margin-top: 30px;
font-style: normal
}
.related-articles {
margin-bottom: 20px
}
@media screen and (min-width:550px) {
.related-articles {
margin-bottom: 40px
}
}
@media screen and (min-width:960px) {
.related-articles {
margin-bottom: 60px
}
}
.related-articles .heading {
margin-bottom: 20px
}
.showLatestNews .related-articles .grid.js-load-more-target {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
row-gap: 32px;
padding: 0 32px;
margin-bottom: 32px
}
@media screen and (min-width:960px) {
.showLatestNews .related-articles .grid.js-load-more-target {
-ms-flex-direction: row;
flex-direction: row;
-moz-column-gap: 80px;
column-gap: 80px
}
}
@media screen and (min-width:1440px) {
.showLatestNews .related-articles .grid.js-load-more-target {
padding: 0
}
}
.showLatestNews .related-articles .grid__item.tablet-landscape-one-half {
width: 100%;
padding-left: 0
}
.showLatestNews .related-articles .heading.heading--3 {
text-align: left;
padding: 0 32px
}
@media screen and (min-width:960px) {
.showLatestNews .related-articles .heading.heading--3 {
padding-left: 0
}
}
.results-list .summary--compact {
margin-bottom: 40px
}
.results__search {
margin-bottom: 100px
}
.results__notification {
margin-bottom: 100px
}
.results__group {
margin-bottom: 100px
}
.results__group--spall-spacing-bottom {
margin-bottom: 30px
}
.riotbar-remove-margin {
margin-top: 0 !important
}
.riotbar-root .riotbar-header,
.riotbar-root .search-container,
.riotbar-root .search-container .button--small-circle {
transition: background-color .1s ease-in-out
}
.riotbar-root.riotbar-transparent .riotbar-header {
background-color: transparent;
border-bottom: 0;
transition: background-color .1s ease-in-out
}
.riotbar-root.riotbar-transparent .search-container {
background-color: transparent;
transition: background-color .1s ease-in-out;
box-shadow: inset 0 0 0 1px #f9f9f9
}
.riotbar-root.riotbar-transparent .search-container input::-moz-placeholder {
color: #f9f9f9
}
.riotbar-root.riotbar-transparent .search-container input:-ms-input-placeholder {
color: #f9f9f9
}
.riotbar-root.riotbar-transparent .search-container input::placeholder {
color: #f9f9f9
}
.riotbar-root.riotbar-transparent .search-container .button--small-circle {
background-color: transparent;
transition: background-color .1s ease-in-out
}
[data-riotbar-link-id=login]:not(.riotbar-mobile-menu-link) {
background: #d1363a;
border-radius: 1.6rem !important;
padding: .6rem 1.4rem !important;
min-height: unset;
height: unset !important;
font-size: 12px !important;
line-height: normal !important;
margin-top: 18px !important;
margin-bottom: 20px !important;
transition: background .2s ease-out
}
[data-riotbar-link-id=login]:not(.riotbar-mobile-menu-link):hover {
background: #da5e61
}
.riotbar-locale-switcher {
margin-right: 15px
}
.riotbar-locale-switcher .locale-switcher-dropdown {
left: unset;
top: 70px
}
.row--alt {
position: relative;
background-color: #dbd9d6;
background-image: url(/assets/img/structure/6d79447d110ef217a5a784efe55ba29b/texture-light@2x.jpg);
background-size: 50%;
background-repeat: repeat;
padding-top: 10px;
margin-top: -10px;
padding-bottom: 20px;
-webkit-clip-path: polygon(0 0, 100% 10px, 100% 100%, 0 calc(100% - 20px));
clip-path: polygon(0 0, 100% 10px, 100% 100%, 0 calc(100% - 20px))
}
.row--dark {
position: relative;
background-color: #2b2a29;
background-image: url(/assets/img/structure/7d776943173a38525a926c9d1cafde3c/texture-dark@2x.jpg);
background-size: 50%;
background-repeat: repeat;
padding-top: 20px;
margin-top: -20px;
padding-bottom: 30px;
-webkit-clip-path: polygon(0 20px, 100% 0, 100% 100%, 0 calc(100% - 30px));
clip-path: polygon(0 20px, 100% 0, 100% 100%, 0 calc(100% - 30px))
}
.row--half {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}
@media screen and (min-width:960px) {
.row--half {
-ms-flex-align: center;
align-items: center;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row
}
}
.row--half-padded {
-moz-column-gap: 20px;
column-gap: 20px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
padding: 40px 0
}
@media screen and (min-width:960px) {
.row--half-padded {
-ms-flex-align: center;
align-items: center;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row
}
}
.spacing-bottom {
margin-bottom: 40px
}
@media screen and (min-width:550px) {
.spacing-bottom {
margin-bottom: 80px
}
}
@media screen and (min-width:960px) {
.spacing-bottom {
margin-bottom: 120px
}
}
.spacing-bottom--small {
margin-bottom: 40px
}
@media screen and (min-width:550px) {
.spacing-bottom--small {
margin-bottom: 60px
}
}
@media screen and (min-width:1600px) {
.spacing-bottom--small {
margin-bottom: 80px
}
}
.spacing-bottom:empty {
margin-bottom: 0
}
.swipe {
overflow: hidden;
visibility: hidden;
position: relative
}
.swipe-wrap {
overflow: hidden;
position: relative
}
.swipe-wrap>div {
float: left;
width: 100%;
position: relative;
overflow: hidden
}
@media screen and (max-width:549px) {
.mobile-swipe {
overflow: hidden;
visibility: hidden;
position: relative
}
.mobile-swipe-wrap {
overflow: hidden;
position: relative
}
.mobile-swipe-wrap>div {
float: left;
width: 100%;
position: relative;
overflow: hidden
}
}
.text-button {
padding: 0;
margin: 0;
border: 0;
background: 0 0;
cursor: pointer;
font-family: inherit;
font-size: inherit;
line-height: inherit
}
.text-with-image__text .eyebrow {
margin-top: 30px
}
.text-with-image__text .heading {
margin-top: 10px
}
.text-with-image__text .button,
.text-with-image__text .copy {
margin-top: 20px
}
@media screen and (min-width:960px) {
.text-with-image__text .button,
.text-with-image__text .copy,
.text-with-image__text .eyebrow,
.text-with-image__text .heading {
margin-top: 30px
}
}
@media screen and (min-width:550px) and (max-width:959px) {
@supports ((-o-object-fit:cover) or (object-fit:cover)) {
.text-with-image__image .responsive-media {
min-height: 500px;
padding-bottom: 0 !important
}
.text-with-image__image img {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: 100%
}
}
}
.impact-report-text-with-image .wrapper {
position: relative
}
.impact-report-text-with-image .wrapper .wrapper-id {
position: absolute;
top: -70px
}
@media screen and (min-width:960px) {
.impact-report-text-with-image .wrapper .wrapper-id {
top: 0
}
}
.text-with-image.impact-report .impact-report--desktop-content {
display: none
}
.text-with-image.impact-report .impact-report--desktop-content .content-wrap {
padding-left: 20px;
padding-right: 20px;
max-width: 1500px;
margin: 0 auto
}
@media screen and (min-width:960px) {
.text-with-image.impact-report .impact-report--desktop-content {
display: block
}
.text-with-image.impact-report .impact-report--desktop-content .content-overlay {
position: absolute;
width: 100%;
height: 100%
}
.text-with-image.impact-report .impact-report--desktop-content .content-wrap {
top: 5%;
position: relative
}
}
@media screen and (min-width:1280px) {
.text-with-image.impact-report .impact-report--desktop-content {
padding-left: 0
}
.text-with-image.impact-report .impact-report--desktop-content .content-wrap {
top: 15%
}
}
@media screen and (min-width:1440px) {
.text-with-image.impact-report .impact-report--desktop-content .content-wrap {
top: 25%
}
}
.text-with-image.impact-report .content-right--small-desktop {
max-width: 1920px;
margin: 0 auto
}
.text-with-image.impact-report .content-right--small-desktop .mobile-content {
display: block
}
@media screen and (min-width:960px) {
.text-with-image.impact-report .content-right--small-desktop .mobile-content {
display: none
}
}
.text-with-image.impact-report .content-right--small-desktop .desktop-content {
max-height: 100vh;
display: none
}
@media screen and (min-width:960px) {
.text-with-image.impact-report .content-right--small-desktop .desktop-content {
display: block;
background-position: top right;
background-size: cover;
background-repeat: no-repeat
}
}
.text-with-image.impact-report .heading.heading--3 {
font-family: 'Riot Sans Latin', Arial, sans-serif;
padding-left: 20px;
line-height: 1.1
}
[lang=cs_CZ] .text-with-image.impact-report .heading.heading--3,
[lang=hu_HU] .text-with-image.impact-report .heading.heading--3,
[lang=pl_PL] .text-with-image.impact-report .heading.heading--3,
[lang=tr_tr] .text-with-image.impact-report .heading.heading--3,
[lang=vi_vi] .text-with-image.impact-report .heading.heading--3,
html[lang=cs] .text-with-image.impact-report .heading.heading--3,
html[lang=hu] .text-with-image.impact-report .heading.heading--3,
html[lang=pl] .text-with-image.impact-report .heading.heading--3,
html[lang=tr] .text-with-image.impact-report .heading.heading--3,
html[lang=vi] .text-with-image.impact-report .heading.heading--3 {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .text-with-image.impact-report .heading.heading--3,
html[lang=ko] .text-with-image.impact-report .heading.heading--3 {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .text-with-image.impact-report .heading.heading--3,
html[lang=th] .text-with-image.impact-report .heading.heading--3 {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .text-with-image.impact-report .heading.heading--3,
html[lang=ja] .text-with-image.impact-report .heading.heading--3 {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .text-with-image.impact-report .heading.heading--3,
[lang=zh-hant] .text-with-image.impact-report .heading.heading--3,
html[lang=zh-cn] .text-with-image.impact-report .heading.heading--3,
html[lang=zh-hant] .text-with-image.impact-report .heading.heading--3 {
font-family: 'Riot Sans CN', sans-serif
}
@media screen and (min-width:550px) {
.text-with-image.impact-report .heading.heading--3 {
font-size: 2.75rem
}
}
@media screen and (min-width:960px) {
.text-with-image.impact-report .heading.heading--3 {
font-size: 3rem
}
}
.text-with-image.impact-report .prose {
padding-top: 20px;
padding-bottom: 35px;
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=cs_CZ] .text-with-image.impact-report .prose,
[lang=hu_HU] .text-with-image.impact-report .prose,
[lang=pl_PL] .text-with-image.impact-report .prose,
[lang=tr_tr] .text-with-image.impact-report .prose,
[lang=vi_vi] .text-with-image.impact-report .prose,
html[lang=cs] .text-with-image.impact-report .prose,
html[lang=hu] .text-with-image.impact-report .prose,
html[lang=pl] .text-with-image.impact-report .prose,
html[lang=tr] .text-with-image.impact-report .prose,
html[lang=vi] .text-with-image.impact-report .prose {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .text-with-image.impact-report .prose,
html[lang=ko] .text-with-image.impact-report .prose {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .text-with-image.impact-report .prose,
html[lang=th] .text-with-image.impact-report .prose {
font-family: 'Noto Sans Thai', sans-serif
}
[lang=ja] .text-with-image.impact-report .prose,
html[lang=ja] .text-with-image.impact-report .prose {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .text-with-image.impact-report .prose,
[lang=zh-hant] .text-with-image.impact-report .prose,
html[lang=zh-cn] .text-with-image.impact-report .prose,
html[lang=zh-hant] .text-with-image.impact-report .prose {
font-family: 'Noto Sans CN', sans-serif
}
.text-with-image.impact-report .prose h1,
.text-with-image.impact-report .prose h2,
.text-with-image.impact-report .prose h3,
.text-with-image.impact-report .prose h4,
.text-with-image.impact-report .prose h5,
.text-with-image.impact-report .prose h6 {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=cs_CZ] .text-with-image.impact-report .prose h1,
[lang=cs_CZ] .text-with-image.impact-report .prose h2,
[lang=cs_CZ] .text-with-image.impact-report .prose h3,
[lang=cs_CZ] .text-with-image.impact-report .prose h4,
[lang=cs_CZ] .text-with-image.impact-report .prose h5,
[lang=cs_CZ] .text-with-image.impact-report .prose h6,
[lang=hu_HU] .text-with-image.impact-report .prose h1,
[lang=hu_HU] .text-with-image.impact-report .prose h2,
[lang=hu_HU] .text-with-image.impact-report .prose h3,
[lang=hu_HU] .text-with-image.impact-report .prose h4,
[lang=hu_HU] .text-with-image.impact-report .prose h5,
[lang=hu_HU] .text-with-image.impact-report .prose h6,
[lang=pl_PL] .text-with-image.impact-report .prose h1,
[lang=pl_PL] .text-with-image.impact-report .prose h2,
[lang=pl_PL] .text-with-image.impact-report .prose h3,
[lang=pl_PL] .text-with-image.impact-report .prose h4,
[lang=pl_PL] .text-with-image.impact-report .prose h5,
[lang=pl_PL] .text-with-image.impact-report .prose h6,
[lang=tr_tr] .text-with-image.impact-report .prose h1,
[lang=tr_tr] .text-with-image.impact-report .prose h2,
[lang=tr_tr] .text-with-image.impact-report .prose h3,
[lang=tr_tr] .text-with-image.impact-report .prose h4,
[lang=tr_tr] .text-with-image.impact-report .prose h5,
[lang=tr_tr] .text-with-image.impact-report .prose h6,
[lang=vi_vi] .text-with-image.impact-report .prose h1,
[lang=vi_vi] .text-with-image.impact-report .prose h2,
[lang=vi_vi] .text-with-image.impact-report .prose h3,
[lang=vi_vi] .text-with-image.impact-report .prose h4,
[lang=vi_vi] .text-with-image.impact-report .prose h5,
[lang=vi_vi] .text-with-image.impact-report .prose h6,
html[lang=cs] .text-with-image.impact-report .prose h1,
html[lang=cs] .text-with-image.impact-report .prose h2,
html[lang=cs] .text-with-image.impact-report .prose h3,
html[lang=cs] .text-with-image.impact-report .prose h4,
html[lang=cs] .text-with-image.impact-report .prose h5,
html[lang=cs] .text-with-image.impact-report .prose h6,
html[lang=hu] .text-with-image.impact-report .prose h1,
html[lang=hu] .text-with-image.impact-report .prose h2,
html[lang=hu] .text-with-image.impact-report .prose h3,
html[lang=hu] .text-with-image.impact-report .prose h4,
html[lang=hu] .text-with-image.impact-report .prose h5,
html[lang=hu] .text-with-image.impact-report .prose h6,
html[lang=pl] .text-with-image.impact-report .prose h1,
html[lang=pl] .text-with-image.impact-report .prose h2,
html[lang=pl] .text-with-image.impact-report .prose h3,
html[lang=pl] .text-with-image.impact-report .prose h4,
html[lang=pl] .text-with-image.impact-report .prose h5,
html[lang=pl] .text-with-image.impact-report .prose h6,
html[lang=tr] .text-with-image.impact-report .prose h1,
html[lang=tr] .text-with-image.impact-report .prose h2,
html[lang=tr] .text-with-image.impact-report .prose h3,
html[lang=tr] .text-with-image.impact-report .prose h4,
html[lang=tr] .text-with-image.impact-report .prose h5,
html[lang=tr] .text-with-image.impact-report .prose h6,
html[lang=vi] .text-with-image.impact-report .prose h1,
html[lang=vi] .text-with-image.impact-report .prose h2,
html[lang=vi] .text-with-image.impact-report .prose h3,
html[lang=vi] .text-with-image.impact-report .prose h4,
html[lang=vi] .text-with-image.impact-report .prose h5,
html[lang=vi] .text-with-image.impact-report .prose h6 {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .text-with-image.impact-report .prose h1,
[lang=ko_ko] .text-with-image.impact-report .prose h2,
[lang=ko_ko] .text-with-image.impact-report .prose h3,
[lang=ko_ko] .text-with-image.impact-report .prose h4,
[lang=ko_ko] .text-with-image.impact-report .prose h5,
[lang=ko_ko] .text-with-image.impact-report .prose h6,
html[lang=ko] .text-with-image.impact-report .prose h1,
html[lang=ko] .text-with-image.impact-report .prose h2,
html[lang=ko] .text-with-image.impact-report .prose h3,
html[lang=ko] .text-with-image.impact-report .prose h4,
html[lang=ko] .text-with-image.impact-report .prose h5,
html[lang=ko] .text-with-image.impact-report .prose h6 {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .text-with-image.impact-report .prose h1,
[lang=th_th] .text-with-image.impact-report .prose h2,
[lang=th_th] .text-with-image.impact-report .prose h3,
[lang=th_th] .text-with-image.impact-report .prose h4,
[lang=th_th] .text-with-image.impact-report .prose h5,
[lang=th_th] .text-with-image.impact-report .prose h6,
html[lang=th] .text-with-image.impact-report .prose h1,
html[lang=th] .text-with-image.impact-report .prose h2,
html[lang=th] .text-with-image.impact-report .prose h3,
html[lang=th] .text-with-image.impact-report .prose h4,
html[lang=th] .text-with-image.impact-report .prose h5,
html[lang=th] .text-with-image.impact-report .prose h6 {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .text-with-image.impact-report .prose h1,
[lang=ja] .text-with-image.impact-report .prose h2,
[lang=ja] .text-with-image.impact-report .prose h3,
[lang=ja] .text-with-image.impact-report .prose h4,
[lang=ja] .text-with-image.impact-report .prose h5,
[lang=ja] .text-with-image.impact-report .prose h6,
html[lang=ja] .text-with-image.impact-report .prose h1,
html[lang=ja] .text-with-image.impact-report .prose h2,
html[lang=ja] .text-with-image.impact-report .prose h3,
html[lang=ja] .text-with-image.impact-report .prose h4,
html[lang=ja] .text-with-image.impact-report .prose h5,
html[lang=ja] .text-with-image.impact-report .prose h6 {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .text-with-image.impact-report .prose h1,
[lang=zh-cn] .text-with-image.impact-report .prose h2,
[lang=zh-cn] .text-with-image.impact-report .prose h3,
[lang=zh-cn] .text-with-image.impact-report .prose h4,
[lang=zh-cn] .text-with-image.impact-report .prose h5,
[lang=zh-cn] .text-with-image.impact-report .prose h6,
[lang=zh-hant] .text-with-image.impact-report .prose h1,
[lang=zh-hant] .text-with-image.impact-report .prose h2,
[lang=zh-hant] .text-with-image.impact-report .prose h3,
[lang=zh-hant] .text-with-image.impact-report .prose h4,
[lang=zh-hant] .text-with-image.impact-report .prose h5,
[lang=zh-hant] .text-with-image.impact-report .prose h6,
html[lang=zh-cn] .text-with-image.impact-report .prose h1,
html[lang=zh-cn] .text-with-image.impact-report .prose h2,
html[lang=zh-cn] .text-with-image.impact-report .prose h3,
html[lang=zh-cn] .text-with-image.impact-report .prose h4,
html[lang=zh-cn] .text-with-image.impact-report .prose h5,
html[lang=zh-cn] .text-with-image.impact-report .prose h6,
html[lang=zh-hant] .text-with-image.impact-report .prose h1,
html[lang=zh-hant] .text-with-image.impact-report .prose h2,
html[lang=zh-hant] .text-with-image.impact-report .prose h3,
html[lang=zh-hant] .text-with-image.impact-report .prose h4,
html[lang=zh-hant] .text-with-image.impact-report .prose h5,
html[lang=zh-hant] .text-with-image.impact-report .prose h6 {
font-family: 'Riot Sans CN', sans-serif
}
@media screen and (min-width:960px) {
.text-with-image.impact-report .impact-report-content-wrap {
width: 45%
}
}
.text-with-image.impact-report .impact-report-content-top {
display: -ms-flexbox;
display: flex;
font-size: 18px
}
.text-with-image.impact-report .impact-report-content-top .heading {
font-size: 32px
}
@media screen and (min-width:960px) {
.text-with-image.impact-report .impact-report-content-top {
width: 50%
}
.text-with-image.impact-report .impact-report-content-top .heading {
font-size: 37px
}
}
@media screen and (min-width:1440px) {
.text-with-image.impact-report .impact-report-content-top {
width: 45%
}
}
.text-with-image.impact-report .mobile-content .content-wrap {
padding-left: 20px;
padding-right: 20px
}
[lang=ko_ko] .text-with-image.impact-report .impact-report--eyebrow,
[lang=zh-cn] .text-with-image.impact-report .impact-report--eyebrow,
[lang=zh-hant] .text-with-image.impact-report .impact-report--eyebrow,
html[lang=ko] .text-with-image.impact-report .impact-report--eyebrow,
html[lang=zh-cn] .text-with-image.impact-report .impact-report--eyebrow,
html[lang=zh-hant] .text-with-image.impact-report .impact-report--eyebrow {
-ms-transform-origin: center;
transform-origin: center;
-ms-transform: rotate(0);
transform: rotate(0);
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
text-align: left
}
[lang=ja] .text-with-image.impact-report .impact-report--eyebrow,
html[lang=ja] .text-with-image.impact-report .impact-report--eyebrow {
letter-spacing: -8px
}
.text-with-image.impact-report .impact-report--eyebrow span.ja-character {
display: inline-block;
-ms-transform: rotate(90deg);
transform: rotate(90deg)
}
.text-with-logo {
text-align: center
}
.text-with-logo__heading,
.text-with-logo__image,
.text-with-logo__text {
margin-bottom: 20px
}
.text-with-video .content-center {
max-width: 1800px
}
.text-with-video .grid__item.tablet-one-half {
width: 100% !important
}
@media screen and (min-width:960px) {
.text-with-video .grid__item.tablet-one-half {
width: 50% !important
}
}
.text-with-video__text .eyebrow {
margin-bottom: 24px
}
.text-with-video__text .heading {
font-family: 'Riot Sans Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-weight: 600;
font-size: 34px;
line-height: 38px;
text-transform: uppercase;
padding-bottom: 24px
}
[lang=cs_CZ] .text-with-video__text .heading,
[lang=hu_HU] .text-with-video__text .heading,
[lang=pl_PL] .text-with-video__text .heading,
[lang=tr_tr] .text-with-video__text .heading,
[lang=vi_vi] .text-with-video__text .heading,
html[lang=cs] .text-with-video__text .heading,
html[lang=hu] .text-with-video__text .heading,
html[lang=pl] .text-with-video__text .heading,
html[lang=tr] .text-with-video__text .heading,
html[lang=vi] .text-with-video__text .heading {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .text-with-video__text .heading,
html[lang=ko] .text-with-video__text .heading {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .text-with-video__text .heading,
html[lang=th] .text-with-video__text .heading {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .text-with-video__text .heading,
html[lang=ja] .text-with-video__text .heading {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .text-with-video__text .heading,
[lang=zh-hant] .text-with-video__text .heading,
html[lang=zh-cn] .text-with-video__text .heading,
html[lang=zh-hant] .text-with-video__text .heading {
font-family: 'Riot Sans CN', sans-serif
}
@media screen and (min-width:960px) {
.text-with-video__text .heading {
font-size: 42px;
line-height: 44px
}
}
@media screen and (min-width:1440px) {
.text-with-video__text {
padding-left: 40px
}
}
.text-with-video__video-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background-size: cover;
background-repeat: no-repeat;
aspect-ratio: 16/9;
background-color: #2b2a29;
cursor: pointer;
border: none
}
.text-with-video__video-overlay:active .video-preview__image,
.text-with-video__video-overlay:focus .video-preview__image,
.text-with-video__video-overlay:hover .video-preview__image {
transform: scale(1.05) translateZ(0);
opacity: .4;
transition-duration: .1s
}
.video-preview__image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateZ(0);
transition: all .3s ease-out
}
.text-with-video__video-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
padding-top: 56.25%;
margin-bottom: 24px
}
.text-with-video__video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
z-index: 2
}
@media screen and (min-width:960px) {
.text-with-video__video-wrapper {
margin-bottom: 0
}
}
.text-with-video__video-play-button {
width: 60px !important;
height: 60px !important
}
.text-with-video__video-play-button svg {
-ms-transform: scale(.75);
transform: scale(.75)
}
.text-with-video__cta-button {
margin-bottom: 24px;
margin-top: 24px
}
.underline-button {
position: relative;
font-weight: inherit;
color: #e7e6e3;
transform: translateZ(0)
}
.underline-button:before {
content: '';
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px
}
.underline-button:after {
content: '';
position: absolute;
height: 4px;
width: 100%;
top: 100%;
left: 0;
border-radius: 4px;
background-image: url(/assets/img/structure/a05cc7654fae18a3cb2be7ffde1de684/brush-line.svg);
background-repeat: no-repeat;
background-size: 100% 4px;
background-position: 100% 0;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
opacity: 0;
-webkit-animation: link-underline-mask .3s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: link-underline-mask .3s cubic-bezier(.215, .61, .355, 1) 1 forwards
}
.underline-button path {
fill: #656462
}
.underline-button .icon {
position: absolute;
left: 100%;
margin-left: 10px;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%)
}
.underline-button:active,
.underline-button:focus,
.underline-button:hover {
color: #e7e6e3;
text-decoration: none
}
.underline-button:active:after,
.underline-button:focus:after,
.underline-button:hover:after {
-webkit-clip-path: polygon(0 0, .001% 0, .001% 100%, 0 100%);
clip-path: polygon(0 0, .001% 0, .001% 100%, 0 100%);
-webkit-animation: link-underline-mask-hover .1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: link-underline-mask-hover .1s cubic-bezier(.215, .61, .355, 1) 1 forwards
}
.underline-button--icon:before {
right: -30px
}
.underline-button--dark {
color: #2b2a29
}
.underline-button--dark:active,
.underline-button--dark:focus,
.underline-button--dark:hover {
color: #2b2a29
}
@-webkit-keyframes link-underline-mask {
0.1% {
opacity: 1
}
100% {
opacity: 1;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%)
}
}
@keyframes link-underline-mask {
0.1% {
opacity: 1
}
100% {
opacity: 1;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%)
}
}
@-webkit-keyframes link-underline-mask-hover {
0.1% {
opacity: 1
}
100% {
opacity: 1;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}
}
@keyframes link-underline-mask-hover {
0.1% {
opacity: 1
}
100% {
opacity: 1;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}
}
.video-grid__item {
margin-bottom: 20px
}
.video-grid__item .caption {
padding-top: 10px
}
.widget-wrapper {
display: none
}
@media screen and (max-width:549px) {
.widget-wrapper.is-visible--mobile {
display: block
}
}
@media screen and (min-width:550px) and (max-width:959px) {
.widget-wrapper.is-visible--tablet {
display: block
}
}
@media screen and (min-width:960px) {
.widget-wrapper.is-visible--desktop {
display: block
}
}
.widget--spacing-standard {
margin-top: 40px;
margin-bottom: 40px
}
@media screen and (min-width:550px) {
.widget--spacing-standard {
margin-top: 50px;
margin-bottom: 50px
}
}
@media screen and (min-width:1600px) {
.widget--spacing-standard {
margin-top: 80px;
margin-bottom: 80px
}
}
.widget--spacing-standard-top {
margin-top: 40px
}
@media screen and (min-width:550px) {
.widget--spacing-standard-top {
margin-top: 50px
}
}
@media screen and (min-width:1600px) {
.widget--spacing-standard-top {
margin-top: 80px
}
}
.widget--spacing-standard-bottom {
margin-bottom: 40px
}
@media screen and (min-width:550px) {
.widget--spacing-standard-bottom {
margin-bottom: 50px
}
}
@media screen and (min-width:1600px) {
.widget--spacing-standard-bottom {
margin-bottom: 80px
}
}
.widget--spacing-small {
margin-top: 30px;
margin-bottom: 30px
}
@media screen and (min-width:960px) {
.widget--spacing-small {
margin-top: 40px;
margin-bottom: 40px
}
}
@media screen and (min-width:1600px) {
.widget--spacing-small {
margin-top: 50px;
margin-bottom: 50px
}
}
.widget--spacing-xsmall {
margin-top: 15px;
margin-bottom: 15px
}
@media screen and (min-width:960px) {
.widget--spacing-xsmall {
margin-top: 20px;
margin-bottom: 20px
}
}
@media screen and (min-width:1600px) {
.widget--spacing-xsmall {
margin-top: 25px;
margin-bottom: 25px
}
}
.widget--body-component {
margin-top: 10px;
margin-bottom: 10px
}
@media screen and (min-width:550px) {
.widget--body-component {
margin-top: 20px;
margin-bottom: 20px
}
}
.widget--spacing-padding-large {
padding-top: 80px;
padding-bottom: 80px
}
@media screen and (min-width:1280px) {
.widget--spacing-padding-large {
padding-top: 100px;
padding-bottom: 100px
}
}
.widget--spacing-top-padding--0 {
padding-top: 0
}
.widget--spacing-bottom-padding--0 {
padding-bottom: 0
}
.widget--spacing-none {
margin-top: 0;
margin-bottom: 0
}
.widget__wrapper--html {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column
}
.widget__wrapper--html .widget>* {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center
}
.widget__wrapper--html blockquote {
text-align: center
}
.widget__wrapper--articlecarousel+.widget__wrapper--articlecarousel .widget {
margin-top: -40px
}
@media screen and (min-width:550px) {
.widget__wrapper--articlecarousel+.widget__wrapper--articlecarousel .widget {
margin-top: -60px
}
}
@media screen and (min-width:1600px) {
.widget__wrapper--articlecarousel+.widget__wrapper--articlecarousel .widget {
margin-top: -95px
}
}
.widget__wrapper--articlecarousel+.widget__wrapper--articlecarousel .article-carousel {
padding-top: 0
}
[class*=widget__wrapper--cardgrid]:last-child {
margin-bottom: 40px
}
@media screen and (min-width:550px) {
[class*=widget__wrapper--cardgrid]:last-child {
margin-bottom: 50px
}
}
@media screen and (min-width:1600px) {
[class*=widget__wrapper--cardgrid]:last-child {
margin-bottom: 80px
}
}
.widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] {
margin-top: -40px
}
@media screen and (max-width:959px) and (min-width:550px) {
.navigation__close {
height: 70px;
line-height: 70px
}
}
.a11y-navigation a {
position: absolute;
top: -200px;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
height: 0;
background-color: #e7e6e3;
color: #2b2a29;
z-index: 3000001;
padding: 2px 6px
}
.a11y-navigation a:focus {
clip: auto;
top: 0;
overflow: visible;
height: auto;
outline: 0
}
.about-hero {
overflow-x: hidden
}
.about-hero__main {
position: relative;
width: 100%;
min-height: 535px;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-direction: column;
flex-direction: column;
background-color: #141212
}
@media screen and (min-width:960px) {
.about-hero__main {
min-height: 675px
}
}
.about-hero__main__image,
.about-hero__main__image img,
.about-hero__main__image-wrapper,
.about-hero__main__video,
.about-hero__main__video-wrapper {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-o-object-fit: cover;
object-fit: cover;
z-index: 0
}
.about-hero__main__image-wrapper::after,
.about-hero__main__video-wrapper::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .6)
}
.about-hero__main--animating .about-hero__main__image-wrapper::after,
.about-hero__main--animating .about-hero__main__video-wrapper::after {
-webkit-animation: fade-in 1s ease-in-out forwards;
animation: fade-in 1s ease-in-out forwards
}
.about-hero__main__video-wrapper {
display: none
}
@media screen and (min-width:960px) {
.about-hero__main__video-wrapper {
display: block
}
}
#about-hero__main__video .media-controls-container button.play-pause {
display: none !important
}
.about-hero__main__content {
position: relative;
z-index: 1;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
gap: 12px;
text-align: center;
color: #e7e6e3;
margin: auto;
padding-top: 60px;
padding-bottom: 60px
}
.about-hero__main__content__pre-title {
font-family: 'Riot Sans Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-size: 20px;
line-height: 24px;
font-weight: 600;
text-transform: uppercase
}
[lang=cs_CZ] .about-hero__main__content__pre-title,
[lang=hu_HU] .about-hero__main__content__pre-title,
[lang=pl_PL] .about-hero__main__content__pre-title,
[lang=tr_tr] .about-hero__main__content__pre-title,
[lang=vi_vi] .about-hero__main__content__pre-title,
html[lang=cs] .about-hero__main__content__pre-title,
html[lang=hu] .about-hero__main__content__pre-title,
html[lang=pl] .about-hero__main__content__pre-title,
html[lang=tr] .about-hero__main__content__pre-title,
html[lang=vi] .about-hero__main__content__pre-title {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .about-hero__main__content__pre-title,
html[lang=ko] .about-hero__main__content__pre-title {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .about-hero__main__content__pre-title,
html[lang=th] .about-hero__main__content__pre-title {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .about-hero__main__content__pre-title,
html[lang=ja] .about-hero__main__content__pre-title {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .about-hero__main__content__pre-title,
[lang=zh-hant] .about-hero__main__content__pre-title,
html[lang=zh-cn] .about-hero__main__content__pre-title,
html[lang=zh-hant] .about-hero__main__content__pre-title {
font-family: 'Riot Sans CN', sans-serif
}
.about-hero__main__content__title {
font-family: 'Riot Sans Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-size: 46px;
line-height: 52px;
text-transform: uppercase;
max-width: 770px;
margin: 0 auto
}
[lang=cs_CZ] .about-hero__main__content__title,
[lang=hu_HU] .about-hero__main__content__title,
[lang=pl_PL] .about-hero__main__content__title,
[lang=tr_tr] .about-hero__main__content__title,
[lang=vi_vi] .about-hero__main__content__title,
html[lang=cs] .about-hero__main__content__title,
html[lang=hu] .about-hero__main__content__title,
html[lang=pl] .about-hero__main__content__title,
html[lang=tr] .about-hero__main__content__title,
html[lang=vi] .about-hero__main__content__title {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .about-hero__main__content__title,
html[lang=ko] .about-hero__main__content__title {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .about-hero__main__content__title,
html[lang=th] .about-hero__main__content__title {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .about-hero__main__content__title,
html[lang=ja] .about-hero__main__content__title {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .about-hero__main__content__title,
[lang=zh-hant] .about-hero__main__content__title,
html[lang=zh-cn] .about-hero__main__content__title,
html[lang=zh-hant] .about-hero__main__content__title {
font-family: 'Riot Sans CN', sans-serif
}
@media screen and (min-width:960px) {
.about-hero__main__content__title {
font-size: 70px;
line-height: 72px
}
}
.about-hero__main__content__description {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-size: 18px;
line-height: 22px;
max-width: 700px;
margin: 0 auto
}
[lang=cs_CZ] .about-hero__main__content__description,
[lang=hu_HU] .about-hero__main__content__description,
[lang=pl_PL] .about-hero__main__content__description,
[lang=tr_tr] .about-hero__main__content__description,
[lang=vi_vi] .about-hero__main__content__description,
html[lang=cs] .about-hero__main__content__description,
html[lang=hu] .about-hero__main__content__description,
html[lang=pl] .about-hero__main__content__description,
html[lang=tr] .about-hero__main__content__description,
html[lang=vi] .about-hero__main__content__description {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .about-hero__main__content__description,
html[lang=ko] .about-hero__main__content__description {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .about-hero__main__content__description,
html[lang=th] .about-hero__main__content__description {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .about-hero__main__content__description,
html[lang=ja] .about-hero__main__content__description {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .about-hero__main__content__description,
[lang=zh-hant] .about-hero__main__content__description,
html[lang=zh-cn] .about-hero__main__content__description,
html[lang=zh-hant] .about-hero__main__content__description {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
.about-hero__slide-buttons {
position: relative;
padding-bottom: 16px;
z-index: 1
}
.about-hero__slide-buttons__slider {
margin-right: -56px;
display: -ms-flexbox;
display: flex;
-ms-touch-action: pan-x;
touch-action: pan-x;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
@media screen and (min-width:1440px) {
.about-hero__slide-buttons__slider {
-ms-flex-pack: center;
justify-content: center
}
html[lang=el] .about-hero__slide-buttons__slider {
-ms-flex-pack: start;
justify-content: flex-start
}
}
.about-hero__slide-button {
margin-right: 56px;
padding-top: 12px;
min-width: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
gap: 12px;
color: #e7e6e3;
background: 0 0;
border: 0;
text-align: left;
opacity: .75;
transition: all .1s
}
.about-hero__slide-button:focus,
.about-hero__slide-button:hover {
opacity: 1;
transition: all .2s;
-ms-transform: scale(1.05);
transform: scale(1.05)
}
.about-hero__slide-button.about-hero__slide-button__progress--active {
opacity: 1
}
.about-hero__slide-button__inner {
font-family: 'Riot Sans Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-size: 20px;
font-weight: 700;
line-height: 1;
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
align-items: flex-start;
gap: 12px;
text-transform: uppercase
}
[lang=cs_CZ] .about-hero__slide-button__inner,
[lang=hu_HU] .about-hero__slide-button__inner,
[lang=pl_PL] .about-hero__slide-button__inner,
[lang=tr_tr] .about-hero__slide-button__inner,
[lang=vi_vi] .about-hero__slide-button__inner,
html[lang=cs] .about-hero__slide-button__inner,
html[lang=hu] .about-hero__slide-button__inner,
html[lang=pl] .about-hero__slide-button__inner,
html[lang=tr] .about-hero__slide-button__inner,
html[lang=vi] .about-hero__slide-button__inner {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .about-hero__slide-button__inner,
html[lang=ko] .about-hero__slide-button__inner {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .about-hero__slide-button__inner,
html[lang=th] .about-hero__slide-button__inner {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .about-hero__slide-button__inner,
html[lang=ja] .about-hero__slide-button__inner {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .about-hero__slide-button__inner,
[lang=zh-hant] .about-hero__slide-button__inner,
html[lang=zh-cn] .about-hero__slide-button__inner,
html[lang=zh-hant] .about-hero__slide-button__inner {
font-family: 'Riot Sans CN', sans-serif
}
.about-hero__slide-button__inner span {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-size: 14px
}
[lang=cs_CZ] .about-hero__slide-button__inner span,
[lang=hu_HU] .about-hero__slide-button__inner span,
[lang=pl_PL] .about-hero__slide-button__inner span,
[lang=tr_tr] .about-hero__slide-button__inner span,
[lang=vi_vi] .about-hero__slide-button__inner span,
html[lang=cs] .about-hero__slide-button__inner span,
html[lang=hu] .about-hero__slide-button__inner span,
html[lang=pl] .about-hero__slide-button__inner span,
html[lang=tr] .about-hero__slide-button__inner span,
html[lang=vi] .about-hero__slide-button__inner span {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .about-hero__slide-button__inner span,
html[lang=ko] .about-hero__slide-button__inner span {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .about-hero__slide-button__inner span,
html[lang=th] .about-hero__slide-button__inner span {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .about-hero__slide-button__inner span,
html[lang=ja] .about-hero__slide-button__inner span {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .about-hero__slide-button__inner span,
[lang=zh-hant] .about-hero__slide-button__inner span,
html[lang=zh-cn] .about-hero__slide-button__inner span,
html[lang=zh-hant] .about-hero__slide-button__inner span {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
.about-hero__slide-button__progress {
position: relative;
width: 100%;
height: 2px;
background: 0 0;
opacity: 0;
transition: opacity .2s
}
.about-hero__slide-button__progress:focus,
.about-hero__slide-button__progress:hover {
opacity: 1;
transition: opacity .2s
}
.about-hero__slide-button__progress--active .about-hero__slide-button__progress {
opacity: 1;
background-color: #2b2a29
}
.about-hero__slide-button__progress--active .about-hero__slide-button__progress::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #d1363a;
-webkit-animation: slide-button__progress;
animation: slide-button__progress;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: inherit;
animation-duration: inherit;
-webkit-animation-timing-function: linear;
animation-timing-function: linear
}
.about-hero__slide-button__progress--complete .about-hero__slide-button__progress::after {
-webkit-animation: none;
animation: none;
width: 100%;
background-color: #d1363a
}
.about-hero__content {
background-color: #141212;
position: relative;
padding-top: 56px;
padding-bottom: 56px;
z-index: 1;
min-height: 330px
}
.about-hero__content__items {
transition: all .2s ease
}
html[lang=de] .about-hero__content__items,
html[lang=el] .about-hero__content__items,
html[lang=fr] .about-hero__content__items,
html[lang=ms] .about-hero__content__items,
html[lang=pl] .about-hero__content__items {
min-height: 315px
}
html[lang=cs] .about-hero__content__items,
html[lang=pt-br] .about-hero__content__items,
html[lang=ro] .about-hero__content__items,
html[lang=th] .about-hero__content__items {
min-height: 250px
}
html[lang=es-419] .about-hero__content__items,
html[lang=es] .about-hero__content__items,
html[lang=hu] .about-hero__content__items,
html[lang=id] .about-hero__content__items,
html[lang=it] .about-hero__content__items,
html[lang=ru] .about-hero__content__items,
html[lang=tr] .about-hero__content__items,
html[lang=vi] .about-hero__content__items {
min-height: 295px
}
.about-hero__content__items__slider {
margin-right: -40px;
display: -ms-flexbox;
display: flex;
-ms-touch-action: pan-x;
touch-action: pan-x;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
@media screen and (min-width:1440px) {
.about-hero__content__items__slider {
margin-right: -80px
}
}
.about-hero__content__item {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
gap: 14px;
padding-right: 40px;
min-width: 300px;
max-width: 400px;
color: #e7e6e3;
-ms-flex: 1;
flex: 1
}
@media screen and (min-width:960px) {
.about-hero__content__item {
padding-right: 56px
}
}
@media screen and (min-width:1440px) {
.about-hero__content__item {
padding-right: 80px
}
}
.about-hero__content__item__title {
font-family: 'Riot Sans Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-size: 24px;
line-height: 28px
}
[lang=cs_CZ] .about-hero__content__item__title,
[lang=hu_HU] .about-hero__content__item__title,
[lang=pl_PL] .about-hero__content__item__title,
[lang=tr_tr] .about-hero__content__item__title,
[lang=vi_vi] .about-hero__content__item__title,
html[lang=cs] .about-hero__content__item__title,
html[lang=hu] .about-hero__content__item__title,
html[lang=pl] .about-hero__content__item__title,
html[lang=tr] .about-hero__content__item__title,
html[lang=vi] .about-hero__content__item__title {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .about-hero__content__item__title,
html[lang=ko] .about-hero__content__item__title {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .about-hero__content__item__title,
html[lang=th] .about-hero__content__item__title {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .about-hero__content__item__title,
html[lang=ja] .about-hero__content__item__title {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .about-hero__content__item__title,
[lang=zh-hant] .about-hero__content__item__title,
html[lang=zh-cn] .about-hero__content__item__title,
html[lang=zh-hant] .about-hero__content__item__title {
font-family: 'Riot Sans CN', sans-serif
}
.about-hero__content__item__description {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-size: 16px;
line-height: 20px
}
[lang=cs_CZ] .about-hero__content__item__description,
[lang=hu_HU] .about-hero__content__item__description,
[lang=pl_PL] .about-hero__content__item__description,
[lang=tr_tr] .about-hero__content__item__description,
[lang=vi_vi] .about-hero__content__item__description,
html[lang=cs] .about-hero__content__item__description,
html[lang=hu] .about-hero__content__item__description,
html[lang=pl] .about-hero__content__item__description,
html[lang=tr] .about-hero__content__item__description,
html[lang=vi] .about-hero__content__item__description {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .about-hero__content__item__description,
html[lang=ko] .about-hero__content__item__description {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .about-hero__content__item__description,
html[lang=th] .about-hero__content__item__description {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .about-hero__content__item__description,
html[lang=ja] .about-hero__content__item__description {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .about-hero__content__item__description,
[lang=zh-hant] .about-hero__content__item__description,
html[lang=zh-cn] .about-hero__content__item__description,
html[lang=zh-hant] .about-hero__content__item__description {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
.about-hero__content__pagination {
position: relative;
display: -ms-flexbox;
display: flex;
gap: 12px;
top: 24px
}
.about-hero__content__pagination::before {
content: none
}
@media screen and (min-width:960px) {
.about-hero__content__pagination {
display: none
}
}
.about-hero__content__pagination__button {
position: relative;
width: 8px;
height: 8px;
background: #dbd9d6;
border-radius: 100%;
border: 0
}
.about-hero__content__pagination__button.about-hero__content__pagination__button--active {
background: #d1363a
}
.about-hero__content__pagination__button:focus,
.about-hero__content__pagination__button:hover {
background: #d1363a;
transition: .2s
}
.about-hero__content__pagination__button::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
left: 50%;
top: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
@-webkit-keyframes slide-button__progress {
0% {
width: 0
}
100% {
width: 100%
}
}
@keyframes slide-button__progress {
0% {
width: 0
}
100% {
width: 100%
}
}
@-webkit-keyframes fade-in {
0% {
background-color: #000
}
100% {
background-color: rgba(0, 0, 0, .6)
}
}
@keyframes fade-in {
0% {
background-color: #000
}
100% {
background-color: rgba(0, 0, 0, .6)
}
}
.apply-form {
position: relative
}
@media screen and (min-width:960px) {
.apply-form:after {
content: '';
position: absolute;
width: 418px;
height: 800px;
right: 127%;
background-image: url(/assets/img/content/ce2421dc4aed6b56824ffd0319dd4511/miss-fortune.jpg);
background-repeat: no-repeat;
background-size: cover;
margin-right: 20px;
bottom: -120px
}
}
.js .apply-form.is-revealed .apply-form__reveal,
.no-js .apply-form__reveal {
display: none
}
.js .apply-form__form {
height: 0;
overflow: hidden
}
.js .apply-form.is-revealed .apply-form__form {
height: auto
}
.apply-form__form iframe {
width: 100% !important
}
.asset-filter .grid .asset-filter__subheading {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em
}
[lang=cs_CZ] .asset-filter .grid .asset-filter__subheading,
[lang=hu_HU] .asset-filter .grid .asset-filter__subheading,
[lang=pl_PL] .asset-filter .grid .asset-filter__subheading,
[lang=tr_tr] .asset-filter .grid .asset-filter__subheading,
[lang=vi_vi] .asset-filter .grid .asset-filter__subheading,
html[lang=cs] .asset-filter .grid .asset-filter__subheading,
html[lang=hu] .asset-filter .grid .asset-filter__subheading,
html[lang=pl] .asset-filter .grid .asset-filter__subheading,
html[lang=tr] .asset-filter .grid .asset-filter__subheading,
html[lang=vi] .asset-filter .grid .asset-filter__subheading {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .asset-filter .grid .asset-filter__subheading,
html[lang=ko] .asset-filter .grid .asset-filter__subheading {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .asset-filter .grid .asset-filter__subheading,
html[lang=th] .asset-filter .grid .asset-filter__subheading {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .asset-filter .grid .asset-filter__subheading,
html[lang=ja] .asset-filter .grid .asset-filter__subheading {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .asset-filter .grid .asset-filter__subheading,
[lang=zh-hant] .asset-filter .grid .asset-filter__subheading,
html[lang=zh-cn] .asset-filter .grid .asset-filter__subheading,
html[lang=zh-hant] .asset-filter .grid .asset-filter__subheading {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
.asset-filter .grid .asset__heading {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em
}
[lang=cs_CZ] .asset-filter .grid .asset__heading,
[lang=hu_HU] .asset-filter .grid .asset__heading,
[lang=pl_PL] .asset-filter .grid .asset__heading,
[lang=tr_tr] .asset-filter .grid .asset__heading,
[lang=vi_vi] .asset-filter .grid .asset__heading,
html[lang=cs] .asset-filter .grid .asset__heading,
html[lang=hu] .asset-filter .grid .asset__heading,
html[lang=pl] .asset-filter .grid .asset__heading,
html[lang=tr] .asset-filter .grid .asset__heading,
html[lang=vi] .asset-filter .grid .asset__heading {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .asset-filter .grid .asset__heading,
html[lang=ko] .asset-filter .grid .asset__heading {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .asset-filter .grid .asset__heading,
html[lang=th] .asset-filter .grid .asset__heading {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .asset-filter .grid .asset__heading,
html[lang=ja] .asset-filter .grid .asset__heading {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .asset-filter .grid .asset__heading,
[lang=zh-hant] .asset-filter .grid .asset__heading,
html[lang=zh-cn] .asset-filter .grid .asset__heading,
html[lang=zh-hant] .asset-filter .grid .asset__heading {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
.asset-filter .grid .asset-filter__navigation .page-navigation-list__link {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em
}
[lang=cs_CZ] .asset-filter .grid .asset-filter__navigation .page-navigation-list__link,
[lang=hu_HU] .asset-filter .grid .asset-filter__navigation .page-navigation-list__link,
[lang=pl_PL] .asset-filter .grid .asset-filter__navigation .page-navigation-list__link,
[lang=tr_tr] .asset-filter .grid .asset-filter__navigation .page-navigation-list__link,
[lang=vi_vi] .asset-filter .grid .asset-filter__navigation .page-navigation-list__link,
html[lang=cs] .asset-filter .grid .asset-filter__navigation .page-navigation-list__link,
html[lang=hu] .asset-filter .grid .asset-filter__navigation .page-navigation-list__link,
html[lang=pl] .asset-filter .grid .asset-filter__navigation .page-navigation-list__link,
html[lang=tr] .asset-filter .grid .asset-filter__navigation .page-navigation-list__link,
html[lang=vi] .asset-filter .grid .asset-filter__navigation .page-navigation-list__link {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .asset-filter .grid .asset-filter__navigation .page-navigation-list__link,
html[lang=ko] .asset-filter .grid .asset-filter__navigation .page-navigation-list__link {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .asset-filter .grid .asset-filter__navigation .page-navigation-list__link,
html[lang=th] .asset-filter .grid .asset-filter__navigation .page-navigation-list__link {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .asset-filter .grid .asset-filter__navigation .page-navigation-list__link,
html[lang=ja] .asset-filter .grid .asset-filter__navigation .page-navigation-list__link {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .asset-filter .grid .asset-filter__navigation .page-navigation-list__link,
[lang=zh-hant] .asset-filter .grid .asset-filter__navigation .page-navigation-list__link,
html[lang=zh-cn] .asset-filter .grid .asset-filter__navigation .page-navigation-list__link,
html[lang=zh-hant] .asset-filter .grid .asset-filter__navigation .page-navigation-list__link {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
.asset-filter__search {
text-align: center;
margin-bottom: 60px
}
@media screen and (min-width:960px) {
.asset-filter__search {
margin-bottom: 80px
}
}
@media screen and (min-width:1600px) {
.asset-filter__search {
margin-bottom: 100px
}
}
.asset-filter__search .search-bar {
margin-top: 30px
}
@media screen and (min-width:960px) {
.asset-filter__search .search-bar {
margin-top: 50px
}
}
.asset-filter__subheading {
margin-bottom: 30px
}
@media screen and (min-width:1600px) {
.asset-filter__subheading {
margin-bottom: 40px
}
}
.asset-filter__navigation {
margin-top: 0
}
.asset {
margin-bottom: 40px
}
.asset__heading {
margin-top: 15px
}
.asset__actions {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: start;
align-items: flex-start;
margin-top: 5px
}
.asset__action {
padding-top: 3px;
padding-bottom: 5px;
text-align: left
}
.asset__variation {
text-align: right;
min-width: 0
}
.asset__variation .dropdown {
width: 100%
}
.brush-icon {
display: inline-block;
vertical-align: middle;
width: 25px;
height: 25px;
position: relative
}
@media screen and (min-width:550px) {
.brush-icon {
width: 50px;
height: 50px
}
}
@media screen and (max-width:549px) {
.brush-icon__bg {
width: 25px !important;
height: 25px !important;
line-height: 25px !important
}
}
.brush-icon__bg path {
fill: #e7e6e3;
transition: .3s ease-out
}
.brush-icon__type {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%) scale(.5);
transform: translate(-50%, -50%) scale(.5)
}
@media screen and (min-width:550px) {
.brush-icon__type {
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
}
.brush-icon__type path {
fill: #d1363a;
transition: .3s ease-out
}
@media screen and (min-width:550px) {
.brush-icon--small {
width: 40px;
height: 40px
}
}
@media screen and (min-width:550px) {
.brush-icon--small .brush-icon__bg {
width: 40px !important;
height: 40px !important;
line-height: 40px !important
}
}
@media screen and (min-width:550px) {
.brush-icon--small .brush-icon__type {
-ms-transform: translate(-50%, -50%) scale(.75);
transform: translate(-50%, -50%) scale(.75)
}
}
.brush-icon--shade .brush-icon__bg path {
fill: #dbd9d6
}
.button-standard {
position: relative;
overflow: hidden;
display: inline-block;
border: 0;
vertical-align: middle;
cursor: pointer;
overflow: visible;
text-align: center;
text-decoration: none;
padding: 10px 30px;
border-radius: 24px;
font-size: 12px;
font-weight: 700;
line-height: 1;
min-width: 160px;
-webkit-font-smoothing: auto;
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em;
transition-property: color, background-color, background-position, transform;
transition-duration: .3s;
transition-timing-function: ease-out
}
[lang=cs_CZ] .button-standard,
[lang=hu_HU] .button-standard,
[lang=pl_PL] .button-standard,
[lang=tr_tr] .button-standard,
[lang=vi_vi] .button-standard,
html[lang=cs] .button-standard,
html[lang=hu] .button-standard,
html[lang=pl] .button-standard,
html[lang=tr] .button-standard,
html[lang=vi] .button-standard {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .button-standard,
html[lang=ko] .button-standard {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .button-standard,
html[lang=th] .button-standard {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .button-standard,
html[lang=ja] .button-standard {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .button-standard,
[lang=zh-hant] .button-standard,
html[lang=zh-cn] .button-standard,
html[lang=zh-hant] .button-standard {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
.button-standard:not(.button-standard--lightHoverEffect):active,
.button-standard:not(.button-standard--lightHoverEffect):focus,
.button-standard:not(.button-standard--lightHoverEffect):hover {
outline: 0;
text-decoration: none;
transition: all .2s ease-out
}
.button-standard:not(.button-standard--lightHoverEffect):active {
transition: all .2s ease-out
}
.button-standard:not(.button-standard--lightHoverEffect):focus-visible::after {
opacity: 1
}
.button-standard:not(.button-standard--lightHoverEffect):active::after {
opacity: 0
}
.button-standard:not(.button-standard--lightHoverEffect)::after {
content: '';
border: 2px solid rgba(249, 249, 249, .4);
border-radius: 12px;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
padding: 2px;
color: #f9f9f9;
display: block;
opacity: 0;
pointer-events: none;
position: absolute;
transition: opacity .1s ease-out;
z-index: 4;
border: 2px solid rgba(249, 249, 249, .4)
}
@supports (-webkit-mask:linear-gradient(to top, #f00, #008000)) and ((-webkit-mask-composite:xor) or (mask-composite:exclude)) {
.button-standard:not(.button-standard--lightHoverEffect)::after {
border: 0;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
--angle: -90deg;
-webkit-animation: 8s rotate linear infinite;
animation: 8s rotate linear infinite;
background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, .4));
background: conic-gradient(from var(--angle), rgba(255, 255, 255, .8), rgba(255, 255, 255, .2), rgba(255, 255, 255, .8))
}
.button-standard:not(.button-standard--lightHoverEffect):active::after {
background-color: #fff
}
}
.button-standard.button-standard::after {
border-radius: 28px;
padding: 2.5px
}
@media screen and (min-width:550px) {
.button-standard {
font-size: 20px;
padding-top: 12px;
padding-bottom: 12px;
min-width: 180px
}
}
.button-standard--lightHoverEffect:active,
.button-standard--lightHoverEffect:focus,
.button-standard--lightHoverEffect:hover {
outline: 0;
text-decoration: none;
transition: all .2s ease-out
}
.button-standard--lightHoverEffect:active {
transition: all .2s ease-out
}
.button-standard--lightHoverEffect:focus-visible::after {
opacity: 1
}
.button-standard--lightHoverEffect:active::after {
opacity: 0
}
.button-standard--lightHoverEffect::after {
content: '';
border: 2px solid rgba(249, 249, 249, .4);
border-radius: 12px;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
padding: 2px;
color: #f9f9f9;
display: block;
opacity: 0;
pointer-events: none;
position: absolute;
transition: opacity .1s ease-out;
z-index: 4;
border: 2px solid rgba(10, 10, 10, .4)
}
@supports (-webkit-mask:linear-gradient(to top, #f00, #008000)) and ((-webkit-mask-composite:xor) or (mask-composite:exclude)) {
.button-standard--lightHoverEffect::after {
border: 0;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
--angle: -90deg;
-webkit-animation: 8s rotate linear infinite;
animation: 8s rotate linear infinite;
background: linear-gradient(to bottom, rgba(10, 10, 10, .8), rgba(10, 10, 10, .4));
background: conic-gradient(from var(--angle), rgba(10, 10, 10, .8), rgba(10, 10, 10, .3), #0a0a0a)
}
.button-standard--lightHoverEffect:active::after {
background-color: #0a0a0a
}
}
.button-standard--primary {
color: #f9f9f9;
background-color: #d1363a
}
.button-standard--primary:active,
.button-standard--primary:focus,
.button-standard--primary:hover {
text-decoration: none;
color: #e7e6e3;
transition-duration: .2s
}
.button-standard--primary:hover {
background-color: #da5e61
}
.button-standard--primary:active {
background-color: #d64a4e
}
.button-standard--black {
background-color: rgba(128, 128, 128, .2);
color: #f9f9f9
}
.button-standard--black:focus {
color: #f9f9f9
}
.button-standard--black:hover {
color: #f9f9f9;
-webkit-animation: black-button-hover .1s ease-out forwards;
animation: black-button-hover .1s ease-out forwards
}
.button-standard--black:active {
color: #f9f9f9;
background-color: rgba(128, 128, 128, .1) !important
}
.button-standard--small {
font-size: .813rem;
border-radius: 6.5px;
padding: .5rem .75rem;
min-width: auto;
text-transform: uppercase;
font-weight: 800;
line-height: 1
}
.button-standard--small.button-standard--small::after {
border-radius: 11px;
padding: 2px;
top: -4px;
left: -4px;
right: -4px;
bottom: -5px
}
.button-standard--large {
font-size: 20px;
line-height: 20px;
font-weight: 700;
padding: 22px 16px;
min-width: 220px
}
@media screen and (min-width:550px) {
.button-standard--large {
min-width: 260px
}
}
@-webkit-keyframes black-button-hover {
0% {
background-color: rgba(128, 128, 128, .2)
}
50% {
background-color: rgba(128, 128, 128, .4)
}
100% {
background-color: rgba(128, 128, 128, .3)
}
}
@keyframes black-button-hover {
0% {
background-color: rgba(128, 128, 128, .2)
}
50% {
background-color: rgba(128, 128, 128, .4)
}
100% {
background-color: rgba(128, 128, 128, .3)
}
}
.button {
position: relative;
overflow: hidden;
display: inline-block;
border: 0;
vertical-align: middle;
cursor: pointer;
overflow: visible;
text-align: center;
text-decoration: none;
padding: 10px 30px;
border-radius: 32px;
color: #e7e6e3;
font-size: 12px;
line-height: 20px;
min-width: 160px;
-webkit-font-smoothing: auto;
background-color: #d1363a;
background-image: linear-gradient(-183deg, #d1363a 49.5%, #2b2a29 50.5%);
background-size: 100% 255%;
background-position: 50% 0;
background-repeat: no-repeat;
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em;
transition-property: color, background-color, background-position;
transition-duration: .3s;
transition-timing-function: ease-out
}
.button:active,
.button:focus,
.button:hover {
background-color: #2b2a29;
background-position: 0 100%
}
[lang=cs_CZ] .button,
[lang=hu_HU] .button,
[lang=pl_PL] .button,
[lang=tr_tr] .button,
[lang=vi_vi] .button,
html[lang=cs] .button,
html[lang=hu] .button,
html[lang=pl] .button,
html[lang=tr] .button,
html[lang=vi] .button {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .button,
html[lang=ko] .button {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .button,
html[lang=th] .button {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .button,
html[lang=ja] .button {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .button,
[lang=zh-hant] .button,
html[lang=zh-cn] .button,
html[lang=zh-hant] .button {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
@media screen and (min-width:550px) {
.button {
font-size: 14px;
line-height: 22px;
padding-top: 12px;
padding-bottom: 12px;
min-width: 180px
}
}
.button:before {
content: '/';
margin-right: 10px
}
html[lang=ko] .button:before {
content: none
}
.button span {
transition: border-color .3s ease-out;
border-bottom: 1px solid rgba(231, 230, 227, 0)
}
.button:active,
.button:focus,
.button:hover {
text-decoration: none;
color: #e7e6e3;
outline: 0;
transition-duration: .1s
}
.button:active span,
.button:focus span,
.button:hover span {
transition-duration: .1s;
border-bottom-color: #e7e6e3
}
.button--inverse {
background-color: #d1363a;
background-image: linear-gradient(-183deg, #d1363a 49.5%, #e7e6e3 50.5%)
}
.button--inverse:active,
.button--inverse:focus,
.button--inverse:hover {
background-color: #e7e6e3;
background-position: 0 100%
}
.button--inverse:active,
.button--inverse:focus,
.button--inverse:hover {
color: #d1363a
}
.button--inverse:active span,
.button--inverse:focus span,
.button--inverse:hover span {
border-bottom-color: #d1363a
}
.button--secondary {
background-color: rgba(43, 42, 41, 0);
background-image: linear-gradient(-183deg, rgba(43, 42, 41, 0) 49.5%, #2b2a29 50.5%);
border: 1px solid #2b2a29;
color: #d1363a;
padding: 9px 29px
}
.button--secondary:active,
.button--secondary:focus,
.button--secondary:hover {
background-color: #2b2a29;
background-position: 0 100%
}
@media screen and (min-width:550px) {
.button--secondary {
padding-top: 11px;
padding-bottom: 11px
}
}
.button--secondary.button--inverse {
background-color: rgba(231, 230, 227, 0);
background-image: linear-gradient(-183deg, rgba(231, 230, 227, 0) 49.5%, #e7e6e3 50.5%);
border-color: #e7e6e3;
color: #e7e6e3
}
.button--secondary.button--inverse:active,
.button--secondary.button--inverse:focus,
.button--secondary.button--inverse:hover {
background-color: #e7e6e3;
background-position: 0 100%
}
.button--secondary.button--inverse:active,
.button--secondary.button--inverse:focus,
.button--secondary.button--inverse:hover {
color: #d1363a
}
.button--muted {
background-image: none;
background-color: transparent;
border: 1px solid #c5c5c3;
color: #2b2a29
}
.button--muted span {
border-bottom-color: rgba(209, 54, 58, 0)
}
.button--muted:active,
.button--muted:focus,
.button--muted:hover {
background-color: transparent;
border-color: #d1363a;
color: #d1363a
}
.button--muted:active span,
.button--muted:focus span,
.button--muted:hover span {
border-bottom-color: #d1363a
}
.button--xl {
width: 100%;
max-width: 280px;
padding-top: 14px;
padding-bottom: 14px
}
@media screen and (min-width:550px) {
.button--xl {
padding-top: 15px;
padding-bottom: 15px
}
}
.button--circle,
.button--small-circle {
background-color: #403f3e;
background-image: linear-gradient(-183deg, #403f3e 49.5%, #d1363a 50.5%);
background-size: 100% 255%;
background-position: 50% 0;
background-repeat: no-repeat;
width: 30px;
height: 30px;
line-height: 30px;
min-width: 0;
padding: 0;
transform: translateZ(0)
}
.button--circle:active,
.button--circle:focus,
.button--circle:hover,
.button--small-circle:active,
.button--small-circle:focus,
.button--small-circle:hover {
background-color: #d1363a;
background-position: 0 100%
}
@media screen and (min-width:960px) {
.button--circle,
.button--small-circle {
width: 44px;
height: 44px;
line-height: 44px
}
}
.button--circle:before,
.button--small-circle:before {
content: none
}
.button--circle span,
.button--small-circle span {
line-height: 12px;
border-width: 0;
vertical-align: baseline
}
.button--circle .icon svg path,
.button--small-circle .icon svg path {
fill: #e7e6e3;
transition: fill .3s ease-out
}
.button--circle:active .icon svg path,
.button--circle:focus .icon svg path,
.button--circle:hover .icon svg path,
.button--small-circle:active .icon svg path,
.button--small-circle:focus .icon svg path,
.button--small-circle:hover .icon svg path {
fill: #e7e6e3;
transition-duration: .1s
}
.button--small-circle {
width: 25px;
height: 25px;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
background: #2b2a29
}
.button--small-circle:hover {
background-color: #2b2a29
}
.button--circle.button--inverse {
background-color: #e7e6e3;
background-image: linear-gradient(-183deg, #e7e6e3 49.5%, #d1363a 50.5%);
background-size: 100% 255%;
background-position: 50% 0;
background-repeat: no-repeat;
color: #2b2a29
}
.button--circle.button--inverse:active,
.button--circle.button--inverse:focus,
.button--circle.button--inverse:hover {
background-color: #d1363a;
background-position: 0 100%
}
.button--circle.button--inverse .icon svg path {
fill: #2b2a29
}
.button--circle.button--inverse:active .icon svg path,
.button--circle.button--inverse:focus .icon svg path,
.button--circle.button--inverse:hover .icon svg path {
fill: #e7e6e3
}
.button--circle.button--inverse[disabled] {
opacity: .3;
background: #e7e6e3 !important
}
.button--circle.button--inverse[disabled] .icon svg path {
fill: #2b2a29 !important
}
@media screen and (min-width:960px) {
.button--circle-large {
width: 60px;
height: 60px;
line-height: 60px
}
}
.button.is-disabled,
.button[disabled] {
background-image: none;
background-color: #adacaa;
color: #e7e6e3;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none
}
.button.is-disabled span,
.button[disabled] span {
border: 0
}
.button.is-disabled.button--inverse,
.button[disabled].button--inverse {
background-color: #403f3e;
color: #adacaa
}
.button--block {
display: block;
width: 100%;
max-width: none;
min-width: 0
}
.button--text {
background: 0 0;
padding: 0;
min-width: 0;
margin-right: 10px;
color: #d1363a
}
.button--text:active,
.button--text:focus,
.button--text:hover {
background: 0 0;
color: #d1363a
}
.button--text:active span,
.button--text:focus span,
.button--text:hover span {
border-bottom-color: #d1363a
}
.button--text.button--inverse {
color: #e7e6e3
}
.button--text.button--inverse:active,
.button--text.button--inverse:focus,
.button--text.button--inverse:hover {
background: 0 0;
color: #e7e6e3
}
.button--text.button--inverse:active span,
.button--text.button--inverse:focus span,
.button--text.button--inverse:hover span {
border-bottom-color: #e7e6e3
}
.card-cover-alt {
position: relative;
overflow: hidden;
margin-bottom: 10px
}
@media screen and (min-width:550px) {
.card-cover-alt {
margin-bottom: 0
}
}
.card-cover-alt__image {
position: relative;
overflow: hidden;
height: 0;
padding-bottom: 56.25%;
background-color: #e7e6e3
}
@media screen and (min-width:550px) {
.card-cover-alt__image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: auto;
padding-bottom: 0
}
}
.card-cover-alt__image-inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-position: 50% 50%;
transition: all .3s ease-out
}
.card-cover-alt__type-icon {
position: absolute;
top: 10px;
left: 10px
}
@media screen and (min-width:960px) {
.card-cover-alt__type-icon {
top: 30px;
left: 30px
}
}
@media screen and (min-width:550px) {
.card-cover-alt__content {
height: 0;
color: #e7e6e3;
padding-bottom: 56.25%
}
}
@media screen and (min-width:550px) {
.card-cover-alt__content-inner {
padding: 20px;
position: absolute;
bottom: 0;
left: 0;
right: 0
}
.card-cover-alt__content-inner:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to top, rgba(43, 42, 41, .3), rgba(43, 42, 41, 0))
}
}
@media screen and (min-width:960px) {
.card-cover-alt__content-inner {
padding: 40px
}
}
.card-cover-alt__content-inner .eyebrow {
transition: all .3s ease-out
}
@media screen and (min-width:550px) {
.eyebrow-visible-on-hover .card-cover-alt__content-inner .eyebrow {
opacity: 0
}
}
@media screen and (max-width:549px) {
.card-cover-alt__content-inner .eyebrow {
position: relative;
top: -3px
}
}
.card-cover-alt__content-inner>* {
position: relative
}
.card-cover-alt__cta,
.card-cover-alt__heading {
margin-top: 5px
}
@media screen and (min-width:550px) {
.card-cover-alt__cta,
.card-cover-alt__heading {
position: relative;
margin-top: 10px;
color: #e7e6e3 !important
}
}
@media screen and (min-width:550px) {
.heading-visible-on-hover .card-cover-alt__heading {
opacity: 0
}
}
.card-cover-alt__actions,
.card-cover-alt__actions-mobile {
overflow: hidden;
position: relative;
padding-top: 10px;
margin: -10px
}
@media screen and (min-width:550px) {
.card-cover-alt__actions,
.card-cover-alt__actions-mobile {
padding-top: 20px
}
}
.card-cover-alt__actions .button,
.card-cover-alt__actions-mobile .button {
margin: 10px;
z-index: 2
}
@media screen and (max-width:549px) {
.card-cover-alt__actions {
display: none
}
}
@media screen and (min-width:550px) {
.card-cover-alt__actions-mobile {
display: none
}
}
@media screen and (min-width:550px) {
.primary-cta-visible-on-hover .card-cover-alt__action--primary {
opacity: 0
}
}
@media screen and (min-width:550px) {
.secondary-cta-visible-on-hover .card-cover-alt__action--secondary {
opacity: 0
}
}
.card-cover-alt__overlay-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
transition: all .4s ease-in-out
}
.card-cover-alt__overlay-link:focus {
box-shadow: 0 0 0 3px rgba(37, 36, 35, .7) inset, 0 0 0 4px rgba(231, 230, 227, .7) inset;
transition-duration: .1s
}
.card-cover-alt:active .card-cover-alt__image .card-cover-alt__image-inner,
.card-cover-alt:focus .card-cover-alt__image .card-cover-alt__image-inner,
.card-cover-alt:hover .card-cover-alt__image .card-cover-alt__image-inner {
transition-duration: .1s;
-ms-transform: scale(1.05);
transform: scale(1.05);
opacity: .4
}
.card-cover-alt:active .card-cover-alt__image .brush-icon__bg path,
.card-cover-alt:focus .card-cover-alt__image .brush-icon__bg path,
.card-cover-alt:hover .card-cover-alt__image .brush-icon__bg path {
fill: #d1363a;
transition-duration: .1s
}
.card-cover-alt:active .card-cover-alt__image .brush-icon__type path,
.card-cover-alt:focus .card-cover-alt__image .brush-icon__type path,
.card-cover-alt:hover .card-cover-alt__image .brush-icon__type path {
fill: #e7e6e3;
transition-duration: .1s
}
.card-cover-alt:active .card-cover-alt__content .card-cover-alt__heading span,
.card-cover-alt:active .card-cover-alt__heading span,
.card-cover-alt:focus .card-cover-alt__content .card-cover-alt__heading span,
.card-cover-alt:focus .card-cover-alt__heading span,
.card-cover-alt:hover .card-cover-alt__content .card-cover-alt__heading span,
.card-cover-alt:hover .card-cover-alt__heading span {
background-image: url(/assets/img/structure/8be0c3fae45d871dfda6cc462ac74ff2/distressed-underline--light.svg);
background-repeat: repeat-x;
background-position: 0 100%;
background-size: 680px 3px;
display: inline
}
.card-cover-alt:active .card-cover-alt__content.eyebrow-visible-on-hover .eyebrow,
.card-cover-alt:active .card-cover-alt__content.heading-visible-on-hover .card-cover-alt__heading,
.card-cover-alt:active .card-cover-alt__content.primary-cta-visible-on-hover .card-cover-alt__action--primary,
.card-cover-alt:active .card-cover-alt__content.secondary-cta-visible-on-hover .card-cover-alt__action--secondary,
.card-cover-alt:focus .card-cover-alt__content.eyebrow-visible-on-hover .eyebrow,
.card-cover-alt:focus .card-cover-alt__content.heading-visible-on-hover .card-cover-alt__heading,
.card-cover-alt:focus .card-cover-alt__content.primary-cta-visible-on-hover .card-cover-alt__action--primary,
.card-cover-alt:focus .card-cover-alt__content.secondary-cta-visible-on-hover .card-cover-alt__action--secondary,
.card-cover-alt:hover .card-cover-alt__content.eyebrow-visible-on-hover .eyebrow,
.card-cover-alt:hover .card-cover-alt__content.heading-visible-on-hover .card-cover-alt__heading,
.card-cover-alt:hover .card-cover-alt__content.primary-cta-visible-on-hover .card-cover-alt__action--primary,
.card-cover-alt:hover .card-cover-alt__content.secondary-cta-visible-on-hover .card-cover-alt__action--secondary {
opacity: 1
}
.card-cover {
position: relative;
background-color: #e7e6e3;
color: #e7e6e3;
overflow: hidden
}
.card-cover__eyebrow {
transition: all .3s ease-out
}
.eyebrow-visible-on-hover .card-cover__eyebrow {
opacity: 0
}
.card-cover__image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0
}
.card-cover__image-inner {
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
transition: all .3s ease-out
}
.card-cover__type-icon {
position: absolute;
top: 10px;
left: 10px
}
@media screen and (min-width:960px) {
.card-cover__type-icon {
top: 30px;
left: 30px
}
}
.card-cover__content {
color: #e7e6e3;
height: 0;
padding-bottom: 100%;
position: relative
}
@media screen and (min-width:550px) {
.card-cover__content {
padding-bottom: 75%
}
}
@media screen and (min-width:960px) {
.card-cover__content {
padding-bottom: 56.25%
}
}
.card-cover__content-inner {
padding: 20px;
position: absolute;
bottom: 0;
left: 0;
right: 0
}
@media screen and (min-width:960px) {
.card-cover__content-inner {
padding: 40px
}
}
.card-cover__content-inner:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to top, rgba(43, 42, 41, .3), rgba(43, 42, 41, 0))
}
.card-cover__content-inner>* {
position: relative
}
.card-cover__content-inner>*+* {
margin-top: 10px
}
.card-cover__cta,
.card-cover__heading {
position: relative;
color: #e7e6e3 !important
}
.heading-visible-on-hover .card-cover__heading {
opacity: 0
}
.lede-visible-on-hover .card-cover__description {
opacity: 0
}
.card-cover__overlay-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1
}
.card-cover__overlay-link:active~.card-cover__image .card-cover__image-inner,
.card-cover__overlay-link:focus~.card-cover__image .card-cover__image-inner,
.card-cover__overlay-link:hover~.card-cover__image .card-cover__image-inner {
transition-duration: .1s;
-ms-transform: scale(1.05);
transform: scale(1.05);
opacity: .4
}
.card-cover__overlay-link:active~.card-cover__image .brush-icon__bg path,
.card-cover__overlay-link:focus~.card-cover__image .brush-icon__bg path,
.card-cover__overlay-link:hover~.card-cover__image .brush-icon__bg path {
fill: #d1363a;
transition-duration: .1s
}
.card-cover__overlay-link:active~.card-cover__image .brush-icon__type path,
.card-cover__overlay-link:focus~.card-cover__image .brush-icon__type path,
.card-cover__overlay-link:hover~.card-cover__image .brush-icon__type path {
fill: #e7e6e3;
transition-duration: .1s
}
.card-cover__overlay-link:active~.card-cover__content .card-cover__heading span,
.card-cover__overlay-link:active~.card-cover__heading span,
.card-cover__overlay-link:focus~.card-cover__content .card-cover__heading span,
.card-cover__overlay-link:focus~.card-cover__heading span,
.card-cover__overlay-link:hover~.card-cover__content .card-cover__heading span,
.card-cover__overlay-link:hover~.card-cover__heading span {
background-image: url(/assets/img/structure/8be0c3fae45d871dfda6cc462ac74ff2/distressed-underline--light.svg);
background-repeat: repeat-x;
background-position: 0 100%;
background-size: 680px 3px;
display: inline
}
.card-cover__overlay-link:active~.card-cover__content.eyebrow-visible-on-hover .card-cover__eyebrow,
.card-cover__overlay-link:active~.card-cover__content.heading-visible-on-hover .card-cover__heading,
.card-cover__overlay-link:active~.card-cover__content.lede-visible-on-hover .card-cover__description,
.card-cover__overlay-link:focus~.card-cover__content.eyebrow-visible-on-hover .card-cover__eyebrow,
.card-cover__overlay-link:focus~.card-cover__content.heading-visible-on-hover .card-cover__heading,
.card-cover__overlay-link:focus~.card-cover__content.lede-visible-on-hover .card-cover__description,
.card-cover__overlay-link:hover~.card-cover__content.eyebrow-visible-on-hover .card-cover__eyebrow,
.card-cover__overlay-link:hover~.card-cover__content.heading-visible-on-hover .card-cover__heading,
.card-cover__overlay-link:hover~.card-cover__content.lede-visible-on-hover .card-cover__description {
opacity: 1
}
.card {
display: -ms-flexbox;
display: flex;
background-color: #2b2a29;
color: #e7e6e3;
position: relative
}
@media screen and (min-width:550px) {
.card {
display: block;
overflow: hidden;
height: 0;
padding-bottom: 150%
}
}
.card__background-image {
background-size: cover;
background-position: 50% 50%;
transition: all .3s ease-out;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0
}
.card__image {
display: none
}
@media screen and (max-width:549px) {
.card__image {
-ms-flex: 0 0 30%;
flex: 0 0 30%;
display: block
}
}
.card__image img {
transition: all .3s ease-out;
vertical-align: top
}
.card__type-icon {
position: absolute;
top: 10px;
left: 10px
}
.card__content {
padding: 0 15px 10px 0;
background-color: #2b2a29;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center
}
@media screen and (min-width:550px) {
.card__content {
display: block;
padding: 20px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
transition: all .3s ease-out
}
.card__content.eyebrow-visible-on-hover.cta-visible-on-hover.heading-visible-on-hover {
background-color: transparent
}
.card__content.eyebrow-visible-on-hover .eyebrow {
opacity: 0
}
}
.card__content>*+* {
margin-top: 5px
}
@media screen and (min-width:550px) {
.card__content>*+* {
margin-top: 10px
}
}
@media screen and (max-width:549px) {
.card__content .eyebrow {
position: relative;
top: -3px
}
}
.card__cta,
.card__heading {
color: #e7e6e3 !important;
padding-left: 15px
}
@media screen and (min-width:550px) {
.card__cta,
.card__heading {
padding-left: 0
}
}
@media screen and (min-width:550px) {
.heading-visible-on-hover .card__heading {
opacity: 0
}
}
@media screen and (min-width:550px) {
.cta-visible-on-hover .card__cta {
opacity: 0
}
}
.card__overlay-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1
}
.card__overlay-link:active+.card__background-image,
.card__overlay-link:active~.card__image img,
.card__overlay-link:focus+.card__background-image,
.card__overlay-link:focus~.card__image img,
.card__overlay-link:hover+.card__background-image,
.card__overlay-link:hover~.card__image img {
transition-duration: .1s;
-ms-transform: scale(1.05);
transform: scale(1.05);
opacity: .4
}
.card__overlay-link:active .brush-icon__bg path,
.card__overlay-link:focus .brush-icon__bg path,
.card__overlay-link:hover .brush-icon__bg path {
fill: #d1363a;
transition-duration: .1s
}
.card__overlay-link:active .brush-icon__type path,
.card__overlay-link:focus .brush-icon__type path,
.card__overlay-link:hover .brush-icon__type path {
fill: #e7e6e3;
transition-duration: .1s
}
.card__overlay-link:active~.card__content .card__heading span,
.card__overlay-link:active~.card__heading span,
.card__overlay-link:focus~.card__content .card__heading span,
.card__overlay-link:focus~.card__heading span,
.card__overlay-link:hover~.card__content .card__heading span,
.card__overlay-link:hover~.card__heading span {
background-image: url(/assets/img/structure/8be0c3fae45d871dfda6cc462ac74ff2/distressed-underline--light.svg);
background-repeat: repeat-x;
background-position: 0 100%;
background-size: 680px 3px;
display: inline
}
.card__overlay-link:active~.card__content,
.card__overlay-link:active~.card__content.eyebrow-visible-on-hover.cta-visible-on-hover.heading-visible-on-hover,
.card__overlay-link:focus~.card__content,
.card__overlay-link:focus~.card__content.eyebrow-visible-on-hover.cta-visible-on-hover.heading-visible-on-hover,
.card__overlay-link:hover~.card__content,
.card__overlay-link:hover~.card__content.eyebrow-visible-on-hover.cta-visible-on-hover.heading-visible-on-hover {
background-color: #2b2a29
}
.card__overlay-link:active~.card__content.cta-visible-on-hover .card__cta,
.card__overlay-link:active~.card__content.eyebrow-visible-on-hover .eyebrow,
.card__overlay-link:active~.card__content.heading-visible-on-hover .card__heading,
.card__overlay-link:focus~.card__content.cta-visible-on-hover .card__cta,
.card__overlay-link:focus~.card__content.eyebrow-visible-on-hover .eyebrow,
.card__overlay-link:focus~.card__content.heading-visible-on-hover .card__heading,
.card__overlay-link:hover~.card__content.cta-visible-on-hover .card__cta,
.card__overlay-link:hover~.card__content.eyebrow-visible-on-hover .eyebrow,
.card__overlay-link:hover~.card__content.heading-visible-on-hover .card__heading {
opacity: 1
}
.careers {
background-color: #ebebeb
}
@media screen and (min-width:960px) {
.careers {
display: -ms-flexbox;
display: flex
}
}
.careers__content {
-ms-flex: 1 1 50%;
flex: 1 1 50%;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.careers__content-inner {
max-width: 620px;
margin: 0 auto;
text-align: center;
-ms-flex-positive: 1;
flex-grow: 1;
padding: 80px 16px 0
}
.careers__content-inner h2 {
font-size: 1.875rem;
font-weight: 700;
line-height: 1;
color: #0a0a0a;
margin-bottom: 1.5rem
}
.careers__content-inner p {
font-size: 1.25rem;
color: #656462;
line-height: 1.5;
letter-spacing: -.03em;
margin: 0 auto 2.5rem;
font-weight: 600;
max-width: 450px
}
@media screen and (min-width:550px) {
.careers__content-inner h2 {
font-size: 3rem
}
}
@media screen and (min-width:960px) {
.careers__content-inner {
margin: 0 0 0 auto;
padding: 80px 30px
}
}
.careers__jobs {
display: -ms-flexbox;
display: flex;
margin-bottom: 40px
}
.careers__jobs__count {
display: block;
position: relative;
-ms-flex: 1 1 260px;
flex: 1 1 260px;
padding: 16px;
text-align: center;
background-color: rgba(173, 172, 170, .2);
border-radius: 8px;
font-size: 1.125rem;
line-height: 1.2;
font-weight: 700;
color: #656462
}
.careers__jobs__count:active,
.careers__jobs__count:focus,
.careers__jobs__count:hover {
outline: 0;
text-decoration: none;
transition: all .2s ease-out
}
.careers__jobs__count:active {
transition: all .2s ease-out
}
.careers__jobs__count:focus-visible::after {
opacity: 1
}
.careers__jobs__count:active::after {
opacity: 0
}
.careers__jobs__count::after {
content: '';
border: 2px solid rgba(249, 249, 249, .4);
border-radius: 12px;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
padding: 2px;
color: #f9f9f9;
display: block;
opacity: 0;
pointer-events: none;
position: absolute;
transition: opacity .1s ease-out;
z-index: 4;
border: 2px solid rgba(10, 10, 10, .4)
}
@supports (-webkit-mask:linear-gradient(to top, #f00, #008000)) and ((-webkit-mask-composite:xor) or (mask-composite:exclude)) {
.careers__jobs__count::after {
border: 0;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
--angle: -90deg;
-webkit-animation: 8s rotate linear infinite;
animation: 8s rotate linear infinite;
background: linear-gradient(to bottom, rgba(10, 10, 10, .8), rgba(10, 10, 10, .4));
background: conic-gradient(from var(--angle), rgba(10, 10, 10, .8), rgba(10, 10, 10, .3), #0a0a0a)
}
.careers__jobs__count:active::after {
background-color: #0a0a0a
}
}
.careers__jobs__count:first-child {
margin-right: 16px
}
.careers__jobs__count:active {
background-color: rgba(128, 128, 128, .1) !important
}
.careers__jobs__count:hover {
-webkit-animation: bg-fade-in .2s ease-out forwards;
animation: bg-fade-in .2s ease-out forwards
}
.careers__jobs__count:active,
.careers__jobs__count:focus,
.careers__jobs__count:hover {
color: #656462
}
.careers__jobs__count span {
display: block;
color: #0a0a0a;
font-size: 3.5rem;
font-weight: 700
}
@media screen and (min-width:960px) {
.careers__jobs__count {
font-size: 1.5rem;
padding: 20px
}
.careers__jobs__count:first-child {
margin-right: 24px
}
}
.careers__cta {
display: block;
margin-bottom: 40px
}
@media screen and (min-width:960px) {
.careers__cta {
display: inline-block;
margin-bottom: 0
}
}
.careers__image {
-ms-flex: 1 1 55%;
flex: 1 1 55%
}
.careers__image img,
.careers__image picture {
width: 100%;
height: 100%;
max-height: 600px;
-o-object-fit: cover;
object-fit: cover
}
@media screen and (min-width:960px) {
.careers__image {
-webkit-clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%)
}
}
body.theme-arc2 .careers {
background-color: #dbe0ee
}
body.theme-arc2 .careers__jobs__count {
background-color: rgba(184, 193, 222, .6);
color: #2e3d67
}
body.theme-arc2 .careers__jobs__count span {
color: #0f1422
}
body.theme-arc2 .careers__jobs__count:active,
body.theme-arc2 .careers__jobs__count:focus,
body.theme-arc2 .careers__jobs__count:hover {
background-color: #b8c1de !important
}
body.theme-arc2 .careers__jobs__count:focus-visible {
outline: 0
}
body.theme-arc2 .careers__jobs__count:focus-visible:after {
background: #4d65ac
}
body.theme-arc2 .careers__cta {
background-color: #4d65ac
}
body.theme-arc2 .careers__cta:active:after,
body.theme-arc2 .careers__cta:focus-visible:after,
body.theme-arc2 .careers__cta:focus:after,
body.theme-arc2 .careers__cta:hover:after {
background: linear-gradient(180deg, #4d65ac, #b5aef3)
}
body.theme-arc2 .careers__content-inner h2 {
color: #0f1422
}
body.theme-arc2 .careers__content-inner p {
color: #2e3d67
}
@-webkit-keyframes bg-fade-in {
0% {
background-color: rgba(173, 172, 170, .2)
}
50% {
background-color: rgba(128, 128, 128, .4)
}
100% {
background-color: rgba(128, 128, 128, .3)
}
}
@keyframes bg-fade-in {
0% {
background-color: rgba(173, 172, 170, .2)
}
50% {
background-color: rgba(128, 128, 128, .4)
}
100% {
background-color: rgba(128, 128, 128, .3)
}
}
.carousel-cell {
width: 100%;
display: none
}
.carousel-cell:first-child {
display: inline-block
}
.flickity-enabled .carousel-cell {
display: inline-block !important
}
.carousel--image .flickity-prev-next-button.next,
.carousel--image .flickity-prev-next-button.previous {
display: none;
top: 50%
}
@media screen and (min-width:960px) {
.carousel--image .flickity-prev-next-button.next,
.carousel--image .flickity-prev-next-button.previous {
display: block
}
}
.carousel--image .flickity-prev-next-button.next {
right: 20px
}
.carousel--image .flickity-prev-next-button.previous {
left: 20px
}
.no-js .carousel--image .carousel-cell {
display: inline-block;
width: 100%;
margin-bottom: 40px
}
.carousel--product .carousel-cell {
width: 85%;
padding-left: 5px;
padding-right: 5px;
vertical-align: top
}
@media screen and (min-width:960px) {
.carousel--product .carousel-cell {
margin: auto
}
.carousel--product .carousel-cell.carousel-cell--third {
width: 33.3333%;
min-height: 100%;
padding-left: 10px;
padding-right: 10px
}
}
.carousel--product .flickity-prev-next-button .flickity-button-icon .arrow {
fill: #fff !important
}
.carousel--product .flickity-prev-next-button.next,
.carousel--product .flickity-prev-next-button.previous {
display: none;
top: auto;
left: auto;
right: 0;
border-radius: 0;
background-color: transparent;
-ms-transform: translateY(0);
transform: translateY(0)
}
@media screen and (min-width:960px) {
.carousel--product .flickity-prev-next-button.next,
.carousel--product .flickity-prev-next-button.previous {
display: block;
width: 40px;
height: 40px;
right: 0;
top: -80px;
left: auto
}
}
.carousel--product .flickity-prev-next-button.next {
right: 0
}
.carousel--product .flickity-prev-next-button.previous {
right: 70px
}
.carousel--product .flickity-prev-next-button.previous:before {
content: '';
position: absolute;
top: 0;
right: -15px;
width: 2px;
height: 40px;
background-color: #adacaa
}
.carousel--product .flickity-page-dots {
margin-top: 15px
}
@media screen and (min-width:960px) {
.carousel--product .flickity-page-dots {
margin-top: 30px
}
}
.carousel--summary .carousel-cell {
width: 85%;
padding-left: 5px;
padding-right: 5px;
vertical-align: top
}
@media screen and (min-width:550px) {
.carousel--summary .carousel-cell {
padding-left: 20px;
padding-right: 20px
}
}
@media screen and (min-width:960px) {
.carousel--summary .carousel-cell {
margin: auto
}
.carousel--summary .carousel-cell.carousel-cell--half {
width: 50%;
padding-left: 40px;
padding-right: 40px
}
.carousel--summary .carousel-cell.carousel-cell--third {
width: 33.3333%;
padding-left: 10px;
padding-right: 10px
}
.carousel--summary .carousel-cell.carousel-cell--quarter {
width: 25%;
padding-left: 20px;
padding-right: 20px
}
}
.no-js .carousel--summary .carousel-cell {
width: 100%;
margin-bottom: 40px
}
@media screen and (min-width:960px) {
.no-js .carousel--summary .carousel-cell {
width: 50%
}
}
@media screen and (min-width:960px) {
.carousel--summary .carousel-cell:nth-child(-n+2) {
display: inline-block
}
}
.carousel--summary .flickity-prev-next-button.next,
.carousel--summary .flickity-prev-next-button.previous {
display: none;
top: auto;
left: auto;
right: 0;
-ms-transform: translateY(0);
transform: translateY(0)
}
@media screen and (min-width:1500px) {
.carousel--summary .flickity-prev-next-button.next,
.carousel--summary .flickity-prev-next-button.previous {
display: block;
right: auto;
left: 100%
}
}
.carousel--summary .flickity-prev-next-button.next {
bottom: 71.875%;
margin-bottom: 10px
}
.carousel--summary .flickity-prev-next-button.previous {
top: 28.125%;
margin-top: 10px
}
.carousel--summary .flickity-prev-next-button.previous:before {
content: '';
position: absolute;
top: -10px;
left: 10px;
right: 10px;
height: 2px;
background-color: #adacaa
}
.carousel__slide-bg-image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat
}
.carousel--featured .carousel-cell .carousel__slide-bg-image {
-webkit-clip-path: polygon(0 5px, 100% 0, 100% calc(100% - 5px), 0 100%);
clip-path: polygon(0 5px, 100% 0, 100% calc(100% - 5px), 0 100%)
}
@media screen and (min-width:550px) {
.carousel--featured .carousel-cell .carousel__slide-bg-image {
-webkit-clip-path: polygon(0 15px, 100% 0, 100% calc(100% - 10px), 0 100%);
clip-path: polygon(0 15px, 100% 0, 100% calc(100% - 10px), 0 100%)
}
}
@media screen and (min-width:1280px) {
.carousel--featured .carousel-cell .carousel__slide-bg-image {
-webkit-clip-path: polygon(0 25px, 100% 0, 100% calc(100% - 20px), 0 100%);
clip-path: polygon(0 25px, 100% 0, 100% calc(100% - 20px), 0 100%)
}
}
.carousel--featured .carousel-cell:nth-child(even) .carousel__slide-bg-image {
-webkit-clip-path: polygon(0 0, 100% 5px, 100% 100%, 0 calc(100% - 5px));
clip-path: polygon(0 0, 100% 5px, 100% 100%, 0 calc(100% - 5px))
}
@media screen and (min-width:550px) {
.carousel--featured .carousel-cell:nth-child(even) .carousel__slide-bg-image {
-webkit-clip-path: polygon(0 0, 100% 15px, 100% 100%, 0 calc(100% - 10px));
clip-path: polygon(0 0, 100% 15px, 100% 100%, 0 calc(100% - 10px))
}
}
@media screen and (min-width:1280px) {
.carousel--featured .carousel-cell:nth-child(even) .carousel__slide-bg-image {
-webkit-clip-path: polygon(0 0, 100% 25px, 100% 100%, 0 calc(100% - 20px));
clip-path: polygon(0 0, 100% 25px, 100% 100%, 0 calc(100% - 20px))
}
}
.carousel--impact-report {
margin-bottom: 25px;
margin-top: 25px;
position: relative;
width: 100%
}
@media screen and (min-width:960px) {
.carousel--impact-report {
margin-top: 50px
}
}
.carousel--impact-report .heading {
line-height: 1.2
}
.carousel--impact-report .flickity-page-dots {
display: none
}
.carousel--impact-report button:disabled {
background-color: transparent
}
.carousel--impact-report .flickity-prev-next-button.next,
.carousel--impact-report .flickity-prev-next-button.previous {
top: 100%;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
right: 50px;
border-radius: 0;
background-color: none;
-ms-transform: translateY(0);
transform: translateY(0)
}
@media screen and (min-width:550px) {
.carousel--impact-report .flickity-prev-next-button.next,
.carousel--impact-report .flickity-prev-next-button.previous {
margin-top: 0
}
}
@media screen and (min-width:960px) {
.carousel--impact-report .flickity-prev-next-button.next,
.carousel--impact-report .flickity-prev-next-button.previous {
display: block;
width: 40px;
height: 40px;
top: -50px;
margin: 0;
right: 0;
left: auto
}
}
.carousel--impact-report .flickity-prev-next-button.next {
left: 100px
}
@media screen and (min-width:960px) {
.carousel--impact-report .flickity-prev-next-button.next {
left: 70px
}
}
.carousel--impact-report .flickity-prev-next-button.previous {
left: 0
}
.carousel--impact-report .flickity-prev-next-button.previous:before {
content: '';
position: absolute;
top: 0;
right: -13px;
width: 1px;
background-color: #0a0a0a;
height: 30px
}
@media screen and (min-width:550px) {
.carousel--impact-report .flickity-prev-next-button.previous:before {
height: 40px;
right: 2px;
top: 10px
}
}
@media screen and (min-width:960px) {
.carousel--impact-report .flickity-prev-next-button.previous:before {
background-color: #adacaa;
right: -15px;
top: 0;
width: 2px;
height: 40px
}
}
.carousel--impact-report .carousel-cell {
width: 75%;
padding-left: 10px;
padding-right: 10px
}
@media screen and (min-width:960px) {
.carousel--impact-report .carousel-cell {
max-width: 350px
}
}
@media screen and (min-width:1280px) {
.carousel--impact-report .carousel-cell {
margin: auto
}
.carousel--impact-report .carousel-cell.carousel-cell--half {
width: 45%;
min-height: 100%;
padding-left: 5px;
padding-right: 5px
}
}
@media screen and (min-width:1280px) {
.showLatestNews .related-articles .carousel-cell:nth-child(2n+1) {
padding-left: 0;
padding-right: 20px
}
}
@media screen and (min-width:1280px) {
.showLatestNews .related-articles .carousel-cell:nth-child(2n) {
padding-left: 20px;
padding-right: 0
}
}
.showLatestNews .related-articles .flickity-viewport {
-ms-transform: translateX(-2.5%);
transform: translateX(-2.5%)
}
@media screen and (min-width:550px) {
.showLatestNews .related-articles .flickity-viewport {
-ms-transform: translateX(-5.5%);
transform: translateX(-5.5%)
}
}
@media screen and (min-width:1280px) {
.showLatestNews .related-articles .flickity-viewport {
-ms-transform: translateX(0);
transform: translateX(0)
}
}
.checklist>*+* {
margin-top: 20px
}
.checklist__heading {
margin-top: 40px
}
@media screen and (min-width:960px) {
.checklist__heading {
margin-top: 60px
}
}
.checklist__item-list {
position: relative;
background-position: 0 0;
margin-top: 40px;
margin-bottom: 40px
}
.checklist__item-list:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background-image: url(/assets/img/structure/ec52d55f0f379518c25d286fb69f4ea6/distressed-stroke.svg);
background-repeat: repeat-x;
background-size: 420px 1px;
background-position: 0 0;
opacity: .3
}
.checklist__item {
position: relative;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 40px
}
@media screen and (min-width:550px) {
.checklist__item {
padding-top: 30px;
padding-bottom: 30px
}
}
@media screen and (min-width:960px) {
.checklist__item {
padding-top: 40px;
padding-bottom: 40px
}
}
.checklist__item:before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 8px;
height: 8px;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border: 1.5px solid currentColor;
border-radius: 50%;
margin-top: -1px
}
.checklist__item:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background-image: url(/assets/img/structure/ec52d55f0f379518c25d286fb69f4ea6/distressed-stroke.svg);
background-repeat: repeat-x;
background-size: 420px 1px;
background-position: 0 0;
opacity: .3
}
.checklist__item:nth-child(3n+1):after {
background-position: 200px 100%
}
.checklist__item:nth-child(3n+2):after {
background-position: 100px 100%
}
.checklist__item:nth-child(3n+3):after {
background-position: 300px 100%
}
.checklist__actions {
margin-left: -10px;
margin-right: -10px
}
.checklist__actions .button {
margin: 0 10px 20px
}
.clock-icon {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
border: 2px solid #2b2a29;
border-radius: 50%;
transform: translateZ(0)
}
@media screen and (min-width:960px) {
.clock-icon {
border-width: 2px;
width: 22px;
height: 22px
}
}
.clock-icon__hand {
background-color: #2b2a29;
position: absolute;
bottom: 50%;
left: 50%;
width: 2px;
margin-left: -1px;
margin-bottom: -1px;
-ms-transform-origin: 50% 90%;
transform-origin: 50% 90%;
-ms-transform-origin: 50% calc(100% - 1px);
transform-origin: 50% calc(100% - 1px);
border-radius: 1px;
will-change: transform
}
@media screen and (min-width:960px) {
.clock-icon__hand {
width: 2px;
margin-left: -1px;
margin-bottom: -1px;
-ms-transform-origin: 50% calc(100% - 1px);
transform-origin: 50% calc(100% - 1px);
border-radius: 1px
}
}
.clock-icon__hand--hours {
height: 5.399999999999999px
}
@media screen and (min-width:960px) {
.clock-icon__hand--hours {
height: 6.6px
}
}
.clock-icon__hand--minutes {
height: 7.2px;
-ms-transform: rotate(90deg);
transform: rotate(90deg)
}
@media screen and (min-width:960px) {
.clock-icon__hand--minutes {
height: 8.8px
}
}
.clock-icon--inverse {
border-color: #e7e6e3
}
.clock-icon--inverse .clock-icon__hand {
background-color: #e7e6e3
}
.commitments {
padding-top: 60px;
padding-bottom: 60px;
overflow-x: hidden
}
.commitments.small-padding-top {
padding-top: 15px
}
@media screen and (min-width:960px) {
.commitments {
padding-top: 120px;
padding-bottom: 120px
}
.commitments.small-padding-top {
padding-top: 30px
}
}
.commitments__title {
font-family: 'Riot Sans Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-weight: 600;
text-transform: uppercase;
font-size: 24px;
line-height: 1;
padding-bottom: 30px
}
[lang=cs_CZ] .commitments__title,
[lang=hu_HU] .commitments__title,
[lang=pl_PL] .commitments__title,
[lang=tr_tr] .commitments__title,
[lang=vi_vi] .commitments__title,
html[lang=cs] .commitments__title,
html[lang=hu] .commitments__title,
html[lang=pl] .commitments__title,
html[lang=tr] .commitments__title,
html[lang=vi] .commitments__title {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .commitments__title,
html[lang=ko] .commitments__title {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .commitments__title,
html[lang=th] .commitments__title {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .commitments__title,
html[lang=ja] .commitments__title {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .commitments__title,
[lang=zh-hant] .commitments__title,
html[lang=zh-cn] .commitments__title,
html[lang=zh-hant] .commitments__title {
font-family: 'Riot Sans CN', sans-serif
}
.commitments__carousel-container {
position: relative
}
.commitments__carousel {
display: -ms-flexbox;
display: flex;
-ms-touch-action: pan-x;
touch-action: pan-x;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
margin-right: 40px
}
@media screen and (min-width:400px) {
.commitments__carousel {
margin-right: 50px
}
}
@media screen and (min-width:960px) {
.commitments__carousel {
margin-right: 0
}
.commitments__carousel--overflowing .commitments__carousel {
margin-right: 6%
}
}
.commitments__item {
margin-right: -40px;
min-width: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-ms-flex-preferred-size: 280px;
flex-basis: 280px
}
@media screen and (min-width:400px) {
.commitments__item {
-ms-flex-preferred-size: 320px;
flex-basis: 320px;
margin-right: -50px
}
}
@media screen and (min-width:960px) {
.commitments__item {
-ms-flex-preferred-size: 37.3%;
flex-basis: 37.3%;
margin-right: -6%
}
.commitments__carousel--tight .commitments__item {
-ms-flex-preferred-size: 28%;
flex-basis: 28%;
margin-right: -4%
}
}
.commitments__item__image-wrapper {
display: block;
-webkit-clip-path: polygon(0 0, 80% 0, 100% 100%, 20% 100%);
clip-path: polygon(0 0, 80% 0, 100% 100%, 20% 100%);
padding-bottom: 24px
}
@media screen and (min-width:960px) {
.commitments__item__image-wrapper {
padding-bottom: 36px
}
}
.commitments__item__title {
font-family: 'Riot Sans Latin', Arial, sans-serif;
letter-spacing: -.03em;
margin-left: 20%;
font-weight: 600;
text-transform: uppercase;
font-size: 18px;
line-height: 22px
}
[lang=cs_CZ] .commitments__item__title,
[lang=hu_HU] .commitments__item__title,
[lang=pl_PL] .commitments__item__title,
[lang=tr_tr] .commitments__item__title,
[lang=vi_vi] .commitments__item__title,
html[lang=cs] .commitments__item__title,
html[lang=hu] .commitments__item__title,
html[lang=pl] .commitments__item__title,
html[lang=tr] .commitments__item__title,
html[lang=vi] .commitments__item__title {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .commitments__item__title,
html[lang=ko] .commitments__item__title {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .commitments__item__title,
html[lang=th] .commitments__item__title {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .commitments__item__title,
html[lang=ja] .commitments__item__title {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .commitments__item__title,
[lang=zh-hant] .commitments__item__title,
html[lang=zh-cn] .commitments__item__title,
html[lang=zh-hant] .commitments__item__title {
font-family: 'Riot Sans CN', sans-serif
}
@media screen and (min-width:960px) {
.commitments__item__title {
font-size: 20px;
line-height: 24px
}
}
.commitments__item__cta {
margin-left: 20%;
padding-top: 8px;
font-size: 16px;
text-decoration: underline;
font-family: ClassicGrotesqueW02, Arial, sans-serif
}
.commitments__pagination {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
padding-top: 20px;
gap: 12px
}
.commitments__pagination__button {
position: relative;
width: 8px;
height: 8px;
background: #dbd9d6;
border-radius: 100%;
border: 0
}
.commitments__pagination__button.commitments__pagination__button--active {
background: #d1363a
}
.commitments__pagination__button:focus,
.commitments__pagination__button:hover {
background: #d1363a;
transition: .2s
}
.commitments__pagination__button::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
left: 50%;
top: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.community-pact {
background: #f1f5f1
}
.community-pact--rtl .community-pact__hero {
background: linear-gradient(170deg, #f1f5f1 65%, #212121 65%)
}
@media screen and (max-width:960px) {
.community-pact--rtl .community-pact__hero {
background: linear-gradient(170deg, #f1f5f1 50%, #212121 50%)
}
}
.community-pact--rtl .community-pact__hero-image-wrapper {
right: auto;
left: -15%
}
@media screen and (max-width:1440px) {
.community-pact--rtl .community-pact__hero-image-wrapper {
left: 0
}
}
.community-pact--rtl .community-pact__hero-image-wrapper::before {
-ms-transform: scale(1.3) scaleX(-1);
transform: scale(1.3) scaleX(-1)
}
@media screen and (max-width:960px) {
.community-pact--rtl .community-pact__hero-image-wrapper::before {
-ms-transform: scale(1.7) scaleX(-1);
transform: scale(1.7) scaleX(-1)
}
}
.community-pact--rtl .community-pact__hero-image {
-ms-transform: scale(1.4) scaleX(-1);
transform: scale(1.4) scaleX(-1)
}
@media screen and (max-width:1440px) {
.community-pact--rtl .community-pact__hero-image {
-ms-transform: scale(1.2) scaleX(-1);
transform: scale(1.2) scaleX(-1)
}
}
@media screen and (max-width:960px) {
.community-pact--rtl .community-pact__hero-image {
-ms-transform: scale(2) scaleX(-1);
transform: scale(2) scaleX(-1)
}
}
@media screen and (max-width:800px) {
.community-pact--rtl .community-pact__hero-image {
-ms-transform: scale(1.3) scaleX(-1);
transform: scale(1.3) scaleX(-1)
}
}
@media screen and (max-width:550px) {
.community-pact--rtl .community-pact__hero-image {
-ms-transform: scale(1.3) scaleX(-1);
transform: scale(1.3) scaleX(-1)
}
}
@media screen and (max-width:300px) {
.community-pact--rtl .community-pact__hero-image {
-ms-transform: scale(1) scaleX(-1);
transform: scale(1) scaleX(-1)
}
}
.community-pact--rtl .community-pact__sidebar {
border-right: none;
border-left: 1px solid #a4a4a4;
padding-right: 0;
padding-left: 2em
}
.community-pact--rtl .community-pact__sidebar--desktop li {
padding-left: 0;
padding-right: 30px
}
.community-pact--rtl .community-pact__sidebar--desktop li span {
left: auto;
right: 0
}
.community-pact--rtl .community-pact__content-body--with-x ul li::before {
margin-right: 0;
margin-left: 1em
}
.community-pact__hero {
background: linear-gradient(190deg, #f1f5f1 65%, #212121 65%);
min-height: 70vh;
color: #fff;
padding-top: 5em;
position: relative;
overflow: visible
}
@media screen and (max-width:960px) {
.community-pact__hero {
background: linear-gradient(190deg, #f1f5f1 50%, #212121 50%);
min-height: auto;
padding-top: 2em;
padding-bottom: 2em
}
}
.community-pact__hero-inner {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between;
min-height: calc(70vh - 4em);
z-index: 2
}
@media screen and (max-width:960px) {
.community-pact__hero-inner {
overflow: hidden
}
}
.community-pact__hero::after {
content: '';
position: absolute;
width: 100%;
height: 160px;
bottom: -150px;
left: 0;
background-image: url(/assets/img/content/e08f7da31b2c6fa22f06ce946caa5146/community-pact-page-divider.svg);
background-size: 100% auto;
background-position: bottom center;
z-index: 1;
background-repeat: no-repeat
}
@media screen and (max-width:960px) {
.community-pact__hero::after {
bottom: -30px
}
}
.community-pact__hero-image-wrapper {
position: absolute;
right: -15%;
top: 10%;
width: 70%;
height: 100%;
z-index: 2;
overflow: visible
}
@media screen and (max-width:1440px) {
.community-pact__hero-image-wrapper {
right: -100px;
width: 60%
}
}
@media screen and (max-width:960px) {
.community-pact__hero-image-wrapper {
position: relative;
right: auto !important;
width: 100%;
height: 230px;
margin: 2em 0
}
}
.community-pact__hero-image-wrapper::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: -50px;
left: 0;
background-image: url(/assets/img/content/59c6917458b7a8796768dede4557441b/community-pact-hero-texture.svg);
background-position: center center;
background-repeat: no-repeat;
z-index: -1;
opacity: .3;
-ms-transform: scale(1.3);
transform: scale(1.3)
}
@media screen and (max-width:960px) {
.community-pact__hero-image-wrapper::before {
-ms-transform: scale(2.5);
transform: scale(2.5)
}
}
@media screen and (max-width:800px) {
.community-pact__hero-image-wrapper::before {
-ms-transform: scale(1.5);
transform: scale(1.5)
}
}
.community-pact__hero-image {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 1;
overflow: visible;
-o-object-fit: contain;
object-fit: contain;
-ms-transform: scale(1.4);
transform: scale(1.4);
-webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 80%, transparent 100%)
}
@media screen and (max-width:1440px) {
.community-pact__hero-image {
-ms-transform: scale(1.2);
transform: scale(1.2)
}
}
@media screen and (max-width:960px) {
.community-pact__hero-image {
position: relative;
-o-object-fit: contain;
object-fit: contain;
-webkit-mask-image: unset;
mask-image: unset;
position: relative;
-ms-transform: scale(2);
transform: scale(2)
}
}
@media screen and (max-width:800px) {
.community-pact__hero-image {
-ms-transform: scale(1.3);
transform: scale(1.3)
}
}
@media screen and (max-width:550px) {
.community-pact__hero-image {
-ms-transform: scale(1.3);
transform: scale(1.3)
}
}
@media screen and (max-width:300px) {
.community-pact__hero-image {
-ms-transform: scale(1);
transform: scale(1)
}
}
.community-pact__hero-header {
z-index: 3;
max-width: 540px;
text-align: center;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
gap: 15px
}
[lang=fr_FR] .community-pact__hero-header,
html[lang=fr] .community-pact__hero-header {
max-width: 600px
}
[lang=pl_PL] .community-pact__hero-header,
html[lang=pl] .community-pact__hero-header {
max-width: 625px
}
[lang=ro_RO] .community-pact__hero-header,
html[lang=ro] .community-pact__hero-header {
max-width: 600px
}
[lang=pt_BR] .community-pact__hero-header,
html[lang=pt-br] .community-pact__hero-header {
max-width: 555px
}
[lang=ru_RU] .community-pact__hero-header,
html[lang=ru] .community-pact__hero-header {
max-width: 580px
}
[lang=el_EL] .community-pact__hero-header,
html[lang=el] .community-pact__hero-header {
max-width: 670px
}
[lang=ja_JA] .community-pact__hero-header,
html[lang=ja] .community-pact__hero-header {
max-width: 565px
}
@media screen and (max-width:960px) {
.community-pact__hero-header {
padding-left: 0;
max-width: 100%;
margin-left: auto;
margin-right: auto
}
}
.community-pact__hero-header h1 {
font-size: 5.2em;
line-height: 100%;
color: #000;
text-transform: uppercase
}
[lang=hu_HU] .community-pact__hero-header h1,
[lang=vi_vi] .community-pact__hero-header h1,
html[lang=hu] .community-pact__hero-header h1,
html[lang=vi] .community-pact__hero-header h1 {
line-height: 1.3
}
@media screen and (max-width:960px) {
.community-pact__hero-header h1 {
font-size: 3em
}
[lang=hu_HU] .community-pact__hero-header h1,
[lang=vi_vi] .community-pact__hero-header h1,
html[lang=hu] .community-pact__hero-header h1,
html[lang=vi] .community-pact__hero-header h1 {
line-height: 1.3
}
}
.community-pact__hero-logo {
-ms-flex-item-align: center;
align-self: center
}
@media screen and (max-width:960px) {
.community-pact__hero-logo {
width: 210px
}
}
.community-pact__hero-list {
z-index: 2;
margin-top: auto;
-ms-transform: translateY(2em);
transform: translateY(2em)
}
@media screen and (max-width:960px) {
.community-pact__hero-list {
margin-top: 2em;
text-align: center;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
-ms-transform: unset;
transform: unset
}
}
.community-pact__hero-list-item {
list-style: none;
margin-left: 0;
font-family: 'Riot Sans Latin', Arial, sans-serif;
font-weight: 700;
font-size: 1.6em;
display: -ms-flexbox;
display: flex
}
[lang=cs_CZ] .community-pact__hero-list-item,
[lang=hu_HU] .community-pact__hero-list-item,
[lang=pl_PL] .community-pact__hero-list-item,
[lang=tr_tr] .community-pact__hero-list-item,
[lang=vi_vi] .community-pact__hero-list-item,
html[lang=cs] .community-pact__hero-list-item,
html[lang=hu] .community-pact__hero-list-item,
html[lang=pl] .community-pact__hero-list-item,
html[lang=tr] .community-pact__hero-list-item,
html[lang=vi] .community-pact__hero-list-item {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .community-pact__hero-list-item,
html[lang=ko] .community-pact__hero-list-item {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .community-pact__hero-list-item,
html[lang=th] .community-pact__hero-list-item {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .community-pact__hero-list-item,
html[lang=ja] .community-pact__hero-list-item {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .community-pact__hero-list-item,
[lang=zh-hant] .community-pact__hero-list-item,
html[lang=zh-cn] .community-pact__hero-list-item,
html[lang=zh-hant] .community-pact__hero-list-item {
font-family: 'Riot Sans CN', sans-serif
}
@media screen and (max-width:960px) {
.community-pact__hero-list-item {
font-size: 1.2em;
-ms-flex-pack: center;
justify-content: center
}
}
.community-pact__hero-list-item a {
color: #fff;
display: block;
position: relative;
z-index: 0
}
.community-pact__hero-list-item a:hover {
text-decoration: none
}
.community-pact__hero-list-item a:hover::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 20px;
z-index: -1;
background-image: url(/assets/img/content/0240d319bfc24a6a9267cc714c04fdb1/brush-underline.png);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: bottom center
}
.community-pact__hero-list-item--small {
font-size: 1em;
margin-bottom: .2em;
opacity: .8
}
.community-pact__introduction {
background: #d7d7d7;
padding-top: 12em;
padding-bottom: 4em;
font-style: italic;
position: relative
}
@media screen and (max-width:960px) {
.community-pact__introduction {
padding-top: 4em;
padding-bottom: 4em
}
}
.community-pact__introduction::after {
content: '';
position: absolute;
width: 100%;
height: 170px;
bottom: -150px;
left: 0;
background-image: url(/assets/img/content/6fc4ec868d06c3ff9e1d679b4fb89e69/community-pact-other-page-divider.svg);
background-size: 100% auto;
background-position: bottom center;
z-index: 1;
background-repeat: no-repeat
}
@media screen and (max-width:960px) {
.community-pact__introduction::after {
height: 50px;
bottom: -40px
}
}
.community-pact__sidebar-wrapper {
display: none
}
@media screen and (max-width:960px) {
.community-pact__sidebar-wrapper {
display: block;
position: sticky;
top: 80px;
z-index: 10
}
}
.community-pact__sidebar-container {
display: none
}
@media screen and (max-width:960px) {
.community-pact__sidebar-container {
display: block;
width: 100%;
max-width: 100%;
overflow-x: hidden
}
}
.community-pact__items {
margin-top: 10em;
margin-bottom: 6em
}
@media screen and (max-width:960px) {
.community-pact__items {
margin-top: 3em
}
}
.community-pact__items-inner {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 40px
}
@media screen and (max-width:960px) {
.community-pact__items-inner {
grid-template-columns: 1fr
}
}
.community-pact__content-header {
background: #212121;
color: #fff;
padding: 2em;
border-radius: 30px;
margin-bottom: 2em;
position: relative;
overflow: hidden
}
.community-pact__content-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
opacity: .2;
z-index: 0
}
.community-pact__content-header-heading {
display: -ms-flexbox;
display: flex;
gap: 20px;
position: relative;
z-index: 1;
-ms-flex-align: center;
align-items: center
}
@media screen and (max-width:960px) {
.community-pact__content-header-heading {
-ms-flex-direction: column;
flex-direction: column;
gap: 10px;
-ms-flex-align: unset;
align-items: unset
}
}
.community-pact__content-header-heading h2 {
font-weight: 700;
font-size: 3em;
line-height: 100%;
margin-bottom: 0
}
@media screen and (max-width:960px) {
.community-pact__content-header-heading h2 {
margin-bottom: .2em
}
}
.community-pact__content-header-description {
color: #fff;
position: relative;
z-index: 1
}
@media screen and (max-width:960px) {
.community-pact__content-header-description {
font-size: 1.2em;
line-height: 1.3
}
}
.community-pact__content-header--highlighted {
background-color: #760015
}
@media screen and (max-width:960px) {
.community-pact__content-item {
scroll-margin-top: 50px
}
}
.community-pact__content-item:nth-child(1) .community-pact__content-header::before {
background-image: url(/assets/img/content/5900887762f7f13c69adc15138e4e647/community-pact-body-texture-1.svg)
}
.community-pact__content-item:nth-child(2) .community-pact__content-header::before {
background-image: url(/assets/img/content/2bc64530fbfd484ac8fe77850b306527/community-pact-body-texture-2.svg)
}
.community-pact__content-item:nth-child(3) .community-pact__content-header::before {
background-image: url(/assets/img/content/013f79687ba6294aa80a7a8ab1b63cda/community-pact-body-texture-3.svg)
}
.community-pact__content-item:nth-child(4) .community-pact__content-header::before {
background-image: url(/assets/img/content/6dc4a4730ca98877d54ec048e3133270/community-pact-body-texture-4.svg);
opacity: 1;
mix-blend-mode: soft-light
}
.community-pact__content-body {
margin-bottom: 2em;
padding-left: 2em;
padding-right: 2em
}
.community-pact__content-body-faq {
margin-bottom: 2em;
border-bottom: 1px solid #d3d1cf;
margin-left: 2em;
margin-right: 2em
}
.community-pact__content-body--with-x ul li {
list-style: none;
margin-bottom: 1em;
margin-left: 0;
padding-left: 2.2em;
text-indent: -2.2em
}
.community-pact__content-body--with-x ul li::before {
content: '❌';
margin-right: 1em
}
.community-pact #glossary .community-pact__content-header::before {
background-image: url(/assets/img/content/965a8461e8f666f1c6d1f46794656129/community-pact-body-texture-5.svg)
}
.community-pact__sidebar {
-ms-flex-item-align: stretch;
align-self: stretch;
border-right: 1px solid #a4a4a4;
padding-right: 2em
}
@media screen and (max-width:960px) {
.community-pact__sidebar--desktop {
display: none
}
}
.community-pact__sidebar--mobile {
display: none
}
@media screen and (max-width:960px) {
.community-pact__sidebar--mobile {
display: block;
border-right: none;
padding-right: 0;
background: #f1f5f1;
padding: 1em 0;
margin-top: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
border-bottom: 2px solid #a4a4a4;
width: 100%;
max-width: 100%;
box-sizing: border-box;
scrollbar-width: none
}
.community-pact__sidebar--mobile::-webkit-scrollbar {
display: none
}
}
.community-pact__sidebar-icon {
visibility: hidden
}
.community-pact__sidebar-icon svg {
width: 18px !important;
height: 16px !important
}
.community-pact__sidebar-inner {
position: sticky;
top: 100px
}
@media screen and (max-width:960px) {
.community-pact__sidebar-inner {
position: static
}
}
.community-pact__sidebar ul {
list-style: none;
margin: 0;
padding: 0
}
@media screen and (max-width:960px) {
.community-pact__sidebar ul {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
gap: 1em;
padding: 0 1em
}
}
.community-pact__sidebar li {
list-style: none;
margin: 0 0 1.2em 0;
padding: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
gap: 10px;
position: relative;
padding-left: 30px
}
@media screen and (max-width:960px) {
.community-pact__sidebar li {
margin: 0;
padding-left: 0;
white-space: nowrap;
-ms-flex-negative: 0;
flex-shrink: 0;
padding-left: 1em
}
.community-pact__sidebar li:last-child {
padding-right: 2em
}
}
.community-pact__sidebar li span {
position: absolute;
left: 0;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%)
}
@media screen and (max-width:960px) {
.community-pact__sidebar li span {
position: relative;
top: 30%;
-ms-transform: translateY(-30%);
transform: translateY(-30%)
}
}
.community-pact__sidebar li a {
color: #000;
text-decoration: none;
-ms-flex: 1;
flex: 1;
font-weight: 700;
line-height: 1.1em
}
.community-pact__sidebar li a:hover {
text-decoration: none
}
.community-pact__sidebar li.active .community-pact__sidebar-icon {
visibility: visible
}
.community-pact__sidebar li.active a {
color: #d1363a;
opacity: 1
}
.community-pact__sidebar-item--small a {
opacity: .4
}
.community-pact__relatedArticles {
background: #dad9d6;
padding: 4em 3em;
position: relative
}
.community-pact__relatedArticles__bg {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #dbd9d6;
background-image: url(/assets/img/structure/6d79447d110ef217a5a784efe55ba29b/texture-light@2x.jpg);
background-size: 50%;
background-repeat: repeat;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 10px));
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 10px));
margin-top: -10px
}
@media screen and (min-width:550px) {
.community-pact__relatedArticles__bg {
-webkit-clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 calc(100% - 20px));
clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 calc(100% - 20px))
}
}
@media screen and (min-width:960px) {
.community-pact__relatedArticles__bg {
-webkit-clip-path: polygon(0 15px, 100% 0, 100% 100%, 0 calc(100% - 25px));
clip-path: polygon(0 15px, 100% 0, 100% 100%, 0 calc(100% - 25px))
}
}
.community-pact__relatedArticles h2 {
font-size: 2.8em;
text-align: center;
margin-bottom: 1em;
position: relative;
z-index: 1;
line-height: 100%
}
.community-pact__relatedArticles .content-gutter--large {
position: relative;
z-index: 1
}
@media screen and (max-width:399px) {
.community-pact__relatedArticles .grid .grid__item {
width: 100%
}
}
.community-pact__relatedArticles-item {
margin-bottom: 2em;
position: relative
}
.community-pact__relatedArticles-item-overlay-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1
}
.community-pact__relatedArticles-item a {
text-decoration: none;
color: inherit
}
.community-pact__relatedArticles-item-inner {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
gap: 20px
}
.community-pact__relatedArticles-item-image {
overflow: hidden;
position: relative;
background-color: #2b2a29
}
.community-pact__relatedArticles-item-image img {
transition: all .3s ease-out;
vertical-align: top
}
.community-pact__relatedArticles-item-category {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-align: center;
align-items: center;
text-transform: uppercase;
color: #8f8e8e;
font-family: 'Riot Sans Latin', Arial, sans-serif;
font-weight: 600;
font-size: .8em;
gap: 8px;
letter-spacing: 1px;
line-height: 1.4
}
[lang=cs_CZ] .community-pact__relatedArticles-item-category,
[lang=hu_HU] .community-pact__relatedArticles-item-category,
[lang=pl_PL] .community-pact__relatedArticles-item-category,
[lang=tr_tr] .community-pact__relatedArticles-item-category,
[lang=vi_vi] .community-pact__relatedArticles-item-category,
html[lang=cs] .community-pact__relatedArticles-item-category,
html[lang=hu] .community-pact__relatedArticles-item-category,
html[lang=pl] .community-pact__relatedArticles-item-category,
html[lang=tr] .community-pact__relatedArticles-item-category,
html[lang=vi] .community-pact__relatedArticles-item-category {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .community-pact__relatedArticles-item-category,
html[lang=ko] .community-pact__relatedArticles-item-category {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .community-pact__relatedArticles-item-category,
html[lang=th] .community-pact__relatedArticles-item-category {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .community-pact__relatedArticles-item-category,
html[lang=ja] .community-pact__relatedArticles-item-category {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .community-pact__relatedArticles-item-category,
[lang=zh-hant] .community-pact__relatedArticles-item-category,
html[lang=zh-cn] .community-pact__relatedArticles-item-category,
html[lang=zh-hant] .community-pact__relatedArticles-item-category {
font-family: 'Riot Sans CN', sans-serif
}
.community-pact__relatedArticles-item-category-game-badge {
-ms-flex-negative: 0;
flex-shrink: 0;
-ms-flex-item-align: center;
align-self: center;
margin-right: 0
}
.community-pact__relatedArticles-item-category-text {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
gap: 4px;
line-height: 1.4
}
.community-pact__relatedArticles-item-title h4 {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-size: 1.5em;
letter-spacing: -.04em;
line-height: 120%
}
[lang=cs_CZ] .community-pact__relatedArticles-item-title h4,
[lang=hu_HU] .community-pact__relatedArticles-item-title h4,
[lang=pl_PL] .community-pact__relatedArticles-item-title h4,
[lang=tr_tr] .community-pact__relatedArticles-item-title h4,
[lang=vi_vi] .community-pact__relatedArticles-item-title h4,
html[lang=cs] .community-pact__relatedArticles-item-title h4,
html[lang=hu] .community-pact__relatedArticles-item-title h4,
html[lang=pl] .community-pact__relatedArticles-item-title h4,
html[lang=tr] .community-pact__relatedArticles-item-title h4,
html[lang=vi] .community-pact__relatedArticles-item-title h4 {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .community-pact__relatedArticles-item-title h4,
html[lang=ko] .community-pact__relatedArticles-item-title h4 {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .community-pact__relatedArticles-item-title h4,
html[lang=th] .community-pact__relatedArticles-item-title h4 {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .community-pact__relatedArticles-item-title h4,
html[lang=ja] .community-pact__relatedArticles-item-title h4 {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .community-pact__relatedArticles-item-title h4,
[lang=zh-hant] .community-pact__relatedArticles-item-title h4,
html[lang=zh-cn] .community-pact__relatedArticles-item-title h4,
html[lang=zh-hant] .community-pact__relatedArticles-item-title h4 {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
.community-pact__relatedArticles-item-description {
color: #000;
font-size: 1em;
line-height: 21px
}
.community-pact__relatedArticles-item-date time {
font-family: 'Riot Sans Latin', Arial, sans-serif;
font-weight: 600;
font-size: .8em;
letter-spacing: .1em;
text-transform: uppercase
}
[lang=cs_CZ] .community-pact__relatedArticles-item-date time,
[lang=hu_HU] .community-pact__relatedArticles-item-date time,
[lang=pl_PL] .community-pact__relatedArticles-item-date time,
[lang=tr_tr] .community-pact__relatedArticles-item-date time,
[lang=vi_vi] .community-pact__relatedArticles-item-date time,
html[lang=cs] .community-pact__relatedArticles-item-date time,
html[lang=hu] .community-pact__relatedArticles-item-date time,
html[lang=pl] .community-pact__relatedArticles-item-date time,
html[lang=tr] .community-pact__relatedArticles-item-date time,
html[lang=vi] .community-pact__relatedArticles-item-date time {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .community-pact__relatedArticles-item-date time,
html[lang=ko] .community-pact__relatedArticles-item-date time {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .community-pact__relatedArticles-item-date time,
html[lang=th] .community-pact__relatedArticles-item-date time {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .community-pact__relatedArticles-item-date time,
html[lang=ja] .community-pact__relatedArticles-item-date time {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .community-pact__relatedArticles-item-date time,
[lang=zh-hant] .community-pact__relatedArticles-item-date time,
html[lang=zh-cn] .community-pact__relatedArticles-item-date time,
html[lang=zh-hant] .community-pact__relatedArticles-item-date time {
font-family: 'Riot Sans CN', sans-serif
}
.community-pact__relatedArticles-item-overlay-link:active~.community-pact__relatedArticles-item-inner .community-pact__relatedArticles-item-image img,
.community-pact__relatedArticles-item-overlay-link:focus~.community-pact__relatedArticles-item-inner .community-pact__relatedArticles-item-image img,
.community-pact__relatedArticles-item-overlay-link:hover~.community-pact__relatedArticles-item-inner .community-pact__relatedArticles-item-image img {
transition-duration: .1s;
-ms-transform: scale(1.05);
transform: scale(1.05);
opacity: .4
}
.community-pact__relatedArticles-item-overlay-link:active~.community-pact__relatedArticles-item-inner .community-pact__relatedArticles-item-title h4 span,
.community-pact__relatedArticles-item-overlay-link:focus~.community-pact__relatedArticles-item-inner .community-pact__relatedArticles-item-title h4 span,
.community-pact__relatedArticles-item-overlay-link:hover~.community-pact__relatedArticles-item-inner .community-pact__relatedArticles-item-title h4 span {
background-image: url(/assets/img/structure/149a1d9c51c7bf69816f75699be94a7e/distressed-underline.svg);
background-repeat: repeat-x;
background-position: 0 100%;
background-size: 680px 3px;
display: inline
}
.contact-grid {
position: relative;
text-align: center;
padding-bottom: 456.5px
}
@media screen and (min-width:550px) {
.contact-grid {
padding-bottom: 581.45px
}
}
@media screen and (min-width:1440px) {
.contact-grid {
padding-bottom: 0
}
}
.contact-grid__bg {
content: '';
position: absolute;
width: 100%;
height: 416.5px;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
background-size: auto 100%;
background-position: 0 100%;
background-repeat: no-repeat
}
@media screen and (min-width:550px) {
.contact-grid__bg {
height: 541.45px
}
}
@media screen and (min-width:1440px) {
.contact-grid__bg {
width: 624.75px;
height: 624.75px
}
}
.contact-grid__inner {
position: relative;
text-align: center
}
.contact-grid__items {
margin-left: auto;
margin-right: auto;
max-width: 500px
}
.contact-grid__items .heading.heading--6 {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em
}
[lang=cs_CZ] .contact-grid__items .heading.heading--6,
[lang=hu_HU] .contact-grid__items .heading.heading--6,
[lang=pl_PL] .contact-grid__items .heading.heading--6,
[lang=tr_tr] .contact-grid__items .heading.heading--6,
[lang=vi_vi] .contact-grid__items .heading.heading--6,
html[lang=cs] .contact-grid__items .heading.heading--6,
html[lang=hu] .contact-grid__items .heading.heading--6,
html[lang=pl] .contact-grid__items .heading.heading--6,
html[lang=tr] .contact-grid__items .heading.heading--6,
html[lang=vi] .contact-grid__items .heading.heading--6 {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .contact-grid__items .heading.heading--6,
html[lang=ko] .contact-grid__items .heading.heading--6 {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .contact-grid__items .heading.heading--6,
html[lang=th] .contact-grid__items .heading.heading--6 {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .contact-grid__items .heading.heading--6,
html[lang=ja] .contact-grid__items .heading.heading--6 {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .contact-grid__items .heading.heading--6,
[lang=zh-hant] .contact-grid__items .heading.heading--6,
html[lang=zh-cn] .contact-grid__items .heading.heading--6,
html[lang=zh-hant] .contact-grid__items .heading.heading--6 {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
@media screen and (min-width:1440px) {
.contact-grid__items {
width: 50%;
margin-right: 0;
min-height: 560px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
max-width: none
}
}
.contact-grid__item {
text-align: center;
margin-top: 40px
}
@media screen and (min-width:550px) {
.contact-grid__item {
text-align: left
}
}
.contact-grid__item .heading {
margin-bottom: 10px
}
.contact-grid__item a {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 100%;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 1px
}
@media screen and (min-width:550px) {
.contact-grid__item a {
padding-top: 0;
padding-bottom: 0
}
}
.container {
position: relative;
background-color: #1f1f1f;
color: #f9f9f9;
z-index: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
row-gap: 50px
}
.container:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .07;
background-image: url(/assets/img/structure/2c9f2b01af96673e5fb63b9aab3dad70/ContentShowcaseBKg.svg);
background-size: cover;
background-position: top right;
background-repeat: no-repeat;
z-index: -1
}
@media screen and (min-width:960px) {
.container {
row-gap: 6.25rem
}
}
.container h3 {
color: #f9f9f9
}
.title {
text-align: center
}
.title h2 {
font-size: 1.938rem
}
@media screen and (min-width:960px) {
.title {
text-align: left
}
.title h2 {
font-size: 3rem
}
}
.content-showcase__embla {
max-width: 100vw;
margin: auto;
padding: 0 1.25rem
}
.content-showcase__embla__viewport {
overflow: hidden
}
.content-showcase__embla__container {
display: -ms-flexbox;
display: flex;
-ms-touch-action: pan-y pinch-zoom;
touch-action: pan-y pinch-zoom;
margin-left: 20px
}
@media screen and (min-width:1440px) {
.content-showcase__embla__container {
margin-left: 0
}
}
.content-showcase__secondary__slide__bkg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
-o-object-fit: cover;
object-fit: cover;
background-repeat: no-repeat;
-ms-transform-origin: center center;
transform-origin: center center
}
.content-showcase__secondary__slide__logo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
z-index: 2
}
.content-showcase__secondary__slide__logo img {
max-width: 50%;
max-height: 50%;
-o-object-fit: contain;
object-fit: contain
}
.content-showcase__header {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
margin-bottom: 30px;
-ms-flex-pack: justify;
justify-content: space-between
}
@media screen and (min-width:960px) {
.content-showcase__header {
margin-bottom: 3.75rem
}
}
.content-showcase__carousel__buttons {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
gap: .625rem
}
.content-showcase__carousel__button {
background: 0 0;
border: none;
cursor: pointer;
color: #fff;
width: 2.5rem;
height: 2.5rem;
padding: .625rem .938rem;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
transition: all .2s ease-in-out
}
.content-showcase__carousel__button svg {
width: 14px;
height: 14px;
fill: currentColor
}
.content-showcase__carousel__button.content-showcase__carousel__button--disabled,
.content-showcase__carousel__button:disabled {
opacity: .5;
cursor: not-allowed
}
.content-showcase__carousel__button.content-showcase__carousel__button--next {
-ms-transform: rotate(180deg);
transform: rotate(180deg)
}
.content-showcase__carousel__button-separator {
width: 1px;
height: 40px;
background-color: #fff;
display: inline-block
}
.embla {
max-width: 99vw;
width: 100%;
margin: auto;
--slide-height: 42rem;
--slide-spacing: 3rem;
--slide-size: 70%
}
@media screen and (min-width:550px) {
.embla {
--slide-size: 50%
}
}
@media screen and (min-width:960px) {
.embla {
--slide-size: 25%
}
}
@media screen and (min-width:1440px) {
.embla {
--slide-size: 20%
}
}
@media screen and (min-width:1920px) {
.embla {
--slide-size: 14%
}
}
.embla__viewport {
overflow: hidden
}
.embla__container {
justify-content: center;
display: -ms-flexbox;
display: flex;
-ms-touch-action: pan-y pinch-zoom;
touch-action: pan-y pinch-zoom;
margin-left: calc(var(--slide-spacing) * -1)；
}
.embla__slide {
transform: translate3d(0, 0, 0);
-ms-flex: 0 0 var(--slide-size);
flex: 0 0 var(--slide-size);
min-width: 0;
padding-left: var(--slide-spacing)
}
.embla__slide__container {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
height: auto;
aspect-ratio: 387/650;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
background: grey;
margin: 0 -3.5rem;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.embla__slide__container:active,
.embla__slide__container:focus,
.embla__slide__container:hover {
outline: 0;
text-decoration: none;
transition: all .2s ease-out
}
.embla__slide__container:active {
transition: all .2s ease-out
}
.embla__slide__container:focus-visible::after {
opacity: 1
}
.embla__slide__container:active::after {
opacity: 0
}
.embla__slide__container::after {
content: '';
border: 2px solid rgba(249, 249, 249, .4);
border-radius: 12px;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
padding: 2px;
color: #f9f9f9;
display: block;
opacity: 0;
pointer-events: none;
position: absolute;
transition: opacity .1s ease-out;
z-index: 4;
border: 2px solid rgba(249, 249, 249, .4)
}
@supports (-webkit-mask:linear-gradient(to top, #f00, #008000)) and ((-webkit-mask-composite:xor) or (mask-composite:exclude)) {
.embla__slide__container::after {
border: 0;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
--angle: -90deg;
-webkit-animation: 8s rotate linear infinite;
animation: 8s rotate linear infinite;
background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, .4));
background: conic-gradient(from var(--angle), rgba(255, 255, 255, .8), rgba(255, 255, 255, .2), rgba(255, 255, 255, .8))
}
.embla__slide__container:active::after {
background-color: #fff
}
}
.embla__slide__container:active .content-showcase__main__slide__content:before,
.embla__slide__container:focus-visible .content-showcase__main__slide__content:before,
.embla__slide__container:focus-within .content-showcase__main__slide__content:before,
.embla__slide__container:hover .content-showcase__main__slide__content:before {
background-color: rgba(0, 0, 0, .1)
}
.content-showcase__main__slide__content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between
}
.content-showcase__main__slide__content:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .25);
z-index: 1;
transition: background-color .3s ease-in-out
}
.content-showcase__main__slide__logo {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
margin: 100px auto;
position: absolute;
top: 0;
left: 0;
z-index: 2;
-ms-transform: translateX(30px);
transform: translateX(30px)
}
.content-showcase__main__slide__logo img {
max-width: 50%;
max-height: 50%;
-o-object-fit: contain;
object-fit: contain;
-ms-transform: scaleY(1);
transform: scaleY(1)
}
.content-showcase__main__slide__bkg-image {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-ms-transform-origin: center;
transform-origin: center;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1
}
.content-showcase__main__slide__platforms {
position: absolute;
bottom: 12px;
right: 23%;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-moz-column-gap: 8px;
column-gap: 8px;
z-index: 2
}
.content-showcase__main__slide__platforms .icon,
.content-showcase__main__slide__platforms .icon svg {
width: auto !important;
height: 21px !important;
line-height: 21px !important;
display: -ms-flexbox;
display: flex
}
.content-showcase__main__slide__platforms__coming-soon {
font-size: .875rem;
color: #fff;
font-weight: 700;
text-transform: uppercase;
padding: .25rem 1rem;
background-color: rgba(138, 136, 135, .5);
border-radius: 20px;
letter-spacing: .05rem
}
.content-showcase__secondary__embla__container {
margin-left: 0;
display: -ms-flexbox;
display: flex
}
.content-showcase__secondary__slide {
-ms-flex: 0 0 95%;
flex: 0 0 95%;
min-width: 0;
display: block;
position: relative
}
.content-showcase__secondary__slide:active,
.content-showcase__secondary__slide:focus,
.content-showcase__secondary__slide:hover {
outline: 0;
text-decoration: none;
transition: all .2s ease-out
}
.content-showcase__secondary__slide:active {
transition: all .2s ease-out
}
.content-showcase__secondary__slide:focus-visible::after {
opacity: 1
}
.content-showcase__secondary__slide:active::after {
opacity: 0
}
.content-showcase__secondary__slide::after {
content: '';
border: 2px solid rgba(249, 249, 249, .4);
border-radius: 12px;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
padding: 2px;
color: #f9f9f9;
display: block;
opacity: 0;
pointer-events: none;
position: absolute;
transition: opacity .1s ease-out;
z-index: 4;
border: 2px solid rgba(249, 249, 249, .4)
}
@supports (-webkit-mask:linear-gradient(to top, #f00, #008000)) and ((-webkit-mask-composite:xor) or (mask-composite:exclude)) {
.content-showcase__secondary__slide::after {
border: 0;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
--angle: -90deg;
-webkit-animation: 8s rotate linear infinite;
animation: 8s rotate linear infinite;
background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, .4));
background: conic-gradient(from var(--angle), rgba(255, 255, 255, .8), rgba(255, 255, 255, .2), rgba(255, 255, 255, .8))
}
.content-showcase__secondary__slide:active::after {
background-color: #fff
}
}
.content-showcase__secondary__slide:active:before,
.content-showcase__secondary__slide:focus-visible:before,
.content-showcase__secondary__slide:focus-within:before,
.content-showcase__secondary__slide:hover:before {
background-color: rgba(0, 0, 0, .2)
}
@media screen and (min-width:550px) {
.content-showcase__secondary__slide {
-ms-flex: 0 0 50%;
flex: 0 0 50%
}
}
@media screen and (min-width:960px) {
.content-showcase__secondary__slide {
-ms-flex: 0 0 33.33%;
flex: 0 0 33.33%
}
}
@media screen and (min-width:1440px) {
.content-showcase__secondary__slide {
-ms-flex: 0 0 25%;
flex: 0 0 25%
}
}
.content-showcase__secondary__slide__container {
position: relative;
font-size: 3rem;
color: #000;
-webkit-clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%);
clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%)
}
.content-showcase__secondary__slide__content {
padding: 2rem;
background: grey;
aspect-ratio: 430/249
}
.content-showcase__secondary__slide__content:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .4);
z-index: 1;
transition: background-color .3s ease-in-out
}
.custom-check {
display: inline-block
}
.custom-check__control {
position: absolute;
z-index: -1;
opacity: 0
}
.custom-check__indicator {
position: relative;
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
margin-right: 1.25rem;
border: 2px solid #8a8887;
transition: border-color .3s ease-out
}
.custom-check__control:focus~.custom-check__indicator,
.custom-check__control:hover:not([disabled])~.custom-check__indicator {
border-color: #656462;
transition-duration: .1s
}
.custom-check__control:disabled~.custom-check__indicator {
opacity: .6;
cursor: not-allowed
}
.custom-check__indicator:after {
position: absolute;
content: '';
opacity: 0;
transition: opacity .4s ease-out, transform .4s cubic-bezier(.6, 1.5, .8, 1.15)
}
.custom-check--checkbox .custom-check__indicator:after {
top: 0;
left: 4px;
width: 5px;
height: 10px;
-ms-transform: scale(0) rotate(45deg);
transform: scale(0) rotate(45deg);
border: solid #adacaa;
border-width: 0 2px 2px 0
}
.custom-check--checkbox .custom-check__control:focus~.custom-check__indicator:after,
.custom-check--checkbox .custom-check__control:hover:not([disabled])~.custom-check__indicator:after {
transition-duration: .1s;
opacity: 1;
-ms-transform: scale(1) rotate(45deg);
transform: scale(1) rotate(45deg)
}
.custom-check--checkbox .custom-check__control:checked~.custom-check__indicator:after {
opacity: 1;
-ms-transform: scale(1) rotate(45deg);
transform: scale(1) rotate(45deg);
border-color: #d1363a
}
.custom-check--checkbox .custom-check__control:disabled~.custom-check__indicator:after {
border-color: #adacaa
}
.custom-check--radio .custom-check__indicator {
border-radius: 50%
}
.custom-check--radio .custom-check__indicator:after {
top: 3px;
left: 3px;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #adacaa;
-ms-transform: scale(0);
transform: scale(0)
}
.custom-check--radio .custom-check__control:focus~.custom-check__indicator:after,
.custom-check--radio .custom-check__control:hover:not([disabled])~.custom-check__indicator:after {
transition-duration: .1s;
opacity: 1;
-ms-transform: scale(1);
transform: scale(1)
}
.custom-check--radio .custom-check__control:checked~.custom-check__indicator:after {
transition-duration: .1s;
opacity: 1;
-ms-transform: scale(1);
transform: scale(1);
background-color: #d1363a
}
.custom-check--radio .custom-check__control:disabled~.custom-check__indicator:after {
background: #adacaa
}
.custom-check--error .custom-check__indicator {
border-color: #d1363a
}
.custom-check--inverse .custom-check__indicator {
background-color: transparent
}
.custom-check--inverse .custom-check__control:focus~.custom-check__indicator,
.custom-check--inverse .custom-check__control:hover:not([disabled])~.custom-check__indicator {
border-color: #adacaa
}
.custom-check--inverse .custom-check__control:checked~.custom-check__indicator {
border-color: #d1363a
}
.custom-check--inverse .custom-check__control:checked:focus~.custom-check__indicator,
.custom-check--inverse .custom-check__control:hover:not([disabled]):checked~.custom-check__indicator {
border-color: #d1363a;
box-shadow: 0 0 0 1px #d1363a inset
}
.custom-check--inverse.custom-check--checkbox .custom-check__indicator:after {
border-color: #d1363a
}
.custom-check--inverse.custom-check--radio .custom-check__indicator:after {
background: #d1363a
}
.control--choice,
.control--text {
display: block;
width: 100%;
border: 2px solid #dbd9d6;
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-weight: 700;
color: #2b2a29;
background-color: #dbd9d6;
transition: border-color .4s ease-out;
border-radius: 50px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 16px;
line-height: 22px;
padding: 14px 25px;
height: 3.125rem
}
[lang=cs_CZ] .control--choice,
[lang=cs_CZ] .control--text,
[lang=hu_HU] .control--choice,
[lang=hu_HU] .control--text,
[lang=pl_PL] .control--choice,
[lang=pl_PL] .control--text,
[lang=tr_tr] .control--choice,
[lang=tr_tr] .control--text,
[lang=vi_vi] .control--choice,
[lang=vi_vi] .control--text,
html[lang=cs] .control--choice,
html[lang=cs] .control--text,
html[lang=hu] .control--choice,
html[lang=hu] .control--text,
html[lang=pl] .control--choice,
html[lang=pl] .control--text,
html[lang=tr] .control--choice,
html[lang=tr] .control--text,
html[lang=vi] .control--choice,
html[lang=vi] .control--text {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .control--choice,
[lang=ko_ko] .control--text,
html[lang=ko] .control--choice,
html[lang=ko] .control--text {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .control--choice,
[lang=th_th] .control--text,
html[lang=th] .control--choice,
html[lang=th] .control--text {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .control--choice,
[lang=ja] .control--text,
html[lang=ja] .control--choice,
html[lang=ja] .control--text {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .control--choice,
[lang=zh-cn] .control--text,
[lang=zh-hant] .control--choice,
[lang=zh-hant] .control--text,
html[lang=zh-cn] .control--choice,
html[lang=zh-cn] .control--text,
html[lang=zh-hant] .control--choice,
html[lang=zh-hant] .control--text {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
@media screen and (min-width:550px) {
.control--choice,
.control--text {
font-size: 20px;
line-height: 26px;
padding: 19px 40px;
height: 4rem
}
}
.control--choice:hover,
.control--text:hover {
color: #2b2a29;
border-color: #c5c5c3;
transition-duration: .1s
}
.control--choice:focus,
.control--text:focus {
border-color: #c5c5c3;
color: #2b2a29;
outline: 0;
transition-duration: .1s
}
.control--choice::-moz-placeholder,
.control--text::-moz-placeholder {
color: #adacaa
}
.control--choice:-ms-input-placeholder,
.control--text:-ms-input-placeholder {
color: #adacaa
}
.control--choice::placeholder,
.control--text::placeholder {
color: #adacaa
}
.control--text {
-webkit-appearance: none
}
.control--text.control--error {
border-color: #d1363a;
color: #d1363a
}
.control--choice {
height: 64px
}
.control--choice option {
color: inherit
}
.control--multiline {
resize: vertical;
height: auto;
border-radius: 10px
}
.control--check {
margin-right: 10px;
line-height: inherit;
vertical-align: middle
}
.control--check+span {
vertical-align: middle
}
span+.control--check {
margin-right: 0;
margin-left: 10px
}
.control--check-list li+li {
margin-top: .625rem
}
.control--file {
line-height: 1;
font-size: inherit;
font-family: inherit
}
.control--inverse {
color: #e7e6e3;
background-color: #252423;
border-color: #252423
}
.control--inverse option {
color: #e7e6e3;
background-color: #252423
}
.control--inverse:focus,
.control--inverse:hover {
border-color: #656462;
color: #e7e6e3
}
.control--inverse.control--error {
border-color: #d1363a
}
.control.is-disabled,
.control[disabled] {
opacity: .5;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.custom-file {
overflow: hidden;
display: -ms-flexbox;
display: flex
}
.custom-file__button-wrapper,
.custom-file__filename {
vertical-align: top
}
.custom-file__button-wrapper {
-ms-flex: 0 1 auto;
flex: 0 1 auto;
position: relative;
z-index: 1;
cursor: pointer
}
.custom-file__hidden-input {
position: absolute;
bottom: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
opacity: 0;
outline: 0;
background: #e7e6e3;
cursor: inherit;
z-index: 2
}
.custom-file__button {
position: absolute;
top: 0;
right: 0;
height: 30px;
width: 30px;
margin: 10px;
padding: 0
}
@media screen and (min-width:550px) {
.custom-file__button {
height: 44px;
width: 44px
}
}
.custom-file__button:before {
content: none
}
.custom-file__button .icon svg {
fill: currentColor
}
.custom-file__hidden-input:focus~.custom-file__button,
.custom-file__hidden-input:hover~.custom-file__button {
text-decoration: none;
border: 0;
color: #e7e6e3;
outline: 0;
transition-duration: .1s;
background-color: #2b2a29;
background-position: 0 100%
}
.custom-file__hidden-input:focus~.custom-file__button span,
.custom-file__hidden-input:hover~.custom-file__button span {
border: 0;
text-decoration: none;
transition-duration: .1s
}
.custom-file__filename {
height: 3.125rem;
padding: 14px 25px;
padding-right: 50px;
font-size: 16px;
pointer-events: none;
font-family: 'Riot Sans Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-weight: 700;
color: #adacaa;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap
}
[lang=cs_CZ] .custom-file__filename,
[lang=hu_HU] .custom-file__filename,
[lang=pl_PL] .custom-file__filename,
[lang=tr_tr] .custom-file__filename,
[lang=vi_vi] .custom-file__filename,
html[lang=cs] .custom-file__filename,
html[lang=hu] .custom-file__filename,
html[lang=pl] .custom-file__filename,
html[lang=tr] .custom-file__filename,
html[lang=vi] .custom-file__filename {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .custom-file__filename,
html[lang=ko] .custom-file__filename {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .custom-file__filename,
html[lang=th] .custom-file__filename {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .custom-file__filename,
html[lang=ja] .custom-file__filename {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .custom-file__filename,
[lang=zh-hant] .custom-file__filename,
html[lang=zh-cn] .custom-file__filename,
html[lang=zh-hant] .custom-file__filename {
font-family: 'Riot Sans CN', sans-serif
}
.custom-file--has-file .custom-file__filename {
color: #252423
}
@media screen and (min-width:550px) {
.custom-file__filename {
padding: 19px 40px;
padding-right: 64px;
height: 4rem;
font-size: 20px;
line-height: 26px
}
}
.no-js .custom-file__filename span {
display: none
}
.custom-file--inverse .custom-file__filename {
color: #adacaa;
background-color: #252423;
border-color: #252423
}
.custom-file--error .custom-file__filename {
border-color: #d1363a;
color: #d1363a
}
.custom-file--error .custom-file__filename:focus,
.custom-file--error .custom-file__filename:hover {
background-color: #f5d6d7
}
.custom-file--error .custom-file__filename:active {
background-color: #f1c2c3
}
.custom-select {
position: relative;
display: block;
padding: 0;
border-radius: 50px
}
.custom-select select {
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
border: 0;
height: 50px;
box-shadow: 0 0 0 2px #dbd9d6 inset;
transition: box-shadow .3s ease-out
}
@media screen and (min-width:550px) {
.custom-select select {
height: 64px
}
}
.custom-select select:active,
.custom-select select:focus,
.custom-select select:hover {
border: 0;
box-shadow: 0 0 0 2px #c5c5c3 inset;
transition-duration: .1s
}
.custom-select__icon {
position: absolute;
width: 40px;
height: 40px;
top: 5px;
right: 5px;
z-index: 2;
border-radius: 50%;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
transition: all .3s ease-out;
background-color: #e7e6e3;
background-image: linear-gradient(-183deg, #e7e6e3 49.5%, #d1363a 50.5%);
background-size: 100% 255%;
background-position: 50% 0;
background-repeat: no-repeat;
pointer-events: none
}
@media screen and (min-width:550px) {
.custom-select__icon {
width: 44px;
height: 44px;
top: 10px;
right: 10px
}
}
.custom-select__icon path {
transition: all .3s ease-out;
fill: #2b2a29
}
.control.is-disabled+.custom-select__icon,
.control[disabled]+.custom-select__icon {
opacity: .5
}
.custom-select select:active+.custom-select__icon,
.custom-select select:focus+.custom-select__icon,
.custom-select select:hover+.custom-select__icon {
background-color: #e7e6e3;
background-position: 0 100%;
transition-duration: .1s
}
.custom-select select:active+.custom-select__icon path,
.custom-select select:focus+.custom-select__icon path,
.custom-select select:hover+.custom-select__icon path {
transition-duration: .1s;
fill: #e7e6e3
}
.custom-select--inverse select {
box-shadow: 0 0 0 2px #252423
}
.custom-select--inverse select:active,
.custom-select--inverse select:focus,
.custom-select--inverse select:hover {
box-shadow: 0 0 0 2px #656462
}
.custom-select--filter select {
height: 40px;
padding: 8px 30px 8px 20px;
font-size: .875rem;
line-height: 1.714
}
.custom-select--filter .custom-select__icon {
background: linear-gradient(to left, #dbd9d6 80%, rgba(219, 217, 214, 0) 100%) !important;
border-radius: 0 50px 50px 0;
top: 2px;
right: 2px;
height: 36px;
width: 35px;
-ms-flex-pack: start;
justify-content: flex-start;
padding-left: 10px
}
.custom-select--filter .custom-select__icon .icon path {
fill: #adacaa
}
.custom-select--filter select:active+.custom-select__icon path,
.custom-select--filter select:focus+.custom-select__icon path,
.custom-select--filter select:hover+.custom-select__icon path {
fill: #2b2a29
}
.custom-select--error {
border-color: #d1363a
}
.custom-select--error select,
.custom-select--error select:active,
.custom-select--error select:focus,
.custom-select--error select:hover {
color: #d1363a;
box-shadow: 0 0 0 2px #d1363a inset
}
.custom-select--error .custom-select__icon {
background-color: #d1363a;
background-position: 0 100%
}
.custom-select--error .custom-select__icon path {
fill: #e7e6e3
}
.no-csstransitions .custom-select__icon {
content: none
}
.custom-select::after,
x:-o-prefocus {
display: none
}
@media screen and (-ms-high-contrast:active),
(-ms-high-contrast:none) {
.custom-select select::-ms-expand {
display: none
}
.custom-select select:focus::-ms-value {
background: 0 0;
color: #252423
}
}
@-moz-document url-prefix() {
.custom-select {
overflow: hidden
}
.custom-select select:focus {
box-shadow: none !important
}
}
.custom-select select:-moz-focusring {
color: inherit;
text-shadow: 0 0 0 #252423
}
.date-selector__heading {
margin-top: 40px;
margin-bottom: 15px;
padding-left: 25px;
padding-right: 25px
}
@media screen and (min-width:550px) {
.date-selector__heading {
padding-left: 40px;
padding-right: 40px
}
}
.date-selector-item {
display: block;
width: 100%;
padding: 16px;
text-align: center;
border-radius: 100px;
background-color: #e7e6e3;
border: 2px solid #e7e6e3;
transition: border-color .3s ease-out
}
.date-selector-item:active,
.date-selector-item:focus,
.date-selector-item:hover {
border-color: #d1363a;
transition-duration: .1s;
text-decoration: none
}
.date-selector-item:focus {
outline: 0
}
.date-selector-item+.date-selector-item {
margin-top: 20px
}
.discipline-list {
max-width: 1440px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px
}
@media screen and (min-width:960px) {
.discipline-list {
padding-left: 40px;
padding-right: 40px
}
}
.discipline-list__filters,
.discipline-list__results {
margin-top: 20px
}
@media screen and (min-width:550px) {
.discipline-list__filters,
.discipline-list__results {
margin-top: 40px
}
}
@media screen and (min-width:1440px) {
.discipline-list__filters,
.discipline-list__results {
margin-top: 60px
}
}
.discipline-list__results--grid>.grid {
margin-bottom: -40px
}
@media screen and (min-width:960px) {
.discipline-list__results--grid>.grid {
margin-bottom: -60px
}
}
.dropdown {
position: relative;
display: inline-block
}
.dropdown__button {
padding: 5px 10px;
margin: 0;
border: 0;
background: 0 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
text-align: left;
white-space: nowrap;
color: #656462;
transition: color .3s ease-out;
font-size: .75rem;
line-height: 1.667;
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em
}
[lang=cs_CZ] .dropdown__button,
[lang=hu_HU] .dropdown__button,
[lang=pl_PL] .dropdown__button,
[lang=tr_tr] .dropdown__button,
[lang=vi_vi] .dropdown__button,
html[lang=cs] .dropdown__button,
html[lang=hu] .dropdown__button,
html[lang=pl] .dropdown__button,
html[lang=tr] .dropdown__button,
html[lang=vi] .dropdown__button {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .dropdown__button,
html[lang=ko] .dropdown__button {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .dropdown__button,
html[lang=th] .dropdown__button {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .dropdown__button,
html[lang=ja] .dropdown__button {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .dropdown__button,
[lang=zh-hant] .dropdown__button,
html[lang=zh-cn] .dropdown__button,
html[lang=zh-hant] .dropdown__button {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
@media screen and (min-width:550px) {
.dropdown__button {
font-size: .875rem;
line-height: 1.571
}
}
button.dropdown__button:active,
button.dropdown__button:focus,
button.dropdown__button:hover {
cursor: pointer;
color: #d1363a;
text-decoration: underline;
transition-duration: .1s;
outline: 0
}
.dropdown__current .dropdown__button {
color: #8a8887;
padding-right: 18px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: inline-block;
width: 100%
}
.dropdown__current .dropdown__button:after {
content: '';
position: absolute;
top: 50%;
margin-top: -2px;
right: 0;
width: 0;
height: 0;
border-top: 5px solid #8a8887;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
transition: all .3s ease-out
}
.dropdown.is-active .dropdown__current .dropdown__button:after {
-ms-transform: rotate(.5turn);
transform: rotate(.5turn)
}
button.dropdown__current .dropdown__button:active,
button.dropdown__current .dropdown__button:focus,
button.dropdown__current .dropdown__button:hover {
color: #d1363a
}
button.dropdown__current .dropdown__button:active:after,
button.dropdown__current .dropdown__button:focus:after,
button.dropdown__current .dropdown__button:hover:after {
border-top-color: #d1363a;
transition-duration: .1s
}
.dropdown__current .dropdown__button--inactive {
display: inline-block;
vertical-align: top;
padding-right: 0
}
.dropdown__current .dropdown__button--inactive:after {
content: none
}
.dropdown__list {
position: absolute;
top: 100%;
left: 0;
min-width: 100%;
background: #e7e6e3;
box-shadow: 0 2px 5px rgba(37, 36, 35, .5);
padding: 5px 0;
display: none;
z-index: 1
}
.dropdown.is-active .dropdown__list {
display: block
}
.cssanimations .dropdown.is-active .dropdown__list {
-webkit-animation: scale-down .3s 0s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: scale-down .3s 0s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-ms-transform: scaleY(0);
transform: scaleY(0);
opacity: 0
}
.dropdown--align-right .dropdown__list {
left: auto;
right: 0
}
.cssanimations .dropdown.is-active .dropdown__item:nth-child(1) {
-webkit-animation: reveal-up 1s 0s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s 0s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(10px);
transform: translateY(10px);
opacity: 0
}
.cssanimations .dropdown.is-active .dropdown__item:nth-child(2) {
-webkit-animation: reveal-up 1s .1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(10px);
transform: translateY(10px);
opacity: 0
}
.cssanimations .dropdown.is-active .dropdown__item:nth-child(3) {
-webkit-animation: reveal-up 1s .2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(10px);
transform: translateY(10px);
opacity: 0
}
.cssanimations .dropdown.is-active .dropdown__item:nth-child(4) {
-webkit-animation: reveal-up 1s .3s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .3s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(10px);
transform: translateY(10px);
opacity: 0
}
.cssanimations .dropdown.is-active .dropdown__item:nth-child(5) {
-webkit-animation: reveal-up 1s .4s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .4s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(10px);
transform: translateY(10px);
opacity: 0
}
.cssanimations .dropdown.is-active .dropdown__item:nth-child(6) {
-webkit-animation: reveal-up 1s .5s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .5s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(10px);
transform: translateY(10px);
opacity: 0
}
.cssanimations .dropdown.is-active .dropdown__item:nth-child(7) {
-webkit-animation: reveal-up 1s .6s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .6s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(10px);
transform: translateY(10px);
opacity: 0
}
.cssanimations .dropdown.is-active .dropdown__item:nth-child(8) {
-webkit-animation: reveal-up 1s .7s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .7s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(10px);
transform: translateY(10px);
opacity: 0
}
.cssanimations .dropdown.is-active .dropdown__item:nth-child(9) {
-webkit-animation: reveal-up 1s .8s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .8s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(10px);
transform: translateY(10px);
opacity: 0
}
.cssanimations .dropdown.is-active .dropdown__item:nth-child(10) {
-webkit-animation: reveal-up 1s .9s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .9s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(10px);
transform: translateY(10px);
opacity: 0
}
.cssanimations .dropdown.is-active .dropdown__item:nth-child(11) {
-webkit-animation: reveal-up 1s 1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s 1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(10px);
transform: translateY(10px);
opacity: 0
}
.cssanimations .dropdown.is-active .dropdown__item:nth-child(12) {
-webkit-animation: reveal-up 1s 1.1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s 1.1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(10px);
transform: translateY(10px);
opacity: 0
}
.cssanimations .dropdown.is-active .dropdown__item:nth-child(13) {
-webkit-animation: reveal-up 1s 1.2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s 1.2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(10px);
transform: translateY(10px);
opacity: 0
}
.cssanimations .dropdown.is-active .dropdown__item:nth-child(14) {
-webkit-animation: reveal-up 1s 1.3s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s 1.3s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(10px);
transform: translateY(10px);
opacity: 0
}
.cssanimations .dropdown.is-active .dropdown__item:nth-child(15) {
-webkit-animation: reveal-up 1s 1.4s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s 1.4s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(10px);
transform: translateY(10px);
opacity: 0
}
.cssanimations .dropdown.is-active .dropdown__item:nth-child(16) {
-webkit-animation: reveal-up 1s 1.5s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s 1.5s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(10px);
transform: translateY(10px);
opacity: 0
}
.cssanimations .dropdown.is-active .dropdown__item:nth-child(17) {
-webkit-animation: reveal-up 1s 1.6s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s 1.6s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(10px);
transform: translateY(10px);
opacity: 0
}
.cssanimations .dropdown.is-active .dropdown__item:nth-child(18) {
-webkit-animation: reveal-up 1s 1.7s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s 1.7s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(10px);
transform: translateY(10px);
opacity: 0
}
.cssanimations .dropdown.is-active .dropdown__item:nth-child(19) {
-webkit-animation: reveal-up 1s 1.8s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s 1.8s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(10px);
transform: translateY(10px);
opacity: 0
}
.cssanimations .dropdown.is-active .dropdown__item:nth-child(20) {
-webkit-animation: reveal-up 1s 1.9s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s 1.9s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(10px);
transform: translateY(10px);
opacity: 0
}
.dropdown__item .dropdown__button {
width: 100%
}
.email-signup__intro {
margin: 20px 0
}
@media screen and (min-width:960px) {
.email-signup__intro {
margin-top: 40px;
margin-bottom: 40px
}
}
.event-countdown {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
border-top: 1px solid #d1363a;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.event-countdown__inner {
pointer-events: auto;
text-align: center
}
@media screen and (min-width:360px) {
.event-countdown__inner {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
text-align: left
}
}
.event-countdown__item {
background-color: #d1363a;
color: #e7e6e3;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.event-countdown__item .heading {
color: #e7e6e3
}
.event-countdown__item+.event-countdown__item {
margin-top: 1px
}
@media screen and (min-width:360px) {
.event-countdown__item+.event-countdown__item {
margin-top: 0;
margin-left: 1px
}
}
.event-countdown__item--countdown {
padding: 10px
}
@media screen and (min-width:550px) {
.event-countdown__item--countdown {
min-height: 60px;
padding-left: 20px;
padding-right: 20px
}
}
.event-countdown__item--dropdown {
position: relative
}
.event-countdown__item--dropdown .icon {
position: absolute;
top: 50%;
left: 10px;
-ms-transform: translateY(-51%);
transform: translateY(-51%);
pointer-events: none
}
.event-countdown__item--dropdown path {
fill: #e7e6e3
}
.react-add-to-calendar {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
margin: 0 auto;
height: 100%
}
.react-add-to-calendar__wrapper {
zoom: 1;
cursor: pointer;
display: -ms-flexbox;
display: flex;
-ms-flex: 1 0 auto;
flex: 1 0 auto
}
.react-add-to-calendar__button {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-ms-flex-align: center;
align-items: center;
padding: 10px 10px 10px 40px;
background-color: #d1363a;
color: #e7e6e3;
text-decoration: none;
color: #e7e6e3;
font-size: 12px;
line-height: 24px;
-webkit-font-smoothing: auto;
background-color: #d1363a;
background-image: linear-gradient(-183deg, #d1363a 49.5%, #2b2a29 50.5%);
background-size: 100% 255%;
background-position: 50% 0;
background-repeat: no-repeat;
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em;
transition-property: color, background-color, background-position;
transition-duration: .3s;
transition-timing-function: ease-out
}
.react-add-to-calendar__button:active,
.react-add-to-calendar__button:focus,
.react-add-to-calendar__button:hover {
background-color: #2b2a29;
background-position: 0 100%
}
[lang=cs_CZ] .react-add-to-calendar__button,
[lang=hu_HU] .react-add-to-calendar__button,
[lang=pl_PL] .react-add-to-calendar__button,
[lang=tr_tr] .react-add-to-calendar__button,
[lang=vi_vi] .react-add-to-calendar__button,
html[lang=cs] .react-add-to-calendar__button,
html[lang=hu] .react-add-to-calendar__button,
html[lang=pl] .react-add-to-calendar__button,
html[lang=tr] .react-add-to-calendar__button,
html[lang=vi] .react-add-to-calendar__button {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .react-add-to-calendar__button,
html[lang=ko] .react-add-to-calendar__button {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .react-add-to-calendar__button,
html[lang=th] .react-add-to-calendar__button {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .react-add-to-calendar__button,
html[lang=ja] .react-add-to-calendar__button {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .react-add-to-calendar__button,
[lang=zh-hant] .react-add-to-calendar__button,
html[lang=zh-cn] .react-add-to-calendar__button,
html[lang=zh-hant] .react-add-to-calendar__button {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
.react-add-to-calendar__button:active,
.react-add-to-calendar__button:focus,
.react-add-to-calendar__button:hover {
text-decoration: none;
color: #e7e6e3;
outline: 0;
transition-duration: .1s
}
.react-add-to-calendar__button--light {
background-color: #2b2a29;
background-position: 0 100%
}
.react-add-to-calendar__dropdown {
position: absolute;
top: 100%;
left: 0;
width: 100%;
text-align: left;
padding-top: 1px
}
.react-add-to-calendar__dropdown ul {
list-style: none;
margin: 0
}
.react-add-to-calendar__dropdown li {
list-style: none;
margin: 0;
padding: 0
}
.react-add-to-calendar__dropdown a {
display: block;
padding: 4px 10px;
text-decoration: none;
color: #e7e6e3;
font-size: 12px;
line-height: 24px;
-webkit-font-smoothing: auto;
background-color: #2b2a29;
background-image: linear-gradient(-183deg, #2b2a29 49.5%, #d1363a 50.5%);
background-size: 100% 255%;
background-position: 50% 0;
background-repeat: no-repeat;
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em;
transition-property: color, background-color, background-position;
transition-duration: .2s;
transition-timing-function: ease-out
}
.react-add-to-calendar__dropdown a:active,
.react-add-to-calendar__dropdown a:focus,
.react-add-to-calendar__dropdown a:hover {
background-color: #d1363a;
background-position: 0 100%
}
[lang=cs_CZ] .react-add-to-calendar__dropdown a,
[lang=hu_HU] .react-add-to-calendar__dropdown a,
[lang=pl_PL] .react-add-to-calendar__dropdown a,
[lang=tr_tr] .react-add-to-calendar__dropdown a,
[lang=vi_vi] .react-add-to-calendar__dropdown a,
html[lang=cs] .react-add-to-calendar__dropdown a,
html[lang=hu] .react-add-to-calendar__dropdown a,
html[lang=pl] .react-add-to-calendar__dropdown a,
html[lang=tr] .react-add-to-calendar__dropdown a,
html[lang=vi] .react-add-to-calendar__dropdown a {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .react-add-to-calendar__dropdown a,
html[lang=ko] .react-add-to-calendar__dropdown a {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .react-add-to-calendar__dropdown a,
html[lang=th] .react-add-to-calendar__dropdown a {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .react-add-to-calendar__dropdown a,
html[lang=ja] .react-add-to-calendar__dropdown a {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .react-add-to-calendar__dropdown a,
[lang=zh-hant] .react-add-to-calendar__dropdown a,
html[lang=zh-cn] .react-add-to-calendar__dropdown a,
html[lang=zh-hant] .react-add-to-calendar__dropdown a {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
a.react-add-to-calendar__dropdown:active,
a.react-add-to-calendar__dropdown:focus,
a.react-add-to-calendar__dropdown:hover {
text-decoration: none;
color: #e7e6e3;
outline: 0;
transition-duration: .1s
}
.react-add-to-calendar__dropdown i {
display: none
}
.explore-carousel__items {
white-space: nowrap
}
.explore-carousel__previews {
background: #e7e6e3;
margin-top: -20px;
padding-top: 20px;
-webkit-clip-path: polygon(0 20px, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 20px, 100% 0, 100% 100%, 0 100%);
height: 130px;
white-space: nowrap
}
.no-js .explore-carousel__previews {
display: none
}
.explore-carousel-item {
background-color: #2b2a29;
position: relative;
white-space: normal;
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: distribute;
justify-content: space-around;
min-height: 550px;
height: calc(100vh - 90px - 170px)
}
.explore-carousel-item.explore-carousel-item--fill-viewport-height {
height: calc(100vh - 90px - 100px)
}
.js .explore-carousel__items:not(.flickity-enabled) .explore-carousel-item:not(:first-child) {
display: none
}
.explore-carousel-item__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
opacity: .4
}
.explore-carousel-item__date {
display: block;
position: relative;
padding-top: 80px;
height: 100px
}
.explore-carousel-item__content {
position: relative;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.explore-carousel-item__content-inner {
text-align: center;
padding: 20px
}
.explore-carousel-item__content-inner .heading {
max-width: 831.667px;
text-shadow: 0 0 10px rgba(43, 42, 41, .5);
margin: 20px auto
}
.explore-carousel-item__content-inner .copy {
max-width: 466.667px;
text-shadow: 0 0 2px rgba(43, 42, 41, .8);
margin: 20px auto
}
.explore-carousel-item__actions {
margin-bottom: 40px
}
.explore-carousel-item__actions .button {
margin: 0 10px 10px
}
.flickity-enabled .explore-carousel-item__date {
opacity: 0
}
.flickity-enabled .explore-carousel-item__content-inner .copy,
.flickity-enabled .explore-carousel-item__content-inner .eyebrow,
.flickity-enabled .explore-carousel-item__content-inner .heading {
opacity: 0
}
.flickity-enabled .explore-carousel-item__actions .button {
opacity: 0
}
.cssanimations .explore-carousel-item.is-selected .explore-carousel-item__date {
-webkit-animation: reveal-up 1s .2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0
}
.cssanimations .explore-carousel-item.is-selected .explore-carousel-item__content-inner .eyebrow {
-webkit-animation: reveal-up 1s .4s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .4s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0
}
.cssanimations .explore-carousel-item.is-selected .explore-carousel-item__content-inner .heading {
-webkit-animation: reveal-up 1s .6s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .6s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0
}
.cssanimations .explore-carousel-item.is-selected .explore-carousel-item__content-inner .copy {
-webkit-animation: reveal-up 1s .8s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .8s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0
}
.cssanimations .explore-carousel-item.is-selected .explore-carousel-item__actions .button:first-child {
-webkit-animation: reveal-up 1s .9s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .9s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0
}
.cssanimations .explore-carousel-item.is-selected .explore-carousel-item__actions .button:last-child {
-webkit-animation: reveal-up 1s 1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s 1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0
}
.explore-carousel-preview {
display: inline-block;
width: 100%;
max-width: 345px;
height: 110px;
white-space: normal;
padding: 0 20px
}
.no-cssanimations .explore-carousel-preview {
display: none
}
.explore-carousel-preview:after {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle
}
.explore-carousel-preview__icon {
display: inline-block;
vertical-align: middle;
width: 20%;
width: calc(36px * 1)
}
.explore-carousel-preview__icon svg {
vertical-align: top
}
.explore-carousel-preview__heading {
display: inline-block;
vertical-align: middle;
width: 80%;
width: calc(100% - 36px);
padding-left: 20px;
color: #8a8887;
font-size: 14px;
line-height: 18px;
font-family: 'Riot Sans Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-weight: 700
}
[lang=cs_CZ] .explore-carousel-preview__heading,
[lang=hu_HU] .explore-carousel-preview__heading,
[lang=pl_PL] .explore-carousel-preview__heading,
[lang=tr_tr] .explore-carousel-preview__heading,
[lang=vi_vi] .explore-carousel-preview__heading,
html[lang=cs] .explore-carousel-preview__heading,
html[lang=hu] .explore-carousel-preview__heading,
html[lang=pl] .explore-carousel-preview__heading,
html[lang=tr] .explore-carousel-preview__heading,
html[lang=vi] .explore-carousel-preview__heading {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .explore-carousel-preview__heading,
html[lang=ko] .explore-carousel-preview__heading {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .explore-carousel-preview__heading,
html[lang=th] .explore-carousel-preview__heading {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .explore-carousel-preview__heading,
html[lang=ja] .explore-carousel-preview__heading {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .explore-carousel-preview__heading,
[lang=zh-hant] .explore-carousel-preview__heading,
html[lang=zh-cn] .explore-carousel-preview__heading,
html[lang=zh-hant] .explore-carousel-preview__heading {
font-family: 'Riot Sans CN', sans-serif
}
.explore-carousel-preview__heading:hover {
text-decoration: underline
}
.explore-carousel-preview.is-nav-selected .explore-carousel-preview__heading {
color: #2b2a29
}
.explore-hero {
position: relative
}
.explore-hero__bg {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: -30%;
background-color: #dbd9d6;
background-image: url(/assets/img/structure/6d79447d110ef217a5a784efe55ba29b/texture-light@2x.jpg);
background-size: 50%;
background-repeat: repeat;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 10px));
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 10px))
}
@media screen and (min-width:960px) {
.explore-hero__bg {
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 100%);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 100%)
}
}
.explore-hero__filter {
position: relative;
padding-bottom: 40px
}
.explore-hero__filter:before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
height: 0;
padding-bottom: 25%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 0;
background-size: cover
}
.explore-hero__filter-inner .filter-bar {
position: relative
}
.explore-hero__filter-inner .filter-bar,
.explore-hero__filter-inner .filter-bar-overlay {
background-position: 50% 0;
background-size: cover
}
.explore-hero__summary .summary__heading {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em
}
[lang=cs_CZ] .explore-hero__summary .summary__heading,
[lang=hu_HU] .explore-hero__summary .summary__heading,
[lang=pl_PL] .explore-hero__summary .summary__heading,
[lang=tr_tr] .explore-hero__summary .summary__heading,
[lang=vi_vi] .explore-hero__summary .summary__heading,
html[lang=cs] .explore-hero__summary .summary__heading,
html[lang=hu] .explore-hero__summary .summary__heading,
html[lang=pl] .explore-hero__summary .summary__heading,
html[lang=tr] .explore-hero__summary .summary__heading,
html[lang=vi] .explore-hero__summary .summary__heading {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .explore-hero__summary .summary__heading,
html[lang=ko] .explore-hero__summary .summary__heading {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .explore-hero__summary .summary__heading,
html[lang=th] .explore-hero__summary .summary__heading {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .explore-hero__summary .summary__heading,
html[lang=ja] .explore-hero__summary .summary__heading {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .explore-hero__summary .summary__heading,
[lang=zh-hant] .explore-hero__summary .summary__heading,
html[lang=zh-cn] .explore-hero__summary .summary__heading,
html[lang=zh-hant] .explore-hero__summary .summary__heading {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
.eyebrow {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-weight: 700;
font-size: .625rem;
line-height: 1.6;
position: relative;
color: #e7e6e3;
display: inline-block;
padding: 3px 10px 2px;
text-transform: uppercase
}
[lang=cs_CZ] .eyebrow,
[lang=hu_HU] .eyebrow,
[lang=pl_PL] .eyebrow,
[lang=tr_tr] .eyebrow,
[lang=vi_vi] .eyebrow,
html[lang=cs] .eyebrow,
html[lang=hu] .eyebrow,
html[lang=pl] .eyebrow,
html[lang=tr] .eyebrow,
html[lang=vi] .eyebrow {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .eyebrow,
html[lang=ko] .eyebrow {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .eyebrow,
html[lang=th] .eyebrow {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .eyebrow,
html[lang=ja] .eyebrow {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .eyebrow,
[lang=zh-hant] .eyebrow,
html[lang=zh-cn] .eyebrow,
html[lang=zh-hant] .eyebrow {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
html[lang=tr] .eyebrow {
text-transform: none
}
.eyebrow:before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-ms-transform: rotate(.5deg);
transform: rotate(.5deg);
background-color: #d1363a
}
@media screen and (min-width:550px) {
.eyebrow {
font-size: .688rem;
line-height: 1.364
}
}
.eyebrow span {
position: relative
}
.eyebrow--light {
color: #2b2a29
}
.eyebrow--light:before {
background-color: #e7e6e3
}
.eyebrow--dark {
color: #e7e6e3
}
.eyebrow--dark:before {
background-color: #252423
}
@media screen and (min-width:550px) {
.eyebrow--xl {
padding: 5px 20px;
font-size: .75rem;
line-height: 1.333
}
}
@media screen and (min-width:960px) {
.eyebrow--xl {
padding: 5px 20px;
font-size: .875rem;
line-height: 1.429
}
}
.eyebrow.purple {
color: #3c00cf
}
.eyebrow.cyan {
color: #0ec8c4
}
.eyebrow.orange {
color: #ff9400
}
.eyebrow.red {
color: #d1363a
}
.impact-report.text-with-image .eyebrow {
font-size: 1rem;
letter-spacing: 0;
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
font-family: 'Riot Sans Latin', Arial, sans-serif;
text-align: right;
padding: 0;
line-height: 1.4;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl
}
[lang=cs_CZ] .impact-report.text-with-image .eyebrow,
[lang=hu_HU] .impact-report.text-with-image .eyebrow,
[lang=pl_PL] .impact-report.text-with-image .eyebrow,
[lang=tr_tr] .impact-report.text-with-image .eyebrow,
[lang=vi_vi] .impact-report.text-with-image .eyebrow,
html[lang=cs] .impact-report.text-with-image .eyebrow,
html[lang=hu] .impact-report.text-with-image .eyebrow,
html[lang=pl] .impact-report.text-with-image .eyebrow,
html[lang=tr] .impact-report.text-with-image .eyebrow,
html[lang=vi] .impact-report.text-with-image .eyebrow {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .impact-report.text-with-image .eyebrow,
html[lang=ko] .impact-report.text-with-image .eyebrow {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .impact-report.text-with-image .eyebrow,
html[lang=th] .impact-report.text-with-image .eyebrow {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .impact-report.text-with-image .eyebrow,
html[lang=ja] .impact-report.text-with-image .eyebrow {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .impact-report.text-with-image .eyebrow,
[lang=zh-hant] .impact-report.text-with-image .eyebrow,
html[lang=zh-cn] .impact-report.text-with-image .eyebrow,
html[lang=zh-hant] .impact-report.text-with-image .eyebrow {
font-family: 'Riot Sans CN', sans-serif
}
@media screen and (min-width:960px) {
.impact-report.text-with-image .eyebrow {
font-size: 1.25rem
}
}
.impact-report.text-with-image .eyebrow:before {
background-color: transparent;
display: none
}
.faq {
padding-top: 30px;
padding-bottom: 20px
}
@media screen and (min-width:1440px) {
.faq {
padding-bottom: 40px
}
}
.faq__trigger {
display: block;
position: relative
}
.faq__trigger[type=button] {
width: 100%;
background: 0 0;
border: none;
padding: 0;
text-align: left;
font: inherit;
color: inherit;
cursor: pointer
}
.faq__icon {
position: absolute;
top: 50%;
right: 0;
-ms-transform: translate(0, -50%);
transform: translate(0, -50%)
}
.faq__question.heading.heading--5 {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em
}
[lang=cs_CZ] .faq__question.heading.heading--5,
[lang=hu_HU] .faq__question.heading.heading--5,
[lang=pl_PL] .faq__question.heading.heading--5,
[lang=tr_tr] .faq__question.heading.heading--5,
[lang=vi_vi] .faq__question.heading.heading--5,
html[lang=cs] .faq__question.heading.heading--5,
html[lang=hu] .faq__question.heading.heading--5,
html[lang=pl] .faq__question.heading.heading--5,
html[lang=tr] .faq__question.heading.heading--5,
html[lang=vi] .faq__question.heading.heading--5 {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .faq__question.heading.heading--5,
html[lang=ko] .faq__question.heading.heading--5 {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .faq__question.heading.heading--5,
html[lang=th] .faq__question.heading.heading--5 {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .faq__question.heading.heading--5,
html[lang=ja] .faq__question.heading.heading--5 {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .faq__question.heading.heading--5,
[lang=zh-hant] .faq__question.heading.heading--5,
html[lang=zh-cn] .faq__question.heading.heading--5,
html[lang=zh-hant] .faq__question.heading.heading--5 {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
.faq__question.heading.heading--6 {
font-size: 1.125rem;
font-weight: 600
}
.faq__answer {
margin-top: 10px
}
@media screen and (min-width:1440px) {
.faq__answer {
margin-top: 20px
}
}
.faq--expandable {
border-top: 1px solid #d3d1cf;
padding: 0;
transition: border-color .3s ease-out
}
.faq--expandable .faq__question {
max-width: 95%;
padding-top: 20px;
padding-bottom: 20px;
transition: color .3s ease-out
}
.faq--expandable .faq__question.heading.heading--6 {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em
}
[lang=cs_CZ] .faq--expandable .faq__question.heading.heading--6,
[lang=hu_HU] .faq--expandable .faq__question.heading.heading--6,
[lang=pl_PL] .faq--expandable .faq__question.heading.heading--6,
[lang=tr_tr] .faq--expandable .faq__question.heading.heading--6,
[lang=vi_vi] .faq--expandable .faq__question.heading.heading--6,
html[lang=cs] .faq--expandable .faq__question.heading.heading--6,
html[lang=hu] .faq--expandable .faq__question.heading.heading--6,
html[lang=pl] .faq--expandable .faq__question.heading.heading--6,
html[lang=tr] .faq--expandable .faq__question.heading.heading--6,
html[lang=vi] .faq--expandable .faq__question.heading.heading--6 {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .faq--expandable .faq__question.heading.heading--6,
html[lang=ko] .faq--expandable .faq__question.heading.heading--6 {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .faq--expandable .faq__question.heading.heading--6,
html[lang=th] .faq--expandable .faq__question.heading.heading--6 {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .faq--expandable .faq__question.heading.heading--6,
html[lang=ja] .faq--expandable .faq__question.heading.heading--6 {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .faq--expandable .faq__question.heading.heading--6,
[lang=zh-hant] .faq--expandable .faq__question.heading.heading--6,
html[lang=zh-cn] .faq--expandable .faq__question.heading.heading--6,
html[lang=zh-hant] .faq--expandable .faq__question.heading.heading--6 {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
@media screen and (min-width:550px) {
.faq--expandable .faq__question {
padding-top: 40px;
padding-bottom: 40px
}
}
.faq--expandable .faq__answer {
margin-top: 0;
margin-bottom: 50px
}
.js .faq--expandable .faq__answer {
display: none
}
.faq--expandable.is-active,
.faq--expandable:active,
.faq--expandable:focus,
.faq--expandable:hover {
border-top-color: #252423
}
.faq--expandable.is-active .faq__trigger,
.faq--expandable:active .faq__trigger,
.faq--expandable:focus .faq__trigger,
.faq--expandable:hover .faq__trigger {
text-decoration: none
}
.faq--expandable.is-active .faq__question,
.faq--expandable:active .faq__question,
.faq--expandable:focus .faq__question,
.faq--expandable:hover .faq__question {
color: #d1363a;
transition-duration: .1s
}
.faq--expandable.is-active .faq__answer {
display: block
}
.faq--rtl .faq__trigger[type=button] {
text-align: right
}
.faq--rtl .faq__icon {
right: auto;
left: 0
}
.faq--rtl .faq__question {
max-width: 95%;
padding-left: 40px;
padding-right: 0
}
.faq-selector {
position: relative
}
.faq-selector .faq__question {
font-size: 1.5rem
}
.faq-selector:before {
content: '';
position: absolute;
width: 160px;
height: 130.5px;
top: -20px;
right: 0;
background-size: 100%;
pointer-events: none
}
@media screen and (min-width:550px) {
.faq-selector:before {
top: -40px;
width: 256px;
height: 208.8px
}
}
@media screen and (min-width:960px) {
.faq-selector:before {
width: 320px;
height: 261px
}
}
.faq-selector__inner {
position: relative
}
.faq-selector__heading {
text-align: center;
margin-bottom: 30px
}
@media screen and (min-width:550px) {
.faq-selector__heading {
text-align: left;
margin-bottom: 40px
}
}
@media screen and (min-width:960px) {
.faq-selector__heading {
margin-bottom: 60px
}
}
.faq-selector__description {
margin-bottom: 40px
}
@media screen and (min-width:550px) {
.faq-selector__description {
margin-bottom: 50px
}
}
@media screen and (min-width:1600px) {
.faq-selector__description {
margin-bottom: 80px
}
}
.faq-selector__cta {
text-align: center
}
@media screen and (min-width:550px) {
.faq-selector__cta {
text-align: left;
margin-top: 30px
}
}
@media screen and (min-width:960px) {
.faq-selector__cta {
margin-top: 40px
}
}
.featured-video {
display: block;
margin-bottom: 40px
}
.featured-video:active,
.featured-video:focus,
.featured-video:hover {
text-decoration: none
}
.featured-video__image {
background-color: #2b2a29;
position: relative;
transition: all .3s ease-out;
overflow: hidden
}
.featured-video:active .featured-video__image img,
.featured-video:focus .featured-video__image img,
.featured-video:hover .featured-video__image img {
transition-duration: .1s;
-ms-transform: scale(1.05);
transform: scale(1.05);
opacity: .4
}
.featured-video__image .video-play-button {
position: absolute;
bottom: 20px;
left: 20px
}
.featured-video__content {
padding-top: 20px
}
.featured-video__content .eyebrow-text {
margin-top: 4px
}
.featured-video:active .featured-video__heading span,
.featured-video:focus .featured-video__heading span,
.featured-video:hover .featured-video__heading span {
background-image: url(/assets/img/structure/149a1d9c51c7bf69816f75699be94a7e/distressed-underline.svg);
background-repeat: repeat-x;
background-position: 0 100%;
background-size: 680px 2px;
display: inline
}
.featured-videos>.separator {
margin-bottom: 50px
}
@media screen and (min-width:550px) {
.featured-videos>.separator {
margin-bottom: 70px
}
}
@media screen and (min-width:1280px) {
.featured-videos>.separator {
margin-bottom: 90px
}
}
.featured-videos>.heading {
margin-bottom: 40px
}
@media screen and (min-width:1280px) {
.featured-videos>.heading {
margin-bottom: 60px
}
}
.field {
text-align: left;
font-size: .875rem;
margin-bottom: 20px
}
@media screen and (min-width:550px) {
.field {
margin-bottom: 40px
}
}
.field__question {
margin-bottom: .313rem;
display: inline-block;
font-weight: 700;
color: #2b2a29;
padding-left: 25px;
padding-right: 25px
}
@media screen and (min-width:550px) {
.field__question {
padding-left: 40px;
padding-right: 40px
}
}
.field__required-indicator[title] {
border-bottom: 0;
color: #d1363a;
margin-left: 3px
}
.field__assistance {
margin-top: 8px;
color: #8a8887;
line-height: 1.2;
padding-left: 25px;
padding-right: 25px
}
@media screen and (min-width:550px) {
.field__assistance {
padding-left: 40px;
padding-right: 40px
}
}
.field__assistance>div>*+* {
margin-top: 8px
}
.field__feedback {
margin-top: .375rem;
line-height: 1.2;
padding-left: 25px;
padding-right: 25px
}
@media screen and (min-width:550px) {
.field__feedback {
padding-left: 40px;
padding-right: 40px
}
}
.field--error .field__feedback {
color: #d1363a
}
.field--success .field__feedback {
color: #009a58
}
.field--inverse {
color: #e7e6e3;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.field--inverse a:active,
.field--inverse a:focus,
.field--inverse a:hover {
color: #e7e6e3
}
.field--inverse .field__question {
color: inherit
}
.field--inverse .field__assistance {
color: inherit
}
.field--standard-check .field__answer {
margin-left: 25px
}
@media screen and (min-width:550px) {
.field--standard-check .field__answer {
margin-left: 40px
}
}
.field--standard-check .custom-check {
-ms-transform: translateY(-1px);
transform: translateY(-1px)
}
.field--standard-check .control-wrap {
color: #8a8887;
font-size: 20px;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.field--standard-check .control--check-list {
margin: 10px 0 20px
}
.field--standard-check .control--check-list .custom-check {
-ms-transform: translateY(-2px);
transform: translateY(-2px)
}
.filter-bar {
background-color: #2b2a29;
text-align: center;
padding: 20px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;
background-size: 570.75px
}
@media screen and (min-width:550px) {
.filter-bar {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
text-align: left;
padding: 30px 20px;
background-size: 646.85px
}
}
@media screen and (min-width:800px) {
.filter-bar {
padding-left: 60px;
padding-right: 60px
}
}
@media screen and (min-width:960px) {
.filter-bar {
background-size: auto;
padding-left: 120px;
padding-right: 120px
}
}
.no-js .filter-bar {
display: none !important
}
.filter-bar--centered {
-ms-flex-pack: center;
justify-content: center
}
.filter-bar__selection {
color: #e7e6e3
}
.filter-bar__selection .text-button {
margin-left: 7px
}
.filter-bar__layout-button {
display: inline-block;
color: #656462;
background: 0 0;
border: 0;
font-size: inherit;
line-height: 20px;
transition: all .3s ease-out;
padding: 10px
}
@media screen and (min-width:800px) {
.filter-bar__layout-button {
padding: 20px
}
}
.filter-bar__layout-button .icon {
vertical-align: baseline;
margin-right: 8px
}
.filter-bar__layout-button .icon path {
fill: #656462;
transition: all .3s ease-out
}
.filter-bar__layout-button.is-active,
.filter-bar__layout-button:active,
.filter-bar__layout-button:focus,
.filter-bar__layout-button:hover {
transition-duration: .1s;
color: #e7e6e3;
outline: 0
}
.filter-bar__layout-button.is-active .icon path,
.filter-bar__layout-button:active .icon path,
.filter-bar__layout-button:focus .icon path,
.filter-bar__layout-button:hover .icon path {
transition-duration: .1s;
fill: #e7e6e3
}
.filter-bar-overlay {
position: fixed;
display: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: left;
background-color: #2b2a29;
background-repeat: no-repeat;
background-position: 0 0;
z-index: 3000001;
background-size: 570.75px
}
.cssanimations .filter-bar-overlay {
-webkit-animation: mask-reveal-from-top 1s 0s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-top 1s 0s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(0 0, 100% 0, 100% .001%, 0 .001%);
clip-path: polygon(0 0, 100% 0, 100% .001%, 0 .001%);
opacity: 0
}
@media screen and (min-width:550px) {
.filter-bar-overlay {
background-size: 646.85px
}
}
@media screen and (min-width:960px) {
.filter-bar-overlay {
background-size: auto
}
}
.filter-bar-overlay.is-active {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.no-flexbox .filter-bar-overlay.is-active {
display: block
}
.filter-bar-overlay__inner {
padding: 20px 0;
overflow-y: auto;
max-height: 100%;
width: 100%;
transform: translateZ(0)
}
.filter-bar-overlay__content {
max-width: 1440px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px
}
@media screen and (min-width:550px) {
.filter-bar-overlay__content {
padding-left: 40px;
padding-right: 40px
}
}
@media screen and (min-width:800px) {
.filter-bar-overlay__content {
padding-left: 80px;
padding-right: 80px
}
}
@media screen and (min-width:960px) {
.filter-bar-overlay__content {
padding-left: 160px;
padding-right: 160px
}
}
.filter-bar-overlay__close {
position: absolute;
top: 40px;
right: 40px;
z-index: 1
}
.filter-bar-overlay__list {
display: inline-block;
vertical-align: top
}
.cssanimations .filter-bar-overlay__list li:nth-child(1) {
-webkit-animation: reveal-down 1s 125ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 125ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(30px);
transform: translateY(30px);
opacity: 0
}
.cssanimations .filter-bar-overlay__list li:nth-child(2) {
-webkit-animation: reveal-down 1s 175ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 175ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(30px);
transform: translateY(30px);
opacity: 0
}
.cssanimations .filter-bar-overlay__list li:nth-child(3) {
-webkit-animation: reveal-down 1s 225ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 225ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(30px);
transform: translateY(30px);
opacity: 0
}
.cssanimations .filter-bar-overlay__list li:nth-child(4) {
-webkit-animation: reveal-down 1s 275ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 275ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(30px);
transform: translateY(30px);
opacity: 0
}
.cssanimations .filter-bar-overlay__list li:nth-child(5) {
-webkit-animation: reveal-down 1s 325ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 325ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(30px);
transform: translateY(30px);
opacity: 0
}
.cssanimations .filter-bar-overlay__list li:nth-child(6) {
-webkit-animation: reveal-down 1s 375ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 375ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(30px);
transform: translateY(30px);
opacity: 0
}
.cssanimations .filter-bar-overlay__list li:nth-child(7) {
-webkit-animation: reveal-down 1s 425ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 425ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(30px);
transform: translateY(30px);
opacity: 0
}
.cssanimations .filter-bar-overlay__list li:nth-child(8) {
-webkit-animation: reveal-down 1s 475ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 475ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(30px);
transform: translateY(30px);
opacity: 0
}
.cssanimations .filter-bar-overlay__list li:nth-child(9) {
-webkit-animation: reveal-down 1s 525ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 525ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(30px);
transform: translateY(30px);
opacity: 0
}
.cssanimations .filter-bar-overlay__list li:nth-child(10) {
-webkit-animation: reveal-down 1s 575ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 575ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(30px);
transform: translateY(30px);
opacity: 0
}
.cssanimations .filter-bar-overlay__list li:nth-child(11) {
-webkit-animation: reveal-down 1s 625ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 625ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(30px);
transform: translateY(30px);
opacity: 0
}
.cssanimations .filter-bar-overlay__list li:nth-child(12) {
-webkit-animation: reveal-down 1s 675ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 675ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(30px);
transform: translateY(30px);
opacity: 0
}
.cssanimations .filter-bar-overlay__list li:nth-child(13) {
-webkit-animation: reveal-down 1s 725ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 725ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(30px);
transform: translateY(30px);
opacity: 0
}
.cssanimations .filter-bar-overlay__list li:nth-child(14) {
-webkit-animation: reveal-down 1s 775ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 775ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(30px);
transform: translateY(30px);
opacity: 0
}
.cssanimations .filter-bar-overlay__list li:nth-child(15) {
-webkit-animation: reveal-down 1s 825ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 825ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(30px);
transform: translateY(30px);
opacity: 0
}
.cssanimations .filter-bar-overlay__list li:nth-child(16) {
-webkit-animation: reveal-down 1s 875ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 875ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(30px);
transform: translateY(30px);
opacity: 0
}
.cssanimations .filter-bar-overlay__list li:nth-child(17) {
-webkit-animation: reveal-down 1s 925ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 925ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(30px);
transform: translateY(30px);
opacity: 0
}
.cssanimations .filter-bar-overlay__list li:nth-child(18) {
-webkit-animation: reveal-down 1s 975ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 975ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(30px);
transform: translateY(30px);
opacity: 0
}
.cssanimations .filter-bar-overlay__list li:nth-child(19) {
-webkit-animation: reveal-down 1s 1025ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 1025ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(30px);
transform: translateY(30px);
opacity: 0
}
.cssanimations .filter-bar-overlay__list li:nth-child(20) {
-webkit-animation: reveal-down 1s 1075ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 1075ms cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(30px);
transform: translateY(30px);
opacity: 0
}
.filter-bar-overlay__list li+li {
margin-top: 8px
}
@media screen and (min-width:550px) {
.filter-bar-overlay__list li+li {
margin-top: 10px
}
}
@media screen and (min-width:960px) {
.filter-bar-overlay__list li+li {
margin-top: 12px
}
}
.footer {
position: relative
}
.footer__inner {
position: relative;
z-index: 1;
background-color: #252423;
padding: 60px 20px 40px;
color: #fff;
font-size: .688rem;
text-align: center;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
@media screen and (min-width:960px) {
.footer__inner {
padding-top: 0;
padding-bottom: 20px
}
}
.footer__inner .icon ellipse,
.footer__inner .icon path {
fill: #fff;
transition: all .3s ease-out
}
.footer__inner a {
color: #fff;
transition: all .3s ease-out
}
.footer__inner a:active,
.footer__inner a:focus,
.footer__inner a:hover {
transition-duration: .1s;
color: #e7e6e3
}
.footer__inner a:active .icon ellipse,
.footer__inner a:active .icon path,
.footer__inner a:focus .icon ellipse,
.footer__inner a:focus .icon path,
.footer__inner a:hover .icon ellipse,
.footer__inner a:hover .icon path {
fill: #d1363a;
transition-duration: .1s
}
.footer__row {
max-width: 1440px;
margin: 0 auto
}
@media screen and (min-width:960px) {
.footer__row {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
padding-top: 30px;
padding-bottom: 30px
}
}
@media screen and (min-width:960px) {
.footer__col-inner {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
}
.footer__logo {
display: inline-block
}
@media screen and (min-width:960px) {
.footer__logo {
padding-right: 20px
}
}
.footer__navigation {
padding-top: 30px;
vertical-align: middle
}
@media screen and (min-width:960px) {
.footer__navigation {
display: inline-block;
padding-top: 0;
text-align: left
}
}
.footer__navigation li {
display: block;
text-transform: uppercase
}
@media screen and (min-width:550px) {
.footer__navigation li {
display: inline-block;
padding-left: 5px;
padding-right: 5px
}
}
@media screen and (min-width:800px) {
.footer__navigation li {
padding-left: 8px;
padding-right: 8px
}
}
@media screen and (max-width:549px) {
.footer__navigation li+li {
margin-top: 5px
}
}
.footer__navigation a {
display: inline-block;
padding: 10px;
font-size: 11px;
font-weight: 800;
color: #fff;
letter-spacing: -.03em
}
.footer__navigation a .icon {
margin-left: 4px
}
.footer__social {
padding-top: 20px;
padding-bottom: 30px
}
@media screen and (min-width:550px) {
.footer__social {
padding-bottom: 40px;
white-space: nowrap
}
}
@media screen and (min-width:960px) {
.footer__social {
padding-top: 0;
padding-bottom: 0
}
}
.footer__social a {
display: inline-block;
width: 40px;
height: 40px;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center
}
.footer__i18n {
display: inline-block;
padding-top: 20px
}
@media screen and (min-width:960px) {
.footer__i18n {
padding-top: 0
}
}
.footer__i18n button {
background: 0;
border: 0;
display: inline-block;
padding: 10px;
font-weight: 700;
color: #8a8887;
transition: all .3s ease-out
}
@media screen and (min-width:960px) {
.footer__i18n button {
padding-left: 0
}
}
.footer__i18n button:active,
.footer__i18n button:hover {
color: #e7e6e3;
text-decoration: underline
}
.footer__i18n button:focus {
outline: 0
}
.footer__i18n .icon {
vertical-align: 1px
}
.footer__i18n .icon:first-child {
margin-right: 5px
}
.footer__i18n .icon:last-child {
margin-left: 5px
}
.footer__cookie {
display: block;
padding-top: 30px;
padding-bottom: 30px
}
.footer__i18n+.footer__cookie {
padding-top: 5px
}
@media screen and (min-width:550px) {
.footer__cookie {
display: inline-block;
padding-top: 40px;
padding-bottom: 40px
}
}
@media screen and (min-width:960px) {
.footer__cookie {
padding-top: 0;
padding-bottom: 0
}
}
.footer__cookie .icon {
margin-left: 10px;
margin-right: 10px;
overflow: hidden
}
.footer__cookie button {
background: 0;
border: 0;
display: inline-block;
color: #fff
}
@media screen and (min-width:960px) {
.footer__cookie button {
padding-left: 0
}
}
.footer__cookie button:active,
.footer__cookie button:hover {
color: #e7e6e3;
text-decoration: underline
}
.footer__cookie button:focus {
outline: 0
}
.footer__small {
display: block;
padding-top: 30px;
padding-bottom: 30px
}
.footer__i18n+.footer__small {
padding-top: 5px
}
@media screen and (min-width:550px) {
.footer__small {
display: inline-block;
padding-top: 40px;
padding-bottom: 40px
}
}
@media screen and (min-width:960px) {
.footer__small {
padding-top: 0;
padding-bottom: 0
}
}
.footer__small .icon {
margin-left: 10px;
margin-right: 10px;
overflow: hidden
}
.footer__top-link {
padding-top: 30px;
text-transform: uppercase
}
@media screen and (min-width:550px) {
.footer__top-link {
padding-top: 40px
}
}
@media screen and (min-width:960px) {
.footer__top-link {
padding-top: 0
}
}
.footer__top-link a {
font-size: .875rem
}
.footer__top-link a:active,
.footer__top-link a:focus,
.footer__top-link a:hover {
text-decoration: none
}
.footer__top-link .icon {
margin-left: 10px;
vertical-align: 0
}
.footer__socialList {
-ms-flex-item-align: start;
align-self: flex-start
}
.form-builder__heading {
text-align: center
}
.form-builder__description {
margin-bottom: 20px
}
@media screen and (min-width:550px) {
.form-builder__description {
margin-bottom: 40px
}
}
.form {
margin: 20px 0
}
@media screen and (min-width:960px) {
.form {
margin-top: 40px;
margin-bottom: 40px
}
}
.form__actions>*+* {
margin-top: 20px
}
@media screen and (min-width:960px) {
.form__actions>*+* {
margin-top: 40px
}
}
.game-badge {
width: 24px;
height: 24px;
background-color: #141212;
border-radius: 50%;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center
}
.game-badge .icon {
width: 14.4px !important;
height: 12.6px !important;
line-height: 12.6px !important
}
.game-badge.game-badge--team-fight-tactics .icon {
width: 20px !important;
position: relative;
top: 0
}
.game-badge.game-badge--2XKO .icon {
width: 18px !important;
height: 18px !important
}
.game-badge.game-badge--2XKO path {
fill: #cdf564
}
.game-badge.game-badge--riftbound {
width: 32px;
aspect-ratio: 1/1
}
.game-badge.game-badge--riftbound .icon {
width: 20px !important;
height: 20px !important
}
.game-badge.game-badge--riftbound .icon svg {
width: 100%
}
.game-badge.game-badge--riftbound path {
fill: #ef7d00
}
@media screen and (min-width:550px) {
.game-badge {
width: 32px;
height: 32px
}
.game-badge .icon {
width: 17.2px !important;
height: 14.9px !important;
line-height: 14.9px !important
}
.game-badge.game-badge--team-fight-tactics .icon {
width: 25px !important;
top: -2px
}
}
.game-card {
position: relative;
transition: all .2s ease-out;
box-shadow: 0 4px 16px rgba(10, 10, 10, .2);
border-radius: 8px
}
.game-card__link {
display: block
}
.game-card__link:active,
.game-card__link:focus,
.game-card__link:hover {
outline: 0;
text-decoration: none;
transition: all .2s ease-out
}
.game-card__link:active {
transition: all .2s ease-out
}
.game-card__link:focus-visible::after {
opacity: 1
}
.game-card__link:active::after {
opacity: 0
}
.game-card__link::after {
content: '';
border: 2px solid rgba(249, 249, 249, .4);
border-radius: 12px;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
padding: 2px;
color: #f9f9f9;
display: block;
opacity: 0;
pointer-events: none;
position: absolute;
transition: opacity .1s ease-out;
z-index: 4;
border: 2px solid rgba(249, 249, 249, .4)
}
@supports (-webkit-mask:linear-gradient(to top, #f00, #008000)) and ((-webkit-mask-composite:xor) or (mask-composite:exclude)) {
.game-card__link::after {
border: 0;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
--angle: -90deg;
-webkit-animation: 8s rotate linear infinite;
animation: 8s rotate linear infinite;
background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, .4));
background: conic-gradient(from var(--angle), rgba(255, 255, 255, .8), rgba(255, 255, 255, .2), rgba(255, 255, 255, .8))
}
.game-card__link:active::after {
background-color: #fff
}
}
.game-card__link:active::after,
.game-card__link:focus-visible::after,
.game-card__link:hover::after {
opacity: 1
}
.game-card__link:active {
transition: all .2s ease-out
}
.game-card__link img {
border-radius: 8px
}
.product-carousel .game-card__link img {
width: 100%
}
.game-card__content {
position: absolute;
left: 0;
top: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
text-align: center;
height: 100%;
pointer-events: none
}
.game-card__logo {
margin: auto;
max-width: 160px;
padding-bottom: 8px
}
@media screen and (min-width:1280px) {
.game-card__logo {
max-width: 180px
}
}
.game-card__description p {
color: #c5c5c3;
font-size: .813rem;
font-size: clamp(.5rem, 1.5vw, .813rem);
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
margin-bottom: 8px;
display: none
}
@media screen and (min-width:550px) {
.game-card__description p {
display: block
}
}
@media screen and (min-width:960px) {
.game-card__description p {
font-size: clamp(.5rem, .9vw, .813rem)
}
}
.game-card__platforms {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
max-width: 100px;
padding: 2px 4px;
border-radius: 16px;
background-color: rgba(138, 136, 135, .2);
margin: 0 auto;
pointer-events: none
}
.game-card__platforms span {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center
}
.game-card__platforms .icon,
.game-card__platforms .icon svg {
width: 13px !important;
height: 13px !important;
line-height: 13px !important
}
@media screen and (min-width:960px) {
.game-card--large .game-card__description p {
font-size: clamp(.5rem, .8vw, .813rem)
}
}
.game-card--large .game-card__content {
padding: 12px 32px 12px 24px;
width: 38%
}
@media screen and (min-width:670px) {
.game-card--large .game-card__content {
padding: 24px 55px
}
}
@media screen and (min-width:960px) {
.game-card--large .game-card__content {
padding: 24px 32px 12px 24px
}
}
@media screen and (min-width:1280px) {
.game-card--large .game-card__content {
padding: 24px 42px
}
}
@media screen and (min-width:1440px) {
.game-card--large .game-card__content {
padding: 24px 55px
}
}
@media screen and (min-width:1280px) {
.game-card--large .game-card__platforms {
max-width: 140px
}
.game-card--large .game-card__platforms .icon,
.game-card--large .game-card__platforms .icon svg {
width: 19px !important;
height: 19px !important;
line-height: 19px !important
}
}
.game-card--small .game-card__content {
padding: 12px 32px 12px 24px;
width: 38%
}
@media screen and (min-width:670px) {
.game-card--small .game-card__content {
padding: 12px 55px 24px
}
}
@media screen and (min-width:960px) {
.game-card--small .game-card__content {
padding: 12px 32px 12px 24px
}
}
@media screen and (min-width:1280px) {
.game-card--small .game-card__content {
padding: 12px 32px 24px 24px
}
}
.game-card--small .game-card__description p {
display: none
}
@media screen and (min-width:550px) and (max-width:959px) {
.game-card--small .game-card__description p {
display: block
}
}
@media screen and (min-width:960px) {
.game-card--small .game-card__platforms {
max-width: 100px;
padding: 2px 4px
}
.game-card--small .game-card__platforms .icon,
.game-card--small .game-card__platforms .icon svg {
width: 13px !important;
height: 13px !important;
line-height: 13px !important
}
}
body.theme-arc2 .game-card__link:active::after,
body.theme-arc2 .game-card__link:focus-visible::after,
body.theme-arc2 .game-card__link:hover::after {
top: 0;
bottom: 0;
background-image: linear-gradient(111.7deg, rgba(255, 255, 255, .5) -1.03%, #fff 12.2%, #4d65ac 36.12%, #fff 62.08%, rgba(222, 185, 255, .9) 74.8%, rgba(255, 255, 255, .9) 82.44%, rgba(255, 255, 255, .5) 100.76%)
}
.games {
position: relative;
background-color: #141212
}
.games__content {
position: relative;
background-color: #141212;
display: -ms-flexbox;
display: flex;
max-width: 3600px;
margin: 0 auto;
-ms-flex-pack: center;
justify-content: center
}
.games__items {
position: relative;
height: 100%;
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
z-index: 3;
overflow: hidden
}
@media screen and (min-width:960px) {
.games__items {
-ms-flex-direction: row;
flex-direction: row
}
}
.games-item {
position: relative;
-ms-flex: 1;
flex: 1;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
overflow: hidden;
max-height: 100%;
background-color: #141212
}
@media screen and (min-width:960px) {
.games-item {
padding: 0;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-align: start;
align-items: flex-start;
transition: flex .9s cubic-bezier(.23, 1, .32, 1);
transition: flex .9s cubic-bezier(.23, 1, .32, 1), -ms-flex .9s cubic-bezier(.23, 1, .32, 1)
}
.games-item+.games-item:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
box-shadow: 0 0 23px 13px rgba(10, 10, 10, .7)
}
}
.games-item.is-active {
transition: flex .9s cubic-bezier(.86, 0, .07, 1);
transition: flex .9s cubic-bezier(.86, 0, .07, 1), -ms-flex .9s cubic-bezier(.86, 0, .07, 1)
}
@media screen and (max-width:959px) {
.games-item.is-active:before {
opacity: 1
}
}
@media screen and (min-width:960px) {
.games-item.is-active {
-ms-flex: 2.5;
flex: 2.5
}
}
@media screen and (min-width:2560px) {
.games-item.is-active {
-ms-flex: 1.8;
flex: 1.8
}
}
@media screen and (min-width:3000px) {
.games-item.is-active {
-ms-flex: 1.6;
flex: 1.6
}
}
.games-item__preview {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0
}
@media screen and (min-width:960px) {
.games-item__preview {
display: none
}
}
.games-item__preview--desktop {
display: none
}
@media screen and (min-width:960px) {
.games-item__preview--desktop {
position: absolute;
bottom: 50px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
height: 60%
}
}
.games-item__logo-title {
position: absolute;
top: 0;
left: 20px;
bottom: 0;
z-index: 1;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
gap: 16px;
max-width: 70vw;
transition: opacity .3s cubic-bezier(.86, 0, .07, 1) .35s, max-width .3s cubic-bezier(.86, 0, .07, 1)
}
@media screen and (min-width:960px) {
.games-item__logo-title {
display: none
}
}
@media screen and (min-width:960px) {
.games-item__logo-title.games-item__logo-title--desktop {
position: relative;
left: 0;
width: 100%;
height: 100%;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between;
display: -ms-flexbox;
display: flex;
max-width: 55%;
transition-delay: 0s, .3s
}
.games__items.is-active .games-item__logo-title.games-item__logo-title--desktop {
max-width: 50%
}
}
@media screen and (min-width:1440px) {
.games-item__logo-title.games-item__logo-title--desktop {
max-width: 80%
}
.games__items.is-active .games-item__logo-title.games-item__logo-title--desktop {
max-width: 65%
}
}
.games-item.is-active .games-item__logo-title {
opacity: 0;
transition: opacity .15s cubic-bezier(.86, 0, .07, 1) 0s, max-width .15s cubic-bezier(.86, 0, .07, 1)
}
.games-item__logo-title__logo {
position: relative;
aspect-ratio: 1;
width: 100%;
max-width: 40px;
margin: 0 auto
}
@media screen and (min-width:960px) {
.games-item__logo-title__logo {
max-width: 60px
}
}
.games-item__logo-title__title {
font-family: 'Riot Sans Latin', Arial, sans-serif;
letter-spacing: -.03em;
line-height: 1.2;
color: #e7e6e3;
text-align: left;
font-size: 18px;
text-transform: uppercase
}
[lang=cs_CZ] .games-item__logo-title__title,
[lang=hu_HU] .games-item__logo-title__title,
[lang=pl_PL] .games-item__logo-title__title,
[lang=tr_tr] .games-item__logo-title__title,
[lang=vi_vi] .games-item__logo-title__title,
html[lang=cs] .games-item__logo-title__title,
html[lang=hu] .games-item__logo-title__title,
html[lang=pl] .games-item__logo-title__title,
html[lang=tr] .games-item__logo-title__title,
html[lang=vi] .games-item__logo-title__title {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .games-item__logo-title__title,
html[lang=ko] .games-item__logo-title__title {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .games-item__logo-title__title,
html[lang=th] .games-item__logo-title__title {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .games-item__logo-title__title,
html[lang=ja] .games-item__logo-title__title {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .games-item__logo-title__title,
[lang=zh-hant] .games-item__logo-title__title,
html[lang=zh-cn] .games-item__logo-title__title,
html[lang=zh-hant] .games-item__logo-title__title {
font-family: 'Riot Sans CN', sans-serif
}
@media screen and (min-width:960px) {
.games-item__logo-title__title {
text-align: center
}
}
@media screen and (min-width:1280px) {
.games-item__logo-title__title {
font-size: 20px
}
}
.games-item__image {
position: relative;
min-height: 200px;
width: 100%;
left: 0;
top: 0;
aspect-ratio: 35/17
}
.games-item__image img,
.games-item__image picture {
position: absolute;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
left: 0;
top: 0
}
.games-item__image::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, .5);
transition: opacity .15s ease-out
}
.games-item.is-active .games-item__image::after {
opacity: 0;
transition: opacity .5s ease-in-out
}
@media screen and (min-width:960px) {
.games-item__image {
height: 380px;
aspect-ratio: none
}
.games-item__image:after {
content: none
}
}
@media screen and (min-width:1920px) {
.games-item__image {
height: 23vw
}
}
@media screen and (min-width:2560px) {
.games-item__image {
height: 17vw
}
}
@media screen and (min-width:3200px) {
.games-item__image {
height: 570px
}
}
.games-item__overlay-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
background: 0;
border: 0;
height: 100%;
width: 100%;
-webkit-tap-highlight-color: transparent
}
.games-item__expander-content {
width: 100%;
transition: max-height .5s cubic-bezier(.86, 0, .07, 1)
}
@media screen and (min-width:960px) {
.games-item:not(.is-active) .games-item__expander-content {
max-height: none !important
}
}
.games-item__expander-content__resize-wrapper {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
overflow: hidden
}
@media screen and (min-width:960px) {
.games-item__expander-content__resize-wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-direction: column;
flex-direction: column;
text-align: center
}
}
.games-item__expander-content__content {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
padding: 40px 20px;
gap: 16px
}
@media screen and (min-width:960px) {
.games-item__expander-content__content>.games-item__expander-content--button,
.games-item__expander-content__content>.games-item__logo,
.games-item__expander-content__content>.games-item__text {
opacity: 0;
height: 0;
pointer-events: none
}
.games-item.is-active .games-item__expander-content__content>.games-item__expander-content--button,
.games-item.is-active .games-item__expander-content__content>.games-item__logo,
.games-item.is-active .games-item__expander-content__content>.games-item__text {
pointer-events: all;
-webkit-animation: reveal-content 1.2s ease-out forwards;
animation: reveal-content 1.2s ease-out forwards
}
}
@media screen and (min-width:960px) {
.games-item__expander-content__content {
min-height: 460px;
gap: 24px;
padding: 40px
}
}
.games-item__logo {
width: 100%;
max-width: 200px;
margin: 0 auto
}
@media screen and (min-width:960px) {
.games-item__logo {
max-width: 300px
}
}
.games-item__text {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em;
line-height: 1.2;
text-align: center;
color: #e7e6e3;
max-width: 380px;
margin: 0 16px
}
[lang=cs_CZ] .games-item__text,
[lang=hu_HU] .games-item__text,
[lang=pl_PL] .games-item__text,
[lang=tr_tr] .games-item__text,
[lang=vi_vi] .games-item__text,
html[lang=cs] .games-item__text,
html[lang=hu] .games-item__text,
html[lang=pl] .games-item__text,
html[lang=tr] .games-item__text,
html[lang=vi] .games-item__text {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .games-item__text,
html[lang=ko] .games-item__text {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .games-item__text,
html[lang=th] .games-item__text {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .games-item__text,
html[lang=ja] .games-item__text {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .games-item__text,
[lang=zh-hant] .games-item__text,
html[lang=zh-cn] .games-item__text,
html[lang=zh-hant] .games-item__text {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
@media screen and (min-width:960px) {
.games-item__text {
font-size: 1rem
}
}
.games-item__expander-content--button {
z-index: 50
}
.games-item__content {
position: relative;
color: #e7e6e3;
width: 100%
}
@media screen and (min-width:960px) {
.games-item__content {
padding: 0 20px;
text-align: center
}
.games-item.is-active .games-item__content {
transition-delay: 0s
}
}
.games-item__toggle-icon {
position: absolute;
top: 20px;
right: 20px;
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 28px;
vertical-align: middle;
border: 1px solid #e7e6e3;
text-align: center;
z-index: 1;
transition: all .3s cubic-bezier(.86, 0, .07, 1)
}
.games-item__toggle-icon .icon {
transition: opacity .3s cubic-bezier(.86, 0, .07, 1);
vertical-align: baseline
}
.games-item__toggle-icon .icon.hidden {
opacity: 0;
display: none;
pointer-events: none
}
.games-item__toggle-icon path {
fill: #e7e6e3
}
.games-item.is-active .games-item__toggle-icon {
background: #e7e6e3;
cursor: pointer
}
.games-item.is-active .games-item__toggle-icon path {
fill: #2b2a29
}
@media screen and (min-width:960px) {
.games-item__toggle-icon {
display: none
}
}
.games-item__toggle-icon.games-item__toggle-icon--desktop {
position: relative
}
@media screen and (min-width:960px) {
.games-item__toggle-icon.games-item__toggle-icon--desktop {
display: block;
top: 0;
right: 0;
left: 0
}
}
.games-item.is-active .games-item__toggle-icon.games-item__toggle-icon--desktop {
opacity: 0;
background: 0 0;
border-width: 0;
transition: all .3s cubic-bezier(.86, 0, .07, 1)
}
.games-item.is-active .games-item__toggle-icon.games-item__toggle-icon--desktop .icon {
transition: opacity .3s cubic-bezier(.86, 0, .07, 1);
opacity: 0
}
@-webkit-keyframes reveal-content {
0% {
height: 0;
width: 0;
opacity: 0
}
49.9% {
height: 0;
width: 0;
opacity: 0
}
50% {
height: auto;
width: auto;
opacity: 0
}
100% {
height: auto;
width: auto;
opacity: 1
}
}
@keyframes reveal-content {
0% {
height: 0;
width: 0;
opacity: 0
}
49.9% {
height: 0;
width: 0;
opacity: 0
}
50% {
height: auto;
width: auto;
opacity: 0
}
100% {
height: auto;
width: auto;
opacity: 1
}
}
.header {
background-color: #252423
}
@media screen and (min-width:960px) {
.header {
padding: 10px 0;
background-image: url(/assets/img/structure/ec52d55f0f379518c25d286fb69f4ea6/distressed-stroke.svg);
background-repeat: repeat-x;
background-position: 50% 90px;
background-size: 420px 2px
}
@supports (position:sticky) {
.header {
position: sticky;
top: 0;
z-index: 5;
transform: translateZ(0)
}
}
}
.header .icon path {
fill: #adacaa;
transition: all .3s ease-out
}
@media screen and (min-width:960px) {
.header .icon path {
fill: #d1363a
}
}
.header a {
color: #e7e6e3;
transition: all .3s ease-out
}
.header a:active,
.header a:focus,
.header a:hover {
transition-duration: .1s;
text-decoration: none
}
.header a:active .icon path,
.header a:focus .icon path,
.header a:hover .icon path {
fill: #d1363a;
transition-duration: .1s
}
.header__row {
margin: 0 auto;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between
}
@media screen and (min-width:960px) {
.header__row {
-ms-flex-pack: start;
justify-content: start
}
}
.header__row .navigation--secondary {
position: absolute;
right: 0
}
.header__row.is-center-aligned {
-ms-flex-pack: justify;
justify-content: space-between
}
.header__row.is-center-aligned .navigation--secondary {
position: relative
}
@media screen and (min-width:1425px) {
.header__row.is-center-aligned .header__logo,
.header__row.is-center-aligned .navigation--primary,
.header__row.is-center-aligned .navigation--secondary {
-ms-flex: 1 1 0px;
flex: 1 1 0
}
.header__row.is-center-aligned .navigation--primary {
text-align: center;
-ms-flex-positive: 1.5;
flex-grow: 1.5
}
.header__row.is-center-aligned .navigation--secondary {
text-align: right
}
}
.header__icon-button {
display: inline-block;
height: 50px;
line-height: 48px;
padding: 0 20px
}
@media screen and (min-width:550px) {
.header__icon-button {
height: 70px;
line-height: 70px
}
}
@media screen and (min-width:960px) {
.header__icon-button {
padding: 0
}
.header__icon-button .site-title {
padding: 0 20px
}
}
.header {
max-height: 140px;
transition: max-height .3s ease-out
}
.header.has-active-search {
max-height: 90px
}
.header__row {
transition: transform .3s ease-out, opacity .3s ease-out
}
.header__row:first-child {
position: relative;
z-index: 2
}
.header.has-active-search .header__row:first-child {
-ms-transform: translateY(-120%);
transform: translateY(-120%);
opacity: 0
}
.header__row:last-child {
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 0;
pointer-events: none
}
@media screen and (min-width:550px) {
.header__row:last-child {
height: 70px
}
}
@media screen and (min-width:960px) {
.header__row:last-child {
height: 90px
}
}
.no-csspointerevents .header__row:last-child {
display: none
}
.header.has-active-search .header__row:last-child {
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
pointer-events: auto
}
.no-csspointerevents .header.has-active-search .header__row:last-child {
display: block
}
.header__close-search {
margin: 10px 20px
}
@media screen and (min-width:550px) {
.header__close-search {
margin: 20px
}
}
.no-flexbox.no-flexboxlegacy .header__logo {
display: inline-block
}
@media screen and (min-width:960px) {
.no-flexbox.no-flexboxlegacy .header__row .header__logo,
.no-flexbox.no-flexboxlegacy .header__row .navigation--primary,
.no-flexbox.no-flexboxlegacy .header__row .navigation--secondary {
display: inline-block;
vertical-align: top
}
.no-flexbox.no-flexboxlegacy .header__row .header__logo {
width: 10%
}
.no-flexbox.no-flexboxlegacy .header__row .navigation--primary {
width: 60%;
text-align: center
}
.no-flexbox.no-flexboxlegacy .header__row .navigation--secondary {
text-align: right;
width: 30%
}
.no-flexbox.no-flexboxlegacy .header__row .search-bar {
display: inline-block;
width: 90%;
vertical-align: middle
}
.no-flexbox.no-flexboxlegacy .header__row .header__close-search {
display: inline-block;
width: 10%;
margin: 0;
vertical-align: middle
}
}
.heading {
font-family: 'Riot Sans Latin', Arial, sans-serif;
letter-spacing: -.03em;
color: #2b2a29;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
white-space: pre-wrap
}
[lang=cs_CZ] .heading,
[lang=hu_HU] .heading,
[lang=pl_PL] .heading,
[lang=tr_tr] .heading,
[lang=vi_vi] .heading,
html[lang=cs] .heading,
html[lang=hu] .heading,
html[lang=pl] .heading,
html[lang=tr] .heading,
html[lang=vi] .heading {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .heading,
html[lang=ko] .heading {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .heading,
html[lang=th] .heading {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .heading,
html[lang=ja] .heading {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .heading,
[lang=zh-hant] .heading,
html[lang=zh-cn] .heading,
html[lang=zh-hant] .heading {
font-family: 'Riot Sans CN', sans-serif
}
.heading--1 {
font-weight: 900;
font-size: 3.375rem;
line-height: 1
}
@media screen and (min-width:550px) {
.heading--1 {
font-size: 5rem
}
}
@media screen and (min-width:1440px) {
.heading--1 {
font-size: 6rem
}
}
.heading--2 {
font-weight: 800;
font-size: 2.25rem;
line-height: 1.111
}
@media screen and (min-width:550px) {
.heading--2 {
font-size: 3.75rem;
line-height: 1.067
}
}
@media screen and (min-width:960px) {
.heading--2 {
font-size: 5rem;
line-height: 1.1
}
}
.heading--3 {
font-weight: 800;
font-size: 1.875rem;
line-height: 1.133
}
@media screen and (min-width:550px) {
.heading--3 {
font-size: 3.125rem;
line-height: 1.16
}
}
@media screen and (min-width:960px) {
.heading--3 {
font-size: 4rem;
line-height: 1.156
}
}
.heading--4 {
font-weight: 800;
font-size: 1.25rem;
line-height: 1.4
}
@media screen and (min-width:550px) {
.heading--4 {
font-size: 2.25rem;
line-height: 1.278
}
}
@media screen and (min-width:960px) {
.heading--4 {
font-size: 2.75rem;
line-height: 1.227
}
}
.heading--5 {
font-weight: 800;
font-size: 1.125rem;
line-height: 1.333
}
@media screen and (min-width:550px) {
.heading--5 {
font-weight: 700;
font-size: 1.625rem;
line-height: 1.231
}
}
@media screen and (min-width:960px) {
.heading--5 {
font-size: 1.75rem;
line-height: 1.357
}
}
.heading--6 {
font-weight: 700;
font-size: 1rem;
line-height: 1.375
}
@media screen and (min-width:550px) {
.heading--6 {
font-size: 1.125rem;
line-height: 1.333
}
}
@media screen and (min-width:960px) {
.heading--6 {
font-size: 1.25rem;
line-height: 1.4
}
}
.heading--7 {
font-weight: 700;
font-size: .75rem;
line-height: 1.333
}
@media screen and (min-width:550px) {
.heading--7 {
font-size: .875rem;
line-height: 1.286
}
}
.heading--1xl {
font-weight: 900;
font-size: 3.75rem;
line-height: .833
}
@media screen and (min-width:550px) {
.heading--1xl {
font-size: 7.5rem;
line-height: .833
}
}
@media screen and (min-width:1280px) {
.heading--1xl {
font-size: 10rem;
line-height: .938
}
}
@media screen and (min-width:1440px) {
.heading--1xl {
font-size: 11.25rem;
line-height: .944
}
}
@media screen and (min-width:1600px) {
.heading--1xl {
font-size: 13.75rem;
line-height: .909
}
}
.heading--2xl {
font-weight: 900;
font-size: 3.125rem;
line-height: .92
}
@media screen and (min-width:550px) {
.heading--2xl {
font-size: 6.25rem;
line-height: .9
}
}
@media screen and (min-width:1440px) {
.heading--2xl {
font-size: 7.5rem;
line-height: .833
}
}
@media screen and (min-width:1600px) {
.heading--2xl {
font-size: 8.75rem;
line-height: .857
}
}
.heading--light {
color: #e7e6e3
}
.heading--light.heading--muted {
color: #656462
}
.heading--uppercase {
text-transform: uppercase
}
.hero-carousel__wrapper {
position: relative
}
.hero-carousel {
overflow: hidden
}
.hero-carousel__slider {
display: -ms-flexbox;
display: flex
}
.hero-carousel__slide {
min-width: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
min-height: 500px;
background: #0a0a0a
}
.hero-carousel__indicators {
position: absolute;
bottom: 25px;
left: 0;
right: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
color: #fff;
padding: 10px 0;
z-index: 10
}
@media screen and (min-width:960px) {
.hero-carousel__indicators {
bottom: 10px
}
}
.hero-carousel__indicator {
cursor: pointer;
width: 12.5px;
height: 12.5px;
margin: 0 5px;
background: rgba(255, 255, 255, .5);
border-width: 0;
border-radius: 100%;
transition: all .3s ease
}
.hero-carousel__indicator:hover {
opacity: 1;
background: rgba(255, 255, 255, .8)
}
.hero-carousel__indicator.active {
opacity: .8;
background: #d1363a
}
.hero-carousel__indicator.active:hover {
background: #d1363a
}
.hero-new {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
height: 550px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
z-index: 1
}
@media screen and (min-width:960px) {
.hero-new {
-webkit-clip-path: none;
clip-path: none;
height: calc(100vh - 120px);
min-height: 600px;
max-height: 900px
}
}
.hero-new__background {
overflow: hidden
}
.hero-new__background::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(275deg, rgba(10, 10, 10, 0) 0, rgba(10, 10, 10, .8) 120%)
}
.hero-new__background video,
.hero-new__background-image,
.hero-new__background-image img {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
background-size: cover;
background-position: center;
background-repeat: no-repeat
}
.hero-new__content {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
text-align: center
}
.hero-new__content__logo {
max-width: 215px;
margin: 0 auto 3.125rem
}
@media screen and (min-width:960px) {
.hero-new__content__logo {
max-width: 360px
}
}
.hero-new__content-inner {
/*! max-width: 560px; */
margin: auto
}
.hero-new__content-inner h1 {
font-size: 1.688rem;
color: #f0f0f0;
margin-bottom: 2rem;
line-height: 1.2;
letter-spacing: -.03em
}
@media screen and (min-width:960px) {
.hero-new__content-inner h1 {
margin-bottom: 1rem;
font-size: 3.5rem;
}
}
.hero-new__content-inner p {
font-size: 1.25rem;
color: rgba(249, 249, 249, .6);
margin-bottom: 3.125rem;
line-height: 1.5rem;
text-shadow: 0 0 4px rgba(0, 0, 0, .4);
letter-spacing: -.03em;
display: none
}
@media screen and (min-width:960px) {
.hero-new__content-inner {
margin: 0 auto 0 0
}
.hero-new__content-inner p {
display: block
}
}
.hero-new__title {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em
}
[lang=cs_CZ] .hero-new__title,
[lang=hu_HU] .hero-new__title,
[lang=pl_PL] .hero-new__title,
[lang=tr_tr] .hero-new__title,
[lang=vi_vi] .hero-new__title,
html[lang=cs] .hero-new__title,
html[lang=hu] .hero-new__title,
html[lang=pl] .hero-new__title,
html[lang=tr] .hero-new__title,
html[lang=vi] .hero-new__title {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .hero-new__title,
html[lang=ko] .hero-new__title {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .hero-new__title,
html[lang=th] .hero-new__title {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .hero-new__title,
html[lang=ja] .hero-new__title {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .hero-new__title,
[lang=zh-hant] .hero-new__title,
html[lang=zh-cn] .hero-new__title,
html[lang=zh-hant] .hero-new__title {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
.hero-new__image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%
}
body.theme-arc2 .hero-new__background-image {
background-color: #000;
background-position: center right
}
body.theme-arc2 .hero-new__content__logo {
max-width: 325px;
margin-bottom: 20px
}
@media screen and (min-width:960px) {
body.theme-arc2 .hero-new__content__logo {
max-width: 540px
}
}
body.theme-arc2 .themed-icon-button {
border-radius: 24px;
color: #0f1422;
transition: .2s ease-in-out;
background: linear-gradient(180deg, #dbe0ee, #4d65ac);
box-shadow: 0 1px 30px 0 rgba(130, 98, 147, .251), 0 0 22px 0 rgba(130, 98, 147, .349), 0 1px 46px 0 rgba(130, 98, 147, .102), 0 1px 40px 0 rgba(130, 98, 147, .102)
}
body.theme-arc2 .themed-icon-button:hover {
background: linear-gradient(180deg, #dbe0ee, #b5aef3)
}
body.theme-arc2 .themed-icon-button:active,
body.theme-arc2 .themed-icon-button:focus,
body.theme-arc2 .themed-icon-button:focus-visible {
outline: 0
}
body.theme-arc2 .themed-icon-button:active:after,
body.theme-arc2 .themed-icon-button:focus-visible:after,
body.theme-arc2 .themed-icon-button:focus:after {
background-image: linear-gradient(111.7deg, rgba(255, 255, 255, .5) -1.03%, #fff 12.2%, #4d65ac 36.12%, #fff 62.08%, rgba(222, 185, 255, .9) 74.8%, rgba(255, 255, 255, .9) 82.44%, rgba(255, 255, 255, .5) 100.76%)
}
.hero-new--impact-report {
background: linear-gradient(180deg, #e62031 0, #af1625 100%);
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
overflow: hidden
}
.hero-new--impact-report .hero-new--impact-report__media {
background-color: linear-gradient(180deg, #e62031 0, #af1625 100%);
height: 300px;
max-width: 100%;
margin-right: 0;
margin-left: auto;
-webkit-clip-path: polygon(54% 0, 100% 20%, 100% 100%, 18% 100%, 5% 43%);
clip-path: polygon(54% 0, 100% 20%, 100% 100%, 18% 100%, 5% 43%)
}
@media screen and (min-width:550px) {
.hero-new--impact-report .hero-new--impact-report__media {
max-width: 100%;
height: 500px;
-webkit-clip-path: polygon(54% 0, 100% 15%, 100% 100%, 18% 100%, 5% 38%);
clip-path: polygon(54% 0, 100% 15%, 100% 100%, 18% 100%, 5% 38%)
}
}
.hero-new--impact-report .hero-new--impact-report__media .hero_new__video {
height: 100%;
position: relative
}
.hero-new--impact-report .hero-new__content-inner {
padding: 0 32px;
margin: 40px 0
}
.hero-new--impact-report .hero-new__content-inner .hero-new__button {
position: relative;
font-family: 'Inter V Latin', Arial, sans-serif;
background-color: #0a0a0a;
margin-left: 5px;
background-image: linear-gradient(-183deg, #0a0a0a 49.5%, #0a0a0a 50.5%)
}
[lang=cs_CZ] .hero-new--impact-report .hero-new__content-inner .hero-new__button,
[lang=hu_HU] .hero-new--impact-report .hero-new__content-inner .hero-new__button,
[lang=pl_PL] .hero-new--impact-report .hero-new__content-inner .hero-new__button,
[lang=tr_tr] .hero-new--impact-report .hero-new__content-inner .hero-new__button,
[lang=vi_vi] .hero-new--impact-report .hero-new__content-inner .hero-new__button,
html[lang=cs] .hero-new--impact-report .hero-new__content-inner .hero-new__button,
html[lang=hu] .hero-new--impact-report .hero-new__content-inner .hero-new__button,
html[lang=pl] .hero-new--impact-report .hero-new__content-inner .hero-new__button,
html[lang=tr] .hero-new--impact-report .hero-new__content-inner .hero-new__button,
html[lang=vi] .hero-new--impact-report .hero-new__content-inner .hero-new__button {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .hero-new--impact-report .hero-new__content-inner .hero-new__button,
html[lang=ko] .hero-new--impact-report .hero-new__content-inner .hero-new__button {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .hero-new--impact-report .hero-new__content-inner .hero-new__button,
html[lang=th] .hero-new--impact-report .hero-new__content-inner .hero-new__button {
font-family: 'Noto Sans Thai', sans-serif
}
[lang=ja] .hero-new--impact-report .hero-new__content-inner .hero-new__button,
html[lang=ja] .hero-new--impact-report .hero-new__content-inner .hero-new__button {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .hero-new--impact-report .hero-new__content-inner .hero-new__button,
[lang=zh-hant] .hero-new--impact-report .hero-new__content-inner .hero-new__button,
html[lang=zh-cn] .hero-new--impact-report .hero-new__content-inner .hero-new__button,
html[lang=zh-hant] .hero-new--impact-report .hero-new__content-inner .hero-new__button {
font-family: 'Noto Sans CN', sans-serif
}
.hero-new--impact-report .hero-new__content-inner .hero-new__button:active,
.hero-new--impact-report .hero-new__content-inner .hero-new__button:focus,
.hero-new--impact-report .hero-new__content-inner .hero-new__button:hover {
background-color: #0a0a0a
}
.hero-new--impact-report .hero-new__content-inner p {
font-size: 16px;
color: #fff;
display: block;
margin-bottom: 24px;
padding-left: 5px;
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=cs_CZ] .hero-new--impact-report .hero-new__content-inner p,
[lang=hu_HU] .hero-new--impact-report .hero-new__content-inner p,
[lang=pl_PL] .hero-new--impact-report .hero-new__content-inner p,
[lang=tr_tr] .hero-new--impact-report .hero-new__content-inner p,
[lang=vi_vi] .hero-new--impact-report .hero-new__content-inner p,
html[lang=cs] .hero-new--impact-report .hero-new__content-inner p,
html[lang=hu] .hero-new--impact-report .hero-new__content-inner p,
html[lang=pl] .hero-new--impact-report .hero-new__content-inner p,
html[lang=tr] .hero-new--impact-report .hero-new__content-inner p,
html[lang=vi] .hero-new--impact-report .hero-new__content-inner p {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .hero-new--impact-report .hero-new__content-inner p,
html[lang=ko] .hero-new--impact-report .hero-new__content-inner p {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .hero-new--impact-report .hero-new__content-inner p,
html[lang=th] .hero-new--impact-report .hero-new__content-inner p {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .hero-new--impact-report .hero-new__content-inner p,
html[lang=ja] .hero-new--impact-report .hero-new__content-inner p {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .hero-new--impact-report .hero-new__content-inner p,
[lang=zh-hant] .hero-new--impact-report .hero-new__content-inner p,
html[lang=zh-cn] .hero-new--impact-report .hero-new__content-inner p,
html[lang=zh-hant] .hero-new--impact-report .hero-new__content-inner p {
font-family: 'Riot Sans CN', sans-serif
}
.hero-new--impact-report .hero-new__content-inner .heading {
font-family: 'Riot Sans Latin', Arial, sans-serif;
font-size: 54px
}
[lang=cs_CZ] .hero-new--impact-report .hero-new__content-inner .heading,
[lang=hu_HU] .hero-new--impact-report .hero-new__content-inner .heading,
[lang=pl_PL] .hero-new--impact-report .hero-new__content-inner .heading,
[lang=tr_tr] .hero-new--impact-report .hero-new__content-inner .heading,
[lang=vi_vi] .hero-new--impact-report .hero-new__content-inner .heading,
html[lang=cs] .hero-new--impact-report .hero-new__content-inner .heading,
html[lang=hu] .hero-new--impact-report .hero-new__content-inner .heading,
html[lang=pl] .hero-new--impact-report .hero-new__content-inner .heading,
html[lang=tr] .hero-new--impact-report .hero-new__content-inner .heading,
html[lang=vi] .hero-new--impact-report .hero-new__content-inner .heading {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .hero-new--impact-report .hero-new__content-inner .heading,
html[lang=ko] .hero-new--impact-report .hero-new__content-inner .heading {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .hero-new--impact-report .hero-new__content-inner .heading,
html[lang=th] .hero-new--impact-report .hero-new__content-inner .heading {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .hero-new--impact-report .hero-new__content-inner .heading,
html[lang=ja] .hero-new--impact-report .hero-new__content-inner .heading {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .hero-new--impact-report .hero-new__content-inner .heading,
[lang=zh-hant] .hero-new--impact-report .hero-new__content-inner .heading,
html[lang=zh-cn] .hero-new--impact-report .hero-new__content-inner .heading,
html[lang=zh-hant] .hero-new--impact-report .hero-new__content-inner .heading {
font-family: 'Riot Sans CN', sans-serif
}
@media screen and (min-width:550px) {
.hero-new--impact-report .hero-new__content-inner p {
font-size: 17px
}
.hero-new--impact-report .hero-new__content-inner .heading {
font-size: 74px
}
}
@media screen and (min-width:960px) {
.hero-new--impact-report {
display: block;
position: relative
}
.hero-new--impact-report .hero-new--impact-report__media {
height: 730px;
-webkit-clip-path: polygon(81% 0, 100% 0, 100% 100%, 52% 100%, 46% 41%);
clip-path: polygon(81% 0, 100% 0, 100% 100%, 52% 100%, 46% 41%)
}
.hero-new--impact-report .hero-new--impact-report__media .hero_new__video {
position: absolute;
height: 100%;
top: 0;
right: 0
}
.hero-new--impact-report .hero-new__content-outer {
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: start;
align-items: start
}
.hero-new--impact-report .hero-new__content-outer .hero-new__content-inner {
font-size: 17px;
margin: 0 30px
}
.hero-new--impact-report .hero-new__content-outer .hero-new__content-inner .hero-new__button,
.hero-new--impact-report .hero-new__content-outer .hero-new__content-inner p {
min-width: 300px
}
.hero-new--impact-report .hero-new__content-outer .hero-new__content-inner .heading {
font-size: 94px
}
}
@media screen and (min-width:1440px) {
.hero-new--impact-report .hero-new__content-outer .hero-new__content-inner {
margin-left: 5%
}
}
@media screen and (min-width:1920px) {
.hero-new--impact-report .hero-new--impact-report__media {
height: 64vh
}
.hero-new--impact-report .hero-new__content-outer .hero-new__content-inner {
max-width: 600px
}
}
@media screen and (min-width:3000px) {
.hero-new--impact-report .hero-new__content-outer .hero-new__content-inner {
margin-left: 10%;
max-width: 800px
}
}
.hero {
position: relative;
margin-bottom: 40px;
z-index: 1
}
@media screen and (min-width:960px) {
.hero {
margin-bottom: 80px
}
}
.hero__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #0a0a0a;
background-size: 50%;
background-repeat: repeat;
color: #e7e6e3;
overflow: hidden;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important
}
.hero__bg:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, .7);
z-index: 0
}
.hero__bg-inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 0;
background-image: url(/assets/img/structure/16ba67c8ec0c642533cc4c14d140f0f3/RiotPattern-HeroWidget.svg)
}
.hero__container {
position: relative;
padding: 0 20px 0;
min-height: 480px;
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: end;
justify-content: end;
-ms-flex-align: center;
align-items: center
}
@media screen and (min-width:550px) {
.hero__container {
padding: 0 40px 0
}
}
@media screen and (min-width:960px) {
.hero__container {
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0
}
}
.hero__container-inner {
width: 100%
}
.hero__inner {
max-width: 1440px;
margin: 0 auto
}
.hero__content-video {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
background: #252423;
padding-top: 56.25%
}
@media screen and (min-width:960px) {
.hero__content-video {
padding-top: 0;
-webkit-clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
width: 50%
}
}
.hero__content-video iframe {
position: absolute;
top: 0
}
.hero__content {
min-height: 380px;
height: 100%;
color: #fff;
width: 100%;
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden
}
@media screen and (min-width:960px) {
.hero__content {
height: 480px;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: start;
justify-content: start
}
}
.hero__image-wrapper {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
aspect-ratio: 16/9
}
@media screen and (min-width:960px) {
.hero__image-wrapper {
width: 50%;
-webkit-clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%)
}
}
@media screen and (min-width:1280px) {
.hero__image-wrapper {
width: 75%
}
}
@media screen and (min-width:960px) {
.hero__content-inner {
-ms-flex: 1 0 auto;
flex: 1 0 auto;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-direction: column;
flex-direction: column
}
}
.hero__content-wrapper {
width: 100%;
margin-top: 40px
}
@media screen and (min-width:960px) {
.hero__content-wrapper {
width: 50%;
margin-left: 80px;
margin-top: 0
}
}
.hero__heading {
position: relative;
margin-top: 20px;
margin-bottom: 30px
}
@media screen and (min-width:960px) {
.hero__heading {
margin-top: 30px;
margin-bottom: 0
}
}
.hero__scroll-link {
position: relative;
color: #e7e6e3;
transition: all .3s ease;
margin-top: 40px;
margin-bottom: 40px;
-ms-flex-item-align: end;
align-self: flex-end;
text-transform: uppercase
}
.hero__scroll-link:active,
.hero__scroll-link:focus,
.hero__scroll-link:hover {
color: #d1363a;
text-decoration: none;
transition-duration: .1s
}
.hero__scroll-link:active .brush-icon__bg path,
.hero__scroll-link:focus .brush-icon__bg path,
.hero__scroll-link:hover .brush-icon__bg path {
fill: #d1363a;
transition-duration: .1s
}
.hero__scroll-link:active .brush-icon__type path,
.hero__scroll-link:focus .brush-icon__type path,
.hero__scroll-link:hover .brush-icon__type path {
fill: #e7e6e3;
transition-duration: .1s
}
.hero__scroll-anchor {
display: inline-block;
position: relative;
top: -80px
}
body.has-sub-navigation .hero__scroll-anchor {
top: -120px
}
.hero--carousel {
margin-bottom: 40px
}
.hero--carousel .hero__bg {
bottom: 40%
}
.hero__full-width-content {
position: relative;
padding-top: 60px;
padding-bottom: 20px;
text-align: center
}
@media screen and (min-width:550px) {
.hero__full-width-content {
padding-top: 80px;
padding-bottom: 40px
}
}
@media screen and (min-width:960px) {
.hero__full-width-content {
padding-top: 100px;
padding-bottom: 60px
}
}
@media screen and (min-width:1280px) {
.hero__full-width-content {
padding-top: 120px;
padding-bottom: 80px
}
}
.hero__full-width-content .copy {
margin-top: 20px
}
.cssanimations .hero__bg {
-webkit-animation: hero-mask-reveal-from-top 1s 0s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: hero-mask-reveal-from-top 1s 0s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(0 0, 100% 0, 100% .001%, 0 .001%);
clip-path: polygon(0 0, 100% 0, 100% .001%, 0 .001%);
opacity: 0
}
.cssanimations .hero__bg-inner {
-webkit-mask: url(/assets/img/content/watercolour-sprite.png);
mask: url(/assets/img/content/watercolour-sprite.png);
-webkit-mask-size: 2300% 100%;
mask-size: 2300% 100%;
-webkit-mask-position: 100% 0;
mask-position: 100% 0;
-webkit-animation: watercolour-reveal 1.4s 2s steps(22) forwards;
animation: watercolour-reveal 1.4s 2s steps(22) forwards;
opacity: 0
}
.cssanimations .hero .eyebrow {
-webkit-animation: mask-reveal-from-right 1s 1.2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s 1.2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.cssanimations .hero .copy {
-webkit-animation: reveal-down 1s 1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(-100px);
transform: translateY(-100px);
opacity: 0
}
.cssanimations .hero__heading {
-webkit-animation: reveal-down 1s .8s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s .8s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(-100px);
transform: translateY(-100px);
opacity: 0
}
.cssanimations .hero__scroll-link {
-webkit-animation: reveal-down 1s 1.7s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 1.7s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0
}
.hero-video {
display: inline-block;
position: relative
}
.hero-video img {
max-height: calc(100vh - 90px - 80px)
}
.has-sub-navigation .hero-video img {
max-height: calc(100vh - 140px - 80px)
}
@media (min-width:960px) and (min-height:800px) {
.hero-video img {
max-height: 700px
}
.has-sub-navigation .hero-video img {
max-height: 760px
}
}
.hero-video .video-preview {
overflow: hidden;
transform: translateZ(0)
}
.cssanimations .hero-video .video-preview {
-webkit-animation: mask-reveal-from-right 1s .8s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s .8s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.icon-grid__heading {
text-align: center;
margin-bottom: 15px
}
@media screen and (min-width:550px) {
.icon-grid__heading {
margin-bottom: 30px
}
}
.icon-grid__description {
max-width: 1000px;
margin-left: auto;
margin-right: auto
}
@media screen and (max-width:549px) {
.icon-grid__button {
margin-top: 24px
}
}
.icon-grid-item {
text-align: center;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
padding-bottom: 20px;
max-width: 250px;
position: relative;
display: block
}
.icon-grid-item .copy,
.icon-grid-item .copy:hover {
display: inline-block;
text-decoration: none !important
}
@media screen and (min-width:550px) {
.icon-grid-item {
padding-top: 40px;
padding-bottom: 40px
}
}
@media screen and (min-width:1440px) {
.icon-grid-item {
max-width: 350px
}
}
.icon-grid-item *+* {
margin-top: 10px
}
.icon-grid-item__icon {
position: relative;
margin-bottom: 20px
}
.icon-grid-item__icon--bg path {
fill: #dbd9d6
}
.icon-grid-item__icon--bg-transparent path {
fill: transparent
}
.icon-grid-item__icon--primary {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.icon-grid-item__icon--primary path {
fill: #2b2a29
}
.icon-grid-item__image {
width: 80px;
height: 80px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%)
}
.icon-grid-item--large .icon-grid-item__image {
width: auto;
height: auto
}
@media screen and (min-width:1440px) {
.icon-grid-item--large .icon-grid-item__image {
max-width: 270px
}
}
.impact-report-grid-item__image {
height: auto
}
.impact-report-icon-grid {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=cs_CZ] .impact-report-icon-grid,
[lang=hu_HU] .impact-report-icon-grid,
[lang=pl_PL] .impact-report-icon-grid,
[lang=tr_tr] .impact-report-icon-grid,
[lang=vi_vi] .impact-report-icon-grid,
html[lang=cs] .impact-report-icon-grid,
html[lang=hu] .impact-report-icon-grid,
html[lang=pl] .impact-report-icon-grid,
html[lang=tr] .impact-report-icon-grid,
html[lang=vi] .impact-report-icon-grid {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .impact-report-icon-grid,
html[lang=ko] .impact-report-icon-grid {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .impact-report-icon-grid,
html[lang=th] .impact-report-icon-grid {
font-family: 'Noto Sans Thai', sans-serif
}
[lang=ja] .impact-report-icon-grid,
html[lang=ja] .impact-report-icon-grid {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .impact-report-icon-grid,
[lang=zh-hant] .impact-report-icon-grid,
html[lang=zh-cn] .impact-report-icon-grid,
html[lang=zh-hant] .impact-report-icon-grid {
font-family: 'Noto Sans CN', sans-serif
}
.impact-report-icon-grid .icon-grid-item__heading {
font-size: 20px;
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=cs_CZ] .impact-report-icon-grid .icon-grid-item__heading,
[lang=hu_HU] .impact-report-icon-grid .icon-grid-item__heading,
[lang=pl_PL] .impact-report-icon-grid .icon-grid-item__heading,
[lang=tr_tr] .impact-report-icon-grid .icon-grid-item__heading,
[lang=vi_vi] .impact-report-icon-grid .icon-grid-item__heading,
html[lang=cs] .impact-report-icon-grid .icon-grid-item__heading,
html[lang=hu] .impact-report-icon-grid .icon-grid-item__heading,
html[lang=pl] .impact-report-icon-grid .icon-grid-item__heading,
html[lang=tr] .impact-report-icon-grid .icon-grid-item__heading,
html[lang=vi] .impact-report-icon-grid .icon-grid-item__heading {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .impact-report-icon-grid .icon-grid-item__heading,
html[lang=ko] .impact-report-icon-grid .icon-grid-item__heading {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .impact-report-icon-grid .icon-grid-item__heading,
html[lang=th] .impact-report-icon-grid .icon-grid-item__heading {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .impact-report-icon-grid .icon-grid-item__heading,
html[lang=ja] .impact-report-icon-grid .icon-grid-item__heading {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .impact-report-icon-grid .icon-grid-item__heading,
[lang=zh-hant] .impact-report-icon-grid .icon-grid-item__heading,
html[lang=zh-cn] .impact-report-icon-grid .icon-grid-item__heading,
html[lang=zh-hant] .impact-report-icon-grid .icon-grid-item__heading {
font-family: 'Riot Sans CN', sans-serif
}
.impact-report-icon-grid .copy {
font-size: 16px;
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=cs_CZ] .impact-report-icon-grid .copy,
[lang=hu_HU] .impact-report-icon-grid .copy,
[lang=pl_PL] .impact-report-icon-grid .copy,
[lang=tr_tr] .impact-report-icon-grid .copy,
[lang=vi_vi] .impact-report-icon-grid .copy,
html[lang=cs] .impact-report-icon-grid .copy,
html[lang=hu] .impact-report-icon-grid .copy,
html[lang=pl] .impact-report-icon-grid .copy,
html[lang=tr] .impact-report-icon-grid .copy,
html[lang=vi] .impact-report-icon-grid .copy {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .impact-report-icon-grid .copy,
html[lang=ko] .impact-report-icon-grid .copy {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .impact-report-icon-grid .copy,
html[lang=th] .impact-report-icon-grid .copy {
font-family: 'Noto Sans Thai', sans-serif
}
[lang=ja] .impact-report-icon-grid .copy,
html[lang=ja] .impact-report-icon-grid .copy {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .impact-report-icon-grid .copy,
[lang=zh-hant] .impact-report-icon-grid .copy,
html[lang=zh-cn] .impact-report-icon-grid .copy,
html[lang=zh-hant] .impact-report-icon-grid .copy {
font-family: 'Noto Sans CN', sans-serif
}
.icon {
display: inline-block;
vertical-align: middle;
font-style: normal
}
.icon svg {
vertical-align: top;
height: auto
}
.inline-nav--placeholder {
height: 50px;
display: none;
width: 100%
}
.inline-nav--placeholder.sticky {
display: block
}
.impact-report-inline-navigation.sticky {
position: fixed;
top: 80px;
width: 100%;
background-color: #eff3ef;
z-index: 10
}
.impact-report-inline-navigation {
font-size: 14px;
border-top: 1px solid rgba(0, 0, 0, .251);
border-bottom: 1px solid rgba(0, 0, 0, .251)
}
.impact-report-inline-navigation .inline-navigation__link {
font-family: 'Riot Sans Latin', Arial, sans-serif;
color: #050505
}
[lang=cs_CZ] .impact-report-inline-navigation .inline-navigation__link,
[lang=hu_HU] .impact-report-inline-navigation .inline-navigation__link,
[lang=pl_PL] .impact-report-inline-navigation .inline-navigation__link,
[lang=tr_tr] .impact-report-inline-navigation .inline-navigation__link,
[lang=vi_vi] .impact-report-inline-navigation .inline-navigation__link,
html[lang=cs] .impact-report-inline-navigation .inline-navigation__link,
html[lang=hu] .impact-report-inline-navigation .inline-navigation__link,
html[lang=pl] .impact-report-inline-navigation .inline-navigation__link,
html[lang=tr] .impact-report-inline-navigation .inline-navigation__link,
html[lang=vi] .impact-report-inline-navigation .inline-navigation__link {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .impact-report-inline-navigation .inline-navigation__link,
html[lang=ko] .impact-report-inline-navigation .inline-navigation__link {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .impact-report-inline-navigation .inline-navigation__link,
html[lang=th] .impact-report-inline-navigation .inline-navigation__link {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .impact-report-inline-navigation .inline-navigation__link,
html[lang=ja] .impact-report-inline-navigation .inline-navigation__link {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .impact-report-inline-navigation .inline-navigation__link,
[lang=zh-hant] .impact-report-inline-navigation .inline-navigation__link,
html[lang=zh-cn] .impact-report-inline-navigation .inline-navigation__link,
html[lang=zh-hant] .impact-report-inline-navigation .inline-navigation__link {
font-family: 'Riot Sans CN', sans-serif
}
.impact-report-inline-navigation .inline-navigation__link:after {
content: none
}
.impact-report-inline-navigation .impact-report-navigation__link-purple.active {
color: #3c00cf
}
.impact-report-inline-navigation .impact-report-navigation__link-orange.active {
color: #ff9400
}
.impact-report-inline-navigation .impact-report-navigation__link-cyan.active {
color: #0ec8c4
}
.impact-report-inline-navigation .impact-report-navigation__link-red.active {
color: #d1363a
}
.impact-report-inline-navigation .inline-navigation__list {
padding: 0
}
.impact-report-inline-navigation:after,
.impact-report-inline-navigation:before {
display: none
}
.inline-navigation {
position: relative;
text-align: center;
white-space: nowrap;
overflow-x: auto
}
.inline-navigation:after,
.inline-navigation:before {
content: '';
position: absolute;
top: 0;
bottom: 2px;
width: 15px;
z-index: 1
}
@media screen and (min-width:550px) {
.inline-navigation:after,
.inline-navigation:before {
width: 30px
}
}
.inline-navigation:before {
left: 0;
background-image: linear-gradient(to right, #e7e6e3 20%, rgba(231, 230, 227, 0))
}
.inline-navigation:after {
background-image: linear-gradient(to left, #e7e6e3 20%, rgba(231, 230, 227, 0));
right: 0
}
@media screen and (min-width:550px) {
.inline-navigation__list {
padding-top: 15px;
padding-bottom: 15px
}
}
.inline-navigation__item {
margin-left: 0;
display: inline-block;
vertical-align: top;
padding-left: 15px;
padding-right: 15px
}
@media screen and (min-width:550px) {
.inline-navigation__item {
padding-left: 30px;
padding-right: 30px
}
}
.inline-navigation__link {
display: block;
line-height: 30px;
position: relative;
font-weight: 700;
color: #8a8887;
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em;
text-transform: uppercase;
font-size: .75rem;
padding: 10px 0
}
[lang=cs_CZ] .inline-navigation__link,
[lang=hu_HU] .inline-navigation__link,
[lang=pl_PL] .inline-navigation__link,
[lang=tr_tr] .inline-navigation__link,
[lang=vi_vi] .inline-navigation__link,
html[lang=cs] .inline-navigation__link,
html[lang=hu] .inline-navigation__link,
html[lang=pl] .inline-navigation__link,
html[lang=tr] .inline-navigation__link,
html[lang=vi] .inline-navigation__link {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .inline-navigation__link,
html[lang=ko] .inline-navigation__link {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .inline-navigation__link,
html[lang=th] .inline-navigation__link {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .inline-navigation__link,
html[lang=ja] .inline-navigation__link {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .inline-navigation__link,
[lang=zh-hant] .inline-navigation__link,
html[lang=zh-cn] .inline-navigation__link,
html[lang=zh-hant] .inline-navigation__link {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
.inline-navigation__link:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: -15px;
left: -15px
}
@media screen and (min-width:550px) {
.inline-navigation__link:before {
left: -30px;
right: -30px
}
}
.inline-navigation__link:after {
content: '';
position: absolute;
height: 2px;
width: 0;
right: 50%;
margin-right: -50%;
transition: width .1s ease-out;
border-radius: 4px;
background-image: url(/assets/img/structure/df039d781584a56af15c56e80deb0f8d/brush-line--muted.svg);
background-repeat: no-repeat;
background-position: 100% 0;
background-size: 100% 2px;
bottom: 15px
}
@media screen and (min-width:550px) {
.inline-navigation__link:after {
bottom: 12px
}
}
.inline-navigation__link.is-active,
.inline-navigation__link:active,
.inline-navigation__link:focus,
.inline-navigation__link:hover {
text-decoration: none;
color: #8a8887
}
.inline-navigation__link.is-active:after,
.inline-navigation__link:active:after,
.inline-navigation__link:focus:after,
.inline-navigation__link:hover:after {
background-position: 0 0;
width: 100%;
margin-left: -50%;
left: 50%;
right: auto
}
.inline-navigation__link.is-active {
color: #d1363a
}
.inline-navigation__link.is-active:after {
background-image: url(/assets/img/structure/a05cc7654fae18a3cb2be7ffde1de684/brush-line.svg)
}
.job-and-links {
width: 100%;
height: 750px;
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden
}
@media screen and (min-width:960px) {
.job-and-links {
display: block
}
}
.job-and-links.job-and-links--dark {
background-color: #2b2a29
}
@media screen and (min-width:960px) {
.job-and-links__full-width {
position: absolute;
height: 100%;
max-width: 1920px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto
}
}
.job-and-links__job-wrapper {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center
}
.job-and-links__job-wrapper::after {
content: '';
position: absolute;
width: 160%;
height: 160%;
top: 0;
left: -50%;
background-position-x: 10%;
background-image: url(/assets/img/content/eae8804977acad45efc91786c7822a70/job-and-links-texture.png);
background-size: cover;
opacity: 15%;
top: 0;
z-index: 0
}
@media screen and (min-width:960px) {
.job-and-links__job-wrapper {
height: 100%;
width: 52%
}
}
.job-and-links__job {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
gap: 12px;
padding: 50px 20px;
z-index: 1
}
@media screen and (min-width:550px) {
.job-and-links__job {
max-width: 100%
}
}
@media screen and (min-width:960px) {
.job-and-links__job {
gap: 24px;
max-width: 420px
}
}
.job-and-links__job__pre-title {
font-family: 'Riot Sans Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-size: 20px;
line-height: 24px;
font-weight: 600;
text-transform: uppercase;
color: #d1363a
}
[lang=cs_CZ] .job-and-links__job__pre-title,
[lang=hu_HU] .job-and-links__job__pre-title,
[lang=pl_PL] .job-and-links__job__pre-title,
[lang=tr_tr] .job-and-links__job__pre-title,
[lang=vi_vi] .job-and-links__job__pre-title,
html[lang=cs] .job-and-links__job__pre-title,
html[lang=hu] .job-and-links__job__pre-title,
html[lang=pl] .job-and-links__job__pre-title,
html[lang=tr] .job-and-links__job__pre-title,
html[lang=vi] .job-and-links__job__pre-title {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .job-and-links__job__pre-title,
html[lang=ko] .job-and-links__job__pre-title {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .job-and-links__job__pre-title,
html[lang=th] .job-and-links__job__pre-title {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .job-and-links__job__pre-title,
html[lang=ja] .job-and-links__job__pre-title {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .job-and-links__job__pre-title,
[lang=zh-hant] .job-and-links__job__pre-title,
html[lang=zh-cn] .job-and-links__job__pre-title,
html[lang=zh-hant] .job-and-links__job__pre-title {
font-family: 'Riot Sans CN', sans-serif
}
.job-and-links__job__title {
font-family: 'Riot Sans Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-size: 44px;
line-height: 46px;
color: #0a0a0a;
text-transform: uppercase
}
[lang=cs_CZ] .job-and-links__job__title,
[lang=hu_HU] .job-and-links__job__title,
[lang=pl_PL] .job-and-links__job__title,
[lang=tr_tr] .job-and-links__job__title,
[lang=vi_vi] .job-and-links__job__title,
html[lang=cs] .job-and-links__job__title,
html[lang=hu] .job-and-links__job__title,
html[lang=pl] .job-and-links__job__title,
html[lang=tr] .job-and-links__job__title,
html[lang=vi] .job-and-links__job__title {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .job-and-links__job__title,
html[lang=ko] .job-and-links__job__title {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .job-and-links__job__title,
html[lang=th] .job-and-links__job__title {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .job-and-links__job__title,
html[lang=ja] .job-and-links__job__title {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .job-and-links__job__title,
[lang=zh-hant] .job-and-links__job__title,
html[lang=zh-cn] .job-and-links__job__title,
html[lang=zh-hant] .job-and-links__job__title {
font-family: 'Riot Sans CN', sans-serif
}
.job-and-links--dark .job-and-links__job__title {
color: #fff
}
.job-and-links__job__description {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-size: 18px;
line-height: 27px;
color: #0a0a0a
}
[lang=cs_CZ] .job-and-links__job__description,
[lang=hu_HU] .job-and-links__job__description,
[lang=pl_PL] .job-and-links__job__description,
[lang=tr_tr] .job-and-links__job__description,
[lang=vi_vi] .job-and-links__job__description,
html[lang=cs] .job-and-links__job__description,
html[lang=hu] .job-and-links__job__description,
html[lang=pl] .job-and-links__job__description,
html[lang=tr] .job-and-links__job__description,
html[lang=vi] .job-and-links__job__description {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .job-and-links__job__description,
html[lang=ko] .job-and-links__job__description {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .job-and-links__job__description,
html[lang=th] .job-and-links__job__description {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .job-and-links__job__description,
html[lang=ja] .job-and-links__job__description {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .job-and-links__job__description,
[lang=zh-hant] .job-and-links__job__description,
html[lang=zh-cn] .job-and-links__job__description,
html[lang=zh-hant] .job-and-links__job__description {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
.job-and-links--dark .job-and-links__job__description {
color: #fff
}
.job-and-links__job__cta {
margin-right: auto
}
.job-and-links__links-full-width {
display: -ms-flexbox;
display: flex;
-ms-flex-positive: 1;
flex-grow: 1
}
@media screen and (min-width:960px) {
.job-and-links__links-full-width {
-ms-flex-pack: end;
justify-content: flex-end;
height: 100%
}
}
.job-and-links__links {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
width: 100%
}
@media screen and (min-width:960px) {
.job-and-links__links {
width: 60%;
-ms-flex-direction: row;
flex-direction: row
}
}
.job-and-links__link {
position: relative;
width: 100%;
min-height: 60%
}
.job-and-links__link:hover .job-and-links__overlay {
background: rgba(0, 0, 0, .7);
transition: .2s ease
}
@media screen and (min-width:960px) {
.job-and-links__link {
min-height: 100%
}
}
.job-and-links__image-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 70%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 70%)
}
@media screen and (min-width:960px) {
.job-and-links__image-wrapper {
height: calc(100% + 2px);
top: -1px;
-webkit-clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%)
}
}
.job-and-links__image-wrapper img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center
}
.job-and-links__overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
z-index: 1;
top: 0;
left: 0;
transition: .2s ease
}
@media screen and (min-width:960px) {
.job-and-links__link:first-child {
left: 11%;
width: 100%
}
}
.job-and-links__link:last-child {
bottom: 20%
}
.job-and-links__link:last-child .job-and-links__image-wrapper {
-webkit-clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 100%)
}
.job-and-links__link:last-child .job-and-links__link__label {
top: 60%
}
@media screen and (min-width:960px) {
.job-and-links__link:last-child {
bottom: 0;
left: 0;
width: 85%
}
.job-and-links__link:last-child .job-and-links__image-wrapper {
-webkit-clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%)
}
.job-and-links__link:last-child .job-and-links__link__label {
top: 50%;
left: 55%
}
}
.job-and-links__link__label {
font-family: 'Riot Sans Latin', Arial, sans-serif;
letter-spacing: -.03em;
position: absolute;
top: 50%;
left: 50%;
width: 70%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 20px;
line-height: 24px;
font-weight: 600;
color: #fff;
text-transform: uppercase;
z-index: 2;
text-align: center
}
[lang=cs_CZ] .job-and-links__link__label,
[lang=hu_HU] .job-and-links__link__label,
[lang=pl_PL] .job-and-links__link__label,
[lang=tr_tr] .job-and-links__link__label,
[lang=vi_vi] .job-and-links__link__label,
html[lang=cs] .job-and-links__link__label,
html[lang=hu] .job-and-links__link__label,
html[lang=pl] .job-and-links__link__label,
html[lang=tr] .job-and-links__link__label,
html[lang=vi] .job-and-links__link__label {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .job-and-links__link__label,
html[lang=ko] .job-and-links__link__label {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .job-and-links__link__label,
html[lang=th] .job-and-links__link__label {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .job-and-links__link__label,
html[lang=ja] .job-and-links__link__label {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .job-and-links__link__label,
[lang=zh-hant] .job-and-links__link__label,
html[lang=zh-cn] .job-and-links__link__label,
html[lang=zh-hant] .job-and-links__link__label {
font-family: 'Riot Sans CN', sans-serif
}
@media screen and (min-width:550px) {
.job-list {
padding-left: 40px;
padding-right: 40px;
margin-left: auto;
margin-right: auto;
max-width: 1440px
}
}
@media screen and (min-width:550px) {
.job-list--full-width {
padding-left: 0;
padding-right: 0;
max-width: none
}
}
.job-list__title {
text-align: center
}
.job-list__heading {
text-align: center
}
.job-list__subheading {
margin-bottom: 20px
}
@media screen and (min-width:550px) {
.job-list__subheading {
margin-bottom: 40px
}
}
@media screen and (min-width:960px) {
.job-list__subheading {
margin-bottom: 60px
}
}
.job-list__notice {
padding-top: 20px
}
.job-list__search {
height: 40px;
padding: 8px 30px 8px 20px;
font-size: .875rem;
line-height: 1.714
}
.job-row {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-weight: 700;
font-size: .813rem;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
[lang=cs_CZ] .job-row,
[lang=hu_HU] .job-row,
[lang=pl_PL] .job-row,
[lang=tr_tr] .job-row,
[lang=vi_vi] .job-row,
html[lang=cs] .job-row,
html[lang=hu] .job-row,
html[lang=pl] .job-row,
html[lang=tr] .job-row,
html[lang=vi] .job-row {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .job-row,
html[lang=ko] .job-row {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .job-row,
html[lang=th] .job-row {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .job-row,
html[lang=ja] .job-row {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .job-row,
[lang=zh-hant] .job-row,
html[lang=zh-cn] .job-row,
html[lang=zh-hant] .job-row {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
.job-row:nth-child(even) {
background-color: #e2e1de
}
.job-row__inner {
display: block;
padding: 20px
}
@media screen and (min-width:960px) {
.job-row__inner {
display: -ms-flexbox;
display: flex;
padding: 0
}
}
a.job-row__inner {
color: #2b2a29
}
a.job-row__inner:focus,
a.job-row__inner:hover,
a.job-row__inneractive {
color: #2b2a29;
text-decoration: none
}
a.job-row__inner:focus .job-row__col--primary,
a.job-row__inner:hover .job-row__col--primary,
a.job-row__inneractive .job-row__col--primary {
color: #d1363a;
text-decoration: underline
}
@media screen and (max-width:959px) {
.job-row__col:empty {
display: none
}
}
@media screen and (min-width:960px) {
.job-row__col {
padding: 20px 20px 20px 0
}
}
.job-row__col--primary {
display: block;
font-weight: 800;
font-size: .938rem
}
@media screen and (min-width:960px) {
.job-row__col--primary {
-ms-flex: 2 0 0px;
flex: 2 0 0;
padding-left: 20px;
margin-bottom: 0
}
}
.job-row__col--secondary {
display: inline-block
}
@media screen and (max-width:959px) {
.job-row--body .job-row__col--secondary:not(:last-child) {
border-right: 1px solid grey;
padding-right: 10px;
margin-right: 10px
}
}
@media screen and (min-width:960px) {
.job-row__col--secondary {
-ms-flex: 1 0 0px;
flex: 1 0 0
}
.job-row__col--secondary:last-child {
padding-right: 0
}
}
.job-row--header .job-row__inner {
padding-top: 0
}
@media screen and (max-width:549px) {
.job-row--header .job-row__col--primary {
text-align: center;
padding-bottom: 20px
}
.job-row--header .job-row__col--secondary {
width: 100%;
padding-bottom: 20px
}
.job-row--header .job-row__col--secondary:last-child {
border-bottom: 1px solid #c5c5c3;
padding-bottom: 40px
}
}
@media screen and (min-width:550px) and (max-width:959px) {
.job-row--header .job-row__inner {
padding: 0;
border-bottom: 1px solid #c5c5c3;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 20px
}
.job-row--header .job-row__col--primary {
text-align: center;
padding-bottom: 40px;
-ms-flex: 0 0 100%;
flex: 0 0 100%
}
.job-row--header .job-row__col--secondary {
-ms-flex: 1 0 0px;
flex: 1 0 0;
padding-bottom: 40px
}
.job-row--header .job-row__col--secondary+.job-row__col--secondary {
margin-left: 20px
}
}
@media screen and (min-width:960px) {
.job-row--header .job-row__inner {
border-bottom: 1px solid #c5c5c3;
margin-bottom: 20px;
-ms-flex-align: center;
align-items: center
}
}
.job-row--header .job-row__col--primary {
font-size: 1.25rem;
color: #8a8887;
font-weight: 600;
padding-left: 0
}
.job-row--header .job-row__col--primary strong {
color: #2b2a29
}
@media screen and (min-width:550px) {
.key-value-list {
display: table;
table-layout: fixed;
width: 100%
}
}
@media screen and (min-width:550px) {
.key-value-list__row {
display: table-row;
width: 100%
}
}
.key-value-list__text,
.key-value-list__title {
padding: 5px 0 15px
}
@media screen and (min-width:550px) {
.key-value-list__text,
.key-value-list__title {
display: table-cell
}
}
@media screen and (min-width:550px) {
.key-value-list__title {
width: 25%
}
}
@media screen and (min-width:960px) {
.key-value-list__title {
width: 40%
}
}
.key-value-list__text {
overflow-wrap: break-word
}
.legend {
width: 100%
}
.legend__cell {
line-height: 20px;
text-align: left;
font-weight: 400;
vertical-align: top
}
.legend__row+.legend__row .legend__cell {
padding-top: 10px
}
@media screen and (min-width:960px) {
.legend__row+.legend__row .legend__cell {
padding-top: 20px
}
}
.legend__cell--swatch {
width: 48px
}
.legend__cell--key {
padding-left: 10px;
padding-right: 10px
}
@media screen and (min-width:960px) {
.legend__cell--key {
padding-left: 20px;
padding-right: 20px
}
}
.legend__cell--key:first-child {
padding-left: 0
}
.legend__cell--value {
white-space: nowrap;
text-align: right
}
.legend__swatch {
width: 48px;
height: 14px;
display: inline-block;
vertical-align: baseline;
-ms-transform: translateY(2px);
transform: translateY(2px)
}
.live-stream {
position: relative;
background-color: #2b2a29;
-webkit-clip-path: polygon(0 10px, 100% 0, 100% calc(100% - 10px), 0 100%);
clip-path: polygon(0 10px, 100% 0, 100% calc(100% - 10px), 0 100%)
}
@media screen and (min-width:960px) {
.live-stream {
-webkit-clip-path: polygon(0 0, 100% 20px, 100% calc(100% - 20px), 0 100%);
clip-path: polygon(0 0, 100% 20px, 100% calc(100% - 20px), 0 100%)
}
}
@media screen and (max-width:959px) {
.live-stream:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100px;
pointer-events: none;
background-image: linear-gradient(to top, #2b2a29, rgba(43, 42, 41, 0))
}
}
.live-stream img {
width: 100%
}
.live-stream__preview-heading {
position: absolute;
bottom: 20px;
left: 20px;
z-index: 1
}
@media screen and (min-width:960px) {
.live-stream__preview-heading {
right: 20px;
left: auto;
bottom: 40px
}
}
.live-stream__preview {
display: inline-block;
position: relative;
background-color: #2b2a29;
background: 0 0;
border: 0;
width: 100%
}
.live-stream__preview img {
transition: all .3s ease-out;
transform: translateZ(0)
}
.live-stream__preview:active img,
.live-stream__preview:focus img,
.live-stream__preview:hover img {
transition-duration: .1s;
transform: scale(1.05) translateZ(0);
opacity: .4
}
.live-stream__preview-button {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center
}
.no-flexbox.no-flexboxlegacy .live-stream__preview-button {
top: 50%;
right: auto;
bottom: auto;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.live-stream__content {
padding: 40px
}
.live-stream__header {
margin-bottom: 40px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.live-stream__heading {
-ms-flex: 1 0 auto;
flex: 1 0 auto
}
.live-stream__tabs {
display: inline-block;
margin-right: 20px;
vertical-align: middle
}
.live-stream__tab {
position: relative;
display: inline-block;
margin: 0
}
.live-stream__tab:after {
content: '';
position: absolute;
border-radius: 50%;
transition: all .4s cubic-bezier(.165, .84, .44, 1);
box-shadow: 0 0 0 10px inset #d1363a;
right: 0;
top: 0;
width: 12px;
height: 12px;
z-index: 1
}
.live-stream__tab.active:after {
box-shadow: 0 0 0 2px #252423, 0 0 0 6px #d1363a;
width: 100%;
height: 100%
}
.live-stream__tab.active button {
background-position: 100% 100%
}
.live-stream__tab+.live-stream__tab {
margin-left: 10px
}
.live-stream__close {
vertical-align: middle
}
.location-item {
position: relative;
display: block
}
.location-item:active,
.location-item:focus,
.location-item:hover {
text-decoration: none
}
.location-item:active .location-item__heading span,
.location-item:focus .location-item__heading span,
.location-item:hover .location-item__heading span {
background-image: url(/assets/img/structure/149a1d9c51c7bf69816f75699be94a7e/distressed-underline.svg);
background-repeat: repeat-x;
background-position: 0 100%;
background-size: 680px 3px;
display: inline
}
.location-item__time .clock-icon:first-child {
vertical-align: -3px;
margin-right: 5px
}
@media screen and (min-width:960px) {
.location-item__time .clock-icon:first-child {
vertical-align: -4px;
margin-right: 8px
}
}
.location-item--grid {
text-align: center;
padding: 20px;
overflow: hidden;
max-width: 360px;
margin: auto;
-webkit-clip-path: polygon(0 4px, 100% 0, calc(100% - 3px) 100%, 0 calc(100% - 4px));
clip-path: polygon(0 4px, 100% 0, calc(100% - 3px) 100%, 0 calc(100% - 4px))
}
.grid__item:nth-child(even) .location-item--grid {
-webkit-clip-path: polygon(0 0, 100% 4px, calc(100% - 3px) calc(100% - 3px), 4px 100%);
clip-path: polygon(0 0, 100% 4px, calc(100% - 3px) calc(100% - 3px), 4px 100%)
}
.location-item--grid .location-item__content {
position: relative;
padding: 30px;
background-image: url(/assets/img/content/f6f63bd5627ba9472d26042eb8dcf50c/brush-panel-bg.svg);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% 100%;
z-index: 2;
margin-top: 12px
}
.location-item--grid.location-item--muted-hover .location-item__content {
background-image: url(/assets/img/content/56e8a3105c3bb0c4ecd89bbc083c7fdf/brush-panel-bg--muted.svg)
}
.location-item--grid .location-item__heading {
margin-top: 10px
}
.location-item--grid .location-item__meta {
margin-top: 6px
}
.location-item--grid .location-item__image {
padding-top: 20px;
max-width: 260px;
margin: auto
}
.location-item--grid .location-item__bg {
position: absolute;
background-size: cover;
background-position: 50% 25%;
background-repeat: no-repeat;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
-ms-transform: scale(1.1);
transform: scale(1.1);
transition: all .3s ease-out;
opacity: 0
}
.location-item--grid:active .location-item__bg,
.location-item--grid:focus .location-item__bg,
.location-item--grid:hover .location-item__bg {
-ms-transform: scale(1);
transform: scale(1);
opacity: 1
}
.location-item--grid .location-item__time,
.location-item--grid .location-item__weather {
vertical-align: top;
display: inline-block
}
.location-item--grid .location-item__time {
position: relative;
margin-top: 2px
}
.location-item--grid .location-item__weather+.location-item__time {
margin-left: 10px;
padding-left: 10px
}
@media screen and (min-width:550px) {
.location-item--grid .location-item__weather+.location-item__time {
margin-left: 20px;
padding-left: 20px
}
}
.location-item--grid .location-item__weather+.location-item__time:before {
content: '';
position: absolute;
top: 0;
left: -1px;
width: 2px;
height: 25px;
background-color: #8a8887
}
.location-item--grid .location-item__list-eyebrow {
display: none
}
.location-item--grid .location-item__cta {
display: inline-block;
margin-top: 10px
}
.location-item--list {
margin-bottom: 15px;
transition: background-color .3s ease-out;
padding: 5px 20px
}
.location-item--list .location-item__content {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between
}
@media screen and (min-width:550px) {
.location-item--list {
padding-left: 40px;
padding-right: 40px;
margin-left: 20px;
margin-right: 20px
}
}
@media screen and (min-width:960px) {
.location-item--list {
margin-left: 80px;
margin-right: 80px
}
}
.location-item--list:active,
.location-item--list:focus,
.location-item--list:hover {
background-color: #dbd9d6;
transition-duration: .1s
}
.location-item--list .location-item__bg,
.location-item--list .location-item__grid-eyebrow,
.location-item--list .location-item__image {
display: none
}
.location-item--list .location-item__heading {
margin-top: 0;
-ms-flex: 2 0 0px;
flex: 2 0 0
}
.location-item--list .location-item__list-eyebrow {
-ms-flex: 1 0 0px;
flex: 1 0 0;
color: #8a8887;
text-align: right;
font-size: .875rem
}
@media screen and (min-width:550px) {
.location-item--list .location-item__list-eyebrow {
text-align: left;
font-size: 1rem
}
}
.location-item--list .location-item__meta {
-ms-flex: 1 0 0px;
flex: 1 0 0;
text-align: right
}
.location-item--list .location-item__meta {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.location-item--list .location-item__weather {
-ms-flex: 1 0 auto;
flex: 1 0 auto
}
.location-item--list .location-item__weather .icon {
width: 24px !important;
line-height: 24px !important;
height: 24px !important
}
.location-item--list .location-item__time {
-ms-flex: 1 0 auto;
flex: 1 0 auto
}
.manifesto {
position: relative;
background-color: #dbd9d6;
background-image: url(/assets/img/structure/6d79447d110ef217a5a784efe55ba29b/texture-light@2x.jpg);
background-size: 50%;
background-repeat: repeat;
padding-top: 40px
}
@media screen and (min-width:550px) {
.manifesto {
padding-top: 50px
}
}
@media screen and (min-width:1280px) {
.manifesto {
padding-top: 80px
}
}
.manifesto__introduction {
padding-bottom: 30px
}
@media screen and (min-width:550px) {
.manifesto__introduction {
padding-bottom: 40px
}
}
@media screen and (min-width:960px) {
.manifesto__introduction {
padding-bottom: 50px
}
}
@media screen and (min-width:1280px) {
.manifesto__introduction {
padding-bottom: 60px
}
}
@media screen and (min-width:800px) {
.manifesto__introduction:before {
content: '';
position: absolute;
right: 0;
top: 20px;
background-size: cover;
background-repeat: no-repeat;
width: 290.40000000000003px;
height: 221.10000000000002px
}
.manifesto__introduction .text-with-cta {
position: relative
}
}
@media screen and (min-width:960px) {
.manifesto__introduction:before {
top: 40px;
width: 440px;
height: 335px
}
}
.manifesto__content {
position: relative;
background-color: #2b2a29
}
.widget__wrapper--hero+.widget__wrapper--manifesto .widget {
margin-top: 0 !important
}
.widget__wrapper--hero+.widget__wrapper--manifesto .manifesto:before {
content: '';
position: absolute;
width: 100%;
left: 0;
bottom: 100%;
height: 200px;
background-color: #dbd9d6;
background-image: url(/assets/img/structure/6d79447d110ef217a5a784efe55ba29b/texture-light@2x.jpg);
background-size: 50%;
background-repeat: repeat
}
@media screen and (min-width:960px) {
.widget__wrapper--hero+.widget__wrapper--manifesto .manifesto:before {
height: 100vh
}
}
.manifesto-background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0
}
.manifesto-background__image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%
}
.manifesto-background__image.is-previous {
z-index: 1;
display: block
}
.manifesto-background__image.is-active {
z-index: 2;
display: block
}
.cssanimations .manifesto-background.has-user-interaction .manifesto-background__image.is-active {
-webkit-mask: url(/assets/img/content/watercolour-sprite.png);
mask: url(/assets/img/content/watercolour-sprite.png);
-webkit-mask-size: 2300% 100%;
mask-size: 2300% 100%;
-webkit-mask-position: 100% 0;
mask-position: 100% 0;
-webkit-animation: watercolour-reveal 1.4s 1s steps(22) forwards;
animation: watercolour-reveal 1.4s 1s steps(22) forwards;
opacity: 0
}
.manifesto-item {
position: relative;
-ms-flex: 1;
flex: 1;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 20px;
overflow: hidden;
max-height: 100%
}
@media screen and (min-width:550px) and (max-width:959px) {
.manifesto-item {
padding: 40px
}
}
@media screen and (max-width:959px) {
.manifesto-item {
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%
}
.manifesto-item:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: .5;
background-color: #2b2a29;
background-image: url(/assets/img/structure/7d776943173a38525a926c9d1cafde3c/texture-dark@2x.jpg);
background-size: 50%;
background-repeat: repeat;
transition: opacity .3s ease-out
}
}
@media screen and (min-width:960px) {
.manifesto-item {
padding: 0;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
transition: flex .8s 0s cubic-bezier(.86, 0, .07, 1), background .8s .2s cubic-bezier(.86, 0, .07, 1);
transition: flex .8s 0s cubic-bezier(.86, 0, .07, 1), background .8s .2s cubic-bezier(.86, 0, .07, 1), -ms-flex .8s 0s cubic-bezier(.86, 0, .07, 1)
}
.manifesto-item+.manifesto-item:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 100%;
background-image: url(/assets/img/structure/5f8b11d3ba077f8b9d3b459d4a17c5fb/distressed-stroke-vertical.svg);
background-repeat: repeat-y;
background-position: 50% 50%;
background-size: 2px 420px;
opacity: .4
}
}
.manifesto-item.is-active {
background: rgba(37, 36, 35, .75);
transition-delay: 0s, 1s
}
@media screen and (max-width:959px) {
.manifesto-item.is-active:before {
opacity: 1
}
}
@media screen and (min-width:960px) {
.manifesto-item.is-active {
-ms-flex: 2;
flex: 2
}
}
.manifesto-item__overlay-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: 0;
border: 0;
height: 100%;
width: 100%;
-webkit-tap-highlight-color: transparent
}
.manifesto-item__preview-content .manifesto-item__expander-content__eyebrow-desktop {
min-height: 0
}
.manifesto-item.is-active .manifesto-item__preview-content {
display: none
}
.manifesto-item__preview-content .heading {
text-shadow: 0 0 10px rgba(43, 42, 41, .5)
}
@media screen and (min-width:960px) {
.manifesto-item__preview-content {
position: absolute;
top: 40vh;
left: 20px;
right: 20px;
max-width: 400px;
margin: auto;
text-align: center
}
.manifesto-item__preview-content .heading {
opacity: 1;
transition: opacity .3s 2s ease-out;
min-height: 86px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 1.5rem
}
.manifesto-item__preview-content .eyebrow {
opacity: 0;
transition: opacity .3s .2s ease-out
}
.manifesto-item.is-active .manifesto-item__preview-content .heading,
.manifesto-item.is-inactive .manifesto-item__preview-content .heading {
display: block;
opacity: 0;
transition-delay: .1s
}
.manifesto-item.is-active .manifesto-item__preview-content .eyebrow,
.manifesto-item.is-inactive .manifesto-item__preview-content .eyebrow {
opacity: 1
}
}
.manifesto-item__expander-content {
opacity: 0;
transition: opacity .3s 0s ease-out;
display: none;
width: 100%
}
.manifesto-item.is-active .manifesto-item__expander-content {
position: relative;
display: block;
opacity: 1;
transition-delay: 1s
}
@media screen and (min-width:960px) {
.manifesto-item__expander-content {
display: none;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
position: relative;
padding: 20px;
text-align: center;
max-width: 500px
}
.manifesto-item.is-active .manifesto-item__expander-content {
display: -ms-flexbox;
display: flex;
overflow: hidden;
-webkit-animation: manifesto-reveal-content 1s ease-out 1 forwards;
animation: manifesto-reveal-content 1s ease-out 1 forwards
}
.manifesto-item__expander-content>div:first-child {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-direction: column;
flex-direction: column;
max-width: 100%
}
.manifesto-item__expander-content>div:first-child .eyebrow {
max-width: 100%
}
.cssanimations .manifesto-item__expander-content>div:first-child .eyebrow {
-webkit-animation: reveal-up 1s 1.2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s 1.2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0
}
.manifesto-item__expander-content>div:first-child .heading {
text-shadow: 0 0 10px rgba(43, 42, 41, .5);
margin: 10px 0;
max-width: 100%
}
.cssanimations .manifesto-item__expander-content>div:first-child .heading {
-webkit-animation: reveal-up 1s 1.4s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s 1.4s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0
}
.manifesto-item__expander-content>div:first-child .copy {
text-shadow: 0 0 2px rgba(43, 42, 41, .8);
max-width: 100%;
white-space: pre-wrap
}
.cssanimations .manifesto-item__expander-content>div:first-child .copy {
-webkit-animation: reveal-up 1s 1.6s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s 1.6s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0
}
.manifesto-item__expander-content>div:last-child {
position: relative;
z-index: 2;
-ms-flex: 0 1 0px;
flex: 0 1 0
}
.cssanimations .manifesto-item__expander-content>div:last-child {
-webkit-animation: mask-reveal-from-right 1s 2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s 2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.manifesto-item__expander-content>div:last-child .related-content {
margin-top: 10px
}
}
.manifesto-item__expander-content .separator {
margin: 20px 0
}
@media screen and (min-width:550px) {
.manifesto-item__expander-content .separator {
margin: 40px 0
}
}
@media screen and (max-width:959px) {
.manifesto-item__expander-content .related-content {
background: 0 0;
padding: 0;
margin-top: 20px;
min-height: 0
}
.manifesto-item__expander-content>div:first-child {
max-width: 500px
}
}
.manifesto-item__expander-content__eyebrow-mobile {
display: block;
margin: 0;
padding: 0
}
@media screen and (min-width:960px) {
.manifesto-item__expander-content__eyebrow-mobile {
display: none
}
}
.manifesto-item__expander-content__eyebrow-desktop {
display: none;
margin: 0;
padding: 0;
height: 0
}
@media screen and (min-width:960px) {
.manifesto-item__expander-content__eyebrow-desktop {
display: block;
margin: 20px 0
}
}
.manifesto-item__text {
line-height: 1.3;
text-align: left;
color: #e7e6e3
}
.manifesto-item__text h1 {
color: #e7e6e3
}
.manifesto-item__text h2 {
color: #e7e6e3
}
.manifesto-item__text h3 {
color: #e7e6e3
}
.manifesto-item__text p,
.manifesto-item__text ul {
margin-top: 5px
}
.manifesto-item__text.visible--desktop {
display: none
}
@media screen and (min-width:960px) {
.manifesto-item__text {
line-height: 1.636;
font-size: 1rem
}
.manifesto-item__text.visible--desktop {
display: block
}
.manifesto-item__text.visible--mobile {
display: none
}
}
.manifesto-item__expander-content--button {
margin-top: 20px;
margin-bottom: 20px;
z-index: 50
}
@media screen and (min-width:960px) {
.manifesto-item__toggle-icon {
display: none
}
}
.manifesto-item__primary-heading {
margin: 10px 0;
position: relative;
-webkit-animation: pulse 1.5s infinite;
animation: pulse 1.5s infinite;
padding: 10px 5px;
border-radius: 5px
}
.manifesto-item__primary-heading.manifesto-item__primary-heading--extra-padding {
padding-top: 25px
}
@media screen and (min-width:960px) {
.manifesto-item__primary-heading.manifesto-item__primary-heading--extra-padding {
padding-top: 0
}
}
.manifesto-item__secondary-heading {
margin: 10px 0
}
@media screen and (min-width:960px) {
.manifesto-item__secondary-heading {
font-size: 1.9rem;
opacity: 1
}
.manifesto-item.is-inactive .manifesto-item__secondary-heading {
opacity: 0
}
}
.manifesto-item__mobile-bgk {
width: 100%;
height: 100%;
display: block;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute
}
.manifesto-item__mobile-bgk:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #000;
opacity: .5
}
.manifesto-item__mobile-bgk.manifesto-item__mobile-bgk--hidden {
display: none
}
@media screen and (min-width:960px) {
.manifesto-item__mobile-bgk {
display: none
}
}
.manifesto-item__content {
position: relative;
color: #e7e6e3;
width: 100%
}
@media screen and (min-width:960px) {
.manifesto-item__content {
padding: 0 20px;
text-align: center
}
.manifesto-item.is-active .manifesto-item__content {
transition-delay: 0s
}
.manifesto-item__content .eyebrow {
white-space: nowrap
}
.manifesto-item__content .related-content {
margin: auto;
z-index: 1
}
}
.manifesto-item__toggle-icon {
position: absolute;
top: 20px;
right: 20px;
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 28px;
vertical-align: middle;
border: 1px solid #e7e6e3;
text-align: center
}
@media screen and (min-width:550px) and (max-width:959px) {
.manifesto-item__toggle-icon {
top: 40px;
right: 40px
}
}
.manifesto-item__toggle-icon .icon {
vertical-align: baseline
}
.manifesto-item__toggle-icon path {
fill: #e7e6e3
}
.manifesto-item.is-active .manifesto-item__toggle-icon {
background: #e7e6e3;
cursor: pointer
}
.manifesto-item.is-active .manifesto-item__toggle-icon path {
fill: #2b2a29
}
.manifesto-items:has(.is-active) .manifesto-item__primary-heading {
-webkit-animation: none;
animation: none
}
@-webkit-keyframes manifesto-reveal-ctabutton {
0% {
opacity: 0
}
49.9% {
opacity: 0
}
50% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes manifesto-reveal-ctabutton {
0% {
opacity: 0
}
49.9% {
opacity: 0
}
50% {
opacity: 0
}
100% {
opacity: 1
}
}
@-webkit-keyframes manifesto-reveal-content {
0% {
max-height: 0
}
49.9% {
max-height: 0
}
50% {
max-height: none
}
100% {
max-height: none
}
}
@keyframes manifesto-reveal-content {
0% {
max-height: 0
}
49.9% {
max-height: 0
}
50% {
max-height: none
}
100% {
max-height: none
}
}
@-webkit-keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, .1)
}
100% {
box-shadow: 0 0 7px 7px rgba(255, 255, 255, 0)
}
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, .1)
}
100% {
box-shadow: 0 0 7px 7px rgba(255, 255, 255, 0)
}
}
.manifesto-items {
position: relative;
height: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
z-index: 3
}
@media screen and (min-width:960px) {
.manifesto-items {
-ms-flex-direction: row;
flex-direction: row;
min-height: 800px
}
}
@media screen and (min-width:1440px) {
.manifesto-items {
height: calc(100vh - 90px)
}
}
.media-caption {
display: table;
text-align: left;
position: relative;
background-image: url(/assets/img/content/f6f63bd5627ba9472d26042eb8dcf50c/brush-panel-bg.svg);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% 100%;
width: 320px;
min-height: 100px;
padding: 20px 40px 15px
}
.media-caption__inner {
display: table-cell;
vertical-align: middle
}
.media-caption__inner .heading.heading--7 {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em
}
[lang=cs_CZ] .media-caption__inner .heading.heading--7,
[lang=hu_HU] .media-caption__inner .heading.heading--7,
[lang=pl_PL] .media-caption__inner .heading.heading--7,
[lang=tr_tr] .media-caption__inner .heading.heading--7,
[lang=vi_vi] .media-caption__inner .heading.heading--7,
html[lang=cs] .media-caption__inner .heading.heading--7,
html[lang=hu] .media-caption__inner .heading.heading--7,
html[lang=pl] .media-caption__inner .heading.heading--7,
html[lang=tr] .media-caption__inner .heading.heading--7,
html[lang=vi] .media-caption__inner .heading.heading--7 {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .media-caption__inner .heading.heading--7,
html[lang=ko] .media-caption__inner .heading.heading--7 {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .media-caption__inner .heading.heading--7,
html[lang=th] .media-caption__inner .heading.heading--7 {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .media-caption__inner .heading.heading--7,
html[lang=ja] .media-caption__inner .heading.heading--7 {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .media-caption__inner .heading.heading--7,
[lang=zh-hant] .media-caption__inner .heading.heading--7,
html[lang=zh-cn] .media-caption__inner .heading.heading--7,
html[lang=zh-hant] .media-caption__inner .heading.heading--7 {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
@media screen and (max-width:959px) {
.media-caption--small-minimal {
background: 0 0;
padding: 0;
min-height: 0
}
.media-caption--small-minimal .eyebrow-text {
color: #d3d1cf
}
.media-caption--small-minimal .heading {
color: #e7e6e3
}
}
.media-overlay {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 3000001;
background-color: #252423;
color: #e7e6e3;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center
}
.media-overlay.is-active {
display: -ms-flexbox;
display: flex
}
.no-flexbox .media-overlay.is-active {
display: block
}
.media-overlay--no-ratio {
-ms-flex-align: start;
align-items: flex-start
}
.media-overlay__close {
position: absolute;
top: 20px;
right: 20px;
z-index: 1
}
@media screen and (min-width:550px) {
.media-overlay__close {
top: 40px;
right: 40px
}
}
.media-overlay__inner {
overflow-y: auto;
height: 100%;
width: 100%;
transform: translateZ(0);
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column
}
.media-overlay__content {
max-width: 1440px;
margin: 0 auto;
padding: 0 20px;
display: -ms-flexbox;
display: flex;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%
}
@media screen and (min-width:550px) {
.media-overlay__content {
padding: 0 40px
}
}
.media-overlay__header {
padding: 20px
}
@media screen and (min-width:550px) {
.media-overlay__header {
padding: 40px
}
}
.media-overlay__header .heading {
margin-top: 2px;
font-weight: 800
}
.office-list {
max-width: 1440px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px
}
@media screen and (min-width:960px) {
.office-list {
padding-left: 40px;
padding-right: 40px
}
}
.office-list__filters,
.office-list__results {
margin-top: 20px
}
@media screen and (min-width:550px) {
.office-list__filters,
.office-list__results {
margin-top: 40px
}
}
@media screen and (min-width:1440px) {
.office-list__filters,
.office-list__results {
margin-top: 60px
}
}
.office-locations {
background-color: #252423;
background-image: url(/assets/img/content/f249c00fc76e35bb08058b21be975eb3/brown-bg-texture.jpeg);
background-repeat: repeat;
background-size: 80%;
padding-bottom: 40px;
overflow-x: hidden
}
@media screen and (min-width:550px) {
.office-locations {
padding-bottom: 80px
}
}
@media screen and (min-width:960px) {
.office-locations {
padding-bottom: 0
}
}
.office-locations__globe {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 280px;
height: 280px;
cursor: all-scroll
}
@media screen and (min-width:550px) {
.office-locations__globe {
width: 500px;
height: 500px
}
}
@media screen and (min-width:1280px) {
.office-locations__globe {
width: 700px;
height: 700px
}
}
.office-locations canvas+div {
overflow: visible !important
}
.office-locations__wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center
}
@media screen and (min-width:960px) {
.office-locations__wrapper {
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: justify;
justify-content: space-between;
min-height: 700px
}
}
@media screen and (min-width:1280px) {
.office-locations__wrapper {
min-height: 800px
}
}
.office-locations__content {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
gap: 13px
}
.office-locations__title {
font-family: 'Riot Sans Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-size: 44px;
line-height: 48px;
color: #e7e6e3
}
[lang=cs_CZ] .office-locations__title,
[lang=hu_HU] .office-locations__title,
[lang=pl_PL] .office-locations__title,
[lang=tr_tr] .office-locations__title,
[lang=vi_vi] .office-locations__title,
html[lang=cs] .office-locations__title,
html[lang=hu] .office-locations__title,
html[lang=pl] .office-locations__title,
html[lang=tr] .office-locations__title,
html[lang=vi] .office-locations__title {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .office-locations__title,
html[lang=ko] .office-locations__title {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .office-locations__title,
html[lang=th] .office-locations__title {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .office-locations__title,
html[lang=ja] .office-locations__title {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .office-locations__title,
[lang=zh-hant] .office-locations__title,
html[lang=zh-cn] .office-locations__title,
html[lang=zh-hant] .office-locations__title {
font-family: 'Riot Sans CN', sans-serif
}
.office-locations__body {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-size: 18px;
line-height: 27px;
color: #e7e6e3;
padding-bottom: 12px
}
[lang=cs_CZ] .office-locations__body,
[lang=hu_HU] .office-locations__body,
[lang=pl_PL] .office-locations__body,
[lang=tr_tr] .office-locations__body,
[lang=vi_vi] .office-locations__body,
html[lang=cs] .office-locations__body,
html[lang=hu] .office-locations__body,
html[lang=pl] .office-locations__body,
html[lang=tr] .office-locations__body,
html[lang=vi] .office-locations__body {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .office-locations__body,
html[lang=ko] .office-locations__body {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .office-locations__body,
html[lang=th] .office-locations__body {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .office-locations__body,
html[lang=ja] .office-locations__body {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .office-locations__body,
[lang=zh-hant] .office-locations__body,
html[lang=zh-cn] .office-locations__body,
html[lang=zh-hant] .office-locations__body {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
.globe__marker-wrapper:focus,
.globe__marker-wrapper:hover {
z-index: 10000 !important
}
.globe__marker-wrapper:focus .globe__tooltip,
.globe__marker-wrapper:hover .globe__tooltip {
-webkit-animation: slide-in .3s forwards ease-in-out;
animation: slide-in .3s forwards ease-in-out
}
.globe__marker-link {
display: block;
transition: transform .1s
}
.globe__marker-link img {
width: 40px;
height: 40px;
border-radius: 100%;
background-color: #d1363a;
border: 3px solid #d1363a;
border-radius: 100%
}
.globe__marker-link:hover {
-ms-transform: scale(1.2);
transform: scale(1.2);
transition: transform .2s
}
.globe__tooltip {
font-family: 'Mark Pro', Arial, sans-serif;
opacity: 0;
visibility: hidden;
position: absolute;
min-width: 180px;
border-radius: 12px;
padding: 12px;
background: rgba(101, 100, 98, .8);
top: 50%;
left: 54px;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px)
}
[lang=ru_ru] .globe__tooltip,
html[lang=ru] .globe__tooltip {
font-family: 'Proxima Nova W10', 'Proxima Nova W02', Arial, sans-serif
}
[lang=ko_ko] .globe__tooltip,
html[lang=ko] .globe__tooltip {
font-family: RixSGo, sans-serif
}
[lang=cs_CZ] .globe__tooltip,
[lang=hu_HU] .globe__tooltip,
[lang=pl_PL] .globe__tooltip,
[lang=tr_tr] .globe__tooltip,
[lang=vi_vi] .globe__tooltip,
html[lang=cs] .globe__tooltip,
html[lang=hu] .globe__tooltip,
html[lang=pl] .globe__tooltip,
html[lang=tr] .globe__tooltip,
html[lang=vi] .globe__tooltip {
font-family: Arial, Helvetica, sans-serif;
font-weight: 700
}
[lang=th_th] .globe__tooltip,
html[lang=th] .globe__tooltip {
line-height: 1.5
}
.globe__tooltip::after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -10px;
border-width: 10px;
border-style: solid;
border-color: transparent rgba(101, 100, 98, .8) transparent transparent;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px)
}
@media screen and (max-width:550px) {
.globe__tooltip {
display: none
}
}
.globe__tooltip-city,
.globe__tooltip-country {
font-size: 22px;
letter-spacing: -.03rem;
font-weight: 600;
color: #e7e6e3
}
.globe__tooltip-country {
color: rgba(255, 255, 255, .3)
}
.globe__tooltip-positions {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
color: #e7e6e3
}
.globe__tooltip-positions span {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
font-size: 14px;
line-height: 1;
background: #403f3e;
border-radius: 50%;
width: 22px;
height: 22px;
margin-left: 8px;
min-width: 22px
}
@-webkit-keyframes slide-in {
0% {
visibility: hidden;
transform: translateY(-40%);
opacity: 0
}
100% {
visibility: visible;
transform: translateY(-50%);
opacity: 1
}
}
@keyframes slide-in {
0% {
visibility: hidden;
transform: translateY(-40%);
opacity: 0
}
100% {
visibility: visible;
transform: translateY(-50%);
opacity: 1
}
}
.office-selector {
background-color: #dbd9d6;
background-image: url(/assets/img/structure/6d79447d110ef217a5a784efe55ba29b/texture-light@2x.jpg);
background-size: 50%;
background-repeat: repeat;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
padding-top: 40px;
padding-bottom: 40px
}
@media screen and (min-width:550px) {
.office-selector {
padding-top: 50px;
padding-bottom: 50px
}
}
@media screen and (min-width:1600px) {
.office-selector {
padding-top: 80px;
padding-bottom: 80px
}
}
.our-games {
position: relative;
background-color: #1f1f1f;
color: #f9f9f9;
z-index: 0
}
.our-games h3 {
color: #f9f9f9
}
.our-games__title {
margin-bottom: 1.875rem;
text-align: center
}
.our-games__title h2 {
font-size: 1.938rem
}
@media screen and (min-width:960px) {
.our-games__title {
text-align: left;
margin-bottom: 3.75rem
}
.our-games__title h2 {
font-size: 3rem
}
}
.our-games__wrapper ul li {
margin: 0;
list-style: none;
margin-bottom: 24px
}
@media screen and (min-width:960px) {
.our-games__wrapper ul li {
margin-bottom: 50px
}
}
body.theme-arc2 .our-games {
background-color: #000;
background-position: center;
background-repeat: no-repeat;
background-image: url(/assets/img/arc2/c60afea567606edccee5e5923447d4d4/products-min.png);
background-size: cover
}
.overlay {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 20;
background-color: #2b2a29;
color: #e7e6e3;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center
}
.overlay.is-active {
display: -ms-flexbox;
display: flex
}
.overlay__close {
position: absolute;
top: 20px;
right: 20px;
z-index: 1
}
@media screen and (min-width:550px) {
.overlay__close {
top: 40px;
right: 40px
}
}
.overlay__inner {
padding: 20px;
padding-top: 3.125rem;
overflow-y: auto;
max-height: 100%;
width: 100%;
transform: translateZ(0)
}
@media screen and (min-width:550px) {
.overlay__inner {
padding: 40px;
padding-top: 5.25rem
}
}
.overlay__content {
max-width: 1440px;
margin: 0 auto
}
.page-header {
position: relative;
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
overflow: hidden
}
@media screen and (min-width:550px) {
.page-header {
padding-top: 60px;
padding-bottom: 60px
}
}
@media screen and (min-width:1280px) {
.page-header {
padding-top: 80px;
padding-bottom: 80px
}
}
@media screen and (min-width:1600px) {
.page-header {
padding-top: 100px;
padding-bottom: 100px
}
}
.page-header.has-image {
padding-bottom: 0
}
.page-header__bg {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #dbd9d6;
background-image: url(/assets/img/structure/6d79447d110ef217a5a784efe55ba29b/texture-light@2x.jpg);
background-size: 50%;
background-repeat: repeat
}
.cssanimations .page-header__bg {
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 100%);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 100%);
-webkit-animation: page-header-mask-reveal-from-top 1s 0s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: page-header-mask-reveal-from-top 1s 0s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(0 0, 100% 0, 100% .001%, 0 .001%);
clip-path: polygon(0 0, 100% 0, 100% .001%, 0 .001%);
opacity: 0
}
.page-header.has-image .page-header__bg {
bottom: calc(30%)
}
@media screen and (min-width:550px) {
.page-header__bg.has-sketch:after {
content: '';
position: absolute;
right: -30px;
bottom: -30px;
background-repeat: no-repeat;
background-size: cover;
width: 213.3px;
height: 183.15px;
transform: translateZ(0)
}
.cssanimations .page-header__bg.has-sketch:after {
-webkit-mask: url(/assets/img/content/watercolour-sprite.png);
mask: url(/assets/img/content/watercolour-sprite.png);
-webkit-mask-size: 2300% 100%;
mask-size: 2300% 100%;
-webkit-mask-position: 100% 0;
mask-position: 100% 0;
-webkit-animation: watercolour-reveal 1.4s 1.2s steps(22) forwards;
animation: watercolour-reveal 1.4s 1.2s steps(22) forwards;
opacity: 0
}
}
@media screen and (min-width:960px) {
.page-header__bg.has-sketch:after {
width: 355.5px;
height: 305.25px;
right: -100px
}
}
@media screen and (min-width:1280px) {
.page-header__bg.has-sketch:after {
width: 474px;
height: 407px;
right: 2%
}
}
.page-header.has-image .page-header__bg.has-sketch:after {
bottom: 35%
}
.cssanimations .page-header.has-image .page-header__bg.has-sketch:after {
-webkit-mask: url(/assets/img/content/watercolour-sprite.png);
mask: url(/assets/img/content/watercolour-sprite.png);
-webkit-mask-size: 2300% 100%;
mask-size: 2300% 100%;
-webkit-mask-position: 100% 0;
mask-position: 100% 0;
-webkit-animation: watercolour-reveal 1.4s 1.8s steps(22) forwards;
animation: watercolour-reveal 1.4s 1.8s steps(22) forwards;
opacity: 0
}
.page-header__inner {
position: relative
}
.page-header__eyebrow {
margin-bottom: 20px
}
.cssanimations .page-header__eyebrow {
-webkit-animation: mask-reveal-from-right 1s .8s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s .8s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
@media screen and (min-width:960px) {
.page-header__eyebrow {
margin-bottom: 30px
}
}
.cssanimations .page-header__heading {
-webkit-animation: reveal-down 1s .4s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s .4s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(-100px);
transform: translateY(-100px);
opacity: 0
}
.page-header__subheading {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em;
margin-top: 20px
}
[lang=cs_CZ] .page-header__subheading,
[lang=hu_HU] .page-header__subheading,
[lang=pl_PL] .page-header__subheading,
[lang=tr_tr] .page-header__subheading,
[lang=vi_vi] .page-header__subheading,
html[lang=cs] .page-header__subheading,
html[lang=hu] .page-header__subheading,
html[lang=pl] .page-header__subheading,
html[lang=tr] .page-header__subheading,
html[lang=vi] .page-header__subheading {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .page-header__subheading,
html[lang=ko] .page-header__subheading {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .page-header__subheading,
html[lang=th] .page-header__subheading {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .page-header__subheading,
html[lang=ja] .page-header__subheading {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .page-header__subheading,
[lang=zh-hant] .page-header__subheading,
html[lang=zh-cn] .page-header__subheading,
html[lang=zh-hant] .page-header__subheading {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
.cssanimations .page-header__subheading {
-webkit-animation: reveal-down 1s .6s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s .6s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(-100px);
transform: translateY(-100px);
opacity: 0
}
@media screen and (min-width:960px) {
.page-header__subheading {
margin-top: 30px
}
}
.page-header__thirdheading {
margin: 25px auto;
max-width: 650px;
line-height: .75
}
.page-header__thirdheading.jobHero__thirdheading {
line-height: 1.3
}
.page-header__images {
margin-top: 60px
}
@media screen and (min-width:960px) {
.page-header__images {
margin-top: 80px
}
}
@media screen and (min-width:1600px) {
.page-header__images {
margin-top: 100px
}
}
.cssanimations .page-header__images .grid__item:nth-child(1) .page-header__image {
-webkit-animation: mask-reveal-from-right 1s .9s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s .9s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.page-header__images .grid__item:nth-child(1) img {
-webkit-clip-path: polygon(2px 3px, 100% 0, calc(100% - 4px) calc(100% - 3px), 0 100%);
clip-path: polygon(2px 3px, 100% 0, calc(100% - 4px) calc(100% - 3px), 0 100%)
}
.cssanimations .page-header__images .grid__item:nth-child(2) .page-header__image {
-webkit-animation: mask-reveal-from-right 1s 1.1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s 1.1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.page-header__images .grid__item:nth-child(2) img {
-webkit-clip-path: polygon(2px 7px, calc(100% - 2px) 0, 100% calc(100% - 2px), 0 100%);
clip-path: polygon(2px 7px, calc(100% - 2px) 0, 100% calc(100% - 2px), 0 100%)
}
.page-header__image {
padding: 0 20px 10px
}
@media screen and (min-width:550px) {
.page-header__image {
padding: 0
}
}
.page-navigation {
font-family: 'Riot Sans Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-weight: 700;
margin-bottom: 40px
}
[lang=cs_CZ] .page-navigation,
[lang=hu_HU] .page-navigation,
[lang=pl_PL] .page-navigation,
[lang=tr_tr] .page-navigation,
[lang=vi_vi] .page-navigation,
html[lang=cs] .page-navigation,
html[lang=hu] .page-navigation,
html[lang=pl] .page-navigation,
html[lang=tr] .page-navigation,
html[lang=vi] .page-navigation {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .page-navigation,
html[lang=ko] .page-navigation {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .page-navigation,
html[lang=th] .page-navigation {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .page-navigation,
html[lang=ja] .page-navigation {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .page-navigation,
[lang=zh-hant] .page-navigation,
html[lang=zh-cn] .page-navigation,
html[lang=zh-hant] .page-navigation {
font-family: 'Riot Sans CN', sans-serif
}
@media screen and (min-width:550px) {
.page-navigation {
margin-bottom: 80px
}
}
@media screen and (min-width:960px) {
.page-navigation {
margin-bottom: 0
}
}
.page-navigation .separator {
width: auto;
margin-left: -20px;
margin-right: -20px
}
@media screen and (min-width:550px) {
.page-navigation .separator {
margin-top: 10px;
margin-left: -40px;
margin-right: -40px
}
}
.page-navigation__toggle {
position: relative;
border: 0;
background: 0 0;
width: 100%;
padding: 14px 0;
font-size: 16px;
color: #8a8887;
text-align: left;
padding-right: 20px
}
@media screen and (min-width:550px) {
.page-navigation__toggle {
font-size: 18px
}
}
@media screen and (min-width:960px) {
.page-navigation__toggle {
font-size: 14px
}
}
.page-navigation__toggle:active,
.page-navigation__toggle:focus,
.page-navigation__toggle:hover {
outline: 0;
text-decoration: none
}
.no-js .page-navigation__toggle {
display: none
}
.page-navigation__toggle .icon {
position: absolute;
top: 50%;
right: 0;
margin-top: -3px;
transition: transform .2s ease-out
}
.page-navigation__toggle .icon path {
fill: #8a8887
}
.page-navigation.is-active .page-navigation__toggle .icon {
-ms-transform: rotate(-180deg);
transform: rotate(-180deg)
}
@media screen and (max-width:959px) {
.js .page-navigation-group {
display: none
}
.js .page-navigation.is-active .page-navigation-group {
display: block
}
}
.page-navigation-group+.page-navigation-group {
margin-top: 20px
}
@media screen and (min-width:960px) {
.page-navigation-group+.page-navigation-group {
margin-top: 40px
}
}
.page-navigation-group__heading {
margin-bottom: 10px
}
@media screen and (min-width:960px) {
.page-navigation-group__heading {
margin-left: 20px
}
}
.page-navigation-list {
margin-bottom: 10px
}
@media screen and (min-width:550px) {
.page-navigation-list {
margin-bottom: 20px
}
}
@media screen and (max-width:959px) {
.js .page-navigation-list {
display: none
}
.js .page-navigation.is-active .page-navigation-list {
display: block
}
}
.page-navigation-list__item {
list-style: none;
margin-left: 0
}
.page-navigation-list__link {
display: inline-block;
position: relative;
color: #2b2a29;
padding: 10px 0;
font-size: 16px;
transition: color .3s ease-out
}
.page-navigation-list__link .page-navigation-list__count {
color: #8a8887
}
.page-navigation-list__link span {
color: inherit
}
.page-navigation-list__link .icon {
margin-right: 5px;
vertical-align: baseline
}
.page-navigation-list__link path {
fill: currentColor
}
@media screen and (min-width:550px) {
.page-navigation-list__link {
font-size: 18px
}
}
@media screen and (min-width:960px) {
.page-navigation-list__link {
font-size: 14px;
padding: 6px 0 5px 20px
}
.page-navigation-list__link:before {
content: '';
position: absolute;
height: 20px;
width: 4px;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
background-image: url(/assets/img/structure/ea324fbda710409b6501b211fed6df41/brush-line--vertical.svg);
background-repeat: no-repeat;
background-position: 100% 0;
background-size: 4px 20px;
display: none
}
.page-navigation-list__link.is-active:before {
display: block
}
}
.page-navigation-list__link.is-active,
.page-navigation-list__link.is-forced-active,
.page-navigation-list__link:hover {
color: #d1363a;
text-decoration: none;
transition-duration: .1s
}
.page-navigation-list__link:focus {
color: #2b2a29;
text-decoration: underline
}
.page-navigation-list__link.is-active,
.page-navigation-list__link.is-forced-active {
font-weight: 800
}
.flickity-page-dots .dot,
.pagination-dot {
border: 0;
position: relative;
display: inline-block;
width: 6px;
height: 6px;
line-height: 6px;
margin: 5px;
border-radius: 50%;
background-color: #adacaa;
opacity: .6;
transition: all .3s ease-out
}
.flickity-page-dots .dot>*,
.pagination-dot>* {
pointer-events: none
}
.flickity-page-dots .dot:before,
.pagination-dot:before {
content: '';
position: absolute;
top: -5px;
left: -5px;
width: 16px;
height: 16px
}
.flickity-page-dots .dot:focus,
.flickity-page-dots .dot:hover,
.pagination-dot:focus,
.pagination-dot:hover {
cursor: pointer;
-ms-transform: scale(1.2);
transform: scale(1.2);
transition-duration: .1s;
opacity: 1;
outline: 0
}
.flickity-page-dots .dot.is-active,
.flickity-page-dots .dot.is-selected,
.pagination-dot.is-active,
.pagination-dot.is-selected {
opacity: 1;
background-color: #d1363a
}
.pagination-dot__content {
overflow: hidden;
text-indent: 110%;
white-space: nowrap
}
.pagination-dots {
display: inline-block;
margin: auto;
vertical-align: top;
text-align: center
}
.pagination {
text-align: center
}
.pagination-item {
display: inline-block;
padding: 5px 10px;
color: #403f3e;
font-size: .75rem;
line-height: 1.667;
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em
}
[lang=cs_CZ] .pagination-item,
[lang=hu_HU] .pagination-item,
[lang=pl_PL] .pagination-item,
[lang=tr_tr] .pagination-item,
[lang=vi_vi] .pagination-item,
html[lang=cs] .pagination-item,
html[lang=hu] .pagination-item,
html[lang=pl] .pagination-item,
html[lang=tr] .pagination-item,
html[lang=vi] .pagination-item {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .pagination-item,
html[lang=ko] .pagination-item {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .pagination-item,
html[lang=th] .pagination-item {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .pagination-item,
html[lang=ja] .pagination-item {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .pagination-item,
[lang=zh-hant] .pagination-item,
html[lang=zh-cn] .pagination-item,
html[lang=zh-hant] .pagination-item {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
@media screen and (min-width:550px) {
.pagination-item {
font-size: .875rem;
line-height: 1.571
}
}
.pagination-item.is-disabled {
pointer-events: none;
color: #adacaa
}
.pagination-item.is-active {
font-weight: 700;
color: #d1363a
}
.pagination-item--ellipsis {
padding-left: 0;
padding-right: 0
}
.panel {
border-radius: 8px;
padding: 20px;
background-color: #dbd9d6
}
@media screen and (min-width:960px) {
.panel {
border-radius: 15px;
padding: 40px
}
}
.panel--dark {
background-color: #252423;
color: #e7e6e3
}
.pdf-viewer-container {
min-height: 550px;
height: calc(100vh - 160px) !important
}
.pdf-viewer-container>*+* {
margin-top: 20px
}
.pdf-viewer .grid.grid--double {
margin: 0
}
.pdf-viewer--container {
margin: 0 auto
}
@media screen and (min-width:960px) {
.pdf-viewer--container {
padding: 0 40px
}
}
.showLatestNews .pdf-viewer .grid.grid--double .grid__item.desktop-two-thirds {
padding-left: 0
}
@media screen and (min-width:960px) {
.showLatestNews .pdf-viewer--container {
padding: 0
}
}
.impact-report-pie-with-legend .grid.grid--double.grid--tablet-flex {
margin: 0 auto
}
.impact-report-pie-with-legend .grid__item {
padding-left: 0
}
.impact-report-pie-with-legend .pie-with-legend__intro {
padding-right: 20px
}
.impact-report-pie-with-legend .pie-with-legend__intro .heading--4 {
font-size: 32px;
font-family: 'Riot Sans Latin', Arial, sans-serif;
padding-bottom: 16px
}
[lang=cs_CZ] .impact-report-pie-with-legend .pie-with-legend__intro .heading--4,
[lang=hu_HU] .impact-report-pie-with-legend .pie-with-legend__intro .heading--4,
[lang=pl_PL] .impact-report-pie-with-legend .pie-with-legend__intro .heading--4,
[lang=tr_tr] .impact-report-pie-with-legend .pie-with-legend__intro .heading--4,
[lang=vi_vi] .impact-report-pie-with-legend .pie-with-legend__intro .heading--4,
html[lang=cs] .impact-report-pie-with-legend .pie-with-legend__intro .heading--4,
html[lang=hu] .impact-report-pie-with-legend .pie-with-legend__intro .heading--4,
html[lang=pl] .impact-report-pie-with-legend .pie-with-legend__intro .heading--4,
html[lang=tr] .impact-report-pie-with-legend .pie-with-legend__intro .heading--4,
html[lang=vi] .impact-report-pie-with-legend .pie-with-legend__intro .heading--4 {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .impact-report-pie-with-legend .pie-with-legend__intro .heading--4,
html[lang=ko] .impact-report-pie-with-legend .pie-with-legend__intro .heading--4 {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .impact-report-pie-with-legend .pie-with-legend__intro .heading--4,
html[lang=th] .impact-report-pie-with-legend .pie-with-legend__intro .heading--4 {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .impact-report-pie-with-legend .pie-with-legend__intro .heading--4,
html[lang=ja] .impact-report-pie-with-legend .pie-with-legend__intro .heading--4 {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .impact-report-pie-with-legend .pie-with-legend__intro .heading--4,
[lang=zh-hant] .impact-report-pie-with-legend .pie-with-legend__intro .heading--4,
html[lang=zh-cn] .impact-report-pie-with-legend .pie-with-legend__intro .heading--4,
html[lang=zh-hant] .impact-report-pie-with-legend .pie-with-legend__intro .heading--4 {
font-family: 'Riot Sans CN', sans-serif
}
.impact-report-pie-with-legend .pie-with-legend__intro .heading--6 {
font-family: 'Inter V Latin', Arial, sans-serif;
padding-bottom: 32px;
font-weight: 400;
padding-right: 20px
}
[lang=cs_CZ] .impact-report-pie-with-legend .pie-with-legend__intro .heading--6,
[lang=hu_HU] .impact-report-pie-with-legend .pie-with-legend__intro .heading--6,
[lang=pl_PL] .impact-report-pie-with-legend .pie-with-legend__intro .heading--6,
[lang=tr_tr] .impact-report-pie-with-legend .pie-with-legend__intro .heading--6,
[lang=vi_vi] .impact-report-pie-with-legend .pie-with-legend__intro .heading--6,
html[lang=cs] .impact-report-pie-with-legend .pie-with-legend__intro .heading--6,
html[lang=hu] .impact-report-pie-with-legend .pie-with-legend__intro .heading--6,
html[lang=pl] .impact-report-pie-with-legend .pie-with-legend__intro .heading--6,
html[lang=tr] .impact-report-pie-with-legend .pie-with-legend__intro .heading--6,
html[lang=vi] .impact-report-pie-with-legend .pie-with-legend__intro .heading--6 {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .impact-report-pie-with-legend .pie-with-legend__intro .heading--6,
html[lang=ko] .impact-report-pie-with-legend .pie-with-legend__intro .heading--6 {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .impact-report-pie-with-legend .pie-with-legend__intro .heading--6,
html[lang=th] .impact-report-pie-with-legend .pie-with-legend__intro .heading--6 {
font-family: 'Noto Sans Thai', sans-serif
}
[lang=ja] .impact-report-pie-with-legend .pie-with-legend__intro .heading--6,
html[lang=ja] .impact-report-pie-with-legend .pie-with-legend__intro .heading--6 {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .impact-report-pie-with-legend .pie-with-legend__intro .heading--6,
[lang=zh-hant] .impact-report-pie-with-legend .pie-with-legend__intro .heading--6,
html[lang=zh-cn] .impact-report-pie-with-legend .pie-with-legend__intro .heading--6,
html[lang=zh-hant] .impact-report-pie-with-legend .pie-with-legend__intro .heading--6 {
font-family: 'Noto Sans CN', sans-serif
}
.pie-with-legend__intro {
margin-bottom: 20px
}
.pie-with-legend__pie {
max-width: 200px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px
}
.impact-report-pie-with-legend .pie-with-legend__pie {
margin: 40px auto 0
}
@media screen and (min-width:550px) {
.pie-with-legend__pie {
margin-bottom: 0;
margin-left: 0;
max-width: 320px
}
.impact-report-pie-with-legend .pie-with-legend__pie {
padding-left: 20px
}
}
@media screen and (min-width:960px) {
.pie-with-legend__pie {
max-width: 480px
}
.impact-report-pie-with-legend .pie-with-legend__pie {
margin: 0 0 0 auto
}
}
.pie-with-legend__legend {
max-width: 480px
}
@media screen and (min-width:550px) {
.impact-report-pie-with-legend .pie-with-legend__legend {
padding-right: 20px;
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=cs_CZ] .impact-report-pie-with-legend .pie-with-legend__legend,
[lang=hu_HU] .impact-report-pie-with-legend .pie-with-legend__legend,
[lang=pl_PL] .impact-report-pie-with-legend .pie-with-legend__legend,
[lang=tr_tr] .impact-report-pie-with-legend .pie-with-legend__legend,
[lang=vi_vi] .impact-report-pie-with-legend .pie-with-legend__legend,
html[lang=cs] .impact-report-pie-with-legend .pie-with-legend__legend,
html[lang=hu] .impact-report-pie-with-legend .pie-with-legend__legend,
html[lang=pl] .impact-report-pie-with-legend .pie-with-legend__legend,
html[lang=tr] .impact-report-pie-with-legend .pie-with-legend__legend,
html[lang=vi] .impact-report-pie-with-legend .pie-with-legend__legend {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .impact-report-pie-with-legend .pie-with-legend__legend,
html[lang=ko] .impact-report-pie-with-legend .pie-with-legend__legend {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .impact-report-pie-with-legend .pie-with-legend__legend,
html[lang=th] .impact-report-pie-with-legend .pie-with-legend__legend {
font-family: 'Noto Sans Thai', sans-serif
}
[lang=ja] .impact-report-pie-with-legend .pie-with-legend__legend,
html[lang=ja] .impact-report-pie-with-legend .pie-with-legend__legend {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .impact-report-pie-with-legend .pie-with-legend__legend,
[lang=zh-hant] .impact-report-pie-with-legend .pie-with-legend__legend,
html[lang=zh-cn] .impact-report-pie-with-legend .pie-with-legend__legend,
html[lang=zh-hant] .impact-report-pie-with-legend .pie-with-legend__legend {
font-family: 'Noto Sans CN', sans-serif
}
}
.pie-with-legend__footnote {
margin-top: 20px
}
@media screen and (min-width:800px) {
.pie-with-legend__footnote {
margin-top: 30px
}
}
.cssanimations .pie-with-legend.will-animate .pie-with-legend__footnote,
.cssanimations .pie-with-legend.will-animate .pie-with-legend__intro,
.cssanimations .pie-with-legend.will-animate .pie-with-legend__legend,
.cssanimations .pie-with-legend.will-animate .pie-with-legend__pie {
visibility: hidden
}
.cssanimations .pie-with-legend.is-animated .pie-with-legend__footnote,
.cssanimations .pie-with-legend.is-animated .pie-with-legend__intro,
.cssanimations .pie-with-legend.is-animated .pie-with-legend__legend,
.cssanimations .pie-with-legend.is-animated .pie-with-legend__pie {
visibility: visible
}
.cssanimations .pie-with-legend.is-animated .pie-with-legend__pie {
-webkit-animation: reveal-up 1s .1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0
}
.cssanimations .pie-with-legend.is-animated .pie-with-legend__intro {
-webkit-animation: reveal-up 1s 0s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s 0s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0
}
.cssanimations .pie-with-legend.is-animated .pie-with-legend__legend {
-webkit-animation: reveal-up 1s .2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0
}
.cssanimations .pie-with-legend.is-animated .pie-with-legend__footnote {
-webkit-animation: reveal-up 1s .4s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .4s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0
}
.pie__chart {
position: absolute;
width: 100%;
height: 100%
}
.pie__chart>div {
width: 100%;
height: 100%
}
.product-carousel {
position: relative;
background-color: #1f1f1f;
color: #f9f9f9;
z-index: 0
}
.product-carousel h3 {
color: #f9f9f9
}
.product-carousel__title {
margin-bottom: 1.875rem;
text-align: center
}
.product-carousel__title h2 {
font-size: 1.938rem
}
@media screen and (min-width:960px) {
.product-carousel__title {
text-align: left;
margin-bottom: 3.75rem
}
.product-carousel__title h2 {
font-size: 3rem
}
}
.product-carousel__wrapper ul li {
margin: 0;
list-style: none;
margin-bottom: 24px
}
@media screen and (min-width:960px) {
.product-carousel__wrapper ul li {
margin-bottom: 50px
}
}
body.theme-arc2 .product-carousel {
background-color: #1f1f1f;
background-repeat: no-repeat;
background-image: url(/assets/img/arc2/c60afea567606edccee5e5923447d4d4/products-min.png);
background-size: cover
}
.profile-list {
max-width: 1440px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px
}
@media screen and (min-width:960px) {
.profile-list {
padding-left: 40px;
padding-right: 40px
}
}
.profile-list__heading {
margin-bottom: 10px
}
.profile-list__header {
margin-bottom: 20px
}
@media screen and (min-width:550px) {
.profile-list__header {
margin-bottom: 40px
}
}
.profile-list__action {
margin-top: 20px
}
.progress-dot {
position: relative;
display: inline-block;
width: 28px;
height: 28px;
transition: transform .3s ease-out;
transform: translateZ(0)
}
.progress-dot>* {
pointer-events: none
}
.progress-dot__content {
overflow: hidden;
text-indent: 110%;
white-space: nowrap;
position: relative;
width: 20px;
height: 20px;
margin: 4px;
border-radius: 50%;
border: 1px solid #adacaa
}
.progress-dot__content:before {
content: '';
position: absolute;
top: 5px;
left: 5px;
width: 8px;
height: 8px;
border-radius: 50%;
border: 1px solid #adacaa
}
.progress-dot__inner {
position: absolute;
top: 0;
left: 0;
width: 28px;
height: 28px;
display: inline-block;
margin: auto
}
.progress-dot__circle {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0
}
.progress-dot__track {
fill: none
}
.progress-dot__bar {
fill: none;
stroke: #d1363a;
stroke-width: 2px;
stroke-dasharray: 83px;
stroke-dashoffset: 83px
}
.progress-dot.is-active .progress-dot__bar {
-webkit-animation: progress-fill 5s linear infinite;
animation: progress-fill 5s linear infinite
}
.progress-dot.is-active.progress-dot--single-iteration .progress-dot__bar {
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1
}
@-webkit-keyframes progress-fill {
0% {
stroke-dashoffset: 83px
}
100% {
stroke-dashoffset: 0
}
}
@keyframes progress-fill {
0% {
stroke-dashoffset: 83px
}
100% {
stroke-dashoffset: 0
}
}
.randomiser {
position: relative
}
.randomiser__slide {
width: 100%
}
.randomiser__progress {
margin-top: 20px
}
.cssanimations .randomiser-enter .grid__item:nth-child(1) .randomiser-grid-item,
.cssanimations .randomiser-enter .grid__item:nth-child(1) .randomiser-list-item {
-webkit-animation: mask-reveal-from-right 1s .6s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s .6s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.cssanimations .randomiser-enter .grid__item:nth-child(2) .randomiser-grid-item,
.cssanimations .randomiser-enter .grid__item:nth-child(2) .randomiser-list-item {
-webkit-animation: mask-reveal-from-right 1s .8s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s .8s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.cssanimations .randomiser-enter .grid__item:nth-child(3) .randomiser-grid-item,
.cssanimations .randomiser-enter .grid__item:nth-child(3) .randomiser-list-item {
-webkit-animation: mask-reveal-from-right 1s 1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s 1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.randomiser-leave {
position: absolute;
top: 0
}
.cssanimations .randomiser-leave .grid__item:nth-child(1) .randomiser-grid-item,
.cssanimations .randomiser-leave .grid__item:nth-child(1) .randomiser-list-item {
-webkit-animation: mask-hide-to-left 1s 0s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-hide-to-left 1s 0s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}
.cssanimations .randomiser-leave .grid__item:nth-child(2) .randomiser-grid-item,
.cssanimations .randomiser-leave .grid__item:nth-child(2) .randomiser-list-item {
-webkit-animation: mask-hide-to-left 1s .2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-hide-to-left 1s .2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}
.cssanimations .randomiser-leave .grid__item:nth-child(3) .randomiser-grid-item,
.cssanimations .randomiser-leave .grid__item:nth-child(3) .randomiser-list-item {
-webkit-animation: mask-hide-to-left 1s .4s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-hide-to-left 1s .4s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}
.randomiser-grid-item {
position: relative
}
.randomiser-grid-item__image {
overflow: hidden;
position: relative;
background-color: #2b2a29
}
.randomiser-grid-item__image img {
transition: all .3s ease-out
}
.randomiser-grid-item__content {
min-height: 180px
}
.randomiser-grid-item__content .eyebrow {
margin-top: 40px
}
.randomiser-grid-item__content .heading {
margin-top: 20px
}
.randomiser-grid-item__content .button {
margin-top: 10px
}
.randomiser-grid-item__overlay-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1
}
.randomiser-grid-item__overlay-link:active~.randomiser-grid-item__image img,
.randomiser-grid-item__overlay-link:focus~.randomiser-grid-item__image img,
.randomiser-grid-item__overlay-link:hover~.randomiser-grid-item__image img {
transition-duration: .1s;
-ms-transform: scale(1.05);
transform: scale(1.05);
opacity: .4
}
.randomiser-grid-item__overlay-link:active~.randomiser-grid-item__content .heading span,
.randomiser-grid-item__overlay-link:focus~.randomiser-grid-item__content .heading span,
.randomiser-grid-item__overlay-link:hover~.randomiser-grid-item__content .heading span {
background-image: url(/assets/img/structure/149a1d9c51c7bf69816f75699be94a7e/distressed-underline.svg);
background-repeat: repeat-x;
background-position: 0 100%;
background-size: 680px 3px;
display: inline
}
.randomiser-list-item {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
padding-top: 20px;
padding-bottom: 20px;
color: #e7e6e3;
background-image: url(/assets/img/structure/ec52d55f0f379518c25d286fb69f4ea6/distressed-stroke.svg);
background-repeat: repeat-x;
background-position: 50% 100%;
background-size: 420px 2px
}
.grid__item:first-child>.randomiser-list-item:before {
content: '';
height: 2px;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-image: url(/assets/img/structure/ec52d55f0f379518c25d286fb69f4ea6/distressed-stroke.svg);
background-repeat: repeat-x;
background-position: 50% 100%;
background-size: 420px 2px
}
.randomiser-list-item__image {
-ms-flex: 1 0 0px;
flex: 1 0 0
}
@media screen and (min-width:960px) {
.randomiser-list-item__image {
-ms-flex: 3 0 0px;
flex: 3 0 0
}
}
.randomiser-list-item__image-inner {
overflow: hidden;
position: relative;
background-color: #2b2a29;
max-width: 240px;
margin-right: 20px
}
.randomiser-list-item__image-inner img {
transition: all .3s ease-out
}
.randomiser-list-item__heading {
-ms-flex: 2 0 0px;
flex: 2 0 0
}
@media screen and (min-width:960px) {
.randomiser-list-item__heading {
-ms-flex: 3 0 0px;
flex: 3 0 0
}
}
.randomiser-list-item__content {
font-size: .875rem;
-ms-flex: 1 0 0px;
flex: 1 0 0;
min-height: 48px
}
@media screen and (min-width:960px) {
.randomiser-list-item__content {
-ms-flex: 2 0 0px;
flex: 2 0 0;
min-height: 54px
}
}
.randomiser-list-item__overlay-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1
}
.randomiser-list-item__overlay-link:active~.randomiser-list-item__image img,
.randomiser-list-item__overlay-link:focus~.randomiser-list-item__image img,
.randomiser-list-item__overlay-link:hover~.randomiser-list-item__image img {
transition-duration: .1s;
-ms-transform: scale(1.05);
transform: scale(1.05);
opacity: .4
}
.related-content {
text-align: left;
position: relative;
background-image: url(/assets/img/content/92cb6b31fbbae3b8fb8b9a7cfba5eb36/brush-panel-bg--dark.svg);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% 100%;
max-width: 320px;
min-height: 100px;
padding: 30px 20px 20px
}
.related-content .heading {
color: #e7e6e3;
margin-bottom: 2px
}
.related-content .button span,
.related-content .heading span {
border-bottom: 1px solid transparent;
transition: border-color .3s ease-out
}
.related-content__overlay-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1
}
.related-content__overlay-link:active~.related-content__icon .brush-icon__bg path,
.related-content__overlay-link:focus~.related-content__icon .brush-icon__bg path,
.related-content__overlay-link:hover~.related-content__icon .brush-icon__bg path {
fill: #d1363a;
transition-duration: .1s
}
.related-content__overlay-link:active~.related-content__icon .brush-icon__type path,
.related-content__overlay-link:focus~.related-content__icon .brush-icon__type path,
.related-content__overlay-link:hover~.related-content__icon .brush-icon__type path {
fill: #e7e6e3;
transition-duration: .1s
}
.related-content__overlay-link:active~.related-content__content .button span,
.related-content__overlay-link:active~.related-content__content .heading span,
.related-content__overlay-link:focus~.related-content__content .button span,
.related-content__overlay-link:focus~.related-content__content .heading span,
.related-content__overlay-link:hover~.related-content__content .button span,
.related-content__overlay-link:hover~.related-content__content .heading span {
border-color: currentColor;
transition-duration: .1s
}
.related-content__content,
.related-content__icon {
overflow: hidden
}
.related-content__icon {
float: left;
margin-right: 10px
}
@media screen and (min-width:550px) {
.related-content__icon {
margin-right: 20px
}
}
.responsive-media {
position: relative;
height: 0;
overflow: hidden;
padding-bottom: 100%;
text-align: left;
width: 100%
}
.responsive-media>img {
width: 100%
}
.responsive-media>iframe {
position: absolute;
width: 100%;
height: 100%
}
.results-header {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: baseline;
align-items: baseline;
padding-bottom: 10px;
margin-bottom: 20px
}
@media screen and (min-width:550px) {
.results-header {
margin-bottom: 40px
}
}
.results-header .button,
.results-header .heading {
display: inline-block
}
.results-header .heading span {
color: #8a8887
}
.results-header .separator {
position: absolute;
bottom: 0;
left: 0;
right: 0
}
.results-header__anchor {
position: absolute;
top: -20px
}
@media screen and (min-width:960px) {
.results-header__anchor {
top: -100px
}
}
.ruin-smoke-container {
display: none
}
.theme-ruination .ruin-smoke-container {
display: block
}
.card-grid .ruin-smoke-container {
position: absolute;
top: -40px;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
overflow: hidden
}
.card-grid .ruin-smoke-container__inner {
position: absolute;
max-width: 1440px;
left: 0;
right: 0;
margin: auto;
top: 0;
bottom: 0
}
.card-grid .ruin-smoke-1 {
position: absolute;
top: 20px;
left: -20%;
background-image: url(/assets/img/content/theme/ruination/smoke/7ed68c9f86ab7912208fa7e4b5ecee2c/smoke-1.svg);
background-size: contain;
background-repeat: no-repeat;
width: 400px;
height: 93px
}
@media screen and (min-width:800px) {
.card-grid .ruin-smoke-1 {
width: 640px;
height: 149px
}
}
@media screen and (min-width:960px) {
.card-grid .ruin-smoke-1 {
width: 800px;
height: 186px
}
}
@media screen and (min-width:800px) {
.card-grid .ruin-smoke-1 {
left: -50%;
-webkit-animation: smoke-billow-1 60s 0s 5 ease-in-out;
animation: smoke-billow-1 60s 0s 5 ease-in-out
}
}
.card-grid .ruin-smoke-2 {
position: absolute;
top: 20px;
right: -20%;
background-image: url(/assets/img/content/theme/ruination/smoke/29105cdc8b5f01c00128486eef8d5f5d/smoke-5.svg);
background-size: contain;
background-repeat: no-repeat;
width: 400px;
height: 66px
}
@media screen and (min-width:800px) {
.card-grid .ruin-smoke-2 {
width: 640px;
height: 105px
}
}
@media screen and (min-width:960px) {
.card-grid .ruin-smoke-2 {
width: 800px;
height: 131px
}
}
@media screen and (min-width:800px) {
.card-grid .ruin-smoke-2 {
right: -50%;
-webkit-animation: smoke-billow-2 60s -40s 5 ease-in-out;
animation: smoke-billow-2 60s -40s 5 ease-in-out
}
}
.card-grid .ruin-smoke-3 {
position: absolute;
top: 0;
right: 50%;
display: none;
background-image: url(/assets/img/content/theme/ruination/smoke/e5607790f9987168b5813e2c626504ef/smoke-3.svg);
background-size: contain;
background-repeat: no-repeat;
width: 400px;
height: 85px
}
@media screen and (min-width:800px) {
.card-grid .ruin-smoke-3 {
width: 640px;
height: 135px
}
}
@media screen and (min-width:960px) {
.card-grid .ruin-smoke-3 {
width: 800px;
height: 169px
}
}
@media screen and (min-width:800px) {
.card-grid .ruin-smoke-3 {
-webkit-animation: smoke-billow-3 60s -20s 5 ease-in-out;
animation: smoke-billow-3 60s -20s 5 ease-in-out;
display: block
}
}
.card-grid .ruin-smoke-4 {
position: absolute;
top: 0;
left: 40%;
display: none;
background-image: url(/assets/img/content/theme/ruination/smoke/bcd54caa178f34eaaf4edfbed91b0d56/smoke-6.svg);
background-size: contain;
background-repeat: no-repeat;
width: 400px;
height: 33px
}
@media screen and (min-width:800px) {
.card-grid .ruin-smoke-4 {
width: 640px;
height: 52px
}
}
@media screen and (min-width:960px) {
.card-grid .ruin-smoke-4 {
width: 800px;
height: 65px
}
}
@media screen and (min-width:800px) {
.card-grid .ruin-smoke-4 {
-webkit-animation: smoke-billow-4 60s -300s 5 ease-in-out;
animation: smoke-billow-4 60s -300s 5 ease-in-out;
display: block
}
}
.card-grid .ruin-smoke-5 {
position: absolute;
bottom: -10px;
left: -20%;
background-image: url(/assets/img/content/theme/ruination/smoke/a3fc33a117341004bd8f0f22512684ff/smoke-4.svg);
background-size: contain;
background-repeat: no-repeat;
width: 400px;
height: 66px;
z-index: 1
}
@media screen and (min-width:800px) {
.card-grid .ruin-smoke-5 {
width: 640px;
height: 105px
}
}
@media screen and (min-width:960px) {
.card-grid .ruin-smoke-5 {
width: 800px;
height: 131px
}
}
@media screen and (min-width:800px) {
.card-grid .ruin-smoke-5 {
left: -50%;
-webkit-animation: smoke-billow-2 60s 0s 5 ease-in-out;
animation: smoke-billow-2 60s 0s 5 ease-in-out
}
}
.card-grid .ruin-smoke-6 {
position: absolute;
bottom: 20px;
right: -20%;
background-image: url(/assets/img/content/theme/ruination/smoke/c87678a9104c012af24ce2cc4ea8db64/smoke-2.svg);
background-size: contain;
background-repeat: no-repeat;
width: 400px;
height: 48px;
z-index: 1
}
@media screen and (min-width:800px) {
.card-grid .ruin-smoke-6 {
width: 640px;
height: 76px
}
}
@media screen and (min-width:960px) {
.card-grid .ruin-smoke-6 {
width: 800px;
height: 95px
}
}
@media screen and (min-width:800px) {
.card-grid .ruin-smoke-6 {
right: -50%;
-webkit-animation: smoke-billow-1 60s -40s 5 ease-in-out;
animation: smoke-billow-1 60s -40s 5 ease-in-out
}
}
.card-grid .ruin-smoke-7 {
position: absolute;
bottom: 0;
right: 40%;
background-image: url(/assets/img/content/theme/ruination/smoke/bcd54caa178f34eaaf4edfbed91b0d56/smoke-6.svg);
background-size: contain;
background-repeat: no-repeat;
width: 400px;
height: 33px;
z-index: 1;
display: none
}
@media screen and (min-width:800px) {
.card-grid .ruin-smoke-7 {
width: 640px;
height: 52px
}
}
@media screen and (min-width:960px) {
.card-grid .ruin-smoke-7 {
width: 800px;
height: 65px
}
}
@media screen and (min-width:800px) {
.card-grid .ruin-smoke-7 {
-webkit-animation: smoke-billow-4 60s -20s 5 ease-in-out;
animation: smoke-billow-4 60s -20s 5 ease-in-out;
display: block
}
}
.card-grid .ruin-smoke-8 {
position: absolute;
bottom: -40px;
left: 40%;
z-index: 1;
background-image: url(/assets/img/content/theme/ruination/smoke/7ed68c9f86ab7912208fa7e4b5ecee2c/smoke-1.svg);
background-size: contain;
background-repeat: no-repeat;
width: 400px;
height: 93px;
display: none
}
@media screen and (min-width:800px) {
.card-grid .ruin-smoke-8 {
width: 640px;
height: 149px
}
}
@media screen and (min-width:960px) {
.card-grid .ruin-smoke-8 {
width: 800px;
height: 186px
}
}
@media screen and (min-width:800px) {
.card-grid .ruin-smoke-8 {
-webkit-animation: smoke-billow-3 60s -300s 5 ease-in-out;
animation: smoke-billow-3 60s -300s 5 ease-in-out;
display: block
}
}
.footer .ruin-smoke-container {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
z-index: 0;
overflow: hidden;
height: 50px
}
@media screen and (min-width:800px) {
.footer .ruin-smoke-container {
height: 80px
}
}
.footer .ruin-smoke-container__inner {
max-width: 1440px;
margin-left: auto;
margin-right: auto;
position: relative
}
.footer .ruin-smoke-1 {
position: absolute;
top: 20px;
left: -20%;
background-image: url(/assets/img/content/theme/ruination/smoke/c87678a9104c012af24ce2cc4ea8db64/smoke-2.svg);
background-size: contain;
background-repeat: no-repeat;
width: 400px;
height: 48px
}
@media screen and (min-width:800px) {
.footer .ruin-smoke-1 {
width: 640px;
height: 76px
}
}
@media screen and (min-width:960px) {
.footer .ruin-smoke-1 {
width: 800px;
height: 95px
}
}
@media screen and (min-width:800px) {
.footer .ruin-smoke-1 {
left: -50%;
-webkit-animation: smoke-billow-2 60s 0s 5 ease-in-out;
animation: smoke-billow-2 60s 0s 5 ease-in-out
}
}
.footer .ruin-smoke-2 {
position: absolute;
top: 20px;
right: -20%;
background-image: url(/assets/img/content/theme/ruination/smoke/bcd54caa178f34eaaf4edfbed91b0d56/smoke-6.svg);
background-size: contain;
background-repeat: no-repeat;
width: 400px;
height: 33px
}
@media screen and (min-width:800px) {
.footer .ruin-smoke-2 {
width: 640px;
height: 52px
}
}
@media screen and (min-width:960px) {
.footer .ruin-smoke-2 {
width: 800px;
height: 65px
}
}
@media screen and (min-width:800px) {
.footer .ruin-smoke-2 {
right: -50%;
-webkit-animation: smoke-billow-1 60s -40s 5 ease-in-out;
animation: smoke-billow-1 60s -40s 5 ease-in-out
}
}
.footer .ruin-smoke-3 {
position: absolute;
top: 0;
right: 50%;
display: none;
background-image: url(/assets/img/content/theme/ruination/smoke/a3fc33a117341004bd8f0f22512684ff/smoke-4.svg);
background-size: contain;
background-repeat: no-repeat;
width: 400px;
height: 66px
}
@media screen and (min-width:800px) {
.footer .ruin-smoke-3 {
width: 640px;
height: 105px
}
}
@media screen and (min-width:960px) {
.footer .ruin-smoke-3 {
width: 800px;
height: 131px
}
}
@media screen and (min-width:800px) {
.footer .ruin-smoke-3 {
-webkit-animation: smoke-billow-3 60s -20s 5 ease-in-out;
animation: smoke-billow-3 60s -20s 5 ease-in-out;
display: block
}
}
.footer .ruin-smoke-4 {
position: absolute;
top: 0;
left: 40%;
display: none;
background-image: url(/assets/img/content/theme/ruination/smoke/29105cdc8b5f01c00128486eef8d5f5d/smoke-5.svg);
background-size: contain;
background-repeat: no-repeat;
width: 400px;
height: 66px
}
@media screen and (min-width:800px) {
.footer .ruin-smoke-4 {
width: 640px;
height: 105px
}
}
@media screen and (min-width:960px) {
.footer .ruin-smoke-4 {
width: 800px;
height: 131px
}
}
@media screen and (min-width:800px) {
.footer .ruin-smoke-4 {
-webkit-animation: smoke-billow-4 60s -300s 5 ease-in-out;
animation: smoke-billow-4 60s -300s 5 ease-in-out;
display: block
}
}
@-webkit-keyframes smoke-billow-1 {
25% {
transform: translate(10%, 0)
}
75% {
transform: translate(-10%, 0)
}
}
@keyframes smoke-billow-1 {
25% {
transform: translate(10%, 0)
}
75% {
transform: translate(-10%, 0)
}
}
@-webkit-keyframes smoke-billow-2 {
25% {
transform: translate(-10%, 0)
}
75% {
transform: translate(10%, 0)
}
}
@keyframes smoke-billow-2 {
25% {
transform: translate(-10%, 0)
}
75% {
transform: translate(10%, 0)
}
}
@-webkit-keyframes smoke-billow-3 {
25% {
transform: translate(0, -2%)
}
75% {
transform: translate(5%, 2%)
}
}
@keyframes smoke-billow-3 {
25% {
transform: translate(0, -2%)
}
75% {
transform: translate(5%, 2%)
}
}
@-webkit-keyframes smoke-billow-4 {
25% {
transform: translate(-2%, 2%)
}
75% {
transform: translate(5%, -3%)
}
}
@keyframes smoke-billow-4 {
25% {
transform: translate(-2%, 2%)
}
75% {
transform: translate(5%, -3%)
}
}
.search-bar {
position: relative;
-ms-flex: 1 0 auto;
flex: 1 0 auto
}
.search-bar form,
.search-bar label {
height: 100%
}
.search-bar__divider {
position: absolute;
left: 60px;
top: 24px;
pointer-events: none
}
.search-bar .custom-search {
display: -ms-flexbox;
display: flex;
height: 100%;
-ms-flex-align: center;
align-items: center
}
.search-bar .custom-search .control--header {
padding: 14px 0;
line-height: 22px;
height: 50px;
border: 0 !important;
border-radius: 0;
caret-color: #d1363a
}
@media screen and (min-width:550px) {
.search-bar .custom-search .control--header {
padding: 19px 0
}
}
@media screen and (min-width:960px) {
.search-bar .custom-search .control--header {
padding: 19px 60px;
height: 60px
}
}
.search-bar ::-moz-placeholder {
color: #8a8887
}
.search-bar :-ms-input-placeholder {
color: #8a8887
}
.search-bar ::placeholder {
color: #8a8887
}
.search-bar .custom-search__button {
-ms-flex-order: -1;
order: -1;
padding: 0 20px;
height: 100%
}
.search-bar .custom-search__button .icon {
vertical-align: baseline
}
.search-bar .custom-search__button path {
fill: #d1363a
}
.no-flexbox.no-flexboxlegacy .search-bar .control--header {
display: inline-block;
width: 90%
}
.no-flexbox.no-flexboxlegacy .search-bar .custom-search__button {
display: inline-block;
width: 10%
}
.search-bar--inline .custom-search__button {
position: absolute;
width: 40px;
height: 40px;
top: 5px;
right: 5px;
border-radius: 50%;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
transition: all .3s ease-out;
padding: 0;
background-color: #e7e6e3;
background-image: linear-gradient(-183deg, #e7e6e3 49.5%, #d1363a 50.5%);
background-size: 100% 255%;
background-position: 50% 0;
background-repeat: no-repeat
}
.search-bar--inline .custom-search__button:active,
.search-bar--inline .custom-search__button:focus,
.search-bar--inline .custom-search__button:hover {
background-color: #d1363a;
background-position: 0 100%
}
@media screen and (min-width:550px) {
.search-bar--inline .custom-search__button {
width: 44px;
height: 44px;
top: 10px;
right: 10px
}
}
.search-bar--inline .custom-search__button path {
transition: all .3s ease-out;
fill: #2b2a29
}
.separator {
height: 2px;
width: 100%;
max-width: 1440px;
margin: 0 auto;
background-image: url(/assets/img/structure/ec52d55f0f379518c25d286fb69f4ea6/distressed-stroke.svg);
background-repeat: repeat-x;
background-position: 50% 50%;
background-size: 420px 2px
}
.separator--skinny {
height: 2px;
background-size: 420px 1px
}
.separator--spaced {
margin-top: 20px;
margin-bottom: 20px
}
@media screen and (min-width:960px) {
.separator--spaced {
margin-top: 40px;
margin-bottom: 40px
}
}
.separator--muted {
opacity: .3
}
.site-title {
display: inline-block;
vertical-align: middle
}
@media screen and (min-width:960px) and (max-width:999px) {
.site-title__inner {
width: 34px;
overflow: hidden
}
}
.site-title__inner .icon {
position: relative
}
@media screen and (max-width:549px) {
.site-title__inner .icon {
height: 30px !important;
line-height: 30px !important;
width: 95px !important;
top: -1px
}
}
@media screen and (min-width:550px) {
.site-title__inner .icon {
top: -3px
}
}
.site-title__inner .icon path {
fill: #e7e6e3
}
.social-box {
display: block;
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
border: 1px solid #656462;
color: #e7e6e3;
margin-bottom: 20px
}
@media screen and (min-width:960px) {
.social-box {
margin-bottom: 40px
}
}
.social-box ellipse,
.social-box path {
fill: #e7e6e3
}
.social-box__inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 20px;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between
}
@media screen and (min-width:800px) and (max-width:959px) {
.social-box__inner {
padding: 40px
}
}
@media screen and (min-width:1280px) {
.social-box__inner {
padding: 40px
}
}
.social-boxes {
position: relative;
padding-top: 20px;
padding-bottom: 30px;
background-color: #2b2a29;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 0;
padding-top: 180px;
padding-bottom: 140px;
-webkit-clip-path: polygon(0 5px, 100% 0, 100% 100%, 0 calc(100% - 20px));
clip-path: polygon(0 5px, 100% 0, 100% 100%, 0 calc(100% - 20px));
margin-top: -5px;
margin-bottom: -20px
}
@media screen and (min-width:960px) {
.social-boxes {
background-position: 50% 50%
}
}
.social-boxes__heading {
margin-bottom: 40px
}
@media screen and (min-width:550px) {
.social-boxes__heading {
margin-bottom: 60px
}
}
@media screen and (min-width:960px) {
.social-boxes__heading {
margin-bottom: 80px
}
}
.social-list {
position: absolute;
top: 15px;
right: 15px;
z-index: 1
}
@media screen and (min-width:960px) {
.social-list {
top: 50%;
right: 20px;
-ms-transform: translateY(-50%);
transform: translateY(-50%)
}
}
.no-js .social-list {
top: 10px
}
.social-list li {
display: inline-block;
margin-bottom: 0
}
@media screen and (min-width:960px) {
.social-list li {
margin-bottom: 5px
}
}
@media screen and (min-width:960px) {
.social-list li {
display: block
}
}
.social-list a>* {
pointer-events: none
}
.social-list__item {
border: 1px solid #adacaa;
width: 40px;
height: 40px;
border-radius: 50%;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
transition: background-position .3s ease-out;
background-color: #dbd9d6;
background-image: linear-gradient(-183deg, #dbd9d6 49.5%, #d1363a 50.5%);
background-size: 100% 255%;
background-position: 50% 0;
background-repeat: no-repeat
}
.social-list__item:active,
.social-list__item:focus,
.social-list__item:hover {
background-color: #d1363a;
background-position: 0 100%
}
.social-list__item path {
fill: #2b2a29;
transition: all .3s ease-out
}
.social-list__item div,
.social-list__item span {
display: inline-block;
margin: 0 auto
}
@media screen and (min-width:960px) {
.social-list__item {
width: 50px;
height: 50px
}
.social-list__item div,
.social-list__item span {
margin: 0
}
}
.social-list__item:active,
.social-list__item:focus,
.social-list__item:hover {
transition-duration: .1s
}
.social-list__item:active path,
.social-list__item:focus path,
.social-list__item:hover path {
transition-duration: .1s;
fill: #e7e6e3
}
.social-list__toggle:focus {
outline: 0
}
.no-js .social-list__toggle {
display: none
}
.social-list__toggle.is-active {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
position: relative
}
@media screen and (min-width:960px) {
.social-list__toggle.is-active {
border-top-left-radius: 50%;
border-bottom-right-radius: 0
}
}
.social-list__child-list {
position: absolute;
width: 200px;
height: 40px;
right: 100%;
top: 0;
border-bottom-left-radius: 50px;
border-top-left-radius: 50px;
border: 1px solid #adacaa;
border-right: 0;
text-align: right;
background-color: #dbd9d6;
background-image: url(/assets/img/structure/6d79447d110ef217a5a784efe55ba29b/texture-light@2x.jpg);
background-size: 50%;
background-repeat: repeat
}
.no-js .social-list__child-list {
position: static;
top: auto;
right: auto;
display: block;
border: 0;
text-align: center;
width: auto;
height: auto;
padding: 0
}
.is-hidden .social-list__child-list {
display: none
}
.is-active .social-list__child-list {
display: block
}
@media screen and (min-width:960px) {
.social-list__child-list {
padding: 10px 0;
border-right: 1px solid #adacaa;
border-top-right-radius: 0;
border-top-left-radius: 0;
border-top: 0;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
height: auto;
width: 50px;
right: 0;
top: auto
}
}
.social-list__child-list-item {
height: 100%;
width: 38px;
margin: auto 0;
text-align: center;
position: relative
}
@media screen and (min-width:960px) {
.social-list__child-list-item {
margin: 0 auto 10px;
width: auto
}
}
.social-list__child-list-item a {
position: absolute;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
left: 0;
right: 0;
margin: 0 auto
}
@media screen and (min-width:960px) {
.social-list__child-list-item a {
position: static
}
}
.social-list__child-list-item a ellipse,
.social-list__child-list-item a path {
transition: all .3s ease-out;
fill: #2b2a29
}
.social-list__child-list-item a:hover ellipse,
.social-list__child-list-item a:hover path {
transition-duration: .1s;
fill: #d1363a
}
.no-js .social-list__child-list-item {
margin-right: 5px;
border: 1px solid #adacaa;
width: 40px;
height: 40px;
border-radius: 50%
}
.no-js .social-list__child-list-item:last-child {
margin-right: 0
}
@media screen and (min-width:960px) {
.no-js .social-list__child-list-item {
margin-right: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center
}
}
.no-js .social-list__child-list-item a {
position: absolute
}
.no-js .social-list__child-list-item svg {
fill: #2b2a29
}
@media screen and (min-width:960px) {
.no-js .social-list__child-list-item {
margin-bottom: 5px;
width: 50px;
height: 50px
}
}
.no-js .social-list__child-list-item:active,
.no-js .social-list__child-list-item:focus,
.no-js .social-list__child-list-item:hover {
background: #d1363a
}
.no-js .social-list__child-list-item:active svg,
.no-js .social-list__child-list-item:focus svg,
.no-js .social-list__child-list-item:hover svg {
fill: #e7e6e3
}
.social-list__item-mobile-hidden {
display: none
}
@media screen and (min-width:960px) {
.social-list__item-mobile-hidden {
display: -ms-flexbox;
display: flex
}
.no-flexbox .social-list__item-mobile-hidden {
display: inline-block
}
}
.showLatestNews .social-list {
top: -15px
}
@media screen and (min-width:960px) {
.showLatestNews .social-list {
left: -80px;
top: 50%
}
.showLatestNews .social-list__child-list {
left: 0
}
}
.status-update {
position: relative
}
.status-update+.status-update {
margin-top: 40px
}
@media screen and (min-width:960px) {
.status-update+.status-update {
margin-top: 60px
}
}
.status-update__inner {
position: relative
}
.status-update__inner:before {
content: none;
position: absolute;
top: -20px;
right: -20px;
bottom: -20px;
left: -20px;
-webkit-animation: status-update-highlight 3s 1 ease-out forwards;
animation: status-update-highlight 3s 1 ease-out forwards;
-webkit-clip-path: polygon(0 0, 100% 10px, calc(100% - 5px) calc(100% - 5px), 5px 100%);
clip-path: polygon(0 0, 100% 10px, calc(100% - 5px) calc(100% - 5px), 5px 100%);
opacity: .5;
z-index: -1
}
.status-update:nth-child(odd) .status-update__inner:before {
-webkit-clip-path: polygon(3px 0, 100% 0, calc(100% - 5px) 100%, 0 calc(100% - 5px));
clip-path: polygon(3px 0, 100% 0, calc(100% - 5px) 100%, 0 calc(100% - 5px))
}
.status-update a:target+.status-update__inner:before {
content: ''
}
.status-update__header {
margin-bottom: 10px;
position: relative
}
.status-update__status {
margin-bottom: 20px;
line-height: 22px
}
@media screen and (min-width:800px) {
.status-update__status {
margin-bottom: 0
}
}
.status-update__status.is-pending {
color: #8a8887
}
.status-update__status.is-complete {
color: #009a58
}
.status-update__status * {
vertical-align: middle
}
.status-update__status .clock-icon,
.status-update__status .icon {
-ms-transform: translateY(-2px);
transform: translateY(-2px)
}
@media screen and (max-width:959px) {
.status-update__status .icon {
width: 18px !important;
height: 18px !important;
line-height: 18px !important
}
}
.status-update__status svg {
fill: currentColor
}
.status-update__body .prose>*+* {
margin-top: 20px
}
.status-update--inverse {
color: #e7e6e3
}
@-webkit-keyframes status-update-highlight {
0%,
75% {
background-color: #403f3e
}
100% {
background-color: transparent
}
}
@keyframes status-update-highlight {
0%,
75% {
background-color: #403f3e
}
100% {
background-color: transparent
}
}
.summary {
position: relative
}
.summary__image {
overflow: hidden;
position: relative;
background-color: #2b2a29
}
.summary__image img {
transition: all .3s ease-out;
vertical-align: top
}
.summary__type-icon {
position: absolute;
top: 10px;
left: 10px
}
.summary__content {
position: relative;
padding: 25px 0 0
}
.summary__content--padded {
padding-left: 30px
}
@media screen and (min-width:550px) {
.summary__content--padded {
padding: 40px 40px 0
}
}
.summary__heading {
margin-top: 18px
}
@media screen and (min-width:550px) {
.summary__heading {
margin-top: 20px
}
}
.summary__heading.heading.heading--5 {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em
}
[lang=cs_CZ] .summary__heading.heading.heading--5,
[lang=hu_HU] .summary__heading.heading.heading--5,
[lang=pl_PL] .summary__heading.heading.heading--5,
[lang=tr_tr] .summary__heading.heading.heading--5,
[lang=vi_vi] .summary__heading.heading.heading--5,
html[lang=cs] .summary__heading.heading.heading--5,
html[lang=hu] .summary__heading.heading.heading--5,
html[lang=pl] .summary__heading.heading.heading--5,
html[lang=tr] .summary__heading.heading.heading--5,
html[lang=vi] .summary__heading.heading.heading--5 {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .summary__heading.heading.heading--5,
html[lang=ko] .summary__heading.heading.heading--5 {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .summary__heading.heading.heading--5,
html[lang=th] .summary__heading.heading.heading--5 {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .summary__heading.heading.heading--5,
html[lang=ja] .summary__heading.heading.heading--5 {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .summary__heading.heading.heading--5,
[lang=zh-hant] .summary__heading.heading.heading--5,
html[lang=zh-cn] .summary__heading.heading.heading--5,
html[lang=zh-hant] .summary__heading.heading.heading--5 {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
.summary--compact .summary__heading {
margin-top: 10px
}
.summary__sell {
display: none;
margin-top: 10px
}
@media screen and (min-width:550px) {
.summary__sell {
display: block
}
}
.summary__date {
margin-top: 0;
position: absolute;
top: 27px;
right: 100%;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
white-space: nowrap
}
@media screen and (min-width:550px) {
.summary__date {
top: 42px
}
}
.summary--compact .summary__date {
position: static;
-ms-transform: none;
transform: none;
display: block;
margin-top: 10px
}
.summary__category {
position: relative;
z-index: 2;
display: inline-block
}
.summary__overlay-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1
}
.summary__overlay-link .people-name {
border: 1px solid red
}
.summary__overlay-link:active~.summary__image img,
.summary__overlay-link:focus~.summary__image img,
.summary__overlay-link:hover~.summary__image img {
transition-duration: .1s;
-ms-transform: scale(1.05);
transform: scale(1.05);
opacity: .4
}
.summary__overlay-link:active~.summary__image .brush-icon__bg path,
.summary__overlay-link:focus~.summary__image .brush-icon__bg path,
.summary__overlay-link:hover~.summary__image .brush-icon__bg path {
fill: #d1363a;
transition-duration: .1s
}
.summary__overlay-link:active~.summary__image .brush-icon__type path,
.summary__overlay-link:focus~.summary__image .brush-icon__type path,
.summary__overlay-link:hover~.summary__image .brush-icon__type path {
fill: #e7e6e3;
transition-duration: .1s
}
.summary__overlay-link:active~.summary__content .summary__heading span,
.summary__overlay-link:active~.summary__heading span,
.summary__overlay-link:focus~.summary__content .summary__heading span,
.summary__overlay-link:focus~.summary__heading span,
.summary__overlay-link:hover~.summary__content .summary__heading span,
.summary__overlay-link:hover~.summary__heading span {
background-image: url(/assets/img/structure/149a1d9c51c7bf69816f75699be94a7e/distressed-underline.svg);
background-repeat: repeat-x;
background-position: 0 100%;
background-size: 680px 3px;
display: inline
}
.summary--featured .summary__content {
margin-left: 20px;
margin-right: 20px
}
@media screen and (min-width:550px) {
.summary--featured .summary__content {
padding-left: 40px;
padding-right: 40px
}
}
@media screen and (min-width:550px) {
.summary--featured .summary__content {
max-width: 588.333px;
margin-left: auto;
margin-right: auto;
padding-top: 40px
}
}
@media screen and (min-width:960px) {
.summary--featured .summary__content {
max-width: none;
padding-top: 60px
}
}
@media screen and (min-width:960px) {
.summary--featured .summary__sell {
max-width: 588.333px
}
}
@media screen and (min-width:550px) {
.summary--featured .summary__date {
top: 40px
}
}
@media screen and (min-width:960px) {
.summary--featured .summary__date {
top: 60px
}
}
.summary--grid {
margin-bottom: 40px
}
@media screen and (min-width:960px) {
.summary--grid {
margin-bottom: 60px
}
}
.summary--grid .summary__list-eyebrow {
display: none
}
.summary--grid .summary__grid-eyebrow {
display: block;
margin-top: 40px
}
.summary--grid .summary__compact-eyebrow {
margin-top: 8px
}
.summary--grid .summary__heading {
margin-top: 15px
}
.summary--grid.summary--compact .summary__heading {
margin-top: 20px
}
.summary--list {
display: -ms-flexbox;
display: flex;
-ms-flex-align: baseline;
align-items: baseline;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 15px;
padding: 10px 20px;
transition: background-color .3s ease-out
}
@media screen and (min-width:550px) {
.summary--list {
padding: 10px 40px;
margin-left: 20px;
margin-right: 20px
}
}
@media screen and (min-width:960px) {
.summary--list {
margin-left: 80px;
margin-right: 80px
}
}
.summary--list:active,
.summary--list:focus,
.summary--list:hover {
background-color: #dbd9d6;
transition-duration: .1s
}
.summary--list .summary__grid-eyebrow,
.summary--list .summary__image {
display: none
}
.summary--list .summary__heading {
margin-top: 0;
-ms-flex: 2 0 0px;
flex: 2 0 0
}
.summary--list .summary__category,
.summary--list .summary__list-eyebrow {
-ms-flex: 1 0 0px;
flex: 1 0 0;
text-align: right
}
.summary--list .summary__list-eyebrow {
color: #8a8887;
font-size: .875rem
}
@media screen and (min-width:550px) {
.summary--list .summary__list-eyebrow {
font-size: 1rem
}
}
.summary--list .summary__category {
display: none
}
@media screen and (min-width:800px) {
.summary--list .summary__category {
display: block
}
}
.summary--full {
overflow: hidden;
position: relative;
background-color: #2b2a29;
-webkit-clip-path: polygon(0 5px, 100% 0, 100% calc(100% - 10px), 0 100%);
clip-path: polygon(0 5px, 100% 0, 100% calc(100% - 10px), 0 100%);
margin-top: -5px;
margin-bottom: -10px;
display: -ms-flexbox;
display: flex;
min-height: 320px
}
@media screen and (min-width:550px) {
.summary--full {
min-height: 600px
}
}
@media screen and (min-width:960px) {
.summary--full {
min-height: 700px;
-webkit-clip-path: polygon(0 10px, 100% 0, 100% calc(100% - 20px), 0 100%);
clip-path: polygon(0 10px, 100% 0, 100% calc(100% - 20px), 0 100%);
margin-top: -10px;
margin-bottom: -20px
}
}
@media screen and (min-width:1280px) {
.summary--full {
min-height: 800px
}
}
.summary--full .summary__background-image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-size: cover;
background-position: 50% 50%;
mix-blend-mode: lighten;
opacity: .5;
transform: translateZ(0);
transition: all .3s ease-out
}
.summary--full .summary__type-icon {
position: absolute;
top: 40px;
left: 40px
}
.summary--full .summary__content-wrapper {
margin-top: auto
}
.summary--full .summary__content {
max-width: 588.333px;
padding-bottom: 40px;
margin-top: 70px;
max-width: 580px
}
@media screen and (min-width:550px) {
.summary--full .summary__content {
padding-bottom: 80px;
margin-top: 90px
}
}
@media screen and (min-width:960px) {
.summary--full .summary__content {
padding-bottom: 120px
}
}
.summary--full .summary__heading {
text-shadow: 0 0 10px #2b2a29
}
.summary--full .summary__date,
.summary--full .summary__sell {
text-shadow: 0 0 5px #2b2a29
}
.summary--full .summary__overlay-link:active~.summary__background-image,
.summary--full .summary__overlay-link:focus~.summary__background-image,
.summary--full .summary__overlay-link:hover~.summary__background-image {
transition-duration: .1s;
-ms-transform: scale(1.05);
transform: scale(1.05);
opacity: .4
}
.summary--full .summary__overlay-link:active~.summary__type-icon .brush-icon__bg path,
.summary--full .summary__overlay-link:focus~.summary__type-icon .brush-icon__bg path,
.summary--full .summary__overlay-link:hover~.summary__type-icon .brush-icon__bg path {
fill: #d1363a;
transition-duration: .1s
}
.summary--full .summary__overlay-link:active~.summary__type-icon .brush-icon__type path,
.summary--full .summary__overlay-link:focus~.summary__type-icon .brush-icon__type path,
.summary--full .summary__overlay-link:hover~.summary__type-icon .brush-icon__type path {
fill: #e7e6e3;
transition-duration: .1s
}
.use-with-full-width-layout {
margin: auto
}
.impact-report .summary__type-icon {
display: none
}
.impact-report .summary__content--padded {
padding-left: 20px
}
@media screen and (min-width:550px) {
.impact-report .summary__content--padded {
padding: 20px 30px 0
}
}
.impact-report .eyebrow {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=cs_CZ] .impact-report .eyebrow,
[lang=hu_HU] .impact-report .eyebrow,
[lang=pl_PL] .impact-report .eyebrow,
[lang=tr_tr] .impact-report .eyebrow,
[lang=vi_vi] .impact-report .eyebrow,
html[lang=cs] .impact-report .eyebrow,
html[lang=hu] .impact-report .eyebrow,
html[lang=pl] .impact-report .eyebrow,
html[lang=tr] .impact-report .eyebrow,
html[lang=vi] .impact-report .eyebrow {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .impact-report .eyebrow,
html[lang=ko] .impact-report .eyebrow {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .impact-report .eyebrow,
html[lang=th] .impact-report .eyebrow {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .impact-report .eyebrow,
html[lang=ja] .impact-report .eyebrow {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .impact-report .eyebrow,
[lang=zh-hant] .impact-report .eyebrow,
html[lang=zh-cn] .impact-report .eyebrow,
html[lang=zh-hant] .impact-report .eyebrow {
font-family: 'Riot Sans CN', sans-serif
}
.impact-report .summary__heading {
font-family: 'Riot Sans Latin', Arial, sans-serif;
font-weight: 700;
line-height: 1.4
}
[lang=cs_CZ] .impact-report .summary__heading,
[lang=hu_HU] .impact-report .summary__heading,
[lang=pl_PL] .impact-report .summary__heading,
[lang=tr_tr] .impact-report .summary__heading,
[lang=vi_vi] .impact-report .summary__heading,
html[lang=cs] .impact-report .summary__heading,
html[lang=hu] .impact-report .summary__heading,
html[lang=pl] .impact-report .summary__heading,
html[lang=tr] .impact-report .summary__heading,
html[lang=vi] .impact-report .summary__heading {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .impact-report .summary__heading,
html[lang=ko] .impact-report .summary__heading {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .impact-report .summary__heading,
html[lang=th] .impact-report .summary__heading {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .impact-report .summary__heading,
html[lang=ja] .impact-report .summary__heading {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .impact-report .summary__heading,
[lang=zh-hant] .impact-report .summary__heading,
html[lang=zh-cn] .impact-report .summary__heading,
html[lang=zh-hant] .impact-report .summary__heading {
font-family: 'Riot Sans CN', sans-serif
}
.impact-report .copy,
.impact-report .summary__date {
font-family: 'Inter V Latin', Arial, sans-serif;
line-height: 1.4;
top: 24px
}
[lang=cs_CZ] .impact-report .copy,
[lang=cs_CZ] .impact-report .summary__date,
[lang=hu_HU] .impact-report .copy,
[lang=hu_HU] .impact-report .summary__date,
[lang=pl_PL] .impact-report .copy,
[lang=pl_PL] .impact-report .summary__date,
[lang=tr_tr] .impact-report .copy,
[lang=tr_tr] .impact-report .summary__date,
[lang=vi_vi] .impact-report .copy,
[lang=vi_vi] .impact-report .summary__date,
html[lang=cs] .impact-report .copy,
html[lang=cs] .impact-report .summary__date,
html[lang=hu] .impact-report .copy,
html[lang=hu] .impact-report .summary__date,
html[lang=pl] .impact-report .copy,
html[lang=pl] .impact-report .summary__date,
html[lang=tr] .impact-report .copy,
html[lang=tr] .impact-report .summary__date,
html[lang=vi] .impact-report .copy,
html[lang=vi] .impact-report .summary__date {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .impact-report .copy,
[lang=ko_ko] .impact-report .summary__date,
html[lang=ko] .impact-report .copy,
html[lang=ko] .impact-report .summary__date {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .impact-report .copy,
[lang=th_th] .impact-report .summary__date,
html[lang=th] .impact-report .copy,
html[lang=th] .impact-report .summary__date {
font-family: 'Noto Sans Thai', sans-serif
}
[lang=ja] .impact-report .copy,
[lang=ja] .impact-report .summary__date,
html[lang=ja] .impact-report .copy,
html[lang=ja] .impact-report .summary__date {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .impact-report .copy,
[lang=zh-cn] .impact-report .summary__date,
[lang=zh-hant] .impact-report .copy,
[lang=zh-hant] .impact-report .summary__date,
html[lang=zh-cn] .impact-report .copy,
html[lang=zh-cn] .impact-report .summary__date,
html[lang=zh-hant] .impact-report .copy,
html[lang=zh-hant] .impact-report .summary__date {
font-family: 'Noto Sans CN', sans-serif
}
.summary__date-horizontal {
display: none
}
.showLatestNews .latest-news .summary__content {
padding-top: 16px;
padding-left: 0;
padding-right: 0
}
.showLatestNews .latest-news .summary__eyebrow-wrap {
display: -ms-flexbox;
display: flex;
-moz-column-gap: 16px;
column-gap: 16px;
-ms-flex-align: center;
align-items: center
}
.showLatestNews .latest-news .summary__date {
display: none
}
.showLatestNews .latest-news .summary__date-horizontal {
display: block;
-ms-transform: rotate(0);
transform: rotate(0);
position: relative;
top: 0;
right: 0;
left: 0
}
.showLatestNews .latest-news .summary__heading {
margin-top: 8px;
margin-bottom: 0;
font-size: 24px
}
.showLatestNews .latest-news .summary__sell {
display: none
}
.superhero {
position: relative;
width: 100%;
overflow: hidden;
background: #252423
}
@media screen and (min-width:960px) {
.superhero {
max-height: 730px;
overflow: hidden
}
}
@media screen and (min-width:960px) {
.superhero--no-video {
height: 730px
}
}
@media screen and (min-width:1920px) {
.superhero--no-video {
height: 64vh
}
}
.superhero__items {
position: relative;
height: 100vh
}
@media screen and (min-width:960px) {
.superhero__items {
height: auto;
max-height: 100%
}
.superhero--no-video .superhero__items {
height: 100%
}
}
@media screen and (min-width:960px) and (min-width:1920px) {
.superhero--no-video .superhero__items {
height: 64vh
}
}
.superhero__fallback-bg {
width: 100%;
height: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover
}
@media screen and (max-width:959px) {
.superhero__fallback-bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
max-height: none
}
}
@media screen and (min-width:960px) {
.superhero__fallback-bg {
max-height: 730px
}
}
@media screen and (min-width:1920px) {
.superhero__fallback-bg {
height: 64vh
}
}
.superhero__fallback-bg--dark {
opacity: .5
}
.superhero-feature {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
position: relative;
text-align: center;
transform: translateZ(0);
height: 100%
}
.superhero-feature__heading {
margin-top: 20px
}
@media screen and (min-width:550px) {
.superhero-feature__heading {
margin-top: 30px
}
}
@media screen and (min-width:960px) {
.superhero-feature__heading {
margin-top: 40px
}
}
.superhero-feature__subheading {
margin-top: 10px;
max-width: 600px;
color: #fff
}
@media screen and (min-width:550px) {
.superhero-feature__subheading {
font-size: 1.125rem;
line-height: 1.667
}
}
@media screen and (min-width:960px) {
.superhero-feature__subheading {
font-size: 1.375rem;
line-height: 1.636
}
}
.superhero-feature__content {
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-direction: column;
flex-direction: column;
z-index: 2;
padding-bottom: 40px;
position: absolute;
top: 0;
bottom: 0;
padding: 0 20px
}
.no-flexbox.no-flexboxlegacy .superhero-feature__content {
padding-top: 40px
}
@media screen and (min-width:960px) {
.superhero--16-9 .superhero-feature__content {
height: 56.25vw;
max-height: 100%
}
}
.superhero-feature__heading {
letter-spacing: 0;
-ms-transform: translateX(0);
transform: translateX(0)
}
.superhero-feature__cta {
margin-top: 20px
}
@media screen and (min-width:550px) {
.superhero-feature__cta {
margin-top: 30px
}
}
@media screen and (min-width:960px) {
.superhero-feature__cta {
margin-top: 40px
}
}
.cssanimations .superhero-feature__heading {
-webkit-animation: letter-spacing-reveal 1.4s .2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: letter-spacing-reveal 1.4s .2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
opacity: 0;
letter-spacing: -.03em
}
.cssanimations .superhero-feature__eyebrow {
-webkit-animation: mask-reveal-from-right 1s .8s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s .8s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.cssanimations .superhero-feature__cta {
-webkit-animation: mask-reveal-from-right 1s 1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s 1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.superhero-video {
width: 100%;
height: 100%;
top: 0;
bottom: 0;
overflow: hidden;
display: none
}
@media screen and (min-width:960px) {
.superhero-video {
display: block
}
}
.superhero-video__inner {
width: 100%;
height: auto;
margin: 0 auto
}
@media screen and (min-width:960px) {
.superhero-video__inner {
max-height: 730px
}
}
@media screen and (min-width:1920px) {
.superhero-video__inner {
height: 64vh
}
}
.superhero-video__inner::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #252423;
opacity: .85;
z-index: 1
}
.superhero-video__poster {
display: none;
min-width: 100%;
min-height: calc(100vh - 90px);
margin: auto;
vertical-align: bottom
}
.superhero-video__video {
width: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
vertical-align: bottom;
position: relative;
z-index: 1
}
.superhero-video.is-active .superhero-video__video {
opacity: 1
}
.superhero-video__background {
position: absolute;
left: 0;
right: 0;
z-index: 0;
width: 100%;
filter: blur(8px)
}
.tab-content.is-inactive {
position: absolute !important;
clip: rect(0, 0, 0, 0) !important;
overflow: hidden !important;
height: 1px !important;
width: 1px !important;
padding: 0 !important;
margin: -1px !important;
border: 0 !important
}
.tab-content.is-active {
-webkit-animation: tab-content-reveal .3s 1 forwards .4s;
animation: tab-content-reveal .3s 1 forwards .4s
}
.no-js .tab-content {
display: block !important
}
.no-js .tab-content+.tab-content {
margin-top: 80px
}
@-webkit-keyframes tab-content-reveal {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes tab-content-reveal {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
.tab-triggers {
margin: -10px
}
.tab-triggers__button {
display: inline-block;
padding: 10px
}
.tabs__header {
margin-bottom: 40px
}
.text-hero {
position: relative;
text-align: center;
min-height: 260px;
padding-top: 40px;
padding-bottom: 40px;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
background-color: #030303;
overflow: hidden
}
@media screen and (min-width:550px) {
.text-hero {
padding-top: 60px;
padding-bottom: 60px
}
}
@media screen and (min-width:960px) {
.text-hero {
min-height: 350px
}
}
.text-hero__inner {
position: relative;
z-index: 10
}
.text-hero__heading,
.text-hero__sub-heading {
position: relative;
margin-top: 10px
}
@media screen and (min-width:550px) {
.text-hero__heading,
.text-hero__sub-heading {
margin-top: 20px
}
}
.text-hero__heading:first-child,
.text-hero__sub-heading:first-child {
margin-top: 0
}
.text-hero--quoted .text-hero__heading:after,
.text-hero--quoted .text-hero__heading:before {
color: #656462
}
.text-hero--quoted .text-hero__heading:before {
content: open-quote
}
.text-hero--quoted .text-hero__heading:after {
content: close-quote
}
.text-hero__heading--no-kicker {
padding-top: 20px
}
.text-hero__heading {
font-size: 2.25rem;
line-height: 1.1
}
@media screen and (min-width:960px) {
.text-hero__heading {
font-size: 2.75rem;
line-height: 1.227
}
}
.bg-pattern {
position: absolute;
bottom: 15px;
left: 0;
right: 0;
top: -150px;
opacity: .2;
height: 100%;
z-index: 1;
width: 100%;
background-position: 50% 25%;
background-size: cover;
height: 542px;
-ms-transform: rotate(20deg);
transform: rotate(20deg);
background-image: url(/assets/img/structure/68007e938c9213c48916232cf1da912c/RiotPattern-TextHeroWidget.svg) !important
}
@media screen and (min-width:960px) {
.bg-pattern {
top: -314px;
height: 982px
}
}
.text-hero__hero-edge {
min-height: 10px;
display: block;
background-repeat: no-repeat;
width: 100%;
background-size: cover;
background-position: bottom;
background-image: url(/assets/img/structure/b46661364871bf4e26a1ceb3e2ce1fba/RiotPattern-TextHeroWidget-cropped-BG.svg);
z-index: 0
}
@media screen and (min-width:960px) {
.text-hero__hero-edge {
min-height: 30px
}
}
.text-hero-wrapper {
overflow: hidden;
margin-bottom: 40px
}
@media screen and (min-width:550px) {
.text-hero-wrapper {
margin-bottom: 50px
}
}
@media screen and (min-width:1600px) {
.text-hero-wrapper {
margin-bottom: 80px
}
}
.text-lockup {
text-align: center
}
.text-lockup__eyebrow {
margin-bottom: 20px
}
@media screen and (min-width:960px) {
.text-lockup__eyebrow {
margin-bottom: 30px
}
}
.text-lockup__copy,
.text-lockup__subheading {
margin-top: 20px
}
@media screen and (min-width:960px) {
.text-lockup__copy,
.text-lockup__subheading {
margin-top: 30px
}
}
.text-lockup--spaced {
padding-top: 40px;
padding-bottom: 40px
}
@media screen and (min-width:550px) {
.text-lockup--spaced {
padding-top: 50px;
padding-bottom: 50px
}
}
@media screen and (min-width:1600px) {
.text-lockup--spaced {
padding-top: 80px;
padding-bottom: 80px
}
}
.text-lockup--spaced-bottom {
padding-bottom: 40px
}
@media screen and (min-width:550px) {
.text-lockup--spaced-bottom {
padding-bottom: 50px
}
}
@media screen and (min-width:1600px) {
.text-lockup--spaced-bottom {
padding-bottom: 80px
}
}
.cssanimations .text-lockup.is-animated .text-lockup__eyebrow {
-webkit-animation: mask-reveal-from-right 1s .8s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: mask-reveal-from-right 1s .8s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-webkit-clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
clip-path: polygon(99.999% 0, 100% 0, 100% 100%, 99.999% 100%);
opacity: 0
}
.cssanimations .text-lockup.is-animated .text-lockup__heading {
-webkit-animation: reveal-down 1s .4s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s .4s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(-100px);
transform: translateY(-100px);
opacity: 0
}
.cssanimations .text-lockup.is-animated .text-lockup__subheading {
-webkit-animation: reveal-down 1s .6s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s .6s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(-100px);
transform: translateY(-100px);
opacity: 0
}
.cssanimations .text-lockup.is-animated .text-lockup__copy {
-webkit-animation: reveal-down 1s 1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-down 1s 1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(-100px);
transform: translateY(-100px);
opacity: 0
}
.text-two-col .heading {
margin-bottom: 20px
}
@media screen and (min-width:550px) {
.text-two-col .heading {
margin-bottom: 30px
}
}
.text-two-col .grid__item+.grid__item {
margin-top: 20px
}
@media screen and (min-width:800px) {
.text-two-col .grid__item+.grid__item {
margin-top: 0
}
}
.text-two-col .button-wrap {
text-align: center;
margin-top: 20px
}
.text-with-cta {
text-align: center;
padding-left: 20px;
padding-right: 20px
}
@media screen and (min-width:400px) {
.text-with-cta {
padding-left: 40px;
padding-right: 40px
}
}
.text-with-cta .copy,
.text-with-cta .heading {
position: relative
}
@media screen and (min-width:400px) {
.text-with-cta .copy,
.text-with-cta .heading {
margin-left: auto;
margin-right: auto;
max-width: 47.5rem
}
}
@media screen and (min-width:960px) {
.text-with-cta .copy,
.text-with-cta .heading {
max-width: 62.5rem
}
}
.text-with-cta .copy {
margin-top: 20px
}
@media screen and (min-width:550px) {
.text-with-cta .copy {
margin-top: 30px
}
}
.text-with-cta .button {
margin-top: 20px
}
@media screen and (min-width:550px) {
.text-with-cta .button {
margin-top: 40px
}
}
.text-with-cta--textured {
background-color: #dbd9d6;
background-image: url(/assets/img/structure/6d79447d110ef217a5a784efe55ba29b/texture-light@2x.jpg);
background-size: 50%;
background-repeat: repeat;
-webkit-clip-path: polygon(0 0, 100% 10px, 100% 100%, 0 calc(100% - 20px));
clip-path: polygon(0 0, 100% 10px, 100% 100%, 0 calc(100% - 20px));
padding-top: 40px;
padding-bottom: 40px
}
@media screen and (min-width:550px) {
.text-with-cta--textured {
padding-top: 60px;
padding-bottom: 60px
}
}
@media screen and (min-width:1280px) {
.text-with-cta--textured {
padding-top: 80px;
padding-bottom: 80px
}
}
.text-with-cta--what-we-do {
position: relative;
padding-bottom: 120px
}
@media screen and (min-width:550px) {
.text-with-cta--what-we-do {
padding-bottom: 180px
}
}
@media screen and (min-width:960px) {
.text-with-cta--what-we-do {
padding-bottom: 240px
}
}
@media screen and (min-width:1280px) {
.text-with-cta--what-we-do {
padding-bottom: 300px
}
}
@media screen and (min-width:1440px) {
.text-with-cta--what-we-do {
padding-bottom: 275px
}
}
.text-with-cta--what-we-do .text-with-cta__bg {
position: absolute;
bottom: 0;
right: 0;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
max-width: 1150px;
height: 120px
}
@media screen and (min-width:550px) {
.text-with-cta--what-we-do .text-with-cta__bg {
height: 180px
}
}
@media screen and (min-width:960px) {
.text-with-cta--what-we-do .text-with-cta__bg {
height: 240px
}
}
@media screen and (min-width:1280px) {
.text-with-cta--what-we-do .text-with-cta__bg {
height: 300px
}
}
.title-with-emphasis.eyebrow {
max-height: 250px
}
.title-with-emphasis em {
font-style: normal
}
.title-with-emphasis.purple em {
color: #3c00cf
}
.title-with-emphasis.cyan em {
color: #0ec8c4
}
.title-with-emphasis.orange em {
color: #ff9400
}
.title-with-emphasis.red em {
color: #d1363a
}
.impact-report-cta-button {
margin-top: 24px
}
@media screen and (min-width:550px) {
.impact-report-cta-button {
margin-top: 36px
}
}
.impact-report-text-with-cta {
font-family: 'Inter V Latin', Arial, sans-serif;
min-height: 250px;
padding-top: 40px 0;
background-image: url(/assets/img/content/impact-report-cta-background.png);
background-position-x: center;
background-position-y: top;
background-size: cover;
background-repeat: no-repeat;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
text-align: center
}
[lang=cs_CZ] .impact-report-text-with-cta,
[lang=hu_HU] .impact-report-text-with-cta,
[lang=pl_PL] .impact-report-text-with-cta,
[lang=tr_tr] .impact-report-text-with-cta,
[lang=vi_vi] .impact-report-text-with-cta,
html[lang=cs] .impact-report-text-with-cta,
html[lang=hu] .impact-report-text-with-cta,
html[lang=pl] .impact-report-text-with-cta,
html[lang=tr] .impact-report-text-with-cta,
html[lang=vi] .impact-report-text-with-cta {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .impact-report-text-with-cta,
html[lang=ko] .impact-report-text-with-cta {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .impact-report-text-with-cta,
html[lang=th] .impact-report-text-with-cta {
font-family: 'Noto Sans Thai', sans-serif
}
[lang=ja] .impact-report-text-with-cta,
html[lang=ja] .impact-report-text-with-cta {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .impact-report-text-with-cta,
[lang=zh-hant] .impact-report-text-with-cta,
html[lang=zh-cn] .impact-report-text-with-cta,
html[lang=zh-hant] .impact-report-text-with-cta {
font-family: 'Noto Sans CN', sans-serif
}
@media screen and (min-width:550px) {
.impact-report-text-with-cta {
min-height: 365px
}
}
@media screen and (min-width:960px) {
.impact-report-text-with-cta {
min-height: 465px
}
}
.impact-report-text-with-cta .heading {
text-align: center;
font-family: 'Riot Sans Latin', Arial, sans-serif;
color: #fff;
position: relative;
font-size: 2rem;
max-width: 300px
}
[lang=cs_CZ] .impact-report-text-with-cta .heading,
[lang=hu_HU] .impact-report-text-with-cta .heading,
[lang=pl_PL] .impact-report-text-with-cta .heading,
[lang=tr_tr] .impact-report-text-with-cta .heading,
[lang=vi_vi] .impact-report-text-with-cta .heading,
html[lang=cs] .impact-report-text-with-cta .heading,
html[lang=hu] .impact-report-text-with-cta .heading,
html[lang=pl] .impact-report-text-with-cta .heading,
html[lang=tr] .impact-report-text-with-cta .heading,
html[lang=vi] .impact-report-text-with-cta .heading {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .impact-report-text-with-cta .heading,
html[lang=ko] .impact-report-text-with-cta .heading {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .impact-report-text-with-cta .heading,
html[lang=th] .impact-report-text-with-cta .heading {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .impact-report-text-with-cta .heading,
html[lang=ja] .impact-report-text-with-cta .heading {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .impact-report-text-with-cta .heading,
[lang=zh-hant] .impact-report-text-with-cta .heading,
html[lang=zh-cn] .impact-report-text-with-cta .heading,
html[lang=zh-hant] .impact-report-text-with-cta .heading {
font-family: 'Riot Sans CN', sans-serif
}
@media screen and (min-width:550px) {
.impact-report-text-with-cta .heading {
font-size: 2.5rem;
max-width: 100%
}
}
@media screen and (min-width:960px) {
.impact-report-text-with-cta .heading {
font-size: 2.75rem
}
}
.impact-report-text-with-cta .button {
position: relative;
font-family: 'Inter V Latin', Arial, sans-serif;
background-color: #0a0a0a;
min-width: 300px;
background-image: linear-gradient(-183deg, #0a0a0a 49.5%, #0a0a0a 50.5%)
}
[lang=cs_CZ] .impact-report-text-with-cta .button,
[lang=hu_HU] .impact-report-text-with-cta .button,
[lang=pl_PL] .impact-report-text-with-cta .button,
[lang=tr_tr] .impact-report-text-with-cta .button,
[lang=vi_vi] .impact-report-text-with-cta .button,
html[lang=cs] .impact-report-text-with-cta .button,
html[lang=hu] .impact-report-text-with-cta .button,
html[lang=pl] .impact-report-text-with-cta .button,
html[lang=tr] .impact-report-text-with-cta .button,
html[lang=vi] .impact-report-text-with-cta .button {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .impact-report-text-with-cta .button,
html[lang=ko] .impact-report-text-with-cta .button {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .impact-report-text-with-cta .button,
html[lang=th] .impact-report-text-with-cta .button {
font-family: 'Noto Sans Thai', sans-serif
}
[lang=ja] .impact-report-text-with-cta .button,
html[lang=ja] .impact-report-text-with-cta .button {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .impact-report-text-with-cta .button,
[lang=zh-hant] .impact-report-text-with-cta .button,
html[lang=zh-cn] .impact-report-text-with-cta .button,
html[lang=zh-hant] .impact-report-text-with-cta .button {
font-family: 'Noto Sans CN', sans-serif
}
.impact-report-text-with-cta .button:active,
.impact-report-text-with-cta .button:focus,
.impact-report-text-with-cta .button:hover {
background-color: #0a0a0a
}
.impact-report-text-with-cta .impact-report-text-with-cta__content {
margin-top: 6%;
display: -ms-flexbox;
display: flex;
padding: 40px 12px 12px;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-direction: column;
flex-direction: column
}
@media screen and (min-width:550px) {
.impact-report-text-with-cta .impact-report-text-with-cta__content {
padding: 0 12px
}
}
.themed-icon-button {
position: relative;
overflow: hidden;
display: inline-block;
border: 0;
vertical-align: middle;
cursor: pointer;
overflow: visible;
text-align: center;
text-decoration: none;
border-radius: 18px;
line-height: 1;
min-width: 150px;
padding: 9px;
font-size: 1.5rem;
font-weight: 700;
-webkit-font-smoothing: auto;
letter-spacing: -.03em;
transition: all .2s ease-out;
color: #f9f9f9
}
.themed-icon-button:active,
.themed-icon-button:focus,
.themed-icon-button:hover {
outline: 0;
text-decoration: none;
transition: all .2s ease-out
}
.themed-icon-button:active {
transition: all .2s ease-out
}
.themed-icon-button:focus-visible::after {
opacity: 1
}
.themed-icon-button:active::after {
opacity: 0
}
.themed-icon-button::after {
content: '';
border: 2px solid rgba(249, 249, 249, .4);
border-radius: 12px;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
padding: 2px;
color: #f9f9f9;
display: block;
opacity: 0;
pointer-events: none;
position: absolute;
transition: opacity .1s ease-out;
z-index: 4;
border: 2px solid rgba(249, 249, 249, .4)
}
@supports (-webkit-mask:linear-gradient(to top, #f00, #008000)) and ((-webkit-mask-composite:xor) or (mask-composite:exclude)) {
.themed-icon-button::after {
border: 0;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
--angle: -90deg;
-webkit-animation: 8s rotate linear infinite;
animation: 8s rotate linear infinite;
background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, .4));
background: conic-gradient(from var(--angle), rgba(255, 255, 255, .8), rgba(255, 255, 255, .2), rgba(255, 255, 255, .8))
}
.themed-icon-button:active::after {
background-color: #fff
}
}
.themed-icon-button:active,
.themed-icon-button:focus,
.themed-icon-button:hover {
color: #f9f9f9
}
.themed-icon-button::after {
border-radius: 22px
}
@media screen and (min-width:550px) {
.themed-icon-button {
font-size: 1.938rem;
padding: 12px;
min-width: 180px;
border-radius: 24px
}
.themed-icon-button::after {
border-radius: 30px;
border-width: 3px;
top: -5.5px;
left: -5.5px;
right: -5.5px;
bottom: -5.5px;
padding: 2.5px
}
}
.themed-icon-button__icon {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 50%;
background-color: #0a0a0a;
margin-right: .5rem;
transition: .2s ease-out;
filter: drop-shadow(0 4px 3px rgba(10, 10, 10, .4));
width: 32px;
height: 32px;
line-height: 32px
}
@media screen and (min-width:550px) {
.themed-icon-button__icon {
margin-right: .75rem;
width: 48px;
height: 48px;
line-height: 48px
}
.themed-icon-button__icon .icon {
width: 24px !important;
height: 24px !important;
line-height: 24px !important
}
}
.themed-icon-button__content {
margin-right: .75rem
}
.themed-icon-button--val {
background: linear-gradient(135deg, #ff3342 0, #ff7d66 100%);
box-shadow: 0 10px 45px -10px rgba(255, 70, 84, .15), 0 0 20px -10px rgba(255, 70, 84, .35), 0 10px 30px -10px rgba(255, 70, 84, .25)
}
.themed-icon-button--val:hover {
background: linear-gradient(135deg, #ff3342 0, #ff7d66 50%, #ff7d66 100%);
box-shadow: 0 10px 30px -10px rgba(255, 70, 84, .25), 0 10px 30px -10px rgba(255, 70, 84, .5), 0 10px 35px -10px rgba(255, 70, 84, .5)
}
.themed-icon-button--val:active {
background: linear-gradient(135deg, #ff3342 0, #ff3342 25%, #ff7d66 100%)
}
.themed-icon-button--league-wild-rift {
background: linear-gradient(135deg, #0bc4e2 0, #2c8cc2 100%);
box-shadow: 0 10px 45px -10px rgba(11, 196, 226, .15), 0 0 20px -10px rgba(11, 196, 226, .35), 0 10px 30px -10px rgba(11, 196, 226, .25);
background: linear-gradient(315deg, #0bc4e2 0, #2c8cc2 100%)
}
.themed-icon-button--league-wild-rift:hover {
background: linear-gradient(135deg, #0bc4e2 0, #2c8cc2 50%, #2c8cc2 100%);
box-shadow: 0 10px 30px -10px rgba(11, 196, 226, .25), 0 10px 30px -10px rgba(11, 196, 226, .5), 0 10px 35px -10px rgba(11, 196, 226, .5)
}
.themed-icon-button--league-wild-rift:active {
background: linear-gradient(135deg, #0bc4e2 0, #0bc4e2 25%, #2c8cc2 100%)
}
.themed-icon-button--league-wild-rift:hover {
background: linear-gradient(315deg, #0bc4e2 0, #0bc4e2 50%, #2c8cc2 100%)
}
.themed-icon-button--league-wild-rift:active {
background: linear-gradient(315deg, #0bc4e2 0, #0bc4e2 25%, #2c8cc2 100%)
}
.themed-icon-button--tft {
background: linear-gradient(135deg, #ff6433 0, #fe9d3a 100%);
box-shadow: 0 10px 45px -10px rgba(254, 157, 58, .15), 0 0 20px -10px rgba(254, 157, 58, .35), 0 10px 30px -10px rgba(254, 157, 58, .25)
}
.themed-icon-button--tft:hover {
background: linear-gradient(135deg, #ff6433 0, #fe9d3a 50%, #fe9d3a 100%);
box-shadow: 0 10px 30px -10px rgba(254, 157, 58, .25), 0 10px 30px -10px rgba(254, 157, 58, .5), 0 10px 35px -10px rgba(254, 157, 58, .5)
}
.themed-icon-button--tft:active {
background: linear-gradient(135deg, #ff6433 0, #ff6433 25%, #fe9d3a 100%)
}
.themed-icon-button--tft:active {
background: linear-gradient(135deg, #ff6433 0, #fe9d3a 75%, #fe9d3a 100%)
}
.themed-icon-button--arcane {
background: linear-gradient(135deg, #ba8964 0, #d1ac90 100%);
box-shadow: 0 10px 45px -10px rgba(186, 137, 100, .15), 0 0 20px -10px rgba(186, 137, 100, .35), 0 10px 30px -10px rgba(186, 137, 100, .25);
color: #0a0a0a
}
.themed-icon-button--arcane:hover {
background: linear-gradient(135deg, #ba8964 0, #d1ac90 50%, #d1ac90 100%);
box-shadow: 0 10px 30px -10px rgba(186, 137, 100, .25), 0 10px 30px -10px rgba(186, 137, 100, .5), 0 10px 35px -10px rgba(186, 137, 100, .5)
}
.themed-icon-button--arcane:active {
background: linear-gradient(135deg, #ba8964 0, #ba8964 25%, #d1ac90 100%)
}
.themed-icon-button--arcane:active,
.themed-icon-button--arcane:focus,
.themed-icon-button--arcane:hover {
color: #0a0a0a
}
.themed-icon-button--red {
background: linear-gradient(135deg, #a32629 0, #d53235 100%);
box-shadow: 0 10px 45px -10px rgba(255, 111, 111, .15), 0 0 20px -10px rgba(255, 111, 111, .35), 0 10px 30px -10px rgba(255, 111, 111, .25)
}
.themed-icon-button--red:hover {
background: linear-gradient(135deg, #a32629 0, #d53235 50%, #d53235 100%);
box-shadow: 0 10px 30px -10px rgba(255, 111, 111, .25), 0 10px 30px -10px rgba(255, 111, 111, .5), 0 10px 35px -10px rgba(255, 111, 111, .5)
}
.themed-icon-button--red:active {
background: linear-gradient(135deg, #a32629 0, #a32629 25%, #d53235 100%)
}
.themed-icon-button--red:active {
background: linear-gradient(135deg, #a32629 0, #d53235 75%, #d53235 100%)
}
.themed-icon-button.customised-theme-button {
background: linear-gradient(135deg, var(--color1) 20%, var(--color2) 100%);
box-shadow: 0 10px 45px -10px var(--color3-25), 0 0 20px -10px var(--color3-50), 0 10px 30px -10px var(--color3-35);
transition: all .3s ease
}
.themed-icon-button.customised-theme-button:hover {
background: linear-gradient(135deg, var(--color1) 20%, var(--color2) 50%, var(--color2) 100%);
box-shadow: 0 10px 30px -10px var(--color3-25), 0 10px 30px -10px var(--color3-50), 0 10px 35px -10px var(--color3-50)
}
.themed-icon-button.customised-theme-button:active {
background: linear-gradient(135deg, var(--color1) 20%, var(--color1) 25%, var(--color2) 100%)
}
.timeline-status__heading {
margin-bottom: 20px
}
@media screen and (min-width:960px) {
.timeline-status__heading {
margin-bottom: 40px
}
}
.cssanimations .is-active .timeline-status__list>* .status-update__inner {
opacity: 0
}
.cssanimations .is-active .timeline-status__list>:nth-child(1) .status-update__inner {
-webkit-animation: reveal-up 1s .1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0;
-webkit-animation: sequential-fade-in .3s 50ms 1 forwards;
animation: sequential-fade-in .3s 50ms 1 forwards
}
.cssanimations .is-active .timeline-status__list>:nth-child(2) .status-update__inner {
-webkit-animation: reveal-up 1s .2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .2s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0;
-webkit-animation: sequential-fade-in .3s .1s 1 forwards;
animation: sequential-fade-in .3s .1s 1 forwards
}
.cssanimations .is-active .timeline-status__list>:nth-child(3) .status-update__inner {
-webkit-animation: reveal-up 1s .3s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .3s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0;
-webkit-animation: sequential-fade-in .3s 150ms 1 forwards;
animation: sequential-fade-in .3s 150ms 1 forwards
}
.cssanimations .is-active .timeline-status__list>:nth-child(4) .status-update__inner {
-webkit-animation: reveal-up 1s .4s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .4s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0;
-webkit-animation: sequential-fade-in .3s .2s 1 forwards;
animation: sequential-fade-in .3s .2s 1 forwards
}
.cssanimations .is-active .timeline-status__list>:nth-child(5) .status-update__inner {
-webkit-animation: reveal-up 1s .5s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .5s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0;
-webkit-animation: sequential-fade-in .3s 250ms 1 forwards;
animation: sequential-fade-in .3s 250ms 1 forwards
}
.cssanimations .is-active .timeline-status__list>:nth-child(6) .status-update__inner {
-webkit-animation: reveal-up 1s .6s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .6s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0;
-webkit-animation: sequential-fade-in .3s .3s 1 forwards;
animation: sequential-fade-in .3s .3s 1 forwards
}
.cssanimations .is-active .timeline-status__list>:nth-child(7) .status-update__inner {
-webkit-animation: reveal-up 1s .7s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .7s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0;
-webkit-animation: sequential-fade-in .3s 350ms 1 forwards;
animation: sequential-fade-in .3s 350ms 1 forwards
}
.cssanimations .is-active .timeline-status__list>:nth-child(8) .status-update__inner {
-webkit-animation: reveal-up 1s .8s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .8s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0;
-webkit-animation: sequential-fade-in .3s .4s 1 forwards;
animation: sequential-fade-in .3s .4s 1 forwards
}
.cssanimations .is-active .timeline-status__list>:nth-child(9) .status-update__inner {
-webkit-animation: reveal-up 1s .9s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s .9s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0;
-webkit-animation: sequential-fade-in .3s 450ms 1 forwards;
animation: sequential-fade-in .3s 450ms 1 forwards
}
.cssanimations .is-active .timeline-status__list>:nth-child(10) .status-update__inner {
-webkit-animation: reveal-up 1s 1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
animation: reveal-up 1s 1s cubic-bezier(.215, .61, .355, 1) 1 forwards;
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0;
-webkit-animation: sequential-fade-in .3s .5s 1 forwards;
animation: sequential-fade-in .3s .5s 1 forwards
}
@-webkit-keyframes sequential-fade-in {
0% {
opacity: 0;
transform: translateY(50px)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@keyframes sequential-fade-in {
0% {
opacity: 0;
transform: translateY(50px)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
.timeline-with-status {
position: relative
}
.timeline-with-status.has-background {
padding-top: 60px
}
@media screen and (min-width:960px) {
.timeline-with-status.has-background {
padding-top: 80px
}
}
@media screen and (min-width:1600px) {
.timeline-with-status.has-background {
padding-top: 100px
}
}
.timeline-with-status__timeline {
padding-top: 60px;
padding-bottom: 60px
}
@media screen and (min-width:960px) {
.timeline-with-status__timeline {
padding-top: 80px;
padding-bottom: 80px
}
}
@media screen and (min-width:1600px) {
.timeline-with-status__timeline {
padding-top: 100px;
padding-bottom: 100px
}
}
.timeline-with-status__status {
background-color: #2b2a29;
background-repeat: repeat;
background-position: 50% 0;
background-size: 50%;
background-image: url(/assets/img/structure/7d776943173a38525a926c9d1cafde3c/texture-dark@2x.jpg);
-webkit-clip-path: polygon(0 5px, 100% 0, 100% 100%, 0 calc(100% - 20px));
clip-path: polygon(0 5px, 100% 0, 100% 100%, 0 calc(100% - 20px));
padding-top: 60px;
padding-bottom: 60px
}
@media screen and (min-width:960px) {
.timeline-with-status__status {
padding-top: 80px;
padding-bottom: 80px
}
}
@media screen and (min-width:1600px) {
.timeline-with-status__status {
padding-top: 100px;
padding-bottom: 100px
}
}
.timeline-with-status__bg {
display: none;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #dbd9d6;
background-image: url(/assets/img/structure/6d79447d110ef217a5a784efe55ba29b/texture-light@2x.jpg);
background-size: 50%;
background-repeat: repeat;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 10px));
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 10px));
margin-top: -10px
}
@media screen and (min-width:550px) {
.timeline-with-status__bg {
-webkit-clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 calc(100% - 20px));
clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 calc(100% - 20px))
}
}
@media screen and (min-width:960px) {
.timeline-with-status__bg {
-webkit-clip-path: polygon(0 15px, 100% 0, 100% 100%, 0 calc(100% - 25px));
clip-path: polygon(0 15px, 100% 0, 100% 100%, 0 calc(100% - 25px))
}
}
.timeline-with-status.has-background .timeline-with-status__bg {
display: block
}
.timeline-bar {
display: inline-block;
position: relative;
margin-bottom: 10px;
vertical-align: bottom;
overflow: hidden;
color: #656462;
float: left;
clear: left
}
a.timeline-bar:active,
a.timeline-bar:focus,
a.timeline-bar:hover {
text-decoration: none;
color: #d1363a
}
.timeline-bar__duration {
height: 26px;
line-height: 26px;
position: relative;
font-size: 12px;
padding-top: 8px;
padding-bottom: 8px;
padding-right: 10px
}
.timeline-bar__duration:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 26px;
background-color: #d1363a;
border-radius: 50%;
right: 0
}
.has-end-out-of-range .timeline-bar__duration {
padding-right: 0
}
.has-end-out-of-range .timeline-bar__duration:after {
content: none
}
.timeline-bar__duration-inner {
position: relative;
background-color: #d1363a;
height: 10px;
border-radius: 2px
}
.timeline-bar__label {
padding-right: 40px
}
@supports (grid-auto-flow:row) {
.timeline-bar {
width: auto !important;
margin-left: 0 !important;
margin-bottom: 0;
float: none;
clear: none
}
}
.timeline-group__button {
background: 0 0;
border: 0
}
.timeline-group__button:focus {
outline: 0
}
.timeline-group__button:focus .eyebrow:before {
background-color: #d1363a
}
.timeline-group__heading {
margin-bottom: 20px;
height: 20px
}
.timeline-group__heading>* {
position: absolute;
white-space: nowrap
}
@media screen and (min-width:550px) {
.timeline-group__heading {
height: 24px
}
}
@media screen and (min-width:800px) {
.timeline-group__heading {
height: auto
}
.timeline-group__heading>* {
position: relative
}
}
.timeline-group__items {
margin-bottom: 40px;
width: 100%;
overflow: hidden
}
.timeline-group__items:after,
.timeline-group__items:before {
content: "";
display: table
}
.timeline-group__items:after {
clear: both
}
@supports (grid-auto-flow:row) {
.timeline-group__items {
display: grid;
grid-auto-flow: row dense;
grid-gap: 10px 40px
}
.timeline-group__items:after,
.timeline-group__items:before {
content: none
}
}
@media screen and (min-width:800px) {
.js .timeline-group.is-out-of-view .timeline-bar .timeline-bar__duration:after {
-ms-transform: scale(0);
transform: scale(0)
}
.js .timeline-group.is-out-of-view .timeline-bar .timeline-bar__duration-inner {
-ms-transform: scaleX(0);
transform: scaleX(0)
}
.js .timeline-group.is-out-of-view .timeline-bar .timeline-bar__label {
opacity: 0
}
.js .timeline-group.is-in-view .timeline-bar .timeline-bar__duration:after {
-ms-transform: scale(1);
transform: scale(1);
transition: transform .3s .3s ease-out
}
.js .timeline-group.is-in-view .timeline-bar .timeline-bar__duration-inner {
transition: transform .3s ease-out;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-ms-transform: scaleX(1);
transform: scaleX(1)
}
.js .timeline-group.is-in-view .timeline-bar .timeline-bar__label {
transition: opacity .3s .3s ease-out;
opacity: 1
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(1) .timeline-bar__duration:after {
transition-delay: .4s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(1) .timeline-bar__duration-inner {
transition-delay: .1s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(1) .timeline-bar__label {
transition-delay: .6s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(2) .timeline-bar__duration:after {
transition-delay: .5s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(2) .timeline-bar__duration-inner {
transition-delay: .2s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(2) .timeline-bar__label {
transition-delay: .7s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(3) .timeline-bar__duration:after {
transition-delay: .6s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(3) .timeline-bar__duration-inner {
transition-delay: .3s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(3) .timeline-bar__label {
transition-delay: .8s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(4) .timeline-bar__duration:after {
transition-delay: .7s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(4) .timeline-bar__duration-inner {
transition-delay: .4s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(4) .timeline-bar__label {
transition-delay: .9s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(5) .timeline-bar__duration:after {
transition-delay: .8s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(5) .timeline-bar__duration-inner {
transition-delay: .5s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(5) .timeline-bar__label {
transition-delay: 1s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(6) .timeline-bar__duration:after {
transition-delay: .9s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(6) .timeline-bar__duration-inner {
transition-delay: .6s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(6) .timeline-bar__label {
transition-delay: 1.1s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(7) .timeline-bar__duration:after {
transition-delay: 1s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(7) .timeline-bar__duration-inner {
transition-delay: .7s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(7) .timeline-bar__label {
transition-delay: 1.2s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(8) .timeline-bar__duration:after {
transition-delay: 1.1s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(8) .timeline-bar__duration-inner {
transition-delay: .8s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(8) .timeline-bar__label {
transition-delay: 1.3s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(9) .timeline-bar__duration:after {
transition-delay: 1.2s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(9) .timeline-bar__duration-inner {
transition-delay: .9s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(9) .timeline-bar__label {
transition-delay: 1.4s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(10) .timeline-bar__duration:after {
transition-delay: 1.3s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(10) .timeline-bar__duration-inner {
transition-delay: 1s
}
.js .timeline-group.is-in-view .timeline-bar:nth-child(10) .timeline-bar__label {
transition-delay: 1.5s
}
}
.timeline-header {
margin-bottom: 40px;
margin-left: -40px
}
.timeline-header__inner {
display: table;
table-layout: fixed;
width: 100%
}
.timeline-header__heading {
display: table-cell;
position: relative;
padding-top: 20px;
padding-left: 40px
}
.timeline-header__heading:before {
content: '';
position: absolute;
top: 0;
height: 4000px;
width: 2px;
-ms-transform: translateX(-20px);
transform: translateX(-20px);
margin-left: -1px;
background-image: url(/assets/img/content/5846bf19502cfa6cfef17a4660c95e9a/vertical-dashes.svg);
background-repeat: repeat-y;
z-index: 0
}
.timeline-header__heading:first-child:before {
content: none
}
.timeline {
position: relative
}
.timeline__scroll-message {
color: #656462;
margin-bottom: 20px
}
.timeline__scroll-message .icon {
margin-right: 10px
}
.timeline__scroll-message .icon svg {
fill: #656462
}
@media screen and (min-width:800px) {
.timeline__scroll-message {
display: none
}
}
.timeline__nav {
display: table;
width: 100%;
margin-bottom: 20px
}
@media screen and (min-width:800px) {
.timeline__nav {
margin-bottom: 40px
}
}
.timeline__nav-button {
display: table-cell
}
.timeline__nav-button:last-child {
text-align: right
}
.timeline__scroll-wrapper {
overflow-y: hidden;
overflow-x: auto
}
@media screen and (min-width:800px) {
.timeline__scroll-inner {
width: 100% !important
}
}
.timer-icon {
position: relative;
width: 36px;
height: 36px;
display: inline-block;
margin: auto;
vertical-align: bottom
}
.timer-icon__content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
font-size: 11px;
line-height: 36px;
font-family: 'Riot Sans Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-weight: 700;
color: #8a8887;
border-radius: 50%;
transition: all .3s ease-out
}
[lang=cs_CZ] .timer-icon__content,
[lang=hu_HU] .timer-icon__content,
[lang=pl_PL] .timer-icon__content,
[lang=tr_tr] .timer-icon__content,
[lang=vi_vi] .timer-icon__content,
html[lang=cs] .timer-icon__content,
html[lang=hu] .timer-icon__content,
html[lang=pl] .timer-icon__content,
html[lang=tr] .timer-icon__content,
html[lang=vi] .timer-icon__content {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .timer-icon__content,
html[lang=ko] .timer-icon__content {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .timer-icon__content,
html[lang=th] .timer-icon__content {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .timer-icon__content,
html[lang=ja] .timer-icon__content {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .timer-icon__content,
[lang=zh-hant] .timer-icon__content,
html[lang=zh-cn] .timer-icon__content,
html[lang=zh-hant] .timer-icon__content {
font-family: 'Riot Sans CN', sans-serif
}
.timer-icon__circle {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0
}
.timer-icon__track {
fill: none;
stroke: #8a8887;
stroke-width: 1px;
transition: stroke .3s ease-out
}
.timer-icon__progress {
fill: none;
stroke: #d1363a;
stroke-width: 3px;
stroke-dasharray: 105px;
stroke-dashoffset: 105px;
opacity: 0;
transition: stroke .3s ease-out
}
.is-nav-selected .timer-icon .timer-icon__track,
.timer-icon.is-active .timer-icon__track {
transition-duration: .1s;
stroke: #d1363a
}
.is-nav-selected .timer-icon .timer-icon__progress,
.timer-icon.is-active .timer-icon__progress {
opacity: 0;
transition-duration: .1s;
-webkit-animation: timer-icon-fill 7s linear infinite;
animation: timer-icon-fill 7s linear infinite
}
.is-paused .timer-icon .timer-icon__progress {
-webkit-animation-play-state: paused;
animation-play-state: paused
}
.is-stopped .timer-icon .timer-icon__progress {
-webkit-animation: none;
animation: none
}
.is-stopped .is-nav-selected .timer-icon .timer-icon__content {
background-color: #d1363a;
color: #e7e6e3
}
@-webkit-keyframes timer-icon-fill {
0% {
stroke-dashoffset: 105px;
opacity: 0
}
5% {
opacity: 1
}
95% {
opacity: 1
}
100% {
opacity: 0;
stroke-dashoffset: 0
}
}
@keyframes timer-icon-fill {
0% {
stroke-dashoffset: 105px;
opacity: 0
}
5% {
opacity: 1
}
95% {
opacity: 1
}
100% {
opacity: 0;
stroke-dashoffset: 0
}
}
.tour-date-selector {
position: relative;
padding-top: 40px;
padding-bottom: 40px
}
@media screen and (min-width:550px) {
.tour-date-selector {
padding-top: 50px;
padding-bottom: 50px
}
}
@media screen and (min-width:1600px) {
.tour-date-selector {
padding-top: 80px;
padding-bottom: 80px
}
}
.tour-date-selector__bg {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #dbd9d6;
background-image: url(/assets/img/structure/6d79447d110ef217a5a784efe55ba29b/texture-light@2x.jpg);
background-size: 50%;
background-repeat: repeat;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
margin-top: -10px
}
@media screen and (min-width:550px) {
.tour-date-selector__bg {
-webkit-clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 100%)
}
}
@media screen and (min-width:960px) {
.tour-date-selector__bg {
-webkit-clip-path: polygon(0 15px, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 15px, 100% 0, 100% 100%, 0 100%)
}
}
.tour-date-selector__inner {
position: relative
}
.tour-date-selector__intro {
margin-bottom: 30px
}
@media screen and (min-width:550px) {
.tour-date-selector__intro {
margin-bottom: 40px
}
}
@media screen and (min-width:1600px) {
.tour-date-selector__intro {
margin-bottom: 50px
}
}
.twitch-embed {
position: relative
}
.twitch-embed iframe {
width: 100%
}
@media screen and (min-width:761px) {
.twitch-embed {
height: 0;
padding-bottom: 56.25%;
width: 100%
}
.twitch-embed iframe {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
height: 100%
}
}
@media screen and (min-width:550px) {
.vertical-icon-list .grid--double .grid__item {
padding-left: 0
}
}
.vertical-icon-list .icon-grid__button {
margin-top: 40px;
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=cs_CZ] .vertical-icon-list .icon-grid__button,
[lang=hu_HU] .vertical-icon-list .icon-grid__button,
[lang=pl_PL] .vertical-icon-list .icon-grid__button,
[lang=tr_tr] .vertical-icon-list .icon-grid__button,
[lang=vi_vi] .vertical-icon-list .icon-grid__button,
html[lang=cs] .vertical-icon-list .icon-grid__button,
html[lang=hu] .vertical-icon-list .icon-grid__button,
html[lang=pl] .vertical-icon-list .icon-grid__button,
html[lang=tr] .vertical-icon-list .icon-grid__button,
html[lang=vi] .vertical-icon-list .icon-grid__button {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .vertical-icon-list .icon-grid__button,
html[lang=ko] .vertical-icon-list .icon-grid__button {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .vertical-icon-list .icon-grid__button,
html[lang=th] .vertical-icon-list .icon-grid__button {
font-family: 'Noto Sans Thai', sans-serif
}
[lang=ja] .vertical-icon-list .icon-grid__button,
html[lang=ja] .vertical-icon-list .icon-grid__button {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .vertical-icon-list .icon-grid__button,
[lang=zh-hant] .vertical-icon-list .icon-grid__button,
html[lang=zh-cn] .vertical-icon-list .icon-grid__button,
html[lang=zh-hant] .vertical-icon-list .icon-grid__button {
font-family: 'Noto Sans CN', sans-serif
}
.vertical-icon-list .heading {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=cs_CZ] .vertical-icon-list .heading,
[lang=hu_HU] .vertical-icon-list .heading,
[lang=pl_PL] .vertical-icon-list .heading,
[lang=tr_tr] .vertical-icon-list .heading,
[lang=vi_vi] .vertical-icon-list .heading,
html[lang=cs] .vertical-icon-list .heading,
html[lang=hu] .vertical-icon-list .heading,
html[lang=pl] .vertical-icon-list .heading,
html[lang=tr] .vertical-icon-list .heading,
html[lang=vi] .vertical-icon-list .heading {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .vertical-icon-list .heading,
html[lang=ko] .vertical-icon-list .heading {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .vertical-icon-list .heading,
html[lang=th] .vertical-icon-list .heading {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .vertical-icon-list .heading,
html[lang=ja] .vertical-icon-list .heading {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .vertical-icon-list .heading,
[lang=zh-hant] .vertical-icon-list .heading,
html[lang=zh-cn] .vertical-icon-list .heading,
html[lang=zh-hant] .vertical-icon-list .heading {
font-family: 'Riot Sans CN', sans-serif
}
@media screen and (min-width:550px) {
.vertical-icon-list .vertical-icon-list__text {
text-align: left
}
}
.vertical-icon-list .vertical-icon-list__text .heading {
font-size: 20px
}
@media screen and (min-width:550px) {
.vertical-icon-list .vertical-icon-list__text .heading {
margin-top: 20px;
font-size: 18px
}
}
.impact-report--vertical-list-container {
padding-right: 20px
}
@media screen and (min-width:550px) {
.impact-report--vertical-list-container {
padding-right: 0
}
}
.vertical-icon-list-item {
text-align: center;
padding-top: 20px;
padding-bottom: 20px
}
@media screen and (min-width:550px) {
.vertical-icon-list-item {
padding-top: 0;
padding-bottom: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.vertical-icon-list-item .icon-grid-item__icon {
margin-bottom: 0
}
.vertical-icon-list-item .vertical-icon-list__text .heading {
margin-top: 0
}
}
.vertical-icon-list-item .impact-report-grid-item--large-image {
max-width: 170px
}
@media screen and (min-width:1440px) {
.vertical-icon-list-item .impact-report-grid-item--large-image {
max-width: 170px
}
}
.impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .heading {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=cs_CZ] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .heading,
[lang=hu_HU] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .heading,
[lang=pl_PL] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .heading,
[lang=tr_tr] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .heading,
[lang=vi_vi] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .heading,
html[lang=cs] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .heading,
html[lang=hu] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .heading,
html[lang=pl] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .heading,
html[lang=tr] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .heading,
html[lang=vi] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .heading {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .heading,
html[lang=ko] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .heading {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .heading,
html[lang=th] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .heading {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .heading,
html[lang=ja] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .heading {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .heading,
[lang=zh-hant] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .heading,
html[lang=zh-cn] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .heading,
html[lang=zh-hant] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .heading {
font-family: 'Riot Sans CN', sans-serif
}
.impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .copy {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=cs_CZ] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .copy,
[lang=hu_HU] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .copy,
[lang=pl_PL] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .copy,
[lang=tr_tr] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .copy,
[lang=vi_vi] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .copy,
html[lang=cs] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .copy,
html[lang=hu] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .copy,
html[lang=pl] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .copy,
html[lang=tr] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .copy,
html[lang=vi] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .copy {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .copy,
html[lang=ko] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .copy {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .copy,
html[lang=th] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .copy {
font-family: 'Noto Sans Thai', sans-serif
}
[lang=ja] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .copy,
html[lang=ja] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .copy {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .copy,
[lang=zh-hant] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .copy,
html[lang=zh-cn] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .copy,
html[lang=zh-hant] .impact-report-vertical-icon-list-wrapper .vertical-icon-list__text .copy {
font-family: 'Noto Sans CN', sans-serif
}
.video-play-button {
position: relative;
display: inline-block;
width: 60px;
height: 60px
}
@media screen and (min-width:550px) {
.video-play-button {
width: 80px;
height: 80px
}
}
@media screen and (min-width:960px) {
.video-play-button {
width: 100px;
height: 100px
}
}
.video-play-button:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #d1363a;
background-image: url(/assets/img/structure/939db09e5391a2ed948ed0b3db2adb26/texture-white-dots.png);
background-repeat: repeat;
background-position: 50% 50%;
transition: all .3s ease;
will-change: transform
}
.video-preview-full:active .video-play-button:before,
.video-preview-full:focus .video-play-button:before,
.video-preview-full:hover .video-play-button:before,
.video-preview:active .video-play-button:before,
.video-preview:focus .video-play-button:before,
.video-preview:hover .video-play-button:before,
a:active .video-play-button:before,
a:focus .video-play-button:before,
a:hover .video-play-button:before {
-ms-transform: rotate(1deg) skew(1deg);
transform: rotate(1deg) skew(1deg);
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
transition-duration: .1s
}
.video-play-button .icon {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
@media screen and (max-width:549px) {
.video-play-button .icon {
width: 10px !important;
height: 12px !important;
line-height: 12px !important
}
}
@media screen and (max-width:549px) {
.video-play-button .icon {
width: 12px !important;
height: 14px !important;
line-height: 14px !important
}
}
.video-play-button .icon path {
fill: #e7e6e3
}
.video-play-button--small {
width: 60px;
height: 60px
}
.video-play-button--small .icon {
width: 10px !important;
height: 12px !important;
line-height: 12px !important
}
a:active .video-play-button--small:before,
a:focus .video-play-button--small:before,
a:hover .video-play-button--small:before {
-ms-transform: rotate(1deg) skew(1deg);
transform: rotate(1deg) skew(1deg);
top: -3px;
bottom: -3px;
left: -3px;
right: -3px
}
.video-preview {
display: inline-block;
position: relative;
background-color: #2b2a29
}
.video-preview img {
transition: all .3s ease-out;
transform: translateZ(0)
}
.video-preview:active img,
.video-preview:focus img,
.video-preview:hover img {
transition-duration: .1s;
transform: scale(1.05) translateZ(0);
opacity: .4
}
.video-preview__button {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center
}
.no-flexbox.no-flexboxlegacy .video-preview__button {
top: 50%;
right: auto;
bottom: auto;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.video-preview-full {
position: relative;
height: 100%;
display: block
}
.video-preview__background-image {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
height: 100%
}
.video {
position: relative
}
.video__preview {
-webkit-clip-path: polygon(0 10px, 100% 0, 100% calc(100% - 10px), 0 100%);
clip-path: polygon(0 10px, 100% 0, 100% calc(100% - 10px), 0 100%)
}
@media screen and (min-width:960px) {
.video__preview {
-webkit-clip-path: polygon(0 20px, 100% 0, 100% calc(100% - 20px), 0 100%);
clip-path: polygon(0 20px, 100% 0, 100% calc(100% - 20px), 0 100%)
}
}
@media screen and (max-width:959px) {
.video__preview:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100px;
pointer-events: none;
background-image: linear-gradient(to top, #2b2a29, rgba(43, 42, 41, 0))
}
}
.video__preview .video-preview,
.video__preview img {
width: 100%
}
.video__heading {
position: absolute;
bottom: 20px;
left: 20px
}
@media screen and (min-width:960px) {
.video__heading {
right: 20px;
left: auto;
bottom: 40px
}
}
.whats-happening {
position: relative;
z-index: 0;
transition: all .2s ease-out;
background-color: #0a0a0a;
color: #f9f9f9
}
.whats-happening h3 {
color: #f9f9f9
}
.whats-happening::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
background: linear-gradient(170deg, var(--color-bg-gradient) 5%, rgba(10, 10, 10, 0) 20%)
}
@media screen and (min-width:960px) {
.whats-happening::after {
-ms-transform: scaleY(-1);
transform: scaleY(-1);
background: radial-gradient(70.71% 70.71% at 50% 50%, var(--color-bg-gradient) 0, rgba(10, 10, 10, 0) 75%, rgba(10, 10, 10, 0) 100%)
}
}
@media screen and (max-width:960px) {
.whats-happening {
margin-top: -60px
}
}
@media screen and (max-width:960px) {
.whats-happening__container {
padding-top: 30px
}
}
.whats-happening__title {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 2.5rem
}
.whats-happening__title span {
white-space: nowrap
}
.whats-happening__title h2 {
font-size: 1.938rem
}
.whats-happening__title a {
display: none
}
@media screen and (min-width:960px) {
.whats-happening__title {
margin-bottom: 3.75rem;
-ms-flex-pack: justify;
justify-content: space-between
}
.whats-happening__title h2 {
font-size: 3rem
}
.whats-happening__title a {
display: inline-block
}
}
.whats-happening__wrapper {
margin-bottom: 40px
}
@media screen and (min-width:1280px) {
.whats-happening__wrapper {
display: -ms-flexbox;
display: flex;
margin-bottom: 0
}
}
.whats-happening__hero-wrapper {
position: relative;
display: block;
margin-bottom: 16px;
transition: .15s ease-out
}
@media screen and (min-width:1280px) {
.whats-happening__hero-wrapper {
-ms-flex: 1 1 60%;
flex: 1 1 60%;
margin-right: 1.5rem;
margin-bottom: 0
}
}
.whats-happening__hero {
display: block;
position: relative;
border-radius: 8px;
transition: .3s ease-out;
overflow: hidden;
top: 0
}
.whats-happening__hero .responsive-media {
box-shadow: 0 4px 4px rgba(10, 10, 10, .15);
border-radius: 8px;
position: relative;
transition: .3s ease-out
}
.whats-happening__hero .responsive-media::before {
content: '';
border-radius: 8px;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1;
background: linear-gradient(200deg, rgba(10, 10, 10, 0) 50%, rgba(10, 10, 10, .4) 90%)
}
.whats-happening__hero .whats-happening__hero-image img {
position: absolute;
-o-object-fit: cover;
object-fit: cover;
border-radius: 8px
}
.whats-happening__hero .whats-happening__badge {
left: 16px;
top: 16px
}
.whats-happening__hero-content {
position: relative;
z-index: 2
}
.whats-happening__hero-content h3 {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-size: 1rem;
line-height: 1.2;
margin-bottom: 16px
}
[lang=cs_CZ] .whats-happening__hero-content h3,
[lang=hu_HU] .whats-happening__hero-content h3,
[lang=pl_PL] .whats-happening__hero-content h3,
[lang=tr_tr] .whats-happening__hero-content h3,
[lang=vi_vi] .whats-happening__hero-content h3,
html[lang=cs] .whats-happening__hero-content h3,
html[lang=hu] .whats-happening__hero-content h3,
html[lang=pl] .whats-happening__hero-content h3,
html[lang=tr] .whats-happening__hero-content h3,
html[lang=vi] .whats-happening__hero-content h3 {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .whats-happening__hero-content h3,
html[lang=ko] .whats-happening__hero-content h3 {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .whats-happening__hero-content h3,
html[lang=th] .whats-happening__hero-content h3 {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .whats-happening__hero-content h3,
html[lang=ja] .whats-happening__hero-content h3 {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .whats-happening__hero-content h3,
[lang=zh-hant] .whats-happening__hero-content h3,
html[lang=zh-cn] .whats-happening__hero-content h3,
html[lang=zh-hant] .whats-happening__hero-content h3 {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
@media screen and (min-width:550px) {
.whats-happening__hero-content h3 {
font-size: 1.938rem
}
}
@media screen and (min-width:960px) {
.whats-happening__hero-content h3 {
font-size: 1.563rem
}
}
@media screen and (min-width:1280px) {
.whats-happening__hero-content h3 {
font-size: 1.938rem
}
}
@media screen and (min-width:400px) {
.whats-happening__hero-content {
padding: 1rem 0
}
}
.whats-happening__articles {
display: grid;
gap: 16px
}
@media screen and (min-width:960px) {
.whats-happening__articles {
grid-template-columns: 1fr 1fr
}
}
@media screen and (min-width:1280px) {
.whats-happening__articles {
grid-template-columns: 1fr;
-ms-flex: 1 1 40%;
flex: 1 1 40%;
gap: 24px
}
}
.whats-happening__article {
list-style: none;
margin: 0;
box-shadow: 0 4px 4px rgba(10, 10, 10, .15);
border-radius: 8px;
background-color: rgba(128, 128, 128, .2);
padding: 0;
position: relative;
transition: .3s ease-out;
top: 0;
min-height: 100px
}
@media screen and (min-width:550px) {
.whats-happening__article {
min-height: 124px
}
}
.whats-happening__article:hover {
top: -5px;
box-shadow: 0 0 28px 0 rgba(22, 178, 216, .07)
}
.whats-happening__article:active {
border: 1px solid #fff;
border-radius: 12px
}
@media screen and (min-width:960px) {
.whats-happening__article:active {
border: 2px solid #fff
}
}
.whats-happening__article-card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
border-radius: 8px;
min-height: 85px;
height: 100%
}
@media screen and (min-width:550px) {
.whats-happening__article-card {
min-height: 120px
}
}
.whats-happening__article-card h3 {
font-size: 1.125rem;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden
}
.whats-happening__article-title-wrapper {
padding: .5rem 1rem;
margin-right: 120px;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
row-gap: 16px;
/*width: 50%*/
}
@media screen and (min-width:550px) {
.whats-happening__article-title-wrapper {
width: 100%;
padding: 1rem .5rem 1rem 1.625rem;
margin-right: 250px
}
}
@media screen and (min-width:960px) {
.whats-happening__article-title-wrapper {
width: 50%
}
}
@media screen and (min-width:1280px) {
.whats-happening__article-title-wrapper {
width: 100%
}
}
@media screen and (min-width:1440px) {
.whats-happening__article-title-wrapper {
margin-right: 280px
}
}
.whats-happening__article-title {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em;
min-height: 54px
}
[lang=cs_CZ] .whats-happening__article-title,
[lang=hu_HU] .whats-happening__article-title,
[lang=pl_PL] .whats-happening__article-title,
[lang=tr_tr] .whats-happening__article-title,
[lang=vi_vi] .whats-happening__article-title,
html[lang=cs] .whats-happening__article-title,
html[lang=hu] .whats-happening__article-title,
html[lang=pl] .whats-happening__article-title,
html[lang=tr] .whats-happening__article-title,
html[lang=vi] .whats-happening__article-title {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .whats-happening__article-title,
html[lang=ko] .whats-happening__article-title {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .whats-happening__article-title,
html[lang=th] .whats-happening__article-title {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .whats-happening__article-title,
html[lang=ja] .whats-happening__article-title {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .whats-happening__article-title,
[lang=zh-hant] .whats-happening__article-title,
html[lang=zh-cn] .whats-happening__article-title,
html[lang=zh-hant] .whats-happening__article-title {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
.whats-happening__category {
font-weight: 800;
text-transform: uppercase;
letter-spacing: -.03em;
font-size: .75rem;
color: rgba(101, 100, 98, .9)
}
@media screen and (min-width:550px) {
.whats-happening__category {
font-size: .938rem
}
}
.whats-happening__category-wrapper {
display: -ms-flexbox;
display: flex;
-moz-column-gap: .5rem;
column-gap: .5rem;
-ms-flex-align: center;
align-items: center
}
.whats-happening__article-image-wrapper {
position: relative
}
.whats-happening__article-image {
position: absolute;
right: 0;
top: 0;
height: 100%;
background-size: cover;
background-position: center;
border-radius: 8px;
aspect-ratio: 180/138
}
@media screen and (min-width:1280px) {
.whats-happening__article-image {
display: block
}
}
.whats-happening__cta--mobile-wrapper {
text-align: center;
display: block
}
@media screen and (min-width:960px) {
.whats-happening__cta--mobile-wrapper {
display: none
}
}
.whats-happening__cta--mobile {
padding: 16px
}
.whats-happening__badge {
left: 8px;
top: 8px
}
.whats-happening__badge--top-right {
right: 8px;
top: 8px
}
.whats-happening__hero-wrapper:hover {
text-decoration: none
}
.whats-happening__hero-wrapper:hover .whats-happening__hero {
top: -5px;
box-shadow: 0 0 28px 0 rgba(22, 178, 216, .07)
}
.whats-happening__hero-wrapper:hover .whats-happening__hero .responsive-media {
-ms-transform: scale(1.05);
transform: scale(1.05)
}
.whats-happening__hero-wrapper:active .whats-happening__hero {
border: 1px solid #fff;
border-radius: 4px;
box-shadow: 0 0 28px 0 rgba(22, 178, 216, .07)
}
body.theme-arc2 .whats-happening {
background-color: #000;
background-position: center right;
background-repeat: no-repeat;
background-image: url(/assets/img/arc2/4fc41b662c875cf1d00e2aa786a2cb76/whatshappening-min.png);
background-size: cover
}
body.theme-arc2 .whats-happening:after {
background: 0 0;
display: none
}
body.theme-arc2 .whats-happening__category {
color: #94a3cd
}
body.theme-arc2 .whats-happening__article {
background-color: rgba(46, 61, 103, .5)
}
body.theme-arc2 .whats-happening__article:hover {
box-shadow: none;
background-color: #2e3d67
}
body.theme-arc2 .whats-happening__article:active,
body.theme-arc2 .whats-happening__article:focus,
body.theme-arc2 .whats-happening__article:focus-visible {
border: 3px solid #b8c1de;
outline: 0
}
body.theme-arc2 .whats-happening__hero-wrapper {
box-shadow: none
}
body.theme-arc2 .whats-happening__hero-wrapper:active,
body.theme-arc2 .whats-happening__hero-wrapper:focus,
body.theme-arc2 .whats-happening__hero-wrapper:focus-visible {
border: 3px solid #7184bd;
outline: 0;
border-radius: 8px
}
body.theme-arc2 .whats-happening__hero-wrapper:active .whats-happening__hero,
body.theme-arc2 .whats-happening__hero-wrapper:focus .whats-happening__hero,
body.theme-arc2 .whats-happening__hero-wrapper:focus-visible .whats-happening__hero {
border: none
}
body.theme-arc2 .whats-happening__cta {
background-color: rgba(112, 131, 189, .2)
}
.who-we-are {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px
}
@media screen and (min-width:960px) {
.who-we-are {
padding-top: 80px;
padding-bottom: 80px;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-align: center;
align-items: center
}
}
.who-we-are__image-wrapper {
position: relative;
max-width: 500px;
width: 100%;
-ms-flex-negative: 1;
flex-shrink: 1;
aspect-ratio: 1;
overflow: hidden;
margin-bottom: 24px
}
@media screen and (min-width:960px) {
.who-we-are__image-wrapper {
margin-bottom: 0;
margin-right: 46px
}
}
.who-we-are__image {
position: absolute;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
.who-we-are__content {
min-width: 320px;
max-width: 550px;
-ms-flex-preferred-size: 50%;
flex-basis: 50%
}
.who-we-are__title {
font-family: 'Riot Sans Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-weight: 600;
font-size: 34px;
line-height: 38px;
text-transform: uppercase;
padding-bottom: 24px
}
[lang=cs_CZ] .who-we-are__title,
[lang=hu_HU] .who-we-are__title,
[lang=pl_PL] .who-we-are__title,
[lang=tr_tr] .who-we-are__title,
[lang=vi_vi] .who-we-are__title,
html[lang=cs] .who-we-are__title,
html[lang=hu] .who-we-are__title,
html[lang=pl] .who-we-are__title,
html[lang=tr] .who-we-are__title,
html[lang=vi] .who-we-are__title {
font-family: 'Riot Sans Latin', Arial, sans-serif
}
[lang=ko_ko] .who-we-are__title,
html[lang=ko] .who-we-are__title {
font-family: 'Riot Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .who-we-are__title,
html[lang=th] .who-we-are__title {
font-family: 'Riot Sans Thai', sans-serif;
line-height: 1.4
}
[lang=ja] .who-we-are__title,
html[lang=ja] .who-we-are__title {
font-family: 'Riot Sans JP', sans-serif
}
[lang=zh-cn] .who-we-are__title,
[lang=zh-hant] .who-we-are__title,
html[lang=zh-cn] .who-we-are__title,
html[lang=zh-hant] .who-we-are__title {
font-family: 'Riot Sans CN', sans-serif
}
@media screen and (min-width:960px) {
.who-we-are__title {
font-size: 42px;
line-height: 44px
}
}
.who-we-are__description {
font-family: 'Inter V Latin', Arial, sans-serif;
letter-spacing: -.03em;
font-size: 18px;
line-height: 24px
}
[lang=cs_CZ] .who-we-are__description,
[lang=hu_HU] .who-we-are__description,
[lang=pl_PL] .who-we-are__description,
[lang=tr_tr] .who-we-are__description,
[lang=vi_vi] .who-we-are__description,
html[lang=cs] .who-we-are__description,
html[lang=hu] .who-we-are__description,
html[lang=pl] .who-we-are__description,
html[lang=tr] .who-we-are__description,
html[lang=vi] .who-we-are__description {
font-family: 'Inter V Latin', Arial, sans-serif
}
[lang=ko_ko] .who-we-are__description,
html[lang=ko] .who-we-are__description {
font-family: 'Noto Sans Korean', RixSGo, sans-serif
}
[lang=th_th] .who-we-are__description,
html[lang=th] .who-we-are__description {
font-family: 'Noto Sans Thai', sans-serif;
letter-spacing: 0
}
[lang=ja] .who-we-are__description,
html[lang=ja] .who-we-are__description {
font-family: 'Noto Sans JP', sans-serif
}
[lang=zh-cn] .who-we-are__description,
[lang=zh-hant] .who-we-are__description,
html[lang=zh-cn] .who-we-are__description,
html[lang=zh-hant] .who-we-are__description {
font-family: 'Noto Sans CN', sans-serif;
letter-spacing: 0
}
@font-face {
font-family: Beaufort;
src: url(/assets/font/theme/ruination/8fe4718a1633dcf6e33185c086e07e69/BeaufortforLOL-Bold.woff2) format('woff2'), url(/assets/font/theme/ruination/4b2bd1003d4d48eaaad1c60d7a317693/BeaufortforLOL-Bold.woff) format('woff');
font-style: normal;
font-weight: 700;
font-display: block
}
.theme-ruination ::-moz-selection {
color: #f4f3f2;
background: #a38e40;
text-shadow: none
}
.theme-ruination ::selection {
color: #f4f3f2;
background: #a38e40;
text-shadow: none
}
.theme-ruination .main {
padding-bottom: 50px
}
.theme-ruination .footer__inner {
background-color: #111
}
.theme-ruination .superhero-feature__heading {
width: 80%;
max-width: 1000px;
text-transform: uppercase;
color: #00efb4;
text-shadow: 1px 2px 0 #a38e40, 0 0 10px #0d1819, 0 0 20px #0d1819;
font-family: Beaufort, 'Proxima Nova W02', Arial, sans-serif;
-webkit-animation: none;
animation: none;
opacity: 1;
letter-spacing: .01em
}
[lang=ru_ru] .theme-ruination .superhero-feature__heading,
html[lang=ru] .theme-ruination .superhero-feature__heading {
font-family: Beaufort, 'Proxima Nova W10', 'Proxima Nova W02', Arial, sans-serif
}
[lang=ko_ko] .theme-ruination .superhero-feature__heading,
html[lang=ko] .theme-ruination .superhero-feature__heading {
font-family: Beaufort, RixSGo, sans-serif
}
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
.theme-ruination .superhero-feature__heading {
background-image: url(/assets/img/content/theme/ruination/7790a9f6c901256c753bad1547f86f31/button-bg.jpg);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: none;
filter: drop-shadow(1px 2px 0 #a38e40) drop-shadow(0 0 10px #0d1819) drop-shadow(0 0 20px #0d1819)
}
}
.theme-ruination [class*=widget__wrapper--cardgrid] .ruin-smoke-container {
display: none
}
.theme-ruination .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] {
margin-top: -60px;
position: relative;
z-index: 1
}
.theme-ruination .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .ruin-smoke-container {
display: block
}
.theme-ruination .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .card-grid {
position: static;
background: 0 0;
padding-bottom: 80px
}
.theme-ruination .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .card-grid:before {
content: '';
position: absolute;
top: 60px;
bottom: 0;
left: 0;
width: 100%;
background-color: #0d1819;
background-image: url(/assets/img/content/theme/ruination/a89d996e4495f10aebcfcde15e0991cf/ruined-bg.jpg);
background-size: cover;
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%)
}
.theme-ruination .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .card-grid:after {
content: '';
position: absolute;
top: 60px;
bottom: -2px;
left: 0;
width: 100%;
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
background-color: #00efb4;
z-index: -1
}
.theme-ruination .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .grid {
margin-left: -2px
}
.theme-ruination .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .grid__item {
padding-left: 2px;
margin-bottom: 2px
}
@media screen and (min-width:550px) {
.theme-ruination .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .card,
.theme-ruination .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .card-cover,
.theme-ruination .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .card-cover-alt {
box-shadow: 0 0 0 2px #00efb4
}
}
.theme-ruination .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .card .button--text,
.theme-ruination .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .card-cover .button--text,
.theme-ruination .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .card-cover-alt .button--text {
color: #e7e6e3
}
.theme-ruination .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .button:active,
.theme-ruination .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .button:focus,
.theme-ruination .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .button:hover {
color: #0d1819
}
.theme-ruination .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .button:active span,
.theme-ruination .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .button:focus span,
.theme-ruination .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .button:hover span {
border-bottom-color: #0d1819
}
.theme-ruination .widget__wrapper--textwithimage {
position: relative
}
.theme-ruination .widget__wrapper--textwithimage .text-with-image__image {
box-shadow: 0 0 0 2px #00efb4
}
.theme-ruination .widget__wrapper--textwithimage .heading {
text-transform: uppercase;
color: #00efb4;
text-shadow: #0d1819, 0 0 10px #0d1819;
font-family: Beaufort, 'Proxima Nova W02', Arial, sans-serif
}
[lang=ru_ru] .theme-ruination .widget__wrapper--textwithimage .heading,
html[lang=ru] .theme-ruination .widget__wrapper--textwithimage .heading {
font-family: Beaufort, 'Proxima Nova W10', 'Proxima Nova W02', Arial, sans-serif
}
[lang=ko_ko] .theme-ruination .widget__wrapper--textwithimage .heading,
html[lang=ko] .theme-ruination .widget__wrapper--textwithimage .heading {
font-family: Beaufort, RixSGo, sans-serif
}
.theme-ruination .widget__wrapper--textwithimage p {
color: #f4f3f2
}
.theme-ruination .widget__wrapper--textwithimage .ruin-smoke-container {
display: block
}
.theme-ruination .widget__wrapper--textwithimage>* {
position: relative
}
.theme-ruination .widget__wrapper--textwithimage:before {
content: '';
position: absolute;
top: -100px;
bottom: -100px;
left: 0;
width: 100%;
background-color: #0d1819;
background-image: url(/assets/img/content/theme/ruination/afe80bf003f5459eacb66f85683c58a0/ruined-bg-2.jpg);
background-size: cover
}
.theme-ruination .widget .button:not(.button--secondary):not(.button--text) {
background-color: #00efb4;
color: #0d1819;
background-image: url(/assets/img/content/theme/ruination/7790a9f6c901256c753bad1547f86f31/button-bg.jpg);
background-size: cover;
background-position: 50% 50% !important;
font-size: 16px;
box-shadow: 0 0 0 0 #a38e40;
transition-property: all;
-webkit-clip-path: none !important;
clip-path: none !important
}
.theme-ruination .widget .button:not(.button--secondary):not(.button--text) span {
border: 0 !important
}
.theme-ruination .widget .button:not(.button--secondary):not(.button--text):active,
.theme-ruination .widget .button:not(.button--secondary):not(.button--text):focus,
.theme-ruination .widget .button:not(.button--secondary):not(.button--text):hover {
box-shadow: 0 0 0 3px #a38e40
}
@font-face {
font-family: Beaufort;
src: url(/assets/font/theme/sentinels/6ba190062a273513e54d686f22bea68a/BeaufortforLOL-Regular.woff) format('woff');
font-style: normal;
font-weight: 400;
font-display: block
}
.theme-sentinels ::-moz-selection {
color: #edfaf7;
background: #a38e40;
text-shadow: none
}
.theme-sentinels ::selection {
color: #edfaf7;
background: #a38e40;
text-shadow: none
}
.theme-sentinels .main {
background-color: #edfaf7;
background-image: url(/assets/img/content/theme/sentinels/99ab1a0fb4676ab4b39ab540e233e8db/sentinels-bg.jpg);
background-size: repeat;
background-position: 0 100%;
padding-bottom: 50px
}
.theme-sentinels .footer__inner {
background-color: #21262d
}
.theme-sentinels .superhero-feature__heading {
width: 80%;
max-width: 1000px;
text-transform: uppercase;
color: #a38e40;
font-family: Beaufort, 'Proxima Nova W02', Arial, sans-serif;
font-weight: 400;
-webkit-animation: none;
animation: none;
opacity: 1;
letter-spacing: .01em
}
[lang=ru_ru] .theme-sentinels .superhero-feature__heading,
html[lang=ru] .theme-sentinels .superhero-feature__heading {
font-family: Beaufort, 'Proxima Nova W10', 'Proxima Nova W02', Arial, sans-serif
}
[lang=ko_ko] .theme-sentinels .superhero-feature__heading,
html[lang=ko] .theme-sentinels .superhero-feature__heading {
font-family: Beaufort, RixSGo, sans-serif
}
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
.theme-sentinels .superhero-feature__heading {
background-image: url(/assets/img/content/theme/sentinels/6414975d90fb81232ff1efeb60ff287a/texture.jpg);
background-size: 50% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: none
}
}
.theme-sentinels .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] {
margin-top: -60px;
position: relative;
z-index: 1
}
.theme-sentinels .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .card-grid {
position: static;
background: 0 0;
padding-bottom: 80px
}
.theme-sentinels .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .grid {
margin-left: -24px
}
.theme-sentinels .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .grid__item {
padding-left: 24px;
margin-bottom: 24px
}
.theme-sentinels .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .card,
.theme-sentinels .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .card-cover,
.theme-sentinels .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .card-cover-alt {
box-shadow: 0 0 0 2px #a38e40;
outline: 2px solid #a38e40;
outline-offset: 4px
}
.theme-sentinels .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .card .card-cover-alt__actions-mobile,
.theme-sentinels .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .card-cover .card-cover-alt__actions-mobile,
.theme-sentinels .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .card-cover-alt .card-cover-alt__actions-mobile {
display: none
}
.theme-sentinels .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .card-cover-alt__image {
background: #a38e40
}
.theme-sentinels .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .button:active,
.theme-sentinels .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .button:focus,
.theme-sentinels .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .button:hover {
color: #21262d
}
.theme-sentinels .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .button:active span,
.theme-sentinels .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .button:focus span,
.theme-sentinels .widget__wrapper--homepagehero+[class*=widget__wrapper--cardgrid] .button:hover span {
border-bottom-color: #21262d
}
.theme-sentinels .widget__wrapper--textwithimage {
position: relative;
z-index: 1
}
.theme-sentinels .widget__wrapper--textwithimage .text-with-image__image {
box-shadow: 0 0 0 2px #a38e40;
outline: 2px solid #a38e40;
outline-offset: 4px
}
@media screen and (min-width:960px) {
.theme-sentinels .widget__wrapper--textwithimage .grid {
display: -ms-flexbox;
display: flex
}
}
@media screen and (min-width:960px) {
.theme-sentinels .widget__wrapper--textwithimage .grid__item+.grid__item {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.theme-sentinels .widget__wrapper--textwithimage .grid__item+.grid__item:before {
content: '';
position: absolute;
top: 0;
left: 40px;
right: 0;
bottom: 0;
background-image: url(/assets/img/content/theme/sentinels/eed091b13c74f56058d0b2af627b7bea/frame-top.svg), url(/assets/img/content/theme/sentinels/7a18f6daefc359ea42ef9a3b18800aed/frame-bottom.svg);
background-position: center top, center bottom;
background-repeat: no-repeat;
background-size: contain;
z-index: -1
}
}
@media screen and (min-width:1280px) {
.theme-sentinels .widget__wrapper--textwithimage .grid__item+.grid__item:before {
top: 40px;
left: 60px;
right: 20px;
bottom: 40px
}
}
.theme-sentinels .widget__wrapper--textwithimage .heading {
margin-top: 0;
text-transform: uppercase;
color: #a38e40;
font-family: Beaufort, 'Proxima Nova W02', Arial, sans-serif;
font-weight: 400
}
[lang=ru_ru] .theme-sentinels .widget__wrapper--textwithimage .heading,
html[lang=ru] .theme-sentinels .widget__wrapper--textwithimage .heading {
font-family: Beaufort, 'Proxima Nova W10', 'Proxima Nova W02', Arial, sans-serif
}
[lang=ko_ko] .theme-sentinels .widget__wrapper--textwithimage .heading,
html[lang=ko] .theme-sentinels .widget__wrapper--textwithimage .heading {
font-family: Beaufort, RixSGo, sans-serif
}
@media screen and (max-width:549px) {
.theme-sentinels .widget__wrapper--textwithimage .heading {
margin-top: 20px
}
}
.theme-sentinels .widget__wrapper--textwithimage p {
color: #21262d
}
.theme-sentinels .widget__wrapper--textwithimage>* {
position: relative
}
.theme-sentinels .widget__wrapper--textwithimage .widget .button:not(.button--secondary):not(.button--text) {
background: 0 0;
background-color: #a38e40;
color: #edfaf7;
font-size: 16px;
box-shadow: 0 0 0 0 #a38e40;
transition-property: all;
-webkit-clip-path: none !important;
clip-path: none !important
}
.theme-sentinels .widget__wrapper--textwithimage .widget .button:not(.button--secondary):not(.button--text) span {
border: 0 !important
}
.theme-sentinels .widget__wrapper--textwithimage .widget .button:not(.button--secondary):not(.button--text):active,
.theme-sentinels .widget__wrapper--textwithimage .widget .button:not(.button--secondary):not(.button--text):focus,
.theme-sentinels .widget__wrapper--textwithimage .widget .button:not(.button--secondary):not(.button--text):hover {
background-color: #21262d;
box-shadow: 0 0 0 3px #21262d
}
@media print {
@page {
margin: .5cm
}
* {
background: 0 0 !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important
}
a,
a:visited {
text-decoration: underline
}
a[href]:after {
content: ' (' attr(href) ')'
}
abbr[title]:after {
content: ' (' attr(title) ')'
}
a[href^='#']:after,
a[href^='javascript:']:after {
content: ''
}
blockquote,
pre {
border: 1px #555;
page-break-inside: avoid
}
thead {
display: table-header-group
}
img,
tr {
page-break-inside: avoid
}
img {
max-width: 100% !important
}
h2,
h3,
p {
orphans: 3;
widows: 3
}
h2,
h3 {
page-break-after: avoid
}
}