@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap');
/* This page
-------------------------------------------------- */
html, body {height:100%;}
body {background-color:#000;color:#c6c6c6;text-align:left;font-family: 'Source Sans Pro',sans-serif;font-weight:300;line-height:1.5em;font-size:18px;}
h1 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size:2.2rem;
  font-weight:700;
  line-height:1.3em;
  margin-bottom:0.5em;
  color:#fff;
}
h2 {
  font-family: 'Source Sans Pro',sans-serif;
  font-size:2.2em;
  font-weight:400;
  margin-bottom:0.5em;
  color:#fff;
}
h4 {font-family: 'Roboto Condensed', sans-serif;}
h5 {font-size:1.1em;color:#fff;font-weight:400;margin:0;}

.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;
}

.btn-candy {
	display: inline-block;
    width: 100%;
	color: #000;
    margin-top: 2em;
    padding: 0.4em 1em;
	position: relative;
	text-align:left;
	text-decoration:none;
}
a.btn-candy:hover {
	color: #000;
	text-decoration:none;
}
.btn-candy .cta-lable {
	font-family: 'Noto Sans', sans-serif;
	color: #000;
    font-weight: 700;
	font-size:0.8em;
}
.btn-candy .cta-icon {
	position: absolute;
	right:1.2em;
	font-size:1.2em;
}
a.colorA {background-color: #6cb0e1;}
a.colorA:hover  {background-color: #91d1ff;}
a.colorB {background-color: #e1c46c;}
a.colorB:hover  {background-color: #efdb9d;}
a.colorC {background-color: #fff;}
a.colorC:hover  {background-color: #dfe3e8;}

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

/* Hero Page
-------------------------------------------------- */
#heropage {
	padding:0;
}
#heropage .row {
	overflow:hidden;
	position:relative;
	width:100%;
	min-height: 56.25vw;
	margin:0;
	padding:0;
}

#fullvid {height: 100%;}
#fullvid img {max-width:100%;}
.video-main {
	position: relative;
    height: 100%;
}
.video-wrapper h1 {margin-top:-3em;}
video {max-width: 100%;min-height: 56.25vw;}
video.loading {
	background: url("../images/index/hero-lg.jpg") top left no-repeat;
	background-size: 100% auto;
}


/* Mirrors
-------------------------------------------------- */
.mirrors .row {
	margin-top:3em;
}
.mirrors .img {
	height:33vw;
	background-size: cover;
	background-position:center bottom;
	background-repeat:no-repeat
}
.mirrors .txt {padding-top: 1.5em;}
#palm .img{	
	background-image: url("../images/index/mirrors-PalmII.jpg");
}
#Lucifer .img{
	background-image: url("../images/index/mirrors-LuciferFI.jpg");
}
#Fin .img{
	background-image: url("../images/index/mirrors-Fin.jpg");
}
#Stark .img{
	background-image: url("../images/index/mirrors-StarkHB.jpg");
}

/* Lights
-------------------------------------------------- */
#lights {
	background: url("../images/index/lights-lg.jpg") top left no-repeat;
	background-size: cover;
	text-align:left;
	margin-top:3em;
}
#lights, #lights .row {min-height: 60vw;}
#lights .txt {margin-top: -5em;}

/* Gadgets
-------------------------------------------------- */
#gadgets {
	background: #000;
	margin-top:5px;
}
#gadgets h1, #gadgets h5 {text-align:center;}
.block-array {
	color:#fff;
	background-color:#35383b;
	padding:10px 10px 1em 10px;
}
.block-array img {
	margin-bottom:0.5em;
	max-width:100%;
	max-height: 100%;
	height:auto; 
}
.block-array p {color:#e2e2e2;}

#gadgets .btn-candy {
    float: right;
	margin-top:0;
    padding: 0.2em 0.5em;
	width: 75%;
}
#gadgets .btn-candy::after {clear:both;}
#gadgets .btn-candy .cta-lable {font-size:0.6em;}
#gadgets .btn-candy .cta-icon {right:0.5em;}



/* Action
-------------------------------------------------- */
#action {
	color:#e2e2e2;
	text-align:center;
}
#action,
#action .container,
#action .row {min-height: 40vw;}




/* 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
-------------------------------------------------- */
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
	.btn-candy {margin-top:1em;}
	#heropage video.loading {
		margin-top:1em;
		background-image: url("../index/Arrow/hero-xs.jpg");
	}
	#heropage, #heropage .container-fliud, #heropage .row {min-height: 177vw;}
	#heropage .txt {margin:0 0 1em 0;}
	#palm {margin-top:0;}
	.mirrors .img {height:68vw;}
	#lights {min-height: 170vw;background-image: url("../images/index/lights-xs.jpg");background-size: contain;}	
	#lights .txt {margin-top: 100vw;}
	
	#gadgets {margin-top:4em;}
	#gadgets h1, #gadgets h5 {text-align:left;}
	#gadgets .btn-candy {width: 100%;}
	.block-array {margin-bottom:1em;padding-bottom:10px;}
	.block-array img {width:40%;height: 40%;margin-bottom:0;}
	#action, #action .container, #action .row {min-height: 100vw;}
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
	.btn-candy {margin-top:1em;}
	#heropage video.loading {
		margin-top:1em;
		background-image: url("../images/index/hero-xs.jpg");
	}
	#heropage, #heropage .container-fliud, #heropage .row {min-height: 177vw;}
	#heropage .txt {margin:0 0 1em 0;}
	#palm {margin-top:0;}
	.mirrors .img {height:54vw;}
	#lights {min-height: 160vw;background-image: url("../images/index/lights-xs.jpg");background-size: contain;}	
	#lights .txt {margin-top: 100vw;}
	
	#gadgets {margin-top:4em;}
	#gadgets h1, #gadgets h5 {text-align:left;}
	#gadgets .btn-candy {width: 100%;}
	.block-array {margin-bottom:1em;padding-bottom:10px;}
	.block-array img {width:40%;height: 40%;margin-bottom:0;}
	#action, #action .container, #action .row {min-height: 100vw;}
}
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .container {max-width: 900px;}
	#heropage video.loading {background-image: url("../images/index/hero-md.jpg");}	
	.mirrors .row {margin-top:3em;}
	.mirrors .txt {padding-top: 0;}
	.mirrors .img {height:42vw;}
	#lights {background-image: url("../images/index/lights-md.jpg");}
	
	#gadgets h1, #gadgets h5 {text-align:left;}
	#gadgets .btn-candy {width: 100%;}
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1000px) {
	.mirrors .txt {padding-top: 0;}
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1281px) {
	h1 {font-size:2.5rem;}
	.btn-candy {max-width:350px;}
	#heropage video.loading {background-image: url("../images/index/hero-xl.jpg");}
	.mirrors .row {margin-top:1.5em;}
	.mirrors .img {height:42vw;max-height:540px;background-size: contain;background-position:center center;}
	.mirrors .txt {padding-top: 3em;}
	#lights {background-image: url("../images/index/lights-xl.jpg");}
}