.x{color: #2d9e64;}
.left-div,
.left-page,
[lang="en"] * {
    direction: ltr !important}
.bxSt1{
	padding: 2em;
	background: #fff}

body > *{overflow-x: hidden !important}
.radius-20,/*re*/
.bxSt2 > div img,
.act{
	border-radius: 20px;
	-webkit-border-radius: 20px}

.radius-24,/*re*/
.bxSt1,
#header,
.price > div{
	border-radius: 24px;
	-webkit-border-radius: 24px}


.radius-50,/*re*/
.intro:after, .intro:before,
.features > div:after,
.features > div:not(:last-child):before,
.sw-btn,
.act a{
	border-radius: 50px;
	-webkit-border-radius: 50px}

	.radius-40,/*re*/
	.bxSt2{
		border-radius: 40px !important;
		-webkit-border-radius: 40px !important}





.shadow-05,/*re*/
.bxSt1,
.sw-btn,
.price > div{
	box-shadow: 0 5px 20px rgba(0,0,0,.05);
	-webkit-box-shadow: 0 5px 20px rgba(0,0,0,.05)}


.shadow-1,/*re*/
.bxSt2x{
	box-shadow: 0 5px 20px rgba(0,0,0,.1);
	-webkit-box-shadow: 0 5px 20px rgba(0,0,0,.1)}
	

.text-center,/*re*/
#header,
#TalkedAboutUs,
.price
{text-align: center !important}


.anmition05,/*re*/
.features > div:after,
.features > div:not(:last-child):before,
.bxSt2
{
	transition: .5s ease;
	-webkit-transition: .5s ease
}

/* Header */
#header{
	color: #2d9e64;
	padding: 8em 4em;
	overflow: hidden;
	position: relative;
	background: url('../img/background.webp') #222;
	background-size: cover;
	background-position-y: bottom}
/*
	#header:before{
		z-index: 0;
		content: '';
		top: 0; right: 0;
		position: absolute;
		background: rgba(235,235,235,.9);
		width: 100%; height: 100%}*/

	#header > *{position: relative}

	#header h5{
		color: #ccc;
		margin: 1em 0 3em}

		a.ChromeWebStore{
			display: inline-block}

		#header a img{
			width: 240px;
			padding: 0 5px;
			background: #fff;
			overflow: hidden;
			border-radius: 12px;
			-webkit-border-radius: 12px}

		#header span{
			color: #ccc;
			display: block;
			font-size: 14px;
			margin-top: 10px}
		/**/
		.intro{
			width: 60px;
			height: 60px;
			padding: 5px;
			position: relative;
			display: inline-block}

			.intro:after,.intro:before{
				content: '';
				position: absolute;
				top: -5px; right: -5px;
				border: dashed 3px #222;
				width: 70px; height: 70px;
				animation: intro 20s linear infinite;
				-webkit-animation: intro 20s linear infinite}

			.intro:after{
				width: 90px;
				height: 90px;
				border-color: #2d9e64;
				top: -15px; right: -15px;
				transform: rotate(360deg);	
				-webkit-transform: rotate(360deg)}

			.intro span:after{
				margin: 0;
				top: 51%;
				right: 48%;
				color: #2d9e64;
				display: inline;
				padding: 0;
				content: '\ea1c';
				font-size: 30px;
				position: absolute;
				font-family: maxs001;
				transform: translate(50%,-50%);
				-webkit-transform: translate(50%,-50%)}

		/**/
		#intro{
			padding: 22px;
			line-height: 0;
			border-radius: 50%;
			position: absolute;
			top: 50%; right: 50%;
			backdrop-filter: blur(3px);
			transform: translate(50%,-50%);
			background: rgba(250,250,250,.2);
			-webkit-backdrop-filter: blur(3px);
			-webkit-transform: translate(50%,-50%);
			box-shadow: 0 0 40px 20px rgba(100,100,100,.3);
			-webkit-box-shadow: 0 0 40px 20px rgba(100,100,100,.3)}

			#intro:hover{
				padding: 24px;
				transform: translate(50%,-50%) scale(.98);
				box-shadow: 0 0 40px 40px rgba(100,100,100,.3);
				-webkit-box-shadow: 0 0 40px 40px rgba(100,100,100,.3)}

				@keyframes intro {0%{transform: rotate(180deg)}}
				@-webkit-keyframes intro {0%{-webkit-transform: rotate(180deg)}}

		/**/
		#introVid{
			z-index: 9;
			width: 100%;
			height: 100%;
			top: 0;left: 0;
			position: fixed;
			text-align: center}

		#iframe{background: #000}

			#introVid a{
				width: 100%;
				height: 100%;
				top: 0; left: 0;
				position: absolute;
				background: rgba(0,0,0,.5);
				backdrop-filter: blur(10px);
				-webkit-backdrop-filter: blur(10px)}

				#introVid a:after{
					color: #fff;
					padding: 1.25em;
					top: 0; left: 0;
					content: '\ea0f';
					position: absolute;
					background: #e91e3b;
					font-family: maxs001;
					border-radius: 0 0 50% 0;
					-webkit-border-radius: 0 0 50% 0}

			#introVid iframe{
				height: auto;
				width: 768px;
				height: 432px;
				max-width: 90%;
				position: absolute;
				top: 50%; left: 50%;
				transform: translate(-50%,-50%);
				-webkit-transform: translate(-50%,-50%)}

/**/


#reviews,
#upBusiness{
	color: #444;
	padding: 3em;
	margin: 1em auto;
	overflow: hidden;
		position: relative;
}

	#reviews > div,
	#upBusiness > div{
		padding: 1em 2em}

		#reviews button,
		#upBusiness button,
		#weProductive button{
			width: auto;
			color: #fff;
			border-radius: 8px;
			background: #2d9e64;
			-webkit-border-radius: 8px}

		#reviews p,
		#upBusiness p{
			margin: 1em 0}

	.imgAN{
	}

		.imgAN:after{
			content: '';
			width: 0;
			height: 100%;
			background: #fff;
			top: 0; right: 50%;
			position: absolute;
			animation: imgAN 1s;
			-webkit-animation: imgAN 1s;
		}


@keyframes imgAN {
	0%{
		right: 0;
		width: 100%}
}



/**/
#weProductive{
	margin-top: 5em}

	.features > div{
		padding: .8em 0;
		padding-left: 2em;
		position: relative}

	.features > div:after{
		content: '';
		width: 20px;
		height: 20px;
		left: 0;top: .8em;
		position: absolute;
		background: #f5f5f5;
		border: solid 4px #2d9e64}

		.features > div:not(:last-child):before{
			width: 4px;
			content: '';
			height: 105%;
			position: absolute;
			background: #6d6d6d;
			left: 8px; top: .8em}

		.features:hover > div:after{
			border-color: #6d6d6d}

		.features > div:hover:before,
		.features > div:hover + div:before,
		.features > div:hover + div + div:before,
		.features > div:hover + div + div + div:before,
		.features > div:hover + div + div + div + div:before{
			height: 0}


		.features > div:hover:after{
			border-color: #2d9e64;
			transform: scale(1.1);
			-webkit-transform: scale(1.1)}


/**/
#featuresDrop{
	margin: 5em auto}

	.bxSt2{
		padding: 2em;
		margin: 2em 0;
		background: #fff;
		text-align: center;
		position: relative;
		border-bottom: solid 5px #eee}

		.bxSt2 div:hover{
			transform: scale(.98) !important;
			filter: saturate(1.25) brightness(1.05);
			-webkit-transform: scale(.98) !important;
			-webkit-filter: saturate(1.25) brightness(1.05);
		}

		.bxSt2 img{
			border: solid 1px #eee;
			background: #afddc3;
			}
		.bxSt2 a{
			color: #2d9e64;
			display: block;
			margin-top: 2em}

		.bxSt2 > div{
			padding: 1em;
			}

/**/



#Integrates{
	color: #eee;
	padding: 3em 1em;
	text-align: center;
	background: #151a1a}

.xsdr{
	width: 100%;
	height: 150px;
	display: grid;
	overflow: hidden;
	position: relative;
	place-items: center;
	-webkit-place-items: center}

	.xsdr:before,
	.xsdr:after{
		z-index:2;
		content:'';
		position:absolute;
		height:100%;width:25%;
		background-image: linear-gradient(to right,#151a1a 0%,rgba(0,0,0,0) 100%)}

	.xsdr:before{
		left: -1px; top:0}

	.xsdr:after{
		right: -1px; top:0;
		transform: rotateZ(180deg);
		-webkit-transform: rotateZ(180deg)}

	.xsdr > div{
		width: 2592px;/*calc(X * 12)*/
		display: flex;
		justify-content: space-between;
		-webkit-justify-content: space-between;
		animation: scroll 14s linear infinite reverse;
		-webkit-animation: scroll 14s linear infinite reverse}

	.xsdr > div:hover{
		animation-play-state: paused;
		-webkit-animation-play-state: paused}

		.xsdr > div > div{
			width: 200px;
			height: 80px;
			margin: 0 8px;
			display: grid;
			transition: .5s;
			overflow: hidden;
			background: #fff;
			border-radius: 16px;
			place-items: center;
			-webkit-transition: .5s;
			-webkit-border-radius: 16px;
			-webkit-place-items: center;
			box-shadow: 0 2px 12px rgba(0,0,0,.1);
			-webkit-box-shadow: 0 2px 12px rgba(0,0,0,.1)}

		

	@keyframes scroll{
		0%{transform: translateX(0)}
		100%{transform: translateX(-1296px)}/*calc(-X * 6)*/
	}
	@-webkit-keyframes scroll{
		0%{-webkit-transform: translateX(0)}
		100%{-webkit-transform: translateX(-1296px)}/*calc(-X * 6)*/
	}


	#Integrates .xsdr > div img{width: 125px}

/**/

#TalkedAboutUs{
	padding: 3em 1em;
	background: #f5f5f5}

	#TalkedAboutUs > h3,
	#Priceing .head h3,
	.bxSt2 > h3{
		color: #419466}
	#TalkedAboutUs > P,
	.bxSt2 > P{
		line-height: 1;
		margin: 1em auto;
		font-size: 1.35em;
	}

#TalkedAboutUs .xsdr:before,
#TalkedAboutUs .xsdr:after{
	background-image: linear-gradient(to right, #f5f5f5 0%,rgba(0,0,0,0) 100%)}



#Priceing{
	padding: 3em 1em}

	#Priceing > p{
	color: #999;
	display: block;
	margin-top: 1em}

	/*switch*/
	.sw-btn{
		z-index: 2;
		margin: 2em auto;
		overflow: hidden;
		background: #fff}

		.sw-btn,
		.sw-btn .ac,
		.sw-btn > button{
			transition: .3s ease all;
			-webkit-transition: .3s ease all}

				.sw-btn > button{
					width: 49%;
					height: 100%;
					padding: 1em 8px;
					background: none;
					font-weight: bold;
					position: relative;
					display: inline-block}

				.sw-btn > button:not(.ac-btn):hover{
					color: #2d9e64}

				.sw-btn .ac{
					top: 0;
					left: 0;
					width: 50%;
					z-index: -1;
					height: 100%;
					position: absolute;
					background: #2d9e64}

				.sw-btn .ac-btn{
					color: #fff}
			/*end sw*/
	

	.price{padding: 1em}

		.price > div{
			padding: 2em;
			background: #fff}

		.act{
			color: #eee;
			padding: 3em 1em;
			position: relative;
			margin-bottom: 3em;
			background: #151a1a}

			.act h5{color: #2d9e64}
			.act h2{margin: .5em}
				.act h2 span{
					color: #999;
					display: block;
					font-size: 50%}

			.act p{
					top: 0; left: 0;
					color: #151a1a;
					padding: 2px 20px;
					position: absolute;
					background: #FF9800;
					border-radius: 13px 0 12px 0;
					-webkit-border-radius: 13px 0 12px 0;
				}
			
			
			.act a{
				top: 100%;
				left: 50%;
				color: #fff;
				margin: 5px 0;
				min-width: 200px;
				font-weight: bold;
				padding: 8px 20px;
				position: absolute;
				transition: .35s;
				-webkit-transition: .35s;
				background: #2d9e64;
				transform: translate(-50%, -1.5em);
				-webkit-transform: translate(-50%, -1.5em)}

			.act a:hover{
				min-width: 220px;
				border-radius: 12px;
				background: #419466;
				-webkit-border-radius: 12px}

			.act h2:nth-child(3),
			.pYear .act h2:nth-child(2){
				display: none}

			.pYear .act h2:nth-child(3){
				display: block}
/**/	
.embedded,
.not-included{
	padding: 0 1em;
	text-align: left}

	.embedded p,
	.not-included p{
		padding: 6px;
		margin: 6px 0;
		border-bottom: solid 1px #eee}

		.embedded p:before,
		.not-included p:before{
			content: '\ea10';
			color: #2d9e64;
			margin-left: -6px;
			margin-right: 12px;
			font-family: maxs001}

		.not-included p,
		.not-included p:before{
			color: #ccc;
			content: '\ea0b'}

		.embedded p:nth-child(10),
		.not-included p:last-child{
			border: none}



#reviews{
	padding: 3em}

	#reviews > div{
		padding: 2em}
	





/*END B*/

.coonect{
	top: 0;
	left: 0;
	z-index: 9;
	width: 100%;
	height: 100%;
	position: fixed;
	background: rgba(0,0,0,.5);
}

	.coonect > div{
		padding: 2em;
		background: #fff;
		position: absolute;
		top: 50%; left: 50%;
		border-radius: 12px;
		-webkit-border-radius: 12px;
		transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
	}
	.coonect h5{
		padding: 2em 1em;
		color: #f5f5f5;
		border-radius: 6px;
		-webkit-border-radius: 6px;
		background: #2d9e64;
	}

		.coonect > div > div{
			margin: 3em 2em 2em}

		.coonect a{
			font-size: 1.5em;
			margin: 6px 10px;
			color: #151a1a;
			padding: 8px 16px;
			border-radius: 5px;
			background: #fafafa;
			border: solid 1px #eee;
		}

			.coonect a:hover{
				color: #fff;
				border-color: #2d9e64;
				background: #2d9e64;
			}

			.coonect a:after,
			button.close:after{
				font-family: maxs001;
			}

		.coonect .ma:after{content: 'mail'}
		.coonect .wh:after{content: 'whatsapp'}

		/**/
		button.close{
			top: -1em;
			left: -1em;
			width: auto;
			color: #fff;
			padding: 10px 12px;
			position: absolute;
			border-radius: 5px;
			background: #e91e3b;
		}

			button.close:after{
				content: '\ea0f';
			}

/*Screen up 1920*/	






























/*Screen up 1366*/
@media all and (min-width: 1366px){
	#header{padding: 6em}
		#header > div:nth-child(2){
			padding: 4em 4em 1em}

	#Priceing{
		max-width: 1300px}

	#reviews{
		padding: 3em}

		#reviews > div:nth-child(2){
			padding: 4em}

}/*END up 1366*/




/*Screen up 960*/
@media all and (min-width: 960px){
	#reviews,
	#upBusiness,#weProductive,
	#featuresDrop{min-width: 900px !important}
}/*END up 960*/



/*Screen up 768*/
@media all and (min-width: 768px){
	/*.bxSt2 > div:nth-child(2){
		top: 40%;
		right: 2em;
		padding-left: 6em;
		position: absolute;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%)}

	.bxSt2:nth-child(2) > div:nth-child(2){
		right: auto;
		padding: 2em 6em 2em 2em;
	}*/


	#reviews > div:nth-child(1){
		min-width: 300px}

}/*END up 768*/







/*Screen 1366*/
@media all and (max-width: 1366px){
	#header{
		padding: 8em 2em}
		#header > div{
			padding: 0 1em}


}/*END 1366*/


/*Screen 1200*/
@media all and (max-width: 1200px){
	#header{padding: 8em 0}
	#reviews,#upBusiness{padding: 2em}
	.bxSt2{padding: 1.5em}
	#Priceing{
		padding: 3em 0}
		.price{padding: .5em}
			.price> div{padding: 1em}


}/*END 1200*/


/*Screen 960*/
@media all and (max-width: 960px){
	#header > div{
		padding: 0 1em}

	.price{padding: 1em 20%}
		.price> div{padding: 2em}

}/*END 960*/


/*Screen 768*/
@media all and (max-width: 768px){
	.xsdr{height: 100px}
		.xsdr > div{
			width: 2156px}/*(X * 14)*/
		.xsdr > div > div{
			width: 150px;
			height: 60px;
			margin: 0 4px}

	@keyframes scroll{
		0%{transform: translateX(0)}
		100%{transform: translateX(-1078px)}/*calc(-125px * 7)*/
	}

	@-webkit-keyframes scroll{
		0%{-webkit-transform: translateX(0)}
		100%{-webkit-transform: translateX(-1078px)}/*calc(-125px * 7)*/
	}

	#upBusiness,#reviews{padding: 2em 1em}

	#Priceing{
		padding: 3em 1.5em}
		.price{padding: 1em 0}
			.price> div{
				padding: 1.5em}
}/*END 768*/


/*Screen 640*/
@media all and (max-width: 640px){

	#header{
		padding: 4em 0;
		border-radius: 0;
		-webkit-border-radius: 0;
	}
}/*END 640*/