@import url("flat-ui.css");

body {
	color: #5a5a5a;
	background-color:#f4f4f4;
}

[class*="span"] {
	margin-bottom:3%;
}

.navbar a {
	text-decoration: none;
}	

#menu {
	position:fixed;
	background-color:white;
	height:50px;
	width:280px;
	text-align:center;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	z-index: 100;
}

#menu img {
	height: 100%;
	display:inline;
	margin:0;
}

#menu a {
	text-decoration:none;
}

#menu-item-hover {
	display:none;
	color:white;
	width:280px;
}

#intro {
	height: 100%;
}

#intro h1 {
	margin-top:20%;
	margin-right: 10%;
}

#websites, #contact, #other, #photos {
	margin-bottom: 10%;
}

#contact {
	text-align:right;
}

#photos, #contact {
	margin-bottom:0;
}

#contact .span4 img {
	display:inline-block;
	/*
	filter:none;
	-webkit-filter: invert(0%);*/
	
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#contact .span4 img:hover {
	opacity:0.8;
	filter:alpha(opacity=80);
	/*filter: invert(100%);
	-webkit-filter: invert(100%);*/
}

#contact .span4 h1 {
	margin-top:9%;
}

.span4 img, .span3 img {
	display:block;
	margin:5px auto 10px auto;	
}

.alert {
	display:inline-block;
	padding: 8px 14px 0px 14px;
}

.hide {
	display: none;
}

h1 {
	margin-top:7%; /*?*/
	margin-bottom:4%;
}

.arrow_box {
	position: fixed;
	top:65px;
	background: #97CCBC;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	z-index:99;
	text-align:center;
}

.arrow_box p {
	padding:10px 0 3px 0px;
	font-weight:lighter;
}

.arrow_box:after {
	bottom: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(136, 183, 213, 0);
	border-bottom-color: #97CCBC;
	border-width: 10px;
	left: 50%;
	margin-left: -10px;
}

.one:after {
	left:32.5px;
}

.two:after {
	left:85.5px;
}

.three:after {
	left:50%;
}

.four:after {
	left:191.5px;
}

.five:after {
	left:244.5px;
}

/************ BUTTONS ************/
.btn-spring-morning {
	background-color:#97CCBC;
}

.btn-spring-morning:hover {
	background-color:#a0d6c5;
}

.btn-pink-room {
	background-color:#E0AD9A;
}

.btn-pink-room:hover {
	background-color:#efbeac;
}

.btn-verve {
	background-color:#A8AF50;
}

.btn-verve:hover {
	background-color:#bbc15e;
}

.btn-sea-of-tranquility {
	background-color:#B5B6B0;
}

.btn-sea-of-tranquility:hover {
	background-color:#cbccc5;
}

.btn-when-i-was-little {
	background-color:#DAF1E9;
}

.btn-when-i-was-little:hover {
	background-color:#c1ddd3;
}

.btn-grey-brown {
	background-color:#9b7a5a;
}

.btn-grey-brown:hover {
	background-color:#b59170;
}

/********* COLORS *********/
.spring-morning {
	color:#97CCBC;
}

.pink-room {
	color:#E0AD9A;
}

.verve {
	color:#A8AF50;
}

.sea-of-tranquility {
	color:#B5B6B0;
}

.when-i-was-little {
	color:#DAF1E9;
}

.grey-brown {
	color:#9b7a5a;
}

/* -------------------------------------------------- */
/* CAROUSEL */

/* Carousel base class */
.carousel {
  /*margin-bottom: 60px;*/
}

.carousel .container {
  position: relative;
  z-index:9;
}

.carousel-control {
  height: 80px;
  top: 45%;
  margin-top: 0;
  font-size: 120px;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
  background-color: transparent;
  border: 0;
  z-index: 10;
  text-decoration:none;
}

.carousel .item {
  /*height: 500px;*/
}
.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  /*height: 500px;*/
}

.carousel-caption {
  background-color: transparent;
  position: static;
  max-width: 550px;
  padding: 0 20px;
  margin-top: 200px;
}
.carousel-caption h1,
.carousel-caption .lead {
  margin: 0;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.carousel-caption .btn {
  margin-top: 10px;
}

/*Responsive stuff*/

@media (max-width: 979px) {

      .container.navbar-wrapper {
        margin-bottom: 0;
        width: auto;
      }

	  .carousel-caption {
			margin-top:10px;
	  }

      .navbar-inner {
        border-radius: 0;
        margin: -20px 0;
      }

      .carousel .item {
        height: 500px;
      }
      .carousel img {
        width: auto;
        /*height: 500px;*/
      }

      .featurette {
        height: auto;
        padding: 0;
      }
      .featurette-image.pull-left,
      .featurette-image.pull-right {
        display: block;
        float: none;
        max-width: 40%;
        margin: 0 auto 20px;
      }
}

@media (max-width: 767px) {

      .navbar-inner {
        margin: -20px;
      }

      .carousel {
        margin-left: -20px;
        margin-right: -20px;
      }
      .carousel .container {
		  display:none;
      }
      .carousel .item {
        height: 300px;
      }
      .carousel img {
        /*height: 300px;*/
      }

      .carousel-caption {
        width: 65%;
        padding: 0 70px;
        margin-top: 100px;
      }
      .carousel-caption h1 {
        font-size: 30px;
      }
      .carousel-caption .lead,
      .carousel-caption .btn {
        font-size: 18px;
      }

      .marketing .span4 + .span4 {
        margin-top: 40px;
      }

      .featurette-heading {
        font-size: 30px;
      }
      .featurette .lead {
        font-size: 18px;
        line-height: 1.5;
      }
}