/*RESPONSIVIDADE  telas até 1115px*/
@media screen and (max-width: 1115px) {

    body {
        /*Pra diminuir a imagem lateral*/
        background-size: 35% 100%; /*largura altura*/


    }


        /*SECTION COM CARTÕES*/


    /*Section com os cartões e inputs de dados (elemento pai*/
    .section_imgcartoes_dados {
        gap: 2rem;

    }

    /*IMAGENS DOS CARTÕES*/

    /*1º Article com as imagens dos cartões*/
    .article_img_cartoes {
        margin-right: 3rem;
        margin-left: -3rem;

    }


    /*Frente do cartão*/

    /*Logo da frente do cartão*/
    .logo_card {
        width: 4rem;
        left: 4rem;

    }

    

}







/*RESPONSIVIDADE CELULAR horizontal 932px*/

@media screen and (max-width: 932px) {

    body {
        /*Pra diminuir a imagem lateral*/
        background-size: 30% 100%; /*largura altura*/


    }

    /*SECTION COM CARTÕES*/


    /*Section com os cartões e inputs de dados (elemento pai*/
    .section_imgcartoes_dados {
        /*gap: .1rem;*/
        gap: 1rem;
        margin-top: 1rem;

    }

    /*IMAGENS DOS CARTÕES*/

    /*1º Article com as imagens dos cartões*/
    .article_img_cartoes {
        margin-right: 1rem;
        margin-left: -3rem;
        margin-top: -1rem;

    }


    
    /*Frente do cartão*/


    /*Imagem da frente do cartão*/
    .img_frente_cartao {
        width: 20rem;
        height: auto;

        margin-top: 1rem;
        margin-left: .2rem;
        margin-bottom: -.6rem;

    }

    /*Div imagem de trás do cartão*/
    .div_img_tras_cartao {
        margin-left: 8rem;
        margin-bottom: 0;


    }


    /*Logo da frente do cartão*/
    .logo_card {
        width: 3rem;
        left: 4rem;
        top: 1.6rem;

    }

    /*Número do display frente do cartão*/
    .numero_display_card  {
        font-size: 1.3rem;
        margin-top: -6rem;
    
    }

    /*Div com o nome e vencimento do cartão (div pai)*/
    .div_display_nome_vencto {
        font-size: .8rem;
        gap: .5rem;
    }



    /*Verso do cartão*/

    /*Imagem de trás do cartão*/
    .img_tras_cartao {
        width: 20rem;
        height: auto;

        margin-left: .7rem;
        margin-bottom: .1rem;
         
    }

    /*Div pra colocar 3 números no verso do cartão*/
    .cvc_display_card {


    }

    /*3 números verso do cartão*/
    #id-cvc_card_display {
        color: white;
        margin-top: 2rem;
        margin-left: -6rem;


    }



    /*INSERÇÃO DE DADOS*/
    
    /*2º Article com os dados a serem digitados pelo usuário*/
    .article_dados {
        margin-top: 3rem;
        margin-left: -4rem;

    }

    /*Todos label*/
    label {
        font-size: .68rem;
        margin-top: -2rem;
    }

    /*Todos inputs*/
    input {
        font-size: .7rem;
        margin-bottom: -1rem;
    }

    /*Todos os placeholders*/
    ::placeholder {
        font-size: .69rem;

    }

    /*Input nome*/
    #nome_titular {

        
    }

    /*Label Exp. Date (MM/YY)*/

     /*Input pro mês*/
     .input_mes {
        width: 2.8rem;
    
    }

    /*Input pro ano*/
    .input_ano {
        width: 2.8rem;

        margin-right: .1rem;
        margin-left: .1rem;

    }

    /*Div só com CVC*/
    /*Label CVC*/
    .label_cvc {
        margin-left: .1rem;
    
    }

    /*Input CVC*/
    .input_cvc {
        margin-left: .1rem;
        width: 8rem;


    }

    /*Botão*/
    .btn_tex {
        margin-top: -2rem;
        padding: .4rem 5rem .4rem 5rem;


    }

            /*FOOTER*/

    .div_footer {
        margin-top: 1rem;
        margin-bottom: 0;

        justify-content: center;
    }


}






/*RESPONSIVIDADE CELULAR horizontal 700px*/

@media screen and (max-width: 700px) {


    body {
        /*Pra diminuir a imagem lateral*/
        background-size: 35% auto; /*largura altura*/


    }

        /*SECTION COM CARTÕES*/


    /*Section com os cartões e inputs de dados (elemento pai*/
    .section_imgcartoes_dados {
        gap: 1rem;
        margin-top: 2rem;

    }

        /*IMAGENS DOS CARTÕES*/

    /*1º Article com as imagens dos cartões*/
    .article_img_cartoes {
        margin-right: 1rem;
        margin-left: -4rem;

    }

    /*Frente do cartão*/


    /*Imagem da frente do cartão*/
    .img_frente_cartao {
        width: 15rem;
        height: auto;

        margin-left: .2rem;
        margin-bottom: -.6rem;

    }

    /*Logo da frente do cartão*/
    .logo_card {
        top: 3rem;
        left: 3rem;

    }

    /*Número do display frente do cartão*/
    .numero_display_card {
        font-size: 1rem;
        margin-top: -4.3rem;
        /*width: 80%;*/


    }

    /*Div com o nome e vencimento do cartão (div pai)*/
    .div_display_nome_vencto {
        font-size: .7rem;
        margin-top: 1.6rem;

       
    }

    /*Vencimento do cartão na frente do cartão*/
    .vencto_card {
        margin-left: 3.2rem;
    }



    /*Verso do cartão*/

    /*Div imagem de trás do cartão*/
    .div_img_tras_cartao {
        margin-left: 8rem;
        margin-bottom: 0;


    }

    /*Imagem de trás do cartão*/
    .img_tras_cartao {
        width: 15rem;
        height: auto;

        margin-left: 1rem;
        margin-bottom: 2rem;
         
    }

    /*Div pra colocar 3 números no verso do cartão*/
    .cvc_display_card {


    }

    /*3 números verso do cartão*/
    #id-cvc_card_display {
        color: white;
        margin-top: 1.5rem;
        margin-left: -10rem;


    }


        /*INSERÇÃO DE DADOS*/
    
    /*2º Article com os dados a serem digitados pelo usuário*/
    .article_dados {
        margin-top: 1rem;
        align-items: center;
        margin-left: -11rem;

    }

    /*Todos label*/
    label { 
        text-transform: uppercase;
        /*font-size: .7rem;*/
        margin-top: -1rem;
        font-size: .6rem;


    }

    /*Todos inputs*/
    input {
        margin-top: .2rem;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding-left: .3rem;
        font-size: .7rem;
        margin-bottom: -1rem;


    }


    /*Todos os placeholders*/
    ::placeholder {
        padding-left: .3rem;
        font-size: .7rem;

    }


    /*Input nome*/
    #nome_titular { 
        padding-right: 6rem;
        /*padding-top: .3rem;
        padding-bottom: .3rem;*/

    }

    /*Input número cartão*/
    #numero_cartao {
        padding-right: 6rem;


    }

    /*Label Exp. Date (MM/YY)*/
    .label_exp_date {
        font-size: .6rem;

    }

    /*Input pro mês*/
    .input_mes {
        width: 3rem;

    }

    /*Input pro ano*/
    .input_ano {
        width: 3rem;

        margin-right: .1rem;
        margin-left: .2rem;

    }


    /*Div só com CVC*/
    .div_cvc {
        margin-left: 1rem;

    }


    /*Label CVC*/
    .label_cvc {
        /*font-size: .6rem;*/
    
   
    }

    /*Input CVC*/
    .input_cvc {
        width: 7rem;


    }

        /*BOTÃO*/
    
    .div_botao {

    }

    /*Botão*/
     .btn_tex {
        font-size: 1.1rem;
        letter-spacing: .1rem;
        padding: .4rem 5rem .4rem 5rem;

    }    
    

        /*FOOTER*/

    .div_footer {
        margin-top: -1rem;
        margin-bottom: 0;

    }

    /*Copyright*/
    .p_copyright {
        font-size: 10px; 
        text-align: center;


    }

    /*Autora*/
    .attribution {
        font-size: 10px; 
        text-align: center;


    }


}






/*RESPONSIVIDADE CELULAR vertical*/

@media screen and (max-width: 430px) {

    body {
        /*Imagem de fundo em cima e no centro*/
        background-image: url(../images/bg-main-mobile.png);
        background-repeat: no-repeat;
        background-size: 180% 240px;  /*largura altura*/
        background-position: top center;

        flex-direction: column;

        margin-right: 0;

        letter-spacing: 1px;
        


    }

        /*SECTION COM CARTÕES*/


    /*Section com os cartões e inputs de dados (elemento pai*/
    .section_imgcartoes_dados {
        flex-direction: column;

        margin-top: 2rem;

    }

        /*IMAGENS DOS CARTÕES*/

    /*1º Article com as imagens dos cartões*/
    .article_img_cartoes {
        /* Torna o contêiner do cartão o ponto de referência para a imagem de trás */
        position: relative;

    }


    /*Frente do cartão*/

    /*Div imagem da frente do cartão*/
    .div_img_frente_cartao {
        margin-top: 8rem;
        margin-left: 8rem;



    }


    /*Imagem da frente do cartão*/
    .img_frente_cartao {
        width: 20rem;

        /* Para manter o fluxo normal, sem sobreposição */
        position: relative; 

        /* A imagem da frente ficará sobre a imagem de trás */
        z-index: 1; 


    }

    
    /*Logo da frente do cartão*/
    .logo_card {
        left: 9rem;
        top: 9rem;

    }

    /*Número do display frente do cartão*/
    .numero_display_card {
        margin-left: 1.5rem;
        margin-top: -5rem;

        /*Para a numeração se sobrepor ao cartão*/
        position: absolute; 

        align-items: center;
    
    }
  
    /*Div com o nome e vencimento do cartão (div pai)*/
    .div_display_nome_vencto {
        display: flex;
        flex-direction: row;
        margin-top: -2rem;
        margin-left: 1rem;

        gap: -2rem;

    }

    /*Nome do display frente do cartão*/
    .nome_display_card {
        /*margin-left: -10rem;*/

        position: absolute;

        z-index: 2;
    }

    /*Vencimento do cartão na frente do cartão*/
    .vencto_card {
        margin-left: 12rem;

        position: absolute;

    }


     /*Verso do cartão*/

    /*Div imagem de trás do cartão*/
    .div_img_tras_cartao {
        margin-left: 10rem;
        margin-bottom: 0;
        margin-right: -2rem;
        margin-top: 2rem;
        
        
        /*Faz a imagem de trás aparecer em cima da imagem da frente*/
        position: absolute; 

        /*Ajuste a posição vertical conforme necessário*/
        top: 0; 

        /*Ajuste a posição horizontal conforme necessário*/
        left: 0; 


    }

   
    /*Imagem de trás do cartão*/
    .img_tras_cartao {
        /*position: absolute;*/

        width: 20rem;

        /*Garante que a imagem de trás seja sobreposta pela frente*/
        z-index: 2; 

    
    }

    /*div pra colocar os 3 números no verso do cartão*/
    .cvc_display_card {
        margin-left: 16rem;


   }

   /*3 números verso do cartão*/
    #id-cvc_card_display {
        color: white;
        margin-top: .2rem;
        margin-left: -.3rem;
            

   }




    /*INSERÇÃO DE DADOS*/
 
    /*2º Article com os dados a serem digitados pelo usuário*/
    .article_dados {
        text-align: left;
        margin-left: 2rem;
        margin-right: 0;
        margin-top: 4rem;

        max-width: 100%;


    }

    /*Todos label*/
    label {
        text-transform: uppercase;
        font-size: 1rem;

    }

    /*Todos inputs*/
    input {
        margin-top: .2rem;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding-left: .3rem;
        font-size: 1rem;


    }    


    /*Todos os placeholders*/
    ::placeholder {
        padding-left: .3rem;
        font-size: 1rem;
    
    }

    /*Input nome*/
    #nome_titular {
        padding-right: 12rem;
        padding-top: .3rem;
        padding-bottom: .3rem;

        width: auto;
    }

    /*Input número cartão*/
    #numero_cartao {
        padding-right: 12rem;
        padding-top: .3rem;
        padding-bottom: .3rem;

        width: auto;

    }

    /*Div com label e inputs Exp. Date e cvc (elemento pai do exp, date e cvc*/
    .div_exp_date_cvc {
        gap: 0;

    }

    /*Label Exp. Date (MM/YY)*/
    .label_exp_date {
        font-size: 1rem;
        

    }

    /*Div só com CVC*/
    .div_cvc {
        margin-left: 2rem;
        font-size: 1rem;

    }

    /*Label CVC*/
    .label_cvc {
        /*margin-left: 1rem;*/
    
   
    }


    /*Input CVC*/
    .input_cvc {
        width: 10rem;

    }


    /*BOTÃO*/

    .div_botao {
        margin-top: 4rem;
        margin-bottom: 8rem;
        align-items: center;
        justify-content: center;
    }


    /*Botão*/
    .btn_tex {
        padding: .4rem 12rem .4rem 8rem;


    }




     /*FOOTER*/

    footer {
        justify-content: center;
        text-align: center;
        align-items: center;
    }

    .div_footer {
        margin-top: 4rem;
        /*align-items: center;*/
        /*text-align: center;*/

    }

    /*Copyright*/
    .p_copyright {
        /*text-align: center;*/

    
    }

    /*Autora*/
    .attribution {
        /*text-align: center;*/

    }





   


}








































































































































































































/*Esse trabalho foi feito por Luciene Lima*/