/* This page
-------------------------------------------------- */
html, body {height:100%;}
body {background-color:#000;color:#fff;text-align:left;font-family: 'Source Sans Pro',sans-serif;font-weight:300;line-height:1.5em;font-size:18px;}
h1 {
  font-family: Arial,sans-serif;
  font-size:2.1em;
  font-weight:bold;
  line-height:1.3em;
  margin-bottom:0.5em;
}
h1 .highlight {color: #ff4545;}
h2 {
  font-family: 'Source Sans Pro',sans-serif;
  font-size:1.8em;
  font-weight:400;
  margin-bottom:0.5em;
  color:#000;
}
h5 {
  font-family: Arial,sans-serif;
  font-size:1.1em;
  color:#fff;
  font-weight:bold;
}
strong {font-size: 1.1em;}
.overlay {
  border-image:
     linear-gradient(
         hsl(0 0 0 / .3),
         hsl(0 0 0 / .3))
     fill 1;
}

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

.fullH {min-height: 50vw;}

/* Hero Page
-------------------------------------------------- */
#heropage {
	background-position: top right;
	background-repeat: no-repeat;
	background-size: 100% auto;
	animation-name: blink;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

#heropage,
#heropage .container-fliud,
#heropage .row {margin:0;}
#heropage .txt {margin-left: 7vw;}
#heropage h1 {
	margin-top:3vw;
}

/* What
-------------------------------------------------- */
#what {
	background: center right no-repeat;
	background-size: 100% auto;
	border-top: 8px solid #000;
	min-height: 50vw;
	padding-top: 2em;
	padding-bottom: 2em;
}
#what .txt {margin-bottom: 3vw;}
#what h1 {
	text-transform:uppercase;
}
#what li {
	list-style: square;
}
#what li+li {
	margin-top: 1em;
}


/* Benefits
-------------------------------------------------- */
#benefits {
	background: center right no-repeat;
	background-size: auto 100%;
	border-top: 8px solid #000;
	min-height: 50vw;
	padding-top: 4em;
	padding-bottom: 4em;
}
#benefits h1 {
	text-transform:uppercase;
}
#benefits li {
	list-style: decimal;
}
#benefits li+li {
	margin-top: 1em;
}



/* Consider
-------------------------------------------------- */
#consider {
	padding: 5em 0 4em 0;
}
#consider .header {
	margin-bottom:2em;
	text-align: center;
}
#consider h1 {
	text-transform:uppercase;
}
#consider .item {	
	margin-top: 1.5em;
}
#consider .item img {
	max-width:100%;
	height: auto;
	border: 1px solid #d3d3d3;
}
#consider h5 {
	margin-top: 1em;
}
#consider ul {
	list-style: square;
}
#consider ul li {
	margin-top: 0.5em;
}

/* Shop-Action
-------------------------------------------------- */
#shop-action {
	background: right top no-repeat;
	background-size: 100% auto;
	padding-top:5%;
	padding-bottom:5%;
	min-height:100%;
	text-align:center;
}
#shop-action h1 {
	text-transform: uppercase;
}
#shop-action .picitems {
	margin-top: 2em;
}
#shop-action .picitems img {
	margin-top:2em;
	margin-bottom: 0.5em;
	max-width:100%;
	height: auto;
	border: 1px solid #ccc;
}
#shop-action .picitems p a {
	color: #fff;
	font-size: 1.2em;
	text-decoration:underline;
}
#shop-action .picitems p a:hover {
	font-weight: 400;
}
#shop-action a:hover img {
	border: 1px dashed #fff;
}


/* 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;}

/* Responsive
-------------------------------------------------- */
/* Small devices (landscape phones, 576px and up)*/
@media (max-width: 767.98px) {
	.fullH {min-height: 170vw;}
	#heropage {
		margin-top:1em; 
		background-image: url("../images/LED/hero-LED-turn-signal-mirrors-xs2.webp");
		background-image: url("../images/LED/hero-LED-turn-signal-mirrors-xs.webp");
		border-image:
		  linear-gradient(hsl(0 0 0 / 0), hsl(0 0 0 / 0), hsl(0 0 0 / 0.4), hsl(0 0 0 / 0.5), hsl(0 0 0 / 0.6))
		  fill 1;
	}
	@keyframes blink {
		0% {background-image: url("../images/LED/hero-LED-turn-signal-mirrors-xs.webp");}
		50% {background-image: url("../images/LED/hero-LED-turn-signal-mirrors-xs.webp");}
		51% {background-image: url("../images/LED/hero-LED-turn-signal-mirrors-xs2.webp");}
		100% {background-image: url("../images/LED/hero-LED-turn-signal-mirrors-xs2.webp");}
	}
	#heropage .txt {margin-left:0; margin-bottom:3em; text-align:center;}
	#heropage .align-items-center {-ms-flex-align:end!important;align-items:flex-end!important}
	
	#what {background-image: url("../images/LED/bg-what-xs.webp"); background-size: 100% auto; background-position: bottom center;}
	#what .align-items-end {-ms-flex-align:start!important;align-items:flex-start!important}
	#what .txt {margin-top: 2em; margin-bottom:70vw;}
	#what h1 {text-align: center;}
	#benefits {background-image: url("../images/LED/bg-benefits-xs.webp");background-size: 100% auto; background-position: bottom center;}
	#benefits .txt {margin-top:2em; margin-bottom:100vw;}
	#benefits h1 {text-align: center;}
	#shop-action {background-image: url("../images/LED/action-bg-xs.webp"); background-position: bottom center;}
}
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
	body {font-size:15px;}
    .container {max-width: 900px;}
	#heropage {
		background-image: url("../images/LED/hero-LED-turn-signal-mirrors-sm2.webp");
		background-image: url("../images/LED/hero-LED-turn-signal-mirrors-sm.webp");
		border-image:
		  linear-gradient(to right, hsl(0 0 0 / .6), hsl(0 0 0 / 0), hsl(0 0 0 / 0), hsl(0 0 0 / 0))
		  fill 1;
	}
	@keyframes blink {
		0% {background-image: url("../images/LED/hero-LED-turn-signal-mirrors-sm.webp");}
		50% {background-image: url("../images/LED/hero-LED-turn-signal-mirrors-sm.webp");}
		51% {background-image: url("../images/LED/hero-LED-turn-signal-mirrors-sm2.webp");}
		100% {background-image: url("../images/LED/hero-LED-turn-signal-mirrors-sm2.webp");}
	}
	#heropage .txt {margin-left:0;}
	#heropage h1 {margin-bottom:0;}
	
	#what {background-image: url("../images/LED/bg-what-md.webp"); background-size: cover;}
	#what .fullH {min-height: 60vw;}
	#what .txt {margin-bottom: 1vw;}
	#benefits {background-image: url("../images/LED/bg-benefits-md.webp");}
	#shop-action {background-image: url("../images/LED/action-bg-md.webp");}
}
/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1280px) {
	#heropage {
		background-image: url("../images/LED/hero-LED-turn-signal-mirrors-md2.webp");
		background-image: url("../images/LED/hero-LED-turn-signal-mirrors-md.webp");
		border-image:
		  linear-gradient(to right, hsl(0 0 0 / .4), hsl(0 0 0 / 0), hsl(0 0 0 / 0))
		  fill 1;
	}
	@keyframes blink {
		0% {background-image: url("../images/LED/hero-LED-turn-signal-mirrors-md.webp");}
		50% {background-image: url("../images/LED/hero-LED-turn-signal-mirrors-md.webp");}
		51% {background-image: url("../images/LED/hero-LED-turn-signal-mirrors-md2.webp");}
		100% {background-image: url("../images/LED/hero-LED-turn-signal-mirrors-md2.webp");}
	}
	
	#what {background-image: url("../images/LED/bg-what-lg.webp"); background-size: cover;}
	#what .fullH {min-height: 60vw;}
	#what .txt {margin-bottom: 2vw;}
	#benefits {background-image: url("../images/LED/bg-benefits-md.webp");}
	#shop-action {background-image: url("../images/LED/action-bg-md.webp");}
	
}
/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1281px) {
	h1 {font-size:2.5rem;}
	#heropage {
		background-image: url("../images/LED/hero-LED-turn-signal-mirrors-lg2.webp");
		background-image: url("../images/LED/hero-LED-turn-signal-mirrors-lg.webp");
		border-image:
		  linear-gradient(to right, hsl(0 0 0 / .4), hsl(0 0 0 / 0), hsl(0 0 0 / 0))
		  fill 1;
	}
	@keyframes blink {
		0% {background-image: url("../images/LED/hero-LED-turn-signal-mirrors-lg.webp");}
		50% {background-image: url("../images/LED/hero-LED-turn-signal-mirrors-lg.webp");}
		51% {background-image: url("../images/LED/hero-LED-turn-signal-mirrors-lg2.webp");}
		100% {background-image: url("../images/LED/hero-LED-turn-signal-mirrors-lg2.webp");}
	}
	#heropage h1 {margin-bottom:0.2em;}
	
	#what {background-image: url("../images/LED/bg-what-xl.webp")}
	#benefits {background-image: url("../images/LED/bg-benefits-lg.webp");}
	#shop-action {background-image: url("../images/LED/action-bg-lg.webp");}
}

@media (min-width: 1440px) {
	#heropage {
		background-image: url("../images/LED/hero-LED-turn-signal-mirrors-xl2.webp");
		background-image: url("../images/LED/hero-LED-turn-signal-mirrors-xl.webp");
	}
	@keyframes blink {
		0% {background-image: url("../images/LED/hero-LED-turn-signal-mirrors-xl.webp");}
		50% {background-image: url("../images/LED/hero-LED-turn-signal-mirrors-xl.webp");}
		51% {background-image: url("../images/LED/hero-LED-turn-signal-mirrors-xl2.webp");}
		100% {background-image: url("../images/LED/hero-LED-turn-signal-mirrors-xl2.webp");}
	}
	#heropage h1 {margin-bottom:0.5em;}
	
	#what .txt {margin-bottom: 6em;}
	#benefits {background-image: url("../images/LED/bg-benefits-xl.webp");}
	#shop-action {background-image: url("../images/LED/action-bg-xl.webp");}
}