:root{
	--colorLoader: #F99CAF;
	--colorButton: rgba(255, 255, 255, 0.7);
	--colorButtonHover: white;
	--topMenuHeight: 5vh;
	--avatarSize: 8.2vh;
	--botMenuHeight: calc(var(--avatarSize) * (var(--numOfRows) + 0.15));
	--mainMargin:1vmin;
}

html, body {
	touch-action:none;
	user-select: none;
	margin: 0; 
	padding: 0;
	width:100vw;
	height: 100vh; 
	position: relative;
	overflow-y: hidden;
	overflow-x: hidden;	
	background-color: black;
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	font-size: 3vmin;
	color: var(--colorPageText);
}

.test{
	width:var(--avatarSize);
	display:none;
}

.container{
	width: calc(100 * var(--vw) - 2 * var(--mainMargin));
	height:calc(100 * var(--vh) - 2 * var(--mainMargin));
	overflow:hidden;
	border-radius: var(--mainMargin);
	margin: var(--mainMargin);
	display: flex;
	flex-direction: column;	
	/*border: 1px solid rgba(255,255,255, 0.4);*/
}

#loader{
	width:100%;
	height:100%;
	background-color: var(--colorLoader);
	position:absolute;
	z-index:999;	
	display:flex;
	justify-content: center;
	align-items:center;
	left:0;
	top:0;
}

#loader.fadeOut{
	top:-100%;
	transition:1s;
}

#titleDiv{
	padding: 2vmin;
	text-align:center;
	color: white;
}

#logoLoader{
	max-width: 30%;
	height: auto;
}

#topMenu{
	width:calc(100 * var(--vw) - 2 * var(--mainMargin));
	height: var(--topMenuHeight);
	background-color: var(--colorTopMenu);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	/*border-bottom: 1px solid rgba(255,255,255, 0.4);*/
}

#logoDiv{
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#logo{
	height: 80%;
	width:auto;
	margin-right: 1vmin;
}

.vertical {
  height: calc(100% - 2 * var(--mainMargin) - var(--topMenuHeight) - var(--botMenuHeight));
  min-width: 25%;
  position: fixed;
  z-index: 1;
  top: calc(var(--topMenuHeight) + var(--mainMargin));
  left: -50%;
  background-color: #e8e8e8;
  transition: left 0.4s ease;  
  border-radius: 0 var(--mainMargin) var(--mainMargin) 0;
}

#socialMedias{
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
}

.socialLogo{
	width:1em;
	fill:#818181;
}

.socialLogo:hover{
	width:1em;
	fill:#111;
}

.vertical a {
  padding: 1.5vmin;
  text-decoration: none;
  font-size: 115%;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.vertical a:hover {
  color: #111;
}

.vertical ul {
  list-style-type: none;
  padding: 0;
  margin: 2%;
}


.vertical.active {
  left: var(--mainMargin);
}


.vertical .close {
  position: absolute;
  top: 0;
  right: 0%;
  font-size: 200%;
}

#openBtn{
	width: calc(var(--topMenuHeight) * 0.8);
	height: calc(var(--topMenuHeight) * 0.8);
	margin-left:1vmin;
}


.burger-icon span {
  display: block;
  width: 100%;
  height: 12%;
  background-color: var(--colorButton);
  margin: 15% 0;
  transition: all 0.2s;
}

.burger-icon:hover span{
	background-color: var(--colorButtonHover);
}




#mainZone{
	width:100%;
	background-color: var(--colorMapSea);
	height: calc(100% - var(--topMenuHeight) - var(--botMenuHeight));
	display: flex;
	flex-direction: column;
	position: relative;
}

#mapZone{
	background-color: var(--colorMapSea);
	height:100%;
	width:100%;
	transition: width 0.3s ease-out;
}

#mapZone.minimized{
	width:50%;
}

#closeBurgerDiv{
	position: absolute;	
	top: calc(var(--avatarSize) * 0.2 + 5%);;
	left: calc(var(--avatarSize) * 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	width:var(--avatarSize);
	height:var(--avatarSize);
}

.button{
	width: calc(var(--avatarSize) * 0.7);
	fill: rgba(255, 255, 255, 0);  
	transition: all 0.15s;
}

.embedyt{
	border-radius: 2vmin;
	width: 75%;
	min-height:40vh;
}

.button.visible{
	fill: var(--colorButton);
}

.button.visible:hover{
	width: calc(var(--avatarSize) * 0.85);
	fill: var(--colorButtonHover);
	cursor: pointer;
}

#zoomInButtonDiv{
	position: absolute;	
	top: calc(var(--avatarSize) * 0.2 + 5%);
	right: calc(2 * var(--avatarSize) * 0.2 + var(--avatarSize));
	width:var(--avatarSize);
	height:var(--avatarSize);
	display: flex;
	align-items: center;
	justify-content: center;
}



#zoomOutButtonDiv{
	position: absolute;	
	top: calc(var(--avatarSize) * 0.2 + 5%);
	right: calc(var(--avatarSize) * 0.2);
	width:var(--avatarSize);
	height:var(--avatarSize);
	display: flex;
	align-items: center;
	justify-content: center;
}



#countryName{
	background-color: var(--colorTopMenu);
	color: white;
	padding-bottom: 1vmin;
	width: 100%;
	height: 5%;  
	font-size: 75%;
	font-style: italic;
	font-weight: 400;
	display: flex;
	align-items: center;
	justify-content: center;
	/*border-bottom: 1px solid rgba(255,255,255, 0.4);*/
}

#mapImage{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 95%;
}

#svgMap{  
	width: 100%;
	max-height: 100%; 
}

.land{
	fill: var(--colorLand);
	stroke: gray;
	stroke-width: 0.2px;
	transition: all 0.2s ease-out;
}
.land.over{
	stroke-width: 0.5px;
}


/*.land.student.over{
	fill: var(--colorLandWithStudentHover);;
	cursor: pointer;
}*/
.land.unselectable{
	fill: var(--colorLand);
	stroke-width: 0;
}
.land.student.selected{
	/*fill: var(--colorSelectedLand);*/
	stroke-width: 0.1px;
}


#avatarsOnCountry{
	
	max-width: 45%;
	max-height:70%;
	position: absolute;
	display: flex;
	flex-direction:row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: 0;
	transition: all 0.5s 0.2s;
}

#avatarsOnCountry.visible{
	opacity:1;
}


.countryAvatarZone{
	pointer-events:none;
	flex-basis: calc(100% / var(--numOfAvatarsPerRowLand));
	cursor: pointer;
	display: flex; 
	flex-direction:column;
	
	align-items: center;
	justify-content: center;
	width: calc(1.4 * var(--avatarSize));  
	height: calc(1.4 * var(--avatarSize));			
	opacity: 0;
	transition: 0.3s opacity 0.5s;
	
}

.countryAvatarZone.visible{
	pointer-events:auto;
	opacity: 1;
}

.countryAvatarZone img{  
	width: 0;
	border:0 solid transparent;
	transition: 0.3s all;
}

.countryAvatarZone.visible img{  
	width: calc(var(--avatarSize) * 0.8 * 1.4);	
}

.countryAvatarZone img.over{
	width: calc(var(--avatarSize) * 0.95 * 1.4);
}

#sidePanel{
	height:100%;
	width:50%;
	position:absolute;
	left:100%;
	transition: all 0.3s ease-out;
	top:0%;
	/*border-left: 1px solid rgba(255,255,255, 0.4);*/
}

#sidePanel.visible{
	top:0%;
	left:50%;
}

.page{
	background-color: var(--colorPageBack);
	height:95%;
	width:90%;
	overflow-y:auto;
	overflow-x:hidden;
	scrollbar-color: var(--colorMapSea) var(--colorPageBack);
	scrollbar-width: thin;
	display: none;
	padding: 0 5%;
	font-size:75%;
}

.page p{
	text-align: justify;
}

.page p span.bold{
	font-weight:500;
}

.title{
	font-size:130%;
	font-weight:700;
	color: var(--colorPageTitle);
}

.center{
	display:block;
	text-align: center;
}

/*#studentPage{
	flex-direction:column;
	justify-content:space-between;	
}
*/
#studentPage.visible{
	display:block;
}

#ticketsPage{	
	text-align:center;
}

#ticketsPage.visible{
	display:block;
}

h3{
	color:var(--colorPageSmallText);
}

.photoConcert{	
	padding-top:2vmin;
	display:flex;
	justify-content:center;
	width:100%;
}

.photoConcert img{
	width:75%;	
	border-radius: 2vmin;
}

.concertDiv{
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	padding-left: 20%;
	padding-bottom: 3vmin;
	width: 70%;
}

.day{
	font-weight:700;
	font-size:200%;
}

.date{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}

.location{
	font-weight:500;
	font-size:120%;
	
}

.infosConcert{
	padding-left:3vmin;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:flex-start;
	text-align:left;	
}

.ticketLink {
	color:#EF3C23;
}

.ticketLink a{
	color:#EF3C23;
}

/* GROUPE A et B (css), c'est cet id qui vous concerne, vous aurez certainement à rajouter d'autres ids ou class pour gérer l'affichage des éléments de votre page







*/

#projectPage{
	display:none;
}

#projectPage.visible{
	display:block;
}



/* GROUPE C et D (css), c'est cet id qui vous concerne, vous aurez certainement à rajouter d'autres ids ou class pour gérer l'affichage des éléments de votre page







*/
#partnersPage{
	display:none;
}

#partnersPage.visible{
	display:block;
}




.ethno{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items: center
}

.ethno img{
	max-width:20%;
}

.link{
	color:var(--colorPageLink);
	font-size:100%;
}

#linkDiv.link{
	text-align:center;
}

.partner{
	display:flex;
	justify-content:space-around;
}

.logoPartnerDiv{
	width:40%;
	display: flex;
	justify-content: flex-end;
	align-items:center;
}

.logoPartnerDiv img{
	max-height: var(--avatarSize);
	max-width: calc(var(--avatarSize) * 2);	
}

.textPartnerDiv{
	width:55%;
}

.textPartnerDiv p{
	text-align:left;
}

/* GROUPE E et F (css), c'est cet id qui vous concerne, vous aurez certainement à rajouter d'autres ids ou class pour gérer l'affichage des éléments de votre page







*/
#creditsPage{
	text-align: center;
}

#creditsPage.visible{
	display:block;
}

#creditsPage img{
	max-height: var(--avatarSize);
	max-width: calc(var(--avatarSize) * 2.5);
}

#studentDiv{
	width:100%;
	height:100%;
}

#backZone{
	height:5%;
	width:100%;
	background-color:var(--colorBackZone);
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	color:var(--colorButton);
	font-size:80%;
	transition: all 0.2s ease-out;
}

#backZone:hover{
	color:var(--colorButtonHover);
	cursor: pointer;
}	

#morceauPage{
	display:none;
}

.trad{
	text-align:right;
	font-size: 85%;
	color:var(--colorPageSmallText);
	padding-left: var(--avatarSize);
}

#morceauPage.visible{
	display:block;
}

.partitionZone{
	padding-top:2vmin;
	display:flex;
	justify-content:center;
	width:100%;
}

#partition{
	width:75%;
	border-radius: 2vmin;
}

/*GROUPE G ET H : >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>


le css vous concernant est à partir de là jusqu'au prochain commentaire




*/

#identityDiv{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	height: 22%;
	width:98%;
	margin:1%;
	background-color: var(--colorIdentityCard);
	color: var(--colorIdentityCardText);
	border-radius:2vh;
	line-height: 1.1em;
}

#photoImg{
	max-height: 90%;
	animation: rotate 0.3s ease-in-out;	
}

#photoImg::before {
	
	border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%;
	background-color: red;

}

@keyframes rotate {
  from {
    transform: rotate(-30deg);
  }
  to {
    transform: rotate(0deg);
  }
}

#identityInfosDiv{
	height:100%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: start;
	padding-left: 1vmin;
	width:75%;
	font-size: 120%;	
}

#countryDiv{
	height:20%;
	padding-bottom:1vmin;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items:center;
}

#country{
	margin-left:1vh;
	font-size:85%;
	font-weight:300;
}

#flagImg{
	height: 100%;
	border-radius:10%;
}

#nameDiv{
	/*height:30%;*/
	font-weight: bold;
	font-size:115%;
}

#mainInstrumentDiv{
	font-style: italic;
	font-size:85%;
}

#otherInstrumentsDiv{
	width:100%;
	font-size:70%;
	overflow: hidden;
    white-space: nowrap;
	padding-bottom: 1vmin;
}



.textDescription{
	height: fit-content;
	color: var(--colorDescriptionText);	
	font-size: 90%;	
	font-weight: 300;
	text-align:center;
}




#botMenu{
	background-color: var(--colorBotMenu);
	width: 100%;
	height: var(--botMenuHeight);
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-around;
	z-index:99;
	/*border-top: 1px solid rgba(255,255,255, 0.4);*/
}


.avatarZone{
	cursor: pointer;
	display: flex; 
	align-items: center;
	justify-content: center;
	width: calc(var(--avatarSize) * 0.95);  
	height: var(--avatarSize);	
	flex-basis:calc(100% / var(--numOfAvatarsPerRow));
}

.avatarZone img{  
	width: calc(var(--avatarSize) * 0.8);
	transition: 0.2s all;
}

.avatarZone img.over{
	width: calc(var(--avatarSize) * 0.9);	
}





@media only screen and (orientation: portrait) {
	
	:root{
		--avatarSize: calc(4vh + 4vw);
		--topMenuHeight: 6vh;
		
	}
	
	html, body {
		font-size: 3.5vmin;
	}
	
	#botMenu{
		height: var(--botMenuHeight);
	}
	
	#mainZone{
		height: calc(100% - var(--topMenuHeight) - var(--botMenuHeight));
		flex-direction: row;
	}
	
	#mapZone{
		height:100%;
		transition: height 0.3s ease-out;
	}

	#mapZone.minimized{
		width:100%;
		height:40%;
	}
	

	#sidePanel{
		height:60%;
		width:100%;
		position:absolute;
		top:100%;
		left:0%;
	}

	#sidePanel.visible{
		left:0%;
		top:40%;
	}	
	#avatarsOnCountry{
		max-height:45%;
		max-width: 70%;
	}
	
	#zoomInButtonDiv{
		top: calc(var(--avatarSize) * 0.2 + 7%);
	}



	#zoomOutButtonDiv{
		top: calc(var(--avatarSize) * 0.2 + 7%);
	}



	#countryName{
		height: 7%;  
	}

	#mapImage{
		height: 93%;
	}
	
	.page{
		height:93%;
		font-size:90%;
	}
	
	#backZone{
		height:7%;
	}
	
	#closeBurgerDiv{
		top: calc(var(--avatarSize) * 0.2 + 7%);;
	}
	
	#identityDiv{
		height: 40%;
	}
}