/* -----------------------------------------------------------------------------------------------------------------

	Placeholders & vars

----------------------------------------------------------------------------------------------------------------- */


/*! normalize.css 2012-01-22T23:30 UTC - http://github.com/necolas/normalize.css - Modified by Dominic Whittle */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block;
}

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

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

[hidden] {
    display: none;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    overflow-y: scroll;
    word-wrap: break-word;
}

body {
    margin: 0;
    padding: 0;
}

a:focus,
a:hover,
a:active {
    outline: 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

strong {
    font-weight: bold;
}

dfn {
    font-style: italic;
}

mark {
    background: #ff0;
    color: #000;
}

pre,
code,
kbd,
samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

q {
    quotes: none;
}

q:after {
    content: '';
    content: none;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

ul>ul,
ol>ol,
ul>ol,
ol>ul {
    margin-top: 0;
    margin-bottom: 0;
}

dd {
    margin: 0 0 0 40px;
}

img {
    border: 0;
    -ms-interpolation-mode: bicubic;
    vertical-align: middle;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/*! END normalize.css */

i,
b {
    font-weight: normal;
    font-style: normal;
}

@-webkit-keyframes pop {
    0% {
        -webkit-transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.5);
    }
    100% {
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes pop {
    0% {
        -moz-transform: scale(1);
    }
    50% {
        -moz-transform: scale(1.5);
    }
    100% {
        -moz-transform: scale(1);
    }
}

@-o-keyframes pop {
    0% {
        -o-transform: scale(1);
    }
    50% {
        -o-transform: scale(1.5);
    }
    100% {
        -o-transform: scale(1);
    }
}

@keyframes pop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes pop-small {
    0% {
        -webkit-transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes pop-small {
    0% {
        -moz-transform: scale(1);
    }
    50% {
        -moz-transform: scale(1.1);
    }
    100% {
        -moz-transform: scale(1);
    }
}

@-o-keyframes pop-small {
    0% {
        -o-transform: scale(1);
    }
    50% {
        -o-transform: scale(1.1);
    }
    100% {
        -o-transform: scale(1);
    }
}

@keyframes pop-small {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.gform_wrapper ul,
.gform_wrapper li.gfield,
.basecloth,
.pattern-introduction {
    zoom: 1;
}

.gform_wrapper ul:before,
.gform_wrapper li.gfield:before,
.basecloth:before,
.pattern-introduction:before,
.gform_wrapper ul:after,
.gform_wrapper li.gfield:after,
.basecloth:after,
.pattern-introduction:after {
    content: "";
    display: table;
}

.gform_wrapper ul:after,
.gform_wrapper li.gfield:after,
.basecloth:after,
.pattern-introduction:after {
    clear: both;
}

.module-gallery .img,
.home-cta a .img,
.rimg,
.basecloth .img,
.render,
.tile .img,
.pattern-preview .ratio {
    position: relative;
    overflow: hidden;
    height: 0;
    padding-bottom: 55.06217%;
}

.module-gallery .img img,
.home-cta a img,
.rimg img,
.render img,
.tile img,
.pattern-preview .ratio img,
._homeware .img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.visuallyhidden {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    width: 0 !important;
}

@font-face {
    font-family: 'inkspindle';
    src: url('../fonts/inkspindle.eot');
    src: url('../fonts/inkspindle.eot?#iefix') format('embedded-opentype'), url('../fonts/inkspindle.woff') format('woff'), url('../fonts/inkspindle.ttf') format('truetype'), url('../fonts/inkspindle.svg#inkspindle') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* Use the following CSS code if you want to use data attributes for inserting your icons */

[data-icon]:before {
    font-family: 'inkspindle';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}


/* Use the following CSS code if you want to have a class per icon */


/*
  Instead of a list of all class selectors,
  you can use the generic selector below, but it's slower:
  [class*="icon-"] {
  */

.icon-on,
.icon-wavier,
.icon-wave,
.icon-water,
.icon-timer,
.icon-reuse,
.icon-plant,
.icon-leaf,
.icon-ink,
.icon-droplet,
.currentcolour .droplet,
.colour-swatch.selected b,
.basecloth-swatch.selected b,
.ui-slider-handle,
.icon-cloud,
.icon-cloth {
    font-family: 'inkspindle';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.icon-on:before {
    content: "\e00b";
}

.icon-wavier:before {
    content: "\e006";
}

.icon-wave:before {
    content: "\e001";
}

.icon-water:before {
    content: "\e005";
}

.icon-timer:before {
    content: "\e003";
}

.icon-reuse:before {
    content: "\e007";
}

.icon-plant:before {
    content: "\e008";
}

.icon-leaf:before {
    content: "\e009";
}

.icon-ink:before {
    content: "\e004";
}

.icon-droplet:before,
.currentcolour .droplet:before,
.colour-swatch.selected b:before,
.basecloth-swatch.selected b:before,
.ui-slider-handle:before {
    content: "\e000";
}

.icon-cloud:before {
    content: "\e00a";
}

.icon-cloth:before {
    content: "\e002";
}


/* -----------------------------------------------------------------------------------------------------------------
  
      Patterns
  
      These are project specific, as opposed to _helpers which are more generic layout mixins.
  
  ----------------------------------------------------------------------------------------------------------------- */

.group {
    zoom: 1;
}

.group:before,
.group:after {
    content: "";
    display: table;
}

.group:after {
    clear: both;
}

.c {
    zoom: 1;
    margin-left: auto;
    margin-right: auto;
    max-width: 1126px;
    padding-left: 20px;
    padding-right: 20px;
}

.c:before,
.c:after {
    content: "";
    display: table;
}

.c:after {
    clear: both;
}

@media screen and (min-width: 600px) {
    .c,
    .c-no-margin-contain {
        padding-left: 40px;
        padding-right: 40px;
    }
}

.c--noPadding {
    padding-left: 0;
    padding-right: 0;
}

.c-no-margin-contain {
    margin-left: auto;
    margin-right: auto;
    max-width: 1126px;
    padding-left: 20px;
    padding-right: 20px;
}

.order-lengths li .remove,
.addlengths a span {
    width: 16px;
    line-height: 16px;
    font-size: 16px;
    border: 1px solid #DDD;
    border-radius: 9px;
    text-align: center;
}

.intro.-capped-width {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}


/* -----------------------------------------------------------------------------------------------------------------
      .shadowbox
  ----------------------------------------------------------------------------------------------------------------- */


/* -----------------------------------------------------------------------------------------------------------------
      .boxnote
  ----------------------------------------------------------------------------------------------------------------- */


/* -----------------------------------------------------------------------------------------------------------------
  
      Type Styles
  
  ----------------------------------------------------------------------------------------------------------------- */


/* -----------------------------------------------------------------------------------------------------------------
  
      Typography
  
  ----------------------------------------------------------------------------------------------------------------- */

body {
    font-family: "Muli", sans-serif;
    font-size: 14px;
    /* body font-size */
    color: #887373;
    line-height: 1.5;
    letter-spacing: 1px;
    font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
pre,
blockquote,
fieldset,
table,
hr {
    margin: 1em 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    font-size: 1em;
    line-height: 1.5;
}

ul,
ol {
    padding-left: 2em;
}

h2,
h3 {
    font-family: "Jigsaw Regular", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 13px;
    line-height: 1.5;
    color: #514444;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 50px;
}

h3 {
    margin-top: 1em;
    color: #6c5c5c;
    font-size: 12px;
}


/* ------------------------------------------------- */

blockquote {
    font-family: "Jigsaw", sans-serif;
    font-size: 18px;
    letter-spacing: 2px;
    background: #fff;
}

blockquote p {
    margin: 0;
    padding: 1em;
}

.main-title {
    font-family: "Jigsaw Light", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 28px;
    line-height: 1.2;
    margin: 0;
    color: #FCF8F9;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: -1px -1px 0px #444, 1px -1px 1px #444, -1px 1px 1px #444, 1px 1px 0px #444;
    margin-top: 100px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    text-align: center;
}

@media screen and (min-width: 480px) {
    .main-title {
        font-size: 48px;
    }
}

@media screen and (min-width: 568px) {
    .main-title {
        font-size: 58px;
    }
}

.no-textshadow .main-title {
    color: #333;
    text-shadow: none;
}

.main-title>span {
    border-bottom: 1px solid #DFDFDF;
    display: inline-block;
}

.intro {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 40px;
    font-family: "Jigsaw Regular", sans-serif;
    font-size: 14px;
    /* body font-size */
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #6c5c5c;
}

.copy {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.narrow-copy {
    max-width: 510px;
    margin-left: auto;
    margin-right: auto;
}


/* ---------------------------------------------------
      Anchor Module
                                                      */


/* ---------------------------------------------------
      Selection
                                                      */


/*
  
  
  ToDO
  
  Change this shit us so it's bare essentials.
  
  Think Resets for forms.
  
  Form styling should happen in the theme, not here.
  Or in the case that there's extensive styling then it happens here.
  
  Regardless, this is the base outline.
  
  
      == Changelog ==
  
      = 22.10.2012 =
      * Much commented out.
  
      = 30.04.2012 =
      * Added css transition to inputs
  
      = 29.04.2012 =
      * Removed need for fallback styling per-project with a * hack.
      * Added /assets folder and /forms sub-folder for cross-project image resources.
  
      = 04.02.2012 =
  
      = 09.01.2012 =
  
      * Renamed inputs.css to forms.css
      * Created
  
  
  */


/* -----------------------------------------------------------------------------------------------------------------
  
      FORMS
  
  ----------------------------------------------------------------------------------------------------------------- */


/*
  
  At a glance:
  
   * 	Designed to work more flexibly with your own custom form styling.
   * 	Less styles in general and less explicit (no more !importants) so it's easier to make small customisations per use.
      It sucks when my own styles I try and overwrite default GF ones with get ignored.
   * 	Em units for margins and padding - so it scales with your font size
   * 	No automatic overwriting of heading font sizes
   * 	SASS (SCSS) for readability and variables.
  
  
  
  
  Replaced a lot of element: hover stuff where spaces shouldn't be.
                            ^
  
  [ ] replace unprefixed border-radius etc with mixins.
  [ ] remember some for styling happens elsewhere...
      this file depends on some mixins and patterns (%group) used elsewhere too!
  
  
  
  
  
  
  ----------------------------------------------------------------
  
  Gravity Forms Front End Form Styles
  Version 1.6.5.1
  http: //www.gravityforms.com
  updated: April 24, 2012 6:09 PM
  
  Gravity Forms is a Rocketgenius project
  copyright 2012 Rocketgenius Inc.
  http: //www.rocketgenius.com
  this may not be redistributed without the
  express written permission of the author.
  
  
  ----------------------------------------------------------------
  */


/* -----------------------------------------------------------------------------------------------------------------
  
          Widths & Sizes
  
      ----------------------------------------------------------------------------------------------------------------- */


/*
      .top_label {} // not being used as a styling hook
  
      input.small,
      select.small {
          width: 15%
      }
      input.medium,
      select.medium {
          width: 50%
      }
      input.large,
      select.large {
          width: 100%;
      }
  
      textarea.small {
          width: 49%;
          min-height: 5em;
      }
      textarea.medium {
          width: 49%;
          min-height: 9em;
      }
      textarea.large  {
          width: 100%;
          min-height: 9em;
      }
      .ginput_left  {
          width: 49%;
          float: left
      }
      .ginput_right {
          width: 49%;
          float: right
      }
  
      // Single column sizes
      @media only screen and ( max-width: 600px ) {
          input.small,
          select.small {
              width: 35%
          }
          input.medium,
          select.medium,
          input.large,
          select.large {
              width: 100%;
          }
          textarea.small,
          textarea.medium,
          textarea.large  {
              width: 100%;
          }
          .ginput_left,
          .ginput_right {
              width: 100%;
          }
  
      }
  */


/*
      // Single column sizes
      @media only screen and ( max-width: 600px ) {
          input.small,
          select.small {
              width: 35%
          }
          input.medium,
          select.medium,
          input.large,
          select.large {
              width: 100%;
          }
          textarea.small,
          textarea.medium,
          textarea.large  {
              width: 100%;
          }
          .ginput_left,
          .ginput_right {
              width: 100%;
          }
  
          li.gfield.gfloat {
              width: 100%;
          }
  
      }
  */


/* -----------------------------------------------------------------------------------------------------------------
  
      Errors & Messages
  
  ----------------------------------------------------------------------------------------------------------------- */


}

/* jQuery UI date picker ------------------------------------------------------*/

/* -----------------------------------------------------------------------------------------------------------------
  
      Homepage > Intro
  
  ----------------------------------------------------------------------------------------------------------------- */
.strapline {
    font-family: "Jigsaw Light", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 28px;
    line-height: 1.2;
    margin: 0;
    color: #FCF8F9;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: -1px -1px 0px #444, 1px -1px 1px #444, -1px 1px 1px #444, 1px 1px 0px #444;
    max-width: 620px;
}
@media screen and (min-width: 480px) {
    .strapline {
        font-size: 48px;
    }
}
@media screen and (min-width: 568px) {
    .strapline {
        font-size: 58px;
    }
}
.no-textshadow .strapline {
    color: #333;
    text-shadow: none;
}
.strapline i {
    overflow: hidden;
    text-shadow: none;
    color: #444;
    font-size: 70%;
}
.strapline i span {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    width: 0 !important;
}
.home-cta {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 480px;
}
.home-cta a {
    -webkit-box-shadow: 10px 10px 0 #ECEBE6;
    -moz-box-shadow: 10px 10px 0 #ECEBE6;
    box-shadow: 10px 10px 0 #ECEBE6;
    background: #F1F1F3;
    display: block;
    margin: 30px 0;
    width: 100%;
    position: relative;
}
.home-cta a .img {
    padding-bottom: 70.36364%;
    display: block;
}
.home-cta a img {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}
.home-cta a img:first-child {
    filter: alpha(opacity=#{ieOpacity});
    opacity: 0;
    z-index: 1;
}
.home-cta a:hover img:first-child {
    filter: alpha(opacity=#{ieOpacity});
    opacity: 1;
}
@media screen and (min-width: 480px) {
    .home-cta a {
        float: left;
        width: 275px;
    }
    
    .home-cta a.cta-customise {
        float: right;
        margin-top: -80px;
    }
}
@media screen and (min-width: 1200px) {
    .home-cta {
        float: right;
        margin-top: -360px;
    }
}
.cta-customise {
    z-index: 1;
}
#introduction {
    padding-top: 60px;
}

/* -----------------------------------------------------------------------------------------------------------------
  
      Homepage > Sustainability
  
  ----------------------------------------------------------------------------------------------------------------- */
.sustainability-copy {
    zoom: 1;
}
.sustainability-copy:before,
.sustainability-copy:after {
    content: "";
    display: table;
}
.sustainability-copy:after {
    clear: both;
}
@media screen and (min-width: 600px) {
    .sustainability-copy p {
        width: 43%;
        float: right;
    }
    
    .sustainability-copy p:first-child {
        float: left;
    }
}
ul.sustainable {
    zoom: 1;
    margin-left: auto;
    margin-right: auto;
    max-width: 820px;
}
ul.sustainable:before,
ul.sustainable:after {
    content: "";
    display: table;
}
ul.sustainable:after {
    clear: both;
}
ul.sustainable li {
    display: block;
    margin: 20px 0;
    position: relative;
    float: left;
}
@media screen and (min-width: 600px) {
    ul.sustainable li {
        width: 45%;
    }
    
    ul.sustainable li.odd {
        padding-right: 10%;
    }
}
ul.sustainable p {
    margin-top: -50px;
    float: left;
}
ul.sustainable i {
    width: 80px;
    line-height: 72px;
    font-size: 60px;
    color: #666;
    text-align: center;
    float: left;
    margin-left: -100px;
}
ul.sustainable i.icon-cloth {
    background-color: #E8F4F0;
}
ul.sustainable i.icon-timer {
    background-color: #DCDDDF;
}
ul.sustainable i.icon-ink {
    background-color: #F2F2F2;
}
ul.sustainable i.icon-water {
    background-color: #FDF0EA;
}
ul.sustainable i.icon-reuse {
    background-color: #fff;
}
ul.sustainable i.icon-plant {
    background-color: #F6EEE0;
}
.csstransitions ul.sustainable li.js-waypoint {
    -webkit-transition: left 1s, opacity 1s;
    -moz-transition: left 1s, opacity 1s;
    -ms-transition: left 1s, opacity 1s;
    -o-transition: left 1s, opacity 1s;
    transition: left 1s, opacity 1s;
    opacity: 0;
}
.csstransitions ul.sustainable li.js-waypoint:nth-child(odd) {
    left: -300px;
}
.csstransitions ul.sustainable li.js-waypoint:nth-child(even) {
    left: 300px;
}
.csstransitions ul.sustainable li.js-waypoint.active {
    opacity: 1;
    left: 0;
}
ul.carbon-neutral {
    font-size: 0;
    line-height: 0;
    text-align: center;
}
ul.carbon-neutral li {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: top;
    font-family: "Jigsaw Regular", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 13px;
    line-height: 1.5;
    color: #514444;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    width: 148px;
    height: 148px;
    padding: 30px;
    text-align: center;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
    background: #fff;
}
ul.carbon-neutral li:first-child {
    margin-right: 20px;
}
ul.carbon-neutral span {
    position: relative;
    z-index: 2;
    display: block;
}
ul.carbon-neutral i {
    font-size: 150px;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    line-height: 138px;
    z-index: 1;
}
ul.carbon-neutral b {
    display: block;
    font-weight: normal;
    line-height: 118px;
    position: relative;
}
ul.carbon-neutral .cover {
    -webkit-transition: top 1s linear;
    -moz-transition: top 1s linear;
    -ms-transition: top 1s linear;
    -o-transition: top 1s linear;
    transition: top 1s linear;
    position: absolute;
    top: 208px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
ul.carbon-neutral li.trees-shrubs .cover {
    background-color: #E8F4F0;
}
ul.carbon-neutral li.trees-shrubs b {
    font-size: 28px;
    top: -17px;
}
ul.carbon-neutral li.co-offset .cover {
    background-color: #F2F2F2;
}
ul.carbon-neutral li.co-offset b {
    font-size: 38px;
    top: -8px;
}
ul.carbon-neutral li.active .cover {
    top: 0;
}
.sustainability-quote {
    max-width: 430px;
    margin: 40px auto;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.sustainability-quote p {
    font-family: "Jigsaw Regular", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 14px;
    /* body font-size */
    
    line-height: 1.5;
    color: #514444;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* -----------------------------------------------------------------------------------------------------------------
  
      Homepage > Collection
  
  ----------------------------------------------------------------------------------------------------------------- */
.indent {
    text-indent: 40px;
}
.rimg {
    display: block;
    background-color: #fff;
}
.-m {
    margin: 50px auto;
}
.p_c_0 {
    margin-left: auto;
    margin-right: auto;
    max-width: 390px;
}
.p_c_1 {
    max-width: 710px;
}
@media screen and (min-width: 1024px) {
    .p_c_3 {
        max-width: 575px;
        float: left;
        width: 50%;
    }
}
@media screen and (min-width: 1024px) {
    .p_c_4 {
        float: left;
        width: 34%;
        margin: 40px 16% 60px -150px;
        position: relative;
        z-index: 1;
        line-height: 2;
    }
}
@media screen and (min-width: 1024px) {
    .p_c_5 {
        float: right;
        width: 22%;
        margin: 52px 23% 50px 0px;
    }
}
@media screen and (min-width: 1024px) {
    .p_c_6 {
        float: right;
        width: 50%;
    }
}
@media screen and (min-width: 1024px) {
    .p_c_7 {
        float: left;
        width: 23%;
        margin-left: 22%;
        margin-top: -40px;
    }
}

/* -----------------------------------------------------------------------------------------------------------------
  
      Homepage > Designers
  
  ----------------------------------------------------------------------------------------------------------------- */
.designer .icon-wave {
    font-size: 30px;
    margin-top: -7px;
    color: #CCC;
}
@media screen and (min-width: 600px) {
    .p_d_0 {
        float: left;
        width: 41%;
    }
}
.p_d_1 {
    position: relative;
    z-index: 1;
}
@media screen and (min-width: 600px) {
    .p_d_1 {
        float: left;
        width: 27%;
        text-align: center;
        margin: 10% 0 0 5%;
    }
}
@media screen and (min-width: 600px) {
    #designers .group+.group {
        margin-top: -20%;
    }
}
@media screen and (min-width: 600px) {
    .p_d_2 {
        float: right;
        width: 41%;
    }
}
.p_d_3 {
    position: relative;
    z-index: 1;
}
@media screen and (min-width: 600px) {
    .p_d_3 {
        float: right;
        width: 27%;
        text-align: center;
        margin: 5% 5% 0 0;
    }
}

/* -----------------------------------------------------------------------------------------------------------------
  
      Homepage > Process
  
  ----------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
    .p_p_0 {
        float: left;
        width: 23%;
        margin-left: 23%;
    }
}
@media screen and (min-width: 768px) {
    .p_p_1 {
        float: right;
        width: 48%;
    }
}
@media screen and (min-width: 768px) {}
.p_p_3 {
    background-color: #EFEFEF;
}
@media screen and (min-width: 768px) {
    .p_p_3 {
        float: left;
        width: 39%;
        margin-left: -3%;
        position: relative;
        z-index: 1;
    }
}
@media screen and (min-width: 768px) {
    .p_p_4 {
        float: left;
        width: 23%;
        margin: 0 0 0 5%;
    }
}
@media screen and (min-width: 768px) {
    .p_p_5 {
        float: left;
        width: 48%;
        margin-top: 0;
    }
}

/* -----------------------------------------------------------------------------------------------------------------
  
      Homepage > Internships
  
  ----------------------------------------------------------------------------------------------------------------- */
.p_i_0 {
    margin-left: auto;
    margin-right: auto;
    max-width: 565px;
}
.p_i_1 {
    max-width: 300px;
}

/* -----------------------------------------------------------------------------------------------------------------
  
      Homepage > Stockists
  
  ----------------------------------------------------------------------------------------------------------------- */
.stockist-list {
    margin-top: 100px;
    margin-bottom: 50px;
}
.stockist-list ul {
    margin-bottom: 3em;
}
.stockist-list li {
    display: block;
    margin-bottom: 10px;
}
.stockist-list a {
    background: none;
    border-bottom: 1px dotted #999;
}
.stockist-list a:hover {
    color: #333;
    border-bottom-color: #666;
}
@media screen and (min-width: 480px) {
    .stockist-list h3 {
        clear: both;
        float: left;
        width: 35%;
        text-align: right;
        font-family: "Jigsaw Regular", sans-serif;
        font-style: normal;
        font-weight: normal;
        font-stretch: normal;
        font-size: 13px;
        line-height: 1.5;
        color: #514444;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }
    
    .stockist-list ul {
        float: right;
        width: 55%;
        list-style: none;
        padding-left: 0;
    }
}

/* -----------------------------------------------------------------------------------------------------------------
  
      Basecloths Archive
  
  ----------------------------------------------------------------------------------------------------------------- */
.page.-basecloths {
    padding-bottom: 0;
}
.basecloth-index {
    background: #fff;
    margin-top: 80px;
}
.basecloth-wrapper {
    padding-top: 46px;
    padding-bottom: 46px;
    border-top: 1px solid #E0E0E0;
    border-bottom: 1px solid #E0E0E0;
    margin-top: -1px;
}

/* -----------------------------------------------------------------------------------------------------------------
  
      Individual Basecloth
  
  ----------------------------------------------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------------------------------------------
  
      Share this Colourway
  
  ----------------------------------------------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------------------------------------------
  
      Feature & Description
  
  ----------------------------------------------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------------------------------------------
  
      Customiser
  
  ----------------------------------------------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------------------------------------------
  
      Swatch hide/show toggle headings
  
  ----------------------------------------------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------------------------------------------
  
      Colour Swatches (displayed on the single pattern page)
  
  ----------------------------------------------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------------------------------------------
  
      Basecloth Swatches (displayed on the single pattern page)
  
  ----------------------------------------------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------------------------------------------
  
      Ordering Info
  
  ----------------------------------------------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------------------------------------------
  
      Ordering Lengths
  
  ----------------------------------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------
      UI Slider
  ------------------------------------------------------------- */

/* -----------------------------------------------------------------------------------------------------------------
  
      Ordering Pricing
  
  ----------------------------------------------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------------------------------------------
  
      Ordering Total
      
  
  ----------------------------------------------------------------------------------------------------------------- */
.strapline {
    font-family: "Jigsaw Light", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 28px;
    line-height: 1.2;
    margin: 0;
    color: #FCF8F9;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: -1px -1px 0px #444, 1px -1px 1px #444, -1px 1px 1px #444, 1px 1px 0px #444;
    max-width: 620px;
}
@media screen and (min-width: 480px) {
    .strapline {
        font-size: 38px;
    }
}
@media screen and (min-width: 568px) {
    .strapline {
        font-size: 38px!important;
    }
}
.no-textshadow .strapline {
    color: #333;
    text-shadow: none;
}
.strapline i {
    overflow: hidden;
    text-shadow: none;
    color: #444;
    font-size: 50%;
}
.strapline i span {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    width: 0 !important;
}
.home-cta {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 480px;
}
.home-cta a {
    -webkit-box-shadow: 10px 10px 0 #ECEBE6;
    -moz-box-shadow: 10px 10px 0 #ECEBE6;
    box-shadow: 10px 10px 0 #ECEBE6;
    background: #F1F1F3;
    display: block;
    margin: 30px 0;
    width: 100%;
    position: relative;
}
.home-cta a .img {
    padding-bottom: 70.36364%;
    display: block;
}
.home-cta a img {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}
.home-cta a img:first-child {
    filter: alpha(opacity=#{ieOpacity});
    opacity: 0;
    z-index: 1;
}
.home-cta a:hover img:first-child {
    filter: alpha(opacity=#{ieOpacity});
    opacity: 1;
}
@media screen and (min-width: 480px) {
    .home-cta a {
        float: left;
        width: 275px;
    }
    
    .home-cta a.cta-customise {
        float: right;
        margin-top: -80px;
    }
}
@media screen and (min-width: 1200px) {
    .home-cta {
        float: right;
        margin-top: -360px;
    }
}
.cta-customise {
    z-index: 1;
}
#introduction {
    padding-top: 60px;
}

/* .bbox{
      height: 500px;
      border: 1px solid;
    } */
.box {
    background-image: url(assets/c49a207e0f89c9290d98fd43a87a8cb0.gif);
    background-size: cover;
    /* <------ */
    
    background-repeat: no-repeat;
    background-position: center center;
    height: 650px;
}

/* .box img{
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 50%; 
    } */
@media screen and (min-width: 330px) {}