@charset "UTF-8";
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font: 16px/1.5;
  background: #fff;
  color: #1c1c20;
  font-family: "Poppins", sans-serif;
}

/* INTRO SECTION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.intro {
  background: #fff;
}

.intro {
  background: #fff;
  padding: 0px 0;
  margin: 0px;
  width: 300px;
  margin: 0 auto;
  background: yellow;
}

.main_title {
  font-size: 5em;
  position: absolute;
  margin-left: -414px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: 25px;
  z-index: 6;
  font-weight: 600;
  max-width: 510px;
}

/* ANIMATION
-----------------------------------------------*/
@keyframes caret {
  50% {
    border-color: transparent;
  }
}
.name {
  color: yellow;
  font-weight: 900;
  margin-left: 250px;
  font-size: 6em;
  z-index: 99;
  position: absolute;
}

.firstname {
  margin-top: 250px;
  margin-left: 300px;
}

.my {
  color: yellow;
  font-weight: 900;
  margin-left: -465px;
  font-size: 5em;
  z-index: 99;
  position: absolute;
}

.portfolio {
  margin-top: 85px;
  margin-left: -465px;
}

.look_text {
  color: black;
  font-weight: 800;
  margin-left: -400px;
  margin-bottom: 20px;
  width: 165px;
  height: 165px;
  font-size: 1em;
  z-index: 99;
  text-decoration-color: yellow;
  border: 10px solid yellow;
  padding: 20px;
}

.look_text_portfolio {
  color: black;
  font-weight: 800;
  margin-left: -400px;
  margin-bottom: 20px;
  margin-top: 350px;
  width: 150px;
  height: 150px;
  font-size: 1em;
  z-index: 99;
  text-decoration-color: yellow;
  border: 10px solid yellow;
  padding: 20px;
  position: absolute;
}

.go-back {
  margin-left: 600px;
  font-size: 1.5em;
  width: 100%;
  padding-top: 50px;
}
.go-back a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.go-back p {
  margin-left: 5px;
  font-weight: 800;
}

.photoCv {
  max-height: 300px;
  max-width: 300px;
  margin-left: 250px;
  margin-top: 50px;
  width: 300px;
  height: auto;
  z-index: 0;
}

.container {
  width: 100%;
  margin: auto;
  margin-top: 0px;
  text-align: center;
  z-index: 4;
}

div.title.title_right.credit {
  background-color: transparent;
  width: 0;
}

.content_right p.copyright {
  margin-bottom: 0px;
}

div.title.title_left.credit {
  background-color: transparent;
  width: 0;
}

.content_left p.copyright {
  margin-bottom: 0px;
}

/* PULSE ANIMATION
--------------------------------------------*/
.pulse {
  animation: pulse 1s infinite;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

.life {
  color: yellow;
  font-weight: 800;
  /* font-size: 1sem;*/
}

.content p.life {
  display: flex;
  flex-direction: row;
}

p.life i {
  padding-left: 10px;
  font-size: 2em;
  margin-top: 20px;
}

/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline ul {
  background: #fff;
  padding: 0px 0;
  margin: 0px;
}

.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 300px;
  margin: 0 auto;
  padding-top: 50px;
  background: yellow;
}

.timeline ul li div {
  position: relative;
  bottom: 0;
  width: 100%;
  padding: 15px;
  background: #fff;
  /* MODAL
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
}
.timeline ul li div .button {
  padding: 1em 2em;
  color: #fff;
  border: 0;
}
.timeline ul li div .modal,
.timeline ul li div .modal_second,
.timeline ul li div .modal_third,
.timeline ul li div .modal_fourth,
.timeline ul li div .modal_fith,
.timeline ul li div .modal_six,
.timeline ul li div .modal_seventh,
.timeline ul li div .modal_eigth,
.timeline ul li div .modal_nine,
.timeline ul li div .modal_tenth {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow-x: auto;
  background-color: rgba(0, 0, 0, 0.5);
}
.timeline ul li div .modal-content,
.timeline ul li div .modal-content-2,
.timeline ul li div .modal-content-3,
.timeline ul li div .modal-content-4,
.timeline ul li div .modal-content-5,
.timeline ul li div .modal-content-6,
.timeline ul li div .modal-content-7,
.timeline ul li div .modal-content-8,
.timeline ul li div .modal-content-9,
.timeline ul li div .modal-content-10 {
  background-color: #fff;
  margin: auto;
  padding: 0px;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2), 0 7px 20px rgba(0, 0, 0, 0.17);
  animation-name: modalopen;
  animation-duration: 1s;
}
.timeline ul li div .modal-content .modal-header h2,
.timeline ul li div .modal-content .modal-footer h3,
.timeline ul li div .modal-content-2 .modal-header h2,
.timeline ul li div .modal-content-2 .modal-footer h3,
.timeline ul li div .modal-content-3 .modal-header h2,
.timeline ul li div .modal-content-3 .modal-footer h3,
.timeline ul li div .modal-content-4 .modal-header h2,
.timeline ul li div .modal-content-4 .modal-footer h3,
.timeline ul li div .modal-content-5 .modal-header h2,
.timeline ul li div .modal-content-5 .modal-footer h3,
.timeline ul li div .modal-content-6 .modal-header h2,
.timeline ul li div .modal-content-6 .modal-footer h3,
.timeline ul li div .modal-content-7 .modal-header h2,
.timeline ul li div .modal-content-7 .modal-footer h3,
.timeline ul li div .modal-content-8 .modal-header h2,
.timeline ul li div .modal-content-8 .modal-footer h3,
.timeline ul li div .modal-content-9 .modal-header h2,
.timeline ul li div .modal-content-9 .modal-footer h3,
.timeline ul li div .modal-content-10 .modal-header h2,
.timeline ul li div .modal-content-10 .modal-footer h3 {
  margin: 0;
}
.timeline ul li div .modal-content .modal-header,
.timeline ul li div .modal-content-2 .modal-header,
.timeline ul li div .modal-content-3 .modal-header,
.timeline ul li div .modal-content-4 .modal-header,
.timeline ul li div .modal-content-5 .modal-header,
.timeline ul li div .modal-content-6 .modal-header,
.timeline ul li div .modal-content-7 .modal-header,
.timeline ul li div .modal-content-8 .modal-header,
.timeline ul li div .modal-content-9 .modal-header,
.timeline ul li div .modal-content-10 .modal-header {
  background: yellow;
  padding: 15px;
  color: #000;
}
.timeline ul li div .modal-content .modal-body,
.timeline ul li div .modal-content-2 .modal-body,
.timeline ul li div .modal-content-3 .modal-body,
.timeline ul li div .modal-content-4 .modal-body,
.timeline ul li div .modal-content-5 .modal-body,
.timeline ul li div .modal-content-6 .modal-body,
.timeline ul li div .modal-content-7 .modal-body,
.timeline ul li div .modal-content-8 .modal-body,
.timeline ul li div .modal-content-9 .modal-body,
.timeline ul li div .modal-content-10 .modal-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.timeline ul li div .modal-content .modal-body p,
.timeline ul li div .modal-content-2 .modal-body p,
.timeline ul li div .modal-content-3 .modal-body p,
.timeline ul li div .modal-content-4 .modal-body p,
.timeline ul li div .modal-content-5 .modal-body p,
.timeline ul li div .modal-content-6 .modal-body p,
.timeline ul li div .modal-content-7 .modal-body p,
.timeline ul li div .modal-content-8 .modal-body p,
.timeline ul li div .modal-content-9 .modal-body p,
.timeline ul li div .modal-content-10 .modal-body p {
  padding-top: 20px;
}
.timeline ul li div .modal-content .modal-body .description,
.timeline ul li div .modal-content .modal-body p,
.timeline ul li div .modal-content-2 .modal-body .description,
.timeline ul li div .modal-content-2 .modal-body p,
.timeline ul li div .modal-content-3 .modal-body .description,
.timeline ul li div .modal-content-3 .modal-body p,
.timeline ul li div .modal-content-4 .modal-body .description,
.timeline ul li div .modal-content-4 .modal-body p,
.timeline ul li div .modal-content-5 .modal-body .description,
.timeline ul li div .modal-content-5 .modal-body p,
.timeline ul li div .modal-content-6 .modal-body .description,
.timeline ul li div .modal-content-6 .modal-body p,
.timeline ul li div .modal-content-7 .modal-body .description,
.timeline ul li div .modal-content-7 .modal-body p,
.timeline ul li div .modal-content-8 .modal-body .description,
.timeline ul li div .modal-content-8 .modal-body p,
.timeline ul li div .modal-content-9 .modal-body .description,
.timeline ul li div .modal-content-9 .modal-body p,
.timeline ul li div .modal-content-10 .modal-body .description,
.timeline ul li div .modal-content-10 .modal-body p {
  max-width: 85%;
  margin: auto;
  text-align: justify;
}
.timeline ul li div .modal-content .illustrations,
.timeline ul li div .modal-content-2 .illustrations,
.timeline ul li div .modal-content-3 .illustrations,
.timeline ul li div .modal-content-4 .illustrations,
.timeline ul li div .modal-content-5 .illustrations,
.timeline ul li div .modal-content-6 .illustrations,
.timeline ul li div .modal-content-7 .illustrations,
.timeline ul li div .modal-content-8 .illustrations,
.timeline ul li div .modal-content-9 .illustrations,
.timeline ul li div .modal-content-10 .illustrations {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.timeline ul li div .modal-content .illustrations img,
.timeline ul li div .modal-content-2 .illustrations img,
.timeline ul li div .modal-content-3 .illustrations img,
.timeline ul li div .modal-content-4 .illustrations img,
.timeline ul li div .modal-content-5 .illustrations img,
.timeline ul li div .modal-content-6 .illustrations img,
.timeline ul li div .modal-content-7 .illustrations img,
.timeline ul li div .modal-content-8 .illustrations img,
.timeline ul li div .modal-content-9 .illustrations img,
.timeline ul li div .modal-content-10 .illustrations img {
  width: 75%;
  margin-bottom: 50px;
  margin: auto;
}
.timeline ul li div .modal-content .illustrations a,
.timeline ul li div .modal-content-2 .illustrations a,
.timeline ul li div .modal-content-3 .illustrations a,
.timeline ul li div .modal-content-4 .illustrations a,
.timeline ul li div .modal-content-5 .illustrations a,
.timeline ul li div .modal-content-6 .illustrations a,
.timeline ul li div .modal-content-7 .illustrations a,
.timeline ul li div .modal-content-8 .illustrations a,
.timeline ul li div .modal-content-9 .illustrations a,
.timeline ul li div .modal-content-10 .illustrations a {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
}
.timeline ul li div .modal-content .illustrations figure,
.timeline ul li div .modal-content-2 .illustrations figure,
.timeline ul li div .modal-content-3 .illustrations figure,
.timeline ul li div .modal-content-4 .illustrations figure,
.timeline ul li div .modal-content-5 .illustrations figure,
.timeline ul li div .modal-content-6 .illustrations figure,
.timeline ul li div .modal-content-7 .illustrations figure,
.timeline ul li div .modal-content-8 .illustrations figure,
.timeline ul li div .modal-content-9 .illustrations figure,
.timeline ul li div .modal-content-10 .illustrations figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 20px;
}
.timeline ul li div .modal-content .illustrations figure figcaption,
.timeline ul li div .modal-content-2 .illustrations figure figcaption,
.timeline ul li div .modal-content-3 .illustrations figure figcaption,
.timeline ul li div .modal-content-4 .illustrations figure figcaption,
.timeline ul li div .modal-content-5 .illustrations figure figcaption,
.timeline ul li div .modal-content-6 .illustrations figure figcaption,
.timeline ul li div .modal-content-7 .illustrations figure figcaption,
.timeline ul li div .modal-content-8 .illustrations figure figcaption,
.timeline ul li div .modal-content-9 .illustrations figure figcaption,
.timeline ul li div .modal-content-10 .illustrations figure figcaption {
  margin-top: 15px;
  width: 75%;
  text-align: center;
}
.timeline ul li div .modal-content .modal-footer,
.timeline ul li div .modal-content-2 .modal-footer,
.timeline ul li div .modal-content-3 .modal-footer,
.timeline ul li div .modal-content-4 .modal-footer,
.timeline ul li div .modal-content-5 .modal-footer,
.timeline ul li div .modal-content-6 .modal-footer,
.timeline ul li div .modal-content-7 .modal-footer,
.timeline ul li div .modal-content-8 .modal-footer,
.timeline ul li div .modal-content-9 .modal-footer,
.timeline ul li div .modal-content-10 .modal-footer {
  background: yellow;
  padding: 10px;
  color: #000;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.timeline ul li div .modal-content .ancre-up,
.timeline ul li div .modal-content-2 .ancre-up,
.timeline ul li div .modal-content-3 .ancre-up,
.timeline ul li div .modal-content-4 .ancre-up,
.timeline ul li div .modal-content-5 .ancre-up,
.timeline ul li div .modal-content-6 .ancre-up,
.timeline ul li div .modal-content-7 .ancre-up,
.timeline ul li div .modal-content-8 .ancre-up,
.timeline ul li div .modal-content-9 .ancre-up,
.timeline ul li div .modal-content-10 .ancre-up {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1em;
  font-weight: 900;
  margin-right: 0;
  margin-bottom: 0;
}
.timeline ul li div .modal-content .ancre-up i,
.timeline ul li div .modal-content-2 .ancre-up i,
.timeline ul li div .modal-content-3 .ancre-up i,
.timeline ul li div .modal-content-4 .ancre-up i,
.timeline ul li div .modal-content-5 .ancre-up i,
.timeline ul li div .modal-content-6 .ancre-up i,
.timeline ul li div .modal-content-7 .ancre-up i,
.timeline ul li div .modal-content-8 .ancre-up i,
.timeline ul li div .modal-content-9 .ancre-up i,
.timeline ul li div .modal-content-10 .ancre-up i {
  margin-left: 5px;
}
.timeline ul li div .closeBtn,
.timeline ul li div .closeBtn2,
.timeline ul li div .closeBtn3,
.timeline ul li div .closeBtn4,
.timeline ul li div .closeBtn5,
.timeline ul li div .closeBtn6,
.timeline ul li div .closeBtn7,
.timeline ul li div .closeBtn8,
.timeline ul li div .closeBtn9,
.timeline ul li div .closeBtn10 {
  color: #000;
  float: right;
  font-size: 50px;
  display: flex;
}
.timeline ul li div .closeBtn:hover,
.timeline ul li div .closeBtn:focus,
.timeline ul li div .closeBtn2:hover,
.timeline ul li div .closeBtn2:focus,
.timeline ul li div .closeBtn3:hover,
.timeline ul li div .closeBtn3:focus,
.timeline ul li div .closeBtn4:hover,
.timeline ul li div .closeBtn4:focus,
.timeline ul li div .closeBtn5:hover,
.timeline ul li div .closeBtn5:focus,
.timeline ul li div .closeBtn6:hover,
.timeline ul li div .closeBtn6:focus,
.timeline ul li div .closeBtn7:hover,
.timeline ul li div .closeBtn7:focus,
.timeline ul li div .closeBtn8:hover,
.timeline ul li div .closeBtn8:focus,
.timeline ul li div .closeBtn9:hover,
.timeline ul li div .closeBtn9:focus,
.timeline ul li div .closeBtn10:hover,
.timeline ul li div .closeBtn10:focus {
  color: yellow;
  text-decoration: none;
  cursor: pointer;
}
@keyframes modalopen {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.watch {
  font-size: 1rem;
}
.watch i {
  margin-right: 5px;
}

.title h3 {
  text-transform: uppercase;
}

.content_right p {
  margin-bottom: 50px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: start;
  font-weight: 600;
}

.content_left p {
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  text-align: end;
  font-weight: 600;
}

p.skills {
  font-weight: 900;
}

/* title / content RIGHT */
.timeline ul li:nth-child(odd) .title_right {
  display: flex;
  justify-content: flex-end;
  margin-left: 150px;
  margin-right: 0px;
  max-width: 220px;
}

.timeline ul li:nth-child(odd) .title_right:first-of-type {
  margin-top: 100px;
  display: flex;
  justify-content: center;
}

.timeline ul li:nth-child(even) .content_right {
  left: 320px;
}

/* title / content LEFT */
.timeline ul li:nth-child(odd) .title_left {
  display: flex;
  justify-content: flex-start;
  margin-left: -50px;
  margin-right: 150px;
  max-width: 220px;
}

.timeline ul li:nth-child(even) .content_left {
  left: -320px;
}

.timeline ul li:nth-child(even) .content-left-portfolio {
  left: -520px;
}

.timeline ul li:nth-child(odd) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #00838f transparent transparent;
}

.timeline ul li:nth-child(even) div::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #00838f;
}

h3 {
  display: block;
  font-size: 1.2rem;
  font-weight: 900 !important;
  margin-bottom: 8px;
}

#file-icon i {
  font-size: 5em;
  display: flex;
  justify-content: flex-end;
}

#file-icon-portfolio i {
  font-size: 5em;
  display: flex;
  justify-content: flex-start;
}

.stalk {
  align-items: flex-end;
}

.social {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.social_content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.icon {
  font-size: 5em;
}

p.contact {
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  font-weight: 600;
}

p.contact a {
  display: flex;
  align-items: center;
}

p.contact i {
  font-size: 2em;
  margin-right: 5px;
}

p.seeyou {
  color: yellow;
  font-weight: 900;
  font-size: 3em;
  margin-bottom: 100px;
}

/* EFFECTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline ul li::after {
  transition: background 0.5s ease-in-out;
}

.timeline ul li.in-view::after {
  background: #00838f;
}

.timeline ul li div {
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.timeline ul li:nth-child(odd) div {
  transform: translate3d(200px, 0, 0);
}

.timeline ul li:nth-child(even) div {
  transform: translate3d(-200px, 0, 0);
}

.timeline ul li.in-view div {
  transform: none;
  visibility: visible;
  opacity: 1;
}

/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 992px) {
  .intro {
    width: calc(100vw - 91px);
    background: #fff;
    display: flex;
  }

  .photoCv {
    max-height: 250px;
    max-width: 250px;
    margin-left: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .main_title {
    font-size: 3.5rem;
    position: relative;
    margin-left: 0px;
    display: flex;
    justify-content: flex-end;
  }

  .name {
    margin-left: -40px;
  }

  .firstname {
    margin-top: 200px;
    margin-left: 65px;
  }

  .my {
    margin-left: -35px;
    position: relative;
    font-size: 3.8em;
  }

  .portfolio {
    margin-top: 5px;
  }

  .container {
    display: none;
  }

  .timeline ul {
    margin-left: -15px;
  }

  .timeline ul li {
    margin-left: 20px;
    width: 100px;
  }

  .timeline ul li div {
    width: calc(100vw - 91px);
  }

  .content p {
    margin-bottom: 50px;
    margin-right: 50px;
    text-align: start;
  }

  .look_text {
    margin-left: -30px;
    position: relative;
  }

  .look_text_portfolio {
    margin-top: 10px;
    margin-left: -30px;
    position: relative;
  }

  .go-back {
    margin-top: -390px;
    margin-left: 170px;
    position: absolute;
  }

  /* title / content RIGHT */
  .timeline ul li:nth-child(odd) .title_right {
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    margin-right: 0px;
    max-width: 200px;
  }

  .timeline ul li:nth-child(even) .content_right {
    left: 100px;
    max-width: 350px;
  }

  .content_left p {
    display: flex;
    text-align: start;
    justify-content: flex-start;
    flex-direction: column;
  }

  p.contact {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-weight: 600;
  }

  /* title / content LEFT */
  .timeline ul li:nth-child(odd) .title_left {
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
    margin-right: 0px;
    max-width: 200px;
  }

  .timeline ul li:nth-child(even) .content_left {
    left: 120px;
    padding-left: 0;
    max-width: 350px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    text-align: left;
  }

  .content_right p {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    text-align: left;
  }

  .timeline ul li:nth-child(even) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent #00838f transparent transparent;
  }

  .content_left p {
    margin-bottom: 50px;
  }

  p.social {
    align-items: flex-start;
  }

  div#file-icon.content.content_left {
    align-items: flex-start;
  }
}
a {
  text-decoration: none;
  color: #1c1c20;
}

a:hover {
  color: yellow;
}

@media (max-width: 600px) {
  html,
body {
    overflow-x: hidden;
  }

  div.content.content_right .button img {
    width: 250px;
  }

  div.content.content_left .button img {
    width: 250px;
  }

  .name {
    font-size: 5.5em;
  }

  p.social {
    align-items: flex-start;
  }

  p.contact {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-weight: 600;
    font-size: 1em;
    margin-top: 50px;
  }

  p.seeyou {
    margin-bottom: 25px;
  }
}

/*# sourceMappingURL=style.css.map */