@import "../snippets/features";
@import "../snippets/slider";

#home4 {
	#hero {
		background: #4B4848;
		background-size: cover;
		height: 583px;
		position: relative;
		top: -60px;
		overflow: hidden;
		background-image: url("../../images/bg.png");
		box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, 0.35);

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

		@media (min-width: 992px) {
			padding-top: 105px;
		}

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

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

			@media (max-width: 767px) {
				font-size: 27px;
			}
		}
		.cta {
			text-align: center;
			margin-top: 40px;
			a {
				margin: 0px 20px;

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

				&.button {
					border-radius: 50px;
					padding: 12px 36px;
					@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: 16px;

					@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: 60px;

		@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: 400;
				color: #444;
			}
			p {
				margin-top: 20px;
				color: #666;
				line-height: 21px;
			}
			.button {
				margin-top: 10px;
				padding: 8px 26px;
				border-radius: 50px;
			}
		}
	}

	#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;
		}
	}
}