/* Theme Name: Catalis Group Author: Form Advertising Author URI: http://www.formadvertising.co.uk/ Version: 1.1 */ * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; position: relative;} html {width: 100%; height: 100%; background-color: #fff; font-family: nimbus-sans, sans-serif; font-style: normal; font-weight: 300; color: #292c33} body {height: auto; letter-spacing: 0px; padding-left: 0px; padding-right: 0px; font-size: 16px; line-height: 22px; -webkit-font-smoothing: antialiased;} .animatePane {border: 0px solid red;} /********************************** * Navigation and Header Styles **********************************/ /* General Build Styles */ .clearFloats {clear: both;} .alignright {float: right} .alignleft {float: left} .flexPane {position: relative; display: -webkit-flex; display: flex; border: 0px solid red;} .double-container, .triple-container, .quad-container, .quint-container {display: -webkit-flex; display: flex;} .ctl-double-pane {position: relative; display: inline-block; width: 50%;} .ctl-triple-pane {position: relative; display: inline-block; width: 33.3%} .ctl-quad-pane {position: relative; display: inline-block; width: 25%} .ctl-quint-pane {position: relative; display: inline-block; width: 20%} .clipBox {overflow: hidden} .coverPic {background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} .rowPadReg {padding-top: 100px; padding-bottom: 100px;} .rowPadMed {padding-top: 40px; padding-bottom: 40px;} .rowPadSmall {padding-top: 10px; padding-bottom: 10px;} /* Top Navigation Styles */ navigation {display: block; position: fixed; width: 100%; height: 110px; top: 0px; left: 0px; z-index: 99999; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out} navigation #pull {display: none;} navigation.sticky {background-color: #1F343C; border-bottom: 5px solid #00909F} #topNav {display: inline-block; position: absolute; right: 20px; top: 55px; border: 0px solid red;} #topNav li {display: inline-block; position: relative; margin-left: 20px;} #topNav li a {color: #fff; text-decoration: none; text-transform: uppercase; font-weight: 400; font-size: 18px; line-height: 18px; padding: 1px 3px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out} #topNav li a.dropDown {padding-right: 20px;} #topNav li a.dropDown:after {content: ""; display: block; position: absolute; right: 0px; top: 0px; width: 20px; height: 20px; background-image: url("media/nav-arrows.png"); background-repeat: no-repeat; background-size: 20px 40px; background-position: 0px -20px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out} #topNav li a.dropDown:hover:after {background-position: 0px 0px;} #topNav li a:before {content: ""; display: block; position: absolute; left: 0px; bottom: -4px; height: 2px; width: 0; background: #fff; z-index: -1; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out} #topNav li a:hover {color: #00909F} #topNav li a:hover:before {width: 100%;} #topNav li ul {display: block; position: absolute; display: block; visibility: hidden; opacity: 0; top: 15px; padding: 25px 0px 1px; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; border: 0px solid red;} #topNav li ul li {display: block; padding: 0px; margin-left: 0px; margin-bottom: 0px; margin-top: 0px; border-bottom: 1px solid #B3E0F9; background: #00909F;} #topNav li ul li:last-of-type {padding: 0px; margin-left: 0px; margin-bottom: 0px; border-bottom: none} #topNav li ul li a {display: block; position: relative; white-space: nowrap; padding: 12px 25px; border: 0px solid red; margin: 0px; z-index: 1} #topNav li:hover > ul {visibility: visible; opacity: 1;} #topNav li ul li a:before {content: ""; display: block; position: absolute; left: 0px; top: 0px; height: 100%; width: 0px; background: #fff; z-index: -1; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out} /* Header (navigation) logo */ navigation #headerLogo {margin-top: 20px;} navigation #headerLogo {opacity: 0;} .page-privacy-policy navigation #headerLogo, .page-cookie-policy navigation #headerLogo {opacity: 1;} navigation #headerLogo .a {fill: #fff;} navigation.sticky #headerLogo {opacity: 1;} navigation #headerLogoHit {display: none;} navigation.sticky #headerLogoHit, .page-privacy-policy #headerLogoHit, .page-cookie-policy #headerLogoHit {position: absolute; display: block; top: 20px; left: 0px; width: 250px; height: 65px; z-index: 1;} /* Header Styles */ header {height: 100vh; background: #1F343C; position: relative;} header.smallHeader {height: 270px;} header h1 {display: block; position: relative; width: 100%; margin-top: 0px; color: #fff; font-size: 38px; line-height: 36px; margin-bottom: 10px; font-weight: bold; text-align: left; border: 0px solid red} header #welcomeMsg {position: relative; display: flex; flex-direction: row; top: 50%; left: 0px; text-align: center; transform: translateY(-50%);} /* Home header Hero Pane Styles */ .headerPic {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-image: url("media/header-bg-image.jpg"); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} header #bigLogo {position: relative; fill:#fff; width: 100%; height: auto;} header #bigLogo .a {fill: #fff;} header #bigLogo .b {fill: #00909F;} header .scrollIcon {position: absolute; width: 50px; bottom: 50px; text-decoration: none; left: 50%; margin-left: -25px; text-align: center; color: #fff; font-weight: 400; padding-top: 40px; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out;} header .scrollIcon svg {position: absolute; fill: #00909F; top: 0px; left: 0px;} header .scrollIcon:hover {color: #00909F} /* Home header Video Pane Styles */ header #welcomeMsg .welcomeMsg-flex {display: flex; align-items: center; justify-content: center; flex-wrap: wrap;} header #welcomeMsg .welcomeMsg-flex:first-of-type {width: 40%; padding-right: 8%; padding-left: 0;} header #welcomeMsg .welcomeMsg-flex:last-of-type {display: block; width: 60%; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); z-index: 1;} header .wp-video-popup {display: block; width: 99.999%; height: auto; padding-bottom: 60%; background: #00909F url("media/wp-video-background.jpg"); background-repeat: no-repeat; background-position: 50% 50%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow: hidden; -webkit-backface-visibility: hidden; -webkit-transform: translateX(0);} header .wp-video-popup .wp-video-popup-overlay {display: block; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-color: #1F343C; opacity: 0; transition: 0.3s; -webkit-transition: 0.3;} header .wp-video-play-icon {display: block; position: absolute; top: 50%; margin-top: -55px; left: 50%; margin-left: -55px; width: 110px; height: 110px; border-radius: 50%; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); z-index: 1;} header .wp-video-play-icon .wp-video-play-icon-bg {display: block; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-color: #00909F; opacity: 0.9, transition: 0.3s; -webkit-transition: 0.3;} header .wp-video-play-icon .wp-video-play-icon-tri {position: absolute; top: 28px; left: 42px; width: 0; height: 0; border-top: 26px solid transparent; border-left: 38px solid white; border-bottom: 26px solid transparent; transition: 0.3s; -webkit-transition: 0.3;} header .wp-video-popup:hover {cursor: pointer;} header .wp-video-popup:hover .wp-video-popup-overlay {opacity: 0.7; cursor: pointer;} header .wp-video-popup:hover .wp-video-play-icon .wp-video-play-icon-bg {background-color: #fff; cursor: pointer;} header .wp-video-popup:hover .wp-video-play-icon .wp-video-play-icon-tri {border-left: 38px solid #00909F;} /* Background and container Styles */ .ctl-bg-darkblue {background-color: #1F343C} .ctl-bg-blue {background-color: #00909F} .ctl-bg-green {background-color: #8EB297} .ctl-bg-lightBlue {background-color: #e7f4f5} .ctl-bg-grey {background-color: #f8f8f8} .ctl-bg-darkgrey {background-color: #292c33} /********************************** * Text Styles **********************************/ /* General Text Styles */ h2, h3, h4, h5, h6, h7 {margin-bottom: 20px;} .hNoPad {margin-bottom: 0px;} .padTop {padding-top: 20px;} .ctl-medTitle {font-size: 45px; line-height: 50px; font-weight: bold; letter-spacing: -0.04em;} .ctl-medText {font-size: 30px; line-height: 34px; font-weight: bold; letter-spacing: -0.04em;} .ctl-bodyText {font-size: 16px; line-height: 22px; font-family: Arial, sans-serif;/*font-weight: normal;*/} .ctl-centerText {text-align: center;} .ctl-leftText {text-align: left;} .ctl-rightText {text-align: right;} .ctl-lightBlueTxt {color: #B3E0F9} .ctl-blueTxt {color: #00909F} .ctl-whiteTxt {color: #fff} #mainContent .ctl-bodyText p {margin-bottom: 20px;} #mainContent .ctl-bodyText p .title {display: inline-block; color: #436775; font-weight: bold; font-size: 24px; line-height: 26px; margin-bottom: 5px;} #mainContent .ctl-bodyText p strong {font-weight: bold;} #mainContent .ctl-bodyText p a {text-decoration: none; color: #00909F; font-size: inherit; overflow-wrap: break-word; word-wrap: break-word;} #mainContent .ctl-bodyText p a:hover {text-decoration: underline; color: #436775;} #mainContent .ctl-bodyText p a.downloadLink {padding-left: 22px; background-image: url("media/download-icon.png"); background-repeat: no-repeat; background-position: 0 0; background-size: 16px 16px;} #mainContent .ctl-bodyText ul {border-left: 3px solid #e7f4f5; margin-bottom: 25px;} #mainContent .ctl-bodyText ul li {padding-left: 30px; margin-bottom: 5px;} #mainContent .ctl-bodyText ul li:before {content: '-'; position: absolute; top: 0px; left: 15px; color: #8EB297} #mainContent .ctl-bodyText ul li strong {font-weight: bold} #mainContent .ctl-bodyText ul li ul {margin-top: 10px; border-left: none;} /********************************** * About pane **********************************/ #about {border: 0px solid green;} #about #aboutCompanies {margin-top: 40px; margin-left: 0px;} #about .compLogo {display: block; margin-bottom: 30px; margin-right: 10%; text-align: center; background-color: #00909F} #about .compLogo img {width: 100%; height: auto} #about .compText {margin: 10px; padding-right: 10%;} #about .compText .ctl-bodyText strong {display: inline-block; color: #436775; font-weight: bold; font-size: 24px; line-height: 27px; margin-top: 20px;} #about .compText .blockButton {margin-top: 20px; margin-bottom: 20px;} /********************************** * Management team members blocks **********************************/ #management {background-color: #00909F; /*min-height: 100vh;*/ padding-top: 100px; padding-bottom: 100px;} #management .flexPane {-webkit-flex-flow: row; border: 0px solid red; } #management .flexPane .managmentTeamMemberWrap {display: block; flex: 0 0 22%; /*width: 16.6666%;*/ overflow: hidden; border: 0px solid yellow; justify-content: space-between; margin-right: 4%;} #management .flexPane .managmentTeamMemberWrap .managmentTeamMember{display: block; width: 100%; height:auto; margin-bottom: 5px; background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow: hidden;} #management .flexPane .managmentTeamMemberWrap .managmentTeamMember:before {content:''; float:left; padding-top:105%;} #management .managmentTeamMember .itemOver {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #00909F; text-align: center; display: flex; align-items: center; justify-content: center; opacity: 0; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out} #management .managmentTeamMember:hover .itemOver {opacity: 0.8;} #management .managmentTeamMember .itemOver .itemOverInner {color: #fff; display: inline-block; vertical-align: middle; padding: 7px 14px; border: 2px solid white; border-radius: 4px; font-size: 20px; line-height: 20px; font-weight: 500; -ms-transform: scale(1.9); -webkit-transform: scale(1.9); transform: scale(1.9); -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out} #management .managmentTeamMember .itemOver:hover .itemOverInner {-ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1);} #management .flexPane .managmentTeamMemberWrap .managmentName {color: #fff; font-size: 24px; line-height: 27px; font-weight: 600; padding-right: 20px; word-spacing: 600px;} #management .flexPane .managmentTeamMemberWrap .managmentTitle {color: #fff; font-size: 22px; line-height: 22px; font-weight: 300; padding-right: 20px; margin-top: 5px;} #management h4 {color: #fff; font-size: 22px; line-height: 22px; font-weight: 300; padding-right: 20px; margin-top: 5px;} #management .managmentBios {position: relative; border: 0px solid red; color: #fff; margin-top: 60px; margin-bottom: 40px;} #management .managmentBios .managmentName {margin-bottom: 20px;} #management .managmentBios ul li {position: absolute; top: 0px; left: 0px; opacity: 0;-webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out} #management .managmentBios ul li.active {position: relative; opacity: 1} /********************************** * investment team members blocks **********************************/ #investment {background-color: #00909F; color: #fff; min-height: 100vh; background-image: url("media/investment-bg-image.jpg"); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; /*display: flex; justify-content: center; flex-direction: column;*/} #investment .investmentCopy a {color: #B3E0F9; text-decoration: none; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; overflow-wrap: break-word; word-wrap: break-word; } #investment .investmentCopy a:hover {color: #fff; text-decoration: underline;} /********************************** * Offices Pane Styles **********************************/ #offices {background-color: #1F343C; color: #fff;} #offices .mapPane {position: relative; display: block;} #offices .mapPane img {width: 100%; max-width: 1200px; height: auto; } #offices .mapPane .mapWrap {position: relative; display: inline-block; border: 1px solid transparent;} #offices .addressPane {-webkit-flex-flow: row; flex-wrap: wrap; padding-left: 0px; padding-right: 0px; margin-top: 40px;} #offices .addressPane .officeLocation {display: inline-block; border-left: 2px solid transparent; width: 25%; text-align: left; padding-right: 2.5%; padding-left: 2.5%; margin-left: 0px; margin-right: 0px; margin-bottom: 20px; vertical-align: top; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; } #offices .addressPane .officeLocation strong {display: block; font-weight: bold; font-size: 1.15rem; margin-bottom: 2px;} #offices .mapLink {display: block; position: absolute; width: 25px; height: 25px; border-radius: 4px; border: 3px solid transparent; transform: rotate(45deg); transform-origin: 50% 50%; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } #offices .mapLink:hover {opacity: 1} /* Offices Pane Map marker Styles */ #offices .mapWrap .mapInfo {display: inline-block; position: absolute; font-size: 24px; line-height: 24px; font-weight: bold; color: #a1a9ad} #offices .mapWrap .mapInfo strong {display: block; color: #fff; font-size: 28px; line-height: 28px; font-weight: bold;} /* Offices Pane Invisible hit spot Styles */ #offices .mapLink.usa {top: 22.8%; left: 24.2%;} #offices .mapLink.uk {top: 12.9%; left: 47.3%;} #offices .mapLink.poland {top: 16.4%; left: 49.7%;} #offices .mapLink.chile {top: 86.5%; left: 31.4%;} /* Offices Pane Map text info Styles */ #offices .addressPane .officeLocation.uk.active, #offices .addressPane .officeLocation.usa.active, #offices .addressPane .officeLocation.poland.active, #offices .addressPane .officeLocation.chile.active {color: #80b6d8; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out;} #offices .addressPane .officeLocation.uk.active, #offices .addressPane .officeLocation.usa.active, #offices .addressPane .officeLocation.poland.active, #offices .addressPane .officeLocation.chile.active {border-left: 2px solid #fff;} /********************************** * Latest News Pane Styles **********************************/ #news .blogPane {position: relative; padding: 30px;} #news .blogPane .background {display: block; top: 0px; left: 0px; position: absolute; width: 96%; height: 100%; background-color: #004B53} #news .blogPane .blogTitle {display: inline-block; color: #fff; font-weight: bold; font-size: 24px; line-height: 27px; margin-right: 20px; text-decoration: none;} #news .blogPane .blogDate {display: inline-block; color: #B3E0F9; font-weight: normal; font-size: 24px; line-height: 27px; margin-right: 20px; margin-top: 10px; margin-bottom: 20px;} #news .blogPane .blockButton.whiteBlock {margin-top: 20px;} /* Latest News Single Page Styles */ .single #mainContent .blogDate {display: inline-block; color: #436775; font-weight: normal; font-size: 20px; line-height: 20px; margin-bottom: 5px; letter-spacing: 0; padding-bottom: 10px; border-bottom: 2px solid #004B53;} .single #mainContent .sideImage img {width: 90%; height: auto; margin-bottom: 20px} #latestNewsContent article {margin-bottom: 20px; padding-bottom: 35px; border-bottom: 1px solid #e7f4f5} #latestNewsContent article:last-of-type {border-bottom: 0px solid #00909F; padding-bottom: 15px;} #latestNewsContent .newsTitle {display: inline-block; color: #436775; font-weight: bold; font-size: 24px; line-height: 27px; margin-top: 20px; text-decoration: none; -webkit-transition: all .2s ease-out;-moz-transition: all .2s ease-out;-o-transition: all .2s ease-out;transition: all .2s ease-out;} #latestNewsContent .newsTitle:hover {color: #00909F; text-decoration: underline} #latestNewsContent .newsDate {margin-bottom: 10px;} #latestNewsContent .newsPane .ctl-bodyText {display: block; padding-right: 15%; margin-bottom: 15px;} #latestNewsContent .newsSidePane {margin-top: 20px; padding-left: 60px; margin-bottom: 45px;} #latestNewsContent .newsSidePane .ctl-smallTitle {font-size: 24px; line-height: 27px; font-weight: bold; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #e7f4f5} #latestNewsContent .newsSidePane li {padding-top: 5px; padding-bottom: 5px;} #latestNewsContent .newsSidePane li a {font-size: 14px; line-height: 18px; font-weight: bold; color: #00909F; text-decoration: none; margin-bottom: 5px; text-transform: uppercase; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out} #latestNewsContent .newsSidePane li a:hover {color: #004B53} /********************************** * Contact Pane Styles **********************************/ #contact {background-color: #004B53;} #contact .formBlock {width: 50%; margin-left: 25%} /* Form Styles */ .wpcf7 label {color: #fff; font-size: 24px; line-height: 34px; font-weight: bold; letter-spacing: -0.04em;} .wpcf7 input {border: 0px; font-size: 24px; line-height: 34px; font-family: Arial, sans-serif; color: #fff; font-weight: normal; background: none; width: 100%; height: 50px; margin-bottom: 10px; padding-left: 6px; margin-top: 2px; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; border-bottom: 1px solid #fff;} .wpcf7 textarea {display: block; border: 0px; font-size: 24px; line-height: 34px; font-family: Arial, sans-serif; color: #fff; font-weight: normal; width: 100%; height: 80px; background: none; margin-bottom: 5px; padding-left: 6px; padding-top: 5px; margin-top: 2px; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; border-bottom: 1px solid #fff;} .wpcf7 .wpcf7-file {border: 0px; padding-left: 0px} .wpcf7 input[type="submit"] {position: relative; clear: both; margin: 0px auto; width: 160px; margin-top: 10px; background-color: #00909F; border-radius: 5px; text-align: center; font-weight: bold; padding: 8px 25px; color: #fff; margin-right: 5px; margin-bottom: 5px; border: 1px solid #00909F; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; -webkit-appearance: none;} /* .wpcf7 .submitButton {display: inline-block; border-radius: 5px; text-align: center; font-weight: bold; padding: 8px 25px; min-width: 120px; color: #004B53; margin-right: 5px; margin-bottom: 5px; border: 1px solid #004B53; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out} .wpcf7 .submitButton:hover {background-color: #fff; color: #2CB2E3; background-position: 125px 10px; padding: 8px 30px 8px 30px;} */ .wpcf7 input[type="submit"]:hover {cursor: pointer; cursor: hand; background: #fff; color: #00909F; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out;} .wpcf7 input[type="submit"]:active, .wpcf7 input[type="submit"]:focus {color: #fff; outline: none;} .wpcf7 input[type="text"]:focus, .wpcf7 input[type="email"]:focus, .wpcf7 textarea:focus {background: #00909F; color: #ffffff; outline: none; -webkit-transition: all .2s ease-out;-moz-transition: all .2s ease-out;-o-transition: all .2s ease-out;transition: all .2s ease-out;} span.wpcf7-not-valid-tip { color: #B3E0F9; font-size: 24px; line-height: 34px; display: block; margin-top: 0px; margin-bottom: 5px; border: 0px solid yellow} .blueBg span.wpcf7-not-valid-tip { color: #fff; } div.wpcf7-validation-errors { border: 0px solid #f7e700; } div.wpcf7-response-output { display: block; color: #B3E0F9; font-size: 24px; line-height: 34px; margin: 0em 0em 0em; padding: 0em 0em; border: 0px solid pink; clear: both; z-index: 1} -webkit-input-placeholder {color: #b4e6f9 !important;} -moz-placeholder {color: #b4e6f9 !important;} -moz-placeholder {color: #b4e6f9 !important; } -ms-input-placeholder {color: #b4e6f9 !important;} /* Drop down Styling */ .selectWrap {display: block; border-bottom: 1px solid white; margin-bottom: 20px; margin-top: 5px;} .wpcf7 select.wpcf7-select { width: 100%; height: 50px; border: 0px solid #fff !important; border-top: 0; border-left: 0; border-right: 0; font-size: 24px; line-height: 34px; font-family: Arial, sans-serif; -webkit-border-radius: 0; border-radius: 0px !important;background: #004B53; color: #fff; -webkit-appearance: none;} .wpcf7 select.wpcf7-select option { background: #fff; color: #000; padding: 2px; font-size: 24px; line-height: 34px; font-family: Arial, sans-serif; display: block; } /* Override AJAX loader Styling */ div.wpcf7 .ajax-loader {background-image: url('media/ajax-loader.gif') !important;} .formFooter {margin-top:20px; color: #00909F} .formFooter strong {font-size: 1.2rem; } .formFooter a {text-decoration: none; color: #00909F; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;} .formFooter a:hover {color: #fff} /********************************** * Button Styles **********************************/ .blockButton, .pagaLink a {display: inline-block; text-decoration: none; border-radius: 5px; text-align: center; font-weight: bold; padding: 8px 25px; min-width: 120px; color: #004B53; margin-right: 5px; margin-bottom: 5px; border: 1px solid #004B53; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out} .blockButton.greenBlock {background-color: #004B53; color: #fff;} .blockButton.blueBlock {background-color: #00909F; color: #fff; border: 1px solid #00909F;} .blockButton.whiteRevBlock {background-color: none; color: #fff; border: 1px solid #fff;} .blockButton.whiteBlock {background-color: #fff; color: #00909F; border: 1px solid #fff;} .blockButton:hover, .pagaLink a:hover {background-color: #00909F; color: #fff; border: 1px solid #00909F;} .blockButton.greenBlock:hover {background-color: #893982; color: #fff; border: 1px solid #893982;} .blockButton.blueBlock:hover {background-color: #004B53; color: #fff; border: 1px solid #004B53;} .blockButton.whiteBlock:hover {background-color: #004B53; color: #fff; border: 1px solid #fff;} .offer-link {display: inline-block; padding: 10px 15px; margin-bottom: 20px; border: solid 4px #fff;} .offer-link:hover {background: #fff; color: #00909F !important; text-decoration: none !important;} /********************************** * Footer Styles **********************************/ footer {background-color: #292c33; font-family: Arial, sans-serif; padding-top: 40px; padding-bottom: 40px; color: #767676; border-top: 2px solid #767676; font-size: 18px; line-height: 22px} #footerLogo {margin-top: 0px; text-align: left;} footer * {vertical-align: center;} footer .col {vertical-align: top !important; line-height: 22px;} footer .col.span_4 {padding-left: 9%} /* Footer Link Styles */ footer .textLink {color: #767676; text-decoration: none; margin-right: 10px;} footer .textLink:hover {color: #fff; text-decoration: underline;} /********************************** * Cookie law bar Styles **********************************/ #cookie-law-bar { min-height: 40px; font-size: 18px; font-family: nimbus-sans, sans-serif; padding: 15px 42px; background: #1F343C; } #cookie-law-bar a { color: #fff; transition: all .2s ease-in-out; } #cookie-law-bar button {margin: 0px auto; width: 160px; background: #00909F !important; font-size: 16px; line-height: 22px; border-radius: 5px; text-align: center; font-weight: bold; padding: 8px 25px; color: #fff; margin-left: 15px; border: 2px solid #00909F; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } #cookie-law-bar button:hover {background: #fff !important; color: #00909F !important; border: 2px solid #fff !important;} /********************************** * WP Terms Popup Styles **********************************/ #tlight .termspopupcontainer h3.termstitle {background-color: #1F343C; color: #fff; padding: 40px 20px; font-family: nimbus-sans, sans-serif; text-transform: uppercase; font-weight: 700; font-size: 20px; line-height: 22px; border: 0px solid blue;} #tlight .termspopupcontainer .termsagree, #tlight .termspopupcontainer .termsdecline {display: inline-block; text-decoration: none; border-radius: 5px; text-align: center; font-weight: bold; padding: 8px 25px; min-width: 120px; color: #004B53; margin-right: 5px; margin-bottom: 5px; border: 1px solid #004B53; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out} #tlight .termspopupcontainer .termsagree:hover, #tlight .termspopupcontainer .termsdecline:hover {background-color: #00909F; color: #fff; border: 1px solid #00909F;} #tlight .termspopupcontainer .termscontentwrapper {padding: 20px;} #tlight .termspopupcontainer .termscontentwrapper strong {font-weight: bold;} #tlight .termspopupcontainer .termscontentwrapper p {margin-bottom: 20px;} #tlight .termspopupcontainer .termscontentwrapper h1, #tlight .termspopupcontainer .termscontentwrapper h2 {font-size: 1.4em; font-weight: 600; color: #00909F; margin-bottom: 10px; margin-top: 15px;} #tlight .termspopupcontainer .termscontentwrapper ul {margin-top: 20px; margin-bottom: 20px;} #tlight .termspopupcontainer .termscontentwrapper ul li {position: relative; padding-left: 20px; margin-bottom: 10px;} #tlight .termspopupcontainer .termscontentwrapper ul li:before {content: '\2022'; display: block; position: absolute; font-size: 0.9em; font-weight: 400; color: #00909F;top: 0px; left:0px; width: 20px; height: 20px; } /********************************** * Offer page Styles **********************************/ .page-offer-for-catalis #document-list {background: #1F343C; padding-top: 100px;} .page-offer-for-catalis #document-list ul.document-list {margin-bottom: 100px;} .page-offer-for-catalis #document-list ul.document-list li {padding: 10px 0px; border-top: solid 1px #767676;} .page-offer-for-catalis #document-list ul.document-list li:last-of-type {border-bottom: solid 1px #767676;} .page-offer-for-catalis #document-list ul.document-list li .date {color: #767676; display: inline-block; margin-left: 10px; font-size: 0.7em; font-weight: 400;} .page-offer-for-catalis #document-list ul.document-list li a {display: inline-block; color: #fff; font-weight: bold; font-size: 24px; line-height: 27px; text-decoration: none; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out;} .page-offer-for-catalis #document-list ul.document-list li a:hover {color: #00909F;} .page-offer-for-catalis #document-list ul.document-list li a:hover .date {color: #fff;} /********************************** * OneTrust Cookies Styles **********************************/ #ot-sdk-cookie-policy, #cookie-policy-description, #ot-sdk-cookie-policy section p {color: #292c33; font-size: 16px; line-height: 22px; font-family: Arial, sans-serif; font-weight: 300;} h3#cookie-policy-title {display: none;} @media only screen and (min-width: 1180px) { .row {max-width: 1120px; } } /********************************** * Smaller Screens **********************************/ @media only screen and (max-width: 1180px) { .row {width: 100%; border: 0px solid yellow} navigation .row {padding-left: 20px; padding-right: 20px;} #topNav li {margin-left: 8px;} header {padding-left: 20px; padding-right: 20px;} /* About pane */ #about #aboutCompanies {margin-left: 10px;} /* Offices Page Styles */ #offices .mapPane img {width: 95%; height: auto; } #offices .mapLink {display: none;} } /********************************** * Tablets **********************************/ @media (max-width: 967px) { /* Offices Pane Styles */ /* Offices Pane Map marker Styles */ #offices .mapWrap .mapInfo {font-size: 20px; line-height: 20px;} #offices .mapWrap .mapInfo strong {font-size: 24px; line-height: 24px;} #offices .mapWrap .mapInfo.mapInfoUSA {padding-left: 20px;} #offices .mapWrap .mapInfo.mapInfoUK {padding-right: 20px;} #offices .mapWrap .mapInfo.mapInfoPoland {padding-left: 40px;} #offices .mapWrap .mapInfo.mapInfoThailand {padding-right: 20px;} } @media (max-width: 967px) { .col { padding:0 20px;} /* Top Navigation Styles */ navigation.live {background-color: #1F343C; border-bottom: 5px solid #00909F} navigation.live #headerLogo {opacity: 1;} navigation #pull { display: block; position: absolute; top: 25px; right: 10px; height: 54px; width: 70px; -ms-transform: scale(0.8); -webkit-transform: scale(0.8); transform: scale(0.8); transform-origin: center center;; border: 0px solid red; } #topNav {display: none; position: absolute; right: 0px; top: 110px; width: 100%;} #topNav li {display: block; position: relative; margin-left: 0px; text-align: center; background-color: #1F343C} #topNav li a {display: block; color: #fff; text-decoration: none; text-transform: uppercase; font-weight: 400; font-size: 18px; line-height: 26px; padding: 16px 5px; border-bottom: 1px solid #436775; z-index: 1; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out} #topNav li:last-of-type a {border-bottom: none} #topNav li a.dropDown {padding-right: 0px;} #topNav li a.dropDown:after {display: none;} #topNav li a:before {content: ""; display: block; position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; background: #fff; z-index: -1; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; opacity: 0} #topNav li a:hover {/*color: #00909F*/} #topNav li a:hover:before {opacity: 0.1} #topNav li ul {display: block; position: relative; display: block; visibility: visible; opacity: 1; top: 0px; padding: 0px; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; border: 0px solid red;} #topNav li ul li {display: block; padding: 0px; margin-left: 0px; margin-bottom: 0px; margin-top: 0px; border-bottom: 1px solid #436775; background: #004B53;} #topNav li ul li:last-of-type {padding: 0px; margin-left: 0px; margin-bottom: 0px; border-bottom: 1px solid #004B53} #topNav li ul li a {display: block; position: relative; white-space: nowrap; padding: 12px 25px; border: 0px solid red; margin: 0px; z-index: 1} #topNav li:hover > ul {visibility: visible; opacity: 1;} #topNav li ul li a:before {content: ""; display: block; position: absolute; left: 0px; top: 0px; height: 100%; width: 0px; background: #fff; z-index: -1; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out} #management .flexPane {flex-wrap: wrap} #management .flexPane .managmentTeamMemberWrap {flex: 0 0 46%; height:auto; margin-bottom: 20px;} #management .flexPane .managmentTeamMemberWrap:nth-child(even) {margin-right: none;} #management .flexPane .managmentTeamMemberWrap .managmentName {word-spacing: 0px;} } /********************************** * Mobile Devices * - All columns are full width **********************************/ @media only screen and (max-width: 767px) { .row {width: 100%; border: 0px solid red} header #welcomeMsg {display: block;} header h1 {display: block; position: relative; width: 100%; margin-top: 0px; color: #fff; font-size: 38px; line-height: 36px; margin-bottom: 10px; font-weight: bold; text-align: center; border: 0px solid red} header #welcomeMsg .welcomeMsg-flex:first-of-type {width: 100%; padding-right: 20%; padding-left: 20%; margin-bottom: 20px;} header #welcomeMsg .welcomeMsg-flex:last-of-type {display: block; width: 100%;} /* Offices Pane Styles */ /* Offices Pane Map marker Styles */ #offices .mapWrap .mapInfo {font-size: 16px; line-height: 16px;} #offices .mapWrap .mapInfo strong {font-size: 20px; line-height: 20px; font-weight: bold;} /* Contact Pane Styles */ #contact .formBlock {width: 70%; margin-left: 15%} footer .col {width: 100%; margin-left: 0px; margin-bottom: 10px; border: 0px solid red;} footer .col.ctl-rightText {text-align: left; margin-top: 20px;} footer .col.span_4 {padding-left: 20px} } @media only screen and (max-width: 619px) { header #bigLogo {width: 95%; height: auto} /* Offices Pane Map marker Styles */ #offices .mapPane {display: none;} /* Offices Pane Styles */ #offices .addressPane {margin-top: 0px;} #offices .addressPane .officeLocation {padding-left: 0; width: 50%; margin-bottom: 20px;} #offices .addressPane .officeLocation:nth-child(1) {padding-top: 40px;} #offices .addressPane .officeLocation:nth-child(2) {padding-top: 40px;} #offices .addressPane .officeLocation:nth-child(1):before {content: 'UK'; position: absolute; display: block; top: 0px; left: 0px; font-size: 24px; font-weight: 28px; font-weight: bold;} #offices .addressPane .officeLocation:nth-child(5) {padding-top: 40px} #offices .addressPane .officeLocation:nth-child(6) {padding-top: 40px} #offices .addressPane .officeLocation:nth-child(5):before {content: 'USA'; position: absolute; display: block; top: 0px; left: 0px; font-size: 24px; font-weight: 28px; font-weight: bold;} #offices .addressPane .officeLocation:nth-child(7) {padding-top: 40px } #offices .addressPane .officeLocation:nth-child(7):before {content: 'Europe'; position: absolute; display: block; top: 0px; left: 0px; font-size: 24px; font-weight: 28px; font-weight: bold;} #offices .addressPane .officeLocation:nth-child(8) {padding-top: 40px } #offices .addressPane .officeLocation:nth-child(8):before {content: 'Asia'; position: absolute; display: block; top: 0px; left: 0px; font-size: 24px; font-weight: 28px; font-weight: bold; } /* Contact Pane Styles */ #contact .formBlock {width: 100%; margin-left: 0%} } @media only screen and (max-width: 567px) { .row {width: 100%; border: 0px solid purple} /* Header Styles */ /*header h1 {display: block; position: relative; width: 100%; margin-top: 0px; color: #fff; font-size: 58px; line-height: 60px; font-weight: bold; text-align: center; border: 0px solid red}*/ /* About pane */ #aboutCompanies {display: block;} #aboutCompanies .ctl-double-pane {width: 100%;} #about .compLogo {margin-right: 10px;} /* Management team members blocks */ #management .flexPane .managmentTeamMemberWrap {width: 50%; height:auto;} /* Latest News pane */ #news .flexPane {display: block;} #news .blogPane.ctl-triple-pane {width: 100%; margin-bottom: 20px;} #news .blogPane.ctl-triple-pane.temp {display: none;} /* Latest News Single Page Styles */ .single #mainContent .span_2 {width: 100%; margin-left: 0} .single #mainContent .span_4 {width: 100%; margin-left: 0} .single #mainContent .sideImage img {width: 70%; height: auto} #latestNewsContent .newsPane .ctl-bodyText { padding-right: 0; } #latestNewsContent .span_4 {width: 100%; margin-left: 0} #latestNewsContent .span_2 {width: 100%; margin-left: 0} #latestNewsContent .newsSidePane {padding-left: 20px; } } /********************************** * Height header fix height **********************************/ @media (max-height: 659px) { .home header {height: 650px; /*background: #6a7079;*. position: relative;} } @media (max-height: 649px) { }