: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;
}
}