@charset "UTF-8";

.wpj-jtoc .wpj-jtoc--toggle-box{transition:transform .25s;font-size:16px;overflow:hidden;background-color:var(--jtoc-toggle-bg-color,transparent)}.wpj-jtoc .wpj-jtoc--toggle{position:relative;width:2em!important;height:2em!important}.wpj-jtoc .wpj-jtoc--toggle:after,.wpj-jtoc .wpj-jtoc--toggle:before{color:var(--jtoc-toggle-color,var(--jtoc-title-color,currentColor));background-color:var(--jtoc-toggle-color,var(--jtoc-title-color,currentColor))}.wpj-jtoc.--jtoc-toggle-1 .wpj-jtoc--toggle{width:1em}.wpj-jtoc.--jtoc-toggle-1 .wpj-jtoc--toggle:after,.wpj-jtoc.--jtoc-toggle-1 .wpj-jtoc--toggle:before{content:"";display:block;position:absolute;height:2px;width:.625em;top:calc(50% - .6666666667px);transition:transform .25s cubic-bezier(.4,0,1,1)}.wpj-jtoc.--jtoc-toggle-1 .wpj-jtoc--toggle:before{right:calc(1em - .625em * .1464466094 - .7071067812px + .0109375em);transform:rotate(45deg)}.wpj-jtoc.--jtoc-toggle-1 .wpj-jtoc--toggle:after{left:calc(1em - .625em * .1464466094 - .7071067812px + .0109375em);transform:rotate(-45deg)}.wpj-jtoc.--jtoc-toggle-1.--jtoc-is-unfolded .wpj-jtoc--toggle:before{transform:rotate(-45deg)}.wpj-jtoc.--jtoc-toggle-1.--jtoc-is-unfolded .wpj-jtoc--toggle:after{transform:rotate(45deg)}.wpj-jtoc.--jtoc-toggle-2 .wpj-jtoc--toggle{width:1em;height:1em}.wpj-jtoc.--jtoc-toggle-2 .wpj-jtoc--toggle:after,.wpj-jtoc.--jtoc-toggle-2 .wpj-jtoc--toggle:before{content:"";display:block;position:absolute;height:2px;width:1em;right:calc(50% - .5em);top:calc(50% - 1px);transition:transform .25s cubic-bezier(.4,0,1,1)}.wpj-jtoc.--jtoc-toggle-2 .wpj-jtoc--toggle:before{transform:rotate(90deg)}.wpj-jtoc.--jtoc-toggle-2.--jtoc-is-unfolded .wpj-jtoc--toggle:before{transform:rotate(180deg)}.wpj-jtoc.--jtoc-toggle-3 .wpj-jtoc--toggle:after{content:"❯";display:block;width:2em;height:2em;transition:transform .25s;background:none;display:flex;align-items:center;justify-content:center;position:absolute}.wpj-jtoc.--jtoc-toggle-3.--jtoc-is-unfolded .wpj-jtoc--toggle:after{transform:rotate(90deg)}:root{--jtoc-z-index:999}.wpj-jtoc::-webkit-scrollbar,.wpj-jtoc ::-webkit-scrollbar{width:4px;background-color:rgba(0,0,0,.0588235294)}.wpj-jtoc::-webkit-scrollbar-thumb,.wpj-jtoc ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1607843137)}.wpj-jtoc{margin-top:var(--jtoc-toc-root-margin-top,1.5rem);margin-bottom:var(--jtoc-toc-root-margin-bottom,2rem)}.wpj-jtoc.--jtoc-main-is-hidden{margin:0;padding:0}.wpj-jtoc.--jtoc-is-folded:not(.--jtoc-animate) .wpj-jtoc--body,.wpj-jtoc.--jtoc-is-folded:not(.--jtoc-animate) .wpj-jtoc--footer,.wpj-jtoc .--jtoc-is-hidden{display:none!important}.wpj-jtoc.wpj-jtoc--main.--jtoc-align-center{display:grid;justify-items:center}.wpj-jtoc.wpj-jtoc--main.--jtoc-align-right{display:grid;justify-items:end}.wpj-jtoc.wpj-jtoc--main.--jtoc-align-left{display:grid;justify-items:start}div:not(.wpj-jtoc--widget-floating)>.wpj-jtoc--toc{width:var(--jtoc-width,auto)}.wpj-jtoc--toc{margin:var(--jtoc-toc-margin,0);padding:var(--jtoc-toc-padding,0);overflow:hidden;display:var(--jtoc-display,inline-block);min-width:var(--jtoc-min-width);max-width:var(--jtoc-max-width,100%);z-index:var(--jtoc-z-index);background-color:var(--jtoc-background-color,transparent);font-size:var(--jtoc-font-size);border-radius:var(--jtoc-toc-border-radius);border:var(--jtoc-toc-border);border-color:var(--jtoc-toc-border-color);box-shadow:var(--jtoc-toc-box-shadow);box-sizing:border-box}.wpj-jtoc--header{height:var(--jtoc-header-height,initial);margin:var(--jtoc-header-margin);padding:var(--jtoc-header-padding);background-color:var(--jtoc-header-background-color);border:var(--jtoc-header-border);border-radius:var(--jtoc-header-border-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:var(--jtoc-header-cursor,initial);color:var(--jtoc-header-color,inherit)}.wpj-jtoc--header-main{display:flex;justify-content:space-between;align-items:center;height:100%}.wpj-jtoc--header-main .wpj-jtoc--title{color:var(--jtoc-title-wrap-color,var(--jtoc-title-color));flex:1;display:flex;align-items:center}.wpj-jtoc--header-main .wpj-jtoc--title.--has-icon{column-gap:.5em;--jtoc-title-icon-size:20px}.wpj-jtoc--header-main .wpj-jtoc--title.--has-icon svg{width:var(--jtoc-title-icon-size);height:var(--jtoc-title-icon-size)}.wpj-jtoc--header-main .wpj-jtoc--title.--has-icon img{height:var(--jtoc-title-icon-size);width:auto}.wpj-jtoc--header-main .wpj-jtoc--title .title-icon{display:flex;align-items:center}span.wpj-jtoc--title-label{color:var(--jtoc-title-color,inherit);font-size:var(--jtoc-title-font-size,inherit);font-weight:var(--jtoc-title-label-font-weight,inherit);font-style:var(--jtoc-title-label-font-style)}.wpj-jtoc--toggle-wrap{left:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;cursor:pointer;height:100%}.wpj-jtoc--toggle-text{margin:0 10px;font-size:90%;color:var(--jtoc-toggle-color,gray)}.wpj-jtoc--toggle-text .--jtoc-bracket{color:initial;margin:0 3px}.wpj-jtoc--toggle-icon{margin:0 16px;color:var(--jtoc-toggle-color,gray)}.wpj-jtoc--body{margin:var(--jtoc-body-margin,0);padding:var(--jtoc-body-padding,0);max-width:var(--jtoc-max-width,100%);background-color:var(--jtoc-body-background-color)}.wpj-jtoc--body::-webkit-scrollbar{width:4px;background-color:rgba(0,0,0,.0588235294)}.wpj-jtoc--body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1607843137)}.wpj-jtoc--body .wpj-jtoc--nav{display:block;position:relative;max-width:var(--jtoc-max-width,100%)}.wpj-jtoc--nav>.wpj-jtoc--items li{margin:0;padding:0;line-height:normal;background-color:var(--jtoc-headings-group-background-color,inherit)}.wpj-jtoc--toc ol.wpj-jtoc--items,.wpj-jtoc--toc ul.wpj-jtoc--items{list-style-type:none;margin:0;padding:0;counter-reset:a!important}.wpj-jtoc--toc ol.wpj-jtoc--items .wpj-jtoc--items,.wpj-jtoc--toc ul.wpj-jtoc--items .wpj-jtoc--items{margin-left:var(--jtoc-hierarchy-offset,16px)}.wpj-jtoc--item .wpj-jtoc--item-content{display:flex;align-items:flex-start;min-width:0;margin:var(--jtoc-headings-margin,0);padding:var(--jtoc-headings-padding,0);line-height:var(--jtoc-headings-line-height,1.2em);font-size:var(--jtoc-link-font-size,.9em);border-radius:var(--jtoc-headings-border-radius);color:var(--jtoc-headings-color,var(--jtoc-palette-color-2));background-color:var(--jtoc-headings-background-color)}.jtoc--num{--jtoc_num_color_base:var(--jtoc-numeration-color,color-mix(in srgb,var(--jtoc-background-color,transparent) 50%,#000 50%));color:var(--jtoc_num_color_base);min-width:-moz-max-content;min-width:max-content;margin-right:.5em;font-variant-numeric:tabular-nums}.jtoc--num:before{content:counters(a,".",var(--jtoc-numeration-type,decimal)) var(--jtoc-numeration-suffix,"");counter-increment:a;min-width:.75em;display:inline-block}.wpj-jtoc--item .wpj-jtoc--item-content:hover{color:var(--jtoc-headings-color-hover,var(--jtoc-palette-color-3))!important;background-color:var(--jtoc-headings-background-color-hover)!important}.wpj-jtoc--item .wpj-jtoc--item-content:hover>a{color:var(--jtoc-link-color-hover)!important;background-color:var(--jtoc-link-background-color-hover)!important}.wpj-jtoc--item .wpj-jtoc--item-content:hover .jtoc--num{--jtoc_num_color_hover:var(--jtoc-numeration-color-hover,var(--jtoc_num_color_base));color:var(--jtoc_num_color_hover)!important}.wpj-jtoc--item .wpj-jtoc--item-content>a{display:inline-flex;position:relative;margin:var(--jtoc-link-margin,0);padding:var(--jtoc-link-padding,0);transition:none!important;text-overflow:inherit;outline:none!important;font-weight:var(--jtoc-link-font-weight)}.wpj-jtoc--item .wpj-jtoc--item-content>a,.wpj-jtoc--item .wpj-jtoc--item-content>a:visited{color:var(--jtoc-link-color,var(--jtoc-headings-color,var(--jtoc-palette-color-2)));background-color:var(--jtoc-link-background-color)}.wpj-jtoc--item .wpj-jtoc--item-content>a:focus,.wpj-jtoc--item .wpj-jtoc--item-content>a:focus-within{background-color:initial!important}.wpj-jtoc--item .wpj-jtoc--item-content>a:hover{color:var(--jtoc-link-color-hover,var(--jtoc-headings-color-hover,var(--jtoc-palette-color-3)));background-color:var(--jtoc-link-background-color-hover)}.--jtoc-is-active>.wpj-jtoc--item-content{color:var(--jtoc-headings-color-active,var(--jtoc-palette-color-4));background-color:var(--jtoc-headings-background-color-active)}.--jtoc-is-active>.wpj-jtoc--item-content .jtoc--num{color:var(--jtoc-numeration-color-active,var(--jtoc-link-color-active,var(--jtoc-headings-color-active,var(--jtoc-palette-color-4))))!important}.--jtoc-is-active>.wpj-jtoc--item-content>a{color:var(--jtoc-link-color-active)!important;background-color:var(--jtoc-link-background-color-active)!important}.--jtoc-warning{color:#856404;border:1px solid #ffeeba;background-color:#fff3cd;font-style:italic;padding:10px 14px;margin-bottom:16px}.--jtoc-partial-fold .jtoc-view-more{display:flex}.--jtoc-partial-fold .wpj-jtoc--toc{position:relative}.wpj-jtoc.--dark .jtoc--num{--jtoc_num_color_base:var(--jtoc-numeration-color,color-mix(in srgb,var(--jtoc-background-color,transparent) 50%,#fff 50%))}.--dev .wpj-jtoc--header{pointer-events:none}.--dev .wpj-jtoc--toggle{pointer-events:all}.--dev .wpj-jtoc--item-content.hover{color:var(--jtoc-headings-color-hover,var(--jtoc-palette-color-3))!important;background-color:var(--jtoc-headings-background-color-hover)!important}.--dev .wpj-jtoc--item-content.hover>a{color:var(--jtoc-link-color-hover)!important;background-color:var(--jtoc-link-background-color-hover)!important}.--dev .wpj-jtoc--item-content.hover .jtoc--num{--jtoc_num_color_hover:var(--jtoc-numeration-color-hover,var(--jtoc_num_color_base));color:var(--jtoc_num_color_hover)!important}.wpj-jtoc.--jtoc-theme-basic-light{--jtoc-header-color:#333;--jtoc-header-height:50px;--jtoc-background-color:#f8f8f8;--jtoc-body-padding:16px 18px 16px 18px;--jtoc-hierarchy-offset:20px;--jtoc-title-font-size:1em;--jtoc-title-label-font-weight:600;--jtoc-headings-padding:2px 0;--jtoc-link-color:#3175e4;--jtoc-link-color-hover:#3175e4;--jtoc-link-color-active:#333;--jtoc-link-font-size:90%}.wpj-jtoc.--jtoc-theme-basic-light .wpj-jtoc--header{position:relative}.wpj-jtoc.--jtoc-theme-basic-light .wpj-jtoc--header .wpj-jtoc--header-main .wpj-jtoc--title{margin:0 18px;max-width:100%}.wpj-jtoc.--jtoc-theme-basic-light .wpj-jtoc--header .wpj-jtoc--header-main .wpj-jtoc--title span.wpj-jtoc--title-label{display:block;width:100%}.wpj-jtoc.--jtoc-theme-basic-light .wpj-jtoc--header+.wpj-jtoc--body{margin-top:-16px}.wpj-jtoc.--jtoc-theme-basic-light .wpj-jtoc--items li{display:block}.wpj-jtoc.--jtoc-theme-basic-light .wpj-jtoc--items li.--jtoc-is-active>.wpj-jtoc--item-content>a{font-weight:700}.wpj-jtoc.--jtoc-theme-basic-light .wpj-jtoc--items li a{vertical-align:top;max-width:100%;text-decoration:none!important}.wpj-jtoc.--jtoc-theme-basic-light .wpj-jtoc--items li a:hover{-webkit-text-decoration:underline 1px dotted!important;text-decoration:underline 1px dotted!important}:root {
--green: #57cc99;
--dark-grey: #333;
--purple: #5e57cc;
--site-width: 1000px;
}
body {
color: var(--dark-grey);
font-family: Arial, Verdana, Tahoma, Gergoa;
font-size: 1rem;
margin: 0;
}
header {
display: flex;
justify-content: center;
margin: 2rem 0;
width: 100%;
}
header img {
display: block;
height: auto;
margin: 0 auto;
max-width: 90%;
}
a {
color: var(--purple);
text-decoration: none;
}
a:hover {
text-decoration: underline;+
}
ol {
margin: 0;
padding: 0;
}
ol li:not(.wpj-jtoc--item) {
list-style-type: none;
counter-increment: item;
margin-bottom: 2.5rem;
}
ol li:not(.wpj-jtoc--item):before {
content: counter(item);
margin-right: 1rem;
font-size: 100%;
background-color: #57cc99;
color: #FFF;
font-weight: bold;
padding: .5rem .8rem;
border-radius: 3px;
}
.boxShading {
box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
}
.stFlx {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.nwFlx {
display: flex;
flex-wrap: nowrap;
}
.stLayout {
margin: 0 auto;
max-width: var(--max-width);
padding: 1rem 0;
width: 100%;
}
.stFlx--centre {
justify-content: center;
}
.stFlx--right {
justify-content: flex-end;
}
.btn {
background-color: var(--green);
border: 0;
border-radius: .3rem;
color: #FFF;
cursor: pointer;
display: inline-block;
padding: 1rem 1.5rem;
transition: transform .2s ease-in;
}
.btn:hover {
background-color: var(--purple);
text-decoration: none;
transform: translateY(5px);
}
.post {
font-size: 1.6rem;
line-height: 1.6;
margin: 0 auto;
max-width: var(--site-width);
width: 90%;
}
.article__categories {
display: flex;
justify-content: center;
}
.post h1 {
font-size: 2rem;
text-align: center;
}
.article__content img {
display: block;
height: auto;
margin: 1rem auto;
width: 600px;
max-width: 100%;
}
.article__byline {
display: flex;
flex-wrap: wrap;
font-size: 1rem;
justify-content: center;
margin-bottom: 1rem;
}
.article__byline strong {
flex-basis: 100%;
text-align: center;
}
.article__author {
align-items: center;
display: flex;
margin-top: .8rem;
}
.article__author img {
border-radius: 100%;
margin-right: .5rem;
}
.recommendation {
border: 1px solid var(--dark-grey);
border-radius: .3rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 2rem 0;
padding: 2rem;
position: relative;
}
.recommendation__top-pick {
background-color: var(--purple);
color: #FFF;
font-size: .8rem;
padding: .3rem .6rem;
position: absolute;
top: -10px;
left: -10px;
z-index: 2;
}
.recommendation__content {
align-items: flex-start;
align-content: center;
display: flex;
flex-basis: 100%;
flex-wrap: wrap;
justify-content: center;
order: 1;
}
.recommendation__content__title {
flex-basis: 100%;
font-size: 1.6rem;
line-height: 1.6;
margin-bottom: 1.5rem;
text-align: center;
}
.recommendation__content__title:hover {
text-decoration: none;
}
.recommendation__image {
flex-basis: 100%;
max-width: 300px;
}
.recommendation__content__button {
padding: .5rem .8rem;
}
.recommendation__content__notice {
font-size: .9rem;
font-style: italic;
line-height: 1.6;
margin-top: 1.5rem;
}
.copyright {
color: #666;
font-size: 1.2rem;
line-height: 1.2;
margin: 2rem auto;
max-width: var(--site-width);
}
.articleList {
padding: 2rem 0;
}
.articleList h2 {
margin: 0 0 4rem 0;
text-align: center;
width: 100%;
}
.articleList__items {
justify-content: space-between;
padding: 0 1rem;
margin-bottom: 2rem;
}
.articleList__item {
color: var(--light-grey);
font-size: 1rem;
line-height: 1.6;
margin-bottom: 4rem;
position: relative;
text-decoration: none;
width: 100%;
}
.articleList__item--single {
width: 100%; 
}
.articleList__item:hover {
text-decoration: none;
}
.articleList__item img {
height: auto;
width: 100%;
}
.articleList__item-date {
color: var(--light-red);
display: block;
font-size: .9rem;
margin-top: 1rem;
text-transform: uppercase;
}
.articleList__item-heading {
text-align: left;
}
.articleList__item-content {
display: flex;
flex-wrap: wrap;
align-items: stretch;
margin-bottom: 1rem;
}
.articleList__item--primary-tag {
background-color: var(--green);
font-size: .8rem;
padding: 0 .6rem;
position: absolute;
top: -.6rem;
left: -.3rem;
z-index: 2;
}
.articleList__item h3 {
font-size: 1.4rem;
}
.articleList__item .btn {
font-size: 1rem;
padding: .5rem .8rem;
}
.wpj-jtoc--toc {
width: auto !important;
}
.wpj-jtoc--title-label {
font-size: 1.6rem !important;
}
.comparison {
max-width: 800px;
width: 100%;
}
.comparison .checked {
color: orange;
}
.comparison__products {
display: flex;
margin: 1rem;
padding: 1rem 0;
text-align: center;
}
.col-2 {
flex-basis: 33%;
}
.col-3 {
flex-basis: 33%;
}
.col-4 {
flex-basis: 25%;
}
.col-5 {
flex-basis: 20%;
}
.comparison__product {
border-right: 1px solid #EEE;
min-width: 180px;
padding: 0 1rem;
}
.comparison__product:last-of-type {
border-right: 0;
}
.comparison__product div {
padding: .5rem 0;
}
.comparison__product-img img {
height: auto;
width: 100%;
}
.comparison__product-points {
text-align: left;
}
.comparison__product-points li {
margin: 1rem 0;
}
@media (min-width: 500px) {
.post h1 {
font-size: 3rem;
}
.post h2 {
font-size: 2.4rem;
}
.post h3 {
font-size: 1.8rem;
}
.article__byline {
margin-bottom: 3rem;
}
.article__content img {
margin: 3rem auto;
}
.recommendation__content {
flex-basis: calc(100% - 350px);
order: 0;
}
.recommendation__content__title {
font-size: 2.4rem;
font-weight: bold;
}
.articleList__items {
padding: 0;
}
.articleList__item {
width: calc((100% / 2) - 2rem);
}
.articleList__item--single {
width: 100%; 
}
.article__content {
margin-top: 4rem;
}
.article__content h2 {
font-size: 2rem;
}
.article__content h3 {
font-size: 1.6rem;
}
.article__content .articleList__items .articleList__item--single img {
margin: 0 auto;
}
.articleList__item--single .articleList__item--primary-tag {
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
width: 70px;
}
.article blockquote {
font-size: 1.6rem;
letter-spacing: 2px;
line-height: 1.6;
margin: 4rem;
}
.wpj-jtoc--toc {
width: 100% !important;
}
.wpj-jtoc--title-label {
font-size: 2.4rem !important;
}
}