@import url('https://fonts.googleapis.com/css2?family=Barlow&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;400;500&display=swap');

html {
	/*
	scroll-snap-type:	y mandatory;
	scroll-padding:		0vh 0 0;
	*/
	box-sizing:		content;
}

html, body {
	margin:			0px 0px 0px 0px;
	padding:		0px 0px 0px 0px;
	/*
	font-family:		'Barlow', sans-serif;
	*/
	font-family:		 'Manrope', sans-serif;
	color:			white;
	/*
	touch-action:		pan-x pan-y;
	*/
}

html.index {
	scroll-snap-type:	y proximity;
	scroll-snap-type:	y mandatory;
}

a, a:visited {
	color:	white;
}

/* header */

.header {
	color:		white;
	font-size:	3rem;
	display:	grid;
	grid-template-columns:	auto auto;
	grid-template-rows:	auto auto;

	position:	fixed;
	top:		0px;
	left:		0px;
	right:		0px;

	background-color:	#000000b0;
}

.header .phoneNumber {
	font-size:	1rem;
	text-align:	right;
	margin-right:	0.5rem;
}

.header h1 {
	font-size:	3rem;
	padding:	0px;
	margin:		0px;
	font-weight:	normal;
	white-space:	nowrap;
}

@media (max-width:	800px) {
	.header, .header h1 {
		font-size:		1.5rem;
	}
}


.header > div {
	justify-self:	start;
}

.header > div + div {
	justify-self:	end;
}

.header > * {
	margin-left:	1rem;
	margin-top:	1rem;
	margin-bottom:	1rem;
	border:		0px solid red;
}


@media (max-width: 800px) {
	.header > * {
		margin-left:	0.5rem;
	}
}


.header > *+* {
	margin-left:	0rem;
}
.header a, .header a:visited {
	color:			white;
	text-decoration:	none;
}

.header > div {
	display:	grid;
	text-shadow:	0px 0px 8px rgba(255, 255, 255, 1);
}

.header > div > div > div {
	font-size:		0.75rem;
	display:		grid;
	justify-content:	start;
	align-items:		start;
	grid-template-columns:	auto auto auto auto auto auto auto;
	align-content:		center;
	flex-wrap:		wrap;
}

@media (max-width:	800px) {
	.header > div > div > div {
		grid-template-columns:	auto auto auto auto auto;
	}

	.header > div > div > div > div:nth-child(7) {
		grid-column:	 1 / -1;
	}
}




.header > div > div > div {
	border:		0px solid blue;
}

.header > div > div > div > div + div {
	margin-left: 0.5rem;
}

@media (max-width:	800px) {

	.header > div > div > div > div:nth-child(6) {
		display:	none;
	}

	.header > div > div > div > div:nth-child(7) {
		/*
		flex-basis:	100%;
		*/
		margin-left:	0px;
	}
}

.header > div > div > div span {
	display:	inline-block;
}

/* .header > div > div > div, */
.header > div > div > div * {
	user-select:	none;
	white-space:	nowrap;
}

.header > div > div > div span:nth-of-type(1) {
	position:	absolute;
	display:	inline-block;
	transition:	transform 4s;
	transition-timing-function:	ease-in;
	border:		0px solid blue;
	opacity:	0;
}

.header > div > div > div:hover span:nth-of-type(1) {
	/*visibility:	hidden;*/
	display:	inline-block;
	transform:	translate(0px, -20vh) rotate(360deg);
	border:		0px solid red;
	opacity:	1;
}

.header > div > div > div:hover div:nth-child(2) span:nth-of-type(1) {
	transition-duration:	3s;
}

.header > div > div > div:hover span:nth-of-type(2) {
	opacity:	0;
}

.header > div > * {
	border:		0px solid red;
}

/* menu */

.menu {
	font-size:		1.5rem;
	display:		flex;
	list-style:		none;
	justify-content:	flex-end;
	align-items:		center;
	padding-left:		0px;
	flex-wrap:		wrap;
	margin-top:		0px;
	margin-bottom:		0px;
}

@media (max-width:	800px) {
	.menu {
		font-size:		1rem;
	}
}

.menu > li {
	padding-right:	0.5rem;
}

.menu > li + li {
	padding-left:	0.5rem;
	border-left:	1px solid white;
}

/*
@media (max-width:	800px) {
	.menu > li + li {
		border-left:	0px solid white;
	}
}
*/
.menu a, .menu a:visited {
	color:			white;
	text-decoration:	none;
}

/* pictures */


.static-background {
	position:	fixed;
	background:	linear-gradient(155deg, rgba(0,0,0,1) 0%, rgba(5,11,79,1) 55%, rgba(50,32,6,1) 100%);
	background:	linear-gradient(155deg, rgba(0,0,0,1) 0%, rgba(5,11,79,1) 83%, rgba(9,12,19,1) 100%);
	background:	linear-gradient(155deg, rgba(0,0,0,1) 0%, rgba(11,13,40,1) 83%, rgba(9,12,19,1) 100%);
	left:		0px;
	right:		0px;
	bottom:		0px;
	top:		0px;
	z-index:	-1;
}

.pictures {
}

.pictures > div {
	/*
	scroll-snap-type:	y mandatory;
	scroll-padding:		0px;
	border:			1px solid green;
	*/
}

.pictures > div > div {
	width:		80vw;
	height:		100vh;
	margin-left:	auto;
	margin-right:	auto;

	background-position:	center;
	background-size:	contain;
	background-repeat:	no-repeat;
	scroll-snap-align:	start;
	margin-top:		0vh;
	border:		1px solid #00000000;
}

.pictures > div > div input {
	display:	none;
}

.pictures > div > div input:checked + label img {
	border:		1px solid blue;
	scale:		2;
}

.pictures > div > div img {
	margin-top:	15vh;
	display:	block;
	max-width:	80vw;
	max-height:	70vh;
	margin-left:	auto;
	margin-right:	auto;

	box-shadow:	0px 0px 50px 10px rgba(255,255,255,0.19);
	border:		0px solid red;
	/*
	touch-action:	pinch-zoom;
	pointer-events:	none;
	*/
}

.pictures > div > div img:active {
	border:		1px solid red;
}

/* footer */

.footer {
	color:			white;
	padding-top:		2rem;
	padding-bottom:		2rem;
	text-align:		center;
	scroll-snap-align:	end;
	border:			0px solid red;
}

.footer > div {
	margin-top:	0.5rem;
	margin-bottom:	0.5rem;
}

.footer > div.social-media {
	font-size:	2rem;
}

.footer > div.social-media > a {
	display:	inline-block;
	margin-left:	0.25rem;
	margin-right:	0.25rem;
}

/* css show */

body {
	margin-top:	0px !important;
}