@charset "UTF-8";

/*Preserving H1 for SEO only*/
h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}


/* CSS Document */

:root {

	/* MODAL POP UP BG COLOUR */
	--modal-popup-color: #8d1a60;

}


body {
	margin: 0;
	padding: 0;
	font-family: 'Lato', sans-serif;
	background: #de4a4c;
	overflow: hidden;
    width: 100vw;
    height: 100vh;
}

.full-width-btn-container {
	display: none;
}

#back-to-top-btn {
	opacity: 0;
	pointer-events: none;
}

.mobile-site {
	display: none;
}

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

img {
	image-rendering: -webkit-optimize-contrast;
}

.button {
	display: block;
	width: 100%;
	font: normal 16px/16px 'Lato', sans-serif;
	background: #ff9015;
	padding: 7px 15px;
	border-radius: 8px;
	color: #fff;
	pointer-events: auto;
	border: 0;
	margin-bottom: 8px;
	margin-right: 5px;
	box-shadow: 3px 3px 0 #d65f00;
	transition: all .3s ease;
	border: 2px solid transparent;
}
.button:hover {
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 #d65f00;
	background: #ee7f00;
}
.button.secondaryBtn {
	border: 2px solid #d65f00;
	background: #fff;
	color: #d65f00;
}
.button.secondaryBtn:hover {
	background: #fff;
	color: #d65f00;
}

nav {
	padding: 20px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: absolute;
	width: 100%;
}
nav .logo img {
	max-width: 320px;
	display: block;
}
nav .menu {
	justify-self: end;
}
nav .menu img {
	max-width: 30px;
	display: block;
}

/*WELCOME SCREEN*/

#welcomeScreen {
	background: rgba(96, 38, 61, 0.95);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 50;
	pointer-events: none;
	width: 100%;
	height: 100vh;
	opacity: 0;
	transition: all .8s ease;
}
#welcomeScreen.active {
	opacity: 1;
	pointer-events: auto;
}
#welcomeScreen.active .howToUse {
	top: 50%;
}
.howToUse {
	width: 100%;
	max-width: 400px;
	left: 50%;
	top: 150%;
	transform: translate(-50%, -50%);
	position: absolute;
	text-align: center;
	transition: all .6s ease;
}
.howToUse > img {
	max-width: 80%;
	display: block;
	margin: 0 auto 10px auto; 
}
.howToUse div {
	background: #fff;
	border-radius: 10px;
	text-align: center;
	padding: 20px 10px 10px 10px;
}
.howToUse div img {
	max-width: 70%;
}
.howToUse div button {
	display: block;
	border-radius: 5px;
	background: #ff9015;
	color: #fff;
	border: 0;
	width: 100%;
	max-width: 50%;
	font: normal 20px/20px 'Lato', sans-serif;
	padding: 10px;
	margin: 20px auto 5px auto;
	pointer-events: auto;
}


main.cityScene {
	overflow-x: hidden; 
	display: flex;
	position: relative;
	z-index: 20;
}
section {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	position: relative;
	z-index: 10;
	/* background: url(img/bg-hills.jpg) 0 bottom/100% no-repeat; */
	background: url(img/parallax-update/bg-hills-new.png) 0 bottom/100% no-repeat;
}
main section img {
	display: block;
	width: auto;
	max-height: 90vh;
	transition: all .5s .05s cubic-bezier(0.01, 2.15, 0.27, 1.04);
	transform-origin: bottom center;
	pointer-events: none;
	position: relative;
	z-index: 9;
}
.billboardText {
	position: absolute;
	max-width: 73%;
	top: 34%;
	left: 16%;
	padding: 20px;
	color: #fff;
	z-index: 10;
}
.billboardText h1  {
	margin: 0;
}





/*TOOL TIP NAMES*/

.buildingTooltip {
	position: absolute;
	color: #fff;
	padding: 5px;
	z-index: 8;
	transition: all .4s ease-in-out;
	transform: translate(-50%, 10px) scale(1.0);
	transform-origin: top center;
	left: 50%;
	background: var(--modal-popup-color);
	border-radius: 30px;
	padding: 5px 10px;
	text-align: center;
}
.buildingTooltip p {
	margin: 0;
	text-transform: uppercase;
	white-space: nowrap;
}
.buildingTooltip:hover {
	
}




/*BUILDING INFO ICONS*/

#building1 .infoBtn,
#building1 .clickDotAnim8 {
	bottom: 25.5%;
}
#building2 .infoBtn,
#building2 .clickDotAnim8 {
	bottom: 31%;
}
#building3 .infoBtn,
#building3 .clickDotAnim8 {
	bottom: 28%;
}
#building4 .infoBtn,
#building4 .clickDotAnim8 {
	bottom: 28%;
}
#building5 .infoBtn,
#building5 .clickDotAnim8 {
	bottom: 46%;
}
#building6 .infoBtn,
#building6 .clickDotAnim8 {
	bottom: 31%;
}
#building7 .infoBtn,
#building7 .clickDotAnim8 {
	bottom: 40%;
}
#building8 .infoBtn,
#building8 .clickDotAnim8 {
	bottom: 39%;
}
#building9 .infoBtn,
#building9 .clickDotAnim8 {
	bottom: 36.5%;
}
#building10 .infoBtn,
#building10 .clickDotAnim8 {
	bottom: 32%;
}
#building11 .infoBtn,
#building11 .clickDotAnim8 {
	bottom: 29%;
}
#building12 .infoBtn,
#building12 .clickDotAnim8 {
	bottom: 28%;
}


.buildingContainer {
	position: relative;
	transform-origin: bottom;
	height: 100vh;
}
.buildingContainer .infoBtn {
	transition: all .2s ease;
	left: 50%;
	transform: translateX(-50%);
	transform-origin: left;
	display: grid;
    grid-template-columns: 30px 1fr;
}
.buildingContainer .infoBtn svg {
	width: 50px;
    height: 50px;
    position: relative;
    z-index: 2;
    background: #8d1a60;
    border-radius: 100px;
}
.buildingContainer .infoBtn button {
	height: fit-content;
    align-self: center;
    padding-left: 25px;
}
.buildingContainer .clickDotAnim8 {
	width: 80px;
    height: 80px;
    transform: scale(0.001) translateX(-50%);
    background: var(--modal-popup-color);
    border-radius: 100%;
    position: absolute;
    z-index: 21;
    transition: all .5s .3s ease;
    left: 50%;
    transform-origin: left;
}


/*CLICK BUILDINGS ANIMATIONS*/

.buildingContainer.buildingActive .infoBtn {
	transform: scale(0.001) translateX(-50%);
	opacity: 0;
}
.buildingContainer.buildingActive .infoBtn:hover ~ div  {
	opacity: 0;
}
.buildingContainer.buildingActive img {
	transform: scale(1.2);
}
.buildingContainer.buildingActive .clickDotAnim8 {
	transform: scale(100) translateX(-50%);
	transition: all 1.5s ease;
}


/*INFO BTNS*/

.infoBtn {
	position: absolute;
	z-index: 20;
	transition: all .3s .05s ease-in-out;
	transform-origin: center;
}
.infoBtn button {
	background: none;
	border: 0;
	position: relative;
    background: var(--modal-popup-color);
    border-radius: 30px;
    padding: 5px 10px;
    text-align: center;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
    white-space: nowrap;
    font: normal 16px/16px 'Lato', sans-serif;
}
.infoBtn.iIconBtn button {
	width: 100px;
	height: 100px;
	background: none;
}
.infoBtn button svg {
	width: 100%;
	display: block;
}
.buildingContainer .infoBtn:hover {
	transform: scale(1.3) translateX(-50%);
}
.buildingContainer .infoBtn:hover + img {
	transform: scale(1.2);
}
.infoPulse {
	animation: pulse 1.2s forwards linear infinite;
	transform-origin: center;
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1);
	}
	70% {
		opacity: 1;
		stroke-width: 10;
	}
	100% {
		opacity: 0;
		transform: scale(1.5);
		stroke-width: 1;
	}
}


/*FOREGROUND*/

#foreground {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 100vh;
	width: 700vh;
	z-index: 30;
	pointer-events: none;
	transition: opacity .3s .6s ease;
	background: url(img/cars-ani.png) 0 97% repeat-x;
	animation: drivingCars 20s linear forwards infinite;
}
#foreground.hide {
	opacity: 0;
	transition: opacity .3s ease;
}

@keyframes drivingCars {
	from { 
		background-position: 0 97%; 
	}
	to { 
		background-position: 4200px 97%; 
	}
}

/* Clouds */

img#cloud-1 {
	position: absolute;
	top: 50px;
	left: 800px;
	width: 400px;
	height: auto;
	z-index: 30;
	pointer-events: none;
	animation-name: cloud-1;
	animation-duration: 50s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

@keyframes cloud-1 {
	from {
		left: 600px;
	}
	to {
		left: 1300px;
	}
}

img#cloud-2 {
	position: absolute;
	top: 250px;
	left: 1500px;
	width: 400px;
	height: auto;
	z-index: 30;
	pointer-events: none;
	animation-name: cloud-2;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

@keyframes cloud-2 {
	from {
		left: 1500px;
	}
	to {
		left: 1200px;
	}
}

img#cloud-3 {
	position: absolute;
	top: 150px;
	left: 1500px;
	width: 350px;
	height: auto;
	z-index: 30;
	pointer-events: none;
	animation-name: cloud-3;
	animation-duration: 35s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

@keyframes cloud-3 {
	from {
		left: 2200px;
	}
	to {
		left: 1800px;
	}
}

img#cloud-5 {
	position: absolute;
	top: 150px;
	left: 400px;
	width: 250px;
	height: auto;
	z-index: 30;
	pointer-events: none;
	animation-name: cloud-5;
	animation-duration: 35s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

@keyframes cloud-5 {
	from {
		left: 400px;
	}
	to {
		left: 800px;
	}
}

/* Birds */

.bird {
	background-image: url(img/parallax-update/bird-cells-new-white.svg);
	background-size: auto 100%;
	width: 88px;
	height: 125px;
	will-change: background-position;
	animation-name: fly-cycle;
	animation-timing-function: steps(10);
	animation-iteration-count: infinite;
	z-index: 3;

	animation-duration: 1s;
	/* animation-delay: -0.5s;	 */

	/* &--one {
		animation-duration: 1s;
		animation-delay: -0.5s;		
	}
	
	&--two {
		animation-duration: 0.9s;
		animation-delay: -0.75s;
	}
	
	&--three {
		animation-duration: 1.25s;
		animation-delay: -0.25s;
	}
	
	&--four {
		animation-duration: 1.1s;
		animation-delay: -0.5s;
	} */
}

.bird--one {
	animation-delay: -0.5s;	
}

.bird--two {
	animation-delay: -0.25s;	
}

.bird--three {
	animation-delay: -0.75s;	
}

.bird-container {
	position: absolute;
	
	left: -10px;
	transform: scale(0) translateX(-100px);
	will-change: transform;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	z-index: 30;
	
	animation-duration: 110s;
	animation-delay: 0;
}

.bird-container--one {
	animation-name: fly-right-one;
	top: 25%;
}

.bird-container--two {
	animation-name: fly-right-two;
	top: 18%;
	animation-delay: 5s;
}

.bird-container--three {
	animation-name: fly-right-three;
	top: 10%;
	animation-delay: 10s;
}

.bird-container--four {
	animation-name: fly-right-one;
	top: 25%;
	animation-delay: 35s;
}

.bird-container--five {
	animation-name: fly-right-two;
	top: 18%;
	animation-delay: 40s;
}

.bird-container--six {
	animation-name: fly-right-three;
	top: 10%;
	animation-delay: 45s;
}

.bird-container--seven {
	animation-name: fly-right-one;
	top: 25%;
	animation-delay: 65s;
}

.bird-container--eight {
	animation-name: fly-right-two;
	top: 18%;
	animation-delay: 70s;
}

.bird-container--nine {
	animation-name: fly-right-three;
	top: 10%;
	animation-delay: 75s;
}

@keyframes fly-cycle {
	
	100% {
		background-position: -900px 0;
	}
	
}

@keyframes fly-right-one {
	
	0% {
		transform: scale(0.7) translateX(-100px);
	}
	
	100% {
		transform: scale(0.7) translateX(12000px);
	}
	
}

@keyframes fly-right-two {
	
	0% {
		transform: scale(0.5) translateX(-100px);
	}

	100% {
		transform: scale(0.5) translateX(18000px);
	}
	
}

@keyframes fly-right-three {
	
	0% {
		transform: scale(0.6) translateX(-100px);
	}
	
	100% {
		transform: scale(0.6) translateX(16000px);
	}
	
}

/*CHARS*/

.charSVG {
	position: relative;
	z-index: 10;
	transition: all .5s .05s cubic-bezier(0.01, 2.15, 0.27, 1.04);
	transform-origin: bottom center;
}
.charContainer {
	max-width: min-content;
	transition: opacity .3s ease;
	z-index: 100;
}
.charContainer .infoBtn:hover {
	transform: scale(1.3);
}
.charContainer .infoBtn:hover + div {
	transform: scale(1.1);
}
.charContainer.charActive .charSVG {
	transform: scale(1.1);
}
.charContainer.charActive .infoBtn {
	transform: scale(0.001);
	opacity: 0;
}


/* CHAR SPEECH BUBBLE */

.speechBubble {
	max-width: 300px;
	position: relative;
	margin: 0 auto;
	transform: scale(0.01) translateY(100%);
	opacity: 0;
	transition: all .45s cubic-bezier(0.01, 1.15, 0.27, 1.04);
	background: #8d1a60;
	border-radius: 15px;
}
.charContainer.charActive .speechBubble, #lady-help.is-active .speechBubble{
	transform: scale(1) translateY(-20px);
	opacity: 1;
}
.speechBubble button {
	pointer-events: none;
}
.charContainer.charActive .speechBubble button {
	pointer-events: auto;
}
.speechBubble::after, .speechBubbleMobile {
	content: '';
	display: block;
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #8d1a60;
	margin: 0 auto;
	position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.speechBubbleMobile{
	margin-top: -1px;
}

.speechText {
	display: none;
}
.speechText.active {
	display: block;
}
.speechText p {
	margin: 0;
	font: normal 16px/20px 'Lato', sans-serif;
	color: #fff;
	margin-bottom: 20px;
	padding: 0 10px;
}
.speechClose {
	position: absolute;
    right: -15px;
    top: -15px;
}
.speechClose button {
	pointer-events: auto;
    width: 35px;
    height: 35px;
    border: 0;
    border-radius: 50px;
    transition: all .3s ease;
}
.speechCloseButton {
    background: #fb9015 url(img/close-x.png) center center/50% no-repeat;
}
.speechBackButton {
    background: #fb9015 url(img/back-arrow.png) center center/55% no-repeat;
    opacity: 0;
    transform: scale(0.01);
}
.speechBackButton.active {
	transform: scale(1.0);
	opacity: 1;
}
.speechClose button:hover {
	transform: scale(1.15);
}
.speechInteractions {
	overflow: hidden;
	padding: 20px 15px 15px 15px;
}


/*CHAR 1*/

#char1 {
	position: absolute;
	bottom: 0;
	left: 6%;
}
#char1 .charSVG svg {
	display: block;
	max-width: 40vh;
	height: 50vh;
}
#char1 #m-torso {
	animation: breathe 3s forwards ease-in-out infinite;
	transform-origin: center;
}
#char1 #m-shield {
	animation: breathe2 3s forwards ease-in-out infinite;
	transform-origin: top center;
}
#char1 #m-head {
	animation: movehead 3s forwards ease-in-out infinite;
	transform-origin: 0 34%;
}
#char1 .infoBtn {
	left: 57%;
	bottom: 25%;
	pointer-events: auto;
}


/*CHAR 2*/

#char2 {
	position: absolute;
	bottom: 0;
	left: 64%;
}
#char2 .charSVG svg {
	display: block;
	max-width: 40vh;
	height: 50vh;
} 
#char2 #w-torso {
	animation: breathe 2.6s forwards ease-in-out infinite;
	transform-origin: center;
}
#char2 #w-arm {
	animation: breathe 2.6s forwards ease-in-out infinite;
	transform-origin: top center;
}
#char2 #w-head {
	animation: movehead 2.6s forwards ease-in-out infinite;
	transform-origin: 0 34%;
}
#char2 .infoBtn {
	left: 12%;
	bottom: 25%;
	pointer-events: auto;
}


/*CHAR ANIMATION*/

@keyframes breathe {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(3%);
	}
	
	100% {
		transform: translateY(0);
	}
}
@keyframes breathe2 {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(5%) scale(1.03);
	}
	
	100% {
		transform: translateY(0);
	}
}
@keyframes movehead {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(7deg);
	}
	
	100% {
		transform: rotate(0deg);
	}
}



/*BUILDING POPUPS/INTERIORS*/

.popUpsContainer {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
}
.buildingPopup {
	pointer-events: none;
    width: 96vw;
    height: 96vh;
    top: 2vh;
    left: 2vw;
    background: #fff;
    position: absolute;
    z-index: 100;
    transition: all .6s 0s cubic-bezier(0.81, -0.67, 0.84, 1);
    transform: translateY(0vh) scale(0.1);
    overflow: hidden;
    opacity: 0;
    border-radius: 40px;
}
.buildingPopup.active {
	pointer-events: auto;
	transform: translateY(0) scale(1);
    transition: all .5s .3s cubic-bezier(0.01, 1.5, 0.27, 1.04);
    opacity: 1;
}
.transitionCover {
	position: absolute;
	width: 100%;
    height: 100vh;
    transition: filter .6s 0.7s ease, opacity .3s 1s ease;
    filter: brightness(10);
}
.buildingPopup.active .transitionCover {
	filter: brightness(1);
	opacity: 0;
}
.closeInterior {
	background: var(--modal-popup-color);
    display: inline-block;
    padding: 30px 30px 50px 30px;
    border-radius: 30px 30px 0 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 20px);
    transition: all .5s ease;
    z-index: 10;
}
.closeInterior img {
	max-width: 50px;
	display: block;
}
.closeInterior:hover {
	transform: translate(-50%, 0);
}
/*.interiorContent {
    border-radius: 20px;
    position: absolute;
    top: 15%;
    left: 7.5%;
    width: 500px;
    box-shadow: 15px 15px 0 rgba(141, 26, 96, 0.3);
    transform: translateX(-100vw) rotate(-40deg);
    transition: transform .5s .5s cubic-bezier(0.01, 1.3, 0.27, 1.04);
    height: 100%;
    overflow-y: auto;
}*/
.interiorContent {
    border-radius: 20px;
    position: absolute;
    top: 5vh;
    left: 2.5%;
    width: 500px;
    box-shadow: 15px 15px 0 rgba(141, 26, 96, 0.3);
    transform: translateX(-100vw) rotate(-40deg);
    transition: transform .5s .5s cubic-bezier(0.01, 1.3, 0.27, 1.04);
    height: 100%;
    max-height: 85vh;
}
.buildingPopup.active .interiorContent {
	transform: translateX(0) rotate(0deg);
}
.interiorHeader {
	background: #8d1a60;
	border-radius: 20px 20px 0 0;
	padding: 20px;
}
.interiorHeader h3 {
	color: #fff;
	font: normal 40px/40px 'Lato', sans-serif;
	margin: 0 0 5px 0;
}
.interiorHeader p {
	color: #fff;
	font: normal 18px/20px 'Lato', sans-serif;
	margin: 0;
}
.interiorText {
	background: #fff;
	padding: 20px;
	border-radius: 0 0 20px 20px;
	height: calc(100% - 105px);
	overflow: auto;
}
.interiorText p {
	margin: 0 0 15px 0;
	font: normal 18px/20px 'Lato', sans-serif;
	color: #333;
}
.interiorText button {
	width: auto;
	display: inline-block;
	margin-top: 5px;
}

.oracle-form-field__column__otp {
    background: #787878;
    color: #fff;
    padding: 30px 20px 10px 20px;
    border-radius: 10px;
}

/* MODAL POP UP BGS */

#building1Popup {
	background: url(img/interior-bg-1.png) center center/cover no-repeat;
}
#building2Popup {
	background: url(img/interior-bg-car.png) center center/cover no-repeat;
}
#building3Popup {
	background: url(img/medical_aid_for_individuals_background.jpg) center center/cover no-repeat;
}
#building4Popup {
	background: url(img/medical_aid_for_your_employees_background.jpg) center center/cover no-repeat;
}
#building5Popup {
	background: url(img/interior-bg-1.png) center center/cover no-repeat;
}
#building6Popup {
	background: url(img/car-home-insurance.jpg) center center/cover no-repeat;
}
#building7Popup {
	background: url(img/biz-sol.jpg) center center/cover no-repeat;
}
#building8Popup {
	background: url(img/funeral_cover.jpg) center center/cover no-repeat;
}
#building9Popup {
	background: url(img/250-50-life-cover.jpg) center center/cover no-repeat;
}
#contactUsPopup{
	background: url(img/250-50-life-cover.jpg) center center/cover no-repeat;
}
#building10Popup {
	background: url(img/legacy-life-cover.jpg) center center/cover no-repeat;
}
#building11Popup {
	background: url(img/buildings.jpg) center center/cover no-repeat;
}

#building12Popup {
	background: url(img/contents.jpg) center center/cover no-repeat;
}

#building13Popup {
	background: url(img/fleet.png) center center/cover no-repeat;
}
#building14Popup,
 #building18Popup{
	background: url(img/rewarder.png) center center/cover no-repeat;
}

#building15Popup {
    background: url(img/car-home-insurance.jpg) center center/cover no-repeat;
}
#building16Popup {
    background: url(img/car-home-insurance.jpg) center center/cover no-repeat;
}
@keyframes homeHover {
	0% {
		filter: grayscale(1) brightness(0.9);
	}
	30% {
		filter: grayscale(0) brightness(150%);
	}
  	100% {
		filter: grayscale(0) brightness(100%);
	}
}


.oracle-form-field__row{
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 20px;
	margin-bottom: 50px;
}

.oracle-form-field__column{
	width: 100%;
}

.oracle-form-field__column label{
	display: block;
}
.oracle-form-field__column input:not( .oracle-form-field__column input[type="submit"]),
.oracle-form-field__column select{
	border: 1px solid #cacaca;
    border-radius: 10px;
    height: 2.5rem;
    margin: 0;
    margin-top: 10px;
    overflow: auto;
    padding: 10px;
    resize: none;
    transition: background-color 70ms cubic-bezier(.2,0,.38,.9),outline 70ms cubic-bezier(.2,0,.38,.9);
    vertical-align: baseline;
    width: 100%;
}

input::placeholder {
  position: absolute;
  left: -1000000px;
  text-indent: -1000000px;
}
.oracle-form-field__column--submit-button-right{
	display: flex;
	justify-content: end;
}
.oracle-form-field__column--submit-button-right input{
	width: auto;
	display: inline-block;
	cursor: pointer;
}

.alert--success{
	color: #666;
    background: #9acf9aad;
    padding: 10px;
    border-radius: 5px;
}

.alert--error{
	color: #666;
    background: #ffd77782;
    padding: 10px;
    border-radius: 5px;
}

@media screen and (max-width: 450px) {
	nav .logo img {
		max-width: 250px;
	}
}

.interiorText.max-135 {
	height: calc(100% - 135px);
}

.no-mar-bot {
	margin-bottom: 0 !important;
}

.button-grid-important {
	grid-gap: 10px !important;
	grid-template-columns: 1fr 1.3fr 1.3fr !important;
	display: grid !important;
	align-items: center !important;
}

#goBack {
	font-size: 20px !important;
	text-decoration: none !important;
}

/* @media screen and (min-height: 1065px), */
@media screen and (max-width: 1200px) {
	.cityScene,
	#foreground,
	.buildingPopup.desktop {
		display: none !important;
	}

	body {
		background-image: url(img/mobile/mobile-bg-new.jpg);
		background-attachment: fixed;
		background-size: cover;
		overflow-x: hidden !important;
		overflow-y: auto !important;
	}

	.full-width-btn-container {
		display: grid;
		width: 100%;
		align-items: center;
		justify-items: center;
	}

	#back-to-top-btn {
		opacity: 1;
		pointer-events: auto;
		background-color: transparent;
		color: white;
		padding: 15px 20px;
		border: 1px solid white;
		text-align: center;
		margin: 0 auto 60px auto;

	}

	.mobile-site {
		display: block;
	}

	#welcomeScreen {
		position: fixed;
		display: none;
	}

	.sunrise {
		width: 100%;
		margin-top: 100px;
	}

	.mobile-section {
		position: relative;
		margin-bottom: 60px;
	}

	.mobile-section.extra-spacing {
		min-height: 1px;
	}

	.char-section {
		background-image: url(img/mobile/char-1-tree.png);
		background-size: 350px;
		background-repeat: no-repeat;
		background-position-x: 105%;
		background-position-y: 30px;
	}

	.char-1-mobile {
		position: relative;
		width: 550px;
		left: -150px;
		top: -50px;
		z-index: 5;
	}

	.char-1-popups {
		position: absolute;
		left: 50%;
		top: 100px;
		transform: translateX(-50%);
		width: 100%;
		height: auto;
		z-index: 10;
	}

	.infoBtn.iIconBtn.mobile {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
	}

	#char-1-speech-mobile.active,
	#char-1-speech-mobile-2.active,
	#char-1-speech-mobile-4.active,
	#med-aid-speech-mobile.active,
	#business-insurance-speech-mobile.active {
		display: block;
		opacity: 1;
		transform: scale(1);
		z-index: 90;
	}

	#char-1-speech-mobile.active .speechButtons .button,
	#char-1-speech-mobile-2.active .speechButtons .button,
	#char-1-speech-mobile-4.active .button,
	#med-aid-speech-mobile .speechButtons .button,
	#business-insurance-speech-mobile .speechButtons .button {
		pointer-events: auto;
	}

	#char-1-speech-mobile-back.active {
		opacity: 1;
		pointer-events: auto;
		transform: scale(1);
	}

	.speechBubble::after {
		content: none;
	}

	.mobile-section .infoBtn {
		transition: all .2s ease;
		left: 50%;
		transform: translateX(-50%);
		transform-origin: left;
		display: grid;
		grid-template-columns: 50px 1fr;
		background-color: var(--modal-popup-color);
		border-radius: 100px;
	}

	.mobile-section .infoBtn button {
		padding: 5px 10px 5px 5px;
	}

	.mobile-section .infoBtn.no-grid {
		display: block;
		background-color: transparent;
		border-radius: 0;
	}

	.mobile-section .infoBtn svg {
		position: relative;
		z-index: 2;
		background: #8d1a60;
		border-radius: 100px;
		width: 50px;
		height: 50px;
	}

	.mobile-section .infoBtn.no-grid svg {
		background: transparent;
		width: 100px;
		height: 100px;
	}

	.funeral-section,
	.legacy-life-section,
	.med-aid-section,
	.oracle-rewarder-section,
	.business-insurance-section {
		min-height: 300px;
		background-image: url(img/mobile/smart-funeral-cover.png);
		background-size: 800px;
		background-repeat: no-repeat;
		background-position-x: 130%;
		background-position-y: 100%;
	}

	.business-insurance-section {
		background-image: url(img/mobile/business-insurance.png);
		min-height: 400px;
	}

	.oracle-rewarder-section {
		background-image: url(img/mobile/oracle-rewarder.png);
		min-height: 400px;
	}

	.legacy-life-section {
		background-image: url(img/mobile/legacy-life-cover.png);
	}

	.med-aid-section {
		background-image: url(img/mobile/medical-aid.png);
		min-height: 500px;
	}

	.car-home-section,
	.twenty-fifty-section,
	.bizz-solution-section,
	.rainmaker-plus-section,
	.group-risk-section {
		min-height: 450px;
		background-image: url(img/mobile/car-and-home-insurance.png);
		background-size: 800px;
		background-repeat: no-repeat;
		background-position-x: -30%;
		background-position-y: 100%;
	}

	.group-risk-section {
		background-image: url(img/mobile/group-risk.png);
	}

	.rainmaker-plus-section {
		background-image: url(img/mobile/rainmaker-plus.png);
	}

	.bizz-solution-section {
		background-image: url(img/mobile/bizz-solution.png);
	}

	.twenty-fifty-section {
		background-image: url(img/mobile/250-50-life-cover.png);
		min-height: 550px;
	}

	.modal-overlay {
		background: rgba(96, 38, 61, 0.95);
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 50;
		pointer-events: none;
		width: 100%;
		height: 100vh;
		position: fixed;
		display: none;
		justify-items: center;
		align-items: center;
		z-index: 110;
	}

	.modal-overlay .mobile-popup {
		opacity: 1;
		pointer-events: auto;
	}

	.mobile-popup {
		width: 95%;
		/* height: 95%; */
		height: 95vh;
		/* height: fit-content; */
		position: relative;
		max-width: 800px;
	}

	.mobile-popup .speechCloseButton {
		position: absolute;
		right: -10px;
		top: -10px;
		width: 40px;
		height: 40px;
		border-radius: 100px;
		border: none;
	}

	.mobile-popup .interiorText {
		overflow-y: auto;
		height: calc(100% - 95px);
	}

	.mobile-popup .interiorText.max-135 {
		height: calc(100% - 165px);
	}
}

@media screen and (max-width: 1000px) {
	.funeral-section,
	.legacy-life-section,
	.med-aid-section,
	.oracle-rewarder-section,
	.business-insurance-section {
		background-size: 600px;
	}

	.car-home-section,
	.twenty-fifty-section,
	.bizz-solution-section,
	.rainmaker-plus-section,
	.group-risk-section {
		min-height: 350px;
		background-size: 600px;
	}

	.business-insurance-section {
		min-height: 350px;
	}

	.twenty-fifty-section {
		min-height: 420px;
	}

	.oracle-rewarder-section {
		min-height: 300px;
	}

	.med-aid-section {
		min-height: 400px;
	}
}

@media screen and (max-width: 700px) {
	.char-1-mobile {
		width: 250px;
		left: -50px;
	}

	.char-section {
		background-size: 150px;
	}

	.char-1-popups {
		top: 20px;
	}

	.funeral-section,
	.legacy-life-section,
	.med-aid-section,
	.oracle-rewarder-section,
	.business-insurance-section {
		background-size: 400px;
		background-position-x: 50% ;
		min-height: 200px;
	}

	.business-insurance-section {
		min-height: 250px;
	}

	.car-home-section,
	.twenty-fifty-section,
	.bizz-solution-section,
	.rainmaker-plus-section,
	.group-risk-section {
		background-size: 400px;
		background-position-x: 50% ;
		min-height: 250px;
	}

	.group-risk-section {
		min-height: 280px;
	}

	.twenty-fifty-section {
		min-height: 320px;
	}

	.med-aid-section {
		min-height: 300px;
	}

	.oracle-rewarder-section {
		min-height: 250px;
	}

	.interiorHeader h3 {
		font: normal 30px/30px 'Lato', sans-serif;
	}

	.interiorText.max-height-115 {
		height: calc(100% - 115px);
	}

	.interiorText.max-height-125 {
		height: calc(100% - 125px);
	}

	.interiorText.max-height-145 {
		height: calc(100% - 145px);
	}

	.interiorText.max-height-165 {
		height: calc(100% - 165px);
	}

	.interiorText.max-height-220 {
		height: calc(100% - 220px);
	}

	.interiorText.max-height-300 {
		height: calc(100% - 300px);
	}
}


@media screen and (max-width: 400px){
	#sns-button-group-mobile{
		display: flex !important;
	    flex-direction: column;
	}
}
.mobile-register-fields-container,
.desktop-register-fields-container{
	display: none;
}
.mobile-register-fields-container.active,
.desktop-register-fields-container.active{
	display: block;
}
.login-button-group-container {
	display: none;
	justify-content: end;
}
.login-button-group-container.active {
	display: flex;
}
.register-button-group-container{
	display: none;
	justify-content: end;
}
.register-button-group-container.active{
	display: flex;
}