/*
Theme Name: i2i 2026 Theme
Theme URI: http://www.squarerchilli.co.uk
Author: squarechilli
Author URI: http://www.squarerchilli.co.uk
Description: i2i Wordpress Theme is developed and maintained by squarechilli
Version: 1
*/



/*Global*/
:root {
  --main-font: 'Montserrat';
  --title-font: 'Montserrat';
  --color-main: #00471a; /*body text, dark green */
  --color-orange: #e24825; /*main orange colour*/
  --color-lightorange: #f48439; /*light orange for text contrast colour*/
  --color-lightgreen: #398f56; /*green, not as dark as main. good for backgrounds or text*/
  --color-lightergreen: #e4efe8; /*light green, for block backgrounds*/
  --color-lightestgreen: #f2f6f3; /*light green, for page backgrounds*/

  --color-black: #000;
  --color-white: #fff;
  
}


/*essentials*/
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body {position: relative; font: 20px var(--main-font), Arial, sans-serif; font-weight: 600; color: var(--color-main); background-color: var(--color-white); -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%; margin:0px; padding: 0 }
a {color: var(--color-lightblue); text-decoration: underline; outline: none;-webkit-transition: background-color 0.25s; -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s;  transition: background-color 0.25s;}
a:hover {text-decoration: underline;}
h1 {font-size: 86px;margin: 10px 0px;color: var(--color-lightblue);font-family: var(--title-font), 'Helvetica Neue';font-weight: 400}
h2 {position: relative;font-size: 40px;color: var(--color-lightblue); font-family: var(--title-font), 'Helvetica Neue'; padding-bottom: 7px;margin: 0;font-weight: 400}
h3 {margin: 10px 0;  color: var(--color-lightblue); font-family: var(--title-font), 'Helvetica Neue';}
.page h1 {padding-left: 80px; text-indent: -80px;}
p {line-height: 160%;}
button:focus,input:focus,select:focus,textarea:focus {outline: none;}
img {max-width: 100%;border: 0px;height: auto;width: auto\9; /* ie8 */}
.alignleft {float: left; margin-right: 15px}
.alignright {float: right; margin-left: 15px}
.aligncenter {text-align: center;}
.text-right {text-align: right !important}
.center {margin: 0 auto; text-align: center}
.noborder {border: 0px}
.nomargin {margin: 0 !important}
.clear {clear: both}
.clear:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
section {position: relative; clear: both}
.wrapper {position: relative;max-width: 1400px;margin: 0px auto;padding: 0;}
.wrapper:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
.narrow {max-width: 90%}
.narrower {max-width: 80%;}
.narrowest {max-width: 70%;}
.fullwidth {position: relative; width:auto;overflow:hidden; margin: 30px 0}
strong {}
input, textarea {font-family: var(--main-font); color: var(--color-main); }

.large {font-size: 1.2em}
.larger {font-size: 1.6em}
.largest {font-size: 2em}




/*header*/
header {position: absolute; display: block; height: 120px; z-index: 2; padding-top: 20px; left: 0; right: 0; border-top: 5px solid var(--color-main  ); background-color: var(--color-white); border-bottom: 3px solid var(--color-black)}
header .wrapper > div {display: grid;grid-template-columns: 120px 1fr 55px;width: 100%}

header .wrapper > div > div:last-of-type {text-align: right}
header .wrapper > div > div:last-of-type img {height: 72px}
.header-nav {text-align: right}
.phone {font-weight: 600}
.phone a {text-decoration: none} .phone a:hover {text-decoration: underline}
.phone i {color: var(--color-orange)}
.log-in a {position: relative; background-color: var(--color-orange); color: var(--color-white); text-decoration: none; font-weight: 600; padding: 5px 40px 5px 20px; border-radius: 20px 0 20px 20px}
.log-in a:after {position: absolute; width: 10px; height: 100%; right: 20px; top: 0; content: ''; background: url("images/arrow-lightorange.png"); background-repeat: no-repeat no-repeat; transition: all 200ms;
background-position: center center;
background-size: 10px;}
.log-in a:hover:after {right: 10px;}
.log-in .logout {background-color: var(--color-lightorange);}
.log-in a.logout:after {background: url("images/arrow-orange.png"); background-size: 10px;background-repeat: no-repeat no-repeat; background-position: center center;}

.main-menu {}
.main-menu ul {list-style-type: none; margin: 20px 0 30px; padding: 0 }
.main-menu ul li {position: relative;display: inline-block; font-size: 18px}
.main-menu ul li a {position: relative;text-decoration: none; color: var(--color-main); padding: 5px 10px; margin: 0 5px; font-weight: 600; background-color: transparent; transition: background-color 0.6s ease-in-out, color 0.2s; border-radius: 12px;border-top-right-radius: 0;}
.main-menu ul li:hover > a {background-color: var(--color-main); color: var(--color-white);}
.main-menu ul > li > a:has( ~ ul.sub-menu) {border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top-right-radius: 0;}
.main-menu > ul > li:last-of-type > a {margin-right: -10px}

.main-menu ul ul {display:none;position:absolute;top: 7px;left:5px;padding:5px !important;min-width: 270px;padding: 0;z-index: 2;background-color: var(--color-main);border-radius: 0 0 12px 12px}
.main-menu ul ul li {float:none;width:100%;border: 0;position: relative;display: block; min-height: 30px; margin: 0; text-align: left}
.main-menu ul ul a {display: block; color: var(--color-white); text-decoration: none; padding: 5px 10px}
.main-menu ul ul a:hover {text-decoration: underline;}
.main-menu ul ul ul {top:0; left:100%}


.sub-menu {animation: rotateMenu 400ms ease-in-out forwards; transform-origin: top center}
@-moz-keyframes rotateMenu {
  0% {transform: rotateX(-90deg);}
  70% {transform: rotateX(20deg);}
  100% {transform: rotateX(0deg);}
}
@-webkit-keyframes rotateMenu {
  0% {transform: rotateX(-90deg);}
  70% {transform: rotateX(20deg);}
  100% {transform: rotateX(0deg);}
}
@-o-keyframes rotateMenu {
  0% {transform: rotateX(-90deg);}
  70% {transform: rotateX(20deg);}
  100% {transform: rotateX(0deg);}
}
@keyframes rotateMenu {
  0% {transform: rotateX(-90deg);}
  70% {transform: rotateX(20deg);}
  100% {transform: rotateX(0deg);}
}

.page-id-7735 .content {position: relative; top: -120px;}


/*Homepage*/
.hero-homepage {position: relative;}
.hero-homepage .wp-block-buttons .wp-block-button:first-of-type {margin-right: 50px}
.hero-homepage .wp-block-button a {position: relative; font-weight: 700; border-top-right-radius: 0; padding-right: 50px; text-decoration: none}
.hero-homepage .wp-block-button a:hover {text-decoration: underline}
.hero-homepage .wp-block-button a:after {position: absolute; right: 0; top: 0; content: ''; display: block; width: 40px; height: 100%; border-bottom-right-radius: 12px; 
background: var(--color-lightgreen) url("images/arrow-green.png");
background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: 15px;}
.hero-homepage .wp-block-buttons .wp-block-button:last-of-type a:after {background: var(--color-lightorange) url("images/arrow-orange.png"); background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: 15px;}
.hero-homepage h1::first-line {text-indent: 30px; font-size: 80%}
.hero-homepage h1 {text-indent: 50px; line-height: 80px}
.hero-homepage-text {padding-left: 80px; text-indent: -80px;}





/*General*/
.has-colour-main-background-color {background-color: var(--color-main)}
.has-colour-orange-background-color {background-color: var(--color-orange)}
.has-colour-lightorange-background-color {background-color: var(--color-lightorange)}
.has-colour-lightgreen-background-color {background-color: var(--color-lightgreen)}
.has-colour-lightergreen-background-color {background-color: var(--color-lightergreen)}
.has-colour-lightestgreen-background-color {background-color: var(--color-lightestgreen)}
.has-colour-black-background-color {background-color: var(--color-black)}
.has-colour-white-background-color {background-color: var(--color-white)}

.has-colour-main-color {color: var(--color-main)}
.has-colour-orange-color {color: var(--color-orange)}
.has-colour-lightorange-color {color: var(--color-lightorange)}
.has-colour-lightgreen-color {color: var(--color-lightgreen)}
.has-colour-lightergreen-color {color: var(--color-lightergreen)}
.has-colour-lightestgreen-color {color: var(--color-lightestgreen)}
.has-colour-green-color {color: var(--color-green)}
.has-colour-white-color {color: var(--color-white)}

::-webkit-input-placeholder {color: var(--color-black);}
::-moz-placeholder {color: var(--color-black);}
:-ms-input-placeholder {color: var(--color-black);}
:-moz-placeholder {color: var(--color-black);}

.fancylink {background-color: var(--color-orange); color: var(--color-white); text-decoration: none; font-weight: 600; padding: 5px 20px; border-radius: 20px 0 20px 20px}

.talent-hero {margin: 160px 0}
.talent-hero .wp-block-columns .wp-block-column:first-of-type  {z-index: 1;}
.talent-hero .wp-block-columns .wp-block-column:first-of-type img {margin-top: 30px; border-radius: 50px 0 50px 50px;}
.talent-card {position: relative; background-color: #e4efe8; padding: 50px 15%; border-radius: 50px 0 50px 50px; margin-left: -80px; margin-top: -20px;}
.talent-card:after {position: absolute; border: 6px solid #398f56; content: ''; top: -30px; right: 30px; bottom: 30px; left: -30px; border-bottom-right-radius: 40px; border-top-left-radius: 50px; border-bottom-left-radius: 50px; z-index: 2; pointer-events: none;}
.talent-card .wp-block-button a {border-radius: 20px 0 20px 20px !important; padding: 5px 20px; text-decoration: none}
.talent-card .wp-block-button a:hover {text-decoration: underline}
.talent-card .wp-block-buttons {z-index: 3}

.headertext h2, .headertext span {display: inline-block}
.headertext h2 {margin-right: 60px}
.headertext a {text-decoration: none; color: var(--color-lightgreen)}
.headertext a:after {display: inline-block; content: ''; width: 15px; height: 15px; margin-left: 10px; background: url("images/arrow-lightgreen.png"); transition: all 200ms;
background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: 15px; }
.headertext a:hover:after {margin-left: 20px}

.job-slider {position: relative; margin: 60px 20px}
.job-slider .swiper-slide {background-color: var(--color-white); padding: 5px 20px 15px; border-radius: 20px 0 20px 20px}
.job-slider h3 {font-family: var(--main-font); color: var(--color-lightgreen); font-size: 20px}
.job-slider .wp-block-mfb-meta-field-block:first-of-type {text-transform: uppercase}
.job-slider .wp-block-mfb-meta-field-block {color: var(--color-lightgreen); font-size: 16px; margin-bottom: 3px}
.job-slider .prefix {margin-right: 0 !important}
.job-slider .wp-block-columns {margin: 20px 0 0 0}
.job-slider .wp-block-button__link {padding: 5px 12px; font-size: 16px; text-transform: uppercase; text-decoration: none}
.job-slider .wp-block-button__link:after {display: none}
.job-slider .wp-block-read-more {padding: 5px 12px; font-size: 16px; text-transform: uppercase; text-decoration: none; background-color: var(--color-lightergreen); color: var(--color-lightgreen); border-radius: 20px}
.job-slider .apply-link {background-color: var(--color-orange);color: var(--color-white); float: right}
.job-slider p {display:none}

.gradient-background, .is-style-gradient-background {
  padding: 80px 0;
  background: #F2F6F3;
  background: linear-gradient(
    to bottom,
    #F2F6F3 0%,
    #F2F6F3 calc(100% - 100px),
    #FFFFFF 100%
  );
}

.gradient-background-grey, .is-style-gradient-background-grey {
  padding: 80px 0;
  background: #e8e8e8;
  background: linear-gradient(
    to bottom,
    #e8e8e8 0%,
    #e8e8e8 calc(100% - 100px),
    #FFFFFF 100%
  );
}
.random-testimonial {display: flex;position: relative;font-size: 20px;color: var(--color-lightgreen);background-image: url('images/random-testimonial.png');background-repeat: no-repeat;background-size: 360px;background-position: 50%;align-items: center;flex-direction: column;justify-content: center;}
.random-testimonial p {text-align: center}
.job-search-testimonial {font-family: var(--title-font);font-weight: 100;font-size: 32px; height: 430px;background-size: 725px;}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    -webkit-text-fill-color: var(--color-main);
}

.wp-block-group.is-style-threecornerrounded {border-radius: 20px 0 20px 20px !important; padding: 30px;}
p.is-style-threecornerrounded {border-radius: 20px 0 20px 20px; padding: 15px;}
figure.is-style-threecornerrounded img {border-radius: 20px 0 20px 20px}
.is-style-threecornerrounded a {text-decoration: none}
.is-style-threecornerrounded a:hover {text-decoration: underline}
.is-style-threecornerrounded.has-colour-lightergreen-background-color a {color: var(--color-lightgreen); }

.sublinks {margin: 80px 0}
.sublinks h2 {font-family: var(--main-font); color: var(--color-lightgreen) !important; font-size: 30px; font-weight: 600;}
.sublinks .wp-block-group {border-radius: 20px 0 20px 20px !important; padding: 30px; background-color: var(--color-white)}
.sublinks p:has(a) {margin-bottom: 0}
.sublinks p a {display: block; position: relative; background-color: var(--color-lightergreen); color: var(--color-lightgreen); padding: 2px 10px; text-align: center; text-decoration: none; font-weight: 700; font-size: 12px; border-radius: 20px 0 20px 20px; text-transform: uppercase}

.wp-block-button__link {border-radius: 20px 0 20px 20px; text-decoration: none; padding: 8px 20px}


/*Gutenberg fixes*/
.alignwide {margin-left  : -80px;margin-right : -80px;}
.alignfull {margin-left:  calc( -100vw / 2 + 100% / 2 - 8px ) !important; margin-right: calc( -100vw / 2 + 100% / 2 - 8px ) !important; max-width: 100vw !important; display: block;}
.wp-block-buttons {display: flex}
.wp-block-columns  {gap: 40px;}
.wp-block-file a {color: var(--color-orange) !important}
.wp-block-file *+.wp-block-file__button {position: relative; background-color: var(--color-orange); color: var(--color-white) !important; text-decoration: none; font-weight: 600; padding: 5px 40px 5px 20px; border-radius: 20px 0 20px 20px}


/*After removing global styles in functions.php*/
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 1400px;
    margin-left: auto !important;
    margin-right: auto !important;
}


/*search page*/
.searchandfilter ul {margin: 0;padding: 0;display: grid !important;grid-template-columns: 1fr 1fr 1fr;grid-gap: 20px 30px;}
.searchandfilter ul li {margin: 0; padding: 0 !important;}
.searchandfilter ul li:before {display: none}
.searchandfilter ul li:first-of-type {grid-column: 1 / span 2;}
.searchandfilter label, .searchandfilter input, .searchandfilter select {width: 100%;height: 40px;font-size: 18px;padding-left: 20px;}
.searchandfilter input {border: 0; background: var(--color-white); border-radius: 20px 0 20px 20px}
.searchandfilter input[type='submit'] {background: var(--color-lightorange);color: var(--color-white); font-weight: 700; text-transform: uppercase}
.searchandfilter select {border: 0; background: var(--color-lightergreen); color: var(--color-main); font-weight: 700;border-radius: 20px 0 20px 20px; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url('images/arrow-lightgreen-down.png'); background-repeat: no-repeat; background-position: 95% ;  background-size: 20px;  cursor: pointer}
.searchandfilter ::-webkit-input-placeholder {color: var(--color-orange);}
.searchandfilter ::-moz-placeholder {color: var(--color-orange);}
.searchandfilter :-ms-input-placeholder {color: var(--color-orange);}
.searchandfilter :-moz-placeholder {color: var(--color-orange);}

.bh-job-list {display: grid;grid-template-columns: 1fr 1fr;grid-gap: 30px;margin-top: 60px;}
.bh-job-list-item {position: relative; background-color: var(--color-white); padding: 25px 20px 80px 20px; border-radius: 20px 0 20px 20px;}
.bh-job-list-item h2 {font-family: var(--main-font); color: var(--color-lightgreen) !important; font-size: 30px; font-weight: 600; margin: 0}
.bh-job-list-item h2 a {color: var(--color-lightgreen); text-decoration: none}
.bh-job-list-item span {display: block}
.bh-job-list-item span p {display: inline-block; color: var(--color-lightgreen); margin: 0; text-transform: uppercase; font-size: 18px; font-weight: 600; margin-right: 20px; color: #9cc7aa}
.bh-job-list-item .jobdetail-excerpt {font-weight: 400;}
.bh-job-list-item > div:last-of-type {position: absolute; bottom: 25px; display: grid; grid-template-columns: 170px 210px; left: 20px; right: 20px}
.bh-job-list-item > div:last-of-type a {position: relative; background-color: var(--color-lightergreen); color: var(--color-lightgreen); padding: 8px 20px; text-align: center; text-decoration: none; font-weight: 700; border-radius: 20px 0 20px 20px; text-transform: uppercase}
.bh-job-list-item > div:last-of-type a:last-of-type {background-color: var(--color-lightorange); color: var(--color-white); margin-left: 10px; text-align: right; padding-left: 40px}

.job-list-splitter {grid-column: 1 / span 2; text-align: center}
.job-list-splitter .talent-hero {margin: 100px auto 40px auto}
.job-list-splitter .talent-hero .wp-block-columns {display: flex;justify-content: center;}

.pagination {position: relative; margin: 50px 0; text-align: center}
.pages, .nextpostslink, .previouspostslink {display: none !important}
.pagination .page, .pagination span {display: inline-block; margin: 0 10px; width: 20px; height: 20px; font-size: 0; background-color: #ccdad1; border-radius: 20px 0 20px 20px;}
.pagination .current {background-color: var(--color-lightorange)}


/*Single Jobs*/
.single-jobs {background-color: var(--color-lightestgreen)}
.single-jobs header {border-top-color: var(--color-lightorange)}
.single-jobs .content {padding-top: 230px; color: var(--color-lightgreen)}
.single-job-page {display: grid; grid-template-columns: 2fr 1fr; grid-gap: 40px;}
.back-to-search a {text-transform: uppercase; text-decoration: none; margin-left: 30px; color: #9cc7aa}
.back-to-search a:before {content: '<'; margin-right: 10px}
.pre-header, .is-style-pre-header {margin: 30px 0 0 0; font-size: 38px; font-family: var(--title-font); font-weight: 100; color: var(--color-lightgreen); margin-left: 30px}
.is-style-pre-header {margin-left: 0}
.single-jobs h1 {margin: 0; font-size: 72px; margin-left: 30px}
.date-ref {display: block; margin: 20px 0; margin-left: 30px}
.date-ref > p {display: inline-block; margin-right: 50px; color: var(--color-main)}
.date-ref > p span {display: inline-block; color: var(--color-lightgreen); margin-left: 10px}
.job-details {display: grid; width: 66%; grid-template-columns: 1fr 1fr 1fr 1fr; margin-bottom: 40px; margin-left: 30px}
.job-details > div > div:first-of-type, .job-details > div > div:nth-of-type(3) {text-transform: uppercase; font-size: 70%}
.job-details > div > div:nth-of-type(3) {margin-top: 20px}
.job-details > div > div:last-of-type, .job-details > div > div:nth-of-type(2)  {color: var(--color-main)}
.job-details > div:last-of-type {display: flex;align-items: flex-end;}
.job-details > div:last-of-type a {background-color: var(--color-lightorange); color: var(--color-white); margin-left: 10px; text-align: right; padding: 5px 10px 5px 40px; border-radius: 20px 0 20px 20px;  text-decoration: none}
.job-desc {background-color: var(--color-white); border-radius: 20px 0 20px 20px; padding: 30px}
.job-desc h1, .job-desc h2, .job-desc h3, .job-desc h4 {font-family: var(--main-font)}
.job-desc h2 {font-size: 28px; font-weight: 600}
.job-desc p, .job-desc li {font-size: 18px; font-weight: 400}
.job-desc ul {margin: 30px 0; padding: 0 0 0 16px}
.job-desc li {list-style: none; line-height: 24px; margin-bottom: 8px}
.job-desc li:before {content: '\2022'; display: block; position: relative; max-width: 0; max-height: 0; top: -6px; left: -20px; color: var(--color-lightorange); font-size: 60px;}
.interested {display: block; margin: 30px 0;  background-color: var(--color-lightergreen); padding: 1px 30px; border-radius: 20px 0 20px 20px;}
h2.apply {color: var(--color-lightorange); font-family: var(--main-font); font-size: 28px; font-weight: 600}
.single-job-page input {border: 0; background-color: var(--color-white); color: var(--color-main); padding: 5px 10px 5px 40px; border-radius: 20px 0 20px 20px;}
.single-job-page input[type="file"] {padding: 7px 0 7px 8px; font-size: 14px}
::file-selector-button {border: 0; background-color: var(--color-lightorange); color: var(--color-white);text-align: right; padding: 5px 10px 5px 40px; border-radius: 20px 0 20px 20px;  text-decoration: none; text-transform: uppercase; font-size: 14px; font-weight: 600}
.gform_fileupload_rules {text-transform: uppercase; color: #9cc7aa; margin-top: 0 !important}
.gfield {margin-bottom: 15px}
.gform_button {background-color: var(--color-lightorange) !important; color: var(--color-white) !important; text-align: right; padding: 5px 20px 5px 60px !important; border-radius: 20px 0px 20px 20px; font-weight: 800; font-size: 24px}
.single-job-page .gform_footer:after {position: relative;  display: block; content: 'Good Luck'; color: #9cc7aa; font-family: var(--title-font); font-size: 30px; font-weight: 400; top: 40px}
.single-job-page form {margin-bottom: 100px}
	
.single-job-page-right .job-owner .team-list-image {margin-bottom: 20px}
.single-job-page-right .job-owner p {margin: 0}
.single-job-page-right .job-owner p:nth-of-type(2) {color: var(--color-main)}
.single-job-page-right .job-owner h2 a {display: block; text-decoration: none; margin-bottom: 20px}
.single-job-page-right .job-owner i {color: var(--color-lightorange)}
.recruiter-phone, .recruiter-email {color: var(--color-main); margin-bottom: 20px}
.team-excerpt {color: var(--color-main); margin: 40px 0 60px}
.single-job-page-right .job-owner div:last-of-type a {background-color: var(--color-orange); color: var(--color-white); margin-left: 10px; text-align: right; padding: 5px 10px 5px 40px; border-radius: 20px 0 20px 20px;  text-decoration: none; float: right}


/*Our Team CPT*/
.team-list {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 20px; margin-top: 40px}
.team-list-item {position: relative; background-color: var(--color-white); padding: 20px 20px 45px 20px; border-radius: 5px}
.team-list-item h2 {font-size: 24px; margin: 10px 0 0 0}
.team-list-item p {font-size: 18px; margin: 0 0 10px 0}
.team-list-item h2 a {color: var(--color-main); text-decoration: none}
.team-list-item img {width: 100%}
.team-list-item > div:last-of-type {position: absolute;bottom: 15px;display: grid;grid-template-columns: 2fr 1fr;left:  20px;right: 20px; height:27px}
.team-list-item > div:last-of-type span:first-of-type a {position: relative; background-color: var(--color-orange); color: var(--color-white); text-decoration: none; font-size: 14px; font-weight: 600; padding: 5px 40px 5px 20px; border-radius: 20px 0 20px 20px}
.team-list-item > div:last-of-type span:first-of-type a:after {position: absolute; width: 10px; height: 100%; right: 20px; top: 0; content: ''; background: url("images/arrow-lightorange.png"); background-repeat: no-repeat no-repeat; transition: all 200ms;
background-position: center center;
background-size: 10px;}
.team-list-item > div:last-of-type span:first-of-type a:hover:after {right: 10px;}

.team-list-item > div:last-of-type span:last-of-type {text-align: right}
.team-list-item > div:last-of-type span:last-of-type i {position: relative; font-size: 26px; top: -2px; color: var(--color-lightgreen); }


/*Blog*/
.blog-list {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 20px; margin-top: 40px}
.blog-list-item {position: relative; background-color: var(--color-white); padding: 20px 20px 0px 20px; border-radius: 5px}
.blog-list-item h2 {font-size: 24px; margin: 0}
.blog-list-item h2 a {color: var(--color-main); text-decoration: none}
.blog-list-item img {border-radius: 20px 0 20px 20px; margin-bottom: 10px}

/*Blog Single*/
.single-post .back-to-search {margin-bottom: 30px}
.single-post .back-to-search a {margin-left: 0;}
.single-post .content h2.has-colour-white-color {background-color: var(--color-white); color: var(--color-main); border-radius: 20px 0 20px 20px}


/*Forms other*/
input, textarea, select {border: 0; background-color: var(--color-lightergreen); color: var(--color-main); padding: 5px 10px 5px 40px; border-radius: 20px 0 20px 20px;}
input[type="file"] {padding: 7px 0 7px 8px; font-size: 14px}
/*gform_0 is the login form shortcocde*/ #gform_0 {text-align: center; margin-top: 20px}
#gform_0 input[type='text'], #gform_0 input[type='password'] {width: 80%}


/*footer*/
#site-footer {position: relative;}
#site-footer a {color: var(--color-main); text-decoration: none}
#site-footer a:hover {color: var(--color-main); text-decoration: underline}
#site-footer ul {margin-top: 34px;}
#site-footer ul, #site-footer li {display: block !important}
#site-footer li {margin-bottom: 10px}

.footer-logo {position: absolute; top: -150px}


footer {background-color: var(--color-main); color: var(--color-white); padding: 40px 0}
footer a {color: var(--color-white); text-decoration: none}
footer p {margin: 0}
footer li {display: block !important}
footer .wrapper {display: grid; grid-template-columns: 1fr 400px}
footer .wrapper div:first-of-type p a {margin: 0 30px}
footer .wrapper div:last-of-type {display: flex; align-items: flex-start;justify-content: flex-end;}

footer .wrapper div:last-of-type p:last-of-type img {vertical-align: middle; margin-left: 10px}


/*Responsive Menu*/
.hamb {display: none;}
#side-menu {display: none;}
.submenu-toggle {display:none}


/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (min-width: 1100px) {
		 	.main-menu ul li:hover > ul {display:block}
		}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 813px) and (max-width: 1099px) {
			.wrapper {width: 100%;padding: 0 1%;}
			.main-menu ul li:hover > ul {display:block}

		}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (min-width: 481px) and (max-width: 812px)  {
       .main-menu ul li:hover > ul {display:block}
			
			
			
		}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 480px) {
            body {font-size: 16px}
			.wrapper {padding: 0 1%}
            .logo {width: 80%}
			.header-nav {margin-top: 60px; margin-right: 15px}
			.phone {margin-bottom: 20px}
			header .wrapper > div > div:last-of-type {display:none}

			.hero-homepage h1::first-line {text-indent: 0; font-size: 42px}
			.hero-homepage h1 {text-indent: 0; line-height: 54px;  font-size: 54px}
			.wp-container-core-group-is-layout-830ee4f8 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {max-width: 100% !important}
			.hero-homepage .wp-block-buttons, .hero-homepage .wp-block-button {display: block !important; font-size: 146x; margin: 0 !important; padding: 0 !important; width: 100% !important}
			.hero-homepage .wp-block-button {margin-bottom: 20px !important}
			.hero-homepage-text {font-size: 20px !important}
			.hero-homepage-text br {display: none}
			.hero-homepage-text br:after {content: ' '}
			.wp-container-core-group-is-layout-695219b8 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {max-width: 100% !important}
		
			.alignfull {margin-left: 0 !important; margin-right: 0 !important;  padding-left: 1% !important; padding-right: 1% !important; max-width: 100vw !important;}
			.wp-block-group-is-layout-constrained p, .wp-block-group-is-layout-constrained h2, .wp-block-group-is-layout-constrained h3 {margin: 20px 10px !important}
			.wp-block-group-is-layout-constrained .headertext span {margin: 0 10px !important}	
			.fancylink {display: inline-block}

			.talent-hero {margin: 50px 0}
			.talent-card {margin: 20px 0 0 20px;  padding: 50px 6%;}
			.talent-card:after {top: -10px; right: 10px; bottom: 10px; left: -10px;}

			.pre-header, .is-style-pre-header, .wp-block-group-is-layout-constrained p.is-style-pre-header {font-size: 24px;margin: 0 !important;}
			.page h1 {padding-left: 0; text-indent: 0;}
			h1 {font-size: 40px}
			h2 {font-size: 34px}
			h3 {font-size: 28px}
		
			.random-testimonial {font-size: 16px}
			.back-to-search a {margin-left: 0}
			.gradient-background, .is-style-gradient-background {padding-top: 20px}
		
			.team-list {grid-template-columns: 1fr 1fr}
			.team-list-item > div:last-of-type {grid-template-columns: 1fr 28px;}
			.team-list-item > div:last-of-type span:last-of-type i {font-size: 31px; top: -5px}
		
			.searchandfilter ul {grid-template-columns: 1fr}
			.bh-job-list {display: block}
			.bh-job-list-item {margin-bottom: 20px}
			.bh-job-list-item h2 {margin: 0 !important}
			.bh-job-list-item span p  {font-size: 16px; margin: 0 !important}
			.bh-job-list-item span p:nth-of-type(2) {margin: 0 10px !important}
		
			.single-jobs h1 {margin: 0; font-size: 42px; margin-left: 0; margin-bottom: 20px}
			.date-ref {margin: 0}
			.date-ref > p {display: block; margin: 0}
			.job-details {grid-template-columns: 1fr 1fr 1fr; width: 100%; margin: 20px 0 20px 0}
			.job-details > div:last-of-type {grid-column: 1 / -1}
			.job-details > div:last-of-type a {margin: 20px 0; width: 100%; text-align: center}
		
			.single-job-page {grid-template-columns: 1fr}
		
			.single-post .content h2.has-colour-white-color {padding: 10px 20px; font-size: 28px}
		

			footer {font-size: 14px}
			footer .wrapper {display: block;}
			footer .wrapper div:first-of-type img {display: block; width: 60%}
            footer .wrapper div:first-of-type p a {margin: 0 10px}
			footer .wrapper div:last-of-type {display: block; margin-top: 30px}
			.footer-logo {top: -50px}
			.footer-logo img {width: 100px !important}
			#site-footer {padding-top:70px !important}
			#site-footer .wp-block-columns .wp-block-column:last-of-type figure {float: none}
		
		
			/* Nav menu on mobile */
            .main-menu{z-index:99; width: 100%; height: 100%; position: fixed; left: 0;right: 0; background-color: var(--color-main); overflow: hidden; top: 75px /*set to height of header*/}
            .main-menu ul li {display: block; text-align: left;}
            .menu a{display: block;}
            .menu a:hover{background-color: var(--color-main);}
            .main-menu{max-height: 0;transition: max-height .5s ease-out;}
			.main-menu ul li a {color:  var(--color-white);}

            /* Menu Icon */
            .hamb{display: block; position: fixed; right: 2px; top: 26px; border-radius: 5px; cursor: pointer; float: right; padding: 20px 20px; background-color: var(--color-lighterblue); z-index: 999}
            .hamb-line {background: var(--color-main); display: block; height: 2px; position: relative; width: 24px;}
            .hamb-line::before,
            .hamb-line::after{background: var(--color-main); content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%;}
            .hamb-line::before{top: 5px;}
            .hamb-line::after{top: -5px;}

            .side-menu {display: none;}

            /* Toggle menu icon */
            .side-menu:checked ~ nav{max-height: 100%;}
            .side-menu:checked ~ .hamb .hamb-line {background: transparent;}
            .side-menu:checked ~ .hamb .hamb-line::before {transform: rotate(-45deg); top:0;}
            .side-menu:checked ~ .hamb .hamb-line::after { transform: rotate(45deg); top:0;}
		
		
		
		/* Parent menu layout */
.main-menu li.menu-item-has-children{
    position:relative;
}

.main-menu li.menu-item-has-children > a{
    display:block;
    padding-right:55px; /* room for button */
}

/* Toggle button */
.submenu-toggle{
    position:absolute;
    top:0;
    right:0;
    width:50px;
    height:100%;
    border:0;
    background:none;
    color:#fff;
    cursor:pointer;
    font-size:20px;
	display:block;
}

/* Plus icon */
.submenu-toggle::before{
    content:"+";
    display:block;
    transition:.2s;
	position: absolute; top: 10px
}

/* Change to minus when open */
.submenu-toggle.open::before{
    content:"−";
}

/* Hide submenus initially */
.main-menu .sub-menu{
    display:none;
    position:static;
    width:100%;
    background:rgba(255,255,255,.08);
    padding-left:20px;
}
		
		
		
		
		
        }