* {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,li {} p, li, a, input, select, option, label, textarea, button, td, button.cky-btn, .cky-accordion-header button.cky-accordion-btn {font-family: "Montserrat", sans-serif; color:#666; font-weight:300; line-height:1.4em; font-size:18px;} span {font-family: "Montserrat", sans-serif;} h1,h2,h3, h1 a, h2 a, h3 a {font-family: "Montserrat", sans-serif; color:#666; letter-spacing:1px; line-height: 1.2em;} h4,h5,h6, h4 a, h5 a, h6 a {font-family: "Montserrat", sans-serif; color:#666; letter-spacing:1px;} 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%;} #container {position: relative; max-width: 100%; margin: 0px auto; text-align: left;} #container>main, #container>main>div, .policies, header, 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: 90%; max-width: 100%; margin:0 5%; position:relative;} .margin {min-width:320px; width: 100%; max-width: 100%; float:left; position:relative; padding:40px 0;} .marginTop {min-width:320px; width: 100%; max-width: 100%; float:left; position:relative; padding:40px 0 0 0;} @media only screen and (min-width: 768px) { .margin {padding:50px 0;} .marginTop {padding:50px 0 0 0;} } @media only screen and (min-width: 1024px) { .margin {padding:75px 0;} .marginTop {padding:75px 0 0 0;} } main.scantrainer {background-image:url("/wp-content/themes/gx/assets/scantrainer.jpg"); background-position:bottom center; background-size:80%; padding-bottom:60%;} @media only screen and (min-width: 768px) { main.scantrainer {padding-bottom:400px;} } @media only screen and (min-width: 1024px) { main.scantrainer {background-size:700px; background-position:bottom left 30%; padding-bottom:340px;} } .grey {background-color:#eee;} .lightGreen {background-color:#ecf6f3;} .greyTop:before {display:block; content:''; position:absolute; width:100%; height:300px; background-color:#eee; top:0px;} .orange {background:linear-gradient(45deg, #d2232e 0%,#de931f 100%);} .yellow {background:linear-gradient(45deg, #DD851B 0%,#E3BA12 100%);} .green {background:linear-gradient(45deg, #82b040 0%,#ccb724 100%);} .blue {background:linear-gradient(45deg, #068cbf 0%,#6d5474 100%);} .darkGreen {background:linear-gradient(45deg, #008dc1 0%,#63a761 100%);} .copy {margin-bottom:30px;} .copy p {margin-bottom:30px;} .copy p strong {font-weight:700;} .copy p a {color:#3a9c87;} .copy p a:hover {text-decoration:underline;} .copy ul {list-style-type:disc; margin-bottom:15px; margin-left:20px;} .copy ul li {margin-bottom:5px;} .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 a {color:#fff;} .copy.white li {color:#fff;} .copy.first p:first-of-type {font-size:25px;} .copy:last-child, .copy p:last-child {margin-bottom:0px;} .copy h1 {color:#3a9c87; font-size:35px; font-weight:300;} .copy h2 {color:#3a9c87; font-size:30px; font-weight:700; margin-bottom:30px;} .copy h3 {color:#3a9c87; font-size:25px; font-weight:700; margin-bottom:30px;} .copy.left {float:left; width:100%;} .copy.right {float:right; width:100%;} .copy.quarter {float:left; width:100%; position:relative;} .quarters {display:flex; flex-wrap:wrap;} .quarter.service {padding:30px 25px 50px 30px;} .quarter.service a {position:absolute; bottom:20px; left:20px;} .cta p {color:#3a9c87; font-size:25px;} .cta p a {font-size:25px;} @media only screen and (min-width: 768px) { .copy.left {width:47.5%;} .copy.right {width:47.5%;} .copy h1 {font-size:45px;} .copy h2 {font-size:40px;} .copy.quarter {width:47.5%; margin-left:5%; margin-bottom:5%;} .copy.quarter:nth-child(2n+1) {clear:left; margin-left:0;} .copy.quarter:last-child, .copy.quarter:nth-last-child(2) {margin-bottom:0px;} .copy .cta {margin-top:50px;} } @media only screen and (min-width: 1024px) { .copy h1 {font-size:60px;} .copy .cta {width:60%;} } @media only screen and (min-width: 1280px) { .copy.quarter {width:23%; margin-left:2.6666%; margin-bottom:0px;} .copy.quarter:first-child {width:21%; margin-right:2%;} .copy.quarter:nth-child(2n+1) {clear:none; margin-left:2.6666%;} .copy.quarter:nth-child(4n+1) {clear:left; margin-left:0;} } .copy a.button {color:#666; border:1px solid #666; font-size:16px; font-weight:300; border-radius:30px; padding:6px 40px 6px 17px; display:inline-block; background-image:url("/wp-content/themes/gx/assets/button-arrow-grey.png"); background-position:right 20px top 13px;} .copy a.button:hover {text-decoration:none; background-color:#3a9c87; color:#fff; background-image:url("/wp-content/themes/gx/assets/button-arrow.png"); background-position:right 15px top 10px ; transition:background-position 0.2s ease;} .copy.white a.button {color:#fff; border:1px solid #FFF; font-size:16px; font-weight:300; border-radius:30px; padding:6px 40px 6px 17px; display:inline-block; background-image:url("/wp-content/themes/gx/assets/button-arrow.png"); background-position:right 20px top 13px; transition:background-position 0.2s ease;} .copy.white a.button:hover {text-decoration:none; background-color:#3a9c87; background-position:right 15px top 10px ; transition:background-position 0.2s ease;} a.buttonGreen {color:#fff; font-size:16px; font-weight:300; background-color:#3a9c87; border-radius:30px; padding:6px 40px 6px 17px; display:inline-block; background-image:url("/wp-content/themes/gx/assets/button-arrow.png"); background-position:right 20px center; transition:background-position 0.2s ease;} a.buttonGreen:hover {text-decoration:none; background-color:#666; background-position:right 15px top 10px ; transition:background-position 0.2s ease;} .copy a.buttonGreen {color:#fff; font-size:16px; font-weight:300; background-color:#3a9c87; border-radius:30px; padding:6px 40px 6px 17px; display:inline-block; background-image:url("/wp-content/themes/gx/assets/button-arrow.png"); background-position:right 20px center; transition:background-position 0.2s ease;} .copy a.buttonGreen:hover {text-decoration:none; background-color:#666; background-position:right 15px top 10px ; transition:background-position 0.2s ease;} header {position:absolute; height:105px; z-index:10;} header a.logo {float:left; background-image:url("/wp-content/themes/gx/assets/gx-logo-large.png"); display:block; width:170px; height:59px; background-size:contain; margin-top:24px; } .policies {background-color:#666666; padding:39px 0 30px 0; background-image:url("/wp-content/themes/gx/assets/color-band.png"); background-repeat:no-repeat; background-size:100% 9px;} .policies p {float:left; font-weight:bold; margin-bottom:0px; font-size:16px;} .policies .copy ul {float:left; list-style-type:none; margin-bottom:0px; margin-left:0px;} .policies .copy ul li {float:left; padding-right:30px;margin-bottom:0px; } .policies .copy ul li a {font-size:16px;} @media only screen and (min-width: 768px) { .policies p {width:30%; margin-right:5%;} .policies .copy ul {width:65%;} header a.logo {width:170px; height:59px; margin-top:34px; } } @media only screen and (min-width: 1024px) { .policies p {width:20%; margin-right:5%;} .policies .copy ul {width:75%;} } @media only screen and (min-width: 1280px) { .policies p {width:15%; margin-right:5%;} .policies .copy ul {width:80%; margin-left:0px;} } footer {background-color:#e4e4e4;} footer .footerButton {float:left; margin-bottom:30px; width:100%;} footer .footerCopy {float:left; margin-bottom:50px; width:100%;} footer .footerCopy p {font-size:20px;} footer .footerLogo {float:left; width:100%; margin-bottom:50px;} footer .footerLogo a.logo {float:left; background-image:url("/wp-content/themes/gx/assets/gx-logo-large.png"); display:block; width:170px; height:59px; background-size:contain; } footer .footerButton {float:left; width:100%;} footer .accreditations {float:left; width:100%;} footer .accreditations ul {display:flex; flex-wrap: wrap; align-items: center;} footer .accreditations li {float:left; margin-right:20px; margin-bottom:10px; } @media only screen and (min-width: 768px) { footer .footerButton {width:30%; margin-right:5%;} footer .footerCopy {width:65%; margin-bottom:80px;} } @media only screen and (min-width: 1024px) { footer .footerButton {width:20%; margin-right:5%;} footer .footerCopy {width:75%;} footer .footerCopy .left {float:left; width:47.5%;} footer .footerCopy .right {float:right; width:47.5%;} footer .footerLogo {width:20%; margin-right:5%;} footer .accreditations {width:75%;} } @media only screen and (min-width: 1280px) { footer .footerButton {width:15%; margin-right:5%;} footer .footerCopy {width:80%;} footer .footerLogo {width:15%; margin-right:5%;} footer .accreditations {width:80%;} } .service {padding:30px 25px;} .sectorsMenu {float:left; width:100%;} .sectorsMenu a {position:relative; float:left; display:block; width:100%; font-size:25px; color:#000; font-weight:400; padding-left:79px; height:59px; line-height:59px; margin-top:30px; padding-right:30px;} .sectorsMenu a img {margin-left:10px; position:relative; top:0px; transition:0.3s;} .sectorsMenu a:hover img {margin-left:15px; top:-5px; transition:0.3s;} .sectorsMenu a:hover { color:#666;} @media only screen and (min-width: 768px) { .sectorsMenu a {width:50%;} } @media only screen and (min-width: 1280px) { .sectorsMenu a {width:25%;} } @keyframes fadeIn {0% {opacity: 0;} 50% {opacity: 0;} 100% {opacity: 1;}} .caseStudyPreviews {float:left; width:100%; margin-top:30px;} .caseStudyPreview {position:relative; float:left; width:100%; padding-bottom:100%; margin-bottom:5%; } .caseStudyPreview a {position:absolute; width:100%; height:100%; z-index:8; } .caseStudyPreviewImage {position:absolute; width:100%; height:100%; z-index:2; background-size:cover; background-position:center center;} .caseStudyPreview .fader {position:absolute; width:100%; height:100%; z-index:4; transition:opacity 0.5s; opacity:0;} .caseStudyPreview:hover .fader {transition:opacity 0.5s; opacity:0.8;} .caseStudyPreview .copy {display:none; position:absolute; width:100%; height:100%; padding:20px; z-index:6;} .caseStudyPreview:hover .copy {display:block; animation-name: fadeIn; animation-duration: 0.5s;} .caseStudyPreview .copy h3 {color:#fff; font-weight:bold; font-size:20px; margin-bottom:20px;} .caseStudyPreview .copy p {color:#fff; font-weight:500; font-size:20px;} .caseStudyPreview:nth-child(1), .caseStudyPreview:nth-child(10), .caseStudyPreview:nth-child(13) {background:linear-gradient(45deg, #008dc1 0%,#63a761 100%);} .caseStudyPreview:nth-child(2), .caseStudyPreview:nth-child(6), .caseStudyPreview:nth-child(16) {background:linear-gradient(45deg, #DD851B 0%,#E3BA12 100%);} .caseStudyPreview:nth-child(3), .caseStudyPreview:nth-child(7), .caseStudyPreview:nth-child(12), .caseStudyPreview:nth-child(17) {background:linear-gradient(45deg, #d2232e 0%,#de931f 100%);} .caseStudyPreview:nth-child(4), .caseStudyPreview:nth-child(8), .caseStudyPreview:nth-child(11), .caseStudyPreview:nth-child(14) {background:linear-gradient(45deg, #068cbf 0%,#6d5474 100%);} .caseStudyPreview:nth-child(5), .caseStudyPreview:nth-child(9), .caseStudyPreview:nth-child(15) {background:linear-gradient(45deg, #82b040 0%,#ccb724 100%);} .caseStudyPreview:nth-child(1):hover .fader, .caseStudyPreview:nth-child(10):hover .fader, .caseStudyPreview:nth-child(13):hover .fader {background:linear-gradient(45deg, #008dc1 0%,#63a761 100%);} .caseStudyPreview:nth-child(2):hover .fader, .caseStudyPreview:nth-child(6):hover .fader, .caseStudyPreview:nth-child(16):hover .fader {background:linear-gradient(45deg, #DD851B 0%,#E3BA12 100%);} .caseStudyPreview:nth-child(3):hover .fader, .caseStudyPreview:nth-child(7):hover .fader, .caseStudyPreview:nth-child(12):hover .fader, .caseStudyPreview:nth-child(17):hover .fader {background:linear-gradient(45deg, #d2232e 0%,#de931f 100%);} .caseStudyPreview:nth-child(4):hover .fader, .caseStudyPreview:nth-child(8):hover .fader, .caseStudyPreview:nth-child(11):hover .fader, .caseStudyPreview:nth-child(14):hover .fader {background:linear-gradient(45deg, #068cbf 0%,#6d5474 100%);} .caseStudyPreview:nth-child(5):hover .fader, .caseStudyPreview:nth-child(9):hover .fader, .caseStudyPreview:nth-child(15):hover .fader {background:linear-gradient(45deg, #82b040 0%,#ccb724 100%);} @media only screen and (min-width: 640px) { .caseStudyPreview .copy {padding:30px; width:60%;} .caseStudyPreview:nth-child(1) {width:100%;} .caseStudyPreview:nth-child(2) {width:47.5%; padding-bottom:47.5%;} .caseStudyPreview:nth-child(2) .copy {width:100%;} .caseStudyPreview:nth-child(3) {float:right; width:47.5%; padding-bottom:47.5%;} .caseStudyPreview:nth-child(3) .copy {width:100%;} .caseStudyPreview:nth-child(4) {width:47.5%; padding-bottom:47.5%;} .caseStudyPreview:nth-child(4) .copy {width:100%;} .caseStudyPreview:nth-child(5) {float:right; width:47.5%; padding-bottom:47.5%;} .caseStudyPreview:nth-child(5) .copy {width:100%;} .caseStudyPreview:nth-child(6) {width:100%;} .caseStudyPreview:nth-child(7) {width:47.5%; padding-bottom:47.5%;} .caseStudyPreview:nth-child(7) .copy {width:100%;} .caseStudyPreview:nth-child(8) {float:right; width:47.5%; padding-bottom:47.5%;} .caseStudyPreview:nth-child(8) .copy {width:100%;} .caseStudyPreview:nth-child(9) {width:47.5%; padding-bottom:47.5%;} .caseStudyPreview:nth-child(9) .copy {width:100%;} .caseStudyPreview:nth-child(10) {float:right; width:47.5%; padding-bottom:47.5%;} .caseStudyPreview:nth-child(10) .copy {width:100%;} .caseStudyPreview:nth-child(11) {float:right; width:47.5%; padding-bottom:47.5%;} .caseStudyPreview:nth-child(11) .copy {width:100%;} .caseStudyPreview:nth-child(12) {width:47.5%; padding-bottom:47.5%;} .caseStudyPreview:nth-child(12) .copy {width:100%;} .caseStudyPreview:nth-child(13) {width:100%;} .caseStudyPreview:nth-child(14) {width:47.5%; padding-bottom:47.5%;} .caseStudyPreview:nth-child(14) .copy {width:100%;} .caseStudyPreview:nth-child(15) {float:right; width:47.5%; padding-bottom:47.5%;} .caseStudyPreview:nth-child(15) .copy {width:100%;} .caseStudyPreview:nth-child(16) {width:47.5%; padding-bottom:47.5%;} .caseStudyPreview:nth-child(16) .copy {width:100%;} .caseStudyPreview:nth-child(17) {float:right; width:47.5%; padding-bottom:47.5%;} .caseStudyPreview:nth-child(17) .copy {width:100%;} } @media only screen and (min-width: 900px) { .caseStudyPreview .copy {padding:30px; width:60%;} .caseStudyPreview {margin-bottom:3%;} .caseStudyPreview:nth-child(1) {float:left; width:65.66%; padding-bottom:65.66%;} .caseStudyPreview:nth-child(2) {float:right; width:31.33%; padding-bottom:31.33%;} .caseStudyPreview:nth-child(3) {float:right; width:31.33%; padding-bottom:31.33%;} .caseStudyPreview:nth-child(4) {float:left; clear:both; width:31.33%; padding-bottom:31.33%;} .caseStudyPreview:nth-child(5) {float:right; width:65.66%; padding-bottom:31.33%;} .caseStudyPreview:nth-child(6) {float:left; width:65.66%; padding-bottom:31.33%;} .caseStudyPreview:nth-child(7) {float:right; width:31.33%; padding-bottom:31.33%;} .caseStudyPreview:nth-child(8) {float:left; width:31.33%; padding-bottom:31.33%;} .caseStudyPreview:nth-child(9) {float:right; width:65.66%; padding-bottom:65.66%;} .caseStudyPreview:nth-child(10) {float:left; width:31.33%; padding-bottom:31.33%;} .caseStudyPreview:nth-child(11) {float:left; width:65.66%; padding-bottom:31.33%;} .caseStudyPreview:nth-child(12) {float:right; width:31.33%; padding-bottom:31.33%;} .caseStudyPreview:nth-child(13) {float:left; width:65.66%; padding-bottom:65.66%;} .caseStudyPreview:nth-child(14) {float:right; width:31.33%; padding-bottom:31.33%;} .caseStudyPreview:nth-child(15) {float:right; width:31.33%; padding-bottom:31.33%;} .caseStudyPreview:nth-child(16) {float:left; clear:both; width:31.33%; padding-bottom:31.33%;} .caseStudyPreview:nth-child(17) {float:right; width:65.66%; padding-bottom:31.33%;} } @media only screen and (min-width: 1280px) { .caseStudyPreview .copy {padding:30px; width:60%;} .caseStudyPreview {margin-bottom:2%;} .caseStudyPreview:nth-child(1) {width:49%; padding-bottom:49%; margin-right:2%;} .caseStudyPreview:nth-child(2) {float:left; width:23.5%; padding-bottom:23.5%;} .caseStudyPreview:nth-child(3) {float:right; width:23.5%; padding-bottom:23.5%;} .caseStudyPreview:nth-child(4) {float:left; clear:none; width:23.5%; padding-bottom:23.5%;} .caseStudyPreview:nth-child(5) {float:right; width:23.5%; padding-bottom:23.5%;} .caseStudyPreview:nth-child(6) {float:left; width:49%; padding-bottom:23.5%; clear:left;} .caseStudyPreview:nth-child(7) {float:right; width:49%; padding-bottom:49%;} .caseStudyPreview:nth-child(8) {float:left; width:23.5%; padding-bottom:23.5%; margin-right:2%;} .caseStudyPreview:nth-child(9) {float:left; width:23.5%; padding-bottom:23.5%;} .caseStudyPreview:nth-child(10) {float:left; width:23.5%; padding-bottom:23.5%; margin-right:2%;} .caseStudyPreview:nth-child(11) {float:left; width:23.5%; padding-bottom:23.5%;} .caseStudyPreview:nth-child(12) {float:right; width:49%; padding-bottom:23.5%;} .caseStudyPreview:nth-child(13) {width:49%; padding-bottom:49%; margin-right:2%;} .caseStudyPreview:nth-child(14) {float:left; width:23.5%; padding-bottom:23.5%;} .caseStudyPreview:nth-child(15) {float:right; width:23.5%; padding-bottom:23.5%;} .caseStudyPreview:nth-child(16) {float:left; clear:none; width:23.5%; padding-bottom:23.5%;} .caseStudyPreview:nth-child(17) {float:right; width:23.5%; padding-bottom:23.5%;} } .clients {float:left; width:100%; margin-top:20px;} .clients .cycle-slideshow {width:100%; float:left;} .clients .cycle-carousel-wrap {width:100%; float:left;} .clients .client {width:50%; text-align:center;} .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%;} } .counters {} .counters .stat {float:left; width:100%; margin-bottom:20px;} .counters .stat:last-child {margin-bottom:0px;} .counters .stat h4 {color:#3a9c87; font-size:80px; font-weight:300;} .counters .stat h4 span {color:#3a9c87; font-size:80px; font-weight:300;} .counters .stat p {font-size:25px; font-weight:bold;} @media only screen and (min-width: 768px) { .counters .stat {width:50%;} .counters .stat:nth-last-child(2) {margin-bottom:0px;} } @media only screen and (min-width: 1024px) { .counters .stat {width:25%; margin-bottom:0px;} } %;} .testimonialSlider .cycle-slideshow {float:left; width:100%;} .testimonial p {font-size:30px; font-weight:300;} .testimonial h5 {color:#3a9c87; font-size:24px; font-weight:500;} .testimonial .image { float:left; width:100%;} .testimonial .image img {width:100%;} @media only screen and (min-width: 768px) { .testimonial p {font-size:40px;} .testimonial {} .testimonial .image {width:70%; float:right;} } @media only screen and (min-width: 1024px) { .testimonials {width:25%; float:left;} .testimonialSlider {float:right; width:70%;} .testimonial {} } /* ----- PAGE - CASE STUDY ----- */ .copy p.overview {color:#3a9c87; font-size:30px; font-weight:300;} .filters {float:left; width:100%;} .filters .filter {float:left; width:100%; margin-bottom:30px;} .filters .filter label {float:left; margin-right:30px; margin-bottom:5px; line-height:36px;} .filters .filter select {clear:left; float:left; border:1px solid #666; padding:5px 10px; border-radius:20px;} @media only screen and (min-width: 768px) { .copy p.overview {font-size:40px; } .filters .filter {float:left; width:50%;} } @media only screen and (min-width: 1024px) { .copy p.overview {font-size:45px; } .filters .filter select {clear:none;} } /* ----- BANNER ----- */ #bannerShort {height:110px; background:linear-gradient(45deg, #008dc1 0%,#63a761 100%);} #bannerShortBlank {height:110px; z-index:3;} #banner {height:500px; background-size:cover; background-position:center center; position:relative; z-index:1;} #banner.sector:after {display:block; width:100%; height:500px; content:''; background-color:rgba(58,156,135,0.6);} #banner.caseStudy { background-position:center right 20%;} #banner.caseStudy:after {display:block; width:100%; height:500px; content:''; background-color:rgba(58,156,135,0.6);} #banner .content {height:500px; display: flex; align-items: center; } #banner .content .message h1 {color:#fff; font-size:30px; font-weight:300; margin-bottom:60px;} #banner .content img.icon {margin-bottom:50px;} @media only screen and (min-width: 768px) { #banner.sector:after {display:none;} #banner.caseStudy:after {display:none;} #banner.caseStudy { background-position:center center;} #banner {height:700px;} #banner .content .message {width:75%;} #banner .content .message h1 {font-size:45px; margin-bottom:0px;} #banner {height:700px;} #banner .content {height:700px;} } @media only screen and (min-width: 1280px) { #banner {height:800px;} #banner .content {height:800px;} #banner .content .message {width:60%;} #banner .content .message h1 {font-size:55px;} } /* ----- CHANGEMAKERS PANEL ----- */ .changemakers.copy p {color:#3a9c87; font-size:25px;} .changemakers.copy p a {color:#3a9c87; font-size:25px;} .changemakers.copy p a.buttonGreen {color:#fff; font-size:18px;} .changemakers.copy img {margin:20px 0; } @media only screen and (min-width: 768px) { .changemakers.copy img {position:absolute; margin-left:-100px; margin-top:38px;} } /* ----- ENQUIRY PANEL ----- */ #container div.wpforms-container .wpforms-form input[type=text] {background-color:transparent; border:0px; border-bottom:1px solid #666666; padding:10px 10px 10px 0; border-radius:0px; font-family: "Montserrat", sans-serif; font-size:18px; font-weight:300; color:#666;} #container div.wpforms-container .wpforms-form input[type=email] {background-color:transparent; border:0px; border-bottom:1px solid #666666; padding:10px 10px 10px 0; border-radius:0px; font-family: "Montserrat", sans-serif; font-size:18px; font-weight:300; color:#666;} #container div.wpforms-container-full .wpforms-form textarea.wpforms-field-large {background-color:transparent; border:0px; border-bottom:1px solid #666666; padding:10px 10px 10px 0; border-radius:0px; font-family: "Montserrat", sans-serif; font-size:18px; font-weight:300; color:#666; resize:none;} #container div.wpforms-container-full .wpforms-form button[type=submit] {text-transform:lowercase; border:1px solid #666; font-size:16px; font-weight:300; border-radius:30px; padding:6px 40px 6px 17px; display:inline-block; background-image:url("/wp-content/themes/gx/assets/button-arrow-grey.png"); transition:0.3s; background-position:right 20px top 14px; font-family: "Montserrat", sans-serif; font-size:18px; font-weight:300; color:#666; background-repeat:no-repeat; background-color:#ecf6f3;} #container div.wpforms-container-full .wpforms-form button[type=submit]:hover {transition:0.3s; background-position:right 15px top 11px ; background-color:#3a9c87; background-image:url("/wp-content/themes/gx/assets/button-arrow.png");color:#fff;} #container .wpforms-field-row p {margin-bottom:0px;} #container div.wpforms-container-full .wpforms-field.wpforms-field-checkbox label {color:#666;} #container div.wpforms-container-full legend {font-family: "Montserrat", sans-serif; font-size:18px; font-weight:300; color:#666;} #container div.wpforms-container-full label {font-family: "Montserrat", sans-serif; font-size:18px; font-weight:300; color:#666;} .enquiry .content {background-image:url("/wp-content/themes/gx/assets/icon-enquiry.png"); background-position:top left; padding-top:140px;} @media only screen and (min-width: 768px) { #container .wpforms-layout-column-50 {width:47.5%; float:left;} #container .wpforms-layout-column-50:last-child { float:right;} .enquiry .content {background-position:top right; padding-top:70px;} } /* ----- PAGE - OUR PEOPLE ----- */ .teamSection {float:left; width:100%; margin-top:50px;} .teamSection .copy {float:left; width:100%;} .teamSection .team {float:left; width:100%;} .staffPreview {float:left; width:100%; margin-bottom:30px;} .staffPreview img {width:100%; margin-bottom:20px;} .staffPreview .copy {width:100%;} .staffPreview .copy p {margin-bottom:20px;} @media only screen and (min-width: 640px) { .staffPreview {width:47.5%; margin-left:5%;} .staffPreview:nth-child(2n+1) {clear:left; margin-left:0%;} } @media only screen and (min-width: 1024px) { .staffPreview {width:30%; margin-left:5%;} .staffPreview:nth-child(2n+1) {clear:none; margin-left:5%;} .staffPreview:nth-child(3n+1) {clear:left; margin-left:0%;} .teamSection.chairman .staffPreview:nth-child(2) {clear:left; margin-left:0%;} .teamSection.chairman .staffPreview:nth-child(3n+1) {clear:none; margin-left:5%;} .teamSection.chairman .staffPreview:nth-child(3n+2) {clear:left; margin-left:0%;} .teamSection.chairman .staffPreview:first-child {margin-left:0%;} } @media only screen and (min-width: 1280px) { .teamSection .copy {width:20%; margin-right:5%;} .teamSection .team {width:75%;} } /* ----- PAGE - ABOUT ----- */ .servicesEnv {z-index:2;} .environmental {background-image:url("/wp-content/themes/gx/assets/gx-environmental.jpg"); background-size:cover; background-position:center center; padding:120px 0 200px 0; margin-top:-60px;z-index:1; } /* ----- PAGE - CAREERS ----- */ .careers {float:left; width:100%;} .career {float:left; width:100%; border-bottom:1px solid #666; padding-bottom:50px; margin-bottom:50px;} .career:last-child {padding-bottom:0px; margin-bottom:0px; border-bottom:0px;} @media only screen and (min-width: 768px) { .career {width:47.5%;} .career:nth-child(odd) {clear:left;} .career:nth-child(even) {float:right;} .career:nth-last-child(2) {padding-bottom:0px; margin-bottom:0px; border-bottom:0px;} } /* ----- PAGE - OUR PROCESS ----- */ .stages {float:left; width:100%;} .stage {float:left; border-top:1px solid #666; padding-top:15px; position:relative;} .stage span {display:inline-block; color:#000; font-size:28px; margin-bottom:20px;} .refinement {background-image:url("/wp-content/themes/gx/assets/refinement.jpg"); background-position:right top 40px; background-size:500px; padding-top:250px;} .processImage {background-image:url("/wp-content/themes/gx/assets/product-design-process.png"); background-size: 80%; background-position:bottom; padding-bottom:60%;} @media only screen and (min-width: 768px) { .refinement {background-image:url("/wp-content/themes/gx/assets/refinement.jpg"); background-position: calc(100% - 55vw) center; background-size:auto; padding-top:75px; } .processImage {background-size:80%; padding-bottom:30%;} } @media only screen and (min-width: 1024px) { .stages {display:flex; border-right:1px solid #666;} .stage {width:14%; border-top:0px; border-left:1px solid #666; padding:0 2% 0 3%; cursor:pointer; transition: width 1s; height:700px;} .stage span {margin-bottom:100px;} .stage.active {width:30%; transition: width 1s;} .stage.active p {animation-name: fadeIn; animation-duration: 2s; } .stage.active h3 {animation-name: fadeIn; animation-duration: 2s; } .stage.inactive p {display:none; } .stage.inactive h3 {color:#000; transform:rotate(180deg); position:absolute; bottom:0px; writing-mode: vertical-rl; } .stage.inactive:hover h3 {color:#666;} .stage.inactive span {color:#000; } .stage.inactive:after {display:block; content:''; background-image:url("/wp-content/themes/gx/assets/arrow-black.png"); width:16px; height:16px; position:absolute; transition:0.3s; bottom:30px; right:30px;} .stage.inactive:hover:after {transition:0.3s; bottom:35px; right:25px;} .stage.copy {margin-bottom:0px;} } @media only screen and (min-width: 1280px) { .stages {width:75%;} } /* ----- PAGE - SECTORS----- */ .process {background-image:url("/wp-content/themes/gx/assets/process.jpg"); background-size:cover; background-position:center center; padding:120px 0; } img.whiteIcon {filter: brightness(1000%);} .sectorsMenuVert {float:left; width:100%; margin-top:40px; margin-bottom:40px;} .sectorsMenuVert a {clear:left; background-position:0 15px; border-top:1px solid #666; position:relative; float:left; width:280px; padding-top:0px; padding-left:89px; min-height:89px; line-height:1.0em; margin-bottom:0px; align-items: center; display:flex;} .sectorsMenuVert a span {float:left; font-size:22px; color:#000; font-weight:400; align-items: center; line-height:1.2em;} .sectorsMenuVert a img {margin-left:8px; transition:0.3s;} .sectorsMenuVert a:hover img {margin-left:13px; transition:0.3s;} .sectorsMenuVert a:hover span {color:#666;} @media only screen and (min-width: 768px) { .sectorsMenuVert {margin-bottom:0px; margin-top:100px;} } @media only screen and (min-width: 1280px) { } /* PAGER */ .pager {float:left; font-family: "Montserrat", sans-serif; color:#809A99; font-size:26px; float:left; width:100%;} .pager ul li {float:left; text-align:center; font-size:26px; } .pager ul li span {display:inline-block; font-size:26px; } .pager ul li span.current {color:#fff; background-color:#809A99; height:40px; width:40px; font-family: "Montserrat", sans-serif; color:#fff; } .pager ul li a {font-family: "Montserrat", sans-serif; color:#809A99; font-size:26px; height:40px; width:40px; display:inline-block; } .pager ul li a.next {background-image:url(/wp-content/themes/gx/assets/pagerNextPage.png); background-position:center center; background-repeat:no-repeat; display:inline-block; width:25px; height:40px; margin-left: -6px; background-color: #fff;} .pager ul li a.prev {background-image:url(/wp-content/themes/gx/assets/pagerPreviousPage.png); background-position:center center; background-repeat:no-repeat; display:inline-block; width:25px; height:40px; } .pager a.page {border-right:1px solid #809A99;} /* ----- PAGE - PRODUCT DESIGN SERVICES----- */ .expertiseMenu {float:left; width:100%;} .expertiseMenu a {position:relative; float:left; display:inline-block; width:100%;min-height:53px; padding-left:69px; line-height:1.0em; margin-top:30px; padding-right:30px; align-items: center; display:flex;} .expertiseMenu a span {float:left; font-size:22px; color:#000; font-weight:400; align-items: center; line-height:1.2em;} .expertiseMenu a img {margin-left:8px; transition:0.3s;} .expertiseMenu a:hover img {margin-left:13px; transition:0.3s;} .expertiseMenu a:hover span {color:#666;} @media only screen and (min-width: 768px) { .expertiseMenu a {width:50%;} .expertiseMenu a:nth-child(2n+1) {clear:left;} } @media only screen and (min-width: 1280px) { .copy.resources {width:20%;} .expertiseMenu {float:right; width:75%;} .expertiseMenu a {width:33.3333%; margin:0 0 60px 0; padding-right:3%;} .expertiseMenu a:nth-child(2n+1) {clear:none;} .expertiseMenu a:nth-child(3n+1) {clear:left;} } /* PAGE - YOUR JOURNEY */ @keyframes fadeIn {0% {opacity: 0;} 50% {opacity: 0;} 100% {opacity: 1;}} .journeys {float:left; width:100%;} .journey {float:left; padding:20px 20px 60px 20px; width:111.1111%; margin-left:-5.5555%; position:relative;} .journey img {margin-bottom:30px;} .journey span {color:#fff; position:absolute; top :20px; right:20px; font-size:28px;} .journey:nth-child(1) {background:linear-gradient(45deg, #d2232e 0%,#de931f 100%);} .journey:nth-child(2) {background:linear-gradient(45deg, #008dc1 0%,#63a761 100%);} .journey:nth-child(3) {background:linear-gradient(45deg, #82b040 0%,#ccb724 100%);} .journey:nth-child(4) {background:linear-gradient(45deg, #068cbf 0%,#6d5474 100%);} .journey:nth-child(5) {background:linear-gradient(45deg, #DD851B 0%,#E3BA12 100%);} @media only screen and (min-width: 768px) { .journey {width:100%; margin-left:0px;} } @media only screen and (min-width: 1024px) { .journeys {display:flex;} .journey {width:14%; margin-right:3%; cursor:pointer;height:600px; } .journey.active {width:32%; transition:width 1s; } .journey.active p {animation-name: fadeIn; animation-duration: 2s; } .journey.active h3 {animation-name: fadeIn; animation-duration: 2s; } .journey.active img {animation-name: fadeIn; animation-duration: 2s; } .journey.inactive p {opacity: 0; transition: 0s; } .journey.inactive h3 {color:#000; transform:rotate(180deg); position:absolute; bottom:0px; writing-mode: vertical-rl; } .journey.inactive:hover h3 {color:#666;} .journey.inactive {background:#e2e2e2; transition:width 1s; } .journey.inactive img {display:none; } .journey.inactive span {color:#000; left:20px; } .journey.inactive:after {display:block; content:''; background-image:url("/wp-content/themes/gx/assets/arrow-black.png"); width:16px; height:16px; position:absolute; bottom:30px; right:20px; transition:0.3s;} .journey.inactive:hover:after {bottom:35px; right:15px; transition:0.3s;} .journey:last-child {margin-right:0;} .journey.copy {margin-bottom:0px;} } @media only screen and (min-width: 1280px) { .journeys {width:75%;} } /* NEWS */ .newsPreviews {float:left; width:100%;} .newsPreview {float:left; width:100%; margin-bottom:50px; padding-bottom:50px; border-bottom:1px solid #666;} .newsImage {float:left; width:100%; height:250px; background-size:cover; background-position:center center; margin-bottom:20px;} .newsPreview .copy span {margin-bottom:30px; font-size:16px; display:inline-block;} .newsPreview .copy h3 {margin-bottom:20px;} .news img {width:100%;} .news span.date {display:inline-block; margin-bottom:50px; font-size:18px;} @media only screen and (min-width: 768px) { .newsPreviews {margin-top:80px;} .newsImage {width:35%;} .newsPreview .copy {float:right; width:60%;} } @media only screen and (min-width: 1024px) { .newsPreview {margin-bottom:80px; padding-bottom:80px;} .newsImage {height:390px; width:42%; } .newsPreview .copy {width:50%;} } /* CONTACT */ #gMap {float: left; width: 100%; height: 800px;} /* ---- TIMELINE ---- */ #timeline .slideDetail .slideTop .textColumn .quote a.button {border:1px solid #666; font-size:16px; font-weight:300; border-radius:30px; padding:6px 40px 6px 17px; display:inline-block; background-image:url("/wp-content/themes/gx/assets/button-arrow-grey.png"); background-position:right 20px center;} @media only screen and (min-width: 768px) { #timeline {margin-top:-110px; z-index:2; } #timeline #cycle-1>img {position:absolute; top:-30px; left:132px;} #timeline #cycle-1 {z-index:140; position:absolute; width:100%; height:136px; padding:0 80px; top:154px; background-color:rgba(255,255,255,0.5);} #timeline #cycle-1 .cycle-slideshow {width:100%; padding-bottom: 30px;} #timeline #cycle-1 .slide {width:140px; height:136px; border-left:1px solid #ffffff; margin-top:20px; padding:0 20px;} #timeline #cycle-1 .slide.noBorder {border-left:none;} #timeline #cycle-1 .slide img {float:left; margin-bottom:28px; opacity: 0.5; filter: alpha(opacity=50);} #timeline #cycle-1 .slide.cycle-slide-active img { opacity: 1; filter: alpha(opacity=100);} #timeline #cycle-1 .slide .date {float:left; color:#ffffff; font-family: "Montserrat", sans-serif; clear:left; font-size:13px; font-weight:bold;} #timeline #cycle-1 #scroll {} #timeline #cycle-1 #scroll .cycle-prev {width:80px; height:136px; position:absolute; left:0px; background-image:url("/wp-content/themes/gx/assets/cycle-left.png"); background-position:center center;} #timeline #cycle-1 #scroll .cycle-prev:hover {cursor:pointer;} #timeline #cycle-1 #scroll .cycle-next {width:80px; height:136px; position:absolute; right:0px; background-image:url("/wp-content/themes/gx/assets/cycle-right.png"); background-position:center center; } #timeline #cycle-1 #scroll .cycle-next:hover {cursor:pointer;} #timeline #cycle-2 {width:100%; height:700px;} #timeline #cycle-2 .slideDetail {width:100%;} #timeline #cycle-2 .cycle-slideshow {padding-bottom:20px;} #timeline #cycle-2 .slideDetail .slideTop {height:700px; width:100%; float:left; background-size:cover; background-position:center bottom;} #timeline #cycle-2 .slideDetail .slideTop .content {height:700px;} #timeline #cycle-2 .slideDetail .slideTop .year {font-family: "Montserrat", sans-serif; color: #ffffff; position: absolute; bottom: 160px; right: 360px; font-size: 25px; letter-spacing: 2px; font-weight: 300;} #timeline #cycle-2 .slideDetail .slideTop .textColumn {position:absolute; right:0px; bottom:0px; width:320px;} #timeline #cycle-2 .slideDetail .slideTop .textColumn p {color:#ffffff; font-size:16px; padding:30px; font-weight: 300;} #timeline #cycle-2 .slideDetail .slideTop .textColumn .quote {background-color:#ffffff; padding:30px 30px 30px 30px; color:#666; font-size:22px; font-weight:300; font-family: "Montserrat", sans-serif; } #timeline #cycle-2 .slideDetail .slideTop h1 {color:#ffffff; font-weight:300; font-size:25px; letter-spacing:5px; padding:0 0 20px 0;} } @media only screen and (max-width: 767px) { #timeline {margin-top:-110px; } #timeline {background-image:url("/wp-content/themes/gx/assets/background-timeline.jpg"); background-size:cover;} #timeline #cycle-1>img {position:absolute; top:-30px; left:50px;} #timeline #cycle-1 {float:left; width:100%; position:relative; margin-top:174px; background-color:rgba(255,255,255,0.5); height:136px; margin-bottom:60px;} #timeline #cycle-1 .cycle-slideshow {width:100%; padding-bottom:20px;} #timeline #cycle-1 .slide {width:140px; height:136px; border-left:1px solid #ffffff; margin-top:20px; padding:0 20px;} #timeline #cycle-1 .slide.noBorder {border-left:none;} #timeline #cycle-1 .slide img {float:left; margin-bottom:28px; opacity: 0.5; filter: alpha(opacity=50);} #timeline #cycle-1 .slide.cycle-slide-active img { opacity: 1; filter: alpha(opacity=100);} #timeline #cycle-1 .slide .date {float:left; font-family: "Montserrat", sans-serif; color:#ffffff; clear:left; font-size:13px; font-weight:bold;} #timeline #cycle-1 .slide.cycle-slide-active .date {font-size:24px;} #timeline #cycle-2 {width:100%; float:left; background-color:#ffffff; padding:20px 0;} #timeline #cycle-2 .slideDetail {width:100%;} #timeline #cycle-2 .slideDetail .slideTop {background-image:none !important;} #timeline #cycle-2 .slideDetail .slideTop .year {display:none;} #timeline #cycle-2 .slideDetail .slideTop h1 {color:#3A9F8A; font-weight:300; font-family: "Montserrat", sans-serif; font-size:30px; letter-spacing:2px; padding:0 0 20px 0;} #timeline #cycle-2 .slideDetail .slideTop .textColumn .quote { color:#666; font-size:25px; font-weight:300; font-family: "Montserrat", sans-serif; line-height:1.5em;} } /* STAFF PROFILE */ .profile img {width:100%; margin-bottom:50px;} .profile.copy h1 {margin-bottom:0px;} .profile span.title {display:inline-block; margin-bottom:50px; font-size:25px;} .interests {float:left; width:100%;} @media only screen and (min-width: 768px) { .interests {float:left; width:40%; clear:left;} } @media only screen and (min-width: 1024px) { .interests {float:left; width:30%; clear:left;} } /* VIDEO */ .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.videoBanner .message {z-index:10; margin-top:50px;} #banner.videoBanner .message img {float:left; margin-right:30px;} #banner.videoBanner .message p {float:left; color:#fff; font-size:24px; margin-top:20px;} #banner.videoBanner .message h2 {color:#fff; font-size:30px; font-weight:300; clear:left;} #banner.videoBanner .message a {margin-top:30px; margin-left:5px; transition:0.3s; width:44px; height:44px; background-position:bottom left; background-image:url("/wp-content/themes/gx/assets/arrow-large.png"); display:block;} #banner.videoBanner .message a:hover {transition:0.3s; background-position:top right;} @media only screen and (min-width: 768px) { #banner.videoBanner .message {margin-top:100px;} #banner.videoBanner .message h2 {font-size:45px; margin-bottom:0px;} #banner.videoBanner .message a {margin-top:40px; } } @media only screen and (min-width: 1280px) { #banner.videoBanner .message {margin-top:100px;} #banner.videoBanner .message h2 {font-size:55px;} #banner.videoBanner .message a {margin-top:50px;} } #banner.videoBanner {height:600px;} #banner.videoBanner .content {height:600px;} @media only screen and (min-width: 768px) { #banner.videoBanner {height:700px;} #banner.videoBanner .content {height:700px;} } @media only screen and (min-width: 1280px) { #banner.videoBanner {height:800px;} #banner.videoBanner .content {height:800px;} }