html{
      min-height:500px;
      scroll-behavior: smooth;
}

body {
	background-color: lightgrey;
}

h2{
    font-family: sans-serif;
    top: -0.50em;
    position: relative;
}

a{
	font-size:small;
	font-family:sans-serif;
  text-decoration:none;
  color: black;
}

#nonliens {
  cursor: default;
}

a:hover{
	background-color:lightgrey;
}

p{
    font-family: sans-serif;
    font-size: small;
}

.ColonneGauche {
    animation: entréeGauche 3s;
    -webkit-animation: entréeGauche 3s; /* Chrome, Safari, Opera */
	  opacity:0.8;
    font-family: sans-serif;
    background-color: #ffffff;
    border:solid;
    border-width: 2px;
    padding:0.5em;
    border-color:black;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:10px;
    border-top-right-radius:15px;
    position: fixed;
    height: 80%;
    width: 11em;
    z-index:10;
    box-shadow: -12px 12px 15px -5px black;
}

li {
    font-family: sans-serif;
    font-size: x-small;
}

#menu{
    display:inline;
}

#flag {
	opacity: 0.5;
	height: 15px;
}

#Photos {
    opacity: 0;
    display:none;
}

#zonePhotos:hover #Photos{
    display: block;
    animation: deplierMenus 5s;
    animation-fill-mode:forwards;
    -webkit-animation: deplierMenus 5s; /* Chrome, Safari, Opera */
	-webkit-animation-fill-mode: forwards;
    border-left:solid;
    border-width: 1px;
}

#Misc {
    opacity: 0;
    display:none;
}

#zoneMisc:hover #Misc{
    display: block;
    animation: deplierMenus 3s;
    animation-fill-mode:forwards;
    -webkit-animation: deplierMenus 3s; /* Chrome, Safari, Opera */
	-webkit-animation-fill-mode: forwards;
    border-left:solid;
    border-width: 1px;
    border-color: grey;
}

#Oz {
   opacity: 0;
   display:none;
}

#zoneOz:hover #Oz{
    display: block;
    animation: deplierMenus 2s;
    animation-fill-mode:forwards;
    -webkit-animation: deplierMenus 2s; /* Chrome, Safari, Opera */
	-webkit-animation-fill-mode: forwards;
    border-left:solid;
    border-width: 1px;
    border-color: grey;
}

#Melb {
    opacity: 0;
    display:none;
}

#zoneMelb:hover #Melb{
    display: block;
    animation: deplierMenus 3s;
    animation-fill-mode:forwards;
    -webkit-animation: deplierMenus 3s; /* Chrome, Safari, Opera */
	-webkit-animation-fill-mode: forwards;
    border-left: solid;
    border-width: 1px;
    border-color: lightslategrey;
}

#middledown{
	position: absolute;
	top: 85%;
}

#down{
    position: absolute;
    top: 90%;
}

.VisuelDroite {
    position:inherit;
    padding:1em;
    height: 90%;
    margin-left: 13em;
    display:inline-block;
    white-space:nowrap;
    /*pour firefox*/
    width:-moz-available;
    /*animation aDroite;
    animation aGauche;*/
}

.VisuelDroite img:hover{
    transform: scale(1.4, 1.4) /*skew(1deg,0deg)*/;
	-webkit-transform: scale(1.4, 1.4);
    transition: all 0.50s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
    transition-delay: 1s;
    z-index: 2;
}

.VisuelDroite > div > img, picture > img {
    height:75%;
    position: relative;
    z-index:0;
    padding:1%;
	-webkit-padding-after: 0.05%;
	-webkit-padding-before: 0.05%;
	-webkit-padding-start: 0.05%;
	-webkit-padding-end: 0.05%;
    background-color: white;
    border: solid;
    border-width: 1px;
    border-color: grey;
    box-shadow: 12px 12px 15px -5px black;
}

.VisuelDroite h2{
    text-shadow: 5px 5px 4px grey;
}

.note{
	font-family: sans-serif;
	border : solid;
	border-color: grey;
	border-width: 1px;
	white-space: pre-line;
	padding:5px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
  	border-bottom-left-radius:10px;
  	border-bottom-right-radius:10px;
	background-color:white;
}

.title{
	font-style:italic;
}

.BasPage{
	border-top-left-radius:10px;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
  border-color: mediumspringgreen;
  border-style:ridge;
  padding: 10px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 30px;
	background-color:white;
	font-family:sans-serif;
	position:fixed;
	top:98%;
  transition:ease-in-out;
  transition-duration: 1s;
}

@keyframes entréeGauche {
    from {left:-13em;}
    to {left: 0.5em;}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes entréeGauche {
    from {left:-13em;}
    to {left: 0.5em;}
}

@keyframes deplierMenus {
    from {opacity: 0;}
    to {opacity: 1;}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes deplierMenus {
    from {opacity: 0;}
    to {opacity: 1;}
}

.BasPage:hover{
	top:90%;
  transition:ease-in-out;
  transition-duration: 1s;
  box-shadow: 12px 12px 15px -5px black;
}

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}