/* 
Theme Name: Alpaca
Version: 1
Author: SOFTGEN Marcin Chumieja
Author URI: mailto:marcin.chumieja@gmail.com
*/

/* Variables */

/*
RWD breakpoints:
(max-width: 429px)
(min-width: 430px) and (max-width: 781px)
(min-width: 782px) and (max-width: 1024px)
(min-width: 1025px)
*/

:root {
	--color-bg: #f4f4f4;
	--color-accent: #bababa;
	--default-font-size: 1.8rem;
	--d100-m50: 100px;
	--d150-m100: 150px;
}
@media (min-width: 1025px) {
	:root {
		--side-margin: 50px;
		--box-padding-top: 50px;
		--box-padding-bottom: 150px;
	}
}
@media (min-width: 782px) and (max-width: 1024px) {
	:root {
		--side-margin: 40px;
		--box-padding-top: 40px;
		--box-padding-bottom: 150px;
	}
}
@media (min-width: 430px) and (max-width: 781px) {
	:root {
		--side-margin: 30px;
		--box-padding-top: 30px;
		--box-padding-bottom: 100px;
		--d100-m50: 50px;
		--d150-m100: 100px;
	}
}
@media (max-width: 429px) {
	:root {
		--side-margin: 20px;
		--box-padding-top: 30px;
		--box-padding-bottom: 100px;
		--d100-m50: 50px;
		--d150-m100: 100px;
	}
}

/* Basic reset */

html {
	background: #fff;
	font-size: 62.5%; /* 10px = 0.625rem = 62.5%*/
	font-family: archia, sans-serif;
	color: #000;
	line-height: 1.2;
}

body {
	background: #fff;
	font-size: var(--default-font-size);
	padding: 0;
	margin: 0;
}
figure {
	margin: 0;
	padding: 0;
}
img {
	max-width: 100%;
	height: auto;
}
a {
	color: inherit;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
.links-no-underline a {
	text-decoration: none;
}
.links-no-underline a:hover {
	text-decoration: underline;
}
h1 {
	font-size: 12rem;
}
h1,h2,h3,h4,h5,h6 {
	font-weight: 400;
	margin: 0;
}

/*
	HEADER AREA
*/


/* Fixed header & navigation */

body:not(.admin-bar) {
	--wp-admin--admin-bar--height: 0px;
}
html {
    scroll-padding-top: calc(var(--wp-admin--admin-bar--height) + 100px);
}
.fixed-header {
	padding: 40px var(--side-margin);
    box-sizing: border-box;
    position: fixed;
    width: 100%;
	z-index: 9997;
	top: var(--wp-admin--admin-bar--height);
}
.main-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.main-navigation ul li a {
	text-decoration: none;
	color: #000;
}
.main-navigation ul li a:hover {
	text-decoration: underline;
}

.hamburger {
	display: block;
	background: none;
	border: none;
	width: 41px;
	height: 28px;
	border-top: 4px solid black;
	border-bottom: 4px solid black;
	padding: 0;
	cursor: pointer;
	outline: none;
}
.hamburger::after,
.main-navigation .close:before,
.main-navigation .close:after {
	content: "";
	width: 100%;
	display: block;
	height: 4px;
	background: black;
}
.main-navigation .close {
	position: absolute;
	top: 52px;
	left: var(--side-margin);
	margin-right: -5px;
	width: 40px;
	border: 0;
	padding: 0;
	background: 0;
	cursor: pointer;
}
.main-navigation .close:before {
	transform: rotate(45deg);
	transform-origin: center;
}
.main-navigation .close:after {
	transform: rotate(315deg);
	transform-origin: center;
	margin-top: -4px;
}
@media (min-width: 1025px) {
	.main-navigation {
		display: block !important;
		padding-right: 140px;
	}
	.site-logo {
		position: fixed;
		z-index: 9998;
	}
	.site-header .hamburger,
	.main-navigation .close {
		display: none;
	}
	.main-navigation ul li {
		font-size: 1.6rem;
		display: inline-block;
		padding: 0;
		margin-right: 40px;
		margin-bottom: 15px;
	}
}
@media (max-width: 1024px) {
	.fixed-header {
		width: auto;
	}
	.main-navigation {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: white;
		z-index: 9999;
		color: white;
	}
	.site-logo {
		position: absolute;
		z-index: 9996;
	}
	.menu-menu-glowne-container {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.main-navigation ul {
		text-align: center;
	}
	.main-navigation ul li {
		line-height: 2em;
		margin: 1em var(--side-margin);
	}
}
@media (max-width: 781px) {
	.main-navigation {
	}
}

@media (max-width: 600px) {
	.admin-bar .fixed-header {
		top: 0;
		padding-top: calc(40px + var(--wp-admin--admin-bar--height));
	}
}


/* Logo */

.site-logo {
	font-size: 3.9rem;
	font-weight: 500;
	line-height: 1;
	text-align: right;
	top: calc(40px + var(--wp-admin--admin-bar--height));
	right: var(--side-margin);
	margin: 0;
}
.alpaca {
	color: #000;
	text-decoration: none;
}

/* Page header */

.page-header {
	background: var(--color-bg);
	padding-top: 100px;
}
.page-title {
	font-size: 9rem;
	font-size: calc(max(7.8rem, min(9rem, calc(1.369863vw + 6.397rem))));
	font-weight: 400;
	margin: 0;
	line-height: 1;
}
.title-130 .page-title {
	font-size: 13rem;
	font-size: calc(max(7.8rem, min(13rem, calc(5.936073vw + 1.721rem))));
}
.title-110 .page-title {
	font-size: 11rem;
	font-size: calc(max(7.8rem, min(11rem, calc(3.652968vw + 4.059rem))));
}
.page-header .row {
	display: flex;
	align-items: flex-end;
	padding: 200px var(--side-margin) 90px;
	column-gap: 50px;
}
.page-tags {
	list-style: none;
	margin: 20px 0 0 0;
	padding: 0;
	color: var(--color-accent);
	font-size: 2.8rem;
	font-size: calc(max(2.4rem, min(3.4rem, calc(1.141553vw + 1.231rem))));
}
.page-tags li {
	display: inline;
}
.page-tags li:after {
	content: ', ';
}
.page-tags li:last-child:after {
	content: '';
}
.page-tags a {
	text-decoration: none;
}
.page-lead {
	font-size: 3.4rem;
	font-size: calc(max(2.4rem, min(3.4rem, calc(1.141553vw + 1.231rem))));
	font-weight: 400;
	color: var(--color-accent);
	margin: 0;
}
.page-lead a.more {
	color: black;
	text-decoration: none;
	font-size: var(--default-font-size);
}
.page-lead a.more:hover {
	text-decoration: underline;
}

@media (min-width: 1121px) {
	.page-header .row > :first-child {
		width: 50%;
	}
	.page-lead {
		max-width: 50%;
	}
}
@media (max-width: 1120px) {
	.page-header .row {
		display: block;
		padding-top: 100px;
		padding-bottom: 50px;
	}
	.page-header .row > :first-child {
		max-width: 880px;
	}
	.page-lead {
		margin-top: 20px;
	}
	.page-lead a.more {
		display: block;
		margin-top: 20px;
	}
}

@media (max-width: 1024px) {
	.page-title {
		font-size: 7.8rem !important;
		font-size: calc(max(5.4rem, min(7.8rem, calc(3.614458vw + 4.099rem)))) !important;
	}
}
@media (max-width: 429px) {
	.page-title {
		font-size: 5.6rem !important;
		font-size: calc(max(3.6rem, min(5.6rem, calc(20vw + -2.8rem)))) !important;
	}
}

/*
	Blog archive
*/

.blog .page-title {
	font-size: 13rem;
	font-size: calc(max(7.8rem, min(13rem, calc(5.936073vw + 1.721rem))));
}

.blog-posts {
	margin: 80px var(--side-margin) 0;
}
.blog-posts.masonry {
	opacity: 0;
}
.blog-posts.masonry.ready {
	opacity: 1;
}

.blog {
	--before-pagination: 80px;
}

.blog-post-thumbnail {
	overflow: hidden;
	aspect-ratio: 2/1;
}
.blog-post-thumbnail a {
	display: block;
	position: relative;
	height: 100%;
}
.blog-post-thumbnail video,
.blog-post-thumbnail img {
	object-fit: cover;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
}
.blog-post-thumbnail .secondary {
	z-index: 999;
}
.blog-post-thumbnail:not(:hover) .secondary {
	opacity: 0;
}

.blog-post-title {
	font-size: 2.8rem;
	font-weight: 400;
	color: #bababa;
	margin: 25px 0 20px;
}
.blog-post-title a {
	text-decoration: none;
}
.blog-post-title a:hover {
	text-decoration: underline;
}

.blog-post-excerpt {
	font-size: var(--default-font-size);
	margin: 20px 0;
}
.blog-post-read {
	color: #bababa;
	font-size: 2.2rem;
}

@media (max-width: 1024px) {
	.blog-post-title {
		font-size: 2.4rem;
	}
	.blog-post-excerpt {
		font-size: 1.6rem;
	}
}
@media (max-width: 781px) {
	.blog {
		--before-pagination: 70px;
	}
	.blog-posts {
		margin-top: 40px;
	}
	.blog-post-thumbnail {
		margin: 0 calc(0px - var(--side-margin));
	}
}

/*
	Single post
*/

.back-link {
	color: #bababa;
	font-size: 2.4rem;
	float: left;
	margin-left: var(--side-margin);
}
.post-header {
	background: #f4f4f4;
	padding-top: 300px;
}
.post-thumbnail {
	overflow: hidden;
}
.post-thumbnail img {
	width: 100%;
	object-fit: cover;
	display: block;
}
.post-title {
	font-size: 7rem;
	font-size: calc(max(3.6rem, min(7rem, calc(2.297297vw + 2.635rem))));
	font-weight: 400;
	max-width: calc(100% / 2 + 390px);
	margin: 0 var(--side-margin) 0 auto;
}
.post-lead {
	color: #bababa;
	font-size: 3.4rem;
	font-size: calc(max(2.4rem, min(3.4rem, calc(1.141553vw + 1.231rem))));
	max-width: calc(100% / 2 + 390px);
	margin: 20px var(--side-margin) 50px auto;
}
.post-header .post-thumbnail {
	margin: var(--d100-m50) 0;
}
.post-header .post-thumbnail img {
	max-height: 600px;
}
.post-content {
	max-width: 880px;
	margin: 0 auto;
	font-size: 2rem;
	line-height: 1.7;
}
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
	line-height: 1.2;
	color: #bababa;
	font-weight: 400;
	margin: 60px 0 40px;
}
.post-content h2 {
	font-size: 4.6rem;
}
.post-content h3 {
	font-size: 4.2rem;
}
.post-content h4 {
	font-size: 3.8rem;
}
.post-content h5 {
	font-size: 3.4rem;
}
.post-content h6 {
	font-size: 3.0rem;
}
.post-content p {
	margin: 1.7em 0;
}

.post-navigation {
	color: #bababa;
	font-size: var(--default-font-size);
	margin: 100px var(--side-margin);
	display: flex;
	flex-wrap: wrap;
}
.post-navigation a {
	font-size: 2.4rem;
	margin-top: 10px;
	font-weight: 300;
}
.post-navigation p {
	margin: 0 0 10px 0;
}
.post-navigation .prev-post {
	width: calc(50% - 75px);
	flex-basis: 420px;
}
.post-navigation .next-post {
	width: calc(50% - 75px);
	max-width: 420px;
	text-align: right;
	margin-left: auto;
}

.post-content .has-background {
	padding: 40px;
	margin: 60px 0;
}
.post-content .wp-block-image {
	margin: 60px 0 70px;
}
.post-content .has-background > div p {
	margin: 20px 0;
}
.post-content .has-background > div p:first-child {
	margin-top: 0;
}
.post-content .has-background > div p:last-child {
	margin-bottom: 0;
}
.post-content .post-meta {
	color: #bababa;
	margin-top: 60px;
}

@media (max-width: 1200px) {
	.back-link {
		float: none;
		max-width: calc(100% / 2 + 390px);
		margin: -60px var(--side-margin) 30px auto;
		height: 30px;
	}
}
@media (max-width: 1024px) {
	.back-link {
		margin-left: var(--side-margin);
	}
	.post-title {
		max-width: 100%;
		margin: 0 var(--side-margin);
	}
	.post-lead {
		max-width: 100%;
		margin: 20px var(--side-margin);
	}
	.post-header {
		padding-top: 200px;
	}
	.post-content {
		max-width: 100%;
		margin: 0 var(--side-margin);
		font-size: 1.6rem;
	}
	.post-content h2,
	.post-content h3,
	.post-content h4,
	.post-content h5,
	.post-content h6 {
		margin: 40px 0 20px;
	}
	.post-content h2 {
		font-size: 2.4rem;
	}
	.post-content h3 {
		font-size: 2.4rem;
	}
	.post-content h4 {
		font-size: 2.4rem;
	}
	.post-content h5 {
		font-size: 2.4rem;
	}
	.post-content h6 {
		font-size: 2.4rem;
	}
	.post-content p {
		margin: 1.5em 0;
	}
	.post-navigation {
		font-size: 1.6rem;
	}
	.post-navigation a {
		font-size: var(--default-font-size);
	}
}
@media (max-width: 781px) {
	.back-link {
		display: none;
	}
	.post-content .has-background {
		margin: 40px 0;
	}
	.post-navigation .prev-post,
	.post-navigation .next-post {
		clear: both;
		width: calc(100% - 2 * var(--side-margin));
	}
	.post-navigation .next-post {
		margin-top: 50px;
	}
	.post-content .post-meta {
		line-height: 1.3;
		margin-top: 40px;
	}
}

/*
	Single Page
*/

/* color accent */

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6,
.page-content a {
	color: var(--color-accent);
}

/* default font-sizes & margins */

.page-content {
	font-size: var(--default-font-size);
}

.page-content h2 {
	font-size: 6.6rem;
	font-size: calc(max(4.6rem, min(6.6rem, calc(2.283105vw + 2.262rem))));
	max-width: 880px;
	margin-bottom: 50px;
}
.page-content h3 {
	font-size: 5.6rem;
	font-size: calc(max(4.2rem, min(5.6rem, calc(1.598174vw + 2.563rem))));
	margin-bottom: 40px;
}
.page-content h6 {
	font-size: 2.7rem;
	margin-bottom: 30px;
}
.page-content p + h6 {
	margin-top: 30px;
}

@media (max-width: 1024px) {
	.page-content h2 {
		font-size: 4.6rem;
		font-size: calc(max(3.6rem, min(4.6rem, calc(1.655629vw + 2.905rem))));
		margin-bottom: 40px;
	}
	.page-content h3 {
		font-size: 4.2rem;
		font-size: calc(max(3.6rem, min(4.2rem, calc(0.993377vw + 3.183rem))));
		margin-bottom: 30px;
	}
}
@media (max-width: 781px) {
	.page-content h6 {
		margin-bottom: 20px;
	}
	.page-content p + h6 {
		margin-top: 20px;
	}
}

.page-content video {
	display: block;
}

/* default paddings */

.page-content > div:not(.wp-block-spacer) {
	padding-inline: var(--side-margin);
}
.page-content > .wp-block-group {
	padding-top: var(--box-padding-top);
	padding-bottom: var(--box-padding-bottom);
}

/* margin reset */

.page-content .wp-block-image {
	margin: 0;
}
.page-content .wp-block-image img {
	width: 100%;
}
.page-content .wp-block-column > :first-child,
.page-content .wp-block-group__inner-container > :first-child,
.page-content .wp-block-spacer + p {
	margin-top: 0;
}
.page-content .wp-block-column > :last-child,
.page-content .wp-block-group__inner-container > :last-child {
	margin-bottom: 0;
}

/*
	Columns
*/

.page-content .wp-block-columns {
	margin: 0;
	gap: 40px;
	/* max-width: 1800px; */
}
.page-content h2 + .wp-block-columns,
.page-content .wp-block-columns + .wp-block-columns {
	margin-top: 50px;
}
@media (min-width: 782px) and (max-width: 1024px) {
	.page-content .wp-block-columns {
		flex-wrap: wrap !important;
	}
	.page-content .wp-block-columns >.wp-block-column {
	    flex-basis: 45% !important;
		flex-grow: 1 !important;
	}
	/*
	.page-content .wp-block-columns >.wp-block-column:nth-child(odd):last-child {
		flex-grow: 0;
	}
	*/
}
@media (max-width: 781px) {
	.page-content .wp-block-columns {
		gap: 40px;
	}
	.page-content h2 + .wp-block-columns,
	.page-content .wp-block-columns + .wp-block-columns {
		margin-top: 40px;
	}
	.mobile-column-reverse {
		flex-direction: column-reverse;
	}
}

/* alternative solution */

.columns-2,
.columns-3,
.columns-4 {
	margin-top: 50px;
	gap: 50px 40px;
	align-items: flex-start !important; 
}
.columns-2 > * {
	flex-basis: 45%;
	flex-grow: 1;
}
.columns-3 > * {
	flex-basis: 30%;
	flex-grow: 1;
}
.columns-4 > * {
	flex-basis: 22%;
	flex-grow: 1;
}
@media (max-width: 1024px) {
	.columns-2 > *,
	.columns-3 > *,
	.columns-4 > * {
		flex-basis: 45%;
	}
}
@media (max-width: 781px) {
	.columns-2 > *,
	.columns-3 > *,
	.columns-4 > * {
		flex-basis: 100%;
	}
	.columns-2,
	.columns-3,
	.columns-4 {
		margin-top: 40px;
		row-gap: 40px;
	}
}

/* text-columns */

.text-columns {
	max-width: 1800px;
	columns: 275px 4;
	column-gap: 40px;
}
html .text-columns h6 {
    color: inherit;
    font-size: inherit;
    font-weight: 500;
    margin-block: 1em;
}
.text-columns p,
.text-columns .wp-block-group {
	page-break-inside: avoid;
	break-inside: avoid;
}
@media (max-width: 781px) {
	.text-columns {
		columns: 1;
	}
}

.page-content .text-columns .wp-block-group + .wp-block-group h6 {
    margin-block: 1em;
}

/*
	Block Cover
*/

.page-content .wp-block-cover {
	padding: var(--box-padding-top) var(--side-margin) 100px;
}
.page-content .wp-block-cover h2 {
	color: var(--color-accent);
}
.page-content .wp-block-cover a {
	color: black;
}
.page-content .wp-block-cover.blend-colors .has-background-dim {
	opacity: 1;
	mix-blend-mode: multiply;
}
.page-content .wp-block-cover .wp-block-cover__inner-container :first-child {
	margin-top: 0;
}
.page-content .wp-block-cover .wp-block-cover__inner-container :last-child {
	margin-bottom: 0;
}

.page-content .wp-block-cover.text-bottom-left {
	align-items: flex-end;
	justify-content: flex-start;
}
.page-content .wp-block-cover.text-bottom-left .wp-block-cover__inner-container {
	max-width: 420px;
}
.page-content .wp-block-cover.text-bottom-left .wp-block-cover__inner-container p {
	margin: 0;
}

@media (max-width: 1024px) {
	.page-content .wp-block-cover.text-bottom-left .wp-block-cover__inner-container h2 {
		margin-bottom: 20px;
	}
}
@media (max-width: 781px) {
	.page-content .wp-block-cover {
		align-items: start;
	}
	.page-content .wp-block-cover .wp-block-cover__inner-container {
		max-width: 100%;
	}
	.page-content .wp-block-cover.text-bottom-left {
		display: block;
		padding: 0 !important;
		min-height: unset !important;
	}
	.page-content .wp-block-cover.text-bottom-left .wp-block-cover__image-background {
		position: static;
		display: block;
	}
	.page-content .wp-block-cover.text-bottom-left .wp-block-cover__inner-container {
		margin: 20px var(--side-margin) 100px;
		width: auto;
	}
}

/* Cover */

.page-content > .wp-block-group.cover {
	padding: 0;
}
.cover .wp-block-group__inner-container {
    position: relative;
}
.cover .wp-block-group__inner-container figure + div {
    position: absolute;
    bottom: 0;
    margin-inline: var(--side-margin);
    padding-bottom: var(--box-padding-top);
    background: none;
    box-sizing: content-box;
}
.cover .wp-block-group__inner-container figure + div.align-to-right {
    right: 0;
}

/*
	Portfolio
*/

.post-type-archive-case-study .page-title {
    font-size: 13rem;
    font-size: calc(max(7.8rem, min(13rem, calc(5.936073vw + 1.721rem))));
}
.portfolio-h2 {
	font-size: 6.6rem;
	font-size: calc(max(4.8rem, min(6.6rem, calc(2.054795vw + 2.696rem))));
	margin: 30px var(--side-margin) var(--d100-m50);
}
.portfolio-tags ul {
	padding: 30px var(--side-margin) 20px;
	margin: 0;
	overflow-x: scroll;
	white-space: nowrap;
}
.portfolio-tags ul {
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.portfolio-tags ul::-webkit-scrollbar {
	display: none;
}
.portfolio-tags li {
	list-style: none;
	display: inline;
	margin-right: 30px;
	line-height: 40px;
}
.portfolio-tags li a {
	text-decoration: none;
}
.portfolio-tags li a:hover {
	color: var(--color-accent);
}
.portfolio-tags li.current a {
	color: var(--color-accent);
}

.portfolio-grid {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}
.portfolio-grid .portfolio-item {
	width: 33%;
	min-width: 360px;
	flex-grow: 1;
}
.portfolio-item-thumbnail {
	aspect-ratio: 950 / 800;
	width: 100%;
	overflow: hidden;
}
.portfolio-item-thumbnail a {
	display: block;
	position: relative;
	height: 100%;
}
.portfolio-item-thumbnail video,
.portfolio-item-thumbnail img {
	object-fit: cover;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
}
.portfolio-item-thumbnail .secondary {
	z-index: 999;
}
.portfolio-item-thumbnail:not(:hover) .secondary {
	opacity: 0;
}

.portfolio-item-title {
	font-size: 3.6rem;
	font-size: calc(max(2.6rem, min(3.6rem, calc(0.892857vw + 1.904rem))));
	color: black;
}
.home .portfolio-item-title {
	font-size: calc(max(3rem, min(3.6rem, calc(0.535714vw + 2.582rem))));
}
.portfolio-item-title a {
	text-decoration: none;
}
.portfolio-item-info {
	padding: 20px var(--side-margin) 60px;
}
.post-type-archive-case-study {
	--before-pagination: 60px;
}
.portfolio-item-tags {
	color: var(--color-accent);
	font-size: var(--default-font-size);
}
.portfolio-item-tags a {
    text-decoration: none;
}
.portfolio-more {
	background: var(--color-bg);
	padding: var(--box-padding-top) var(--side-margin) var(--box-padding-bottom);
	font-size: calc(max(3.6rem, min(5.4rem, calc(1.216216vw + 3.089rem))));
}
.portfolio-more a {
	color: var(--color-accent);
}

.home .portfolio-grid .portfolio-item {
	width: 50%;
}
.home .portfolio-item-info {
	padding: 20px var(--side-margin) 70px;
}

@media (min-width: 737px) {
	.home .portfolio-grid .portfolio-item:first-child {
		width: 100%;
	}
	.home .portfolio-grid .portfolio-item:first-child .portfolio-item-thumbnail {
		aspect-ratio: 1900 / 900;
	}
}
@media (max-width: 1024px) {
	.portfolio-h2 {
		font-size: 4.8rem;
		font-size: calc(max(3.6rem, min(4.8rem, calc(4.918033vw + -0.236rem))));
	}
}
@media (max-width: 781px) {
	.portfolio-h2 {
		margin-top: 20px;
	}
	.portfolio-item-info,
	.home .portfolio-item-info {
		padding-bottom: 50px;
	}
	.post-type-archive-case-study {
		--before-pagination: 50px;
	}
	.portfolio-more {
		margin-top: 0;
	}
}
@media (max-width: 429px) {
	.portfolio-grid .portfolio-item,
	.home .portfolio-grid .portfolio-item {
		width: 100%;
		min-width: unset;
	}
}

/*
	Case Study
*/

.single-case-study .page-header {
	background: white;
}

/*
	Contact Form
*/

.wp-block-contact-form-7-contact-form-selector {
	max-width: 880px;
	margin: 0 auto;
	padding: 0;
}
.wp-block-contact-form-7-contact-form-selector p {
	position: relative;
	margin: 0 0 30px 0;
}
.wp-block-contact-form-7-contact-form-selector input[type="text"],
.wp-block-contact-form-7-contact-form-selector input[type="email"],
.wp-block-contact-form-7-contact-form-selector textarea {
	width: 100%;
	font-size: 1.4rem;
	margin-top: 15px;
	line-height: 4rem;
	padding: 0 10px;
	box-sizing: border-box;
	outline: none;
	border: 2px solid white;
	border-radius: 0;
	background-color: white;
}
.wp-block-contact-form-7-contact-form-selector input[type="text"]:focus,
.wp-block-contact-form-7-contact-form-selector input[type="email"]:focus,
.wp-block-contact-form-7-contact-form-selector textarea:focus {
	border-color: var(--color-accent)
}
.wp-block-contact-form-7-contact-form-selector textarea {
	height: 180px;
}
.wp-block-contact-form-7-contact-form-selector label {
	font-size: 1.6rem;
}
.wp-block-contact-form-7-contact-form-selector input[type="submit"] {
	border: 0;
	background: none;
	float: right;
	font-size: 3.6rem;
	font-size: calc(max(2.4rem, min(3.6rem, calc(1.071429vw + 1.564rem))));
	color: var(--color-accent);
	text-decoration: underline;
	outline-color: var(--color-accent);
	font-weight: normal;
	padding: 0;
}
.wp-block-contact-form-7-contact-form-selector input[type="submit"]:hover {
	text-decoration: none;
	cursor: pointer;
}
.wp-block-contact-form-7-contact-form-selector .disclaimer {
	font-size: 1.2rem;
	margin-top: 4rem;
}
.wp-block-contact-form-7-contact-form-selector .disclaimer + p {
	margin-bottom: 0;
}

.wp-block-contact-form-7-contact-form-selector .wpcf7-form-control-wrap {
	position: static;
}
.wp-block-contact-form-7-contact-form-selector .wpcf7-not-valid-tip {
    position: absolute;
    right: 0;
    top: 3px;
	font-size: 1.3rem;
	color: #ff6666;
}
.wp-block-contact-form-7-contact-form-selector .wpcf7-form-control.wpcf7-not-valid {
	border: 2px solid #ffcccc;
}
.wp-block-contact-form-7-contact-form-selector form .wpcf7-response-output {
    font-size: 1.2rem;
    border: 0;
    margin: 50px 0 0;
    padding: 20px 20px;
}
.wp-block-contact-form-7-contact-form-selector form.sent .wpcf7-response-output {
	background-color: #edfbf3;
}
.wp-block-contact-form-7-contact-form-selector form:not(.sent) .wpcf7-response-output {
    background-color: #ffcccc;
}

@media (max-width: 781px) {
	.wp-block-contact-form-7-contact-form-selector .wpcf7-not-valid-tip {
		position: static;
		margin-top: 10px;
	}
	.wp-block-contact-form-7-contact-form-selector {
		padding: 0;
	}
}

/*
	Animations
*/

.site {
	width: 100%;
	overflow-x: hidden;
}
.site > *:not(header) {
	opacity: 0;
	transition: opacity 0.1s ease-out;
}
.loaded .site > *:not(header) {
	opacity: 1;
	transition-duration: 0.3s;
}

.animate,
.post-content > *,
.page-content h2,
.page-content h2 + p,
.page-content h3,
.page-content :not(.is-layout-flex) h6,
.page-content :not(.is-layout-flex) h6 ~ p,
.page-content p:first-child,
.page-content .wp-block-column,
.page-content .wp-block-group .wp-block-group:not(.is-layout-flex),
.page-content .wp-block-cover__inner-container > *,
.page-content img,
.page-content figcaption,
.page-content iframe,
.page-content video,
.page-content ul,
.page-content form {
	opacity: 0.001;
	transform: translateY(50px);
	transition: transform 0.25s ease-out, opacity 0.4s ease-out;
}

.animated,
.page-content .wp-block-column h2,
.page-content .wp-block-column h3 {
	opacity: 1 !important;
	transform: translateY(0) !important;
}
.animate .animate,
.animated .animated,
.dont-animate {
	opacity: unset !important;
	transform: unset !important;
	transition: unset !important;
}

@media (max-width: 1024px) {
	.main-navigation {
	    top: 100%;
	    height: 0;
	    overflow: hidden;
		display: block;
	    opacity: 0;
	    transition: all 0.25s ease-out, opacity 0.4s ease-out;
	}
	.main-navigation.show {
		opacity: 1;
    	top: 0;
    	height: 100%;
	}
	.main-navigation ul li,
	.main-navigation .close {
		opacity: 0;
		transform: translateY(50px);
		transition: transform 0.25s ease-out, opacity 0.4s ease-out;
	}
	.main-navigation.show ul li,
	.main-navigation.show .close {
		opacity: 1;
		transform: translateY(0);
	}
}
@media (min-width: 1025px) {
	.first-load .main-navigation ul li {
		opacity: 0;
		transform: translateY(50px);
		transition: transform 0.25s ease-out, opacity 0.4s ease-out;
	}
	.first-load .main-navigation.loaded ul li {
		opacity: 1;
		transform: translateY(0);
	}
}

.main-navigation {
	--transition-delay: 0.4s;
	--transition-interval: 0.1s;
}

	.main-navigation ul li:nth-child(1) {
		transition-delay: calc(var(--transition-delay) + 0 * var(--transition-interval));	
	}
	.main-navigation ul li:nth-child(2) {
		transition-delay: calc(var(--transition-delay) + 1 * var(--transition-interval));	
	}
	.main-navigation ul li:nth-child(3) {
		transition-delay: calc(var(--transition-delay) + 2 * var(--transition-interval));	
	}
	.main-navigation ul li:nth-child(4) {
		transition-delay: calc(var(--transition-delay) + 3 * var(--transition-interval));	
	}
	.main-navigation ul li:nth-child(5) {
		transition-delay: calc(var(--transition-delay) + 4 * var(--transition-interval));	
	}
	.main-navigation ul li:nth-child(6) {
		transition-delay: calc(var(--transition-delay) + 5 * var(--transition-interval));	
	}
	.main-navigation ul li:nth-child(7) {
		transition-delay: calc(var(--transition-delay) + 6 * var(--transition-interval));	
	}
	.main-navigation ul li:nth-child(8) {
		transition-delay: calc(var(--transition-delay) + 7 * var(--transition-interval));	
	}
	.main-navigation ul li:nth-child(9) {
		transition-delay: calc(var(--transition-delay) + 8 * var(--transition-interval));	
	}
	.main-navigation .close {
		transition-delay: calc(var(--transition-delay) + 9 * var(--transition-interval));	
	}


/*
	Modyfiers
*/

/* colors */

.bg-accent h1,
.bg-accent h2,
.bg-accent h3,
.bg-accent h4,
.bg-accent h5,
.bg-accent h6,
.page-content .bg-accent a {
	color: white;
}
.bg-silverlight {
	background: #f6f6f5;
}
.bg-black {
	background: black;
	color: white;
}
.bg-light {
	background: var(--color-bg);
}
.bg-light h6 {
	color: black;
}
.bg-accent {
	background: var(--color-accent);
	color: black
}
.color-accent {
	color: var(--color-accent);
}
.color-white {
	color: white !important;
}
.color-black {
	color: black !important;
}
.links-color-inherit a {
	color: inherit !important;
}

/* watermark */

.wp-block-group.bg-watermark,
.wp-block-group.has-watermark {
    position: relative;
    overflow: hidden;
}
.bg-watermark > * > *,
.wp-block-group.has-watermark > * > * {
    position: relative;
    z-index: 1;
}
.wp-block-group.bg-watermark > * > :first-child,
.wp-block-group.has-watermark > * > .watermark {
    position: absolute;
    z-index: 0;
	top: 0;
	left: 0;
}

/* paddings & margins */

.padding-top-0 {
	padding-top: 0 !important;
}
.padding-bottom-0 {
	padding-bottom: 0 !important;
}
.margin-bottom-0 {
	margin-bottom: 0 !important;
}
.margin-0 {
	margin: 0 !important;
}
.padding-0 {
	padding: 0 !important;
}
.gap-0 {
	gap: 0 !important;
}

.margin-bottom-30_20 {
	margin-bottom: 30px !important;
}
.margin-bottom-30_20 + * {
	margin-top: 0 !important;
}

@media (max-width: 1024px) {
	.margin-bottom-30_20 {
		margin-bottom: 20px !important;
	}
}

@media (max-width: 781px) {
	.mobile-gap-1em {
		gap: 1em !important;
	}
	.mobile-gap-0 {
		gap: 0 !important;
	}
}
@media (min-width: 782px) {
	.row-gap-80 {
		row-gap: 80px;
	}
}

/* max-width */

.full-width {
	max-width: 100% !important;
}

@media (min-width: 782px) {
	.half-width {
		max-width: 50% !important;
		box-sizing: border-box;
	}
	.half-width.align-to-right {
		padding-left: 20px;
	}
	.half-width:not(.align-to-right) {
		padding-right: 20px;
	}
}

.max-width-1800 {
    max-width: 1800px !important;
}
.max-width-1340 {
    max-width: 1340px !important;
}
.max-width-880 {
    max-width: 880px !important;
}
.max-width-420 {
    max-width: 420px !important;
}

@media (max-width: 1024px) {
	.max-width-880 {
		max-width: unset !important;
	}
}

/* alignment */

.text-center {
	text-align: center;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.text-justify {
	text-align: justify;
}

.align-center {
	margin-left: auto !important;
	margin-right: auto !important;
}

.align-to-right,
.snap-to-right {
	margin-left: auto !important;
}
.wp-block-image.align-to-right img,
.wp-block-image.touch-to-right img {
	display: block;
	margin-left: auto !important;
}
.wp-block-image.touch-to-right {
	margin-right: calc(-1 * var(--side-margin) );
	margin-left: auto;
}
.wp-block-image.touch-to-left {
	margin-left: calc(-1 * var(--side-margin) );
}

/* figcaptions */

.wp-block-image figcaption {
	max-width: 880px;
	text-align: left;
	margin-top: 50px;
	margin-bottom: var(--d100-m50);
}

@media (min-width: 782px) {
	.wp-block-image.caption-left,
	.wp-block-image.caption-right {
		display: flex;
		align-items: flex-end;
		column-gap: 40px;
		margin-bottom: 100px;
	}
	.wp-block-image.caption-left {
		flex-direction: row-reverse;
	}
	.wp-block-image.caption-left img,
	.wp-block-image.caption-right img {
		width: 66%;
		flex-grow: 1;
	}
	.wp-block-image.caption-left figcaption,
	.wp-block-image.caption-right figcaption {
		max-width: 420px;
		margin-bottom: 2vw;
	}
	.wp-block-image.touch-to-right:not(.caption-left) figcaption {
		margin-right: var(--side-margin);
	}
	.wp-block-image.touch-to-left:not(.caption-right) figcaption {
		margin-left: var(--side-margin);
	}
}
@media (max-width: 781px) {
	.wp-block-image.touch-to-right figcaption {
		margin-right: var(--side-margin);
	}
	.wp-block-image.touch-to-left figcaption {
		margin-left: var(--side-margin);
	}
}
/* shadow */

.shadow {
	box-shadow: 0px 5px 50px #ccc;
}

/* font-size */

.font-size-66 { font-size: calc(max(3.6rem, min(6.6rem, calc(2.027027vw + 2.749rem)))) !important; }
.font-size-56 { font-size: calc(max(2.7rem, min(5.6rem, calc(1.959459vw + 1.877rem)))) !important; }
.font-size-54 { font-size: calc(max(2.4rem, min(5.4rem, calc(2.027027vw + 1.549rem)))) !important; }
.font-size-48 { font-size: calc(max(2rem, min(4.8rem, calc(1.891892vw + 1.205rem)))) !important; }
.font-size-36 { font-size: calc(max(2rem, min(3.6rem, calc(1.081081vw + 1.546rem)))) !important; }
.font-size-32 { font-size: calc(max(1.8rem, min(3.2rem, calc(0.945946vw + 1.403rem)))) !important; }
.font-size-27 { font-size: calc(max(1.8rem, min(2.7rem, calc(0.608108vw + 1.545rem)))) !important; }
.font-size-24 { font-size: calc(max(1.8rem, min(2.4rem, calc(0.405405vw + 1.63rem)))) !important; }
.font-size-20 { font-size: calc(max(1.8rem, min(2rem, calc(0.135135vw + 1.743rem)))) !important; }

@media (min-width: 1025px) {
	.desktop-font-size-66 {
		font-size: 6.6rem !important;
	}
	.desktop-font-size-56 {
		font-size: 5.6rem !important;
	}
	.desktop-font-size-54 {
		font-size: 5.4rem !important;
	}
	.desktop-font-size-48 {
		font-size: 4.8rem !important;
	}
	.desktop-font-size-36 {
		font-size: 3.6rem !important;
	}
	.desktop-font-size-32 {
		font-size: 3.2rem !important;
	}
	.desktop-font-size-27 {
		font-size: 2.7rem !important;
	}
	.desktop-font-size-24 {
		font-size: 2.4rem !important;
	}
	.desktop-font-size-20 {
		font-size: 2.0rem !important;
	}
	.desktop-font-size-18 {
		font-size: 1.8rem !important;
	}
}
@media (max-width: 781px) {
	.mobile-font-size-42 {
		font-size: 4.2rem !important;
	}
	.mobile-font-size-27 {
		font-size: 2.7rem !important;
	}
	.mobile-font-size-24 {
		font-size: 2.4rem !important;
	}
	.mobile-font-size-18 {
		font-size: 1.8rem !important;
	}
	.mobile-font-size-16 {
		font-size: 1.6rem !important;
	}
	.mobile-font-smaller h6,
	h6.mobile-font-smaller,
	.page-content h6 {
		font-size: 2.4rem;
	}
	.mobile-font-smaller p,
	p.mobile-font-smaller,
	.page-content p {
		font-size: 1.6rem;
	}
}

/*
	Inline list
*/

ul.ul-inline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	column-gap: 50px;
	margin-block: -25px !important;
}
ul.ul-inline li {
    line-height: 80px;
	font-size: 2.4rem;
}
@media (max-width: 1024px) {
	ul.ul-inline {
		margin-block: -20px !important;
	}
	ul.ul-inline li {
	    line-height: 60px;
		font-size: 2.0rem;
	}
}
@media (max-width: 429px) {
	ul.ul-inline {
		column-gap: 40px;
		margin-block: -10px !important;
	}
	ul.ul-inline li {
	    line-height: 40px;
		font-size: 1.6rem;
	}
}

/*
	Talk about us
*/

.talk-about-us h2 {
	margin-bottom: 75px;
}
.talk-about-us .wp-block-columns {
	padding-bottom: 50px;
}
.talk-about-us .wp-block-column:first-child p {
	font-size: 3.2rem;
	font-size: calc(max(1.8rem, min(3.2rem, calc(0.945946vw + 1.403rem))));
}
.single-case-study .talk-about-us .wp-block-column:first-child p {
	font-size: calc(max(2.4rem, min(3.2rem, calc(0.540541vw + 2.173rem))));
}
.talk-about-us .wp-block-column + .wp-block-column p:first-child {
	font-size: 3.6rem;
	font-size: calc(max(2.4rem, min(3.6rem, calc(0.810811vw + 2.059rem))));
	color: var(--color-accent);
	margin: 0;
}
.talk-about-us .wp-block-column + .wp-block-column p:first-child ~ p {
	font-size: 1.8rem;
	font-size: calc(max(1.6rem, min(1.8rem, calc(0.135135vw + 1.543rem))));
	margin: 0;
}
.talk-about-us .wp-block-columns + p {
	margin: 50px 0 0;
	font-size: 5.4rem;
	font-size: calc(max(2.4rem, min(5.4rem, calc(2.027027vw + 1.549rem))));
}

@media (min-width: 1441px) {
	.talk-about-us .wp-block-column:first-child {
		flex-basis: 75% !important;
	}
	.talk-about-us .wp-block-column:last-child {
		flex-basis: 25% !important;
	}
}
@media (max-width: 1440px) {
	.talk-about-us .wp-block-column:first-child {
		flex-basis: 66% !important;
	}
	.talk-about-us .wp-block-column:last-child {
		flex-basis: 33% !important;
	}
}
@media (max-width: 1024px) {
	.talk-about-us h2 {
		margin-bottom: 50px;
	}
}
@media (max-width: 781px) {
	.talk-about-us h2 {
		margin-bottom: 40px;
	}
	.talk-about-us .wp-block-columns {
		padding-bottom: 0;
	}
	body:not(.single-case-study) .talk-about-us .wp-block-column:first-child p {
		font-weight: 100;
		line-height: 1.3;
	}
}

/* show/hide on device */

@media (max-width: 781px) {
	.hide-on-mobile, 
	.show-on-tablet,
	.show-on-desktop {
		display: none !important;
	}
}
@media (min-width: 782px) and (max-width: 1024px) {
	.show-on-mobile,
	.hide-on-tablet,
	.show-on-desktop {
		display: none !important;
	}
}
@media (min-width: 1025px) {
	.show-on-mobile,
	.show-on-tablet,
	.hide-on-desktop {
		display: none !important;
	}
}

/*
	Contact page
*/

.contact-icons {
	gap: 40px;
}
.contact-icons a svg path {
    fill: white;
}
.contact-icons a:hover svg path {
    fill: var(--color-accent);
}
@media (max-width: 1500px) {
	.contacts-row  {
		flex-direction: column;
		max-height: 400px;
	}
}
@media (max-width: 781px) {
	.contacts-row  {
		max-height: unset;
	}
	.contact-icons {
		margin-top: 30px !important;
		gap: 30px;
	}
}

/*
	Pagination
*/

.pagination-wrapper {
	margin: calc(-1 * var(--before-pagination)) var(--side-margin) 100px;
}
.pagination {
	margin-top: 50px;
}
.pagination .nav-links > * {
	margin: 0 10px;
}

/*
	Send brief
*/

.hide-send-brief .call-to-send-brief {
	display: none;
}

.call-to-send-brief {
	background: #fff7f5;
	padding: var(--box-padding-top) var(--side-margin) 150px;
	font-size: 5.4rem;
	font-size: calc(max(4.8rem, min(5.4rem, calc(0.684932vw + 4.099rem))));
	margin-top: 40px;
}
.call-to-send-brief a {
	color: #ff6666
}
@media (max-width: 1024px) {
	.call-to-send-brief {
		font-size: 4.8rem;
		font-size: calc(max(3.6rem, min(4.8rem, calc(1.986755vw + 2.766rem))));
	}
}
@media (max-width: 429px) {
	.call-to-send-brief {
		font-size: 3.6rem;
		font-size: calc(max(3rem, min(3.6rem, calc(6vw + 1.08rem))));
	}
}

/*
	Footer
*/

.site-footer {
	padding: 50px var(--side-margin);
	background: white;
	font-size: 1.6rem;
}

/*
	content-visibility
*/

/*
.page-content > *,
.call-to-send-brief,
.site-footer {
	content-visibility: auto;
}
*/
.page-content > * {
	contain-intrinsic-size: 400px;
}
.call-to-send-brief {
	contain-intrinsic-size: 150px;
}
.site-footer {
	contain-intrinsic-size: 20px;
}

/*
	accesibility
*/

 .visibility-hidden {
    border: 0;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip; rect(1px, 1px, 1px, 1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px; 
} 

/*
	DEBUG
*/

body.mesh:after {
	content: " ";
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 9999;
	background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px, 25px 25px, 25px 25px, 5px 5px, 5px 5px;
	background-image:
		linear-gradient(to right, #8888 1px, transparent 1px),
		linear-gradient(to bottom, #8888 1px, transparent 1px),
		linear-gradient(to right, #bbb8 1px, transparent 1px),
		linear-gradient(to bottom, #bbb8 1px, transparent 1px),
		linear-gradient(to right, #ccc8 1px, transparent 1px),
		linear-gradient(to bottom, #ccc8 1px, transparent 1px),
		linear-gradient(to right, #ddd8 1px, transparent 1px),
		linear-gradient(to bottom, #ddd8 1px, transparent 1px);
}

body.mesh * {
	outline: 1px solid #f008;
}