@font-face { 
	font-family: "TitleHeavy"; 
	src: url('fonts/fontheavy.ttf'), url('fonts/fontheavy.ttf');
}




.HeaderVideo {
height: 1000px;

}

@media only screen and (max-width: 2200px) {
.HeaderVideo {
height: 800px;
}
}

@media only screen and (max-width: 1920px) {
.HeaderVideo {
height: 700px;
}
}

@media only screen and (max-width: 1600px) {
.HeaderVideo {
height: 600px;
}
}

@media only screen and (max-width: 1024px) {
.HeaderVideo {
height: 500px;
}
}

@media only screen and (max-width: 640px) {
.HeaderVideo {
height: 300px;
}
}



.DescentZippee2 {
content: url(images/zippee2-descent1.webp);
}

@media only screen and (max-width: 640px) {
.DescentZippee2 {
content: url(images/zippee2-descent2.webp);
}
}


.DescentZippee {
content: url(images/zippee-batt.webp);
}

@media only screen and (max-width: 640px) {
.DescentZippee {
content: url(images/zippee-batt-m.webp);
}
}



.DescentNano {
content: url(images/descent2.webp);
}

@media only screen and (max-width: 640px) {
.DescentNano {
content: url(images/descent2-m.webp);
}
}



.DescentNano2 {
content: url(images/nanoute2-descent-desktop.webp);
}

@media only screen and (max-width: 640px) {
.DescentNano2 {
content: url(images/nanoute2-descent-mobile.webp);
}
}


.DescentEV5 {
content: url(images/descent.webp);
}

@media only screen and (max-width: 640px) {
.DescentEV5 {
content: url(images/descent-m.webp);
}
}


.AsianUses {
width: 80%;
}
@media only screen and (max-width: 640px) {
.AsianUses {
width: 100%;
}
}


.MobileDarken {
background: transparent;
}
@media only screen and (max-width: 640px) {
.MobileDarken {
background: rgba(0,0,0,0.5);
}
}


.SubSpecTable {
width: 90%;
}
@media only screen and (max-width: 640px) {
.SubSpecTable {
width: 100%;
}
}

.SpecHeadline {
font-family: "Headliner";
font-size: 36px !important;
color: white !important;
}
@media only screen and (max-width: 640px) {
.SpecHeadline {
font-size: 21px !important;
}
}

.SpecHeadlineSub {
font-family: "TitleHeavy";
font-size: 20px !important;
color: rgba(180,180,180,1) !important;
}
@media only screen and (max-width: 640px) {
.SpecHeadlineSub {
font-size: 14px !important;
}
}

.SpecIcons {
height: 26px;
width: auto;
margin-right: 4px;
}
@media only screen and (max-width: 640px) {
.SpecIcons {
height: 18px;
width: auto;
margin-right: 4px;
}
}

.DashboardPanel {
width: 65%;
margin-bottom: 20px;
}
@media only screen and (max-width: 640px) {
.DashboardPanel {
width: 95%;
}
}


.NanoUteColours {
width: 100%;
margin-bottom: 20px;
}

.PaintColour {
width: 60px;
height: 60px;
margin-right: 10px;
margin-bottom: 10px;
border: 0;
filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.8));
z-index: 99999;
}

@media only screen and (max-width: 640px) {
.PaintColour {
width: 40px;
height: 40px;
margin-right: 10px;
margin-bottom: 10px;
}
}

.PaintColour:hover {
cursor: hand;
filter: drop-shadow(2px 2px 5px rgba(255,255,255,1));
}



video {
  object-fit: cover;
  position: absolute;
  top: 0px;
  left: 0;
  height: 100%;
  width: 100%;

}
.video-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}


.Models {
width: 95%;
max-width: 600px;
}


.Price {

font-family: "Hancock";
font-size: 90px;
line-height: 90px;
}

.PriceFrom {
font-family: "OldSans";
font-size: 40px;
vertical-align: top;
top: 0.1em;
left: 0.2em;
letter-spacing: -0.02em;
position: relative;
}



/* Price on a DARK background */
.PriceDark {
text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.4) !important;
background: linear-gradient(to bottom, rgba(150, 150, 180, 1), rgba(20, 20, 100, 1));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}


/* Price on a LIGHT background */
.PriceLight {
background: linear-gradient(to bottom, rgba(150, 150, 180, 1), rgba(24, 34, 46, 1));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}


.ShadowSVG {
filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.8)) !important;
}

.ShadowedText {
text-shadow: 4px 4px 4px rgba(0,0,0,0.8);
}
















.EVmodel {
width: 70%;
height: auto;
border: 0;
margin-bottom: 15px;
}

@media only screen and (max-width: 640px) {
.EVmodel {
width: 95%;
height: auto;
border: 0;
}
}


.EVmodel2 {
margin-top: 60px;
width: 20vw;
height: auto;
border: 0;
}
@media only screen and (max-width: 640px) {
.EVmodel2 {
width: 80%;
height: auto;
border: 0;
}
}


.EVmodel3 {
width: 80%;
height: auto;
border: 0;
}
@media only screen and (max-width: 640px) {
.EVmodel3 {
width: 100%;
height: auto;
border: 0;
}
}


.EVmodel4 {
width: 30%;
height: auto;
border: 0;
}
@media only screen and (max-width: 640px) {
.EVmodel4 {
width: 90%;
height: auto;
border: 0;
}
}



.EVmodel5 {
width: 15%;
height: auto;
border: 0;
}
@media only screen and (max-width: 640px) {
.EVmodel5 {
width: 70%;
height: auto;
border: 0;
}
}


.EVmodel6 {
margin-top: 60px;
width: 45vw;
height: auto;
border: 0;
}
@media only screen and (max-width: 640px) {
.EVmodel6 {
width: 90%;
height: auto;
border: 0;
}
}

.ComingSoon {
margin-top: 60px;
width: 35vw;
height: auto;
border: 0;
}
@media only screen and (max-width: 640px) {
.ComingSoon {
width: 90%;
height: auto;
border: 0;
}
}



.BrochureButton {
width: 200px;
}

@media only screen and (max-width: 640px) {
/*For mobile phones*/

.BrochureButton {
width: 60%;
height: auto;
}
}



.bg_ev5 {

  background-image: url("images/ev5-desktop.jpg");

  height: 800px; 
  overflow: hidden;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
 
}

@media only screen and (max-width: 640px) {
/*For mobile phones*/

.bg_ev5 {
  
  background-image: url("images/ev5-mobile.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 800px;
  
}
}



.ImageBackgroundsLight {
background-position: center; 
background-repeat: no-repeat; 
background-size: cover;
color: Black !important;
}


.ImageBackgroundsDark {

color: White !important;
text-shadow: 3px 3px 5px rgba(0,0,0,0.7);

background-position: center; 
background-repeat: no-repeat; 
background-size: cover;
}

.WhiteText {
color: White !important;
}

.BlackText {
color: Black !important;
}

.InvertDarkImage {
filter: invert(100%) brightness(500%) drop-shadow(4px 4px 4px rgba(0,0,0,0.8));
}






.Prestige {

  background-image: url("images/prestige.webp");

  height: 800px; 
  overflow: hidden;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media only screen and (max-width: 640px) {
.Prestige {
background-image: url("images/prestige-mobile.webp");
height: 500px;
}
}

.PrestigeOverlay {
background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));

}




.bg_NanoUTE {

  background-image: url("images/nanoute-backdrop2.webp");

  height: 800px; 
  overflow: hidden;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
 
}

@media only screen and (max-width: 640px) {
/*For mobile phones*/

.bg_NanoUTE {
  
  background-image: url("images/nanoute-backdrop2mob.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  
}
}

.NanoUTE_Side {
width: 65%;
}

@media only screen and (max-width: 640px) {
.NanoUTE_Side {
width: 100%;
margin-top: 30px;
}
}










.bg_NanoUTE2 {

  background-image: url("images/nanoute2-night.webp");

  height: 800px; 
  overflow: hidden;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
 
}

@media only screen and (max-width: 640px) {
/*For mobile phones*/

.bg_NanoUTE2 {
  
  background-image: url("images/nanoute2-night-mobile.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  
}
}











.ev5_Side {
width: 65%;
}

@media only screen and (max-width: 640px) {
.ev5_Side {
width: 100%;
margin-top: 30px;
}
}





.EnquiryButtonDark {

background: rgba(51,102,204,1); 
font-family: "TitleHeavy";
font-size: 18px;
font-weight: Bold;
text-decoration: none;
text-align: center;
text-shadow: 2px 2px 3px rgba(0,0,0,0.3);
line-height: 1em;
box-shadow: inset 0px 0px 4px 0px rgba(0,0,0,0.8);

color: rgba(255,255,255,1);
margin: 5px;
height: 50px;
padding-left: 40px;
padding-right: 40px;
padding-top: 15px;
padding-bottom: 15px;

border: 1px solid rgba(255,255,255,0);
  moz-border-radius: 10px;
  -webkit-border-radius: 10px;

}

.EnquiryButtonDark:hover {

background: rgba(0,128,255,1);
border: 1px solid rgba(255,255,255,1);

animation-name: EBD !important;
animation-duration: 0.3s !important; 
animation-fill-mode: ease-in-out !important;
}

@keyframes EBD {
  from {background: rgba(51,102,204,1); border: 1px solid rgba(255,255,255,0.2);}
  to {background: rgba(0,128,255,1); border: 1px solid rgba(255,255,255,1);}
}





.DisplayHeightOverride {
height: 900px;
background-position: center top;
}
@media only screen and (max-width: 640px) {
.DisplayHeightOverride {
height: 700px;
}
}

.DisplayHeightOverrideMiddle {
height: 900px;
background-position: center;
}
@media only screen and (max-width: 640px) {
.DisplayHeightOverrideMiddle {
height: 700px;
}
}




.bg_BuyEbarrow {
  background-image: url("images/ebarrow-buy.webp");
  height: 1000px; 
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media only screen and (max-width: 640px) {
.bg_BuyEbarrow {
  background-image: url("images/ebarrow-buy.webp");
  height: 700px; 
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
}




.bg_BuyZippee2 {
  background-image: url("images/zippee2-town2.webp");
  height: 1000px; 
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media only screen and (max-width: 640px) {
.bg_BuyZippee2 {
  background-image: url("images/zippee2-town2.webp");
  height: 700px; 
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
}




.bg_BuyZippee {
  background-image: url("images/zippee-buy.webp");
  height: 1000px; 
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media only screen and (max-width: 640px) {
.bg_BuyZippee {
  background-image: url("images/zippee-buy.webp");
  height: 700px; 
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
}





.bg_BuyEV5 {
  background-image: url("images/cargo-ev5-buy.webp");
  height: 900px; 
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media only screen and (max-width: 640px) {
.bg_BuyEV5 {
  background-image: url("images/cargo-ev5-buy.webp");
  height: 600px; 
  overflow: hidden;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}
}




.bg_BuynanoUte {
  background-image: url("images/nanoute-buy.webp");
  height: 1000px; 
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media only screen and (max-width: 640px) {
.bg_BuynanoUte {
  background-image: url("images/nanoute-buy.webp");
  height: 500px; 
  overflow: hidden;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}
}



.FooterDarkTheme {
background: rgba(0,0,0,1) !important;
color: rgba(255,255,255,1) !important;

}





.bg_BuynanoUte2 {
  background-image: url("images/nanoute2-1.webp");
  height: 1000px; 
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media only screen and (max-width: 640px) {
.bg_BuynanoUte2 {
  background-image: url("images/nanoute2-1.webp");
  height: 500px; 
  overflow: hidden;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}
}









.bg_Ebarrow {

  background-image: url("images/ebarrow-discover.webp");

  height: 800px; 
  overflow: hidden;

  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
 
}

@media only screen and (max-width: 640px) {
/*For mobile phones*/

.bg_Ebarrow {
  
  background-image: url("images/ebarrow-discover-mob.webp");
  background-position: top right;
  background-repeat: no-repeat;
  background-size: cover;
  
}
}


.bg_Zippee {

  background-image: url("images/zippee-night.webp");

  height: 800px; 
  overflow: hidden;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
 
}

@media only screen and (max-width: 640px) {
/*For mobile phones*/

.bg_Zippee {
  
  background-image: url("images/zippee-night-mob.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  
}
}






.bg_Zippee2 {

  background-image: url("images/zippee2-night.webp");

  height: 800px; 
  overflow: hidden;

  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
 
}

@media only screen and (max-width: 640px) {
/*For mobile phones*/

.bg_Zippee2 {
  
  background-image: url("images/zippee2-night-m.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  
}
}