/*   
Theme Name: Barron McCann 2026 Theme
Description: This is the Barron McCann Theme WordPress Website Template
Author: we are CODA 2026
Version: 1
*/

@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
	width: 100%;
	height: auto;
	image-rendering : -webkit-optimize-contrast;
    image-rendering : optimizeQuality;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img, iframe {
	width:100%;
}
body, html {
	color: #1B232E;
	font-family: "Plus Jakarta Sans Regular";
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	margin: 0;
	line-height: 1.3;
	scroll-behavior: smooth;
	image-rendering: -webkit-optimize-contrast;
}
p { 
	-webkit-font-smoothing: antialiased;
	margin: 0 0 20px 0;
	font-size: 18px;
	line-height: 1.3;
	text-align: left;
	z-index: 1;
	position: relative;
}
a:link, a:active, a:visited {
	color: #FF0084;
	text-decoration: none;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;  
}
a:hover{
	text-decoration: underline;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
	cursor: pointer;
   
}
ul {
	margin: 0;
	padding: 0;
}
li {
	margin: 0;
	padding: 0;
	background-image: none;
	text-align: left;
}


.benefits ul {
	margin: 0;
	padding: 0;
}


.benefits li {
	margin: 0 0 20px 0px;
	padding: 0 0 0 40px;
	background-image: url(assets/benefits-bullet.png);
    background-repeat: no-repeat;
    background-position: top left;
	background-size: 22px 22px;
	list-style-type: none;
}


h1, h2, h3, h4, h5 {
	margin: 0;
	padding: 0;
	display: block;
	position: relative;
	line-height: 1.4;
	font-weight: normal;
}

.chunky-title-xlarge, .chunky-title-large, .chunky-title-medium, .chunky-title-small, .chunky-title-x-small, .col-blog h3 {
	font-family: "Plus Jakarta Sans Bold";
	font-weight: normal;
	line-height: 1.3;
	display: block;
	z-index: 1;
	position: relative;
}

.chunky-title-x-small {
	font-size: 14px;
}

.chunky-title-small {
	font-size: 16px;
}
.chunky-title-medium, .col-blog h3, .col-blog h2 {
	font-family: "Plus Jakarta Sans Regular";
	font-size: 24px;
}
.chunky-title-large {
	font-family: "Plus Jakarta Sans SemiBold";
	font-size: 32px;
}

.chunky-title-x-large {
	font-family: "Plus Jakarta Sans SemiBold";
	font-size: 38px;
	line-height: 1.2;
}

p.small, .small {
	font-size: 14px;
}

.col-blog h3, .col-blog h2 {
	color: #18146E;
	margin-bottom: 20px;
	font-family: "Plus Jakarta Sans SemiBold";
}

.col-blog img {
	margin: 60px 0;
}

.col-blog a {
	color: #FF0084 !important;
}

.col-blog ul, .col-page ul {
	margin: 0 0 20px 0;
	padding: 0 0 0 20px;
}

.head-space {
	margin-top: 98px;
	}

.mobile-view {
	display: block;
	}
.desktop-view, .desktop-view-inline {
	display: none;
	}
.narrow {
	width: 100%;
	box-sizing: border-box;
	}


.bottom-space, .bottom-space-mobile, .bottom-space-double {
	padding-bottom: 20px;
	margin: 0;
	display: block;
	}

.bottom-space-mobile {
	padding-bottom: 40px;
	}

.bottom-space-double {
	padding-bottom: 40px;
	}

.bottom-space p {
	padding: 0;
	margin: 0;
	}

.bottom-space-mini {
	padding-bottom: 10px;
	margin: 0;
	display: block;
	}

.top-space {
	padding-top: 40px;
	margin: 0;
	}

.top-space-mini {
	padding-top: 20px;
	margin: 0;
	display: block;
	}


.box-padding {
	padding: 30px;
	box-sizing: border-box;
	height: 100%;
}

.rounded {
	border-radius: 10px;
	overflow: hidden;
}

.stack-clickable {
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;  
}

.stack-clickable:hover {
	cursor: pointer;
	background-color: #CBF1FF !important; 
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;  
}



/* TYPEWRITER EFFECT */
.typewriter-wrapper {
    transition: height 0.25s ease;
    overflow: hidden;
	height: 92px;
	line-height: 125%;
    font-weight: normal;
}

#typewriter-text {
    display: inline-block;
    opacity: 1;
    transition: opacity 0.4s ease;
	position: relative;
}

#typewriter-text.fade-out {
    opacity: 0;
    transform: translateY(-6px);
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;  
}

/* optional cursor */

@keyframes blink {
    50% { opacity: 0; }
}
/* TYPEWRITER EFFECT */




/* START HEADER SECTION */


#top-band-area, #top-band-mobile-area {
	width: 100%;
	position: fixed;
	z-index: 100;
	padding: 30px 15px;
	box-sizing: border-box;
	top: 0px;
	transition: transform 0.3s ease, opacity 0.3s ease;
	background-color: #ffffff;
	display: none;
	box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
} 

#top-band-mobile-area {
	display: block;
}

#top-band-area.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}


#top-band-area-inner {
	margin: 0 auto;
	max-width: 1140px;
	display: flex;
    align-items: center;
    justify-content: space-between;
}


#top-band-area-slim {
	width: 100%;
	position: fixed;
	z-index: 1001;
	padding: 10px 30px;
	box-sizing: border-box;
	top: 0;
	display: none;
}


#top-band-compact {
  display: none;
  box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
}

img.icon {
	width: 20px;
	padding-left: 12px;
}
img.share-icon{
	width: 20px;
	padding-right: 20px;
	vertical-align: bottom;
}
img.icon-white {
	width: 20px;
	padding-left: 12px;
	position: relative;
	top: -55px;
}

img.logo, img.logo-small {
	max-width: 120px;
}

img.icon-large, img.icon-x-large {
	height: 60px !important;
	display: block;
	width: auto;
}

img.header-icon {
	height: 80px !important;
    display: block;
    width: auto;
    position: absolute;
    top: -30px;
    right: 0;
}





/* RESPONSIVE MENU STYLES - NEW BM MENU */
#mainNav-responsive {
    height: 100%;
	position: fixed;
	right: 0;
	width: 100%;
	transform: translateX(100%);
	transition: transform 650ms ease-in-out;
	padding: 30px 15px;
	box-sizing: border-box;
	top: 0;
	background-image: url(assets/menu-bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

input[type="checkbox"]:checked ~ #mainNav-responsive {
    transform: translateX(0);
	transition: transform 650ms ease-out;
}

#mainNav-responsive .logo-small, #mainNav-responsive img.icon-white, #mainNav-responsive ul, #mainNav-responsive .col-6 {
   opacity: 0;
   transition: opacity 0.4s ease;
}

input[type="checkbox"]:checked ~ #mainNav-responsive .logo-small, input[type="checkbox"]:checked ~ #mainNav-responsive img.icon-white, input[type="checkbox"]:checked ~ #mainNav-responsive ul, input[type="checkbox"]:checked ~ #mainNav-responsive .col-6 {
   opacity: 1;
   transition-delay: 0.65s;
}

input[type=checkbox] {
    transition: all 0.3s;
    box-sizing: border-box;
    display: none;
}
.sidebarIconToggle {
    transition: all 0.3s;
	box-sizing: border-box;
	cursor: pointer;
	z-index: 99;
	width: 16px;
	height: 14px;
	display: block;
	padding: 10px 8px;
	position: relative;
	width: 34px;
	height: 34px;
	margin-left: 12px;
	border-radius: 100px;
}
.spinner {
    transition: all 0.2s;
    box-sizing: border-box;
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: #18146E;
	border-radius: 3px;
}
.horizontal {
    transition: all 0.2s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 2px;
	border-radius: 3px;
}
.diagonal.part-1 {
    position: relative;
    transition: all 0.2s;
    box-sizing: border-box;
    float: left;
	border-radius: 3px;
	width: 50%;
}
.diagonal.part-2 {
    transition: all 0.2s;
    box-sizing: border-box;
    position: relative;
    float: right;
    margin-top: 2px;
	border-radius: 3px;
	width: 50%;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
    transition: all 0.2s;
    box-sizing: border-box;
    opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
    transition: all 0.2s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 6px;
	background-color: #18146E;
	width: 100%;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
    transition: all 0.2s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -8px;
	background-color: #18146E;
	width: 100%;
}


#mainNav-responsive ul { 
	margin: 0;
	padding: 60px 0 0 0;
}

#mainNav-responsive li { 
	padding: 0;
	margin: 0;
	list-style-type: none;
}


#mainNav-responsive li a { 
    font-size: 18px;
	font-family: "Plus Jakarta Sans Regular";
	font-weight: normal;
	display: block;
	text-decoration: none;
	margin: 0 0 30px 0 !important;
	color: #ffffff;
	line-height: 100%;
	background-image: none;
}

#mainNav-responsive li:last-child a { 
	margin: 0 0 300px 0;
}

#mainNav-responsive .sub-menu {
    max-height: 0;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease;
	margin: 0 0 300px 0;
}


#mainNav-responsive .menu-item.open > .sub-menu {
    max-height: 100vh; /* enough to fit content */
    opacity: 1;
    transform: translateX(0);
}

#mainNav-responsive .menu-item-has-children .sub-menu {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

#mainNav-responsive .menu-item-has-children.open > .sub-menu {
  transform: translateX(0);
  position: absolute;
  top: 0;
  left: 0;
  padding: 96px 15px 0 15px;
  box-sizing: border-box;
  width: 100%;
  height: 90vh;
  background-image: url(assets/menu-bg.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  opacity: 1;
  display: block;
  transition-delay: 0.65s;
  overflow-y: auto; 
  -webkit-overflow-scrolling: touch;
}
	
#mainNav-responsive .sub-menu > li.menu-back > a {
  display: absolute;
  top: 0;
  background-image: url(assets/back.png);
  background-repeat: no-repeat;
  background-size: 22px 22px;
  background-position: center;
  width: 22px;
  height: 22px;
  margin-bottom: 30px !important;
}

.menu-parent a {
	color: #00E1D4 !important;
	font-family: "Plus Jakarta Sans Medium" !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	padding-bottom: 10px;
	padding-right: 15px;
	margin-bottom: 30px !important;
}


.menu-mask {
  width: 100%;       /* set width */
  height: 85%;     /* set height */
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(to bottom, #1B232E 80%, transparent 100%);
mask-image: linear-gradient(to bottom, #1B232E 80%, transparent 100%);
}

/* RESPONSIVE MENU STYLES - NEW BM MENU */



#megaNav {	 
	display: none;
}




/* START BODY SECTION */	
#body-wrapper, #body-wrapper-full-width, #body-wrapper-padless {
	width: 100%;
	z-index: 1;
	padding: 60px 0;
	box-sizing:border-box;
	position: relative;
	overflow: hidden;
}

#body-wrapper-padless {
	padding: 0;
}

.pale-grey-split-bg {
	background: linear-gradient(to left, #f9f9f9 70%, #f4f4f5 30%) no-repeat;
}
.pale-grey-bg {
	background: #f9f9f9;
}

.light-grey-bg {
	background: #f4f4f5;
}
.grey-bg {
	background: #1B232E;
}
.white-bg {
	background: #ffffff;
}
.navy-bg {
	background: #18146E;
}
.purple-bg {
	background: #3800E8;
}
.lilac-bg {
	background: #6C80FF !important;
}
.sky-bg {
	background: #CBF1FF;
}
.aqua-bg {
	background: #00E1D4;
}
.pink-bg {
	background: #FF0084;
}
.purple-gradient-bg {
	background: linear-gradient(to right, #18146E, #3800E8) no-repeat;
}


.grey-text {
	color:#1B232E;
}
.white-text, .white-text a {
	color: #ffffff;
}
.white-text a:hover {
	text-transform: underline;
}
.navy-text {
	color: #18146E;
}
.purple-text, .purple-text a:link, .purple-text a:visited, .purple-text a:active {
	color: #3800E8;
}
.lilac-text {
	color: #6C80FF;
}
.sky-text {
	color: #CBF1FF;
}
.aqua-text {
	color: #00E1D4;
}
.pink-text {
	color: #FF0084;
}


.left, .left p {
	text-align: left !important;
}
.center, .center p {
	text-align: center !important;
}
.right, .right p {
	text-align: right !important;
	justify-content: end;
}
.right {
	float: right;
}
.caps {
	text-transform: uppercase;
}
.heavy {
	font-family: "Plus Jakarta Sans SemiBold";
}
.extra-heavy {
	font-family: "Plus Jakarta Sans Bold";
}

.light {
	font-family: "Plus Jakarta Sans Medium";
}

.flex {
	display: flex;
	flex-wrap: wrap;
}

.flex-stack > span {
	flex-wrap: wrap;
	display: flex;
}

.flex-stack {
	display: flex;
	align-items: center;
	}

.breadcrumbs, .breadcrumbs > span {
	display: flex;
    gap: 20px;
}


#body-content-inner {
	width: 100%;
	max-width: 290px;
	margin: 0 auto;
	box-sizing: border-box;
}


/* END BODY SECTION */

.grid-row, .grid-row-gap, .grid-row-threes {
	display: grid;
    grid-template-columns: repeat(6, minmax(40px, 1fr));
	column-gap: 10px;
	row-gap: 0;
	align-items: stretch;
}

.grid-row-gap {
	row-gap: 10px;
	grid-template-columns: repeat(autofit, minmax(40px, 1fr));
}




.col-1 { grid-column: span 3; }
.col-2 { grid-column: span 3; }
.col-3 { grid-column: span 3; }
.col-3-full, .col-4-full { grid-column: span 6; }
.col-4 { grid-column: span 3; }
.col-5 { grid-column: span 3; }
.col-6 { grid-column: span 3; }
.col-6-full, .col-5-full { grid-column: span 6; }
.col-7 { grid-column: span 6; }
.col-8 { grid-column: span 6; }
.col-9 { grid-column: span 6; }
.col-10 { grid-column: span 6; }
.col-11 { grid-column: span 6; }
.col-12 { grid-column: span 6; z-index: 1; }

.col-half { width: 100%; display: inline-block !important; }

.bottom-button, li .bottom-button {
	flex-direction: column;
	display: flex !important;
	align-items: flex-start;
}

.desktop-image-only  {
	display: none;
} 



.pagination, .nav-links, .page-numbers {
	align-items: center;
    display: flex !important;
	justify-content: center;
} 

.pagination a {
	padding: 0 20px;
	font-family: "Plus Jakarta Sans Medium";
	color: #18146E;
} 

.pagination .active, .current {
	background-image: none !important;
	text-decoration: underline;
	padding: 0 20px;
	font-family: "Plus Jakarta Sans Medium";
}

.pagination .next, .pagination .prev {
    border: solid 1px #18146E;
	border-radius: 50px !important;
	width: 25px;
	height: 25px;
	background-image: url(assets/next.png);
	padding: 0;
	display: inline-block;
	background-size: auto 13px;
    background-repeat: no-repeat;
    background-position: 10px center;
}

.pagination .prev {
	background-image: url(assets/prev.png);
	background-position: 8px center;
}






/* ACCORDIAN STYLES */
.reveal-button {
  cursor: pointer;
  padding: 20px 40px 20px 0;
  width: 100%;
  text-align: left;
  transition: max-height 0.8s ease; /* increase time here */
  display: inline-block;
  box-sizing: border-box;
  background-image: url(assets/plus.png);
  background-repeat: no-repeat;
  background-size: 22px 22px;
  background-position: right 20px;
  border-top: solid 2px #f4f4f5;
}
.reveal-button p {
  margin: 0;
  padding: 0;
}

.active {
  background-image: url(assets/minus.png);
}

.reveal-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.8s ease; /* increase time here */
  width: 100%;
  box-sizing: border-box;
}

/* ACCORDIAN STYLES */


.plus-button {
	font-family: "Plus Jakarta Sans Light";
	font-size: 28px !important;
	width: 31px !important;
	height: 31px !important;
	display: inline-block !important;
	line-height: 84% !important;
	z-index: 1;
	position: relative !important;
	border-radius: 50% !important;
	text-decoration: none !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border: solid 1px #ffffff;
	color: #ffffff;
	text-align: center;
	right: 20px;
}

.plus-button a:link, .plus-button a:visited, .plus-button a:active {
	color: #ffffff !important;
}




a.button:link, a.button:active, a.button:visited {
	font-family: "Plus Jakarta Sans Medium";
	font-size: 12px !important;
	padding: 10px 24px;
	display: inline-block !important;
	line-height: 100% !important;
	z-index: 1;
	position: relative !important;
	border-radius: 50px !important;
	text-decoration: none !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}


a.white-primary:link, a.white-primary:active, a.white-primary:visited, a.white-primary-plain:link, a.white-primary-plain:active, a.white-primary-plain:visited {
	background-color: transparent;
	color: #18146E;
	border: solid 1px #18146E; 
}
a.colour-primary:link, a.colour-primary:active, a.colour-primary:visited {
	background-color: transparent;
	color: #ffffff;
	border: solid 1px #ffffff; 
}
a.colour-primary-navy:link, a.colour-primary-navy:active, a.colour-primary-navy:visited {
	background-color: #18146E;
	color: #ffffff !important;
}
a.white-secondary:link, a.white-secondary:active, a.white-secondary:visited {
	background-color: #FF0084;
	color: #ffffff;
}
a.colour-secondary:link, a.colour-secondary:active, a.colour-secondary:visited {
	background-color: #FF0084;
	color: #ffffff;
}



a.white-primary:hover {
	background-color: #18146E;
	color: #ffffff !important;
}
a.white-primary-plain:hover {
	text-decoration: underline !important;
}
a.colour-primary:hover {
	background-color: #ffffff;
	color: #18146E;
}
a.colour-primary-navy:hover {
	background-color: #ffffff;
	color: #18146E !important;
}
a.white-secondary:hover {
	background-color: #18146E;
	color: #ffffff;
}
a.colour-secondary:hover {
	background-color: #ffffff;
	color: #18146E;
}


.download-cs {
	margin: 20px 0 0 0;
}


.explode, .explode-gradient {
	aspect-ratio: 1 / 1.2;
	position: relative;
	display: flex;
	align-items: end;
}


.explode img, .explode-gradient img, .explode-gradient-mask {
	object-fit: cover;
	width: 100%;
	height: 100% !important;
	position: absolute;	
	top: 0;
	left: 0;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
	z-index: 0;
	opacity: 0.7;
}

.explode-gradient img, .explode-gradient-mask {
	opacity: 1;
}


.explode-gradient-mask {
  width: 100%;       /* set width */
  height: 100%;     /* set height */
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(to bottom, #1B232E 50%, transparent 100%);
mask-image: linear-gradient(to bottom, #1B232E 50%, transparent 100%);
}




.explode:hover img, .explode-gradient:hover img, .explode-gradient-mask:hover  {
	transform: scale(1.1);
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
	opacity: 0.5;
}

.explode:hover a.colour-primary, .explode-gradient:hover a.colour-primary {
	background-color: #ffffff;
	color: #18146E;
}

img.hero {
	position: absolute; 
  	top: 0;
  	left: 0;
 	width: 100%;    
  	height: 100%;
  	object-fit: cover;
}

img.half-hero-right, img.half-hero-left {
	position: absolute; 
  	top: 0;
  	right: 0;
 	width: 50%;    
  	height: 100%;
  	object-fit: cover;
}
	
img.half-hero-left {
  	left: 0;
}

img.central-hero-image {
  	position: absolute; 
  	bottom: 0;
  	left: 50%;
 	width: 50%;    
}

.half-height-top {
  height: auto;
}

.time-line {
    background: linear-gradient(#ffffff, #ffffff);
    background-size: 60% 2px;
    background-repeat: no-repeat;
    background-position: right 40px;
}

li:last-child .time-line {
    background: none;
}

.landscape-image {
	aspect-ratio: 2 / 1;
}

.landscape-image img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}



.author-avatar {
	border-radius: 100%;
    overflow: hidden;
    width: 100px !important;
	margin-right: 20px;
	display: flex;
	align-items: center;
}

.post-author {
	display: flex;
	align-items: center;
}



.vacancy-details {
	display: inline-block;
	padding-right: 10px;
	font-family: "Plus Jakarta Sans Regular";
}

#searchform .inlineSearch, #sign-up .inline, #searchform .inlineDropdown {
	border-bottom: solid 1px #ffffff;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	background-color: transparent;
	background-image: url(assets/search-icon-white.png);
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: left center;
	padding: 0 0 5px 25px;
	color: #ffffff;	
	width: 100%;
	margin-bottom: 20px;
}

#searchform .inlineDropdown {
	background-image: none;
	padding: 0 0 5px 0px;
	width: 100%;
	border-radius: 0;
}

.inlineDropdown option {
    background-color: #1B232E;
    color: #ffffff;
}

/* Remove the outline when input or textarea is focused */
#searchform input:focus, #searchform textarea:focus, #searchform select:focus, #sign-up input:focus, #sign-up textarea:focus, #ttu-form .nf-field-element input:focus, #ttu-form .nf-field-element select:focus, #ttu-form .nf-field-element textarea:focus {
    outline: none;
}

#sign-up .inline {
	border-bottom: solid 1px #1B232E;
	background-image: none;
	color: #1B232E;	
	padding: 0 0 5px 0;
}

#searchform .inlineSubmit, #sign-up .inlineSubmit {
	font-family: "Plus Jakarta Sans Medium";
	font-size: 12px !important;
	padding: 10px 24px;
	display: inline-block !important;
	line-height: 100% !important;
	z-index: 1;
	position: relative !important;
	border-radius: 50px !important;
	text-decoration: none !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background-color: transparent;
	color: #ffffff;
	border: solid 1px #ffffff; 
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; 
}

#sign-up .inlineSubmit { 
	margin-left: 0px;
}

#searchform .inlineSubmit:hover, #sign-up .inlineSubmit:hover {
	background-color: #ffffff;
	color: #18146E;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; 
}

#sign-up input::placeholder {
	color: #1B232E;	
}



#services-results, #posts-results {
    opacity: 0;
    transform: translateY(10px); /* optional: slight slide up */
    transition: opacity 0.1s ease, transform 0.1s ease;
}

#services-results.loaded, #posts-results.loaded {
    opacity: 1;
    transform: translateY(0);
}

#services-results h3 {
    display: flex;
	margin-top: 80px;
}

#services-results h3:before {
	content: "";
    display: inline-flex;
    width: 46px;
    height: 36px;
    align-items: center;
	background-image: url(assets/cog.png);
	background-size: auto 100%;
	background-repeat: no-repeat;
}

.services-filter .active {
	background-color: #18146E !important;
	color: #ffffff !important;
}

.service-item p {
	cursor: pointer;
    padding: 20px 40px 0px 0;
    width: 100%;
    text-align: left;
    transition: max-height 0.8s ease;
    display: inline-block;
    box-sizing: border-box;
    background-image: url(assets/pink-arrow.png);
    background-repeat: no-repeat;
    background-size: 19px auto;
    background-position: right 20px;
    border-top: solid 2px #f4f4f5;
	margin: 0;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; 
}

.service-item p:hover {
	color: #FF0084;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; 
}


.sub-heading {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.2s ease-in, transform 0.4s ease-in;
	padding-bottom: 20px;
}

.service-item:hover .sub-heading {
    max-height: 150px;         
    opacity: 1;
    transform: translateY(0); 
}


.footer-menu a {
	color: #ffffff;
}
.footer-menu li {
	list-style-type: none;
	margin: 0 0 10px 0;
	font-size: 14px;
	line-height: 1.3;
}

.footer-menu a:hover {
	color: #00E1D4;
	text-decoration: none;
}


.footer-band a {
	padding: 0 20px 10px 0px;
	display: inline-block;
	text-align: left;
}

.footer-band p {
	padding: 0 0 10px 20px;
	display: block;
}







/* FORM STYLES */

#ttu-form {
	margin-bottom: -25px;
}

#ttu-form .nf-field-element input, #ttu-form .nf-field-element select, #ttu-form .nf-field-element textarea {
	border-bottom: solid 1px #1B232E;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	background-color: transparent;
	padding: 0 0 5px 0;
	color: #1B232E;	
}

#ttu-form .nf-field-element textarea {
	height: 100px;
}

#ttu-form input::placeholder, #ttu-form textarea::placeholder {
	color: #1B232E;	
	opacity: 0.5;
}

#ttu-form .nf-field-label, #ttu-form .nf-form-fields-required {
	display: none;
}

#ttu-form .nf-field-element input[type="submit"] {
	font-family: "Plus Jakarta Sans Medium";
	font-size: 12px !important;
	padding: 10px 24px;
	display: inline-block !important;
	line-height: 100% !important;
	z-index: 1;
	position: relative !important;
	border-radius: 50px !important;
	text-decoration: none !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background-color: transparent;
	color: #18146E;
	border: solid 1px #18146E;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; 
}

#ttu-form .nf-field-element input[type="submit"]:hover {
	background-color: #18146E;
	color: #ffffff; 
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; 
}

.nf-response-msg {
	color: #FF0084; 
	font-family: "Plus Jakarta Sans Medium";
	
}

#ttu-form .nf-field p:last-child {
	margin-bottom: 0;
}

/* FORM STYLES */






/* POP UP CONTAINER */

.tab {
  overflow: hidden;
  display: inline-block
}

/* Create an active/current tablink class */
.icon.active {
	background-image: none !important;
	height: auto;
}

/* Style the tab content */
.tabcontent {
  display: none;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  animation: 0.3s fadeIn;
  animation-fill-mode: forwards;
  visibility: hidden;
  overflow-y: auto;
  background-image: url(assets/search-bg.jpg);
  background-position: bottom;
  height: 100vh;
  width: 100vw;
  justify-content: center;
}


/* Go from zero to full opacity */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}

button.close, .close {
	cursor: pointer;
	width: 50px;
	height: 50px;
	text-align: left;
	transition: 0.4s;
	display: inline-block;
	box-sizing: border-box;
	background-image: url(assets/close.png);
	background-repeat: no-repeat;
	background-size: 30px 30px;
	background-position: center center;
	right: 10%;
	top: 200px;
	position: absolute;
	z-index: 1000;
	border-radius: 50%;
	background-color: transparent;
	border: none;
}

.search-form {
	align-content: center;
}

/* POP UP CONTAINER */





/* Desktop Small Layout: 360px to a max of 480px.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 360px) {	

.grid-row, .grid-row-gap, .grid-row-threes {
	display: grid;
    grid-template-columns: repeat(6, minmax(45px, 1fr));
	column-gap: 10px;
	row-gap: 0;
	}
	
.grid-row-gap {
    grid-template-columns: repeat(autofit, minmax(45px, 1fr));
	}
	
	
#body-content-inner {
	max-width: 340px;  
}
	
	
	
	/* Desktop Small Layout: 360px to a max of 480px.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 400px) {	
		
#body-content-inner {
	max-width: 380px;  
}
	

	
/* Desktop Small Layout: 480px to a max of 600px.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 480px) {	

.grid-row, .grid-row-gap, .grid-row-threes {
	display: grid;
    grid-template-columns: repeat(6, minmax(58px, 1fr));
	column-gap: 16px;
	row-gap: 0;
	}

	
.grid-row-gap {
	row-gap: 16px;
	grid-template-columns: repeat(autofit, minmax(58px, 1fr));
	}
	
	
#body-content-inner {
	max-width: 428px;  
}
	
.download-cs {
	margin: 0;
}
	


	


/* Desktop Small Layout: 600px to a max of 780px.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 600px) {	


.grid-row, .grid-row-gap, .grid-row-threes {
	display: grid;
    grid-template-columns: repeat(6, minmax(72px, 1fr));
	column-gap: 24px;
	row-gap: 0;
	}

	
.grid-row-gap {
	row-gap: 24px;
	grid-template-columns: repeat(autofit, minmax(72px, 1fr));
	}
	
	
#body-content-inner {
	max-width: 552px;  
}	
	

.bottom-space {
	padding-bottom: 40px;
	}
	
.bottom-space-double {
	padding-bottom: 80px;
	}

.top-space {
	padding-top: 40px;
	}

}




/* Desktop Small Layout: 780px to a max of 964px.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 780px) {	
	
	
#mainNav-responsive .menu-item-has-children.open > .sub-menu {
  padding: 96px 30px 0 30px;
}
	
	
.mobile-view {
	display: none;
	}
.desktop-view {
	display: block;
	}
.desktop-view-inline {
	display: inline-block;
	}

.grid-row, .grid-row-gap, .grid-row-threes {
	display: grid;
    grid-template-columns: repeat(12, minmax(52px, 1fr));
    column-gap: 12px;
	row-gap: 0;
	}
	
.grid-row-threes {
	display: grid;
    grid-template-columns: repeat(9, minmax(52px, 1fr));
    column-gap: 12px;
	row-gap: 0;
	}
	
.grid-row-gap {
	row-gap: 12px;
	grid-template-columns: repeat(autofit, minmax(52px, 1fr));
	}
	
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-3-full { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-4-full { grid-column: span 4; }
.col-5, .col-5-full { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
	
.offset-1, .offset-1-mobile { margin-left: 78px; }
.offset-1-right { margin-right: 78px; }
.offset-6 { margin-left: 446px; }
	
.col-half { width: 49%; }
	

.download-cs {
	margin: 20px 0 0 0;
}

	
img.header-icon {
	height: 140px !important;
	display: block;
	width: auto;
	margin-top: 0px;
    position: relative;
    top: auto;
    right: auto;
}

	
	
#searchform .inlineSearch, #sign-up .inline, #searchform .inlineDropdown {
	width: 27%;
	display: inline-block;
	margin-bottom: 0;
}
	
#searchform .inlineDropdown {
	margin-left: 20px;
}
	
#searchform .inlineSubmit{
	margin-left: 20px;
}
	
.search-header {
	height: 440px;
	}
	
	


/* TYPEWRITER EFFECT */
.typewriter-wrapper {
	height: auto;
}
/* TYPEWRITER EFFECT */
	
.flex-stack > span {
	flex-basis: 100%;
	flex-wrap: wrap;
	display: flex;
}
	
.flex-stack {
	display: block;
}

	

.chunky-title-x-large {
	font-size: 60px;
}
	
.desktop-image-only  {
	display: block;
} 
	
.full-height {
	height: 100vh;
}
	
.full-height-top {
  height: calc(100vh - 100px);
}
	
.half-height-top {
  height: calc(75vh - 100px);
}

.central {
	margin: 0 auto;
	clear: both;
	display: block;
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	width: 100%;
}
	
.bottom-space-mobile {
		padding-bottom: 0px;
	}
	
.post-author {
	display: block;
	align-items: center;
}

	
/* START BODY SECTION */
	
#top-band-area, #top-band-mobile-area, #mainNav-responsive  {
	padding: 30px;
}
	
#body-content-inner {
	max-width: 756px;  
}
	
.footer-band a {
	padding: 0 0 10px 20px;
	display: inline-block;
}

.footer-band p {
	padding: 0 0 20px 0px;
	display: block;
}
	

/* END BODY SECTION */


/* Desktop Large Layout: 964px to a max of 1180px.  Inherits styles from: Mobile Layout and Tablet Layout and Deskop Small Layout. */
@media only screen and (min-width: 964px) {
	
.offset-6 { margin-left: 532px; }
	
#body-wrapper, #body-wrapper-full-width {
	padding: 120px 0;
	
}
	
#body-content-inner {
	max-width: 900px;  
}
		
		
img.half-hero-right, img.half-hero-left {
	position: absolute; 
  	top: 0;
  	right: 0;
 	width: 50%;    
  	height: 100%;
  	object-fit: cover;
}
	
img.half-hero-left {
  	left: 0;
}
	
img.header-icon {
	height: 140px !important;
	display: block;
	width: auto;
	margin-top: -30px;
}
	
}


/* Desktop Large Layout: 964px to a max of 1011px.  Inherits styles from: Mobile Layout and Tablet Layout and Deskop Small Layout. */
@media only screen and (min-width: 1011px) {

#top-band-area-slim {
	display: block;
}

img.logo {
	min-width: 190px;
	max-width: auto;
}
	
img.logo-small {
	max-width: 120px;
}
	
img.icon {
	padding-left: 35px;
}
	
img.icon-large {
	height: 60px !important;
}
	
img.icon-x-large {
	height: auto;
}
	
img.central-hero-image {
  	left: 60%;
}
	
.head-space {
	margin-top: 154px;
	}
	
.full-height-top {
  height: calc(100vh - 154px);
}
	
.half-height-top {
  height: calc(75vh - 154px);
}
	
.author-avatar {
    width: 140px !important;
	display: block;
}
	
	
	
	
	
	
	
	
/* MEGA MENU STYLES */	
	
#megaNav {	 
	display: inline-block;
	position: relative;
}

#megaNav li { 
	  display: inline-block; 
	  padding: 0px 25px 0px 0px;
	  text-decoration: none;
	  background-image: none;
	  margin: 0;  
	  font-family: "Plus Jakarta Sans Bold";
	  font-size: 13px;
}
#megaNav li a {
	  text-decoration: none;
	  color: #18146E;
  }       
#megaNav li a:hover { 
 	   color: #FF0084;
 }
#megaNav li.current_page_item a { 
	color: #FF0084;
 }
	
.menu-overlay {
    position: fixed;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
    z-index: 5;
	background-color: rgba(24, 20, 110, 0.4);
	backdrop-filter: blur(2px) saturate(120%);
	height: 100vh;
	width: 100vw;
	top: 158px;
}

.menu-item.has-mega-panel.active ~ .menu-overlay,
.menu-overlay.active {
    opacity: 1;
    visibility: visible;
	background-image: none !important;
}
	
.mega-panel {
	position:fixed;
	left:0;
	width:100vw;
	opacity:0;
	transform:translateY(20px);
	transition:.3s;
	pointer-events:none;
	z-index: 999;
}
	
li.mega-listed {
	display: block !important;
}
	
.service-link.active,
.solutions-link.active {
    color: #FF0084 !important;
	background-image: none !important;
}
	
.mega-panel li a {
	color: #1B232E !important;
}
.mega-panel li a:hover {
	color: #FF0084 !important;
}
	
.menu-item.has-mega-panel > a, .menu-item.has-mega-panel.active > a {
	background-image: url(assets/arrow-down.png);
    background-repeat: no-repeat;
    background-position: right 6px;
    background-size: auto 6px;
    padding-right: 19px;
}
	
.menu-item.has-mega-panel.active > a {
	background-image: url(assets/arrow-up-pink.png);
	color: #FF0084 !important;
}

.menu-item.has-mega-panel .mega-panel {
	opacity:0;
	transform:translateY(0);
	pointer-events: none;
	transition: all 0.3s ease;
	margin-top: 53px;
}
	
.menu-item.has-mega-panel.active .mega-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

	
	
.service-group {
	display: none;
}
	
.service-preview img, .solution-preview img {
	width:100%;
	height:auto;
	display:block;
	object-fit: cover;
	opacity:1;
	aspect-ratio: 2 / 1.25;
	transition: opacity 0.2s ease;
}

.service-preview img.fade, .solution-preview img.fade {
	opacity:0;
}
	
.service-preview img, .solution-preview img {
	width:100%;
	height:auto;
	display:block;
	object-fit: cover;
	opacity:1;
	aspect-ratio: 2 / 1;
	transition: opacity 0.2s ease;
}

.service-preview img.fade, .solution-preview img.fade {
	opacity:0;
}
	
#service-preview-sub, #solution-preview-sub, #sector-preview-sub {
	text-align: left !important;
	font-family: "Plus Jakarta Sans Regular" !important;
	font-size: 18px;
	padding: 0;
	margin: 0;
	line-height: 1.3;
	}
	

.service-cat-link, .sector-link {
    position: relative;
    color: #FF0084;
}
	
.service-cat-link::after, .sector-link::after {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    background-image: url(assets/menu-arrow.png);
    background-size: 16px 16px;
	background-repeat: none;
    opacity: 0;
    transition: opacity 0.3s ease;
	color: #FF0084;
}

.service-cat-link.active, .sector-link.active {
   background-image: none !important;
   padding-left: 20px;
   color: #FF0084 !important;
}
	
.service-cat-link.active::after, .sector-link.active::after {
    opacity: 1;
}

/* MEGA MENU STYLES */
	
	

	
	
	
	
	
#top-band-area {
	top: 35px;
	display: block;
}
	
#top-band-mobile-area {
	display: none;
}	
	
#top-band-compact {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  width: 100%;
  position: fixed;
  z-index: 100;
  padding: 10px 30px;
  box-sizing: border-box;
  top: 0px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  display: block;
  background-color: #ffffff; 
}

#top-band-compact.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
	
	
.download-cs {
	margin: 0;
}
	

}
	
	
	
	
	
	
/* Desktop Layout: 1011px to a max of 1180px.  Inherits styles from: Mobile Layout and Tablet Layout and Desktop Large Layout. */
@media only screen and (min-width: 1180px) {

	
.grid-row, .grid-row-gap, .grid-row-threes {
	display: grid;
    grid-template-columns: repeat(12, minmax(72px, 1fr));
    column-gap: 24px;
	row-gap: 0;
	}
	
.grid-row-gap {
	row-gap: 24px;
	grid-template-columns: repeat(autofit, minmax(72px, 1fr));
	}

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
	
.offset-1, .offset-1-break, .offset-1-mobile { margin-left: 96px; }
.offset-1-right, .offset-1-break-right { margin-right: 96px; }
.offset-6, .offset-6-break { margin-left: 674px; }
	

#body-content-inner {
	max-width: 1128px;  
}
	
.search-header {
	height: auto;
	}
	
.download-cs {
	margin: 0 0 0 20px;
}
	
	

/* Desktop Layout: 1180px to a max of 1220px.  Inherits styles from: Mobile Layout and Tablet Layout and Desktop Large Layout. */
@media only screen and (min-width: 1220px) {
		
/* START BODY SECTION */
	
		
/* END BODY SECTION */	
	
.padded-section {
	padding: 60px;
	margin-bottom: 160px;
}
	
	
/* Desktop Layout: 1180px to a max of 1220px.  Inherits styles from: Mobile Layout and Tablet Layout and Desktop Large Layout. */
@media only screen and (min-height: 800px) {