/* Tiny MCE override */
.tox :not(svg):not(rect) {
font-size: revert!important;
line-height: 1.3!important;
color: #000000!important;
}
/* General */
:root {
/* Typography */
--font: "Outfit", sans-serif;
--14px: 0.875rem;
--16px: 1rem;
--18px: 1.125rem;
--20px: 1.25rem;
--24px: 1.5rem;
--28px: 1.75rem;
--34px: 2.125rem;
--40px: 2.5rem;
--48px: 3rem;
--64px: 4rem;
/* Colours */
--black: #000000;
--secondary-black: #0F0F0F;
--blue: #23A7EB;
--banner-blue: #3D6671;
--cyan: #098F75;
--dark-blue: #27445A;
--dark-purple: #6F338E;
--green: #53B424;
--grey: #A4A4A4;
--pink: #F20078;
--purple: #A265AA;
--red: #B21413;
--error-red: #FF3A2F;
--yellow: #FFCD00;
--white: #FFFFFF;
--off-white: #FFFAF7;
}
* {
margin: 0;
padding: 0;
}
.ui-datepicker-prev::after {
font-family: "Font Awesome 6 Pro", sans-serif;
content: "\f053";
font-weight: 400;
position: absolute;
top: 7px;
left: 10px;
color: #433f38;
}
.ui-datepicker-next::after {
font-family: "Font Awesome 6 Pro", sans-serif;
content: "\f054";
font-weight: 400;
position: absolute;
top: 7px;
left: 10px;
color: #433f38;
}
#overdiv *,
#mint_popup.general-popup *,
#appends #miniPop * {
box-sizing: border-box;
}
#main ul,
#main ol {
padding-left: 20px;
}
.multi_add {
margin: 16px 0;
}
#appends.no-admin #mint_popup input[type=button] {
font-family: var(--font);
background-color: var(--yellow);
color: var(--black);
border-radius: 25px;
}
#appends.no-admin #mint_popup {
border: none;
font-family: var(--font);
line-height: 24px;
}
/* Admin fields */
#overdiv.admin .mint_field {
min-height: 24px;
min-width: 40px;
}
.admin-message {
color: var(--red);
font-size: var(--16px);
font-weight: 500;
margin: 4px 0;
}
/* Images */
#overdiv img {
max-width: 100%;
max-height: 100%;
}
/* Links */
#overdiv a {
color: inherit;
text-decoration: none;
cursor: pointer;
}
#overdiv .link-underlined a {
text-decoration: underline;
}
.back-link {
display: inline-block;
margin: 24px 0 40px;
}
.back-link i {
font-size: var(--14px);
}
.link-arrow {
font-weight: 600;
text-decoration: underline;
}
#overdiv:not(.admin) .link-arrow:after {
content: " \f061";
font-family: "Font Awesome 6 Sharp", sans-serif;
}
/* Overdiv and sections */
#overdiv {
background-color: var(--off-white);
}
#overdiv,
#overdiv input,
#overdiv textarea,
#overdiv select,
#mint_popup.general-popup,
#mint_popup.general-popup .button {
font-family: var(--font);
font-style: normal;
font-size: var(--18px);
line-height: 1.44;
font-weight: 300;
color: var(--secondary-black);
}
#overdiv select {
width: 100%;
border-radius: 100px;
border: 1px solid rgba(0, 0, 0, 0.25);
padding: 8px 48px 8px 16px;
background-color: var(--white);
font-weight: 400;
appearance: none;
background: url(images/arrow-down.svg) no-repeat calc(100% - 16px) 51% #FFFFFF;
cursor: pointer;
}
.products-sort {
position: relative;
font-weight: 400;
}
.products-sort span {
position: absolute;
inset: 50% auto auto 16px;
transform: translateY(-50%);
}
#overdiv .products-sort select {
padding-left: 84px;
}
#overdiv .type-select {
font-family: var(--font);
display: block;
width: 100%;
height: 40px;
padding: 8px 16px;
border: 1px solid rgba(0, 0, 0, 0.25);
border-radius: 100px;
font-weight: 400;
margin: 8px 0;
}
.overdiv-1224 {
width: 100%;
max-width: 1272px;
padding: 0 24px;
margin: 0 auto;
}
.max-808 {
max-width: 808px;
margin: 0 auto;
}
.max-712 {
max-width: 712px;
margin: 0 auto;
}
.max-632 {
max-width: 632px;
margin: 0 auto;
}
.max-592 {
max-width: 592px;
margin: 0 auto;
}
/* Flex */
.flex {
display: flex;
}
.max-centre {
justify-content: center;
}
.max-right {
justify-content: flex-end;
}
/* Block */
.block {
display: block;
}
/* Positions */
.relative {
position: relative;
}
.absolute {
position: absolute;
}
/* Fonts */
#overdiv h1 {
font-weight: 400;
font-size: var(--64px);
line-height: 1.12;
}
#overdiv h2 {
font-weight: 400;
font-size: var(--48px);
line-height: 1.25;
}
#overdiv h3 {
font-weight: 400;
font-size: var(--40px);
line-height: 1.3;
}
#overdiv h4 {
font-weight: 400;
font-size: var(--34px);
line-height: 1.41;
}
#overdiv h5 {
font-weight: 400;
font-size: var(--28px);
line-height: 1.42;
}
#overdiv h6 {
font-weight: 400;
font-size: var(--24px);
line-height: 1.41;
}
.p-20 {
font-size: var(--20px);
}
.p-18 {
font-size: var(--18px);
}
.p-16 {
font-size: var(--16px);
}
.p-14 {
font-size: var(--14px);
}
.medium-500 {
font-weight: 500;
}
.normal {
font-weight: 400;
}
#overdiv strong {
font-weight: 600;
}
.circle {
background-size: contain;
background-repeat: no-repeat;
white-space: nowrap;
}
.circle.up {
background-position: 0 20px;
padding: 16px 8px 16px 18px;
background-image: url('data:image/svg+xml,');
}
.circle.up.blue {
background-image: url('data:image/svg+xml,');
}
.circle.up.cyan {
background-image: url('data:image/svg+xml,');
}
.circle.up.dark-purple {
background-image: url('data:image/svg+xml,');
}
.circle.up.green {
background-image: url('data:image/svg+xml,');
}
.circle.up.pink {
background-image: url('data:image/svg+xml,');
}
.circle.down {
background-position: 0 12px;
padding: 16px 18px 16px 8px;
background-image: url('data:image/svg+xml,');
}
.circle.down.blue {
background-image: url('data:image/svg+xml,');
}
.circle.down.cyan {
background-image: url('data:image/svg+xml,');
}
.circle.down.dark-purple {
background-image: url('data:image/svg+xml,');
}
.circle.down.green {
background-image: url('data:image/svg+xml,');
}
.circle.down.pink {
background-image: url('data:image/svg+xml,');
}
.line {
padding-bottom: 8px;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 100%;
z-index: 1;
position: relative;
white-space: nowrap;
}
.line {
background-image: url('data:image/svg+xml,');
}
.line.blue {
background-image: url('data:image/svg+xml,');
}
.line.cyan {
background-image: url('data:image/svg+xml,');
}
.line.dark-blue {
background-image: url('data:image/svg+xml,');
}
.line.dark-purple {
background-image: url('data:image/svg+xml,');
}
.line.green {
background-image: url('data:image/svg+xml,');
}
.line.pink {
background-image: url('data:image/svg+xml,');
}
.line.yellow {
background-image: url('data:image/svg+xml,');
}
.box {
display: block;
border-radius: 20px;
margin-top: 40px;
padding: 40px;
}
#overdiv table {
border: none;
border-radius: 25px;
background-color: var(--white);
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
overflow: hidden;
font-size: var(--16px);
}
#overdiv table tr:first-child {
background-color: var(--yellow);
font-weight: 500;
}
#overdiv table tr + tr {
border-top: 1px solid rgba(0, 0, 0, 0.10);
}
#overdiv table td {
border: none;
padding: 12px 24px;
}
/* Backgrounds */
.blue-background {
background-color: var(--blue);
color: var(--white);
}
.cyan-background {
background-color: var(--cyan);
color: var(--white);
}
.dark-blue-background {
background-color: var(--dark-blue);
color: var(--white);
}
.dark-purple-background {
background-color: var(--dark-purple);
color: var(--white);
}
.green-background {
background-color: var(--green);
color: var(--white);
}
.yellow-background {
background-color: var(--yellow);
color: var(--black)
}
.pink-background {
background-color: var(--pink);
color: var(--white);
}
.purple-background {
background-color: var(--purple);
color: var(--white);
}
/* Buttons */
#overdiv #header_register,
#overdiv #sidebar_site_search button {
min-height: 40px;
}
#header_register {
white-space: nowrap;
}
#overdiv .button {
font-family: var(--font);
font-weight: 300;
font-size: var(--18px);
text-align: center;
}
#overdiv .button.no-style {
border: none;
background-color: transparent;
cursor: pointer;
}
#overdiv .button:not(.no-style) {
padding: 6px 24px;
color: var(--black);
min-height: 48px;
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 100px;
background-color: var(--yellow);
border: 1px solid var(--yellow);
}
#overdiv .button.outline {
background-color: transparent;
}
#overdiv:not(.admin) .button:not(.no-style):active,
#overdiv:not(.admin) .button:not(.no-style):hover {
background-color: var(--yellow);
border: 1px solid var(--yellow);
animation-name: wiggle;
animation-duration: 800ms;
animation-iteration-count: infinite;
}
/* Header */
#overdiv.admin #header {
position: relative;
background-color: #00000066;
}
#overdiv.openUI #header {
transition: none;
}
#header.sticky {
position: fixed;
}
#header.sticky .overdiv-1224 {
align-items: flex-start;
}
#header.sticky #header_right {
border-radius: 100px;
background-color: var(--white);
flex-direction: row-reverse;
padding: 8px 16px;
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.10);
}
#header.sticky #menu > ul {
padding-left: 8px;
color: var(--black);
}
#header.sticky #header_logo {
max-width: 64px;
}
#overdiv #header.sticky .button.header-icon {
color: var(--black);
}
#overdiv #header.sticky .button.header-icon svg path {
fill: var(--black);
}
#header.sticky #header_right_top:hover ~ #menu {
display: none;
}
#header {
padding: 16px 0;
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 6;
transition: padding 150ms ease-out;
}
#header .overdiv-1224 {
display: flex;
justify-content: space-between;
gap: 24px;
}
#header_logo {
max-width: 80px;
}
#header_right {
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-end;
}
#header_right_top {
display: flex;
align-items: center;
gap: 8px;
}
#overdiv .button.header-icon {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 100px;
border: 1px solid var(--yellow);
color: var(--white);
}
#overdiv .button.header-icon:not(#header_close_search, #mobileMenuArea, #mobileMenuAreaClose):hover {
gap: 6px;
width: 148px;
padding: 0 16px 0 10px;
transition: width .8s ease-in-out;
}
#overdiv .button.header-icon#header_search:hover{
width: 109px;
}
#overdiv .button.header-icon span {
width: 0;
white-space: nowrap;
overflow: hidden;
}
#overdiv .button.header-icon:hover span {
width: 100%;
max-width: max-content;
transition: width 1s ease-in-out;
}
#header_search_container {
display: none;
}
#overdiv #header_search_container button {
min-height: 40px;
}
#header_right.search-open #header_search_container {
display: flex;
align-items: center;
gap: 8px;
}
#header.sticky #site_search,
#sidebar_site_search {
border: 1px solid rgba(0, 0, 0, 0.25);
}
#header.sticky #site_search button {
margin-right: -1px;
}
#site_search,
#sidebar_site_search {
display: flex;
align-items: center;
gap: 8px;
background-color: var(--white);
border-radius: 100px;
padding-left: 20px;
height: 40px;
}
#header_search_input,
#sidebar_header_search_input {
border: none;
}
#header_search_input:focus-visible,
#sidebar_header_search_input:focus-visible {
outline: none;
}
#header.sticky #header_right.search-open #menu {
display: none;
}
#menu ul {
list-style: none;
}
#menu > ul {
display: flex;
font-style: normal;
gap: 32px;
color: var(--white);
}
#header.sticky #menu > ul {
gap: 24px;
}
#menu > ul > li {
position: relative;
}
#menu > ul > li > div {
display: grid;
}
#menu > ul > li > div > a {
white-space: nowrap;
}
#menu > ul > li:hover > div > a {
font-weight: 500;
}
#menu > ul > li > div > svg {
opacity: 0;
}
#menu > ul > li:hover > ul {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
#menu > ul > li:hover > div > svg {
opacity: 1;
}
#menu > ul > li > ul {
visibility: hidden;
transition: 0.2s 0.2s;
opacity: 0;
background-color: var(--white);
color: var(--black);
padding: 16px;
border-radius: 15px;
font-weight: 400;
position: absolute;
inset: calc(100% + 5px) auto auto -32px;
min-width: 224px;
max-width: 248px;
width: max-content;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.10);
line-height: 1.33;
z-index: 2;
white-space: nowrap;
}
#menu > ul > li > ul > li a {
border-radius: 100px;
padding: 8px 16px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
#menu > ul > li > ul > li a::after {
content: "\f061";
font-family: "Font Awesome 6 Pro";
opacity: 0;
}
#menu > ul > li > ul > li a:hover {
background-color: var(--yellow);
font-weight: 500;
}
#menu > ul > li > ul > li a:hover::after {
opacity: 1;
}
#menu_blog > ul {
display: none;
}
/* Mobile menu */
.UIsideBar,
#overdiv #mobileMenuArea,
#overdiv #mobileMenuAreaClose,
#overdiv.openUI .UIsideBar {
display: none;
}
#overdiv.openUI #header {
background-color: var(--white);
}
#overdiv.openUI #header.sticky #header_right {
box-shadow: none;
}
#overdiv.openUI #header_right .header-icon:nth-child(2),
#overdiv.openUI #header_right .header-icon:nth-child(3),
#overdiv.openUI #header_right .header-icon:nth-child(4) {
display: none;
}
#overdiv.openUI .UIsideBar {
flex-direction: column;
justify-content: space-between;
position: absolute;
overflow-x: hidden;
overflow-y: auto;
left: 0;
top: 100%;
width: 100%;
height: calc(100vh - 102px);
z-index: 100;
color: var(--black);
background-color: rgba(0, 0, 0, 0.5);
}
#overdiv.openUI .UIsideBar > div {
position: relative;
background-color: var(--white);
max-height: calc(100vh - 120px);
height: 100%;
}
#overdiv.openUI .UIsideBar > div > svg {
position: absolute;
bottom: -4px;
}
#sidebar_container {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
padding: 8px 24px 60px;
height: 100%;
overflow: auto;
}
#sidebar_site_search,
#sidebar_site_search input {
width: 100%;
}
#sidebar_site_search button {
margin-right: -1px;
}
#sidebar_site_search svg {
flex-shrink: 0;
}
#sidebar_container .button.no-style {
display: flex;
align-items: center;
gap: 8px;
}
#sidebarContent ul {
list-style: none;
font-size: var(--28px);
line-height: 1.35;
font-weight: 400;
}
#sidebarContent > ul {
display: grid;
gap: 32px;
}
#sidebarContent > ul > li {
text-align: center;
}
#sidebarContent > ul > li > ul {
display: grid;
gap: 16px;
font-size: var(--20px);
line-height: 1.4;
color: rgba(0, 0, 0, 0.5);
margin-top: 24px;
}
#sidebarContent > ul > li:not(.show) > ul,
#sidebar_blog > ul {
display: none;
}
#sidebar_header_search_input {
background-color: var(--white);
}
#sidebar_container .button.no-style {
color: var(--black);
}
/* Footer */
#footer {
border-top: 16px solid var(--yellow);
background-color: var(--black);
color: var(--white);
padding: 80px 0;
}
#footer_top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 56px;
}
#footer_left {
display: flex;
gap: 56px;
}
#footer_right img {
vertical-align: middle;
}
#footer_right img + img {
padding-left: 16px;
}
#footer_logo {
width: 80px;
height: 80px;
}
#footer_bottom {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin-top: 16px;
}
#footer_social {
display: flex;
gap: 8px;
}
.share-container span,
#footer_social span {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background-color: var(--yellow);
border-radius: 100%;
}
.share-container button:hover span,
#footer_social button:hover span {
animation-name: bounce;
animation-duration: 1000ms;
animation-iteration-count: infinite;
}
/* Search */
.search-result {
border-bottom: 1px solid rgba(0,0,0,.25);
padding-bottom: 24px;
margin-bottom: 24px;
}
.search-result:last-child {
border-bottom: none;
}
.search-page {
font-weight: 700;
margin-bottom: 16px;
padding-right: 20px;
position: relative;
}
.search-page::after {
content: "\f054";
font-family: "Font Awesome 5 Pro", sans-serif;
position: absolute;
top: 0;
right: 0;
color: var(--black);
cursor: pointer;
font-size: var(--20px);
font-weight: 400;
}
.result {
background-color: var(--yellow);
padding: 0 4px;
border-radius: 4px;
}
/* Story */
#story_form {
max-width: 500px;
margin: 24px auto;
}
#story_form .flex {
gap: 16px
}
#news_container .article-overview-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 24px;
row-gap: 32px;
margin: 56px 0 80px;
}
#news_container .category-list {
margin-top: 48px;
display: flex;
overflow: auto;
gap: 16px;
}
#news_container .newsTag a {
padding: 2px 16px;
border-radius: 100px;
border: 1px solid rgba(0, 0, 0, 0.25);
background-color: transparent;
font-size: var(--16px);
font-weight: 400;
cursor: pointer;
white-space: nowrap;
min-width: 56px;
min-height: 32px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#news_container .newsTag a:hover,
#news_container .newsTag.selected a {
background-color: var(--yellow);
border-color: var(--yellow);
font-weight: 500;
}
.preview-article {
position: relative;
border-radius: 15px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
}
#news_container .preview-article:first-child {
grid-column: 1 / span 3;
align-items: center;
background-color: var(--white);
display: flex;
flex-direction: row-reverse;
padding: 24px;
gap: 24px;
}
#news_container .preview-article:first-child .preview-article-bottom {
flex-shrink: 0;
width: 100%;
max-width: 312px;
margin: 16px;
}
#related_articles .preview-article-bottom,
.preview-article:not(:first-child) .preview-article-bottom {
border-radius: 15px;
background-color: var(--white);
margin-top: -32px;
padding: 32px 40px 40px;
z-index: 2;
position: relative;
}
.preview-article:not(:first-child) .preview-article-snip {
display: none;
}
.preview-article .preview-date {
font-size: var(--16px);
color: var(--black);
opacity: .6;
margin-bottom: 16px;
}
.preview-article .preview-img img {
object-fit: cover;
width: 100%;
height: 100%;
aspect-ratio: 1.53;
}
#news_container .preview-article-top,
#news_container .preview-article .preview-img {
width: 100%;
border-radius: 20px;
height: 100%;
overflow: hidden;
}
.preview-article:not(:first-child) .preview-article-top,
.preview-article:not(:first-child) .preview-img,
#related_articles .preview-article .preview-article-top {
border-radius: 15px;
max-height: 256px;
height: 100%;
overflow: hidden;
}
.preview-article-snip {
margin-top: 16px;
}
.preview-article .button {
width: 100%;
margin-top: 32px;
}
.preview-cat {
display: flex;
gap: 8px;
position: absolute;
top: 40px;
right: 40px;
}
.preview-article:not(:first-child) .preview-cat {
top: 16px;
right: 16px;
}
.preview-cat > div {
display: none;
}
#article_cat_container {
display: flex;
gap: 8px;
}
#overdiv:not(.admin) #article_cat {
display: none;
}
#article_cat_container span,
.preview-cat span {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px;
background-color: var(--black);
color: var(--white);
min-height: 32px;
border-radius: 100px;
font-size: var(--14px);
font-weight: 500;
background-repeat: no-repeat;
background-position: 8px 50%;
}
#article_cat_container span.top-tips,
.preview-cat span.top-tips {
padding-left: 28px;
background-color: var(--pink);
background-image: url('data:image/svg+xml,');
}
#article_cat_container span.seasonal,
.preview-cat span.seasonal {
padding-left: 32px;
background-color: var(--blue);
background-image: url('data:image/svg+xml,');
}
#article_cat_container span.iq-news,
.preview-cat span.iq-news {
padding-left: 32px;
background-color: var(--dark-purple);
background-image: url('data:image/svg+xml,');
}
#article_cat_container span.educational,
.preview-cat span.educational {
padding-left: 24px;
background-color: var(--green);
background-image: url('data:image/svg+xml,');
}
#overdiv #article_title {
font-size: var(--40px);
line-height: 1.3;
text-align: center;
margin: 24px 0 40px;
}
#article_img_container {
position: relative;
}
#overdiv:not(.admin) #article_cat_container {
position: absolute;
top: 16px;
right: 16px;
z-index: 1;
}
#article_img img {
width: 100%;
}
#article_author_container,
.article-date {
font-size: var(--16px);
line-height: 1.5;
text-align: center;
color: var(--black);
opacity: .6;
}
#article_text {
margin: 40px 0;
}
#article_author_container {
justify-content: center;
margin-bottom: 40px;
}
#share_title {
font-size: var(--24px);
font-weight: 400;
line-height: 1.4;
}
.share-container {
max-width: max-content;
margin: 24px auto;
}
.share-container .url {
display: none;
}
#related_articles .article-overview-container {
margin: 40px 0 80px;
display: flex;
gap: 24px;
}
#related_articles .preview-article {
width: 100%;
max-width: 392px;
}
/* Components */
#components_banner {
position: relative;
min-height: 352px;
background-color: var(--banner-blue);
}
#components_banner .overdiv-1224 {
width: 100%;
position: absolute;
inset: auto auto 0 50%;
transform: translateX(-50%);
}
#overdiv #components_banner_img {
position: relative;
min-height: 352px;
}
#components_banner_img img {
object-fit: cover;
width: 100%;
height: 100%;
min-height: 352px;
}
#components_banner_img::before {
content: "";
background-color: var(--black);
opacity: .4;
width: 100%;
height: 100%;
position: absolute;
inset: 0 0 auto auto;
}
#components_banner_title {
margin: 168px 0 104px;
color: var(--white);
}
#components_banner svg {
position: absolute;
inset: auto auto -8px 0;
}
.pt-32 {
padding-top: 32px;
}
.pt-64 {
padding-top: 64px;
}
.pt-80 {
padding-top: 80px;
}
.pb-48 {
padding-bottom: 48px;
}
.pb-64 {
padding-bottom: 64px;
}
.pb-80 {
padding-bottom: 80px;
}
/* Banner slider */
.component[data-component="banner-slider"] .banner-slider-outer {
overflow: hidden;
position: relative;
}
#overdiv:not(.admin) .component[data-component="banner-slider"] .banner-slider-outer svg {
position: absolute;
inset: auto auto -8px 0;
}
#overdiv:not(.admin) .component[data-component="banner-slider"] .banner-slider-container {
display: flex;
transition: transform 1s ease-in-out;
}
.component[data-component="banner-slider"] .banner-slider-multi {
width: 100vw;
position: relative;
}
.component[data-component="banner-slider"] .banner-slider-multi .multiField_0::before {
content: "";
background-color: var(--black);
opacity: .3;
width: 100%;
height: 100%;
position: absolute;
inset: 0 0 auto auto;
}
.component[data-component="banner-slider"] .banner-slider-multi .multiField_0 {
position: relative;
aspect-ratio: 2.05;
min-height: 656px;
}
.component[data-component="banner-slider"] .banner-slider-multi .multiField_0 img {
object-fit: cover;
width: 100%;
height: 100%;
}
.component[data-component="banner-slider"] .banner-slider-multi .banner-slider-text {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
color: var(--white);
}
.component[data-component="banner-slider"] .banner-slider-multi .multiField_1 {
max-width: 704px;
margin-bottom: 40px;
}
.component[data-component="banner-slider"] .banner-slider-multi .multiField_2 {
max-width: 496px;
font-size: var(--20px);
line-height: 1.4;
}
.component[data-component="banner-slider"] .banner-slider-multi-dots:not(:empty) {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 68px;
display: flex;
gap: 8px;
}
.component[data-component="banner-slider"] .banner-slider-multi-dots .dot {
width: 8px;
height: 8px;
border-radius: 100px;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
}
.component[data-component="banner-slider"] .banner-slider-multi-dots .dot.first-selected,
.component[data-component="banner-slider"] .banner-slider-multi-dots .dot.selected {
position: relative;
width: 80px;
}
.component[data-component="banner-slider"] .banner-slider-multi-dots .dot.selected .internal-dot {
width: 100%;
height: 100%;
background-color: var(--white);
border-radius: 100px;
}
.component[data-component="banner-slider"] .banner-slider-multi-dots .dot .internal-dot {
width: 0;
}
/* Breadcrumbs */
.component[data-component="breadcrumbs"] .overdiv-1224 {
font-size: var(--16px);
margin-top: 28px;
margin-bottom: 24px;
display: flex;
gap: 8px;
}
.component[data-component="breadcrumbs"] .bread_selected {
position: relative;
font-weight: 700;
}
.component[data-component="breadcrumbs"] .bread_selected svg {
position: absolute;
inset: 100% auto auto 0;
}
/* Cards */
.component[data-component="cards"] .products-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-bottom: 40px;
}
.component[data-component="cards"] .products-number {
font-weight: 400;
}
.component[data-component="cards"] .cards-container {
display: grid;
gap: 24px;
}
.component[data-component="cards"] .cards-container.two-col .card-multi .multiField_6,
.component[data-component="cards"] .cards-container.two-col .card-multi .tag-colour-select,
.component[data-component="cards"] .cards-container.three-col .card-multi .tag-colour-select,
.component[data-component="cards"] .cards-container.three-col .card-multi .multiField_6,
.component[data-component="cards"] .cards-container .card-multi .multiField_7 {
display: none;
}
.component[data-component="cards"] .cards-container.two-col {
grid-template-columns: repeat(2, 1fr);
}
.component[data-component="cards"] .cards-container.three-col {
grid-template-columns: repeat(3, 1fr);
}
.component[data-component="cards"] .cards-container.four-col {
grid-template-columns: repeat(4, 1fr);
}
.component[data-component="cards"] .card-multi {
display: flex;
flex-direction: column;
position: relative;
}
.component[data-component="cards"] .card-multi .card-bottom {
border-radius: 15px;
background-color: var(--white);
padding: 40px;
position: relative;
z-index: 2;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
}
.component[data-component="cards"] .card-multi:has(.multiField_0) .card-bottom {
margin-top: -32px;
}
.component[data-component="cards"] .cards-container.two-col .card-multi:has(.multiField_0) .card-bottom {
margin: -28% 24px 0;
}
.component[data-component="cards"] .cards-container.four-col .card-multi .card-bottom {
padding: 24px;
border-radius: 0px 0px 25px 25px;
margin-top: 0;
}
.component[data-component="cards"] .card-multi .multiField_0 {
border-radius: 15px;
overflow: hidden;
width: 100%;
aspect-ratio: 1.53;
}
.component[data-component="cards"] .card-multi:has(.multiField_0) .card-bottom {
margin-top: -48px;
}
.component[data-component="cards"] .card-multi .multiField_0:not(:has(img)) {
padding: 32px 24px 80px;
font-size: var(--24px);
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#overdiv .component[data-component="cards"] .card-multi .multiField_0 h4 {
line-height: 30px;
}
.component[data-component="cards"] .cards-container.three-col .card-multi .multiField_0 {
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
}
.component[data-component="cards"] .cards-container.four-col .card-multi .multiField_0 {
border-radius: 25px 25px 0px 0px;
aspect-ratio: 1.57;
}
.component[data-component="cards"] .card-multi .multiField_0 img {
object-fit: cover;
width: 100%;
height: 100%;
}
.component[data-component="cards"] .card-multi .multiField_1 {
font-weight: 400;
line-height: 1.4;
}
.component[data-component="cards"] .cards-container.two-col .card-multi .multiField_1 {
font-size: var(--34px);
line-height: 1.41;
}
.component[data-component="cards"] .cards-container.three-col .card-multi .multiField_1 {
font-size: var(--28px);
}
.component[data-component="cards"] .cards-container.four-col .card-multi .multiField_1 {
font-size: var(--24px);
}
.component[data-component="cards"] .card-multi .multiField_2 {
margin-top: 16px;
}
.component[data-component="cards"] .card-multi .card-bottom-bottom:not(:empty) {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 32px;
}
.component[data-component="cards"] .card-multi .multiField_5 {
display: none;
}
#overdiv:not(.admin) .component[data-component="cards"] .card-multi .multiField_6 {
position: absolute;
top: 16px;
right: 16px;
}
.component[data-component="cards"] .card-multi .multiField_6 {
font-size: 14px;
font-weight: 500;
padding: 6px 16px;
border-radius: 100px;
}
/* Circles cols */
.component[data-component="circles-cols"] .circle-container {
display: grid;
gap: 48px;
}
.component[data-component="circles-cols"] .circle-container.three-col {
grid-template-columns: repeat(3, 1fr);
}
.component[data-component="circles-cols"] .circle-multi {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.component[data-component="circles-cols"] .circle-multi .multiField_0 {
display: none;
}
.component[data-component="circles-cols"] .circle-multi .multiField_1 {
width: 144px;
height: 144px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.component[data-component="circles-cols"] .circle-multi .multiField_1 img {
z-index: 1;
position: relative;
max-height: 72px!important;
max-width: 100px!important;
}
.component[data-component="circles-cols"] .circle-multi .multiField_1 .circle-multi-svg {
position: absolute;
top: 0;
left: 0;
}
.component[data-component="circles-cols"] .circle-multi:nth-child(4n-2) .multiField_1 .circle-multi-svg {
transform: scaleX(-1) scaleY(-1);
}
.component[data-component="circles-cols"] .circle-multi:nth-child(4n-1) .multiField_1 .circle-multi-svg {
transform: scaleX(-1);
}
.component[data-component="circles-cols"] .circle-multi:nth-child(4n) .multiField_1 .circle-multi-svg {
transform: scaleY(-1);
}
.component[data-component="circles-cols"] .circle-multi .multiField_2 {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: var(--24px);
font-weight: 400;
margin-top: 8px;
}
.component[data-component="circles-cols"] .circle-multi .multiField_3 {
font-size: var(--16px);
margin-top: 16px;
}
/* FAQs */
.component[data-component="faqs"] .button {
min-width: 160px
}
.component[data-component="faqs"] .first-field {
margin-bottom: 40px;
}
.component[data-component="faqs"] .second-field {
margin-top: 40px;
}
.component[data-component="faqs"] .faqs-multi-container {
display: grid;
gap: 16px;
}
.component[data-component="faqs"] .faq-multi {
position: relative;
background-color: var(--white);
padding: 14px 24px 14px 32px;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, .05);
border-radius: 100px;
color: var(--black);
}
.component[data-component="faqs"] .faq-multi.open {
border-radius: 20px;
}
.component[data-component="faqs"] .faq-multi .faq-plus {
position: absolute;
inset: 16px 24px auto auto;
}
.component[data-component="faqs"] .faq-multi .faq-minus {
display: none;
position: absolute;
inset: 25px 24px auto auto;
}
.component[data-component="faqs"] .faq-multi.open .faq-plus {
display: none;
}
.component[data-component="faqs"] .faq-multi.open .faq-minus {
display: block;
}
.component[data-component="faqs"] .faq-multi .multiField_0 {
font-size: var(--20px);
font-weight: 400;
padding-right: 32px;
z-index: 1;
position: relative;
cursor: pointer;
}
.component[data-component="faqs"] .faq-multi .multiField_1 {
font-size: var(--16px);
margin-block: 16px;
}
.component[data-component="faqs"] .faq-multi:not(.open) .multiField_1 {
display: none;
}
/* Form */
.component[data-component="form"] .form-admin + .form-admin {
margin-top: 16px;
}
.component[data-component="form"] .formComponent-addField {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-weight: 400;
margin: 16px 0;
background-color: rgba(45, 130, 112, 0.2);
border-radius: 5px;
padding: 0 8px;
max-width: max-content;
}
.component[data-component="form"] .form-admin-buttons {
display: flex;
align-items: center;
gap: 8px;
background-color: rgba(45, 130, 112, 0.2);
padding: 0 8px;
border-radius: 5px;
}
.component[data-component="form"] .form-with-sidebar {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 56px;
}
.component[data-component="form"] .form-sidebar {
flex-shrink: 0;
width: 100%;
max-width: 456px;
border-radius: 15px;
background-color: var(--white);
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
padding: 32px;
height: 100%;
}
#overdiv .component[data-component="form"] .form-with-sidebar .button {
margin: 0 auto;
display: flex;
max-width: max-content;
background-color: transparent;
}
.component[data-component="form"] .form-sidebar .form-sidebar-multi-container {
display: grid;
gap: 40px;
}
.component[data-component="form"] .form-sidebar .form-sidebar-multi {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.component[data-component="form"] .form-sidebar .form-sidebar-multi .multi_controls {
width: 100%!important;
}
.component[data-component="form"] .form-sidebar .form-sidebar-multi .clear {
display: none;
}
.component[data-component="form"] .form-sidebar .form-sidebar-multi .multiField_0 {
flex-shrink: 0;
}
.component[data-component="form"] .form-sidebar .form-sidebar-multi .multiField_0 img {
max-width: 56px!important;
}
.component[data-component="form"] .form-sidebar .form-sidebar-multi .multiField_1 {
width: 100%;
max-width: calc(100% - 80px);
}
.component[data-component="form"] .form-sidebar > div:last-child {
margin-top: 40px;
}
.component[data-component="form"] .form-sidebar iframe {
width: 100%;
height: 100%;
aspect-ratio: 1;
border-radius: 20px;
}
.component[data-component="form"] .forms-container {
border-radius: 15px;
background-color: var(--white);
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
padding: 40px;
}
.component[data-component="form"] .form-title {
font-size: var(--28px);
line-height: 1.4;
font-weight: 400;
}
.component[data-component="form"] .form-title + .form-step-description {
margin-top: 24px;
}
.component[data-component="form"] .form-step-title {
font-size: var(--24px);
line-height: 1.4;
font-weight: 400;
}
.component[data-component="form"] .form-step-title.closed {
opacity: 0.5;
margin-bottom: 40px;
}
.component[data-component="form"] .form-step-title.closed:nth-last-child(1 of .closed) {
margin-bottom: 0;
}
.component[data-component="form"] .form-step-title span {
color: var(--grey);
}
.component[data-component="form"] .form-step-title + .form-step-description {
margin-top: 6px;
}
.component[data-component="form"] .form-group.form-full {
width: 100%;
}
.component[data-component="form"] .form-group.form-half {
width: calc(50% - 12px);
}
#story_form label,
.component[data-component="form"] .form-group label {
display: block;
font-size: var(--16px);
font-weight: 400;
margin-bottom: 8px;
}
#newNewsPage,
.component[data-component="form"] .form-group input {
width: 100%;
border-radius: 100px;
border: 1px solid rgba(0, 0, 0, 0.25);
padding: 8px 16px;
}
.component[data-component="form"] .form-group span {
color: var(--error-red);
}
#overdiv .component[data-component="form"] .form-group select {
width: 100%;
border-radius: 100px;
border: 1px solid rgba(0, 0, 0, 0.25);
padding: 8px 16px;
background-color: var(--white);
font-weight: 400;
}
.component[data-component="form"] .form-group textarea {
width: 100%;
height: 160px;
border-radius: 20px;
border: 1px solid rgba(0, 0, 0, 0.25);
padding: 8px 16px;
background-color: var(--white);
resize: none;
}
.component[data-component="form"] .form-step-content {
display: flex;
flex-wrap: wrap;
gap: 24px;
padding: 40px 0;
}
.component[data-component="form"] .button {
margin-top: 40px;
}
.component[data-component="form"] .form-radio-container {
display: flex;
align-items: center;
width: 100%;
gap: 5px;
flex-wrap: nowrap;
}
.component[data-component="form"] .form-radio label {
margin-bottom: 24px;
}
.component[data-component="form"] .form-group .form-radio-container label {
margin-bottom: 0;
}
.component[data-component="form"] .form-group .container + .container {
margin-top: 16px;
}
.component[data-component="form"] .form-group .container {
position: relative;
padding-left: 32px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
min-height: 24px;
}
.component[data-component="form"] .form-group .container input[type="radio"],
.component[data-component="form"] .form-group .container input[type="checkbox"] {
position: absolute;
opacity: 0;
top: 0;
left: 0;
height: 24px;
width: 24px !important;
z-index: 1;
cursor: pointer;
}
.component[data-component="form"] .form-group .container .radiomark {
content: "";
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
border: 1px solid rgba(0, 0, 0, 0.16);
border-radius: 100px;
}
.component[data-component="form"] .form-group .container input:checked ~ .radiomark {
background-color: var(--yellow);
border-color: var(--yellow);
}
.component[data-component="form"] .form-group .container input:checked ~ .radiomark::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 12px;
background: url("images/tick.svg") no-repeat 50% 50%;
background-size: contain;
}
.component[data-component="form"] .invalid .form-radio-container .radiomark,
.component[data-component="form"] select.invalid,
.component[data-component="form"] .invalid input {
border: 1px solid var(--error-red) !important;
}
.component[data-component="form"] .returning-school-postcode-container {
position: relative;
}
.component[data-component="form"] .returning-school-select-container {
display: none;
}
.component[data-component="form"] .postcode-search-loader {
display: none;
border: 6px solid #f3f3f3;
border-top: 6px solid #3498db;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 2s linear infinite;
position: absolute;
right: 10px;
top: 38px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Gallery */
.gallery-categories {
margin-top: 48px;
display: flex;
overflow: auto;
gap: 16px;
}
.category-tag {
font-family: var(--font);
padding: 5px 16px;
border-radius: 100px;
border: 1px solid rgba(0, 0, 0, 0.25);
background-color: transparent;
font-size: var(--16px);
cursor: pointer;
white-space: nowrap;
}
.category-tag::first-letter,
.component[data-component="gallery"] .gallery-container .gallery-multi .multiField_3::first-letter {
text-transform: uppercase;
}
.category-tag:hover,
.category-tag.selected {
background-color: var(--yellow);
border-color: var(--yellow);
font-weight: 500;
}
.category-tag:hover {
animation-name: wiggle;
animation-duration: 1000ms;
animation-iteration-count: infinite;
}
.component[data-component="gallery"] .gallery-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
gap: 24px;
margin-top: 64px;
}
#overdiv.admin .component[data-component="gallery"] .multi_add {
display: flex;
align-items: center;
}
#overdiv:not(.admin) .component[data-component="gallery"] .gallery-container .gallery-multi:not(.show) {
display: none;
}
.component[data-component="gallery"] .gallery-container .gallery-multi .multiField_0 {
width: 100%;
height: 184px;
cursor: pointer;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
border-radius: 10px;
overflow: hidden;
background-color: var(--white);
position: relative;
}
#overdiv:not(.admin) .component[data-component="gallery"] .gallery-container .gallery-multi .multiField_0:hover::before {
content: "View image";
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%);
color: var(--white);
font-size: var(--16px);
font-weight: 500;
}
.component[data-component="gallery"] .gallery-container .gallery-multi .multiField_0 img {
object-fit: contain;
width: 100%;
height: 100%;
}
#overdiv:not(.admin) .component[data-component="gallery"] .gallery-container .gallery-multi .multiField_1,
#overdiv:not(.admin) .component[data-component="gallery"] .gallery-container .gallery-multi .multiField_2,
#overdiv:not(.admin) .component[data-component="gallery"] .gallery-container .gallery-multi .multiField_3 {
display: none;
}
.component[data-component="gallery"] .view-more-button {
display: flex;
justify-content: center;
margin-top: 24px;
}
.gallery-different-cat {
display: none;
}
.gallery-overlay {
position: fixed;
z-index: 100;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.75);
font-family: var(--font);
font-size: var(--14px);
font-weight: 300;
line-height: 1.5;
color: var(--white);
display: flex;
justify-content: center;
align-items: center;
}
.gallery-overlay .gallery-image {
height: calc(100vh - 48px);
width: calc(100vw - 48px);
max-width: 1040px;
max-height: 768px;
display: flex;
flex-direction: column;
justify-content: center;
}
.gallery-overlay .gallery-image-top {
display: flex;
justify-content: flex-end;
font-size: var(--18px);
}
.gallery-overlay .gallery-image-top i {
cursor: pointer;
}
.gallery-overlay .gallery-image .gallery-image-selected {
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 100%;
max-height: calc(100% - 128px);
margin-top: 16px;
background-color: var(--white);
}
.gallery-overlay .gallery-image .gallery-image-selected .gallery-arrow {
background-color: var(--light-green);
cursor: pointer;
display: flex;
width: 48px;
height: 48px;
justify-content: center;
align-items: center;
}
.gallery-overlay .gallery-image .gallery-image-selected .image {
height: 100%;
max-width: calc(100% - 112px);
}
.gallery-overlay .gallery-image .gallery-image-selected img {
vertical-align: bottom;
width: 100%;
height: 100%;
object-fit: contain;
}
.gallery-overlay .gallery-text {
display: flex;
justify-content: space-between;
gap: 16px;
background-color: var(--white);
color: var(--black);
padding: 16px;
}
.gallery-overlay .gallery-text-left {
font-size: var(--16px);
}
.gallery-overlay .gallery-title {
font-weight: 400;
}
.gallery-overlay .gallery-text-cat {
color: rgba(0, 0, 0, 0.50);
}
.gallery-overlay .gallery-image-bottom {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
text-align: center;
padding: 8px 16px;
}
.gallery-overlay .gallery-image-bottom i {
cursor: pointer;
}
/* Image with box */
.component[data-component="image-with-box"] > div {
position: relative;
}
.component[data-component="image-with-box"] > div > svg {
position: relative;
z-index: 1;
}
.component[data-component="image-with-box"] .image {
position: absolute;
width: 100%;
height: 100%;
inset: 12px auto auto 0;
}
.component[data-component="image-with-box"] .image img {
object-fit: cover;
width: 100%;
height: 100%;
}
.component[data-component="image-with-box"] .text {
position: relative;
z-index: 1;
width: 100%;
max-width: 704px;
padding: 56px 56px 48px;
border-radius: 30px;
background-color: rgba(255, 255, 255, 0.20);
color: var(--white);
}
/* Product-gallery */
.component[data-component="product-gallery"] .product-gallery-container {
display: flex;
gap: 56px;
}
.component[data-component="product-gallery"] .product-gallery-left {
flex-shrink: 0;
width: 100%;
max-width: 712px;
}
.component[data-component="product-gallery"] .product-gallery-img {
aspect-ratio: 1.27;
border-radius: 20px;
overflow: hidden;
margin-bottom: 24px;
background-color: rgba(0, 0, 0, 0.10);
}
.component[data-component="product-gallery"] .product-gallery-img img {
object-fit: cover;
width: 100%;
height: 100%;
}
.component[data-component="product-gallery"] .product-gallery {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.component[data-component="product-gallery"] .product-gallery .gal_img {
width: 80px;
height: 80px;
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.10);
overflow: hidden;
cursor: pointer;
}
.component[data-component="product-gallery"] .product-gallery .gal_img img {
object-fit: contain;
width: 100%;
height: 100%;
}
.component[data-component="product-gallery"] .product-gallery-right .title {
font-size: var(--34px);
font-weight: 400;
}
.component[data-component="product-gallery"] .product-gallery-right .cost {
margin: 24px 0 32px;
}
.component[data-component="product-gallery"] .product-gallery-right .bottom {
border-top: 1px solid rgba(0, 0, 0, 0.10);
margin-top: 40px;
padding-top: 40px;
}
.component[data-component="product-gallery"] .product-gallery-right .desc-text {
font-size: var(--16px);
margin-top: 16px;
}
/* Single-field */
.component[data-component="faqs"] > div > svg,
.component[data-component="single-field"] > div > svg {
display: block;
}
.component[data-component="faqs"] > div > svg:first-child,
.component[data-component="single-field"] > div > svg:first-child {
margin-bottom: -16px;
}
.component[data-component="faqs"] > div > svg:last-child,
.component[data-component="single-field"] > div > svg:last-child {
margin-top: -16px;
}
.component[data-component="single-field"] .first-field + .second-field {
margin-top: 24px;
}
.component[data-component="single-field"] .second-field + .third-field {
margin-top: 32px;
}
.component[data-component="single-field"] iframe {
width: 100%;
height: 100%;
aspect-ratio: 1.72;
border-radius: 25px;
}
/* Steps */
.component[data-component="steps"] .steps-multi-container {
display: grid;
gap: 72px;
}
.component[data-component="steps"] .steps-multi {
position: relative;
display: flex;
align-items: center;
gap: 32px;
background-color: var(--white);
border-radius: 25px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, .15);
padding: 40px
}
.component[data-component="steps"] .steps-multi .clear {
display: none;
}
.component[data-component="steps"] .steps-multi:nth-child(2n) {
flex-direction: row-reverse;
}
.component[data-component="steps"] .steps-multi .multi_controls {
position: absolute;
top: 0;
left: 0;
}
.component[data-component="steps"] .steps-multi-wrap {
width: 100%;
}
.component[data-component="steps"] .steps-multi .step-arrow {
position: absolute;
inset: calc(100% + 12px) auto auto 50%;
transform: translateX(-50%);
}
.component[data-component="steps"] .steps-multi .multiField_0,
.component[data-component="steps"] .steps-multi .multiField_1 {
display: none;
}
.component[data-component="steps"] .steps-multi .multiField_2 {
font-size: var(--28px);
font-weight: 400;
line-height: 1.35;
margin-bottom: 24px;
}
.component[data-component="steps"] .steps-multi .multiField_4 {
flex-shrink: 0;
position: relative;
width: 304px;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1.03;
padding: 48px;
}
.component[data-component="steps"] .steps-multi .multiField_4 img {
position: relative;
z-index: 1;
}
.component[data-component="steps"] .steps-multi .multiField_4 .steps-circle {
position: absolute;
}
.component[data-component="steps"] .steps-multi:nth-child(4n-2) .multiField_4 .steps-circle {
transform: scaleX(-1) scaleY(-1);
}
.component[data-component="steps"] .steps-multi:nth-child(4n-1) .multiField_4 .steps-circle {
transform: scaleX(-1);
}
.component[data-component="steps"] .steps-multi:nth-child(4n) .multiField_4 .steps-circle {
transform: scaleY(-1);
}
.component[data-component="steps"] .steps-multi .multiField_4 .steps-number {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 88px;
height: 88px;
aspect-ratio: 1;
font-size: var(--48px);
font-weight: 600;
color: var(--white);
inset: 24px 8px auto auto;
}
#overdiv:not(.admin) .component[data-component="steps"] .steps-multi .multiField_4 .steps-number {
z-index: 1;
}
.component[data-component="steps"] .steps-multi:nth-child(2n) .multiField_4 .steps-number {
inset: 24px auto auto 8px;
}
.component[data-component="steps"] .steps-multi .multiField_4 .steps-number span {
position: absolute;
}
/* Testimonials */
.component[data-component="testimonials"] .testimonials-cards-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 24px;
row-gap: 32px;
}
.component[data-component="testimonials"] .testimonials-card-multi {
position: relative;
display: flex;
border-radius: 25px;
}
.component[data-component="testimonials"] .testimonials-card-multi .multi_controls {
position: absolute;
top: 0;
left: 0;
}
.component[data-component="testimonials"] .testimonials-card-multi .clip {
position: absolute;
inset: -25px auto auto 50%;
transform: translateX(-50%);
z-index: 1;
}
.component[data-component="testimonials"] .testimonials-card-multi:has(.multiField_4) {
grid-column: 1 / span 3;
align-items: center;
}
.component[data-component="testimonials"] .testimonials-card-multi .multiField_0,
.component[data-component="testimonials"] .testimonials-card-multi .multiField_1 {
display: none;
}
.component[data-component="testimonials"] .testimonials-card-multi .multiField_2 {
font-size: var(--24px);
line-height: 1.4;
font-weight: 400;
margin-bottom: 16px;
}
.component[data-component="testimonials"] .testimonials-card-multi .testimonials-card-multi-wrap {
flex-shrink: 0;
width: 100%;
max-width: 392px;
padding: 56px 40px;
}
.component[data-component="testimonials"] .testimonials-card-multi .multiField_4 {
width: 100%;
height: calc(100% - 48px);
border-radius: 20px;
margin-right: 24px;
overflow: hidden;
}
.component[data-component="testimonials"] .testimonials-cards-pull-container {
display: flex;
gap: 24px;
padding-top: 30px;
overflow: hidden;
}
.component[data-component="testimonials"] .testimonials-card-multi .multiField_4 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.component[data-component="testimonials"] .testimonials-card-multi-pull .admin-message,
.component[data-component="testimonials"] .testimonials-card-multi-pull .type-select {
display: none;
}
.component[data-component="testimonials"] .testimonials-card-multi-pull {
width: calc(100%/3 - 16px);
min-width: 312px;
flex-shrink: 0;
}
#overdiv .component[data-component="testimonials"] .button.testimonials-pull-button {
display: flex;
margin: 40px auto 0;
}
/* Two cols */
.component[data-component="two-cols"] .overdiv-1224 {
display: grid;
align-items: center;
grid-template-columns: repeat(2, 1fr);
column-gap: 40px;
}
.component[data-component="two-cols"] .first-field {
margin-bottom: 32px;
}
.component[data-component="two-cols"] .prefooter-buttons {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
}
.component[data-component="two-cols"] .prefooter-buttons .button {
min-width: 232px;
}
.component[data-component="two-cols"] .prefooter-buttons:has(.third-field, .fourth-field) {
margin-top: 40px;
}
@keyframes wiggle {
0%,
100% {
transform: rotate(-2deg);
}
50% {
transform: rotate(2deg);
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: none;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}