/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

.section-banner .wrapper.iframe iframe{
	width: 100%;
	height: 100%;
}
.section-banner .wrapper.iframe{
	width: 100%;
	height: 100%;
	position:absolute;

}
path#Stroke-398 {
	stroke-dasharray: 357;
    stroke-dashoffset: 285;
}

path#Stroke-396 {
	stroke-dasharray: 330;
	stroke-dashoffset: 290;
}

path#Stroke-357 {
	stroke-dasharray: 152;
	stroke-dashoffset: 217;
}

path#Stroke-369 {
	stroke-dasharray: 150;
	stroke-dashoffset: 152;
}

path#Stroke-535 {
	stroke-dasharray: 217;
	stroke-dashoffset: 195;
}

path#Stroke-661 {
	stroke-dasharray: 217;
	stroke-dashoffset: 131;
}
path#Stroke-74{
	stroke-dasharray: 200, 70;
	stroke-dashoffset: -114;
}
path#Stroke-32{
	stroke-dasharray: 400, 100;
	stroke-dashoffset: -254;
}
.how-page path{
	stroke: #fff;
}
.automation.active path#Stroke-74{
	-webkit-animation: stroke-74 2s linear forwards;
			animation: stroke-74 2s linear forwards;
}
.automation.active path#Stroke-32{
	-webkit-animation: stroke-32 2s linear forwards;
			animation: stroke-32 2s linear forwards;
}
.automation.active path#Stroke-398 {
	-webkit-animation: stroke-398 2s linear forwards;
			animation: stroke-398 2s linear forwards;
}

.automation.active path#Stroke-396 {
	-webkit-animation: stroke-396 2s linear forwards;
	animation: stroke-396 2s linear forwards;
}

.automation.active path#Stroke-357 {
	-webkit-animation: stroke-357 2s linear forwards;
	animation: stroke-357 2s linear forwards;
}

.automation.active path#Stroke-369 {
	-webkit-animation: stroke-369 2s linear forwards;
	animation: stroke-369 2s linear forwards;
}

.automation.active path#Stroke-535 {
	-webkit-animation: stroke-535 3s linear forwards;
	animation: stroke-535 3s linear forwards;
}

.automation.active path#Stroke-661 {
	-webkit-animation: stroke-661 3s linear forwards;
	animation: stroke-661 3s linear forwards;
}
@-webkit-keyframes stroke-74{
	to{
		stroke-dasharray: 200, 0;
	}
}
@keyframes stroke-74{
	to{
		stroke-dasharray: 200, 0;
	}
}
@-webkit-keyframes stroke-32{
	to{
		stroke-dasharray: 400, 0;
	}
}
@keyframes stroke-32{
	to{
		stroke-dasharray: 400, 0;
	}
}
@-webkit-keyframes stroke-398 {
	to {
		
		stroke-dashoffset: 65;
	}
}

@keyframes stroke-398 {
	to {
		
		stroke-dashoffset: 65;
	}
}

@-webkit-keyframes stroke-396 {
	to {
		stroke-dashoffset: 31;
	}
}

@keyframes stroke-396 {
	to {
		stroke-dashoffset: 31;
	}
}

@-webkit-keyframes stroke-357 {
	to {
		stroke-dashoffset: 304;
	}
}

@keyframes stroke-357 {
	to {
		stroke-dashoffset: 304;
	}
}

@-webkit-keyframes stroke-369 {
	to {
		stroke-dashoffset: 152;
	}
}

@keyframes stroke-369 {
	to {
		stroke-dashoffset: 152;
	}
}

@-webkit-keyframes stroke-535 {
	to {
		stroke-dashoffset: 100;
	}
}

@keyframes stroke-535 {
	to {
		stroke-dashoffset: 100;
	}
}

@-webkit-keyframes stroke-661 {
	to {
		stroke-dashoffset: 94;
	}
}

@keyframes stroke-661 {
	to {
		stroke-dashoffset: 94;
	}
}

.MouseEvent.in:before {
	-webkit-animation: scale 3s ease-in-out infinite;
	animation: scale 3s ease-in-out infinite;
}

@-webkit-keyframes scale {
	0% {
		background: radial-gradient( circle var(10px) at var(--cursorX) var(--cursorY), #00000000 0%, rgba(0,0,0,0) 100%, #1B1D26 100% );
	}

	50% {
		background: radial-gradient( circle var(20px) at var(--cursorX) var(--cursorY), #00000000 0%, rgba(0,0,0,0) 100%, #1B1D26 100% );
	}

	100% {
		background: radial-gradient( circle var(30px) at var(--cursorX) var(--cursorY), #00000000 0%, rgba(0,0,0,0) 100%, #1B1D26 100% );
	}
}

@keyframes scale {
	0% {
		background: -o-radial-gradient( var(--cursorX) var(--cursorY), circle var(10px), #00000000 0%, rgba(0,0,0,0) 100%, #1B1D26 100% );
		background: radial-gradient( circle var(10px) at var(--cursorX) var(--cursorY), #00000000 0%, rgba(0,0,0,0) 100%, #1B1D26 100% );
	}

	50% {
		background: -o-radial-gradient( var(--cursorX) var(--cursorY), circle var(20px), #00000000 0%, rgba(0,0,0,0) 100%, #1B1D26 100% );
		background: radial-gradient( circle var(20px) at var(--cursorX) var(--cursorY), #00000000 0%, rgba(0,0,0,0) 100%, #1B1D26 100% );
	}

	100% {
		background: -o-radial-gradient( var(--cursorX) var(--cursorY), circle var(30px), #00000000 0%, rgba(0,0,0,0) 100%, #1B1D26 100% );
		background: radial-gradient( circle var(30px) at var(--cursorX) var(--cursorY), #00000000 0%, rgba(0,0,0,0) 100%, #1B1D26 100% );
	}
}

@-webkit-keyframes content {
	from {
		-webkit-transform: translateY(200px);
		transform: translateY(200px);
	}

	to {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@keyframes content {
	from {
		-webkit-transform: translateY(200px);
		transform: translateY(200px);
	}

	to {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

.MouseEvent.scroll {
	-webkit-animation-name: scroll;
	animation-name: scroll;
	-webkit-animation-duration: 4s;
	animation-duration: 4s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.MouseEvent:before {
	background: -o-radial-gradient( var(--cursorX) var(--cursorY), circle var(--size), #00000000 0%, rgba(0,0,0,0) 100%, #1B1D26 100% );
	background: radial-gradient( circle var(--size) at var(--cursorX) var(--cursorY), #00000000 0%, rgba(0,0,0,0) 100%, #1B1D26 100% );
	z-index: 2;
}

.how-page .image-background {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.how-page .big-section .title-2 {
	font: normal normal 100 110px/70px Roboto;
	color: #343434;
	margin-top: 19px;
	position: relative;
}
.how-page .big-section:not(.bkg-black) .content_1 .content span{
	color: #343434 !important;
}
.how-page .big-section.bkg-black .title-1,
.how-page .big-section.bkg-black .title-2{
	color:#f4f4f4;
}
.how-page .big-section .title-2:before, .aesthetics .title:before, .automation .title:before, .power_of_data .show .title:before {
	content: "";
	display: block;
	width: 100px;
	height: 1px;
	background-color: #FDB515;
	position: absolute;
	bottom: -47px;
}

.how-page .big-section .title-1 {
	font: normal normal bold 60px/71px Roboto;
	color: #343434;
	display: block;
	padding-left: 4px;
}

.how-page .mechanical .content_1 p strong{
	font-size: 22px;
	line-height: 37px;
	font-weight: 400;
    display: block;
    padding-bottom: 22px;
}
.how-page .mechanical .content_1 p:not(:last-child){
    margin-bottom: 27px;
}

.big-section {
	background-color: transparent;
	-webkit-transition: all 2.5s;
	-o-transition: all 2.5s;
	transition: all 2.5s;
}

.mobie_image {
	display: none;
}
.title-content.container .title{

max-width: 1146px;

margin: 0 auto;
}
.big-section.bkg-black {
	background-color: #1B1D26;
	    -webkit-transition: all 2.5s;
    -o-transition: all 2.5s;
    transition: all 2.5s;
}
.big-section.bkg-black .content-top .content-page p span{
	color:#f4f4f4 !important
}
.big-section:not(.bkg-black) #pointer-ring{
	-webkit-box-shadow: #fff 0px 0px 0px 6000px;
			box-shadow: #fff 0px 0px 0px 6000px;
}
.big-section:not(.bkg-black) .MouseEvent, .big-section:not(.bkg-black) .title-1, .how-page .big-section .title-2 {
	;
}
.big-section:not(.bkg-black) .content-page{
	-webkit-transform:translateY(0);
	-ms-transform:translateY(0);
	transform:translateY(0);
	opacity:1;
	-webkit-transition: all .6s;
	-o-transition: all .6s;
	transition: all .6s;
}
.big-section.bkg-black .content-page{
	-webkit-transform: translateY(-20px);
	-ms-transform: translateY(-20px);
	transform: translateY(-20px);
	opacity:0;
	-webkit-transition: all .6s;
	-o-transition: all .6s;
	transition: all .6s;
	color: #1B1D26;
}
.active #pointer-ring {
	-webkit-transition: padding .5s ease, top 0.1s, left 0.1s , -webkit-box-shadow 2.5s , -webkit-transform 0.2s ease;
	transition: padding 1s ease, top 0.1s, left 0.1s , -webkit-box-shadow 2.5s , -webkit-transform 0.2s ease;
	-o-transition: box-shadow 2.5s , padding 1s ease, transform 0.2s ease , top 0.1s, left 0.1s;
	-webkit-transition: padding 1s ease, top 0.1s, left 0.1s , -webkit-box-shadow 2.5s , -webkit-transform 0.2s ease;
	transition: box-shadow 2.5s , padding 1s ease, transform 0.2s ease , top 0.1s, left 0.1s;
	transition: box-shadow 2.5s , padding 1s ease, transform 0.2s ease , top 0.1s, left 0.1s , -webkit-box-shadow 2.5s , -webkit-transform 0.2s ease;
	transition: box-shadow 2.5s , padding 1.5s ease, transform 0.2s ease , top 0.1s, left 0.1s , -webkit-box-shadow 2.5s , -webkit-transform 0.2s ease;
}

#pointer-ring {
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	padding: 15px;
	position: absolute;
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
	-webkit-box-shadow: #1b1d26 0px 0px 0px 6000px;
	box-shadow: #1b1d26 0px 0px 0px 6000px;
	-webkit-transition: padding 4s ease, top 0.1s, left 0.1s ,-webkit-box-shadow 2.5s ,-webkit-transform 0.2s ease;
	transition: padding 4s ease, top 0.1s, left 0.1s ,-webkit-box-shadow 2.5s ,-webkit-transform 0.2s ease;
	-o-transition: box-shadow 2.5 ,padding 4s ease, transform 0.2s ease , top 0.1s, left 0.1s;
	-o-transition: box-shadow 2.5s ,padding 4s ease, transform 0.2s ease , top 0.1s, left 0.1s;
	transition: box-shadow 2.5s ,padding 4s ease, transform 0.2s ease , top 0.1s, left 0.1s;
	transition: box-shadow 2.5s ,padding 4s ease, transform 0.2s ease , top 0.1s, left 0.1s ,-webkit-box-shadow 2.5s ,-webkit-transform 0.2s ease;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.active:not(.in) #pointer-ring{
	padding:0.5px !important;
}
div#mouseEvent {
	background-position: top left 0;
	
	background-size: cover;
	background-repeat: no-repeat;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	position: relative;
	overflow: hidden;
	height: 170vh !important
}

div#mouseEvent .container {
	position: relative;
	width: 100%;
	max-width: 1156px;
}

div#mouseEvent .content-top {
	margin-bottom: 100vh;
	margin-top: 100px;
}


.video_link{
	height:100%;
	position: absolute;
	width: 100%;
	
}
.how-page .video_link:before{
	content:"";
	display:block;
	position:absolute;
	width:100%;
	height:100%;
}
.video_link p{

height: 100%;
}
.video_link iframe{
	width:100%;
	height:100%
}
.how-page .content-top .container {
	max-width: 791px;
	padding-top: 86px;
	padding-bottom: 226px;
}
.big-section:not(.bkg-black) .MouseEvent #pointer-ring{
	padding:0 !important;
}
.video_Link{
	position: absolute;
	z-index: -1;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
	width: 33%;
}
.video_Link iframe{
	width:100%
}
.power_of_data.out .video_Link{
	top: 45% !important;
}
.section-banner .wrapper.video video{
	width: 100%;
	height: 100%;
}
.how-page .section-banner .wrapper.video{
	/* filter: blur(22px); */
}
@media(max-width:767px) {
	.big-section:not(.bkg-black) .content-page{
		-webkit-transform:translateY(0);
		-ms-transform:translateY(0);
		transform:translateY(0);
		opacity:1;
		-webkit-transition: background-color .6s, transform .6s;
		-o-transition: background-color .6s, transform .6s;
		transition: background-color .6s, transform .6s;
	}
	.big-section.bkg-black .content-page{
		-webkit-transform: translateY(-20px);
		-ms-transform: translateY(-20px);
		transform: translateY(-20px);
		opacity:0;
		-webkit-transition: background-color .6s, transform .6s;
		-o-transition: background-color .6s, transform .6s;
		transition: background-color .6s, transform .6s;
		color: #1B1D26;
	}
	
	.big-section.bkg-black {
		
		    -webkit-transition: all 1s;
	    -o-transition: all 1s;
	    transition: all 1s;
	}
	.big-section{
		-webkit-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
	}
	.section-banner .wrapper.video video{
		width: auto;
		height: 100%;
		max-width: none;
	}
	.how-page .content-top .container{
		padding-bottom: 200px !important;
	}
/*	.how-page .top-banner img {
		-webkit-filter: blur(22px);
		filter: blur(22px);
	}*/
}

.content-top .content-page p img {
	margin-bottom: 4px;
}

.how-page .mechanical .content_1 {
	width: 70%;
	position: absolute;
	top: 50vh;
	-webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	        transform: translateY(-50%);
	right: 0;
	max-width: 526px;
}

.how-page .mechanical .content_2 {
	bottom: 90px;
	position: absolute;
	max-width: 527px;
	right: 0;
	-webkit-transform: translateY(100px);
		-ms-transform: translateY(100px);
			transform: translateY(100px);
	opacity: 0;
	-webkit-transition:all .5s;
	-o-transition:all .5s;
	transition:all .5s
}
.how-page .moving-out .mechanical .content_2{
	-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
			transform: translateY(0);
	opacity: 1;
}
.content_1 .content {
	padding-top: 75px;
}

.aesthetics .container {
	position: relative;
}

.aesthetics .title_content {
	width: 70%;
	/* max-width: 519px; */
}
.aesthetics.active:not(.fadeOut) img,
.aesthetics.active:not(.fadeOut) .mobie_image{
	opacity:1;
}
.aesthetics img.mobie_image{
	display: none;
}
.aesthetics:not(.fadeOut) .title_content{
	-webkit-transform:translateY(0);
		-ms-transform:translateY(0);
			transform:translateY(0);
	-webkit-transition:all .6s;
	-o-transition:all .6s;
	transition:all .6s;
}
.aesthetics.fadeOut .title_content{
	-webkit-transform: translateY(-20px);
	-ms-transform: translateY(-20px);
	transform: translateY(-20px);
	opacity: 0;
	-webkit-transition: all .6s;
	-o-transition: all .6s;
	transition: all .6s;
}
.aesthetics.fadeOut img,
.aesthetics.fadeOut .mobie_image{
	opacity: 0;
}
.aesthetics:before{
	content:"";
	background-color:#0E0E0F;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index: -2;
}

.aesthetics .title_content .content_1 {
	padding-top: 101px;
	max-width: 519px;
}

.aesthetics .title_content .content_2 {
	padding-top: 28px;
}

.aesthetics .title_content .content_2 p {
	letter-spacing: -0.2px;
}

.aesthetics .title, .automation .title, .power_of_data .title {
	font-size: 100px;
	line-height: 71px;
	color: #DCDCDC;
	font-weight: 100;
	position: relative;
}

.aesthetics {
	background-position: center;
	position: relative;
	padding: 15.9% 0 17%;
	overflow: hidden;
	margin-bottom: -1px;
}

.aesthetics p {
	margin-bottom: 27px;
	letter-spacing: -0.2px;
}

.aesthetics > img {
	position: absolute;
	-webkit-transform: scale(2);
	-ms-transform: scale(2);
	transform: scale(2);
	width: 100%;
	z-index: -1;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-webkit-transition:opacity 1s, -webkit-transform 15s  cubic-bezier(0.28, 0.25, 0.63, 0.59);
	transition:opacity 1s, -webkit-transform 15s  cubic-bezier(0.28, 0.25, 0.63, 0.59);
	-o-transition:transform 15s  cubic-bezier(0.28, 0.25, 0.63, 0.59), opacity 1s;
	transition:transform 15s  cubic-bezier(0.28, 0.25, 0.63, 0.59), opacity 1s;
	transition:transform 15s  cubic-bezier(0.28, 0.25, 0.63, 0.59), opacity 1s, -webkit-transform 15s  cubic-bezier(0.28, 0.25, 0.63, 0.59);
	top: 0;
	left: 0;
}

.aesthetics.active > img {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transition:opacity 1s, -webkit-transform 15s  cubic-bezier(0.28, 0.25, 0.63, 0.59);
	transition:opacity 1s, -webkit-transform 15s  cubic-bezier(0.28, 0.25, 0.63, 0.59);
	-o-transition:transform 15s  cubic-bezier(0.28, 0.25, 0.63, 0.59), opacity 1s;
	transition:transform 15s  cubic-bezier(0.28, 0.25, 0.63, 0.59), opacity 1s;
	transition:transform 15s  cubic-bezier(0.28, 0.25, 0.63, 0.59), opacity 1s, -webkit-transform 15s  cubic-bezier(0.28, 0.25, 0.63, 0.59);
}

.aesthetics .content {
	padding-top: 91px;
}

.automation {
	overflow: hidden;
	margin-bottom: -1px;
	position: relative;
	padding-bottom: 150px;
}

.automation .container {
	position: relative;
	padding-top: 587px;
	overflow: hidden;
}

.automation:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #0E0E0F;
	z-index: -2;
}

.automation p strong, .aesthetics p strong, .power_of_data p strong {
	font-size: 22px;
	line-height: 30px;
	font-weight: 400;
	display: block;
	padding-bottom: 22px;
}

.automation .title-content {
	width: 70%;
	max-width: 572px;
	float: right;
	margin-top: 2px;
	-webkit-transition:all .6s;
	-o-transition:all .6s;
	transition:all .6s;
	opacity:1;
}
.automation.fadeOut .title-content{
	opacity:0;
	-webkit-transform: translateY(-20px);
		-ms-transform: translateY(-20px);
			transform: translateY(-20px);
}
.automation .title {
	max-width: 531px;
	float: right;
	width: 100%;
}

.automation .title-content .content {
	padding-top: 101px;
	max-width: 531px;
	float: right;
}

.automation .image {
	position: absolute;
	left: 31px;
	z-index: -1;
	top: 154px;
}

.power_of_data {
	position: relative;
	padding-bottom: 99px;
	overflow: hidden;
	padding-top: 165px;
}

.power_of_data .wrapper:before {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #0E0E0F;
	width: 100%;
	height: 100%;
	content: "";
	z-index: -2;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.power_of_data.active .wrapper:before{
	background-color: #000;
}

.power_of_data .title {
	line-height: 95px;
}

.power_of_data .content p strong {
	padding-bottom: 8px;
}

.power_of_data .content {
	width: 70%;
	padding-top: 143px;
	max-width: 529px;
	opacity: 0;
	visibility: hidden;
	-webkit-transform: translateY(100PX);
		-ms-transform: translateY(100PX);
			transform: translateY(100PX);
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

.power_of_data .show .content {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
			transform: translateY(0);
}

.power_of_data .image{
	--size:152%;
	--bottom:0;
	position: absolute;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: -1;
	width: 46.02%;
	max-width: 590px;
	height: auto;
	background-size: var(--size) auto;
	background-position: bottom var(--bottom) center;
	background-repeat: no-repeat;
}
.power_of_data.out .image{
	top: 49% !important;
}
.power_of_data .image:after{
	content:"";
	position:absolute;
	width:100%;
	height:100%;
	z-index:-1;
	top: 0;
	left: 0;
}
.power_of_data.active .image:after{
	/* background-color:#000; */
}
.power_of_data .image img{
	-o-object-fit: cover;
	object-fit: cover;
	height: 100%;
	width: 100%;
	opacity: 0 !important;
}
.power_of_data.out > img{
	top:37.68% !important;
	-webkit-transform: translate(-50%, -50%) scale(1) !important;
		-ms-transform: translate(-50%, -50%) scale(1) !important;
			transform: translate(-50%, -50%) scale(1) !important;
}
.power_of_data.active > img {
	-webkit-filter: contrast(100%) grayscale(1);
	filter: contrast(100%) grayscale(1);
}

.how-page .related-post {
	margin-top: 10px;
}

.how-page .section.content ul {
	margin: 0 -16.5px;
	padding-bottom: 128px;
}

.how-page .related-post ul li .content h3 {
	margin-top: 5px;
}

.how-page .related-post ul li .content h4 {
	margin-bottom: 76px;
}

.how-page .related-post ul li .background-image .content {
	top: 50%;
}
.video_Link p{
	text-align: center;
}
img.image_mobile {
	display: none;
}
.MouseEvent.moving-out:before{
		content:"";
		position:absolute;
		width:100%;
		height:100%;
		top:0;
		left:0; 
		z-index:0;
		background: -o-linear-gradient(top, #00181822, #171721);
		background: -webkit-gradient(linear, left top, left bottom, from(#00181822), to(#171721));
		background: linear-gradient(180deg, #00181822, #171721);
	}
.video_upload{
	position: relative;
	height: 0;
	padding-bottom: 56.3%;
}
.video_upload video{
	height: 100%;
	width: auto;
	position: absolute;
	top: 0;
}
@media(min-width:675px) {

	div#mouseEvent{
		background-attachment: fixed;
	}
}

@media(max-width:1199px) {
	.how-page .mechanical .content_1 {
		right: 20px;
	}

	.how-page .related-post ul li .content h3 {
		margin-top: 0;
	}
}

@media(max-width:1024px) {
	
	.how-page .mechanical .content_1{
		top: calc((100vh + 80px) / 2);
	}
	.power_of_data.out .image{
		top: 44.5% !important;
	}
	.big-section.bkg-black .MouseEvent:not(.moving-out) #pointer-ring{
		padding:130px !important
	}

	.how-page .section.content ul {
		padding-bottom: 100px;
	}

	.automation .image {
		top: 42px;
	}

	.automation .container {
		padding-top: 420px;
	}
}

@media(max-width:850px) {
	.automation .image {
		width: 100%;
		left: -72px;
	}

	.power_of_data .content {
		padding-top: 100px;
	}

	.aesthetics .title, .automation .title, .power_of_data .title, .how-page .big-section .title-2 {
		font-size: 65px;
		line-height: 80px;
	}

	.how-page .big-section .title-2:before, .aesthetics .title:before, .automation .title:before, .power_of_data.active .title:before {
		bottom: -30px;
	}

	.how-page .big-section .title-2 {
		margin-top: 5px;
	}

	.how-page .big-section .title-1 {
		font-size: 35px;
		line-height: 40px;
	}

	.automation .container {
		padding-top: 350px;
	}
	.how-page .mechanical .content_1{
		top: calc((100vh + 150px) / 2);
	}
}

@media(max-width:768px) {
	.power_of_data{
		padding-top: 110px;
	}
	.how-page .related-post ul li .content h4 {
		margin-bottom: 48px;
	}
	.power_of_data.out .image{
		top: 38% !important;
	}
	.power_of_data.out .video_Link{
		top: 45% !important;
	}
}

@media(max-width:767px) {
	.MouseEvent.moving-out:before{
		display:none
	}
	.big-section.bkg-black .MouseEvent:not(.moving-out) #pointer-ring{
		padding:0.5px !important
	}
	#pointer-ring{
	    display: none;
		-webkit-transition: padding 4s ease, top 0.1s, left 0.1s ,-webkit-box-shadow 1s ,-webkit-transform 0.2s ease;
	transition: padding 4s ease, top 0.1s, left 0.1s ,-webkit-box-shadow 1s ,-webkit-transform 0.2s ease;
	-o-transition: box-shadow 1s ,padding 4s ease, transform 0.2s ease , top 0.1s, left 0.1s;
	transition: box-shadow 1s ,padding 4s ease, transform 0.2s ease , top 0.1s, left 0.1s;
	transition: box-shadow 1s ,padding 4s ease, transform 0.2s ease , top 0.1s, left 0.1s ,-webkit-box-shadow 1s ,-webkit-transform 0.2s ease;
	}
	.active #pointer-ring{
		-webkit-transition: padding .2s ease, top 0.1s, left 0.1s , -webkit-box-shadow 1s , -webkit-transform 0.2s ease;
	transition: padding .2s ease, top 0.1s, left 0.1s , -webkit-box-shadow 1s , -webkit-transform 0.2s ease;
	-o-transition: box-shadow 1s , padding .2s ease, transform 0.2s ease , top 0.1s, left 0.1s;
	-webkit-transition: padding .5s ease, top 0.1s, left 0.1s , -webkit-box-shadow 1s , -webkit-transform 0.2s ease;
	transition: box-shadow 1s , padding .2s ease, transform 0.2s ease , top 0.1s, left 0.1s;
	transition: box-shadow 1s , padding .2s ease, transform 0.2s ease , top 0.1s, left 0.1s , -webkit-box-shadow 1s , -webkit-transform 0.2s ease;
	transition: box-shadow 1s , padding .2s ease, transform 0.2s ease , top 0.1s, left 0.1s , -webkit-box-shadow 1s , -webkit-transform 0.2s ease;
	}
	
    .big-section.bkg-black .MouseEvent.no-shadow #pointer-ring{
    	padding: 6000px !important;
    	-webkit-box-shadow: none;
    	        box-shadow: none;
    }
	.image_mobie img {
		width: 100%;
	}

	.power_of_data > img {
		width: 66.6%;
	}
}

@media(max-width:675px) {
	.how-page div#mouseEvent{
		height: auto !important;
		min-height: auto;
	}
	.aesthetics img.destop_image{
		display:none
	}
	.aesthetics img.mobie_image{
		display:block;
	}
	.automation{

		padding-bottom: 86px;
	}

	div#mouseEvent .container {
		padding-bottom: 100px;
		padding-top: 50px;
	}

	.power_of_data .content {
		width: 100%;
	}

	.automation .title-content .content {
		float: left;
	}

	.automation .title-content {
		width: 100%;
		float: left;
	}

	.how-page .mechanical .content_1 {
		left: 23px;
		width: calc(100% - 23px);
		padding-right: 23px;
		top: 381px;
		position: static;
		transform: none;
	}

	.automation .title {
		float: left;
	}

	.how-page .big-section .title-1 {
		padding-left: 0;
	}

	.how-page .mechanical .content_2 {
		left: 23px;
		right: auto;
		width: calc(100% - 23px);
		padding-right: 23px;
	}

	.automation .image {
		left: -118px;
		top: 41px;
	}

	.aesthetics .title_content {
		width: 100%;
	}

	.power_of_data .image,
	.video_Link {
		width: 64%;
	}
	.power_of_data.out .video_Link{
		top: 44% !important;
	}
	.power_of_data.out .image{
		top: 36% !important;
	}
	.how-page .slogan-banner h1.page-title {
		max-width: 270px;
		margin-bottom: 0;
	}

	.aesthetics {
		padding-top: 91px;
	}

	.automation .image svg {
		width: 130%;
		height: auto;
	}
}

@media(max-width:599px) {
	.how-page .related-post {
		margin-top: 55px;
	}
	.how-page .content-page{
		padding-right: 0;
	}
	div#mouseEvent{
		min-height: 1000px;
		max-height: 1050px;
	}
}

@media(max-width: 425px) {
	.power_of_data.out .image {
		top: 32% !important;
	}
	.how-page .section.content ul {
		padding-bottom: 77px;
	}

	.power_of_data .content {
		padding-top: 54px;
	}

	.how-page .container.content-top {
		padding-top: 58px;
	}

	.aesthetics .title, .automation .title, .power_of_data .title, .how-page .big-section .title-2 {
		font-size: 56px;
		line-height: 66px;
	}

	.aesthetics .container {
		position: initial;
	}

	.aesthetics > img {
		display: none;
	}

	.aesthetics .mobie_image {
		display: block;
		position: absolute;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.image_1 {
		position: absolute;
		width: 100%;
		height: 100%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: auto 100%;
	}

	.image_2 {
		position: absolute;
		width: 100%;
		height: 42.4%;
		background-position: top right;
		background-repeat: no-repeat;
		background-size: auto 100%;
		bottom: 0;
		top: auto;
	}

	.aesthetics .title_content .content_1 {
		padding-top: 56px;
	}

	.aesthetics p {
		letter-spacing: 0;
		margin-bottom: 22px;
	}

	.aesthetics p strong {
		padding-bottom: 0;
	}

	.aesthetics {
		padding-bottom: 280px;
	}

	.automation .image {
		top: 0;
	}

	.automation .image svg {
		width: 140%;
	}

	.automation .container {
		padding-top: 400px;
	}

	.automation .title-content .content {
		padding-top: 55px;
	}

	.automation p strong {
		padding-bottom: 22px;
	}

	.automation .title-content .content br {
		display: none;
	}

	.power_of_data {
		padding-bottom: 82px;
	}

	.power_of_data img {
		/* top: 27.7%; */
	}
	.how-page .content-top .container{
		padding-top: 59px;
		/*padding-bottom: 100px;*/
		padding-bottom: 50px;
	}
	div#mouseEvent{
		height: 220vh !important;
		/*height: 80vh !important;*/
	}
	.how-page .mechanical .content_1 p strong{
	    padding-bottom: 0;
	}
	.how-page .mechanical .content_1 p:not(:last-child){
	    margin-bottom: 22px;
	}
}

@media(max-width:375px) {
    .how-page .content-top .container{
    	/*padding-bottom: 50px;*/
    	padding-bottom: 25px;
    }
	.title-content.container .title{

max-width: 320px;

margin: 0;
	}
	.power_of_data .content {
		max-width: 328px;
	}

	.content-top .content-page p:first-child img {
		max-width: 303px;
		margin-bottom: -8px;
		width: 100%;
	}

	.content-top .content-page p {
		margin-bottom: 20px;
	}

	.how-page .mechanical .content_1 p strong, .automation p strong, .aesthetics p strong, .power_of_data p strong {
		font-size: 18px;
		line-height: 28px;
	}

	.how-page .big-section .title-1 {
		font-size: 32px;
		line-height: 35px;
	}

	.how-page .big-section .title-2:before, .aesthetics .title:before, .automation .title:before, .power_of_data.active .title:before {
		bottom: -26px;
	}

	.content_1 .content {
		padding-top: 56px;
	}

	.power_of_data .title {
		max-width: 319px;
	}

	.how-page .related-post ul li .content h4 {
		margin-bottom: 43px;
	}

	.how-page .related-post ul li .content h3 {
		margin-top: 4px;
	}
}
@media(max-width: 320px){
	div#mouseEvent{
		height: 200vh !important;
	}
	.how-page .big-section.bkg-black .title-1.fadeIn{
		-webkit-transform: translateY(0);
		    -ms-transform: translateY(0);
		        transform: translateY(0);
		opacity: 1;
	}
}