/* ################################################################# FEELING ################################################################# */

/* ----- Fonts ----- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {--font1: "Roboto", sans-serif;} /* Instead of 'Abril Display' */

:root {--fontsize-mini: 11px;}
:root {--fontsize-small: 12px;}
:root {--fontsize-body: 14px;}
:root {--fontsize-large: 16px;}
:root {--fontsize-larger: 18px;}
:root {--fontsize-very-large: 22px;}
:root {--fontsize-largest: 32px;}
:root {--fontsize-header3: 1.875rem;}
:root {--fontsize-header2: 2.2rem;}
:root {--fontsize-header1: 3rem;}

/* ----- Colors ----- */
:root {--color-white: #fff;}
:root {--color-black: #000;}
:root {--color-font: #080808;}
:root {--color-footer-line: #2b2b2b;}
:root {--color-grey: #f0f0f0;}
:root {--color-grey-darkish: #5a5a5a;}
:root {--color-grey-dark: #757575;}
:root {--color-grey-darker: #898989;}
:root {--color-pink: #ed52cb;}
:root {--color-blue: #146ef5;}
:root {--color-blue-rgb: 12, 100, 231;}
:root {--color-blue-darker: #0055d4;}
:root {--color-box-shadow: #75757533;}

/* ----- Icons ----- */
.menu-icon .icon {background-image: url(/files/icon/menu_a.svg);}
/*#menu .search .icon {background-image: url(/files/icon/search_c.svg);}*/
.search .icon {background-image: url(/files/icon/search_b.svg);}
.social .items .x .icon {background-image: url(/files/icon/new_x_b.svg);}
.social .items .facebook .icon {background-image: url(/files/icon/facebook_2.svg);}
.social .items .tiktok .icon {background-image: url(/files/icon/tiktok_38.svg);}
.social .items .rss {display: none;}
.social .items .linkedin .icon {background-image: url(/files/icon/linkedin_2.svg);}
.social .items .youtube .icon {background-image: url(/files/icon/youtube_2.svg);}
.social .items .pinterest {display: none;}
.social .items .mail {display: none;}
.social .items .instagram .icon {background-image: url(/files/icon/instagram_2.svg);}
.social .icon {
   height: 32px;
   width: 32px;
}

/* ----- Border Radius ----- */
:root {--border-radius-small: 10px;}
:root {--border-radius-mini: 5px;}

/* ----- Gap ----- */
:root {--gap: 30px;}
:root {--gap80: 80px;}
:root {--gap60: 60px;}
:root {--gap50: 50px;}
:root {--gap40: 40px;}
:root {--gap35: 35px;}
:root {--gap25: 25px;}
:root {--gap20: 20px;}
:root {--gap15: 15px;}
:root {--gap10: 10px;}
:root {--gap5: 5px;}

/* ----- Site Width ----- */
:root {--width-site-default: 1080px;}
:root {--width-site: calc(var(--width-site-default) - (100vw - 100%));}
:root {--width-site2: 800px;}

/* Links */
a {
   color: var(--color-blue);
}

.article {
   margin: 0;
}

.image.col img, 
.single-header .featured-image img, 
.article img, 
.site-categories-images img, 
.freebie img,
.logo img {
   display: block;
}

input {
   font-family: var(--font2);
}

/* ################################################################# VARIOUS ################################################################# */
* {
    box-sizing: border-box;
}
body {
   font-family: var(--font1);
   font-size: var(--fontsize-body);
   line-height: 1;
   text-rendering: optimizeSpeed;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
strong, b {
   font-weight: 600;
}
h2 {
   font-size: var(--fontsize-header2);
   font-weight: 600;
   line-height: 1.4;
   margin-bottom: var(--gap10);
}
h3 {
   font-size: var(--fontsize-header3);
   font-weight: 500;
   line-height: 1.4;
   margin-bottom: var(--gap10);
}

.page .mobile .logo {
   width: auto;
}
header .logo a,
.page .mobile .logo a,
footer .logo a {
   text-decoration: none;
   color: black;
   font-family: var(--font2);
}
footer .logo a {
   color: white;
}
header .logo span,
.page .mobile .logo span,
footer .logo span {
   display: block;
   font-size: 1.5em;
   font-weight: 700;
   text-align: center;
   letter-spacing: -0.02em;
}

.header-normal-1 .site-categories .items,
.header-up-1 .inner,
.index .section:not(.section11) > .inner,
.link-block,
.directory .content,
.lead .content,
.page .content,
.single-footer,
.archive .content .section4,
footer .desktop .inner {
   width: 100%;
   max-width: var(--width-site);
   margin-right: auto;
   margin-left: auto;
   padding: 0 var(--gap15);
}
.single-body,
.page .content {
   width: 100%;
   max-width: var(--width-site2);
   margin-right: auto;
   margin-left: auto;
   padding: 0 var(--gap15);
   font-size: var(--fontsize-larger);
    line-height: 1.82222;
}

#header-sticky {
   background-color: var(--color-white);
   border-bottom: 1px solid var(--color-grey);
}
.header-sticky-1 .inner {
   display: flex;
   flex-wrap: wrap;
   padding: 0 var(--gap15);
}
.header-sticky-1 .join {
   order: 1;
   border-bottom: 1px solid var(--color-grey);
   width: 100%;
   padding: var(--gap10) 0;
   display: flex;
   align-items: center;
   color: var(--color-footer-line);
   font-weight: 500;
   font-size: var(--fontsize-body);
   gap: var(--gap20);
   margin-left: auto;
}
.header-sticky-1 .join .newsletter,
.header-sticky-1 .site-categories .element-title {
   display: none;
}
.header-sticky-1 .join .signin {
   margin-left: auto;
}
.header-sticky-1 .join .subscribe {
   border-radius: var(--border-radius-mini);
   background-color: var(--color-blue);
   color: var(--color-white);
   font-weight: 500;
   padding: var(--gap10) var(--gap15);
   margin-right: calc((100vw - var(--width-site-default)) / 2);
}
.header-sticky-1 .logo {
   order: 2;
   display: flex;
   align-items: center;
   margin-right: var(--gap);
   margin-left: calc((100vw - var(--width-site-default)) / 2);
}
.header-sticky-1 .site-categories {
   order: 3;
   display: flex;
   align-items: center;
}
.header-sticky-1 .site-categories a .title {
   padding: var(--gap25) var(--gap15);
   color: var(--color-footer-line);
   font-weight: 500;
}

.heading {
   color: black;
   font-size: var(--fontsize-very-large);
   font-weight: 500;
   margin-top: var(--gap40);
   display: flex;
   align-items: center;
   gap: var(--gap10);
}
.heading:after {
   background-color: black;
   content: "";
   flex-grow: 1;
   height: 2px;
}

.section5 {
   background-color: var(--color-grey);
   margin-top: var(--gap40);
   padding-bottom: var(--gap40);
}
.section5 .heading,
.site-categories-images .element-title,
.email .title {
   font-size: var(--fontsize-largest);
   font-weight: 600;
   justify-content: center;
   margin-bottom: var(--gap10);
   margin-top: var(--gap60);
}
.section5 .heading:after {
   content: none;
}

.grid {
   margin: 0;
   padding: var(--gap) 0;
}

.grid30 .article:nth-child(1) {
   grid-column: 1 / span 7;
   background-color: var(--color-blue);
}
.grid30 .article:nth-child(1) .text {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   padding: var(--gap25);
}
.grid30 .article:nth-child(1) .image {
   height: 280px;
}
.grid30 .article:nth-child(1) .sub,
.grid30 .article .name,
.grid30 .article .date,
.grid13 .sub,
.grid13 .name,
.grid13 .date,
.grid28 .sub,
.grid28 .name,
.grid28 .date,
.grid7 .date,
.grid2 .sub,
.grid2 .name,
.grid2 .date {
   display: block;
   font-size: var(--fontsize-small);
   width: fit-content;
}
.grid30 .article .title {
   font-size: var(--fontsize-header2);
   font-weight: 600;
   line-height: 1.4;
   width: 100%;
   color: black;
}
.grid30 .article:first-child .title {
   color: white;
}
.grid30 .article:nth-child(1) .sub,
.grid13 .sub,
.grid28 .sub,
.grid2 .sub {
   color: black;
   line-height: 1.5;
   width: 100%;
   margin: var(--gap20) 0 var(--gap25);
}
.grid30 .article:first-child .sub {
   color: white;
}
.grid30 .article:nth-child(1) .name {
   order: 3;
   color: white;
}
.grid30 .article:nth-child(1) .date {
   order: 4;
   color: white;
   margin-left: auto;
}
.grid30 .article:not(:first-child) {
   grid-column: 8 / span 5;
   border-bottom: 2px solid black;
}
.grid30 .article:not(:first-child):last-child {
   border: 0;
}
.grid30 .article:not(:first-child) .image {
   display: none;
}
.grid30 .article:not(:first-child) .text {
   gap: var(--gap15);
   flex-direction: row;
   flex-wrap: wrap;
}
.grid30 .article:not(:first-child) .title {
   font-size: var(--fontsize-very-large);
}
.grid30 .article:not(:first-child) .name,
.grid28 .name {
   margin-left: auto;
}

.grid13 .image {
   height: 160px;
   margin-bottom: var(--gap10);
}
.grid13 .title,
.grid28 .title,
.grid2 .title {
   font-weight: 500;
   font-size: var(--fontsize-very-large);
   color: black;
   line-height: 1.4;
}
.grid13 .sub,
.grid28 .sub,
.grid2 .sub {
   margin: var(--gap10) 0;
}
.grid13 .name {
   order: 3;
   margin-bottom: var(--gap10);
}
.grid13 .date,
.grid2 .date {
   order: 4;
}

.grid28 .article.text {
   border-bottom: 2px solid black;
}
.grid28 a .text,
.grid2 a .text {
   flex-direction: row;
   flex-wrap: wrap;
}
.grid28 .sub {
   margin-bottom: var(--gap15);
}

.grid7 {
   grid-template-rows: 1fr;
}
.grid7 .griditem.article {
   grid-row: 1 / span 1;
   display: flex;
   align-items: stretch;
   border-bottom: 2px solid black;
   padding-bottom: var(--gap5);
}
.grid7 .griditem.article a {
   display: flex;
   flex-direction: column;
}
.grid7 .image {
   height: 185px;
   margin-bottom: var(--gap20);
}
.grid7 .text {
   flex-wrap: wrap;
   flex-direction: row;
   flex-grow: 1;
}
.grid7 .title {
   font-weight: 500;
   line-height: 1.7;
   width: 100%;
   margin-bottom: var(--gap15);
}
.grid7 .minutes,
.grid7 .date {
   display: block;
   order: 3;
   display: flex;
   align-items: flex-end;
}
.grid7 .minutes {
   order: 2;
   font-size: var(--fontsize-body);
}
.grid7 .date,
.grid2 .date {
   margin-left: auto;
}

.grid2 {
   grid-template-rows: 1fr;
   
}
.grid2 .griditem.article {
   grid-row: 1 / span 1;
}
.grid2 a {
   display: flex;
   gap: var(--gap10);
}
.grid2 .article .image {
   width: 150px;
   flex: 1 1 150px;
}
.grid2 .article .text {
   flex: 1 1 fit-content;
   border-bottom: 2px solid black;
   padding-bottom: var(--gap5);
}


.freebie {
   background-color: var(--color-grey);
   padding: var(--gap25);
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
}
.freebie .description {
   line-height: 1.4;
   font-weight: 300;
   margin: var(--gap20) 0 var(--gap);
}
.freebie .title {
   color: black;
   font-size: var(--fontsize-very-large);
   line-height: 1.4;
}
.freebie .text {
   display: flex;
   flex-direction: column;
}
.freebie .cta {
   background-color: var(--color-blue);
   color: var(--color-white);
   padding: var(--gap20) var(--gap25);
   border-radius: var(--border-radius-mini);
   font-weight: 500;
}

.section11 {
   background-color: var(--color-blue);
}
.link-block {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
   column-gap: var(--gap20);
   margin: var(--gap40) auto;
}
.link-block > div {
   flex: 1 1 46%;
   display: flex;
   align-items: center;
   gap: var(--gap5);
   font-weight: 500;
   border-bottom: 2px solid white;
   padding: var(--gap5) 0;
   line-height: 1.2;
   position: relative;
   padding-left: var(--gap25);
   color: white;
}
.link-block > div:before {
   content: "\21B3";
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   color: white;
}
.link-block a {
   height: 50px;
   display: flex;
   align-items: center;
   color: white;
}

.site-categories-images .element-title {
   color: black;
   display: flex;
   align-items: center;
   gap: var(--gap10);
}
.site-categories-images .items {
   margin: var(--gap) 0;
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap20);
}
.site-categories-images .cat {
   flex: 1 1 calc((100% - var(--gap20) * 3) / 4);
   width: calc((100% - var(--gap20) * 3) / 4);
   background-color: var(--color-grey);
   color: var(--color-blue);
}
.site-categories-images .cat a {
   display: flex;
   flex-direction: column;
}
.site-categories-images .cat .image {
   height: 150px;
}
.site-categories-images .cat .title {
   font-size: var(--fontsize-body);
   font-weight: 500;
   padding: var(--gap10) 0;
   text-align: center;
   position: relative;
   display: flex;
   align-items: center;
   margin: 0 auto;
}
.site-categories-images .cat .title span {
   text-decoration: underline;
}

.section13 {
   background-color: var(--color-grey);
   padding: var(--gap40) 0;
}
.email {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
}
.email .title {
   margin-top: 0px;
   display: flex;
   align-items: center;
   gap: var(--gap10);
}
.email .description {
   font-size: var(--fontsize-large);
   font-weight: 300;
   width: 100%;
   margin-bottom: var(--gap20);
}
.email .text {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: flex-end;
   justify-content: center;
   gap: var(--gap15);
}
.email .name-field,
.email .checkbox {
   display: none;
}
.email .fields {
   width: 50%;
   text-align: left;
   display: flex;
   flex-direction: column;
   gap: var(--gap10);
   max-width: 310px;
}
.email .above-email-field {
   font-size: var(--fontsize-body);
   font-weight: 600;
   width: 100%;
}
.email .email-field input {
   border: 1px solid white;
   border-radius: var(--border-radius-mini);
   color: black;
   display: block;
   margin: 0;
   padding: var(--gap15);
   width: calc(100% - var(--gap15) * 2 - 2px);
   font-weight: 300;
   font-family: var(--font1);
   font-size: var(--fontsize-body);
   line-height: 1;
}
.email .cta {
   background-color: var(--color-blue);
   color: var(--color-white);
   padding: var(--gap15) var(--gap15);
   border-radius: var(--border-radius-mini);
   border: 0;
   font-weight: 500;
   font-size: var(--fontsize-body);
   width: 100%;
   max-width: calc(310px - var(--gap15) * 2);
   line-height: 22px;
}
.email .law {
   max-width: calc(310px * 2);
   font-weight: 500;
   font-size: var(--fontsize-small);
   text-align: center;
   line-height: 1.2;
   width: 100%;
}

/* Directory */
#main .directory {
   margin-top: var(--gap50);
   margin-bottom: var(--gap50);
}
.directory h1,
.lead h1 {
   border-top: 6px solid var(--color-black);
   border-bottom: 1px solid var(--color-black);
   padding-top: var(--gap10);
   margin-bottom: var(--gap25);
   font-size: var(--fontsize-header1);
   font-weight: 700;
}
.directory .overview {
   grid-template-columns: repeat(2, 1fr);
   gap: 0 var(--gap);
}
.directory .article {
   padding-bottom: var(--gap15);
   border-bottom: 2px solid black;
}
.directory .article:nth-child(n + 3) {
   padding-top: var(--gap15);
}
.directory .article a {
   display: flex;
   gap: var(--gap15);
   align-items: flex-start;
}
.directory .article a .image {
   flex: 1;
   height: 120px;
}
.directory .article a .text {
   flex: 2;
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   font-size: var(--fontsize-body);
   line-height: 1.2em;
   gap: var(--gap10);
}
.directory .article a .text .sub {
   display: block;
   order: 4;
   font-weight: 300;
}
.directory .article .text .title {
   order: 3;
   width: 100%;
   font-size: var(--fontsize-large);
   font-weight: 700;
   line-height: 1.2em;
}

/* LEAD */
.lead .content {
   color: black;
   font-weight: 300;
   font-size: var(--fontsize-large);
   line-height: 1.75;
   margin: 0 auto;
}
.lead .content p:first-of-type {
   margin-top: 0;
}
.lead .content .overview,
.lead .content .detailed {
   display: flex;
   flex-direction: column;
   gap: var(--gap25);
   padding: var(--gap25) 0;
}
.lead .content .offer {
   display: flex;
   gap: var(--gap25);
   justify-content: space-between;
   width: 100%;
   height: auto;
}
.lead .content .offer:not(:last-child) {
   border-bottom: 1px solid var(--color-grey);
   padding-bottom: var(--gap25);
}
.lead .content .offer:not(:last-child),
.lead .detailed .offer {
   border-bottom: 1px solid var(--color-grey);
   padding-bottom: var(--gap25);
}
.lead .content .offer .logo {
   width: 150px;
   height: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
}
.lead .content .offer .logo img {
   max-height: 100%;
   width: auto;
}
.lead .overview .name,
.lead .description,
.lead .label,
.lead .data3,
.lead .list {
   display: none;
}
.lead .content .offer .law {
   flex-basis: 100%;
   font-weight: 500;
   font-size: var(--fontsize-small);
   line-height: 1.2;
}
.lead .content .detailed {
   flex-direction: row;
   gap: var(--gap50);
   flex-wrap: wrap;
}
.lead .detailed .offer {
   width: calc(50% - (var(--gap50) / 2));
   flex-wrap: wrap;
   position: relative;
   justify-content: flex-start;
   padding: var(--gap15) 185px var(--gap15) var(--gap15);
   box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
}
.lead .detailed .offer .number {
   font-size: var(--fontsize-very-large);
   display: flex;
   align-items: center;
}
.lead .detailed .offer .number span {
   line-height: 30px;
   height: 30px;
   background-color: var(--color-grey);
   color: var(--color-footer-line);
   border-radius: 50%;
   width: 30px;
   text-align: center;
   font-weight: 500;
   font-size: var(--fontsize-large);
   display: block;
}
.lead .detailed .offer .logo {
   position: absolute;
   right: 25px;
   top: 50%;
   transform: translateY(-50%);
   height: auto;
}
.lead .detailed .offer .name {
   font-weight: 600;
   font-size: var(--fontsize-very-large);
}
.lead .detailed .offer .data1 {
   width: 100%;
   font-size: var(--fontsize-larger);
   font-weight: 500;
}
.lead .detailed .offer .stars,
.lead .detailed .offer .data2,
.lead .detailed .offer .law {
   display: none;
}
.lead .detailed .offer .list {
   width: 100%;
   display: block;
}
.lead .detailed .offer .list ul {
   margin: 0;
   padding: 0;
   list-style-position: inside;
}
.lead .offer .cta {
   background-color: var(--color-blue);
   color: var(--color-white);
   font-weight: 500;
   display: inline-block;
   padding: 5px 10px;
   border-radius: var(--border-radius-mini)
}

.single-header {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   /*gap: var(--gap);*/
   background-color: var(--color-blue);
   padding: var(--gap40) calc((100vw - var(--width-site-default)) / 2 + 30px);
   max-height: 500px;
   color: white;
}
.single-header > h1,
.single-header > div {
   width: 48%;
}
.single-header .title {
   order: 1;
   font-size: var(--fontsize-header1);
   line-height: 1.3;
   font-weight: 600;
   margin-bottom: 0;
}
.single-header .text {
   display: block;
   order: 2;
   font-size: var(--fontsize-large);
   font-weight: 500;
   line-height: 1.8;
   margin: var(--gap15) 0;
}
.single-header .author {
   display: block;
   order: 3;
   font-weight: 300;
   font-size: var(--fontsize-body);
   margin-bottom: var(--gap15);
}
.single-header .featured-image {
   order: 5;
   height: 400px;
   margin-left: auto;
}
.single-header .featured-image .credits {
   display: none;
}
.single-header .date {
   display: block;
   order: 4;
   font-weight: 300;
   font-size: var(--fontsize-body);
}
.single-body,
.page .content {
   color: black;
   font-weight: 300;
   font-size: var(--fontsize-large);
   line-height: 1.75;
   padding: var(--gap40) 0;
}
.single-body a {
   color: var(--color-blue);
   font-weight: 500;
}
.single-body ul,
.single-body ol {
   padding: 0;
   list-style-position: inside;
}
.single-body ol {
   list-style: none;
}
.single-body li {
   margin: var(--gap15) 0;
}
.single-body ol li {
   counter-increment: item;
}
.single-body ol li:before {
   content: counter(item) ".";
   display: inline-block;
   font-weight: 600;
   text-align: right;
   margin-right: var(--gap5);
}
.related .heading {
   margin-top: 0;
}
.related .heading:after {
   content: none;
}
.related .heading h3 {
   font-size: var(--fontsize-largest);
   font-weight: 600;
}
.related .articles {
   background-color: var(--color-grey);
   padding: 0 var(--gap10);
}
.related .article > a {
   gap: var(--gap15);
   display: flex;
   flex-direction: column;
   color: black;
   padding: var(--gap10) 0;
}
.related .article:not(:last-child) > a {
   border-bottom: 2px solid black;
}
.related .article .image {
   display: none;
}
.related .article .intro {
   display: block;
}
.related .article .published {
   display: block;
   font-size: var(--fontsize-small);
   width: fit-content;
   order: 3;
   font-weight: 400;
}
.related .article .title {
   font-size: var(--fontsize-very-large);
   font-weight: 600;
   line-height: 1.4;
   width: 100%;
   color: black;
}
table {
   border-collapse: collapse;
}
table tr {
   border: 1px solid white;
}
table tr:first-child,
table tr:not(:first-child) {
   background-color: var(--color-grey);
}
table th {
   text-align: left;
   font-weight: 500;
}
table th,
table td {
   padding: var(--gap15) var(--gap25);
}
.single-bottom {
   background-color: var(--color-grey);
   padding: var(--gap20) calc((100vw - var(--width-site-default)) / 2) var(--gap50);
}
.single-bottom .grid30 {
   padding-top: var(--gap15);
}

.best .overview h2,
.best .detailed h2,
.best .others h2,
.best .types h2,
.best .brands h2 {
   border-top: 3px solid var(--color-grey);
   border-bottom: 3px solid var(--color-grey);
   padding: var(--gap5) 0;
   margin-bottom: var(--gap20);
}
.best .overview .product {
   display: flex;
   gap: var(--gap5);
   font-family: var(--font3);
   font-size: var(--fontsize-body);
}
.best .overview .product .label {
   display: block;
   font-weight: 600;
}
.best .overview .product .label:after {
   content: ":";
}
.best .detailed .product {
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap5);
   padding: var(--gap) 0;
}
.best .detailed .product:first-of-type {
   padding-top: 0;
}
.best .detailed .product:last-child {
   padding-bottom: 0;
}
.best .detailed .product .label,
.best .detailed .product .pros-cons-2-lists,
.best .detailed .product .image,
.best .detailed .product .cta,
.best .detailed .product .description,
.best .detailed .product .specifications {
   display: block;
}
.best .detailed .product .label,
.shop .overview .product .label {
   order: 1;
   background-color: var(--color-grey);
   color: var(--color-footer-line);
   font-size: var(--fontsize-body);
   line-height: 1em;
   padding: var(--gap5) var(--gap10);
}
.best .detailed .product .title {
   order: 2;
   font-size: var(--fontsize-largest);
   width: 100%;
   line-height: 1.2em;
}
.best .detailed .product .title a {
   color: var(--color-black);
}
.best .detailed .image {
   order: 3;
   width: 100%;
   text-align: center;
}
.best .detailed .cta {
   order: 4;
   margin: 0 auto;
   color: var(--color-white);
   background-color: var(--color-blue);
   border-radius: var(--border-radius-mini);
   padding: var(--gap5) var(--gap15);
}
.best .detailed .cta a {
   color: var(--color-white);
}
.best .detailed .pros-cons-2-lists {
   order: 5;
}
.best .detailed .pros-cons-2-lists .title {
   display: none;
}
.best .detailed .pros-cons-2-lists .pros-cons {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
}
.best .detailed .pros-cons-2-lists .pros-cons h3 {
   margin-bottom: 0;
   font-size: var(--fontsize-largest);
}
.best .detailed .pros-cons-2-lists .pros-cons ul {
   padding: 0;
   list-style-type: none;
   margin-top: 0px;
}
.best .detailed .pros-cons-2-lists .pros-cons ul li {
   display: flex;
}
.best .detailed .pros-cons-2-lists .pros li:before {
   content: "\2713";
   margin-right: 10px;
}
.best .detailed .pros-cons-2-lists .cons li:before {
   content: "\2715";
   margin-right: 10px;
}
.best .detailed .description {
   order: 6;
}
.best .detailed .specifications {
   order: 7;
}
.best .detailed .specifications h3 {
   margin: 0 0 var(--gap5);
   font-size: var(--fontsize-very-larger);
}
.best .detailed .specifications ul {
   margin-top: 0;
   padding-left: var(--gap15);
   margin-bottom: 0;
}
.best .detailed ul li {
   margin: var(--gap10) 0;
}

.shop .overview {
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap20);
}
.shop .overview .product {
   flex: 1 1 calc((100% / 3) - (var(--gap20) * 2) / 3 - 2px);
   max-width: calc((100% / 3) - (var(--gap20) * 2) / 3 - 2px);
   padding: var(--gap20);
   display: flex;
   flex-direction: column;
   gap: var(--gap10);
   align-items: center;
}
.shop .overview .product .image {
   order: 1;
   text-align: center;
   width: 100%;
   background-color: var(--color-white);
   padding: var(--gap10) 0;
}
.shop .overview .product .image img {
   height: 200px;
}
.shop .overview .product .label {
   display: block;
   order: 2;
   text-align: center;
   line-height: 1.2em;
   font-size: var(--fontsize-body);
   padding: var(--gap5) var(--gap10);
   background-color: var(--color-grey);
   border-radius: var(--border-radius-mini);
}
.shop .overview .product .rating2 {
   display: block;
   order: 3;
   text-align: center;
}
.shop .overview .product .title {
   order: 4;
   text-align: center;
   font-size: var(--fontsize-very-large);
   line-height: 1.2em;
   height: 2.4em;
   overflow: hidden;
   padding: var(--gap5) 0;
}
.shop .overview .product .title a {
   color: black;
}
.shop .overview .product .summary {
   display: block;
   order: 4;
   text-align: center;
   font-size: var(--fontsize-body);
   line-height: 1.2em;
}
.shop .overview .product .jump {
   display: block;
   order: 5;
   text-align: center;
   font-size: var(--fontsize-body);
   margin-top: auto;
   color: var(--color-blue);
   font-weight: 500;
}
.shop .overview .product .price {
   display: block;
   order: 6;
}
.shop .overview .product .cta {
   display: block;
   order: 7;
   margin-top: var(--gap10);
}
.shop .overview .product .cta a {
   border-radius: var(--border-radius-mini);
   background-color: var(--color-blue);
   color: var(--color-white);
   font-weight: 500;
   padding: var(--gap10) var(--gap15);
}

footer {
   background-color: black;
   padding: var(--gap50) 0;
}
footer .inner {
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap);
}
footer [class^="list"]:not(.list8) {
   order: 1;
   flex: 1 1 auto;
}
footer [class^="list"] .element-title {
   color: var(--color-white);
   font-size: var(--fontsize-large);
   font-weight: 600;
   line-height: 1.6;
   padding-bottom: var(--gap15);
}
footer [class^="list"] a {
   font-size: var(--fontsize-large);
   text-decoration: none;
   color: var(--color-grey-darker);
   font-weight: 600;
   line-height: 2.4;
}
footer .social {
   order: 2;
   width: 100%;
}
footer .social .items {
   justify-content: center;
   gap: var(--gap5);
   align-items: center;
}
footer .social .items:before,
footer .social .items:after {
   content: "";
   height: 1px;
   background-color: var(--color-footer-line);
   flex: 10 1 auto;
}
footer .social .items > div.item {
   flex: 1 1 auto;
   justify-content: center;
}
footer .logo {
   order: 3;
   width: 100%;
}
footer .logo a img {
   margin: 0 auto;
}
footer .copyright {
   order: 4;
   color: var(--color-grey-darker); 
   text-align: center;
   font-size: var(--fontsize-small);
   font-weight: 600;
   width: 100%;
   text-align: center;
}
footer .list8 {
   order: 5;
   display: flex;
   justify-content: center;
   gap: var(--gap20);
   width: 100%;
}
footer .list8 a {
   color: var(--color-grey-darker);
   text-decoration: underline;
   font-size: var(--fontsize-body);
}
footer .list3 {
   border-right: 1px solid var(--color-footer-line);
}
footer .list8 .element-title,
footer .social .element-title,
footer .copyright .medium,
footer .copyright .long,
footer .social .text {
   display: none;
}

/* ----- Cookies ----- */
#cookies-overlay, #cookies {
   /*display: block !important;*/
}
#cookies-overlay {
   background-color: var(--color-black);
}
#cookies { 
   background-color: black; 
   padding: var(--gap) var(--gap);
   top: 10%;
   left: 50%;
   transform: translateX(-50%);
   max-width: 500px;
   border-radius: var(--border-radius-mini);
   color: var(--color-white);
}
#cookies .icon {
   display: none;
}
#cookies .text {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: var(--gap10);
   align-items: center;
   font-size: var(--fontsize-small);
   font-weight: 300;
   line-height: 1.4em;
   justify-content: center;
}
#cookies .short {
   font-weight: 500;
}
#cookies .long1 {
   display: block;
   padding-bottom: var(--gap15);
}
#cookies .long2 {display: none;} 

#cookies .accept,
#cookies .deny {
   padding: var(--gap10) var(--gap);
   font-weight: 500;
   border-radius: var(--border-radius-mini);
   background-color: var(--color-white);
   color: black;
}
#cookies .settings {
   font-weight: 500;
   order: 4;
}
#cookies .settings:hover {
   text-decoration: underline;
}
#cookies .accept {
   order: 3;
   font-weight: 600;
   text-align: center;
}
#cookies .deny {
   order: 3;
}
#cookies .accept:hover {
   background-color: var(--color-black);
   color: var(--color-white);
}

/* ----- Popup ----- */
#popup-overlay, #popup {
   /*display: block !important;*/
}
#popup { 
   background-color: var(--color-white); 
   padding: var(--gap) var(--gap-larger);
   font-family: var(--font2);
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   max-width: 650px;
}
#popup-overlay {
   background-color: var(--color-black);
}
.popup .freebie .icon {
   position: absolute;
   right: 10px;
   top: 10px;   
}
.popup .freebie .description {
   text-align: center;
}
@media (max-width: 1200px) {
   .header-sticky-1 .site-categories a .title {
      padding: var(--gap25) var(--gap10);
   }
   .header-sticky-1 .logo {
      margin-left: 0;
   }
   .header-sticky-1 .join .subscribe {
      margin-right: 0px;
   }
   .single-header {
      padding: var(--gap40) var(--gap15);
   }
   .single-bottom {
      padding: var(--gap20) var(--gap15);
   }
}
@media (max-width: 1000px) {
   .gridimg1 .griditem, .gridimg2 .griditem, .gridimg3 .griditem, .gridimg4 .griditem, .grid1 .griditem, .grid2 .griditem, .grid3 .griditem, .grid4 .griditem, .grid5 .griditem, .grid6 .griditem, .grid7 .griditem, .grid18 .griditem {
      height: auto;
   }
   
   .header-sticky-1 .logo {
      order: 0;
   }
   .header-sticky-1 .join {
      width: auto;
      border: 0;
   }
   .header-sticky-1 .site-categories {
      border-top: 1px solid var(--color-grey);
   }
   .header-sticky-1 .site-categories a .title {
      padding: var(--gap10);
      font-size: var(--fontsize-small);
   }
   
   .grid30 {
      grid-template-rows: repeat(4, auto);
   }
   .grid30 .article:nth-child(1) {
      grid-row: 1 / span 4;
   }
   .grid30 .article:nth-child(2) {
      grid-row: 1 / span 1;
   }
   .grid30 .griditem:nth-child(3) {
      grid-row: 2 / span 1;
   }
   .grid30 .griditem:nth-child(4) {
      grid-row: 3 / span 1;
   }
   .grid30 .griditem:nth-child(5) {
      grid-row: 4 / span 1;
   }
   
   .grid28 {
      grid-template-rows: repeat(12, auto);
   }
   
   .grid7 {
      display: grid;
   }
   
   .lead .content .offer:not(:last-child), .lead .detailed .offer {
      padding-right: 0;
      align-items: flex-start;
      gap: var(--gap15);
      padding-bottom: var(--gap50);
   }
   .lead .detailed .offer .logo {
      position: relative;
      right: auto;
      top: auto;
   }
   
   .single-body > table,
   .page .content > table {
      max-width: 100%;
      overflow-x: auto;
      display: block;
   }
   .single-header {
      max-height: none;
   }
   .single-header > h1, .single-header > div {
      width: 100%;
   }
   .single-header .featured-image {
      margin: var(--gap20) 0 0;
   }
   .single-body, .page .content {
      padding: var(--gap40) var(--gap15);
   }
   
   footer .inner {
      justify-content: flex-start;
   }
   footer .list3 {
      border-right: 0;
   }
   footer [class^="list"]:not(.list8) {
      flex: 0 1 calc(25% - (var(--gap) * 3) / 4);
   }
}
@media (max-width: 767px) {
   header .site-categories .items {
      flex-wrap: wrap;
   }
   .grid30 {
      display: flex;
      flex-direction: column;
   }
   .grid30 .article:not(:first-child) {
      padding-bottom: var(--gap15);
   }
   
   .grid7 {
      grid-template-rows: auto auto auto;
      grid-template-columns: 1fr;
      gap: 0;
   }
   .grid7 .griditem.article {
      grid-row: auto;
      grid-column: 1 / span 1;
      padding-bottom: var(--gap25);
      margin-bottom: 0;
   }
   
   .best .overview .product,
   .link-block {
      flex-direction: column;
   }
   
   .site-categories-images .cat {
      flex: 1 1 calc((100% - var(--gap20) * 1) / 2);
   }
   
   .best .overview .product {
      gap: 0;
      margin-bottom: var(--gap15)
   }
   
   .shop .overview .product {
      flex: 1 1 calc(50% - (var(--gap20) * 2) / 3 - 2px);
      max-width: calc(50% - (var(--gap20) * 2) / 3 - 2px);
   }
   footer .list8 {
      flex-wrap: wrap;
   }
}
@media (max-width: 600px) {
   .grid13 .griditem,
   .grid28 .article.text {
      margin-bottom: var(--gap20);
   }
   .grid28 .article.text,
   .grid2 .article .text {
      padding-bottom: var(--gap20);
   }
   
   .grid2 {
      margin-top: 0;
   }
   .grid2 a {
      flex-direction: column;
   }
   .grid2 .article .image {
      width: auto;
   }
   
   .directory .overview {
      grid-template-columns: 1fr;
   }
   .directory .article {
      padding-top: var(--gap15);
   }
   
   .lead .content .offer:not(:last-child), .lead .detailed .offer,
   .lead .content .offer .logo {
      width: 100%;
   }
   .lead .content .offer .logo {
      height: 70px;
      justify-content: flex-start;
   }
   .lead .content .offer .logo img {
      height: 100%;
   }
   .best .detailed .pros-cons-2-lists .pros-cons {
      grid-template-columns: 1fr;
   }
   .shop .overview .product {
      flex: 1 1 100%;
      max-width: 100%;
   }
}