@charset "UTF-8";

html.text-popup-open {
	overflow: clip;
}
html:has(section.text-popup:not(.closed)) {
	overflow: clip;
}

body {
	background-color: #222222;
	background-image: url('../img/xb100/xb100-hero-gradient.svg');
	background-position: right top;
	background-repeat: repeat-y;
	background-size: 100% auto;
	font-size: 19px;
}

main * {
	overflow-x: clip;
}

main a {
	text-decoration: underline;
}

main section:not(:first-of-type) {
	padding-top: 50px;
}

section {
	padding-inline: var(--gutter-width);
}

main strong,
main b {
	color: var(--main-content-magenta);
	font-weight: 400;
}
main :is(h1, h2, h3, h4, h5, h6) b {
	font-weight: 700;
}

main a:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-decoration-color: var(--main-content-magenta);
}

main :is(a, button).cta {
	border: 2px solid var(--main-content-magenta);
	color: var(--main-content-magenta);
	font-size: 15px;
	font-weight: 700;
	padding: 5px 20px;
	text-transform: uppercase;
	text-decoration: none;
}

main :is(a, button).cta:is(:hover, :focus-visible) {
	background-color: var(--main-content-magenta);
	color: #fff;
}

section .ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: flex-start;
	flex-grow: 0;
	flex-shrink: 1;
}

section :is(p, ul, ol, h1, h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}

section :is(p, ul, ol, h1, h2, h3, h4, h5, h6):last-child {
	margin-bottom: 0;
}

/*---------------------------------------*\
   MODULE: XB100 HERO
\*---------------------------------------*/
main > img.right-top-animation {
	height: 100vh;
	height: 100svh;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
}

main > img.right-top-animation,
section.xb100-hero > img.right-animation {
	pointer-events: none;
}

section.xb100-hero {
	align-items: center;
	color: #fff;
	display: grid;
	justify-content: center;
	grid-template-columns: 2fr 1fr;
	min-height: calc(100vh - var(--header-height));
	min-height: calc(100svh - var(--header-height));
	padding: 50px var(--gutter-width);
	position: relative;
	z-index: 2;
}

section.xb100-hero:first-of-type {
	padding-top: 0;
}

section.xb100-hero:not(:first-of-type) > img.right-animation {
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
}

section.xb100-hero .content {
	align-items: center;
	display: flex;
	font-weight: 700;
	justify-content: center;
	margin-block: auto;
}

section.xb100-hero .max-width {
	max-width: min(100%, 600px);
}

section.xb100-hero .side-button {
	background-color: #222222;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	height: 32px;
	inset: 50% 0 auto auto;
	outline: 1px solid #222222;
	padding: 5px 20px;
	position: absolute;
	rotate: 90deg;
	text-decoration: none;
	text-transform: uppercase;
	transform: translateX(10px);
	transform-origin: top right;
	min-width: 120px;
}

section.xb100-hero .logos {
	align-items: end;
	display: flex;
	gap: 40px;
}

section.xb100-hero .logos img {
	height: auto;
	max-width: calc((100% - 40px) / 2);
	flex-shrink: 1;
}

section.xb100-hero :is(h1, h2) {
	font-size: 60px;
	line-height: 1;
	margin-block: 20px;
}

section.xb100-hero :is(h1, h2):first-of-type {
	border-top: 3px solid var(--main-content-magenta);
	padding-top: 20px;
}

section.xb100-hero .side-button:is(:hover, :focus-visible) {
	background-color: var(--main-content-magenta);
}

section.xb100-hero .ctas a.cta {
	color: #fff;
}

@media (min-aspect-ratio: 700/824) {
	section.xb100-hero:first-of-type > img.right-animation {
		display: none;
	}
}

@media (max-aspect-ratio: 700/824) {
	main > img.right-top-animation {
		display: none;
	}
	section.xb100-hero > img.right-animation {
		bottom: 0;
		height: 30vh;
		position: absolute;
		right: 0;
		top: revert;
	}
	section.xb100-hero .max-width {
		max-width: min(85%, 600px);
	}
}

@media only screen and (max-width:899px) {
	section.xb100-hero {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	section.xb100-hero .content {
		justify-content: revert;
		margin-inline: 0px auto;
	}
}

@media only screen and (max-width:479px) {
	section.xb100-hero :is(h1, h2) {
		font-size: 40px;
	}
}

/*---------------------------------------*\
   MODULE: HEADING
\*---------------------------------------*/
section.heading {
	padding-block: 35px;
}

section.heading.light {
	background-color: #fff;
}

section.heading.dark {
	background-color: #222222;
}

section.heading :is(h1, h2) {
	font-size: 60px;
	line-height: 1;
	margin-bottom: 0;
	text-align: center;
}

section.heading.light :is(h1, h2) {
	color: #222222;
}

@media only screen and (max-width:479px) {
	section.heading :is(h1, h2) {
		font-size: 40px;
	}
}
/*---------------------------------------*\
   MODULE: ZIG or ZAG
\*---------------------------------------*/
section.xb100-zig-zag {
	background-color: #fff;
	padding-bottom: 50px;
}

section.xb100-zig-zag .content {
	align-items: center;
	display: grid;
	gap: var(--gutter-width);
}

section.xb100-zig-zag.right .content {
	grid-template-columns: 4fr 3fr;
}

section.xb100-zig-zag.left .content {
	grid-template-columns: 3fr 4fr;
}

section.xb100-zig-zag .text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-inline: auto;
	max-width: min(100%, 580px);
}

section.xb100-zig-zag.left .text {
	grid-area: 1 / 1 / 2 / 2;
}

section.xb100-zig-zag .text > :is(h1, h2, h3) {
	font-size: 60px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 0;
}

section.xb100-zig-zag .text > :is(h1, h2, h3):first-child::before {
	border-top: 4px solid var(--main-content-magenta);
	content: '';
	display: block;
	margin-bottom: 10px;
	width: 40px;
}

@media only screen and (max-width:799px) {
	section.xb100-zig-zag:is(.right, .left) .content {
		grid-template-columns: 1fr;
	}
	section.xb100-zig-zag:is(.right, .left) .text {
		grid-area: 2 / 1 / 3 / 2;
	}
}

@media only screen and (max-width:479px) {
	section.xb100-zig-zag .text > :is(h1, h2, h3) {
		font-size: 40px;
	}
}

/*---------------------------------------*\
   MODULE: BLOCK ZIG or ZAG
\*---------------------------------------*/
section.xb100-block-zig-zag {
	background-color: #222222;
	color: #fff;
	padding-bottom: 0;
	padding-inline: 0;
}

section.xb100-block-zig-zag:is(.right, .left) .content {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0;
}

section.xb100-block-zig-zag .text {
	padding: 35px var(--gutter-width);
	position: relative;
	overflow: visible;
	z-index: 1;
}

section.xb100-block-zig-zag .text::before {
	border-bottom: 35px solid transparent;
	border-top: 35px solid transparent;
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

section.xb100-block-zig-zag.right .text::before {
	border-right: 50px solid #222222;
	left: -30px;
}
section.xb100-block-zig-zag.left .text::before {
	border-left: 50px solid #222222;
	right: -30px;
}

section.xb100-block-zig-zag .text > :is(h1, h2, h3) {
	font-size: 32px;
}

section.xb100-block-zig-zag .img-video {
	aspect-ratio: 16/ 9;
	border: none;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

@media only screen and (max-width:999px) {
	section.xb100-block-zig-zag:is(.right, .left) .content {
		grid-template-columns: 1fr;
	}
	section.xb100-block-zig-zag:is(.right, .left) .text {
		grid-area: 2 / 1 / 3 / 2;
	}
	section.xb100-block-zig-zag .text::before {
		display: none;
	}
}
/*---------------------------------------*\
   MODULE: SUBSCRIBE
\*---------------------------------------*/
section.xb100-subscription-form,
main section.xb100-subscription-form:not(:first-of-type) {
	background-color: #222222;
	background-image: url('../img/xb100/xb100-footer-gradient.svg');
	background-position: left top -1px;
	background-repeat: repeat-x;
	background-size: 100% auto;
	color: #fff;
	padding-block: 100px;
	position: relative;
}

section.xb100-subscription-form > img.overlay-logo {
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: 100%;
}

@media only screen and (max-width:699px) {
	section.xb100-subscription-form > img.overlay-logo {
		display: none;
	}
}

section.xb100-subscription-form .content {
	margin-inline: auto;
	max-width: min(100%, 500px);
	text-align: center;
}

section.xb100-subscription-form :is(h1, h2) {
	font-size: 38px;
	line-height: 1;
	margin-bottom: 0;
}

section.xb100-subscription-form form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 50px;
}

section.xb100-subscription-form label .screen-reader {
	position: absolute;
	left: -100000px;
}

section.xb100-subscription-form input[type="email"] {
	border: 1px solid #fff;
	color: #fff;
	margin-inline: auto;
	max-width: min(100%, 400px);
	padding: 5px;
	text-align: center;
	width: 100%;
}

section.xb100-subscription-form input[type="submit"] {
	border: 2px solid var(--main-content-magenta);
	color: #fff;
	margin-inline: auto;
	padding: 5px 25px;
	width: max-content;
}

section.xb100-subscription-form input::-webkit-input-placeholder {
	color: #fff;
}
section.xb100-subscription-form input:-moz-placeholder {
	color: #fff;
}
section.xb100-subscription-form input::-moz-placeholder {
	color: #fff;
}
section.xb100-subscription-form input:-ms-input-placeholder {
	color: #fff;
}

/*---------------------------------------*\
   MODULE: COMPANY LIST
\*---------------------------------------*/
section.xb100-company-list {
	background-color: #fff;
	padding-bottom: 50px;
}

section.xb100-company-list :is(h1, h2) {
	font-size: 38px;
	line-height: 1;
	margin-bottom: 0;
	text-align: center;
}

section.xb100-company-list .filters {
	display: flex;
	flex-wrap: wrap-reverse;
	font-weight: 700;
	justify-content: space-between;
	gap: 20px;
	margin: 35px 0;
}

section.xb100-company-list .filters br {
	display: none;
}

section.xb100-company-list .filters a {
	font-size: 20px;
	text-decoration: none;
	white-space: nowrap;
}

section.xb100-company-list .filters > div {
	border-bottom: 4px solid var(--main-content-magenta);
	display: flex;
	flex-grow: 0;
	font-size: 0;
	gap: 7px;
	position: relative;
}

section.xb100-company-list .filters > div .space {
	display: inline-block;
	width: 25px;
}

section.xb100-company-list div.filters :is(#search-check, .search-check) ~ form {
	border: 3px solid var(--main-content-magenta);
	max-width: min(100%, 425px);
	width: 280px;
}

section.xb100-company-list :is(#search-check, .search-check):checked ~ span.modal {
	opacity: 1;
	position: absolute;
}

section.xb100-company-list :is(#search-check, .search-check):checked ~ form {
	align-items: center;
	display: flex;
	height: 36px;
	left: 0;
	right: 0;
}

section.xb100-company-list :is(input, select, label) {
	font-size: 20px;
	font-weight: 700;
}

section.xb100-company-list select {
	background-image: url('../img/xb100/xb100-arrow-down.svg');
	background-position: right 3px center;
	background-repeat: no-repeat;
	background-size: 12px 8px;
	padding-right: 20px;
}

section.xb100-company-list select option[disabled] {
	display: none;
}

section.xb100-company-list :is(#search-check, .search-check) + .checkmark {
	background-image: url('../img/xb100/xb100-icon-search.svg');
	background-size: 13px 14px;
	background-position: center center;
	display: inline-block;
	margin-top: 3px;
	position: static;
}

section.xb100-company-list :is(#search-check, .search-check):checked + .checkmark {
	background-image: url('../img/icon-search-close.png');
	border: 3px solid var(--main-content-magenta);
	border-left: none;
	height: 36px;
	left: 280px;
	position: absolute;
	right: revert;
	top: -7px;
	width: 34px;
}

section.xb100-company-list label.search-check-label {
	position: static;
	width: auto;
}

section.xb100-company-list div.filters form input[name='name'] {
	font-size: 20px;
	font-weight: 700;
	height: 28px;
	padding: 5px;
	margin-right: 0;
}

section.xb100-company-list :is(table, tr, td, th) {
	border: none;
}

section.xb100-company-list .table-container {
	max-width: calc(100vw - 2 * var(--gutter-width) - var(--scrollbar-visible-width));
	overflow-x: auto;
}

section.xb100-company-list table {
	width: 100%;
}

section.xb100-company-list th {
	white-space: nowrap;
}

section.xb100-company-list tr {
	border-bottom: 1px solid #C8C8C8;
}

section.xb100-company-list thead {
	color: #000;
	font-size: 20px;
	font-weight: 700;
}

section.xb100-company-list tbody {
	color: #000;
	font-size: 15px;
}

section.xb100-company-list :is(td, th) {
	text-align: left;
	vertical-align: middle;
}

section.xb100-company-list :is(td, th):not(:last-child) {
	width: max-content;
}

section.xb100-company-list :is(.hidden, .sector-hidden, .hidden-by-name) {
	display: none;
}

section.xb100-company-list td.rank {
	font-family: "NoeDisplay", serif;
	font-size: 26px;
	font-weight: 700;
}

section.xb100-company-list td.company-name img.logo {
	max-height: 70px;
	width: auto;
}

section.xb100-company-list button:where(.view-more, .view-all) {
	display: block;
	margin: 35px auto 0;
}

@media only screen and (min-width:500px) {
	section.xb100-company-list :is(#search-check, .search-check):checked ~ select {
		display: none;
	}
}

@media only screen and (max-width:499px) {
	section.xb100-company-list .filters br {
		display: revert;
	}
	section.xb100-company-list .filters > div {
		border-bottom: none;
		column-gap: 0;
		display: block;
		font-size: 0;
		width: 100%;
	}
	section.xb100-company-list .filters > div.right {
		text-align: center;
	}
	section.xb100-company-list .filters a {
		border-bottom: 4px solid var(--main-content-magenta);
		display: inline-block;
	}
	section.xb100-company-list div.filters :is(#search-check, .search-check) ~ form {
		width: calc(100% - 34px);
		top: 0;
	}
	section.xb100-company-list div.filters :is(#search-check, .search-check):checked ~ select {
		margin-bottom: 7px;
	}
	section.xb100-company-list .filters :is(.search-check-label, .checkmark) {
		border-bottom: 4px solid var(--main-content-magenta);
	}
	section.xb100-company-list .filters .search-check-label {
		display: inline-block;
		width: calc(100% - 15px);
	}
	section.xb100-company-list :is(#search-check, .search-check) + .checkmark {
		height: 28px;
		left: 0;
		margin-top: 0;
		position: relative;
		top: 10px;
	}
	section.xb100-company-list :is(#search-check, .search-check):checked + .checkmark {
		left: revert;
		right: 0;
		top: 0;
	}
	section.xb100-company-list .filters > div select {
		border-bottom: 4px solid var(--main-content-magenta);
		margin-top: 20px;
		width: 100%;
	}
	section.xb100-company-list .filters > div .space {
		display: none;
	}
}

/*---------------------------------------*\
   MODULE: JUDGES LIST
\*---------------------------------------*/
section.xb100-judges,
main section.xb100-judges:not(:first-of-type) {
	color: #fff;
	padding-block: 100px 50px;
	position: relative;
}

section.xb100-judges > img.overlay-logo {
	right: 0;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: 100%;
}

@media only screen and (max-width:749px) {
	section.xb100-judges > img.overlay-logo {
		display: none;
	}
}

section.xb100-judges :is(h1, h2) {
	font-size: 38px;
	line-height: 1;
	margin-bottom: 0;
	text-align: center;
}

section.xb100-judges .judges {
	column-gap: var(--gutter-width);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	justify-content: center;
	margin-inline: auto;
	max-width: min(100%, 1270px);
	padding-block: 35px 50px;
	row-gap: 35px;
}

section.xb100-judges .judge {
	align-items: flex-start;
	display: grid;
	flex-basis: 300px;
	flex-grow: 1;
	font-weight: 300;
	grid-template-columns: 80px 1fr;
}

section.xb100-judges .judge img {
	display: block;
}

section.xb100-judges .judge .details {
	padding-left: 15px;
}

@media only screen and (max-width:439px) {
	section.xb100-judges .judge .details {
		width: auto;
	}
}

section.xb100-judges .judge :is(h2, h3) {
	font-size: 21px;
	font-weight: 700;
}

/*---------------------------------------*\
   MODULE: TEXT POPUP
\*---------------------------------------*/
section.text-popup {
	align-items: flex-start;
	background-color: #222222;
	padding: var(--gutter-width) !important;
	display: flex;
	justify-content: center;
}

html:not(.no-js) section.text-popup {
	background-color: #222222E8;
	inset: 0;
	opacity: 0;
	overflow: auto;
	pointer-events: none;
	position: fixed;
	transition: opacity 0.2s;
	z-index: 1000;
}

html:not(.no-js) section.text-popup:not(.closed) {
	pointer-events: all;
	opacity: 1;
}

section.text-popup .content {
	background-color: #fff;
	margin-block: auto;
	max-width: min(100%, 800px);
	padding: 25px var(--gutter-width);
	position: relative;
}

html.no-js section.text-popup a.close {
	display: none;
}

section.text-popup a.close {
	align-items: center;
	border: 1px solid var(--main-content-magenta);
	cursor: pointer;
	display: flex;
	font-size: 30px;
	height: 30px;
	justify-content: center;
	position: absolute;
	right: 20px;
	text-decoration: none;
	top: 20px;
	width: 30px;
}

section.text-popup a.close::before {
	content: '×';
	position: relative;
	top: -3px;
}

section.text-popup a.close:is(:hover, :focus-visible) {
	background-color: var(--main-content-magenta);
	color: #fff;
}

section.text-popup a.close > span {
	position: absolute;
	left: -100000px;
}

section.text-popup h2:first-of-type {
	color: #000;
	font-size: 50px;
	font-weight: 700;
	margin-bottom: 0;
}

section.text-popup h2:first-of-type::before {
	border-top: 4px solid var(--main-content-magenta);
	content: '';
	display: block;
	margin-bottom: 10px;
	width: 40px;
}

section.text-popup .points {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0,1fr);
	gap: 25px;
	margin-block: 35px 25px; 
}

@media only screen and (max-width:499px) {
	section.text-popup .points {
		grid-template-columns: 1fr;
	}
}

section.text-popup div.super {
	color: var(--main-content-magenta);
	font-family: "NoeDisplay", serif;
	font-size: 40px;
	font-weight: 700;
}

section.text-popup h3 {
	color: #000;
	font-size: 21px;
	font-weight: 700;
	margin-block: 0;
}

section.text-popup h3 + :is(p, ol, ul) {
	margin-top: 10px;
}

/*---------------------------------------*\
   MODULE: 3-COLUMN MANUAL BLOCK
\*---------------------------------------*/
section.xb100-three-column-blocks {
	background-color: #fff;
}

section.xb100-three-column-blocks .content > :is(h1, h2) {
	font-size: 38px;
	line-height: 1;
	margin-bottom: 0;
	text-align: center;
}

section.xb100-three-column-blocks .blocks {
	column-gap: 35px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	justify-content: center;
	margin-inline: auto;
	max-width: min(100%, 1270px);
	padding-block: 35px 50px;
	row-gap: 50px;
}

section.xb100-three-column-blocks .block {
	text-decoration: none;
}

section.xb100-three-column-blocks .block > :is(h2, h3) {
	font-family: europa, sans-serif;
	font-size: 21px;
}

section.xb100-three-column-blocks .block > :is(h2, h3)::before {
	border-top: 4px solid var(--main-content-magenta);
	content: '';
	display: block;
	margin-bottom: 10px;
	width: 40px;
}

section.xb100-three-column-blocks a.block:is(:hover, :focus-visible) > img {
	opacity: 0.7;
}

section.xb100-three-column-blocks a.block:is(:hover, :focus-visible) > :is(h2, h3) {
	color: var(--main-content-magenta);
}

/*---------------------------------------*\
   SPECIAL MODULE STACKING HANDLERS
\*---------------------------------------*/
section.xb100-hero + section.xb100-block-zig-zag,
section.xb100-hero + section.xb100-subscription-form,
section.xb100-subscription-form + section.xb100-block-zig-zag,
section.xb100-subscription-form + section.xb100-judges,
section.xb100-judges + section.xb100-subscription-form,
section.xb100-judges + section.xb100-block-zig-zag,
section.xb100-zig-zag:not(.xb100-block-zig-zag) + section.xb100-zig-zag:not(.xb100-block-zig-zag),
section.xb100-zig-zag + section.xb100-block-zig-zag,
section.heading + section.xb100-zig-zag {
	padding-top: 0;
}