@import url("https://fonts.googleapis.com/css?family=Nunito Sans:200,300,400,700,800,900");
* {
  font-family: "Nunito Sans"; }

* {
  box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: 'Nunito Sans' , sans-serif;
  font-size: 100%; }
  html .typed-cursor, body .typed-cursor {
    display: none; }

#menu-bouton {
  position: fixed;
  /*left: 1em; top: 1em;*/
  width: 3em;
  height: 3em;
  margin: 10px;
  z-index: 999;
  /* padding: 1.5em;*/
  border-radius: 100%;
  transition: all .2s ease-out; }

/*Cursor on toggle button hover*/
#menu-btn:hover {
  background-color: transparent; }

/*Changing color of hamburger lines on hover*/
/*
#menu-btn:active{ box-shadow: 0 0 5px black; background-color: #524a88; }
*/
/*Styles for the hamburger lines*/
.menu-btn-line {
  height: .5em;
  width: 3em;
  background-color: #ff0000;
  margin-bottom: .5em;
  z-index: 100000; }

/*No margin-bottom for last hamburger line.*/
.menu-btn-line:last-child {
  margin-bottom: 0; }

/*List container*/
#menu {
  position: absolute;
  background: none;
  top: 5em;
  left: 1em;
  border: 0.5em solid #ff0000;
  width: 6em;
  height: 10em;
  padding: 1em; }
  #menu a {
    text-decoration: none;
    color: #ff0000;
    font-weight: 600; }

/*List*/
#menu ul {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

/*List items*/
#menu ul li {
  list-style-type: none;
  left: 0;
  height: 2em;
  padding: .5em;
  color: #ff0000;
  transition: all .3s ease-out; }

#menu ul li:hover {
  cursor: pointer; }

/*Background and text colour change on click*/
/*
#menu ul li:active{
    background-color: #00FFCA;
    color: rgba(52, 73, 94,1.0);
}
*/
nav ul a:hover {
  background-color: transparent; }

@keyframes pulse {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.1); }
  100% {
    transform: scale(1); } }
.pulse {
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite; }

section {
  background-color: transparent;
  height: 100%;
  width: 100%;
  position: fixed; }

.left, .right {
  z-index: 1;
  transition: transform .5s; }

.active {
  z-index: 1; }
  .active .left, .active .right {
    transform: translateY(0);
    transition: transform .5s; }

.left {
  height: 100%;
  width: 50%;
  position: absolute;
  transform: translateY(-100%); }
  .left__1 {
    background-color: #ff0000;
    color: #fff; }
    .left__1 h1 {
      font-size: 10em;
      font-weight: 900; }
    .left__1 h2 {
      font-size: 4em;
      font-weight: 900; }
    .left__1 p {
      font-size: 2em;
      font-weight: 900; }
  .left__2 {
    color: #fff;
    background-color: #212020; }
    .left__2 h2 {
      line-height: 0.8em;
      font-size: 10em;
      padding: 20px;
      font-weight: 900; }
    .left__2 p {
      font-size: 0.9em;
      display: block;
      font-weight: 500; }
  .left__3 {
    background-color: #fff; }
    .left__3 h2 {
      line-height: 0.8em;
      font-size: 10em;
      padding: 20px;
      font-weight: 900; }
    .left__3 h3 {
      font-weight: 900;
      font-size: 1.5em; }
    .left__3 i {
      font-size: 4em;
      color: #ff0000;
      margin: 10px; }

.right {
  height: 100%;
  width: 50%;
  position: absolute;
  right: 0;
  transform: translateY(100%); }
  .right__1 {
    background-color: #fff;
    color: #ff0000; }
    .right__1 .social {
      font-size: 1.5em;
      color: #ff0000; }
      .right__1 .social i {
        margin: 10px; }
    .right__1 img {
      width: 100%;
      height: auto;
      z-index: 3; }
    .right__1 .scroll {
      writing-mode: vertical-lr;
      font-weight: 900;
      font-size: 1em; }
      .right__1 .scroll a {
        text-decoration: none;
        color: #ff0000; }
      .right__1 .scroll i {
        font-size: 1.5em; }
    .right__1 .stage {
      writing-mode: vertical-lr;
      font-size: 1.5em;
      font-weight: 900;
      z-index: 4; }
    .right__1 .social {
      color: #ff0000;
      font-size: 1.5em;
      font-weight: 900; }
      .right__1 .social i {
        padding: 10px; }
  .right__2 {
    color: #ff0000;
    background-color: #fff; }
    .right__2 h2 {
      line-height: 0.8em;
      font-size: 10em;
      padding: 20px;
      font-weight: 900; }
    .right__2 h3 {
      font-weight: 900;
      font-size: 2em; }
    .right__2 .scroll {
      color: #ff0000;
      writing-mode: vertical-lr;
      font-weight: 900;
      font-size: 1em; }
      .right__2 .scroll i {
        font-size: 1.5em; }
    .right__2 p {
      color: black;
      font-weight: 600; }
  .right__3 {
    background-color: #f00;
    color: white; }
    .right__3 h2 {
      line-height: 0.8em;
      font-size: 10em;
      padding: 20px;
      font-weight: 900; }
    .right__3 h3 {
      font-weight: 900;
      font-size: 1.5em; }
    .right__3 p {
      font-weight: 600;
      font-size: 1em;
      color: white; }
      .right__3 p a {
        text-decoration: none;
        color: white; }
    .right__3 #cv {
      color: white;
      font-size: 1.5em;
      font-weight: 900; }
      .right__3 #cv i {
        padding: 10px; }
    .right__3 .social {
      color: white;
      font-size: 1em;
      font-weight: 900; }
      .right__3 .social i {
        padding: 10px; }
    .right__3 .contact {
      padding: 10px;
      margin: 10px; }

@media screen and (max-width: 750px) {
  body {
    font-size: 40%; }

  section {
    background-color: transparent;
    height: 100%;
    width: 100%;
    position: fixed;
    display: block;
    flex-direction: column; }

  .right, .left {
    width: 100%;
    height: 50%;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center; }

  #menu {
    position: absolute;
    background: transparent;
    top: 5em;
    left: 1em;
    border: 0.5em solid #ff0000;
    width: auto;
    height: 130px;
    padding: 0; }
    #menu li {
      margin: 10px; } }