/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */



/* FULL NAV... maybe #r-nav height 100, r-nav ul min-height100 */

/* NAV STUFF */
#r-nav { width: 100%; color: #fff; }
#n-bar { width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; box-shadow: 0px 1px 5px rgba(51,51,51,0.5); background: #000; position: fixed; z-index: 8; font-size: 1.5em; font-weight: bold; padding: 0 1em; height: 54px; top: 0; line-height: 1.1em; }
#n-logo { float: left; }
#n-logo h1 { margin: 0; }
#n-burger { float: right; padding: 0.5em 0 0.5em 2em; cursor: pointer; }
#n-close { text-align: right; }
#ocn { position: fixed; height: 100%; overflow-y: scroll; top: 0; right: 0; width: 240px; padding: 1em; float: right; -moz-box-sizing: border-box; box-sizing: border-box; background: #222; box-shadow: inset 10px 0px 10px -10px #000; }
html.touch #ocn { overflow-y:hidden; }
html.touch body.n-open #ocn { -webkit-overflow-scrolling:touch; }
#ocn>ul { position: absolute; padding: 1em; }
#r-nav ul { list-style: none; margin: 0; padding: 0; }
#r-nav li ul { margin: 0.5em 0 0.5em 1.5em; padding: 0; list-style: none; }
#r-nav li ul a.sa { display: none; }
#r-nav a { color: #888; text-decoration: none; display: block; padding: 0.5em 1em; }
#r-nav a:hover { color: #ccc; }
#r-nav a.sa { text-transform: uppercase; font-weight: bold; text-transform: uppercase; }
body.n-open #ocn { margin-right: 0%; }
/*body.n-open #main { position: fixed; overflow: hidden; }*/
html.csstransforms #ocn { margin-right: 0%; opacity: 0.5; -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); }
html.csstransforms body.n-open #ocn { margin-right: 0%; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
body.n-open #n-bar,body.n-open #main { margin-right: 80%; }
html.csstransforms body #n-bar, html.csstransforms body #main { margin-right: auto; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); }
html.csstransforms body.n-open #n-bar, html.csstransforms body.n-open #main { margin-right: auto; -webkit-transform: translate3d(-240px,0,0); -moz-transform: translateX(-240px); -ms-transform: translateX(-240px); -o-transform: translateX(-240px); transform: translateX(-240px); }
#main,#n-bar,#ocn { -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -ms-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; }
#r-nav a { -webkit-transition: 0.1s ease-in-out; -moz-transition: 0.1s ease-in-out; -ms-transition: 0.1s ease-in-out; -o-transition: 0.1s ease-in-out; transition: 0.1s ease-in-out; -webkit-transition-property: border-color, color; -moz-transition-property: border-color, color; -ms-transition-property: border-color, color; -o-transition-property: border-color, color; transition-property: border-color, color; }
/* END NAV STUFF */


/* MAIN STUFF */
body { background: #000; color: #fff; padding-top: 54px; }
.i-svg,html.svg .i-png { display: none; }
html.svg .i-svg { display: inline; }
#n-logo { padding: 0.45em 0; width: 50%; }
#n-logo img { width: 100%; height: auto; }
#n-close { float: right; font-weight: bold; font-size: 1.5em; padding: 0 1em 0 0; }
#n-close a { padding: 0; }
#n-stamp { width: 80%; margin: 2em auto 5em 1em; }
#n-stamp img { width: 100%; height: auto; }
button span { pointer-events: none; }

#main { position: relative; overflow: hidden; background: #000; }
#main a { color: #0af; text-decoration: none; border-bottom: 1px dashed #fff; }
#main a:hover { border-bottom-style: solid; }
.s-cont { width: 90%; margin: 0 auto; }
.tls h2 { text-transform: uppercase; font-style: italic; font-size: 2em; text-align: center; margin-top: 1em; margin-bottom: 0.25em; }

/* SLIDER */
.s-container { position: relative; height: 100%; overflow: hidden; }
.s-container ul { margin: 0; padding: 0; list-style: none; overflow: hidden; min-height: 150px; }
.s-container li { width: 100%; float: left; position: absolute; z-index: 1; -webkit-transition: 0.5s ease-out; -moz-transition: 0.5s ease-out; -ms-transition: 0.5s ease-out; -o-transition: 0.5s ease-out; transition: 0.5s ease-out; }
.s-container li.noanim { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
.s-container li.ctl { margin-left: -100%; }
.s-container li.ctr { margin-left: 100%; }
.s-container li.ctl,.s-container li.ctr { opacity: 0.8; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); }
.s-container li.cur { position: relative; z-index: 2; margin-left: 0%; opacity: 1; -webkit-transition-property: margin; -moz-transition-property: margin; -ms-transition-property: margin; -o-transition-property: margin; transition-property: margin; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
.s-container li img { width: 100%; height: auto; }

/* CSS TRANSFORM OPTIMIZATIONS? */
html.csstransforms .s-container li.ctl,html.csstransforms .s-container li.ctr { margin-left: 0; }
html.csstransforms .s-container li.ctl { -webkit-transform: translate3d(-100%,0,0) scale(0.9); -moz-transform: translate3d(-100%,0,0) scale(0.9); -ms-transform: translate3d(-100%,0,0) scale(0.9); -o-transform: translateX(-100%) scale(0.9); transform: translate3d(-100%,0,0) scale(0.9); }
html.csstransforms .s-container li.ctr { -webkit-transform: translate3d(100%,0,0) scale(0.9); -moz-transform: translate3d(100%,0,0) scale(0.9); -ms-transform: translate3d(100%,0,0) scale(0.9); -o-transform: translateX(100%) scale(0.9); transform: translate3d(100%,0,0) scale(0.9); }
html.csstransforms .s-container li.cur { -webkit-transition: 0.4s ease-out; -moz-transition: 0.4s ease-out; -ms-transition: 0.4s ease-out; -o-transition: 0.4s ease-out; transition: 0.4s ease-out; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -ms-transition-property: -ms-transform; -o-transition-property: -o-transform; transition-property: transform; -webkit-transform: translate3d(0px,0,0) scale(1); -moz-transform: translate3d(0px,0,0) scale(1); -ms-transform: translate3d(0px,0,0) scale(1); -o-transform: translateX(0px) scale(1); transform: translate3d(0px,0,0) scale(1); }

.s-controls { position: absolute; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.vtm { display: table-cell; vertical-align: middle; width: 100%; height: 100%; }
.s-controls>div { pointer-events: auto; display: table; font-size: 1.5em; font-weight: bold; padding: 1em; height: 100%; cursor: pointer; color: #fff; text-shadow: 0px 1px 0px #000; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.s-c-left { float: left; }
.s-c-left:hover { background: -moz-linear-gradient(left, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.35)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(0,0,0,0.35) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(0,0,0,0.35) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(0,0,0,0.35) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(0,0,0,0.35) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */ }
html.touch .s-c-left:hover,html.touch .s-c-right:hover { background: none; }
.s-c-right { float: right; }
.s-c-right:hover { background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.35))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.35) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.35) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.35) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.35) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#59000000',GradientType=1 ); /* IE6-9 */ }
/* END SLIDER */

/* SERVICES */
.s-s-nav { list-style: none; padding: 0; margin: 0 0 1em 0; font-size: 0.8em; }
.s-s-nav li { display: inline-block; }
#s-services h3 { margin: 0; text-align: center; font-size: 2em; text-transform: uppercase; font-style: italic; }
#s-s-stickers { color: #000; text-align: center; }

#s-s-apparel,#s-s-printmedia { position: relative; }
.pac { position: absolute; right: 0; top: 0; height: 100%; z-index: 1; }
.tfsab { padding: 0 1em; display: table; font-size: 3em; font-weight: bold; z-index: 9; height: 100%; background: rgba(0,0,0,0.15); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.tfsab:hover { background: rgba(0,0,0,0.35); }
.tfs { padding: 0; margin: 0; list-style: none; height: 250px; width: 2000%; overflow: hidden; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -ms-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; }
.tfs li { float: left; height: 100%; width: 300px; position: relative; }
.tfs li.tfso { display: table; width: 200px; }
.tfs li img { width: 100%; }
.tfs .tfso { background: #000; color: #fff; }
#s-services .tfso h3 { line-height: 0.7em; text-align: left; display: inline-block; }
.tfso h3 span { display: block; font-size: 0.4em; }
.tfso h3 span.tfst { display: inline; font-size: 1.25em; line-height: 0; }
.tfso .tfst img { width: auto; height: 15px; }
.tfsocopy { width: 100%; text-align: left; position: absolute; left: 0; bottom: 0; background: #000; background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ }
.tfsocopy h4 { margin: 1em 1em 0 1em; font-size: 1.25em; }
#s-services .tfsocopy p { margin: 0; padding: 0.5em 1.5em 1em 1.5em; color: #fff; width: auto; }


.n320,#s-services section.show a.n320 { display: none; }


#s-services section.show { height: auto; }
#s-services section.show p { display: block; }
#s-services #s-s-buttons.show p,#s-services section.show a { display: inline-block; }
#s-s-apparel p,#s-s-buttons { color: #000; }
#s-s-apparel p,#s-s-printmedia p { width: 90%; }
#s-s-stickers p { width: 80%; }
#s-services { text-align: center; }
#s-services a,#s-pricing a { margin-top: 0.5em; color: #fff; background: #000; border: 0; padding: 0.5em; text-transform: uppercase; font-weight: bold; display: inline-block; }
#s-services a:hover,#s-pricing a:hover { background: #666; }
#s-services a { margin-bottom: 1em; }
#s-services p { margin: 0 auto; font-size: 0.8em; margin-bottom: 0.8em; }
/*#s-s-apparel { background:url('../img/services-apparel-bg.jpg') top; height:500px; background-size:cover; padding-top:6em; }*/
#s-s-design { background:url('../img/services-design-bg-320.jpg') top no-repeat #262626;  background-size: 320px 137px; height: 137px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#s-s-design h3,#s-s-buttons h3 { color: #000; font-size: 4em; line-height: 150px; }
#s-s-buttons h3 { color: #fff; text-shadow: 0px 0px 5px #000; }
/*#s-s-design h3,#s-s-buttons h3 { width: 0; height: 0; overflow: hidden; }*/
#s-s-stickers p,#s-s-stickers a,#s-s-design a,#s-s-design p,#s-s-buttons p,#s-s-buttons a { display: none; }
#s-s-design p { width: 80%; }
#s-pricing { padding-bottom: 1em; }
#s-pricing h2 { margin-top: 0; padding-top: 1em; }
#s-s-stickers p { background: #fff; padding: 1em; }

#s-s-stickers { background:url('../img/services-stickers-bg-320.jpg') top; background-size: cover; }
#s-s-stickers h3 { line-height: 130px; padding: 0.5em 0; }
#s-s-stickers h3 img { width: 70%; }

#s-s-buttons { background:url('../img/services-buttons-bg-320b.jpg') top; background-size: cover; height: 137px; /*height: 400px;background-size:cover;padding-top:15em;*/ }
#s-s-buttons p { background: #fff; margin: 0.5em 2em; padding: 1em; }

.s-s-exp { cursor: pointer; }

#a-slider,#p-slider { width: 80%; margin: 0 auto 1em auto; height: 200px; }

/* ORDER FORM */
.c-title { color: #ccc; cursor: pointer; width: 100%; }
.c-title:hover { color: #fff; }
.c-title:hover .c-open { color: #ccc; }
.c-open { font-size: 1.5em; margin: 0.15em 0 0.5em 0; color: #999; }
.coll h3 { width: 90%; }
.coll h3 { margin: 0.15em 0; }
.coll div,.coll h3 { display: inline-block; vertical-align: middle; }
#s-order h2 { text-align: left; }
#s-o-help { font-size: 0.9em; }
#s-o-help h3 { text-transform: uppercase; font-style: italic; }
#s-o-h-morebtn span { font-style: normal; }
#s-o-h-morecont { display: none; }

.hif,.hi { margin:0 0 15px 0; width: 100%; position: relative; }
.hif { margin-bottom: 20px; }
.hi-2,.hi-3 { display: inline-block; }
.hi span { top: 3px; left: 7px; line-height: 1.5em; pointer-events:none; }
.se span, .se-2 span, .se-3 span { top: 0px; }
.hi input:focus,.hi textarea:focus { border: 1px solid #666; }
.hi textarea { height: 100px; resize: vertical; }
.hi, .hi input, .hi textarea { font-size: 1.1em; }
.hi select { width: 100%; margin: 0; padding: 5px; border: 1px solid #aaa; }
.hi input,.hi textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; margin:0; padding: 5px; -webkit-appearance: none; border: 1px solid #666; -webkit-border-radius: 0; }
.hi input[type=radio] { -webkit-appearance: radio; width: auto; }
.hp { display: none; }
.ns span { top: 0; left: 0; position: static; }
.ns { margin: 0.5em 0; }
form h4 { text-decoration: underline; }
.hc span { font-size: 1.2em; margin-bottom: 5px; display: block; }
.hc ul { list-style: none; margin: 0 0 1.5em 0; padding: 0; }
.hc input { margin-right: 0.5em; }
.hc ul li { display: inline-block; width: 100%; }
#order-form textarea { height: 200px; }
.contact-submit span { display: inline; font-size: 1.5em; }
.contact-submit { border: 0; width: 100%; padding: 1.5em 1em; background: #333; color: #fff; clear: none; margin: 0 0 1em 0; }
.contact-submit:hover { background-color: #666; cursor:pointer; }
.form-success { display: none; text-align: center; background: #333; color: #fff; padding: 1em; font-size: 2em; }

#s-pricing a.so-lb { display: inline; background: none; color: #0af; border-bottom: 1px dashed #000; margin: 0; padding: 0; }
#s-pricing a.so-lb:hover { border-style: solid; }

.csub,#contact-form,#order-form { width: 100%; }
/* SIZE BOXES */
#order-sizes { margin-bottom: 0.5em; }
#order-sizes label { display: block; }
.hc .note { font-size: 0.8em; display: block; margin-bottom: 2.25em; }
#order-sizes li { width: 12%; margin-right: 6%; }
#order-sizes input { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* PRICING */
#pricing { }
#pricing h2 { text-align: center; font-size: 2em; }
#pricing-apparel .table-head { border-bottom: 0; margin: 0; }
.pricing-subnav { font-size: 1.5em; margin: 0; padding: 0; list-style: none; text-align: center; }
.pricing-subnav li { display: inline-block; }

.pricing-subnav a:hover { background-color: #333; color: #fff; }
#cur-price { background-color: #333; color: #fff; }
.qty-head { font-size: 1.25em; letter-spacing: 0.25em; }
.table-head { font-size: 1.25em; font-weight: bold; padding-bottom: 0.25em; border-bottom: 2px solid #333; margin-bottom: 0.25em; }
.table-separator { background: #000; color: #fff; text-transform: uppercase; font-style: italic; font-weight: bold; text-align: center; margin-bottom: 0.5em; letter-spacing: 0.25em; padding: 0.25em 0; }
.ps-qty .table-separator { cursor: pointer; }
.ps-qty .table-separator:hover { background: #666; }
.item-row { width: 100%; color: #484848; cursor: pointer; display: table; background: #ababab; }
.item-row:nth-child(even) { background: #dedede; }
.item-row:hover { }
.item-row .col-6 li { font-size: 60%; }
.item-row .pricing-name-col,.item-row .pricing-price-col { float: none; display: table-cell; vertical-align: middle; }
.pricing-name-col { float: left; width: 40%; font-weight: bold; font-style: italic; text-transform: uppercase; font-size: 0.8em; padding-left: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.table-head .pricing-name-col { padding-top: 0.2em;}
.pnc-right { float: right; font-size: 0.6em; margin-top: 0.5em; }
.pricing-name-col span { font-size: 0.8em; }
.pricing-price-col { float: right; width: 60%; text-align: center; }
.pricing-price-col ul { padding: 0; margin: 0; list-style: none; }
.pricing-price-col ul li { float: left; }
.pricing-disc { font-size: 0.8em; text-align: center; margin: 0.45em 0 0.45em 0; }
.item-row .pricing-price-col ul li { padding: 1em 0; }
.ps .disc { text-align: center; font-weight: bold; }
.col-6 li { width: 16%; }
.col-4 li { width: 25%; }
.col-3 li { width: 32%; }
.item-row .pricing-price-col ul li:hover { font-weight: bold; text-shadow: 0px 0px 10px #aaa; }
#pricing p { margin: 1em 0 0 0; font-size: 0.9em; text-align: center; }
/*#pricing h2 { font-size: 2.5em; margin: 0.2em 0 0 0; }
.ps { display: inline-block; width: 100%; }
.ps ul { margin: 0; padding: 0; list-style: none; }
.ps ul li:first-child { font-weight: bold; border-bottom: 1px solid #fff; }
.ps ul li:nth-child(2) { clear: both; }
.ps div { display: inline-block; }
.pricing-qty { margin-right: 0.5em; }
.pricing-price { margin-left: 0.5em; }*/

/* CHART */
#s-chart h2 { color: #fff; line-height: 1em; margin-top: 1em; margin-bottom: 0.25em; }
#s-chart h2 span { background: #000; }
#s-c-img { display: none; }
#s-c-img img { width: 100%; display: block; margin-top: 4.25em; }
#s-c-instruct { text-transform: uppercase; margin: 0; text-align: center; font-size: 0.9em; }
#s-c-brands { list-style: none; padding: 0; margin: 1em 0 0 0; }
#s-c-brands li { text-align: center; margin: 1em 0 2em 0; }
#s-c-brands img { width: 40%; }

#lb-shadow { overflow: hidden; position: fixed; top: 0; z-index: 1000; width: 0%; height: 0%; background: #ddd; text-align: center; display: table; opacity: 0; pointer-events: none; }
#lb-shadow.show { width: 100%; height: 100%; opacity: 1; pointer-events: auto; }
#lb-shadow .vtm { padding-bottom: 32px; }
html.touch #lb-shadow .vtm { padding-top: 32px; }
#lb-box { position: relative; background: #fff; display: inline-block; margin-top: -32px; padding: 1em; box-shadow: 0px 0px 5px #ccc; }
#lb-box.full { width: 100%; height: 100%; padding: 0; margin-top: -32px; position: relative; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
#lb-scbox { color: #000; text-align: left; padding: 1em; }
#lb-box img { max-width: 100%; max-height: 80%; }
#lb-close { text-align: center; width: 0%; height: 0%; position: fixed; bottom: 0; left: 0; overflow: hidden; }
#lb-shadow.show #lb-close { width: 100%; height: auto; }
#lb-close a { text-decoration: none; display: block; padding: 1em 0; font-size: 1.2em; font-weight: bold; color: #666; background: #ccc; }
#lb-close a:hover { background: #aaa; color: #333; }
#lb-box,#lb-shadow,#s-p-igcta a { -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -ms-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; }
html.csstransforms #lb-box { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0.8; }
html.csstransforms #lb-shadow.show #lb-box { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; }
#lb-shadow { -webkit-transition-property: opacity, -webkit-transform; -moz-transition-property: opacity, -moz-transform; -ms-transition-property: opacity, -ms-transform; -o-transition-property: opacity, -o-transform; transition-property: opacity, transform; }

/* ABOUT */
#s-about,#s-pricing,#s-chart { background: #fff; color: #000; }
#s-a-copy p { padding: 0 2em; font-size: 0.8em; }
#s-a-copy .item img { margin-top: 2em; display: block; width: 100%; height: auto; }
#s-a-map {  }
#s-a-img { width: 50%; margin: 0 auto; }
.s-a-cta { text-align: center; }
#s-a-mapimg { overflow: hidden; max-width: 480px; max-height: 480px; margin-top: 1em; }
#s-a-mapimg a { border: 0; }
#s-a-mapimg img { width: 100%; height: auto; display: block; }
#s-a-mapiframe { display: none; }
#s-a-copy .s-a-cta a img { width: auto; margin: 0 0.5em 0 0; }
#main .s-a-cta a { color: #000; font-weight: bold; }
#main .s-a-cta a:hover { color: #0af; }
#s-a-copy .s-a-cta a img,#s-a-copy .s-a-cta a span { display: inline-block; vertical-align: middle; }
#s-a-copy .s-a-cta a span { max-width: 80%; }

/* PORT */
#s-day2day { padding: 0.15em 0 3em 0; background: url('../img/day2day-bg.jpg') center no-repeat; background-size: cover; }
#s-p-grid img { width: 100%; height: auto; }
.grid4,.grid6 { width: 340px; margin-top: 2em; margin-right: -20px; }
.grid4 .item,.grid6 .item { float: left; width: 150px; margin: 0 20px 20px 0; height: 150px; }
#s-day2day .s-cont { width: 320px; margin: 0 auto; }
#s-p-igcta a { display: table; text-align: center; width: 100%; height: 100%; border: none; background: #0af; color: #fff; font-weight: bold; font-size: 2em; text-transform: uppercase; }
#s-p-igcta a:hover { background: #fff; color: #000; border: none; }

/* FOOTER */
#s-contact { margin-bottom: 2em; padding-top: 1em; }
#s-contact h3 { border-bottom: 1px solid #fff; padding: 0.5em 0; margin: 0; }
#s-s-footer { font-weight: bold; font-style: italic; text-transform: uppercase; font-size: 0.8em; border-top: 2px solid #fff; padding-top: 0.5em; }
#s-s-f-copy { float: left; }
#s-s-f-terms { float: right; }
.s-s-cont { margin-top: 1em; }

#tw-feed { list-style: none; margin: 8px 0 0 0; padding: 0; }
.uname { display: inline-block; margin: 0.5em 0.5em 0 0.5em; font-weight: bold; }
#tw-feed li img { width: 32px; height: 32px; }
.tw-txt { font-size: 0.8em; margin: 0.75em 0 0 0; }
#tw-feed li { margin-bottom: 0.5em; padding-bottom: 0.5em; border-bottom: 1px solid #222; }
#s-c-twitter h3 a { border: 0; color: #fff; }
#tw-feed li.noborder { border: 0; }

#r-hold { text-align: center; margin-top: 8px; }
.r-item { display: inline-block; vertical-align: bottom; width: 30%; margin-bottom: 16px; }
.r-item img { max-width: 100%; }
#main .r-item a { color: #fff; border: 0; }
#main .r-item a:hover { border: 0; color: #0af; }
.r-item span { font-size: 0.8em; font-style: italic; display: block; margin-top: 0.5em; }
.r-item span span { font-size: 1em; margin-top: 0; }

@media only screen and (min-width: 480px) {
    #n-logo { padding: 0.65em 0; }
    #n-logo img { width: auto; }
    #n-bar { height: 80px; }
    #n-burger { padding: 1em 0 1em 2em; }
    body { padding-top: 80px; }

    #s-a-mapimg { display: none; }
    #s-a-mapiframe { display: block; height: 500px; }

    .s-s-exp { cursor: auto; }
    #s-services a.n480u,#s-services section.show a.n480u,#r-nav a.n480u { display: none; }
    .n320 { display: inherit; }
    #s-services section.show a.n320 { display: inline-block; }

}

@media only screen and (min-width: 768px) {
    /* SLIDER */
    .s-container ul { min-height: 200px; }
    .s-controls>div { font-size: 2em; padding: 2em; }

    /* FORM */
    .hi-2 { width: 49%; margin-right: 1%; }
    .se-2 { width: 49%; margin-right: 1%; }
    .hi-3,.se-3 { width: 32.5%; margin-right: 1%; }
    .hc ul li { width: 30%; margin-right: 1%; vertical-align: top; }
    .lr { margin-right: 0; }
    #order-sizes li { width: 6%; margin-right: 3%; }

    .item-row .col-6 li { font-size: 1em; }

    #s-c-img { display: block; }

    #s-services section#s-s-stickers { background-image: url('../img/services-stickers-bg.jpg'); height:700px;background-size:cover;padding-top:4em; }
    #s-services section#s-s-design { padding: 15em 0 0 20em; background-image: url('../img/services-design-bg.jpg'); background-size: cover; height: 480px; }
    #s-services section#s-s-buttons { padding: 15em 0 0 0; background-image: url('../img/services-buttons-bg.jpg'); background-size: cover; height: 400px; }
    #s-s-buttons h3,#s-s-design h3 { width: 0; height: 0; overflow: hidden; }
    #s-s-stickers p,#s-s-buttons p,#s-s-design p { display: block; }
    #s-s-stickers a,#s-s-buttons a,#s-s-design a { display: inline-block; }
    #s-s-stickers h3 img { width: 36%; }
    #s-s-stickers p { width: 30%; background: none; padding: 0; }
    #s-s-stickers h3 { padding: 0; }
    #s-s-design p { width: 400px; }
    #s-s-buttons p { width: 450px; background: none; margin: 0 auto; padding: 0; }
    #s-services section.show { height: inherit; }

    #s-o-help { float: right; width: 35%; }
    #s-o-form { float: left; width: 60%; }
    #s-o-h-morebtn { display: none; }
    #s-o-h-morecont { display: block !important; }

    .s-cont { width: 700px !important; }
    .tls h2 { font-size: 2.5em; }
    .grid3,.grid4,.grid6 { width: 720px; margin-right: -20px; }
    .grid3 .item { float: left; width: 220px; margin: 0 20px 20px 0; }
    .grid4 .item { float: left; width: 160px; margin: 0 20px 20px 0; height: 160px; }
    .grid6 .item { float: left; width: 100px; margin: 0 20px 20px 0; height: 100px; }
    .col2 { width: 720px; margin-right: -20px; }
    .col2 .item { float: left; width: 330px; margin: 0 20px 0 0; }

    #s-c-brands li {  }
    #s-services h3 { font-size: 4em; }
    .tfs li { width: 600px; }
    .tfs li.tfso { width: 400px; }
    .tfst img { height: 30px; }
    .tfs { height: 500px; }

    .r-item span span { font-size: 0.8em; }

    .table-head { font-size: 2em; }
}

@media only screen and (min-width: 1140px) {
    /* NAV STUFF */
    #n-burger,#n-close,#n-stamp { display: none; }
    #ocn { position: fixed; font-size: 0.8em; z-index: 9; padding: 1em 1em 0 1em; width: auto; background: none; box-shadow: none; height: 80px; }
    #ocn,html.touch #ocn { overflow: visible; }
    #r-nav ul { position: relative; }
    #r-nav li { float: left; position: relative; }
    #r-nav li.hov ul,#r-nav li:hover ul { display: block; position: absolute; background: #000; top: 0px; left: 0; margin: 0; box-shadow: 0px #fff; }
    #r-nav a { color: #ccc; padding: 1.5em 1em 2.1em 1em; }
    #r-nav li ul a.sa { display: block; }
    #r-nav li ul a.sa:hover { padding-bottom: 1.9em; }
    #r-nav a:hover { color: #fff; border-bottom: 3px solid #fff; }
    #r-nav li ul li { width: 100%; }
    #r-nav li ul a.dd { border-left: 3px solid transparent; padding: 1em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    #r-nav li ul a.dd:hover { border-bottom: 0; border-left: 3px solid #fff; }
    html.csstransforms #ocn { margin-right: 0%; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); }
    body.n-open #n-bar,body.n-open #main { margin-right: 0%; }
    html.csstransforms body #n-bar, html.csstransforms body #main,html.csstransforms body.n-open #n-bar, html.csstransforms body.n-open #main { margin-right: auto; -webkit-transform: translate3d(0px,0,0); -moz-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); }
    /* NON RESPONSIVE STUFF */
    #r-nav li ul { display: none; }
    /* END NAV STUFF */

    /* SLIDER */
    .s-container ul { min-height: 400px; }

    .s-cont { width: 1024px !important; }
    .tls h2 { font-size: 4em; }
    .grid3,.grid4,.grid6 { width: 1044px; margin-right: -20px; }
    .grid3 .item { float: left; width: 328px; margin: 0 20px 20px 0; }
    .grid4 .item { float: left; width: 241px; margin: 0 20px 20px 0; height: 241px; }
    .grid6 .item { float: left; width: 154px; margin: 0 20px 20px 0; height: 154px; }
    .col2 { width: 1044px; margin-right: -20px; }
    .col2 .item { float: left; width: 502px; margin: 0 20px 0 0; }

    #s-c-brands li {  }
    

    .contact-submit span { font-size: 2em; }




}

@media only screen and (min-width: 1368px) {

  #s-services section#s-s-design { padding-top: 20%; padding-left: 25%; }

}

@media only screen and (min-width: 2000px) {

  #main { width: 1600px; margin: 0 auto; }

}








/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.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;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}