@import url("https://use.typekit.net/xub5gtk.css");
@import url("spectre.min.css");

* { box-sizing: border-box; margin: 0; padding: 0 }

/* Override Spectre's defaults for slightly larger margins
--------------------------------- */

html { font-size: 62.5% }

body { color: #3D3E56; font-family: "kohinoor", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 1.8em; font-weight: 400; font-style: normal; letter-spacing: 0; background: #3D3E56; line-height: 1.5; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-y: scroll }

.container { padding-left: 1.6rem; padding-right: 1.6rem; box-sizing: border-box }
.columns { margin-left: -0.8rem; margin-right: -0.8rem }
.column { padding-left: 1.6rem; padding-right: 1.6rem; box-sizing: border-box }
.btn { font-size: 1.8rem; padding: 1.2rem 1.6rem; line-height: 1; display: inline-block; height: auto; border-radius: 0.4rem }
.btn.btn-primary { background-color: #FE4B45; border-color: #FE4B45 }
.btn.btn-primary:hover, .btn.btn-primary:focus { background-color: #F00901; border-color: #F00901; background-image: initial; }
.btn.btn-link { color: #989788 }
.btn.btn-link:hover, .btn.btn-link:focus { color: #737264 }

.btn[rel="external"] { padding-right: 4rem; background-image: url("../img/external.svg"); background-position: right 1.6rem center; background-repeat: no-repeat }
.btn[rel="external"]:hover, .btn[rel="external"]:focus { background-image: url("../img/external.svg"); background-position: right 1.6rem center; background-repeat: no-repeat }

a { color: inherit; text-decoration: underline }
a:hover { color: inherit; text-decoration: none }


/* Wantful styles
--------------------------------- */

.labelbox { margin: 4rem 0 0 0 }
.b-t { border-top: 1px solid rgba(255,255,255,0.08);  }
.b-b { border-bottom: 1px solid rgba(255,255,255,0.08) }
.caption { display: block; line-height: 3.2rem; height: 3.2rem; margin: 1.6rem 0; font-size: 1.6rem }
.caption em { font-style: normal; font-weight: 500; color: rgba(255,255,255,0.84) }

@media (min-width:767px) {
    .caption { font-size: inherit }
}

.pnav { display: inline-block; margin: 1.6rem 0 1.6rem 0.8rem; text-align: center; width: 3.2rem; height: 3.2rem }
.pnav img { width: 100%; height: 100% }
span.pnav img { opacity: 0.2 }

.mt-full { margin-top: 6rem }
.mt-half { margin-top: 1.5rem }
.mb-half { margin-bottom: 4rem }

.inverted { color: rgba(255,255,255,0.48) }

.product-card { border-radius: 0.4rem; transition: transform 0.25s ease; overflow: hidden }
.product-card:hover { transform: translateY(-0.4rem) }
.product-card footer { padding: 2rem; background-color: #E5E6ED }
.product-card figure { object-fit: cover; width: 100%; margin: 0 }
.product-card figure img { display: block; object-fit: cover; width: 100% }
.product-card .brand { color: #989788; text-transform: uppercase; font-size: 1.2rem; letter-spacing: 0.1rem; display: block; font-weight: 500; }
.product-card .title { display: block; color: #3D3E56; margin: 0.3rem 0; text-decoration: none }
.product-card .price { display: block; color: #989788; font-size: 1.4rem }
.product-card a { text-decoration: none }
.masonry .product-card { margin-bottom: 3.2rem }

.product-bg { background: #35364A url("../img/footer.svg") top center no-repeat; padding-top: 28rem }

@media (min-width:1480px) {
    .product-bg { padding-top: 18vw; background-size: contain } 
}

#header { display: block; padding-top: 0.8rem; width: 100%; z-index: 9; background-color: #3D3E56; margin-bottom: 6.4rem }

#nav { position: relative; font-weight: 400 }
#nav li { list-style: none }
#nav > li { display: inline-block; position: relative; margin-right: 1rem }
#nav > li:not(:first-child) a { display: block; padding: 0.8rem 1.2rem }

#nav > li:not(:first-child) > a { padding-right: 2.4rem; background: url("../img/caret-d.svg") right center no-repeat }

#nav ul { position: absolute; top: 3.6rem; right: -0.8rem; width: 24rem; background-color: #35364A; display: none; border-radius: 4px; z-index: 99; padding: 0.8rem; box-shadow: 0px 4px 12px rgba(0,0,0,0.24); border: 1px solid rgba(0,0,0,0.16) }

@media (min-width:767px) {
    #nav ul { left: -0.8rem; right: auto }
}

.scrollable { position: relative; width: 100%; max-height: 50rem; padding-bottom: 2.4rem; overflow-y: scroll; }
#fade { background: url("../img/fade.svg") center center no-repeat; width: 100%; height: 4.8rem; display: block; content: ""; position: absolute; bottom: 0; left: 0; z-index: 9 }

#nav > li:hover ul { display: block }
#nav a { text-decoration: none; display: block; color: rgba(255,255,255,0.8) }
#nav a:hover { background-color: rgba(61,62,86,0.72) }

#logo { width: 9.9rem; height: 2rem; display: block; padding: 0; background: url("../img/wantful-logo.svg") left center no-repeat; background-size: contain; position: relative; top: -0.05rem }
#logo:hover { opacity: 0.8 }
#logo span { visibility: hidden }

@media (min-width:767px) {
    #logo { width: 11.9rem; height: 2.4rem; top: -0.5rem }
    #nav > li { margin-right: 2rem }
}

h1 { font-weight: 500; color: rgba(255,255,255,0.84); font-size: 2.4rem; line-height: 1.4; word-spacing: 0.2rem }

#footer { width: 100%; padding: 4.8rem 0; font-weight: 400 }
#footer p { color: rgba(255,255,255,0.25); font-size: 1.4rem }

.pagemeta { display: block; margin-bottom: 3rem }

.hero { padding-top: 6.4rem }
.text-subtle { color: rgba(255,255,255,0.32);  }

@media (max-width:767px) {
    .storebtndiv { padding-bottom: 2rem }
}
@media (min-width:768px) {
    .storebtndiv { text-align: right }
    .storebtndiv a { position: relative; bottom: -1rem }
}

/* Minor alignments that kick in for tablets and beyond */
@media (min-width:841px) {
    
    h1 { font-size: 4.8rem; line-height: 1.25 }
    
}