header {text-align:center}
header section {display:flex;text-align:left;color:#398fb7;border-bottom:1px solid #e3e3e3;width:100%}
header a, header em {width:25%}
header section > nav {width:50%;text-align:center}
header h6 {display:inline-block;font-weight:400}
header img {width:1.5rem}
header em {text-align:right;cursor:pointer}
header em a.active {font-weight:700}
header b {display:none}
header h1 {color:#001225}
.sort {position:absolute;right:0;bottom:1.3rem;border:1px solid #e3e3e3;border-radius:5px;color:#666;background:#fdfdfd}
.sort option {background:#fdfdfd}

header span {display:block;color:#d3eafa}
header mark h1 {color:#d3eafa}
header mark h2 {color:#e5f3fc}
header data {color:#b9dff4;display:block}
header data i {color:#6ab5d5}
header mark {align-items:center;display:flex;background:#398fb7;background-image: url(../img/bg-noise.png), radial-gradient(circle, rgba(57,143,183,1) 0%, rgba(57,143,183,1) 50%, rgba(106,181,213,1) 100%);background-size:auto, 100%; background-repeat: repeat, no-repeat;text-align:left}
header mark > div {color:#fff}
header mark figure {position: relative;background-position:center center;background-repeat:no-repeat;background-size:cover;align-self:stretch;border-radius:5px;width:40%}
header nav {text-align:left}
header nav div {display:inline-block}
header nav div img {width:6px}
header nav div a, header nav div a.non-click:hover {color:#cfe1e9}
header nav div a:hover:not(.non-click):not(.dropdown-link) {color:#fdfdfd}
header nav div a.non-click:hover {cursor: default}
header > nav {white-space: nowrap;overflow: hidden}

.dropdown-wrapper {position: relative;color:#143553;display:inline-block;text-align:center}
.dropdown-wrapper:hover {cursor:pointer}
.dropdown {display: none;position: absolute;padding-top:.5rem}
.dropdown em {display:block;color:#f1f1f1;width:15rem;text-align:center;margin-left:-5rem;line-height:.23;padding-bottom:.2rem}
.dropdown a {display:block;width:12rem;color:#143553;background:#f1f1f1;margin-left:-3.5rem}
.dropdown-wrapper[label="More"] .dropdown em {margin-left:-6.5rem}
.dropdown-wrapper[label="More"] .dropdown a {margin-left:-5.5rem}
.dropdown a {border:1px solid #e3e3e3;border-bottom:0}
.dropdown em + a {border-radius:5px 5px 0 0}
.dropdown a:hover {background:#e3e3e3;color:#6ab5d5}
.dropdown a:last-child {border-radius:0 0 5px 5px;border-left:1px solid #e3e3e3;border-right:1px solid #e3e3e3;border-bottom:1px solid #e3e3e3}
.dropdown-wrapper:hover .dropdown {display: block;cursor:pointer}

.card {background:#f1f1f1;display:block;border-radius:5px;transition: all .5s ease-out;display:flex;height:12rem}
.card:hover {background:#aaa;background:rgba(170,170,170,.25);cursor:pointer}
.card section {width:40%;align-self:center}
.card section h3 {color:#1a1b1d}
.card section span {color:#666}
.card figure {width:60%;overflow:hidden;background-size:auto 100%;background-repeat:no-repeat;background-position:left center}
.card figure img {width:100%}

.products {display:flex;flex-wrap: wrap}
.products a {transition: all .5s ease-out;position:relative;width:calc(25% - 2.25rem);background:#e3e3e3;border-radius:5%;text-align:center;color:#1a1b1d;box-sizing: border-box}
.products a figure img {width:80%}
.products a:hover:not([data-category="strap"]):not(.bookmark) figure img:first-child {display:none}
.products a:hover:not([data-category="strap"]):not(.bookmark) figure img:last-child {display:inline-block;animation: img-display 1.25s}

.toc div {color:#6ab5d5;background:radial-gradient(circle, rgba(229,243,252,1) 0%, rgba(229,243,252,1) 75%, rgba(245,252,255,1) 100%);border-radius:5px}
.toc ul {list-style-type:none}
.toc ul li a {display:block;background: url(../img/toc-a-template-bg.png) left 1px center no-repeat;background-size:13px auto;padding-left:27px}
.toc ul li a:hover {background: url(../img/toc-a-template-bg-hover.png) left 1px center no-repeat;background-size:13px auto}
.toc ul li a.faq {display:block;background: url(../img/toc-a-faq-bg.png) left center no-repeat;background-size:14px auto;padding-left:27px}
.toc ul li a.faq:hover {display:block;background: url(../img/toc-a-faq-bg-hover.png) left center no-repeat;background-size:14px auto}
.toc ul li a.guide {background: url(../img/toc-a-guide.png) left center no-repeat;background-size:14.5px auto}
.toc ul li a.guide:hover {background: url(../img/toc-a-guide-hover.png) left center no-repeat;background-size:14.5px auto}

article {background:#fdfdfd}
article p, article ul li {color:#1a1b1d}
article h3 {color:#080d12}
article p.date {text-align:center}
article img {width:100%}
.step {border-radius:5px;background: #fff;background:linear-gradient(180deg, rgba(229,243,252,.35) 0%, rgba(229,243,252,.35) .5rem, rgba(255, 255, 255,1) 2rem, rgba(255, 255, 255,1) 100%);border:1px solid rgba(207,225,233,1)}
.step span {display:flex}
.step h3 {flex: 1;position:relative;top:.7rem;margin-bottom:.7rem;color:#123a4c;font-weight:600}
.step span em {display:table;background:#b9dff4;background:radial-gradient(circle, rgba(245,252,255,1) 0%,  rgba(218,236,247,1) 75%, rgba(229,243,252,1) 100%);border-radius:50%;text-align:center;height:2.25rem;}
.step span em i {display:table-cell;vertical-align:middle;width:2.4rem;line-height:1;font-family:Arial;border-right:.05rem solid transparent}
.step img {border-radius:5px;background:#fff}
.step p i {font-style:italic}
@keyframes img-display {
0% {opacity: 0;transform: scale(1)}
100% {opacity: 1;transform: scale(1)}
}
.products a figure img:first-child {display:inline-block}
.products a:not([data-category="strap"]) figure img:last-child {display:none}
.products a div {white-space: nowrap}
.products a div b {color:#575757;display:inline-block}
.products a div i {color:#666}
.products .price {position:absolute;display:inline-block;top:0;right:0;background:#f9fdfd;background:rgba(249,253,253,.5);border-radius:5px}
.products em {position:absolute;display:flex;top:0;left:0;width:calc(100% - 50px - 1.5rem);text-align:left;flex-wrap: wrap}
.products a ul {display:flex;align-items:center;justify-content: center}
.products a li {display:inline-block;list-style-type: none;border-radius:50%;border:1px solid #999}
.products a em li {height:.8rem;width:.8rem}
.products a ul li {height:1rem;width:1rem}
.products a li.last {border-radius:0;border:0;color:#767676;text-align:left;height:auto}
.products a section {display:flex}
.products a section mark {width:33.333333%}
.products a section mark img[title="Capacity"] {width:.75rem}
.products a section mark img[title="Weight"] {width:.55rem}
.products a[data-closure="button"] em img {width:.85rem}
.products a[data-closure="foldover"] em img {width:.65rem}
.products a[data-closure="hook"] em img {width:.9rem}
.products a[data-closure="magnetic"] em img {width:.85rem}
.products a[data-closure="open"] em img {width:.95rem}
.products a[data-closure="turnlock"] em img {width:.9rem}
.products a[data-closure="zipper"] em img {width:.35rem}

.products a li[title="Black"] {background:#000}
.products a li[title="Blue"] {background:#056da5}
.products a li[title="Beige"] {background:#f8d9ae}
.products a li[title="Burgundy"] {background:#701e2a}
.products a li[title="Brown"] {background:#a27146}
.products a li[title="Cream"] {background:#fcfaf1}
.products a li[title="Dark brown"] {background:#6d3100}
.products a li[title="Gold"] {background:#efbf04}
.products a li[title="Green"] {background:#2b4b37}
.products a li[title="Grey"] {background:#9f9991}
.products a li[title="Orange"] {background:#ff9639}
.products a li[title="Pink"] {background:#ff9cea}
.products a li[title="Purple"] {background:#994dff}
.products a li[title="Red"] {background:#cb0c1b}
.products a li[title="Navy"] {background:#003a6b}
.products a li[title="Silver"] {background:#c9c9c9}
.products a li[title="Taupe"] {background:#ae9375}
.products a li[title="White"] {background:#ffffff}
.products a li[title="Yellow"] {background:#ffd300}

.products a:hover {background:#aaa;background:rgba(170,170,170,.5);color:#1a1b1d}
.products a.bookmark:hover {background:#e3e3e3}
.products a.bookmark figure img {width:100%}
.products a.bookmark {align-content:center}
.products a.bookmark.mobile {display:none}

article {color:#111c24}
article b {-webkit-text-stroke-width: .2px}

.footer {text-align:center;border-top:1px solid #e3e3e3;color:#aaa}
.footer a {display:inline-block}
@media screen and (max-width: 1150px) 
{
header a, header em {width:59%}
header section nav {display:none}
header b {display:block;text-align:center;background:#f1f1f1}
header .dropdown-wrapper[label="More"] {display:none}
}
@media screen and (max-width: 1000px) 
{
header mark figure {background-size: cover}
.step h3 {top:.6rem}
.step span em {width:2.2rem}
.step span em i {height:2.1rem}
.toc {display:none}

.sort {bottom:1.5rem}

.card {height:13.5rem}

.products a {width:calc(33.33333% - 1.5rem)}
.products a figure img {width:70%}
.products a.bookmark.mobile {display:block}
.products a.bookmark.desktop {display:none}
.products .bookmark.mobile figure img {border-radius:15px}
.products .bookmark.mobile figure img:last-child, .products a.bookmark.mobile:hover figure img:first-child {display:inline-block;animation:none}
.products a section, .products a section mark {display:block}
.products a section mark {width:100%}
.products a section mark:first-child {display:none}
}

@media screen and (max-width: 550px) 
{
header b.lr-s {overflow-x:unset}
header em.lr-m {padding-left:0;padding-right:0}
header figure {width:1.75rem}
header mark > a {width:1.75rem}
header mark {display:block}
header nav div img {width:5px}
header mark > div {padding-bottom:0;padding-right:0}
header mark > div, header mark figure {width:100%}
header mark figure {margin-left:-1.25rem;margin-right:-1.25rem;width:calc(100% + 2.5rem);height:300px;border-radius:0;background-size: 100% auto}
header div[label="Bag charms"], header a[label="Guides"], header a[label="Loewe Puzzle alternatives"], header a[label="Straps"], header b > a[label="Totes"] {display:none}
header .dropdown-wrapper[label="More"] {display:inline-block}

.step {border-radius:0;border-left:0;border-right:0}
.step span {display:block}
.step span em {height:1.7rem}
.step span em i {width:1.8rem;border-right:.05rem solid transparent}

.card {display:block;height:auto;text-align:center}
.card section, .card figure {width:100%}
.card figure {height:5rem;background-size:auto 100%;background-position:center}

.products a {width:calc(50% - 1.5rem)}
.products a ul li:nth-child(3) {display:block}
.products a figure img {width:100%}
.products a div mark {display:none}
.products a.bookmark {width:100%}
.products a.bookmark figure img {width:80%}

.footer a {display:block}
}

@media screen and (max-width: 320px) 
{
header .dropdown-wrapper[label="Bags similar to"] {display:none}
header a[label="Loewe Puzzle alternatives"] {display:block}
.card figure {height:4rem}
.products a {width:100%}
.products a figure img {width:80%}
.products a.bookmark figure img {width:100%}
.products a section {display:flex}
.products a section mark, .products a section mark:first-child {display:inline;width:33.333333%}
}