.pageContainer {
    /*max-width: 1200px; */
    max-width: 100%;
    margin: 0 20px;
}




/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  background-color: lightgrey;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: white;
  border: 4px solid #FF9F55;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.left {
  left: 0;
}

/* Place the container to the right */
.right {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
  left: -16px;
}

/* The actual content */
.content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
}

h2 {
    line-height: 24px;
    color: #de8a4a;
}
small {
    font-size: 50%;
    color: #000;
}
.timeline a {
    color: #777777;
    transition : 0.3s;
}
.timeline a:hover {
    color: #de8a4a;
}

.timeline a::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10a1.5 1.5 0 0 0 1.5 1.5h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 4px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: -.425em;
  opacity : 0.5;
  transform: scale(0.6);
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .timeline::after {
  left: 31px;
  }
  
  /* Full-width containers */
  .container {
  width: 100%;
  padding-left: 70px;
  padding-right: 25px;
  }
  
  /* Make sure that all arrows are pointing leftwards */
  .container::before {
  left: 60px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .left::after, .right::after {
  left: 15px;
  }
  
  /* Make all right containers behave like the left ones */
  .right {
  left: 0%;
  }
}







/* tags cloud */

ul.cloud {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  line-height: 2.5rem;
    max-width: 60%;
    margin: 0 auto;
}

ul.cloud a {
  color: grey;
  display: block;
  font-size: 1.5rem;
  padding: 0.125rem 0.25rem;
  text-decoration: none;
  position: relative;
}

ul.cloud a {
  --size: attr(data-weight number, 2); 
  font-size: calc(var(--size) * 1rem);
}

ul.cloud a[data-weight="1"] { --size: 1; }
ul.cloud a[data-weight="2"] { --size: 2; }
ul.cloud a[data-weight="3"] { --size: 3; }
ul.cloud a[data-weight="4"] { --size: 4; }
ul.cloud a[data-weight="5"] { --size: 5; }
ul.cloud a[data-weight="6"] { --size: 6; }
ul.cloud a[data-weight="7"] { --size: 7; }
ul.cloud a[data-weight="8"] { --size: 8; }
ul.cloud a[data-weight="9"] { --size: 9; }

ul.cloud a {
  --size: 4;
  font-size: calc(var(--size) * 0.25rem + 0.5rem);
  /* ... */
}


ul.cloud a {
  opacity: calc((15 - (9 - var(--size))) / 15); 
  /* ... */
}






/* ########## Projet */

/* accordion */
.open{
    color : #4daaf9;
}
.open:hover {
    cursor: pointer;
}



.open:before{
    content: "";
    float:right;
    color:#4daaf9;
}
.open:after{
    content: "";
    margin:0 0.5em;
    display:inline-block;
    border: 7px solid transparent;
    border-top:8px solid #4daaf9;
    border-bottom:0 none;
}

.svg-inline--fa {
    font-size: 30px;
}


/* inner nav */

div#inner_menu {
    position: fixed;
    top: 100px;
    right: 20px;
    background-color: lightgrey;
    padding: 10px;
}
#inner_menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

div#inner_menu a{
    text-decoration : none;
}
div#inner_menu a:hover{
    color: #fff;
}
.mPS2id-highlight {
    color: #fff;
}







/* footer */
.footer {
    background-color: #efefef;
    padding: 20px;
    margin-top: 40px;
}

p.foot1 {
    text-align: center;
    color: #9e9e9e;
}