body{
    background-image: url('../images/Fondo-con-textura.png');
}


@font-face {   
    src: url('../fonts/DIN\ Pro\ 400.otf');
    font-family: din;
}

@font-face {
    font-family: dinB;
    src: url('../fonts/DIN\ Pro\ Bold\ 700.otf');
}

@font-face {
    font-family: dinL;
    src: url('../fonts/DIN\ Pro\ Light\ 300.otf');
}

@font-face {
    font-family: dinC;
    src: url('../fonts/DIN\ Pro\ Condensed\ Medium\ 500.otf');
}

@font-face {
    font-family: dinM;
    src: url('../fonts/DIN\ Pro\ Medium\ 500.otf');
}

.lCostco{
    width:8%; padding-right: 10%;
}
.lCitibanamex{
    width:10%;
}
.lVISA{
    width:6%; padding-left: 10%;
}


.fondo{
    background-image: url('../images/Fondo-con-textura.png');
    background-attachment: local;
   background: local;
    
    background-repeat: no-repeat;
    background-size: cover;
   
}

.fondo2{
    background-color: white;
}

.element{
    position: -webkit-sticky; 
    position: sticky; 
    top: -13%;
    background-image: url('../images/Textura-fondo-transparente22');
    
}


#BBVA{
    display:block;
}
#Bancomer{
    display:none;
}
#Banamex{
    display:none;
}
#Santander{
    display:none;
}
#HSBC{
    display:none;
}
#Citibanamex{
    display:none;
}
.cbCostco{
    width: 290px;
    height: 60px;
    background-color: rgb(36, 98, 179);
    color: white;
    text-align: center;
    font-size: 20px;
    border-radius: 4px;
}



table{
    text-align: center;
    font-family: monospace;
    border: 4px solid;
    border-color: rgb(168, 166, 166);
    border-radius: 1%;
    border-collapse: collapse;
    width: 48%;
    margin-left: 26%;
}
.tabla{
    margin-left: 0%;
}

table body{
    margin: 15px;
    padding: 15px;
    border-color: rgb(168, 166, 166);
    font-family: din;
}

tr{
    margin: 15px;
    padding: 15px;
    border: solid 5px rgb(168, 166, 166);
    font-family: din;
}
td{
    margin: 5px;
    padding: 55px;
    border: solid 5px rgb(168, 166, 166);
    font-size: larger;
    font-weight: bold;
    text-align: justify;
}

.c1{
    background-color: rgb(34, 104, 196);
    color: cornsilk;
}
.c2{
    background-color: rgb(219, 219, 219);
    color: rgb(58, 58, 58);
}
.c3{
    background-color: rgb(218, 228, 247);;
    color: rgb(58, 58, 58);
}
.c4{
    background-color: rgb(248, 244, 244);
    color: rgb(58, 58, 58);
}
.p1{
    color: rgb(42, 87, 172);
    font-size: 120%;
}

.desc{
    display: none;
}

.selectOption{
    width: 290px;
    height: 60px;
    background-color: rgb(36, 98, 179);
    color: white;
    text-align: center;
    font-size: 20px;
    border-radius: 4px;
}
.tCitibanamex{
    width: 14%; 
    margin-right: 26%; 
    position: relative; 
    margin-bottom: -14.7%;
}

.tBBVA{
    width: 13%; 
    margin-left: 24%; 
    margin-bottom: 0%; 
    margin-top: 6%; 
    position: relative;
}

.btnCitibanamex{
    margin-right: 9%; 
    padding-top: 0%; 
    margin-bottom: -1.8%;
}

.beneficio{
    color: rgb(109, 109, 109);
margin-top: -1%;
font-family: 'Courier New', Courier, monospace;
margin-bottom: -3%;

}


 @media screen and (min-width: 320px) and (max-width: 374px){
    .selectOption{
        width: 50%;
    height: 35%;
    background-color: rgb(36, 98, 179);
    color: white;
    text-align: center;
    font-size: 12px;
    border-radius: 4px;
    /* margin-left: 26%; */
    /* margin-bottom: 2%; */
    position: absolute;
    right: 0%;
    }

    .tCitibanamex{
        width: 34%;
    /* margin-right: 26%; */
    /* position: relative; */
    /* margin-bottom: -28%; */
    position: absolute;
    left: 11%;
    top: 18%;
    }

    .tBBVA{
        width: 33%;
        margin-left: 55%;
        margin-bottom: 0%;
        margin-top: 6%;
        position: relative;
    }

    .btnCitibanamex{
        margin-right: -22%; 
    /* padding-top: 2%; */
    /* margin-bottom: -1.5%; */
    width: 51%;
    position: absolute;
    right: 71%;
    }



    .beneficios{
    color: rgb(109, 109, 109);
    margin-top: -1%;
    font-family: 'Courier New', Courier, monospace;
    margin-bottom: -3%;
    padding-bottom: 8%;
    }



    .element{
        position: -webkit-sticky; 
        position: sticky; 
        top: -3%;
        background-image: url('../images/Textura-fondo-transparente22');
        
    }
    



    .lCostco{
        width:14%; padding-right: 18%;
    }
    .lCitibanamex{
        width:28%;
    }
    .lVISA{
        width:12%; padding-left: 14%;
    }





table{
    text-align: center;
    font-family: monospace;
    border: 4px solid;
    border-color: rgb(168, 166, 166);
    border-radius: 1%;
    border-collapse: collapse;
    width: 48%;
    margin-left: 0%;
}
.tabla{
    margin-left: 0%;
}

table body{
    margin: 0px;
    padding: 5px;
    border-color: rgb(168, 166, 166);
}

tr{
    margin: 5px;
    padding: 5px;
    border: solid 5px rgb(168, 166, 166);
}
td{
    margin: 5px;
    padding: 5px;
    border: solid 5px rgb(168, 166, 166);
    font-size:100%;
    font-weight: bold;
    text-align: justify;
}

.c1{
    background-color: rgb(34, 104, 196);
    color: cornsilk;
}
.c2{
    background-color: rgb(219, 219, 219);
    color: rgb(58, 58, 58);
}
.c3{
    background-color: rgb(218, 228, 247);;
    color: rgb(58, 58, 58);
}
.c4{
    background-color: rgb(248, 244, 244);
    color: rgb(58, 58, 58);
}
.p1{
    color: rgb(42, 87, 172);
    font-size: 120%;
}

    }

    

    @media screen and (min-width: 375px) and (max-width: 413px){
        .selectOption{
            width: 50%;
        height: 35%;
        background-color: rgb(36, 98, 179);
        color: white;
        text-align: center;
        font-size: 12px;
        border-radius: 4px;
        /* margin-left: 26%; */
        /* margin-bottom: 2%; */
        position: absolute;
        right: 0%;
        }
    
        .tCitibanamex{
            width: 34%;
        /* margin-right: 26%; */
        /* position: relative; */
        /* margin-bottom: -28%; */
        position: absolute;
        left: 11%;
        top: 18%;
        }
    
        .tBBVA{
            width: 33%;
            margin-left: 55%;
            margin-bottom: 0%;
            margin-top: 6%;
            position: relative;
        }
    
        .btnCitibanamex{
            margin-right: -22%; 
        /* padding-top: 2%; */
        /* margin-bottom: -1.5%; */
        width: 51%;
        position: absolute;
        right: 71%;
        }
    
    
    
        .beneficios{
        color: rgb(109, 109, 109);
        margin-top: -1%;
        font-family: 'Courier New', Courier, monospace;
        margin-bottom: -3%;
        padding-bottom: 8%;
        }
    
    
    
        .element{
            position: -webkit-sticky; 
            position: sticky; 
            top: -3%;
            background-image: url('../images/Textura-fondo-transparente22');
            
        }
        
    
    
    
        .lCostco{
            width:16%;
            padding-right: 6%;
        }
        .lCitibanamex{
            width:32%;
        }
        .lVISA{
            width:12%; padding-left: 6%;
        }
    
    
    
    
    
    table{
        text-align: center;
        font-family: monospace;
        border: 4px solid;
        border-color: rgb(168, 166, 166);
        border-radius: 1%;
        border-collapse: collapse;
        width: 48%;
        margin-left: 0%;
    }
    .tabla{
        margin-left: 0%;
        position: absolute;
        left: 10%;
    }
    
    table body{
        margin: 0px;
        padding: 5px;
        border-color: rgb(168, 166, 166);
    }
    
    tr{
        margin: 5px;
        padding: 5px;
        border: solid 5px rgb(168, 166, 166);
    }
    td{
        margin: 5px;
        padding: 5px;
        border: solid 5px rgb(168, 166, 166);
        font-size:100%;
        font-weight: bold;
        text-align: justify;
    }
    
    .c1{
        background-color: rgb(34, 104, 196);
        color: cornsilk;
    }
    .c2{
        background-color: rgb(219, 219, 219);
        color: rgb(58, 58, 58);
    }
    .c3{
        background-color: rgb(218, 228, 247);;
        color: rgb(58, 58, 58);
    }
    .c4{
        background-color: rgb(248, 244, 244);
        color: rgb(58, 58, 58);
    }
    .p1{
        color: rgb(42, 87, 172);
        font-size: 120%;
    }
    
        }
    


        @media screen and (min-width: 414px) and (max-width: 736px){
            .selectOption{
                width: 50%;
            height: 36%;
            background-color: rgb(36, 98, 179);
            color: white;
            text-align: center;
            font-size: 14px;
            border-radius: 4px;
            /* margin-left: 26%; */
            /* margin-bottom: 2%; */
            position: absolute;
            right: 0%;
            }
        
            .tCitibanamex{
                width: 34%;
            /* margin-right: 26%; */
            /* position: relative; */
            /* margin-bottom: -28%; */
            position: absolute;
            left: 11%;
            top: 18%;
            }
        
            .tBBVA{
                width: 33%;
                margin-left: 55%;
                margin-bottom: 0%;
                margin-top: 6%;
                position: relative;
            }
        
            .btnCitibanamex{
                margin-right: -22%; 
            /* padding-top: 2%; */
            /* margin-bottom: -1.5%; */
            width: 51%;
            position: absolute;
            right: 71%;
            }
        
        
        
            .beneficios{
            color: rgb(109, 109, 109);
            margin-top: -1%;
            font-family: 'Courier New', Courier, monospace;
            margin-bottom: -3%;
            padding-bottom: 8%;
            }
        
        
        
            .element{
                position: -webkit-sticky; 
                position: sticky; 
                top: -3%;
                background-image: url('../images/Textura-fondo-transparente22');
                
            }
            
        
        
        
            .lCostco{
                width:16%; padding-right: 18%;
            }
            .lCitibanamex{
                width:26%;
            }
            .lVISA{
                width:14%; padding-left: 14%;
            }
        
        
        
        
        
        table{
            text-align: center;
            font-family: monospace;
            border: 4px solid;
            border-color: rgb(168, 166, 166);
            border-radius: 1%;
            border-collapse: collapse;
            width: 48%;
            margin-left: 0%;
        }
        .tabla{
            margin-left: 0%;
            position: absolute;
            left: 14%;
        }
        
        table body{
            margin: 0px;
            padding: 5px;
            border-color: rgb(168, 166, 166);
        }
        
        tr{
            margin: 5px;
            padding: 5px;
            border: solid 5px rgb(168, 166, 166);
        }
        td{
            margin: 5px;
            padding: 5px;
            border: solid 5px rgb(168, 166, 166);
            font-size:100%;
            font-weight: bold;
            text-align: justify;
        }
        
        .c1{
            background-color: rgb(34, 104, 196);
            color: cornsilk;
        }
        .c2{
            background-color: rgb(219, 219, 219);
            color: rgb(58, 58, 58);
        }
        .c3{
            background-color: rgb(218, 228, 247);;
            color: rgb(58, 58, 58);
        }
        .c4{
            background-color: rgb(248, 244, 244);
            color: rgb(58, 58, 58);
        }
        .p1{
            color: rgb(42, 87, 172);
            font-size: 120%;
        }
        
            }
        

    @media screen and (min-width: 768px) and (max-width: 900px){
        .selectOption{
            width: 50%;
        height: 35%;
        background-color: rgb(36, 98, 179);
        color: white;
        text-align: center;
        font-size: 25px;
        border-radius: 4px;
        /* margin-left: 26%; */
        /* margin-bottom: 2%; */
        position: absolute;
        right: 0%;
        }
    
        .tCitibanamex{
            width: 34%;
        /* margin-right: 26%; */
        /* position: relative; */
        /* margin-bottom: -28%; */
        position: absolute;
        left: 11%;
        top: 18%;
        }
    
        .tBBVA{
            width: 33%;
            margin-left: 55%;
            margin-bottom: 0%;
            margin-top: 6%;
            position: relative;
        }
    
        .btnCitibanamex{
            margin-right: -22%; 
        /* padding-top: 2%; */
        /* margin-bottom: -1.5%; */
        width: 51%;
        position: absolute;
        right: 71%;
        }
    
    
    
        .beneficios{
        color: rgb(109, 109, 109);
        margin-top: -1%;
        font-family: 'Courier New', Courier, monospace;
        margin-bottom: -3%;
        padding-bottom: 8%;
        }
    
    
    
        .element{
            position: -webkit-sticky; 
            position: sticky; 
            top: -3%;
            background-image: url('../images/Textura-fondo-transparente22');
            
        }
        
    
    
    
        .lCostco{
            width:14%; padding-right: 18%;
        }
        .lCitibanamex{
            width:24%;
        }
        .lVISA{
            width:13%; padding-left: 14%;
        }
    
    

        p{
            padding-top: 10%;
        }


    
    
    
    table{
        text-align: center;
        font-family: monospace;
        border: 4px solid;
        border-color: rgb(168, 166, 166);
        border-radius: 1%;
        border-collapse: collapse;
        width: 100%;
        height: 90%;
        margin-left: 0%;
    }
    .tabla{
        margin-left: 0%;
    }
    
    table body{
        margin: 0px;
        padding: 5px;
        border-color: rgb(168, 166, 166);
    }
    
    tr{
        margin: 5px;
        padding: 5px;
        border: solid 5px rgb(168, 166, 166);
    }
    td{
        margin: 5px;
        padding: 5px;
        border: solid 5px rgb(168, 166, 166);
        font-size:100%;
        font-weight: bold;
        text-align: justify;
    }
    
    .c1{
        background-color: rgb(34, 104, 196);
        color: cornsilk;
    }
    .c2{
        background-color: rgb(219, 219, 219);
        color: rgb(58, 58, 58);
    }
    .c3{
        background-color: rgb(218, 228, 247);;
        color: rgb(58, 58, 58);
    }
    .c4{
        background-color: rgb(248, 244, 244);
        color: rgb(58, 58, 58);
    }
    .p1{
        color: rgb(42, 87, 172);
        font-size: 120%;
    }
    




        }
    
        
        @media screen and (min-width: 920px) and (max-width: 1210px){
            .lCostco{
                width:12%; padding-right: 10%;
            }
            .lCitibanamex{
                width:18%;
            }
            .lVISA{
                width:9%; padding-left: 14%;
            }
            
            
            .fondo{
                background-image: url('../images/Fondo-con-textura.png');
                background-attachment: local;
               background: local;
                
                background-repeat: no-repeat;
                background-size: cover;
               
            }
            
            .fondo2{
                background-color: white;
            }
            
            .element{
                position: -webkit-sticky; 
                position: sticky; 
                top: -8%;
                background-image: url('../images/Textura-fondo-transparente22');
                
            }
            
            
            #BBVA{
                display:block;
            }
            #Bancomer{
                display:none;
            }
            #Banamex{
                display:none;
            }
            #Santander{
                display:none;
            }
            #HSBC{
                display:none;
            }
            #Citibanamex{
                display:none;
            }
            .cbCostco{
                width: 290px;
                height: 60px;
                background-color: rgb(36, 98, 179);
                color: white;
                text-align: center;
                font-size: 20px;
                border-radius: 4px;
            }
            
            
            
            table{
                text-align: center;
                font-family: monospace;
                border: 4px solid;
                border-color: rgb(168, 166, 166);
                border-radius: 1%;
                border-collapse: collapse;
                width: 78%;
                margin-left: 12%;
            }
            .tabla{
                margin-left: 0%;
            }
            
            table body{
                margin: 15px;
                padding: 15px;
                border-color: rgb(168, 166, 166);
            }
            
            tr{
                margin: 15px;
                padding: 15px;
                border: solid 5px rgb(168, 166, 166);
            }
            td{
                margin: 5px;
                padding: 55px;
                border: solid 5px rgb(168, 166, 166);
                font-size: larger;
                font-weight: bold;
                text-align: justify;
            }
            
            .c1{
                background-color: rgb(34, 104, 196);
                color: cornsilk;
            }
            .c2{
                background-color: rgb(219, 219, 219);
                color: rgb(58, 58, 58);
            }
            .c3{
                background-color: rgb(218, 228, 247);;
                color: rgb(58, 58, 58);
            }
            .c4{
                background-color: rgb(248, 244, 244);
                color: rgb(58, 58, 58);
            }
            .p1{
                color: rgb(42, 87, 172);
                font-size: 120%;
            }
            
            .desc{
                display: none;
            }
            
            .selectOption{
                width: 290px;
                height: 60px;
                background-color: rgb(36, 98, 179);
                color: white;
                text-align: center;
                font-size: 20px;
                border-radius: 4px;
            }
            .tCitibanamex{
                width: 24%; 
                margin-right: 35%; 
                position: relative; 
                margin-bottom: -21.7%;
            }
            
            .tBBVA{
                width: 23%; 
                margin-left: 34%; 
                margin-bottom: 0%; 
                margin-top: 6%; 
                position: relative;
            }
            
            .btnCitibanamex{
                margin-right: 9%; 
                padding-top: 0%; 
                margin-bottom: -2.5%;
            }
            
            .beneficio{
                color: rgb(109, 109, 109);
            margin-top: -1%;
            font-family: 'Courier New', Courier, monospace;
            margin-bottom: -3%;
            
            }
        
    
    
    
    
            }