@media screen and (max-width: 600px) {
        #menu {
          display: block;
          position: absolute;
          width: 100%;
          top: 70px;
          right: 0px;
          background: #000000bf;
          transition: 0.6s;
          z-index: 1000;
          height: 0px;
          visibility: hidden;
          overflow-y: hidden;
        }
        #nav.active #menu {
          height: calc(100vh - 70px);
          visibility: visible;
          overflow-y: auto;
        }
        #menu a {
          padding: 1rem 0;
          margin: 0 1rem;
        
        }
        #btn-mobile {
          display: flex;
          padding: 0.5rem 1rem;
          font-size: 1rem;
          border: none;
          background: none;
          cursor: pointer;
          gap: 0.5rem;
          color: #fff;
        }
        #hamburger {
          border-top: 2px solid;
          width: 20px;
        }
        #hamburger::after,
        #hamburger::before {
          content: '';
          display: block;
          width: 20px;
          height: 2px;
          background: currentColor;
          margin-top: 5px;
          transition: 0.3s;
          position: relative;
        }
        #nav.active #hamburger {
          border-top-color: transparent;
        }
        #nav.active #hamburger::before {
          transform: rotate(135deg);
        }
        #nav.active #hamburger::after {
          transform: rotate(-135deg);
          top: -7px;
        }
        #banner{
    
          display: flex;
          justify-content: center;
          width: 100%;
          background: url('../imagens/mae-filha.jpg') no-repeat center center;
          background-position: top center;
          background-size: cover;
          height: 440px;
      }
      section .botoes{
        display: flex;
        flex-direction: column;
        margin-top: 10vh;
        align-items: end;
        justify-content: left;
    }
        .body{
            display: flex;
            flex-direction: column;
        }
        .apropriado h1{
            display: flex;
            flex-direction: row;
            justify-content: center;
            text-align: center;
        }
        .apropriado p{
            text-align: left;
            padding: 5px;
            margin-bottom: 18px;
        }
      .apropriado h1{
        
        margin: 0px;
      }

        .img_acessibilidae{
          margin: 5px;
        }
        .quemdeve{
            margin-top: 40px;
            margin-left: 20px;
        }
        article{
            display: flex;
            flex-direction: column;
        }
        .img_acessibilidae{
            margin: auto;
            justify-content: center;
            align-items: center;
        }

        


        .container3{
          background: linear-gradient(to top,  #57cc99,  #c7f9cc);
          display: flex;
          overflow-x: scroll;
          padding: 24px;
          max-width: 800px;
          height: 550px;
          scroll-snap-type: x mandatory;
          scroll-padding: 24px;
          border-radius: 8px;
          gap: 12px;
          margin: 2rem auto;
      }

        #mob{
            display: flex;
            flex-direction: column;
        }
        #materias{
            display: flex;
            flex-direction: column;
        }
        .title{
            padding-left: 20px;
        }
        
        .copy{
          background-color:#000000;
          display: block;
          justify-content: center;
          padding: 20px;
      }
      .copy p{
        
          color: #fff;
      }
      .copy a{
        margin: 0px;
          font-size: 15px;
          text-decoration: none;
          color: #fff;
      }
      .copy a:hover{
          text-decoration: underline;
          color: #fff;
      }
      }
    



@media screen and (min-width:600px) and (max-width:768px) {
  #menu {
    display: block;
    position: absolute;
    width: 100%;
    top: 70px;
    right: 0px;
    background: #000000bf;
    transition: 0.6s;
    z-index: 1000;
    height: 0px;
    visibility: hidden;
    overflow-y: hidden;
  }
  #nav.active #menu {
    height: calc(100vh - 70px);
    visibility: visible;
    overflow-y: auto;
  }
  #menu a {
    padding: 1rem 0;
    margin: 0 1rem;
  
  }
  #btn-mobile {
    display: flex;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border: none;
    background: none;
    cursor: pointer;
    gap: 0.5rem;
    color: #fff;
  }
  #hamburger {
    border-top: 2px solid;
    width: 20px;
  }
  #hamburger::after,
  #hamburger::before {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    margin-top: 5px;
    transition: 0.3s;
    position: relative;
  }
  #nav.active #hamburger {
    border-top-color: transparent;
  }
  #nav.active #hamburger::before {
    transform: rotate(135deg);
  }
  #nav.active #hamburger::after {
    transform: rotate(-135deg);
    top: -7px;
  }
  #banner{

    display: flex;
    justify-content: center;
    width: 100%;
    background: url('../imagens/mae-filha.jpg') no-repeat top center;
    background-position: top center;
    background-size: cover;
    height: 440px;
}
section .botoes{
  display: flex;
  flex-direction: column;
  margin-top: 10vh;
  align-items: end;
  justify-content: left;
}
  .body{
      display: flex;
      flex-direction: column;
  }
  .apropriado h1{
      display: flex;
      flex-direction: row;
      justify-content: center;
      text-align: center;
  }
  .apropriado p{
      text-align: left;
      padding: 5px;
      margin-bottom: 18px;
  }
.apropriado h1{
  
  margin: 0px;
}

  .img_acessibilidae{
    margin: 5px;
  }
  .quemdeve{
      margin-top: 40px;
      margin-left: 20px;
  }
  article{
      display: flex;
      flex-direction: column;
  }
  .img_acessibilidae{
      margin: auto;
      justify-content: center;
      align-items: center;
  }

  


  .container3{
    background: linear-gradient(to top,  #57cc99,  #c7f9cc);
    display: flex;
    overflow-x: scroll;
    padding: 24px;
    max-width: 800px;
    height: 450px;
    scroll-snap-type: x mandatory;
    scroll-padding: 24px;
    border-radius: 8px;
    gap: 12px;
    margin: 2rem auto;
}

  #mob{
      display: flex;
      flex-direction: column;
  }
  #materias{
      display: flex;
      flex-direction: column;
  }
  .title{
      padding-left: 20px;
  }
  
  .copy{
    background-color:#000000;
    display: block;
    justify-content: center;
    padding: 20px;
}
.copy p{
  
    color: #fff;
}
.copy a{
  margin: 0px;
    font-size: 15px;
    text-decoration: none;
    color: #fff;
}
.copy a:hover{
    text-decoration: underline;
    color: #fff;
}
}

@media screen and (min-width:768px) and (max-width:992px){
  .img_acessibilidae{
   
    margin: 5px;
    margin-left: 20px;
    
   
  }
  article{
    display: flex;
    flex-direction: column;
}
.title{
  margin-left: 10px;
}
.copy{
  background-color:#000000;
  display: block;
  justify-content: center;
  padding: 20px;
}
.copy p{

  color: #fff;
}
.copy a{
margin: 0px;
  font-size: 15px;
  text-decoration: none;
  color: #fff;
}
.copy a:hover{
  text-decoration: underline;
  color: #fff;
}
}
@media screen and (min-width:1290px){
  section .botoes{
    display: none;
  }
}