/*
 Theme Name:   Divi Child
 Theme URI:
 Description:  Divi Child Theme
 Author:
 Author URI:
 Template:     Divi
 Version:      1.0.0
*/


.custom-search-icon .et_pb_searchsubmit {
    font-size: 0 !important;
    width: 50px;
    padding: 0 !important;

    background-color: transparent !important;
    background-image: url('https://sliceslicebaby.co.za/saota/wp-content/uploads/2026/08/searchbtn.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 22px !important;

    border: none !important;
    cursor: pointer;
}

/* =========================================================
   SAOTA TEAM
   Original CSS + original responsive rules
   ========================================================= */


/* ---------------------------------------------------------
   Utility required by original markup
   --------------------------------------------------------- */

.ibvtop {
	display: inline-block;
	vertical-align: top;
}


/* ---------------------------------------------------------
   TEAM PAGE
   --------------------------------------------------------- */

#teampg {
	padding: 120px 0 20px;
	background-color: #dad9d7;
}


/* ---------------------------------------------------------
   INTRO
   --------------------------------------------------------- */

.team-intro {
	text-align: justify;
	padding: 0 7.2%;
}

.team-intro::after {
	content: '';
	display: inline-block;
	width: 100%;
}

.team-intro h1 {
	display: inline-block;
	vertical-align: bottom;
	margin-bottom: 20px;
}


/* ---------------------------------------------------------
   FILTER
   --------------------------------------------------------- */

.teamfilter {
	display: inline-block;
	vertical-align: bottom;
	font-size: 16px;
	line-height: 20px;
}

.teamfilter a {
	display: inline-block;
	color: #888888;
	text-decoration: none;
	margin: 0 0 20px 20px;
	transition: 0.3s linear;
}

.teamfilter a:hover {
	color: #000;
	text-decoration: underline;
}

.teamfilter a.tfcurrent {
	color: #000;
	text-decoration: underline;
}


/* ---------------------------------------------------------
   TEAM GRID
   --------------------------------------------------------- */

.team-items {
	padding: 0 calc(5.7% - 15px);

	/*
	 * Removes inline-block whitespace so the original
	 * percentage widths remain predictable.
	 */
	font-size: 0;
}

.team-item {
	width: 20%;
	box-sizing: border-box;
	padding: 0 15px 40px;
	display: inline-block;
	vertical-align: top;
}


/* ---------------------------------------------------------
   TEAM IMAGE
   --------------------------------------------------------- */

.teami-img {
	background-size: cover;
	background-position: 50% 50%;
	background-color: #EEE;
	padding-top: 111.6%;
	margin-bottom: 10px;
}


/* ---------------------------------------------------------
   MEMBER DETAILS
   --------------------------------------------------------- */

.teami-name {
	font-family: helvetica-neue-lt-pro, sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 26px;
}

.teami-group {
	color: #888;
	font-size: 14px;
	line-height: 18px;
}

.teami-title {
	color: #888;
	font-size: 14px;
	line-height: 18px;
}


/* ---------------------------------------------------------
   LOAD MORE
   --------------------------------------------------------- */

.lmore {
	font-family: helvetica-neue-lt-pro, sans-serif;
	text-align: center;
	padding: 10px 7.2% 0;
}

.lmore a.loading,
.projs-filtergrp.loading {
	cursor: not-allowed;
	opacity: 0.5;
}

.lmore a {
	display: inline-block;
	text-decoration: none;
	background-position: 90% 50%;
	background-size: 12px 12px;
	background-repeat: no-repeat;
	background-color: transparent;
	border: 1px solid #888888;
	font-family: helvetica-neue-lt-pro, sans-serif;
	font-size: 17px;
	line-height: 17px;
	padding: 18px 85px;
	cursor: pointer;
	transition: 0.2s linear;
	text-align: center;
}

.lmore a:hover {
	background-color: #000;
	color: #e5e4e2;
}


/* =========================================================
   MEDIUM LARGE
   901px - 1100px
   Original: 4 columns
   ========================================================= */

@media only screen and (width > 900px) and (width <= 1100px) {

	.team-item {
		width: 25%;
	}

	.teamfilter a {
		font-size: 15px;
		line-height: 28px;
	}

}


/* =========================================================
   MEDIUM
   561px - 900px
   Original: 2 columns
   ========================================================= */

@media only screen and (width > 560px) and (width <= 900px) {

	.team-item {
		width: 50%;
	}

	.teamfilter a {
		font-size: 15px;
		line-height: 28px;
		margin: 0 20px 20px 0;
	}

}


/* =========================================================
   SMALL
   Up to 560px
   Original: 2 columns + button-style filters
   ========================================================= */

@media only screen and (width > 1px) and (width <= 560px) {

	#teampg {
		padding: 65px 0 40px;
	}


	/* Team filters become button-style tabs */

	.teamfilter a {
		font-size: 15px;
		line-height: 18px;
		margin: 0 2% 2% 0;
		padding: 10px 20px;
		background-color: #EBEBEB;
	}

	.teamfilter a.tfcurrent {
		border-bottom: 2px solid;
		color: #000;
		text-decoration: none;
		font-weight: 600;
	}


	/* Original mobile layout remains two columns */

	.team-item {
		width: 50%;
	}

}

/* =========================================================
   SAOTA REGIONS SHORTCODE
   ========================================================= */

.saota-regions {
	background-color: #dad9d7;
	padding: 100px 1% 40px;
	font-family: inherit;
}

.saota-regions *,
.saota-regions *::before,
.saota-regions *::after {
	box-sizing: border-box;
}

.saota-regions button {
	font-family: inherit!important;
}

.saota-regions a {
    font-family: inherit!important;
	font-weight: 400!important;
	font-size: 15px!important;
    line-height: 21px!important;
    text-decoration: none!important;
    color: #888888!important;
}

.saota-regions a::after {
	content: ''!important;
    position: relative!important;
    display: inline-block!important;
    vertical-align: top!important;
    background-image: url(https://sliceslicebaby.co.za/saota/wp-content/uploads/2026/08/link-arrow.svg)!important;
    background-size: contain!important;
    background-repeat: no-repeat!important;
    width: 11px!important;
    height: 10px!important;
    margin: 6px 0 0 8px!important;
    transition: 0.15s linear!important;
    left: 0!important;
}

.saota-regions a:hover {
    text-decoration: underline!important;
}


/* Intro
--------------------------------------------------------- */

.saota-regions .rgnmap-intro {
	max-width: 100%!important;
	width: 90%!important;
    margin: auto;
}

.saota-regions .rgnmap-introw {
	max-width: 730px;
	margin-bottom: 15px;
}

.saota-regions .rgnmap-introw h1 {
	margin-bottom: 30px;
}

.saota-regions .rgnmap-introbtm {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
}

.saota-regions .rgnmap-tooltip {
	font-size: 15px;
	line-height: 19px;
	color: #888888;
}


/* Mobile navigation
--------------------------------------------------------- */

.saota-regions .rgnmap-nav {
	display: none;
	padding-bottom: 20px;
	gap: 20px;
}

.saota-regions .rgnmap-navgroup {
	position: relative;
	width: 220px;
}

.saota-regions .rgnmap-navtoggle {
	position: relative;
	display: block;
	width: 100%;
	border: 0;
	border-radius: 0;
	background: #ebebeb;
	color: inherit;
	text-align: left;
	cursor: pointer;
	padding: 12px 38px 12px 10px;
	font-size: 17px;
	line-height: 17px;
	font-family: inherit;
}

.saota-regions .rgnmap-navtoggle::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform .2s ease;
}

.saota-regions .rgnmap-navgroup.is-open .rgnmap-navtoggle::after {
	transform: translateY(-25%) rotate(225deg);
}

.saota-regions .rgnmap-navmenu {
	display: none;
	position: absolute;
	z-index: 100;
	top: 100%;
	left: 0;
	width: 100%;
	background: #ebebeb;
	padding: 5px 10px 10px;
}

.saota-regions .rgnmap-navgroup.is-open .rgnmap-navmenu {
	display: block;
}

.saota-regions .rgnmap-continent-option,
.saota-regions .rgnmap-region-link {
	display: block;
	width: 100%;
	border: 0;
	background: transparent;
	color: inherit;
	text-decoration: none;
	text-align: left;
	padding: 8px 0;
	cursor: pointer;
	font-size: 15px;
	line-height: 19px;
}

.saota-regions .rgnmap-region-link:hover {
	text-decoration: underline;
}

.saota-regions .rgnmap-region-link[hidden] {
	display: none;
}


/* Map
--------------------------------------------------------- */

.saota-regions .rgnmapouter {
	padding: 40px 0;
	overflow: hidden;
}

.saota-regions .rgnmapw {
	position: relative;
	padding-top: 47.3%;
}

.saota-regions .rgnmap-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;

	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;

	transition:
		transform .5s linear,
		left .5s linear,
		top .5s linear;
}


/* Map hotspots
--------------------------------------------------------- */

.saota-regions .rmapcircle {
	position: absolute;
	z-index: 10;
	aspect-ratio: 1 / 1;
}

.saota-regions .rmapcircle.rmapcfull {
	z-index: 20;
}

.saota-regions .rmapcirclew {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	background-color: rgba(159, 155, 148, .2);

	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;

	border-radius: 50%;

	cursor: pointer;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition:
		opacity .2s linear,
		background-color .3s linear;
}


/* Desktop hover */

@media only screen and (min-width: 901px) {

	.saota-regions:not(.is-zoomed)
	.rmapcircle:hover
	.rmapcirclew,

	.saota-regions:not(.is-zoomed)
	.rmapcircle:focus-within
	.rmapcirclew {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

}


.saota-regions .rmapcircle.rmapcfull .rmapcirclew {
	font-size: 18px;
	line-height: 18px;

	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	box-shadow:
		0 0 0 10000px rgba(218, 217, 215, .9);
}


/* Region information
--------------------------------------------------------- */

.saota-regions .rmaptxt {
	display: none;
	position: absolute;
	width: min(30vw, 460px);
	z-index: 30;
}

.saota-regions .rmapcircle.rmapcfull .rmaptxt {
	display: block;
}

.saota-regions .rmaptxt h5 {
	margin-bottom: 5px;
}


/* Close
--------------------------------------------------------- */

.saota-regions .rmap-close {
	position: relative;

	display: inline-block;

	border: 0;
	background: transparent;
	color: inherit;

	text-decoration: underline;
	cursor: pointer;

	font-family: inherit;
	font-size: 17px;
	line-height: 21px;

	padding: 0 24px 0 0;
	margin: 0 0 25px;
}

.saota-regions .rmap-close::before,
.saota-regions .rmap-close::after {
	position: absolute;

	content: "";

	display: block;

	top: -2px;

	border-bottom: 1px solid #000;

	width: 16px;
	height: 16px;
}

.saota-regions .rmap-close::before {
	right: 3px;
	transform: rotate(-45deg);
}

.saota-regions .rmap-close::after {
	right: -8px;
	transform: rotate(45deg);
}


/* =========================================================
   AFRICA
   ========================================================= */

.saota-regions .rmapcircle[data-region="africa"] {
	top: 42.5%;
	left: 40.5%;
	width: 20.8%;
}

.saota-regions .rmapcircle.rmapcfull[data-region="africa"] {
	top: 20.5%;
}

.saota-regions .rmapcircle[data-region="africa"] .rmaptxt {
	top: 0;
	left: 0;
}

.saota-regions
.rmapcircle.rmapcfull[data-region="africa"]
.rmapcirclew {
	width: 135%;
	height: 135%;
	top: -34%;
	left: -155%;
}

.saota-regions
.rgnmap-img[data-map-region="africa"] {
	transform: scale(1.34);
	left: -30%;
	top: -34%;
}


/* =========================================================
   AMERICAS
   ========================================================= */

.saota-regions .rmapcircle[data-region="americas"] {
	top: 24%;
	left: 10%;
	width: 32.1%;
}

.saota-regions .rmapcircle[data-region="americas"] .rmaptxt {
	top: 0;
	left: 140%;
}

.saota-regions
.rmapcircle.rmapcfull[data-region="americas"]
.rmapcirclew {
	width: 132%;
	height: 132%;
	top: -30%;
	left: -10%;
}

.saota-regions
.rgnmap-img[data-map-region="americas"] {
	transform: scale(1.34);
	left: 9.4%;
	top: -12%;
}


/* =========================================================
   ASIA
   ========================================================= */

.saota-regions .rmapcircle[data-region="asia"] {
	top: -1%;
	left: 56%;
	width: 31.3%;
}

.saota-regions .rmapcircle[data-region="asia"] .rmaptxt {
	top: 32%;
	left: 0;
}

.saota-regions
.rmapcircle.rmapcfull[data-region="asia"]
.rmapcirclew {
	width: 132%;
	height: 132%;
	top: 10%;
	left: -154%;
}

.saota-regions
.rgnmap-img[data-map-region="asia"] {
	transform: scale(1.34);
	left: -51.3%;
	top: 22%;
}


/* =========================================================
   EUROPE
   ========================================================= */

.saota-regions .rmapcircle[data-region="europe"] {
	top: 10%;
	left: 43%;
	width: 16.7%;
}

.saota-regions .rmapcircle[data-region="europe"] .rmaptxt {
	top: 0;
	left: -30%;
}

.saota-regions
.rmapcircle.rmapcfull[data-region="europe"]
.rmapcirclew {
	width: 135%;
	height: 135%;
	top: 0;
	left: -195%;
}

.saota-regions
.rgnmap-img[data-map-region="europe"] {
	transform: scale(1.34);
	left: -31%;
	top: 13%;
}


/* =========================================================
   INDIAN OCEAN
   ========================================================= */

.saota-regions .rmapcircle[data-region="indian-ocean"] {
	top: 61.3%;
	left: 59.4%;
	width: 12%;
}

.saota-regions
.rmapcircle[data-region="indian-ocean"]
.rmaptxt {
	top: -100%;
	left: -240%;
}

.saota-regions
.rmapcircle.rmapcfull[data-region="indian-ocean"]
.rmapcirclew {
	width: 135%;
	height: 135%;
	top: -110%;
	left: -420%;
}

.saota-regions
.rgnmap-img[data-map-region="indian-ocean"] {
	transform: scale(1.34);
	left: -54.5%;
	top: -32%;
}


/* =========================================================
   OCEANIA / AUSTRALASIA
   ========================================================= */

.saota-regions .rmapcircle[data-region="oceania"] {
	top: 52%;
	left: 75.3%;
	width: 23.2%;
}

.saota-regions
.rmapcircle[data-region="oceania"]
.rmaptxt {
	top: -43%;
	left: -112%;
}

.saota-regions
.rmapcircle.rmapcfull[data-region="oceania"]
.rmapcirclew {
	width: 135%;
	height: 135%;
	top: -70%;
	left: -275%;
}

.saota-regions
.rgnmap-img[data-map-region="oceania"] {
	transform: scale(1.34);
	left: -73%;
	top: -38%;
}


/* =========================================================
   TABLET
   ========================================================= */

@media only screen and (min-width: 901px) and (max-width: 1100px) {

	.saota-regions .rmaptxt {
		width: 40vw;
	}

	.saota-regions .rmapc-intro p {
		font-size: 18px;
		line-height: 26px;
	}

	.saota-regions
	.rmapcircle[data-region="africa"]
	.rmaptxt {
		top: -34%;
	}

	.saota-regions
	.rmapcircle[data-region="oceania"]
	.rmaptxt {
		top: -69%;
	}

}


/* =========================================================
   MOBILE + TABLET NAV
   ========================================================= */

@media only screen and (max-width: 900px) {

	.saota-regions .rgnmap-nav {
		display: flex;
		flex-wrap: wrap;
	}

	.saota-regions .rgnmap-tooltip {
		display: none;
	}

	/*
	 * Original mobile implementation doesn't use
	 * the map circles. Navigation replaces them.
	 */
	.saota-regions .rmapcircle {
		display: none;
	}

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media only screen and (max-width: 560px) {

	.saota-regions .rgnmap-nav {
		display: block;
	}

	.saota-regions .rgnmap-navgroup {
		width: 220px;
		margin: 0 0 20px;
	}

	.saota-regions .rgnmap-navtoggle {
		font-size: 15px;
		line-height: 18px;
		padding: 10px 38px 10px 10px;
	}

}