@viewport {
  width: device-width;
}
* {
  font-family: sans-serif;
  margin:0;
  padding:0;
  border:0;
}
html{
  scroll-behavior: smooth;
}
body{
  margin: 0;
}
p{
    font-size: 21px;
    line-height: 1.5;
}
strong{
    font-size: 21px;
    font-weight: 700;
    color: #353535;
}
a{
  text-decoration: underline;
  color:#000;
  font-weight: 600;
}
a:visited{
  font-weight: 400;
}
svg{
  height: 49px;
  -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
h1{
  font-size: 126px;
  font-weight: 800;
  color: #353535;
  margin-left: -0.04em;
}
h2{
  text-align: center;
  font-weight: 800;
  font-size: 84px;
  color: #353535;
}
h3{
  font-size: 63px;
  font-weight: 800;
  color: #353535;
}
.caption{
  font-size: 126px;
  font-weight: 800;
}
.caption::first-letter {
   margin-left: -0.04em;
}
.primaryText{
  font-size: 63px;
  font-weight: 800;
}
.filigrane{
  font-size: 252px;
  font-weight: 800;
}
.buttonContainer{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 42px;
  height: 35px;
}
.buttonContainer > .Links{
  margin-left: 21px;
}
.squareButton{
  display: flex;
  width: 49px;
  height: 49px;
  border-style: solid;
  border-width: 2px;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}
.squareButton:hover{
  border: 0px solid;
}
.WhiteButton{
  box-sizing: border-box;
  background: #FFFFFF;
  font-weight: 700;
  color: #000;
  text-decoration: none;
  transition: 0.2s;
}
.squareButton:hover > .WhiteButton{
  padding: 12px 24px;
  border: 2px solid #212121;
  background-color: #212121;
  color: #FFF;
  transition: 0.2s;
  cursor: pointer;
}
.WhiteButton:selected{
  padding: 12px 24px;
  border: 2px solid #000000;
  background-color: #000;
  color: #FFF;
  transition: 0.2s;
}
.BlackButton{
  box-sizing: border-box;
  background: #212121;
  font-weight: 700;
  color: #FFF;
  text-decoration: none;
  transition: 0.2s;
}
.squareButton:hover > .BlackButton{
  padding: 12px 24px;
  border: 2px solid #FFF;
  background-color: #FFF;
  color: #353535;
  transition: 0.2s;
  cursor: pointer;
}
.BlackButton:selected{
  padding: 12px 24px;
  border: 2px solid #FFF;
  background-color: #FFF;
  color: #353535;
  transition: 0.2s;
}
.Links{
  color: #353535;
  font-weight: 700;
  text-decoration: underline;
}
.secondaryLinks{
  color: #353535;
  font-weight: 400;
}
.whiteLinks{
  color: #FFF;
  font-weight: 700;
  text-decoration: underline;
}
.Links:hover{
  font-weight: 700;
  text-decoration: none;
  border: solid 2px #212121;
  padding: 14px 21px 14px 21px;
}
.Point{
  width: 3.5px;
  height: 3.5px;
  background-color: #212121;
  margin-left: 3.5px;
  margin-top: 10px;
}
.Links:hover + .Point{
  display: none;
}
.whiteLinks:hover{
  font-weight: 700;
  text-decoration: none;
  border: solid 2px #FFF;
  padding: 14px 21px 14px 21px;
}
.whiteLinks:hover + .Point{
  display: none;
}
/*_______________Nav______________*/
nav {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  width: 100%;
  z-index: 9;
}
nav a{
  text-decoration: none;
  margin-top: 49px;
  display: flex;
  align-items: center;
}
nav a:hover > p{
  display: flex;
}
nav p{
  margin-left: 21px;
  display: none;
}
nav svg{
  margin-left: 63px;
  transform: rotate(270deg);
}
#logo{
  width: 98px;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  margin-top:28px;
  left: 0;
  right: 0;
}
/*_______________Home______________*/
#home {
  display:flex;
  justify-content: center;
}
#Blacksquare{
  width: 424px;
  height: 424px;
  border: solid 2px #212121;
  text-align: left;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  margin-top: 252px;
  margin-bottom: 252px;
}
#Whitesquare{
  width: 424px;
  height: 424px;
  border: solid 2px #FFF;
  text-align: left;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  margin-top: 252px;
  margin-bottom: 252px;
}
/*_________Timeline__________*/
.date{
  color: #353535;
  font-size: 21px;
  font-weight: 800;
  padding-right: 21px;
  padding-left: 21px;
  line-height: 35px;
  border-bottom-width: 2px;
  border-style: solid;
  margin-bottom: 9px;
}
.Timeline {
  width: 63px;
  position: relative;
  left: 11px;
}
.dateContainer{
  top: 21px;
  position: sticky;
  position: -webkit-sticky;
  display: flex;
  align-items: flex-end;
}
.dateContainer > div {
  width: 20px;
  height: 20px;
}
/*_______________Marquee_____________*/
.marquee {
  width: 100%;
  height: 94px;
  margin-bottom: 21px;
  overflow: hidden;
  position: relative;
}
.marquee p {
  position: absolute;
  white-space: nowrap;
  height: 100%;
  width: 200vw;  
  margin: 0;
  line-height: 100%;
  text-align: left;
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -moz-animation: scroll-left 7s linear infinite;
  -webkit-animation: scroll-left 7s linear infinite;
  animation: scroll-left 7s linear infinite;
}
.BreakMarquee {
  width: 400vw;
  height: 126px;
  overflow-x: visible;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.BreakMarquee p {
  position: absolute;
  height: 126px;
  width: 200vw; 
  white-space: nowrap; 
  margin: 0;
  line-height: 100%;
  text-align: center;
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -moz-animation: scroll-left 7s linear infinite;
  -webkit-animation: scroll-left 7s linear infinite;
  animation: scroll-left 7s linear infinite;
}

@-moz-keyframes scroll-left {
  0% {
      -moz-transform: translateX(100%);
  }
  100% {
      -moz-transform: translateX(-100%);
  }
}

@-webkit-keyframes scroll-left {
  0% {
      -webkit-transform: translateX(100%);
  }
  100% {
      -webkit-transform: translateX(-100%);
  }
}

@keyframes scroll-left {
  0% {
      -moz-transform: translateX(100%);
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
  }
  100% {
      -moz-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
  }
}
/*_________Footer___________*/
footer{
  text-align: center;
  padding-top: 126px;
  padding-bottom: 126px;
}
footer > h2{
  margin-bottom: 42px;
}
footer > div > a{
  font-weight: 700;
  font-size: 21px;
  margin-right: 7px;
}
footer > div > svg{
  width: 21px;
  height: 21px;
  transform: rotate(0deg);
}
footer > div{
  display: flex;
  align-items: center;
  justify-content: center;
}
.blackFooter{
  background-image: url(../ressource/TextureFooterBlack.png);
}
.whiteFooter{
  background-image: url(../ressource/TextureFooterWhite.png);
}
/*________________Content__________________*/
.textContainer{
  width: 35%;
  margin-bottom: 126px;
  color: #707070;
}
.Border{
  border-right: solid 2px #212121;
}
.WhiteBorder{
  border-right: solid 2px white;
}
.Text{
  color: #707070;
}
.White{
  color: #FFF;
}
.BGWhite{
  background-color: #FFF;
}
.BGBlack{
  background-color: #212121;
}
/*_______________Responsive design_____________*/
@media screen and (max-width:900px) {
    h1{
      color: #353535;
      font-size: 49px;
      font-weight: 800;
    }
    h2{
      color: #353535;
      text-align: center;
      font-weight: 800;
      font-size: 35px;
    }
    h3{
      text-align: center;
      color: #353535;
      font-size: 28px;
      font-weight: 800;
    }
    p{
      font-size: 17px;
    }
    .caption{
      font-size: 49px;
    }
    .primaryText{
      font-size: 28px;
    }
    .filigrane{
      font-size: 98px;
    }
    strong{
      font-size: 17px;
    }
    .Links{
      font-size: 17px;
      color: #353535;
      font-weight: 700;
      text-decoration: underline;
    }
    .Links:hover{
      padding: 14px 21px 14px 21px;
    }
    .Links:hover + .Point{
      display: none;
    }
    .Point{
      width: 3.5px;
      height: 3.5px;
      background-color: #212121;
      margin-left: 3.5px;
      margin-top: 14px;
    }
    /*_______________NAV______________*/
    svg{
      height: 28px;
    }
    nav a{
      margin-top: 63px;
      display: flex;
      align-items: center;
    }
    nav a:hover > p{
      display: flex;
    }
    nav p{
      display: none;
    }
    nav svg{
      margin-left: 21px;
      transform: rotate(270deg);
    }
    nav a:hover > p{
      display: none;
    }
    /*_______________Home______________*/
    #Blacksquare{
      width: 165px;
      height: 165px;
      margin-top: 252px;
      margin-bottom: 252px;
    }
    #Whitesquare{
      width: 165px;
      height: 165px;
      margin-top: 252px;
      margin-bottom: 252px;
    }
    /*_______________Marquee_____________*/
    .marquee{
      height: 42px;
    }
    .BreakMarquee p{
      height: 49px;
    }
    .BreakMarquee{
      height: 49px;
    }
    /*____________________________Content______________________*/
    .textContainer{
      margin-bottom: 98px;
      width: calc(100% - 84px);
      padding-left: 63px;
      padding-right: 21px;
    }
    /*_________Footer__________*/
    footer{
      text-align: center;
      padding-top: 49px;
      padding-bottom: 49px;
    }
    footer > h2{
      margin-bottom: 21px;
    }
    footer > div > a{
      font-size: 17px;
    }
    footer > div > svg{
      width: 17px;
      height: 17px;
    }
    /*_________Timeline__________*/
    .date{
      color: #353535;
      font-size: 17px;
      font-weight: 800;
      padding-right: 21px;
      padding-left: 21px;
      line-height: 35px;
      border-bottom-width: 2px;
      border-style: solid;
      margin-bottom: 9px;
    }
    .dateContainer{
      top: 21px;
      display: flex;
      align-items: flex-end;
    }
    .dateContainer > div {
      width: 20px;
      height: 20px;
    }
    .Timeline {
      width: 21px;
      position: relative;
      left: 11px;
    }
    .White{
      color: #FFF;
    }
  }
}