/* CSS Stylesheet */

* {
	box-sizing: border-box;
	font-family: 'Inter', sans-serif;
	line-height: 1;
	margin: 0;
}

.mobile-hide {
	display: block;
}

.mobile-show {
	display: none;
}

.container {
	width: 78.33333333%; /* 1316px / 1680px */
	margin: 0 auto;
}

a {
	color: #2447D2;
	padding: 4px 0;
	position: relative;
	text-decoration: none;
}

	a.underline:after {
		border-bottom: solid 1.5px #888;
		bottom: 0;
		content: "";
		left: 0;
	    position: absolute;
	    transform: scaleX(0);
	    transform-origin: right;
	    transition: transform 0.25s;
	    width: 100%;
	}

	a.underline:hover:after {
	    transform: scaleX(1);
	    transform-origin: left;
	}

	@keyframes underline {
		from {
      		transform: scaleX(0);
    	}
    	to {
      		transform: scaleX(1);
    	}
	}

header {
	background: #111;
	padding: 24px;
}

	header nav {
		display: flex;
		justify-content: flex-end;
	}

	header nav ul {
		display: flex;
		flex-flow: row wrap;
		list-style: none;
		padding: 0;
	}

	header nav a {
		color: #ccc;
		display: inline-block;
		margin: 0 16px;
		padding: 6px 0;
	}

	header nav .underline:hover:after {
	    transform: scaleX(1);
	    transform-origin: left;
	}

.hero {
	background: #111;
	padding: 146px 0;
}

	.hero .label {
		color: #ccc;
		display: inline-block;
		font-size: 1.25em; /* 20px / 16px */
		letter-spacing: 2px;
		margin-bottom: 24px;
		text-transform: uppercase;
	}

	.hero h1 {
		color: #fff;
		font-size: 6em; /* 96px / 16px */
		font-weight: 500;
		letter-spacing: -2px;
		line-height: .95;
		max-width: 55.69908815%; /* 733px / 1316px */
		margin-bottom: 32px;
		margin-left: -.3799392097%; /* 5px / 1316px */
	}

	.hero p {
		color: #aaa;
		font-size: 1.5em; /* 24px / 16px */
		line-height: 1.4;
		margin-bottom: 200px;
		max-width: 36.32218845%; /* 478px / 1316px */
	}

	.hero .scroll-prompter {
		animation: bounce 1600ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
	}

	@keyframes bounce {
		50% {
			transform: translateY(-15px);
		}
	}

	.hero-image {
		background: #222;
		border-radius: 32px 0 0 80px;
		top: 588px;
		height: 601px;
		position: absolute;
		right: 0;
		width: 962px;
	}

		.hero-image img {
			border-radius: 32px 0 0 80px;
		}

.cb1 {
	padding: 557px 0 200px;
	text-align: center;
}

	.cb1 .mobile-hero-image {
		display: none;
	}

	.cb1 .mobile-client-logos {
		display: none;
	}

.cb3 {
	background: #222;
	padding: 200px 0 120px;
}

	.cb3 .title {
		border-bottom: 1px solid #555;
		border-top: 1px solid #555;
		color: #fff;
		font-size: 5.75em; /* 92px / 16px */
		font-weight: 500;
		letter-spacing: -2px;
		margin: 0 auto 100px;
		padding: 32px 0;
		width: 54.76190476%; /* 1048px / 1680px */
	}

	.cb3 .container {
		overflow: auto;
	}

	.cb3 .left,
	.cb3 .right {
		color: #ccc;
		display: inline-block;
		float: left;
		font-size: 1.3125em; /* 21px / 16px */
		line-height: 1.7;
	}

	.cb3 .left {
		text-align: center;
		width: 50%;
	}

	.cb3 .right {
		padding: 0 3%;
		width: 44%;
	}

	.cb3 section {
		margin-bottom: 80px;
	}

	.cb3 .heading {
		color: #888;
		display: block;
		font-size: .7142857143em; /* 15px / 21px */
		letter-spacing: 2px;
		margin-bottom: 20px;
		text-transform: uppercase;
	}

		.cb3 .heading svg {
			margin-right: 3px;
			position: relative;
			stroke: rgb(85, 85, 85);
			stroke-width: 2px;
			top: -5px;
		}

	.cb3 p {
		line-height: 1.7;
		margin-bottom: 20px;
	}

	.cb3 ul {
		padding: 0;
	}

	.cb3 li {
		border-bottom: 1px solid #555;
		font-size: 1.380952381em; /* 29px / 21px */
		list-style: none;
		padding: 20px;
	}

	.cb3 li:first-child {
		padding-top: 8px;
	}

.cb4 {
	background: #e8e8e8;
	padding: 200px 0 100px;
}

	.cb4 .slider-container {
		margin-bottom: 200px;
		overflow: hidden;
	}

	.cb4 .slider-background {
		animation: animate-slide 60s linear infinite;
		background: url("../img/devices.png") repeat-x;
		height: 320px;
		width: 20360px;
	}

	.cb4 .container {
		width: 66.66666667%; /* 1120px / 1680px */
	}

	.cb4 .row {
		border-bottom: 1.5px solid #2B2B2B;
		overflow: auto;
		padding-bottom: 24px;
	}

	.cb4 .left,
	.cb4 .right {
		display: inline-flex;
		float: left;
	}

	.cb4 .left {
		width: 71.42857143%; /* 800px / 1120px */
	}

	.cb4 .right {
		text-align: right;
		width: 28.17142857%; /* 320px / 1120px */
	}

	.cb4 .title {
		font-size: 9.25em; /* 148px / 16px */
		letter-spacing: -6px;
	}

	.cb4 ul {
		list-style: none;
		margin-top: 37px; /* 148px - 111px */
		padding: 0;
		width: 100%;
	}

	.cb4 li {
		font-size: 1.3125em; /* 21px / 16px */
		margin-bottom: 16px;
	}

	.cb4 a {
		color: #000;
	}

	.cb4 a:hover:after {
		border-bottom: solid 1.5px #000;
	}

	.cb4 .icon-email {
		position: relative;
		top: -1px;
	}

	.cb4 .icon-instagram {
		position: relative;
		bottom: -1px;
	}

@keyframes animate-slide {
  0%{
    transform: translate3d(0, 0, 0);
  }
  100%{
    transform: translate3d(-2036px, 0, 0); /* Image Width */
  }
}

.portfolio {
	margin-bottom: 48px;
	text-align: left;
}

	.portfolio .carousel {
		border-radius: 32px;
	}

		.portfolio .carousel > #pointer-dot {
			display: none;
		}

	.portfolio .title {
		display: block;
		font-size: 4.5em; /* 72px / 16px */
		font-weight: 500;
		letter-spacing: -4px;
		margin-bottom: 32px;
		margin-left: 2.671755725%; /* 28px / 1048px */
	}

	.portfolio .slide {
		margin: 20px;
		overflow: hidden;
		text-align: center;
	}

		.portfolio .slide img {
			border-radius: 32px;
		}

	.portfolio .flickity-prev-next-button {
		height: 64px;
		width: 64px;
	}

	.portfolio .flickity-button {
		color: #2447D2;
	}

	.portfolio .flickity-button-icon {
		height: 30%;
		left: 35%;
		top: 35%;
		width: 30%;
	}

	.portfolio .flickity-page-dots {
		bottom: -16px;
	}

		.portfolio .flickity-page-dots .dot {
			background: #d8d8d8;
			margin: 0 5px;
			opacity: 1;
		}

		.portfolio .flickity-page-dots .is-selected {
			background: #2447D2;
		}

.project-info,
.mobile-project-info {
	color: #333;
	font-size: .9375em; /* 15px / 16px */
	margin: 0 auto 200px;
	overflow: auto;
	width: 62.38095238%; /* 991px / 1680px */
}

	.project-info .col-2,
	.mobile-project-info .col-2 {
		display: inline-block;
		float: left;
		line-height: 1.6;
		width: 50%;
	}

	.project-info .label,
	.mobile-project-info .label {
		color: #8C949C;
		font-size: .933333333em; /* 14px / 15px */
	}

.mobile-project-info {
	display: none;
}