* {
	box-sizing: border-box;
}

#loading-message {
	font-size: 16pt;
	align-items: center;
	color: rgb(255, 40, 40);
	font-weight: normal;
	font-family: "venus";
}
@font-face {
	font-family: venus;
	src: url(Venus+Martre.otf);
}

html {
	overflow-y: scroll;
}

body {
	font-family: sans-serif;
	margin: 0;
}

.background {
	width: 100%;
	position: fixed;
	top: 0;
	overflow-x: hidden;
}

.haut {
	background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(209, 207, 233, 1) 99%);
	height: 50%;
	z-index: -1;
}

.bas {
	background: linear-gradient(0deg, rgba(117, 132, 255, 1) 0%, rgba(255, 255, 255, 1) 49%);
	height: 100%;
	z-index: -2;
}

.header {
	color: rgb(245, 245, 245);
	font-weight: normal;
	font-family: "venus";
	z-index: 100;
}

.artview {
	width: 100%;
}

.artview a {
	text-decoration: underline;
	color: rgb(255, 30, 30);
}

.artview h2 {
	font-size: 12pt;
	margin-left: 24px;
	color: rgb(255, 40, 40);
	font-weight: normal;
	font-family: "venus";
}

.artview img {	
	opacity: 0;
	transition: opacity 0.3s ease-in-out;	
}

.header a {
	text-decoration: none;
	color: rgb(245, 245, 245);
}

.header-block {
	display: inline-block;
}

.grid-item {
	height: auto;
	float: left;
}
.grid{
	height: auto;
}

.grid-item img {
  display: block;
  width: 100%;
  height: auto;
	
  opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.hidden{
	display: none;
}

.dot {
	font-weight: normal;
	font-family: "venus";
	color: white;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: white;
	mix-blend-mode: difference;
	margin-left: calc(50% - 25px);
	margin-bottom: 32px;
}

@media only screen and (max-width: 767px) {
	.header {
		align-items: left;
		margin-left: 5%;
		margin-right: 5%;
		margin-top: 32px;
		margin-bottom: 24px;
	}
	.header h1 {
		text-align: left;
		font-size: 12pt;
		font-weight: normal;
		margin-top: 0pt;
		margin-right: 24px;
	}
	.artview {
		width: 100%;
	}
	.artview h2 {
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
	}
	.artview img {
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
		margin-bottom: 16px;
	}
	.grid {
		margin-left: 5%;
	}
	
.grid-item {
	width: 46%;
	margin-bottom: 8px;
	margin-left: 0px;
	margin-right: 8px;
	margin-top: 0px;
}
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.header {
		display: flex;
		flex-direction: row;
		align-items: left;
		margin-left: 24px;
		margin-right: 24px;
		margin-top: 32px;
		margin-bottom: 24px;
	}
	.header h1 {
		text-align: left;
		font-size: 12pt;
		font-weight: normal;
		margin-top: 0pt;
		margin-right: 40px;
	}
	.artview h2 {
		width: 80%;
	}
	.artview img {
		width: 50%;
		margin-left: 25%;
		margin-right: 25%;
		margin-bottom: 16px;
	}
	.grid {
		margin-left: 24px;
	}
	.grid-item {
		margin-left: 0px;
	}
}

@media only screen and (min-width: 1024px) {
	.header {
		display: flex;
		flex-direction: row;
		align-items: left;
		margin-left: 24px;
		margin-right: 24px;
		margin-top: 32px;
		margin-bottom: 24px;
	}
	.header h1 {
		text-align: left;
		font-size: 12pt;
		font-weight: normal;
		margin-top: 0pt;
		margin-right: 128px;
	}
	.artview h2 {
		width: 80%;
	}
	.artview img {
		width: 40%;
		margin-left: 30%;
		margin-right: 30%;
		margin-bottom: 16px;
	}
  .grid {
		margin-left: 24px;
	}
	.grid-item {
		margin-left: 0px;
	}
}