/* Fonts */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/inter-v20-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/inter-v20-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/inter-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/space-grotesk-v22-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Global formatting */
*,*:before,*:after{box-sizing:border-box}
html{font-size:100%;margin:0;scroll-behavior:smooth}
body {color:#212121;font-family: Inter, system-ui, sans-serif;font-optical-sizing: auto;margin:0;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}

/* Containers */
main{min-height:31.25rem;margin:0 auto 1.25rem;padding-bottom:2rem}
.container{max-width:1248px;padding-left:1.5rem;padding-right:1.5rem;margin:0 auto}
.sidebar{float:right;width:21.25rem;height:100%}
.break{display:inline-block;width:100%}

/* Element styling */
a{color:unset;text-decoration:none}
ul{padding:0;margin:0;list-style:none}
img{max-width:100%}
p{font-size:1em;line-height:1.75rem;margin:0 0 1rem}
button{border:0;background:none;font:inherit;cursor:pointer;color:inherit}
table{width:100%}
.center{text-align:center}
.semi-bold{font-weight:600}

/* Titles & Headings */
h1{font-size:2rem;margin:0 0 .5rem;line-height:1.375em}
h2{font-size:1.25rem;margin:0 0 .75em}
h3{font-size:1.125rem}
.heading{margin-bottom:1.5rem;overflow:hidden}
.heading h1{margin-bottom:0}
.heading p{margin:.5rem 0 0 0;opacity:.9}
.heading .info{margin-top:.75rem}
.info{font-size:.875rem;opacity:.9;margin:0}
.info span {margin:0 .5rem}
.hthumb{float:left;height:5rem;width:5rem;margin-right:.5rem}
.break-h{font-size:1.5rem;line-height:1em;margin-bottom:1rem}
.break-h2{font-size:1.5rem;line-height:1em;margin-bottom:.5rem}
.rlink{float:right;margin-top:.5rem;font-weight:600;line-height:1em}
h1,h2,h3,h4{font-family:"Space Grotesk", system-ui, sans-serif}

/* Link styling */
p a,.spec-table a,.tlist a,.blist a,.nlist li a {color:#0939FB}
span.col-h2:hover{color:#4067FC;transition:.1s ease}
p a:hover,.spec-table a:hover,.tlist a:hover,.blist a:hover,.nlist li a:hover, #accept-cookies:hover {color:#3454D2;transition:.1s}
.navbox a:hover, .bread a:hover, .ham:hover, .sortable th:hover{opacity:.6;transition:.1s}

/* Page header and top nav bar */
.navcont{background-color:#fff;border-bottom:1px solid #ddd;height:4.25rem;margin-bottom:1.25rem;width:100%;/*box-shadow: 0 0 5px rgb(0 0 0 / 30%)*/}
.logo{float:left;height:4.25rem;padding:1.5rem 0;position:absolute}
.navbox{float:right}
.ham{display:none}
.navbox li{display:inline}
.navbox a{float:left;line-height:4.25rem;padding:0 1.25em;font-weight:700}

/* Mobile side navigation */
.sidenav{height:100%;width:0;position:fixed;top:0;left:0;background-color:#111;overflow-x:hidden;z-index:13;transition:.2s;padding-top:4em}
.sidenav a{margin-bottom:1em;padding:.5rem .5rem .5rem 1.5rem;display:block;transition:.05s;white-space:nowrap;color:#fff;font-size:1em;font-weight:600}
.sidenav .closebtn{position:absolute;top:1rem;right:1.5rem;font-size:2.275em;line-height:1em;color:#fff;cursor:pointer}

/* Article feed */
.feed{float:left;width:780px;min-height:700px}
.feed-a{margin-bottom:1rem;overflow:hidden;padding:0 0 1rem;width:100%;border-bottom:1px solid #ddd}
.feed-a h3{margin:0 0 .5rem;line-height:1.25em;font-size:1.125rem}
.feed-a p{margin:0 0 1rem}
.feed-a img{margin-right:1.25rem;width:200px;float:left;height:auto;transition: transform 0.2s ease-in-out}
.feed-tag{font-weight:700;margin-bottom:.5rem}

/* Columns and rows */
.row{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0 auto 1.25rem;width:100%;padding-right:0}
.col{width: calc(25.3% - 1.25rem);margin:0 1.25rem 1.25rem 0;position:relative;overflow:hidden}
.col-img{display:block;margin:auto;max-width:100%;height:auto;position:relative}
.col-img2{display:block;margin:0 auto .5rem;width:100px;height:auto}
.col-h{margin:.5rem auto .25rem;font-size:1rem;line-height:1.5em;overflow:hidden}
.col-h:hover{opacity:.8}
.col-h2{font-size:.9375rem;font-weight:400}
.col-h3{margin:.5rem auto;font-size:1.125rem;line-height:1.375em;overflow:hidden}
.col p{line-height:1.5em;margin:0 0 .5rem;font-size:.9125rem;opacity:.9}
.col:nth-of-type(4n+0){margin-right:0}
.over-h{position:absolute;bottom:0;z-index:11;color:#fff;font-size:1.125rem;padding:0 0 .75rem .75rem;margin:0;font-weight:700;text-shadow: 2px 2px 4px #000000;letter-spacing:.5px}
.over-img{display:block;width:100%;filter: brightness(75%)}
.over-img:hover{filter: brightness(60%);transition:.25s ease}
.sold-img{opacity:.5}
.sold-tag{width:88px;height:88px;border-radius:50%;background:#000;position:absolute;margin:auto;color:#fff;top:50%;left:50%;transform: translate(-50%, -50%);opacity:.5}
.sold-text{display:flex;justify-content:center;margin:auto;align-items:center;margin-top:32px;font-weight:600}

/* 6 Column */
.col6{width: calc(16.8% - 1rem);margin:0 1rem 1.25rem 0;position:relative;padding:1rem;overflow:hidden}
.col6:nth-child(6n+0){margin-right:0}
.col6 img{}

/* 3 Column */
.col3{width: calc(33.9% - 1.5rem);margin:0 1.5rem 1.25rem 0;position:relative;overflow:hidden}
.col3:nth-of-type(3n+0){margin-right:0}
.col3-h{margin:.25rem auto .25rem;font-size:1rem;line-height:1.375em;overflow:hidden}

/* 2 Column */
.col2{width: calc(50% - 1.5rem);margin:0 1.5rem 1.25rem 0;position:relative;overflow:hidden}
.col2:nth-of-type(3n+0){margin-right:0}

/* Product hero image and text */
.col-box{aspect-ratio:1/1;display:flex;justify-content:center;position:relative;overflow:hidden}
.col-box img{height:auto;transition: transform 0.25s cubic-bezier(.2,.8,.2,1)}
.col-zoom:hover {transform: scale(1.05)}
.col-half{width:50%;overflow:hidden}
.col-half h1{margin-bottom:.5rem}
.col-head{padding:0 0 0 1.5rem}
.col-head header {margin-bottom:.5rem}
.col-head .blist {margin-bottom:1.5rem}
.col-head .blist, .col-head .tlist{font-size:1rem;line-height:1.75em}
.col-head .button, .col-head .button-sold{text-align:center;padding:.5rem 0;border-radius:5px;margin-bottom:2rem;width:100%;font-size:1.125rem}
/* em converted to rem up to here */
/* Article formatting */
.art-main{float:left;width:780px;min-height:700px}
.art-full{width:100%;margin:0 auto 3rem}
.art-full .heading{margin-top:1.5rem}
.art-main h2,.art-full h2{font-size:1.5rem;margin:1rem auto 1rem;padding-top:.5rem}
.art-main h3,.art-full h3{font-size:1.25rem;font-weight:700;margin-bottom:.5rem}
.art-img{display:block;max-width:100%;margin:0 auto 1.75rem}
figure{margin:0}
figure img{display:block;max-width:100%;height:auto}
figcaption{font-size:.875rem;opacity:.9;margin:.5rem 0 0;display:block;text-align:left !important}
.art-sec{margin-bottom:3rem}
.art-fig{aspect-ratio:16/9;align-items:center;justify-content:center;margin-bottom:1.25rem;display:flex;flex-wrap:wrap}
.art-head-img{width:100%;height:auto;align-items:center;justify-content:center;margin-bottom:1.5rem;display:flex;flex-wrap:wrap;overflow:hidden}
.art-fig-sq{align-items:center;justify-content:center;margin-bottom:1.25rem;display:flex;flex-wrap:wrap}

.art-list-block{margin-bottom:3em}
.art-list-block h2{font-size:1.5em;line-height:1em;margin-bottom:.5em;font-weight:700;padding-top:0}

/* Taglist */
.taglist{margin:0 auto 1.5em}
.taglist li{display:inline}
.taglist a{border-radius:25px;color:#414141;display:inline-flex;padding:6px 12px;margin:0 0 .5em;white-space:nowrap;font-weight:600;border:1px solid #ddd}
.taglist a:hover{opacity:.7;transition:.1s}
.active-tag{background:white !important;border:1px solid #ddd}

/* Footer */
footer{border-top:1px solid #ddd;padding:3.25em 0 0}
footer > .container:first-child {min-height:300px}
.f-header{font-size:1em;font-weight:700;margin-bottom:1.25em}
.f-text{line-height:1.75rem;font-size:0.875rem}
.f-list{margin-bottom:2em}
.f-list li{line-height:1.75rem;font-size:.875rem;display:block;margin-bottom:.5rem}
.f-list li a:hover{text-decoration:underline}
small{font-size:.875em}
.footer-bottom{border-top:1px solid #ddd;padding:2em 0}

/* Hero formatting */
.hero{color:#fff;margin:-1.25rem auto 3rem;width:100%;height:600px;display:flex;justify-content:center;align-items:center;background:#f1f1f1;background-image:linear-gradient(rgba(0, 0, 0,0.3), rgba(0, 0, 0,0.5)), url('https://keybumps.com/img/hero.jpg');background-size:cover;background-position:center center;background-repeat:no-repeat}
.hero-inner{max-width:700px;padding:0 1.25em}
.hero h1{margin-bottom:.25em}
.hero p{margin:0 0 1.75em;font-weight:500}
.hero .button {font-size:1em}

/* Buttons */
.button{display:inline-block;padding:0 1.25rem;line-height:2.75rem;margin:0 auto 1em;background:#4067FC;color:#fff;font-size:1em;font-weight:600;border-radius:5px}
.button:hover,.compb:hover,.shop-buy:hover {background:#3454D2;transition:.1s}
.button2{display:inline-block;padding:.5rem 0.875rem;margin:0 .5em 1em auto;border:1px solid #ddd;font-size:.875rem;font-weight:700;border-radius:5px}
.button-sold{display:inline-block;padding:0 1.25rem;line-height:2.75rem;margin:0 auto 1em;font-size:1em;border-radius:5px;font-weight:700;background:#f1f1f1}

/* Text lists */
.tlist{margin-bottom:1.25em}
.tlist li{line-height:1.75em}
.blist{list-style:initial;padding:0 0 0 1.25em;line-height:1.75em;margin-bottom:1.25em}
.nlist{padding:0 1.5em;margin-bottom:1.5em}
.nlist li{line-height:1.75em;padding-left:.5em}
.lista li a{color:unset}
.lista li a:hover{text-decoration:underline;color:unset}

/* Sortable table */
.sortable-wrap{overflow-x:auto;max-width:100%}
.sortable{border-collapse:collapse;text-align:left;margin-bottom:3em;border-bottom:1px solid #ddd;font-size:.85em}
.sortable th{font-weight:700;line-height:1.25em;cursor:pointer}
.sortable td{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sortable tr,.sortable th{border-bottom:1px solid #ddd}
.sortable td,.sortable th{padding:.25em .5em .25em 0}
.sortable img{vertical-align:middle;margin-right:.5em;width:3.125rem;height:auto}
.sortdash{opacity:.4;font-weight:700}
.compb{background:#4067FC;color:#fff !important;padding:.5rem 1rem;margin:0 auto;border-radius:5px;float:right;font-size:1em}
.sortable .compb:hover{color:#fff}
.sortable a{font-weight:600}
.sortable a:hover{color:#0939FB}
#searchInput{background-image:url('https://keybumps.com/img/searchicon.png');background-position:0.875rem 0.875rem;background-size:1rem;background-repeat:no-repeat;width:100%;padding:0.75rem 1.25rem 0.75rem 2.5rem;border:1px solid #e1e1e1;margin:0 auto 1.25em;font-family:inherit;font-size:1em;border-radius:25px}

/* YouTube embed */
.vidcont{position:relative;margin:1.25em 0 2em;max-width:50%}
.vidcont iframe, .vidcont object, .vidcont embed{position:absolute;top:0;left:0;width:100%;height:100%}
.vidcont-previous{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:1.25em 0 2em;max-width:50%}

/* Affiliate Disclaimer */
.disc{margin:0 auto 1.25em;font-size:.875em;opacity:.9;line-height:1.5em}

/* Spec table */
.spec-table{border-collapse:collapse;margin-bottom:3em;text-align:left;width:max-content}
.spec-table th,.spec-table a{font-weight:700}
.spec-table th{font-weight:700;min-width:140px;padding-right:4rem}
.spec-table td,.spec-table th{padding-top:.75em;padding-bottom:.75em;border-bottom:1px solid #ddd}
.spec-table .blist {margin-bottom:0}

/* Price comparison table */
.shoptable{border-collapse:collapse;text-align:left;margin-bottom:3em;border-bottom:1px solid #ddd;overflow-x:scroll;font-size:1em}
.shoptable th{font-size:.875em;font-weight:700;padding:.5em 0}
.shoptable tr{border-bottom:1px solid #ddd}
.shoptable tr,.shoptable td{padding:.75em 0}
.shopimg{width:6rem;height:auto}
.shoptable img{vertical-align:middle;margin-right:.5em}
.shoptable a{color:#4067FC;font-weight:700}
.shop-price{font-size:1.125em}
.shop-price:hover{text-decoration:underline}
.shop-buy{background:#4067FC;color:#fff !important;padding:0.875rem 1rem;margin:0 auto;border-radius:5px;float:right;display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1;font-weight:600 !important}
.external-icon {width:1.125rem;height:1.125rem;display:block;flex-shrink:0;margin-top:-3px}

/* Breadcrumb list */
.bread{margin-bottom:1.25rem;height:1.25rem}
.bread li{display:inline;font-size:.875rem}
.bread li+li:before{margin:0 2.5px 0 1px;content:"\25B8";opacity:.5}

/* Quick navigation */
.quicknav{display:flex;justify-content:space-between;align-items:center;width:100%;font-weight:700;height:4em;border-top:1px solid #ddd;border-bottom:1px solid #ddd;margin-bottom:1.25em;padding:0 2em}
.quicknav a:hover, .disc a, .rlink:hover{text-decoration:underline}

/* Pill tag navigation */
.pill{margin:1.5em auto;font-size:1em}
.pill li{display:inline}
.pill a{margin:0 .25em .75em;white-space:nowrap;padding:.5em 1em;display:inline-flex;color:#212121;font-weight:600;border:1px solid #ddd;border-radius:25px}
.pill a:hover{background-color:#f1f1f1}

/* Cookie disclaimer pop-up */
.cookie-container {position:fixed;bottom:0;left:0;width:100%;background-color:#fff;padding:20px;text-align:center;display:none;border-top:1px solid #ddd;font-size:.875em}
#accept-cookies {background:#4067FC;color:white;padding:0.625rem 1.25rem;border:none;border-radius:5px;cursor:pointer}

/* MailerLite email subscription form */
#mlb2-14453227.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody, #mlb2-14453227.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {padding:20px 0 0 0 !important}
#mlb2-14453227.ml-form-embedContainer button {letter-spacing:.5px !important}

/* Misc */
.color-pan{width:18px;height:18px;border-radius:50%;float:left;margin-right:.5em;border: 2px solid rgba(255, 255, 255, .4)}

/* Pro/Con list */
.pro-con-h{font-size:1em;margin:0 0 .5em}
.pro-con-list{list-style:none;padding:0;line-height:1.75em;margin-bottom:1.25em}
.pro-list li::before {content: '+ ';color:#52CC7A;font-weight:700;margin-right:5px;font-size:1.25em;line-height:1.75em}
.con-list li::before {content: '- ';color:red;font-weight:700;margin-right:5px;font-size:1.25em;line-height:1.75em}
.pro-con-row {display: flex;gap: 1.5rem;margin-bottom:2rem}

.pro-con-col {flex: 1;display: flex;flex-direction: column;}

/* Letter list*/
.letterList {width:100%;text-align:center;margin-bottom:1.5em}
.letterList li {display:inline-block;font-size:1.25em;font-weight:700;padding:0 .625em;opacity:.5;margin-bottom:8px}
.letterList li:hover {opacity:1}

/* Misc formatting */
.underline {text-decoration:underline}

/* Inline list*/
.inline-list{margin:1em auto .5em}
.inline-list li{display:inline;margin-right:1em;white-space:nowrap;line-height:2em}

/* Where to Buy links */
.store-row {display: flex;gap: 1.5rem;margin-bottom:2rem}
.store-col {flex: 1;display: flex;flex-direction: column;align-items: center;text-align: center}
.store-col p{font-size:.875em}
.logo-wrap {width: 80px;height: 80px;display: flex;align-items: center;justify-content: center;margin-bottom: 0.75rem}
.logo-wrap img {max-width: 100%;max-height: 100%;object-fit: contain;display: block}
.store-button {display: inline-block;padding: 0.5rem 1rem;border-radius: 5px;background: #4067FC;color: #fff;text-decoration: none;font-weight:700;font-size: 0.9rem}
.store-button:hover {background:#3454D2;transition:.1s}
.store-note {font-size: 0.95em;line-height: 1.4;margin-bottom: 1rem}
.store-note span {display: block}

/* OOP Tag */
.status-oop{
display:inline-block;
font-size:.75rem;
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase;
padding:.35em .6em;
border-radius:.35rem;
background:#b30000;
color:#fff;
margin-bottom:1rem;
}

.spec-table,
.sortable,
.shop-table{
font-variant-numeric: tabular-nums;
}

@media screen and (max-width:1280px){
html{font-size:90%}
.container{width:100%}
.feed,.art-main{width:65%}
.sidebar{width:33%}
}

@media screen and (max-width:1020px){
html{font-size:85%}
.feed, .art-main{width:100%;float:none;display:inline-block}
.sidebar{width:100%;float:none}
.hero{height:320px}
.sortable tr,.sortable td,.sortable th{padding:.25rem .5rem .25rem 0}
.col-half{width:100%}
.col-head{padding:1rem 0 0}
.quicknav{font-size:.875em}
.col-head .button{width:100%}
}

@media screen and (max-width:768px){
html{font-size:80%}
.navbox{width:100%;display:block}
.navbox a,.dropdown .dropbtn{display:none}
.ham{float:right;display:block;line-height:4.25rem;font-size:1.5em;font-weight:700}
.col{width: calc(50% - 1.25rem)}
.col:nth-of-type(2n+0){margin-right:0}
.col6{width: calc(33% - 1rem)}
.col6:nth-of-type(3n+0){margin-right:0}
.compt{width:3em;height:3em}
.sortable{font-size:0.719rem}
.sortable img{width:2rem}
.compb{padding:.5rem .75rem}
.logo-wrap {width:96px;height:96px}
}

@media screen and (max-width:650px){
.col3{width:100%;margin-right:0}
}

@media screen and (max-width:420px){
.feed-a img{display:block;float:none;margin:0 auto}
.col{width:100%;margin-right:0}
}