body
{
	font: "Helvetica", "Verdana", "Arial",  sans-serif;
	background: #000;
	margin: 0;
    padding: 0;
}

div#banner {
	width: 600px;
	height: 250px;
	position: fixed;
	top: 50px;
	left: 50%;
	margin-left: -300px;
	background: url(../images/placeholder-banner.png) no-repeat;
}

div#topper {
    width: 100%;
    padding: 10px 0 50px 0;
	margin: -30px 0 100px 0;
    position: relative;
	min-height: 330px;
    z-index: 100;
    -webkit-transform: skewY(3deg) translateY(50px);
    -moz-transform: skewY(3deg) translateY(50px);
    -ms-transform: skewY(3deg) translateY(50px);
    -o-transform: skewY(3deg) translateY(50px);
    transform: skewY(3deg) translateY(50px);
background: #b5d181; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #b5d181 1%, #a1d54f 36%, #77c100 66%, #438c00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,#b5d181), color-stop(36%,#a1d54f), color-stop(66%,#77c100), color-stop(100%,#438c00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #b5d181 1%,#a1d54f 36%,#77c100 66%,#438c00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #b5d181 1%,#a1d54f 36%,#77c100 66%,#438c00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #b5d181 1%,#a1d54f 36%,#77c100 66%,#438c00 100%); /* IE10+ */
background: linear-gradient(135deg,  #b5d181 1%,#a1d54f 36%,#77c100 66%,#438c00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5d181', endColorstr='#438c00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}


div#hero {
    width: 100%;
    padding: 25px 0 90px 0;
	margin: 0 0 100px 0;
    position: relative;
	min-height: 250px;
    z-index: 100;
    font-size: 40px;
	-webkit-transform: skewY(3deg) translateY(50px);
    -moz-transform: skewY(3deg) translateY(50px);
    -ms-transform: skewY(3deg) translateY(50px);
    -o-transform: skewY(3deg) translateY(50px);
    transform: skewY(3deg) translateY(50px)
background: #b5d181; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #b5d181 1%, #a1d54f 36%, #77c100 66%, #438c00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,#b5d181), color-stop(36%,#a1d54f), color-stop(66%,#77c100), color-stop(100%,#438c00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #b5d181 1%,#a1d54f 36%,#77c100 66%,#438c00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #b5d181 1%,#a1d54f 36%,#77c100 66%,#438c00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #b5d181 1%,#a1d54f 36%,#77c100 66%,#438c00 100%); /* IE10+ */
background: linear-gradient(135deg,  #b5d181 1%,#a1d54f 36%,#77c100 66%,#438c00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5d181', endColorstr='#438c00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

div#topper-blue {
    width: 100%;
    padding: 70px 0 50px 0;
	margin: -30px 0 100px 0;
    position: relative;
	min-height: 350px;
    z-index: 100;
    -webkit-transform: skewY(3deg) translateY(50px);
    -moz-transform: skewY(3deg) translateY(50px);
    -ms-transform: skewY(3deg) translateY(50px);
    -o-transform: skewY(3deg) translateY(50px);
    transform: skewY(3deg) translateY(50px);
	background: #b7deed; /* Old browsers */
	background: -moz-linear-gradient(-55deg,  #b7deed 0%, #71ceef 50%, #21b4e2 81%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#b7deed), color-stop(50%,#71ceef), color-stop(81%,#21b4e2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-55deg,  #b7deed 0%,#71ceef 50%,#21b4e2 81%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-55deg,  #b7deed 0%,#71ceef 50%,#21b4e2 81%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-55deg,  #b7deed 0%,#71ceef 50%,#21b4e2 81%); /* IE10+ */
	background: linear-gradient(155deg,  #b7deed 0%,#71ceef 50%,#21b4e2 81%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#21b4e2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

div#hero-blue {
    width: 100%;
    padding: 25px 0 90px 0;
	margin: 0 0 100px 0;
    position: relative;
	min-height: 250px;
    z-index: 100;
    font-size: 40px;
	-webkit-transform: skewY(3deg) translateY(50px);
    -moz-transform: skewY(3deg) translateY(50px);
    -ms-transform: skewY(3deg) translateY(50px);
    -o-transform: skewY(3deg) translateY(50px);
    transform: skewY(3deg) translateY(50px)
	background: #b7deed; /* Old browsers */
	background: -moz-linear-gradient(-55deg,  #b7deed 0%, #71ceef 50%, #21b4e2 81%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#b7deed), color-stop(50%,#71ceef), color-stop(81%,#21b4e2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-55deg,  #b7deed 0%,#71ceef 50%,#21b4e2 81%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-55deg,  #b7deed 0%,#71ceef 50%,#21b4e2 81%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-55deg,  #b7deed 0%,#71ceef 50%,#21b4e2 81%); /* IE10+ */
	background: linear-gradient(155deg,  #b7deed 0%,#71ceef 50%,#21b4e2 81%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#21b4e2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}


/* some overrides for the default bootstrap css, words mostly. Still fucks up on mobile screens. */

.projects {
     -webkit-transform: skewY(-3deg) translateY(50px);
    -moz-transform: skewY(-3deg) translateY(50px);
    -ms-transform: skewY(-3deg) translateY(50px);
    -o-transform: skewY(-3deg) translateY(50px);
    transform: skewY(-3deg) translateY(50px);
}

.spaceshot {

}

.modal-dialog {width:600px;}
.thumbnail {margin-bottom:6px;}

/* Featurettes
------------------------- */

.featurette-divider {
  margin: 40px 0; /* Space out the Bootstrap <hr> more */
  border-top: none;
}

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}

@media (min-width: 768px) {

  /* Remove the edge padding needed for mobile */
  .projects {
    padding-left: 0;
    padding-right: 0;
  }



  .featurette-heading {
    font-size: 50px;
  }

}

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px;
  }
}