/* ----- HTML STYLES ----- */
/* undo default styling of common (X)HTML browsers */
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,td,tr,th,td
{ margin:0px; padding:0px; font-family: "Inter", sans-serif; border:none; }
a img,:link img,:visited img { border:none; }
address {font-style:normal;}
body {margin: 0px; padding: 0px 0 0px 0; text-align:center; color:#000000;}

* {box-sizing: border-box; background-repeat:no-repeat;}


/* ---- MASTER TEMPLATE ---- */
#container {position: relative; max-width: 100%; margin: 0px auto; text-align: left; }
#container>div, #container>header, #container>main, #container>main>div, #container>footer {min-width:320px; width: 100%; max-width: 100%; float:left; position:relative;}
.wrapper {margin: 0 auto; width: 1450px; max-width: 100%;}
.content {float: left; width: 100%; max-width: 100%; padding:0 5%; position:relative;}
.margin {padding:30px 0;}
.marginLarge {padding:30px 0 120px 0;}
.grey {background-color:#e1e1e1;}

@media only screen and (min-width: 768px) {
.margin {padding:60px 0;}
.marginLarge {padding:60px 0 160px 0;}
}

@media only screen and (min-width: 1024px) {
.content {float: left; width: 100%; max-width: 100%; padding:0 5%; }
.margin {padding:80px 0;}
.marginLarge {padding:80px 0 200px 0;}
  }


header {height:85px;}
header a.logo {width:175px; height:69px; background-size:contain; background-image:url("/wp-content/themes/synergy/assets/synergy-logo.png"); background-repeat:no-repeat; float:left; display:block;  margin-top:12px;}

@media only screen and (min-width: 768px) {
header {height:115px;}
header a.logo {width:215px; height:85px;  margin-top:17px;}
}

.page-template-case-studies header .content:after {display:block; content:''; width:100%; border-bottom: 1px solid #646464; position:relative; top:85px;}
.page-template-news header .content:after {display:block; content:''; width:100%; border-bottom: 1px solid #646464; position:relative; top:85px;}
.single-news header .content:after {display:block; content:''; width:100%; border-bottom: 1px solid #646464; position:relative; top:85px;}
.page-template-text-only header .content:after {display:block; content:''; width:100%; border-bottom: 1px solid #646464; position:relative; top:85px;}

@media only screen and (min-width: 768px) {
.page-template-case-studies header .content:after {top:115px;}
.page-template-news header .content:after { top:115px;}
.single-news header .content:after {top:115px;}
.page-template-text-only header .content:after {top:115px;}
}

.screen-reader-text {position: absolute;  left: -9999px;  z-index: 999; padding: 1em; background-color: black; color: white;  opacity: 0;}
.screen-reader-text:focus {left: 50%; transform: translateX(-50%); opacity: 1;}

footer {background-color:#323232; background-image:url("/wp-content/themes/synergy/assets/footer.png"); background-position: top left -50%; padding:50px 0 80px 0; background-size:800px;}
footer a.footerLogo {width:215px; height:85px; background-size:contain; background-image:url("/wp-content/themes/synergy/assets/synergy-logo-white.png"); background-repeat:no-repeat; float:left; display:block; margin:0 0 50px 0;}
footer .copy p {font-size:22px;}
footer a.linkedIn {width:50px; height:50px; background-image: url("/wp-content/themes/synergy/assets/linkedin.png"); background-size:contain; display:block; margin:50px 0 80px 0;}

#menu-footernav {float:left; width:100%; margin-bottom:30px;}
#menu-footernav li {margin-bottom:15px;}
#menu-footernav li a {font-size:22px; font-weight:300; color:#fff;}

#menu-infonav {float:left; width:100%;}
#menu-infonav li {float:none; margin-bottom:15px;}
#menu-infonav li a {font-size:22px; font-weight:300; color:#fff;}

#copyright {background-color:#646464;  padding:20px 0;}
#copyright p {float:left; margin-bottom:0px; line-height:23px; color:#fff; font-size:14px;}
#copyright a.ie {clear: left; float: left; color:#fff; font-size:14px; background-image: url(assets/ie-logo.png); background-position: center right;  padding-right: 40px; line-height: 23px; margin-top:10px;}

@media only screen and (min-width: 768px) {
footer {background-size:1000px; background-position: top left -100%; }
footer .left {width:47.5%;}
#copyright a.ie {width: auto;}
#menu-footernav {float:right; width:35%;}
#menu-infonav li {float:left; margin-right:30px; margin-bottom:0px;}
#menu-infonav li a {font-size:22px; font-weight:300; color:#fff;}
}
  
@media only screen and (min-width: 1024px) {
footer {background-size:auto;}
footer { background-position: top right;}
#copyright a.ie {float: right; clear: none; margin-top:0px;}
}

/* ----- BANNER STYLES ----- */


.videoBanner {overflow:hidden;}
#video-background {position: absolute; top: 50%; left: 50%;  -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; width: auto;  height: auto; z-index: 2; overflow: hidden;}

#banner {height:320px; background-size:cover; background-position:center center;}
#banner .content {height:320px;}
#banner .content {height:320px; display: flex; align-items: center;}
#banner.videoBanner {height:320px;}
#banner.videoBanner .content {align-items: unset; height:320px; display: block;}
#banner .content .videoTitle {position:relative; z-index:3; width:100%; margin-top:50px;}
#banner .content .videoTitle h1 {color:#fff; font-weight:300; font-size:28px;}
#banner .content .videoIntro {position:relative; z-index:3; width:100%; margin-top:50px;}
#banner .content .videoIntro p {color:#fff; font-weight:300; font-size:18px;}
#banner .content .message {position:relative;}
#banner .content .message h1 {color:#fff; font-weight:300; font-size:28px; }
#banner .content .message h4 {color:#fff; font-weight:bold; font-size:18px; margin-bottom:30px;}
	
@media only screen and (min-width: 768px) {
#banner {height:500px;}
#banner .content {height:500px;}
#banner.videoBanner {height:500px;}
#banner.videoBanner .content {height:500px;}
#banner .content .videoIntro {width:60%;}
#banner .content .videoTitle h1 {font-size:50px;}
#banner .content .videoIntro p {font-size:25px;}
#banner .content .message {width:60%;}
#banner .content .message h1 {font-size:50px;}
#banner .content .message h4 {margin-bottom:40px;}
}
	
@media only screen and (min-width: 1024px) {
#video-background {height:auto;}
#banner.videoBanner {height:600px;}
#banner {height:600px; background-position:center center;}
#banner .content {height:600px; display: flex; align-items: center;}
#banner.videoBanner .content {display: flex;}
#banner .content .videoTitle {width:30%; margin-right:15%; padding-top:100px;}
#banner .content .videoIntro {width:55%; padding-top:100px;}
}
	
@media only screen and (min-width: 1280px) {
#video-background {height:auto;}
#banner.videoBanner {height:800px;}
#banner {height:800px;}
#banner .content {height:800px;}
#banner .content .videoTitle {width:25%; margin-right:20%; padding-top:125px;}
#banner .content .videoIntro {width:55%; padding-top:125px;}
}
	

/* ----- COPY STYLES ----- */

.left {float:left; width:100%; clear:left; }
.right {float:left; width:100%;}
.wide {float:left; width:100%;}

@media only screen and (min-width: 768px) {
.left {margin-bottom:40px;}
.left:last-child {margin-bottom:0px;}
}

@media only screen and (min-width: 1024px) {
.left {width:65%;}
.right {width:65%;}
.wide {width:65%;}
}

@media only screen and (min-width: 1280px) {
.left {width:47.5%;}
.right {float:right; width:47.5%;}
.wide {width:65%;}
.flexAlign {float:left; width:100%; display:flex; align-items: flex-end;}
.flexAlign .right {margin-left:5%; }
}

.copy p {color:#323232; font-size:18px; font-weight:300; margin-bottom:20px;}
.copy p a {color:#000;}
.copy ul {list-style-type:disc; margin-bottom:20px; margin-left:20px;}
.copy li {color:#323232; font-size:20px; font-weight:300; margin-bottom:10px;}
.copy li:last-child {margin-bottom:0px;}
.copy p strong {color:#4b4b4b; font-weight:bold;}
.copy.first p:first-of-type {font-size:22px;}
.copy h1 {color:#646464; font-size:28px; font-weight:300; margin-bottom:30px;}
.copy h2 {color:#646464; font-size:28px; font-weight:300; margin-bottom:30px;}
.copy h3 {color:#646464; font-size:28px; font-weight:300; margin-bottom:30px;}
.copy h4 {color:#323232; font-size:18px; font-weight:bold; margin-bottom:30px;}
.copy p:last-child, .copy h1:last-child, .copy h2:last-child, .copy h3:last-child, .copy h4:last-child, .copy h5:last-child, .copy h6:last-child, .copy ul:last-child {margin-bottom:0px;}

.copy.white p, .copy.white h1, .copy.white h2, .copy.white h3, .copy.white h4, .copy.white h5, .copy.white h6 {color:#fff;}
.copy.white p strong {color:#ffffff;}
.copy.white p a {color:#ffffff;}

a.arrow {position:relative; display:inline-block; border: 2px solid #969696; border-radius: 25px; padding:10px 50px 10px 20px; font-size:18px; font-weight:300; color:#323232;}
a.arrow:after {display:block; content:''; width:12px; height:12px; border-top:2px solid #969696; border-right:2px solid #969696; transform:rotate(45deg); right:25px; top:13px; position:absolute;  transition: right 0.3s;}
a.arrow:hover:after {right:15px; transition: right 0.3s;}

a.mailLink {float:left; background-image:url("/wp-content/themes/synergy/assets/mail-link.png"); background-position:left top; padding:40px 0 0 0; margin-top:40px; font-size:18px; display:block; line-height:37px; font-weight:300; color:#323232;}


@media only screen and (min-width: 768px) {
.copy h1 {font-size:50px;}
.copy h2 {font-size:50px;}
.copy p {font-size:20px;}
.copy.first p:first-of-type {font-size:25px;}
a.mailLink {float:left; padding:0 0 0 50px; font-size:25px; margin-top:0px;}
}

@media only screen and (min-width: 1280px) {
a.mailLink {float:right;}
}


/* ----- CLIENT SCROLLER ----- */

.clients {float:left; width:100%; margin-top:60px;}
.clients .cycle-slideshow {float:left; width:100%;}
.clients .cycle-carousel-wrap {float:left; width:100%;}
.clients .client {width:50%; text-align:center; vertical-align: middle;}
.clients .client img {max-width:80%;}

@media only screen and (min-width: 768px) {
.clients .client {width:25%;}
}

@media only screen and (min-width: 1024px) {
.clients .client {width:20%;}
}

@media only screen and (min-width: 1280px) {
.clients .client {width:16.6666%;}
}


/* ----- CASE STUDY FEED ----- */

@keyframes fadeIn {0% {opacity: 0;} 50% {opacity: 0;} 100% {opacity: 1;}}

.caseStudyGrid {float:left; width:100%; margin-top:60px; position:relative; }
.caseStudyGrid .caseStudyPreview {position:relative; float:left; background-size:cover; background-position:center center; width:100%;  padding-top:100%; margin-bottom:20px;}
.caseStudyGrid .caseStudyPreview:last-child {margin-bottom:0px;}
.caseStudyGrid .caseStudyPreviewCopy p {color:#323232; font-weight:300; font-size:25px; margin-bottom:30px;}

.caseStudyGrid .caseStudyPreviewCopy {display:none; position:absolute; top:0px; left:0; width:100%; height:100%;  padding:30px; z-index:4; animation-duration: 0.5s; }
.caseStudyGrid .caseStudyPreview:hover .caseStudyPreviewCopy {display:block; animation-name: fadeIn; animation-duration: 0.5s;}

.caseStudyGrid .caseStudyPreview .caseStudyFader {position:absolute; top:0px; background-color:rgba(200,200,200,0.8); width:100%; height:100%; z-index:3;  transition:opacity 0.5s; opacity:0;}
.caseStudyGrid .caseStudyPreview:hover .caseStudyFader {opacity:1; transition:opacity 0.3s;}

.caseStudyPreview a.arrow {position:relative; display:inline-block; border: 2px solid #4b4b4b; border-radius: 25px; padding:10px 50px 10px 20px; font-size:18px; font-weight:300; color:#191919;}
.caseStudyPreview a.arrow:after {display:block; content:''; width:12px; height:12px; border-top:2px solid #4b4b4b; border-right:2px solid #4b4b4b; transform:rotate(45deg); right:25px; top:13px; position:absolute;  transition: right 0.3s;}
.caseStudyPreview a.arrow:hover:after {right:15px; transition: right 0.3s;}

.pager {float:left; width:100%;}
.pager {float:left; width:100%; clear:both; margin-top:80px;}
.pager span.current {float:left; text-align:center; display:block; background-color:#323232; color:#fff; width:30px; height:30px; line-height:28px;  margin-right:5px; } 
.pager span.dots {float:left; text-align:center; display:block; background-color:#e1e1e1; color:#323232; width:30px; height:30px; line-height:28px;  margin-right:5px; }
.pager a {background-color:#e1e1e1; float:left; text-align:center; display:block; margin-right:5px; width:30px; height:30px; color:#323232; line-height:28px;}
.pager a:hover {color:#fff;  background-color:#323232; }

@media only screen and (min-width: 768px) {
.caseStudyGrid .caseStudyPreview {width:47.5%; margin-left:5%; padding-top:47.5%; margin-bottom:5%; }
.caseStudyGrid .caseStudyPreview:nth-child(2n+1) {margin-left:0; clear:left;}
}
	
@media only screen and (min-width: 1024px) {
.caseStudyGrid .caseStudyPreview:nth-child(2n+1) {clear:none;}	
.caseStudyGrid .caseStudyPreview:nth-child(1) {width:48.5%; padding-top:48.5%; margin: 0 1.5% 0 0;}
.caseStudyGrid .caseStudyPreview:nth-child(1) p {width:60%;}
.caseStudyGrid .caseStudyPreview:nth-child(2) {width:48.5%; padding-top:22.75%; margin: 0 0 3% 1.5%;}
.caseStudyGrid .caseStudyPreview:nth-child(3) {width:22.75%; padding-top:22.75%; margin: 0 0 0 1.5%;}
.caseStudyGrid .caseStudyPreview:nth-child(4) {width:22.75%; padding-top:22.75%; margin: 0 0 0 3%;}
.caseStudyGrid .caseStudyPreview:nth-child(5) {width:48.5%; padding-top:22.75%; margin: 3% 1.5% 3% 0%; clear:left;}
.caseStudyGrid .caseStudyPreview:nth-child(6) {width:22.75%; padding-top:22.75%; margin: 0 3% 0 0%; clear:left;}
.caseStudyGrid .caseStudyPreview:nth-child(7) {width:22.75%; padding-top:22.75%; margin: 0 1.5% 0 0%;}
.caseStudyGrid .caseStudyPreview:nth-child(8) {width:48.5%; padding-top:48.5%; margin: -25.75% 0 0 1.5%;}
}


/* ----- NEWS FEED ----- */

.newsPreviews {float:left; width:100%; margin-top:60px; position:relative;}
.newsPreview {float:left; width:100%; margin:0 0 60px 0; position:relative; }
.newsPreviewImage {width:100%; height:230px; background-size:cover; background-position:center center; margin-bottom:30px;}
.newsPreviewCopy {}
.newsPreviewCopy h4 {font-size:18px; font-weight:bold; margin-bottom:30px; color:#4b4b4b;}
.newsPreviewCopy h2 {font-size:22px; font-weight:300; margin-bottom:20px;  color:#323232;}
.newsPreviewCopy p {font-size:18px; font-weight:300; margin-bottom:30px;  color:#4b4b4b;}
.newsImage {width:100%; float:left; height:230px; margin-bottom:30px; background-size:cover; bakcground-position:center center;}

@media only screen and (min-width: 768px) {
.newsPreview {width:47.5%; margin:0 0 60px 5%;}
.newsPreview:nth-child(odd) {margin:0 0 60px 0; clear:left;}
.newsImage {height:400px; margin-bottom:40px;}
}

@media only screen and (min-width: 1024px) {
.newsPreviewImage {width:100%; height:320px;}
.newsPreviewCopy h2 {font-size:28px;}
.newsImage {height:560px; margin-bottom:60px;}
}

@media only screen and (min-width: 1280px) {
.newsPreviewImage { height:420px;}
	
}

/* ----- TESTIMONIAL ----- */

.testimonial {background-image:url("/wp-content/themes/synergy/assets/testimonials.jpg"); background-position:center center; background-size:cover; padding:40px 0 80px 0;}
.testimonial h4 {color:#fff; font-size:18px; font-weight:bold; margin-bottom:60px;}
.testimonial p {font-size:18px; color:#fff; font-weight:300;}

@media only screen and (min-width: 768px) {
.testimonial {padding:80px 0 80px 0;}
.testimonial h4 {margin-bottom:60px;}
.testimonial p {font-size:30px;  width:75%; }	
}

@media only screen and (min-width: 1024px) {
.testimonial { padding:80px 0 120px 0;}
}

@media only screen and (min-width: 1280px) {
.testimonial { padding:80px 0 250px 0;}
.testimonial p {width:60%;}
}

/* ----- FORM ----- */

#wpforms-73 {float:left; width:100%; margin-top:60px;}

#wpforms-73  button[type=submit] {position:relative; background-color:#fff; display:inline-block; border: 2px solid #969696; border-radius: 25px; padding:10px 50px 10px 20px; font-size:18px; font-weight:300; color:#323232;}
#wpforms-73  button[type=submit]:after {display:block; content:''; width:12px; height:12px; border-top:2px solid #969696; border-right:2px solid #969696; transform:rotate(45deg); right:25px; top:11px; position:absolute; transition: right 0.3s;}
#wpforms-73  button[type=submit]:hover {background:none;}
#wpforms-73  button[type=submit]:hover:after {right:15px; transition: right 0.3s; }

/* ----- CONTACT FORM ----- */

.contactRight {width:100%; float:left; margin-top:40px;}
.contactRight p {font-size:18px;}

@media only screen and (min-width: 1024px) {
.contactRight {width:65%; float:left; margin-top:0px;}
.contactRight p {font-size:25px;}
}

@media only screen and (min-width: 1280px) {
.contactRight {width:35%; float:right; margin-top:80px;}
}

/* ----- WHY CHOOSE US ----- */

.whyChooseUs { background-color:#c8c8c8;}
.whyChooseUsText {width:100%; margin:60px 0; float:left;}
.whyChooseUsText h4 {font-weight:bold; font-size:18px; margin-bottom:40px; color:#4b4b4b;}
.whyChooseUsText h2 {font-weight:300; font-size:28px; color:#646464; margin-bottom:40px;}
.whyChooseUsText p {font-weight:300; font-size:18px; margin-bottom:0px; color:#323232;}

@media only screen and (min-width: 768px) {
.whyChooseUsText h4 {font-size:18px;}
.whyChooseUsText h2 {font-size:50px; margin-bottom:60px;}
.whyChooseUsText p { font-size:25px;}
}

@media only screen and (min-width: 1024px) {
.whyChooseUsText {width:60%;  padding:20px 0; }
.bg-third {position:absolute; top:0; right:0; height:100%;  width:calc(50% - 195px); background-size:cover; background-position:center center;}
}

@media only screen and (min-width: 1280px) {
.whyChooseUsText {width:60%;  padding:80px 0 130px 0;  background-image:url("/wp-content/themes/synergy/assets/logo-frame.png"); background-position: top -360px right 50px;  transition:background 0.6s;}
.shapeDown .whyChooseUsText {background-position: top -140px right 50px; transition:background 0.6s;}
}

/* ----- SERVICES ----- */

.serviceList {float:left; width:100%; position:relative;}
.serviceList .bg-half {float:left; height:230px; width:100%; background-size:cover; background-position:center center;}
.serviceList:nth-child(3n+1) {background-color:#646464;}
.serviceList:nth-child(3n+2) {background-color:#c8c8c8;}
.serviceList:nth-child(3n+3) {background-color:#969696; margin-bottom:60px;}

.serviceText {width:100%; float:left; padding:40px 0;}
.serviceList:nth-child(3n+2) .serviceText {background-image:none;}
.serviceList:nth-child(3n+2) {background-image:url("/wp-content/themes/synergy/assets/logo-frame-grey.png"); background-position: bottom -140px left calc(50% + 650px);}
.serviceText h4 {font-weight:bold; font-size:18px; margin-bottom:30px; color:#fff;}
.serviceText h3 {font-weight:300; font-size:28px; color:#e1e1e1; margin-bottom:30px;}
.serviceText p {font-weight:300; font-size:18px; margin-bottom:40px; color:#fff;}
.serviceText a {position:relative; display:inline-block; border: 2px solid white; border-radius: 25px; padding:10px 50px 10px 20px; font-size:18px; font-weight:300; color:#e1e1e1;}
.serviceText a:after {display:block; content:''; width:12px; height:12px; border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(45deg); right:25px; top:13px; position:absolute; transition: right 0.3s; }
.serviceText a:hover:after {right:15px; transition: right 0.3s;}
.serviceList:nth-child(3n+2) .serviceText h4 {color:#4b4b4b;}
.serviceList:nth-child(3n+2) .serviceText h3 {color:#646464;}
.serviceList:nth-child(3n+2) .serviceText p {color:#4b4b4b;}
.serviceList:nth-child(3n+2) .serviceText a {color:#323232; border:2px solid #969696;}
.serviceList:nth-child(3n+2) .serviceText a:after {border-top:2px solid #969696; border-right:2px solid #969696;}
.serviceList:nth-child(3n+3) .serviceText h4 {color:#4b4b4b;}
.serviceList:nth-child(3n+3) .serviceText h3 {color:#323232;}
.serviceList:nth-child(3n+3) .serviceText p {color:#323232;}
.serviceList:nth-child(3n+3) .serviceText a {color:#323232;}

.serviceList:nth-child(2n+2) .bg-half {left:0;}


@media only screen and (min-width: 768px) {
.serviceList .bg-half {position:absolute; top:0; right:0; height:100%; width:50%;}
.serviceText {width:50%; float:left; padding:80px 5% 80px 0;}
.serviceList:nth-child(2n+2) .serviceText {float:right; padding:80px 0 80px 5%;}
}

@media only screen and (min-width: 1024px) {
.serviceText {padding:80px 5% 130px 0; background-image:url("/wp-content/themes/synergy/assets/logo-frame.png"); background-position: bottom -360px right 50px;  transition:background 0.6s;}
.shapeUp .serviceText {background-position: bottom -140px right 50px; transition:background 0.6s;}
.serviceList:nth-child(2n+2) .serviceText {padding:80px 0 130px 5%;}
}

@media only screen and (min-width: 1280px) {
.serviceText {padding:80px 20% 130px 0;}
.serviceList:nth-child(2n+2) .serviceText {padding:80px 0 130px 20%;}
}

/* ----- CONTACT PAGE ----- */

.splitBanner {float:left; width:100%; position:relative; background-color:#646464;}
.splitBanner .bg-half {height:320px; width:100%; background-size:cover; background-position:center center;}
.splitBannerText {width:100%; float:left; padding:40px 0;}

@media only screen and (min-width: 768px) {
.splitBanner .bg-half {height:350px;}
}

@media only screen and (min-width: 1024px) {
.splitBanner .bg-half {position:absolute; top:0; left:0; height:100%; width:50%;}
.splitBannerText {width:50%; float:right; padding:120px 0 60px 10%;}
}


/* ----- SERVICE PAGE ----- */

.services {float:left; width:100%; margin-top:60px;}
.serviceItem {float:left; width:100%;}
.services .column {width:100%; float:left;}
.serviceItem h4 {cursor:pointer; color:#646464; font-size:20px; font-weight:300;  display:block; border-top:1px solid #969696; padding:20px 50px 20px 0; position:relative; }
.serviceItem h4:after {display:block; content:''; width:20px; height:20px; background-image:url(/wp-content/themes/synergy/assets/faq-show.png); background-size:contain; position:absolute; right:10px; top:0px; bottom:0px; margin:auto; transition: transform 0.3s;}
.serviceItem h4.hide:after {transform:rotate(45deg); transition: transform 0.3s;}
.serviceItem p {display:none; color:#646464; font-size:20px; font-weight:300;  margin-bottom:20px; width:80%;}

@media only screen and (min-width: 768px) {
.services .column {width:47.5%; margin-left:5%; }
.services .column:nth-child(2n+1) {margin-left:0; clear:left;}
}

@media only screen and (min-width: 1280px) {
.services .column {width:30%; margin-left:5%; }
.services .column:nth-child(2n+1) {margin-left:5%; clear:none;}
.services .column:nth-child(3n+1) {margin-left:0; clear:left;}
}


/* ----- CAREERS PAGE ----- */

.usps {float:left; width:100%; border-bottom: 1px solid #646464; margin-top:60px;}
.usps:first-child {margin-top:0px;}
.uspList {float:left; width:100%; border-top: 1px solid #646464; padding:30px 0;}
.uspList1 {width:100%; float:left; margin:0 0 10px 0;}
.uspList2 {width:100%; float:left; margin:0 0 20px 0;}
.uspList3 {width:100%; float:left;}

.vacancies {float:left; width:100%; margin-top:60px;}
.vacancy {float:left; width:100%; padding:50px 0; border-top:1px solid #969696;}
.vacancyImage {float:left; width:100%; height:190px; background-size:cover; background-position:center center; margin-bottom:30px;}
.vacancyCopy {float:left; width:100%;}

@media only screen and (min-width: 768px) {
.uspList {padding:20px 0;}
.uspList1 {width:6%; margin:0 5% 0 0;}
.uspList2 {width:36.5%;  margin:0 5% 0 0;}
.uspList3 {width:47.5%; }
	
.vacancy {display:flex; flex-wrap: nowrap;}
.vacancyImage {margin-right:5%; width:47.5%; height:210px; margin-bottom:0px;}
.vacancyCopy {width:47.5%;}
}

@media only screen and (min-width: 1024px) {
.vacancyImage {height:270px;}
}

@media only screen and (min-width: 1280px) {
.vacancyImage {margin-right:22.5%; width:30%;  height:auto;}
}



/* ----- ABOUT US PAGE ----- */

@-webkit-keyframes fadeInSuccess {0% {opacity:0; } 50% {opacity:0; } 100% {opacity:1; }}

.stages {float:left; width:111.1111%; margin:40px 0 40px -5.5555%; background-color:#e1e1e1;}
.stage {float:left; position:relative;  }
.stage .stageImage {width:100%; height:200px; background-size:cover; background-position:center center;}
.stage .copy {padding:20px 20px 30px 20px;}
.stage span {padding:20px; display:block; font-weight:bold;}
.stage h3  {padding:0 20px; font-weight:300; font-size:25px; color:#646464;}

@media only screen and (min-width: 768px) {
.stages {float:left; width:100%; display:flex; margin:80px 0px 0px 0px; background-color:transparent;}
.stage {float:left; position:relative; height:650px; cursor:pointer; background-color:#e1e1e1; margin:0 20px 0 0;}
.stage .copy {width:100%; padding:0px;}
.stage.inactive span {color:#323232; position:absolute; left:20px; top:15px; font-size:18px; font-weight:bold; padding:0px;}
.stage.inactive h3 {z-index: 10; color:#646464; transform:rotate(180deg); position:absolute; bottom:20px;  writing-mode: vertical-rl; height: 100%;  font-size:30px; font-weight:300; left:15px; padding:0px;}
.stage .stageImage {display:none; }

.stage.active {width:100%; transition:width 0.5s;}
.stage.active .copy {padding:25px; animation-name: fadeInSuccess; animation-duration: 1s;  }
.stage.active .stageImage {display:block; float:left; width:100%;  height:260px; animation-name: fadeInSuccess; animation-duration: 1s;} 
.stage.active span {color:#323232; font-size:18px; font-weight:bold; padding:15px 25px 15px 25px; display:inline-block; animation-name: fadeInSuccess; animation-duration: 1s; }
.stage.active h3 {color:#646464; font-size:30px; font-weight:300; padding:0 25px; animation-name: fadeInSuccess; animation-duration: 1s;}
.stage.inactive {width:66px; transition:width 0.5s;}
.stage.inactive .copy {opacity: 0; transition: 0s; width:0%; }
}

@media only screen and (min-width: 1024px) {
.stages {width:75%; float:left;  margin:40px 0px 0px 0px;}
}

@media only screen and (min-width: 1280px) {
.stages {width:47.5%; float:right;  margin:80px 0px 0px 0px;}
.stage {margin:0 0 0 20px;} 
}


.world {background-image:url("/wp-content/themes/synergy/assets/the-world.png"); background-position:center bottom 40px; overflow:hidden; padding-bottom:40px; }

.world .copy ul {margin:0px; width:80%; float:left;  margin:2px 10% 0 10%; list-style-type:none; padding:40px 0 40px 0; position:relative;}
.world .copy ul li {float:none; width:100%; color:#646464; font-size:20px; font-weight:300; border-bottom: 2px solid #646464; padding:30px 0; margin-bottom:0px; }
.world .copy ul li:last-child {border-bottom:0px;}
.world .copy ul li strong {color:#323232; font-size:50px; font-weight:300;}

@media only screen and (min-width: 768px) {
.world {padding-bottom:120px; background-size:90%; background-position:center bottom 40px;}
.world .copy ul {background-color:rgba(225,225,225,0.5); width:100%; margin:20px 0 0 0;}
.world .copy ul li {float:left; width:50%; color:#646464; font-size:20px; font-weight:300; border-right: 2px solid #646464;  border-bottom:none; text-align:center; padding: 0; }
.world .copy ul li:nth-child(2n+2) {border-right:0px;}
.world .copy ul li:nth-last-child(2), .world .copy ul li:last-child {margin-top:40px;}
.world .copy ul:before {display:block; content:''; background-color:rgba(225,225,225,0.5); width:9600px; right:100%; position:absolute; top:0px; bottom:0px;}
.world .copy ul:after {display:block; content:''; background-color:rgba(225,225,225,0.5); width:9600px; left:100%; position:absolute; top:0px; bottom:0px;}
}

@media only screen and (min-width: 1024px) {
.world {background-size:auto; background-position:center bottom 0px;}
.world .copy ul {margin:60px 0 0 0; }
.world .copy ul li {width:25%;}
.world .copy ul li:nth-child(2n+2) {border-right:2px solid #646464;}
.world .copy ul li:nth-child(2n+4) {border-right:0px;}
.world .copy ul li:nth-last-child(2), .world .copy ul li:last-child {margin-top:0px;}
}