@font-face {
	font-family: "baskerville-italic";
	src: url("fonts/LibreBaskerville-Italic.ttf");
}

@font-face {
  font-family: "arbutus";
  src: url("fonts/ArbutusSlab-Regular.ttf");
}

#responsive {
	display: none;
}

#podcast_title {
	position: absolute;
	font-family: "arbutus";
	font-weight: bold;
	font-size: 20px;
	top: 1%;
	left: 0.5%;
	  font-size: 20px;
  background: url(image/background-title3.gif);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 500px 120px;

}

#big_title {
	padding-bottom: 2%;
	text-transform: uppercase;

}
#big_title_r {
	display: none;
}

.letter {
	font-size: 22px;
}

#sub_title {
font-family: baskerville-italic;
margin-left: 15%;
font-size: 17px;
}



/* #marquee_container {
background-image: url("image/biblio_radio.svg");
background-repeat: no-repeat;
background-size: 40%;
position: absolute;
	top: 0%;
	left: 2%;
	width: 120px;
	height: 100px;
	background-size: contain;
	transition: transform 330ms ease-in-out;
	z-index: 3000;
}

#marquee_container:hover {
transform: translate(0px, 30px);
transition: transform 330ms ease-in-out;

}


marquee#big_title {
		font-family: "hind-semibold";
	font-size: 14px;
	border: solid black 1.5px;
	overflow: hidden;
	width: 81%;
	margin-top: 25%;
	margin-left: 9%;
	padding-top: 3px;
	padding-bottom: 3px;
}

#marquer {
	text-transform: uppercase;
} 

*/



#custom_cursor {
	position: absolute;
	width: 50px;
	z-index: 2000;
	display: none;

}

.svg_pied path{
	stroke-width: 12px;
	stroke: blue;
	opacity: 0.7;
}

.svg_velo path{
	stroke-width: 12px;
	stroke: lightblue;
	opacity: 0.5;
}

.point path{
	stroke-width: 15px ;
	stroke: blue;
	cursor: pointer;
	fill: blue;
}


body {
	overflow: hidden;
background-image: url("image/background.png");
background-size:100% ;
}

#drag_container {
	width: 100%;
}

#carte_container {
    position: relative;
    width: 713px;
    transition: transform 0.5s ease-out;
    transform-origin: 0px, 0px;
    margin-top: -5%;
    margin-left: 11%;
    max-width: 100%;
    max-height: 100%;
 		cursor: grab;
}

svg#trajets {
	pointer-events: none;
}

svg#POINTS, svg#trajets{
	position: absolute;
	top: 0px; left: 0px;
	width: 100%
 }

#trajets > g{

	display: none;
}

#trajets > g.show{

	display: block;

}


#carte100 {
	width: 100%;
	opacity: 1;
	/*height: auto;*/

}


#zoom {
	font-family: "arial_bold";
	text-align: center;
	font-size: 150%;
	color: #f9423a;
	display: grid;
	grid-template-columns: 30px 30px;
	position: fixed;
	top: 92%;
	left: 3%;
	z-index: 1000;
	cursor: pointer;

}


#button_avant {
	grid-column: 1/2;
	grid-row: 1;
}

#button_arriere {
	grid-column: 2/2;
	grid-row: 1;
}

#button_avant:hover, #button_arriere:hover {
	color: pink;

}



/* IMG et COORDONNEES */


.hidden {
	display: none;
}

.show {
	display: block;
}



#point_window {
	font-size: 12.5px;
	position: fixed;
	z-index: 5000;
/*background: rgb(198,123,173);
background: linear-gradient(0deg, rgba(198,123,173,1) 0%, rgba(255,210,113,1) 100%);
*/

}

/*#point_window {
	width: 35px;
	height: 35px;
	height: 50%;
	background-color: blue;
	position: fixed;
}*/


#point_window > div{
  /*background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,1) 20%, rgba(255,255,255,0.5032213569021359) 70%, rgba(255,255,255,0) 100%); */
border: 10px;
background: white;
  box-shadow: 0 0 10px 10px white;
  width: calc(15px * 35);
  
}

#point_window > div.portrait{

  width: calc(15px * 25);
}


#point_window > div.square{

  width: calc(15px * 30);
}

#point_window > div img{

  width: 100%;
}

	

.cdt_txt {
	line-height: 15px;
	color: blue;
	font-family: "arbutus";
	width: 100%;
}

.cdt_description {
	padding-bottom: 4%;
	padding-left: 4%;
	padding-right: 4%;


}

.adress {
font-size: 11px;
	text-align: right;
	padding-right: 3%;
	padding-bottom: 3%;

}
/*
#amphi-img {
	width: 105%;
}

#louisleroi-img {
	width: 70%;
	margin-left: 15%;
}

*/



/*SOUND*/

figure {
	font-size: 17px;
	text-decoration: underline;
	padding-top: 15px;
	padding-left: 10px;
	text-align: center;
}

audio {
	padding-top: 15px;
	padding-bottom: 20px;
}




/* text */


#text-path {
	color: black;
	width: 31%;
	height: 100%;
	position: fixed;
	left: 69%;
	top: 0%;

	z-index: 1000;

	overflow-y: auto;
	overflow-x: hidden;

 background: rgb(252,100,140);
background: linear-gradient(90deg, rgba(252,100,140,0.6) 0%, rgba(255,147,0,0.6) 100%); 
}




#text {
	padding: 2%;
	padding-top: 35px;
	padding-left: 20px;
	line-height: 29px;
	color: blue;
}

.number {
	display: none;
}


.coordonnées {
	font-family: "arbutus";
	font-size: 17px;
	padding-top: 1px;
}

.partie {
	padding-bottom: 30px;
}
.title {
	cursor: pointer;
	line-height: 26.5px;
	font-size: 24px;
	font-family: "Arbutus";
	font-weight: bold;
}
.title:hover {

	text-decoration: underline;

}

.partie .content{

	display: none;
}

.content {
	position: relative;
	font-family: "Arbutus";
	font-size: 16px;
	line-height: 19px;
	padding-right: 7%;
	padding-top: 2%;
	padding-bottom: 2%;
}

.partie.open .content{
	display: block;
}

.emoji {
	font-size: 30px;
}

p.part_description {
	padding-bottom: 2%;
}


h4.footOrBike {
	padding-top: 1%;
	padding-bottom: 1%;
	font-size: 18px;
}


.uppercase {
	text-transform: uppercase;
}

li {

	padding-bottom: 1px;
}


.velo_txt {

}

.pied_txt {
	padding-bottom: 2%;
}


#round_pied, #round_pied circle {
	fill:  blue;
	width: 10px;
	margin-top: 0.5%;
	margin-left: 1%;
}


#round_velo, #round_velo circle {
	fill: lightblue;
	width: 10px;
	margin-left: 0.5%;
}




.img_part {
	padding-top: 7%;
	width: 60%;
	margin-left: 25%;
}

/* BIBLIO */

/* Biblio button */

#biblioI_img, #biblioII_img, #biblioIII_img {
	position: fixed;
	top: 93%;
	z-index: 3000;
	width: 7%;
	transition: transform 330ms ease-in-out;
	z-index: 3000;
	cursor: pointer;
}

#biblioI_img:hover, #biblioII_img:hover, #biblioIII_img:hover {
	transform: translate(0px, -50px);
	transition: transform 330ms ease-in-out;
}

#biblioI_img {
		left: 38%;
}

#biblioII_img {
	left: 47%;
}


#biblioIII_img {
	left: 56%;
}


/* BIBLIO I */

#biblioI, #biblioII, #biblioIII {
	
	overflow: auto;
	width: 32%;
	height: 70%;
	z-index: 3001;
	position: absolute;
	top: 12%;
	background-color: white;
	color: darkblue;
	background: white;
  box-shadow: 0 0 10px 10px white;
}

#biblioI {

left: 0.5%;

}

#biblioII {

left: 34%;
}

#biblioIII {
	left: 67.5%;
}



/* TEXTE BIBLIO */

.biblio_title_1 {
font-family: "arbutus";
font-size: 80px;
padding-top: 5%;
text-align: center;
}

.biblio_title_2 {
	font-family: "arbutus";
	padding-left: 1.5%;
	padding-top: 10px;
	line-height: 20px;
}

.letter_biblio {
	padding-right: 10px;
}

.biblio_txt {
	font-family: "arbutus";
	padding-top: 20px;
	padding-left: 10px;
	font-size: 14.5px;
	line-height: 17px;
	padding-right: 10px;
}

.biblio_element {
	padding-bottom: 20px;
	display: flex;
	gap: 0px 6px;
}

a {
	text-decoration: none;
}



@media (max-width: 450px) {

	body {
	overflow: inherit;
}


	#drag_container {
		display: none;
	}

/* TITLE */

#podcast_title {
	font-family: "arbutus";
	font-weight: bold;
	font-size: 50px;
  background: url(image/background-title3.gif);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 500px 120px;
  text-align: center;
  display: block;
  position: inherit;
	min-height: 65vh;
	letter-spacing: 0.1rem;
}

.letter {
	font-size: 55px;
}

#big_title {
	display: none;
}

#big_title_r {
	display: block;
		text-transform: uppercase;
			margin-top: 50%;
}

#sub_title {
font-family: baskerville-italic;
margin-left: 0%;
font-size: 17px;
}

#text-path br{
	display: none;
}
#text-path {
	width: 100%;
	height: 100%;
	position: inherit;
	display: block;

	z-index: 1000;

	overflow: inherit;
background-image: none;
}

#text {
	line-height: 29px;
	padding: 0%;
	padding-top: 10%;
}

.number {
	display: none;
}


.coordonnées {
	font-family: "arbutus";
	font-size: 13.5px;
	text-align: right;
	padding-right: 2%;
	padding-top: 0%;
}

.partie header {
	padding-top:5%;
}


.partie {
	padding-left: 3%;
	padding-bottom: 0%;

}
.title {
	cursor: pointer;
	line-height: 22px;
	font-size: 20px;
	font-family: "Arbutus";
	font-weight: bold;

}
.title:hover {

	text-decoration: inherit;

}
.content {
	position: relative;
	font-family: "Arbutus";
	font-size: 16px;
	line-height: 19px;
	padding-right: 7%;
	padding-top: 2%;
	padding-bottom: 2%;
}

.partie.open .content{

	display: block;
}

.emoji {
	font-size: 30px;
}

#biblioI_img, #biblioII_img, #biblioIII_img {
	display: none;
}

#zoom {
	display: none;
}


audio {
  margin: 0 0 0 5px;
  background: red
  
}

		@media (min-width: 550px) and (max-width: 900px) {

			body {
			display: none;
		}


			#drag_container {
				display: none;
			}

		/* TITLE */

		#podcast_title {
			font-family: "arbutus";
			font-weight: bold;
			font-size: 50px;
		  background: url(image/background-title3.gif);
		  -webkit-background-clip: text;
		  -webkit-text-fill-color: transparent;
		  background-size: 500px 120px;
		  text-align: center;
		  display: block;
		  position: inherit;
			min-height: 65vh;
			letter-spacing: 0.1rem;
		}

		.letter {
			font-size: 55px;
		}

		#big_title {
			display: none;
		}

		#big_title_r {
			display: block;
				text-transform: uppercase;
					margin-top: 50%;
		}

		#sub_title {
		font-family: baskerville-italic;
		margin-left: 0%;
		font-size: 17px;
		}

		#text-path br{
			display: none;
		}
		#text-path {
			width: 100%;
			height: 100%;
			position: inherit;
			display: block;

			z-index: 1000;

			overflow: inherit;
		background-image: none;
		}

		#text {
			line-height: 29px;
			padding: 0%;
			padding-top: 10%;
		}

		.number {
			display: none;
		}


		.coordonnées {
			font-family: "arbutus";
			font-size: 13.5px;
			text-align: right;
			padding-right: 2%;
			padding-top: 0%;
		}

		.partie header {
			padding-top:5%;
		}


		.partie {
			padding-left: 3%;
			padding-bottom: 0%;

		}
		.title {
			cursor: pointer;
			line-height: 22px;
			font-size: 20px;
			font-family: "Arbutus";
			font-weight: bold;

		}
		.title:hover {

			text-decoration: inherit;

		}
		.content {
			position: relative;
			font-family: "Arbutus";
			font-size: 16px;
			line-height: 19px;
			padding-right: 7%;
			padding-top: 2%;
			padding-bottom: 2%;
		}

		.partie.open .content{

			display: block;
		}

		.emoji {
			font-size: 30px;
		}

		#biblioI_img, #biblioII_img, #biblioIII_img {
			display: none;
		}

		#zoom {
			display: none;
		}


		audio {
		  margin: 0 0 0 5px;
		  background: red
		  
		}

	}
/* Large screen */

@media (min-width: 1800px) {


	#carte_container {
    width: 1000px;
    margin-left: 13%;
 		cursor: grab;
}

#text-path {
	width: 25%;
	left: 75%;
 background: rgb(252,100,140);
background: linear-gradient(90deg, rgba(252,100,140,0.5) 0%, rgba(255,147,0,0.5) 100%); 
}




.title {
	line-height: 30px;
	font-size: 28px;
}

#biblioI_img {
		left: 46%;
}

#biblioII_img {
	left: 55%;
}


#biblioIII_img {
	left: 64%;
}



}