/*!
Theme Name:   Enable Group Child Theme
Theme URI:    http://www.enable-team.com
Description:  An Enable child theme 
Author:       EBClark UX Design
Author URI:   https://www.ebclark.co.uk/
Template:     enable
Version:      1.0.0
Text Domain:  enablechild
*/

body { --site: #a4a7a9 !important; --hire: #00A0DF !important; --infra: #A12B2A !important; --design: #59AF31 !important; --resourcing: #FF5F00 !important; --welfare: #57b6b2 !important; --logistics: #EAAA00 !important; --group: #a4a7a9 !important; }


.home .group-nav { display: none; }


header .container { padding: 1rem 1rem 2rem !important; }

header .main-navigation ul li.social.linkedin a { background-image: url('images/linkedin.svg'); }
header .main-navigation ul li.social.twitter a { background-image: url('images/twitter.svg'); }
header .main-navigation ul li.social.insta a { background-image: url('images/insta.svg'); }
header .main-navigation ul li.social.facebook a { background-image: url('images/facebook.svg'); }

header.page-has-bg-img .main-navigation ul li.social.linkedin a { background-image: url('images/linkedin-wht.svg'); }
header.page-has-bg-img .main-navigation ul li.social.twitter a { background-image: url('images/twitter-wht.svg'); }
header.page-has-bg-img .main-navigation ul li.social.insta a { background-image: url('images/insta-wht.svg'); }
header.page-has-bg-img .main-navigation ul li.social.facebook a { background-image: url('images/facebook-wht.svg'); }

header .main-navigation button.menu-toggle { top: 0.75rem !important; }
header .main-navigation ul { margin-top: .5rem !important; }
header .main-navigation .sub-menus { top: 2.25rem !important; }

header .main-navigation .menus { top: 3rem !important; }

@media screen and (min-width: 30rem) {
	header .container { padding: 1rem !important; }
	header .main-navigation button.menu-toggle { top: 1rem !important; }
	header .main-navigation .sub-menus { top: .5rem !important; right: 3.5rem !important; }
}
@media screen and (min-width: 64rem) {
	header .container { padding: 1rem 1rem 1rem 3rem !important; align-items: center; }
	header .main-navigation ul { margin-top: 0.5rem !important; }
	header .main-navigation ul ul.sub-menu { margin-top: 1rem !important; }
	header .main-navigation .sub-menus { position: relative !important; top: -.3rem !important; right: auto !important; }
	header .main-navigation .sub-menus ul { margin-top: 0 !important; }

	header .main-navigation .menus { top: auto !important; }

	.main-navigation ul ul ul {
		left: 12rem;
	}
	header .main-navigation ul ul li a,
		header .main-navigation ul ul li.menu-item-has-children a { width: 12rem !important; }
}


.hero-container.group section.hero .bg-img { filter: grayscale(0); }
.hero-container.group section.hero h1 { margin: 0 }
.hero-container.group section.hero ul { position: relative; list-style: none; margin: 0 auto; padding: 0; max-width: 40rem; }
.hero-container.group section.hero ul li { padding: 2rem; background: #fff; margin: 1rem 0; border: 2px solid var(--site); }
.hero-container.group section.hero ul li p { text-transform: none; font-weight: 400; }

.hero-container.group section.hero ul li.infrastructure { border-color: var(--infra); }
.hero-container.group section.hero ul li.hire { border-color: var(--hire); }
.hero-container.group section.hero ul li.resourcing { border-color: var(--resourcing); }
.hero-container.group section.hero ul li.design { border-color: var(--design); }
.hero-container.group section.hero ul li.welfare { border-color: var(--welfare); }
.hero-container.group section.hero ul li.logistics { border-color: var(--logistics); }

.hero-container.group.tag section.hero ul li { border: 0; }
.hero-container.group.tag section.hero ul li:first-child,
	.hero-container.group.tag section.hero ul li:last-child { border: 0; background: rgba(61,57,53,.75); }
.hero-container.group.tag section.hero ul li:last-child a { font-size: 2rem; color: #fff; line-height: 1.2; }
.hero-container.group.tag section.hero ul li:last-child a:after { content: '\e902'; font-family: 'icomoon'; font-size: 1.5rem; padding-left: .25rem; }

.hero-container.group section.hero ul li img { width: 100% !important; }

@media screen and (min-width: 30rem) {
	.hero-container.group section.hero ul { display: flex; justify-content: space-between; flex-wrap: wrap; }
	.hero-container.group section.hero ul li { width: 48%; }
}

@media screen and (min-width: 64rem) {
	.hero-container.group section.hero { padding-top: 0; padding-bottom: 0; margin: 3rem 0; }
	.hero-container.group.tag section.hero { padding-top: 4rem; padding-bottom: 4rem; margin: 0 0; }
	.hero-container.group section.hero ul { max-width: 80rem; }
	.hero-container.group section.hero h1,
		.hero-container.group.tag section.hero ul li:last-child a { font-size: 2.5rem; }
	.hero-container.group.tag section.hero ul li { width: 23%; }
	.hero-container.group section.hero ul li { width: 23%; position: relative; }
	.hero-container.group section.hero ul li a { display: block; padding-bottom: 1.5rem; }
	.hero-container.group section.hero ul li span.more { position: absolute; bottom: 2rem; left: 2rem; }
}


section.content-list ul li.button .more { color: #fff !important; }


a.brand { display: inline-block; text-transform: uppercase; background: var(--site); color: #fff !important; font-weight: 700; padding: 0 3px; font-size: .85rem; text-decoration: none; }


main .jobs .has-menu { display: block !important; }
main .jobs .has-menu h4 { color: var(--black) !important; }


.jobs nav.left { width: 80% !important; max-width: 64rem !important; margin: 0 10% !important; }
.jobs nav.left ul { margin: 0 0 0 0 !important; }
.jobs nav.left ul li label { width: auto !important; display: inline !important; }


main .jobs .has-menu .content { width: 80% !important; max-width: 64rem !important; margin: .625rem 10% 0 !important; }
main .jobs .has-menu .content .item { margin: 0 0 .625rem; border: 2px solid #3D3935; }
main .jobs .has-menu .content .item.Infrastructure { border: 2px solid var(--infra); }
main .jobs .has-menu .content .item.Design { border: 2px solid var(--design); }
main .jobs .has-menu .content .item.Hire { border: 2px solid var(--hire); }
main .jobs .has-menu .content .item.Resourcing { border: 2px solid var(--site); }
main .jobs .has-menu .content .item.Welfare { border: 2px solid var(--welfare); }
main .jobs .has-menu .content .item.Group { border: 2px solid var(--group); }

main .jobs .has-menu .content .item .copy { padding: 1rem; }
main .jobs .has-menu .content .item .copy h2 { margin: 0; text-transform: uppercase; font-size: 1.17rem; }
main .jobs .has-menu .content .item .copy h2 a { text-decoration: none; }
main .jobs .has-menu .content .item .copy h3 { display: flex; align-item: center; justify-content: flex-start; }
main .jobs .has-menu .content .item .copy h3 img { width: 1.25rem !important; margin-right: .75rem; }
main .jobs .has-menu .content .item .copy h3 span { display: inline-block; }
main .jobs .has-menu .content .item .copy a.more { color: #3D3935; }

main .jobs .has-menu .content .item.Infrastructure .copy h2 a:hover,
	main .jobs .has-menu .content .item.Infrastructure .copy a.more { color: var(--infra); }
main .jobs .has-menu .content .item.Design .copy h2 a:hover,
	main .jobs .has-menu .content .item.Design .copy a.more { color: var(--design); }
main .jobs.has-menu .content .item.Hire .copy h2 a:hover,
	main .jobs .has-menu .content .item.Hire .copy a.more { color: var(--hire); }
main .jobs .has-menu .content .item.Resourcing .copy h2 a:hover,
	main .jobs .has-menu .content .item.Resourcing .copy a.more { color: var(--site); }
main .jobs .has-menu .content .item.Welfare .copy h2 a:hover,
	main .jobs .has-menu .content .item.Welfare .copy a.more { color: var(--welfare); }
main .jobs .has-menu .content .item.Group .copy h2 a:hover,
	main .jobs .has-menu .content .item.Group .copy a.more { color: var(--group); }

main .jobs .has-menu .content nav.pagination { margin-bottom: 2rem; text-align: center; }
main .jobs .has-menu .content nav.pagination a,
	main .jobs .has-menu .content nav.pagination span { display: inline-block; font-weight: 700; text-decoration: none; padding: 0 .5rem; }
main .jobs .has-menu .content nav.pagination a.current,
	main .jobs .has-menu .content nav.pagination span.current { color: var(--site); }


section.post.job { max-width: 70rem; margin: auto; }

section.post.job h2 { font-size: 1rem; font-weight: 700; color: #3D3935; text-transform: uppercase; margin-top: 2rem; }
.Infrastructure section.post.job h2 { color: var(--infra); }
.Design section.post.job h2 { color: var(--design); }
.Hire section.post.job h2 { color: var(--hire); }
.Resourcing section.post.job h2 { color: var(--site); }
.Welfare section.post.job h2 { color: var(--welfare); }
.Group section.post.job h2 { color: var(--group); }

section.post.job p.job-details { margin: 0 0 0.5rem 0 !important; }

section.post.job .buttons { margin: 2rem 0 1rem; }
section.post.job .buttons a.button { margin-right: 1rem; margin-bottom: 1rem; background: #3D3935; }
section.post.job a.button.reverse:before { content: '\e901'; font-family: 'icomoon'; font-size: .85rem; padding-right: .25rem; }
section.post.job a.button.reverse:after { content: ''; padding-left: 0; }
.Infrastructure section.post.job .buttons a.button { background: var(--infra); }
.Design section.post.job .buttons a.button { background: var(--design); }
.Hire section.post.job .buttons a.button { background: var(--hire); }
.Resourcing section.post.job .buttons a.button { background: var(--site); }
.Welfare section.post.job .buttons a.button { background: var(--welfare); }
.Group section.post.job .buttons a.button { background: var(--group); }

section.post.job .job-desc { margin-bottom: 2rem; }
section.post.job .job-desc ul { list-style: none; margin: 0; padding: 0; }
section.post.job .job-desc ul li { padding: 0 0 0 2rem; margin: 0; position: relative; }
section.post.job .job-desc ul li:before { content: '\25A0'; font-size: 2rem; position: absolute; top: -6px; left: 0; line-height: 1; color: #3D3935; }
.Infrastructure section.post.job .job-desc ul li:before { color: var(--infra); }
.Design section.post.job .job-desc ul li:before { color: var(--design); }
.Hire section.post.job .job-desc ul li:before { color: var(--hire); }
.Resourcing section.post.job .job-desc ul li:before { color: var(--site); }
.Welfare section.post.job .job-desc ul li:before { color: var(--welfare); }
.Group section.post.job .job-desc ul li:before { color: var(--group); }

section.post.job .latest-jobs .button { margin-bottom: 2rem; }
section.post.job .latest-jobs ul { list-style: none; margin: 0; padding: 0; }
section.post.job .latest-jobs ul li { border: 2px solid #3D3935; padding: 1rem; margin-bottom: 2rem;  }
section.post.job .latest-jobs ul li.Infrastructure  { border: 2px solid var(--infra); }
section.post.job .latest-jobs ul li.Design  { border: 2px solid var(--design); }
section.post.job .latest-jobs ul li.Hire  { border: 2px solid var(--hire); }
section.post.job .latest-jobs ul li.Resourcing  { border: 2px solid var(--site); }
section.post.job .latest-jobs ul li.Welfare  { border: 2px solid var(--welfare); }
section.post.job .latest-jobs ul li.Group  { border: 2px solid var(--group); }

section.post.job .latest-jobs ul li h3 { font-size: 1rem; font-weight: 700; text-transform: uppercase; }
section.post.job .latest-jobs ul li h3 a { text-decoration: none; }
section.post.job .latest-jobs ul li a.more { color: #3D3935; }
section.post.job .latest-jobs ul li.Infrastructure h3 a:hover,
	section.post.job .latest-jobs ul li.Infrastructure a.more { color: var(--infra); }
section.post.job .latest-jobs ul li.Design h3 a:hover,
	section.post.job .latest-jobs ul li.Design a.more { color: var(--design); }
section.post.job .latest-jobs ul li.Hire h3 a:hover,
	section.post.job .latest-jobs ul li.Hire a.more { color: var(--hire); }
section.post.job .latest-jobs ul li.Resourcing h3 a:hover,
	section.post.job .latest-jobs ul li.Resourcing a.more { color: var(--site); }
section.post.job .latest-jobs ul li.Welfare h3 a:hover,
	section.post.job .latest-jobs ul li.Welfare a.more { color: var(--welfare); }
section.post.job .latest-jobs ul li.Group h3 a:hover,
	section.post.job .latest-jobs ul li.Group a.more { color: var(--group); }


section.content-list ul li.jobs { border: 0 !important; }
section.content-list ul li.jobs.button .more { color: #fff !important; }

section.content-list ul li.jobs .copy { border: 2px solid #3D3935; height: 100%; }
section.content-list ul li.jobs .copy.Infrastructure { border-color: var(--infra) !important; }
section.content-list ul li.jobs .copy.Design { border-color: var(--design) !important; }
section.content-list ul li.jobs .copy.Hire { border-color: var(--hire) !important; }
section.content-list ul li.jobs .copy.Resourcing { border-color: var(--site) !important; }
section.content-list ul li.jobs .copy.Welfare { border-color: var(--welfare) !important; }
section.content-list ul li.jobs .copy.Group { border-color: var(--group) !important; }

section.content-list ul li.jobs .copy h3 a { color: #3D3935 !important; }
section.content-list ul li.jobs .copy h3 a:hover { color: #3D3935 !important; }

section.content-list ul li.jobs .copy.Infrastructure h3 a:hover,
	section.content-list ul li.jobs .copy.Infrastructure a.more { color: var(--infra) !important; }
section.content-list ul li.jobs .copy.Design h3 a:hover,
	section.content-list ul li.jobs .copy.Design a.more { color: var(--design) !important; }
section.content-list ul li.jobs .copy.Hire h3 a:hover,
	section.content-list ul li.jobs .copy.Hire a.more { color: var(--hire) !important; }
section.content-list ul li.jobs .copy.Resourcing h3 a:hover,
	section.content-list ul li.jobs .copy.Resourcing a.more { color: var(--site) !important; }
section.content-list ul li .jobs.copy.Welfare h3 a:hover,
	section.content-list ul li.jobs .copy.Welfare a.more { color: var(--welfare) !important; }
section.content-list ul li.jobs .copy.Group h3 a:hover,
	section.content-list ul li.jobs .copy.Group a.more { color: var(--group) !important; }


section .searchandfilter { max-width: 64rem; margin: 0 auto; }
section .searchandfilter ul { margin: 0; padding: 0 10%; }
section .searchandfilter ul li,
	section .searchandfilter ul li input,
	section .searchandfilter ul li label { cursor: pointer; }
section .searchandfilter ul li h4 { text-transform: uppercase; color: var(--black); }
section .searchandfilter ul li ul { padding: 0; }
section .searchandfilter ul li ul li { border: 2px solid var(--site); padding: .5rem 1rem .5rem .5rem; margin-bottom: .5rem; text-transform: uppercase; font-weight: 700; }
section .searchandfilter ul li ul li.checked,
	section .searchandfilter ul li ul li.sf-option-active { background: var(--site); color: #fff !important; }
nav.left .searchandfilter ul li ul li.checked label,
	nav.left .searchandfilter ul li ul li.sf-option-active label { color: var(--site) !important; }
section .searchandfilter ul li ul li input[type=checkbox],
	nav.left .searchandfilter ul li ul li input[type=checkbox] { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
section .searchandfilter ul li ul li label { width: 100% !important; display: block !important; }
nav.left .searchandfilter ul li ul li label { padding-left: 0 !important; cursor: pointer; }

nav.left .searchandfilter ul li { padding: 0 0 .5rem; }
nav.left .searchandfilter ul li h4 { cursor: pointer; }
nav.left .searchandfilter ul li h4:after { content: '\e902'; font-family: 'icomoon'; font-size: .75rem; padding-left: .25rem; }
nav.left .searchandfilter ul li h4.open:after { content: '\e900'; }
nav.left .searchandfilter ul li ul { display: none; }

@media screen and (min-width: 30rem) {
	section .searchandfilter ul { padding: 0 20%; }

	nav.left .searchandfilter { width: 100%; }

	.jobs nav.left { width: 60% !important; margin: 0 20% !important; }
	main .jobs .has-menu .content { width: 60% !important; margin: 2rem 20% 0 !important; }
	main .jobs .has-menu .content nav.pagination { width: 100%; }
}
@media screen and (min-width: 48rem) {
	section .searchandfilter ul { padding: 0 0; }
	section .searchandfilter ul li { display: flex; }
	section .searchandfilter ul li h4 { width: 25%; }
	section .searchandfilter ul li h4:after { content: '\e902'; font-family: 'icomoon'; font-size: .85rem; padding-left: .25rem; }
	section .searchandfilter ul li ul { width: 75%; display: flex; justify-content: flex-start; flex-wrap: wrap; }
	section .searchandfilter ul li ul li { width: 32%; margin-right: 2%; display: inline-block; }
	section .searchandfilter ul li ul li:nth-child(3n) { margin-right: 0; }

	nav.left .searchandfilter ul { display: flex; width: 100%; justify-content: flex-start; flex-wrap: nowrap; }
	nav.left .searchandfilter ul li { width: 22%; padding: 0 0; }
	nav.left .searchandfilter ul li:last-child { width: 16%; text-align: right; }
	nav.left .searchandfilter ul li h4 { padding-top: .65rem; }

	.jobs nav.left { width: 100% !important; margin: 0 auto !important; }
	main .jobs .has-menu .content { width: 100% !important; margin: 2rem auto 0 !important; display: flex; justify-content: space-between; flex-wrap: wrap; }
	main .jobs .has-menu .content .item { width: calc((100% - 20px) / 3); margin: 0 0 1rem 0; }

	section.post.job .container { display: flex; justify-content: space-between; }
	section.post.job .container .job-desc { width: 65% }
	section.post.job .container .latest-jobs { width: 28% }
}
@media screen and (min-width: 64rem) {
	section .searchandfilter ul li h4 { width: 20%; }
	section .searchandfilter ul li ul { width: 80%; }
}


/* CONTACT MAP */
.contact-map .container { position: relative; text-align: center; }
.contact-map h2 { text-transform: uppercase; font-size: 1.25rem; }

.contact-map .mapSVG { width: 100%; height: auto !important; margin: 0 auto; max-width: 40rem; }
.contact-map .mapSVG.desktop { display: none; }
.contact-map .mapSVG .pin { fill: #3D3935; cursor: pointer; z-index: 0; position: relative;}
.contact-map .mapSVG .pin:hover,
	.contact-map .mapSVG .pin.active { fill: #757473; z-index: 1000; }

.contact-map .mapSVG .pin#reading { display: none; }

.contact-map .location-details { display: none; background: var(--site); color: #fff; padding: 1rem; text-align: left; text-transform: uppercase; }
.contact-map .location-details:first-child { display: block; }
.contact-map .location-details a.button { border: 2px solid #fff; }
.contact-map .location-details a.button:after { content: ''; padding: 0; }

@media screen and (min-width: 48rem) {
	.contact-map .mapSVG.desktop { display: block; }
	.contact-map .mapSVG.mobile { display: none; }

	.contact-map h2 { font-size: 1.5rem; }

	.contact-map .location-details { position: absolute; top: 10rem; left: 1rem; }
	.contact-map .location-details h3 { font-size: 1.5rem; }
	.contact-map .location-details .more { display: flex; justify-content: space-between; align-items: flex-start; }
	.contact-map .location-details .more p { margin: 0 2rem 0 0; }
}
@media screen and (min-width: 69rem) {
	.contact-map .location-details { left: 0; }
}


.form-overlay-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,.3); z-index: 100000; display: none; }
.form-overlay { position: fixed; overflow-x: scroll; top: 0; right: 0; bottom: 0; left: auto; width: 90%; background: #fff; z-index: 1000000; padding: 4rem 2rem; display: none; }
.form-overlay .nf-before-form-content { display: none; }
.form-overlay .close { text-decoration: none; float: right; }

.form-overlay .checkbox-wrap { display: block !important; }
.form-overlay .checkbox-wrap .nf-field-label { padding-bottom: 1rem !important; }
.form-overlay .nf-multi-cell .submit-container { margin: 0 0 0 0; float: none; }

@media screen and (min-width: 64rem) {
	.form-overlay { width: 50%; max-width: 30rem; }
}