/************************************************************
 * Estilos login social.
 ************************************************************/

.abcRioButton {
    box-shadow: none !important;
}

.abcRioButtonLightBlue {
    background-size: 180px !important;
    height: 38px !important;
    width: 177px !important;
    margin-left: -5px !important;
}

.abcRioButtonLightBlue {
    background-size: 180px !important;
    height: 38px !important;
    width: 179px !important;
    margin-left: 15px;
}

.login_social img {
    display: block;
    border-radius: 3px !important;
    width: 200px;
}

@media only screen and (max-width: 500px) {
   .login_social {
        grid-template-columns: 100% !important;
        width: 100% !important;
    }

   .contenedorImagenDerecha {
    justify-self: center !important;
    
}

.contenedorImagenIzquierda {
    justify-self: center !important;
}

.txt {
    top: 470px !important;
    left: 50% !important;
}

div.formInputs {
    grid-gap: 0px !important;
    padding-top: 5px !important;
}
div.formInputs input {
        width: 270px !important;
    }

div.formInputs {
        grid-template-columns:  10% 80% 10% !important;
        width: 100% !important;
    }

    .enlacesExtra {
        grid-column: 2 / 3 !important;
        padding-left: 15px !important;
    }

    div.formInputs label {
        justify-self: start !important;
        grid-column: 2 / 3 !important;
        padding-left: 0px !important;
    }

    div.formInputs input {
        justify-self: center !important;
        grid-column: 2 / 3 !important;
        padding-left: 15px !important;
    }
    .iniciar-sesion-redes div {
        grid-template-columns:  100% !important;
        width: 100% !important;
    }
    .iniciar-sesion-redes p, a {
        justify-self: center !important;
        padding-top: 5px !important;
        margin-bottom: 5px !important;
    }

    .line {
        width: 220px !important;
    }
}

.login_social {
        display: grid;
        grid-template-columns: 50% 50%;
        width: 100%;
        margin: 45px auto 0 auto;
        align-content: center;
        column-gap: 15px;
    }

.contenedorImagenDerecha {
    justify-self: start;
    
}

.contenedorImagenIzquierda {
    justify-self: end;
}

.login_social:after {
    position: absolute;
    width: 414px;
    height: 70px;
    background: url(../img/versionpaywall/bisel-separador-bt-iniciarsesion.png) center center no-repeat;
    top: 185px;
    content: " ";
    left: 50%;
    margin-left: -207px;
    transform: rotateX(180deg);
    z-index: 0;
}

.login_social img:first-child {
    padding-top: 5px;
}

div.google_login {
    display: block;
}

.abcRioButtonLightBlue {
    background-image: url(https://www.elcolombiano.com/base-portlet/webrsrc/theme/52b2f6b1d38da5b6ea8e07bc7fa51d50.png) !important;
    background-repeat: no-repeat !important;
    background-size: 180px !important;
    height: 45px !important;
    width: 170px !important;
    border-radius: 5px !important;
    box-shadow: none;
}

.abcRioButtonIcon {
    display: none;
}

.abcRioButtonContents {
    display: none !important;
}

    .abcRioButtonContents:hover {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

.abcRioButton:hover {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.line {
    border-bottom: groove 2px #dbdbdb;
    margin-top: 20px;
    margin-bottom: 10px;
    opacity: 30%;
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 65px;
}

.txt {
    color: #999;
    position: absolute;
    top: 390px;
    left: 49.6%;
    padding: 0 10px;
    background-color: #EFEFEF;
}

.btnFacebook {
    display: inline;
    width: 165px !important;
    height: 40px !important;
    padding-top: 22px;
}

html * {
        font-family: 'Roboto Condensed', sans-serif !important;
    }

body {
    color: #696969;
    background-color: rgb(239, 239, 239) !important;
    margin: 0;
}


.contenedor {
    margin-top: 30px;
}

#header {
    height: 50px;
    background: url(/App_Pages/publico/img/versionpaywall/barrasuperior-fondo-madera.jpg);
    z-index: 10;
    background-size: cover;
    background-repeat: no-repeat;
}

header img {
    height: 40px;
    width: auto;
    padding-top: 2px;
}

h1 {
    font-size: 23px;
    text-align: center;
    color: #B1B1B1;
    margin: 0 auto;
}

h2 {
    font-size: 16px;
    text-align: center;
    color: #212121;
    margin: 0 auto;
}

h3 {
    font-size: 20px;
    text-align: center;
    color: #B1B1B1;
    margin-top: 40px;
    margin-bottom: 0px;
}

h4 {
    font-size: 15px;
    text-align: center;
    color: #212121;
    margin-top: 20px;
     margin-top: 0px;
    margin-bottom: 30px;
}

/*Estilos paso a paso*/

#pasos {
    margin: 30px 10% 0px 10%;
}

#paso-a-paso {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    list-style-type: none;
    padding-inline-start: 0px;
    text-align:center;
}
#paso-a-paso a {
    text-decoration: none;
}

#paso-a-paso li span {
    padding-top: 25px;
    text-transform: uppercase;
    color: #A7A7A7;
    font-weight: 600;
}
#paso-a-paso li.activo span {
    color: #353535;
}
#paso-a-paso:before {
    content: " ";
    width: 75%;
    height: 6px;
    margin: auto;
    background: -moz-linear-gradient(90deg, rgba(167,167,167,1) 0%, rgba(187,202,0,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(167,167,167,1) 0%, rgba(187,202,0,1) 100%);
    background: linear-gradient(90deg, rgba(167,167,167,1) 0%, rgba(187,202,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a7a7a7",endColorstr="#bbca00",GradientType=1);
    position: absolute;
    left: 58%;
    margin-left: -45%;
    border-radius: 10px;
}
#paso-a-paso:after {
    position: absolute;
    width: 414px;
    height: 70px;
    background: url(../img/versionpaywall/bisel-separador-bt-iniciarsesion.png) center center no-repeat;
    top: 86px;
    content: " ";
    left: 50%;
    margin-left: -207px;
    transform: rotateX(180deg);
    z-index: 0;
}
#paso-a-paso li {
    position: relative;
    padding-top: 25px;
}
#paso-a-paso li:before {
    content: " ";
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: #FFFFFE;
    position: absolute;
    border: 2px solid #C4C4C4;
    margin-top: -40px;
    left: 50%;
    margin-left: -15px;
}
#paso-a-paso li.activo:before{
    background: #BBCA01;
    border: 2px solid #fff;
}
#paso-a-paso li.seleccion:after {
    content: "1";
    position: absolute;
    top: 0;
    left: 50%;
    top: -7px;
    margin-left: -2px;
    color: #c4c4c4;
    font-weight: 700;
}
#paso-a-paso li.pago:after {
    content: "2";
    position: absolute;
    top: 0;
    left: 50%;
    top: -7px;
    margin-left: -2px;
    color: #c4c4c4;
    font-weight: 700;
}
#paso-a-paso li.confirmacion:after {
    content: "3";
    position: absolute;
    top: 0;
    left: 50%;
    top: -7px;
    margin-left: -2px;
    color: #c4c4c4;
    font-weight: 700;
}
#paso-a-paso li.activo:after {
    color: #fff!important;
}
#paso-a-paso + .pasos{
    top: 60px;
}
#paso-a-paso + .pasos.title-wrap1 {
    top: 20px;
}
.jcarousel-wrapper {
    border: none!important;
    background-color: transparent!important;
    box-shadow: none!important;
}

/*************************************************************/

#ctl00__cphPrincipal_Img_P001 h1 {
    text-align: center;
    font-size: 22px;
    color: #B1B1B1;
}

#ctl00__cphPrincipal_Img_P001 h2 {
    text-align: center;
    font-size: 16px;
    color: #212121;
}

#ctl00__cphPrincipal_Img_P001 img {
    display: block;
    margin: 0 auto;
}

#content p.titulo {
    padding: 30px 0px 5px 0px;
    color: #7B7B7B;
    width: 70%;
    margin: auto;
    text-align: center;
    text-transform: initial;
    font-size: 15px;
    line-height: 15px;
    letter-spacing: -0.1px;
    position: relative;
    font-weight: 500;
    text-align: center;
    font-size: 15px;
    color: #383838;
}

#content p.subtitulo {
    padding: 0px 0px 0px 0px;
    color: #7B7B7B;
    width: 70%;
    margin: auto;
    text-align: center;
    text-transform: initial;
    font-size: 15px;
    line-height: 15px;
    letter-spacing: -0.1px;
    position: relative;
    font-weight: 500;
    text-align: center;
    font-size: 14px;
    color: #868686;
}

#content p.subtitulo:last-of-type {
  padding: 0px 0px 20px 0px;
}

.frecuenciaStyle {
    display: block;
    margin: 0 auto;
    width: 92%;
    font-size: 15px;
    color: #666666;
    padding: 5px;
    border-radius: 5px;
}

.btnContinuar {
    background: #BCCA00;
    border: none;
    padding: 10px 15px;
    text-transform: uppercase;
    font-size: 15px;
    color: #FFFFFF;
    font-weight: bold;
    display: block;
    margin: 10px auto 0px;
    cursor: pointer;
    border-radius: 5px;
    z-index: 1;
    position: relative;
}

.detallesProducto {
    display: block;
    overflow: hidden;
    padding-inline-start: 10px;
}

    .detallesProducto li {
        font-size: 14px;
        white-space: normal;
        width: 90%;
        height: auto;
        list-style-position: outside;
        margin-left: 10px;
        margin-right: 10px;
        padding-left: 5px;
        text-transform: lowercase;
    }

        .detallesProducto li:first-letter {
            text-transform: capitalize;
        }

        .detallesProducto li::marker {
            content: '✓';
            margin-right: 2px;
            color: #BFC919;
            font-weight: bold;
        }

.footer-basic-centered {
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    padding: 21px;
    margin-top: -1%;
    font-size: 12px;
    position: relative;
}

.footer-basic-centered a {
    color: #909090;
    text-decoration: underline;
}

.formularioIngreso {
    width: 100%;
    margin: 0 auto;
}

    .formularioIngreso input {
        width: 305px;
        height: 42px;
        border-color: #DEDEDE;
        border: 1px solid #DEDEDE;
        border-radius: 3px;
    }

        .formularioIngreso input[type=checkbox] {
            width: 15px;
            margin: 0 auto;
            height: auto;
            display: inline;
        }

    .formularioIngreso label {
        color: #666666;
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
    }

    .formularioIngreso p {
        text-align: center;
    }

    .login_social a {
        justify-self: end;
    }

.btnEnviar {
    background-color: #BFC919;
    color: #ffffff;
    width: 126px;
    height: 42px;
    font-size: 16px;
    text-transform: uppercase;
}

div.formInputs {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 46% 54%;
    padding-top: 15px;
}

    div.formInputs label {
        justify-self: end;
        padding-right: 10px;
        padding-top: 15px;
    }

.enlacesExtra {
    grid-column: 2 / 3;
}


.iniciar-sesion-redes {
    text-align: center;
    margin-top: 40px;
}

.iniciar-sesion-redes input {
    width: 150px;
}

.txt-login {
    font-weight: bold;
    font-size: 13px;
}

.iniciar-sesion-redes div {
    display: grid;
    grid-template-columns: 55% 45%;
    width: 100%;
    column-gap: 15px;
}

.iniciar-sesion-redes p {
   justify-self: end;

}

.iniciar-sesion-redes a {
   justify-self: start;
   padding-top: 16px;
   color: #000000;
   font-size: 16px;
}

@media only screen and (max-width: 850px){
    .btnContinuar, #login .box input[type=submit], .btnEnviar, #content form input[type=submit] {
        -webkit-appearance: none; 
    }
    select,   textarea,   input[type="text"],   input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"]{
        font-size: 16px!important;
    }
    .resumenplan tr.content, .resumenplan tr.title{
        display: revert!important;
    }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    /* For landscape layouts only */
    /* botones generales  */
    input [type=submit]{
        -webkit-appearance: none;
    }
    /* inputs inicio de sesión */
    div.formInputs input {
        width: 50%!important;
    }
    /* zona ingreso info personal */
    div#ctl00__cphPrincipal_div1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .card .wrap {
        width: 95%;
    }
    .contenedor div .card .left .camp input, .contenedor div .card .right .camp input {
        width: 100%!important;
        padding-right: 0!important;
    }

    /* fix tablas */
    table.planes tr.title {
        display: block!important;
        padding: 0!important;
        margin: 0!important;
    }

    table.planes tr.title td {
        display: revert!important;
    }

    table.planes td {
        text-align: center!important;
    }

    table.planes tr {
        display: revert!important;
        padding: 0!important;
    }

    table.planes tr:nth-child(2) td {
        display: revert!important;
        width: 50%!important;
    }
    .planes td:nth-of-type(2):before{
        content: " "!important;
    }
    #ctl00__cphPrincipal_encabezadoCompraOk ul#paso-a-paso {
        display: block;
    }
    #ctl00__cphPrincipal_encabezadoCompraOk ul#paso-a-paso:after{
        top: 90px;
        transform: rotateX(0deg);
        height: 115px;
    }
    .compracorrecta span {
        width: max-content;
        position: absolute;
        left: 50%;
        top: 15px;
        transform: translateX(-50%);
    }
    #paso-a-paso li.compracorrecta:after {
        top: 0px;
    }
    #ctl00__cphPrincipal_tablaRespuestaBanco.planes td:nth-of-type(2):before {
        content: " "!important;
    }
    #ctl00__cphPrincipal_tablaRespuestaBanco tr td {
        width: 50%;
        padding: 10px 15px!important;
    }
    .formularioIngreso input[type=checkbox] {
        margin-left: 15px;
        margin-top: 3px;
    }
    .enlacesExtra {
        margin-top: 25px;
    }
    .resumenplan tr td:before{
        content: " "!important;
    }
    .resumenplan tr.title {
        display: revert!important;
    }
    .resumenplan tr.title td {
        width: auto!important;
        display: revert;
    }
}