/*!	HOME : SPLASH
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.splash {
	background:url('../img/splash-billboard-strip-m-2.jpg') #050734 center top repeat-y;
}
.splash .content {
	padding:50px 0 0 0;
}
.splash-text-container {
	position:relative;
	z-index:1;
}
.splash .splash-title {
	font-size:2.50rem;
	text-align:center;
	text-shadow:0 5px 10px #000;
}
.splash-tagline {
	text-shadow:0 3px 5px #000;
	padding:0 1rem;
	z-index:1;
	width:100%;
}
.billboard-container-dt {
	display:none;
	position: absolute;
	width: 1609px;
	height: 820px;
	left: 50%;
	top:0; 
	transform: translate(-50%,0);
	z-index:0;
}
.billboard-dt {
	position: absolute;
	width: 728px;
	height: 366px;
	top: 114px;
	left: 749px;
	background:#000;
}
.billboard-container-m {
	position:relative;
	width:100%;
	background:#060a36;
	z-index:0;
}
.billboard-m {
	position: absolute;
	top: 3.4%;
	left: 13%;
	right: 13.2%;
	bottom: 25.5%;
	background:#000;
	z-index: 1;
}
.billboard-bg-m {
	width:100%;
	z-index:0;
}
@media (min-width:768px) {
	.header-logo {
		height:32px;
	}
	.splash {
		height:520px;
		position:relative;
		background:url('../img/splash-billboard-dt-2.jpg') no-repeat top center;
		background-size:auto 520px;
	}
	.splash .content {
		padding-top:80px;
	}
	.splash .splash-title {
		text-align:left;
		font-size:2.25rem;
		padding-left:.75rem;
	}
	.splash-tagline {
		text-shadow:0 3px 5px #000;
		padding-left:2px;
		padding-bottom:0;
		width:85%;
	}
	.billboard-container-dt {
		display:block;
	}
	.billboard-container-m {
		display:none;
		background:#060a36;
	}
	.billboard-dt {
		width: 461px;
		height: 232px;
		top: 73px;
		left: 769px;
	}
}
@media (min-width:992px) {
	.splash {
		height:600px;
		background-size:auto 600px;
	}
	.splash .content {
		padding-top:100px;
	}
	.splash .splash-title {
		font-size:3rem;
		padding-left:0;
	}
	.splash-tagline {
		padding-left:6px;
	}
	.billboard-dt {
		width: 533px;
		height: 267px;
		top: 84px;
		left: 764px;
	}
}
@media (min-width:1200px) {
	.splash {
		height:720px;
		background-size:auto 720px;
		background-color:#000;
	}
	.splash .content {
		padding-top:100px;
	}
	.splash .splash-title {
		font-size:3.5rem;
	}
	.billboard-dt {
		width: 639px;
		height: 321px;
		top: 101px;
		left: 756px;
	}
}
@media (min-width:1400px) {
	.splash {
		height:820px;
		background-size:auto 820px;
	}
	.splash .content {
		padding-top:140px;
	}
	.splash .splash-title {
		font-size:4.5rem;
	}
	.billboard-dt {
		position: absolute;
		width: 728px;
		height: 366px;
		top: 114px;
		left: 749px;
	}
}

/*!	HOME : GLITCH
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
:root{
	--glitch-width: 100vw;
	--glitch-height: 100vh;
	--gap-horizontal: 10px;
	--gap-vertical: 5px;
	--time-anim: 4s;
	--delay-anim: 2s;
	--blend-mode-1: none;
	--blend-mode-2: none;
	--blend-mode-3: none;
	--blend-mode-4: none;
	--blend-mode-5: overlay;
	--blend-color-1: transparent;
	--blend-color-2: transparent;
	--blend-color-3: transparent;
	--blend-color-4: transparent;
	--blend-color-5: #af4949;
}
.glitch{
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.glitch__item {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	position: absolute;
}
.glitch__item.one {
	background: url('../img/splash-billboard-1.jpg') no-repeat 50% 50% / cover;
}
.glitch__item.two {
	background: url('../img/splash-billboard-2.jpg') no-repeat 50% 50% / cover;
}
.glitch__item.three {
	background: url('../img/splash-billboard-3.jpg') no-repeat 50% 50% / cover;
}
.glitch__item:nth-child(n+2) {
	opacity: 0;
	animation-duration: var(--time-anim);
	animation-delay: var(--delay-anim);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.glitch__item:nth-child(2){
	background-color: var(--blend-color-2);
	background-blend-mode: var(--blend-mode-2);
	animation-name: glitch-anim-2;
}
.glitch__item:nth-child(3){
	background-color: var(--blend-color-3);
	background-blend-mode: var(--blend-mode-3);
	animation-name: glitch-anim-3;
}
.glitch__item:nth-child(4){
	background-color: var(--blend-color-4);
	background-blend-mode: var(--blend-mode-4);
	animation-name: glitch-anim-4;
}
.glitch__item:nth-child(5){
	background-color: var(--blend-color-5);
	background-blend-mode: var(--blend-mode-5);
	animation-name: glitch-anim-flash;
	@keyframes glitch-anim-flash{
	  0%,5%{
		opacity: 0.2;
		transform: translate3d(var(--glitch-horizontal),var(--glitch-height),0)
	  }
	  5.5%,100%{
		opacity: 0;
		transform: translate3d(0, 0, 0);
	  }
	}
}
@keyframes glitch-anim-2 {
	0% {
		opacity: 1;
		transform: translate3d(var(--gap-horizontal),0,0);
		-webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
		clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
	}
	2% {
		-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
		clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
	}
	4% {
		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
		clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
	}
	6% {
		-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
		clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
	}
	8% {
		-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
		clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
	}
	10% {
		-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
		clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
	}
	12% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
		clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
	}
	14% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
	}
	16% {
		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
	}
	18% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
	}
	20% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
		clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
	}
	21.9% {
		opacity: 1;
		transform: translate3d(var(--gap-horizontal),0,0);
	}
	22%, 100% {
		opacity: 0;
		transform: translate3d(0,0,0);
		-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	}
}
@keyframes glitch-anim-3 {
	0% {
	opacity: 1;
		transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
		-webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
		clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
	}
	3% {
		-webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
		clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
	}
	5% {
		-webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
		clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
	}
	7% {
		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
	}
	9% {
		-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
		clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
	}
	11% {
		-webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
		clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
	}
	13% {
		-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
	}
	15% {
		-webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
		clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
	}
	17% {
		-webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
		clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
	}
	19% {
		-webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
		clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
	}
	20% {
		-webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
		clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
	}
	21.9% {
		opacity: 1;
		transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
	}
	22%, 100% {
		opacity: 0;
		transform: translate3d(0,0,0);
		-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	}
}
@keyframes glitch-anim-4 {
	0% {
	opacity: 1;
		transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);
		-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
		clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
	}
	1.5% {
		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
		clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
	}
	2% {
		-webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
		clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
	}
	2.5% {
		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
	}
	3% {
		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
		clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
	}
	5% {
		-webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
		clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
	}
	5.5% {
		-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
		clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
	}
	7% {
		-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
		clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
	}
	8% {
		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
		clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
	}
	9% {
		-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
		clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
	}
	10.5% {
		-webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
		clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
	}
	11% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
		clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
	}
	13% {
		-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
		clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
	}
	14% {
		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
		clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
	}
	14.5% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
		clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
	}
	15% {
		-webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
		clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
	}
	16% {
		-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
	}
	18% {
		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
		clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
	}
	20% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
		clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
	}
	21.9% {
		opacity: 1;
		transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);
	}
	22%, 100% {
		opacity: 0;
		transform: translate3d(0,0,0);
		-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	}
}

/*!	HOME : CAROUSEL
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.carousel .slide {
	position:relative;
	margin-bottom:0;
	max-width:375px;
}
.carousel .slick-slide {
	box-shadow:;
}
.carousel .slick-slide + .slick-slide {
	margin-left:10px;
}
.carousel .slide img {
	width:100%;
	border:5px solid #fff;
}
.carousel figcaption {
	position:absolute;
	top:50%;
	width:100%;
	transform: translateY(-50%);
	text-align:center;
	color:#fff;
	font-size:1.5rem;
	text-shadow:0 1px 7px #000;
}
.carousel .carousel-control-prev,
.carousel .carousel-control-next {
	display:none;
}
.carousel .btn {
	height:40px;
	width:44px;
	line-height:35px;
}
.carousel .slick-pause-icon {
	display:none;
}
@media (min-width: 0) and (max-width: 768px) {
	.carousel figcaption {
		font-size:1.25rem;
	}
}
@media (min-width: 768px) {
	.carousel .carousel-control-prev,
	.carousel .carousel-control-next {
		width:100px;
	}
}

/*!	HOME : MISC
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.how-to-connect {
	margin:auto 0;
	width:100%;
	height:290px;
	border-radius:10px;
	overflow:hidden;
	background:url('../img/card-how-to-connect.jpg') #b43d34 no-repeat -20px center / cover;
}
.dashboard-ss {
	margin:auto 0;
	width:100%;
	height:350px;
	border-radius:10px;
	overflow:hidden;
	background:url('../img/card-dashboard-ss.jpg') #2c8ef2 no-repeat center center / contain;
}
@media (min-width: 576px) {
	.how-to-connect {
		height:350px;
		background-position:-30px center;
	}
}
@media (min-width: 768px) {
	.dashboard-ss {
		height:100%;
	}
}
@media (min-width: 992px) {
	.how-to-connect {
		height:490px;
		background-position:-40px center;
	}
}