/*
	Theme Name: Sagana
	Theme URI: https://wpdedicated.uk
	Description: Hand Crafted theme
	Version: 1.8
	Author: Ben Kitching
	Author URI: https://benkitching.uk
	Tags: Blank, HTML5, CSS3

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/

.cc-floating .cc-compliance>.cc-btn {
	margin: 0 10px;
}

:root {
  --sagana-purple: #000064;
  --sagana-purple-light: #7779FF;
  --sagana-purple-dark: #000037;

  --bg-purple: #EBEBFF;

  --purple-steps-1: #4800A3;
  --purple-steps-2: #7E00FF;
  --purple-steps-3: #A247FF;
  --purple-steps-4: #BF80FF;

  --gradient-pink: #ED1EB1;
  --gradient-grey: #646464;
  --gradient-yellow: #FFE6CD;
  --gradient-orange: #FF7E55;
  --gradient-red: #FF3960;
  --gradient-fuscia: #FF24A6;
  --gradient-purple: #A84EFF;
  --gradient-blue: #45A5FF;
  --gradeint-aqua: #6AEFD6;
  --gradient-green: #8FF28F;

  --white: #F7F7F9;
  --black: #000;
}

/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
html {
	font-size:1vw;
	margin:0;
	padding:0;
}
@media (min-width:1921px) {
	html {
		font-size: 19px;
	}
}
body {
	font:400 1.1rem/1.4 'Roboto', Arial, sans-serif;
	color:#000;
	margin:0;
	padding:0;
	max-width: 100vw;
	overflow-x:clip;
	background-color:#fff;
}
body.loading {
	overflow:hidden;
}

#loader {
	background-color: var(--sagana-purple);
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999999;
}
/* clear */
.clear:before,
.clear:after {
    content:' ';
    display: table;
}

.clear:after {
    clear: both;
}
img {
	max-width: 100%;
	vertical-align: bottom;
}

.block {
	background-color: #fff;
}

/*------------------------------------*\
    LINKS
\*------------------------------------*/

a {
	color: inherit;
	text-decoration: underline;
	transition: 0.5s all;
}
a:hover {
	text-decoration: none;
}
a:focus {
	outline: 0;
}
a:hover,
a:active {
	outline: 0;
}

a.no-decoration {
	text-decoration: none;
}

a.btn, .gform_wrapper.gform-theme.gform-theme--foundation.gform-theme--framework.gform-theme--orbital .gform-footer input.gform_button.button {
	position: relative;
	border-radius: 2rem;
	padding: 1rem 4rem;
	color: #fff;
	z-index: 2;
	background-color: var(--sagana-purple-light);
	border: 1px solid var(--sagana-purple-light);
	display: block;
	color: #fff;
	text-decoration: none;
}

a.btn:hover, .gform_wrapper.gform-theme.gform-theme--foundation.gform-theme--framework.gform-theme--orbital .gform-footer input.gform_button.button:hover {
	background-color: transparent;
	color: var(--sagana-purple-light);
}


/*------------------------------------*\
    FORMS
\*------------------------------------*/

.mc-field-group label {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
#mc_embed_signup_scroll {
	position: relative;
	border-bottom: 1px solid rgba(255,255,255,0.8);
	padding-bottom: 1rem;
	display: flex;
	justify-content: space-between;
	width: calc(100% - 4rem);
	margin-top: 2rem;
	margin-bottom: 1rem;
}
#mc_embed_signup_scroll input, #gform_wrapper_1 input[type=email] {
	color: #fff;
	padding: 0;
	font-size: 3rem;
	height: 4rem;
	background-color: transparent;
	font-weight: 700;
	border: none;
	outline: none;
}
#mc_embed_signup_scroll input::placeholder, #gform_wrapper_1 input[type=email]::placeholder {
	color: #fff;
}

#mc_embed_signup a.btn {
	width: max-content;
}

#subscribe-result {
	margin-top: 0.5rem;
}

input:focus {
	outline:0;
	border:1px solid #003D47;
}

input[type=text], input[type=textarea], input[type=email], input[type=password] {
	padding:1rem;
	background-color:#fff;
	border-radius: 0.25rem;
	border:1px solid var(--light-blue);

}

.contact-form .gform_wrapper input[type=text], .contact-form .gform_wrapper input[type=email], .contact-form .gform_wrapper textarea, .contact-form .gform_wrapper input[type=password] {
	border: none;
	border-radius: 0.25rem;
	border-color: var(--sagana-purple);
	font-size: 1.6rem;
	padding: 1.5rem 1rem;
}

.simple-contact .contact-form .gform_wrapper input[type=text], .simple-contact .contact-form .gform_wrapper input[type=email], .contact-form .gform_wrapper textarea, .simple-contact .contact-form .gform_wrapper input[type=password] {
	border: 1px solid;
}


#gform_wrapper_1 {
	width: calc(100% - 4rem);
}
#gform_wrapper_1 .gform_body {
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba(255,255,255,0.8);
	margin-bottom: 1rem;
}
.gfield_required.gfield_required_text {
	opacity: 0;
}

.gform_wrapper.gform-theme.gform-theme--foundation.gform-theme--framework.gform-theme--orbital .gfield_label.gform-field-label {
	margin: 1rem 0;
	line-height: 1;
	font-family: 'rift', sans-serif;
	font-weight: 400;
	font-size: 1.4rem;
}

.contact-form .gform_wrapper.gform-theme.gform-theme--foundation.gform-theme--framework.gform-theme--orbital legend.gfield_label, .contact-form .gform_wrapper.gform-theme.gform-theme--foundation.gform-theme--framework.gform-theme--orbital label.gfield_label {
	margin-bottom: 0.5rem;
	font-family: 'Roboto', arial, sans-serif;
	font-size: 1rem;
}

#gform_wrapper_1 .gfield_label.gform-field-label {
	color: #fff;
}

.contact-form .gform-theme--foundation .gform_fields {
	row-gap: 0.25rem;
}

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

.block {
	width: 100%;
	min-width: 100vw;
	position: relative;
}

.wrapper {
	max-width: 1824px;
	width: calc(100% - 8rem);
	margin: 0 auto;
	position: relative;
}
.logo {
	height: 4rem;
	margin-right: 1rem;
	transition: 0.5s height;
}
.logo img {
	height: 100%;
	width: auto;
	object-fit: contain;
}

#header {
	position: fixed;
	width: 100%;
	top:0;
	left: 0;
	z-index: 10;
	transition: 0.5s transform;
	background-color: var(--sagana-purple-dark);
	background-image: url('./img/header-bg.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}
#header .wrapper {
	padding: 1rem 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.home #header {
	background-image: none;
	background: transparent;
}

.home.scrolled #header {
	background-color: var(--sagana-purple-dark);
	background-image: url('./img/header-bg.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}
.scrolled #header .logo {
	height: 3rem;
}

.home.scrolled #header ul.sub-menu {
	background-color: var(--sagana-purple);
}

.scrolled #header.hide {
	transform: translateY(-100%);
}

.nav {
	width: 100%;
}
.nav-menu {
	width: fit-content;
	margin-left: auto;
}
.nav-menu ul {
	list-style-type: none;
	display: flex;
	padding:0;
	margin:0;
	align-items: center;
}
.nav-menu li {
	margin:0 1rem;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.nav-menu li ul.sub-menu {
    position: absolute;
    flex-wrap: wrap;
    background: var(--sagana-purple);
    top: 2rem;
    padding: 1rem;
    left: 0;
    z-index: 2;
    border-radius: 0.25rem;
    opacity: 0;
    transition: 0.5s opacity;
    height: 0;
    overflow: hidden;
}

.nav-menu .sub-menu li {
    margin: 0.5rem 0;
    width: max-content;
    display: block;
    flex-basis: 100%;
}

.nav-menu a {
	text-decoration: none;
	cursor: pointer;
	color: #fff;
	position: relative;
	z-index: 3;
	text-transform: uppercase;
}

.nav-menu li.menu-item-has-children:hover .sub-menu {
	opacity: 1;
	height: auto;
}

#header-search {
	margin-left: 2rem;
	display: flex;
	align-items: center;
}
#header-search img {
	height: 1.5rem;
	width: auto;
	filter: invert();
	object-fit: contain;
}

#search-popup {
	position: fixed;
	z-index: 9;
	background-color: rgba(0,0,0,0.2);
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	display: none;
}
#search-popup-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

#search-form form {
	width: 40vw;
	background-color: #f2f2f2f2;
	border-radius: 6rem;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 1rem;
	position: relative;
}
#search-form button.search-submit {
	border: none;
	outline: none;
	background-color: transparent;
	margin-right: 1rem;
}
#search-form button.search-submit img {
	width: 3rem;
	height: auto;
}
#search-form input.search-input {
	font-size: 2rem;
	width: 100%;
	background: transparent;
	border: none;
	outline: none;
}
#search-form a#close-search {
	position: absolute;
	right: 0.6rem;
	top: 0.6rem;
}
#search-form a#close-search svg {
	width: 3.5rem;
	height: auto;
	transition: 0.5s transform;
}
#search-form a#close-search:hover svg {
	transform: rotate(45deg);
}

.footer {
	background-image: url('./img/footer-bg.svg');
	background-size: cover;
	background-position: bottom center;
	background-repeat: no-repeat;
	position: relative;
	min-width: 100vw;
}
.footer .wrapper {
	padding-top: 4rem;
	padding-bottom: 1rem;
}
#footer-logo img {
	position: relative;
	top: -1.5rem;
}

a.linkedin {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	position: relative;
	top: 0.75rem;
}
a.linkedin svg {
	width: 3rem;
	height: auto;
	margin-left: 1rem;
}

#footer-right {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

#policy-links a {
	margin-left: 1rem;
}

#policy-links a:hover {
	text-decoration: underline;
}

.contact-emails p {
	width: fit-content;
}

#footer-nav-wrapper {
	padding-top: 1rem;
	border-top: 1px solid rgba(255,255,255,0.8);
	margin-top: 6rem;
}

#footer-nav ul {
	list-style-type: none;
	padding: 0;
	display: flex;
	justify-content: space-between;
	margin: 0;
}

#footer-nav .sub-menu {
	flex-wrap: wrap;
}
#footer-nav .sub-menu li {
	width: 100%;
}

#footer-nav a {
	text-decoration: none;
}
#footer-nav a:hover {
	text-decoration: underline;
}

/*------------------------------------*\
    Colors
\*------------------------------------*/

.text-white {
	color:#fff;
}

.text-sagana-light {
	color: var(--sagana-purple-light);
}
.text-sagana-dark {
	color: var(--sagana-purple-dark);
}

.text-upper {
	text-transform: uppercase;
}

.bg-white {
	background-color: #fff;
}
.bg-transparent {
	background-color: transparent;
}
.bg-sagana {
	background-color: var(--sagana-purple);
}
.bg-sagana-light {
	background-color: var(--sagana-purple-light);
}
.bg-sagana-dark {
	background-color: var(--sagana-purple-dark);
}
.bg-purple-light {
	background-color: var(--bg-purple);
}
.bg-purple-mid {
	background-color: var(--purple-steps-1);
}
.bg-gray {
	background-color: #F3F3F3;
}
.bg-half-gray {
	background-color: #fff;
	background-image: linear-gradient(180deg, #f3f3f3 0%, #f3f3f3 50%, #fff 50%, #fff 100%);
}
.bg-half-white {
	background-color: #fff;
	background-image: linear-gradient(0deg, #f3f3f3 0%, #f3f3f3 50%, #fff 50%, #fff 100%);
}

.bg-gray-purple {
	background-color: #F3F3F3;
	background-image: linear-gradient(90deg, #f3f3f3 0%, #f3f3f3 50%, var(--sagana-purple-light) 50%, var(--sagana-purple-light) 100%);
}

.bg-gradient-bottom {
	background-color: #fff;
	background-image: linear-gradient(0deg, #f3f3f3, transparent);
	background-size: 100% 50%;
	background-position: bottom;
	background-repeat: no-repeat;
}

.bg-gradient-top {
	background-color: #fff;
	background-image: linear-gradient(180deg, #f3f3f3, transparent);
	background-size: 100% 50%;
	background-position: top;
	background-repeat: no-repeat;
}

.block-bg {
	width: 100vw;
	height: 100vh;
	background-attachment: fixed;
	background-size: cover;
	position: absolute;
}

.block.hero {
	height: 200vh;
}
.block.hero.has-logo {
	height: 400vh;
}
.hero-fades {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
}
.hero-fades.hero-inner {
	opacity: 1;
}

.hero .wrapper {
	position: absolute;
	bottom: 50%;
	transform: translateY(50%);
}
.hero.has-logo .wrapper {
	bottom: 10rem;
	transform: none;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to { 
        transform: rotate(360deg);
    }
}

.hero .block-bg {
	position: fixed;

}

.hero-logo #lottie {
	width: 42vw;
	margin-bottom: 5rem;
	height: auto;

}

.hero-scroll, .header-scroll {
	position: fixed;
	left: 50%;
	bottom: 2rem;
	text-align: center;
	transform: translateX(-50%);
}
.header-scroll {
	position: absolute;
	bottom: 16rem
}
.hero-scroll svg, .header-scroll svg {
	width: 3rem;
	height: auto;
}

.block.page-header {
	min-height: calc(100vh + 12rem);
	margin-bottom: -12rem;
}
.block.page-header-short {
	padding: 0 0 30rem;
	margin-bottom: -24rem;
}

.block.page-header .wrapper, .block.page-header-short .wrapper {
	padding-top: 12rem;
}

.block.page-header .block-bg img {
	height: 100%;
}

.info-tiles {
	min-height: 60vh;
}
.tile-bg {
	height: 16rem;
	width: 100%;
	border-radius: 0.25rem;
}
.info-tiles .col {
	display: flex;
}
.info-tiles .col:nth-child(2) {
	top: 10vh;
}
.info-tiles .col:last-child {
	top: 20vh;
}
.tile {
	border-radius: 0.25rem;
	padding: 1rem;
	margin: 0 0.5rem;
	width: calc(50% - 1rem);
}

.image-tiles .info-tiles .tile {
	display: block;
	padding: 0;
	overflow: visible;
}

.tile p {
	width: 100%;
	font-size: 1.4rem;
	min-height: 1.6rem;
}
.tile p.text-sagana-light {
	font-size: 5rem;
	line-height: 1;
	margin: 0;
}

.logo-col {
	width: calc(33.33% - 4rem);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.logo-tile {
	width: calc(50% - 0.75rem);
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px;
	border: 2px solid #f3f3f3;
	border-radius: 0.25rem;
	margin: 0.25rem;
}

.logos .col.fifth {
    max-width: 20%;
    width: fit-content;
}

.col.fifth .logo-tile {
	width: calc(100% - 0.5rem);
	border: none;
}

.logo-tile img {
	width: 100%;
	height: auto;
	max-height: 10rem;
	object-fit: contain;
}

.col.fifth .logo-tile img {
	padding: 0.25rem;
	border: 2px solid #f3f3f3;
}

.post-image {
	width: 100%;
	padding-bottom: 60%;
	position: relative;
}
.post-image img {
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
	overflow: hidden;
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.post-info {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.post-info p.h4.roboto {
	margin-top: 0;
}

.post-info p.h4 {
	height: 5.4rem;
	overflow: hidden;
	line-height: 1;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}

.post-meta .row {
	height: 100%;
}

.post-meta span {
	display: block;
}

.post-tile.h100 {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.post-info.bg-white.h100 {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.insights-carousel .swiper-slide {
	align-self: stretch;
}

.insights-carousel:hover .insights-nav {
	opacity: 1;
}

.insights-nav {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 20%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(243,243,243,0.8);
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	transition: 0.5s opacity;
}
.insights-nav-buttons {
	text-align: center;
}
.insights-nav svg {
	width: 2rem;
	height: auto;
	margin: 0 0.25rem;
	cursor: pointer;
	pointer-events: all;
}

.insights-nav .swiper-button-disabled {
	opacity: 0.2;
}

.project-carousel {
	position: relative;
	width: 80vw;
	height: 60vh;
	margin: auto;
}

.project-card {
	background-color: #dddeff;
	border-radius: 0.25rem;
	overflow: hidden;
	height: 60vh;
	width: 60vw;
	position: absolute;
	left: calc(50% - 30vw);
	top: calc(50% - 30vh);
	transition: 0.5s transform;
}
.project-card .h3 {
	font-size: 1.8rem;
	font-weight: 700;
}
.project-card-top {
	padding-top: 0.5rem;
}

.project-card-img, .project-card-meta {
	width: 100%;
	height: 100%;
	position: relative;
}
.project-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.project-card .row {
	transition-delay: 0.3s;
}
.project-card-meta {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.circle {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
}
.project-card-excerpt {
	margin-top: 0.5rem;
}
.project-card-bottom p.text-right {
	margin: 0;
}
.project-card-bottom a {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.project-card-bottom a svg {
	width: 1.5rem;
	height: auto;
	margin-left: 0.5rem;
	transition: 0.5s transform;
}
.project-card-bottom a:hover svg {
	transform: rotate(45deg);
}

.project-card.first {
	z-index: 5;
}
.project-card.second {
	transform: translateX(6.5vw) scale(0.9);
	background-color: #c9c9ff;
	z-index: 4;
}
.project-card.third {
	transform: translateX(13vw) scale(0.8);
	background-color: #adafff;
	z-index: 3;
}
.project-card.fourth {
	background-color: #999bff;
	transform: translateX(19vw) scale(0.7);
	z-index: 2;
}
.project-card.fifth, .project-card.last {
	background-color: rgba(0,0,0,0.7);
	transform: translate(-8vw) scale(0.9);
	z-index: 1;
	transition: none;
}
.project-card.fifth .row, .project-card.last .row {
	opacity: 0;
}

.project-carousel-nav {
	position: absolute;
	top: 1rem;
	right: 11vw;
	z-index: 6;
}
.project-carousel-nav svg {
	width: 2rem;
	height: auto;
	margin: 0 0.25rem;
	cursor: pointer;
}

.video-container {
	position: relative;
	width: 100%;
	padding-bottom: 46%;
}
.video-container iframe, .video-container video {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	object-fit: cover;
}

.video-container .btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

.page-header-gradient {
	position: relative;
	top: 12rem;
}

.video-container .btn {
	transition: 0.5s opacity;
}
.playing .btn {
	opacity: 0;
}
.playing .btn:hover {
	opacity: 1;
}

.team-member {
	padding-left: 1rem;
}
.team-member-img {
	width: 100%;
	height: 28rem;
	border-radius: 0.25rem;
	overflow: hidden;
}
.team-member-img img.w100 {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.showcase-image {
	position: relative;
	top: -4rem;
}

.link-tiles .col {
	margin-bottom: 2rem;
}

.link-tile {
	position: relative;
	width: calc(100% - 2rem);
	height: 20rem;
	margin: 0 1rem;
	padding: 4rem;
	display: block;
	border-radius: 0.25rem;
	overflow: hidden;
}
.link-tile-bg, .link-tile-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.link-tile-overlay {
	background-color: var(--sagana-purple-dark);
	opacity: 0.8;
	transition: 0.5s opacity;
	z-index: 2;
	mix-blend-mode: multiply;
}
.link-tile-bg img.w100 {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.link-tile-content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

.link-tile:hover .link-tile-overlay {
	opacity: 0.5;
}

.post-filter {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 75%;
	margin: auto;
}
.filter-link {
	text-decoration: none;
	padding: 1rem;
	margin: 0 0.25rem 0.5rem;
	background-color: #c2c3ff;
	border-radius: 0.25rem;
	display: block;
}

.filter-link.active, .filter-link:hover {
	background-color: var(--sagana-purple-dark);
	color: #fff;
}

.post-card {
	width: calc(25% - 1rem);
	margin: 0 0.5rem 1rem;
}
.post-card:nth-child(10n - 5), .post-card:nth-child(10n - 4), .post-card:nth-child(10n - 1), .post-card:nth-child(10n) {
	width: calc(37.5% - 1rem);
}

.post-card .h100 {
	background-color: transparent;
}

.post-card {
	background-color: #fff;
	border-radius: 0.25rem;
	overflow: hidden;
	transition: 0.5s all;
}
.post-card:hover {
	background-color: #d6d7ff;
}

.team-card {
	width: calc(100% - 6rem);
	margin: 0 auto 4rem;
}
.team-img {
	width: 100%;
	padding-bottom: 18rem;
	border-radius: 0.25rem;
	overflow: hidden;
	position: relative;
}
.team-img img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.team-meta .row {
	border-bottom: 1px solid var(--sagana-purple-light);
	min-height: 3.5rem;
}
.team-location {
	min-height: 3rem;
}
.team-linkedin {
	flex-grow: 1;
	text-align: right;
}
.team-linkedin svg {
	width: 3rem;
	height: auto;
}

.overlapping-image .col.twothirds {
	padding: 4rem 6rem 4rem 0;
	font-size: 1.6rem;
}
.overlapping-image-img {
	position: relative;
	width: calc(100% + 4rem);
	border-radius: 0.25rem;
	overflow: hidden;
	height: calc(100% + 8rem);
	top: -6rem;
}
.overlapping-image-img img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.quote {
	width: calc(100% - 4rem);
	margin-left: auto;
	margin-right: auto;
	padding: 0.25rem 0 1.25rem;
	border-top: 1px solid var(--sagana-purple-light);
	border-bottom: 1px solid var(--sagana-purple-light);
}
.quote-meta p.mt0 {
	font-weight: 500;
	font-size: 0.8rem;
}
.quote-meta pm.mt0 span {
	font-weight: 400;
}
.quote-logo {
	width: 80%;
	margin-left: auto;
	height: 4.25rem;
	position: relative;
}
.quote-logo img {
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	right: 0;
	position: absolute;
	object-position: right;
}
.quote-img {
	width: 100%;
	height: 10rem;
	border-radius: 0.25rem;
	overflow: hidden;
	position: relative;
}
.quote-img img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.quote-tiles .col.quote-meta {
	padding-left: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.quote-tiles.info-tiles {
	min-height: unset;
}
.quote-tiles.info-tiles .quote .col {
	top: 0 !important;
	transform: none !important;
}

.image-tiles .tile {
	position: relative;
	height: 16rem;
	border-radius: 0.25rem;
	overflow: hidden;
}
.image-tiles .tile img {
	width: 100%;
	height: 16rem;
	object-fit: cover;
	border-radius: 0.25rem;
}

.text-columns h1, .text-columns h2, .text-columns h3, .text-columns h4, .text-columns h5, .text-columns h6 {
	font-family: 'Roboto', Arial, sans-serif;
}

.columns {
	display: flex;
}
.columns .col {
	flex-grow: 1;
	min-width: 33.33%;
	max-width: 50%;
	padding: 0 1rem;
}
.columns .col:first-child {
	padding-left: 0;
}
.columns .col:last-child {
	padding-right: 0;
}

.fancy-link-tile {
	display: block;
	width: calc(100% - 2rem);
	position: relative;
	min-height: 25rem;
	margin-bottom: 2rem;
}
.fancy-link-tile-content, .fancy-link-tile-shadow {
	width: calc(100% - 1rem);
	height: 24rem;
	position: relative;
	border-radius: 0.25rem;
}
.fancy-link-tile-shadow {
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: #d2a6ff;
	transition: 0.5s background-color;
}
.fancy-link-tile-layer {
	position: absolute;
	width: 100%;
	height: 100%;
	min-height: 24rem;
	top: 0;
	left: 0;
	padding: 2rem;
	transition: 0.5s opacity;
	border-radius: 0.25rem;
}
.fancy-link-tile-layer.back {
	opacity: 0;
}

.fancy-link-tile:hover .fancy-link-tile-layer.back {
	opacity: 1;
}
.fancy-link-tile:hover .fancy-link-tile-shadow {
	background-color: var(--purple-steps-1);
}

.fancy-link-tile-layer svg {
	width: 2rem;
	height: auto;
	position: absolute;
	bottom: 2rem;
	right: 2rem;
}

.similar-articles .col.post-card {
	width: calc(25% - 1rem);
}

.single-header {
	padding-bottom: 18rem;
}
.single-meta {
	top: -12rem;
	margin-bottom: -8rem;
}
.single-image {
	position: relative;
	width: 100%;
	height: 28rem;
}
.single-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.single-cats span {
	display: block;
}

.single .block {
	background-color: #F3F3F3;
}

.wysiwyg li {
	margin-bottom: 0.5rem;
}
.wysiwyg p {
	line-height: 1.4;
	font-weight: 300;
}

.portfolio-card, .client-project-card {
	background-color: #fff;
	border-radius: 0.25rem;
	padding: 1rem;
	width: calc(100% - 1rem);
	position: relative;
	height: 100%;
	-webkit-box-shadow: 2px 2px 8px 1px #BDBDBD; 
	box-shadow: 2px 2px 8px 1px #BDBDBD;
	transition: 0.5s box-shadow;
}

.portfolio-card {
	padding-bottom: 6rem;
}

.client-project-card {
	font-size: 0.8rem;
}

.client-project-card .h5.roboto {
	font-weight: 400;
	height: auto;
}

.portfolio-card:hover {
	box-shadow: none;
}
.portfolio-logo {
	height: 12rem;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px;
	border: 2px solid #f3f3f3;
	border-radius: 0.25rem;
}
.portfolio-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.portfolio-card-bottom {
	position: absolute;
	bottom: 1rem;
	width: calc(100% - 2rem);
	left: 1rem;
}

.client-project-card p.h3.client-project-title {
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	line-height: 1.4;
	height: 4.4rem
}

.client-project-card p.h3.client-project-sub {
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	line-height: 1.1;
	height: 5.4rem;
}

.client-project-back {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border-radius: 0.25rem;
	padding: 0 1rem;
	font-size: 1.2rem;
	opacity: 0;
	transition: 0.5s opacity;
}

.client-project-card:hover .client-project-back {
	opacity: 1;
}

.client-project-img {
	width: 100%;
	height: 13rem;
}
.client-project-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.client-project-cats {
	margin-top: 6rem;
	margin-bottom: 0;
}
.client-project-cats span {
	display: block;
}

.contact-form .wysiwyg p {
	font-size: 1.6rem;
}

.contact-right a {
	color: #fff;
}

.contact-form h1.h2 {
	font-weight: 700;
}

.contact-left .wysiwyg a {
	color: var(--sagana-purple-light);
	text-decoration: none;
}

.map .h2 {
	font-size: 2.7rem;
}

.location-list {
    display: grid;
    padding-right: 2rem;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 1rem;
    grid-row-gap: 0px;
}
.location-header .circle {
	position: relative;
	top: 0.5rem;
}
.location {
	margin: 0;
	padding: 0.25rem;
	border-top: 1px solid var(--sagana-purple-light);
	font-size: 1.4rem;
}
.location:nth-last-child(-n+2) {
  border-bottom: 1px solid var(--sagana-purple-light);
}
.location-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column: span 2;
    border: none;
}

/*------------------------------------*\
	MISC
\*------------------------------------*/

.bg-image {
	position: absolute;
	z-index: -1;
	width: 100%;
	height: auto;
	left:0;
	top:0;
}

.absolute {
	position: absolute;
}
.relative {
	position: relative;
}

.gradient-bar {
	width: 100%;
	position: relative;
	background-color: var(--sagana-purple-light);
	background-image: linear-gradient(90deg, var(--sagana-purple), var(--gradient-blue), var(--gradient-purple), var(--gradient-pink), var(--gradient-fuscia), var(--gradient-yellow), var(--gradient-orange), var(--gradient-red), var(--gradient-fuscia), var(--gradient-blue), var(--gradeint-aqua), var(--gradient-green), var(--gradient-pink), var(--gradient-purple), var(--gradient-blue), var(--gradient-purple), var(--sagana-purple-dark));
	background-size: 400% 100%;
	background-position: 400% 100%;
	height: 0.5rem;
	transition: 10s background-position;
}

::selection {
	background:var(--sagana-purple-dark);
	color:#FFF;
	text-shadow:none;
}
::-webkit-selection {
	background:var(--sagana-purple-dark);
	color:#FFF;
	text-shadow:none;
}
::-moz-selection {
	background:var(--sagana-purple-dark);
	color:#FFF;
	text-shadow:none;
}

/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	margin:1rem 0;
	line-height: 1;
	font-family: 'rift', sans-serif;
	font-weight: 400;
}

.h2.roboto, h2.roboto, .h4.roboto, h4.roboto, .h5.roboto, h5.roboto, .roboto .h1, .roboto h1, .roboto .h2, .roboto h2, .roboto .h4, .roboto h4, .roboto .h5, .roboto h5 {
	font-weight: 700;
}

.fw-normal {
	font-weight: 400 !important;
}

p {
	margin: 1rem 0;

}

.lh4 {
	line-height: 1.4;
}

.roboto {
	font-family: 'Roboto', Arial, sans-serif;
}

strong h1, strong h2, strong h3, strong h4 strong h5, strong h6, strong .h1, strong .h2, strong .h3, strong .h4, strong .h5, strong .h6 {
	font-weight: 700;
}

h1, .h1 {
	font-size: 6rem;
}

h2, .h2 {
	font-size: 3.6rem;
}

h3, .h3 {
	font-size: 1.6rem;
}
h4, .h4 {
	font-size: 1.8rem;
}
h5, .h5 {
	font-size: 1.8rem;
}

.bold, strong {
	font-weight: 700;
}

.text-right {
	text-align: right;
}
.text-center {
	text-align: center;
}

.body-lh {
	line-height: 1.4;
}

@font-face {
  font-family: 'Roboto';
  src: url('./fonts/roboto.ttf') format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('./fonts/roboto-italic.ttf') format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
}

@font-face {
    font-family: 'rift';
    src: url('./fonts/rift.woff2') format('woff2'),
        url('./fonts/rift.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.buttons {
	display: flex;
	justify-content: center;
	align-items: center;
}

.pill {
	width: max-content;
	padding: 0.5rem 1rem;
	border-radius: 0.25rem;
	margin: 0;
}

/*------------------------------------*\
    Spacing and Grid
\*------------------------------------*/

.row {
	display: flex;
	flex-wrap: wrap;
}

.row.align-center {
	align-items: center;
}
.row.align-end {
	align-items: flex-end;
}
.row.justify-center {
	justify-content: center;
}
.row.space-between {
	justify-content: space-between;
}

.col {
	position: relative;
}

.col.right {
	order: 1;
}

.col.half {
	width: 50%;
}
.col.third {
	width: 33.33%;
}
.col.quarter {
	width: 25%;
}
.col.fifth {
	width: 20%;
}
.col.twothirds {
	width: 66.66%;
}

.col.sixty {
	width: 60%;
}
.col.forty {
	width: 40%;
}


.m0 {
	margin:0;
}
.p0 {
	padding:0;
}

.py2 {
	padding-top: 2rem;
	padding-bottom: 2rem;	
}
.px4 {
	padding-left: 4rem;
	padding-right: 4rem;
}
.py4 {
	padding-top: 4rem;
	padding-bottom: 4rem;	
}
.pt2 {
	padding-top: 2rem;
}
.pb2 {
	padding-bottom: 2rem;
}
.pt6 {
	padding-top: 6rem;
}
.pb6 {
	padding-bottom: 6rem;
}
.pt10 {
	padding-top: 10rem;
}
.pb10 {
	padding-bottom: 10rem;
}
.pb12 {
	padding-bottom: 12rem;
}

.pl0 {
	padding-left: 0;
}
.pr0 {
	padding-right: 0;
}


.mt0 {
	margin-top:0;
}
.mb0 {
	margin-bottom:0;
}
.mt2 {
	margin-top: 2rem;
}
.mb2 {
	margin-bottom: 2rem;
}
.mb4 {
	margin-bottom: 4rem;
}
.mt4 {
	margin-top: 4rem;
}
.mt6 {
	margin-top: 6rem;
}
.mt8 {
	margin-top: 8rem;
}



.mx0 {
	margin-left:0;
	margin-right:0;
}

.ml-auto {
	margin-left: auto;
}
.mr-auto {
	margin-right: auto;
}
.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

.w100 {
	width: 100%;
}
.w90 {
	width: 90%;
}
.w75 {
	width: 75%;
}
.w70 {
	width: 70%;
}
.w60 {
	width: 60%;
}
.w55 {
	width: 55%;
}
.w50 {
	width: 50%;
}
.w40 {
	width: 40%;
}

img.w100, img.w90, img.w75, img.w70, img.w55, img.w50, img.w40 {
	height: auto;
}


.h100 {
	height: 100%;
}

.border {
	border-bottom: 1px solid;
	padding-bottom: 0.5rem;
}

/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: #fff; }

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 2px;
    background-color: #fff;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }

.hamburger--slider .hamburger-inner {
  top: 2px; }
  .hamburger--slider .hamburger-inner::before {
    top: 10px;
    transition-property: transform, opacity;
    transition-timing-function: ease;
    transition-duration: 0.15s; }
  .hamburger--slider .hamburger-inner::after {
    top: 20px; }

.hamburger--slider.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(45deg); }
  .hamburger--slider.is-active .hamburger-inner::before {
    transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
    opacity: 0; }
  .hamburger--slider.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(-90deg); }


.sfs {
	display: none;
}

@media (max-width: 1025px) {

	html {
		font-size: 3vw;
	}

	.hfs {
		display: none;
	}
	.sfs {
		display: block;
	}

	#header, .wrapper, .footer {
		max-width: 100vw;
	}

	#header {
		transform: none !important;
	}

	.home #header {
		background-color: var(--sagana-purple-dark);
		background-image: url(./img/header-bg.jpg);
	}

	.wrapper {
		width: 90%;
	}

	.logo {
		position: relative;
		z-index: 1;
	}

	.nav {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		background: var(--sagana-purple-dark);
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0;
		pointer-events: none;
		transition: 0.5s opacity;
	}

	.nav-open .nav {
		opacity: 1;
		pointer-events: all;
		overflow: scroll;
		padding: 10rem 0;
		display: block;
	}

	.nav-menu {
		height: auto;
	}

	.nav-menu ul {
		flex-wrap: wrap;
	}

	.nav-menu ul.sub-menu {
		display: none !important;
	}

	.nav-menu li {
		width: 100%;
		margin: 1rem 0;
		font-size: 2rem;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding-left: 2rem;

	}

	.block.page-header {
		min-height: calc(100dvh + 12rem);
	}

	.cc-revoke.cc-right {
		right: 1em;
	}

	.cc-revoke, .cc-window {
		font-size: 12px;
	}

	h1, .h1 {
		font-size: 4rem;
	}
	h2, .h2 {
		font-size: 3rem;
	}

	h4, .h4 {
		font-size: 1.4rem;
	}

	.post-info p.h4 {
		height: 4.8rem;
		line-height: 1.1;
	}

	#header .wrapper {
		justify-content: space-between;
	}

	#header .wrapper:before {
	    content: '';
	    position: absolute;
	    width: 100vw;
	    height: 7.2rem;
	    z-index: 2;
	    background: var(--sagana-purple-dark);
	    top: 0;
	    left: -5vw;
	}

	#header .logo, #header-search, #mobile-nav {
		position: relative;
		z-index: 3;
	}

	#search-popup {
		z-index: 99;
		top:7rem;
		height: calc(100dvh - 7rem);
	}
	#header-search img {
		height: 2.4rem;
	}

	#search-form {
		padding-bottom: 7rem;
	}

	#search-form form {
		width: 90vw;
	}

	#search-form input.search-input {
		font-size: 1.6rem;
	}

	.col.half, .w75, .logo-col, .project-card .col, .footer .col, #gform_wrapper_1, .contact-emails p, .w50, .w60, .w70, .w40, .w90, .overlapping-image .col, .w55, .fancy-link-tiles .col.third, .similar-articles .col.quarter, .post-filter, .link-tiles .col, #posts-outer .col.quarter {
		width: 100%;
	}

	.block-bg img.w100 {
		height: 100%;
		object-fit: cover;
	}

	.hero .block-bg {
		position: absolute;
	}

	.hero-fades {
		opacity: 1 !important;
	}
	.hero-logo #lottie {
		width: 100vw;
		margin-bottom: 10rem;
	}

	.block.hero.has-logo, .block.hero {
		height: 100dvh;
	}

	.hero.has-logo .wrapper {
		bottom: 18rem;
	}

	.hero-scroll, .header-scroll {
		position: absolute;
	}

	.logo-tile img {
		width: 40vw;
	}

	.info-tiles.py2 {
		padding-bottom: 4rem;
	}

	.info-tiles .col.third {
		transform: none !important;
		width: 100%;
		top
	}

	.info-tiles .col:nth-child(2) {
		top: 1rem;
	}

	.info-tiles .col:last-child {
		top: 2rem;
	}

	.project-carousel {
		width: 90vw;
		height: 80vh;
	}

	.project-card {
		width: 65vw;
		height: 82vh;
		top: calc(50% - 40vh);
	}

	.project-card-meta {
		justify-content: flex-start;
	}

	#footer-logo img {
		position: static;
	}

	.footer .row.align-end {
		margin-top: 1rem;
	}

	.footer .row.align-end .col.sixty {
		order: 1;
	}

	#footer-nav ul {
		flex-wrap: wrap;
		justify-content: center;
	}

	#footer-nav ul li {
		width: 33.33%;
		margin-bottom: 1rem;
		text-align: center;
	}

	#footer-right {
		text-align: center;
		margin-bottom: 2rem;
	}

	a.linkedin {
		justify-content: center;
		padding-left: 1.5rem;
	}

	.footer .logo {
		margin-right: 0;
		text-align: center;
	}

	#policy-links {
		display: flex;
		flex-wrap: wrap;
		margin-top: 4rem;
		justify-content: center;
		margin-bottom: 4rem;
	}

	#policy-links span {
		width: 100%;
		text-align: center;
		display: block;
		margin-bottom: 1rem;
	}

	#policy-links a {
		text-align: center;
		margin-right: 1rem;
	}

	.map-image {
		margin-top: 2rem;
	}

	.half-and-half .col {
		order: 2;
	}

	.half-and-half img {
		margin-bottom: 2rem;
	}

	.overlapping-image .col.twothirds {
		padding-right: 0;
		padding-bottom: 0;
		padding-top: 2rem;
		order: 1;
	}

	.overlapping-image-img, .overlapping-image-img img {
		position: static;
		width: 100%;
		height: auto;
	}

	.quote-tiles.info-tiles {
		padding-top: 4rem;
		padding-bottom: 10rem;
	}

	.image-tiles .tile {
		height: 19rem;
		background-color: transparent;
	}

	.tile p {
		font-size: 1.2rem;
	}

	.similar-articles .col.quarter {
		text-align: center;
	}

	.similar-articles .col.post-card, .col.post-card {
		width: calc(50% - 1rem);
		margin-top: 1rem;
	}

	.logos .col.fifth {
		max-width: 50%;
	}

	.quote-tiles.pb12 {
		padding-bottom: 6rem;
	}

	.quote-img {
		height: 18rem;
		margin-bottom: 1rem;
	}

	.quote-logo {
		height: 6rem;
	}

	.quote-tiles .col.quote-meta {
		padding-left: 0;
		align-items: center;
		flex-direction: row;
	}

	.quote-tiles .quote-meta p, .quote-logo, .our-portfolio #posts-outer .col.quarter, #team-container .col.third {
		width: 50%;
	}

	.team-card {
		width: calc(100% - 2rem);
	}

	.portfolio-logo {
		height: 8rem;
	}

	.portfolio-card {
		padding-bottom: 8rem;
	}

	.overview {
		height: auto !important;
	}

	.portfolio-card-bottom p.text-right {
		margin-top: 2rem;
		text-align: left;
	}

	.client-project-cats {
		margin-top: 2rem;
	}

	.single-meta .col.half {
		order: 1;
	}
	.single-meta .col.quarter {
		width: 50%;
	}

	.fancy-link-tile {
		min-height: 23rem;
	}

	.fancy-link-tile-layer {
		min-height: 22rem;
	}

}

/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/

.block-editor-block-list__block {
	width: 80%;
	max-width: 1440px;
}

.editor-styles-wrapper h1 {
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 3rem;
}

#tinymce h1, #tinymce h2, #tinymce h3, #tinymce h4, #tinymce h5, #tinymce h6 {
	font-family: 'Roboto', Arial, sans-serif !important;
}

.block-editor-block-list__block.acf-block-preview {
	zoom:0.5;
}
html .mceContentBody {
    font-size: 14px;
    padding:10px;
}
html .mceContentBody p {
	margin: 20px 0;
}

.editor-styles-wrapper input[type=text], .editor-styles-wrapper input[type=textarea], .editor-styles-wrapper input[type=email], .editor-styles-wrapper input[type=password] {
	border-radius: 4px;
	border-color:#8c8f94;
	border: 1px solid;
}

.alignnone {
	margin:5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
	display:block;
	margin:5px auto 5px auto;
}
.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
a img.alignnone {
	margin:5px 20px 20px 0;
}
a img.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.wp-caption {
	background:#FFF;
	border:1px solid #F0F0F0;
	max-width:96%;
	padding:5px 3px 10px;
	text-align:center;
}
.wp-caption.alignnone {
	margin:5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin:5px 20px 20px 0;
}
.wp-caption.alignright {
	margin:5px 0 20px 20px;
}
.wp-caption img {
	border:0 none;
	height:auto;
	margin:0;
	max-width:98.5%;
	padding:0;
	width:auto;
}
.wp-caption .wp-caption-text,
.gallery-caption {
	font-size:11px;
	line-height:17px;
	margin:0;
	padding:0 4px 5px;
}