/* INTRO */

body {
	height:1%;
}

.camera {
  background-image: url("camera4.png");
  background-size: 115%;
  height: 400vw;
  background-position: -5vw -7vw;
  background-repeat: no-repeat;
  position: relative;
  z-index: 4;
}

.intro {
  color: black;
  font-family: vintage;
  z-index: 5;
}

/* BOUTON GAUCHE */

#details a {
 position: fixed;
  left: 0px;
  transition: 0.4s;
  padding: 0.3vw;
  width: 11.5vw;
  height: 2.7vw;
  text-decoration: none;
  font-size: 1.5vw;
  color: white;
  border-radius: 0 5px 5px 0;
  z-index: 95;
  font-family: normale;
  border: 2px solid #2D2D2D;
  opacity: 0.5;
}

#details a:hover {
  left: 0;
  opacity: 1;
}

#moi {
  bottom: 16.4vw;
  background-color: #5E5E5E;
}

#formation a {
 position: fixed;
  left: 0px;
  transition: 0.4s;
  padding: 0.3vw;
  width: 11.5vw;
  height: 2.7vw;
  text-decoration: none;
  font-size: 1.5vw;
  color: white;
  border-radius: 0 5px 5px 0;
  z-index: 95;
  font-family: normale;
  border: 2px solid #2D2D2D;
  opacity: 0.5;
}

#formation a:hover {
  left: 0;
  opacity: 1;
}

#forma {
  bottom: 13.3vw;
  background-color: #5E5E5E;
}

#experience a {
  position: fixed;
  left: 0px;
  transition: 0.4s;
  padding: 0.3vw;
  width: 11.5vw;
  height: 4.5vw;
  text-decoration: none;
  font-size: 1.5vw;
  color: white;
  border-radius: 0 5px 5px 0;
  z-index: 95;
  font-family: normale;
  border: 2px solid #2D2D2D;
  opacity: 0.5;
}

#experience a:hover {
  opacity: 1;
  left: 0;
}

#xp {
  bottom: 8.4vw;
  background-color: #5E5E5E;
}

#competence a {
  position: fixed;
  left: 0px;
  transition: 0.4s;
  padding: 0.3vw;
  width: 11.5vw;
  height: 4.5vw;
  text-decoration: none;
  font-size: 1.5vw;
  color: white;
  border-radius: 0 5px 5px 0;
  z-index: 95;
  font-family: normale;
  border: 2px solid #2D2D2D;
  opacity: 0.5;
}

#competence a:hover {
  left: 0;
  opacity: 1;
}

#ci {
  bottom: 3.5vw;
  background-color: #5E5E5E;
}

#loisirs a {
  position: fixed;
  left: 0px;
  transition: 0.4s;
  padding: 0.3vw;
  width: 11.5vw;
  height: 2.7vw;
  text-decoration: none;
  font-size: 1.5vw;
  color: white;
  border-radius: 0 5px 5px 0;
  z-index: 1;
  font-family: normale;
  border: 2px solid #2D2D2D;
  opacity: 0.5;
}

#loisirs a:hover {
  opacity: 1;
  left: 0;
}

#lois {
  bottom: 0.5vw;
  background-color: #5E5E5E;
}

#section0 {
  position: relative;
  top: 50vw;
}

#section1 {
  position: relative;
  top: -330vw;
}

#section2 {
  position: relative;
  top: -265vw;
}

#section3 {
  position: relative;
  top: -190vw;
}

#section4 {
  position: relative;
  top: -110vw;
}

/* BOUTON DROITE */

#imprimer a {
 position: fixed;
  right: -5.8vw;
  transition: 0.4s;
  padding: 0.3vw;
  width: 13vw;
  height: 3.1vw;
  text-decoration: none;
  font-size: 1.6vw;
  color: white;
  border-radius: 5px 0 0 5px;
  z-index: 50;
  font-family: normale;
  border: 2px solid #2D2D2D;
}

#imprimer a:hover {
  right: 0;
}

#print {
  bottom: 1vw;
  background-color: #5E5E5E;
}

/* PROFIL */

.entete img {
  border-radius: 50%;
  width: 20vw;
  position: relative;
  top: 64vw;
  left: 10%;
  border: 5px solid #5E5E5E;
}

.entete h1 {
  font-family: normale;
  position: relative;
  top: 44vw;
  left: 45%;
  width: 45vw;
  font-size: 4vw;
}

.entete h2 {
  font-family: normale;
  position: relative;
  top: 46vw;
  left: 40%;
  font-size: 1.5vw;
  width: 25vw;
}

.entete h3 {
  font-family: normale;
  position: relative;
  top: 42.6vw;
  left: 74%;
  font-size: 1.5vw;
  width: 15vw;
}

.entete h4 {
  font-family: normale;
  position: relative;
  top: 44vw;
  left: 50%;
  font-size: 1.5vw;
  width: 40vw;
}

/* FORMATION */

.formation h1 {
  font-family: titre;
  position: relative;
  left: 37%;
  top: 58vw;
  font-size: 7.5vw;
  width: 35vw;
}

.formation .container {
    max-width: 1140px;
    margin: 0 auto;
    position: relative;
    top: 51vw;
}

@media screen and (max-width: 1140px) {
  .formation .container {
    top: 45vw;
  }
}

@media screen and (max-width: 1000px) {
  .formation .container {
    top: 45vw;
  }
}

@media screen and (max-width: 991px) {
  .formation .container {
    top: 40vw;
  }
}

@media screen and (max-width: 767px) {
  .formation .container {
    top: 53vw;
  }
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul::after {
    content: '';
    display: block;
    clear: both;
}

ul.timeline {
    display: flex;
    flex-wrap: wrap;
    font-family: normale;
}

ul.timeline > li {
    width: calc( 200% / 6);
}

ul.timeline > li:nth-of-type(odd) > .content {
    transform: translateY(calc(-100% - 24px));
}

ul .year {
    color: #F8D545;
    background: #424242;
    display: block;
    position: relative;
    padding-left: 2vw;
    line-height: 1.75vw;
    font-weight: bold;
    font-size: 1.5vw;
}

ul .year::before {
    content: '';
    width: 40px;
    height: 40px;
    position: absolute;
    background: #ffd402;
    border-radius: 50%;
    left: -24px;
    top: calc( (40 - 24) / 2 * -1px);
}

ul .year.new {
    border-radius: 0 24px 24px 0;
}

ul .year.new::after {
    content: '';
    width: 5px;
    height: 5px;
    display: block;
    border: 20px solid #3f444c;
    box-sizing: border-box;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    position: absolute;
    right: -30px;
    top: -9.5px;
}

ul .content {
    border-left: 8px solid #ffd402;
    margin-left: -8px;
    padding: 1vw 0;
    padding-right: 24px;
    font-family: normale;
}

ul .lieu {
  color: #F8D545;
  font-size: 2vw;
}

ul .autre {
  color: #5E5E5E;
  font-size: 2vw;
}

ul .autre i {
  font-size: 1vw;
}

ul .content > li {
    padding-left: 20px;
    border-bottom: 0.4vw solid white;
    padding-bottom: 8px;
    position: relative;
    margin-left: -8px;
}

ul .content > li:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

ul .content > li::before {
    content: '';
    display: block;
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #eef4f7;
    left: 0.2vw;
    top: 0.5vw;
}

@media screen and (max-width: 1140px) {
    ul.timeline > li {
        width: calc( 100% / 4);
    }
}

@media screen and (max-width: 991px) {
    ul.timeline > li {
        width: calc( 100% / 2);
    }
}

@media screen and (max-width: 767px) {
    ul.timeline {
        display: block;
    }
    ul.timeline > li {
        width: 100%;
    }
    ul.timeline > li:nth-of-type(odd) .content {
        transform: none;
    }
}

/* EXPERIENCE PROFESSIONNELLE */

.xp h1 {
  font-family: titre;
  position: relative;
  left: 15%;
  top: 67vw;
  font-size: 7.5vw;
  width: 80vw;
}

.xp .container {
    max-width: 1140px;
    margin: 0 auto;
    position: relative;
    top: 70vw;
}

@media screen and (max-width: 1140px) {
  .xp h1 {
    top: 57vw;
  }
  .xp .container {
  	top: 57vw;
  }
}

@media screen and (max-width: 991px) {
  .xp h1 {
    top: 41vw;
  }
  .xp .container {
  	top: 25vw;
  }
}

@media screen and (max-width: 767px) {
  .xp h1 {
    top: 70vw;
  }
  .xp .container {
  	top: 65vw;
  }
}

@media screen and (max-width: 420px) {
  .xp h1 {
    top: 63vw;
  }
  .xp .container {
  	top: 55vw;
  }
}

/* COMPETENCE INFORMATIQUE */

.ci {
  position: relative;
  top: -43vw;
}

.ci .barre {
	position: relative;
	top: 23vw;
}

.ci h1 {
  font-family: titre;
  position: relative;
  left: 15%;
  top: 116vw;
  font-size: 7.5vw;
  width: 80vw;
}

.ci h2 {
  font-family: normale;
  font-size: 2vw;
  position: relative;
  left: 20%;
  top: 93vw;
  width: 25vw;
}

.ci h3 {
  font-family: normale;
  font-size: 2vw;
  position: relative;
  left: 20%;
  top: 94vw;
  width: 25vw;
}

.ci h4 {
  font-family: normale;
  font-size: 2vw;
  position: relative;
  left: 20%;
  top: 94.5vw;
  width: 25vw;
}

.ci h5 {
  font-family: normale;
  font-size: 2vw;
  position: relative;
  left: 20%;
  top: 94.1vw;
  width: 25vw;
}

.ci h6 {
  font-family: normale;
  font-size: 2vw;
  position: relative;
  left: 20%;
  top: 92.5vw;
  width: 25vw;
}

.progress {
  padding: 0.3vw;
  margin-bottom: 3.4vw;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
  width: 21vw;
  position: relative;
  left: 50%;
  top: 64vw;
}

.progress-bar {
  font-family: 'Yanone Kaffeesatz';
  position: relative;
  height: 1.5vw;
  border-radius: 4px;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}
.progress-bar:before, .progress-bar:after {
  content: '';
  top: 0;
  right: 0;
  left: 0;
  position: absolute;
}
.progress-bar:before {
  bottom: 0;
  z-index: 2;
  background: url("../img/stripes.png") 0 0 repeat;
  border-radius: 4px 4px 0 0;
}
.progress-bar:after {
  bottom: 45%;
  z-index: 3;
  border-radius: 4px;
  background-color: transparent;
  }

.C.progress > .progress-bar {
  width: 60%;
  background-color: #F8D545;
  position: relative;
}

.html.progress > .progress-bar {
  width: 80%;
  background-color: #F8D545;
}

.sql.progress > .progress-bar {
  width: 60%;
  background-color: #F8D545;
}

.shell.progress > .progress-bar {
  width: 60%;
  background-color: #F8D545;
}

.adobe.progress > .progress-bar {
  width: 100%;
  background-color: #F8D545;
}

@media screen and (max-width: 1140px) {
  .ci h1 {
  	top: 100vw;
  }
  .ci .barre {
  	top: 5vw;
  }
}

@media screen and (max-width: 1010px) {
  .ci h1 {
  	top: 96vw;
  }
  .ci .barre {
  	top: 2vw;
  }
}

@media screen and (max-width: 991px) {
  .ci h1 {
  	top: 65vw;
  }
  .ci .barre {
  	top: -28vw;
  }
  #section3 {
  top: -200vw;
  }
}

@media screen and (max-width: 930px) {
  .ci h1 {
  	top: 60vw;
  }
  .ci .barre {
  	top: -33vw;
  }
}

@media screen and (max-width: 800px) {
  .ci h1 {
  	top: 57vw;
  }
  .ci .barre {
  	top: -37vw;
  }
  #section4 {
  top: -130vw;
  }
}

@media screen and (max-width: 767px) {
  .ci h1 {
  	top: 122vw;
  }
  .ci .barre {
  	top: 27vw;
  }
  #section1 {
  top: -367vw;
  }
  #section2 {
  top: -290vw;
  }
  #section3 {
  top: -210vw;
  }
}

@media screen and (max-width: 640px) {
  .ci h1 {
  	top: 118vw;
  }
  .ci .barre {
  	top: 24vw;
  }
  #section1 {
  top: -390vw;
  }
  #section2 {
  top: -325vw;
  }
  #section3 {
  top: -245vw;
  }
  #section4 {
  top: -165vw;
  }
}

@media screen and (max-width: 530px) {
  .ci h1 {
  	top: 113vw;
  }
  .ci .barre {
  	top: 18vw;
  }
  #section3 {
  top: -260vw;
  }
  #section4 {
  top: -185vw;
  }
}

@media screen and (max-width: 440px) {
  #section1 {
  top: -465vw;
  }
  #section2 {
  top: -395vw;
  }
  #section3 {
  top: -320vw;
  }
  #section4 {
  top: -230vw;
  }
}

@media screen and (max-width: 430px) {
  .ci h1 {
  	top: 107vw;
  }
  .ci .barre {
  	top: 13vw;
  }
}

@media screen and (max-width: 403px) {
  #section4 {
  top: -250vw;
  }
}

@media screen and (max-width: 380px) {
  .ci h1 {
  	top: 100vw;
  }
  .ci .barre {
  	top: 6vw;
  }
  #section1 {
  top: -485vw;
  }
  #section2 {
  top: -410vw;
  }
  #section3 {
  top: -340vw;
  }
}

/* SYSTEME D'EXPLOITATION */

.se {
  font-family: normale;
  position: relative;
  top: -23vw;
}

.se a {
  font-family: normale;
  color: #5E5E5E;
}

.se i {
  font-size: 1vw;
}

.se h1 {
  font-size: 3vw;
  position: relative;
  left: 10%;
  top: 70vw;
  width: 50vw;
}

.se h2 {
  font-size: 2vw;
  position: relative;
  left: 20%;
  top: 73vw;
  width: 75vw;
}

.se h3 {
  font-size: 2vw;
  position: relative;
  left: 20%;
  top: 73vw;
  width: 75vw;
}

@media screen and (max-width: 1140px) {
  .se {
  	top: -40vw;
  }
}

@media screen and (max-width: 991px) {
  .se {
  	top: -73vw;
  }
}

@media screen and (max-width: 930px) {
  .se {
  	top: -80vw;
  }
}

@media screen and (max-width: 800px) {
  .se {
  	top: -83vw;
  }
}

@media screen and (max-width: 767px) {
  .se {
  	top: -17vw;
  }
}

@media screen and (max-width: 640px) {
  .se {
  	top: -22vw;
  }
}

@media screen and (max-width: 530px) {
  .se {
  	top: -27vw;
  }
}

@media screen and (max-width: 430px) {
  .se {
  	top: -32vw;
  }
}

@media screen and (max-width: 380px) {
  .se {
  	top: -37vw;
  }
}

/* LOISIRS */

.loisirs {
  position: relative;
  top: -27vw;
}

.loisirs h1 {
  font-family: titre;
  position: relative;
  left: 40%;
  top: 95vw;
  font-size: 7.5vw;
  width: 25vw;
}

div.sport {
  width: 20%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
  position: relative;
  left: 10%;
  top: 95vw;
}

div.container {
  font-family: normale;
  font-size: 2vw;
  text-align: center;
  padding: 10px 20px;
}

div.youtube {
  width: 20%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
  position: relative;
  left: 40%;
  top: 62.5vw;
}

div.montage {
  width: 20%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
  position: relative;
  left: 70%;
  top: 22.7vw;
}

@media screen and (min-width: 1432px) {
  .formation h1 {
   top: 60vw; 
  }
  .xp h1 {
    top: 58vw;
  }
  .xp .container {
    top: 55vw;
  }
  .ci h1 {
    top: 105vw;
  }
  .ci .barre {
    top: 10vw;
  }
  .se {
    top: -37vw;
  }
}

@media screen and (max-width: 1140px) {
  .loisirs h1 {
  	top: 80vw;
  }
  .loisirs .sport {
  	top: 80vw;
  }
  .loisirs .youtube {
  	top: 46.7vw;
  }
  .loisirs .montage {
  	top: 6.3vw;
  }
}

@media screen and (max-width: 991px) {
  .loisirs h1 {
  	top: 45vw;
  }
  .loisirs .sport {
  	top: 45vw;
  }
  .loisirs .youtube {
  	top: 11vw;
  }
  .loisirs .montage {
  	top: -30vw;
  }
}

@media screen and (max-width: 930px) {
  .loisirs h1 {
  	top: 42vw;
  }
  .loisirs .sport {
  	top: 43vw;
  }
  .loisirs .youtube {
  	top: 8.7vw;
  }
  .loisirs .montage {
  	top: -32.5vw;
  }
}

@media screen and (max-width: 800px) {
  .loisirs h1 {
  	top: 37vw;
  }
  .loisirs .sport {
  	top: 37vw;
  }
  .loisirs .youtube {
  	top: 1.7vw;
  }
  .loisirs .montage {
  	top: -40.7vw;
  }
}

@media screen and (max-width: 767px) {
  .loisirs h1 {
  	top: 101vw;
  }
  .loisirs .sport {
  	top: 100vw;
  }
  .loisirs .youtube {
  	top: 64.3vw;
  }
  .loisirs .montage {
  	top: 19vw;
  }
}

@media screen and (max-width: 640px) {
  .loisirs h1 {
  	top: 98vw;
  }
  .loisirs .sport {
  	top: 97vw;
  }
  .loisirs .youtube {
  	top: 59.5vw;
  }
  .loisirs .montage {
  	top: 13vw;
  }
}

@media screen and (max-width: 530px) {
  .loisirs h1 {
  	top: 93vw;
  }
  .loisirs .sport {
  	top: 93vw;
  }
  .loisirs .youtube {
  	top: 54.5vw;
  }
  .loisirs .montage {
  	top: 4vw;
  }
}

@media screen and (max-width: 430px) {
  .loisirs h1 {
  	top: 89vw;
  }
  .loisirs .sport {
  	top: 90vw;
  }
  .loisirs .youtube {
  	top: 47vw;
  }
  .loisirs .montage {
  	top: -8vw;
  }
}

@media screen and (max-width: 380px) {
  .loisirs h1 {
  	top: 80vw;
  }
  .loisirs .sport {
  	top: 77vw;
  }
  .loisirs .youtube {
  	top: 32vw;
  }
  .loisirs .montage {
  	top: -25.5vw;
  }
}