*		{color: #181818; border-radius: 0 !important;}
body	{font-family: Inter, sans-serif; font-weight: 400; font-style: normal; font-size: 18px; background: linear-gradient(180deg, #f0fdf4 0%, #daefd6 100%);}
hr		{height: 2px; margin: 20px 0; background: #181818;}

h1		{font-size: 2rem;}
h1,h2,
h3,h4	{color: #116D13; display: block; margin: 0;}
h3		{padding: 20px 0; border-color: #4F8B5A; margin-top: 0;}
h4		{margin-bottom: 10px; font-size: 22px;}

a {color: #116D13;}

.ptext {max-width: 250px;}

.grid				{display: grid; grid-gap: 20px;}
.grid.grid2			{grid-template-columns: 1fr 1fr;}
.grid.grid3			{grid-template-columns: 1fr 1fr 1fr;}
.grid.grid4			{grid-template-columns: 1fr 1fr 1fr 1fr;}
.grid.steps > div	{position: relative;}

div.grid.shdw > div			{padding: 20px; border-radius: 20px !important; background: linear-gradient(135deg, #fff 0%, #daefd6 100%); border: 1px solid #daefd6; border-width: 0px 2px 2px 0px; box-shadow: 0 0 1680px #daefd6; background: #fff;} 
div.grid.steps > div .num	{position: absolute; right: 20px; top: 13px; font-size: 30px; text-align: right; color: #116D13; display: none;}

/*----------------*/

#wrp {max-width: 1200px; margin: 0 auto; position: relative; box-shadow: 0 20px 60px #1665344d; margin: 40px auto 0; border-radius: 20px !important; overflow: hidden; padding-bottom: 40px; background: #fff;}
#top {background: #ffffff; border-bottom: 1px solid #EEF1EE; position: relative;}
#top .topline {display: grid; grid-template-columns: auto auto 1fr; grid-gap: 15px; align-items: center; padding: 10px 20px;}
#top .logo {width: 60px;}

#promo {background: #fff; box-shadow: none; padding: 0 20px; display: grid; grid-template-columns: 1fr; grid-gap: 20px; margin: 0 auto; position: relative; width: 100%;}
#promo section		{display: grid; grid-template-columns: 200px 1fr; grid-gap: 40px; margin-top: 40px;}
#promo section h3	{max-width: 200px; text-align: right; float: right; padding: 0; margin-top: 20px;}

section#msgArea {background: #ecf6ea; border-radius: 20px !important; grid-template-columns: 200px 1fr 200px;}
section#msgArea > div {padding: 40px 20px;}

#stepper > div > div {margin-bottom: 20px; padding-left: 40px;}
#stepper > div > div:last-child {margin-bottom: 0;}
#stepper .num {display: inline-block; width: 32px; height: 32px; background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: #fff; vertical-align: middle; border-radius: 20px !important; text-align: center; line-height: 32px; padding-right: 1px; margin-top: -6px; margin-left: -40px; margin-right: 8px;}

#usl {}
#usl .grid > div {position: relative;}
#usl img {width: 40px; position: absolute; right: 12px; bottom: 12px; vertical-align: top; opacity: 0.3;}

#banner					{background: #fff url('/source/img/area2.jpg') no-repeat center;}
#banner section			{padding: 40px; background: #ffffffb3;}
#banner section > div	{max-width: 500px; margin: 140px auto; text-align: center;}
#banner .btn,
#msg button		{border: 0; background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important; padding: 10px 18px; color: #fff; border-radius: 30px !important;}

@media (max-width: 768px) {
	* {text-wrap: pretty;}

	.grid.grid2,
	.grid.grid3,
	.grid.grid4			{grid-template-columns: 1fr;}

	#wrp {margin: 10px;}
	#top .logo {width: 48px;}

	#banner {background: #daefd6;}
	#banner section {padding: 20px;}
	#banner section > div {max-width: 100%; margin: 0 0 20px;}

	#promo section		{padding-top: 20px; border-top: 2px solid #daefd6; grid-gap: 10px; margin-top: 20px;}
	#promo section		{display: grid; grid-template-columns: 1fr;}
	#promo section h3	{text-align: left; max-width: 100%; float: none;}
}