#particles-js{
	width: 100vw;
	height: 100vh;
}

.sl-slider-wrapper {
	width: 800px;
	height: 400px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

.sl-slider {
	position: absolute;
	top: 0;
	left: 0;
}

/* Slide wrapper and slides */

.sl-slide,
.sl-slides-wrapper,
.sl-slide-inner {
	position: absolute;
	width: 100%;
	height: 90vh;
	top: 0;
	left: 0;
}

.sl-slide {
	z-index: 1;
}

.sl-slide-inner .inner{
	position: relative;
	width: 100%;
	height: 100%;
}

.hide{
	display: none;
}

.show{
	display:block;
}

.logo{
	width: 20%;
    display: block;
    margin: 2% auto 2% auto;
}

.home img, .logo img{
	width: 100%;
}



.home .intro{
	width: 80%;
	margin: auto;
}

.home .start{
	font-family: "barlow";
	text-align: center;
	margin: 5% auto;
	font-size: 4vw;
	--bg-size: 200%;
  	--color-one: #000d77;
  	--color-two: #fff;
  	background: linear-gradient(90deg,
      var(--color-one),
      var(--color-two),
      var(--color-one)
    )
    0 0 / var(--bg-size) 100%;
  color: transparent;
  -webkit-background-clip: text;
}

@media (prefers-reduced-motion: no-preference) {
	.home .start {
    animation: move-bg 8s linear infinite;
  }
  @keyframes move-bg {
    to {
      background-position: var(--bg-size) 0;
    }
  }
}

.grid {
	width:100%;
	padding-top: 20px;
	padding-bottom: 20px;
	  display:flex;
	  flex-wrap:wrap;
	list-style: none;
	position: absolute;
	
  }
  .destinations{
	   width:100%;
	  display:flex;
	  flex-wrap:wrap;
	  justify-content:center;
  }
  
  .destinations .grid li {
	  height:600px;
	  padding:10px;
	  background-clip:content-box;
	  background-size:cover;
  }
  
  .destinations .grid li.large {
	  flex-basis:40%; 
  }
  
  .destinations .grid li.small {
	  flex-basis:25%;
  }
  .destinations .grid li.med {
	  flex-basis:35%;
  }
  
  /* .seq-in .content {
	transform: translateY(0);
	transition: .2s;
  }
  
  .content {
	transform: translateY(100%);
  }
  
  .seq-in .content {
  transform: translateY(0);
  transition: .25s;
  }
  
  .seq-in .threed{
	animation-name: threed; 
	animation-duration: 1s;
  } */


.instruction .header{
	position: absolute;
	left: 50%;
    width: 45%;
    top: 17vh;
    transform: translateX(-50%);
}
.instruction .block{
	position: absolute;
	left: 50%;
	width: 90%;
    top: 25vh;
    transform: translateX(-50%);
}

.instruction .start{
	position: absolute;
    left:50%;
	width:48%;
    bottom: 2vh;
    transform: translateX(-50%);
}



.aperture .vf{
	position: absolute;
	top: 22vh;
    width: 60%;
	left: 50%;
	transform: translateX(-50%);
}

.aperture .viewport{
    width: 70%;
    height: 50vh;
    margin: auto;
    border-radius: 90px;
}

.aperture .input_video{
	width: 100%;
	margin-top: 5vh;
	object-fit: cover;
}

.aperture  canvas{
	position: absolute;
	left: 0;
}
.aperture h4#gesture{
    color: #fff;
	font-family: "barlow";
	font-size: 5vw;
    text-align: center;
    margin: 10px auto;
}

.aperture .odometer{
    width: 65%;
	height: 40vw;
	margin: auto;
}

.aperture .odometer .cnt, .aperture .mask .cnt{
	position: relative;
	height: 100%;
}

.aperture .odometer .cnt .meter{
	position: absolute;
    bottom: -0.3%;
	left: 50%;
    width: 90%;
    transform: translateX(-50%);
}
.aperture .odometer .cnt .bad{
	position: absolute;
    bottom: 1px;
    left: -30%;
}
.aperture .odometer .cnt .good{
	position: absolute;
    bottom: 1px;
    right: -27%;
}
.aperture .odometer .cnt .needle{
	position: absolute;
    bottom: 1vh;
    left: 46%;
    width: 8%;
	transform: rotate(300deg);
  transform-origin: bottom center;
}

.aperture .odometer .cnt .m-40{
	position: absolute;
	z-index: 999;
	bottom: 30.7%;
    width: 18vw;
    left: 17.1%;
}

.aperture .odometer .cnt .m-60{
	position: absolute;
	z-index: 999;
    bottom: 39%;
    width: 16vw;
    left: 38.7%;
}

.aperture .odometer .cnt .m-80{
	position: absolute;
	z-index: 1000;
	bottom: 28.7%;
    width: 16.8vw;
    left: 57.7%;
}

.aperture .odometer .cnt .m-100{
	position: absolute;
	z-index: 1001;
	bottom: 12%;
    width: 16.2vw;
    left: 66.5%;
}
.aperture .counter{
	position: absolute;
	top: 16%;
    left: 90%;
    width: 18vw;
    height: 18vw;
	display: none;
	transform: translate(-50%,-50%);
	background-image: url("../images/counterbg.png");
	background-size: cover;
	background-repeat: no-repeat;
	font-family: "barlow";
	font-size: 14vw;
	justify-content: center;
	align-items: center;
	color:#fff;
	font-weight: bold;
}

.aperture .mask{
	top:0;left:0;
	position: absolute;
    width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
}

.aperture .mask .cnt .cat{
	position: absolute;
    top: 45vh;
    left: 5%;
}

.aperture .mask .cnt .callout{
	position: absolute;
	top: 23vh;
    left: 35%;
}

.snapshot{
	background-image: url("../images/framer.png");
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
    top: 0;
    left: 10%;
    width: 975px;
	height: 1393px !important;
	z-index: -1
}

.snapshot .frame{
	position: absolute;
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
	width: 750px;
	height:770px;
	background-color: #fff;
}

.home-btn{
	position: absolute;
    bottom: 3%;
    left: 2%;
	display: none;
	z-index: 99999;
	cursor: pointer;
}

.qr .cloud-1{
	position: absolute;    
    left: 6%;
    bottom: 1vh;
    width: 15%;

}

.qr .cloud-2{
	position: absolute;
    right: 20%;
    top: 16vh;
}

.qr .share-info{

}

.qr .share-info .captured{	
    display: block;
    width: 40%;
    margin: 10vw auto;
}

.qr .share-info h5{
	font-family: "barlow";
	color: #fff;
    font-size: 4vw;
    text-align: center;
	font-weight: bold;
	text-transform: uppercase;
    margin: 30px auto;
}

.qr .share-info p{
	font-family: "barlow";
    color: #fff;
    text-align: center;
    font-size: 3vw;
}

.qr .share-info .qr-code{
	text-align: center;
}

.qr .share-info .qr-code .qr-img{
	width: 25%;
    margin: 5vw auto;

}

.qr .share-info .qr-code .qr-img img{
	width: 100%;
}

.qr .next{
	position: absolute;
    left: 50%;
    bottom: 10%;
}

.final .finale{
	position: absolute;
	left: 50%;
	font-family: "VAG";
	color: #903745;
	text-align: center;;
	top:20vh;
	width:75%;
	transform: translateX(-50%);
}

.final .finale h4{
	font-size: 75px;
	margin-bottom: 40px;
}

.final .finale h5{
	font-size: 40px;
	margin-bottom: 40px;
}

.final .finale h6{
	font-size: 40px;
	margin-bottom: 5px;
}

.final .finale p{
	font-weight: 500;
    font-size: 33px;
    margin-bottom: 31px;
}


.final .finale .qr-img{
	margin: auto;
	width: 40%;
}







/* The duplicate parts/slices */

.sl-content-slice {
	overflow: hidden;
	position: absolute;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	background: #fff;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity : 1;
}

/* Horizontal slice */

.sl-slide-horizontal .sl-content-slice {
	width: 100%;
	height: 50%;
	left: -200px;
	-webkit-transform: translateY(0%) scale(1);
	-moz-transform: translateY(0%) scale(1);
	-o-transform: translateY(0%) scale(1);
	-ms-transform: translateY(0%) scale(1);
	transform: translateY(0%) scale(1);
}

.sl-slide-horizontal .sl-content-slice:first-child {
	top: -200px;
	padding: 200px 200px 0px 200px;
}

.sl-slide-horizontal .sl-content-slice:nth-of-type(2) {
	top: 50%;
	padding: 0px 200px 200px 200px;
}

/* Vertical slice */

.sl-slide-vertical .sl-content-slice {
	width: 50%;
	height: 100%;
	top: -200px;
	-webkit-transform: translateX(0%) scale(1);
	-moz-transform: translateX(0%) scale(1);
	-o-transform: translateX(0%) scale(1);
	-ms-transform: translateX(0%) scale(1);
	transform: translateX(0%) scale(1);
}

.sl-slide-vertical .sl-content-slice:first-child {
	left: -200px;
	padding: 200px 0px 200px 200px;
}

.sl-slide-vertical .sl-content-slice:nth-of-type(2) {
	left: 50%;
	padding: 200px 200px 200px 0px;
}

/* Content wrapper */
/* Width and height is set dynamically */
.sl-content-wrapper {
	position: absolute;
}

.sl-content {
	width: 100%;
	height: 100%;
	background: transparent;
}

/* Default styles for background colors */
.sl-slide-horizontal .sl-slide-inner {
	background: transparent;
}

.sl-slide-vertical .sl-slide-inner {
	background: transparent;
}