.btn_misi
    {
        height: 100%
    }
    body
    {
        background-color: #E5E5E3;
    }
    .container-portada
    {
        width: 100%;
        height: 720px;
        position: relative;
        background-image:   url(../access/img/background.webp);
        background-repeat: no-repeat;
        background-size: 130%;
        animation: movimiento 7s infinite linear alternate;  
    }
    @keyframes movimiento{
        from{
            background-position: bottom left;
        }to{
            background-position: top right;
        }
    }



    .capa-gradient{
        width: 100%;
        height: 100%;
        position: absolute;
        background: -webkit-linear-gradient(left, black, #0672d0);
        opacity: 0.6;
    }
    .capa-gradient img
    {
        opacity: 1;
    }


    .container-details{
        width: 100%;
        max-width: 100%;
        position: relative;
        margin: auto;
    }


    .details{
        width: 100%;
        max-width: 600px;
        position: relative;
        top: 20px;
        color: white;
    }

    .details h1{
        font-size: 48px;
        font-weight: 100;
        margin-left: 10px;
        text-align: center;
        font-weight: bold;
        text-shadow: 5px 5px 5px blue;
        color: gold
    }

    .details p{
        margin-top: 5px;
        margin-left: 30px;
        padding-left: 30px;
        font-size: 20px;
        font-weight: 500;
        margin-left: 10px;
        text-shadow: 2px 3px 3px #000;
    }
    .imgLOGO
    {
        float: right;
        width: 50%;
        height: 50%;
    }
    .details button {
        padding: 10px 20px;
        font-size: 16px;
        background: none;
        border-style: none;
        border: 1px solid blue;
        color: gold;
        margin-top: 20px;
        transition: background 300ms;
        cursor: pointer;
        margin-left: 40px;
    }

    .details button:hover{
        background: gold;
        color: blue;
    }

    /* gradient |*/
    .container-usuarios
    {
        width: 100%;
    }

    .title
    {
        padding-top: 50px;
        text-align: center;
        font-size: 5em;
    }
    .DIV_USUARIOS
    {
        position: relative;
        background-repeat: no-repeat;
        background-position: center;opacity: 0.7;
    }
    .container
    {   
        padding-top: 10px;
    }
    .txtMisi
    {
        padding-right:10px; 
        padding-left:10px;
        text-align: justify;
        font-size: 1.2em;
    }

    .btnPlan
    {
        padding: 20px;
    }

    .rojo
    {
        color:blue;
        text-shadow: 1px 1px 1px black;
        padding-bottom: 0px;
        padding-top: 0px;
    }
    #exampleModalLabel
    {
        font-size: 2em;
        font-style: italic;
    }


    .fondojumbo_callcenter{
        background: gold;  /* fallback for old browsers */
        background: -webkit-radial-gradient( gold ,blue);  /* Chrome 10-25, Safari 5.1-6 */
        background: radial-gradient(blue ,gold ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        opacity: 0.9;
        /*background-image: url("../access/img/madera.jpg");*/
        /*background-position: 5% 40%;*/
        /*background-size: cover;*/
        /*background-repeat: no-repeat;*/
        color: gold;
        text-shadow: 5px 6px 6px #000;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        text-align: center;
    }

    .fondojumbo1{
        background: gold;  /* fallback for old browsers */
         background: -webkit-radial-gradient( gold ,blue);  /* Chrome 10-25, Safari 5.1-6 */
        background: radial-gradient(blue ,gold ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        opacity: 0.9;
        /*background-image: url("../access/img/madera.jpg");
        background-position:  5% 40%;
        background-size: cover;
        background-repeat: no-repeat;*/
        color: gold;
        text-shadow: 5px 6px 6px #000;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        text-align: center;
    }

    .btnDetalles
    {
        padding: 10px 20px;
        font-size: 16px;
        background: none;
        border-style: none;
        border: 1px solid #000;
        color: #000;
        margin-top: 20px;
        transition: background 300ms;
        cursor: pointer;
        margin-left: 10px;
        border-radius: 50px;
    }
    .btnDetalles:hover
    {
        background: blue;
        color: gold;
    }

    .titulo_cred
    {
        font-size: 4em;
        font-family: 'Noto Serif', serif;
    }
    .container-portada-credito 
    {
        width: 100%;
        height: 100%;
        position: relative;
        background-image:   url(../access/img/CREDITO.webp);
        background-repeat: no-repeat;
        background-size: 180%;
        animation: movimiento 20s infinite linear alternate;  
    }
    .container-portada-prepagado 
    {
        width: 100%;
        height: 50%;
        position: relative;
        background-image:   url(../access/img/monedas.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
        animation: movimiento 20s infinite linear alternate;  
    }
    .container-portada-afiliados 
    {
        width: 100%;
        height: 100%;
        position: relative;
        background-image:   url(../access/img/afiliados.png);
        background-repeat: no-repeat;
        background-size: 120%;
        animation: movimiento 20s infinite linear alternate;  
    }

    .container-portada-acerca 
    {
        width: 100%;
        height: auto;
        position: relative;
        background-image:   url(../access/img/icon.png);
        background-repeat: no-repeat;
        background-size: 80%;
        animation: movimiento 10s infinite linear alternate;  
    }
    .container-portada-pqr 
    {
        width: 100%;
        height: 250px;
        position: relative;
        background-image:   url(../access/img/pqr.jpg);
        background-repeat: no-repeat;
        background-size: 150%;
        animation: movimiento 10s infinite linear alternate;  
    }
    .details h2{
        font-size: 4em;
        font-weight: 100;
        margin-left: 10px;
        text-align: center;
    }


    .ulPrepa 
    {
        list-style: none; 
        margin-left: 10px; 
    }
    .liPrepa::before 
    { 
        content: "\2022"; 
        padding-right: 8px; 
        color: blue; 
        font-size: 1.5em;
    }
    .contenedor
    {
        padding: 80px;
        border:solid 2px black;
    }
    .input_afiliado
    {
        padding-right: 18%;
        padding-left:  18%;
        text-align: center;
    }

    .title_planes
    {
        font-size: 50px;
        font-weight: 100;
        margin-left: 10px;
        text-align: center;
        font-weight: bold;
        text-shadow:5px 5px 5px #000;
        color: gold
    }


    .ul_cred,.ul_cred_2
    {
        list-style: none; 
        margin-left: 10px; 
    }
    .ul_cred li::before 
    { 
        content: "\2022"; 
        padding-right: 8px; 
        color: gold; 
        font-size: 1.5em;
    }
    .ul_cred_2 li::before 
    { 
        content: "\2022"; 
        padding-right: 8px; 
        color: blue; 
        font-size: 1.5em;
    }

    .cambioColor
    {
         animation: cambioColor 0.9s infinite  alternate;  
    }
    
    @keyframes cambioColor{
        from{
            text-shadow: 2px 3px 3px #fff;
            color: black;
        }to{
            text-shadow: 2px 3px 3px black;
            color: blue;
            text-decoration: underline;
        }
    }
    
    .cambioColor2
    {
         animation: cambioColors 1s infinite  alternate;  
    }
    
    @keyframes cambioColors{
        from{
            text-shadow: 2px 3px 3px black;
            color: blue;
        }to{
            text-shadow: 2px 5px 5px blue;
            color: gold
        }
    }
   .cambioColor_hover:hover
   {
        color: gold;
        text-shadow: 1px 1px 3px #fff;
   }