@font-face {
	font-family: 'HelveticaNeueLTStd-HvEx';
	src: url('../fonts/HelveticaNeueLTStd-Lt.otf');
}
@font-face {
	font-family: 'HelveticaNeueLTStd-Lt';
	src: url('../fonts/HelveticaNeueLTStd-Lt.otf');
}

@font-face {
	font-family: 'HelveticaNeueLTStd-Md';
	src: url('../fonts/HelveticaNeueLTStd-Md.otf');
}

/* end fonts */

img {
	opacity: 1;
	border: none !important;
	background: transparent;
}
img.lazy {
	transition: 0.5s ease all;
	opacity: 1;
	border: none !important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto;
	background-color: rgba(0, 0, 0, 0.5);
}

/* common */

html,
body {
	background-color: black;
	margin: 0;
	padding: 0;
	position: relative;
	font-size: 12px;
	font-family: 'futura-pt', sans-serif;
	color: #fff;
	height: 100%;
}
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
a {
	font-family: 'futura-pt', sans-serif;
	color: #fff;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
	outline: none;
}
body {
	color: #fff;
	overflow-x: hidden;
}

.top-bar {
	width: 100vw;
	height: 50vh;
	background: black;
	position: fixed;
	z-index: 1000;
	top: 0;
	transition: 0.3s ease-in-out;
	overflow: hidden;
}
.top-bar.bar {
	height: 10vh;
}
.top-bar.hide {
	height: 0vh;
	min-height: 0;
}
.top-bar-content {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.top-bar-logo {
	position: absolute;
	left: 4vw;
	height: 32px;
	width: auto;
	pointer-events: auto;
}
.top-bar-title {
	color: white;
	text-transform: uppercase;
	letter-spacing: 6px;
	font-size: 20px;
	text-align: center;
	pointer-events: auto;
}
.top-bar.hide .top-bar-content {
	opacity: 0;
	pointer-events: none;
}
.bottom-bar {
	width: 100vw;
	height: 50vh;
	background: black;
	position: fixed;
	z-index: 1000;
	bottom: 0;
	text-align: center;
	transition: 0.3s ease-in-out;
}
.bottom-bar.bar {
	height: 10vh;
}
.bottom-bar.hide {
	height: 0vh;
	min-height: 0;
}
.bottom-bar .title {
	padding-top: 20px;
	color: white;
	text-transform: uppercase;
	letter-spacing: 7px;
	font-size: 30px;
}
.bottom-bar .subtitle {
	color: white;
	text-transform: lowercase;
	letter-spacing: 2px;
	font-size: 12px;
}

#webgl {
	position: fixed;
	z-index: 2;
	opacity: 0;
	transition: 1s opacity ease-in;
}
#webgl.show {
	opacity: 1;
}

.home-hero-video {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: none;
	background: #050607;
}
.home-hero-video.show {
	display: block;
}
.home-hero-video .hero-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.background-video {
	object-fit: cover;
	width: 105%;
	margin-left: -2.5%;
	margin-top: -2.5%;
	height: 105%;
	position: fixed;
	opacity: 0;
	transition: 0s opacity ease-in-out;
}
.background-video.show {
	opacity: 1;
	transition: 2s opacity ease-in-out;
}

/* background */
.background {
	width: 100vw;
	height: 100vh;
	transition: 1s all ease-in-out;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	margin: 0;
	padding: 0;
	background-image: url(../images/background.jpg);
	object-fit: cover;
	opacity: 1;
	background: radial-gradient(circle at 3% 5%, #253239 0%, #0b0c0d 50%);
}
/* end background */

/* core colors */

.sixteen-nine {
	width: 85vw;
	height: 48vw;
	margin-left: 7.5vw;
}

.panoramic {
	width: 85vw;
	height: 38vw;
	margin-left: 7.5vw;
}

.panoramic img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* common */

.top-section {
	text-align: center;
	position: relative;
	top: 10vh;
	margin-bottom: 16vh;
	width: 100vw;
}

.top-section .client {
	pointer-events: none;
	margin-top: 10px;
	color: white;
	text-transform: uppercase;
	letter-spacing: 7px;
	font-size: 10px;
	opacity: 0.5;
	padding-right: 6.5px;
}

.top-section .role {
	pointer-events: none;
	margin-top: 10px;
	color: white;
	text-transform: uppercase;
	letter-spacing: 7px;
	font-size: 10px;
	opacity: 0.5;
	padding-right: 6.5px;
}

.feature {
	margin-top: 30vw;
}
.feature img {
	object-fit: cover;
	object-position: center center;
	filter: grayscale(30%);
}

.section-title {
	text-align: center;
	pointer-events: none;
	margin-top: 15vh;
	margin-bottom: 5vh;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.5vw;
	font-size: 1vw;
	color: #3d5257;
}

/* gallery */
.gallery {
	position: relative;
	width: 100vw;
	height: 52vw;
	overflow: hidden;
}
.gallery .slide img {
	position: absolute;
	object-fit: contain;
}
.gallery .slide {
	transition: all 1s ease-in-out;
	opacity: 0;
}
.gallery .slide.show {
	opacity: 1;
}

/* gallery */

/* media */
.media-list .list-item {
	float: none;
	height: auto;
}
.media-list .list-item img {
	width: 80vw;
	margin-left: 10vw;
	object-fit: cover;
	object-position: center center;
	margin-bottom: 5vw;
	height: auto;
}
.media-list .list-item.videos {
	display: inline-block;
	width: 24vw;
	height: auto;
	margin-left: 4vw !important;
	margin-bottom: 5vw;
}
.media-list .list-item.videos video {
	width: 24vw;
	height: 36vw;
	margin-left: 10vw;
	object-fit: cover;
	object-position: center center;
}
.media-list .list-item.videos.first {
	margin-left: 0 !important;
}
.media-list .list-item.video-full {
	width: 80vw;
	margin-left: 10vw;
	object-fit: cover;
	object-position: center center;
	margin-bottom: 5vw;
	height: auto;
}
.media-list .list-item.video-full video {
	width: 100%;
	object-fit: cover;
	object-position: center center;
}
.media-list .gif {
	display: inline-block;
	width: 24vw;
	height: auto;
	margin-left: 4vw !important;
}
.media-list .gif.first {
	margin-left: 0 !important;
}
.media-list .gif img {
	width: 24vw;
	height: auto;
}
.media-list .fit img {
	object-fit: cover;
	object-position: center center;
	height: 32vw;
}
/*
.media-list .first { margin-left:10vw; }
*/

/* media */

/* related list */
.related-list {
	display: inline-grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 2vw;
	width: 90vw;
	margin-left: 5vw;
}

.related-list .list-item {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	-webkit-transform: translateZ(0);
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
	transition: 0.5s all;
	filter: grayscale(60%);
	cursor: pointer;
	height: auto;
	width: auto;
	margin: 0;
}
.related-list .list-item:hover {
	filter: grayscale(0%);
}

.related-list .list-item img {
	width: 28.3vw;
	object-fit: cover;
	height: 16vw;
	-webkit-transform: translateZ(0);
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
	border: 1px solid #222;
}

.related-list .list-item .titles {
	position: absolute;
	text-transform: uppercase;
	opacity: 0.7;
	transition: 0.1s all;
	width: 94%;
	height: 30px;
	padding: 10px;
	background: rgba(0, 0, 0, 0.5);
	bottom: 0px;
}

.related-list .list-item .title {
	color: white;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: 0.1s all;
	font-size: 1vw;
	font-family: futura-pt;
}

.related-list .list-item .subtitle {
	color: grey;
	text-transform: uppercase;
	margin-bottom: 5px;
	transition: 0.1s all;
	font-size: 10px;
	font-family: futura-pt;
}

/* related list */

/* bottom nav */

.bottom-nav {
	background-color: rgba(100, 100, 100, 0.2);
	height: 40px;
	width: 100vw;
	position: absolute;
	bottom: 0px;
}
.bottom-next {
	opacity: 0.6;
	cursor: pointer;
	position: absolute;
	right: 5vw;
	top: 10px;
	font-size: 12px;
	text-transform: uppercase;
	transition: 0.3s all ease-out;
}
.bottom-next:hover {
	opacity: 1;
}

.bottom-back {
	opacity: 0.6;
	cursor: pointer;
	position: absolute;
	left: 5vw;
	top: 10px;
	font-size: 12px;
	text-transform: uppercase;
	transition: 0.3s all ease-out;
}
.bottom-back:hover {
	opacity: 1;
}

.bottom-up {
	opacity: 0.6;
	cursor: pointer;
	position: absolute;
	left: 50%;
	top: 10px;
	transform: translate(-50%, 0);
	font-size: 12px;
	text-transform: uppercase;
	transition: 0.3s all ease-out;
}
.bottom-up:hover {
	opacity: 1;
}

/* bottom nav */

/* awards */
.awards .list-item {
	display: inline-block;
	float: left;
}
.awards img {
	width: 50px;
}

/* awards */

/* content */
.content {
}
.content {
	font-size: 12px;
	margin-left: 5vw;
	margin-right: 5vw;
	margin-top: 10vw;
	font-family: 'futura-pt';
}

.content-image {
}
.content-image img {
	width: 90vw;
	padding-bottom: 10px;
	max-width: 1000px;
}
.content-image .label {
	font-family: 'futura-pt';
	font-size: 10px;
}
/* content */

/* loader */
.loader {
	opacity: 0;
	width: 0%;
	height: 1px;
	background-color: #3d5257;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition:
		0.3s all,
		0.5s opacity;
	z-index: 0;
}

.loader.show {
	opacity: 0.7;
	z-index: 10000;
}

.loader-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: auto;
	z-index: 10000;
	opacity: 1;
	transition:
		0.3s all,
		0.5s opacity;
}

.loader-icon.show {
	opacity: 1;
	z-index: 10000;
}
/* loader */

/* header */
.header {
	opacity: 0;
	position: fixed;
	width: 100vw;
	height: 12vh;
	top: -5vh;
	left: 0;
	padding: 0;
	margin: 0;
	transition: 1s all ease-in-out;
	z-index: 1000;
}
.header.show {
	opacity: 1;
	z-index: 1000;
	top: 0;
}
.header.shade {
	background: rgba(0, 0, 0, 0.7);
}
.logo {
	cursor: pointer;
	position: absolute;
	top: 5vh;
	left: 5vw;
	z-index: 100;
	transform: rotate(0deg);
	width: 50px;
	transition: all 2s ease-in-out;
	transform-origin: 0% 50%;
}

.header-title {
	position: absolute;
	top: 2.5vw;
	left: 70%;
	font-size: 11px;
	font-family: futura-pt;
	color: #fff;
	width: 12vw;
	text-transform: uppercase;
}

/* end header */

/* menu */
.menu {
	opacity: 0;
	width: 100vw;
	height: 100%;
	left: 50%;
	top: 50%;
	position: fixed;
	transform: translate(-50%, -50%);
	padding: 0;
	margin: 0;
	transition: 1s all;
	z-index: 0;
	background: #000;
}

.menu.show {
	opacity: 1;
	z-index: 1000;
	display: block;
}
.menu .menu-items {
	left: 50%;
	top: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	padding: 0;
	margin: 0;
	margin-top: 0vw;
}
.menu .menu-item {
	cursor: pointer;
	list-style: none;
	opacity: 1;
	text-align: center;
	font-size: 9vw;
	line-height: 10vh;
	text-transform: uppercase;
	color: white;
	font-weight: 900;
	padding: 1vw 2vw;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
	text-shadow:
		0 2px 8px rgba(0, 0, 0, 1),
		0 0 20px rgba(255, 255, 255, 0.5);
	transition: all 0.3s ease;
}
.menu .menu-item:hover {
	box-shadow: 0 6px 40px rgba(0, 0, 0, 0.7);
	transform: scale(1.05);
	text-shadow:
		0 2px 8px rgba(0, 0, 0, 1),
		0 0 30px rgba(255, 255, 255, 0.7);
}
.menu .menu-item.active {
	box-shadow: 0 6px 40px rgba(0, 0, 0, 0.8);
	transform: scale(1.08);
	text-shadow:
		0 2px 8px rgba(0, 0, 0, 1),
		0 0 40px rgba(255, 255, 255, 0.8);
}
/* menu */

/* desktop menu */
.header-menu {
	padding: 0;
	margin: 0;
	z-index: 0;
	position: absolute;
	right: 5vw;
	top: 5vh;
}
.header-menu .menu-items {
}
.header-menu .menu-item {
	display: inline-block;
	cursor: pointer;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.2vw;
	font-size: 0.9vw;
	opacity: 1;
	padding: 0.5vw 1.5vw;
	margin: 0 0.8vw;
	font-weight: 900;
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
	text-shadow:
		0 1px 4px rgba(0, 0, 0, 1),
		0 0 10px rgba(255, 255, 255, 0.4);
	transition: all 0.3s ease;
}

.header-menu .menu-item:hover {
	box-shadow: 0 3px 20px rgba(0, 0, 0, 0.7);
	transform: translateY(-2px);
	text-shadow:
		0 1px 4px rgba(0, 0, 0, 1),
		0 0 15px rgba(255, 255, 255, 0.6);
}

/* center all menu lists */
.header-menu .menu-items,
.menu .menu-items,
.footer-menu .menu-items {
	text-align: center !important;
	display: flex;
	justify-content: center;
	gap: 60px;
}
.menu-items li {
	display: inline-block;
}

/* desktop menu */

/* page common */
/* overflow-y: scroll; overflow-x:hidden;
  -webkit-overflow-scrolling: touch; */
.page {
	width: 100vw;
	position: absolute;
	transform: translate3d(0, 20%, 0);
	top: 0px;
	left: 0px;
	z-index: 0;
	background: none;
	opacity: 0;
	padding-bottom: 10vw;
	transition: 0.8s ease-in-out;
}
.page.show {
	z-index: 100;
	opacity: 1;
	transform: translate3d(0, 0, 0);
}
.page.hide {
	display: none;
}

.page-title {
	user-select: none;
	white-space: nowrap;
	position: absolute;
	top: 12vh;
	font-size: 28vh;
	font-family: futura-pt;
	color: #fff;
	text-transform: uppercase;
	margin: 0;
	pointer-events: none;
	margin: 0 auto;
	width: 100vw;
	text-align: center;
	color: rgba(255, 255, 255, 0.1);
	letter-spacing: 2vh;
	font-weight: 100;
}
.page-subtitle {
	user-select: none;
	position: relative;
	white-space: nowrap;
	pointer-events: none;
	top: 29vh;
	margin: 0 auto;
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	letter-spacing: 0.8vw;
	font-size: 1.2vw;
	text-align: center;
}

.info .page-title {
	font-size: 18vh;
	letter-spacing: 1.4vh;
}
.info .page-subtitle {
	top: 24vh;
}
.info .bio {
	margin-top: 26vh;
}

.page-content {
	pointer-events: none;
	color: white;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 12px;
	margin-top: 15px;
	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
	opacity: 0.8;
	text-align: center;
	display: none;
}
.page-content a {
	pointer-events: auto;
}

.list {
	margin-top: 45vh;
	/*
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2vw;
  */
	margin-left: 2.5vw;
	width: 95vw;
	overflow: hidden;
}

.tilt {
	/* border: 1px solid #222; */
}
.list-item {
	/*position:relative; display: flex;*/

	-webkit-transform: translateZ(0);

	float: left;
	margin: 2.5vw;
	position: relative;
	width: 42.5vw;
	height: 22vw;
}

.list-item img {
	width: 42.5vw;
	object-fit: cover;
	height: 22vw;
	transition: 0.5s opacity;
	opacity: 0.7;
	-webkit-transform: translateZ(0);
}

.list-item .titles {
	position: absolute;
	text-transform: uppercase;
	opacity: 0;
	transition: 0.3s all;
	width: 38.5vw;
	height: 3vw;
	padding: 2vw;
	padding-top: 1vw;
	background: rgba(0, 0, 0, 0.7);
	bottom: -1px;
}

.list-item .title {
	color: white;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: 0.1s all;
	font-size: 1.4vw;
	font-family: futura-pt;
}

.list-item .subtitle {
	color: grey;
	text-transform: uppercase;
	margin-bottom: 0.5vw;
	transition: 0.1s all;
	font-size: 1vw;
	font-family: futura-pt;
}

.list-item {
	cursor: pointer;
}
.list-item:hover .titles {
	opacity: 1;
}
.list-item img {
	opacity: 0.7;
}
.list-item:hover img {
	opacity: 1;
}

.media-block .list-item img {
	opacity: 1;
}

.links-list {
	text-align: center;
	margin-left: 10vw;
	width: 80vw;
	margin-top: 5vh;
}
.links-list .list-item {
	display: inline-block;
	padding: 1vw;
	vertical-align: middle;
	text-align: center;
	color: white;
	text-transform: uppercase;
	cursor: pointer;
	margin: 2vw !important;
	border: 1px solid #222;
	background-color: rgba(255, 255, 255, 0.9);
	color: #3d5257;
	opacity: 0.7;
	width: auto;
	height: auto;
	float: none;
	transition: 0.3s ease-in-out;
}
.links-list .list-item a {
	text-decoration: none;
	color: inherit;
}
.links-list .list-item:hover {
	background-color: #3d5257;
	color: rgba(255, 255, 255, 0.9);
}

/* detail level press lists */

.press-list {
	text-align: center;
	margin-left: 10vw;
	width: 80vw;
}
.press-list .list-item {
	display: block;
	padding: 1vw;
	vertical-align: middle;
	text-align: center;
	color: white;
	text-transform: uppercase;
	cursor: pointer;
	margin: 2vw !important;
	border: 1px solid #222;
	background-color: #3d5257;
	opacity: 0.7;
	width: auto;
	height: auto;
	float: none;
	transition: 0.3s ease-in-out;
}
.press-list .list-item a {
	text-decoration: none;
	color: inherit;
}
.press-list .list-item:hover {
	background-color: rgba(255, 255, 255, 0.9);
	color: #3d5257;
}

/* end page common */

/* home */
.home {
	overflow: hidden;
	height: 100%;
	padding-bottom: 0;
	pointer-events: none;
}
.home .titles {
	top: 50%;
	left: 50%;
	z-index: 100;
	position: absolute;
	transform: translate(-50%, -50%);
	text-align: center;

	margin: 0;
	padding: 0;
}

.home .page-title {
	text-transform: uppercase;
	text-align: center;
	pointer-events: none;
	font-size: 5vw;
	letter-spacing: 2.6vw;
	color: #3d5257;
	color: hsla(192, 18%, 49%, 1);

	/* text-shadow:0px 6px 10px #3d5257;  */
	filter: drop-shadow(0px 6px 10px #3d5257);

	text-indent: 2.6vw;
	opacity: 1;
	font-weight: 100;
	position: relative;
	top: 0;
	left: auto;
	transform: none;
	padding: 0;
	margin: 0;
	position: relative;
}

.home .page-subtitle {
	text-transform: uppercase;
	text-align: center;
	pointer-events: none;
	font-size: 1vw;
	letter-spacing: 1.55vw;
	text-indent: 1.8vw;
	position: relative;
	top: 0;
	left: auto;
	transform: none;
	padding: 0;
	margin: 0;
	position: relative;
}

/* home hero spacing */
.home .page-title {
	margin-top: 10vh !important;
}
.home .page-subtitle {
	margin-top: 2vh !important;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	line-height: 1.4;
}
.home .page-subtitle {
	display: block !important;
	text-align: center !important;
	width: 100%;
	max-width: 700px;
	margin: 0 auto !important;
	margin-top: 2vh !important;
	letter-spacing: normal !important;
	line-height: 1.4 !important;
	white-space: normal !important;
}

.footer-menu {
	z-index: 100;
	padding: 0;
	margin: 0;
	position: fixed;
	bottom: 15vh;
	width: 100%;
	text-align: center;
	opacity: 0;
	transition: 0.4s all ease-in-out;
}
.footer-menu.show {
	opacity: 1;
}
.footer-menu .menu-items {
	padding: 0;
	margin: 0;
}
.footer-menu .menu-item {
	display: inline-block;
	cursor: pointer;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.2vw;
	text-indent: 0.2vw;
	font-size: 1vw;
	opacity: 1;
	padding: 0.5vw 2vw;
	margin: 0 1vw;
	user-select: none;
	font-weight: 900;
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
	text-shadow:
		0 1px 4px rgba(0, 0, 0, 1),
		0 0 10px rgba(255, 255, 255, 0.4);
	transition: all 0.3s ease;
}

.footer-menu .menu-item:hover {
	box-shadow: 0 3px 20px rgba(0, 0, 0, 0.7);
	transform: translateY(-2px);
	text-shadow:
		0 1px 4px rgba(0, 0, 0, 1),
		0 0 15px rgba(255, 255, 255, 0.6);
}

/* end home */

/* press */

.press .list {
	display: inline-grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 8vw;
	margin-left: 5vw;
	width: 90vw;
	margin-top: 50vh;
	overflow: visible;
}

.press .interviews-list {
	margin-top: 0;
}

.press .list-item {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;

	transition: 0.3s all !important;
	filter: grayscale(20%);
	width: auto;
	height: auto;
}

.press .list-item img {
	width: 100%;
	object-fit: contain;
	opacity: 1;
	-webkit-transform: translateZ(0);
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
}

.press .list-item .titles {
	position: absolute;
	text-transform: uppercase;
	opacity: 0;
	transition: 0.3s all;
	width: 90%;
	height: 3vw;
	padding: 1vw;
	background: rgba(0, 0, 0, 0.7);
	bottom: -5vw;
}

.press .list-item .title {
	font-size: 1.1vw;
}

.press .list-item .subtitle {
	font-size: 0.9vw;
}

.press .list-item {
	cursor: pointer;
}
.press .list-item:hover .titles {
	opacity: 1;
}

.press .list {
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
}

.press .list-item {
	position: relative;
	-webkit-transform: perspective(100px) rotateY(-3deg) !important;
	transform: perspective(100px) rotateY(-3deg) !important;
	outline: 1px solid transparent;
	box-shadow: none;
	margin: 0;
	transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.press .list-item:hover {
	-webkit-transform: perspective(100px) rotateY(-0.5deg) !important;
	transform: perspective(100px) rotateY(-0.5deg) !important;
	transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
	filter: grayscale(0%);
}

.press .list-item img {
	position: relative;
}

.press .list-item:before,
.press .list-item:after {
	position: absolute;
	top: 1%;
	height: 98%;
	content: ' ';
	z-index: -1;
}

.press .list-item:before {
	width: 100%;
	left: 2.5%;
	background-color: #5a2d18;
	box-shadow: 5px 5px 20px #333;
}

.press .list-item:after {
	width: 2%;
	left: 100%;
	background-color: #dddddd;
	box-shadow: inset 0px 0px 5px #aaa;
	-moz-transform: rotateY(20deg);
	-webkit-transform: perspective(100) rotateY(20deg);
	transition: 0.3s ease-in-out all;
}

/* press */

/* press detail */
.press-detail .page-title {
	font-size: 3.5vw;
	letter-spacing: 0.5vw;
	top: 30vh;
	color: #3d5257;
}

.press-detail .page-subtitle {
	top: 25vh;
}

.press-detail .client {
	pointer-events: none;
	margin-top: 5vh;
	color: rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
	font-size: 1vw;
	letter-spacing: 0.3vw;

	text-align: center;
}

.press-detail .list-item {
	margin: 0;
}

.press-detail .feature {
	margin-top: 45vh;
	width: 30vw;
	float: right;
	margin-right: 10vw;
	margin-bottom: 5vh;
}
.press-detail .feature-content {
	width: 30vw;
}
.press-detail .feature img {
	border: 1px #222 solid;
	object-fit: cover;
	object-position: center center;
	filter: grayscale(0%);
	width: 30vw;
	max-width: 500px;
	position: relative;
	-moz-perspective: 100px;
	-moz-transform: rotateY(-1deg);
	-webkit-transform: perspective(100px) rotateY(-1deg);
	outline: 1px solid transparent;
	box-shadow: none;
	margin: 0;
	transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.press-detail .next-button {
	position: absolute;
	right: 0vw;
	top: 70vh;
	width: 6vw;
	height: 6vw;
	cursor: pointer;
	opacity: 0.5;
}
.press-detail .next-button-arrow {
	position: absolute;
	left: -65%;
	top: 22%;
	width: 100%;
	transition: 0.3s all ease-in-out;
}
.press-detail .next-button-circle {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	transition: 0.3s all ease-in-out;
}
.press-detail .next-button:hover .next-button-arrow {
	transform: translate(2vw, 0px);
}
.press-detail .next-button:hover .next-button-circle {
	transform: translate(-2vw, 0px);
}

.press-detail .content-title {
	margin-top: 40vh;
	display: none;
}
.press-detail .content {
	margin-top: 46vh;
	margin-left: 10vw;
	width: 45vw;
	font-size: 1.2vw;
}

.press-detail .social-list {
	text-align: center;
	margin-left: 5vw;
	margin-right: 5vw;
	width: 90vw;
}
.press-detail .social-list .list-item {
	display: inline-block;
	max-width: 60px;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
}

.press-detail .social-title {
	clear: both;
}
.press-detail .social-list .list-item img {
	width: 40px;
	height: auto;
	border: none;
}
.press-detail .social-list .list-item {
	opacity: 0.6;
	transition: 0.3s all ease-in-out;
}
.press-detail .social-list .list-item:hover {
	opacity: 0.8;
}
.press-detail .related-title {
	clear: both;
}

.press-detail .related-list {
	display: inline-grid;
	grid-template-columns: repeat(6, 1fr);
	grid-gap: 2vw;
	width: 90vw;
	margin-left: 5vw;
}
.press-detail .related-list .list-item {
}
.press-detail .related-list .list-item .titles {
	display: none;
}
.press-detail .related-list .list-item img {
	width: 13vw;
	object-fit: cover;
	height: 18vw;
	-webkit-transform: translateZ(0);
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
}
.press-detail .media-title {
	clear: both;
}

/* press detail */

/* art */

.art .list {
}

/* art */

/* art detail */

.art-detail .page-title {
	font-size: 3.5vw;
	letter-spacing: 0.5vw;
	top: 30vh;
	color: #3d5257;
}

.art-detail .page-subtitle {
	top: 25vh;
}

.art-detail .client {
	pointer-events: none;
	margin-top: 5vh;
	color: rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
	font-size: 1vw;
	letter-spacing: 0.3vw;

	text-align: center;
}

.art-detail .role {
	pointer-events: none;
	margin-top: 1vh;
	color: rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
	font-size: 1vw;
	letter-spacing: 0.3vw;

	text-align: center;
}

.art-detail .feature iframe {
	border: 1px solid #222;
	object-position: center center;
}
.art-detail .feature {
	margin-top: 42vh;
}
.art-detail .feature img {
	border: 1px #222 solid;
	object-fit: cover;
	object-position: center center;
	filter: grayscale(0%);
}

.art-detail .next-button {
	position: absolute;
	right: 0vw;
	top: 80vh;
	width: 6vw;
	height: 6vw;
	cursor: pointer;
	opacity: 0.5;
}
.art-detail .next-button-arrow {
	position: absolute;
	left: -65%;
	top: 22%;
	width: 100%;
	transition: 0.3s all ease-in-out;
}
.art-detail .next-button-circle {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	transition: 0.3s all ease-in-out;
}
.art-detail .next-button:hover .next-button-arrow {
	transform: translate(2vw, 0px);
}
.art-detail .next-button:hover .next-button-circle {
	transform: translate(-2vw, 0px);
}

.art-detail .content {
	margin-top: 5vh;
}

.art-detail .content {
	margin-top: 5vh;
	margin-left: 10vw;
	width: 80vw;
	font-size: 1.2vw;
}
.art-detail .content a {
	color: slategrey;
}
.art-detail .content p,
.work-detail .content li {
	opacity: 0.7;
}
.art-detail .content li {
	display: inline-block;
	padding: 2vw;
}
.art-detail .content ul {
	text-align: center;
	margin: 0;
	padding: 0;
}

.art-detail .list-item {
	margin: 0;
}

.art-detail .awards-list {
	text-align: center;
	margin-left: 5vw;
	margin-right: 5vw;
	width: 90vw;
}
.art-detail .awards-list .list-item {
	display: inline-block;
	padding: 10px;
	max-width: 100px;
	vertical-align: top;
	text-align: center;
	color: white;
	text-transform: uppercase;
	margin: 2vw;
	font-size: 0.7vw;
	word-break: break-word;
}

.art-detail .awards-list .list-item img {
	max-width: 100px;
	width: 6vw;
	height: auto;
	border: none;
	background: transparent;
}
.art-detail .awards-list .list-item {
	opacity: 0.6;
}

.art-detail .social-list {
	text-align: center;
	margin-left: 5vw;
	margin-right: 5vw;
	width: 90vw;
}
.art-detail .social-list .list-item {
	display: inline-block;
	max-width: 60px;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
}

.art-detail .social-list .list-item img {
	width: 40px;
	height: auto;
	border: none;
}
.art-detail .social-list .list-item {
	opacity: 0.6;
	transition: 0.3s all ease-in-out;
}
.art-detail .social-list .list-item:hover {
	opacity: 0.8;
}

.art-detail .press-list {
	text-align: center;
	margin-left: 10vw;
	width: 80vw;
}
.art-detail .press-list .list-item {
	display: block;
	padding: 1vw;
	vertical-align: middle;
	text-align: center;
	color: white;
	text-transform: uppercase;
	cursor: pointer;
	margin: 2vw;
	border: 1px solid #222;
	background-color: #3d5257;
	opacity: 0.7;
	width: auto;
	height: auto;
	float: none;
}

.art-detail .press-list .list-item:hover {
	-webkit-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
	-moz-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
	transition: all 0.3s ease 0s;
}

.art-detail .press-list .list-item a {
	text-decoration: none;
}

/* art detail */

/* prototypes */

.prototypes .list {
	margin-top: 40vh;
	margin-left: auto;
	margin-right: auto;
	width: min(1100px, 92vw);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	align-items: start;
}
.service-card {
	position: relative;
	background: rgba(6, 9, 10, 0.65);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	padding: 26px 24px 24px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(6px);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: visible;
	box-sizing: border-box;
}
.service-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
	flex-shrink: 0;
}
.service-icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: rgba(111, 214, 255, 0.12);
	border: 1px solid rgba(111, 214, 255, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.service-icon i {
	color: #6fd6ff;
	font-size: 18px;
}
.service-title {
	margin-bottom: 0;
}
.icon-spin-slow i {
	animation: iconSpin 6s linear infinite;
}
.icon-float i {
	animation: iconFloat 2.6s ease-in-out infinite;
}
.icon-pulse i {
	animation: iconPulse 2.2s ease-in-out infinite;
}
.icon-tilt i {
	animation: iconTilt 2.8s ease-in-out infinite;
}
@keyframes iconSpin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
@keyframes iconFloat {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-4px);
	}
}
@keyframes iconPulse {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.08);
	}
}
@keyframes iconTilt {
	0%,
	100% {
		transform: rotate(-6deg);
	}
	50% {
		transform: rotate(6deg);
	}
}
.service-title {
	font-size: 24px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #ffffff;
	margin-bottom: 8px;
	flex-shrink: 0;
}
.service-subtitle {
	font-size: 17px;
	color: rgba(255, 255, 255, 0.72);
	margin-bottom: 12px;
	flex-shrink: 0;
}
.service-list {
	list-style: none;
	padding: 0;
	margin: 0 0 18px 0;
	color: rgba(255, 255, 255, 0.78);
	font-size: 16px;
	line-height: 1.5;
	flex: 1 1 auto;
}
.service-list li {
	margin-bottom: 8px;
	padding-left: 14px;
	position: relative;
}
.service-list li:before {
	content: '•';
	position: absolute;
	left: 0;
	color: #6fd6ff;
}
.service-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: #0b0c0d;
	background: #6fd6ff;
	border-radius: 999px;
	padding: 10px 14px;
	font-size: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: 600;
	margin-top: auto;
	flex-shrink: 0;
	width: 100%;
	box-sizing: border-box;
}
.service-cta:hover {
	filter: brightness(1.05);
}

/* prototypes */

/* --- Ajuste de imágenes SOLO para la sección PLANES --- */

/* prototypes detail */

.prototypes-detail .page-title {
	font-size: 3.5vw;
	letter-spacing: 0.5vw;
	top: 30vh;
	color: #3d5257;
}

.prototypes-detail .page-subtitle {
	top: 25vh;
}

.prototypes-detail .client {
	pointer-events: none;
	margin-top: 5vh;
	color: rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
	font-size: 1vw;
	letter-spacing: 0.3vw;

	text-align: center;
}

.prototypes-detail .role {
	pointer-events: none;
	margin-top: 1vh;
	color: rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
	font-size: 1vw;
	letter-spacing: 0.3vw;

	text-align: center;
}

.prototypes-detail .feature iframe {
	border: 1px solid #222;
	object-position: center center;
}
.prototypes-detail .feature {
	margin-top: 42vh;
}
.prototypes-detail .feature img {
	border: 1px #222 solid;
	object-fit: cover;
	object-position: center center;
	filter: grayscale(0%);
}

.prototypes-detail .next-button {
	position: absolute;
	right: 0vw;
	top: 80vh;
	width: 6vw;
	height: 6vw;
	cursor: pointer;
	opacity: 0.5;
}
.prototypes-detail .next-button-arrow {
	position: absolute;
	left: -65%;
	top: 22%;
	width: 100%;
	transition: 0.3s all ease-in-out;
}
.prototypes-detail .next-button-circle {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	transition: 0.3s all ease-in-out;
}
.prototypes-detail .next-button:hover .next-button-arrow {
	transform: translate(2vw, 0px);
}
.prototypes-detail .next-button:hover .next-button-circle {
	transform: translate(-2vw, 0px);
}

.prototypes-detail .content {
	margin-top: 5vh;
}

.prototypes-detail .content {
	margin-top: 5vh;
	margin-left: 10vw;
	width: 80vw;
	font-size: 1.2vw;
}
.prototypes-detail .content a {
	color: slategrey;
}
.prototypes-detail .content p,
.work-detail .content li {
	opacity: 0.7;
}
.prototypes-detail .content li {
	display: inline-block;
	padding: 2vw;
}
.prototypes-detail .content ul {
	text-align: center;
	margin: 0;
	padding: 0;
}

.prototypes-detail .list-item {
	margin: 0;
}

.prototypes-detail .awards-list {
	text-align: center;
	margin-left: 5vw;
	margin-right: 5vw;
	width: 90vw;
}
.prototypes-detail .awards-list .list-item {
	display: inline-block;
	padding: 10px;
	max-width: 100px;
	vertical-align: top;
	text-align: center;
	color: white;
	text-transform: uppercase;
	margin: 2vw;
	font-size: 0.7vw;
	word-break: break-word;
}

.prototypes-detail .awards-list .list-item img {
	max-width: 100px;
	width: 6vw;
	height: auto;
	border: none;
}
.prototypes-detail .awards-list .list-item {
	opacity: 0.6;
}

.prototypes-detail .social-list {
	text-align: center;
	margin-left: 5vw;
	margin-right: 5vw;
	width: 90vw;
}
.prototypes-detail .social-list .list-item {
	display: inline-block;
	max-width: 60px;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
}

.prototypes-detail .social-list .list-item img {
	width: 40px;
	height: auto;
	border: none;
}
.prototypes-detail .social-list .list-item {
	opacity: 0.6;
	transition: 0.3s all ease-in-out;
}
.prototypes-detail .social-list .list-item:hover {
	opacity: 0.8;
}

.prototypes-detail .press-list {
	text-align: center;
	margin-left: 10vw;
	width: 80vw;
}
.prototypes-detail .press-list .list-item {
	display: block;
	padding: 1vw;
	vertical-align: middle;
	text-align: center;
	color: white;
	text-transform: uppercase;
	cursor: pointer;
	margin: 2vw;
	border: 1px solid #222;
	background-color: #3d5257;
	opacity: 0.7;
	width: auto;
	height: auto;
	float: none;
}

.prototypes-detail .press-list .list-item:hover {
	-webkit-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
	-moz-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
	transition: all 0.3s ease 0s;
}

.prototypes-detail .press-list .list-item a {
	text-decoration: none;
}

/* prototypes detail */

/* contact */
.contact .page-content {
	text-align: center;
}
.contact-form {
	width: min(720px, 92vw);
	margin: 44vh auto 6vh;
	background: rgba(6, 9, 10, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	padding: 28px 26px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
.contact-form-title {
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 18px;
}
.contact-form-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.contact-form .field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.contact-form .field-full {
	grid-column: 1 / -1;
}
.contact-form label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: rgba(255, 255, 255, 0.6);
}
.contact-form input,
.contact-form textarea {
	background: rgba(8, 12, 14, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	padding: 12px 14px;
	color: white;
	font-size: 13px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
	color: rgba(255, 255, 255, 0.35);
}
.contact-submit {
	background: #6fd6ff;
	border: none;
	color: #0b0c0d;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 600;
	padding: 12px 16px;
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.3s ease;
}
.contact-submit:hover:not(:disabled) {
	background: #5bc5e6;
	transform: translateY(-1px);
	box-shadow: 0 4px 20px rgba(111, 214, 255, 0.3);
}
.contact-submit:active:not(:disabled) {
	transform: translateY(0);
}
.contact-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Field validation states */
.contact-form .field.has-error input,
.contact-form .field.has-error textarea {
	border-color: #ff6b6b;
	background: rgba(255, 107, 107, 0.08);
}

.field-error {
	display: block;
	font-size: 11px;
	color: #ff6b6b;
	margin-top: -4px;
	padding-left: 2px;
	animation: slideDown 0.2s ease;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Form success/error messages */
.contact-form-message {
	width: min(720px, 92vw);
	margin: 0 auto 20px;
	padding: 14px 18px;
	border-radius: 12px;
	font-size: 13px;
	text-align: center;
	display: none;
	animation: fadeIn 0.3s ease;
	border: 1px solid;
}

.contact-form-message.success {
	background: rgba(46, 204, 113, 0.12);
	border-color: rgba(46, 204, 113, 0.4);
	color: #2ecc71;
}

.contact-form-message.error {
	background: rgba(255, 107, 107, 0.12);
	border-color: rgba(255, 107, 107, 0.4);
	color: #ff6b6b;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.contact-links {
	width: min(820px, 92vw);
	margin: 0 auto 10vh;
	text-align: center;
}
.contact-whatsapp {
	width: min(820px, 92vw);
	margin: 0 auto 12vh;
	text-align: center;
}
.contact-whatsapp-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.contact-links-title {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 18px;
}
.contact-links-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
}
.contact-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	text-decoration: none;
	color: rgba(255, 255, 255, 0.8);
	font-size: 12px;
	transition: 0.3s ease;
}
.contact-chip i {
	color: #6fd6ff;
}
.contact-chip:hover {
	border-color: rgba(111, 214, 255, 0.5);
	transform: translateY(-2px);
}

/* work */

.work .list {
}

.work .list-item {
}

.work .list-item img {
}

.work .list-item .titles {
}

.work .list-item .title {
}

.work .list-item .subtitle {
}

/* Services Sections */
.services-container {
	margin-top: 45vh;
	margin-bottom: 5vh;
	padding-top: 5vh;
	position: relative;
	z-index: 1;
}

.service-section {
	margin-bottom: 8vh;
	padding: 3vh 5vw;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 8px;
}

.service-section-title {
	font-size: 2vw;
	letter-spacing: 0.3vw;
	text-transform: uppercase;
	color: #6fd6ff;
	margin-bottom: 1vh;
	text-align: center;
}

.service-section-subtitle {
	font-size: 1vw;
	letter-spacing: 0.2vw;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 3vh;
	text-align: center;
}

.service-items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(28vw, 1fr));
	gap: 2vw;
	margin-top: 3vh;
}

.service-item {
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.4s ease;
}

.service-item:hover {
	border-color: rgba(111, 214, 255, 0.4);
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.service-item-thumb {
	width: 100%;
	height: 12vw;
	overflow: hidden;
	position: relative;
	background: #000;
}

.service-item-thumb img {
	width: 100%;
	height: auto;
	min-height: 100%;
	object-fit: cover;
	object-position: center;
	background: #000;
	transition: transform 0.4s ease;
}

.service-item:hover .service-item-thumb img {
	transform: scale(1.05);
}

.service-item-info {
	padding: 2vh 1.5vw;
}

.service-item-title {
	font-size: 1.3vw;
	letter-spacing: 0.2vw;
	text-transform: uppercase;
	color: #ffffff;
	margin-bottom: 1vh;
	font-weight: 600;
}

.service-item-desc {
	font-size: 0.95vw;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 1.5vh;
}

.service-item-tech {
	font-size: 0.8vw;
	letter-spacing: 0.1vw;
	color: #6fd6ff;
	background: rgba(111, 214, 255, 0.1);
	padding: 0.5vh 1vw;
	border-radius: 4px;
	display: inline-block;
	font-family: 'Courier New', monospace;
}

/* works */

/* work detail */
.work-detail .page-title {
	font-size: 3.5vw;
	letter-spacing: 0.5vw;
	top: 30vh;
	color: #3d5257;
}

.work-detail .page-subtitle {
	top: 25vh;
}

.work-detail .client {
	pointer-events: none;
	margin-top: 5vh;
	color: rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
	font-size: 1vw;
	letter-spacing: 0.3vw;

	text-align: center;
}

.work-detail .role {
	pointer-events: none;
	margin-top: 1vh;
	color: rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
	font-size: 1vw;
	letter-spacing: 0.3vw;

	text-align: center;
}

.work-detail .feature iframe {
	object-position: center center;
}
.work-detail .feature {
	margin-top: 42vh;
}
.work-detail .feature img {
	object-fit: cover;
	object-position: center center;
	filter: grayscale(0%);
}

/* Sobrescribir para imágenes panorámicas */
.work-detail .panoramic img {
	object-fit: contain !important;
	object-position: center;
}

.work-detail .next-button {
	position: absolute;
	right: 0vw;
	top: 80vh;
	width: 6vw;
	height: 6vw;
	cursor: pointer;
	opacity: 0.5;
}
.work-detail .next-button-arrow {
	position: absolute;
	left: -65%;
	top: 22%;
	width: 100%;
	transition: 0.3s all ease-in-out;
}
.work-detail .next-button-circle {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	transition: 0.3s all ease-in-out;
}
.work-detail .next-button:hover .next-button-arrow {
	transform: translate(2vw, 0px);
}
.work-detail .next-button:hover .next-button-circle {
	transform: translate(-2vw, 0px);
}

.work-detail .content {
	margin-top: 5vh;
}

.work-detail .content {
	margin-top: 5vh;
	margin-left: 10vw;
	width: 80vw;
	font-size: 1.4rem;
	line-height: 2rem;
}
.work-detail .content a {
	color: slategrey;
}
.work-detail .content p,
.work-detail .content li {
	opacity: 0.7;
}
.work-detail .content li {
	display: inline-block;
	padding: 2vw;
}
.work-detail .content ul {
	text-align: center;
	margin: 0;
	padding: 0;
}
.work-detail .content quote {
	display: block;
	margin: 3rem;
}

.work-detail .list-item {
	margin: 0;
}

.work-detail .awards-list {
	text-align: center;
	margin-left: 5vw;
	margin-right: 5vw;
	width: 90vw;
}
.work-detail .awards-list .list-item {
	display: inline-block;
	padding: 10px;
	max-width: 100px;
	vertical-align: top;
	text-align: center;
	color: white;
	text-transform: uppercase;
	margin: 2vw;
	font-size: 0.7vw;
	word-break: break-word;
}

.work-detail .awards-list .list-item img {
	max-width: 100px;
	width: 6vw;
	height: auto;
	border: none;
	background: transparent;
}
.work-detail .awards-list .list-item {
	opacity: 0.6;
}

.work-detail .social-list {
	text-align: center;
	margin-left: 5vw;
	margin-right: 5vw;
	width: 90vw;
}
.work-detail .social-list .list-item {
	display: inline-block;
	max-width: 60px;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
}

.work-detail .social-list .list-item img {
	width: 40px;
	height: auto;
	border: none;
}
.work-detail .social-list .list-item {
	opacity: 0.6;
	transition: 0.3s all ease-in-out;
}
.work-detail .social-list .list-item:hover {
	opacity: 0.8;
}

/* work detail */

/* info */

.info .feature {
	margin-top: 30vw;
}
.info .feature img {
	object-fit: cover;
	object-position: center center;
	filter: grayscale(30%);
	height: 40vw;
}

.info .bio {
	margin-left: 5vw;
	width: 90vw;
	font-size: 1.4vw;
}
.info .bio a {
	color: slategrey;
}
.info .bio p {
	opacity: 0.7;
}

.info .bio img {
	width: 90vw;
	height: 20vw;
	border: 1px #222 solid;
	object-fit: cover;
	object-position: center center;
	filter: grayscale(100%);
}

.info .list-item .titles {
	position: absolute;
	text-transform: uppercase;
	opacity: 0;
	transition: 0.3s all;
	width: 94%;
	height: 3vw;
	padding: 2vw;
	padding-top: 1vw;
	background: rgba(0, 0, 0, 0.5);
	bottom: 0px;
}

.info .list-item .title {
	color: white;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: 0.1s all;
	font-size: 16px;
	font-family: futura-pt;
}

.info .list-item .subtitle {
	color: grey;
	text-transform: uppercase;
	margin-bottom: 5px;
	transition: 0.1s all;
	font-size: 10px;
	font-family: futura-pt;
}

.info-block {
	clear: both;
}

.team-block {
	margin-top: 12vh;
}
.team-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	width: min(900px, 90vw);
	margin: 0 auto;
}
.team-member {
	text-align: center;
}
.team-photo {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 14px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.team-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.team-name {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;
	color: #ffffff;
	margin-bottom: 6px;
}
.team-role {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
}

.awards-list {
	text-align: center;
	margin-left: 5vw;
	margin-right: 5vw;
	width: 90vw;
}
.awards-list .list-item {
	display: inline-block;
	padding: 10px;
	max-width: 75px;
	vertical-align: top;
	text-align: center;
	color: white;
	text-transform: uppercase;
	font-size: 8px;
	border: none;
	float: none;
	height: auto;
}

.awards-list .list-item img {
	width: 3.5vw;
	min-width: 50px;
	height: auto;
	border: none;
	background: transparent;
}
.awards-list .list-item {
	opacity: 0.6;
	border: none;
	float: none;
	height: auto;
}

.clients-list {
	text-align: center;
	margin-left: 5vw;
	margin-right: 5vw;
	width: 90vw;
}
.clients-list .list-item {
	display: inline-block;
	padding: 10px;
	max-width: 75px;
	vertical-align: middle;
	text-align: center;
	color: white;
	text-transform: uppercase;
	font-size: 8px;
	border: none;
	float: none;
	height: auto;
}

.clients-list .list-item img {
	width: 4vw;
	min-width: 60px;
	height: auto;
	border: none;
	opacity: 0.6;
	background: transparent;
}

.social-list {
	text-align: center;
	margin-left: 5vw;
	margin-right: 5vw;
	width: 90vw;
	clear: both;
}
.social-list .list-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	vertical-align: middle;
	text-align: center;
	color: white;
	text-transform: uppercase;
	font-size: 8px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	float: none;
	opacity: 0.7;
	transition: 0.3s ease;
}

.social-list .list-item img {
	width: 26px;
	height: auto;
	border: none;
}
.social-list .list-item i {
	color: #6fd6ff;
	font-size: 20px;
}
.social-list .list-item:hover {
	opacity: 1;
	transform: translateY(-2px);
	border-color: rgba(111, 214, 255, 0.6);
}

#instafeed {
	width: 90vw;
	margin-left: 5vw;
	text-align: center;
}
#instafeed .list-item {
	display: inline-block;
	margin: 3vw;
	margin-bottom: 10vw;
	border: none;
	float: left;
	width: 12vw;
	height: auto;
}
#instafeed .list-item img {
	border: 1px solid #222;
	width: 12vw;
	height: auto;
}

.twitter-timeline {
	position: relative;
	margin-left: 50%;
	width: 50vw;
	text-align: center;
	transform: translate(-50%, 0);
}
/* info */

/* menu / nav */
.menu-button,
.menu-button span {
	display: inline-block;
	transition: all 0.3s;
	box-sizing: border-box;
}
.menu-button {
	width: 30px;
	height: 60px;
	position: absolute;
	top: 30px;
	right: 30px;
	cursor: pointer;
	z-index: 1000;
	display: none;
}

.menu-button span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 0.2vw;
	min-height: 1px;
	background-color: #fff;
	opacity: 1;
	border-radius: 0vw;
}
.menu-button span:nth-of-type(1) {
	top: 0vw;
}
.menu-button span:nth-of-type(2) {
	top: 2vw;
}

.menu-button.active span:nth-of-type(1) {
	-webkit-transform: translateY(1vw) rotate(-45deg);
	transform: translateY(1vw) rotate(-45deg);
}

.menu-button.active span:nth-of-type(2) {
	-webkit-transform: translateY(-1vw) rotate(45deg);
	transform: translateY(-1vw) rotate(45deg);
}

/* end menu/nav */

::-webkit-scrollbar {
	width: 1px;
}
::-webkit-scrollbar-track {
	background: #000;
}
/* Handle */
::-webkit-scrollbar-thumb {
	background: #333;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #555;
}

/*
#rotate { text-align: center; background-color:#fafafa;  display:none; width:100%; height: 100%; z-index: 0; position: absolute; top:0px; left:0px; }
#rotate img { height:100%; width:auto; object-fit: cover; }
*/

/* custom for rotate from landscape to portrait on small devices */

/* @media only screen and (max-device-width: 640px) and (orientation: landscape) {
  */

.logo {
	display: none;
}

/* reel video */
#reel {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 0;
	background-color: black;
	opacity: 0;
	transition: 1s ease-in-out all;
	left: 0;
	top: 0;
}
#reel.show {
	opacity: 1;
	z-index: 3000;
}
#reel .close-button {
	position: absolute;
	top: 5vh;
	right: 5vw;
	cursor: pointer;
	transition: all 1000ms cubic-bezier(0.86, 0, 0.07, 1);
}

#reel .reel-video {
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 0;
}
#reel .reel-video iframe {
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	position: absolute;
}

/* video */

.video {
	display: none;
	margin-top: 30px;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
	height: 0;
	border: 1px outset rgba(0, 150, 200, 0.2);
}
.video iframe {
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	position: absolute;
}
/* fonts */

/* close button */

.close-button {
	height: 25px;
	width: 25px;
	position: relative;
	box-sizing: border-box;
	line-height: 30px;
	display: inline-block;
}
.close-button:before,
.close-button:after {
	transform: rotate(-45deg);
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -1.5px;
	margin-left: -15px;
	display: block;
	height: 1px;
	width: 30px;
	background-color: #fff;
	transition: all 0.2s ease-out;
}
.close-button:after {
	transform: rotate(45deg);
}
.close-button:hover:before,
.close-button:hover:after {
	transform: rotate(0deg);
	background-color: rgba(255, 255, 255, 0.8);
}

/* end close button */

@media only screen and (max-width: 1080px) {
	.section-title {
		letter-spacing: 0.5vw;
		font-size: 1.2vw;
	}

	.page-subtitle {
		font-size: 1.2vw;
	}

	.work-detail .client,
	.work-detail .role {
		font-size: 1.2vw;
	}

	.work-detail .page-title {
		top: 30vh;
	}

	.work-detail .page-subtitle {
		top: 25vh;
	}

	.work-detail .awards-list .list-item {
		font-size: 0.9vw;
	}

	.press-detail.page-title {
		top: 30vh;
	}

	.press-detail .page-subtitle {
		top: 25vh;
	}

	.press-detail .content {
		font-size: 1.4vw;
	}
}

@media only screen and (max-width: 801px) {
	.header-menu {
		display: none;
	}

	.menu-button {
		display: block;
		opacity: 0.5;
	}

	.menu .menu-items {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}
	.menu .menu-item {
		display: block;
		line-height: 1.1;
	}
	.menu-items li {
		display: block;
	}

	.footer-menu {
		bottom: 10.5vh;
		z-index: 1200;
	}

	.footer-menu .menu-items {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px 10px;
		padding: 0 4vw;
	}

	.footer-menu .menu-item {
		font-size: 3.6vw;
		padding: 8px 14px;
		margin: 6px;
		font-weight: 900;
		box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
		text-shadow:
			0 1px 4px rgba(0, 0, 0, 1),
			0 0 10px rgba(255, 255, 255, 0.4);
		transition: all 0.3s ease;
	}

	.footer-menu .menu-item:hover {
		box-shadow: 0 3px 20px rgba(0, 0, 0, 0.7);
		transform: translateY(-2px);
		text-shadow:
			0 1px 4px rgba(0, 0, 0, 1),
			0 0 15px rgba(255, 255, 255, 0.6);
	}

	.logo {
		display: none;
	}
	.top-bar.bar {
		height: 9vh;
		min-height: 9vh;
	}
	.bottom-bar.bar {
		height: 9vh;
		min-height: 9vh;
	}

	.background {
		display: block;
	}
	.background-video {
		display: none;
	}

	.top-bar-content {
		padding: 0 4vw;
	}
	.top-bar-logo {
		height: 26px;
		left: 4vw;
	}
	.top-bar-title {
		font-size: 14px;
		letter-spacing: 4px;
	}

	.home-hero-video {
		inset: 0;
	}
	.home-hero-video .hero-video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.prototypes .list {
		margin-top: 32vh;
		width: 92vw;
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.service-card {
		padding: 20px 18px 16px;
	}
	.service-icon {
		width: 34px;
		height: 34px;
	}
	.service-icon i {
		font-size: 16px;
	}
	.service-title {
		font-size: 20px;
	}
	.service-subtitle {
		font-size: 15px;
	}
	.service-list {
		font-size: 15px;
	}
	.service-cta {
		width: 100%;
	}
	.contact-form {
		margin: 38vh auto 5vh;
		padding: 22px 18px;
	}
	.contact-form-fields {
		grid-template-columns: 1fr;
	}
	.contact-submit {
		width: 100%;
	}
	.contact-links-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.contact-whatsapp-grid {
		grid-template-columns: 1fr;
	}
	.team-list {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.team-photo {
		width: 120px;
		height: 120px;
	}
	.home-hero-video.show {
		display: block;
	}

	.page-title {
		font-size: 6.5vh;
		letter-spacing: 0.6vh;
		white-space: normal;
		line-height: 1.1;
		padding: 0 6vw;
	}
	.page-subtitle {
		top: 16vh;
		font-size: 1.2vh;
		letter-spacing: 0.4vh;
		white-space: normal;
		padding: 0 8vw;
	}
	.info .page-title {
		font-size: 5vh;
		letter-spacing: 0.5vh;
	}
	.info .page-subtitle {
		top: 18vh;
	}

	.list {
		margin-top: 25vh;
		margin-left: 5vw;
	}
	.list-item {
		width: 85vw;
		height: 44vw;
	}

	.list-item img {
		width: 85vw;
		height: 44vw;
	}

	.home .page-title {
		font-size: 8vw;
	}
	.home .page-subtitle {
		font-size: 2.2vw;
	}

	.press .list {
		margin-top: 27vh;
		grid-template-columns: repeat(2, 1fr);
	}
	.press .list-item {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		-webkit-transform: translateZ(0);
		-webkit-perspective: 1000;
		-webkit-backface-visibility: hidden;

		transition: 0.3s all;
		filter: grayscale(20%);
		width: auto;
		height: auto;
		-moz-perspective: 100px;
		-moz-transform: rotateY(-3deg);
		-webkit-transform: perspective(100px) rotateY(-3deg) !important;
		outline: 1px solid transparent;
		box-shadow: none;
		margin: 0;
		border: none;
		transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	.press .list-item img {
		width: 100%;
		object-fit: contain;
		opacity: 1;
		-webkit-transform: translateZ(0);
		-webkit-perspective: 1000;
		-webkit-backface-visibility: hidden;
	}

	.press .list-item:before,
	.press .list-item:after {
		position: absolute;
		top: 2%;
		height: auto;
		content: ' ';
		z-index: -1;
	}

	.press .list-item:before {
		width: 100%;
		left: 2.5%;
		background-color: #5a2d18;
		box-shadow: 5px 5px 20px #333;
	}

	.press .list-item:after {
		width: 2%;
		left: 100%;
		background-color: #dddddd;
		box-shadow: inset 0px 0px 5px #aaa;
		-moz-transform: rotateY(20deg);
		-webkit-transform: perspective(100) rotateY(20deg);
		transition: 0.3s ease-in-out all;
	}

	.section-title {
		margin-top: 5vh;
		margin-bottom: 3vh;
		font-size: 2vw;
	}

	.interviews-list {
		margin-top: 5vh !important;
	}

	.info .feature {
		margin-top: 25vh;
	}
	.info .section-title {
		margin-top: 7vh;
	}

	.info .bio {
		font-size: 2vh;
	}

	.info #instafeed {
		padding-bottom: 10vh;
	}
	.info #instafeed .list-item {
		padding-bottom: 0;
	}

	.work-detail .feature {
		margin-top: 20vh;
	}
	.work-detail .next-button {
		top: 32vh;
	}

	.work-detail .page-title {
		top: 16vh;
		color: #3d5257;
		color: white;
	}

	.work-detail .page-subtitle {
		top: 13vh;
	}

	.work-detail .client,
	.work-detail .role {
		font-size: 2.2vw;
	}

	.work-detail .client {
		margin-top: 3vh;
	}
	.work-detail .content {
		margin-top: 0;
		font-size: 3vw;
	}

	.work-detail .awards-list .list-item {
		display: inline-block;

		max-width: 60px;

		font-size: 1.2vw;
		word-break: break-word;
	}
	.work-detail .awards-list .list-item img {
		display: inline-block;

		max-width: 60px;
	}

	.work-detail .feature {
		margin-top: 20vh;
	}
	.work-detail .next-button {
		top: 32vh;
	}

	.work-detail .page-title {
		top: 16vh;
		color: #3d5257;
		color: white;
	}

	.work-detail .page-subtitle {
		top: 13vh;
	}

	.work-detail .client,
	.work-detail .role {
		font-size: 2.2vw;
	}

	.work-detail .client {
		margin-top: 3vh;
	}
	.work-detail .content {
		margin-top: 0;
		font-size: 3vw;
	}

	.work-detail .awards-list .list-item {
		display: inline-block;

		max-width: 60px;

		font-size: 1.2vw;
		word-break: break-word;
	}
	.work-detail .awards-list .list-item img {
		display: inline-block;

		max-width: 60px;
	}

	.prototypes-detail .feature {
		margin-top: 20vh;
	}
	.prototypes-detail .next-button {
		top: 32vh;
	}

	.prototypes-detail .page-title {
		top: 16vh;
		color: #3d5257;
		color: white;
	}

	.prototypes-detail .page-subtitle {
		top: 13vh;
	}

	.prototypes-detail .client,
	.work-detail .role {
		font-size: 2.2vw;
	}

	.prototypes-detail .client {
		margin-top: 3vh;
	}
	.prototypes-detail .content {
		margin-top: 0;
		font-size: 3vw;
	}

	.prototypes-detail .awards-list .list-item {
		display: inline-block;

		max-width: 60px;

		font-size: 1.2vw;
		word-break: break-word;
	}
	.prototypes-detail .awards-list .list-item img {
		display: inline-block;

		max-width: 60px;
	}

	.art-detail .feature {
		margin-top: 20vh;
	}
	.art-detail .next-button {
		top: 32vh;
	}

	.art-detail .page-title {
		top: 15vh;
		color: #3d5257;
		color: white;
	}

	.art-detail .page-subtitle {
		top: 13vh;
	}

	.art-detail .client,
	.art-detail .role {
		font-size: 2.2vw;
	}

	.art-detail .client {
		margin-top: 3vh;
	}
	.art-detail .content {
		margin-top: 0;
		font-size: 3vw;
	}

	.art-detail .awards-list .list-item {
		display: inline-block;

		max-width: 60px;

		font-size: 1.2vw;
		word-break: break-word;
	}
	.art-detail .awards-list .list-item img {
		display: inline-block;

		max-width: 60px;
	}

	.press-detail .page-title {
		top: 16vh;
		color: #3d5257;
		color: white;
	}

	.press-detail .page-subtitle {
		top: 13vh;
	}

	.press-detail .client,
	.press-detail .role {
		font-size: 2.2vw;
	}

	.press-detail .feature {
		margin-top: 24vh;
		width: 80vw;
		float: none;
		margin-left: 10vw;
	}
	.press-detail .feature img {
		width: 78vw;
		height: auto;
	}
	.press-detail .content {
		margin-top: 5vh;
		font-size: 2.5vw;
		width: 80vw;
	}

	.links-list .list-item,
	.press-list .list-item {
		padding: 3vw;
	}

	.social-list .list-item {
		width: auto;
	}

	.related-list .list-item img {
		width: 26vw;
	}
	.related-list .list-item .titles {
		display: none;
	}

	.press-detail .related-list .list-item {
		width: 12vw;
	}

	.press-detail .next-button {
		top: 50vh;
	}
}

/* Hero Carousel Styles */
.home-hero-video {
	position: fixed;
	top: 10vh;
	left: 0;
	right: 0;
	bottom: 10vh;
	z-index: 3;
	display: none;
	background: #050607;
}

.home-hero-video.show {
	display: block;
}

.hero-carousel {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-carousel-img {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: auto;
	transform: translateY(-50%);
	opacity: 0;
	transition: opacity 1.5s ease-in-out;
}

.hero-carousel-img.active {
	opacity: 1;
}

.hero-carousel-img.desktop {
	display: block !important;
}

.hero-carousel-img.mobile {
	display: none !important;
}

@media (max-width: 768px) {
	.hero-carousel-img.desktop {
		display: none !important;
	}
	.hero-carousel-img.mobile {
		display: block !important;
		width: auto;
		height: 100%;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
	}
}