/*====================================================================*/
/*------------------------- RESET + CLEARFIX -------------------------*/
/*====================================================================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
[hidden], template {
display: none !important;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
.cf:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.cf { display: inline-table; }
* html .cf { height: 1%; }
.cf { display: block; }
/*====================================================================*/
/*------------------------------- FONTS ------------------------------*/
/*====================================================================*/
@font-face {
font-family: Telegraf;
src: url("../fonts/telegraf-bold.woff2") format("woff2"),
url("../fonts/telegraf-bold.woff") format("woff");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Telegraf;
src: url("../fonts/telegraf-regular.woff2") format("woff2"),
url("../fonts/telegraf-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Telegraf;
src: url("../fonts/telegraf-ultrabold.woff2") format("woff2"),
url("../fonts/telegraf-ultrabold.woff") format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Telegraf;
src: url("../fonts/telegraf-ultralight.woff2") format("woff2"),
url("../fonts/telegraf-ultralight.woff") format("woff");
font-weight: 100;
font-style: normal;
font-display: swap;
}
/*====================================================================*/
/*------------------------------- MAIN -------------------------------*/
/*====================================================================*/
/* Základní globální styly obsahu webu.
* Chcete-li upravit konkrétní element, je vhodné pro něj vytvořit
* samostatnou třídu nebo před selektor tagu přidat selektor komponentu,
* jehož je element součástí. Přepisování stylů pomocí názvů tagů může
* způsobit nepředvídatelné výsledky ve zbytku stránky.
*/
/* Odstraní posuvníky v Chromu, pokud je stránka upravována
* pomocí Live Preview v editoru Brackets. Simulace mobilních
* systémů, kde posuvník nezmenšuje obsah. */
html[data-brackets-id]::-webkit-scrollbar {
display: none;
}
@-ms-viewport {
width: device-width;
}
:root:lang(cs),
:not(:lang(cs)) > :lang(cs) {
quotes: "\201e" "\201c" "\201a" "\2018"
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: inherit;
}
:after,
:before {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
html {
-webkit-text-size-adjust: 100%;
background-color: #fff;
}
html,
body {
height: 100%;
}
/* Odstraňuje focus v IE. */
html:focus,
body:focus {
outline: none;
}
body {
display: flex;
flex-direction: column;
min-width: 320px;
font-family: sans-serif;
font-size: 1.125rem;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-kerning: auto;
text-rendering: optimizeLegibility;
line-height: 1.33;
}
svg:not(:root) {
overflow: hidden;
}
svg {
fill: currentColor;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
}
h1 {
margin-bottom: 1.5625rem;
font-size: 2.9375rem;
line-height: 1.1702128;
}
h2,
h3 {
line-height: 1.25;
}
h2 {
font-size: 1.5625rem;
}
h2,
h3,
h4,
h5,
h6 {
margin-top: 1.875rem;
margin-bottom: 1.25rem;
}
h4,
h5,
h6 {
margin-top: 1.875rem;
margin-bottom: 1.25rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 1.125rem;
}
h5 {
font-size: 1.0625rem;
}
h6 {
font-size: 1.0625rem;
font-weight: 400;
}
@media (max-width: 1219px) {
h1 {
font-size: 2.625rem;
}
}
@media (max-width: 1023px) {
h1 {
font-size: 2.375rem;
line-height: 1.25;
}
}
@media (max-width: 767px) {
h1 {
margin-bottom: 1.5rem;
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
}
@media (max-width: 479px) {
h1 {
font-size: 1.75rem;
}
}
p:not([class]),
table.basic {
margin: 1.25rem 0;
}
q,
blockquote {
quotes: inherit;
font-style: italic;
}
blockquote {
padding: 0 1.25rem;
margin: 1.875rem;
margin-right: 0;
font-size: 1.25rem;
border-left: 2px solid #939393;
}
@media (max-width: 767px) {
blockquote {
margin-left: 0;
}
}
blockquote p {
font-size: inherit;
}
blockquote p:first-of-type:before {
content: open-quote;
}
blockquote p:last-of-type:after {
content: close-quote;
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
hr,
img:not([class]),
table:not([class]),
video:not([class]),
iframe:not([class]),
figure:not([class]) {
margin: 2.5rem 0;
}
@media (max-width: 767px) {
hr,
img:not([class]),
table:not([class]),
video:not([class]),
iframe:not([class]),
figure:not([class]) {
margin: 2.1875rem 0;
}
}
ol:not([class]),
ul:not([class]),
dl:not([class]) {
margin: 1.875rem 0;
}
@media (max-width: 767px) {
ol:not([class]),
ul:not([class]),
dl:not([class]) {
margin: 1.5625rem 0;
}
}
iframe:not([class]),
img:not([class]) {
display: table;
max-width: 100%;
margin-right: auto;
margin-left: auto;
}
img[alt]:not([class]) {
font-style: italic;
color: #939393;
}
figure:not([class]) {
display: table;
max-width: 100%;
margin-right: auto;
margin-left: auto;
}
figure img:not([class]),
figure video:not([class]),
figure iframe:not([class]) {
margin-top: 0;
margin-bottom: 0;
}
figcaption {
margin-top: 0.9375rem;
font-size: 0.9375rem;
line-height: 1.25rem;
font-style: italic;
color: #939393;
}
ol:not([class]) {
list-style: decimal inside;
}
ul:not([class]) {
list-style: disc inside;
}
li:not([class]),
dt:not([class]),
dd:not([class]) {
margin-bottom: 0.3125rem;
}
a {
text-decoration: none;
color: #FF0007;
}
a:hover,
a:focus {
color: #005AAA;
}
a:focus {
text-decoration: underline;
}
@supports (text-decoration-color: red) {
a {
text-decoration: underline;
text-decoration-color: transparent;
}
a:focus {
text-decoration-color: currentColor;
}
}
a:not([class]):visited {
color: #ae0f14;
}
b,
strong {
font-weight: bold;
}
i,
em,
cite {
font-style: italic;
}
s {
text-decoration: line-through;
}
s:before,
s:after {
position: absolute;
height: 1px;
width: 1px;
padding: 0;
margin: -1px;
white-space: nowrap;
border: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
overflow: hidden;
}
s:before {
content: "začátek přeškrtnutého textu";
}
s:after {
content: "konec přeškrtnutého textu";
}
u {
text-decoration: underline;
}
[class~="-"] {
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
caption {
margin-bottom: 0.625rem;
font-size: 1rem;
}
.full caption,
.wide caption {
text-align: left;
}
table.basic caption {
margin: 0;
font: inherit;
font-weight: bold;
text-align: left;
}
table:not([class]),
table.wide,
table.full {
margin-right: auto;
margin-left: auto;
}
@media (max-width: 639px) {
table:not([class]),
table.wide,
table.full {
font-size: 1rem;
}
}
table:not([class]) th,
table.wide th,
table.full th,
table:not([class]) td,
table.full td,
table.wide td {
padding: 0.625rem 0.9375rem;
min-width: 140px;
}
table:not([class]) th,
table.full th,
table.wide th {
font-weight: bold;
text-align: left;
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}
table.basic th {
font-weight: 400;
text-align: left;
}
table.basic th,
table.basic td {
min-width: 4ch;
padding: 0 0.375rem;
}
table.basic th:first-child,
table.basic td:first-child {
padding-left: 0;
}
table.basic th:last-child,
table.basic td:last-child {
padding-right: 0;
}
table:not([class]) tr:nth-child(even),
table.full tr:nth-child(even) *,
table.wide tr:nth-child(even) * {
background-color: rgba(0, 0, 0, 0.035);
}
hr {
margin: 2.5rem;
border: none;
border-top: 1px solid #a0a0a0;
}
@media (max-width: 767px) {
hr {
margin: 2.1875rem;
}
}
/*====================================================================*/
/*------------------------------ UTILITY -----------------------------*/
/*====================================================================*/
/* Pomocné CSS:
*
* 1. center
* 2. push-footer
* 3. x-desktop, x-tablet, x-js, visually-hidden, ...
* 4. preserve-aspect-ratio (16:9, 4:3, ...)
* 5. clear-button, clear-margin, clear-inline-spacing
* 6. auto-size, full-size
* 7. uppercase
* 8. nohyphens, nowrap
* 9. [data-before]:before, ...
* 10. br
* 11. hf-opacity
* 12. font1, ...
* 13. color1, bg1, ...
*/
/* Zarovná osbah do středu stránky. */
.center {
width: 100%;
max-width: 1366px;
padding: 0 30px;
margin: 0px auto;
}
/* GENERATE: MEDIA | TWIG | settings.yml
====
{% for name, range in media %}{% if name == "mobile" %}=GX=
@media (max-width: {{range[1]}}px) {
.center {
padding: 0 15px;
}
}{% endif %}{% endfor %}
*/
@media (max-width: 767px) {
.center {
padding: 0 15px;
}
}
/* /GENERATE: MEDIA */
/* Zajišťuje, aby byla patička vždy dole.
* Patička stránky musí být následující element a mít flex-shrink: 0.
* */
.push-footer {
flex: 1 0 auto;
}
.push-footer + * {
flex-shrink: 0;
}
/* GENERATE: MEDIA | media.twig | settings.yml */
/* Skryje obsah podle velikosti viewportu. */
@media (min-width: 1220px) {
#rewrite .x-desktop {
display: none;
}
}
@media (min-width: 1220px) and (max-width: 1385px) {
#rewrite .x-desktop-s {
display: none;
}
}
@media (min-width: 1386px) {
#rewrite .x-desktop-l {
display: none;
}
}
@media (min-width: 768px) and (max-width: 1219px) {
#rewrite .x-tablet {
display: none;
}
}
@media (min-width: 1024px) and (max-width: 1219px) {
#rewrite .x-tablet-l {
display: none;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
#rewrite .x-tablet-s {
display: none;
}
}
@media (max-width: 767px) {
#rewrite .x-mobile {
display: none;
}
}
@media (min-width: 640px) and (max-width: 767px) {
#rewrite .x-mobile-l {
display: none;
}
}
@media (min-width: 480px) and (max-width: 639px) {
#rewrite .x-mobile-m {
display: none;
}
}
@media (max-width: 479px) {
#rewrite .x-mobile-s {
display: none;
}
}
/* /GENERATE: MEDIA */
@media screen {
#rewrite .x-screen {
display: none;
}
}
/* Skryje obsah, pokud je zapnutý/vypnutý JavaScript. */
@media all {
#rewrite.no-js .x-no-js,
#rewrite.js .x-js,
#rewrite.no-js .if-no-js-hidden,
#rewrite.js .if-js-hidden {
display: none;
}
/* Vyzuálně skryje obsah, ale zůstane přístupný pro čtečky obrazovek apod. */
#rewrite.no-js .if-no-js-visually-hidden,
#rewrite.js .if-js-visually-hidden,
#rewrite .visually-hidden {
position: absolute;
height: 1px;
width: 1px;
padding: 0;
margin: -1px;
white-space: nowrap;
border: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
overflow: hidden;
}
}
/* Zachovává poměr stran.
*
* Velikost elementu se nastaví na nulu a pomocí paddingu zadaného
* v procentech na pseudoelementu :after se vytvoří výška zachovávající
* poměr stran. Vnořený element se nastaví na position: absolute
* a roztáhne se přes celý rodičovský element.
*
* Příklad: Potřebujeme, aby video zachovávalo poměr stran 16:9:
*
*
* ...
*
*
* Pokud přednastavené poměry nejsou vhodné, lze použit třídu
* preserve-aspect-ratio a v komponentu pak požit vlastní padding
* na :after:
*
* Příklad: Potřebujeme, aby iframe zachovával poměr stran 3:2:
*
*
*
*
*
* .iframe-wrapper:after {
* padding-bottom: 150%;
* }
* */
/* GENERATE: ASPECT-RATIO | aspect-ratio.twig | YAML
====
ratios: [3:2, 34:21, 36:15, 1:1, 16:9, 10:7] #například: [preserve-aspect-ratio, 16:9, 3:2]
*/
[class~="3:2"],
[class~="34:21"],
[class~="36:15"],
[class~="1:1"],
[class~="16:9"],
[class~="10:7"] {
position: relative;
}
[class~="3:2"]:after,
[class~="34:21"]:after,
[class~="36:15"]:after,
[class~="1:1"]:after,
[class~="16:9"]:after,
[class~="10:7"]:after {
content: "";
display: block;
}
[class~="3:2"]:after {
padding-bottom: 66.6666666%;
}
[class~="34:21"]:after {
padding-bottom: 61.7647058%;
}
[class~="36:15"]:after {
padding-bottom: 41.6666666%;
}
[class~="1:1"]:after {
padding-bottom: 100%;
}
[class~="16:9"]:after {
padding-bottom: 56.25%;
}
[class~="10:7"]:after {
padding-bottom: 70%;
}
[class~="3:2"] > *,
[class~="34:21"] > *,
[class~="36:15"] > *,
[class~="1:1"] > *,
[class~="16:9"] > *,
[class~="10:7"] > * {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
}
/* /GENERATE: ASPECT-RATIO */
/* Nastaví vnořený element (obrázek) na object-fit: cover;
* U nepodporujících prohlížečů roztáhne vnořený element
* minimálně na velikost rodičovského a zarovná ho do středu.
* Používá se na elementech, které zachovávají poměr stran. */
.cover-aspect-ratio {
overflow: hidden;
}
.cover-aspect-ratio > * {
position: absolute;
top: 50%;
left: 50%;
width: auto;
min-width: 100%;
height: auto;
min-height: 100%;
transform: translate(-50%, -50%);
}
@supports (object-fit: cover) {
.cover-aspect-ratio > * {
top: 0;
left: 0;
object-fit: cover;
object-position: center center;
width: 100%;
height: 100%;
transform: none;
}
}
/* Nastaví vnořený element (obrázek) na object-fit: contain;
* U nepodporujících prohlížečů omezí velikost vnořeného
* elementu na rozměry rodičovského a zarovná ho do středu.
* Používá se na elementech, které zachovávají poměr stran. */
.contain-aspect-ratio > * {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
margin: auto;
}
@supports (object-fit: contain) {
.contain-aspect-ratio > * {
right: auto;
bottom: auto;
object-fit: contain;
object-position: center center;
width: 100%;
height: 100%;
}
}
/* Omezí velikost vnořeného elementu na rozměry rodičovského
* a zarovná ho do středu.
* Používá se na elementech, které zachovávají poměr stran. */
.max-aspect-ratio > * {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
margin: auto;
}
/* Odstraňuje výchozí stylování elementu button. */
.clear-button {
padding: 0;
margin: 0;
font-size: inherit;
font-weight: normal;
text-decoration: none;
line-height: inherit;
color: inherit;
background: none;
border: 0;
border-radius: 0;
outline: none;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
touch-action: manipulation;
}
.clear-button::-moz-focus-inner {
padding: 0;
border: 0;
}
/* Odstraní margin z elementu a jeho potomků. */
.clear-margin,
.clear-margin * {
margin: 0;
}
/* Nastaví font-size na 0px, čímž odstraní inline mezery mezi elementy. */
.clear-inline-spacing {
font-size: 0px;
}
/* Automatická velikost (obrázku) nepřesahující kontejner. */
.auto-size {
width: auto;
max-width: 100%;
height: auto;
}
/* Roztáhne element přes relativní rodičovský element. */
.full-size {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.uppercase {
text-transform: uppercase;
}
/* Zabrání rozdělování slov. */
.nohyphens,
a.nohyphens,
.nohyphens *,
.nohyphens a {
word-wrap: normal;
overflow-wrap: normal;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
#rewrite .nowrap {
white-space: nowrap;
}
/* Zobrazí inline obsah před/za elementem podle jeho data-atributu.
* Vhodné pro oddělení obsahu.
*
* Příklad: Chceme oddělit položky seznamu znakem |:
*
* */
#rewrite [data-before]:before {
content: attr(data-before);
}
#rewrite [data-after]:after {
content: attr(data-after);
}
/* Zalomí inline obsah (vhodné pro seznamy, kde není možné použít
Informační systém
Informační systém
Informační systém
Informační systém
2M
XM
*/
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.4375rem 0.9375rem;
font-size: 0.75rem;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
line-height: 1.25rem;
white-space: nowrap;
color: inherit;
background: none;
border: 0.125rem solid;
border-radius: 8px;
outline-offset: -2px;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
touch-action: manipulation;
}
@media (max-width: 767px) {
.btn--responsive {
padding: 0.375rem 0.9375rem;
}
}
.btn:focus {
text-decoration: none;
outline: none;
}
.btn,
.btn:hover,
.btn:focus,
input:focus ~ .btn,
.btn:active {
transition-property: color, background, border-color, transform;
}
input:hover ~ .btn,
input:focus ~ .btn {
transition-duration: 0.125s;
transition-timing-function: ease-out;
}
.btn:focus-visible,
input:focus-visible ~ .btn {
outline-width: 2px;
outline-style: solid;
}
.btn:-moz-focusring,
input:-moz-focusring ~ .btn {
outline-width: 2px;
outline-style: solid;
}
.btn::-moz-focus-inner {
padding: 0;
border: 0;
}
.btn--no-radius {
border-radius: 0;
}
.btn--large:not(.btn--responsive) {
font-size: 0.9375rem;
line-height: 1.75rem;
}
@media (min-width: 768px) {
.btn--large.btn--responsive {
font-size: 0.9375rem;
line-height: 1.75rem;
}
}
@media (max-width: 767px) {
.btn--large.btn--responsive {
font-size: 0.875rem;
line-height: 1.375rem;
}
}
.btn--larger-text {
font-size: 0.875rem;
}
.btn--stroke {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
border-width: 0.0625rem;
}
.btn--stroke:focus {
padding: 0.4375rem 0.875rem;
border-width: 0.125rem;
}
@media (max-width: 767px) {
.btn--stroke {
padding-top: 0.4375rem;
padding-bottom: 0.4375rem;
}
.btn--stroke:focus {
padding: 0.375rem 0.875rem;
}
}
.btn--square {
min-width: 2.875rem;
padding-right: 0.375rem;
padding-left: 0.375rem;
font-size: 1.4375rem;
font-weight: 400;
line-height: 1.75rem;
}
input:focus ~ .btn--square,
.btn--square:focus {
padding-right: 0.3125rem;
padding-left: 0.3125rem;
}
@media (max-width: 767px) {
.btn--square.btn--responsive {
min-width: 2.375rem;
padding-right: 0.3125rem;
padding-left: 0.3125rem;
font-size: 1.125rem;
line-height: 1.375rem;
}
input:focus ~ .btn--square.btn--responsive,
.btn--square.btn--responsive:focus {
padding-right: 0.25rem;
padding-left: 0.25rem;
}
}
.btn--fill.btn--dark {
color: #fff;
background-color: #231F20;
border-color: #231F20;
}
.btn--fill.btn--dark[aria-pressed="true"],
input:checked + .btn--fill.btn--dark,
.btn--fill.btn--dark:hover {
color: #fff;
background-color: #005AAA;
border-color: #005AAA;
}
input:focus + .btn--fill.btn--dark,
.btn--fill.btn--dark:focus {
color: #fff;
background-color: #005AAA;
border-color: #000;
}
input:focus-visible + .btn--fill.btn--dark,
.btn--fill.btn--dark:focus-visible {
border-color: #005AAA;
}
input:-moz-focusring + .btn--fill.btn--dark,
.btn--fill.btn--dark:-moz-focusring {
border-color: #005AAA;
}
.btn--fill.btn--dark:disabled {
color: #939393;
background-color: rgba(35, 31, 32, 0.1);
border-color: rgba(35, 31, 32, 0);
cursor: default;
}
.btn--fill.btn--light {
color: #231F20;
background-color: #f6f6f6;
border-color: #f6f6f6;
outline-color: #FF0007;
}
.btn--fill.btn--light[aria-pressed="true"],
input:checked + .btn--fill.btn--light,
.btn--fill.btn--light:hover {
color: #fff;
background-color: #231F20;
border-color: #231F20;
}
input:focus + .btn--fill.btn--light,
.btn--fill.btn--light:focus {
color: #fff;
background-color: #231F20;
border-color: #FF0007;
}
input:focus-visible + .btn--fill.btn--light,
.btn--fill.btn--light:focus-visible {
border-color: #231F20;
}
input:-moz-focusring + .btn--fill.btn--light,
.btn--fill.btn--light:-moz-focusring {
border-color: #231F20;
}
.btn--fill.btn--primary {
color: #fff;
background-color: #FF0007;
border-color: #FF0007;
}
.btn--fill.btn--primary:hover {
color: #FF0007;
background-color: #fff;
border-color: #fff;
}
.btn--fill.btn--primary:focus {
color: #FF0007;
background-color: #fff;
border-color: #FF0007;
}
.btn--fill.btn--primary:focus-visible {
border-color: #fff;
outline-color: #FF0007;
}
.btn--fill.btn--primary:-moz-focusring {
border-color: #fff;
outline-color: #FF0007;
}
.btn--fill.btn--primary.btn--to-dark:hover {
color: #fff;
background-color: #231F20;
border-color: #231F20;
}
.btn--fill.btn--primary.btn--to-dark:focus {
color: #fff;
background-color: #231F20;
border-color: #FF0007;
}
.btn--fill.btn--primary.btn--to-dark:focus-visible {
border-color: #231F20;
outline-color: #FF0007;
}
.btn--fill.btn--primary.btn--to-dark:-moz-focusring {
border-color: #231F20;
outline-color: #FF0007;
}
.btn--fill.btn--white {
color: #000;
background-color: #fff;
border-color: #fff;
}
.btn--fill.btn--white:hover {
color: #fff;
background-color: #FF0007;
border-color: #FF0007;
}
.btn--fill.btn--white:focus {
color: #fff;
background-color: #FF0007;
border-color: #fff;
}
.btn--fill.btn--white:focus-visible {
border-color: #FF0007;
outline-color: #fff;
}
.btn--fill.btn--white:-moz-focusring {
border-color: #FF0007;
outline-color: #fff;
}
.btn--stroke.btn--white {
color: #fff;
background-color: rgba(255, 255, 255, 0);
border-color: #fff;
}
.btn--stroke.btn--white[aria-pressed="true"],
input:checked ~ .btn--stroke.btn--white,
.btn--stroke.btn--white:hover {
color: #000;
background-color: #fff;
}
input:focus ~ .btn--stroke.btn--white,
.btn--stroke.btn--white:focus {
color: #000;
background-color: #fff;
border-color: #FF0007;
outline-color: #FF0007;
}
input:focus-visible ~ .btn--stroke.btn--white,
.btn--stroke.btn--white:focus-visible {
border-color: #fff;
}
input:-moz-focusring ~ .btn--stroke.btn--white,
.btn--stroke.btn--white:-moz-focusring {
border-color: #fff;
}
.btn .text {
flex-shrink: 1;
display: block;
text-align: left;
white-space: normal;
}
@media (min-width: 768px) {
.btn--medium .text {
line-height: 1.375rem;
}
}
.btn .icon {
max-width: 1.16666em;
max-height: 1.16666em;
margin-right: 0.4375rem;
margin-left: -0.1875rem;
transition: inherit;
transition-property: transform;
}
.btn .icon:last-child {
margin-right: -0.1875rem;
margin-left: 0.4375rem;
}
.btn--larger-text .icon {
max-width: 1em;
max-height: 1em;
}
.btn .loader {
flex: none;
width: 1em;
height: 1em;
margin-right: -4px;
margin-left: 0em;
transform: scale(0) translateZ(0);
backface-visibility: hidden;
font-size: 4px;
border-radius: 50%;
opacity: 0;
transition:
transform 0.2s ease-out 0s,
opacity 0.2s ease-out 0s,
margin 0.2s ease-out 0.1s;
animation: ui__loader 1.1s infinite ease;
}
.btn--primary .loader {
animation-name: ui__loader--dark;
}
.btn--loading .loader {
margin-right: 5em;
margin-left: 1.33333em;
transform: scale(1) translateZ(0);
opacity: 1;
transition:
transform 0.2s ease-out 0.1s,
opacity 0.2s ease-out 0.1s,
margin 0.2s ease-out 0s;
}
.btn:not(.btn--loading) .loader * {
display: none;
}
/*====================================================================*/
/*------------------------------ TITLE -------------------------------*/
/*====================================================================*/
.title {
margin: 0;
font-size: 2.4375rem;
font-weight: bold;
text-transform: uppercase;
line-height: 2.875rem;
}
@media (max-width: 767px) {
.title {
font-size: 2rem;
line-height: 2.375rem;
}
}
.title--originalcase {
text-transform: none;
}
.title--medium {
font-size: 1.875rem;
line-height: 2.25rem;
}
@media (max-width: 767px) {
.title--medium {
font-size: 1.5625rem;
line-height: 2rem;
}
}
.title--small {
font-size: 1.4375rem;
line-height: 1.75rem;
}
@media (min-width: 768px) {
.title--large {
font-size: 2.8125rem;
line-height: 3.125rem;
}
}
.title--x-large {
font-size: 2.1875rem;
line-height: 2.5rem;
}
@media (max-width: 359px) {
.title--x-large {
font-size: 2rem;
line-height: 2.375rem;
}
}
@media (min-width: 640px) and (max-width: 767px) {
.title--x-large {
font-size: 2.5rem;
line-height: 3rem;
}
}
@media (min-width: 768px) {
.title--x-large {
font-size: 2.75rem;
line-height: 3.37rem;
}
}
@media (min-width: 1024px) {
.title--x-large {
font-size: 3.125rem;
line-height: 3.75rem;
}
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*------------------------------- FORM -------------------------------*/
/*====================================================================*/
.form__item--label-padding,
.form__item--multiselect,
.form__item--select,
.form__item--text {
padding-top: 0.75rem;
}
.form__item--select,
.form__item--multiselect,
.form__item--text {
position: relative;
display: inline-block;
vertical-align: top;
}
.form__item--select .form__label,
.form__multiselect .form__label,
.form__item--text .form__label {
position: absolute;
top: 0.75rem;
left: 0;
padding: 0.5rem 0.9375rem;
max-width: 100%;
max-height: 100%;
font-size: 0.9375rem;
text-align: left;
line-height: 1.5rem;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
transition: 0.2s cubic-bezier(0, 0, 0.25, 1) 0s;
}
@media (max-width: 767px) {
.form__item--select .form__label,
.form__multiselect .form__label,
.form__item--text .form__label {
padding: 0.4375rem 0.9375rem;
line-height: 1.375rem;
}
}
.form__label--invisible {
opacity: 0;
}
.form__item--text .form__label--invisible,
.form__item--text.form__item--has-value .form__label,
.form__item--select .form__label--invisible,
.form__item--select.form__item--has-value .form__label,
.form__item--multiselect.form__item--has-value .form__multiselect .form__label:not(.form__label--selected),
.no-js .form__item--select .form__label--invisible,
.no-js .form__item--text .form__label--invisible,
.no-js .form__item--text .form__label,
.no-js .form__item--multiselect .form__multiselect .form__label:not(.form__label--selected) {
top: 0rem;
padding: 0rem 0.625rem;
font-size: 0.8125rem;
line-height: 1.375rem;
}
.form__item--text.form__item--has-value .form__label,
.form__item--multiselect.form__item--has-value .form__multiselect .form__label,
.form__item--select.form__item--has-value .form__label,
.no-js .form__item--select .form__label,
.no-js .form__item--text .form__label,
.no-js .form__item--multiselect .form__multiselect .form__label {
opacity: 1;
transition: 0.15s cubic-bezier(0, 0, 0.25, 1) 0s;
}
.form__item--select .form__label .text,
.form__item--text .form__label .text,
.form__multiselect .form__label .text {
display: block;
padding: 0 3px;
margin-left: -3px;
background-color: #fff;
overflow: hidden;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.form__multiselect,
.form__item--select .form__input,
.form__item--text .form__input {
height: 2.5rem;
padding: 0.4375rem 0.75rem;
font-size: 0.9375rem;
line-height: 1.5rem;
border: 0.0625rem solid #a4a4a4;
outline: none;
}
@media (max-width: 767px) {
.form__multiselect,
.form__item--select .form__input,
.form__item--text .form__input {
height: 2.25rem;
padding: 0.375rem 0.75rem;
line-height: 1.375rem;
}
}
.form__multiselect:hover,
.form__item--text .form__input:hover,
.form__item--select .form__input:hover {
border-color: #231F20;
}
.form__multiselect[aria-expanded="true"],
.form__multiselect:focus,
.form__item--select .form__input:focus,
.form__item--text .form__input:focus {
border-color: #FF0007;
}
/*---------------------------- ARROW ----------------------------*/
.form__arrow {
content: "";
position: absolute;
top: 0.75rem;
right: 0.625rem;
width: 12px;
height: 10px;
margin-top: calc(2.5rem / 2 - 5px);
color: #FF0007;
pointer-events: none;
transition: inherit;
}
@media (max-width: 767px) {
.form__arrow {
margin-top: calc(2.375rem / 2 - 5px);
}
}
.form__item--date:focus-within .form__arrow {
transform: rotate(180deg);
}
.form__multiselect[aria-expanded="true"] .form__arrow,
.form__item--date[focus-within] .form__arrow {
transform: rotate(180deg);
}
/*--------------------------------------------------------------------*/
/*------------------------------- TEXT -------------------------------*/
/*--------------------------------------------------------------------*/
.form__item--text {
font-size: 0;
}
.form__item--has-value.form__item--text .form__input,
.no-js .form__item--text .form__input {
padding-top: 0.5rem;
padding-bottom: 0.375rem;
}
@media (max-width: 767px) {
.form__item--has-value.form__item--text .form__input,
.no-js .form__item--text .form__input {
padding-top: 0.4375rem;
padding-bottom: 0.3125rem;
}
}
.form__item--text .form__input::-webkit-input-placeholder { color: #231F20; }
.form__item--text .form__input::-moz-placeholder { color: #231F20; opacity: 1; }
.form__item--text .form__input:-ms-input-placeholder { color: #231F20; }
.form__item--text .form__input:-moz-placeholder { color: #231F20; opacity: 1; }
.form__item--text .form__input:placeholder { color: #231F20; opacity: 1; }
.form__item--text .form__input::-ms-clear { display: none; width : 0; height: 0; }
.form__item--text .form__input::-ms-reveal { display: none; width : 0; height: 0; }
/*---------------------------- SEARCH ----------------------------*/
.form__item--search .form__input::-webkit-search-decoration,
.form__item--search .form__input::-webkit-search-cancel-button,
.form__item--search .form__input::-webkit-search-results-button,
.form__item--search .form__input::-webkit-search-results-decoration { display: none; }
.form__item--search .form__input::-ms-clear {
display: none;
}
.form__item--search .form__input::-ms-reveal {
display: none;
}
/*---------------------------- DATE ----------------------------*/
.form__date-range {
display: flex;
width: 250px;
}
.form__date-range .form__item {
position: relative;
width: 50%;
}
.form__date-range .form__item:hover,
.form__date-range .form__item[focus-within] {
z-index: 2;
}
.form__date-range .form__item:focus-within {
z-index: 2;
}
.form__date-range .form__input {
width: 100%;
}
.js .form__item--date .form__label,
.js .form__item--date .form__input {
padding-right: 1.75rem;
}
.form__date-range .form__item:last-child .form__input {
margin-left: -1px;
}
.no-js .form__item--date .form__arrow {
display: none;
}
/*--------------------------------------------------------------------*/
/*------------------------------ SELECT ------------------------------*/
/*--------------------------------------------------------------------*/
.form__item--select {
font-size: 0;
}
.form__item--select .form__label,
.form__item--select .form__input {
padding-right: 2rem;
}
.form__item--has-value.form__item--select .form__input,
.no-js .form__item--select .form__input {
padding-top: 0.5rem;
padding-bottom: 0.375rem;
}
@media (max-width: 767px) {
.form__item--has-value.form__item--select .form__input,
.no-js .form__item--select .form__input {
padding-top: 0.4375rem;
padding-bottom: 0.3125rem;
}
}
.form__item--select .form__input::-ms-expand {
display: none;
}
/*--------------------------------------------------------------------*/
/*----------------------------- CHEKCBOX -----------------------------*/
/*--------------------------------------------------------------------*/
.form__item--checkbox .form__label {
position: relative;
display: block;
cursor: pointer;
}
.form__item--checkbox .form__input {
position: absolute;
top: 0.5625rem;
left: 0px;
z-index: 3;
width: 0.9375rem;
height: 0.9375rem;
padding: 0;
margin: 0;
opacity: 0;
}
.form__item--checkbox .text {
position: relative;
display: block;
padding: 0.375rem 0px;
padding-left: 1.5625rem;
font-size: 0.9375rem;
line-height: 1.25rem;
transition: all 0.275s cubic-bezier(.5, .25, .5, 1) 0s;
transition-property: color, background, border, box-shadow, opacity, outline;
}
.form__item--checkbox .form__input:hover ~ .text,
.form__item--checkbox .form__input:focus ~ .text,
.form__item--checkbox .form__input:checked ~ .text {
transition: all 0.125s ease-out 0s;
transition-property: color, background, border, box-shadow, opacity, outline;
}
.form__item--checkbox .form__input:focus-visible ~ .text {
outline: 2px solid black;
}
.form__item--checkbox .form__input:-moz-focusring ~ .text {
outline: 2px solid black;
}
.form__item--checkbox .text:before,
.form__item--checkbox .text:after {
content: "";
position: absolute;
transition: inherit;
}
.form__item--checkbox .text:before {
top: 0.5625rem;
left: 0px;
width: 0.9375rem;
height: 0.9375rem;
border: 1px solid #a4a4a4;
box-shadow: inset 0px 0px 0px 1px rgba(255, 0, 7, 0);
}
.form__item--checkbox .form__input:hover ~ .text:before {
border-color: #231F20;
}
.form__item--checkbox .form__input:focus ~ .text:before {
border-color: #FF0007;
}
.form__item--checkbox .form__input:focus ~ .text:before {
box-shadow: inset 0px 0px 0px 1px #FF0007;
}
.form__item--checkbox .text:after {
top: 0.75rem;
left: 0.1875rem;
width: 0.5625rem;
height: 0.5625rem;
background-color: #FF0007;
opacity: 0;
}
.form__item--checkbox .form__input:checked ~ .text:after {
opacity: 1;
}
/*--------------------------------------------------------------------*/
/*---------------------------- MULTISELECT ---------------------------*/
/*--------------------------------------------------------------------*/
.form__item--multiselect {
width: 180px;
}
.form__multiselect {
width: 100%;
}
.form__item--multiselect .form__legend {
margin-bottom: 0.625rem;
font-size: 0.9375rem;
font-weight: bold;
}
.form__multiselect .form__label {
font-weight: 400;
transition: inherit;
}
.form__multiselect .form__label {
padding-right: 2rem;
}
.form__item .form__multiselect .form__label--selected {
opacity: 0;
}
.form__item--has-value .form__multiselect .form__label--selected {
opacity: 1;
}
.form__item--has-value .form__multiselect .form__label--selected {
padding-top: 0.5625rem;
padding-bottom: 0.4375rem;
}
@media (max-width: 767px) {
.form__item--has-value .form__multiselect .form__label--selected {
padding-top: 0.5rem;
padding-bottom: 0.375rem;
}
}
.js .form__multiselect-options-wrapper {
position: absolute;
top: 100%;
left: 0;
z-index: 99;
width: 100%;
max-height: 320px;
padding: 0.625rem 0;
margin-top: 2px;
transform: translateY(-10px);
background-color: #fff;
border: 1px solid #a4a4a4;
opacity: 0;
visibility: hidden;
overflow: auto;
pointer-events: none;
transition: opacity 0.15s ease-out 0s,
transform 0.15s cubic-bezier(0, 0, .15, 1) 0s,
visibility 0s linear 0.15s;
}
.no-js .form__multiselect-options-wrapper {
border: none;
}
.js .form__multiselect[aria-expanded="true"] ~ .form__multiselect-options-wrapper {
transform: translateY(0px);
opacity: 1;
visibility: visible;
pointer-events: auto;
transition:
transform 0.15s cubic-bezier(0, 0, .15, 1) 0s,
opacity 0.15s ease-out 0s;
}
.form__multiselect-option .form__label {
padding-left: 0.9375rem;
padding-right: 0.9375rem;
}
.no-js .form__multiselect-option .form__label {
padding-left: 0;
}
.form__multiselect-option .form__input {
left: 0.9375rem;
}
.no-js .form__multiselect-option .form__input {
padding-left: 0;
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*------------------------------ CARDS -------------------------------*/
/*====================================================================*/
.cards {
display: flex;
flex-wrap: wrap;
margin: -10px;
}
.cards__item {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 33.333%;
display: flex;
flex-wrap: wrap;
max-width: 33.333%;
padding: 10px;
}
@media (max-width: 899px) {
.cards__item {
flex-basis: 50%;
max-width: 50%;
}
}
@media (max-width: 599px) {
.cards__item {
flex-basis: 100%;
max-width: 100%;
}
}
.cards__link {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
color: #231F20;
background-color: #fff;
outline-color: #FF0007;
}
.cards__link:hover,
.cards__link:focus {
color: #FF0007;
}
.cards__image {
display: block;
transition: inherit;
}
.cards__link:hover .cards__image {
opacity: 0.85;
}
.cards__img {
margin: 0;
}
.cards__title {
padding: 25px 30px;
padding-bottom: 12px;
margin-top: auto;
font-size: 2.1875rem;
font-weight: bold;
line-height: 1;
}
@media (min-width: 1024px) and (max-width: 1219px), (min-width: 640px) and (max-width: 767px), (max-width: 399px) {
.cards__title {
padding: 23px 25px;
padding-bottom: 10px;
font-size: 1.875rem;
}
}
@media (min-width: 900px) and (max-width: 1023px), (min-width: 600px) and (max-width: 639px), (max-width: 359px) {
.cards__title {
padding: 19px 20px;
padding-bottom: 8px;
font-size: 1.625rem;
}
}
.cards__description {
padding: 30px;
padding-top: 0px;
margin-bottom: auto;
font-size: 0.9375rem;
line-height: 1.1875rem;
color: #FF0007;
}
@media (min-width: 1024px) and (max-width: 1219px), (min-width: 640px) and (max-width: 767px), (max-width: 399px) {
.cards__description {
padding: 25px;
padding-top: 0px;
font-size: 0.875rem;
line-height: 1.125rem;
}
}
@media (min-width: 900px) and (max-width: 1023px), (min-width: 600px) and (max-width: 639px), (max-width: 359px) {
.cards__description {
padding: 20px;
padding-top: 0px;
font-size: 0.8125rem;
line-height: 1.0625rem;
}
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*--------------------------- SOCIAL-SITES ---------------------------*/
/*====================================================================*/
.social-sites {
display: flex;
flex-wrap: wrap;
align-items: stretch;
font-size: 0;
text-align: left;
}
.social-sites--right-aligned {
text-align: right;
}
.social-sites__site {
display: flex;
align-items: stretch;
vertical-align: middle;
}
.social-sites__site {
margin-right: 4px;
margin-left: -4px;
}
.social-sites--right-aligned .social-sites__site {
margin-left: 4px;
margin-right: -4px;
}
.social-sites__link {
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
color: inherit;
}
.inverse-ui .social-sites__link:hover,
.inverse-ui .social-sites__link:focus {
color: inherit;
opacity: 0.85;
}
.social-sites__link .icon {
width: 1.5rem;
height: 1.5rem;
}
.social-sites--large .social-sites__link .icon {
width: 1.75rem;
height: 1.75rem;
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*-------------------------- ARTICLES-LIST ---------------------------*/
/*====================================================================*/
.articles-list {
display: flex;
flex-wrap: wrap;
}
.articles-list__article {
flex-grow: 1;
}
.articles-list__link {
display: block;
text-decoration: none;
color: inherit;
}
.articles-list__link:hover,
.articles-list__link:focus {
text-decoration: none;
color: inherit;
}
.articles-list__title {
width: 100%;
min-height: calc(1.4117647em * 3);
margin: 0;
font-size: 1.0625rem;
font-weight: 400;
line-height: 1.4117647;
transition: inherit;
}
.articles-list--large .articles-list__title {
min-height: calc(1.3em * 3);
font-size: 1.25rem;
line-height: 1.3;
}
.articles-list__article--main .articles-list__title {
display: flex;
min-height: calc(1.128205128em * 3);
font-size: 2.4375rem;
font-weight: bold;
line-height: 1.128205128;
}
.articles-list__label + .articles-list__title {
margin-top: 0.375rem;
}
.articles-list--large .articles-list__label + .articles-list__title {
margin-top: 0.75rem;
}
.articles-list__article--main .articles-list__label + .articles-list__title {
margin-top: 1.5625rem;
margin-bottom: 2.375rem;
}
.articles-list__link:hover .articles-list__title,
.articles-list__link:focus .articles-list__title {
text-decoration: underline;
}
@supports (text-decoration-color: red) {
.articles-list__title {
text-decoration: underline;
text-decoration-color: transparent;
}
.articles-list__link:hover .articles-list__title,
.articles-list__link:focus .articles-list__title {
text-decoration-color: inherit;
}
}
.articles-list__image-wrapper {
position: relative;
margin: 0;
overflow: hidden;
transition: inherit;
}
.articles-list__image {
display: block;
transition: inherit;
}
.articles-list__image-wrapper .icon {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 3;
width: 12%;
max-width: 45px;
min-width: 30px;
height: calc(12% * 3 / 2);
max-height: 45px;
min-height: 30px;
padding: calc(7px + 0.25%);
color: #FF0007;
background-color: #fff;
border-radius: 8px;
pointer-events: none;
}
.inverse-ui .articles-list__image-wrapper .icon {
color: #fff;
background-color: #231F20;
}
.articles-list__label {
margin: 0;
font-size: 0.6875rem;
text-transform: uppercase;
line-height: 1.125rem;
color: #FF0007;
}
.articles-list--large .articles-list__label {
font-size: 0.875rem;
line-height: 1.0625rem;
}
.articles-list__image-wrapper + .articles-list__label {
margin-top: 0.75rem;
}
.articles-list--large .articles-list__image-wrapper + .articles-list__label {
margin-top: 1.875rem;
}
/*--------------------------------------------------------------------*/
/*---------------------------- ANIMATIONS ----------------------------*/
/*--------------------------------------------------------------------*/
@supports (animation-name: articles__show) {
.articles-list__article--inserted {
opacity: 0;
animation: articles__show 0.6s cubic-bezier(0, 0, .5, .9) 0s 1 forwards;
will-change: opacity;
}
}
@keyframes articles__show {
to {
opacity: 1;
}
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*------------------------------- TABS -------------------------------*/
/*====================================================================*/
/*
Example:
Tab 1
Content
Tab 2
Content
Accordion on mobile example:
Tab 1
Tab 1
Content
Tab 2
Tab 2
Content
*/
.tabs {
will-change: contents;
}
/*--------------------------------------------------------------------*/
/*------------------------------- NAV --------------------------------*/
/*--------------------------------------------------------------------*/
.tabs__nav,
.tabs__nav-item {
margin: 0;
}
.no-js .tabs__nav {
display: none;
}
.tabs__nav {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
justify-content: safe center;
overflow: auto;
overflow-y: hidden;
scrollbar-width: thin;
scrollbar-color: #c4c4c4 #dfdfdf;
}
@media (max-width: 767px) {
.tabs__nav {
background:
linear-gradient(to right, rgb(223, 223, 223) 0%, rgb(223, 223, 223) 100%),
linear-gradient(to right, rgb(223, 223, 223) 0%, rgb(223, 223, 223) 100%);
background-color: #fff;
background-repeat: no-repeat;
background-position: 0 0, 100% 0;
background-size: 1px 100%, 1px 100%;
background-attachment: scroll, scroll;
border-top: 1px solid #dfdfdf;
}
}
@media (pointer: coarse) {
.tabs__nav {
background:
linear-gradient(to right, rgb(255, 255, 255) 40%, rgba(255, 255, 255, 0)),
linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 60%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(18, 18, 18)' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath transform='rotate(180 12 12)' d='M24 12l-9-8v6h-15v4h15v6z'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(18, 18, 18)' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M24 12l-9-8v6h-15v4h15v6z'/%3E%3C/svg%3E");
background-color: #fff;
background-repeat: no-repeat;
background-position: 0 0, 100% 0, 5px 4px, calc(100% - 5px) 4px;
background-size: 40px 100%, 40px 100%, 9px 9px, 9px 9px;
background-attachment: local, local, scroll, scroll;
}
@media (max-width: 767px) {
.tabs__nav {
background:
linear-gradient(to right, rgb(223, 223, 223) 0%, rgb(223, 223, 223) 100%),
linear-gradient(to right, rgb(223, 223, 223) 0%, rgb(223, 223, 223) 100%),
linear-gradient(to right, rgb(255, 255, 255) 40%, rgba(255, 255, 255, 0)),
linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 60%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(18, 18, 18)' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath transform='rotate(180 12 12)' d='M24 12l-9-8v6h-15v4h15v6z'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(18, 18, 18)' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M24 12l-9-8v6h-15v4h15v6z'/%3E%3C/svg%3E");
background-color: #fff;
background-repeat: no-repeat;
background-position: 0 0, 100% 0, 0 0, 100% 0, 5px 4px, calc(100% - 5px) 4px;
background-size: 1px 100%, 1px 100%, 40px 100%, 40px 100%, 8px 8px, 8px 8px;
background-attachment: scroll, scroll, local, local, scroll, scroll;
}
}
}
.tabs__nav::-webkit-scrollbar {
height: 5px;
width: 5px;
}
.tabs__nav::-webkit-scrollbar-track {
background-color: #dfdfdf;
}
.tabs__nav::-webkit-scrollbar-thumb {
background-color: #c4c4c4;
}
@media (pointer: coarse) {
.tabs__nav {
scrollbar-width: none;
}
.tabs__nav::-webkit-scrollbar {
display: none;
}
}
@media (max-width: 767px) {
.tabs--switch-to-accordion > .tabs__nav,
.tabs--switch-to-accordion > .center > .tabs__nav {
display: none;
}
}
.tabs__nav-item {
position: relative;
transform: translateZ(0);
mix-blend-mode: multiply;
}
.tabs__nav-btn {
display: inline-block;
width: 100%;
padding-bottom: 0.875rem;
outline-offset: -2px;
transition-property: color, background, transform, opacity, border, text-decoration-color;
}
@media (max-width: 1023px) {
.tabs__nav-btn {
padding-bottom: 0.75rem;
}
}
@media (pointer: coarse) {
.tabs__nav-btn {
padding-top: 1rem;
}
@media (max-width: 1023px) {
.tabs__nav-btn {
padding-top: 0.875rem;
}
}
@media (max-width: 767px) {
.tabs__nav-btn {
padding-top: 0.8125rem;
}
}
}
.tabs__nav-btn:hover,
.tabs__nav-btn:focus,
.tabs__nav-btn[aria-pressed="true"] {
z-index: 2;
color: inherit;
}
.tabs__nav-btn[aria-pressed="true"] {
z-index: 3;
}
.tabs__nav-btn:focus {
z-index: 4;
}
.tabs__nav-btn .text {
position: relative;
display: inline-block;
padding: 0 1.875rem;
font-size: 1.4375rem;
font-weight: 400;
line-height: 1.875rem;
white-space: nowrap;
color: inherit;
transition: inherit;
}
@media (max-width: 1023px) {
.tabs__nav-btn .text {
padding: 0 1.5625rem;
font-size: 1.3125rem;
}
}
@media (max-width: 899px) {
.tabs__nav-btn .text {
padding: 0 1.375rem;
}
}
.tabs__nav-btn[aria-pressed="true"] .text {
font-weight: bold;
}
.tabs__nav-btn .text:before {
content: "";
position: absolute;
top: 0;
left: 100%;
bottom: 0;
height: calc(100% - 0.35em);
width: 1px;
margin: auto;
background-color: #231F20;
}
.tabs__nav-item:last-child .tabs__nav-btn .text:before {
content: none;
}
.tabs__nav-btn .text:after {
content: "";
position: absolute;
top: 100%;
left: 0px;
right: 0;
transform: scaleY(0);
transform-origin: bottom center;
backface-visibility: hidden;
width: calc(100% - 1.875rem * 2);
height: 4px;
margin: auto;
margin-top: 0.625rem;
background-color: #FF0007;
border-top-right-radius: 2px;
border-top-left-radius: 2px;
opacity: 0;
transition: inherit;
}
@media (max-width: 1023px) {
.tabs__nav-btn .text:after {
width: calc(100% - 1.5625rem * 2);
margin-top: 0.5rem;
}
}
@media (max-width: 899px) {
.tabs__nav-btn .text:after {
width: calc(100% - 1.375rem * 2);
}
}
.tabs__nav-btn:focus .text:after,
.tabs__nav-btn:hover .text:after,
.tabs__nav-btn[aria-pressed="true"] .text:after {
transform: scaleY(1);
opacity: 1;
}
.tabs__nav-btn .text .icon {
display: inline-block;
margin-left: 4px;
vertical-align: baseline;
}
/*--------------------------------------------------------------------*/
/*-------------------------- ACCORDION-BTN ---------------------------*/
/*--------------------------------------------------------------------*/
.tabs__accordion-btn {
display: none;
}
@media (max-width: 767px) {
.js .tabs--switch-to-accordion > .tabs__list > .tabs__tab > .tabs__accordion-btn,
.js .tabs--switch-to-accordion > .tabs__list > .tabs__tab > .center > .tabs__accordion-btn {
display: flex;
align-items: baseline;
}
.tabs--switch-to-accordion .tabs__accordion-btn {
position: relative;
width: 100%;
padding: 0.625rem 15px;
font-size: 1.4375rem;
font-weight: 400;
text-align: left;
line-height: 1.875rem;
white-space: nowrap;
color: inherit;
outline-offset: -2px;
}
.tabs--switch-to-accordion .tabs__accordion-btn[aria-pressed="true"] {
font-weight: bold;
}
.tabs--switch-to-accordion .tabs__accordion-btn .text {
transition: inherit;
}
.tabs--switch-to-accordion .tabs__accordion-btn .text:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 100%;
transform: scaleY(0.3333333333333);
transform-origin: bottom left;
background-color: #939393;
transition: inherit;
}
.tabs--switch-to-accordion .tabs__accordion-btn:focus .text:after {
transform: scaleX(1);
background-color: #231F20;
}
.tabs--switch-to-accordion .tabs__accordion-btn[aria-pressed="true"] .text:after {
transform: scaleX(1);
}
.tabs--switch-to-accordion .tabs__accordion-btn:hover .text:after,
.tabs--switch-to-accordion .tabs__accordion-btn[aria-pressed="true"] .text:after {
background-color: #FF0007;
}
@media (hover: none) {
.tabs--switch-to-accordion .tabs__accordion-btn[aria-pressed="false"]:hover .text:after {
background-color: #939393;
}
.tabs--switch-to-accordion .tabs__accordion-btn[aria-pressed="false"]:focus .text:after {
background-color: #231F20;
}
}
.tabs--switch-to-accordion .tabs__accordion-btn .icon {
margin-left: 8px;
transition: inherit;
}
.tabs--switch-to-accordion .tabs__accordion-btn[aria-pressed] .icon {
margin-left: auto;
color: #939393;
}
.tabs--switch-to-accordion .tabs__accordion-btn[aria-pressed="true"] .icon {
transform: rotate(180deg);
}
.tabs--switch-to-accordion .tabs__accordion-btn[aria-pressed]:focus .icon {
color: #231F20;
}
.tabs--switch-to-accordion .tabs__accordion-btn[aria-pressed]:hover .icon,
.tabs--switch-to-accordion .tabs__accordion-btn[aria-pressed="true"] .icon,
.tabs--switch-to-accordion .tabs__accordion-btn[aria-pressed="true"]:focus .icon {
color: #FF0007;
}
@media (hover: none) {
.tabs--switch-to-accordion .tabs__accordion-btn[aria-pressed="false"]:hover .icon {
color: #939393;
}
.tabs--switch-to-accordion .tabs__accordion-btn[aria-pressed="false"]:focus .icon {
color: #231F20;
}
}
}
/*--------------------------------------------------------------------*/
/*------------------------------ LIST --------------------------------*/
/*--------------------------------------------------------------------*/
.tabs__list,
.tabs__tab {
margin: 0;
}
.tabs__list:not(.cf) {
overflow: hidden;
}
.tabs__tab {
will-change: opacity;
}
.tabs__tab:not(.cf) {
overflow: hidden;
}
.js .tabs__tab {
display: none;
}
@media (max-width: 767px) {
.js .tabs--switch-to-accordion > .tabs__list > .tabs__tab {
display: block;
}
}
.js .tabs__tab--active {
display: block;
}
.tabs__tab-content {
}
@media (max-width: 767px) {
.js .tabs--switch-to-accordion > .tabs__list > .tabs__tab > .tabs__tab-content {
display: none;
overflow: hidden;
}
.js .tabs--switch-to-accordion > .tabs__list > .tabs__tab--active > .tabs__tab-content {
display: block;
}
}
.js .tabs__tab-content--narrow > .center {
max-width: 910px;
}
.tabs__tab-content h6,
.tabs__tab-content h5,
.tabs__tab-content h4,
.tabs__tab-content h3,
.tabs__tab-content h2 {
text-align: left;
}
.tabs__tab-content h3.if-js-visually-hidden,
.tabs__tab-content h2.if-js-visually-hidden {
}
.tabs__tab-content > :first-child:not([class]),
.no-js .tabs__tab-content > .if-js-visually-hidden:first-child,
.js .tabs__tab-content > h3.if-js-visually-hidden + :not([class]),
.tabs__tab-content h3:not([class]) + :not([class]),
.js .tabs__tab-content > h2.if-js-visually-hidden + :not([class]),
.tabs__tab-content h2:not([class]) + :not([class]) {
margin-top: 0;
}
.tabs__tab-content > :last-child {
margin-bottom: 0;
}
.tabs__title {
padding-top: 3.4375rem;
padding-bottom: 1.875rem;
font-size: 2.3125rem;
line-height: 2.8125rem;
}
@media (max-width: 1023px) {
.tabs__title {
font-size: 2.25rem;
line-height: 2.75rem;
}
}
@media (max-width: 767px) {
.tabs__title {
padding-top: 2rem;
padding-bottom: 1.5625rem;
font-size: 2rem;
line-height: 2.625rem;
}
}
@media (max-width: 639px) {
.tabs__title {
font-size: 1.875rem;
line-height: 2.5rem;
}
}
@media (max-width: 479px) {
.tabs__title {
padding-top: 1.5rem;
padding-bottom: 1.25rem;
font-size: 1.5625rem;
line-height: 2.125rem;
}
}
/*====================================================================*/
/*---------------------------- CARDS-TABS ----------------------------*/
/*====================================================================*/
@media (min-width: 768px) {
.cards-tabs .tabs__list {
background-color: #231F20;
}
}
.cards-tabs .tabs__tab-content {
padding: 55px 0;
color: #fff;
background-color: #231F20;
}
@media (max-width: 1023px) {
.cards-tabs .tabs__tab-content {
padding-top: 45px;
padding-bottom: 45px;
}
}
@media (max-width: 767px) {
.cards-tabs .tabs__tab-content {
padding-top: 40px;
padding-bottom: 40px;
}
}
@media (max-width: 639px) {
.cards-tabs .tabs__tab-content {
padding-top: 35px;
padding-bottom: 35px;
}
}
@media (max-width: 479px) {
.cards-tabs .tabs__tab-content {
padding-top: 30px;
padding-bottom: 30px;
}
}
.no-js .cards-tabs .tabs__title.if-js-visually-hidden {
padding-top: 0;
margin: 0;
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*----------------------------- GALLERY ------------------------------*/
/*====================================================================*/
.gallery .slick-track {
will-change: transform;
}
/*--------------------------------------------------------------------*/
/*------------------------------ IMAGES ------------------------------*/
/*--------------------------------------------------------------------*/
.gallery__images {
position: relative;
margin-bottom: 10px;
}
@media (max-width: 399px) {
.gallery__images {
margin-bottom: 6px;
}
}
.gallery__images-list {
font-size: 0;
overflow: hidden;
}
.no-js .gallery__images-list {
overflow: auto;
}
.no-js .gallery__images-list {
white-space: nowrap;
}
.no-js .gallery__image {
display: inline-block;
width: calc(100% - 40px);
margin-right: 10px;
}
.no-js .gallery__image:last-child {
margin-right: 0px;
}
.js .gallery__images-list:not(.slick-slider) .gallery__image + .gallery__image {
display: none;
}
.gallery__image-link {
position: relative;
display: block;
background-color: #f6f6f6;
outline: none;
cursor: zoom-in;
}
.gallery__image-link.ui__image-link:hover:before,
.gallery__image-link.ui__image-link:focus:before {
background-color: rgba(255, 255, 255, 0);
}
.no-js noscript {
display: block;
}
.gallery__img {
opacity: 1;
transition: inherit;
}
.no-js noscript ~ .gallery__img {
display: none;
}
.gallery__image-link:hover .gallery__img,
.gallery__image-link:focus .gallery__img {
opacity: 1;
}
.gallery__img.slick-loading {
opacity: 0;
transition-property: border, background, color;
}
/*--------------------------------------------------------------------*/
/*------------------------------ ARROWS ------------------------------*/
/*--------------------------------------------------------------------*/
.gallery__arrow {
position: absolute;
top: 0;
z-index: 2;
display: flex;
align-items: center;
width: 15%;
max-width: 100px;
min-width: 56px;
height: 100%;
backface-visibility: hidden;
color: #fff;
background-color: rgba(0, 0, 0, 0);
outline-color: #fff;
outline-offset: -4px;
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.4));
opacity: 0.5;
}
@media (hover: hover) {
.gallery__arrow {
opacity: 0;
pointer-events: none;
}
}
.gallery__images[focus-within] .gallery__arrow,
.gallery__images:hover .gallery__arrow {
opacity: 1;
pointer-events: auto;
}
.gallery__images:focus-within .gallery__arrow {
opacity: 1;
pointer-events: auto;
}
.gallery__arrow:focus {
background-color: rgba(0, 0, 0, 0.2);
}
.gallery__arrows[focus-within] .gallery__arrow:not(:focus) {
background-color: rgba(0, 0, 0, 0);
}
.gallery__arrows:focus-within .gallery__arrow:not(:focus) {
background-color: rgba(0, 0, 0, 0);
}
.gallery__arrows .gallery__arrow:not(:focus):hover {
background-color: rgba(0, 0, 0, 0.1);
}
.gallery__arrow--prev {
left: 0;
justify-content: flex-start;
padding-left: 30px;
}
.gallery__arrow--next {
right: 0;
justify-content: flex-end;
padding-right: 30px;
}
@media (max-width: 639px) {
.gallery__arrow--prev {
padding-left: 20px;
}
.gallery__arrow--next {
padding-right: 20px;
}
}
.gallery__arrow .icon {
width: 35%;
height: 35%;
backface-visibility: hidden;
transition: inherit;
}
.gallery__arrow--prev:focus .icon,
.gallery__arrow--prev:hover .icon {
transform: translateX(-20%);
}
.gallery__arrow--prev:active .icon {
transform: translateX(-25%);
}
.gallery__arrow--next:focus .icon,
.gallery__arrow--next:hover .icon {
transform: translateX(20%);
}
.gallery__arrow--next:active .icon {
transform: translateX(25%);
}
/*--------------------------------------------------------------------*/
/*------------------------------ THUMBS ------------------------------*/
/*--------------------------------------------------------------------*/
.gallery__thumbs {
position: relative;
overflow: hidden;
}
.gallery__thumbs-images {
margin: -5px;
font-size: 0;
white-space: nowrap;
}
@media (max-width: 399px) {
.gallery__thumbs-images {
margin: -3px;
}
}
.gallery__thumbs-image {
display: inline-block;
width: 25%;
padding: 5px;
vertical-align: top;
}
@media (max-width: 639px) {
.gallery__thumbs-image {
width: 33.333%;
}
}
@media (max-width: 399px) {
.gallery__thumbs-image {
padding: 3px;
}
}
.gallery__thumbs-image-btn {
display: block;
width: 100%;
background-color: #f6f6f6;
border-bottom: 4px solid rgba(255, 0, 7, 0);
outline-offset: -2px;
}
.gallery__thumbs-image-btn[aria-pressed="true"]:not(:focus) .ui__image-link:before {
border-color: #FF0007;
}
.gallery__thumbs-img {
transition: inherit;
}
.gallery__thumb-img.slick-loading {
opacity: 0;
transition-property: border, background, color;
}
/*---------------------------- ARROWS ----------------------------*/
.gallery__thumbs-arrow {
position: absolute;
top: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 100%;
height: calc(100% - 5px);
backface-visibility: hidden;
color: #fff;
background-color: rgba(0, 0, 0, 0.2);
outline-color: #fff;
outline-offset: -4px;
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.4));
}
@media (max-width: 399px) {
.gallery__thumbs-arrow {
width: 40px;
height: calc(100% - 3px);
}
}
.gallery__thumbs-arrow:focus {
background-color: rgba(0, 0, 0, 0.35);
}
.gallery__thumbs-arrows[focus-within] .gallery__thumbs-arrow:not(:focus) {
background-color: rgba(0, 0, 0, 0.1);
}
.gallery__thumbs-arrows:focus-within .gallery__thumbs-arrow:not(:focus) {
background-color: rgba(0, 0, 0, 0.1);
}
.gallery__thumbs-arrows .gallery__thumbs-arrow:not(:focus):hover {
background-color: rgba(0, 0, 0, 0.2);
}
.gallery__thumbs-arrow--prev {
left: 0;
}
.gallery__thumbs-arrow--next {
right: 0;
}
.gallery__thumbs-arrow .icon {
width: 24px;
height: 24px;
backface-visibility: hidden;
transition: inherit;
}
@media (max-width: 399px) {
.gallery__thumbs-arrow .icon {
width: 20px;
height: 20px;
}
}
.gallery__thumbs-arrow--prev:focus .icon,
.gallery__thumbs-arrow--prev:hover .icon {
transform: translateX(-20%);
}
.gallery__thumbs-arrow--prev:active .icon {
transform: translateX(-25%);
}
.gallery__thumbs-arrow--next:focus .icon,
.gallery__thumbs-arrow--next:hover .icon {
transform: translateX(20%);
}
.gallery__thumbs-arrow--next:active .icon {
transform: translateX(25%);
}
/*--------------------------------------------------------------------*/
/*------------------------------ LOADER ------------------------------*/
/*--------------------------------------------------------------------*/
.gallery__loader {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
width: 1em;
min-width: 0;
height: 1em;
min-height: 0;
margin: auto;
transform: translateZ(0);
font-size: 12px;
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s ease-out;
animation: ui__loader 1.1s infinite ease;
}
.cover-aspect-ratio .gallery__loader {
object-fit: none;
}
.gallery__thumbs-image .gallery__loader {
font-size: 8px;
}
@media (max-width: 479px) {
.gallery__loader {
font-size: 10px;
}
.gallery__thumbs-image .gallery__loader {
font-size: 6px;
}
}
.slick-active .gallery__loader {
display: block;
}
img.slick-loading ~ .gallery__loader {
opacity: 1;
}
.gallery__loader * {
display: none;
}
img.slick-loading ~ .gallery__loader * {
display: block;
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*--------------------------- BREADCRUMBS ----------------------------*/
/*====================================================================*/
.breadcrumbs__pages {
padding: 0.125rem 0;
}
.breadcrumbs__page {
display: inline;
line-height: 1.25rem;
color: #939393;
}
.breadcrumbs__page:not(:last-child):after {
content: ">"
}
.breadcrumbs__page-link {
display: inline;
font-size: 1rem;
color: inherit;
}
@media (max-width: 767px) {
.breadcrumbs__page-link {
font-size: 0.9375rem;
}
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*------------------------- BASIC-PAGINATION -------------------------*/
/*====================================================================*/
.basic-pagination__pages {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
.basic-pagination__page {
display: flex;
flex-wrap: wrap;
margin-left: 0.625rem;
}
.basic-pagination__page-link {
display: block;
min-width: 1.625rem;
font-size: 1.125rem;
font-weight: bold;
text-align: center;
line-height: 2rem;
color: inherit;
}
.basic-pagination__page-link:hover,
.basic-pagination__page-link:focus {
color: #FF0007;
}
.basic-pagination__page-link[aria-current="page"]:hover,
.basic-pagination__page-link[aria-current="page"]:focus {
color: inherit;
cursor: default;
}
.basic-pagination__page-link[aria-current="page"] {
background-color: #f6f6f6;
border-radius: 8px;
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*----------------------------- ARTICLE ------------------------------*/
/*====================================================================*/
.article {
padding-top: 35px;
padding-bottom: 60px;
}
@media (max-width: 767px) {
.article {
padding-top: 30px;
padding-bottom: 40px;
}
}
.article--general {
padding-top: 0;
}
.article:not(.article--general) > .center {
max-width: 982px;
}
.article--general > .center {
display: flex;
flex-wrap: wrap;
}
/*--------------------------------------------------------------------*/
/*------------------------------ HEADER ------------------------------*/
/*--------------------------------------------------------------------*/
.article__header {
width: 100%;
}
.article--general .article__header {
margin: 3rem 0;
}
@media (max-width: 1219px) {
.article--general .article__header {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}
}
@media (max-width: 1023px) {
.article--general .article__header {
margin-top: 2.25rem;
margin-bottom: 2.25rem;
}
}
@media (max-width: 639px) {
.article--general .article__header {
margin-top: 2rem;
margin-bottom: 2rem;
}
}
@media (max-width: 479px) {
.article--general .article__header {
margin-top: 1.875rem;
margin-bottom: 1.875rem;
}
}
.article__breadcrumbs {
margin-bottom: 2.1875rem;
}
@media (max-width: 767px) {
.article__breadcrumbs {
margin-bottom: 1.25rem;
}
}
.article--general .article__breadcrumbs {
margin-bottom: 0.625rem;
}
@media (max-width: 479px) {
.article--general .article__breadcrumbs {
margin-bottom: 0.375rem;
}
}
.article__header-content {
display: flex;
align-items: stretch;
margin-bottom: 1.875rem;
}
.article--general .article__header-content {
flex-basis: 100%;
margin-bottom: 0;
}
/*---------------------------- IMAGE ----------------------------*/
.article__side-image {
position: relative;
flex: none;
width: 107px;
margin-right: 45px;
}
@media (min-width: 768px) {
.article__side-image {
min-height: 11.25rem;
}
}
@media (max-width: 1023px) {
.article__side-image {
width: 95px;
margin-right: 30px;
}
}
.article__side-img {
position: absolute;
top: 0;
right: 0;
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
}
/*---------------------------- MAIN ----------------------------*/
.article--offset .article__header-main {
flex-shrink: 1;
}
@media (min-width: 1024px) {
.article--offset .article__header-main:first-child {
padding-left: 152px;
}
.article--offset.article--no-side-image .article__header-main:first-child {
padding-right: 76px;
padding-left: 76px;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.article--offset .article__header-main:first-child {
padding-left: 125px;
}
.article--offset.article--no-side-image .article__header-main:first-child {
padding-right: 62px;
padding-left: 62px;
}
}
.article__label {
margin-bottom: 0.625rem;
font-size: 0.875rem;
text-transform: uppercase;
text-indent: 1px;
line-height: 1.0625rem;
color: #FF0007;
}
.article__info {
font-size: 0.875rem;
line-height: 1.0625rem;
overflow: hidden;
}
.article__author-image {
float: left;
width: 2.75rem;
margin-right: 0.625rem;
border-radius: 50%;
overflow: hidden;
}
.article__author-name {
margin-top: 0.25rem;
margin-bottom: 0.125rem;
font-weight: bold;
color: #FF0007;
}
.article__created {
color: #939393;
}
/*--------------------------------------------------------------------*/
/*------------------------------- NAV --------------------------------*/
/*--------------------------------------------------------------------*/
.article__nav {
flex-basis: 21.2%;
max-width: 21.2%;
}
@media (max-width: 1219px) {
.article__nav {
flex-basis: 25%;
max-width: 25%;
}
}
.article__nav-item {
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
padding-left: 1.11111em;
margin-bottom: -1px;
}
@media (min-width: 1024px) and (max-width: 1385px) {
.article__nav-item {
font-size: 1rem;
}
}
.article__nav-item:after {
content: "";
position: absolute;
bottom: 0px;
right: 0px;
width: calc(100% - 1.11111em);
height: 1px;
background-color: #231F20;
}
.article__nav-link,
.article__nav-sublink {
position: relative;
z-index: 2;
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
color: inherit;
}
.article__nav-link {
padding: 0.66666em 1.11111em;
margin-left: -1.11111em;
font-weight: 400;
}
.article__nav-link:not(span):hover,
.article__nav-link:not(span):focus,
.article__nav-link--active {
color: #fff;
background-color: #FF0007;
}
.article__nav-link[aria-pressed="true"]:not(.article__nav-link--active),
.article__nav-link[aria-pressed]:hover:not(.article__nav-link--active),
.article__nav-link[aria-pressed]:focus:not(.article__nav-link--active) {
color: #fff;
background-color: #005AAA;
}
@supports (text-decoration-color: red) {
.article__nav-link {
text-decoration: underline;
text-decoration-color: transparent;
}
.article__nav-link:not(span):focus {
text-decoration-color: currentColor;
}
}
.article__nav-link--active {
font-weight: bold;
}
.article__nav-link .icon {
top: 2px;
flex-shrink: 0;
margin-left: 1rem;
margin-right: calc(-1.11111em + 0.625rem);
transition: inherit;
transition-property: transform;
}
.article__nav-link[aria-pressed="true"] .icon {
transform: rotate(180deg);
}
.article__nav-subitems {
display: flex;
flex-direction: column;
padding-bottom: 0px;
transition:
padding 0.25s ease 0s;
}
.article__nav-link[aria-expanded="true"] ~ .article__nav-subitems,
.no-js .article__nav-subitems {
padding-bottom: 5px;
}
.article__nav-subitem {
padding-bottom: 0px;
font-size: 0rem;
line-height: 0em;
opacity: 0;
overflow: hidden;
transition:
opacity 0.25s ease 0s,
font-size 0.25s ease 0s,
line-height 0.25s ease 0s,
padding 0.25s ease 0s;
}
.article__nav-link[aria-expanded="true"] ~ .article__nav-subitems .article__nav-subitem,
.no-js .article__nav-subitem {
padding-bottom: 2px;
font-size: 1.0625rem;
line-height: 1.33333em;
opacity: 1;
}
.article__nav-sublink {
display: flex;
justify-content: space-between;
padding: 0em 1.4705882353em;
font-size: 1.0625rem;
overflow: hidden;
transition:
padding 0.25s ease 0s,
color 0.275s cubic-bezier(.5, .25, .5, 1) 0s,
background 0.275s cubic-bezier(.5, .25, .5, 1) 0s;
}
.no-js .article__nav-sublink,
.article__nav-link[aria-expanded="true"] ~ .article__nav-subitems .article__nav-sublink {
padding-top: 0.2352941em;
padding-bottom: 0.2352941em;
}
.article__nav-sublink:hover,
.article__nav-sublink:focus,
.article__nav-sublink--active {
color: #fff;
background-color: #231F20;
}
.article__nav-sublink:hover,
.article__nav-sublink:focus {
transition:
padding 0.25s ease 0s,
color 0.125s ease-out 0s,
background 0.125s ease-out 0s;
}
/*--------------------------------------------------------------------*/
/*----------------------------- CONTENT ------------------------------*/
/*--------------------------------------------------------------------*/
@media (min-width: 1024px) {
.article--offset .article__content {
padding-left: 152px;
}
.article--offset.article--no-side-image .article__content {
padding-right: 76px;
padding-left: 76px;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.article--offset .article__content {
padding-left: 125px;
}
.article--offset.article--no-side-image .article__content {
padding-right: 62px;
padding-left: 62px;
}
}
.article__nav + .article__content {
flex-basis: 78.8%;
max-width: 78.8%;
padding-left: 90px;
}
@media (max-width: 1385px) {
.article__nav + .article__content {
padding-left: 50px;
}
}
@media (max-width: 1219px) {
.article__nav + .article__content {
flex-basis: 75%;
max-width: 75%;
}
}
@media (max-width: 1023px) {
.article__nav + .article__content {
flex-basis: 100%;
max-width: 100%;
padding-left: 0px;
}
}
.article__content--highlight-first p:first-child {
font-weight: bold;
}
.article__table-wrapper {
background:
linear-gradient(to right, rgb(255, 255, 255) 30%, rgba(255, 255, 255, 0)),
linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 70%),
radial-gradient(farthest-side at 0 50%, rgba(35, 31, 32, 0.15), rgba(35, 31, 32, 0)),
radial-gradient(farthest-side at 100% 50%, rgba(35, 31, 32, 0.15), rgba(35, 31, 32, 0));
background-color: #fff;
background-position: 0 0, 100% 0, 0 0, 100% 0;
background-repeat: no-repeat;
background-size: 30px 100%, 30px 100%, 15px 100%, 15px 100%;
background-attachment: local, local, scroll, scroll;
overflow: auto;
}
.article__table-wrapper table {
margin: 0 auto;
}
.article__table-wrapper.wide table,
.article__table-wrapper.full table {
width: 100%;
}
.article__content .full {
width: auto;
margin-left: 0;
margin-right: 0;
}
@media (min-width: 1024px) {
.article--offset .article__content .full {
margin-left: -152px;
}
.article--offset.article--no-side-image .article__content .full {
margin-right: -76px;
margin-left: -76px;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.article--offset .article__content .full {
margin-left: -125px;
}
.article--offset.article--no-side-image .article__content .full {
margin-right: -62px;
margin-left: -62px;
}
}
.article__content .full:not(table),
.article__content .wide:not(table) {
display: block;
}
.article__content .wide {
width: 100%;
}
.article--offset .article__content > table.full {
width: calc(100% + 152px);
}
@media (min-width: 768px) and (max-width: 1023px) {
.article--offset .article__content > table.full {
width: calc(100% + 125px);
}
.article--offset.article--no-side-image .article__content > table.full {
width: calc(100% + 124px);
}
}
.article__content .full:not(table) > *,
.article__content .wide:not(table) > * {
width: 100%;
}
.article__table-wrapper,
.article .galelry,
.article__content > [class~="16:9"],
.article__content > [class~="full"],
.article__content > [class~="wide"] {
margin: 2.5rem 0;
}
@media (max-width: 767px) {
.article__table-wrapper,
.article .gallery,
.article__content > [class~="16:9"],
.article__content > [class~="full"],
.article__content > [class~="wide"] {
margin: 2.1875rem 0;
}
}
@media (min-width: 900px) {
.article:not(.article--offset) .gallery__thumbs-image,
.article .gallery.full .gallery__thumbs-image {
width: 20%;
}
}
.article__content img {
background-color: #f6f6f6;
}
@media (min-width: 1024px) {
.article__content > a > img.full,
.article__content > img.full {
width: calc(100% + 152px);
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.article__content > a > img.full,
.article__content > img.full {
width: calc(100% + 125px);
}
.article--no-side-image .article__content > a > img.full,
.article--no-side-image .article__content > img.full {
width: calc(100% + 125px);
}
}
.article__content a img {
outline: 2px solid rgba(255, 0, 7, 0);
outline-offset: -2px;
transition: inherit;
}
.article__content a:hover img {
opacity: 0.85;
}
.article__content a:focus img {
outline-color: rgba(255, 0, 7, 1);
}
.article__content .instagram-media,
.article__content .twitter-tweet {
min-width: 290px !important;
margin: 2.5rem auto !important;
}
@media (max-width: 767px) {
.article__content .instagram-media,
.article__content .twitter-tweet {
margin: 2.1875rem auto !important;
}
}
.article--general .article__content > :first-child {
margin-top: 0;
}
.article--general .article__content .instagram-media:first-child,
.article--general .article__content .twitter-tweet:first-child {
margin-top: 0 !important;
}
.article__content > :last-child {
margin-bottom: 0;
}
.article__content .instagram-media:last-child,
.article__content .twitter-tweet:last-child {
margin-bottom: 0 !important;
}
_:-ms-input-placeholder, :root .article--offset .article__content figure { /*IE10-11*/
display: block;
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*------------------------ BASIC-STATS-TABLE -------------------------*/
/*====================================================================*/
.basic-stats-table {
width: 100%;
font-size: 0.9375rem;
}
@media (max-width: 639px) {
.basic-stats-table,
.basic-stats-table tbody {
display: block;
}
.basic-stats-table {
width: auto;
overflow: hidden;
}
}
@media (max-width: 639px) {
.basic-stats-table__row {
position: relative;
display: block;
margin-right: -21px;
}
.basic-stats-table__row:first-child {
display: none;
}
.basic-stats-table__row:not(:last-child) {
margin-bottom: 12px;
}
}
@media (min-width: 640px) {
.basic-stats-table__header,
.basic-stats-table__cell {
padding: 0.3125rem 0.9375rem;
vertical-align: top;
text-align: left;
}
.basic-stats-table__header:first-child,
.basic-stats-table__cell:first-child {
padding-left: 0;
}
.basic-stats-table__header:last-child,
.basic-stats-table__cell:last-child {
padding-right: 0;
}
.basic-stats-table__header {
padding-top: 0rem;
padding-bottom: 0.375rem;
font-size: 0.75rem;
font-weight: bold;
}
}
@media (max-width: 639px) {
.basic-stats-table__cell {
position: relative;
left: -21px;
display: block;
margin-left: 21px;
text-align: left;
}
.basic-stats-table__cell:not(:last-child) {
margin-bottom: 3px;
}
.basic-stats-table__cell--mobile-inline {
display: inline-block;
}
.basic-stats-table__cell--mobile-inline + .basic-stats-table__cell--mobile-inline:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -12px;
width: 1px;
height: 75%;
margin: auto;
background-color: #C1C1C1;
}
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*--------------------- EVENTS-BASIC-STATS-TABLE ---------------------*/
/*====================================================================*/
.events-basic-stats-table {
font-size: 1.0625rem;
}
@media (min-width: 640px) {
.events-basic-stats-table {
-webkit-column-width: 27.3125rem;
-moz-column-width: 27.3125rem;
column-width: 27.3125rem;
-webkit-column-gap: 5.625rem;
-moz-column-gap: 5.625rem;
column-gap: 5.625rem;
}
.events-basic-stats-table,
.events-basic-stats-table thead,
.events-basic-stats-table tbody {
display: block;
}
}
@media (max-width: 639px) {
.events-basic-stats-table {
-webkit-column-width: 11.0625rem;
-moz-column-width: 11.0625rem;
column-width: 11.0625rem;
-webkit-column-gap: 2.5rem;
-moz-column-gap: 2.5rem;
column-gap: 2.5rem;
}
}
.events-basic-stats-table .basic-stats-table__row {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
overflow: hidden;
}
@media (min-width: 640px) {
.events-basic-stats-table .basic-stats-table__row {
display: flex;
}
}
.events-basic-stats-table .basic-stats-table__header {
padding: 0;
}
@media (min-width: 640px) {
.events-basic-stats-table .basic-stats-table__cell:nth-child(1) {
flex-shrink: 3;
flex-grow: 1;
flex-basis: 15%;
width: 15%;
max-width: 15%;
min-width: 6.25rem;
}
.events-basic-stats-table .basic-stats-table__cell:nth-child(2) {
flex-shrink: 1;
flex-grow: 3;
flex-basis: 50%;
width: 50%;
max-width: 50%;
}
.events-basic-stats-table .basic-stats-table__cell:nth-child(3) {
flex-shrink: 2;
flex-grow: 2;
flex-basis: 35%;
width: 35%;
max-width: 35%;
}
}
.events-basic-stats-table .team-name {
display: inline-block;
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*--------------------------- STATS-TABLE ----------------------------*/
/*====================================================================*/
.stats-table {
font-size: 0.9375rem;
line-height: 1.3125rem;
}
@media (min-width: 768px) {
.stats-table {
display: table;
width: 100%;
border-spacing: 0 7px;
}
.stats-table__header {
display: table-header-group;
}
.stats-table__body {
display: table-row-group;
}
.stats-table__header-row,
.stats-table__row {
display: table-row;
}
.stats-table__header-cell,
.stats-table__cell {
display: table-cell;
}
.stats-table--expandable {
display: block;
}
.stats-table--expandable .stats-table__header,
.stats-table--expandable .stats-table__body {
display: block;
}
.stats-table--expandable .stats-table__header-row,
.stats-table--expandable .stats-table__row {
display: flex;
flex-wrap: wrap;
margin-bottom: 7px;
}
.stats-table--expandable .stats-table__header-cell,
.stats-table--expandable .stats-table__cell {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
.stats-table--expandable .stats-table__cell--expandable {
flex-basis: 100%;
}
}
@media (max-width: 767px) {
.stats-table__header {
display: none;
}
}
.stats-table__header-row {}
@media (min-width: 1024px) {
.stats-table__header-cell {
padding: 0.25rem 1.25rem;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.stats-table__header-cell {
padding: 0.25rem 0.9375rem;
}
}
.stats-table__row {
color: #231F20;
}
@media (min-width: 768px) {
.stats-table--expandable .stats-table__row {
background-color: #fff;
border-radius: 8px;
}
}
@media (min-width: 768px) {
.stats-table__cell {
padding: 0.75rem 1.25rem;
vertical-align: middle;
background-color: #fff;
}
.stats-table__cell:first-child {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.stats-table__cell:last-child {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.stats-table--expandable .stats-table__cell {
background-color: transparent;
border-radius: 0;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.stats-table__cell {
padding: 0.75rem 0.9375rem;
}
}
.js .stats-table--expandable .stats-table__cell--expandable {
display: none;
opacity: 0;
}
@media (max-width: 767px) {
.stats-table__row {
position: relative;
padding: 0.75rem 0.9375rem;
padding-right: 0;
margin-bottom: 10px;
background-color: #fff;
border-radius: 8px;
}
.stats-table__row:after {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 0.9375rem;
height: 100%;
background-color: inherit;
border-radius: inherit;
}
}
@media (max-width: 767px) {
.stats-table__cell {
position: relative;
left: -21px;
margin-left: 21px;
font-weight: bold;
}
.stats-table__cell--mobile-inline-no-div {
margin-right: -13px;
}
.stats-table__cell:not(:last-child) {
margin-bottom: 3px;
}
.stats-table--expandable .stats-table__cell:nth-last-child(2) {
margin-bottom: 0px;
}
.stats-table__cell--mobile-inline,
.stats-table__cell--mobile-inline-no-div {
display: inline-block;
vertical-align: top;
}
.stats-table__cell--mobile-inline + .stats-table__cell--mobile-inline:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -11px;
width: 1px;
height: 75%;
margin: auto;
background-color: #C1C1C1;
}
}
@media (min-width: 768px) {
.stats-table__cell--tight {
width: 1%;
}
}
@media (min-width: 768px) {
.stats-table__mobile-inline-cell-break {
display: none;
}
}
.stats-table__mobile-header {
font-weight: 400;
}
@media (min-width: 768px) {
.stats-table__mobile-header {
display: none;
}
}
.stats-table__cell > a .icon {
margin-left: 4px;
}
.stats-table__badge {
display: inline-block;
padding: 0 0.875rem;
margin-top: -0.0625rem;
margin-bottom: -0.125rem;
font-weight: bold;
text-align: center;
line-height: 1.5rem;
color: #fff;
background-color: #FF0007;
border-radius: 8px;
}
.stats-table__badge--square {
min-width: 1.5rem;
padding: 0 0.25rem;
}
@media (max-width: 767px) {
.stats-table__badge {
padding: 0 0.625rem;
font-size: 0.875rem;
line-height: 1.3125rem;
border-radius: 6px;
}
.stats-table__badge--square {
min-width: 1.3125rem;
padding: 0 0.125rem;
}
}
.stats-table__expand-btn {
display: inline-flex;
align-items: baseline;
justify-content: flex-start;
text-align: left;
font-weight: bold;
color: #FF0007;
}
.stats-table__expand-btn:focus,
.stats-table__expand-btn:hover {
color: #005AAA;
}
.stats-table__expand-btn:focus {
text-decoration: underline;
}
@supports (text-decoration-color: red) {
.stats-table__expand-btn {
text-decoration: underline;
text-decoration-color: transparent;
}
.stats-table__expand-btn:focus {
text-decoration-color: currentColor;
}
}
.stats-table__expand-btn .icon {
margin-left: 6px;
transition: inherit;
transition-property: transform;
}
.stats-table__expand-btn[aria-expanded="true"] .icon {
transform: translateY(-1px) rotate(180deg);
}
/*--------------------------------------------------------------------*/
/*---------------------------- ANIMATIONS ----------------------------*/
/*--------------------------------------------------------------------*/
@supports (animation-name: stats-table__show) {
.stats-table--inserted .stats-table__row,
.stats-table--inserted .stats-table__header-row {
transform: translateY(20px);
opacity: 0;
animation: stats-table__show 0.35s cubic-bezier(0, 0, .35, 1) 0s 1 forwards;
will-change: transform, opacity;
}
@media (max-width: 639px) {
.stats-table--inserted .stats-table__row,
.stats-table--inserted .stats-table__header-row {
transform: translateY(15px);
}
}
}
@keyframes stats-table__show {
to {
transform: translateY(0px);
opacity: 1;
}
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*----------------------- MATCHES-STATS-TABLE ------------------------*/
/*====================================================================*/
@media (min-width: 1220px) {
.matches-stats-table .stats-table__header-cell:nth-child(4),
.matches-stats-table .stats-table__cell:nth-child(4) {
flex-basis: 240px;
min-width: 240px;
max-width: 240px;
margin-left: auto;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.matches-stats-table .stats-table__header-cell:nth-child(4),
.matches-stats-table .stats-table__cell:nth-child(4) {
flex-basis: 180px;
min-width: 180px;
max-width: 180px;
margin-left: auto;
}
}
@media (min-width: 1024px) and (max-width: 1219px) {
.matches-stats-table .stats-table__header-cell:nth-child(4),
.matches-stats-table .stats-table__cell:nth-child(4) {
flex-basis: 190px;
min-width: 190px;
max-width: 190px;
margin-left: auto;
}
}
@media (min-width: 1024px) {
.matches-stats-table .stats-table__header-cell:nth-child(1),
.matches-stats-table .stats-table__cell:nth-child(1) {
flex-grow: 0.1;
}
.matches-stats-table .stats-table__header-cell:nth-child(2),
.matches-stats-table .stats-table__cell:nth-child(2) {
flex-grow: 0.2;
}
.matches-stats-table .stats-table__header-cell:nth-child(3),
.matches-stats-table .stats-table__cell:nth-child(3) {
flex-grow: 0.7;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.matches-stats-table .stats-table__header-cell:nth-child(1),
.matches-stats-table .stats-table__cell:nth-child(1) {
flex-grow: 0.15;
}
.matches-stats-table .stats-table__header-cell:nth-child(2),
.matches-stats-table .stats-table__cell:nth-child(2) {
flex-grow: 0.3;
}
.matches-stats-table .stats-table__header-cell:nth-child(3),
.matches-stats-table .stats-table__cell:nth-child(3) {
flex-grow: 0.55;
}
}
@media (min-width: 900px) and (max-width: 1023px) {
.matches-stats-table .stats-table__header-cell:nth-child(2),
.matches-stats-table .stats-table__cell:nth-child(2) {
flex-grow: 0.25;
}
.matches-stats-table .stats-table__header-cell:nth-child(3),
.matches-stats-table .stats-table__cell:nth-child(3) {
flex-grow: 0.6;
}
}
@media (min-width: 768px) {
.matches-stats-table .match-result-table {
margin-top: -2px;
margin-bottom: 3px;
}
}
@media (max-width: 767px) {
.matches-stats-table .match-result-table {
margin-top: 15px;
}
}
.matches-stats-table__teams {
max-width: 100%;
}
.matches-stats-table__teams .team-name {
display: inline-block;
vertical-align: bottom;
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*-------------------------- NAME-WITH-FLAG --------------------------*/
/*====================================================================*/
.name-with-flag {
position: relative;
display: inline-block;
padding-left: 2.0625rem;
font-size: 0.9375rem;
line-height: 1.125rem;
}
.name-with-flag:before {
content: "";
position: absolute;
top: 0.0625rem;
left: 0;
width: 1.375rem;
height: 0.9375rem;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: contain;
background-size: contain;
}
/*--------------------------------------------------------------------*/
/*------------------------------ FLAGS -------------------------------*/
/*--------------------------------------------------------------------*/
.name-with-flag[class~="--ad"]:before { background-image: url("../img/flag/ad.svg"); }
.name-with-flag[class~="--ae"]:before { background-image: url("../img/flag/ae.svg"); }
.name-with-flag[class~="--af"]:before { background-image: url("../img/flag/af.svg"); }
.name-with-flag[class~="--ag"]:before { background-image: url("../img/flag/ag.svg"); }
.name-with-flag[class~="--ai"]:before { background-image: url("../img/flag/ai.svg"); }
.name-with-flag[class~="--al"]:before { background-image: url("../img/flag/al.svg"); }
.name-with-flag[class~="--am"]:before { background-image: url("../img/flag/am.svg"); }
.name-with-flag[class~="--an"]:before { background-image: url("../img/flag/an.svg"); }
.name-with-flag[class~="--ao"]:before { background-image: url("../img/flag/ao.svg"); }
.name-with-flag[class~="--aq"]:before { background-image: url("../img/flag/aq.svg"); }
.name-with-flag[class~="--ar"]:before { background-image: url("../img/flag/ar.svg"); }
.name-with-flag[class~="--as"]:before { background-image: url("../img/flag/as.svg"); }
.name-with-flag[class~="--at"]:before { background-image: url("../img/flag/at.svg"); }
.name-with-flag[class~="--au"]:before { background-image: url("../img/flag/au.svg"); }
.name-with-flag[class~="--aw"]:before { background-image: url("../img/flag/aw.svg"); }
.name-with-flag[class~="--ax"]:before { background-image: url("../img/flag/ax.svg"); }
.name-with-flag[class~="--az"]:before { background-image: url("../img/flag/az.svg"); }
.name-with-flag[class~="--ba"]:before { background-image: url("../img/flag/ba.svg"); }
.name-with-flag[class~="--bb"]:before { background-image: url("../img/flag/bb.svg"); }
.name-with-flag[class~="--bd"]:before { background-image: url("../img/flag/bd.svg"); }
.name-with-flag[class~="--be"]:before { background-image: url("../img/flag/be.svg"); }
.name-with-flag[class~="--bf"]:before { background-image: url("../img/flag/bf.svg"); }
.name-with-flag[class~="--bg"]:before { background-image: url("../img/flag/bg.svg"); }
.name-with-flag[class~="--bh"]:before { background-image: url("../img/flag/bh.svg"); }
.name-with-flag[class~="--bi"]:before { background-image: url("../img/flag/bi.svg"); }
.name-with-flag[class~="--bj"]:before { background-image: url("../img/flag/bj.svg"); }
.name-with-flag[class~="--bl"]:before { background-image: url("../img/flag/bl.svg"); }
.name-with-flag[class~="--bm"]:before { background-image: url("../img/flag/bm.svg"); }
.name-with-flag[class~="--bn"]:before { background-image: url("../img/flag/bn.svg"); }
.name-with-flag[class~="--bo"]:before { background-image: url("../img/flag/bo.svg"); }
.name-with-flag[class~="--bq"]:before { background-image: url("../img/flag/bq.svg"); }
.name-with-flag[class~="--br"]:before { background-image: url("../img/flag/br.svg"); }
.name-with-flag[class~="--bs"]:before { background-image: url("../img/flag/bs.svg"); }
.name-with-flag[class~="--bt"]:before { background-image: url("../img/flag/bt.svg"); }
.name-with-flag[class~="--bv"]:before { background-image: url("../img/flag/bv.svg"); }
.name-with-flag[class~="--bw"]:before { background-image: url("../img/flag/bw.svg"); }
.name-with-flag[class~="--by"]:before { background-image: url("../img/flag/by.svg"); }
.name-with-flag[class~="--bz"]:before { background-image: url("../img/flag/bz.svg"); }
.name-with-flag[class~="--ca"]:before { background-image: url("../img/flag/ca.svg"); }
.name-with-flag[class~="--cc"]:before { background-image: url("../img/flag/cc.svg"); }
.name-with-flag[class~="--cd"]:before { background-image: url("../img/flag/cd.svg"); }
.name-with-flag[class~="--cf"]:before { background-image: url("../img/flag/cf.svg"); }
.name-with-flag[class~="--cg"]:before { background-image: url("../img/flag/cg.svg"); }
.name-with-flag[class~="--ch"]:before { background-image: url("../img/flag/ch.svg"); }
.name-with-flag[class~="--ci"]:before { background-image: url("../img/flag/ci.svg"); }
.name-with-flag[class~="--ck"]:before { background-image: url("../img/flag/ck.svg"); }
.name-with-flag[class~="--cl"]:before { background-image: url("../img/flag/cl.svg"); }
.name-with-flag[class~="--cm"]:before { background-image: url("../img/flag/cm.svg"); }
.name-with-flag[class~="--cn"]:before { background-image: url("../img/flag/cn.svg"); }
.name-with-flag[class~="--co"]:before { background-image: url("../img/flag/co.svg"); }
.name-with-flag[class~="--cr"]:before { background-image: url("../img/flag/cr.svg"); }
.name-with-flag[class~="--cu"]:before { background-image: url("../img/flag/cu.svg"); }
.name-with-flag[class~="--cv"]:before { background-image: url("../img/flag/cv.svg"); }
.name-with-flag[class~="--cw"]:before { background-image: url("../img/flag/cw.svg"); }
.name-with-flag[class~="--cx"]:before { background-image: url("../img/flag/cx.svg"); }
.name-with-flag[class~="--cy"]:before { background-image: url("../img/flag/cy.svg"); }
.name-with-flag[class~="--cz"]:before { background-image: url("../img/flag/cz.svg"); }
.name-with-flag[class~="--de"]:before { background-image: url("../img/flag/de.svg"); }
.name-with-flag[class~="--dj"]:before { background-image: url("../img/flag/dj.svg"); }
.name-with-flag[class~="--dk"]:before { background-image: url("../img/flag/dk.svg"); }
.name-with-flag[class~="--dm"]:before { background-image: url("../img/flag/dm.svg"); }
.name-with-flag[class~="--do"]:before { background-image: url("../img/flag/do.svg"); }
.name-with-flag[class~="--dz"]:before { background-image: url("../img/flag/dz.svg"); }
.name-with-flag[class~="--ec"]:before { background-image: url("../img/flag/ec.svg"); }
.name-with-flag[class~="--ee"]:before { background-image: url("../img/flag/ee.svg"); }
.name-with-flag[class~="--eg"]:before { background-image: url("../img/flag/eg.svg"); }
.name-with-flag[class~="--eh"]:before { background-image: url("../img/flag/eh.svg"); }
.name-with-flag[class~="--er"]:before { background-image: url("../img/flag/er.svg"); }
.name-with-flag[class~="--es"]:before { background-image: url("../img/flag/es.svg"); }
.name-with-flag[class~="--et"]:before { background-image: url("../img/flag/et.svg"); }
.name-with-flag[class~="--eu"]:before { background-image: url("../img/flag/eu.svg"); }
.name-with-flag[class~="--fi"]:before { background-image: url("../img/flag/fi.svg"); }
.name-with-flag[class~="--fj"]:before { background-image: url("../img/flag/fj.svg"); }
.name-with-flag[class~="--fk"]:before { background-image: url("../img/flag/fk.svg"); }
.name-with-flag[class~="--fm"]:before { background-image: url("../img/flag/fm.svg"); }
.name-with-flag[class~="--fo"]:before { background-image: url("../img/flag/fo.svg"); }
.name-with-flag[class~="--fr"]:before { background-image: url("../img/flag/fr.svg"); }
.name-with-flag[class~="--ga"]:before { background-image: url("../img/flag/ga.svg"); }
.name-with-flag[class~="--gb"]:before { background-image: url("../img/flag/gb.svg"); }
.name-with-flag[class~="--gd"]:before { background-image: url("../img/flag/gd.svg"); }
.name-with-flag[class~="--ge"]:before { background-image: url("../img/flag/ge.svg"); }
.name-with-flag[class~="--gf"]:before { background-image: url("../img/flag/gf.svg"); }
.name-with-flag[class~="--gg"]:before { background-image: url("../img/flag/gg.svg"); }
.name-with-flag[class~="--gh"]:before { background-image: url("../img/flag/gh.svg"); }
.name-with-flag[class~="--gi"]:before { background-image: url("../img/flag/gi.svg"); }
.name-with-flag[class~="--gl"]:before { background-image: url("../img/flag/gl.svg"); }
.name-with-flag[class~="--gm"]:before { background-image: url("../img/flag/gm.svg"); }
.name-with-flag[class~="--gn"]:before { background-image: url("../img/flag/gn.svg"); }
.name-with-flag[class~="--gp"]:before { background-image: url("../img/flag/gp.svg"); }
.name-with-flag[class~="--gq"]:before { background-image: url("../img/flag/gq.svg"); }
.name-with-flag[class~="--gr"]:before { background-image: url("../img/flag/gr.svg"); }
.name-with-flag[class~="--gs"]:before { background-image: url("../img/flag/gs.svg"); }
.name-with-flag[class~="--gt"]:before { background-image: url("../img/flag/gt.svg"); }
.name-with-flag[class~="--gu"]:before { background-image: url("../img/flag/gu.svg"); }
.name-with-flag[class~="--gw"]:before { background-image: url("../img/flag/gw.svg"); }
.name-with-flag[class~="--gy"]:before { background-image: url("../img/flag/gy.svg"); }
.name-with-flag[class~="--hk"]:before { background-image: url("../img/flag/hk.svg"); }
.name-with-flag[class~="--hm"]:before { background-image: url("../img/flag/hm.svg"); }
.name-with-flag[class~="--hn"]:before { background-image: url("../img/flag/hn.svg"); }
.name-with-flag[class~="--hr"]:before { background-image: url("../img/flag/hr.svg"); }
.name-with-flag[class~="--ht"]:before { background-image: url("../img/flag/ht.svg"); }
.name-with-flag[class~="--hu"]:before { background-image: url("../img/flag/hu.svg"); }
.name-with-flag[class~="--id"]:before { background-image: url("../img/flag/id.svg"); }
.name-with-flag[class~="--ie"]:before { background-image: url("../img/flag/ie.svg"); }
.name-with-flag[class~="--il"]:before { background-image: url("../img/flag/il.svg"); }
.name-with-flag[class~="--im"]:before { background-image: url("../img/flag/im.svg"); }
.name-with-flag[class~="--in"]:before { background-image: url("../img/flag/in.svg"); }
.name-with-flag[class~="--io"]:before { background-image: url("../img/flag/io.svg"); }
.name-with-flag[class~="--iq"]:before { background-image: url("../img/flag/iq.svg"); }
.name-with-flag[class~="--ir"]:before { background-image: url("../img/flag/ir.svg"); }
.name-with-flag[class~="--is"]:before { background-image: url("../img/flag/is.svg"); }
.name-with-flag[class~="--it"]:before { background-image: url("../img/flag/it.svg"); }
.name-with-flag[class~="--je"]:before { background-image: url("../img/flag/je.svg"); }
.name-with-flag[class~="--jm"]:before { background-image: url("../img/flag/jm.svg"); }
.name-with-flag[class~="--jo"]:before { background-image: url("../img/flag/jo.svg"); }
.name-with-flag[class~="--jp"]:before { background-image: url("../img/flag/jp.svg"); }
.name-with-flag[class~="--ke"]:before { background-image: url("../img/flag/ke.svg"); }
.name-with-flag[class~="--kg"]:before { background-image: url("../img/flag/kg.svg"); }
.name-with-flag[class~="--kh"]:before { background-image: url("../img/flag/kh.svg"); }
.name-with-flag[class~="--ki"]:before { background-image: url("../img/flag/ki.svg"); }
.name-with-flag[class~="--km"]:before { background-image: url("../img/flag/km.svg"); }
.name-with-flag[class~="--kn"]:before { background-image: url("../img/flag/kn.svg"); }
.name-with-flag[class~="--kp"]:before { background-image: url("../img/flag/kp.svg"); }
.name-with-flag[class~="--kr"]:before { background-image: url("../img/flag/kr.svg"); }
.name-with-flag[class~="--kw"]:before { background-image: url("../img/flag/kw.svg"); }
.name-with-flag[class~="--ky"]:before { background-image: url("../img/flag/ky.svg"); }
.name-with-flag[class~="--kz"]:before { background-image: url("../img/flag/kz.svg"); }
.name-with-flag[class~="--la"]:before { background-image: url("../img/flag/la.svg"); }
.name-with-flag[class~="--lb"]:before { background-image: url("../img/flag/lb.svg"); }
.name-with-flag[class~="--lc"]:before { background-image: url("../img/flag/lc.svg"); }
.name-with-flag[class~="--li"]:before { background-image: url("../img/flag/li.svg"); }
.name-with-flag[class~="--lk"]:before { background-image: url("../img/flag/lk.svg"); }
.name-with-flag[class~="--lr"]:before { background-image: url("../img/flag/lr.svg"); }
.name-with-flag[class~="--ls"]:before { background-image: url("../img/flag/ls.svg"); }
.name-with-flag[class~="--lt"]:before { background-image: url("../img/flag/lt.svg"); }
.name-with-flag[class~="--lu"]:before { background-image: url("../img/flag/lu.svg"); }
.name-with-flag[class~="--lv"]:before { background-image: url("../img/flag/lv.svg"); }
.name-with-flag[class~="--ly"]:before { background-image: url("../img/flag/ly.svg"); }
.name-with-flag[class~="--ma"]:before { background-image: url("../img/flag/ma.svg"); }
.name-with-flag[class~="--mc"]:before { background-image: url("../img/flag/mc.svg"); }
.name-with-flag[class~="--md"]:before { background-image: url("../img/flag/md.svg"); }
.name-with-flag[class~="--me"]:before { background-image: url("../img/flag/me.svg"); }
.name-with-flag[class~="--mf"]:before { background-image: url("../img/flag/mf.svg"); }
.name-with-flag[class~="--mg"]:before { background-image: url("../img/flag/mg.svg"); }
.name-with-flag[class~="--mh"]:before { background-image: url("../img/flag/mh.svg"); }
.name-with-flag[class~="--mk"]:before { background-image: url("../img/flag/mk.svg"); }
.name-with-flag[class~="--ml"]:before { background-image: url("../img/flag/ml.svg"); }
.name-with-flag[class~="--mm"]:before { background-image: url("../img/flag/mm.svg"); }
.name-with-flag[class~="--mn"]:before { background-image: url("../img/flag/mn.svg"); }
.name-with-flag[class~="--mo"]:before { background-image: url("../img/flag/mo.svg"); }
.name-with-flag[class~="--mp"]:before { background-image: url("../img/flag/mp.svg"); }
.name-with-flag[class~="--mq"]:before { background-image: url("../img/flag/mq.svg"); }
.name-with-flag[class~="--mr"]:before { background-image: url("../img/flag/mr.svg"); }
.name-with-flag[class~="--ms"]:before { background-image: url("../img/flag/ms.svg"); }
.name-with-flag[class~="--mt"]:before { background-image: url("../img/flag/mt.svg"); }
.name-with-flag[class~="--mu"]:before { background-image: url("../img/flag/mu.svg"); }
.name-with-flag[class~="--mv"]:before { background-image: url("../img/flag/mv.svg"); }
.name-with-flag[class~="--mw"]:before { background-image: url("../img/flag/mw.svg"); }
.name-with-flag[class~="--mx"]:before { background-image: url("../img/flag/mx.svg"); }
.name-with-flag[class~="--my"]:before { background-image: url("../img/flag/my.svg"); }
.name-with-flag[class~="--mz"]:before { background-image: url("../img/flag/mz.svg"); }
.name-with-flag[class~="--na"]:before { background-image: url("../img/flag/na.svg"); }
.name-with-flag[class~="--nc"]:before { background-image: url("../img/flag/nc.svg"); }
.name-with-flag[class~="--ne"]:before { background-image: url("../img/flag/ne.svg"); }
.name-with-flag[class~="--nf"]:before { background-image: url("../img/flag/nf.svg"); }
.name-with-flag[class~="--ng"]:before { background-image: url("../img/flag/ng.svg"); }
.name-with-flag[class~="--ni"]:before { background-image: url("../img/flag/ni.svg"); }
.name-with-flag[class~="--nl"]:before { background-image: url("../img/flag/nl.svg"); }
.name-with-flag[class~="--no"]:before { background-image: url("../img/flag/no.svg"); }
.name-with-flag[class~="--np"]:before { background-image: url("../img/flag/np.svg"); }
.name-with-flag[class~="--nr"]:before { background-image: url("../img/flag/nr.svg"); }
.name-with-flag[class~="--nu"]:before { background-image: url("../img/flag/nu.svg"); }
.name-with-flag[class~="--nz"]:before { background-image: url("../img/flag/nz.svg"); }
.name-with-flag[class~="--om"]:before { background-image: url("../img/flag/om.svg"); }
.name-with-flag[class~="--pa"]:before { background-image: url("../img/flag/pa.svg"); }
.name-with-flag[class~="--pe"]:before { background-image: url("../img/flag/pe.svg"); }
.name-with-flag[class~="--pf"]:before { background-image: url("../img/flag/pf.svg"); }
.name-with-flag[class~="--pg"]:before { background-image: url("../img/flag/pg.svg"); }
.name-with-flag[class~="--ph"]:before { background-image: url("../img/flag/ph.svg"); }
.name-with-flag[class~="--pk"]:before { background-image: url("../img/flag/pk.svg"); }
.name-with-flag[class~="--pl"]:before { background-image: url("../img/flag/pl.svg"); }
.name-with-flag[class~="--pm"]:before { background-image: url("../img/flag/pm.svg"); }
.name-with-flag[class~="--pn"]:before { background-image: url("../img/flag/pn.svg"); }
.name-with-flag[class~="--pr"]:before { background-image: url("../img/flag/pr.svg"); }
.name-with-flag[class~="--ps"]:before { background-image: url("../img/flag/ps.svg"); }
.name-with-flag[class~="--pt"]:before { background-image: url("../img/flag/pt.svg"); }
.name-with-flag[class~="--pw"]:before { background-image: url("../img/flag/pw.svg"); }
.name-with-flag[class~="--py"]:before { background-image: url("../img/flag/py.svg"); }
.name-with-flag[class~="--qa"]:before { background-image: url("../img/flag/qa.svg"); }
.name-with-flag[class~="--re"]:before { background-image: url("../img/flag/re.svg"); }
.name-with-flag[class~="--ro"]:before { background-image: url("../img/flag/ro.svg"); }
.name-with-flag[class~="--rs"]:before { background-image: url("../img/flag/rs.svg"); }
.name-with-flag[class~="--ru"]:before { background-image: url("../img/flag/ru.svg"); }
.name-with-flag[class~="--rw"]:before { background-image: url("../img/flag/rw.svg"); }
.name-with-flag[class~="--sa"]:before { background-image: url("../img/flag/sa.svg"); }
.name-with-flag[class~="--sb"]:before { background-image: url("../img/flag/sb.svg"); }
.name-with-flag[class~="--sc"]:before { background-image: url("../img/flag/sc.svg"); }
.name-with-flag[class~="--sd"]:before { background-image: url("../img/flag/sd.svg"); }
.name-with-flag[class~="--se"]:before { background-image: url("../img/flag/se.svg"); }
.name-with-flag[class~="--sg"]:before { background-image: url("../img/flag/sg.svg"); }
.name-with-flag[class~="--sh"]:before { background-image: url("../img/flag/sh.svg"); }
.name-with-flag[class~="--si"]:before { background-image: url("../img/flag/si.svg"); }
.name-with-flag[class~="--sj"]:before { background-image: url("../img/flag/sj.svg"); }
.name-with-flag[class~="--sk"]:before { background-image: url("../img/flag/sk.svg"); }
.name-with-flag[class~="--sl"]:before { background-image: url("../img/flag/sl.svg"); }
.name-with-flag[class~="--sm"]:before { background-image: url("../img/flag/sm.svg"); }
.name-with-flag[class~="--sn"]:before { background-image: url("../img/flag/sn.svg"); }
.name-with-flag[class~="--so"]:before { background-image: url("../img/flag/so.svg"); }
.name-with-flag[class~="--sr"]:before { background-image: url("../img/flag/sr.svg"); }
.name-with-flag[class~="--ss"]:before { background-image: url("../img/flag/ss.svg"); }
.name-with-flag[class~="--st"]:before { background-image: url("../img/flag/st.svg"); }
.name-with-flag[class~="--sv"]:before { background-image: url("../img/flag/sv.svg"); }
.name-with-flag[class~="--sx"]:before { background-image: url("../img/flag/sx.svg"); }
.name-with-flag[class~="--sy"]:before { background-image: url("../img/flag/sy.svg"); }
.name-with-flag[class~="--sz"]:before { background-image: url("../img/flag/sz.svg"); }
.name-with-flag[class~="--tc"]:before { background-image: url("../img/flag/tc.svg"); }
.name-with-flag[class~="--td"]:before { background-image: url("../img/flag/td.svg"); }
.name-with-flag[class~="--tf"]:before { background-image: url("../img/flag/tf.svg"); }
.name-with-flag[class~="--tg"]:before { background-image: url("../img/flag/tg.svg"); }
.name-with-flag[class~="--th"]:before { background-image: url("../img/flag/th.svg"); }
.name-with-flag[class~="--tj"]:before { background-image: url("../img/flag/tj.svg"); }
.name-with-flag[class~="--tk"]:before { background-image: url("../img/flag/tk.svg"); }
.name-with-flag[class~="--tl"]:before { background-image: url("../img/flag/tl.svg"); }
.name-with-flag[class~="--tm"]:before { background-image: url("../img/flag/tm.svg"); }
.name-with-flag[class~="--tn"]:before { background-image: url("../img/flag/tn.svg"); }
.name-with-flag[class~="--to"]:before { background-image: url("../img/flag/to.svg"); }
.name-with-flag[class~="--tr"]:before { background-image: url("../img/flag/tr.svg"); }
.name-with-flag[class~="--tt"]:before { background-image: url("../img/flag/tt.svg"); }
.name-with-flag[class~="--tv"]:before { background-image: url("../img/flag/tv.svg"); }
.name-with-flag[class~="--tw"]:before { background-image: url("../img/flag/tw.svg"); }
.name-with-flag[class~="--tz"]:before { background-image: url("../img/flag/tz.svg"); }
.name-with-flag[class~="--ua"]:before { background-image: url("../img/flag/ua.svg"); }
.name-with-flag[class~="--ug"]:before { background-image: url("../img/flag/ug.svg"); }
.name-with-flag[class~="--um"]:before { background-image: url("../img/flag/um.svg"); }
.name-with-flag[class~="--us"]:before { background-image: url("../img/flag/us.svg"); }
.name-with-flag[class~="--uy"]:before { background-image: url("../img/flag/uy.svg"); }
.name-with-flag[class~="--uz"]:before { background-image: url("../img/flag/uz.svg"); }
.name-with-flag[class~="--va"]:before { background-image: url("../img/flag/va.svg"); }
.name-with-flag[class~="--vc"]:before { background-image: url("../img/flag/vc.svg"); }
.name-with-flag[class~="--ve"]:before { background-image: url("../img/flag/ve.svg"); }
.name-with-flag[class~="--vg"]:before { background-image: url("../img/flag/vg.svg"); }
.name-with-flag[class~="--vi"]:before { background-image: url("../img/flag/vi.svg"); }
.name-with-flag[class~="--vn"]:before { background-image: url("../img/flag/vn.svg"); }
.name-with-flag[class~="--vu"]:before { background-image: url("../img/flag/vu.svg"); }
.name-with-flag[class~="--wf"]:before { background-image: url("../img/flag/wf.svg"); }
.name-with-flag[class~="--ws"]:before { background-image: url("../img/flag/ws.svg"); }
.name-with-flag[class~="--xk"]:before { background-image: url("../img/flag/xk.svg"); }
.name-with-flag[class~="--ye"]:before { background-image: url("../img/flag/ye.svg"); }
.name-with-flag[class~="--yt"]:before { background-image: url("../img/flag/yt.svg"); }
.name-with-flag[class~="--za"]:before { background-image: url("../img/flag/za.svg"); }
.name-with-flag[class~="--zm"]:before { background-image: url("../img/flag/zm.svg"); }
.name-with-flag[class~="--zw"]:before { background-image: url("../img/flag/zw.svg"); }
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*------------------------ MATCH-RESULT-TABLE ------------------------*/
/*====================================================================*/
.match-result-table {
width: 100%;
font-weight: 400;
}
@media (max-width: 767px) {
.match-result-table {
display: flex;
flex-wrap: wrap;
width: auto;
margin-right: -15px;
margin-left: -15px;
}
_:-ms-input-placeholder, :root .match-result-table { /*IE10-11*/
margin-right: 0;
margin-left: 0;
}
.match-result-table tbody {
display: flex;
flex-wrap: wrap;
}
}
@media (max-width: 767px) {
.match-result-table__header-row {
display: none;
}
.match-result-table__row {
flex: none;
width: 50%;
padding: 0 15px;
padding-bottom: 0.75rem;
vertical-align: top;
}
}
@media (max-width: 479px) {
.match-result-table__row {
flex-basis: 100%;
width: auto;
}
.match-result-table__row:last-child {
padding-bottom: 0px;
}
}
@media (min-width: 768px) {
.match-result-table__row td,
.match-result-table__row th {
padding: 0.125rem 0.625rem;
text-align: left;
vertical-align: top;
}
.match-result-table__header-row th {
padding: 0.625rem;
padding-top: 0;
font-weight: bold;
text-align: left;
vertical-align: middle;
}
.match-result-table__row th {
white-space: nowrap;
}
.match-result-table__row td:last-child {
white-space: nowrap;
}
.match-results-table__mobile-header {
display: none;
}
}
@media (max-width: 767px) {
.match-results-table__mobile-header,
.match-result-table__row td,
.match-result-table__row th {
display: block;
padding: 0.1875rem 0;
text-align: left;
}
.match-result-table__row th {
font-weight: bold;
}
.match-results-table__mobile-header {
display: inline-block;
}
}
.match-result-table__row td:first-child,
.match-result-table__row th:first-child {
padding-left: 0;
}
.match-result-table__row td:last-child,
.match-result-table__row th:last-child {
padding-right: 0;
}
@media (min-width: 1024px) {
.match-result-table__results {
width: 25%;
}
}
@media (max-width: 767px) {
.match-result-table__players {
margin-bottom: 0.125rem;
}
}
.match-result-table__players .name-with-flag {
margin-right: 0.75rem;
}
@media (max-width: 1219px) {
.match-result-table__players .name-with-flag {
width: 100%;
margin-right: 0;
}
}
@media (max-width: 767px) {
.match-result-table__players .match-results-table__mobile-header {
display: block;
}
}
.match-result-table__results-list {
}
.match-result-table__results-item {
display: inline-block;
}
.match-result-table__results-item:not(:last-child):after {
content: " |";
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*---------------------------- TEAMS-LIST ----------------------------*/
/*====================================================================*/
.teams-list__item {
padding: 40px;
padding-top: 30px;
margin-bottom: 4px;
color: #231F20;
background-color: #fff;
overflow: hidden;
}
@media (max-width: 1219px) {
.teams-list__item {
padding-right: 30px;
padding-left: 30px;
}
}
@media (max-width: 1023px) {
.teams-list__item {
padding-top: 25px;
padding-bottom: 25px;
}
}
@media (max-width: 767px) {
.teams-list__item {
padding: 15px;
}
}
.teams-list__item--hidden {
display: none;
}
/*--------------------------------------------------------------------*/
/*------------------------------ HEADER ------------------------------*/
/*--------------------------------------------------------------------*/
.teams-list__header {
display: flex;
align-items: center;
margin-bottom: 0.75rem;
}
@media (max-width: 767px) {
.teams-list__header {
margin-bottom: 0.5rem;
}
}
@media (max-width: 639px) {
.teams-list__header {
display: block;
margin-bottom: 0.25rem;
overflow: hidden;
}
}
.teams-list__logo {
position: relative;
z-index: 3;
align-self: flex-start;
flex: none;
width: 5.5rem;
margin-right: 1.5625rem;
margin-bottom: 0.75rem;
}
@media (min-width: 1220px) and (max-width: 1385px) {
.teams-list__logo {
width: 5.125rem;
}
}
@media (max-width: 767px) {
.teams-list__logo {
margin-right: 1.25rem;
}
}
@media (max-width: 639px) {
.teams-list__logo {
float: left;
width: 4.125rem;
margin-right: 0.9375rem;
margin-bottom: 0.9375rem;
}
}
.teams-list__header-content {
flex-grow: 1;
display: flex;
}
@media (max-width: 1219px) {
.teams-list__header-content {
flex-wrap: wrap;
}
}
@media (max-width: 639px) {
.teams-list__header-content {
display: block;
}
}
.teams-list__name {
align-self: center;
flex-shrink: 1;
flex-grow: 1;
flex-basis: 60%;
margin: 0;
margin-right: 2.5rem;
margin-bottom: 0.75rem;
font-size: 2.1875rem;
line-height: 2.25rem;
}
@media (min-width: 1220px) and (max-width: 1385px) {
.teams-list__name {
font-size: 2.0625rem;
line-height: 2.1875rem;
}
}
@media (max-width: 1219px) {
.teams-list__name {
width: 100%;
max-width: 100%;
margin-right: 0;
font-size: 2rem;
line-height: 2.125rem;
}
}
@media (max-width: 767px) {
.teams-list__name {
font-size: 1.625rem;
line-height: 1.875rem;
}
}
@media (max-width: 639px) {
.teams-list__name {
display: flex;
align-items: center;
width: auto;
min-height: 4.125rem;
font-size: 1.5625rem;
line-height: 1.8125rem;
}
_:-ms-input-placeholder, :root .teams-list__name { /*IE10-11*/
display: block;
}
}
@media (max-width: 479px) {
.teams-list__name {
font-size: 1.3125rem;
line-height: 1.5rem;
}
}
.teams-list__info {
position: relative;
flex-basis: auto;
margin-bottom: 0.25rem;
}
@media (min-width: 640px) {
.teams-list__info {
display: flex;
align-items: center;
justify-content: flex-end;
max-width: 50%;
margin-left: auto;
}
}
@media (min-width: 640px) and (max-width: 1219px) {
.teams-list__info {
flex-grow: 1;
flex-basis: 100%;
justify-content: flex-start;
max-width: none;
margin-left: 0;
}
}
@media (min-width: 640px) and (max-width: 1219px) {
.teams-list__info:before {
content: "";
position: absolute;
top: 0px;
left: -14px;
z-index: 2;
width: 1px;
height: 100%;
background-color: #fff;
}
}
@media (min-width: 640px) and (max-width: 767px) {
.teams-list__info {
flex-wrap: wrap;
}
}
@media (max-width: 639px) {
.teams-list__info {
clear: both;
display: block;
}
}
.teams-list__titles,
.teams-list__address {
position: relative;
display: flex;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.9375rem;
line-height: 1.125rem;
}
@media (min-width: 1220px) {
_:-ms-input-placeholder, :root .teams-list__titles { /*IE10-11*/
min-width: 180px;
}
}
@media (min-width: 1220px) {
.teams-list__titles,
.teams-list__address {
flex-shrink: 1;
}
.teams-list__titles {
flex-basis: 40%;
}
.teams-list__addresses {
flex-basis: 60%;
}
}
@media (max-width: 1219px) {
.teams-list__titles,
.teams-list__address {
align-self: flex-start;
}
}
@media (max-width: 639px) {
.teams-list__titles,
.teams-list__address {
font-size: 0.875rem;
line-height: 1.0625rem;
}
}
@media (min-width: 640px) {
.teams-list__titles {
margin-right: 40px;
}
}
@media (min-width: 640px) and (max-width: 1219px) {
.teams-list__titles {
flex: none;
margin-right: 30px;
}
}
@media (max-width: 639px) {
.teams-list__titles {
margin-right: 0;
white-space: nowrap;
}
}
@media (min-width: 640px) {
.teams-list__titles + .teams-list__address:after {
content: "";
position: absolute;
top: 0px;
left: -16px;
width: 1px;
height: 100%;
background-color: #231F20;
}
}
@media (min-width: 640px) and (max-width: 1219px) {
.teams-list__titles + .teams-list__address:after {
left: -14px;
height: 100%;
background-color: #939393;
}
}
.teams-list__titles .icon,
.teams-list__address .icon {
flex: none;
}
@media (min-width: 1220px) {
.teams-list__titles .icon {
margin-right: 12px;
}
}
@media (max-width: 1219px) {
.teams-list__titles .icon {
width: 16px;
height: 16px;
margin-right: 10px;
}
}
@media (max-width: 639px) {
.teams-list__titles .icon {
width: 14px;
height: 14px;
margin-right: 8px;
}
}
.teams-list__titles .text {
display: block;
}
@media (max-width: 1219px) {
.teams-list__titles .text:after {
content: ":";
}
.teams-list__titles .text br {
display: none;
}
}
@media (min-width: 1220px) {
.teams-list__titles .value {
flex: none;
margin-left: 0.875rem;
margin-bottom: 0.075em;
font-size: 2.6875rem;
line-height: 1;
}
}
@media (max-width: 1219px) {
.teams-list__titles .value {
margin-left: 4px;
font-size: 1.125rem;
font-weight: bold;
}
}
@media (max-width: 639px) {
.teams-list__titles .value {
margin-bottom: 0.0625rem;
font-size: 1rem;
}
}
.teams-list__address .text {
flex-shrink: 1;
display: block;
}
@media (min-width: 1220px) {
.teams-list__address .icon {
margin-left: 8px;
margin-right: 15px;
}
}
@media (max-width: 1219px) {
.teams-list__address .icon {
width: 18px;
height: 18px;
margin-top: 1px;
margin-right: 9px;
margin-left: -1px;
margin-bottom: auto;
}
}
@media (max-width: 639px) {
.teams-list__address .icon {
width: 16px;
height: 16px;
margin-right: 7px;
}
}
/*--------------------------------------------------------------------*/
/*---------------------------- EXPAND-BTN ----------------------------*/
/*--------------------------------------------------------------------*/
.teams-list__expand-input {
position: absolute;
top: 0;
left: 0;
z-index: 2;
height: 1.1875rem;
padding: 0;
margin: 0;
opacity: 0;
}
.teams-list__expand-btn {
display: inline-flex;
align-items: baseline;
justify-content: flex-start;
font-size: 0.9375rem;
font-weight: bold;
text-align: left;
color: #FF0007;
}
@media (min-width: 1024px) and (max-width: 1219px) {
.teams-list__expand-btn {
font-size: 1rem;
}
}
.teams-list__expand-input:focus ~ .teams-list__expand-btn,
.teams-list__expand-input:hover ~ .teams-list__expand-btn,
.teams-list__expand-btn:focus,
.teams-list__expand-btn:hover {
color: #005AAA;
}
.teams-list__expand-input:focus ~ .teams-list__expand-btn,
.teams-list__expand-btn:focus {
text-decoration: underline;
}
@supports (text-decoration-color: red) {
.teams-list__expand-btn {
text-decoration: underline;
text-decoration-color: transparent;
}
.teams-list__expand-input:focus ~ .teams-list__expand-btn,
.teams-list__expand-btn:focus {
text-decoration-color: currentColor;
}
}
.teams-list__expand-btn .icon {
margin-left: 6px;
transition: inherit;
transition-property: transform;
}
.teams-list__expand-input:checked ~ .teams-list__expand-btn .icon,
.teams-list__expand-btn[aria-expanded="true"] .icon {
transform: translateY(-1px) rotate(180deg);
}
/*--------------------------------------------------------------------*/
/*----------------------------- CONTENT ------------------------------*/
/*--------------------------------------------------------------------*/
.teams-list__content-wrapper {
position: relative;
}
@media (min-width: 768px) and (max-width: 1023px) {
.teams-list__content-wrapper {
margin-bottom: -5px;
}
}
@media (min-width: 1024px) and (max-width: 1219px) {
.teams-list__content-wrapper {
margin-bottom: -15px;
}
}
.teams-list__content {
font-size: 0;
}
@media (max-width: 1219px) {
.teams-list__content {
display: none;
opacity: 0;
overflow: hidden;
}
.no-js .teams-list__expand-input:checked ~ .teams-list__content {
display: block;
opacity: 1;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.teams-list__content {
padding-bottom: 5px;
}
}
@media (min-width: 1024px) and (max-width: 1219px) {
.teams-list__content {
padding-bottom: 15px;
}
}
@media (max-width: 639px) {
.teams-list__content {
padding-bottom: 2px;
}
}
/*----------------------------- MEMBERS ------------------------------*/
.teams-list__members {
display: inline-flex;
flex-wrap: wrap;
width: 44%;
padding-right: 40px;
margin: 0 -15px;
font-size: 0.9375rem;
vertical-align: top;
}
@media (max-width: 1219px) {
.teams-list__members {
width: 40%;
margin-top: 1.25rem;
}
}
@media (max-width: 1023px) {
.teams-list__members {
width: 100%;
}
}
.teams-list__members-title {
flex-basis: 100%;
padding: 0 15px;
margin: 0;
font-size: 1.25rem;
line-height: 1.25;
font-weight: bold;
}
.teams-list__members-list-wrapper {
flex-basis: calc(50% - 30px);
flex-grow: 1;
min-width: 200px;
padding: 0 15px;
margin-bottom: -0.3125rem;
}
.teams-list__members-list-name {
margin: 1rem 0;
color: #FF0007;
}
.teams-list__member {
margin: 0.3125rem 0;
}
.teams-list__members-list-wrapper:last-child .teams-list__member {
display: inline-block;
margin-right: 1.25rem;
}
/*------------------------------ STATS -------------------------------*/
.teams-list__stats {
display: inline-block;
width: 56%;
font-size: 0.9375rem;
vertical-align: top;
}
@media (max-width: 1219px) {
.teams-list__stats {
width: 60%;
margin-top: 1.25rem;
}
}
@media (max-width: 1023px) {
.teams-list__stats {
width: 100%;
margin-top: 1.875rem;
}
}
@media (max-width: 639px) {
.teams-list__stats {
margin-top: 1.5625rem;
}
}
.teams-list__stats .team-name {
display: inline-block;
}
/*--------------------------------------------------------------------*/
/*---------------------------- ANIMATIONS ----------------------------*/
/*--------------------------------------------------------------------*/
@supports (animation-name: teams-list__item-show) {
.teams-list__item--inserted {
transform: translateY(20px);
opacity: 0;
animation: teams-list__item-show 0.35s cubic-bezier(0, 0, .35, 1) 0s 1 forwards;
will-change: opacity, transform;
}
@media (max-width: 639px) {
.teams-list__item--inserted {
transform: translateY(15px);
}
}
}
@keyframes teams-list__item-show {
to {
transform: translateY(0px);
opacity: 1;
}
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*---------------------------- RANKINGS ------------------------------*/
/*====================================================================*/
.rankings {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.rankings__list {
width: 100%;
}
@media (min-width: 640px) {
.rankings__rest {
display: table;
width: 100%;
max-width: 830px;
margin: 0px auto;
margin-top: -10px;
border-spacing: 0 8px;
}
.rankings--simplified .rankings__rest {
border-spacing: 0 8px;
}
}
@media (min-width: 640px) and (max-width: 1023px) {
.rankings__rest {
max-width: 720px;
}
}
.rankings__person {
line-height: 1.25;
}
@media (min-width: 640px) {
.rankings__rest .rankings__person {
display: table-row;
}
}
@media (max-width: 639px) {
.rankings__person {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 0.5rem;
padding-left: calc(1rem + (0.3125rem * 2) + (0.5rem * 2));
margin-bottom: 0.5rem;
background-color: #fff;
border-radius: 8px;
}
.rankings--simplified .rankings__person {
padding: 0.625rem;
padding-left: calc(1.125rem + (0.3125rem * 2) + (0.5rem * 2));
margin-bottom: 0.625rem;
}
}
@media (min-width: 640px) {
.rankings__number,
.rankings__name,
.rankings__points,
.rankings__organization,
.rankings__year {
display: table-cell;
padding: 0.25rem 0;
vertical-align: middle;
background-color: #fff;
}
.rankings--simplified .rankings__number,
.rankings--simplified .rankings__name,
.rankings--simplified .rankings__points,
.rankings--simplified .rankings__organization,
.rankings--simplified .rankings__year {
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
}
.rankings__number,
.rankings__points,
.rankings__year {
width: 1%;
}
.rankings__name {
width: 30%;
}
.rankings__points,
.rankings__organization,
.rankings__year {
text-align: right;
}
.rankings__person > :first-child {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.rankings__person > :last-child {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
}
@media (max-width: 639px) {
.rankings__number {
position: absolute;
top: 0;
left: 0;
}
.rankings__name {
order: 1;
width: 100%;
}
.rankings__organization {
order: 2;
width: 100%;
}
.rankings__points {
order: 3;
}
.rankings__year {
order: 4;
}
}
.rankings__number .text {
display: inline-block;
min-width: calc(1.25rem + (0.3125rem * 2));
padding: 0.3125rem 0.125rem;
margin: 0.3125rem 0.9375rem;
font-size: 1rem;
font-weight: bold;
text-align: center;
line-height: 1.25rem;
color: #fff;
background-color: #231F20;
border-radius: 8px;
}
.rankings--simplified .rankings__number .text {
min-width: calc(1.3125rem + (0.3125rem * 2));
margin: 0.625rem 0.9375rem;
font-size: 1.125rem;
line-height: 1.3125rem;
}
@media (max-width: 1023px) {
.rankings__number .text {
min-width: calc(1.0625rem + (0.3125rem * 2));
font-size: 0.9375rem;
line-height: 1.0625rem;
}
.rankings--simplified .rankings__number .text {
min-width: calc(1.125rem + (0.3125rem * 2));
font-size: 1rem;
line-height: 1.125rem;
}
}
@media (max-width: 639px) {
.rankings__number .text {
min-width: calc(1rem + (0.3125rem * 2));
margin-top: 0.5rem;
font-size: 0.875rem;
line-height: 1rem;
}
.rankings--simplified .rankings__number .text {
min-width: calc(1.125rem + (0.3125rem * 2));
margin-top: 0.625rem;
font-size: 1rem;
line-height: 1.0625rem;
}
.rankings__number .text,
.rankings--simplified .rankings__number .text {
margin-left: 0.625rem;
}
}
.rankings__name,
.rankings__points {
font-size: 1.125rem;
}
.rankings--simplified .rankings__name,
.rankings--simplified .rankings__points {
font-size: 1.25rem;
}
@media (max-width: 1023px) {
.rankings__name,
.rankings__points {
font-size: 1rem;
}
.rankings--simplified .rankings__name,
.rankings--simplified .rankings__points {
font-size: 1.125rem;
}
}
@media (max-width: 1023px) {
.rankings__name {
padding-left: 0.625rem;
}
}
@media (max-width: 639px) {
.rankings__name {
margin-top: -0.0625rem;
}
.rankings--simplified .rankings__name {
margin-top: 0rem;
}
.rankings__name,
.rankings--simplified .rankings__name {
padding-left: 0.3125rem;
margin-bottom: 0.125rem;
line-height: 1.2;
}
}
.rankings__name-link {
color: inherit;
}
.rankings__name-link:focus,
.rankings__name-link:hover {
color: #FF0007;
}
.rankings__name-link b {
text-transform: uppercase;
}
.rankings__points {
padding-right: 0.9375rem;
padding-left: 0.9375rem;
font-size: 0.9375rem;
line-height: 1;
white-space: nowrap;
color: #FF0007;
}
.rankings--simplified .rankings__points {
font-size: 1rem;
}
@media (max-width: 1023px) {
.rankings__points {
padding-right: 0.625rem;
padding-left: 0.625rem;
}
}
@media (max-width: 639px) {
.rankings__points {
position: relative;
padding-left: 0.3125rem;
font-size: 0.8125rem;
}
}
@media (max-width: 639px) {
.rankings__points .text:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 1px;
height: 75%;
margin: auto;
background-color: #C1C1C1;
}
}
.rankings__organization,
.rankings__year {
font-size: 1rem;
color: #939393;
}
.rankings--simplified .rankings__organization,
.rankings--simplified .rankings__year {
font-size: 1.0625rem;
}
@media (max-width: 1023px) {
.rankings__organization,
.rankings__year {
font-size: 0.875rem;
}
.rankings--simplified .rankings__organization,
.rankings--simplified .rankings__year {
font-size: 0.9375rem;
}
}
@media (max-width: 639px) {
.rankings__organization,
.rankings__year,
.rankings--simplified .rankings__organization,
.rankings--simplified .rankings__year {
font-size: 0.8125rem;
}
}
@media (max-width: 639px) {
.rankings__organization {
padding-left: 0.3125rem;
margin-bottom: 0.375rem;
}
}
@media (min-width: 640px) {
.rankings__organization .text {
position: relative;
display: block;
padding: 0 0.9375rem;
}
}
@media (min-width: 640px) and (max-width: 1023px) {
.rankings__organization .text {
padding: 0 0.625rem;
}
}
@media (min-width: 640px) {
.rankings__rest .rankings__organization .text:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1px;
height: 75%;
margin: auto;
background-color: #C1C1C1;
}
}
@media (max-width: 639px) {
.rankings__year {
line-height: 1;
}
}
.rankings__year .text {
display: inline-block;
padding: 0 0.9375rem;
}
@media (max-width: 639px) {
.rankings__year .text {
padding: 0 0.625rem;
}
}
/*--------------------------------------------------------------------*/
/*------------------------------- TOP --------------------------------*/
/*--------------------------------------------------------------------*/
.rankings__top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin: 0px auto;
margin-bottom: 50px;
}
@media (max-width: 1023px) {
.rankings__top {
margin-bottom: 0px;
}
}
.rankings__top .rankings__person {
position: relative;
align-self: flex-start;
flex-basis: 31.3333%;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
max-width: 31.3333%;
padding: 1.25rem;
padding-left: calc(2.5rem + (0.6875rem * 2) + 1.5625rem + 1.25rem);
margin-bottom: auto;
background-color: #fff;
border-radius: 8px;
}
.rankings__top .rankings__number,
.rankings__top .rankings__name,
.rankings__top .rankings__points,
.rankings__top .rankings__organization,
.rankings__top .rankings__year {
display: block;
width: auto;
padding: 0;
}
.rankings__top .rankings__number {
position: absolute;
top: 0;
left: 0;
background-color: transparent;
}
.rankings__top .rankings__number .text {
min-width: calc(2.5rem + 0.625rem + 0.75rem);
padding: 0.625rem 0.5rem 0.75rem;
margin: 1.25rem 1.5625rem;
margin-right: 0;
font-size: 2.5rem;
line-height: 2.5rem;
background-color: #FF0007;
}
.rankings__top .rankings__name {
order: 1;
width: 100%;
margin-top: -0.5rem;
font-size: 1.6875rem;
line-height: 1.2;
}
.rankings__top .rankings__organization,
.rankings__top .rankings__points,
.rankings__top .rankings__year {
font-size: 0.8125rem;
}
.rankings__top .rankings__organization {
order: 2;
width: 100%;
margin-top: 0;
margin-bottom: 0.5rem;
text-align: left;
}
.rankings__top .rankings__organization .text {
padding: 0;
}
.rankings__top .rankings__points {
order: 3;
line-height: 1;
}
.rankings__top .rankings__points .text {
position: relative;
padding-right: 0.625rem;
}
.rankings__top .rankings__points .text:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 1px;
height: 75%;
margin: auto;
background-color: #C1C1C1;
}
.rankings__top .rankings__year {
order: 4;
line-height: 1;
}
.rankings__top .rankings__year .text {
padding: 0;
padding-left: 0.625rem;
}
@media (min-width: 1220px) and (max-width: 1385px), (min-width: 768px) and (max-width: 1023px) {
.rankings__top .rankings__person {
flex-basis: calc(33.3333% - 60px / 3);
max-width: calc(33.3333% - 60px / 3);
padding: 1.125rem;
padding-left: calc(2.375rem + (0.6875rem * 2) + 1.125rem + 1.25rem);
}
.rankings__top .rankings__number .text {
min-width: calc(2.375rem + (0.6875rem * 2));
margin: 1.125rem 1.125rem;
margin-right: 0;
font-size: 2.375rem;
line-height: 2.375rem;
}
.rankings__top .rankings__name {
margin-top: -0.3125rem;
font-size: 1.5rem;
}
}
@media (min-width: 1024px) and (max-width: 1219px), (min-width: 640px) and (max-width: 767px) {
.rankings__top .rankings__person {
padding: 0.9375rem;
padding-left: calc(1.9375rem + (0.6875rem * 2) + 0.9375rem + 0.9375rem);
}
.rankings__top .rankings__number .text {
min-width: calc(1.9375rem + (0.6875rem * 2));
margin: 0.9375rem;
margin-right: 0;
font-size: 1.9375rem;
line-height: 1.9375rem;
}
.rankings__top .rankings__organization .text,
.rankings__top .rankings__points .text,
.rankings__top .rankings__year .text {
font-size: 0.75rem;
}
.rankings__top .rankings__name {
margin-top: -0.3125rem;
font-size: 1.25rem;
}
.rankings__top .rankings__organization {
margin-bottom: 0.375rem;
}
}
@media (max-width: 1023px) {
.rankings__top .rankings__person {
flex-shrink: 0;
flex-basis: 100%;
max-width: 720px;
margin: auto;
margin-bottom: 20px;
}
}
@media (max-width: 639px) {
.rankings__top .rankings__person {
padding: 0.75rem;
padding-left: calc(1.25rem + (0.5rem * 2) + 0.75rem + 0.75rem + 0.3125rem);
margin-bottom: 10px;
}
.rankings__top .rankings__number .text {
min-width: calc(1.25rem + (0.5rem * 2));
padding: 0.5rem 0.25rem;
margin: 0.75rem;
margin-right: 0;
font-size: 1.25rem;
line-height: 1.25rem;
}
.rankings__top .rankings__organization .text,
.rankings__top .rankings__points .text,
.rankings__top .rankings__year .text {
font-size: 0.8125rem;
}
.rankings__top .rankings__name {
margin-top: -0.125rem;
font-size: 1.25rem;
}
.rankings__top .rankings__organization {
margin-bottom: 0.375rem;
}
}
/*//////////////////////////// TOP ////////////////////////////*/
.rankings__full-btn {
margin-top: 35px;
}
@media (max-width: 767px) {
.rankings__full-btn {
margin-top: 25px;
}
}
@media (max-width: 479px) {
.rankings__full-btn {
margin-top: 20px;
}
}
/*--------------------------------------------------------------------*/
/*---------------------------- ANIMATIONS ----------------------------*/
/*--------------------------------------------------------------------*/
@supports (animation-name: rankings__show) {
.rankings--inserted .rankings__person,
.rankings--inserted .rankings__full-btn {
transform: translateY(20px);
opacity: 0;
animation: rankings__show 0.675s cubic-bezier(0, 0, .15, 1) 0s 1 forwards;
will-change: transform, opacity;
}
.rankings--inserted .rankings__top .rankings__person {
transform: translateY(-20px);
}
@media (max-width: 639px) {
.rankings--inserted .rankings__person,
.rankings--inserted .rankings__full-btn {
transform: translateY(15px);
}
.rankings--inserted .rankings__top .rankings__person {
transform: translateY(-15px);
}
}
}
@keyframes rankings__show {
to {
transform: translateY(0px);
opacity: 1;
}
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*------------------------ RANKINGS-SECTION --------------------------*/
/*====================================================================*/
.rankings-section {
position: relative;
background-color: #f6f6f6;
}
.rankings-section__rankings-wrapper {
padding-top: 20px;
padding-bottom: 50px;
overflow: hidden;
will-change: contents, height;
}
@media (max-width: 767px) {
.rankings-section__rankings-wrapper {
padding-bottom: 40px;
}
}
/*--------------------------------------------------------------------*/
/*------------------------------ HEADER ------------------------------*/
/*--------------------------------------------------------------------*/
.rankings-section__form {
margin-bottom: -80px;
}
.rankings-section__form-wrapper {
position: relative;
display: flex;
align-items: flex-end;
padding-top: 50px;
padding-bottom: 110px;
margin-top: calc((0.875rem * 2) + 1.875rem);
}
@media (min-width: 768px) and (max-width: 1023px) {
.rankings-section:not(.rankings-section--simplified) .rankings-section__form-wrapper {
flex-wrap: wrap;
padding-top: 40px;
padding-bottom: 100px;
}
}
@media (max-width: 767px) {
.rankings-section__form-wrapper {
flex-wrap: wrap;
padding-top: 40px;
padding-bottom: 100px;
}
}
@media (max-width: 479px) {
.rankings-section__form-wrapper {
padding-top: 30px;
padding-bottom: 90px;
margin-top: calc((0.75rem * 2) + 1.75rem);
}
}
@media (max-width: 359px) {
.rankings-section__form-wrapper {
margin-top: calc((0.625rem * 2) + 1.375rem);
}
}
.rankings-section__form-btn {
margin: 7px 0;
margin-left: 30px;
}
@media (max-width: 767px) {
.rankings-section__form-btn {
margin: 5px 0;
}
}
/*---------------------------- INFO ----------------------------*/
.rankings-section__info {
display: flex;
flex-wrap: wrap;
margin-right: auto;
color: #939393;
}
@media (min-width: 768px) {
.rankings-section__info {
padding-right: 10px;
font-size: 1.0625rem;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.rankings-section:not(.rankings-section--simplified) .rankings-section__info {
width: 100%;
margin-bottom: 20px;
}
}
@media (max-width: 767px) {
.rankings-section__info {
width: 100%;
margin-bottom: 20px;
font-size: 0.9375rem;
}
}
.rankings-section__title {
width: 100%;
color: #fff;
}
@media (min-width: 768px) {
.rankings-section__title {
padding-right: 40px;
}
}
.rankings-section__date,
.rankings-section__info-text {
margin-top: 8px;
margin-right: 40px;
}
@media (max-width: 1023px) {
.rankings-section__date,
.rankings-section__info-text {
margin-right: 30px;
}
}
.rankings-section__date {
position: relative;
}
.rankings-section__date-select {
position: relative;
z-index: 2;
display: inline-block;
padding-right: 23px;
padding-left: 4px;
margin-left: -4px;
vertical-align: baseline;
color: inherit;
background-image: url("data:image/svg+xml,%3Csvg fill='%23FF0007' xmlns='http://www.w3.org/2000/svg' viewBox='96 160 320 192.3' preserveAspectRatio='xMinYMax meet'%3E%3Cpolygon transform='rotate(90 256 256)' points='160,128.4 192.3,96 352,256 352,256 352,256 192.3,416 160,383.6 287.3,256 ' /%3E%3C/svg%3E");
background-position: right center;
background-repeat: no-repeat;
background-size: 16px 7px;
border: 1px solid rgba(147, 147, 147, 0);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
transition-property: border-color;
}
@supports (-moz-appearance: none) {
.rankings-section__date-select {
padding-left: 0;
}
}
@media (max-width: 767px) {
.rankings-section__date-select {
padding-right: 21px;
background-size: 14px 7px;
}
}
.rankings-section__date-select:hover,
.rankings-section__date-select:focus {
border-color: #939393;
}
.rankings-section__date-select:focus-visible {
border-color: #fff;
}
.rankings-section__date-select:-moz-focusring {
border-color: #fff;
}
.rankings-section__date-select::-ms-expand {
display: none;
}
.rankings-section__date-select option {
font: inherit;
color: inherit;
background-color: #231F20;
}
/*---------------------------- CATEGORY ----------------------------*/
.rankings-section__category-wrapper {
position: absolute;
top: calc((-0.875rem * 2) - 1.875rem);
left: 0;
width: 100%;
padding: 0 30px;
font-size: 0;
overflow: auto;
scrollbar-width: thin;
}
@media (max-width: 767px) {
.rankings-section__category-wrapper {
padding: 0 15px;
}
}
@media (max-width: 479px) {
.rankings-section__category-wrapper {
top: calc((-0.75rem * 2) - 1.75rem);
}
}
@media (max-width: 359px) {
.rankings-section__category-wrapper {
top: calc((-0.625rem * 2) - 1.375rem);
}
}
.rankings-section__category {
text-align: center;
white-space: nowrap;
}
@media (max-width: 767px) {
.rankings-section__category {
text-align: left;
}
}
.rankings-section__category-item {
position: relative;
display: inline-block;
padding-top: 0.875rem;
padding-bottom: 0.875rem;
cursor: pointer;
transition-property: color, background, transform, opacity, border;
}
@media (max-width: 479px) {
.rankings-section__category-item {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
}
@media (max-width: 359px) {
.rankings-section__category-item {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
}
.rankings-section__category-item input {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
margin: auto;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.rankings-section__category-item .text {
position: relative;
display: inline-block;
padding: 0 1.875rem;
font-size: 1.4375rem;
font-weight: 400;
text-transform: uppercase;
line-height: 1.875rem;
white-space: nowrap;
color: #231F20;
transition: inherit;
}
@media (max-width: 767px) {
.rankings-section__category-item .text {
padding: 0 0.9375rem;
}
}
@media (max-width: 479px) {
.rankings-section__category-item .text {
font-size: 1.25rem;
line-height: 1.75rem;
}
}
@media (max-width: 359px) {
.rankings-section__category-item .text {
padding: 0 0.875rem;
font-size: 1.0625rem;
line-height: 1.375rem;
}
}
@media (max-width: 767px) {
.rankings-section__category-item:first-of-type .text {
padding-left: 0;
}
.rankings-section__category-item:last-of-type .text {
padding-right: 0;
}
}
.rankings-section__category-item input:focus-visible ~ .text {
outline: 2px solid #000;
outline-offset: -2px;
}
.rankings-section__category-item input:-moz-focusring ~ .text {
outline: 2px solid #000;
outline-offset: -2px;
}
.rankings-section__category-item input:checked ~ .text {
font-weight: bold;
}
.rankings-section__category-item .text:before {
content: "";
position: absolute;
top: 0;
left: 100%;
bottom: 0;
height: calc(100% - 0.35em);
width: 1px;
margin: auto;
background-color: #231F20;
}
.rankings-section__category-item:last-child .text:before {
content: none;
}
.rankings-section__category-item .text:after {
content: "";
position: absolute;
top: 100%;
left: 0px;
right: 0;
transform: scaleY(0);
transform-origin: bottom center;
backface-visibility: hidden;
width: calc(100% - 1.875rem * 2);
height: 4px;
margin: auto;
margin-top: 0.625rem;
background-color: #FF0007;
border-top-right-radius: 2px;
border-top-left-radius: 2px;
opacity: 0;
transition: inherit;
}
@media (max-width: 767px) {
.rankings-section__category-item .text:after {
left: 0.9375rem;
right: auto;
width: calc(100% - 0.9375rem * 2);
}
.rankings-section__category-item:first-of-type .text:after {
left: 0rem;
width: calc(100% - 0.9375rem);
}
.rankings-section__category-item:last-of-type .text:after {
width: calc(100% - 0.9375rem);
}
}
@media (max-width: 479px) {
.rankings-section__category-item .text:after {
margin-top: 0.5rem;
}
}
@media (max-width: 359px) {
.rankings-section__category-item .text:after {
left: 0.875rem;
height: 3px;
margin-top: 0.4375rem;
}
.rankings-section__category-item:first-of-type .text:after {
left: 0rem;
width: calc(100% - 0.875rem);
}
.rankings-section__category-item:last-of-type .text:after {
width: calc(100% - 0.875rem);
}
}
.rankings-section__category-item input:focus ~ .text:after,
.rankings-section__category-item input:hover ~ .text:after,
.rankings-section__category-item input:checked ~ .text:after {
transform: scaleY(1);
opacity: 1;
}
/*---------------------------- SUBCATEGORY ----------------------------*/
.rankings-section__subcategory {
flex-shrink: 0;
font-size: 0;
}
.rankings-section__subcategory-title {
width: 100%;
margin-bottom: 10px;
font-size: 1.0625rem;
color: #939393;
}
@media (max-width: 767px) {
.rankings-section__subcategory-title {
font-size: 0.9375rem;
}
}
.rankings-section__subcategory-item {
position: relative;
display: inline-block;
margin: 7px 0;
cursor: pointer;
}
@media (min-width: 768px) {
.rankings-section__subcategory-item:not(:last-of-type) {
margin-right: 14px;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.no-js .rankings-section:not(.rankings-section--simplified) .rankings-section__subcategory-item:last-of-type {
margin-right: 30px;
}
}
@media (max-width: 767px) {
.rankings-section__subcategory-item {
margin: 5px 0;
}
.rankings-section__subcategory-item {
margin-right: 10px;
}
.js .rankings-section__subcategory-item:last-of-type {
margin-right: 0px;
}
.no-js .rankings-section__subcategory-item:last-of-type {
margin-right: 15px;
}
}
.rankings-section__subcategory-item input {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
margin: auto;
opacity: 0;
cursor: pointer;
}
/*--------------------------------------------------------------------*/
/*------------------------------ LOADER ------------------------------*/
/*--------------------------------------------------------------------*/
.rankings-section__loader {
z-index: 999;
height: calc(100% + (0.875rem * 2) + 1.875rem);
margin-top: calc((-0.875rem * 2) - 1.75rem);
background-color: rgba(255, 255, 255, 0.25);
opacity: 0;
visibility: hidden;
transition:
opacity 0.3s ease 0s,
visibility 0s linear 0.3s;
will-change: opacity;
}
@media (max-width: 479px) {
.rankings-section__loader {
height: calc(100% + (0.75rem * 2) + 1.75rem);
margin-top: calc((-0.75rem * 2) - 1.75rem);
}
}
@media (max-width: 359px) {
.rankings-section__loader {
height: calc(100% + (0.625rem * 2) + 1.375rem);
margin-top: calc((-0.625rem * 2) - 1.375rem);
}
}
.rankings-section[aria-busy="true"] .rankings-section__loader {
opacity: 1;
visibility: visible;
cursor: progress;
transition:
opacity 0.3s ease 0s;
}
.rankings-section__loader .anim {
position: absolute;
top: 200px;
right: 0;
left: 0;
width: 0.9375rem;
height: 0.9375rem;
margin: auto;
transform: translateY(-50%);
backface-visibility: hidden;
border-radius: 50%;
animation: ui__loader 1.1s infinite ease;
will-change: box-shadow;
}
@media (min-width: 1024px) {
.rankings-section__loader .anim {
top: 180px;
}
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*----------------------------- PARTNERS -----------------------------*/
/*====================================================================*/
.partners {
padding-top: 40px;
}
@media (max-width: 479px) {
.partners {
padding-top: 30px;
}
}
.partners__list {
padding-top: 20px;
padding-bottom: 30px;
margin: 0 -20px;
display: flex;
flex-wrap: wrap;
}
@media (min-width: 1024px) {
.partners__list {
justify-content: center;
}
}
@media (max-width: 1219px) {
.partners__list {
margin: 0 -15px;
}
}
@media (max-width: 1023px) {
.partners__list {
padding-top: 10px;
}
}
@media (max-width: 767px) {
.partners__list {
padding-bottom: 25px;
}
}
@media (max-width: 399px) {
.partners__list {
padding-bottom: 15px;
}
}
.partners__partner {
flex-basis: 20%;
max-width: 20%;
padding: 20px;
text-align: center;
}
@media (max-width: 1023px) {
.partners__partner {
flex-basis: 33.333%;
max-width: 33.333%;
padding: 25px 15px;
}
}
@media (max-width: 767px) {
.partners__partner {
padding: 15px;
}
}
@media (max-width: 639px) {
.partners__partner {
flex-basis: 50%;
max-width: 50%;
}
}
@media (max-width: 399px) {
.partners__partner {
flex-basis: calc(50% - 30px);
min-width: 160px;
max-width: 100%;
}
}
.partners__image {
max-width: 180px;
margin: 0px auto;
margin-bottom: 15px;
}
@media (max-width: 1023px) {
.partners__image {
max-width: 150px;
margin-bottom: 12px;
margin-left: 0;
}
}
@media (max-width: 1023px) {
.partners__img {
right: auto;
}
}
.partners__description {
max-width: 180px;
margin: 0px auto;
font-size: 0.8125rem;
line-height: 1.0625rem;
}
@media (max-width: 1023px) {
.partners__description {
max-width: 200px;
margin-left: 0;
text-align: left;
}
}
@media (min-width: 480px) and (max-width: 1023px) {
.partners__description {
font-size: 0.875rem;
line-height: 1.25rem;
}
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*--------------------------- IMAGE-LINKS ----------------------------*/
/*====================================================================*/
.image-links {
display: flex;
flex-wrap: wrap;
padding: 25px 0;
margin: 0 -25px;
font-size: 0;
text-align: center;
}
@media (min-width: 1024px) and (max-width: 1219px) {
.image-links {
margin: 0 -15px;
}
}
@media (max-width: 1023px) {
.image-links {
padding: 32px 0;
margin: 0 -8px;
}
}
.image-links__item {
flex-grow: 1;
}
@media (min-width: 768px) {
.image-links__item {
flex-basis: 33.3333%;
max-width: 33.3333%;
padding: 25px;
}
}
@media (min-width: 1024px) and (max-width: 1219px) {
.image-links__item {
padding: 15px;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.image-links__item {
padding: 8px;
}
}
@media (max-width: 767px) {
.image-links__item {
flex-basis: 199px;
min-width: 215px;
padding: 8px;
}
}
.image-links__link {
display: block;
font-size: 1rem;
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*---------------------------- INFO-TABLE ----------------------------*/
/*====================================================================*/
.info-table__table-scroll {
background:
linear-gradient(to right, rgb(255, 255, 255) 30%, rgba(255, 255, 255, 0)),
linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 70%),
radial-gradient(farthest-side at 0 50%, rgba(35, 31, 32, 0.15), rgba(35, 31, 32, 0)),
radial-gradient(farthest-side at 100% 50%, rgba(35, 31, 32, 0.15), rgba(35, 31, 32, 0));
background-color: #fff;
background-position: 0 0, 100% 0, 0 0, 100% 0;
background-repeat: no-repeat;
background-size: 30px 100%, 30px 100%, 15px 100%, 15px 100%;
background-attachment: local, local, scroll, scroll;
overflow: auto;
}
@media (max-width: 1023px) {
.info-table__table-scroll {
margin-right: -15px;
}
}
.info-table__table {
font-size: 0.9375rem;
text-align: left;
line-height: 1.125rem;
}
@media (min-width: 1024px) {
.info-table__table {
width: 100%;
}
}
@media (max-width: 1023px) {
.info-table__table {
display: block;
}
}
.info-table__title {
margin-top: 0;
font-weight: bold;
text-align: left;
}
.info-table__title--small {
font-weight: 400;
}
@media (min-width: 1024px) {
.info-table__title {
padding-bottom: 1.5625rem;
margin-bottom: 0;
font-size: 2.0625rem;
line-height: 2.375rem;
}
.info-table__title--small {
padding-bottom: 1.25rem;
font-size: 1.4375rem;
line-height: 1.75rem;
}
.info-table__header-cell {
font-weight: bold;
text-align: left;
border-bottom: 1px solid #231F20;
}
.info-table__header-cell,
.info-table__cell {
padding: 1.1875rem 1.25rem;
vertical-align: middle;
}
.info-table__header-cell {
padding-top: 0.9375rem;
}
.info-table__row:nth-child(odd) .info-table__cell {
background-color: rgba(0, 0, 0, 0.035);
}
th.info-table__header-cell,
th.info-table__cell {
text-align: left;
}
.info-table__mobile-header {
display: none;
}
}
@media (max-width: 1023px) {
.info-table__title {
display: block;
padding-bottom: 0.9375rem;
margin-bottom: 15px;
font-size: 1.625rem;
line-height: 1.875rem;
}
.info-table__title--small {
padding-bottom: 0.625rem;
font-size: 1.4375rem;
line-height: 1.75rem;
}
.info-table__header {
display: none;
}
.info-table__body {
display: flex;
flex-wrap: wrap;
}
.info-table__row {
flex-basis: calc(33.333% - 15px);
display: block;
max-width: calc(33.333% - 15px);
padding: 0.9375rem 1.25rem;
margin-right: 15px;
background-color: rgba(0, 0, 0, 0.035);
overflow: hidden;
}
.info-table__row:nth-child(1n + 4) {
margin-top: 15px;
}
.info-table__row:last-child {
margin-bottom: 0;
}
.info-table__cell {
clear: both;
display: block;
margin-bottom: 2px;
font-weight: bold;
text-align: left;
overflow: hidden;
}
th.info-table__cell:first-child {
padding-top: 0.9375rem;
padding-right: 1.25rem;
padding-bottom: 0.5rem;
padding-left: 1.25rem;
margin-top: -0.9375rem;
margin-top: calc(-0.9375rem - 10px);
margin-right: -1.25rem;
margin-left: -1.25rem;
margin-bottom: 0.9375rem;
background-color: #fff;
border-bottom: 1px solid #231F20;
}
.info-table__cell:not(:last-child) {
margin-bottom: 3px;
}
.info-table__cell--mobile-top-margin {
margin-top: 6px;
}
.info-table__mobile-header {
float: left;
margin-right: 4px;
font-weight: 400;
}
}
@media (max-width: 767px) {
.info-table__title {
padding-bottom: 0.625rem;
font-size: 1.375rem;
line-height: 1.625rem;
}
.info-table__row {
flex-basis: calc(50% - 15px);
max-width: calc(50% - 15px);
}
.info-table__row:nth-child(1n + 3) {
margin-top: 15px;
}
}
@media (max-width: 599px) {
.info-table__row {
flex-basis: 100%;
max-width: none;
}
.info-table__row:nth-child(1n + 2) {
margin-top: 15px;
}
}
.info-table__cell a .icon {
margin-left: 4px;
}
/*--------------------------------------------------------------------*/
/*------------------------------- TOP --------------------------------*/
/*--------------------------------------------------------------------*/
.info-table__top {
display: flex;
flex-wrap: wrap;
align-items: center;
}
@media (min-width: 1024px) {
.info-table__top {
padding-bottom: 1.5625rem;
}
}
@media (max-width: 1023px) {
.info-table__top {
flex-wrap: wrap;
}
}
.info-table__top .info-table__title {
flex-shrink: 1;
margin-right: auto;
}
@media (min-width: 1024px) {
.info-table__top .info-table__title {
padding-right: 40px;
padding-bottom: 0.625rem;
}
}
@media (max-width: 1023px) {
.info-table__top .info-table__title {
flex: none;
width: 100%;
}
}
/*--------------------------- FILTER-FORM ----------------------------*/
.info-table__filter-form {
flex-shrink: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
margin-top: -0.75rem;
margin-right: -15px;
margin-left: -15px;
}
@media (min-width: 1024px) {
.info-table__filter-form {
justify-content: flex-end;
}
}
@media (max-width: 1023px) {
.info-table__filter-form {
flex-wrap: wrap;
margin-bottom: 1.875rem;
}
}
@media (max-width: 767px) {
.info-table__filter-form {
margin-right: -15px;
margin-left: -15px;
}
}
@media (max-width: 639px) {
.info-table__filter-form {
margin-bottom: 1.25rem;
}
}
.info-table__filter-form .form__item {
margin-right: 15px;
margin-bottom: 0.625rem;
margin-left: 15px;
}
.info-table__filter-form .form__item--search {
flex-grow: 1;
flex-shrink: 1;
width: 220px;
}
.info-table__filter-form .form__item--select {
flex-grow: 1;
flex-shrink: 1;
width: 180px;
}
.info-table__filter-form .form__item .form__input {
width: 100%;
}
/*--------------------------------------------------------------------*/
/*---------------------------- PAGINATION ----------------------------*/
/*--------------------------------------------------------------------*/
.info-table__basic-pagination {
margin-top: 55px;
}
@media (max-width: 1023px) {
.info-table__basic-pagination {
margin-top: 40px;
}
}
@media (max-width: 479px) {
.info-table__basic-pagination {
margin-top: 30px;
}
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*--------------------------- EVENTD-LIST ----------------------------*/
/*====================================================================*/
.events-list {
margin-top: 3.75rem;
margin-bottom: 0.625rem;
}
@media (max-width: 1023px) {
.events-list {
margin-top: 3.125rem;
}
}
@media (max-width: 479px) {
.events-list {
margin-top: 2.1875rem;
margin-bottom: 0;
}
}
.events-list__title {
margin-bottom: 0.9375rem;
}
@media (max-width: 639px) {
.events-list__title {
margin-bottom: 1.125rem;
}
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*-------------------------- HEAD-ARTICLES ---------------------------*/
/*====================================================================*/
.head-articles {
padding: 40px 0;
}
@media (min-width: 1220px) {
.head-articles {
margin-top: 10px;
}
}
.head-articles__wrapper {
display: flex;
align-items: stretch;
}
@media (max-width: 1023px) {
.head-articles__wrapper {
flex-wrap: wrap;
}
}
/*--------------------------------------------------------------------*/
/*------------------------------ HEADER ------------------------------*/
/*--------------------------------------------------------------------*/
.head-articles__header {
flex: none;
display: flex;
flex-direction: column;
width: 30.163859%;
}
@media (max-width: 1219px) {
.head-articles__header {
width: 33.3333%;
}
}
@media (min-width: 1024px) {
.head-articles__header {
padding-right: 1.875rem;
}
}
@media (min-width: 1024px) and (max-width: 1219px) {
_:-ms-input-placeholder, :root .head-articles__header { /*IE10-11*/
width: calc(33.3333% - 1.875rem);
}
}
@media (max-width: 1023px) {
.head-articles__header {
width: 100%;
margin-bottom: 1.875rem;
}
}
@media (min-width: 1024px) {
.head-articles__header-articles-list .articles-list__article {
width: 100%;
}
}
.head-articles__title {
margin-bottom: 1.25rem;
}
@media (min-width: 1024px) and (max-width: 1385px) {
.head-articles__title {
font-size: 2rem;
line-height: 2.375rem;
}
}
@media (min-width: 1024px) and (max-width: 1219px), (max-width: 479px) {
.head-articles__title {
font-size: 1.875rem;
}
}
.head-articles__header-articles-list {
margin-bottom: 1.875rem;
}
.head-articles__header-articles-list .articles-list__title {
min-height: auto;
}
.head-articles__btns {
margin-top: auto;
margin-bottom: -0.9375rem;
font-size: 0;
}
.head-articles__btn {
margin-right: 1.25rem;
margin-bottom: 0.9375rem;
vertical-align: middle;
}
@media (min-width: 1024px) and (max-width: 1219px), (max-width: 479px) {
.head-articles__btn {
padding: 0.375rem 0.625rem;
margin-right: 0.9375rem;
}
}
.head-articles__btn:last-child {
margin-right: 0;
}
/*--------------------------------------------------------------------*/
/*----------------------------- ARTICLES -----------------------------*/
/*--------------------------------------------------------------------*/
.head-articles__articles {
flex-grow: 1;
}
@media (max-width: 1023px) {
.head-articles__articles {
width: 100%;
}
}
.head-articles__articles-list {
margin: -8px;
margin-bottom: -16px;
}
.head-articles__articles-list .articles-list__article {
flex-basis: 199px;
min-width: 215px;
padding: 8px;
margin-bottom: 8px;
}
@media (min-width: 768px) {
.head-articles__articles-list .articles-list__article {
max-width: 50%;
}
}
@media (min-width: 1024px) {
.head-articles__articles-list .articles-list__article:first-child {
margin-left: auto;
}
_:-ms-input-placeholder, :root .head-articles__articles-list .articles-list__article:first-child { /*IE10-11*/
margin-left: 0;
}
}
@media (min-width: 1024px) and (max-width: 1219px), (min-width: 659px) and (max-width: 767px) {
.head-articles__articles-list .articles-list__article:nth-last-child(n+3):nth-last-child(-n+3):first-child .articles-list__title,
.head-articles__articles-list .articles-list__article:nth-last-child(n+3):nth-last-child(-n+3):first-child ~ .articles-list__article .articles-list__title {
font-size: 0.9375rem;
}
}
@media (min-width: 444px) and (max-width: 579px) {
.head-articles__articles-list .articles-list__article:nth-last-child(n+2) .articles-list__title,
.head-articles__articles-list .articles-list__article:nth-last-child(n+2) ~ .articles-list__article .articles-list__title {
font-size: 0.9375rem;
}
}
@media (min-width: 1220px) {
.head-articles__articles-list .articles-list__article {
max-width: 33.3333%;
}
}
.head-articles__articles-list .articles-list__title {
min-height: auto;
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*-------------------------- MAIN-ARTICLES ---------------------------*/
/*====================================================================*/
.main-articles {
margin-top: 40px;
}
@media (max-width: 479px) {
.main-articles {
margin-top: 35px;
}
}
.main-articles__wrapper {
display: flex;
align-items: stretch;
padding: 0 15px;
}
@media (max-width: 767px) {
.main-articles__wrapper {
flex-wrap: wrap;
padding: 0;
}
}
.main-articles__column {
flex: none;
display: flex;
flex-direction: column;
padding: 0 15px;
}
@media (min-width: 1024px) {
.main-articles__column {
width: 52.0673813%;
}
.main-articles__column + .main-articles__column {
width: 47.9326187%;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.main-articles__column {
width: calc(50% - 30px);
}
.main-articles__column + .main-articles__column {
width: calc(50% + 30px);
}
}
@media (max-width: 767px) {
.main-articles__column {
width: 100%;
}
.main-articles__column:first-child {
display: contents;
padding-right: 0;
padding-left: 0;
}
.main-articles__column + .main-articles__column {
margin-top: 2.5rem;
}
}
@media (max-width: 479px) {
.main-articles__column + .main-articles__column {
margin-top: 1.875rem;
}
}
/*--------------------------------------------------------------------*/
/*------------------------------- MAIN -------------------------------*/
/*--------------------------------------------------------------------*/
.main-articles__main-articles-list {
margin-bottom: 2.5rem;
}
@media (min-width: 768px) and (max-width: 1219px) {
.main-articles__main-articles-list {
margin-bottom: 1.875rem;
}
}
@media (max-width: 767px) {
.main-articles__main-articles-list {
padding-right: 15px;
padding-left: 15px;
margin-bottom: 0;
}
}
.main-articles__main-articles-list .articles-list__article--main {
width: 100%;
}
.main-articles__main-articles-list .articles-list__article--main .articles-list__title {
display: block;
}
@media (min-width: 1024px) and (max-width: 1219px), (max-width: 767px) {
.main-articles__main-articles-list .articles-list__article--main .articles-list__title {
margin-bottom: 1.875rem;
font-size: 2.125rem;
line-height: 1.1764706;
}
}
@media (min-width: 768px) and (max-width: 1023px), (max-width: 639px) {
.main-articles__main-articles-list .articles-list__article--main .articles-list__title {
margin-top: 1.25rem;
margin-bottom: 1.5625rem;
font-size: 1.875rem;
line-height: 1.2;
}
}
@media (min-width: 768px) and (max-width: 899px), (max-width: 479px) {
.main-articles__main-articles-list .articles-list__article--main .articles-list__title {
margin-top: 0.625rem;
margin-bottom: 1.5625rem;
font-size: 1.5rem;
line-height: 1.25;
}
}
@media (max-width: 1385px) {
.main-articles__main-articles-list .articles-list__article--main .articles-list__title {
min-height: auto;
}
}
/*--------------------------------------------------------------------*/
/*--------------------------- HIGHLIGHTED ----------------------------*/
/*--------------------------------------------------------------------*/
.main-articles__highlighted {
padding-top: 20px;
padding-bottom: 5px;
border-radius: 8px;
}
@media (max-width: 767px) {
.main-articles__highlighted {
order: 2;
width: 100%;
padding: 15px 0;
padding-top: 30px;
margin-top: 2.5rem;
border-radius: 0;
}
}
@media (max-width: 479px) {
.main-articles__highlighted {
margin-top: 1.875rem;
}
}
.main-articles__highlighted-title {
padding: 0 25px;
margin-bottom: 0.9375rem;
}
@media (max-width: 767px) {
.main-articles__highlighted-title {
padding: 0 15px;
}
}
.main-articles__highlighted-articles-list .articles-list__article {
margin-bottom: 20px;
}
@media (min-width: 1024px), (min-width: 480px) and (max-width: 767px) {
.main-articles__highlighted-articles-list .articles-list__article {
flex-basis: 50%;
width: 50%;
max-width: 50%;
}
}
.main-articles__highlighted-articles-list .articles-list__article {
padding: 0 25px;
}
@media (min-width: 1024px) and (max-width: 1219px) {
.main-articles__highlighted-articles-list .articles-list__article:nth-child(odd) {
padding-right: 15px;
}
.main-articles__highlighted-articles-list .articles-list__article:nth-child(even) {
padding-left: 15px;
}
}
@media (max-width: 767px) {
.main-articles__highlighted-articles-list .articles-list__article {
padding: 0 15px;
}
}
@media (max-width: 479px) {
.main-articles__highlighted-articles-list .articles-list__article {
/*max-width: 100%;*/
}
}
@media (max-width: 1023px) {
.main-articles__highlighted-articles-list .articles-list__title {
min-height: auto;
}
}
@media (min-width: 768px) and (max-width: 1219px), (min-width: 480px) and (max-width: 639px) {
.main-articles__highlighted-articles-list .articles-list__title {
font-size: 0.9375rem;
}
}
/*--------------------------------------------------------------------*/
/*------------------------------- NEWS -------------------------------*/
/*--------------------------------------------------------------------*/
.main-articles__news {
display: flex;
flex-direction: column;
height: 100%;
}
.main-articles__news-title {
margin-bottom: 1.25rem;
}
.main-articles__news-articles-list {
flex-shrink: 0;
}
@media (min-width: 1220px) {
.main-articles__news-articles-list {
margin-right: -1rem;
margin-left: -1rem;
}
}
@media (min-width: 768px) and (max-width: 1219px) {
.main-articles__news-articles-list {
margin-right: -0.5rem;
margin-left: -0.5rem;
}
}
@media (min-width: 640px) and (max-width: 767px) {
.main-articles__news-articles-list {
margin-right: -15px;
margin-left: -15px;
}
}
@media (max-width: 639px) {
.main-articles__news-articles-list {
margin-right: -8px;
margin-left: -8px;
}
}
@media (max-width: 767px) {
.main-articles__news-articles-list--without-images {
margin-bottom: -1rem;
}
}
@media (min-width: 1220px) {
.main-articles__news-articles-list--with-images {
margin-top: 8px;
}
}
.main-articles__news-articles-list .articles-list__article {
flex-basis: calc(50% - 30px);
width: 50%;
max-width: 50%;
margin-bottom: 1rem;
}
@media (min-width: 1220px) {
.main-articles__news-articles-list .articles-list__article {
flex-basis: calc(50% - 2rem);
padding: 0 1rem;
}
.main-articles__news-articles-list--without-images .articles-list__article {
margin-bottom: 1.625rem;
}
}
@media (min-width: 768px) and (max-width: 1219px) {
.main-articles__news-articles-list .articles-list__article {
flex-basis: calc(50% - 1rem);
padding: 0 0.5rem;
}
}
@media (max-width: 639px) {
.main-articles__news-articles-list .articles-list__article {
flex-basis: 215px;
width: auto;
min-width: 215px;
}
}
@media (min-width: 640px) and (max-width: 767px) {
.main-articles__news-articles-list .articles-list__article {
padding: 0 15px;
}
}
@media (max-width: 639px) {
.main-articles__news-articles-list .articles-list__article {
padding: 0 8px;
}
}
.main-articles__news-articles-list--with-images .articles-list__article {
margin-bottom: 0;
}
.main-articles__news-articles-list--with-images .articles-list__article:nth-child(1n + 3) {
margin-top: 2.5rem;
}
@media (min-width: 768px) and (max-width: 1219px) {
.main-articles__news-articles-list--with-images .articles-list__article:nth-child(1n) {
margin-top: calc(1.875rem - 1rem);
}
.main-articles__news-articles-list--with-images .articles-list__article:nth-child(1n + 3) {
margin-top: 1.875rem;
}
}
@media (max-width: 767px) {
.main-articles__news-articles-list--with-images .articles-list__article:nth-child(1n) {
margin-top: 1.875rem;
}
}
@media (max-width: 479px) {
.main-articles__news-articles-list--with-images .articles-list__article:nth-child(1n) {
margin-top: 1.5625rem;
}
}
@media (max-width: 899px) {
.main-articles__news-articles-list--with-images .articles-list__article {
max-width: none;
}
}
@media (max-width: 599px), (min-width: 768px) and (max-width: 899px) {
.main-articles__news-articles-list--without-images .articles-list__article {
max-width: none;
}
}
.main-articles__news-articles-list--without-images .articles-list__title {
min-height: calc(1.4285714em * 5);
font-size: 0.875rem;
line-height: 1.4285714;
}
@media (min-width: 768px) and (max-width: 899px), (min-width: 444px) and (max-width: 579px) {
.main-articles__news-articles-list--without-images .articles-list__title {
font-size: 0.8125rem;
}
}
@media (min-width: 768px) and (max-width: 1219px), (min-width: 444px) and (max-width: 579px) {
.main-articles__news-articles-list--with-images .articles-list__title {
font-size: 0.9375rem;
}
}
@media (max-width: 1385px) {
.main-articles__news-articles-list .articles-list__title {
min-height: auto;
}
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*------------------------- RELATED-ARTICLES -------------------------*/
/*====================================================================*/
.related-articles {
padding: 60px 0;
background-color: #F6F6F6;
}
@media (max-width: 1219px) {
.related-articles {
padding-top: 50px;
padding-bottom: 50px;
}
}
@media (max-width: 767px) {
.related-articles {
padding-top: 40px;
padding-bottom: 40px;
}
}
@media (max-width: 479px) {
.related-articles {
padding-top: 30px;
padding-bottom: 30px;
}
}
.related-articles__title {
margin-bottom: 1.875rem;
}
@media (max-width: 767px) {
.related-articles__title {
margin-bottom: 1.5625rem;
}
}
.related-articles__articles-list {
margin: -25px;
margin-bottom: 0;
}
@media (min-width: 1024px) and (max-width: 1219px) {
.related-articles__articles-list {
margin: -20px;
margin-bottom: 0;
}
}
@media (min-width: 900px) and (max-width: 1023px) {
.related-articles__articles-list {
margin: -15px;
margin-bottom: 0;
}
}
@media (max-width: 899px) {
.related-articles__articles-list {
margin-bottom: -5px;
}
}
@media (max-width: 767px) {
.related-articles__articles-list {
margin: -15px;
margin-bottom: -5px;
}
}
@media (min-width: 768px) {
.related-articles__articles-list .articles-list__article {
flex-basis: 25%;
max-width: 25%;
padding: 25px;
padding-bottom: 0;
}
}
@media (min-width: 1024px) and (max-width: 1219px) {
.related-articles__articles-list .articles-list__article {
padding: 20px;
padding-bottom: 0;
}
}
@media (min-width: 900px) and (max-width: 1023px) {
.related-articles__articles-list .articles-list__article {
padding: 15px;
padding-bottom: 0;
}
}
@media (max-width: 899px) {
.related-articles__articles-list .articles-list__article {
flex-basis: 50%;
max-width: 50%;
padding: 25px;
padding-bottom: 5px;
}
}
@media (max-width: 767px) {
.related-articles__articles-list .articles-list__article {
padding: 15px;
padding-bottom: 5px;
}
}
@media (max-width: 479px) {
.related-articles__articles-list .articles-list__article {
flex-basis: 100%;
width: 100%;
max-width: none;
padding-bottom: 5px;
}
}
.related-articles__articles-list .articles-list__title {
min-height: 0;
}
@media (min-width: 900px) and (max-width: 1219px), (min-width: 480px) and (max-width: 639px) {
.related-articles__articles-list .articles-list__title {
font-size: 0.9375rem;
}
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*--------------------------- PAGE-HEADER ----------------------------*/
/*====================================================================*/
.page-header {
position: relative;
z-index: 1009;
}
/*--------------------------------------------------------------------*/
/*------------------------------- TOP --------------------------------*/
/*--------------------------------------------------------------------*/
.page-header__top-wrapper {
position: relative;
z-index: 10;
display: flex;
}
.page-header__top-wrapper * {
outline-offset: -2px;
}
.page-header__top-divider {
align-self: center;
flex: none;
width: 1px;
height: 18px;
margin: 0 10px;
background-color: #000;
}
.page-header__top-logo {
display: flex;
align-items: center;
}
.page-header__top-logo-img {
max-width: 100px;
height: auto;
}
/*---------------------------- LINKS ----------------------------*/
.page-header__top-links {
display: flex;
align-items: stretch;
margin-left: auto;
}
.page-header__top-links-items {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.page-header__top-links-item {
display: flex;
align-items: stretch;
}
.page-header__top-links-link {
display: flex;
align-items: center;
padding: 0.9375rem;
font-size: 0.75rem;
text-decoration: none;
text-transform: uppercase;
line-height: 1.25rem;
color: #000;
}
.page-header__top-links-link:focus,
.page-header__top-links-link:hover {
color: #005AAA;
}
.page-header__top-links-link--active {
font-weight: bold;
}
.page-header__top-links-link:focus,
.page-header__top-links-link--active {
text-decoration: underline;
}
@supports (text-decoration-color: red) {
.page-header__top-links-link {
text-decoration: underline;
text-decoration-color: transparent;
}
.page-header__top-links-link--active,
.page-header__top-links-link:focus {
text-decoration-color: currentColor;
}
}
.page-header__top-links-btn {
align-self: center;
margin-left: 0.9375rem;
outline-offset: 0px;
}
/*--------------------------------------------------------------------*/
/*------------------------------ BOTTOM ------------------------------*/
/*--------------------------------------------------------------------*/
.page-header__bottom {
position: relative;
z-index: 9;
}
.page-header__bottom-wrapper {
display: flex;
align-items: stretch;
}
/*---------------------------- LOGO ----------------------------*/
.page-header__logo-wrapper {
position: relative;
max-width: 230px;
padding: 5px 0;
margin: 0;
margin-right: 2.1875rem;
font-size: 0;
}
@media (min-width: 480px) and (max-width: 1219px) {
.page-header__logo-wrapper {
padding-top: 10px;
padding-bottom: 10px;
}
}
@media (max-width: 479px) {
.page-header__logo-wrapper {
padding-top: 8px;
padding-bottom: 8px;
}
}
@media (min-width: 1024px) and (max-width: 1219px) {
.page-header__logo-wrapper {
margin-right: 1.5625rem;
}
}
@media (max-width: 479px) {
.page-header__logo-wrapper {
margin-right: 0.9375rem;
}
}
.page-header__logo-img {
width: 165px;
height: 51px;
}
@media (max-width: 1219px) {
.page-header__logo-img {
width: 133px;
height: 41px;
}
}
/*---------------------------- MAIN-NAV ----------------------------*/
@media (min-width: 1220px) {
.page-header__main-nav {
margin-right: 1.875rem;
}
}
@media (min-width: 1220px) and (max-width: 1385px) {
.page-header__main-nav {
margin-right: 1.25rem;
}
}
@media (max-width: 1219px) {
.page-header__main-nav {
margin-right: 0.25rem;
margin-left: auto;
}
}
/*---------------------------- SEARCH ----------------------------*/
.page-header__search {
display: flex;
}
@media (min-width: 1220px) {
.page-header__search {
margin-left: auto;
}
}
.page-header__search:hover,
.page-header__search[focus-within] {
z-index: 99;
}
.page-header__search:focus-within {
z-index: 99;
}
.page-header__search-opener-toggle {
position: relative;
z-index: 2;
align-self: center;
width: 2.875rem;
height: 2.875rem;
padding: 0;
margin: 0;
margin-right: -2.875rem;
}
@media (max-width: 479px) {
.page-header__search-opener-toggle {
width: 2.375rem;
height: 2.375rem;
margin-right: -2.375rem;
}
}
.page-header__search-opener {
align-self: center;
display: flex;
align-items: center;
justify-content: center;
min-width: 2.875rem;
padding: 0.75rem 0.375rem;
font-size: 0;
color: #231F20;
border: 0.0625rem solid #fff;
border-radius: 8px;
cursor: pointer;
transition-property: color, border-color, background;
}
@media (max-width: 479px) {
.page-header__search-opener {
min-width: 2.375rem;
padding: 0.625rem 0.25rem;
}
}
.no-js .page-header__search-opener-toggle:focus ~ .page-header__search-opener,
.page-header__search-opener:focus {
padding: 0.6875rem 0.3125rem;
border-width: 0.125rem;
}
@media (max-width: 479px) {
.no-js .page-header__search-opener-toggle:focus ~ .page-header__search-opener,
.page-header__search-opener:focus {
padding: 0.5625rem 0.1875rem;
}
}
.no-js .page-header__search-opener-toggle:checked ~ .page-header__search-opener,
.no-js .page-header__search-opener-toggle:hover ~ .page-header__search-opener,
.page-header__search-opener[aria-pressed="true"],
.page-header__search-opener:hover {
color: #fff;
background-color: #ff0007;
border-color: #ff0007;
}
.no-js .page-header__search-opener-toggle:focus ~ .page-header__search-opener,
.page-header__search-opener:focus {
color: #fff;
background-color: #ff0007;
border-color: #231F20;
}
.no-js .page-header__search-opener-toggle:focus-visible ~ .page-header__search-opener,
.page-header__search-opener:focus-visible {
border-color: #ff0007;
}
.no-js .page-header__search-opener-toggle:-moz-focusring ~ .page-header__search-opener,
.page-header__search-opener:-moz-focusring {
border-color: #ff0007;
}
.page-header__search-opener .icon {
width: 1.25rem;
height: 1.25rem;
}
@media (max-width: 479px) {
.page-header__search-opener .icon {
width: 1rem;
height: 1rem;
}
}
.page-header__search-form {
position: absolute;
top: 100%;
left: 0;
width: 100%;
transform: translateY(-10px);
border-bottom: 1px solid #FF0007;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
transform 0.3s cubic-bezier(.4, .15, .38, .9) 0s,
opacity 0.3s cubic-bezier(.4, .15, .38, .9) 0s,
visibility 0s linear 0.3s;
}
.js .page-header__search-opener[aria-expanded="true"] ~ .page-header__search-form,
.no-js .page-header__search-opener-toggle:checked ~ .page-header__search-form {
transform: translateY(0px);
opacity: 1;
visibility: visible;
pointer-events: auto;
transition:
transform 0.3s cubic-bezier(.0, .0, .3, 1) 0s,
opacity 0.3s cubic-bezier(.0, .0, .3, 1) 0s;
}
.page-header__search-form-wrapper {
display: flex;
align-items: center;
}
@media (min-width: 768px) and (max-width: 1219px) {
.page-header__search-form-wrapper {
max-width: 85%;
}
}
@media (min-width: 1220px) {
.page-header__search-form-wrapper {
max-width: 920px;
}
}
.page-header__search-form-label {
position: relative;
flex: auto;
display: flex;
align-items: center;
font-size: 1.25rem;
}
@media (max-width: 1023px) {
.page-header__search-form-label {
font-size: 1.0625rem;
}
}
@media (max-width: 479px) {
.page-header__search-form-label {
font-size: 0.9375rem;
}
}
.page-header__search-form-input {
width: 100%;
padding: 0.5em 0.86666em;
padding-left: calc(0.86666em + 1.1em + 0.8em);
margin: 0.7em 0;
margin-right: 0.9375rem;
font-size: inherit;
font-weight: bold;
color: inherit;
border: 2px solid #231F20;
border-bottom-color: #939393;
transition-property: color, background, border, box-shadow, opacity, outline;
}
@media (min-width: 1024px) {
.page-header__search-form-input {
margin-right: 1.5rem;
}
}
@media (max-width: 479px) {
.page-header__search-form-input {
border-width: 1px;
}
}
.page-header__search-form-input:focus {
border-bottom-color: #fff;
}
.page-header__search-form-input::-webkit-input-placeholder { color: #939393; }
.page-header__search-form-input::-moz-placeholder { color: #939393; opacity: 1; }
.page-header__search-form-input:-ms-input-placeholder { color: #939393; }
.page-header__search-form-input:-moz-placeholder { color: #939393; opacity: 1; }
.page-header__search-form-input:placeholder { color: #939393; opacity: 1; }
.page-header__search-form-input::-ms-clear { display: none; width : 0; height: 0; }
.page-header__search-form-input::-ms-reveal { display: none; width : 0; height: 0; }
.page-header__search-form-input::-webkit-search-decoration,
.page-header__search-form-input::-webkit-search-cancel-button,
.page-header__search-form-input::-webkit-search-results-button,
.page-header__search-form-input::-webkit-search-results-decoration { display: none; }
.page-header__search-form-label .icon {
position: absolute;
top: 0;
bottom: 0;
left: 0.8em;
width: 1.1em;
height: 1.1em;
margin: auto;
color: #939393;
transition: all 0.275s cubic-bezier(.5, .25, .5, 1) 0s;
transition-property: color, background, border, box-shadow, opacity, outline;
}
.page-header__search-form-input:hover ~ .icon,
.page-header__search-form-input:focus ~ .icon {
color: #fff;
transition: all 0.125s ease-out 0s;
transition-property: color, background, border, box-shadow, opacity, outline;
}
.page-header__search-form-btn {
margin-top: 2px;
}
@media (max-width: 479px) {
.page-header__search-form-btn {
padding: 0.3125rem 0.75rem;
margin-top: 1px;
font-size: 0.8125rem;
border-radius: 6px;
}
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*----------------------------- MAIN-NAV -----------------------------*/
/*====================================================================*/
.main-nav__link {
text-decoration: none;
color: #ff0007;
}
span.main-nav__link,
span.main-nav__sublink,
span.main-nav__sub2link,
span.main-nav__sub3link {
cursor: default;
}
.main-nav__show-subitems:focus,
.main-nav__link:focus {
text-decoration: underline;
}
@supports (text-decoration-color: red) {
.main-nav__show-subitems,
.main-nav__link {
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0);
}
.main-nav__show-subitems:focus,
.main-nav__link:focus {
text-decoration-color: #fff;
}
}
.main-nav__subitems {
will-change: opacity, transform;
}
.main-nav__sublink,
.main-nav__show-sub2items,
.main-nav__show-sub3items {
position: relative;
display: inline-block;
font-weight: 400;
text-decoration: none;
text-align: left;
color: inherit;
}
.main-nav__sublink:hover,
.main-nav__show-sub2items:hover,
.main-nav__show-sub3items:hover {
color: inherit;
}
.main-nav__sublink--active,
.main-nav__sub2link--active,
.main-nav__sub3link--active,
.main-nav__show-sub2items:focus,
.main-nav__show-sub3items:focus,
.main-nav__sublink:focus,
.main-nav__sub2link:focus,
.main-nav__sub3link:focus,
.main-nav__sub2link:hover,
.main-nav__sub3link:hover {
text-decoration: underline;
color: inherit;
}
@supports (text-decoration-color: red) {
.main-nav__sublink,
.main-nav__sub2link,
.main-nav__sub3link {
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0);
}
.main-nav__sublink--active,
.main-nav__sub2link--active,
.main-nav__sub3link--active,
.main-nav__sublink:focus,
.main-nav__show-sub2items:focus,
.main-nav__show-sub3items:focus,
.main-nav__sub2link:focus,
.main-nav__sub3link:focus,
.main-nav__sub2link:hover,
.main-nav__sub3link:hover {
text-decoration-color: currentColor;
}
}
.main-nav__sublink:before,
.main-nav__sublink:after,
.main-nav__sub2link:before,
.main-nav__sub2link:after,
.main-nav__sub3link:before,
.main-nav__sub3link:after {
content: "";
position: absolute;
top: 0.1em;
right: 0.5em;
bottom: 0;
width: 0.5em;
height: 0.8em;
margin: auto;
background-image: url("data:image/svg+xml,%3Csvg fill='%23FF0007' xmlns='http://www.w3.org/2000/svg' viewBox='160 96 192.3 320' preserveAspectRatio='xMidYMid meet'%3E%3Cpolygon points='160,128.4 192.3,96 352,256 352,256 352,256 192.3,416 160,383.6 287.3,256 ' /%3E%3C/svg%3E");
background-size: 100% 100%;
background-repeat: no-repeat;
transition: inherit;
}
.main-nav__sublink:after,
.main-nav__sub2link:after,
.main-nav__sub3link:after {
background-image: url("data:image/svg+xml,%3Csvg fill='%23ffffff' xmlns='http://www.w3.org/2000/svg' viewBox='160 96 192.3 320' preserveAspectRatio='xMidYMid meet'%3E%3Cpolygon points='160,128.4 192.3,96 352,256 352,256 352,256 192.3,416 160,383.6 287.3,256 ' /%3E%3C/svg%3E");
opacity: 0;
}
.main-nav__sublink:hover:after,
.main-nav__sublink:focus:after,
.main-nav__sub2link:hover:after,
.main-nav__sub2link:focus:after,
.main-nav__sub3link:hover:after,
.main-nav__sub3link:focus:after {
opacity: 1;
}
.main-nav__sublink:hover:before,
.main-nav__sublink:focus:before,
.main-nav__sub2link:hover:before,
.main-nav__sub2link:focus:before,
.main-nav__sub3link:hover:before,
.main-nav__sub3link:focus:before {
opacity: 0;
}
.main-nav__sub2items,
.main-nav__sub3items {
font-size: 1.0625rem;
line-height: 1.25rem;
}
.main-nav__sub2link,
.main-nav__sub3link {
position: relative;
display: block;
color: inherit;
}
.main-nav__sub2link:hover,
.main-nav__sub2link:focus,
.main-nav__sub3link:hover,
.main-nav__sub3link:focus {
color: inherit;
}
/*--------------------------------------------------------------------*/
/*----------------------------- DESKTOP ------------------------------*/
/*--------------------------------------------------------------------*/
@media (min-width: 1220px) {
.main-nav,
.main-nav__items,
.main-nav__item,
.main-nav__link {
display: flex;
align-items: stretch;
}
.main-nav:hover,
.main-nav[focus-within] {
z-index: 99;
}
.main-nav:focus-within {
z-index: 99;
}
.main-nav__items {
flex-wrap: wrap;
}
.main-nav__item {
}
.main-nav__link {
align-items: center;
justify-content: center;
padding: 0.1875rem 0.9375rem;
font-size: 1.125rem;
}
.main-nav__item[focus-within] .main-nav__link,
.main-nav__item:hover .main-nav__link,
.main-nav__link:hover,
.main-nav__link:focus {
color: #fff;
background-color: #ff0007;
}
.main-nav__item:focus-within .main-nav__link {
color: #fff;
background-color: #ff0007;
}
.main-nav__link--active {
color: #fff;
background-color: #ff0007;
}
.main-nav__subitems {
position: absolute;
top: 100%;
left: 0;
width: 100%;
transform: translateY(-10px);
color: #fff;
background-color: #231F20;
border-bottom: 1px solid #FF0007;
opacity: 0;
visibility: hidden;
transition:
transform 0.3s cubic-bezier(.4, .15, .38, .9) 0s,
opacity 0.3s cubic-bezier(.4, .15, .38, .9) 0s,
visibility 0s linear 0.3s;
}
.main-nav__link:focus ~ .main-nav__subitems,
.main-nav__item[focus-within] .main-nav__subitems,
.no-js .main-nav__item:hover .main-nav__subitems,
.main-nav__item.hover .main-nav__subitems {
transform: translateY(0px);
opacity: 1;
visibility: visible;
transition:
transform 0.3s cubic-bezier(.0, .0, .3, 1) 0s,
opacity 0.3s cubic-bezier(.0, .0, .3, 1) 0s;
}
.main-nav__item:focus-within .main-nav__subitems {
z-index: 2;
transform: translateY(0px);
opacity: 1;
visibility: visible;
transition:
transform 0.3s cubic-bezier(.0, .0, .3, 1) 0s,
opacity 0.3s cubic-bezier(.0, .0, .3, 1) 0s;
}
.main-nav__subitems-wrapper {
padding: 0.7em 0;
font-size: 1.25rem;
line-height: 1.5rem;
}
.main-nav__subitem {
display: inline-block;
margin-right: 0.5em;
vertical-align: top;
}
[href].main-nav__link ~ .main-nav__subitems .main-nav__subitems-wrapper:not(.main-nav__subitems-wrapper--no-upper-level) .main-nav__subitem:first-child {
display: none;
}
.main-nav__sublink,
.main-nav__sub2link,
.main-nav__sub3link {
transition-property: text-decoration-color, color, opacity;
}
.main-nav__sublink {
padding: 0.6em 30px;
}
.main-nav__sub2items {
padding-right: 10px;
padding-bottom: 5px;
padding-left: 30px;
}
.main-nav__sub2item {
display: inline-block;
margin-right: 20px;
vertical-align: top;
}
[href].main-nav__sublink ~ .main-nav__sub2items:not(.main-nav__sub2items--no-upper-level) .main-nav__sub2item:first-child {
display: none;
}
.main-nav__sub2link {
padding-bottom: 10px;
}
.main-nav__sub2link:before,
.main-nav__sub2link:after {
display: none;
}
}
@media (min-width: 1220px) and (max-width: 1385px) {
.main-nav__link {
padding-right: 0.625rem;
padding-left: 0.625rem;
font-size: 1rem;
}
.main-nav__subitems-wrapper {
font-size: 1.125rem;
}
.main-nav__sub2items {
padding-bottom: 0px;
font-size: 0.9375rem;
}
.main-nav__sub2link {
padding-bottom: 7px;
}
}
/*--------------------------------------------------------------------*/
/*------------------------------ MOBILE ------------------------------*/
/*--------------------------------------------------------------------*/
@media (max-width: 1219px) {
.main-nav {
position: relative;
display: flex;
align-items: stretch;
}
.main-nav * {
outline-offset: -2px;
}
.main-nav__items {
position: absolute;
top: 100%;
top: calc(100% + 4px);
right: 0;
min-width: 280px;
transform: translateY(-10px);
color: #FF0007;
background-color: #fff;
border-radius: 8px;
box-shadow: 4px 4px 24px -12px rgba(0, 0, 0, 0.33);
outline-color: #ff0007;
opacity: 0;
visibility: hidden;
overflow: hidden;
pointer-events: none;
transition:
transform 0.3s cubic-bezier(.4, .15, .38, .9) 0s,
opacity 0.3s cubic-bezier(.4, .15, .38, .9) 0s,
visibility 0s linear 0.3s;
will-change: opacity, transform;
}
.no-js .main-nav__items {
max-height: calc(100vh - 100px);
overflow: auto;
}
.js .main-nav__opener[aria-expanded="true"] ~ .main-nav__items,
.no-js .main-nav__opener-toggle:checked ~ .main-nav__items {
transform: translateY(0px);
opacity: 1;
visibility: visible;
pointer-events: auto;
transition:
transform 0.3s cubic-bezier(.0, .0, .3, 1) 0s,
opacity 0.3s cubic-bezier(.0, .0, .3, 1) 0s;
}
.main-nav__item {
overflow: hidden;
background-color: #fff;
}
.main-nav__item:first-child {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.main-nav__item:last-child {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.main-nav__show-subitems,
.main-nav__show-sub2items,
.main-nav__show-sub3items,
.main-nav__link,
.main-nav__sublink,
.main-nav__sub2link,
.main-nav__sub3link {
transition-property: text-decoration-color, color, background, opacity, transform;
}
.main-nav__show-subitems,
.main-nav__link {
display: block;
width: 100%;
padding: 0.5rem 1.5625rem;
font-size: 1.0625rem;
text-align: left;
line-height: 1.5rem;
}
.js .main-nav__link:not(:only-child) {
display: none;
}
.main-nav__link--active,
.main-nav__link--active + .main-nav__show-subitems {
color: #fff;
background-color: #ff0007;
}
.main-nav__show-subitems:hover,
.main-nav__show-subitems:focus,
.main-nav__show-sub2items:hover,
.main-nav__show-sub2items:focus,
.main-nav__show-sub3items:hover,
.main-nav__show-sub3items:focus,
.main-nav__link:hover,
.main-nav__link:focus {
color: #fff;
background-color: #ff0007;
outline-color: #fff;
}
.main-nav__show-subitems:hover,
.main-nav__show-subitems:focus {
outline-color: #000;
}
.main-nav__show-subitems,
.main-nav__show-sub2items,
.main-nav__show-sub3items {
display: flex;
}
.main-nav__show-subitems .text,
.main-nav__show-sub2items .text,
.main-nav__show-sub3items .text {
flex-grow: 1;
padding-right: 1.5625rem;
}
.main-nav__show-subitems .icon,
.main-nav__show-sub2items .icon,
.main-nav__show-sub3items .icon {
position: relative;
flex: none;
align-self: center;
width: 12px;
min-width: 12px;
min-height: 8px;
margin-right: -8px;
margin-left: auto;
background-image: url("data:image/svg+xml,%3Csvg fill='%23ff0007' xmlns='http://www.w3.org/2000/svg' viewBox='96 160 320 192.3' preserveAspectRatio='xMidYMid meet'%3E%3Cpolygon transform='rotate(90 256 256)' points='160,128.4 192.3,96 352,256 352,256 352,256 192.3,416 160,383.6 287.3,256 ' /%3E%3C/svg%3E");
background-position: center center;
background-repeat: no-repeat;
background-size: 12px 8px;
transition: inherit;
transition-property: transform, opacity, filter, -webkit-filter;
}
.main-nav__show-subitems:hover .icon,
.main-nav__show-subitems:focus .icon,
.main-nav__show-sub2items:hover .icon,
.main-nav__show-sub2items:focus .icon,
.main-nav__show-sub3items:hover .icon,
.main-nav__show-sub3items:focus .icon {
-webkit-filter: saturate(0) brightness(360%);
filter: saturate(0) brightness(360%);
}
.main-nav__show-subitems[aria-pressed="true"] .icon,
.main-nav__show-sub2items[aria-pressed="true"] .icon,
.main-nav__show-sub3items[aria-pressed="true"] .icon {
transform: rotate(180deg);
}
.main-nav__subitems {
position: relative;
z-index: 2;
width: 100%;
}
.js .main-nav__subitems,
.js .main-nav__sub2items,
.js .main-nav__sub3items {
display: none;
}
.main-nav__subitems-wrapper {
padding: 0.625rem 0rem;
}
.main-nav__sublink,
.main-nav__show-sub2items,
.main-nav__show-sub3items {
width: 100%;
padding: 0.625rem 1.875rem;
}
.main-nav__sublink {
padding-right: calc(1.875rem + 2.75rem + 1px);
}
.main-nav__sublink:before,
.main-nav__sublink:after {
right: calc((2.75rem + 1px - 8px) / 2);
width: 8px;
height: 12px;
}
.js .main-nav__sublink:not(:only-child),
.js .main-nav__sub2link:not(:only-child) {
display: none;
}
.main-nav__sublink--active + .main-nav__show-sub2items,
.main-nav__sub2link--active + .main-nav__show-sub3items {
text-decoration: underline;
text-decoration-color: currentColor;
}
.main-nav__show-sub2items .icon,
.main-nav__show-sub3items .icon {
margin-right: -14px;
background-image: url("data:image/svg+xml,%3Csvg fill='%23FF0007' xmlns='http://www.w3.org/2000/svg' viewBox='96 160 320 192.3' preserveAspectRatio='xMidYMid meet'%3E%3Cpolygon transform='rotate(90 256 256)' points='160,128.4 192.3,96 352,256 352,256 352,256 192.3,416 160,383.6 287.3,256 ' /%3E%3C/svg%3E");
}
.main-nav__sub2items {
padding: 0.3125rem 0rem;
background-color: #272727;
}
.main-nav__sub3items {
padding: 0.25rem 0rem;
background-color: #393939;
}
.main-nav__sub2link {
padding: 0.625rem 1.875rem;
}
.main-nav__sub2link:before,
.main-nav__sub2link:after,
.main-nav__sub3link:before,
.main-nav__sub3link:after {
right: calc((2.75rem - 6px) / 2);
width: 6px;
height: 10px;
}
.main-nav__show-sub3items {
font-weight: inherit;
}
.main-nav__show-sub3items .icon {
width: 10px;
min-width: 10px;
min-height: 6px;
margin-right: -14px;
background-size: 10px 6px;
}
.main-nav__sub3link {
padding: 0.5rem 1.875rem;
font-size: 0.9375rem;
}
/*---------------------------- OPENER ----------------------------*/
.main-nav__opener-toggle {
position: relative;
z-index: 2;
align-self: center;
width: 2.875rem;
height: 2.875rem;
padding: 0;
margin: 0;
margin-right: -2.875rem;
}
.main-nav__opener {
position: relative;
align-self: center;
display: flex;
align-items: center;
justify-content: center;
width: 2.875rem;
height: 2.875rem;
font-size: 0;
color: #231F20;
border: 0.125rem solid #fff;
border-radius: 8px;
transition-property: color, border-color, background;
}
.no-js .main-nav__opener-toggle:hover ~ .main-nav__opener,
.no-js .main-nav__opener-toggle:checked ~ .main-nav__opener,
.main-nav__opener:hover,
.main-nav__opener[aria-expanded="true"] {
color: #fff;
background-color: #ff0007;
border-color: #ff0007;
}
.no-js .main-nav__opener-toggle:focus ~ .main-nav__opener,
.main-nav__opener:focus {
color: #fff;
background-color: #ff0007;
border-color: #231F20;
}
.no-js .main-nav__opener-toggle:focus-visible ~ .main-nav__opener,
.main-nav__opener:focus-visible {
border-color: #ff0007;
}
.no-js .main-nav__opener-toggle:-moz-focusring ~ .main-nav__opener,
.main-nav__opener:-moz-focusring {
border-color: #ff0007;
}
.main-nav__opener .text:before,
.main-nav__opener:before,
.main-nav__opener:after {
content: "";
position: absolute;
top: 50%;
top: calc(50% - 1px);
left: 50%;
width: 1.5rem;
height: 0;
margin-left: -0.75rem;
transform-origin: center center;
color: inherit;
border: 1px solid;
opacity: 1;
transition: opacity 0.275s ease 0s,
transform 0.275s ease 0s;
}
.main-nav__opener .text:before {
margin-top: 0px;
}
.main-nav__opener:before {
margin-top: -0.5rem;
}
.main-nav__opener:after {
margin-top: 0.5rem;
}
.no-js .main-nav__opener-toggle:checked ~ .main-nav__opener .text:before,
.main-nav__opener[aria-expanded="true"] .text:before {
opacity: 0;
}
.no-js .main-nav__opener-toggle:checked ~ .main-nav__opener:before,
.main-nav__opener[aria-expanded="true"]:before {
transform: translateY(0.5rem) rotate(45deg);
}
.no-js .main-nav__opener-toggle:checked ~ .main-nav__opener:after,
.main-nav__opener[aria-expanded="true"]:after {
transform: translateY(-0.5rem) rotate(-45deg);
}
}
@media (max-width: 479px) {
.main-nav__opener-toggle {
width: 2.375rem;
height: 2.375rem;
margin-right: -2.375rem;
}
.main-nav__opener {
width: 2.375rem;
height: 2.375rem;
border-radius: 6px;
}
.main-nav__opener .text:before,
.main-nav__opener:before,
.main-nav__opener:after {
width: 1.25rem;
margin-left: -0.625rem;
}
.main-nav__opener .text:before {
margin-top: 0px;
}
.main-nav__opener:before {
margin-top: -0.375rem;
}
.main-nav__opener:after {
margin-top: 0.375rem;
}
.no-js .main-nav__opener-toggle:checked ~ .main-nav__opener:before,
.main-nav__opener[aria-expanded="true"]:before {
transform: translateY(0.375rem) rotate(45deg);
}
.no-js .main-nav__opener-toggle:checked ~ .main-nav__opener:after,
.main-nav__opener[aria-expanded="true"]:after {
transform: translateY(-0.375rem) rotate(-45deg);
}
}
@media (max-width: 399px) {
.main-nav {
position: static;
}
.main-nav__items {
top: 100%;
width: 100%;
border-radius: 0;
}
.main-nav__item:first-child,
.main-nav__item:last-child {
border-radius: 0;
}
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*--------------------------- PAGE-FOOTER ----------------------------*/
/*====================================================================*/
.page-footer {
}
.page-footer__divider {
margin: 1.5625rem 0px;
border-color: #fff;
}
/*--------------------------------------------------------------------*/
/*--------------------------- SOCIAL-SITES ---------------------------*/
/*--------------------------------------------------------------------*/
.page-footer__social-sites-wrapper {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.page-footer__social-sites-title {
flex: auto;
flex-shrink: 1;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin: 0;
margin-right: 30px;
font-size: 1.0625rem;
font-weight: 400;
}
.page-footer__social-sites {
flex: none;
}
/*--------------------------------------------------------------------*/
/*---------------------------- NAV-ITEMS -----------------------------*/
/*--------------------------------------------------------------------*/
.page-footer__nav-items {
display: flex;
padding-top: 0.9375rem;
padding-bottom: 0.625rem;
margin: 0 -20px;
}
@media (max-width: 1023px) {
.page-footer__nav-items {
flex-wrap: wrap;
padding-top: 0.625rem;
padding-bottom: 0.3125rem;
}
}
@media (max-width: 767px) {
.page-footer__nav-items {
margin-right: -15px;
margin-left: -15px;
}
}
@media (max-width: 639px) {
.page-footer__nav-items {
padding-top: 5px;
}
}
.page-footer__nav-item {
flex: auto;
padding: 0 20px;
margin-bottom: 10px;
}
@media (max-width: 1023px) {
.page-footer__nav-item {
flex-basis: 25%;
min-width: 25%;
max-width: 25%;
}
}
@media (max-width: 639px) {
.page-footer__nav-item {
flex-basis: 100%;
max-width: 100%;
margin-bottom: 0;
}
}
.page-footer__nav-link,
.page-footer__nav-sublink {
display: inline-block;
font-size: 1.0625rem;
color: inherit;
}
@media (max-width: 1219px) {
.page-footer__nav-link,
.page-footer__nav-sublink {
font-size: 1rem;
}
}
.page-footer__nav-link:hover,
.page-footer__nav-sublink:hover,
.page-footer__nav-link:focus,
.page-footer__nav-sublink:focus {
color: #FF0007;
}
.page-footer__nav-link {
padding-top: 20px;
padding-bottom: 15px;
font-weight: bold;
}
@media (max-width: 639px) {
.page-footer__nav-link {
padding-top: 15px;
padding-bottom: 5px;
}
}
.page-footer__nav-sublink {
padding: 5px 0;
}
@media (max-width: 639px) {
.page-footer__nav-sublink {
font-size: 0.875rem;
}
}
@media (max-width: 639px) {
.page-footer__nav-subitems {
display: flex;
flex-wrap: wrap;
}
}
@media (max-width: 639px) {
.page-footer__nav-subitem {
flex: none;
margin-right: 15px;
}
}
/*--------------------------------------------------------------------*/
/*--------------------------- GENERAL-INFO ---------------------------*/
/*--------------------------------------------------------------------*/
.page-footer__general-info {
display: flex;
align-items: center;
padding-bottom: 0.625rem;
}
@media (max-width: 479px) {
.page-footer__general-info {
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
text-align: center;
}
}
.page-footer__logo {
margin-bottom: 0.9375rem;
margin-left: -4px;
font-size: 0;
}
.page-footer__info {
flex: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-right: -25px;
margin-bottom: 0.9375rem;
font-size: 0.8125rem;
line-height: 1.0625rem;
}
@media (max-width: 767px) {
.page-footer__info {
margin-right: -15px;
}
}
@media (max-width: 479px) {
.page-footer__info {
width: 100%;
margin-right: 0;
}
}
.page-footer__info p {
padding: 2px 25px;
margin: 0;
}
@media (max-width: 767px) {
.page-footer__info p {
padding-right: 15px;
padding-left: 15px;
}
}
@media (max-width: 479px) {
.page-footer__info p {
flex: auto;
padding-right: 0px;
padding-left: 0px;
}
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*------------------------------- PAGE -------------------------------*/
/*====================================================================*/
.page__header,
.page__title {
margin: 3rem 0;
}
@media (max-width: 1219px) {
.page__header,
.page__title {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}
}
@media (max-width: 1023px) {
.page__header,
.page__title {
margin-top: 2.25rem;
margin-bottom: 2.25rem;
}
}
@media (max-width: 639px) {
.page__header,
.page__title {
margin-top: 2rem;
margin-bottom: 2rem;
}
}
@media (max-width: 479px) {
.page__header,
.page__title {
margin-top: 1.875rem;
margin-bottom: 1.875rem;
}
}
.page__breadcrumbs {
margin-bottom: 0.625rem;
}
@media (max-width: 479px) {
.page__breadcrumbs {
margin-bottom: 0.375rem;
}
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*---------------------------- HOME-PAGE -----------------------------*/
/*====================================================================*/
.home-page {
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*-------------------------- RANKINGS-PAGE ---------------------------*/
/*====================================================================*/
.rankings-page {
padding-top: 10px;
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*--------------------------- ARTICLE-PAGE ---------------------------*/
/*====================================================================*/
.article-page {
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*-------------------------- ARTICLES-PAGE ---------------------------*/
/*====================================================================*/
.articles-page {
position: relative;
padding-bottom: 60px;
overflow: hidden;
}
.articles-page:after {
content: "";
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 50%;
background-color: #f6f6f6;
}
@media (max-width: 1023px) {
.articles-page {
padding-bottom: 50px;
}
}
@media (max-width: 479px) {
.articles-page {
padding-bottom: 40px;
}
}
.articles-page__articles {
position: relative;
z-index: 2;
}
/*--------------------------------------------------------------------*/
/*-------------------------- MAIN-ARTICLES ---------------------------*/
/*--------------------------------------------------------------------*/
.articles-page__main-articles-list {
padding: 28px 0;
margin: 0 -28px;
will-change: contents, height;
}
@media (max-width: 1219px) {
.articles-page__main-articles-list {
padding-top: 20px;
padding-bottom: 20px;
margin-right: -20px;
margin-left: -20px;
}
}
@media (max-width: 767px) {
.articles-page__main-articles-list {
padding-top: 15px;
padding-bottom: 15px;
margin-right: -15px;
margin-left: -15px;
}
}
@media (max-width: 639px) {
.articles-page__main-articles-list {
padding-bottom: 20px;
}
}
.articles-page__main-articles-list .articles-list__article {
flex-basis: 33.333%;
max-width: 33.3333%;
padding: 28px;
}
@media (max-width: 1219px) {
.articles-page__main-articles-list .articles-list__article {
padding: 20px;
}
}
@media (max-width: 1023px) {
.articles-page__main-articles-list .articles-list__article {
flex-basis: 50%;
max-width: 50%;
}
}
@media (max-width: 767px) {
.articles-page__main-articles-list .articles-list__article {
padding: 15px;
}
}
@media (max-width: 639px) {
.articles-page__main-articles-list .articles-list__article {
flex-basis: 100%;
max-width: 100%;
}
}
@media (max-width: 479px), (min-width: 640px) and (max-width: 767px), (min-width: 1024px) and (max-width: 1219px) {
.articles-page__main-articles-list .articles-list__label {
font-size: 0.75rem;
}
.articles-page__main-articles-list .articles-list__image-wrapper + .articles-list__label {
margin-top: 1.5625rem;
}
}
.articles-page__main-articles-list .articles-list__title {
min-height: 0;
}
@media (max-width: 479px), (min-width: 640px) and (max-width: 767px), (min-width: 1024px) and (max-width: 1219px) {
.articles-page__main-articles-list .articles-list__title {
font-size: 1.0625rem;
}
}
/*--------------------------------------------------------------------*/
/*----------------------------- ARTICLES -----------------------------*/
/*--------------------------------------------------------------------*/
.articles-page__older-articles {
background-color: #f6f6f6;
}
.articles-page__older-articles-list {
padding: 30px 0;
margin: 0 -25px;
}
@media (min-width: 1024px) and (max-width: 1219px), (max-width: 899px) {
.articles-page__older-articles-list {
padding-top: 20px;
padding-bottom: 20px;
margin-right: -15px;
margin-left: -15px;
}
}
@media (min-width: 900px) and (max-width: 1023px) {
.articles-page__older-articles-list {
padding-top: 25px;
padding-bottom: 25px;
margin-right: -20px;
margin-left: -20px;
}
}
@media (max-width: 767px) {
.articles-page__older-articles-list {
padding-bottom: 5px;
}
}
@media (min-width: 640px) and (max-width: 767px) {
.articles-page__older-articles-list {
margin-right: -10px;
margin-left: -10px;
}
}
.articles-page__older-articles-list .articles-list__article {
flex-basis: 25%;
max-width: 25%;
padding: 25px;
}
@media (min-width: 1024px) and (max-width: 1219px) {
.articles-page__older-articles-list .articles-list__article {
padding: 15px;
}
}
@media (min-width: 640px) and (max-width: 1023px) {
.articles-page__older-articles-list .articles-list__article {
flex-basis: 33.3333%;
max-width: 33.3333%;
}
}
@media (max-width: 899px) {
.articles-page__older-articles-list .articles-list__article {
padding: 15px;
}
}
@media (min-width: 640px) and (max-width: 767px) {
.articles-page__older-articles-list .articles-list__article {
padding: 10px;
}
}
@media (max-width: 639px) {
.articles-page__older-articles-list .articles-list__article {
flex-basis: 50%;
max-width: 50%;
}
}
@media (max-width: 479px) {
.articles-page__older-articles-list .articles-list__article {
flex-basis: 100%;
width: 100%;
max-width: none;
}
}
.articles-page__older-articles-list .articles-list__title {
min-height: 0;
}
@media (min-width: 1024px) and (max-width: 1219px), (min-width: 640px) and (max-width: 767px) {
.articles-page__older-articles-list .articles-list__title {
font-size: 0.9375rem;
}
}
/*---------------------------- LOAD-MORE ----------------------------*/
.articles-page__load-more-form {
position: relative;
z-index: 2;
padding-top: 0.9375rem;
font-size: 0;
text-align: center;
background-color: #f6f6f6;
overflow: hidden;
}
@media (max-width: 767px) {
.articles-page__load-more-form {
padding-top: 1.5625rem;
}
}
@media (max-width: 639px) {
.articles-page__load-more-form {
padding-top: 1.25rem;
}
}
.articles-page__load-more-form > .center {
display: flex;
flex-direction: column;
align-items: center;
}
.articles-page__load-more-form-state {
padding: 0;
margin: 0;
font-size: 0.875rem;
line-height: 0rem;
font-style: italic;
color: #939393;
opacity: 0;
visibility: hidden;
overflow: hidden;
transition:
opacity 0.2s ease-out 0s,
line-height 0s ease-out 0.1s,
padding 0s ease-out 0.1s,
visibility 0s ease-out 0.3s;
}
.articles-page__load-more-form[aria-busy="true"] .articles-page__load-more-form-state--loading,
.articles-page__load-more-form--done .articles-page__load-more-form-state--done {
line-height: 1.0625rem;
opacity: 1;
visibility: visible;
transition:
opacity 0.2s ease-out 0.1s,
line-height 0.2s ease-out 0s,
padding 0.2s ease-out 0s;
}
.articles-page__load-more-form[aria-busy="true"] .btn ~ .articles-page__load-more-form-state--loading {
padding-top: 0.9375rem;
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*-------------------------- EXTRALIGA-PAGE --------------------------*/
/*====================================================================*/
.extraliga-page {
}
/*--------------------------------------------------------------------*/
/*------------------------------ HEADER ------------------------------*/
/*--------------------------------------------------------------------*/
.extraliga-page__header {
display: flex;
justify-content: space-between;
}
.no-js .extraliga-page__header {
margin-bottom: 1.875rem;
}
@media (max-width: 1385px) {
.no-js .extraliga-page__header {
margin-bottom: 1.5rem;
}
}
@media (max-width: 1023px) {
.no-js .extraliga-page__header {
margin-bottom: 1.125rem;
}
}
.extraliga-page__title {
margin-bottom: 0.9375rem;
}
@media (max-width: 1385px) {
.extraliga-page__title {
margin-bottom: 1.25rem;
}
}
@media (max-width: 1023px) {
.extraliga-page__title {
margin-bottom: 1.875rem;
}
}
@media (max-width: 767px) {
.extraliga-page__title {
margin-bottom: 1.25rem;
}
}
@media (max-width: 479px) {
.extraliga-page__title {
margin-bottom: 0.9375rem;
}
}
.extraliga-page__logo {
position: relative;
top: 1.25rem;
flex-shrink: 1;
width: 94px;
height: 119px;
margin-left: 30px;
}
@media (max-width: 1219px) {
.extraliga-page__logo {
width: 75px;
height: 95px;
}
}
@media (max-width: 1023px) {
.extraliga-page__logo {
top: 0.9375rem;
width: 66px;
height: 84px;
}
}
@media (max-width: 767px) {
.extraliga-page__logo {
width: 63px;
height: 80px;
}
}
@media (max-width: 639px) {
.extraliga-page__logo {
top: 0.75rem;
width: 58px;
height: 74px;
}
}
@media (max-width: 479px) {
.extraliga-page__logo {
width: 51px;
height: 65px;
}
}
/*--------------------------------------------------------------------*/
/*------------------------------- TABS -------------------------------*/
/*--------------------------------------------------------------------*/
.extraliga-page__tabs {
}
@media (max-width: 767px) {
.extraliga-page__tabs {
margin-bottom: 40px;
}
}
@media (max-width: 479px) {
.extraliga-page__tabs {
margin-bottom: 30px;
}
}
@media (min-width: 768px) {
.extraliga-page__tabs .tabs__list {
background-color: #231F20;
}
}
.extraliga-page .tabs__tab-content {
padding-bottom: 70px;
color: #fff;
background-color: #231F20;
}
@media (max-width: 1023px) {
.extraliga-page .tabs__tab-content {
padding-bottom: 50px;
}
}
@media (max-width: 767px) {
.extraliga-page .tabs__tab-content {
padding-bottom: 30px;
}
}
@media (max-width: 479px) {
.extraliga-page .tabs__tab-content {
padding-bottom: 20px;
}
}
@media (max-width: 767px) {
.extraliga-page .tabs__title {
margin-bottom: 5px;
}
}
/*--------------------------------------------------------------------*/
/*----------------------------- MATCHES ------------------------------*/
/*--------------------------------------------------------------------*/
.extraliga-page__matches-tabs-header {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
}
@media (min-width: 768px) {
.extraliga-page__matches-tabs-header .tabs__title {
margin-right: 30px;
}
}
/*---------------------------- TABS ----------------------------*/
.extraliga-page__matches-tabs-nav {
display: flex;
flex-direction: column;
flex-wrap: wrap;
padding-top: 2.5rem;
padding-bottom: 1.875rem;
}
@media (max-width: 767px) {
.extraliga-page__matches-tabs-nav {
width: 100%;
padding-top: 0;
}
}
@media (max-width: 479px) {
.extraliga-page__matches-tabs-nav {
padding-bottom: 1.25rem;
}
}
.extraliga-page__matches-tabs-title {
margin-bottom: 10px;
font-size: 1.0625rem;
color: #939393;
}
@media (max-width: 767px) {
.extraliga-page__matches-tabs-title {
font-size: 0.9375rem;
}
}
.extraliga-page__matches-tabs-nav-list {
flex-shrink: 0;
font-size: 0;
}
.extraliga-page__matches-tabs-nav-item {
position: relative;
display: inline-block;
margin: 7px 0;
cursor: pointer;
}
@media (min-width: 768px) {
.extraliga-page__matches-tabs-nav-item:not(:last-child) {
margin-right: 14px;
}
}
@media (max-width: 767px) {
.extraliga-page__matches-tabs-nav-item {
margin: 5px 0;
}
.extraliga-page__matches-tabs-nav-item {
margin-right: 10px;
}
.extraliga-page__matches-tabs-nav-item:last-child {
margin-right: 0px;
}
}
.extraliga-page__matches-tabs-nav-btn {
margin: 0;
}
.js .extraliga-page__matches-tabs .tabs__tab-content,
.no-js .extraliga-page__matches-tabs .tabs__tab:last-child .tabs__tab-content {
padding-bottom: 0;
}
/*--------------------------------------------------------------------*/
/*------------------------------ TEAMS -------------------------------*/
/*--------------------------------------------------------------------*/
@media (min-width: 768px) {
.extraliga-page .teams-list {
margin-top: 20px;
}
}
.no-js .extraliga-page .teams-list__item--hidden {
display: block;
}
/*---------------------------- LOAD-MORE ----------------------------*/
.extraliga-page__teams-show-more {
position: relative;
z-index: 2;
padding-top: 50px;
padding-bottom: 30px;
font-size: 0;
text-align: center;
overflow: hidden;
}
@media (max-width: 767px) {
.extraliga-page__teams-show-more {
padding-top: 40px;
}
}
@media (max-width: 479px) {
.extraliga-page__teams-show-more {
padding-top: 30px;
padding-bottom: 20px;
}
}
.extraliga-page__teams-show-more > .center {
display: flex;
flex-direction: column;
align-items: center;
}
.extraliga-page__teams-show-more-state {
padding: 0;
margin: 0;
font-size: 0.875rem;
font-style: italic;
line-height: 0rem;
color: #939393;
opacity: 0;
visibility: hidden;
overflow: hidden;
transition:
opacity 0.2s ease-out 0s,
line-height 0s ease-out 0.1s,
padding 0s ease-out 0.1s,
visibility 0s ease-out 0.3s;
}
.extraliga-page__teams-show-more--done .extraliga-page__teams-show-more-state--done {
line-height: 1.0625rem;
opacity: 1;
visibility: visible;
transition:
opacity 0.2s ease-out 0.1s,
line-height 0.2s ease-out 0s,
padding 0.2s ease-out 0s;
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*------------------------- INFO-TABLE-PAGE --------------------------*/
/*====================================================================*/
/*--------------------------------------------------------------------*/
/*------------------------------ HEADER ------------------------------*/
/*--------------------------------------------------------------------*/
.info-table-page__header-content {
display: flex;
align-items: center;
}
@media (max-width: 767px) {
.info-table-page__header-content {
flex-wrap: wrap;
}
}
.info-table-page__title {
flex-shrink: 1;
margin-right: auto;
}
@media (min-width: 768px) {
.info-table-page__title {
padding-right: 40px;
}
}
@media (max-width: 767px) {
.info-table-page__title {
flex: none;
width: 100%;
margin-bottom: 2.25rem;
}
}
@media (max-width: 639px) {
.info-table-page__title {
margin-bottom: 2rem;
}
}
@media (max-width: 479px) {
.info-table-page__title {
margin-bottom: 1.875rem;
}
}
@media (max-width: 1023px) {
.info-table-page--has-filter .info-table-page__title,
.info-table-page__title:only-child {
margin-bottom: 0;
}
}
/*---------------------------- HEADER-LINK ----------------------------*/
.info-table-page__header-link {
flex-shrink: 1;
}
@media (max-width: 767px) {
.info-table-page__header-link {
margin-top: -0.625rem;
margin-bottom: 0.9375rem;
}
}
@media (max-width: 639px) {
.info-table-page__header-link {
margin-top: -0.375rem;
margin-bottom: 0.375rem;
}
}
.info-table-page__header-link-btn {
line-height: 1.375rem;
}
/*---------------------------- SEARCH-FORM ----------------------------*/
.info-table-page__search-form {
flex-shrink: 1;
flex-basis: 350px;
display: flex;
align-items: center;
min-width: 290px;
}
@media (min-width: 768px) {
.info-table-page__search-form {
justify-content: flex-end;
margin-top: -0.75rem;
}
}
@media (max-width: 767px) {
.info-table-page__search-form {
margin-top: -1.375rem;
margin-bottom: 0.9375rem;
}
}
@media (max-width: 639px) {
.info-table-page__search-form {
margin-top: -1.125rem;
margin-bottom: 0.375rem;
}
}
.info-table-page__search-form .form__item--search {
flex-grow: 1;
}
.info-table-page__search-form .form__item--search .form__input {
width: 100%;
border-right: none;
}
.info-table-page__search-form .form__item--btn {
flex: none;
}
/*--------------------------------------------------------------------*/
/*----------------------------- CONTENT ------------------------------*/
/*--------------------------------------------------------------------*/
.info-table-page__pre-info-table-content {
position: relative;
}
@media (max-width: 1023px) {
.info-table-page--has-filter .info-table-page__pre-info-table-content {
margin-top: -0.9375rem;
}
}
@media (max-width: 767px) {
.info-table-page--has-filter .info-table-page__pre-info-table-content {
margin-top: -0.625rem;
}
}
@media (max-width: 479px) {
.info-table-page--has-filter .info-table-page__pre-info-table-content {
margin-top: -0.9375rem;
}
}
.info-table-page__pre-info-table-content + .info-table {
margin-top: 75px;
}
.info-table-page--has-filter .info-table-page__pre-info-table-content + .info-table {
margin-top: 50px;
}
@media (max-width: 1219px) {
.info-table-page__pre-info-table-content + .info-table {
margin-top: 55px;
}
.info-table-page--has-filter .info-table-page__pre-info-table-content + .info-table {
margin-top: 50px;
}
}
@media (max-width: 1023px) {
.info-table-page--has-filter .info-table-page__pre-info-table-content + .info-table {
margin-top: 40px;
}
}
@media (max-width: 767px) {
.info-table-page__pre-info-table-content + .info-table {
margin-top: 40px;
}
.info-table-page--has-filter .info-table-page__pre-info-table-content + .info-table {
margin-top: 30px;
}
}
.info-table-page .info-table + .info-table {
margin-top: 60px;
}
@media (max-width: 1023px) {
.info-table-page .info-table + .info-table {
margin-top: 50px;
}
}
@media (max-width: 479px) {
.info-table-page .info-table + .info-table {
margin-top: 40px;
}
}
.info-table-page .info-table:last-child .info-table__table-scroll:last-child {
margin-bottom: 60px;
}
@media (max-width: 1023px) {
.info-table-page .info-table:last-child .info-table__table-scroll:last-child {
margin-bottom: 50px;
}
}
@media (max-width: 479px) {
.info-table-page .info-table:last-child .info-table__table-scroll:last-child {
margin-bottom: 40px;
}
}
/*---------------------------- FILTER-FORM ----------------------------*/
@media (max-width: 1023px) {
.info-table-page__filter-form-opener-toggle:checked + .info-table-page__filter-form-opener .icon,
.info-table-page__filter-form-opener[aria-pressed="true"] .icon {
transform: translateY(-1px) rotate(180deg);
}
}
.info-table-page__filter-form {
display: flex;
margin-top: -0.75rem;
}
@media (max-width: 1385px) {
.info-table-page__filter-form {
flex-wrap: wrap;
margin-bottom: -0.625rem;
}
}
@media (max-width: 1023px) {
.info-table-page__filter-form {
position: absolute;
top: 100%;
left: 0;
z-index: 10;
flex-direction: column;
align-items: stretch;
width: 100%;
min-width: 280px;
max-width: 360px;
padding: 1.0625rem 0.9375rem;
padding-top: 0.375rem;
margin-top: 4px;
margin-bottom: 0;
transform: translateY(-10px);
background-color: #fff;
border-radius: 8px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
transform 0.3s cubic-bezier(.4, .15, .38, .9) 0s,
opacity 0.3s cubic-bezier(.4, .15, .38, .9) 0s,
visibility 0s linear 0.3s;
will-change: opacity, transform;
}
.js .info-table-page__filter-form-opener[aria-expanded="true"] ~ .info-table-page__filter-form,
.no-js .info-table-page__filter-form-opener-toggle:checked ~ .info-table-page__filter-form {
transform: translateY(0px);
opacity: 1;
visibility: visible;
pointer-events: auto;
transition:
transform 0.3s cubic-bezier(.0, .0, .3, 1) 0s,
opacity 0.3s cubic-bezier(.0, .0, .3, 1) 0s;
}
}
@media (max-width: 399px) {
.info-table-page__filter-form {
width: auto;
max-width: calc(100% + 30px);
margin-right: -15px;
margin-left: -15px;
border-radius: 0;
}
}
@media (min-width: 1024px) {
.info-table-page__filter-form > .form__item:not(:last-child),
.info-table-page__filter-form > .form__date-range:not(:last-child) {
margin-right: 35px;
}
.info-table-page__filter-form .form__item--search:first-child {
flex-grow: 1;
margin-right: 50px;
}
.info-table-page__filter-form .form__item--btn {
margin-left: auto;
}
}
@media (max-width: 1385px) {
.info-table-page__filter-form > .form__item,
.info-table-page__filter-form > .form__date-range {
margin-bottom: 0.625rem;
}
}
@media (max-width: 1023px) {
.info-table-page__filter-form > .form__item--text,
.info-table-page__filter-form > .form__item--text .form__input,
.info-table-page__filter-form > .form__item--multiselect,
.info-table-page__filter-form > .form__date-range {
width: 100%;
}
.info-table-page__filter-form > .form__item:last-child {
margin-bottom: 0;
}
.info-table-page__filter-form .form__item--btn:last-child {
text-align: right;
}
}
@media (min-width: 1024px) {
.info-table-page__filter-form .form__item--search .form__input {
width: 100%;
}
}
/*---------------------------- FILTER-FORM-TROUNAMENT ----------------------------*/
@media (min-width: 1024px) and (max-width: 1385px) {
.info-table-page__filter-form--tournament .form__item--search {
width: 100%;
}
.info-table-page__filter-form--tournament .form__item--search .form__input {
max-width: 320px;
}
}
@media (min-width: 1024px) and (max-width: 1219px) {
.info-table-page__filter-form > .form__item,
.info-table-page__filter-form > .form__date-range {
flex-grow: 1;
}
.info-table-page__filter-form > .form__item:not(:last-child),
.info-table-page__filter-form > .form__date-range:not(:last-child) {
margin-right: calc(10px + 0.75rem);
}
.info-table-page__filter-form > .form__item:nth-last-child(2),
.info-table-page__filter-form > .form__date-range:nth-last-child(2) {
margin-right: 0;
}
}
@media (min-width: 1024px) and (max-width: 1219px) {
.info-table-page__filter-form .form__item--btn {
width: 100%;
margin-bottom: 0;
}
}
/*--------------------------------------------------------------------*/
/*------------------------------- MAP --------------------------------*/
/*--------------------------------------------------------------------*/
.info-table-page__map {
position: relative;
height: 408px;
min-height: 320px;
}
@media (max-width: 767px) {
.info-table-page__map {
margin-right: -15px;
margin-left: -15px;
}
}
@media (max-width: 639px) {
.info-table-page__map {
height: 66.666vw;
}
}
.info-table-page__map > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
}
.info-table-page__map > :not([class]),
.info-table-page__map > [class] {
margin: 0;
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/
/*====================================================================*/
/*---------------------------- TABS-PAGE -----------------------------*/
/*====================================================================*/
.tabs-page__title {
margin-bottom: 0.9375rem;
}
@media (max-width: 1385px) {
.tabs-page__title {
margin-bottom: 1.25rem;
}
}
@media (max-width: 1023px) {
.tabs-page__title {
margin-bottom: 1.875rem;
}
}
@media (max-width: 767px) {
.tabs-page__title {
margin-bottom: 1.25rem;
}
}
@media (max-width: 479px) {
.tabs-page__title {
margin-bottom: 0.9375rem;
}
}
@media (min-width: 1220px) {}
@media (min-width: 1220px) and (max-width: 1385px) {}
@media (min-width: 1386px) {}
@media (min-width: 768px) and (max-width: 1219px) {}
@media (min-width: 1024px) and (max-width: 1219px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
@media (min-width: 640px) and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 639px) {}
@media (max-width: 479px) {}
/* Colors:
* primary: #FF0007
* secondary: #005AAA
* light: #F6F6F6
* dimmed: #939393
* dark: #231F20
*/