/* cmsms stylesheet: newsmart_standard modified: 08/07/26 12:33:28 */
/* cmsms stylesheet: newsmart_standard modified: 06/19/26 12:00:20 */
body {
    font-family: khula, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 100%;
    line-height: 150%;
    color: #000000;
    margin:  0px;
    padding:  0px;
}

p {
    margin: 0px 0px 15px 0px;
}

h1 {
    font-weight: 600;
    font-size: 180%;
    line-height: 120%;
    margin: 0px 0px 20px 0px;
    color: #504c87;
}

h2 {
    font-weight: 600;
    font-size: 160%;
    line-height: 120%;
    margin: 0px 0px 20px 0px;
}

h3 {
    font-weight: 600;
    font-size: 140%;
    line-height: 120%;
    margin: 0px 0px 30px 0px;
    color:  #f8c039;
}

h4 {
    font-weight: 600;
    font-size: 120%;
    line-height: 120%;
    margin: 0px 0px 30px 0px;
}

h5 {
    font-size: 130%;
    line-height: 120%;
    font-weight: 500;
    margin: 0px 0px 30px 0px;
}

h6 {
    font-size: 110%;
    line-height: 120%;
    font-weight: 500;
     margin: 0px 0px 30px 0px;
}

a {
    color: #504c87;
    text-decoration: none;
    transition: color 0.4s, background-color 0.4s;
}

a:hover {
    color: #000000;
    text-decoration: underline;
}

a img {
    border: 0px;
}

/* IDs */

#outerHeader {

}

#upperBar {
	height: 50px;
	box-sizing:  border-box;
	padding-top: 13px;
}

#innerHeader {

}

#navigationContainer {margin-top: 40px;}

#menuShow {
display: none;
}

#actualMenu {

}

#actualMenu ul {
    display: flex;
    margin: 0px;
    padding: 0px;
    gap: 14px;
}

#actualMenu li {
	margin: 0px;
	padding: 0px;
	list-style: none;
	line-height: 100%;
}

#actualMenu li a, #actualMenu li span {
	text-decoration: none;
	font-size: 135%;
	font-weight: 600;
	line-height: 100%;
	display: block;
	padding: 10px 10px 4px 10px;
}

#actualMenu li a:hover {
	color: #46c9f5;
}

#actualMenu li span#twenty-minute-consultation {
	background-color: #093b60;
	color: #ffffff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
        transition: color 0.4s;
cursor: pointer;
}

#actualMenu li span#twenty-minute-consultation:hover {
	color: #46c9f5;
}

#actualMenu ul ul, .subopener, .subcloser {
display: none;
}

/* Anchor submenus to their parent item */
#actualMenu li {
    position: relative;
}

/* Submenu panels — overrides your display:none */
#actualMenu ul ul {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    margin: 0;
    padding: 6px 0;
    background-color: #ffffff;
    border: 1px solid rgba(9, 59, 96, 0.08);
    border-radius: 5px;
    box-shadow: 0 10px 28px rgba(9, 59, 96, 0.18);
    list-style: none;
    z-index: 1000;

    /* hidden until revealed */
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

/* Second level flies out to the side */
#actualMenu ul ul ul {
    top: -6px;
    left: 100%;
    margin-left: 2px;
}

/* JS flips the flyout if it would run off-screen */
#actualMenu ul ul ul.flip-left {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 2px;
}

/* Reveal on hover (mouse), focus-within (keyboard) or .is-open (touch) */
#actualMenu li:hover > ul,
#actualMenu li:focus-within > ul,
#actualMenu li.is-open > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Submenu links */
#actualMenu ul ul li {
    width: 100%;
}
#actualMenu ul ul li a {
    font-size: 100%;
    font-weight: 500;
    padding: 9px 18px;
    white-space: nowrap;
    color: #093b60;
}
#actualMenu ul ul li a:hover {
    color: #093b60;
    background-color: rgba(70, 201, 245, 0.14);
}

/* Carets — only on items that actually have a submenu */
#actualMenu > ul > li:has(> ul) > a::after,
#actualMenu ul ul li:has(> ul) > a::after {
    content: "";
    display: inline-block;
    width: 0.42em;
    height: 0.42em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}
#actualMenu > ul > li:has(> ul) > a::after {       /* top level: down caret */
    margin-left: 0.5em;
    transform: translateY(-2px) rotate(45deg);
}
#actualMenu ul ul li:has(> ul) > a::after {        /* nested: right caret */
    float: right;
    margin-top: 0.25em;
    transform: rotate(-45deg);
}

#heroSection {
    position: relative;
    height: 520px;
}

.shortSection {
	height: 300px !important;
}

.heroSlide {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 520px;
    overflow: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.shortSection .heroSlide {
	height: 300px !important;
}

.heroSlide.activeHeroSlide {
    opacity: 1;
    visibility: visible;
    position: relative;
}

.heroSlide.activeHeroSlide .heroImage img {
    animation: heroImageDrift 8s ease forwards;
}

@keyframes heroImageDrift {
    from {
        transform: translateX(-50%) scale(1);
    }

    to {
        transform: translateX(-50%) scale(1.04);
    }
}

.heroSlide .heroSectionLeft,
.heroSlide .heroSectionRight {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease 0.25s, transform 0.7s ease 0.25s;
}

.heroSlide.activeHeroSlide .heroSectionLeft,
.heroSlide.activeHeroSlide .heroSectionRight {
    opacity: 1;
    transform: translateY(0);
}

.heroImage {
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 520px;
    overflow: hidden;
}

.heroImage img {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
}

.quickSearch {

}

.searchBox {background-color:  #ffffff;display:  flex;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;overflow:  hidden;width: 420px;}

.searchBox img {
display:  block;
margin:  10px;
}

input#searchInput, input.search-input {border:  0px;flex: 1;font-size: 110%;}

input#searchSubmit  {background-color: #093b60;color:  #46c9f4;border:  0px;font-size: 130%;display:  block;padding:  3px;width: 119px;}

#heroButtons {
    position: absolute;
    right: 0px;
    top: -50px;
    z-index: 3;
}

.hidden {
display: none;
}

#heroButtons span {
    margin-top: 0px;
    transition: margin-top 0.4s, color 0.4s, background-color 0.4s;
    cursor: pointer;
}

#heroButtons span:hover {
    margin-top: -5px;
}

.innerHeroSection {
    padding-top: 100px;
    position: relative;
    z-index: 2;
    line-height: 200%;
}

.heroSectionLeft {
    width: 780px;
}

.wideHeroSectionLeft {
	width: 1015px;
}

.wideHeroSectionLeft h1 {
	font-size: 200%;
}

.homeSlide p {
    font-size: 150%;
    margin-bottom: 40px;
    font-weight: 100;
    color: #46c9f5;
}

.moreSpan  {transition: color 0.4s;}

h2.homeTitle {
    font-size: 360%;
    font-weight: 100;
}

.heroSectionRight {

}


/* Classes */

.outer {

}

.inner {
 width: calc(100% - 60px);
    margin: 0 30px;
	position: relative;
box-sizing: border-box;
}

.inner .inner {
	width: 100%;
	margin: 0px;
}

.smallInner {
	width: calc(100% - 120px);
    margin: 0 60px;
}

.smallestColumn {
	width: 1200px;
	margin: auto;
}

.flowRooter {
	display: flow-root;
}

.standardVertical {
	padding-top: 60px;
	padding-bottom: 60px;
}

.standardBottomVertical {
	padding-bottom: 60px;
}

.smallVertical {
	padding-top: 20px;
	padding-bottom: 20px;
}
 
.standardHorizontal {
	padding-left: 30px;
	padding-right: 30px;
}

.bottomMargin {
	margin-bottom: 30px;
}

.columnContainer {
display:  flex;
	gap: 30px;
}

.columnContainer .infoCard {
    flex: 1;
}

.columnContainer .infoCard:has(img) {
    flex: 0 0 auto;
}

.heroSectionRight {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.heroSectionRight .blockButton {
	margin-top: auto;
}

.shortSection .heroSectionRight .blockButton {
	margin-top: 10px;
}

.heroQuickLinks h3 {
	margin-bottom: 10px;
	font-size: 220%
}

.heroQuickLinks {
	line-height: 140%;
}

.heroQuickLinks ul {
	margin: 0px;
	padding: 0px;
}

.heroQuickLinks li  {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#extraInfoSections {
    position: relative;
    z-index: 10;
}

.extraInfoSection {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    padding-bottom: 30px;
}

.rightColumnContent {
 justify-content: flex-end;
}

.allSpaceColumn {
	justify-content: space-between;
}

 .phoneHero {
     display: flex;
	 gap: 7px;
}

.floatRight {
	float: right;
	margin-left: 30px;
}

.floatLeft {
	float: left;
	margin-left: 30px;
}

.halfWide {
	width: 755px;
}

.phoneIcon {

}

.lightBlueFront {

}

.phoneHero img {

}

.phoneHero span {

}

.phoneHero a {color: #ffffff;text-decoration:  none;transition: color 0.4s;}
.phoneHero a:hover {
	color: #46c9f5;
}
.searchPopout {

}

.searchPopoutOpen {

}

.searchPopoutOpen img {

}

.searchPopoutActual {
display: none;
}

.standardIframer, #rightSubHero iframe {
	width: 755px;
	height: auto !important;
	aspect-ratio: 16 / 9;
	margin-bottom: 30px;
}

#rightSubHero p {
margin-bottom: 0px;
}

#rightSubHero ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin: 0;
    padding: 0;
}

#rightSubHero li {
margin: 0px;
padding: 0px;
list-style: none;
}

 #rightSubHero li a:link, #rightSubHero li a:visited {
    text-decoration: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: auto;
    flex: 1;
    padding: 0px 40px;
    display: flex;
    flex-direction: column;
    height: 100px;
    box-sizing: border-box;
    font-size: 140%;
    line-height: 120%;
    text-decoration: none;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #093b60;
    color: #46c9f5;
    font-weight: 600;
    font-size: 160%;
    line-height: 120%;
}

#rightSubHero li a:hover {
    background-color: #46c9f5;
    color: #ffffff;
}

.rounded {
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.bar {

}

.fullWidthButtons a.bigButton {
    width: auto;
    flex: 1;
}

.fullWidthButtons a.bigButton h4 {
    margin: 0;
	line-height: 100%;
}

a.bigButton h4 , span.bigButton h4{
    margin: 0;
	line-height: 100%;
}

a.blockButton, span.blockButton {
	display: block;
	text-decoration: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

a.bigButton, span.bigButton {
	width: 280px;
	padding: 0px 25px;
	display: flex;
	flex-direction: column;
	height: 100px;
	box-sizing:  border-box;
	font-size: 140%;
	line-height: 120%;
	text-decoration:  none;
	text-align:  center;
	justify-content: center;  /* horizontal */
	align-items: center;
	color: #ffffff;
	cursor: pointer;
	transition: background-color 0.4s;
}

.imageBackImage {
	position: absolute;
	z-index:1;
	overflow: hidden;
	top: 0;
	left:0;
	right:0;
	bottom: 0;
}

.imageBackImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.overImage {
	position: relative;
	z-index: 2;
}

.centerBlock {
	text-align: center;
}

.centerBlock .blockButton {
	margin: auto;
}

.leftColumn {}
.rightColumn {}
.equalColumn {
	flex: 1;
}

.blockText {
	display: block;
}

.tinyText {
	font-size: 60%;
}

.gridIt {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

footer {
	border-top: 10px solid #ff8c04;
}

footer, footer a:link, footer a:visited {
	color: #636466;
}

footer .tinyText {
	font-size: 80%;
}

footer ul {
	margin: 0px;
	padding: 0px;
}

footer li {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

/*  colours  */

.blogButton {
	background-color: transparent;
}
.borderWhiteBack { 
	border:1px solid #ffffff;
}
.whiteFront {}

.navyBack h1 {
    color: #ffffff;
}

.navyBack h3,
.navyBack h4,
.navyBack h5,
.navyBack h6 {
    color: #46c9f4;
}

.navyBack, a.navyBack:link,
a.navyBack:visited,
button.navyBack,
input.navyBack, span.navyBack {
    background-color: #093b60;
    color: #ffffff;
}

a.navyBack:hover,
button.navyBack:hover,
input.navyBack:hover, span.navyBack:hover {
    background-color: #041e31;
    color: #ffffff;
}

.lightBlueBack a.navyBack:hover,
.lightBlueBack button.navyBack:hover,
.lightBlueBack input.navyBack:hover {
    background-color: #fe8220;
    color: #ffffff;
}

.fullWidthButtons a.navyBack:hover h4 {
    color: #ffffff;
}

a.navyFront:link,
a.navyFront:visited {
    color: #093b60;
}

a.navyFront:hover {
    color: #46c9f5;
}

.redBack, a.redBack:link,
a.redBack:visited,
button.redBack,
input.redBack {
    background-color: #b50021;
    color: #ffffff;
}

a.redBack:hover, span.redBack:hover,
button.redBack:hover,
input.redBack:hover {
    background-color: #8e001a;
    color: #ffffff;
}

.redBack .heroSectionLeft,
.orangeBack .heroSectionLeft,
.lightBlueBack .heroSectionLeft,
.purpleBack .heroSectionLeft {

}

.redBack .wideHeroSectionLeft h1,
.orangeBack .wideHeroSectionLeft h1,
.lightBlueBack .wideHeroSectionLeft h1,
.purpleBack .wideHeroSectionLeft h1 {
	color: #ffffff;
}

.redBack .heroSectionRight,
.orangeBack .heroSectionRight,
.lightBlueBack .heroSectionRight,
.purpleBack .heroSectionRight {

}

.redBack .moreSpan,
.orangeBack .moreSpan,
.lightBlueBack .moreSpan,
.purpleBack .moreSpan {
	color: #000000;
}

.redBack .moreSpan:hover,
.orangeBack .moreSpan:hover,
.lightBlueBack .moreSpan:hover,
.purpleBack .moreSpan:hover {
	color: #ffffff;
}

.redBack .heroQuickLinks h3,
.orangeBack .heroQuickLinks h3,
.lightBlueBack .heroQuickLinks h3,
.purpleBack .heroQuickLinks h3 {
	color: #000000;
}

.redBack .heroQuickLinks a:link,
.redBack .heroQuickLinks a:visited,
.orangeBack .heroQuickLinks a:link,
.orangeBack .heroQuickLinks a:visited,
.lightBlueBack .heroQuickLinks a:link,
.lightBlueBack .heroQuickLinks a:visited,
.purpleBack .heroQuickLinks a:link,
.purpleBack .heroQuickLinks a:visited,
.navyBack .heroQuickLinks a:link,
.navyBack .heroQuickLinks a:visited  {
	color: #ffffff;
}

.redBack .heroQuickLinks a:hover,
.orangeBack .heroQuickLinks a:hover,
.lightBlueBack .heroQuickLinks a:hover,
.purpleBack .heroQuickLinks a:hover {
	color: #000000;
}

.orangeBack, a.orangeBack:link,
a.orangeBack:visited,
button.orangeBack,
input.orangeBack {
    background-color: #fe8220;
    color: #ffffff;
}

a.orangeBack:hover, span.orangeBack:hover,
button.orangeBack:hover,
input.orangeBack:hover {
    background-color: #d45e00;
    color: #ffffff;
}

.lightBlueBack, a.lightBlueBack:link,
a.lightBlueBack:visited,
button.lightBlueBack,
input.lightBlueBack {
    background-color: #46c9f5;
    color: #ffffff;
}

a.lightBlueBack:hover, span.lightBlueBack:hover,
a.lightBlueBack:hover, span.lightBlueBack:hover,
button.lightBlueBack:hover,
input.lightBlueBack:hover {
    background-color: #058cb9;
    color: #ffffff;
}


.purpleBack, a.purpleBack:link,
a.purpleBack:visited,
button.purpleBack,
input.purpleBack {
    background-color: #9509c4;
    color: #ffffff;
}

a.purpleBack:hover, span.purpleBack:hover,
button.purpleBack:hover,
input.purpleBack:hover {
    background-color: #6d0391;
    color: #ffffff;
}


.lightBlueFront {
	color: #46c9f5;
}

.greyBack {
	background-color: #e6e7e9;
}

.greyBack h1 {
	color: #0b3b5f; 
}

.greyBack h2 {
	color: #0a8fbc;
}

.greyBack h3 {}

.greyBack h4 {}

.greyBack h5 {}

.greyBack h6 {}

.greyBack li:nth-child(even) {
    color: #0890b8;
}

.whiteBack {
	background-color: #ffffff;
        color: #000000;
}

.whiteBack h3 {
	color: #46c9f4;
}

a.whiteBack, a.whiteBack:link,
a.whiteBack:visited,
button.whiteBack,
input.whiteBack, span.whiteBack {
	background-color: #ffffff;
	color: #000000;
}

a.whiteBack:hover,
button.whiteBack:hover,
input.whiteBack:hover, span.whiteBack:hover  {
	background-color: #46c9f4;
	color: #ffffff;
}

.lightBlueBack a.whiteBack:hover,
.lightBlueBack button.whiteBack:hover,
.lightBlueBack input.whiteBack:hover, .lightBlueBack span.whiteBack:hover  {
	background-color: #093b60;
	color: #ffffff;
}

a.whiteBack:hover h4 {
	color: #ffffff;
}

.redBack .innerExtraInfoSection h2, .redBack .innerExtraInfoSection h3, .redBack .innerExtraInfoSection h4, .redBack .innerExtraInfoSection h5 {
color: #b50021;
}

.redBack .innerExtraInfoSection .bigButton {background-color: #b50021; color: #ffffff;}

.redBack .innerExtraInfoSection .bigButton h4 {color: #ffffff;}

.redBack .innerExtraInfoSection .bigButton:hover {background-color: #46c9f4; }

.orangeBack .innerExtraInfoSection h2, .redBack .innerExtraInfoSection h3, .orangeBack .innerExtraInfoSection h4, .redBack .innerExtraInfoSection h5 {
color: #fe8220;
}

.orangeBack .innerExtraInfoSection .bigButton {background-color: #fe8220; color: #ffffff;}

.orangeBack .innerExtraInfoSection .bigButton h4 {color: #ffffff;}

.orangeBack .innerExtraInfoSection .bigButton:hover {background-color: #46c9f4; }

.lightBlueBack .innerExtraInfoSection h2, .redBack .innerExtraInfoSection h3, .lightBlueBack .innerExtraInfoSection h4, .redBack .innerExtraInfoSection h5 {
color: #46c9f5;
}

.lightBlueBack .innerExtraInfoSection .bigButton {background-color: #46c9f5; color: #ffffff;}

.lightBlueBack .innerExtraInfoSection .bigButton h4 {color: #ffffff;}

.lightBlueBack .innerExtraInfoSection .bigButton:hover {background-color: #093b60; }

.purpleBack .innerExtraInfoSection h2, .redBack .innerExtraInfoSection h3, .purpleBack .innerExtraInfoSection h4, .redBack .innerExtraInfoSection h5 {
color: #9509c4;
}

.purpleBack .innerExtraInfoSection .bigButton {background-color: #9509c4; color: #ffffff;}

.purpleBack .innerExtraInfoSection .bigButton h4 {color: #ffffff;}

.purpleBack .innerExtraInfoSection .bigButton:hover {background-color: #093b60; }