body {font-size:19px;line-height:1.55;color:#1a1a11;background:#fff;}
img {max-width:100%;height:auto;}
a {color:#1a1a11;text-decoration:none;border-bottom:1px solid;}
p {margin-bottom:.8em;}
p strong {font-weight:900;}

h1 {font-size:3.6em;font-weight:900;color:#ff7600;letter-spacing:-0.02em;line-height:1;margin:0 0 .15em -.07em;}
h2 {font-size:2.6em;font-weight:900;color:#ff7600;letter-spacing:-0.02em;line-height:1;margin:.9em 0 .3em -.02em;}
h3 {font-weight:900;font-size:1em;clear:both;}
h4 {font-size:1em;font-weight:normal;letter-spacing:.1em;text-transform:uppercase;margin:3em 0 .1em -.02em;}

input, select {font-family:'Output Sans';}

blockquote cite {opacity:.5;font-style:normal;}
blockquote span.quote {margin-left:-.5em;}
.pullquote {font-size:2.7em;line-height:1.08;font-weight:900;max-width:60%;}
.pullquote cite {position:relative;font-style:normal;font-size:.45em;font-weight:normal;top:-.4em;}
.pullquote span.quote {margin-left:-.56em;}

section {clear:both;overflow:hidden;max-width:75em;margin:0 auto;}

.nav {clear:both;padding:1.2em 0;color:#fff;background:#1a1a11;}
.nav-cont {max-width:75em;margin:0 auto;}
.nav a {color:#fff;border:none;}
.nav a:hover, .nav a.selected {border-bottom:1px solid;}
.nav ul {text-transform:uppercase;margin:0 8%;}
.nav ul li {display:inline-block;margin-right:2em;font-size:.85em;letter-spacing:.04em;}
.nav .social {float:right;margin:.3em 0 0 0;}
.social a {line-height:1;display:inline-block;float:left;padding:0;border:0;}
.social a+a {margin:0 0 0 1.4em;}
.social svg {fill:#fff;width:1.2em;height:1.2em;}
.social a:hover {opacity:.4;border:0;}
.social a:last-of-type svg {width:1.4em;height:1.4em;margin-top:-.1em;}

div.social {font-size:.9em;display:none;margin:0 4%;float:right;padding:2em 0 0 0;}
div.social svg {fill:#1a1a11;}

.border {position:relative;border:1px solid;border-bottom:0;margin:4em 8% 0 8%;padding-bottom:4em;overflow:visible;}
.border:before {content:'';background:#ffc899;width:1px;position:absolute;top:0;bottom:0;left:22%;}
.border:after {content:'';background:#ff7600;width:240px;height:.8em;position:absolute;top:0;left:22%;}

#corner {z-index:9999;position:absolute;top:-1px;left:-1px;background:#fff;}
#label {z-index:9999;text-align:center;font-size:.8em;line-height:1.1;position:absolute;left:1.65em;top:1.3em;padding:1.2em;border-radius:100px;background:#fff;}
#label strong {font-weight:900;font-size:1.4em;}

#intro {background:#fff url(../img/2.png) no-repeat 170% 14em;}
#diy .border:before, #diy .border:after {display:none;}

a.cover {display:block;}
.col {float:left;width:67%;position:relative;}
.cont {float:left;width:78%;}
.cont.first {padding-top:3em;}
.col.one {padding:0em 1.5em 1em 0;}
.col.two {padding:0em 0 1em 1.5em;}
.col ul {list-style:none;margin-bottom:.8em;}
.col ul li {position:relative;}
.col li:before {content: "\00bb";position:absolute;left:-.9em;}
.clear {content:'';display:block;clear:both;}

.gutter {float:left;width:19%;margin:11em 5% 0 -2%;z-index:9999;position:relative;}
.info {border:1px solid #ffc899;color:#ff7600;font-size:.8em;background:#fff;padding:1em 1.2em;margin-bottom:2.2em;}
.info a {color:#ff7600;border:0;text-decoration:underline;}
.info a:hover {color:#1a1a11;}
.info p {margin-bottom:0;}
.info p+p {margin-top:.6em;}
.info ul {margin:.4em 0 .4em 0;list-style:none;}
.info li {padding-left:1em;position:relative;}
.info li+li {margin-top:.4em;}
.info li:before {content: "\00bb";position:absolute;left:0;}

.notes {padding-top:.2em;}
.notes li {font-size:.8em;margin-bottom:.4em;position:relative;}

.popup {display:none;width:40%;background:#fff;padding:1.2em 1.6em .5em 1.6em;box-shadow:0 1px 6px rgba(0,0,0,.2);}
.popup p:first-of-type {margin-bottom:.4em;}
.popup .close {position:absolute;top:0;right:0;color:#ff7600;font-size:2em;border:0;padding:0 .5em;cursor:pointer;}

.extra {display:none;}

/* Buy button */

.cart {margin:1em 0;border:1px solid #1a1a11;overflow:auto;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);}
.cart .form {display:none;padding:.2em .4em;overflow:auto;}

.cart .form div {padding:.4em .2em;float:left;}
.cart .form div.last {float:right;}
.cart input, .cart select {-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:.3em .6em .35em .6em;font-size:.8em;background:#fff;border:1px solid #bbb;border-radius:3px;}
.cart select {padding:.3em 1.6em .35em .6em;}
.cart .shipping {position:relative;}
.cart .shipping:after {position:absolute;content:'';width:0;position:absolute;right:.8em;top:1.05em;border-width:7px 5px;border-style:solid;pointer-events:none;border-color:#1a1a11 transparent transparent transparent;}
.cart input[type="submit"] {border-color:#ccc;background:#ccc;color:#fff;}
.cart input[type="text"], .cart input[type="email"] {-webkit-appearance:none;border-radius:0;}
.cart input.ready {background:#ff7600;border-color:#ff7600;cursor:pointer;}
.cart input.ready:hover {background:#1a1a11;border-color:#1a1a11;}
.cart .total {color:#ff7600;padding-top:.55em!important;margin-left:.2em;}

a.buy {display:block;background:#1a1a11;color:#fff;padding:.7em 1em .6em 1em;border:0;}
a.buy strong {font-weight:900;}
a.buy span {float:right;font-weight:bold;}
a.cover {border:0;}

/* Mailing list */

#mc_embed_signup {margin-bottom:.6em;overflow:auto;}
#mc_embed_signup input {border:0;border-bottom:1px solid #ddd;padding:.3em 0;}
#mc_embed_signup label {font-size:1em;margin-bottom:.3em;display:inline-block;font-weight:900;}
#mc_embed_signup input[type="text"],#mc_embed_signup input[type="email"] {font-size:1em;width:100%;margin-bottom:.6em;background:transparent;}
#mc_embed_signup input[type="submit"] {font-weight:700;border:0;color:#fff;border-radius:2px;margin-top:.4em;font-size:1em;padding:.4em;width:100%;background:#ff7600;}

/* Slideshows */

.images {position:relative;clear:both;border:1px solid #ffc899;outline:1px solid #ffc899;outline-offset:-1px;margin:0 0 2.4em 0;background:#fff;}
.images img {margin:0;}
/*.images.badge:before {z-index:9999;display:block;position:absolute;right:-.4em;top:-1em;width:127px;height:127px;content:'';background:url('../img/TDC-award-badge.png') no-repeat center center;background-size:127px 127px;}
.images.badge:after {z-index:9999;display:block;position:absolute;right:.4em;bottom:.4em;width:100px;height:204px;content:'';background:url('../img/awards.png') no-repeat center center;background-size:100px 204px;}*/


/*
.slideshow {float:left;clear:both;width:calc(100% + 26%);margin:.6em 0 2.6em -13%;padding:2em 0 1.6em 0;outline:none;border:1px solid rgba(0,0,0,.08);}
.slideshow div {outline:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;align-items:start;}
.slideshow figure {outline:none;}
.slideshow figcaption {font-size:.8em;opacity:.5;}
.slideshow img {max-width:45vw;max-height:80vh;margin-bottom:.4em;}
.slick-slide {cursor:pointer;padding:0 2em;}
.slick-current {cursor:default;}
*/

/* Typefaces lists */

.tlist {font-size:.8em;padding-top:4em;margin:0 3em 0 0;clear:both;-webkit-columns:150px;-moz-columns:150px;columns:150px;-webkit-column-gap:4em;-moz-column-gap:4em;column-gap:4em;}
.tlist dl {margin-bottom:1.8em;display:inline-block;}
.tlist dl img {margin:0;}
.tlist dl dt {font-weight:900;}
.tlist dl dt:first-of-type {font-weight:900;color:#ff7600;font-size:1.2em;line-height:1.2;}
.tlist a {border-color:#dadad1;}
.tlist a:hover {color:#ff7600;border-color:#ffc899;}

/* Search */

#search {width:240px;padding:.6em .7em;font-size:.8em;background:#fff;font-family:'Output Sans',sans-serif;border:1px solid #ffc899;float:right;margin:0 3em 0 0;position:relative;top:-1em;}
#search::placeholder {color:#ff7600;}
mark {background-color:rgba(242, 153, 27, .2);}


@media only screen and (max-width :5000px) {
  body {font-size:21px;}
}

@media only screen and (max-width :1700px) {
  body {font-size:19px;}
}

@media only screen and (max-width :1320px) {
  .nav .social {display:none;}
  div.social {display:block;margin:0 8%;}
  #diy div.social {display:none;}
}

@media only screen and (max-width :1260px) {
  body {font-size:18px;} 
  #intro {background-position:230% 14em}
  h1 {font-size:3.1em;}  
  .border {margin:4em 4% 0 4%;}
  .nav ul {margin:0 4%;}  
  div.social {margin:0 4%;}
}

@media only screen and (max-width :1024px) { 
  body {font-size:18px;}
  #intro {background-position:300px 14em}
  a.cover {margin-left:1px;max-width:90%;margin-top:0;}

  .gutter {display:none;}
  .extra {display:block;}
  .col.one, .col.two {float:none;width:80%;padding:0;}
  .pullquote {margin-top:1em;font-size:2.4em;max-width:80%;}
  .cont {margin-left:22%;}
  .col li:before {position:relative;left:0;margin-right:.2em;}
  #corner {width:90px;height:90px;}
  #corner path {stroke-width: 1.5;}
  #label {left:.7em;top:.4em;}
  #mc_embed_signup label {width:100%;}
  #mc_embed_signup .mc-field-group {margin-right:4%;width:36%;float:left;}
  #mc_embed_signup input[type="text"], #mc_embed_signup input[type="email"] {border-bottom:1px solid #1a1a11;}
  #mc_embed_signup input[type="submit"] {margin-top:0;background:transparent;color:#1a1a11;border:1px solid #1a1a11;}
  #mc_embed_signup .clear {width:20%;float:left;clear:none;}
  #search {float:none;margin:3em 0 0 0;position:relative;top:0;}
}

@media only screen and (max-width :865px) { 
  .nav ul li {margin-right:1.2em;}
  .popup {width:90%;}
  /*.slick-slide {padding:0 .6em;}
  .slideshow {margin-bottom:1.4em;}
  .slideshow img {max-width:60vw;}*/
}

@media only screen and (max-width :720px) {
  body {font-size:18px;} 
  div.social {margin:0 1.2em;padding:1em 0 0 0;}
  .nav ul {margin:0 1.2em;}
  #corner, #label {display:none;}
  .border {border:0;margin:2em 1.2em;} 
  .border:before, .border:after {display:none;}
  .col.one, .col.two {width:100%;}
  .cont {margin-left:0;width:100%;}
  .tlist {-webkit-column-gap:2em;-moz-column-gap:2em;column-gap:2em;}
  h4 {margin-top:0;}
}

@media only screen and (max-width :450px) {
  body {font-size:16px;} 
  h1,h2 {font-size:2.5em;}
  .nav {padding:.6em 0;}
  #intro {background-position:140px 6em}
  /*.slideshow img {max-width:80vw;}*/
  .shipping, select {width:100%;}
  #total {margin-left:.2em;}
  #mc_embed_signup  {margin-bottom:1.2em}
  #mc_embed_signup .mc-field-group, #mc_embed_signup .clear {width:100%;margin-left:0;margin-right:0;}
}