@font-face 
{
	font-family: 'lasercharles';
	src: url('LaserCharlesWright.woff2') format('woff2'),
		 url('LaserCharlesWright.woff') format('woff');

	font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face 
{
    font-family: 'lasercharles3d';
    src: url('LaserCharlesWright3D.woff2') format('woff2'),
		 url('LaserCharlesWright3D.woff') format('woff');
		
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face 
{
	font-family: 'lasercharlesmc';
    src: url('LaserCharlesWrightMC.woff2') format('woff2'),
		 url('LaserCharlesWrightMC.woff') format('woff');
	
	font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face 
{
    font-family: 'lasercharlesmc3d';
    src: url('LaserCharlesWrightMC3D.woff2') format('woff2'),
		 url('LaserCharlesWrightMC3D.woff') format('woff');
		
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* 
{
	box-sizing: border-box;
}

body, html
{
	margin: 0;
	font-family: 'Raleway', sans-serif;
}

header 
{
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: flex-start;

	counter-reset: optionsNav;
}

#options-nav label
{
	padding: 20px 0;
	cursor: pointer;
	user-select: none;
	width: 180px;
	display: inline-block;
	text-align: center;
	height: 71px;
}

#options-nav label:nth-child(1)::before
{
	counter-increment: optionsNav;
	content: counter(optionsNav) ". " ;
}

#options-nav label:nth-child(2)::before
{
	counter-increment: optionsNav;
	content: counter(optionsNav) ". " ;
}

#options-nav label:nth-child(3)::before
{
	counter-increment: optionsNav;
	content: counter(optionsNav) ". " ;
}

#options-nav label:nth-child(4)::before
{
	counter-increment: optionsNav;
	content: counter(optionsNav) ". " ;
}

#options-nav label:nth-child(5)::before
{
	counter-increment: optionsNav;
	content: counter(optionsNav) ". " ;
}

.options-tab-highlighted 
{
	border-bottom: 3px solid #2997ff;
	font-weight: bold;
}

#branding 
{
	margin-right: 75px;
}

.main-content-container
{
	min-height: 69vh;
	position: relative;
}

.hero-section
{
	display: flex;
	flex-direction: row;
	background-color: #fff;
	border-top: 1px solid rgba(0,0,0,0.2);
}

.hero-section-controls-container 
{
	width: 425px;
	border-right: 1px solid rgba(0,0,0,0.2);
}

.hero-section-preview-container
{
	width: auto;
	flex-grow: 1;
	overflow: hidden;
	position: relative;
}

.carfont
{
	font-family: lasercharles;
    font-size: 113px;
	line-height: 100px;
}

.bikefont
{
	font-family: lasercharlesmc;
	font-size: 96px;
	line-height: 80px;
}

#front-rear-switcher
{
	display: flex;
	flex-direction: row;
	position: absolute;
    top: 10px;
    left: 10px;
}

#front-rear-switcher #front-plate-switch,
#front-rear-switcher #rear-plate-switch 
{
	width: 50%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0;
    border: 1px solid #cecece;
    border-top: none;
    text-align: center;
    font-size: 13px;
	border-left: 0px;
	border-radius: 4px;
    margin-right: 10px;
    padding: 10px;
    min-width: 170px;
}

#front-plate-switch{background-color: rgb(240, 240, 240);}
#rear-plate-switch{background-color: #ffcf06;}

#fixed-footer 
{
	display: flex;
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100vw;
	height: 90px;
	background-color: #555;
	z-index: 3;
	padding: 15px 50px 15px 15px;
	color: white;
	font-family: 'Raleway', sans-serif;
	justify-content: space-between;
	align-items: center;
}

#product-summary 
{
	display: flex;
	flex-direction: row;
	font-size: 14px;
}

.product-item-summary div span:first-child 
{
	font-weight: bold;
	display: inline-block;
	text-transform: capitalize;
}

.product-item-summary div span:last-child 
{
	margin-right: 20px;
	display: inline-block;
	text-transform: capitalize;
}

.product-summary-title
{
	width: 135px;
}

.product-summary-title-short 
{
	width: 90px;
}

#primary-cta button 
{
    border-radius: 7px;
    padding: 20px 60px;
    border: none;
    font-weight: 100;
    font-family: 'Raleway', sans-serif;
    font-size: 1.2em;
    color: #fff;
    background-color: #ff4f4f;
    cursor: pointer;
}

#primary-cta
{
	display: flex;
    align-items: center;
    flex-direction: row;
}

#total-price 
{
	margin-right: 20px;
	font-size: 20px;
}

.scroll-right-options, .scroll-left-options 
{
	display: none;
	cursor: pointer;
	user-select: none;
}

#angle-options
{
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 4;
	text-align: right;
	transition: 0.2s opacity;
}

#angle-options:not(:hover)
{
	opacity: 0.3;
}

#angle-options:hover
{
	opacity: 1;
}

#angle-options-icon
{
	display: inline-block;
	border: 1px solid #000;
	position: relative;
	width: 50px;
	height: 50px;
	background-image: url("../img/misc/rotate-icon.jpg");
	background-size: 100% 100%;
	background-position: center center;
	margin-bottom: 10px;
	cursor: pointer;
}

#angle-changer-checkbox
{
	display: none;
}

#angle-changer-checkbox:checked + #show-angles 
{
	display: block;
}

#show-angles 
{
	display: none;
	width: 210px;
    height: 350px;
}

#show-angles div 
{
	position: relative;
	border: 1px solid #000;
	width: 100px;
	height: 100px;
	margin-bottom: 4px;
	cursor: pointer;
	background-color: #ffffff;
	display: inline-block;
}




.loading-spinner
{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 99;
	background-color: rgba(0,0,0,0.5);
}


.i-confirm-my-order
{
	color: #fff !important;
	border: none !important;
    background-color: #ff4f4f !important;
	font-family: 'Raleway', sans-serif !important;
}



/*	########################################################

		CSS loader / spinner styles

	########################################################	*/

.lds-ring {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
  }
  .lds-ring div {
	box-sizing: border-box;
	display: block;
	position: absolute;
	width: 64px;
	height: 64px;
	margin: 8px;
	border: 8px solid #fff;
	border-radius: 50%;
	animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	border-color: #fff transparent transparent transparent;
  }
  .lds-ring div:nth-child(1) {
	animation-delay: -0.45s;
  }
  .lds-ring div:nth-child(2) {
	animation-delay: -0.3s;
  }
  .lds-ring div:nth-child(3) {
	animation-delay: -0.15s;
  }
  @keyframes lds-ring {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(360deg);
	}
  }













/*	########################################################

		Number plate preview container styling

	########################################################	*/

#plate-preview-container.standardoblong		{width: 520px; height: 111px;}
#plate-preview-container.shortplate18		{width: 460px; height: 111px;}
#plate-preview-container.shortplate16		{width: 406px; height: 111px;}
#plate-preview-container.shortplate14		{width: 355px; height: 111px;}
#plate-preview-container.rangerover			{width: 533px; height: 152px;}
#plate-preview-container.square				{width: 310px; height: 210px;}
#plate-preview-container.motorcycle			{width: 228px; height: 178px;}

#plate-preview-container.standardoblong #reg-3mm-black, 
#plate-preview-container.standardoblong #reg-3mm-black p,
#plate-preview-container.standardoblong #reg-3mm-colour, 
#plate-preview-container.standardoblong #reg-3mm-colour p
{width: calc(520px - 10px); height: 111px; position: absolute; text-align: center; margin: 0 5px;}


#plate-preview-container.shortplate18 #reg-3mm-black,
#plate-preview-container.shortplate18 #reg-3mm-black p,
#plate-preview-container.shortplate18 #reg-3mm-colour,
#plate-preview-container.shortplate18 #reg-3mm-colour p		
{width:  calc(460px - 10px); height: 111px; position: absolute; text-align: center; margin: 0 5px;}



#plate-preview-container.shortplate16 #reg-3mm-black,
#plate-preview-container.shortplate16 #reg-3mm-black p,
#plate-preview-container.shortplate16 #reg-3mm-colour,
#plate-preview-container.shortplate16 #reg-3mm-colour p		
{width:  calc(406px - 10px); height: 111px; position: absolute; text-align: center; margin: 0 5px;}


#plate-preview-container.shortplate14 #reg-3mm-black,
#plate-preview-container.shortplate14 #reg-3mm-black p,
#plate-preview-container.shortplate14 #reg-3mm-colour,
#plate-preview-container.shortplate14 #reg-3mm-colour p
{width:  calc(355px - 10px); height: 111px; position: absolute; text-align: center; margin: 0 5px;}


#plate-preview-container.rangerover #reg-3mm-black,
#plate-preview-container.rangerover #reg-3mm-black p,
#plate-preview-container.rangerover #reg-3mm-colour,
#plate-preview-container.rangerover #reg-3mm-colour p		
{width:  calc(533px - 10px); height: 152px; position: absolute; text-align: center; margin: 0 5px;}


#plate-preview-container.square	#reg-3mm-black, 
#plate-preview-container.square	#reg-3mm-black p,
#plate-preview-container.square	#reg-3mm-colour, 
#plate-preview-container.square	#reg-3mm-colour p
{width:  calc(279px - 10px); height: 228px; position: absolute; text-align: center; margin: 0 5px;}


#plate-preview-container.motorcycle	#reg-3mm-black,
#plate-preview-container.motorcycle	#reg-3mm-black p,
#plate-preview-container.motorcycle	#reg-3mm-colour,
#plate-preview-container.motorcycle	#reg-3mm-colour p		
{width: calc(228px - 10px); height: 178px; position: absolute; text-align: center; margin: 0 5px;}



#plates-preview-container
{
	min-height: 60vh;
	overflow: hidden;
}



#plate-preview-container {transition: 0.3s all;}

#plate-preview-container.standardoblong
{
    width: 520px;
    height: 111px;
	position: relative;
	left: calc(50% - calc(520px / 2));
    top: calc(50vh - calc(520px / 2));
}

#plate-preview-container.rangerover
{
    width: 533px;
    height: 152px;
	position: relative;
	left: calc(50% - calc(533px / 2));
    top: calc(50vh - calc(520px / 2));
}

#plate-preview-container.square
{
    width: 310px;
    height: 210px;
	position: relative;
	left: calc(50% - calc(310px / 2));
    top: calc(50vh - calc(520px / 2));
}

#plate-preview-container.motorcycle
{
    width: 228px;
    height: 178px;
	position: relative;
	left: calc(50% - calc(228px / 2));
    top: calc(50vh - calc(520px / 2));
}

#plate-preview-container.shortplate18
{
    width: 460px;
    height: 111px;
	position: relative;
	left: calc(50% - calc(460px / 2));
    top: calc(50vh - calc(520px / 2));
}

#plate-preview-container.shortplate16
{
    width: 406px;
    height: 111px;
	position: relative;
	left: calc(50% - calc(406px / 2));
    top: calc(50vh - calc(520px / 2));
}

#plate-preview-container.shortplate14
{
    width: 355px;
    height: 111px;
	position: relative;
	left: calc(50% - calc(355px / 2));
    top: calc(50vh - calc(520px / 2));
}

#plate-preview-container.nofrontplate,
#plate-preview-container.norearplate
{
	visibility: hidden;
    width: 520px;
    height: 111px;
	position: relative;
	left: calc(50% - calc(520px / 2));
    top: calc(50vh - calc(111px / 2));
}


#plate-preview-container.nofrontplate::after,
#plate-preview-container.norearplate::after 
{
	content: "";
    position: absolute;
    visibility: visible;
    left: calc(50% - 165px);
    top: calc(50% - 270px);
    font-size: 50px;
    font-weight: bold;
    height: 50px;
    width: 330px;
    text-align: center;
}

#plate-preview-container.nofrontplate::after{content: "No front plate";}
#plate-preview-container.norearplate::after{content: "No rear plate";}












#plate
{
    width: 100%;
    height: 100%;
 	position: absolute;
	perspective: 2000px;
	z-index: 0;
}




#plate div
{
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 10px;
	z-index: 0;

	transform: rotate3d(1, 0, 0, -309deg) rotate3d(0, 1, 0, 0deg) rotate3d(0, 0, 1, -21deg) scale(1.87);
}

#plate .plate1{top: 0px; left: 0px;}
#plate .plate2{top: 1px; left: 0px;}
#plate .plate3{top: 3px; left: 0px;}
#plate .plate4{top: 4px; left: 0px;}
#plate .plate5{top: 5px; left: 0px;}
#plate .plate6{top: 6px; left: 0px;}

/*	front plate colour  */
#plate.front-plate div:first-child 
{
	background: linear-gradient(180deg,rgba(245,245,245,1) 0%,rgba(255,255,255,1) 90%,rgba(240,240,240,1) 100%);
	box-shadow: 1px 1px 0px rgba(200,200,200,.3);
	z-index: 1;
}
#plate.front-plate div 
{
	background-color: rgba(240,240,240,1);
}

/*	rear plate colour  */
#plate.rear-plate div:first-child 
{
	background: linear-gradient(180deg,rgba(255,207,6,1) 0%,rgb(234 204 80) 90%,rgb(247 205 29) 100%);
	box-shadow: 1px 1px 0px rgba(200,200,200,.3);
	z-index: 1;}

#plate.rear-plate div 
{
	background-color: rgb(154 129 24);;
}

#plate.front-plate div:last-child,
#plate.rear-plate div:last-child
{
	box-shadow: 0px 0px 8px rgba(0,0,0,.5);
	z-index: -1;
}

.plate1 
{
	width: 100%;
	height: 100%;
	border-radius: 10px;
}



























/*	############################################################################################
	
	position of the container element for the BLACK characters.

	############################################################################################ */
#reg-3mm-black
{
	top: -7px;
	z-index: 2;
	perspective: 2000px;
}

/**
 * 		for -webkit-background-clip to work on Safari iOS, the element must be inline. Known bug: https://bugs.webkit.org/show_bug.cgi?id=169125	
*/
#reg-3mm-black p,
#reg-3mm-colour p
{
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin: 0 !important;

	transform: rotate3d(1, 0, 0, -309deg) rotate3d(0, 1, 0, 0deg) rotate3d(0, 0, 1, -21deg) scale(1.87);
}

#reg-3mm-black p span,
#reg-3mm-colour p span
{
	display: inline-block;
	width: 1000px;
}

/*	############################################################################################
	
	change the style of the first and second <p> for the BLACK characters, depending
	on which style has been chosen.

	############################################################################################ */

.gel-text #reg-3mm-black p:first-child span
{
	z-index: 1 !important;
    font-family: lasercharles3d !important;
    color: rgba(255,255,255,0.35) !important;
}

.motorcycle.gel-text #reg-3mm-black p:first-child span
{
	z-index: 1 !important;
    font-family: lasercharlesmc3d !important;
    color: rgba(255,255,255,0.35) !important;
}



.printed-text #reg-3mm-black p:first-child span
{
	z-index: 1; 
	background: none;
	color: rgba(50,50,50);
	top: 6px;
}

.krystal-text.gel-text #reg-3mm-black p:first-child span,
.fourd-text.gel-text #reg-3mm-black p:first-child span
{
	background-image: unset;
    -webkit-background-clip: unset;
    background-clip: unset;
}

.krystal-text.gel-text #reg-3mm-black p:nth-child(2) span
{
	background-image: none;
    -webkit-background-clip:unset;
    background-clip:unset;
	color: rgb(25,25,25) !important;
	z-index: 0;
}

#reg-3mm-black p:first-child span
{
	z-index: 1;
	background: linear-gradient(180deg,rgba(60,60,60,1) 0%,rgba(63,62,61,1) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: rgba(0,0,0,0);
}

#reg-3mm-black p:nth-child(2)
{
	z-index: 0;
}

#reg-3mm-black p:last-child  span
{
	text-shadow: 0px 0px 3px rgba(0,0,0,0.7) !important;
}

/*	############################################################################################
	
	the colour of the characters underneath the top character for the BLACK acrylic,
	to make it appear to have depth.

	############################################################################################ */
.krystal-text #reg-3mm-black p:not(:first-child) span,
.fourd-text #reg-3mm-black p:not(:first-child) span,
.gel-text #reg-3mm-black p:not(:first-child) span
{
	z-index: -1;
	color: rgb(35,35,35);
}

/*	############################################################################################
	
	if it's krystal + 4D + gel, change the characters behind to a lighter colour, to maintain
	good visibility of the depth illusion.

	############################################################################################ */
.krystal-text.gel-krystal-text.gel-text #reg-3mm-black p:last-child span
{
	z-index: -1;
	color: rgb(35,35,35);
}


/*	############################################################################################
	
	if it's krystal + 4D + gel, change the characters behind to a lighter colour, to maintain
	good visibility of the depth illusion.

	############################################################################################ */
.krystal-text.gel-text #reg-3mm-black p:not(:first-child) span,
.gel-krystal-text.gel-text #reg-3mm-black p:not(:first-child) span
{
	color: rgb(62,62,62);
}

/*	############################################################################################
	
	set the positions of the characters for BLACK acrylic.

	############################################################################################ */
#reg-3mm-black .reg1{top: 0px; z-index: 1}
#reg-3mm-black .reg2{top: 1px;}
#reg-3mm-black .reg3{top: 2px;}
#reg-3mm-black .reg4{top: 3px;}
#reg-3mm-black .reg5{top: 4px;}
#reg-3mm-black .reg6{top: 5px;}


/*	############################################################################################
	
	hide the KRYSTAL element if a non-krystal character type is selected. Move the black down
	based on what character is chosen.

	############################################################################################ */

.fourd-text #reg-3mm-colour 
{
	display: none;
}

.fourd-text #reg-3mm-black
{
	top: -2px;
}

.gel-text #reg-3mm-black 
{
	top: -1px;
}

.krystal-text.gel-text #reg-3mm-black 
{
	top: -7px;
}

.gel-krystal-text.gel-text #reg-3mm-black 
{
	top: -7px;
}

.fourd-text.gel-text #reg-3mm-black
{
	top: -2px;
}

.printed-text #reg-3mm-black 
{
	top: 0px;
}

.printed-text #reg-3mm-colour 
{
	display: none;
}

.gel-text #reg-3mm-black p:nth-child(2)
{
	top: 0px;
}

.gel-text #reg-3mm-black p:nth-child(3)
{
	top: 1px;
}

.gel-text #reg-3mm-black p:nth-child(4)
{
	top: 2px;
}

.printed-text #reg-3mm-black p:not(:first-child)
{
	display: none;
}

.fourd-text.gel-text #reg-3mm-black p:nth-child(2) span
{
	color: rgb(25,25,25) !important;
}

.fourd-text.gel-text #reg-3mm-black p:not(:first-child) span
{
	color: rgb(62,62,62);
}

#plate-preview-container.krystal-text.gel-text.black-krystal #reg-3mm-black 
{
	top: -5px;
}

#plate-preview-container.krystal-text.gel-text.black-krystal #reg-3mm-colour p span
{
	color: rgb(62,62,62);
}

.gel-text #reg-3mm-black p:first-child
{
	z-index: 1 !important;
}

.gel-text #reg-3mm-black p:nth-child(2)
{
	z-index: 0 !important;
}

.gel-text #reg-3mm-black p:not(:first-child)
{
	z-index: -1;
}

.gel-text #reg-3mm-black p:nth-child(4) span
{
	text-shadow: 0px 0px 3px rgba(0,0,0,0.7);
}

.krystal-text.black-krystal #reg-3mm-black 
{
	top: -5px;
}

.gel-text-only #reg-3mm-colour 
{
	display: none;
}

.gel-text-only #reg-3mm-black
{
	top: -4px;
}


.gel-text-only #reg-3mm-black p:nth-child(1),
.gel-text-only #reg-3mm-black p:nth-child(2)
{
	top: 2px;
}

.gel-text-only #reg-3mm-black p:nth-child(3),
.gel-text-only #reg-3mm-black p:nth-child(4)
{
	display: none;
}

.gel-text-only #reg-3mm-black p:nth-child(1),
.gel-text-only #reg-3mm-black p:nth-child(2)
{
	top: 3px;
}

.gel-krystal-text #reg-3mm-black p:nth-child(1)
{
	top: 4px;
}

.gel-krystal-text #reg-3mm-black p:nth-child(2),
.gel-krystal-text #reg-3mm-black p:nth-child(3),
.gel-krystal-text #reg-3mm-black p:nth-child(4),
.gel-krystal-text #reg-3mm-black p:nth-child(5)
{
	display: none;
}










#reg-3mm-colour
{
	top: -2px;
	z-index: 1;
	perspective: 2000px;
}

#reg-3mm-colour p 
{
    top: 0px;
	z-index: 0;

	/*	If a badge is chosen, padding left must be 25px	*/
	padding-left: 0px;	
}

#reg-3mm-colour .reg1{top: 0px;}
#reg-3mm-colour .reg2{top: 1px;}
#reg-3mm-colour .reg3{top: 2px;}
#reg-3mm-colour .reg4{top: 3px;}
#reg-3mm-colour .reg5{top: 4px;}
#reg-3mm-colour .reg6{top: 5px;}

#plate-preview-container.black-krystal #reg-3mm-colour p span					{color: rgb(35,35,35);}
#plate-preview-container.black-krystal #reg-3mm-colour p:last-child span		{text-shadow: 0px 0px 3px rgba(0,0,0,0.7) !important; z-index: -1;}

#plate-preview-container.red-krystal #reg-3mm-colour p span						{background-image: linear-gradient(180deg,rgba(207,31,31,.7) 0%,rgba(231,31,31,1) 60%,rgba(255,94,94,1) 100%); -webkit-background-clip: text;background-clip: text;color: rgba(0,0,0,0);}
#plate-preview-container.red-krystal #reg-3mm-colour p:last-child span			{text-shadow: 0px 0px 7px rgba(0,0,0,0.1), 0px 0px 7px rgba(200,0,0,0.7); z-index: -1;}

#plate-preview-container.green-krystal #reg-3mm-colour p span					{background-image: linear-gradient(180deg,rgb(44 210 0 / 1) 0%,#64de4233 60%,rgb(46 218 0 / 1) 100%); -webkit-background-clip: text;background-clip: text;color: rgba(0,0,0,0);}
#plate-preview-container.green-krystal #reg-3mm-colour p:last-child span		{text-shadow: 0px 0px 7px rgba(0,0,0,.3), 0px 0px 7px rgba(0,200,0,.3); z-index: -1;}

#plate-preview-container.blue-krystal #reg-3mm-colour p span					{background-image: linear-gradient(180deg,rgba(0,102,255,0.56) 0%,rgba(0,100,240,.5) 60%,rgba(0,114,255,0.52) 100%); -webkit-background-clip: text;background-clip: text;color: rgba(0,0,0,0);}
#plate-preview-container.blue-krystal #reg-3mm-colour p:last-child span			{text-shadow: 0px 0px 7px rgba(0,0,0,.3), 0px 0px 7px rgba(0,0,200,.4); z-index: -1;}

#plate-preview-container.orange-krystal #reg-3mm-colour p span					{background-image: linear-gradient(180deg,rgba(255,50,30,.5) 0%,rgba(255,60,20,.3) 60%,rgba(255,85,20,.8) 100%); -webkit-background-clip: text;background-clip: text;color: rgba(0,0,0,0);}
#plate-preview-container.orange-krystal #reg-3mm-colour p:last-child span		{text-shadow: 0px 0px 7px rgba(0,0,0,.2), 0px 0px 7px rgba(255,64,0,.8); z-index: -1;}

#plate-preview-container.yellow-krystal #reg-3mm-colour p span 					{background-image: linear-gradient(180deg,rgba(200,255,0,.4) 0%,rgba(200,255,0,.4) 60%,rgba(200,255,0,.4) 100%);-webkit-background-clip: text; background-clip: text; color: rgba(200,255,0,.4);}
#plate-preview-container.yellow-krystal #reg-3mm-colour p:last-child span		{text-shadow: 0px 0px 7px rgba(0,0,0,.3), 0px 0px 7px rgba(200,255,0,.4); z-index: -1;}

#plate-preview-container.clear-krystal #reg-3mm-colour p span					{background-image: none; -webkit-background-clip:unset; background-clip: unset; color: rgba(250,254,255,.2);}
#plate-preview-container.clear-krystal #reg-3mm-colour p:last-child span		{text-shadow: 0px 0px 7px rgb(0,0,0,0.2), 0px 0px 2px rgb(237,251,255, 0.28); z-index: -1;}

#plate-preview-container.clear-krystal.is-front-plate #reg-3mm-colour p span			{background-image: none; -webkit-background-clip:unset; background-clip: unset; color: rgba(234,250,255,0.70);}
#plate-preview-container.clear-krystal.is-front-plate #reg-3mm-colour p:last-child span	{text-shadow: 0px 0px 7px rgba(0,0,0,0.3), 0px 0px 2px rgba(233,248,255,.5); z-index: -1;}

.krystal-text #reg-3mm-black p:last-child span 									{text-shadow: none !important;}




.white-space-normal p span		{white-space: normal;}
.white-space-no-wrap p span		{white-space: nowrap;}
.white-space-pre p span			{white-space: pre;}
.white-space-pre-wrap p span	{white-space: pre-wrap;}





.standardoblong.badge #reg-3mm-black p, 
.standardoblong.badge #reg-3mm-colour p,

.rangerover.badge #reg-3mm-black p, 
.rangerover.badge #reg-3mm-colour p

{padding-left: 55px;}
























/*		Character types 		*/

/*
.product-options-list li 
{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 65px;
	height: 65px;
	margin-right: 10px;
	margin-bottom: 95px;
}
*/

.product-options-list li input[type="radio"]
{
	display: none;
}

.product-options-list li label
{
	position: absolute;
    width: 100%;
    height: 100%;
    font-size: 12px;
    top: 0px;
    left: 0px;
	border: 1px solid rgba(0,0,0,0.5);
	border-radius: 3px;
	cursor: pointer;
}

.product-options-list li label img 
{
	position: relative;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	border-radius: 5px;
}

.product-options-list li label::before
{
    content: attr(data-custom-label);
    color: #000;
    text-align: center;
    position: absolute;
    top: -40px;
    display: flex;
    height: 35px;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
}

.product-options-list li label::after
{
    content: attr(data-price);
    color: #000;
    text-align: center;
	position: absolute;
	display: block;
	width: 100%;
	height: 35px;
	bottom: -40px;
}

.product-options-list input[type="radio"]:checked + label 
{
	border: 3px solid #2997ff;
}











/*		Border styling	*/

#border-3mm-black
{
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	perspective: 2000px;
	z-index: 2;
}

#border-3mm-black div:first-child 
{
	z-index: 1;
}

#border-3mm-black div
{
    width: 100%;
    height: 100%;
    border-radius: 10px;
	position: absolute;
}

#border-3mm-black .border1{top: 0px;left: 0px;}
#border-3mm-black .border2{top: 1px;left: 0px;}
#border-3mm-black .border3{top: 2px;left: 0px;}
#border-3mm-black .border4{top: 3px;left: 0px;}
#border-3mm-black .border5{top: 4px;left: 0px;}
#border-3mm-black .border6{top: 5px;left: 0px;}

#border-3mm-colour
{
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	perspective: 2000px;
	z-index: 1;
}

#border-3mm-black div,
#border-3mm-colour div
{
    width: 100%;
    height: 100%;
    border-radius: 10px;
	position: absolute;
	
	transform: rotate3d(1, 0, 0, -309deg) rotate3d(0, 1, 0, 0deg) rotate3d(0, 0, 1, -21deg) scale(1.87);
}

.fourd-5mm-border #border-3mm-colour div::after 			{border: 5px solid rgba(45,45,45,1); z-index: 1}

.red-krystal-border-colour div::after						{border: 5px solid rgba(231,31,31,1);  z-index: 0;}
.red-krystal-border-colour div:first-child					{z-index: 1;}
.red-krystal-border-colour div:first-child::after			{border: 5px solid rgb(122, 32, 32) !important; z-index: 1;}
.red-krystal-border-colour div:last-child::after			{box-shadow: 0px 0px 4px rgba(0,0,0,0.3), 0px 0px 4px rgba(200,0,0,1), inset 0px 0px 4px rgba(0,0,0,0.3), inset 0px 0px 4px rgba(200,0,0,1); z-index: -1}

.green-krystal-border-colour div::after						{border: 5px solid rgba(51, 228, 51, 0.726);  z-index: 0;}
.green-krystal-border-colour div:last-child::after			{box-shadow: 0px 0px 4px rgba(0,0,0,0.3), 0px 0px 4px rgba(0,200,0,.5), inset 0px 0px 4px rgba(0,0,0,0.3), inset 0px 0px 4px rgba(0,200,0,.5); z-index: -1}

.blue-krystal-border-colour div::after						{border: 5px solid rgba(0,100,240,.5);  z-index: 0;}
.blue-krystal-border-colour div:last-child::after			{box-shadow: 0px 0px 4px rgba(0,0,0,0.3), 0px 0px 4px rgba(0,0,200,0.5), inset 0px 0px 4px rgba(0,0,0,0.3), inset 0px 0px 4px rgba(0,0,200,0.5); z-index: -1}

.orange-krystal-border-colour div::after					{border: 5px solid rgba(255,85,20,.8);  z-index: 0;}
.orange-krystal-border-colour div:last-child::after			{box-shadow: 0px 0px 4px rgba(0,0,0,0.3), 0px 0px 4px rgba(200,100,0,1), inset 0px 0px 4px rgba(0,0,0,0.3), inset 0px 0px 4px rgba(200,100,0,1); z-index: -1}

.yellow-krystal-border-colour div::after					{border: 5px solid rgba(200,255,0,.4);  z-index: 0;}
.yellow-krystal-border-colour div:last-child::after 		{box-shadow: 0px 0px 4px rgba(0,0,0,0.3), 0px 0px 4px rgba(255,255,0,0.5), inset 0px 0px 4px rgba(0,0,0,0.3), inset 0px 0px 4px rgba(255,255,0,0.5); z-index: -1}

.clear-krystal-border-colour div::after						{border: 5px solid rgba(216,245,255,.2);  z-index: 0;}
.clear-krystal-border-colour div:last-child::after 			{box-shadow: 0px 0px 4px rgba(0,0,0,0.4), inset 0px 0px 4px rgba(0,0,0,0.4); z-index: -1}

.fourd-3mm-border #border-3mm-black div:last-child::after	{box-shadow: 0px 0px 4px rgba(0,0,0,0.4), inset 0px 0px 4px rgba(0,0,0,0.4); z-index: -1}
.fourd-5mm-border #border-3mm-colour div:last-child::after	{box-shadow: 0px 0px 4px rgba(0,0,0,0.4), inset 0px 0px 4px rgba(0,0,0,0.4); z-index: -1}

#border-3mm-black div:first-child::after					{border: 5px solid rgba(63,63,63,1);  z-index: 1;}
#border-3mm-black div::after								{border: 5px solid rgba(45,45,45,1) ;  z-index: 0;}




/*		printed borders		*/


.printedborder #border-3mm-colour div{display: none;}
.printedborder #border-3mm-colour div:last-child{display: block; top: 0px;}

.printedborder #border-3mm-colour div:last-child::after
{
	content: "";
	width: calc(100% - 14px);
	height: calc(100% - 14px);
	display: block;
	border-radius: 10px;
	position: relative;
	margin: 5px;
}

.red-printed-border-colour div::after	{border: 2px solid rgba(231,31,31,1);}
.green-printed-border-colour div::after	{border: 2px solid rgb(106, 189, 69);}
.blue-printed-border-colour div::after	{border: 2px solid rgb(57, 83, 164);}
.black-printed-border-colour div::after	{border: 2px solid rgba(0,0,0,1);}

#border-3mm-colour .border1{top: 0px;left: 0px;}
#border-3mm-colour .border2{top: 1px;left: 0px;}
#border-3mm-colour .border3{top: 2px;left: 0px;}
#border-3mm-colour .border4{top: 3px;left: 0px;}
#border-3mm-colour .border5{top: 4px;left: 0px;}
#border-3mm-colour .border6{top: 5px;left: 0px;}

.fourd-3mm-border #border-3mm-black {top: -5px;}
.fourd-5mm-border #border-3mm-black {top: -7px;}
.fourd-5mm-border #border-3mm-colour {top: -5px;}

.krystalborder #border-3mm-black {top: -10px}
.krystalborder #border-3mm-colour {top: -5px}

.fourd-3mm-border #border-3mm-black div::after,
.fourd-5mm-border #border-3mm-black div::after,
.fourd-5mm-border #border-3mm-colour div::after,
.krystalborder #border-3mm-black div::after,
.krystalborder #border-3mm-colour div::after
{
	content: "";
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	display: block;
	border-radius: 10px;
	position: absolute;
	margin: 5px;
	z-index: 0;
}

.fourd-3mm-border #border-3mm-black div:last-child::after, 
.fourd-5mm-border #border-3mm-black div:last-child::after,
.fourd-5mm-border #border-3mm-colour div:last-child::after,
.krystalborder #border-3mm-black div:last-child::after,
.krystalborder #border-3mm-colour div:last-child::after
{
	z-index: 1;
}

.fourd-3mm-border.badge #border-3mm-black div::after,
.fourd-5mm-border.badge #border-3mm-black div::after,
.fourd-5mm-border.badge #border-3mm-colour div::after,
.krystalborder.badge #border-3mm-black div::after,
.krystalborder.badge #border-3mm-colour div::after 
{
	content: "";
	width: calc(100% - 75px);
	height: calc(100% - 20px);
	display: block;
	border-radius: 10px;
	position: relative;
	margin: 5px;
	margin-left: 60px;
}

.fourd-3mm-border.badge.shortplate18 #border-3mm-black div::after,
.fourd-5mm-border.badge.shortplate18 #border-3mm-black div::after,
.fourd-5mm-border.badge.shortplate18 #border-3mm-colour div::after,
.krystalborder.badge.shortplate18 #border-3mm-black div::after,
.krystalborder.badge.shortplate18 #border-3mm-colour div::after,

.fourd-3mm-border.badge.shortplate16 #border-3mm-black div::after,
.fourd-5mm-border.badge.shortplate16 #border-3mm-black div::after,
.fourd-5mm-border.badge.shortplate16 #border-3mm-colour div::after,
.krystalborder.badge.shortplate16 #border-3mm-black div::after,
.krystalborder.badge.shortplate16 #border-3mm-colour div::after,

.fourd-3mm-border.badge.shortplate14 #border-3mm-black div::after,
.fourd-5mm-border.badge.shortplate14 #border-3mm-black div::after,
.fourd-5mm-border.badge.shortplate14 #border-3mm-colour div::after,
.krystalborder.badge.shortplate14 #border-3mm-black div::after,
.krystalborder.badge.shortplate14 #border-3mm-colour div::after,

.fourd-3mm-border.badge.square #border-3mm-black div::after,
.fourd-5mm-border.badge.square #border-3mm-black div::after,
.fourd-5mm-border.badge.square #border-3mm-colour div::after,
.krystalborder.badge.square #border-3mm-black div::after,
.krystalborder.badge.square #border-3mm-colour div::after,

.fourd-3mm-border.badge.rangerover #border-3mm-black div::after,
.fourd-5mm-border.badge.rangerover #border-3mm-black div::after,
.fourd-5mm-border.badge.rangerover #border-3mm-colour div::after,
.krystalborder.badge.rangerover #border-3mm-black div::after,
.krystalborder.badge.rangerover #border-3mm-colour div::after,

.fourd-3mm-border.badge.motorcycle #border-3mm-black div::after,
.fourd-5mm-border.badge.motorcycle #border-3mm-black div::after,
.fourd-5mm-border.badge.motorcycle #border-3mm-colour div::after,
.krystalborder.badge.motorcycle #border-3mm-black div::after,
.krystalborder.badge.motorcycle #border-3mm-colour div::after
{
	content: "";
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	display: block;
	border-radius: 10px;
	position: absolute;
	margin: 5px;
}





.printedborder.badge #border-3mm-black div:last-child::after,
.printedborder.badge #border-3mm-colour div:last-child::after 
{
	content: "";
	width: calc(100% - 70px);
	height: calc(100% - 14px);
	display: block;
	border-radius: 10px;
	position: relative;
	margin: 5px;
	margin-left: 60px;
}

.printedborder.badge.shortplate18 #border-3mm-black div:last-child::after,
.printedborder.badge.shortplate18 #border-3mm-colour div:last-child::after,
.printedborder.badge.shortplate16 #border-3mm-black div:last-child::after,
.printedborder.badge.shortplate16 #border-3mm-colour div:last-child::after,
.printedborder.badge.shortplate14 #border-3mm-black div:last-child::after,
.printedborder.badge.shortplate14 #border-3mm-colour div:last-child::after,
.printedborder.badge.square #border-3mm-black div:last-child::after,
.printedborder.badge.square #border-3mm-colour div:last-child::after,
.printedborder.badge.rangerover #border-3mm-black div:last-child::after,
.printedborder.badge.rangerover #border-3mm-colour div:last-child::after,
.printedborder.badge.motorcycle #border-3mm-black div:last-child::after,
.printedborder.badge.motorcycle #border-3mm-colour div:last-child::after
{
	content: "";
	width: calc(100% - 14px);
	height: calc(100% - 14px);
	display: block;
	border-radius: 10px;
	position: relative;
	margin: 5px;
}






















/*		Badge styling		*/

#badge
{
	width: 100%;
	height: 100%;
	position: absolute;
	perspective: 2000px;
	z-index: 1;
	top: 0px;
	display: none;
}

#plate-preview-container.fourd-badge #badge{top: -3px;}

#badge div
{
	position: absolute;
	left: 0px;
    top: 0px;
    width: 100%;
	height: 100%;
	margin: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
	background-size: 50px 101px;
	background-position: left 5px bottom 5px;
	background-repeat: no-repeat;

	transform: rotate3d(1, 0, 0, -309deg) rotate3d(0, 1, 0, 0deg) rotate3d(0, 0, 1, -21deg) scale(1.87);
}

.square.badge.printedborder #badge div, .square.badge.krystalborder #badge div{background-position: left 15px bottom 15px;}

.rangerover.badge #badge div{background-position: left 5px bottom 25px;}


/*
 *		4D badge styles.
*/
#badge.fourd .badge1 {top: -3px; left: 0px; z-index: 1;}
#badge.fourd .badge2 {top: -2px; left: 0px; z-index: 0;}
#badge.fourd .badge3 {top: -1px; left: 0px; z-index: 0;}
#badge.fourd .badge4 {top: -0px; left: 0px; z-index: -1;}

.fourd.fourd-eng .badge1 {background-image: url("../img/eng/england-4d-top.svg");}
.fourd.fourd-eng .badge2 {background-image: url("../img/eng/england-4d-back.svg");}
.fourd.fourd-eng .badge3 {background-image: url("../img/eng/england-4d-back.svg");}
.fourd.fourd-eng .badge4 {background-image: url("../img/eng/england-4d-back.svg");}

.fourd.fourd-sco .badge1 {background-image: url("../img/sco/scotland-4d-top.svg");}
.fourd.fourd-sco .badge2 {background-image: url("../img/sco/scotland-4d-back.svg");}
.fourd.fourd-sco .badge3 {background-image: url("../img/sco/scotland-4d-back.svg");}
.fourd.fourd-sco .badge4 {background-image: url("../img/sco/scotland-4d-bottom.svg");}

.fourd.fourd-wal .badge1 {background-image: url("../img/wal/wales-4d-top.svg");}
.fourd.fourd-wal .badge2 {background-image: url("../img/wal/wales-4d-back.svg");}
.fourd.fourd-wal .badge3 {background-image: url("../img/wal/wales-4d-back.svg");}
.fourd.fourd-wal .badge4 {background-image: url("../img/wal/wales-4d-bottom.svg");}

.fourd.fourd-uk .badge1 {background-image: url("../img/uk/uk-4d-top.svg");}
.fourd.fourd-uk .badge2 {background-image: url("../img/uk/uk-4d-back.svg");}
.fourd.fourd-uk .badge3 {background-image: url("../img/uk/uk-4d-back.svg");}
.fourd.fourd-uk .badge4 {background-image: url("../img/uk/uk-4d-back.svg");}


#badge-fourd-bottom
{
	width: 100%;
	height: 100%;
	position: absolute;
	perspective: 2000px;
	z-index: 0;
	top: 0px;
	display: none;
}

#plate-preview-container.fourd-badge #badge-fourd-bottom{display: block;}

#badge-fourd-bottom div
{
	position: absolute;
	left: 0px;
    top: 0px;
    width: 100%;
	height: 100%;
	margin: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
	background-size: 50px 101px;
	background-position: left 5px bottom 5px;
	background-repeat: no-repeat;

	transform: rotate3d(1, 0, 0, -309deg) rotate3d(0, 1, 0, 0deg) rotate3d(0, 0, 1, -21deg) scale(1.87);
}

.standardoblong #badge-fourd-bottom .badge1, .square #badge-fourd-bottom .badge1, .rangerover #badge-fourd-bottom .badge1 {top: -3px; left: 0px; z-index: 1;}
.standardoblong #badge-fourd-bottom .badge2, .square #badge-fourd-bottom .badge2, .rangerover #badge-fourd-bottom .badge2 {top: -2px; left: 0px; z-index: 0;}
.standardoblong #badge-fourd-bottom .badge3, .square #badge-fourd-bottom .badge3, .rangerover #badge-fourd-bottom .badge3 {top: -1px; left: 0px; z-index: 0;}
.standardoblong #badge-fourd-bottom .badge4, .square #badge-fourd-bottom .badge4, .rangerover #badge-fourd-bottom .badge4 {top: -0px; left: 0px; z-index: -1;}

.standardoblong #badge-fourd-bottom .badge1::after, .square #badge-fourd-bottom .badge1::after, .rangerover #badge-fourd-bottom .badge1::after,
.standardoblong #badge-fourd-bottom .badge2::after, .square #badge-fourd-bottom .badge2::after, .rangerover #badge-fourd-bottom .badge2::after, 
.standardoblong #badge-fourd-bottom .badge3::after, .square #badge-fourd-bottom .badge3::after, .rangerover #badge-fourd-bottom .badge3::after,
.standardoblong #badge-fourd-bottom .badge4::after, .square #badge-fourd-bottom .badge4::after, .rangerover #badge-fourd-bottom .badge4::after
{
	content: ""; 
	width: 50px; 
	height: 101px; 
	border-radius: 10px; 
	position: absolute; 
	left: 5px; 
	bottom: 5px;
}

.rangerover #badge-fourd-bottom .badge1::after, .rangerover #badge-fourd-bottom .badge2::after, .rangerover #badge-fourd-bottom .badge3::after, .rangerover #badge-fourd-bottom .badge4::after
{
	bottom: 25px;
}

.rangerover.krystalborder #badge .badge1, .rangerover.krystalborder #badge .badge2, .rangerover.krystalborder #badge .badge3, .rangerover.krystalborder #badge .badge4,
.rangerover.printedborder #badge .badge1, .rangerover.printedborder #badge .badge2, .rangerover.printedborder #badge .badge3, .rangerover.printedborder #badge .badge4
{
	background-position: left 15px bottom 25px;
}

.rangerover.krystalborder #badge-fourd-bottom .badge1::after, .rangerover.krystalborder #badge-fourd-bottom .badge2::after, .rangerover.krystalborder #badge-fourd-bottom .badge3::after, .rangerover.krystalborder #badge-fourd-bottom .badge4::after,
.rangerover.printedborder #badge-fourd-bottom .badge1::after, .rangerover.printedborder #badge-fourd-bottom .badge2::after, .rangerover.printedborder #badge-fourd-bottom .badge3::after, .rangerover.printedborder #badge-fourd-bottom .badge4::after
{
	left: 15px;
}

.square.krystalborder #badge-fourd-bottom .badge1::after, .square.krystalborder #badge-fourd-bottom .badge2::after, .square.krystalborder #badge-fourd-bottom .badge3::after, .square.krystalborder #badge-fourd-bottom .badge4::after,
.square.printedborder #badge-fourd-bottom .badge1::after, .square.printedborder #badge-fourd-bottom .badge2::after, .square.printedborder #badge-fourd-bottom .badge3::after, .square.printedborder #badge-fourd-bottom .badge4::after
{
	bottom: 15px;
	left: 15px;
}

.standardoblong #badge-fourd-bottom .badge1::after, .square #badge-fourd-bottom .badge1::after, .rangerover #badge-fourd-bottom .badge1::after{background-color: rgb(255,255,255);}
.standardoblong #badge-fourd-bottom .badge2::after, .square #badge-fourd-bottom .badge2::after, .rangerover #badge-fourd-bottom .badge2::after,
.standardoblong #badge-fourd-bottom .badge3::after, .square #badge-fourd-bottom .badge3::after, .rangerover #badge-fourd-bottom .badge3::after,
.standardoblong #badge-fourd-bottom .badge4::after, .square #badge-fourd-bottom .badge4::after, .rangerover #badge-fourd-bottom .badge4::after
{
	background-color: rgb(135,135,135);
}

.standardoblong #badge-fourd-bottom .badge4::after, .square #badge-fourd-bottom .badge4::after, .rangerover #badge-fourd-bottom .badge4::after{box-shadow: 0px 0px 5px rgba(0,0,0,0.4);}















/*
 *		4D badge styles.
*/
#badge.fourd-printed .badge1 {top: -3px; left: 0px; z-index: 1;}
#badge.fourd-printed .badge2 {top: -2px; left: 0px; z-index: 0;}
#badge.fourd-printed .badge3 {top: -1px; left: 0px; z-index: 0;}
#badge.fourd-printed .badge4 {top: -0px; left: 0px; z-index: -1;}

.fourd-printed.fourd-eng-printed .badge1 {background-image: url("../img/eng/england-4d-printed.svg");}
.fourd-printed.fourd-eng-printed .badge2 {background-image: none;}
.fourd-printed.fourd-eng-printed .badge3 {background-image: none;}
.fourd-printed.fourd-eng-printed .badge4 {background-image: none;}

.fourd-printed.fourd-sco-printed .badge1 {background-image: url("../img/sco/scotland-4d-printed.svg");}
.fourd-printed.fourd-sco-printed .badge2 {background-image: none;}
.fourd-printed.fourd-sco-printed .badge3 {background-image: none;}
.fourd-printed.fourd-sco-printed .badge4 {background-image: none;}

.fourd-printed.fourd-wal-printed .badge1 {background-image: url("../img/wal/wales-4d-printed.svg");}
.fourd-printed.fourd-wal-printed .badge2 {background-image: none;}
.fourd-printed.fourd-wal-printed .badge3 {background-image: none;}
.fourd-printed.fourd-wal-printed .badge4 {background-image: none;}

.fourd-printed.fourd-uk-printed .badge1 {background-image: url("../img/uk/uk-4d-printed.svg");}
.fourd-printed.fourd-uk-printed .badge2 {background-image: none;}
.fourd-printed.fourd-uk-printed .badge3 {background-image: none;}
.fourd-printed.fourd-uk-printed .badge4 {background-image: none;}

.standardoblong.fourd-printed-badge #badge-fourd-bottom, 
.square.fourd-printed-badge #badge-fourd-bottom, 
.rangerover.fourd-printed-badge #badge-fourd-bottom
{
	display: block;
}


.fourd-printed .badge1::after,
.fourd-printed .badge2::after,
.fourd-printed .badge3::after,
.fourd-printed .badge4::after
{
	position: absolute;
	left: 5px;
	bottom: 5px;
	content: "";
	width: 50px;
	height: 101px;
	border-radius: 10px;
}

.fourd-printed .badge1::after
{
	content: "";
}









/**
 *		Printed badge styles.
*/

#badge.printed .badge1 {top: -3px; left: 0px; z-index: 1;}
#badge.printed .badge2 {top: -2px; left: 0px; z-index: 0;}
#badge.printed .badge3 {top: -1px; left: 0px; z-index: 0;}
#badge.printed .badge4 {top: -0px; left: 0px; z-index: -1;}

.printed.printed-eng .badge1 {background-image: none;}
.printed.printed-eng .badge2 {background-image: none;}
.printed.printed-eng .badge3 {background-image: none;}
.printed.printed-eng .badge4 {background-image: url("../img/eng/england-printed.svg");}

.printed.printed-sco .badge1 {background-image: none;}
.printed.printed-sco .badge2 {background-image: none;}
.printed.printed-sco .badge3 {background-image: none;}
.printed.printed-sco .badge4 {background-image: url("../img/sco/scotland-printed.svg");}

.printed.printed-wal .badge1 {background-image: none;}
.printed.printed-wal .badge2 {background-image: none;}
.printed.printed-wal .badge3 {background-image: none;}
.printed.printed-wal .badge4 {background-image: url("../img/wal/wales-printed.svg");}

.printed.printed-uk .badge1 {background-image:none;}
.printed.printed-uk .badge2 {background-image:none;}
.printed.printed-uk .badge3 {background-image:none;}
.printed.printed-uk .badge4 {background-image: url("../img/uk/uk-printed.svg");}


/**
 *		Gel badge styles.
*/

#badge.gel .badge1 {top: -3px; left: 0px; z-index: 1;}
#badge.gel .badge2 {top: -2px; left: 0px; z-index: 0;}
#badge.gel .badge3 {top: -1px; left: 0px; z-index: 0;}
#badge.gel .badge4 {top: -0px; left: 0px; z-index: -1;}

.gel.threed-eng .badge1 {background-image: url("../img/eng/england-gel.svg");}
.gel.threed-eng .badge2 {background-image: url("../img/eng/england-gel-back.svg");}
.gel.threed-eng .badge3 {background-image: url("../img/eng/england-gel-back.svg");}
.gel.threed-eng .badge4 {background-image: url("../img/eng/england-gel-bottom.svg");}

.gel.threed-sco .badge1 {background-image: url("../img/sco/scotland-gel.svg");;}
.gel.threed-sco .badge2 {background-image: url("../img/sco/scotland-gel-back.svg");;}
.gel.threed-sco .badge3 {background-image: url("../img/sco/scotland-gel-back.svg");;}
.gel.threed-sco .badge4 {background-image: url("../img/sco/scotland-gel-bottom.svg");}

.gel.threed-wal .badge1 {background-image: url("../img/wal/wales-gel.svg");;}
.gel.threed-wal .badge2 {background-image: url("../img/wal/wales-gel-back.svg");;}
.gel.threed-wal .badge3 {background-image: url("../img/wal/wales-gel-back.svg");;}
.gel.threed-wal .badge4 {background-image: url("../img/wal/wales-gel-bottom.svg");}

.gel.threed-uk .badge1 {background-image: url("../img/uk/uk-gel.svg");;}
.gel.threed-uk .badge2 {background-image: url("../img/uk/uk-gel-back.svg");;}
.gel.threed-uk .badge3 {background-image: url("../img/uk/uk-gel-back.svg");;}
.gel.threed-uk .badge4 {background-image: url("../img/uk/uk-gel-bottom.svg");}

#badge.gel .badge4::after
{
	content: ""; 
	width: 50px; 
	height: 101px; 
	border-radius: 10px; 
	position: absolute; 
	left: 5px; 
	bottom: 5px;
	box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
}





.hide-4d-badge::after{content: ""; display: none;}


.ui-widget-overlay
{
	background: rgba(0,0,0,0.8) !important;
	opacity: 1 !important;
}





































/*	Supplier details	*/


#supplier-details 
{
	width: 100%;
	height: 100%;
	position: absolute;
	perspective: 2000px;
	z-index: 0;
}

#supplier-details p 
{
	position: absolute;
	font-size: 4px;
	left: 0px;
    top: 0px;
    width: 100%;
	height: 100%;
	margin: 0;
	padding-bottom: 8px;
    display: flex;
    align-items: flex-end;
	justify-content: center;
	
	transform: rotate3d(1, 0, 0, -309deg) rotate3d(0, 1, 0, 0deg) rotate3d(0, 0, 1, -21deg) scale(1.87);
}

#bsau
{
	width: 100%;
	height: 100%;
	position: absolute;
	perspective: 2000px;
	z-index: -0;
}

#bsau p
{
	position: absolute;
	font-size: 4px;
	left: 0px;
    top: 0px;
	width: 100%;
	height: 100%;
	margin: 0;
	padding-bottom: 8px;
	padding-right: 15px;
    display: flex;
    align-items: flex-end;
	justify-content: flex-end;
	
	transform: rotate3d(1, 0, 0, -309deg) rotate3d(0, 1, 0, 0deg) rotate3d(0, 0, 1, -21deg) scale(1.87);
}










/*	########################################################

		Number plate controls styling

	########################################################*/

#user-vrm
{
	width: 100%;
    padding: 4px 2px;
    font-size: 16px;
    margin-bottom: 20px;
	margin-top: 4px;
	text-transform: uppercase;
}

#character-spacing-selection
{
	width: 100%;
    padding: 4px 2px;
    font-size: 16px;
    margin-bottom: 20px;
    margin-top: 4px;
}

#character-spacing-description
{
	display: inline;
	padding: 0;
}

.plate-controls-options-container 
{
	padding: 20px;
}

.plate-options-container
{
	display: none;
}

/*	default to off */
#plate-sizes-options
{
	display: none;
}

#plates-preview-controls-container
{
	left: 0px;
	width: 100%;
	display: flex;
	flex-direction: column;
}

#plates-preview-controls-container label.plate-controls-radio-toggle-label
{
	display: block;
	width: 100%;
	padding: 10px 0px 10px 10px;
	cursor: pointer;

	font-family: 'Raleway', sans-serif;
}

#plates-preview-controls-container label.plate-controls-radio-toggle-label {user-select: none;}

#plates-preview-controls-container .plate-controls-radio-toggle{display: none;}
#plates-preview-controls-container .plate-controls-radio-toggle:not(:checked) ~ div {display: none;}
#plates-preview-controls-container .plate-controls-radio-toggle:checked ~ div{display: block; overflow: hidden; padding: 10px;}

#plates-preview-controls-container .plate-controls-radio-toggle:checked ~ label {background: rgb(209, 209, 209); border-bottom: 1px solid #cecece; font-weight: bold}
#plates-preview-controls-container .plate-controls-radio-toggle:not(:checked) ~ label {background: rgb(240, 240, 240); border-bottom: 1px solid #cecece}

.selection-option-description 
{
	position: relative;
	margin-bottom: 20px;
	font-style: italic;
	font-weight: bold;
}

#character-type-selection li,
#krystal-colours-selection li,
#krystal-border-selection li,
#printed-border-selection li,
#badge-selection li
{
	position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    margin-right: 10px;
    margin-bottom: 35px;
}

#character-type-selection li 
{
	margin-bottom: 95px;
}

#krystal-border-selection li
{
	margin-bottom: 75px;
}

#badge-selection li
{
	margin-bottom: 75px;
}

#krystal-colours-selection
{
	margin-top: 40px;
}

#krystal-border-selection
{
	margin-top: 50px;
}

#badge-selection
{
	margin-top: 50px;
}


#krystal-text-colour-container
{
	display: block;
}

#front-plate-selection, #rear-plate-selection
{
	width: 100%;
    padding: 4px 2px;
	font-size: 16px;
	margin-bottom: 20px;
	margin-top: 4px;
}

#front-plate-selection li input[type="radio"],
#rear-plate-selection li input[type="radio"]
{
	display: none;
}

#front-plate-selection li img,
#rear-plate-selection li img 
{
	cursor: pointer;
}

#front-plate-description {display: inline; padding: 0;}
#rear-plate-description {display: inline; padding: 0;}


.krystal-colour-selection,
.border-selection
{display: none;}

.label-text-description 
{
	position: absolute;
	top: 150%;
}

.close-tab-cross-icon
{
	display: none;
    position: absolute;
    top: -30px;
    left: 0px;
    width: 30px;
    height: 30px;
    font-size: 20px;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-right: 1px solid #cecece;
    border-top: 1px solid #cecece;
	color: #5d5d5d;
	cursor: pointer;
}

#character-type-selection
{
	margin-top: 85px;
}

.option-explainer-icon
{
	position: absolute;
	top: -55px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-family: arial;
	cursor: pointer;
	background-image: url("../img/explainers/explainer-icon.jpg");
	background-size: 20px 20px;
	background-position: center center;
	background-repeat: no-repeat;
}

.option-explainer-icon-inline
{
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-family: arial;
	cursor: pointer;
	background-image: url("../img/explainers/explainer-icon.jpg");
	background-size: 20px 20px;
	background-position: center center;
	background-repeat: no-repeat;
}

#front-plate-badge-warning,
#rear-plate-badge-warning
{
	font-size: 12px;
	font-weight: bold;
	color: #ff0000;
	display: inline;
}










#blackout
{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.8);
	z-index: 99;

	display: none;
	align-items: center;
	justify-content: center;

	pointer-events: auto;
}

#close-blackout
{
	position: fixed;
	z-index: 100;
	right: 20px;
	top: 20px;
	height: 40px;
	width: 40px;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 35px;
	color: #ffffff;
	cursor: pointer;
}

#blackout-contents img
{
	pointer-events: none;
	max-width: 95vw;
}




















#plates-preview-controls-container-temp
{
    display: none;
    position: fixed;
    bottom: 130px;
    right: 40px;
    width: 90%;
    height: 170px;
    border: 1px solid black;
}

input[type="range"]
{
	width: 100%;
}





















































/**********************************************

	RESPONSIVE STYLES		

**********************************************/

#small-screen-show-order-details
{
	display: none;
	width: 40px;
}

@media only screen and (max-width: 1440px) 
{
	#plate-preview-container.standardoblong,
	#plate-preview-container.rangerover,
	#plate-preview-container.square,
	#plate-preview-container.motorcycle,
	#plate-preview-container.shortplate18,
	#plate-preview-container.shortplate16,
	#plate-preview-container.shortplate14,
	#plate-preview-container.nofrontplate,
	#plate-preview-container.norearplate
	{
		transform: scale(0.8);
	}
}

@media only screen and (max-width: 1285px)
{
	header #options-nav label
	{
		font-size: 15px;
		width: 160px;
	}
}

@media only screen and (max-width: 1270px) 
{
	#plate-preview-container.standardoblong,
	#plate-preview-container.rangerover,
	#plate-preview-container.square,
	#plate-preview-container.motorcycle,
	#plate-preview-container.shortplate18,
	#plate-preview-container.shortplate16,
	#plate-preview-container.shortplate14,
	#plate-preview-container.nofrontplate,
	#plate-preview-container.norearplate
	{
		transform: scale(0.7);
	}
}

@media only screen and (max-width: 1185px)
{
	header #options-nav label
	{
		font-size: 14px;
		width: 140px;
	}
}

@media only screen and (max-width: 1170px) 
{
	#plate-preview-container.standardoblong,
	#plate-preview-container.rangerover,
	#plate-preview-container.square,
	#plate-preview-container.motorcycle,
	#plate-preview-container.shortplate18,
	#plate-preview-container.shortplate16,
	#plate-preview-container.shortplate14,
	#plate-preview-container.nofrontplate,
	#plate-preview-container.norearplate
	{
		transform: scale(0.6);
	}
}

@media only screen and (max-width: 1090px)
{
	header #options-nav label
	{
		font-size: 13px;
		width: 125px;
	}
}

@media only screen and (max-width: 1060px) 
{
	#options-nav 
	{
		display: flex;
		background-color: #ffffff;
		border-top: 1px solid rgba(0,0,0,0.2);
		z-index: 1;
	}

	#header 
	{
		justify-content: center;
	}

	#branding 
	{
		margin-right: 0;
	}

	#options-nav label
	{
		width: 20%;
		font-size: 13px;
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}

	#options-nav label:nth-child(1)::before,
	#options-nav label:nth-child(2)::before,
	#options-nav label:nth-child(3)::before,
	#options-nav label:nth-child(4)::before,
	#options-nav label:nth-child(5)::before


	{content: "";}

	.hero-section
	{
		flex-direction: column;
		min-height: auto;
		height: calc(100vh - 209px);
	}

	.hero-section-controls-container
	{
		width: 100%;
		height: 0px;
		border: none;
	}

	#plates-preview-controls-container
	{
		width: 100vw;
		max-width: 100%;

		flex-direction: row;
	}

	.plate-controls-options-container
	{
		display: block;
		position: absolute;
		bottom: 80px;
		left: 0px;
		border-top: 1px solid rgba(0,0,0,0.2);
		width: 100%;
		background-color: #ffffff;
		border-left: none;
		border-right: none;
		z-index: 4;
	}

	#plate-vrm-sizes-options
	{
		height: 270px;
	}

	#plates-preview-controls-container label.plate-controls-radio-toggle-label
	{
		border-right: 1px solid rgba(0,0,0,0.5);
		flex-shrink: 0;
		height: 60px;
    	font-size: 13px;
		text-align: center;
		padding: 0;
		justify-content: center;
		align-items: center;
		display: flex;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	#plates-preview-controls-container .plate-controls-radio-toggle:checked ~ label {font-weight: 500; border: none; border-right: 2px solid #ffffff;}
	#plates-preview-controls-container .plate-controls-radio-toggle:not(:checked) ~ label {border: none; border-right: 2px solid #ffffff;}

	.last-controls-label{border-right: none !important;}

	#small-screen-show-order-details
	{
		display: block;
	}

	#product-summary
	{
		position: fixed;
		left: calc(50% - 163px);
   		bottom: 10px;
		background-color: #555;
		width: 325px;
		z-index: 1;
		display: flex;
		flex-direction: column;
		padding: 15px;
		border: 1px solid #fff;

		display: none;
	}

	#fixed-footer 
	{
		justify-content: space-between;
		padding: 0px 0px 0px 15px;
	}

	#primary-cta 
	{
		height: 100%;
	}

	#primary-cta button 
	{
		height: 100%;
		border-radius: 0px;
	}

	#small-screen-show-order-details 
	{
		margin-left: 10px;
	}

	#front-rear-switcher
	{
		position: relative;
		top: 10px;
		left: 10px;
		padding: 0;
		border: none;
	}

	#front-rear-switcher #front-plate-switch, 
	#front-rear-switcher #rear-plate-switch 
	{
		width: auto;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		margin: 0;
		margin-right: 10px;
		border-top: none;
	}

	#plate-preview-container.standardoblong,
	#plate-preview-container.rangerover,
	#plate-preview-container.square,
	#plate-preview-container.motorcycle,
	#plate-preview-container.shortplate18,
	#plate-preview-container.shortplate16,
	#plate-preview-container.shortplate14,
	#plate-preview-container.nofrontplate,
	#plate-preview-container.norearplate
	{
		top: 150px;
		transform: scale(0.8);
	}

	.product-options-list
	{
		display: flex;
		padding: 0;
		margin: 0;
	}

	.product-options-list li 
	{
		width: 65px;
		height: 65px;
		background-color: #ffffff;
		flex-shrink: 0;
		margin-bottom: 35px;
	}

	#plates-preview-controls-container .plate-controls-options-container
	{
		padding: 10px;
	}

	#character-type-selection 	{width: 690px;}
	#krystal-colours-selection	{width: 525px;}
	#krystal-border-selection	{width: 1095px;}
	#badge-selection			{width: 1055px;}

	.overflow-scroll 
	{
		overflow-x: scroll;
		overflow-y: hidden;
		scroll-behavior: smooth;
	}

	.scroll-controls-container
	{
		text-align: right;
	}

	.scroll-right-options, .scroll-left-options 
	{
		position: static;
		top: 10px;
		width: 35px;
		height: 35px;
		background-color: rgb(243 243 243 / 85%);
		border: 1px solid rgba(0,0,0,0.3);
		color: #6b6b6b;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 2px;
	}

	.scroll-left-options {right: 60px;}
	.scroll-right-options {right: 20px;}

	.close-tab-cross-icon
	{
		display: flex;
	}

	#front-plate-selection, 
	#rear-plate-selection,
	#character-spacing-selection,
	#user-vrm
	{
		margin-bottom: 10px;
	}

	#character-type-selection li, 
	#krystal-colours-selection li, 
	#krystal-border-selection li, 
	#printed-border-selection li, 
	#badge-selection li
	{
		margin-bottom: 35px;
	}

	#show-angles 
	{
		width: 100%;
	}

	#primary-cta 
	{
		width: 100%;
		justify-content: space-between;
	}
}

@media only screen and (max-width: 840px)
{
	#plate-preview-container.standardoblong,
	#plate-preview-container.rangerover,
	#plate-preview-container.square,
	#plate-preview-container.motorcycle,
	#plate-preview-container.shortplate18,
	#plate-preview-container.shortplate16,
	#plate-preview-container.shortplate14,
	#plate-preview-container.nofrontplate,
	#plate-preview-container.norearplate
	{
		top: 120px;
		transform: scale(0.7);
	}
}

@media only screen and (max-width: 740px)
{
	#plate-preview-container.standardoblong,
	#plate-preview-container.rangerover,
	#plate-preview-container.square,
	#plate-preview-container.motorcycle,
	#plate-preview-container.shortplate18,
	#plate-preview-container.shortplate16,
	#plate-preview-container.shortplate14,
	#plate-preview-container.nofrontplate,
	#plate-preview-container.norearplate
	{
		top: 100px;
		transform: scale(0.6);
	}
}

@media only screen and (max-width: 600px) 
{
	#plates-preview-controls-container label.plate-controls-radio-toggle-label
	{
		font-size: 75%;
	}

	#fixed-footer 
	{
		height: 60px;
		padding: 0px;
	}

	#total-price 
	{
		flex-grow: 1;
		text-align: center;
		margin: 0;
	}

	#primary-cta button 
	{
		padding: 20px 30px;
	}


	#plate-preview-container.standardoblong,
	#plate-preview-container.rangerover,
	#plate-preview-container.square,
	#plate-preview-container.motorcycle,
	#plate-preview-container.shortplate18,
	#plate-preview-container.shortplate16,
	#plate-preview-container.shortplate14,
	#plate-preview-container.nofrontplate,
	#plate-preview-container.norearplate
	{
		top: 70px;
		transform: scale(0.4);
	}

	.hero-section
	{
		min-height: auto;
		height: calc(100vh - 190px);
	}

	.plate-controls-options-container 
	{
	   	width: 100%;
	}

	#front-rear-switcher 
	{
		justify-content: center;
		width: calc(100% - 20px);
	}

	#front-rear-switcher #front-plate-switch, 
	#front-rear-switcher #rear-plate-switch 
	{
		width: 45%;
		max-width: 45%;
		min-width: unset;
	}

	#front-rear-switcher #rear-plate-switch 
	{
		margin-right: 0px;
	}

	#angle-options
	{
		top: 70px;
	}
}



@media only screen and (max-width: 450px) 
{
	#primary-cta button
	{
		padding: 20px;
		font-size: 16px;
	}
}

@media only screen and (max-width: 410px)
{
	#plate-preview-container.standardoblong,
	#plate-preview-container.rangerover,
	#plate-preview-container.square,
	#plate-preview-container.motorcycle,
	#plate-preview-container.shortplate18,
	#plate-preview-container.shortplate16,
	#plate-preview-container.shortplate14,
	#plate-preview-container.nofrontplate,
	#plate-preview-container.norearplate
	{
		top: 40px;
		transform: scale(0.3);
	}
}

@media only screen and (max-width: 360px)
{
	#total-price 
	{
			font-size: 16px;
	}

	#show-angles div 
	{
		width: 80px;
		height: 80px;
	}
}

@media only screen and (max-width: 315px)
{
	#plate-preview-container.standardoblong,
	#plate-preview-container.rangerover,
	#plate-preview-container.square,
	#plate-preview-container.motorcycle,
	#plate-preview-container.shortplate18,
	#plate-preview-container.shortplate16,
	#plate-preview-container.shortplate14,
	#plate-preview-container.nofrontplate,
	#plate-preview-container.norearplate
	{
		top: 40px;
		transform: scale(0.25);
	}
}

@media only screen and (max-width: 285px)
{
	#show-angles div 
	{
		width: 70px;
		height: 70px;
	}
}




.grayscale-images
{
	opacity: 0.5;
	filter: grayscale(100%)
}

.temporarily-disabled 
{
	top: 0;
    position: absolute;
    left: 0;
    font-weight: bold;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 9px;
    text-align: center;
}