/* COLORS */
/* CLEARFIX */
/* IMAGE REPLACEMENT */
/* BOX SHADOW */
/* BORDER RADIUS */
/* AVENIR MEDIUM */
@font-face {
  font-family: 'AvenirMedium';
  src: url("http://naturallycurly.com/fonts/avenir/avenir-medium.eot");
  src: local("nonexistentfont"), url("http://naturallycurly.com/fonts/avenir/avenir-medium.woff") format("woff"), url("http://naturallycurly.com/fonts/avenir/avenir-medium.ttf") format("truetype"), url("http://naturallycurly.com/fonts/avenir/avenir-medium.svg") format("svg");
  font-weight: normal;
  font-style: normal; }

/* 
 * HTML5 ✰ Boilerplate
 *
 * What follows is the result of much research on cross-browser styling. 
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 * 
 * ==|== normalize ==========================================================
 */
/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, dialog {
  display: block; }

/* Corrects inline-block not defined in IE6/7/8 and FF3 */
audio, canvas, video {
  display: inline-block;
  *display: inline;
  *zoom: 1; }

audio:not([controls]) {
  display: none; }

/* Ensures content is hidden from all presentations, including screenreaders */
[hidden] {
  display: none;
  visibility: hidden; }

/* =============================================================================
   Base
   ========================================================================== */
/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */
html {
  height: 100%;
  font-size: 100%;
  overflow-y: scroll;
  /* Force a scrollbar in non-IE */
  -webkit-text-size-adjust: 100%;
  /* Prevent iOS text size adjust on orientation change without disabling user zoom */
  -ms-text-size-adjust: 100%; }

body {
  margin: 0 auto;
  min-height: 100%; }

/* Fonts settings based on the 100E2R standard: http://www.informationarchitects.jp/en/100e2r/ */
body, button, input, select, textarea {
  font: 1em/1.625 Georgia, serif;
  color: #222;
  /* Full black on white is too much contrast, #222 is a better default */ }

/* 
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */
::-moz-selection {
  background: auto;
  color: #fff;
  text-shadow: none; }

::selection {
  color: #fff;
  text-shadow: none; }

/* =============================================================================
   Links
   ========================================================================== */
a {
  color: #00e; }

a:visited {
  color: #551a8b; }

a:hover {
  color: #06e; }

a:focus {
  outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active {
  outline: 0; }

/* =============================================================================
   Typography
   ========================================================================== */
/* Abbreviations
---------------------------------------- */
abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

/* Marked/inserted/deleted text
---------------------------------------- */
ins {
  background: #ff9;
  color: #000;
  text-decoration: none; }

mark {
  background: #ff0;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

/* Others
---------------------------------------- */
b, strong, dt {
  font-weight: bold; }

dfn {
  font-style: italic; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp {
  font-family: monospace, monospace;
  _font-family: 'courier new', monospace;
  font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word; }

small {
  font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* =============================================================================
   Quotes
   ========================================================================== */
blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none; }

blockquote, q, cite {
  font-style: italic; }

blockquote {
  padding-left: 1.625em;
  border-left: 1px solid #ddd; }

blockquote > p {
  padding: 0; }

/* =============================================================================
   Lists
   ========================================================================== */
ul, ol {
  margin: 1em 0;
  padding: 0 0 0 40px; }

dd {
  margin: 0 0 0 40px; }

nav ul, nav ol {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0; }

/* =============================================================================
   Embedded content
   ========================================================================== */
/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/e 
 */
img, object, video {
  max-width: 100%;
  /* Automatically scales images larger than the container. Consider this first: http://unstoppablerobotninja.com/entry/fluid-images/ */
  /* _width: 100%; /* IE6 doesn't support max-width, so we just use width. If the image is larger than the container, just uncomment this. If it is smaller than the container, uncomment and change the 100% value to an absolute one */ }

img {
  border: 0;
  -ms-interpolation-mode: bicubic;
  /* Improve IE's resizing of images: css-tricks.com/ie-fix-bicubic-scaling-for-images */
  vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9 
 */
svg:not(:root) {
  overflow: hidden; }

/* =============================================================================
   Figures
   ========================================================================== */
figure {
  margin: 0; }

/* =============================================================================
   Forms
   ========================================================================== */
form {
  margin: 0; }

fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label {
  cursor: pointer; }

/* 
 * 1. Correct color not inheriting in IE6/7/8/9 
 * 2. Correct alignment displayed oddly in IE6/7 
 */
legend {
  border: 0;
  *margin-left: -7px;
  padding: 0; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */
button, input, select, textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */
button, input {
  line-height: normal;
  *overflow: visible; }

/*
 * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
 */
table button, table input {
  *overflow: auto; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */
button, input[type="button"], input[type="reset"], input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button; }

/*
 * Consistent box sizing and appearance
 */
input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box; }

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box; }

input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/* 
 * Remove inner padding and border in FF3/4: h5bp.com/l 
 */
button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/* 
 * 1. Remove default vertical scrollbar in IE6/7/8/9 
 * 2. Allow only vertical resizing
 */
textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical; }

/* Colors for form validity */
input:invalid, textarea:invalid {
  background-color: #f0dddd; }

/* =============================================================================
   Tables
   ========================================================================== */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td {
  vertical-align: top; }

body,
button,
input,
select,
textarea {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 18px;
  color: #3b3c3c; }

::-moz-selection {
  background: #3b3c3c;
  color: white; }

::selection {
  background: #3b3c3c;
  color: white; }

body {
  background-color: #f1f1f1; }

a {
  color: #7200aa;
  text-decoration: none; }
  a:hover {
    text-decoration: underline;
    color: #7200aa; }

p {
  margin: 0;
  padding: 0; }

ul,
ol {
  margin: 0; }

h3 {
  text-transform: uppercase;
  border-bottom: 1px solid #e3e3e3;
  margin: 15px 0;
  font-size: 20px;
  padding-bottom: 5px; }

.hair-type.columns > .column > a {
  font-weight: bold;
  font-size: 15px; }
  .hair-type.columns > .column > a > img {
    border: 1px solid #e3e3e3;
    margin-bottom: 10px; }
  .hair-type.columns > .column > a:hover {
    text-decoration: none; }
    .hair-type.columns > .column > a:hover > img {
      border-color: #7200aa; }

#page-container {
  width: 1000px;
  margin: 0 auto;
  background-color: white;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2) ;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2) ; }

#top-container {
  background-color: #3b3c3c; }
  #top-container #top {
    width: 1000px;
    margin: 0 auto;
    line-height: 40px;
    zoom: 1; }
    #top-container #top:before, #top-container #top:after {
      content: "\0020";
      display: block;
      height: 0;
      overflow: hidden; }
    #top-container #top:after {
      clear: both; }
    #top-container #top #hairtype-results {
      float: left;
      font-size: 11px;
      color: #3a9ec4;
      text-transform: uppercase;
      font-weight: bold;
      height: 40px; }
      #top-container #top #hairtype-results img {
        width: 30px;
        height: 30px;
        border: 1px solid #e3e3e3;
        margin-bottom: 2px; }
      #top-container #top #hairtype-results a {
        color: #e3e3e3; }
        #top-container #top #hairtype-results a:hover {
          text-decoration: none; }
    #top-container #top #network-links {
      float: right; }
      #top-container #top #network-links a {
        color: white;
        text-transform: uppercase;
        font-size: 11px;
        margin-left: 15px;
        float: left; }
        #top-container #top #network-links a.texturemedia {
          display: block;
          border: 0;
          text-indent: -999em;
          overflow: hidden;
          background-color: transparent;
          background-repeat: no-repeat;
          background-position: center center;
          text-align: left;
          direction: ltr;
          width: 85px;
          height: auto;
          background-image: url(http://static.naturallycurly.com/images/header/tm-logo-sm.png); }

#header {
  padding: 15px;
  background-color: #fff;
  position: relative;
  height: 85px; }
  #header > .quiz-link {
    position: absolute;
    left: 10px;
    top: 80px;
    font-size: 14px;
    font-weight: bold; }
  #header > .logo > img {
    height: 50px; }
  #header > .social-media {
    position: absolute;
    top: 10px;
    right: 10px; }
    #header > .social-media .fb-like,
    #header > .social-media .google-plusone {
      float: right;
      width: 90px; }
    #header > .social-media > a {
      display: block;
      border: 0;
      text-indent: -999em;
      overflow: hidden;
      background-color: transparent;
      background-repeat: no-repeat;
      background-position: center center;
      text-align: left;
      direction: ltr;
      width: 26px;
      height: 26px;
      background-image: url(http://static.naturallycurly.com/images/header/social-media-icons.png);
      display: inline-block;
      margin-left: 5px;
      margin-bottom: 10px; }
      #header > .social-media > a.facebook {
        background-position: 0px -33px; }
        #header > .social-media > a.facebook:hover {
          background-position: 0px -65px; }
      #header > .social-media > a.twitter {
        background-position: -31px -33px; }
        #header > .social-media > a.twitter:hover {
          background-position: -31px -65px; }
      #header > .social-media > a.pinterest {
        background-position: -62px -33px; }
        #header > .social-media > a.pinterest:hover {
          background-position: -62px -65px; }
      #header > .social-media > a.youtube {
        background-position: -92px -33px; }
        #header > .social-media > a.youtube:hover {
          background-position: -92px -65px; }
      #header > .social-media > a.mobile {
        background-position: -123px -33px; }
        #header > .social-media > a.mobile:hover {
          background-position: -123px -65px; }
      #header > .social-media > a.newsletter {
        background-position: -154px -33px; }
        #header > .social-media > a.newsletter:hover {
          background-position: -154px -65px; }

#hairtype-header {
  width: 970px;
  height: 211px;
  padding: 15px;
  background: url(http://s3.amazonaws.com/static.naturallycurly.com/images/hairnet/hairnet-header-bg.jpg) center center no-repeat;
  zoom: 1; }
  #hairtype-header:before, #hairtype-header:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden; }
  #hairtype-header:after {
    clear: both; }
  #hairtype-header > .girl {
    overflow: hidden;
    width: 152px;
    height: 152px;
    float: left;
    border: 1px solid #7200aa;
    margin-right: 10px; }
  #hairtype-header > .swatches {
    float: left;
    margin-right: 10px;
    zoom: 1; }
    #hairtype-header > .swatches:before, #hairtype-header > .swatches:after {
      content: "\0020";
      display: block;
      height: 0;
      overflow: hidden; }
    #hairtype-header > .swatches:after {
      clear: both; }
    #hairtype-header > .swatches > .swatch {
      width: 43px;
      height: 43px;
      margin-bottom: 10px; }
      #hairtype-header > .swatches > .swatch:first-child {
        border: 0;
        width: 45px;
        height: 45px; }
        #hairtype-header > .swatches > .swatch:first-child > img {
          width: 45px;
          height: 45px; }
      #hairtype-header > .swatches > .swatch:last-child {
        margin-bottom: 0; }
      #hairtype-header > .swatches > .swatch > img {
        width: 43px;
        height: 43px; }
  #hairtype-header > .description {
    float: left;
    width: 690px;
    height: 152px;
    font-family: AvenirMedium,Arial,Helvetica,sans-serif; }
    #hairtype-header > .description > h1 {
      font-size: 32px;
      line-height: 45px;
      margin: 0 0 10px 0; }
      #hairtype-header > .description > h1 > span {
        color: #7200aa;
        font-style: italic; }
    #hairtype-header > .description > p {
      font-size: 15px;
      margin-bottom: 10px; }
      #hairtype-header > .description > p.cta {
        font-weight: bold; }
  #hairtype-header .swatch {
    background: url(http://s3.amazonaws.com/static.naturallycurly.com/images/hairnet/hair-swatches.jpg);
    width: 43px;
    height: 43px;
    border: 1px solid #7200aa; }
    #hairtype-header .swatch.type-2a {
      background-position-y: 0px; }
    #hairtype-header .swatch.type-2b {
      background-position-y: -45px; }
    #hairtype-header .swatch.type-2c {
      background-position-y: -90px; }
    #hairtype-header .swatch.type-3a {
      background-position-y: -135px; }
    #hairtype-header .swatch.type-3b {
      background-position-y: -180px; }
    #hairtype-header .swatch.type-3c {
      background-position-y: -225px; }
    #hairtype-header .swatch.type-4a {
      background-position-y: -270px; }
    #hairtype-header .swatch.type-4b {
      background-position-y: -315px; }
    #hairtype-header .swatch.type-4c {
      background-position-y: -360px; }
    #hairtype-header .swatch.s-1 {
      background-position-x: 0px; }
    #hairtype-header .swatch.s-2 {
      background-position-x: -45px; }
    #hairtype-header .swatch.s-3 {
      background-position-x: -90px; }
    #hairtype-header .swatch.s-4 {
      background-position-x: -135px; }
    #hairtype-header .swatch.s-5 {
      background-position-x: -180px; }
    #hairtype-header .swatch.s-6 {
      background-position-x: -225px; }
    #hairtype-header .swatch.s-7 {
      background-position-x: -270px; }
  #hairtype-header > .lower-swatches {
    padding-top: 10px;
    clear: both;
    zoom: 1; }
    #hairtype-header > .lower-swatches:before, #hairtype-header > .lower-swatches:after {
      content: "\0020";
      display: block;
      height: 0;
      overflow: hidden; }
    #hairtype-header > .lower-swatches:after {
      clear: both; }
    #hairtype-header > .lower-swatches > .swatch {
      margin-right: 10px;
      float: left; }

#nav {
  zoom: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #e3e3e3; }
  #nav:before, #nav:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden; }
  #nav:after {
    clear: both; }
  #nav > li {
    background-color: #e3e3e3;
    float: left;
    line-height: 38px;
    width: 110px;
    text-align: center;
    border-right: 1px solid #b0b0b0;
    /*& > a {
    	display: inline-block;
    	padding: 10px 35px;
    	font-size: 16px;
    	background-color: $gray;
    	margin: 0 3px;
    	
    	&:hover {
    		background-color: $darkGray;
    		color: $white;
    		text-decoration: none;
    	}
    }*/ }
    #nav > li > a {
      display: block;
      text-transform: uppercase;
      border-right: 1px solid white; }
    #nav > li:hover, #nav > li.active {
      background-color: #f5f5f5; }
      #nav > li:hover > a, #nav > li.active > a {
        text-decoration: none; }
    #nav > li:last-child {
      border-right: 0; }
      #nav > li:last-child > a {
        border-right: 0; }

#body {
  margin-top: 15px; }
  #body > * {
    margin: 15px 15px 0 15px;
    padding-bottom: 15px; }
    #body > *:first-child {
      margin-top: 0; }

#take-the-quiz {
  padding-bottom: 0; }
  #take-the-quiz > a {
    font-size: 20px;
    font-weight: bold;
    color: #7200aa; }

.ad.size970 {
  display: block;
  border: 0;
  text-indent: -999em;
  overflow: hidden;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  text-align: left;
  direction: ltr;
  width: 970px;
  height: 60px;
  background-image: url(http://placehold.it/970x60);
  background-position: center bottom; }
  .ad.size970:last-child {
    background-position: center center; }
.ad.size160 {
  display: block;
  border: 0;
  text-indent: -999em;
  overflow: hidden;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  text-align: left;
  direction: ltr;
  width: 160px;
  height: 600px;
  background-image: url(http://placehold.it/160x600);
  background-position: center bottom; }
  .ad.size160:last-child {
    background-position: center center; }
.ad.size300 {
  display: block;
  border: 0;
  text-indent: -999em;
  overflow: hidden;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  text-align: left;
  direction: ltr;
  width: 300px;
  height: 250px;
  background-image: url(http://placehold.it/300x250);
  background-position: center bottom; }
  .ad.size300:last-child {
    background-position: center center; }

.columns {
  zoom: 1; }
  .columns:before, .columns:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden; }
  .columns:after {
    clear: both; }
  .columns > .column {
    float: left; }
    .columns > .column:last-child {
      margin-right: 0px; }
    .columns > .column > *, .columns > .column > .no-margin > * {
      margin-bottom: 15px; }
      .columns > .column > *:last-child, .columns > .column > *.no-margin, .columns > .column > .no-margin > *:last-child, .columns > .column > .no-margin > *.no-margin {
        margin-bottom: 0; }
  .columns.four > .column.narrow {
    width: 160px;
    margin-right: 17px; }
  .columns.four > .column.wide {
    width: 300px;
    margin-right: 16px; }
    .columns.four > .column.wide:first-child {
      margin-right: 17px; }
  .columns.four > .column:last-child {
    margin-right: 0px; }
  .columns.three > .column {
    width: 313px;
    margin-right: 15px; }
    .columns.three > .column:last-child {
      margin-right: 0px; }

#footer {
  padding-bottom: 15px;
  text-align: center;
  font-size: 12px; }

.clear {
  zoom: 1; }
  .clear:before, .clear:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden; }
  .clear:after {
    clear: both; }

.center {
  text-align: center; }

.desktop-only {
  display: block; }

.mobile-only {
  display: none; }