@darkgrey: #101010;
@black: #000;
@white: #fff;
@green: #46FFC6;
@darkgreen: #1f4034;
@transgreen: rgba(70, 255, 198, 0.2);
@transbg: rgba(70, 255, 198, 0.8);
@grey: #5c5c5c;
@lightgrey: #D8D8DD;
@purple: #8546ff;
@transpurple: rgba(133, 70, 255, 0.2);
@darkpurple: #20103d;
@font: 'Heebo',
'Helvetica',
'Arial',
sans-serif;
body,
html {
	max-width: 100%;
	overflow-x: hidden;
}

body {
	margin: 0;
	border: 0;
	width: 100%;
	overflow: hidden;
	background-color: @darkgrey;
	background-image: url(/assets/dot-bg.svg);
	background-attachment: fixed;
	background-size: 150%;
	color: @white;
	font-family: 'Heebo', 'Helvetica', 'Arial', sans-serif;
	font-size: 14pt;
}

a {
	text-decoration: none;
	color: white;
}

a:visited {
	color: white;
}

button {
	padding: 0px;
	color: @green;
}

.hide-desktop {
	display: none !important;
}

.space {
	height: 200px;
}

.play::before {
	content: url(/assets/play.svg);
	width: 20px;
	display: inline-block;
	position: relative;
	top: 6px;
	padding-right: 20px;
}

.play::after {
	content: '';
	position: relative;
	display: block;
	width: 0%;
	height: 5px;
	background-color: @green;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out
}

.play:hover::after {
	content: '';
	position: relative;
	display: block;
	width: 100%;
	height: 5px;
	background-color: @green;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out
}

img.swiper {
	width: 50px !important;
	margin-left: 60% !important;
}

.bounce-out-left {
	-webkit-animation: bounce-out-left 3s both;
	animation: bounce-out-left 3s both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

@-webkit-keyframes bounce-out-left {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	5% {
		-webkit-transform: translateX(-15px);
		transform: translateX(-15px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	15% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	25% {
		-webkit-transform: translateX(-19px);
		transform: translateX(-19px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	38% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	52% {
		-webkit-transform: translateX(-20px);
		transform: translateX(-20px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	70% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	85% {
		opacity: 1;
	}
	100% {
		-webkit-transform: translateX(-300px);
		transform: translateX(-300px);
		opacity: 0;
	}
}

@keyframes bounce-out-left {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	5% {
		-webkit-transform: translateX(-15px);
		transform: translateX(-15px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	15% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	25% {
		-webkit-transform: translateX(-19px);
		transform: translateX(-19px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	38% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	52% {
		-webkit-transform: translateX(-20px);
		transform: translateX(-20px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	70% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	85% {
		opacity: 1;
	}
	100% {
		-webkit-transform: translateX(-300px);
		transform: translateX(-300px);
		opacity: 0;
	}
}

ul li {
	list-style: none;
	color: @green;
	display: inline-block;
	padding: 10px 20px;
	width: auto;
	background-color: @transgreen;
	margin: 0px 20px 20px 0px;
	border-radius: 10px;
}

.back {
	display: block;
	position: absolute;
	background-image: url(/assets/back.svg);
	backround-size: 100%;
	width: 50px;
	height: 50px;
	top: 0px;
	line-height: 50px;
}

span {
	color: @green;
}

nav {
	a:nth-child(n+1) {
		text-decoration: none;
		color: @white;
		text-transform: capitalize;
		font-weight: 700;
		display: inline-block;
		position: relative;
	}
	a:nth-child(n+1)::after {
		content: '';
		position: relative;
		display: block;
		width: 0%;
		height: 5px;
		background-color: @green;
		-webkit-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}
	a:nth-child(n+1):hover {
		color: @green;
	}
	a:nth-child(n+1):hover::after {
		content: '';
		position: relative;
		display: block;
		width: 100%;
		height: 5px;
		background-color: @green;
		-webkit-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Heebo', 'Helvetica', 'Arial', sans-serif;
	font-weight: 700;
	letter-spacing: 0.2px;
	line-height: 1;
}

p {
	font-size: 14pt;
	font-weight: 300;
	letter-spacing: 0.5px;
}

.hide {
	display: none !important;
	opacity: 0;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.show {
	display: block !important;
	opacity: 100;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

#mobilenavbtn {
	display: none;
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1004;
	img {
		width: 50px;
	}
}

#mobilenavclose {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1004;
}

#mobilenav {
	display: block;
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	z-index: 1010;
	ul {
		display: block;
		width: 100%;
		margin-top: 200px;
	}
	ul li {
		display: block;
		height: 10vh;
		background: none;
		text-align: right;
		font-size: 2em;
		font-weight: 600;
	}
}

#topbar {
	display: block;
	position: relative;
	height: 100px;
	z-index: 999;
	background-color: transparent;
	nav {
		display: inline-block;
		position: absolute;
		right: 50px;
		top: 10px;
	}
	a {
		font-size: 2rem;
		padding: 25px;
	}
	.logo {
		width: 70px;
		padding: 15px;
	}
}

#hero {
	display: block;
	position: relative;
	height: 85vh;
	background-image: url(/assets/hero@2x.png);
	background-size: cover;
	background-position: bottom center;
	background-repeat: no-repeat;
	margin-top: -100px;
	overflow: visible;
}

.herotext {
	display: block;
	position: absolute;
	height: 100%;
	margin-top: 25vh;
}

.come-in {
	-webkit-transform: translateY(150px);
	    -ms-transform: translateY(150px);
	        transform: translateY(150px);
	-webkit-animation: come-in 0.8s ease forwards;
	        animation: come-in 0.8s ease forwards;
}

.come-in:nth-child(odd) {
	-webkit-animation-duration: 0.6s;
	        animation-duration: 0.6s;
}

.already-visible {
	-webkit-transform: translateY(0);
	    -ms-transform: translateY(0);
	        transform: translateY(0);
	-webkit-animation: none;
	        animation: none;
}

@-webkit-keyframes come-in {
	to {
		-webkit-transform: translateY(0);
		        transform: translateY(0);
	}
}

@keyframes come-in {
	to {
		-webkit-transform: translateY(0);
		        transform: translateY(0);
	}
}

#work {
	.title {
		padding-top: 200px;
	}
	.third-col {
		margin-top: 400px;
	}
	.first-col {
		margin-top: -500px;
	}
	.product-box {
		display: list-item;
		position: relative;
		width: 100%;
		padding-top: 150%;
		overflow: hidden;
		max-height: 700px;
		border-radius: 40px;
	}
	.product-box::before {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		padding-top: 100%;
		background-color: @black;
		border-radius: 40px;
		z-index: -1;
		-webkit-transition: all 0.4s ease-in-out;
		-o-transition: all 0.4s ease-in-out;
		transition: all 0.4s ease-in-out;
	}
	.device {
		display: block;
		position: absolute;
		width: 70%;
		left: 15%;
		bottom: -50px;
		-webkit-transition: all 0.4s ease-in-out;
		-o-transition: all 0.4s ease-in-out;
		transition: all 0.4s ease-in-out;
	}
	.ipad {
		width: 90%;
		left: 5%;
	}
	.product-title {
		display: block;
		position: inherit;
		width: 100%;
		margin: auto;
		text-align: center;
		opacity: 0;
		-webkit-transition: all 0.4s ease-in-out;
		-o-transition: all 0.4s ease-in-out;
		transition: all 0.4s ease-in-out;
		h5 {
			line-height: 0;
		}
	}
	.product:hover .device {
		-webkit-transform: translate(10px, -50px) rotate(5deg);
		    -ms-transform: translate(10px, -50px) rotate(5deg);
		        transform: translate(10px, -50px) rotate(5deg);
		-webkit-transition: all 0.4s ease-in-out;
		-o-transition: all 0.4s ease-in-out;
		transition: all 0.4s ease-in-out;
	}
	.product:hover .device.ipad {
		-webkit-transform: translateY(-50px);
		    -ms-transform: translateY(-50px);
		        transform: translateY(-50px);
		-webkit-transition: all 0.4s ease-in-out;
		-o-transition: all 0.4s ease-in-out;
		transition: all 0.4s ease-in-out;
	}
	.product:hover .product-title {
		opacity: 100;
		-webkit-transform: translateY(-40px);
		    -ms-transform: translateY(-40px);
		        transform: translateY(-40px);
		position: relative;
		-webkit-transition: all 0.4s ease-in-out;
		-o-transition: all 0.4s ease-in-out;
		transition: all 0.4s ease-in-out;
	}
	.product:hover .product-box::before {
		background-color: @green;
		-webkit-transition: all 0.4s ease-in-out;
		-o-transition: all 0.4s ease-in-out;
		transition: all 0.4s ease-in-out;
	}
	.product-logo {
		display: block;
		max-height: 80px;
		width: auto;
		margin: auto;
		padding-bottom: 20px;
	}
	.phone {
		display: block;
		position: absolute;
		width: 70%;
		margin-left: 15%;
		margin-right: auto;
		bottom: 0;
		z-index: 1;
		overflow: hidden;
		-webkit-transition: 0.4s ease-in-out;
		-o-transition: 0.4s ease-in-out;
		transition: 0.4s ease-in-out;
	}
	.project-type {
		background-color: rgba(70, 255, 198, 0.2);
		padding: 6px 15px 5px;
		border-radius: 40px;
		-webkit-transform: translateY(-10px);
		    -ms-transform: translateY(-10px);
		        transform: translateY(-10px);
		text-transform: uppercase;
		font-weight: 400;
		letter-spacing: 2px;
		font-size: 10pt;
	}
}

#aboutpage {
	a {
		color: @green;
		display: inline-block;
		font-weight: 600;
		text-decoration: underline;
	}
	#hero {
		background-image: url(/assets/about-bg.png);
	}
	h4 {
		margin: 100px 0px 20px;
	}
	.content {
		margin-top: -40vh;
	}
	ul li {
		list-style: square;
	color: @white;
	display: list-item;
padding: 0;
	width: auto;
	background-color: rgba(0,0,0,0);
	margin: 0;
	border-radius: none;
		list-style-position: inside;
	}
	ul {
margin-bottom: 100px;
	}
	.skill-box {
		display: flex;
		float: left;
		img {
			width: 80px;
			padding: 0px 40px 40px 0px;
		}
		h6 {
			display: block;
		}
	}
}

#productpage {
	.hero {
		background-image: url(/assets/bg-productpage@2x.png);
		background-size: 150% 60vh;
		background-position: center top;
		background-repeat: no-repeat;
	}
	#topbar {
		background-color: @black;
	}
	h1 {
		font-size: 5em;
	}
	.sushitrain-hero {
		background-image: url(/assets/devices-sushitrain.png);
	}
	.amdc-hero {
		background-image: url(/assets/devices-amdc@2x.png);
	}
	.twentyperfit-hero {
		background-image: url(/assets/devices-20perfit@2x.png);
	}
	.vello-hero {
		background-image: url(/assets/devices-vello.png);
	}
	.wharfmanager-hero {
		background-image: url(/assets/devices-wharfmanager.png);
	}
	.travelapp-hero {
		background-image: url(/assets/devices-travelapp.png);
	}
	.project-hero {
		width: 100%;
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
		display: block;
		position: relative;
		margin: auto;
		height: 70vh;
	}
	.intro {
		margin-top: -100px;
	}
	.product-logo {
		height: 100px;
		margin-bottom: 20px;
	}
	.break {
		height: 100px;
	}
	.coming-soon {
		padding: 20px 30px;
		border: 2px dashed rgb(160, 65, 255);
		background-color: rgba(160, 65, 255, 0.2);
		color: rgb(160, 65, 255);
		border-radius: 15px;
		text-transform: uppercase;
		font-weight: 400;
		letter-spacing: 1px;
		display: inline-block;
		margin-top: 30px;
	}
	.project-type {
		background-color: rgba(70, 255, 198, 0.2);
		padding: 6px 15px 5px;
		border-radius: 40px;
		-webkit-transform: translateY(-10px);
		    -ms-transform: translateY(-10px);
		        transform: translateY(-10px);
		text-transform: uppercase;
		font-weight: 400;
		letter-spacing: 2px;
		font-size: 10pt;
	}
	.product-intro {
		color: @grey;
		font-size: 2rem;
		font-weight: 400;
		margin-bottom: 150px;
	}
	.row {
		margin-bottom: 50px;
	}
	.role-item {
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		margin: 15px 15px 0 0;
		color: @green;
		height: 60px;
		line-height: 60px;
		text-transform: uppercase;
		font-size: 12pt;
		padding: 10px;
		background-color: @transgreen;
		border-radius: 10px;
		letter-spacing: 1px;
		text-align: center;
	}
	.role-item span {
		color: @black;
		height: 20px;
		line-height: 20px;
		font-size: 18pt;
		padding: 20px 30px;
		margin-left: 20px;
		background-color: @green;
		text-transform: none;
		border-radius: 5px;
	}
	.products-used {
		margin: 20px 0px;
		font-size: 18pt;
	}
	.icons {
		display: block;
		position: relative;
		margin: 30px 0px;
	}
	.icon {
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		width: 50px;
		padding: 0px 10px;
	}
	.sketch {
		background-image: url(/icons/sketch.png);
	}
	.xd {
		background-image: url(/icons/xd.png);
	}
	.zeplin {
		background-image: url(/icons/zeplin.png);
	}
	.invision {
		background-image: url(/icons/invision.png);
	}
	h5 {
		color: @green;
		margin-top: 50px;
	}
	.design-outcomes {
		margin-top: 200px;
	}
	.prototype {
		margin: 100px 0px;
		.title {
			padding-top: 50px;
			padding-bottom: 50px;
		}
		.title span {
			display: inline-block;
			font-size: 12pt;
			padding: 7px 15px;
			border-radius: 25px;
			background-color: @transgreen;
			text-transform: uppercase;
			margin: 0px 0px 15px -10px;
			letter-spacing: 2px;
		}
		.device {
			margin-top: 20px;
			width: 278px;
			max-width: 100%;
			height: 600px;
			max-height: 100%;
			display: block;
			margin: auto;
			border: 14px solid @black;
			border-radius: 40px;
			-webkit-box-shadow: 0px 0px 40px rgba(255, 255, 255, 0.2);
			        box-shadow: 0px 0px 40px rgba(255, 255, 255, 0.2);
			z-index: 2;
		}
		iframe {
			margin-top: 20px;
			width: 278px;
			max-width: 100%;
			height: 600px;
			max-height: 100%;
			display: block;
			margin: auto;
			border: 14px solid @black;
			border-radius: 40px;
			-webkit-box-shadow: 0px 0px 40px rgba(255, 255, 255, 0.2);
			        box-shadow: 0px 0px 40px rgba(255, 255, 255, 0.2);
			z-index: 2;
		}
		.content {
			padding-top: 50px;
		}
	}
	.goal h4 {
		display: inline-block;
		margin: auto;
		float: left;
		padding: 20px 30px;
		border: solid 2px @green;
		border-radius: 10px;
		margin-bottom: 10px;
	}
	.goal p {
		display: inline-block;
		float: left;
	}
	.owl-stage-outer {
		display: block;
		position: relative;
		height: 80vh;
		margin-top: 200px;
		margin-bottom: 300px;
		overflow: visible;
	}
	.owl-stage {
		display: block;
		position: absolute;
	}
	.owl-nav button {
		border: 2px solid @green;
	}
	.owl-item {
		display: block;
		width: 100%;
	}
	.owl-item p {
		padding: 20px;
		max-width: 600px;
		margin: auto;
		color: @grey;
	}
	.owl-item h3 {
		padding: 20px;
		max-width: 600px;
		margin: auto;
	}
	.owl-item {
		img {
			opacity: 0.3;
		}
		video {
			opacity: 0.3;
		}
	}
	.center {
		img {
			opacity: 1;
		}
		video {
			opacity: 1;
		}
	}
	.owl-item::before {
		content: '';
		display: block;
		position: absolute;
		top: -80px;
		margin: calc(50% - 135px);
		max-width: 270px;
		width: 270px;
		height: 580px;
		background-color: #1c1c1c;
		z-index: -1;
		border-radius: 27px;
	}
	.no-before {
		.owl-item::before {
			display: none;
		}
	}
	.center {
		opacity: 1;
		color: @white;
	}
	.center p {
		color: @white;
	}
	.slide-intro {
		padding-top: 100px;
	}
	.deviceview {
		max-width: 270px;
		width: 100%;
		max-height: 80%;
		display: block;
		margin: auto;
		border: 14px solid @black;
		border-radius: 40px;
		-webkit-box-shadow: 0px 0px 40px rgba(255, 255, 255, 0.2);
		        box-shadow: 0px 0px 40px rgba(255, 255, 255, 0.2);
		background-color: @darkgrey !important;
		z-index: 2;
	}
	.webview {
		max-width: 774px;
		width: 90%;
		max-height: 600px;
		display: block;
		margin: auto;
		border: 14px solid @black;
		border-radius: calc(100vw * 0.02);
		-webkit-box-shadow: 0px 0px 40px rgba(255, 255, 255, 0.2);
		        box-shadow: 0px 0px 40px rgba(255, 255, 255, 0.2);
		z-index: 2;
	}
}

#navigate-projects {
	display: block;
	position: relative;
	width: 100%;
	height: 180px;
	margin-top: 100px;
	font-size: 2em;
	font-weight: 700;
}

.previous {
	display: inline-block;
	position: relative;
	height: 100%;
	line-height: 180px;
	text-align: center;
	float: left;
	width: 50%;
	background-color: @transpurple;
	outline: solid 2px black;
	color: @purple;
	-webkit-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

.next {
	display: inline-block;
	position: relative;
	height: 100%;
	line-height: 180px;
	text-align: center;
	float: left;
	width: 50%;
	background-color: @transgreen;
	outline: solid 2px black;
	color: @green;
	-webkit-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

.previous:hover {
	background-color: @purple;
	color: @white;
	-webkit-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

.next:hover {
	background-color: @green;
	color: @white;
	-webkit-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

.endproject {
	background-color: @black;
	font-size: 24pt;
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 0px;
	padding: 200px 0px;
	color: @white ;
	-webkit-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

.endproject:hover {
	color: @green;
}

.endproject a {
	color: @white;
}

.endproject a:hover {
	color: @green;
}

.endproject a:visited {
	color: @white;
}

.endproject i {
	-webkit-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

.endproject a:hover {
	color: @green!important;
}

.endproject a:hover i {
	-webkit-transform: translateX(-10px);
	    -ms-transform: translateX(-10px);
	        transform: translateX(-10px);
	-webkit-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

#contacts {
	height: 500px;
	margin-top: 20vh;
}

.contact-item {
	color: @white;
	display: block;
	position: relative;
	max-height: 250px;
	width: 100%;
	text-align: center;
	padding: 40px 0px 20px;
	margin: 10px auto;
	border-radius: 5px;
}

.contact-item::after {
	content: '';
	display: block;
	width: 0%;
	height: 5px;
	background-color: @green;
	-webkit-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

.contact-item:hover.contact-item::after {
	width: 100%;
	-webkit-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

@media only screen and (max-width: 640px) {
	body {
		background-size: 2000px;
	}
	#hero {
		height: 70vh;
		background-image: url(/assets/hero-mobile.png);
		.herotext {
			margin-top: 50vh;
			position: relative;
		}
	}
	#aboutpage {
		#hero {
			background-image: url(/assets/about-hero-mobile.png);
		}
	}
	#work {
		margin-top: 400px;
	}
	#topbar {
		nav {
			display: none;
		}
		a {
			padding: 0;
		}
	}
	#mobilenavbtn {
		display: block;
	}
	#contacts {
		height: 1000px;
		margin-top: 0;
	}
	#navigate-projects {
		position: fixed;
		bottom: 0;
		font-size: 1em;
		height: 70px;
		z-index: 10;
	}
	.next,
	.previous {
		height: 70px;
		line-height: 60px;
	}
	.next {
		background-color: @darkgreen;
	}
	.previous {
		background-color: @darkpurple;
		width: calc(50% - 1px);
	}
	.productname {
		opacity: 100 !important;
	}
	.hide-desktop {
		display: block !important;
	}
	#productpage {
		h1 {
			font-size: 4em;
		}
		.mobile-cover {
			background-size: cover;
		}
		.amdc-hero {
			background-image: url(/assets/devices-amdc-mobile@2x.png);
		}
		.wharfmanager-hero {
			background-image: url(/assets/devices-wharfmanager-mobile.png);
		}
		.owl-item::before {
			display: none;
		}
		.slide-intro::before {
			content: '';
			display: block;
			position: absolute;
			top: -40px;
			margin: calc(50% - 135px);
			max-width: 270px;
			width: 270px;
			height: 580px;
			background-color: #1c1c1c;
			z-index: -1;
			border-radius: 27px;
		}
	}
	#work {
		.third-col {
			margin-top: 0px;
		}
		.first-col {
			margin-top: 0px;
		}
		.product-title {
			opacity: 100;
			-webkit-transform: translateY(-40px);
			    -ms-transform: translateY(-40px);
			        transform: translateY(-40px);
			position: relative;
		}
	}
}