<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* TODO: define less variables and make consistent for all grid layer.
				 experiment with different ones to make it fit inside 1024-wide ipad landscape mode
*/
/* common ones */

.btn-circle {
	width: 50px;
	height: 50px;
	padding: 5px;
	font-size: 18px;
	line-height: 1.33;
	border-radius: 25px;
}

.main-carousel-slide {
  height: 100%;
}
.main-carousel-slide a {
  display: block;
}
.main-carousel-slide a img {
  width: 100%;
}

.slick-prev, .slick-next, .slick-dots {
	z-index: 999;
}
.slick-prev {
	left: 5px;
}
.slick-next {
	right: 5px;
}
.slick-dots {
	bottom: 10px;
}

#PPMiniCart {
	z-index: 99;
}

#PPMiniCart .minicart-details-name {
	padding-right: 5px;
}
.cart-thumbnail {
	display: block;
	height: 50px;
	padding: 5px;
	border-radius: 10px;
}
.cart-title {
	text-align: center;
	font-weight: bold;
}

#story.promo-header {
  text-align: center;
  background-color:#468ae2;
  border: 2px solid #468ae2;
}

div.modal-header button.close {
	font-size: 3em;
	color: black;
	opacity: 1.0;
}

#logo-div {
  background-color: #767676;
  border: 2px solid #767676;
  border-radius: 6px;
  padding: 10%;
}
.inner-square.active-nav {
  background-color: #ffffff;
  border: 2px solid #767676;
}
.one-one .image {
  padding: 0px;
}
.one-one .image a {
  display: block;
}
.one-one .image img {
  width: 100%;
  height: 100%;
}
.two-two.image {
  padding: 0px;
}
.two-two.image a {
  display: block;
  width: 100%;
  height: 100%;
}
.two-two.image img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {

  .container {
    /* max-width: 930px; */
    width: 960px;
  }
  /* Remove the padding we set earlier */
  .header,
  .marketing,
  .footer {
    font-family: 'Oswald', sans-serif;
    padding-left: 0;
    padding-right: 0;
    line-height: 90%;
  }
	.footer ul li { display: inline; padding: 0; }
	.footer ul { padding: 0; }
  .inner-square.add-cart {
    font-size: 130%;
  }
  /* Space out the masthead */
  .header {
    margin-bottom: 15px;
  }
  /* Remove the bottom border on the jumbotron for visual effect */
  .jumbotron {
    border-bottom: 0;
  }
  .inner-square.how-works {
    padding-top: 20%;
    font-size: 2em;
    color: #767676;
  }
  /* Space out content a bit */
  body {
    font-family: 'Oswald', sans-serif;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  /* Everything but the jumbotron gets side spacing for mobile first views */
  .marketing,
  .footer {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
  }
  /* Custom page header */
  .header {
    /* border-bottom: 1px solid #e5e5e5; */
  }
  /* Make the masthead heading the same height as the navigation */
  .header h3 {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 40px;
    padding-bottom: 19px;
  }
  /* Custom page footer */
  .footer {
    padding-top: 19px;
    color: #777;
    border-top: 1px solid #e5e5e5;
  }
  a,
  a:hover,
  a:visited,
  a:link,
  a:active {
    color: inherit;
  }
  .container-narrow &gt; hr {
    margin: 30px 0;
  }
  /* Main marketing message and sign up button */
  .jumbotron {
    text-align: center;
    border-bottom: 1px solid #e5e5e5;
  }
  .jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
  }
  /* Supporting marketing content */
  .marketing {
    margin: 40px 0;
  }
  .marketing p + h4 {
    margin-top: 28px;
  }
  .menu,
  #magnet-content,
  #snap-content,
  .handbag-content {
    margin-bottom: 15px;
  }
  .desc {
    margin-bottom: 20px;
  }
  .home {
    border: 2px solid #767676;
    border-radius: 6px;
    height: 135px;
    width: 137px;
    margin-left: 15px;
    text-align: center;
    padding-top: 50px;
  }
  .contact {
    border: 2px solid #767676;
    border-radius: 6px;
    padding: 10px;
    height: 135px;
    width: 135px;
    margin-left: 15px;
    text-align: center;
    padding-top: 55px;
  }
  .contact a:hover,
  a:visited,
  a:link,
  a:active {
    text-decoration: none;
  }
  .linked {
    cursor: pointer;
  }
  .two-two {
    width: 291px;
    height: 287px;
    border: 2px solid #767676;
    padding: 10px 10px 10px 15px;
    margin-right: 15px;
    left: 15px;
    border-radius: 6px;
  }
  .two-one-spacer {
    width: 289px;
    height: 135px;
    border: none;
    padding: 10px 10px 10px 15px;
    margin-right: 15px;
    left: 15px;
    z-index: -4;
  }
  .two-three {
    width: 291px;
    height: 435px;
    border: 2px solid #767676;
    padding: 10px 10px 10px 15px;
    margin-right: 15px;
    left: 15px;
    border-radius: 6px;
  }
  .two-three.image {
    padding: 0px;
  }
  .two-three.blank {
    background-color: #e8e8e8;
		border: 0;
  }
  .two-two.blank {
    background-color: #e8e8e8;
		border: 0;
  }
  .two-three.image a {
    display: block;
    width: 100%;
    height: 100%;
  }
  .two-three.image img {
    width: 100%;
    height: 100%;
  }
  .four-one {
    width: 596px;
    height: 135px;
    border: 2px solid #767676;
    padding: 10px 10px 10px 15px;
    margin-right: 15px;
    left: 15px;
    border-radius: 6px;
  }
  .four-one-spacer {
    width: 596px;
    height: 1px;
    border: none;
    padding: 10px 10px 10px 15px;
    margin-right: 15px;
    left: 15px;
    z-index: -4;
  }
  .four-two {
    width: 596px;
    height: 287px;
    border: 2px solid #767676;
    padding: 0px;
    margin-right: 15px;
    left: 15px;
    border-radius: 6px;
    overflow: hidden;
  }
  .four-two-spacer {
    width: 596px;
    height: 135px;
    border: none;
    padding: 10px 10px 10px 15px;
    margin-right: 15px;
    left: 15px;
    z-index: -4;
  }
  .four-three {
    width: 596px;
    height: 422px;
    border: 2px solid #767676;
    padding: 0px;
    margin-right: 15px;
    left: 15px;
    border-radius: 6px;
    overflow: hidden;
  }
  .four-three-spacer {
    width: 596px;
    height: 135px;
    border: none;
    padding: 10px 10px 10px 15px;
    margin-right: 15px;
    left: 15px;
    z-index: -4;
  }
  .bag-desc {
    font-family: 'Lato', sans-serif;
    font-size: 0.96em;
  }
  #story {
    font-family: 'Lato', sans-serif;
    border: 2px solid #a8a8a8;
    background-color: #a8a8a8;
    color: #FFFFFF;
    font-size: 0.96em;
    padding: 8px;
    line-height: 127%;
  }
  #panel-title div {
    padding: 5% 0% 0% 30%;
    font-size: 200%;
  }
  #accessories-title div {
    padding: 5% 0% 0% 35%;
    font-size: 200%;
  }
  .two-one {
    width: 152px;
    height: 135px;
    border: 2px solid #767676;
    padding: 10px 10px 10px 15px;
    margin-right: 15px;
    left: 15px;
    border-radius: 6px;
  }
  #mag-menu.twoone {
    text-align: center;
    padding-top: 40px;
    font-family: 'Oswald', sans-serif;
    font-size: 150%;
  }
  #mag-menu.twoone.color {
    background-color: #DD5DFC;
    color: black;
  }
  #snap-menu.twoone {
    text-align: center;
    padding-top: 40px;
    font-family: 'Oswald', sans-serif;
    font-size: 150%;
  }
  #snap-menu.twoone.color {
    background-color: #ff0000;
    color: black;
  }
 .selected {
    padding: 2px;
    border: 1px solid #a9a9a9;
  }

  #mag-small,
  #mag-large,
  #snappy,
  #disclaimerModal,
  #panel-coming-soon {
    font-family: 'Helvetica', sans-serif;
  }
  .btn-primary {
    background-color: #888888;
    border: none;
  }
  .btn-primary:hover {
    background-color: #646464;
    border: none;
  }
  #panel-coming-soon {
    font-family: 'Helvetica', sans-serif;
    font-size: 90%;
  }
  #cover-text {
    font-family: 'Helvetica', sans-serif;
  }
  .logo {
    height: 145px;
  }
  .inner-square-social {
    border: 2px solid #e8e8e8;
    border-radius: 6px;
    height: 135px;
    width: 135px;
    padding-top: 40%;
    text-align: center;
    background-color: #e8e8e8;
  }
  .inner-square {
    border: 2px solid #e8e8e8;
    border-radius: 6px;
    height: 135px;
    width: 135px;
    padding-top: 40%;
    text-align: center;
    background-color: #e8e8e8;
  }
  .inner-square.blank:hover {
    border: 2px solid #e8e8e8;
    background-color: #e8e8e8;
  }
  .inner-square:hover {
    border: 2px solid #767676;
    background-color: #FFFFFF;
  }
  .cart-icon {
    position: absolute;
    left: 50%;
    top: 10px;
    font-size: 150%;
  }
  .cart-text {
    position: absolute;
    left: 45%;
    font-size: 100%;
    text-align: center;
    color: #000000;
  }
  .inner-text {
    margin-top: 50px;
    font-size: 150%;
    text-align: center;
    color: #767676;
    font-weight: 900;
  }
  .wood-square {
    border: 2px solid #767676;
    height: 135px;
  }
  .one-one {
    height: 135px;
    width: 153px;
  }
  .one-one a:hover,
  a:visited,
  a:link,
  a:active {
    text-decoration: none;
  }
  .nav-menu-text {
    font-family: 'Oswald', sans-serif;
    font-size: 200%;
    color: black;
  }
  .menu-text {
    font-family: 'Oswald', sans-serif;
    font-size: 150%;
    color: white;
  }
  /* PANELS */
  .panel-row {
    margin-bottom: 15px;
  }
  .upper-row {
    float: left;
    margin-top: -135px;
    margin-bottom: 0px;
  }
  .middle-row {
    float: left;
    margin-top: -284px;
    margin-bottom: 0px;
  }
  .panel {
    background-repeat: no-repeat;
    background-position: center;
  }
  .panel span {
    position: absolute;
    bottom: 15px;
  }
}
@media screen and (max-width: 767px) {
  .container {
    width: 320px;
  }
  /* Remove the padding we set earlier */
  .header,
  .marketing,
  .footer {
    font-family: 'Oswald', sans-serif;
    padding-left: 0;
    padding-right: 0;
    font-size: 1em;
    line-height: 150%;
  }
	.footer ul {
		margin-left: -20px;
	}
  .inner-square.add-cart {
    padding-top: 5px;
    font-size: 70%;
  }
  /* Space out the masthead */
  .header {
    margin-bottom: 15px;
  }
  /* Remove the bottom border on the jumbotron for visual effect */
  .jumbotron {
    border-bottom: 0;
  }
  .inner-square.how-works {
    font-size: 1.2em;
  }
  /* Space out content a bit */
  body {
    font-family: 'Oswald', sans-serif;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  /* Everything but the jumbotron gets side spacing for mobile first views */
  .marketing,
  .footer {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
  }
  /* Custom page header */
  .header {
    /* border-bottom: 1px solid #e5e5e5; */
  }
  /* Make the masthead heading the same height as the navigation */
  .header h3 {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 40px;
    padding-bottom: 19px;
  }
  /* Custom page footer */
  .footer {
    padding-top: 19px;
    color: #777;
    border-top: 1px solid #e5e5e5;
  }
  a,
  a:hover,
  a:visited,
  a:link,
  a:active {
    color: inherit;
  }
  .container-narrow &gt; hr {
    margin: 30px 0;
  }
  /* Main marketing message and sign up button */
  .jumbotron {
    text-align: center;
    border-bottom: 1px solid #e5e5e5;
  }
  .jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
  }
  /* Supporting marketing content */
  .marketing {
    margin: 40px 0;
  }
  .marketing p + h4 {
    margin-top: 28px;
  }
  .menu,
  #magnet-content,
  #snap-content,
  .handbag-content {
    margin-bottom: 10px;
  }
  .desc {
    margin-bottom: 20px;
  }
  .home {
    border: 2px solid #767676;
    border-radius: 6px;
    height: 67px;
    width: 69px;
    margin-left: 15px;
    text-align: center;
    padding-top: 50px;
  }
  .contact {
    border: 2px solid #767676;
    border-radius: 6px;
    padding: 10px;
    height: 67px;
    width: 67px;
    margin-left: 15px;
    text-align: center;
    padding-top: 55px;
  }
  .contact a:hover,
  a:visited,
  a:link,
  a:active {
    text-decoration: none;
  }
  .linked {
    cursor: pointer;
  }
  .two-two {
    width: 143px;
    height: 143px;
    border: 2px solid #767676;
    padding: 10px 10px 10px 15px;
    margin-right: 9px;
    left: 15px;
    border-radius: 6px;
  }
  .two-one-spacer {
    width: 145px;
    height: 67px;
    border: none;
    padding: 10px 10px 10px 15px;
    margin-right: 10px;
    left: 15px;
    z-index: -4;
  }
  .two-three {
    width: 143px;
    height: 210px;
    border: 2px solid #767676;
    padding: 10px 10px 10px 15px;
    margin-right: 9px;
    left: 15px;
    border-radius: 6px;
  }
  .two-three.image {
    padding: 0px;
  }
  .two-three.blank {
    background-color: #e8e8e8;
		border: 0;
  }
  .two-two.blank {
    background-color: #e8e8e8;
		border: 0;
  }
  .two-three.image a {
    display: block;
    width: 100%;
    height: 100%;
  }
  .two-three.image img {
    width: 100%;
    height: 100%;
  }
  .four-one {
    width: 294px;
    height: 67px;
    border: 2px solid #767676;
    padding: 10px 10px 10px 15px;
    margin-right: 10px;
    left: 15px;
    border-radius: 6px;
  }
  .four-one-spacer {
    width: 294px;
    height: 1px;
    border: none;
    padding: 10px 10px 10px 15px;
    margin-right: 10px;
    left: 15px;
    z-index: -4;
  }
  .four-two {
    width: 294px;
    height: 143px;
    border: 2px solid #767676;
    padding: 0px;
    margin-right: 10px;
    left: 15px;
    border-radius: 6px;
    overflow: hidden;
  }
  .four-two-spacer {
    width: 294px;
    height: 67px;
    border: none;
    padding: 10px 10px 10px 15px;
    margin-right: 10px;
    left: 15px;
    z-index: -4;
  }
  .bag-desc {
    font-family: 'Lato', sans-serif;
    font-size: 0.96em;
    line-height: 100%;
  }
  .justified {
    text-align: justify;
  }
  #story {
    font-family: 'Lato', sans-serif;
    border: 2px solid #a8a8a8;
    background-color: #a8a8a8;
    color: #FFFFFF;
    padding: 6px 8px 8px 8px;
    font-size: 0.96em;
    line-height: 100%;
  }
  #panel-title div {
    padding: 5% 0% 0% 30%;
    font-size: 200%;
  }
  #accessories-title div {
    padding: 5% 0% 0% 35%;
    font-size: 200%;
  }
  .two-one {
    width: 75px;
    height: 67px;
    border: 2px solid #767676;
    padding: 10px 10px 10px 15px;
    margin-right: 15px;
    left: 15px;
    border-radius: 6px;
  }
  #mag-menu.twoone {
    text-align: center;
    padding-top: 40px;
    font-family: 'Oswald', sans-serif;
    font-size: 150%;
  }
  #mag-menu.twoone.color {
    background-color: #DD5DFC;
    color: black;
  }
  .selected {
    padding: 2px;
    border: 1px solid #a9a9a9;
  }

  #mag-small,
  #mag-large,
  #snappy,
  #disclaimerModal,
  #panel-coming-soon {
    font-family: 'Helvetica', sans-serif;
  }
  .btn-primary {
    background-color: #888888;
    border: none;
  }
  .btn-primary:hover {
    background-color: #646464;
    border: none;
  }
  #panel-coming-soon {
    font-family: 'Helvetica', sans-serif;
    font-size: 90%;
  }
  #cover-text {
    font-family: 'Helvetica', sans-serif;
  }
  .logo {
    height: 145px;
  }
  #handbags .inner-color {
    background-color: #ffff00;
  }
  #panels .inner-color {
    background-color: #ffff00;
  }
  #accessories .inner-color {
    background-color: #ffff00;
  }
  .inner-square-social {
    border: 2px solid #e8e8e8;
    border-radius: 6px;
    height: 67px;
    width: 67px;
    padding-top: 10%;
    font-family: Oswald, sans-serif;
    font-size: 1.1em;
    text-align: center;
    background-color: #e8e8e8;
  }
  .inner-square {
    border: 2px solid #e8e8e8;
    border-radius: 6px;
    height: 67px;
    width: 67px;
    padding-top: 10%;
    font-family: Oswald, sans-serif;
    font-size: 1em;
    text-align: center;
    background-color: #e8e8e8;
  }
  .inner-square.blank:hover {
    border: 2px solid #e8e8e8;
    background-color: #e8e8e8;
  }
  .inner-square:hover {
    border: 2px solid #767676;
    background-color: #FFFFFF;
  }
  .cart-icon {
    position: absolute;
    left: 50%;
    top: 10px;
    font-size: 150%;
  }
  .cart-text {
    position: absolute;
    left: 45%;
    font-size: 100%;
    text-align: center;
    color: #000000;
  }
  .inner-text {
    margin-top: 40px;
    font-size: 90%;
    text-align: center;
    color: #767676;
    font-weight: 900;
  }
  .wood-square {
    border: 2px solid #767676;
    height: 67px;
  }
  .one-one {
    height: 67px;
    width: 76px;
  }
  .one-one a:hover,
  a:visited,
  a:link,
  a:active {
    text-decoration: none;
  }
  .nav-menu-text {
    font-family: 'Oswald', sans-serif;
    font-size: 200%;
    color: black;
  }
  .menu-text {
    font-family: 'Oswald', sans-serif;
    font-size: 150%;
    color: white;
  }
  /* PANELS */
  .panel-row {
    margin-bottom: 15px;
  }
  .upper-row {
    float: left;
    margin-top: -67px;
    margin-bottom: 0px;
  }
  .middle-row {
    float: left;
    margin-top: -134px;
    margin-bottom: 0px;
  }
  .panel {
    background-repeat: no-repeat;
    background-position: center;
  }
  .panel span {
    position: absolute;
    bottom: 15px;
  }
  .main-carousel-slide {
    height: 100%;
  }
}


/* common */
.ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
}
.ribbon::before,
.ribbon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid #2980b9;
}
.ribbon span {
  position: absolute;
  display: block;
  width: 225px;
  padding: 15px 0;
  background-color: #3498db;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  color: #fff;
  font: 700 18px/1 'Lato', sans-serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  text-transform: uppercase;
  text-align: center;
}

@media screen and (max-width: 767px) {
.ribbon span {
  position: absolute;
  display: block;
  width: 220px;
  padding: 5px 0;
  background-color: #3498db;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  color: #fff;
  font: 700 18px/1 'Lato', sans-serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  text-transform: uppercase;
  text-align: center;
}
}

/* top left*/
.ribbon-top-left {
  top: -10px;
  left: -10px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
  border-top-color: transparent;
  border-left-color: transparent;
}
.ribbon-top-left::before {
  top: 0;
  right: 20px;
}
.ribbon-top-left::after {
  bottom: 20px;
  left: 0;
}
.ribbon-top-left span {
  right: -25px;
  top: 30px;
  transform: rotate(-45deg);
}

/* top right*/
.ribbon-top-right {
  top: -10px;
  right: -10px;
}
.ribbon-top-right::before,
.ribbon-top-right::after {
  border-top-color: transparent;
  border-right-color: transparent;
}
.ribbon-top-right::before {
  top: 0;
  left: 0;
}
.ribbon-top-right::after {
  bottom: 0;
  right: 0;
}
.ribbon-top-right span {
  left: -25px;
  top: 30px;
  transform: rotate(45deg);
}

/* bottom left*/
.ribbon-bottom-left {
  bottom: -10px;
  left: -10px;
}
.ribbon-bottom-left::before,
.ribbon-bottom-left::after {
  border-bottom-color: transparent;
  border-left-color: transparent;
}
.ribbon-bottom-left::before {
  bottom: 0;
  right: 0;
}
.ribbon-bottom-left::after {
  top: 0;
  left: 0;
}
.ribbon-bottom-left span {
  right: -25px;
  bottom: 30px;
  transform: rotate(225deg);
}

/* bottom right*/
.ribbon-bottom-right {
  bottom: -10px;
  right: -10px;
}
.ribbon-bottom-right::before,
.ribbon-bottom-right::after {
  border-bottom-color: transparent;
  border-right-color: transparent;
}
.ribbon-bottom-right::before {
  bottom: 0;
  left: 0;
}
.ribbon-bottom-right::after {
  top: 0;
  right: 0;
}
.ribbon-bottom-right span {
  left: -25px;
  bottom: 30px;
  transform: rotate(-225deg);
}
</pre></body></html>