/*@import "./vendors/google-font/css.css?family=Roboto:300,400,500,600,700";*/

/*---------------------------------------------------------------------
GENERAL
---------------------------------------------------------------------*/
html {
    font-size: 14px;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: "roboto", sans-serif, "Arial";
    line-height: 140%;
    transition: all ease 300ms;
    color: #666666;
    background-color: #F8F3F0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.17em;
}

h4 {
    font-size: 1em;
}

h5 {
    font-size: .83em;
}

h6 {
    font-size: .67em;
}


th {
    background-color: #3399ff;
    color: #e6e6e6;
    text-align: center;
}

.letras {
    vertical-align: middle !important;
}

.label.badge-pill {
    border-radius: 1em;
    margin: 0 0.25em;
}

table#example.dataTable tbody tr:hover {
    background-color: #cce0ff;
    font-weight: bold;
}

table#example.dataTable tbody tr:hover > .sorting_1 {
    background-color: #cce0ff;
    font-weight: bold;
}


p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

a, a:hover, a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.margin-top-10 {
    margin-top: 10px;
}

.topnav {
    background-color: #004f9e;
    width: 100%;
    height: 59px;
    position: fixed;
    z-index: 1;
}

.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

.ahover:hover {
    background: #fafafa !important;
}

.foot {
    overflow: hidden;
    background-color: #fafafa;
    width: 100%;
    height: 100px;
    position: fixed;
    z-index: 1;
    top: 80%;
}

.foot a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    text-decoration: none;
    font-size: 17px;
}

.foot a:hover {
    background: #f2f2f2;
    color: black;
}

.foot a.active {
    background-color: #4CAF50;
    color: white;
}


.navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cc0000;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #00b33c;
}

input:focus + .slider {
    box-shadow: 0 0 1px #00b33c;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 20px;
}

.slider.round:before {
    border-radius: 50%;
    /*background-image: url("img/icon-toggle.png");*/
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: contain;
}

/* ---------------------------------------------------------------------------------------
    SIDEBAR STYLE (Menú izquierda)
--------------------------------------------------------------------------------------- */

#menu-toggle {
    position: fixed;
    top: 88px;
    left: 200px;
    color: #ffffff;
    z-index: 999;
    transition: all 0.3s;
}

#menu-toggle.toggled {
    left: 5px;
    color: #004f9e;
}

#sidebar {
    width: 230px;
    position: fixed;
    top: 86px;
    left: 0;
    height: 94vh;
    z-index: 998;
    background: #004f9e;
    color: #f2f2f2;
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.3s;
}

#sidebar.toggled {
    padding-left: 0;
    width: 0;
}

#sidebar .sidebar-header {
    padding: 8px;
    background: #FFF;
    border-right: 15px solid #ffd000;
}

#sidebar ul.components {
    padding: 35px 0;
    border-bottom: 1px solid #FFF;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 18px;
    font-size: 1.1em;
    display: block;
}

#sidebar ul li a:hover {
    color: #7386D5;
    background: #fff;
}

#sidebar ul li.active > a,
a[aria-expanded="true"] {
    color: #fff;
    border-right: 8px solid #ffd000;
    background: #0073e6;
}

/* ---------------------------------------------------
    CONTENT STYLE (Contenido)
----------------------------------------------------- */
#content {
    width: calc(100% - 250px);
    padding-top: 48px;
    padding-left: 50px;
    min-height: 100vh;
    transition: all 0.3s;
    position: absolute;
    top: 70px;
    right: 0;
}

#content.toggled {
    width: 100%;
}

#content.active {
    width: 100%;
}

.label.badge-pill {
    border-radius: 1em;
    margin: 0 0.25em;
}

/*table#example.dataTable tbody tr:hover {
    background-color: #cce0ff;
    font-weight: bold;
}

    table#example.dataTable tbody tr:hover > .sorting_1 {
        background-color: #cce0ff;
        font-weight: bold;
    }*/

.btn-patito {
    background: #ffd000;
    color: #595959;
}

.centrado {
    margin: 0 auto;
    display: flex;
}

.menulateral {
    float: left !important;
    margin-left: 205px;
}

.menusalir {
    float: left !important;
    margin-left: 333px;
}

.contenido {
    width: 100%;
}

.msalir {
    margin-left: 300px;
}

.navbar-nav > li > a {
    padding-top: 1px;
    padding-bottom: 0px;
}

.dropbtn {
    background-color: #004f9e;
    color: white;
    padding: 0px !important;
    font-size: 14px !important;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fafafa;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 2;
    text-align: left;
}

.dropdown-content a {
    color: black;
    padding-top: 50px;
    text-decoration: none;
    display: block;
    width: 100%;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #fafafa
}

.dropdown:hover .dropdown-content {
    display: block;
}

/*.dropdown:hover .dropbtn {
    background-color: #fafafa;
    color: black;
}*/

/*
    JQUERY VALIDATE STYLE
*/


#form1 label.error {
    margin-left: 10px;
    width: auto;
    display: inline;
    color: #fa2c2c
}

/*------------------------------------------------------------------------------------------------
FONTS
------------------------------------------------------------------------------------------------*/

/*-- Roboto --*/
@font-face {
    font-family: 'roboto';
    src: url("fonts/roboto-light/Roboto-Light-webfont.eot");
    src: url("fonts/roboto-light/Roboto-Light-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/roboto-light/Roboto-Light-webfont.woff") format("woff"), url("fonts/roboto-light/Roboto-Light-webfont.ttf") format("truetype"), url("fonts/roboto-light/Roboto-Light-webfont.svg#robotolight") format("svg");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'roboto';
    src: url("fonts/roboto-light-italic/Roboto-LightItalic-webfont.eot");
    src: url("fonts/roboto-light-italic/Roboto-LightItalic-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/roboto-light-italic/Roboto-LightItalic-webfont.woff") format("woff"), url("fonts/roboto-light-italic/Roboto-LightItalic-webfont.ttf") format("truetype"), url("fonts/roboto-light-italic/Roboto-LightItalic-webfont.svg#robotolight_italic") format("svg");
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'roboto';
    src: url("fonts/roboto-bold/Roboto-Bold-webfont.eot");
    src: url("fonts/roboto-bold/Roboto-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/roboto-bold/Roboto-Bold-webfont.woff") format("woff"), url("fonts/roboto-bold/Roboto-Bold-webfont.ttf") format("truetype"), url("fonts/roboto-bold/Roboto-Bold-webfont.svg#robotobold") format("svg");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'roboto';
    src: url("fonts/roboto-bold-italic/Roboto-BoldItalic-webfont.eot");
    src: url("fonts/roboto-bold-italic/Roboto-BoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/roboto-bold-italic/Roboto-BoldItalic-webfont.woff") format("woff"), url("fonts/roboto-bold-italic/Roboto-BoldItalic-webfont.ttf") format("truetype"), url("fonts/roboto-bold-italic/Roboto-BoldItalic-webfont.svg#robotobold") format("svg");
    font-weight: 700;
    font-style: italic;
}

/*-- Roboto Condensed --*/
@font-face {
    font-family: 'roboto-condensed';
    src: url("fonts/roboto-condensed-light/RobotoCondensed-Light-webfont.eot");
    src: url("fonts/roboto-condensed-light/RobotoCondensed-Light-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/roboto-condensed-light/RobotoCondensed-Light-webfont.woff") format("woff"), url("fonts/roboto-condensed-light/RobotoCondensed-Light-webfont.ttf") format("truetype"), url("fonts/roboto-condensed-light/RobotoCondensed-Light-webfont.svg#oboto_condensedlight") format("svg");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'roboto-condensed';
    src: url("fonts/roboto-condensed-light-italic/RobotoCondensed-LightItalic-webfont.eot");
    src: url("fonts/roboto-condensed-light-italic/RobotoCondensed-LightItalic-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/roboto-condensed-light-italic/RobotoCondensed-LightItalic-webfont.woff") format("woff"), url("fonts/roboto-condensed-ligh-italic/RobotoCondensed-LightItalic-webfont.ttf") format("truetype"), url("fonts/roboto-condensed-light-italic/RobotoCondensed-LightItalic-webfont.svg#roboto_condensedlight_italic") format("svg");
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'roboto-condensed';
    src: url("fonts/roboto-condensed-bold/RobotoCondensed-Bold-webfont.eot");
    src: url("fonts/roboto-condensed-bold/RobotoCondensed-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/roboto-condensed-bold/RobotoCondensed-Bold-webfont.woff") format("woff"), url("fonts/roboto-condensed-bold/RobotoCondensed-Bold-webfont.ttf") format("truetype"), url("fonts/roboto-condensed-bold/RobotoCondensed-Bold-webfont.svg#roboto_condensedbold") format("svg");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'roboto-condensed';
    src: url("fonts/roboto-condensed-bold-italic/RobotoCondensed-BoldItalic-webfont.eot");
    src: url("fonts/roboto-condensed-bold-italic/RobotoCondensed-BoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/roboto-condensed-bold-italic/RobotoCondensed-BoldItalic-webfont.woff") format("woff"), url("fonts/roboto-condensed-bold-italic/RobotoCondensed-BoldItalic-webfont.ttf") format("truetype"), url("fonts/roboto-condensed-bold-italic/RobotoCondensed-BoldItalic-webfont.svg#roboto_condensedbold_italic") format("svg");
    font-weight: 700;
    font-style: italic;
}

/*------------------------------------------------------------------------------------------------
ICONOS MENÚ IZQUIERDA
------------------------------------------------------------------------------------------------*/

.icon-productos:before {
    width: 18px;
    height: 18px;
}

.icon-direcciones:before {
    content: "\e90b";
    width: 18px;
    height: 18px;
}

.icon-historico:before {
    content: "\e93d";
    width: 18px;
    height: 18px;
    font-size: 16px;
}

.icon-resumen:before {
    content: "\e922";
    width: 18px;
    height: 18px;
    font-size: 16px;
}

.icon-requerimientos-solicitudes:before {
    content: "\e91e";
    width: 18px;
    height: 18px;
    font-size: 16px;
}

.icon-planes-tarifarios:before {
    content: "\e926";
    width: 18px;
    height: 18px;
    font-size: 16px;
}

.icon-artefactos:before {
    content: "\e921";
    width: 18px;
    height: 18px;
    font-size: 16px;
}

.icon-persona:before {
    content: "\e920";
    width: 18px;
    height: 18px;
}

.icon-persona-blue:before {
    content: "\e920";
    color: #042b87;
    width: 18px;
    height: 18px;
}

.icon-persona-small:before {
    content: "\e920";
    font-size: 12px;
    width: 12px;
    height: 12px;
}

.icon-mis-mensaje:before {
    content: "\e923";
    width: 18px;
    height: 18px;
}

.icon-mis-suscripciones:before {
    content: "\e91f";
    width: 18px;
    height: 18px;
}

/*------------------------------------------------------------------------------------------------
ICONOS MENÚ IZQUIERDA BLANCOS
------------------------------------------------------------------------------------------------*/

.icon-productos-white:before {
    width: 18px;
    height: 18px;
}

.icon-direcciones-white:before {
    content: "\e90b";
    width: 18px;
    height: 18px;
}

.icon-historico-white:before {
    content: "\e93d";
    color: #fff;
    width: 18px;
    height: 18px;
}

.icon-requerimientos-solicitudes-white:before {
    content: "\e91e";
    width: 18px;
    height: 18px;
}

.icon-artefactos-white:before {
    content: "\e921";
    color: #fff;
    width: 18px;
    height: 18px;
}

/*------------------------------------------------------------------------------------------------
ICONOS SOLICITUDES Y RECLAMOS
------------------------------------------------------------------------------------------------*/

.icon-fuga:before {
    content: "\e921";
    color: #042b87;
    font-size: 70px;
    width: 70px;
    height: 70px;
}

.icon-reparacion-artefacto:before {
    content: "\e936";
    color: #042b87;
    font-size: 70px;
    width: 70px;
    height: 70px;
}

.icon-problemas-pago:before {
    content: "\e935";
    color: #042b87;
    font-size: 70px;
    width: 70px;
    height: 70px;
}

.icon-otros-asuntos:before {
    content: "\e934";
    font-size: 70px;
    width: 70px;
    height: 70px;
}

.icon-check:before {
    content: "\e902";
    color: #3C763D;
    width: 15px;
    height: 15px;
}

.icon-error:before {
    content: "\e91a";
    color: #A94442;
    width: 15px;
    height: 15px;
}

/*------------------------------------------------------------------------------------------------
ICONOS REDES SOCIALES
------------------------------------------------------------------------------------------------*/

.icon-facebook:before {
    content: "\e924";
    color: #fff;
    width: 18px;
    height: 18px;
}

.icon-twitter:before {
    content: "\e925";
    color: #fff;
    width: 18px;
    height: 18px;
}

.icon-youtube:before {
    content: "\e928";
    color: #fff;
    width: 18px;
    height: 18px;
}

/*------------------------------------------------------------------------------------------------
ICONOS CARRO COMPRA
------------------------------------------------------------------------------------------------*/

.icon-eliminar-producto:before {
    content: "\e91a";
    color: #042b87;
    width: 16px;
    height: 16px;
}

.icon-info:before {
    content: "\e91b";
    color: #042b87;
    width: 24px;
    height: 24px;
}

.icon-repetir:before {
    width: 15px;
    height: 15px;
    transition: all ease 300ms;
}

.icon-ok:before {
    content: "\e933";
    color: #fff;
    width: 10px;
    height: 8px;
    margin-left: 10px;
}

/*------------------------------------------------------------------------------------------------
ICONOS MENSAJE ERROR/EXITO
------------------------------------------------------------------------------------------------*/

.icon-error-conos:before {
    content: "\e938";
    color: #FFCF00;
    width: 60px;
    height: 50px;
}

.icon-exito:before {
    content: "\e933";
    color: #FFCF00;
    border: 3px solid #FFCF00;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 17px;
    display: inline-block;
    line-height: 40px;
}

.icon-more-info:before {
    content: "\e92d";
    color: #8994BB;
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/*------------------------------------------------------------------------------------------------
ICONOS BOLETA
------------------------------------------------------------------------------------------------*/

.icon-boleta:before {
    content: "\e955";
    font-size: 19px;
    width: 19px;
    height: 21px;
}

/*------------------------------------------------------------------------------------------------
ICONOS FOOTER
------------------------------------------------------------------------------------------------*/

.icon-servicio-cliente:before {
    content: "\e93a";
    font-size: 42px;
    width: 36px;
    height: 42px;
    color: #F5A603;
}

.icon-emergencias:before {
    content: "\e939";
    color: #042b87;
    width: 36px;
    height: 42px;
    font-size: 35px;
}

.icon-detalle {
    font-family: "roboto", sans-serif, "Arial" !important;
}

.icon-detalle:before {
    font-family: "icomoon" !important;
    content: "\e903";
    color: #042b87;
    height: 18px;
    width: 18px;
    text-indent: -9999px;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    margin-right: 5px;
}

/*------------------------------------------------------------------------------------------------
OTROS BOTONES
------------------------------------------------------------------------------------------------*/

.btn-desplegable {
    background-color: #ffffff;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    color: #8994BB;
    font-size: 1rem;
    font-weight: 400;
    position: relative;
    height: 40px;
    width: 100%;
}

.btn-desplegable:hover {
    box-shadow: inset 0 1px 3px 1px rgba(0, 0, 0, 0.2);
}

.btn-desplegable:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #8994BB;
    margin-top: -4px;
    right: 10px;
    position: absolute;
    transition: -webkit-transform ease 300ms;
    transition: transform ease 300ms;
    transition: transform ease 300ms, -webkit-transform ease 300ms;
    top: 50%;
}

.btn-desplegable.active {
    color: #ffffff;
    background-color: #666666;
}

.btn-desplegable.active .icon-element {
    background-position: -10px -30px;
}

.btn-desplegable.active:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #ffffff;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.btn-desplegable.btn-producto {
    border-radius: 0 5px 5px 0;
    box-shadow: none;
    text-align: left;
}

.btn-desplegable.btn-producto:hover {
    box-shadow: inset 0 1px 3px 1px rgba(0, 0, 0, 0.2);
}

.btn-n-pedido {
    margin-bottom: 17px;
    height: 44px;
    padding: 12px;
}

.btn-direcciones {
    float: left;
    line-height: 120%;
    padding: 10px 15px;
    width: 21.10727%;
}

/*------------------------------------------------------------------------------------------------
OTROS DROPDOWN
------------------------------------------------------------------------------------------------*/

.drop-down-filtro {
    background: linear-gradient(to bottom, #fff 0%, #ccc 90%, #ccc 100%);
    border: 1px solid #999999;
    border-radius: 50%;
    cursor: pointer;
    height: 20px;
    width: 20px;
    padding: 0;
}

.drop-down-filtro:focus {
    outline: none;
}

.drop-down {
    position: relative;
    cursor: pointer;
}

.drop-down .icon-more-blue {
    height: 17px;
    width: 17px;
    margin: 0 auto;
}

.dropit {
    background-color: #ffffff;
    max-height: 0;
    visibility: hidden;
    transition: all ease 300ms;
    z-index: 99;
    opacity: 0;
}

.dropit ul {
    list-style: none;
    padding: 16px 0;
}

.dropit ul li {
    padding: 0 30px;
}

.dropit ul li a {
    color: #8994BB;
    display: block;
    line-height: 200%;
    text-decoration: none;
    padding: 10px;
    font-weight: 300;
}

.dropit ul li a:hover {
    font-weight: 700;
}

.dropit.active {
    max-height: 500px;
    visibility: visible;
    opacity: 1;
}

.navegacion-lateral .dropit ul li a {
    border-bottom: 1px solid #F0E9E1;
}

.navegacion-lateral .dropit ul li a:hover, .navegacion-lateral .dropit ul li a.current {
    font-weight: 700;
}

.navegacion-lateral .dropit ul li:last-child a {
    border: none;
}

.dropit-user {
    right: 0;
    position: absolute;
    top: 45px;
    background-color: #F0E9E1;
    border-radius: 5px;
    width: 250px;
}

.dropit-user .icon-element {
    margin-right: 10px;
}

.dropit-pedido {
    right: 0;
    position: absolute;
    top: 48px;
    width: 100%;
    border-radius: 5px;
}

.dropit-filtro {
    border-radius: 5px;
    right: -5px;
    position: absolute;
    top: 32px;
    width: 200px;
}

.dropit-blue {
    background-color: #404A61;
}

.dropit-blue ul {
    padding: 0;
}

.dropit-blue ul li {
    border-bottom: 1px solid #4E5673;
    padding: 0;
}

.dropit-blue ul li:last-child {
    border-bottom: none;
}

.dropit-blue ul li a {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 300;
    padding: 5px 15px;
}

.dropit-blue:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #404A61;
    position: absolute;
    right: 10px;
    top: -8px;
}

.show-drop {
    padding: 12px;
}

/*------------------------------------------------------------------------------------------------
HEADER (Menú superior)
------------------------------------------------------------------------------------------------*/

header {
    background-color: #F3EEEB;
    border-bottom: 1px solid #DDDDDD;
    margin-bottom: 20px;
}

.header-desktop .header-top {
    background: url("../img/borde-top.jpg") no-repeat top left #ffffff;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
    padding: 0 9px;
}

.header-desktop .header-top .logo {
    float: left;
    margin-top: 5px;
    padding: 18px 0 0 20px;
    text-align: left;
    width: 18.43253%;
}

.header-desktop .header-top .logo h1 {
    display: inline-block;
    margin-bottom: 0;
    width: 61.90476%;
}

.header-desktop .header-top .logo h1 img {
    width: 100%;
}

.header-desktop .header-top .nav-segmentos {
    float: left;
    margin-top: 5px;
    width: 62.44637%;
}

.header-desktop .header-top .nav-segmentos ul {
    list-style: none;
    text-align: center;
    width: 100%;
}

.header-desktop .header-top .nav-segmentos ul li {
    float: left;
    padding: 11px 0;
    text-align: center;
    width: 12.33333%;
}

.header-desktop .header-top .nav-segmentos ul li a {
    color: #666666;
    font-size: 1.14286rem;
    font-weight: 300;
    text-decoration: none;
    vertical-align: middle;
    background-color: #ffffff;
}

.header-desktop .header-top .nav-segmentos ul li:focus {
    /*background-color: #000;*/
}

.header-desktop .header-top .nav-segmentos ul li:last-child {
    margin-right: 0;
}

.header-desktop .header-top .nav-segmentos ul li.current {
    background-color: #F8F3F0;
    position: relative;
    height: 69px;
}

.header-desktop .header-top .nav-segmentos ul li.current:after {
    content: '';
    background-color: #F8F3F0;
    bottom: -8px;
    display: block;
    height: 8px;
    position: absolute;
    width: 100%;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
}

.header-desktop .header-top .nav-user {
    float: right;
    margin-top: 5px;
    padding: 19px 0;
    display: table;
}

.header-desktop .header-top .nav-user .icon-user {
    display: table-cell;
    height: 30px;
    text-align: right;
    vertical-align: middle;
    width: 30px;
}

.header-desktop .header-top .nav-user .icon-user img {
    height: auto;
    width: 100%;
}

.header-desktop .header-top .nav-user .drop-user {
    float: left;
    position: relative;
    width: 170px;
    margin: 0 15px 0 8px;
}

.header-desktop .header-bottom {
    padding: 5px 15px;
}

.header-desktop .header-bottom span {
    display: inline-block;
    vertical-align: middle;
}

.dropit-ul-one {
    display: inline;
}

.dropit-ul-full {
    display: none;
}

.dropit-ul-full .btn_salir_sup {
    display: none;
}

/*-------------------------------------------------------------------------------------------
HEADER MOBILE (Menú superior)
-------------------------------------------------------------------------------------------*/

/*.header-mobile {
    display: none;
    background: url("../img/borde-top.jpg") no-repeat top left #ffffff;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
    padding: 23px 15px 18px;
    width: 100%;
}

    .header-mobile .logo {
        display: inline-block;
        vertical-align: middle;
        width: 71.03448%;
    }

        .header-mobile .logo h1 {
            display: block;
            margin-bottom: 0;
            text-align: left;
            font-size: 0;
        }

            .header-mobile .logo h1 img {
                width: 48.54369%;
                height: auto;
            }

    .header-mobile .nav-mob {
        display: inline-block;
        text-align: right;
        width: 27.58621%;
    }

        .header-mobile .nav-mob a {
            text-decoration: none;
        }

    .header-mobile .carro-compras {
        display: inline-block;
        position: relative;
        vertical-align: middle;
        width: 36px;
    }

        .header-mobile .carro-compras .numero {
            background-color: #FFCF00;
            border-radius: 100%;
            height: 16px;
            line-height: 100%;
            padding: 1px 0;
            position: absolute;
            right: 0;
            text-align: center;
            top: 0;
            width: 16px;
        }

    .header-mobile .show-menu-mob {
        background-repeat: no-repeat;
        display: inline-block;
        height: 20px;
        vertical-align: middle;
        width: 25px;
        margin-left: 10px;
        text-decoration: none;
    }

        .header-mobile .show-menu-mob:before {
            font-family: 'icomoon' !important;
            content: "\e908";
            color: #042b87;
            font-size: 20px;
        }

    .header-mobile .menu-mob {
        background-color: #ffffff;
        display: none;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 87.5%;
        z-index: 3;
    }

        .header-mobile .menu-mob .close-menu-mob {
            cursor: pointer;
            display: inline-block;
            height: 22px;
            position: absolute;
            right: 20px;
            top: 38px;
            transition: -webkit-transform ease 300ms;
            transition: transform ease 300ms;
            transition: transform ease 300ms, -webkit-transform ease 300ms;
            width: 22px;
            text-decoration: none;
        }

            .header-mobile .menu-mob .close-menu-mob:hover {
                -webkit-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                transform: rotate(180deg);
            }

            .header-mobile .menu-mob .close-menu-mob:before {
                font-family: 'icomoon' !important;
                content: "\e909";
                color: #042b87;
                font-size: 20px;
            }

        .header-mobile .menu-mob .datos-usuario {
            background-color: #ffffff;
            padding: 36px 20px 22px;
            text-align: center;
            width: 100%;
        }

            .header-mobile .menu-mob .datos-usuario .nombre-usuario {
                color: #8994BB;
                margin-bottom: 0;
            }

        .header-mobile .menu-mob .selecion-producto {
            background-color: #F8F3F0;
            padding: 15px 20px;
            width: 100%;
        }

            .header-mobile .menu-mob .selecion-producto select {
                width: 100%;
                margin-bottom: 30px;
                padding-right: 25px;
            }

            .header-mobile .menu-mob .selecion-producto p {
                margin: 0 0 15px;
            }

            .header-mobile .menu-mob .selecion-producto ul {
                list-style: none;
            }

                .header-mobile .menu-mob .selecion-producto ul li {
                    margin-bottom: 15px;
                }

                    .header-mobile .menu-mob .selecion-producto ul li a {
                        color: #666666;
                        font-weight: 400;
                        position: relative;
                        text-decoration: none;
                        padding-left: 18px;
                    }

                        .header-mobile .menu-mob .selecion-producto ul li a.active {
                            color: #042b87;
                        }

                            .header-mobile .menu-mob .selecion-producto ul li a.active:before {
                                content: '';
                                display: block;
                                width: 0;
                                height: 0;
                                border-top: 4px solid transparent;
                                border-bottom: 4px solid transparent;
                                border-left: 6px solid #042b87;
                                right: 10px;
                                position: absolute;
                                transition: -webkit-transform ease 300ms;
                                transition: transform ease 300ms;
                                transition: transform ease 300ms, -webkit-transform ease 300ms;
                                background-repeat: no-repeat;
                                content: '';
                                display: inline-block;
                                left: 0;
                                top: 6px;
                            }

        .header-mobile .menu-mob .icon-mis-suscripciones {
            background-position: -180px -217px;
        }

        .header-mobile .menu-mob .icon-direcciones {
            background-position: -37px -218px;
        }

        .header-mobile .menu-mob .icon-persona {
            background-position: -130px -219px;
        }

        .header-mobile .menu-mob .icon-mis-mensaje {
            background-position: -152px -219px;
        }

        .header-mobile .menu-mob .dropit li a {
            border-bottom: 1px solid #F0E9E1;
        }

            .header-mobile .menu-mob .dropit li a.current {
                font-weight: 700;
            }

        .header-mobile .menu-mob .nav-segmentos {
            padding: 30px 20px;
        }

            .header-mobile .menu-mob .nav-segmentos ul li {
                margin-bottom: 25px;
            }

                .header-mobile .menu-mob .nav-segmentos ul li.current a {
                    color: #042b87;
                }

                .header-mobile .menu-mob .nav-segmentos ul li a {
                    color: #666666;
                    text-decoration: none;
                    vertical-align: bottom;
                }

.bg-cortina {
    background-color: rgba(0, 0, 0, 0.2);
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}*/

/*----------------------------------------------------------------------------------------
OTROS
----------------------------------------------------------------------------------------*/
.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #244ea8;
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: #fff;
    color: #7386D5;
}

a.article,
a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
}

/*-----------------------------------------------------------------------------------------
FOOTER
-----------------------------------------------------------------------------------------*/

/*
footer {
    background-color: #ffffff;
    width: 100%;
}
*/

/*----------------------------------------------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------------------------------------------*/

@media (max-width: 768px) {
    #menu-toggle {
        left: 20px;
        color: #004f9e;
    }

    #menu-toggle.toggled {
        left: 200px;
        color: #ffffff;
    }

    #sidebar {
        width: 0;
        padding-left: -250px;
    }

    #sidebar.toggled {
        position: fixed;
        width: 230px;
        padding-left: 0;
        background: #004f9e;
        color: #f2f2f2;
    }

    #content {
        width: 100%;
    }

    #content.active {
        width: calc(100% - 250px);
    }

    #nav-segmentos {
        display: none;
    }

    .drop-down-movil {
        display: inline;
    }

    .dropit-ul-one {
        display: none;
    }

    .dropit-ul-full {
        display: inline;
    }

    .dropit-ul-full .btn_salir_sup {
        display: inline-block;
        margin-top: 4em;
    }
}

/*@media only screen and (max-width: 736px) {
    .only-on-mobile {
        display: block !important;
    }

    .hide-if-mobile {
        display: none !important;
    }

    .full-if-mobile {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
}*/

@media (max-width: 900px) {

    .menulateral {
        float: left !important;
        margin-left: 50px !important;
    }

    .navbar-nav > li > a {
        padding-top: 1px;
        padding-bottom: 0px;
        font-size: 20px !important;
        padding-bottom: 37px !important;
        padding-top: 18px !important;
    }

    .borrar {
        display: none !important;
    }

    .especial {
        width: 100% !important;
        /* float: left; */
        text-align: left !important;
    }

    .container-fluid > .navbar-collapse, .container-fluid > .navbar-header, .container > .navbar-collapse, .container > .navbar-header {
        margin-right: -15px;
        margin-left: -15px;
        background: #004f9e;
    }
}

@media (max-width: 1370px) {


    .msalir {
        margin-left: 2px !important;
    }

    .menulateral {
        float: left !important;
        margin-left: 205px;
    }

    .topnav a {
        float: left;
        color: #f2f2f2;
        text-align: center;
        padding: 0px;
        text-decoration: none;
        font-size: 14px;
    }

    .navbar-nav > li > a {
        padding-top: 1px;
        padding-bottom: 0px;
        font-size: 13px;
    }

    .menusalir {
        float: left !important;
        margin-left: 50px;
    }

    .contenido {
        width: 100%;
    }
}

@media only screen and (max-width: 960px) {
    .navegacion-lateral {
        width: 32.7024221453%;
    }
}

@media only screen and (max-width: 1171px) {
    .header-desktop .header-bottom .content-hb {
        width: 70%;
    }

    .header-desktop .header-bottom .direccion span {
        display: none;
    }

    .header-desktop .header-bottom .direccion .drop-down .btn-desplegable {
        width: 100%;
    }
}

@media only screen and (max-width: 960px) {
    .header-desktop .nav-segmentos .icon-element {
        display: none;
    }

    .header-desktop .nav-user .icon-user {
        display: none;
    }

    .header-desktop .direccion span {
        display: none;
    }

    .header-desktop .direccion .drop-down .btn-desplegable {
        width: 50.044083527%;
    }
}

@media only screen and (max-width: 863px) {
    .header-desktop .header-top .nav-user .icon-user {
        display: none;
    }

    .header-desktop .btn-direcciones {
        padding: 13px 12px;
    }

    .header-desktop .btn-direcciones .icon-element {
        display: none;
    }
}

@media only screen and (max-width: 736px) {
    .header-mobile {
        display: block;
    }
}

#tempLink {
    display: none;
}

/*@media (min-width: 1505px) {

    .menusalir {
        float: left !important;
        margin-left: 400px !important;
    }

    .contenido {
        width: 100%;
    }
}*/

/*@media only screen and (max-width: 736px) {
    footer .ayuda {
        display: block;
        width: 100%;
        overflow: hidden;
    }

        footer .ayuda ul {
            display: block;
            width: 100%;
            overflow: hidden;
        }

            footer .ayuda ul li {
                display: block;
                overflow: hidden;
            }

    footer .redes-sociales, footer .phones, footer .preguntas {
        display: block;
        width: 100%;
        overflow: hidden;
    }

    footer .redes-sociales {
        margin-bottom: 30px;
    }

        footer .redes-sociales ul {
            display: table;
        }

            footer .redes-sociales ul li {
                display: table-cell;
                text-align: center;
            }
}*/

/*@media (max-width: 640px) {
    .table-mobile {*/
/*Label the data*/
/*}

        .table-mobile table, .table-mobile thead, .table-mobile tbody, .table-mobile th, .table-mobile td, .table-mobile tr {
            display: block;
        }

            .table-mobile table.ta-right, .table-mobile thead.ta-right, .table-mobile tbody.ta-right, .table-mobile th.ta-right, .table-mobile td.ta-right, .table-mobile tr.ta-right {
                text-align: left;
            }

        .table-mobile input[type="radio"] {
            float: none;
        }

        .table-mobile thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        .table-mobile td {
            border: none;
            position: relative;
            padding-left: 50%;
        }

            .table-mobile td .left-cell {
                position: absolute;
                left: 10px;
                width: 54%;
            }

            .table-mobile td:before {
                position: absolute;
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
            }     
}

.table-full {
    background-color: #FBF9F7;
    padding: 30px 20px;
}

    .table-full table {
        margin: 0 auto;
        max-width: 502px;
    }

        .table-full table tr {
            background-color: #FBF9F7;
        }

            .table-full table tr td:first-child {
                width: 39.84064%;
            }*/