ancre.css

/* Fonts */

@font-face {
  font-family: 'fontello';
  src: url('fonts/fontello/font/fontello.eot?5583530');
  src: url('fonts/fontello/font/fontello.eot?5583530#iefix') format('embedded-opentype'),
       url('fonts/fontello/font/fontello.woff2?5583530') format('woff2'),
       url('fonts/fontello/font/fontello.woff?5583530') format('woff'),
       url('fonts/fontello/font/fontello.ttf?5583530') format('truetype'),
       url('fonts/fontello/font/fontello.svg?5583530#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* General Styles */

body{
  margin: 0;
}

footer {
  position: relative;
  padding:  2%;
  box-sizing: border-box;
  background-color: #000;
  line-height: auto;
  text-align: center;
}

footer img {
  padding: 0% 5%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

footer img:hover {
  /*opacity: 0.9;*/
  transform: scale(1.5);
  transition: transform 0.5s ease-in-out;
}

/* Anchor CSS Styles */

.containeranchor {
  position:relative;
  display:flex;
  width:100%;
  min-height: 50px;
  background: url('photos/fond.jpg');
}

.anchor {

  font-size:2em;
}


#chapter {
  text-align: center;
  margin: 0 auto;
}

#gotop {
	position:absolute;
	bottom:0.5em;
	right:1em;
	font-weight:bold;
	font-size:2em;
	color:pink;
}

/* Test Anchre */

.chapter {
  display: none;
}

.chapter.introduction {
  display:flex;
}

.containeranchor:hover .chapter.cycliste{
  display: flex;
  z-index: 1;
}

.containeranchor:hover .chapter.derrick {
  display: flex;
  z-index: 1;
  }
.containeranchor:hover .chapter.indiana{
  display: flex;
  z-index: 1;
}
.containeranchor:hover .chapter.chapeau {
  display: flex;
  z-index: 1;
}



/* Helper Classes */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.clear {
  clear:both;
}