/*---------------------------------------.
\    RESET                                \
 `---------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
        display: block;
}
body {
        line-height: 1;
}
ol, ul {
        list-style: none;
}
blockquote, q {
        quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: '';
        content: none;
}
table {
        border-collapse: collapse;
        border-spacing: 0;
}
input 
{
    outline: 0 !important;
}

/*
 *  custom
 */
 
img 
{
    border: 0;
}

/*---------------------------------------.
\    HELPERS                              \
 `---------------------------------------*/

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

.hidden 
{
    display: none;
}

.pr {
    position: relative;
}

.pa {
    position: absolute;
}

.fl {
  float: left !important;
}

.fr {
  float: right !important;
}

.cl 
{
    clear: left;
}

.cr 
{
    clear: right;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.center {
    margin-left: auto;
    margin-right: auto;
}
 
.d-block {
    display: block;
}
 
.d-inline {
    display: inline-block;
}

.litespace-top 
{
    margin-top: 1.0625em;
}
.litespace-bottom 
{
    margin-bottom: 1.0625em;
}

.litespace-both 
{
    margin-top: 1.0625em;
    margin-bottom: 1.0625em;
}

.whitespace-both 
{
    margin-top: 2.125em;
    margin-bottom: 2.125em;
}
.whitespace-top 
{
    margin-top: 2.125em;
}
.whitespace-bottom 
{
    margin-bottom: 2.125em;
}

.seperator {
    margin-top: 1.75em;
    margin-bottom: 1.75em;
}

/*---------------------------------------.
\    GLOBAL                               \
 `---------------------------------------*/

* {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     -webkit-font-smoothing: antialiased;
}

body {
    margin: 0;
    font-size: 100%;
    line-height: 1.4;
} 

h1 
{
    font-size: 1.5em;
    font-weight: 700;
    margin: .325em 0 .75em;
}

h2 
{
    font-size: 1.375em;
    font-weight: 700;
    margin: .325em 0 .75em;
}

h3 
{
    font-size: 1.25em;
    font-weight: 700;
    margin: .325em 0 .75em;
}

h4
{
    font-size: 1.125em;
    font-weight: 700;
    margin: .325em 0 .75em;
}

.content p
, .content ul > li
, .content ol > li 
, .content dl > dt 
, .content dl > dd 
{
    font-size: .875em;
}

.content p ul > li
, .content p ol > li 
{
    font-size: 1em;
}

.content ul
{
	list-style: disc;
	margin-left: 1em;
}
.content ul > li 
{
    padding: 0 1em 1em;
}
.content ol > li 
{
    
}

p 
{
    margin: 0 0 1em;
    font-size: 0.9375em;
}

p.lead 
{
    font-size: 1.125em;
    font-weight: 700;
}

p.small 
{
    font-size: .75em;
}

p.no-whitespace 
{
    margin: 0;
}

p.error 
{
    color: rgb(204, 0, 82) !important;
    margin: .5em 0;
}

p a 
{
    color: rgb(0,0,0);
}

.bold 
{
    font-weight: 700;
}

.extra-bold 
{
    font-weight: 800;
}

.italic 
{
    font-style: italic;
}

.uppercase 
{
    text-transform: uppercase;
}

.content a
{
    color: rgb(54,61,70);
}

strong, b 
{
    font-weight: 900 !important;
}
em
{
    font-style: italic;
}

hr 
{
    margin: 0;
    height: 1px;
    border: 0;
    background: rgb(0,0,0);
}

.rounded 
{
    border-radius: 6px;
}

ol  
{
    list-style: decimal;
    list-style-position: inside;
}

.wrap
{
    -ms-word-break: break-all;
     word-break: break-all;

     /* Non standard for webkit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}

.drop-text 
{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
 
/*---------------------------------------.
\    BUTTONS                              \
 `---------------------------------------*/

.pill 
{
    padding: .625em 1.25em;
    text-decoration: none;
    border: 0;
    border-radius: 6px;
    display: inline-block;
    font-weight: 700;
}
.small.pill 
{
    font-size: .875em;
}
.large.pill 
{
    font-size: 1.125em;
}

.button
{
    padding: .625em 1.25em;
    text-decoration: none;
    border: 0;
}

.chunky
{
    text-decoration: none;
    border-bottom: 5px solid rgb(210,168,94);
    font-weight: 900;
    font-size: 1.125em;
    display: inline-block;
    margin: .5em 0 0;
    
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}
.chunky:hover
{
    border-bottom: .3125em solid rgb(154,157,162);
}
 
/*---------------------------------------.
\    THE GRID (where necessary)           \
 `---------------------------------------*/
 
.grid-row 
{
   margin-left: -1.5em;
   margin-right: -1.5em;
}
.grid-col 
{
    padding-left: 1.5em;
    padding-right: 1.5em;
    width: 100%;
    float: left;
}

.grid-col.one       { width: 8.333%; }
.grid-col.two       { width: 16.666%; }
.grid-col.three     { width: 25%; }
.grid-col.four      { width: 33.333%; }
.grid-col.five      { width: 41.666%; }
.grid-col.six       { width: 50%; }
.grid-col.seven     { width: 58.333%; }
.grid-col.eight     { width: 66.666%; }
.grid-col.nine      { width: 75%; }
.grid-col.ten       { width: 83.333%; }
.grid-col.eleven    { width: 91.666%; }
.grid-col.twelve    { width: 100%; }

/*---------------------------------------.
\    STRUCTURE                            \
 `---------------------------------------*/

.pinch
{
    width: 64.25em;
    margin: 0 auto;
    position: relative;
    padding: 0 1.5em;
}

.inner-wrapper
{
    padding: 1.375em 0;
}

.main .structure 
{
    margin: 2.5em 0 5em;
}
 
/*---------------------------------------.
\    LISTS                                \
 `---------------------------------------*/
 
ul.inline 
, ol.inline 
{
    
}
 
ul.inline > li 
, ol.inline > li
{
    float: left;
}

ul.disc 
{
    list-style: disc;
    list-style-position: inside;
}

/*---------------------------------------.
\    TEXT                                 \
 `---------------------------------------*/

/*  
    "proxima-nova"  
        400 - Regular
        700 - Bold
*/

.text-white
, a.text-white
, .text-white a
, .text-white p
, .text-white label 
{
    color: rgb(255,255,255);
}

.text-pink
, a.text-pink
, .text-pink a
, .text-pink p
, .text-pink label 
{
    color: rgb(255,104,144);
}

body
{
    color: rgb(0,0,0);
}

body
, .button
, input
, testarea
{
    font-family: "proxima-nova", Helvetica, Arial, sans-serif;
}

/*---------------------------------------.
\    BACKGROUNDS                          \
 `---------------------------------------*/
 
.bg-white {
    background: rgb(255,255,255);
}
.bg-light-grey {
    background: rgb(187,187,187);
}
.bg-turquoise {
    background: rgb(47,176,203);
}
.bg-deep-blue {
    background: rgb(20,70,81);
}
.bg-pink {
    background: rgb(255,104,144);
}

/*---------------------------------------.
\    IMAGES                               \
 `---------------------------------------*/

img 
{
    max-width: 100%;
}

img.circle 
{
    border-radius: 50%;
}

.bg-image 
{
    background-repeat: no-repeat;
    background-position: top left;
}

.bg-scale 
{
    background-size: 100%;
}

.bg-absolute-fill 
{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

/*---------------------------------------.
\    ICONS                                \
 `---------------------------------------*/
 
 .icon 
 {
    background-repeat: no-repeat;
    display: inline-block;
    background-image: url(/static/img/structural/sprite.png);
    text-indent: -9999px;
    overflow: hidden;
}

.icon-checkout 
{
    height: 21px;
    width: 28px;
    background-position: 0 0;
    position: relative;
    top: 5px;
}
.icon-basket 
{
    height: 21px;
    width: 28px;
    background-position: -30px 0;
    position: relative;
    top: 5px;
}
.icon-delete 
{
    height: 18px;
    width: 18px;
    background-position: -60px 0;
    position: relative;
    top: 5px;
}
.icon-plus 
{
    height: 41px;
    width: 42px;
    background-position: 0 -50px;
}
.icon-buy-now 
{
    height: 115px;
    width: 115px;
    background-position: 0 -100px;
}
 
/*---------------------------------------.
\    HEADER                               \
 `---------------------------------------*/
 
.masthead 
{
    background: url(/static/img/structural/bg-header.jpg) no-repeat top center;
    height: 11.375em;
    
}

.masthead .logo 
{
    margin-left: -70px;
}

.masthead .main-nav 
{
    position: absolute;
    bottom: 1em;
}

.masthead .utility 
{
    position: absolute;
    top: 0;
    right: 0;
}

.masthead .call-to-action
{
    height: 60px;
    line-height: 60px;
    float: left;
    padding: 0 1.5em;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background: rgb(255,104,144);
    margin-right: 1em;
    -webkit-box-shadow:  0px 0px 15px 1px rgba(76, 177, 225, 1);
        
        box-shadow:  0px 0px 15px 1px rgba(76, 177, 225, 1);
}
.masthead .utility-nav
{
    float: left;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-box-shadow:  0px 0px 15px 1px rgba(76, 177, 225, 1);
        
        box-shadow:  0px 0px 15px 1px rgba(76, 177, 225, 1);
}

.masthead .call-to-action p
{
    color: rgb(255,255,255);
    text-transform: uppercase;
    margin: 0;
    font-size: 1.25em;
}

/*---------------------------------------.
\    HERO                                 \
 `---------------------------------------*/

.hero 
{
    height: 28em;
    background: url(/static/img/structural/bg-banner.jpg) no-repeat top center;
}

.hero .warning
{
    position: absolute;
    top: 9.875em;
    left: 3.25em;
}
.hero blockquote
{
    position: absolute;
    top: 7.75em;
    left: 48.25em;
    width: 18.75em;
}
.hero blockquote p 
{
    color: rgb(255,255,255);
    font-size: 1.125em;
    font-weight: 700;
}

/*---------------------------------------.
\    NAVIGATION                           \
 `---------------------------------------*/
 
.main-nav ul li 
, .utility-nav ul li
{
    display: inline;
}

.main-nav ul
{
} 
.main-nav ul li 
{
    padding-right: .5em;
}
.main-nav ul li a
{
    display: inline-block;
    background: rgb(58,203,234);
    color: rgb(255,255,255);
    padding: .5em 1em;
    text-decoration: none;
    font-size: 1.125em;
    font-weight: 700;
    border-radius: 8px;
}
.main-nav ul li a:hover {
    background: rgb(47,176,203);
}
.main-nav ul li a.active {
    background: rgb(20,70,81);
}


.utility-nav ul li 
{
}
.utility-nav ul li a
{
    height: 60px;
    line-height: 60px;
    display: inline-block;
    background: rgb(255,255,255);
    color: rgb(0,0,0);
    padding: 0 1.125em;
    font-size: .875em;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    border-left: 1px solid rgb(220,245,250);
}
.utility-nav ul li:first-child a
{
    border-left: 0;
    border-bottom-left-radius: 8px;
}
.utility-nav ul li.last a
{
    border-bottom-right-radius: 8px;
}

/*---------------------------------------.
\    FORMS                                \
 `---------------------------------------*/

.form fieldset 
{
    clear: both;
    margin: .5em 0;
}

.form label 
{
    float: left;
    width: 25%;
    padding: .75em 2.5% .75em 0;
    font-weight: 700;
    text-transform: uppercase;
}

.form input[type="text"]
, .form input[type="number"]
, .form input[type="email"]
, .form textarea
{
    border: 1px solid rgb(60,203,234);
    border-radius: 8px;
    padding: .75em .75em;
    font-size: .875em;
    margin: 0 0 .625em;
    width: 100%;
    float: left;
    width: 75%;
    outline: 0;
}

.form fieldset.checkbox label 
{
    float: none;
}
.form fieldset.checkbox input 
{
}

.form textarea
{
    min-height: 12em;
    resize: none;
}

.form .action
{
    padding: 1em 0;
}

.form .action .button
{
    border-radius: 6px;
    font-size: 1.125em;
    padding: .5em 1.75em;
}
 
/*---------------------------------------.
\    MOLECULES                            \
 `---------------------------------------*/

.breadcrumbs 
{
    font-size: 1.125em;
    font-weight: 700;
    text-transform: uppercase;
}

figure.penguins 
{
    position: relative;
}
figure.penguins.border-left
{
    border-left: 1px solid rgb(172,173,176);
    padding-left: 1em;
}

figure.penguins a 
{
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -57px;
}


/*
 *  PRODUCT
 */
 
.product-view figure
{
    margin: 0 0 1em 0;
}
.product-view .headings
, .product-view .values
{
    float: left;
    margin-bottom: 1em;
}
.product-view .headings
{
    width: 33.333%;
}
.product-view .values
{
    width: 66.666%;
}
.product-view .headings li
{
    text-transform: uppercase;
    font-weight: 700;
    font-size: .875em;
    line-height: 65px;
}
.product-view .headings li
, .product-view .values li
{
    height: 60px;
}
.product-view .values
{
    border: 1px solid rgb(60,203,234);
    border-radius: 8px;
}
.product-view .values li
{
    line-height: 60px;
    padding: 0 1em;
    border-top: 1px solid rgb(220,245,250);
    text-align: right;
}
.product-view .values li input
{
    padding: .125em 1em;
    max-width: 5em;
}
.product-view .values li:first-child
{
    border-top: 0;
}


/*
 *  CHECKOUT
 */
 
.shopping-cart-lines 
{
    border: 1px solid rgb(60,203,234);
    border-radius: 8px;
    margin: 0 0 1em;
}

.shopping-cart-lines > table
{
    width: 100%;
    border-collapse: collapse;
}

.shopping-cart-lines > table th
, .shopping-cart-lines > table td
{
    font-size: .875em;
    text-align: left;
    padding: 1em;
    border-style: solid; 
    border-color: rgb(220,245,250);
}

.shopping-cart-lines > table th
{
    text-transform: uppercase;
    font-weight: 700;
    border-width: 0 0 1px 1px;
}
.shopping-cart-lines > table th:first-of-type
{
    border-left-width: 0;
}

.shopping-cart-lines > table td
{
    border-width: 0 0 0 1px;
}
.shopping-cart-lines > table td:first-of-type
{
    border-left-width: 0;
}


.shopping-cart-totals
{
    float: right;
    width: 22em;
    border: 1px solid rgb(60,203,234);
    border-radius: 8px;
    margin: 0 0 1em;
}

.shopping-cart-totals > table
{
    width: 100%;
    border-collapse: collapse;
}

.shopping-cart-totals > table th
, .shopping-cart-totals > table td
{
    font-size: .875em;
    padding: 1em;
    border-style: solid; 
    border-color: rgb(220,245,250);
}

.shopping-cart-totals > table th
{
    text-align: left;
    text-transform: uppercase;
    font-weight: 700;
    border-width: 1px 0 0 0;
}

.shopping-cart-totals > table td
{
    text-align: right;
    border-width: 1px 0 0 1px;
}

.shopping-cart-totals > table tr:first-of-type td
, .shopping-cart-totals > table tr:first-of-type th
{
    border-top-width: 0;
}

.shopping-checkout-form 
{
    width: 40em;
}

.shopping-checkout-form .payment-message
{
    max-width: 20em;
    float: left;
}
.shopping-checkout-form .payment-img
{
    float: left;
}

/*---------------------------------------.
\    FOOTER                               \
 `---------------------------------------*/

footer .structure 
{
    margin: 1.375em 0;
}
footer .structure .copyright p 
{
    font-size: .875em;
}
footer .structure .copyright strong 
{
    margin-right: 2em;
}