/* This page
-------------------------------------------------- */
html, body {height:100%;scroll-behavior: smooth;}
body {background-color:#fff;color:#000;text-align:left;font-family:"Open Sans", Arial, Helvetica, sans-serif;font-weight:400;line-height:1.5em;font-size:18px;}
h1, h2, h3, h4, h5 {font-family:"Open Sans", Arial, Helvetica, sans-serif; margin-top:0.5em;}
h1 {
  font-size:2.7rem;
  font-weight:800;
  line-height:1.3em;
  margin-bottom:0.5em;
  text-transform:uppercase;
}
h2 {
  font-size:1.8em;
  font-weight:700;
  margin-bottom:0.5em;
  text-transform:uppercase;
}
h3 {
  font-size:1.2em;
  font-weight:600;
  text-transform:uppercase;
}

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center; 
  justify-content: center;
  flex-direction: column;
}


#info ul h5 {font-size:1.6em;font-weight:400;color:#656b7b;}

/* Hero Page
-------------------------------------------------- */
#heropage {
	font-size:20px;
	text-align: center;
	padding:0;
	background: url("../images/trans.webp") center top no-repeat;
	background-size:cover;
}
#heropage .row {
	overflow:hidden;
	position:relative;
	width:100%;
	height: 85vh;
	min-height: 50vw;
	margin:0;
	padding:0;
}
#heropage h1 {
	color:#000;
	margin-top:3em;
	font-weight:700;
	margin-bottom:0.2em; 
}
#heropage h1 .light {
	font-weight:300;
	text-transform: none;
}

/* Head banner
-------------------------------------------------- */
.full-banner {
	width:100%;
	background-color:#000;
	color:#fff;
	text-align:center;
	padding:3em 1em 3em 1em;
}
.full-banner p {
	color:#eee;
}


/* Full bg
-------------------------------------------------- */
.full-bg .row {
	overflow:hidden;
	position:relative;
	width:100%;
	min-height: 45vw;
	margin:0;
	padding:0;
}
.full-bg .video video {
	max-width: 80%;
}
.full-bg .txt {
	color: #fff;
}


.parking {
	background: url("../images/Folding/features-convenience-bg-xl.webp") center center no-repeat;
	background-size: cover;
}
.traffic {
	background: url("../images/Folding/features-traffic-bg-xl.webp") center center no-repeat;
	background-size: cover;
}
.offroad {
	background: url("../images/Folding/features-offroad-bg-xl.webp") center center no-repeat;
	background-size: cover;
}



/* action
-------------------------------------------------- */
#action {
	text-align: center;
	padding: 5em 0 5em 0;
}
#action .desc {
	margin-bottom: 2em;
}
#action .products .item {
	text-align: left;
	float: left;
}
#action .products .item img {
	max-width: 90%;
}


/* Gallery
-------------------------------------------------- */
#gallery img {width:100%;}


/* Info
-------------------------------------------------- */
#info {height:auto;color:#858c9d;background-color: #242629;}
#info ul h5 {color:#fff;}
#info ul li a {color:#82aad2;}
#info strong {color:#a6acba;}


/* effect
-------------------------------------------------- */
section {transition:all 500ms ease-out;}
.fade-ani{opacity:0;position:relative;}
.fade-up{bottom:-50px;}
.fade-up.showing{bottom:0px;opacity:1;}




/* Responsive
-------------------------------------------------- */
/*Users in some browsers/operating systems can express their preference for reduced motion effects with the Reduce Motion API. We can listen for that setting in our CSS, and turn off smooth scrolling for them.*/
@media screen and (prefers-reduced-motion: reduce) {
	html {scroll-behavior: auto;}
}
/* Small devices (landscape phones, 576px and up)*/
@media (max-width: 767.98px) {
	#heropage .align-items-center {-ms-flex-align:start!important;align-items:start!important}
	#heropage, #heropage .container-fliud, #heropage .row {min-height: 150vw;}
	#heropage {background-image: url("../images/Folding/hero-folding-motorcycle-mirrors-xs.webp");}
	#heropage h1 {font-size:2.2rem;margin-top:2.2em;}
	#heropage .headline .text-nowrap {white-space:normal !important;}
	
	.intro, .lineup {padding-left:1em; padding-right:1em;}
	.full-bg .video video {max-width: 100%;}
	.parking {min-height:207vw;background-image: url("../images/Folding/features-convenience-bg-xs.webp");}
	.traffic {min-height:207vw;background-image: url("../images/Folding/features-traffic-bg-xs.webp");}
	.offroad {min-height:207vw;background-image: url("../images/Folding/features-offroad-bg-xs.webp");}
	.offroad .txt {margin-top: 110vw;}
	#action {padding: 3em 0 3em 0;}
	#action .desc br {content: " "; display: none;}
}
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .container {max-width: 900px;}
	.parking {background-image: url("../images/Folding/features-convenience-bg-lg.webp");}
	.traffic {background-image: url("../images/Folding/features-traffic-bg-lg.webp");}
	.offroad {background-image: url("../images/Folding/features-offroad-bg-lg.webp");}
	#action .desc br {content: " "; display: none;}
}
@media (min-width: 768px) and (max-width: 1280.98px) {
	#heropage {background-image: url("../images/Folding/hero-folding-motorcycle-mirrors-lg.webp")}
	#heropage h1 {margin-top:2em;}
}
/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1281px) {
	h2 {font-size:1.9em;}
	#heropage {background-image: url("../images/Folding/hero-folding-motorcycle-mirrors-xl.webp");}
	#heropage .row {min-height: 40vw;}
	#heropage h1 {font-size:3rem; margin-top:2.5em;}
	.intro, .lineup {padding-left:6em; padding-right:6em;}
}

@media (min-width: 1680px) {	
	.intro, .lineup {padding-left:12em; padding-right:12em;}
}