/*
Theme Name: The Good City theme
Theme URI: https://thegoodcity.bdp.com
Template: hello-elementor
Author: Pete Stoneman
Author URI: https://www.petestoneman.com
Description: A theme designed for The Good City.
Tags: accessibility-ready,custom-colors,custom-menu,custom-logo,featured-images,threaded-comments,translation-ready
Version: 1.0.0.1716394492
Updated: 2024-05-22 16:14:52
*/
/*
* {
	font-family: "aktiv-grotesk", sans-serif;
} */

* {
    font-family: "Helvetica", Helvetica, Arial, sans-serif !important
}

@font-face {
    font-family: "Helvetica";
    src: url("https://www.bdp.com/fonts/b7693a83-b861-4aa6-85e0-9ecf676bc4d6.eot?#iefix") format("eot"), url("https://www.bdp.com/fonts/bcf54343-d033-41ee-bbd7-2b77df3fe7ba.woff") format("woff"), url("https://www.bdp.com/fonts/b0ffdcf0-26da-47fd-8485-20e4a40d4b7d.ttf") format("truetype"), url("https://www.bdp.com/fonts/da09f1f1-062a-45af-86e1-2bbdb3dd94f9.svg#da09f1f1-062a-45af-86e1-2bbdb3dd94f9") format("svg");
}

@font-face {
    font-family: "Helvetica";
    src: url("https://www.bdp.com/fonts/c07fef9e-a934-42d7-92ad-69205f2b8a00.eot?#iefix") format("eot"), url("https://www.bdp.com/fonts/14ff6081-326d-4dae-b778-d7afa66166fc.woff") format("woff"), url("https://www.bdp.com/fonts/8fda1e47-19be-46c7-8d83-8d4fb35572f0.ttf") format("truetype"), url("https://www.bdp.com/fonts/f751c8ae-1057-46d9-8d74-62592e002568.svg#f751c8ae-1057-46d9-8d74-62592e002568") format("svg");
    font-weight: bold;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -.04688em;
  line-height: 0.95;
}

*:not(#themesBox, body) {
	transition: none !important;
}

#themesBox {
	transition: clip-path 0.6s ease;
	clip-path: inset(0% 0% 0% 0%);
}

.hiddenDiv {
	clip-path: inset(0% 0% 0% 100%) !important;
}

html, .elementor {
	overflow-x: hidden;
}

body {
	overflow-x: hidden;
	font-family: 'Helvetica', Helvetica, Arial, sans-serif;
/*	height: 100vh !important;
	font-size: 0.9rem !important; */
	transition: background-color 300ms linear;
}

body.elementor-editor-active {
	overflow: visible;
}

#themesBox, #expertiseBox {
	height: 100vh !important;
	max-height: 100vh !important;
	top: 0;
	position: absolute;
	overflow-y: visible;
}

.diagramContainer {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.circle {
	width: 75px;
	height: 75px;
	border-radius: 75px;
	display: block;
	align-items: center;
	justify-content: center;
	text-align: left;
	font-weight: 600;
	color: #000;
	position: absolute;
	pointer-events: none;
}

.bigDot {
	position: fixed;
	width: 60px;
	height: 60px;
	border-radius: 60px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: -30px;
}

#themesBox .bigDot {
	background: linear-gradient(90deg, transparent 50%, var(--e-global-color-primary) 50.001%, var(--e-global-color-primary) 66%, transparent 100%);
}

#expertiseBox .bigDot {
	background: linear-gradient(90deg, transparent 50%, var(--e-global-color-secondary) 50.001%, var(--e-global-color-secondary) 66%, transparent 100%);
}

.bigDot * {
	cursor: pointer;
}

.smallDot {
	background: #fff;
	width: 18px;
	height: 18px;
	border-radius: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
}

a, a:hover {
	color: var(--e-global-color-text);
}

.text, .text a {
	z-index: 1000;
	font-size: calc(( 1vw + 1vh ) * 0.8 );
	line-height: calc(( 1vw + 1vh ) * 0.8 * 0.95);
	font-weight: 600;
	max-width: 320px;
	position: absolute;
	cursor: pointer;
	color: #336;
	pointer-events: all;
}

.text a:hover {
	text-decoration: underline;
}

.ring {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	position: fixed;
}

.ringBG {
	border: 4px solid #fff;
/*	border: 4px solid rgba(255, 255, 255, 0.7);*/
}

.noLine {
	border: 2px transparent !important;
}


#content, body > .page-content {
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
	box-sizing: border-box;
}

#centerCircle, #centerCircle2 {
	background-color: #fff;
	color: #000;
	width: 30vw;
	height: 30vw;
	border-radius: 30vw;
	justify-content: center;
	align-items: center;
	display: flex;
	font-size: 3rem;
	line-height: 2.7rem;
	z-index: -1;
}
/*
#themesBox .smallDot {
	border: 0.5vh solid var(--e-global-color-primary);
}

#expertiseBox .smallDot {
	border: 0.5vh solid var(--e-global-color-secondary);
}*/

/* PORTRAIT */
@media (max-aspect-ratio: 1) {
/*
	#themesBox .smallDot {
		border: 0.5vw var(--e-global-color-primary);
	}

	#expertiseBox .smallDot {
		border: 0.5vw solid var(--e-global-color-secondary);
	}*/

	#centerCircle, #centerCircle2 {
		width: 25vh;
		height: 25vh;
	}
}
/* center circles on mobile */
@media (max-width:767px) {
	#centerCircle, #centerCircle2 {
		width: 25vw;
		height: 25vw;
	}

	@media (max-aspect-ratio: 1) {
		#themesBox, #expertiseBox {
			padding-top: 80px;
			padding-bottom: 131px;
/*			height: 100dvh !important;
			max-height: 100dvh !important;
			min-height: 100dvh !important; */
		}
	}
}

/* add padding on mobile */

/* Toggle switch */

body:not(.elementor-editor-active) #toggleContainer {
	opacity: 0;
	pointer-events: none;
}

/*body:not(.elementor-editor-active) #toggleContainer, body:not(.elementor-editor-active) #logoContainer {
	position: fixed;
	top: 0;
}*/

/* #logoContainer, #toggleContainer {
		padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
} */

.elementor-element-649c35d { /* logo container */
	padding-bottom: 5vh;
	padding-top: 17px;
}

#preLaunch {
	z-index: 20;
	padding-inline-end: 0;
	margin: 0;
	display: block;
	position: absolute;
	min-width: 100vw;
	left: 0;
	top: 0;
	background-color: #fff;
	min-height: 100vh;
}

.site-header {
	padding-block-start: 0;
	padding-block-end: 0;
}

@media (max-width:767px) {
	#toggleContainer {
		top: unset;
		bottom: 0;
	}
}

body:not(.elementor-editor-active) #toggleContainer, body:not(.elementor-editor-active) #svgLogo {
	cursor: pointer;
}


#startPage {
/*	overflow: scroll;
	max-height: 100vh;*/
	top: 100vh;
}

/* The switch - the box around the slider */
.tgc-switch {
  position: relative;
  display: inline-block;
  width: 60px !important;
  height: 34px;
  pointer-events: all;
}

/* Hide default HTML checkbox */
.tgc-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.tgc-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(60,55,65,0.2);
  -webkit-transition: .4s;
  transition: .4s;
}

.tgc-slider:hover {
  background-color: rgba(60,55,65,0.3);
}

.tgc-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: rgba(60,55,65,1);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .tgc-slider {
  background-color: rgba(60,55,65,0.2);
}

input:focus + .tgc-slider {
  box-shadow: 0 0 1px rgba(60,55,65,0.25);
}

input:checked + .tgc-slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.tgc-slider.round {
  border-radius: 34px;
}

.tgc-slider.round:before {
  border-radius: 50%;
}

/* Other bits */


.custom-header h1 {
	font-size: 5rem;
}

#logoContainer {
	justify-content: start;
	pointer-events: none;
}

#svgLogo {
	max-width: 25vw;
}

@media (max-width:1024px) {
	.custom-header h1 {
		font-size: 4rem;
	}

	#svgLogo {
		max-width: 50%;
	}

}

@media (max-width:767px) {
	.custom-header h1 {
		font-size: 3rem;
	}
}

.custom-header {
	min-height: 30vh;
	align-content: end;
}


#introImg {
	min-height: 80vh;
	padding: 5vh 0 5vh 10px;
}

@media (max-width:1024px) {
	#introImg {
		min-height: 50vh;
		padding: 5vh 10px;
	}
}

@media (max-width: 767px) {
	#introImg {
		min-height: 30vh;
	}
}

#backgroundBlock {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	background-color: var(--e-global-color-primary);
	width: 100%;
	height: 75vh;
}

@media (max-height:380px) {
	#backgroundBlock {
		height: 90dvh;
	}
}

/* Breadcrumb */
#pageType:not(.elementor-editor-active) {
	display: none;
}

#breadcrumb {
	color: var( --e-global-color-text );
	text-transform: lowercase;
	display: inline-block;
}

#breadcrumb::first-letter {
	text-transform: uppercase;
}

#breadcrumb:hover {
	text-decoration: underline;
}

.elementor-button {
	border-radius: 54px !important;
}

.elementor-button {
	cursor: pointer;
}

.elementor-button:hover:not(#startBtn .elementor-button, #aboutBtn .elementor-button, #pauseBtn, .videoBtn) {
	color: #fff !important;
	background-color: var( --e-global-color-text ) !important;
}

.page-content a:not(.elementor-button) {
	border-bottom: 3px solid var( --e-global-color-primary );
}

.page-content a:hover:not(.elementor-button) {
	border-bottom: 3px solid var( --e-global-color-text );
}

#menuButton {
	position: fixed;
	top: 27px;
	right: 27px;
	z-index: 20;
	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;
}

@media ( max-width:767px ) {
	#menuButton {
		top: 6px;
		right: 6px;
	}
}

#menuButton svg {
/*  transition: transform 1s ease-in-out !important; /* Ease-in effect for the start of the rotation */ 
  width: 3vw;
  height: 3vw;
  min-width: 64px;
  min-height: 64px;
}

#menuButton svg, #menuButton a, #menuButton svg:hover {
	border: none !important;
}

#menuButton svg:hover {
	-webkit-animation: rotating 12s linear infinite;
	-moz-animation: rotating 12s linear infinite;
	-ms-animation: rotating 12s linear infinite;
	-o-animation: rotating 12s linear infinite;
	animation: rotating 12s linear infinite;
}

#menuButton svg:hover {
	fill: #ff0000;
}

@keyframes rotating {
	from {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}	to {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/* SS amends */

.expertiseCol p {
	margin-bottom: 0 !important;
}

.expertiseCol p::after {
	content: '\2002 \2192';
}