@import url('https://fonts.googleapis.com/css?family=Muli');
@import url('https://fonts.googleapis.com/css?family=Signika');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

.track-slot {
	display: none;
}

.session {
	margin-bottom: 1em;
	box-shadow: 2px 2px #EEE;
	color: #fff;
}

	.session a {
		color: #fff;
	}

@supports ( display:grid ) {
	/*
		The display in grid shall only be done on tablets or computers
	*/
	@media screen and (min-width: 600px) {
		.schedule {
			display: grid;
			grid-gap: 0.1em;
			overflow-y: scroll;
		}

		h2.time-slot {
			line-height: 0;
		}

		.track-slot,
		.time-slot {
			font-size: 0.9em;
		}

		.session {
			font-size: 0.85em;
		}

		/* a background for the sticky tracks */
		.schedule::after {
			display: block;
			content: '';
			position: sticky;
			top: 0;
			grid-column: track-1 / -1;
			grid-row: tracks;
			background-color: rgba(255, 255, 255, .9);
		}

		.track-slot {
			display: block;
			padding: 50px 5px 5px;
			position: sticky;
			top: 0; /* otherwise seeing a gap above in at least Firefox. */
		}

		.session {
			margin: 0;
		}
	}

	@media screen and (min-width: 720px) {
		.schedule {
			grid-gap: 0.5em;
		}

		.track-slot {
			font-size: 1.0em;
		}

		.time-slot {
			font-size: 1.0em;
			line-height: 0px;
		}

		.session {
			font-size: 0.90em;
		}
	}

	@media screen and (min-width: 992px) {
		.schedule {
			grid-gap: 0.75em;
		}

		.track-slot {
			font-size: 1.3em;
		}

		.time-slot {
			font-size: 1.3em;
			line-height: 0px;
		}

		.session {
			font-size: 0.95em;
		}
	}
}

/*************************
 * VISUAL STYLES
 *************************/

hr {
	margin: 40px 0;
}

.session {
	padding: .5em;
	border-radius: 4px;
	position: relative;
}

.title {
	margin: 0;
	font-size: 1em;
}

h2.title {
	text-align: center;
	font-family: Helvetica, sans-serif;
	font-style: italic;
	font-size: 1.25em;
	margin: 4px;
}

h3.title {
	font-size: 1.0em;
	margin: 3px 0px;
}

.track-slot,
.time-slot {
	font-weight: bold;
	text-align: center;
}

.time-slot {
	margin-top: 20px;
	margin-bottom: 10px;
}

span {
	display: block;
}

.track-many {
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(#ddd, #aaa);
	color: #000;
}

.title {
	padding-right: 8px;
}

.time {
	font-size: 0.85em;
}

.track {
	color: #e3e3e3;
}

.authors {
	display: flex;
	flex-direction: column;
}

	.authors .author {
	}

		.authors .author a {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-family: 'Signika', sans-serif;
		}

			.authors .author a img {
				width: 70px;
				height: 70px;
				border-radius: 50%;
				border: 2px solid #999;
				object-fit: cover;
				margin-right: 15px;
			}

.company {
	font-size: 0.85em;
	margin-left: 20px;
}

.sessionLabel {
	display: flex;
	align-self: flex-end;
}

	.sessionLabel p:hover {
		box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
	}

.english {
	display: flex;
	align-self: flex-end;
	position: absolute;
	bottom: 0;
	right: 0;
	background-image: url(./../../Assets/flag-english.png);
	background-size: cover;
	width: 50px;
	height: 30px;
	clip-path: polygon(50% 50%, 100% 0%, 100% 100%, 0% 100%);
	transition: 0.2s ease-in-out;
}

	.english:hover {
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	}

.dutch {
	display: flex;
	align-self: flex-end;
	overflow: hidden;
	position: absolute;
	bottom: 0;
	right: 0;
	background-image: url(./../../Assets/flag-dutch.png);
	background-size: cover;
	width: 50px;
	height: 30px;
	/*border-top-left-radius: 100%;*/
	clip-path: polygon(50% 50%, 100% 0%, 100% 100%, 0% 100%);
	transition: 0.2s ease-in-out;
}

	.dutch:hover {
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	}

/******* styles v2 pour la carte de la session ! *******/
/******* colors ********/
.bg-whitesmoke {
	background-color: whitesmoke;
}

.bg-darkred {
	background-color: darkred;
}

.bg-lightskyblue {
	background-color: lightskyblue;
}

.text-black {
	color: black;
}

/******** font ********/
.family-helvetica {
	font-family: Helvetica, sans-serif;
}

.family-signika {
	font-family: 'Signika', sans-serif;
}

.fs-2 {
	font-size: 1.75rem;
}

.fs-3 {
	font-size: 1.10rem;
}

.fs-4 {
	font-size: .9rem;
}

.font-bold {
	font-weight: bold;
}

/******** flex ********/
.flex {
	display: flex;
}

.flex-1 {
	flex: 1;
}

.flex-column {
	flex-direction: column;
}

.justify-end {
	justify-content: end;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.align-items-center {
	align-items: center;
}

.align-self-end {
	align-items: flex-end;
}

.gap-3 {
	gap: 3px;
}

.flex-wrap {
	flex-wrap: wrap;
}

/******** margin/padding *********/
.p-4 {
	padding: 4px;
}

.py-1 {
	padding-top: 1px;
	padding-bottom: 1px;
}

.px-3 {
	padding-right: 3px;
	padding-left: 3px;
}

.py-3 {
	padding-top: 3px;
	padding-bottom: 3px;
}

.pr-2 {
	padding-right: .5rem;
}

.m-0 {
	margin: 0 !important;
}

.mx-3 {
	margin-right: 3px;
	margin-left: 3px;
}

.my-10 {
	margin-top: 10px;
	margin-bottom: 10px;
}

/******** border ********/
.rounded-5 {
	border-radius: 5px;
}

.rounded-10 {
	border-radius: 10px;
}