* {
        margin: 0;
        padding: 0;
        
    }
    html{
        /* a cada 1 rem será considerado 10 px*/
        font-size: 20px;
    }
    body {
        background-color: #212121;
        max-width: 1253 px;
        width:100%;
    }


      

    .texto1{
        max-width: 100%;
        margin-left: -2%;
        
    }
    .texto1 h1{

        text-align: center;
        margin-bottom: 3%;
        margin-top: 4em;
        color: #fff;
        font-size: 200%
    }
    .texto1 h2{
        text-align: center;
        margin-bottom: 20px;
        color: #fff;
        font-size: 150%;
    }
    .texto1 h3{
        color: #fff;
        text-align: center;
        margin-left: 5%;
        font-size: 120%;
    }

    h4 {
        text-align: center;
        margin-bottom: 20px;
        color: #fff;

    }

    .view {
        display: flex;
        flex-direction: column;
        margin-left: 23%;
    }

    .view1 {
        display: flex;
        flex-direction: column;
        margin-top: 5%;
   
    }
    #texto5{
      color: #fff;
      text-align: center;
      margin-top: 5%;
      font-size: 140%;
    }
    .app1 {

        width: 35%;
        height: 27%;

    }

    .app2 {
        width: 35%;
        height: 27%;
        margin-left: 36%;
        margin-top: -39%;
    }

    .app3 {
        width: 35%;
        height: 27%;
        margin-left: 33%;
    }


    #caracteristicas {
        text-align: center;
        margin-top: 5%
        
    }

    #basico {
        margin-left: 9%;
        font-size: 100%;
        text-align: left;
        color: darkorange;

    }

    .modelo {
        display: flex;
        flex-direction:row;
        margin-left: 3%;
        margin-right: 3%;;
        
    }

    .basico{
        flex: 1;
    }
    .plus{
      color: #fff;
    }
    .max {

        flex: 1;
    }

    .plus {
        flex: 1;
    }

    #texto {
        text-align:left;
        color: #fff;
        font-size: 90%;
    }
    #wifi{
        color: red;
        text-align: center;
        margin-bottom: 4%;
    }
    #frequentes{
        color:darkorange;
        margin-left: 2%;
        font-size: 90%;
        margin-right: 2%;
    }
    #resp_freq{
        color: #fff;
        margin-left: 4%;
        font-size: 90%;
        margin-right: 4%;
    }

    @media (min-width: 319px) and (max-width:373px){
      html{
        font-size: 11px;
      }
      .container{
        max-width: 375;
      }
      .modelo{
        flex-direction: column;
      }
      .view{
        flex-direction: column;
        margin-left: 18%;
      }
      .app1{
        width: 80%;
        height: 47%;
      }
      .app2{
        width: 80%;
        height: 47%;
        margin-top: 5%;
        margin-left: 0%;
      }
      .app3{
        width: 80%;
        height: 47%;
        margin-left: 10%;
      }
      #texto5{
        font-size: 110%;
      }
      #frequentes{
        text-align: justify;
      }
      #resp_freq{
        text-align: justify;
      }

    }

    @media (min-width: 374px) and (max-width:413px){
      .container{
        max-width: 375;
      }
      .modelo{
        flex-direction: column;
      }
      .view{
        flex-direction: column;
        margin-left: 18%;
      }
      .app1{
        width: 80%;
        height: 47%;
      }
      .app2{
        width: 80%;
        height: 47%;
        margin-top: 5%;
        margin-left: 0%;
      }
      .app3{
        width: 80%;
        height: 47%;
        margin-left: 10%;
      }
      #texto5{
        font-size: 110%;
      }
      #frequentes{
        text-align: justify;
      }
      #resp_freq{
        text-align: justify;
      }

    }

    @media (min-width: 414px) and (max-width:575px) {
      .container {
        max-width: 414px;
      }
      .modelo{
        flex-direction: column;
      }
      .view{
        flex-direction: column;
        margin-left: 18%;
      }
      .app1{
        width: 80%;
        height: 47%;
      }
      .app2{
        width: 80%;
        height: 47%;
        margin-top: 5%;
        margin-left: 0%;
      }
      .app3{
        width: 80%;
        height: 47%;
        margin-left: 10%;
      }
      #texto5{
        font-size: 110%;
      }

      #frequentes{
        text-align: justify;
      }
      #resp_freq{
        text-align: justify;
      }

    }

    @media (min-width: 576px) {
      .container {
        max-width: 540px;
      }
    }

    @media (min-width: 768px) {
      .container {
        max-width: 720px;
      }
      #frequentes{
        text-align: justify;
      }
      #resp_freq{
        text-align: justify;
      }
    }
    @media (min-width: 992px) {
      .container {
        max-width: 960px;
      }
    }
    @media (min-width: 10240px) {
      .container {
        max-width: 1024px;
      }  
    }  
    @media (min-width: 1200px) {
      .container {
        max-width: 1140px;
      }
    }