/* -------- CSS VARIABLES -------- */
/* -------- MIXINS -------- */
/* -------- Universal Resets -------- */
* { padding: 0%; margin: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

/* -------- Gridlex correction -------- */
[class*=grid] { margin: 0; }

[class*=col] { padding: 0; }

/* -------- Utility Classes -------- */
.upcase { text-transform: uppercase; }

.lowcase { text-transform: lowercase; }

.uline { text-decoration: underline; }

.light, nav a { color: white; }

.dark { color: #3c3c3c; }

.small, .small p, .small ul, .small ol { font-size: 0.7rem; }

.serif { font-family: 'times new roman', serif; }

.left { text-align: left; }

.right { text-align: right; }

.center { text-align: center; }

.justified { text-align: justify; }

.block { display: block; }

.inline-block { display: inline-block; }

.hidden { display: none; }

/* Hide and Show depending on media */
.mob-show { display: none; }

.touch-show { display: none; }

.tablet-show { display: none; }

.xs-show { display: none; }

.sm-show { display: none; }

.md-show { display: none; }

.lg-show { display: none; }

@media screen and (max-width: 1280px) { .lg-show { display: block; } .lg-hide { display: none; } }

@media screen and (max-width: 1024px) { .md-show { display: block; } .md-hide { display: none; } }

@media screen and (max-width: 768px) { .sm-show { display: block; } .sm-hide { display: none; } }

@media screen and (max-width: 576px) { .xs-show { display: block; } .xs-hide { display: none; } }

.nomargin { margin: 0; }

.nopadding { padding: 0; }

.fixed { background-attachment: fixed; }

.relative { position: relative; }

.clearfix::after { content: ""; clear: both; display: table; }

/* -------- GENERAL LAYOUT -------- */
article#post > section:first-of-type { margin-top: 0; }

section { margin: 10vw 0; padding: 0 5vw; }

@media screen and (max-width: 768px) { section { padding: 0 10vw; } }

section:nth-last-of-type(2) { margin-bottom: 0; }

section.padded { padding: 0 10vw; }

section.padded > .padded { padding-bottom: 5vw; }

section.padded > .padded:last-child { padding-bottom: 0; }

section.margin { margin: 10vw 0; }

div.margin { margin: 5vw 0; }

body { font-family: "Work Sans", sans-serif; font-weight: 300; font-size: 1rem; color: #3c3c3c; }

/* ------- Headings -------- */
h2 { text-transform: uppercase; font-family: "Oswald", sans-serif; font-weight: 400; font-size: 2rem; letter-spacing: 2.8px; }

h3 { text-transform: uppercase; font-family: "Oswald", sans-serif; font-weight: 400; font-size: 2rem; letter-spacing: 1.5px; }

h5 { font-family: "Kristi", cursive; font-size: 1.5rem; letter-spacing: 3px; }

h6 { text-transform: uppercase; font-family: "Oswald", sans-serif; font-weight: 200; font-size: 0.8rem; letter-spacing: 2.8px; }

/* -------- PARAGRAHP -------- */
p, ul, ol { letter-spacing: 1.3px; font-size: 0.8rem; margin-bottom: 1rem; line-height: 1.5; }

p:last-of-type, ul:last-of-type, ol:last-of-type { margin-bottom: 0; }

p.small, ul.small, ol.small { margin-bottom: 0; }

h2.margin, h3.margin, h4.margin, h5.margin, h6.margin, p.margin, ul.margin, ol.margin, a.margin { margin: 5vw 0 3vw 0; }

h2.margin:last-child, h3.margin:last-child, h4.margin:last-child, h5.margin:last-child, h6.margin:last-child, p.margin:last-child, ul.margin:last-child, ol.margin:last-child, a.margin:last-child { margin-bottom: 0; }

h2.margin:first-child, h3.margin:first-child, h4.margin:first-child, h5.margin:first-child, h6.margin:first-child, p.margin:first-child, ul.margin:first-child, ol.margin:first-child, a.margin:first-child { margin-top: 0; }

h2.margin-bottom, h3.margin-bottom, h4.margin-bottom, h5.margin-bottom, h6.margin-bottom, p.margin-bottom, ul.margin-bottom, ol.margin-bottom, a.margin-bottom { margin-bottom: 5vw; }

h2.padded, h3.padded, h4.padded, h5.padded, h6.padded, p.padded, ul.padded, ol.padded, a.padded { padding: 5vw 0; }

h2.padded:last-child, h3.padded:last-child, h4.padded:last-child, h5.padded:last-child, h6.padded:last-child, p.padded:last-child, ul.padded:last-child, ol.padded:last-child, a.padded:last-child { padding-bottom: 0; }

h2.padded:first-child, h3.padded:first-child, h4.padded:first-child, h5.padded:first-child, h6.padded:first-child, p.padded:first-child, ul.padded:first-child, ol.padded:first-child, a.padded:first-child { padding-top: 0; }

svg { fill: #3c3c3c; width: unset; vertical-align: bottom; }

svg .small { letter-spacing: 1px; }

svg p, svg ul, svg ol { margin-bottom: 2px; }

/* Anchor Links */
a { text-decoration: none; color: inherit; }

a:hover { text-decoration: none; }

a.inline-block { padding: 1rem; }

a.block { display: block; }

/* Lists */
ul, ol { list-style-position: inside; }

ul:last-of-type, ol:last-of-type { margin-bottom: revert; }

/* Navs */
nav a { text-transform: uppercase; font-family: "Work Sans", sans-serif; font-size: 0.8rem; font-weight: 300; letter-spacing: 2.5px; padding: 1rem; scroll-behavior: smooth; }

img { max-width: 100%; }

.img-fit { -o-object-fit: cover; object-fit: cover; }

/* -------- HEADER ---------- */
@media screen and (max-width: 576px) { header .logo { padding: 1rem 0.8rem; text-align: left; } }

header a.logo { position: absolute; width: -webkit-max-content; width: -moz-max-content; width: max-content; top: 2.5rem; left: 50%; transform: translateX(-50%) translateY(-50%); }

@media screen and (max-width: 576px) { header a.logo { left: 2%; transform: translateX(0) translateY(-50%); } }

@media print { header a.logo { display: block; position: static; margin: auto; transform: none; } }

header .burger-menu .logo { text-align: center; }

header .burger-menu .logo svg { width: 90%; fill: black; }

header .burger-menu .logo svg .cls-1 { fill: rgba(0, 0, 0, 0); }

header.banner { min-height: 98vh; }

@media screen and (max-width: 768px) { header.banner { height: -webkit-fill-available; height: -moz-available; height: stretch; } }

@media print { header.banner { min-height: auto; } }

/* -------- FOOTER --------- */
footer { background-color: #F5F4F2; margin: 5vw 0 0 0; padding: 5vw 0 0 0; }

footer > div.padded { padding: 0 3vw; }

footer div.padded { padding: 3vw; }

footer nav a { color: #3c3c3c; display: inline-block; padding: 0 1vw; }

footer .social-icons { margin-top: 1.7rem; }

footer .logo { width: -webkit-max-content; width: -moz-max-content; width: max-content; }

footer .logo p, footer .logo ul, footer .logo ol { margin-top: 1rem; }

footer .byond-logo svg { width: 3rem; display: inline; margin-bottom: 1px; }

footer .byond-logo svg .cls-1 { fill: black; }

.byond-logo svg { width: 3rem; display: inline; margin-bottom: 1px; }

.byond-logo svg .cls-1 { fill: black; }

/* -------- Individual Classes -------- */
/* Logo */
.logo { text-transform: uppercase; font-family: "Lato", sans-serif; font-weight: 300; font-size: 1rem; letter-spacing: 4px; }

.logo svg { width: 322px; }

.logo.dark svg { fill: black; }

.logo.dark svg .cls-1 { fill: black; }

.logo.light svg, nav a.logo svg { fill: white; }

.logo.light svg .cls-1, nav a.logo svg .cls-1 { fill: white; }

.banner-center.logo { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); }

.banner-center.logo.light svg, nav a.logo svg { height: 20vmin; min-height: 80px; width: auto; }

.banner-center.logo.light svg .cls-1, nav a.logo svg .cls-1 { fill: rgba(0, 0, 0, 0); }

/* Signature Pili and Dano */
.signature { width: -webkit-max-content; width: -moz-max-content; width: max-content; margin-top: 1rem; position: relative; }

.signature.center { margin: auto; }

.signature img.signature { width: 12rem; min-height: auto; height: auto; }

.signature img.signature.dark { -webkit-filter: invert(100%); filter: invert(100%); }

.signature:before { content: '-'; color: white; position: absolute; top: 50%; left: -5px; transform: translateY(-50%); }

/* Social-icons */
.social-icons svg { fill: #3c3c3c; margin-bottom: -2px; }

.social-icons svg.tiktok, .social-icons svg.bmc { height: 20px; margin-bottom: 0; }

.social-icons svg.bmc path { fill: #3c3c3c; }

/* Button */
.button { padding: 1rem 0; display: inline-block; }

.button.mob-show { display: none; }

@media screen and (max-width: 768px) { .button.mob-show { display: inline-block; } }

.button:last-child { margin-bottom: 0; }

.button.dark { width: -webkit-max-content; width: -moz-max-content; width: max-content; padding: 0.5rem 1rem; background-color: black; color: white; border-radius: 6px; margin: 2rem 0; }

.button.dark:last-child { margin-bottom: 0; }

.button.center { margin-left: auto; margin-right: auto; }

/* Background Image */
.bg-image { background-size: cover; background-position: center; background-color: grey; background-repeat: no-repeat; -webkit-print-color-adjust: exact; }

.shadowed-box { border: 2px solid white; background-color: rgba(255, 255, 255, 0.35); text-shadow: 0px 0px 5px #3c3c3c; }

/* Banner */
.banner { min-height: 90vh; }

.banner .shadowed-box { margin-bottom: 1rem; }

.banner .shadowed-box:last-of-type { margin-bottom: 0; }

.banner .shadowed-box.padded { padding: 1rem; }

.banner .shadowed-box .padded { padding: 1rem; }

/* Text-Box */
.text-box { min-height: 70vh; }

/* About: Layout for split banner with text-box */
.grid-img-text-cycle .text-R { padding-left: 5vw; }

.grid-img-text-cycle .text-L { padding-right: 5vw; }

.about .bg-image { min-height: 35vw; }

.about .signature { width: auto; margin-top: 1rem; }

.about .touch-show { height: 60vh; width: 100%; }

.about .touch-show.signature { position: absolute; bottom: 0; left: 0; transform: translateY(110%); }

.about h3.margin { margin-top: 0; margin-bottom: 1rem; }

/* -------- POLAROIDS -------- */
/* FEATURED BLOCKS */
/* IMAGE TEXT GRID */
.image-text-grid img { height: 30vw; min-height: 40vh; box-shadow: 1px 3px 10px rgba(60, 60, 60, 0.34); }

.image-text-grid .container h3 { margin-bottom: 1rem; }

.image-text-grid .container p, .image-text-grid .container ul, .image-text-grid .container ol { margin-bottom: 0; }

.image-text-grid .container.padded { padding-top: 5vw; }

.image-text-grid .container .text-R.padded { padding-left: 3vw; }

.image-text-grid .container .text-L.padded { padding-right: 3vw; }

/* POLAROIDS */
.polaroid-grid { display: grid; margin: 1rem 0; }

.polaroid-grid.oneline { grid-template-rows: auto; grid-auto-rows: 0px; overflow-y: hidden; }

.polaroid-grid.oneline .polaroid-container { margin: 0 9px 9px 9px; }

.polaroid-grid[data-size="small"] { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 10px; }

.polaroid-grid.oneline[data-size="small"] { grid-gap: 0px; }

.polaroid-grid[data-size="medium"] { grid-template-columns: repeat(4, 1fr); gap: 15px 15px; }

.polaroid-grid.oneline[data-size="medium"] { grid-gap: 0px; }

.polaroid-grid[data-size="medium"] > .text-box { grid-row-end: span 2; }

@media screen and (max-width: 1024px) { .polaroid-grid[data-size="medium"] { grid-template-columns: repeat(3, 1fr); } .polaroid-grid[data-size="medium"] .polaroid-container:nth-child(4n) { display: none; } }

@media screen and (max-width: 768px) { .polaroid-grid[data-size="medium"] { grid-template-columns: repeat(2, 1fr); } .polaroid-grid[data-size="medium"] > .text-box { grid-row-end: span 1; } .polaroid-grid[data-size="medium"] .polaroid-container:nth-child(4n) { display: block; } }

@media screen and (max-width: 576px) { .polaroid-grid[data-size="medium"] { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); } }

.polaroid-grid[data-size="large"] { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px 20px; grid-template-rows: auto; }

@media screen and (max-width: 576px) { .polaroid-grid[data-size="large"] { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } }

.polaroid-grid h6.margin { margin-bottom: 1rem; }

.polaroid-grid .padded { padding-right: 1rem; }

.polaroid-grid .text-box { min-height: auto; }

.polaroid-container .number { position: absolute; bottom: 0; left: 0; transform: translateY(50%); font-size: 2.2rem; text-shadow: 0 0 16px #ffffff; }

.polaroid-container:hover .overlay { opacity: 0.8; }

.polaroid-container .polaroid-image { position: relative; text-shadow: 2px 2px 5px grey; padding-bottom: 120%; }

.polaroid-container .title { position: relative; margin: 0; padding: 1.5rem; }

.polaroid-container .title h3 { font-size: 1.5rem; line-height: 1.1; }

.polaroid-container .polaroid-text { padding: 1.5rem; padding-top: 0; }

.polaroid-container .polaroid-text h6.margin { margin-bottom: 1rem; }

.polaroid-container .polaroid-text .excerpt { padding: 5px 0rem 0rem 0rem; }

.polaroid-container .polaroid-text .excerpt p, .polaroid-container .polaroid-text .excerpt ul, .polaroid-container .polaroid-text .excerpt ol { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Featured-posts */
.featured-posts .bg-image { min-height: 20vw; padding-bottom: 120%; }

.featured-posts .number { position: absolute; top: 0; transform: translateY(-50%); font-size: 2rem; text-shadow: 0 0 16px #ffffff; }

.featured-posts .title { margin: 0; padding: 1rem 0.5rem; font-size: 1.5rem; }

.featured-posts h3 + div { padding: 0 2rem 2rem 2rem; }

.featured-posts h6.margin { margin-bottom: 1rem; }

.featured-posts p, .featured-posts ul, .featured-posts ol { padding-right: 1rem; display: -webkit-box; -webkit-line-clamp: 15; -webkit-box-orient: vertical; overflow: hidden; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }

.polaroid .relative { min-height: 7rem; }

/* Container and Overly */
.container { position: relative; }

.overlay { opacity: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #3c3c3c; color: white; }

.overlay p:first-of-type, .overlay ul:first-of-type, .overlay ol:first-of-type { padding: 0; font-size: 0.5rem; display: -webkit-box; -webkit-line-clamp: 15; -webkit-box-orient: vertical; overflow: hidden; }

.overlay p:not(:first-of-type), .overlay ul:not(:first-of-type), .overlay ol:not(:first-of-type) { display: none; }

.container:hover .overlay { opacity: 0.8; }

.box-shadow { box-shadow: 1px 3px 10px rgba(60, 60, 60, 0.34); }

/* ------- Postcard ------- */
.postcard-container { background-color: #F5F4F2; box-shadow: 15px 15px 3px #00000010; padding: 3rem; }

.postcard-container .postcard { min-height: 77vh; }

.postcard-container .postcard .text-block { color: white; padding: 4% 20% 4% 20%; }

.postcard-container .postcard .text-block h3 { font-size: 9rem; margin-bottom: 3rem; margin-left: -5px; letter-spacing: 0; line-height: 0.9; }

.postcard-container .postcard .text-block h3 span { display: block; font-family: "Lato", sans-serif; font-size: 2.5rem; line-height: 0.8; margin-bottom: -10px; margin-left: -1px; }

.postcard-container .postcard .text-block p, .postcard-container .postcard .text-block ul, .postcard-container .postcard .text-block ol { margin-bottom: 2rem; }

.postcard-container .postcard a { color: currentColor; font-family: "Lato", sans-serif; font-size: 1.5rem; background-color: rgba(255, 255, 255, 0.47); border-radius: 13px; border: none; display: block; width: -webkit-max-content; width: -moz-max-content; width: max-content; padding: 0.5rem 2rem; margin: auto; margin-top: 3rem; }

.postcard-container .postcard a:hover { background-color: #818181; }

.postcard-container .postcard .logo { position: absolute; bottom: 1rem; right: 1rem; }

.postcard-container .postcard .logo svg { height: 15vmin; min-height: 80px; width: auto; }

.postcard-container .postcard .logo svg .cls-1 { fill: rgba(0, 0, 0, 0); }

/* ----- Banner with thext on the work-with us page ----- */
.brand-statement { height: 30vmax; }

.brand-statement .container { color: white; position: absolute; top: 0; bottom: 0; left: 5%; width: 300px; padding-top: 20vh; padding-bottom: 5vh; display: flex; flex-direction: column; justify-content: space-between; }

.brand-statement .signature { margin: auto; margin-top: 1rem; }

.brand-statement .logo svg { width: auto; height: 20vmin; }

.brand-statement .logo svg .cls-1 { fill: rgba(0, 0, 0, 0); }

/* ------- GALLERY -------- */
.gallery { -moz-column-count: 4; column-count: 4; -moz-column-gap: 1rem; column-gap: 1rem; font-size: 0; }

.gallery img { margin-bottom: 1rem; }

@media screen and (max-width: 1024px) { .gallery { -moz-column-count: 3; column-count: 3; } }

@media screen and (max-width: 576px) { .gallery { -moz-column-count: 2; column-count: 2; } }

.cols[data-cols="2"] { -moz-column-count: 2; column-count: 2; -moz-column-gap: 4rem; column-gap: 4rem; -moz-column-fill: balance; column-fill: balance; }

.grid .img-fit.padded { margin: 6px; }

/* --------- BLOG-POSTS -------- */
/* special classes for blog posts */
.post-intro { margin-top: 3vw; margin-bottom: 3vw; padding-top: 5vw; padding-bottom: 5vw; background-color: #F5F4F2; display: flex; }

.post-intro + .post-block { margin-top: 3vw; }

.post-intro .title { flex: 1 1 40%; padding-right: 5rem; border-right: 1px solid black; }

.post-intro .text-wrap { flex: 1 1 60%; padding-left: 5rem; }

.post-intro .text-wrap p:first-child:first-letter, .post-intro .text-wrap ul:first-child:first-letter, .post-intro .text-wrap ol:first-child:first-letter { font-size: 6rem; float: left; line-height: 0.8; margin-left: -5px; padding-right: 2px; font-family: serif; }

@media screen and (max-width: 768px) { .post-intro .text-wrap { padding: 0; } }

@media screen and (max-width: 768px) { .post-intro { display: block; } .post-intro .title { border: none; } .post-intro .title:after { content: ""; display: block; width: 40%; border-bottom: 1px solid black; } .post-intro div { margin-top: 1rem; } }

.post-toc-button { position: -webkit-sticky; position: sticky; top: 50%; height: 0; margin-left: 3px; z-index: 12; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; cursor: pointer; font-size: 1.2rem; }

.toc-container { display: none; z-index: 10; position: fixed; top: 0; bottom: 0; left: 0; background-color: rgba(255, 255, 255, 0.9); }

.toc-container a { color: inherit; display: inline; padding: 0; }

.toc-container .toc-nav { width: 40vw; padding: 5% 2% 5% 8%; }

@media screen and (max-width: 1024px) { .toc-container .toc-nav { width: 100vw; } }

.toc-container .toc-list { margin: 0; }

.toc-container ol { counter-reset: item; }

.toc-container ol li { display: block; }

.toc-container ol li:before { content: counters(item, ".") ". "; counter-increment: item; }

.toc-container ol ol { padding-left: 1rem; }

.post-intro-md img { -o-object-fit: contain; object-fit: contain; height: 30vw; min-height: 40vw; }

.post-excerpt .top-left { padding: 10px; border-top: 1px solid #3c3c3c; border-left: 1px solid #3c3c3c; position: absolute; top: 0; left: 0; }

.post-excerpt .bottom-right { padding: 10px; border-bottom: 1px solid #3c3c3c; border-right: 1px solid #3c3c3c; position: absolute; bottom: 0; right: 0; }

.post-excerpt p, .post-excerpt ul, .post-excerpt ol { padding: 1rem; line-height: 1.4; }

.post-excerpt div:first-child { position: relative; }

.post-section h3 { margin-bottom: 1rem; }

.post-section img { height: 85vh; width: 100%; -o-object-fit: cover; object-fit: cover; }

.post-section a.thumbnails { display: block; }

.post-section .thumbnails.padded { padding: 0.5rem 0.5rem 0 0.5rem; }

.post-section .thumbnails .bg-image { padding-bottom: 100%; }

.post-section .post-element { margin-bottom: 2vw; }

.post-section .post-element:last-child { margin-bottom: 0; }

.post-section .journal h4, .post-section .journal h3 { display: inline-block; }

.post-section .journal .title-with-dropdown { display: block; position: relative; }

.post-section .journal .title-with-dropdown:after { content: '\21c3'; position: absolute; top: 50%; right: 0; color: white; display: inline-block; transform: translateY(-50%) translateX(0%); padding: 0.8rem; text-align: center; background-color: grey; border-radius: 5px; }

.post-section .journal .title-with-dropdown.active:after { content: '\21BE'; }

.post-section .journal .title-with-dropdown:hover { margin-left: 1rem; }

.post-section .journal .journal-element { margin: 2vw 0; }

.post-section .journal .journal-element .hidden p:first-of-type, .post-section .journal .journal-element .hidden ul:first-of-type, .post-section .journal .journal-element .hidden ol:first-of-type { display: block; }

.post-section .polaroid-grid { grid-template-columns: repeat(4, 1fr); }

@media screen and (max-width: 1280px) { .post-section .polaroid-grid { grid-template-columns: repeat(3, 1fr); } .post-section .polaroid-grid a:nth-child(n+4) { display: none; } }

@media screen and (max-width: 768px) { .post-section .polaroid-grid { grid-template-columns: repeat(2, 1fr); } .post-section .polaroid-grid a:nth-child(n+3) { display: none; } }

@media screen and (max-width: 576px) { .post-section .polaroid-grid { grid-template-columns: repeat(1, 1fr); } .post-section .polaroid-grid a:nth-child(-n+3) { display: block; } }

.post-block { margin: 5vw 0; }

.post-block h3 { font-size: 1.8rem; }

.post-block p a, .post-block ul a, .post-block ol a { text-decoration: underline; }

.post-block blockquote { margin: 0 1rem; padding: 0 1rem; position: relative; }

.post-block blockquote:before { content: '\201C'; position: absolute; left: 0; top: 0; font-size: 2rem; }

.post-block blockquote:after { content: '\201D'; position: absolute; right: 0; top: 0; font-size: 2rem; }

.post-block .grid-container { display: grid; grid-template-columns: auto 450px; grid-gap: 1rem 1rem; }

.post-block .grid-container.img-left { grid-template-columns: 450px auto; }

.post-block .grid-container.img-left .text_block { order: 2; }

.post-block .grid-container.img-left .img-block { order: 1; }

.post-block .grid-container .img-block { margin-top: 5px; max-width: 100%; }

.post-block .grid-container .img-gallery__slideshow_with_thumbnails { margin: 0 1.5rem; }

@media screen and (max-width: 1024px) { .post-block .grid-container, .post-block .grid-container.img-left { grid-template-columns: 100%; } }

.post-block-item { margin: 1rem 0; }

.post-block-item h2 { margin-bottom: 1rem; }

.post-block-item.text_block h2:before, .post-block-item.text_block h3:before, .post-block-item.img-text_block h2:before, .post-block-item.img-text_block h3:before { content: ""; clear: both; display: table; }

.post-block-item.text_block h2:not(:last-child), .post-block-item.text_block h3:not(:last-child), .post-block-item.img-text_block h2:not(:last-child), .post-block-item.img-text_block h3:not(:last-child) { margin-bottom: 1rem; }

.post-block-item.text_block p img, .post-block-item.text_block ul img, .post-block-item.text_block ol img, .post-block-item.img-text_block p img, .post-block-item.img-text_block ul img, .post-block-item.img-text_block ol img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; cursor: pointer; }

.post-block-item.text_block p img.force-contain, .post-block-item.text_block ul img.force-contain, .post-block-item.text_block ol img.force-contain, .post-block-item.img-text_block p img.force-contain, .post-block-item.img-text_block ul img.force-contain, .post-block-item.img-text_block ol img.force-contain { -o-object-fit: contain; object-fit: contain; }

.post-block-item.text_block .grid-container { display: grid; grid-gap: 1rem; }

.post-block-item.text_block .grid-container.img-left { grid-template-columns: 2fr 3fr; }

.post-block-item.text_block .grid-container.img-right { grid-template-columns: 3fr 2fr; }

.post-block-item.text_block .grid-container.img-right .image-container { order: 2; }

@media screen and (max-width: 768px) { .post-block-item.text_block .grid-container, .post-block-item.text_block .grid-container.img-left, .post-block-item.text_block .grid-container.img-right { grid-template-columns: 1fr; grid-gap: 1rem; } }

.post-block-item.text_block .img-wrap { position: relative; padding-left: 100%; padding-bottom: 100%; }

.post-block-item.text_block .img-caption { text-align: center; font-size: 0.6rem; letter-spacing: 1px; display: none; }

.post-block-item.img-text_block .grid-container { display: grid; grid-template-columns: 2fr 3fr; grid-gap: 0 1rem; }

.post-block-item.img-text_block .grid-container.img-right { grid-template-columns: 3fr 2fr; }

.post-block-item.img-text_block .grid-container.img-right .img-block { order: 3; }

.post-block-item.img-text_block .grid-container .img-block { padding-top: 5px; order: 1; }

.post-block-item.img-text_block .grid-container .text-block { order: 2; }

.post-block-item.img-text_block .grid-container .img-wrap { padding-left: 100%; padding-bottom: 100%; position: relative; }

.post-block-item.img-text_block .grid-container .img-wrap.square { padding-bottom: 100%; }

.post-block-item.img-text_block .grid-container .img-wrap.portrait { padding-bottom: 120%; }

.post-block-item.img-text_block .grid-container .img-wrap.landscape { padding-bottom: 56.25%; }

.post-block-item.img-text_block .grid-container .img-wrap img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

@media screen and (max-width: 1024px) { .post-block-item.img-text_block .grid-container { grid-template-columns: 1fr 1fr; } .post-block-item.img-text_block .grid-container.img-right { grid-template-columns: 1fr 1fr; } }

@media screen and (max-width: 768px) { .post-block-item.img-text_block .grid-container { grid-template-columns: 1fr; } .post-block-item.img-text_block .grid-container.img-right { grid-template-columns: 1fr; } .post-block-item.img-text_block .grid-container.img-right .img-block { order: 1; } }

.post-block-item table { width: 100%; border-spacing: 0 1rem; }

.post-block-item table tr td { vertical-align: top; padding: 5px; }

.post-block-item table tr th { text-align: left; padding: 5px; }

.post-block-item table ul { list-style-type: none; }

.post-block-item .table-wrap { overflow-x: scroll; }

/* -------- ACCORDION EFFECT IN COLLAPSABLE BLOCKS ------- */
.title-with-dropdown { display: block; position: relative; }

.title-with-dropdown:after { content: '\21c3'; position: absolute; top: 50%; right: 0; color: white; display: inline-block; transform: translateY(-50%); padding: 0.8rem; text-align: center; background-color: grey; border-radius: 5px; }

.title-with-dropdown.active:after { content: '\21BE'; }

.title-with-dropdown:hover { margin-left: 1rem; }

.accordion-container .accordion-wrapper { padding-left: 1rem; border-left: 1px solid black; }

/* ------- VIDEO BLOCK ------ */
.video_block { width: 100%; margin: auto; }

.video_block .video-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; }

.video_block .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.video_block + .video_block { margin-top: 1rem; }

/* ------- IMAGE GALLERIES -------- */
.img-gallery { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.img-gallery .prev, .img-gallery .next { font-size: 0.8rem; line-height: 1.5; position: absolute; top: 50%; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; cursor: pointer; margin-top: 10px; border-left: solid 1px black; height: 5rem; }

.img-gallery .prev:hover, .img-gallery .next:hover { text-align: right; }

.img-gallery .next { right: 0; transform: translate(120%, -50%); }

.img-gallery .prev { left: 0; transform: translate(-120%, -50%) rotate(180deg); }

@media screen and (max-width: 768px) { .img-gallery { padding: 1rem 0; } }

/* --- Collage --- */
.img-gallery__collage { margin: 1rem; -moz-column-count: 3; column-count: 3; -moz-column-gap: 1rem; column-gap: 1rem; line-height: 1; }

.img-gallery__collage img { margin-bottom: 1rem; }

/* --- Image with Accordion --- */
.img-gallery__collage-horizontal { display: flex; flex-wrap: nowrap; height: 350px; }

.img-gallery__collage-horizontal .img-container { flex: 1; position: relative; transition: flex 0.5s ease; }

.img-gallery__collage-horizontal .img-container:hover { flex: 3; transition: flex 0.5s linear; }

@media screen and (max-width: 576px) { .img-gallery__collage-horizontal .img-container:hover { flex: 10; } }

.img-gallery__collage-horizontal img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

.img-gallery__collage-horizontal .modal-gallery { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: none; }

/* --- Slideshow --- */
.img-gallery__slideshow { display: flex; flex-wrap: nowrap; overflow-x: scroll; -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; }

.img-gallery__slideshow .img-container { padding-left: 270px; padding-bottom: 480px; position: relative; scroll-snap-align: start; }

.img-gallery__slideshow img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

.img-gallery__slideshow::-webkit-scrollbar { height: 5px; }

.img-gallery__slideshow::-webkit-scrollbar-thumb { background: #818181; border-radius: 5px; }

.img-gallery__slideshow::-webkit-scrollbar-track { background: none; }

/* --- Slideshow in one image --- */
.img-gallery__slideshow_single_image .img-container { position: relative; height: 80vh; width: 100%; }

.img-gallery__slideshow_single_image img { width: 100%; height: 100%; display: none; -o-object-fit: contain; object-fit: contain; }

.img-gallery__slideshow_single_image img.active { display: block; }

@media screen and (max-width: 768px) { .img-gallery__slideshow_single_image img { height: 80vh; -o-object-fit: cover; object-fit: cover; } .img-gallery__slideshow_single_image img.force-contain { -o-object-fit: contain; object-fit: contain; } }

.img-gallery__slideshow_single_image .dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; font-size: 25px; cursor: pointer; }

.img-gallery__slideshow_single_image .dots .active { color: white; }

/* --- Slideshow with thumbnails --- */
.img-gallery__slideshow_with_thumbnails .modal-gallery .img-container { position: relative; }

.img-gallery__slideshow_with_thumbnails .img-top { display: block; width: 100%; height: 70vh; min-height: 400px; -o-object-fit: cover; object-fit: cover; margin-bottom: 3px; }

@media screen and (max-width: 768px) { .img-gallery__slideshow_with_thumbnails .img-top { height: 80vh; -o-object-fit: cover; object-fit: cover; } .img-gallery__slideshow_with_thumbnails .img-top.force-contain { -o-object-fit: contain; object-fit: contain; } }

.img-gallery__slideshow_with_thumbnails .thumbnails-container { display: flex; justify-content: center; position: relative; }

.img-gallery__slideshow_with_thumbnails .img-thumbnails { display: flex; flex-wrap: nowrap; overflow-x: scroll; -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; padding-bottom: 5px; }

.img-gallery__slideshow_with_thumbnails .img-thumbnails .img-container { position: relative; padding-right: 12vw; padding-bottom: 12vw; margin: 3px; sroll-snap-align: start; }

.img-gallery__slideshow_with_thumbnails .img-thumbnails .img-container:first-child { margin-left: 0; }

.img-gallery__slideshow_with_thumbnails .img-thumbnails .img-container:last-child { margin-right: 0; }

@media screen and (max-width: 1024px) { .img-gallery__slideshow_with_thumbnails .img-thumbnails .img-container { padding-right: 22vw; padding-bottom: 22vw; } }

@media screen and (max-width: 768px) { .img-gallery__slideshow_with_thumbnails .img-thumbnails .img-container { padding-right: 30vw; padding-bottom: 30vw; } }

.img-gallery__slideshow_with_thumbnails .img-thumbnails img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.5; }

.img-gallery__slideshow_with_thumbnails .img-thumbnails .active { opacity: 1; }

.img-gallery__slideshow_with_thumbnails .img-thumbnails::-webkit-scrollbar { height: 5px; -webkit-appearance: none; }

.img-gallery__slideshow_with_thumbnails .img-thumbnails::-webkit-scrollbar-thumb { background: #818181; border-radius: 5px; }

.img-gallery__slideshow_with_thumbnails .img-thumbnails::-webkit-scrollbar-track { background: none; }

/* --- Instagram Grid Layout --- */
.img-gallery__ig-grid { max-width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; grid-gap: 2px; }

.img-gallery__ig-grid .img-container { position: relative; padding-right: 100%; padding-bottom: 100%; overflow: hidden; }

.img-gallery__ig-grid img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

.img-gallery__ig-grid img:hover { -o-object-fit: cover; object-fit: cover; transform: scale(1.1); transition: transform cubic-bezier(0.4, 0, 0.2, 1) 450ms; }

@media screen and (max-width: 576px) { .img-gallery__ig-grid { max-width: 100%; } }

/* --- Modal Images --- */
.modal-gallery img { cursor: pointer; }

.modal-gallery__cover { cursor: pointer; display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 20; background-color: rgba(0, 0, 0, 0.6); }

.modal-gallery__cover:after { content: "x"; color: white; font-size: 40px; position: absolute; top: 5%; right: 5%; }

.modal-gallery__cover .img-container { display: flex; width: 100%; height: 100vh; justify-content: center; }

.modal-gallery__cover img { width: 80%; height: 80vh; -o-object-fit: contain; object-fit: contain; align-self: center; }

/* --- Image with draggable bar --- */
.cd-image-container { position: relative; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0em auto; }

.cd-image-container img { display: block; }

.cd-image-container > img { max-height: 600px; }

.cd-image-label { position: absolute; bottom: 0; right: 0; color: #ffffff; padding: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; opacity: 0; transform: translateY(20px); transition: transform 0.3s 0.7s, opacity 0.3s 0.7s; }

.cd-image-label.is-hidden { visibility: hidden; }

.is-visible .cd-image-label { opacity: 1; transform: translateY(0); }

.cd-resize-img { position: absolute; top: 0; left: 0; width: 0; height: 100%; overflow: hidden; /* Force Hardware Acceleration in WebKit */ transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.cd-resize-img img { position: absolute; left: 0; top: 0; display: block; height: 100%; width: auto; max-width: none; }

.cd-resize-img .cd-image-label { right: auto; left: 0; }

.is-visible .cd-resize-img { width: 50%; /* bounce in animation of the modified image */ -webkit-animation: cd-bounce-in 0.7s; animation: cd-bounce-in 0.7s; }

@-webkit-keyframes cd-bounce-in { 0% { width: 0; }
  60% { width: 55%; }
  100% { width: 50%; } }

@keyframes cd-bounce-in { 0% { width: 0; }
  60% { width: 55%; }
  100% { width: 50%; } }

.cd-handle { position: absolute; height: 44px; width: 44px; /* center the element */ left: 50%; top: 50%; margin-left: -22px; margin-top: -22px; border-radius: 50%; background: #dc717d url("/svg/cd-arrows.svg") no-repeat center center; cursor: move; box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); opacity: 0; transform: translate3d(0, 0, 0) scale(0); }

.cd-handle.draggable { /* change background color when element is active */ background-color: #445b7c; }

.is-visible .cd-handle { opacity: 1; transform: translate3d(0, 0, 0) scale(1); transition: transform 0.3s 0.7s, opacity 0s 0.7s; }

/* ----- -SINGLE IMAGE ------ */
.post-block-item .single-image img { display: block; width: 100%; max-width: 900px; margin: auto; }

.post-block-item.split-block .img-block { width: 100%; max-width: 600px; justify-self: center; }

.post-block-item.split-block .img-gallery__ig-grid { grid-template-columns: repeat(3, 1fr); }

/* ----- -SINGLE IMAGE ------ */
svg .small, svg .small p, svg .small ul, svg .small ol { font-size: 0.7rem; }

svg .title { font-weight: 500; }

@media screen and (max-width: 576px) { svg { max-width: 100%; } svg .small, svg .small p, svg .small ul, svg .small ol { font-size: 0.8rem; } }

#step-by-step .flow-chart { display: grid; grid-auto-rows: 1fr; grid-template-columns: auto; }

#step-by-step .flow-chart .flow-chart__block { width: 50%; display: grid; grid-template-columns: 100px auto; grid-gap: 1rem; }

@media screen and (max-width: 1024px) { #step-by-step .flow-chart .flow-chart__block { width: 100%; } }

#step-by-step .flow-chart .flow-chart__element { display: flex; flex-direction: column; min-height: 100px; }

#step-by-step .flow-chart .rectangle { border: 0.5px solid black; border-radius: 5px; text-align: center; padding: 1rem 0.5rem; background-color: inherit; }

#step-by-step .flow-chart .rectangle:hover { background-color: rgba(0, 0, 0, 0.3); }

#step-by-step .flow-chart .line { border-right: 0.5px solid black; flex-grow: 1; width: 20%; }

#step-by-step .flow-chart .flow-chart__text-block { padding-bottom: 1rem; }

#bmc-banner { margin-top: 3vw; margin-bottom: 3vw; padding-top: 3vw; padding-bottom: 3vw; background-color: #F5F4F2; }

@media screen and (max-width: 768px) { #bmc-banner { display: block; } #bmc-banner .title { border: none; } #bmc-banner .title:after { content: ""; display: block; width: 40%; border-bottom: 1px solid black; } #bmc-banner div { margin-top: 1rem; } }

#support-us .social-icons { margin-top: 2rem; text-align: center; }

.bali-map svg { width: 100%; }

.bali-map svg .regency:hover { fill: red !important; }

.bali-map svg #negative { fill: transparent !important; }

.bali-map svg > g:last-of-type { display: none; }

.bali-map text { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; }

div[class$="thumbnails"] div { cursor: pointer; }

div[class$="thumbnails"] div .thumbnails.padded { padding: 1rem 0.5rem 0 0.5rem; }

div[class$="thumbnails"] div:first-child .thumbnails.padded { padding-right: 0.75rem; padding-left: 0; }

div[class$="thumbnails"] div:nth-child(2) .thumbnails.padded { padding-right: 0.5rem; padding-left: 0.25rem; }

div[class$="thumbnails"] div:nth-child(3) .thumbnails.padded { padding-left: 0.5rem; padding-right: 0.25rem; }

div[class$="thumbnails"] div:last-child .thumbnails.padded { padding-right: 0; padding-left: 0.75rem; }

.tags .padded { padding: 0.5rem 0.5rem 0.5rem 0; }

.tags h4 { border-bottom: solid 1px; font-size: 0.8rem; }

.tags div:first-child p, .tags div:first-child ul, .tags div:first-child ol { -moz-column-count: 4; column-count: 4; }

.toc { position: relative; min-height: 4rem; padding-left: 2rem; }

.toc h4 { display: block; width: 4rem; transform: rotate(-90deg) translateY(-4rem); transform-origin: right top; border-bottom: solid 2px; position: absolute; top: 0; left: 0; }

.toc a { display: block; vertical-align: middle; padding: 0 0.2rem; }

.toc div { min-height: 4rem; vertical-align: bottom; }

.toc + div { position: relative; }

.toc + div .line-span { position: absolute; bottom: 0; right: 0; width: 3rem; border-bottom: solid 1px; padding: 1px; }

/* ------- POINTS OF INTEREST ------- */
section.links { margin-top: 3vw; margin-bottom: 3vw; padding-top: 1rem; padding-bottom: 1rem; background-color: #F5F4F2; }

.booking-platforms { display: grid; grid-auto-columns: 40px; grid-auto-rows: 1rem; grid-auto-flow: column; justify-content: space-between; padding: inherit; }

.booking-platforms a { display: block; width: 100%; background-color: #3c3c3c; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }

.booking-platforms #tripadvisor { -webkit-mask-image: url("/assets/logos/tripadvisor.png"); mask-image: url("/assets/logos/tripadvisor.png"); }

.booking-platforms #booking { -webkit-mask-image: url("/assets/logos/bookingcom.png"); mask-image: url("/assets/logos/bookingcom.png"); }

.booking-platforms #instagram { -webkit-mask-image: url("/assets/logos/instagram.svg"); mask-image: url("/assets/logos/instagram.svg"); }

.booking-platforms #website { -webkit-mask-image: url("/assets/logos/website.png"); mask-image: url("/assets/logos/website.png"); }

.booking-platforms #airbnb { -webkit-mask-image: url("/assets/logos/airbnb.png"); mask-image: url("/assets/logos/airbnb.png"); }

/* -------- FORMS -------- */
form input, form textarea { width: 100%; margin: 0.5rem 0; letter-spacing: 1.3px; padding: 0.5rem; border: none; border-bottom: 1px solid gainsboro; resize: none; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 0.8rem; color: #818181; -webkit-appearance: none; }

form input::-moz-placeholder, form textarea::-moz-placeholder { color: currentColor; }

form input:-ms-input-placeholder, form textarea:-ms-input-placeholder { color: currentColor; }

form input::-ms-input-placeholder, form textarea::-ms-input-placeholder { color: currentColor; }

form input::placeholder, form textarea::placeholder { color: currentColor; }

form input:focus, form textarea:focus { outline: none; }

textarea { min-height: 4rem; }

form label { display: block; color: #3c3c3c; font-weight: bold; }

form input[type="submit"] { background-color: white; border: 1px solid gainsboro; border-radius: 13px; font-family: "Work Sans", sans-serif; font-size: 1.5rem; }

form input[type="submit"]:hover { background-color: #818181; color: white; }

.arrow { position: relative; margin: auto; width: 25px; height: 25px; }

.arrow svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.arrow #icon-arrow-small { padding: 5px; fill: white; z-index: 1; left: 0px; }

.arrow #icon-round-shape { fill: #c4bcc5; }

.arrow[data-point="up"][data-animation="bounce"] #icon-arrow-small { -webkit-animation: bounce 2s infinite; animation: bounce 2s infinite; }

.arrow[data-point="left"] #icon-arrow-small { transform: rotate(180deg); }

.arrow-container { width: -webkit-max-content; width: -moz-max-content; width: max-content; text-align: center; margin: auto; margin-top: 2rem; }

.arrow-container p, .arrow-container ul, .arrow-container ol { font-size: 0.6rem; }

@-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: rotate(-90deg) translate(0); }
  40% { transform: rotate(-90deg) translateX(6px); }
  60% { transform: rotate(-90deg) translateX(5px); } }

@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: rotate(-90deg) translate(0); }
  40% { transform: rotate(-90deg) translateX(6px); }
  60% { transform: rotate(-90deg) translateX(5px); } }

/* MEDIA KIT */
#clients .polaroid-grid { grid-template-columns: repeat(3, 1fr); gap: 15px 15px; }

@media screen and (max-width: 576px) { #clients .polaroid-grid { grid-template-columns: 1fr; } }

#clients h2:last-of-type { margin-top: 3rem; margin-bottom: 2rem; }

#clients .gallery { -moz-column-count: unset; column-count: unset; -moz-column-gap: unset; column-gap: unset; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px 15px; }

#clients .gallery img { display: block; margin-bottom: 0; width: 100%; }

@media screen and (max-width: 768px) { #clients .gallery { grid-template-columns: repeat(2, 1fr); gap: 10px 10px; } }

#clients .number { top: 0; bottom: unset; transform: translateY(-50%); }

#clients .button { display: block; width: -webkit-max-content; width: -moz-max-content; width: max-content; padding: 0.5rem; background-color: white; border: none; margin: auto; text-decoration: underline; font-size: 0.6rem; text-transform: lowercase; }

/* EXPLORE */
#explore { max-width: 600px; display: flex; flex-direction: column; height: 100vh; overflow-y: hidden; justify-content: space-between; background-size: cover; margin: auto; padding: 1rem 1rem 0.5rem 1rem; }

#explore .logo { text-align: center; display: block; }

#explore #brand-logo { margin-top: -1rem; margin-bottom: -0rem; }

#explore #brand-logo svg { width: 80px; }

#explore #brand-logo .cls-1 { fill: transparent; }

#explore nav ul { list-style-type: none; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: auto; width: -webkit-max-content; width: -moz-max-content; width: max-content; }

#explore nav ul li { align-self: stretch; border: 1px solid white; border-radius: 9px; }

#explore nav ul li:not(:last-of-type) { margin-bottom: 1rem; }

#explore nav ul li a { font-size: 2.0rem; font-family: "Oswald", sans-serif; font-weight: 400; letter-spacing: 1px; display: inline-block; padding: 0px 0.5rem; width: -webkit-max-content; width: -moz-max-content; width: max-content; }

#explore .social-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); justify-content: space-between; padding: 0 1rem; }

#explore .social-links a { justify-self: center; position: relative; text-transform: lowercase; letter-spacing: 1px; font-size: 0.6rem; padding: 5px 0; display: block; }

#explore .social-links a svg { position: absolute; bottom: -5px; height: 1rem; left: 50%; width: 3rem; transform: translateX(-50%); }

#explore .social-links svg { fill: white; }

#explore .arrow-container { margin-top: 0; display: inline-block; margin-right: 17px; margin-left: 7px; }

#explore .arrow-container .arrow { width: 18px; }

#explore #byond { width: -webkit-max-content; width: -moz-max-content; width: max-content; font-size: 0.5rem; color: white; transform: rotate(90deg) translate(-12px, 1px); transform-origin: right; position: absolute; bottom: 5%; right: 96%; }

#explore .byond-logo svg { width: 2.2rem; }

#explore .byond-logo svg .cls-1 { fill: white; }

/* --------- FREEBIE PAGE --------- */
#freebie .grid-container { grid-template-columns: 1fr; display: grid; }

#freebie a { cursor: pointer; }

#freebie .flex-container { display: flex; }

#freebie h3 { line-height: 1; margin-bottom: 2rem; color: #EDEDED; width: -webkit-min-content; width: -moz-min-content; width: min-content; font-size: 9rem; -webkit-text-fill-color: transparent; -webkit-text-stroke-color: #ededed; -webkit-text-stroke-width: 1px; text-shadow: 3px 3px rgba(237, 237, 237, 0.8); position: relative; }

#freebie h3:after { content: url("/assets/logos/coconutsandcoordinates-type-logo-one-line-black.svg"); position: absolute; left: 0px; bottom: -2px; width: 8rem; }

@media screen and (max-width: 1024px) { #freebie h3 { font-size: 8rem; } }

@media screen and (max-width: 576px) { #freebie h3 { font-size: 26vw; } }

#freebie img { display: block; position: relative; height: auto; max-height: 98vh; -o-object-fit: contain; object-fit: contain; }

#freebie .text-box { width: -webkit-min-content; width: -moz-min-content; width: min-content; min-height: unset; align-self: center; }

@media screen and (max-width: 768px) { #freebie .text-box { width: auto; } }

#freebie .image-box .button { position: absolute; width: -webkit-max-content; width: -moz-max-content; width: max-content; margin: 0; top: 50%; transform: translateY(-50%); }

@media screen and (max-width: 576px) { #freebie .image-box .button { border: solid 1px white; background-color: transparent; top: 70%; } }

#freebie .title { position: absolute; left: 0; right: 0; top: 1rem; text-align: center; z-index: 2; }

#freebie .title h3 { margin: 0; width: auto; display: inline-block; }

@media screen and (max-width: 768px) { #freebie .title { position: static; } }

#freebie .link { position: absolute; top: 50%; transform: translateY(-50%); }

#freebie .link p, #freebie .link ul, #freebie .link ol { letter-spacing: 0px; }

#freebie .link .arrow-container { margin-top: 0; display: inline-block; vertical-align: middle; }

#freebie .link .arrow-container .arrow { width: 18px; }

@media screen and (max-width: 768px) { #freebie .link { top: 30%; } #freebie .link .arrow-container { display: block; } #freebie .link p, #freebie .link ul, #freebie .link ol { width: -webkit-min-content; width: -moz-min-content; width: min-content; text-align: center; } }

@media screen and (max-width: 576px) { #freebie .link { top: 40%; } #freebie .link p, #freebie .link ul, #freebie .link ol { width: -webkit-min-content; width: -moz-min-content; width: min-content; font-size: 0.6rem; } }

#freebie .button { width: -webkit-max-content; width: -moz-max-content; width: max-content; padding: 0.5rem 1rem; background-color: black; color: white; border-radius: 6px; margin: 2rem 0; }

#freebie .grid-container .slide { grid-column: 1 / span 1; grid-row: 1 / span 1; display: grid; position: relative; }

#freebie .grid-container .slide .image-box { align-self: center; }

#freebie .grid-container .slide:nth-child(2n+1) { grid-template-columns: 2fr 3fr; }

#freebie .grid-container .slide:nth-child(2n+1) .image-box { justify-self: end; }

#freebie .grid-container .slide:nth-child(2n+1) .image-box .button { right: 0; transform: translateX(100%); }

#freebie .grid-container .slide:nth-child(2n+1) .link { right: 10px; }

@media screen and (max-width: 1024px) { #freebie .grid-container .slide:nth-child(2n+1) .link { right: 0; } }

#freebie .grid-container .slide:nth-child(2n+1) .text-box { margin-left: 1rem; margin-right: 2rem; }

@media screen and (max-width: 768px) { #freebie .grid-container .slide:nth-child(2n+1) { grid-template-columns: 1fr; } #freebie .grid-container .slide:nth-child(2n+1) .image-box { justify-self: start; } }

@media screen and (max-width: 576px) { #freebie .grid-container .slide:nth-child(2n+1) .link { right: -12px; } #freebie .grid-container .slide:nth-child(2n+1) .image-box { padding-right: 10vw; } #freebie .grid-container .slide:nth-child(2n+1) .image-box .button { right: unset; left: 47%; transform: translate(-50%, 50%); } }

#freebie .grid-container .slide:nth-child(2) { grid-template-columns: 3fr 2fr; opacity: 0%; }

#freebie .grid-container .slide:nth-child(2) .image-box .button { left: 0; transform: translateX(-100%); }

#freebie .grid-container .slide:nth-child(2) .image-box img { left: 100vw; }

#freebie .grid-container .slide:nth-child(2) .text-box { justify-self: end; margin-right: 1rem; margin-left: 2rem; }

#freebie .grid-container .slide:nth-child(2) .link { left: 10px; }

@media screen and (max-width: 1024px) { #freebie .grid-container .slide:nth-child(2) .link { left: 0; } }

@media screen and (max-width: 768px) { #freebie .grid-container .slide:nth-child(2) { grid-template-columns: 1fr; } #freebie .grid-container .slide:nth-child(2) .image-box { justify-self: end; order: 1; } #freebie .grid-container .slide:nth-child(2) .text-box { order: 2; } }

@media screen and (max-width: 576px) { #freebie .grid-container .slide:nth-child(2) .link { left: -12px; } #freebie .grid-container .slide:nth-child(2) .image-box { padding-left: 10vw; } #freebie .grid-container .slide:nth-child(2) .image-box .button { left: unset; right: 46%; transform: translate(50%, 50%); } }

#freebie .logos { margin-top: 1rem; }

#freebie .logos svg { width: 3rem; }

#freebie .logos div { display: inline-block; vertical-align: middle; }

#freebie .logo-cc { border-right: 1px solid black; }

#freebie .logo-cc svg { fill: #000; }

#freebie .logo-cc svg .cls-1 { fill: transparent; }

#freebie .logo-byond svg .cls-1 { fill: black; }

#freebie .inactive { pointer-events: none; }

/* Banner-text-position class for the text on top of the banners */
.banner-text-position { position: absolute; line-height: 1; font-size: 14vw; color: white; bottom: -1vw; left: -0.9vw; padding: 0; }

.banner-text-position span { display: inline-block; position: relative; }

.banner-text-position span .last-word { white-space: nowrap; }

.banner-text-position span .line { position: absolute; top: 0vw; left: 0; right: 0; border-top: 3px solid white; }

.banner-text-position:after { content: " "; position: absolute; top: -0.6vw; right: 1.1vw; width: 40%; }

.banner-text-position.left-text { TRANSFORM: ROTATE(-90deg) translateX(33%) translateY(-115%); bottom: 0; left: 0; }

.banner-text-position.left-text:after { left: -16%; top: 18vw; }

.banner-text-position.right-text { TRANSFORM: ROTATE(-90deg) translateX(33%) translateY(120%); bottom: 0; left: initial; right: 0; }

.banner-text-position.right-text:after { left: 1.1vw; right: initial; }

@media print { .banner-text-position { position: static; } }

/* HAMBURGER MENU */
/* Burger Button */
.burger-button { display: block; position: fixed; top: 2.5rem; right: 7vh; transform: translateY(-50%); z-index: 12; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-mix-blend-mode: overlay; -moz-mix-blend-mode: overlay; mix-blend-mode: overlay; }

.burger-button span { display: block; width: 30px; height: 4px; margin-bottom: 5px; position: relative; border-radius: 3px; transition: transform 1s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; background: #c4bcc5; transform-origin: 4px 0px; }

.burger-button span:first-child { transform-origin: 0% 0%; }

.burger-button span:last-child { transform-origin: 0% 100%; }

.burger-button.active span { opacity: 1; }

.burger-button.active span:first-child { transform: rotate(45deg) translate(-2px, -1px); }

.burger-button.active span:nth-child(2) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); }

.burger-button.active span:nth-child(3) { transform: rotate(-45deg) translate(-1px, -1px); }

/* Burger menu */
.burger-menu { display: flex; position: fixed; top: 0; left: -15.5rem; bottom: 0; width: 10rem; background-color: white; padding: 5px; box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1); z-index: 8; transition: 1s; justify-content: space-between; flex-direction: column; }

.burger-menu.active { left: 0; }

.burger-menu nav { padding-top: 20vh; }

.burger-menu nav ul, .burger-menu nav li { list-style-type: none; }

.burger-menu a { text-decoration: none; font-size: 13px; font-weight: 300; color: #000; display: block; padding: 5px 15px; white-space: nowrap; }

.burger-menu a:hover { padding-left: 10px; }

/* ALPACR LOGO STYLES */
#alpacr-logo { display: none; }

.editor-link { display: none; }

.editor-link a { padding: 1rem; margin: 5px; text-transform: uppercase; display: inline-block; }

.cms-editor-active .editor-link { display: block; }

@media (max-width: 1024px) { .tablet-show { display: block; } .tablet-hide { display: none; } .about .bg-image { min-height: 70vh; } .featured-posts.padded { padding: 2vw; } .featured-posts.padded .bg-image { padding-bottom: 120%; } .featured-posts.padded:nth-child(odd) { padding-left: 0; } .featured-posts.padded:nth-child(even) { padding-right: 0; } .featured-posts.padded p, .featured-posts.padded ul, .featured-posts.padded ol { padding-right: 0rem; -webkit-line-clamp: none; } .featured-posts.padded .excerpt p, .featured-posts.padded .excerpt ul, .featured-posts.padded .excerpt ol { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } footer nav.inline-block a { display: block; } }

@media (max-width: 768px) { h2 { font-size: 6vw; } h3, .post-block h3 { font-size: 4vw; } h4 { font-size: 0.8rem; } .mob-hide { display: none !important; } .mob-show { display: block; } .tablet-center { text-align: center; } div.padded + div.padded { padding-top: 0; } .about .bg-image { min-height: 60vh; } .grid-img-text-cycle .text-L, .grid-img-text-cycle .text-R { padding: 5vw 0 0 0; } .featured-posts .title { font-size: 6vw; } .featured-posts.padded { padding: 5vw 0; } .featured-posts.padded:nth-of-type(n) { padding: 5vw 10vw; } .featured-posts.padded:first-of-type { padding-top: 0; } .postcard-container .postcard { min-height: 100vh; } .postcard-container .postcard .logo { bottom: 0; right: 0; } .post-section { padding-top: 5vw; } .post-section:first-of-type { padding-top: 0; } footer nav.inline-block a { display: block; } footer nav a { padding: 1rem; } footer .logo { width: auto; margin-bottom: 1rem; } }

@media (max-width: 576px) { div.margin { margin: 10vw 0; } .logo svg { width: 250px; } section.mobile-nopadding { padding: 0; } .postcard-container { padding: 0; box-shadow: none; } .postcard-container .postcard { padding: 15vh 8vh; } .postcard-container .postcard .text-block { padding: 0; margin-bottom: 5rem; } .postcard-container .postcard .text-block h3 { font-size: 5rem; margin-bottom: 1rem; letter-spacing: -5px; } .postcard-container .postcard .text-block h3 span { font-size: 2rem; margin-bottom: -3px; letter-spacing: 0; } .postcard-container .postcard a { margin-top: 7rem; } .postcard-container .postcard .logo { display: block; text-align: center; left: 0; right: 0; } .mobile-center { text-align: center; } .brand-statement .container { left: 5%; right: 5%; width: unset; padding-bottom: 0; } .banner .shadowed-box .padded { padding: 0.5rem 0.5rem; } .burger-button { right: 2vh; } .cols[data-cols="2"] { -moz-column-count: 1; column-count: 1; } .cols img.signature { position: static; transform: unset; } .toc { padding-bottom: 1rem; } .tags div:first-child p, .tags div:first-child ul, .tags div:first-child ol { -moz-column-count: 3; column-count: 3; } }

@supports (-webkit-touch-callout: none) { /* CSS specific to iOS devices */
  .fixed { background-attachment: scroll; }
  .burger-button { mix-blend-mode: unset; }
  .touch-hide { display: none; }
  .touch-show { display: block; }
  .postcard { -ms-scroll-snap-type: y proximity; scroll-snap-type: y proximity; } }