/*
* Cognita Europe theme styles
*
* Table of contents
* 01. Font faces
* 02. Header utilities
* 03. Event and enquiry pages
* 04. Header navigation and UberMenu
* 05. Responsive overrides
* 06. General components and WPBakery overrides
* 07. ShiftNav overrides
* 08. Forms, Gravity Forms, and booking flows
* 09. WPBakery content components
* 10. News, blog, categories, and pagination
* 11. Tabs, overlays, and combined forms
* 12. Landing pages, branding, and typography
* 13. Cards, thumbnails, and sliders
* 14. Legacy base theme styles
*
* Rule order is intentionally preserved until visual QA confirms that
* related blocks can be consolidated without changing the cascade.
*/
/* ==========================================================================
02. Header utilities
========================================================================== */
.darkHeader .ubermenu-main .ubermenu-nav .ubermenu-item.ubermenu-item-level-0>.ubermenu-target.contact-btn:hover {
border-bottom: 0px solid !important;
}
/* ==========================================================================
03. Event and enquiry pages
========================================================================== */
.eventpagetemplate .form-step.active,
.enquirypagetemplate .form-step.active {
display: block;
}
.accordion-body .b,
.accordion-body strong {
font-weight: bold;
}
.eventpagetemplate .form-step,
.enquirypagetemplate .form-step {
display: none;
}
.eventpagetemplate .fake-select select,
.enquirypagetemplate .fake-select select {
display: none;
}
.eventpagetemplate .fake-select .btn,
.enquirypagetemplate .fake-select .btn {
margin-right: 16px;
padding: 4px;
}
.eventpagetemplate .form__section .btn-primary,
.fake-select .btn-primary,
.enquirypagetemplate .form__section .btn-primary {
border: solid 2px #434751;
color: #434751;
background-color: transparent !important;
}
.page-template-page-policies header,
.page-template-page-policies-me header,
.page-template-page-policies-ch header,
.page-template-page-policies-es header,
.page-template-page-policies-es-sp header,
.page-template-legal-notices-es header,
.page-template-legal-notices-es-en header {
position: relative;
background-color: #c41f2f;
}
.eventpagetemplate .form__section .btn:after,
.enquirypagetemplate .form__section .btn:after {
content: "";
position: relative;
display: inline-block;
top: 1px;
width: 7px;
height: 11px;
margin: 0 0 0 10px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media (min-width: 576px) {
.eventpagetemplate .modal-dialog,
.enquirypagetemplate .modal-dialog {
max-width: 500px;
margin: 1.75rem auto !important;
}
}
.eventpagetemplate .modal-dialog,
.enquirypagetemplate .modal-dialog {
position: relative;
width: auto;
height: auto;
margin: .5rem;
pointer-events: none;
}
.eventpagetemplate .form__section,
.enquirypagetemplate .form__section,
.form-group.fake-select.form-validation-row {
margin: 10px 0;
}
.eventpagetemplate .font-weight-light,
.enquirypagetemplate .font-weight-light {
font-weight: 300!important;
}
.eventpagetemplate .pb-4,
.py-4,
.enquirypagetemplate .pb-4,
.py-4 {
padding-bottom: 1.5rem!important;
}
.eventpagetemplate .section--white .callout.section--blue .btn-primary,
.enquirypagetemplate .section--white .callout.section--blue .btn-primary {
color: #fff;
border-color: #fff;
}
.eventpagetemplate .section--white .callout.section--blue p,
.enquirypagetemplate .section--white .callout.section--blue p {
margin-bottom: 1.5rem;
font-size: 1.125rem;
}
.fixed-top {
position: absolute;
}
header.header.header-layout-standard {
position: relative;
}
@media screen and (min-width: 992px) {
body.has-header-layout-standard header.header.header-layout-standard.darkHeader {
padding-bottom: var(--kyubi-sticky-nav-height, 0px);
}
}
header.header.header-layout-overlay {
position: absolute;
}
@media (min-width: 992px) {
.eventpagetemplate .section--white .callout.section--blue .h5,
.eventpagetemplate h5,
.enquirypagetemplate .section--white .callout.section--blue .h5,
.enquirypagetemplate h5 {
font-size: 1.125rem;
margin-bottom: 1rem;
}
.booking-sec {
padding: 25px 0;
}
.modal-content .modal-body {
max-height: 80vh;
overflow-y: auto;
}
}
.enquirypagetemplate .component ul {
padding: 0;
list-style-type: none;
}
.forminput.filled-chk .icon .fa-exclamation {
display: none;
}
.forminput.error-input .icon .fa-check {
display: none;
}
.enquirypagetemplate .form-control:focus {
box-shadow: none;
}
.enquirypagetemplate .error-input .btn-primary {
border-color: #ff5f5f;
}
.enquirypagetemplate .filled-chk .btn-primary {
border-color: #00c07b!important;
}
.page-template-page-enquiry header {
position: relative;
background-color: #c41f2f;
}
.enquirypagetemplate a.btn.btn-primary.btn-back.btn-primary--border {
margin-top: 0;
}
/* ==========================================================================
04. Header navigation and UberMenu
========================================================================== */
.headervideo-txt-img {
position: relative;
}
.ubermenu .ubermenu-tab-layout-left>.ubermenu-tabs-group {
border-right: 0px!important;
}
.form-step__controls.link .btn-primary.btn-primary--border {
background: none;
color: #6f96b7;
min-width: 199px;
}
a#third-level+ul>li>ul>li>ul>li.nested-bighover {
min-height: 79px;
}
a#third-level+ul>li>ul>li>ul>li.nested-bighover>a {
min-height: 77px!important;
height: 77px!important;
}
.school-links+.ubermenu-submenu>li:first-child .ubermenu-tabs-group>li,
.school-links+.ubermenu-submenu>li:first-child .ubermenu-tabs-group>li>a>span {
white-space: normal!important;
}
a#third-level+ul>li>ul>li>ul>li {
min-height: 52px;
}
a#third-level+ul>li>ul>li>ul>li>a:after {
border-top: 23px solid transparent;
border-bottom: 27px solid transparent;
}
a#third-level+ul>li>ul>li>ul>li>a {
min-height: 50px!important;
height: 50px!important;
}
a.ubermenu-target.ubermenu-target-with-image:hover {
background: white!important;
}
.school-links:hover {
background: none!important;
}
.drish-submenu+.ubermenu-submenu>ul>li:nth-child(2),
.drish-nestedsubmenu+.ubermenu-submenu .ubermenu-tabs-group .ubermenu-tab-content-panel a:hover {
background: #6f96b7;
}
.onlylink {
width: 50%!important;
}
.onlylink:hover {
background: #6f96b7;
}
.no-child:after {
display: none;
}
.ubermenu.ubermenu-transition-slide .ubermenu-active>.ubermenu-submenu.ubermenu-submenu-type-mega,
.ubermenu:not(.ubermenu-transition-slide) .ubermenu-submenu.ubermenu-submenu-type-mega {
border-top: 1px solid rgb(0 0 0 / 15%);
}
.ubermenu-tab-content-panel>ul>li>ul>li>ul .ubermenu-tabs-group>li>div {
background: rgba(16, 23, 30, 0.25)!important;
padding: 25px 15px;
margin: 20px 0;
}
.drish-submenu+.ubermenu-submenu>ul>li:nth-child(2)>ul.ubermenu-submenu>li:first-child a {
border: 0;
padding: 15px 20px 15px 25px!important;
}
.drish-submenu+.ubermenu-submenu>ul>li:nth-child(2)>ul.ubermenu-submenu>li:nth-child(2) a {
padding: 15px 25px 15px 20px!important;
}
.ubermenu .ubermenu-target-with-image {
overflow: hidden;
border: 0!important;
}
.menucards,
.school-links,
.big-hover {
padding: 15px 10px!important;
}
.ubermenu .ubermenu-colgroup .ubermenu-column,
.ubermenu .ubermenu-custom-content-padded,
.ubermenu .ubermenu-nonlink,
.ubermenu .ubermenu-retractor,
.ubermenu .ubermenu-submenu-padded,
.ubermenu .ubermenu-submenu-type-stack>.ubermenu-item-normal>.ubermenu-target,
.ubermenu .ubermenu-target,
.ubermenu .ubermenu-widget,
.ubermenu-responsive-toggle {
padding: 15px 10px;
}
.ubermenu .ubermenu-nav .ubermenu-column-1-3 {
width: 33.33%;
}
.label-title>a:after {
content: '';
height: 2px;
width: 35px;
background: #007DBA;
position: absolute;
bottom: -6px;
margin-top: 12px;
}
.label-title a {
color: white;
}
.ubermenu-row.subcontent,
.ubermenu .right-content {
margin: 30px;
background: rgba(60, 23, 20, .25);
padding: 25px 30px;
width: calc(100% - 60px);
display: flex;
flex-wrap: wrap;
}
.label-title>a>span:first-child {
font-size: 30px;
}
.ubermenu .label-title>a {
margin-bottom: 10px;
}
.ubermenu .ubermenu-submenu-type-tabs-group {
border: 0px;
}
.ubermenu-tabs>.ubermenu-tabs-group>li>a {
color: #fff;
font-size: 18px;
}
.ubermenu .ubermenu-row .ubermenu-target-with-image>img {
width: 100%;
object-fit: cover;
max-height: 220px;
margin: 0;
}
.ubermenu .ubermenu-target-with-image>span {
background: white;
color: black;
padding: 20px!important;
float: left;
width: 100%;
}
.ubermenu-nav>li>ul>ul>li a:hover {
position: relative;
background: #007DBA;
min-height: 65px;
}
.ubermenu-nav>li>ul>ul>li a:hover:after {
content: '';
position: absolute;
height: 0;
right: -13px;
border-left: 13px solid #007DBA;
border-top: 43px solid transparent;
border-bottom: 43px solid transparent;
bottom: 0;
top: 0;
}
.ubermenu .ubermenu-tab-layout-left>.ubermenu-tabs-group,
.ubermenu .left-menu {
margin: 20px 0px;
}
.ubermenu .ubermenu-active .right-content.column-three>ul,
.ubermenu .ubermenu-active .subcontent.column-three,
.ubermenu .ubermenu-active .right-content.column-two>ul,
.ubermenu .ubermenu-active .subcontent.column-two {
display: flex;
flex-wrap: wrap;
}
.ubermenu .ubermenu-active .right-content.column-three>ul>li,
.ubermenu .ubermenu-active .subcontent.column-three>li {
flex: 1 1 32.3%;
margin-top: 0!important;
}
.ubermenu .ubermenu-active .right-content.column-two>ul>li,
.ubermenu .ubermenu-active .subcontent.column-two>li {
flex: 1 1 50%;
margin-top: 0!important;
}
.ubermenu .ubermenu-active .right-content.column-three>ul a,
.ubermenu .ubermenu-active .subcontent.column-three>li a,
.ubermenu .ubermenu-active .right-content.column-three>ul a span,
.ubermenu .ubermenu-active .subcontent.column-three>li a span,
.ubermenu .ubermenu-active .right-content.column-two>ul a,
.ubermenu .ubermenu-active .subcontent.column-two>li a,
.ubermenu .ubermenu-active .right-content.column-two>ul a span,
.ubermenu .ubermenu-active .subcontent.column-two>li a span {
height: 100%;
}
.ubermenu .left-menu>ul>li>a,
.ubermenu .ubermenu-tabs-group>li>a {
display: flex;
flex-direction: column;
color: #fff;
align-items: end;
justify-content: center;
padding: 15px 15px;
}
.ubermenu .left-menu>ul>li>a:hover,
.ubermenu .ubermenu-tabs-group>li>a:hover {
background: #0089ff;
}
.ubermenu .left-menu>ul>li>a:hover:after,
.ubermenu .ubermenu-tabs-group>li>a:hover:after {
border-left: 15px solid #0089ff;
}
.ubermenu .left-menu>ul>li>a:after,
.ubermenu .ubermenu-tabs-group>li>a:after {
content: '';
position: absolute;
height: 0;
width: 0;
border-top: 43px solid transparent;
border-bottom: 43px solid transparent;
border-left: 15px solid transparent;
right: -15px;
top: 0;
}
.ubermenu.ubermenu-transition-slide .ubermenu-active>.ubermenu-submenu.ubermenu-submenu-type-mega,
.ubermenu:not(.ubermenu-transition-slide) .ubermenu-submenu.ubermenu-submenu-type-mega {
max-height: calc(100vh - 135px);
}
.ubermenu .subcontent .left-menu>ul>li>a,
.ubermenu .subcontent .ubermenu-tabs-group>li>a {
height: 45px;
min-height: 45px;
}
.ubermenu .subcontent .left-menu>ul>li>a:after,
.ubermenu .subcontent .ubermenu-tabs-group>li>a:after {
border-top: 23px solid transparent;
border-bottom: 23px solid transparent;
}
.left-right-50>li>ul {
width: 100%!important;
}
.left-right-50>li>ul>li>div {
width: 50%!important;
}
.left-right-50>ul>li>ul {
width: 100%!important;
}
.left-right-50>ul>li>ul>li>a {
width: 45%!important;
}
.left-right-50>ul>li>ul>li>div {
width: 55%!important;
padding-left: 20px;
}
.ubermenu .ubermenu-submenu-type-stack>.ubermenu-item-normal>.ubermenu-target {
padding-top: 5px;
padding-bottom: 5px;
color: #fff;
font-size: 18px;
font-weight: 700;
}
.ubermenu .ubermenu-submenu-type-stack>.ubermenu-item-normal>.ubermenu-target {
color: #fff;
text-align: left;
width: 100%!important;
padding: 15px 25px!important;
font-size: 16px;
}
.ubermenu .ubermenu-item-type-column>.ubermenu-submenu-type-stack>.ubermenu-item-normal:first-child {
margin-top: 0;
}
.ubermenu-row.subcontent,
.ubermenu .right-content {
margin: 4px;
}
.ubermenu .ubermenu-item.ubermenu-active>.ubermenu-target {
border-bottom: solid 4px #fff;
}
.ubermenu-main .ubermenu-nav .ubermenu-item.ubermenu-item-level-0>.ubermenu-target:hover {
border-bottom: solid 4px #fff;
}
.ubermenu-sub-indicators .ubermenu-has-submenu-drop>.ubermenu-target>.ubermenu-sub-indicator {
top: 45%;
}
.ubermenu .left-menu>ul>li>a,
.ubermenu .ubermenu-tabs-group>li>a {
color: #fff;
}
.ubermenu .ubermenu-tab-layout-left>.ubermenu-tabs-group,
.ubermenu .left-menu {
margin: 20px 0px;
padding-right: 30px;
}
.ubermenu-item-layout-text_only.ubermenu-active>.ubermenu-target {
border-bottom: none;
}
.ubermenu-tabs>.ubermenu-tabs-group>li>a {
border-bottom: none !important;
}
ul.ubermenu-tabs-group.ubermenu-column.ubermenu-column-1-4.ubermenu-submenu.ubermenu-submenu-id-278.ubermenu-submenu-type-auto.ubermenu-submenu-type-tabs-group {
padding: 0;
}
.ubermenu a.ubermenu-target,
.ubermenu-trigger-click .ubermenu-has-submenu-drop>.ubermenu-target {
cursor: pointer;
text-align: start;
}
ul.ubermenu-submenu.ubermenu-submenu-id-281.ubermenu-submenu-type-stack {
margin-left: 25px;
}
.ubermenu-submenu-id-256 .ubermenu-target-title ubermenu-target-text {
white-space: normal;
}
.ubermenu-row.subcontent,
.ubermenu .right-content {
margin-top: 25px;
}
.ubermenu .ubermenu-target-with-image>span {
background: white;
color: #00205c;
padding: 20px!important;
float: left;
width: 100%;
height: auto !important;
}
.ubermenu .left-menu>ul>li>a:hover,
.ubermenu .ubermenu-tabs-group>li>a:hover {
transition: none;
background: #6F96B7;
}
.ubermenu-row.subcontent,
.ubermenu .right-content {
background: rgba(16, 23, 30, 0.25);
}
.ubermenu-tabs .ubermenu-active .background-active {
background: #6F96B7;
}
.ubermenu-tabs .ubermenu-active .background-active:after {
border-left: 15px solid #6F96B7;
content: '';
position: absolute;
height: 0;
width: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
right: -15px;
top: 0;
}
.ubermenu-tabs .ubermenu-active .background-active.big-hover:after {
border-left: 15px solid #6F96B7 !important;
content: '';
position: absolute;
height: 0;
width: 0;
border-top: 43px solid transparent;
border-bottom: 43px solid transparent;
right: -15px;
top: 0;
}
.ubermenu-tabs .ubermenu-active .ubermenu-item-level-5 .ubermenu-active .background-active-submenu {
background: #6F96B7;
}
.ubermenu-tabs .ubermenu-active .ubermenu-item-level-5 .ubermenu-active .background-active-submenu:after {
border-left: 15px solid #6F96B7 !important;
content: '';
position: absolute;
height: 0px;
width: 0;
border-top: 19px solid transparent;
border-bottom: 27px solid transparent;
right: -15px;
top: 0px;
}
.ubermenu .left-menu>ul>li>a:hover:after,
.ubermenu .ubermenu-tabs-group>li>a:hover:after {
border-left: 15px solid #6F96B7;
}
.ubermenu-main .ubermenu-row {
max-width: 1140px;
margin-left: auto;
margin-right: auto;
}
.ubermenu-item-level-3 a.ubermenu-target.ubermenu-item-layout-default.ubermenu-item-layout-text_only {
display: flex;
flex-direction: column;
color: #fff;
align-items: end;
justify-content: center;
padding: 15px 10px;
}
.ubermenu-item-level-3 a.ubermenu-target.ubermenu-item-layout-default.ubermenu-item-layout-text_only:hover:after {
border-left: 15px solid #6F96B7;
content: '';
position: absolute;
height: 0;
width: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
right: -15px;
top: 0;
}
.ubermenu-item-level-3 a.ubermenu-target.ubermenu-item-layout-default.ubermenu-item-layout-text_only.big-hover:hover:after {
border-left: 15px solid #6F96B7;
content: '';
position: absolute;
height: 0;
width: 0;
border-top: 43px solid transparent;
border-bottom: 43px solid transparent;
right: -15px;
top: 0;
}
.ubermenu-item-level-3 a.ubermenu-target.ubermenu-item-layout-default.ubermenu-item-layout-text_only:hover {
transition: none;
background: #6F96B7;
}
ul.ubermenu-tabs-group.ubermenu-column.ubermenu-column-1-4.ubermenu-submenu.ubermenu-submenu-id-687.ubermenu-submenu-type-auto.ubermenu-submenu-type-tabs-group {
min-height: auto !important;
}
.ubermenu .ubermenu-submenu-type-stack>.ubermenu-item-normal>.ubermenu-target:hover {
border: none;
}
.drish-submenu+.ubermenu-submenu>ul>li:nth-child(2),
.drish-nestedsubmenu+.ubermenu-submenu .ubermenu-tabs-group .ubermenu-tab-content-panel {
background: rgba(16, 23, 30, 0.25);
padding: 25px 15px;
margin: 20px 0;
}
.drish-submenu+.ubermenu-submenu>ul>li:nth-child(2)>ul li a {
height: 100%;
padding: 0!important;
font-size: 22px;
}
.drish-submenu+.ubermenu-submenu>ul>li:nth-child(2)>ul {
display: flex!important;
padding: 0;
}
.drish-submenu+.ubermenu-submenu>ul,
.menucards+.ubermenu-tab-content-panel>ul {
display: flex;
}
.menucards+.ubermenu-tab-content-panel>ul li a {
height: 100%;
background: white;
padding: 0;
margin: 0 15px;
}
.school-links+.ubermenu-submenu>li:first-child .ubermenu-tabs-group>li,
.school-links+.ubermenu-submenu>li:first-child .ubermenu-tabs-group>li>a {
height: 45px;
min-height: 40px;
width: auto;
font-size: 20px;
}
.school-links+.ubermenu-submenu>li>ul {
padding: 0;
}
.school-links+.ubermenu-submenu>li>ul>li>ul {
width: 40.5%!important;
padding-right: 0!important;
}
.school-links+.ubermenu-submenu>li>ul>li>ul a {
width: 100%!important;
padding-right: 0!important;
}
.school-links+.ubermenu-submenu>li>a {
font-size: 20px;
min-height: 45px;
}
.school-links+.ubermenu-submenu>li:first-child .ubermenu-tabs-group>li>a+.ubermenu-tab-content-panel {
width: 48%;
background: none;
}
.school-links+.ubermenu-submenu>li:first-child .ubermenu-tabs-group>li>a+.ubermenu-tab-content-panel a {
font-size: 18px;
height: 40px;
}
.school-links+.ubermenu-submenu>li:first-child .ubermenu-tabs-group>li>a:after {
border-top: 21px solid transparent;
border-bottom: 25px solid transparent;
}
.school-links+.ubermenu-submenu>li>a {
font-size: 20px!important;
}
.school-onlylinks+.ubermenu-submenu {
margin-top: 20px;
}
.school-onlylinks+.ubermenu-submenu>li>ul>li>a {
font-size: 20px!important;
min-height: 45px;
}
.drish-submenu+.ubermenu-submenu>ul>li:first-child>ul>li>a:hover {
width: 95%!important;
}
.drish-submenu+.ubermenu-submenu>ul>li:first-child>ul>li>a {
font-size: 18px!important;
}
.drish-submenu+.ubermenu-submenu>ul>li:first-child,
.drish-nestedsubmenu+.ubermenu-submenu>ul>li:first-child {
margin-top: 21px;
}
ul#mid-menu li a:hover:after {
display: none;
}
.ubermenu>ul>li>a {
font-size: 16px!important;
}
.darkHeader a.ubermenu-target.ubermenu-item-layout-default.ubermenu-item-layout-text_only.contact-btn {
background: #6F96B7;
border-color: #6F96B7;
margin-top: 0px;
min-height: 47px;
display: -webkit-box;
display: -ms-flexbox;
display: block;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 18px;
-webkit-filter: drop-shadow(1px 1px 0px rgba(0, 20, 58, 0.85));
filter: drop-shadow(1px 1px 0px rgba(0, 20, 58, 0.85));
font-weight: 700;
border-radius: .25rem;
height: 47px;
text-align: center;
}
a.ubermenu-target.ubermenu-item-layout-default.ubermenu-item-layout-text_only.contact-btn {
display: none;
}
a.ubermenu-target.ubermenu-item-layout-default.ubermenu-item-layout-text_only.contact-btn:hover {
border: none !important;
}
nav>ul>li>div {
border-top: 1px solid rgba(16, 23, 30, 0.25)!important;
}
.drish-submenu+.ubermenu-submenu>ul>li:nth-child(2),
.drish-nestedsubmenu+.ubermenu-submenu .ubermenu-tabs-group .ubermenu-tab-content-panel {
min-height: auto!important;
}
.ubermenu .left-menu>ul>li>a,
.ubermenu .ubermenu-tabs-group>li>a {
display: block;
}
.ubermenu-item-level-3 a.ubermenu-target.ubermenu-item-layout-default.ubermenu-item-layout-text_only {
display: block;
}
.ubermenu-horizontal.ubermenu-items-align-flex .ubermenu-nav .ubermenu-item-level-0 {
width: auto;
}
header.header.darkHeader .full-width,
header.header.darkHeader>.container-fluid {
-webkit-transition: all .5s;
transition: all .5s;
}
.ubermenu-tab-content-panel>ul {
background: none!important;
padding: 0!important;
margin: 0!important;
width: 100%!important;
height: 100%;
}
.navigation-bar .nav-col nav>ul>li.bottomlink,
.bottomlink a {
display: none!important;
}
section.section.full-short-text p {
width: 85%;
margin: auto;
word-break: break-word;
}
/* ==========================================================================
05. Responsive overrides
========================================================================== */
@media screen and (max-width:991px) {
.page-id-1368 .middle-section.section {
padding-bottom: 50px;
}
.component.p-md-4.section--blue,
.component.p-md-4.section--white,
.component.p-md-4.section--grey {
padding: 24px!important;
}
.card.horizontal--card.img--100 img {
height: 100%;
}
div#form2DateTimeModal .modal-body {
max-height: 75vh;
}
section.section.full-short-text p {
width: 100%!important;
margin: auto;
max-width: 100%!important;
}
.mob-P-0 {
padding: 0;
}
}
@media (max-width: 767px) {
.darkHeader .main-logo {
display: none !important;
}
}
@media screen and (max-width:959px) {
.header-btns {
width: calc(100% - 61px)!important;
}
.school-links+.ubermenu-submenu>li:first-child .ubermenu-tabs-group>li,
.school-links+.ubermenu-submenu>li:first-child .ubermenu-tabs-group>li>a {
font-size: 16px;
}
.school-links+.ubermenu-submenu>li:first-child .ubermenu-tabs-group>li {
border-top: 1px solid rgba(255, 255, 255, .3)!important;
min-height: initial!important;
height: auto;
}
.school-links+.ubermenu-submenu>li:first-child .ubermenu-tabs-group>li>a .ubermenu-sub-indicator-close {
top: 50%!important;
transform: translate(0%, -80%);
}
a#third-level+ul>li>ul>li>ul>li>div a .ubermenu-target-title {
padding-left: 15px;
}
a#third-level+ul>li>ul>li>ul>li>a>.ubermenu-target-title {
padding: 0 15px;
}
.school-links+.ubermenu-submenu>li:first-child .ubermenu-tabs-group>li>a+.ubermenu-tab-content-panel a {
font-size: 16px;
height: 40px;
border-top: 1px solid rgba(255, 255, 255, .3);
padding: 10px 25px 10px 45px!important;
}
.drish-submenu+.ubermenu-submenu>ul>li:first-child>ul>li,
.ubermenu .left-menu>ul>li,
.ubermenu .ubermenu-tabs-group>li {
background: rgba(0, 0, 0, .2);
}
.header>.container-fluid #mid-menu li {
padding: 7px;
min-width: initial;
}
.drish-submenu+.ubermenu-submenu>ul>li:nth-child(2),
.drish-nestedsubmenu+.ubermenu-submenu .ubermenu-tabs-group .ubermenu-tab-content-panel {
margin: 0;
}
.navigation-bar .nav-col .nav-col nav>ul>li>a.contact-btn {
padding: 0!important;
margin: 10px 20px;
max-width: 120px;
display: flex;
align-items: center;
justify-content: center;
background: #6F96B7;
border-color: #6F96B7;
min-height: 47px;
font-size: 18px;
-webkit-filter: drop-shadow(1px 1px 0px rgba(0, 20, 58, 0.85));
filter: drop-shadow(1px 1px 0px rgba(0, 20, 58, 0.85));
font-weight: 700;
border-radius: .25rem;
height: 47px;
}
.drish-submenu+.ubermenu-submenu>ul,
.menucards+.ubermenu-tab-content-panel>ul {
display: block;
}
.drish-submenu+.ubermenu-submenu>ul>li,
.menucards+.ubermenu-tab-content-panel>ul>li {
display: block;
width: 100%;
}
.navigation-bar>div,
.navigation-bar>div>div,
.navigation-bar>div>div>div {
margin: 0!important;
padding: 0!important;
}
.navigation-bar .nav-col nav>ul>li>ul>li>ul {
margin: 0!important;
padding-right: 0!important;
display: block!important;
}
header.header.darkHeader .navigation-bar {
top: 60px!important;
}
.header-btns {
display: none!important;
}
.darkHeader .header-btns {
display: flex!important;
}
.darkHeader-down #shiftnav-toggle-main {
top: 0 !important;
}
.darkHeader-top #shiftnav-toggle-main {
top: 11px;
}
.ubermenu-main .ubermenu-item-level-0>.ubermenu-target {
text-align: center;
}
.ubermenu .ubermenu-submenu-type-stack>.ubermenu-item-normal>.ubermenu-target {
color: #fff;
text-align: left;
width: 100%!important;
padding: 18px 25px!important;
font-size: 20px;
border-top: 1px solid rgba(255, 255, 255, .5);
}
.ubermenu-responsive-default.ubermenu-responsive .ubermenu-tab>.ubermenu-target {
color: #fff;
text-align: center;
align-items: flex-start;
}
.ubermenu .ubermenu-item-layout-image_above>.ubermenu-image {
margin-bottom: 10px;
width: 100%;
}
a#third-level {
text-align: left;
}
.ubermenu,
.ubermenu-nav {
overflow: auto !important;
z-index: 9999;
height: 600px;
padding-bottom: 80px;
}
.navigation-bar .nav-col nav>ul>li {
display: block!important;
width: 100%!important;
text-align: left!important;
border-bottom: 1px solid rgba(255, 255, 255, .4)!important
}
.navigation-bar .nav-col nav>ul>li>a {
text-align: left;
padding: 20px 25px !important;
font-size: 20px!important;
border: 0;
}
header .navigation-bar {
padding: 0 !important;
}
.ubermenu-responsive-default.ubermenu-responsive.ubermenu-mobile-accordion:not(.ubermenu-mobile-modal):not(.ubermenu-in-transition):not(.ubermenu-responsive-collapse) {
max-height: initial!important;
height: 100vh;
overflow: auto!important;
border-top: 1px solid rgba(255, 255, 255, .5);
margin-top: 1px;
}
.ubermenu,
.ubermenu-nav {
overflow: auto !important;
padding-bottom: 30px;
}
.navigation-bar .nav-col .ubermenu-sub-indicators.ubermenu-sub-indicators-align-text .ubermenu-has-submenu-drop>.ubermenu-target>.ubermenu-sub-indicator {
right: 10px!important;
margin-left: .6em;
height: 40px;
width: 40px;
border: 2px solid;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
top: 50%;
right: 20px!important;
transform: translate(0, -33%);
}
li.left-menu,
li.left-menu>ul>li {
width: 100%!important;
float: left!important;
text-align: left;
margin-top: 0!important;
}
li.left-menu>ul>li>a {
padding: 20px 0px 20px 25px!important;
text-align: left!important;
border-top: 1px solid rgba(255, 255, 255, .4)!important;
}
.ubermenu-responsive-default.ubermenu-responsive .ubermenu-nav .ubermenu-item .ubermenu-submenu.ubermenu-submenu-drop {
width: 100%;
min-width: 100%;
max-width: 100%;
top: auto;
left: 0!important;
position: relative;
}
.ubermenu-responsive-default.ubermenu-responsive .ubermenu-item.ubermenu-active>.ubermenu-submenu.ubermenu-submenu-type-mega {
max-height: none;
height: auto;
overflow: visible;
box-shadow: none;
}
.ubermenu-responsive-default.ubermenu-responsive .ubermenu-tab>.ubermenu-target {
color: #fff;
text-align: left!important;
min-height: 66px;
display: flex;
flex-direction: column;
justify-content: center;
}
.ubermenu-tabs>ul {
border-right: 0px!important;
}
.ubermenu-tabs>ul>li {
border-top: 1px solid rgba(255, 255, 255, .4)!important;
border-bottom: none!important;
border-right: 0px !important;
}
.ubermenu-tabs>ul>li>a {
border-bottom: none!important;
border-right: 0px !important;
}
.ubermenu .ubermenu-tab .ubermenu-tab-content-panel {
position: relative!important;
display: none;
border: 0px!important;
}
.ubermenu-tab>div>ul>li>ul>li>ul {
margin: 0!important;
padding: 0!important;
}
.ubermenu-tab-content-panel ul {
padding: 0!important;
margin: 0!important;
}
ul.ubermenu-tabs-group .ubermenu-tabs,
.ubermenu-tab-content-panel {
background: rgba(111, 150, 183, .4)!important;
}
.ubermenu-tab-content-panel a {
color: #fff;
text-align: left!important;
min-height: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.ubermenu-tab-content-panel .ubermenu-tabs>ul>li>a {
height: 40px!important;
min-height: 40px!important;
}
.ubermenu-tab-content-panel>ul>li>ul>li>ul>li>ul>li>a {
min-height: 40px!important;
}
.ubermenu-active>a {
background: #6F96B7!important;
}
.navigation-bar .nav-col .ubermenu.ubermenu-submenu-indicator-closes .ubermenu-sub-indicator-close>[class^=fa] {
display: inline-block;
position: absolute;
top: 50%;
margin-top: 0;
left: initial!important;
width: 100%;
right: 10px!important;
margin-left: .6em;
height: 40px;
width: 40px;
border: 2px solid;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
top: 14px;
}
span.ubermenu-sub-indicator-close>i:before {
content: "\f106"!important;
}
.navigation-bar>.container-fluid {
padding: 0!important;
}
.navigation-bar .nav-col nav>ul>li>ul>li>ul>li .ubermenu-sub-indicator-close {
display: block!important;
right: 10px!important;
}
.navigation-bar .nav-col nav>ul>li>ul>li>ul>li>a.no-child .ubermenu-sub-indicator-close {
display: none;
}
.navigation-bar .nav-col nav>ul>li>ul>li>ul>li .ubermenu-sub-indicator-close i {
border: 0px;
top: 50%;
transform: translate(0%, -50%);
margin: 0;
font-size: 16px;
}
.navigation-bar .nav-col nav>ul>li>ul>li>ul>li .ubermenu-sub-indicator-close i:before {
content: "\f107"!important;
}
.navigation-bar .nav-col nav>ul>li>ul>li>ul>li.ubermenu-active .ubermenu-sub-indicator-close i:before {
content: '\f107'!important;
}
.ubermenu-responsive-default.ubermenu.ubermenu-submenu-indicator-closes .ubermenu-target>.ubermenu-sub-indicator-close {
right: 10px;
}
.ubermenu-responsive-default.ubermenu.ubermenu-submenu-indicator-closes .ubermenu-active>.ubermenu-target>.ubermenu-sub-indicator-close {
right: 10px;
}
.navigation-bar .nav-col nav>ul>li>ul>li>ul>li .ubermenu-tab-content-panel {
padding: 0;
}
a#third-level+ul>li>ul>li>ul>li>a,
a#third-level+ul>li>ul>li>ul>li.nested-bighover>a,
a#third-level+ul>li>ul>li>ul>li.nested-bighover {
min-height: initial!important;
height: auto!important;
}
.ubermenu-tab>div>ul>li>ul>li {
margin: 0!important;
}
.ubermenu-tab-content-panel ul.ubermenu-tabs-group>li {
border: 0px!important;
}
ul.ubermenu-tabs-group>li>a {
padding: 10px 25px!important;
border: 0px!important;
}
.navigation-bar .nav-col .label-title>a {
display: none!important;
}
.navigation-bar .nav-col nav>ul>li>ul>li>ul>li.ubermenu-active>a .ubermenu-sub-indicator-close i:before,
a#third-level+ul>li>ul>li>ul>li.ubermenu-active>a>.ubermenu-sub-indicator-close i:before {
content: '\f106'!important;
}
a#third-level+ul>li>ul>li>ul>li .ubermenu-tab-content-panel {
padding: 15px 5px;
}
.navigation-bar .nav-col nav>ul>li:last-child {
display: none;
}
.header>.container-fluid #mid-menu li {
min-width: initial!important;
margin-left: 7px!important;
padding: 7px 0!important;
}
.header>.container-fluid .navbar-toggler {
position: absolute;
right: 15px;
top: 8px;
padding: 12px 10px!important;
}
.navigation-bar .nav-col nav>ul>li>a:hover {
border: 0!important;
}
.ubermenu-responsive-default.ubermenu-responsive .ubermenu-item.ubermenu-item-level-0>.ubermenu-target {
border: none;
box-shadow: none;
text-align: left;
}
.ubermenu-responsive-default.ubermenu.ubermenu-responsive .ubermenu-autoclear>.ubermenu-column {
margin: 0;
padding: 0;
width: 100%;
}
.navigation-bar .ubermenu ul {
margin: 0!important;
padding: 0!important;
}
.ubermenu .ubermenu-item-type-column>.ubermenu-submenu-type-stack>.ubermenu-item-normal:first-child {
margin-top: 0!important;
}
.drish-submenu+.ubermenu-submenu>ul>li:first-child>ul>li>a:hover {
min-width: 100%!important;
width: 100%!important;
}
.drish-submenu+.ubermenu-submenu>ul>li:first-child>ul>li>a {
padding: 15px 25px!important;
}
.drish-submenu+.ubermenu-submenu>ul>li:first-child>ul>li:last-child>a {
border-bottom: 0px
}
.navigation-bar .nav-col li.ubermenu-active i.ubermenu-sub-indicator.fa-angle-down:before {
content: '\f106'!important;
}
span.ubermenu-sub-indicator-close {
display: none!important;
}
.ubermenu-responsive-default.ubermenu-responsive .ubermenu-item.ubermenu-item-level-0>ul>li .ubermenu-sub-indicator-close>i {
border: 0!important;
top: 50%;
transform: translate(0, 0);
}
.drish-submenu+.ubermenu-submenu>ul>li:nth-child(2),
.drish-nestedsubmenu+.ubermenu-submenu .ubermenu-tabs-group .ubermenu-tab-content-panel {
padding: 0px!important;
}
.navigation-bar .nav-col nav>ul>li:last-child {
display: none!important;
}
#herovideo-modal .modal-dialog .modal-content .modal-body iframe {
height: 100vh!important;
min-height: initial!important;
}
.navigation-bar .nav-col nav>ul>li.bottomlink,
.bottomlink a {
border-bottom: 0px!important;
display: block!important;
}
}
.drish-submenu+.ubermenu-submenu>ul {
max-width: 1140px;
}
/* 1. Style the hamburger button. */
.navbar-toggler .hamburger-button {
position: relative;
transition: .3s ease-in-out;
width: 38px!important;
height: 38px;
}
.hamburger-button span {
position: absolute;
height: 8px;
border-radius: 4px;
width: calc(100% - 18px)!important;
background-color: #3D4146;
top: 0;
transition: transform .2s ease-in-out, opacity .2s ease-in-out;
left: 9px;
right: -9px;
}
.hamburger-button span:nth-child(1) {
top: 10px;
}
.hamburger-button span:nth-child(2),
.hamburger-button span:nth-child(3) {
top: 18px;
}
.hamburger-button span:nth-child(4) {
top: 26px;
}
/* 2. Style the active state and create the cross. */
.ubermenu-responsive-toggle-open .hamburger-button span:nth-child(1),
.ubermenu-responsive-toggle-open .hamburger-button span:nth-child(4) {
opacity: 0;
}
.ubermenu-responsive-toggle-open .hamburger-button span:nth-child(2) {
transform: rotate(45deg);
}
.ubermenu-responsive-toggle-open .hamburger-button span:nth-child(3) {
transform: rotate(-45deg);
}
.ubermenu-responsive-toggle-open .hamburger-button span {
height: 3px!important;
width: calc(100% - 18px)!important;
}
.header>.container-fluid .navbar-toggler {
padding: 0!important;
}
div#date_of_birth>div {
margin-right: 0;
display: block;
margin: 5px 0;
text-align: left;
width: calc(100% - 54px);
}
.site-breadcrumb .breadcrumb li a,
.breadcrumb li {
font-size: 14px;
font-weight: 600;
}
ul.venue-facilities li {
margin-bottom: 5px;
}
.breadcrumb-item.active {
font-size: 1.125rem;
font-weight: 700;
text-decoration: none;
}
.ubermenu-sub-indicators .ubermenu-item-has-children>.ubermenu-target.ubermenu-noindicator {
padding-right: 20px;
min-height: 60px;
}
.menu-title:after {
display:none;
}
.menu-title-without:after {
display:none;
}
.drish-submenu+.ubermenu-submenu>ul>li:first-child>ul>li>a:hover {
width: 100%!important;
}
@media screen and (max-width:768px) {
.breadcrumb-item.active,
.breadcrumb li a {
font-size: 14px;
}
.booking-sec {
padding: 30px 0;
}
}
/* ==========================================================================
06. General components and WPBakery overrides
========================================================================== */
body,
p {
font-family: 'Raleway', sans-serif;
}
a.skip-link {
display: none;
}
.header>.container-fluid #mid-menu {
flex-direction: row;
justify-content: flex-end;
}
.header>.container-fluid #mid-menu li {
background-color: #0089ff;
background: #8aa6bc;
padding: 7px 15px;
min-width: 100px;
text-align: center;
margin-left: 15px;
background: #6F96B7;
border-color: #6F96B7;
-webkit-filter: drop-shadow(1px 1px 0px rgba(0, 20, 58, 0.85));
filter: drop-shadow(1px 1px 0px rgba(0, 20, 58, 0.85));
border-radius: 3px;
}
.navigation-bar {
background: #C41F2F;
padding: 0;
-webkit-box-shadow: 1px 1px 0px rgb(0 20 58 / 85%);
box-shadow: 1px 1px 0px rgb(0 20 58 / 85%);
}
footer {
color: #fff;
position: relative;
background-size: contain;
background-repeat: no-repeat;
background-position: right;
background-color: #727271;
}
footer ul {
padding: 0;
margin-top: 10px;
list-style: none;
}
footer h6 {
font-size: 18px;
font-weight: 500;
}
footer ul li a {
font-size: 16px;
}
.bottom-bar {
background-color: #10171E;
padding: 40px 0;
position: relative;
}
h1.entry-title {
display: none;
}
footer.section.pb-0 .container-fluid {
position: relative;
}
.copyright p {
color: #f0f0f0;
text-align: right;
}
footer .social-icons a {
color: #fff;
}
.prize h6 {
font-size: 1.125rem;
font-weight: 700;
}
.link .mb-3 {
color: #fff;
border-color: #fff;
padding: 15px 13px;
}
.link .mb-3:after {
content: none;
}
.link .mb-3:hover {
background: #fff;
border-color: #6F96B7;
color: #6F96B7;
}
div#navbarMain ul#mid-menu li a {
color: #fff;
padding: 5px;
height: 30px;
}
.middle-section .container,
.middle-section .container-fluid {
padding: 80px;
}
@media screen and (max-width:991px) {
.modal section#pq-form .col .form__front {
padding: 30px 15px 0!important;
}
.middle-section .container,
.middle-section .container-fluid {
padding: 35px 15px;
}
.DOB .btn,
.DOB>div {
width: 100%;
margin-right: 0;
}
.DOB {
flex-wrap: wrap;
}
}
.text-center .center-title .body-small::after {
right: 0;
margin: auto;
}
.section--blue .btn-link {
padding: 0;
text-decoration: none;
font-weight: 700;
position: relative;
text-align: left;
padding-right: 15px;
}
.section--blue .btn-link:after {
content: "\f105";
font-family: 'Font Awesome 5 Free';
top: 2px;
margin-left: 7px;
position: absolute;
}
.section--white .btn-link {
padding: 0;
text-decoration: none;
font-weight: 700;
position: relative;
text-align: left;
padding-right: 15px;
}
.section--white .btn-link:after {
content: "\f105";
font-family: 'Font Awesome 5 Free';
top: 2px;
margin-left: 7px;
position: absolute;
}
div#comments {
display: none;
}
.ubermenu .ubermenu-nav .ubermenu-column-full {
width: 1140px;
margin: 0 auto;
display: block;
float: none;
}
.flexible-content h2 {
font-size: 30px!important;
line-height: 36px;
}
body {
font-family: 'Raleway', sans-serif;
}
.age-school .link .btn-primary {
color: #fff;
}
.age-school .link .btn-primary.btn-primary--border {
color: #6f96b7;
}
.hash-list .ul-marker li:before {
display: none;
}
.video_wrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 0;
height: 0;
}
.video_wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (max-width: 767px) {
.no-gap-mobile .col-xl-4.col-lg-4.col-md-4.boxPadding-0 {
margin-bottom: 0px!important;
}
.no-gap-mobile .list ul {
margin-bottom: 0px;
}
.no-gap-mobile .card-body.section--white {
padding-top: 0px;
padding-bottom: 1px;
}
.no-gap-mobile .justify-content-between {
padding-top: 20px;
padding-bottom: 20px;
}
._video_modal iframe {
margin-top: 70px;
}
}
[id^="shuttle-modal"] .modal-dialog.modal-lg {
display: block;
}
a#form-enquiry-main-step {
color: #fff;
}
.section--blue .card.border-0.section--yellow {
color: #fff;
}
@media (min-width: 768px) {
.col-w-20 {
width: 20%;
}
}
.form-step__controls .btn.btn-primary:active {
color: #fff;
}
.form-step__controls .btn.btn-primary {
color: #fff;
}
.z-9 {
z-index: 9;
}
.small-header {
height: auto;
}
.form-step__controls .link .btn-primary.btn-primary--border {
color: #6f96b7;
}
.page-template-template-page-php header {
position: relative;
background-color: #c41f2f;
}
.component.fee-table {
overflow-x: auto;
}
/* The tile image. It was a background with a fixed 100px height and a float,
* inside a Bootstrap grid; it is an ![]()
in a shape box now, so the crop is
* object-fit and the height comes from the shape. Without a shape the image
* keeps its own proportions. */
.flex-thumbnails__img > .flex-thumbnails__image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* The space between the rows of tiles, matching the 1.5rem Bootstrap already
* puts between the columns, so the grid is evenly spaced both ways.
*
* The caption used to carry the only vertical spacing in the whole block - a
* 15px bottom margin, inside the tile. So a tile without a caption had no
* spacing at all and the rows sat flush against each other, and a tile with
* one was 129px tall against its neighbours' 93px. The gap belongs to the row,
* which has it whatever the tiles contain.
*
* row-gap rather than --bs-gutter-y. Bootstrap delivers that gutter by putting
* margin-top on every child and cancelling the first row with an equal
* negative margin-top on the row itself - so the row's own box began 24px
* higher than it should, and a second grid in the same column pulled up into
* whatever was above it. A gap applies only between the lines and leaves no
* edge to cancel. */
.flex-thumbnails {
row-gap: 1.5rem;
}
/* Blocks in the same column, and only where something follows - a grid or a
* button that ends the column adds no trailing space. This is also what sits
* between a grid and its own Load more button, which is why that button has no
* top margin of its own: one rule spaces every combination the same way. */
.flex-thumbnails:not(:first-child) {
margin-top: 1.5rem;
}
.flex-thumbnails:not(:last-child),
.flex-thumbnails__more:not(:last-child) {
margin-bottom: 1.5rem;
}
/* Stacked below 768px the theme adds its own 20px under every `.row > div`,
* which lands on top of the gap and spaces the tiles 44px apart against 24px
* on a desktop. Two classes outscore `.row>div`, so row-gap stays the only
* thing setting the gap. */
@media (max-width: 767px) {
.flex-thumbnails > .flex-thumbnails__wrap {
margin-bottom: 0;
}
}
/* A gallery tile. It opens a lightbox rather than going anywhere, so it is a
* button - which means undoing the browser's own button styling, and giving
* the shape box a display, since a span is inline by default. */
.flex-thumbnails__tile {
display: block;
width: 100%;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.flex-thumbnails__tile > .flex-thumbnails__img {
display: block;
}
/* A cue that the tile does something, since there is no caption to say so. */
.flex-thumbnails__tile > .flex-thumbnails__img > .flex-thumbnails__image {
transition: transform .3s ease-in-out;
}
.flex-thumbnails__tile:hover > .flex-thumbnails__img > .flex-thumbnails__image,
.flex-thumbnails__tile:focus-visible > .flex-thumbnails__img > .flex-thumbnails__image {
transform: scale(1.06);
}
/* The lightbox. One slide at a time, sized to the viewport rather than the
* image, so a tall photograph does not push the caption off the screen.
*
* overflow is stated because slick's default arrow positions sit 25px outside
* the slider, which pushed the body 25px wider than itself and put a
* horizontal scrollbar across the dialog. The arrows are inside it now, but
* nothing in a lightbox should scroll sideways in any case. */
/* No panel: the image sits straight on the darkened page. The dialog carried
* `section--white`, which painted it white; that is off the markup now and the
* background and border are stated here so nothing else can paint it either. */
.cwb-gallery .modal-content {
background: transparent;
border: 0;
box-shadow: none;
/* `.modal-content{min-height:100vh}` in this stylesheet makes every modal
* as tall as the window below 768px, which leaves a centred dialog nothing
* to centre within - it filled the screen and sat against the top. */
min-height: 0;
}
.cwb-gallery .modal-body {
padding: 24px;
overflow: hidden;
}
.cwb-gallery .cwb-gallery__caption {
color: #fff;
}
/* Darker than Bootstrap's own 0.5, so the page reads as put away rather than
* dimmed - the image is the only thing on a transparent dialog now. */
body.cwb-gallery-open .modal-backdrop.show {
--bs-backdrop-opacity: .85;
opacity: .85;
}
/* A stage of a fixed height, so the lightbox is the same size before an image
* has loaded, while it loads, and on every slide after it - see the note in
* app.js about what adaptiveHeight did instead.
*
* On the figure rather than the slide. Slick writes `display: inline-block`
* onto the slide as an inline style, which no rule can outscore, so a stage
* built there was never a flex container and its image sat at the top of it
* instead of in the middle. The figure is this element's own and slick does
* not touch it. */
.cwb-gallery__figure {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
margin: 0;
width: 100%;
}
/* The image.
*
* Three classes, because `.slick-slider .slick-slide img` sets max-height:40vh
* and object-fit:cover on every slide image on the site - which capped this at
* 40vh whatever was asked for, and would crop a photograph in a lightbox
* rather than show all of it. `contain` is the whole point here. */
.cwb-gallery .cwb-gallery__slider .cwb-gallery__image {
display: block;
width: auto;
max-width: 100%;
max-height: 52vh;
margin: 0 auto;
object-fit: contain;
}
/* Shorter stage on a desktop, where the window is wide rather than tall - and
* short enough that the dialog can always centre itself instead of running
* past the bottom of the window and being pinned to the top. The stage is the
* image plus room for a caption, so a slide with one is the same height as a
* slide without and the lightbox does not resize as you move through it. */
@media (min-width: 768px) {
.cwb-gallery__figure {
min-height: 58vh;
}
.cwb-gallery .cwb-gallery__slider .cwb-gallery__image {
max-height: 50vh;
}
}
.cwb-gallery__caption {
margin-top: 12px;
text-align: center;
}
/* Slick lays its track out with flex, so a slide has to be allowed to be as
* tall as its own image and caption. */
.cwb-gallery__slider .slick-slide {
height: auto;
}
/* The lightbox's own buttons - the two arrows and the close.
*
* Every one of them has to outscore something. `.slick-slider .slick-arrow`
* sets a transparent background and hides the arrows outright, and
* `.modal .btn-close` paints a white background with !important - which is why
* the close button has a class of its own rather than a second !important.
*
* Three classes for the arrows, not two: `.slick-slider .slick-arrow` is also
* two, and it lives in the compiled block at the foot of this file, so an
* equal score is settled by source order in its favour. */
.cwb-gallery .cwb-gallery__slider .cwb-gallery__nav,
.cwb-gallery .cwb-gallery__close {
position: absolute;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 2px solid #10171e;
border-radius: 50%;
background: #fff;
color: #10171e;
font-size: 22px;
line-height: 1;
cursor: pointer;
opacity: 1;
}
.cwb-gallery .cwb-gallery__slider .cwb-gallery__nav {
top: 50%;
transform: translateY(-50%);
}
.cwb-gallery .cwb-gallery__slider .cwb-gallery__nav--prev {
left: 0;
}
.cwb-gallery .cwb-gallery__slider .cwb-gallery__nav--next {
right: 0;
}
.cwb-gallery .cwb-gallery__close {
top: 0;
right: 0;
z-index: 3;
font-size: 18px;
}
/* Dimmed rather than recoloured, so it still reads as the same button.
* `.slick-slider .slick-arrow.slick-disabled` would otherwise grey the border
* and the glyph separately. */
.cwb-gallery .cwb-gallery__slider .cwb-gallery__nav.slick-disabled {
/* The background is restated because
* `.slick-slider .slick-arrow.slick-disabled` sets it transparent at the
* same three classes as the rule above, and wins on source order. */
background: #fff;
border-color: #10171e;
color: #10171e;
opacity: .3;
cursor: default;
}
/* A tile waiting on the Load more button. `.row > *` sets width and padding
* but no display, so [hidden] would hold on its own; it is stated because a
* later rule setting a display on the column would silently bring the tile
* back. */
.flex-thumbnails__wrap[hidden] {
display: none;
}
/* `.link .btn-link:after` gives every link on the site a right-pointing angle.
* This button does not go anywhere - it opens downwards and closes upwards -
* so it takes those two glyphs instead, keeping the family, position and
* spacing the shared rule already sets. The state comes from aria-expanded,
* which the handler is already maintaining, so nothing has to be toggled
* twice. */
.flex-thumbnails__more .btn-link.flex-thumbnails__more-btn:after {
content: "\f107";
}
.flex-thumbnails__more .btn-link.flex-thumbnails__more-btn[aria-expanded="true"]:after {
content: "\f106";
}
.flex-thumbnails__btn--title {
font-size: 14px;
margin-top: 8px;
margin-bottom: 0;
}
/* The caption is the link's own text, so it takes the section's Text Link
* Colour. Three classes and an element, which outweighs the two
* `.section--blue` rules further down that hardcode #fff and #6F96B7. */
.flex-thumbnails a.flex-thumbnails__btn .flex-thumbnails__btn--title {
color: var(--cwb-link, #6f96b7);
}
.flex-thumbnails a.flex-thumbnails__btn:hover .flex-thumbnails__btn--title {
color: var(--cwb-link-hover, #6f96b7);
}
.welcome--section {
border: none !important;
}
ul.small-items.ul-marker {
position: relative;
left: 15px;
}
.section {
position: relative;
}
.section--withBG.section--blue:before {
background: none;
}
/* A Section Background Image stands in for the colour profile's background
colour, and only that: text, headings, buttons and accent colours all still
come from the profile. Skipping the inline background-color covers most
profiles, but the 1. Brand profile is also written to .main-color and its
legacy .section--blue alias as a stylesheet rule, so it needs overriding
here. Listing every profile keeps this working if any of them is given a
stylesheet output later. */
.section--withBG.main-color,
.section--withBG.primary-color,
.section--withBG.secondary-color,
.section--withBG.tertiary-color,
.section--withBG.light-color,
.section--withBG.dark-color,
.section--withBG.section--blue {
background-color: transparent;
}
.carousel-control-next,
.carousel-control-prev {
background: #0c0b0b;
height: 30px;
border-radius: 50px;
width: 30px;
top: 50%;
}
.carousel-control-prev-icon {
width: 20px;
}
.carousel-control-next-icon {
width: 20px;
}
.link .btn-primary {
color: #fff
}
.card.horizontal--card .component.link .btn-primary {
color: #fff;
}
.section--blue .card.horizontal--card .component.link .btn-primary {
color: #6f96b7;
}
.section--blue .flex-thumbnails__btn--title {
color: #fff;
}
.section--blue .card-body .flex-thumbnails__btn--title {
color: #6F96B7;
}
.row>div>.pt-4:first-child {
padding-top: 0!important;
}
.booking-sec .form-group.fake-select .btn:hover {
color: #3c444f;
}
.styled-input input:focus~label,
.styled-input input:valid~label,
textarea:focus~label,
textarea:valid~label,
input:optional:focus~label,
input:optional:valid~label {
font-size: .75em;
color: #727271;
top: 3px;
-webkit-transition: all .125s ease;
transition: all .125s ease;
left: 3px;
padding: 0 0 0 11px;
}
.styled-input label,
.styled-input input:optional~label {
color: #727271;
padding: 11px;
position: absolute;
top: 0;
left: 0;
-webkit-transition: all .25s ease;
transition: all .25s ease;
pointer-events: none;
right: 0;
font-size: 16px;
}
.video_wrapper {
padding-top: 0!important;
}
.welcome--section {
border-top: 0;
}
/* ==========================================================================
07. ShiftNav overrides
========================================================================== */
div#shiftnav-main {
top: 75px;
width: 100vw;
left: 0;
right: 0;
max-width: 100%;
}
@media screen and (max-width: 959px) {
html #shiftnav-toggle-main~#wpadminbar {
top: 0 !important;
}
}
h3.shiftnav-menu-title.shiftnav-site-title {
display: none;
}
.shiftnav:after {
box-shadow: none !important;
}
span.shiftnav-submenu-activation.shiftnav-submenu-activation-open,
.shiftnav.shiftnav-skin-standard-dark li.menu-item .shiftnav-submenu-activation {
background: none!important;
border: none!important;
}
.shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu li.menu-item > .shiftnav-target {
text-shadow: none !important;
}
.shiftnav ul.shiftnav-menu li.menu-item > .shiftnav-target,
.shiftnav ul.shiftnav-menu li.shiftnav-retract > .shiftnav-target {
padding: 20px 25px 20px 14px;
}
.shiftnav.shiftnav-shiftnav-main ul.shiftnav-menu li.menu-item > .shiftnav-target,
.shiftnav.shiftnav-shiftnav-main ul.shiftnav-menu li.menu-item > .shiftnav-submenu-activation {
border-top: 1px solid #fff;
border-bottom: 0;
text-transform: capitalize;
}
nav.shiftnav-nav>ul>li>ul>li>a {
background: rgba(0, 0, 0, .1)!important;
padding-left: 30px !important;
}
nav.shiftnav-nav>ul>li>ul>li>ul>li>a {
background: rgba(0, 0, 0, .3)!important;
}
.shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu ul.sub-menu ul.sub-menu li.menu-item > .shiftnav-target {
padding-left: 50px !important;
}
nav.shiftnav-nav>ul>li>ul>li>ul>li>ul>li>a {
background: rgba(0, 0, 0, .6)!important;
}
div#shiftnav-main ul {
margin: 0!important;
padding: 0!important;
background: none;
}
#shiftnav-toggle-main {
transform: translate(-15px, 10px)!important;
border: 2px solid;
border-radius: 3px;
padding: 2px 5px!important;
}
div#shiftnav-toggle-main>button {
padding: 5px 5px!important;
}
nav.shiftnav-nav>ul>li>span.shiftnav-submenu-activation.shiftnav-submenu-activation-open:before,
nav.shiftnav-nav>ul>li>span.shiftnav-submenu-activation.shiftnav-submenu-activation-close:before {
content: '';
border: 2px solid #fff;
position: absolute;
height: 42px;
width: 42px;
border-radius: 50%;
right: 3px;
}
span.shiftnav-submenu-activation {
width: 100% !important;
max-width: 100% !important;
justify-content: flex-end !important;
}
span.shiftnav-submenu-activation.shiftnav-submenu-activation-open,
span.shiftnav-submenu-activation.shiftnav-submenu-activation-close {
max-width: 100% !important;
width: 100% !important;
z-index: 99;
}
span.shiftnav-submenu-activation.shiftnav-submenu-activation-open > i,
span.shiftnav-submenu-activation.shiftnav-submenu-activation-close > i,
span.shiftnav-submenu-activation i.fa {
left: initial !important;
right: 17px;
}
.shiftnav li.menu-item .shiftnav-submenu-activation {
right: 8px !important;
}
.shiftnav-sub-always > a.shiftnav-target,
a.shiftnav-target.contact-btn {
display: none !important;
}
a.shiftnav-target.Custom-link {
border-top: 0 !important;
padding: 6px 15px !important;
font-size: 16px;
}
.btn-radius {
border-radius: .25rem;
}
/* ==========================================================================
08. Forms, Gravity Forms, and booking flows
========================================================================== */
/* Gravity Forms baseline field controls */
.gform_wrapper input:not([type="button"]):not([type="checkbox"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="radio"]):not([type="reset"]):not([type="submit"]),
.gform_wrapper select,
.gform_wrapper textarea {
margin-top: 0;
margin-bottom: 0;
padding: 10px 10px;
border: 2px solid #10171e;
border-radius: 4px;
}
.gform_wrapper.gform_legacy_markup_wrapper ul.gform_fields li.gfield {
margin-top: 0;
margin-bottom: 24px;
}
.gform_wrapper .form-spacer {
display: none;
}
.gform_wrapper input:not([type="button"]):not([type="checkbox"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="radio"]):not([type="reset"]):not([type="submit"]),
.gform_wrapper select {
min-height: 52px;
}
.gform_wrapper.gform_legacy_markup_wrapper.gf_browser_chrome select,
.gform_wrapper.gform_legacy_markup_wrapper .ginput_complex select,
.gform_wrapper.gform_legacy_markup_wrapper.gf_browser_chrome .ginput_complex select,
.gform_wrapper.gform_legacy_markup_wrapper.gf_browser_chrome ul.gform_fields li.gfield div.ginput_complex span.ginput_left select,
.gform_wrapper.gform_legacy_markup_wrapper.gf_browser_chrome ul.gform_fields li.gfield div.ginput_complex span.ginput_right select,
.gform_wrapper.gform_legacy_markup_wrapper .field_sublabel_hidden_label .ginput_complex.ginput_container select {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
padding: 10px 10px;
}
.gform_wrapper.gform_legacy_markup_wrapper.gf_browser_chrome ul.gform_fields li.gfield span.name_first,
.gform_wrapper.gform_legacy_markup_wrapper.gf_browser_chrome ul.gform_fields li.gfield span.name_middle,
.gform_wrapper.gform_legacy_markup_wrapper.gf_browser_chrome ul.gform_fields li.gfield span.name_last {
padding-top: 0;
}
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
color: #6c757d;
opacity: .5;
}
.gform_wrapper select.is-placeholder,
.gform_wrapper select:has(option.gf_placeholder:checked),
.gform_wrapper .name_prefix_select select:has(option:first-child:checked) {
color: rgba(108, 117, 125, .5);
}
.gform_wrapper select option {
color: #10171e;
}
.gform_wrapper select option.gf_placeholder,
.gform_wrapper .name_prefix_select select option:first-child {
color: rgba(108, 117, 125, .5);
}
.gform_wrapper .gfield_checkbox .gchoice {
display: flex;
align-items: center;
gap: 12px;
}
.gform_wrapper .gfield_checkbox .gfield-choice-input[type="checkbox"] {
display: inline-grid;
place-content: center;
flex: 0 0 32px;
width: 32px;
min-width: 32px;
height: 32px;
min-height: 32px;
margin: 0;
padding: 0;
border: 0;
border-radius: 3px;
appearance: none;
-webkit-appearance: none;
background-color: #c8c8c8;
cursor: pointer;
}
.gform_wrapper.gform_legacy_markup_wrapper.gf_browser_chrome .gfield_checkbox li input[type="checkbox"] {
margin-top: 0;
}
.gform_wrapper .gfield_checkbox .gfield-choice-input[type="checkbox"]::before {
content: "";
width: 9px;
height: 15px;
margin-top: -2px;
border: solid #fff;
border-width: 0 3px 3px 0;
transform: rotate(45deg) scale(0);
transition: transform .12s ease-in-out;
}
.gform_wrapper .gfield_checkbox .gfield-choice-input[type="checkbox"]:checked {
background-color: #008a00;
}
.gform_wrapper .gfield_checkbox .gfield-choice-input[type="checkbox"]:checked::before {
transform: rotate(45deg) scale(1);
}
.gform_wrapper .gfield_checkbox .gfield-choice-input[type="checkbox"]:focus-visible {
outline: 2px solid #1e90ff;
outline-offset: 2px;
}
.gform_wrapper .gfield_checkbox .gfield-choice-input[type="checkbox"] + label {
margin: 0;
line-height: 1.3;
cursor: pointer;
}
.gform_wrapper .gfield_radio .gchoice {
display: flex;
align-items: center;
gap: 12px;
}
.gform_wrapper .gfield_radio input[type="radio"] {
display: inline-grid;
place-content: center;
flex: 0 0 32px;
width: 32px;
min-width: 32px;
height: 32px;
min-height: 32px;
margin: 0;
padding: 0;
border: 3px solid #c8c8c8;
border-radius: 50%;
appearance: none;
-webkit-appearance: none;
background-color: #fff;
cursor: pointer;
}
.gform_wrapper .gfield_radio input[type="radio"]::before {
content: "";
width: 18px;
height: 18px;
border-radius: 50%;
transform: scale(0);
transition: transform .12s ease-in-out;
background-color: #fff;
}
.gform_wrapper .gfield_radio input[type="radio"]:checked {
background-color: #008a00;
border-color: #008a00;
}
.gform_wrapper .gfield_radio input[type="radio"]:checked::before {
transform: scale(1);
}
.gform_wrapper .gfield_radio input[type="radio"]:focus-visible {
outline: 2px solid #1e90ff;
outline-offset: 2px;
}
.gform_wrapper .gfield_radio input[type="radio"] + label {
margin: 0;
line-height: 1.3;
cursor: pointer;
}
.gform_wrapper.gform_legacy_markup_wrapper.gf_browser_chrome ul.gform_fields li.gfield input[type="radio"],
.gform_wrapper.gform_legacy_markup_wrapper.gf_browser_chrome .gfield_radio li input[type="radio"] {
margin-top: 0;
}
.booking-sec .form-group.fake-select .btn:before {
top: 23%;
content: '';
font-family: 'Font Awesome 5 Free';
content: '\f105';
position: absolute;
right: 16px;
font-size: 20px;
}
.booking-sec .form-group.fake-select .btn {
font-weight: 600;
padding: 15px 35px 15px 15px;
text-align: left;
border-color: #3c444f;
position: relative;
max-width: 99%;
overflow: hidden;
}
@media (min-width: 992px) {
.booking-sec {
margin-top: 0px!important;
}
}
.fake-select .btn-primary.form-step__select-modal {
min-width: 100px;
text-align: left;
padding: 16px 25px 16px 16px;
font-weight: 600;
}
.booking-sec .forminput.filled-chk .icon {
visibility: visible;
margin-top: 6px!important;
}
a.form-text.text-muted.form__add_child.form__add_child_2:after {
content: '\f105';
font-family: 'Font Awesome 5 Free';
padding-left: 10px;
text-decoration: none;
position: absolute;
right: -20px;
}
a.form-text.text-muted.form__add_child.form__add_child_2 {
font-size: 18px;
color: #6f96b7;
text-decoration: underline;
position: relative;
}
.form-step>.col-lg-8:nth-child(2) {
margin-top: 25px;
}
.form-step>.col-lg-8>.col-lg-12 {
margin-top: 30px;
}
ul.select__event .stand-first:after {
display: none;
}
.component.content.content--single a {
padding: 0 30px;
border: 3px solid #6f96b7;
font-weight: 700;
background: #6f96b7;
color: #fff;
min-width: 90px;
font-size: 17px;
line-height: 19px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 44px;
margin-top: 20px;
}
.section--white.pq-success {
padding: 80px 0;
}
section#pq-form .col,
section#pq-form .col .form__front {
padding: 0!important;
}
div#date_of_birth {
display: flex;
}
div#date_of_birth div:nth-child(2) {
margin-left: 15px;
margin-right: 15px;
}
@media screen and (max-width:768px) {
div#date_of_birth {
flex-direction: column;
}
div#date_of_birth>div:nth-child(2) {
margin-left: 0;
margin-right: 0;
}
}
@media screen and (max-width:991px) {
.hero.hero--centertext {
height: 375px;
min-height: initial;
padding: 0;
}
.video_wrapper {
padding-bottom: 100% !important;
}
img.headervideo-txt-img {
top: auto !important;
}
.pq-success .row {
margin: 0;
}
.enquirypagetemplate {
margin-top: 75px;
}
.bottom-bar.main-footer {
text-align: center;
}
._video_modal .modal-body.padding-bottom {
padding: 0px;
}
.bottom-bar.section--blue.main-footer {
text-align: center;
}
.form-step .row {
margin: 0;
}
.form__front {
padding: 15px;
}
div#date_of_birth {
flex-direction: column;
}
div#date_of_birth>div:nth-child(2) {
margin-left: 0;
margin-right: 0;
}
.section--white.pq-success {
padding: 80px 0 30px;
}
.component.form.form--multistep>div,
.component.form.form--multistep>div>div,
.component.form.form--multistep>div .row>div {
padding: 0;
}
.component.form.form--multistep>div .row {
margin: 0!important;
}
.eventpagetemplate .section--white .callout.section--blue .h5,
.eventpagetemplate h5,
.enquirypagetemplate .section--white .callout.section--blue .h5,
.enquirypagetemplate h5 {
font-size: 1.125rem;
margin-bottom: 1rem;
}
.modal-content .modal-body {
max-height: 80vh;
overflow-y: auto;
}
.booking-sec {
padding: 25px 0 !important;
}
div#contact-head-modal .modal-content .modal-body {
padding: 60px 15px 15px;
}
div#attendeesCont {
max-width: 160px;
}
}
.form__add_child_3:before {
content: '\f105';
position: absolute;
font-family: 'Font Awesome 5 Free';
right: -15px;
}
.form__add_child {
font-size: 18px;
text-decoration: underline;
position: relative;
}
.form-step[data-step='4'] .col.col-sm-10 {
padding: 0;
}
.form-step__controls.link.mt-3>a.mt-3 {
margin-top: 0!important;
}
.form__section>.form-text {
font-weight: 600;
font-size: 16px;
}
.form__section {
margin-top: 20px!important;
}
img.form__spinner {
position: absolute;
max-height: 12px;
}
.d-flex {
display: flex;
}
.link .btn-primary.btn-primary--border {
border-radius: 4px;
}
.modal .booking-sec {
margin-top: 0;
}
a.btn-radius.btn-primary.change-form-step {
color: white;
}
header .navbar-nav>.nav-item .nav-link {
padding: 3px !important;
}
.section .slick-slider .slick-arrow {
background: 0 0;
color: #10171e;
border-color: #10171e;
}
.section.section--blue .slick-slider .slick-arrow {
background: 0 0;
color: #fff;
border-color: #fff;
}
.form-step__controls.link {
width: 100%;
}
._video_modal .modal-dialog {
min-width: 60%;
}
.section .slick-slider .slick-arrow {
background: #fff;
color: #000;
border-color: #000;
}
.section.section--blue .slick-slider .slick-arrow {
background: #fff;
color: #000;
border-color: #000;
}
.form-step__controls.link {
display: flex;
justify-content: space-between;
}
div#contact-head-modal .section--white {
border-radius: 10px 10px 0 0;
}
.section .slick-slider .slick-arrow.slick-disabled,
.section.section--blue .slick-slider .slick-arrow.slick-disabled {
color: rgba(150, 150, 150, .5);
border-color: rgba(150, 150, 150, .5);
background-color: transparent;
}
.ubermenu-main .ubermenu-item-level-0>.ubermenu-target {
border-bottom: 4px solid transparent;
}
.menu-title:after {
content: '';
height: 2px;
width: 35px;
background: #007DBA;
position: absolute;
bottom: -6px;
margin-top: 12px;
}
.menu-title .ubermenu-target-title {
font-size: 30px;
}
.menu-title-without .ubermenu-target-title {
font-size: 30px;
}
.menu-title:hover {
background: none!important;
}
.right-image-with-text {
margin-top: 0;
}
li#menu-item-3777 {
margin: 0;
}
a.ubermenu-target.ubermenu-target-with-image.ubermenu-item-layout-default.ubermenu-item-layout-image_above.right-image-with-text {
margin: 0;
}
ul#mid-menu li a:after {
display: none;
}
.ubermenu>.ubermenu-nav>li>a {
border-bottom: 4px solid transparent!important;
}
.ubermenu-main .ubermenu-nav .ubermenu-item.ubermenu-item-level-0>.ubermenu-target:hover {
border-bottom: solid 4px #fff !important;
}
._video_modal .modal-body.padding-bottom {
padding: 100px 25px 25px;
}
._video_modal .btn-close {
background: white!important;
}
a.btn-radius.btn-primary.change-form-step,
a#form-enquiry-main-register {
color: white;
}
.form-step__controls.component.link .btn-primary {
border-radius: 4px;
color: white;
}
form-group.fake-select.form-validation-row.forminput>.btn {
padding: 15px;
text-align: left;
font-weight: 600;
}
div#contact-head-modal .form__front {
padding: 0!important;
}
section.section.full-short-text p {
max-width: 85%;
margin: auto;
}
.single-list li:after {
background: transparent !important;
}
.single-list li {
padding-left: 0px !important;
}
.drish-nestedsubmenu+.ubermenu-submenu>ul {
max-width: 1140px;
}
.ubermenu .left-menu>ul>li>a,
.ubermenu .ubermenu-tabs-group>li>a {
display: flex;
flex-direction: column;
color: #fff;
align-items: start;
justify-content: center;
padding: 15px 25px;
}
.ratio>iframe+figcaption {
padding-left: 30px;
}
.booking-sec .form-group.fake-select .btn>.btn-link:after {
display: none;
}
.header>.container-fluid #mid-menu li {
filter: none!important;
}
.darkHeader a.ubermenu-target.ubermenu-item-layout-default.ubermenu-item-layout-text_only.contact-btn {
filter: none;
}
.full-width-section .callout-img .img-overlay {
padding: 50px 0;
}
.step1-btns {
display: inherit !important;
}
a.m-0.btn-primary.btn-back.btn-primary--border {
color: #6f96b7;
}
a.m-0.btn-primary.btn-back.btn-primary--border:hover {
color: #c41f2f;
}
.booking-modal .modal-content,
#contact-prospectus-modal .modal-content {
border-radius: 0;
}
.custom_radio {
margin-top: 10px;
}
div#contact-head-modal .modal-content {
border-radius: 0;
}
div#contact-head-modal .modal-content .modal-body {
padding: 60px 30px 30px;
}
.styled-input input:optional:focus+label,
.styled-input input.option_input_txt+label {
font-size: 12px;
}
.onlyheader--padding .booking-sec {
padding: 35px 80px;
}
#contact-head-modal .booking-sec {
padding: 35px 80px;
}
.event-step1 {
display: inherit !important;
}
.crousel-slide-image {
height: 360px;
width: 100%;
object-fit: cover;
}
.ubermenu.ubermenu-transition-slide .ubermenu-active>.ubermenu-submenu.ubermenu-submenu-type-mega,
.ubermenu:not(.ubermenu-transition-slide) .ubermenu-submenu.ubermenu-submenu-type-mega {
max-height: initial!important;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
div#herovideo-modal .modal-content {
height: auto;
}
#herovideo-modal iframe {
height: 50vh !important;
}
.bottom-step .linkcard a {
border-color: white;
color: white;
}
.selectschool .modal-dialog .modal-body {
border-radius: 0;
}
.full-width-section .row>.heading {
padding: 0;
}
.section--blue .section--white .btn-primary.btn-primary--border:hover {
background: none!important;
}
section.full-width-section .callout-img .img-overlay {
position: relative;
}
.policy-btn {
margin-top: 10px;
}
.enquirypagetemplate .error-input .btn-primary {
border-color: #ff5f5f !important;
}
.styled-input input:optional~ul~label {
font-size: 12px;
top: -5px;
}
.ubermenu>ul>li>div>ul>li:nth-child(2) a:hover {
background: none!important;
}
.ubermenu>ul>li>div>ul>li:nth-child(2) li:first-child {
margin: 0!important;
}
.TopBottomBorder {
border: none !important;
}
header .logo-img img {
max-width: 250px;
width: auto;
padding: 10px 0;
}
.card.horizontal--card .col-7 .card-body {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.modal .btn-close {
background: #fff!important;
}
.section--blue .section--grey.horizontal--card .link .btn,
.section--blue .section--white.horizontal--card .link .btn {
color: #6F96B7;
}
.section--blue .section--white .list--IconWithText-list .link .btn {
color: #6F96B7;
}
.section--blue .triangle .link .btn-primary.btn-primary--border {
margin-top: 0!important;
}
.section--blue .triangle .icon-with-heading .icon>div {
color: #fff;
background: #c41f2f;
}
.section--blue .triangle .link {
display: block!important;
float: left;
width: 100%;
}
.active-link,
a {
font-size: 1.125rem;
font-weight: normal;
text-decoration: none !important;
font-size: 16px;
color: #6f96b7;
}
@media screen and (min-width:992px) {
div#shiftnav-toggle-main {
display: none;
}
}
p a {
font-weight: 400;
font-size: 16px;
}
.triangle:last-child:after {
display: none;
}
.section .section,
.section .section .container-fluid {
padding-bottom: 0;
}
.hero {
min-height: 450px;
}
.expand-list li {
margin-bottom: 15px;
}
ul.expand-list {
position: relative;
left: -15px;
}
@media screen and (min-width:960px) and (max-width:1100px) {
.ubermenu>ul>li>a {
font-size: 13px!important;
}
}
.header .navigation-bar .current-menu-item {
background: #6f96b7!important;
}
.height-init {
height: initial !important;
}
section.container-width {
max-width: 1140px !important;
margin: auto;
}
.section--blue .filters .filters__item a.filter {
color: #fff;
}
.middle-content-area {
display: flex;
height: 100%;
align-items: center;
}
.container-width .slick-carousel {
width: 97%;
margin: auto;
}
.ubermenu>ul>li>div>ul>li:nth-child(2) a>.ubermenu-target-title {
font-size: 18px;
line-height: 22px;
color: #6F96B7;
}
ubermenu>ul>li>div>ul>li:nth-child(2) a>.ubermenu-target-title:after {
content: "\f105";
font-family: 'Font Awesome 5 Free';
padding-left: 10px;
font-size: 20px;
}
.ubermenu>ul>li>div>ul>li:nth-child(2) a>.ubermenu-target-description {
padding-top: 0!important;
margin-top: -18PX;
}
.hero .overlay {
position: relative!important;
padding: 30px;
}
@media screen and (min-width:991px) {
.bg-video-wrap {
min-height: 450px;
}
}
.ubermenu>ul>li>div>ul>li:nth-child(2) a>.ubermenu-target-title:after {
font-family: 'Font Awesome 5 Free';
margin-left: 5px;
font-size: 14px;
content: '\f061';
}
.img-overlay-middle {
color: white;
position: relative;
}
.animated {
animation-duration: 1.5s !important;
transition-delay: 05ms !important;
}
.breadcrumb-wrap {
width: 100%;
margin: 0;
}
.breadcrumb-wrap--header .breadcrumb {
margin: 0;
padding: 1rem 0;
}
.form__title {
font-size: 30px !important;
}
.table-with-multi-cell td,
.table-with-multi-cell th {
border-right: 1px solid #ddd;
}
.flexible-content-slider .slick-slider--with-icon .slick-arrow.slick-prev {
left: 15px;
}
.flexible-content-slider .slick-slider--with-icon .slick-arrow.slick-next {
right: 15px;
}
.link .btn-link-chevron {
padding: 0;
text-decoration: none;
font-weight: 700;
position: relative;
text-align: left;
padding-right: 15px;
color: #6f96b7;
font-size: 18px;
}
.link .btn-link-chevron:hover {
color: #dd3333;
}
.ubermenu .ubermenu-item-level-0.ubermenu-item.ubermenu-current-menu-item>a {
border-bottom: solid 4px #fff !important;
}
.ubermenu>.ubermenu-nav>li.ubermenu-current-menu-ancestor>a {
border-bottom: solid 4px #fff !important;
}
ul li a {
font-size: 16px;
font-weight: 400;
}
div#form2DateTimeModal .choose-a-school {
width: 75%;
max-width: 910px;
}
.choose-a-school .modal-link-list ul {
padding: 0;
display: flex;
flex-wrap: wrap;
}
.choose-a-school .modal-link-list ul li {
list-style: none;
margin: 8px;
background-color: white!important;
border-radius: 3px;
-webkit-box-shadow: 0 0 30px rgb(16 23 30 / 15%);
box-shadow: 0 0 30px rgb(16 23 30 / 15%);
width: 30.5%;
padding: 0;
}
.choose-a-school .modal-link-list ul li img {
height: 120px;
object-fit: cover;
border-radius: 3px 3px 0 0;
}
.choose-a-school .modal-link-list ul li p {
padding: 15px!important;
}
.choose-a-school .modal-header {
text-align: center;
border-bottom: 0px;
}
.choose-a-school .modal-body {
padding: 10px 80px 30px!important;
}
/* ==========================================================================
09. WPBakery content components
========================================================================== */
/* Multiple locations */
.mutiple-locations-label {
font-weight: 700;
margin-bottom: 15px;
color: #00205c;
}
ul.multi-schools {
margin-bottom: 0;
}
ul.multi-schools li {
margin-bottom: 8px;
}
ul.multi-schools li.active a:after,
ul.multi-schools li a:hover:after {
content: "\f105";
margin-left: 7px;
font-family: "Font Awesome 5 Free";
}
ul.multi-schools li.active a,
ul.multi-schools li a:hover {
border-bottom: 2px solid #00205c;
}
.multi-schools li a:hover {
color: #00205c;
}
.location-address {
color: #00205c;
}
.refer-link {
font-size: 14px !important;
margin-left: 4px !important
}
.phone-icon {
font-size: 14px !important;
}
.school-name,
.school-name a {
list-style: none !important;
font-weight: 700;
color: #00205c;
line-height: 24px;
}
.school-img {
height: 100% !important;
}
.multi-schools {
padding: 0 !important;
margin-top: 16px;
}
.school-numbering {
font-size: 13px !important;
color: #a5a0a0 !important;
}
.option-input:before {
display: flex!important;
font-size: 14px!important;
align-items: center;
justify-content: center;
}
li#field_12_6,
li#field_11_6,
li#field_11_7,
li#field_13_6,
li#field_13_7 {
padding-top: 20px;
}
select#input_9_10,
select#input_8_10 {
width: 100%;
}
.no-href-link {
pointer-events: none;
}
.default-space-card-body .card .card-body .component {
margin-top: 20px;
}
.default-space-card-body .card .card-body .component:first-child {
margin-top: 0;
}
.linkcard .card--bordered .btn.btn-link.simple-link.h5 {
color: #fff;
}
.ubermenu-tabs>.ubermenu-tabs-group>li>a {
font-weight: 700;
}
.school-iframe {
max-height: 350px;
min-height: 350px;
}
@media screen and (max-width:991px) {
.choose-a-school .modal-link-list ul li {
width: calc(50% - 18px);
}
}
@media screen and (max-width:768px) {
div#form2DateTimeModal .choose-a-school {
width: 100%;
}
.choose-a-school .modal-body {
padding: 15px!important;
}
}
@media screen and (max-width:576px) {
.choose-a-school .modal-link-list ul li {
width: 100%;
}
}
.TopBorder--dark {
border: none !important;
}
.category .breadcrumb {
padding-top: 25px;
}
.single-post .breadcrumb {
padding-top: 25px;
}
.third-level+div>ul>li li.submenu-active>a+div {
left: initial!important;
right: 0;
width: 60%!important;
}
.third-level+div>ul>li li.submenu-active>a,
.third-level+div>ul>li li>a {
max-width: 35%!important;
border-bottom: 0px!important;
white-space: nowrap;
}
.third-level+div>ul>li {
width: 100%!important;
}
.third-level+div>ul>li li>a+div {
right: 0!important;
left: initial!important;
width: 60%!important;
}
.third-level+div>ul>li li>a:hover,
.third-level+div>ul>li li.ubermenu-active>a {
background: #6f96b7;
}
.third-level+div>ul>li li.ubermenu-active>a:after {
border-left: 15px solid #6f96b7 !important;
content: '';
position: absolute;
height: 0;
width: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
right: -15px;
top: 0;
}
.third-level+div>ul>li li.submenu-active>a,
.third-level+div>ul>li li>a {
max-width: 35%!important;
border-bottom: 0px!important;
white-space: nowrap;
display: flex!important;
padding: 15px 20px 15px 25px!important;
flex-direction: column;
justify-content: center;
}
.ubermenu-tabs .ubermenu-active .background-active.big-hover:after {
border-left: 15px solid #6f96b7 !important;
content: '';
position: absolute;
height: 0;
width: 0;
border-top: 38px solid transparent;
border-bottom: 38px solid transparent;
right: -15px;
top: 0;
}
.ubermenu .ubermenu-item>a.ubermenu-target.big-hover {
padding: 15px 25px!important;
}
.third-level+div>ul>li>ul>li>ul>li>ul>li>a span {
white-space: initial!important;
}
.third-level+div>ul>li>ul>li>ul>li>ul>li>a+div>ul>li {
width: 100%!important;
}
.third-level+div>ul>li>ul>li>ul>li>ul>li>a+div>ul>li>ul>li>a {
width: 100%!important;
max-width: 100%!important;
}
.third-level+div>ul>li>ul>li>ul>li>ul>li>a+div {
padding: 10px 20px!important;
}
.ubermenu .ubermenu-submenu .ubermenu-item.ubermenu-active>.ubermenu-submenu-type-flyout {
top: 0;
bottom: 0;
position: absolute;
}
.ubermenu .ubermenu-item .ubermenu-submenu-type-mega .ubermenu-item.ubermenu-has-submenu-flyout {
position: static;
}
.ubermenu .ubermenu-active .ubermenu-submenu .ubermenu-submenu-type-stack {
visibility: visible;
opacity: 1;
display: block;
position: relative;
}
section.section.section--blue.home-post .sbsw-item-bottom-content {
background: #00205c !important;
padding-bottom: 8px;
}
.home-post [id^=sb-wall].sb-wall .sbsw-item-media img {
display: block;
max-width: 100%;
height: 280px;
min-height: 280px;
width: 100%;
}
.home-post .sbsw-item-footer {
display: none;
}
.section--blue .link a.btn.btn-primary.btn-primary--border {
color: #fff;
}
.school-iframe.h-100:hover img {
opacity: 0.5;
background: #01379b;
border: #013087 solid 2px;
}
.school-iframe.h-100 .view-more {
display: none;
}
.school-iframe.h-100:hover .view-more {
display: block;
position: absolute;
top: calc( 50% - 21px);
left: calc( 50% - 62px);
border-radius: 5px;
background: #00205c;
color: #fff;
padding: 5px 10px;
border: none
}
.school-iframe.h-100 {
position: relative;
}
.school-iframe.h-100 a {
width: 100%;
height: 100%;
float: left;
}
@media only screen and (max-width:576px) {
ul.multi-schools li {
word-wrap: break-word;
}
.school-iframe.h-100 .view-more {
display: block;
position: absolute;
top: calc( 50% - 21px);
left: calc( 50% - 62px);
border-radius: 5px;
background: #00205c;
color: #fff;
padding: 5px 10px;
border: none
}
.school-iframe.h-100 img {
opacity: 0.5;
background: #01379b;
border: #013087 solid 2px;
}
}
.modal-overlay a.btn-link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
padding-right: 10px;
color: #6f96b7;
margin: 0;
right: 10px;
width: 100%;
padding-right: 0;
}
.modal-overlay.sm--modal a.btn-link i {
height: 20px;
width: 20px;
font-size: 12px;
border-color: #6f96b7;
color: #6f96b7;
}
.modal-overlay a.btn-link i {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 35px;
width: 35px;
border: 2px solid;
border-radius: 50%;
text-align: right;
margin-bottom: 10px;
margin-right: 0;
}
.card.horizontal--card.horizontal--card-sm .modal-overlay.sm--modal a:after {
content: none !important
}
.booking-sec .filled-chk #schoolCont {
white-space: break-spaces;
}
.boxPadding-0 {
padding: 0;
}
#header_remind_popup {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--cognita-header-popup-background, #fff);
text-align: center;
}
#header_remind_popup.is-hidden {
display: none !important;
}
#header_remind_popup .btn-close {
background: none;
}
#header_remind_popup button.btn-close {
position: absolute;
right: 10px;
top: 10px;
z-index: 1;
opacity: 1;
}
div#header_remind_popup .nav-col {
position: relative;
}
div#header_remind_popup .header-popup-inner {
position: relative;
}
div#header_remind_popup .nav-col .header-popup-content-div {
padding: 8px 56px 8px 36px;
line-height: 30px;
font-size: var(--cognita-header-popup-title-size, 18px);
font-weight: 600;
font-family: inherit;
margin: 0;
color: var(--cognita-header-popup-title-color, inherit);
}
div#header_remind_popup .nav-col .header-popup-content-div p {
font-size: var(--cognita-header-popup-content-size, inherit);
color: var(--cognita-header-popup-content-color, inherit);
margin: 0;
}
div#header_remind_popup .nav-col .header-popup-content-div p a,
div#header_remind_popup .nav-col .header-popup-content-div .header-popup-cta {
color: var(--cognita-header-popup-content-color, inherit);
}
@media screen and (max-width: 767px) {
div#header_remind_popup .nav-col .header-popup-content-div {
padding-right: 48px;
padding-left: 16px;
}
}
.thumbitemDesc {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.center-button-flexible {
position: relative;
}
.btnBottom-flexible {
bottom: 9px;
width: 100%;
left: 0;
}
.section--blue .post-title-custom-post {
color: #fff;
}
.bottom-button-fixed .container-fluid {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.top-button-fixed .container-fluid {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.three-column-list .card-body {
min-height: 275px;
}
.two-image-button:hover .view-more {
display: block;
position: absolute;
top: calc( 35% - 21px);
left: calc( 50% - 62px);
border-radius: 5px;
background: #00205c;
color: #fff;
padding: 5px 10px;
border: none;
z-index: 999;
}
.two-image-button .view-more {
display: none;
}
.two-image-button:hover img {
opacity: 0.5;
background: #01379b;
}
.no-padding-container .container-fluid {
padding: 0 !important;
}
@media only screen and (max-width:576px) {
.two-image-button .view-more {
display: block;
position: absolute;
top: calc( 36% - 21px);
left: calc( 50% - 62px);
border-radius: 5px;
background: #00205c;
color: #fff;
padding: 5px 10px;
border: none;
z-index: 999;
}
.booking-sec .styled-input select{
width: 100% !important;
}
.two-image-button img {
opacity: 0.5;
background: #01379b;
}
.no-gap-mobile .boxPadding-0 {
margin-bottom: 0 !important;
}
.three-column-list .card-body {
min-height: auto !important;
}
}
select#school {
text-align: left;
}
@media (max-width: 959px){
.header-phone{
display: none !important;
}
}
@media (max-width: 767px){
#shiftnav-toggle-main.shiftnav-toggle-style-burger_only {
top: 11px;
}
.home .animation-mobile-drop{
display:block !important;
position: relative;
margin: -12px auto;
z-index: 999;
top: -58px;
}
#shiftnav-toggle-main .shiftnav-toggle-burger{
line-height: 26px !important;
}
.col-md-3.col-lg-3.col-3.main-logo {
margin-bottom: 15px;
}
.bg-video-wrap {
margin-top: 0 !important;
}
.darkHeader-down #shiftnav-toggle-main {
top: 9px !important;
}
.category .news--section .col-lg-4 , .blog .news--section .col-lg-4{
width: 100%;
}
.news--section .feature-image {
height: auto !important;
min-height: 200px !important;
}
.footer-bar .slick-slider .slick-slide img {
width: 100% !important;
}
.footer-bar .slick-slider .slick-list .slick-slide {
padding: 0 10px 0 25px;
}
.col-banner .banner_info::after {
right: initial !important;
left: -50vw;
width: 150vw !important;
}
.col-banner .banner_info {
padding: 44px 20px 78px 0;
}
.col-banner .banner_info_title {
font-size: 28px !important;
line-height: 33px !important;
}
.col-banner .banner_info_items{
flex-direction: column;
gap: 20px 0;
}
}
.Lmore {
text-align: center;
font-weight: bold;
margin-top: 12px;
cursor: pointer;
}
.header-phone {
color: #fff;
font-size: 16px;
font-weight: 400;
width: 100%;
text-align: right;
display: flex;
justify-content: end;
}
.header-mobile-phone a:after {
content: "\f105";
font-family: "Font Awesome 5 Free";
top: 2px;
margin-left: 4px;
position: relative;
}
.header-mobile-phone a {
color: #fff;
margin-left: 5px;
text-decoration: underline !important;
}
.header-phone a {
color: #fff !important;
margin-left: 5px;
font-size: 16px;
font-weight: 400;
}
.header-mobile-phone {
padding: 0px 0 0 15px !important;
font-size: 16px;
text-transform: capitalize;
margin-bottom: 20px !important;
}
.addition-mobile-phone {
margin-bottom: 200px !important;
}
.callout-img.halfcol--img{background-position: center;}
.tech-images .callout-img.halfcol--img {
height: auto;
}
.tech-images .leftBottom-content .heading .h5{
padding: 4px 10px 4px 10px;
}
.tech-images .callout-img .img-overlay>div {
width: auto;
}
.background-box .heading .h5:after {
content: "";
position: absolute;
left: 28px;
bottom: 10px;
width: 80px;
height: 6px;
background: #fff;
}
a.nolinkimage {
pointer-events: none;
}
.white-form {
background: #fff;
}
/* The form heading follows the section it sits in, like the rest of the form.
It was pinned to #262626, which fought whatever the colour profile set. */
.form-container .main-heading{color:inherit;}
.landing-form .banner_info::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 70vw;
height: 100%;
background-position: top right;
background-size: cover;
z-index: -1;
}
.banner_info {
position: relative;
padding: 97px 95px 154px 0;
}
.landing-form .container-fluid{
position: relative;
z-index: 1;
}
.landing-form .col-banner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-top: 54px;
margin-bottom: 54px;
}
.col-banner .banner_info_title {
position: relative;
font-family: "Chivo", sans-serif;
font-weight: 900;
font-size: 36px;
line-height: 43px;
color: #ffffff;
margin: 50px 0 30px 0;
text-transform: uppercase;
}
.col-banner .banner_toptitle {
margin: 46px 0 36px 0;
font-style: normal;
font-weight: 400;
font-size: 40px;
line-height: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: inline-block;
color: #ffffff;
}
/* The Flexible Content Gravity form block, and only that - nothing else emits
these two classes.
It used to force a white background, its own 34/38/50/38 padding and black
text, so the form ignored the colour profile of the section it sat in: on a
dark section it was a white card with black text whatever the profile said.
Background and text now come from the section, which Global Options already
drives, and the padding goes with the card it was insetting. Only the gap
below the form is left, since that is spacing rather than colour. */
.col-form .form-container {
min-height: auto;
margin-bottom: 24px;
}
.col-banner .banner_info_items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 0 30px;
}
.col-banner .banner_info_items_item {
gap: 0 12px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.col-banner .banner_info_items_item .item-text {
color: white;
font-weight: 300;
font-size: 20px;
}
.col-banner .banner_info_title::after {
content: '';
position: absolute;
height: 1px;
width: 70vw;
background: #ffffff80;
bottom: -9px;
right: 0;
}
.landing-form {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.landing-form #overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
opacity: 0.4;
}
.container-fluid.accreditation {
background: none;
width: 100%;
max-width: 100%;
padding-left: 12%;
padding-right: 12%;
margin-bottom:25px;
}
.accred img {
height: auto;
max-width: 100%;
}
.accreditation .slick-dots, .slick-next, .slick-prev {
position: absolute;
display: block;
padding: 0;
}
.accreditation .slick-prev {
left: -25px;
}
.accreditation .slick-next, .slick-prev {
font-size: 0;
line-height: 0;
top: 50%;
width: 30px;
height: 30px;
-webkit-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
transform: translate(0,-50%);
cursor: pointer;
color: transparent;
border: none;
outline: 0;
background: #000;
}
.accreditation .slick-prev:before {
content: '<';
}
.footer-bar .slick-next:before, [dir=rtl] .slick-prev:before {
content: '>';
}
.footer-bar .slick-next:before, .footer-bar .slick-prev:before {
font-size: 20px;
color: #fff;
}
.slick-next {
right: -25px;
}
.news--section .single-img .callout-img.halfcol--img{
height: auto;
min-height: auto;}
.news--section .feature-image {
height: 550px;
background-size: cover;
background-position: top center;
min-height: 550px;
margin: 0;
}
.news--section .feature-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
.single-post h1,
.single-global_blog h1,
.single-school_news h1 {
font-size: 35px;
line-height: 1.2;
font-weight: bold;
}
.single-post h2,
.single-global_blog h2,
.single-school_news h2 {
font-size: 30px;
line-height: 1.2;
font-weight: bold;
}
.single-post h3,
.single-global_blog h3,
.single-school_news h3 {
font-size: 25px;
line-height: 1.2;
font-weight: normal;
}
.single-post h4,
.single-global_blog h4,
.single-school_news h4 {
font-size: 20px;
line-height: 1.2;
font-weight: bold;
}
.single-post h5,
.single-global_blog h5,
.single-school_news h5 {
font-size: 16px;
line-height: 1.2;
font-weight: bold;
}
.blog-post .col-sm-12.col-md-10.col-lg-9.mx-auto {
width: 100%;
}
.data-target-div1 .caf-post-layout1 .caf-post-title {
background: none !important;
}
.school-news-box {
height: 100%;
display: flex!important;
justify-content: space-between;
flex-direction: column;
box-shadow: 0 0 30px rgba(16,23,30,.15);
}
.news--section .col-lg-4 a.btn.btn-link.btn-read-more , .blog .news--section .col-lg-4 a.btn.btn-link.btn-read-more {
padding: 0 30px !important;
margin-top: 10px;
display: flex;
min-width: 199px;
width: 200px;
margin: 20px auto;
text-align: center;
border-radius: 4px;
padding: 0 30px;
border: 3px solid #6f96b7;
font-weight: 700 !important;
font-size: 17px;
line-height: 19px;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 44px;
color: #6f96b7;
}
.news--section .col-lg-4 .article-list__body ,.blog .news--section .col-lg-4 .article-list__body {
padding: 18px;
}
.news--section .callout-img ,.blog .news--section .callout-img {
height: 200px;
min-height: 200px;
border-radius: initial;
}
@media (max-width: 992px){
.landing-form .banner_info::after{
right: initial;
left: -50vw;
width: 150vw;
}
.col-banner .banner_info_items{
flex-direction: column;
gap: 20px 0;
}
}
.section--blue .link a.btn.btn-primary.btn-primary--border{
background: none !important;
}
.section--blue .link a.btn.btn-primary.btn-primary--border:hover{
background: none !important;
}
.section--blue .triangle .link .btn-primary{
border: none !important;
color: #fff !important;
}
.section--blue .triangle .link .btn-primary:hover{
border: none !important;
color: #fff !important;
}
.triangle .link .btn-primary{
border: none !important;
color: #fff !important;
}
.triangle .link .btn-primary:hover{
border: none !important;
color: #fff !important;
}
.primary-color .link a.btn.btn-primary.btn-primary--border:hover {
background: none !important;
}
.primary-color .link a.btn.btn-primary.btn-primary--border {
background: none !important;
}
/* ==========================================================================
10. News, blog, categories, and pagination
========================================================================== */
/* Posts pagination */
.posts-pagination li a,
.posts-pagination li a:hover,
.posts-pagination li.active a,
.posts-pagination li.active span,
.posts-pagination li.disabled {
color: #fff;
text-decoration:none;
font-size: 18px;
}
.posts-pagination {
margin-top: 100px ;
text-align: center;
}
.posts-pagination li {
display: inline;
margin: 0 3px;
}
.posts-pagination li a,
.posts-pagination li a:hover,
.posts-pagination li.active a,
.posts-pagination li.active span,
.posts-pagination li.disabled {
border-radius: 3px;
cursor: pointer;
padding: 10px 15px 10px 15px !important;
padding: 0.75rem;
}
.pagination-ellipses {
padding:15px;
}
/** The Posts navigation function should have its title hidden for its users. */
h2.screen-reader-text {
display:none;
}
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.screen-reader-text:focus {
width: auto;
height: auto;
clip: auto;
white-space: normal;
}
.posts-navigation .nav-links {
display: flex;
justify-content: space-between;
}
/* single blog page next and previous buttons */
.blog-next-prev-links {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.blog-next-prev-links a {
display: flex;
justify-content: center;
align-items: center;
padding: 6px 30px !important;
font-weight: 400 !important;
border-radius: 3px;
color: #fff!important;
transition: all 0.3s ease;
line-height: 32px;
}
.blog-next-prev-links a:hover{
opacity: 0.9;
transition: all 0.3s ease;
}
/* single blog page content */
.post-content.news-blog-single-page p {
margin: 25px 0;
}
/* news/blog section and cards */
.blog .content-news-section>div, .category .content-news-section>div
{
height: 100%;
display: flex!important;
justify-content: space-between;
flex-direction: column;
}
/* Homepage Module News cards */
.card.card--white.d-flex-box {
padding-bottom: 10px;
height: 100%;
display: flex!important;
justify-content: space-between;
flex-direction: column;
}
/* Category bar padding */
section.category-tabs-bar {
padding: 10px;
}
/* Category Element Homa Page padding */
section.section.category-home-grid {
padding-top: 25px!important;
}
/* Homepage module View all button */
a.btn.btn-primary.catgrid-view-all-button {
min-width: 199px!important;
}
/* common category tabs bar */
.category-tabs-bar ul.filters li {
padding: 0 15px;
}
/* Single Blog Page next prev buttons */
.single-page-post-buttons.section--blue {
border-radius: 4px;
}
.blog-next-prev-links .single-page-post-buttons .fa.fa-chevron-left {
font-size: 9px;
margin-right: 3px;
margin-top: 1px;
}
.blog-next-prev-links .single-page-post-buttons .fa.fa-chevron-right {
font-size: 9px;
margin-left: 4px;
margin-top: 1px;
}
.footer-bar .slick-slider .slick-arrow{
background: none !important;
}
/* Header notification stacking */
.header .navigation-bar,
.header.header.darkHeader .navigation-bar {
z-index: 1040;
}
.remind-popup,
#header_remind_popup {
z-index: 1020;
}
.archive-news-breadcrumbs,
.single-post-breadcrumbs {
padding-top: 32px;
padding-bottom: 32px;
}
.has-header-layout-overlay.no-header-media .archive-news-breadcrumbs,
.has-header-layout-overlay.no-header-media .single-post-breadcrumbs {
padding-top: 202px;
}
.archive-news-breadcrumbs #crumbs,
.single-post-breadcrumbs #crumbs {
margin: 0;
}
@media (max-width: 767px) {
.archive-news-breadcrumbs,
.single-post-breadcrumbs {
padding-top: 24px;
padding-bottom: 24px;
}
.has-header-layout-overlay.no-header-media .archive-news-breadcrumbs,
.has-header-layout-overlay.no-header-media .single-post-breadcrumbs {
padding-top: 144px;
}
}
/* Search results */
.search-results-page {
padding-top: 0;
}
.has-header-layout-overlay.no-header-media .search-results-page {
padding-top: 170px;
}
.search-results-page .section {
padding-top: 40px;
}
.search-results-page .container-fluid {
max-width: 960px;
}
.search-page-header {
margin-bottom: 40px;
}
.search-page-header .page-title {
margin-bottom: 24px;
font-size: 35px;
line-height: 1.2;
font-weight: bold;
}
.search-form {
display: flex;
max-width: 640px;
gap: 12px;
}
.search-form .search-field {
flex: 1 1 auto;
min-width: 0;
height: 48px;
padding: 0 16px;
border: 1px solid rgba(16,23,30,.25);
}
.search-form .search-submit {
min-width: 140px;
height: 48px;
padding: 0 24px;
border: 0;
border-radius: 3px;
color: #fff;
background: #6F96B7;
font-weight: 700;
}
.search-results-list {
display: grid;
gap: 24px;
}
.search-result-card {
padding: 24px;
background: #fff;
box-shadow: 0 0 30px rgba(16,23,30,.12);
}
.search-result-card__type {
margin-bottom: 8px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
}
.search-result-card__title {
margin-bottom: 12px;
font-size: 24px;
line-height: 1.2;
}
.search-result-card__title a {
text-decoration: none;
}
.search-result-card__summary {
margin-bottom: 16px;
}
.search-result-card__highlight {
padding: 0 2px;
color: inherit;
background: rgba(201, 153, 51, .35);
}
.search-result-card__link {
padding-left: 0 !important;
font-weight: 600;
}
.search-results-page .no-results.search-no-results {
max-width: 720px;
padding: 24px;
background: #fff;
box-shadow: 0 0 30px rgba(16,23,30,.12);
}
.search-results-page .no-results.search-no-results .page-title {
margin-bottom: 12px;
font-size: 24px;
line-height: 1.2;
font-weight: 700;
}
.search-results-page .no-results.search-no-results p {
max-width: 640px;
}
/* 404 page */
.error-404-page {
padding-top: 0;
}
.has-header-layout-overlay.no-header-media .error-404-page {
padding-top: 170px;
}
.error-404-page .section {
padding-top: 40px;
}
.error-404-page .error-404 {
max-width: 760px;
padding: 40px;
box-shadow: 0 0 30px rgba(16,23,30,.12);
}
.error-404-page .page-header {
margin-bottom: 24px;
}
.error-404__eyebrow {
margin-bottom: 8px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
}
.error-404-page .page-title {
margin-bottom: 0;
font-size: 35px;
line-height: 1.2;
font-weight: bold;
}
.error-404-page .page-content p {
max-width: 640px;
}
.error-404-page .search-form {
margin: 24px 0;
}
.error-404__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.error-404__actions .btn {
margin: 0;
}
@media (max-width: 767px) {
.has-header-layout-overlay.no-header-media .search-results-page {
padding-top: 120px;
}
.has-header-layout-overlay.no-header-media .error-404-page {
padding-top: 120px;
}
.error-404-page .error-404 {
padding: 24px;
}
.search-form {
flex-direction: column;
}
.search-form .search-submit {
width: 100%;
}
}
.section--withBG .bg-overlay{
background: none !important;
}
.vc_row-has-fill .section .section--blue{
background: none !important;
}
/* hide shiftnav toggle menu for landing pages */
@media (max-width: 959px){
.page-template-page-landing div#shiftnav-toggle-main {
display: none;
}
.bg-video-wrap {
min-height: 600px;
}
.video_wrapper {
min-height: 600px;
}
}
.single-school_news h1 {
font-size: 35px;
line-height: 1.2;
font-weight: bold;
color: inherit;
}
.social-icons a:hover {
color: gray !important;
}
li.social-twitter-li {
width: 30px;
height: 30px;
margin-right: 10px;
}
li.social-twitter-li img {
margin: 4px 4px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
p.sub-title-big {
font-size: 38px !important;
line-height: 38px !important;
}
.three-columns-full .thumbitemDesc .component .btn{
min-width:auto;
}
.darkHeader .header-btns {
margin-top: 0;
}
.bg-video-wrap {
margin-top: -55px !important;
}
.darkHeader-top #shiftnav-toggle-main {
top: 11px !important;
}
.darkHeader .header-phone{
display: none;
}
.darkHeader-down #shiftnav-toggle-main {
top: 0 !important;
}
}
.container-arrow {
position: relative;
width: 24px;
height: 24px;
}
.container-arrow .chevron {
position: absolute;
width: 28px;
height: 8px;
opacity: 0;
transform: scale3d(0.5, 0.5, 0.5);
animation: move 3s ease-out infinite;
}
.container-arrow .chevron:first-child {
animation: move 3s ease-out 1s infinite;
}
.container-arrow .chevron:nth-child(2) {
animation: move 3s ease-out 2s infinite;
}
.container-arrow .chevron:before,
.container-arrow .chevron:after {
content: ' ';
position: absolute;
top: 0;
height: 100%;
width: 51%;
background: #fff;
}
.container-arrow .chevron:before {
left: 0;
transform: skew(0deg, 30deg);
}
.container-arrow .chevron:after {
right: 0;
width: 50%;
transform: skew(0deg, -30deg);
}
@keyframes move {
25% {
opacity: 1;
}
33% {
opacity: 1;
transform: translateY(30px);
}
67% {
opacity: 1;
transform: translateY(40px);
}
100% {
opacity: 0;
transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
}
}
.footer-cog-logo img.img-fluid.cognita-logo.w-100 {
width: auto !important;
}
.container-fluid.white-background-logo {
background: #fff;
width: 100%;
max-width: 100%;
}
.container-fluid.black-background-logo{
background: #37393A;
width: 100%;
max-width: 100%;
}
.footer-cog-logo img.img-fluid.cognita-logo.w-100 {
height:26px;
}
.container-fluid.gradinet-background-logo {
background: linear-gradient(90deg, rgba(5,112,183,1) 0%, rgba(26,143,156,1) 51%, rgba(27,168,125,1) 100%);
width: 100%;
max-width: 100%;
}
.container-fluid.no-logo-bar{
display: none;
}
.component.single-img.footer-cog-logo {
padding-top: 20px;
text-align:center;
padding-bottom: 20px;
}
.outer-circle-area {
display: flex;
align-items: center;
justify-content: space-between;
}
.area-inner-circle {
text-align: center;
width: 18%;
}
.area-inner-circle .area-circle {
width: 150px;
height: 150px;
background: #d9d9d9;
border-radius: 100px;
margin: 0 auto;
overflow: hidden;
}
.area-inner-circle .area-circle img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.area-inner-circle h3 {
font-size: 18px;
line-height: 28px;
text-transform: uppercase;
margin-top: 20px;
color: #20273d;
}
.area-inner-circle p {
line-height: 32px;
color: #20273d;
}
.outer-circle-area .component {
margin-top: 10px;
}
.outer-circle-area .component a {
color: #cda65f;
padding-right: 0;
}
.outer-circle-area {
position: relative;
}
.area-inner-circle::after {
content: '';
display: block;
position: absolute;
left: 40px;
top: calc(29% - 3px);
width: calc(94% - 48px);
z-index: -1;
border: 1px dashed #cda65f;
}
@media (max-width: 820px) {
.outer-circle-area {
display: block;
}
.outer-circle-area .component {
margin-top: 0px;
}
.area-inner-circle::after {
content: '';
display: block;
position: absolute;
left: 50%;
top: calc(3% - 3px);
width: 2px;
z-index: -1;
height: 86%;
}
.area-inner-circle {
text-align: center;
width: 100%;
margin-bottom: 40px;
}
}
.footer-col-four .body-small {
font-size: 18px;
font-weight: bold;
}
.card-header.section--blue-card {color:#fff;}
/* ==========================================================================
11. Tabs, overlays, and combined forms
========================================================================== */
/* Tabs element image overlay */
.tabs-image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Adjust overlay color and opacity */
opacity: 0; /* Initially hidden */
transition: opacity 0.3s ease-in-out; /* Smooth transition for opacity */
display: flex;
justify-content: center;
align-items: center;
}
.tabs-image-overlay:hover {
opacity: 1; /* Show overlay on hover */
}
.overlay-link-text {
color: #fff; /* Text color */
text-decoration: none;
font-size: 18px; /* Adjust font size */
font-weight: 700;
position: relative; /* Required for positioning arrow */
}
.overlay-link-text:hover {
color: #fff !important; /* Text color */
}
.combined-form .gform_heading h2 {
font-size: 26px;
}
.combined-form h3.gsection_title {
font-size: 26px;
}
.combined-form .gform_wrapper.gravity-theme .ginput_container_address span {
margin: 0 !important;
}
.combined-form .gform_wrapper.gravity-theme h1 {
font-size: 30px;
color: #662e87;
}
.combined-form .gform_wrapper.gravity-theme .gfield_description {
font-size: 18px !important;
}
.combined-form .gform_wrapper .gform_body .gform_fields input {
padding: 11px 9px !important;
}
.combined-form .ginput_container_checkbox input {
border-color: #00C07B !important;
background: #ffffff !important;
color: #ccc !important;
}
.combined-form .ginput_container_checkbox input.was-unchecked {
background: #ccc !important;
border-color: #ccc !important;
color: #fff !important;
}
.combined-form .ginput_container_checkbox input:checked {
background: #00C07B !important;
border-color: #00C07B !important;
color: #fff !important;
}
.combined-form .gform_wrapper.gravity-theme .gfield-choice-input:disabled+label {
padding: 0 0 0 11px !important;
}
.combined-form .gform_wrapper.gravity-theme .ginput_complex fieldset,
.combined-form .gform_wrapper.gravity-theme .ginput_complex span {
flex: 1 !important;
padding-right: 1% !important;
}
.combined-form .gform_wrapper.gravity-theme .gfield--input-type-name .ginput_complex.no_prefix span {
padding-right: 0 !important;
}
.combined-form .gform_wrapper.gravity-theme .gfield--input-type-name .ginput_complex.no_prefix span:first-child {
padding-right: 15px !important;
}
.combined-form .gform_confirmation_message h1 {
font-size: 50px;
}
.combined-form .gfield_radio .gchoice {
width: 250px;
float: left;
padding: 0 16px;
margin-right: 10px;
background: #F8F8FF;
border-radius: 8px;
height: 50px;
}
.combined-form .gfield_radio .gchoice input {
max-width: 25px !important;
}
.combined-form .gform_wrapper.gravity-theme .gfield-choice-input+label {
color: #662e87;
font-size: 18px !important;
font-weight: 500;
max-width: 80%;
}
.combined-form .gform_wrapper.gravity-theme .gfield_label {
font-size: 18px;
font-weight: bold;
color: #662e87;
}
.combined-form .gform_next_button,
.combined-form .gform_wrapper .gform_button.button,
.combined-form .gform_wrapper .gform_button.button:hover {
padding: 0 30px;
min-width: 160px;
line-height: 19px;
height: 44px;
border-radius: 4px;
float: right;
border-style: none;
}
.combined-form .gform_next_button {
font-size: 17px;
}
.combined-form {
background: #33b1a2;
}
.combined-form .container-fluid {
background: #fff;
}
.combined-form .gform_wrapper {
margin-top: 30px;
margin-bottom: 60px;
}
.combined-form .gform_wrapper.gravity-theme .ginput_container_address {
margin: 0 !important;
}
.combined-form .gform_previous_button.button {
background: none;
min-width: 160px;
border-radius: 4px;
font-size: 17px;
line-height: 19px !important;
height: 44px;
border-style: double;
float: left;
font-weight: 500;
}
.combined-form .gform_wrapper.gravity-theme input[type=text] {
width: 100% !important;
}
.combined-form .gform_wrapper .gform_body .ginput_container.ginput_container_name {
margin-top: 45px !important;
}
.combined-form .gform_body .gform_fields input,
.combined-form .gform_wrapper .gform_body .gform_fields select,
.combined-form .gform_wrapper .gform_body .gform_fields textarea {
height: 50px;
}
.combined-form .gform_wrapper.gravity-theme .ginput_container_address span {
margin-bottom: 45px !important;
padding: 0;
}
.combined-form .ginput_container_email input,
.combined-form .gfield--type-phone input {
width: 100% !important;
}
.combined-form legend.gfield_label.gform-field-label.gfield_label_before_complex {
margin-bottom: 22px;
}
.combined-form .gform_wrapper .gform_body .gfield--input-type-address .ginput_container>span>label {
left: 6px;
}
.combined-form .gform_wrapper.gravity-theme .ginput_container_address span {
flex: 0 0 100% !important;
}
.combined-form .gform_wrapper.gravity-theme .gfield--input-type-address {
margin-bottom: -40px !important;
}
.combined-form .iti--separate-dial-code .iti__selected-flag {
background: none;
}
.combined-form .gform_wrapper.gravity-theme input[type=tel] {
padding-left: 75px !important;
}
.combined-form .gf_progressbar_wrapper {
margin-top: 40px;
}
.combined-form .gf_progressbar_wrapper .gf_progressbar_percentage span {
display: none !important;
}
.combined-form .gform_wrapper.gravity-theme .gfield_label {
font-size: 20px;
}
.combined-form .gfield_checkbox input {
height: 36px !important;
width: 36px !important;
min-height: 36px !important;
margin-top: 0;
}
.combined-form .gfield_checkbox input:before {
height: 12px;
width: auto;
}
.combined-form .active-radio {
border: 2px solid #00C07B;
background: #E5F9F2;
}
.combined-form .active-radio input {
accent-color: #00C07B;
}
.combined-form .gform_wrapper .gform_body .gform_fields .iti__tel-input {
padding-left: 48px !important;
}
.combined-form .gform_wrapper .gf_progressbar_wrapper {
order: 2;
}
.combined-form .gform_wrapper form {
display: flex;
flex-direction: column;
}
.combined-form-choices .was-unchecked {
position: relative;
cursor: not-allowed;
}
.combined-form-choices .was-unchecked::after {
content: attr(data-tooltip);
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-10%);
background: #fff;
color: #c02b0a;
border: 1px solid #c02b0a;
padding: 6px 10px;
font-size: 13px;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
z-index: 9999;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.combined-form-choices .was-unchecked:hover::after,
.combined-form-choices .was-unchecked:hover::before {
opacity: 1;
}
.three-columns-full img.card-img-top{
height:630px;
}
.three-columns-full a{
color:#fff;
}
.three-columns-full a:hover{
color:#fff;
}
.three-columns-full .thumbitemDesc {
position: absolute;
text-align: center;
display: flex;
color: #fff;
justify-content: end;
height: 100%;
width: 100%;
}
.three-columns-full .component .btn{
color:#fff !important;
border-color:#fff;
}
.three-columns-full .component .btn:hover{
color:#fff !important;
border-color:#fff;
}
.callout--video.center--content{
height: 400px;
}
p.sub-title-big {
font-size: 60px;
line-height: 60px;
}
.title-main-size{
font-size: 20px;
}
.thumbitemDesc p.sub-title-big {
min-height: 120px;
}
.option-input:checked {
background: #00C07B !important;
}
.btn-expand-close{display:none;}
.btn-expand-close:after{ content: "\f106" !important;}
@media (max-width: 767px){
.title-main-size{
font-size: 16px;
}
p.sub-title-big {
font-size: 38px;
line-height: 38px;
}
.combined-form .gform_wrapper.gravity-theme .gfield--input-type-address {
margin-top: 0 !important;
}
.combined-form .gfield_radio .gchoice {
width: 100%;
margin-bottom: 20px;
}
.combined-form .gform_wrapper.gravity-theme .ginput_complex span {
margin-bottom: 40px;
}
.page_video iframe.callout__iframe {
height: auto !important;
}
.callout--video.center--content {
height: 170px;
}
.three-columns-full img.card-img-top{
height:512px;
}
}
/* Staff bios */
.cat_tab .js-filterable {
padding-bottom: 20px;
}
@media (max-width: 767px){
.cat_tab .card .card-body {
padding: 15px;
}
.cat_tab .modal .btn-close {
right: 25px;
}
}
@media (max-width: 575px){
.cat_tab .js-filterable {
margin: auto;
max-width: 380px;
}
}
.cat_tab .component.title {
text-transform: none;
}
.cat_tab .component.link {
margin-top: 0;
}
.cat_tab .component.team-content {
margin-top: 0;
padding-right: 20px;
}
@media (max-width: 767px){
.cat_tab .component.team-content {
padding-left: 15px;
}
.left-to-right-section .left-to-right-content {
float: none !important;
}
}
.cat_tab .component.link.mob-trm a {
padding: 0 1rem;
font-size: 15px;
}
.cat_tab .component.link a:after {
content: "\f105";
font-family: "Font Awesome 5 Free";
top: 2px;
margin-left: 7px;
position: relative;
}
.cat_tab .extra--padding .modal-body {
padding: 0;
overflow: hidden;
overflow-y: scroll;
}
.cat_tab .modal .topcontent {
padding: 24px;
padding-right: 0;
}
.three-columns-full .thumbitemDesc .component .btn {
margin-bottom: 20px;
}
.three-columns-full.card.card--white.center-button-flexible {
cursor: pointer;
}
@media (max-width: 575px){
.cat_tab .modal .topcontent {
padding-right: 24px;
}
}
/* ==========================================================================
12. Landing pages, branding, and typography
========================================================================== */
.left-to-right-section{
display: block;
}
.left-to-right-section .left-to-right-content{
float: right;
}
/* password protected page */
.post-password-form {
margin: auto;
margin-top: 270px;
margin-bottom: 100px;
max-width: 800px;
padding: 30px;
background: #fff;
line-height: 40px;
border: 30px solid #fff;
-webkit-box-shadow: inset 0px 0px 0px 1px #fff;
-moz-box-shadow: inset 0px 0px 0px 1px #fff;
box-shadow: inset 0px 0px 0px 1px #fff;
}
.post-password-form h6 {
margin-bottom: 15px;
}
.post-password-form input[type="submit"] {
color: #000;
border-radius: 3px;
padding-left: 30px;
padding-right: 30px;
}
@media screen and (max-width:959px) {
.post-password-form {
margin-top: 150px;
}
}
.tech-images.next-steps-module:hover {
transform: scale(1.1);
transition: transform 0.3s ease-in-out;
}
.tech-images .leftBottom-content .heading .h5 {
line-height: 40px;
font-size: 25px;
font-weight: 400;
}
.thumbnail_img_overlay_6805 .heading .h5 {
font-size: 25px;
line-height: 25px;
}
.tech-images .callout-img.halfcol--img {
width: auto;
border-radius: unset;
}
.darkHeader-top header.p-relative {
position: relative !important;
}
/* landing page footer spacing */
.row.align-items-center.footer-left-content {
padding: 70px 0 !important;
}
.social-tik-li i.fab.fa-tiktok {
font-size: 25px;
margin-top: 3px;
}
/* ==========================================================================
13. Cards, thumbnails, and sliders
========================================================================== */
/* Card slider — the arrows are the shared circular control now, styled by
`.slick-slider--with-icon` and painted from the Icon colours. The bare
FontAwesome glyph that used to sit here went with it: a 20x20 transparent
button whose chevron colour came from a per-instance colour picker. */
/* Dots */
.card-items-slider.slick-dotted.slick-slider
{
margin-bottom: 30px;
}
.card-items-slider .slick-dots
{
position: absolute;
bottom: -25px;
/* Anchored to the left edge of the box it is positioned against.
*
* Without this `left` stays `auto`, which puts the list at its static
* position - inside the row's padding - while `width: 100%` resolves
* against the padding box and so spans the full width. The list therefore
* started 60px in and overhung 60px to the right, and `text-align: center`
* centred the dots inside that shifted box: measured 60px right of the
* slider's centre at every width where the row carries its 60px padding for
* the arrows, and correct below 768px only because the padding is 0 there. */
left: 0;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.card-items-slider .slick-dots li
{
position: relative;
display: inline-block;
width: 8px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.card-items-slider .slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 8px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.card-items-slider .slick-dots li button:hover,
.card-items-slider .slick-dots li button:focus
{
outline: none;
}
.card-items-slider .slick-dots li button:hover:before,
.card-items-slider .slick-dots li button:focus:before
{
opacity: 1;
}
.card-items-slider .slick-dots li button:before
{
font-family: 'FontAwesome' !important;
font-size: 30px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 8px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.card-items-slider .slick-dots li.slick-active button:before
{
opacity: .75;
color: black;
}
.card-items-slider .card {
box-shadow: 0 0 10px rgba(16,23,30,.15);
}
@media (max-width: 767px) {
.card-items-slider.slick-slider .slick-track {
left: 0;
}
.card-items-slider .slick-next {
right: 0;
}
.card-items-slider .slick-prev {
left: 0;
z-index: 1;
}
.card-items-slider .slick-prev,
.card-items-slider .slick-next {
display: none !important;
}
}
.card-items-slider .card-body.thumbitemDesc .card-title--desc {
display: -webkit-box !important;
-webkit-line-clamp: 4 !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
-webkit-box-orient: vertical !important;
}
/* Cards in a slider stand as tall as the tallest one beside them.
*
* This was `height: 230px !important` on the card body (and 285px on the
* reviews variant), which made the cards equal by forcing every one to the same
* size. It held only while the content happened to fit: the description is
* clamped to four lines below, but the title is not, so a long title on a
* narrow card pushed straight out of the box - measured overflowing at 1000px
* and 800px, where three cards share the row and each is about 270px wide.
*
* The track is a flex row instead, which is what makes slick's slides stretch
* to the tallest of them, and the height is then handed down to the card. Same
* equal heights, decided by the content rather than by a number, so nothing can
* overflow. `.card-body` is already `flex: 1 1 auto` and `.thumbitemDesc` is
* already a flex column with `space-between`, so the button stays pinned to the
* bottom of whichever card is shortest. */
.card-items-slider .slick-track {
display: flex;
}
.card-items-slider .slick-slide {
height: auto;
}
/* slick wraps each slide in a div of its own, so the height is passed through
that and the column inside it before it reaches the card. */
.card-items-slider .slick-slide > div,
.card-items-slider .slick-slide > div > div,
.card-items-slider .slick-slide .card {
height: 100%;
}
/* Before slick loads – show only first 3 */
.card-items-slider > *:nth-child(n+4) {
display: none;
}
/* After slick initializes – show all */
.card-items-slider.slick-initialized > * {
display: block;
}
/* The reviews variant set its own 285px for the same reason, and no longer
needs one either - the rule above equalises whatever height its cards want. */
/* ==========================================================================
14. Legacy base theme styles
--------------------------------------------------------------------------
Preserved from assets/css/style.min.css during the v3.0.0 consolidation.
This section intentionally follows the historical custom styles to retain
the original two-file cascade. Refactor in controlled, tested passes.
========================================================================== */
body{color:#10171e;font-family:Raleway,sans-serif}@media (max-width:767px){.row>div{margin-bottom:20px}.row>div:last-child{margin-bottom:0}}.row>div>.pt-4:first-child{padding-top:0!important}.row>div.col-md-12{margin-bottom:0}@media (max-width:767px){.row>div.order-2.order-md-1{margin-top:20px;margin-bottom:0}}@media (max-width:767px){.row>div.order-1.order-md-2{margin-top:0;margin-bottom:0}}@media (max-width:767px){.row>div.order-3.order-md-2{margin-top:20px;margin-bottom:0}}@media (max-width:767px){.row>div.col-lg-8>.row>.col-lg-6{margin-top:0;margin-bottom:0}}.cards--section .row>div.col-lg-3,.cards--section .row>div.col-lg-4,.cards--section .row>div.col-lg-6,.cards--section .row>div.col-lg-8{margin-bottom:0;margin-top:0}.container{max-width:960px}@media (min-width:992px){.container{max-width:960px}}@media (max-width:1199px){.container{max-width:950px}}@media screen and (max-width:1200px){.container-fluid{padding:0 30px}}@media (min-width:992px){.container-fluid{max-width:1140px}}@media (max-width:991px){.container-fluid{max-width:960px}}@media (max-width:767px){.container-fluid{padding:0 15px}}@media (max-width:991px){.middle-section.section{padding:0}}.middle-section .container,.middle-section .container-fluid{padding:50px 80px 80px}@media (max-width:991px){.middle-section .container,.middle-section .container-fluid{padding:35px 15px}}@media (max-width:991px){.middle-section .container-fluid{max-width:960px}}@media screen and (max-width:992px) and (min-width:992px){.middle-section .container-fluid{max-width:940px}}@media (max-width:991px){.middle-section.section--blue{padding:0}}.middle-section.section--blue .container,.middle-section.section--blue .container-fluid{background:#c41f2f}@media (max-width:991px){.middle-section.section--grey{padding:0}}.middle-section.section--grey .container,.middle-section.section--grey .container-fluid{background:#e8ebee}.middle-section.with--background .container,.middle-section.with--background .container-fluid{position:relative;background-repeat:no-repeat}.middle-section.with--background .container-fluid:before,.middle-section.with--background .container:before{content:"";position:absolute;top:0;bottom:0;left:0;right:0}.middle-section.with--background .container .row,.middle-section.with--background .container-fluid .row{position:relative}.middle-section.with--background.section--blue{background:0 0}.middle-section.with--background.section--blue .container-fluid:before,.middle-section.with--background.section--blue .container:before{background:rgba(196,31,47,.9)}.middle-section.with--background.section--grey{background:0 0}.middle-section.with--background.section--grey .container-fluid:before,.middle-section.with--background.section--grey .container:before{background:rgba(240,240,240,.8)}.middle-section.with--background.section--white{background:0 0}.middle-section.with--background.section--white .container-fluid:before,.middle-section.with--background.section--white .container:before{background:rgba(255,255,255,.8)}.section{padding:80px 0}.section.sm-padding{padding:35px 0}.section .margin-top-xs{margin-top:-40px}@media (max-width:767px){.section .margin-top-xs{margin-top:0}}@media (max-width:991px){.section{padding:50px 0}}.section .container{padding:0 80px}.section .container.pb-0{padding-bottom:0}@media (max-width:767px){.section .container{padding:0 15px}.section .container .row>div{margin-bottom:35px}.section .container .row>div:last-child{margin-bottom:0}}.section.no-col-margin .container-fluid .row>div,.section.no-col-margin .contaner .row>div{margin-bottom:0}.section--white{background-color:#fff}.section--white .imgcontent-grp,.section--white .imgcontent-grp img{background:#f8f8f8}.section--white .link .btn--secondary.btn--bordered{border-color:#10171e;color:#10171e}.section--white .btn-close{color:#10171e;border-color:#10171e}.section--white .section--white .section--blue{color:#fff;background-color:#c41f2f}.section--blue .title p:after{background-color:#fff}.section--blue .hash-list ul li:before{background:#fff}.section--blue .social-icons a{color:#fff}.section--blue .HowWeTeach-sec{color:#000}.section--blue .list ul li:after{background:#fff}.section--blue .link .btn-link,.section--blue .link .btn-modal{color:#fff}.section--blue .link .btn-link.simple-link,.section--blue .link .simple-link.btn-modal{color:#fff}.section--blue .icon-with-heading .icon>div{background:#fff;color:#c41f2f}.section--blue .section--grey,.section--blue .section--white{color:#10171e}.section--blue .section--grey .link .btn,.section--blue .section--white .link .btn{color:#10171e}.section--blue .horizontal--card{color:#10171e}.section--grey{background-color:#f8f8f8}.section--grey .btn-close{color:#10171e;border-color:#10171e}.section--grey .section--blue .link .btn-primary:hover{background:#fff;color:#10171e}.section--grey .section--black{background-color:#10171e;color:#fff}.section--form{background-color:rgba(232,235,238,.3)}.section--cutoff{padding:20px 0;overflow-x:hidden}.section--yellow{background:#6f96b7;color:#fff}.section--sm{padding:25px 15px}.section--withBG{background-position:right;background-repeat:no-repeat;position:relative;background-size:cover}.section--withBG .container,.section--withBG .container-fluid{position:relative;z-index:1}.section--withBG:before{content:"";position:absolute;top:0;bottom:0;left:0;right:0}.section--withBG.section--grey:before{background:rgba(240,240,240,.8)}.section--withBG.section--white:before{background:linear-gradient(89deg, #ffffffed, transparent)}.component{margin-top:20px}.component:first-child{margin-top:0}@media (max-width:767px){.component{margin-top:15px}}.margin-top-lg{position:relative;margin-top:-125px}@media (max-width:991px){.margin-top-lg{margin-top:0}.margin-top-lg.order-1.order-md-2{margin-top:-125px}}@media (max-width:991px){.padding-bottom{padding-bottom:40px}}.section .row.HowWeTeach-sec>div{margin-bottom:0}.centerText{text-align:center}@media (max-width:767px){.centerText{text-align:left}}
/* Brand rule: the shared section title is centred by default and switches to
left-aligned on mobile, matching .centerText above. Applied to the shared
section title component so every element using it follows the guideline
without repeating the rule per element. */
.cwb-section-title,.cwb-section-title h1,.cwb-section-title h2,.cwb-section-title h3,.cwb-section-title h4,.cwb-section-title h5,.cwb-section-title h6,.cwb-section-title p,.cwb-section-description,.cwb-section-description p{text-align:center}
@media (max-width:767px){.cwb-section-title,.cwb-section-title h1,.cwb-section-title h2,.cwb-section-title h3,.cwb-section-title h4,.cwb-section-title h5,.cwb-section-title h6,.cwb-section-title p,.cwb-section-description,.cwb-section-description p{text-align:left}}
/* Section heading spacing.
Spacing here is owned by the heading block and expressed as bottom margins
only, so it travels with whatever is actually present: leave the description
out and its spacing goes with it, with nothing left behind to collapse or
compensate for.
1. The block owns the gap to the content below it, so that gap no longer
depends on what the next element happens to be. The site's general
`component` spacing is a top margin, which meant an element that wrapped
its content in `component` sat further from the heading than one that did
not — the same heading spacing differently per element.
2. Inside the block, each part carries its own bottom margin and the last
one clears it, so title-only, description-only and both are all spaced
correctly without needing to know which case applies.
3. The inherited top margins are zeroed rather than the site-wide
`component` rule being changed, which is relied on in several hundred
places and is not safe to alter globally. */
/* Full Width Text's section label sits in a row that centres its contents,
which is right for the title and body text but not for the label: the same
label in other elements is left aligned with its rule under the left edge.
These rules restore that, leaving the rest of the section centred.
The rule under the label needs `.centerText` in the selector to sit above
the centring rule further down this stylesheet, which is otherwise an exact
specificity tie and would win simply by coming later. */
.cwb-element--vc-full-width-text .title{text-align:left}
.cwb-element--vc-full-width-text .centerText .title .body-small::after,
.cwb-element--vc-full-width-text .title .body-small::after{left:0;right:auto;margin:0}
/* Button layout for Full Width Text. These rules were previously written into
the page as a