@import url('/library/blogs/styles/root.css');

/* --------------- Page Banner --------------- */
*.pageBanner {
	background-color: #111111;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	width: 100%;
}
*.pageBanner div.wrapperFixed {
	height: 100%;
}

/* --------------- Bulleted Header --------------- */
*.headerBulleted {
	align-items: center;
	color: #333333;
	display: flex;
	font-family: var(--segoUI);
	font-size: 24px;
	font-weight: bold;
	line-height: 30px;
}
*.headerBulleted::before {
	--bulletSize: 16px;
	background-color: var(--logoRed);
	content: ' ';
	display: block;
	flex-shrink: 0;
	height: var(--bulletSize);
	margin-right: 15px;
	width: var(--bulletSize);
}

/* --------------- Underlined Header --------------- */
*.headerUnderlined {
	font-family: var(--museoSans);
	font-size: 28px;
	font-weight: 300;
	line-height: 35px;
}
*.headerUnderlined::after {
	--margin: 20px;
	border-bottom: var(--logoRed) solid 5px;
	content: ' ';
	display: block;
	margin-bottom: var(--margin);
	margin-top: var(--margin);
	width: 180px;
}
*.headerUnderlined > a {
	color: #666666;
	transition: color 0.25s;
}
*.headerUnderlined > a:hover {
	color: #000000;
}

/* --------------- Animated Button --------------- */
*.buttonAnimated {
	--buttonHeight: 60px;
	background-color: var(--buttonColor);
	color: #FFFFFF;
	display: block;
	font-family: var(--museoSans);
	font-size: 16px;
	font-weight: 900;
	height: var(--buttonHeight);
	max-width: var(--panelWidthMinimum);
	position: relative;
	text-transform: uppercase;
}
*.buttonAnimated::before {
	background-color: var(--buttonColorHover);
	content: ' ';
	display: block;
	height: 100%;
	left: 0px;
	position: absolute;
	top: 0px;
	transition: width 0.2s;
	width: 0px;
	z-index: 0;
}
*.buttonAnimated:hover::before {
	width: 100%;
}
*.buttonAnimated span {
	display: block;
	position: relative;
	z-index: 5;
}
a.buttonAnimated {
	line-height: var(--buttonHeight);
	text-align: center;
}

/* --------------- Avatar --------------- */
figure.avatar div {
	border-radius: var(--avatarDimension);
	height: var(--avatarDimension);
	width: var(--avatarDimension);
}
figure.avatar > div {
	position: relative;
}
figure.avatar > div > div {
	left: 50%;
	overflow: hidden;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}
figure.avatar.noImage > div {
	background-color: #111111;
}
figure.avatar.dataBlog > div {
	background-color: #FFFFFF;
}
figure.avatar > div > div > * {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}
figure.avatar.noImage path {
	fill: #222222;
}
figure.avatar img {
	border-radius: var(--avatarDimension);
	height: var(--avatarDimension);
	object-fit: cover;
	transition: height 0.2s, width 0.2s;
	width: var(--avatarDimension);
}
figure.avatar.dataBlog img {
	height: 85% !important;
	width: 85% !important;
}
figure.avatar svg {
	height: var(--dimension);
	width: var(--dimension);
}

/* --------------- Masthead --------------- */
div#masthead {
	background-color: #FFFFFF;
	border-bottom-color: var(--borderColor);
	border-bottom-style: solid;
	border-bottom-width: 1px;
	height: 100px;
	position: absolute;
	top: 0px;
	transition: background-color 0.25s, border-bottom-color 0.2s;
	width: 100%;
	z-index: 100;
}
div#masthead.transparent {
	background-color: rgba(0, 0, 0, 0.10);
	border-bottom-color: transparent;
}
div#masthead.transparent svg.logoWTO path {
	fill: #FFFFFF;
}
div#masthead.transparent ul.languageSelector a {
	color: #FFFFFF !important;
}
div#masthead.transparent ul.languageSelector a path {
	fill: #FFFFFF !important;
}
div#masthead div.wrapperFixed {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: space-between;
}
div#masthead a {
	display: block;
}
div#masthead svg.logoWTO {
	height: 60px;
	width: 203px;
}
div#masthead svg.logoWTO path {
	transition: fill 0.5s;
}
div#masthead ul.languageSelector {
	display: flex;
	font-family: var(--museoSans);
	font-size: 14px;
	font-weight: 700;
	gap: 40px;
	line-height: 30px;
	list-style: none;
	padding-left: 0px;
	text-transform: uppercase;
}
div#masthead ul.languageSelector li {
	margin-bottom: 0px;
}
div#masthead ul.languageSelector a {
	--colorDefault: #666666;
	--colorHover: #000000;
	align-items: center;
	color: var(--colorDefault);
	display: flex;
	transition: color 0.2s;
}
div#masthead ul.languageSelector a:hover {
	color: var(--colorHover);
}
div#masthead ul.languageSelector a path {
	fill: var(--colorDefault);
	transition: fill 0.2s;
}
div#masthead ul.languageSelector a:hover path {
	fill: var(--colorHover);
}
div#masthead ul.languageSelector a svg {
	--svgDimension: 18px;
	display: block;
	height: var(--svgDimension);
	margin-right: 10px;
	width: var(--svgDimension);
}
div#masthead ul.languageSelector a path {
	fill: 
}
div#masthead ul.languageSelector a span:first-of-type {
	display: none;
}
div#masthead ul.languageSelector a span:last-of-type {
	display: block;
}

/* --------------- Bread Crumbs --------------- */
nav#breadCrumbs {
	--textColor: #666666;
	color: var(--textColor);
	font-size: 14px;
	line-height: 15px;
	margin-top: 40px;
}
nav#breadCrumbs ul {
	display: flex;
	list-style: none;
	padding-left: 0px;
}
nav#breadCrumbs li {
	display: flex;
	margin-bottom: 0px;
}
nav#breadCrumbs li::after {
	--margin: 10px;
	content: '\276F';
	display: block;
	margin-left: var(--margin);
	margin-right: var(--margin);
}
nav#breadCrumbs li:last-child::after {
	display: none;
}
nav#breadCrumbs li > * {
	display: block;
}
nav#breadCrumbs a {
	color: var(--textColor);
	transition: color 0.2s;
}
nav#breadCrumbs a:hover {
	color: var(--logoBlue);
}

/* --------------- Main Content --------------- */
div#mainContent {
	margin-bottom: var(--panelSpaceTopBottom);
	margin-top: var(--panelSpaceTopBottom);
}

/* --------------- Site Footer --------------- */
footer#siteFooter {
	background-color: var(--panelColor);
	padding-bottom: var(--panelSpaceTopBottom);
	padding-top: var(--panelSpaceTopBottom);
}
footer#siteFooter div.wrapperFixed {
	display: flex;
	justify-content: space-between;
}
footer#siteFooter div.aboutBlog {
	width: 50%;
}
footer#siteFooter div.aboutBlog p {
	margin-bottom: 0px;
}
footer#siteFooter div.otherInformation {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
footer#siteFooter div.otherInformation small {
	display: block;
	font-size: 14px;
	line-height: 20px;
}
footer#siteFooter div.socialMediaLinks {
	display: flex;
	column-gap: 20px;
	margin-bottom: 20px;
}
footer#siteFooter div.socialMediaLinks a {
	--size: 50px;
	background-color: var(--buttonColor);
	border-radius: var(--size);
	display: block;
	height: var(--size);
	position: relative;
	transition: background-color 0.2s;
	width: var(--size);
}
footer#siteFooter div.socialMediaLinks a:hover {
	background-color: var(--buttonColorHover);
}
footer#siteFooter div.socialMediaLinks svg {
	--size: 24px;
	height: var(--size);
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: var(--size);
}
footer#siteFooter div.socialMediaLinks path {
	fill: #FFFFFF;
}
footer#siteFooter div.socialMediaLinks span {
	display: none;
}

/* --------------- TABLETS --------------- */

@media all and (max-width: 1359px) {
/* --------------- Masthead --------------- */
div#masthead {
	height: 60px;
}
div#masthead svg.logoWTO {
	height: 40px;
	width: 135px;
}
div#masthead ul.languageSelector {
	font-size: 12px;
	gap: 20px;
}
div#masthead ul.languageSelector a svg {
	margin-right: 5px;
}
}

@media all and (max-width: 1019px) {
/* --------------- Site Footer --------------- */
footer#siteFooter div.wrapperFixed {
	display: block;
}
footer#siteFooter div.aboutBlog {
	margin-bottom: 40px;
	width: auto;
}
footer#siteFooter div.aboutBlog p {
	text-align: center;
}
footer#siteFooter h2.headerBulleted {
	justify-content: center;
}
footer#siteFooter div.otherInformation {
	align-items: center;
}
}

/* --------------- SMARTPHONES --------------- */

@media all and (max-width: 759px), all and (max-width: 1019px) and (orientation: landscape) {
/* --------------- Underlined Header --------------- */
*.headerUnderlined {
	font-size: 24px;
	line-height: 30px;
}

/* --------------- Masthead --------------- */
div#masthead ul.languageSelector a span:first-of-type {
	display: block;
}
div#masthead ul.languageSelector a span:last-of-type {
	display: none;
}

/* --------------- Bread Crumbs --------------- */
nav#breadCrumbs {
	font-size: 12px;
}
nav#breadCrumbs li > * {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 120px;
}
nav#breadCrumbs li::after {
	--margin: 5px;
}
}