@font-face {
  font-family: "Work Sans";
  src: url("../fonts/WorkSans-VariableFont_wght.ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 100 200 300 400 500 600 700 800 900;
}
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/WorkSans-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-style: italic;
}


/* Standards */

:root {
	--padding: 1.5rem;
	--color-white: #fff;
	--color-grey: #777;
	--color-light: #efefef;
	--color-text: #000;
	}

html {
	color: var(--color-text);
	font-size: 14pt;
	scroll-behavior: smooth;
	font-family: 'Work Sans', serif;
	font-weight: 600;
	}

@media only screen and (min-width: 1100px) {
	html {
		font-size: 18pt;
		line-height: 1.2em;
		}
	}

img {
	width: 100%;
	}
body {
	margin: 0rem;
	}
li {
	list-style: none;
	}
a {
	color: currentColor;
	text-decoration: underline;
	}
button {
	font: inherit;
	background: none;
	border: 0;
	color: currentColor;
	cursor: pointer;
	}
p {
	margin: 0;
	margin-bottom: 1em;
	}

strong, b {
	font-weight: normal;
	font-style: italic;
	}
small {
	font-size: inherit;
	color: var(--color-text-grey);
	}
h1, h2, h3, h4, h5 {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	}

/* Main Menu */

nav.menu{
	top: 0;
	text-align: center;
	z-index: 99999;
	font-weight: 600;
	gap:0;
	justify-content: space-between;
	position: sticky;
	background: #fff;
	}
nav.menu a {
	text-decoration: none;
	}
nav.menu a.logo-item {
	font-size: 6vw;
	display: block;
	width: 100%;
	padding: .5rem 0;
	}
nav.menu a.logo-item .logo-img{
	display: inline;
	height: 1em;
	width: auto;
	margin-right: 0.2rem;
	}
nav.menu .main-menu {
	padding: 0;
	margin:0;
	text-align: center;
	font-size: 0.8rem;
	display: flex;
	justify-content: center;
	}
nav.menu .main-menu a {
	transition: all .2s;
	text-decoration: none;
	padding:.5em .3em;
	display: block;
	}

@media only screen and (min-width: 1100px) {
	nav.menu{
		position: sticky;
		top: 0;
		text-align: center;
		z-index: 99999;
		display: flex;
		font-weight: 600;
		background: #fff;
		gap:0;
		justify-content: space-between;
		padding-top: 0;
		text-align: left;
		}
	nav.menu a {
		text-decoration: none;
		}
	nav.menu a.logo-item {
		padding-left: 2rem;
		padding-top: 0.5rem;
		font-size: 1rem;
		}
	nav.menu a.logo-item .logo-img{
		display: inline;
		height: 1rem;
		width: auto;
		margin-right: 0.2rem;
		}
	nav.menu .main-menu {
		display: flex;
		list-style: none;
		padding: 0;
		margin:0;
		font-size: 1rem;
		}
	nav.menu .main-menu a{
		margin: 0;
		padding: 0.5rem 2rem 0.5rem 2rem;
		display: block;
		text-decoration: none;
		}
	}

/* Header */

header {
	font-weight: 800;
	text-align: center;
	padding-top: 3rem;
	}

header .header-title {
	font-size: 10vw;
	padding: 0 5%;
	line-height: 0.9em;
	align-self: flex-end;
	margin-bottom: 3rem;
	letter-spacing: -0.03em;
	}
header .header-illustration {
	width: 100%;
	}
header .header-illustration img {
	display: block;
	}

@media only screen and (min-width: 1100px) {
	header .header-title {
		font-size: 7vw;
		padding: 0 5%;
		line-height: 0.9em;
		align-self: flex-end;
		margin-bottom: 3rem;
		letter-spacing: -0.03em;
		}
	header .header-illustration {
		width: 100%;
		}
	header .header-illustration img {
		display: block;
		}
}



/* Main Sections */


main {
	}
section {
	position: relative;
	padding: 1.5rem 1rem;
	}
section .section-anchor {
	position: absolute;
	top: -2rem;
	}
section h2,
footer h2 {
	text-transform: uppercase;
	line-height: 1em;
	margin-bottom: 2rem;
	}
section .two-column{
	display: block;
	}
section .two-column .column{
	margin-bottom: 1rem;
	}
section .text {
	}
section .two-column .illustration img {
	border-radius: 10px;
	}

@media only screen and (min-width: 1100px) {
	 section {
		padding: 1.5rem 2rem;
		}
	section .two-column{
		display: flex;
		gap: 2rem;
		flex-wrap: wrap;
		}
	section .two-column .column{
		width: calc(50% - 1rem);
		}
	}


/* Member Preview */

.member-preview {
	}
.member-preview .member{
	display: block;
	text-decoration: none;
	margin-bottom: 2rem;
	}
.member-preview .member img{
	border-radius: 10px;
	filter: grayscale(100%);
	transition: filter 1s;
	margin-bottom: .5rem;
	}
.member-preview .member img:hover{
	filter: grayscale(0%);
	}
.member-preview .member .infos h3{
	font-size: 1rem;
	margin: 0;
	font-weight: 600;
	}
.member-preview .member .infos .subtitle{
	font-size: 0.8rem;
	font-style: italic;
	}
.member-preview .member .moreinfos{
	font-size: 0.8rem;
	opacity: 0;
	transition: opacity 1s;
	}
.member-preview .member:hover .moreinfos{
	opacity: 1;
	}
.member-preview .member .moreinfos:hover{
	text-decoration: underline;
	}

@media only screen and (min-width: 1100px) {
	.member-preview {
		display: flex;
		gap: 2rem;
		flex-wrap: wrap;
		}
	.member-preview .member{
		width: calc(25% - 1.5rem);
		display: block;
		text-decoration: none;
		margin-bottom: 0;
		}
	}


/* Member Detail */

.member-detail .member-infos h2{
	margin-bottom: 0;
	}
.member-detail .member-infos .subtitle{
	margin-bottom: 3rem;
	font-style: italic;
	}
.member-detail .member-image {
	margin-bottom: 2rem;
	}

@media only screen and (min-width: 1100px) {
	.member-detail {
		display: flex;
		gap: 2rem;
		flex-wrap: wrap;
		}
	.member-detail .member-image,
	.member-detail .member-infos{
		width: calc(50% - 1rem);
		}

	}


/* Event Preview */

.event-preview {
	text-decoration: none;
	margin-bottom: 3rem;
	display: block;
	}
.event-preview .event-preview-image {
	margin: 0;
	margin-bottom: 1rem;
	}
.event-info-header {
	margin-bottom: 2rem;
	}
.event-preview .event-preview-infos .event-infos{
	font-size: 0.8rem;
	}
.event-preview .moreinfos{
	font-size: 0.8rem;
	opacity: 1;
	}
.event-preview .moreinfos:hover{
	text-decoration: underline;
	}

@media only screen and (min-width: 1100px) {
	.event-preview {
		display: flex;
		gap: 2rem;
		flex-wrap: wrap;
		text-decoration: none;
		margin-bottom: 3rem;
		}
	.event-preview .event-preview-image,
	.event-preview .event-preview-infos{
		width: calc(50% - 1rem);
		}
	.event-preview .moreinfos{
		font-size: 0.8rem;
		opacity: 0;
		transition: opacity 1s;
		}
	.event-preview:hover .moreinfos{
		opacity: 1;
		}

	}


/* Event Detail */

.event-detail h3 {
	margin: 0;
	line-height: 1.5em;
	margin-bottom: 1rem;
	}
.event-detail .event-info-header h2, .event-detail .event-info-header h3 {
	margin: 0;
	line-height: 1em;
	font-size: 2rem;
	letter-spacing: -0.02em;
	}

.event-detail .externalurl {
	transition: all .5s;
	}
.event-detail .externalurl:before {
	content: "→ ";
	}
.event-detail .externalurl:hover {
	padding-left: 1rem;
	}
.event-preview-image	{
	margin: 2rem 0;
	}
.event-preview-image img {
	border-radius: 10px;
	}
.event-detail .event-infos {
	margin-top: 2rem;
	}
.event-detail .event-infos .event-text {
	}
.event-detail .event-infos .event-schedule {
	}
.button {
	padding: .3em .5em;
	border-radius: 10px;
	text-decoration: none;
	}
.subtitle {
	font-style: italic;
	}

@media only screen and (min-width: 1100px) {
	.event-detail .event-infos {
		margin-top: 2rem;
		display: flex;
		gap: 2rem;
		}
	.event-detail .event-infos .event-text {
		width: calc(60% - 1rem);
		}
	.event-detail .event-infos .event-schedule {
		width: calc(40% - 1rem);
	}

	}


/* Contact */


section.contact {
	min-height: calc(100vh - 3rem);
	}