body {padding: 0; margin: 0; font-size: 14px; color: #2A333D; font-family: 'Inter','Roboto',sans-serif;}
h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
div,section {box-sizing: border-box; position: relative;}

section {width: 100%; padding: 0 24px; margin-bottom: 24px; display: flex; flex-direction: row; justify-content: center; align-items: center;}
	.column-container {max-width: 1200px; display: flex; flex-direction: column;}
	.row-container {max-width: 1200px; display: flex; flex-direction: row;}
.lower-section {margin-top: 96px;}
.primary-button {text-decoration: none; background: #2176CF; color: #FFF; font-size: 18px; font-weight: 600; padding: 8px 16px; border-radius: 4px;}
.primary-button:hover, primary-button:active {background: #275DA9; border-radius: 4px;}
.primary-button > img {width: 24px; height: 24px; float: left;}
.secondary-button {text-decoration: none; border: 1px solid #2176CF; color: #2176CF; font-size: 18px; font-weight: 600; padding: 8px 16px; border-radius: 4px;}
.secondary-button:hover, secondary-button:active {box-shadow: inset 0 0 0 1px #275DA9; color: #275DA9; border-radius: 4px;}
.secondary-button > img {width: 24px; height: 24px; float: left;}
.lightbox {cursor: pointer; position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 40px; z-index: 9999; background: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; align-content: center;}
.lightbox-image {width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; background-position: center;}
.lightbox-close {position: fixed; top: 8px; right: 8px; background-image: url('../images/close-x.png'); background-size: 36px 36px; width: 36px; height: 36px; cursor: pointer;}

.global-nav {margin: 24px 0;}
.global-nav > div {width: 100%; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; align-content: center;}
.logo {border-radius: 8px; padding: 8px; color: #2A333D; text-decoration: none;}
.logo:hover,.logo:active {background: #E5E8EB;}
.logo > div {width: 80px; height: 80px; float: left; margin-right: 16px; background-image: url('../images/logo.png'); background-size: 80px 80px; border-radius: 40px;}
.logo > span {font-size: 32px; font-weight: 600; line-height: 80px; float: left;}
.menu {display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: center; align-content: center;}
.menu > a {color: #475769; font-size: 18px; font-weight: 600; text-decoration: none; padding: 4px 8px; margin-left: 16px;}
.menu > a:hover,a:active {background: #E0ECF8; color: #2A333D; border-radius: 16px;}

.fixed-global-nav {position: fixed; display: none; flex-direction: row; justify-content: center; align-items: center; top: 0; left: 0; width: 100%; background: #FFF; z-index: 999; box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 2px 4px 0px rgba(0, 0, 0, 0.11);}
.fixed-global-nav > div {width: 100%; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; align-content: center;}
.fixed-logo {border-radius: 8px; padding: 8px; display: inline-block; color: #2A333D; text-decoration: none;}
.fixed-logo:hover,.logo:active {background: #E5E8EB;}
.fixed-logo > div {width: 32px; height: 32px; float: left; margin-right: 16px; background-image: url('../images/logo.png'); background-size: 32px 32px; border-radius: 16px;}
.fixed-logo > span {font-size: 18px; font-weight: 600; line-height: 32px; float: left;}
.fixed-menu {display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: center; align-content: center;}
.fixed-menu > a {color: #475769; font-size: 14px; font-weight: 600; text-decoration: none; padding: 4px 8px; line-height: 14px; margin-left: 16px;}
.fixed-menu > a:hover,a:active {background: #E0ECF8; color: #2A333D; border-radius: 16px;}
.fixed-global-nav > div {width: 100%;}

h1 {font-size: 60px; font-weight: 400; text-align: center; margin: 32px 0 24px 0; width: 100%;}
h2 {font-size: 50px; font-weight: 400; text-align: center; margin-bottom: 32px; width: 100%;}
h3 {font-size: 42px; font-weight: 400; text-align: center;}
h4 {font-size: 36px; font-weight: 500; width: 100%;}
h5 {font-size: 24px; font-weight: 600;}

.figma-style-box {border: 2px solid #2176CF; position: relative; border-radius: 0 1px 1px 1px;}
.figma-style-box > div {position: absolute; top: -18px; left: -2px; height: 18px; line-height: 18px; padding: 0 4px; color: #FFF; background: #2176CF; font-size: 13px; font-weight: 700; border-radius: 2px 2px 0 0;}

.home-card-container {display: flex; flex-flow: row wrap; justify-content: center;}
.home-card {display: flex; flex-flow: column nowrap; text-align: left; max-width: 260px; margin: 8px; padding: 16px; border-radius: 16px; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.11), 0px 8px 16px 0px rgba(0, 0, 0, 0.13);}
.home-card > h6 {font-size: 20px; font-weight: 600; margin-bottom: 16px;}
.home-card > div {width: 100%;}
.tags {display: flex; flex-flow: row wrap;}
.tags > span {margin: 8px 8px 0 0; font-size: 13px; font-weight: 600; background: #E0ECF8; border-radius: 24px; padding: 4px 8px;}
.card-container {width: 25%; margin: 0; height: 100%;}
.home-card-quote-text {display: inline-block; width: 100%;}
.home-card-quote-name {display: inline-block; margin: 24px 0 0 0; width: 100%;}
.home-card-quote-title {display: inline-block; font-weight: 600; width: 100%;}
.home-card-business {display: inline-block; font-size: 16px; font-weight: 600;  width: 100%;}
.home-card-description {display: inline-block; font-size: 13px;  width: 100%; margin-bottom: 16px;}
.home-card-more {display: inline-block; font-size: 16px;  width: 100%; margin-top: 8px;}

.home-logos {display: flex; flex-flow: row wrap; margin-bottom: 24px; justify-content: center; align-items: center; align-content: center;}
.home-logos > img {display: block; height: 54px; width: auto; margin: 8px;}
.home-photos {display: flex; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center;}
.home-photos > img {display: block; height: 200px; width: auto; margin: 8px; border-radius: 16px; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.11), 0px 8px 16px 0px rgba(0, 0, 0, 0.13);}

.home-case-studies {margin: 0;}
.home-case-study {text-align: left; margin: 60px 0; display: flex; flex-flow: row nowrap; justify-content: space-evenly;}
.home-case-study-content {flex: 50%; display: flex; flex-flow: column wrap;}
.home-case-study-logo {display: inline-block; height: 54px;}
.home-case-study-logo > img {display: block; height: 54px; width: auto;}
.home-case-study-tags {margin-top: 8px;}
.home-case-study-description {font-size: 18px; margin: 24px 0 16px 0;}
.home-case-study-image-right {flex: 50%; padding-left: 32px;}
.home-case-study-image-left {flex: 50%; padding-right: 32px;}
.home-case-study-image-right > div,.home-case-study-image-left > div {border-radius: 16px; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.11), 0px 8px 16px 0px rgba(0, 0, 0, 0.13);}
.home-case-study-image-right > div > img,.home-case-study-image-left > div > img {cursor: pointer; display: block; width: 100%; height: auto;border-radius: 16px;}
.home-case-study-image-left {flex: 60%; padding-right: 24px;}
.home-case-study-buttons {display: flex; flex-flow: row wrap; justify-content: flex-start;}
.home-case-study-button {margin: 8px 8px 0 0;}

.quotes-container {display: flex; flex-flow: row wrap; justify-content: center;}
.quote-tags {text-align: center; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; margin-bottom: 16px;}
.quote {text-align: center; max-width: 300px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center; margin: 8px; border-radius: 16px; padding: 16px; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.11), 0px 8px 16px 0px rgba(0, 0, 0, 0.13);}
.quote-text {font-size: 16px; text-align: left; margin-bottom: 24px;}
.quote-image {width: 80px; height: 80px; border-radius: 40px;}
.quote-name {font-size: 18px; width: 100%; text-align: center;}
.quote-title {font-size: 16px; font-weight: 600; width: 100%; text-align: center;}
.quote-company {font-size: 16px; width: 100%; text-align: center;}

.footer > div {border-top: 1px solid #E5E8EB; width: 100%;}
.footer > div > span {width: 100%; font-size: 16px; color: #61778F; text-align: center; margin: 16px 0 40px 0;}

@media (max-width: 1200px) {
	h1 {font-size: 50px;}
	h2 {font-size: 36px; font-weight: 500;}
	h3 {font-size: 36px;}
	h4 {font-size: 24px;}
	h5 {font-size: 18px;}
	.logo > div {width: 40px; height: 40px; background-size: 40px 40px; border-radius: 20px;}
	.logo > span {font-size: 24px; line-height: 40px;}
	.menu > a {font-size: 14px;}
	.primary-button {font-size: 14px; line-height: 20px;}
	.secondary-button {font-size: 14px; line-height: 20px;}
	.secondary-button > img {width: 20px; height: 20px;}
	.home-card > h6 {font-size: 16px;}
	.home-card > div {width: 100%;}
	.tags > span {margin: 4px 4px 0 0; font-size: 12px;}
	.home-card-business {font-size: 14px;}
	.home-card-more {font-size: 14px;}
	.home-logos > img {height: 32px;}
	.home-photos > img {height: 120px;}
	.home-case-study {margin: 40px 0;}
	.home-case-study-logo {height: 40px;}
	.home-case-study-logo > img {height: 40px;}
	.home-case-study-description {font-size: 14px;}
	.quote-text {font-size: 14px;}
	.quote-image {width: 40px; height: 40px; border-radius: 20px;}
	.quote-name {font-size: 14px;}
	.quote-title {font-size: 13px;}
	.quote-company {font-size: 13px;}
	.lower-section {margin-top: 48px;}
}
@media (max-width: 740px) {
	h1 {font-size: 40px;}
	h2 {font-size: 28px; font-weight: 500;}
	h3 {font-size: 28px;}
	h4 {font-size: 24px; font-weight: 500;}
	h5 {font-size: 20px; font-weight: 500;}
	.logo > div {width: 24px; height: 24px; background-size: 24px 24px; border-radius: 12px; margin-right: 8px;}
	.logo > span {font-size: 16px; line-height: 24px;}
	.menu > a {font-size: 13px; margin-left: 8px;}
	.fixed-logo > div {width: 24px; height: 24px; margin-right: 8px; background-size: 24px 24px; border-radius: 12px;}
	.fixed-logo > span {font-size: 14px; font-weight: 600; line-height: 24px; float: left;}
	.fixed-menu > a {font-size: 13px; line-height: 13px; margin-left: 8px;}
	.home-case-study {margin: 60px 0;}
	.footer > div > span {font-size: 14px;}
}

@media (max-width: 600px) {
	section {padding: 0 16px;}
	h1 {margin: 16px 0 8px 0;}
	.fixed-logo > span {display: none;}
	.global-nav > div {flex-flow: column nowrap;}
	.menu {margin-top: 16px; margin-right: 0; margin-left: 0;}
	.home-card-container {display: flex; flex-flow: column nowrap;}
	.home-card {width: 100%; max-width: 100%; margin: 8px 0;}
	.home-case-study {flex-flow: column nowrap; margin: 40px 0;}
	.home-case-study-content {flex: 100%; order: 2; margin-left: 0; margin-right: 0; margin-top: 16px;}
	.home-case-study-image-right {flex: 100%; padding-left: 0; order: 1; padding-right: 0;}
	.home-case-study-image-left {flex: 100%; padding-left: 0; order: 1; padding-right: 0;}
	.quotes-container {flex-flow: column nowrap;}
	.quote {width: 100%; max-width: 100%; margin: 8px 0;}
}

/*=========================================================================================================
CASE STUDY PAGE
=========================================================================================================*/
.case-study-header > div {justify-content: center; align-items: center; align-content: center;}
.case-study-logo {display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; align-content: center;}
.case-study-logo > img {height: 54px; width: auto; margin-bottom: 16px;}

.case-study-summary {display: flex; flex-flow: row nowrap; justify-content: space-evenly; align-items: center; align-content: center; margin-top: 64px;}
.summary-image {flex: 50%; padding-left: 24px;}
.summary-image > div {cursor: pointer; border-radius: 16px; box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.11), 0px 4px 8px 0px rgba(0, 0, 0, 0.13);}
.summary-image > div:hover {box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.11), 0px 8px 16px 0px rgba(0, 0, 0, 0.13);}
.summary-image > div > img {width: 100%; height: auto; display: block; border-radius: 4px;}
.summary-details {flex: 50%; display: flex; flex-flow: column wrap;}

.summary-description {font-size: 18px; width: 100%;}
.summary-info {font-size: 16px; width: 100%; margin: 4px 0;}
.summary-buttons {margin-top: 24px; display: flex; flex-flow: row wrap;}
.summary-buttons > a {margin: 8px 8px 0 0;}

.case-study-section-header {margin: 80px 0 0 0; text-align: center;}
.case-study-section-header span {font-size: 18px; max-width: 800px; margin-top: 16px;}

.case-study-card-section {margin-top: 24px;}
.case-study-card-section > div {flex-flow: row nowrap;}
.case-study-card {display: flex; flex-flow: column nowrap; max-width: 360px; margin: 20px; min-width: 240px; flex: 1 1 360px;}
.case-study-card > div {width: 100%; border-radius: 8px; margin-bottom: 24px; box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 2px 4px 0px rgba(0, 0, 0, 0.11);}
.case-study-card > div > img {border-radius: 8px; width: 100%; height: auto; display: block;}
.case-study-card > span {font-size: 16px; margin-top: 16px;}

.solution-row {display: flex; flex-flow: row nowrap; margin-bottom: 16px;}
.solution-image {flex: 50%; display: inline-block; border-radius: 4px; margin-right: 32px;}
.solution-image > img {cursor: pointer; width: 100%; height: auto; display: block; border-radius: 4px; box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 2px 4px 0px rgba(0, 0, 0, 0.11);}
.solution-image > img:hover {box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.11), 0px 8px 16px 0px rgba(0, 0, 0, 0.13);}
.solution-description {flex: 50%; text-align: left;}
.solution-description-title {font-size: 28px; font-weight: 600;}
.solution-description-text {font-size: 16px; margin-top: 24px;}
.solution-description-text > ul {margin: 0; padding: 0 0 0 16px;}
.solution-description-text > ul > li {margin-bottom: 8px;}

@media (max-width: 1200px) {
	.solution-description-title {font-size: 20px;}
}

@media (max-width: 880px) {
	.case-study-card-section > div {flex-flow: row wrap;}
	.case-study-card {max-width: 240px; flex: 1 1 240px;}
}

@media (max-width: 740px) {
	.solution-description-title {font-size: 18px;}
}

@media (max-width: 610px) {
	.case-study-summary {margin-top: 32px;}
	.case-study-summary > div {flex-flow: column nowrap; border-radius: 8px;}
	.case-study-summary > div > img {border-radius: 8px;}
	.summary-image {flex: 100%; padding-left: 0; order: 1;}
	.summary-details {flex: 100%; display: flex; flex-flow: column wrap; order: 2;}
	.case-study-section-header {margin: 64px 0 0 0;}
	.case-study-section-header span {font-size: 16px; margin-top: 0;}
	.case-study-card-section {margin-top: 24px;}
	.case-study-card-section > div {flex-flow: column nowrap;}
	.case-study-card {flex-flow: column nowrap; max-width: 100%; width: 100%; margin: 20px 0;}
	.case-study-card > div {border-radius: 8px;}
	.case-study-card > div > img {border-radius: 8px;}
	.case-study-card > span {font-size: 14px;}
	.solution-row {flex-flow: column nowrap; margin-bottom: 16px;}
	.solution-image {flex: 100%; border-radius: 8px; margin-right: 0;}
	.solution-description {flex: 100%;}
	.solution-description-title {font-size: 20px; font-weight: 500; margin: 16px 0 0 0;}
	.solution-description-text {font-size: 14px; margin: 8px 0 24px 0;}
}

/*=========================================================================================================
ENTER PASSWORD PAGE
=========================================================================================================*/
.password-input {font-family: 'Inter','Roboto',sans-serif; padding: 7px 8px; width: 240px; margin-right: 16px; background: #FFF; color: #2A333D; border-radius: 2px; border: 1px solid #8695A6; font-size: 18px;}
.password-button {border: none; background: #2176CF; color: #FFF; font-size: 18px; font-weight: 600; padding: 8px 16px; border-radius: 4px;}
.password-button:hover, password-button:active {background: #275DA9; border-radius: 4px;}

.enter-password-section {text-align: center; max-width: 600px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; align-content: center;}
.enter-password-section > span {font-size: 18px; opacity: 0.8; margin-top: 16px;}
.error-message {text-align: center; font-size: 18px; border: 2px solid #DC362E; border-radius: 4px; color: #DC362E; margin-bottom: 16px;}
.password-form {display: flex; flex-flow: row wrap; margin: 32px 0;}

/*=========================================================================================================
CONTACT FORM
=========================================================================================================*/
.contact > div {width: 100%; max-width: 800px;}
.contact-container {width: 100%; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; align-content: center;}
.contact-container > form {width: 100%;}
.contact-row {display: flex; flex-flow: column nowrap; margin-bottom: 16px; width: 100%;}
.contact-row > input {width: 100%;}