#header{
	opacity: 1;
	padding: 0;
	margin-top: 0;
	animation: header .5s;
	-webkit-animation: header .5s;
}
li{font-weight: 300}

@keyframes header{
	0%{
		opacity: 0;
		padding: 2em 0;
		margin: 2em auto}
}
@-webkit-keyframes header{
	0%{
		opacity: 0;
		padding: 2em 0;
		margin: 2em auto}
}


button:hover,
.chrome img:hover,
.ChromeWebStore img:hover{
	transform: scale(.94);
	-webkit-transform: scale(.94);
}

a{color: #2d2d2d;font-size: 18px}	

li{
	text-align: left;
	list-style: none}

.animation,
footer li,
footer li:before{
	transition: .5s;
	-webkit-transition: .5s}

:root{
	--c1: #2d9e64;
	--c3: #58C78A;
	--c4: #35473D;
	--c5: #419466;
	--c6: #303a3a;
	--c7: #151a1a;
	--c8: #3B875E}


/* Navbar Menu*/
nav{
	left: 0;
	z-index: 2;
	padding: 1.4em;
	text-align: left;
	border-radius: 50px;
	backdrop-filter: blur(10px);
	-webkit-border-radius: 50px;
	-moz-backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: .25s cubic-bezier(0,0,0,0);
	-webkit-transition: .25s cubic-bezier(0,0,0,0)}

	nav li a{margin: 0 8px}

		nav li a:before{
			color: #999}

		nav li a:before,
		footer li:before{
			font-size: 90%;
			content: '\e941';
			margin-right: 8px;
			font-family: maxs001}

			nav li:nth-child(2) a:before,
			nav li:nth-child(3) a:before{content: '\e920'}

			nav li:nth-child(4) a:before,
			.features li:before{content: '\e93f'}
			nav li:nth-last-child(1) a:before{display: none}

		nav li a:hover{color: #2d9e64}

	nav > *{display: inline-block}

	nav ul{
		float: right;
		padding: 0 .5em;
		text-align: center !important}

		nav li{
			display: inline-block}

		nav li:nth-child(2){
			display: none}

		nav ul li:nth-last-child(1){ 
			margin-left: 2em;
			padding: 5px 20px;
			border-radius: 5px;
			background: #2d9e64;
			-webkit-border-radius: 5px}

		nav ul li:nth-last-child(1):hover{
			border-radius: 8px;
			transform: scale(0.98);
			-webkit-border-radius: 8px;
			-webkit-transform: scale(0.98)}

			nav ul li:nth-last-child(1):hover a{
				color: #fff} 

	nav img{
		height: 40px;
		width: auto !important}


	.xsc{
		top: 20px;
		left: 15%;
		width: 70%;
		z-index: 9;
		position: fixed;
		padding: .75em 1.4em;
		background: rgba(255,255,255,.5);
		box-shadow: 0 8px 25px rgba(0,0,0,.1);
		-webkit-box-shadow: 0 8px 25px rgba(0,0,0,.1)}

		.xsc:hover{background: rgba(255,255,255,.8)}

		.xsc img{
			height: 2.4em !important}

.chrome a img{
	width: 240px;
	padding: 0 5px;
	overflow: hidden;
	border-radius: 12px;
	-webkit-border-radius: 12px}

.chrome span{
	color: #ccc;
	display: block;
	font-size: 14px;
	margin-top: 10px}

/*
	footer section
*/


footer{
	color: #d2d2d2;
	margin-top: 5em;
	background: #151a1a}

	footer a{color: #d2d2d2}

	footer section{
		padding: 2em 8px}

	footer section > div{
		padding: 1em}

	footer li{
		margin: 5px 0}

		footer li:hover:before{
			color: #2d9e64;
			margin-right: 12px}

		.contact li:before{
			content: '\ea85'}
		.contact li:nth-child(2):before{
			content: '\e94b'}

	.end-footer{
		color: #777;
		padding: 1.3em 1em;
		background: #080a0a}

		.end-footer a{
			color: #777;
			margin: 0 5px}
			.end-footer a:before{
				font-size: 90%;
				content: '\e9cb';
				margin-right: 5px;
				font-family: maxs001}

		.icon-socal{
			padding: 1.5em 1em}

			.icon-socal a{
				margin: 0 12px;
				font-size: 1.35em;
				font-family: maxs002 !important}

			.icon-socal a:hover{
				color: #2d9e64}

				a.ytp:after{content: '\f167'}
				a.fb:after{content: '\f39e'}
				a.twit:after{content: '\e61b'}
				a.inst:after{content: '\f16d'}








/*min-width: 1366px*/
@media all and (min-width: 1366px){


footer section{
	padding: 2em 1em}

}/*END up 1366*/


/*Screen up 960*/
@media all and (min-width: 960px){
	footer section > div:nth-child(2){
		padding: 2em 3em}
		article > div{
			min-width: 768px;
		}
}/*END up 960*/





/*Screen 1366*/
@media all and (max-width: 1366px){
	.xsc{left: 10%;width: 80%}

}/*End 1366*/




/*Screen 1200*/
@media all and (max-width: 1200px) {
	nav li:nth-child(2){
		display: inline-block}

	nav li:nth-child(3),
	nav li:nth-child(4){display: none}


}/*END 1200*/



/*Screen 768*/
@media all and (max-width: 768px){
	nav{padding: 1em 0}
		nav li{margin: 0 !important}
	.xsc{left: 5%;width: 90%}

	}/*end 768*/






/*Screen 640*/
@media all and (max-width: 640px){
	nav{
		padding: .5em;
		border-radius: 0;
		-webkit-border-radius: 0}

	.xsc{
		width: 100%;
		top: 0; left: 0;
		padding: .5em 2em}

		nav img{
			height: 45px;
			margin-top: 2px}

		nav ul,
		nav ul li{
			width: 100%;
			display: block}

		nav ul{
			height: 0;
			overflow: hidden;
			transition: .4s ease;
			-webkit-transition: .4s ease}

		/*open menu*/
		nav.op  ul{
			height: 225px;
			display: block;
			overflow: auto;
			margin-top: 24px}

			nav ul li{
				background: #fff;
				border: solid 1px #eee;
				padding: 10px !important;
				margin: 10px 0 !important;
				border-radius: 8px !important;
				-webkit-border-radius: 8px !important}

			nav ul li:hover{
				border-radius: 8px;
				background: #2d9e64;
				transform: scale(0.98);
				-webkit-border-radius: 8px;
				-webkit-transform: scale(0.98)}

			nav li:hover a,nav li:hover a:before{color: #fff}

			/*phone menu*/
			nav #ph_menu{
				float: right;
				font-size: 26px;
				line-height: 1.2;
				padding: 5px 10px;
				border-radius: 8px;
				-webkit-border-radius: 8px}

				#ph_menu:after{
					content: '\e9bd';
					font-family: maxs001}

					nav.op #ph_menu:after{
						font-size: 90%;
						content: '\ea0f'}

}/*END 640*/

.av{
	opacity: 0;
	-webkit-opacity: 0;
	transform: translateX(-100px);
	transition: 1s ease !important;
	-webkit-transition: 1s ease !important;
	-webkit-transform: translateX(-100px)}

.T.av{
	transform: translateY(100px);
	-webkit-transform: translateY(100px)}

.L.av,.L .av{
	transform: translateX(100px);
	-webkit-transform: translateX(100px)}

.RoY.av{
	transform: scaleX(2);
	-webkit-transform: scaleX(2)}

.ac_an{
	opacity: 1;
	-webkit-opacity: 1;
	transform: translateX(0) !important;
	-webkit-transform: translateX(0) !important}

.RoY.ac_an, .RoY .ac_an{
	transform: scaleX(1) !important;
	-webkit-transform: scaleX(1) !important}


	.mg-1em > *{
		margin: 1em 0;
	}