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

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

:root {--font1: "Poppins", "Helvetica", sans-serif;}
:root {--font2: "Playfair Display", "Georgia", serif;}*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

:root {--font1: "Open Sans", "Arial", sans-serif;}
:root {--font2: "Playfair Display", "Georgia", "Times New Roman", serif;}
:root {--font3: "Georgia", "Times New Roman", Times, serif; }
/*:root {--font4: "Roboto Condensed", sans-serif; }
:root {--font5: "Arial", "Helvetica neue", Helvetica, sans-serif; }*/

:root {--fontsize-mini: 10px;}
:root {--fontsize-smallest: 12px;}
:root {--fontsize-very-small: 14px;}
:root {--fontsize-smaller: 15px;}
:root {--fontsize-small: 17px;}
:root {--fontsize-body: 18px;}
:root {--fontsize-larger: 24px;}
:root {--fontsize-very-large: 28px;}
:root {--fontsize-largest: 30px;}
:root {--fontsize-giga: 72px;}

/* ----- Colors ----- */
:root {--color-grey-lighter: #f5f5f5;}
:root {--color-grey-light: #e6e6e6;}
:root {--color-grey: #cccccc;}
:root {--color-grey-darker: #666666;}
:root {--color-white: #fff;}
:root {--color-black: #000;}
:root {--color-blue: #087da1;}

/* ----- Icons ----- */
.menu-icon .icon {background-image: url(/files/icon/menu_c.svg);}
#menu .search .icon {background-image: url(/files/icon/search_c.svg);}
.search .icon {background-image: url(/files/icon/search_b_white.svg);}
.social .items .x .icon {background-image: url(/files/icon/x_16.svg);}
.social .items .facebook .icon {background-image: url(/files/icon/facebook_1.svg);}
.social .items .linkedin .icon {background-image: url(/files/icon/linkedin_4.svg);}
.social .items .mail .icon {background-image: url(/files/icon/email_21.svg);}
.freebie .icon {background-image: url(/files/icon/close_a.svg);}
.email .icon {background-image: url(/files/icon/close_a.svg);}
.social .items .tiktok {display: none;}
.social .items .rss {display: none;}
.social .items .youtube {display: none;}
.social .items .pinterest {display: none;}
.social .items .instagram {display: none;}
.social .items .item {
   border: 1px solid var(--color-black);
   border-radius: 50%;
   padding: var(--gap5);
}
/* ----- Border Radius ----- */
:root {--border-radius-large: 50px;}
:root {--border-radius-mini: 5px;}

:root {--gap-very-large: 75px;}
:root {--gap50: 50px;}
:root {--gap40: 40px;}
:root {--gap35: 35px;}
:root {--gap30: 30px;}
:root {--gap25: 25px;}
:root {--gap: 20px;}
:root {--gap15: 15px;}
:root {--gap10: 10px;}
:root {--gap5: 5px;}
:root {--gap-section: 35px;}

/* ----- Site Width ----- */
:root {--width-site: 1320px;}

.article {
   margin: 0;
}

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

/* ################################################################# VARIOUS ################################################################# */
* {
    box-sizing: border-box;
}
body {
   font-family: var(--font3);
   font-size: var(--fontsize-body);
   color: var(--color-black);
}
h1, h2, h3, h4, h5, h6 {
   line-height: 1.1em;
}
h1 {
   font-size: 2.9rem
}
h2 {
   font-size: 2rem;
}
h3 {
   font-size: 1.6rem;
}
h4 {
   font-size: 1.5rem;
}
h5 {
   font-size: 1.3rem;
}

header .logo a,
footer .logo a,
.page .mobile .logo a {
   text-decoration: none;
   color: black;
   font-family: var(--font2);
}
footer .logo a {
   color: white;
}
header .logo span,
footer .logo span,
.page .mobile .logo span {
   display: block;
   font-size: 1.7em;
   font-weight: 500;
   text-align: center;
}

header .search [name="search"]::placeholder,
.email .fields [name="mail"]::placeholder {
   color: var(--color-grey-darker);
}

header > .desktop #header-normal .inner,
.index > div,
#main .single,
#main .page,
#main .archive,
footer .desktop .inner {
   width: 100%;
   max-width: var(--width-site);
   margin-right: auto;
   margin-left: auto;
   padding: 0 var(--gap);
}

/* HEADER */
header .infolinks {
   font-size: var(--fontsize-smallest);
   font-weight: 500;
   display: flex;
   gap: var(--gap5);
   padding: var(--gap5) 0;
   font-family: var(--font1);
}
header .infolinks .element-title,
header .join .newsletter,
header .header-normal-3 .element-title {
   display: none;
}
header .infolinks .item:after {
   content: "|";
   margin-left: var(--gap5);
}
header > .desktop #header-normal .header-normal-2 .inner {
   display: flex;
   align-items: center;
   padding: var(--gap10) var(--gap);
}
header .logo img {
   max-height: 40px;
}
header .join {
   font-weight: 500;
   font-size: var(--fontsize-very-small);
   font-family: var(--font1);
   margin-left: auto;
   margin-right: var(--gap10);
}
header .join > div {
   padding: var(--gap5) var(--gap10);
}
header .join .subscribe {
   background-color: var(--color-blue);
   color: var(--color-white);
   border-radius: var(--border-radius-mini);
}
header .search {
   border-radius: var(--border-radius-mini);
   /*background-color: var(--color-black);*/
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 var(--gap10);
   border: 1px solid var(--color-grey);
}
header .search [name="search"] {
   background-color: transparent;
   border: 0px;
   padding: var(--gap10) 0;
}
header .search .icon {
   margin: 0;
}
header #header-normal > .header-normal-3 {
   background-color: var(--color-black);
   /*font-weight: 500;*/
   font-size: var(--fontsize-very-small);
}
header .header-normal-2 .inner {
   padding: var() 0;
}
header .header-normal-3 .site-categories a .title {
   padding: var(--gap10);
   color: white;
   font-family: var(--font1);
}

.grid {
   grid-template-columns: repeat(12, 1fr); 
   grid-template-rows: repeat(12, 1fr);
   gap: 0;
}

.wide.left {
   width: 68%;
   /*border-right: 1px solid var(--color-grey-darker);*/
}
.side.right {
   width: 32%;
   border-bottom: 1px solid var(--color-grey-darker);
}

.section1 > .inner {
   gap: 0;
}

.grid .text {
   display: flex;
   flex-direction: column;
   gap: var(--gap10);
}
.grid .text .category {
   font-size: var(--fontsize-very-small);
   font-weight: 500;
   letter-spacing: 0.14px;
   color: var(--color-blue);
   text-transform: uppercase;
   line-height: 1.1em;
   order: 1;
}
.grid .text .title {
   font-size: var(--fontsize-largest);
   font-weight: 500;
   letter-spacing: 0.5px;
   line-height: 1.05em;
   order: 2;
}
.grid .text .intro,
.grid6 .griditem a .text .sub,
.freebie .text .description,
.email .text .description {
   line-height: 1.3em;
   font-size: var(--fontsize-very-small);
   color: var(--color-grey-darker);
   order: 3;
}

.gridimg3 {
   margin: 0;
   padding: var(--gap) 0;
   border-bottom: 1px solid var(--color-grey-darker);
   display: block;
}
.gridimg3 a {
   display: flex;
   gap: var(--gap);
}
.gridimg3 a .image {
   flex: 1 1 58%;
}
.gridimg3 a .text {
   flex: 1 1 42%;
}
.gridimg3 .text .category,
.gridimg3 .text .intro,
.grid7 .text .category,
.grid7 .text .intro,
.grid7 .text .date,
.grid6 .category,
.grid6 .sub,
.grid9 .category,
.grid9 .griditem:first-child .intro,
.grid9 .griditem:first-child .name,
.grid11 .griditem:first-child .intro {
   display: block;
}

.grid7,
.grid6,
.grid9,
.grid11 {
   margin: 0;
   grid-template-rows: repeat(12, auto);
   border-bottom: 1px solid var(--color-grey-darker);
}
.grid7 .griditem:nth-child(1) {
   grid-column: 1 / span 5;
   grid-row: 1 / span 8;
   /*border-right: 1px solid var(--color-grey-darker);*/
   padding: var(--gap) var(--gap) var(--gap) 0;
}
.grid7 .griditem:nth-child(2) {
   grid-column: 6 / span 7;
   grid-row: 1 / span 8;
   padding: var(--gap) 0 var(--gap) var(--gap) ;
}
.grid7 .griditem:nth-child(1) .title,
.grid7 .griditem:nth-child(2) .title {
   margin-bottom: var(--gap5);
}
.grid7 .griditem:nth-child(3) {
   grid-column: 1 / span 12;
   grid-row: 9 / span 4;
   border-top: 1px solid var(--color-grey-darker);
   padding: var(--gap) 0;
}
.grid7 .griditem .date {
   order: 3;
   color: var(--color-grey-darker);
   font-size: var(--fontsize-mini);
   line-height: 1.2em;
}

.grid6 .griditem {
   padding: var(--gap) 0;
}
.grid6 .griditem:nth-child(1) {
   grid-row: 1 / span 6;
   grid-column: 1 / span 12;
   border-bottom: 1px solid var(--color-grey-darker);
}
.grid6 .griditem:nth-child(2) {
   grid-row: 7 / span 6;
   grid-column: 1 / span 12;
}
.grid6 .griditem a {
   display: flex;
   gap: var(--gap);
}
.grid6 .griditem a .image {
   flex: 1 1 45%;
   height: 235px;
}
.grid6 .griditem a .text {
   flex: 1 1 55%;
}
.grid6 .griditem a .text .category,
.grid9 .griditem .category {
   font-size: var(--fontsize-very-small);
   color: var(--color-grey-darker);
   text-transform: none;
   font-weight: 400;
}
.grid6 .griditem a .text .sub {
   order: 3;
}

.grid9 .griditem,
.grid11 .griditem {
   padding: var(--gap) 0 var(--gap) var(--gap);
}
.grid9 .griditem .name,
.grid11 .griditem .name {
   order: 5;
   font-size: var(--fontsize-very-small);
}
.grid9 .griditem:first-child,
.grid11 .griditem:first-child {
   padding: 0 var(--gap) 0 0;
   margin: var(--gap) 0;
   border-right: 1px solid var(--color-grey-light);
}
.grid9 .griditem:nth-child(3) {
   padding-top: 0;
}
.grid9 .griditem:first-child a,
.grid11 .griditem:first-child a {
   display: flex;
   gap: var(--gap);
   align-items: flex-start;
}
.grid9 .griditem:first-child .image,
.grid11 .griditem:first-child .image {
   flex: 1 1 45%;
}
.grid9 .griditem:first-child .text,
.grid11 .griditem:first-child .text {
   flex: 1 1 55%;
}
.grid9 .griditem:first-child .title,
.grid11 .griditem:first-child .title {
   font-size: var(--fontsize-very-large);
   font-weight: 400;
}
.grid9 .griditem:nth-child(2) .title,
.grid9 .griditem:nth-child(3) .title,
.grid11 .griditem:nth-child(2) .title,
.grid11 .griditem:nth-child(3) .title {
   font-size: var(--fontsize-smaller);
}

.grid11 .griditem:first-child {
   border: 0;
}
.grid11 .griditem:first-child .image {
   flex: 1 1 32%;
}
.grid11 .griditem:first-child .text {
   flex: 1 1 68%;
}
.grid11 .griditem:nth-child(2) .intro,
.grid11 .griditem:nth-child(3) .intro {
   display: block;
}

.freebie,
.email {
   /*border-bottom: 1px solid var(--color-grey-darker);*/
   padding: var(--gap);
   display: flex;
   align-items: flex-start;
   gap: var(--gap);
}
.freebie .image {
   display: block;
   order: 1;
   flex: 1 1 25%;
}
.freebie .text,
.email .text {
   display: flex;
   flex-direction: column;
   order: 2;
   flex: 1 1 75%;
   gap: var(--gap5);
   align-items: flex-start;
   border-top: 1px solid var(--color-grey-darker);
   border-bottom: 1px solid var(--color-grey-darker);
   padding: var(--gap) 0;
}
.freebie .title,
.email .title {
   font-weight: 500;
   font-size: var(--fontsize-smaller);
   line-height: 1.2em;
}
.email .text .description {
   order: 1;
}
.freebie .cta,
.email .cta,
.product .cta a {
   color: var(--color-white);
   background-color: var(--color-blue);
   font-size: var(--fontsize-very-small);
   font-weight: 500;
   padding: 0 var(--gap15);
   height: 40px;
   line-height: 40px;
   order: 3;
   border-radius: 20px;
   font-family: var(--font1);
}
.email .cta {
   order: 4;
   padding: 0 var(--gap);
}
.email .fields .name-field,
.email .above-email-field {
   display: none;
}
.email .fields {
   width: 100%;
   order: 2;
   margin-top: var(--gap5);
}
.email .fields [name="mail"] {
   border: 0;
   border-bottom: 1px solid var(--color-black);
   font-size: var(--fontsize-very-small);
   padding: var(--gap10) 0;
   width: calc(100% - var(--gap10) * 2);
}
.email .checkbox {
   order: 3;
   font-size: var(--fontsize-very-small);
   margin-top: var(--gap5);
}
.email .law {
   color: var(--color-grey-darker);
   font-size: var(--fontsize-mini);
   line-height: 1.2em;
   order: 5;
   margin-top: var(--gap10);
}

.side.right > .list {
   padding: var(--gap);
   display: flex;
   flex-direction: column;
   /*border-bottom: 1px solid var(--color-grey-darker);*/
}
.side.right > .list .griditem.text:not(:last-child) {
   padding-bottom: var(--gap10);
   margin-bottom: var(--gap10);
   border-bottom: 1px solid var(--color-grey-light);
}
.side.right > .list .griditem.normal {
   border: 1px solid var(--color-grey-light);
   padding: var(--gap10);
   border-radius: 10px;
}
.side.right > .list .griditem.normal:not(:last-child) {
   margin-bottom: var(--gap10);
}
.side.right > .list .griditem .text {
   flex-direction: row;
   gap: var(--gap10);
}
.side.right > .list .griditem .title {
   color: var(--color-black);
   font-size: var(--fontsize-smaller);
   font-weight: 500;
   flex: 1 1 82%;
   order: 2;
   line-height: 1.2em;
}
.side.right > .list .griditem.text .minutes {
   order: 1;
   display: block;
   flex: 1 1 18%;
   color: var(--color-blue);
   font-weight: 500;
   font-size: var(--fontsize-smallest);
}
.side.right > .list .griditem.normal > a {
   display: flex;
   gap: var(--gap15);
   align-items: flex-start;
}
.side.right > .list .griditem.normal .image {
   flex: 1 1 25%;
   height: auto;
}
.side.right > .list .griditem.normal .text {
   flex: 1 1 75%;
   display: flex;
   flex-direction: column;
   gap: 0;
}
.side.right > .list .griditem.normal .category {
   display: block;
   font-size: var(--fontsize-very-small);
   text-transform: none;
   font-weight: 400;
}

.grid13 {
   margin: 0;
   padding: var(--gap) 0;
   border-bottom: 1px solid var(--color-grey-darker);
   gap: var(--gap);
}
.grid13 .article {
/*   border-radius: 10px;
   border: 1px solid var(--color-grey-light);*/
   overflow: hidden;
}
.grid13 .article .image img {
   height: 170px;
}
.grid13 .article .title {
   font-size: var(--fontsize-smaller);
   padding: var(--gap10);
   line-height: 1.2em;
}

.grid21 {
   margin: 0;
   padding: var(--gap) 0;
   border-bottom: 1px solid var(--color-grey-darker);
   column-gap: var(--gap);
   row-gap: var(--gap10);
   grid-template-rows: repeat(2, auto);
}
.grid21 .griditem:first-child {
   grid-row: 1 / span 2;
   /*padding-right: var(--gap10);*/
}
.grid21 .griditem:first-child > a {
   display: flex;
   gap: var(--gap);
   align-items: flex-start;
}
.grid21 .griditem:first-child .image {
   flex: 1 1 40%;
}
.grid21 .griditem:first-child .text {
   flex: 1 1 60%;
}
.grid21 .griditem:first-child .text .title {
   font-size: var(--fontsize-very-large);
}
.grid21 .griditem:not(:first-child) .title {
   font-size: var(--fontsize-smaller);
}
.grid21 .griditem:nth-child(2),
.grid21 .griditem:nth-child(4) {
   grid-row: 1 / span 1;
}
.grid21 .griditem:nth-child(3) {
   grid-column: 7 / span 3;
}
.grid21 .griditem:nth-child(4) {
   grid-column: 10 / span 3;
}
.grid21 .griditem:nth-child(3),
.grid21 .griditem:nth-child(5) {
   grid-row: 2 / span 1;
}
.grid21 .griditem:nth-last-child(-n + 2) {
   border: 1px solid var(--color-grey);
   border-radius: 10px;
   padding: var(--gap10);
}
.grid21 .griditem:nth-last-child(-n + 2) .text {
   gap: var(--gap5);
}
.grid21 .griditem:nth-last-child(-n + 2) .category {
   display: block;
   font-size: var(--fontsize-very-small);
   text-transform: none;
   font-weight: 400;
   color: var(--color-black);
}

.link-block {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   padding: var(--gap) 0;
   border-bottom: 1px solid var(--color-grey-darker);
}
.link-block > div {
   padding: var(--gap10) 0;
   width: 32%;
   border-bottom: 1px solid var(--color-grey-light);
   font-weight: 500;
   font-family: var(--font1);
   font-size: var(--fontsize-smaller);
}
.link-block > div > a:first-child {
   line-height: 1.2em;
}

.directory .content,
.lead .content {
   padding: var(--gap);
}
.directory .overview {
   gap: var(--gap);
}
.directory h1,
.lead h1 {
   font-size: var(--fontsize-giga);
}
.directory .article {
   border-bottom: 1px dotted var(--color-black);
}
.directory .article .image {
   margin-bottom: var(--gap15);
}
.directory .article .text {
   gap: var(--gap5);
}
.directory .article .sub {
   display: block;
   font-size: var(--fontsize-very-small);
   text-transform: none;
   font-weight: 400;
   color: var(--color-black);
   line-height: 1.2em;
   margin-bottom: var(--gap15);
}
.directory .article .title {
   font-size: var(--fontsize-small);
   line-height: 1.2em;
   font-weight: 500;
   margin-bottom: var(--gap5);
}

.lead .label,
.lead .overview .description,
.lead .overview .stars,
.lead .overview .law,
.lead .data2,
.lead .data3,
.lead .overview .name {
   display: none; 
}
.lead .overview {
   border: 1px solid var(--color-grey-light);
   border-radius: 10px;
}
.lead .overview .offer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 var(--gap10);
   gap: var(--gap);
   font-family: var(--font1);
}
.lead .overview .offer > div {
   flex: 1 1 auto;
}
.lead .overview .offer:not(:last-child) {
   border-bottom: 1px solid var(--color-grey-light);
}
.lead .number {
   flex-basis: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
}
.lead .number span {
   font-family: var(--font1);
   background-color: var(--color-blue);
   color: var(--color-white);
   border-radius: 50%;
   text-align: center;
   width: 30px;
   height: 30px;
   font-weight: 600;
   display: flex;
   align-items: center;
   justify-content: center;
}
.lead .overview .offer .logo {
   height: 90px;
   /*max-width: 110px;*/
   flex-basis: 110px;
   display: flex;
   align-items: center;
   justify-content: center;
}
.lead .overview .offer .logo img {
   height: auto;
   width: auto;
   max-height: 100%;
}
.lead .overview .offer .data1 {
   flex-basis: 150px;
   text-align: center;
}
.lead .overview .offer .list {
   flex-basis: 350px;
}
.lead .overview .offer .cta {
   text-align: center;
}
.lead .offer .cta span {
   color: var(--color-white);
   background-color: var(--color-blue);
   font-size: var(--fontsize-very-small);
   font-family: var(--font1);
   font-weight: 500;
   padding: var(--gap10) var(--gap15);
   height: 40px;
   line-height: 40px;
   order: 3;
   border-radius: 20px;
   text-align: center;
}
.lead .detailed {
   display: flex;
   gap: var(--gap);
   flex-wrap: wrap;
}
.lead .detailed .offer {
   border: 1px solid var(--color-grey);
   border-top: 0;
   border-radius: 10px;
   padding: var(--gap40) var(--gap) var(--gap);
   position: relative;
   /*margin-bottom: var(--gap);*/
   display: flex;
   flex-wrap: wrap;
   flex: 1 1 40%;
   font-size: var(--fontsize-smaller);
   font-family: var(--font1);
   gap: var(--gap);
   align-items: center;
   justify-content: space-between;
}
.lead .detailed .offer .number {
   position: absolute;
   top: 0px;
   left: -1px;
   flex-basis: auto;
   width: 45px;
   height: 45px;
   border-radius: 10px 0;
   background-color: var(--color-blue);
   z-index: 2;
}
.lead .detailed .offer .number span {
   border-radius: 0;
}
.lead .detailed .name {
   font-size: var(--fontsize-very-large);
   font-weight: 600;
   text-align: center;
   order: 1;
   background-color: var(--color-black);
   color: var(--color-white);
   height: 45px;
   line-height: 45px;
   position: absolute;
   left: 1px;
   top: 0px;
   z-index: 1;
   width: 100%;
   border-radius: 10px 10px 0 0;
}
.lead .detailed .offer .logo {
   height: 100px;
   padding: var(--gap40) 0 0;
   width: 100%;
   text-align: center;
   order: 2;
}
.lead .detailed .offer .logo img {
   height: 100%;
   width: auto;
}
.lead .detailed .offer .stars {
   width: 100%;
   text-align: center;
   order: 3;
   font-size: var(--fontsize-very-large);
}
.lead .detailed .offer .description {
   order: 4;
   border-bottom: 1px solid var(--color-grey-light);
   padding-bottom: var(--gap);
}
.lead .detailed .offer .data1 {
   order: 5;
   flex-basis: 45%;
   color: var(--color-blue);
   font-size: var(--fontsize-very-large);
   font-weight: 600;
   line-height: 1.2em;
}
.lead .detailed .offer .list {
   order: 6;
   flex-basis: 45%;
}
.lead .detailed .offer .list ul {
   margin: 0;
   padding: 0;
   list-style-position: inside;
}
.lead .detailed .offer .cta {
   order: 7;
   margin: 0 auto;
}
.lead .detailed .offer .law {
   order: 8;
   width: 100%;
   font-size: var(--fontsize-smallest);
}

.single article {
   padding: var(--gap);
   display: grid;
   /*flex-wrap: wrap;*/
   display: grid;
   grid-template-columns: calc(25% - var(--gap) / 2) calc(55% - var(--gap)) calc(20% - var(--gap) / 2);
   grid-template-rows: repeat(4, auto);
   gap: var(--gap);
}
.single .single-header {
   grid-column: 1 / span 3;
   grid-row: 1 / span 1;
}
.single .single-header h1,
.single .single-bottom {
   display: none;
}
.single .single-header .featured-image .credits {
   font-size: var(--fontsize-very-small);
   margin-top: var(--gap5);
   text-align: center;
}
.single .single-above {
   grid-column: 2 / span 1;
   grid-row: 2 / span 1;
   display: flex;
   flex-direction: column;
}
.single .single-body {
   grid-column: 2 / span 1;
   grid-row: 3 / span 1;
   font-family: var(--font2);
   line-height: 1.6em;
}
.single .single-above .breadcrumbs,
.single .single-above h1,
.single .single-above .text,
.single .single-above .author,
.single .single-above .date {
   display: block;
}
.single .single-above h1 {
   margin: var(--gap15) 0;
}
.single .single-above .breadcrumbs {
   font-size: var(--fontsize-smaller);
   color: var(--color-grey-darker);
}
.single .single-above .breadcrumbs a {
   color: var(--color-black);
   text-decoration: none;
}
.single .single-above .text {
   font-size: var(--fontsize-larger);
   line-height: 1.2em;
   margin-bottom: var(--gap5);
}
.single .single-above .author {
   font-size: var(--fontsize-small);
   font-family: var(--font1);
   margin-bottom: var(--gap5);
}
.single .single-above .date {
   font-size: var(--fontsize-small);
   color: var(--color-grey-darker);
   order: 5;
}
.single .single-left.side {
   grid-column: 1 / span 1;
   grid-row: 2 / span 2;
}
.single .single-left.side .social {
   margin-bottom: var(--gap);
   padding-bottom: var(--gap);
   border-bottom: 1px solid var(--color-grey-darker);
}
.single .single-left.side .social .element-title,
.single .single-left.side .social .item .text {
   display: none;
}
.single .single-left.side .social .items {
   gap: var(--gap10);
}
.single .single-left.side .social .item {
   margin: 0;
}
.single .single-left.side .email {
   padding: 0;
   border: 0;
}
.single-left .email .fields [name="mail"] {
   width: 100%;
}
.single .single-body > *:first-child {
   margin-top: 0;
}
.single .single-body a {
   text-decoration-color: var(--color-grey-darker);
   text-decoration-thickness: 1px;
   text-underline-offset: 3px;
}

.single .single-body table,
.page .content table {
   width: 100%;
   border-collapse: collapse;
}
.single .single-body table tr,
.page .content table tr {
   border-color: var(--color-grey-light);
   border-width: 0px 0px 1px;
   border-style: solid;
}
.single .single-body table th,
.single .single-body table td,
.page .content table th,
.page .content table td {
   padding: 0.5em;
   text-align: left;
}
.page .content table th {
   color: var(--color-white);
   background-color: var(--color-black);
}
.single .single-body strong {
   font-weight: bolder;
}
.single .single-body blockquote {
   font-style: italic;
}
.single-body .related .articles .article:nth-child(1n+3) {
   display: none;
}
.single .single-footer {
   grid-column: 1 / span 3;
   grid-row: 4 / span 1;
}
.related,
.single-footer .related {
   display: block;
}
.related .heading {
   font-size: var(--fontsize-largest);
}
.related .articles {
   display: flex;
   gap: var(--gap);
}
.related .article {
   padding-bottom: var(--gap15);
   border-bottom: 1px solid var(--color-grey-light);
}
.related .article .title {
   font-size: var(--fontsize-smaller);
   font-weight: 600;
   line-height: 1.15em;
}
.related .article .image {
   height: 200px;
   margin-bottom: var(--gap15);
}

.faq h3,
.consider h3,
.types h3 {
   margin-bottom: var(--gap10);
}
.faq h3 + p,
.consider h3 + p,
.types h3 + p {
   margin-top: 0;
}
.faq p,
.consider p,
.types p {
   margin-bottom: var(--gap25);
}
.faq p ~ h3,
.consider p ~ h3,
.types p ~ h3 {
   border-top: 1px solid var(--color-grey-light);
   padding-top: var(--gap25);
}

.page .mobile .logo {
   margin: 0 auto;
   padding: var(--gap15) 0;
}
.page .content {
   padding: var(--gap) calc((100% - 800px) / 2);
   line-height: 1.6;
}

.best .single-above,
.best .single-body,
.shop .single-above,
.shop .single-body {
   grid-column: 2 / span 2;
}
.best .overview {
   display: flex;
   gap: var(--gap);
   flex-wrap: wrap;
   padding-bottom: var(--gap);
}
.best .overview h2 {
   width: 100%;
}
.best .overview .product {
   flex: 1 1 calc(50% - var(--gap) / 2);
   font-family: var(--font1);
   gap: var(--gap10);
   display: grid;
   grid-template-columns: repeat(2, auto);
   grid-template-rows: repeat(4, auto);
}
.best .overview .product .image,
.best .overview .product .summary,
.best .overview .product .price,
.best .overview .product .cta,
.best .detailed .product .image,
.best .detailed .product .label,
.best .detailed .product .rating1,
.best .detailed .product .why,
.best .detailed .product .description,
.best .detailed .product .highlights,
.best .detailed .product .specifications,
.best .detailed .product .price,
.best .detailed .product .cta {
   display: block;
}
.best .overview .product .title {
   font-weight: 500;
   line-height: 1.2em;
   grid-column: 2 / span 1;
   grid-row: 1 / span 1;
}
.best .overview .product .image {
   grid-column: 1 / span 1;
   grid-row: 1 / span 4;
}
.best .overview .product .image img {
   height: auto;
   width: 150px;
}
.best .overview .product .summary {
   font-size: var(--fontsize-smaller);
   line-height: 1.2em;
   font-weight: 300;
   grid-column: 2 / span 1;
   grid-row: 2 / span 1;
}
.best .overview .product .price {
   color: var(--color-blue);
   font-weight: 500;
   grid-column: 2 / span 1;
   grid-row: 3 / span 1;
}
.best .overview .product .cta {
   grid-column: 2 / span 1;
   grid-row: 4 / span 1;
}
.product .cta a {
   padding: var(--gap10) var(--gap15);
}
.best .detailed {
   display: flex;
   flex-direction: column;
   gap: var(--gap);
}
.best .detailed h2 {
   margin-bottom: 0;
}
.best .detailed .product {
   display: grid;
   grid-template-columns: 35% 60%;
   grid-template-rows: repeat(7, auto);
   column-gap: 5%;
   font-family: var(--font1);
   padding-bottom: var(--gap);
}
.best .detailed .product:not(:last-child) {
   border-bottom: 1px solid var(--color-grey);
}
.best .detailed .product .image {
   grid-column: 1 / span 1;
   grid-row: 1 / span 4;
   padding: 5%;
   background-color: var(--color-grey-lighter);
   display: flex;
   justify-content: center;
   align-items: center;
}
.best .detailed .product .image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.best .detailed .product .title {
   grid-column: 2 / span 1;
   grid-row: 2 / span 1;
   font-size: var(--fontsize-very-large);
   font-weight: 600;
   display: flex;
   align-items: center;
}
.best .detailed .product .label {
   grid-column: 2 / span 1;
   grid-row: 1 / span 1;
   display: flex;
   align-items: center;
}
.best .detailed .product .label span {
   background-color: var(--color-blue);
   color: var(--color-white);
   font-weight: 500;
   font-size: var(--fontsize-small);
   border-radius: 10px;
   padding: var(--gap5) var(--gap15);
}
.best .detailed .product .rating1 {
   order: 3;
   grid-column: 2 / span 1;
   grid-row: 3 / span 1;
}
.best .detailed .product .why {
   order: 4;
   grid-column: 2 / span 1;
   grid-row: 4 / span 1;
   font-size: var(--fontsize-small);
   line-height: 1.4em;
   font-style: italic;
   font-weight: 300;
}
.best .detailed .product .description {
   grid-column: 2 / span 1;
   grid-row: 5 / span 1;
}
.best .detailed .product .highlights {
   grid-column: 1 / span 1;
   grid-row: 5 / span 1;
}
.best .detailed .product .highlights ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   padding: 5%;
   background-color: var(--color-grey-lighter);
}
.best .detailed .product .highlights ul li {
   display: flex;
   flex-direction: column;
   font-size: var(--fontsize-smaller);
   line-height: 1.2em;
   padding-bottom: var(--gap15);
}
.best .detailed .product .specifications {
   grid-column: 2 / span 1;
   grid-row: 6 / span 1;
}
.best .detailed .product .specifications h3 {
   margin-top: 0;
   margin-bottom: var(--gap5);
}
.best .detailed .product .specifications ul {
   margin-top: 0;
}
.best .detailed .product .price {
   grid-column: 2 / span 1;
   grid-row: 7 / span 1;
   color: var(--color-blue);
   font-weight: 500;
}
.best .detailed .product .cta {
   grid-column: 2 / span 1;
   grid-row: 8 / span 1;
   padding-top: var(--gap);
}
.best .others h2 {
   margin-bottom: 0px;
}
.best .others {
   display: flex;
   flex-direction: column;
   gap: var(--gap15);
   align-items: flex-start;
}
.best .others .product {
   font-family: var(--font1);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}
.best .others .product .label {
   display: block;
   font-size: var(--fontsize-very-small);
   font-weight: 500;
   letter-spacing: 0.14px;
   color: var(--color-blue);
   text-transform: uppercase;
   line-height: 1.1em;
}
.best .others .product .title a:before {
   content: "\002B";
   margin-right: var(--gap5);
}

.shop .overview {
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap);
}
.shop .overview .product {
   font-family: var(--font1);
   flex: 1 1 calc((100% / 3) - (var(--gap) * 2) / 3 - var(--gap) * 2 - 2px);
   max-width: calc((100% / 3) - (var(--gap) * 2) / 3 - var(--gap) * 2 - 2px);
   background-color: var(--color-grey-lighter);
   border: 1px solid var(--color-grey);
   border-radius: 10px;
   padding: var(--gap);
   display: flex;
   flex-direction: column;
   gap: var(--gap5);
   align-items: center;
   /*justify-content: space-between;*/
}
.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;
   font-weight: 600;
   line-height: 1.2em;
   font-size: var(--fontsize-small);
   padding: var(--gap5) 0;
}
.shop .overview .product .rating2 {
   display: block;
   order: 3;
   text-align: center;
}
.shop .overview .product .title {
   order: 4;
   text-align: center;
   font-size: var(--fontsize-larger);
   line-height: 1.2em;
   height: 2.4em;
   overflow: hidden;
   padding: var(--gap5) 0;
}
.shop .overview .product .summary {
   display: block;
   order: 4;
   text-align: center;
   font-size: var(--fontsize-smaller);
   line-height: 1.2em;
}
.shop .overview .product .jump {
   display: block;
   order: 5;
   text-align: center;
   font-size: var(--fontsize-smaller);
   margin-top: auto;
   color: var(--color-blue);
}
.shop .overview .product .price {
   display: block;
   order: 6;
}
.shop .overview .product .cta {
   display: block;
   order: 7;
}

footer {
   background-color: var(--color-black);
   color: var(--color-white);
}
footer .inner {
   display: flex;
   flex-wrap: wrap;
}
footer .desktop .logo {
   height: 40px;
   margin: var(--gap15) 0;
   width: 100%;
   color: white;
}
footer .desktop .logo img {
   height: auto;
   max-height: 100%;
}
/*--color-grey-very-dark*/
footer .copyright div:not(.short) {
   display: none;
}
footer [class^="list"],
footer .infolinks {
   font-size: var(--fontsize-very-small);
   font-family: var(--font1);
   border: 1px solid var(--color-grey-darker);
   padding: var(--gap10) 0;
   flex: 1 1 calc(100% / 7 - 25px);
}
footer [class^="list"]:not(.list1),
footer .infolinks {
   border-left: 0;
}
footer [class^="list"] .element-title,
footer .infolinks .element-title {
   padding: var(--gap10) var(--gap);
   display: block;
   color: var(--color-grey-darker);
}
footer [class^="list"] a,
footer .infolinks a {
   color: var(--color-white);
   text-decoration: none;
   padding: var(--gap10) var(--gap);
   display: block;
}
footer .infolinks {
   order: 7;
}
footer .copyright {
   order: 8;
   color: var(--color-grey-darker);
   font-size: var(--fontsize-very-small);
   padding: var(--gap15) 0;
}

 /*----- Cookies ----- */
#cookies-overlay, #cookies {
   /*display: block !important;*/
}
#cookies-overlay {
   background-color: var(--color-black);
}
#cookies { 
   background-color: var(--color-white); 
   padding: var(--gap10);
   font-family: var(--font1);
   top: 10%;
   left: 50%;
   transform: translateX(-50%);
   max-width: 650px;
   padding: var(--gap15);
}
#cookies .icon {
   display: none;
}
#cookies .text {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: var(--gap15);
   align-items: center;
   font-size: var(--fontsize-very-small);
   justify-content: center;
}
#cookies .short {display: none;}
#cookies .long1 {display: block;}
#cookies .long2 {display: block;}

#cookies .deny,
#cookies .settings,
#cookies .accept {
   background-color: var(--color-black);
   color: var(--color-white);
   text-align: center;
   font-size: var(--fontsize-smaller);
   padding: var(--gap10) var(--gap30);
   font-weight: 500;
}

/* ----- Popup ----- */
#popup-overlay, #popup {
   /*display: block !important;*/
}
#popup { 
   background-color: var(--color-white); 
   font-family: var(--font1);
   top: 10%;
   left: 50%;
   transform: translateX(-50%);
   max-width: 400px;
   padding: var(--gap15);
}
#popup-overlay {
   background-color: var(--color-black);
}
#popup .email {
   display: block;
   position: relative;
   padding: 0;
   border: 0;
}
#popup .email .icon {
   position: absolute;
   top: -15px;
   right: -15px;
   width: 25px;
   height: 25px;
   border-radius: 50%;
}
#popup .email .text {
   gap: var(--gap10);
}

@media (max-width: 1200px) {
   .wide.left {
      width: 100%;
      border-right: 0;
   }
   .side.right {
      width: 100%;
      border-bottom: 0;
   }
   
   .lead .overview .offer {
      height: auto;
      padding: var(--gap15);
   }
   .lead .overview .offer .list .row-information {
      margin: 0;
   }
   
   .single .single-above,
   .single .single-body {
      grid-column: 2 / span 2;
   }
   
   .shop .overview .product {
      flex: 1 1 50%;
      max-width: calc(50% - var(--gap) / 2);
   }
   
   footer .desktop .logo {
      border-bottom: 1px solid var(--color-grey-darker);
      margin-bottom: 0;
   }
   footer [class^="list"], footer .infolinks {
      flex: 1 1 calc(100% / 4 - 25px);
      border-top: 0;
   }
   footer [class^="list"].list6 {
      border-left: 1px solid var(--color-grey-darker);
   }
}
@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;
   }
   
   .grid21 {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(3, auto);
      gap: var(--gap);
   }
   .grid21 .griditem:first-child {
      grid-row: 1 / span 1;
      grid-column: 1 / span 2;
   }
   .grid21 .griditem:nth-child(2) {
      grid-row: 2 /span 1;
      grid-column: 1 / span 1;
   }
   .grid21 .griditem:nth-child(3) {
      grid-row: 2 /span 1;
      grid-column: 2 / span 1;
   }
   .grid21 .griditem:nth-child(4) {
      grid-row: 3 /span 1;
      grid-column: 1 / span 1;
   }
   .grid21 .griditem:nth-child(5) {
      grid-row: 3 /span 1;
      grid-column: 2 / span 1;
   }
   
   .directory .overview {
      grid-template-columns: 1fr 1fr;
   }
   
   .directory .content, .lead .content {
      padding: var(--gap);
   }
   .related .article .image {
      height: 120px;
   }
}
@media (max-width: 900px) {
   .page .content {
      padding: var(--gap);
   }
}
@media (max-width: 767px) {
   .single-body > table,
   .page .content > table {
      max-width: 100%;
      overflow-x: auto;
      display: block;
   }
   
   .gridimg3,
   .grid6 .griditem,
   .grid9 .griditem:first-child,
   .grid9 .griditem,
   .grid7 .griditem:nth-child(1),
   .grid7 .griditem:nth-child(2),
   .grid7 .griditem:nth-child(3),
   .freebie, .email,
   .side.right > .list,
   .grid13,
   .grid21,
   .grid11 .griditem:first-child,
   .grid11 .griditem:nth-child(2),
   .grid11 .griditem:nth-child(3),
   .link-block,
   .single article {
      padding: var(--gap);
   }
   .gridimg3 a {
      flex-direction: column;
   }
   
   .grid7 .griditem.text {
      margin: 0;
   }
   
   .grid9 .griditem:first-child,
   .side.right > .list {
      margin: 0;
   }
   .grid6 .griditem a,
   .grid11 .griditem:first-child a,
   .grid9 .griditem:first-child a,
   .freebie,
   .grid21 .griditem:first-child > a {
      flex-direction: column;
   }
   .freebie {
      margin-bottom: 0;
      padding-bottom: calc(var(--gap)*2);
   }
   
   .grid13 > div:not(:last-child) {
      margin-bottom: var(--gap);
   }
   
   .grid21 {
      display: flex;
      flex-direction: column;
      gap: var(--gap);
   }
   
   .link-block > div {
      width: 100%;
   }
   
   .directory h1, .lead h1 {
      font-size: var(--fontsize-largest);
   }
   
   .directory .overview {
      grid-template-columns: 1fr;
   }
   
   .lead .overview .offer {
      flex-direction: column;
      padding: var(--gap) var(--gap);
      gap: var(--gap);
   }
   .lead .overview .offer .data1,
   .lead .overview .offer .list {
      flex-basis: auto;
   }
   .lead .detailed .offer {
      padding: var(--gap) var(--gap) var(--gap);
   }
   .lead .detailed .offer .number {
      width: 35px;
      height: 35px;
      border-radius: 5px 0;
   }
   .lead .detailed .name {
      font-size: var(--fontsize-body);
      height: var(--gap);
      line-height: var(--gap);
   }
   
   .single article {
      grid-template-rows: repeat(5, auto);
   }
   .single .single-left.side {
      grid-row: 4 / span 1;
      grid-column: 1 / span 3;
   }
   .single .single-above, .single .single-body,
   .single .single-footer {
      grid-column: 1 / span 3;
   }
   .single .single-footer {
      grid-row: 5 / span 1;
   }
   .related .articles {
      flex-direction: column;
   }
   
   .best .detailed .product {
      display: flex;
      flex-direction: column;
   }
   .best .detailed .product .title {
      margin-top: var(--gap10);
   }
   .best .detailed .product .specifications {
      margin-top: var(--gap10);
   }
   .best .detailed .product .rating1 {
      order: unset;
      margin-bottom: var(--gap10);
   }
   
   .shop .overview .product {
      flex: 1 1 100%;
      max-width: 100%;
   }
}