@charset "utf-8";
@font-face {
  font-family: 'Krub';
  font-style: light;
  font-weight: 300;
  src: local('Krub'),
       url('/assets/fonts/krub-light-webfont.woff2') format('woff2'),
       url('/assets/fonts/krub-light-webfont.woff') format('woff'),
       url('/assets/fonts/krub-light.ttf') format('truetype');
}
@font-face {
  font-family: 'Krub';
  font-style: medium;
  font-weight: 500;
  src: local('Krub'),
       url('/assets/fonts/krub-medium-webfont.woff2') format('woff2'),
       url('/assets/fonts/krub-medium-webfont.woff') format('woff'),
       url('/assets/fonts/krub-medium.ttf') format('truetype');
}

/*@keyframes flip { 100% { transform: rotate(176.7deg); } }*/

/* colors:
canada red c40c0c
new green-blue: 2c89a0 for text, 56a0b3 for background (new 37abc8)
green-positive: 7baa88 (123,170,136)
*/
html {padding: 0; margin: 0; font-size: 100%; width: 100%; min-width: 100%; text-align: left; font-family: 'Krub', sans-serif;}
body {opacity: 1; transition: 2s opacity; position: relative; padding: 0 0rem; margin: 0; background-color: #fff;}
/*body.fade {opacity: 0;}*/

/* Page Layout */
nav {position: -webkit-sticky; position: sticky; top: 0; z-index: 100; text-align: right; background: rgba(250,250,250,0.8); padding: 0.5rem 2rem 1.2rem 1rem; margin-bottom: 0rem;}
nav a, nav button, nav form {display: inline-block;}
#logo {float: left; margin-top: -0.5rem;}
#logo img {width: auto;}
section {}
main {clear: both; padding-left: 3rem; padding-right: 3rem; padding-top: 6rem;}
footer {text-align: center; margin-top: 8em; margin-bottom: 1rem; padding-right: 2rem; padding-left: 2rem;}
/* Development or Maintenance notice */
#website-note {text-align: center; padding: 0 10%; margin: 2rem 0;}
#website-note p {display: inline-block; background: rgba(255,255,255,0.7); border: solid 1px #ccc; text-align: center; font-size: 0.9rem; max-width: 100%; margin: 0 auto; padding: 0.3rem 4rem; border-radius: 0.3rem;}
#website-note p a {margin: 0;}

.block {position: relative; margin-bottom: 8rem;}
.stretch-full {margin-left: -3rem; margin-right: -3rem;}
.stretch-full > div {padding-left: 3rem; padding-right: 3rem;}
.stretch-left {margin-left: -3rem;}
.stretch-right {margin-right: -3rem;}
.align-left {text-align: left; margin-left: 0;}
.align-right {text-align: right;/* margin-right: 0;*/}
.align-right > * {/*display: inline-block; */text-align: right;}
.center {text-align: center; margin-left: auto; margin-right: auto;}
.center * {margin-left: auto; margin-right: auto;}

/* Snipcart customization */
#snipcart * {font-family: 'Krub', sans-serif;}
#snipcart .snipcart-cart__discount-box, #snipcart .snipcart-item-line__media, #snipcart .snipcart-cart-summary-fees__notice {display: none;}
#snipcart .snipcart-modal__container {z-index: 200; left: auto; right: 0; max-width: 70rem;}
#snipcart .payment-methods h3 {margin: 1rem auto; white-space: nowrap;}
#snipcart .payment-methods h3 i {display: inline; margin-right: 0.3rem;}
#snipcart .snipcart-featured-payment-methods__list {font-size: 1.5rem; display: inline-flex; margin: 0 auto 3rem;}
#snipcart .snipcart-cart-header {position: -webkit-sticky; position: sticky; top: 0;}
/*#snipcart .snipcart-modal, #snipcart .snipcart-modal__container, #snipcart .snipcart-cart__content, #snipcart .snipcart-cart-header, #snipcart .snipcart__box--gray, #snipcart .snipcart-cart-summary {background-color: transparent;}*/

@media all and (max-width: 50rem) {
  #logo img {max-height: 3.8rem;}
}

@media all and (min-width: 50rem) {
  nav {padding-left: 3rem; padding-right: 4rem; }
  main {padding-top: 5rem; padding-left: 8rem; padding-right: 8rem;}
  .block {margin-bottom: 14rem;}
  .stretch-full {margin-left: -8rem; margin-right: -8rem;}
  .stretch-full > div {padding-left: 8rem; padding-right: 8rem;}
  .stretch-left {margin-left: -8rem;}
  .stretch-right {margin-right: -8rem;}
  #website-note {top: -7rem;}
}
@media all and (min-width: 90rem) {
  h1, h2, h3, h4, p, li, th, td, dl, figcaption {max-width: 65rem; margin-left: auto; margin-right: auto;}
}

* {font-weight: 300; font-size: 100%; line-height: 1.5em; margin: 0; padding: 0; box-sizing: border-box;}

/* Headings */
h1 {font-size: 2.6rem; margin: 0 auto 6rem; text-align: center;}
/*main section:first-of-type h1 {margin-top: 0;}*/
h2 {font-size: 1.8rem; margin: 6rem auto 4rem; text-align: center;}
#main-home section:first-of-type {margin-bottom: 10rem;}
#main-home section:first-of-type h2 {margin-top: 0; margin-bottom: 0;}
#main-home section:first-of-type p {margin-top: 0.4rem; margin-bottom: 0;}
#main-home section:first-of-type p .cta {margin-bottom: 2rem;}
#main-home section:first-of-type p:last-of-type {margin-bottom: 4rem;}
#main-home h1 {margin-top: 6rem; margin-bottom: 2.5rem; font-size: 2.4rem;}
.align-right h2 {margin-top: 0; text-align: right;}
h3 {font-size: 1.5rem; margin: 4rem auto 4rem;}
h3 > span {font-size: 1.2rem;}
h4 {font-size: 1.3rem; margin: 1.5rem auto 1.5rem; font-weight: 500;}

p, li, dt, dd {font-size: 1.3rem; margin-top: 1rem; margin-bottom: 1rem; line-height: 1.8em;}
th, td {font-size: 1.2rem;}
dd p {font-size: 1rem;}
p.big {font-size: 1.5rem;}
figcaption {font-size: 1.7rem;}
.cta {font-size: 1.2rem;}

@media all and (min-width: 50rem) {
  h1 {font-size: 4rem; margin-bottom: 10rem;}
  h2 {font-size: 2.5rem; margin: 10rem auto 8rem;}
  #main-home section:first-of-type h2 {font-size: 3.2rem;}
  #main-home h1 {font-size: 3.2rem;}
  h3 {font-size: 1.8rem;}
  p.big {font-size: 1.8rem;}
}

/* LINKS */
a, .toggle, nav button {font-weight: inherit; color: #2c89a0; text-decoration: none; display: inline-block; border-bottom: solid 1px transparent; padding-bottom: 2px; cursor: pointer; transition: all 1s ease;}
a.a-img {border: none;}
a:hover, a:focus, .toggle:hover, .toggle:focus, button:hover, button:focus {text-decoration: none; color: #006680; border-color: #006680;}
a:focus {outline: none;}
a:hover i, a:focus i {text-decoration: none;}
a img {transition: all .8s ease-in-out;}
.a-img:hover img, .a-img:focus img {opacity: 0.8; /*transform: scale(1.01);*/}
nav a, nav button {white-space: nowrap; padding: 0; margin-top: 0.5rem; margin-left: 0.8em; font-size: 1rem;}
nav a.current {color: #000;}
nav a:hover, nav a:focus, nav button:hover, nav button:focus {text-decoration: none;}
#cart-toggle {margin-left: 1rem;}
#cart-toggle span {font-size: 0.9rem; position:relative; top: -0.5rem;}
/* Switch currency */
#switch-currency {color: #888; font-size: 1.2rem; padding: 0; margin: 0; position: relative; top: 0.1rem;}
#currency {color: #2c89a0; font-weight: 300; padding: 0.5rem 1.5rem 0.5rem 0.2rem; margin: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; z-index: 4;}
#switch-currency > span:last-of-type {display: inline-block; position: relative; left: -1.7rem; top: -0.2rem; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #2c89a0;}

/* Lists */
ul, ol {margin: 2rem 0em 2rem 3rem;}
ul li {margin-top: 0.4rem; margin-bottom: 0.4rem; list-style: circle;}
.nav {margin: 0;}
ul.nav li {margin: 0; list-style: none;}
ol.nav li {margin: 0;}
dl {margin-bottom: 6rem; padding: 4rem; margin-left: -3rem; margin-right: -3rem;}
dt, dd {margin: 1rem 0;}
dt {color: #e2e2e2;}

dd > span {display: block; margin-top: 1.5rem;}
dd > span:first-child {margin-top: 0.3rem;}
dd > span:last-child {margin-top: 2rem;}
@media all and (min-width: 60rem) {
  dl {margin-left: auto; margin-right: auto; display: grid; grid-template-columns: max-content auto;}
  dt {grid-column-start: 1; margin-right: 2rem;}
  dd {grid-column-start: 2;}

}

/* Tables */
i {margin: 0 0.3em 0 0;}
.icon-info {position: relative; top: -0.7em; left: -0.4em; font-size: 0.7em;}
table {border-collapse: collapse; margin-top: 1.5em; margin-bottom: 1.5em;}
table * {margin: 0; vertical-align: top;}
.vertical {margin-bottom: 2em; margin-top: 3em;}
.vertical tr th {padding: 0 1em 0.2em 0; white-space: nowrap; color: #555;}
.vertical tr td {padding: 0 1em 0.2em 0;}
.vertical tr:first-child th {padding-top: 0;}

/* Images and Video */
video {width: 100%; height: auto;}
img {display: block; width: 100%; height: auto; max-width: 100%;}
.stretch-body > img {width: 100%;}
figure {margin-top: 5em; margin-bottom: 5em; width: auto;}
figcaption {text-align: center; margin: 2rem auto 1rem;}
table img {min-width: 100px;}
figure img {}
img.neutral {filter: grayscale(100%);}
img.full, figure.full {margin-top: 5em; margin-bottom: 5em; width: 100%;}
.cta-img img {display: inline; margin: 0; max-height: 0.8em; margin-left: 0.5em;}
img.half, figure.half {width: 50%;}

/* Forms */
form {border: none; padding: 0; margin: 0;}
.hidden-radio {position: fixed; bottom: 0; right: 0; opacity: 0; outline: none;}
label {display: inline-block; margin-bottom: 0.3em;}
form input, select {border: solid 1px transparent; background: none; display: box;}
input[type=email] {border-color: #999; color: #000; margin-bottom: 1.5em; margin-top: 0.5em;}
input[type=checkbox] {margin-right: 0.5rem; position: relative; top: 0.2rem;}
input[type=text], input[type=email], input[type=tel] {padding: 0.6em 1.5em; margin-right: 0.5em;}
select {font-size: 0.8em; padding: 0.3em; max-width: 8em; border-color: #ccc; position: relative; top: -0.1rem;}
input.qty {max-width: 2em;}
legend {font-size: 1.4em; margin-bottom: 1em; text-transform: uppercase; color: #555;}
.sublegend {display: block; margin-bottom: 1em; text-transform: uppercase; color: #999;}
fieldset {border: none;}

/* Buttons and CTAs */
.cta {display: inline-block; width: auto; height: auto; margin: 3rem auto 4rem; padding: 0.5em 1.6em; transition: all 250ms ease-in-out; border: none; border-radius: 0.2rem;}
.cta .arrow {display: inline-block; margin: 0; opacity: 0; width: 0; transition: all 0.8s ease;}
.cta:hover .arrow, .cta:focus .arrow {margin-left: 1rem; width: 1rem; opacity: 1; transition: all 0.8s ease;}
.cta-img {font-size: 1.1em; padding-top: 0.5em; margin-bottom: 1em;}
.cta-dark {background: #37abc8/*2c89a0*/; color: #fff;}
.cta-dark:hover, .cta-dark:focus {background: #2c89a0/*006680*/; color: #fff;}
.cta-light {background: #f7f7f7;}
.cta-light:hover, .cta-light:focus {background: #f1f1f1;}
button {display: inline-block; padding: 0.5em 1.5em; border: none; text-decoration: none; border: none; background: none; cursor: pointer; text-align: center; -webkit-appearance: none; -moz-appearance: none;}
button:focus {outline: none; outline-offset: -4px;}
button:active {}
button:disabled, button:disabled:hover, button:disabled:focus, .cta.disabled {background: #999; color: #fff; cursor: default;}
.toggle {font-size: 1.4rem;}
#cta-buy {display: block; position: fixed; top: 1.5rem; right: 0; z-index: 80; border-top-right-radius: 0; border-bottom-right-radius: 0; }
#buy {z-index: 90;}
@media all and (min-width: 50.0em) {
  #cta-buy {top: 3.5rem;}
}

/* Footer */
footer > span {font-size: 1em; line-height: 1.7em; color: #666; display: block; margin-bottom: 1em;}
footer > span a {color: inherit;}
/* Footer Follow links */
#follow {margin: 1.2rem 0 0.7rem; display: inline-flex;}
#follow i {display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; font-size: 1em; border: 1px solid #transparent; color: #000; padding: 0.5rem; border-radius: 0.2rem; text-align: center;}
#follow a {text-decoration: none; border: none; margin: 0 0.4rem;}
#follow a:hover i, #follow a:focus i {background-color: #000; color: #fff;}

/* SPECIAL EFFECTS */

/* Background */
.bgr-light {background-color: #f7f7f7;}
.bgr-light-medium {background-color: #f1f1f1;}
.bgr-dark {background-color: #37abc8/*56a0b3*/; color: #fff;}
.bgr-dark a {color: #e2e2e2;}
.bgr-dark a:hover, .bgr-dark a:focus {color: #fff; border-color: #fff;}

/* Boxed */
.boxed {padding-top: 2rem; padding-bottom: 4rem;}
.boxed-compact {padding: 2rem 2rem 2rem; margin-top: 2rem; margin-bottom: 4rem;}
@media all and (min-width: 50.0em) {
  .boxed {padding-top: 4rem; padding-bottom: 8rem;}
}

/* Image swap on hover */
.img-swap {position: relative; overflow: hidden; z-index: 1;}
.img-swap img:first-of-type {opacity: 1; transition: all 1.2s ease;}
.img-swap:hover img:first-of-type {opacity: 0; transition: all 1.2s ease;}
.img-swap img:last-of-type {transition: all 1.2s ease; position: absolute; left: 0; right: 0; top: 0; opacity: 0;}
.img-swap-container:hover img:last-of-type {opacity: 1; transition: all 1.2s ease;}

/* Product list */
.products {margin-right: -3rem; margin-left: -3rem;}
.products h3 {margin-top: 0; margin-bottom: 2rem;}
.products > div {padding: 4rem 4rem; margin-bottom: 4rem;}
.products > div > a {margin-bottom: 1.2rem;}
.pins > span {display: inline-block; margin-bottom: 2rem;}
@media all and (min-width: 50rem) {
  .products {margin-right: -8rem; margin-left: -8rem;}
  .products > div {padding-left: 6rem; padding-right: 6rem;}
}
@media all and (min-width: 30.0rem) {
  .pins {column-count: 2; column-gap: 2rem;}
}
@media all and (min-width: 50.0rem) {
  .pins {column-count: 3;}
}
@media all and (min-width: 75.0rem) {
  .pins {column-count: 4;}
}
@media all and (min-width: 80.0rem) {
  .products {column-count: 2; column-gap: 4rem; margin-right: 0; margin-left: 0;}
  #main-product .products {column-count: 1;}
  .products > div {display: inline-block;}
  #main-product .products > div {display: flex; align-items: center; justify-content: flex-start;}
  #main-product .products > div > a {width: 40%; margin-right: 2rem;}
  .products img {width: auto;}
  .products p {max-width: 50rem;}
  .pins {column-count: 5;}
}
@media all and (min-width: 90.0rem) {
  .pins {column-count: 5;}
}
@media all and (min-width: 100.0rem) {
  .pins {column-count: 6;}
}

#sitemap {display: inline-block; text-align: left; margin-top: 2rem;}
#sitemap ul {margin: 1rem 0 1rem 2rem;}

/* Show hide more content */
.toggle {margin-bottom: 0; display: inline-block; font-size: 1.8em; width: auto;}
.toggle span {display: inline-block; width: 1.5em; color: #999; border: none;}
.showhide-content {visibility: visible; opacity: 1; max-height: 800px; margin: 2em 0 3.5em 2.8em; transition: all 1s;}
.showhide {display: none;}
.showhide:not(:checked) + .showhide-content {visibility: hidden; opacity: 0; max-height: 0; margin: 0; transition: all 1s;}

/* Simple manual Gallery */
.gallery-container {position: relative; margin-bottom: 8rem; margin-top: 4rem;}
.gallery {position: fixed; top: -9000px; display: none;}
.gallery-content {opacity: 1; transition: all 1s;}
.gallery:not(:checked) + .gallery-content {opacity: 0; transition: all 1s;}
.gallery-content:not(:first-of-type) {position: absolute; top: 0; right: 0; left: 0;}
.gallery-toggle {position: absolute; bottom: -4rem; left: 0; right: 0; text-align: center;}
.gallery-toggle label { cursor: pointer; margin: 0 0.6rem; padding: 0.5rem;}
.gallery-toggle label span {transition: all 1s; display: inline-block; width: 1rem; height: 1rem; background: #e9e9e9; border-radius: 50%;}
#gallery-1:checked ~ .gallery-toggle #gallery-1-toggle {cursor: default;}
#gallery-1:checked ~ .gallery-toggle #gallery-1-toggle span {background: #aaa;}
#gallery-2:checked ~ .gallery-toggle #gallery-2-toggle {cursor: default;}
#gallery-2:checked ~ .gallery-toggle #gallery-2-toggle span {background: #aaa;}

/* Video background */
.video-background > div {position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 10rem 10rem; display: flex; align-items: center; background: rgba(0,0,0,0); color: #fff; font-weight: 500;}
.video-background h1, .video-background h2 {color: #fff;}

#made-in-canada {background-image: url(/assets/images/maple-leaf.png); background-position: right bottom; background-repeat: no-repeat; background-size: auto 70%;}

/* Flex */
@media all and (min-width: 70.00rem) {
  .flex-two {display: flex; align-items: center; justify-content: flex-start;}
  .flex-two > * {}
  .flex-two > *:first-child {margin-right: 8%; flex: 0 0 46%;}
  .flex-two-reverse {flex-direction: row-reverse; justify-content: flex-start;}
  .flex-two-reverse > *:first-child {margin-left: 8%; margin-right: 0;}
  .flex-many {display: flex; align-items: stretch;}
  .flex-many > div {margin: 0 2rem; flex-basis: 30rem;}
  .flex-two h2 {margin-top: 1rem;}
  .flex-two.acc-img > * {flex: 0 0 24%;}
  .flex-two.acc-img > figure {flex: 0 0 68%;}
}

/* END SPECIAL EFFECTS */

/* FORM Add to cart */
.form-add {margin: 2rem 0;}
.form-add label {margin: 0 0.7em 0.7em 0; padding: 0.7em 1em; text-transform: lowercase; border: 1px solid #e2e2e2; border-radius: 0.2em;}
.form-add label:hover {cursor: pointer; border-color: #777;}
.form-add input[type=radio] {position: fixed; opacity: 0;}
.form-add img {max-width: 30rem; margin-right: 4rem;}
.form-add .cta {font-size: 1.1rem; margin: 2rem 0 2rem;}
.price {margin-right: 0.7em; font-size: 1.6em;}
.price-old {text-decoration: line-through; display: inline-block; margin-right: 0.5rem;}
.discount {font-size: 1.1rem; font-weight: 500;}
.form-add p:last-of-type span {display: inline-block; max-width: 40rem;}
.form-add h3 {margin-top: 0;}
.form-add img[rel=var-1] {display: block;}
.form-add img[rel=var-2] {display: none;}

#var-1:checked ~ div label[for=var-1], #var-2:checked ~ div label[for=var-2] {border-color: #777;}
#var-1:checked ~ img[rel=var-1] {display: block;}
#var-1:checked ~ img[rel=var-2] {display: none;}
#var-2:checked ~ img[rel=var-2] {display: block;}
#var-2:checked ~ img[rel=var-1] {display: none;}

/* snipcart */
#var-1:checked ~ div .price span[rel=var-1] {display: inline-box;}
#var-1:checked ~ div .price span[rel=var-2] {display: none;}
#var-2:checked ~ div .price span[rel=var-2] {display: inline-box;}
#var-2:checked ~ div .price span[rel=var-1] {display: none;}
#var-1:checked ~ div button[rel=var-1] {display: inline-flex;}
#var-1:checked ~ div button[rel=var-2] {display: none;}
#var-2:checked ~ div button[rel=var-2] {display: inline-flex;}
#var-2:checked ~ div button[rel=var-1] {display: none;}
/* END snipcart */
/* show/ hide estimated delivery per SKU */
#var-1:checked ~ div div .estimated-delivery span[rel=var-1] {display: inline;}
#var-1:checked ~ div div .estimated-delivery span[rel=var-2] {display: none;}
#var-2:checked ~ div div .estimated-delivery span[rel=var-2] {display: inline;}
#var-2:checked ~ div div .estimated-delivery span[rel=var-1] {display: none;}
/* show/ hide "not available" */
#var-2:checked ~ div span[rel=var-1] {display: none;}

#snipcart p.cart-currency-notice {font-weight: 500; margin: -0.8rem 0 0;}
#snipcart h3.cart-secured-notice {margin: 0 0 2rem;}
#snipcart ul.supported-payment-methods {margin: 1.5rem 0 0.8rem; display: flex; justify-content: space-between;}
#snipcart ul.supported-payment-methods li {font-size: 1.6rem;}

@media all and (min-width: 70em) {
  .form-add {margin: 2rem 0; display: flex; align-items: flex-start;}
}

table .center {white-space: nowrap;}
.tiny {opacity: 0.7; font-size: 1rem;}
.highlight {font-weight: 500;}
.highlight-positive {color: #7baa88;}
.highlight-attention {color: #ea4335;}
.faded {opacity: 0.5;}
.fine {font-size: 0.9em;}
.icon-maple-leaf {color: inherit;}
.mobile-hide {display: none;}
.loader {background: url("/assets/images/loader.gif") no-repeat center center; background-size: contain;}
.flip {border-bottom: 1px solid transparent; padding: 1rem;}
.flip img {transition: 0.8s ease-in-out;}
.flip:hover {}
.flip:hover img {transform: rotate(176.7deg) translate(0,-1.8rem); transition: 0.8s ease-in-out;}

.credits {font-size: 0.9rem; opacity: 0.2;}
.credits a {color: #000; font-weight: 500;}
.credits:hover {opacity: 0.6;}

@font-face {
	font-family: 'nunawe-icons';
	src: url('/assets/nunawe-icons/fonts/nunawe-icons.ttf') format('truetype'),
	url('/assets/nunawe-icons/fonts/nunawe-icons.woff') format('woff');
}

@media print {
	counter-increment: page;
  counter-reset: page 1;
	@bottom-right { content: "Pg." counter(page) " / " counter(pages); }
	@page {overflow: visible;}

}