html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

a:visited {
	color: inherit;
}

a.link {
	text-decoration: underline;
	cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 20px;
	margin-bottom: 20px;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.5em;
}

h3 {
	font-size: 1.17em;
}

h4 {
	font-size: 1em;
}

h5 {
	font-size: 0.83em;
}

h6 {
	font-size: 0.75em;
}

p {
	margin-bottom: 30px;
}

b {
	font-weight: bold;
}

:root {
	--main-blue-color: #6495ED;
	--active-blue-color: #5883d0;
	--main-yellow-color: #f4c06b;
	--main-yellow-color: #f2b654;

}

body {
	/*background: #292929;*/
	padding-top: 50px;
	width: 100%;
	font-family: 'Signika Negative', sans-serif;
	/*font-family: 'Arial', sans-serif;*/
}

header {
	background: #1b1b1b;
	width: 100%;
	height: 50px;
	position: fixed;
	top: 0;
	left: 0;
	border-bottom: 1px solid black;
	clear: both;
	overflow: hidden;
	z-index: 99;
	transition-duration: 200ms;
}

header #menu {
	color: white;
	float: left;
	line-height: 50px;
	font-size: 18px;
	font-weight: 300;
	padding-left: 20px;
}

#menu ul {
	list-style-type: none;
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	margin-inline-end: 0px;
	padding-inline-start: 0;
}

#menu ul li {
	display: inline-block;
	padding-left: 7px;
	padding-right: 7px;
}


#menu ul li:hover {
	color: orange;
}

header .checkbox {
	display: none;
	opacity: 0;
}

#logo {
	display: block;
	font-family: 'Arial', sans-serif;
	font-weight: bold;
	color: white;
	text-align: center;
	width: 200px;
	height: 50px;
	line-height: 50px;
	font-size: 30px;
	margin: auto;
	position: fixed;
	top: 0;
	left: calc(50% - 100px);
	z-index: 100;
	transition-duration: 1000ms;
}

#logo:hover {
	transform: scale(1.05);
	color: orange;
}

header #account {
	position: fixed;
	display: block;
	color: white;
	width: auto;
	line-height: 50px;
	font-size: 18px;
	font-weight: 300;
	padding-right: 20px;
	top: 0;
	right: 0;
}

header #account:hover {
	color: orange;
}

@keyframes scale-up-center {
	0% {
		transform: scale(0.8);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes rscale-up-center {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	100% {
		transform: scale(0.8);
		opacity: 0;
	}
}


.popin {
	box-sizing: border-box;
	width: 60vw;
	min-height: 40vh;
	max-height: 80vh;
	border-radius: 10px;
	background: white;
	z-index: 98;
	position: fixed;
	top: calc(100% - 90vh);
	left: calc(50% - 30vw);
	padding: 25px;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    box-shadow: 0 30px 60px 0 rgba(90, 116, 148, 0.4);
	overflow: scroll;
	animation: scale-up-center 200ms cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	transition-duration: 500ms;
}

.popin h1, .popin h2, .popin h3, .popin h4, .popin h5 {
	text-align: center;
	margin-bottom: 15px;
}

.success {
	color: green;
}

.warning {
	color: orangered;
}

@keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}

#backdrop {
	background: rgba(0, 0, 0, 0.4);
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999;
	animation: fadein 300ms;
}

#map {
	width: 100%;
	height: calc(100% - 50px);
	position: fixed;
	top: 50px;
	left: 0;
}
p {
	text-align:justify;
	text-justify: auto;
	line-height: 22px;
	color: #5e5e5e;
}

.link {
	color: var(--main-blue-color) !important;
}

:root {
	--map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
}

button {
	background: var(--main-blue-color);
	margin: auto;
	display: block;
	color: white;
	border-radius: 4px;
	border: none;
	font-weight: bold;
	cursor: pointer;
	transition-duration: 250ms;
	padding: 10px;
	font-size: 12px;
	margin: 10px auto;
}

button.m {
	padding: 12px;
	font-size: 16px;
}

button.l {
	padding: 15px;
	font-size: 20px;
}

button:hover {
	transform: scale(1.01);
	background: var(--active-blue-color);
}

#add_field {
	width: 200px;
	background: green;
	color: white;
	position: fixed;
	bottom: 10px;
	left: calc(50% - 100px);
	transition-duration: 250ms;
	/*transition: ease-in-out;*/
}

#add_field:hover {
	transform: scale(1.05);
	/*transition-duration: 250ms;*/
	box-shadow: 0 0 11px rgba(33,33,33,.2);
}

.hidden {
	display: none;
}

form div {
	padding: 10px;
}

.popin #close_popin {
	color: inherit;
	text-decoration: none;
	text-align: right;
	float: right;
}

label {
	display: block;
	margin-bottom: 10px;
}

input, textarea {
	width: 100%;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid grey;
	box-sizing: border-box;
}

.popin textarea {
	min-width: 100%;
	max-width: 100%;
	min-height: 100px;
	max-height: 200px;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid grey;
	box-sizing: border-box;
}

.container-fluid {
	max-width: 1200px;
	min-width: 300px;
	margin: auto;
	padding: 50px;
	font-family: 'Arial', sans-serif;
	box-sizing: border-box;
	transition-duration: 200ms;
}

.box-s {
	max-width: 500px;
	margin: auto;
}

.alert {
	width: 100%;
	padding: 15px;
	border-radius: 5px;
	box-sizing: border-box;
	color: white;
}

.alert.error {
	background: rgba(255, 0, 0, 0.8);
}

.alert.info {
	background: rgba(21, 153, 255, 0.8);
}

.grid-12 {
	display: grid;
	grid-gap: 0 10px;
	grid-template-columns: repeat(12,1fr);
	margin: 0 auto;
}

.grid-item {
	grid-row: 1/span 1;
	grid-column: 1/span 4;
	border-bottom: none;
}

.grid-section-header {
	grid-row: 1/span 1;
	grid-column: 1/span 4;
	border-bottom: none;
	position: relative;
}

.grid-section-header:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: -10px;
	height: 1px;
	border-top: 1px solid #cdcdcd;
}

.grid-section-header h2 {
	margin: 24px 0;
	/*font-family: Proxima Nova SemiBold,sans-serif;*/
	font-size: 20px;
	font-weight: bold;
	line-height: 24px;
	line-height: 20px;
	/*color: #121212;*/
}

.grid-section-content {
	grid-column: 5/span 8;
	border-top: 1px solid #cdcdcd;
}

.grid-section-content .row {
	display: flex;
	padding: 24px 0;
	align-items: center;
	border-top: 1px solid #efefef;
	/*font-size: 0;*/
	font-family: Proxima Nova Regular,sans-serif;
}

.grid-section-content .row:first-of-type {
	border-top: none;
}

.row-label {
	display: block;
	flex: 0 0 29%;
	align-self: flex-start;
	font-size: 16px;
	/*font-weight: bold;*/
	line-height: 22px;
	margin-bottom: initial;
}

.row-info {
	font-size: 16px;
	line-height: 22px;
	flex: 1 1 auto;
	padding-right: 24px;
	color: #1d1d1d;
}

.row-action {
	flex: 0 0 auto;
}

a.row-action {
	color: #3498db;
}

.submenu {
	width: 100%;
	margin: auto;
	/*border-bottom: 1px solid lightgray;*/
	text-align: center;
	background: #343434;
	color: wheat;
}

.submenu ul {
	/*width: 100%;*/

}
.submenu li {
	display: inline-block;
	cursor: pointer;
	margin: 0 20px;
	padding: 10px;
	line-height: 25px;
	height: 25px;
	width: auto;
}

.visite_website {
	font-size: 15px;
}

.inline-icon {
	vertical-align: bottom;
	font-size: 18px !important;
}

#field_top {
	border-radius: 10px;
	/*padding: 20px;*/
	/*background-color: #feede6;*/
	/*background-image: linear-gradient(12deg,#fff 25%,hsla(0,0%,100%,0));*/
}

#lnk_website {
	background: rgba(31,41,55,100);
	background: #525252;
	padding: 12px 20px;
	font-size: 18px;
	min-width: 200px;
	font-weight: 300;
	border: 1px solid white;
}

.pull-right {
	float: right;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 8px;
	grid-row-gap: 8px;
	height: 400px;
}

.gallery img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition-duration: 100ms;
}
.gallery img:hover {
	transform: scale(0.99);
}

.div1 {
	grid-area: 1 / 1 / 3 / 3;
	max-height: 400px;
}

.div2 {
	grid-area: 1 / 3 / 2 / 4;
	height: 196px;
}

.div3 {
	grid-area: 2 / 3 / 3 / 4;
	height: 196px;
}

.div4 {
	grid-area: 1 / 4 / 2 / 5;
	height: 196px;
}

.div5 {
	grid-area: 2 / 4 / 3 / 5;
	height: 196px;
}

#map_img {
	width: 400px;
	height: 150px;
	border-radius: 10px;
}

@media (prefers-color-scheme: dark) {

	body {
		background: #2c2c2c;
	}

	.popin {
		background: #2c2c2c;
		color: white;
	}

	h1, h2, h3, h4, h5, h6 {
		color: white;
	}

	p {
		color: #e1e1e1;
	}

	.map-tiles {
		filter:var(--map-tiles-filter, none);
	}

	label {
		color: white;
	}

	address {
		color: white;
	}

}

@media (max-width: 1024px) {

	.grid-section-header {
		grid-column: 1/span 12;
	}

	.grid-section-content {
		grid-column: 1/span 12;
		border: none;
	}

	.gallery {
		grid-template-columns: repeat(3, 1fr)
	}

	.div4, .div5 {
		display: none
	}
}

@media (max-width: 768px) {

	.popin {
		width: 90%;
		z-index: 98;
		position: fixed;
		top: calc(100% - 90vh);
		left: 5%;
		padding: 15px;
	}

	.container-fluid {
		width: 100%;
		padding: 25px;
		margin-bottom: 50px;
	}

	.gallery {
		grid-template-columns: repeat(2, 1fr)
	}

	.div2, .div3 {
		display: none
	}

	#lnk_website.pull-right, #map_img.pull-right {
		float: initial;
	}

	#lnk_website {
		position: fixed;
		bottom: 10px;
		right: 10px;
	}

	#map_img {
		width: 100%;
		height: auto;
		display: block;
	}
}

@media (max-width: 480px) {
	.popin {
		width: 100%;
		border-radius: 0;
		z-index: 98;
		position: fixed;
		top: 50px;
		left: 0;
		padding: 15px;
		bottom: 0;
		max-height: 100%;
	}

	header #account {
		font-size: 0px;
	}

	header #menu ul {
		display: none;
	}

	header #account {
		height: 50px;
	}

	header #account::after, header #menu::before {
		font-family: 'Material Symbols Outlined';
		font-size: 25px;
	}

	header #account::after {
		content: '\e7fd';
		display: inline-block;
	}

	header #menu::before {
		content: '\e5d2';
		display: block;
	}

	header {
		height: auto;
	}

	header #menu {
		float: none;
		display: block;
		position: relative;
		width: 100%;
	}

	header #menu ul {
		display: none;
	}

	header #menu li {
		display: block;
	}

	header .checkbox {
		display: block;
		opacity: 0;
		z-index: 100;
		position: absolute;
		margin: 15px;
		width: 20px;
		height: 20px;
		cursor: pointer;
	}

	header input[type="checkbox"] {
		z-index: 1000;
	}

	header input[type="checkbox"]:checked ~ #menu ul {
		display: block;
	}

	.container-fluid {
		width: 100%;
		padding: 15px;
	}

	.gallery {
		height: 300px;
	}
}