@import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900|Montserrat:400,700');

html, body {
    margin: 0;
    min-height: 100%;
}

body {
/*	font-family: 'Montserrat', sans-serif;*/
	font-family: 'Lato', sans-serif;
}

.show-for-small-only {
	display: none !important;
}

.no-margin {
  margin: 0 !important;
}

.btn {
	font-size: 15px;
	font-weight:700;
	text-transform: uppercase;
	letter-spacing: 1px;
	background: #11db75;
	color: #fff;
	border: none;
	border-radius: 30px;
	padding: 0.75rem 3rem;
	cursor: pointer;
}
.btn:hover {
	background-color: #303030;
	color: #11db75;
}
.btn-inverse {
	background: #303030;
}
.btn-inverse {
	background: #303030;
}
.btn-inverse:hover {
	color: #11db75;
}
.btn-login {
		font-size: 12px;
		font-weight: normal;
		border-radius: 16px;
		padding: 0.35rem 1.25rem;
		margin: 8px;
	}
/*  ------------------- */

.personal-links {
  margin: 16px auto;
}
.personal-links span {
  margin: 0 12px;
}
.personal-links span a {
  cursor: pointer;
}
.linkedin a {
	color: #4875b4;
}
.twitter a {
	color: #00aced;
}

.menu-container,
.content,
.main
{
	transition: margin 0.4s ease-in-out;
}

.menu-container
{
	background: #303030;
	width: 210px;
  margin-left: -210px;
	padding: 0px;
	float: left;
	position: absolute;
  min-height: 100%;
  z-index: 99;
}

.sidebar-menu {
	padding: 8px;
}

.sidebar-menu-items {
	padding: 8px;
	text-transform: capitalize;
}
.sidebar-menu-items .btn {
	margin: 8px 0;
}
.sidebar-menu-items .btn:hover {
	color: #303030;
	background: #11db75;
}

.sidebar-menu-items a {
	color: #fff;
	font-size: 16px;
	display: inline-block;
  width: 100%;
  padding: 8px 0;
}
.sidebar-menu-items a:hover {
    color: #11db75;
    text-decoration: none;
  }
.sidebar-menu-items a::after {
	content: "\f054";
	font-family: 'FontAwesome';
	font-style: normal;
	font-weight: normal;
	text-decoration: inherit;
  color: #11db75;
  font-size: 18px;
  position: absolute;
  padding: 0 10px;
  right: 0;
}
.sidebar-menu-items a.no-icon::after {
	content: "";
}

span.soon {
	padding: 5px;
	border-radius: 3px;
	font-size: 10px;
	color: #fff;
	background-color: #f90000;
	text-transform: uppercase;
	font-weight: 700;
}

.mobile-menu {
	position: absolute;
  left: 0;
  background: #303030;
  padding: 24px;
  height: 84px;
  top: 0;
	cursor: pointer;
	z-index: 99;
}
.navIcon {
	padding: 3px 16px;
	color: white;
	font-size: 2rem;
}

header {
	padding: 8px 0;
	background-color: #11db75;
}
header img {
	height: 50px;
	margin: 8px 0;
}

.login {
  position: absolute;
	top: 0;
  right: 0;
	z-index: 99;
}

.menu {

}
.menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: center;
}
.menu ul li {
	display: inline-block;
	padding: 40px 5% 0 5%;
}

.menu ul li a {
	font-size: 13px;
	font-weight:700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #fff;
}

.intro {
	margin: 3rem 0;
	background: url(/img/macbook-art.png) right 0px no-repeat;
	background-size: 560px;
}
	.intro h2 {
		margin-top: 0;
		font-size: 3.5rem;
		text-align: center;
		font-weight: 900;
		line-height: 4rem;
	}

	.intro p {
		color: #747474;
		text-align: center;
		margin-top: 2rem;
		font-size: 1.25rem;
	}

.strip {
	margin: 3rem 0;
	background: url('/img/strip.png') center 0 repeat-x;
	padding-top: 248px;
}

	.strip h2 {
		margin: 2rem 0;
		font-size: 3rem;
		text-align: center;
		font-weight: 900;
		line-height: 4rem;
	}

	.strip p {
		color: #747474;
	}

	.strip .steps {
		background: url('/img/steps.png') center 0 no-repeat;
		height: 77px;
		margin: 0 0 2rem;
	}

.hiw {
	background-color: #434343;
	padding: 3rem 0;
}

	.hiw h2 {
		margin: 0 0 1rem;
		font-size: 44px;
		color: #11db75;
		font-weight: 700;
		text-align: center;
	}

	.hiw p.lead {
		margin: 0 0 2rem;
		text-align: center;
		font-size: 18px;
		color: #fff;
		font-weight: 300;
	}

	.hiw .cols {
		text-align: center;
		margin: 0 0 3rem;
	}
		.hiw .cols p {
			font-size: 14px;
			font-weight: 300;
			color: #fff;
		}

		.hiw .cols i {
			font-size: 3rem;
			color: #11db75;
			margin: 3rem auto 2rem auto;
		}

		.hiw .cols h3 {
			text-transform: uppercase;
			color: #11db75;
			font-size: 13px;
			font-weight: 900;
			letter-spacing: 1px;
			text-align: center;
		}

.follow {
	text-align: center;
	padding: 3rem 0;
}
	.follow h2 {
		font-size: 44px;
		font-weight: 900;
	}

	.follow p {
		color: #8E8C8C;
	}

	/*.follow .social {
	}
		.follow .social ul {}
			.follow .social ul li {}
				.follow .social ul a {
					color: #11db75;
					font-size: 44px;
					margin: 0 3rem;
				}*/

.aboutus {
	padding: 4rem 0 2rem 0;
	background: #4d4d4d;
	text-align: center;
}

	.aboutus h2 {
		color: #fff;
		font-size: 44px;
		font-weight: 900;
	}

	.aboutus p.lead {
		color: #fff;
		font-size: 19px;
	}

	.aboutus .card {
		padding: 3rem 0 1rem;
		background-color: #fff;
		color: #747474;
		margin-bottom: 2rem;
	}

		.aboutus .list {
			margin: 4rem 0 ;
		}

		.aboutus .card img {
			width: 129px;
			height: 129px;
			margin: 0 auto;
			margin-bottom: 2rem;
		}

		.aboutus .card h3 {
			font-size: 22px;
			font-weight: 900;
		}

		.aboutus .card h4 {
			font-size: 15px;
			font-weight: 300;
			margin: 0;
		}

		.aboutus .card p {
			font-size: 16px;
			font-weight: 900;
		}

		.aboutus .card p.title {
			margin: 1rem 0 0 0;
			font-size: 13px;
		}


.page {
	margin-top: 3rem;
	margin-bottom: 3rem;
}

form {

}

footer {
	font-style: italic;
	font-size: 13px;
	padding: 2rem 0;
	background-color: #303030;
	color: #fff;
	letter-spacing: 1px;
	text-transform: uppercase;
}

	footer span {
		text-transform: none;
		font-style: normal;
		letter-spacing: 0px;
		color: #878787;
	}

	footer a {
		color: #878787;
	}

	footer a:hover {
		color: #aaa;
		text-decoration: none;
	}



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

.gray {
	color: #666;
}
.green {
	color: #11db75;
}
.white,
.white a {
	color: #fff;
}
.green-background {
	background: #11db75 !important;
}
.green-border {
	border: solid 2px #11db75;
	border-radius: 8px;
}
.bold {
	font-weight: 700;
}

.wallpaper {
	background: url('/img/team-pricing-background.png') no-repeat;
	background-size: cover;
}

.section {
	/*padding: 40px 0 60px;*/
}

/*.social {
	margin: 0 0 2rem 0;
}*/
.social ul a {
    color: #11db75;
    font-size: 44px;
    margin: 0 3rem;
		-webkit-transition: color .2s ease;
	  -moz-transition: color .2s ease;
	  -o-transition: color .2s ease;
	  transition: color .2s ease;
}

.social ul a:hover {
	color: #303030;
}

.btn-green {
	background: #11db75;
	color: white;
	cursor: pointer;
}
.btn-green:hover {
	background: #303030;
}

.container .heading {
	font-size: 2.9rem;
	text-align: center;
	font-weight: 700;
	font-family: 'Lato Black', sans-serif;
	padding-top: 24px;
}

.container .sub-heading {
	width: 60%;
	margin: 8px auto;
}

.pricing-plan {
	background-color: #fff;
	margin: 24px 0;
	padding: 16px;
	min-width: 230px;
	border-radius: 8px;
}
.pricing-plan .btn {
	border-radius: 24px;
	width: 160px;
	text-align: center;
	padding: 12px 0px;
	margin: 8px 0;
	font-size: 12px;
	font-weight: normal;
}

.pricing-plan a {
	color: white !important;
}
.plan-price {
	font-size: 48px;
}
.plan-price.annual {
	font-size: 24px
}
.plan-duration {
	font-size: 16px;
	vertical-align: middle;
	text-align: left;
	line-height: 1.2;
	padding-left: 8px;
}
.plan-duration.annual {
	padding: 0;
	font-weight: normal;
}
.plan-heading {
	font-size: 1.5rem;
	text-align: center;
	font-weight: 700;
	font-family: 'Lato Black', sans-serif;
	text-transform: uppercase;
}
/*.pricing-content {
	min-height: 220px;
}*/
.pricing-content .creditcard {
	margin: 16px 8px;
	width: 40px;
}
.pricing-content hr {
	margin: 0px auto;
	width: 75%;
}
.pricing-content .feature,
.pricing-content .feature span {
	margin: 2px;
	line-height: 2;
	font-weight: 700;
}

.pricing-input {
	width: 50%;
	display: inline-block;
	margin-right: 8px;
	background: #f1f1f1;
	border: none;
	padding: 1rem;
}

.pricing-input:focus {
	background-color: #fff;
	border: solid 1px #11db75;
	outline: 0;
}

.upgrade-feature {
	margin: 24px 0;
	padding: 16px;
	font-size: 14px;
}
.upgrade-feature i {
	padding: 4px;
	font-size: 48px;
}
.upgrade-feature img {
	padding: 8px;
}

.upgrade-feature .green {
  text-transform: uppercase;
  height: 90px
}

.upgrade-feature .title {
  position: relative;
  bottom: 0;
}


#nav-icon3 {
  width: 20px;
  height: 16px;
  position: relative;
  margin: 8px 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon3 span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon3 span:nth-child(1) {
  top: 0px;
}

#nav-icon3 span:nth-child(2),
#nav-icon3 span:nth-child(3) {
  top: 6px;
}

#nav-icon3 span:nth-child(4) {
  top: 12px;
}

#nav-icon3.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}


/*
	RESPONSIVE
 */

 @media (max-width: 991px) {

 	.show-for-small-only {
 		display: inherit !important;
 	}

 	.hide-for-small {
 		display: none !important;
 	}

	.login {
		/*left: 16px;*/
	}
 	.intro  {
 		background: none;
 		margin: 1rem 0;
 	}

 	.intro h2 {
 		font-size: 3rem;
 		line-height: 3rem;
 		margin: 2rem;
 	}
 	.intro p {
 		font-size: 1rem;
 	}

	.menu ul li {
		padding: 0;
	}

 }

@media (max-width: 767px) {

	.container .sub-heading {
		width: 100%;
	}

	.intro  {
		background: none;
		margin: 1rem 0;
	}

	.intro p,
	.strip p,
	.hiw p {
		font-size: 1rem;
	}

	.brand  {
		width: 100% !important;
	}

	.brand img {
		text-align: center;
		width: 80%;
	}

	.strip {
		margin: 0;
		background: url('/img/strip.png') 20% 0 no-repeat;
		padding-top: 248px;
	}
	.intro h2,
	.strip h2,
	.hiw h2 {
		font-size: 2rem;
		line-height: 1;
	}
	.hiw img {
		margin-top: 2rem;
	}
	.social ul a {
    margin: 0 2rem;
	}
}

@media (max-width: 567px) {

	.mobile-menu {
	  padding: 0px;
	  height: 50px;
	}
	.navIcon {
		padding: 12px;
		color: white;
		font-size: 2rem;
		cursor: pointer;
	}
	header img {
		height: 32px;
		margin: 0;
	}
	.pricing-input {
		width: 100%;
	}
	.social ul a {
		margin: 0 1rem;
	}
}

/*  ---------------------------- */
/*  Temp for Product Hunt launch */
/*  ---------------------------- */

#product_hunt { text-align: center; }
	#product_hunt header { background-color: #fff; text-align: center; margin: 0.5em auto;}
		#product_hunt header a { color: #DE6036; }
		#product_hunt header img { width: 30px; height: 30px; margin: 0 0.25em; }
		#product_hunt header p { color: #DE6036; margin: 0; }
		#product_hunt header iframe { margin: 0; }