@import'bourbon/bourbon';

$yellow :#FFDB56;
$helvetica : 'Helvetica Neue', 'HelveticaNeue', 'Helvetica-Neue', Helvetica, Arial, sans-serif;
$text-color : #464646;


@mixin center {
	position: absolute;
	left:50%;
	top:50%;
	@include transform(translate(-50%,-50%));
}

@mixin breakpoint($point) {
  @if $point == small {
    @media (max-width: 800px) { @content; }
  }
  @else if $point == medium {
    @media (max-width: 1450px) { @content; }
  }@else if $point == xsmall {
    @media (max-width: 600px) { @content; }
  }
  
}


html,body {
	height:100%;
	width:100%;
	-webkit-font-smoothing:antialiased;
	font-family: $helvetica;
}

.yellow {
	background-color: $yellow;
}

.btn {
	width:200px;
	height: 55px;
	border: 2px solid white;
	color:white;
	@include transition(all .25s ease);
	cursor:pointer;
	line-height: 220%;
	&:hover {
		background-color: white;
		color:$yellow;

	}

}

.hero {
	width:100%;
	height:80%;
	min-height: 500px;
	
	position: relative;
	.container {
		@include center;
		width:80%;
		height:80%;
		z-index:999;

	}

	.tagline {
		font-family: $helvetica;
		font-weight: bold;
		letter-spacing: -3px;
		width:40%;
		padding:8% 0 0 0;
		float:left;
		
		color:white;
		p {
			font-size: 4rem;
			line-height: 4rem;
			margin-top: 10px;
			@include breakpoint(medium) {
				font-size: 2.8rem;
				line-height: 2.8rem;
				letter-spacing: -2px;
				
			}
			@include breakpoint(xsmall) {
				font-size: 2rem;
			}
		}
		h1 {
			font-weight: bold;
			font-size: 7rem;
			letter-spacing: -0.25rem;
			line-height: 7rem;
			@include breakpoint(medium) {
				font-size: 5rem;
				line-height: 5rem;
			}
		}
		@include breakpoint(medium) {
			padding:9% 0 0 0;
		}
		@include breakpoint(small) {
			float:none;
			width:100%;
			margin-bottom: 70px;
		}
	}
	.downloads {
		float:right;
		width:40%;
		color:white;
		font-family: $helvetica;
		font-weight: bold;
		letter-spacing: -1px;
		font-size: 1.5rem;
		height:100%;
		position: relative;


		.btn-container {
			@include center;
			width:100%;

			.btn {
				float:right;
				text-align: center;
				margin-left: 20px;
				@include breakpoint(small) {
					float:left;
					margin: 20px 20px 0 0;
				}
				
			}
		}
		@include breakpoint(small) {
			float:none;
			width:100%;
			height:auto;
		}
		
	}
}
.content {
	width:80%;
	height:auto;
	margin:0 auto;
	color:$text-color;
	letter-spacing: -1px;
	padding: 75px 0 75px 0;

	h2 {
		font-size: 3rem;
		font-weight: bold;
		margin:0 0 10px 0;
	}
	p {
		font-size: 1.4rem;
		font-weight: normal;
	}
	code {
		display: block;
		min-height: 100px;
		width:100%;
		margin: 20px 0 20px 0;
		padding:10px 0;
	}


}

code {
	background-color: #464646;
	color:$yellow;
	font-size: 1rem;
	@include breakpoint(small) {
		font-size: .8rem;
	}
	@include breakpoint(xsmall) {
		font-size: .5rem;
	}
}

#code-header {
	margin-bottom: 0px;
}
#code-footer {
	margin-top: 0px;
}

.code-comment {
	font-style: italic;
	color:gray;
}

hr {
	margin: 50px 0;
}

.download {
	position: relative;
	width:100%;
	height:250px;
	background-color: $yellow;
	margin-top: 100px;
	color:white;
	font-weight: bold;
	letter-spacing: -1px;
	font-size: 1.5rem;

	h1 {
		font-weight: bold;
		font-size: 7rem;
		letter-spacing: -0.25rem;
		line-height: 7rem;
		@include breakpoint(medium) {
			font-size: 5rem;
			line-height: 5rem;
		}
	}
	.btn {
		text-align: center;
	}
	> div {
		@include center;
		width:80%;
		
		
		> * {
			float:left;


		}
		.btn-container {
				width:500px;
				float:right;
				margin-top: 10px;
				.btn {
					float:right;
					margin-left: 20px;
				}
			}
	} 
	@include breakpoint(small) {
		display: none;
	}
}

footer {
	width:100%;
	height:400px;
	background-color: $text-color;
	position: relative;

	.info {
		@include center;
		text-align: center;
		color:white;
		font-size: 1.25rem;
		letter-spacing: -1px;
		a {
			color: white;
		}
	}
}


