/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
:root {
	interpolate-size: allow-keywords;
	
	--fs-color-success-darker: color-mix(in srgb, var(--fs-color-success) 50%, #000000);
	--fs-color-success-lighter: color-mix(in srgb, var(--fs-color-success) 50%, #ffffff);
	--fs-100: clamp(0.8rem, 0.165vw + 0.759rem, 0.891rem);
	--fs-200: clamp(1rem, 0.341vw + 0.915rem, 1.188rem);
	--fs-300: clamp(1.25rem, 0.605vw + 1.099rem, 1.583rem);
	--fs-400: clamp(1.563rem, 0.996vw + 1.314rem, 2.11rem);
	--fs-500: clamp(1.953rem, 1.563vw + 1.562rem, 2.813rem);
	--fs-600: clamp(2.441rem, 2.378vw + 1.847rem, 3.749rem);
	--fs-700: clamp(3.052rem, 3.538vw + 2.167rem, 4.998rem);
}

body {
	
	main, footer, .mfp-content {
		font: normal normal normal var(--fs-200)/1.5 inherit, sans-serif, system-ui;
		
		:is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, select, label, legend, button:not(.toggle), .button:not(.icon)) {margin-block: 0; margin-inline: 0;}
		:is(p, ul, ol, button:not(.toggle), .button:not(.icon)):has(+ :is(h1, h2, h3, h4, h5, h6)) {margin-block-end: 2em;}
		:is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, form, label, legend, button:not(.toggle), .button:not(.icon)):has(+ :is(p, ul, ol, blockquote, button, form, div, .button)) {margin-block-end: 0.75em;}
		
		ul:not([class]) {padding-inline-start: 1.25em;}
		ol:not([class]) {padding-inline-start: 1.75em;}
		
		:is(ul, ol):not([class]) {
			
			li, .col-inner & li {
				margin-inline: 0px;
			}
			
		}
		
		ul:has(.recent-blog-posts-li) {
			padding: 0;
		}

		h1 {font-size: var(--fs-500);}
		h2 {font-size: var(--fs-400);}
		h3 {font-size: var(--fs-300);}
		h4 {font-size: var(--fs-200);}
		h5 {font-size: var(--fs-200);}
		h6 {font-size: var(--fs-100);}
		blockquote, .product-short-description {font-size: var(--fs-100);}

		.fs-100 :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {font-size: var(--fs-100);}
		.fs-200 :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {font-size: var(--fs-200);}
		.fs-300 :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {font-size: var(--fs-300);}
		.fs-400 :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {font-size: var(--fs-400);}
		.fs-500 :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {font-size: var(--fs-500);}
		.fs-600 :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {font-size: var(--fs-600);}
		.fs-700 :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {font-size: var(--fs-700);}
		
	}
	
}

iframe {
	display: block;
}

.mfp-wrap {
	
	.lightbox-content {
		overflow: clip;
		background-color: transparent;
		border-radius: 30px;
	}
	
}

svg {
	fill: #000;
	
	.pri > & {fill: var(--fs-color-primary);}
	.sec > & {fill: var(--fs-color-secondary);}
	.suc > & {fill: var(--fs-color-success);}
	.alr > & {fill: var(--fs-color-alert);}
	.dark & {fill: #fff;}
	
	path.primary {fill: var(--fs-color-primary);}
	path.secondary {fill: var(--fs-color-secondary);}
	path.success {fill: var(--fs-color-success);}
	path.alert {fill: var(--fs-color-alert);}
	
	a:has(&) {
		display: block;
	
		path {
			transition: fill 0.15s ease-in-out;
		}

		&:hover path {
			fill: var(--fs-color-secondary);
		}
		
	}
	
	.dark a > & {
		transition: fill 0.2s ease-in-out;

		&:hover {
			fill: var(--fs-color-primary);
		}
		
	}
	
	
	.contain & {
		width: 100%;
		aspect-ratio: 1 / 1;
	}
	
	.contain.wide & {
		aspect-ratio: 16 / 9;
	}

}

.bleeder > .col-inner {
	position: relative;
	isolation: isolate;
	
	&::before {
		content:'';
		position: absolute;
		inset: 0 auto;
		border-radius: 30px;
		width: 200vw;
		z-index: -1;
		background: #000;
	}
	
	:not(.start, .end) > &::before {
		left: 50%;
		translate: -50%;
	}
	
	.start > &::before {inset: 0 0 0 auto;}
	.end > &::before {inset: 0 auto 0 0;}
	
	.pri > &::before {background: var(--fs-color-primary);}
	.sec > &::before {background: var(--fs-color-secondary);}
	.suc > &::before {background: var(--fs-color-success);}
	.alr > &::before {background: var(--fs-color-alert);}
	
}

.flickity-page-dots {
	display: flex;
	justify-content: center;
	gap: 0.75em;
}

.height-fix .flickity-viewport {
	min-height: 475px !important;
	
	.flickity-slider > .row {
		height: 100%;
		padding-block-start: 5px;
		
		& > .col > .col-inner {
			height: 100%;
			display: flex;
			flex-flow: column;
			
			& > .grow {
				flex-grow: 1;
				padding: unset !important;
			}
			
		}
		
	}
	
}

.col-inner:has(> .grow) {
	display: flex;
	flex-flow: column;
	
	.grow {
		flex-grow: 1;
	}
	
}
#header-newsletter-signup {
	max-width: 400px !important;
	
	.section {
		align-items: unset !important;
	}
}

#top-bar {
	
	.notice {
		display: flex;
		flex-flow: row nowrap;
		color: #000000;
		font-weight: bolder;
		animation: notice 20s linear infinite;

		ul {
			list-style: none;
			display: flex;
			flex-flow: row nowrap;
			justify-content: center;
			margin: 0;
			padding: 0 60px 0 !important;
			min-width: 100vw;
		}

		li {
			padding: 0 !important;
			margin: 0 !important;
			white-space: nowrap;
			color: #fff;
		}

		a {
			color: #fff;
		}

	}
	
}

@keyframes notice {
	to {
		translate: -50% 0;
	}
}

p.lead {
		font-size: 1.2em; 
}

.header-nav {
	
	gap: 5px 0px;
	
	li.header-block {
		flex: 1 1 100%;
		display: flex;
		justify-content: flex-end;
		margin: 0;
	
		.button:last-of-type {
			margin: 0;
		}
		
	}
	
	li:not(.header-block) a {
		padding-bottom: 0;
	}
	
}

.nav-vertical.nav-simple {
	
	> li + li {
		border-top: unset;
	}
	
	a {
		padding-top: 0;
		text-transform: capitalize
	}
	
}

.custom-box {
	border-radius: 40px;
	
	.box-text {
		bottom: 0;
		width: 85%;
		border-radius: 0 40px 0 0;
		pointer-events: none;
	}
	
}

.nav-extender {
	position: relative;
	isolation: isolate;
	
	&::before {
		content: '';
		position: absolute;
		inset: 0 0 0 0;
		width: 100%;
		height: 200px;
		translate: 0 -50px;
		background: #ffffff;
	}
	
}

:is(h1, h2, h3, h4, h5, h6, p, .lead, ul, li):not(:has(+ :is(h1, h2, h3, h4, h5, h6, p, ul))) {
	margin-bottom: 0 !important;
}

.bleed > .col-inner {
	position: relative;
	isolation: isolate;
	border-radius: 40px 0 0 40px !important;
	
	&::before {
		content:'';
		position: absolute;
		inset: 0;
		width: 200%
		z-index: -1;
		background: #ffffff;
		translate: 100% 0%;
	}
	
}

.contain {
	
	img {
		object-fit: contain;
	}
	
	svg {
		width: 100%;
		aspect-ratio: 1 / 1;
	}
	
	&.wide {
		
		svg {
			aspect-ratio: 16 / 9;
		}
		
	}
	
}

.bleed.blue > .col-inner::before {
	background: #00000080;
}

.custom-radius > .col-inner {
	border-radius: 70px 0 0 0 !important;
}

.stripes {
	position: absolute;
	translate: 2% -40%;
	inset: 0 0 auto 0;
	
	&.bottom {
		inset: auto 0 0 auto;
		translate: 2% 50%;
	}
	
	svg {
		width: 80%;
	}
	
	path {
		fill: var(--fs-color-secondary);
	}
	
	&.dark {
		
		path {
			fill: var(--fs-color-primary);
		}
		
	}
	
}

.watermark {
	
	.section-bg {
		isolation: isolate;
	}
	
	.section-bg::before,
	.section-bg::after {
		content: '';
		position: absolute;
		background: url(https://iibonline.co.za/wp-content/uploads/2024/07/watermark.avif) no-repeat center right / cover;
		width: 35%;
		opacity: 30%;
	}
	
	.section-bg::before {
		inset: 0 auto 0 0;
	}
	
	.section-bg::after {
		inset: 0 0 0 auto;
		rotate: 180deg;
	}
	
}

.vcenter .col-inner {
	place-content: center;
}

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

.collapse {
	margin: 0 !important;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	
	i {
		flex: 1 1 10%
	}
	
	i + span {
		flex: 1 1 95%;
		text-align: left;
		line-height: 1
	}
	
}

.overflow > .col-inner {
	overflow: clip;
}

.flex-fix-4, .flex-fix-5, .flex-fix-6 {
	--gap: 10%;
	flex-flow: row wrap;
	justify-content: center;
	gap: var(--gap);
	
	.box {
		max-width: calc(25% - var(--gap));
		min-width: 120px;
	}		
	
}

.flex-fix-5 {
	--gap: 5%;
	
	.box {
		max-width: calc(20% - var(--gap));
	}		
	
}

.flex-fix-6 {
	--gap: 8%;
	
	.box {
		max-width: calc(17% - var(--gap));
	}		
	
}

.custom-posts {
	
	.col-inner {
		background: transparent !important;
		overflow: clip;
		border-radius: 40px;
	}

	.box {
		background-color: transparent !important
	}
	
	.box-text-inner .post-title {
		padding: 30px 20px 5px 20px;
		margin: 0
	}
	.box-text-inner .post-meta {
		padding: 0px 20px 0px 20px;
	}
	.box-text-inner .is-divider {
		margin-left: 20px;
		padding: 5px 0 0 0;
	}
	.box-text-inner .from_the_blog_excerpt {
		padding: 20px 20px 30px 20px
	}
	
	a.button {
		margin: 0;
		width: 100%;
		border-radius: 0 !important;
		padding: 5px;
	}
}

.blog-wrapper {
	
	.wp-post-image {
		border-radius: 30px;
	}
	
	.badge-inner.bg-fill {
		border-radius: 10px;
	}
	
	select {
		border-radius: 10px;
	}
	
	.post_comments {
		display: none;
	}
	
}

.portfolio-element-wrapper, .portfolio-archive {
	
	& > .row {
		justify-content: center;
	}
	
	.col-inner {
		overflow: clip;
		border-radius: 20px;
		background: transparent !important;
	}
	
	.portfolio-box {
		display: flex;
		flex-flow: column;
		background: #fff !important;
		padding: 20px;
		
		&::after {
			content: 'See More';
			font-size: 14px;
			text-align: center;
			text-transform: uppercase;
			font-weight: bold;
			color: #fff;
			padding: 10px;
			display: block;
			width: 100%;
			border-radius: 10px;
			background: var(--fs-color-secondary);
			transition: filter 0.2s ease-in-out;
		}
		
		&:hover::after {
			filter: brightness(110%);
		}
		
	}
	
	.col-inner, .portfolio-box {
		height: 100%;
	}
	
	.box-image {
		width: 100%;
		height: unset;
		overflow: visible;
	}
	
	.box-text {
		flex: 1 1 auto;
		place-content: center;
		min-height: 85px;
		background: #fff;
		padding: 10px 0 10px 0;
		
		* {
			opacity: 1;
			color: var(--fs-color-primary);
			font-size: 0.9rem;
		}
		
	}
	
	.image-cover {
		position: static;
		padding: 0 !important;
		background: #fff;
		
		img {
			position: static !important;
			aspect-ratio: 2 / 1;
			border-radius: 15px;
		}
		
	}
	
	.portfolio-box-category {
		display: none;
	}
	
}

.pricelist {
	
	.nav-pills {
		display: flex;
		flex-flow: row wrap;
		gap: 10px;
	}
	
	.nav-pills>li>a {
		border-radius: 10px;
		background: #fff;
		color: var(--fs-color-primary);
		font-weight: bold;
	}
	
	.nav-pills>li.active>a {
		background: var(--fs-color-primary);
		color: #fff;
	}
	
	.panel > .row:first-of-type {
		position: sticky;
		inset: 115px auto auto auto;
		z-index: 1;
	}
	
	.button.expand {
		margin: 0;
		border-radius: 0 !important;
		height: 100%;
		place-content: center;
	}
	
	.col-inner:has(> .button) {
		padding: 0 !important;
	}
	
}

.nav-dropdown li:first-of-type a {
	padding-top: 0;
}

:is(.row.page-wrapper) {
	display: none;
}

.portfolio-breadcrumb-title {
	display: none;
	background: #204780;
	border: unset;
	
	& h1 {
		color: #fff;
	}
	
	& .breadcrumbs a {
		color: #ffffff80;
	}
	
}

.portfolio-bottom {
	display: none;
	
	img {
		border-radius: 20px 20px 0 0;
	}
	
	.box-text {
		background: var(--fs-color-primary);
		border-radius: 0 0 20px 20px;
		padding: 10px 10px 10px 10px;
		min-height: 60px;
		place-content: center;
		
		* {
			color: #fff;
		}
		
	}
	
	.portfolio-box-category {
		display: none;
	}
	
}

.gform-theme {
	--gf-color-primary: #2619b1 !important;
	--gf-color-in-ctrl-primary: #2619b1 !important;
	--gf-radius: 12px !important;
	--gf-ctrl-textarea-radius: var(--gf-radius) !important;
	--gf-form-gap-y: 20px !important;
	
	label:not(.gfield_consent_label),
	legend,
	input[type="submit"],
	.gsection_title {
		text-transform: uppercase !important;
		font-weight: bold !important;
	}
	.gform_required_legend {
		display: none !important;
	}
	
	.gfield--type-choice .gchoice, 
	.gfield--type-choice .ginput_container_consent {
		gap: 1em 1em !important;
	}
	
}

.invert {
	img {
		filter: invert(1);
	}
}

#gform_submit_button_26,
#gform_wrapper_26 .gform_button,
#gform_wrapper_26 input[type="submit"],
input#gform_submit_button_26.gform_button.button {
    background-color: #FCAF18 !important;
    border-color: #FCAF18 !important;
    color: #ffffff !important;  
}
input#gform_submit_button_30.gform_button.button,
.gform_button.button {
    background-color: #FCAF18 !important;
}

button#gform_browse_button_30_41,
.gform_button.gform_button_select_files {
    background-color: #FCAF18 !important;
}
button#gform_browse_button_30_42,
.gform_button.gform_button_select_files {
    background-color: #FCAF18 !important;
}
button#gform_browse_button_30_43,
.gform_button.gform_button_select_files {
    background-color: #FCAF18 !important;
}
button#gform_browse_button_30_44,
.gform_button.gform_button_select_files {
    background-color: #FCAF18 !important;
}
button#gform_browse_button_30_57,
.gform_button.gform_button_select_files {
    background-color: #FCAF18 !important;
}
button#gform_browse_button_30_58,
.gform_button.gform_button_select_files {
    background-color: #FCAF18 !important;
}

.gform_drop_area .gform_drop_instructions::before,
.gform_fileupload_multifile .gform_drop_area::before,
.gform_drop_area svg,
.gform_drop_area path {
    color: #FCAF18 !important;
    fill: #FCAF18 !important;
}
section {
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

button.add_list_item {
  background-color: #FCAF18 !important;
}
button.delete_list_item {
  background-color: #FCAF18 !important;
}

button.add_list_item {
  background-color: #FCAF18 !important;
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}