body {
	background-color:#fff7e9;
	font-family:Gadugi;
}

@font-face {
  font-family: "Bellucci-Light";
  src:
    local("Bellucci-Light"),
    url("https://baladesmysteres.fr/css/fonts/fonnts.com-Bellucci_Light.woff") format("woff"),
    url("https://baladesmysteres.fr/css/fonts/fonnts.com-Bellucci_Light.otf") format("opentype") tech(color-COLRv1),
    url("http://127.0.0.1/baladesmysteres.fr/css/fonts/fonnts.com-Bellucci_Light.otf") format("opentype") tech(color-COLRv1);
}

@font-face {
  font-family: "Gadugi";
  src:
    local("Gadugi"),
    url("https://baladesmysteres.fr/css/fonts/gadugi.woff") format("woff"),
    url("https://baladesmysteres.fr/css/fonts/gadugi.ttf") format("opentype") tech(color-COLRv1),
    url("http://127.0.0.1/baladesmysteres.fr/css/fonts/gadugi.ttf") format("opentype") tech(color-COLRv1);
}

.Bellucci-Light {
	font-family:Bellucci-Light !important;
}

.clignottement {
   animation: keyframe_clignotte 15000ms;
}

@keyframes keyframe_clignotte {
   from{
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}

.image-balade {
	width:100%;
}

.image-header {
	width:100%;
}

.main-scroll {
  height: 100vh;
  position: relative;
  margin-top:-4em;
}
.d1 {
  position: absolute;
  background-image: url(../images/carte.png);
  background-size: 707px 756px;

  height: 20vh;
  width: 15vw;

  background-position: 0 50%;

  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.8);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  animation: dd1 30s 1, dd12 10s 1;
  animation-delay: 2s, 14s;
}
.d2 {
  position: absolute;
  background-image: url(../images/carte.png);
  background-size: 707px 756px;

  height: 40vh;
  width: 25vw;

  background-position: -10vw 50%;
  left: 10vw;

  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  animation: dd2 10s 2;
  animation-delay: 1s;
}
.d3 {
  position: absolute;
  background-image: url(../images/carte_opacite.png);
  background-size: 707px 756px;
  overflow: hidden;

  height: 62vh;
  width: 46vw;
  left: 18vw;
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.8);
  background-position: 0vw 50%;

  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}
.d4 {
  position: absolute;
  overflow: hidden;
  background-image: url(../images/carte.png);
  background-size: 707px 756px;

  height: 50vh;
  width: 19vw;
  left: 60vw;
  background-position: -70vw 50%;

  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  animation: dd4 10s 2;
  animation-delay: 3s;
}

@keyframes dd1 {
  0% {
  }
  50% {
    width: 95vw;
  }
}
@keyframes dd12 {
  0% {
  }
  50% {
    background-position: Calc(0vw - 40px) 50%;
  }
}
@keyframes dd2 {
  0% {
  }
  50% {
    background-position: Calc(-10vw - 40px) 50%;
  }
}
@keyframes dd3 {
  0% {
  }
  50% {
    background-position: Calc(-35vw - 40px) 50%;
  }
}
@keyframes dd4 {
  0% {
  }
  50% {
    background-position: Calc(-70vw - 40px) 50%;
  }
}

.image-tdp {
	width:55%;
}

.sous-titre {
	width:40%;
	margin-top:0.6em;
	background-color: rgba(255, 255, 255, .75);
	border-radius:10px;
	padding:0.5em;
	font-size:85%;
	font-family:Bellucci-Light;
}

.intro {
	background-color:#fff;
	font-size:85%;
}

.piece-a-retrouver {
	margin-top:1em;
	box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
	border-radius:8px;
	padding:0.5em;
	font-weight:400;
}

.zone-balade {
	margin-top:-5em;
	background: linear-gradient(318deg,rgba(255, 255, 255, 1) 0%, rgba(232, 165, 30, 1) 86%, rgba(97, 54, 14, 1) 100%);
	border-radius:12px;
	margin-left:2em;
	box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.8);
}

.zone-balades-a-venir {
	background: linear-gradient(162deg,rgba(255, 255, 255, 1) 0%, rgba(232, 165, 30, 1) 86%, rgba(97, 54, 14, 1) 100%);
	margin-right:2em;
	box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.8);
}

.statut-piece {
	padding:1em;
	background-color:#f99f03;
	color:#fff;
	border-radius:6px;
	text-align:center;
	font-weight:600;
	border:2px solid #fff;
}

.image-balade-a-venir {
	width:50%;
	box-shadow: rgba(229, 174, 7, 0.56) 0px 22px 70px 4px;
}

.blason {
	width:25%;
	filter: drop-shadow(0 0 1.25rem #000);
}

.photo-balade {
	width:100%;
}

.ville {
	background-color:#fff;
	border-radius:5px;
	padding-left:8px;
	padding-right:8px;
}

.aff-point {
	display:inline;
}

.aff-br {
	display:none;
}

.parent {
    position: relative;
    width: 100%;
    height: 100%;
}

.child1 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.child2 {
    z-index: 1;
	position: relative;
}

/* First we style the container element.  */
.calendar{
	padding-top:5px;
	float:center;
	width:100px;
	background:#ededef;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc)); 
	background: -moz-linear-gradient(top,  #ededef,  #ccc); 
	font:bold 30px/60px Arial Black, Arial, Helvetica, sans-serif;
	text-align:center;
	color:#000;
	text-shadow:#fff 0 1px 0;	
	border-radius:3px;	
	position:relative;
	box-shadow:0 2px 2px #888;
	}

/* Em element is also styled, it contains the month’s name. */
.calendar em{
	display:block;
	font:normal bold 11px/30px Arial, Helvetica, sans-serif;
	color:#fff;
	text-shadow:#00365a 0 -1px 0;	
	background:#04599a;
	background:-webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a)); 
	background:-moz-linear-gradient(top,  #04599a,  #00365a); 
	border-bottom-right-radius:3px;
	border-bottom-left-radius:3px;	
	border-top:1px solid #00365a;
	}

/* Now I am styling the pseudo elements. Container’s pseudo elements (:before and :after) are used to create thos circles, "holes in te paper". */
.calendar:before, .calendar:after{
	content:'';
	float:left;
	position:absolute;
	top:5px;	
	width:8px;
	height:8px;
	background:#111;
	z-index:1;
	border-radius:10px;
	box-shadow:0 1px 1px #fff;
	}
.calendar:before{left:11px;}	
.calendar:after{right:11px;}

/*…and em’s pseudo elements are used to create the rings: */
.calendar em:before, .calendar em:after{
	content:'';
	float:left;
	position:absolute;
	top:-5px;	
	width:4px;
	height:14px;
	background:#dadada;
	background:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa)); 
	background:-moz-linear-gradient(top,  #f1f1f1,  #aaa); 
	z-index:2;
	border-radius:2px;
	}
.calendar em:before{left:13px;}	
.calendar em:after{right:13px;}	

.navbar {
	background-color:#fff;
}

.mention {
	font-weight:normal;
	font-size:85%;
	line-height:18px;
}

.nav-link {
	cursor:pointer;
}

.message {
	 background-color:#f99f03;
	 color:black;
	 padding:0.5em;
	 border-radius:8px;
	 font-weight:600;
	 font-size:80%;
}

.remodal-close {
	right: 0;
	left:inherit;
}

.sous-titre-item {
	font-size:120%;
	font-weight:600;
	line-height:22px;
}

.titre-section {
	border:3px solid orange;
	border-radius:8px;
	padding-top:4px;
	padding-bottom:8px;
	padding-left:10px;
	padding-right:6px;
	background-color:#fef4e6;
	font-family:Bellucci-Light;
}

@media (max-width: 600px) {
	.main-scroll {
		margin-top:-13em;
	}

	.d1 {
		animation: dd1 15s 1, dd12 10s 1;
	}
	
	.d2 {
		  height: 30vh;
		  width: 25vw;
		  left: 5vw;
	}
	.d3 {
		  height: 40vh;
		  width: 75vw;
		  left: 10vw;
	}
	.d4 {
		  height: 35vh;
		  width: 80vw;
		  left: 15vw;
	}	
	
	.image-tdp {
		width:80%;
	}
	
	.navbar {
		background-color:rgba(0,0,0,0);
	}

	.navbar-nav {
		padding:1em;
	}

	.nav-item {
		margin-bottom:1.3em !important;
	}

	.nav-link {
		background-color:#fff6d1;
		display:inline;
		padding:0.5em 0.8em 0.5em 0.8em !important;
		border-radius:5px;
		border:2px solid #fff;
	}
	
	.sous-titre {
		width:72%;
		font-size:90%;
	}
	
	.intro {
		font-size:73%;
	}

	.zone-balade {
		margin-top:-12em;
		border-radius:12px;
		margin-left:0.5em;
		margin-right:0.5em;
	}
	
	.zone-balades-a-venir {
		border-radius:12px;
		margin-left:0.5em;
		margin-right:0.5em;		
	}
	
	.image-balade {
		width:45%;
	}
	
	.image-header {
		width:100%;
	}
	
	.statut-piece {
		margin-top:1em;
	}

	.image-balade-a-venir {
		width:80%;
	}
	
	.aff-point {
		display:none;
	}

	.aff-br {
		display:inline;
	}
	
	.blason {
		width:20%;
		margin-bottom:1.5em;
	}

}