/* cmsms stylesheet: newsmart_wide modified: 06/11/26 11:27:25 */
body {
    font-family: khula, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 105%;
    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 {
	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 a#twenty-minute-consultation {
	background-color: #093b60;
	color: #ffffff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

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

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

.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;
}

.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: 520px;
}

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

input#searchInput {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;
}

#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;
}

.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;
}

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

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

.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;
}

.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: 898px;
}

.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: 898px;
        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 {
    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: 320px;
	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;  /* horizontal */
	align-items: center;
	color: #ffffff;
}

.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 {
    background-color: #093b60;
    color: #ffffff;
}

a.navyBack:hover,
button.navyBack:hover,
input.navyBack:hover {
    background-color: #46c9f5;
    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 {
	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 {
	
}

.whiteBack h3 {
	color: #46c9f4;
}

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

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

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