/*!
Theme Name: CBD
Theme URI: https://www.cbwebsitedesign.co.uk/
Author: Creative Brand Design
Author URI: https://www.cbwebsitedesign.co.uk/
Description: Creative Brand Design
Version: 04.12.24
Text Domain: cbd
*/

/* Private Pages */

.post-password-form {
    height: 70vh;
    height: 70svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.post-password-form > p {
    width: 100%;
    text-align: center;
    font-size: 115%;
}

.post-password-form label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.post-password-form input[type=password] {
    padding: 0.75rem 1.5rem;
    background: none;
    border: 1px solid #fff;
    border-radius: 0.3rem;
}

.post-password-form input[type=submit] {
    padding: 0.75rem 1.5rem;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 0.3rem;
    color: #000;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s opacity;
    margin-top: 1.5rem;
}

.post-password-form input[type=submit]:hover {
    opacity: 0.7;
}

/* Form */
.gfield_label {
    display: none;
}

.s-contact .gform_fields {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: calc(var(--spacing)*7);
}

.s-contact .gform-footer {
    width: 100%;
    margin-top: calc(var(--spacing)*6);
}

.gfield--type-text input, .gfield--type-phone input, .gfield--type-email input, .gfield--type-select select, .gfield--type-textarea textarea {
    border-style: var(--tw-border-style);
    width: 100%;
    padding-inline: calc(var(--spacing)*6);
    padding-block: calc(var(--spacing)*5);
    color: var(--color-black);
    background-color: #fcfcfc;
    border-width: 1px;
    border-color: #d4d9d9;
    border-radius: 4px;
    margin: 0;;
    line-height: 1.2;
    transition: border-color .4s ease-in-out,background-color .4s ease-in-out;
}

.gfield--type-textarea {
    grid-column: 1 / 3; 
}

.gfield--type-consent {
    text-align: left;
    padding: 3px 0 10px 35px;
    position: relative;
    grid-column: 1 / 3;
    font-size: 14px;
}

.gfield--type-consent a {
    text-decoration: underline;
}

.gfield--type-consent a:hover {
    color: #f2bd41;
}

.gfield--type-consent input {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -9999px;
}

.gfield--type-consent label:before, .gfield--type-consent label:after {
    content: "";
    border-radius: 3px;
    position: absolute;
    top: 20px;
}

.gfield--type-consent label:before {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-black);
    background: #fff;
    width: 21px;
    height: 21px;
    margin: -14px 0 0;
    transition: all .5s;
    left: 0;
}

.gfield--type-consent label:after {
    opacity: 0;
    background: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.86337 7.5831L1.55004 5.26976C1.42548 5.14493 1.25638 5.07477 1.08004 5.07477C0.903694 5.07477 0.734593 5.14493 0.610039 5.26976C0.350039 5.52976 0.350039 5.94976 0.610039 6.20976L3.39671 8.99643C3.65671 9.25643 4.07671 9.25643 4.33671 8.99643L11.39 1.9431C11.65 1.6831 11.65 1.2631 11.39 1.0031C11.2655 0.878261 11.0964 0.808105 10.92 0.808105C10.7437 0.808105 10.5746 0.878261 10.45 1.0031L3.86337 7.5831Z' fill='%23003B3F'/%3E%3C/svg%3E") 50%/contain no-repeat;
    width: 11px;
    height: 11px;
    margin: -9px 0 0;
    transition: opacity .25s ease-in-out,transform .25s ease-in-out;
    left: 5px;
    transform: translate(0) scale(.5);
}

.gfield--type-consent input:checked+label:before {
    background-color: var(--color-yellow);
    border-color: #0000;
}

.gfield--type-consent input:checked+label:after {
    opacity: 1;
    transform: translate(0);
}

.gfield--type-html {
    grid-column: 1/3;
}

.gfield--type-html a {
    text-decoration: underline;
    font-size: 14px;
}

.gfield--type-html a:hover {
    color: #f2bd41;
}

@media(width >= 1025px) {
    .gfield--type-text input, .gfield--type-phone input, .gfield--type-email input, .gfield--type-select select {
        border-radius: 8px;
    }
}

.gform_wrapper #gform_1 {
    position: relative;
}

.gform_wrapper #gform_1 .ginput_container_email input{
    padding: 2rem;
}

.gform_wrapper #gform_1 .gform-footer {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.gform_wrapper .gform_validation_errors .gform_submission_error {
      font-size: 20px;
  color: red;
  text-transform: initial;
  margin-bottom: 14px;
}

.validation_message {
    color: red;
}

header .menu-collapse .current-menu-item>a {
    -webkit-text-fill-color: var(--color-yellow);
    color: var(--color-yellow);
}

body .video .video-js picture:not(.vjs-poster) img {
    object-fit: contain;
}

.tab-images-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.tab-images-grid .tabs-image-item {
    height: 100%;
}

.transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
    transition-duration: var(--tw-duration,var(--default-transition-duration));
}

.size-16 {
    width: calc(var(--spacing)*16);
    height: calc(var(--spacing)*16);
}

.mb-6 {
    margin-bottom: calc(var(--spacing)*6);
}

.bottom-full {
    bottom: var(--spacing-full);
}

.bg-black\/75 {
    background-color: #000000bf;
}

.inset-0 {
    inset: calc(var(--spacing) * 0);
}

.timeline-modal {
    transition: opacity .3s,visibility .3s;
}

.timeline-modal.open {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 60;
}

.timeline-modal .modal-box {
    max-height: calc(100svh - 4rem);
    transition: transform .3s;
    overflow-y: auto;
    transform: translateY(3rem);
}

.timeline-modal.open .modal-box {
    transform: translateY(0);
}

.timeline-modal .modal-box {
    border-radius: 2rem;
    padding: 2rem;
}

.timeline-modal .modal-box .card-image {
    border-radius: 1.5rem;
}

.timeline-modal .close {
    top: 14px;
    right: 14px;
}
.timeline-modal .modal-box-inner {
  display: grid;
  grid-template-columns: 40% minmax(0,1fr);
}
.timeline-modal .modal-box-inner .content-side {
    padding: 20px;
}

@media(max-width: 1024px) {
    .timeline-modal .modal-box-inner {
      grid-template-columns: minmax(0,1fr);
          margin-top: 40px;
    }
    .timeline-modal .modal-box-inner .content-side {
        padding: 10px;
    }
}

.image-contain img {
    object-fit: contain;
}

.align-center {
    align-items: center;
}

.overall-vision-media .half-width {
    max-width: 21rem;
}

.video-js {
    background-color: transparent;
}

.video-js.color-bg {
    background-color: #000;
}

.s-video .content-medium {
    max-width: 1350px;
}
@media (min-width: 1025px) {
    .overall-vision-media .half-width.ml-auto {
        margin-left: auto;
        margin-right: 10rem;
    }
}
.aspect-1\/1 {
    aspect-ratio: 1 /1;
    height: unset;
}
header .menu-collapse>li>a {
    position: unset;
}
.menu-item-has-children > a:after {
    content: "";
    position: absolute;
    top: 2rem;
    right: 0;
    height: 2rem;
    width: 3rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M6.19559 0.52859C6.45594 0.268241 6.87805 0.268241 7.1384 0.52859L11.1384 4.52859C11.2634 4.65362 11.3337 4.82318 11.3337 5C11.3337 5.17681 11.2634 5.34638 11.1384 5.4714L7.1384 9.4714C6.87805 9.73175 6.45594 9.73175 6.19559 9.4714C5.93524 9.21105 5.93524 8.78894 6.19559 8.52859L9.05752 5.66666L1.33366 5.66666C0.965469 5.66666 0.666992 5.36819 0.666992 5C0.666992 4.63181 0.965469 4.33333 1.33366 4.33333L9.05752 4.33333L6.19559 1.4714C5.93524 1.21105 5.93524 0.78894 6.19559 0.52859Z' fill='black'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    transition: .3s all;
    transform: rotate(90deg);
}
.menu-item-has-children > a.active:after {
    transform: rotate(-90deg);
}
.menu-item-has-children .sub-menu {
    display: none;
}
.menu-item-has-children > a.active + .sub-menu {
    display: block;
}
@media(min-width: 1024px) {
    .menu-item-has-children > a:after {
        top: 2rem;
        height: 4rem;
        width: 5rem;
    }
}
.filter-panel-item.active {
    background-color: var(--color-yellow);
    color: var(--color-white);
}
.object-contain img {
    object-fit: contain;
}

/* Footer */
.sticky-cta {
    bottom: 3rem;
    right: 3rem;
    z-index: 40;
}

.sticky-button .btn-blob {
    width: 8rem;
	height: 8rem;
    border: none;
    text-align: center;
	border-radius: 100%;
	background: var(--color-blue);
	transition: 0.3s background-color, 0.3s transform;
	padding: 1rem;
	will-change: transform;
}

.footer-logo img {
    width: 100%;
}

.floater {
    bottom: 3rem;
    right: 3rem;
    z-index: 40;
}

.floater .gravity-button {
    /*width: 24rem;*/
    width: 10rem;
	/*height: 24rem;*/
	height: 10rem;
	display: flex;
	align-items: center;
	justify-content: center;
	/*transform: translate(8rem, 8rem);*/
	transform: translate(0rem, 0rem);
	transition: 0.4s all;
	will-change: transform;
}

.floater .gravity-button .btn-blob {
    width: 8rem;
	height: 8rem;
    border: none;
    text-align: center;
	border-radius: 100%;
	background: var(--color-yellow);
	transition: 0.3s background-color;
	padding: 1rem;
	will-change: transform;
}

.floater .gravity-button .btn-blob:hover,
.sticky-cta .btn-blob:hover {
    background: var(--color-yellow-light);
    transform: scale(0.8);
}

.floater .gravity-button .btn-blob svg,
.sticky-cta svg {
    width: 70%;
    height: 70%;
    object-fit: contain;
    fill: #fff;
    margin: 0;
}

.floater .gravity-button:hover {
    transform: translate(0rem, 0rem) scale(0.8);
}
.floater .gravity-button .btn:hover svg {
    translate: none;
}
.floater.secondary {
    right: auto;
    left: 3rem;
}

.floater.secondary .gravity-button {
    transform: none;
    align-items: flex-end;
    justify-content: flex-start;
}

.floater.secondary .gravity-button a {
    width: auto;
    height: auto;
    color: #fff;
    font-weight: 400;
    border-radius: 2.3rem;
    padding: 1.2rem 2.4rem 1rem;
}

@media (max-width: 640px) {
    .floater {
        pointer-events: none;
    }
    .floater a {
        pointer-events: all;
    }
}


/* Upcoming Event Notice Block */
.upcoming-event-notice {
    position: fixed;
    bottom: 50px;
    right: 50px;
    max-width: 300px;
    background-color: var(--color-yellow);
    color: #fff;
    padding: 15px;
    border-radius: 15px 0 0;
    font-weight: 900;
    transition: width 1s ease-in-out;
}
.upcoming-event-notice.active {
    width: 300px;
}
@media (max-width: 480px) {
    .upcoming-event-notice {
        width: calc(100% - 7rem);
        padding: 10px;
        margin: 0 3.5rem;
        bottom: 0;
        right: 0;
    }
    .upcoming-event-notice.active {
        width: calc(100% - 7rem);
    }
}
.upcoming-event-notice .top-line {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    margin-bottom: 1rem;
}
.upcoming-event-notice span {
    text-transform: uppercase;
    font-size: 16px;
    height: 20px;
    padding: 0 0 0 15px;
}
.upcoming-event-notice .top-line > span {
    cursor: pointer;
}
.upcoming-event-notice .top-line > span:hover {
    text-decoration: underline;
}
.upcoming-event-notice.active .top-line > span {
    cursor: unset;
}
.upcoming-event-notice.active .top-line > span:hover {
    text-decoration: none;
}
.upcoming-event-notice .top-line > span:before {
    content: "";
    position: absolute;
    height: 5px;
    width: 5px;
    background-color: #fff;
    border-radius: 100%;
    top: 7.5px;
    left: 5px;
}
.upcoming-event-notice .top-line .toggle-notice {
    /*display: none;*/
    height: 0;
    width: 0;
    opacity: 0;
    cursor: pointer;
}
.upcoming-event-notice.active .top-line .toggle-notice {
    height: 20px;
    width: 20px;
    opacity: 1;
    transition: height 0.2s 0.8s ease-in-out, width 0.2s 0.8s ease-in-out, opacity 0.5s 1s ease-in-out;
}
.upcoming-event-notice .top-line .toggle-notice span {
    height: 3px;
    margin: 5px 2px 5px 0;
    transition: all .2s;
    width: 15px;
    --tw-bg-opacity: 1;
    background-color: #fff;
    display: block;
}
.upcoming-event-notice .top-line .toggle-notice span:first-of-type {
    transform: rotate(-43deg) translateY(130%) translateX(-13%)
}
.upcoming-event-notice .top-line .toggle-notice span:nth-of-type(2) {
    transform: rotate(43deg) translateY(-130%) translateX(-13%);
}
.upcoming-event-notice p {
    height: 0px;
    opacity: 0;
    margin-bottom: 0;
    color: #fff;
    width: 80%;
    font-size: 0;
    transition: height 0.5s ease-in-out, margin-bottom 0.5s ease-in-out, font-size 1s ease-in-out;
}
.upcoming-event-notice.active p {
    height: 100%;
    opacity: 1;
    margin-bottom: 1rem;
    font-size: 120%;
    transition: height 0.5s ease-in-out, margin-bottom 0.5s ease-in-out, font-size 1s ease-in-out, opacity 0.5s 1s ease-in-out;
}
.upcoming-event-notice a {
    display: block;
    height: 0px;
    width: 100%;
    text-align: end;
    transition: height 0.5s ease-in-out;
}
.upcoming-event-notice.active a {
    height: 100%;
}
.upcoming-event-notice a span {
    opacity: 0;
    padding: 0;
    text-decoration: underline;
}
.upcoming-event-notice.active a span {
    opacity: 1;
    transition: opacity 0.5s 1s ease-in-out;
}

@media(max-width: 768px) {
    body .video .video-js picture img {
        object-fit: contain;
    }
    .mobile-hidden {
        display: none;
    }
    .cards-comm-grid .card-comm .caption .inner .title {
        text-align: left;
    }
    .sm-mb-0 {
        padding-bottom: 0 !important;
    }
    
    .s-long-cards-reverse.alt-background .bg {
        background: black;
    }
    
    .s-long-cards-reverse.alt-background .bg img {
        display: none;
    }
}

@media (max-width: 767px) {
    [data-scroll][data-fade],
    [data-scroll][data-fade-up],
    [data-scroll][data-fade-right],
    [data-scroll][data-fade-left],
    [data-scroll][data-fade-down] {
        opacity: 1;
        visibility: visible;
        transform: translateZ(0);
        transition: 0s all;
    }
}

@media(max-width: 768px) {
    .cards-comm-slider .card-comm figure.bg .overlay-gradient {
        opacity: .6;
        background: black;
    }
}