.stButton .stLarge:hover {background-position:0px !important;} .EditableTextEdit {clear:left;} .EditMode #testimonial img.mask {display:none;} .DesignMode #testimonial img.mask {display:none;} .CookieConsent {text-align:left; width:100%; background-color:#000; color:#fff; padding:10px 0px 10px 12px; text-transform:uppercase; font-family:"Lato",sans-serif;} .CookieConsent a { text-transform:uppercase; font-family:"Lato",sans-serif; color:#fff; text-decoration:underline;} .CookieConsent .ConsentText {float:left; width:92%; display:inline-block; padding:5px 10px 5px 0; color:#fff;} .CookieConsent .ConsentButtons {float:left; width:8%; padding:5px 10px 0 0 ; text-align:center;} .CookieConsent input[type=submit] {width:20px; height:20px; background-image:url(assets/close-cookie.png); background-position:center center; cursor:pointer; color:#000; background-color:#000;} #cn-notice-text {font-family:"Lato",sans-serif; font-weight:300; color:#fff; font-size:14px;} #cn-notice-buttons {font-family:"Lato",sans-serif; font-weight:300; color:#fff; font-size:14px;} .cookie-notice-container {padding:20px 30px;} @media only screen and (min-width: 1500px) { .CookieConsent {text-align:center;} .CookieConsent .ConsentText {float:none; width:auto;} .CookieConsent .ConsentButtons {float:none; width:auto; padding:0px;} } /* CSS Document */ #mobile:not( .mm-menu ) {display: none;} .WPTTable #banner img.mask {display:none;} .EditMode .columns {-webkit-column-count: auto; -moz-column-count: auto; column-count:auto;} .EditMode .thirds {display:block;} button:focus { outline:none !important; } *:focus { outline:none !important; } * {box-sizing: border-box; background-repeat:no-repeat;} /* ----- 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, select {margin:0px; padding:0px; border:none;} p {font-size:20px; line-height:1.4em;} p, li, a, input, select,label, span {font-family:"Lato",sans-serif; font-weight:300; color:#646877;} h1,h2,h3,h4,h5,h6, h1 a, h2 a, h3 a ,h4 a, h5 a, h6 a {font-family:"Lato",sans-serif; font-weight:300; color:#646877; line-height:1.3em;} a img,:link img,:visited img { border:none; } address {font-style:normal;} .ErrorLabel {display:none;} input {-webkit-appearance: none;} .videoWrapper {position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; margin-bottom:40px; } .videoWrapper iframe {position: absolute; top: 0;left: 0; width: 100%; height: 100%;} .middle {display: table-cell; vertical-align: middle;} #container {position: relative; max-width: 100%; margin: 0px auto; text-align: left; overflow:hidden;} #container>div {min-width:320px; width: 100%; max-width: 100%; float:left; position:relative;} #container>main>div {min-width:320px; width: 100%; max-width: 100%; float:left; position:relative;} .wrapper {margin: 0 auto; width: 1140px; max-width: 100%;} .content {float: left; width: 75%; max-width: 100%; margin:0 12.5%; position:relative;} @media only screen and (min-width: 768px) { .content {width: 87%; margin:0 6.5%;} } @media only screen and (min-width: 1024px) { .content {width: 90%; margin:0 5%;} } /*#01. Header#*/ header {float:left; width:100%; height:120px;} header a.logo {float:left; display:block; width:192px; height:86px; } header .menu-topnav-container {display:none;} @media only screen and (min-width: 768px) { header {height:150px;} header a.logo {width:218px; height:98px; margin-top:30px;} } @media only screen and (min-width: 1100px) { header .menu-topnav-container {display:block; float:right;} header .menu-topnav-container ul li {float:left;} header .menu-topnav-container ul li a {display:inline-block; text-transform:uppercase; font-size:14px; padding:15px 15px;} header .menu-topnav-container ul li:nth-last-child(2) a {color:#fff; background-color:#646877; padding:15px 30px; margin-left:15px;} header .menu-topnav-container ul li:last-child a {color:#fff; background-color:#00708c; padding:15px 20px;} header ul#mainNav {display:block; float:right; clear:right; margin-top:40px; position:relative;} header ul#mainNav>li {float:left;} header ul#mainNav>li>a {text-transform:uppercase; font-size:14px; padding-left:20px;} header ul#mainNav>li>span {cursor:pointer; text-transform:uppercase; font-size:14px; padding-left:20px;} header ul#mainNav>li>a:hover {color:#00708c;} header ul#mainNav>li>ul {display: none; position: absolute;z-index: 120;background-color: #fff; padding: 38px 25px 10px 25px;} header ul#mainNav>li:hover>ul {display:block;} header ul#mainNav>li>ul>li {margin-bottom:10px;} header ul#mainNav>li>ul>li>a {font-size:14px;} header ul#mainNav>li>ul>li>a:hover {color:#00708c;} } /*#02. Footer#*/ footer {float:left; width:100%; background-color:#646877;} footer .content {background-image:url(assets/accreditations.png); background-position:bottom right; padding-bottom:100px;} footer .menu-infonav-container ul {float:left; margin-bottom:50px;} footer .menu-infonav-container ul li {margin-bottom:10px;} footer .menu-infonav-container ul li a {color:#fff; font-size:18px; } footer .menu-footernav-container ul {float:left; width:100%; margin-bottom:50px;} footer .menu-footernav-container ul li {margin-bottom:10px;} footer .menu-footernav-container ul li a {color:#fff; font-size:14px; text-transform:uppercase; font-weight:400;} footer .menu-footernav-container ul li span {color:#fff; font-size:14px; text-transform:uppercase; font-weight:400;} footer .copy.third p {font-size:15px;} footer .copy.third:last-child {margin-bottom:50px;} a.linkedin {float:right; display:block; width:40px; height:40px; background-image:url(assets/linkedin.png); background-position:center center; background-size:contain;} #copyright {background-color:#1c1f2a;} #copyright p {float:left; margin-bottom:0px; line-height:39px;} #copyright a.ie {clear: left; float: left; color:#fff; background-image: url(assets/ie-logo.png); background-position: center right; padding-right: 70px; line-height: 39px;} @media only screen and (min-width: 768px) { footer .content {padding-bottom:40px;} footer .menu-infonav-container ul {margin:20px 0 50px 0;} footer .menu-infonav-container ul li {float:left; border-right:1px solid #fff; padding-right:15px; margin-right:15px; line-height:15px;} footer .menu-infonav-container ul li:last-child {border:0px; margin:0px; padding:0px;} footer .menu-footernav-container ul {margin-bottom:75px;} footer .menu-footernav-container ul li {float:left; width:25%;} footer .copy.third:last-child {margin-bottom:75px;} #copyright a.ie {padding-right: 70px; line-height: 39px; float: left; width: auto;} } @media only screen and (min-width: 1024px) { footer .menu-footernav-container ul li {float:left; width:auto; margin-right:30px;} #copyright {padding:45px 0;} #copyright a.ie {float: right; clear: none;} } /*#03. Banners#*/ #banner {height:400px; background-size:cover; background-position:center center;} #banner.short {height:400px;} #banner .content {height:400px;} #banner.short .content {height:400px;} #banner.short.news {background-color:#646877; min-height:300px; height:auto;} #banner.short.news .content {height:auto;} #banner .copy {position:absolute; bottom:40px;} #banner .copy h1, .greyDarker .copy h1 {color:#fff; font-size:40px; margin-bottom:30px; font-weight:300; background-image:url(assets/bullet-white.png); background-position:top 20px left; padding-left:27px; margin-left:-27px; } #banner .copy p {color:#fff; font-size:18px; font-weight:400; } #banner.short .copy {bottom:40px;} #banner.short.news .copy {position:relative; bottom:0px; padding:80px 0 40px 0;} #banner .copy h2 {color:#fff;} #banner .cycle-slideshow {width:100%; float:left; margin:0px;} #banner .cycle-slideshow .scroller {background-size:cover; width:100%; background-position:center center;} #banner .cycle-slideshow .scroller .content {height:400px;} @media only screen and (min-width: 768px) { #banner {height:700px;} #banner .content {height:700px;} #banner .copy {bottom:90px;} #banner .copy h1, .greyDarker .copy h1 {font-size:50px; background-position:top 25px left; padding-left:30px; margin-left:-30px;} #banner .copy p {font-size:25px;} #banner .cycle-slideshow .scroller .content {height:700px;} } @media only screen and (min-width: 1024px) { #banner .copy h1, .greyDarker .copy h1 {padding-left:40px; margin-left:-40px; } } /*#04. Copy#*/ .blue {background-color:#00708c;} .grey {background-color:#f7f7f8;} .greyDark {background-color:#adacb5;} .greyDarker {background-color:#636877;} .copy {width:100%; margin-bottom:30px; float:left;} .copy p {margin-bottom:20px;} .copy p a:hover {text-decoration:underline;} .copy ul {float:left; width:100%; margin-bottom:20px;} .copy ul li {font-size:20px; margin-bottom:10px; list-style-type:disc; margin-left:20px;} .copy ul.columns li {list-style-type:none; margin-left:0px;} .copy p big {font-size:25px; color:#1c1f2a;} .copy.white p big {color:#fff;} .copy p:last-child {margin-bottom:0px;} .copy a.button {padding:6px 18px; width:80%; background-color:#323e48; display:inline-block; color:#fff; text-transform:uppercase; font-weight:bold; font-size:15px; transition:background-color 1s; line-height:1.4em;} .copy a.button:hover {text-decoration:none; background-color:#00708c; transition:background-color 1s;} .copy.white p, .copy.white p a, .copy.white li, .copy.white h1, .copy.white h2, .copy.white h3, .copy.white h4, .copy.white h5, .copy.white h6 {color:#fff;} .copy:last-child {margin-bottom:0px;} .copy h1 {font-weight:bold; font-size:25px; margin-bottom:20px;} .copy h2 {color:#00708c; font-size:20px; font-weight:bold; text-transform:uppercase; margin-bottom:20px;} .copy h3 {font-size:30px; margin-bottom:20px; background-image:url(assets/bullet-blue.png); background-position:top 10px left; padding-left:27px; margin-left:-27px;} .copy h4 {font-size:25px; margin-bottom:20px;} .copy.white h3 {background-image:url(assets/bullet-white.png);} .copy h5 {font-size:20px;} .copy h6 {font-size:20px; color:#00708c; text-transform:uppercase; font-weight:bold;} img.right {max-width:100%; float:left;} @media only screen and (min-width: 768px) { .copy ul.columns li {float:left; width:50%; padding-right:5%;} .copy a.button {padding:6px 60px 6px 18px; width:auto;} .copy h1 {font-size:30px;} .copy h3 {font-size:40px; background-position:top 17px left; padding-left:30px; margin-left:-30px;} .half {width:50%; padding-right:2.5%;} .third {width:47.5%; float:left; margin-right:0;} .third:nth-child(2n+1) {margin-right:5%; clear:left; } img.right {float:right; max-width:45%; margin-top:50px;} } @media only screen and (min-width: 1024px) { .copy {width:80%;} .half {width:50%;} .third {width:30%; float:left; margin-right:5%;} .third:nth-child(2n+1) {margin-right:5%; clear:none; } .third:last-child {margin-right:0;} .copy.wide {width:100%;} } /*#05. Margins#*/ .margin {padding:45px 0;} @media only screen and (min-width: 1024px) { .margin {padding:65px 0;} } /*#06. Homepage#*/ .statement {width:100%;} .statement p {font-size:25px;} .cycle-pager {z-index:10; position: absolute; bottom: -45px; text-align: center; width: 100%;} .cycle-pager span {font-size:45px; line-height:45px; color:#cfcfcf; cursor:pointer;} .cycle-pager span.cycle-pager-active {color:#00708c;} #banner.home {margin-bottom:20px;} #banner .cycle-prev {display:none;} #banner .cycle-next {display:none;} @media only screen and (min-width: 768px) { .statement p {font-size:40px; margin-bottom:40px;} #banner:hover .cycle-prev {display:block; opacity:0.5; cursor:pointer; display: block; width: 40px; height: 40px; background-position:center center; background-image: url(assets/previous-white.png); z-index: 200; position: absolute; top: 50%; left: 20px; margin-top:-20px;} #banner:hover .cycle-next {display:block; opacity:0.5; cursor:pointer; display: block; width: 40px; height: 40px; background-position:center center; background-image: url(assets/next-white.png); z-index: 200; position: absolute; top: 50%; right: 20px; margin-top:-20px;} #banner .cycle-prev:hover {opacity:1;} #banner .cycle-next:hover {opacity:1;} } @media only screen and (min-width: 1024px) { .statement p {font-size:50px; margin-bottom:50px;} } /*#07. Clients#*/ .sectors {float:left; width:100%; position:relative; } .sector {white-space:normal; float:none;vertical-align:top;} .sector img {margin-bottom:20px;} @media only screen and (min-width: 768px) { .sector {width:47.5%; margin-right:5%;} } @media only screen and (min-width: 1024px) { .sector {width:30%; margin-right:5%;} } /*#07. Slideshow#*/ .cycle-slideshow {float:left; width:100%; margin-top:40px;} .cycle-carousel-wrap {width:100%;} #cyclePager {float:left; width:125%; margin-left:-12.5%; position:absolute; margin-top:125px;} span#prev {cursor:pointer; float:left; display:block; width:18px; height:22px; background-image:url(assets/previous-white.png); background-position:center center; background-size:contain;} span#next {cursor:pointer; float:right; display:block; width:18px; height:22px; background-image:url(assets/next-white.png); background-position:center center; background-size:contain;} @media only screen and (min-width: 768px) { #cyclePager {width:110%; margin-left:-5%;} } @media only screen and (min-width: 1024px) { #cyclePager {width:108%; margin-left:-4%;} } @media only screen and (min-width: 1280px) { #cyclePager {width:120%; margin-left:-10%;} } /*#08. Forms#*/ #enquiry p {color:#fff; margin:15px 0; float:left; width:100%; font-size:20px;} #enquiry p.terms {color:#fff; margin:15px 0; float:left; width:100%; font-size:20px;} #enquiry p.terms a {color:#fff; text-decoration:underline;} #enquiry label {color:#fff; margin:15px 0; float:left; width:100%; font-size:20px; font-weight:300;} #enquiry .wpforms-uploader {border-radius:0px; border:0px;} #enquiry .wpforms-container .wpforms-field {padding:0 0 10px 0;} #wpforms-286 textarea {font-family:"Lato",sans-serif; font-size:20px; font-weight:300; color:#646877; resize:none; border:0px; height:202px; border-radius:0px;} #wpforms-123 textarea {font-family:"Lato",sans-serif; font-size:20px; font-weight:300; color:#646877; resize:none; border:0px; height:109px; border-radius:0px;} #enquiry .wpforms-field-text input[type=text] {width:100%; padding:15px; border-radius:0px; border:0px; font-family:"Lato",sans-serif; font-size:20px; font-weight:300; color:#646877;} #enquiry .wpforms-field-email input[type=email] {width:100%; padding:15px; border-radius:0px; border:0px; font-family:"Lato",sans-serif; font-size:20px; font-weight:300; color:#646877;} #enquiry button[type=submit] {cursor:pointer; padding:12px 18px; width:100%; background-color:#323e48; display:inline-block; font-family:"Lato",sans-serif; color:#fff; text-transform:uppercase; font-weight:bold; font-size:20px;} #enquiry .wpforms-error {color:#fff;} @media only screen and (min-width: 768px) { #enquiry button[type=submit] {padding:12px 60px 12px 18px; width:auto;} } /*#09. Testimonials#*/ #testimonial {background-image:url(assets/background-testimonial.jpg); background-position:center center; background-size:cover; padding-bottom:140px;} #testimonial p {color:#1b1e29; font-size:25px;} #testimonial .testimonial {float:left; width:100%; margin-bottom:50px;} #testimonial img.mask {display:none;} #testimonial .cycle-slideshow {width:100%; float:left;} @media only screen and (min-width: 768px) { #testimonial .cycle-slideshow {width:40%; float:left;} #testimonial img.mask {position:absolute; bottom:0px; right:-10%; height:110%;} } @media only screen and (min-width: 1024px) { #testimonial img.mask {left:50%;} } .testimonials {float:left; width:100%; background-color:#fff; padding:25px 70px 25px 35px; margin-bottom:30px; position:relative;} .testimonials .long {display:none;} .testimonials a {cursor:pointer; top:30px; right:30px; position:absolute; width:40px; height:40px; display:block; background-image:url(assets/down.png); background-position:center center; transition:0.5s;} .testimonials a.active {transform: rotate(180deg); transition:0.5s;} @media only screen and (min-width: 1024px) { .testimonials {width:75%;} } /*#10. Values#*/ .values {float:left; width:100%; position:relative;} .values #cyclePager {margin-top:150px;} .values #cyclePager span#prev {background-image:url(assets/previous-grey.png); } .values #cyclePager span#next {background-image:url(assets/next-grey.png); } .value {white-space:normal; float:none; vertical-align:top; padding-top:36px;} .value .valueWrapper {position:relative; padding:70px 25px; background-color:#ebeef3; width:100%; } .value img {position:absolute; top:-36px; left:50%; margin-left:-36px;} .value a {color:#00708c; font-weight:bold;} .arrow {width:100%; height:0px; display:block; position:relative; margin-bottom:50px;} .arrow:before, .arrow:after {position: absolute; bottom: -50px; content: ''; width: 50%; height: 50px;} .arrow:before {left: 0px; background: linear-gradient(to right top, transparent 50%, #ebeef3 50%);} .arrow:after {right: 0px; background: linear-gradient(to left top, transparent 50%, #ebeef3 50%);} @media only screen and (min-width: 768px) { .value {width:47.5%; margin-right:5%;} } @media only screen and (min-width: 1024px) { .value {width:30%; margin-right:5%;} } @media only screen and (min-width: 1400px) { .value {width:21.25%; margin-right:5%;} } /*#11. About#*/ .gozie img.right {display:none;} @media only screen and (min-width: 768px) { .gozie img.right {display:block; position:absolute; bottom:0px; left:55%;} } @media only screen and (min-width: 1024px) { } /*#12. Diversity#*/ #inclusion {background-image:url(assets/background-inclusion.jpg); background-position:center center; background-size:cover;} #inclusion h3, #inclusion p {color:#1c1f2a;} #inclusion img.mask {display:none;} @media only screen and (min-width: 768px) { #inclusion .copy {width:50%;} #inclusion p big {font-size:30px; line-height:1em;} #inclusion img.mask {display:none; position:absolute; bottom:0px; right:0; height:120%;} } @media only screen and (min-width: 1024px) { #inclusion p big {font-size:40px;} #inclusion img.mask {left:55%;} } /*#13. Case Studies#*/ #banner.caseStudyBanner {background-image:url(assets/case-study-banner.jpg);} .caseStudyPreview {float:left; width:100%; margin-bottom:45px; padding-bottom:45px; border-bottom:1px solid #646877;} .caseStudyPreview h2 {text-transform:none; color:#646877; font-weight:bold; font-size:25px;} .caseStudyPreview h3 {text-transform:uppercase; color:#00708c; font-weight:bold; background-image:none; font-size:20px; margin-top:40px;} .caseStudyPreview img {display:block ; margin-bottom:20px;} .quote {float:left; width:100%; margin-bottom:40px;} .quote p {color:#00708c; margin-bottom:20px; font-size:20px;} .quote p.name {color:#646877; font-weight:bold; text-transform:uppercase; font-size:20px;} @media only screen and (min-width: 768px) { .caseStudyPreview h2 {font-size:30px;} } @media only screen and (min-width: 1024px) { .caseStudy {width:65%;} .quote p {font-size:25px;} .quote {float:right; width:30%; margin:200px 0 0 0;} } /*#14. News#*/ #news {background-image:url(assets/background-news.png); background-repeat:repeat-x; background-position:top; background-size:auto 100px;} .newsPreview {float:left; width:100%; margin-bottom:100px;} .newsPreview .image {width:100%; height:165px; background-size:cover; background-position: center center; margin-bottom:20px;} .newsPreview .image a {display:block; width:100%; height:165px;} .newsPreview h3 {background-image:none; color:#1b1e29; font-size:25px;} .newsPreview:first-child {margin-top:-40px;} .news {float:left; width:100%;} .news .image {width:100%; height:282px; background-size:cover; background-position: center center; margin-bottom:40px; margin-top:-40px;} .news .copy h1 {font-weight:300; font-size:30px;} @media only screen and (min-width: 768px) { .newsPreview {float:left; width:45%; margin-left:10%;} .newsPreview:nth-child(2n+1) {clear:left; margin-left:0%;} .newsPreview:first-child {margin-top:0px;} .newsPreview .image {height:200px;} .newsPreview .image a {height:200px;} .news .image {width:100%; height:460px;} } @media only screen and (min-width: 1024px) { .newsPreview {width:30%; margin-left:5%;} .newsPreview:nth-child(2n+1) {clear:none; margin-left:5%;} .newsPreview:nth-child(3n+1) {clear:left; margin-left:0%;} .news .image {width:80%;} } /* PAGER */ .pager {float:left; font-family:"Lato",sans-serif; color:#646877; font-weight:600; font-size:26px; float:left; width:100%;} .pager ul li {float:left; text-align:center;} .pager ul li span {display:inline-block;} .pager ul li span.current {color:#fff; background-color:#646877; font-weight:600; height:40px; width:40px; padding-top:3px; font-family:"Lato",sans-serif; color:#fff; } .pager ul li a {font-family:"Lato",sans-serif; color:#646877; font-weight:600; font-size:26px; height:40px; width:40px; display:inline-block; padding-top:3px;} .pager ul li a.next {background-image:url(assets/pagerNextPage.png); background-position:center center; display:inline-block; width:25px; height:40px; margin-left: -6px; background-color: #fff;} .pager ul li a.prev {background-image:url(assets/pagerPreviousPage.png); background-position:center center; display:inline-block; width:25px; height:40px; } .pager a.page {border-right:1px solid #49afe2;} /*#15. What We Do#*/ .overview.copy h4 {font-weight:bold;} .overview.copy.active {display:block;} .overview.copy {display:none;width:65%; } #processLinks span {color:#fff;} @media only screen and (max-width: 767px) { .overview.copy {width:100%;} #processLinks {float:left; width:2000px; margin-bottom:40px;} #processLinks .processLink {cursor:pointer; position:relative; border-right:5px solid #adacb5; float:left; display:block; width:220px; height:220px; padding-top:98px; background-color:#878894; color:#fff; text-align:center; font-size:20px; font-family:"Lato",sans-serif;} #processLinks .arrowRight {position:absolute; right:-20px; top:90px; width:0px; height:0px; border-top:20px solid transparent; border-bottom:20px solid transparent; border-left:20px solid #878894;} #processLinks .arrowRightBack {position:absolute; right:-26px; top:84px; width:0px; height:0px; border-top:26px solid transparent; border-bottom:26px solid transparent; border-left:26px solid #adacb5;} #processLinks .processLink:nth-child(6) .arrowRight {display:none;} #processLinks .processLink:nth-child(6) .arrowRightBack {display:none;} #processLinks .processLink:first-child {margin-left:0px;} #processLinks .processLink:nth-child(1) {z-index:6;} #processLinks .processLink:nth-child(2) {z-index:5;} #processLinks .processLink:nth-child(3) {z-index:4;} #processLinks .processLink:nth-child(4) {z-index:3;} #processLinks .processLink:nth-child(5) {z-index:2;} #processLinks .processLink:nth-child(6) {z-index:1;} #processLinks .processLink.active, #processLinks .processLink:hover {background-color:#00708c;} #processLinks .processLink:nth-child(1).active .arrowRight, #processLinks .processLink:nth-child(1):hover .arrowRight {border-left-color:#00708c;} #processLinks .processLink:nth-child(2).active .arrowRight, #processLinks .processLink:nth-child(2):hover .arrowRight {border-left-color:#00708c;} #processLinks .processLink:nth-child(3).active .arrowRight, #processLinks .processLink:nth-child(3):hover .arrowRight {border-left-color:#00708c;} #processLinks .processLink:nth-child(4).active .arrowRight, #processLinks .processLink:nth-child(4):hover .arrowRight {border-left-color:#00708c;} #processLinks .processLink:nth-child(5).active .arrowRight, #processLinks .processLink:nth-child(5):hover .arrowRight {border-left-color:#00708c;} #processLinks.position0 {margin-left:0px; transition: 1s;} #processLinks.position1 {margin-left:-220px; transition: 1s;} #processLinks.position2 {margin-left:-440px; transition: 1s;} #processLinks.position3 {margin-left:-660px; transition: 1s;} #processLinks.position4 {margin-left:-880px; transition: 1s;} #processLinks.position5 {margin-left:-1100px; transition: 1s;} } @media only screen and (min-width: 768px) and (max-width:1023px) { #processLinks {float:left; width:650px; margin-bottom:80px;} #processLinks .processLink {cursor:pointer; margin-left:-5px;position:relative; border-right:5px solid #adacb5; float:left; display:block; width:220px; height:220px; padding-top:98px; background-color:#878894; color:#fff; text-align:center; font-size:20px; font-family:"Lato",sans-serif;} #processLinks .processLink:nth-child(-n+2) .arrowRight {position:absolute; right:-20px; top:90px; width:0px; height:0px; border-top:20px solid transparent; border-bottom:20px solid transparent; border-left:20px solid #878894;} #processLinks .processLink:nth-child(-n+2) .arrowRightBack {position:absolute; right:-26px; top:84px; width:0px; height:0px; border-top:26px solid transparent; border-bottom:26px solid transparent; border-left:26px solid #adacb5;} #processLinks .processLink:nth-child(3) .arrowRight {position:absolute; left:90px; bottom:-20px; width:0px; height:0px; border-left:20px solid transparent; border-right:20px solid transparent; border-top:20px solid #878894;} #processLinks .processLink:nth-child(3) .arrowRightBack {position:absolute; left:84px; bottom:-26px; width:0px; height:0px; border-left:26px solid transparent; border-right:26px solid transparent; border-top:26px solid #adacb5;} #processLinks .processLink:nth-child(4) .arrowRight, #processLinks .processLink:nth-child(5) .arrowRight {position:absolute; left:-20px; top:90px; width:0px; height:0px; border-top:20px solid transparent; border-bottom:20px solid transparent; border-right:20px solid #878894;} #processLinks .processLink:nth-child(4) .arrowRightBack, #processLinks .processLink:nth-child(5) .arrowRightBack {position:absolute; left:-26px; top:84px; width:0px; height:0px; border-top:26px solid transparent; border-bottom:26px solid transparent; border-right:26px solid #adacb5;} #processLinks .processLink:first-child {margin-left:0px;} #processLinks .processLink:nth-child(1) {z-index:6; border-bottom:5px solid #adacb5;} #processLinks .processLink:nth-child(2) {z-index:5; border-bottom:5px solid #adacb5;} #processLinks .processLink:nth-child(3) {z-index:4; border-bottom:5px solid #adacb5;} #processLinks .processLink:nth-child(4) {z-index:3; float:right; margin-left:0px; width:215px;} #processLinks .processLink:nth-child(5) {z-index:2; float:right; margin-left:0px; width:215px;} #processLinks .processLink:nth-child(6) {z-index:1; float:right; margin-left:0px;} #processLinks .processLink.active, #processLinks .processLink:hover {background-color:#00708c;} #processLinks .processLink:nth-child(1).active .arrowRight, #processLinks .processLink:nth-child(1):hover .arrowRight {border-left-color:#00708c;} #processLinks .processLink:nth-child(2).active .arrowRight, #processLinks .processLink:nth-child(2):hover .arrowRight {border-left-color:#00708c;} #processLinks .processLink:nth-child(3).active .arrowRight, #processLinks .processLink:nth-child(3):hover .arrowRight {border-top-color:#00708c;} #processLinks .processLink:nth-child(4).active .arrowRight, #processLinks .processLink:nth-child(4):hover .arrowRight {border-right-color:#00708c;} #processLinks .processLink:nth-child(5).active .arrowRight, #processLinks .processLink:nth-child(5):hover .arrowRight {border-right-color:#00708c;} } @media only screen and (min-width: 1024px) { #processLinks {float:left; width:100%; margin:80px 0 80px 45px;} #processLinks .processLink {cursor:pointer; transform: rotate(45deg); position:relative; float:left; display:block; width:170px; height:170px; padding-top:77px; background-color:#878894; color:#fff; text-align:center; font-size:16px; font-family:"Lato",sans-serif;} #processLinks .processLink span {display:block; transform: rotate(-45deg);} #processLinks .processLink:nth-child(2) {margin:125px 0 0 -45px;} #processLinks .processLink:nth-child(3) {margin:0 0 0 -45px;} #processLinks .processLink:nth-child(4) {margin:125px 0 0 -45px;} #processLinks .processLink:nth-child(5) {margin:0 0 0 -45px;} #processLinks .processLink:nth-child(6) {margin:125px 0 0 -45px;} #processLinks .processLink:nth-child(1) .arrowRight, #processLinks .processLink:nth-child(3) .arrowRight, #processLinks .processLink:nth-child(5) .arrowRight {position:absolute; right:-19px; top:65px; width:0px; height:0px; border-top:20px solid transparent; border-bottom:20px solid transparent; border-left:20px solid #878894;} #processLinks .processLink:nth-child(1) .arrowRightBack, #processLinks .processLink:nth-child(3) .arrowRightBack, #processLinks .processLink:nth-child(5) .arrowRightBack {position:absolute; right:-26px; top:59px; width:0px; height:0px; border-top:26px solid transparent; border-bottom:26px solid transparent; border-left:26px solid #adacb5;} #processLinks .processLink:nth-child(2) .arrowRight, #processLinks .processLink:nth-child(4) .arrowRight {position:absolute; right:65px; top:-19px; width:0px; height:0px; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid #878894;} #processLinks .processLink:nth-child(2) .arrowRightBack, #processLinks .processLink:nth-child(4) .arrowRightBack {position:absolute; right:59px; top:-26px; width:0px; height:0px; border-left:26px solid transparent; border-right:26px solid transparent; border-bottom:26px solid #adacb5;} #processLinks .processLink:nth-child(1) {z-index:6;} #processLinks .processLink:nth-child(2) {z-index:5;} #processLinks .processLink:nth-child(3) {z-index:4;} #processLinks .processLink:nth-child(4) {z-index:3;} #processLinks .processLink:nth-child(5) {z-index:2;} #processLinks .processLink:nth-child(6) {z-index:1;} #processLinks .processLink.active, #processLinks .processLink:hover {background-color:#00708c;} #processLinks .processLink:nth-child(1).active .arrowRight, #processLinks .processLink:nth-child(1):hover .arrowRight {border-left-color:#00708c;} #processLinks .processLink:nth-child(2).active .arrowRight, #processLinks .processLink:nth-child(2):hover .arrowRight {border-bottom-color:#00708c;} #processLinks .processLink:nth-child(3).active .arrowRight, #processLinks .processLink:nth-child(3):hover .arrowRight {border-left-color:#00708c;} #processLinks .processLink:nth-child(4).active .arrowRight, #processLinks .processLink:nth-child(4):hover .arrowRight {border-bottom-color:#00708c;} #processLinks .processLink:nth-child(5).active .arrowRight, #processLinks .processLink:nth-child(5):hover .arrowRight {border-left-color:#00708c;} } /*#16. Candidates#*/ #jobCycle {float:left; width:100%; margin-top:40px;} #jobCycle .cycle-carousel-wrap {width:100%;} .jobs {float:left; width:100%; position:relative; margin-bottom:50px;} .jobs #cyclePager span#prev {background-image:url(assets/previous-grey.png); } .jobs #cyclePager span#next {background-image:url(assets/next-grey.png); } .filled {float:left; width:100%; position:relative; margin-bottom:50px;} span#prevFilled {cursor:pointer; float:left; display:block; width:18px; height:22px; background-image:url(assets/previous-grey.png); background-position:center center; background-size:contain;} span#nextFilled {cursor:pointer; float:right; display:block; width:18px; height:22px; background-image:url(assets/next-grey.png); background-position:center center; background-size:contain;} .job {background-color:#fff; padding:20px; white-space:normal; vertical-align:top;} .job .copy {float:none;} .job .copy img {margin-bottom:20px;} .job .copy h3 {background-image:none; font-weight:bold; margin-bottom:0px; font-size:25px;} .job .copy h4 {font-size:20px;} .job .copy p.salary {color:#00708c; font-size:20px; font-weight:bold;} .job .copy p {white-space:normal;} .recent {background-color:#fff; padding:20px; white-space:normal; vertical-align:top;} .recent .copy {float:none;} .recent .copy img {margin-bottom:10px;} .recent .copy h3 {background-image:none; font-weight:bold; margin-bottom:0px; font-size:25px;} .recent .copy h4 {font-size:20px; margin-bottom:10px;} .recent .copy p.salary {color:#00708c; font-size:20px; font-weight:bold;} .recent .copy p {white-space:normal;} @media only screen and (min-width: 768px) { .jobs {margin-bottom:100px;} .job {padding:30px 50px;} .job .copy h3 {font-size:30px;} .job .copy h4 {font-size:25px;} .filled {margin-bottom:100px;} .recent {padding:30px; width:47.5%; margin-right:5%;} } @media only screen and (min-width: 1024px) { .jobs {width:80%;} .job {padding:50px 70px;} .filled {width:100%;} .recent {padding:30px; width:30%; margin-right:5%;} .recent .copy {width:100%;} } @media only screen and (min-width: 1400px) { .jobs #cyclePager {width:120%; margin-left:-10%;} .filled #cyclePager {width:120%; margin-left:-10%;} } #salarySurvey {display:block; width:100%; height:1300px;} @media only screen and (min-width: 768px) { #salarySurvey {display:block; width:500px; height:1200px;} }