/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

/* Código para centrar las cajas de Características, funciona bien menos en Safari. (Un div dentro de Caracteristica llamado "centrado") */
/*.tabla-precios .caracteristicas .centrado {
    position: relative;
    display: block;
    margin:0 auto;
    text-align: center;
    float:none;
}*/

.ordenar-por{
    float:left;
    width: 50%;
}

.ordenar-por > p{
    text-transform: uppercase;
    font-size: 12px;
    font-family: "Montserrat", sans-serif;
    color: #777;
    font-weight: bold;
    margin-bottom: 10px;
}

.ordenar-por .button-group{
    clear:both;
    margin-bottom: 10px;
}

.ordenar-por .nombre, .ordenar-por .servicios, .ordenar-por .precio{
    margin: 0 5px 10px 0;
    padding: 4px 15px;
    background-color: #E8E8E8;
    border: none;
    font-family: 'Montserrat', sans-serif;
    color: #777;
    width: auto;
    display: inline;
    font-weight: 500;
    float: left;
    text-transform: uppercase;
    font-size: 11px;
}

.button-active{
    background-color: #ccc!important;
}

.leyenda-iconos{
    border-radius: 0!important;
    background-color: #E8E8E8;
    margin-top: 33px !important;
    padding: 10px;
    float:right;
    width: 49%;
    border:none
}
.leyenda-iconos h5{
    color:#777;
    text-transform: uppercase;
    font-size:12px;
}

.leyenda-iconos td{
    font-size: 0.8em;
    line-height: 1.2em;
    font-family: 'Open Sans', sans-serif;
    color: #242424;
    border: none !important;
    padding: 6px !important;
}

.leyenda-iconos td img{
    min-width: 40px;
    max-width: 40px;
}

.tabla-precios {
    clear:both;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}

.tabla-precios .tabla-titulos{
    width: 100%;
}

.tabla-precios .tabla-titulos .empresa-titulo{
    width:20%;
    height: 70px;
    line-height: 70px;
}

.tabla-precios .tabla-titulos .categoria-titulo{
    width:5%;
    height: 70px;
    line-height: 70px;
}

.tabla-precios .tabla-titulos .alta-titulo, .tabla-precios .tabla-titulos .renovacion-titulo{
    width:14%;
    height: 70px;
    padding-top: 18px;
    line-height: 1.2em;
}

.tabla-precios .tabla-titulos .caracteristicas-titulo{
    width:27%;
    height: 70px;
    line-height: 70px;
}

.tabla-precios .tabla-titulos .atencion-cliente-titulo{width:14%;height: 70px; line-height: 1.2em; display: flex; display: -webkit-flex; display: -ms-flexbox; -webkit-justify-content: center; justify-content: center; -ms-flex-pack: center; align-items: center; -webkit-align-items: center; -ms-flex-align:center; }

.tabla-precios .tabla-titulos .cta-titulo{
    width:11%;
    height: 70px;
    text-indent: 9999px;
    line-height: 70px;
}

.tabla-precios .tabla-titulos span{
    float: left;
    color: #777;
    background-color: #EDEEF0;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    border-bottom: 3px solid #D8D9DD;
}
.tabla-precios .fila{clear: both;text-align: center;color: #444;font-weight: 700;overflow: hidden;}

.tabla-precios .fila:nth-child(even) >div{background-color: #F7F7F8;}
.tabla-precios .fila:nth-child(odd) >div{background-color: #EDEEF0;}

.tabla-precios .fila > div{float: left;}
.tabla-precios .logo{padding:10px; width:20%;height:80px; display: flex; display: -webkit-flex; display: -ms-flexbox; -webkit-justify-content: center; justify-content: center; -ms-flex-pack: center;}
.tabla-precios .logo img{max-height: 60px;}
.tabla-precios .categoria{height:80px;width:5%;display: flex; display: -webkit-flex; display: -ms-flexbox; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; align-items:center; -webkit-align-items: center; flex-direction: column; -webkit-flex-direction: column;}
.tabla-precios .alta, .tabla-precios .renovacion{height:80px;width: 14%;padding-top: 25px;}
.tabla-precios .caracteristicas{width: 27%;height: 80px;padding: 13px;display: flex; display: -webkit-flex; display: -ms-flexbox; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;}
.tabla-precios .idioma{clear: both;display: block;float: none;}

.tabla-precios .cta{
    width:11%;
    height: 80px;
    padding-top: 28px;
}

.tabla-precios .cta a{
    background-color: #BFD132;
    padding: 7px 10px;
    border-radius: 50px;
    color: #444444;
    text-transform: uppercase;
    font-size: 12px;
}

.tabla-precios .atencion-cliente{
    width: 14%;
    height: 80px;
    padding-top: 18px;
}

.tabla-precios .alta{
    font-size: 1.5em;
}

.tabla-precios .renovacion{
    font-size: 1.5em;
    font-weight: 400;
    color:#A8A8A8;
}

.tabla-precios .atencion-cliente .horario-atencion-cliente{clear: both; width: 100%;}

.tabla-precios .atencion-cliente img{margin-right:10px; width: 20px;opacity: .9;}

.tabla-precios .idioma-atencion-cliente{color: #a8a8a8;margin-left: 20px;}

.tabla-precios .atencion-cliente p{clear: both;}


.dns-icon, .dnssec-icon, .mb-icon, .mail-icon, .estadisticas-icon{
    height: 50px;
    width: 50px;
    margin: 0 2px;
    float: left;
    border-radius: 50px;
    font-weight: normal;
    background: none;
    border:2px solid;
}
.tabla-precios .caracteristicas .special-row{border:none;}
.tabla-precios .caracteristicas .dns-icon{border-color: #505D73; color: #505D73; padding:12px 2px;}
.tabla-precios .caracteristicas .dnssec-icon{border-color: #999999; color: #999999; padding:9px 2px;}
.tabla-precios .caracteristicas .dnssec-icon p{line-height: 1.2em;}
.tabla-precios .caracteristicas .mb-icon{border-color: #76C3B0; color: #76C3B0; padding:9px 3px; line-height: 1em;}
.tabla-precios .caracteristicas .mb-icon span{display: block; background-color: transparent; border: none; width:100%;}
.tabla-precios .caracteristicas .mail-icon{border-color: #C75C5C; color: #C75C5C; padding:6px 3px; line-height: 1em;}
.tabla-precios .caracteristicas .mail-icon span{display: block;}
.tabla-precios .caracteristicas .mail-icon img{width:15px; display: block; margin:0 auto; margin-top:2px;}
.tabla-precios .caracteristicas .estadisticas-icon{border-color: #ce9761; color: #ce9761; padding: 12px 3px;}
.tabla-precios .caracteristicas .estadisticas-icon img{width: 20px; margin:0 auto;}

.fila-hover{background-color: #e3e5e8!important;}

/*Botones Ordenador por*/
.arrow-up{
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid #777;
    float: right;
    margin: 8px 0 0 5px;
}
.arrow-down{
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #777;
    float: right;
    margin: 8px 0 0 5px;
}

.submit-div { cursor: pointer; }

/*SOLO ESCRITORIO*/
@media only screen and (min-width: 980px) {

    .fila .categoria h6,
    .fila .alta h6,
    .fila .renovacion h6,
    .fila .caracteristicas h6,
    .fila .idioma h6,
    .fila .atencion-cliente h6{display: none;}

}

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

    .tabla-precios .atencion-cliente img{
        margin-right:6px;
        width: 20px;
    }
    .tabla-precios .atencion-cliente p{
        font-size: 0.9em;
    }

}

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

    .fila .categoria h6,
    .fila .alta h6,
    .fila .renovacion h6,
    .fila .caracteristicas h6,
    .fila .idioma h6,
    .fila .atencion-cliente h6{font-family: 'Montserrat', sans-serif; color:#A8A8A8; text-align: center; font-weight: 400; display: block;}

    .fila .alta h6,.fila .renovacion h6{font-size: 0.5em;}
    .fila .categoria h6, .fila .caracteristicas h6, .fila .atencion-cliente h6{font-size: 0.8em;}
    .fila .idioma h6{font-size: 0.65em;}
    .fila .categoria h6{padding-bottom: 3px;}

    .categoria-titulo, .alta-titulo, .atencion-cliente-titulo, .caracteristicas-titulo, .idioma-titulo, .renovacion-titulo, .empresa-titulo, .cta-titulo{
        display: none!important;
    }

    .tabla-precios .logo{
        width: 100%;
        border-bottom: 3px solid #D8D9DD;
    }

    .tabla-precios .categoria{
        clear:both;
        width: 20%;
    }

    .tabla-precios .alta{
        font-size: 1.5em;
        width: 50%;
        padding-top: 15px;
    }

    .tabla-precios .renovacion{
        font-size: 1.5em;
        width: 50%;
        padding-top: 12px;
    }

    .tabla-precios .alta, .tabla-precios .renovacion{ height: 60px;}

    .tabla-precios .caracteristicas{
        width: 100%;
        clear: both;
        padding:0;
        height: 90px;
        flex-direction: column; -webkit-flex-direction: column;
        -webkit-justify-content: center; justify-content: center;
    }

    .tabla-precios .caracteristicas .special-row{border:none; display: flex; display: -webkit-flex; -webkit-justify-content: center; justify-content: center; margin-top:5px;}

    .tabla-precios .idioma{
        height: 90px;
        display: inline;
    }

    .tabla-precios .atencion-cliente{
        width: 50%;
        line-height: 1.2em;
        padding-top: 20px;
        height: 90px;
        margin-bottom: 50px;
    }

    .tabla-precios .cta{
        width:50%;
        height: 90px;
        padding-top: 30px;
    }

    .leyenda-iconos{
        width: 100%;
        margin: 10px 0px 20px 0px!important;
    }

    .ordenar-por{
        width: 100%;
    }

}