@charset "UTF-8";

:root {
  --container-400: 1580px;
  --container-600: 1680px;
  --container-700: 1780px;
  --container-900: 100%;
  /* FONTS */
  /* --primaryfont: arial, sans-serif; */
  --primaryfont: "Outfit", arial, sans-serif;
  --secondaryfont: "";
  --fontweight-400: 400;
  --fontweight-500: 500;
  --fontweight-600: 600;
  --fontweight-700: 700;
  --fontweight-800: 800;
  --bold: 900;
  --gap: 40px;
  /* TEXT SIZE/LINE HEIGHTS */
  --fontsize-200: 0.9rem;
  --fontsize-300: 1rem;
  --fontsize-400: 1.1rem;
  --fontsize-500: 1.4rem;
  --fontsize-600: 1.7rem;
  --defaultlineheight: 1.5;
  /* COLOURS */
  --red: #da291c;
  --white: #ffffff;
  --primarycolor-200: #e5f3fa;
  --primarycolor-300: #c9e5f3;
  --primarycolor-400: #1c73b9;
  --primarycolor-500: #005eb8;
  --secondarycolor-100: #ffeef1;
  --secondarycolor-200: #fceef0;
  --secondarycolor-300: #fcdfe4;
  --secondarycolor-400: #c52949;
  --secondarycolor-450: #b11c3a;
  --secondarycolor-500: #ae2573;
  --green-200: #e3fcf3;
  --green-300: #c2edde;
  --green-400: #006747;
  --purple-200: #f6f0fd;
  --purple-300: #ede1fc;
  --purple-400: #330072;
  --orange-200: #fdebdc;
  --orange-300: #fde0c8;
  --orange-400: #ff8616;
  --teal-300: #d0fff1;
  --teal-400: #00726c;
  --cobalt-200: #baeef7;
  --cobalt-300: #7cd0e7;
  --cobalt-400: #0047ab;
  --black-100: #e8edee;
  --black-400: #768692;
  --black-700: #434c5f;
  --black-900: #231f20;
}

/* Default background colour classes */
.bg-black-900 {background: var(--black-900);}
.bg-primarycolor-400 {background: var(--primarycolor-400);}
.bg-primarycolor-900 {background: var(--primarycolor-900);}
.bg-secondarycolor-100 {background: var(--secondarycolor-100);}
.bg-secondarycolor-300 {background: var(--secondarycolor-300);}
.bg-secondarycolor-400 {background: var(--secondarycolor-400);}
/* Default text colour classes */
.txt-red {color: var(--red);}
.txt-black-900 {color: var(--black-900);}
.txt-primarycolor-400 {color: var(--primarycolor-400);}
.txt-secondarycolor-400 {color: var(--secondarycolor-400);}

.form .input {margin: 0 0 15px 0;}
.form .input label {display: inline-block; margin: 0 0 5px 0;}
.form .input label.checkbox {margin: 0 10px 0 0;}
.form .input .nopadding {margin: 0;}
.form .row .input {margin: 0;}
.form .checkboxes {display: flex; gap: 20px;}

html {line-height: var(--defaultlineheight);}
body {background: var(--white); color: var(--black-900); font-size: var(--fontsize-400); font-family: var(--primaryfont);}

button, input, optgroup, select, textarea {font-size: var(--fontsize-400); line-height: var(--defaultlineheight); font-weight: var(--fontweight-400); padding-block: 7px;}
button, a, input, label {-webkit-tap-highlight-color: transparent;}

input, textarea, select {background: var(--black-100); border: 1px solid var(--black-100);}

button, input[type="submit"] {background: var(--primarycolor-400); color: var(--white); border: none; padding-block: 10px; font-weight: var(--fontweight-700);}

input[type="checkbox"] {accent-color: var(--red);}
:-webkit-autofill {-webkit-box-shadow: 0 0 0 1000px var(--white) inset; box-shadow: 0 0 0 1000px var(--white) inset; -webkit-text-fill-color: var(--black-900);}

pre, code, kbd, samp {font-size: var(--fontsize-400);}
b, strong {font-weight: var(--fontweight-700);}
a {color: var(--primarycolor-400); text-decoration: underline;}
a:hover {color: var(--primarycolor-400);}
h1, h2, h3, h4, h5, h6 {font-weight: var(--fontweight-700);}
p.seeformerrors {color: var(--red);}
p, li, label {line-height: var(--defaultlineheight);}
li li, li p, p label, label p {font-size: var(--fontsize-400);}
hr {background: var(--primarycolor-300); height: 2px; border-radius: 2px;}

table {background: linear-gradient(to bottom, rgba(201, 229, 243, 1) 0%, rgba(229, 243, 250, 1) 100%); border-radius: 10px; overflow: hidden; border-spacing: 0!important;}
table th, table td, table th p, table td p {font-size: var(--fontsize-400); font-weight: var(--fontweight-400); padding: 20px;}
table th {color: var(--white); background: var(--primarycolor-500); font-size: 1.4rem; font-weight: var(--fontweight-700); letter-spacing: 1px; border: none;}
table th a {color: var(--white)!important;}
table td {color: var(--black-900); border-top: solid 2px var(--white)!important;}
table tr:nth-of-type(odd) {background: #ffffff3d;}
table td a {color: var(--primarycolor-500); font-weight: var(--fontweight-700); text-decoration: none; transition: all 0.2s ease-in-out;}
table td a:hover {color: var(--secondarycolor-450); text-decoration: none;}

h1, h2, h3, h4 {font-weight: var(--fontweight-700); margin: 0 0 15px 0; line-height: 1.2; color: var(--black-700);}
h1 {font-size: 2.5rem;}
h2 {font-size: 2.25rem;}
h3 {font-size: 1.5rem;}
h4 {font-size: 1.1rem; line-height: 1.5;}

main {position: relative; z-index: 2;}

/* New form builder */
.sc-fb .sc-fb-submit-errors, .sc-fb .sc-fb-field-error, .sc-fb .sc-fb-field-required, .required {color: var(--red);}
.sc-fb .sc-fb-field-required, .required {font-weight: var(--fontweight-700);}

/* Skip to content accessibility button */
.stclink {background: var(--red); color: var(--white); font-weight: var(--fontweight-700);}
.stclink:focus {color: var(--white);}
:focus-visible {outline: solid 1px var(--primarycolor-300); background: var(--primarycolor-200)!important;}

.breadcrumb li {font-size: 0.8rem;}

.blockbutton a {display: inline-block; margin: 0; padding: 7px 15px; color: var(--white); font-weight: var(--fontweight-700); letter-spacing: 1px; text-decoration: none; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; background: var(--primarycolor-400); font-size: 1.1rem; border-radius: 5px;}
.blockbutton a:hover {color: var(--white); background: var(--secondarycolor-400);}

.arrowbutton a, .arrowbutton span {color: var(--black-900); text-decoration: none; font-weight: var(--fontweight-700); padding: 0; position: relative; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
.arrowbutton a:after, .arrowbutton span:after {color: var(--primarycolor-400); font-family: "Font Awesome 6 Pro"; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-weight: 900; content: "\f0a9"; margin: 0 0 0 5px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
.arrowbutton a:hover:after, .arrowbutton span:hover:after {transform: translateX(4px); color: var(--secondarycolor-400);}

.arrowbutton a, .arrowbutton span {color: var(--black-900); text-decoration: none; font-weight: var(--fontweight-700); padding: 0; position: relative; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
.arrowbutton a:after, .arrowbutton span:after {color: var(--primarycolor-400); font-family: "Font Awesome 6 Pro"; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-weight: 900; content: "\f0a9"; margin: 0 0 0 5px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
.arrowbutton a:hover:after, .arrowbutton span:hover:after {transform: translateX(4px); color: var(--secondarycolor-400);}

span.colouredtext, body[data-color="blue"] span.colouredtext {color: var(--primarycolor-400)!important;}
body[data-color="pink"] span.colouredtext {color: var(--secondarycolor-400)!important;}
body[data-color="green"] span.colouredtext {color: var(--green-400)!important;}
body[data-color="purple"] span.colouredtext {color: var(--purple-400)!important;}
body[data-color="orange"] span.colouredtext {color: var(--orange-400)!important;}
body[data-color="cobalt"] span.colouredtext {color: var(--cobalt-400)!important;}

.condomordering-error, .errors {color: var(--red);}

.socialicons {gap: 7px; justify-content: flex-end; margin: 0; list-style-type: none;}
.socialicons li {padding: 0; line-height: 1;}
.socialicons li a {font-size: 2rem; color: var(--black-700); text-decoration: none; line-height: 1; transition: all 0.3s ease;}
.socialicons li a:hover {color: var(--secondarycolor-400);}

.content {max-width: var(--container-400); width: 100%; margin: 0 auto; padding: 60px;}
.content.fullwidth {max-width: var(--container-900);}
.content.container-600 {max-width: var(--container-600);}
.content.container-700 {max-width: var(--container-700);}
.content.default {grid-template-columns: 1fr 2.5fr; column-gap: 60px;}

.header .content {grid-template-columns: 250px 1fr; gap: 50px; padding-block: 20px; transition: all 0.3s ease-in-out;}
.header .content a {transition: all 0.3s ease-in-out;}
.header .content .left {padding-block: 10px 0;}
.header .content .right {align-items: flex-end; display: flex; flex-direction: column; height: 100%;}
.header .content .right p {margin: 0;}
.header .content .right .contactlink a {color: var(--black-700); text-decoration: none; font-weight: var(--fontweight-700);}
.header .content .right .contactlink a:hover {color: var(--secondarycolor-400);}

.header .content .right .top {justify-content: flex-end; gap: 20px; align-items: center;}
.header .content .right .bottom {justify-content: flex-end; align-items: center; gap: 20px; padding: 10px 0 0 0; margin-top: auto;}
.header .content .sublinks {list-style-type: none; gap: 20px; margin: 0; padding: 0;}
.header .content .sublinks a {color: var(--black-700); text-decoration: none; font-weight: var(--fontweight-600); font-size: 1.2rem;}
.header .content .sublinks a:hover {color: var(--primarycolor-400);}
.header .content .buttons {gap: 10px;}
.header .content .buttons a {background: var(--primarycolor-400); display: inline-block; border-radius: 5px; padding: 7px 25px; text-decoration: none; color: var(--white); font-weight: var(--fontweight-700);}
.header .content .buttons a:nth-child(2) {background: var(--secondarycolor-400);}
.header .content .buttons a:hover {opacity: 0.7;}

.header.scrolled {position: sticky; top: 0; left: 0; min-height: fit-content; width: 100%; background: var(--white); z-index: 99; box-shadow: 0 4px 23px 4px rgba(0, 0, 0, 0.1);}
.header.scrolled .content {grid-template-columns: 250px 1fr; padding-block: 10px;}
.header.scrolled .nav .content {padding-block: 10px 0;}

.header.scrolled .header-wrap {grid-template-rows: auto; padding-top: 5px;}
.header.scrolled .nav li a {padding-block: 0 10px;}

.urgentmessage {background: var(--secondarycolor-400); color: var(--white); transition: all 0.2s ease;}
.header.scrolled .urgentmessage {visibility: none; display: none;}
.urgentmessage .content {padding-block: 10px;}
.urgentmessage .arrowbutton {text-align: center; gap: 10px; font-weight: var(--fontweight-700);}
.urgentmessage .arrowbutton a, .urgentmessage .arrowbutton a:after {color: var(--white);}

.nav-icon, .nav-close {display: none;}
.nav {border-top: 1px solid var(--primarycolor-400);}
.nav ul, .nav ul.content {list-style-type: none; display: flex; gap: 0; justify-content: space-between; position: relative; padding-block: 0; max-width: var(--container-700);} /* .nav is now the main ul */
.nav li {line-height: 1; padding: 0; font-weight: var(--fontweight-600); font-size: 1.1rem; position: relative; text-align: center;}
.nav li.selected a {color: var(--secondarycolor-400);}
.nav a {display: inline-block; text-decoration: none; color: var(--black); transition: all 0.3s ease; padding: 15px 20px; text-align: center;}
.nav li:hover a {color: var(--primarycolor-400);}
.nav ul ul {position: absolute; top: 100%; left: 50%; width: 250px; background: var(--primarycolor-400); z-index: 5; flex-direction: column; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); border-radius: 0 0 5px 5px; padding: 15px 0; margin: 0; display: none;}
.nav li ul li {font-size: 1.1rem; text-align: center;}
.nav li ul li a {padding: 10px!important; color: var(--white); display: inline-block; transition: unset;}
.nav li:hover ul {display: block;}
.nav li:hover ul li a {color: var(--white); border-radius: 5px;}
.nav li:hover ul li.selected a {background: var(--primarycolor-300); color: var(--primarycolor-500);}
.nav li:hover ul li:hover a {background: var(--white); color: var(--primarycolor-500);}
.nav .mobile-dropdown {display: none;}

.mobile-header {display: none;}

/* Secondary Nav Styling */
.snav {margin: 0 0 40px; list-style-type: none; gap: 10px; position: relative;}
.snav:before {content: "In this section:"; margin: 0 0 5px; padding: 0 0 5px; border-bottom: 1px solid var(--black-400);}
.snav li ul {margin: 5px 0 0; list-style-type: none; gap: 5px;}
.snav li ul li {margin: 0 0 0 20px;}
.snav li ul a {padding: 10px 20px;}

.snav li a {text-decoration: none; font-weight: var(--fontweight-700); background: var(--background, var(--primarycolor-300)); color: var(--black-900); display: block; padding: 15px; border-radius: 10px;}
.snav li.selected a, .snav li.selected ul a, .snav li ul li.selected a {background: var(--background, var(--primarycolor-400)); color: var(--white);}

body[data-color="blue"] .snav li a, body[data-color="blue"] .snav li.selected ul a {--background: var(--primarycolor-300); color: var(--black-900);}
body[data-color="blue"] .snav li.selected a, body[data-color="blue"] .snav li ul li.selected a {--background: var(--primarycolor-400); color: var(--white);}
body[data-color="blue"] .snav li:hover:not(.selected) a, body[data-color="blue"] .snav li ul li:hover a {--background: var(--primarycolor-200); color: var(--black-900);}

body[data-color="pink"] .snav li a, body[data-color="pink"] .snav li.selected ul a {--background: var(--secondarycolor-300); color: var(--black-900);}
body[data-color="pink"] .snav li.selected a, body[data-color="pink"] .snav li ul li.selected a {--background: var(--secondarycolor-400); color: var(--white);}
body[data-color="pink"] .snav li:hover:not(.selected) a, body[data-color="pink"] .snav li ul li:hover a {--background: var(--secondarycolor-200); color: var(--black-900);}

body[data-color="green"] .snav li a, body[data-color="green"] .snav li.selected ul a {--background: var(--green-300); color: var(--black-900);}
body[data-color="green"] .snav li.selected a, body[data-color="green"] .snav li ul li.selected a {--background: var(--green-400); color: var(--white);}
body[data-color="green"] .snav li:hover:not(.selected) a, body[data-color="green"] .snav li ul li:hover a {--background: var(--green-200); color: var(--black-900);}

body[data-color="purple"] .snav li a, body[data-color="purple"] .snav li.selected ul a {--background: var(--purple-300); color: var(--black-900);}
body[data-color="purple"] .snav li.selected a, body[data-color="purple"] .snav li ul li.selected a {--background: var(--purple-400); color: var(--white);}
body[data-color="purple"] .snav li:hover:not(.selected) a, body[data-color="purple"] .snav li ul li:hover a {--background: var(--purple-200); color: var(--black-900);}

body[data-color="orange"] .snav li a, body[data-color="orange"] .snav li.selected ul a {--background: var(--orange-300); color: var(--black-900);}
body[data-color="orange"] .snav li.selected a, body[data-color="orange"] .snav li ul li.selected a {--background: var(--orange-400); color: var(--white);}
body[data-color="orange"] .snav li:hover:not(.selected) a, body[data-color="orange"] .snav li ul li:hover a {--background: var(--orange-200); color: var(--black-900);}

body[data-color="cobalt"] .snav li a, body[data-color="cobalt"] .snav li.selected ul a {--background: var(--cobalt-300); color: var(--black-900);}
body[data-color="cobalt"] .snav li.selected a, body[data-color="cobalt"] .snav li ul li.selected a {--background: var(--cobalt-400); color: var(--black-900);}
body[data-color="cobalt"] .snav li:hover:not(.selected) a, body[data-color="cobalt"] .snav li ul li:hover a {--background: var(--cobalt-200); color: var(--black-900);}

/* End of Secondary Nav Styling */

.popupnotice {max-width: 90vw; border-radius: 10px; padding: 60px 40px;}
.popupnotice .fancybox-close-small:after {color: var(--primarycolor-400);}
.popupnotice .fancybox-close-small:hover:after {background: var(--primarycolor-300); color: var(--primarycolor-500);}
.popupnotice p {font-size: 1.4rem;}

/* Search Styling */
.search {display: inline-block; vertical-align: middle; position: relative; height: 30px; width: 30px; margin: 0 0 0 20px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}
.search .input {display: none; position: relative;}
.search.open {width: auto;}
.search.open .input {width: 200px; display: block;}
.search input {font-size: 0.9rem; border: none; height: 32px; background: var(--primarycolor-300); padding: 0 40px 0 15px; margin: 0; border-radius: 25px; width: 100%;}
.search input[type="submit"] {position: absolute; top: 0; right: 0; width: 32px; border-radius: 50%; background: var(--secondarycolor-400) url(../images/search-icon.svg) no-repeat center center; background-size: 16px; padding: 0;}
.search a.searchbutton {position: absolute; top: 0; right: 0; width: 32px; height: 32px; display: block; border-radius: 50%; background: var(--secondarycolor-400) url(../images/search-icon.svg) no-repeat center center; background-size: 16px; padding: 0;}
.search.open a.searchbutton {display: none;}

.pagetitle {background: var(--color, linear-gradient(45deg, #005eb8 0%, #003087 100%));}
.pagetitle .content {padding-block: 40px;}
.pagetitle .title {color: var(--txtcolor, var(--white)); font-weight: var(--fontweight-600); margin: 0; padding: 0; line-height: 1; font-size: 3.4rem;}
.pagetitle .news-tag {background: var(--white); padding: 5px 10px; margin: 0 0 5px; color: var(--primarycolor-400); max-width: max-content;}

body[data-color="blue"] .pagetitle {--color: var(--primarycolor-300); --txtcolor: var(--black-900);}
body[data-color="pink"] .pagetitle {--color: var(--secondarycolor-300); --txtcolor: var(--black-900);}
body[data-color="green"] .pagetitle {--color: var(--green-300); --txtcolor: var(--black-900);}
body[data-color="purple"] .pagetitle {--color: var(--purple-300); --txtcolor: var(--black-900);}
body[data-color="orange"] .pagetitle {--color: var(--orange-300); --txtcolor: var(--black-900);}
body[data-color="cobalt"] .pagetitle {--color: var(--cobalt-300); --txtcolor: var(--black-900);}

.breadcrumbsection {background: var(--black-100);}
.breadcrumbsection .content {padding-block: 15px;}
.breadcrumbsection ol {list-style-type: none; display: flex; gap: 5px; margin: 0; padding: 0;}
.breadcrumbsection p, .breadcrumbsection li {font-size: 0.85rem; margin: 0;}
.breadcrumbsection .breadcrumb {display: flex; gap: 5px;}
.breadcrumbsection .breadcrumb li a {color: var(--black-700); text-decoration: none;}
.breadcrumbsection .breadcrumb li .selected {font-weight: var(--fontweight-700); color: var(--black-900);}

.mainbanner {background: linear-gradient(to bottom, rgba(201, 229, 243, 1) 0%, rgba(229, 243, 250, 1) 100%);}
.mainbanner .content {padding: 30px 0; width: var(--container-600);}
.mainbanner .content .banner-wrap {grid-template-columns: repeat(5, 1fr); align-items: center; column-gap: 60px; padding-inline: 20px; max-width: var(--container-400); opacity: 0; visibility: hidden;}
.mainbanner .content .banner-wrap.swiper-slide-active {padding-bottom: 30px; opacity: 1; visibility: visible;}
.mainbanner .bannertext {padding-block: 10px; grid-column: 1 / 4;}
.mainbanner .bannertext h2 {font-size: 3.6rem; margin: 0 0 10px 0; line-height: 1.1;}
.mainbanner .bannertext p {font-size: 1.4rem; color: var(--black-900);}
.mainbanner .bannertext p.blockbutton {margin-top: 20px;}
.mainbanner .bannertext .tag {display: inline-block; padding: 5px 10px; font-size: 1rem; font-weight: var(--fontweight-700); color: var(--white); background: var(--purple-400); border-radius: 5px; margin: 0 0 15px 0;}
.mainbanner .image {width: 100%; grid-column: 4 / 6;}

.mainbanner .swiper-pagination {display: flex!important; justify-content: center; bottom: 15px!important;}
.mainbanner .swiper-pagination span {display: block!important; width: 12px!important; height: 12px!important; background: var(--primarycolor-400); opacity: 1!important; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
.mainbanner span.swiper-pagination-bullet-active {background: var(--secondarycolor-400)!important; width: 25px!important; border-radius: 30px!important;}

.quicklinkbuttons {grid-template-columns: repeat(5, 1fr); gap: 30px;}
.quicklinkbuttons .button {display: flex; justify-content: center; border-radius: 15px; overflow: hidden; text-decoration: none; color: var(--black-900); padding: 35px 25px; text-align: center; font-weight: var(--fontweight-700); flex-direction: column; height: 100%; align-content: center; gap: 10px; font-size: 1.3rem; line-height: 1.1; background: var(--background, var(--primarycolor-200));}

.quicklinkbuttons .button .image {display: flex; width: 100%; align-items: center; justify-content: center; max-height: 150px; height: 100%;}
.quicklinkbuttons .button .image img {width: 100%; height: 100%; object-fit: contain; transition: all 0.3s ease-in-out; min-width: 0; min-height: 0;}
.quicklinkbuttons .button:hover .image img {transform: scale(1.05);}

.quicklinkbuttons .button[data-color="blue"] {--background: var(--primarycolor-300);}
.quicklinkbuttons .button[data-color="pink"] {--background: var(--secondarycolor-300);}
.quicklinkbuttons .button[data-color="green"] {--background: var(--green-300);}
.quicklinkbuttons .button[data-color="purple"] {--background: var(--purple-300);}
.quicklinkbuttons .button[data-color="orange"] {--background: var(--orange-300);}
.quicklinkbuttons .button[data-color="cobalt"] {--background: var(--cobalt-300);}

/* For inner pages sidebar */
.quicklinks-sidebar {position: fixed; bottom: 0; left: 0; max-height: 60%; grid-template-columns: repeat(5, 1fr); gap: 15px; background: var(--white); width: 100%; padding: 40px; align-content: center; transform: translateY(100%); -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); transition: all 0.6s ease;}
.quicklinks-sidebar.open {transform: translateY(0); z-index: 100;}
.quicklinks-sidebar .sidebar-button {position: absolute; left: 40px; bottom: 100%; display: block; background: var(--primarycolor-500); color: var(--white); width: max-content; text-align: center; text-decoration: none; padding: 5px 10px; border-radius: 5px 5px 0 0;}
.quicklinks-sidebar.quicklinkbuttons .button {padding: 20px;}
.quicklinks-sidebar.quicklinkbuttons .button .image {height: auto; max-height: 60px;}

.clinicbuttons .grid {grid-template-columns: repeat(4, 1fr); gap: 30px; list-style-type: none; margin: 0; padding: 0;}
.clinicbuttons .button {-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
.clinicbuttons .button a {display: flex; flex-direction: column; background: var(--white); color: var(--black-900); text-decoration: none; font-size: 1.7rem; padding: 30px; justify-content: center; height: 100%; align-items: center; position: relative; overflow: hidden; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
.clinicbuttons .button.viewall a:hover {align-items: center;}
.clinicbuttons .button .name {display: flex; gap: 10px; justify-content: center; align-items: center; transition: all 0.4s ease;}
.clinicbuttons .button a:hover .name {gap: 20px;}
.clinicbuttons .button .cliniccount {font-size: 1.1rem; position: absolute; top: 50%; right: -100%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; color: var(--white);}
.clinicbuttons .button a:hover .cliniccount {right: 20px;}
.clinicbuttons .button.viewall a {border: 2px solid var(--white); background: none;}
.clinicbuttons .button.viewall:hover a {border-color: var(--secondarycolor-400); background: var(--secondarycolor-400);}
.clinicbuttons .button:hover a {background: var(--primarycolor-400); color: var(--white);}

/* Clinicsfeed Styling */
.clinicsfeed a {text-decoration: none;}
.clinicsfeed ul {list-style-type: none; gap: 20px; margin: 0;}
.clinicsfeed .area {gap: 20px;}
.clinicsfeed .area .arrowbutton {font-size: 1.7rem; line-height: 1; background: var(--black-100); color: var(--black-900); padding: 20px; cursor: pointer; position: relative; transition: all 0.4s ease;}
.clinicsfeed .area .arrowbutton:hover {background: var(--primarycolor-400); color: var(--white);}

.clinicsfeed .clinic {padding: 20px; border-radius: 8px; box-shadow: 0 4px 15px 5px rgba(0, 0, 0, 0.1); gap: 10px;}
.clinicsfeed .clinic .title {font-size: 1.7rem; font-weight: var(--fontweight-700); color: var(--black-900);}
.clinicsfeed .clinic .clinictype {font-weight: var(--fontweight-700);}
.clinicsfeed .clinic .link a {transition: all 0.3s ease-in-out;}
.clinicsfeed .clinic .link:hover a {color: var(--secondarycolor-400);}
.clinicsfeed .clinic p {margin: 0;}
.clinicsfeed .clinic .arrowbutton {margin-top: auto;}

.fullwidthfeature {background: var(--white);}
.fullwidthfeature .content {max-width: 1000px; padding-block: 0; position: relative; margin-top: 150px;}
.fullwidthfeature .buttons {column-gap: 60px;}
.fullwidthfeature > *, .fullwidthfeature .buttons a > * {grid-column-start: 1; grid-row-start: 1;}
.fullwidthfeature .buttons a {text-decoration: none; position: relative;}
.fullwidthfeature .buttons a .inner {flex-direction: column; height: 100%; width: 100%; padding: 60px; align-items: flex-start; align-content: center; justify-content: center; color: var(--white); font-weight: var(--fontweight-700); position: relative; z-index: 2;}
.fullwidthfeature .buttons a .inner p.heading {font-size: 1.8rem; line-height: 1.3; margin: 0 0 10px 0;}
.fullwidthfeature .buttons a .inner p.blockbutton {color: var(--primarycolor-400); font-weight: var(--fontweight-700); background: var(--white); padding: 5px 10px; font-size: 1rem; border-radius: 5px;}
.fullwidthfeature .buttons a:nth-child(2) {top: 40px;}
.fullwidthfeature .buttons a:nth-child(2) img {transform: rotate(270deg);}

.featuredpost .post .image {width: 100%; margin: 0 0 25px 0; border-radius: 10px; overflow: hidden;}
.featuredpost .post .text {text-align: left;}
.featuredpost .post .text p, .featuredpost .post .text h3 {padding: 0; margin: 0 0 10px 0;}
.featuredpost .post .text h3 {font-size: 1.4rem; margin: 0 0 5px 0;}

.post .date {font-size: var(--fontsize-300); margin: 0 0 5px; gap: 5px;}

.gridboxes {grid-template-columns: repeat(3, 1fr); gap: 50px;}
.gridboxes .box {background: var(--white); padding: 40px; box-shadow: 0 4px 23px 9px rgba(0, 0, 0, 0.1); text-align: center;}
.gridboxes .box h2 {font-size: 1.6rem;}
.gridboxes .box .buttons {display: grid; grid-template-columns: repeat(1, 1fr); gap: 20px; margin: 0; padding: 0; list-style-type: none; height: 100%;}
.gridboxes .box .buttons a {height: 100%; display: flex; padding: 20px; background: var(--secondarycolor-400); text-decoration: none; color: var(--white); font-weight: var(--fontweight-700); text-align: center; align-items: center; align-content: center; justify-content: center; font-size: 1.4rem; border-radius: 10px; overflow: hidden;}
.gridboxes .box .buttons a:hover {background: var(--secondarycolor-450);}
.gridboxes .box .text {height: 100%; display: flex; flex-direction: column;}

.gridnav {gap: 30px;}
.gridnav .box {padding: 0; border-radius: 5px; overflow: hidden; text-decoration: none; transition: all 0.3s ease;}
.gridnav .box:hover {box-shadow: 0 4px 17px 9px rgba(0, 0, 0, 0.2);}
.gridnav .box .image img {transition: all 0.6s ease-in-out;}
.gridnav .box:hover .image img {scale: 1.04;}
.gridnav .box .inner {z-index: 5;}
.gridnav .box .inner .title {background: #ffffffa4; font-size: 2rem; margin: 0; padding: 10px 7px;}
.gridnav .box .inner .arrowbutton span {display: inline-block; padding: 5px; background: var(--white); width: 100%;}
.gridnav .box:hover .inner .arrowbutton span:after {transform: translateX(4px); color: var(--secondarycolor-400);}

.concertina {display: flex; flex-direction: column; gap: 10px; margin: 20px 0;}
.concertina .block .heading {cursor: pointer; border: 2px solid var(--bordercolor, var(--primarycolor-400)); padding: 10px 40px 10px 25px; color: var(--txtcolor, var(--primarycolor-400)); font-weight: var(--fontweight-700); border-radius: 10px; margin: 0; font-size: 1.1rem; position: relative;}
.concertina .block .heading:after {font-family: "Font Awesome 6 Pro"; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-weight: 900; content: "\f13a"; transition: all 0.4s ease;}
.concertina .block .heading.open:after {transform: rotate(-180deg);}
.concertina .block .text {display: none; background: var(--bgcolor, --primarycolor-200); padding: 25px; border-radius: 10px; margin: 5px 0 0 0;}

body[data-color="blue"] .concertina .block .heading {--bordercolor: var(--primarycolor-400); --txtcolor: var(--primarycolor-400);}
body[data-color="blue"] .concertina .block .text {--bgcolor: var(--primarycolor-300); color: var(--black-900);}
body[data-color="pink"] .concertina .block .heading {--bordercolor: var(--secondarycolor-400); --txtcolor: var(--secondarycolor-400);}
body[data-color="pink"] .concertina .block .text {--bgcolor: var(--secondarycolor-300); color: var(--black-900);}
body[data-color="green"] .concertina .block .heading {--bordercolor: var(--green-400); --txtcolor: var(--green-400);}
body[data-color="green"] .concertina .block .text {--bgcolor: var(--green-300); color: var(--black-900);}
body[data-color="purple"] .concertina .block .heading {--bordercolor: var(--purple-400); --txtcolor: var(--purple-400);}
body[data-color="purple"] .concertina .block .text {--bgcolor: var(--purple-300); color: var(--black-900);}
body[data-color="orange"] .concertina .block .heading {--bordercolor: var(--orange-400); --txtcolor: var(--orange-400);}
body[data-color="orange"] .concertina .block .text {--bgcolor: var(--orange-300); color: var(--black-900);}
body[data-color="cobalt"] .concertina .block .heading {--bordercolor: var(--cobalt-400); --txtcolor: var(--black-700);}
body[data-color="cobalt"] .concertina .block .text {--bgcolor: var(--cobalt-300); color: var(--black-900);}

.feature-boxes {display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap);}
.feature-boxes .feature-box {border-radius: 10px; overflow: hidden; flex: 1 0 calc(33% - var(--gap)); flex-grow: 1;}
.feature-boxes .feature-box .heading {align-items: center; gap: 10px; padding: 10px 20px; background: var(--primarycolor-400);}
.feature-boxes .feature-box .heading-text, .feature-boxes .feature-box .heading i {margin: 0; padding: 0; color: var(--white); font-size: 1.25rem; font-weight: var(--fontweight-600);}
.feature-boxes .feature-box .inner-text {background: var(--primarycolor-200); padding: 20px; height: 100%;}

.feature-boxes .feature-box.green .heading {background: var(--green-400);}
.feature-boxes .feature-box.green .inner-text {background: var(--green-300);}
.feature-boxes .feature-box.orange .heading {background: var(--orange-400);}
.feature-boxes .feature-box.orange .inner-text {background: var(--orange-300);}
.feature-boxes .feature-box.purple .heading {background: var(--purple-400);}
.feature-boxes .feature-box.purple .inner-text {background: var(--purple-300);}
.feature-boxes .feature-box.red .heading {background: var(--secondarycolor-400);}
.feature-boxes .feature-box.red .inner-text {background: var(--secondarycolor-300);}

/* Multi-step ADF Styling */
.multistep-count {display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; position: relative; z-index: 10;}
button.multistep-count {border: none; background: none; padding: 0; margin: 0; cursor: pointer;}
.multistep-container {display: flex; flex-direction: column; gap: 25px; margin: 40px 0;}
.multistep-counter {display: flex; align-items: center; justify-content: space-between; width: 100%; position: relative; overflow: hidden; z-index: 99;}
.multistep-counter:before {position: absolute; content: ""; top: 16px; left: 55px; width: calc(100% - 90px); height: 2px; background: var(--primarycolor-300); z-index: -1;}
.multistep-counter .multistep-progress {position: absolute; width: 0; height: 2px; top: 16px; left: 30px; background: var(--secondarycolor-400); transition: all 0.4s ease;}
.multistep-counter .multistep-count .multistep-number {padding: 5px 10px; margin: 0; border-radius: 50%; font-weight: 400; background: var(--primarycolor-300); color: var(--black-900); cursor: pointer; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; position: relative; transition: all 1s ease;}
.multistep-counter .multistep-count.active .multistep-number {background: var(--secondarycolor-400); color: var(--white);}
.multistep-counter .multistep-count .multistep-title {max-width: 90px; min-height: 53px; text-align: center; font-size: var(--fontsize-200); color: var(--black-900); font-weight: 400;}
.multistep-counter .multistep-count.previous .multistep-number {background: var(--black-400); color: var(--white);}
.multistep-text-container {position: relative;}
.multistep-text-container .step-nav.prev, .multistep-text-container .step-nav.next {position: absolute; content: ""; top: 50%; transform: translateY(-50%); background: var(--secondarycolor-400); border-radius: 50%; height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; -webkit-box-shadow: 0 0 4px 0 rgba(171, 171, 171, 1); -moz-box-shadow: 0 0 4px 0 rgba(171, 171, 171, 1); box-shadow: 0 0 4px 0 rgba(171, 171, 171, 1);}
.multistep-text-container .step-nav.prev:hover, .multistep-text-container .step-nav.next:hover {background: var(--secondarycolor-450);}
.multistep-text-container .step-nav.prev {left: -20px;}
.multistep-text-container .step-nav.next {right: -20px;}
.multistep-text-container .step-nav i {color: var(--white);}
.multistep-text {background: var(--lightgrey); border-radius: 10px; padding: 50px 60px; -webkit-box-shadow: 0 4px 23px 9px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 4px 23px 9px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 23px 9px rgba(0, 0, 0, 0.1); display: none;}
.multistep-text.active {display: block;}
.multistep-text .top {display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; padding-bottom: 10px;}
.multistep-text .top .box-number {display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--primarycolor-400); color: var(--white); padding: 0; margin: 0; aspect-ratio: 1 / 1;}
.multistep-text .top .heading {color: var(--primarycolor-400); font-size: 1.5rem; font-weight: var(--fontweight-700); padding: 0;}
/* End of Multi-step ADF Styling */

/* Useful Resources ADF Styling */
.resources {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
.resources .box {background: var(--white); -webkit-box-shadow: 0 4px 23px 9px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0 4px 23px 9px rgba(0, 0, 0, 0.05); box-shadow: 0 4px 23px 9px rgba(0, 0, 0, 0.05); border-radius: 5px; text-decoration: none; color: var(--black-900);}
.resources .box .inner {padding: 20px; text-align: center; gap: 10px;}
.resources .box .image {padding: 30px 30px 0;}
.resources .box .image img {border-radius: 5px; margin: 0 auto;}
.resources .box:hover .arrowbutton span:after {transform: translateX(4px); color: var(--secondarycolor-400);}
.resources .box.external .arrowbutton span:after {content: "\f08e";}
.resources .box.download .arrowbutton span:after {content: "\f56d";}
.resources .box .inner .title {margin: 0; color: var(--primarycolor-400); font-size: 1.3rem; font-weight: var(--fontweight-700);}
.left .resources {grid-template-columns: 1fr; gap: 15px; margin: 20px 0;}
/* End of Useful Resources ADF Styling */

.trainingevents .row {grid-template-columns: 2fr 2fr 1fr; padding: 10px; background: var(--black-100); border-radius: 10px; margin: 0 0 10px 0;}
.trainingevents .row.heading {background: none; border-radius: 0; margin: 0;}
.trainingevents .row .arrowbutton {text-align: right;}
.trainingevents .row.heading p {font-weight: var(--fontweight-700);}

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

/* Newsfeedmain Styling */
.newsfeedmain {gap: 50px;}
.newsfeedmain .post {position: relative; gap: 0; background: var(--white); box-shadow: 0 4px 23px 9px rgba(0, 0, 0, 0.1); border-radius: 10px; overflow: hidden;}
.newsfeedmain .post .text {padding: 30px 30px 50px; flex-grow: 1;}
.newsfeedmain .post .text .standfirst {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; text-overflow: ellipsis; margin-bottom: 20px;}
.newsfeedmain .post .text .arrowbutton {position: absolute; bottom: 0; right: 0; padding: 30px;}
.newsfeedmain .post .text .arrowbutton a {color: var(--primarycolor-500);}
.newsfeedmain .post .image {width: 100%; overflow: hidden;}
.newsfeedmain .post .image img {width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease-in-out;}
.newsfeedmain .post a:hover img {scale: 1.05;}

/* Important Note ADF Styling */
.important-note {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; margin: 0 0 60px 0;}
.important-note .note {width: 100%; background: var(--secondarycolor-400); color: var(--white); padding: 10px 20px; margin: 0; border-radius: 5px;}
.important-note .note span {margin: 0 10px 0 0;}

/* Contact form styling */
.form-concertina {display: flex; flex-direction: column; margin: 20px 0;}
.form-concertina .heading {cursor: pointer; background: var(--primarycolor-400); padding: 10px 40px 10px 25px; color: var(--white); font-weight: var(--fontweight-700); border-radius: 10px; margin: 0; font-size: 1.1rem; position: relative;}
.form-concertina .heading:after {font-family: "Font Awesome 6 Pro"; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-weight: 900; content: "\f13a"; position: absolute; top: 50%; right: 15px; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%);}
.form-concertina .heading.open:after {content: "\f139";}
.form-concertina .form-wrap {display: none; padding: 20px;}
.form-concertina .form-wrap.open {display: block;}

.form .input button[type="button"] {padding: 10px 50px;}
.form input[type="submit"], .form .input button[type="button"] {border-radius: 10px; transition: all 0.2s ease-in-out;}
.form input[type="submit"]:hover, .form .input button[type="button"]:hover {opacity: 0.7;}
.form input[type="radio"], .form input[type="checkbox"] {cursor: pointer;}
.form.narrative-survey p {margin: 0 0 5px 0;}

.footerboxes .content .grid.gridboxes.grid-halves {grid-template-columns: repeat(2, 1fr);}
.footerboxes .content .gridboxes .box h2 {text-align: left;}
.footerboxes .content .gridboxes .box .post {display: grid; grid-template-columns: 1fr 2fr; gap: 20px;}

.footer {background: var(--primarycolor-200);}
.footer .main-footer {position: relative;}
.footer .main-footer:before {width: 100%; height: 0; padding-bottom: 22%; background: url(../images/footer.svg) no-repeat 0 0; background-size: 100%; content: ""; display: block; position: absolute; bottom: 100%; left: 0;}
.footer .main-footer .content {grid-template-columns: 295px 1fr 1fr; column-gap: 60px; padding-block: 20px 60px;}
.footer .main-footer .content .logo {display: block;}
.footer .heading {font-weight: var(--fontweight-700); margin: 0 0 5px 0; font-size: 1.1rem; color: var(--black-700);}
.footer ul {list-style-type: none; margin: 0; padding: 0;}
.footer li {font-size: 1rem; padding: 0 0 0 20px; position: relative;}
.footer li:before {font-family: "Font Awesome 6 Pro"; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-weight: 900; content: "\f33b"; position: absolute; top: 0; left: 0; color: var(--secondarycolor-400);}
.footer li a, .footer .contactlink a {color: var(--black-700); text-decoration: none;}
.footer .socialicons li {padding: 0;}
.footer .socialicons li:before {display: none;}
.footer .contactlink {font-size: 1.7rem; margin: 0; font-weight: var(--fontweight-700); letter-spacing: -1px;}
.footer .col {display: flex; flex-direction: column;}
.footer .col:last-child {text-align: right; align-items: flex-end;}
.footer .quicklink {margin: 0 0 10px 0;}
.footer .quicklink a {color: var(--white); font-weight: var(--fontweight-600); font-size: 1.3rem; text-decoration: none; background: var(--secondarycolor-400); display: block; padding: 7px 15px; border-radius: 10px;}
.footer .bottom-footer {background: var(--white); padding: 20px 60px 40px 60px;}
.footer .bottom-footer .content {padding: 0; display: flex;}
.footer .bottom-footer .content p {color: var(--black-700); margin: 0; font-size: 0.9rem;}
.footer .bottom-footer .content p a {color: var(--black-700); text-decoration: none;}
.footer .bottom-footer .content .right {margin-left: auto;}

.footer .bottom-footer .legal-links {font-size: 0.9rem; margin-bottom: 0; display: flex; gap: 10px;}
.footer .bottom-footer .legal-links a {text-decoration: none;}
.footer .bottom-footer .legal-links span:after {content: "|"; padding-left: 10px;}
.footer .bottom-footer .legal-links span:last-child:after {content: "";}
.footer .bottom-footer .legal-links a:hover {text-decoration: underline;}

/* Facebook */
.facebook {max-height: 200px;}
.facebook .fb-posts {display: grid; gap: 20px;}
.facebook .fb-posts .fb-post {display: grid; grid-template-columns: 1fr 2fr; gap: 20px;}
.facebook .fb-posts .fb-post + .fb-post {padding-top: 20px; border-top: 1px solid var(--primarycolor-400);}
.facebook .fb-posts .fb-post .text {display: grid; text-align: left; row-gap: 10px;}
.facebook .fb-posts .fb-post .text .message {grid-column: 1 / 3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; text-overflow: ellipsis; max-height: 110px;}
.facebook .fb-posts .fb-post .text .name {margin: 0; max-height: max-content;}
.facebook .fb-posts .fb-post .text .date {max-height: max-content; text-align: right; margin: 0;}
.facebook .fb-posts .fb-post .image {max-height: 200px; overflow: hidden;}
.facebook .fb-posts .fb-post .image a img {width: 100%;}

/* Get It On Scheme Plug-in - front end styling */
/* temporary */
/* .gio-form {display: none;} */
#step-2 {display: flex;}
.gio-form button {padding: 10px 15px; cursor: pointer; border-radius: 5px; max-width: 300px; font-size: 1rem;}
.gio-form button:hover {background: var(--secondarycolor-450);}
.gio-form button:focus-visible {background-color: var(--orange-400)!important; outline: none;}
.gio-form button:disabled {background-color: #cccccc; color: #666666; cursor: not-allowed;}

.gio-form {flex-direction: column; gap: 20px; background: var(--primarycolor-200); border-radius: 10px; padding: 30px; margin-bottom: 20px;}
.gio-form h2 {margin: 0 0 10px 0; color: var(--primarycolor-500); font-size: 1.75rem;}
.gio-form .input {margin: 0 0 15px 0;}
.gio-form .input p {margin: 0;}
.gio-form .small-text {font-size: 0.9rem;}
.gio-form input, .gio-form textarea, .gio-form select {background: var(--white); border: 1px solid var(--cobalt-300); height: 40px;}
.gio-form input[type=checkbox], .gio-form input[type=radio] {height: 15px; cursor: pointer;}
.gio-form input:focus-visible, .gio-form textarea:focus-visible, .gio-form select:focus-within {background: var(--white)!important; border: 1px solid var(--primarycolor-400);}
.gio-form .buttons {gap: 20px; margin: 0 0 10px 0;}
.gio-form .register-btn {background: var(--secondarycolor-450);}
.gio-form .blockbutton {margin: 0;}
.gio-form .submitbutton {background: var(--primarycolor-400); color: var(--white); border-radius: 5px; border: none; height: unset; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
.gio-form .submitbutton:hover {background: var(--secondarycolor-400);}

.gio-form.survey h2 {margin: 0 0 20px 0;}
.gio-form.survey input.sendbutton {background: var(--primarycolor-400); border: none; padding-block: 0;}
.gio-form.survey input.sendbutton:hover {opacity: 1; background: var(--secondarycolor-400);}

.ordering-form {background: var(--primarycolor-200); border-radius: 10px; gap: 0;}
.ordering-form .details-container {padding: 30px; border-left: solid 1px var(--cobalt-300);}
.ordering-form .details-container .group {margin: 0 0 20px;}
.ordering-form .details-container p {margin: 0;}
.ordering-form .details-container .small-text {font-size: 0.9rem; margin: 0 0 5px;}

/* CW added */
.gio-form.details-container {flex-direction: column; gap: 15px;}
.gio-form.details-container p {margin: 0 0 5px;}
.gio-form.details-container .lead-contact-name {margin: 0;}
.gio-form.details-container i {display: inline-block; vertical-align: middle; font-size: 1rem; color: var(--primarycolor-500); margin: 0 5px 0 0;}
.gio-form.details-container .confirm-details-btn {background: var(--black-400);}

.gio-ordering-form {display: flex; flex-direction: column; gap: 10px;}

table.calendar-table td {text-align: center!important;}
.calendar-table .training-day {background: var(--secondarycolor-450); color: var(--white); font-weight: 700; cursor: pointer;}
.calendar-table .training-day:hover {background: var(--green-400); outline: solid 5px var(--white); border-radius: 5px;}

/* Responsive Styles */
@media (hover: hover) {
  /* Hover specific styling for browsers/machines that support hover */
}

@media screen and (max-width: 1500px) {
  .clinicbuttons .grid {grid-template-columns: repeat(3, 1fr); gap: 20px;}
  .clinicbuttons .button a {display: flex; flex-direction: column; color: var(--black-900); text-decoration: none; font-size: 1.7rem; padding: 30px; justify-content: center; height: 100%; align-items: center; position: relative; overflow: hidden;}
  .clinicbuttons .button a i {-webkit-transition: margin 0.5s ease; -moz-transition: margin 0.5s ease; -ms-transition: margin 0.5s ease; -o-transition: margin 0.5s ease; transition: margin 0.5s ease;}
  .clinicbuttons .button a:hover {align-items: center;}
  .clinicbuttons .button a:hover i {margin-left: 10px;}

  .clinicbuttons .button .cliniccount {top: calc(50% + 30px); right: -100%;}
  .clinicbuttons .button a:hover .cliniccount {right: 50%; -webkit-transform: translate(50%, -50%); -moz-transform: translate(50%, -50%); -ms-transform: translate(50%, -50%); -o-transform: translate(50%, -50%); transform: translate(50%, -50%);}

  .facebook .fb-posts .fb-post .text .name {grid-column: span 2;}
  .facebook .fb-posts .fb-post .text .date {grid-column: span 2; text-align: left;}
  .facebook .fb-posts .fb-post .text .message {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; text-overflow: ellipsis;}
}

@media screen and (max-width: 1290px) {
  .urgentmessage .arrowbutton a {min-width: max-content;}

  .feature-boxes {--gap: 20px;}
  .feature-boxes .feature-box {flex: 1 0 calc(50% - var(--gap)); flex-grow: 1;}

  .mainbanner .content .banner-wrap {gap: 40px;}
  .mainbanner .content, .mainbanner .bannertext {padding-block: 25px;}
  .mainbanner .content .banner-wrap h2 {font-size: 2.8rem;}

  .nav li {font-size: 1rem; width: auto;}

  .resources {grid-template-columns: repeat(2, 1fr); gap: 20px;}

  .footerboxes .content .gridboxes .box {padding: 25px;}

  .facebook {max-height: unset;}
  .facebook .fb-posts .fb-post {grid-template-columns: 1fr;}
  .facebook .fb-posts .fb-post .image {max-width: 250px;}

  .footerboxes .content .gridboxes .box .post {grid-template-columns: 1fr;}
  .footerboxes .content .gridboxes .box .post .image {max-width: 250px;}

  .footer .main-footer .content {grid-template-columns: repeat(2, 1fr); row-gap: 20px;}
  .footer .main-footer .content .logo {max-width: 300px;}
  .footer .main-footer .col:last-of-type {grid-column: span 2;}
  .footer .main-footer .col .bottom {display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 20px; margin: 0; width: 100%;}
  .footer .main-footer .col .bottom .quicklink {margin: 0; margin-left: auto;}
}

@media screen and (max-width: 1180px) {
  .mainbanner .content .banner-wrap h2 {font-size: 2.2rem;}

  .quicklinkbuttons {grid-template-columns: repeat(4, 1fr); gap: 20px;}
  .quicklinkbuttons .button:nth-child(9), .quicklinkbuttons .button:nth-child(10) {grid-column: span 2;}
  .quicklinkbuttons .button .image img {max-width: 120px;}
  .quicklinkbuttons .button {padding: 20px 15px;}

  /* For inner pages sidebar */
  .quicklinks-sidebar {grid-template-columns: repeat(5, 1fr);}
  .quicklinks-sidebar .button:nth-child(9), .quicklinks-sidebar .button:nth-child(10) {grid-column: span 1;}
}

@media screen and (max-width: 1080px) {
  .header .content {align-items: center;}
  .header .content .left, .header .content .left a.logo {max-height: max-content; padding: 0;}
  .header .content .right .bottom {display: grid; grid-template-columns: 1fr auto; justify-content: flex-end; align-items: center;}
  .header .content .right .bottom .sublinks {grid-column: 1/-1; grid-row: 1;}
  .header .content .right .bottom .search {margin: 0 0 0 auto;}

  .quicklinks-sidebar .button {font-size: 1rem;}
  .quicklinks-sidebar.quicklinkbuttons .button .image {max-height: 50px;}

  .footerboxes .gridboxes {gap: 30px;}
}

@media screen and (max-width: 940px) {
  .header .content {grid-template-columns: 200px 1fr; gap: 30px;}
  .header.scrolled .content {grid-template-columns: 200px 1fr;}
  .header .content .left {padding-block: 15px 0;}
  .nav li {font-size: 0.9rem;}

  .mainbanner {background: none;}
  .mainbanner .content {padding: 0;}
  .mainbanner .content .banner-wrap {grid-template-columns: 30px 1fr 30px; grid-template-rows: auto 80px auto; gap: 0; padding: 0;}
  .mainbanner .content .banner-wrap .image {grid-column: 1/-1; grid-row: 1/3; width: 100%; height: 100%; overflow: hidden; z-index: 1;}
  .mainbanner .content .banner-wrap .bannertext {grid-column: 2; grid-row: 2/-1; background: var(--primarycolor-200); z-index: 2; padding: 20px 25px;}
  .mainbanner .swiper-pagination {flex-direction: column; gap: 5px; bottom: unset!important; top: 50%; transform: translateY(-50%); max-width: max-content; right: 6px; left: unset;}
  .mainbanner span.swiper-pagination-bullet {background: var(--primarycolor-300)!important;}
  .mainbanner span.swiper-pagination-bullet-active {background: var(--primarycolor-400)!important; height: 24px!important; width: 12px!important;}

  .grid-thirds {grid-template-columns: repeat(2, 1fr)!important; --gap: 30px;}

  .clinicbuttons .grid {grid-template-columns: repeat(2, 1fr); gap: 10px;}
  .clinicbuttons .button a {font-size: 1.5rem; padding: 30px 20px;}

  .quicklinks-sidebar {padding: 20px;}
  .quicklinks-sidebar .sidebar-button {left: 20px;}
  .quicklinks-sidebar.quicklinkbuttons .button {padding: 10px;}
}

@media screen and (max-width: 860px) {
  .content.default {grid-template-columns: 1fr; gap: 60px;}
  .content.default .right {grid-row: 1;}
  .content.default .left {display: grid; grid-template-columns: 1fr; grid-template-rows: auto;}
  .content.default .left .side-content {grid-row: 1;}
  .content.default .left .snav {margin: 30px 0 0;}

  .quicklinkbuttons:not(.quicklinks-sidebar) .button .image img {max-width: 100px;}
  .quicklinkbuttons:not(.quicklinks-sidebar) .button {font-size: 1.1rem;}
}

@media screen and (max-width: 820px) {
  .header .content .right .top {gap: 10px;}
  .header .content .right .contactlink a {color: var(--white); background: var(--primarycolor-400); padding: 7px 25px; display: inline-block; border-radius: 5px;}
  .header .content .right .contactlink a:hover {color: var(--white); opacity: 0.7;}
  .header .content .right .contactlink a span.text {display: none;}
  .nav a {padding-inline: 10px;}

  .fullwidthfeature .buttons {column-gap: 40px;}
  .fullwidthfeature .buttons a .inner p.heading {font-size: 1.4rem; line-height: 1.3; margin: 0 0 10px 0;}

  .footerboxes .content .grid.gridboxes.grid-halves {grid-template-columns: 1fr!important; gap: 20px;}
  .footerboxes .content .gridboxes .box .post {grid-template-columns: 1fr 2fr;}

  .facebook .fb-posts .fb-post {grid-template-columns: 1fr 2fr;}

  .feature-boxes .feature-box {flex: 1 0 100%; flex-grow: 1;}

  .footer .main-footer .content {grid-template-columns: 220px auto;}

  .quicklinkbuttons:not(.quicklinks-sidebar) {grid-template-columns: repeat(3, 1fr); gap: 10px;}
  .quicklinkbuttons:not(.quicklinks-sidebar) .button:nth-child(9) {grid-column: span 1;}
  .quicklinkbuttons:not(.quicklinks-sidebar) .button:nth-child(10) {grid-column: span 3;}
}

@media screen and (max-width: 750px) {
  .header .content, .header.scrolled .content {grid-template-columns: 1fr; gap: 0; padding: 0;}
  .header .content .top.flex {grid-row: 1; gap: 0;}
  .header .content .right .top {display: grid; grid-template-columns: 1fr 2fr;}
  .header .content .buttons {gap: 0; font-size: 1rem;}
  .header .content .right, .nav {display: contents;}
  .header .content .right .contactlink a {border-radius: 0; background: var(--black-700); width: 100%; text-align: center; font-size: 1rem;}
  .header .content .right .contactlink a span.text {display: inline-block; padding: 0 10px;}
  .header .content .buttons a {border-radius: 0; width: 100%; text-align: center;}
  .header .content .left {display: flex; flex-direction: row; justify-content: space-between; padding: 10px 20px; border-bottom: 1px solid var(--primarycolor-400);}
  .header .content .left .logo {min-width: 200px;}
  .header.scrolled .content .left .logo {min-width: 140px; height: max-content;}
  .nav-icon {display: inline-block; font-size: 2.5rem; font-weight: var(--fontweight-700); line-height: 1.5; color: var(--primarycolor-400); background: none; padding: 0; text-decoration: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
  .header.scrolled .nav-icon {font-size: 2rem; height: 32px;}
  .header.scrolled .nav-icon i {transform: translateY(-6px);}
  .nav-close {display: block; background: none; width: 32px; height: 40px; padding: 0; font-size: 2.5rem; line-height: 2rem; margin-left: auto; margin-right: 20px; color: var(--black-700); grid-column: 3; grid-row: 1;}
  .header .content .right .bottom {display: flex; position: fixed; top: 0; left: 100%; background: var(--primarycolor-200); height: max-content; transition: all 0.4s ease; min-width: 380px;}
  .header .content .right .bottom {display: none; grid-template-columns: 1fr auto 30px; padding: 20px 40px;}
  .nav > ul.content {flex-direction: column; align-items: flex-start; justify-content: flex-start; overflow-y: scroll; z-index: 998; overflow-x: clip;}

  .header .content .right .bottom .sublinks {grid-column: 1/-1; grid-row: 2;}
  .header .content .right .bottom .search {margin: 0 0 0 auto;}
  .header .content .right .bottom .socialicons {grid-column: 2; grid-row: 1;}

  .header.scrolled .nav .content {padding: 0;}
  .header.scrolled .nav li a {padding-block: 0;}
  .header .content .sublinks {display: flex; flex-direction: row; justify-content: space-between; gap: 10px; grid-column: span 2; grid-row: 2; border-bottom: 1px solid var(--primarycolor-400); border-radius: 0; margin: 0 0 20px 0;}
  .socialicons {justify-content: flex-start;}
  .header .content .right .bottom.open {flex-direction: column-reverse; transform: translateX(-100%);}

  .nav {border-top: 0; flex-direction: column; transform: translateX(100%); -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); display: flex; position: fixed; top: 0; right: 0; background: var(--primarycolor-200); height: 100vh; transition: all 0.4s ease; min-width: 380px; padding: 30px; z-index: 999;}
  .nav.open {transform: translateX(0%);}
  .nav ul {margin: 0;}
  .nav > ul li > a span i {display: none;}
  .nav li {padding: 10px 0; width: 100%; text-align: left; display: grid; grid-template-columns: 1fr 20px;}
  .nav li a {text-align: left; font-size: 1.2rem; padding: 0;}
  .nav li:hover ul {display: none;}
  .nav .mobile-dropdown {display: inline-block;}
  .nav .dropdown {background: none; position: static; font-size: 0.9rem; grid-row: 2; grid-column: 1 / -1;}
  .nav .dropdown .content {display: flex; flex-direction: column;}
  .nav ul ul.dropdown {margin: 10px 0 0 10px; width: 100%; position: static; background: none!important; padding: 0; transform: none;}
  .nav ul ul.dropdown li {padding: 0; display: block; text-align: left;}
  .nav ul ul.dropdown li a {padding: 0; color: var(--black-700);}
  .nav ul ul.dropdown li.selected a {background: none;}
  .nav li:hover ul.dropdown li:hover a {background: none;}
  .nav li:hover ul.dropdown li.selected a {color: var(--secondarycolor-400);}

  .mobile-header {position: relative; flex-direction: column; gap: 30px; align-items: flex-end; width: 100%; justify-content: flex-start; display: flex;}
  .mobile-header .top {display: flex; gap: 30px;}
  .mobile-header .nav-close {grid-column-start: unset; grid-column-end: unset; grid-row-start: unset; grid-row-end: unset; margin: 0; width: 44px;}
  .mobile-header .sublinks, .mobile-header .socialicons {position: unset; top: unset; left: unset; width: 100%; -webkit-transform: none; transform: none;}
  .mobile-header .socialicons {display: initial;}
  .mobile-header .sublinks {border-bottom: 1px solid var(--primarycolor-400); display: flex; margin: 0 0 20px 0;}
  .mobile-header .socialicons {display: flex; flex-direction: row; gap: 10px; justify-content: flex-end; background: transparent; padding: 0;}
  .mobile-header .socialicons li {display: inline-block; width: auto; padding: 0;}
  .mobile-header .socialicons li i {font-size: 40px;}
  /* .mobile-header .search.open {width: auto;} */
  .mobile-header .sublinks {background: transparent;}

  /* .mobile-header .search .input {display: inline-block;} */

  .banner .grid-stack .image {height: 400px;}

  .urgentmessage {background: var(--primarycolor-300);}
  .urgentmessage .content {padding: 20px;}
  .urgentmessage .arrowbutton {gap: 25px;}
  .urgentmessage p, .urgentmessage .arrowbutton a, .urgentmessage .arrowbutton a:after {color: var(--black-700);}

  .grid-thirds {gap: 20px;}

  .quicklinks-sidebar {grid-template-columns: repeat(3, 1fr); max-height: 75%; gap: 20px;}

  .footer .main-footer .content {grid-template-columns: 1fr; row-gap: 20px;}
  .footer .main-footer .col {justify-content: center; align-items: center;}
  .footer .main-footer .col .bottom {display: grid; grid-template-columns: 65px auto; justify-content: flex-start; gap: 25px; width: max-content; margin: 0 auto;}
  .footer .main-footer .content .logo {width: 270px;}
  .footer .main-footer .col .bottom .socialicons {grid-column: 1; grid-row: 1;}
  .footer .main-footer .col .bottom .quicklink {margin: 0; grid-column: span 2; grid-row: 2;}
  .footer .main-footer .col:last-of-type {grid-column: 1; grid-row: 2;}

  .footer .bottom-footer .content:not(.legal-links) {flex-direction: column; gap: 10px;}
  .footer .bottom-footer .content p, .footer .bottom-footer .legal-links {text-align: center; justify-content: center; flex-wrap: wrap;}
  .footer .bottom-footer .legal-links {gap: 0 10px;}
  .footer .bottom-footer .content .right {margin: 0;}
}

@media screen and (max-width: 680px) {
  .content {padding-inline: 25px;}
  .grid-halves {grid-template-columns: 1fr!important;}

  .fullwidthfeature {padding-bottom: 80px!important;}
  .fullwidthfeature .content {gap: 20px; margin-top: 100px;}
  .fullwidthfeature .buttons a:nth-child(2) {top: 30px;}

  .footerboxes .content .gridboxes .box {padding: 20px 30px;}
  .footerboxes .content .gridboxes .box .post {grid-template-columns: 1fr 1fr;}
  .featuredpost .post .text p {word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; text-overflow: ellipsis;}

  .urgentmessage .arrowbutton {display: flex; flex-direction: column; gap: 10px;}
  .urgentmessage .arrowbutton i:first-of-type {display: none;}

  .breadcrumbsection .breadcrumb {flex-direction: column;}
}

@media screen and (max-width: 560px) {
  .fullwidthfeature .content {grid-template-columns: 1fr!important; gap: 0; margin-top: 120px;}
  .fullwidthfeature .buttons a .inner p.heading {font-size: 1.8rem;}
  .fullwidthfeature .buttons a:nth-child(1) {padding-right: 60px;}
  .fullwidthfeature .buttons a:nth-child(2) {top: -20px; padding-left: 60px;}
  .fullwidthfeature {padding-bottom: 0!important;}

  .resources {grid-template-columns: 1fr;}

  .grid-thirds {grid-template-columns: 1fr!important; gap: 20px;}

  .quicklinkbuttons:not(.quicklinks-sidebar) {grid-template-columns: repeat(2, 1fr);}
  .quicklinkbuttons:not(.quicklinks-sidebar) .button:nth-child(10) {grid-column: span 1;}
}

@media screen and (max-width: 540px) {
  .header .content .right .top {grid-template-columns: 80px 1fr;}
  .header .content .right .contactlink a span.text {display: none;}
  .content {padding-inline: 20px;}

  .header .content .right .bottom .search {grid-column: 1 / -1; grid-row: 2;}
  .header .content .right .bottom .sublinks {grid-row: 3; text-align: right;}

  .quicklinkbuttons {grid-template-columns: repeat(2, 1fr);}
  .quicklinkbuttons .button:nth-child(10) {grid-column: span 1;}

  .quicklinks-sidebar {max-height: 80%; gap: 5px; padding: 10px;}

  .clinicbuttons .button a {font-size: 1.4rem;}

  .fullwidthfeature .image {display: none;}
  .fullwidthfeature .content {margin-top: 0;}

  .footerboxes .content {padding-bottom: 45px;}
  .footerboxes .content .gridboxes .box .post {grid-template-columns: 1fr;}
  .facebook .fb-posts .fb-post {grid-template-columns: 1fr;}

  .footer .main-footer:before {padding-bottom: 27%;}
}

@media screen and (max-width: 460px) {
  .multistep-counter .multistep-count .multistep-title {font-size: 0.8rem;}
}

@media screen and (max-width: 420px) {

  .header .content .sublinks {display: grid; grid-template-columns: repeat(2, 1fr);}

  .quicklinkbuttons .button {font-size: 1rem;}
  .clinicbuttons .button a {font-size: 1rem;}
  .clinicbuttons .button .cliniccount {font-size: 0.8rem;}
}

@media screen and (max-width: 400px) {
  .header .content .buttons a.hide-button {width: 40%;}
  .hide-button span {display: none;}
  .fullwidthfeature .buttons a .inner {padding: 42px;}
  .fullwidthfeature .buttons a .inner p.heading {font-size: 1.2rem;}
  .footer nav ul {columns: 1;}

  .header .content .right .bottom, .nav {min-width: unset; width: 100vw;}

  .multistep-text {padding: 20px;}
 
  .multistep-counter .multistep-count .multistep-title {font-size: 0.6rem;}
  .multistep-counter:before {left: 30px; width: calc(100% - 60px);}
}