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

#home {

	#hero {
		overflow: hidden;
		background: #4B4848;
		background-size: cover;
		background-image: url("http://farm9.staticflickr.com/8222/8254861601_1fbf969a14_b.jpg");


		/* These are some ready-to-use backgrounds you can test out by uncommenting them */
		
		/*background-image: url("../../images/bg2.png");*/
		/*background-image: url("../../images/bg3.png");*/
		/*background-image: url("http://25.media.tumblr.com/665f306a0a5a5eae6e0c91f33ce74695/tumblr_mzzqv2P7MY1st5lhmo1_1280.jpg");*/
		/*background: -webkit-radial-gradient(closest-corner, rgba(16, 47, 70, 0) 60%, rgba(16, 47, 70, 0.26)), -webkit-linear-gradient(108deg, #5E8199, #153752 90%);*/

		background-position: center 16%;
		height: 580px;
		position: relative;
		top: -60px;
		padding-top: 150px;
		box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);

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

		@media (max-width: 767px) {
			height: 550px;
		}

		&:before {
			position: absolute;
			content: '';
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			background: -webkit-linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0.1) 26%, rgba(0, 0, 0, 0.35) 71%, rgba(0, 0, 0, 0.5) 100%);
			background: -moz-linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0.1) 26%, rgba(0, 0, 0, 0.35) 71%, rgba(0, 0, 0, 0.5) 100%);
  			background: -o-linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0.1) 26%, rgba(0, 0, 0, 0.35) 71%, rgba(0, 0, 0, 0.5) 100%);
  			background: linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0.1) 26%, rgba(0, 0, 0, 0.35) 71%, rgba(0, 0, 0, 0.5) 100%);
		}

		&:after {
			position: absolute;
			content: '';
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			/*background: rgba(6, 13, 32, 0.15);*/
			/*background: rgba(13, 37, 102, 0.24);*/
			background: rgba(32, 54, 114, 0.29);
		}
		
		.container {
			position: relative;
			z-index: 33;
		}

		h1.hero-text {
			font-family: $lato;
			line-height: 52px;
			text-align: left;
			font-size: 37px;
			text-transform: uppercase;
			font-weight: 300;
			letter-spacing: .3px;
			color: #FFF;
			text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);

			-webkit-animation-duration: 1s;

			@media (max-width: 767px) {
				font-size: 25px;
				line-height: 38px;
				margin-top: 0;
				text-align: center;
			}
		}

		.sub-text {
			-webkit-font-smoothing: antialiased;
			width: 50%;
			margin-top: 25px;
			font-family: $lato;
			color: #fff;
			font-weight: 400;
			font-size: 18px;
			line-height: 28px;
			text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);

			-webkit-animation-duration: 1s;

			@media (max-width: 991px) {
				width: 70%;
			}

			@media (max-width: 767px) {
				font-size: 15px;
				width: 100%;
				text-align: center;
			}
		}

		.cta {
			@include animationDelay(0.6s);
			margin-top: 60px;

			@media (max-width: 767px) {
				text-align: center;
			}

			a {
				margin-right: 20px;
				padding: 15px 31px;

				@media (max-width: 767px) {
					font-size: 14px;
					padding: 12px 25px;
					margin: 0px 15px 15px 0px;
				}
			}
		}

		.img {
			position: absolute;
			top: 15px;
			left: 625px;
			width: 570px;
			height: 333px;
			background-image: url("../../images/static-hero.png");
			background-repeat: no-repeat;

			@media(max-width: 991px) {
				display: none;
			}
		}
	}


	#features {
		/* mixin found in partials/snippets */
		@include features-section;

		margin-top: 20px;

		@media(max-width: 767px) {
			margin-top: 0;
		}
	}

	#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: 110px;
		padding-top: 45px;
		padding-bottom: 70px;
		
		.header {
			text-align: center;
			font-family: $lato;

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

			h3 {
				font-size: 29px;
				color: #fff;
				line-height: 25px;
				font-weight: 400;
				text-shadow: 0 1px 2px rgba(0,0,0,0.2);

				@media(max-width: 767px) {
					font-size: 24px;
					line-height: 29px;
				}
			}
			p {
				font-size: 16px;
				margin-top: 15px;
				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;
				}
			}
		}
	}

	#slider {
		@include slider-section;
	}

	#testimonials {
		margin-top: 90px;
		-webkit-font-smoothing: antialiased;

		.header {
			text-align: center;

			h3 {
				font-family: $lato;
				font-size: 23px;
				color: #656565;
				line-height: 25px;
				margin-bottom: 45px;
			}
		}
		.testimonial {
			width: 90%;

			@media (max-width: 767px) {
				float: none !important;
				margin: 0 auto;
				margin-bottom: 45px;
			}

			.quote {			
				font-size: 13px;
				color: #3D3D3D;
				line-height: 24px;
				border: 1px solid #E2E2E2;
				padding: 12px 22px;
				border-radius: 6px;
				width: 90%;
				position: relative;

				@media (max-width: 767px) {
					margin: 0 auto;
				}

				.arrow-down {
					position: absolute;
					bottom: 3px;
					left: 30px;

					.arrow, .arrow-border {
						border-color: #fff transparent transparent;
						border-style: solid;
						border-width: 11px;
						cursor: pointer;
						position: absolute;
						top: 3px;
						z-index: 1002;
					}
					.arrow-border {
						border-color: #E2E2E2 transparent transparent;
						border-width: 12px;
						top: 3px;
						z-index: 1001;
						left: -1px;
					}
				}
			}
			.author {
				margin-top: 40px;
				margin-left: 10px;

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

				.pic {
					width: 71px;
					height: 71px;
					border-radius: 50px;
					float: left;
					position: relative;
					top: -12px;
					margin-right: 18px;
					border: 1px solid #ccc;
				}
				.name {
					color: #3C92C5;
					line-height: 23px;
					font-weight: 500;
				}
				.company {
					font-size: 14px;
					color: #909090;
					line-height: 23px;
					font-weight: 400;
				}
			}
		}
	}

	#cta {
		text-align: center;
		margin-top: 120px;

		p {
			font-family: $lato;
			font-size: 17px;
			color: #7A7D81;
			letter-spacing: 0.1px;
		}

		a {
			display: inline-block;
			margin-top: 25px;
			background: #6CAAE4;
			color: #FFF;
			padding: 23px 40px;
			font-size: 17px;
			letter-spacing: 0.7px;
			font-weight: 300;
			font-family: Lato;
			text-transform: uppercase;
			border-radius: 5px;

			@include transition(all .2s linear);

			&:hover {
				text-decoration: none;
				background: #3FD8DF;
			}
		}
	}

	#clients {
		background: #5E7A9B;
		background: radial-gradient(#36414E, #253241);
		margin-top: 120px;
		padding: 65px 0 80px;

		text-align: center;

		h3 {
			color: #FFF;
			margin-top: 0;
			font-family: $lato;
			font-weight: 300;
			font-size: 35px;
			letter-spacing: .3px;
			text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
		}

		p {
			font-size: 16px;
			color: #f8f8f8;
			font-family: $lato;
			margin-top: 17px;
			font-weight: 300;
			line-height: 25px;
			text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
		}

		.logos {
			margin-top: 35px;

			img {
				margin: 0 16px;

				@media(max-width: 767px) {
					margin: 0 auto;
					display: block;
					margin-bottom: 15px;
				}
			}
		}
	}
}