/****************/
/***** 2023 *****/
/****************/

.logo	{width: 300px;}

.article-element 			{display: none; }
.article-element.active 	{display: block; }

.article-filter 			{cursor: pointer;}
.article-filter:hover 		{opacity: .75; }

#tvn-content 									{transition: background 1s; }

#tvn-content[data-article-tag='discourse'] 		{background: #FFFBF0; }

#tvn-content[data-article-tag='definingMoment'] {background: #FFFFFF; }

.tab-1      	{background: #FAFAFA; box-shadow:inset 0px 5px 5px rgba(0,0,0,0.2);}
.tab-1.active	{background: #FFF9F5; box-shadow: 5px 5px 5px rgba(0,0,0,0.2); position: relative; z-index: 5}

.tab-2      	{background: #FAFAFA; box-shadow:inset 0px 5px 5px rgba(0,0,0,0.2);}
.tab-2.active	{background: #FFFBF0; box-shadow: 5px 5px 5px rgba(0,0,0,0.2);  position: relative; z-index: 5}

.tab-3			{background: #FAFAFA; box-shadow:inset 0px 5px 5px rgba(0,0,0,0.2);}
.tab-3.active	{box-shadow: -5px 5px 5px rgba(0,0,0,0.2)}


.related-articles .panel-container-image	{height: auto !important; width: 40% !important; background-size: contain !important; background-position: bottom center !important}

/* TABS */
.tabs	{display: flex;}
.tab	{width: 50%; text-align: center; font-size: 50px; font-family: 'ZapfHumnst BT', serif; display: inline-flex; justify-content: center; padding: 100px 20px;}

/* PANELS */
.panel-2023 .panel-container-outer				{background-color: transparent;}
.panel-2023 .panel-container					{background-color: #000000;  background-size: cover; background-position: center; justify-content: center; align-items: center;}
.panel-2023 .panel-container:before,
.panel-2023 .panel-container:after				{display: none}
.panel-2023 .panel-container-outer .btn			{background-color: transparent; border:2px solid #ffffff; color: #ffffff}
.panel-2023 .panel-container-text				{width:40%; margin: 0}
.panel-2023 .panel-container-text h2 svg		{top: -14px; left: -80px;}
.panel-2023 .panel-container-image				{position: relative; height: auto; background-size: cover; margin-top: -30px;}

.panel-2023 .panel-container:hover .panel-container-image	{transform: scale(1.02)}

.panel-2023.coll-1:nth-child(even) .panel-container-text	{margin: 0; padding-left: 30px;}


/*****************/
/* ARTICLE PAGE */
/****************/
.article-2023 											{text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.article-2023 .content-header .panel-container-outer	{background-size: cover; background-image: none !important; background-repeat: no-repeat; overflow: hidden; position: relative}
.article-2023 .content-header .panel-container:before,
.article-2023 .content-header .panel-container:after	{display: none}
.article-2023 .content-header .panel-container-outer:before	{display: block; position: absolute; left: 0; top:0; width: 100%; height: 100%; background-size: cover; opacity: 0; content: ''}
.article-2023 .content-header .panel-container			{background-image: none !important; background-color: transparent !important; width: 960px; padding: 0 20px; margin: auto;}
.article-2023 .content-header .panel-container-image	{width: 40%; height: calc(100% - 20px); margin-top: 50px; background-position: bottom left}
.article-2023 .content-header .panel-container-text		{padding-right: 40px; margin-left: 0}
.article-2023 .article-content							{max-width: 100%; padding: 0}
.article-2023 .article-inner							{width:960px; padding: 0 20px; margin: auto;}
.article-2023 h2										{font-size: 45px; margin-bottom: 0.5em}
.article-2023 .blockquote-container						{width:520px; min-height: 300px; display: flex; align-items: center; max-width: 100%; padding: 50px 20px 50px 100px; margin: 15px -60px 40px 60px; background-repeat: no-repeat; background-size: contain; background-position: bottom left}
.article-2023 .blockquote-container.float-right			{float: right;}
.article-2023 .blockquote-container.float-left			{float: left; margin: 15px 60px 40px -60px;}
.article-2023 blockquote								{padding: 0; width: auto; margin: 0;}
.article-2023 blockquote p								{font-size: 32px !important; margin-bottom: 0}
.article-2023 blockquote svg							{width: 50px; height: 50px; left: -70px;}
.article-2023 blockquote svg .cls-1						{stroke:#000000}
.article-2023 blockquote svg .cls-2						{fill:#000000}

.section-two-col						{display: flex; justify-content: space-between; margin-bottom: 40px;}
.section-two-col .coll					{width:50%}
.section-two-col .coll.coll-left-minus	{width:calc(50% - 50px);}
.section-two-col .coll p:last-child		{margin-bottom: 0}

.section-two-col .blockquote-container	{margin-left: -60px;}

.audio-container.float-right	{float: right; margin: 40px -60px 50px 50px;}
.audio-container.float-left		{float: left; margin: 40px 50px 50px -60px;}

.audio-container.float-right,	
.audio-container.float-left		{width: 50%;}



audio					{width: 100%; margin-top: 10px;}
.audio-container		{position: relative; z-index: 20}
.audio-container svg	{position: absolute; left: 40%; top:50%; transform: translateY(-50%); z-index: 1; opacity: 0.5}
.audio-container img	{width: 55%; position: relative; z-index: 2}
.audio-container button	{background: none; position: relative; font-size: 0; text-align: left;}

.colour-section			{margin:70px 0 0; padding: 70px 0; overflow: hidden}
.white-section			{padding: 70px 0}

.pattern				{position: relative; overflow: hidden}
.pattern .article-inner	{position: relative; z-index: 2}
.pattern:before			{position: absolute; right: 0; top:0; width: 50%; height: 100%; z-index: 0; content: ''; background-size: cover; background-position: right; opacity: 0.1}	

.article-2023 .button-container .btn	{background-color:#ffffff; border:2px solid #000000; color: #000000}

/* DENICA HOME */
.denica .panel-container									{background-color: #FB8372; background-image: url(/_uploads/page-images/Denica-Riadini-Flesch-pattern.png);}	
.listing .denica .panel-container .panel-container-image	{width: 447px; height: 586px}

/* DENICA ARTICLE */
.denica .content-header .panel-container-outer		{background-color: #FB8372; }
.related-articles .panel-container.denica .btn		{background-color: #FB8372;}

.denica .article-2023 .content-header .panel-container-outer:before	{background-image: url(/_uploads/page-images/Denica-Riadini-Flesch-pattern.png);}

.denica .blockquote-container		{background-image: url(/_uploads/page-images/Denica-Riadini-Flesch-pattern-2.png);}
.denica .blockquote-container		{background-image: url(/_uploads/page-images/Denica-Riadini-Flesch-pattern-3.png);}
.denica .content-header h1			{font-size: 55px;}
.denica .content-header p			{width: 450px; max-width: 100%;}
.denica .colour-section				{background-color:rgba(251,131,114,0.1);}

.denica .pattern:before					{background-image: url(/_uploads/page-images/Denica-Riadini-Flesch-pattern-4.png)}
.denica .button-container .btn			{border:2px solid #FB8372;}
.denica .button-container .btn:hover	{box-shadow: 0 0 0 3px #FB8372;}

/* BEA HOME */
.bea .panel-container									{background-color: #D0C781; background-image: url(/_uploads/page-images/Bea-Bakshi-pattern.png);}	
.listing .bea .panel-container .panel-container-image	{width: 548px; height: 575px}
.bea .content-header .panel-container-outer				{background-color: #D0C781; background-image: url(/_uploads/page-images/Bea-Bakshi-pattern.png);; background-size: cover}
.related-articles .panel-container.bea .btn				{background-color: #D0C781;}

.bea .article-2023 .content-header .panel-container-outer:before	{background-image: url(/_uploads/page-images/Bea-Bakshi-pattern.png); transform: scale(1.4); transform-origin: center; animation:1.2s popmiddle 0.5s forwards}

.bea  .audio-container.reveal svg #Path_474,
.bea  .audio-container.reveal svg #Path_472,
.bea  .audio-container.reveal svg #Path_473			{fill:#D0C781}

.bea .colour-section				{background-color:rgba(208,199,129,0.1);}

.bea .blockquote-container	{background-image: url(/_uploads/page-images/Bea-Bakshi-pattern-3.png); opacity: 0.08}

.bea .colour-section .blockquote-container	{background-image: url(/_uploads/page-images/Bea-Bakshi-pattern-2.png);}

.bea .pattern:before	{background-image:url(/_uploads/page-images/Bea-Bakshi-pattern-4.png); background-position: left;}

.bea .button-container .btn			{border:2px solid #D0C781;}
.bea .button-container .btn:hover	{box-shadow: 0 0 0 3px #D0C781;}

/* RINALDO */
.rinaldo .panel-container							{background-color: #F59968; background-image: url(/_uploads/page-images/Rinaldo-Brutoco-pattern.png);}	
.listing .rinaldo .panel-container .panel-container-image	{width: 560px; height: 589px}

.rinaldo .content-header .panel-container-outer		{background-color: #F59968; background-image: url(/_uploads/page-images/Rinaldo-Brutoco-pattern.png); background-size: cover}

.related-articles .panel-container.rinaldo .btn	{background-color: #F59968;}

.rinaldo .article-2023 .content-header .panel-container-outer:before	{background-image: url(/_uploads/page-images/Rinaldo-Brutoco-pattern.png);}

.rinaldo .colour-section				{background-color:rgba(245,153,104,0.1);}

.rinaldo .blockquote-container			{background-image: url(/_uploads/page-images/Rinaldo-Brutoco-pattern-3.png);}

.rinaldo  .audio-container.reveal svg #Path_474,
.rinaldo  .audio-container.reveal svg #Path_472,
.rinaldo  .audio-container.reveal svg #Path_473			{fill:#F59968}

.rinaldo .button-container .btn			{border:2px solid #F59968;}
.rinaldo .button-container .btn:hover	{box-shadow: 0 0 0 3px #F59968;}

.rinaldo .pattern:before	{background-image:url(/_uploads/page-images/Rinaldo-Brutoco-pattern-4.png); background-position: left;}

/* YISHAN	 */
.yishan .panel-container										{background-color: #512A44; background-image: url(/_uploads/page-images/Yishan-Wong-pattern.png);}	
.listing .yishan .panel-container .panel-container-image		{width: 675px; height: 574px}

.yishan .content-header .panel-container-outer		{background-color: #512A44; background-image: url(/_uploads/page-images/Yishan-Wong-pattern.png); background-size: cover;}	

.related-articles .panel-container.yishan .btn		{background-color: #512A44;}

.yishan .article-2023 .content-header .panel-container-outer:before	{background-image: url(/_uploads/page-images/Yishan-Wong-pattern.png);}

.yishan .blockquote-container			{background-image: url(/_uploads/page-images/Yishan-Wong-pattern-3.png);}

.yishan .colour-section					{background-color: rgba(81,42,68,0.08);}

.yishan .colour-section .blockquote-container	{background-image: url(/_uploads/page-images/Yishan-Wong-pattern-2.png)}

.yishan .pattern:before	{background-image:url(/_uploads/page-images/Yishan-Wong-pattern-4.png); background-position: left top; background-repeat: no-repeat; opacity: 0.04 !important; background-size: contain;}

.yishan  .audio-container.reveal svg #Path_474,
.yishan  .audio-container.reveal svg #Path_472,
.yishan  .audio-container.reveal svg #Path_473			{fill:#512A44}

.yishan .button-container .btn			{border:2px solid #512A44;}
.yishan .button-container .btn:hover	{box-shadow: 0 0 0 3px #512A44;}

/* KATHY */
.kathy .panel-container								{background-color: #ED417A; background-image: url(/_uploads/page-images/Kathy-Matsui-pattern.png);}	
.listing .kathy .panel-container .panel-container-image		{width: 450px; height: 574px;}

.kathy .content-header .panel-container-outer		{background-color: #ED417A; background-image: url(/_uploads/page-images/Kathy-Matsui-pattern.png); background-size: cover}	

.related-articles .panel-container.kathy .btn		{background-color: #ED417A;}

.kathy .article-2023 .content-header .panel-container-outer:before	{background-image: url(/_uploads/page-images/Kathy-Matsui-pattern.png); transform: scale(1.4); transform-origin: center; animation:1.2s popmiddle 0.5s forwards}

.kathy .blockquote-container			{background-image: url(/_uploads/page-images/Kathy-Matsui-pattern-3.png);}

.kathy .colour-section					{background-color: rgba(237,65,122,0.08);}

.kathy .colour-section .blockquote-container	{background-image: url(/_uploads/page-images/Kathy-Matsui-pattern-2.png)}

.kathy  .audio-container.reveal svg #Path_474,
.kathy  .audio-container.reveal svg #Path_472,
.kathy  .audio-container.reveal svg #Path_473			{fill:#ED417A}

.kathy .button-container .btn			{border:2px solid #ED417A;}
.kathy .button-container .btn:hover	{box-shadow: 0 0 0 3px #ED417A;}

.kathy .pattern:before	{background-image:url(/_uploads/page-images/Kathy-Matsui-pattern-4.png); background-position: left top; background-repeat: no-repeat; opacity: 0.04 !important; background-size: contain;}

/* HOWARDS */
.howards .panel-container									{background-color: #F5C745; background-image: url(/_uploads/page-images/The-Howards-pattern.png); min-height: 454px;}	
.listing .howards .panel-container .panel-container-image	{width: 700px; height: 445px; align-self: flex-end}

.howards .content-header .panel-container-outer		{background-color: #F5C745; background-image: url(/_uploads/page-images/The-Howards-pattern.png); background-size: cover;}	

.related-articles .panel-container.howards .btn		{background-color: #F5C745;}

.howards .related-articles .panel-container			{min-height: unset}

.howards .article-2023 .content-header .panel-container-outer:before	{background-image: url(/_uploads/page-images/The-Howards-pattern.png);}

.howards .article-2023 .content-header .panel-container-image		{width: 60%; right: -130px;}

.howards .blockquote-container			{background-image: url(/_uploads/page-images/The-Howards-pattern-3.png);}

.howards .colour-section					{background-color: rgba(245,199,69,0.1);}

.howards  .audio-container.reveal svg #Path_474,
.howards  .audio-container.reveal svg #Path_472,
.howards  .audio-container.reveal svg #Path_473			{fill:#F5C745}

.howards .audio-container img	{width: 70%;}
.howards .audio-container svg	{left: auto; right: 0; top:40%; width: 220px; max-width: 100%;}

.howards .colour-section .blockquote-container	{background-image: url(/_uploads/page-images/The-Howards-pattern-2.png)}

.howards .pattern:before	{background-image:url(/_uploads/page-images/The-Howards-pattern-4.png); background-position: left top; background-repeat: no-repeat; opacity: 0.1 !important; background-size: contain;}

.howards .button-container .btn			{border:2px solid #F5C745;}
.howards .button-container .btn:hover	{box-shadow: 0 0 0 3px #F5C745;}

/*** ANIMATIONS ***/

.article-2023 .content-header .panel-container-image	{animation: 1s popup 0.25s forwards ease-out; transform: translateY(100px) scale(1.1); transform-origin: bottom center}

@keyframes popup {
	
	0% 		{transform: translateY(100px) scale(1.1)}
	100% 	{transform: translateY(0px) scale(1)}
	
}

.article-2023 .panel-container-text h1	{animation: 0.5s popin 0.25s forwards ease-out; opacity: 0}
.article-2023 .panel-container-text h2	{animation: 0.5s popin 0.45s forwards ease-out; opacity: 0}
.article-2023 .panel-container-text p		{animation: 0.5s popin 0.65s forwards ease-out; opacity: 0}

@keyframes popin {
	
	0% 		{transform: translateY(-20px); opacity: 0;}
	100% 	{transform: translateY(0px); opacity: 1;}
	
}

.article-2023 .content-header .panel-container-outer:before {animation: 1s fader 0.5s forwards ease-out; transform: translateX(20%); opacity: 0}

@keyframes fader {
	
	0% 		{opacity: 0; transform: translateX(20%);}
	100% 	{opacity: 1; transform: translateX(0%);}
	
}

@keyframes popmiddle {
	
	0% 		{opacity: 0; transform: scale(1.5);}
	100% 	{opacity: 1; transform: scale(1);}
	
}


/* SLIDING IN ANIMATIONS */


.audio-container.reveal				{transform: translateX(-50px); transition: 1s ease-out 0.25s}
.audio-container.reveal.active		{transform: translateX(0); opacity: 1;}

.audio-container.reveal svg #Path_474			{opacity: 0; transition: 1s ease-out 0.5s}
.audio-container.reveal.active svg #Path_474	{opacity: 1}

.audio-container.reveal svg #Path_472			{opacity: 0; transition: 1s ease-out 0.75s}
.audio-container.reveal.active svg #Path_472	{opacity: 1}

.audio-container.reveal svg #Path_473			{opacity: 0; transition: 1s ease-out 1s}
.audio-container.reveal.active svg #Path_473	{opacity: 1}

.blockquote-container.reveal			{transform: translateX(-50px); transition: 1s ease-out}
.blockquote-container.reveal.active		{transform: translateX(0); opacity: 1;}

.blockquote-container.reveal blockquote				{transform: translateX(100px); opacity: 0; transition: 1s ease-out}
.blockquote-container.reveal.active blockquote		{transform: translateX(0); opacity: 1;}

.article-inner h2.reveal		{transform: translateX(-50px); opacity: 0; transition: 1s ease-out}
.article-inner h2.reveal.active	{transform: translateX(0px); opacity: 1;}

.button-container.reveal		{transform: translateY(50px); opacity: 0; transition: 1s ease-out}
.button-container.reveal.active	{transform: translateY(0px); opacity: 1}

.pattern.reveal:before			{transform: translateX(200px); opacity: 0; transition: 2.5s ease-out}
.pattern.reveal.active:before	{transform: translateX(0); opacity: 0.1}

.article-inner p.reveal,
.colour-section p.reveal,
.white-section p.reveal				{transform: translateX(-50px); opacity: 0; transition: 1s ease-out 0.25s}

.article-inner p.reveal.active,
.colour-section p.reveal.active,
.white-section p.reveal.active		{transform: translateX(0px); opacity: 1}