@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@300;400;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:3rem;
  font-weight:700;
  line-height:1.3em;
  margin-bottom:0.5em;
  color:#fff;
}
.h1-ver2 {font-size:0.6em;font-weight:400 !important;}
h2 {
  font-family: 'Source Sans Pro',sans-serif;
  font-size:2.2em;
  font-weight:400;
  margin-bottom:0.5em;
  color:#fff;
}
h3 {
  font-size:1.9rem;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight:700;
  color:#fff;
}
h4 {font-size:1.7rem;font-family: 'Roboto Condensed', sans-serif;font-weight:300;}
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;
}


.txt-color {color:#fff600 !important;}
a {color:#fff600;}
a:hover {color:#fff;}


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

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

img {max-width:100%;max-height:100%;}

#see, #see h1,
#adjust, #adjust h1,
#flat, #flat h1,
#action, #action h1 {color:#000;}




.btn-candy {
	display: inline-block;
	color: #000;
	background-color: #fff;
    margin-top: 2em;
    padding: 0.4em 1em;
	position: relative;
	text-align:left;
	text-decoration:none;
}
a.btn-candy:hover {
	background-color: #fff600;
	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;
}


/* Hero Page
-------------------------------------------------- */
#heropage {
	padding:0;
	text-align:center;
	background-color:#000;
	background-image: url("../images/hero-lg.webp");
}
#heropage .row {
	overflow:hidden;
	position:relative;
	width:100%;
	min-height: 64vw;
	margin:0;
	padding:0;
}
#heropage h1 {
	font-size: 3.5em;
	line-height:1em;
	margin-top:-2.5em;
}
#heropage h1 .h1-ver2 {
	line-height:1em;
	margin-top:0.5em;
}

/* Must Have, See what's behind
-------------------------------------------------- */
#must .row, 
#see .row,
#adjust .row,
#flat .row {
	margin-top:5px;
	min-height: 55.7vw;
}
#adjust .imgroup .row {min-height:auto;}
#must {
	background-image: url("../images/must-lg.jpg");
}
#see {
	background-image: url("../images/see-lg.jpg");
}
#adjust {
	background-image: url("../images/adjust-lg.jpg");
}
#flat {
	background-image: url("../images/flat-lg.jpg");
}

#must .txt,
#see .txt {margin-top:-15vw;}

#adjust img {border: 1px solid #c3c4c5;}



/* Products
-------------------------------------------------- */
#products {
	background: #000;
	margin-top:5px;
	padding:5em 0;
}
#products h1, #products h5 {text-align:center;}
.block-array {
	color:#fff;
	background-color:#363739;
	padding:1.5em 0;
}
.block-array img {
	margin-bottom:0.5em;
	max-width:100%;
	max-height: 100%;
	height:auto; 
}


/* Action
-------------------------------------------------- */
#action {
	text-align:center;
	background-image: url("../images/action-lg.jpg");
	padding-top:3em;
}

#action .row {min-height:67.7vw;}
#action .imgroup .row {min-height:auto;}
#action img {
	border: 1px solid rgb(255, 255, 255);
    border: 1px solid rgba(255, 255, 255, .5);
	-webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

#action .btn-wht {margin-top:12vw;}


/* 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
-------------------------------------------------- */
/* Small devices (landscape phones, 576px and up)*/
@media (max-width: 767.98px) {
	h1 {font-size:2.6rem;}
	.my-xs-4 {margin-bottom:1.5em !important;}
	#heropage, #heropage .container-fliud, #heropage .row {min-height: 200vw;}
	#heropage {background-image: url("../images/hero-xs.webp");}
	#heropage .align-items-end {-ms-flex-align: start !important; align-items: flex-start !important;}
	#heropage h1 {margin-top:1.5em; font-size:3.2em;}
	
	#must {min-height: 177vw;background-image: url("../images/must-xs.jpg");}
	#see {min-height: 177vw;background-image: url("../images/see-xs.jpg");}
	#adjust {padding-bottom:125vw; background: url("../images/adjust-xs.jpg") #fff center bottom no-repeat; background-size:contain;}
	#must .txt, #see .txt {margin-top:2em;text-align:center;}
	#flat {min-height: 177vw;background-image: url("../images/flat-xs.jpg");}
	#flat, #flat h1 {color:#fff;}
	#flat .txt {margin-top:1em;text-align:center;}
	
	#action {min-height: 200vw;padding-top:3em;background-image: url("../images/action-xs.jpg");}
}
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.99px) {
    .container {max-width: 900px;}
	h1 {font-size:2.5rem;}
	#heropage h1 {margin-top:-1em;}
	
	
	#action .row {min-height: 80vw;}
	
	
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1280.99px) {
	
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1281px) {
	body {font-size: 20px;}
	#heropage {background-image: url("../images/hero-xl.webp");}
	#heropage h1 {font-size:4em;margin-top:-21vw;line-height:0.9em;}
	
	#must {background-image: url("../images/must-xl.jpg");}
	#see {background-image: url("../images/see-xl.jpg");}
	#adjust {background-image: url("../images/adjust-xl.jpg");}
	#flat {background-image: url("../images/flat-xl.jpg");}
	#must .txt, #see .txt {margin-top:-21vw;}	
	
	#action {padding-top:6em;background-image: url("../images/action-xl.jpg");}
}