@charset "UTF-8";
/* CSS Document */

:root {
	--menu_home_color: #EE8AFF;
	--menu_news_color: #FFFFFF;
	--menu_about_color: #FFFFFF;
	--menu_services_color: #FFFFFF;
	--menu_contact_color: #FFFFFF;
	--menu_customer_color: #FFFFFF;
	--menu_color-hover: #FFDE00;
	--min_content_width: 320px;
	--butterfly_unscaled_width: 192px;
	--butterfly_unscaled_height: 128px;
	--butterfly_unscaled_width_value: 192;	/* just the value without "px", for calculations */
	--butterfly_frame_count: 60;
	--doc_width: 100%;
	--doc_height: 100%;
	--doc_scale_factor: 1;
}

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

html {
	font-family: sans-serif;
	line-height: 1.15;
/*	-webkit-text-size-adjust: 100%;*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
	background-color: #FF62BD;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
}

a {
	color: #A100A4;
	text-decoration: none;
	transition: color 300ms;
}

a:hover {
	color: #EE00F2;
}

a:active {
	color: #FC63FF;
}

input {
	font-family:Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	font-size: clamp(0.7rem, 2.5vw, 1.5rem);
}

.framed_image_640 {
	border: solid clamp(1px, 0.5vw, 5px) rgba(0, 0, 0, 0.5);
	max-width: clamp(100px, 20vw, 640px);
}

.fine_print {
	color: rgba(0, 0, 0, 0.5);
	font-size: clamp(0.4rem, 1.5vw, 1.0rem);
	font-style: italic;
}

#background_video {
	position: fixed;
	left: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	z-index: -100;
}

#page {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	flex-direction: column;
	z-index: 0;
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #FFFFFF;
	text-align: left;
	background-color: black;
}

#top_section {
	position: relative;
	flex: none;
	z-index: 600;
	width: 100%;
	border-bottom:solid min(5px, 0.5vh);
	border-color: rgba(255, 255, 255, 0.3);
	background: rgba(255,5,150,0.60);
	font-family:Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	font-style: italic;
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);  /* For Safari */
}

#td_logo {
	vertical-align: bottom;
	padding-left: 1.5em;
	padding-right: 1.5em;
	padding-top: 0.5em;
	width: 1%;
}

#logo {
	object-fit: scale-down;
	width: clamp(100px, 25vw, 300px);
}

#name1 {
/*	flex-basis: 0%;
	flex-shrink: 0;
	flex-grow: 0;*/
	max-width: 100%;
	max-height: 100%;
	padding-bottom: 0.5em;
	padding-top: 0.5em;
	object-position: left center;
	object-fit: scale-down;
}

#name2 {
/*	flex-basis: 0%;
	flex-shrink: 0;
	flex-grow: 0;*/
	max-width: 100%;
	max-height: 100%;
	padding-bottom: 0.5em;
	padding-top: 0.5em;
	object-position: left center;
	object-fit: scale-down;
}

#language_selector1 {
	width: 1px;
	border-spacing: 0px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 0px;
	padding-bottom: 0px;
/*	border: solid 1px;*/
	white-space: nowrap;
	line-height: 20px;
	background-color: rgba(0, 0, 0, 0.3);
}

#language_selector1 img {
	flex: auto;
	width: 3vw;
	min-width: 16px;
	max-width: 32px;
	margin-bottom: 5px;
	border-style: solid;
	border-width: 1px;
	border-color: rgba(255, 255, 255, 0.6);
}

#top_menu {
/*	flex: none;*/
/*
	left: 300px;
	right: 0px;
	bottom: 10px;
*/
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
/*	background-color: rgba(255, 255, 255, 0.2);*/
/*
	align-content: center;
	align-items: center;
*/
}

.menu_item {
	flex: auto;
	white-space: nowrap;
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	text-align: center;
/*
	border: solid medium rgba(0, 0, 0, 0);
	position: absolute;
*/
	font-family:Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	font-size: clamp(0.3rem, 2vw, 1.5rem);
	color: #FFFFFF;
	transition: background-color 1000ms, color 200ms;
}

@media (hover: hover) {
	.menu_item:hover {
		background-color: rgba(255, 255, 255, 0.3);
		cursor: pointer;
	}
	
	#menu_home:hover {
		color: var(--menu_color-hover);
	}
	
	#menu_news:hover {
		color: var(--menu_color-hover);
	}
	
	#menu_about:hover {
		color: var(--menu_color-hover);
	}

	#menu_services:hover {
		color: var(--menu_color-hover);
	}

	#menu_contact:hover {
		color: var(--menu_color-hover);
	}

	#menu_customer:hover {
		color: var(--menu_color-hover);
	}
}

#menu_home {
	color: var(--menu_home_color);
}

#menu_news {
	color: var(--menu_news_color);
}

#menu_about {
	color: var(--menu_about_color);
}

#menu_services {
	color: var(--menu_services_color);
}

#menu_contact {
	color: var(--menu_contact_color);
}

#menu_customer {
	color: var(--menu_customer_color);
}

#menu_marker_1 {
	position: fixed;
	top: 0px;
	left: 0px;
	border-top: ridge 4px;
	opacity: 0%;
	transition: left 300ms, top 300ms, width 300ms, opacity 300ms;
	pointer-events: none;
}

#menu_marker_2 {
	position: fixed;
	bottom: 0px;
	left: 0px;
	border-bottom: ridge 4px;
	opacity: 0%;
	transition: left 500ms, top 300ms, width 500ms, opacity 300ms;
	pointer-events: none;
}

#bottom_section {
	flex: auto;
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
}

#vertical_logo_container {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 20%;
	height: 100%;
	display: flex;
	flex-direction: column;
/*	border: solid;*/
	background: rgba(255,5,150,0.60);
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);  /* For Safari */
	text-align: center;
	white-space: nowrap;
}

#vertical_logo {
	position: relative;
	flex: auto;
	width: 100%;
	height: 100%;
	padding: 5px;
	object-fit: scale-down;
}

#language_selector2 {
	position: relative;
	flex: auto;
	width: 100%;
	padding: 5px;
/*	border: solid 1px;*/
	white-space: normal;
	line-height: 14px;
	background-color: rgba(0, 0, 0, 0.3);
}

#language_selector2 img {
	width: 3vw;
	min-width: 16px;
	max-width: 32px;
	border-style: solid;
	border-width: 1px;
	border-color: rgba(255, 255, 255, 0.6);
}

#content_wrapper {
	flex: auto;
	opacity: 0;
	transition: opacity 1s;
}

#content {
	position: relative;
	top: 0px;
	left: 0px;
/*	right: 200px;*/
/*	bottom: 0px;*/
	width: 80%;
	height: 100%;
	background: rgba(255, 255, 255, 0.50);
	color: #fff1f1;
/*	padding: 20px;*/
/*	overflow-y:auto;*/
	scrollbar-color: rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0);
	font-family:Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	font-size: clamp(0.7rem, 2.5vw, 1.5rem);
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	-webkit-backdrop-filter: blur(3px);   /* For Safari */ 
	backdrop-filter: blur(3px);
}

#inner_content {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	border:solid thick;
	border-color: rgba(0, 0, 0, 0.5);
/*
	align-content: center;
	background: rgba(255, 255, 255, 0.5);
*/
	color: #fff1f1;
	padding: 20px;
	overflow-y: auto;
	scroll-behavior: smooth;
	scrollbar-color: rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0.2);
}

.content_item {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	padding: 30px;
	color: black;
	opacity: 0;
	transition: opacity 1s;
}

#content_home {
	position: absolute;
	top: 0px;
	left: 0px;
	opacity: 100%;
	z-index: 0;
}

#content_about {
	position: absolute;
	top: 0px;
	left: 0px;
	opacity: 0%;
	z-index: 0;
}

#content_services {
	position: absolute;
	top: 0px;
	left: 0px;
	opacity: 0%;
	z-index: 0;
}

#content_contact {
	position: absolute;
	top: 0px;
	left: 0px;
	opacity: 0%;
	z-index: 0;
}

.content_title {
	font-size: 150%;
	font-weight: bold;
}

.news_image {
	position: relative;
	width: clamp(200px, 30vw, 1000px);
/*	left: 50%;
	transform: translate(-50%, 0%);*/
	border: solid thin rgba(0, 0, 0, 0.5);
	opacity: 0.9;
}

.ornament1 {
	position: relative;
	width: clamp(50px, 50%, 300px);
	left: 50%;
	transform: translate(-50%, 0%);
	padding-top: 20px;
	padding-bottom: 20px;
}

.vertical_line {
	width: 3px;
	background-image: url('../images/pink.png');
	background-size: 100% 100%;
}

.inline-video-vertical {
	position: relative;
	height: clamp(100px, 50vh, 500px);
	max-width: 30vw;
	border: solid thin rgba(0, 0, 0, 0.5);
	left: 50%;
	transform: translate(-50%, 0%);
	object-fit: scale-down;
}

.description {
	font-style: italic;
}

.star-list-black {
	list-style-image: url('../images/star-bullet-big.png');
	list-style-position: outside;
}

.star-list-black li {
	padding-bottom: min(20px, 10%);
	font-style: italic;
	line-height: 1.15;
}

.condensed-star-list-black {
	list-style-image: url('../images/star-bullet-big.png');
	list-style-position: outside;
}

.condensed-star-list-black li {
	padding-bottom: min(5px, 2.5%);
	font-style: italic;
	line-height: 1;
}

.star-list-white {
	list-style-image: url('../images/star-bullet-big-white.png');
	list-style-position: outside;
}

.star-list-white li {
	padding-bottom: min(20px, 10%);
	font-style: italic;
	line-height: 1.15;
}

.condensed-star-list-white {
	list-style-image: url('../images/star-bullet-big-white.png');
	list-style-position: outside;
}

.condensed-star-list-white li {
	padding-bottom: min(20px, 10%);
	font-style: italic;
	line-height: 1;
}

.list-heading {
	border-bottom: thin solid;
	padding-bottom: clamp(1px, 0.2vw, 2px);
	font-weight: bold;
}

#list_of_problems {
	border: solid black 2px;
	border-radius: 30px;
	padding-top: 15px;
	padding-right: 10px;
	padding-left: 20px;
	background-color: rgba(0, 0, 0, 0.5);
	color: #EEEEEE;
	width: 95%;
	margin-right: 0px;
	margin-left: auto;
}

#list_of_solutions {
	border: solid black 2px;
	border-radius: 30px;
	padding-top: 15px;
	padding-right: 10px;
	padding-left: 20px;
	background-color: rgba(255, 255, 255, 0.5);
	color: black;
	width: 95%;
	margin-right: auto;
	margin-left: 0px;
	margin-top: 1em;
}

#list_of_methods {
	border: solid #ff0596 2px;
	border-radius: 30px;
	padding-top: 15px;
	padding-right: 10px;
	padding-left: 20px;
	background-color: rgba(255, 128, 202, 0.5);
	color: black;
	width: 95%;
	margin-right: 0px;
	margin-left: auto;
	margin-top: 1em;
	margin-bottom: 1em;
}

.white_bubble {
	border: solid black 2px;
	border-radius: 30px;
	padding-top: 15px;
	padding-right: 10px;
	padding-left: 20px;
	background-color: rgba(255, 255, 255, 0.5);
	color: black;
	width: 95%;
	margin-right: auto;
	margin-left: 0px;
	margin-top: 1em;
}

.pink_bubble {
	border: solid #ff0596 2px;
	border-radius: 30px;
	padding-top: 15px;
	padding-right: 10px;
	padding-left: 20px;
	background-color: rgba(255, 128, 202, 0.5);
	color: black;
	width: 95%;
	margin-right: auto;
	margin-left: 0px;
	margin-top: 1em;
	margin-bottom: 1em;
}

.details-base {
	margin: 1rem;
}

.details-heading {
	border-bottom: thin solid;
	padding-bottom: clamp(1px, 0.2vw, 2px);
	font-weight: bold;
	font-size: clamp(1rem, 3vw, 2rem);
}

.details-text {
	font-style: normal;
	font-weight: normal;
	font-size: clamp(0.7rem, 2vw, 1.5rem);
}

.details-image {
	max-width: clamp(50px, 20vw, 300px);
	border: solid rgba(0, 0, 0, 0.20) thick;
}

.invisible {
	display: none;
}

.content_contact_container1 {
	position: relative;
	display: flex;
}

#content_contact1 {
	position: relative;
	flex: none;
}

#map_container {
	position: relative;
	flex: none;
	width: clamp(100px, 25vw, 400px);
}

#map1 {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
}

#map2 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 10;
	opacity: 0;
	transition: opacity 1s;
}

#map2:hover {
	opacity: 1;
}

#content_contact2 {
	position: relative;
	flex: auto;
	margin-left: 10px;
}

#logo_aquanatour {
	width: clamp(50px, 40%, 200px);
	margin-left: 10%;
	padding: clamp(1px, 0.5%, 5px);
	border: solid #69A9C3 2px;
	transition: border 100ms;
}

#logo_aquanatour:hover {
	border: solid #69A9C3 5px;
}

#home_page_quote {
	position: absolute;
	top: 15%;
	left: 50%;
	transform: translate(-50%, 0%);
	scale: max(0.3, var(--doc_scale_factor));
    transform-origin: top left;
	opacity: 0;
	z-index: -10;
	transition: opacity 1s;
	object-fit: scale-down;
}

#photo-natacha-1 {
	width: 25vw;
	min-width: 100px;
	max-width: 400px;
	float: right;
	border: solid medium;
	border-color: rgba(0, 0, 0, 0.2);
	padding: 2px;
	margin-left: 10px;
}

.obf-eml {
	cursor: pointer;
	color: #A100A4;
	transition: color 300ms;
}

.obf-eml:hover {
	cursor: pointer;
	color: #EE00F2;
}

.obf-eml1 {
	display: initial;
}

.obf-eml2 {
	display: initial;
}

.obf-eml3::before {
	content: "\40"
}

.obf-eml3::after {
	content: ".lu"
}

#login-table {
	position: absolute;
	border: solid medium;
	border-radius: 20px;
	border-color: #ee8aff;
	background-color: rgb(255, 138, 255, 0.4);
	padding: 20px;
	width: clamp(400px, 75%, 800px);
	opacity: 0;
	transition: opacity 1s;
}

#login-email {
	width: 100%;
	border-radius: 8px;
}

#login-password {
	width: 100%;
	border-radius: 8px;
}

#forgot-password-table {
	position: absolute;
	border: solid medium;
	border-radius: 20px;
	border-color: #ee8aff;
	background-color: rgb(255, 138, 255, 0.4);
	padding: 20px;
	width: clamp(400px, 75%, 800px);
	opacity: 0;
	transition: opacity 1s;
	z-index: -10;
}

#forgot-password-email {
	width: 100%;
	border-radius: 8px;
}

#forgot-password-instructions {
	font-size: smaller;
	font-style: italic;
	padding-bottom: 10px;
}

#forgot-password-title {
	font-size: 110%;
	font-weight: bold;
	padding-bottom: 10px;
}

#new-password-table {
	position: absolute;
	border: solid medium;
	border-radius: 20px;
	border-color: #ee8aff;
	background-color: rgb(255, 138, 255, 0.4);
	padding: 20px;
	width: clamp(400px, 75%, 800px);
	opacity: 1;
	transition: opacity 1s;
	z-index: -10;
}

#new-password1 {
	width: 100%;
	border-radius: 8px;
}

#new-password2 {
	width: 100%;
	border-radius: 8px;
}

.form-button {
	background-color: rgb(255, 138, 255, 0.4);
	color: black;
	padding: 5px;
	margin-top: 10px;
	border: solid medium;
	border-color: #E54EFF;
	border-radius: 10px;
	transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}

.form-button:hover {
	background-color: rgba(229, 78, 255, 0.5);
	color: #FFDE00;
}

.form-button:disabled {
	background-color: rgba(200, 200, 200, 0.5);
	color: #545454;
	border-color: #A5A5A5;
}

.alert_error {
	display: inline-block;
	color: black;
	background-color: rgb(255, 0, 0, 0.3);
	border: solid medium red;
	border-radius: 10px;
	padding: 10px;
}

.alert_success {
	display: inline-block;
	color: black;
	background-color: rgba(30, 109, 0, 0.3);
	border: solid medium darkgreen;
	border-radius: 10px;
	padding: 10px;
}

#human_check_puzzle_source_area {
	width: clamp(160px, 30vw, 400px);
	height: clamp(80px, 14vw, 200px);
}

.human_check_puzzle_element {
	width: clamp(40px, 7vw, 100px);
	height: clamp(40px, 7vw, 100px);
	position: absolute;
	border: solid thin black;
	opacity: 0.5;
}

#human_check_puzzle_spacer {
	width: clamp(20px, 3vw, 50px);
}

#human_check_puzzle_drop_table {
	border: solid 1px #FFFFFF;
	border-spacing: 0px;
	border-collapse: collapse;
	background-image: url("../images/Human-Check-Puzzle-Hint.png");
	background-size: contain;
	box-shadow: 0 0 0 5px #FFDE0000;
	transition: box-shadow 1s;
}

.human_check_puzzle_drop {
	width: clamp(40px, 7vw, 100px);
	height: clamp(40px, 7vw, 100px);
	display: block;
	opacity: 0.5;
	box-shadow: 0 0 0 5px #FFDE0000;
	transition: box-shadow 0.5s;
}

/*#human_check_puzzle_solved {
	width: clamp(80px, 14vw, 200px);
	height: clamp(80px, 14vw, 200px);
	position: absolute;
	z-index: -10;
	opacity: 0;
	transition: opacity 1s;
}*/

.password_validity_sign {
	width: clamp(20px, 1.5vw, 40px);
}

.butterfly_parking {
	width: calc(var(--butterfly_unscaled_width) * min(1, var(--doc_scale_factor)));
	height: calc(var(--butterfly_unscaled_height) * min(1, var(--doc_scale_factor)));
/*	border: solid medium;
	border-color: rgba(0, 0, 0, 0.2); */
}

#bf_parking_home {
	position: absolute;
	bottom: 10px;
	left: 10px;
}

#bf_parking_news {
	margin-left: 10px;
}

#bf_parking_about {
	margin-left: 10px;
}

#bf_parking_services {
	margin-left: 10vw;
}

#bf_parking_contact {
	position: relative;
	flex: none;
	/*margin-left: max(-150px, -15%);*/
}

#bf_parking_customer {
	margin-left: 10px;
}

#butterfly-animation-wrapper {
	position: fixed;
	scale: clamp(0.5, var(--doc_scale_factor), 1);
    transform-origin: center center;
	top: 200px;
	left: -300px;
	width: var(--butterfly_unscaled_width);
	height: var(--butterfly_unscaled_height);
	z-index: 500;
	overflow: hidden;
/*	border: solid medium rgba(255, 0, 0, 1);*/
	rotate: 0deg;
	transition: top 1000ms, left 1000ms, rotate 1000ms, scale 1000ms;
	pointer-events: none;
/*	background-color: rgba(255, 255, 255, 0.5);*/
}

#butterfly-animation {
	position: fixed;
	top: 0px;
	left: 0px;
/*	width: 6000%;*/
	width: calc(100% * var(--butterfly_frame_count));
	height: 100%;
	background-image: url("../videos/butterfly-anim.png");
	background-size: 100%, 100%;
	background-repeat: no-repeat;
	animation-name: butterfly-flutter;
  	animation-duration: 1s;
/*  	animation-timing-function: steps(59);*/
  	animation-timing-function: steps(calc(var(--butterfly_frame_count) - 1));
  	animation-iteration-count: infinite;
	animation-play-state: running;
}

@keyframes butterfly-flutter {
  from { 
    transform: translateX(0);
  }
  to { 
/*    transform: translateX(-98.333333%); */
/*    transform: translateX(-11328px);*/
	  transform: translateX(calc(-1px * (var(--butterfly_frame_count) - 1)
		  * var(--butterfly_unscaled_width_value)));
  }
}

#web_design {
	position: fixed;
	bottom: 10px;
	right: 5px;
	font-family: sans-serif;
	font-size: clamp(0.5rem, 1.2vw, 1.5rem);
	rotate: -90deg;
	transform: translateX(100%);
	transform-origin: bottom right;
	color: white;
	padding: 2px;
	opacity: 0.5;
}

@media (min-width: 500px) {
	#name1 {
		display: none;
	}
}

@media (max-width: 499px) {
	#name2 {
		display: none;
	}
}

@media (min-height: 401px) {
	#vertical_logo_container {
		display: none;
	}
}

@media (max-height: 400px) {
	#language_selector1 {
		display: none;
	}
	
	#td_logo {
		padding: 0px;
	}
	
	#logo {
		display: none;
	}
	
	#name1 {
		display: none;
	}

	#name2 {
		display: none;
	}
	
	#top_section {
		width: 80%;
		padding-top: 10px;
	}

	#home_page_quote {
		left: 40%;
	}
	
	#web_design {
		display: none;
	}
}

@media (max-width: 599px) {
	#menu_marker_1 {
		border-top: ridge 2px;
	}

	#menu_marker_2 {
		border-bottom: ridge 2px;
	}
}

@media (max-width: 399px) {
	.star-list-black {
		list-style-image: url('../images/star-bullet-small.png');
	}

	.condensed-star-list-black {
		list-style-image: url('../images/star-bullet-small.png');
	}

	.star-list-white {
		list-style-image: url('../images/star-bullet-small-white.png');
	}
}

@media (min-width: 400px) and (max-width: 699px) {
	.star-list-black {
		list-style-image: url('../images/star-bullet-medium.png');
	}

	.condensed-star-list-black {
		list-style-image: url('../images/star-bullet-medium.png');
	}

	.star-list-white {
		list-style-image: url('../images/star-bullet-medium-white.png');
	}
}