/*========== Universal ==========*/
	/*---- Font ----*/
	@font-face {
		font-family: Brandon_Grotesque_regular;
		src: url(font/Brandon_Grotesque_regular.otf);
		font-weight: normal;
	}
	@font-face {
		font-family: Brandon_Grotesque_medium;
		src: url(font/Brandon_Grotesque_medium.otf);
		font-weight: 500;
	}
	@font-face {
		font-family: Brandon_Grotesque_bold;
		src: url(font/Brandon_Grotesque_bold.otf);
		font-weight: bold;
	}

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		/*font-family: "Nunito", sans-serif;*/
		font-family: "Brandon_Grotesque_regular", sans-serif;
		scroll-behavior: smooth;
	}
	ul {
		list-style: none;
	}
	a {
		text-decoration: none;
	}
	:root {
		--siteBlack: #575E72;
		--sitePurple: #B891EB;
	}
	h3, p {
		color: var(--siteBlack);
	}
	h3 {
		font-size: 40px;
		font-weight: 400;
		margin-bottom: 10px;
	}
	p {
		margin-bottom: 15px;
		font-size: 20px;
	}
	.sectionGap {
		margin-bottom: 120px;
	}
	.mobileOnly {
		display: none !important;
	}
	body.scroll-lock {
		overflow-y: hidden;
	}

/*======= Wrapper =======*/
	.uniWrapperFullWidth {
		width: 100%;
	}
	.uniWrapperFullWidth:after {
		content: '';
		display: block;
		clear: both;
	}
	/*--------------*/
	.uniWrapper {
		width: 1280px;
		margin: 0 auto;
	}

/*======= header ======*/
	.headerBG {
		box-shadow: 0 2px 5px 0px #bfbfbf;
		margin-bottom: 50px;
	}
	.fixedHeader {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 10;
		background: #fff;
		box-shadow: unset;
		border-bottom: 1px solid #575E72;
	}
	header {
		padding: 30px 100px;
		display: grid;
		grid-template-columns: 3fr 7fr;
		grid-column-gap: 40px;
		align-items: center;
	}
	header .logo img {
		width: 100%;
		display: block;
	}
	/*------------*/
	header nav {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	header nav ul {
		display: inline-block;
		text-align: right;
	}
	header nav li {
		display: inline-block;
		margin-right: 40px;
	}
	header nav li:last-child {
		margin-right: unset;
	}
	header nav li a {
		display: block;
		text-transform: uppercase;
		font-family: "Brandon_Grotesque_bold", sans-serif;
		letter-spacing: 1px;
		color: var(--siteBlack);
		padding-bottom: 3px;
	}
	header nav li a:hover {
		transition: all .3s;
		color: #7A3EC9;
	}
	header nav li.active a {
		display: block;
		text-transform: uppercase;
		font-weight: 700;
		letter-spacing: 1px;
		color: #7A3EC9;
		border-bottom: 3px solid #7A3EC9;
	}

/*====== Section Title =====*/
	.sectionTitle {
		width: 834px;
		margin: 0 auto;
	}
	.sectionTitle h2 {
		font-size: 60px;
		color: var(--siteBlack);
		font-weight: 400;
		margin-bottom: 40px;
	}

/*======= Print Section =======*/
	.printSectionWrapper img {
		width: 100%;
	}
	.printSliderWrapper {
		margin-bottom: 60px;
	}
	.printContent {
		width: 834px;
		margin: 0 auto;
	}
	
/*======= logos Section ======*/
	.logosSectionWrapper {
		width: 834px;
		margin: 0 auto;
	}
	.logoSliderWrapper {
		margin-bottom: 45px;
	}
	.logoSlider {
		padding-bottom: 35px;
	}
	.logoSlider img {
		width: 57%;
		display: block;
		margin: 0 auto;
	}

/*======= Websites Section =======*/
	.websitesInnerNav {
		width: 834px;
		margin: 0 auto 60px;
	}
	.websitesInnerNav li {
		display: inline-block;
		margin-right: 40px;
		font-size: 30px;
		color: var(--siteBlack);
		opacity: .6;
		cursor: pointer;
	}
	.websitesInnerNav li:hover {
		transition: opacity .3s;
		opacity: 1;
	}
	.websitesInnerNav li.active {
		opacity: 1;
		border-bottom: 3px solid var(--sitePurple);
	}
	/*------------*/
	.websitesContent .singleWebsite {
		display: grid;
		grid-template-columns: 6fr 4fr;
		grid-gap: 60px;
		padding: 0 100px;
		display: none;
	}
	.websitesContent .singleWebsite.active {
		display: grid;
	}
	.websitesContent .singleWebsite img {
		display: block;
		width: 100%;
	}
	.websitesContent .singleWebsite .left {
		box-shadow: 10px 2px 30px #d7d7d7;

	}
	.websitesContent .singleWebsite .websitePopupTrigger {
		position: relative;
	}
	.websitesContent .singleWebsite .websitePopupTrigger .imageOverlay {
		background-color: rgba(0, 0, 0, .2);
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		cursor: pointer;
		opacity: 0;
	}
	.websitesContent .websitePopupTrigger .imageOverlay img {
		width: 220px;
		display: block;
		margin: 100px auto;
		opacity: .8;
	}
	.websitesContent .singleWebsite .websitePopupTrigger:hover .imageOverlay {
		transition: all .3s;
		opacity: 1;
	}
	/*-----------------*/
	.websiteShowcaseNav ul {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 50px;
	}
	.websiteShowcaseNav ul li:not(.active) {
		cursor: pointer;
	}

/*====== Website Popup ======*/
	#websitePopup {
		position: fixed;
		width: 100%;
		height: 100vh;
		left: 0;
		top: 0;
		background-color: #575E72;
		padding: 60px;
		overflow-y: scroll;
		display: none;
	}
	#websitePopup .websitePopupInner {
		display: grid;
		grid-template-columns: 9fr 1fr;
		grid-gap: 60px;
		position: relative;
		padding-top: 30px;
	}
	#websitePopup .websitePopupInner .mainImage {
		box-shadow: 20px 5px 20px rgba(0, 0, 0, 0.3)
	}
	/*------------------*/
	#websitePopup .websitePopupInner .imageNav li {
		margin-bottom: 30px;
		cursor: pointer;
	}
	#websitePopup .websitePopupInner .imageNav li.active {
		opacity: .6;
		cursor: unset;
	}
	#websitePopup .websitePopupInner img {
		display: block;
		width: 100%;
	}
	#websitePopup .websitePopupInner .close {
		position: absolute;
		right: 0;
		top: -10px;
		font-size: 18px;
		text-transform: uppercase;
		color: #fff;
		cursor: pointer;
		letter-spacing: 1px;
	}

/*======= UX Section ======*/
	.uxSectionWrapper img {
		width: 100%;
	}
	.uxSectionWrapper .topContent {
		margin-bottom: 100px;
	}
	.uxSectionWrapper .topContent .gifImage {
		margin-bottom: 40px;
	}
	.uxSectionWrapper .topContent img {
		padding: 0 100px;
		display: block;
		margin: 0 auto;
	}
	.uxSectionWrapper .topContentInner {
		width: 834px;
		display: block;
		margin: 0 auto;
	}
	/*---------------*/
	.uxSectionWrapper .bottomContent {
		width: 834px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 40px;
	}

/*====== Video Section ======*/
	.videosSectionWrapper {
		padding: 0 100px;
	}
	.videosSectionWrapper .videoShowcase {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 40px;
		margin-bottom: 40px;
	}
	.videosSectionWrapper .videoShowcase .sVideo {
		box-shadow: 7px 7px 10px #bfbfbf;
		cursor: pointer;
	}
	.videosSectionWrapper .videoShowcase img {
		width: 100%;
		display: block;
	}
	/*--------------*/
	.videosSectionWrapper .videoContent {
		width: 834px;
		margin: 0 auto;
	}

/*====== Video Popup ======*/
	#videoPopup {
		position: fixed;
		width: 100%;
		height: 100vh;
		left: 0;
		top: 0;
		background-color: #575E72;
		padding: 60px;
		overflow-y: scroll;
		display: none;
	}
	#videoPopup .videoPopupInner {
		position: relative;
		/*width: 85%;*/
		width: 1160px;
		margin: 0 auto;
		padding-top: 40px;
	}
	#videoPopup img {
		width: 100%;
		display: block;
	}
	#videoPopup .videoPopupInner .singleVideo {
		box-shadow: 0 0 40px 15px rgba(0,0,0, 0.6);
		display: none;
	}
	#videoPopup .videoPopupInner .singleVideo iframe {
		width: 100% !important;
		/*height: 600px !important;*/
		display: none;
	}
	#videoPopup .videoPopupInner .singleVideo iframe#videoP1 {
		height: 718px;
	}
	#videoPopup .videoPopupInner .singleVideo iframe#videoP2 {
		height: 638px;
	}
	#videoPopup .videoPopupInner .singleVideo iframe#videoP3,
	#videoPopup .videoPopupInner .singleVideo iframe#videoP4 {
		height: 653px;
	}
	#videoPopup .singleVideo .videoOverlay {
		display: block;
		cursor: pointer;
	}
	#videoPopup .singleVideo .videoOverlay img {
		width: 100%;
	}
	@keyframes fade {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	#videoPopup .videoPopupInner .singleVideo.active {
		display: block;
		animation: fade .4s ease-in 1;
	}
	/*------------------*/
	#videoPopup .videosNav {
		margin-top: 60px;
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-gap: 30px;
	}
	#videoPopup .videosNav li {
		box-shadow: 5px 5px 10px 2px rgba(0,0,0, 0.4);
		cursor: pointer;
	}
	
	#videoPopup .videoPopupInner .close {
		position: absolute;
		right: 0;
		top: -10px;
		font-size: 18px;
		text-transform: uppercase;
		color: #fff;
		cursor: pointer;
		letter-spacing: 1px;
	}

/*====== Contact Popup ======*/
	#contactPopup {
		position: fixed;
		width: 100%;
		height: 100vh;
		left: 0;
		top: 0;
		background-color: #575E72;
		padding: 60px;
		overflow-y: scroll;
		display: none;
	}
	#contactPopup h2 {
		color: #fff;
		font-size: 40px;
		margin-bottom: 30px;
		font-weight: normal;
	}
	#contactPopup .contactPopupInner {
		position: relative;
		width: 940px;
		margin: 0 auto;
		padding-top: 40px;
	}
	#contactPopup .contactForm form {
		width: 100%
	}
	#contactPopup form .inputsWrapper {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 40px;
		align-items: center;
		margin-bottom: 30px;
	}
	#contactPopup form input:not([type=submit]),
	#contactPopup form textarea {
		width: 100%;
		display: block;
		height: 50px;
		padding: 0 20px;
		font-size: 18px;
		letter-spacing: 1px;
		border: 2px solid var(--sitePurple);
		outline: none;
	}
	#contactPopup form textarea {
		height: unset;
		padding: 10px 20px;
		margin-bottom: 30px;
		resize: none;
	}
	/* Chrome, Safari, Edge, Opera */
	#contactPopup input::-webkit-outer-spin-button,
	#contactPopup input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	/* Firefox */
	#contactPopup input[type=number] {
		-moz-appearance: textfield;
	}
	#contactPopup form input[type=submit] {
		background-color: var(--sitePurple);
		color: #fff;
		border: 2px solid var(--sitePurple);
		border-radius: 25px;
		padding: 10px 0;
		width: 100%;
		font-size: 20px;
		text-transform: uppercase;
		letter-spacing: 1px;
		cursor: pointer;
	}
	#contactPopup form input[type=submit]:hover {
		transition: all .3s;
		background-color: #fff;
		color: var(--siteBlack);
	}
	#contactPopup form .result {
		color: #fff;
		font-size: 18px;
	}
	/*------------------*/
	#contactPopup .contactPopupInner .close {
		color: #fff;
		text-decoration: underline;
		font-size: 20px;
		text-transform: uppercase;
		letter-spacing: 1px;
		cursor: pointer;
	}
	#contactPopup > .close {
		color: #fff;
		text-decoration: underline;
		font-size: 20px;
		text-transform: uppercase;
		letter-spacing: 1px;
		cursor: pointer;
		position: absolute;
		top: 50px;
		right: 50px;
	}
	/*--------------*/
	#contactPopup .reCaptcha {
		margin-bottom: 30px;
	}
	.recaptchaError {
		display: none;
		color: #fff;
		margin-top: 10px;
	}
	@keyframes spin {
		100% {
			transform: rotate(360deg);
		}
	}
	#contactPopup img.sending {
		width: 30px;
		margin: 0 auto;
		display: block;
		animation: spin 1s infinite;
		animation-timing-function: linear;
		animation-fill-mode: forwards;
		display: none;
	}

/*======= Footer ======*/
	footer {
		padding: 40px 100px;
	}
	footer div {
		font-size: 20px;
		color: var(--siteBlack);
		text-transform: uppercase;
		font-family: "Brandon_Grotesque_bold", sans-serif;
	}

/*====== Slick Slider =====*/
	.slick-dots li button::before {
		font-size: 13px;
		color: #D1D1D1;
		opacity: 1;
	}
	.slick-dots li.slick-active button::before {
		color: var(--sitePurple);
		opacity: 1;
	}
	.slick-dots {
		bottom: -35px;
	}
	.logoSliderWrapper .slick-dots {
		bottom: -15px;
	}
	/*--------------*/
	.logoSlider.slick-initialized .slick-slide {
		display: flex;
		align-items: center;
	}

/*======= Case Studies =====*/
	.caseWrapper .caseSliderWrapper {
		margin-bottom: 70px;
	}
	.caseWrapper .caseContent {
		width: 834px;
		margin: 0 auto;
	}
	.caseWrapper .caseContent h2 {
		color: var(--siteBlack);
		font-size: 40px;
		font-weight: 400;
		margin-bottom: 10px;
	}
	.caseWrapper img {
		width: 100%;
	}
	.caseWrapper .caseContentImages {
		margin-top: 50px;
	}
	.caseWrapper .caseContentImages figure {
		margin-bottom: 80px;
		box-shadow: 15px 15px 30px #bfbfbf;
	}
	.caseWrapper .row {
		display: grid;
		grid-gap: 30px;
	}
	.caseWrapper .row.threeOneCols {
		grid-template-columns: 7fr 3fr;
		align-items: center;
	}
	.caseWrapper .row.twoCols {
		grid-template-columns: repeat(2, 1fr);
		margin-top: 50px;
	}

/*========= Responsive ========*/
	/*======= 1024px ======*/
		@media screen and (max-width: 1024px) {
			.uniWrapper {
				width: 100%;
			}
			header {
				padding: 30px 40px;
			}
			.sectionTitle,
			.websitesInnerNav,
			.uxSectionWrapper .topContentInner,
			.uxSectionWrapper .bottomContent {
				width: 80%;
			}
			/*-------------*/
			#contactPopup .contactPopupInner {
				width: 100%;
			}
			/*--------------*/
			#videoPopup .videoPopupInner {
				width: 100%;
			}
		}

	/*======= 834px ======*/
		@media screen and (max-width: 834px) {
			h3 {
				font-size: 30px;
			}
			p {
				font-size: 18px;
			}
			.sectionTitle h2 {
				font-size: 50px;
			}
			.printContent,
			.uxSectionWrapper .topContentInner,
			.uxSectionWrapper .bottomContent,
			.logosSectionWrapper {
				width: 80%;
				margin: 0 auto;
			}
			.websitesInnerNav {
				width: 80%;
			}
			.websitesContent .singleWebsite,
			.videosSectionWrapper,
			.uxSectionWrapper .topContent img {
				padding: 0 50px;
			}
			.websiteShowcaseNav ul {
				grid-gap: 30px;
			}
			.websitesInnerNav li {
				font-size: 25px;
			}
			/*------------*/
			.videosSectionWrapper .videoContent {
				width: 90%;
			}
			/*-----------*/
			.sectionGap {
				margin-bottom: 100px;
			}
			/*-------- Case Studies --------*/
			.caseWrapper .caseContent {
				width: 90%;
			}
			/*---------------*/
			footer {
				padding: 30px 50px;
			}
			/*--------------*/
			#videoPopup .videoPopupInner {
				width: 100%;
			}
			#videoPopup .videosNav {
				grid-template-columns: repeat(4, 1fr);
			}
		}

	/*======= 480px ======*/
		@media screen and (max-width: 480px) {
			header nav ul {
				display: none;
			}
			.mobileOnly {
				display: block !important;
			}
			header nav {
				justify-content: center;
			}
			header ul.mobileNav {
				font-size: 30px;
			}
			header ul.mobileNav a {
				padding: 0;
				color: #ABAFB9;
			}
			header ul.mobileNav li.active a {
				color: #7A3EC9;
				border: none;
			}
			header ul.mobileNav li.active.tempDeactive a {
				color: #ABAFB9;
			}
			header ul.mobileNav .fa-home {
				font-size: 33px;
				position: relative;
				top: 3px;
			}
			header {
				grid-template-columns: 1fr;
				grid-gap: 20px;
			}
			header nav ul {
				text-align: center;
			}
			/*---------------*/
			.sectionTitle {
				width: 90%;
				text-align: center;
			}
			.sectionTitle h2 {
				font-size: 40px;
			}
			/*-------------*/
			.printContent,
			.uxSectionWrapper .topContentInner,
			.uxSectionWrapper .bottomContent,
			.logosSectionWrapper {
				width: 90%;
			}
			/*--------------*/
			.logoSlider img {
				width: 90%;
			}
			/*--------------*/
			.websitesInnerNav {
				width: 90%;
				margin: 0 auto 30px;
			}
			.websitesInnerNav ul {
				display: grid;
				grid-template-columns: repeat(3, auto);
				grid-gap: 25px;
			}
			.websitesInnerNav li {
				margin-right: unset;
				font-size: 22px;
			}
			.websitesContent .singleWebsite.active {
				display: block;
			}
			.websitePopupTrigger {
				display: none;
			}
			.webMSliderWrapper img {
				width: 100%;
			}
			.websitesContent .singleWebsite .left {
				margin-bottom: 80px;
			}
			.websitesContent .singleWebsite,
			.videosSectionWrapper,
			.uxSectionWrapper .topContent img {
				padding: 0 20px;
			}
			.webMSliderWrapper .slick-dots {
				bottom: -60px;
			}
			.webMSliderWrapper .slick-dots li {
				margin-right: 20px;
			}
			.webMSliderWrapper .slick-dots li button::before {
				font-size: 25px;
			}
			.websiteShowcaseNav {
				display: none;
			}
			/*--------------*/
			.uxSectionWrapper .topContent {
				margin-bottom: 50px;
			}
			.uxSectionWrapper .bottomContent {
				grid-template-columns: 1fr;
				grid-gap: 20px;
			}
			.uxSectionWrapper .bottomContent .right {
				grid-row-start: 1;
			}
			/*---------------*/
			.videosSectionWrapper .videoShowcase {
				grid-template-columns: 1fr;
			}
			.videosSectionWrapper .videoContent {
				width: 100%;
			}
			/*---------------*/
			#videoPopup {
				padding: 30px 20px;
			}
			#videoPopup .videosNav {
				grid-template-columns: repeat(3, 1fr);
			}
			/*-------- Case Studies -------*/
			.caseWrapper .row.threeOneCols,
			.caseWrapper .row.twoCols {
				grid-template-columns: 1fr;
			}
			.caseWrapper .row.threeOneCols img {
				width: 65%;
				display: block;
				margin: 0 auto;
			}
			.caseWrapper .caseContentImages figure {
				margin-bottom: 30px;
				box-shadow: 10px 10px 20px #bfbfbf;
			}
			/*-------- Contact Form -------*/
			#contactPopup {
				padding: 20px;
				padding-top: 140px;
			}
			#contactPopup h2 {
				text-align: center;
			}
			#contactPopup form .inputsWrapper {
				grid-template-columns: 1fr;
				justify-content: center;
				text-align: center;
			}
			#contactPopup > .close {
				top: 165px;
				right: 20px;
				font-size: 18px;
			}
			/*---------------*/
			footer {
				padding: 30px 20px;
				text-align: center;
			}
		}

	/*======= 375px ======*/
		@media screen and (max-width: 375px) {
			.websitesInnerNav li {
				font-size: 20px;
			}
		}

	/*======= 320px ======*/
		@media screen and (max-width: 320px) {
			.websitesInnerNav li {
				font-size: 18px;
			}
			/*-----------*/
			#contactPopup > .close {
				top: 155px;
			}
		}