
.wrapper,
.project-list,
.wrapper-wider {
	max-width: 1224px;
	margin-left: auto;
	margin-right: auto;
	width: calc(100vw - 60px)
}

@media(max-width: 480px) {

	.wrapper,
	.project-list,
	.wrapper-wider {
		width: calc(100vw - 30px)
	}
}

.wrapper-wider {
	max-width: 1320px
}

.wrapper-narrow {
	max-width: 644px;
	margin-left: auto;
	margin-right: auto
}

.project--title {
	margin-bottom: 0 !important
}

.project--explore {
	margin-top: 40px
}

@media(min-width: 781px) {
	.project--explore {
		margin-top: 100px
	}
}

.project--explore .wp-element-button {
	text-align: center
}

.project--thumbnail {
	position: relative
}

.project--thumbnail img:not([class*="--hover-image"]) {
	aspect-ratio: 4/5;
	width: calc(100% - 24px) !important;
	max-height: 80vh;
	object-fit: cover
}

.project--hover-image {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: auto;
	opacity: 0;
	z-index: -1;
	transition: transform .2s ease-in, opacity .4s ease
}

.project--industry {
	position: absolute;
	right: 20px;
	top: 0;
	transform-origin: top right;
	transform: rotate(-90deg);
	text-transform: uppercase;
	white-space: nowrap
}

.project--industry:before {
	content: "•";
	margin-right: 5px
}

.project-item {
	cursor: pointer
}

.project-item:hover>.project--thumbnail>.project--hover-image {
	transform: scale(1.6);
	opacity: 1 !important
}

.project-list:not(.related) .project-item {
	cursor: pointer;
	display: flex;
	align-items: center;
	margin-top: 100px;
	margin-bottom: 100px;
	gap: 20%
}

.project-list:not(.related) .project-item>* {
	flex-basis: 40%
}

@media(max-width: 1224px) {
	.project-list:not(.related) .project-item {
		gap: 10%
	}

	.project-list:not(.related) .project-item>* {
		flex-basis: 45%
	}
}

.project-list:not(.related) .project-item:nth-child(odd) {
	flex-direction: row-reverse
}

.project-list:not(.related) .project-item+* {
	margin-top: 0
}

@media(max-width: 781px) {
	.project-list:not(.related) .project-item {
		flex-direction: column !important;
		gap: 40px
	}

	.project-list:not(.related) .project-item>* {
		flex-basis: 100%;
		width: 100%
	}
}

.project-list ul.post-list {
	max-width: none;
	list-style: none
}

.project-list.related ul.post-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8%
}

@media(max-width: 781px) {
	.project-list.related ul.post-list {
		grid-template-columns: 1fr;
		grid-row-gap: 60px
	}
}

.project-list.related ul.post-list li {
	flex-direction: column
}

.project-list.related.desktop-hidden-logo .drs-tch-project-logo {
	margin-top: 20px
}

@media(min-width: 781px) {
	.project-list.related.desktop-hidden-logo .drs-tch-project-logo {
		display: none
	}
}

.drs-tch-case-studies {
	overflow-x: clip;
	overflow-y: visible
}

@media(max-width: 480px) {
	.drs-tch-case-studies {
		padding: 0 !important
	}
}

.drs-tch-case-studies>[id^=case_studies_] {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 7.5vw;
	gap: clamp(20px, 7.5vw, 100px)
}

@media(max-width: 720px) {
	.drs-tch-case-studies>[id^=case_studies_] {
		gap: 100px
	}
}

@media(min-width: 480px) {
	.drs-tch-case-studies>[id^=case_studies_] {
		min-height: 912px
	}
}

@media(max-width: 480px) {
	.drs-tch-case-studies>[id^=case_studies_] {
		gap: 0;
		flex-direction: column;
		overflow: hidden !important
	}
}

.drs-tch-case-studies .case-study {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
	padding-top: 40px;
	padding-bottom: 40px;
	cursor: pointer
}

.drs-tch-case-studies .case-study:not(.ready) {
	display: none !important
}

.acf-block-preview .drs-tch-case-studies .case-study {
	display: inline-block !important
}

.drs-tch-case-studies .case-study:nth-child(odd)>* {
	max-width: 450px
}

.drs-tch-case-studies .case-study:first-child>* {
	max-width: 530px
}

.drs-tch-case-studies .case-study:nth-child(even)>* {
	max-width: 320px
}

@media(max-height: 900px) {
	.drs-tch-case-studies .case-study:nth-child(odd)>* {
		max-width: 310px
	}

	.drs-tch-case-studies .case-study:first-child>* {
		max-width: 380px
	}

	.drs-tch-case-studies .case-study:nth-child(even)>* {
		max-width: 240px
	}
}

@media(max-width: 720px) {
	.drs-tch-case-studies .case-study {
		padding-top: 10px;
		padding-bottom: 10px;
		width: calc(80vw - 100px)
	}
}

@media(max-width: 480px) {
	.drs-tch-case-studies .case-study {
		width: calc(100vw - 30px);
		padding: 10px
	}

	.drs-tch-case-studies .case-study>* {
		max-width: none !important
	}
}

.drs-tch-case-studies .case-study .wp-post-image {
	display: block;
	aspect-ratio: 4/5;
	width: 100%;
	height: 100%;
	object-fit: cover
}

.drs-tch-case-studies .case-study--hover-image {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: auto;
	opacity: 0;
	z-index: -1;
	transition: transform .2s ease-in, opacity .4s ease
}

.drs-tch-case-studies .case-study--industry {
	position: absolute;
	right: 0;
	top: 0;
	transform-origin: top right;
	transform: rotate(-90deg);
	text-transform: uppercase;
	white-space: nowrap
}

.drs-tch-case-studies .case-study--industry:before {
	content: "•";
	margin-right: 5px
}

.drs-tch-case-studies .case-study--tags span {
	display: inline-block;
	border: 1px solid #000;
	margin: 0 10px 10px 0;
	padding: 6px 8px;
	transition: all .2s ease
}

.drs-tch-case-studies .case-study--tags span:first-child {
	background: #000;
	color: #fff
}

.drs-tch-case-studies .case-study--container {
	position: relative;
	aspect-ratio: 3/4
}

@media(max-height: 1080px)and (min-width: 480px) {
	.drs-tch-case-studies .case-study--container {
		max-height: 75vh
	}
}

.drs-tch-case-studies .case-study--content {
	position: relative;
	overflow: hidden;
	height: 100%
}

@media(min-height: 1080px) {
	.drs-tch-case-studies .case-study--content {
		max-height: 650px
	}
}

@media(max-width: 480px) {
	.drs-tch-case-studies .case-study--content img {
		width: 100%
	}
}

.drs-tch-case-studies .case-study--hover-content {
	opacity: 0;
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	max-height: calc(100% - 20px);
	background: #000;
	transform: translateY(50%);
	transition: transform .2s ease-in, opacity .4s ease;
	overflow: auto;
	padding: 0 40px 30px 40px
}

@media(max-height: 900px) {
	.drs-tch-case-studies .case-study--hover-content {
		padding: 0 20px 15px 20px;
		font-size: 14px
	}
}

.drs-tch-case-studies .case-study--hover-content>* {
	color: #fff;
	margin-top: 30px
}

.drs-tch-case-studies .case-study--read-more {
	display: inline-block;
	padding: 5px 30px 5px 0;
	background: rgba(0, 0, 0, 0) url("../../assets/images/arrow-right-in-circle-white.svg") right center no-repeat
}

.drs-tch-case-studies .case-study:hover .case-study--hover-image,
.drs-tch-case-studies .case-study.highlight .case-study--hover-image {
	transform: scale(1.4);
	opacity: 1 !important;
	z-index: 0 !important
}

.drs-tch-case-studies .case-study:hover .case-study--industry,
.drs-tch-case-studies .case-study.highlight .case-study--industry {
	opacity: .5
}

.drs-tch-case-studies .case-study:hover .case-study--hover-content,
.drs-tch-case-studies .case-study.highlight .case-study--hover-content {
	opacity: 1;
	transform: translateY(0%)
}

.drs-tch-case-studies .case-study:hover.style-0 .case-study--tags a,
.drs-tch-case-studies .case-study.highlight.style-0 .case-study--tags a {
	background: #89c18b;
    color: #000;
    border-color: #89c18b;
}

.drs-tch-case-studies .case-study:hover.style-1 .case-study--tags a,
.drs-tch-case-studies .case-study.highlight.style-1 .case-study--tags a {
	background: #b499e5;
    color: #000;
    border-color: #b499e5;
}

.drs-tch-case-studies .case-study:hover.style-2 .case-study--tags a,
.drs-tch-case-studies .case-study.highlight.style-2 .case-study--tags a {
	background: #49e4ed;
    color: #000;
    border-color: #49e4ed;
}

.drs-tch-case-studies .case-study:hover.style-3 .case-study--tags a,
.drs-tch-case-studies .case-study.highlight.style-3 .case-study--tags a {
	background: #f9c7a5;
	color: #000;
	border-color: #f9c7a5
}

.drs-tch-case-studies .case-study:hover.style-4 .case-study--tags a,
.drs-tch-case-studies .case-study.highlight.style-4 .case-study--tags a {
	background: #89c18b;
    color: #000;
    border-color: #89c18b;
}

.drs-tch-case-studies .case-study:hover.style-5 .case-study--tags a,
.drs-tch-case-studies .case-study.highlight.style-5 .case-study--tags a {
	background: #b499e5;
	color: #000;
	border-color: #b499e5
}
.drs-tch-case-studies .case-study:hover.style-6 .case-study--tags a,
.drs-tch-case-studies .case-study.highlight.style-6 .case-study--tags a {
	background: #89c18b;
    color: #000;
    border-color: #89c18b;
}

.drs-tch-case-studies .case-study:hover.style-7 .case-study--tags a,
.drs-tch-case-studies .case-study.highlight.style-7 .case-study--tags a {
	background: #b499e5;
    color: #000;
    border-color: #b499e5;
}

.drs-tch-case-studies .case-study:hover.style-8 .case-study--tags a,
.drs-tch-case-studies .case-study.highlight.style-8 .case-study--tags a {
	background: #49e4ed;
    color: #000;
    border-color: #49e4ed;
}

.drs-tch-case-studies .case-study:hover.style-9 .case-study--tags a,
.drs-tch-case-studies .case-study.highlight.style-9 .case-study--tags a {
	background: #f9c7a5;
	color: #000;
	border-color: #f9c7a5
}