/*
@font-face {
	font-family: 'Inter';
	src: url('Inter-VariableFont_slnt,wght.ttf') format('woff2 supports variations'),
		url('Inter-VariableFont_slnt,wght.ttf') format('woff2-variations');
	font-weight: 100 1000;
	font-stretch: 25% 151%;
}
*/
html * 		{
				margin: 0;
				padding: 0;
				}
body 			{
				margin: 0;
				padding: 0;
				font-family: "Quicksand";
				font-size: 0;
				font-weight: 400;
				}
				.back-image
				{
				position: fixed;
				top:  0;
				left: 0;
				right: 0;
				bottom: 0;
				/*background: url(images/pattern-memphis.png);*/
				z-index: -1;
				opacity: .5;
				}
*:focus 		{outline: none;}
.clear 			{clear:both;}
a 				{color: #000;}
.wrap 		{
				max-width: 1100px;
				margin: auto;
				padding: 0 15px;
				position: relative;
				z-index: 10;
				}
.shade-hold {position: relative;}
.shade 		{
				position: absolute;
				left: 0;
				right: 0;
				top: 200px;
				bottom: 300px;
				background: rgba(0,0,0,.03);
				}
/*////////////////////////////////
---------------------------------
HEADER
---------------------------------
////////////////////////////////*/		
.header-hold 	{
					background: #fff;
					border-bottom: 2px solid rgba(0,0,0,.03);
					}
.header 			{padding: 40px 0;}
					.logo,
					.auth-right
					{
					width: 70%;
					display: inline-block;
					vertical-align: middle;
					}
					.auth-right
					{width: 30%;}
.css-logo 		{
					display: inline-block;
					width: 50px;
					height: 50px;
					position: relative;
					background: #9876FF;
					border-radius: 100%;
					}					
					.css-logo span
					{
					width: 36%;
					height: 54%;
					background: #fff;
					border-radius: 45%;
					position: absolute;
					top: 23%;
					left: 8%;
					}
					.logo a
					{
					display: inline-block;
					vertical-align: middle;
					}
					.logo a img
					{height: 21px;}
					.auth
					{
					display: inline-block;
					vertical-align: middle;
					white-space: nowrap;
					}
					.auth a
					{
					display: inline-block;
					vertical-align: middle;
					font-size: 15px;
					font-weight: 600;
					padding: 10px 0;
					text-decoration: none;
					color: #000;
					box-sizing: border-box;
					margin-left: 30px;
					transition: all .15s;
					}
					.auth a:hover
					{color: #000;}
					.auth a.current
					{
					text-decoration: underline;
					text-decoration-color: #9876ff;
					text-decoration-thickness: 3px;
					text-underline-offset: 3px;
					}
					.auth-right
					{text-align: right;}
					.auth-right a.buttons
					{
					color: #fff;
					border-radius: 5px;
					margin: 0 0 0 10px;
					padding: 10px 15px;
					}
					.auth-right a.login 
					{background: #555;}
						.auth-right a.login:hover
						{background: #000;}
					.auth-right a.register
					{background: #9876FF;}
						.auth-right a.register:hover
						{background: #8368D4;}
/*////////////////////////////////
---------------------------------
HERO
---------------------------------
////////////////////////////////*/		
.hero				{
					margin: 100px 0 35px;
					text-align: center;
					}
					.hero p
					{
					font-size: 25px;
					font-weight: 600;
					line-height: 170%;
					color: #8368D4;
					margin: 30px 0 10px;
					}
					.hero p span
					{
					text-decoration: underline;
					text-decoration-color: yellow;
					text-decoration-thickness: 9px;
					}
					.hero h1
					{
					font-size: 50px;
					line-height: 1.3;
					font-family: "Paytone One", Helvetiva, Arial, sans-serif;
					margin: 30px 0;
					}
					.hero h2
					{
					font-size: 25px;
					font-weight: 600;
					color: #777;
					}
						.hero h2 span
						{color: #000;}
					.hero h3
					{
					font-size: 18px;
					font-weight: 400;
					color: #d30797;
					background: #d3079710;
					max-width: 330px;
					padding: 10px;
					border-radius: 50px;
					margin: 0 auto 10px;
					border: 2px solid #d3079730;
					}
					.big-button
					{text-align: center;}
					.big-button a
					{
					display: inline-block;
					font-size: 25px;
					font-weight: 500;
					padding: 20px 70px 23px;
					border-radius: 7px;
					text-decoration: none;
					color: #fff;
					position: relative;
					z-index: 1;
					background: #9876FF;	
					transition: all .15s;				
					}
						.big-button a span
						{
						display: block;
						font-size: 15px;
						font-weight: 300;
						text-transform: uppercase;
						margin-top: 5px;
						}
					.big-button a:hover
					{background: #8368D4;}
/*		.big-button a::before
					{
					position: absolute;
					content: "";
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					z-index: -1;
					transition: opacity .3s linear;
					background: linear-gradient(30deg, rgba(0,0,0,1) 0%, rgba(42,4,32,1) 27%, rgba(179,16,136,1) 100%);
					opacity: 0;
					border-radius: 7px;
					}
					.big-button a:hover::before
					{opacity: 1}*/
.testimonial 		{
					max-width: 700px;
					margin: 100px auto;
					color: #333;
					text-align: center;
					}		
					.testimonial span
					{
					font-size: 30px;
					letter-spacing: 15px;
					color: #9876FF;
					}
					.testimonial svg
					{
					width: 50px;
					color: #9876FF;
					}
					.testimonial h3
					{
					font-size: 23px;
					font-weight: 600;
					text-transform: uppercase;
					line-height: 150%;
					color: #000;
					margin: 15px 0 10px;
					}
					.testimonial h2
					{
					font-size: 23px;
					font-weight: 500;
					line-height: 150%;
					color: #111;
					margin: 15px 0 18px;
					}
						.highlighted h2
						{
						border-bottom: 5px solid yellow;
						display: inline;
						}
						.highlighted div
						{margin: 10px 0 20px;}
					.testimonial p,
					.testimonial p a
					{
					font-size: 23px;
					font-weight: 400;
					color: #777;
					}	
					.testimonial p a
					{color: #555;}
					.testimonial img.profile
					{
					display: block;
					width: 70px;
					height: 70px;
					border-radius: 100%;
					margin: 10px auto;
					}
					.testimonial img.biz
					{
					display: block;
					width: 150px;
					height: auto;
					margin: 20px auto 0;
					}
					.testimonial img.fusion
					{
					width: 190px;
					margin: 10px auto 0;
					}
.section 		{
					max-width: 900px;
					margin: 100px auto;
					padding: 30px;
					text-align: center;
					border-radius: 30px;
					border: 2px solid #07d30780;
					background: #07d30710;
					}
					
					.section h2
					{
					font-size: 35px;
					margin-bottom: 20px;
					}
					.section p
					{
					font-size: 23px;
					line-height: 1.5;
					color: #00000090;
					}
					.section p.solid
					{color: #000;}
					.section p+p
					{margin-top: 20px;}
.themes 			{
					margin: 100px 0;
					text-align: center;
					}
					.themes h2
					{
					font-size: 39px;
					font-weight: 900;
					}
					.themes p.theme-para
					{
					max-width: 700px;
					font-size: 23px;
					line-height: 170%;
					margin: 10px auto 70px;
					color: #777;
					}
					.theme
					{
					max-width: 1100px;
					display: inline-block;
					vertical-align: top;
					box-sizing: border-box;
					padding: 0 50px;
					}
					.theme img
					{
					display: block;
					width: 100%;
					margin-bottom: 24px;
					box-shadow: 0 1px 7px rgba(0,0,0,.2);
					border-radius: 7px;
					border: 1px solid #ddd;
					transition: all .35s;
					}
					.theme img:hover
					{
					box-shadow: 0 1px 20px rgba(0,0,0,.35);
					border-color: #ccc;
					}
					.theme p
					{
					font-size: 15px;
					color: #777;
					}
					.theme p + p
					{margin-top: 5px;}
.screenshot 	{
					margin: 100px 0 150px;
					text-align: center;
					}	
					.themes + .screenshot
					{margin-top: -70px;}
					.screenshot img
					{
					max-width: 100%;
					display: block;
					}			
					.screenshot p
					{
					font-size: 15px;
					color: #777;
					}	
/* PRICING */
.pricing 		{
					margin: 70px -40px;
					text-align: center;
					}
					.pricing div
					{
					width: 350px;
					display: inline-block;
					vertical-align: top;
					border: 1px solid #ddd;
					border-radius: 10px;
					margin: 20px;
					padding: 30px 37px 25px 37px;
					box-sizing: border-box;
					box-shadow: 0 0 20px rgba(0,0,0,.05);
					background: #fff;
					}
					.pricing b
					{
					display: inline-block;
					font-size: 16px;
					font-weight: 600;
					color: #777;
					text-transform: uppercase;
					margin-bottom: 10px;
					}
					.pricing h3
					{font-size: 25px;}
						.pricing h3.pricing-note
						{margin-bottom: 20px;}
						.pricing h3.pricing-note span
						{color: #d30797;}
						.mb-20
						{margin-bottom: 20px;}
						.blue
						{color: #1972f5;}
						.twitter-blue
						{color: #1d9bf0;}
						.pricing h3 span
						{color: #07d307;}
					.pricing h2
					{font-size: 70px;}		
						.pricing h2.strike
						{
						color: #777;
						text-decoration: line-through;
						text-decoration-color: #d30797;
						text-decoration-thickness: 3px;
						}
						.pricing h2 + p
						{margin-top: 30px;}
					.pricing h2 sup
					{
					font-size: 37px;
					color: #d30797;
					}
					.pricing h2.gray
					{color: #999;}	
					.pricing h2 span
					{
					display: block;
					font-size: 20px;
					font-weight: 600;
					color: #777;
					text-transform: uppercase;
					}		
					.pricing h4
					{
					font-size: 15px;
					color: #333;
					font-weight: 500;
					margin-bottom: 20px;
					}
					.pricing p
					{
					font-size: 15px;
					line-height: 130%;
					color: #999;
					}
					.pricing p.strike
					{text-decoration: line-through;}
					.pricing p.green,
					.green
					{color: #07d307;font-weight: 600;}
					.pricing p span
					{color: #000;}
					.pricing p + p
					{margin-top: 10px;}
/* FAQ */
.faq 				{
					max-width: 60%;
					margin: 100px auto;
					text-align: center;
					}
					.faq h2
					{
					font-weight: 800;
					font-size: 30px;
					margin-bottom: 50px;
					}
					.faq span
					{
					display: block;
					margin: 30px auto;
					font-size: 21px;
					}
					.faq h3
					{
					font-size: 21px;
					font-weight: 600;
					margin-bottom: 5px;
					}
					.faq p
					{
					font-size: 17px;
					line-height: 150%;
					color: #555;
					}
/* CONTENT */
.content 		{
					width: 70%;
					margin: 70px auto;
					text-align: center;
					}
					.content h2
					{
					font-size: 27px;
					font-weight: 700;
					margin: 50px 0 10px;
					}
					.content p
					{
					font-size: 23px;
					font-weight: 350;
					line-height: 150%;
					color: #777;
					}
					.content p.sub
					{
					font-weight: 500;
					color: #000;
					}
					.content p + p
					{margin-top: 30px;}
					.content p strong
					{
					color: #000;
					font-weight: 350;
					}
/* BENEFITS */
.all-benefits 	{
					margin: 0 -50px 100px;
					text-align: center;
					}
					.all-benefits h3
					{
					font-size: 40px;
					font-weight: 800;
					margin: 100px 0 30px;
					}
					.benefit 
					{
					width: 30%;
					display: inline-block;
					vertical-align: top;
					border: 1px solid #ddd;
					border-radius: 10px;
					margin: 0 20px 20px 0;
					padding: 25px 37px 25px 37px;
					box-sizing: border-box;
					box-shadow: 0 0 20px rgba(0,0,0,.05);
					background: #fff;
					}
						.benefit-big
						{width: 50%;}
						.checks
						{
						text-align: center;
						margin: 50px 0 55px;
						}
						.checks p
						{
						display: inline-block;
						font-size: 18px;
						font-weight: 600;
						}
						.checks svg,
						.benefit svg
						{
						width: 35px;
						color: #07d307;
						vertical-align: middle;
						}
						.benefit svg
						{margin-bottom: 15px;}
						.checks span 
						{
						display: inline-block;
						vertical-align: middle;
						}
						.checks p + p
						{margin-left: 30px;}
					.benefit h2
					{
					font-size: 23px;
					font-weight: 800;
					margin-bottom: 10px;
					}
					.benefit p
					{
					font-size: 18px;
					line-height: 150%;
					color: #555;
					}
/* FOOTER */
.footer 			{
					border-top: 2px solid rgba(0,0,0,.03);
					background: rgba(0,0,0,.03);
					margin-top: 200px;
					}
					.footer-in
					{
					max-width: 1100px;
					margin: auto;
					padding: 100px 15px 70px;
					}
					.half,
					.third
					{
					display: inline-block;
					vertical-align: top;
					width: 50%;
					}
					.third
					{width: 25%;}
					div .half:nth-child(2)
					{text-align: right;}
					.footer-menu .half:first-child
					{width: 75%;}
					.footer-menu .half:nth-child(2)
					{
					width: 25%;
					margin-top: -5px; /* to line up better at top */
					}
					.footer-menu a
					{
					display: block;
					margin: 0 0 10px 0;
					font-size: 15px;
					font-weight: 600;
					color: #777;
					text-decoration: none;
					}
					.footer-menu a:hover,
					.footer-menu a.current
					{text-decoration: underline;}
					.third p
					{font-weight: 600;}
					.footer p
					{
					font-size: 15px;
					margin-bottom: 15px;
					}
					.footer p.bottom-copy
					{margin: 0;}
					.disclaimer h3
					{
					font-size: 16px;
					margin-bottom: 10px;
					}
					.disclaimer h3 svg
					{
					width: 25px;
					vertical-align: middle;
					margin: 0 5px 0 0;
					color: #1dbd1d;
					}
					.disclaimer h3 span
					{
					display: inline-block;
					vertical-align: middle;
					color: #009fff;
					}
					.disclaimer p
					{
					font-size: 14px;
					font-weight: 400;
					}
					.disclaimer p a
					{
					font-size: 14px;
					text-decoration: underline;
					}
					.climate
					{
					margin-top: 10px;
					width: 23px;
					}
@media only screen 
	and (max-width: 900px) {
		.header
		{padding: 35px 0 20px;}
		.logo,
		.auth-right
		{
		width: 100%;
		text-align: center;
		margin-bottom: 10px;
		}
		.shade
		{display: none;}
		.logo a.logo-hold
		{
		display: block;
		text-align: center;
		margin-bottom: 20px;
		}
		.css-logo
		{
		width: 70px;
		height: 70px;
		}
		.logo a img
		{
		margin-bottom: 25px;
		}
		.auth
		{
		display: block;
		white-space: normal;
		}
		.auth a
		{
		font-size: 20px;
		margin: 0 20px;
		}
		.auth-right a.buttons
		{margin: 0 5px;}
		.hero
		{margin: 30px 0;}
		.hero h1
		{
		font-size: 35px;
		line-height: 120%;
		margin-bottom: 15px;
		}
		.hero h2
		{font-size: 21px;}
		.hero h3
		{font-size: 17px;}
		.checks
		{margin: 0;}
		.checks p
		{display: block;}
		.checks span
		{
		margin: 0 auto 5px;
		font-size: 15px;
		line-height: 20px;
		}
		.checks p + p
		{margin: 20px 0 0;}
		.big-button
		{margin: 35px 0 50px;}
		.big-button a
		{
		font-size: 18px;
		padding: 15px 30px 15px 45px;
		}
		.screenshot
		{margin: 50px 0;}
		.themes h2
		{font-size: 35px;}
		.themes p.theme-para
		{
		font-size: 21px;
		margin-bottom: 50px;
		}
		.theme
		{
		display: block;
		width: 70%;
		margin: auto;
		}
		.theme + .theme
		{margin-top: 50px;}
		.testimonial
		{margin: 70px auto 100px;}
		.testimonial h2
		{font-size: 20px;}
		.testimonial p,
		.testimonial p a
		{font-size: 18px;}
		.all-benefits,
		.benefit
		{
		width: auto;
		margin: 0;
		}
		.benefit
		{padding: 20px 30px;}
		.benefit + .benefit
		{margin-top: 15px;}
		.all-benefits h3
		{
		font-size: 30px;
		margin: 50px 0 20px;
		}
		.benefit h2
		{
		font-size: 21px;
		margin-bottom: 5px;
		}
		.benefit p
		{font-size: 16px;}
		.content
		{
		width: auto;
		margin-top: 30px;
		}
		.content p
		{font-size: 18px;}
		.pricing
		{margin: 30px 0;}
		.pricing div
		{
		width: auto;
		margin: 0 0 15px;
		}
		.faq
		{max-width: none;}
		.footer
		{text-align: center;}
		.footer-menu .half:first-child,
		.footer-menu .half:nth-child(2)
		{
		display: block;
		width: auto;
		text-align: center;
		margin-bottom: 50px;
		}
		.footer-menu .half:nth-child(2) p
		{
		display: inline-block;
		width: 80%;
		}
		.third
		{
		width: 50%;
		margin-bottom: 30px;
		}
}