@charset "utf-8";
/* responsive stylesheet */

@media screen and (max-height: 644px) {
section.banner article {top: 50px; transform: translate(-50%, 0); margin-top: 0;}
section.banner article div.first-line {font-size: 45px;}
section.banner article div.last-line {font-size: 100px; -webkit-text-stroke: 2px var(--white);}
section.banner article .button {bottom: -150px;}
}

@media screen and (max-width: 1500px) {
header .logo {width: 263px; margin-right: 50px;}
header .logo img {width: auto; height: 68px;}
header nav {width: calc(100% - 662px);}
}

@media screen and (max-width: 1410px) {
header .social ul.social-links {position: absolute; margin-top: 8px; top: 150px; right: 0px;}
header .social ul.social-links li {display: block;}
header .social ul.social-links li a {display: block; width: 14px; height: 24px; margin-bottom: 2px; background: var(--dark-grey); padding: 8px 9px 0 9px; font-size: 1.0em;}
header nav {float: left; width: calc(100% - 534px);}
section.clients .clients-carousel button.asset-prev {left: -10px;}
section.clients .clients-carousel button.asset-next {right: -10px;}
section.news-overview article {width: calc(25% - 55px);}
}

@media screen and (max-width: 1344px) {
section.internal-banner .image img {width: 160%;}
section.cs-content-area article .image-container {margin: 0 -120px 25px 25px;}
section.news-content-area article .image-container {margin: 0 -120px 25px 25px;}
}

@media screen and (max-width: 1280px) {
/* Main navigation responsiveness change */
header .social {padding: 40px 0; margin-right: 58px;}
header .social a.btn {margin-left: 0;}
header.scroll .social {padding: 27px 0 0 0;}
header nav ul.main-nav {display: none;}
header nav a.toggle {display: block; cursor: pointer; font-size: 1.5em; position: absolute; right: 23px; top: 50%; transform: translateY(-50%); padding: 15px; color: var(--white);}
header nav a.toggle:hover {color: var(--blue)}
header nav ul.main-nav.responsive {display: block; position: absolute; left: 0; top: 108px; width: 100%; transition: all .25s ease-in-out;}
header nav ul.main-nav.responsive li {float: left; width: 100%; display: block;}
header nav ul.main-nav.responsive li.desktop-hide {float: left; width: 100%; display: block;}
header nav ul.main-nav.responsive li a {height: auto; width: calc(100% - 70px); padding: 10px 35px; text-align: right; background: var(--dark-grey); border-bottom: 1px solid var(--white);}
header nav ul.main-nav.responsive li a span {display: none;}
header nav ul.main-nav.responsive li a:hover {background: var(--dark-grey); color: var(--blue);}
header nav ul.main-nav.responsive li ul {position: relative; margin-top: 0px; left: 0px; width: 100%; border: none;}
header nav ul.main-nav.responsive li ul li {display: block; width: 100%; float: left; border-bottom: 1px solid var(--white);}
header nav ul.main-nav.responsive li ul li a {height: auto; width: calc(100% - 70px); padding: 10px 35px; background: var(--blue); color: var(--white); border: none;}
header nav ul.main-nav.responsive li ul li a:hover {background: var(--blue); color: var(--dark-grey);}
header nav ul.main-nav.responsive li ul li ul li a {width: calc(100% - 80px); padding: 10px 45px 10px 35px; background: var(--white); color: var(--blue); border-top: 1px solid var(--dark-grey);}
header nav ul.main-nav.responsive li ul li ul li a:hover {background: var(--white); color: var(--dark-grey);}
header.scroll nav ul.main-nav.responsive {top: 80px;}
header .social a.btn {display: none;}
}

@media screen and (max-width: 1244px) {
.inner {width: 90%; margin: 0 5%;}
section.clients .clients-carousel button.asset-prev {left: -50px;}
section.clients .clients-carousel button.asset-next {right: -50px;}
section.cs-content-area article .image-container {margin: 0 -5.5% 25px 25px;}
section.news-content-area article .image-container {margin: 0 -5.5% 25px 25px;}
}

@media screen and (max-width: 1144px) {
section.event-title .flex-events {flex-wrap: wrap;}
section.event-title article {width: calc(50% - 3px);}
section.news-overview article {width: calc(33.3% - 55px);}
}

@media screen and (max-width: 1044px) {
section.clients .clients-carousel button {display: none;}
section.internal-banner {min-height: 550px;}
section.internal-banner article div.first-line {font-size: 45px;}
section.internal-banner article div.last-line {font-size: 100px; -webkit-text-stroke: 2px var(--white);}
div.internal {margin-top: 550px;}
}

@media screen and (max-width: 944px) {
.col2 {width: 50%;}
.col3 {float: left; width: 100%;}
.col3-span2 {float: left; width: 100%;}
.col4 {float: left; width: 100%;}
.col4-span3 {float: left; width: 100%;}
.col5 {float: left; width: 50%;}
.col5-span2 {float: left; width: 100%;}
.col5-span3 {float: left; width: 100%;}
.col5-span4 {float: left; width: 100%;}
.col6 {float: left; width: 33.3%;}
section.banner article {top: 50px; transform: translate(-50%, 0); margin-top: 0;}
section.banner article div.first-line {font-size: 45px;}
section.banner article div.last-line {font-size: 100px; -webkit-text-stroke: 2px var(--white);}
section.banner article .button {bottom: -150px;}
section.services article {width: calc(50% - 4px);}
section.values-headings .flex-values {flex-wrap: wrap;}
section.values-headings aside {overflow: hidden; position: relative; width: calc(50% - 3px);}
section.values-content {margin-top: -262px; padding-top: 262px; background: url("../images/bg-content-area.png") no-repeat center top 262px;}
section.cs-content-area article .image-container {margin: 0 0 25px 0;}
section.cs-content-area article .image-container img {width: 100%; max-width: 100%;}
section.news-content-area article .image-container {margin: 0 0 25px 0;}
section.news-content-area article .image-container img {width: 100%; max-width: 100%;}
section.news-overview .flex-news {display: flex; width: 90%; padding: 0 5%;}
section.news-overview article {width: calc(50% - 45px);}
footer a.btn {float: left; margin-bottom: 25px;}
footer h3 {text-align: left;}
footer ul.social-links {float: left;}
footer .cb {float: left; margin-left: 7px;}
}

@media screen and (max-width: 844px) {
section.case-study-banner .image img {width: auto; height: 500px;}
section.news-banner .image img {width: auto; height: 500px;}
section.content-area .block-1323 .column:first-child {width: 100%;}
section.content-area .block-1323 .column:last-child {width: 100%;}
section.content-area .block-1323 .column article {padding: 0 0 45px 0;}
section.content-area .block-1323 .column article .content {padding: 0px;}
section.content-area .block-2313 .column:last-child {width: 100%;}
section.content-area .block-2313 .column:first-child {width: 100%;}
section.content-area .block-2313 .column article {padding: 0 0 45px 0;}
section.content-area .block-2313 .column article .content {padding: 0px;}
section.content-area .flex-1100 .column article {padding: 0 0 45px 0; display: block;}
section.content-area .flex-1100 .column article .content {padding: 45px 0 0 0; flex: 1 1 0;}
section.testimonials aside.testimonial-quotes {width: calc(100% - 50px);}
section.news-content-area article .entry-content img.alignnone {float: none; display: block;}
section.news-content-area article .entry-content img.alignleft {float: none; display: block; margin-bottom: 25px; margin-right: 0px;}
section.news-content-area article .entry-content img.alignright {float: none; display: block; margin-bottom: 25px; margin-left: 0px;}
section.cs-content-area article img.alignnone {float: none; display: block;}
section.cs-content-area article img.alignleft {float: none; display: block; margin-bottom: 25px; margin-right: 0px;}
section.cs-content-area article img.alignright {float: none; display: block; margin-bottom: 25px; margin-left: 0px;}
.col-switch {float: left !important;}
}

@media screen and (max-width: 744px) {
.col2 {float: left; width: 100%;}
.col3 {float: left; width: 100%;}
.col3-span2 {float: left; width: 100%;}
.col4 {float: left; width: 100%;}
.col4-span3 {float: left; width: 100%;}
.col5 {float: left; width: 100%;}
.col5-span2 {float: left; width: 100%;}
.col5-span3 {float: left; width: 100%;}
.col5-span4 {float: left; width: 100%;}
.col6 {float: left; width: 100%;}
footer ul.sitemap li {display: block; width: 100%;}
}

@media screen and (max-width: 644px) {
section.intro article p {width: 100%; padding: 0 0 25px 0;}
section.banner {background-size: 100%;}
section.banner article div.first-line {font-size: 30px; line-height: 110%;}
section.banner article div.last-line {font-size: 70px; -webkit-text-stroke: 1px var(--white);}
header .social {display: none;}
main .homepage-banners div img {left: 50%; transform: translateX(-50%);}
section.internal-banner .image img {width: auto; height: 550px; left: 50%; transform: translateX(-50%);}
section.internal-banner article div.first-line {font-size: 30px;}
section.internal-banner article div.last-line {font-size: 70px; -webkit-text-stroke: 2px var(--white);}
section.misc-banner .image img {width: auto; height: 370px;}
section.event-title article {width: 100%;}
header .logo {padding-top: 35px;}
header .logo img {height: 45px;}
header.scroll .logo {padding-top: 20px;}
section.internal-banner {min-height: 450px;}
div.internal {margin-top: 450px;}
section.case-study-banner article div.last-line {font-size: 70px;}
section.news-banner article div.last-line {font-size: 70px;}
section.news-overview article {width: calc(100% - 30px);}
section.clients .clients-carousel .slick-track {gap: 0;}
section.clients .clients-carousel div.image {width: 100%; max-width: 100%;}
section.case-studies .flex .column article {width: 90%; padding: 30px 5%;}
section.news-content-area article .meta-content p span {display: block; padding: 0 0 5px 0;}
}

@media screen and (max-width: 544px) {
section.intro {margin-top: 70vh;}
section.services article {width: 100%; padding: 50% 0 0 0;}
section.clients article ul li {display: block; padding: 0;}
section.clients article ul li::before {content: none;}
section.banner article div.first-line {font-size: 30px; line-height: 110%;}
section.banner article div.last-line {font-size: 50px; -webkit-text-stroke: 1px var(--white);}
section.internal-banner article div.first-line {font-size: 30px; line-height: 110%;}
section.internal-banner article div.last-line {font-size: 50px; -webkit-text-stroke: 1px var(--white);}
section.values-content {margin-top: -89px; padding-top: 89px; background: url("../images/bg-content-area.png") no-repeat center top 89px;}
section.values-headings .flex-values {display: block;}
section.values-headings aside {width: 100%; margin-bottom: 6px;}
}

/* Flex elements only */

@media screen and (max-width: 1144px) {
section.content-area .flex-1212 .column article {display: block;}
section.content-area .flex-1212 .column article .content {padding: 0 0 25px 0; width: calc(100% - 50px);}
}

@media screen and (max-width: 1044px) {
section.content-area .flex-2313 .column article {display: block;}
section.content-area .flex-2313 .column article .content {padding: 0 50px 25px 0; width: calc(100% - 50px);}
section.content-area .flex-1323 .column article {display: block;}
section.content-area .flex-1323 .column article .content {padding: 0 0 25px 50px; width: calc(100% - 50px);}
section.content-area .flex-131313 .column {width: 25%;}
section.content-area .flex-131313 .column:nth-child(2) {flex-grow: 2;}
}

@media screen and (max-width: 844px) {
section.values-content .flex {display: block;}
section.values-content .flex .column {float: left; display: block; width: 100%;}
section.values-content .flex .column aside {width: 100%; height: 250px;}
section.values-content .flex .column article {width: 100%; padding: 45px 0; display: block;}
section.values-content .flex .column article .content {padding: 0 50px;}
section.case-studies .flex {display: block;}
section.case-studies .flex .column {width: 100%;}
section.case-studies .flex .column:first-child {height: 200px;}
}

@media screen and (max-width: 744px) {
section.content-area .flex {display: block;}
section.content-area .flex .column aside {float: left; width: 100%; height: 250px;}
section.content-area .flex-1323 .column {float: left; width: 100%;}
section.content-area .flex-1323 .column article {width: 90%; padding: 45px 5%;}
section.content-area .flex-1323 .column article .content {padding: 0 0 25px 0; width: 100%;}
section.content-area .flex-2313 .column {float: left; width: 100%;}
section.content-area .flex-2313 .column article {width: 90%; padding: 45px 5%;}
section.content-area .flex-2313 .column article .content {padding: 0 0 25px 0; width: 100%;}
section.content-area .flex-1212 .column {float: left; width: 100%;}
section.content-area .flex-1212 .column article .content {padding: 0 0 25px 0; width: 100%;}
section.content-area .flex-1212 .column article:first-child .content {padding-right: 0;}
section.content-area .flex-1212 .column article:last-child .content {padding-left: 0;}
section.content-area .flex-1212cr .column {float: left; width: 100%;}
section.content-area .flex-1212cr .column article {width: 90%; padding: 45px 5%;}
section.content-area .flex-1212cr .column article .content {padding: 0 0 25px 0; width: 100%;}
section.content-area .flex-1212cl .column {float: left; width: 100%;}
section.content-area .flex-1212cl .column article {width: 90%; padding: 45px 5%;}
section.content-area .flex-1212cl .column article .content {padding: 0 0 25px 0; width: 100%;}
section.content-area .flex-3525 .column {float: left; width: 100%;}
section.content-area .flex-3525 .column article {width: 90%; padding: 45px 5%;}
section.content-area .flex-3525 .column article .content {padding: 0 0 25px 0; width: 100%;}
section.content-area .flex-2535 .column {float: left; width: 100%;}
section.content-area .flex-2535 .column article {width: 90%; padding: 45px 5%;}
section.content-area .flex-2535 .column article .content {padding: 0 0 25px 0; width: 100%;}
section.content-area .flex-131313 .column {float: left; width: 100%;}
section.content-area .flex-131313 .column article {width: 90%; padding: 45px 5%;}
section.content-area .flex-131313 .column article .content {padding: 0 0 25px 0; width: 100%;}
}