
.brands .standard-grid
{
	width: 100%;
	max-width: initial;
}

@media print
{
	.brands
	{
		display: flex;
		flex-direction: column;		
	}
	.brands > nav > div
	{
		display: flex;
		flex-wrap: wrap;
	}
	.brands > nav > div > a	
	{
		display: grid;
		width: 5cm;
		height: 5cm;						
		align-items: center;
        justify-items: center; 
		text-align: center;		
	}
	.brands > nav > div > a img
	{
		width: 5cm;
		height: 5cm;		
		object-fit: contain;
        padding: 1cm;    	
	}
	
	.brands > button.arrow-right, 
	.brands > .button.arrow-right
	{
		display: none;
	}
}

@media screen
{

	@keyframes scroll
	{
	  from { transform: translateX(0%) }
	  to { transform: translateX(calc(-100% + 100vw)); }
	}
	
	.brands .standard-grid
	{
		grid-gap: var(--grid-gap-wide);
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	}

	.brands:not(.full-list).panel
	{
		grid-template-areas:
        "title"
        "boxes"
		"link";
		grid-template-columns: 1fr;
		justify-items: center;
	}
	
	.brands:not(.full-list).panel a
	{
		justify-self: center;		
	}
	
	.brands:not(.full-list) > nav a
	{
		width: 150px;
		background: white;
		height: 100px;
		border: 1px solid var(--colour-stroke);
		padding: 10px;	
		display: grid;
		align-content: center;
		justify-content: center;
		align-items: center;
		justify-items: center;	
		border-radius: var(--radius-nano);
	}
	
	.brands:not(.full-list) > nav > div.standard-grid
	{
		grid-gap: 1em;
	}
	
	.brands:not(.full-list) > nav a img
	{
		width: 100%;
		max-height: 100%;
	}

	.brands:not(.full-list) > nav > div
	{
		position: absolute;
		display: flex;
		align-items: center;
		grid-gap: 20px;
		padding: 32px 16px;
		width: fit-content;		
		will-change: right;
		animation: scroll 125s linear 0s infinite alternate forwards;
	}

	.brands:not(.full-list) > nav:hover div
	{
		animation-play-state: paused;
	}

	.brands:not(.full-list) > nav
	{	
		width: 100%;
		height: 150px;
		overflow: hidden;
	}

	.brands:not(.full-list) > nav > div > a > strong
	{	
		font-size: 1.5em; 
		letter-spacing: -1px;
	}

	.brand-link
	{
		white-space: nowrap;
	}
	.brand-link img
	{
		max-width: 185px;
		max-height: 100px;
		object-fit: contain;	
	}	

	.brands.full-list > div
	{
		display: grid;
		grid-template-areas: 
			"."; 
		grid-gap: 96px 32px;		
	}

	.brands.full-list .brand
	{	
		display: grid;
		grid-template-areas: 
			"logo"
			"title"
			"description"
			"links"; 
		grid-gap: 16px 32px;
		align-items: center;
		grid-template-columns: subgrid;
		grid-column: 1;		
	}
	.brands.full-list .brand .brand-link
	{
		grid-area: logo;
		width: 100%;
		height: 100px;
		border-radius: var(--radius-tiny);
		display: grid;
		align-content: center;
		justify-content: center;
		align-items: center;
		justify-items: center;		
	}
	.brands.full-list .brand .description
	{
		grid-area: description;
		letter-spacing: 1px;
	}
	.brands.full-list .brand h2
	{
		grid-area: title;
		color: var(--colour-main-text);
		font-size: var(--font-size-title);
		font-weight: var(--font-weight-bold);
	}
	.brands.full-list .brand nav
	{
		grid-area: links;
		display: flex;
		flex-direction: column;
		grid-gap: 8px;
	}
}
@media screen and (min-width: 460px)
{
	.brands.full-list .brand nav
	{
		flex-direction: row;
	}
}
@media screen and (min-width: 640px)
{		
	.brands.full-list > div
	{		
		grid-template-areas: 
			". ."; 		
	}

	.brands.full-list .brand
	{			
		grid-template-areas: 
			"logo title"
			"logo description"
			"logo links"; 					
		grid-column: 1 / -1;		
	}
}
@media screen and (min-width: 800px)
{			
	.brands:not(.full-list) > nav > div
	{
		grid-gap: 60px;
	}   
}
@media screen and (min-width: 1024px)
{
	.brands:not(.full-list) > nav > div
	{
		grid-gap: 70px;
	}	
}

@media screen and (min-width: 1440px)
{		
	.brands:not(.full-list) > nav > div
	{
		grid-gap: 80px;
	}
}


									
				.ace				{					
					color: hsl(265deg 100% 30%);
				}									
												
				.aicampers				{					
					color: hsl(853deg 100% 30%);
				}									
												
				.allseasonsleisure				{					
					color: hsl(1806deg 100% 30%);
				}									
												
				.autosleepers				{					
					color: hsl(1289deg 100% 30%);
				}									
												
				.autotrail				{					
					color: hsl(962deg 100% 30%);
				}									
												
				.autohaus				{					
					color: hsl(842deg 100% 30%);
				}									
												
				.benimar				{					
					color: hsl(702deg 100% 30%);
				}									
												
				.blitzcampers				{					
					color: hsl(1264deg 100% 30%);
				}									
												
				.bristolcampercompany				{					
					color: hsl(2126deg 100% 30%);
				}									
												
				.burstner				{					
					color: hsl(853deg 100% 30%);
				}									
												
				.camplet				{					
					color: hsl(723deg 100% 30%);
				}									
												
				.camperking				{					
					color: hsl(1025deg 100% 30%);
				}									
												
				.coachman				{					
					color: hsl(794deg 100% 30%);
				}									
												
				.conway				{					
					color: hsl(625deg 100% 30%);
				}									
												
				.dreamer				{					
					color: hsl(704deg 100% 30%);
				}									
												
				.elddis				{					
					color: hsl(597deg 100% 30%);
				}									
												
				.fiat				{					
					color: hsl(388deg 100% 30%);
				}									
												
				.fleetwood				{					
					color: hsl(937deg 100% 30%);
				}									
												
				.ford				{					
					color: hsl(395deg 100% 30%);
				}									
												
				.freedom				{					
					color: hsl(706deg 100% 30%);
				}									
												
				.globetraveller				{					
					color: hsl(1479deg 100% 30%);
				}									
												
				.globecar				{					
					color: hsl(799deg 100% 30%);
				}									
												
				.hillside				{					
					color: hsl(814deg 100% 30%);
				}									
												
				.ih				{					
					color: hsl(145deg 100% 30%);
				}									
												
				.iveco				{					
					color: hsl(502deg 100% 30%);
				}									
												
				.malibu				{					
					color: hsl(602deg 100% 30%);
				}									
												
				.mercedes				{					
					color: hsl(808deg 100% 30%);
				}									
												
				.minifreestyle				{					
					color: hsl(1376deg 100% 30%);
				}									
												
				.mototrek				{					
					color: hsl(866deg 100% 30%);
				}									
												
				.murvi				{					
					color: hsl(531deg 100% 30%);
				}									
												
				.opus				{					
					color: hsl(423deg 100% 30%);
				}									
												
				.pennine				{					
					color: hsl(717deg 100% 30%);
				}									
												
				.peugeot				{					
					color: hsl(729deg 100% 30%);
				}									
												
				.raclet				{					
					color: hsl(603deg 100% 30%);
				}									
												
				.rimor				{					
					color: hsl(521deg 100% 30%);
				}									
												
				.rollerteam				{					
					color: hsl(1047deg 100% 30%);
				}									
												
				.romahome				{					
					color: hsl(824deg 100% 30%);
				}									
												
				.sunlight				{					
					color: hsl(846deg 100% 30%);
				}									
												
				.sunliving				{					
					color: hsl(959deg 100% 30%);
				}									
												
				.sussexcampervans				{					
					color: hsl(1723deg 100% 30%);
				}									
												
				.tcscamper				{					
					color: hsl(983deg 100% 30%);
				}									
												
				.weinsberg				{					
					color: hsl(934deg 100% 30%);
				}									
												
				.westfalia				{					
					color: hsl(928deg 100% 30%);
				}									
												
				.wildax				{					
					color: hsl(617deg 100% 30%);
				}									
												
				.willerby				{					
					color: hsl(842deg 100% 30%);
				}									
												
				.xplore				{					
					color: hsl(634deg 100% 30%);
				}									
				