@font-face {
  font-family: Roboto;
  src: url(assets/fonts/Roboto-Regular.ttf);
}

.moitie-moitie {
  display: flex;
  gap: 3.75rem;
}

.moitie-moitie > * {
  flex: 1;
}

button {
  width: 28.75rem;
  height: 6.25rem;
  border-radius: 3.125rem;
  border: 0;
  cursor: pointer;
}

html,
body {
  padding: 0;
  margin: 0;
  background: #f0faf0;
  -ms-overflow-style: none;
  scrollbar-width: none;
  font-family: 'Roboto';
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

#section-video .video-oui {
  width: 100%;
  max-width: 100%;
}

#section-video .logo {
  position: absolute;
  width: 28%;
}

.parallax {
  position: fixed;
  right: 0;
  top: 0;
  height: auto;
  width: auto;
  min-height: 100%;
  z-index: -9999;
}

.parallax-bottom {
  min-width: 100%;
  background-size: cover;
  margin-top: calc(100vw * 0.5625);
}

#on-avance-section {
  color: #08283b;
  font-size: 2.1875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.5rem;
  padding-left: 3.75rem;
  padding-right: 3.75rem;
}

#on-avance-section .arrow-container {
  display: flex;
  justify-content: center;
  padding-top: 0.87rem;
  padding-bottom: 2.87rem;
}

#on-avance-section .image-container object {
  min-width: 0;
  width: 100%;
}

#on-avance-section button {
  background: #ef4646;
  color: #fff;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0.0375rem;
  text-transform: uppercase;
  margin-top: 2.41rem;
  margin-bottom: 3.59rem;
}

#on-avance-section .text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#non-partisan {
  background-image: url(assets/img/cercles.svg);
  background-size: cover;
  padding-left: 3.75rem;
  padding-right: 3.75rem;
  padding-bottom: 20rem;
  display: flex;
  flex-direction: column;
}

#non-partisan .cercles {
  width: 100%;
  position: relative;
  z-index: 0;
}

#non-partisan .texte {
  position: relative;
  z-index: 1;
  margin-top: 20rem;
  width: 90%;
}

#non-partisan button {
  background: #5390cc;
  color: #fff;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0.0375rem;
  text-transform: uppercase;
  margin-top: 2.41rem;
}

#oui-quebec {
  background-image: url(assets/img/arriere-plan.png);
  background-size: cover;
  padding-left: 3.75rem;
  padding-right: 3.75rem;
  height: 40rem;
  display: flex;
  flex-direction: column;
}

#infolettre {
  padding-left: 3.75rem;
  padding-right: 3.75rem;
  padding-top: 4.38rem;
  padding-bottom: 2rem;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  font-size: 2.1875rem;
  font-style: normal;
  font-weight: 400;
}

#infolettre .texte-container {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  color: #000;
}

#infolettre object {
  min-width: 0;
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

#infolettre .subscribe-container {
  height: 675px;
}

#enweye-donc {
  padding-left: 3.75rem;
  padding-right: 3.75rem;
  background-color: black;
}

#enweye-donc .enweye-donc-container {
  padding-top: 20rem;
  padding-bottom: 20rem;
  display: flex;
  justify-content: center;
}

#enweye-donc object {
  min-width: 0;
  width: 100%;
}

#enweye-donc .barre {
  height: 1px;
  background-color: #f7f5e9;
  width: 100%;
}

#enweye-donc .texte-bas {
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: #fff;
  text-align: center;
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.25rem;
}

@media (max-width: 768px) {
  button {
    width: 100%;
  }

  .moitie-moitie {
    flex-direction: column;
  }

  #infolettre .subscribe-container {
    flex: 625px;
  }
}

@media (max-width: 425px) {
  button {
    padding: 0.75rem;
    height: 4.25rem;
    font-size: 1rem;
  }

  #on-avance-section,
  #non-partisan,
  #infolettre {
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (max-width: 320px) {
  #infolettre .subscribe-container {
    flex: 800px;
  }
}