.notificationTiming
{
	margin-right: 5px;
}
#notificationsDiv
{
	overflow-x: hidden;
}
#notificationsDiv li
{
	width: 450px; 
	/* never wider than a phone's screen */
	max-width: calc(100vw - 20px);
	white-space: normal;
}
.notificationTiming
{
	font-size: 11px;
	color: var(--ui-muted);
}
.notificationBottom
{
	line-height: 18px;
}
.notificationRow
{
	padding: 4px 0px;
	border-top: 1px solid var(--ui-border-soft);
}
.menuWrapper ul li.menuNotificationRow.notSeen:hover
{
	background: var(--ui-accent-soft);
}
.notificationRow.notSeen, .menuWrapper ul li.menuNotificationRow.notSeen
{
	background: var(--ui-surface-muted);
}
.menuWrapper .sf-menu #notificationsDiv li
{
	white-space: normal;
}
#notificationsLoadingId img
{
	max-width: 100%;
	max-height: 100%;
}
.menuWrapper .notificationAvatar img
{
	padding-top: 5px;
}
.notificationAvatar img
{
	width: 100%;
	height: auto;
	max-width: none;
	max-height: none;
	padding-left: 5px;
}
.notificationAvatar
{
	width: 8%;
}
.notificationTextBody
{
	width: 100%;
}
.noAvatar.notificationBody 
{
	width: 100%;
}
.notificationBody 
{
	width: 92%;
	position: relative;
}
.notificationAvatar, .notificationBody
{
	display: inline-block;
	vertical-align: top;
}
.notificationTop .imageContainer
{
	max-width: none;
	max-height: none;
}
.notificationTop
{
	width: 100%;
}
.switchNotificationSeenStatus
{
	position: absolute;
	left: 8px;
	bottom: 0px;
	top: 0px;
	margin: auto;
	height: 50%;
	cursor: pointer;
}
.menuWrapper ul .menuNotificationRow, .notificationRow 
{
	line-height: 20px;
	float: none;
}
.menuWrapper ul .menuNotificationRow a
{
	padding: 4px 1em 4px;
	padding-left: 0.5em;
	display: block;
}
.notificationAvatar .userPanelBasePhoto img
{
	border: 0px;
}
.notificationAvatar .userPanelBasePhoto
{
	max-width: none;
	max-height: none;
}
/*
	The inbox (function_notifications(), notificationItemHTML()): the bell's panel and the notifications page.
	The panel is a dropdown of a theme's menu: the menus' rules (heights, line heights, floats, hover colours, nested
	lists taken for submenus) would reach everything in it, so the panel sets each of those itself (!important where a
	theme's menu rule is more specific). Colours from the --ui-* tokens only.
*/
#notificationsDiv.notificationsPanel
{
	width: 400px !important;
	max-width: calc(100vw - 20px) !important;
	padding: 0 !important;
	overflow: hidden !important;
	background: var(--ui-surface) !important;
	color: var(--ui-text) !important;
	border: 1px solid var(--ui-border) !important;
	border-radius: var(--ui-radius-lg) !important;
	box-shadow: var(--ui-shadow-lg) !important;
	text-align: start !important;
	font-size: 1rem !important;
	line-height: 1.45 !important;
}
#notificationsDiv.notificationsPanel, #notificationsDiv.notificationsPanel *
{
	box-sizing: border-box;
}
#notificationsDiv.notificationsPanel li,
#notificationsDiv.notificationsPanel a,
#notificationsDiv.notificationsPanel button,
#notificationsDiv.notificationsPanel span,
#notificationsDiv.notificationsPanel b,
#notificationsDiv.notificationsPanel time,
#notificationsDiv.notificationsPanel div
{
	float: none !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	line-height: 1.45 !important;
	text-indent: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	white-space: normal !important;
	text-shadow: none !important;
	text-align: start !important;
}
#notificationsDiv.notificationsPanel li
{
	display: block !important;
	position: static !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	list-style: none !important;
}
#notificationsDiv.notificationsPanel li::before, #notificationsDiv.notificationsPanel li::after,
#notificationsDiv.notificationsPanel a::before, #notificationsDiv.notificationsPanel a::after
{
	display: none !important;
}
/* the list of the items is no submenu: the menus' script that opens and closes them leaves it shown */
#notificationsDiv.notificationsPanel ul.notificationsItems
{
	display: block !important;
	position: static !important;
	visibility: visible !important;
	opacity: 1 !important;
	inset: auto !important;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	background: none !important;
	transform: none !important;
}
#notificationsDiv.notificationsPanel li.notificationsPanelHead
{
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 14px !important;
	border-bottom: 1px solid var(--ui-border-soft) !important;
}
#notificationsDiv.notificationsPanel .notificationsPanelHead b
{
	font-size: 1.15rem !important;
	color: var(--ui-text-strong) !important;
}
#notificationsDiv.notificationsPanel button
{
	width: auto !important;
	margin: 0 !important;
	font: inherit !important;
	font-size: .92rem !important;
	cursor: pointer;
	box-shadow: none !important;
}
#notificationsDiv.notificationsPanel .notificationsMarkAll
{
	padding: 2px 4px !important;
	border: 0 !important;
	background: none !important;
	color: var(--ui-accent) !important;
}
#notificationsDiv.notificationsPanel .notificationsMarkAll[disabled]
{
	color: var(--ui-placeholder) !important;
	cursor: default;
}
#notificationsDiv.notificationsPanel li.notificationsPanelTabs
{
	display: flex !important;
	gap: 6px;
	padding: 8px 14px !important;
	border-bottom: 1px solid var(--ui-border-soft) !important;
}
#notificationsDiv.notificationsPanel .notificationsTab
{
	padding: 4px 12px !important;
	border: 1px solid var(--ui-border) !important;
	border-radius: 999px !important;
	background: var(--ui-surface) !important;
	color: var(--ui-muted) !important;
}
#notificationsDiv.notificationsPanel .notificationsTab.isActive
{
	border-color: var(--ui-accent) !important;
	background: var(--ui-accent-soft) !important;
	color: var(--ui-accent) !important;
	font-weight: bold !important;
}
#notificationsDiv.notificationsPanel li.notificationsPanelItems
{
	max-height: min(460px, 65vh) !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
}
#notificationsDiv.notificationsPanel li.notificationsPanelFoot a
{
	display: block !important;
	padding: 10px 14px !important;
	border-top: 1px solid var(--ui-border-soft) !important;
	background: var(--ui-surface) !important;
	color: var(--ui-accent) !important;
	text-align: center !important;
	font-size: 1rem !important;
}
#notificationsDiv.notificationsPanel li.notificationsPanelFoot a:hover
{
	background: var(--ui-soft) !important;
}
#notificationsDiv.notificationsPanel .notificationsLoading, #notificationsDiv.notificationsPanel .notificationsEmpty
{
	padding: 18px 14px !important;
	color: var(--ui-muted) !important;
	text-align: center !important;
}

/* an item: the same in the panel and on the page */
.notificationsItems
{
	margin: 0;
	padding: 0;
	list-style: none;
}
#notificationsDiv.notificationsPanel li.notificationsItem, .notificationsPage li.notificationsItem
{
	position: relative !important;
	display: flex !important;
	align-items: flex-start;
	flex-wrap: wrap;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--ui-border-soft) !important;
	background: var(--ui-surface) !important;
	list-style: none;
}
#notificationsDiv.notificationsPanel li.notificationsItem:last-child, .notificationsPage li.notificationsItem:last-child
{
	border-bottom: 0 !important;
}
#notificationsDiv.notificationsPanel li.notificationsItem.isUnread, .notificationsPage li.notificationsItem.isUnread
{
	background: var(--ui-accent-soft) !important;
}
#notificationsDiv.notificationsPanel a.notificationsItemLink, .notificationsPage a.notificationsItemLink
{
	flex: 1 1 0 !important;
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
	width: auto !important;
	margin: 0 !important;
	padding: 11px 14px !important;
	padding-inline-end: 40px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	color: var(--ui-text) !important;
	text-decoration: none !important;
	font-size: 1rem !important;
	font-weight: normal !important;
}
#notificationsDiv.notificationsPanel a.notificationsItemLink:hover, #notificationsDiv.notificationsPanel a.notificationsItemLink:focus-visible,
.notificationsPage a.notificationsItemLink:hover, .notificationsPage a.notificationsItemLink:focus-visible
{
	background: var(--ui-soft) !important;
	color: var(--ui-text) !important;
}
#notificationsDiv.notificationsPanel .notificationsItemIcon, .notificationsPage .notificationsItemIcon
{
	flex: 0 0 36px;
	width: 36px !important;
	height: 36px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ui-surface-muted) !important;
	color: var(--ui-accent) !important;
	font-size: 1.23rem !important;
	line-height: 1 !important;
	overflow: hidden;
}
.notificationsItemIcon img
{
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover;
	border-radius: 50%;
	padding: 0 !important;
	margin: 0 !important;
}
#notificationsDiv.notificationsPanel .notificationsItemBody, .notificationsPage .notificationsItemBody
{
	flex: 1 1 0;
	min-width: 0;
	display: flex !important;
	flex-direction: column;
	gap: 3px;
}
#notificationsDiv.notificationsPanel .notificationsItemText, .notificationsPage .notificationsItemText
{
	display: block !important;
	overflow-wrap: anywhere;
	color: var(--ui-text) !important;
}
.notificationsItem.isUnread .notificationsItemText
{
	font-weight: bold;
}
#notificationsDiv.notificationsPanel .notificationsItemTime, .notificationsPage .notificationsItemTime
{
	display: block !important;
	font-size: .85rem !important;
	color: var(--ui-muted) !important;
}
#notificationsDiv.notificationsPanel .notificationsItemDot, .notificationsPage .notificationsItemDot
{
	position: absolute !important;
	/* under the ⋮, where it stays when the actions open */
	inset-inline-end: 18px;
	top: 44px;
	width: 8px !important;
	height: 8px !important;
	padding: 0 !important;
	border-radius: 50%;
	background: var(--ui-accent) !important;
}
/* the item's ⋮ and the actions it shows under the item (inside it: the panel stays open) */
#notificationsDiv.notificationsPanel button.notificationsItemMenu, .notificationsPage button.notificationsItemMenu
{
	position: absolute !important;
	inset-inline-end: 8px;
	top: 9px;
	width: 28px !important;
	height: 28px !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border: 0 !important;
	border-radius: 50% !important;
	background: none !important;
	color: var(--ui-muted) !important;
	font-size: 1.08rem !important;
}
#notificationsDiv.notificationsPanel button.notificationsItemMenu:hover, #notificationsDiv.notificationsPanel button.notificationsItemMenu[aria-expanded="true"],
.notificationsPage button.notificationsItemMenu:hover, .notificationsPage button.notificationsItemMenu[aria-expanded="true"]
{
	background: var(--ui-border-soft) !important;
	color: var(--ui-text) !important;
}
#notificationsDiv.notificationsPanel .notificationsItemActions, .notificationsPage .notificationsItemActions
{
	flex: 0 0 100%;
	display: flex !important;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 14px 10px !important;
	padding-inline-start: 60px !important;
}
#notificationsDiv.notificationsPanel .notificationsItemActions[hidden], .notificationsPage .notificationsItemActions[hidden]
{
	display: none !important;
}
#notificationsDiv.notificationsPanel .notificationsItemActions button, .notificationsPage .notificationsItemActions button
{
	display: inline-flex !important;
	align-items: center;
	gap: 5px;
	padding: 4px 10px !important;
	border: 1px solid var(--ui-border) !important;
	border-radius: var(--ui-radius) !important;
	background: var(--ui-surface) !important;
	color: var(--ui-text) !important;
	font-size: .92rem !important;
	cursor: pointer;
}
#notificationsDiv.notificationsPanel .notificationsItemActions button:hover, .notificationsPage .notificationsItemActions button:hover
{
	background: var(--ui-soft) !important;
}
#notificationsDiv.notificationsPanel .notificationsItemActions button.isDanger, .notificationsPage .notificationsItemActions button.isDanger
{
	color: var(--ui-danger) !important;
}
.notificationsItemSelect
{
	display: flex;
	align-items: center;
	align-self: stretch;
	padding-inline-start: 12px;
}
/* a text for screen readers only */
.notificationsSrOnly
{
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

/* the page */
.notificationsPage [hidden]
{
	display: none !important;
}
.notificationsPageBar
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
}
/* the theme's buttons, at the size of a toolbar */
.notificationsPageBar .button
{
	float: none;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 6px 14px;
	font-size: .92rem;
	line-height: 1.4;
}
.notificationsSelectAllLabel
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-inline-start: auto;
}
.notificationsGroup
{
	margin-bottom: 16px;
}
.notificationsGroup h3
{
	margin: 0 0 6px;
	font-size: 1rem;
	color: var(--ui-muted);
}
.notificationsGroup .notificationsItems
{
	border: 1px solid var(--ui-border-soft);
	border-radius: var(--ui-radius-lg);
	overflow: hidden;
	background: var(--ui-surface);
}
.notificationsMoreRow
{
	text-align: center;
}
.notificationsConnectionsLink
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 1rem;
}
.notificationsConnections
{
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}
.notificationsConnections li
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	border-bottom: 1px solid var(--ui-border-soft);
}
.notificationsConnections form
{
	margin-inline-start: auto;
}
/* "Browser notifications" of the connections page (scripts/addons/notifications_webpush.js) */
.notificationsWebPush [hidden]
{
	display: none !important;
}
.notificationsWebPushState
{
	margin: 0 0 8px;
}
.notificationsWebPush[data-state="on"] .notificationsWebPushState
{
	color: var(--ui-success);
}
.notificationsWebPush[data-state="denied"] .notificationsWebPushState, .notificationsWebPush[data-state="unsupported"] .notificationsWebPushState
{
	color: var(--ui-muted);
}

.articleView
{
	
}
.articleViewMedia
{
        margin-bottom: 15px;
}

.articleViewPhoto
{
	text-align: center;
	margin-bottom: 10px;
	border: 0px;
	background: none;
}
.photo_beside .articleViewMedia, .photo_beside_nfloat .articleViewMedia
{
	width: 50%;
	padding-bottom: 15px;
	margin-bottom: 0px;
}
.photo_beside_nfloat .articleViewMedia
{
	float: left;
	padding-right: 15px;
}
.photo_beside .articleViewMedia
{
	float: right;
	padding-left: 15px;
}

.articleViewPhoto img
{
	height: auto;
	max-width: 100%;
}
.articleViewPhoto .articleYoutubePrimary
{
        line-height: 0;
}
.articleViewPhoto .articleYoutubePrimary .videoContainer
{
        margin: 0 auto;
}
.articleViewMediaMeta
{
        display: flex;
        flex-wrap: wrap;
        align-items: top;
        justify-content: space-between;
        gap: 12px;
}
.articleViewMediaMetaGroup-details
{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        font-size: 0.95rem;
        color: var(--ui-muted);
		align-items: center;
}
.articleViewMediaMetaGroup-social
{
        margin-right: auto;
}
.articleViewMediaMeta .articleDate,
.articleViewsCount,
.articleReadingTime
{
        display: inline-flex;
        align-items: center;
        gap: 7px;
}
.articleViewMediaMeta .articleDate
{
        flex-wrap: wrap;
}
.articleViewsCount .icon-eye,
.articleReadingTime .icon-clock
{
        font-size: 1rem;
}
.articleViewsCountLabel
{
}
.articleViewDescription
{
	text-align: justify;
	font-size: 1.2rem;
	line-height: 2rem;
}
.article_categoryWrap .button
{
	width: auto;
	min-width: 0px;
}
.articleViewYoutubeVideo
{
	margin-bottom: 20px;
}
.mainArticleThenOthers
{
	display: flex;
}
.mainArticleThenOthers.mainArticleBesideOthers
{
	flex-direction: row;
	gap: 10px;
}
.mainArticleThenOthers.mainArticleAboveOthers
{
	flex-direction: column;
	gap: 20px;
}
.mainArticleThenOthers.mainArticleBesideOthers .otherArticles
{
	flex: 1;
}
.mainArticleThenOthers.mainArticleBesideOthers .mainArticle
{
	width: 40%;
}
.mainArticleReadMoreButton, .mainArticleThenOthersMoreButton, .boxMoreButton
{
	float: left;
	margin-top: 5px;
}
.articlesListDescription
{
	margin-bottom: 20px;
}
.articlesNavSlider
{
	display: flex;
	gap: 15px;
	align-items: stretch;
}
.articlesNavSliderMain
{
	flex: 1;
	min-width: 0px;
}
.articlesNavSliderNav
{
	flex: 0 0 34%;
	width: 34%;
	min-width: 220px;
	overflow: visible;
	align-self: stretch;
	padding-left: 10px;
	display: flex;
	flex-direction: column;
}
/* the text above the side list (side_list_title), then the list in the room left */
.articlesNavSliderNavTitle
{
	font-weight: bold;
	margin-bottom: 10px;
}
.articlesNavSliderNavList
{
	flex: 1 1 auto;
	min-height: 0px;
}
.articlesNavSliderNav .listBody
{
	display: block;
}
.articlesNavSliderNav .listRow
{
	cursor: pointer;
	opacity: 0.75;
}
.articlesNavSliderNav .listRow.articlesNavSliderNavActive
{
	opacity: 1;
	background: var(--ui-soft);
}
/* until the carousels start (kCarousel, at the end of the page) and in the box previews: the first article only, the
   others stay in the page for the slider (the side list's first one is active, articlesNavSliderBox::navRowClass()) */
.articlesNavSliderMain .listBody:not(.kCarousel) > .listRow:not(:first-child)
{
	display: none;
}
@media (min-width: 851px){
	/* the side list is as high as the main article: its list fills the room under its text, before the strip starts and
	   after (the strip takes the room's height, stripHeightOf) */
	.articlesNavSliderNavList
	{
		position: relative;
	}
	.articlesNavSliderNav .listBody
	{
		position: absolute;
		top: 0px;
		bottom: 0px;
		right: 0px;
		left: 0px;
	}
	.articlesNavSliderNav .listBody:not(.kCarouselReady)
	{
		overflow: hidden;
	}
	/* its items share its height, so the last one ends with the main article: all of them (nav_visible_items empty) or
	   --nav-items of them (the others scroll); the cards fill their part, what does not fit is cut */
	.articlesNavSlider .articlesNavSliderNav .listBody:not(.kCarousel), .articlesNavSlider .articlesNavSliderNav .swiper-vertical > .swiper-wrapper
	{
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
	}
	.articlesNavSlider .articlesNavSliderNavFill .listBody:not(.kCarousel) > .listRow, .articlesNavSlider .articlesNavSliderNavFill .swiper-vertical > .swiper-wrapper > .swiper-slide
	{
		flex: 1 1 0px;
		height: auto;
		min-height: 0px;
		overflow: hidden;
	}
	.articlesNavSlider .articlesNavSliderNavItems .listBody:not(.kCarousel) > .listRow, .articlesNavSlider .articlesNavSliderNavItems .swiper-vertical > .swiper-wrapper > .swiper-slide
	{
		flex: 0 0 calc(100% / var(--nav-items));
		height: calc(100% / var(--nav-items));
		overflow: hidden;
	}
	.articlesNavSliderNav .listRow > .rowTemplateInner
	{
		height: 100%;
		box-sizing: border-box;
	}
	/* a text over the photo (the templates whose .rowTemplateData is inside .rowTemplatePhoto) covers the part of the
	   photo its card shows */
	.articlesNavSliderNav .rowTemplate.title_over_photo > .rowTemplateInner,
	.articlesNavSliderNav .rowTemplate.title_over_photo_always > .rowTemplateInner,
	.articlesNavSliderNav .rowTemplate.title_over_photo_full > .rowTemplateInner
	{
		position: relative;
	}
	.articlesNavSliderNav .rowTemplate.title_over_photo .rowTemplatePhoto,
	.articlesNavSliderNav .rowTemplate.title_over_photo_always .rowTemplatePhoto,
	.articlesNavSliderNav .rowTemplate.title_over_photo_full .rowTemplatePhoto
	{
		position: static;
	}
}
@media (max-width: 850px){
	/* a horizontal strip, as the started one (above the row templates' own list layouts) */
	.articlesNavSlider .articlesNavSliderNav .listBody:not(.kCarousel)
	{
		display: flex;
		flex-wrap: nowrap;
		overflow: hidden;
	}
	.articlesNavSlider .articlesNavSliderNav .listBody:not(.kCarousel) > .listRow
	{
		flex: 0 0 42%;
	}
	/* started, the list stays the clipping flex box it was (Chrome counts the change of box as a layout shift of the
	   whole strip, though nothing moves); the carousel fills it */
	.articlesNavSlider .articlesNavSliderNav .listBody.kCarousel
	{
		display: flex;
		overflow: hidden;
	}
	.articlesNavSlider .articlesNavSliderNav .listBody.kCarousel::before,
	.articlesNavSlider .articlesNavSliderNav .listBody.kCarousel::after
	{
		display: none;
	}
	.articlesNavSlider .articlesNavSliderNav .listBody.kCarousel > .swiper
	{
		flex: 1 1 auto;
		min-width: 0px;
	}
}
.fileDownloadPanel
{
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
}
.fileDownloadButton.isLoading
{
        opacity: 0.7;
        pointer-events: none;
}
.fileDownloadInfo
{
        /* margin-top: 10px; */
        color: var(--ui-muted);
}
.articleViewMediaMetaGroup-file
{
	width: 100%;
}
@media  (max-width:850px){
	
	.mainArticleThenOthers.mainArticleBesideOthers
	{
		flex-direction: column;
	}		
	.mainArticleThenOthers.mainArticleBesideOthers .mainArticle
	{
		width: 100%;
	}
	/* the thumbnails strip goes under the slider */
	.articlesNavSlider
	{
		flex-direction: column;
	}
	.articlesNavSliderNav
	{
		flex: 0 0 auto;
		width: 100%;
		min-width: 0px;
		padding-left: 0px;
	}
}
@media  (max-width:675px){
	.articleViewPhoto
	{
		margin-left: 0px;
		margin-right: 0px;
	}
	
        .photo_beside .articleViewMedia, .photo_beside_nfloat .articleViewMedia
	{
	   width: 100%;
	   padding-left: 0px;
	   padding-right: 0px;
	}
        .articleViewMediaMetaSocial
        {
                margin-right: 0;
        }

}
@media  (max-width:480px){
	
}
/* the article's additional photos: a gallery (kCarousel), or one photo */
.articleAdditionalPhotos
{
	margin: 15px 0px;
}
html .articleAdditionalPhotos .articleAdditionalPhoto img
{
	display: block;
	width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: contain;
}
.ui_tabs.ui-tabs .ui-tabs-nav li, .ui_tabs li
{
	float: right;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon
{
	right: 0.5em;
	left: auto;
}
.ui-accordion .ui-accordion-icons
{
	padding-left: 0.7em;
	padding-right: 2.2em;
}
.ui-spinner .ui-spinner-button
{
	left: 0px;
	right: auto;
}
.ui-spinner a.ui-spinner-button
{
	border-right: 1px solid #D3D3D3;
	border-left: medium none;
}/*

*/
.boxPositionRows
{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.boxPositionRowContentInner
{
	display: flex;
	flex-direction: row;
	align-items: start;
	
}
.boxPositionRow.equalHeightColumns .boxPositionRowContentInner
{
	align-items: stretch;
}
.boxPositionRowColumnInner
{
	display: flex;
	flex-direction: column;
	position: relative;
	z-index:1;
}
.boxPositionRowColumn
{
	flex: 1;
	/* overflow: hidden; */
	position: relative;
	min-width: 0px;
}


.box
{
	/* float: right; */
	/* width: 100%; */
}
.box.fixedWidth
{
    float: none;
}
.show_only_icon_photo ul
{
	font-size: 0px;
}
.show_only_icon_photo ul span
{
	font-size: 2.5rem;
	vertical-align: middle;
}
.boxValue
{
	line-height: 1.8rem;
}
.boxDescription
{
	line-height: 1.5rem;
	font-size: 0.95rem;
	margin-bottom: 5px;
}
.box_structure_image img:not(.limitedDimensions)
{
	width: 100%;
}
/*
.box.width_33
{
	width: 33.33%;
}
.box.width_50
{
	width: 50%;
}
.box.width_66
{
	width: 66.66%;
}
.box.width_75
{
	width: 75%;
}
.box.width_25
{
	width: 25%;
}
*/

.boxPositionRow
{
	position: relative;
	width: 100%;
}

.horizontalBoxPositionType .boxPositionRow
{
	padding: 0px;
}
.boxPositionRowContentInner
{
	position: relative;
	z-index: 3;
}
.boxPositionRowContent
{
	z-index: 3;
	position: relative;
}
.boxPositionBackground
{
	z-index: 1;
}
.boxPositionOverlay
{
	z-index: 2;
}
.boxPositionRow .boxPositionBackground
{
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}
.boxPositionRow .boxPositionBackground.rowBackgroundRepeat
{
	background-repeat: repeat;
	background-size: auto;
}
.boxPositionRow .boxPositionBackground.rowBackgroundRepeat_x
{
	background-repeat: repeat-x;
}
.boxPositionRow .boxPositionBackground.rowBackgroundRepeat_y
{
	background-repeat: repeat-y;
}
.boxPositionRow .boxPositionBackground.rowBackgroundFixed
{
	background-attachment: fixed;
}

.boxPositionOverlay, .boxPositionBackground
{
	position: absolute;
	margin: auto;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	width: 100%;
	height: 100%;
	
}
.mapOverlayWrapper
{
    position: absolute;
    width: 100%;
    background: rgba(0,0,0, 0.6);
    color: #FFF;
    bottom: 0px;
    left: 0px;
    z-index: 10;
    font-size: 1.1rem;
    line-height: 1.9em;
}
.mapOverlayInner
{
    padding: 40px;
}
@media  (max-width:850px){
    .mapOverlayWrapper
       {
        height: 100%;
    }
}
@media  (max-width:675px){
	.box.width_33, .box.width_50, .box.width_66, .box.width_25, .box.width_75
	{
		width: 100%;
	}
}
@media  (max-width:480px){
	.boxes .row, .boxes .boxPositionRowColumn.column 
	{
		margin-bottom: 0px;
	}
}/*ThemeVars*/
/* ==========================================================================
	Repeater boxes on the box kit (classes/boxes/_items.php): the items' layouts and what every item template shares.
	The box prints its values as custom properties on .boxItems: --box-cols / --box-cols-t / --box-cols-m (columns on
	desktop, tablet <= 1024px, phone <= 675px; an empty smaller screen takes the larger one's), --box-gap(-t, -m),
	--box-icon-size, --box-icon-color, --box-title-size, --box-text-size; an item its own colour as --item-color. The card
	itself (fill, border, corners, padding, shadow, hover lift) is the theme's card style (styles/basic/cards.css), the
	text colours the skin's: nothing here sets them.
   ========================================================================== */
.boxItems
{
	--_cols: var(--box-cols, 3);
	--_gap: var(--box-gap, 24px);
	--_accent: var(--skin-accent, #1D76BC);
	display: grid;
	grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
	gap: var(--_gap);
	align-items: stretch;
}
@media (max-width: 1024px)
{
	.boxItems
	{
		--_cols: var(--box-cols-t, var(--box-cols, 3));
		--_gap: var(--box-gap-t, var(--box-gap, 24px));
	}
}
@media (max-width: 675px)
{
	.boxItems
	{
		--_cols: var(--box-cols-m, var(--box-cols-t, 1));
		--_gap: var(--box-gap-m, var(--box-gap-t, var(--box-gap, 16px)));
	}
}
/* list: one column, a line between the items */
.boxItems.layout_list
{
	grid-template-columns: minmax(0, 1fr);
	gap: 0px;
}
.boxItems.layout_list > .itemTemplate + .itemTemplate
{
	border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
.boxItems.layout_list > .itemTemplate > .itemInner
{
	padding-block: calc(var(--_gap) / 2);
}
/* masonry: columns of different heights */
.boxItems.layout_masonry
{
	display: block;
	column-count: var(--_cols);
	column-gap: var(--_gap);
}
.boxItems.layout_masonry > .itemTemplate
{
	break-inside: avoid;
	margin-bottom: var(--_gap);
}
/* bento: the first item two columns wide and two rows high, the others one cell (a single column on a phone) */
.boxItems.layout_bento
{
	grid-auto-flow: dense;
}
.boxItems.layout_bento > .itemTemplate:first-child
{
	grid-column: span min(2, var(--_cols));
	grid-row: span 2;
}
@media (max-width: 675px)
{
	.boxItems.layout_bento > .itemTemplate:first-child
	{
		grid-column: auto;
		grid-row: auto;
	}
}
/* inline: the items one after another on a line, wrapping (a contact bar) */
.boxItems.layout_inline
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--_gap);
	row-gap: 10px;
}
/* carousel and marquee: kCarousel builds its own track around the items */
.boxItems.layout_carousel, .boxItems.layout_marquee
{
	display: block;
}
/* the items */
.itemTemplate
{
	min-width: 0;
	--_item: var(--item-color, var(--box-icon-color, var(--_accent, #1d5fbf)));
}
.itemTemplate > .itemInner
{
	height: 100%;
	box-sizing: border-box;
}
.itemTemplate .itemTitle
{
	margin: 0px;
	font-size: var(--box-title-size, 1.15rem);
	line-height: 1.45;
	color: var(--skin-heading, inherit);
}
.itemTemplate .itemTitle a
{
	color: inherit;
	text-decoration: none;
}
.itemTemplate .itemTitle .highlightWord
{
	color: var(--_item);
}
.itemTemplate .itemText
{
	font-size: var(--box-text-size, 0.95rem);
	line-height: 1.75;
	color: color-mix(in srgb, var(--skin-heading, currentColor) 78%, transparent);
}
.itemTemplate .itemText p
{
	margin: 0px 0px 0.4em;
}
.itemTemplate .itemMore
{
	display: inline-block;
	margin-top: 8px;
	font-weight: 600;
	color: var(--_item);
	text-decoration: none;
}
.itemTemplate .itemBadge
{
	display: inline-block;
	align-self: flex-start;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	background: var(--badge-color, var(--_item));
	color: var(--skin-accent-text, #fff);
	margin-bottom: 6px;
}
/* the ribbon: a word on the card's end edge near its top, in the item's colour (a tab out of the edge) */
.itemTemplate > .itemInner:has(> .itemRibbon)
{
	position: relative;
}
.itemTemplate .itemRibbon
{
	position: absolute;
	top: 14px;
	inset-inline-end: 0px;
	z-index: 3;
	max-width: 70%;
	padding: 4px 12px 4px 14px;
	border-start-start-radius: 999px;
	border-end-start-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: var(--_item);
	color: var(--skin-accent-text, #fff);
	box-shadow: var(--ui-shadow-sm, none);
	pointer-events: none;
}
.itemTemplate .itemChecks
{
	list-style: none;
	margin: 8px 0px 0px;
	padding: 0px;
}
.itemTemplate .itemChecks li
{
	position: relative;
	padding-inline-start: 1.5em;
	margin: 4px 0px;
}
.itemTemplate .itemChecks li::before
{
	content: "✓";
	position: absolute;
	inset-inline-start: 0px;
	font-weight: 700;
	color: var(--_item);
}
/* media: an icon, a picture, a number or an emoji, in its frame (option icon_frame) and fill (icon_fill) */
.itemTemplate .itemMedia
{
	display: inline-grid;
	place-items: center;
	flex: none;
	width: var(--box-icon-size, 48px);
	height: var(--box-icon-size, 48px);
	font-size: calc(var(--box-icon-size, 48px) * 0.5);
	line-height: 1;
	color: var(--_item);
	background: color-mix(in srgb, var(--_item) 14%, transparent);
	border-radius: 50%;
	overflow: hidden;
}
.itemTemplate .itemMedia img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.itemTemplate .itemMedia .itemMediaNumber
{
	font-weight: 800;
	font-size: 0.9em;
}
.itemTemplate.look-icon_frame-none .itemMedia
{
	background: none;
	border-radius: 0px;
	width: auto;
	height: auto;
	font-size: var(--box-icon-size, 48px);
}
.itemTemplate.look-icon_frame-none .itemMedia img
{
	width: var(--box-icon-size, 48px);
	height: auto;
}
.itemTemplate.look-icon_frame-rounded .itemMedia
{
	border-radius: 28%;
}
.itemTemplate.look-icon_frame-square .itemMedia
{
	border-radius: 0px;
}
.itemTemplate.look-icon_frame-blob .itemMedia
{
	border-radius: 42% 58% 55% 45% / 50% 40% 60% 50%;
}
.itemTemplate.look-icon_frame-ring .itemMedia
{
	background: none;
	border: 2px solid var(--_item);
}
.itemTemplate.look-icon_fill-solid:not(.look-icon_frame-none):not(.look-icon_frame-ring) .itemMedia
{
	background: var(--_item);
	color: var(--skin-accent-text, #fff);
}
.itemTemplate.look-icon_fill-outline:not(.look-icon_frame-none) .itemMedia
{
	background: none;
	border: 2px solid color-mix(in srgb, var(--_item) 45%, transparent);
}
/* align */
.itemTemplate.look-align-center
{
	text-align: center;
}
/* hover: fill with the item's colour (always filled where nothing hovers), or zoom the picture */
.itemTemplate.look-hover-fill > .itemInner
{
	transition: background-color 0.25s ease, color 0.25s ease;
}
.itemTemplate.look-hover-fill:hover > .itemInner
{
	background-color: var(--_item);
}
.itemTemplate.look-hover-fill:hover :is(.itemTitle, .itemText, .itemMore, .itemChecks li::before)
{
	color: var(--skin-accent-text, #fff);
}
.itemTemplate.look-hover-fill:hover .itemMedia
{
	background: color-mix(in srgb, #fff 20%, transparent);
	color: #fff;
}
.itemTemplate.look-hover-zoom .itemMedia img
{
	transition: transform 0.4s ease;
}
.itemTemplate.look-hover-zoom:hover .itemMedia img
{
	transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce)
{
	.itemTemplate .itemInner, .itemTemplate .itemMedia img { transition: none !important; }
}
/* a featured item: the skin's inverse (accent fill, accent text) */
.itemTemplate.is-featured > .itemInner
{
	background-color: var(--_item);
	color: var(--skin-accent-text, #fff);
}
.itemTemplate.is-featured :is(.itemTitle, .itemText, .itemMore)
{
	color: inherit;
}
.itemTemplate.is-featured .itemMedia
{
	background: color-mix(in srgb, #fff 20%, transparent);
	color: inherit;
}
/* numbers (templates/items/stats/): the value (counted by the motion script once seen: .count-ready until it starts,
   .is-counted then), its label; a ring or a bar fills to --stat-percent (100% without one) as it counts */
@property --stat-progress
{
	syntax: "<percentage>";
	inherits: true;
	initial-value: 100%;
}
.statItem
{
	--stat-progress: var(--stat-percent, 100%);
}
.statItem .statValue
{
	font-size: var(--stat-value-size, 2.4rem);
	font-weight: 800;
	line-height: 1.15;
	color: var(--_item);
	font-variant-numeric: tabular-nums;
}
.statItem .statNumber
{
	white-space: nowrap;
	unicode-bidi: isolate;
}
.statItem .statLabel
{
	font-size: var(--box-title-size, 1rem);
	font-weight: 600;
}
.statItem.count-ready
{
	--stat-progress: 0%;
}
.statItem.count-ready.is-counted
{
	--stat-progress: var(--stat-percent, 100%);
	transition: --stat-progress var(--stat-duration, 1.6s) cubic-bezier(0.2, 0.7, 0.2, 1);
}
.statItem.count-ready .statBarFill
{
	transition: width var(--stat-duration, 1.6s) cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-reduced-motion: reduce)
{
	.statItem.count-ready { --stat-progress: var(--stat-percent, 100%); transition: none !important; }
}
/* contact & info (templates/items/info/): the value (its link), its label and note, the copy button */
.infoItem .infoValue
{
	unicode-bidi: isolate;
	overflow-wrap: anywhere;
}
.infoItem .infoLink
{
	color: inherit;
	text-decoration: none;
}
.infoItem .infoLink:hover .infoValue
{
	color: var(--_item);
}
.infoItem .infoLabel
{
	font-size: 0.8rem;
	opacity: 0.7;
}
.infoItem .infoNote
{
	font-size: 0.85rem;
}
.infoItem .infoCopy
{
	margin-inline-start: 6px;
	padding: 2px 6px;
	border: 0px;
	border-radius: 6px;
	background: color-mix(in srgb, currentColor 8%, transparent);
	color: inherit;
	font-size: 0.85em;
	cursor: pointer;
	vertical-align: middle;
}
.infoItem .infoCopy.is-copied
{
	background: var(--_item);
	color: var(--skin-accent-text, #fff);
}
.infoItem.look-icon_frame-none .itemMedia
{
	font-size: calc(var(--box-icon-size, 36px) * 0.6);
}
/* the editor (scripts/addons/boxes/items_editor.js): the per-device fields' switch above the input, the fields the
   layout or the ticks leave out */
.itemsDeviceSwitch
{
	display: flex;
	flex-wrap: wrap;
	width: fit-content;
	max-width: 100%;
	margin-bottom: 6px;
	border: 1px solid #d5dbe5;
	border-radius: 8px;
	overflow: hidden;
}
.itemsDeviceField.itemsLayoutHidden,
.itemsDeviceField.itemsFollowHidden,
.itemsPieceHidden
{
	display: none !important;
}
.itemsDeviceSwitch button
{
	border: 0;
	background: #fff;
	padding: 3px 9px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
}
.itemsDeviceSwitch button.is-selected
{
	background: #10213f;
	color: #fff;
}
/* social follow (templates/items/social/*): the item's colour is its network's brand (colors brand, the default), the
   theme's accent (theme) or the text's (mono); a framed mark is a solid disc with a white mark (black marks stay seen on a
   dark row), an unframed one takes the colour itself */
.socialItem.socialBrand
{
	--_item: var(--item-color, var(--brand-color, var(--box-icon-color, var(--_accent, #1d5fbf))));
}
.socialItem.socialMono
{
	--_item: currentColor;
}
.socialItem:not(.look-icon_frame-none) .itemMedia
{
	background: var(--_item);
	color: #fff;
}
.socialItem.socialMono:not(.look-icon_frame-none) .itemMedia
{
	background: color-mix(in srgb, currentColor 12%, transparent);
	color: inherit;
}
.socialItem .itemMedia .socialMark
{
	width: 52%;
	height: 52%;
}
.socialItem.look-icon_frame-none .itemMedia .socialMark
{
	width: 1em;
	height: 1em;
}
/* Orbit (classes/boxes/orbit.php, templates/items/orbit/rings.storm), drawn as avas' "circle info": the items' icons
   (white discs) on a ring of --orbit-size around a centre disc of 72% of it, a second ring at 130% (two rings), the
   active item's card fading in the centre. The ring turns by --orbit-turn (scripts/addons/boxes/orbit.js) in 1s, the
   icons' glyphs turning back in 2s, the cards turning back with the ring so they stay still. The first item sits up at
   the end side, the others counter-clockwise (clockwise on a right-to-left page). Sizes: 300 / 75 (desktop),
   280 / 55 (tablet and phone; a phone's ring no wider than its outer ring lets), each box's own per device. */
.orbitBox
{
	--_n: var(--orbit-n, 6);
	--_size: var(--orbit-size, 300px);
	--_disc: var(--orbit-disc, 75px);
	--_ring: var(--orbit-ring, var(--skin-accent, var(--ui-accent, #d939ab)));
	--_ring2: var(--orbit-ring-2, var(--skin-extra, var(--ui-purple, #4951fe)));
	--_title: 22px;
	position: relative;
	overflow: hidden;
	padding: calc(var(--_size) * 0.2) 0px;
}
@media (max-width: 1024px)
{
	.orbitBox
	{
		--_size: var(--orbit-size-t, min(var(--orbit-size, 300px), 280px));
		--_disc: var(--orbit-disc-t, 55px);
		--_title: 18px;
	}
}
@media (max-width: 675px)
{
	.orbitBox
	{
		/* the outer ring (130%) inside the screen */
		--_size: var(--orbit-size-m, min(var(--orbit-size-t, min(var(--orbit-size, 300px), 280px)), calc((100vw - 40px) / 1.3)));
		--_disc: var(--orbit-disc-m, var(--orbit-disc-t, 55px));
	}
}
.orbitStage
{
	position: relative;
	width: var(--_size);
	height: var(--_size);
	margin: 0px auto;
	border-radius: 50%;
}
.orbitCentre
{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 71.7%;
	height: 71.7%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--orbit-picture, radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--_ring2) 5%, #ffffff), color-mix(in srgb, var(--_ring) 9%, color-mix(in srgb, var(--_ring2) 9%, #ffffff)) 72%));
	background-size: cover;
	background-position: center;
}
.orbitRing
{
	position: absolute;
	inset: 0px;
	border-radius: 50%;
	transform: rotate(var(--orbit-turn, 0deg));
	transition: transform 1s;
}
.orbitRing::before,
.orbitRing::after
{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	pointer-events: none;
}
.orbitRing::before
{
	width: 100%;
	height: 100%;
	border: 1px solid var(--_ring);
}
.orbitRing::after
{
	width: 130%;
	height: 130%;
	border: 1px solid var(--_ring2);
}
.orbitRings-one .orbitRing::after
{
	display: none;
}
.orbitBox .orbitItem
{
	display: contents;
}
.orbitDisc
{
	--_a: calc((var(--_n) - 1 - var(--i, 0)) * 360deg / var(--_n));
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--_disc);
	height: var(--_disc);
	margin: calc(var(--_disc) / -2) 0px 0px calc(var(--_disc) / -2);
	padding: 0px;
	border: 0px;
	border-radius: 50%;
	background: var(--skin-surface, #ffffff);
	box-shadow: 0px 5px 15px 0px rgba(151, 163, 184, 0.3);
	transform: rotate(var(--_a)) translate(calc(var(--_size) / 2)) rotate(calc(-1 * var(--_a)));
	transition: box-shadow 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 1s;
	cursor: pointer;
}
.orbitRtl .orbitDisc
{
	--_a: calc(180deg - (var(--_n) - 1 - var(--i, 0)) * 360deg / var(--_n));
}
.orbitItem.is-active .orbitDisc,
.orbitDisc:focus-visible
{
	box-shadow: 0px 6px 13px 0px color-mix(in srgb, var(--_ring2) 30%, transparent);
}
@media (hover: hover)
{
	.orbitDisc:hover
	{
		box-shadow: 0px 6px 13px 0px color-mix(in srgb, var(--_ring2) 30%, transparent);
	}
}
.orbitGlyph
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: calc(var(--_disc) / 3);
	line-height: 1;
	transform: rotate(calc(-1 * var(--orbit-turn, 0deg)));
	transition: transform 2s;
}
/* the glyph painted with the two rings' colours (an item's own colour paints it alone) */
.orbitGlyph span
{
	background-image: linear-gradient(135deg, var(--item-color, var(--_ring2)), var(--item-color, var(--_ring)));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.orbitGlyph img
{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}
.orbitInfo
{
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	display: none;
	width: calc(var(--_size) * 0.46);
	text-align: center;
	transform: translate(-50%, -50%) rotate(calc(-1 * var(--orbit-turn, 0deg)));
	transition: transform 1s;
}
.orbitItem.is-active .orbitInfo
{
	display: block;
	animation: orbitFade 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
@keyframes orbitFade
{
	from { opacity: 0; }
	to { opacity: 1; }
}
.orbitBox .orbitTitle
{
	margin: 0px;
	font-family: var(--font-display, inherit);
	font-size: var(--box-title-size, var(--_title));
	font-weight: 500;
	line-height: 1.3;
	color: var(--item-color, var(--_ring));
}
.orbitBox .orbitTitle a
{
	color: inherit;
	text-decoration: none;
}
.orbitBox .orbitText
{
	margin-top: 8px;
	font-size: var(--box-text-size, 14px);
	line-height: 1.88;
	color: color-mix(in srgb, var(--skin-heading, #3a3a3a) 80%, transparent);
}
.orbitBox .orbitMore
{
	display: inline-block;
	margin-top: 8px;
	font-size: 14px;
	color: var(--_ring);
}
/* The photo wheel (templates/items/orbit/wheel.storm, class orbitTemplate-wheel): each item's slice is a button the size
   of the wheel, clipped to its sector (what it answers to) and masked to the ring around the hollow centre (--_hole: the
   hole's radius as a share of the wheel); pushed out along its middle by --_push, so the white gaps between the slices
   keep one width (--_gap). The first slice is up at the start side, the others clockwise (counter-clockwise on a
   right-to-left page); a dot at each gap in the slice's tone (dots hide). The active slice shows in full, the others
   faded; the wheel never turns. */
.orbitTemplate-wheel
{
	--_size: var(--orbit-size, 420px);
	/* orbitBox::WHEEL_HOLE */
	--_hole: 0.27;
	--_gap: 6px;
	/* the dots as the reference: 12.6% of the wheel, 3.4% outside it */
	--_dot: calc(var(--_size) * 0.126);
	--_dot-gap: calc(var(--_size) * 0.034);
	padding: calc(var(--_dot) + var(--_dot-gap) + 12px) 0px;
}
@media (max-width: 1024px)
{
	.orbitTemplate-wheel
	{
		--_size: var(--orbit-size-t, min(var(--orbit-size, 420px), 360px));
	}
}
@media (max-width: 675px)
{
	.orbitTemplate-wheel
	{
		/* the dots inside the screen */
		--_size: var(--orbit-size-m, min(var(--orbit-size-t, min(var(--orbit-size, 420px), 360px)), calc((100vw - 40px) / 1.32)));
	}
}
.orbitTemplate-wheel .orbitRing,
.orbitTemplate-wheel .orbitInfo,
.orbitTemplate-wheel .orbitGlyph
{
	transition: none;
}
.orbitTemplate-wheel .orbitRing
{
	transform: none;
}
.orbitTemplate-wheel .orbitRing::before,
.orbitTemplate-wheel .orbitRing::after
{
	display: none;
}
/* the hollow centre: a dashed ring, over the slices (what the mouse meets there) */
.orbitTemplate-wheel .orbitCentre
{
	z-index: 3;
	width: calc(var(--_size) * var(--_hole) * 2 - 18px);
	height: calc(var(--_size) * var(--_hole) * 2 - 18px);
	border: 3px dashed color-mix(in srgb, var(--skin-heading, #3a3a3a) 14%, transparent);
	background: none;
}
.orbitTemplate-wheel .orbitDisc
{
	--_t: calc(360deg / var(--_n));
	--_s: calc((var(--_n) - 1 + var(--i, 0)) * var(--_t));
	--_b: calc(var(--_s) + var(--_t) / 2);
	--_push: calc(var(--_gap) / 2 / sin(var(--_t) / 2));
	--_r: 75%;
	inset: 0px;
	z-index: 1;
	display: block;
	width: auto;
	height: auto;
	margin: 0px;
	overflow: hidden;
	border-radius: 50%;
	background: color-mix(in srgb, var(--item-color, var(--orbit-tone)) 16%, var(--skin-surface, #ffffff));
	box-shadow: none;
	opacity: 0.6;
	transform: translate(calc(sin(var(--_b)) * var(--_push)), calc(cos(var(--_b)) * var(--_push) * -1));
	transition: opacity 0.6s, scale 0.6s;
	clip-path: polygon(50% 50%,
		calc(50% + var(--_r) * sin(var(--_s))) calc(50% - var(--_r) * cos(var(--_s))),
		calc(50% + var(--_r) * sin(var(--_s) + var(--_t) / 4)) calc(50% - var(--_r) * cos(var(--_s) + var(--_t) / 4)),
		calc(50% + var(--_r) * sin(var(--_b))) calc(50% - var(--_r) * cos(var(--_b))),
		calc(50% + var(--_r) * sin(var(--_s) + var(--_t) * 0.75)) calc(50% - var(--_r) * cos(var(--_s) + var(--_t) * 0.75)),
		calc(50% + var(--_r) * sin(var(--_s) + var(--_t))) calc(50% - var(--_r) * cos(var(--_s) + var(--_t))));
	-webkit-mask: radial-gradient(circle closest-side, transparent calc(var(--_hole) * 200%), #000000 calc(var(--_hole) * 200% + 1px));
	mask: radial-gradient(circle closest-side, transparent calc(var(--_hole) * 200%), #000000 calc(var(--_hole) * 200% + 1px));
}
.orbitRtl.orbitTemplate-wheel .orbitDisc
{
	--_s: calc(-1 * var(--i, 0) * var(--_t));
}
.orbitTemplate-wheel .orbitItem.is-active .orbitDisc
{
	opacity: 1;
	scale: 1.03;
}
.orbitTemplate-wheel .orbitDisc:focus-visible
{
	outline: none;
	opacity: 1;
}
@media (hover: hover)
{
	.orbitTemplate-wheel .orbitDisc:hover
	{
		opacity: 1;
		box-shadow: none;
	}
}
/* its photo covers the slice's own box (its inline left, top, width and height: orbitBox::wheelSliceBox()) */
.orbitTemplate-wheel .orbitDisc > img
{
	position: absolute;
	display: block;
	max-width: none;
	object-fit: cover;
}
/* a slice without a photo: its icon half-way along its middle */
.orbitTemplate-wheel .orbitGlyph
{
	position: absolute;
	left: 50%;
	top: 50%;
	width: auto;
	height: auto;
	font-size: calc(var(--_disc) / 2);
	color: var(--item-color, var(--orbit-tone));
	transform: translate(-50%, -50%) rotate(var(--_b)) translateY(calc(var(--_size) * (0.5 + var(--_hole)) / -2)) rotate(calc(-1 * var(--_b)));
}
.orbitTemplate-wheel .orbitGlyph span
{
	background: none;
	color: inherit;
}
.orbitTemplate-wheel .orbitDot
{
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	width: var(--_dot);
	height: var(--_dot);
	margin: calc(var(--_dot) / -2) 0px 0px calc(var(--_dot) / -2);
	border-radius: 50%;
	background: var(--item-color, var(--orbit-tone));
	transform: rotate(calc((var(--_n) - 1 + var(--i, 0)) * 360deg / var(--_n))) translateY(calc((var(--_size) / 2 + var(--_dot) / 2 + var(--_dot-gap)) * -1));
}
.orbitRtl.orbitTemplate-wheel .orbitDot
{
	transform: rotate(calc(-1 * var(--i, 0) * 360deg / var(--_n))) translateY(calc((var(--_size) / 2 + var(--_dot) / 2 + var(--_dot-gap)) * -1));
}
.orbitTemplate-wheel .look-dots-hide .orbitDot
{
	display: none;
}
.orbitTemplate-wheel .orbitItem:has(.orbitDisc:focus-visible) .orbitDot
{
	outline: 3px solid var(--item-color, var(--orbit-tone));
	outline-offset: 3px;
}
.orbitTemplate-wheel .orbitInfo
{
	z-index: 4;
	width: calc(var(--_size) * var(--_hole) * 1.5);
	transform: translate(-50%, -50%);
}
.orbitTemplate-wheel .orbitTitle
{
	font-size: var(--box-title-size, calc(var(--_size) * 0.045));
}
.orbitTemplate-wheel .orbitText
{
	display: -webkit-box;
	overflow: hidden;
	margin-top: 4px;
	font-size: var(--box-text-size, 13px);
	line-height: 1.6;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}
.orbitTemplate-wheel .orbitMore
{
	margin-top: 4px;
	font-size: 13px;
}
.orbitPreview.orbitTemplate-wheel
{
	--_gap: 3px;
	padding: calc(var(--_dot) + var(--_dot-gap) + 6px) 0px;
}
.orbitPreview.orbitTemplate-wheel .orbitDisc
{
	opacity: 1;
}

/* the picker's small preview: the first card's title only */
.orbitPreview
{
	--_title: 13px;
}
.orbitPreview .orbitText
{
	display: none;
}
@media (prefers-reduced-motion: reduce)
{
	.orbitRing,
	.orbitGlyph,
	.orbitInfo,
	.orbitTemplate-wheel .orbitDisc
	{
		transition: none;
	}
	.orbitItem.is-active .orbitInfo
	{
		animation: none;
	}
}
/*ThemeVars*/
/* Link card (templates/items/features/link_card.storm): a card with the media (an icon in a circle), the title and an arrow at
   the end; the whole card is the link. The leaders' own (the quick links under the hero). */
.itemTemplate.link_card > .itemInner
{
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	box-sizing: border-box;
	padding: calc(18px + var(--card-padding, 0px)) 22px;
	background: var(--card-bg, #FFFFFF);
	border-width: var(--card-border-width, 1px);
	border-style: var(--card-border-style, solid);
	border-color: var(--card-border, #E6EBF0);
	border-radius: var(--card-radius, 24px);
	box-shadow: var(--card-shadow, 0px 0px 0px 0px rgba(15, 31, 46, 0));
}
.itemTemplate.link_card .itemMedia
{
	flex: none;
}
.itemTemplate.link_card .itemBody
{
	flex: 1;
	min-width: 0;
}
.itemTemplate.link_card .itemArrow
{
	flex: none;
	color: #6F7479;
	transition: transform 0.25s ease, color 0.25s ease;
}
[dir="rtl"] .itemTemplate.link_card .itemArrow > span, .itemTemplate.link_card:dir(rtl) .itemArrow > span
{
	display: inline-block;
	transform: scaleX(-1);
}
.itemTemplate.link_card:hover .itemArrow
{
	color: var(--skin-accent, var(--row-accent, #1D76BC));
}
.itemTemplate.link_card .itemTitle a::after
{
	content: "";
	position: absolute;
	inset: 0px;
}
/* a phone, two to a row as the design: the icon above the title, no arrow */
@media (max-width: 675px)
{
	.itemTemplate.link_card > .itemInner
	{
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: calc(14px + var(--card-padding, 0px)) 16px;
	}
	.itemTemplate.link_card .itemBody
	{
		width: 100%;
	}
	.itemTemplate.link_card .itemArrow
	{
		display: none;
	}
}
/*ThemeVars*/
/* Path card (templates/rows/path_card.storm): a training path as a category: its icon in a tinted circle, its title and
   sentence, a round arrow, and a quarter circle line in the corner. The leaders' own: the icon comes from the category
   (the supplement articles_categories.list.addElem.training). */
.rowTemplate.path_card
{
	padding: 10px max(10px, var(--card-room, 0px));
	position: relative;
}
.rowTemplate.path_card .rowTemplateInner
{
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	height: 100%;
	box-sizing: border-box;
	padding: calc(24px + var(--card-padding, 0px));
	background: var(--card-bg, #FFFFFF);
	border-width: var(--card-border-width, 1px);
	border-style: var(--card-border-style, solid);
	border-color: var(--card-border, #E6EBF0);
	border-radius: var(--card-radius, 24px);
	box-shadow: var(--card-shadow, 0px 0px 0px 0px rgba(15, 31, 46, 0));
}
.rowTemplate.path_card .rowTemplateInner:before
{
	content: "";
	position: absolute;
	inset-inline-end: -1px;
	top: -1px;
	width: 84px;
	height: 84px;
	box-sizing: border-box;
	border: 2px solid var(--card-border, #E6EBF0);
	border-block-start: 0px;
	border-inline-end: 0px;
	border-end-start-radius: 100%;
	pointer-events: none;
}
.rowTemplate.path_card .rowTemplateInner:after
{
	content: "";
	position: absolute;
	inset-inline-end: -1px;
	top: -1px;
	width: 56px;
	height: 56px;
	box-sizing: border-box;
	border: 2px solid var(--card-border, #E6EBF0);
	border-block-start: 0px;
	border-inline-end: 0px;
	border-end-start-radius: 100%;
	pointer-events: none;
}
.rowTemplate.path_card .pathIcon
{
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 1.2rem;
	color: var(--skin-accent, var(--row-accent, #1D76BC));
	background: color-mix(in srgb, var(--skin-accent, var(--row-accent, #1D76BC)) 12%, #FFFFFF);
}
.rowTemplate.path_card .rowTemplateTitle
{
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.5em;
}
.rowTemplate.path_card .rowTemplateTitle a
{
	color: var(--skin-heading, #0F1F2E);
}
.rowTemplate.path_card .rowTemplateDescription
{
	font-size: 0.92rem;
	line-height: 1.7em;
	color: #6F7479;
}
.rowTemplate.path_card .rowTemplateMore
{
	align-self: flex-end;
	margin-top: auto;
	padding-top: 10px;
}
.rowTemplate.path_card .pathArrow
{
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	font-size: 0.95rem;
	color: var(--skin-heading, #0F1F2E);
	border: 1px solid var(--card-border, #E6EBF0);
	background: #FFFFFF;
}
.rowTemplate.path_card .pathArrow:hover
{
	color: var(--skin-accent-text, #FFF);
	background: var(--skin-accent, var(--row-accent, #1D76BC));
	border-color: transparent;
}
/* a phone, as the design: one line a path, the icon at the start, the title and sentence, the arrow at the end */
@media (max-width: 675px)
{
	.rowTemplate.path_card .rowTemplateInner
	{
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 14px;
		row-gap: 2px;
		padding: calc(16px + var(--card-padding, 0px)) 18px;
	}
	.rowTemplate.path_card .pathIcon
	{
		grid-column: 1;
		grid-row: 1 / span 2;
	}
	.rowTemplate.path_card .rowTemplateTitle,
	.rowTemplate.path_card .rowTemplateDescription
	{
		grid-column: 2;
	}
	.rowTemplate.path_card .rowTemplateMore
	{
		grid-column: 3;
		grid-row: 1 / span 2;
		align-self: center;
		margin: 0px;
		padding: 0px;
	}
}
/*ThemeVars*/
/* Umbrella card (templates/rows/umbrella_card.storm): a tinted top with the umbrella's picture or logo and a quarter circle
   in its colour, then the title, the sentence and a round arrow in the colour. The colour is the row's skin (the article's
   field skin: --skin-accent). The leaders' own. */
.rowTemplate.umbrella_card
{
	padding: 8px max(8px, var(--card-room, 0px));
	position: relative;
}
.rowTemplate.umbrella_card .rowTemplateInner
{
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100%;
	background: var(--card-bg, #FFFFFF);
	border-width: var(--card-border-width, 1px);
	border-style: var(--card-border-style, solid);
	border-color: var(--card-border, #E6EBF0);
	border-radius: var(--card-radius, 24px);
	box-shadow: var(--card-shadow, 0px 0px 0px 0px rgba(15, 31, 46, 0));
}
.rowTemplate.umbrella_card .umbrellaTop
{
	position: relative;
	display: grid;
	place-items: center;
	min-height: 130px;
	background: color-mix(in srgb, var(--skin-accent, var(--row-accent, #1D76BC)) 12%, #FFFFFF);
}
.rowTemplate.umbrella_card .umbrellaTop:before
{
	content: "";
	position: absolute;
	inset-inline-end: 0px;
	top: 0px;
	width: 64px;
	height: 64px;
	background: var(--skin-accent, var(--row-accent, #1D76BC));
	border-end-start-radius: 100%;
}
.rowTemplate.umbrella_card .rowTemplatePhoto
{
	position: relative;
	z-index: 1;
	max-width: 96px;
	padding: 18px 0px;
}
.rowTemplate.umbrella_card .rowTemplatePhoto:empty
{
	display: none;
}
.rowTemplate.umbrella_card .umbrellaBody
{
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px 22px;
}
.rowTemplate.umbrella_card .rowTemplateTitle
{
	font-size: 1.15rem;
	font-weight: bold;
	line-height: 1.5em;
}
.rowTemplate.umbrella_card .rowTemplateTitle a
{
	color: var(--skin-heading, #0F1F2E);
}
.rowTemplate.umbrella_card .rowTemplateDescription
{
	display: -webkit-box;
	overflow: hidden;
	font-size: 0.88rem;
	line-height: 1.7em;
	color: #6F7479;
	/* short as the design's two lines: a longer sentence is cut after three */
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.rowTemplate.umbrella_card .rowTemplateMore
{
	align-self: flex-end;
	margin-top: auto;
	padding-top: 12px;
}
.rowTemplate.umbrella_card .umbrellaArrow
{
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	font-size: 0.95rem;
	color: var(--skin-accent-text, #FFF);
	background: var(--skin-accent, var(--row-accent, #1D76BC));
}
/* the umbrellas' section page sits on the page: the frame of its own list has no card around the grid */
.articlesListPage_umbrellas .block_default_isolated .block-body
{
	background: none;
	border: 0px none;
	border-radius: 0px;
	box-shadow: none;
	padding: 0px;
}
/* the cards of a row are as tall as the tallest (their arrows on one line) */
.listBody:has(> .rowTemplate.umbrella_card)
{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
/* a phone: one line an umbrella (the tinted square with its logo at the start, the title and two lines of its
   sentence, the arrow at the end) instead of five tall cards */
@media (max-width: 675px)
{
	.rowTemplate.umbrella_card .rowTemplateInner
	{
		flex-direction: row;
	}
	.rowTemplate.umbrella_card .umbrellaTop
	{
		flex: 0 0 96px;
		min-height: 0px;
	}
	.rowTemplate.umbrella_card .umbrellaTop:before
	{
		width: 34px;
		height: 34px;
	}
	.rowTemplate.umbrella_card .rowTemplatePhoto
	{
		max-width: 64px;
		padding: 12px 0px;
	}
	.rowTemplate.umbrella_card .umbrellaBody
	{
		gap: 4px;
		padding: 14px 16px;
	}
	.rowTemplate.umbrella_card .rowTemplateDescription
	{
		-webkit-line-clamp: 2;
	}
	.rowTemplate.umbrella_card .rowTemplateMore
	{
		padding-top: 6px;
	}
	.rowTemplate.umbrella_card .umbrellaArrow
	{
		width: 32px;
		height: 32px;
	}
}
/*ThemeVars*/
/* Opportunity card (templates/rows/opportunity_card.storm): the type chip, the title, the place and the session's day, then
   under a line the last day to apply and the apply button (a closed one says so). The leaders' own: it reads the
   opportunities' fields place and deadline (the training section). */
.swiper-wrapper:has(.rowTemplate.opportunity_card)
{
	display: flex;
}
.swiper-wrapper:has(.rowTemplate.opportunity_card) .swiper-slide
{
	display: flex;
}
.swiper-wrapper:has(.rowTemplate.opportunity_card) .swiper-slide > .rowTemplate
{
	width: 100%;
}
.rowTemplate.opportunity_card
{
	padding: 10px max(10px, var(--card-room, 0px));
	position: relative;
}
.rowTemplate.opportunity_card .rowTemplateInner
{
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	box-sizing: border-box;
	padding: calc(24px + var(--card-padding, 0px));
	background: var(--card-bg, #FFFFFF);
	border-width: var(--card-border-width, 1px);
	border-style: var(--card-border-style, solid);
	border-color: var(--card-border, #E6EBF0);
	border-radius: var(--card-radius, 24px);
	box-shadow: var(--card-shadow, 0px 0px 0px 0px rgba(15, 31, 46, 0));
}
.rowTemplate.opportunity_card .rowTemplateTop
{
	display: flex;
}
.rowTemplate.opportunity_card .rowTemplateTop:has(.rowTemplateBadge:empty)
{
	display: none;
}
.rowTemplate.opportunity_lecture .rowTemplateTop
{
	display: none;
}
.rowTemplate.opportunity_card .rowTemplateBadge
{
	font-size: 0.8rem;
	font-weight: bold;
	line-height: 1.4em;
	padding: 4px 14px;
	border-radius: 999px;
	color: var(--category-color, var(--skin-accent, var(--row-accent, #1D76BC)));
	background: color-mix(in srgb, var(--category-color, var(--skin-accent, var(--row-accent, #1D76BC))) 12%, #FFFFFF);
}
.rowTemplate.opportunity_card .rowTemplateBadge a
{
	color: inherit;
}
.rowTemplate.opportunity_card .rowTemplateTitle
{
	font-size: 1.3rem;
	font-weight: bold;
	line-height: 1.5em;
}
.rowTemplate.opportunity_card .rowTemplateTitle a
{
	color: var(--skin-heading, #0F1F2E);
}
.rowTemplate.opportunity_card .opportunityFacts
{
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0px;
	padding: 0px;
	list-style: none;
	color: #6F7479;
}
.rowTemplate.opportunity_card .opportunityFacts:not(:has(li))
{
	display: none;
}
.rowTemplate.opportunity_card .opportunityFacts li
{
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0px;
	padding: 0px;
}
.rowTemplate.opportunity_card .opportunityFoot
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--card-border, #E6EBF0);
}
.rowTemplate.opportunity_card .opportunityDeadline
{
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0px;
}
.rowTemplate.opportunity_card .opportunityDeadlineIcon
{
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: #F7A228;
	background: #FFF0DD;
}
.rowTemplate.opportunity_card .opportunityDeadlineText
{
	display: flex;
	flex-direction: column;
	line-height: 1.4em;
}
.rowTemplate.opportunity_card .opportunityDeadlineLabel
{
	font-size: 0.78rem;
	color: #6F7479;
}
.rowTemplate.opportunity_card .opportunityDeadlineText strong
{
	font-size: 0.92rem;
	color: var(--skin-heading, #0F1F2E);
}
.rowTemplate.opportunity_card .rowTemplateMoreButton
{
	position: relative;
	z-index: 2;
	display: inline-block;
	padding: 0px 24px;
	line-height: 40px;
	border-radius: 999px;
	font-weight: bold;
	color: #FFFFFF;
	background: #1D76BC;
}
.rowTemplate.opportunity_card .rowTemplateMoreButton:hover
{
	color: #FFFFFF;
	background: #0F1F2E;
}
.rowTemplate.opportunity_card .opportunityClosed
{
	display: inline-block;
	padding: 0px 18px;
	line-height: 36px;
	border-radius: 999px;
	font-size: 0.9rem;
	color: #6F7479;
	background: #F3F7FA;
}
/* the opportunities' pages sit on the page: the frame of the page's own list has no card around its grid */
.articlesListPage_training .block_default_isolated .block-body
{
	background: none;
	border: 0px none;
	border-radius: 0px;
	box-shadow: none;
	padding: 0px;
}
/* a phone: a shorter card (its place and day on one line, less room around) */
@media (max-width: 675px)
{
	.rowTemplate.opportunity_card
	{
		padding-block: 8px;
	}
	.rowTemplate.opportunity_card .rowTemplateInner
	{
		gap: 8px;
		padding: calc(16px + var(--card-padding, 0px)) 18px;
	}
	.rowTemplate.opportunity_card .opportunityFacts
	{
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: 18px;
	}
	.rowTemplate.opportunity_card .opportunityFoot
	{
		padding-top: 10px;
	}
}
/* Motion of the platform (scripts/core/motion.js): the hidden state of a data-reveal element's children exists only once
   the script added .reveal-ready; .is-in shows each child as it comes into view, after its --reveal-delay (the stagger);
   .reveal-done (in, or on the screen at load) is out of these rules: its own transforms and transitions apply.
   data-reveal-speed: calm, normal (the default), lively, as shares of the theme's --motion-duration and --motion-distance */
[data-reveal]
{
	--_reveal-duration: var(--motion-duration, 0.8s);
	--_reveal-distance: var(--motion-distance, 28px);
}
[data-reveal-speed="calm"]
{
	--_reveal-duration: calc(var(--motion-duration, 0.8s) * 1.5);
	--_reveal-distance: calc(var(--motion-distance, 28px) * 1.4);
}
[data-reveal-speed="lively"]
{
	--_reveal-duration: calc(var(--motion-duration, 0.8s) * 0.6);
	--_reveal-distance: calc(var(--motion-distance, 28px) * 0.6);
}
.reveal-ready > :not(.reveal-done)
{
	opacity: 0;
	transition: opacity var(--_reveal-duration) ease, transform var(--_reveal-duration) cubic-bezier(0.2, 0.7, 0.2, 1), filter var(--_reveal-duration) ease, clip-path var(--_reveal-duration) cubic-bezier(0.65, 0, 0.35, 1);
	transition-delay: var(--reveal-delay, 0ms);
}
.reveal-ready[data-reveal="fade-up"] > :not(.reveal-done)
{
	transform: translateY(var(--_reveal-distance));
}
.reveal-ready[data-reveal="fade-start"] > :not(.reveal-done)
{
	transform: translateX(calc(var(--_reveal-distance) * -1));
}
.reveal-ready.reveal-rtl[data-reveal="fade-start"] > :not(.reveal-done)
{
	transform: translateX(var(--_reveal-distance));
}
/* from the end side (the other side of fade-start) */
.reveal-ready[data-reveal="fade-end"] > :not(.reveal-done)
{
	transform: translateX(var(--_reveal-distance));
}
.reveal-ready.reveal-rtl[data-reveal="fade-end"] > :not(.reveal-done)
{
	transform: translateX(calc(var(--_reveal-distance) * -1));
}
.reveal-ready[data-reveal="zoom"] > :not(.reveal-done)
{
	transform: scale(0.9);
}
/* a picture settling: slightly larger, then its size */
.reveal-ready[data-reveal="zoom-out"] > :not(.reveal-done)
{
	transform: scale(1.08);
}
/* small things (icons, badges, numbers, tags): up from smaller, a little past their size and back */
.reveal-ready[data-reveal="pop"] > :not(.reveal-done)
{
	transform: scale(0.8);
	transition-timing-function: ease, cubic-bezier(0.34, 1.56, 0.64, 1), ease, ease;
}
/* uncovered from the start edge like a curtain, no fade (40px around it: its shadow) */
.reveal-ready[data-reveal="wipe"] > :not(.reveal-done)
{
	opacity: 1;
	clip-path: inset(-40px 100% -40px -40px);
}
.reveal-ready.reveal-rtl[data-reveal="wipe"] > :not(.reveal-done)
{
	clip-path: inset(-40px -40px -40px 100%);
}
.reveal-ready[data-reveal="blur"] > :not(.reveal-done)
{
	filter: blur(10px);
	transform: scale(1.02);
}
/* as heavy as the side rules of the right-to-left pages (.reveal-rtl: motion.js, from the element's direction), and after them */
.reveal-ready[data-reveal] > .is-in:not(.reveal-done)
{
	opacity: 1;
	transform: none;
	filter: none;
}
.reveal-ready[data-reveal="wipe"] > .is-in:not(.reveal-done)
{
	clip-path: inset(-40px);
}
@media (prefers-reduced-motion: reduce)
{
	.reveal-ready > * { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; }
}
/*ThemeVars*/
/* Big number (templates/items/stats/big_number.storm): the value large over its label; blob: over a soft shape */
.itemTemplate.big_number > .itemInner
{
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.itemTemplate.big_number.look-align-center > .itemInner
{
	align-items: center;
}
.itemTemplate.big_number_blob .statValue
{
	position: relative;
	isolation: isolate;
	padding: 0.25em 0.55em;
}
.itemTemplate.big_number_blob .statValue::before
{
	content: "";
	position: absolute;
	inset: 0px;
	z-index: -1;
	background: color-mix(in srgb, var(--_item) 16%, transparent);
	border-radius: 42% 58% 55% 45% / 50% 40% 60% 50%;
}
/*ThemeVars*/
/* Experience, main (templates/rows/experience_main.storm): a large rounded photo, then the title at the start and a round arrow
   at the end. The leaders' own (the large experience on the home page). */
.rowTemplate.experience_main
{
	position: relative;
	padding: 0px;
}
.rowTemplate.experience_main .rowTemplateInner
{
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.rowTemplate.experience_main .rowTemplatePhoto
{
	overflow: hidden;
	border-radius: var(--card-radius, 24px);
}
.rowTemplate.experience_main .experienceFoot
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.rowTemplate.experience_main .rowTemplateTitle
{
	font-size: 1.15rem;
	font-weight: bold;
	line-height: 1.5em;
}
.rowTemplate.experience_main .rowTemplateTitle a
{
	color: var(--skin-heading, #0F1F2E);
}
.rowTemplate.experience_main .experienceArrow
{
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	font-size: 0.95rem;
	color: var(--skin-heading, #0F1F2E);
	border: 1px solid var(--card-border, #E6EBF0);
	background: #FFFFFF;
	transition: background 0.2s ease, color 0.2s ease;
}
.rowTemplate.experience_main:hover .experienceArrow
{
	color: var(--skin-accent-text, #FFF);
	background: var(--skin-accent, var(--row-accent, #1D76BC));
	border-color: transparent;
}
/*ThemeVars*/
/* Experience card (templates/rows/experience_card.storm): a bordered card with a rounded photo at the start, the title on top
   and a round arrow at the bottom end. The leaders' own (the two small experiences on the home page). */
.rowTemplate.experience_card
{
	position: relative;
	padding: 0px 0px 16px;
}
.rowTemplate.experience_card .rowTemplateInner
{
	display: flex;
	align-items: stretch;
	gap: 20px;
	height: 100%;
	box-sizing: border-box;
	padding: calc(14px + var(--card-padding, 0px));
	background: var(--card-bg, #FFFFFF);
	border-width: var(--card-border-width, 1px);
	border-style: var(--card-border-style, solid);
	border-color: var(--card-border, #E6EBF0);
	border-radius: var(--card-radius, 24px);
	box-shadow: var(--card-shadow, 0px 0px 0px 0px rgba(15, 31, 46, 0));
}
.rowTemplate.experience_card .rowTemplatePhoto
{
	flex: 0 0 42%;
	max-width: 42%;
	overflow: hidden;
	border-radius: calc(var(--card-radius, 24px) - 8px);
}
.rowTemplate.experience_card .experienceBody
{
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 6px 0px;
}
.rowTemplate.experience_card .rowTemplateTitle
{
	font-size: 1.1rem;
	font-weight: bold;
	line-height: 1.5em;
}
.rowTemplate.experience_card .rowTemplateTitle a
{
	color: var(--skin-heading, #0F1F2E);
}
.rowTemplate.experience_card .rowTemplateMore
{
	align-self: flex-end;
	margin-top: auto;
}
.rowTemplate.experience_card .experienceArrow
{
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	font-size: 0.95rem;
	color: var(--skin-heading, #0F1F2E);
	border: 1px solid var(--card-border, #E6EBF0);
	background: #FFFFFF;
	transition: background 0.2s ease, color 0.2s ease;
}
.rowTemplate.experience_card:hover .experienceArrow
{
	color: var(--skin-accent-text, #FFF);
	background: var(--skin-accent, var(--row-accent, #1D76BC));
	border-color: transparent;
}
/*ThemeVars*/
/* ==========================================================================
	The card of the photo above the text (rows/photo_title_stack#card, once rows/story_card, report_card and
	card_row_category): the photo with the category's badge, the date and the reading time, the title, the
	description, the extra slot, the writer in the footer; each piece a tick of the list (show_*)
   ========================================================================== */
.listBody:has(> .rowTemplate.story_card)
{
	/* cards of one row share the height */
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
.rowTemplate.story_card
{
	margin: 0px;
	padding: 8px max(8px, var(--card-room, 0px));
	position: relative;
}
.rowTemplate.story_card .rowTemplateInner
{
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	padding: calc(16px + var(--card-padding, 0px));
	background: var(--card-bg, #FFFFFF);
	border-width: var(--card-border-width, 0px);
	border-style: var(--card-border-style, none);
	border-color: var(--card-border, currentColor);
	border-radius: var(--card-radius, 24px);
	box-shadow: var(--card-shadow, 0px 0px 0px 0px rgba(15, 31, 46, 0));
}
.rowTemplate.story_card .rowTemplatePhoto
{
	position: relative;
}
body .rowTemplate.story_card .rowTemplatePhoto .imageContainer img
{
	border-radius: 8px;
}
.rowTemplate.story_card .rowTemplatePhoto .authorPanelBase
{
	display: none;
}
.rowTemplate.story_card .rowTemplateBadge
{
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	max-width: calc(100% - 24px);
	background: var(--category-color, var(--row-dark, var(--ui-text-strong, #111827)));
	color: #FFFFFF;
	font-size: 0.8rem;
	font-weight: bold;
	line-height: 1.4em;
	padding: 5px 12px;
	border-radius: 4px;
}
.rowTemplate.story_card .rowTemplateBadge:not(:has(a))
{
	display: none;
}
.rowTemplate.story_card .rowTemplateBadge a
{
	color: inherit;
}
.rowTemplate.story_card .rowTemplateInfo
{
	flex: 1;
}
body .rowTemplate.row.story_card .rowTemplateDate
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 12px;
	margin-bottom: 6px;
	font-size: 0.85rem;
	color: color-mix(in srgb, currentColor 62%, transparent);
}
/* the reading time beside the date (inherit) */
.rowTemplate.story_card .rowTemplateReading
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}
.rowTemplate.story_card .rowTemplateTitle
{
	font-size: 1.05rem;
	font-weight: bold;
	line-height: 1.8em;
	min-height: 3.6em;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.rowTemplate.story_card .rowTemplateDescription
{
	margin-top: 8px;
	font-size: 0.9rem;
	line-height: 1.8em;
	color: #6F7479;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.rowTemplate.story_card .rowTemplateFooter
{
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 12px;
	min-height: 2.6em;
	border-top: 1px solid #E6EBF0;
	font-size: 0.9rem;
	color: color-mix(in srgb, currentColor 72%, transparent);
}
.rowTemplate.story_card .rowTemplateAuthor .authorPanelBase
{
	position: static;
	display: block;
	width: auto;
	padding: 0px;
	background: none;
	color: inherit;
	pointer-events: auto;
}
@media  (max-width:675px)
{
	.rowTemplate.story_card .rowTemplateInner
	{
		padding: 14px;
	}
}

/* the photo to the card's edges (the option card_photo: edge; once the rounded "oval" cards and the report card): no
   room around it, the card's corners clip it, the texts padded under it */
.rowTemplate.story_card.look-card_photo-edge .rowTemplateInner
{
	gap: 0px;
	padding: 0px;
	overflow: hidden;
}
body .rowTemplate.story_card.look-card_photo-edge .rowTemplatePhoto .imageContainer img
{
	border-radius: 0px;
}
.rowTemplate.story_card.look-card_photo-edge .rowTemplateInfo
{
	padding: calc(16px + var(--card-padding, 0px));
}
.rowTemplate.story_card.look-card_photo-edge .rowTemplateFooter
{
	margin: 0px calc(16px + var(--card-padding, 0px));
	padding-bottom: 14px;
}

/* Card styles (classes/core/theme_cards.php): these cards wear the card style (the theme's default one, or the one
   a box or a list picks), the theme's card items where it says nothing; its padding is added to the card's own. In a
   skinned box their fill is the skin's surface (styles/basic/cards.css) */
.rowTemplate.story_card:hover > .rowTemplateInner
{
	border-color: var(--card-hover-border, var(--card-border, currentColor));
	box-shadow: var(--card-hover-shadow, var(--card-shadow, 0px 0px 0px 0px rgba(15, 31, 46, 0)));
}
/* Skins (classes/core/theme_skins.php): in a skinned box or list the title takes the heading role, the texts the heading
   a little lighter, the date, the ranks and the links the accent; a badge is its category's colour, else the accent
   with its accent-text (the card's fill: styles/basic/cards.css) */
[class*="skin-"] .rowTemplate.story_card .rowTemplateTitle,
[class*="skin-"] .rowTemplate.story_card .rowTemplateTitle a
{
	color: var(--skin-heading, inherit);
}
[class*="skin-"] .rowTemplate.story_card .rowTemplateTitle a:hover
{
	color: var(--skin-heading-hover, var(--skin-heading, inherit));
}
[class*="skin-"] .rowTemplate.story_card .rowTemplateDescription
{
	color: color-mix(in srgb, var(--skin-heading, currentColor) 80%, transparent);
}
body [class*="skin-"] .rowTemplate.story_card.row .rowTemplateDate,
[class*="skin-"] .rowTemplate.story_card .rowTemplateHits,
[class*="skin-"] .rowTemplate.story_card .rowTemplateReading
{
	color: var(--skin-accent, inherit);
}
[class*="skin-"] .rowTemplate.story_card .rowTemplateFooter,
[class*="skin-"] .rowTemplate.story_card .rowTemplateAuthor,
[class*="skin-"] .rowTemplate.story_card .rowTemplateAuthor .authorPanelBase
{
	color: color-mix(in srgb, var(--skin-heading, currentColor) 75%, transparent);
	border-color: color-mix(in srgb, var(--skin-heading, currentColor) 20%, transparent);
}
[class*="skin-"] .rowTemplate.story_card .rowTemplateCategory
{
	color: var(--category-color, var(--skin-accent, inherit));
}
[class*="skin-"] .rowTemplate.story_card .rowTemplateRank:before
{
	color: var(--skin-accent, inherit);
}
[class*="skin-"] .rowTemplate.story_card .rowTemplateMoreLink
{
	color: var(--skin-accent, inherit);
}
[class*="skin-"] .rowTemplate.story_card .rowTemplateMoreButton
{
	background: var(--skin-accent, inherit);
	color: var(--skin-accent-text, inherit);
}
[class*="skin-"] .rowTemplate.story_card .rowTemplateBadge
{
	background: var(--category-color, var(--skin-accent, inherit));
	color: var(--skin-accent-text, inherit);
}
[class*="skin-"] .rowTemplate.story_card .rowTemplateInner[style*="--category-color"] .rowTemplateBadge
{
	color: #FFF;
}
.rowTemplate.story_card .rowTemplateExtra
{
	margin-top: 8px;
	font-size: 0.85rem;
}
[class*="skin-"] .rowTemplate.story_card .rowTemplateExtra
{
	color: color-mix(in srgb, var(--skin-heading, currentColor) 80%, transparent);
}
/*ThemeVars*/
/* Partner logo (templates/rows/partner_logo.storm): a tile with a dashed edge and the logo inside it, whole (never cropped: the
   pattern's allow_crop is off). The leaders' own (the partners strip). */
.rowTemplate.partner_logo .rowTemplateInner
{
	display: grid;
	place-items: center;
	box-sizing: border-box;
	aspect-ratio: 5 / 3;
	padding: 16px 20px;
	border: 1px dashed color-mix(in srgb, #6F7479 45%, transparent);
	border-radius: 16px;
}
.rowTemplate.partner_logo .rowTemplatePhoto
{
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
}
.rowTemplate.partner_logo .rowTemplatePhoto img
{
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.rowTemplate.partner_logo .imageContainer
{
	background: none;
}
/* ==========================================================================
	What a row draws besides its columns (classes/addons/boxes_rows.php boxes_rowLook()): columns order and alignment,
	a custom width, inset rows, overlap, height and snap, sticky rows, the background's phone picture and video, edges
	and decoration, and columns bleeding to the screen's edge. The rows stack at 1024px (the theme's rule).
   ========================================================================== */
/* columns order and vertical alignment */
@media (min-width: 1025px)
{
	.boxPositionRow.rowReverse > .boxPositionRowContent > .boxPositionRowContentInner { flex-direction: row-reverse; }
	.boxPositionRow.rowAlign-center > .boxPositionRowContent > .boxPositionRowContentInner { align-items: center; }
	.boxPositionRow.rowAlign-end > .boxPositionRowContent > .boxPositionRowContentInner { align-items: flex-end; }
	.boxPositionRow.rowAlign-stretch > .boxPositionRowContent > .boxPositionRowContentInner { align-items: stretch; }
}
@media (max-width: 1024px)
{
	.pageBoxPositionType .boxPositionRow.rowStackReverse > .boxPositionRowContent > .boxPositionRowContentInner { flex-direction: column-reverse; }
}
/* a custom width */
.boxPositionRowContent.rowCustomWidth
{
	width: 94%;
	margin-inline: auto;
}
/* inset: the row a rounded panel inside the page (the theme's fixed width), its background inside it */
.boxPositionRow.rowInset
{
	border-radius: var(--row-inset-radius, 24px);
	overflow: clip;
	isolation: isolate;
}
.boxPositionRow.rowInset > .boxPositionRowContent
{
	padding-inline: clamp(16px, 4%, 48px);
}
/* overlap: pulled up over the row before, above it */
.boxPositionRow[class*="rowOverlap-"]
{
	position: relative;
	z-index: 5;
}
.boxPositionRow.rowOverlap-small { margin-top: -40px; }
.boxPositionRow.rowOverlap-medium { margin-top: -90px; }
.boxPositionRow.rowOverlap-large { margin-top: -150px; }
@media (max-width: 675px)
{
	.boxPositionRow.rowOverlap-small { margin-top: -20px; }
	.boxPositionRow.rowOverlap-medium { margin-top: -45px; }
	.boxPositionRow.rowOverlap-large { margin-top: -75px; }
}
/* height: a minimum, or the screen's (its content centred), and snap between such rows */
.boxPositionRow.rowMinHeight,
.boxPositionRow.rowScreen
{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.boxPositionRow.rowMinHeight { min-height: var(--row-min-height, auto); }
.boxPositionRow.rowScreen { min-height: calc(100svh - var(--row-screen-offset, 0px)); }
/* a full width content stretches; the theme container keeps its own width */
.boxPositionRow.rowMinHeight > .boxPositionRowContent:not(.fixedWidth),
.boxPositionRow.rowScreen > .boxPositionRowContent:not(.fixedWidth)
{
	width: 100%;
}
@media (max-width: 675px)
{
	.boxPositionRow.rowMinHeight { min-height: var(--row-min-height-m, var(--row-min-height, auto)); }
}
html:has(.boxPositionRow.rowSnap) { scroll-snap-type: y proximity; }
.boxPositionRow.rowSnap { scroll-snap-align: start; }
/* sticky: stays while the next rows scroll over it (they need a background of their own) */
.boxPositionRow.rowSticky
{
	position: sticky;
	top: var(--row-sticky-top, 0px);
	z-index: 0;
}
.boxPositionRow.rowSticky ~ .boxPositionRow
{
	position: relative;
	z-index: 1;
}
/* the background: a picture for phones, a video behind the content (none under reduced motion: its poster stays) */
@media (max-width: 675px)
{
	.boxPositionRow .boxPositionBackground[style*="--row-bg-mobile"] { background-image: var(--row-bg-mobile) !important; }
}
.boxPositionBackground:has(> .rowVideo)
{
	overflow: hidden;
}
.boxPositionBackground > video.rowVideo
{
	position: absolute;
	inset: 0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.boxPositionBackground > .rowVideoFrame
{
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100%, 177.78vh);
	height: max(100%, 56.25vw);
	border: 0px none;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce)
{
	.boxPositionBackground > .rowVideo { display: none; }
}
/* edges: a shape at the row's top or bottom in its neighbour's colour, or an uploaded picture as it is */
.boxPositionRow[class*="rowWithEdge-"]
{
	position: relative;
}
.rowEdge
{
	position: absolute;
	left: 0px;
	right: 0px;
	z-index: 4;
	height: var(--edge-height, 60px);
	background-color: var(--edge-color, #ffffff);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	pointer-events: none;
}
.rowEdge.rowEdgeImage
{
	background-color: transparent;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.rowEdge-bottom { bottom: -1px; }
.rowEdge-top { top: -1px; transform: scaleY(-1); }
.rowEdge-bottom.rowEdgeFlip { transform: scaleX(-1); }
.rowEdge-top.rowEdgeFlip { transform: scale(-1, -1); }
@media (max-width: 675px)
{
	.rowEdge { height: var(--edge-height-m, var(--edge-height, 60px)); }
}
/* decoration: shapes and a ghost word behind the content, bleeding over the row's top and bottom (not its sides) */
.boxPositionRow.rowWithDecor
{
	overflow-x: clip;
}
.rowDecor
{
	position: absolute;
	inset: 0px;
	z-index: 2;
	pointer-events: none;
}
.rowDecorItem
{
	position: absolute;
	inset-inline-start: var(--decor-x);
	top: var(--decor-y);
	width: var(--decor-size);
	height: var(--decor-size);
	color: var(--skin-accent, var(--ui-accent, #1d5fbf));
	transform: translate(-50%, -50%) rotate(var(--decor-rotate, 0deg));
	opacity: 0.9;
}
.rowDecorItem:dir(rtl)
{
	transform: translate(50%, -50%) rotate(var(--decor-rotate, 0deg));
}
.rowDecor-ring { border: 2px solid currentColor; border-radius: 50%; opacity: 0.45; }
.rowDecor-half { height: calc(var(--decor-size) / 2); border-radius: var(--decor-size) var(--decor-size) 0 0; background: currentColor; opacity: 0.14; }
.rowDecor-dots { background-image: radial-gradient(currentColor 2px, transparent 2.5px); background-size: 18px 18px; opacity: 0.35; }
.rowDecor-blob { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; background: currentColor; opacity: 0.12; }
.rowDecor-arc { border: 10px solid currentColor; border-color: currentColor currentColor transparent transparent; border-radius: 50%; opacity: 0.3; }
.rowDecor-image { width: var(--decor-size); height: auto; opacity: 1; }
/* a picture sits in its place by the same point of itself: a corner place puts its corner in that corner of the row, the middle its middle */
.rowDecor-image { transform: translate(calc(var(--decor-x) * -1), calc(var(--decor-y) * -1)) rotate(var(--decor-rotate, 0deg)); }
.rowDecor-image:dir(rtl) { transform: translate(var(--decor-x), calc(var(--decor-y) * -1)) rotate(var(--decor-rotate, 0deg)); }
.rowDecor-image img { display: block; width: 100%; height: auto; }
.rowGhostWord
{
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: var(--ghost-size, 180px);
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
	color: currentColor;
	opacity: var(--ghost-opacity, 0.06);
	transform: translate(-50%, -50%);
}
.rowDecorDrift .rowDecorItem
{
	animation: rowDecorDrift 14s ease-in-out infinite alternate;
}
.rowDecorDrift .rowDecorItem:nth-child(2) { animation-duration: 18s; }
.rowDecorDrift .rowDecorItem:nth-child(3) { animation-duration: 22s; }
@keyframes rowDecorDrift
{
	from { translate: 0px 0px; }
	to { translate: 14px -18px; }
}
@media (max-width: 675px)
{
	.rowDecor:not(.rowDecorPhone) { display: none; }
}
@media (prefers-reduced-motion: reduce)
{
	.rowDecorDrift .rowDecorItem { animation: none; }
}
/* a column bleeding to the screen's edge on its start or end side (its row's width measured as a container) */
.boxPositionRowContentInner:has(> [class*="columnBleed-"])
{
	container-type: inline-size;
}
@media (min-width: 1025px)
{
	.boxPositionRowColumn.columnBleed-end { margin-inline-end: calc((100cqw - 100vw) / 2); }
	.boxPositionRowColumn.columnBleed-start { margin-inline-start: calc((100cqw - 100vw) / 2); }
}
.boxPositionRow:has(.boxPositionRowColumn[class*="columnBleed-"])
{
	overflow-x: clip;
}
/*ThemeVars*/
.navbar li.searchIcon > ul
{
	padding: 10px;
}
.navbar li.searchIcon.visible > ul
{
	display: block;
}
/* the hidden copy that measures the navbar's heights (scripts/_Utils.js): no transitions, the final sizes at once */
.navbarMeasuring, .navbarMeasuring *
{
	transition: none !important;
}
.navbarToScroll.fixedNavbar .navbar
{
    
    transition: all 1s;
    -webkit-transition: all 1s;
}
/* The wrapper always reserves the normal bar height, so the bar can animate between its normal and sticky sizes without moving the page */
.navbarWrapper
{
	min-height: 72px;
}

.navbarToScroll.fixedNavbar
{
	background: #FFFFFF;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
	position: fixed;
	top: 0px;
	width: 100%;
	left: 0px;
	z-index: 100;
	padding: 0px;
}

body.ltrDirection .navbarToScroll
{
	background: #FFFFFF;
	background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 100%);
}
body.rtlDirection .navbarToScroll
{
	background: #FFFFFF;
	background: linear-gradient(270deg, #FFFFFF 0%, #FFFFFF 100%);
}
.navbarToScroll
{
	font-size: 1rem;
	color: #444;
	position: relative;
	padding: 0px;
	/* the navbar's dropdowns stay above the page's own positioned content (sliders, cards) */
	z-index: 50;
	border-bottom: 1px solid #E6EBF0;
	box-shadow: 0px 0px 0px 0px rgba(15, 31, 46, 0);
}

.navbarMenu .menuItemArrow
{
	color: #0F1F2E;
	left: 3px;
}
/* the navbar's button item is the call to action (the orange pill), its outlined item the quiet one beside it */
.navbarWrapper ul > li.asButton:hover
{
	background: none;
}

.navbarWrapper .menuInner > li.asButton > a
{
	background: #E7731E;
	color: #0F1F2E;
	border: none;
	line-height: 48px;
	border-radius: 999px;
	font-weight: bold;
	font-size: 1rem;
	padding: 0px 28px;
}
.navbarMenu li.asButton:hover > a
{
	background: color-mix(in srgb, #E7731E 86%, #000);
	color: #0F1F2E;
}
/* the quiet button: a thin dark edge, filled with the dark colour under the mouse */
.navbarWrapper .menuInner > li.menuItemOutline > a
{
	line-height: 45px;
	margin-block: 0px;
	border: 1.5px solid #26323D;
	border-radius: 999px;
	padding: 0px 26px;
	font-weight: bold;
	font-size: 1rem;
	color: #0F1F2E;
}
.navbarMenu li.menuItemOutline:hover > a,
.navbarWrapper .menuInner > li.menuItemOutline:hover > a
{
	color: #FFFFFF;
	background: #0F1F2E;
	border-color: #0F1F2E;
}
.navbarWrapper .menuInner > li.asButton,
.navbarWrapper .menuInner > li.menuItemOutline
{
	margin-inline: 8px;
}
.navbarMenu
{
	width: 100%;
    float: right;
    padding-right: calc(150px + 30px);
    padding-left: 0px;
	margin-top: 0px;
	line-height: 72px;
}
.navbarToScroll.fixedNavbar .navbarMenu
{
	line-height: 56px;
}

.navbarWrapper li.navbarLang, .navbarWrapper li.searchIcon, .navbarWrapper li.socialItem
{
	padding: 0px 5px;
}
.navbarWrapper .navbarLang a, .navbarWrapper .searchIcon a, .navbarWrapper .socialItem a
{
	font-family: Tahoma, Arial;
	height: 30px;
	width: 30px;
	line-height: 30px;
	border-radius: 50%;
	text-align: center;
	padding: 0px;
}
.navbarWrapper .searchIcon a
{
	background: none;
	color: #26323D;
}
.navbarWrapper .menuInner > li.searchIcon
{
	float: left;
	padding: 0px;
	position: relative;
}
.navbarWrapper .menuInner > li.searchIcon > a
{
	width: 40px;
	padding: 0px;
	font-size: 1.25rem;
	text-align: center;
	line-height: 2.6rem;
}
.navbarWrapper .menuInner > li.searchIcon > a:hover,
.navbarWrapper .menuInner > li.searchIcon.visible > a
{
	color: #1D76BC;
}
.navbarMenu li.searchIcon > ul
{
	left: 0px;
	right: auto;
	width: 300px;
	padding: 12px;
	line-height: normal;
}
.navbarMenu li.searchIcon > ul li
{
	border-bottom: 0px none;
}
.navbarWrapper .navbarLang a
{
	background: #fb9f0d;
	color: #FFF;
}
.navbarWrapper .socialItem a
{
	
	color: #004f98;
}
.navbarWrapper .socialItem
{
	font-size: 29px;
}


.navbarMenu ul ul li
{
	line-height: 44px; 
	border-bottom: 1px solid #EEE;
}
.navbarMenu ul ul li:last-child
{
    border-bottom: 0px none;
}
.navbarMenu ul ul a:hover
{
	/* color: #3498db; */
}

.navbarMenu ul ul a
{
	border-top: 0px none;
	padding-bottom: 0px;
	font-size: 0.95rem;
	color: #0F1F2E;
	font-weight: normal;
}

.navbarWrapper ul ul
{
	background: #FFFFFF;
	border: 1px solid #E6EBF0;
	border-radius: 24px;
	box-shadow: 0px 0px 0px 0px rgba(15, 31, 46, 0);
	-webkit-box-shadow: 0px 0px 0px 0px rgba(15, 31, 46, 0);
}
.navbarLogo .imageContainer
{
	background: none;
}
.navbarLogo .imageContainer:after
{
	padding-top: 40%;
}
.navbarLogo
{
    padding: 0px;
	position: absolute;
	right: 0px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9;
	width: 150px;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}
.navbarToScroll.fixedNavbar .navbarLogo
{
	width: calc(150px * 0.7);
}
.navbarLogo img
{
    width: auto;
    height: auto;
    transition: all 1s;
    -webkit-transition: all 1s;
	vertical-align: top;
}

.navbarWrapper .navbarInner
{
	padding: 0px 0px;
	position: relative;
	height: 72px;
	transition: height 0.3s;
	-webkit-transition: height 0.3s;
}
.navbarToScroll.fixedNavbar .navbarInner
{
	height: 56px;
}
.navbarToScroll.fixedNavbar .menuInner > li > a
{
	line-height: 2.2rem;
}
/* the hovered item and the page being viewed: the item's colour and a line under the text */
.navbarWrapper .menuWrapper:not(.menuCompact) .menuInner > li:not(.asButton) > a:hover,
.navbarWrapper .menuWrapper:not(.menuCompact) .menuInner > li.menuItemCurrent:not(.asButton) > a,
.navbarWrapper .menuWrapper:not(.menuCompact) .menuInner > li.menuItemCurrentParent:not(.asButton) > a
{
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 10px;
}
.navbarWrapper .menuInner > li > a:hover
{
	background: transparent;
}
.navbarWrapper li
{
	
}
.navbarWrapper .menuInner > li > a
{
	display: inline-block;
	vertical-align: middle;
	line-height: 2.6rem;
	border-radius: 0px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}
/* the page being viewed: its top item (or the one it sits under) looks like a hovered one, in bold on a phone */
.navbarWrapper .menuWrapper:not(.menuCompact) .menuInner > li.menuItemCurrent:not(.asButton) > a,
.navbarWrapper .menuWrapper:not(.menuCompact) .menuInner > li.menuItemCurrentParent:not(.asButton) > a
{
	background: transparent;
	color: #1D76BC;
}
.navbarWrapper .menuWrapper.menuCompact .menuInner > li.menuItemCurrent > a,
.navbarWrapper .menuWrapper.menuCompact .menuInner > li.menuItemCurrentParent > a
{
	font-weight: bold;
}
.navbarMenu ul ul li.menuItemCurrent > a
{
	color: #1D76BC;
	font-weight: bold;
}
/* the items: bold; an item with a menu leaves room for its arrow, which sits clear of the text */
.navbarWrapper .menuWrapper:not(.menuCompact) .menuInner > li:not(.asButton):not(.menuItemOutline) > a
{
	font-weight: bold;
}
.navbarWrapper .menuWrapper:not(.menuCompact) .menuInner > li.menuHasChildren > a
{
	padding-inline-end: 36px;
}
.navbarWrapper .menuWrapper:not(.menuCompact) .menuInner > li.menuHasChildren > .menuItemArrow
{
	inset-inline-end: 14px;
}
.navbarWrapper li a
{
	color: #0F1F2E;
	/* font-weight: bold; */
	
}

.navbarMenu li > a span
{
	vertical-align: top;
}
.navbarMenu .menu_navbar > li > a
{
	/* border-bottom: 2px solid transparent; */
}
.navbarMenu .menu_navbar > li:hover > a
{
	/* border-bottom-color: #1D76BC; */
}
.navbarMenu li > a
{
	padding: 0px 18px;
}
.navbarMenu li:hover > a
{
	color: #1D76BC;
}
.navbarMenu ul ul li:hover > a
{
	/* the dropdown is white: a white default hover colour hid the text */
	color: #1D76BC;
}
.navbarWrapper ul > li:hover
{
	/* background: #ae0018; */
}

.navbarMenu ul li:hover > a
{
	
}
.navbarWrapper ul.menu_navbarInner > li:hover > a::after
{
	background: #1D76BC;
}
.navbarButtons
{
	float: left;
	padding-top: 28px;
}
.navbarButtons .button
{
	background-color: #FFF;
	color: #000;
	border-radius: 5px;
}

@media  (max-width:1024px){
	.navbarToScroll
	{
		font-size: 0.9rem;
		border-radius: 0px;
	}
	.navbarLogo
	{
		width: 120px;
	}
	.navbarMenu li > a
	{
		padding: 0px 9px;
	}
	.navbarMenu
	{
		padding-right: 140px;
		padding-left: 48px;
		padding-top: 6px;
		padding-bottom: 6px;
		line-height: 44px;
	}
	.navbarWrapper .navbarInner,
	.navbarToScroll.fixedNavbar .navbarInner
	{
		height: auto;
		min-height: 56px;
	}
	.navbarToScroll.fixedNavbar .navbarMenu
	{
		line-height: 44px;
	}
	.navbarWrapper
	{
		min-height: 0px;
	}
	.navbarWrapper .menuInner > li.searchIcon
	{
		position: absolute;
		left: 0px;
		top: 0px;
	}
}
@media  (max-width:850px){
	
   .navbarMenu ul.sf-menu > li > a
   {
       /* padding-right: 5px; */
   }
   
}

/* the navbar's mobile look follows its menu's mobile width (menuCompact: the menu's breakpoint, 675px unless set) */
.navbarWrapper:has(.menuCompact) .navbarInner
{
	padding: 0px;
}
.navbarWrapper:has(.menuCompact) .navbarInner,
.navbarWrapper:has(.menuCompact) .navbarToScroll.fixedNavbar .navbarInner
{
	height: auto;
}
.navbarWrapper:has(.menuCompact) .navbarToScroll.fixedNavbar .navbarMenu
{
	line-height: normal;
}
.navbarWrapper:has(.menuCompact) .menuInner > li.searchIcon
{
	float: none;
	position: static;
}
.navbarWrapper:has(.menuCompact) .navbarMenu li.searchIcon > ul
{
	width: 100%;
	position: static;
}
.navbarWrapper:has(.menuCompact) .navbarLogo
{
	width: 120px;
	float: inherit;
	text-align: center;
	margin: 0px auto;
	padding: 8px 0px;
	position: relative;
	top: auto;
	transform: none;
}
.navbarWrapper:has(.menuCompact) .navbarToScroll.fixedNavbar .navbarLogo
{
	width: 100px;
}
.navbarWrapper:has(.menuCompact) .navbarMenu
{
	margin: 0px;
	padding: 0px;
	line-height: normal;
	float: none;
	width: 100%;
}
/* a finger-sized target for opening a sub menu */
.menuWrapper.menuCompact .menuItemArrow_mobile
{
	width: 36px;
	height: 36px;
	line-height: 28px;
	text-align: center;
	border-radius: 50%;
	margin-top: 3px;
}
.navbarWrapper:has(.menuCompact) ul li > a
{
	border-top: 0px none;
	line-height: 40px;
}
.navbarWrapper:has(.menuCompact) li.navbarLang, .navbarWrapper:has(.menuCompact) li.searchIcon, .navbarWrapper:has(.menuCompact) li.socialItem
{
	text-align: center;
	float: right;
	line-height: 40px;
}
.navbarWrapper:has(.menuCompact) div.navbarMenu ul ul
{
	box-shadow: 0px 0px 0px;
	border: 0px none;
}
.navbarWrapper:has(.menuCompact) div.navbarMenu ul ul a
{
	line-height: 2.2rem;
}
.navbarWrapper:has(.menuCompact) div.navbarMenu ul ul li
{
	padding-right: 15px;
}
.navbarWrapper:has(.menuCompact) div.navbarMenu ul li:last-child
{
	border-bottom: 0px none;
}
.navbarWrapper:has(.menuCompact) .navbarMenu .menu_navbarInner
{
	padding-top: 20px;
	padding-bottom: 20px;
}
.navbarWrapper:has(.menuCompact) .navbarMenu .menuMobileToggler
{
	position: absolute;
	top: 12px;
	left: 0px;
	z-index: 120;
	color: #0F1F2E;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 1.5rem;
	padding-left: 2px;
}
.navbarWrapper:has(.menuCompact) .fixedNavbar .navbarMenu .menuMobileToggler
{
	top: 6px;
}
/* an open menu in the fixed navbar scrolls inside the screen (a panel has its own height) */
.navbarWrapper:has(.menuCompact) .fixedNavbar .navbarMenu .menuWrapper:not(.menuPanel) .menuBody
{
	max-height: calc(100vh - 60px);
	max-height: calc(100dvh - 60px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
@media  (max-width:675px){
	.aboveSocial
	{
		display: none;
	}
	.aboveText
	{
		float: none;
		text-align: center;
	}
}

/* an entry that wears a skin (the umbrellas in their dropdown: an article's own skin): a dot in the skin's accent */
.navbarMenu li[class*="skin-"] > a:before
{
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-left: 10px;
	background: var(--skin-accent, currentColor);
}
/*ThemeVars*/

.footerWrapper .footerInner
{
	/* border-top: 1px solid #E6EBF0; */
	padding: 35px 0px 20px 0px;
}
.footerWrapper
{
    position: relative;
	/* border-top: 5px solid inherit; */
	background-color: #F3F7FA;
	background-image: none;
	background-size: 28px;
    font-size: 0.95rem;
	color: #6F7479;
	
    line-height: 1.6em;
	margin-top: 0px;
}
.footerWrapper .boxValue
{
    line-height: 1.6em;
}


.footerWrapper .box_structure_items_menu .boxValue
{
    line-height: 2.5em;
}
.footerWrapper .rowTemplateTitle a
{
	font-weight: normal;
}
.footerWrapper a
{
    
	color: #0F1F2E;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
	/* font-weight: bold; */
}
.footerWrapper a:hover
{
	color: #1D76BC;
}
.footerWrapper .menuWrapper.onlyDisplayItemsPhotos li
{
	display: inline-block;
	float: none;
	vertical-align: middle;
}
.footerWrapper .menuWrapper li a:hover
{
    /* background: #9db836; */
}



.footerWrapper input[type=text]
{
	width: 100%;
}



.footerWrapper .box_structure_info_icon_value .row
{
	padding: 6px 0px;
}


/* .footerWrapper .menu_socialWrapper a:hover */
/* { */
	/* color: #0F1F2E; */
/* } */
/* .footerWrapper .menu_socialWrapper li a */
/* { */
	/* color: #0F1F2E; */
/* } */

.footerWrapper .row.only_title .rowTemplateTitle
{
	line-height: 22px;
}
.footerWrapper .menuWrapper li
{
	line-height: 2.2em;
	float: none;
	display: block;
	margin: 0px;
}
.footerWrapper .menuWrapper:not(.onlyDisplayItemsPhotos) li > a:before
{
	content: "\203A";
	display: inline-block;
	margin-left: 8px;
	color: #1D76BC;
}
.footerWrapper .menu_socialWrapper ul.sf-menu > li
{
	display: inline-block;
	width: 34px;
	height: 34px;
	margin-left: 8px;
	background: #FFFFFF;
	border: 1px solid #E6EBF0;
	border-radius: 24px;
	vertical-align: middle;
}
.footerWrapper .menu_socialWrapper ul.sf-menu > li a,
.footerWrapper .menu_socialWrapper ul.sf-menu > li a:hover
{
	height: 34px;
	line-height: 34px;
	color: #0F1F2E;
}
.footerWrapper .menu_socialWrapper ul.sf-menu > li img,
.footerWrapper .menu_socialWrapper ul.sf-menu > li:hover img
{
	filter: brightness(0) invert(1);
}
.footerWrapper .menuWrapper img
{
	
}
.footerWrapper .boxValue .button
{
    background: #E7731E;
    color: #FFFFFF;
	border: 0px none;
}


.footerWrapper .box_structure_image
{
	/* text-align: center; */
}
.footerWrapper .box img
{
	max-height: 240px;
	width: auto;
    
}

.footerWrapper .infoIconValue_icon
{
	color: #0F1F2E;
}
.footerWrapper .infoIconValue_value,
.footerWrapper .infoIconValue_value a
{
	color: #0F1F2E;
}
.footerWrapper .box_structure_info_icon_value
{
	margin-bottom: 20px;
}
.footerWrapper .row.infoIconValueRow .infoIconValue_icon
{
	min-width: 26px;
}
.footerWrapper .row.infoIconValueRow .infoIconValue_icon span
{
	font-size: 1.1rem;
}
.footerWrapper .row.infoIconValueRow .infoIconValue_value
{
	margin-right: 8px;
	font-size: 0.95rem;
}
.footerWrapper .box_structure_header h1, .footerWrapper .box_structure_header h2, .footerWrapper .box_structure_header h3, .footerWrapper .box_structure_header h4, .footerWrapper .box_structure_header h5, .footerWrapper .box_structure_header h6
{
	font-size: 1.2rem;
	padding-bottom: 12px;
	border-bottom: 1px solid #E6EBF0;
}

.footerWrapper h1, .footerWrapper h2, .footerWrapper h3, .footerWrapper h4, .footerWrapper h5, .footerWrapper h6,
.footerWrapper .block-title h1, .footerWrapper .block-title h2, .footerWrapper .block-title h3, .footerWrapper .block-title h4, .footerWrapper .block-title h5, .footerWrapper .block-title h6
{
	color: #0F1F2E;
    font-weight: bold;
	margin: 0px;
}
.footerWrapper .block-title h1:before, .footerWrapper .block-title h2:before, .footerWrapper .block-title h3:before, .footerWrapper .block-title h4:before, .footerWrapper .block-title h5:before, .footerWrapper .block-title h6:before
{
	display: none;
}
.footerWrapper .boxTitle
{
    position: relative;
    margin-bottom: 25px;
}
.footerWrapper .box.box_structure_header
{
    padding-bottom: 20px;
}
.footerWrapper ul
{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.footerWrapper .box_structure_mail_newsletter .formElement
{
	display: flex;
	flex-direction: column;
}
/* the button sits in the email field: the other rows (interests, consent, captcha) go under them */
.footerWrapper .box_structure_mail_newsletter .formElement > .row
{
	order: 3;
}
.footerWrapper .box_structure_mail_newsletter .formElement > .text-row
{
	order: 1;
}
.footerWrapper .box_structure_mail_newsletter .formElement > .submit-row
{
	order: 2;
}
.footerWrapper .box_structure_mail_newsletter .submit-row .column
{
    min-height: 0px;
} 
.footerWrapper .box_structure_mail_newsletter .formRow
{
	max-width: none;
	min-width: auto;
}
.footerWrapper .box_structure_mail_newsletter .submit-row 
{
    height: 0px;
    padding: 0px;
}
.footerWrapper .box_structure_mail_newsletter label
{
    color: #000;
    left: 15px;
    right: auto;
}
.footerWrapper .box_structure_mail_newsletter input[type=text]
{
    background: #FFF;
    color: #000;
    border: 0px none;
    box-shadow: 0px 0px 0px;
    height: 37px;
	/* border-radius: 15px; */
}
.footerWrapper .box_structure_mail_newsletter input[type=text]:focus
{
    box-shadow: 0px 0px 0px;
}
.footerWrapper .box_structure_mail_newsletter .inputWarning
{
    position: absolute;
    width: 100%;
    top: 35px;
}
.footerWrapper .box_structure_mail_newsletter .boxValue .button
{
    position: absolute;
    top: -47px;
    right: 10px;
    /* background: #92c540; */
    /* border-radius: 0px; */
    height: 31px;
    line-height: 1em;
    /* border-radius: 15px; */
    /* color: #fffacc; */
	padding: 0px 20px;
	max-width: 100px;
	border-radius: 4px;
	height: 37px;
}

.footerWrapper .box_structure_articles .only_title .rowTemplateTitle
{
    line-height: 22px;
	padding-top: 2px;
	padding-bottom: 2px;
    
    /* border-bottom: solid 1px rgba(255,255,255,0.1); */
}
.footerWrapper .box_structure_articles_search input[type=text]
{
    border-radius: 5px;
}
.footerWrapper .box_structure_articles_search .button
{
    position: absolute; 
    top: -33px;
    left: 0px;
    background: url('../images/search.png') no-repeat center center;
    background-size: 16px;
    border: 0px none;
    box-shadow: 0px 0px 0px none;
    font-size: 0px;
    
}
.footerWrapper .box_structure_articles_search .row
{
    padding: 0px;
	
}


.footerWrapper .box
{
	/* padding: 25px 15px; */
	/* border-left: 1px solid #3F3F43; */
}
.footerWrapper .box:last-child
{
	/* border-right: 1px solid #3F3F43; */
}
.footerWrapper ul
{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.footerWrapper .block-title
{
	font-size: 1.2rem;
	line-height: 1.3rem;
	color: #0F1F2E;
	border-bottom: 1px solid #E6EBF0;
	padding-bottom: 12px;
	margin-bottom: 15px;
}
.footerWrapper .block-title h1, .footerWrapper .block-title h2, .footerWrapper .block-title h3, .footerWrapper .block-title h4, .footerWrapper .block-title h5, .footerWrapper .block-title h6
{
	font-size: 1.2rem;
}
.footerWrapper .footerInner
{
	position: relative;
}
.footerWrapper .scrollUpDiv
{
	cursor: pointer;
	line-height: 34px;
	height: 40px;
	width: 40px;
	background: #1D76BC;
	color: #FFFFFF;
	border-radius: 24px;
	text-align: center;
	font-size: 1.6rem;
	position: absolute;
	left: 0px;
	top: -45px;
	z-index: 11;
}
.footerNewsletterColumn .boxPositionRowColumnInner:after
{
	content: "";
	width: 55px;
	height: 55px;
	background: url(../images/newsletter_missile.png) center center no-repeat;
	background-size: contain;
	position: absolute;
	top: -15px;
	left: 0px;
}
.footerNewsletterColumn .boxPositionRowColumnInner .box_structure_text
{
	padding-left: 36px;
}
.footerNewsletterColumn .boxPositionRowColumnInner
{
	background-color: inherit;
	border-radius: 30px;
	padding: 20px 20px;
	position: relative;
}
@media  (max-width:1024px){
    .footerWrapper .box_structure_articles_search
    {
        width: 200px;
    }
}
@media  (max-width:850px){
    .footerWrapper .box_structure_articles_search
    {
        width: 100%;
        float: none;
        margin-top: 0px;
        margin-bottom: 10px;
    }
	.footerWrapper
	{
		text-align: center;
	}
	.footerWrapper .boxPositionRowColumn
	{
		width: 100%;
	}
	.footerWrapper .boxPositionRowContentInner
	{
		flex-direction: column;
		padding-right: 10px;
	}
}
@media  (max-width:850px){
    
    .footerWrapper .fourColumns > .column
       {
        width: 100%;
    }
    .footerWrapper .boxPositionRowColumn
       {
        /* text-align: center; */
        margin-bottom: 40px;
    }
    .footerWrapper .boxPositionRowColumn:last-child
       {
        margin-bottom: 0px;
    }
    .footerWrapper .boxTitle:after
       {
        left: 0px;
        right: 0px;
        margin: auto;
    }
    .footerWrapper .infoIconValue_value, .footerWrapper .infoIconValue_icon
	{
        text-align: right;
        display: inline-block;
        float: none;
        vertical-align: top;
        width: auto;
    }
	.row.infoIconValueRow
	{
		justify-content: center;
	}
    .footerWrapper .horizontalBoxPositionType .boxPositionRowColumn .box
    {
        padding-bottom: 20px;
    }
    .footerWrapper .menuWrapper.onlyDisplayItemsPhotos li
    {
        display: inline-block;
        float: none;
        vertical-align: top;
    }
    .footerWrapper .box_structure_mail_newsletter .inputWarning, .footerWrapper .box_structure_mail_newsletter .button
    {
        position: relative;
        width: 100%;
        top: 0px;
        left: 0px;
        right: 0px;
		max-width: 100%;
    }
    

}

/* the leaders' footer: the links in two columns without bullets or dividers, the tagline with the social marks in circles
   (40px: the four fit their column on one row) */
.footerWrapper .box_structure_menu ul.menuInner
{
	column-count: 2;
	column-gap: 40px;
	border-bottom: 0px none;
	padding-bottom: 0px;
	margin-bottom: 0px;
}
.footerWrapper .box_structure_menu ul.menuInner > li
{
	break-inside: avoid;
}
.footerWrapper .menuWrapper:not(.onlyDisplayItemsPhotos) li > a:before
{
	display: none;
}
.footerWrapper .menuWrapper li > a
{
	font-weight: bold;
}
.footerWrapper .box_structure_header h1, .footerWrapper .box_structure_header h2, .footerWrapper .box_structure_header h3, .footerWrapper .box_structure_header h4, .footerWrapper .box_structure_header h5, .footerWrapper .box_structure_header h6
{
	border-bottom: 0px none;
	padding-bottom: 0px;
}
.footerWrapper .box.box_structure_header
{
	padding-bottom: 14px;
}
.footerWrapper .box_structure_social_follow .boxItems
{
	column-gap: 12px;
}
.footerWrapper .box_structure_social_follow .socialItem.socialMono .itemMedia
{
	width: 40px;
	height: 40px;
	background: #FFFFFF;
	border: 1px solid #E6EBF0;
	color: #0F1F2E;
}
/* a phone: the stacked columns and the logo closer, as the design's short footer (the links keep their 44px touch height) */
@media (max-width: 675px)
{
	.footerWrapper .boxPositionRowContentInner
	{
		gap: 16px;
	}
	.footerWrapper .boxPositionRowColumn
	{
		margin-bottom: 0px;
	}
	.footerWrapper .boxPositionRowColumn .box
	{
		padding-bottom: 8px;
	}
	.footerWrapper .box_structure_image img
	{
		max-height: 72px;
		width: auto;
	}
}
/*ThemeVars*/
/* ==========================================================================
	The image and video boxes (classes/boxes/image.php, video.php, _media.php) and the text with more
	(popup_text.php). An image box's sizes are custom properties on .imageBox: --img-max(-t, -m) (natural size: its max
	width per device), --img-height(-t, -m) (a height per device), --img-ratio (width / height), --img-fit (cover,
	contain) and --img-focus (the focal point: what a crop keeps).
   ========================================================================== */
.imageBox .imageLook
{
	margin: 0px;
}
.imageBox .imageMedia
{
	display: block;
	position: relative;
	overflow: hidden;
}
.imageBox .imageMedia img
{
	display: block;
	max-width: 100%;
	height: auto;
}
.imageBox .imageMediaLink
{
	display: block;
	position: relative;
	color: inherit;
}
/* natural: as wide as the picture, at most its max width, aligned */
.imageBox.mode_natural .imageLook
{
	width: fit-content;
	max-width: min(100%, var(--img-max, 100%));
}
.imageBox.mode_natural.align_center .imageLook { margin-inline: auto; }
.imageBox.mode_natural.align_end .imageLook { margin-inline-start: auto; }
@media (max-width: 1024px)
{
	.imageBox.mode_natural .imageLook { max-width: min(100%, var(--img-max-t, var(--img-max, 100%))); }
	.imageBox.mode_height .imageMedia img { height: var(--img-height-t, var(--img-height, 360px)); }
}
@media (max-width: 675px)
{
	.imageBox.mode_natural .imageLook { max-width: min(100%, var(--img-max-m, var(--img-max-t, var(--img-max, 100%)))); }
	.imageBox.mode_height .imageMedia img { height: var(--img-height-m, var(--img-height-t, var(--img-height, 360px))); }
}
/* fill, ratio, height: as wide as the column; a ratio or a height cropped around the focal point */
.imageBox:is(.mode_fill, .mode_ratio, .mode_height) .imageMedia img
{
	width: 100%;
}
.imageBox.mode_ratio .imageMedia img
{
	aspect-ratio: var(--img-ratio, 1.6);
	height: auto;
	object-fit: var(--img-fit, cover);
	object-position: var(--img-focus, 50% 50%);
}
.imageBox.mode_ratio.is-round .imageMedia
{
	border-radius: 50%;
}
.imageBox.mode_height .imageMedia img
{
	height: var(--img-height, 360px);
	object-fit: var(--img-fit, cover);
	object-position: var(--img-focus, 50% 50%);
}
/* hover: zoom, or from grey to colour */
.imageBox .look-hover-zoom .imageMedia img,
.imageBox .look-hover-grayscale .imageMedia img
{
	transition: transform 0.5s ease, filter 0.5s ease;
}
.imageBox .look-hover-zoom:hover .imageMedia img
{
	transform: scale(1.06);
}
.imageBox .look-hover-grayscale .imageMedia img
{
	filter: grayscale(1);
}
.imageBox .look-hover-grayscale:hover .imageMedia img
{
	filter: none;
}
@media (hover: none)
{
	.imageBox .look-hover-grayscale .imageMedia img { filter: none; }
}
@media (prefers-reduced-motion: reduce)
{
	.imageBox .imageMedia img { transition: none !important; }
}
/* the round play button (a video behind a picture, the video box's poster and button) */
.mediaPlay
{
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: var(--media-play-size, 68px);
	height: var(--media-play-size, 68px);
	margin: calc(var(--media-play-size, 68px) / -2) 0px 0px calc(var(--media-play-size, 68px) / -2);
	border-radius: 50%;
	background: var(--skin-accent, #1D76BC);
	color: var(--skin-accent-text, #fff);
	font-size: calc(var(--media-play-size, 68px) * 0.34);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	transition: transform 0.25s ease;
}
.mediaPlay .icon-play
{
	margin-inline-start: 0.12em;
}
:dir(rtl) .mediaPlay .icon-play
{
	margin-inline-start: 0px;
	margin-inline-end: 0.12em;
}
a:hover > .mediaPlay, button:hover > .mediaPlay
{
	transform: scale(1.08);
}
.mediaPlay.is-pulsing::before
{
	content: "";
	position: absolute;
	inset: 0px;
	border-radius: 50%;
	border: 2px solid var(--skin-accent, #1D76BC);
	animation: mediaPulse 2s ease-out infinite;
}
@keyframes mediaPulse
{
	from { transform: scale(1); opacity: 0.8; }
	to { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce)
{
	.mediaPlay.is-pulsing::before { animation: none; }
}
/* the video box (classes/boxes/video.php): a frame of its ratio (--video-ratio) for the player, the poster and its
   button, the play button alone, the background */
.videoBox .videoPlayerFrame,
.videoBox .videoPosterButton
{
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--video-ratio, 16 / 9);
	overflow: hidden;
	background: #000;
}
.videoBox.is-rounded :is(.videoPlayerFrame, .videoPosterButton)
{
	border-radius: var(--card-radius, 24px);
}
.videoBox .videoPlayerFrame .mediaPlayer
{
	position: absolute;
	inset: 0px;
	width: 100%;
	height: 100%;
	border: 0px;
}
.videoBox video.mediaPlayer
{
	object-fit: contain;
}
.videoBox .videoPosterButton
{
	padding: 0px;
	border: 0px;
	cursor: pointer;
}
.videoBox .videoPoster
{
	position: absolute;
	inset: 0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.videoBox .videoPlayButton
{
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 0px;
	border: 0px;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.videoBox .videoPlayButton .mediaPlay
{
	position: relative;
	top: auto;
	left: auto;
	margin: 0px;
}
.videoBox.display_background video.mediaPlayer
{
	object-fit: cover;
	pointer-events: none;
}
.videoBox.display_background iframe.mediaPlayer
{
	pointer-events: none;
	transform: scale(1.2);
}
/* a dialog's picture keeps its shape (the media dialog gives its pictures 16:9, styles/basic/dialog.css) */
.kDlg .kDlgBody img.mediaDialogImage
{
	width: auto;
	max-width: 100%;
	max-height: 82vh;
	aspect-ratio: auto;
	margin: 0px auto;
}
/*ThemeVars*/
/* Social marks (templates/items/social/icons.storm): the marks alone in a row, the name in their title; a count under a
   mark when ticked. Best in the inline layout. */
.itemTemplate.social_icons > .socialLink
{
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	color: inherit;
}
.itemTemplate.social_icons .socialName
{
	font-weight: 600;
	font-size: 0.9rem;
}
.itemTemplate.social_icons .socialCount
{
	font-size: 0.8rem;
	opacity: 0.85;
}
.itemTemplate.social_icons .itemMedia
{
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
@media (hover: hover)
{
	.itemTemplate.social_icons > .socialLink:hover .itemMedia
	{
		transform: translateY(-2px);
	}
}
/*ThemeVars*/
.copyRightsWrapper li a
{
	padding: 0px 14px;
}
.copyRightsWrapper a
{
	
	color: #6F7479;
}
.copyRightsWrapper a:hover
{
	color: #1D76BC;
}
.copyRightsWrapper .copyRightsInner.clearfix
{
    line-height: 30px;
    padding: 14px 0px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
}
.copyRightsWrapper .copyRightsInner.clearfix:after
{
	display: none;
}
.copyRights
{
	border-top: 1px solid #E6EBF0;
}
.copyRightsWrapper
{
	overflow: hidden;
	font-size: 0.95rem;
	background-color: #F3F7FA;
	color: #6F7479;
	
}
.copyRightsWrapper .footerMenu
{
	float: none;
	font-size: 0.9rem;
}
.copyRightsWrapper .footerMenu li + li
{
	border-right: 1px solid #E6EBF0;
}
.copyRightsWrapper .footerMenu:not(:has(li))
{
	display: none;
}
.copyRightsWrapper .copyRightsText
{
	text-align: left;
}
.copyRightsWrapper .footerMenu .onlyDisplayItemsPhotos span
{
	font-size: 1.1rem;
	color: #6F7479 !important;
}
.copyRightsWrapper .footerMenu ul
{
	margin: 0px;
	padding: 0px;
}
.copyRightsWrapper .footerMenu li
{
	float: none;
	display: inline-block;
	vertical-align: middle;
	font-size: 1rem;
	line-height: 30px;
}
@media  (max-width:675px){
    .copyRightsWrapper .copyRightsInner.clearfix
	{
		justify-content: center;
	}
    .copyRightsWrapper .footerMenu, .copyRightsWrapper .copyRightsText
	{
		float: none;
		text-align: center;
	}
    
}