﻿@media (max-width: 1340px) 
{
	/* HOME LISTING */
	.listing .panel-container-text		{width: 40%; padding-right: 15px;}
	.listing .panel-container-text h2	{font-size: 3.5vw;}
	.listing .panel-container-text h3	{font-size: 3.5vw;}
	
	.tab	{font-size: 4vw; padding: 40px 20px}
	
	/* CONTENT PAGE */
	.content-header .panel-container-text		{width:40%; padding-right: 15px;}
	.content-header .panel-container-text h2	{font-size: 3.5vw;}
	.content-header .panel-container-text h1	{font-size: 4.5vw;}
}

@media (max-width: 1250px) 
{
	/* ARTICLE PAGE	*/
	.article-inner	{width:calc(800px + 20%); max-width: 100%; padding-right: 30px; padding-left: 0; padding-left: 20%;}	
}

@media (max-width: 1200px) 
{
	.panel-2023 .panel-container		{align-items: stretch;}
	.panel-2023 .panel-container-image	{width: 50% !important; height: auto !important; background-size: contain; background-position:bottom center;}
	.panel-2023.coll-1:nth-child(even) .panel-container .panel-container-image	{background-position:bottom center;}
	
	.howards .panel-container							{min-height: unset}
	.howards .panel-container .panel-container-image	{align-self: auto}
	
}

@media (max-width: 1110px) 
{
}
	
@media (max-width: 1050px) 
{
	/* ARTICLE PAGE */
	.content-header .panel-container-text h2	{font-size: 3vw;}
	.content-header .panel-container-text h1	{font-size: 4vw;}
	.content-header	.panel-container-text h4	{font-size: 16px;}
	.content-header .panel-container-text p		{margin-bottom: 0; font-size: 14px;}
	.content-header .panel-container-text h2 svg	{width:50px; top:-10px; left: -70px;}
	
	.article-inner h3	{font-size: 20px;}
	.article-inner p	{font-size: 18px;}
	blockquote p		{font-size: 28px !important;}
	blockquote cite		{font-size: 22px;}
	
	/* RELATED ARTICLES */
	.related-articles .panel-container .panel-container-text h2	{font-size: 30px;}
}

@media (max-width: 860px) 
{
	/* HOME INTRO */
	.home-hero-container	{padding-top: 30px; padding-bottom: 30px;}
	.home-hero-container h1	{font-size: 45px;}
	.home-hero-container p	{font-size: 16px;}
	
	/* HOME LISTING */
	.listing .panel-container-text h2	{display: none}
	.panel-container-text p				{font-size: 14px;}
	.btn								{font-size: 14px; padding: 1em 1.5em;}
	
	/* ARTICLE */
	.content-header .panel-container-text		{padding-top: 35px; padding-bottom: 35px;}
	.content-header	.panel-container-text h4	{font-size: 14px;}
	.content-header .panel-container-text h2	{font-size: 24px;}
	
	/* RELATED ARTICLES */
	.related-articles .panel-container .panel-container-text h2	{display: block;}
	
}


@media (max-width: 768px) 
{
	/* RELATED ARTICLES */
	.related-articles h2		{margin-bottom: 0}
	.related-articles .col-2	{width:100%; padding-bottom: 0}
	.related-articles .panel-container .panel-container	{min-height: unset}
	.related-articles .panel-container .panel-container-image	{min-height: unset; padding-top: 40%;}
	
	.btn.big	{font-size: 18px;}
}


@media (max-width: 767px) 
{
	/* HOME LISTING */
	.panel-container-text		{padding-top:30px; padding-bottom: 30px;}
	.panel-container-text h4	{font-size: 14px; margin-top: 10px;}
		
}


@media (max-width: 680px) 
{
	/* HOME LISTING */
	.listing .panel-container			{min-height: 200px; align-items: center;}
	.listing .panel-container-outer		{margin-bottom: 30px;}
	.listing .panel-container:hover .panel-container-image	{transform: scale(1)}
	.listing .panel-container-text		{margin-left: 0; width:60%;}
	.listing .panel-container-text h3	{/*color:#1B1B1B;*/ color:#ffffff; font-size: 20px;}
	.listing .panel-container-text h4	{/*color:#1B1B1B;*/ color:#ffffff; font-size: 12px;}
	.listing .panel-container-text p	{/*color:#1B1B1B;*/ color:#ffffff; font-size: 12px; margin-bottom: 1em;}
	.listing .panel-container:before	{display: none}
	.listing .panel-container .btn		{font-size: 12px;}
	.panel-container-text				{padding-top:20px; padding-bottom: 20px;}
	.listing .coll-1:nth-child(even) .panel-container-text	{margin-right: 0; padding-right: 0; padding-left: 15px;}

	/* ARTICLE */
	.article-inner		{width:100%; margin: 0; padding-left: 0; padding-right: 0}
	.article-inner h3	{font-size: 18px;}
	.article-inner p	{font-size: 16px;}
	blockquote			{margin: 3em auto;}
	blockquote p		{font-size: 18px !important;}
	blockquote cite		{font-size: 16px;}
	blockquote svg		{width:47px; height:47px; position: relative; margin-bottom: 20px; left:auto}
	
	/* RELATED ARTICLES */
	.related-articles h2	{font-size: 30px; margin-bottom: 10px;}
	.related-articles .panel-container .panel-container-text h2	{font-size: 22px;}
	.related-articles .panel-container .panel-container-text h3	{font-size: 14px;}
	.related-articles .panel-container .panel-container-text p	{font-size: 14px;}
	.related-articles .panel-container	{min-height: unset}
	
	/* CONTENT HEADER */
	.content-header	.panel-container:before,
	.content-header	.panel-container:after	{display: none}
	.content-header	.panel-container-outer	{margin-bottom: 30px;}
	.content-header	.panel-container		{flex-direction: column;}
	.content-header	.panel-container-text	{width:100%; margin: auto; text-align: center;}
	.content-header	.panel-container-image	{width:100%; position: relative; bottom:auto; height: auto; height: 60vw; background-position:bottom center;}
	
	.content-header .panel-container-text h2		{color:rgba(255,255,255,0.8); font-size: 24px;padding: 0 20px; line-height: 1.2em;}
	.content-header .panel-container-text h1		{font-size: 40px;}
	.content-header .panel-container-text h4		{color:#ffffff; font-size: 15px;}
	.content-header .panel-container-text p			{color:#ffffff; font-size: 16px}
	
	.content-header .panel-container-text h2 svg	{position: relative; left: auto; top:auto; display: block; height: 50px; margin:15px auto;}
	.content-header .panel-container:before			{display: block; background-image:url(/_assets/mobile-header-shape.png); position: absolute; left: 0; top:auto; bottom:0; width:100%; height: calc(60vw - 20px); content: ''; background-size: cover;}
	.content-header .panel-container-image			{position: relative; margin-left: -30px; width: calc(100% + 60px);}
	
	
	/* ARTICLE */
	.bar				{margin-bottom: 40px;}
	.related-articles	{margin-top: 0}
	.home-icon			{padding: 3px 6px; top:120px;}
	.home-icon svg		{width:15px;}
	
	/* FOOTER */
	footer.tvn-footer	{padding-top: 30px; padding-bottom: 30px;}
	.logo				{width:236px; max-width: 100%;}
	ul.social-list		{margin:30px 0}
	
	
	/* COLOUR VARIATIONS */
	
	.barber-osgerby .panel-container:before,
	.natalie .content-header .panel-container:before			{background-image:url(/_assets/mobile-header-shape-natalie.png);}

	
	/* 2023 */
	.panel-2023 .panel-container			{align-items: stretch; padding-left: 10px; padding-right: 10px;}
	.panel-2023 .panel-container-image		{height: auto !important; margin-top: -20px}
	.panel-2023 .panel-container-text		{display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
	.panel-2023 .panel-container-text h4	{display: none}

	.kathy .content-header .panel-container-image,
	.howards .content-header .panel-container-image,
	.yishan .content-header .panel-container-image,
	.denica .content-header .panel-container-image,
	.bea .content-header .panel-container-image,
	.rinaldo .content-header .panel-container-image		{height: 80vw; max-height: 414px; width: 100%; background-position: center; margin: 0}

	.kathy .content-header .panel-container-text,
	.howards .content-header .panel-container-text,
	.yishan .content-header .panel-container-text,
	.denica .content-header .panel-container-text,
	.bea .content-header .panel-container-text,
	.rinaldo .content-header .panel-container-text		{padding-left: 0; padding-right: 0;}
	
	.blockquote-container blockquote p	{line-height: 1.4em !important; font-size: 20px !important;}
	
}


@media (max-width: 500px) 
{
	.tab	{font-size: 18px;}
	
	/* RELATED ARTICLES */
	.related-articles	{margin-bottom: 20px}
	.related-articles .panel-container .panel-container-text h2	{font-size: 20px;}
	.related-articles .panel-container .panel-container-text h3	{font-size: 12px;}
	.related-articles .panel-container .panel-container-text p	{font-size: 12px;}
	.related-articles .panel-container .panel-container-text .btn	{font-size: 12px;}
	
	blockquote		{width:270px;}
	blockquote svg	{margin-bottom: 10px;}
	
	.bar	{width:100px;}
	
	/* CONTENT HEADER */
	.content-header	.panel-container-image	{height:70vw;}

}
	
	



