@font-face {
	font-family: Eau;
	src: url("/eau_sans_book.otf") format("opentype");
	ascent-override: 110%;
}

@font-face {
	font-family: Eau;
	font-weight: bold;
	src: url("/eau_sans_bold.otf") format("opentype");
	ascent-override: 110%;
}

@font-face {
	font-family: Eau;
	font-style: italic;
	src: url("/eau_sans_book_obl.otf") format("opentype");
	ascent-override: 110%;
}

@font-face {
	font-family: Eau;
	font-style: italic;
	font-weight: bold;
	src: url("/eau_sans_bold_obl.otf") format("opentype");
	ascent-override: 110%;
}

:root {
	--ion-color-primary: #FF9483;
	--ion-color-primary-rgb: 255,148,131;
	--ion-color-primary-contrast: #000000;
	--ion-color-primary-contrast-rgb: 0,0,0;
	--ion-color-primary-shade: #e08273;
	--ion-color-primary-tint: #ff9f8f;
}

:root {
	--ion-color-secondary: #6093FD;
	--ion-color-secondary-rgb: 96,147,253;
	--ion-color-secondary-contrast: #000000;
	--ion-color-secondary-contrast-rgb: 0,0,0;
	--ion-color-secondary-shade: #5481df;
	--ion-color-secondary-tint: #709efd;
}

:root {
	--ion-color-tertiary: #43DDCA;
	--ion-color-tertiary-rgb: 67,221,202;
	--ion-color-tertiary-contrast: #000000;
	--ion-color-tertiary-contrast-rgb: 0,0,0;
	--ion-color-tertiary-shade: #3bc2b2;
	--ion-color-tertiary-tint: #56e0cf;
}

:root {
	--ion-background-color: #2D1C54;
	--ion-background-color-rgb: 45,28,84;
	--ion-text-color: #FFF4E8;
	--ion-text-color-rgb: 255,244,232;
	--ion-color-step-50: #38275b;
	--ion-color-step-100: #423263;
	--ion-color-step-150: #4d3c6a;
	--ion-color-step-200: #574772;
	--ion-color-step-250: #625279;
	--ion-color-step-300: #6c5d80;
	--ion-color-step-350: #776888;
	--ion-color-step-400: #81728f;
	--ion-color-step-450: #8c7d97;
	--ion-color-step-500: #96889e;
	--ion-color-step-550: #a193a5;
	--ion-color-step-600: #ab9ead;
	--ion-color-step-650: #b6a8b4;
	--ion-color-step-700: #c0b3bc;
	--ion-color-step-750: #cbbec3;
	--ion-color-step-800: #d5c9ca;
	--ion-color-step-850: #e0d4d2;
	--ion-color-step-900: #eaded9;
	--ion-color-step-950: #f5e9e1;
}

:root {
	--ion-font-family: Eau;
}

ion-input .label-text {
	margin: -0.1em;
}

.loading {
	text-align: center;
}

	.loading img {
		margin-top: 50%;
		max-width: 60%;
	}

	.loading .linear-progress {
		background: var(--ion-text-color);
		width: 50vw;
		margin: 20% auto;
		height: 1rem;
		border-radius: 10rem;
		overflow: hidden;
		position: relative;
	}

		.loading .linear-progress:after {
			content: '';
			position: absolute;
			inset: 0;
			background: var(--ion-color-secondary);
			scale: var(--blazor-load-percentage, 0%) 100%;
			transform-origin: left top;
			transition: scale ease-out 0.5s;
		}

.transition-container {
	display: grid;
	grid-template-columns: 100%;
}

.transition {
	/*position: absolute;*/
	/*background: var(--ion-background-color, #fff);*/
	opacity: 0;
	transform: translateX(100%);
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	height: 100%;
	animation-delay: 0s;
	animation-duration: 0.2s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	text-align: center;
}

@keyframes fadeInLeft {
	from {
		transform: translateX(100%);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.fadeInLeft {
	animation-name: fadeInLeft;
}

@keyframes fadeOutLeft {
	from {
		transform: translateX(0);
		opacity: 1;
	}

	to {
		transform: translateX(-100%);
		opacity: 0;
	}
}

.fadeOutLeft {
	animation-name: fadeOutLeft;
}

@keyframes fadeInRight {
	from {
		transform: translateX(-100%);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.fadeInRight {
	animation-name: fadeInRight;
}

@keyframes fadeOutRight {
	from {
		transform: translateX(0);
		opacity: 1;
	}

	to {
		transform: translateX(100%);
		opacity: 0;
	}
}

.fadeOutRight {
	animation-name: fadeOutRight;
}


/* Circle button */
ion-button[shape=circle] {
	--border-radius: 50%;
	width: 3em;
	height: 3em;
}

/* Spinner */
ion-spinner {
	width: 3em;
	height: 3em;
}

ion-content {
	--background: transparent;
}

.text-center{
	text-align:center;
}

.main-wrapper {
	min-height: 100%;
	padding: 0 0 2em;
	position: relative;
}

footer {
	bottom: 0;
	left: 0;
	position: absolute;
	width: 100%;
	height: 2.5em; /* Footer height */
	color: var(--ion-color-step-550);
	margin: -15px;
	padding: 0.5em;
	font-size: smaller;
}

	footer a {
		color: var(--ion-color-step-550);
	}


.ss-language-selector {
	text-align: right;
	padding: 0.5em;
}

.ss-title {
	text-align: center;
	margin: 0 1em;
}

	.ss-title > div {
		background-color: var(--ion-color-tertiary);
		color: var(--ion-background-color);
		border-radius: 0.5em;
		padding: 1em 2em;
		display: inline-block;
	}

	.ss-title h3, .ss-title p {
		margin: 0;
	}

.ss-title-over {
	margin-bottom: -3em;
}

h1 {
	margin: 0 2em 0 2em;
	font-weight: bold;
}

h2 {
	margin: 0.5em;
	font-weight: bold;
	font-size: 1em;
}

hr {
	border: none;
	border-top: 1px var(--ion-text-color) solid;
	height: 1px;
	margin: 0.5em;
}

.ss-intro {
	margin: 2em;
}


.ss-card {
	display: inline-block;
	background-color: var(--ion-text-color);
	color: var(--ion-background-color);
	border-radius: 1em;
	margin: 0 1.5em 1.5em 1.5em;
	padding: 1.5em;
	text-align: center;
}

	.ss-card h2 {
		font-size: 1.25em;
		font-weight: bold;
	}

	.ss-card .ss-input {
		text-align: left;
		margin: 2em 0;
	}

	.ss-card p {
		font-size: small;
	}

	.ss-card ion-button {
		margin: 1em 0;
	}

.solid-bg {
	background-color: background: var(--ion-background-color, #fff);
	height: 100%;
	/*padding: 2em 0;*/
}

.solid-bg-img1 {
	position: absolute;
	top: 250px;
	left: -85px;
	width: 70%;
}

.solid-bg-img2 {
	position: absolute;
	bottom: 20px;
	right: -80px;
	width: 60%;
}

.full-bg {
	background-image: url('/baloons.jpeg');
	background-size: cover;
	background-position: right;
	width: 100%;
	height: 100vh;
	z-index: -1;
	position: fixed;
	top: 0;
	left: 0;
}

.top-bg {
}

.top-banner {
	background-image: url('/baloons.jpeg');
	background-size: cover;
	background-position: center;
	padding: 2em 0;
}

.tb {
	background-color: #ffffffaa;
	color: var(--ion-background-color);
	padding: 0.75em 1em;
	border-radius: 0.5em;
	display: inline-block;
}


ion-button {
	font-weight: bold;
	/*--box-shadow: none;*/
	text-transform: none;
}

.file-input {
	width: 0;
	height: 0;
}

.file-label {
	background: var(--ion-color-primary, #3880ff);
	margin: 0.5em;
	overflow: hidden;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4), 0 3px 10px 0 rgba(0,0,0,0.3);
	background: var(--ion-color-primary, #3880ff);
	min-width: 6em;
	font-size: 1.25em;
	font-weight: bold;
	color: var(--ion-color-primary-contrast, #fff);
	border-radius: 10px;
	padding: 1em;
	text-align: center;
	display: inline-block;
	cursor: pointer;
	position: relative;
}

	.file-label::after {
		inset: 0px;
		position: absolute;
		content: "";
		opacity: 0;
	}

	.file-label:hover::after {
		background: var(--ion-color-primary-contrast, #fff);
		opacity: .08;
	}

	.file-label ion-icon {
		font-size: 2.5em;
	}

/* Gallery */

.gallery h2{
	font-size: 1.5em;
}

.gallery .thumbnail {
	display: inline-block;
	width: 152px;
	padding-bottom: 152px;
	margin: 0 1em 1em 0;
	position: relative;
}

	.gallery .thumbnail:hover {
		-webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4), 0 3px 10px 0 rgba(0,0,0,0.3);
		-moz-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4), 0 3px 10px 0 rgba(0,0,0,0.3);
		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4), 0 3px 10px 0 rgba(0,0,0,0.3);
	}

.gallery .loading {
	position: absolute;
	width: 100%;
	height: 100%;
}

.gallery ion-spinner {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

.gallery .image {
	position: absolute;
	width: 100%;
	height: 100%;
	border: 1px solid #808080;
	border-radius: 4px;
	overflow: hidden;
}

.gallery {
	margin-left: 0.8em;
}

@media screen and (max-width: 760px) {
	.gallery .thumbnail {
		width: 22%;
		padding-bottom: 22%;
		margin: 0 1.5% 1.5% 0;
	}
}

@media screen and (max-width: 590px) {
	.gallery .thumbnail {
		width: 29%;
		padding-bottom: 29%;
		margin: 0 2.16% 2.16% 0;
	}
}

@media screen and (max-width: 420px) {
	.gallery .thumbnail {
		width: 44%;
		padding-bottom: 44%;
		margin: 0 2.8% 2.8% 0;
	}
}



/* Modal adaptations */

ion-modal {
	--background: transparent !important;
	--backdrop-opacity: 0.66;
}