body {
	background-color:#FFF;
}
		.container { max-width: 90em;
font-family: Open Sans,Helvetica,Arial;
font-size: 18px;
font-weight:400;
		}
		h1 {
		text-indent:-9999px;
		width: 130px;
		height: 48px;
		background:url(../toolbox/what-the-hair-logo-260px.gif);
		background-size:contain;
		background-repeat:no-repeat;
		margin: 15px auto;
		}
		.nav {
			text-align:center;
			margin-bottom:20px;
		}
		.nav a {
			font-size:13px;
			text-decoration:none;
			color:#777;
			display:block;
			text-align:center;
		}
		.nav a:hover {
			color:#F33F3F;

		}
		.nav a.active {
			color:#F33F3F;
		}
		h2 {
			font-family: Open Sans,Helvetica,Arial;
			font-weight:400;
			font-size:1.4em;
			text-indent:-9999px;
		}
		h3 {
			font-family: Open Sans,Helvetica,Arial;
			font-weight:400;
			font-size:1.3em;
			padding: 15px 0;
			text-align:center;
			border-bottom:1px solid #CCC;
			text-transform:uppercase;
			letter-spacing:1px;
		}
		.slider {
			padding:0; margin:0;
			clear:both;
		}
		h4 {
			font-weight:400;
			text-align:center;
		}
		.feature p {
			color:#777;
			text-align:center;
		}
		a {
			text-decoration:none;
		}
		.feature a.btn {
			color:#FFF;
			padding: 5px 15px;
			background-color:#F33F3F;
		}
		.feature a.btn:hover {
			background-color:#000;
		}
		 .feature img, .feature a img, .feature img:hover {
  			width: 100%;
			height: auto;
			background-color:#FFF;
			margin:0; padding:0;
			border:0;
  		}
		.solo {
			width:100%;
		}
		.footer {
			background-color:#000;
			color:#aaa;
			width:100%;
			margin:0; padding:0;
			font-size:11px;
			text-align:center;
			padding-bottom:25px;
			margin-left:0; padding-left:0;
			line-height:1.7em;
		}
		.follow {
			background-color:#000;
			color:#aaa;
			width:100%;
			margin:0;
			padding:15px 0;
			font-size:13px;
			text-align:right;
		}
		.follow p {
			margin: 0 35px 0 0;
		}
		.follow a {
			margin: 5px 15px 0 5px;
		}
			.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
 

		/* you only need width to set up columns; all columns are 100%-width by default, so we start
		   from a one-column mobile layout and gradually improve it according to available screen space */

		@media only screen and (min-width: 34em) {
			.title {margin: 0 auto; padding:0;}
			.nav {
				}
		}

		@media only screen and (min-width: 54em) {
			.title { width:25%; }
			.nav { width:75%; 
					padding:20px 0 0 0;
					margin-bottom:0;
					text-align:right;
			}
			.nav a {
						padding-left:30px;
						display:inline;
			}
			.feature { width: 33.33%; }
			.solo {width:100%; }
			.info    { width: 100%;   }
		}
		@media only screen and (min-width: 76em) {
			.info    { width: 50%;    }
		}