/*
Theme Name: Corey Donenfeld
Theme URI: http://www.amberweinberg.com/super-hijinksified-lightweight-wordpress-theme
Description: This theme is a derivative of Super Hijinksified, custom coded for myself (Corey Donenfeld).
Author: Corey Donenfeld
Author URI: https://coreydonenfeld.com
Version: 1.0

*/

/***************************************************************************************************************************************************************************************/

/*BODY STYLES*/

/***************************************************************************************************************************************************************************************/

/* General Styles */
::selection {
	background: #FFE00B;
	color: #151515
}

body,
html {
	margin: 0;
	font-family: poynter-oldstyle-display, serif;
	background: #FFFCD5;
}

body {
	position: relative;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

body.case-study {
	overflow-x: unset;
}

section {
	padding: 140px 0;
	text-align: left;
}

.container {
	max-width: 1180px;
	padding: 0 20px;
	clear: both;
	margin: 0 auto;
	display: block;
}

.flex-wrapper,
.flex-container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0;
	font-weight: normal
}

a {
	text-decoration: none;
}

.nomargin {
	margin: 0 !important;
}

/* Title Group - Universal Styles */
.title-group {
	display: block;
	text-align: left;
	max-width: 600px;
}

.title-group.center {
	text-align: center;
}

.title-group .subtitle {
	font-size: 14px;
	color: #151515;
	margin: 0 0 15px;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 600;
	font-family: freight-sans-pro, sans-serif;
}

.title-group .headline {
	font-size: 42px;
	font-weight: 700;
	color: #151515;
	overflow: hidden;
}

.title-group .headline span {
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.title-group .headline p {
	font-weight: 700;
}

/* Custom Cursor */
.mobile-menu.active *,
.mobile-menu.active {
	cursor: none !important;
}

.custom-cursor {
	position: fixed;
	top: 20px;
	left: 0;
	z-index: 5000000;
	pointer-events: none;
	mix-blend-mode: normal;
	transform-origin: center center;
}

.custom-cursor .pointer {
	position: absolute;
	height: 20px;
	width: 20px;
	background: rgba(0, 0, 0, 0.25);
	border-radius: 50%;
	transition: 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
	transform-origin: center center;
	top: 20px;
	left: 2px;
	transform: translate(-50%, -50%);
	filter: blur(0px);
}

.page-works {
	overflow: hidden;
}

.page-works .custom-cursor .pointer,
.full-contact .custom-cursor .pointer {
	background: rgba(255, 255, 255, 0.5);
	opacity: 1;
	visibility: visible;
}

.custom-cursor.white .pointer {
	background: rgba(255, 255, 255, 0.4);
	opacity: 0;
	visibility: hidden;
}

.custom-cursor.white .close {
	opacity: 1;
	visibility: visible;
	transform: rotate(0deg);
}

.custom-cursor.white .close .bar {
	width: 20px;
}

.custom-cursor.hover .close {
	opacity: 0;
	visibility: hidden;
	transform: rotate(90deg);
}

.custom-cursor.hover .pointer {
	height: 50px;
	width: 50px;
	opacity: 1;
	visibility: visible;
	filter: blur(3px);
}

.custom-cursor.image-hover .pointer {
	mix-blend-mode: multiply;
	background: rgba(255, 224, 11, .5);
	height: 50px;
	width: 50px;
	filter: blur(3px);
}

.custom-cursor.no-hover .pointer {
	height: 0px;
	width: 0px;
	opacity: 1;
	visibility: visible;
}

.custom-cursor.btn-hover .pointer {
	height: 40px;
	width: 40px;
	opacity: 1;
	visibility: visible;
	background: rgba(255, 224, 11, .5);
	filter: blur(3px);
}

.custom-cursor.disabled-hover .pointer {
	height: 24px;
	width: 24px;
	opacity: 1;
	visibility: visible;
	background: transparent;
	box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.3) inset;
}

.custom-cursor.social-hover .pointer,
.custom-cursor.company-hover .pointer {
	height: 36px;
	width: 36px;
	opacity: 1;
	visibility: visible;
	background: rgba(255, 255, 255, 0.5);
	filter: blur(3px);
}

.custom-cursor.submit-hover .pointer {
	height: 30px;
	width: 30px;
	opacity: 1;
	visibility: visible;
	background: rgba(255, 255, 255, 0.5);
	filter: blur(3px);
}

.custom-cursor.dark-section-hover .pointer {
	height: 20px;
	width: 20px;
	opacity: 1;
	visibility: visible;
	background: rgba(255, 255, 255, 0.5);
}

.custom-cursor.logo-hover .pointer {
	height: 40px;
	width: 40px;
	opacity: 1;
	visibility: visible;
	background: rgba(255, 224, 11, .5);
}

.custom-cursor.logo-hover .close {
	opacity: 0;
	visibility: hidden;
	transform: rotate(90deg);
}

.custom-cursor.project-hover .pointer {
	height: 40px;
	width: 40px;
	background: rgba(255, 255, 255, .5);
	filter: blur(3px);
}

.custom-cursor.white-hover .pointer {
	background: rgba(255, 255, 255, 0.5);
	filter: blur(3px);
}

.custom-cursor .close {
	position: absolute;
	top: 13px;
	left: -7px;
	opacity: 0;
	visibility: hidden;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.custom-cursor .close:before {
	position: absolute;
	content: "";
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 36px;
	width: 36px;
	box-shadow: 0 0 0 2px #FFF;
	z-index: -1;
	border-radius: 50%;
}

.custom-cursor .close .bar {
	background: #FFF;
	width: 20px;
	height: 2px;
	display: block;
	transition: 0.5s;
}

.custom-cursor .close .bar:nth-of-type(1) {
	transform: rotate(45deg);
}

.custom-cursor .close .bar:nth-of-type(2) {
	margin: -2px 0 0;
	transform: rotate(-45deg);
}

/* Preloader */
.preloader {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 100000000;
	animation: preloader 3s both;
	visibility: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.preloader:before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	height: 100%;
	width: 50%;
	background: #151515;
	animation: preload-left 2.85s cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
	z-index: 1;
}

.preloader:after {
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	height: 100%;
	width: 50%;
	background: #151515;
	animation: preload-right 2.85s .075s cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
}

.preloader .tagline,
.preloader .tagline .first-line,
.preloader .tagline .second-line {
	text-align: center;
	font-size: 36px;
	line-height: 64px;
	letter-spacing: -0.75px;
	color: #FFF;
	font-weight: 500;
	z-index: 100;
	position: relative;
	overflow: hidden;
	display: block;
}

.preloader .tagline.current span {
	animation-name: after-tagline;
}

.preloader .tagline span {
	font-weight: 400;
	animation: preload-tagline 2.85s cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
	display: block;
}

.preloader .tagline .second-line span {
	animation-delay: 0.15s;
}

.preloader .tagline strong {
	font-weight: 600;
}

.preloader .tagline .jumbo {
	font-size: 3.125rem;
	font-weight: bold;
}

.preloader .tagline .meta {
	font-size: 1.5rem;
	color: #fff;
	font-style: italic;
}

.preloader.active {
	visibility: visible;
	animation: afterload 2s cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
}

.preloader.active:before {
	animation: afterload-left 1.85s cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
	transform: translateY(0);
	background: #151515;
}

.preloader.active:after {
	animation: afterload-right 1.85s 0.15s cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
	transform: translateY(0);
	background: #151515;
}

.preloader.active .tagline span {
	animation: afterload-tagline 1.85s cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
}

/* Input Styles - Redefining Values - Resetting Default Looks */
.form {
	text-align: center;
}

.form-item {
	position: relative;
	overflow: hidden;
	margin: 20px 0;
}

.form-item::after {
	position: absolute;
	content: "!";
	top: 48px;
	right: 20px;
	background: #EC574E;
	color: #FFF;
	padding: 8px 10px;
	border-radius: 0;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
	transform: translateX(100px);
	transition: 0.5s;
}

.form-item.error::after {
	transform: translateX(0);
}

.form-item label {
	font-size: 20px;
	font-weight: bold;
	text-transform: capitalize;
	color: #253345;
	margin-bottom: 10px;
	display: block;
	text-align: left;
}

input,
textarea {
	position: relative;
	width: 100%;
	padding: 16px 24px;
	margin: 6px 0 12px 0;
	border: none;
	box-sizing: border-box;
	transition: 0.5s;
	background-color: #FFF;
	color: #777 !important;
	font-size: 16px;
	border-radius: 0 !important;
	position: relative;
	font-family: inherit;
}

input:hover,
select:hover,
textarea:hover {
	border-color: #888 !important;
}

input[type='text']:focus,
input[type='email']:focus,
input[type='number']:focus,
input[type]:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: #2f6dc5 !important;
	color: #253345 !important;
}

input::placeholder,
textarea::placeholder {
	color: #777;
	transition: 0.5s;
}

input:focus::placeholder {
	color: #151515;
}

.submit-form {
	color: #fff !important;
	font-size: 20px;
	background: #272B32;
	padding: 14px 80px;
	text-decoration: none !important;
	transition: 0.5s;
	display: inline-table;
	border: none;
	-webkit-appearance: none;
	border-radius: 0 !important;
	cursor: pointer;
	width: 100%;
}

/* Jarallax */
.jarallax {
	position: relative;
	z-index: 0;
}

.jarallax>.jarallax-img {
	position: absolute;
	object-fit: cover;
	font-family: 'object-fit: cover;';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.parallax-window {
	min-height: 400px;
	background: transparent;
}

/* Scroll Animations */
[data-aos="fade-in"] {
	opacity: 0;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

[data-aos="fade-in"].aos-animate {
	opacity: 1;
}

[data-aos="slide-up"] {
	display: block;
	transform: translateY(150px);
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

[data-aos="slide-up"].aos-animate {
	transform: translateY(0);
}

[data-aos="feature"] .aos-animate.icon:before {
	animation: feature-icon-before 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
}

[data-aos="feature"]:nth-of-type(2) .aos-animate.icon:before {
	animation: feature-icon-before 0.5s 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
}

[data-aos="feature"]:nth-of-type(3) .aos-animate.icon::before {
	animation: feature-icon-before 0.5s 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
}

[data-aos="btn-after"].aos-animate:after {
	animation: btn-before 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) both
}

[data-aos="title-fade"] {
	opacity: 0;
	transform: translateY(25px);
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

[data-aos="title-fade"].aos-animate {
	opacity: 1;
	transform: translateY(0);
}

[data-aos="featured-project-fade"] {
	opacity: 0;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

[data-aos="featured-project-fade"].aos-animate {
	opacity: 1;
}

[data-aos="project-fade-up"] {
	opacity: 0;
	transform: translateY(100px);
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

[data-aos="project-fade-up"].aos-animate {
	opacity: 1;
	transform: translateY(0)
}

.featured-projects .project[data-aos="project-fade-up"] .overflow-image .overlay-animate {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 100;
	transition: 0.5s 1.15s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	opacity: 1;
	mix-blend-mode: normal !important;
}

.featured-projects .project[data-aos="project-fade-up"].aos-animate .overflow-image .overlay-animate {
	height: 0;
	bottom: 0;
	top: unset;
}

/* Navbar */
.navbar {
	position: fixed;
	top: 10px;
	padding: 20px 0;
	width: 100%;
	left: 0;
	z-index: 1000001;
	transition: 0.35s 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	animation: navbar-in 0.5s 2.6s cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
}

.navbar:before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: #FFFCD5;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	z-index: -1;
}

.navbar .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.navbar .left .logo,
.navbar .left svg {
	height: 30px;
	width: auto;
	transition: 0.5s;
	pointer-events: none;
	display: block;
}

header svg .st0 {
	transition: .35s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

header.active svg .st0:nth-child(n + 4) {
	opacity: 0;
}

header.active .company-logo:hover svg .st0 {
	opacity: 1;
}

.navbar .left .company-logo {
	transition: 0.5s;
	display: block;
}

/* 
.navbar .left .company-logo:hover {
	transform: rotate(180deg);
} */

.navbar .right nav ul,
.navbar .right nav {
	display: flex;
	align-items: center;
	justify-content: center;
	list-style-type: none;
}

.navbar .right nav ul li {
	margin-right: 40px;
	/* font-family: freight-sans-pro, sans-serif; */
}

.navbar .right nav ul li:last-of-type {
	margin-right: 0;
}

.navbar .right nav ul li a {
	font-size: 18px;
	color: #151515;
	position: relative;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.navbar .right nav ul li a:hover:after {
	width: 100%;
	left: 0;
	background: #151515;
}

.navbar .right nav ul li.current-menu-item a,
.case-study .navbar .right nav ul li:nth-of-type(2) a {
	font-weight: 700;
	color: #151515;
}

.navbar .right nav ul li a:after {
	position: absolute;
	content: "";
	bottom: -6px;
	left: unset;
	right: 0;
	width: 0%;
	height: 2px;
	background: #151515;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.navbar .right nav ul li.current-menu-item a:after,
.case-study .navbar .right nav ul li:nth-of-type(2) a:after {
	left: 0;
	width: 100%;
}

/* Navbar - Sticky Nav */
.navbar.active {
	top: 0;
	transition-delay: 0s;
}

.navbar.active:before {
	bottom: 0;
	top: unset;
	height: 100%;
}

/* Light Navbar - White Links & Logo */
.light-navbar header svg .st0 {
	fill: #fff;
}

.light-navbar .navbar nav ul li a {
	color: #fff;
}

.light-navbar .navbar nav ul li a:after {
	background: #fff;
}

.light-navbar .navbar nav ul li a:hover:after {
	background: #FFF;
}

.light-navbar .navbar nav ul li.current-menu-item a {
	color: #FFF
}

.light-navbar .navbar nav ul li.current-menu-item a:after {
	background: #FFF;
}

.light-navbar .navbar .menu-icon .menu-bar {
	background: #FFF;
}

/* Navbar - Active States */
.navbar.menu-active {
	background: transparent !important;
	box-shadow: none !important;
}

.navbar.menu-active:before {
	background: transparent !important;
	box-shadow: none !important;
}

.navbar.menu-active svg .st0 {
	fill: #fff;
}

.navbar .menu-icon {
	display: block;
	position: relative;
	z-index: 10000002;
	padding: 10px;
	margin: -10px 0;
	cursor: pointer;
	pointer-events: auto;
}

.navbar .menu-icon .menu-bar {
	width: 30px;
	height: 3px;
	background: #151515;
	display: block;
	margin: 8px 0;
	transition: 0.5s;
	position: relative;
	overflow: hidden;
	transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.navbar .menu-icon .menu-bar:nth-of-type(1) {
	transition-delay: 0.3s
}

.navbar .menu-icon .menu-bar:nth-of-type(2) {
	transition-delay: 0.5s
}

.navbar .menu-icon .menu-bar:nth-of-type(3) {
	transition-delay: 0.7s
}

.navbar .menu-icon .menu-bar:before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background: #A5ACB4;
	transition: 0.5s;
}

.navbar .menu-icon:hover .menu-bar:before {
	width: 100%;
}

.navbar .menu-icon .menu-bar:nth-of-type(2):before {
	transition-delay: 0.15s !important;
}

.navbar .menu-icon .menu-bar:nth-of-type(3):before {
	transition-delay: 0.3s !important;
}

.navbar .menu-icon .close-menu {
	padding: 33px 0 0;
	position: relative;
	margin-top: -33px;
	display: block;
	overflow: hidden;
}

.navbar .menu-icon .close-menu .menu-bar:nth-of-type(1) {
	margin-top: -22px;
	transform: rotate(45deg) translate(-40px);
	transition-delay: 0.1s;
}

.navbar .menu-icon .close-menu .menu-bar:nth-of-type(2) {
	position: relative;
	top: -11px;
	transform: rotate(-45deg) translate(40px);
	transition-delay: 0.2s;
}

.navbar .menu-icon.active .menu-bar {
	background: #D1CFBB !important;
	overflow: hidden;
	display: block;
}

.navbar .menu-icon.active .menu-bar:before {
	background: #FFF !important;
}

.navbar .menu-icon.active .menu-bar {
	width: 0;
}

.navbar .menu-icon.active .menu-bar:nth-of-type(1) {
	transition-delay: 0s;
}

.navbar .menu-icon.active .menu-bar:nth-of-type(2) {
	transition-delay: 0.1s;
}

.navbar .menu-icon.active .menu-bar:nth-of-type(3) {
	transition-delay: 0.2s;
}

.navbar .menu-icon.active .close-menu .menu-bar {
	width: 30px;
}

.navbar .menu-icon.active .close-menu .menu-bar:nth-of-type(1) {
	transform: rotate(45deg) translate(0);
	transition-delay: 0.5s;
}

.navbar .menu-icon.active .close-menu .menu-bar:nth-of-type(2) {
	transform: rotate(-45deg) translate(0);
	transition-delay: 0.7s;
}

/* Mobile Menu */
.mobile-menu {
	position: fixed;
	z-index: 1000000;
	background: #151515;
	top: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86), 0.5s visibility;
	transition-delay: 0.4s;
	background: #151515;
}

.mobile-menu .main {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	display: block;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	text-align: left;
	z-index: 2;
	width: calc(100% - 36%);
}

.mobile-menu .main ul {
	list-style-type: none;
	padding: 0;
	width: 0;
}

.mobile-menu .main ul li a {
	font-size: 2.5rem;
	color: #FFF;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	display: block;
	margin: 10px 4px;
	position: relative;
	overflow: hidden;
}

.mobile-menu .main ul li a {
	position: relative;
	padding: 8px 16px;
	overflow: hidden;
	display: inline-block;
}

.mobile-menu .main ul li a:hover {
	color: #FFF;
}

.mobile-menu .main ul li.current-menu-item a {
	color: #151515;
	font-weight: bold;
	color: #FFF
}

.mobile-menu .right {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 18%;
	transition: 0.5s;
	opacity: 0;
	text-align: right;
}

.mobile-menu .right .info {
	color: #E3E1CB;
	font-size: 20px;
	width: 50%;
	margin: 0 0 40px auto;
	display: block;
}

.mobile-menu .active .right {
	opacity: 1;
}

/* Mobile Menu - Open */
.mobile-menu.active {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.mobile-menu.active .main .link span {
	animation: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.mobile-menu.active .main .link:nth-of-type(1) span {
	animation: 0.5s menu-link;
}

.mobile-menu.active .main .link:nth-of-type(2) span {
	animation: 0.8s menu-link;
}

.mobile-menu.active .main .link:nth-of-type(3) span {
	animation: 1.1s menu-link;
}

.mobile-menu.active .main .link:nth-of-type(4) span {
	animation: 1.4s menu-link;
}

.mobile-menu.active .right .info {
	animation: menu-info 1.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Buttons - Universal Styles */
.btn {
	padding: 18px 32px;
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	font-weight: bold;
	position: relative;
	z-index: 1;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	cursor: pointer;
	overflow: hidden;
	transition-delay: 0s !important;
	text-transform: uppercase !important;
	letter-spacing: 1.5px;
	font-family: freight-sans-pro, sans-serif;
}

.btn:before {
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	width: 0%;
	height: 100%;
	background: #151515;
	z-index: -1;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.btn-after:after {
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	z-index: 100;
	background: #151515;
	height: 100%;
	width: 100%;
}

.btn svg {
	margin-left: 50px;
	font-size: 26px;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	color: #151515;
}

.btn.yellow {
	background: #FFE00B;
	color: #151515;
	text-transform: lowercase;
	border: solid 2px #151515;
	box-shadow: 4px 4px #FFFCD5, 9px 9px #151515;
}

.btn.yellow:hover:before {
	width: 100%;
	left: 0;
	right: unset;
}

.btn.yellow:hover {
	box-shadow: 0px 0px #FFFCD5, 0px 0px #151515;
}

.btn.yellow:hover {
	color: #FFF;
}

.btn.yellow:hover svg {
	color: #FFF;
}

.btn.white {
	background: #ffffff;
	color: #151515;
	text-transform: lowercase;
}

.btn.white:before {
	background: #FFE00B;
}

.btn.white:hover:before {
	width: 100%;
	left: 0;
	right: unset;
}

.btn.white:hover {
	color: #151515;
}

.btn.white:hover svg {
	color: #151515;
}

.btn.small {
	padding: 14px 25px;
}

/* Buttons - Underline */
.btn-underline {
	font-size: 18px;
	line-height: 22px;
	font-weight: 600;
	color: #151515;
	position: relative;
	padding-bottom: 5px;
	box-shadow: 0 -1.5px rgba(0, 0, 0, 0.1) inset;
	z-index: 1;
	display: inline-block;
}

.btn-underline:after {
	position: absolute;
	content: "";
	bottom: 0;
	left: unset;
	right: 0;
	width: 0;
	height: 1.5px;
	background: #151515;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	z-index: -1;
}

.btn-underline:hover:after {
	left: 0;
	right: unset;
	width: 100%;
}

/* Homepage Hero */
.home-hero {
	background: #FFE00B;
	display: flex;
	align-items: center;
	/* height: 100vh; */
	padding: 200px 0 150px !important;
}

.home-hero .container:after {
	position: absolute;
    content: "";
    bottom: -330px;
    left: calc(100% - 500px);
    height: 800px;
    width: 800px;
    background: url(resources/images/fun-shapes.svg) no-repeat center;
    background-size: contain;
}

.home-hero .btn.yellow {
	background: #FFFCD5;
	box-shadow: 4px 4px #FFE00B, 9px 9px #151515;
}

.home-hero .btn.yellow:hover {
	box-shadow: 0 0 #FFE00B, 0 0 #151515;
}

.home-hero .container {
	width: 100%;
	position: relative;
}

.home-hero .headline {
	font-size: 50px;
	letter-spacing: -1.5px;
	color: #151515;
	font-weight: bold;
	margin: 0;
	line-height: 60px;
	overflow: hidden;
}

.home-hero .headline span {
	animation: headline-up 0.5s 2.35s cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
	display: block;
}

.home-hero .subheadline {
	font-size: 28px;
	color: #151515;
	margin: 20px 0 0;
	line-height: 40px;
	overflow: hidden;
	font-style: italic;
}

.home-hero .subheadline span {
	animation: home-headline 0.5s 2.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
	display: block;
}

.home-hero .copy {
	font-size: 28px;
	line-height: 40px;
	margin: 28px 0 40px;
	max-width: 607px;
	animation: opacity-fade 0.5s 2.7s cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
	color: #151515;
}

.home-hero .btn-wrapper {
	display: block;
	width: max-content;
	position: relative;
}

.home-hero .btn-wrapper:after {
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	z-index: 100;
	background: #151515;
	height: 100%;
	width: 0;
	animation: btn-before 0.5s 2.8s cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
}

/* About Hero */
.page-template-page-about {
	overflow: auto;
}

.about-hero {
	height: 600px;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	padding: 0;
}

.about-hero .container {
	width: 100%;
	top: 20px;
	position: relative;
}

.about-hero .background {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: -1;
	background: url(../images/about-background.jpeg) no-repeat center center;
	background-size: cover;
}

.about-hero .background:after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: -1;
	background: rgba(21, 21, 21, 0.75);
	mix-blend-mode: multiply;
}

.about-hero .subtitle {
	color: #FFE00B;
	font-size: 14px;
	margin: 0 0 15px;
	font-family: freight-sans-pro, sans-serif;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.about-hero .headline {
	color: #FFF;
	font-weight: bold;
	font-size: 40px;
	margin: 0 0 20px;
}

.about-hero .title {
	color: #FFF;
	font-size: 28px;
	line-height: 40px;
	font-weight: 400;
	margin: 0;
	max-width: 567px;
}

.about-hero .title strong {
	font-weight: 400;
}

/* Background Info */
.background-info .container {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex-direction: row-reverse;
}

.background-info .image {
	height: auto;
	width: 500px;
	max-height: 650px;
	margin-left: 50px;
	background: no-repeat center center;
	background-size: cover;
	position: sticky;
	top: 110px;
}

.background-info .text-group {
	display: block;
	max-width: 575px;
}

.background-info .text-group .subheadline {
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 1.5px;
	color: #151515;
	margin: 20px 0 15px;
	font-family: freight-sans-pro, sans-serif;
}

.background-info .text-group .headline {
	color: #151515;
	margin: 0 0 30px;
	font-size: 42px;
    font-weight: 700;
}

.background-info .text-group .headline p {
	font-weight: 700;
}

.background-info .text-group .headline a {
	font-weight: 700;
	color: #151515;
	position: relative;
	z-index: 1;
	display: inline-block;
}

.background-info .text-group .headline a:before {
	position: absolute;
	content: "";
	right: 0;
	width: 0;
	background: #f7785270;
	z-index: -1;
	bottom: 3px;
	height: 10px;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.background-info .text-group .headline a:hover:before {
	left: 0;
	width: 100%;
	right: unset;
}

.background-info .text-group .copy {
	font-size: 24px;
	color: #151515;
	line-height: 40px;
	margin: 0 0 16px;
}

.background-info .text-group .copy strong {
	color: #484848;
	font-weight: 600;
}

.background-info .text-group .copy:last-of-type {
	margin-bottom: 0;
}

/* Services */
.services {
	padding: 0;
}

.services .flex-container {
	align-items: flex-start;
	justify-content: space-between;
}

.services .title-wrapper {
	max-width: 550px;
}

.services .title-wrapper .title {
	margin: 40px 0 0;
	font-size: 30px;
	font-weight: 400;
	color: #151515;
	line-height: 40px;
	max-width: 500px;
	font-weight: 600;
}

.services .service-wrapper {
	align-items: flex-start;
	justify-content: flex-start;
	margin: 80px 0 0;
}

.services .service-wrapper .service-group {
	display: block;
	min-width: 250px;
	margin-right: 100px;
	margin-bottom: 50px;
	transition: 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	position: relative;
	z-index: 1;
}

.services .service-wrapper .service-group:last-of-type {
	margin-right: 0;
}

.services .service-wrapper .service-group .icon {
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.services .service-wrapper .service-group .icon svg {
	height: 40px;
	width: auto;
}

.services .service-wrapper .service-group:nth-of-type(1) .icon {
	background: #ffa929;
}

.services .service-wrapper .service-group:nth-of-type(2) .icon {
	background: #5429ff;
}

.services .service-wrapper .service-group:nth-of-type(3) .icon {
	background: #ff2929;
}

.services .service-wrapper .service-group .icon g g {
	fill: #fff;
}

.services .service-wrapper .service-group .title {
	font-size: 0.875rem;
	color: #151515;
	font-weight: 600;
	margin: 40px 0 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-family: freight-sans-pro, sans-serif;
}

.services .service-wrapper .service-group ul {
	padding: 0;
	margin: 0;
}

.services .service-wrapper .service-group ul li {
	font-size: 30px;
	line-height: 40px;
	margin-bottom: 10px;
	color: #151515;
	list-style-type: none;
}

.services .service-wrapper .service-group ul li:last-of-type {
	margin: 0;
}

/* Worked With */
.worked-with {
	padding: 100px 0 140px;
}

.worked-with .title-group {
	margin-bottom: 80px;
}

.worked-with .flex-container {
	flex-wrap: wrap;
}

.worked-with .company {
	width: calc(100% / 3 - (2 / 3 * 4px));
	margin-right: -2px;
    margin-bottom: -2px;
	height: 350px;
	position: relative;
	border: solid 2px #151515;
	z-index: 1;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	overflow: hidden;
}

.worked-with .company:nth-of-type(3n) {
	margin-right: 0;
}

.worked-with .company .scroll-animate-wrapper {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.worked-with .company .logo {
	mix-blend-mode: multiply;
	max-width: 180px;
	object-fit: contain;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	filter: grayscale(100%) brightness(0%);
	transition: 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.worked-with .company .logo.auto-height {
	height: auto;
}

.worked-with .company.dark .logo {
	filter: brightness(0%) invert(100%)
}

.worked-with .company .logo.small {
	transform: translate(-50%, -50%) scale(1.15);
}

.worked-with .company .logo.tiny {
	transform: translate(-50%, -50%) scale(1.8);
}

.worked-with .company .name {
	position: absolute;
	right: 24px;
	bottom: 24px;
	font-size: 14px;
	letter-spacing: 1.5px;
	color: #151515;
	text-transform: uppercase;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	padding: 8px;
	font-weight: 600;
}

.worked-with .company:hover {
	z-index: 2;
	background: #FFE00B;
}

.worked-with .company:hover .logo {
	filter: grayscale(0%) brightness(0%);
}

.worked-with .company.dark:hover .logo {
	filter: brightness(0%);
}

.worked-with .company .name {
	overflow: hidden;
	font-family: freight-sans-pro, sans-serif;
}

.worked-with .company .name span {
	display: block;
	transform: translateY(-50px) rotate(9deg);
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.worked-with .company:hover .name span {
	transform: translateY(0);
}

/* Quote */
.quote {
	background: #151515;
	padding: 175px 0;
	position: relative;
	z-index: 1;
}

.quote .background {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: url('../images/quote-background.jpeg') no-repeat center center;
	background-size: cover;
}

.quote .background:after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(21, 21, 21, 0.85);
	mix-blend-mode: multiply;
}

.grid {
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: -1;
}

.grid span {
	width: 100%;
	border-right: solid 1px rgba(255, 255, 255, 0.07);
	display: block;
	height: 100%;
}

.quote .main {
	margin: 0 auto;
	max-width: 650px;
	text-align: center;
	position: relative;
	z-index: 1;
}

.quote .main svg {
	height: 30px;
	width: auto;
	margin-bottom: 30px;
}

.quote .main svg path {
	fill: #FFE00B;
}

.quote .main .quote-body {
	font-size: 36px;
	color: #FFF;
	font-weight: 400;
}

.quote .main .quote-body strong {
	font-weight: 400;
	font-style: italic;
}

.quote .main .quote-author {
	font-size: 14px;
	color: #FFF;
	margin-top: 25px;
	font-family: freight-sans-pro, sans-serif;
	letter-spacing: 1.5px;
	font-weight: 700;
	text-transform: uppercase;
}

/* About */
.about {
	text-align: left;
	padding: 150px 0;
}

.about .heading {
	margin: 40px 0 80px;
	font-size: 30px;
	font-weight: 400;
	color: #151515;
	line-height: 40px;
	max-width: 600px;
	font-weight: 600;
}

.about .flex-wrapper {
	margin: 0 0 80px;
	display: grid;
    grid-gap: 40px;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	align-items: flex-start;
}

.about .feature {
	display: block;
	width: 100%;
}

.about .feature:last-of-type {
	margin-right: 0;
}

.about .feature .icon {
	position: relative;
	overflow: hidden;
	display: inline-block;
}

.about .feature .icon:before {
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: #151515;
	z-index: 10000;
}

.about .feature .icon img {
	fill: #151515;
	height: 60px;
	width: auto;
}

.about .feature .title {
	font-size: 0.875rem;
    color: #151515;
    font-weight: 600;
    margin: 40px 0 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: freight-sans-pro, sans-serif;
}

.about .feature .copy {
	font-weight: 400;
	color: #151515;
	margin: 0;
	font-size: 24px;
    line-height: 34px;
}

/* About - Dark Background (Callout) */
.about-callout {
	padding: 175px 0;
	background: #151515;
	position: relative;
}

.about-callout .background {
	position: absolute;
	content: "";
	top: 0;
	height: 100%;
	width: 100%;
	background: url(../images/why-choose-me.jpg) no-repeat center center;
	background-size: cover;
}

.about-callout .background:after {
	position: absolute;
	content: "";
	top: 0;
	height: 100%;
	width: 100%;
	background: #151515;
	opacity: 0.85;
	mix-blend-mode: multiply;
}

.about-callout .container {
	width: calc(100% - 40px);
	position: relative;
	z-index: 1;
}

.about-callout .subtitle {
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1.5px;
	margin: 0 0 20px;
	color: #FFF;
	overflow: hidden;
	font-family: freight-sans-pro, sans-serif;
}

.about-callout p {
	font-size: 28px;
	font-weight: 400;
	line-height: 40px;
	margin: 0 0 16px;
	color: #FFF;
	max-width: 750px;
}

.about-callout p:last-of-type {
	margin: 0;
	color: #FFFFFF;
}

/* Featured Projects */
.featured-projects {
	padding-bottom: 120px;
}

.featured-projects .flex-wrapper {
	align-items: flex-start;
}

.featured-projects .container {
	text-align: center;
}

.featured-projects .title-group {
	margin: 0 0 80px;
	max-width: 100%;
}

.featured-projects .project {
	width: calc(50% - 45px);
	margin-right: 90px;
	position: relative;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.featured-projects .project:nth-of-type(even) {
	margin-right: 0;
}

.featured-projects .project .overflow-image {
	display: block;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	overflow: hidden;
	position: relative;
}

.featured-projects .project .overflow-image .overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: #D94E79;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	opacity: 0;
	z-index: 1;
	mix-blend-mode: multiply;
}

.featured-projects .project .overflow-image .image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.featured-projects .project .text-group {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 40px 0px 30px;
	text-align: left;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.featured-projects .project:hover .text-group {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 25px;
	padding-bottom: 45px;
}

.featured-projects .project .text-group .meta-data {
	display: block;
}

.featured-projects .project .text-group .meta-data .title {
	font-size: 1rem;
	line-height: 1;
	color: #151515;
	margin: 0 0 14px;
	position: relative;
	z-index: 1;
	letter-spacing: 1px;
	font-weight: 600;
	text-transform: uppercase;
	font-family: freight-sans-pro, sans-serif;
	display: flex;
	align-items: center;
}

.featured-projects .project .text-group .meta-data .info:before {
	position: absolute;
	z-index: -1;
	content: "";
	bottom: 5px;
	right: 0;
	width: 0%;
	height: 8px;
	background: #FFE00B;
	opacity: .3;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.featured-projects .project .text-group .meta-data .info {
	font-size: 28px;
	font-weight: 500;
	color: #151515;
	line-height: 38px;
	margin: 0;
	position: relative;
	z-index: 1;
}

.featured-projects .project .text-group .arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
	margin-left: 10px;
}

.featured-projects .project .text-group .arrow svg {
	font-size: 18px;
	line-height: 1;
	transition: 0.5s;
	transform: rotate(-45deg);
}

.featured-projects .btn-underline {
	margin: 80px auto 0;
	text-align: center;
}

.featured-projects .project:hover .overflow-image {
	transform: scale(0.95);
}

.featured-projects .project:hover .overflow-image .overlay {
	opacity: 0.5;
}

.featured-projects .project:hover .overflow-image .image {
	transform: scale(1.1);
}

.featured-projects .project:hover .text-group .meta-data .info:before {
	width: 100%;
	left: 0;
	right: unset;
}

.featured-projects .project:hover .text-group .arrow svg {
	animation: project-arrow-hover 0.75s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

/* Contact Me */
.contact-circle {
	position: fixed;
	right: 50px;
	bottom: 50px;
	height: 70px;
	width: 70px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.contact-circle.hidden {
	transform: translateY(120px);
	opacity: 0;
}

.contact-circle:before {
	position: absolute;
	content: "";
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	background: #151515;
	box-shadow: 0 32px 100px rgba(0, 0, 0, 0.25);
	height: 100%;
	width: 100%;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	border-radius: 50%;
}

.contact-circle:hover:before {
	height: calc(100% + 7px);
	width: calc(100% + 7px);
}

.contact-circle .icon {
	font-size: 22px;
	color: #FFF
}

.full-contact section.contact {
	transform: translateY(-100%);
}

.full-contact .navbar {
	transform: translateY(-200px);
	transition-delay: 0s;
}

section.contact {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.contact {
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding: 0 !important;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.contact .flex-wrapper {
	justify-content: space-between;
	width: calc(100% - 40px);
}

.contact .start-project {
	text-align: left;
	padding: 200px 0 150px;
	width: 100%;
	/* transform: translateY(calc(-273px / 2 + 30px)); */
}

.contact .start-project .headline {
	font-size: 64px;
	line-height: 74px;
	letter-spacing: -2px;
	font-weight: bold;
	margin: 0 0 50px;
}

.contact .start-project .headline span {
	display: block;
}

.contact .start-project .btn-group {
	justify-content: flex-start;
}

/*
.contact .start-project .btn-group .btn-underline {
	margin-left: 50px;
	text-transform: lowercase;
}
*/

.contact .get-in-touch {
	text-align: left;
	width: 100%;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 120px 0;
	background: #FFE00B;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	z-index: 1000;
}

.contact .get-in-touch .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.contact .get-in-touch .subheadline {
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin: 0 0 15px;
	font-family: freight-sans-pro, sans-serif;;
	color: #151515;
}

.contact .get-in-touch .headline {
	color: #151515;
	font-size: 32px;
	font-weight: bold;
	margin: 0;
}

.contact .get-in-touch .link {
	color: rgba(0, 0, 0, 0.8);
	font-size: 18px;
	font-weight: 400;
	margin: 0 0 16px;
	display: block;
	width: max-content;
	position: relative;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.contact .get-in-touch .link:before {
	position: absolute;
	content: "";
	top: calc(50%);
	right: 0;
	width: 0;
	transform: translateY(-50%);
	height: 16px;
	background: rgba(255, 255, 255, 0.35);
	z-index: 1;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.contact .get-in-touch .link:hover:before {
	width: 100%;
	right: unset;
	left: 0;
}

.contact .get-in-touch .link:hover {
	color: #151515;
}

.contact .get-in-touch .link:last-of-type {
	margin-bottom: 0;
}

.contact .get-in-touch .socials {
	display: flex;
	align-items: center;
}

.contact .get-in-touch .socials a {
	overflow: hidden;
	margin-right: 12px;
	font-size: 20px;
	height: 45px;
	width: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: transparent;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	position: relative;
	z-index: 1;
}

.contact .get-in-touch .socials a:before {
	position: absolute;
	content: "";
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: #151515;
	z-index: -1;
	display: block;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	border-radius: 50%;
}

.contact .get-in-touch .socials a:last-of-type {
	margin-right: 0;
}

.contact .get-in-touch .socials a:hover {
	box-shadow: 0 0 0 1.5 rgba(0, 0, 0, 0);
}

.contact .get-in-touch .socials a:hover:before {
	top: 0;
	height: 100%;
	bottom: unset;
}

.contact .get-in-touch .socials a svg path {
	fill: rgba(0, 0, 0, 0.4);
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.contact .get-in-touch .socials a:hover svg path {
	fill: #FFF;
}

/* Browse More Projects */
.more-projects {
	padding: 120px 0 110px;
}

.more-projects .title-group {
	display: flex;
	justify-content: space-between;
}

.more-projects .title-group .btn.white {
	border: solid 2px #151515;
	box-shadow: 4px 4px #FFFCD5, 9px 9px #FFE00B;
}

.more-projects .title-group .btn.white:hover {
	box-shadow: none;
	border-color: #FFE00B;
}

/* My Works - Introduction */
.work-intro {
	padding: 200px 0 260px;
}

.work-intro .headline {
	font-size: 50px;
	letter-spacing: -1.6px;
}

.work-intro .copy {
	margin: 20px 0 0;
	font-size: 24px;
	line-height: 34px;
	color: #484848;
	font-weight: 400;
	max-width: 450px;
}

.work-intro .copy strong {
	color: #151515;
	font-weight: 500;
}

.work-intro .copy a {
	font-weight: 500;
	color: #151515;
	position: relative;
	z-index: 1;
}

.work-intro .copy a:before {
	position: absolute;
	content: "";
	right: 0;
	width: 0;
	background: #FFE00B;
	z-index: -1;
	bottom: 3px;
	height: 7px;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.work-intro .copy a:hover:before {
	left: 0;
	width: 100%;
	right: unset;
}

/* My Works */
.my-work.full {
	padding-top: 0;
}

.my-work.full .container {
	top: -150px;
	position: relative;
	margin-bottom: -150px;
}

.my-work.full .project {
	margin-bottom: 60px;
}

.my-work.full .project:nth-of-type(even) {
	margin-top: 80px;
}

/* Testimonials */
.reviews {
	text-align: center;
	padding: 120px 0 150px;
}

.reviews .title-group {
	text-align: center;
	margin: 0 auto;
}

.reviews .main {
	padding: 80px 0 50px;
	margin: 0 auto;
	max-width: 850px;
	position: relative;
}

.reviews .review {
	position: relative;
	overflow: hidden;
	z-index: 1;
	height: 0;
	margin: 0 auto;
	padding: 0;
	opacity: 0;
	transition: opacity 0.8s;
	display: block;
	width: auto;
}

.reviews .review.active {
	text-align: center;
	height: auto;
	margin: 0 auto;
	padding: 50px 64px;
	opacity: 1;
	border: solid 2px #151515;
	overflow: unset;
}

.reviews .review .icon {
	height: 60px;
	width: 60px;
	display: inline-block;
	border-radius: 50%;
	transition: 0.5s;
	position: relative;
	z-index: 23;
	object-fit: cover;
	margin-right: 16px;
}

.reviews .review .icon.small-icon {
	height: 40px;
	width: 40px;
}

.reviews .review .group {
	text-align: left;
}

.reviews .review .text {
	font-size: 1.125rem;
	color: #151515;
	margin: 0 0 30px;
	line-height: calc(30/18);
}

.reviews .review .text strong {
	color: #151515;
	font-weight: 400;
}

.reviews .review .author {
	font-size: 20px;
	margin: 0;
	text-align: left;
	color: #151515;
	font-weight: 600;
}

.reviews .review .author .position {
	margin: 5px 0 0;
	font-size: 0.875rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #151515;
	font-weight: 600;
	font-family: freight-sans-pro, sans-serif;
}

.reviews .review .author a {
	color: #151515;
	transition: 0.5s;
	overflow: hidden;
	display: block;
}

.reviews .review .author a img {
	display: block;
	height: 18px;
	width: auto;
	max-width: 150px;
	max-height: 40px;
	object-fit: contain;
}

.reviews .selectors {
	display: flex;
	align-items: center;
	position: absolute;
	right: 0;
	z-index: 20;
	bottom: 50px;
}

.reviews .selectors .btn {
	height: 60px;
	width: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: solid 2px #151515;
	color: #151515;
	background: #FFFCD5;
	position: relative;
	z-index: 1;
	overflow: hidden;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	cursor: not-allowed;
	padding: 0;
}

.reviews .selectors .btn:first-of-type {
	margin-right: -2px;
}

.reviews .selectors .btn.active:hover svg path {
	fill: #151515;
}

.reviews .selectors .btn.next-review.active:before {
	position: absolute;
	content: "";
	bottom: 0;
	right: 100%;
	width: 0%;
	background: #FFE00B;
	height: 100%;
	transition: 0.5s;
	animation: review-btn-right 0.5s;
	animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86) !important;
	z-index: -1;
}

.reviews .selectors .btn.next-review.active:hover:before {
	width: 100%;
	animation: review-btn-right-hover 0.5s forwards
}

.reviews .selectors .btn.last-review.active:before {
	position: absolute;
	content: "";
	bottom: 0;
	right: -100%;
	width: 0%;
	background: #FFE00B;
	height: 100%;
	transition: 0.5s;
	animation: review-btn-left 0.5s;
	animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86) !important;
	z-index: -1;
}

.reviews .selectors .btn.last-review.active:hover:before {
	width: 100%;
	animation: review-btn-left-hover 0.5s forwards
}

.reviews .selectors .btn.active {
	background: #151515;
	color: #FFF;
	cursor: pointer;
}

.reviews .selectors .btn svg {
	font-size: 18px;
	margin-left: 0;
}

.reviews .selectors .btn svg path {
	transition: 0.5s cubic-bezier(0.86, 0, 0.07, 1);
}

.reviews .selectors .btn.active svg path {
	fill: #FFF;
}

.reviews .selector {
	display: inline-flex;
	margin: 40px 0 0;
	position: absolute;
	left: 30px;
}

.reviews .selector .option {
	border-radius: 50%;
	width: 40px;
	height: 40px;
	background: no-repeat center center !important;
	background-size: cover !important;
	margin: 0;
	margin-right: 16px;
	max-width: 100%;
	transition: 0.5s cubic-bezier(0.86, 0, 0.07, 1);
	cursor: pointer;
}

.reviews .selector .option:last-of-type {
	margin-right: 0;
}

.reviews .selector .option:hover {
	background: rgba(0, 0, 0, 0.5);
}

.reviews .selector .option.active {
	box-shadow: 0 0 0 4px #FFFCD5, 0 0 0 6px #151515;
	margin-right: 24px;
	margin-left: 8px;
}

.reviews .selector .option:first-of-type.active {
	margin-left: 0;
}

.reviews .number {
	position: absolute;
	right: 0;
	bottom: -20px;
	display: flex;
	align-items: center;
	font-size: 1.125rem;
	letter-spacing: 3px;
	color: #151515;
}

.reviews .number .current-wrapper {
	display: block;
	overflow: hidden;
}

.reviews .number .current {
	color: #151515;
	font-weight: bold;
}

.reviews .number .current.active {
	animation: current-number-animate 0.7s;
}

.reviews .number .rest {
	color: #484848;
	font-weight: 200;
	margin-left: 6px;
}

.reviews .review .bottom {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

/* Contact Slides */
.contact-slides.finished .right-contact {
	width: 100%;
	transition: width 0.7s 0.9s cubic-bezier(0.785, 0.135, 0.15, 0.86), background 0.4s 0.5s;
	background: #151515;
}

.contact-slides.finished .right-contact .group .logo {
	filter: brightness(0%) invert(100%);
	transition-delay: 0.5s;
	transform: scale(1.2);
}

.contact-slides.finished .close {
	transform: translateY(-100px);
	opacity: 0;
}

.contact-slides.finished .main.active {
	opacity: 0;
}

.contact-slides.finished .contact-progress {
	opacity: 0;
}

.contact-slides.hidden .right-contact {
	transform: translateX(35%);
	width: 0%;
	transition-delay: 0s;
}

.contact-slides.hidden .right-contact .group .logo {
	opacity: 0;
	transition-delay: 0s;
}

.contact-slides.hidden .right-contact .close {
	transform: translateY(-100px);
	transition-delay: 0s;
	animation: none;
}

.contact-slides.hidden .main {
	transform: translateY(100px);
	opacity: 0;
	transition-delay: 0.7s;
}

.contact-slides.hidden {
	opacity: 1;
	visibility: hidden;
	transform: translateY(100%);
}

.contact-slides {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: #151515;
	transition: 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	z-index: 10000000;
	overflow: hidden;
}

.contact-slides .right-contact {
	position: absolute;
	top: 0;
	right: 0;
	width: 35%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-flow: column;
	transition: 0.5s 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.contact-slides .right-contact .group {
	margin: auto 0;
	display: none;
}

.contact-slides .right-contact .group .logo {
	width: 200px;
	transition: 0.5s 0.9s;
	opacity: 1;
}

.contact-slides .close {
	cursor: pointer;
	position: absolute;
	text-align: center;
	right: 0;
	color: #151515;
	font-size: 20px;
	font-weight: bold;
	height: 79px;
	padding: 0 65px;
	display: flex;
	align-items: center;
	cursor: pointer;
	background: #FFE00B;
	transition: 0.4s 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	z-index: 1;
	overflow: hidden;
	text-transform: lowercase;
	transform: translateY(0);
	font-family: freight-sans-pro, sans-serif;
}

.contact-slides .close:hover {
	box-shadow: 0 16px 72px rgba(0, 0, 0, 0.03);
}

.contact-slides .close:before {
	position: absolute;
	content: "";
	bottom: 0;
	left: 0;
	height: 0;
	width: 100%;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	background: #FFF;
	z-index: -1;
}

.contact-slides .close:hover:before {
	height: 100%;
	top: 0;
	height: 100%;
	bottom: unset;
}

.contact-slides .close .text {
	transition: 0.5s 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	transform: translateY(0);
}

.contact-slides .close:hover .icon {
	top: 50%;
	animation: close-icon-hover 0.5s 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
}

.contact-slides .close:hover .text {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-16px);
	transition-delay: 0s;
}

.contact-slides .close .icon {
	position: absolute;
	top: -50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 28px;
	color: #151515;
	transition: 0.5s 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	animation: close-icon-after 0.5s 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
}

.contact-slides .main {
	max-width: calc(100% - 24%);
	position: absolute;
	top: 0;
	height: 100%;
	left: 12%;
	text-align: left;
	display: block;
	width: 100%;
	right: 12%;
	transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.contact-slides .slide {
	opacity: 0;
	visibility: hidden;
}

.contact-slides .slide.active {
	opacity: 1;
	visibility: visible;
}

.contact-slides .slide .form-group {
	opacity: 0;
	visibility: hidden;
	transform: translateY(100px);
	max-width: 900px;
}

.contact-slides .slide.active .form-group {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0.4s;
}

.contact-slides .slide.active .slide-control .counter .current {
	animation: current-number-animate 0.7s;
}

.contact-slides .main .form-group {
	margin: 225px 0 0;
	transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.contact-slides .main .form-group .text {
	margin: 0 0 75px;
}

.contact-slides .main .form-group .headline {
	font-size: 48px;
	line-height: 64px;
	color: #FFF;
	font-weight: bold;
	margin: 0 0 8px;
}

.contact-slides .main .form-group .question-info {
	font-size: 24px;
	font-weight: 400;
	color: #FFF;
}

.contact-slides .main .form-group .question-info span {
	color: #FFE00B;
}

.contact-slides .main .form-group .input {
	position: relative;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15) inset;
	display: inline-block;
	overflow: hidden;
	width: calc(100% - 64px);
	padding: 24px 32px;
}

.contact-slides .main .form-group .input.textarea {
	width: 100%
}

.contact-slides .main .form-group .input:before {
	position: absolute;
	content: "";
	bottom: 0;
	left: 0;
	width: 0%;
	height: 1.75px;
	background: #FFF;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.contact-slides .main .form-group input,
.contact-slides .main .form-group textarea {
	width: 100%;
	background: transparent;
	padding: 0;
	margin: 0;
	font-size: 18px;
	transition: 0.5s;
	resize: none;
	padding-right: 32px;
	font-family: freight-sans-pro, sans-serif;
}

.contact-slides .main .form-group textarea ~ .icon {
	top: 27px;
	transform: translateY(0);
}

.contact-slides .main .form-group ::placeholder {
	color: rgba(255, 255, 255, 0.75);
	transition: 0.5s;
}

.contact-slides .main .form-group.focused .input:before {
	width: 100%
}

.contact-slides .main .form-group.focused ::placeholder {
	color: #FFF;
}

.contact-slides .main .form-group .icon {
	position: absolute;
	right: 32px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	color: #FFF;
}

.contact-slides .main .form-group input:focus,
.contact-slides .main .form-group textarea:focus {
	color: #FFF !important
}

.contact-slides .main .form-group .error {
	display: block;
	margin: 50px 0 0;
	font-size: 18px;
	color: #FF5151;
	overflow: hidden;
	font-family: freight-sans-pro, sans-serif;
}

.contact-slides .main .form-group .error strong {
	font-weight: bold;
}

.contact-slides .main .form-group .error span {
	transform: translateY(40px);
	display: block;
	transition: 0.5s;
}

.contact-slides .main .form-group .error.active span {
	transform: translateY(0);
}

.contact-slides .slide .flex-container.services-wrapper {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
    align-items: flex-start;
}

.contact-slides .main .form-group .checkbox-wrapper {
	display: block;
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin: 0;
	width: 100%;
}

.contact-slides .main .form-group .checkbox-wrapper input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.contact-slides .main .form-group .checkbox-wrapper input:checked~.btn {
	color: #151515 !important;
	transition-delay: 0s !important;
}

.contact-slides .main .form-group .checkbox-wrapper input:checked~.btn .text {
	transform: translateY(0) !important;
	opacity: 1 !important;
	transition-delay: 0s !important;
	color: #151515 !important;
}

.contact-slides .main .form-group .checkbox-wrapper input:checked~.btn .icon {
	top: 150% !important;
}

.contact-slides .main .form-group .checkbox-wrapper input:checked~.btn:before {
	top: unset !important;
	bottom: 0 !important;
	height: 100% !important;
	background: #FFE00B !important;
}

.contact-slides .main .form-group .budget-btn-wrapper .checkbox-wrapper input:checked~.btn-text .text {
	color: #FFE00B;
}

.contact-slides .main .form-group .budget-btn-wrapper .checkbox-wrapper input:checked~.btn-text:before {
	left: 0;
	width: 100%;
}

.contact-slides .main .form-group .budget-btn-wrapper .checkbox-wrapper .text {
	color: #FFF;
	font-weight: 600;
	font-size: 1.125rem;
	transition: .3s;
}

.contact-slides .main .form-group .btn-wrapper .btn {
	padding: 24px 40px;
	color: #FFF;
	font-weight: 400;
	box-shadow: 0 0 0 1.75px #373737 inset;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	font-weight: 600;
}

.contact-slides .main .form-group .btn-wrapper .btn:before {
	position: absolute;
	content: "";
	top: 0;
	height: 0%;
	left: 0;
	width: 100%;
	background: #FFFFFF;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.contact-slides .main .form-group .btn-wrapper .btn:hover:before {
	top: unset;
	bottom: 0;
	height: 100%;
}

.contact-slides .main .form-group .btn-wrapper .btn:hover .text {
	transform: translateY(-50px);
	opacity: 0;
	transition-delay: 0s;
}

.contact-slides .main .form-group .btn-wrapper .btn .text {
	margin: 0;
	transition: 0.5s 0.15s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.contact-slides .main .form-group .btn-wrapper .btn .icon {
	position: absolute;
	top: 150%;
	left: 50%;
	margin-left: 0;
	transform: translate(-50%, -50%);
	font-size: 28px;
	color: #151515;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.contact-slides .main .form-group .btn-wrapper .btn:hover .icon {
	top: 50%;
	transition-delay: 0.1s;
}

.contact-slides .main .form-group .btn-wrapper.budget-btn-wrapper {
	position: relative;
	padding-top: 32px;
	width: 100%;
	flex-wrap: nowrap;
}

.contact-slides .main .form-group .btn-wrapper.budget-btn-wrapper:before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: #373737;
	z-index: 1;
}

.contact-slides .main .form-group .btn-wrapper.budget-btn-wrapper .btn-text {
	padding: 0;
	background: transparent;
	padding: 0 16px;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	color: rgba(255, 255, 255, 0.85);
}

.contact-slides .main .form-group .btn-wrapper.budget-btn-wrapper .btn-text:before {
	position: absolute;
	content: "";
	top: -32px;
	right: 0;
	height: 1.5px;
	background: #FFE00B;
	width: 0%;
	z-index: 1;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.contact-slides .main .form-group .btn-wrapper.budget-btn-wrapper .btn-text:hover {
	color: #FFF;
}

.contact-slides .main .form-group .btn-wrapper.budget-btn-wrapper .checkbox-wrapper:first-of-type .btn-text {
	padding-left: 0;
}

.contact-slides .main .form-group .btn-wrapper.budget-btn-wrapper .checkbox-wrapper:last-of-type .btn-text {
	padding-right: 0;
}

.contact-slides .main .slide-control {
	position: absolute;
	left: 0;
	bottom: 85px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.contact-slides .main .slide-control .counter {
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	line-height: 24px;
	letter-spacing: 1.5px;
	font-weight: bold;
	font-size: 24px;
}

.contact-slides .main .slide-control .counter .current {
	color: #FFF;
	margin-right: 8px;
	font-weight: 700;
}

.contact-slides .main .slide-control .counter .next {
	color: #FFF;
	font-weight: 400;
}

.contact-slides .main .next-slide {
	display: flex;
	align-items: center;
}

.contact-slides .main .next-slide .btn {
	padding: 22px 32px;
	box-shadow: 0 0 0 1.75px rgba(255, 255, 255, 0.15) inset;
	color: #FFF;
	font-size: 0.875rem;
	font-weight: bold;
	position: relative;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	display: flex;
	align-items: center;
	overflow: hidden;
	margin-right: 32px;
}

.contact-slides .main .next-slide .btn.disabled {
	box-shadow: 0 0 0 1.75px rgba(255, 255, 255, 0.05) inset !important;
	cursor: none !important;
}

.contact-slides .main .next-slide .btn.disabled:before {
	display: none;
}

.contact-slides .main .next-slide .btn.disabled .icon {
	color: rgba(255, 255, 255, 0.3) !important;
}

.contact-slides .main .next-slide .btn:last-of-type {
	margin-right: 0;
}

.contact-slides .main .next-slide .btn.last-btn {
	padding: 22px;
}

.contact-slides .main .next-slide .btn .icon {
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	font-size: 26px;
	color: #FFF;
}

.contact-slides .main .next-slide .last-btn .icon {
	margin: 0;
}

.contact-slides .main .next-slide .next-btn .icon {
	margin-left: 36px;
}

.contact-slides .main .next-slide .btn:before {
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	height: 100%;
	width: 0;
	background: #FFE00B;
	z-index: -1;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.contact-slides .main .next-slide .last-btn:before {
	left: 0;
	right: unset;
}

.contact-slides .main .next-slide .btn:hover {
	color: #151515;
	box-shadow: 0 0 0 1.75px transparent inset;
}

.contact-slides .main .next-slide .btn:hover .icon {
	color: #151515;
}

.contact-slides .main .next-slide .btn:hover:before {
	left: 0;
	right: unset;
	width: 100%;
}

.contact-slides .main .next-slide .last-btn:hover:before {
	right: 0;
	left: unset;
}

.contact-slides .contact-progress {
	position: fixed;
	bottom: 0;
	width: calc(100%);
	height: 10px;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	background: #2d2d2d;
	z-index: 1000;
	box-shadow: 0 -16px 32px #151515
}

.contact-slides .contact-progress .line {
	width: 100%;
	height: 10px;
	background: rgba(255, 255, 255, 0.1);
	position: absolute;
	bottom: 0;
	display: block;
	text-align: center;
}

.contact-slides .contact-progress .line .filled {
	position: absolute;
	top: 0;
	height: 100%;
	width: 0%;
	background: #FFE00B;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

/* Case Study - Scroll Progress */
.scroll-progress {
	position: fixed;
	top: 95px;
	left: 0;
	height: 3px;
	background: transparent;
	width: 100%;
	z-index: 100;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.scroll-progress.hidden {
	opacity: 0;
}

.scroll-progress .current-position {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	background: #151515;
	height: 100%;
}

/* Case Study - Modal Image */
.modal.visible {
	opacity: 1;
	visibility: visible;
}

.modal.visible .overlay {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.modal.visible .main {
	opacity: 1;
	visibility: visible;
	height: 80%;
	top: 10%;
	bottom: unset;
	transition-delay: 0.1s;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.modal.video video,
.modal.image img {
	display: block;
}

.modal video,
.modal img {
	display: none;
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1000001;
	visibility: hidden;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.modal .overlay {
	cursor: none;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, 0.9);
	transition: 0.5s 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	opacity: 0;
	visibility: hidden;
}

.modal .main {
	position: absolute;
	width: 86%;
	left: 7%;
	top: 10%;
	height: 80%;
	overflow-y: auto;
	transition: 0.5s 0s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	height: 0;
	bottom: 10%;
	top: unset;
}

.modal .main .image {
	width: 100%;
	object-fit: contain;
	box-shadow: 0 32px 100px rgba(0, 0, 0, 0.25);
}

/* Case Study - General Styling */
.case-study .small-container {
	max-width: 950px;
	padding: 0 20px;
	clear: both;
	margin: 0 auto;
	display: block;
}

.case-study .title-group .subtitle {
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 16px;
	margin: 0 0 12px;
}

.case-study .title-group .subtitle .number {
	letter-spacing: 5px;
}

.case-study .title-group .headline {
	line-height: 58px;
}

.case-study .text-group .subtitle {
	font-size: 0.875rem;
	color: #151515;
	letter-spacing: 1.5px;
	margin: 0 0 15px;
	text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    font-family: freight-sans-pro, sans-serif;
}

.case-study .text-group .value {
	color: #151515;
	font-size: 24px;
    line-height: 34px;
    margin-bottom: 10px;
}

.case-study .case-intro .text-group .value {
	font-size: 18px;
	line-height: 1;
	margin: 0;
}

.case-study .text-group .value img {
	height: 20px;
	display: block;
	padding: 2px 0;
}

.case-study .reviews {
	padding: 0;
}

.case-study .reviews .review.active {
	padding: 0;
	background: transparent;
	border: none;
}

.case-study .reviews .review .text {
    font-size: 1.5rem;
    line-height: 1.5;
} 

.case-study .image,
.case-study .img {
	cursor: pointer;
}

/* Case Study - Study Intro */
.case-intro {
	padding: 220px 0 270px;
}

.case-intro .title-group .headline {
	font-size: 50px;
	color: #151515;
	font-weight: bold;
	margin: 0 0 10px;
	line-height: initial;
}

.case-intro .info {
	max-width: 550px;
	color: #151515;
	font-weight: 500;
	margin: 0 0 100px;
	font-size: 24px;
    line-height: 34px;
}

.case-intro .flex-wrapper {
	justify-content: space-between;
	align-items: flex-end;
}

.case-intro .flex-wrapper.inner {
	justify-content: flex-start;
	align-items: center;
	margin-bottom: -32px;
}

.case-intro .text-group {
	display: block;
	margin-right: 100px;
	margin-bottom: 32px;
}

.case-intro .text-group:last-of-type {
	margin-right: 0;
}

/* Case Study - Intro Background Image */
.intro-background-image {
	width: 100%;
	padding: 0 !important;
}

.intro-background-image .background {
	height: 650px;
	margin-left: 10%;
	width: 90%;
	position: relative;
	top: -160px;
	margin-bottom: -160px;
	background: no-repeat center;
	background-size: cover;
}

/* Case Study - The Challenge */
.the-challenge {
	padding: 150px 0 30px;
}

.the-challenge .title-group {
	margin-bottom: 20px;
}

.the-challenge .copy {
	color: #151515;
	font-size: 1.125rem;
	line-height: calc(28/18);
	max-width: 650px;
	margin: 30px 0;
}

.the-challenge .copy p {
	margin-bottom: 20px;
}

.the-challenge .copy p:last-of-type {
	margin-bottom: 0;
}

.the-challenge .copy strong {
	color: #151515;
	font-weight: 550;
}

.the-challenge .text-group {
	margin: 80px 0 0;
}

.the-challenge .text-group .flex-container {
	display: grid;
    grid-gap: 10px 20px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: flex-start;
}

.the-challenge .text-group .subtitle {
	margin-bottom: 15px;
}

/* Case Study - Brand: Colors & Typography */
.branding .title-group .headline {
	max-width: 220px;
}

.branding .color-group {
	margin: 125px 0 80px;
}

.branding .color-group.col-4.nowrap {
	flex-wrap: nowrap;
	margin: 100px 0;
}

.branding .color-group.col-4.nowrap .color {
	margin-right: 28px;
}

.branding .color-group.col-4.nowrap .color:nth-of-type(3n) {
	margin-right: 32px;
}

.branding .color-group.col-4.nowrap .color:last-of-type {
	margin-right: 0;
}

.branding .color-group.noborder .color {
	border-radius: 0;
}

.branding .color-group .color {
	margin-bottom: 70px;
	min-height: 225px;
	padding: 40px;
	max-width: calc(300px - 70px);
	margin-right: 70px;
	width: calc((100% / 3) - (70px * 2/3) - 80px);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: 0.5s 0s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.branding .color-group .color:nth-of-type(3n) {
	margin-right: 0;
}

.branding .color-group .color.white {
	box-shadow: 0 16px 85px rgba(0, 0, 0, 0.08);
	background: #FFF;
}

.branding .color-group .color .color-name {
	font-size: 24px;
	line-height: 34px;
	color: #FFF;
	max-width: 100%;
	margin: 0 0 125px;
}

.branding .color-group .color .color-name p {
	font-weight: 600;
}

.branding .color-group .color .color-value {
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, .7);
	font-size: 14px;
	font-family: freight-sans-pro, sans-serif;
}

.branding .color-group .color .color-value i {
	font-style: normal;
	font-size: 14px;
}

.branding .typography-group {
	align-items: center;
	justify-content: space-between;
	width: 871px;
	max-width: 100%;
}

.branding .typography-group .font-title {
	margin-right: 32px;
}

.branding .typography-group .font-title .brand-name {
	font-size: 36px;
	margin: 0;
}

.branding .typography-group .font-title .subtitle {
	font-size: 28px;
	color: #151515;
	margin: 24px 0 0;
	font-weight: 300;
}

.branding .typography-group .fonts .font-weight-group {
	margin-bottom: 50px;
}

.branding .typography-group .fonts .font-weight-group:last-of-type {
	margin-bottom: 0;
}

.branding .typography-group .fonts .font-weight-group .subtitle {
	font-size: 0.875rem;
	letter-spacing: 1.5px;
	color: #151515;
	font-weight: 600;
    font-family: freight-sans-pro, sans-serif;
	text-transform: uppercase;
	margin: 0 0 15px;
}

.branding .typography-group .fonts .font-weight-group .font-weight {
	color: #4C4C4C;
	font-size: 24px;
}

/* Case Study - Logo Types */

.logo-types .title-group {
	margin-bottom: 50px;
}

.logo-types .explanation {
	font-size: 24px;
	line-height: 34px;
	color: #151515;
	max-width: 650px;
	margin: 0 0 80px;
	display: block;
}

.logo-types .flex-container.nowrap {
	flex-wrap: nowrap;
}

.logo-types .flex-container.nowrap .image-wrapper {
	margin: 0 32px 0 0;
	box-shadow: 0 32px 100px rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

.logo-types .flex-container.nowrap .image-wrapper:last-of-type {
	margin-right: 0;
}

.logo-types .flex-container.nowrap .image-wrapper .image {
	height: 450px;
}

.logo-types .image-wrapper {
	width: 50%;
	position: relative;
}

.logo-types .image-wrapper.full-width {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 250px 0 150px;
	flex-direction: column;
}

.logo-types .image-wrapper.full-width .image {
	height: 125px;
	width: auto;
	max-width: calc(100% - 100px);
}

.logo-types .image-wrapper.full-width .text-group {
	margin: 150px auto 0;
	max-width: 650px;
}

.logo-types .image-wrapper.full-width .copy {
	color: #484848;
	font-size: 22px;
	line-height: 26px;
	text-align: left;
	margin: 0 0 16px;
}

.logo-types .image-wrapper.full-width .copy:last-of-type {
	margin: 0;
}

.logo-types .image-wrapper.full-width h3 {
	display: block;
	margin: 32px 0;
	font-size: 26px;
	line-height: 40px;
	color: #393632;
	font-weight: 400;
}

.logo-types .image-wrapper.full-width strong {
	color: #272727;
	position: relative;
	z-index: 1;
	text-align: center;
}

.logo-types .image-wrapper .image {
	height: 550px;
	background: no-repeat center center;
	background-size: cover;
	width: 100%;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.logo-types .image-wrapper .caption {
	font-weight: bold;
	position: absolute;
	bottom: 32px;
	left: 32px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 1.125rem;
	font-weight: 600;
}

.logo-types .image-wrapper .caption strong {
	display: block;
	margin: 0 0 6px;
	font-weight: bold;
	color: #FFF;
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.logo-types .image-wrapper .caption.dark {
	color: rgba(0, 0, 0, 0.7);
}

.logo-types .image-wrapper .caption.dark strong {
	color: #151515;
}

.logo-types .image-wrapper.full-width {
	margin: 100px 0 100px;
	background: #FFF;
}

.logo-types .explanation.after {
	margin: 100px auto;
	font-size: 24px;
	line-height: 40px;
	max-width: 750px;
	display: block;
}

.logo-types .explanation.after strong {
	color: #151515;
}

.case-study .reviews .main {
	max-width: 800px;
	margin: 150px auto 100px;
	padding: 0;
	padding: 0;
}

/* Case Study - Designs */
.design-group {
	padding: 0 !important;
}

.design-group .padding {
	padding: 100px 20px;
}

.design-group .container.padding~.container {
	margin-top: -75px;
}

.design-group .title-group {
	margin-top: 130px;
	margin-bottom: 80px;
}

.design-group .image-wrapper.margin-bottom {
	margin-bottom: 125px;
}

.design-group .image-wrapper {
	width: 100%;
	display: block;
}

.design-group .image-wrapper .img {
	width: 100%;
	display: block;
	margin-bottom: 75px;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.postid-202 .design-group .image-wrapper .img {
	border-radius: 16px;
}

.design-group .image-wrapper .img.box-shadow {
	box-shadow: 0 16px 72px rgba(0, 0, 0, 0.05);
}

.design-group .image-wrapper .img:last-child {
	margin-bottom: 0;
}

.design-group .info-group {
	padding: 175px 0;
	margin: 0;
}

.design-group .info-group.taller {
	padding: 225px 0;
}

.design-group .info-group.tallest {
	padding: 275px 0;
}

.design-group .info-group .smallest-container {
	max-width: 650px;
}

.design-group .info-group .subtitle {
	font-size: 0.875rem;
	color: #FFF;
    letter-spacing: 1.5px;
    font-weight: 600;
    font-family: freight-sans-pro, sans-serif;
    text-transform: uppercase;
}

.design-group .info-group .copy {
	margin: 20px 0 0;
	line-height: 34px;
	font-size: 24px;
	color: #FFF;
	font-weight: 400;
}

.design-group .info-group.light {
	background: #FFF;
}

.design-group .info-group.light .subtitle {
	color: #666666;
}

.design-group .info-group.light .copy {
	color: #151515;
}

.design-group .sticky {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.design-group .sticky .text-wrapper {
	position: sticky;
	top: 190px;
	max-width: 700px;
	margin-top: 100px;
	margin-right: 125px;
	padding-bottom: 100px;
}

.design-group .sticky .text-wrapper .headline {
	font-size: 40px;
	color: #151515;
	font-weight: bold;
	margin: 0 0 20px;
}

.design-group .sticky .text-wrapper .copy {
	margin: 0;
	color: #151515;
	font-size: 24px;
	line-height: 34px;
}

.design-group .sticky .text-wrapper .copy strong {
	color: #888;
}

.design-group .sticky .text-wrapper ul {
	margin: 36px 0 0;
	padding: 0;
}

.design-group .sticky .text-wrapper ul li {
	cursor: pointer;
	width: max-content;
	list-style-type: none;
	margin-bottom: 18px;
	color: #666;
	font-size: 18px;
	font-weight: 400;
	transition: 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	position: relative;
}

.design-group .sticky .text-wrapper ul li:before {
	position: absolute;
	width: 0;
	bottom: 0;
	right: 0;
	height: 6px;
	background: #FFE00B;
	content: "";
	z-index: -1;
	transition: 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.design-group .sticky .text-wrapper ul li.scrolled:before {
	width: 100%;
	right: unset;
	left: 0;
}

.design-group .sticky .text-wrapper ul li.scrolled {
	color: #151515;
}

.design-group .sticky .text-wrapper ul li span {
	font-weight: bold;
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	letter-spacing: 1.5px;
	color: rgba(0, 0, 0, 0.8);
}

.design-group .sticky .text-wrapper ul li:last-of-type {
	margin-bottom: 0;
}

.design-group .sticky .image-wrapper {
	max-width: 1000px;
}

.design-group .dark-bg {
	background: #20262f;
	margin: 150px 0 -150px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
}

.design-group .dark-bg.border-gap {
	padding: 150px 0;
	overflow: hidden;
}

.design-group .dark-bg .image-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.design-group .dark-bg .headline {
	position: relative;
	font-size: 120px;
	z-index: 1000;
	color: transparent !important;
	font-weight: bold;
	width: 100%;
	-webkit-text-stroke: 1.5px rgba(49, 128, 244, 1);
	text-align: center;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.design-group .dark-bg .headline::selection {
	color: transparent;
	-webkit-text-stroke-color: #151515;
}

.design-group .sticky-wrapper {
	padding: 125px 0;
}

.jarallax {
	position: relative;
	z-index: 0;
	height: 100vh;
}

.jarallax-img {
	position: absolute;
	object-fit: cover;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	transition: 0s !important;
}

.postid-202 .modal .main,
.postid-91 .modal .main,
.postid-91 .design-group .image-wrapper .img {
	border-radius: 16px;
}

.postid-202 .branding {
	padding-bottom: 0 !important;
}

.postid-202 .branding .typography-group {
	display: none;
}

.postid-202 .design-group {
	padding: 25px 0 0;
}

.postid-91 .branding .color-group .color {
	min-height: 175px;
}

.postid-91 .branding .color-group .color .color-name {
	margin: 0 0 75px;
}

/* Next Section */
.next-section {
	padding: 125px 0;
	background: #FFE00B;
	text-align: center;
	position: relative;
	z-index: 101;
	transition: 0.5s cubic-bezier(0.86, 0, 0.07, 1);
}

.next-section .container {
	position: relative;
	z-index: 1;
	cursor: pointer;
}

.next-section .subheadline {
	color: #151515;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 14px;
	font-weight: 600;
	font-family: freight-sans-pro, sans-serif;
}

.next-section .headline {
	font-size: 36px;
	font-weight: bold;
	color: #151515;
	margin: 15px 0 30px;
	overflow: hidden;
}

.next-section .btn {
	cursor: pointer;
	background: #151515;
	height: 60px;
	width: 60px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: solid 2px #151515;
}

.next-section .btn svg {
	margin-left: 0;
}

.next-section .btn svg path {
	fill: #FFF;
	transition: 0.5s cubic-bezier(0.86, 0, 0.07, 1);
}

.next-section .btn:before {
	background: #FFF;
}

.next-section .btn:hover:before {
	width: 100%;
	left: 0;
	right: unset;
}

.next-section .btn:hover svg path {
	fill: #151515;
}

/* Footer */
footer {
	padding: 75px 0;
	background: #151515;
	position: relative;
	z-index: 1;
}

footer .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

footer .column.web-info {
	text-align: left;
}

footer .meta-info {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	font-size: 16px;
	color: #D2D2D2;
	font-weight: 300;
}

footer .column .meta-info .link {
	display: initial;
}

footer .icons-brands {
	margin-bottom: 12px;
	font-size: 16px;
	color: #D2D2D2;
}

footer .column .meta-info .icons-brands a {
	color: #D2D2D2;
	transition: 0.5s;
	position: relative;
	padding-bottom: 2px;
	overflow: hidden;
	display: inline-flex;
}

footer .column .meta-info .made-with {
	margin-top: 24px;
	font-size: 18px;
	color: #D2D2D2;
	width: 100%;
	display: block;
	font-weight: 600;
}

footer .column .meta-info .made-with svg {
	color: #FFE00B;
}

footer .column .website-name {
	color: #FFF;
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 10px;
}

footer .column .info {
	color: #FFF;
	font-size: 1.125rem;
	line-height: calc(28/18);
	width: 400px;
	margin-top: 10px;
}

footer .column .title {
	font-size: 24px;
	color: #FFF;
	font-weight: bold;
}

footer .column .text {
	color: #FFF;
	font-size: 1.125rem;
	line-height: calc(28/18);
	margin: 10px 0 0;
	max-width: 400px;
}

footer .column .btn {
	margin: 30px 0 40px;
	text-transform: initial;
	box-shadow: 4px 4px #151515, 9px 9px #FFE00B;
}

footer .column .btn:hover {
	box-shadow: 0 0 #151515, 0 0 #FFE00B;
}

footer .column .form {
	display: inline-flex;
	margin: 32px 0 0
}

footer .column .form .form-item {
	margin: 0;
}

footer .column .form .form-item input[type] {
	margin: 0;
	border-radius: 50px !important;
}

footer .column .form .form-item input[type]:focus {
	border-radius: 0 !important
}

footer .column .form .submit-form {
	width: auto;
	margin-left: 16px;
	padding: 16px 18px;
	font-size: 16px;
	border-radius: 50px !important;
	overflow: hidden
}

footer .column .form .submit-form img {
	height: 16px;
	width: auto;
	filter: brightness(0%) invert(100%);
	position: relative;
	top: 1px;
	left: 1px;
	transition: 0.5s
}

footer .column .form .submit-form:hover img {
	animation: submit-email 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86)
}

footer .column .email {
	font-weight: 600;
	font-size: 18px;
	color: #FFF;
	display: block;
	width: max-content;
	position: relative;
	margin-top: 20px;
	z-index: 1;
	box-shadow: 0 -2px rgba(255, 255, 255,.25) inset;
	padding-bottom: 3px;
	overflow: hidden
}

footer .column .email:before {
	position: absolute;
	content: "";
	bottom: 0;
	right: 0;
	height: 2px;
	width: 0%;
	background: #FFF;
	z-index: -1;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

footer .column .email:hover:before {
	width: 100%;
	left: 0;
	right: unset;
}

footer .column .link {
	display: block;
	text-align: right;
	text-decoration: none !important;
	color: #424954;
	transition: 0.5s;
	margin: 6px 0px;
	font-size: 18px;
}

footer .column .link .icon {
	font-size: 16px;
	margin: 0 2px;
}

footer .column .link span {
	position: relative
}

footer .column .link span:before {
	position: absolute;
	content: "";
	bottom: -2px;
	right: 0;
	width: 0%;
	background: #424954;
	height: 1.5px;
	transition: 0.5s;
}

footer .column .link span:hover:before {
	width: 100%
}

footer .column .socials {
	display: flex;
	align-items: center;
	margin: 24px 0 8px;
}

footer .column .socials a {
	overflow: hidden;
	margin-right: 12px;
	font-size: 20px;
	height: 45px;
	width: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	position: relative;
	z-index: 1;
}

footer .column .socials a:before {
	position: absolute;
	content: "";
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: #FFE00B;
	z-index: -1;
	display: block;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

footer .column .socials a:last-of-type {
	margin-right: 0;
}

footer .column .socials a:hover:before {
	top: 0;
	height: 100%;
	bottom: unset;
	border-radius: 50%;
}

footer .column .socials a svg path {
	fill: #FFF;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

footer .column .socials a:hover svg path {
	fill: #151515;
}

footer .copyright {
	color: #fff;
	margin-top: 85px;
	display: inline-block;
	width: 100%;
}

footer .copyright .left {
	float: left;
	font-size: 16px;
	font-weight: 200;
	font-family: freight-sans-pro, sans-serif;
}

footer .bolded {
	color: rgba(255, 255, 255, 0.7);
	font-weight: 500;
}

/* Media Queries */
@media screen and (min-height: 1000px) {

	/* Contact */
	.contact .start-project {
		transform: translateY(calc(-340px / 2 + 30px));
	}

	.contact .get-in-touch {
		position: absolute;
		bottom: 0;
	}
}

@media only screen and (max-height: 800px) {

	/* Contact */
	.contact-slides .main .form-group {
		margin-top: 150px;
	}
}

@media only screen and (max-height: 700px) {

	/* Contat */
	.contact-slides .main .slide-control {
		position: relative;
		bottom: 0 !important;
		padding-bottom: 50px;
	}
}

/* Based on Width */
@media only screen and (max-width: 700px) {

	/* Navbar */
	.navbar .right nav {
		display: none;
	}

	.navbar .menu-icon {
		display: block;
	}
}

@media only screen and (min-width: 700px) {

	/* Navbar */
	.navbar .right nav {
		display: block;
	}

	.navbar .menu-icon {
		display: none;
	}

	.mobile-menu.active {
		opacity: 0;
		visibility: hidden;
	}
}


@media screen and (max-device-width: 1200px) and (max-device-width: 1600px) {

	/* Custom Cursor */
	.custom-cursor {
		display: none;
	}
}

@media only screen and (max-width: 1200px) {

	/* Anout */
	.worked-with .company {
		width: 50%;
	}

	/* Case Study */
	.intro-background-image .background {
		width: 100%;
		margin-left: 0;
	}

}

@media only screen and (max-width: 1150px) {

	/* Case Study */
	.logo-types .flex-container.nowrap {
		flex-wrap: wrap;
	}

	.logo-types .flex-container.nowrap .image-wrapper {
		margin: 0 auto 40px;
		width: 100%;
		max-width: 600px;
	}

	.logo-types .flex-container.nowrap .image-wrapper:last-of-type {
		margin-bottom: 0;
	}
}

@media only screen and (max-width: 1025px) {

	/* About */
	.background-info .container {
		display: block;
	}

	.background-info .image {
		height: 500px;
		width: 100%;
		max-width: 750px;
		position: relative;
		top: 0;
		margin: 0;
	}

	.background-info .text-group {
		max-width: 750px;
		margin: 50px 0 0;
	}

	/* Contact */
	.contact-me .main {
		display: block;
		padding-top: 100px;
		text-align: center
	}

	.contact-me .main .sidebox {
		width: 100%;
		display: block;
		height: auto;
		margin-bottom: 50px
	}

	.contact-me .main .sidebox .title {
		font-size: 40px;
		margin: 0 auto;
		max-width: 500px
	}

	.contact-me .main .sidebox .title br {
		display: none
	}

	.contact-me .main .mainbox {
		margin-left: auto;
		margin-right: auto;
		width: 50%;
		display: block
	}

	.contact-me .main .social-links {
		bottom: 50px
	}

	.contact-slides .right-contact {
		width: 0;
	}

	.contact-slides .close {
		position: fixed;
		right: 0;
		left: unset
	}

	.contact-slides .right-contact .group {
		opacity: 0;
		visibility: hidden
	}

	.contact-slides .main {
		width: calc(100% - 24%)
	}

	.contact-slides .contact-progress {
		width: 100%
	}

	.contact-slides .main .form-group {
		margin-top: 110px;
	}

	/* Case Study */
	.branding .color-group.col-4.nowrap {
		flex-wrap: wrap;
		margin-bottom: 50px;
	}

	.branding .color-group.col-4 .color {
		width: calc((100% / 2) - 28px - 80px);
		max-width: 100%;
		margin-bottom: 50px;
	}

	.branding .color-group.col-4 .color:nth-of-type(2n) {
		margin-right: 0;
	}

	/* Footer */
	footer .column.right {
		width: 40%;
	}
}

@media only screen and (max-width: 900px) {

	/* General Info */
	section {
		padding: 125px 0 !important;
	}

	.work-intro {
		padding: 175px 0 125px !important;
	}

	.my-work.full .container {
		top: 0;
		margin-bottom: 0;
	}

	/* About */
	.about {
		padding: 125px 0;
		text-align: center;
	}

	.about .title-group {
		text-align: center;
	}

	.about .heading {
		text-align: center;
		margin: 42px auto 75px
	}

	.about .flex-wrapper {
		display: block;
	}

	.about .feature {
		margin: 0 auto 48px;
		max-width: 500px;
		text-align: center;
	}

	.about .feature:last-of-type {
		margin: 0 auto;
	}

	.about .feature .icon {
		margin: 0 auto;
	}

	/* Works - Featured Projects */
	.featured-projects {
		padding: 125px 0;
	}

	.featured-projects .title-group {
		text-align: center;
	}

	.featured-projects .flex-wrapper {
		display: block;
	}

	.featured-projects .project {
		max-width: 500px;
		margin: 0 auto 50px !important;
		display: block;
		width: 100%;
	}

	.featured-projects .project:last-of-type {
		margin: 0 auto !important;
	}

	.featured-projects .btn-underline {
		margin: 75px auto 0;
	}

	/* Reviews */
	.reviews .main {
		margin: -25px 0 0;
	}

	/* Case Study */
	.case-intro {
		padding: 175px 0 125px !important;
	}

	.case-intro .info {
		margin: 0 0 75px;
	}

	.intro-background-image .background {
		top: 0;
		margin-bottom: 0;
	}

	.design-group .sticky {
		display: block;
		margin: 0 !important
	}

	.design-group .sticky .text-wrapper {
		position: relative;
		top: 0;
		margin-bottom: 0;
		margin-top: 0;
		max-width: 750px;
		margin-right: 0;
	}

	.more-projects .title-group .btn.white {
		display: block;
		width: max-content;
		max-width: 100%;
		margin: 32px auto 0;
	}

	.branding .color-group .color {
		width: calc((100% / 2) - (50px * 1/2) - 80px);
		margin-right: 50px;
	}

	.branding .color-group .color:nth-of-type(3n) {
		margin-right: 50px;
		;
	}

	.branding .color-group .color:nth-of-type(2n) {
		margin-right: 0;
	}
}


@media only screen and (max-width: 878px) {

	/* Footer */
	footer .column .info {
		width: 100%;
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}

	footer .column {
		width: 100% !important;
		margin: 20px 0 !important;
		text-align: center !important;
	}

	footer .column .website-name {
		font-size: 32px;
	}

	footer .column .text {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		max-width: 400px;
	}

	footer .column .socials {
		justify-content: center;
	}

	footer .column .email {
		margin: 0 auto;
	}

	footer .copyright {
		margin-top: 50px;
		text-align: center;
	}

	footer .copyright .left {
		float: none;
	}
}

@media only screen and (max-width: 800px) {

	/* Case Study */
	.case-intro .flex-wrapper {
		flex-wrap: wrap;
	}

	.case-intro .flex-wrapper.inner {
		width: 100%;
		margin: 0 0 50px;
	}

	.the-challenge .text-group .value {
		width: calc((100% / 2) - 50px);
		margin-right: 50px;
	}

	.the-challenge .text-group .value:nth-of-type(3n) {
		margin-right: 50px;
	}

	.the-challenge .text-group .value:nth-of-type(2n) {
		margin-right: 0;
	}
}

@media only screen and (max-width: 768px) {

	.home-hero .container:after {
		display: none;
	}

	/* Mobile Menu */
	.mobile-menu .main ul li a {
		font-size: 32px;
	}

	.mobile-menu.right .info {
		font-size: 17px;
	}

	/* About */
	.worked-with .company {
		width: 100%;
		height: 300px;
	}

	.contact .start-project .headline {
		font-size: 50px;
		line-height: initial;
		letter-spacing: -1px;
	}

	.contact .get-in-touch {
		padding: 75px 0;
	}

	.contact .get-in-touch .container {
		display: block;
		text-align: center;
	}

	.contact .get-in-touch .links {
		margin: 32px auto 28px;
	}

	.contact .get-in-touch .link {
		margin-left: auto;
		margin-right: auto;
	}

	.contact .get-in-touch .socials {
		justify-content: center;
	}

	.contact-slides .main .form-group .btn-wrapper.budget-btn-wrapper:before,
	.contact-slides .main .form-group .btn-wrapper.budget-btn-wrapper .btn-text:before {
		display: none;
	}

	.contact-slides .main .form-group .btn-wrapper.budget-btn-wrapper {
		display: block;
		padding: 0;
	}

	.contact-slides .main .form-group .btn-wrapper.budget-btn-wrapper .btn-text {
		padding: 0;
	}

	.contact-slides {
		overflow-y: scroll;
	}

	/* Case Study */
	.intro-background-image .background {
		height: 550px !important;
	}

	.lincolnhouseoutreach .logo-types .flex-container {
		display: block;
	}

	.logo-types .image-wrapper {
		width: 100%;
	}
}

@media only screen and (max-width: 700px) {

	/* Mobile Menu */
	.mobile-menu.right .info {
		display: none;
	}

	.mobile-menu.main {
		left: 0;
		right: 0;
		text-align: center;
	}

	.mobile-menu.right {
		position: fixed;
		right: 0;
		left: 0;
		margin: auto;
		bottom: 30px;
		top: unset;
		transform: translateY(0);
		text-align: center;
	}

	/* Services */
	.services .title-wrapper {
		text-align: center;
	}

	.services .title-wrapper .title-group {
		text-align: center;
	}

	.services .title-wrapper .title {
		margin-left: auto;
		margin-right: auto;
	}

	.services .service-wrapper {
		margin-top: 75px;
	}

	.services .service-wrapper .service-group {
		width: 100%;
		margin: 0 0 50px;
		text-align: center;
	}

	.services .service-wrapper .service-group ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		max-width: 550px;
		margin: 0 auto 32px;
	}

	.services .service-wrapper .service-group ul li {
		margin-right: 24px;
		margin-bottom: 16px;
	}

	/* Reviews */
	.reviews .selector {
		opacity: 0;
		visibility: hidden;
	}

	.reviews {
		padding-bottom: 150px;
	}

	/* About */
	.worked-with .title-group {
		text-align: center;
		margin-bottom: 75px;
	}

	.quote .main .quote-body {
		font-size: 28px;
	}

	/* Contact */
	.contact-circle {
		bottom: 20px;
		right: 20px;
	}

	/* Case Study */
	.logo-types .image-wrapper .image {
		height: 450px;
	}

	.branding .typography-group {
		display: block;
	}

	.branding .typography-group .font-title {
		margin: 0 0 50px;
	}

	.branding .typography-group .fonts .font-weight-group {
		margin-bottom: 32px;
	}

	.branding .typography-group .fonts .font-weight-group .subtitle {
		margin-bottom: 8px;
	}
}

@media only screen and (max-width: 600px) {

	/* Home */
	.home-hero .copy br {
		display: none;
	}

	/* About */
	.about-hero {
		height: 100%;
		padding: 210px 0 175px !important;
	}

	/* Works - Featured Projects */
	.featured-projects .project .overflow-image .image {
		height: auto !important;
	}

	.featured-projects .project .text-group .meta-data .info {
		font-size: 20px;
	}

	/* Case Study */
	.modal.visible .main {
		height: 90%;
		top: 5%;
	}

	.case-study .reviews .main {
		margin: 75px 0;
	}

	.case-study .reviews .main .text {
		font-size: 18px;
		line-height: 32px;
	}

	.lincolnhouseoutreach .logo-types .explanation.after {
		font-size: 20px;
		margin: 0;
	}

	.branding .color-group {
		margin: 75px 0;
	}

	.branding .color-group .color {
		width: 100% !important;
		margin-right: 0 !important;
		min-height: 185px;
		max-width: 100%;
	}

	.design-group .info-group {
		padding: 125px 0;
	}

	.lincolnhouseoutreach .design-group .title-group {
		margin: -50px 0 75px;
	}
}


@media only screen and (max-width: 500px) {

	/* General Styles */
	section {
		padding: 100px 0 !important;
	}

	.title-group .headline {
		letter-spacing: -0.75px;
		font-size: 32px;
	}

	.preloader .tagline,
	.preloader .tagline .first-line,
	.preloader .tagline .second-line {
		font-size: 28px;
		line-height: 50px;
	}

	/* Mobile Menu */
	.mobile-menu .main ul li a {
		font-size: 26px;
	}

	/* Home */
	.home-hero .headline {
		font-size: 42px;
		letter-spacing: -1px;
		line-height: initial;
	}

	.home-hero .subheadline {
		font-size: 22px;
		margin-top: 8px;
	}

	.home-hero .copy {
		font-size: 19px;
		margin: 24px 0 40px;
	}

	/* About */
	.about-hero {
		padding: 160px 0 110px !important
	}

	.about .heading,
	.services .title-wrapper .title {
		font-size: 24px;
	}

	.about-callout p {
		font-size: 18px;
		line-height: 32px;
	}

	.about-hero .title {
		font-size: 24px;
	}

	.about-hero .headline {
		font-size: 36px;
	}

	.background-info .image {
		height: 400px;
	}

	.background-info .text-group .headline {
		font-size: 22px;
		line-height: 34px;
	}

	.quote .main {
		margin: 0;
	}

	.quote .main .quote-body {
		font-size: 24px;
	}

	/* Reviews */
	.reviews .main {
		margin: -40px 0 0;
	}

	.reviews .review.active {
		padding-left: 32px;
		padding-right: 32px;
		padding-bottom: 80px;
		padding-top: 45px;
	}

	.reviews .review .icon {
		height: 50px;
		width: 50px;
	}

	.reviews .review .author {
		font-size: 18px;
	}

	.reviews .review .text {
		font-size: 16px;
	}

	/* Works */
	.work-intro {
		padding-bottom: 100px;
	}

	.work-intro .copy {
		font-size: 18px;
	}

	.work-intro .headline {
		font-size: 40px;
		letter-spacing: -1px;
		line-height: initial;
	}

	.featured-projects .project .text-group {
		padding-left: 0;
		padding-right: 0;
	}

	/* Services */
	.services .service-wrapper .service-group .title {
		font-size: 24px;
	}

	/* Contact */
	.contact .start-project {
		padding: 175px 0 100px;
	}

	.contact .start-project .btn-group {
		display: block;
	}

	.contact .start-project .btn-group a {
		display: block;
		width: max-content;
	}

	.contact .start-project .btn-group .btn-underline {
		margin: 32px 0 0;
	}

	.contact-slides .main .form-group .headline {
		font-size: 36px;
		line-height: initial;
	}

	.contact-slides .main .form-group .question-info {
		font-size: 18px;
	}

	.contact-slides .main .form-group .text {
		margin-bottom: 24px;
	}

	.contact-slides .main .form-group .error {
		margin: 16px 0;
	}

	.contact-slides .main .slide-control {
		bottom: 60px;
	}

	.contact-slides .main .form-group .input {
		padding-left: 22px;
		padding-right: 22px;
		width: calc(100% - 44px)
	}

	.contact-slides .main .form-group .icon {
		right: 22px;
	}

	.contact-slides .main .form-group input,
	.contact-slides .main .form-group textarea {
		font-size: 16px;
	}

	.contact-slides .main .slide-control .counter {
		display: none;
	}

	.contact-slides .main .next-slide .btn {
		margin-right: 18px;
	}

	.contact-slides .main .form-group .checkbox-wrapper {
		width: 100%;
	}

	.contact-slides .main .form-group .btn-wrapper .btn {
		margin-right: 0;
	}

	/* Case Study */
	.design-group .padding {
		padding: 75px 20px;
	}

	.case-intro {
		padding: 140px 0 100px !important;
	}

	.case-intro .title-group .headline {
		font-size: 36px;
		line-height: initial;
	}

	.case-intro .info {
		font-size: 20px;
		font-weight: normal;
		margin-bottom: 42px;
	}

	.case-intro .text-group {
		margin-bottom: 16px;
	}

	.case-intro .flex-wrapper.inner {
		margin-bottom: 34px;
	}

	.intro-background-image .background {
		height: 450px !important;
	}

	.case-study .text-group .value {
		font-size: 16px;
	}

	.the-challenge .text-group .value {
		width: calc((100% / 2) - 20px);
		margin-right: 20px;
	}

	.the-challenge .text-group .value:nth-of-type(3n) {
		margin-right: 20px;
	}

	.the-challenge .text-group .value:nth-of-type(2n) {
		margin-right: 0;
	}

	.logo-types .image-wrapper .image {
		height: 400px;
	}

	.logo-types .image-wrapper.full-width {
		padding: 100px 0 75px;
	}

	.logo-types .image-wrapper.full-width .text-group {
		margin: 50px 36px 0;
	}

	.logo-types .image-wrapper.full-width h3 {
		font-size: 20px;
		line-height: 36px;
	}

	.logo-types .explanation.after {
		margin: 0 0 32px;
		line-height: 36px;
	}

	.logo-types .title-group {
		margin-bottom: 50px;
	}

	.logo-types .explanation {
		margin: 50px 0 75px;
	}

	.design-group .dark-bg .headline {
		font-size: 90px;
	}

	.design-group .info-group.taller {
		padding: 135px 0;
	}

	.design-group .dark-bg.border-gap {
		padding: 90px 0;
		margin: 0;
	}

	.xyliase .design-group .sticky-wrapper {
		padding: 0;
	}
}


@media only screen and (max-width: 400px) {

	/* Button - Universal Styles */
	.view-projects .btn {
		font-size: 18px
	}

	/* Home */
	.home-hero {
		height: 100%;
		padding: 160px 0 110px !important;
	}

	/* About */
	.about-hero .title {
		font-size: 22px;
	}

	.about .heading,
	.services .title-wrapper .title {
		font-size: 20px;
		line-height: initial;
	}

	.quote .main .quote-body {
		font-size: 22px;
	}

	/* Works - Featured Projects */
	.featured-projects.my-work .section-title {
		text-align: center
	}

	.featured-projects.my-work .section-title span {
		font-size: 36px
	}

	.featured-projects .btn-underline {
		margin: 60px auto 0;
	}

	/* Contact */
	.contact .start-project .headline {
		font-size: 40px;
	}

	.contact-me {
		height: 100%;
	}

	.contact-me .main {
		padding-top: 50px;
	}

	.contact-slides.hidden {
		opacity: 0;
	}

	.contact-slides .main .next-slide {
		margin-top: 12px;
	}

	.contact-slides .main .form-group {
		margin-top: 110px;
	}
}

@media only screen and (max-width: 380px) {

	/* Contact */
	.contact .start-project .headline {
		font-size: 36px;
	}
}

@media only screen and (max-width: 360px) {

	/* Contact */
	.contact-slides .main .next-slide .btn.next-btn {
		padding-left: 22px;
		padding-right: 22px;
		font-size: 16px;
	}

	.contact-slides .main .next-slide .btn .icon {
		font-size: 22px;
	}

	.contact-slides .main .next-slide .next-btn .icon {
		margin-left: 22px;
	}
}

/* Preloader */
@keyframes preloader {

	0%,
	100% {
		visibility: visible;
	}

	100% {
		visibility: hidden;
	}
}

@keyframes preload-left {

	0%,
	80% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-100%);
	}
}

@keyframes preload-right {

	0%,
	80% {
		transform: translateY(0)
	}

	100% {
		transform: translateY(-100%);
	}
}

@keyframes preload-tagline {

	0%,
	25% {
		transform: translateY(150px) rotate(4deg);
	}

	25%,
	60% {
		transform: translateY(0) rotate(0);
	}

	100% {
		transform: translateY(-150px) rotate(-4deg);
	}
}

@keyframes afterload {

	0%,
	100% {
		visibility: visible;
	}
}

@keyframes afterload-left {

	0%,
	20% {
		transform: translateY(100%);
	}

	100% {
		transform: translateY(0);
	}
}

@keyframes afterload-right {

	0%,
	20% {
		transform: translateY(100%);
	}

	100% {
		transform: translateY(0);
	}
}

@keyframes afterload-tagline {

	0%,
	60% {
		transform: translateY(150px) rotate(-4deg);
	}

	100% {
		transform: translateY(0) rotate(0);
	}
}

@keyframes after-tagline {

	0%,
	60% {
		transform: translateY(0) rotate(0);
	}

	100% {
		transform: translateY(-150px) rotate(-4deg);
	}
}

/* Navbar */
@keyframes navbar-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes menu-link {

	0%,
	50% {
		transform: translateY(100px);
		opacity: 0
	}
}

@keyframes menu-link-close {

	0%,
	50% {
		transform: translateY(0px);
		opacity: 1
	}

	100% {
		transform: translateY(-100px);
		opacity: 0;
	}
}

@keyframes menu-info {

	0%,
	60% {
		transform: translateY(50px);
		opacity: 0
	}
}

@keyframes menu-socials {

	0%,
	50% {
		opacity: 0;
		background: rgba(0, 0, 0, 0.2);
	}
}

/* Hero */
@keyframes headline-up {
	0% {
		transform: translateY(200px) rotate(9deg);
	}

	100% {
		transform: translateY(0) rotate(0deg);
	}
}

@keyframes opacity-fade {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes btn-before {
	0% {
		width: 100%;
		right: 0;
	}

	100% {
		width: 0;
		right: 0;
		left: unset;
	}
}

/* Features */
@keyframes feature-icon-before {
	0% {
		width: 100%;
		right: 0;
	}

	100% {
		width: 0;
		right: 0;
	}
}


/* Reviews */
@keyframes review-btn-right {
	0% {
		width: 100%;
		right: 0%
	}

	100% {
		width: 100%;
		left: unset;
		right: -100%
	}
}

@keyframes review-btn-right-hover {
	0% {
		width: 0%;
		right: 100%
	}

	100% {
		width: 100%;
		right: 0
	}
}

@keyframes review-btn-left {
	0% {
		width: 100%;
		right: 0%
	}

	100% {
		width: 100%;
		left: unset;
		right: 100%
	}
}

@keyframes review-btn-left-hover {
	0% {
		width: 0%;
		right: -100%
	}

	100% {
		width: 100%;
		right: 0
	}
}

@keyframes current-number-animate {
	0% {
		transform: translateY(0)
	}

	40% {
		transform: translateY(25px)
	}

	40%,
	45% {
		opacity: 0;
		transform: translateY(25px);
	}

	45%,
	60% {
		transform: translateY(-25px);
		opacity: 0;
	}

	60%,
	70% {
		transform: translateY(-25px);
		opacity: 1;
	}

	70%,
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Project Arrow Hover */
@keyframes project-arrow-hover {
	0% {
		transform: rotate(-45deg) translateX(0);
		opacity: 1;
	}

	20% {
		transform: rotate(-45deg) translateX(60px);
		opacity: 1;
	}

	40% {
		opacity: 0;
		transform: rotate(-45deg) translateX(60px);
	}

	60% {
		transform: rotate(-45deg) translateX(-60px);
		opacity: 0;
	}

	80% {
		opacity: 1;
		transform: rotate(-45deg) translateX(-60px);
	}

	100% {
		transform: rotate(-45deg) translateX(0);
		opacity: 1;
	}
}


/* Contact */
@keyframes icon-to-left {
	0% {
		transform: translateX(0)
	}

	30% {
		transform: translateX(50px);
	}

	20%,
	35% {
		opacity: 0
	}

	20%,
	50% {
		position: absolute;
		right: -100px;
	}

	20%,
	50% {
		opacity: 0
	}

	50%,
	75% {
		position: absolute;
		right: 120%;
	}

	75%,
	100% {
		position: absolute;
		right: calc(100% - 30px);
	}
}

@keyframes icon-to-left-after {

	0%,
	25% {
		position: absolute;
		right: calc(100% - 30px);
	}

	25%,
	50% {
		position: absolute;
		right: 120%;
	}

	50%,
	80% {
		opacity: 0;
		position: absolute;
		right: -100px
	}

	65%,
	75% {
		opacity: 0
	}

	70% {
		transform: translateX(50px)
	}

	100% {
		transform: translateX(0)
	}
}

@keyframes close-btn {
	0% {
		height: 0%
	}

	100% {
		height: 100%;
	}
}

@keyframes close-btn-after {
	0% {
		top: 0;
		height: 100%
	}

	100% {
		top: 100%;
		height: 0%
	}
}

/* Contact Slides */
@keyframes close-icon-hover {
	0% {
		top: -50%;
	}

	100% {
		top: 50%;
	}
}

@keyframes close-icon-after {
	0% {
		top: 50%;
	}

	100% {
		top: 150%;
	}
}