/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> COLORS and SIZES (import)  - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* END _uscap-sass-variables import */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> RESET (import) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* BASED on Meyer/HTML5DR/OTHERS, MOD by JB */
@import url("https://fonts.googleapis.com/css?family=Bangers");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, svg, 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, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 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; }

a { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

input, button, textarea { margin: 0; padding: 0; font-size: 100%; font: inherit; line-height: 1.5; vertical-align: baseline; }

abbr[title], dfn[title] { border-bottom: 1px #555 dotted; cursor: help; }

/* remember to highlight inserts somehow! */
ins { text-decoration: none; }

del { text-decoration: line-through; }

table { border-collapse: collapse; border-spacing: 0; }

col { display: table-column; }

colgroup { display: table-column-group; }

html { box-sizing: border-box; }

*, *:before, *:after { box-sizing: inherit; position: relative; }

/* END _reset import */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> FONTS  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@font-face { font-family: "icons"; src: url("//cdn.shopify.com/s/files/1/0543/1637/t/16/assets/icons.eot?1"); src: url("//cdn.shopify.com/s/files/1/0543/1637/t/16/assets/icons.eot?1#iefix") format("embedded-opentype"), url("//cdn.shopify.com/s/files/1/0543/1637/t/16/assets/icons.woff?1") format("woff"), url("//cdn.shopify.com/s/files/1/0543/1637/t/16/assets/icons.ttf?1") format("truetype"), url("//cdn.shopify.com/s/files/1/0543/1637/t/16/assets/icons.svg?1#timber-icons") format("svg"); font-weight: normal; font-style: normal; }

.fun, h1, h2, .proglist figcaption span, .progitems figcaption .price { font-family: 'Bangers', cursive; letter-spacing: .02em; }

body, input { font-family: 'Helvetica Neue', 'Arial', sans-serif; font-weight: 400; font-style: normal; }

body { color: #555; font-size: 20px; line-height: 1.5; }

b, .b, strong, .strong { font-weight: 800; }

/* Primary Content and Structure CSS */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> GLOBAL ELEMENTS  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
p { margin-bottom: .65em; }

a { color: inherit; border-bottom: 1px dotted; text-decoration: none; transition: color 0.3s ease-out; }

.nowrap { white-space: nowrap; }

.attn { color: #f69; }

.centered { text-align: center; }

.gotele { white-space: nowrap; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> COMMON CONTAINERS  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
html { /* max-width: 100vw; */ /* overflow-x: hidden; */ }

body { margin: 0; /* max-width: 100vw; */ overflow-x: hidden; }

.slantbox:before { position: absolute; display: block; z-index: -1; width: 300%; height: 100%; left: -100%; top: 0; border: 8px solid #000; border-bottom-color: #93014a; border-top-color: #528fbf; border-width: 8px 0; background: rgba(252, 165, 54, 0.75); content: ""; transform: rotate(-7deg); }

.slantbox.white:before { background: rgba(255, 255, 255, 0.95); border: none; z-index: -2; }

.intprefoot { height: 6em; }

.wrap { width: 1040px; margin: 0 auto; min-height: 99vh; }

.wrap:before { position: absolute; z-index: -5; top: 0; /* bottom: 0; */ left: 0; right: 0; height: 800px; background: url(/assets/img/bg-header.jpg) no-repeat center top; content: ""; }

.wrap:after { position: absolute; z-index: -5; /* top: 0; */ bottom: 0; left: 0; right: 0; height: 700px; background: linear-gradient(white 0%, rgba(255, 255, 255, 0) 20%), url(/assets/img/bg-footer.jpg) no-repeat right bottom; content: ""; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> HEADER + NAV & BRANDING  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
header { height: 160px; }

.icon:before { display: inline; font-family: "icons"; color: inherit; text-decoration: none; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.icon-cart-fpo:before { content: "\5b"; }

.icon-search-fpo:before { content: "\73"; font-size: 80%; color: white; }

.icon-cart-fpo:before { position: relative; top: -2px; /* font-size: 95%; */ line-height: .6; vertical-align: middle; margin-right: 6px; }

.cart-count { display: inline-block; text-align: center; background-color: #fb3621; color: white; font-weight: 700; font-size: 13px; min-width: 20px; height: 20px; line-height: 20px; border-radius: 20px; }

.search-fpo { border: none; font-size: 70%; line-height: 2.8; }

#logo { position: absolute; top: -55px; left: 40px; width: 200px; border: 0; z-index: 99; }

#logo a { display: block; border-bottom: none; }

#logo svg { width: 100%; }

nav a { text-decoration: none; color: rgba(255, 255, 255, 0.8); border: none; text-transform: uppercase; }

nav a:hover { text-decoration: none; color: white; }

nav a:active { text-decoration: none; color: white; }

nav li { padding: 0 0.75em; }

nav.navmain { height: 50px; background: white; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 100%); }

nav.navmain ul { display: flex; flex-direction: row; justify-content: flex-end; }

nav.navmain ul li a { display: block; font-size: 70%; line-height: 3.5; }

nav.navsearchcart { height: 50px; background: white; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%); }

nav.navsearchcart ul { height: 50px; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; }

nav.navsearchcart ul li { margin: 0 10px; background: rgba(255, 255, 255, 0.08); }

nav.navsearchcart ul li a { display: block; font-size: 70%; line-height: 2.8; }

nav.navsearchcart ::placeholder { color: rgba(255, 255, 255, 0.8); }

nav.navsearchcart input { background: transparent; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> CONTENT COMMONS  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
h1, .h1 { font-size: 270%; margin: 0 0 0 0; line-height: .95; color: white; }

h2, .h2 { font-size: 130%; margin: 1em 0 0.25em 0; line-height: 1.0; }

::placeholder { color: #333; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> PROGRAM CONTAINERS + SETS  - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#content .slantbox { padding: 2em 1em; }

/* --- Home Containers --- */
#progactive.slantbox:before { background: linear-gradient(rgba(252, 165, 54, 0.75), rgba(252, 165, 54, 0.75)), linear-gradient(rgba(255, 255, 255, 0) 0%, white 50%); }

.proglist { overflow: auto; text-align: center; }

.proglist li { display: inline-block; width: 30%; margin: 1.27%; background: white; padding: .5em 0; border-radius: .2em; }

.proglist figcaption { text-transform: uppercase; font-size: 70%; line-height: 1em; }

.proglist figcaption span { display: block; font-size: 179%; }

.proglist figcaption i { display: block; font-size: 0; max-width: 184px; margin: .75em auto; font-size: 10px; line-height: 2em; }

.pastlist { overflow: auto; text-align: center; padding: 3em 0; }

.pastlist li { display: inline-block; width: 16%; margin: 1%; border-radius: .3em; background: white; }

.pastlist li img { width: 95%; height: auto; }

/* --- Current Program Selection --- */
#programdetails { color: black; margin: 0 15% 0 300px; min-height: 10em; padding-bottom: 1.5em; }

i.svgbox { display: block; width: 40%; font-size: .5em; margin: .5em 0; }

i.svgbox svg { width: 100%; }

p.progdue { font-weight: bold; line-height: 1.2; text-transform: uppercase; }

p.prognote strong { font-weight: bold; display: block; margin-bottom: 0; }

p.progast { font-style: italic; }

#progselection { color: #555; }

.progitems { text-align: center; overflow: auto; }

.progitems li { display: inline-block; width: 22%; margin: 1.27%; background: white; padding: .5em; border-radius: .2em; }

.progitems li img { width: 80%; }

.progitems figcaption { line-height: 1em; }

.progitems figcaption dl { text-align: left; padding-left: 3.15em; }

.progitems figcaption dt { text-transform: uppercase; font-size: .75em; line-height: 1em; }

.progitems figcaption dt i { font-size: .25em; max-width: 7em; margin: 1em 0.35em; line-height: 100%; display: block; }

.progitems figcaption dt i svg { width: 100%; height: auto; }

.progitems figcaption .price { font-size: 1.75em; position: absolute; top: .15em; right: calc(100% - 1.35em); /* width: 1.45em; */ text-align: right; vertical-align: text-top; }

.progitems figcaption .price sup { font-size: .5em; top: -.7em; }

.progitems figcaption dl:before { content: ""; position: absolute; top: 0; bottom: 0; right: calc(100% - 2.85em); background: #eee; width: .175em; border-radius: .08em; }

.progitems figcaption .sizes { font-size: .6em; line-height: 1.1em; color: #999; text-transform: uppercase; }

.progitems figcaption .fiber { font-size: .6em; line-height: 1.1em; color: #ccc; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> CONTACT & SPECS FORMS (import) - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* END _contact-form import */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> FOOTER - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
footer { width: 100%; padding: 4em 1em 2em; }

footer .clip { position: absolute; z-index: -1; bottom: 0; left: calc((100vw - 100%) / -2); right: calc((100vw - 100%) / -2); top: -180px; overflow: hidden; }

footer .slantbox:before { background: rgba(82, 143, 191, 0.75); border-top-color: #f11d6d; border-bottom: none; top: 180px; }

footer h2 { color: white; }

.footset { display: flex; justify-content: space-around; }

.foottext { width: 47%; }

.foottext p { font-size: 70%; color: white; font-weight: 500; }

.footform { width: 47%; }

.footform form { font-size: 70%; display: flex; flex-direction: column; }

.footform input, .footform textarea { width: 100%; margin: .5em 0; background: rgba(255, 255, 255, 0.55); border: none; color: #333; padding: .5em; }

.footform button { width: 7em; align-self: flex-end; padding: .5em; background: rgba(19, 25, 129, 0.5); color: white; border: none; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> HOMEPAGE - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#home h1 { font-size: 170%; text-align: center; width: 53%; margin: 0 0 0 27%; margin-top: -3.8em; min-height: 3.8em; }

#home header { height: 260px; }

#home nav a { color: inherit; }

#home nav a:hover { color: black; }

#home nav a:active { color: white; }

#home nav.navsearchcart ::placeholder { color: #555; }

#home nav.navsearchcart ul li { background: rgba(255, 255, 255, 0.35); }

#home .icon-search-fpo:before { color: #555; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> CSS3 EMBELLISHMENTS  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
h1, h2 { text-shadow: 0.06em 0.06em 0 black; }

footer p { text-shadow: 0.06em 0.06em 0 #131981; }

#home h1 { text-shadow: 0.06em 0.06em 0 black, 0 0 0.1em rgba(82, 143, 191, 0.35); }

.proglist li, .progitems li { box-shadow: 0.15em 0.15em 0 black; }

.pastlist li { box-shadow: 0.15em 0.15em 0 #ddd; }