<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="//cdn.shopify.com/s/files/1/0028/6132/t/4/assets/jquery-min.js?15684938142982497657"></script>
<script src="//cdn.shopify.com/s/files/1/0028/6132/t/4/assets/breakpoints-min.js?15684938142982497657?v=1.2"></script>
<script src="//cdn.shopify.com/s/files/1/0028/6132/t/4/assets/plugins-min.js?15684938142982497657?v=1.2"></script>
<script src="//cdn.shopify.com/s/files/1/0028/6132/t/4/assets/scripts-min.js?15684938142982497657?v=1.2"></script>
<!-- Liquid Shop JS -->
<div class='divider'></div>
<div id='anatomy'>
<div class='wrapper collapse-small'>
<div class='anatomy-title mast-with-stroke'>
<h2 class='center'>
<span>Jean Anatomy</span>
</h2>
</div>
</div>
<div class='anatomy-inner'>
<div class='anatomy-contain'>
<a class='anatomy-hover no-ajax' data-hover='patch' href='#' title='Patch'>
<span class='icon'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 371.2 371.2" enable-background="new 0 0 371.2 371.2"><path d="M371.2 160.2H211V0h-50.8v160.2H0V211h160.2v160.2H211V211h160.2z"/></svg>
</span>
</a>
<a class='anatomy-hover no-ajax' data-hover='denim' href='#' title='Denim'>
<span class='icon'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 371.2 371.2" enable-background="new 0 0 371.2 371.2"><path d="M371.2 160.2H211V0h-50.8v160.2H0V211h160.2v160.2H211V211h160.2z"/></svg>
</span>
</a>
<a class='anatomy-hover no-ajax' data-hover='waistband' href='#' title='Waistband'>
<span class='icon'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 371.2 371.2" enable-background="new 0 0 371.2 371.2"><path d="M371.2 160.2H211V0h-50.8v160.2H0V211h160.2v160.2H211V211h160.2z"/></svg>
</span>
</a>
<a class='anatomy-hover no-ajax' data-hover='pocketbags' href='#' title='Pocketbags'>
<span class='icon'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 371.2 371.2" enable-background="new 0 0 371.2 371.2"><path d="M371.2 160.2H211V0h-50.8v160.2H0V211h160.2v160.2H211V211h160.2z"/></svg>
</span>
</a>
<a class='anatomy-hover no-ajax' data-hover='details' href='#' title='Details'>
<span class='icon'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 371.2 371.2" enable-background="new 0 0 371.2 371.2"><path d="M371.2 160.2H211V0h-50.8v160.2H0V211h160.2v160.2H211V211h160.2z"/></svg>
</span>
</a>
<div class='anatomy-info-contain left'>
<div class='anatomy-onboarding'>
<h5>Click a + sign to learn more</h5>
</div>
<div class='anatomy-info' data-hover='waistband'>
<h6>The Waistband Stitch</h6>
<p class='p-small'>
We utilize a continuous tucked chainstitch on our jean waistbands. Instead of terminating the chainstitch and finishing with a single needle, we run the chainstitch off the waistband and then tuck it in – this prevents the stitch from unraveling over time.
</p>
<a class='close-anatomy js-close-anatomy text-link text-link-small' href='#'>Close</a>
<a class='x-close js-close-anatomy' href='#'>X</a>
</div>
<div class='anatomy-info' data-hover='details'>
<h6>The Details</h6>
<p class='p-small'>
We don't like flashy details, which is why we chose to keep the coin pocket selvedge hidden. That being said, we do enjoy small touches that only the wearer sees, things that let our customer know that their jeans were thoughtfully put together. You'll also find a hidden selvedge detail on the inside of the fly.
</p>
<a class='close-anatomy js-close-anatomy text-link text-link-small' href='#'>Close</a>
<a class='x-close js-close-anatomy' href='#'>X</a>
</div>
</div>
<div class='anatomy-info-contain right'>
<div class='anatomy-info' data-hover='patch'>
<h6>The Patch</h6>
<p class='p-small'>
Our patches are made for us by our good friends at Tanner Goods, a leather goods company based in Portland, OR. We use heavyweight natural tan english bridle leather that will age richly over time alongside the jeans: as the denim lightens, the patch darkness.
</p>
<a class='close-anatomy js-close-anatomy text-link text-link-small' href='#'>Close</a>
<a class='x-close js-close-anatomy' href='#'>X</a>
</div>
<div class='anatomy-info' data-hover='pocketbags'>
<h6>The Pocketbags</h6>
<p class='p-small'>
An often overlooked detail, pocketbags are extremely important considering how much they're used and how much wear and tear they endure from carrying your daily essentials. We elected to use a 100% cotton 8oz twill fabric for our pocketing; some might call this overkill, but we're sure our pocketbags will withstand more abuse than almost any other jean on the market.
</p>
<a class='close-anatomy js-close-anatomy text-link text-link-small' href='#'>Close</a>
<a class='x-close js-close-anatomy' href='#'>X</a>
</div>
<div class='anatomy-info' data-hover='denim'>
<h6>The Denim</h6>
<p class='p-small'>
We have the privilege of working with Okayama based Kuroki Mills – one of the most famous denim mills in Japan – to produce our own custom fabric. This is a major challenge for small companies like ours as costs and yardage minimimums become preventative factors, but, it was important that we offer a textile that is completely unique to our jeans, something that no on else can buy.
</p>
<a class='close-anatomy js-close-anatomy text-link text-link-small' href='#'>Close</a>
<a class='x-close js-close-anatomy' href='#'>X</a>
</div>
</div>
<div class='anatomy-img'>
<img alt='3sixteen Jean Anatomy' src="//cdn.shopify.com/s/files/1/0028/6132/t/4/assets/anatomy_jean.jpg?15684938142982497657">
</div>
</div>
</div>
</div>
</div>
.maintenance .site-nav, .maintenance .link-to-nav, .maintenance .link-to-cart, .maintenance .mobile-nav, .maintenance .footer-links:first-of-type, .maintenance .footer-right {
display: none !important;
}
.error-404 {
padding-bottom: 4rem;
padding-top: 4rem;
}
@media screen and (min-width: 768px) {
.error-404 {
padding-bottom: 10rem;
padding-top: 10rem;
}
}
.error-404 h1 {
margin-bottom: 1rem;
}
.error-404 p {
margin-bottom: 1.5rem;
}
.error-404 .button {
margin: 0 auto;
}
#fit-guide {
margin-top: -2rem;
padding-top: 2rem;
}
#fit-guide .fit-title {
margin-bottom: -1rem;
}
#fit-guide .fit-title span {
background: #fff none repeat scroll 0 0;
display: table;
margin: 0 auto;
padding: 0 1rem;
position: relative;
z-index: 2;
}
#fit-guide .shop-fit {
color: #aaa;
font-weight: 500;
margin-left: 0.45rem;
opacity: 0.5;
transition: all 250ms ease-out 0s;
vertical-align: middle;
}
#fit-guide .shop-fit .arrow {
display: inline;
margin-left: -0.1rem;
}
#fit-guide .shop-fit:hover {
color: #c8b47d;
transition: all 200ms ease-out 0s;
}
#fit-guide .fit-nav-outer {
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
border-top: 1px solid #e5e5e5;
margin: 0 auto 2rem;
padding-top: 1rem;
width: 95%;
}
@media screen and (min-width: 768px) {
#fit-guide .fit-nav-outer {
padding-top: 1.5rem;
width: 77%;
}
}
#fit-guide .fit-nav-inner {
position: relative;
text-align: center;
top: 0.35rem;
}
#fit-guide .fit-nav-inner h5 {
margin-right: 0.6rem;
}
#fit-guide .fit-nav-inner h5, #fit-guide .fit-nav-inner .fit-nav {
display: inline-block;
}
#fit-guide .fit-nav-inner .fit-nav li {
display: inline-block;
}
#fit-guide .fit-nav-inner .fit-nav li::after {
color: #ddd;
content: "–";
display: inline-block;
margin: 0 0.25rem;
}
#fit-guide .fit-nav-inner .fit-nav li:last-of-type::after {
display: none;
}
#fit-guide .fit-nav-inner .fit-nav a span {
color: #aaa;
}
#fit-guide .fit-nav-inner .fit-nav a:hover span {
color: #c8b47d;
}
#fit-guide .fit-nav-inner .fit-nav a.active span {
color: #333;
}
#fit-guide .fg-slider {
margin-bottom: 1rem;
}
@media screen and (max-width: 767px) {
#fit-guide .fit-view > li {
margin-bottom: 1.5rem;
}
#fit-guide .fit-view > li:nth-child(2n) {
margin-right: 0;
}
#fit-guide .fit-view > li:nth-child(2n+1) {
clear: left;
}
}
#fit-guide .fit-view > li:hover .shop-fit {
opacity: 1;
}
#fit-guide .fit-view h1 {
margin-bottom: 0.5rem;
}
@media screen and (max-width: 767px) {
#fit-guide .fit-view h1 {
font-size: 0.8125rem;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
#fit-guide .fit-view h1 {
font-size: 0.9375rem;
}
}
#fit-guide .fit-view ul {
color: #979797;
line-height: 1.2;
}
#fit-guide .fit-view ul li {
margin-bottom: 0;
}
#anatomy {
margin-top: -2rem;
padding-top: 2rem;
}
#anatomy .anatomy-inner {
background: #f1f1f1 none repeat scroll 0 0;
overflow: hidden;
position: relative;
}
#anatomy .anatomy-contain {
margin: 0 auto;
max-width: 1600px;
position: relative;
}
#anatomy .anatomy-title {
margin: 0 auto 1rem;
}
@media screen and (min-width: 1024px) {
#anatomy .anatomy-title {
margin: 0 auto 2rem;
}
}
#anatomy .anatomy-hover {
background-color: #000;
border: 2px solid transparent;
border-radius: 1.05rem;
height: 2.1rem;
margin-left: -1.05rem;
margin-top: -1.05rem;
position: absolute;
transition: all 250ms ease-out 0s;
width: 2.1rem;
z-index: 1;
}
#anatomy .anatomy-hover .icon {
display: block;
left: 25%;
position: absolute;
top: 25%;
width: 50%;
}
#anatomy .anatomy-hover .icon svg {
display: block;
transition: all 250ms ease-out 0s;
}
#anatomy .anatomy-hover .icon svg > path {
fill: #fff;
transition: fill 250ms ease-out 0s;
}
#anatomy .anatomy-hover:hover {
background-color: #000;
transition: all 200ms ease-out 0s;
}
#anatomy .anatomy-hover:hover .icon svg > path {
fill: #c8b47d;
transition: fill 200ms ease-out 0s;
}
#anatomy .anatomy-hover::before {
border-top: 2px solid #c8b47d;
content: "";
display: none;
margin-top: -2px;
opacity: 0;
pointer-events: none;
position: absolute;
top: 50%;
transition: opacity 250ms ease-out 0s;
width: 1000%;
}
@media screen and (min-width: 1024px) {
#anatomy .anatomy-hover::before {
display: block;
}
}
#anatomy .anatomy-hover.active {
background-color: transparent;
border: 2px solid #c8b47d;
transition: all 400ms ease-out 0s;
}
#anatomy .anatomy-hover.active::before {
opacity: 1;
transition: opacity 400ms ease-out 0s;
}
#anatomy .anatomy-hover.active .icon svg {
transform: rotateZ(135deg) scale(0.85);
transition: all 400ms ease-out 0s;
}
#anatomy .anatomy-hover.active .icon svg > path {
fill: #c8b47d;
transition: fill 400ms ease-out 0s;
}
#anatomy .anatomy-hover[data-hover="patch"] {
left: 63%;
top: 12.25%;
}
@media screen and (min-width: 1024px) {
#anatomy .anatomy-hover[data-hover="patch"] {
left: 56.3%;
}
}
#anatomy .anatomy-hover[data-hover="patch"]::before {
left: 100%;
}
#anatomy .anatomy-hover[data-hover="denim"] {
left: 77%;
top: 89%;
}
@media screen and (min-width: 1024px) {
#anatomy .anatomy-hover[data-hover="denim"] {
left: 66%;
top: 86%;
}
}
#anatomy .anatomy-hover[data-hover="denim"]::before {
left: 100%;
}
#anatomy .anatomy-hover[data-hover="waistband"] {
left: 37%;
top: 8%;
}
@media screen and (min-width: 1024px) {
#anatomy .anatomy-hover[data-hover="waistband"] {
left: 41%;
top: 10.5%;
}
}
#anatomy .anatomy-hover[data-hover="waistband"]::before {
right: 100%;
}
#anatomy .anatomy-hover[data-hover="pocketbags"] {
left: 68%;
top: 25%;
}
@media screen and (min-width: 1024px) {
#anatomy .anatomy-hover[data-hover="pocketbags"] {
left: 59%;
top: 26.5%;
}
}
#anatomy .anatomy-hover[data-hover="pocketbags"]::before {
left: 100%;
}
#anatomy .anatomy-hover[data-hover="details"] {
left: 30%;
top: 31.5%;
}
@media screen and (min-width: 1024px) {
#anatomy .anatomy-hover[data-hover="details"] {
left: 40%;
}
}
#anatomy .anatomy-hover[data-hover="details"]::before {
right: 100%;
}
@media screen and (min-width: 1024px) {
#anatomy .anatomy-info-contain {
background: #f1f1f1 none repeat scroll 0 0;
height: 100%;
position: absolute;
top: 0;
width: 27%;
z-index: 2;
}
#anatomy .anatomy-info-contain.right {
right: 2rem;
}
#anatomy .anatomy-info-contain.right .anatomy-info {
border-left: 2px solid #c8b47d;
padding-left: 1rem;
}
#anatomy .anatomy-info-contain.left {
left: 2rem;
}
#anatomy .anatomy-info-contain.left .anatomy-info {
border-right: 2px solid #c8b47d;
padding-right: 1rem;
}
}
#anatomy .anatomy-onboarding {
bottom: 1.5rem;
left: 0;
position: absolute;
}
#anatomy .anatomy-info {
background-color: rgba(255, 255, 255, 0.8);
bottom: 1rem;
display: none;
left: 1rem;
padding: 1.5rem;
position: absolute;
right: 1rem;
top: 1rem;
z-index: 3;
}
@media screen and (min-width: 1024px) {
#anatomy .anatomy-info {
background-color: transparent;
bottom: auto;
left: 0;
padding: 0;
right: auto;
top: 0;
transform: translateY(-2%);
transition-duration: 400ms;
transition-property: transform;
transition-timing-function: ease-out;
width: 100%;
}
}
@media screen and (min-width: 1024px) {
#anatomy .anatomy-info[data-hover="pocketbags"] {
top: 22.5%;
}
}
@media screen and (min-width: 1024px) {
#anatomy .anatomy-info[data-hover="details"] {
top: 27%;
}
}
@media screen and (min-width: 1024px) {
#anatomy .anatomy-info[data-hover="denim"] {
bottom: 13%;
top: auto;
}
}
@media screen and (min-width: 1024px) {
#anatomy .anatomy-info[data-hover="waistband"] {
top: 6.5%;
}
}
@media screen and (min-width: 1024px) {
#anatomy .anatomy-info[data-hover="patch"] {
top: 8%;
}
}
#anatomy .anatomy-info.active {
transform: translateY(0px);
}
#anatomy .anatomy-info h6 {
margin-bottom: 0.5rem;
}
@media screen and (min-width: 1280px) {
#anatomy .anatomy-info h6 {
font-size: 0.75rem;
}
}
#anatomy .anatomy-info .close-anatomy {
display: table;
margin-top: 0.5rem;
}
@media screen and (min-width: 1024px) {
#anatomy .anatomy-info .close-anatomy {
display: none;
}
}
#anatomy .anatomy-info .x-close {
background-image: url(" //cdn.shopify.com/s/files/1/0028/6132/t/4/assets/icon-x_black.svg?1180032980849523152 ");
background-position: center center;
background-repeat: no-repeat;
background-size: 50% auto;
display: block;
height: 1.5rem;
overflow: hidden;
position: absolute;
right: 0.75rem;
text-indent: 101%;
top: 0.75rem;
white-space: nowrap;
width: 1.5rem;
}
@media screen and (min-width: 1024px) {
#anatomy .anatomy-info .x-close {
display: none;
}
}
#anatomy .anatomy-img {
overflow: hidden;
padding-bottom: 130%;
position: relative;
}
@media screen and (min-width: 1024px) {
#anatomy .anatomy-img {
padding-bottom: 0;
position: static;
}
}
#anatomy .anatomy-img img {
display: block;
height: 100%;
left: -47%;
margin: 0 auto;
max-width: none;
position: absolute;
top: 0;
width: auto;
}
@media screen and (min-width: 1024px) {
#anatomy .anatomy-img img {
height: auto;
left: auto;
max-width: 100%;
position: static;
top: auto;
}
}
