body {
	height: 100%;
	max-width: 100%;
	margin: 0;
	padding: 60px 0 0;
	overflow-y: scroll;
	overflow-x: hidden;
	background:  #2a5cdb;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath fill-rule='evenodd' d='M11 0l5 20H6l5-20zm42 31a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM0 72h40v4H0v-4zm0-8h31v4H0v-4zm20-16h20v4H20v-4zM0 56h40v4H0v-4zm63-25a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM53 41a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-30 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-28-8a5 5 0 0 0-10 0h10zm10 0a5 5 0 0 1-10 0h10zM56 5a5 5 0 0 0-10 0h10zm10 0a5 5 0 0 1-10 0h10zm-3 46a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM21 0l5 20H16l5-20zm43 64v-4h-4v4h-4v4h4v4h4v-4h4v-4h-4zM36 13h4v4h-4v-4zm4 4h4v4h-4v-4zm-4 4h4v4h-4v-4zm8-8h4v4h-4v-4z'/%3E%3C/g%3E%3C/svg%3E");
}



/*
 * buttons
 */
.btn {
	display: inline-block;
	font: lighter 14px/45px 'Karla', sans-serif;
	cursor: pointer;
}
	.btn:hover { opacity: 0.7; }

.btn.btn-yellow {
	padding: 0 20px;
	background-color: #fed200;
	border-radius: 4px;
	border-style: none;
	box-shadow: rgba(0, 0, 0, 0.341176) 0px 2px 4px 0px;
	color: #020020;
	font-weight: bold;
	text-transform: uppercase;
}

.btn-test-bot {
	width: 130px;
	height: 36px;
	background-color: #2a5cdb;
	border: 1px solid #2a5cdb;
	border-radius: 6px;
	box-shadow: rgba(0, 0, 0, 0.341176) 0 2px 9px;
	cursor: pointer;
}
	.btn-test-bot:hover {
		background-color: #2c3e50;
		border-color: #2c3e50;
	}
	.btn-test-bot > span {
		padding-left: 21px;
		background: url(/assets/img/run.png) no-repeat -9px 50%;
		background-size: 31px 29px;
		color: #fff;
		font: lighter 14px 'Karla', sans-serif;
	}




/*
 * Top Navigation
 */
.top-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 60px;
	padding: 0 20px;
	box-sizing: border-box;
	background-color: #fff;
	z-index: 20;
	box-shadow: rgba(0, 0, 0, 0.239216) 0px 2px 4px 0px;
}

.inner-top-nav {
	position: relative;
	width: 100%;
	max-width: 1110px;
	height: 40px;
	margin: 10px auto;
}

.logo-holder {
	height: 40px;
	width: 100px;
	float: left;
}

.top-nav-logo {
	height: 24px;
	width: 86px;
	margin-top: 6px;
}

#mobile-nav-toggle {
	display: none;
	position: absolute;
	top: -7px;
	right: 0;
}

.top-nav-bar {
	position: absolute;
	top: 0;
	right: 0;
}

.top-nav-menu {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.top-nav-menu > li {
	display: inline-block;
}

.top-nav-menu > li > a {
	display: inline-block;
	box-sizing: border-box;
	padding: 0 10px;
	color: #020020;
	font: lighter 14px/40px 'Karla', sans-serif;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.top-nav-menu > li.active > a,
.top-nav-menu > li > a:hover,
.top-nav-menu > li > a.focus {
	font-weight: bold;
}

.top-nav-auth {
	display: inline-block;
	margin-left: 20px;
}

.top-nav-auth .btn {
	display: inline-block;
	box-sizing: border-box;
	padding: 0 10px;
	border-radius: 4px;
	color: #020020;
	font: lighter 14px/40px 'Karla', sans-serif;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.top-nav-auth .btn-signup-trial {
	min-width: 140px;
	height: 36px;
	box-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px;
	font-weight: bold;
}

.top-nav-auth .btn-login {
	min-width: 80px;
	height: 38px;
	margin-left: 20px;
	border: 1px solid #2a5cdb;
	color: #2a5cdb;
	font-size: 13px;
	font-weight: lighter !important;
	line-height: 38px;
	text-transform: none;
}

.top-nav-auth .login-btn:hover,
.top-nav-auth .login-btn:focus {
	opacity: .7;
}



/*
 * Footer
 */
.footer-section {
	background-color: rgba(44, 62, 80, 0.9601961);
}

.footer-holder-inner{
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	overflow: auto;
}

.footer-section-left-holder {
	float: left;
	margin: 20px 20px 14px;
}

.footer-section-left-holder > ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.footer-section-left-holder > ul > li {
	display: inline-block;
	padding-right: 1em;
}
.footer-section-text {
	color: #fff;
	font: lighter 13px/26px 'Karla', sans-serif;
	text-decoration: none;
}
a.footer-section-text:hover {
	text-decoration: underline;
}

.footer-section-right-holder {
	float: right;
	margin: 14px 20px 0 0;
}

.social-media-icon {
	margin-left: 20px;
	float: right;
	border-radius: 100px;
	box-shadow: rgba(0, 0, 0, 0.341176) 0 2px 9px;
}
	.social-media-icon:hover { opacity: 0.7; }

.social-media-icon > img {
	height: 32px;
	width: 32px;
}




/*
 * Main Demo Area
 */
.main-image-wrap {
	position: relative;
	margin: 0 0 140px;
}

/* main header */
.main-top-hold {
	position: relative;
	top: 55px;
	left: 0;
}
	.main-top-inner-hold {
		width: 430px;
		margin-left: calc(70% - 220px);
	}

.top-headline {
	font-size: 36px;
	color: rgba(255, 255, 255, .9);
	font-family: 'Karla', sans-serif;
	text-align: left;
	margin: 0;
}

.top-explainer {
	font-size: 17px;
	color: rgba(255, 255, 255, .7);
	font-family: 'Karla', sans-serif;
	text-align: left;
	font-weight: lighter;
	line-height: 26px;
	margin-top: 17px;
}

#top-explainer-bot {
	position: absolute;
	top: 0;
	left: -220px;
	width: 71%;
}
	#top-explainer-bot .gobot-wrapper .gobot-toggle,
	#top-explainer-bot .gobot-wrapper .gobot {
		bottom: -385px;
		right: calc(12.5% + 20px);
	}

.beta-signup-area {
	margin-top: 22px;
	padding: 14px 17px;
	background-color: rgba(255, 255, 255, .3);
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, .1);
	box-shadow: rgba(0, 0, 0, 0.341176) 0px 2px 9px 0px;
	text-align: left;
	overflow: auto;
}

.beta-signup-area > input {
	width: 210px;
	height: 34px;
	padding: 0 13px;
	background-color: rgba(255, 255, 255, .94);
	border: none;
	border-radius: 6px;
	box-shadow: rgba(0, 0, 0, 0.341176) 0px 2px 9px 0px;
	outline: none;
	font: 14px/34px 'Questrial';
}

.beta-signup-area > .btn {
	float: right;
	min-width: 164px;
	height: 34px;
	font-size: 13px;
	line-height: 36px;
}

.top-beta-signup-watch-video-section {
	display: inline-block;
	margin-top: 25px;
	color: rgba(255, 255, 255, .8);
	font: bold 15px 'Karla', sans-serif;
	line-height: 42px;
	text-transform: uppercase;
}

.top-call-top-action-button {
	display: inline-block;
	width: 160px;
	height: 42px;
	margin-left: 10px;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 6px;
	color: rgba(255, 255, 255, .8);
	text-decoration: none;
	cursor: pointer;
}

.top-call-top-action-button:hover {
	background-color: rgba(255, 255, 255, .1);
}

.bot-demo-button-play-circle {
	position: relative;
	top: -2px;
	display: inline-block;
	margin-right: 4px;
	width: 23px;
	height: 23px;
	background-color: #fff;
	border-radius: 4px;
	box-shadow: rgba(0, 0, 0, 0.317647) 0px 1px 3px 0px;
}

.bot-demo-button-play-icon {
	height: 18px;
	width: 21px;
	margin-top: 3px;
	margin-left: 2px;
	vertical-align: middle;
}

.top-call-to-action-text {
	font-size: 15px;
	color: #020020;
	margin-top: 20px;
	display: inline-block;
	font-family: 'Karla', sans-serif;
	text-transform: uppercase;
}

/* bot demo */
.main-top-hold-demo-area {
	position: absolute;
	top: -155px;
	left: -220px;
	width: 71%;
	height: 720px;
}

.bot-demo > img {
	width: 100%;
	max-width: 320px;
	border-radius: 6px 6px 0 0;
	box-shadow: rgba(0, 0, 0, 0.16) 0 5px 37px;
}



/*
 * Main Callout section
 */
.main-callout-section.callout-section {
	padding: 25px 0;
	background-color: transparent;
	overflow: hidden;
}
	.main-callout-section:before {
		content: '';
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 120px;
		background-color: rgb(247, 248, 250);
	}

/* callout boxes */
.callout-section {
	position: relative;
	background-color: rgb(247, 248, 250);
}

.callout-holder {
	max-width: 1110px;
	margin: 0 auto;
	padding: 0 35px;
}

.callouts {
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}

.callouts > li {
	display: inline-block;
	width: 24.5%;
}

.callout-button {
	position: relative;
	margin: 40px 9px 20px;
	padding: 40px 15px 25px;
	background-color: #fff;
	border: 1px solid #d0d0d0;
	border-radius: 6px;
	box-shadow: rgba(0, 0, 0, 0.341176) 0 2px 9px;
	box-sizing: border-box;
	text-align: center;
}

.callout-button-icon {
	position: absolute;
	width: 50px;
	height: 47px;
	left: 50%;
	transform: translate(-50%, -80px);
	padding: 6px;
	background-color: #fff;
	border-bottom: 4px solid rgba(189, 195, 199, 0.7);
	border-radius: 8px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}
	.callout-button-icon > img {
		position: relative;
		top: 50%;
		transform: translateY(-50%);
		max-width: 100%;
	}
	.callout-button-icon.blue {
		background-color: #77b3d4;
		border-color: rgba(68, 108, 179, 0.3);
	}
	.callout-button-icon.darkBlue {
		background-color: #4f5d73;
		border-color: rgba(44, 62, 80, 0.9);
	}
	.callout-button-icon.green {
		background-color: #78c1ae;
		border-bottom-color: rgba(1, 152, 117, 0.2);
	}
	.callout-button-icon.red {
		background-color: #c75c5c;
		border-bottom-color: rgba(150, 40, 27, 0.5);
	}
	.callout-button-icon.sand {
		background-color: #dfe0d2;
		border-bottom-color: rgba(189, 195, 199, 0.7);
	}

.callout-button > h3 {
	margin: 0;
	color: #495259;
	font: lighter 18px 'Karla', sans-serif;
}

.callout-button > h4 {
	margin: 7px 0 0;
	color: #65710c;
	font: lighter 14px 'Karla', sans-serif;
}



/*
 * Builder section
 */
.builder-section {
	padding: 80px 0 90px;
	background-color: transparent;
}

.builder-section > h2 {
	margin: 0 auto 30px;
	color: #fff;
	font: bold 30px 'Karla', sans-serif;
	text-align: center;
}
	.builder-section > h2:last-child { margin-bottom: 0; }
	.builder-section > h2 > em { color: #2a5cdb; font-style: normal; }

.builder-section > h3 {
	max-width: 980px;
	margin: -10px auto 40px;
	color: rgba(255, 255, 255, 0.8);
	font: lighter 16px/26px 'Karla', sans-serif;
	text-align: center;
}
	.builder-section > h3:last-child { margin-bottom: 0; }

.builder-section.bg-white { background-color: #fff; }
	.builder-section.bg-white > h2 { color: #020020; }
	.builder-section.bg-white > h3 { color: #4c515d; }
.builder-section.bg-gray { background-color: #f7f8fa; }
	.builder-section.bg-gray > h2 { color: #020020; }
	.builder-section.bg-gray > h3 { color: #4c515d; }
.builder-section.bg-blue { background-color: #2a5cdb; }
.builder-section.bg-darkblue { background-color: #2c3e50; }



/*
 *  video block
 */
.video-block-holder {
	max-width: 900px;
	margin: 0 auto;
	padding: 14px 10px 0;
}

.video-block-wistia-wrapper {
	width: 100%;
	display: inline-block;
	box-shadow: rgba(0, 0, 0, 0.341176) 0 2px 9px;
}



/*
 *  Try It Yourself section
 */
.try-it-yourself-section {
	margin: 0;
	padding: 30px 0 60px;
	border-top: 1px solid #ecf0f1;
}

.try-it-yourself-section > h2 {
	font-size: 29px;
	font-weight: lighter;
}

.try-it-yourself-section > form {
	margin: 0;
}

.enter-url-section-outer {
	max-width: 650px;
	border-radius: 6px;
	margin: 40px 10px 0;
	background-color: #2C3E50;
	box-shadow: rgba(0, 0, 0, 0.341176) 0px 2px 4px 0px;
}

.enter-url-section-inner {
	width: 100%;
	display: inline-block;
	padding: 19px 35px;
	box-sizing: border-box;
}

.enter-url-section-inner-left {
	width: 400px;
	float: left;
}

.enter-url-section-enter-area {
	background-color: #fff;
	box-shadow: rgba(0, 0, 0, 0.341176) 0px 2px 1px 0px;
	border-radius: 4px;
	height: 45px;
	width: 100%;
	padding: 7px 14px;
	resize: none;
	border: none;
	overflow: hidden;
	font-size: 14px;
	color: #6C7A89;
	font-family: 'Karla', sans-serif;
	font-weight: lighter;
	outline: none;
}

.enter-url-section-inner-right {
	width: 150px;
	float: right;
}

.enter-url-section-submit-button {
	width: 100%;
	float: right;
}



/*
 * Explainer Video section
 */
.explainer-video-section {
	padding: 0 30px;
}

.explainer-video-section > h2 {
	margin: 0 auto;
	padding-top: 44px;
	padding-bottom: 20px;
	font-weight: lighter;
}

.explainer-video-section > h3 {
	clear: left;
	font-size: 18px;
}

.explainer-video-holder {
	max-width: 510px;
	margin: 0 auto;
	padding: 14px 10px 0;
}

.explainer-video-wistia-wrapper {
	width: 100%;
	display: inline-block;
	box-shadow: rgba(0, 0, 0, 0.341176) 0 2px 9px;
}



/*
 * See How It Works section
 */
.see-how-it-works-section > h3 {
	max-width: 1100px;
}

.use-cases-holder {
	position: relative;
}

.use-case-callouts .callouts > li {
	float: left;
	width: 33.3%;
}

.use-case-callouts .callout-button {
	height: 80px;
	margin-left: 4px;
	margin-right: 4px;
	padding-top: 35px;
	padding-bottom: 20px;
	background-color: rgba(236, 240, 241, 0.1);
	box-shadow: rgba(0, 0, 0, 0.341176) 0 2px 5px;
	cursor: pointer;
}
	.use-case-callouts .callout-button.active,
	.use-case-callouts .callout-button:hover { background-color: #fff; }

.use-case-callouts .callout-button > h3 {
	position: absolute;
	top: 50%;
	transform: translateY(-20%);
	left: 0;
	right: 0;
	font-size: 16px;
}
	.use-case-callouts .callout-button > h3 > span {
		display: block;
		font-size: 13px;
		margin-top: 2px;
	}

.use-case-callouts .callout-button-icon {
	width: 40px;
	height: 37px;
	transform: translate(-50%, -65px);
}

.use-case-callouts .callout-button.active {
	top: -10px;
	height: 100px;
}
	.use-case-callouts .callout-button.active > h3 {
		font-size: 20px;
		font-weight: bold;
	}
	.use-case-callouts .callout-button.active .callout-button-icon {
		width: 50px;
		height: 47px;
		transform: translate(-50%, -70px);
	}

.use-cases {
	clear: left;
	margin: 0;
	padding: 15px 0 0;
	list-style-type: none;
	border-top: 1px solid rgba(79, 83, 98, 0.17);
}

	.use-cases > li {
		display: block;
		padding: 24px 26px;
		margin:  15px 0 5px;
		background-color: #fff;
		border: 1px solid #dadfe1;
		border-radius: 6px;
		box-shadow: rgba(0, 0, 0, 0.2) 0 1px 1px;
		cursor: pointer;
	}
		.use-cases > li:hover { background-color: #f7f8fa; }
		.use-cases > li.active {
			background-color: rgba(44, 62, 80, 0.901961);
			border-color: rgba(44, 62, 80, 0.901961);
		}

	.use-cases > li > h3 {
		margin: 0;
		color: #495259;
		font: lighter 20px 'Karla', sans-serif;
	}
		.use-cases > li.active > h3 { color: #fff; font-size: 20px; }

	.use-cases > li > h4 {
		margin: 14px 0 0;
		color: #65710c;
		font: lighter 14px/19px 'Karla', sans-serif;
	}
		.use-cases > li > h4 > em {
			color: #446cb3;
			font-style: normal;
		}
		.use-cases > li.active > h4, .use-cases > li.active > h4 * { color: rgba(255, 255, 255, 0.7); }

.btn-use-cases {
	display: block;
	margin-top: 30px;
	border: 1px solid #4183d7;
	border-radius: 6px;
	color: #4183D7;
	font: lighter 15px/56px 'Karla', sans-serif;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}
	.btn-use-cases:hover { opacity: 0.7; }

.browser {
	position: absolute;
	top: 0;
	left: 0;
	right: 50%;
	height: calc(100% + 50px);
	background-color: #fff;
	border-radius: 0 8px 8px 0;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

.bot-features-holder {
	position: relative;
	margin-bottom: 50px;
}

.browser-top {
	height: 40px;
	padding: 5px 0;
	background-color: rgba(227, 229, 233, .8);
	box-sizing: border-box;
}
	.browser-url {
		position: absolute;
		top: 9px;
		left: -11px;
		right: 50px;
		background-color: #fff;
		border-radius: 3px;
		color: #020020;
		font: lighter 13px/22px 'Karla', sans-serif;
	}
.browser-content {
	position: absolute;
	top: 60px;
	bottom: 0;
	right: 20px;
	width: 100%;
	background-repeat: no-repeat;
	background-position: 100% 0;
	background-size: 850px;
}

#featuresBot {
	position: absolute;
	bottom: -25px;
	right: calc(50% + 25px);
	z-index: 5;
}



/*
 * Engage Visitors section
 */
.engage-section .callout-button > h4 {
	margin-bottom: 20px;
}

.engage-section .callout-button-icon > img {
	width: 35px;
}



/*
 * Integrations section
 */
.integrations-holder {
	max-width: 1056px;
	margin: 0 auto;
	padding: 0 25px;
}

#integrations {
	list-style-type: none;
}

#integrations li {
	display: inline-block;
}

.integration {
	min-width: 160px;
	height: 135px;
	margin: 2px 7px 7px;
	background-color: #fff;
	border-radius: 6px;
	box-sizing: border-box;
	box-shadow: rgba(0, 0, 0, 0.341176) 0 2px 7px;
	text-align: center;
	overflow: hidden;
}

.integration > img {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	width: 73px;
}



/*
 * Numbers Don't Lie section
 */
.stats {
	max-width: 940px;
	margin: 45px auto 0;
	overflow: auto;
}

.stat-box {
	float: left;
	width: calc(50% - 60px);
	min-height: 120px;
	margin: 20px 30px 10px;
	padding: 13px 18px;
	border-radius: 6px;
	box-shadow: rgba(0, 0, 0, 0.341176) 0 2px 9px;
	box-sizing: border-box;
}

.stat-left {
	float: left;
	width: 124px;
	padding: 22px 0;
	background-color: rgb(7, 58, 90);
	border-radius: 4px;
	box-shadow: rgba(0, 0, 0, 0.341176) 0 2px 4px;
	text-align: center;
}

.stat-left h3 {
	display: inline-block;
	margin: 0 auto;
	padding-left: 30px;
	background: url(/assets/img/greenup.png) no-repeat -4px 50%;
	background-size: 40px;
	color: #26a65b;
	font: bold 27px/1em 'Karla', sans-serif;
	text-align: left;
}

.stat-left h4 {
	margin: 8px 0 0;
	color: rgba(255, 255, 255, .6);
	font: lighter 13px/1em 'Karla', sans-serif;
}

.stat-right {
	margin-left: 160px;
}

.stat-right h2 {
	margin: 0;
	color: #020020;
	font: lighter 30px/1em 'Karla', sans-serif;
}

.stat-right p {
	margin: 8px 0;
	color: rgb(76, 81, 93);
	font: lighter 13px/15px 'Karla', sans-serif;
}

.stat-right .stat-more {
	display: block;
	color: #3e94e0;
	font: lighter 11px/13px 'Karla', sans-serif;
	text-decoration: none;
}



/*
 * Testimonials section
 */
.written-testimonial-content-holder {
	max-width: 1000px;
	margin: 64px auto 0;
	overflow: auto;
}

.written-testimonial-content-holder-left  {
	position: relative;
	width: 50%;
	float: left;
}

.written-testimonial-content-picture {
	position: absolute;
	height: 100%;
}

.written-testimonial-content-picture img {
	position: absolute;
	bottom: 0;
	height: 114px;
	width: 114px;
}

.written-testimonial-content-bubble {
	margin: 0 24px 0 131px;
	padding: 17px 20px;
	background-color: #2a5cdb;
	border-radius: 17px 17px 17px 0;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
	text-align: left;
}

.written-testimonial-content-text {
	color: rgba(255, 255, 255, 1);
	font: lighter 17px/27px 'Karla', sans-serif;
}

.written-testimonial-content-source {
	margin: 24px 24px 10px 131px;
	color: rgb(118, 125, 130);
	font: lighter 15px 'Karla', sans-serif;
	text-align: center;
}

.written-testimonial-content-holder-right  {
	position: relative;
	width: 50%;
	margin-top: 40px;
	float: right;
}

.written-testimonial-content-holder-right .written-testimonial-content-picture,
.written-testimonial-content-holder-right .written-testimonial-content-picture img {
	right: 0;
}

.written-testimonial-content-holder-right .written-testimonial-content-bubble {
	margin-left: 24px;
	margin-right: 131px;
	border-radius: 17px 17px 0 17px;
}

.written-testimonial-content-holder-right .written-testimonial-content-source {
	margin-left: 24px;
	margin-right: 131px;
}



/*
 * Call To Action section
 */
.call-to-action-section {
	padding: 60px 20px;
}

.call-to-action-section > h3 {
	max-width: 600px;
}

.call-to-action-form,
.call-to-action-holder {
	max-width: 430px;
	margin: 40px auto 0;
	text-align: center;
}



/*
 * Growth Hacks section
 */
.growth-hacks-section {
	padding: 50px 0;
}

.growth-hacks-section > h3 {
	max-width: 620px;
}



/*
 * Case Studies section
 */
.case-studies {
	margin: 0 auto;
	max-width: 980px;
	text-align: center;
}

.case-study {
	display: inline-block;
	width: 300px;
	margin: 0 10px 30px;
	padding: 25px;
	background-color: #fff;
	border-radius: 4px;
	box-shadow: rgba(0, 0, 0, 0.317647) 0 1px 3px;
	box-sizing: border-box;
	text-align: center;
}

	.case-study > img {
		width: 300px;
		margin: -25px -25px 0;
	}
	.case-study > h3 {
		margin: 20px 0;
		color: #020020;
		font: bold 20px 'Karla', sans-serif;
	}
	.case-study > p {
		padding: 0 25px;
		color: #4c515d;
		font: lighter 15px/21px 'Karla', sans-serif;
		text-align: left;
	}



/*
 * Use Cases section
 */
.use-cases-explainer-section {
	padding-bottom: 70px;
}

.use-cases-explainer-selector {
	max-width: 970px;
	margin: 0 auto 40px;
	padding: 0;
	list-style-type: none;
	overflow: auto;
}
.use-cases-explainer-selector > li {
	float: left;
	width: 33.3%;
	padding: 0 7px;
	box-sizing: border-box;
}

.use-cases-explainer-selector > li > a {
	display: block;
	height: 70px;
	background-color: rgba(236, 240, 241, 0.3);
	border: 1px solid #d0d0d0;
	border-radius: 6px;
	color: #fff;
	font: lighter 19px 'Karla', sans-serif;
	text-align: center;
	text-decoration: none;
}
.use-cases-explainer-selector > li > a span {
	position: relative;
	display: block;
	top: 50%;
	transform: translateY(-50%);
}

.use-cases-explainer-selector > li.active > a {
	background-color: #fff;
	box-shadow: rgba(0, 0, 0, 0.298039) 0 2px 2px;
	color: #495259;
	font-weight: bold;
}

.use-case-section > h2 { font-size: 24px; }

.use-case-bot-demo .bot-demo {
	position: relative;
	width: 320px;
	min-height: 360px;
}

.use-case-bot-demo .bot-demo:not(.triggered) .gobot-toggle { display: none; }
.use-case-bot-demo .bot-demo.triggered > img { display: none; }



/*
 * Endless Possibilities section
 */
.endless-possibilities-section {
	padding: 50px 0;
}

.endless-possibilities-section > h2 {
	font-size: 27px;
	font-weight: lighter;
}



/*
 * Free Account section
 */
.free-account-section {
	text-align: center;
}

.free-account-section.builder-section > h2 {
	color: #444;
	font-size: 25px;
	font-weight: lighter;
	line-height: 26px;
}
	.free-account-section > h2 > img { vertical-align: middle; }



/*
 * Pricing header
 */
.pricing-header {
	padding: 50px 30px 45px;
}
.pricing-header > h2 {
	margin-bottom: 20px;
	font-size: 29px;
	font-weight: lighter;
}
.pricing-header > h3 { max-width: none; }

.pricing-toggle {
	width: 274px;
	margin: 40px auto 0;
	padding: 0;
	list-style-type: none;
	background-color: #fff;
	border: 2px solid #fff;
	border-radius: 11px;
	box-shadow: rgba(0, 0, 0, 0.198039) 0 4px 60px;
	box-sizing: border-box;
	overflow: auto;
}
	.pricing-toggle > li {
		float: left;
		width: 50%;
		height: 44px;
		box-sizing: border-box;
		color: #2c3e50;
		font: lighter 16px/44px 'Karla', sans-serif;
		text-align: center;
		cursor: pointer;
	}
	.pricing-toggle > li span { font-size: 12px; }
	.pricing-toggle > li.active {
		background-color: #2c3e50;
		color: #fff;
	}
	.pricing-toggle > li:hover { opacity: 0.7; }


/*
 * Pricing section
 */
.pricing-tables-section.builder-section {
	position: relative;
	padding: 0 30px;
}
	.pricing-tables-section:before {
		content: '';
		position: absolute;
		top: 100px;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
	}

.pricing-tables-holder {
	position: relative;
	margin: 0 auto;
	max-width: 1090px;
	overflow: auto;
}

.pricing-plan-holder {
	margin: 0 3px 25px;
	border-radius: 4px;
	box-shadow: rgba(0, 0, 0, 0.317647) 0 1px 3px;
	overflow: hidden;
}
	.pricing-plan-holder > h3 {
		margin: 0;
		background-color: #22313f;
		color: #fff;
		font: lighter 13px/33px 'Karla', sans-serif;
		text-align: center;
	}

.pricing-plan {
	width: 100%;
	border-collapse: collapse;
	background-color: #fff;
	color: #4c515d;
	font: lighter 14px 'Karla', sans-serif;
	text-align: center;
}
	.pricing-plan thead th {
		background-color: #f7f8fa;
		color: #020020;
		font-weight: lighter;
		line-height: 30px;
	}
	.pricing-plan tbody td { height: 30px; }
		.pricing-plan tbody tr:last-child td { padding-bottom: 25px; }
	.pricing-plan .price {
		height: 70px;
		color: #2a5cdb;
		font: 28px 'Karla', sans-serif;
	}
		.pricing-plan .price .amt { font-size: 43px; }
		.pricing-plan .price .amt:before {
			content: '$';
			font-size: 16px;
			font-weight: lighter;
			position: relative;
			top: -20px;
			left: -5px;
		}
		.pricing-plan .price .amt:after {
			content: '/mo';
			font-size: 16px;
			font-weight: lighter;
			position: relative;
			left: 10px;
		}
			.price-monthly .pricing-plan .price .amt:after { content: '/mo'; }
			.price-annual .pricing-plan .price .amt:after { content: '/yr'; }
	.pricing-plan td.separator { position: relative; }
		.pricing-plan td.separator:before {
			content: '';
			position: absolute;
			width: 100%;
			left: 0;
			border-top: 1px solid #eee;
		}
	.pricing-plan td.chats {
		height: 40px;
		color: #4c515d;
		font-size: 18px;
	}
	.pricing-plan td.action {
		height: 45px;
	}
		.pricing-plan td.action .btn {
			height: 32px;
			line-height: 34px;
			font-weight: normal;
		}
	.pricing-plan td.included {
		color: #2a5cdb;
		text-transform: uppercase;
	}

.plan-toggle {
	margin: 0 20px;
	padding: 0;
	list-style-type: none;
	border: 1px solid #ecf0f1;
	border-radius: 4px;
	box-shadow: rgba(0, 0, 0, 0.23) 0 1px 1px;
	box-sizing: border-box;
	overflow: auto;
}
	.plan-toggle > li {
		float: left;
		width: 33.3%;
		height: 28px;
		box-sizing: border-box;
		color: #4c515d;
		font: lighter 15px/28px 'Karla', sans-serif;
		text-align: center;
		cursor: pointer;
	}
	.plan-toggle > li span { font-size: 12px; }
	.plan-toggle > li.active,
	.plan-toggle > li:hover { background-color: #ecf0f1; }

select.plan-mobile {
	width: calc(100% - 40px);
	height: 26px;
	margin: 0 20px;
	font: 15px 'Karla', sans-serif;
	text-align: center;
	text-align-last: center;
}
	select.plan-mobile option {
		font: 15px 'Karla', sans-serif;
	}


/*
 * FAQ section
 */
.faq-section {
	overflow: auto;
}

.faq-list {
	max-width: 1070px;
	margin: 50px auto 0;
	padding: 0;
	list-style-type: none;
}

.faq-list > .faq {
	box-sizing: border-box;
	padding: 0 25px 50px;
}

.faq-list > .faq > h3 {
	margin: 0 0 20px;
	color: #020020;
	font: lighter 24px 'Karla', sans-serif;
	text-align: center;
}

.faq-list > .faq > p {
	margin: 0;
	color: #4c515d;
	font: lighter 16px/26px 'Karla', sans-serif;
}


/*
 * On My Site
 */
.on-my-site {
	box-sizing: border-box;
	padding: 60px 0 0;
	background-color: #fff;
	background-image: none;
}
.on-my-site .demo-site {
	position: absolute;
	top: 60px;
	bottom: 0;
	left: 0;
	width: 100%;
}
	.on-my-site .demo-site > iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-style: none;
	}
.on-my-site .gobot-wrapper {
	position: absolute;
	bottom: 50px;
	right: 30px;
}
	.on-my-site .gobot-wrapper.left {
		left: 30px;
		right: initial;
	}


/*
 * Home Macbook Demo
 */
.top-macbook-demo {
	position: absolute;
	height: 672px;
	width: 100%;
	top: 20px;
	left: -5px;
	transition: left 1s;
}

.inside-macbook {
	position: absolute;
	top: 155px;
	left: 0;
	height: 460px;
	width: 87.5%;
	overflow: hidden;
	background-color: rgba(34, 49, 63, .71);
	transition: left 1s;
}

.top-macbook-section-holder{
	width: 90%;
	margin-left: -150px;
}

.top-macbook-section-holder-right {
	width: 66%;
	float: right;
	margin-left: 310px;
}

.top-macbook-lines{
	height: 17px;
	width: 82%;
	background-color: rgba(255, 255, 255, .2);
	border-radius: 5px;
	margin-top: 18px;
}

.inside-macbook-bottom-1 {
	height: 218px;
	width: 250px;
	background-color: #fff;
	opacity: .15;
	margin-top: 30px;
	border-radius: 6px;
	display: inline-block;
	position: absolute;
}

.inside-macbook-bottom-2 {
	height: 218px;
	width: 250px;
	background-color: #fff;
	opacity: .15;
	margin-top: 30px;
	margin-left: 280px;
	border-radius: 6px;
	display: inline-block;
	position: absolute;
}

.shopping-item-macbook-image-holder {
	height: 180px;
	width: 80%;
	margin: auto;
	margin-top: 19px;
}

.shopping-item-macbook-image-holder-top {
	height: 130px;
	width: 80%;
	margin: auto;
	margin-top: 0px;
}

.shopping-item-macbook-image {
	height: 135px;
	width: 115px;
	margin: auto;
}

.shopping-item-macbook-image-holder-bottom {
	height: 50px;
	width: 80%;
	margin: auto;
}

.shopping-image-macbook-purchase-button {
	height: 33px;
	width: 120px;
	background-color: #446CB3;
	border-radius: 6px;
	margin-top: 16px;
}

.shopping-image-macbook-purchase-button-text {
	font-size: 16px;
	color: rgba(255, 255, 255, .9);
	font-family: 'Karla', sans-serif;
	line-height: 26px;
	margin-top: 4px;
	display: inline-block;
}