@font-face {
  font-family: Aldo;
  src: url(../fonts/FontsFree-Net-Aldo-Bold.ttf);
}

@font-face {
  font-family: TheSans;
  src: url(../fonts/TheSans_B2_500_.woff);
  font-weight: normal;
}

@font-face {
  font-family: TheSans;
  src: url(../fonts/TheSans_B2_700_.woff);
  font-weight: bold;
}



body {
  margin: 0;
  padding: 20px 50px 0 50px;
  display: grid;
  grid-template-columns: 20px repeat(6,1fr 20px);
}


:root {
  --colorviolet:#400060;
  --colororange:#FF6600;
}

a,
a:hover,
a:visited,
a:active
{
text-decoration: none;
color: var(--colorviolet)
}

a:active{
color: var(--colororange);
}

ul, li{
	text-decoration: none;
	list-style: inside;
	list-style-type: decimal;
	font-family: TheSans;
	font-weight: normal;
	font-size: 18px;
	color: var(--colorviolet);
	margin: 0;
	padding: 0;
}

li a:hover{
	text-decoration: underline;
}

ul{
	margin-bottom: 30px;
}

h2{
	font-family: TheSans;
	font-weight: bold;
	font-size: 28px;
	color: var(--colorviolet);
	margin: 0;
	padding: 0;
}

 /* Hide scrollbar for Chrome, Safari and Opera */
#home-header::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE and Edge */
#home-header {
  -ms-overflow-style: none;
} 

#home-header h1{
	font-family: Aldo;
	font-weight: normal;
	font-size: 6vw;
	color: var(--colorviolet);
	margin: 0;
	padding: 0;
	line-height:6.1vw
}
#home-header h1:nth-child(2){
	font-size: 2vw;
	line-height: 2vw;
	margin-bottom: 50px;
}


#home-header p{
	margin-bottom: 50px;
	font-weight: bold;
	cursor: default;
}

.mobile-advice{
	display: none;
}

p{
	font-family: TheSans;
	font-weight: normal;
	font-size: 18px;
	color: var(--colorviolet);
	margin: 0;
	padding: 0;
}

.legend{
	font-size: 12px;
	color: var(--colororange);
	margin-top: 5px;
}


#megalithe-orange{
	position: fixed;
	bottom: 0;
	width: calc(100vw / 6 *1.75);
	z-index: -10;
}

#home-header{
	grid-column: 1/span 4;
}

#button-credits{
	position: fixed;
	z-index: 99;
	right: 50px;
	top: 20px;
	width: 50px;
}

#logo-home{
	max-width: 150px;
position: fixed;
z-index: 99;
right: 150px;
top: 20px;
}

#button-credits img{
	display: block;
}


.menu-plan-home{
	padding-top: 40px;
	margin: 0;
	text-align: center;
	display: flex;
	justify-content: center;
 	align-items: center;
 	height: 95vh;
 	position: fixed;
	right: 50px;
	width: calc(55vw - 50px);
}

.menu-plan{
	padding: 0;
	margin: 0;
	text-align: center;
	display: flex;
	justify-content: center;
 	align-items: center;
 	height: 95vh;
 	position: fixed;
	right: 50px;
	width: calc(50vw - 50px);
}


.menu-plan-home svg,
.menu-plan svg{
	width: 100%;
	max-width: 45vw;
}

.zone-title{
	position: absolute;
}

.zone-title h2{
	color: var(--colororange);
	font-weight: normal;
}

/* ----------------------------SVG MENU----------------------------*/
#INDONESIE:hover,
#SUISSE:hover,
#LIBAN:hover,
#BRETAGNE:hover,
#MONDE:hover{
	cursor: pointer;
}

.cls-3{
	display: none;
	fill: var(--colororange);
	font-size: 20px;
}

.cls-99{
	fill: var(--colororange);
	font-size: 20px;
}

.content-right{
	margin-top: 100px;
	grid-column: 6/span 8;
}
.credits-zone{
	width: 100%;
	column-count: 2;
	margin-bottom: 25px;
	grid-column-gap: 30px;
}

.credits-zone h2{
	margin-bottom: 25px;
}

.credits-zone p{
	font-size: 15px;
	-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
    page-break-inside: avoid; /* Firefox */
	break-inside: avoid;
}

.credit span{
	font-weight: bold;
}

.remerciements{
	margin-bottom: 25px;
	width: 100%;
}

.logos-list{
	width: 100%;
}

.logos-list img{
	max-width: 125px;
	max-height: 125px;
	display: inline-flex;
	margin: 0 40px 40px 0;
	mix-blend-mode: multiply;
}

@media screen and (max-width: 1000px){
	.menu-plan{
		width:calc(45vw - 50px);
	}
}