/*fix*/
html {overflow: hidden; margin: 0; padding: 0;} /*removed with js on load*/
body {margin: 0; padding: 0;}
* {box-sizing: border-box;}
.addsearch,
#slider_k2c {display: none !important;}
.nano-steamer a,
.nano-steamer a:hover {text-decoration: none;}
.nano-steamer a:focus {outline: none;}
.nano-steamer ul,
.nano-steamer ul li {margin: 0; list-style: none;}
.nano-steamer h1, .nano-steamer h2, .nano-steamer h3, .nano-steamer h4, .nano-steamer h5, .nano-steamer h6 {margin: 0;}
img {display: inline-block; max-width: 100%; width: 100%;}
.a-center {text-align: center;}

/*row*/
.row {width: 100%; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0;}
.row:after, .row:before {content: " "; display: table;}
.row .row {width: auto; margin-left: -.9375em; margin-right: -.9375em; margin-top: 0; margin-bottom: 0; max-width: none;}
.row .row:after {clear: both;}
.column, .columns {position: relative; padding-left: .9375em; padding-right: .9375em; float: left;}
@media only screen and (min-width: 40.063em) {
.medium-6 {width: 50%;}
.medium-3 {width: 25%;}
}
@media only screen and (min-width: 64.063em) {
.large-6 {width: 50%;}
.large-8 {width: 66.66667%;}
.large-2 {width: 16.66667%;}
}


/*basic*/
.nano-steamer {font-family: 'Barlow', 'Fira Sans', arial, sans-serif; overflow-y: hidden; background-color: #000; transition: background-color 2s; overflow-x: hidden;} 
.nano-steamer .ns-container {margin: 0 auto; max-width: 1500px; padding: 0 30px;}
.nano-steamer .ns-row:after {content: ""; display: table; clear: both;}
.nano-steamer .vimeo-wrapper {position: relative; top: 0; left: 0; width: 100%; padding-top: 56.25%;}
.nano-steamer .vimeo-wrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;}
.nano-steamer .vimeo-wrapper-back {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;}
.nano-steamer .vimeo-wrapper-back iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;}
.touch .nano-steamer .vimeo-wrapper-back {display: none;}
.nano-steamer .vimeo-mobile-only {display: none;}
.touch .nano-steamer .vimeo-mobile-only {display: block;}
.section-video-wrapper {position: relative;}
.section-video-wrapper video {width: 100%; height: 100%;}
.nano-steamer img.ns-hero-back {width: 100%; position: absolute; top: 50px; left: 0; z-index: -1;}

/*header*/
.nano-steamer .ns-header {width: 100%; position: fixed; z-index: 9999; background-color: transparent; transition: background-color .4s ease-out;}
.nano-steamer .ns-header .ns-header-logo {width: 20%; float: left; padding-top: 18px;}
.nano-steamer .ns-header .ns-header-logo img {width: 100%; max-width: 170px;}
.nano-steamer .ns-header:after {content: ""; clear: both; display: table;}
.nano-steamer .ns-header.ns-sticky-header {background-color: #000;}
.nano-steamer .ns-header .ns-container {position: relative;}

/*nav*/
.nano-steamer .ns-nav {float: left; width: 80%; text-align: right;}
.nano-steamer .ns-nav ul {display: inline-block;}
.nano-steamer .ns-nav ul li {display: inline-block;}
.nano-steamer .ns-nav ul li a {color: #fff; padding: 20px 15px; position: relative; text-transform: uppercase; display: inline-block; font-size: 14px;}
.nano-steamer .ns-nav ul li a:before {content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #bed62f; -webkit-transform-origin: bottom right; -ms-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); transition: transform 0.5s ease;}
.nano-steamer .ns-nav ul li a:hover::before,
.nano-steamer .ns-nav ul li a.ns-active::before {-webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1);}
.nano-steamer .ns-nav ul li a.ns-active {color: #bed62f;}
.nano-steamer .ns-mobile-nav {display: none;}

.ns-menu-icon {width: 20px; height: 19px; position: absolute; z-index: 10; top: 20px; right: 15px; display: none;}
.ns-menu-icon::before {content: ""; position: absolute; top: 0; left: 0; width: 20px; height: 3px; background-color: #bed62f; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; transition: transform .3s ease-out;}
.ns-menu-icon-middle {position: absolute; top: 8px; left: 0; width: 20px; height: 3px; background-color: #bed62f; transition: all .3s ease-out; -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%;}
.ns-menu-icon::after {content: ""; position: absolute; bottom: 0; left: 0; width: 20px; height: 3px; background-color: #bed62f; -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; transition: transform .3s ease-out;}
.ns-menu-icon-close::before {-webkit-transform: rotate(45deg) scaleX(1.25); -ms-transform: rotate(45deg) scaleX(1.25); transform: rotate(45deg) scaleX(1.25);}
.ns-menu-icon-close .ns-menu-icon-middle {opacity: 0; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0);}
.ns-menu-icon-close::after {-webkit-transform: rotate(-45deg) scaleX(1.25) translateY(1px); -ms-transform: rotate(-45deg) scaleX(1.25) translateY(1px); transform: rotate(-45deg) scaleX(1.25) translateY(1px);}

.nano-steamer .ns-nav ul li a.ns-nav-shop {background-color: #bed62f; color: #222; font-weight: bold; padding: 20px 40px; text-align: center; margin-left: 10px; transition: background-color 0.6s;}
.nano-steamer .ns-nav ul li a.ns-nav-shop:hover {background-color: #b2c82e;}
.nano-steamer .ns-nav ul li a.ns-nav-shop:before {height: 0;}

/*hero*/
.nano-steamer .ns-hero {background-color: #111; background: rgb(87,81,81); background: radial-gradient(circle, rgb(59, 55, 55) 0%, rgba(17,17,17,1) 41%); position: relative; z-index: 99;}
.nano-steamer .ns-hero .ns-hero-text {position: relative; padding: 20em 0; max-width: 1300px; margin: 0 auto;}
.nano-steamer .ns-hero .ns-hero-text h1 {font-size: 150px; color: #bed62f; margin: 0; text-transform: uppercase; font-weight: bold; line-height: 0.9em; text-shadow: -2px 1px 2px rgba(252, 252, 252, 0.91);}
.nano-steamer .ns-hero .ns-hero-text:after {content: ""; display: table; clear: both;}
.nano-steamer .ns-hero .ns-hero-text h2 {font-weight: normal;}
.nano-steamer .ns-hero .ns-hero-text h1 span,
.nano-steamer .ns-hero .ns-hero-text h2 span {display: block;}
.nano-steamer .ns-hero .ns-hero-text h1 span:nth-child(2) {text-align: center;}
.nano-steamer .ns-hero .ns-hero-text h2 {color: #fff; font-size: 42px;  padding-top: 0.7em; max-width: 400px; float: right;}
.nano-steamer .ns-hero .ns-hero-text h2 span:first-child {margin-left: -1em;}
.nano-steamer .ns-hero .nano-steamer img.ns-hero-back {top: 0;}

.nano-steamer .ns-hero img.hero-main-img { max-width: 700px; position: absolute; top: 12%; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); z-index: 9; }

/*hero-video*/
.video-wrapper-hero video,
.video-wrapper-bubbles video {position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background-size: cover; transition: 1s opacity;}
.video-wrapper-hero {position: fixed; height: 100vh; width: 100%; z-index: 999999; top: 0;}

/*hero effects*/
.nano-steamer .ns-hero .ns-hero-effect {opacity: 0; transition: all 1s;}
.nano-steamer .ns-hero .hero-main-img.ns-hero-effect-1 {-webkit-transform: scale(0.5) translate(-50%, 0); -ms-transform: scale(0.5) translate(-50%, 0); transform: scale(0.5) translate(-50%, 0);} 
.nano-steamer .ns-hero .ns-hero-effect-2 {-webkit-transform: translateX(-300px); -ms-transform: translateX(-300px); transform: translateX(-300px);}
.nano-steamer .ns-hero .ns-hero-effect-3 {-webkit-transform: translateX(200px); -ms-transform: translateX(200px); transform: translateX(200px);}
.nano-steamer .ns-hero .ns-hero-effect-4 {-webkit-transform: translateX(-60px); -ms-transform: translateX(-60px); transform: translateX(-60px);}
.nano-steamer .ns-hero .ns-hero-effect.ns-hero-effect-active {opacity: 1;}
.nano-steamer .ns-hero .hero-main-img.ns-hero-effect-active.ns-hero-effect-1 {-webkit-transform: scale(1) translate(-50%, 0); -ms-transform: scale(1) translate(-50%, 0); transform: scale(1) translate(-50%, 0);}
.nano-steamer .ns-hero .ns-hero-effect-active.ns-hero-effect-2,
.nano-steamer .ns-hero .ns-hero-effect-active.ns-hero-effect-3,
.nano-steamer .ns-hero .ns-hero-effect-active.ns-hero-effect-4 {-webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}

/*first section*/
.nano-steamer .ns-first-section {background-color: #000; position: relative; padding-bottom: 150px; transition: background-color 2s;}
.nano-steamer .ns-first-section img.hero-bottom-img {margin-top: -10px; position: relative; z-index: 9;}
.nano-steamer .ns-first-section .ns-first-section-wrapper {position: relative; z-index: 9;}
.nano-steamer .ns-first-section .ns-first-section-content {padding: 200px 20px 75px; text-align: center; position: relative;}
.nano-steamer .ns-first-section .ns-first-section-content h3 {color: #fff; font-size: 50px; padding-bottom: 1em; font-weight: bold;}
.nano-steamer .ns-first-section .ns-first-section-video {max-width: 1260px; width: 100%; margin: 0 auto;}
.nano-steamer .ns-first-section .vimeo-wrapper iframe {-webkit-transform: skew(0,-2deg); -ms-transform: skew(0,-2deg); transform: skew(0,-2deg); box-shadow: -20px 20px 50px -4px rgba(0, 0, 0, 0.50);}
.nano-steamer .ns-first-section.ns-active-first .ns-first-section-content,
.nano-steamer .ns-first-section.ns-active-first .vimeo-wrapper {opacity: 1;}
.nano-steamer img.hero-bottom-img-mobile {display: none;}
.nano-steamer .ns-first-section .video-wrapper-bubbles {position: absolute; height: 100vh; width: 100%; z-index: 8; top: 13%;}
.nano-steamer .ns-first-section img.ns-hero-back {top: 30%; z-index: 1;}

/*section*/
.nano-steamer .ns-section {background-color: #171717; min-height: 500px; display: block; width: 100%; color: #fff; outline: none; transform: skew(0,-2deg); -ms-transform: skew(0,-2deg);  -webkit-transform: skew(0,-2deg);  padding: 150px 0;}
.nano-steamer .ns-section .ns-container {position: relative;}
.nano-steamer .ns-section .ns-section-inner {transform: skew(0,2deg); -ms-transform: skew(0,2deg); -webkit-transform: skew(0,2deg);}
.nano-steamer .ns-section .ns-section-inner .ns-container {overflow-x: hidden;}
.nano-steamer .ns-section-dark {background-color: #111111;}
.nano-steamer .ns-section h2 {font-size: 36px; font-weight: bold; margin-bottom: 1.2em;}
.nano-steamer .ns-section p {font-size: 28px;}
.nano-steamer .ns-section .ns-section-title-line {width: 100%; height: 2px; background-color: #bed62f; transform: skew(0,-1.5deg); -ms-transform: skew(0,-1.5deg);  -webkit-transform: skew(0,-1.5deg); margin-bottom: 30px;}
.nano-steamer .ns-section .ns-section-main {width: 100%; padding-left: 15%; overflow: hidden; position: relative;}
.nano-steamer .ns-section .ns-section-main .ns-section-row {position: relative; padding: 4% 0;}
.nano-steamer .ns-section .ns-section-main .ns-section-row .ns-section-text {width: 48%; position: absolute; top: 50%; left: 0; z-index: 9;}
.nano-steamer .ns-section .ns-section-main .ns-section-row .ns-section-text p {font-size: 28px; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.57);}
.nano-steamer .ns-section .ns-section-main .ns-section-row .ns-section-vimeo {width: 60%; margin-left: 40%;}
.nano-steamer .ns-section .ns-section-main .ns-section-row-second .ns-section-text {left: auto; right: 0;}
.nano-steamer .ns-section .ns-section-main .ns-section-row-second .ns-section-vimeo {margin-left: 0;}
.nano-steamer .ns-section .ns-section-sidebar {width: 15%; position: absolute; padding-top: 150px; height: 100%;}
.nano-steamer .ns-section .ns-section-sidebar h4 {-webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); text-transform: uppercase; color: #bed62f; position: relative; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; display: none; font-weight: normal; font-size: 20px;}
.nano-steamer .ns-section .ns-section-proggress-line {width: 2px; background-color: #bed62f; height: 100%; position: absolute; left: -14%; top: -50%; z-index: 9;}
.nano-steamer .ns-section .ns-section-proggress-icon {width: 30px; height: 30px; padding: 8px; border: 2px dashed #bed62f; border-radius: 100%; background-color: #111; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: -15.2%; z-index: 99;}
.nano-steamer .ns-section .ns-section-proggress-icon span {display: block; width: 10px; height: 10px; background-color: #bed62f; border-radius: 100%;}

.nano-steamer .ns-section.ns-section-left .ns-section-main {padding-left: 0; padding-right: 15%;;}
.nano-steamer .ns-section.ns-section-left .ns-section-sidebar {left: auto; right: 0; top: 0; padding-top: 120px;}
.nano-steamer .ns-section.ns-section-left .ns-section-sidebar h4 {margin-left: 58%;}
.nano-steamer .ns-section.ns-section-left .ns-section-proggress-line {left: auto; right: -11%;}
.nano-steamer .ns-section.ns-section-left-bottom .ns-section-proggress-icon {left: auto; right: -12.2%;}
.nano-steamer .ns-section.ns-section-left.ns-section-special .ns-section-sidebar {padding-top: 150px;}
.nano-steamer .ns-section.ns-section-left.ns-section-special .ns-section-sidebar h4 {margin-left: 63%;}

.nano-steamer .ns-section.ns-section-special .ns-section-proggress-line { top: -6%; right: 5%;}
.nano-steamer .ns-section.ns-section-special .ns-section-proggress-icon { top: 90%; right: 4%; left: auto;}
.nano-steamer .ns-section.ns-section-special .ns-section-special-videos {padding-top: 60px;}
.nano-steamer .ns-section.ns-section-special .ns-container {position: relative;}
.nano-steamer .ns-section.ns-section-special .ns-section-special-videos h6 {position: absolute; top: 5%; left: 3%; text-transform: uppercase; font-size: 26px; color: #bed62f; font-weight: normal;}

/*upgrade section*/
.nano-steamer .ns-section-upgrade {padding-bottom: 25%;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav {padding-top: 50px;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul {font-size: 0; padding: 0; overflow:hidden; height: 426px;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul:after {content: ""; display: table; clear: both;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li h5 {font-size: 28px; text-transform: uppercase; color: #bed62f; position: absolute; top: 0; left: 0; z-index: 9; padding: 10px 10px 10px 15px; font-weight: normal;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li {display: inline-block; width: 20%; overflow: hidden; position: relative; transition: all 0.4s;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li .ns-uprade-nav-img-wrapper {position: relative; height: 426px; bottom: 0;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li .ns-uprade-nav-img-wrapper .ns-uprade-nav-img {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li .ns-uprade-nav-img-wrapper .ns-uprade-nav-img img {max-width: none; width: auto; -webkit-filter: grayscale(100%); filter: grayscale(100%); transition: 0.4s;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li .ns-upgrade-text {position: absolute; bottom: 0; left: 0; z-index: 9; background-color: rgba(0, 0, 0, 0.63); padding: 15px; opacity: 0; transition: opacity 0s; backface-visibility: hidden; -webkit-backface-visibility: hidden;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li .ns-upgrade-text p {font-size: 20px; margin: 0;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav .ns-upgrade-img-mobile {display: none;}

.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li.of {width: 19.25%;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li.on {width: 23%;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li.on .ns-uprade-nav-img img {grayscale(0); filter: grayscale(0);}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li.on .ns-upgrade-text {opacity: 1; transition: opacity 1s; transition-delay: 0.2s;}

/*product section*/
.nano-steamer .ns-section-product {-webkit-transform: skew(0,0); -ms-transform: skew(0,0); transform: skew(0,0); padding-top: 0;}
.nano-steamer .ns-section-product .product-bottom-img {-webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); margin-top: -12%;}
.nano-steamer .ns-section-product .ns-container {padding-top: 100px;}
.nano-steamer .ns-section-product .ns-product-content {position: relative; width: 40%; float: left; margin-top: 50px; float: left; right: 60%;}
.nano-steamer .ns-section-product .ns-product-content h3 {font-size: 100px; font-weight: bold; line-height: 1; margin-bottom: 0.5em;}
.nano-steamer .ns-section-product .ns-product-content .ns-buy-btn {display: inline-block; color: #231f20; background-color: #bed62f; padding: 0.6em 4em; text-transform: uppercase; font-size: 20px; font-weight: bold; transition: background-color 0.4s;}
.nano-steamer .ns-section-product .ns-product-content .ns-buy-btn:hover {background-color: #b2c82e;}
.nano-steamer .ns-section-product .ns-section-img {position: relative; width: 60%; float: left; margin-top: -100px; position: relative; left: 40%;}
.nano-steamer .ns-section.ns-section-product h2 {padding-right: 25%;}
.nano-steamer .ns-section-product img.ns-hero-back {top: 16%;}

/*scroll effects first section*/
.nano-steamer .ns-scroll-effect{ opacity: 0; transition: all 1.4s;}
.nano-steamer .ns-scroll-effect-left,
.nano-steamer .ns-scroll-effect-right {-webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3);}
.nano-steamer .ns-scroll-effect-active {opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}

/*footer*/
.nano-steamer .ns-footer {width: 100%; background-color: #000; color: #fff; border-top: 5px solid #bed62f;}
.nano-steamer .ns-footer .ns-footer-main {padding: 50px 0 60px; border-bottom: 1px solid #373737;}
.nano-steamer .ns-footer .ns-footer-main .ns-footer-logo {max-width: 220px; margin-bottom: 25px;}
.nano-steamer .ns-footer .ns-footer-main p {margin: 0; font-size: 14px;}
.nano-steamer .ns-footer .ns-footer-main h6 {font-weight: bold; font-size: 14px; margin-bottom: 14px;}
.nano-steamer .ns-footer .ns-footer-main .ns-sign-btn {display: block; color: #000; text-transform: uppercase; background-color: #bed62f; font-size: 14px; padding: 0.6em; font-weight: bold; text-align: center; margin-top: 20px;}
.nano-steamer .ns-footer .ns-footer-main .ns-sign-btn:hover {background-color: #b2c82e;}
.nano-steamer .ns-footer .ns-footer-main .links-container-icons li {display: inline-block;}
.nano-steamer .ns-footer .ns-footer-main .links-container-icons li a {color: #bed62f; font-size: 36px; padding: 5px;}
.nano-steamer .ns-footer .ns-footer-main .links-container-icons .fa {-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); transition: all 0.2s;}
.nano-steamer .ns-footer .ns-footer-main .links-container-icons .fa:hover {-webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); color: #b2c82e;} 

.nano-steamer .ns-footer .ns-footer-info {text-align: center; padding: 20px 0;}
.nano-steamer .ns-footer .ns-footer-info h5 {font-weight: bold; text-transform: uppercase;}

.nano-steamer .ns-footer .ns-footer-copy {text-align: center; background-color: #171717; padding: 10px;}
.nano-steamer .ns-footer .ns-footer-copy p {margin: 0;}

/*loader screen*/
.nano-steamer-loader-screen { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background: #000;z-index: 999999999;position: fixed; left: 0; top: 0;}
#preloader {position: fixed; top: 0; left: 0; width: 100%; height: 100%;}
#loader {display: block; position: relative; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; border: 3px solid transparent; border-top-color: #bed62f; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite;}
#loader:before {content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #bed62f; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite;}
#loader:after {content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #bed62f; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite;}
@-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg); transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes spin {
0% {-webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}
}

/*scroll animations with waypoints*/
.nano-steamer .ns-section .ns-section-proggress-line {height: 0; transition: height 1s;}
.nano-steamer .ns-section .ns-proggress-line-active {height: 100%;}

.nano-steamer .ns-section .ns-transform-animation-left,
.nano-steamer .ns-section .ns-transform-animation-left2,
.nano-steamer .ns-section .ns-transform-animation-right,
.nano-steamer .ns-section .ns-transform-animation-right2,
.nano-steamer .ns-section .ns-transform-animation-left3 {transition: all 1.2s; opacity: 0;}
.nano-steamer .ns-section .ns-transform-animation-left {-webkit-transform: translateX(-15%); -ms-transform: translateX(-15%); transform: translateX(-15%);}
.nano-steamer .ns-section .ns-transform-animation-left2 {-webkit-transform: translate(-15%,-50%); -ms-transform: translate(-15%,-50%); transform: translate(-15%,-50%);}
.nano-steamer .ns-section .ns-transform-animation-right {-webkit-transform: translateX(15%); -ms-transform: translateX(15%); transform: translateX(15%);}
.nano-steamer .ns-section .ns-transform-animation-right2 {-webkit-transform: translate(15%,-50%); -ms-transform: translate(15%,-50%); transform: translate(15%,-50%);}
.nano-steamer .ns-section .ns-transform-animation-left3 {-webkit-transform: translateX(-15%); -ms-transform: translateX(-15%); transform: translateX(-15%);}

.nano-steamer .ns-section .ns-start-transform-animation1 {-webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1;}
.nano-steamer .ns-section .ns-start-transform-animation2 .ns-transform-animation-left2,
.nano-steamer .ns-section .ns-start-transform-animation2 .ns-transform-animation-right2 {-webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%); opacity: 1;}
.nano-steamer .ns-section .ns-start-transform-animation2 .ns-transform-animation-right,
.nano-steamer .ns-section .ns-start-transform-animation2 .ns-transform-animation-left3 {-webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1;}

@media (max-width: 1680px) {
/*hero*/
.nano-steamer .ns-hero .ns-hero-text {max-width: 1100px; padding: 17em 0 10em;}
.nano-steamer .ns-hero .ns-hero-text h1 {font-size: 130px;}
.nano-steamer .ns-hero .ns-hero-text h2 {font-size: 38px;}
.nano-steamer .ns-hero img.hero-main-img {max-width: 600px;}
.nano-steamer .ns-first-section img.hero-bottom-img {margin-top: 0;}
/*first section*/
.nano-steamer .ns-first-section .ns-first-section-video {max-width: 1100px;}
}

@media (max-width: 1360px) {
/*hero*/
.nano-steamer .ns-hero .ns-hero-text {max-width: 830px; padding: 17em 0 8em;}
.nano-steamer .ns-hero .ns-hero-text h1 {font-size: 100px;}
.nano-steamer .ns-hero .ns-hero-text h2 {font-size: 26px;}
.nano-steamer .ns-hero img.hero-main-img {max-width: 480px;}
/*section*/
.nano-steamer .ns-section .ns-section-main .ns-section-row .ns-section-text p,
.nano-steamer .ns-section p {font-size: 22px;}
/*product section*/
.nano-steamer .ns-section.ns-section-product h2 {padding-right: 0;}
.nano-steamer .ns-section-product .ns-product-content h3 {font-size: 80px;}
.nano-steamer .ns-section-product .ns-section-img {margin-top: 0;}
/*upgrade section*/
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li h5 {font-size: 21px;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li .ns-upgrade-text p {font-size: 18px;}
/*footer*/
.nano-steamer .ns-footer .ns-footer-main .links-container-icons li a {font-size: 30px; padding: 2px;}
}

@media (max-width: 1200px) {
/*nav*/
.nano-steamer .ns-nav {width: 60%;}
.nano-steamer .ns-header .ns-header-logo {width: 40%;}
.nano-steamer .ns-nav .ns-nav-mobile-hide {display: none; position: fixed; width: 100%; left: 0; top: 59px; background-color: rgba(0, 0, 0, 0.85); text-align: center; padding: 20px 10px; border-top: 1px solid #2b2b2b; border-bottom: 1px solid #2b2b2b; height: 97%;}
.nano-steamer .ns-nav .ns-nav-mobile-hide li {display: block;}
.nano-steamer .ns-nav .ns-nav-mobile-hide li a {font-size: 24px; padding: 5px; display: inline-block;}
.nano-steamer .ns-menu-icon {display: block;}
.nano-steamer .ns-nav ul li a.ns-nav-shop {margin-right: 20px;}
/*first section*/
.nano-steamer .ns-first-section .ns-first-section-content h3 {font-size: 32px;}
/*section*/
.nano-steamer .ns-section h2 {font-size: 30px;}
.nano-steamer .ns-section .ns-section-proggress-icon {left: -15.7%;}
.nano-steamer .ns-section.ns-section-left-bottom .ns-section-proggress-icon {right: -12.5%;}
.nano-steamer .ns-section.ns-section-special .ns-section-proggress-icon {right: 3.6%;}
.nano-steamer .ns-section .ns-section-sidebar h4 {font-size: 18px;}
.nano-steamer .ns-section.ns-section-left.ns-section-special .ns-section-sidebar {padding-top: 135px;}
/*product section*/
.nano-steamer .ns-section-product .ns-product-content h3 {font-size: 60px;}
}

@media (max-width: 1040px) {
/*section*/
.nano-steamer .ns-section .ns-section-main .ns-section-row {padding: 1% 0;}
.nano-steamer .ns-section .ns-section-main .ns-section-row .ns-section-text {width: 100%; position: relative; -webkit-transform: translate(0,0); -ms-transform: translate(0,0); transform: translate(0,0); top: 0;}
.nano-steamer .ns-section .ns-section-main .ns-section-row .ns-section-vimeo {width: 100%; margin-left: 0;}
/*product section*/
.nano-steamer .ns-section-product .ns-product-content {margin-top: 25px;}
.nano-steamer .ns-section-product .ns-product-content h3 {font-size: 52px;}
.nano-steamer .ns-section-product .ns-product-content .ns-buy-btn {font-size: 18px; padding: 0.6em 3em;}
/*first section*/
.nano-steamer .ns-first-section {padding-bottom: 100px;}
.nano-steamer .ns-first-section .ns-first-section-content {padding: 120px 0 50px;}
/*section*/
.nano-steamer .ns-section .ns-section-proggress-line {left: -12%;}
.nano-steamer .ns-section .ns-section-proggress-icon {left: -13.6%;}
.nano-steamer .ns-section.ns-section-left-bottom .ns-section-proggress-icon {right: -12.7%;}
.nano-steamer .ns-section.ns-section-special .ns-section-proggress-icon {right: 3.4%;}
/*upgrade section*/
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li h5 {font-size: 18px;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li .ns-upgrade-text p {font-size: 16px;}
}

@media (max-width: 890px) {
/*hero*/
.nano-steamer .ns-hero .ns-hero-text {max-width: 640px; padding: 11em 0 8em;}
.nano-steamer .ns-hero .ns-hero-text h1 {font-size: 70px;}
.nano-steamer .ns-hero .ns-hero-text h2 {font-size: 22px;}
.nano-steamer .ns-hero img.hero-main-img {max-width: 360px;}
/*section*/
.nano-steamer .ns-section .ns-section-proggress-icon {left: -14.2%;}
.nano-steamer .ns-section.ns-section-left-bottom .ns-section-proggress-icon {right: -13.3%;}
.nano-steamer .ns-section.ns-section-special .ns-section-proggress-icon {right: 3.2%;}
/*upgrade section*/
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul {height: auto;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li {display: block; width: 100%; height: 120px; transition: all 0.6s;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li .ns-uprade-nav-img-wrapper {height: auto;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li .ns-uprade-nav-img-wrapper .ns-uprade-nav-img {position: relative;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li .ns-uprade-nav-img-wrapper .ns-uprade-nav-img img {width:100%;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li.ns-active-nav-prog {height: auto;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li h5 {text-align: right; display: block;width: 100%; padding-right: 20px; font-size: 28px; background-color: rgba(0, 0, 0, 0.63); margin: 0;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li h5:after {content: "\f067"; font-family: FontAwesome; font-size: 19px; position: relative; top: -2px; margin-left: 15px;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li.ns-active-nav-prog h5:after {content: "\f068";}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li.ns-active-nav-prog .ns-upgrade-text {opacity: 1; bottom: auto; top: 56px; text-align: right; width: 100%; padding-top: 0;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li .ns-upgrade-text p {font-size: 20px;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav .ns-upgrade-img-desktop {display: none;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav .ns-upgrade-img-mobile {display: block;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li .ns-uprade-nav-img-wrapper .ns-uprade-nav-img img {-webkit-filter: grayscale(0); filter: grayscale(0);}
}

@media (max-width: 640px) {
/*basic*/
.nano-steamer .ns-container {padding: 0 15px;}
/*nav*/
.ns-menu-icon {top: 10px;}
.nano-steamer .ns-nav ul li a.ns-nav-shop {padding: 10px 20px; margin-right: 35px;}
.nano-steamer .ns-header .ns-header-logo {padding-top: 8px;}
.nano-steamer .ns-header .ns-header-logo img {max-width: 134px;}
.nano-steamer .ns-nav .ns-nav-mobile-hide {top: 39px;}
.nano-steamer .ns-nav ul li a.ns-nav-shop {font-size: 12px; padding: 11px 13px;}
/*hero*/
.nano-steamer .ns-hero .ns-hero-text {padding: 9em 0 100px 110px;}
.nano-steamer .ns-hero img.hero-main-img {left: 0; -webkit-transform: translate(-6%, 0); -ms-transform: translate(-6%, 0); transform: translate(-6%, 0); max-width: 360px;}
.nano-steamer .ns-hero .hero-main-img.ns-hero-effect-active.ns-hero-effect-1 {-webkit-transform: scale(1) translate(-6%, 0); -ms-transform: scale(1) translate(-6%, 0); transform: scale(1) translate(-6%, 0);}
.nano-steamer .ns-hero .ns-hero-text h1 {font-size: 40px; text-shadow: none;}
.nano-steamer .ns-hero .ns-hero-text h1 span:nth-child(2) {text-align: left; padding-left: 0.5em;}
.nano-steamer .ns-hero .ns-hero-text h2 {font-size: 19px; float: none; padding-left: 90px;}
/*first section*/
.nano-steamer .ns-first-section .ns-first-section-content {padding: 120px 0 30px;}
.nano-steamer .ns-first-section .ns-first-section-content h3 {font-size: 24px;}
.nano-steamer .ns-first-section {padding-bottom: 55px;}
.nano-steamer img.hero-bottom-img-desktop {display: none;}
.nano-steamer img.hero-bottom-img-mobile {display: block;}
/*section*/
.nano-steamer .ns-section {padding: 70px 0;}
.nano-steamer .ns-section h2 {font-size: 24px;}
.nano-steamer .ns-section .ns-section-main .ns-section-row .ns-section-text p,
.nano-steamer .ns-section p {font-size: 16px;}
.nano-steamer .ns-section .ns-section-proggress-line {left: -9%;}
.nano-steamer .ns-section .ns-section-proggress-icon {left: -12%;}
.nano-steamer .ns-section.ns-section-left-bottom .ns-section-proggress-icon {right: -14%;}
.nano-steamer .ns-section.ns-section-special .ns-section-proggress-icon {right: 2.4%;}
.nano-steamer .ns-section.ns-section-special .ns-section-special-videos h6 {font-size: 20px;}
/*upgrade section*/
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li h5 {font-size: 24px;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li .ns-upgrade-text p {font-size: 18px;}
.nano-steamer .ns-section-upgrade {padding: 70px 0 40%;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li h5 {padding: 5px 10px 5px 5px;}
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li.ns-active-nav-prog .ns-upgrade-text {top: 46px;}
/*product section*/
.nano-steamer .ns-section-product .product-bottom-img {margin-top: -37%;}
.nano-steamer .ns-section-product {padding-bottom: 40px;}
.nano-steamer .ns-section-product h2 {padding-right: 30%;}
.nano-steamer .ns-section-product .ns-section-img {width: 100%; left: 0; margin-top: -100px;}
.nano-steamer .ns-section-product .ns-product-content {width: 100%; right: 0; margin-top: 0;}
.nano-steamer .ns-section-product .ns-product-content .ns-buy-btn {display: block; width: 100%; text-align: center; padding: 0.6em 1em;}
/*footer*/
.nano-steamer .ns-footer .ns-footer-main {text-align: center;}
.nano-steamer .ns-footer .ns-footer-main .ns-sign-btn {display: inline-block; padding: 0.6em 2em; margin-bottom: 20px;}
.nano-steamer .ns-footer .ns-footer-main .ns-footer-logo {max-width: 180px;}
} 

@media (max-width: 460px) {
/*hero*/
.nano-steamer .ns-hero img.hero-main-img {-webkit-transform: translate(-17%, 0); -ms-transform: translate(-17%, 0); transform: translate(-17%, 0);}
.nano-steamer .ns-hero .hero-main-img.ns-hero-effect-active.ns-hero-effect-1 {-webkit-transform: scale(1) translate(-17%, 0); -ms-transform: scale(1) translate(-17%, 0); transform: scale(1) translate(-17%, 0);}
.nano-steamer .ns-hero .ns-hero-text {padding: 9em 0 100px 50px;}
.nano-steamer .ns-hero .ns-hero-text h1 {font-size: 38px;}
.nano-steamer .ns-hero .ns-hero-text h2 {padding-left: 70px;}
/*first section*/
.nano-steamer .ns-first-section .ns-first-section-content {padding: 55px 0 30px;}
/*section*/
.nano-steamer .ns-section .ns-section-sidebar h4 {margin-left: -6px;}
.nano-steamer .ns-section .ns-section-proggress-icon {left: -13%;}
.nano-steamer .ns-section.ns-section-special .ns-section-proggress-icon {right: 1.4%;}
.nano-steamer .ns-section.ns-section-left-bottom .ns-section-proggress-icon {right: -15%;}
.nano-steamer .ns-section.ns-section-left .ns-section-sidebar h4 {margin-left: 46%;}
.nano-steamer .ns-section.ns-section-left.ns-section-special .ns-section-sidebar h4 {margin-left: 55%;}
.nano-steamer .ns-section.ns-section-left .ns-section-sidebar h4 {margin-left: 51%;}
/*upgrade section*/
.nano-steamer .ns-section-upgrade .ns-uprade-nav ul li .ns-upgrade-text p {font-size: 16px;}
}

@media (max-width: 414px) {
.section-video-wrapper video {height: 182px;}
}

@media (max-width: 400px) {
/*section*/
.nano-steamer .ns-section .ns-section-proggress-icon {left: -14%;}
.nano-steamer .ns-section.ns-section-special .ns-section-proggress-icon {right: 1.2%;}
.nano-steamer .ns-section.ns-section-left-bottom .ns-section-proggress-icon {rightt: -15%;}
}

@media (max-width: 360px) {
.section-video-wrapper video {height: 100%;}
}