.background-principal {
 height:100vh;
background-image:url(bgdesk.png);
background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

background-position: top ; }
@media (max-width: 1024px) {
    .background-principal {
        background: url(bgtablet.png) no-repeat content-box; height: 1024px
    } }
    @media (max-width: 425px) {
        .background-principal {
            background: url(bgmobile.png) no-repeat content-box; height: 812px
        }}
        @media (max-width: 320px) {
            .background-principal {
                background: url(bgmobile.png) no-repeat content-box; height: 568px
            }}
  body{
    margin: 0;
    padding: 0
  }
  .header{
      color: white;
      font-family: 'Roboto';
      font-size: 60px;
      padding-top: 7%;
      padding-left: 40px;

  }
  .subheader {
      color: white;
      font-family: 'Roboto';
      font-size: 20px;
      padding-left: 40px
  }
  .espaco {
    height: 10%
}

@media (max-width: 1024px) {
  .espaco {
      height: 1%
  }
}
@media (max-width: 425px) {
  .espaco {
      height: 1%
  }
}
  .responsive {
    width: 100%;
    max-width: 400px;
    height: auto;
    padding-left: 40px
      
  }
  @media (max-width: 425px) {
      .responsive {
          padding-left: 5px
      }
  }

  @media (max-width: 1024px) {
    .header {
        font-size: 42px
    } }
    @media (max-width: 425px) {
        .header {
            font-size: 28px; padding-top: 5%; padding-left: 5px
        } }
        @media (max-width: 425px) {
            .subheader {
                font-size: 18px; padding-top: 5%; padding-left: 5px
            } }