.ct-section {
width:100%;
background-size:cover;
background-repeat:repeat;
}
.ct-section>.ct-section-inner-wrap {
display:flex;
flex-direction:column;
align-items:flex-start;
}
.ct-div-block {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.ct-new-columns {
display:flex;
width:100%;
flex-direction:row;
align-items:stretch;
justify-content:center;
flex-wrap:wrap;
}
.ct-link-text {
display:inline-block;
}
.ct-link {
display:flex;
flex-wrap:wrap;
text-align:center;
text-decoration:none;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-link-button {
display:inline-block;
text-align:center;
text-decoration:none;
}
.ct-link-button {
background-color: #1e73be;
border: 1px solid #1e73be;
color: #ffffff;
padding: 10px 16px;
}
.ct-image {
max-width:100%;
}
.ct-fancy-icon>svg {
width:55px;height:55px;}
.ct-inner-content {
width:100%;
}
.ct-slide {
display:flex;
flex-wrap:wrap;
text-align:center;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-nestable-shortcode {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-comments {
width:100%;
text-align:left;
}
.oxy-comment-form {
width:100%;
}
.oxy-login-form {
width:100%;
}
.oxy-search-form {
width:100%;
}
.oxy-tabs-contents {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab-content {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-testimonial {
width:100%;
}
.oxy-icon-box {
width:100%;
}
.oxy-pricing-box {
width:100%;
}
.oxy-posts-grid {
width:100%;
}
.oxy-gallery {
width:100%;
}
.ct-slider {
width:100%;
}
.oxy-tabs {
display:flex;
flex-wrap:nowrap;
flex-direction:row;
align-items:stretch;
}
.ct-modal {
flex-direction:column;
align-items:flex-start;
}
.ct-span {
display:inline-block;
text-decoration:inherit;
}
.ct-widget {
width:100%;
}
.oxy-dynamic-list {
width:100%;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
			.ct-div-block,
			.oxy-post-content,
			.ct-text-block,
			.ct-headline,
			.oxy-rich-text,
			.ct-link-text { max-width: 100%; }
			img { flex-shrink: 0; }
			body * { min-height: 1px; }
		}            .oxy-testimonial {
                flex-direction: row;
                align-items: center;
            }
                        .oxy-testimonial .oxy-testimonial-photo-wrap {
                order: 1;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo {
                width: 125px;                height: 125px;                margin-right: 20px;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo-wrap, 
            .oxy-testimonial .oxy-testimonial-author-wrap, 
            .oxy-testimonial .oxy-testimonial-content-wrap {
                align-items: flex-start;                text-align: left;            }
            
                                                            .oxy-testimonial .oxy-testimonial-text {
                margin-bottom:8px;font-size: 21px;
line-height: 1.4;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
                                    .oxy-testimonial .oxy-testimonial-author {
                font-size: 18px;
-webkit-font-smoothing: subpixel-antialiased;
            }
                            

                                                .oxy-testimonial .oxy-testimonial-author-info {
                font-size: 12px;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
             
            
                        .oxy-icon-box {
                text-align: left;                flex-direction: column;            }
            
                        .oxy-icon-box .oxy-icon-box-icon {
                margin-bottom: 12px;
                align-self: flex-start;            }
            
                                                                        .oxy-icon-box .oxy-icon-box-heading {
                font-size: 21px;
margin-bottom: 12px;            }
            
                                                                                    .oxy-icon-box .oxy-icon-box-text {
                font-size: 16px;
margin-bottom: 12px;align-self: flex-start;            }
            
                        .oxy-icon-box .oxy-icon-box-link {
                margin-top: 20px;                            }
            
            
            /* GLOBALS */

                                                            .oxy-pricing-box .oxy-pricing-box-section {
                padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
text-align: center;            }
                        
                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                justify-content: center;            }
            
            /* IMAGE */
                                                                                    .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-graphic {
                justify-content: center;            }
            
            /* TITLE */
                                                            
                                    .oxy-pricing-box .oxy-pricing-box-title-title {
                font-size: 48px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-title-subtitle {
                font-size: 24px;
            }
            

            /* PRICE */
                                                .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                                                flex-direction: row;                                            }
            
                                    .oxy-pricing-box .oxy-pricing-box-currency {
                font-size: 28px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-main {
                font-size: 80px;
line-height: 0.7;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-decimal {
                font-size: 13px;
            }
                        
                                    .oxy-pricing-box .oxy-pricing-box-term {
                font-size: 16px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-sale-price {
                font-size: 12px;
color: rgba(0,0,0,0.5);
                margin-bottom: 20px;            }
            
            /* CONTENT */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-content {
                font-size: 16px;
color: rgba(0,0,0,0.5);
            }
            
            /* CTA */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-cta {
                justify-content: center;            }
            
        
                                .oxy-progress-bar .oxy-progress-bar-background {
            background-color: #000000;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);            animation: none 0s paused;        }
                
                .oxy-progress-bar .oxy-progress-bar-progress-wrap {
            width: 85%;        }
        
                                                        .oxy-progress-bar .oxy-progress-bar-progress {
            background-color: #66aaff;padding: 40px;animation: none 0s paused, none 0s paused;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);        
        }
                
                        .oxy-progress-bar .oxy-progress-bar-overlay-text {
            font-size: 30px;
font-weight: 900;
-webkit-font-smoothing: subpixel-antialiased;
        }
        
                        .oxy-progress-bar .oxy-progress-bar-overlay-percent {
            font-size: 12px;
        }
        
        .ct-slider .unslider-nav ol li {border-color: #ffffff; }.ct-slider .unslider-nav ol li.unslider-active {background-color: #ffffff; }.ct-slider .ct-slide {
				padding: 0px;			}
		
                        .oxy-superbox .oxy-superbox-secondary, 
            .oxy-superbox .oxy-superbox-primary {
                transition-duration: 0.5s;            }
            
            
            
            
            
        
        
        
        
            .oxy-shape-divider {
                width: 0px;
                height: 0px;
                
            }
            
            .oxy_shape_divider svg {
                width: 100%;
            }
            .oxy-pro-media-player .oxy-pro-media-player_play{
--extras-play-icon-size:60px;
}

.oxy-pro-media-player .oxy-pro-media-player_play button:hover{
--vm-play-scale:1;
}

.oxy-pro-media-player .oxy-pro-media-player_play button{
transition-duration:.3s;
}

.oxy-pro-media-player vime-player{
--vm-control-scale:.9;
--extras-slider-height:2px;
--vm-control-group-spacing:12px;
--vm-controls-padding:15px;
--vm-controls-spacing:15px;
--vm-time-font-size:13px;
--vm-control-border-radius:3px;
--extras-spinner-size:80px;
--vm-spinner-thickness:3px;
--vm-spinner-spin-duration:1s;
--vm-tooltip-spacing:3px;
--vm-tooltip-padding:3px;
}

.oxy-pro-media-player .oxy-pro-media-player_custom-image{
--extras-poster-left:50%;
--extras-poster-top:50%;
}

.oxy-pro-media-player vime-player.video{
                            height: 0;
                            overflow: hidden;
                        }
.oxy-pro-media-player .extras-in-builder vime-spinner{
                                opacity: 0;
                            }
.oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .sub-menu{
box-shadow:px px px px ;}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a div{
margin-left:0px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
width:30px;
height:30px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon{
padding-top:15px;
padding-right:15px;
padding-bottom:15px;
padding-left:15px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon, .oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon{
top:20px;
left:20px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
width:24px;
height:24px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon, .oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container{
background-color:#ffffff;
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-open-container{
background-image:url();
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item-has-children > a svg, .oxy-pro-menu .oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item-has-children > a svg{
font-size:24px;
}

.oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-open-container .menu-item-has-children ul, .oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-off-canvas-container .menu-item-has-children ul{
background-color:rgba(0,0,0,0.2);
border-top-style:solid;
}

.oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .oxy-pro-menu-list{
                    flex-direction: row;
               }
.oxy-pro-menu .oxy-pro-menu-container .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .menu-item, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .menu-item{
                    align-items: flex-start;
                }

            .oxy-pro-menu .oxy-pro-menu-off-canvas-container{
                    top: 0;
                    bottom: 0;
                    right: auto;
                    left: 0;
               }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item a, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }

            .oxy-site-navigation {
--oxynav-brand-color:#4831B0;
--oxynav-neutral-color:#FFFFFF;
--oxynav-activehover-color:#EFEDF4;
--oxynav-background-color:#4831B0;
--oxynav-border-radius:0px;
--oxynav-other-spacing:8px;
--oxynav-transition-duration:0.3s;
--oxynav-transition-timing-function:cubic-bezier(.84,.05,.31,.93);
}

.oxy-site-navigation .oxy-site-navigation__mobile-close-wrapper{
text-align:left;
}

.oxy-site-navigation > ul{ left: 0; }
.oxy-site-navigation {
                        --oxynav-animation-name: none; 
                    }

                .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1){ 
                    background-color: var(--oxynav-brand-color);
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                    border: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2){ 
                    background: transparent;
                    border: 1px solid currentColor;
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2):not(:hover) > img{
                    filter: invert(0) !important;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover{
                    background-color: var(--oxynav-activehover-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a{
                    color: var(--oxynav-neutral-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a::after{
                    color: var(--oxynav-neutral-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > button, .oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }

                .ct-section-inner-wrap, .oxy-header-container{
  max-width: 1120px;
}
body {font-family: 'Open Sans';}body {line-height: 1.6;font-size: 16px;font-weight: 400;color: #404040;}.oxy-nav-menu-hamburger-line {background-color: #404040;}h1, h2, h3, h4, h5, h6 {font-family: 'Source Sans 3';font-size: 36px;font-weight: 700;}h2, h3, h4, h5, h6{font-size: 30px;}h3, h4, h5, h6{font-size: 24px;}h4, h5, h6{font-size: 20px;}h5, h6{font-size: 18px;}h6{font-size: 16px;}a {color: #0074db;text-decoration: none;}a:hover {text-decoration: none;}.ct-link-text {text-decoration: ;}.ct-link {text-decoration: ;}.ct-link-button {border-radius: 3px;}.ct-section-inner-wrap {
padding-top: 75px;
padding-right: 20px;
padding-bottom: 75px;
padding-left: 20px;
}.ct-new-columns > .ct-div-block {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}.oxy-header-container {
padding-right: 20px;
padding-left: 20px;
}@media (max-width: 992px) {
				.ct-columns-inner-wrap {
					display: block !important;
				}
				.ct-columns-inner-wrap:after {
					display: table;
					clear: both;
					content: "";
				}
				.ct-column {
					width: 100% !important;
					margin: 0 !important;
				}
				.ct-columns-inner-wrap {
					margin: 0 !important;
				}
			}
.site-wrapper {
}
.site-wrapper:not(.ct-section):not(.oxy-easy-posts),
.site-wrapper.oxy-easy-posts .oxy-posts,
.site-wrapper.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
}
.main-content {
background-image:url(https://brandhub.wetpaint.co.za/wp-content/uploads/2026/01/Creative-and-Content.webp);background-size: cover; padding-top:0px;
 padding-bottom:0px;
 padding-right:0px;
 width:100%;
 margin-right:0px;
 margin-top:0px;
 margin-bottom:0px;
 margin-left:0px;
 padding-left:0px;
 height:100vh;
 background-repeat:no-repeat;
}
.main-content:not(.ct-section):not(.oxy-easy-posts),
.main-content.oxy-easy-posts .oxy-posts,
.main-content.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.numberCard {
 color:#8d8b8b;
}
.oxel_horizontal_divider {
background-image:linear-gradient(#ffffff, #ffffff); margin-bottom:15px;
 width:100%;
 gap:0px;
 background-color:#707070;
 margin-top:15px;
}
.oxel_horizontal_divider:not(.ct-section):not(.oxy-easy-posts),
.oxel_horizontal_divider.oxy-easy-posts .oxy-posts,
.oxel_horizontal_divider.ct-section .ct-section-inner-wrap{
flex-direction:unset;
gap:0px;
}
.oxel_horizontal_divider__line {
 height:1px;
 padding-top:0px;
 padding-right:0px;
 padding-bottom:0px;
 padding-left:0px;
 margin-right:0px;
 margin-bottom:0px;
 margin-left:0px;
 background-color:#706f6f;
}
.colour-swatch {
 cursor:pointer;
}
.Stalemate {
 font-family:'Arimo';
 margin-bottom:1px;
 font-size:28px;
 font-weight:400;
}
.Arcon {
 font-family:'DM Sans';
}
.TwCenMT {
}
.oxel_icon_button__container:hover{
}
.oxel_icon_button__container {
 padding-top:0px;
 padding-right:0px;
 padding-bottom:0px;
 transition-duration:0.3s;
 color:#ffffff;
 width:100%;
 margin-top:0px;
 margin-right:0px;
 margin-bottom:0px;
 margin-left:0px;
 text-align:left;
 padding-left:0px;
}
.oxel_icon_button__container:not(.ct-section):not(.oxy-easy-posts),
.oxel_icon_button__container.oxy-easy-posts .oxy-posts,
.oxel_icon_button__container.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:space-around;
}
.download-button {
 padding-top:10px;
 padding-bottom:10px;
}
.oxel_icon_button_icon:hover{
color: #e30613;}.oxel_icon_button_icon:hover{
}
.oxel_icon_button_icon {
color: #ffffff;}.oxel_icon_button_icon 
>svg {width: 18px;height: 18px;}.oxel_icon_button_icon {
 margin-right:8px;
 width:10%;
}
.oxel_reviewbox__image_wrapper__image {
 max-width:1000px;
 height:100%;
}
.oxel_reviewbox__image_wrapper {
 overflow:hidden;
 text-align:left;
 border-radius:50%;
 border-top-color:#f9f9fa;
 border-right-color:#f9f9fa;
 border-bottom-color:#f9f9fa;
 border-left-color:#f9f9fa;
 border-top-width:8px;
 border-right-width:8px;
 border-bottom-width:8px;
 border-left-width:8px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 height:200px;
 flex-shrink:0;
 margin-right:16px;
}
.oxel_reviewbox__image_wrapper:not(.ct-section):not(.oxy-easy-posts),
.oxel_reviewbox__image_wrapper.oxy-easy-posts .oxy-posts,
.oxel_reviewbox__image_wrapper.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
@media (max-width: 767px) {
.oxel_reviewbox__image_wrapper {
 margin-bottom:32px;
 margin-left:auto;
 margin-right:auto;
}
}

@media (max-width: 479px) {
.oxel_reviewbox__image_wrapper {
 margin-bottom:32px;
 margin-left:auto;
 margin-right:auto;
}
}

.oxel_reviewbox__details_wrapper {
 padding-left:0px;
 flex-grow:1;
}
@media (max-width: 767px) {
.oxel_reviewbox__details_wrapper {
 text-align:center;
 padding-left:0px;
}
.oxel_reviewbox__details_wrapper:not(.ct-section):not(.oxy-easy-posts),
.oxel_reviewbox__details_wrapper.oxy-easy-posts .oxy-posts,
.oxel_reviewbox__details_wrapper.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
}

@media (max-width: 479px) {
.oxel_reviewbox__details_wrapper {
 padding-left:0px;
}
}

.oxel_reviewbox__details_wrapper__name {
 font-weight:600;
 text-transform:uppercase;
 font-size:32px;
 color:#374047;
 line-height:1.2;
 margin-bottom:8px;
}
.oxel_reviewbox__details_wrapper__star_wrapper {
 margin-top:8px;
 margin-bottom:8px;
}
.oxel_reviewbox__details_wrapper__star_wrapper:not(.ct-section):not(.oxy-easy-posts),
.oxel_reviewbox__details_wrapper__star_wrapper.oxy-easy-posts .oxy-posts,
.oxel_reviewbox__details_wrapper__star_wrapper.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
}
.oxel_reviewbox__star {
color: #7f8b93;}.oxel_reviewbox__star 
>svg {width: 22px;height: 22px;}.oxel_reviewbox__star {
}
.oxel_reviewbox__row {
 width:100%;
 padding-top:32px;
 padding-left:32px;
 padding-right:32px;
 padding-bottom:32px;
 text-align:left;
}
.oxel_reviewbox__row:not(.ct-section):not(.oxy-easy-posts),
.oxel_reviewbox__row.oxy-easy-posts .oxy-posts,
.oxel_reviewbox__row.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-items:center;
justify-content:flex-start;
}
@media (max-width: 767px) {
.oxel_reviewbox__row {
 text-align:center;
}
.oxel_reviewbox__row:not(.ct-section):not(.oxy-easy-posts),
.oxel_reviewbox__row.oxy-easy-posts .oxy-posts,
.oxel_reviewbox__row.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
}

@media (max-width: 479px) {
}

.oxel_reviewbox__review_body {
}
@media (max-width: 767px) {
.oxel_reviewbox__review_body {
 text-align:left;
}
}

@media (max-width: 479px) {
.oxel_reviewbox__review_body {
 text-align:left;
}
}

.oxel_reviewbox {
 background-color:#eceeef;
 width:100%;
}
.oxel_reviewbox__details_wrapper__title {
 font-size:14px;
 color:#606e79;
}
.asset-grid {
}
.preview_image {
}
.ct-link {
}
.download-btn {
}
.oxel_icon_button_text:hover{
 transition-duration:0.6s;
 transition-delay:0.7s;
}
.oxel_icon_button_text {
 font-family:'DM Sans';
 color:#ffffff;
 text-transform:uppercase;
 width:80%;
 font-size:16px;
}
.oxel_horizontal_divider__icon {
border: 1px solid;
padding: 0px;color: #ff0707;}.oxel_horizontal_divider__icon 
>svg {width: 50px;height: 50px;}.oxel_horizontal_divider__icon {
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-color:#c4c4c4;
 border-right-color:#c4c4c4;
 border-bottom-color:#c4c4c4;
 border-left-color:#c4c4c4;
 border-top-width:3px;
 border-right-width:3px;
 border-bottom-width:3px;
 border-left-width:3px;
flex-shrink: 0;
}
.oxel_horizontal_divider__icon:not(.ct-section):not(.oxy-easy-posts),
.oxel_horizontal_divider__icon.oxy-easy-posts .oxy-posts,
.oxel_horizontal_divider__icon.ct-section .ct-section-inner-wrap{
display:flex;
}
.oxel_iconlist {
 max-width:100%;
}
.oxel_iconlist__row {
 padding-top:8px;
 padding-left:8px;
 padding-right:8px;
 padding-bottom:8px;
 width:100%;
 margin-top:0px;
}
.oxel_iconlist__row:not(.ct-section):not(.oxy-easy-posts),
.oxel_iconlist__row.oxy-easy-posts .oxy-posts,
.oxel_iconlist__row.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.oxel_iconlist__row__icon {
color: #7f8b93;}.oxel_iconlist__row__icon 
>svg {width: 18px;height: 18px;}.oxel_iconlist__row__icon {
 margin-left:32px;
 margin-right:32px;
}
.oxel_iconlist__row__label {
}
.oxel_iconlist__row--dark {
 background-color:#eceeef;
}
.valueText {
 font-family:'Arimo';
 font-size:24px;
 font-weight:700;
}
.oxel_scrollingImage__container:hover{
 background-position:50% 100%;
}
.oxel_scrollingImage__container {
background-size: cover; height:400px;
 background-repeat:no-repeat;
 transition-duration:5s;
 transition-timing-function:ease-in-out;
 transition-property:background-position;
 text-align:center;
 width:600px;
 max-width:100%;
 overflow:hidden;
 background-position:50% 0px;
}
.oxel_scrollingImage__container:not(.ct-section):not(.oxy-easy-posts),
.oxel_scrollingImage__container.oxy-easy-posts .oxy-posts,
.oxel_scrollingImage__container.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
@media (max-width: 767px) {
.oxel_scrollingImage__container {
 width:100%;
}
}

.oxel_scrollingImage__container__icon {
background-color: rgba(0,0,0,0.17);
border: 1px solid rgba(0,0,0,0.17);
padding: 16px;color: #f9f9fa;}.oxel_scrollingImage__container__icon 
>svg {width: 55px;height: 55px;}.oxel_scrollingImage__container__icon {
 transition-duration:2.5s;
}
.h1-micro-glitch {
 font-weight:300;
 padding-top:0px;
 padding-right:0px;
 padding-bottom:0px;
 padding-left:0px;
 margin-bottom:0px;
 color:#474747;
}
.type-once {
}
.oxel_image_comparison__label_before {
background-image:linear-gradient(#f9f9fa, #f9f9fa); position:absolute;
 left:32px;
 top:32px;
 background-color:rgba(249,249,250,0.5);
 padding-top:8px;
 padding-left:8px;
 padding-right:8px;
 padding-bottom:8px;
 font-size:14px;
 letter-spacing:4px;
 text-transform:uppercase;
 z-index:5;
}
.oxel_image_comparison__label_after {
 position:absolute;
 top:32px;
 background-color:#f9f9fa;
 padding-top:8px;
 padding-left:8px;
 padding-right:8px;
 padding-bottom:8px;
 font-size:14px;
 letter-spacing:4px;
 text-transform:uppercase;
 right:32px;
 z-index:5;
}
.oxel-image-comparisonv2__image {
 position:static;
 top:0px;
 right:0px;
 bottom:0px;
 left:0px;
 height:100%;
 width:100%;
}
.oxel-image-comparisonv2 {
 position:relative;
 text-align:center;
 width:100%;
}
.oxel-image-comparisonv2:not(.ct-section):not(.oxy-easy-posts),
.oxel-image-comparisonv2.oxy-easy-posts .oxy-posts,
.oxel-image-comparisonv2.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.oxel-image-comparisonv2__icon {
background-color: #f9f9fa;
border: 1px solid #f9f9fa;
padding: 8px;color: #374047;}.oxel-image-comparisonv2__icon 
>svg {width: 32px;height: 32px;}.oxel-image-comparisonv2__icon {
 position:absolute;
 z-index:2147483640;
 border-top-style:none;
 border-right-style:none;
 border-bottom-style:none;
 border-left-style:none;
 left:calc(50% - 24px) ;
}
.oxel-image-comparisonv2__icon:not(.ct-section):not(.oxy-easy-posts),
.oxel-image-comparisonv2__icon.oxy-easy-posts .oxy-posts,
.oxel-image-comparisonv2__icon.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
justify-content:center;
}
.oxel-image-comparisonv2__image--after {
 position:absolute;
}
.cell {
 width:100%;
 margin-bottom:0px;
}
.cell:not(.ct-section):not(.oxy-easy-posts),
.cell.oxy-easy-posts .oxy-posts,
.cell.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.center-all:hover{
 border-top-style:none;
 border-right-style:none;
 border-bottom-style:none;
 border-left-style:none;
 border-top-color:#000000;
 border-right-color:#000000;
 border-bottom-color:#000000;
 border-left-color:#000000;
}
.center-all {
 width:100%;
 object-fit:cover;
 margin-left:0px;
}
.wp-colour-option {
}
.wp-colour-preview {
 width:100%;
}
.wp-colour-name {
}
.wp-colour-hex {
}
.sidebar {
 padding-right:12px;
 position:absolute;
 z-index:9999;
 min-width:70px;
 visibility:visible;
 padding-top:12px;
 padding-left:12px;
 padding-bottom:12px;
 overflow:hidden;
 margin-top:0px;
 margin-left:0px;
 margin-right:0px;
 margin-bottom:0px;
 background-color:rgba(227,6,19,0);
 gap:0px;
 top:0px;
 width:70px;
 height:100vw;
 left:0px;
}
.sidebar:not(.ct-section):not(.oxy-easy-posts),
.sidebar.oxy-easy-posts .oxy-posts,
.sidebar.ct-section .ct-section-inner-wrap{
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
gap:0px;
}
.menu-group {
 gap:0px;
}
.menu-group:not(.ct-section):not(.oxy-easy-posts),
.menu-group.oxy-easy-posts .oxy-posts,
.menu-group.ct-section .ct-section-inner-wrap{
gap:0px;
}
.menu-item {
 padding-top:0px;
 padding-left:0px;
 padding-bottom:0px;
 margin-top:0px;
 margin-right:0px;
 margin-bottom:0px;
 margin-left:0px;
 background-color:rgba(0,0,0,0);
}
.menu-item:not(.ct-section):not(.oxy-easy-posts),
.menu-item.oxy-easy-posts .oxy-posts,
.menu-item.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
}
.main-label {
 font-family:Open Sans;
 color:#000000;
 font-size:24px;
}
.menu-label {
 color:#ffffff;
 font-size:24px;
 font-weight:400;
 padding-top:0px;
 padding-left:0px;
 padding-right:0px;
 padding-bottom:0px;
 margin-top:0px;
 margin-right:0px;
 margin-bottom:0px;
 margin-left:0px;
 line-height:1;
 overflow:hidden;
.sidebar .menu-label overflow:hidden; text-overflow:ellipsis;
}
.menu-icon {
 width:30px;
 min-width:32px;
 min-height:32px;
 background-color:rgba(0,0,0,0);
}
.glitch {
}
.type {
}
.grid-2 {
}
.grid--2 {
 width:100%;
 margin-top:7px;
}
.grid--2:not(.ct-section):not(.oxy-easy-posts),
.grid--2.oxy-easy-posts .oxy-posts,
.grid--2.ct-section .ct-section-inner-wrap{
display:flex;
}
.arcon {
}
.twcen {
 margin-bottom:0px;
}
.tabs-8271-tab:active{
 border-bottom-width:2px;
 border-bottom-color:#e30613;
 border-bottom-style:solid;
}
.tabs-8271-tab {
 margin-top:0px;
 margin-right:0px;
 margin-bottom:0px;
 margin-left:0px;
}
.tabs-8271-tab-active {
}
.tabs-contents-8271-tab {
}
.colour-row {
}
.colour-tile {
}
.colour-name {
}
.toast {
}
.hs-section {
}
.hs-section .ct-section-inner-wrap {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.hs-track {
 padding-top:0px;
 padding-right:0px;
 padding-bottom:0px;
 padding-left:0px;
 margin-top:0px;
 margin-right:0px;
 margin-bottom:0px;
 margin-left:0px;
}
.hs-slide {
 width:100vw;
}
.pin-hs {
}
.pin-hs__sticky {
}
.pin-hs__track {
 background-color:#ff0000;
}
.pin-hs__slide {
 background-color:#ff0000;
}
.wp-logo-tabs {
}
.wp-logo-tabs .ct-section-inner-wrap {
padding-top: 0;
padding-bottom: 0;
}
.wp-logo-tabs__inner {
 margin-top:50px;
}
.wp-logo-tabs__nav {
}
.wp-logo-tabs__tab {
}
.is-active {
 width:100%;
}
.is-active:not(.ct-section):not(.oxy-easy-posts),
.is-active.oxy-easy-posts .oxy-posts,
.is-active.ct-section .ct-section-inner-wrap{
display:flex;
}
.wp-logo-tabs__panels {
}
.wp-logo-tabs__panel {
}
.wp-usage {
}
.wp-usage__thumbs {
}
.wp-usage__stage {
}
.wp-usage-thumb {
}
.is-ok {
}
.is-bad {
}
.wp-usage-slide {
 width:100%;
}
.wp-usage-visual {
}
.wp-usage-spec {
}
.thumb {
}
.is-correct {
}
.is-wrong {
}
.logo-mark {
}
@media (max-width: 479px) {
.logo-mark {
 width:32px;
 height:32px;
}
}

.logo-full {
}
.fa-share-nodes {
}
.sidebar-cta {
}
.rag-handle {
 padding-top:15px;
 padding-right:15px;
 padding-bottom:15px;
 padding-left:15px;
 position:fixed;
 top:100px;
 right:100px;
}
.drag-handle {
.drag-handle cursor: move; color: #fff; padding: 8px 12px; font-size: 14px; user-select: none; display: inline-flex; align-items: center;
}
.oxy-superbox-primary {
}
.oxy-superbox-secondary {
}
@font-face {
    font-family: 'Arcon';
    src: url('https://brandhub.wetpaint.co.za/wp-content/uploads/fonts/Arcon-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Stalemate';
    src: url('https://brandhub.wetpaint.co.za/wp-content/uploads/fonts/Stalemate-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TwCenMT';
    src: url('https://brandhub.wetpaint.co.za/wp-content/uploads/fonts/tw-cen-mt.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/* -----------------------------------------------------
   FONT DECLARATIONS (from your uploaded fonts)
----------------------------------------------------- */

.font-arcon {
    font-family: 'Arcon', sans-serif;
}

.font-stalemate {
    font-family: 'Stalemate', cursive;
}

.font-twcen {
    font-family: 'TwCenMT', sans-serif;
}

/* -----------------------------------------------------
   GLOBAL COLORS — (Wetpaint CI)
----------------------------------------------------- */
:root {
    --wp-red: #e30613;
    --wp-burgundy: #951a1d;
    --wp-grey: #706f6f;
    --wp-black: #000000;
}

/* -----------------------------------------------------
   HEADINGS (Arcon – External Communication Style)
   Ratio based on 4pt increments as per CI
----------------------------------------------------- */

h1 {
    font-family: "Arimo", sans-serif;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: #000;
    margin: 0 0 16px;
}

h2 {
    font-family: 'Arimo';
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: #474747;
    margin: 0 0 16px;
  
} 

h3 {
    font-family: 'Arimo';
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin: 0 0 16px;
  
} 


h4, h5, h6 {
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin: 0 0 16px;
    color: #e30613;
}


h1 { font-size: 36px; }   /* 18pt + increments → main hero header */
h2 { font-size: 32px; }   /* subheader */
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

/* Responsive scaling */
@media (max-width: 768px) {
    h1 { font-size: 32px; }
    h2 { font-size: 28px; }
    h3 { font-size: 22px; }
}

/* -----------------------------------------------------
   BODY COPY (TW Cen MT – Internal / Standard Copy)
   Minimum body size per CI is 10pt (~13px)
----------------------------------------------------- */

p {
  color:##707070;
}


p, li, span, a {
    font-family: "DM Sans", sans-serif!important;
    font-size: 18px;   /* Base body copy */
    line-height: 1.6;
    color: var(--wp-grey);
    margin-bottom: 1em;
      font-weight: 500;
}


.ct-text-block{
      font-size: 16px!important; 
}


/* Strong emphasis variants */
p strong, span strong {
    color: var(--wp-black);
    font-weight: 700;
}

/* -----------------------------------------------------
   LINKS — CI styling
----------------------------------------------------- */
a {
    color: var(--wp-red);
    text-decoration: none;
    transition: color .2s ease;
}

a:hover {
    color: var(--wp-burgundy);
}

/* -----------------------------------------------------
   SIGNATURE ACCENT FONT (Stalemate)
   Used sparingly (quotes, accents, highlights)
----------------------------------------------------- */
.signature {
    font-family: 'Stalemate', cursive;
    font-size: 32px;
    line-height: 1;
    color: var(--wp-red);
}

/* -----------------------------------------------------
   HELPER CLASSES — For CI ratio increments
----------------------------------------------------- */

.text-s { font-size: 14px; }  /* smaller internal notes */
.text-m { font-size: 16px; }  /* default body */
.text-l { font-size: 20px; }  /* subheader */
.text-xl { font-size: 24px; } /* larger section header */

/* -----------------------------------------------------
   OPTIONAL — Red Accent Header Style
----------------------------------------------------- */

.h-red {
    color: var(--wp-red);
}

.h-grey {
    color: var(--wp-grey);
}

.h-black {
    color: var(--wp-black);
}


.numberCard  {
font-size:40px!important;
  
}
/* ====================================================
   WETPAINT BRAND HUB – GA STYLE SIDEBAR (FULL CSS)
   Updated for your NEW structure:
   .sidebar > a (LOGO LINK)
   .sidebar > .menu-group (MENU LINKS)
   .sidebar > .sidebar-cta (CTA BLOCK)
   ==================================================== */

/* ---------- Brand Variables ---------- */
:root{
  --wp-red:#e30613;
  --wp-burgundy:#951a1d;
  --wp-grey:#706f6f;
  --wp-black:#000000;
}

/* ---------- Layout Wrapper ---------- */
.site-wrapper{
  display:flex;
  flex-direction:row;
  min-height:100vh;
  width:100%;
}

/* ---------- Sidebar ---------- */
.sidebar{
  position:fixed;
  top:0;
  left:0;
  width:70px;                 /* collapsed width */
  min-width:70px;
  height:100vh;
  background:var(--wp-red);
  padding:18px 12px;
  overflow:hidden;
  z-index:9999;
  transition:width .25s ease;

  /* allow CTA to pin to bottom */
  display:flex;
  flex-direction:column;

  /* NEW: center items in collapsed state */
  align-items:center;
}

/* Expand on hover */
.sidebar:hover{
  width:300px;                /* expanded width */

  /* NEW: revert to left aligned on hover */
  align-items:flex-start;
}

/* ---------- Logo Link (NOW OUTSIDE menu-group) ---------- */
.sidebar > a:first-child{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:18px;
  width:100%;
  padding:8px 0 24px;
  margin-bottom:10px;         /* adjust as needed */
  text-decoration:none;
  position:relative;
}

/* W mark */
.sidebar > a:first-child .logo-mark{
  width:34px;                 /* collapsed icon size */
  height:auto;
  opacity:1;
  transform:translateY(0) scale(1);
  transition:opacity .25s ease, transform .25s ease;
}

/* Full wordmark */
.sidebar > a:first-child .logo-full{
  width:150px;                /* expanded logo size */
  max-width:100%;
  height:auto;

  opacity:0;
  transform:translateY(-6px);
  transition:opacity .25s ease, transform .25s ease;

  pointer-events:none;
}

/* Swap on hover (expanded) */
.sidebar:hover > a:first-child .logo-mark{
  opacity:0;
  transform:scale(.96);
}

.sidebar:hover > a:first-child .logo-full{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* ---------- Menu Group ---------- */
.menu-group{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;                 /* helps centering in collapsed state */
}

/* ---------- Link Reset ---------- */
.sidebar a{
  display:block;
  text-decoration:none;
  color:inherit;
}

/* make each menu link full width so centering is consistent */
.sidebar .menu-group > a{
  width:100%;
}

/* ---------- Menu Item ---------- */
.menu-item{
  display:flex;
  align-items:center;
  gap:14px;
  height:26px;
  border-radius:14px;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;

  /* NEW: center contents in collapsed state (labels hidden) */
  justify-content:center;
}

/* On hover/expanded: go back to normal icon+label alignment */
.sidebar:hover .menu-item{
  justify-content:flex-start;
}

/* Hover state */
.sidebar .menu-group a:hover .menu-item{
  background:rgba(255,255,255,.15);
  transform:translateX(2px);
}

/* Active state (manual OR WP auto) */
.menu-item.is-active,
.sidebar a[aria-current="page"] .menu-item,
.sidebar a.current-menu-item .menu-item{
  background:rgba(255,255,255,.28);
}

/* ---------- Icon ---------- */
.menu-icon{
  width:36px;
  min-width:36px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Force Oxygen icons white */
.sidebar .ct-fancy-icon,
.sidebar .ct-fancy-icon svg{
  color:#ffffff;
  fill:#ffffff;
}

/* ---------- Label ---------- */
.menu-label{
  font-family:'TwCenMT', sans-serif;
  font-size:18px!important;
  line-height:1;
  font-weight:400;
  color:#ffffff;
  white-space:nowrap;
  margin:0;
  padding:0;

  /* hidden when collapsed */
  opacity:0;
  transform:translateX(-8px);
  transition:opacity .2s ease, transform .2s ease;

  /* fix for invalid custom-css line */
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Reveal labels on expand */
.sidebar:hover .menu-label{
  opacity:1;
  transform:translateX(0);
}

/* ====================================================
   CTA pinned to bottom + only visible on hover
   (your CTA div already has class "sidebar-cta")
   ==================================================== */
.sidebar-cta{
  margin-top:auto;            /* pin to bottom of sidebar */
  width:100%;
  padding:14px 10px 10px;

  /* hidden when collapsed */
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}

/* show CTA only when sidebar is expanded */
.sidebar:hover .sidebar-cta{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* keep CTA text tidy */
.sidebar-cta *{
  max-width:100%;
}

/* ---------- Main Content ---------- */
.main-content{
  margin-left:70px;           /* match collapsed sidebar */
  padding:24px;
  min-height:100vh;
  background:transparent;
}

/* ---------- Optional polish ---------- */
.sidebar,
.menu-item,
.menu-label{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---------- Optional: reduce hover “hit” on the logo link ---------- */
.sidebar > a:first-child:hover{
  background:transparent !important;
}

/* ---------- Mobile: prevent hover-expand weirdness ---------- */
@media (max-width: 768px){
  .sidebar{
    transition:none;
  }
  .sidebar:hover{
    width:70px;
    align-items:center; /* keep centered on mobile */
  }
  .sidebar:hover > a:first-child .logo-full{
    opacity:0;
    transform:translateY(-6px);
    pointer-events:none;
  }
  .sidebar:hover > a:first-child .logo-mark{
    opacity:1;
    transform:scale(1);
  }
  .sidebar:hover .menu-label{
    opacity:0;
    transform:translateX(-8px);
  }

  /* keep CTA hidden on mobile hover */
  .sidebar:hover .sidebar-cta{
    opacity:0;
    transform:translateY(8px);
    pointer-events:none;
  }

  /* keep icons centered on mobile */
  .menu-item{
    justify-content:center;
  }
}

/* =========================================
   FIX: TRUE ICON CENTERING IN COLLAPSED STATE
   (labels must not take up space)
   ========================================= */

/* make menu-item a positioning context */
.sidebar .menu-item{
  position:relative;
}

/* when NOT hovered (collapsed), remove labels from layout */
.sidebar:not(:hover) .menu-label{
  position:absolute;
  left:-9999px;           /* off-canvas */
  width:0;
  max-width:0;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}

/* when hovered (expanded), restore normal label flow */
.sidebar:hover .menu-label{
  position:static;
  width:auto;
  max-width:none;
  pointer-events:auto;
}

/* =========================================
   FIX: CENTER W LOGO IN COLLAPSED STATE
   ========================================= */

/* force true centering of the W image */
.sidebar:not(:hover) > a:first-child .logo-mark{
  display:block;
  margin-left:auto;
  margin-right:auto;
}

/* ensure the logo link itself does not offset content */
.sidebar:not(:hover) > a:first-child{
  align-items:center;
  text-align:center;
}
/* ============================================================
   ACTIVE STATE — add to BOTTOM of your existing Global CSS
   Works with the JS above which adds .is-active to .menu-item
   ============================================================ */

/* Remove old background active style */
.menu-item.is-active {
  background: transparent !important;
}

/* The dot — hidden by default */
.menu-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 22px;
  background: #ffffff;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Show dot in EXPANDED state */
.sidebar:hover .menu-item.is-active::before {
  opacity: 1;
  transform: translateY(-50%) scaleY(1);
}

/* Bold label in expanded state */
.sidebar:hover .menu-item.is-active .menu-label {
  font-weight: 700;
}

/* COLLAPSED state — horizontal pill under icon */
.sidebar:not(:hover) .menu-item::before {
  top: unset;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 18px;
  height: 3px;
  border-radius: 999px;
}

.sidebar:not(:hover) .menu-item.is-active::before {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}/* ==============================
   GLITCH EFFECT FOR H1
============================== */

.glitch {
  position: relative;
  color: #000;
  font-weight: 400;
}

/* Duplicate layers */
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}

/* Red glitch layer */
.glitch::before {
  left: 2px;
  text-shadow: -2px 0 #e30613;
  clip-path: inset(0 0 0 0);
  animation: glitch-red 2.5s infinite linear alternate-reverse;
}

/* Cyan glitch layer */
.glitch::after {
  left: -2px;
  text-shadow: -2px 0 #00c8ff;
  clip-path: inset(0 0 0 0);
  animation: glitch-blue 3s infinite linear alternate-reverse;
}

/* Animations */
@keyframes glitch-red {
  0% { clip-path: inset(0 0 90% 0); }
  10% { clip-path: inset(10% 0 70% 0); }
  20% { clip-path: inset(40% 0 30% 0); }
  30% { clip-path: inset(20% 0 60% 0); }
  40% { clip-path: inset(50% 0 20% 0); }
  50% { clip-path: inset(30% 0 40% 0); }
  60% { clip-path: inset(70% 0 10% 0); }
  70% { clip-path: inset(10% 0 80% 0); }
  80% { clip-path: inset(40% 0 30% 0); }
  90% { clip-path: inset(20% 0 60% 0); }
  100% { clip-path: inset(0 0 90% 0); }
}

@keyframes glitch-blue {
  0% { clip-path: inset(80% 0 0 0); }
  10% { clip-path: inset(60% 0 20% 0); }
  20% { clip-path: inset(30% 0 40% 0); }
  30% { clip-path: inset(50% 0 20% 0); }
  40% { clip-path: inset(20% 0 60% 0); }
  50% { clip-path: inset(40% 0 30% 0); }
  60% { clip-path: inset(10% 0 70% 0); }
  70% { clip-path: inset(60% 0 20% 0); }
  80% { clip-path: inset(30% 0 40% 0); }
  90% { clip-path: inset(50% 0 20% 0); }
  100% { clip-path: inset(80% 0 0 0); }
}
/* =========================================================
   Wetpaint Colour Tiles – Full CSS
   Requires:
   - Outer tile divs have class: .colour-tile  (and data-hex)
   - The row wrapper div has class: .colour-row
   - The H4 inside tile uses class: .colour-title (NOT colour-tile)
   - The spec text uses class: .colour-name
   - The "Copied" text uses class: .toast
   ========================================================= */

/* --- Row layout --- */
.colour-row{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  align-items:stretch;
}

/* --- Tile base --- */
.colour-tile{
  position:relative;
  width:calc(25% - 15px);
  min-height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  cursor:pointer;
  overflow:hidden;
  border-radius:16px;

  box-shadow:0 10px 24px rgba(0,0,0,.10);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* Responsive */
@media (max-width: 991px){
  .colour-tile{ width:calc(50% - 10px); }
}
@media (max-width: 600px){
  .colour-tile{ width:100%; }
}

/* Hover / active */
.colour-tile:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  filter:saturate(1.05);
}
.colour-tile:active{
  transform:translateY(-1px) scale(.995);
}

/* Keyboard focus */
.colour-tile:focus-within{
  outline:3px solid rgba(255,255,255,.55);
  outline-offset:4px;
}

/* --- Readability overlay (gradient) --- */
.colour-tile::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.20),
    rgba(0,0,0,.15) 40%,
    rgba(0,0,0,.35)
  );
  opacity:.75;
  z-index:1;
  pointer-events:none;
  transition:opacity .18s ease;
}
.colour-tile:hover::before{
  opacity:.9;
}

/* --- “Click to copy” badge (top-right) --- */
.colour-tile::after{
  content:"Click to copy";
  position:absolute;
  top:14px;
  right:14px;
  z-index:6;

  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:12px;
  line-height:1;

  opacity:0;
  transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.colour-tile:hover::after{
  opacity:1;
  transform:translateY(0);
}

/* --- Content stacking above overlay --- */
.colour-tile > *{
  position:relative;
  z-index:2;
}

/* Ensure your inner wrapper (if present) is centered nicely */
.colour-tile .colour-info{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* --- Hover colour name label (H4) --- */
/* Put class "colour-title" on the H4 heading inside each tile */
.colour-title{
  position:absolute;
  top:14px;
  left:50%;
  transform:translate(-50%, -6px);
  opacity:0;
  pointer-events:none;
  z-index:7;

  padding:6px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.60);
  color:#fff;

  font-size:13px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;

  transition:opacity .18s ease, transform .18s ease;
}

/* Reveal name on hover */
.colour-tile:hover .colour-title{
  opacity:1;
  transform:translate(-50%, 0);
}

/* Mobile: optionally always show the title */
@media (max-width: 768px){
  .colour-title{
    opacity:1;
    transform:translate(-50%, 0);
  }
}

/* --- Spec text block --- */
.colour-name{
  color:#fff;
  line-height:1.45;
  text-align:center;
  margin-top:18px; /* gives breathing room under the hidden title */
}

/* Optional: soften the <br> spacing a bit */
.colour-name br{
  content:"";
  display:block;
  margin:6px 0;
}

/* --- Toast (Copied) --- */
.toast{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translate(-50%, 10px) scale(.98);
  opacity:0;
  pointer-events:none;
  z-index:8;

  padding:10px 14px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:14px;
  line-height:1;

  transition:opacity .18s ease, transform .18s ease;
}

/* Show toast when copied */
.colour-tile.is-copied .toast{
  opacity:1;
  transform:translate(-50%, 0) scale(1);
}

/* Optional: If you have nested wrappers that might capture clicks,
   ensure they don't block the tile click */
.colour-tile *{
  user-select:none;
}
.font-demo {
  width: 100%;
}

.font-demo__label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

.font-demo__input {
  width: 100%;
  padding: 12px 14px;
  font-size: 36px;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
}

.font-demo__input:focus {
  border-color: #e30613;
}

/* Placeholder uses the font too */
.font-demo__input::placeholder {
  opacity: 0.6;
}


.Stalemate {
    font-family: 'Stalemate', cursive;
}


.arcon {
    font-family: 'Arcon', sans-serif;
}



.twcen {
    font-family: 'TwCenMT', sans-serif;
}/* =========================================
   WETPAINT: RULES TABS (LEFT) + PANELS (RIGHT)
   - Pill tabs (full width)
   - Hover desktop + click mobile (JS handles)
   - Panels stacked + equal-height wrapper (no jump)
   - Two-column content inside each panel remains as built in Oxygen
========================================= */

/* SECTION */
.wp-logo-tabs{
  width: 100%;
  padding: clamp(32px, 5vw, 72px) 0;
}

/* INNER LAYOUT: left tabs + right panels */
.wp-logo-tabs__inner{
  width: min(1200px, 92vw);
  margin: 0 auto;
  display: flex;
  gap: clamp(18px, 3vw, 44px);
  align-items: flex-start;
}

/* LEFT NAV COLUMN */
.wp-logo-tabs__nav{
  width: 25%;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  top: 110px; /* adjust for your header */
}

/* PILL TAB BUTTONS (Text Links) */
.wp-logo-tabs__tab{
  /* make text links behave like buttons */
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  box-sizing: border-box;
  padding:10px;
  border-radius: 999px;

  text-decoration: none;
  text-align: center;
  cursor: pointer;

  /* typography */

  text-transform: uppercase;


  /* wetpaint red pill */
  background: #e30613;
  color: #ffffff;

  border: none;

  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
}

/* HOVER STATE */
.wp-logo-tabs__tab:hover{
  background: #706f6f;   /* Wetpaint grey */
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}


.wp-logo-tabs__tab.is-active{
  background: #c70510;
  color: #ffffff;
  box-shadow: 0 18px 36px rgba(227,6,19,0.35);
}

.wp-logo-tabs__tab.is-active:hover{
  background: #c70510;
}


/* Optional: subtle press feedback */
.wp-logo-tabs__tab:active{
  transform: translateY(0px);
  box-shadow: 0 10px 22px rgba(227, 6, 19, 0.22);
}

/* RIGHT PANELS WRAPPER */
.wp-logo-tabs__panels{
  width: 75%;
  position: relative; /* becomes the "stage" */
  border-radius: 18px;
}

/* PANELS: stack on top of each other to avoid height jumping */
.wp-logo-tabs__panel{
  position: absolute;
  inset: 0;
  width: 100%;

  /* DO NOT use display:none here (we need measurement) */
  display: block;

  opacity: 0;
  pointer-events: none;

  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #ffffff;

  padding: clamp(18px, 3vw, 34px);
  box-sizing: border-box;

  transition: opacity .2s ease;
}

/* ACTIVE PANEL */
.wp-logo-tabs__panel.is-active{
  opacity: 1;
  pointer-events: auto;
}

/* Images in panels */
.wp-logo-tabs__panel img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Make sure inner column blocks align nicely */
.wp-logo-tabs__panel .ct-div-block{
  box-sizing: border-box;
}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 900px){

  .wp-logo-tabs__inner{
    flex-direction: column;
  }

  .wp-logo-tabs__nav{
    width: 100%;
    min-width: 0;
    position: relative;
    top: auto;

    /* 2-up pill grid on mobile */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .wp-logo-tabs__panels{
    width: 100%;
    position: relative;
    border-radius: 18px;
    height: auto !important; /* let it flow on mobile */
  }

  /* On mobile, panels should flow normally (no stacking) */
  .wp-logo-tabs__panel{
    position: static;
    inset: auto;
    opacity: 1;
    pointer-events: auto;

    /* keep them hidden via JS convention if you want only one shown on mobile:
       uncomment the next two blocks and remove the opacity:1 above.
    */
    /* display: none; */
  }
  /* .wp-logo-tabs__panel.is-active{ display:block; } */

  .wp-logo-tabs__tab{
    padding: 14px 16px;
    font-size: 0.85rem;
  }
}

@media (max-width: 520px){
  .wp-logo-tabs__nav{
    grid-template-columns: 1fr; /* stack pills */
  }
}

.wp-logo-tabs__panels{
  width: 75%;
  position: relative;
  border-radius: 18px;
  overflow: hidden; /* 👈 THIS FIXES THE FLASH */
}

/* =========================================================
   WETPAINT – USAGE (YOUR EXISTING CAROUSEL #191 + #195)
   Fixes:
   - thumbs show 4 across (not 1 per row)
   - spacing not squashed / not overlaying
   - clean “card” look
   - tick/cross indicator on ACTIVE thumbnail only
   IMPORTANT:
   Add ONE extra class to EACH THUMB CELL (in carousel #191):
   - correct ones: add class "is-correct"
   - wrong ones:   add class "is-wrong"
   (Keep your existing classes: cell center-all)
========================================================= */

/* ------- scope to your section (Oxygen id) ------- */
#section-189-59{
  width: 100%;
}

/* =========================================================
   THUMBS CAROUSEL (#191)
========================================================= */
#-carousel-builder-191-59{
  width: 100%;
  margin-top: 30px;
}

/* give the carousel some breathing room */
#-carousel-builder-191-59 .flickity-viewport{
  overflow: visible; /* allows shadows without clipping */
}

/* thumbs row spacing */
#-carousel-builder-191-59 .flickity-slider{
  display: flex;
  align-items: stretch;
}

/* EACH THUMB CELL (this is what was making it look squashed / 1-per-row when width:100% leaked in) */
#-carousel-builder-191-59 .cell{
  /* hard override Oxygen class rules that set width:100% */
  width: 25% !important;        /* 4 across */
  flex: 0 0 25% !important;

  box-sizing: border-box;
  padding: 0 12px;              /* gap between thumbs */
}

/* the actual “thumb card” is your div.cell.center-all */
#-carousel-builder-191-59 .cell.center-all{
  position: relative;           /* needed for indicator positioning */
  display: flex;
  align-items: center;
  justify-content: center;

  height: 120px;
  border-radius: 26px;

  background: #ffffff;
  border: 2px solid rgba(227,6,19,0.35);

  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* thumb images */
#-carousel-builder-191-59 .cell.center-all img{
  width: 100% !important;
  height: 80px !important;
  object-fit: contain;
  display: block;
}

/* hover */
#-carousel-builder-191-59 .cell.center-all:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.12);
  border-color: rgba(227,6,19,0.55);
}

/* ACTIVE thumb (Flickity adds .is-nav-selected) */
#-carousel-builder-191-59 .is-nav-selected.cell.center-all{
  border-color: #e30613;
  box-shadow: 0 18px 44px rgba(227,6,19,0.20);
}

/* ---- tick/cross indicator ON ACTIVE ONLY ---- */
#-carousel-builder-191-59 .cell.center-all.is-nav-selected::after{
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

/* ✅ correct */
#-carousel-builder-191-59 .cell.center-all.is-correct.is-nav-selected::after{
  background: #169b55; /* green */
  content: "✓";
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
}

/* ❌ wrong */
#-carousel-builder-191-59 .cell.center-all.is-wrong.is-nav-selected::after{
  background: #e30613; /* red */
  content: "×";
  color: #fff;
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
}

/* responsive thumbs */
@media (max-width: 900px){
  #-carousel-builder-191-59 .cell{
    width: 50% !important;   /* 2 across */
    flex: 0 0 50% !important;
    padding: 0 10px;
  }
  #-carousel-builder-191-59 .cell.center-all{
    height: 110px;
    border-radius: 22px;
  }
}
@media (max-width: 520px){
  #-carousel-builder-191-59 .cell{
    width: 100% !important;  /* 1 across */
    flex: 0 0 100% !important;
    padding: 0 8px;
  }
}

/* =========================================================
   STAGE CAROUSEL (#195) – the big “image + text” slides
========================================================= */
#-carousel-builder-195-59{
  width: 100%;
  margin-top: 26px; /* space so it never visually collides with thumbs */
}

#-carousel-builder-195-59 .flickity-viewport{
  overflow: visible;
}

/* each slide wrapper (your .cell rows inside #195) */
#-carousel-builder-195-59 .cell{
  box-sizing: border-box;
  width: 100%;

  display: flex;
  align-items: center;
  gap: clamp(22px, 4vw, 54px);

  padding: clamp(22px, 3vw, 44px);
  border-radius: 26px;

  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 16px 44px rgba(0,0,0,0.08);

  /* keeps layout from feeling “squashed” */
  min-height: 360px;
}

/* left visual column */
#-carousel-builder-195-59 .cell > div:first-child{
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* right text column */
#-carousel-builder-195-59 .cell > div:last-child{
  width: 50%;
}

/* big slide image */
#-carousel-builder-195-59 .cell img{
  max-width: min(520px, 100%);
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* headings + body tidy */
#-carousel-builder-195-59 h3{
  margin: 0 0 10px 0;
}
#-carousel-builder-195-59 p{
  margin: 0;
  line-height: 1.55;
}

/* stage responsive */
@media (max-width: 900px){
  #-carousel-builder-195-59 .cell{
    flex-direction: column;
    text-align: left;
    min-height: 0;
  }
  #-carousel-builder-195-59 .cell > div:first-child,
  #-carousel-builder-195-59 .cell > div:last-child{
    width: 100%;
  }
  #-carousel-builder-195-59 .cell img{
    max-width: 100%;
  }
}


/* =========================================================
   INDICATOR ON CONTENT PANELS (Carousel #195)
   Add class on each slide wrapper:
   - is-correct  OR  is-wrong
========================================================= */

#-carousel-builder-195-59 .cell{
  position: relative; /* needed for the badge */
}

/* Badge base (top-left) */
#-carousel-builder-195-59 .cell.is-correct::before,
#-carousel-builder-195-59 .cell.is-wrong::before{
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 5;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 16px;
  border-radius: 999px;

  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: #ffffff;
  box-shadow: 0 12px 26px rgba(0,0,0,0.16);
}

/* ✅ Correct */
#-carousel-builder-195-59 .cell.is-correct::before{
  content: "✓  Correct usage";
  background: #169b55;
}

/* ❌ Incorrect */
#-carousel-builder-195-59 .cell.is-wrong::before{
  content: "×  Incorrect usage";
  background: #e30613;
}

/* Optional: make the panel border match the status */
#-carousel-builder-195-59 .cell.is-correct{
  border: 2px solid rgba(22,155,85,0.25);
}
#-carousel-builder-195-59 .cell.is-wrong{
  border: 2px solid rgba(227,6,19,0.22);
}

/* Mobile spacing so badge doesn't feel cramped */
@media (max-width: 900px){
  #-carousel-builder-195-59 .cell.is-correct::before,
  #-carousel-builder-195-59 .cell.is-wrong::before{
    top: 14px;
    left: 14px;
  }
}
#image-231-47 {
  animation: slow-rotate 120s linear infinite;
}

@keyframes slow-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#image-231-47 {
  display: inline-block;
  transform-origin: center center;
}

#_nav_menu-847-59 a.is-active {
  border-bottom: 2px solid #fff;
}
#_nav_menu-847-59 li.current-menu-item > a {
  border-bottom: 2px solid #fff;
}.download-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background:#e30613;
    width:34px;
    height:34px;

    transition: all .25s ease;
    overflow:hidden;
}

/* icon */
.download-btn svg {
    transition: transform .25s ease;
}

/* hover */
.download-btn:hover {
    background:#000;
    transform: translateY(-3px);
}

/* icon animation */
.download-btn:hover svg{
    transform: translateY(2px);
}

/* ripple highlight */
.download-btn::after{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    background:rgba(255,255,255,0.2);
    left:-100%;
    top:0;
    transition:all .35s ease;
}

.download-btn:hover::after{
    left:0;
}


.asset-grid .download-btn{
    opacity:0;
    transform:translateY(10px);
    transition:all .25s ease;
}

.asset-grid div:hover .download-btn{
    opacity:1;
    transform:translateY(0);
}