@media (max-width: 768px) {

  #hero h1 {
    font-size: 28px;
    line-height: 36px;
  }

  #hero h2,
  #topFixedBG h2 {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }

  #topFixedBG h1 {
    word-wrap: break-word;
  }

  h1 {
    text-align: left !important;
  }

  h3 {
    width: 100% !important;
    font-size: 2rem !important;
  }

  .content {
    width: 100% !important;
    margin-top: 5% !important;
  }

  .multi {
    column-count: none !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .line {
    flex-direction: column !important;
  }

  .line>* {
    width: 100% !important;
    margin: 0 !important;
  }

  .container.twoColumns>* {
    width: 90% !important;
  }

  .container.twoColumns {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .container.twoColumns>p {
    width: 90%;
  }

  .container.twoColumns>img {
    width: 90%;
    margin-bottom: 5%;
  }

  .paragraphs {
    width: 100%;
  }

  .right,
  .left {
    padding: 0;
  }

  .right {
    padding-top: 2rem;
  }

  .left {
    padding-bottom: 2rem;
  }

  #equipe {
    display: flex;
    flex-direction: column;
  }

  #equipe>img {
    width: 100%;
  }

  #equipe>aside {
    margin-top: 5%;
    margin-left: initial;
  }

  ul.twoColumns>li {
    padding-right: .5rem;
  }

  ul.pdf {
    padding-left: 1rem;
  }

  #carta {
    padding: 1rem 2rem;
  }

  .flex-none {
    display: none;
  }

  .none {
    display: flex !important;
  }

  .my-carousel-item a {
    font-size: 100% !important;
    padding: 1rem !important;
  }

  .my-carousel-prev,
  .my-carousel-next {
    top: 78% !important;
  }
}

/***************************************************************************/
@media (min-width: 300px) {

  #hero,
  #topFixedBG {
    background-attachment: fixed;
  }
}

@media (max-width: 992px) {
  #hero {
    margin-top: 60px;
    height: calc(100vh - 60px);
  }
}