body {font-size:18px; color:#414E5C; margin:0; padding:0; font-family:"Open Sans", sans-serif;}
a {color:#37C59E; text-decoration:none; font-weight:700}
img {display:block; margin:0 auto; width:100%; height:auto;}
p {text-align:center; margin:0; padding:5px 10px 15px;}
h1 {font-size:30px; font-weight:800; text-align:center; color:#fff; width:300px; margin:0 auto; padding:15px 0;}
h2 {font-size:24px; font-weight:700; text-align:center; padding:10px 0; margin:0;}
h3 {font-size:18px; padding:15px 5px; font-weight:700; margin:0; text-align:center;}
ul, ul li {list-style:none; padding:0; margin:0;}



#nav {position:relative; height:40px; background:#3F6067; padding:10px 0 0;}
#nav div {height:40px; background:#3F6067; position:relative; z-index:2;}
#nav a {display:block; float:left; color:#fff; padding:5px 15px; font-weight:400; font-size:14px;}
#nav a.login {border-radius:40px; background:#324B52; float:right; margin:0 10px 0 0;}
#nav:after {content:""; position:absolute; z-index:1; bottom:0px; left:10%; right:10%; height:50%; width:80%; border-radius:100%; box-shadow:0 0 40px rgba(0,0,0,0.25); border-radius:100%; -webkit-box-shadow:0 0 40px rgba(0,0,0,0.25);}

#logo {position:relative; display:block; height:auto; width:250px; margin:0 auto;}
#logo.logo2 {margin-top:15px;}

#main-banner {position:relative; background:linear-gradient(#3F6067 ,#414E5C); padding:30px 0;}
#main-banner img {display:block; margin:0 auto; }
#main-banner p {font-weight:700; color:#fff;}


.button {display:block; padding:15px 20px; font-weight:700px; color:#fff; text-align:center; border-radius:2px; background:#37C59E; width:120px; min-width:120px; margin:0 auto; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}
.button:hover {background:#137E62;}

.feature {}
.feature img {}
.feature p {margin-bottom:60px;}

#about {background:linear-gradient(#3F6067 ,#414E5C); padding:30px 5%;}
#about h2 {color:#fff;}
#about p {color:#fff;}

#more {margin:30px 5%;}
#more h2 {border-bottom:2px solid #A7E9D7;}
#more ul {padding-top:30px;}
#more ul li {display:block; padding:0 0 25px 0;}
#more strong {display:block; position:relative; padding:10px 0 15px 42px;}
#more strong:before {content:''; display:block; width:34px; height:34px; position:absolute; left:0px; top:0px;}
#more strong.dashboard:before {content: url('images/dashboard-icon.svg');}
#more strong.perform:before {content: url('images/perform-icon.svg');}
#more strong.revenue:before {content: url('images/revenue-icon.svg');}
#more strong.analytics:before {content: url('images/analytics-icon.svg');}
#more strong.subscription:before {content: url('images/subscription-icon.svg');}
#more strong.more:before {content: url('images/more-icon.svg');}


#pricing {background:#efefef; padding:30px 5%;}
#pricing ul li {display:block; border-radius:6px; background:#fff; box-shadow:0 4px 20px rgba(0,0,0,0.05); margin-bottom:20px;}
#pricing ul li h3 {border-radius:6px 6px 0 0;}
#pricing ul li:nth-child(1) h3 {background:#FBD2A6;}
#pricing ul li:nth-child(2) h3 {background:#C9C2D5;}
#pricing ul li:nth-child(3) h3 {background:#F3ABAC;}
#pricing a {width:100%; border-top:2px solid #efefef; padding:15px 0; display:block; text-align:center; border-radius:0 0 6px 6px; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}
#pricing a:hover {color:#fff; background:#37C59E; border-color:#37C59E;}


#clients {padding:30px 5%;}
#clients div {float:left; width:50%; height:120px; display:flex; justify-content:center; align-items:center;}
#clients div img {height:auto; width:auto; max-width:100%;}

#clients:after {content:" "; display:block; clear:both;}


#footer {background:#efefef; clear:both; text-align:center; padding:30px 5%; }
#footer a {font-size:14px; color:#666; padding:0 10px; display:block; margin-bottom:20px;}
#footer p {font-size:14px;  color:#999;}

#demo {padding:0 20px; background:#fff; width:300px; margin:0 auto; border-radius:6px; background:#fff; box-shadow:0 4px 20px rgba(0,0,0,0.1);}
#demo form {display:block; margin:30px auto 0; max-width:500px; padding:0 0 30px;}
#demo label {display:block; margin:20px 0 4px; font-size:14px; font-weight:700;}
#demo label strong {font-weight:400; color:#ccc; font-size:14px}
#demo input {background:#efefef; border:2px solid #ccc; border-radius:3px; padding: 10px; display:block; font-size:18px; color:#333; width:100%; box-sizing:border-box;}
#demo button {border:none; font-size: 16px; cursor:pointer; margin-top:30px;}

#content {margin:0 auto; padding:0 5%; max-width:1000px;}
#content p {text-align:left;}

body.demoPage {display:flex; min-height:100vh; flex-direction:column;}


/* >650  */
@media only screen and (min-width:700px) {

	#nav, #nav div {height:80px; text-align:right;}
	#nav div {margin:0 auto; max-width:1200px; padding-top:20px; height:60px;}
	#nav a, #nav a.login {float:none; text-align:right; display:inline;}
	#nav a.login {margin-left:10px;}

	#main-banner {padding-bottom:50px;}
	#logo {position:absolute; z-index:2; top:-75px; left:20px; margin:0;}
	#logo.logo2 {top:0;}

	.feature img {float:right; width:50%;}
	.feature.two img {float:left;}

	.feature h2 {margin-top:18%; margin-left:30px;}
	.feature p {padding-left:0; margin-left:30px;}
	.feature.two h2 {margin-top:13%;}
	.feature h2, .feature p {text-align:left; float:left; width:40%;}


	#more ul li {float:left; width:47%; min-height:190px;}
	#more ul li:nth-child(odd) {margin-right:6%;}

	#pricing ul li {float:left; width:32%;}
	#pricing ul li:nth-child(1), #pricing ul li:nth-child(2) {margin-right:2%;}
	#pricing ul li p {min-height:100px;}

	.feature:after, #pricing:after, #more, #more ul:after {content:" "; display:block; clear:both;}

	#clients div {width:25%;}

	#footer a {display:inline;}
	#demo {min-height:300px;}
	body.demoPage {background:url('images/icons-bg.jpg') center 70px no-repeat;}
}


@media only screen and (min-width:1000px) {

	#nav:after {content:" "; display:block; clear:both;}


	#main-banner #banner-image {float:left; width:60%; }
	#main-banner div {max-width:1600px; margin:0 auto;}
	h1 {margin-top:10%;}
	#main-banner h1, #main-banner p {float:right; width:40%; text-align:left; padding:0;}
	#main-banner .button {float:left; margin-top:20px;}
	#main-banner:after {content:" "; clear:both; display:block;}

	.feature h2, .feature p {margin-left:100px;}
	.feature p {padding:5px 0 15px; width:400px;}
	.feature.one {margin-bottom:-60px;}

	#about {border-radius:3px;}
	#about p, #pricing p {padding:10px 15%;}

	#about {max-width:1200px; margin:0 auto;}

	.feature, #more h2, #more ul, #clients, #pricing ul {max-width:1200px; margin:0 auto; display:block;}


	#nav:after {width:50%; max-width:1100px; margin:0 auto;}

}



@media only screen and (min-width:1300px) {
	#logo {left:250px;}
}

@media only screen and (min-width:1600px) {
	#logo {left:20%;}
}