body {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 32px;
	letter-spacing: 1px;
	color: rgb(51, 51, 51);
}
a, a:visited {
	color:#b68036;
}

.eb-garamond{
	font-family: Roboto,sans-serif;
}

h1, h2, h3 {
	font-family: "Cinzel", sans-serif;
}

h4, h5, h6 {
	font-family: Roboto,sans-serif;
}

h3 {
	font-size: 1.375rem;
	line-height: 1.815rem;
	font-weight: 600;
	text-align: left;
}

h4 {
	margin: 1.5rem 0;
	text-align: left;
	font-weight: bold;
}

ol.ntd-alpha {
	list-style-type: upper-alpha;
}

.full-width {
	width: 100%;
}

.half-width {
	width:calc(50% - 0.5rem )
}
.center{
	text-align:center;
}
.left{
	text-align:left;
}

p {
	margin-top: 0px;
	color: #333;
	text-align: left;
}

.hide, .logo_text {
	display: none;
}
.flex{
	display: flex;
}

/* mobile first directly */
.w3-ul li{padding:0;border-bottom:1px solid #ddd}
.term-posts-list img {width: 100%;}

.no-scroll {
	overflow: hidden;
}

.full-width {
	width: 100% !important;
}
.full-height {
	height: 100% !important;
}

/* width, not max-width, was the single reason the home page scrolled
 * sideways on a phone: every .content_container held itself open at 1200px
 * inside a 375px viewport, so "Core Tool Overview" and "Why Choose Us" ran off
 * the right edge and the document picked up a 1216px scrollWidth.
 *
 * style.css already carried the corrected form, but scoped to
 * `.main-col .content_container` — which covers the tool and legal pages and
 * misses the home page, the only place these containers sit outside .main-col.
 * Fixed at the source instead. Desktop is unchanged: margin:0 auto still
 * centres it and it still stops growing at 1200px. */
.content_container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
}

/* .header_wrap,  */
.content_wrap, .footer_wrap {
	padding: 0 1%;
}

/* Nothing in site.css sets a body background, so the header strip inherits it:
 * white on most pages, but #f3f4f6 on the tool pages, where media-tool.css sets
 * `body { background:#f3f4f6 }`. logo.jpg has a flat #FCFCFA plate, which is
 * invisible against white and reads as a pale rectangle against the grey.
 * Pinning the header band to white makes the logo blend everywhere, and gives
 * the tool pages a white header over a grey content area. */
.top {
	background: #fff;
}

.logo {
	margin: 0!important;
	float: left;
	display: block;
}

#head_ads {
	width: calc(100% - 290px);
	padding: 0 20px;
	margin: 20px 0 !important;
	height: 90px;
	line-height: 90px;
	text-align: center;
	font-size: 26px;
}

#search-submit-btn {
	position: absolute;
	right: 0;
	top: 5px;
	padding: 10px 0 10px 10px;
	width: 48px;
	height: 48px;
}

#search-submit-btn > svg {
	width: 30px;
	height: 30px;
	text-align: center;
	display: block;
	float: left;
	cursor: pointer;
}

.w3-bar .w3-bar-item {
	float: none;
	/*padding: 0 1rem; disabe to let menu item padding bigger*/
	display: block;
}
.lang_nav {
	text-align: right;
	font-size: 12px;
	border-top: 2px solid #ffb428;
}
.lang_nav a {
	padding: 0 6px;
	font-size: 13px;
	color: #666;
}
.lang_nav .last-lang {
	display: inline-block;
	border-left: 1px solid #eee;
	padding-left: 12px;
	padding-right: 20px;
}
/* Active language is not a useful link target, so mark it instead of hiding it
 * (keeps the row width stable between languages). */
.lang_nav .current-lang {
	color: #222;
	font-weight: 600;
	cursor: default;
}
/* Dropdown form, emitted by [gjw_lang_switcher] once there are 4+ languages.
 * CSS-only (hover/focus-within) so no JS is needed when 'es' is turned on. */
.lang_nav .lang_dd {
	position: relative;
	display: inline-block;
	padding-right: 20px;
	text-align: left;
}
.lang_nav .lang_dd_toggle {
	display: inline-block;
	padding: 0 6px;
	font-size: 13px;
	color: #666;
	cursor: pointer;
}
.lang_nav .lang_dd_menu {
	display: none;
	position: absolute;
	right: 20px;
	top: 100%;
	z-index: 20;
	min-width: 110px;
	background: #fff;
	border: 1px solid #e5e5e5;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.lang_nav .lang_dd:hover .lang_dd_menu,
.lang_nav .lang_dd:focus-within .lang_dd_menu {
	display: block;
}
.lang_nav .lang_dd_menu a {
	display: block;
	padding: 6px 12px;
	white-space: nowrap;
}
.lang_nav .lang_dd_menu a:hover {
	background: #f5f5f5;
}

.nav_wrap {
	height: 130px;
	line-height: 130px;
	vertical-align: middle;
}
/* #head_nav is the nav band; the markup lives in ut168_termmeta term 1
 * (general_header_setting / en_general_header_setting), not in header.php.
 * Both borders so the band reads as a strip separated from the logo row
 * above and the content below. */
#head_nav {
	border-top: 1px solid rgb(238, 238, 238);
	border-bottom: 1px solid rgb(238, 238, 238);
}

.contest_nav {
	text-align: right;
	font-size: 15px;
	border-top: 15px solid #FFFFFF;
}

.contest_nav a {
	padding: 0 10px;
	color: #333;
	font-size: 15px;
	text-decoration: none;
}
.top-nav-bar {
	white-space: nowrap;
	overflow-x: auto;
	text-align: left;
	margin-top: 10px;
}

.nav-item {
	float: left;
	color: #333;
	font-size: 17px;
	line-height: 30px;
	text-decoration: none;
	display: block;
}

.w3-panel {
	padding: 8px;
}

.w3-theme {
	color: #fff !important;
}

.term-posts-list .item {
	margin-top: 16px;
	padding-bottom:16px;
	border-bottom: 1px dashed #E3E3E3;
}

.w3-bar-block > h2 {
	padding-bottom: 8px;
	margin-bottom: 15px;
	border-bottom: 1px solid #D8D8D8;
}

.hamburger {
	display: none;
}
.hamburger > span {
	display: block;
	width: 24px;
	height: 3px;
	margin-bottom: 4px;
	border-radius: 9px;
	background-color: #ffb428;
	transition: all .5s ease-in-out;
	opacity: 1;
}

.dropdown {
	display: inline-block;
	padding: 0 1rem;
}

.dropdown .dropbtn {
	font-size: 17px;
	border: none;
	outline: none;
	position: relative;
	background-color: inherit;
	font-family: inherit;
	padding: 0 1rem;
	float: right;
	z-index: 2;
	line-height: 46px;
	color: #333;
}

li.dropdown:last-child .dropbtn {
	margin-right: 0;
}

.w3-dropdown-content {
	background-color: #f2efef;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 9;
	margin-top: 43px;
}

.w3-dropdown-content ul {
	margin: 0;
	text-align: center;
	padding: 0;
}
.w3-dropdown-content li {
	list-style: none;
	line-height: 40px;
	border-bottom: 1px dotted #ddd;
}
.w3-dropdown-content a {
	float: none;
	color: white;
	padding: 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

#menu_nav li a:hover, .top-nav-bar a:hover, .dropdown:hover .dropbtn {
	background-color: #ffb428;
	color: #fff;
}

#menu_nav  .w3-dropdown-content a:hover {
	background-color: #f5f5f5;
	color: #000;
}

.dropdown:hover .w3-dropdown-content {
	display: block;
}

.mobile_nav {
	display: none;
}

/* ================= Hero Section ================= */
.hero {
	background: transparent;
	padding: 0 20px;
	text-align: left;
	width: 100%; /* full width */
}

/* ================= Hero Title ================= */
.hero .page_title {
	font-size: 2.5rem;
	font-weight: 600;
	margin-bottom: 20px;
	color: #1a202c;
}

/* ================= Copy + Art, two columns ================= */
.hero-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 40px;
	margin-bottom: 32px;
}

.hero-eyebrow {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #7c3aed;
	margin-bottom: 10px;
}

.hero-subtitle {
	font-size: 1.2rem;
	color: #4a5568;
	line-height: 1.5;
	margin: 0;
}

/* ================= Stacked-card art ================= */
/* The two pseudo-elements are tinted copies of the image box, nudged and
 * rotated behind it, which reads as a small stack of cards. They inherit the
 * box geometry from `inset: 0`, so they track the image at every width without
 * a second aspect-ratio declaration. */
.hero-visual {
	position: relative;
	isolation: isolate; /* keep the z-index:-1 layers above the page background */
}

.hero-visual::before,
.hero-visual::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 16px;
	z-index: -1;
}

.hero-visual::before {
	background: #ede9fe;
	transform: rotate(2.4deg) translate(14px, 12px);
}

.hero-visual::after {
	background: #fae8f2;
	transform: rotate(-1.6deg) translate(-10px, 8px);
}

/* hero.svg is 682x254 (2.69:1). Letting it fill the column puts it around
 * 560px wide on a 1200px viewport instead of the old fixed 196px. */
.hero-visual .hero-icon {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 16px 36px rgba(76, 29, 149, .14);
}

/* ================= CTA Buttons ================= */
.hero .cta-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px; /* spacing between buttons */
	clear: both; /* ensure no float interference */
}

.hero .cta-row .w3-col {
	flex: 1 1 calc(25% - 12px); /* 4 per row desktop */
	max-width: 220px;
}

/* CTA Button styling */
.hero .cta-button {
	width: 100%;
	padding: 14px 0;
	font-size: 1rem;
	font-weight: 500;
	border-radius: 6px;
	min-height: 48px;
	transition: background-color 0.3s, transform 0.2s;
}

.hero .cta-button.w3-blue {
	background-color: #007BFF;
	color: #fff;
}

.hero .cta-button.w3-blue:hover {
	background-color: #0056b3;
	transform: translateY(-2px);
}

.hero .cta-button.secondary {
	background-color: #6c757d;
}

.hero .cta-button.secondary:hover {
	background-color: #5a6268;
	transform: translateY(-2px);
}

/* ================= Responsive ================= */

/* Tablet: 2 buttons per row */
@media (max-width: 991px) {
	.hero .cta-row .w3-col {
		flex: 1 1 calc(50% - 12px);
		max-width: 180px;
	}

	.hero-content {
		gap: 28px;
	}
}

/* Mobile: stacked */
@media (max-width: 600px) {
	.hero {
		text-align: center;
		padding: 40px 16px;
	}

	.hero .page_title {
		font-size: 2rem;
	}

	.hero-content {
		grid-template-columns: minmax(0, 1fr); /* art drops under the copy */
		gap: 24px;
	}

	.hero-subtitle {
		font-size: 1rem;
	}

	/* Narrower offsets so the stack does not reach past the 16px page padding. */
	.hero-visual::before {
		transform: rotate(1.8deg) translate(8px, 7px);
	}

	.hero-visual::after {
		transform: rotate(-1.2deg) translate(-6px, 5px);
	}

	.hero .cta-row .w3-col {
		flex: 1 1 100%;
		max-width: none;
	}
}



/* ================== Tools Overview Section ================== */
.tools-overview {
	padding: 60px 20px;
	background-color: white; /* keep section background transparent */
	text-align: center;
}

/* Section Titles */
 .section_title {
	font-size: 2rem;
	font-weight: 600;
	margin-bottom: 10px;
	color: #222;
	text-align: center;
}

.tools-overview .section_subtitle {
	font-size: 1rem;
	color: #555;
	margin-bottom: 40px;
	text-align: center;
}

/* ================== Tools Grid ================== */
.tools-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* 4 columns desktop */
	gap: 24px; /* spacing between cards */
	margin: 0 auto; /* center grid */
	justify-items: center; /* center each card inside its column */
	max-width: 1200px; /* optional: limit max width */
}

/* Tool Card */
.tool-card {
	width: 100%; /* fill its grid cell */
	max-width: 260px; /* optional: limit card width */
	padding: 20px;
	border-radius: 12px;
	background-color: #f9f9f9;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (max-width: 1024px) {
	.tools-grid {
		grid-template-columns: repeat(2, 1fr); /* tablet 2 cols */
	}
}

@media (max-width: 600px) {
	.tools-grid {
		grid-template-columns: 1fr; /* mobile 1 col */
	}
}


.tool-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* Icon */
.tool-icon {
	font-size: 2.5rem;
	margin-bottom: 12px;
}

/* Tool Title */
.tool-title {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 8px;
}

/* Tool Description */
.tool-desc {
	font-size: 0.95rem;
	color: #555;
	margin-bottom: 16px;
}

/* Tool Link */
.tool-link {
	font-weight: 600;
	text-decoration: none;
	color: #007bff;
	transition: color 0.2s ease;
}

.tool-link:hover {
	color: #0056b3;
}

/* ================== Why Choose Us ================== */
.why-choose-us {
	padding: 60px 20px;
	background-color: transparent;
	text-align: center;
}

.features-list {
	list-style: none;
	padding: 0;
	margin: 40px auto 0 auto;
	max-width: 800px;
	text-align: left;
}

.features-list li {
	margin-bottom: 24px;
	font-size: 1.1rem; /* slightly bigger */
	line-height: 1.6;
	padding-left: 40px; /* space for accent */
	position: relative;
	transition: transform 0.2s ease;
}

.features-list li::before {
	content: attr(data-icon);
	position: absolute;
	left: 0;
	top: 0;
	font-size: 1.6rem; /* larger icon */
}

.features-list li strong {
	font-weight: 600;
}

.features-list li:hover {
	transform: translateX(4px); /* subtle hover effect */
	color: #0078ff;
}

.trust-stats {
	text-align: center;
	margin: 20px auto 40px auto;
	font-size: 1rem;
	color: #333;
}
.trust-stats p {
	margin: 6px 0;
}


/* Responsive: center text on mobile */
@media (max-width: 600px) {
	.features-list {
		text-align: center;
		padding-left: 0;
	}
	.features-list li::before {
		position: static;
		font-size: 1.5rem;
		display: inline-block;
		margin-right: 8px;
	}
}



#main {
	min-height: 650px;
	background: url("/site/themes/gjw/images/bg_main.jpg") repeat;
	/*
	background-image: url("/assets/themes/ntd/images/bg_page.webp");
	background-attachment: fixed;
	background-color: rgba(255, 255, 255, 0.9);
	background-blend-mode: overlay;
	background-position: 50% 50%;
	background-repeat: repeat-y;
	background-size: cover;*/
}

#hamburger {
	float: right;
	color: #ffb428;
	margin-right: 20px;
}

.term-posts-list {
	background-color: white;
}

.awards-list h1, .category .awards-list h1 p {
	text-align: center;
}

.main h2  {
	/* color: #7b441c; */
	font-size: 30px;
	margin: 0;
	text-align: center;
}

/* .main h2:first-child {
	margin-top: 70px;
} */

.announcement {
	padding: 10px 0;
	line-height: 2rem;
	text-align: left;
}

.term-title {
	padding-top: 30px;
}

/* .category .content_container p {
	text-align: left;
} */

.awards-list .term-posts-list > h3 {
	padding: 10px 0;
	font-size: 30px;
	border-bottom: 1px solid #dfdfdf;
}

.share-icon a {
	background-color:#ffb428 !important;
}
.share-icon a {
	background-color: #ffb428 !important;
}
.ss-img-icon, .truthsocial path, .truthsocial rect, .telegram .cls-4 {
	fill: white !important;
}
.ss-img-copy.ss-img-icon {
	fill: none !important;
	stroke: white !important;
}

main#main {
	position: relative;
}
.ss-one-item {
	width: 40px;
	height: 40px;
}
.ss-img-icon {
	position: absolute;
	top: 0;
	left: 0;
	padding: 7px;
}
.ss-one-item a {
	position: relative;
	width: 40px;
	height: 40px;
	display: block;
	border-bottom: 1px solid #ddd;
}

.ntdss-list {
	background-color: #ffb428;
}

.ntdss-list li {
	list-style-type: none;
}
.ntdss-menu-wrapper .ntdss-sidebar {
	position: fixed;
	right: 0;
	left: auto;
	bottom: 10px;
	z-index:10;
	margin-right: 10px;
}
.ntdss-menu-wrapper .ntdss-sidebar.ntdss-sidebar-left {
	left: 0;
	right: auto;
	margin-left: 10px;
}
.ntdss-menu-wrapper .ntdss-sidebar.ntdss-sidebar-top {
	top: 80px;
	bottom: auto;
}
.ntdss-content li, .left_col .ntdss-content li {
	display: inline-flex;
	width: auto;
	padding: 0;
}
.main_content .post_content .ntdss-content ul {
	padding-left: 0;
}
.ntdss_copy_current_url {
	position: relative;
}
.ntdss_copy_current_url .ntdss-tooltiptext {
	visibility: hidden;
	width: auto;
	background-color: #2e3138;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	padding: 1px 10px;
	position: absolute;
	z-index: 1;
	bottom: 100%;
	left: 50%;
	right: auto;
	margin-left: -60px;
	white-space: nowrap;
}
.ntdss-sidebar.ntdss-sidebar-left .ntdss_copy_current_url .ntdss-tooltiptext {
	left: calc(100% + 60px);
	right: auto;
}
.ntdss-sidebar.ntdss-sidebar-right .ntdss_copy_current_url .ntdss-tooltiptext {
	right: 100%;
	left: auto;
}
.ntdss_copy_current_url:hover .ntdss-tooltiptext {
	visibility: visible;
}
.ntdss-content.ntdss-content-left {
	text-align: left;
}
.ntdss-content.ntdss-content-right {
	text-align: right;
}
.ntdss-list {
	padding: 0;
}

.foot-link {
	line-height: 1.5em;
	color: #fff;
	font-size: 14px;
	height: 30px;
	float: none;
	padding: 4px 0 10px;
	text-align: center;
}

.foot-link a {
	color: #fff;
	padding: 0 10px;
	font-size: 14px;
}

/* 分隔線。原本是直接打在頁尾設定裡的「|」文字節點，現在那一列由
 * [gjw_menu] 產生，只有 <a>，所以分隔線改在這裡畫。
 * 錨點有 padding: 0 10px，Cookie 設定那顆 button 沒有，位移因此不同。 */
.foot-link a + a::before {
	content: "|";
	color: rgba(255, 255, 255, 0.45);
	margin-left: -10px;
	margin-right: 10px;
}

.foot-link a + .gjw-consent-link::before {
	content: "|";
	color: rgba(255, 255, 255, 0.45);
	margin-right: 10px;
	/* inline-block 讓按鈕自己的底線不要跟著畫過分隔線 */
	display: inline-block;
	text-decoration: none;
}

/* Sits inside .footer-nav, so it inherits the single black band rather
 * than painting a second, lighter block on top of it. */
.footer {
	float: none;
	background: transparent;
	padding: 20px;
	text-align: center;
	overflow: hidden;
}

.footer .s12 {
	color: rgb(161, 164, 170);
	font-size: 13px;
	line-height: 30px;
}

/* Full-bleed charcoal band. .w3-container only adds 1rem of horizontal
 * padding, so the background still reaches both viewport edges. */
.footer-nav {
	background-color: #22252a;
	color: #ddd;
}
.footer-nav h4 {
	color: #fff;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 18px;
	margin-bottom: 28px;
}
.footer-nav hr {
	border: none;
	border-top: 2px solid #bbb;
	width: 60px;
	margin: 8px 0 25px 0;
}
.footer-nav a {
	color: #aaa;
	text-decoration: none;
}
.footer-nav a:hover {
	color: rgb(255, 180, 40);
}
.footer-nav p {
	margin: 16px 0;
	color: #aaa;
	font-size: 16px;
}

.post-title {
	padding: 30px 0 5px;
}

.divider {
	height: 10px;
	border-bottom: 1px dotted #dfdfdf;
}
.single-post .content {
	font-size: 20px;
	padding: 0 18px;
}

.single-post .content figure {
	max-width: 100% !important;
	margin: auto;
}

.single-post .content figure figcaption {
	text-align: center;
}

.single-post .content figure img {
	max-width: 100% !important;

}

.single-post .content p {
	padding: 12px 0;
	text-align: left;
	line-height: 2rem;
}

.single-post .content img {
	margin: 12px 0 25px;
}

.single-post .content h3 {
	font-weight: 700;
}

.featured_caption {
	color: #cc3333;
	line-height: 150%;
	padding: 8px 0;
}

.author-metas .gjw-creator-thumbnail {
	width: 60px;
}

.author-metas span.name {
	line-height: 60px;
	font-size: 18px;
}

.reg_button_wrap {
	margin: 15px 0;
}

.reg_button_wrap:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

/* for home page top featured img - video*/
#player-container {
	display: none;
}

.top_bar {
	margin-top: 10px;
}

.nav .top_bar {
	padding-top: 10px;
	background-color: unset;
}

.top_bar .logo {
	display: inline-block;
	float: left;
	width: 110px;
	margin-right: 10px;
	margin-left: 10px;
}

 .home .logo {
	margin: 20px 20px 20px !important;
	float: left;
	padding-top: 0;
	display: block;
}

.top_bar > ul {
	display: inline-block;
	float: right;
	text-align: right;
	padding: 0;
	margin: 0;
	width: calc(100% - 120px);
}

.top_bar .logo img {
	width: 100%;
}

#language {
	font-size: 14px;
}

#language span {
	padding-left: 10px;
}

#language a {
	color: white;
}

#menu_nav {
	padding: 5px 0 0 0;
}

#menu_nav a {
	color: #333;
	font-family: inherit;
	line-height: 43px;
}

#top_featured_video {
	width: 100%;
	position: relative;
	height: 100vh;  /* Full viewport height */
	margin-bottom: 15px;
	min-height: auto;
	max-width: 100%;
	padding-top: 0;
	line-height: 1;
	z-index: 1;
}

#top_featured_video .overlay_bottom {
	position: absolute;
	left: 0;
	top: 94%;
	margin-bottom: -3px;
	padding-top: 7%;
	width: 100%;
	height: unset;
	z-index: 3;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 7.97%, #f5f3f1 82.34%);
	opacity: 1;
	border-radius: 0;
}
.top_block_container {
	position: relative;
	padding-top: 55%;
	overflow: hidden;
}

#top_featured_video picture {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 2;
}

#top_featured_video picture img {
	width: 100%;
	height: auto;
	transition: opacity 0.8s ease;
}

#top_featured_video .video_fit_container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}

#intro {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(180deg, rgba(48, 34, 21, 0.8) 0%, rgba(48, 35, 21, 0) 100%);
}
.center_wrap {
	width: 100%;
	position: relative;
	max-width: 1100px;
	text-align: center;
}

#top_featured_video .video-js {
	padding-top: 46.1%;
}

#top_featured_video .top_featured {
	position: absolute;
	left: 0;
	bottom: 29%;
	width: 100%;
	z-index: 5;
	color: #fff;
	text-align: center;
	transition: bottom 1s;
}

#top_featured_video.playing .top_featured {
	bottom: 7%;
}

#home_content {
	padding-top: 30px;
}

.video-js {
	width: 100%;
}
#player-container {
	width: 100%;
	height: 100vh;
	object-fit: cover;
}

#top_picture {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#menu_nav li, #language li {
	display: inline-block;
	padding: 0 5px;
	list-style: none;
}

#menu_nav .w3-dropdown-content li {
	display: block;
	padding: 0;
}

.dropbtn:hover .w3-dropdown-content {
	display: block;
}

.fit-video-wrap {
	position: relative;
	width: 100%;
	height: auto;
	display: block;
	margin: 20px 0;
}
.fit-video-wrap video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ntd-brownbar {
	background:#b68036; 
	color:#fff; 
	padding:14px 20px; 
	margin:30px 0; 
}

.ntd-section-content {
	padding: 0 95px;
}

.ntd-section-content li {
	text-align: left;
}

.ntd-section-content figure {
	margin: 40px 0;
}

.ntd-section-content figure img {
	max-width: 500px;
}

.ntd-section-title {
	font-family: "Cinzel";
	font-size: 30px;
	padding: 0 75px;
}

h1.ntd-section-title,
h2.ntd-section-title {
	padding: 50px 95px 30px;
	line-height: 1.25em;
}

.ntd-container {
	max-width: 980px;
	margin: 20px 0;
	padding: 10px 0;
}

.ntd-btn {
	font-weight: 600;
	text-align: center;
	color: #b68036;
	display: block;
	width: fit-content;
	margin: 5px auto;
	padding: 5px 15px;
	border: 3px solid #b68036;
}

.ntd-btn:hover {
	color: white;
	background-color: #b68036;
}

.ntd-posts-list article {
	padding: 30px 100px;
}

.ntd-posts-list article h2 {
	font-size: 20px;
	margin: 20px 0;
}

.ntd-sep {
	margin-bottom: 20px;
}

.ntd-featured-block .video_fit_container iframe {
	width: 100%;
	max-width: 671px;
	min-width: 400px;
	height: 377px;
}

.ntd-post-content {
	padding-bottom: 40px;
	margin-bottom: 20px;
	text-align: left;
	padding: 0 100px 50px;
}

table tr {
	border-bottom: 1px solid #eee;
}

table td {
    text-align: left;
    vertical-align: middle;
    padding: 8px 12px;
}

.ntd-img-caption {
	font-style: italic;
	font-size: 0.8em;
	text-align: center;
	padding-bottom: 1em;
	margin-bottom: 1em;
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon.
This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media only screen and (max-width: 650px) {

	/* Was `white-space: nowrap; overflow-x: scroll`, which pushed Privacy,
	 * Terms and Cookie Settings off the right edge into a scroll the footer
	 * gives no visual hint of — on a 375px screen the last two were simply
	 * invisible. Wrapping onto a second line shows all of them. The height
	 * override is needed because .foot-link is pinned to 30px. */
	.foot-link {
		white-space: normal;
		height: auto;
	}

	.ss-one-item.share-icon {
		float: left;
	}
	.ntdss-menu-wrapper .ntdss-sidebar.ntdss-sidebar-top {
		top: auto;
		bottom: 0.5rem;
	}
	.ntdss-content {
		display: none;
	}

	#top_featured_video .overlay_bottom {
		display: none;
	}

	.ntd-section-content {
		padding: 0 40px;
	}

	.ntd-post-content {
		padding: 0 40px 40px;
	}

	h2.ntd-section-title {
		padding: 50px 45px 30px;
	}

	.ntd-section-title {
		padding: 0 20px;
	}

	.ntd-section-content figure img {
		max-width: 350px;
	}
	.ntd-posts-list article {
		padding: 30px 40px;
	}
}

@media only screen and (max-width:640px) {
	.hero {
		text-align: center;
		margin: 2px auto;
	}
}

@media only screen and (min-width: 768px) {  /* desktop*/
	.block-posts-list img {
		width: initial;
	}

	.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}

	.term-posts-list li {
		padding-top: 0;
	}

	.term-posts-list li .img, .awards-list .term-posts-list li:first-child .img {
		width: 25%;
		float: left;
		display: inline-block;
	}

	.awards-list .term-posts-list li:first-child .img {
		max-width: 300px;
	}

	.term-posts-list li .text, .awards-list .term-posts-list li:first-child .text {
		width: 70%;
		float: right;
		display: inline-block;
		text-align: left;
	}

	.term-posts-list li:first-child .img {
		width: 48%;
		float: left;
	}

	.term-posts-list li:first-child .text {
		width: 48%;
		float: right;
	}

	.en .single-post .title {
		padding: 0 100px;
	}
}

@media only screen and (max-width:1150px) {
	#menu_nav li {
		padding: 0 3px;
	}
	.w3-bar .w3-bar-item {
		padding: 0 10px;
	}
	.dropdown .dropbtn {
		padding: 0 10px;
	}
}

@media only screen and (max-width:1000px) {
	#menu_nav, .contest_nav {
		display: none!important;
	}

	#intro .top_bar {
		border-bottom: none;
	}

	ul#language {
		margin-top: 10px;
		text-align:unset;
		width: calc(100% - 175px);
	}

	#menu_nav {
		list-style: none;
		margin: 0;
		padding: 0;
		width: 100%;
		background: #ffb428;
		text-align: center;
	}

	#menu_nav > li {
		list-style: none;
		width: 100%;
		float: left;
		margin-right: 1%;
		line-height: 30px;
		border-bottom: 1px dotted #ddd;
		padding: 6px 0;
	}

	.top_block_container {
		padding-top: 230vw;
		overflow: hidden;
	}


	.top-nav-bar {
		display: none !important;
	}

	#hamburger {
		display: inline-block!important;
	}
	.hamburger {
		display: inline-block!important;
		font-size: 38px;
		color: #ffb428;
		box-sizing: border-box;
		text-align: left;
		z-index: 1;
		line-height: 40px;
		padding: 0;
		float: right;
		margin-right: 15px;
		margin-top: 10px;
	}
	.home .hamburger {
		margin: 3px 0 0 10px;
		float: left;
	}

	.dropdown .dropbtn {
		float: left;
		margin-left: 26px;
	}

	.w3-dropdown-content {
		background: #ffb428;
	}
	.dropdown .w3-dropdown-content ul {
		padding-left: 50px;
	}
	.w3-dropdown-content li {
		border-bottom: 1px dotted #ddd;
	}

	.hamburger.active span:nth-child(1) {
		transform: translateY(6px) rotate(-45deg);
	}
	.hamburger.active span:nth-child(2){
		transform: translateX(-60px);
		opacity: 0;
	}
	.hamburger.active span:nth-child(3) {
		transform: translateY(-8px) rotate(45deg);
	}

	#mobile_nav.active,
	#mobile_nav .active {
		display: block!important;
	}

	.group ul {
		list-style: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}

	.group li {
		list-style: none;
		width: 100%;
		float: left;
		margin-right: 1%;
		line-height: 60px;
		border-bottom: 1px dotted #ddd;
		padding: 6px 0;
		text-align: left;
		padding: 0 10%;
	}

	.group li a {
		color: #333;
	}

	.mobile_nav {
		cursor: auto;
		text-align: center;
		background-color: rgb(249, 249, 249);
		width: 100%;
		padding: 0;
		clear: both;
		width: 100vw;
		margin-left: -8px;
		margin-right: -8px;
		box-sizing: border-box;
	}

	.mobile_nav div.item {
		line-height: 50px;
		color: #333;
		font-size: 16px;
		width: 100%;
		text-align: left;
		padding: 0 10%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px dotted #ddd;
		line-height: 60px;
	}

	#mobile_nav .group .parent_item {
		clear: both;
	}

	#mobile_nav .parent_item > .item::after {
		content: '⌄';
		font-size: 24px;
		display: inline-block;
	}

	#mobile_nav .parent_item .sub_items {
		display: none;
	}

	#mobile_nav .parent_item .sub_items li::before {
		content: '- ';
	}
}

/* ads css*/
/* Ads container for a 90px horizontal banner */
.ads_h90 {
	width: 100%;           /* full width of parent/container */
	max-width: 970px;      /* standard leaderboard width */
	height: 90px;          /* standard height */
	margin: 0 auto;        /* center horizontally */
	display: block;
	position: relative;    /* for absolute-positioned content inside if needed */
	text-align: center;    /* center ad content */
	line-height: 90px;     /* vertically center text/fallback */
	overflow: hidden;      /* hide overflow if any */
}

#hero_ads.ads_h90 {
	margin-bottom: 15px;
}

@media (max-width: 1200px) {
	.ads_h90 {
		max-width: 728px;  /* fallback for narrower desktops */
	}
}

@media (max-width: 768px) {
	.ads_h90 {
		max-width: 100%;
		height: 60px;     /* mobile-friendly height */
		line-height: 60px;
	}
}

/* #head_ads sits beside the logo at `width: calc(100% - 290px)`, which is fine
 * until the viewport is narrower than the 290px the logo is allowed — at 375px
 * it resolves to 85px. The tagline then wrapped inside an 85px box with
 * overflow:hidden, so the header read just "Free," and the float pushed the
 * hamburger onto a row of its own with nothing to its left.
 *
 * 1000px is where #hamburger appears, so the breakpoints stay in step. The
 * slot keeps its place in the flow rather than being hidden: the tagline is
 * only duplicated in h1.page_title on the home page, and this is where a
 * mobile banner would go once ads are placed.
 *
 * float:none needs !important — the element carries W3.CSS's .w3-right, which
 * is `float: right !important`. Height goes auto because the id rule above
 * pins 90px, and a two-line tagline would be clipped by .ads_h90's
 * overflow:hidden. */
/* Phone header: logo and hamburger share the first row, tagline goes below.
 *
 * The three pieces live in two different parents — a.logo and #head_ads inside
 * .nav_wrap, #hamburger inside #head_nav, which is .nav_wrap's sibling — so
 * flex on .header_wrap alone could not interleave them, and the hamburger ended
 * up alone on a third row with empty space to its left.
 *
 * `display: contents` on .nav_wrap drops its box without touching the markup,
 * which promotes the logo and the tagline to direct children of .header_wrap
 * and lets one `order` sequence arrange all four. That matters because the
 * header HTML is not in the theme at all — it is stored in ut168_termmeta in
 * four variants (homepage/general x en/rest), so moving an element in the DOM
 * would mean four database edits.
 *
 * margin-left:auto on #head_nav is what pushes the hamburger to the right; it
 * holds the collapsed #menu_nav too, which is display:none at this width. */
@media (max-width: 1000px) {
	.header_wrap {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.nav_wrap  { display: contents; }
	.lang_nav  { order: 1; flex: 0 0 100%; }
	.logo      { order: 2; }
	#head_nav  { order: 3; width: auto; margin-left: auto; }
	#head_ads  { order: 4; flex: 0 0 100%; }

	/* #head_nav carries the nav band's top and bottom hairlines. They make
	 * sense when it spans the page; shrunk to a button beside the logo they
	 * drew a little box around the hamburger. */
	#head_nav {
		border-top: 0;
		border-bottom: 0;
	}
}

/* .nav_wrap is `height: 130px; line-height: 130px` so the logo sits vertically
 * centred on a desktop. Once #head_ads drops below the logo instead of beside
 * it (rule below), the row needs more than 130px — and with overflow visible
 * the tagline spilled out of the box and #head_nav, which starts where
 * .nav_wrap's *declared* height ends, painted the hamburger straight over it.
 * line-height has to go too, or it would inherit 130px into the tagline. */
@media (max-width: 1000px) {
	.nav_wrap {
		height: auto;
		line-height: normal;
	}
}

@media (max-width: 1000px) {
	#head_ads {
		width: 100%;
		float: none !important;
		clear: both;
		height: auto;
		min-height: 0;
		line-height: 1.5;
		padding: 6px 16px;
		margin: 4px 0 10px !important;
		font-size: 1rem;
	}
}

/* ══════════════════════════════════════════════════════════════════
 * Cookie consent — banner, settings modal, footer link
 * Markup is built by js/gjw-consent.js; the state is resolved earlier by
 * the inline bootstrap in inc/consent.php.
 * ══════════════════════════════════════════════════════════════════ */

/* ── Banner ───────────────────────────────────────────────────────
 * Bottom sheet rather than a full-screen interstitial: the tools are the
 * reason people are here, and blocking the page to demand a cookie answer
 * would be worse for the visitor than for us. */
.gjw-consent-banner {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 10000;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	background: #fff;
	border-top: 2px solid #ffb428;
	box-shadow: 0 -2px 12px rgba(0, 0, 0, .12);
	font-size: 13px;
	line-height: 1.6;
	color: #333;
}
.gjw-consent-banner-copy { flex: 1 1 420px; min-width: 0; }
.gjw-consent-banner-title {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 600;
	color: #222;
}
.gjw-consent-banner-text { margin: 0; }
.gjw-consent-policy-link { text-decoration: underline; color: #0a66c2; }

.gjw-consent-banner-actions {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* ── Buttons ──────────────────────────────────────────────────────
 * Reject and Accept share a size and weight on purpose. Making the reject
 * path visibly weaker than the accept path is a dark pattern and is
 * explicitly non-compliant under GDPR. */
.gjw-consent-btn {
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	font-size: 13px;
	line-height: 1;
	padding: 10px 18px;
	border-radius: 3px;
	border: 1px solid transparent;
	cursor: pointer;
	white-space: nowrap;
}
.gjw-consent-btn-primary {
	background: #ffb428;
	border-color: #e8a01c;
	color: #222;
	font-weight: 600;
}
.gjw-consent-btn-primary:hover { background: #f5a916; }
.gjw-consent-btn-secondary {
	background: #fff;
	border-color: #ccc;
	color: #333;
}
.gjw-consent-btn-secondary:hover { background: #f5f5f5; }
.gjw-consent-btn-link {
	background: none;
	border-color: transparent;
	color: #666;
	padding: 10px 8px;
	text-decoration: underline;
}
.gjw-consent-btn-link:hover { color: #222; }
.gjw-consent-btn:focus-visible { outline: 2px solid #0a66c2; outline-offset: 2px; }

/* ── Settings modal ───────────────────────────────────────────────── */
.gjw-consent-overlay {
	position: fixed;
	inset: 0;
	z-index: 10010;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, .5);
}
.gjw-consent-modal {
	width: 100%;
	max-width: 560px;
	max-height: 86vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
	font-size: 13px;
	line-height: 1.6;
	color: #333;
}
.gjw-consent-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid #eee;
}
.gjw-consent-modal-title { margin: 0; font-size: 17px; font-weight: 600; color: #222; }
.gjw-consent-close {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	font-size: 24px;
	line-height: 1;
	padding: 0 4px;
	color: #888;
	cursor: pointer;
}
.gjw-consent-close:hover { color: #222; }
.gjw-consent-modal-intro { margin: 0; padding: 16px 20px 0; color: #555; }

.gjw-consent-rows { padding: 8px 20px 0; }
.gjw-consent-row { padding: 14px 0; border-bottom: 1px solid #f0f0f0; }
.gjw-consent-row:last-child { border-bottom: 0; }
.gjw-consent-row-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.gjw-consent-row-label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-weight: 600;
	color: #222;
}
.gjw-consent-row-label input[disabled] { cursor: default; }
.gjw-consent-toggle { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; }
.gjw-consent-row-name { font-size: 14px; }
.gjw-consent-row-always {
	flex: 0 0 auto;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #8a8a8a;
}
.gjw-consent-row-desc { margin: 6px 0 0 26px; color: #666; }

.gjw-consent-modal-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	padding: 16px 20px;
	border-top: 1px solid #eee;
	position: sticky;
	bottom: 0;
	background: #fff;
}

/* Keep the page itself from scrolling behind the modal. */
.gjw-consent-modal-open, .gjw-consent-modal-open body { overflow: hidden; }

/* ── Footer "Cookie Settings" link ────────────────────────────────
 * Rendered hidden by the shortcode and revealed by JS, so a no-JS visitor
 * is never shown a control that cannot open anything. */
.gjw-consent-link {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-decoration: underline;
}
.gjw-consent-link[hidden] { display: none; }

/* ── Mobile ───────────────────────────────────────────────────────── */
@media (max-width: 680px) {
	.gjw-consent-banner { padding: 14px 16px; gap: 12px; }
	.gjw-consent-banner-actions { width: 100%; }
	/* Full-width stacked buttons, reject and accept still equal weight. */
	.gjw-consent-banner-actions .gjw-consent-btn-secondary,
	.gjw-consent-banner-actions .gjw-consent-btn-primary { flex: 1 1 140px; }
	.gjw-consent-banner-actions .gjw-consent-btn-link { order: 3; width: 100%; }
	.gjw-consent-overlay { padding: 0; }
	.gjw-consent-modal { max-width: none; max-height: 100vh; border-radius: 0; }
	.gjw-consent-modal-foot .gjw-consent-btn { flex: 1 1 100px; }
}