#home3 {

	.st-container {
		position: relative;
		overflow: hidden;

		&.nav-effect {
			.nav-menu {
				@include transform(translate3d(0, 0, 0));

				a {
					@include transform(translate3d(0, 0, 0));
				}
			}
			.st-pusher {
				@include transform(translate3d(-320px, 0, 0));
				box-shadow: 5px 0px 20px 0px rgba(0, 0, 0, 0.5);

				@media(max-width: 767px) {
					@include transform(translate3d(-220px, 0, 0));
				}
			}
		}
	}

	.st-pusher {
		position: relative;
		left: 0;
		z-index: 99;
		background: #fff;

		@include transitionPrefix(transform, 0.35s ease-out);
	}

	.nav-menu {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 1;
		width: 320px;
		height: 100%;
		background: #2a313a;
		padding-top: 30px;
		-webkit-font-smoothing: antialiased;

		@include transitionPrefix(transform, 0.35s ease-out);
		@include transform(translate3d(50%, 0, 0));

		@media(max-width: 767px) {
			width: 220px;
			position: absolute;
		}

		h3 {
			color: #fff;
			font-size: 26px;
			margin-left: 50px;
			margin-bottom: 30px;

			@media(max-width: 767px) {
				margin-left: 30px;
				font-size: 23px;
			}
		}

		a {
			display: block;
			padding: 5px 30px 5px 50px;
			margin-bottom: 10px;
			text-decoration: none;
			color: #fff;
			font-size: 17px;
			font-weight: 300;

			@include transition(all 0.15s linear);

			@media(max-width: 767px) {
				padding-left: 30px;
				font-size: 16px;
			}

			&:hover {
				color: #82C4F8;
			}
		}

		.social {
			margin-left: 45px;
			margin-top: 50px;

			@media(max-width: 767px) {
				margin-left: 30px;
			}

			a {
				padding: 0px;
				display: inline-block;
				margin-right: 22px;
				&:hover {
					i {
						color: #7EBDE7;
					}
				}

				i {
					font-size: 22px;
					color: #fff;

					@include transition(all 0.15s linear);
				}
			}
		}
	}

	.navbar {
		background: transparent !important;

		.navbar-header {
			float: left;
		}

		.sidebar-toggle {
			width: 30px;
			float: right;
			margin-top: 15px;
			cursor: pointer;
			
			.line {
				background: #fff;
				width: 100%;
				height: 3px;
				margin-bottom: 6px;
				border-radius: 1px;
			}
		}
	}

	#hero {
		background: #3D4046;
		height: 630px;
		position: relative;
		overflow: hidden;
		box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, 0.35);
		top: -60px;
		padding-top: 115px;

		@media (max-width: 991px) {
			padding-top: 100px;
			height: 550px;
		}

		#cover-image {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			padding-top: 105px;
			background-position: center center;
			background-size: cover;
			@include animationDelay(0.15s);
			background-image: url("../../images/bg4.png");

			@media (max-width: 991px) {
				padding-top: 65px;
			}

			&:after {
				content: '';
				position: absolute;
				display: block;
				height: 100%;
				left: 0;
				width: 100%;
				top: 0;
				background: rgba(24, 22, 19, 0.4);
			}

			&:before {
				position: absolute;
				top: 10%;
				bottom: 0;
				left: 0;
				right: 0;
				content: '';
				background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.25)));
				background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.25) 100%);
				background: -moz-linear-gradient(top, rgba(0,0,0,0),rgba(0,0,0,0.25));
				background: -o-linear-gradient(top, rgba(0,0,0,0),rgba(0,0,0,0.25));
				background: linear-gradient(top, rgba(0,0,0,0),rgba(0,0,0,0.25));
			}
		}

		.container {
			position: relative;
			z-index: 3;
			height: 100%;
		}

		h1.hero-text {
			text-align: center;
			font-family: $roboto;
			font-size: 35px;
			font-weight: 300;
			color: #fff;
			margin-top: 40px;
			text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.55);

			@include animationDelay(0.6s);

			@media (max-width: 991px) {
				font-size: 30px;
			}

			@media (max-width: 767px) {
				font-size: 27px;
			}
		}
		.cta {
			text-align: center;
			margin-top: 40px;
			
			@include animationDelay(0.6s);

			a {
				margin: 0px 20px;

				@media (max-width: 400px) {
					display: block;
				}

				&.button {
					border-radius: 50px;
					padding: 12px 36px;
					font-size: 18px;
					@include transition(all 0.3s linear);					

					@media (max-width: 767px) {
						font-size: 16px;
					}

					@media (max-width: 400px) {
						width: 65%;
						margin: 0 auto;
						margin-bottom: 25px;
					}

					&:hover {
						box-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px, inset rgba(255, 255, 255, 0.88) 0px 1px 3px -1px, rgba(0,0,0,0.3) 0 1px 2px, #69B1F3 0 1px 30px;
					}
				}
				&.demo {
					color: #fff;
					-webkit-font-smoothing: antialiased;
					font-size: 17px;
					text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);

					@media (max-width: 767px) {
						font-size: 16px;
					}
				}
			}
		}
		.screenshot {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			img {
				margin: 0 auto;
			}
		}
	}

	#tabs {
		-webkit-font-smoothing: antialiased;

		@media(max-width: 991px) {
			margin-bottom: 20px;
		}

		.header {
			text-align: center;
			h3 {
				font-size: 26px;
				color: #444;
				line-height: 25px;
				font-weight: 300;
			}
			p {
				font-size: 16px;
				font-weight: 400;
				color: #888;
			}
		}
		.tabs-wrapper {
			margin-top: 45px;			
			.nav-tabs {
				text-align: center;
				border-bottom: 2px solid #EDEDED;
				
				@media(max-width: 991px) {
					display: none;
				}

				li {
					float: none;
					display: inline-block;
					&.active {
						a {
							color: #2B69A2;
							font-weight: 400;
							border-bottom: 0px;
							&:after {
								content: '';
								position: absolute;
								width: 100%;
								height: auto;
								border-bottom: 2px solid #7BA3C9;
								left: 1px;
								bottom: -1px;
							}
						}
					}
					a {
						color: #888;
						font-weight: 400;
						border: 0px;
						padding: 10px 20px;
						font-size: 15px;
						@include transition(color 0.25s linear);
						&:hover {
							color: #2B69A2;
							background: none;							
						}
					}
				}
			}
			.tab-content {
				margin-top: 60px;
				.tab-pane {
					height: 325px;
					
					@media(max-width: 991px) {
						display: block !important;
						opacity: 1;
						filter: alpha(opacity=100);
						height: auto;
						text-align: center;
						margin-bottom: 70px;
					}

					.info {
						@media(max-width: 991px) {
							margin-bottom: 35px;
						}

						h4 {
							color: #3B88B6;
							font-weight: normal;
							font-size: 19px;
							line-height: 25px;
							margin-top: 35px;
						}
						p {
							color: #6C7279;
							font-size: 15px;
							margin-top: 20px;
							line-height: 24px;
							width: 83%;
							font-weight: normal;

							@media(max-width: 991px) {
								margin: 0 auto;
								width: 95%;
							}
						}
					}
					.image {
						img {
							display: inline-block;
							margin: 0 auto;
						}
					}
				}
			}
		}		
	}

	#pricing {
		-webkit-font-smoothing: antialiased;
		border-top: 1px solid #EAEAEA;
		border-bottom: 1px solid #EAEAEA;
		background: #5E7A9B;
		background: -webkit-linear-gradient(top, #355069 0, #5E7A9B 100%);
		background: -moz-linear-gradient(top, #355069 0, #5E7A9B 100%);
		background: -o-linear-gradient(top, #355069 0, #5E7A9B 100%);
		background: linear-gradient(top, #355069 0, #5E7A9B 100%);
		margin-top: 130px;
		padding-top: 40px;
		padding-bottom: 55px;

		@media (max-width: 991px) {
			margin-top: 40px;
		}
		
		.header {
			text-align: center;

			@media (max-width: 991px) {
				margin-bottom: 25px;
			}

			h3 {
				font-size: 27px;
				color: #fff;
				line-height: 25px;
				font-weight: 300;
				text-shadow: 0 1px 2px rgba(0,0,0,0.2);
			}
			p {
				font-size: 17px;
				color: #F0F0F0;
				font-weight: 400;
				line-height: 25px;
				text-shadow: 0 1px 2px rgba(0,0,0,0.2);
			}
		}
		.charts {
			margin-top: 35px;

			@media (max-width: 991px) {
				margin-top: 10px;
			}

			.chart {
				background-color: #fff;
				border: 1px solid #E6E6E6;
				border-radius: 5px;			
				box-shadow: 0px 0px 2px 0px rgba(181, 181, 181, 0.3);
				padding: 20px 40px;
				position: relative;
				text-align: center;
				width: 97%;

				min-height: 315px;
				position: relative;
				top: 37px;

				@media (max-width: 991px) {
					float: none !important;
					left: 0px !important;
					top: 0px !important;
					margin: 0 auto;
					width: 55%;
					margin-bottom: 25px !important;

					&.last {
						margin-bottom: 0px !important;
					}
				}

				@media (max-width: 600px) {
					width: 90% !important;
				}

				&.first {
					float: right;
					left: 12px;
				}

				&.last {
					left: -12px;
				}

				&.featured {
					min-height: 350px;
					top: 0px;
					margin: 0 auto;

					.popular {
						text-align: center;
						text-transform: uppercase;
						font-size: 16px;
						letter-spacing: 1px;
						color: #B1B1B1;
						font-weight: 400;
					}
					.quantity {
						margin-top: 15px;
					}
				}

				.quantity {
					text-align: center;
					.dollar {
						font-size: 19px;
						position: relative;
						top: -18px;
					}
					.price {
						font-size: 49px;
					}
					.period {
						font-size: 17px;
						position: relative;
						top: -8px;
						margin-left: 4px;
					}
				}
				.plan-name {
					text-align: center;
					font-size: 20px;
					font-weight: 400;
					color: #777;
					border-bottom: 1px solid #d5d5d5;
					padding-bottom: 15px;
					width: 90%;
					margin: 0 auto;
					margin-top: 8px;
				}
				.specs {
					margin-top: 20px;
					.spec {
						font-size: 15px;
						color: #474747;
						text-align: center;
						font-weight: 300;
						margin-bottom: 13px;

						.variable {
							color: #1FBEE7;
							font-weight: 400;
						}
					}
				}
				.btn-signup {
					margin-top: 20px;
					height: 38px;
				}
			}
		}
	}

	#second-option {
		margin-top: 85px;

		@media(max-width: 991px) {
			margin-top: 50px;
		}

		.row {
			@media(min-width: 992px) {
				margin-bottom: 50px;
			}
		}
		.feature {
			-webkit-font-smoothing: antialiased;

			@media(max-width: 991px) {
				text-align: center;
				margin-bottom: 35px;
			}

			img {
				max-width: 40px;
			}
			.icon {
				font-size: 32px;
				color: #4187ba;
			}
			strong {
				display: block;
				font-weight: 400;
				font-size: 17px;
				color: #354E75;
				margin-top: 15px;
			}
			p {
				font-weight: normal;
				font-size: 14px;
				color: #797979;
				margin-top: 10px;
				line-height: 24px;
			}
		}
	}

	#grid-first {
		margin-top: 70px;
		-webkit-font-smoothing: antialiased;
		.header {
			text-align: center;
			h3 {
				font-size: 26px;
				color: #555C68;
				line-height: 25px;
				font-weight: 300;
			}
			p {
				font-size: 16px;
				font-weight: 400;
				color: #888;
			}
		}
		.sections {
			margin-top: 45px;
			.section {
				text-align: center;

				@media(max-width: 991px) {
					margin-bottom: 40px;
				}

				.pic {
					display: inline-block;
					padding: 15px;
					background: #f5f5f5;
					box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.45), inset 0px 0px 1px 1px #fff;
				}
				.info {
					margin-top: 25px;
					text-align: center;

					@media(min-width: 992px) {
						margin-left: 45px;
						width: 80%;
						text-align: left;
					}

					strong {
						font-weight: 500;
						font-size: 18px;
						color: #555;
					}
					p {
						color: #666;
						margin-top: 15px;
						line-height: 22px;
					}
				}
			}
		}
	}

	#mobile {
		-webkit-font-smoothing: antialiased;
		background: #F7F8FB;
		border: 1px solid #EAEDF7;
		box-shadow: inset rgba(100, 100, 100, 0.25) 0 1px 1px;
		margin-top: 70px;

		@media(min-width: 992px) {
			.container {
				width: 870px;
			}
		}		

		.device {
			margin: -30px 0px 0px 0px;
			position: relative;
			top: 2px;
		}
		.info {
			margin-top: 50px;
			
			@media (max-width: 767px) {
				margin: 35px;
				text-align: center;
			}

			h3 {
				font-weight: 300;
				color: #616974;
				font-size: 28px;
			}
			p {
				margin-top: 20px;
				color: #777;
				line-height: 21px;
			}
			.app-store {
				margin-top: 18px;
				border: none;
				display: inline-block;

				img {
					max-width: 135px;
				}
			}
		}
	}

	#cta {
		margin-top: 100px;
		-webkit-font-smoothing: antialiased;

		@media (max-width: 991px) {
			margin-top: 65px;
		}

		.form-wrapper {
			background: #F7F8FB;
			border: 1px solid #EAEDF7;
			border-radius: 8px;
			box-shadow: inset rgba(100, 100, 100, 0.25) 0 1px 1px;
			padding: 20px 30px 30px 30px;
			margin: 0 auto;
		}
		h4 {
			font-size: 21px;
			color: #5F6E7C;
			font-weight: 400;
			text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
		}
		form {
			margin-top: 30px;

			.form-group {
				margin-right: 25px;

				@media (max-width: 991px) {
					margin-right: 20px;
				}

				.form-control {
					width: 195px;

					@media (max-width: 767px) {
						width: 100%;
					}
				}
			}
			.button {
				margin-left: 25px;

				@media (max-width: 991px) {
					margin-top: 25px;
					margin-left: 0px;
				}
			}
		}
	}

	#demo {
		.modal-dialog {
			padding-top: 100px;
			width: 650px;
		}
		.modal-body {
			padding: 0px;
		}
	}
}