*,
::after,
::before {
  margin:0;
  padding:0;
  box-sizing: border-box;
}
html {
    font-size: clamp(0rem, 1vw, 15px);
    scroll-behavior:smooth
}

body {background: #2c2c2c; color: #F2F2F2; font-family: 'Yanone Kaffeesatz'; font-size: 1.6rem; line-height: 1.4;}
a {color: #F2F2F2; text-decoration: none;}
main h3 > a {text-decoration: none;}
.container {margin: 0 auto; width: 100%; max-width: 100rem; padding-inline: 2rem;}
img {display: block; width: 100%; max-width: 100%; height: auto;}
h1 {font-family: 'Riborn'; font-weight: normal; font-size: 3.2rem; line-height: 1.2;}
.block.single h1 {font-size: 4.26rem; font-family: 'Yanone Kaffeesatz'; font-weight: 700; text-transform: uppercase; line-height: 0.85;}
h2, h3, h4 {font-family: 'Yanone Kaffeesatz'; font-weight: 700; line-height: 1.1;}
h2 {font-size: 2.13rem;}
h3, h4 {font-size: 1.7rem;}
h2 + h3 {margin-top: 1.8rem;}
h3 {margin-bottom: 0.1rem;}
h2.blocktitle {text-transform: uppercase; margin-block: 0.5rem 2rem; display: flex; justify-content: space-between;}
h2.blocktitle a {text-decoration: none; color: #2E2E2E; font-size: 2.66rem;}
h2.blocktitle a.viewall {font-size: 1.33rem; font-weight: 300; margin-top: 1rem;}
p {font-family: 'Barlow Condensed'; font-size: 1.3rem;}
.meta {display: flex; justify-content: space-between; font-size: 1.33rem; margin-block: 0 1rem;}
main .meta a {color: #2e2e2e; text-decoration: underline;}
.images {display: flex; gap: clamp(0rem, 4.5vw, 2.75rem); margin-bottom: 1.6em; position: relative;}
.images > p {margin: 0!important; display: flex; align-items: stretch;}
.images img {object-fit: cover; border-radius: 0.75rem;}
p:has(img) {padding-block: 1rem;}
p:has(img) + p > em:first-child:last-child {position: relative; bottom: 2.2em; font-size: 1.1rem;}
p:has(em:first-child:last-child) {margin-bottom: 0!important;}
dl {display: flex; margin-bottom: 1.4rem; font-family: 'Barlow Condensed'; font-size: 1.3rem;}
dl dt {font-weight: 600;}
dl > *:nth-child(1) {width: 37%;}
dl > *:nth-child(2) {width: 63%;}
.csv > *::after {content: ",";}
.csv > *:last-child::after {content: none;}
.ad::before {content: "Ad"; position: absolute; left: 50%; top: 0; background: #D6CEA866; transform: translateX(-50%); padding-inline: 0.5rem; text-transform: uppercase; font-weight: 400; font-size: 1.06rem; padding-top: 0.25rem;}
.showmore {text-transform: uppercase; color: var(--black); font-weight: 300; text-decoration: none; cursor: pointer; display: inline-block; margin-block: 0.25rem 1rem;}
p strong, li strong {font-weight: 600;}

/* Header */

header {background: #28515B; position: sticky; top: 0; z-index: 99;}
header .container {display: flex; align-items: center; justify-content: space-between;}
header .container > div {display: flex; align-items: center;}
header .logo {display: flex; gap: 1rem; align-items: center; margin-block: 1rem;}
header .logo img:nth-child(1) {width: 3.86rem;}
header .logo img:nth-child(2) {width: 15.73rem;}
header nav {flex-grow: 1;}
header nav > ul {display: flex; font-size: 1.73rem; justify-content: space-around; margin-inline: 3rem;}
header nav > ul li {list-style: none;}
header nav > ul > li > ul {
  opacity: 0; 
  pointer-events: none;
  position: absolute;
  background: #28515B;
  padding: 1rem 0;
  margin: -1rem 0 0 -1.75rem;
  transition: all 0.1s ease-in-out;
}
header nav > ul > li > ul > li a {display: block; padding: 0.3rem 1.75rem 0.3rem 1.75rem; font-size: 1.5rem; min-width: 9rem; font-weight: 300;}
header nav > ul > li:hover > ul {opacity: 1; pointer-events: auto; margin-top: 0;}
header nav > ul > li:first-child {display: none;}
header .search {margin-right: 0.5rem;}
header .search form {display: none;}
body.searchopen header .search form {
  display: flex; 
  position: absolute; 
  left: 0rem; 
  margin-top: 1rem; 
  padding: 1rem 2rem 1.75rem 2rem; 
  background: #28515B; 
  justify-content: flex-end;
  width: 100%;
}
header .search form input {flex-grow: 1;}


/* Main */

main {color: #2E2E2E; background: url(/img/pattern.jpg); display: flex;}
main a {text-decoration: underline; color: #28515B; text-underline-offset: 0.15em; text-decoration-color: rgba(40, 81, 91,0.5);}


/* Blocks */

.block {padding: 2rem 4.6rem; border-radius: 0.66rem; margin-block: 4rem;}

.block.quote,
.block.recent {background-color: #28515B; color: #f2f2f2;}
.block.related,
.block.outfits,
.block.style {background-color: #e8e4d3;}
.block.content {background-color: #f8f8f8;}
.block.profiles,
.block.single.pro_stores + .block.related,
.block.single.pro_brands + .block.related,
.block.guides {background-color: #dbd7ce;}
.block.words,
.block.single {background-color: white;}
.block.quote > div {font-size: 2.33rem; line-height: 1.25; max-width: 73rem; margin: 3.1rem auto 3.33rem; text-align: center;}
.block.quote > div > span {display: inline-block; font-weight: 200; margin-left: 1.75rem;}
.block.intro {background-color: #f0ede0;}
body:is(.profiles, .profiles-brands, .profiles-stores, .profiles-people, .guides, .guides-reviews, .guides-picks, .guides-finds) .block.intro {background: #eae7e0;}
body.ruggedpedia .block.intro {background-color: #f0ede0;}

/* Block intro */

.block.intro {padding-block: 3rem 4rem;}
.block.intro:not(.hasimage) {margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
.block.intro.hasimage {position: relative; overflow: hidden; min-height: 22rem;}
.block.intro.hasimage > * {position: relative; z-index: 1;}
.block.intro.hasimage > img:first-child {
  position: absolute; z-index: 0; right: 0; top: 0; width: 50%; height: 100%; min-width: 50%;
  -webkit-mask-image: linear-gradient(to left, black 30%, transparent);
  mask-image: linear-gradient(to left, black 50%, transparent);
  object-fit: cover;
}
.block.intro h1 {margin-bottom: 1rem;}
.block.intro:not(.hasimage) + .block {border-top-left-radius: 0; border-top-right-radius: 0; margin-top: 0; padding-top: 4rem;}
.block.intro + .block .blocktitle {display: none;}
.block.intro.hasimage + .block {padding-top: 4rem;}
.block.single.tags > *,
.block.intro > * {max-width: 45rem;}

.block.ad {margin: -2rem -4.6rem;}
.block.ad a.ad {border-radius: 0.66rem; overflow: hidden; aspect-ratio: 5.1;}

/* Block recent */

.block.recent {display: flex; padding: 0!important; overflow: hidden;}
.block.recent > .carousel {min-width: 64rem; max-width: 64rem;}
.block.recent > .cards {flex: 1; padding: 2rem 2.86rem}
.block.recent h2.blocktitle {font-size: 2.13rem; margin-block: 0 1.5rem;}


/* Block single */

.block.single h1 {margin-block: 1.75rem;}
.block.single h2 {margin-block: 3.5rem 0.75rem;}
.block.single .twocols {display: flex; gap: 0 4rem;}
.block.single .twocols > div:nth-child(1) {width: calc(100% - 30.26rem); font-size: 1.33rem; flex-grow: 1;}
.block.single .twocols > div:nth-child(1) > .block {
  background: #F3F0E0; 
  font-family: 'Barlow Condensed'; 
  font-size: 1.3rem;
  padding: 2.5rem 3.33rem 2.75rem 3.33rem;
  margin-block: 3rem;
}
.block.single.pro_stores .twocols > div:nth-child(1) > .block,
.block.single.pro_brands .twocols > div:nth-child(1) > .block {background: white;}
.block.single .twocols > div:nth-child(1) > .block > *:first-child {margin-top: 0;}
.block.single .twocols > div:nth-child(1) > .block > *:last-child {margin-bottom: 0;}
.block.single .twocols > div:nth-child(1) ol,
.block.single .twocols > div:nth-child(1) ul,
.block.single .twocols > div:nth-child(1) p {margin-bottom: 1.3em; font-family: 'Barlow Condensed'; font-size: 1.35rem;}
.block.single .twocols > div:nth-child(1) ul {margin-left: 1.2rem;}
.block.single .twocols > div:nth-child(1) ol {margin-left: 1.2rem;}
.block.single .twocols > div:nth-child(1) p img {border-radius: 0.75rem;}
.block.single .twocols > div:nth-child(1) .featured_image {border-radius: 0.75rem; overflow: hidden;}
.block.single .twocols > div:nth-child(1) .featured_image:has(img) {margin-bottom: 2rem;}
.block.single .twocols > div:nth-child(1) .featured_image img {width: 100%;}
.block.single .twocols > div:nth-child(1) .featured_image + p {font-size: 1.85rem; font-weight: 300; line-height: 1.3;}
.block.single .twocols > div:nth-child(2) {max-width: 26.26rem; width: 100%;}
.block.single .twocols + .twocols > div:nth-child(2) {padding-bottom: 6rem;}
.block.single .twocols + .twocols > div:nth-child(1) {padding-bottom: 3rem;}
.block.single .twocols > div:nth-child(2) .ad {display: block; border-radius: 0.75rem; overflow: hidden; margin-inline: auto; position: relative;}
.block.single .twocols > div:nth-child(2) .sticky {position: sticky; top: 9rem; display: flex; flex-direction: column; gap: 2rem;}
.block.single .twocols.keyinfo {gap: 0; border-radius: 0.66rem; overflow: hidden; margin-block: 2.66rem 3rem;}
.block.single .twocols.keyinfo > div:nth-child(1) {aspect-ratio: 1; width: 50%;}
.block.single .twocols.keyinfo > div:nth-child(1) > img {height: 100%; object-fit: cover;}
.block.single .twocols.keyinfo > div:nth-child(2) {background: white; width: 50%; max-width: none; padding: 4rem 4rem;}
a.ad {aspect-ratio: 0.83; position: relative; display: block;}
.cards > ul.large a.ad {aspect-ratio: 0;}
.cards > ul.large a.ad .img {aspect-ratio: 1;}
a.ad > img {height: 100%; object-fit: cover;}
a.ad h3::after {
  content: "";
  height: 1.4rem;
  width: 1.5rem;
  background: url(/img/externallink.svg) left center / auto 1.4rem no-repeat;
  margin-top: 0.3rem;
  margin-left: 0.2rem;
  filter: grayscale(1) brightness(0.5);
  display: inline-block;
}
.block.single:not(:last-child,.tags) {margin-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0;}
.block.single + .block.related {margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0;}
.block.single.pro_stores,
.block.single.pro_brands {background: #eae7e0;}
@media only screen and (max-width: 83rem) {
  .block.single .twocols {flex-direction: column;}
  .block.single .twocols.keyinfo > div:nth-child(1),
  .block.single .twocols.keyinfo > div:nth-child(2),
  .block.single .twocols > div:nth-child(1) {width: 100%;}
}
.block.related {padding-top: 3rem;}
.block.related .cards > ul.large li:nth-child(4) {display: none;}


#searchbrands {display: flex; margin-bottom: 3rem; position: relative;}
#searchbrands div {display: flex;}
#searchbrands label {display: none;}
#searchbrands input, #searchbrands button, form#searchbrands select {border-color: #2e2e2e; color: #2e2e2e;}
form#searchbrands select, #searchbrands input {border-right: 0;}
#searchbrands button.arrowright {background-image: url("/img/arrowright.svg");}
form#searchbrands select {
  padding-right: 2.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent url(/img/arrowdown.svg) calc(100% - 0.7rem) center / auto 0.8rem no-repeat;
}
form#searchbrands a {
  height: 2.66rem; 
  line-height: 2.66rem;
  display: inline-block;
  padding-inline: 0.7rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.25rem;
  color: #2e2e2e;
  text-transform: uppercase;
  text-decoration: none;
  margin-left: 1rem;
  font-weight: 300;
}
#searchbrands #clearfilter {display: none;}
@media only screen and (max-width: 55rem) {
  #searchbrands {flex-wrap: wrap; justify-content: space-between; margin-bottom: 0; margin-top: -1.5rem;}
  form#searchbrands a {margin: 0; padding: 0;}
  #searchbrands button {width: 0; color: transparent; overflow: hidden; padding-right: 1.25rem;}
  #searchbrands div {width: 100%; margin-top: 2.75rem;}
  form#searchbrands select {padding-right: 2.25rem;}
  #searchbrands input {flex-grow: 1; flex-shrink: 1; min-width: 0;}
  #searchbrands + ul#brands {margin-top: 3rem;}
}

.p_instagram, .p_instagram > a {display: flex; align-items: center; text-decoration: none; gap: 0.5rem; color: #2E2E2E;}
.p_instagram span {position: relative; bottom: 0.15rem;}


/* Carousel */

.carousel {position: relative;}
.carousel ul {overflow: auto; display: flex; flex-wrap: nowrap; scroll-snap-type: x mandatory; scroll-snap-points-y: repeat(100%); scroll-behavior: smooth; background: gray; -ms-overflow-style: none; scrollbar-width: none; margin: 0; padding: 0; height: 100%;}
.carousel ul::-webkit-scrollbar {display: none; /* Hide scrollbar for Chrome, Safari and Opera */} 
.carousel ul li {position: relative; min-width: 100%; list-style: none; background: url() center center / cover no-repeat; scroll-snap-align: start;}
.carousel ul li a {display: block; color: white; height: 100%;}
.carousel ul li a > div {
  position: absolute; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.75) 100%); 
  display: flex; 
  flex-direction: column; 
  justify-content: flex-end;
  text-align: center;
  padding: 3rem 7rem;
}
.carousel ul li a > div .section {text-transform: uppercase; font-size: 1.7rem; margin-bottom: 1.5rem; font-weight: 300;}
.carousel ul li a > div h3 {font-size: 2.66rem; line-height: 0.95; margin-bottom: 2.66rem; text-wrap: balance;}
.carousel ul li a > div p {margin-bottom: 3rem; height: 3em; overflow: hidden; max-width: 40rem; margin-inline: auto; font-size: 1.4rem;}
@supports (-webkit-line-clamp: 2) or (line-clamp: 2) {
  .carousel ul li a > div p {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: auto;
  }
}
.carousel ul li a > img {object-fit: cover; height: 100%;}

.carousel ol {display: none;}
.carousel .prev, .carousel .next {
  display: none; 
  user-select:none; 
  cursor: pointer; 
  color: white; 
  position: absolute; 
  left: 1.33rem; 
  bottom: 2.5rem; 
  z-index: 9; 
  line-height: 0;
  width: 4rem;
  height: 4rem;
  filter: contrast(2) invert(1);
}
.carousel .prev {background: url(/img/arrowleft.svg) center center / 1.75rem auto no-repeat;}
.carousel .next {left: auto; right: 1.33rem; background: url(/img/arrowright.svg) center center / 1.75rem auto no-repeat;}


/* Ruggedpedia */

.block.words form {margin-bottom: 2rem;}
.block.words form input {border: 1px solid #3a3a3a;}
.block.words form button {color: white; background: #3a3a3a; border: 1px solid #3a3a3a;} 

ul.letters {display: flex; line-height: 0.8; margin-bottom: 2.33rem; flex-wrap: wrap; gap: 1rem 0;}
ul.letters li {list-style: none; border-right: 1px solid #3a3a3a;}
ul.letters li:last-child {border-right: none;}
ul.letters li a {text-decoration: none; font-size: 1.33rem; font-weight: 300; text-transform: uppercase; padding-inline: 0.6rem; color: #2E2E2E;}
ul.letters li a.active {text-decoration: underline;}

ul.wordslist {display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 4rem;}
ul.wordslist li {list-style: none; display: none;}
ul.wordslist li.active {display: block;}
ul.wordslist li a {text-decoration: none; display: block; background: #f7f5ee; padding: 2.33rem 4.25rem 2.66rem; border-radius: 0.66rem; color: #2E2E2E;}
ul.wordslist li a h3 {margin-bottom: 1rem; font-size: 2.33rem; line-height: 0.95;}
ul.wordslist li a h3::before {
  position: absolute; 
  margin: 0.05rem 0 0 -2.25rem; 
  content: "";
  width: 1.75rem;
  height: 1.75rem;
  background: url(/img/chevronright.svg) center center / contain no-repeat;
}
ul.wordslist li a p {height: 4.5em; overflow: hidden; font-weight: 300;}
.wordslist + .noresult {display: block; position: relative; bottom: 2.5rem; font-weight: 300; padding-bottom: 1.5rem;}
.wordslist:has(.active) + .noresult {display: none;}
@supports (-webkit-line-clamp: 3) or (line-clamp: 3) {
  ul.wordslist li a p {
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    height: auto;
  }
}


/* Cards */

.cards > ul { 
  --padding-side: 4.6rem;  /* Change if gutter side ever changes */
  display: flex; 
  gap: 3.66rem;
  -ms-overflow-style: none; 
  scrollbar-width: none;
  overflow: auto; 
  margin-left: calc(var(--padding-side) * -1); 
  width: calc(100% + var(--padding-side) * 2); 
  padding-inline: var(--padding-side); 
  scroll-snap-type: x mandatory;
  margin-bottom: 2.75rem;
  flex-wrap: wrap;
}
.cards ul[data-amount="0"] {display: none;}
body.home .cards > ul::-webkit-scrollbar {display: none;}
.cards > ul > li {
  width: 18.95rem;
  flex-shrink: 0; 
  scroll-snap-align: center;
  list-style: none; 
  background: #FFF;
  border-radius: 0.66rem;
  overflow: hidden;
}
.cards > ul > li a {text-decoration: none; position: relative; display: block; height: 100%; width: 100%; color: #2E2E2E;}
.cards > ul > li a .img {background: gray;}
.cards > ul > li a .img img {height: 100%; object-fit: cover;}
.cards > ul > li a .section {font-size: 1.2rem;font-weight: 300; text-transform: uppercase; margin-bottom: 1rem;}
.cards > ul > li a .content {padding: 1.75rem 2rem; min-height: 8rem;}
.cards > ul > li a .content:has(.section) {min-height: 13rem;}
.cards > ul > li a .content h3 {
  font-size: 2.13rem; 
  line-height: 0.95;
  height: 2.85em;
  overflow: hidden;
}
.cards > ul > li a .content .summary {display: none; margin-block: 1.25rem 4rem;}
.block.profiles .cards > ul > li a .content .summary {display: block;}
.cards > ul > li a .content .summary  p {
  overflow: hidden; 
  height: 4rem;
}
.cards > ul > li a .content .readmore {
  font-size: 1.33rem; 
  text-transform: uppercase; 
  display: none; 
  position: absolute; 
  bottom: 1.35rem;
  background: url("/img/arrowright.svg") right 40% / 0.8rem auto no-repeat;
  padding-right: 1.35rem;
}
.cards > ul > li a .content .readmore.right {right: 2rem; display: block;}
.cards > ul#brands {gap: 2.25rem 3.66rem; padding-top: 1rem;}

.cards > ul:not(.horizontal).small > li {background: none; border-radius: 0; text-align: center;}
.cards > ul:not(.horizontal).small > li a img {border-radius: 0.66rem; margin-bottom: 1rem;}

.cards > ul.large.horizontal > li:nth-child(even) a {flex-direction: row-reverse;}
.cards > ul.large.horizontal > li a .content {padding: 2.75rem 3.75rem; width: 100%;}
.cards > ul.large.horizontal > li a .content .readmore,
.cards > ul.large.horizontal > li a .content .summary {display: block; margin-bottom: 3.5rem;}
.cards > ul.large.horizontal > li a .content .summary p {overflow: hidden; height: 9rem;}
.cards > ul.large.horizontal > li a .content h3 {margin-bottom: 1.5rem; font-size: 3rem;}

.instagram_logo {height: 2rem; width: auto; cursor: pointer; border-radius: 0!important;}

body.out_layering .cards > ul > li,
body.words .cards > ul > li {background-color: #f7f5ee;}
@media only screen and (min-width: 83rem) {
  .cards > ul#brands > li {width: 16.25rem;}
  .cards > ul.large {gap: 4rem}
  .cards > ul.large > li {width: 26.26rem;}
}
.cards > ul.horizontal.small {gap: 2rem; margin-bottom: 0; flex-direction: column;}
.cards > ul.horizontal.small > li a {display: flex; flex-direction: row-reverse!important;}
.cards > ul.horizontal.small > li a .img {min-width: 6.66rem; width: 6.66rem;}
.cards > ul.horizontal.small > li {width: 100%;}
.cards > ul.horizontal.small > li a .content {padding: 0.75rem 1rem; width: 100%; height: auto; min-height: 0;}
.cards > ul.horizontal.small > li a .section {margin-bottom: 0.25rem; font-size: 1.06rem;}
.cards > ul.horizontal.small > li a .content h3 {
  font-size: 1.6rem; 
  height: 3.1rem;
  margin-bottom: 0;
}
.block.profiles .cards > ul > li a .content .summary p {height: 7.25rem;}

@supports (-webkit-line-clamp: 3) or (line-clamp: 3) {
  .cards > ul > li a .content h3 {
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    height: auto!important;
  }
  .cards > ul > li a .content .summary  p {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: auto!important;
  }
  .cards > ul.large li a .content .summary  p {
    display: -webkit-box;
    line-clamp: 5;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    height: auto!important;
  }
  .block.profiles .cards > ul > li a .content .summary p {
    display: -webkit-box;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    height: auto!important;
  }
}
.cards > ul > li a .img img:nth-child(2) {display: none;}


.cards > ul.horizontal {flex-wrap: wrap!important; gap: 4.25rem 3.66rem;}
.cards > ul.horizontal > li {width: 41.5rem;}
.cards > ul.horizontal > li a {display: flex; align-items: stretch; height: 100%;}
.cards > ul.horizontal > li a .content h3 {margin-bottom: 1.33rem; height: 1.9em;}
@supports (-webkit-line-clamp: 2) or (line-clamp: 2) {
  .cards > ul.horizontal > li a .content h3 {
    line-clamp: 2;
    -webkit-line-clamp: 2;
    height: auto!important;
  }
}
.cards > ul.horizontal > li a .content .summary {display: block;}
.cards > ul.horizontal > li a .img {aspect-ratio: 1; min-width: 18.25rem; width: 18.25rem;}
.cards > ul.horizontal > li a .img img:nth-child(1) {display: none; aspect-ratio: 1.542857143;}
.cards > ul.horizontal > li a .img img:nth-child(2) {display: block; aspect-ratio: 1;}
.cards > ul.horizontal > li a .content .readmore {display: inline-block;}

.cards > ul.horizontal.large > li {width: 100%;}
.cards > ul.horizontal.large > li a .img {width: 50%; min-width: 50%;}



.singlecard {display: flex; gap: 4.6rem; margin-bottom: 4.25rem;}
.singlecard > div.img {flex: 2; border-radius: 0.66rem; overflow: hidden;}
.singlecard > div.content {flex: 1; display: flex; flex-direction: column; justify-content: center;}
.singlecard > div.content ul.tags {margin-bottom: 1.8rem!important;}
.singlecard > div.content h3 {margin-bottom: 1.66rem; font-size: 2.13rem; line-height: 0.95;}
.singlecard > div.content .summary > p:first-child {height: 7rem; overflow: hidden;}
@supports (-webkit-line-clamp: 2) or (line-clamp: 2) {
  .singlecard > div.content .summary > p:first-child {
    display: -webkit-box;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    height: auto;
  }
}
.singlecard + div.cards > ul > li:first-child {display: none!important;}
main .singlecard a {color: #2E2E2E;}

/* Breadcrumbs */

ul.breadcrumbs {font-size: 1.2rem; display: flex; font-weight: 300; text-transform: uppercase; margin-block: 1rem; margin-left: 0!important;}
ul.breadcrumbs li {list-style: none;}
ul.breadcrumbs li a {text-decoration: none; color: #2E2E2E;}
ul.breadcrumbs li:not(:first-child)::before {content: "/"; display: inline-block; margin-inline: 0.25rem;}


/* Tags */

div.tags {margin-top: 4rem; padding-bottom: 3rem;}
div.tags strong {font-size: 1.2rem; display: block; text-transform: uppercase; margin-bottom: 0.25rem;}
ul.tags {font-size: 1.2rem; display: flex; font-weight: 300; text-transform: uppercase; margin: 0!important;  font-family: 'Yanone Kaffeesatz'!important; flex-wrap: wrap;}
ul.tags li {list-style: none;}
ul.tags li a {text-decoration: none; color: #2e2e2e;}
ul.tags li:not(:first-child)::before {content: "/"; display: inline-block; margin-inline: 0.25rem;}
.twocols div.tags {padding-bottom: 0;}

/* Buttons and links */

a.bigarrow {
  font-size: 1.66rem;
  font-family: 'Yanone Kaffeesatz';
  text-decoration: none;
  text-transform: uppercase;
  margin-top: 3.33rem;
  display: inline-block;
  padding-right: 9rem;
  background: url(/img/arrowrightlong.svg) right top / 8rem auto no-repeat;
  line-height: 2.1rem;
}

button, #searchbrands select {
  background: transparent;
  border: 1px solid #f2f2f2; 
  color: #f2f2f2; 
  height: 2.66rem; 
  line-height: 2.66rem;
  padding-inline: 1.1rem;
  font-size: 1.33rem;
  font-family: 'Yanone Kaffeesatz'; 
  text-transform: uppercase;
  border-radius: 0;
  display: inline-block;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;

}
button.toggle_search {
  width: 2.66rem;
  color: transparent;
  white-space: nowrap;
  overflow: hidden;
  background: transparent url(/img/search.svg) center 45% / 1.06rem 1.06rem no-repeat;
}
button.toggle_menu {
  display: none;
  margin-left: 1.5rem;
  font-size: 1.73rem; 
  border-color: transparent;
  text-transform: none;
  background: transparent url(/img/menu.svg) left center / auto 2rem no-repeat;
  padding-left: 2.5rem;
}
body.menuopen button.toggle_menu {background: transparent url(/img/close.svg) left center / auto 2rem no-repeat;}
button.arrowright {
  padding-right: 4.25rem;
  background: transparent url(/img/arrow.svg) calc(100% - 0.7rem) center / 0.8rem auto no-repeat;
}

/* Input */

input {
  height: 2.66rem; 
  line-height: 2.66rem;
  border: 1px solid #f2f2f2; 
  display: inline-block;
  padding-inline: 0.7rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.25rem;
  min-width: 18.26rem;
}
input::placeholder {
  font-weight: 300;
  text-transform: uppercase;
}

/* Awaits */

.block.awaits {background: #3A3A3A; padding: 0; display: flex; overflow: hidden;}
.block.awaits > * {width: 50%;}
.block.awaits > div {display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative;}
.block.awaits > div span {color: #ECE8D6; font-size: clamp(0rem, 2.7vw, 2.66rem); font-family: 'Riborn'; margin-top: 1.2em;}
.block.awaits > div span span {color: #7B98A2;}
.block.awaits > div img {width: 58.5%;}
.block.awaits > ul {display: flex; position: relative; flex-wrap: wrap;}
.block.awaits > ul li {list-style: none; width: 50%; aspect-ratio: 1.1; position: relative;}
.block.awaits > ul li a {display: block; height: 100%;}
.block.awaits > ul li a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 100%); 
  width: 100%;
  height: 100%;
}
.block.awaits > ul li a img {width: 100%; height: 100%; object-fit: cover;}
.block.awaits > ul li a h3 {
  color: #F3F0E0; 
  position: absolute; 
  top: 85%; 
  z-index: 3; 
  width: 100%; 
  text-align: center;
  font-weight: 500;
  font-size: clamp(0rem, 2.7vw, 2rem);
  transform: translateY(-75%);
  text-transform: uppercase;
}
.block.awaits > ul li:nth-child(2),
.block.awaits > ul li:nth-child(3),
.block.awaits > ul li:nth-child(5),
.block.awaits > ul li:nth-child(6),
.block.awaits > ul li:nth-child(8),
.block.awaits > ul li:nth-child(9),
.block.awaits > ul li:nth-child(11),
.block.awaits > ul li:nth-child(12) {display: none;}

.externallink {background: url(/img/externallink.svg) calc(100% - 0.15rem) 65% / auto 0.93rem no-repeat; padding-right: 1.25rem;}



/* Follow along */

header .block.awaits {display: none;}
.followalong h3 {font-weight: normal; text-transform: uppercase; margin-block: 0 0.5rem; white-space: nowrap;}
.followalong a {display: inline-block; margin-right: 0.35rem}
.followalong a img {height: 2.2rem;}
header .followalong {display: none; padding: 0.5rem; margin-inline: 1.25rem; margin-top: 1rem;}
header .followalong h3 {margin-right: 1rem;}
header .followalong a {position: relative; bottom: 0.25rem; margin-right: 0.6rem;}
footer .followalong {display: block; position: absolute; left: 6.8rem; top: 8rem;}



/* Footer */

footer .subscribe, footer .afterfooter {background: #3A3A3A; padding-block: 3.06rem;}
footer .subscribe .container {display: flex; justify-content: center; gap: 2.5rem;}
footer .subscribe form {display: flex; margin-right: 3rem;}
footer .footer {padding-block: 3.66rem; background: #28515B; min-height: 20rem;}
footer .footer .container {display: flex; gap: 8rem; position: relative;}
footer .logo {display: flex; align-items: flex-start; gap: 1rem;}
footer .logo img:nth-child(1) {width: 3.86rem;}
footer .logo img:nth-child(2) {width: 9rem;}
footer .footer .container > div:nth-child(2) {flex-grow: 1;}
footer .footer div > ul {display: flex; font-size: 1.6rem; line-height: 1.6; justify-content: space-between;}
footer .footer div > ul li {list-style: none;}
footer .footer div > ul li li {font-weight: 300;}
footer .footer div > ul li ul {font-size: 1.333rem; margin-top: 1rem;}
footer .afterfooter {font-family: 'Barlow Condensed'; font-size: 1rem; font-weight: 300; padding-block: 1.25rem;}
footer .afterfooter ul {display: flex; gap: 2rem; justify-content: center;}
footer .afterfooter ul li {list-style: none;}



/* Media queries */

@media only screen and (max-width: 83rem) {
  html {font-size: 15px;}
  footer .footer div > ul {flex-wrap: wrap; justify-content: flex-start; gap: 4rem 5rem}
  footer .footer div > ul > li {min-width: 6rem; flex: 1;}
  footer .subscribe form {margin-right: 0;}
  button.toggle_menu {display: inline-block;}
  header .subscribe {display: none;}
  header nav {
    position: absolute;
    top: 100%;
    background: #28515B;
    left: 0;
    width: 100%;
    max-height: calc(100vh - 5.75rem);
    overflow: auto;
  }
  header nav > ul {
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-inline: 0; 
    padding-inline: min(5vw, 2rem); 
    gap: 0.5rem 4.2rem; 
    padding-block: 0.25rem 1.25rem;
    gap: 2rem 2.9rem;
    margin-left: 4.85rem;
  }
  header nav > ul > li:last-child {padding-bottom: 2rem;}
  header nav > ul > li > ul {opacity: 1; pointer-events: auto; margin-top: 0; position: relative; padding-top: 0.5rem; margin-left: 0; background: none;}
  header nav > ul > li > ul > li a {min-width: 7rem; padding-inline: 0;}
  header .search {margin-right: 0;}
  body.menuopen.searchopen header nav > ul {
    margin-top: 5.2rem;
  }
  body:not(.menuopen) header nav {display: none;}
  .cards > ul#brands {padding-top: 0;}
  .cards > ul, .cards > ul#brands {gap: 3rem;}
  .cards > ul.horizontal {gap: 3rem;}
  .cards > ul > li {width: calc(33.33% - 2rem);}
  .block.recent > .carousel {min-width: 0; max-width: 100%; width: calc(100% - 32rem);}
  .cards > ul.horizontal > li {width: 100%!important;}
  .block.profiles .cards > ul,
  .block.outfits .cards > ul {flex-wrap: wrap; gap: 3rem}
  .block.profiles .cards > ul > li,
  .block.outfits .cards > ul > li {width: calc(50% - 1.5rem);}
  body.home .singlecard + div.cards > ul > li:last-child {display: none;}
  body.home .block.profiles .cards > ul > li:last-child {display: none;}
  .block.single .twocols > div:nth-child(2) .ad {margin-inline: 0;}
  .block.intro.hasimage {min-height: 0rem;}
  .block.intro.hasimage > img:first-child {mask-image: linear-gradient(to left, rgba(240, 237, 224, 0.3) 0%, transparent);}
  .block.single.tags > *, .block.intro > * {max-width: 30rem;}
}
@media only screen and (max-width: 1200px) {
  .block.recent {flex-direction: column;}
  .block.recent > .carousel {width: 100%;}
  .singlecard {flex-direction: column; gap: 2.5rem; margin-bottom: 3.75rem;}
  .cards > ul.horizontal.small {padding-bottom: 2rem;}
  .cards > ul.horizontal.large > li a {flex-direction: column!important;}
  .cards > ul.horizontal.large > li a .img {width: 100%;}
}
@media only screen and (max-width: 1000px) {
  .cards > ul > li {width: calc(50% - 1.5rem);}
  .singlecard + div.cards > ul > li:nth-last-child(2) {display: none;}
}
@media only screen and (max-width: 800px) {
  footer .subscribe {padding-block: 4rem;}
  footer .footer {padding-block: 5rem;}
  footer .subscribe .container {flex-direction: column; gap: 1rem; padding-bottom: 1rem;}
  footer .footer .container {flex-direction: column; gap: 4rem;}
  header .search {margin-right: 0;}
  .block.awaits {flex-direction: column;}
  .block.awaits > div {aspect-ratio: 1.1;}
  .block.awaits > * {width: 100%;}
  .block.awaits > ul {width: calc(100% + 10vw); margin-inline: -5vw;;}
  .block.awaits > ul li a h3,
  .block.awaits > div span {font-size: 5vw;}
  .block {padding-inline: 5vw!important; margin-inline: -5vw!important; border-radius: 0;}
  .block:not(.cards) {margin-block: 0;}
  .block.ad {display: none;}
  body.profiles .block.ad {border-bottom: 3rem solid #dbd7ce;}
  .block.recent > .cards {padding-inline: 5vw!important;}
  .block.related .cards > ul,
  body.home .cards > ul {-ms-overflow-style: none; scrollbar-width: none;}
  .block.related .cards > ul::-webkit-scrollbar,
  body.home .cards > ul::-webkit-scrollbar {display: none;}
  .block.related .cards > ul,
  body.home .cards > ul {
    --padding-side: 5vw;  /* Change if gutter side every changes */
    overflow: auto; 
    margin-left: calc(var(--padding-side) * -1);
    width: calc(100% + var(--padding-side) * 2); 
    padding-inline: var(--padding-side); 
    scroll-snap-type: x mandatory;
    flex-wrap: nowrap;
  }
  .block.related .cards > ul,
  body.home .cards > ul,
  body.home .block.profiles .cards > ul {flex-wrap: nowrap;}
  .cards > ul > li {flex-shrink: 0; scroll-snap-align: center; }
  .block.quote > div {text-align: left;}
  .carousel ul li a > div {padding-inline: 13vw; padding-block: 2rem;}
  .carousel ul li a > div .section {font-size: 1.2rem; margin-bottom: 0.5rem;}
  .carousel ul li a > div p {display: none;}
  .carousel ul li a > div h3 {margin-bottom: 0.5rem; font-size: 2.13rem;}
  .carousel .prev, .carousel .next {bottom: 1.1rem; left: calc(5vw - 1.1rem); bottom: 50%; transform: translateY(50%);}
  .carousel .next {left: auto; right: calc(5vw - 1.1rem);}
  .block.intro h1, .block.single h1 {padding-top: 1rem;}
  dl {flex-direction: column;}
  dl > *:nth-child(1), dl > *:nth-child(2) {width: 100%;}
  dl > dd > p {margin-bottom: 0;}
  body.home .block.profiles .cards > ul > li {width: 24rem;}
  body.home .singlecard + div.cards > ul > li:nth-last-child(1),
  body.home .singlecard + div.cards > ul > li:nth-last-child(2) {display: block;}
  body.home .block.profiles .cards > ul > li:last-child {display: block;}
  .block {overflow: hidden;}
  ul.breadcrumbs {margin-block: 0;}
  footer .followalong {left: 19rem; top: 0rem;}
}
@media only screen and (max-width: 700px) {
  .cards > ul.horizontal > li a .img {min-width: 16rem;}
  .cards > ul.horizontal > li a .content .readmore {display: none;}
  .block.profiles .cards > ul,
  .block.outfits .cards > ul, .cards > ul, .cards > ul#brands {gap: 1.5rem}
  body:not(.home) .block.style .cards > ul > li,
  .block.profiles .cards > ul > li,
  .block.outfits .cards > ul > li {width: calc(50% - 0.75rem);}
}
@media only screen and (max-width: 600px) {
  header nav {background: #3a3a3a; padding-block: 1.5rem 0;}
  header .followalong {display: flex;}
  header .block.awaits {display: block;}
  footer .subscribe form {flex-direction: column; align-items: stretch; gap: 0.75rem;}
  footer .footer div > ul {gap: 4rem 2rem;}
  footer .footer div > ul > li {width: calc(33.33% - 1.5rem);}
  footer .afterfooter ul {justify-content: flex-start;}
  button.toggle_search,
  header > .container > div:last-child {display: none;}
  body.menuopen header > .container > div:last-child {display: block;}
  button.toggle_menu {overflow: hidden; padding-right: 0; width: 0; padding-left: 2rem;}
  body.menuopen header .search form {
    margin-top: 2.5rem; 
    padding-block: 0.9rem 1.5rem;  
    padding-inline: 5vw;
    display: flex; 
    position: absolute; 
    left: 0rem; 
    background: #28515B; 
    width: 100%;
  }
  body.menuopen header nav > ul {
    margin-top: 5.2rem;
  }
  header > .container > div:first-child {justify-content: space-between; flex-grow: 1;}
  header nav > ul {margin-inline: 0.25rem;}
  header nav > ul > li > a {font-size: 2.25rem;}
  header nav > ul > li > ul > li a {min-width: 11.75rem; font-size: 1.75rem;}
  .container {padding-inline: 5vw;}
  .cards > ul > li {width: calc(50% - 0.75rem);}
  .block.related .cards > ul > li,
  body.home .cards > ul > li {width: 12.1rem;}
  .block.related .cards > ul.large li,
  body.home .cards > ul.large li {width: 17rem!important;}
    .cards > ul.horizontal {gap: 1.75rem;}
  .cards > ul.horizontal > li a .img {min-width: 8.9rem; width: 8.9rem;}
  .cards > ul.horizontal > li a .content {padding: 0.75rem 1rem; width: 100%; height: auto; min-height: 0;}
  .cards > ul.horizontal > li a .section {margin-bottom: 0.25rem; font-size: 1.06rem;}
  .cards > ul.horizontal > li a .content .summary {display: none;}
  .cards > ul.horizontal > li a .content h3 {font-size: 1.6rem; margin-bottom: 0;}
  .cards > ul > li a .content {padding: 0.75rem 1rem;}
  .cards > ul > li a .section {margin-bottom: 0.25rem; font-size: 1.06rem;}
  .cards > ul > li a .content h3 {font-size: 1.6rem; margin-bottom: 0;}
  .cards > ul.horizontal > li a .content {min-height: 0!important;}
  .cards > ul > li a .content:has(.section) {min-height: 8.75rem;}
  h2.blocktitle {font-size: 2.13rem; margin-bottom: 1.5rem;}
  .cards > ul.horizontal > li a .content .readmore {display: block;}
  .cards > ul > li a .content .readmore {transform-origin: left bottom; transform: scale(0.85); bottom: 0.75rem}
  ul.wordslist li a {padding-inline: 3rem 2rem;}
  ul.wordslist li a h3::before {margin-left: -2rem; height: 1.5rem; margin-top: 0.25rem;}
  .cards > ul.large li a .content h3 {margin-bottom: 0.8rem;}
  .cards > ul > li a .content .summary {margin-block: 0.8rem 3.25rem;}
  .cards > ul > li a .content .summary p {font-size: 1rem;}
  .cards > ul > li a .content .readmore.right {right: 1rem; transform-origin: right bottom;}
  .block.single .twocols.keyinfo > div:nth-child(2) {padding: 2.33rem}
  .cards > ul.large.horizontal > li a .content {padding: 1.75rem 2rem;}
}
@media only screen and (max-width: 450px) {
  .block.single .twocols > div:nth-child(2) {max-width: 100%;}
  html {font-size: 3.34vw;}
}