@font-face {
	font-family: 'steelfish';
	src: url('../fonts/steelfish/steelfish_rg.ttf') format('truetype');
	src: url('../fonts/steelfish/steelfish_rg-webfont.woff') format('woff');
	src: url('../fonts/steelfish/steelfish_rg-webfont.woff2') format('woff2');
}
*, ::before, ::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	font-family: 'steelfish';
}
h1{
	font-size: 4vw;
	line-height: 4vw;
	padding-left: 30px;

}
h2{
	font-size: 3vw;
	text-transform: uppercase;
	margin-bottom: 10px;
	margin-top: 0;
}
h3{
	font-size: 2.2vw;
}
h4{
	font-size: 2vw;
	padding-left: 40px;
}
h5{
	font-size: 2vw;
	margin: 0;
}
a{
	text-decoration: none;
	color: white;
}
a:hover{
	color: #00ff00;
}
/* colors */
.row-white {
	background-color: white;
	color: black;
}
a.entrer:hover {
	color: #ff0099;
}
.row-black {
	background-color: black;
	color: white;
}
.green {
	color: #00ff00;
}
.pink {
	color: #ff0099;
}

/* fleches */
.fleche {
	width: 72px;
    /* padding-left: 10px; */
}
.fleche-horizontale {
	transform: rotate(90deg);
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 80px 0;
}

/* heures */
/* .heure {
	font-size: 4vw;
} */

/* images */
.logo,
.vignette-salle,
.image-doc {
	width: 100%;
}

/* layout */
.grid-container {
	display: grid;
	height: auto;
	width: 100%;
}
.container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px 0;
}
.column {
	flex-direction: column;
}
.entrer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	font-size: 6vw;
	align-items: center;
    text-align: center;
	margin: 20px 0;
}
#entrez .entrer {
	display: flex;
	flex-direction: column;
}
.row-1 {
	grid-template-columns: 3fr 4fr 3fr;
}
.row-2 {
	grid-template-columns: 3fr 1fr 5fr 1fr 3fr;
	padding: 10px 0;
}
.row-2 header {
	grid-column: span 13;
	text-align: center;
}

/* sections */
#salles ul {
	margin:0;
	padding: 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	list-style: none;
}
#salles .info {
	text-align: center;
	font-size: 1.5vw;
}
#salles li {
	list-style: none;
	margin: 10px;
}
#salles li a {
	display: block;
	border: 2px solid black;
}
#salles li a:hover {
	border: 2px solid white;
}
article h3 {
	text-align: center;
}
article dt {
	font-weight: normal;
	font-size: 2vw;
	/*text-indent: 1em;*/
	text-align: center;
}
#entrez article dt {
	text-align: center;
}
/* #description dt:first-letter {
	color: #00ff00;
} */
#notes,
#doc{
	font-size: 2vw;
}

/* Style the tab */
.tab {
	overflow: hidden;
	background-color: black;
}
.tab button {
	background-color: inherit;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
	color: #00ff00;
	font-size: 2em;
	font-family: 'steelfish';
}
.tab button:hover,
.tab button.active {
	background-color: white;
	color: #ff0099; 
}
.tabcontent {
	display: none;
	padding: 6px 12px;
	border-top: none;
	animation: fadeEffect 1s;
}
/* Go from zero to full opacity */
@keyframes fadeEffect {
	from {opacity: 0;}
	to {opacity: 1;}
}

@media only screen and (max-width: 768px)
{
	.row-1,
	.row-2 {
		grid-template-columns: 1fr;
	}
	.row-2 header {
		grid-column: 1;
		text-align: center;
	}
	.fleche {
		transform: rotate(90deg);
		padding:0;
		margin:0;
		padding-bottom: 2vw;
		font-size: 15vw;
	}
	h1 {
		font-size: 16vw;
		line-height: 16vw;
	}
	h3,
	h2 {
		font-size: 8vw;
		line-height: 8vw;
	}
	article {
		padding: 1vw;
		width: 90%;
	}
	#notes,
	#doc,
	article dt {
		font-size: 6vw;
		padding: 1vw 0;
	}
	#salles li {
		width: 90%;
	}
	#salles .info {
		font-size: 4vw;
	}
	#entrez dt {
		text-indent: 0;
	}
}