@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Urbanist&display=swap');

html {scroll-behavior:smooth; font-family: 'Open Sans', sans-serif}
*, *:after, *:before {-webkit-box-sizing:border-box; box-sizing:border-box}
* {padding:0; margin:0; list-style:none; text-decoration:none}
.clear {clear:both}

.popup {position:fixed; z-index:99999999999999; background:rgba(0,0,0,0.9); width:100%; height:100vh; top:0}
.popup .text {background:#000; width:90%; max-width:600px; height:420px; position:relative; top:calc(50vh - 200px); left:calc(50% - 300px); z-index:9999999; text-align:center; color:#fff}
.popup .text > span {border:3px solid #cb995c; width:calc(100% - 16px); max-width:584px; height:404px; display:block; position:absolute; top:8px; left:8px}
.popup img {width:100px; margin:0 auto; display:block; padding:35px 0 20px}
.popup i {width:35px; height:35px; display:block; cursor:pointer; background:url(../images/close-white.svg) center no-repeat #000; background-size:15px; position:absolute; right:-10px; top:-10px; border:2px solid #fff}
.popup h3 {font-size:24px; font-weight:400; padding:0 30px; max-width:460px; margin:0 auto; line-height:30px; letter-spacing:1px}
.popup p {font-size:11px; margin-top:28px}
.popup a {position:relative; z-index:99; width:204px; height:38px; display:inline-block; text-transform:uppercase; line-height:38px; font-size:12px}
.popup .no {margin:30px 0 0 0; border:1px solid #cb995c; color:#cb995c}
.popup .yes {margin:30px 0 0 38px; background:#cb995c; color:#000}
.popup .no-acc {display:none; max-width:520px; margin-top:40px}
.popup .text.no-access h3, .popup .text.no-access a, .popup .text.no-access p {display:none}
.popup .text.no-access .no-acc {display:block}

.main-container {width:calc(100% - 50px); margin:25px auto; background:#26282b; display:none}
.video-container {height:100vh; width:100%; position:absolute; overflow:hidden}
.video-container video {opacity:0.2; width:100%}
.video-container img {display:none; opacity:0.4; height:100vh}
.content {width:100%; height:100vh; position:relative; text-align:center}
.logo {width:150px; position:absolute; top:calc(50vh - 50px); left:calc(50% - 50px); opacity:0; z-index:11;
-webkit-animation: appear 2s ease-in forwards;
    animation: appear 2s ease-in forwards}
@-webkit-keyframes appear {
    0% { opacity:0; width:150px; left:calc(50% - 50px)}
    100% { opacity:1; width:180px; left:calc(50% - 65px)}
}
@keyframes appear {
    0% { opacity:0; width:150px; left:calc(50% - 50px)}
    100% { opacity:1; width:180px; left:calc(50% - 65px)}
}
.overflow {overflow:hidden}
.content .para {max-width:1200px; position:absolute; left:calc(50% - 600px); width:100%}
.content canvas {width:100%; height:100%}
.product {display:block; position:absolute; left:calc(50% - 40px); top:calc(100vh + 170px)}
.about {margin:100px auto 150px; padding-top:50px}
.about .content-box {padding:60px}
.content-box {margin:50px auto; padding:40px; background:#000; max-width:700px; width:90%}
.about h2, .title {font-family: 'Urbanist', sans-serif; color:#cb995c; font-size:18px; text-transform:uppercase; letter-spacing:5px; line-height:30px; text-align:center; margin-bottom:30px}
.about p {font-size:15px; line-height:26px; margin-top:30px; color:#fff}
.gallery {width:1179px; margin:70px 0 100px 50px; float:left}
.gallery li {float:left; margin-right:48px; transition:1s}
.gallery li:nth-child(1) {width:728px; height:290px; margin-bottom:48px; background:url(../images/IMG1-BW.jpg) center no-repeat; background-size:cover}
.gallery li:nth-child(1):hover {background:url(../images/IMG1-COLOR.jpg) center no-repeat; background-size:cover}
.gallery li:nth-child(2) {width:355px; height:290px; margin-bottom:48px; background:url(../images/IMG3-BW.jpg) center no-repeat; background-size:cover}
.gallery li:nth-child(2):hover {background:url(../images/IMG3-COLOR.jpg) center no-repeat; background-size:cover}
.gallery li:nth-child(3) {width:431px; height:390px; background:url(../images/IMG2-BW.jpg) center no-repeat; background-size:cover}
.gallery li:nth-child(3):hover {background:url(../images/IMG2-COLOR.jpg) center no-repeat; background-size:cover}
.gallery li:nth-child(4) {width:652px; height:390px; background:url(../images/IMG4-BW.jpg) center no-repeat; background-size:cover}
.gallery li:nth-child(4):hover {background:url(../images/IMG4-COLOR.jpg) center no-repeat; background-size:cover}
.last-img {width:291px; height:728px; background:url(../images/IMG5-BW.jpg) center no-repeat; background-size:cover; float:left; margin:70px 50px 0 0}
.last-img:hover {background:url(../images/IMG5-COLOR.jpg) center no-repeat; background-size:cover}
.title {text-align:center; margin:50px 0 0; color:#cb995c; font-size:18px; position:relative; padding-top:50px}
.logoF {margin:100px auto 50px; display:block; width:80px; padding-bottom:50px}
.footer-links {font-size:13px; letter-spacing:3px; font-family: 'Urbanist', sans-serif; text-align:center; text-transform:uppercase; padding:20px 0}
.footer-links a {color:#666}
.footer-links a:hover {color:#cb995c}
.footer-links a img {display:block; float:left}

.stardust {display:block; margin:220px auto 30px; width:150px}
.about.last {text-align:center; margin-bottom:130px; margin-top:30px}
.about.last .content-box {max-width:750px; padding:60px 0}
.about.last .content-box > a {font-size:14px; letter-spacing:2px; padding:15px 20px; color:#fff; margin-top:30px; display:inline-block; text-transform:uppercase; border:1px solid #cb995c}
.about.last .content-box > a:hover {background:#cb995c; box-shadow:10px 10px 10px rgba(0,0,0,0.2); color:#fff; transition:0.3s; margin-top:27px; margin-bottom:3px}
.about.last form a {text-align:center; margin:20px 0; display:block}
.about.last form a:hover {color:#cb995c}

#products {margin-bottom:50px}
.product-deet {display:none; position:fixed; top:0; left:0; z-index:99999999999999}
.product-deet a img {width:20px; position: absolute; right:40px; top:40px; z-index:99}
.product-deet ul li {border:25px solid #fff; background:#0b0f12; width:100vw !important; height:100vh !important; display:none; position:relative}

.product-deet ul li::before, .product-deet ul li::after {
	position: absolute;
	top:calc(50% - 155px);
	right:calc(50% - 175px);
	bottom:calc(50% - 195px);
	left:calc(50% - 175px);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}
.product-deet ul li::before {
	border-top:5px solid #cb995c;
	border-bottom:5px solid #cb995c;
	-webkit-transform: scale(0,1);
	transform: scale(0,1); z-index:9999
}

.product-deet ul li::after {
	border-right:5px solid #cb995c;
	border-left:5px solid #cb995c;
	-webkit-transform: scale(1,0);
	transform: scale(1,0);
}

video {pointer-events:none}

.product-deet ul li > img {max-height:calc(100vh - 50px); margin:0 auto; display:block} 
.copy {font-size:13px; text-align:center; color:#999; margin-bottom:25px}
.product-deet ul li a, .products > a {width:24px; height:24px; display:block; position:absolute; top:calc(50vh - 12px); left:40px; z-index:999}
.product-deet ul li .left, .products .left {background:url(../images/left.png)}
.product-deet ul li .next, .products .next {background:url(../images/next.png); right:40px; left:auto}
.product-deet ul li div {height:100%; position:relative; padding-top:calc(50vh - 180px); overflow:hidden}
.product-deet ul li div > img {width:860px; position:absolute; top:0; left:calc(50% - 430px)}
.product-deet ul li div span {background:#fff; width:350px; height:350px; display:block; margin:0 auto; position:relative; text-align:center; padding-top:50px}
.product-deet ul li h3 img {height:60px}
.product-deet ul li .product {position:absolute; top:calc(50vh - 242px); left:calc(50% + 150px); z-index:9999}
.product-deet ul li p {max-width:215px; color:#8f8f8f; font-size:18px; padding-top:40px; margin:0 auto}
.product-deet ul li:nth-child(3) p {max-width:220px; padding-top:20px}
.product-deet ul li:nth-child(4) p, .product-deet ul li:nth-child(9) p {max-width:221px}
.product-deet ul li:nth-child(1) div > img {top:85px}
.product-deet ul li:nth-child(2) div > img {top:132px; left:calc(50% - 415px)}
.product-deet ul li:nth-child(3) div > img {top:179px; left:calc(50% - 400px)}
.product-deet ul li:nth-child(4) div > img {top:226px; left:calc(50% - 385px)}
.product-deet ul li:nth-child(5) div > img {top:273px; left:calc(50% - 370px)}
.product-deet ul li:nth-child(6) div > img {top:320px; left:calc(50% - 355px)}
.product-deet ul li:nth-child(7) div > img {top:367px; left:calc(50% - 340px)}
.product-deet ul li:nth-child(8) div > img {top:414px; left:calc(50% - 325px)}
.product-deet ul li:nth-child(9) div > img {top:461px; left:calc(50% - 310px)}
.product-deet ul li:nth-child(10) div > img {top:508px; left:calc(50% - 295px)}

.products > a {top:250px; z-index:9999}
.products .left {display:none}

.about.last form {text-align:left; max-width:550px; margin:30px auto 0; display:none; width:85%}
.about.last form ul {border-bottom:1px dotted #666; padding-bottom:45px}
.about.last form .left {float:left; width:calc(50% - 15px); margin-right:30px}
.about.last form .right {float:left; width:calc(50% - 15px)}
.about.last form input {width:100%; line-height:40px; background:#27282c; border:1px solid #cb995c; color:#fff; outline:none; padding:0 20px}
.about.last form p {line-height:40px; margin-top:10px}
.about.last form textarea {height:110px; width:100%; background:#27282c; border:1px solid #cb995c; padding:10px 20px; color:#fff; outline:none; font-family: 'Open Sans', sans-serif}
.about.last form input[type="submit"] {width:120px; height:40px; background:#cb995c; color:#000; text-transform:uppercase; margin:30px auto 0; display:block; font-weight:700}

.specs-container {max-width:910px; margin:0 auto; color:#fff; position:relative; margin-bottom:100px}
.specs {height:550px; margin-bottom:130px}
.specs-container h2 {margin-bottom:70px}
.specs-container > img {display:none; padding:0 30px; max-width:100%}
.specs img {position:absolute}
.specs .upper {left:calc(50% - 175px); z-index:1; transition:0.5s}
.specs .inner {left:calc(50% - 175px); opacity:0; transition:0.5s}
.specs.active .upper {left:calc(50% - 300px)}
.specs.active .inner {left:calc(50% - 150px); opacity:1}

.specs > div {position:absolute; z-index:5}
.specs .line1 {margin-top:63px; left:calc(50% - 205px)}
.specs .line2 {margin-top:160px; left:calc(50% - 260px)}
.specs .line3 {margin-top:270px; left:calc(50% - 240px)}
.specs .line4 {margin-top:350px; left:calc(50% - 350px)}
.specs .line5 {margin-top:430px; left:calc(50% - 350px)}
.specs .line6 {margin-top:145px; left:calc(50% + 100px)}
.specs .line7 {margin-top:200px; left:calc(50% + 90px)}
.specs .line8 {margin-top:440px; left:calc(50% - 65px)}

.specs b {width:62px; height:62px; display:block; opacity:0; position:absolute; margin-top:-21px; pointer-events:none}
.specs.active b {opacity:1; margin-top:-31px; transition:opacity 0.3s 1s, margin-top 0.3s 1s, margin-left 0.3s ease-in; margin-left:-100px}
.specs .line1 b {background:url(../images/01-water.png)}
.specs .line2 b {background:url(../images/02-vape.png); margin-top:-11px}
.specs .line3 b {background:url(../images/03-battery.png)}
.specs .line4 b {background:url(../images/04-nicotine.png)}
.specs .line5 b {background:url(../images/05-puffs.png)}
.specs .line6 b {background:url(../images/06-coil.png); margin-left:145px}
.specs .line7 b {background:url(../images/07-tank.png); margin-left:105px}
.specs .line8 b {background:url(../images/08-battery.png); margin-left:190px}
.specs.active .line1 b {transition:opacity 0.3s 1s, margin-top 0.3s 1s, margin-left 0.3s ease-in-out}
.specs.active .line2 b {transition:opacity 0.3s 2s, margin-top 0.3s 2s, margin-left 0.3s ease-in-out; margin-top:-21px}
.specs.active .line3 b {transition:opacity 0.3s 3s, margin-top 0.3s 3s, margin-left 0.3s ease-in-out}
.specs.active .line4 b {transition:opacity 0.3s 2.5s, margin-top 0.3s 2.5s, margin-left 0.3s ease-in-out}
.specs.active .line5 b {transition:opacity 0.3s 1.5s, margin-top 0.3s 1.5s, margin-left 0.3s ease-in-out}
.specs.active .line6 b {transition:opacity 0.3s 1.7s, margin-left 0.3s 1.7s, margin-top 0.3s ease-in-out; margin-left:130px}
.specs.active .line7 b {transition:opacity 0.3s 1s, margin-left 0.3s 1s, margin-top 0.3s ease-in-out; margin-left:90px}
.specs.active .line8 b {transition:opacity 0.3s 2.7s, margin-left 0.3s 2.7s, margin-top 0.3s ease-in-out; margin-left:175px}
.specs .line1:hover b, .specs .line4:hover b {margin-left:-275px}
.specs .line2:hover b, .specs .line3:hover b {margin-left:-250px}
.specs .line5:hover b {margin-left:-200px}
.specs .line6:hover b, .specs .line7:hover b, .specs .line8:hover b {margin-top:-80px}

.specs p {font-size:18px; color:#fff; position:absolute; opacity:0; font-weight:300; line-height:0; left:-190px; pointer-events:none}
.specs .line1 p, .specs .line4 p {width:175px}
.specs .line2 p {width:180px; line-height:22px; margin-top:-10px; left:-165px}
.specs .line3 p {width:145px; left:-160px}
.specs .line5 p {width:95px; left:-110px}
.specs .line6 p {width:80px; left:115px; line-height:22px; margin-top:-10px}
.specs .line7 p {width:115px; left:75px; line-height:22px; margin-top:-10px}
.specs .line8 p {width:130px; left:160px; line-height:22px; margin-top:-10px}
.specs > div:hover p {opacity:1; transition:all 0.5s}
.specs .line1:hover p, .specs .line4:hover p {left:-200px}
.specs .line2:hover p, .specs .line3:hover p {left:-175px}
.specs .line5:hover p {left:-125px}
.specs .line6:hover p {left:130px}
.specs .line7:hover p {left:90px}
.specs .line8:hover p {left:175px}

.specs i {content:" "; transition:all 0.3s; width:21px; height: 21px; opacity:0; background:url(../images/point.png); display:block; margin:-10px 0 0 -20px; float:left; cursor:pointer}
.specs i::before {content:" "; width:21px; height:21px; border-radius:50%; transition:all 0.3s; animation:mymove 2s infinite; position: absolute; border:2px solid #cb995c}
@-webkit-keyframes mymove {50% {transform: scale(1.5); opacity:0} 100% {transform:scale(1.5); opacity:0}}
.specs .line1 i {transition:all 0.3s ease-in 0.8s}
.specs .line2 i {transition:all 0.3s ease-in 1.8s}
.specs .line3 i {transition:all 0.3s ease-in 2.8s}
.specs .line4 i {transition:all 0.3s ease-in 2.3s}
.specs .line5 i {transition:all 0.3s ease-in 1.3s}
.specs .line6 i {transition:all 0.3s ease-in 1.5s; margin-left:-1px}
.specs .line7 i {transition:all 0.3s ease-in 0.8s; margin-left:-1px}
.specs .line8 i {transition:all 0.3s ease-in 2.5s; margin:-21px 0 0 144px}
.specs.active i {opacity:1}

.specs span {width:0; height:22px; transition:0.5s; display:block; position:absolute; right:-145px; margin-top:-11px; padding-top:11px; cursor:pointer}
.specs > div > em {width:2px; height:0; transition:all 0.3s 0.7s; display:block; background:#cb995c}
.specs.active > div > em {height:110px}
.specs span em {height:2px; background:#cb995c; display:block}
.specs.active span {width:145px}
.specs .line3 span {right:-60px}
.specs .line5 span {right:-110px}
.specs .line6 span, .specs .line7 span, .specs .line8 span {right:auto; position:relative; float:left}
.specs.active .line3 span, .specs.active .line7 span {width:60px}
.specs.active .line5 span, .specs.active .line8 {width:110px}
.specs.active .line6 span {width:100px}
.specs .line1 span {transition-delay:0.5s}
.specs .line2 span {transition-delay:1.5s}
.specs .line3 span {transition-delay:2.5s}
.specs .line4 span {transition-delay:2s}
.specs .line5 span, .specs .line7 span {transition-delay:1s}
.specs .line6 span {transition-delay:1.2s}
.specs .line8 span {transition-delay:2.2s}

.thankyou.popup .yes {margin-left:0}
.thankyou.popup p {font-size:14px}
.thankyou.popup img {padding-top:70px}

@media screen and (min-width:1700px) {
	.content--canvas img {width:150px}
	.product {left:calc(50% - 5px); top:calc(50vh + 300px)}
	.content-box {max-width:860px}
}

@media screen and (max-width:1620px) {
	.gallery {width:75%; margin-left:3.5%}
	.gallery li {float:left; margin-right:3%}
	.gallery li:nth-child(1) {width:61%; height:290px; margin-bottom:35px}
	.gallery li:nth-child(2) {width:33%; height:290px; margin-bottom:35px}
	.gallery li:nth-child(3) {width:35%; height:390px}
	.gallery li:nth-child(4) {width:59%; height:390px}
	.last-img {width:18%; height:715px; float:left; margin-right:3.5%}
}

@media screen and (max-width:1300px) {
	.specs {left:100px; position:relative}
}
	
@media screen and (max-width:1100px) {
.video-container video {width:auto; height:100vh}
	.last-img {height:705px}
	.gallery li:nth-child(1), .gallery li:nth-child(2) {margin-bottom:25px}
	
	.product-deet ul li div > img {transform:none !important; top:0 !important; max-width:100%}
}

@media screen and (max-width:900px) {
	.last-img {margin:0 0 0 3.5%; width:93%; height:250px; margin-bottom:100px}
	.gallery {width:93%; margin-bottom:25px}
	.gallery li:nth-child(2) {width:36%; margin-right:0}
	.gallery li:nth-child(4) {margin-right:0}
	.gallery li:nth-child(3) {width:38%}
	.last-img {background:url(../images/IMG5-BWm.jpg) center; background-size:cover}
	.last-img:hover {background:url(../images/IMG5-COLORm.jpg) center; background-size:cover}
	.specs {display:none}
	.specs-container > img {display:block}
	.product-deet ul li div > img {max-width:none!important; height:100vh; left:calc(50% - 420px)!important}
}
	
@media screen and (max-width:670px) {
	.popup .text {left:5%}
	.logo {width:100px; position:absolute; left:calc(50% - 45px);
-webkit-animation: appear 2s ease-in forwards;
    animation: appear 2s ease-in forwards}
@-webkit-keyframes appear {
    0% { opacity:0; width:100px; left:calc(50% - 45px)}
    100% { opacity:1; width:125px; left:calc(50% - 60px)}
}
@keyframes appear {
    0% { opacity:0; width:100px; left:calc(50% - 45px)}
    100% { opacity:1; width:125px; left:calc(50% - 60px)}
}
	
	.video-container video {display:none}
	.video-container img {display:block}
	
	.about {margin:-60px auto 100px}
	.about .content-box {padding:40px; margin-bottom:0}
	.last-img {margin-bottom:50px}
	.about.last {margin-top: 0}
	
	.product-deet ul li div span {margin-left:calc(50% - 190px)}
	.product-deet ul li .product {left:calc(50% + 110px)}
	.product-deet ul li::before, .product-deet ul li::after {border:none}
}

@media screen and (max-width:575px) {
	.main-container {width:calc(100% - 30px); margin:15px auto}
	.navbar {right:40px !important; top:100px !important}
	.popup a {width:125px}
	.popup .yes {margin-left:20px}
	.popup h3 {font-size:21px; line-height:26px}
	.popup .text.no-access .no-acc br {display:none}
	.side-navigation {width:330px!important}
	.about h2, .title {letter-spacing:3px; margin-bottom:20px}
	.about p {margin-top:20px}
	.about .content-box {padding:30px}
	.gallery {margin-bottom:15px; margin-top:20px}
	.gallery li:nth-child(1), .gallery li:nth-child(2) {height:200px; margin-bottom:15px}
	.gallery li:nth-child(3), .gallery li:nth-child(4) {height:250px}
	.last-img {height:200px}
	.specs-container h2 {margin-bottom:40px}
	#products {margin-bottom:20px}
	.specs-container > img {padding:0 10px}
	.about.last form .left, .about.last form .right {width:calc(50% - 10px)}
	.about.last form .left {margin-right:20px}
	.about.last h2, .about.last .content-box > p {padding:0 40px}
	.about.last h2 br {display:none}
	.product-deet ul li h3 img {height:50px}
	.product-deet ul li {border:15px solid #fff}
	.product-deet ul li div {padding-top:calc(50vh - 180px)}
	.product-deet ul li div span {width:280px; height:310px; margin-left:calc(50% - 170px); padding-top:40px}
	.product-deet ul li .product {left:calc(50% + 90px)}
	.product-deet ul li p {padding-top:20px}
}