@charset "UTF-8";
/*
Versión específica para su integración con la web de lagunaro
*/
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px; }
  .container:before, .container:after {
    content: " ";
    display: table; }
  .container:after {
    clear: both; }
  @media (min-width: 768px) {
    .container {
      width: 740px; } }
  @media (min-width: 1024px) {
    .container {
      width: 1014px; } }
  @media (min-width: 1200px) {
    .container {
      width: 1160px; } }

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px; }
  .container-fluid:before, .container-fluid:after {
    content: " ";
    display: table; }
  .container-fluid:after {
    clear: both; }

.row {
  margin-left: -10px;
  margin-right: -10px; }
  .row:before, .row:after {
    content: " ";
    display: table; }
  .row:after {
    clear: both; }

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 10px;
  padding-right: 10px; }

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left; }

.col-xs-1 {
  width: 8.33333%; }

.col-xs-2 {
  width: 16.66667%; }

.col-xs-3 {
  width: 25%; }

.col-xs-4 {
  width: 33.33333%; }

.col-xs-5 {
  width: 41.66667%; }

.col-xs-6 {
  width: 50%; }

.col-xs-7 {
  width: 58.33333%; }

.col-xs-8 {
  width: 66.66667%; }

.col-xs-9 {
  width: 75%; }

.col-xs-10 {
  width: 83.33333%; }

.col-xs-11 {
  width: 91.66667%; }

.col-xs-12 {
  width: 100%; }

.col-xs-pull-0 {
  right: auto; }

.col-xs-pull-1 {
  right: 8.33333%; }

.col-xs-pull-2 {
  right: 16.66667%; }

.col-xs-pull-3 {
  right: 25%; }

.col-xs-pull-4 {
  right: 33.33333%; }

.col-xs-pull-5 {
  right: 41.66667%; }

.col-xs-pull-6 {
  right: 50%; }

.col-xs-pull-7 {
  right: 58.33333%; }

.col-xs-pull-8 {
  right: 66.66667%; }

.col-xs-pull-9 {
  right: 75%; }

.col-xs-pull-10 {
  right: 83.33333%; }

.col-xs-pull-11 {
  right: 91.66667%; }

.col-xs-pull-12 {
  right: 100%; }

.col-xs-push-0 {
  left: auto; }

.col-xs-push-1 {
  left: 8.33333%; }

.col-xs-push-2 {
  left: 16.66667%; }

.col-xs-push-3 {
  left: 25%; }

.col-xs-push-4 {
  left: 33.33333%; }

.col-xs-push-5 {
  left: 41.66667%; }

.col-xs-push-6 {
  left: 50%; }

.col-xs-push-7 {
  left: 58.33333%; }

.col-xs-push-8 {
  left: 66.66667%; }

.col-xs-push-9 {
  left: 75%; }

.col-xs-push-10 {
  left: 83.33333%; }

.col-xs-push-11 {
  left: 91.66667%; }

.col-xs-push-12 {
  left: 100%; }

.col-xs-offset-0 {
  margin-left: 0%; }

.col-xs-offset-1 {
  margin-left: 8.33333%; }

.col-xs-offset-2 {
  margin-left: 16.66667%; }

.col-xs-offset-3 {
  margin-left: 25%; }

.col-xs-offset-4 {
  margin-left: 33.33333%; }

.col-xs-offset-5 {
  margin-left: 41.66667%; }

.col-xs-offset-6 {
  margin-left: 50%; }

.col-xs-offset-7 {
  margin-left: 58.33333%; }

.col-xs-offset-8 {
  margin-left: 66.66667%; }

.col-xs-offset-9 {
  margin-left: 75%; }

.col-xs-offset-10 {
  margin-left: 83.33333%; }

.col-xs-offset-11 {
  margin-left: 91.66667%; }

.col-xs-offset-12 {
  margin-left: 100%; }

@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left; }
  .col-sm-1 {
    width: 8.33333%; }
  .col-sm-2 {
    width: 16.66667%; }
  .col-sm-3 {
    width: 25%; }
  .col-sm-4 {
    width: 33.33333%; }
  .col-sm-5 {
    width: 41.66667%; }
  .col-sm-6 {
    width: 50%; }
  .col-sm-7 {
    width: 58.33333%; }
  .col-sm-8 {
    width: 66.66667%; }
  .col-sm-9 {
    width: 75%; }
  .col-sm-10 {
    width: 83.33333%; }
  .col-sm-11 {
    width: 91.66667%; }
  .col-sm-12 {
    width: 100%; }
  .col-sm-pull-0 {
    right: auto; }
  .col-sm-pull-1 {
    right: 8.33333%; }
  .col-sm-pull-2 {
    right: 16.66667%; }
  .col-sm-pull-3 {
    right: 25%; }
  .col-sm-pull-4 {
    right: 33.33333%; }
  .col-sm-pull-5 {
    right: 41.66667%; }
  .col-sm-pull-6 {
    right: 50%; }
  .col-sm-pull-7 {
    right: 58.33333%; }
  .col-sm-pull-8 {
    right: 66.66667%; }
  .col-sm-pull-9 {
    right: 75%; }
  .col-sm-pull-10 {
    right: 83.33333%; }
  .col-sm-pull-11 {
    right: 91.66667%; }
  .col-sm-pull-12 {
    right: 100%; }
  .col-sm-push-0 {
    left: auto; }
  .col-sm-push-1 {
    left: 8.33333%; }
  .col-sm-push-2 {
    left: 16.66667%; }
  .col-sm-push-3 {
    left: 25%; }
  .col-sm-push-4 {
    left: 33.33333%; }
  .col-sm-push-5 {
    left: 41.66667%; }
  .col-sm-push-6 {
    left: 50%; }
  .col-sm-push-7 {
    left: 58.33333%; }
  .col-sm-push-8 {
    left: 66.66667%; }
  .col-sm-push-9 {
    left: 75%; }
  .col-sm-push-10 {
    left: 83.33333%; }
  .col-sm-push-11 {
    left: 91.66667%; }
  .col-sm-push-12 {
    left: 100%; }
  .col-sm-offset-0 {
    margin-left: 0%; }
  .col-sm-offset-1 {
    margin-left: 8.33333%; }
  .col-sm-offset-2 {
    margin-left: 16.66667%; }
  .col-sm-offset-3 {
    margin-left: 25%; }
  .col-sm-offset-4 {
    margin-left: 33.33333%; }
  .col-sm-offset-5 {
    margin-left: 41.66667%; }
  .col-sm-offset-6 {
    margin-left: 50%; }
  .col-sm-offset-7 {
    margin-left: 58.33333%; }
  .col-sm-offset-8 {
    margin-left: 66.66667%; }
  .col-sm-offset-9 {
    margin-left: 75%; }
  .col-sm-offset-10 {
    margin-left: 83.33333%; }
  .col-sm-offset-11 {
    margin-left: 91.66667%; }
  .col-sm-offset-12 {
    margin-left: 100%; } }

@media (min-width: 1024px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left; }
  .col-md-1 {
    width: 8.33333%; }
  .col-md-2 {
    width: 16.66667%; }
  .col-md-3 {
    width: 25%; }
  .col-md-4 {
    width: 33.33333%; }
  .col-md-5 {
    width: 41.66667%; }
  .col-md-6 {
    width: 50%; }
  .col-md-7 {
    width: 58.33333%; }
  .col-md-8 {
    width: 66.66667%; }
  .col-md-9 {
    width: 75%; }
  .col-md-10 {
    width: 83.33333%; }
  .col-md-11 {
    width: 91.66667%; }
  .col-md-12 {
    width: 100%; }
  .col-md-pull-0 {
    right: auto; }
  .col-md-pull-1 {
    right: 8.33333%; }
  .col-md-pull-2 {
    right: 16.66667%; }
  .col-md-pull-3 {
    right: 25%; }
  .col-md-pull-4 {
    right: 33.33333%; }
  .col-md-pull-5 {
    right: 41.66667%; }
  .col-md-pull-6 {
    right: 50%; }
  .col-md-pull-7 {
    right: 58.33333%; }
  .col-md-pull-8 {
    right: 66.66667%; }
  .col-md-pull-9 {
    right: 75%; }
  .col-md-pull-10 {
    right: 83.33333%; }
  .col-md-pull-11 {
    right: 91.66667%; }
  .col-md-pull-12 {
    right: 100%; }
  .col-md-push-0 {
    left: auto; }
  .col-md-push-1 {
    left: 8.33333%; }
  .col-md-push-2 {
    left: 16.66667%; }
  .col-md-push-3 {
    left: 25%; }
  .col-md-push-4 {
    left: 33.33333%; }
  .col-md-push-5 {
    left: 41.66667%; }
  .col-md-push-6 {
    left: 50%; }
  .col-md-push-7 {
    left: 58.33333%; }
  .col-md-push-8 {
    left: 66.66667%; }
  .col-md-push-9 {
    left: 75%; }
  .col-md-push-10 {
    left: 83.33333%; }
  .col-md-push-11 {
    left: 91.66667%; }
  .col-md-push-12 {
    left: 100%; }
  .col-md-offset-0 {
    margin-left: 0%; }
  .col-md-offset-1 {
    margin-left: 8.33333%; }
  .col-md-offset-2 {
    margin-left: 16.66667%; }
  .col-md-offset-3 {
    margin-left: 25%; }
  .col-md-offset-4 {
    margin-left: 33.33333%; }
  .col-md-offset-5 {
    margin-left: 41.66667%; }
  .col-md-offset-6 {
    margin-left: 50%; }
  .col-md-offset-7 {
    margin-left: 58.33333%; }
  .col-md-offset-8 {
    margin-left: 66.66667%; }
  .col-md-offset-9 {
    margin-left: 75%; }
  .col-md-offset-10 {
    margin-left: 83.33333%; }
  .col-md-offset-11 {
    margin-left: 91.66667%; }
  .col-md-offset-12 {
    margin-left: 100%; } }

@media (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left; }
  .col-lg-1 {
    width: 8.33333%; }
  .col-lg-2 {
    width: 16.66667%; }
  .col-lg-3 {
    width: 25%; }
  .col-lg-4 {
    width: 33.33333%; }
  .col-lg-5 {
    width: 41.66667%; }
  .col-lg-6 {
    width: 50%; }
  .col-lg-7 {
    width: 58.33333%; }
  .col-lg-8 {
    width: 66.66667%; }
  .col-lg-9 {
    width: 75%; }
  .col-lg-10 {
    width: 83.33333%; }
  .col-lg-11 {
    width: 91.66667%; }
  .col-lg-12 {
    width: 100%; }
  .col-lg-pull-0 {
    right: auto; }
  .col-lg-pull-1 {
    right: 8.33333%; }
  .col-lg-pull-2 {
    right: 16.66667%; }
  .col-lg-pull-3 {
    right: 25%; }
  .col-lg-pull-4 {
    right: 33.33333%; }
  .col-lg-pull-5 {
    right: 41.66667%; }
  .col-lg-pull-6 {
    right: 50%; }
  .col-lg-pull-7 {
    right: 58.33333%; }
  .col-lg-pull-8 {
    right: 66.66667%; }
  .col-lg-pull-9 {
    right: 75%; }
  .col-lg-pull-10 {
    right: 83.33333%; }
  .col-lg-pull-11 {
    right: 91.66667%; }
  .col-lg-pull-12 {
    right: 100%; }
  .col-lg-push-0 {
    left: auto; }
  .col-lg-push-1 {
    left: 8.33333%; }
  .col-lg-push-2 {
    left: 16.66667%; }
  .col-lg-push-3 {
    left: 25%; }
  .col-lg-push-4 {
    left: 33.33333%; }
  .col-lg-push-5 {
    left: 41.66667%; }
  .col-lg-push-6 {
    left: 50%; }
  .col-lg-push-7 {
    left: 58.33333%; }
  .col-lg-push-8 {
    left: 66.66667%; }
  .col-lg-push-9 {
    left: 75%; }
  .col-lg-push-10 {
    left: 83.33333%; }
  .col-lg-push-11 {
    left: 91.66667%; }
  .col-lg-push-12 {
    left: 100%; }
  .col-lg-offset-0 {
    margin-left: 0%; }
  .col-lg-offset-1 {
    margin-left: 8.33333%; }
  .col-lg-offset-2 {
    margin-left: 16.66667%; }
  .col-lg-offset-3 {
    margin-left: 25%; }
  .col-lg-offset-4 {
    margin-left: 33.33333%; }
  .col-lg-offset-5 {
    margin-left: 41.66667%; }
  .col-lg-offset-6 {
    margin-left: 50%; }
  .col-lg-offset-7 {
    margin-left: 58.33333%; }
  .col-lg-offset-8 {
    margin-left: 66.66667%; }
  .col-lg-offset-9 {
    margin-left: 75%; }
  .col-lg-offset-10 {
    margin-left: 83.33333%; }
  .col-lg-offset-11 {
    margin-left: 91.66667%; }
  .col-lg-offset-12 {
    margin-left: 100%; } }

.clearfix:before, .clearfix:after {
  content: " ";
  display: table; }

.clearfix:after {
  clear: both; }

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.pull-right {
  float: right !important; }

.pull-left {
  float: left !important; }

.hide {
  display: none !important; }

.show {
  display: block !important; }

.invisible {
  visibility: hidden; }

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0; }

.hidden {
  display: none !important; }

.affix {
  position: fixed; }

@-ms-viewport {
  width: device-width; }

.visible-xs {
  display: none !important; }

.visible-sm {
  display: none !important; }

.visible-md {
  display: none !important; }

.visible-lg {
  display: none !important; }

.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
  display: none !important; }

@media (max-width: 767px) {
  .visible-xs {
    display: block !important; }
  table.visible-xs {
    display: table !important; }
  tr.visible-xs {
    display: table-row !important; }
  th.visible-xs,
  td.visible-xs {
    display: table-cell !important; } }

@media (max-width: 767px) {
  .visible-xs-block {
    display: block !important; } }

@media (max-width: 767px) {
  .visible-xs-inline {
    display: inline !important; } }

@media (max-width: 767px) {
  .visible-xs-inline-block {
    display: inline-block !important; } }

@media (min-width: 768px) and (max-width: 1023px) {
  .visible-sm {
    display: block !important; }
  table.visible-sm {
    display: table !important; }
  tr.visible-sm {
    display: table-row !important; }
  th.visible-sm,
  td.visible-sm {
    display: table-cell !important; } }

@media (min-width: 768px) and (max-width: 1023px) {
  .visible-sm-block {
    display: block !important; } }

@media (min-width: 768px) and (max-width: 1023px) {
  .visible-sm-inline {
    display: inline !important; } }

@media (min-width: 768px) and (max-width: 1023px) {
  .visible-sm-inline-block {
    display: inline-block !important; } }

@media (min-width: 1024px) and (max-width: 1199px) {
  .visible-md {
    display: block !important; }
  table.visible-md {
    display: table !important; }
  tr.visible-md {
    display: table-row !important; }
  th.visible-md,
  td.visible-md {
    display: table-cell !important; } }

@media (min-width: 1024px) and (max-width: 1199px) {
  .visible-md-block {
    display: block !important; } }

@media (min-width: 1024px) and (max-width: 1199px) {
  .visible-md-inline {
    display: inline !important; } }

@media (min-width: 1024px) and (max-width: 1199px) {
  .visible-md-inline-block {
    display: inline-block !important; } }

@media (min-width: 1200px) {
  .visible-lg {
    display: block !important; }
  table.visible-lg {
    display: table !important; }
  tr.visible-lg {
    display: table-row !important; }
  th.visible-lg,
  td.visible-lg {
    display: table-cell !important; } }

@media (min-width: 1200px) {
  .visible-lg-block {
    display: block !important; } }

@media (min-width: 1200px) {
  .visible-lg-inline {
    display: inline !important; } }

@media (min-width: 1200px) {
  .visible-lg-inline-block {
    display: inline-block !important; } }

@media (max-width: 767px) {
  .hidden-xs {
    display: none !important; } }

@media (min-width: 768px) and (max-width: 1023px) {
  .hidden-sm {
    display: none !important; } }

@media (min-width: 1024px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important; } }

@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important; } }

.visible-print {
  display: none !important; }

@media print {
  .visible-print {
    display: block !important; }
  table.visible-print {
    display: table !important; }
  tr.visible-print {
    display: table-row !important; }
  th.visible-print,
  td.visible-print {
    display: table-cell !important; } }

.visible-print-block {
  display: none !important; }
  @media print {
    .visible-print-block {
      display: block !important; } }

.visible-print-inline {
  display: none !important; }
  @media print {
    .visible-print-inline {
      display: inline !important; } }

.visible-print-inline-block {
  display: none !important; }
  @media print {
    .visible-print-inline-block {
      display: inline-block !important; } }

@media print {
  .hidden-print {
    display: none !important; } }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
@media screen and (max-width: 767px) {
  .only-desktop {
    display: none !important; } }

@media (max-width: 1023px) {
  .only-min-desktop-md {
    display: none !important; } }

@media (min-width: 768px) {
  .only-mobile {
    display: none !important; } }

@media (min-width: 1024px) {
  .only-mobile-and-tablet {
    display: none !important; } }

@media (min-width: 768px) {
  .visible-desktop {
    display: block; } }

@media (max-width: 767px) {
  .visible-mobile {
    display: block; } }

.relative {
  position: relative; }

.block {
  display: block !important; }

.inline-block {
  display: inline-block !important; }

@media (min-width: 768px) {
  .inline-block-only-desktop {
    display: inline-block !important; } }

@media (max-width: 767px) {
  .inline-block-only-mobile {
    display: inline-block !important; } }

@media (max-width: 767px) {
  .col--mobile-margin {
    margin-bottom: 26px; } }

@media (max-width: 767px) {
  .mobile-full-width {
    width: auto;
    margin-left: -10px;
    margin-right: -10px; } }

.full-width {
  margin-left: -10px;
  margin-right: -10px; }

@media (max-width: 767px) {
  .block-only-mobile {
    display: block; } }

@media (min-width: 768px) {
  .block-only-desktop {
    display: block; } }

.flex-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.flex-grow {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

@media (min-width: 1024px) {
  .show-only-sin-columna-lateral {
    display: none !important; } }

.valign-middle {
  vertical-align: middle; }

.limit-width {
  max-width: 150px;
  word-wrap: break-word; }
  @media (min-width: 768px) {
    .limit-width {
      max-width: 200px; } }

.margin {
  margin-bottom: 26px !important; }

@media (max-width: 767px) {
  .margin--only-mobile {
    margin-bottom: 26px !important; } }

.margin-md {
  margin-bottom: 39px !important; }

.margin-lg {
  margin-bottom: 52px !important; }

.margin-sm {
  margin-bottom: 13px !important; }

.margin-xsm {
  margin-bottom: 8.66667px !important; }

.margin-0 {
  margin-bottom: 0 !important; }

.margin-top {
  margin-top: 26px !important; }

.margin-top-none {
  margin-top: 0 !important; }

.margin-top-sm {
  margin-top: 13px !important; }

.margin-top-md {
  margin-top: 39px !important; }

.margin-top-xsm {
  margin-top: 8.66667px !important; }

.margin-top-lg {
  margin-top: 52px !important; }

.margin-right {
  margin-right: 26px !important; }

.margin-right-md {
  margin-right: 39px !important; }

.margin-right-sm {
  margin-right: 13px !important; }

.margin-right-xsm {
  margin-right: 8.66667px !important; }

.margin-right-lg {
  margin-right: 52px !important; }

.margin-left {
  margin-left: 26px !important; }

.margin-left-md {
  margin-left: 39px !important; }

.margin-left-sm {
  margin-left: 13px !important; }

.margin-left-lg {
  margin-left: 52px !important; }

@media (max-width: 1023px) {
  .u-margin-left-none-mobile {
    margin-left: 0 !important; } }

@media print {
  .print-margin-top {
    margin-top: 26px !important; } }

.margin-top-md-neg {
  margin-top: -39px; }

.u-margin-left-none {
  margin-left: 0px !important; }

.u-block-inner-padding {
  padding: 20px; }

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.truncate-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.nowrap {
  white-space: nowrap; }

.text-normal {
  font-size: 13px; }

.text-large {
  font-size: 13px; }
  @media (min-width: 768px) {
    .text-large {
      font-size: 15px; } }

.text-xlarge {
  font-size: 15px; }
  @media (min-width: 768px) {
    .text-xlarge {
      font-size: 24px; } }

.text-small {
  font-size: 12px; }
  @media (min-width: 768px) {
    .text-small {
      font-size: 13px; } }

.text-xsmall {
  font-size: 10px; }

@media (max-width: 767px) {
  .text-xsmall--mobile {
    font-size: 10px; } }

.text-faded {
  color: #999999; }

.text-highlight {
  color: #51284F; }

.text-highlight2 {
  color: #A50050; }

.text-neutro {
  color: #51284F; }

.text-alert {
  color: #E10000; }

.pointer {
  cursor: pointer; }

.no-pointer:hover {
  cursor: default !important; }

.semi-bold {
  font-weight: 600; }

.uppercase {
  text-transform: uppercase; }

@media (min-width: 768px) {
  .text-right\@sm {
    text-align: right; } }

.text-left {
  text-align: left; }

.text-right {
  text-align: right; }

.no-pointer {
  cursor: default !important; }

.u-opacity-huge {
  opacity: 0.15; }

.separator-line {
  margin-top: 13px;
  margin-bottom: 13px;
  border-bottom: 1px solid #EAE7E0; }

@media not print {
  .u-only-print {
    display: none !important; } }

@media print {
  .u-no-print {
    display: none !important; } }

.logo-impresion {
  width: 100px;
  margin-top: -52px;
  margin-bottom: 52px; }

.u-vertical-align-top {
  vertical-align: top !important; }

.texto-pagoMovil-sticker {
  color: #669200; }

@font-face {
  font-family: 'newjune';
  src: url(../../Content/lk/fonts/newjuneheavy-webfont$.eot);
  src: url(../../Content/lk/fonts/newjuneheavy-webfont$.eot?#iefix) format("embedded-opentype"), url(../../Content/lk/fonts/newjuneheavy-webfont$.svg#newjuneheavyregular) format("svg"), url(../../Content/lk/fonts/newjuneheavy-webfont$.woff2) format("woff2"), url(../../Content/lk/fonts/newjuneheavy-webfont$.woff) format("woff"), url(../../Content/lk/fonts/newjuneheavy-webfont$.ttf) format("truetype");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'newjune';
  src: url(../../Content/lk/fonts/newjuneregular-webfont$.eot);
  src: url(../../Content/lk/fonts/newjuneregular-webfont$.eot?#iefix) format("embedded-opentype"), url(../../Content/lk/fonts/newjuneregular-webfont$.svg#newjuneregularregular) format("svg"), url(../../Content/lk/fonts/newjuneregular-webfont$.woff2) format("woff2"), url(../../Content/lk/fonts/newjuneregular-webfont$.woff) format("woff"), url(../../Content/lk/fonts/newjuneregular-webfont$.ttf) format("truetype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'newjune';
  src: url(../../Content/lk/fonts/newjunesemibold-webfont$.eot);
  src: url(../../Content/lk/fonts/newjunesemibold-webfont$.eot?#iefix) format("embedded-opentype"), url(../../Content/lk/fonts/newjunesemibold-webfont$.svg#newjunesemiboldregular) format("svg"), url(../../Content/lk/fonts/newjunesemibold-webfont$.woff2) format("woff2"), url(../../Content/lk/fonts/newjunesemibold-webfont$.woff) format("woff"), url(../../Content/lk/fonts/newjunesemibold-webfont$.ttf) format("truetype");
  font-weight: 600;
  font-style: normal; }

/* *******************************************************
  ICON FONT
** **************************************************** */
@font-face {
  font-family: 'lk-icons';
  src: url(../../Content/lk/fonts/lk-icons/fonts/lk-icons$.eot);
  src: url(../../Content/lk/fonts/lk-icons/fonts/lk-icons$.eot?#iefix-gtwxoh) format("embedded-opentype"), url(../../Content/lk/fonts/lk-icons/fonts/lk-icons$.svg#lk-icons) format("svg"), url(../../Content/lk/fonts/lk-icons/fonts/lk-icons$.ttf) format("truetype"), url(../../Content/lk/fonts/lk-icons/fonts/lk-icons$.woff) format("woff");
  font-weight: normal;
  font-style: normal; }

body,
html {
  margin: 0;
  padding: 0;
  position: relative; }

html {
  overflow-x: hidden; }

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%; }

body {
  position: relative;
  color: #51284F;
  font-size: 12px; }
  @media (min-width: 768px) {
    body {
      font-size: 13px; } }

ul:focus, div:focus {
  outline: none; }

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none; }

::selection {
  background: #b3d4fc;
  text-shadow: none; }

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }

input[type=number] {
  -moz-appearance: textfield; }

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle; }

/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical; }

img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic; }

a:focus {
  outline: none; }

a:hover {
  cursor: pointer; }

strong {
  font-weight: 600; }

input.msclear::-ms-clear {
  display: none; }

input[type=email]::-ms-clear {
  display: none; }

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
@media print {
  *,
  *:before,
  *:after {
    box-shadow: none !important;
    text-shadow: none !important; }
  body {
    height: auto;
    -webkit-print-color-adjust: exact; }
  a,
  a:visited {
    text-decoration: underline; }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group; }
  tr,
  img {
    page-break-inside: avoid; }
  img {
    max-width: 100% !important; }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3; }
  h2,
  h3 {
    page-break-after: avoid; }
  .table {
    border-collapse: collapse !important; }
    .table td,
    .table th {
      position: static !important;
      background-color: #fff !important; } }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-top: 0; }

ul, ol {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0; }

.svg-actos-vandalicos-inquilinos {
  background: url(../../img/sprite.css.svg) 60.9008% 70.67901% no-repeat; }

.svg-actos-vandalicos-inquilinos-dims {
  width: 58px;
  height: 58px; }

.svg-actos-vandalicos-inquilinos-online {
  background: url(../../img/sprite.css.svg) 73.59227% 70.67901% no-repeat; }

.svg-actos-vandalicos-inquilinos-online-dims {
  width: 58px;
  height: 58px; }

.svg-aeb43 {
  background: url(../../img/sprite.css.svg) 83.90597% 60.90598% no-repeat; }

.svg-aeb43-dims {
  width: 35px;
  height: 23px; }

.svg-ahorro {
  background: url(../../img/sprite.css.svg) 98.90217% 91.63803% no-repeat; }

.svg-ahorro-dims {
  width: 40px;
  height: 31px; }

.svg-ahorro-calendario {
  background: url(../../img/sprite.css.svg) 97.45198% 91.74312% no-repeat; }

.svg-ahorro-calendario-dims {
  width: 41px;
  height: 34px; }

.svg-ahorroclick-caprichos {
  background: url(../../img/sprite.css.svg) 93.87309% 71.75926% no-repeat; }

.svg-ahorroclick-caprichos-dims {
  width: 58px;
  height: 58px; }

.svg-ahorroclick-coche {
  background: url(../../img/sprite.css.svg) 95.98833% 71.75926% no-repeat; }

.svg-ahorroclick-coche-dims {
  width: 58px;
  height: 58px; }

.svg-ahorroclick-electronica {
  background: url(../../img/sprite.css.svg) 98.10357% 71.75926% no-repeat; }

.svg-ahorroclick-electronica-dims {
  width: 58px;
  height: 58px; }

.svg-ahorroclick-estudios {
  background: url(../../img/sprite.css.svg) 89.6426% 73.99691% no-repeat; }

.svg-ahorroclick-estudios-dims {
  width: 58px;
  height: 58px; }

.svg-ahorroclick-formacion {
  background: url(../../img/sprite.css.svg) 95.98833% 73.99691% no-repeat; }

.svg-ahorroclick-formacion-dims {
  width: 58px;
  height: 58px; }

.svg-ahorroclick-grupo {
  background: url(../../img/sprite.css.svg) 99.93792% 40.95293% no-repeat; }

.svg-ahorroclick-grupo-dims {
  width: 93.92px;
  height: 58px; }

.svg-ahorroclick-hijos {
  background: url(../../img/sprite.css.svg) 93.87673% 69.5216% no-repeat; }

.svg-ahorroclick-hijos-dims {
  width: 58px;
  height: 58px; }

.svg-ahorroclick-hogar {
  background: url(../../img/sprite.css.svg) 95.99198% 69.5216% no-repeat; }

.svg-ahorroclick-hogar-dims {
  width: 58px;
  height: 58px; }

.svg-ahorroclick-idi {
  background: url(../../img/sprite.css.svg) 80% 43.24324% no-repeat; }

.svg-ahorroclick-idi-dims {
  width: 800px;
  height: 800px; }

.svg-ahorroclick-instalaciones {
  background: url(../../img/sprite.css.svg) 40% 0 no-repeat; }

.svg-ahorroclick-instalaciones-dims {
  width: 800px;
  height: 800px; }

.svg-ahorroclick-maquinaria {
  background: url(../../img/sprite.css.svg) 0 43.24324% no-repeat; }

.svg-ahorroclick-maquinaria-dims {
  width: 800px;
  height: 800px; }

.svg-ahorroclick-nuevo-negocio {
  background: url(../../img/sprite.css.svg) 40% 43.24324% no-repeat; }

.svg-ahorroclick-nuevo-negocio-dims {
  width: 800px;
  height: 800px; }

.svg-ahorroclick-otros {
  background: url(../../img/sprite.css.svg) 87.52735% 73.99691% no-repeat; }

.svg-ahorroclick-otros-dims {
  width: 58px;
  height: 58px; }

.svg-ahorroclick-reforma-negocio {
  background: url(../../img/sprite.css.svg) 80% 0 no-repeat; }

.svg-ahorroclick-reforma-negocio-dims {
  width: 800px;
  height: 800px; }

.svg-ahorroclick-vacaciones {
  background: url(../../img/sprite.css.svg) 91.75784% 73.99691% no-repeat; }

.svg-ahorroclick-vacaciones-dims {
  width: 58px;
  height: 58px; }

.svg-amortizacion {
  background: url(../../img/sprite.css.svg) 8.60591% 93.81679% no-repeat; }

.svg-amortizacion-dims {
  width: 24px;
  height: 30px; }

.svg-ampliacion {
  background: url(../../img/sprite.css.svg) 5.01801% 97.08445% no-repeat; }

.svg-ampliacion-dims {
  width: 24px;
  height: 33px; }

.svg-anular {
  background: url(../../img/sprite.css.svg) 99.84224% 22.88746% no-repeat; }

.svg-anular-dims {
  width: 11px;
  height: 11px; }

.svg-anular-blanco {
  background: url(../../img/sprite.css.svg) 0 98.52825% no-repeat; }

.svg-anular-blanco-dims {
  width: 38.19px;
  height: 35.42px; }

.svg-anular2 {
  background: url(../../img/sprite.css.svg) 0 97.17356% no-repeat; }

.svg-anular2-dims {
  width: 38.2px;
  height: 35.4px; }

.svg-argitu {
  background: url(../../img/sprite.css.svg) 85.41155% 66.60327% no-repeat; }

.svg-argitu-dims {
  width: 30px;
  height: 21px; }

.svg-asistencia-electrodomesticos-con-piezas {
  background: url(../../img/sprite.css.svg) 95.98833% 76.23457% no-repeat; }

.svg-asistencia-electrodomesticos-con-piezas-dims {
  width: 58px;
  height: 58px; }

.svg-asistencia-electrodomesticos-con-piezas-online {
  background: url(../../img/sprite.css.svg) 98.10357% 76.23457% no-repeat; }

.svg-asistencia-electrodomesticos-con-piezas-online-dims {
  width: 58px;
  height: 58px; }

.svg-asistencia-electrodomesticos-sin-piezas {
  background: url(../../img/sprite.css.svg) 87.52735% 78.47222% no-repeat; }

.svg-asistencia-electrodomesticos-sin-piezas-dims {
  width: 58px;
  height: 58px; }

.svg-asistencia-electrodomesticos-sin-piezas-online {
  background: url(../../img/sprite.css.svg) 89.6426% 78.47222% no-repeat; }

.svg-asistencia-electrodomesticos-sin-piezas-online-dims {
  width: 58px;
  height: 58px; }

.svg-asistencia-informatica-remota {
  background: url(../../img/sprite.css.svg) 91.75784% 78.47222% no-repeat; }

.svg-asistencia-informatica-remota-dims {
  width: 58px;
  height: 58px; }

.svg-asistencia-informatica-remota-online {
  background: url(../../img/sprite.css.svg) 93.87309% 78.47222% no-repeat; }

.svg-asistencia-informatica-remota-online-dims {
  width: 58px;
  height: 58px; }

.svg-asistencia-plus {
  background: url(../../img/sprite.css.svg) 95.98833% 78.47222% no-repeat; }

.svg-asistencia-plus-dims {
  width: 58px;
  height: 58px; }

.svg-asistencia-plus-online {
  background: url(../../img/sprite.css.svg) 98.10357% 78.47222% no-repeat; }

.svg-asistencia-plus-online-dims {
  width: 58px;
  height: 58px; }

.svg-asistencia-psicologica-fallecimiento {
  background: url(../../img/sprite.css.svg) 89.6426% 80.70988% no-repeat; }

.svg-asistencia-psicologica-fallecimiento-dims {
  width: 58px;
  height: 58px; }

.svg-asistencia-psicologica-fallecimiento-online {
  background: url(../../img/sprite.css.svg) 93.87309% 85.18519% no-repeat; }

.svg-asistencia-psicologica-fallecimiento-online-dims {
  width: 58px;
  height: 58px; }

.svg-asistencia-tramitacion-delux {
  background: url(../../img/sprite.css.svg) 95.98833% 85.18519% no-repeat; }

.svg-asistencia-tramitacion-delux-dims {
  width: 58px;
  height: 58px; }

.svg-asistencia-tramitacion-delux-online {
  background: url(../../img/sprite.css.svg) 52.43982% 63.96605% no-repeat; }

.svg-asistencia-tramitacion-delux-online-dims {
  width: 58px;
  height: 58px; }

.svg-asistencia-viaje-km0-vehiculo-personas {
  background: url(../../img/sprite.css.svg) 58.78556% 66.2037% no-repeat; }

.svg-asistencia-viaje-km0-vehiculo-personas-dims {
  width: 58px;
  height: 58px; }

.svg-asistencia-viaje-km0-vehiculo-personas-online {
  background: url(../../img/sprite.css.svg) 65.13129% 68.44136% no-repeat; }

.svg-asistencia-viaje-km0-vehiculo-personas-online-dims {
  width: 58px;
  height: 58px; }

.svg-asistencia-vida-diaria-fallecimiento {
  background: url(../../img/sprite.css.svg) 67.24654% 68.44136% no-repeat; }

.svg-asistencia-vida-diaria-fallecimiento-dims {
  width: 58px;
  height: 58px; }

.svg-asistencia-vida-diaria-fallecimiento-online {
  background: url(../../img/sprite.css.svg) 48.20934% 70.67901% no-repeat; }

.svg-asistencia-vida-diaria-fallecimiento-online-dims {
  width: 58px;
  height: 58px; }

.svg-aval {
  background: url(../../img/sprite.css.svg) 54.55507% 70.67901% no-repeat; }

.svg-aval-dims {
  width: 58px;
  height: 58px; }

.svg-barras {
  background: url(../../img/sprite.css.svg) 1.38205% 97.12156% no-repeat; }

.svg-barras-dims {
  width: 36px;
  height: 34px; }

.svg-bienes-refrigerados {
  background: url(../../img/sprite.css.svg) 77.82276% 70.67901% no-repeat; }

.svg-bienes-refrigerados-dims {
  width: 58px;
  height: 58px; }

.svg-bienes-refrigerados-online {
  background: url(../../img/sprite.css.svg) 73.58497% 89.20139% no-repeat; }

.svg-bienes-refrigerados-online-dims {
  width: 58px;
  height: 58px; }

.svg-bolsa {
  background: url(../../img/sprite.css.svg) 73.59227% 61.32618% no-repeat; }

.svg-bolsa-dims {
  width: 58px;
  height: 41px; }

.svg-bombilla {
  background: url(../../img/sprite.css.svg) 85.10432% 65.62141% no-repeat; }

.svg-bombilla-dims {
  width: 20px;
  height: 35px; }

.svg-buzon {
  background: url(../../img/sprite.css.svg) 95.02703% 60.06452% no-repeat; }

.svg-buzon-dims {
  width: 25px;
  height: 15px; }

.svg-calendar {
  background: url(../../img/sprite.css.svg) 90.94828% 89.7874% no-repeat; }

.svg-calendar-dims {
  width: 16px;
  height: 16px; }

.svg-calendario {
  background: url(../../img/sprite.css.svg) 90.37356% 89.7874% no-repeat; }

.svg-calendario-dims {
  width: 16px;
  height: 16px; }

.svg-camara {
  background: url(../../img/sprite.css.svg) 85.41155% 71.05864% no-repeat; }

.svg-camara-dims {
  width: 30px;
  height: 24px; }

.svg-campana {
  background: url(../../img/sprite.css.svg) 34.53237% 90.22078% no-repeat; }

.svg-campana-dims {
  width: 20px;
  height: 23px; }

.svg-campana2 {
  background: url(../../img/sprite.css.svg) 32.3741% 90.22078% no-repeat; }

.svg-campana2-dims {
  width: 20px;
  height: 23px; }

.svg-cancelar {
  background: url(../../img/sprite.css.svg) 78.18565% 92.25801% no-repeat; }

.svg-cancelar-dims {
  width: 48.6px;
  height: 48.6px; }

.svg-candado {
  background: url(../../img/sprite.css.svg) 97.4336% 57.44418% no-repeat; }

.svg-candado-dims {
  width: 119.2px;
  height: 142px; }

.svg-carro {
  background: url(../../img/sprite.css.svg) 85.19625% 64.45458% no-repeat; }

.svg-carro-dims {
  width: 23px;
  height: 19px; }

.svg-carro-blanco {
  background: url(../../img/sprite.css.svg) 97.76756% 51.93101% no-repeat; }

.svg-carro-blanco-dims {
  width: 125.8px;
  height: 104.7px; }

.svg-cerrajero {
  background: url(../../img/sprite.css.svg) 98.64884% 62.71103% no-repeat; }

.svg-cerrajero-dims {
  width: 46.8px;
  height: 20px; }

.svg-cesta {
  background: url(../../img/sprite.css.svg) 47.65321% 71.91781% no-repeat; }

.svg-cesta-dims {
  width: 26px;
  height: 22px; }

.svg-cobros {
  background: url(../../img/sprite.css.svg) 99.97081% 51.05052% no-repeat; }

.svg-cobros-dims {
  width: 58.9px;
  height: 60.8px; }

.svg-cobros2 {
  background: url(../../img/sprite.css.svg) 93.87309% 73.99691% no-repeat; }

.svg-cobros2-dims {
  width: 58px;
  height: 58px; }

.svg-comentarios {
  background: url(../../img/sprite.css.svg) 85.53507% 67.70992% no-repeat; }

.svg-comentarios-dims {
  width: 34px;
  height: 30px; }

.svg-comercio-prescriptor {
  background: url(../../img/sprite.css.svg) 98.10357% 73.99691% no-repeat; }

.svg-comercio-prescriptor-dims {
  width: 58px;
  height: 58px; }

.svg-contactless {
  background: url(../../img/sprite.css.svg) 92.82537% 52.22235% no-repeat; }

.svg-contactless-dims {
  width: 214.5px;
  height: 118.9px; }

.svg-contacto {
  background: url(../../img/sprite.css.svg) 99.98564% 16.37471% no-repeat; }

.svg-contacto-dims {
  width: 15px;
  height: 24px; }

.svg-contacto2 {
  background: url(../../img/sprite.css.svg) 99.98564% 17.28865% no-repeat; }

.svg-contacto2-dims {
  width: 15px;
  height: 24px; }

.svg-contra-reloj {
  background: url(../../img/sprite.css.svg) 93.87309% 76.23457% no-repeat; }

.svg-contra-reloj-dims {
  width: 58px;
  height: 58px; }

.svg-contratar-ahorro-plazo {
  background: url(../../img/sprite.css.svg) 33.33333% 84.98222% no-repeat; }

.svg-contratar-ahorro-plazo-dims {
  width: 400px;
  height: 400px; }

.svg-contratar-bolsa {
  background: url(../../img/sprite.css.svg) 66.66667% 84.98222% no-repeat; }

.svg-contratar-bolsa-dims {
  width: 400px;
  height: 400px; }

.svg-contratar-cuentas-ahorro {
  background: url(../../img/sprite.css.svg) 83.33333% 84.98222% no-repeat; }

.svg-contratar-cuentas-ahorro-dims {
  width: 400px;
  height: 400px; }

.svg-contratar-fondos-inversion {
  background: url(../../img/sprite.css.svg) 100% 0 no-repeat; }

.svg-contratar-fondos-inversion-dims {
  width: 400px;
  height: 400px; }

.svg-contratar-plan-pensiones {
  background: url(../../img/sprite.css.svg) 50% 84.98222% no-repeat; }

.svg-contratar-plan-pensiones-dims {
  width: 400px;
  height: 400px; }

.svg-conversacion {
  background: url(../../img/sprite.css.svg) 86.26887% 90.50152% no-repeat; }

.svg-conversacion-dims {
  width: 18px;
  height: 18px; }

.svg-cristalero {
  background: url(../../img/sprite.css.svg) 99.75316% 88.87529% no-repeat; }

.svg-cristalero-dims {
  width: 45.2px;
  height: 35.1px; }

.svg-cuadrado-icon {
  background: url(../../img/sprite.css.svg) 99.92727% 87.15385% no-repeat; }

.svg-cuadrado-icon-dims {
  width: 50px;
  height: 50px; }

.svg-cuenta-ahorro {
  background: url(../../img/sprite.css.svg) 89.70095% 67.33231% no-repeat; }

.svg-cuenta-ahorro-dims {
  width: 58px;
  height: 41px; }

.svg-cuenta-cero {
  background: url(../../img/sprite.css.svg) 98.20546% 64.07541% no-repeat; }

.svg-cuenta-cero-dims {
  width: 69.5px;
  height: 34.8px; }

.svg-cuenta-click {
  background: url(../../img/sprite.css.svg) 91.81619% 67.33231% no-repeat; }

.svg-cuenta-click-dims {
  width: 58px;
  height: 41px; }

.svg-cuenta-click-libreta {
  background: url(../../img/sprite.css.svg) 98.20546% 65.40609% no-repeat; }

.svg-cuenta-click-libreta-dims {
  width: 69.5px;
  height: 34.8px; }

.svg-cuenta-divisas {
  background: url(../../img/sprite.css.svg) 79.92878% 92.21548% no-repeat; }

.svg-cuenta-divisas-dims {
  width: 47.8px;
  height: 47.4px; }

.svg-cuenta-max {
  background: url(../../img/sprite.css.svg) 95.66014% 64.07541% no-repeat; }

.svg-cuenta-max-dims {
  width: 69.5px;
  height: 34.8px; }

.svg-cuenta-operativa {
  background: url(../../img/sprite.css.svg) 15.27437% 95.45628% no-repeat; }

.svg-cuenta-operativa-dims {
  width: 30px;
  height: 31px; }

.svg-cuenta-valores {
  background: url(../../img/sprite.css.svg) 99.28026% 59.34095% no-repeat; }

.svg-cuenta-valores-dims {
  width: 49px;
  height: 25px; }

.svg-cuenta-vivienda {
  background: url(../../img/sprite.css.svg) 93.93144% 67.33231% no-repeat; }

.svg-cuenta-vivienda-dims {
  width: 58px;
  height: 41px; }

.svg-daños-agentes-atmosfericos {
  background: url(../../img/sprite.css.svg) 95.98833% 80.70988% no-repeat; }

.svg-daños-agentes-atmosfericos-dims {
  width: 58px;
  height: 58px; }

.svg-daños-agentes-atmosfericos-online {
  background: url(../../img/sprite.css.svg) 98.10357% 80.70988% no-repeat; }

.svg-daños-agentes-atmosfericos-online-dims {
  width: 58px;
  height: 58px; }

.svg-daños-agua {
  background: url(../../img/sprite.css.svg) 87.52735% 82.94753% no-repeat; }

.svg-daños-agua-dims {
  width: 58px;
  height: 58px; }

.svg-daños-agua-online {
  background: url(../../img/sprite.css.svg) 89.6426% 82.94753% no-repeat; }

.svg-daños-agua-online-dims {
  width: 58px;
  height: 58px; }

.svg-daños-electricos {
  background: url(../../img/sprite.css.svg) 91.75784% 82.94753% no-repeat; }

.svg-daños-electricos-dims {
  width: 58px;
  height: 58px; }

.svg-daños-electricos-online {
  background: url(../../img/sprite.css.svg) 93.87309% 82.94753% no-repeat; }

.svg-daños-electricos-online-dims {
  width: 58px;
  height: 58px; }

.svg-defensa-juridica {
  background: url(../../img/sprite.css.svg) 95.98833% 82.94753% no-repeat; }

.svg-defensa-juridica-dims {
  width: 58px;
  height: 58px; }

.svg-defensa-juridica-arrendador {
  background: url(../../img/sprite.css.svg) 98.10357% 82.94753% no-repeat; }

.svg-defensa-juridica-arrendador-dims {
  width: 58px;
  height: 58px; }

.svg-defensa-juridica-arrendador-online {
  background: url(../../img/sprite.css.svg) 87.52735% 85.18519% no-repeat; }

.svg-defensa-juridica-arrendador-online-dims {
  width: 58px;
  height: 58px; }

.svg-defensa-juridica-online {
  background: url(../../img/sprite.css.svg) 89.6426% 85.18519% no-repeat; }

.svg-defensa-juridica-online-dims {
  width: 58px;
  height: 58px; }

.svg-deposito {
  background: url(../../img/sprite.css.svg) 96.04668% 67.33231% no-repeat; }

.svg-deposito-dims {
  width: 58px;
  height: 41px; }

.svg-descargar-ficheros {
  background: url(../../img/sprite.css.svg) 31.40794% 90.28952% no-repeat; }

.svg-descargar-ficheros-dims {
  width: 30px;
  height: 25px; }

.svg-desktop-logo-bk {
  background: url(../../img/sprite.css.svg) 92.7357% 57.813% no-repeat; }

.svg-desktop-logo-bk-dims {
  width: 212px;
  height: 158px; }

.svg-desktop-logo-bk-f1 {
  background: url(../../img/sprite.css.svg) 92.7357% 64.15329% no-repeat; }

.svg-desktop-logo-bk-f1-dims {
  width: 212px;
  height: 158px; }

.svg-deuda-publica {
  background: url(../../img/sprite.css.svg) 98.10357% 85.18519% no-repeat; }

.svg-deuda-publica-dims {
  width: 58px;
  height: 58px; }

.svg-devoluciones-anulaciones {
  background: url(../../img/sprite.css.svg) 94.43961% 91.98927% no-repeat; }

.svg-devoluciones-anulaciones-dims {
  width: 43px;
  height: 41px; }

.svg-dialogo {
  background: url(../../img/sprite.css.svg) 48.59048% 71.91781% no-repeat; }

.svg-dialogo-dims {
  width: 26px;
  height: 22px; }

.svg-documento {
  background: url(../../img/sprite.css.svg) 50.2659% 71.89045% no-repeat; }

.svg-documento-dims {
  width: 17px;
  height: 21px; }

.svg-eleccion-dividendo {
  background: url(../../img/sprite.css.svg) 3.94585% 97.08445% no-repeat; }

.svg-eleccion-dividendo-dims {
  width: 30px;
  height: 33px; }

.svg-electricista {
  background: url(../../img/sprite.css.svg) 85.29963% 88.35263% no-repeat; }

.svg-electricista-dims {
  width: 26.6px;
  height: 33.1px; }

.svg-entradas-espectaculos {
  background: url(../../img/sprite.css.svg) 99.97091% 67.10597% no-repeat; }

.svg-entradas-espectaculos-dims {
  width: 49.6px;
  height: 32.2px; }

.svg-envio-grua-geolocalizacion {
  background: url(../../img/sprite.css.svg) 87.52735% 89.66049% no-repeat; }

.svg-envio-grua-geolocalizacion-dims {
  width: 58px;
  height: 58px; }

.svg-envio-grua-geolocalizacion-online {
  background: url(../../img/sprite.css.svg) 89.6426% 89.66049% no-repeat; }

.svg-envio-grua-geolocalizacion-online-dims {
  width: 58px;
  height: 58px; }

.svg-epsv-dinamico {
  background: url(../../img/sprite.css.svg) 98.16193% 67.33231% no-repeat; }

.svg-epsv-dinamico-dims {
  width: 58px;
  height: 41px; }

.svg-epsv-garantizados {
  background: url(../../img/sprite.css.svg) 91.75784% 89.07627% no-repeat; }

.svg-epsv-garantizados-dims {
  width: 58px;
  height: 41px; }

.svg-epsv-izarpension-planes-empleo {
  background: url(../../img/sprite.css.svg) 93.87309% 89.07627% no-repeat; }

.svg-epsv-izarpension-planes-empleo-dims {
  width: 58px;
  height: 41px; }

.svg-epsv-izarpension-renta {
  background: url(../../img/sprite.css.svg) 65.45799% 92.48555% no-repeat; }

.svg-epsv-izarpension-renta-dims {
  width: 53.2px;
  height: 55px; }

.svg-epsv-mixto {
  background: url(../../img/sprite.css.svg) 95.98833% 89.07627% no-repeat; }

.svg-epsv-mixto-dims {
  width: 58px;
  height: 41px; }

.svg-epsv-moderado {
  background: url(../../img/sprite.css.svg) 98.10357% 89.07627% no-repeat; }

.svg-epsv-moderado-dims {
  width: 58px;
  height: 41px; }

.svg-epsv-monetario {
  background: url(../../img/sprite.css.svg) 50.32458% 61.32618% no-repeat; }

.svg-epsv-monetario-dims {
  width: 58px;
  height: 41px; }

.svg-epsv-variable {
  background: url(../../img/sprite.css.svg) 52.43982% 61.32618% no-repeat; }

.svg-epsv-variable-dims {
  width: 58px;
  height: 41px; }

.svg-euro {
  background: url(../../img/sprite.css.svg) 50.93165% 71.86312% no-repeat; }

.svg-euro-dims {
  width: 20px;
  height: 20px; }

.svg-euro-calendario {
  background: url(../../img/sprite.css.svg) 4.35618% 94.03933% no-repeat; }

.svg-euro-calendario-dims {
  width: 40.7px;
  height: 36.2px; }

.svg-euro-entrada {
  background: url(../../img/sprite.css.svg) 99.94165% 52.97724% no-repeat; }

.svg-euro-entrada-dims {
  width: 58.1px;
  height: 40.2px; }

.svg-euro-exclamacion {
  background: url(../../img/sprite.css.svg) 2.85652% 94.22679% no-repeat; }

.svg-euro-exclamacion-dims {
  width: 41.4px;
  height: 41.4px; }

.svg-euro-salida {
  background: url(../../img/sprite.css.svg) 75.70199% 61.30738% no-repeat; }

.svg-euro-salida-dims {
  width: 57.8px;
  height: 40.2px; }

.svg-excel {
  background: url(../../img/sprite.css.svg) 33.09353% 90.22078% no-repeat; }

.svg-excel-dims {
  width: 20px;
  height: 23px; }

.svg-extranjero {
  background: url(../../img/sprite.css.svg) 60.9008% 63.96605% no-repeat; }

.svg-extranjero-dims {
  width: 58px;
  height: 58px; }

.svg-facebook {
  background: url(../../img/sprite.css.svg) 74.58909% 92.30769% no-repeat; }

.svg-facebook-dims {
  width: 50px;
  height: 50px; }

.svg-ficheros {
  background: url(../../img/sprite.css.svg) 99.97123% 59.34095% no-repeat; }

.svg-ficheros-dims {
  width: 19px;
  height: 25px; }

.svg-firmar {
  background: url(../../img/sprite.css.svg) 99.94975% 19.71136% no-repeat; }

.svg-firmar-dims {
  width: 14px;
  height: 17px; }

.svg-fondo-inversion-garantizados {
  background: url(../../img/sprite.css.svg) 91.37424% 92.10577% no-repeat; }

.svg-fondo-inversion-garantizados-dims {
  width: 44.3px;
  height: 44.3px; }

.svg-fondo-inversion-monetario {
  background: url(../../img/sprite.css.svg) 0 95.81114% no-repeat; }

.svg-fondo-inversion-monetario-dims {
  width: 40.7px;
  height: 40.7px; }

.svg-fondo-inversion-rentafija-euro {
  background: url(../../img/sprite.css.svg) 7.37479% 95.80747% no-repeat; }

.svg-fondo-inversion-rentafija-euro-dims {
  width: 40.6px;
  height: 40.6px; }

.svg-fondo-inversion-rentafijamixta-euro {
  background: url(../../img/sprite.css.svg) 1.47501% 95.81114% no-repeat; }

.svg-fondo-inversion-rentafijamixta-euro-dims {
  width: 40.7px;
  height: 40.7px; }

.svg-fondo-inversion-rentafijamixta-internacional {
  background: url(../../img/sprite.css.svg) 2.95002% 95.81114% no-repeat; }

.svg-fondo-inversion-rentafijamixta-internacional-dims {
  width: 40.7px;
  height: 40.7px; }

.svg-fondo-inversion-rentavariable-euro {
  background: url(../../img/sprite.css.svg) 4.42504% 95.81114% no-repeat; }

.svg-fondo-inversion-rentavariable-euro-dims {
  width: 40.7px;
  height: 40.7px; }

.svg-fondo-inversion-rentavariable-internacional {
  background: url(../../img/sprite.css.svg) 5.90005% 95.81114% no-repeat; }

.svg-fondo-inversion-rentavariable-internacional-dims {
  width: 40.7px;
  height: 40.7px; }

.svg-fondo-inversion-rentavariablemixta-euro {
  background: url(../../img/sprite.css.svg) 88.14285% 92.11991% no-repeat; }

.svg-fondo-inversion-rentavariablemixta-euro-dims {
  width: 44.7px;
  height: 44.7px; }

.svg-fondos-otros {
  background: url(../../img/sprite.css.svg) 84.16849% 63.96605% no-repeat; }

.svg-fondos-otros-dims {
  width: 58px;
  height: 58px; }

.svg-franquicia-bonificada-franquicia-igual-superior-300 {
  background: url(../../img/sprite.css.svg) 48.20934% 66.2037% no-repeat; }

.svg-franquicia-bonificada-franquicia-igual-superior-300-dims {
  width: 58px;
  height: 58px; }

.svg-franquicia-bonificada-franquicia-igual-superior-300-online {
  background: url(../../img/sprite.css.svg) 50.32458% 66.2037% no-repeat; }

.svg-franquicia-bonificada-franquicia-igual-superior-300-online-dims {
  width: 58px;
  height: 58px; }

.svg-gasolina {
  background: url(../../img/sprite.css.svg) 2.68364% 97.10671% no-repeat; }

.svg-gasolina-dims {
  width: 35.1px;
  height: 33.6px; }

.svg-gestion-servicios-juridicos-fallecimiento {
  background: url(../../img/sprite.css.svg) 54.55507% 66.2037% no-repeat; }

.svg-gestion-servicios-juridicos-fallecimiento-dims {
  width: 58px;
  height: 58px; }

.svg-gestion-servicios-juridicos-fallecimiento-online {
  background: url(../../img/sprite.css.svg) 56.67031% 66.2037% no-repeat; }

.svg-gestion-servicios-juridicos-fallecimiento-online-dims {
  width: 58px;
  height: 58px; }

.svg-gotita-icon {
  background: url(../../img/sprite.css.svg) 70.95273% 92.30769% no-repeat; }

.svg-gotita-icon-dims {
  width: 50px;
  height: 50px; }

.svg-grandes-almacenes-hiper-alimentacion {
  background: url(../../img/sprite.css.svg) 0 86.48649% no-repeat; }

.svg-grandes-almacenes-hiper-alimentacion-dims {
  width: 800px;
  height: 800px; }

.svg-grua {
  background: url(../../img/sprite.css.svg) 77.70777% 61.27216% no-repeat; }

.svg-grua-dims {
  width: 54.2px;
  height: 38.7px; }

.svg-hogar-digital {
  background: url(../../img/sprite.css.svg) 63.01605% 66.2037% no-repeat; }

.svg-hogar-digital-dims {
  width: 58px;
  height: 58px; }

.svg-hogar-digital-online {
  background: url(../../img/sprite.css.svg) 65.13129% 66.2037% no-repeat; }

.svg-hogar-digital-online-dims {
  width: 58px;
  height: 58px; }

.svg-hogar-electrodomesticos-electronica {
  background: url(../../img/sprite.css.svg) 99.99279% 35.65909% no-repeat; }

.svg-hogar-electrodomesticos-electronica-dims {
  width: 26.1px;
  height: 35.8px; }

.svg-hotel-restaurantes {
  background: url(../../img/sprite.css.svg) 85.37457% 63.4714% no-repeat; }

.svg-hotel-restaurantes-dims {
  width: 28.8px;
  height: 37.8px; }

.svg-icono_todas_valor {
  background: url(../../img/sprite.css.svg) 95.96447% 91.95402% no-repeat; }

.svg-icono_todas_valor-dims {
  width: 42px;
  height: 40px; }

.svg-impresora3 {
  background: url(../../img/sprite.css.svg) 73.59227% 66.2037% no-repeat; }

.svg-impresora3-dims {
  width: 58px;
  height: 58px; }

.svg-impuestos {
  background: url(../../img/sprite.css.svg) 89.76518% 92.11991% no-repeat; }

.svg-impuestos-dims {
  width: 44.7px;
  height: 44.7px; }

.svg-incendio-rayo-explosion {
  background: url(../../img/sprite.css.svg) 77.82276% 66.2037% no-repeat; }

.svg-incendio-rayo-explosion-dims {
  width: 58px;
  height: 58px; }

.svg-incendio-rayo-explosion-online {
  background: url(../../img/sprite.css.svg) 79.938% 66.2037% no-repeat; }

.svg-incendio-rayo-explosion-online-dims {
  width: 58px;
  height: 58px; }

.svg-infofiscal {
  background: url(../../img/sprite.css.svg) 9.49097% 93.74523% no-repeat; }

.svg-infofiscal-dims {
  width: 30px;
  height: 28px; }

.svg-informacion-mercados {
  background: url(../../img/sprite.css.svg) 13.10058% 95.45628% no-repeat; }

.svg-informacion-mercados-dims {
  width: 36px;
  height: 31px; }

.svg-intereses-comisiones {
  background: url(../../img/sprite.css.svg) 1.34145% 94.24124% no-repeat; }

.svg-intereses-comisiones-dims {
  width: 41.8px;
  height: 41.8px; }

.svg-interrogante {
  background: url(../../img/sprite.css.svg) 99.98564% 18.19566% no-repeat; }

.svg-interrogante-dims {
  width: 15px;
  height: 23px; }

.svg-leasing {
  background: url(../../img/sprite.css.svg) 52.43982% 68.44136% no-repeat; }

.svg-leasing-dims {
  width: 58px;
  height: 58px; }

.svg-letras-del-tesoro {
  background: url(../../img/sprite.css.svg) 54.55507% 68.44136% no-repeat; }

.svg-letras-del-tesoro-dims {
  width: 58px;
  height: 58px; }

.svg-libre-eleccion-taller {
  background: url(../../img/sprite.css.svg) 56.67031% 68.44136% no-repeat; }

.svg-libre-eleccion-taller-dims {
  width: 58px;
  height: 58px; }

.svg-libre-eleccion-taller-online {
  background: url(../../img/sprite.css.svg) 58.78556% 68.44136% no-repeat; }

.svg-libre-eleccion-taller-online-dims {
  width: 58px;
  height: 58px; }

.svg-linea-de-avales {
  background: url(../../img/sprite.css.svg) 60.9008% 68.44136% no-repeat; }

.svg-linea-de-avales-dims {
  width: 58px;
  height: 58px; }

.svg-linkedin {
  background: url(../../img/sprite.css.svg) 69.13455% 92.30769% no-repeat; }

.svg-linkedin-dims {
  width: 50px;
  height: 50px; }

.svg-listado {
  background: url(../../img/sprite.css.svg) 49.50991% 71.89045% no-repeat; }

.svg-listado-dims {
  width: 25px;
  height: 21px; }

.svg-lkpay {
  background: url(../../img/sprite.css.svg) 99.36242% 17.65615% no-repeat; }

.svg-lkpay-dims {
  width: 384.6px;
  height: 384.5px; }

.svg-logo {
  background: url(../../img/sprite.css.svg) 97.64486% 61.01908% no-repeat; }

.svg-logo-dims {
  width: 125px;
  height: 30px; }

.svg-logo-app {
  background: url(../../img/sprite.css.svg) 83.31275% 92.20131% no-repeat; }

.svg-logo-app-dims {
  width: 47px;
  height: 47px; }

.svg-logo-mini {
  background: url(../../img/sprite.css.svg) 14.34595% 95.45628% no-repeat; }

.svg-logo-mini-dims {
  width: 25px;
  height: 31px; }

.svg-lupa {
  background: url(../../img/sprite.css.svg) 99.88117% 36.90431% no-repeat; }

.svg-lupa-dims {
  width: 23px;
  height: 27px; }

.svg-menu {
  background: url(../../img/sprite.css.svg) 99.70408% 62.63957% no-repeat; }

.svg-menu-dims {
  width: 29px;
  height: 17px; }

.svg-menu-login {
  background: url(../../img/sprite.css.svg) 85.41155% 68.70549% no-repeat; }

.svg-menu-login-dims {
  width: 30px;
  height: 24.3px; }

.svg-mercados_norbolsa {
  background: url(../../img/sprite.css.svg) 79.938% 68.44136% no-repeat; }

.svg-mercados_norbolsa-dims {
  width: 58px;
  height: 58px; }

.svg-mis-cuentas-operativas {
  background: url(../../img/sprite.css.svg) 84.95826% 92.1836% no-repeat; }

.svg-mis-cuentas-operativas-dims {
  width: 45px;
  height: 46.5px; }

.svg-mobile {
  background: url(../../img/sprite.css.svg) 99.87805% 19.03495% no-repeat; }

.svg-mobile-dims {
  width: 12px;
  height: 18px; }

.svg-mobile-logo-bk {
  background: url(../../img/sprite.css.svg) 96.88427% 62.57011% no-repeat; }

.svg-mobile-logo-bk-dims {
  width: 104px;
  height: 47px; }

.svg-modificar-ingresos {
  background: url(../../img/sprite.css.svg) 81.26133% 60.95238% no-repeat; }

.svg-modificar-ingresos-dims {
  width: 41px;
  height: 25px; }

.svg-modificar-objetivo {
  background: url(../../img/sprite.css.svg) 8.8442% 95.78544% no-repeat; }

.svg-modificar-objetivo-dims {
  width: 40px;
  height: 40px; }

.svg-movimientos-entre-cuentas {
  background: url(../../img/sprite.css.svg) 99.83621% 33.47791% no-repeat; }

.svg-movimientos-entre-cuentas-dims {
  width: 52.5px;
  height: 67.7px; }

.svg-multiriesgos-empresas {
  background: url(../../img/sprite.css.svg) 56.67031% 70.67901% no-repeat; }

.svg-multiriesgos-empresas-dims {
  width: 58px;
  height: 58px; }

.svg-multiriesgos-empresas-online {
  background: url(../../img/sprite.css.svg) 58.78556% 70.67901% no-repeat; }

.svg-multiriesgos-empresas-online-dims {
  width: 58px;
  height: 58px; }

.svg-nomina-pension {
  background: url(../../img/sprite.css.svg) 95.66014% 65.40609% no-repeat; }

.svg-nomina-pension-dims {
  width: 69.5px;
  height: 34.8px; }

.svg-norbolsa-arroba {
  background: url(../../img/sprite.css.svg) 1.37532% 99.94336% no-repeat; }

.svg-norbolsa-arroba-dims {
  width: 37px;
  height: 37px; }

.svg-norbolsa-i {
  background: url(../../img/sprite.css.svg) 0 94.24847% no-repeat; }

.svg-norbolsa-i-dims {
  width: 37px;
  height: 42px; }

.svg-norbolsa-sobre {
  background: url(../../img/sprite.css.svg) 99.81858% 63.88486% no-repeat; }

.svg-norbolsa-sobre-dims {
  width: 44px;
  height: 27px; }

.svg-notificaciones-movil {
  background: url(../../img/sprite.css.svg) 99.98564% 15.26718% no-repeat; }

.svg-notificaciones-movil-dims {
  width: 15px;
  height: 30px; }

.svg-nuevoprestamo {
  background: url(../../img/sprite.css.svg) 85.141% 60.90598% no-repeat; }

.svg-nuevoprestamo-dims {
  width: 34px;
  height: 23px; }

.svg-ofertas-suscripcion {
  background: url(../../img/sprite.css.svg) 28.98551% 90.42732% no-repeat; }

.svg-ofertas-suscripcion-dims {
  width: 40px;
  height: 29px; }

.svg-off {
  background: url(../../img/sprite.css.svg) 99.91703% 91.63803% no-repeat; }

.svg-off-dims {
  width: 28px;
  height: 31px; }

.svg-ok {
  background: url(../../img/sprite.css.svg) 97.6801% 33.05942% no-repeat; }

.svg-ok-dims {
  width: 343px;
  height: 277px; }

.svg-operaciones-oficina {
  background: url(../../img/sprite.css.svg) 99.99636% 82.60335% no-repeat; }

.svg-operaciones-oficina-dims {
  width: 51.9px;
  height: 47.2px; }

.svg-operaciones-oficinas-cajeros {
  background: url(../../img/sprite.css.svg) 10.28975% 95.68279% no-repeat; }

.svg-operaciones-oficinas-cajeros-dims {
  width: 39px;
  height: 37.2px; }

.svg-operaciones_financieras {
  background: url(../../img/sprite.css.svg) 84.16849% 70.67901% no-repeat; }

.svg-operaciones_financieras-dims {
  width: 58px;
  height: 58px; }

.svg-ordenar {
  background: url(../../img/sprite.css.svg) 99.80645% 20.33384% no-repeat; }

.svg-ordenar-dims {
  width: 10px;
  height: 14px; }

.svg-ordenar-asc {
  background: url(../../img/sprite.css.svg) 99.80645% 20.86495% no-repeat; }

.svg-ordenar-asc-dims {
  width: 10px;
  height: 14px; }

.svg-ordenar-desc {
  background: url(../../img/sprite.css.svg) 99.80645% 21.39605% no-repeat; }

.svg-ordenar-desc-dims {
  width: 10px;
  height: 14px; }

.svg-pagares {
  background: url(../../img/sprite.css.svg) 35.52152% 89.20139% no-repeat; }

.svg-pagares-dims {
  width: 58px;
  height: 58px; }

.svg-pago-movil {
  background: url(../../img/sprite.css.svg) 99.53278% 69.49479% no-repeat; }

.svg-pago-movil-dims {
  width: 39px;
  height: 57px; }

.svg-pagos {
  background: url(../../img/sprite.css.svg) 39.75201% 89.20139% no-repeat; }

.svg-pagos-dims {
  width: 58px;
  height: 58px; }

.svg-pantalla-euro {
  background: url(../../img/sprite.css.svg) 41.86267% 89.20139% no-repeat; }

.svg-pantalla-euro-dims {
  width: 57.7px;
  height: 58px; }

.svg-pdf {
  background: url(../../img/sprite.css.svg) 33.81295% 90.22078% no-repeat; }

.svg-pdf-dims {
  width: 20px;
  height: 23px; }

.svg-perdida-valor-estetico {
  background: url(../../img/sprite.css.svg) 46.0868% 89.20139% no-repeat; }

.svg-perdida-valor-estetico-dims {
  width: 58px;
  height: 58px; }

.svg-perdida-valor-estetico-online {
  background: url(../../img/sprite.css.svg) 48.20204% 89.20139% no-repeat; }

.svg-perdida-valor-estetico-online-dims {
  width: 58px;
  height: 58px; }

.svg-pincho {
  background: url(../../img/sprite.css.svg) 85.19625% 70.03058% no-repeat; }

.svg-pincho-dims {
  width: 23px;
  height: 34px; }

.svg-plan-pension-clasico {
  background: url(../../img/sprite.css.svg) 54.55507% 61.32618% no-repeat; }

.svg-plan-pension-clasico-dims {
  width: 58px;
  height: 41px; }

.svg-plan-pension-garantizados {
  background: url(../../img/sprite.css.svg) 56.67031% 61.32618% no-repeat; }

.svg-plan-pension-garantizados-dims {
  width: 58px;
  height: 41px; }

.svg-plan-pension-mixto {
  background: url(../../img/sprite.css.svg) 58.78556% 61.32618% no-repeat; }

.svg-plan-pension-mixto-dims {
  width: 58px;
  height: 41px; }

.svg-plan-pension-monetario {
  background: url(../../img/sprite.css.svg) 60.9008% 61.32618% no-repeat; }

.svg-plan-pension-monetario-dims {
  width: 58px;
  height: 41px; }

.svg-plan-pension-variable {
  background: url(../../img/sprite.css.svg) 63.01605% 61.32618% no-repeat; }

.svg-plan-pension-variable-dims {
  width: 58px;
  height: 41px; }

.svg-planes-ahorro {
  background: url(../../img/sprite.css.svg) 65.13129% 61.32618% no-repeat; }

.svg-planes-ahorro-dims {
  width: 58px;
  height: 41px; }

.svg-planes-ahorro-online {
  background: url(../../img/sprite.css.svg) 52.43253% 89.20139% no-repeat; }

.svg-planes-ahorro-online-dims {
  width: 58px;
  height: 58px; }

.svg-planes-ciclo-de-vida {
  background: url(../../img/sprite.css.svg) 54.54778% 89.20139% no-repeat; }

.svg-planes-ciclo-de-vida-dims {
  width: 58px;
  height: 58px; }

.svg-posiciones-anteriores {
  background: url(../../img/sprite.css.svg) 86.52884% 92.1659% no-repeat; }

.svg-posiciones-anteriores-dims {
  width: 43px;
  height: 46px; }

.svg-postamail {
  background: url(../../img/sprite.css.svg) 79.67879% 61.15039% no-repeat; }

.svg-postamail-dims {
  width: 54.1px;
  height: 33.5px; }

.svg-prestamo-coche {
  background: url(../../img/sprite.css.svg) 67.24654% 61.32618% no-repeat; }

.svg-prestamo-coche-dims {
  width: 58px;
  height: 41px; }

.svg-prestamo-dispon {
  background: url(../../img/sprite.css.svg) 60.89351% 89.20139% no-repeat; }

.svg-prestamo-dispon-dims {
  width: 58px;
  height: 58px; }

.svg-prestamo-negocio {
  background: url(../../img/sprite.css.svg) 63.00875% 89.20139% no-repeat; }

.svg-prestamo-negocio-dims {
  width: 58px;
  height: 58px; }

.svg-prestamo-otros {
  background: url(../../img/sprite.css.svg) 69.36178% 61.32618% no-repeat; }

.svg-prestamo-otros-dims {
  width: 58px;
  height: 41px; }

.svg-prestamo-vivienda {
  background: url(../../img/sprite.css.svg) 71.47702% 61.32618% no-repeat; }

.svg-prestamo-vivienda-dims {
  width: 58px;
  height: 41px; }

.svg-print {
  background: url(../../img/sprite.css.svg) 85.34271% 89.27293% no-repeat; }

.svg-print-dims {
  width: 28px;
  height: 23px; }

.svg-proteccion-digital {
  background: url(../../img/sprite.css.svg) 67.23924% 89.20139% no-repeat; }

.svg-proteccion-digital-dims {
  width: 58px;
  height: 58px; }

.svg-proteccion-digital-online {
  background: url(../../img/sprite.css.svg) 69.35449% 89.20139% no-repeat; }

.svg-proteccion-digital-online-dims {
  width: 58px;
  height: 58px; }

.svg-puntos {
  background: url(../../img/sprite.css.svg) 99.7092% 39.95467% no-repeat; }

.svg-puntos-dims {
  width: 49px;
  height: 3px; }

.svg-puntos-largo {
  background: url(../../img/sprite.css.svg) 96.79748% 53.8912% no-repeat; }

.svg-puntos-largo-dims {
  width: 99px;
  height: 3px; }

.svg-puntos-medio {
  background: url(../../img/sprite.css.svg) 98.95353% 49.49377% no-repeat; }

.svg-puntos-medio-dims {
  width: 67px;
  height: 3px; }

.svg-recarga-movil {
  background: url(../../img/sprite.css.svg) 75.70022% 89.20139% no-repeat; }

.svg-recarga-movil-dims {
  width: 58px;
  height: 58px; }

.svg-recibos {
  background: url(../../img/sprite.css.svg) 100% 80.27629% no-repeat; }

.svg-recibos-dims {
  width: 52px;
  height: 44px; }

.svg-recibos-impuestos {
  background: url(../../img/sprite.css.svg) 99.6013% 71.62662% no-repeat; }

.svg-recibos-impuestos-dims {
  width: 41px;
  height: 53.2px; }

.svg-recibos-no-domiciliado {
  background: url(../../img/sprite.css.svg) 99.6013% 76.09365% no-repeat; }

.svg-recibos-no-domiciliado-dims {
  width: 41px;
  height: 53.2px; }

.svg-reinversion-dividendo {
  background: url(../../img/sprite.css.svg) 0 99.98162% no-repeat; }

.svg-reinversion-dividendo-dims {
  width: 38px;
  height: 38px; }

.svg-reloj {
  background: url(../../img/sprite.css.svg) 2.71346% 99.90513% no-repeat; }

.svg-reloj-dims {
  width: 36px;
  height: 36px; }

.svg-remesas {
  background: url(../../img/sprite.css.svg) 2.11524% 92.59259% no-repeat; }

.svg-remesas-dims {
  width: 58px;
  height: 58px; }

.svg-rentabilidad {
  background: url(../../img/sprite.css.svg) 4.23049% 92.59259% no-repeat; }

.svg-rentabilidad-dims {
  width: 58px;
  height: 58px; }

.svg-renting {
  background: url(../../img/sprite.css.svg) 6.34573% 92.59259% no-repeat; }

.svg-renting-dims {
  width: 58px;
  height: 58px; }

.svg-repetir {
  background: url(../../img/sprite.css.svg) 99.87805% 22.41183% no-repeat; }

.svg-repetir-dims {
  width: 12px;
  height: 13px; }

.svg-repetir-blanco {
  background: url(../../img/sprite.css.svg) 99.87805% 21.91885% no-repeat; }

.svg-repetir-blanco-dims {
  width: 12px;
  height: 13px; }

.svg-resumen-ahorro {
  background: url(../../img/sprite.css.svg) 92.88407% 92.06337% no-repeat; }

.svg-resumen-ahorro-dims {
  width: 41.4px;
  height: 43.1px; }

.svg-robo-hurto-expoliacion {
  background: url(../../img/sprite.css.svg) 14.80671% 92.59259% no-repeat; }

.svg-robo-hurto-expoliacion-dims {
  width: 58px;
  height: 58px; }

.svg-robo-hurto-expoliacion-online {
  background: url(../../img/sprite.css.svg) 16.92195% 92.59259% no-repeat; }

.svg-robo-hurto-expoliacion-online-dims {
  width: 58px;
  height: 58px; }

.svg-ropa-calzado-personal {
  background: url(../../img/sprite.css.svg) 99.62952% 38.48412% no-repeat; }

.svg-ropa-calzado-personal-dims {
  width: 46.8px;
  height: 61.4px; }

.svg-rotura-cristales {
  background: url(../../img/sprite.css.svg) 21.15244% 92.59259% no-repeat; }

.svg-rotura-cristales-dims {
  width: 58px;
  height: 58px; }

.svg-rotura-cristales-online {
  background: url(../../img/sprite.css.svg) 23.26769% 92.59259% no-repeat; }

.svg-rotura-cristales-online-dims {
  width: 58px;
  height: 58px; }

.svg-sanciones {
  background: url(../../img/sprite.css.svg) 99.60492% 73.86014% no-repeat; }

.svg-sanciones-dims {
  width: 41.1px;
  height: 53.2px; }

.svg-seguridad-social {
  background: url(../../img/sprite.css.svg) 99.60492% 78.32717% no-repeat; }

.svg-seguridad-social-dims {
  width: 41.1px;
  height: 53.2px; }

.svg-seguro-accidentes {
  background: url(../../img/sprite.css.svg) 29.61342% 92.59259% no-repeat; }

.svg-seguro-accidentes-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-accidentes-comfort {
  background: url(../../img/sprite.css.svg) 31.72867% 92.59259% no-repeat; }

.svg-seguro-accidentes-comfort-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-accidentes-comfort-online {
  background: url(../../img/sprite.css.svg) 33.84391% 92.59259% no-repeat; }

.svg-seguro-accidentes-comfort-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-accidentes-online {
  background: url(../../img/sprite.css.svg) 35.95915% 92.59259% no-repeat; }

.svg-seguro-accidentes-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-accidentes-super55 {
  background: url(../../img/sprite.css.svg) 38.0744% 92.59259% no-repeat; }

.svg-seguro-accidentes-super55-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-accidentes-super55-online {
  background: url(../../img/sprite.css.svg) 40.18964% 92.59259% no-repeat; }

.svg-seguro-accidentes-super55-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-baja-diaria {
  background: url(../../img/sprite.css.svg) 42.30489% 92.59259% no-repeat; }

.svg-seguro-baja-diaria-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-baja-diaria-online {
  background: url(../../img/sprite.css.svg) 44.42013% 92.59259% no-repeat; }

.svg-seguro-baja-diaria-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-coche-lunas {
  background: url(../../img/sprite.css.svg) 46.53538% 92.59259% no-repeat; }

.svg-seguro-coche-lunas-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-coche-lunas-online {
  background: url(../../img/sprite.css.svg) 48.65062% 92.59259% no-repeat; }

.svg-seguro-coche-lunas-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-coche-optima {
  background: url(../../img/sprite.css.svg) 50.76586% 92.59259% no-repeat; }

.svg-seguro-coche-optima-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-coche-optima-online {
  background: url(../../img/sprite.css.svg) 52.88111% 92.59259% no-repeat; }

.svg-seguro-coche-optima-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-coche-plus {
  background: url(../../img/sprite.css.svg) 54.99635% 92.59259% no-repeat; }

.svg-seguro-coche-plus-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-coche-plus-online {
  background: url(../../img/sprite.css.svg) 57.1116% 92.59259% no-repeat; }

.svg-seguro-coche-plus-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-coche-terceros {
  background: url(../../img/sprite.css.svg) 59.22684% 92.59259% no-repeat; }

.svg-seguro-coche-terceros-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-coche-terceros-online {
  background: url(../../img/sprite.css.svg) 61.34209% 92.59259% no-repeat; }

.svg-seguro-coche-terceros-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-coche-todo-riesgo {
  background: url(../../img/sprite.css.svg) 27.49818% 92.59259% no-repeat; }

.svg-seguro-coche-todo-riesgo-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-coche-todo-riesgo-online {
  background: url(../../img/sprite.css.svg) 25.38293% 92.59259% no-repeat; }

.svg-seguro-coche-todo-riesgo-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-coche-todo-riesgo-plus {
  background: url(../../img/sprite.css.svg) 82.04595% 89.20139% no-repeat; }

.svg-seguro-coche-todo-riesgo-plus-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-coche-todo-riesgo-plus-online {
  background: url(../../img/sprite.css.svg) 79.93071% 89.20139% no-repeat; }

.svg-seguro-coche-todo-riesgo-plus-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-combinada-agricola {
  background: url(../../img/sprite.css.svg) 77.81546% 89.20139% no-repeat; }

.svg-seguro-combinada-agricola-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-combinada-agricola-online {
  background: url(../../img/sprite.css.svg) 58.77826% 89.20139% no-repeat; }

.svg-seguro-combinada-agricola-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-combinado-industrial {
  background: url(../../img/sprite.css.svg) 37.63676% 89.20139% no-repeat; }

.svg-seguro-combinado-industrial-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-combinado-industrial-online {
  background: url(../../img/sprite.css.svg) 79.938% 70.67901% no-repeat; }

.svg-seguro-combinado-industrial-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-comercios {
  background: url(../../img/sprite.css.svg) 60.9008% 66.2037% no-repeat; }

.svg-seguro-comercios-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-comercios-online {
  background: url(../../img/sprite.css.svg) 56.67031% 63.96605% no-repeat; }

.svg-seguro-comercios-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-comunidades {
  background: url(../../img/sprite.css.svg) 48.20934% 61.7284% no-repeat; }

.svg-seguro-comunidades-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-comunidades-online {
  background: url(../../img/sprite.css.svg) 91.75784% 71.75926% no-repeat; }

.svg-seguro-comunidades-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-construccion {
  background: url(../../img/sprite.css.svg) 63.45733% 92.59259% no-repeat; }

.svg-seguro-construccion-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-construccion-online {
  background: url(../../img/sprite.css.svg) 12.69147% 92.59259% no-repeat; }

.svg-seguro-construccion-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-d-o {
  background: url(../../img/sprite.css.svg) 10.57622% 92.59259% no-repeat; }

.svg-seguro-d-o-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-d-o-online {
  background: url(../../img/sprite.css.svg) 8.46098% 92.59259% no-repeat; }

.svg-seguro-d-o-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-decenal {
  background: url(../../img/sprite.css.svg) 0 92.59259% no-repeat; }

.svg-seguro-decenal-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-decenal-online {
  background: url(../../img/sprite.css.svg) 84.1612% 89.20139% no-repeat; }

.svg-seguro-decenal-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-decesos-esencial {
  background: url(../../img/sprite.css.svg) 71.46973% 89.20139% no-repeat; }

.svg-seguro-decesos-esencial-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-decesos-esencial-online {
  background: url(../../img/sprite.css.svg) 65.124% 89.20139% no-repeat; }

.svg-seguro-decesos-esencial-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-decesos-esencial-prima-unica {
  background: url(../../img/sprite.css.svg) 56.66302% 89.20139% no-repeat; }

.svg-seguro-decesos-esencial-prima-unica-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-decesos-esencial-prima-unica-online {
  background: url(../../img/sprite.css.svg) 50.31729% 89.20139% no-repeat; }

.svg-seguro-decesos-esencial-prima-unica-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-equipos-electricos {
  background: url(../../img/sprite.css.svg) 43.97155% 89.20139% no-repeat; }

.svg-seguro-equipos-electricos-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-equipos-electricos-online {
  background: url(../../img/sprite.css.svg) 33.40627% 89.20139% no-repeat; }

.svg-seguro-equipos-electricos-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-hogar {
  background: url(../../img/sprite.css.svg) 31.29103% 89.20139% no-repeat; }

.svg-seguro-hogar-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-hogar-arrendador {
  background: url(../../img/sprite.css.svg) 29.17578% 89.20139% no-repeat; }

.svg-seguro-hogar-arrendador-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-hogar-arrendador-online {
  background: url(../../img/sprite.css.svg) 82.05325% 70.67901% no-repeat; }

.svg-seguro-hogar-arrendador-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-hogar-inquilino {
  background: url(../../img/sprite.css.svg) 75.70751% 70.67901% no-repeat; }

.svg-seguro-hogar-inquilino-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-hogar-inquilino-online {
  background: url(../../img/sprite.css.svg) 71.47702% 70.67901% no-repeat; }

.svg-seguro-hogar-inquilino-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-hogar-online {
  background: url(../../img/sprite.css.svg) 69.36178% 70.67901% no-repeat; }

.svg-seguro-hogar-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-hogar-optima {
  background: url(../../img/sprite.css.svg) 67.24654% 70.67901% no-repeat; }

.svg-seguro-hogar-optima-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-hogar-optima-online {
  background: url(../../img/sprite.css.svg) 65.13129% 70.67901% no-repeat; }

.svg-seguro-hogar-optima-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-hogar-top {
  background: url(../../img/sprite.css.svg) 63.01605% 70.67901% no-repeat; }

.svg-seguro-hogar-top-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-hogar-top-online {
  background: url(../../img/sprite.css.svg) 52.43982% 70.67901% no-repeat; }

.svg-seguro-hogar-top-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-incendios {
  background: url(../../img/sprite.css.svg) 50.32458% 70.67901% no-repeat; }

.svg-seguro-incendios-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-incendios-online {
  background: url(../../img/sprite.css.svg) 84.16849% 68.44136% no-repeat; }

.svg-seguro-incendios-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-la-negocio {
  background: url(../../img/sprite.css.svg) 82.05325% 68.44136% no-repeat; }

.svg-seguro-la-negocio-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-la-negocio-online {
  background: url(../../img/sprite.css.svg) 77.82276% 68.44136% no-repeat; }

.svg-seguro-la-negocio-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-la-negocio-plus {
  background: url(../../img/sprite.css.svg) 75.70751% 68.44136% no-repeat; }

.svg-seguro-la-negocio-plus-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-la-negocio-plus-online {
  background: url(../../img/sprite.css.svg) 73.59227% 68.44136% no-repeat; }

.svg-seguro-la-negocio-plus-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-moto {
  background: url(../../img/sprite.css.svg) 71.47702% 68.44136% no-repeat; }

.svg-seguro-moto-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-moto-online {
  background: url(../../img/sprite.css.svg) 69.36178% 68.44136% no-repeat; }

.svg-seguro-moto-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-moto-plus {
  background: url(../../img/sprite.css.svg) 63.01605% 68.44136% no-repeat; }

.svg-seguro-moto-plus-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-moto-plus-conductor {
  background: url(../../img/sprite.css.svg) 50.32458% 68.44136% no-repeat; }

.svg-seguro-moto-plus-conductor-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-moto-plus-conductor-online {
  background: url(../../img/sprite.css.svg) 48.20934% 68.44136% no-repeat; }

.svg-seguro-moto-plus-conductor-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-moto-plus-online {
  background: url(../../img/sprite.css.svg) 84.16849% 66.2037% no-repeat; }

.svg-seguro-moto-plus-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-moto-terceros-optima {
  background: url(../../img/sprite.css.svg) 82.05325% 66.2037% no-repeat; }

.svg-seguro-moto-terceros-optima-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-moto-terceros-optima-online {
  background: url(../../img/sprite.css.svg) 75.70751% 66.2037% no-repeat; }

.svg-seguro-moto-terceros-optima-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-otros {
  background: url(../../img/sprite.css.svg) 71.47702% 66.2037% no-repeat; }

.svg-seguro-otros-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-otros-online {
  background: url(../../img/sprite.css.svg) 69.36178% 66.2037% no-repeat; }

.svg-seguro-otros-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-proteccion-pagos {
  background: url(../../img/sprite.css.svg) 67.24654% 66.2037% no-repeat; }

.svg-seguro-proteccion-pagos-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-proteccion-pagos-online {
  background: url(../../img/sprite.css.svg) 89.64624% 69.5216% no-repeat; }

.svg-seguro-proteccion-pagos-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-responsabilidad-civil {
  background: url(../../img/sprite.css.svg) 82.05325% 63.96605% no-repeat; }

.svg-seguro-responsabilidad-civil-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-responsabilidad-civil-caza {
  background: url(../../img/sprite.css.svg) 79.938% 63.96605% no-repeat; }

.svg-seguro-responsabilidad-civil-caza-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-responsabilidad-civil-caza-online {
  background: url(../../img/sprite.css.svg) 77.82276% 63.96605% no-repeat; }

.svg-seguro-responsabilidad-civil-caza-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-responsabilidad-civil-online {
  background: url(../../img/sprite.css.svg) 75.70751% 63.96605% no-repeat; }

.svg-seguro-responsabilidad-civil-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-rotura-maquinaria {
  background: url(../../img/sprite.css.svg) 73.59227% 63.96605% no-repeat; }

.svg-seguro-rotura-maquinaria-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-rotura-maquinaria-online {
  background: url(../../img/sprite.css.svg) 71.47702% 63.96605% no-repeat; }

.svg-seguro-rotura-maquinaria-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-salud {
  background: url(../../img/sprite.css.svg) 69.36178% 63.96605% no-repeat; }

.svg-seguro-salud-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-salud-online {
  background: url(../../img/sprite.css.svg) 67.24654% 63.96605% no-repeat; }

.svg-seguro-salud-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-tr-construccion {
  background: url(../../img/sprite.css.svg) 65.13129% 63.96605% no-repeat; }

.svg-seguro-tr-construccion-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-tr-construccion-online {
  background: url(../../img/sprite.css.svg) 63.01605% 63.96605% no-repeat; }

.svg-seguro-tr-construccion-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-transporte-mercancias {
  background: url(../../img/sprite.css.svg) 58.78556% 63.96605% no-repeat; }

.svg-seguro-transporte-mercancias-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-transporte-mercancias-online {
  background: url(../../img/sprite.css.svg) 54.55507% 63.96605% no-repeat; }

.svg-seguro-transporte-mercancias-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-vida-mujer {
  background: url(../../img/sprite.css.svg) 50.32458% 63.96605% no-repeat; }

.svg-seguro-vida-mujer-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-vida-mujer-online {
  background: url(../../img/sprite.css.svg) 48.20934% 63.96605% no-repeat; }

.svg-seguro-vida-mujer-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-vida-optima {
  background: url(../../img/sprite.css.svg) 98.10357% 87.42284% no-repeat; }

.svg-seguro-vida-optima-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-vida-optima-online {
  background: url(../../img/sprite.css.svg) 95.98833% 87.42284% no-repeat; }

.svg-seguro-vida-optima-online-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-vida-relax {
  background: url(../../img/sprite.css.svg) 93.87309% 87.42284% no-repeat; }

.svg-seguro-vida-relax-dims {
  width: 58px;
  height: 58px; }

.svg-seguro-vida-relax-online {
  background: url(../../img/sprite.css.svg) 91.75784% 87.42284% no-repeat; }

.svg-seguro-vida-relax-online-dims {
  width: 58px;
  height: 58px; }

.svg-servicio-decesos {
  background: url(../../img/sprite.css.svg) 89.6426% 87.42284% no-repeat; }

.svg-servicio-decesos-dims {
  width: 58px;
  height: 58px; }

.svg-servicio-decesos-online {
  background: url(../../img/sprite.css.svg) 87.52735% 87.42284% no-repeat; }

.svg-servicio-decesos-online-dims {
  width: 58px;
  height: 58px; }

.svg-servicio-diagnostico-gratuito {
  background: url(../../img/sprite.css.svg) 91.75784% 85.18519% no-repeat; }

.svg-servicio-diagnostico-gratuito-dims {
  width: 58px;
  height: 58px; }

.svg-servicio-diagnostico-gratuito-online {
  background: url(../../img/sprite.css.svg) 93.87309% 80.70988% no-repeat; }

.svg-servicio-diagnostico-gratuito-online-dims {
  width: 58px;
  height: 58px; }

.svg-servicio-manitas-plus {
  background: url(../../img/sprite.css.svg) 91.75784% 80.70988% no-repeat; }

.svg-servicio-manitas-plus-dims {
  width: 58px;
  height: 58px; }

.svg-servicio-manitas-plus-online {
  background: url(../../img/sprite.css.svg) 87.52735% 80.70988% no-repeat; }

.svg-servicio-manitas-plus-online-dims {
  width: 58px;
  height: 58px; }

.svg-servicios-banca {
  background: url(../../img/sprite.css.svg) 11.70228% 95.49274% no-repeat; }

.svg-servicios-banca-dims {
  width: 39px;
  height: 32px; }

.svg-sobre {
  background: url(../../img/sprite.css.svg) 94.12613% 60.06452% no-repeat; }

.svg-sobre-dims {
  width: 25px;
  height: 15px; }

.svg-sobre2 {
  background: url(../../img/sprite.css.svg) 99.52727% 61.01908% no-repeat; }

.svg-sobre2-dims {
  width: 50px;
  height: 30px; }

.svg-sobre_abierto {
  background: url(../../img/sprite.css.svg) 96.16926% 44.4198% no-repeat; }

.svg-sobre_abierto-dims {
  width: 304.4px;
  height: 260.3px; }

.svg-sobre_cerrado {
  background: url(../../img/sprite.css.svg) 35.11698% 68.43749% no-repeat; }

.svg-sobre_cerrado-dims {
  width: 521.9px;
  height: 312.1px; }

.svg-sonriente {
  background: url(../../img/sprite.css.svg) 99.60958% 43.64522% no-repeat; }

.svg-sonriente-dims {
  width: 85px;
  height: 85px; }

.svg-sticker {
  background: url(../../img/sprite.css.svg) 99.56443% 30.52529% no-repeat; }

.svg-sticker-dims {
  width: 45px;
  height: 80px; }

.svg-stickerContactless {
  background: url(../../img/sprite.css.svg) 99.67883% 55.62548% no-repeat; }

.svg-stickerContactless-dims {
  width: 60px;
  height: 60px; }

.svg-stickerSimple {
  background: url(../../img/sprite.css.svg) 87.53054% 69.5216% no-repeat; }

.svg-stickerSimple-dims {
  width: 58.1px;
  height: 58px; }

.svg-stickerTitulo_cas {
  background: url(../../img/sprite.css.svg) 99.85294% 61.94189% no-repeat; }

.svg-stickerTitulo_cas-dims {
  width: 80px;
  height: 20.6px; }

.svg-stickerTitulo_eus {
  background: url(../../img/sprite.css.svg) 99.42647% 49.04161% no-repeat; }

.svg-stickerTitulo_eus-dims {
  width: 80px;
  height: 20.6px; }

.svg-suscripcion {
  background: url(../../img/sprite.css.svg) 82.62758% 60.92917% no-repeat; }

.svg-suscripcion-dims {
  width: 37px;
  height: 24px; }

.svg-tablas {
  background: url(../../img/sprite.css.svg) 89.6426% 71.75926% no-repeat; }

.svg-tablas-dims {
  width: 58px;
  height: 58px; }

.svg-tarjeta {
  background: url(../../img/sprite.css.svg) 96.51079% 60.01896% no-repeat; }

.svg-tarjeta-dims {
  width: 20px;
  height: 13px; }

.svg-tarjeta-gasoleobonificado {
  background: url(../../img/sprite.css.svg) 87.52735% 71.75926% no-repeat; }

.svg-tarjeta-gasoleobonificado-dims {
  width: 58px;
  height: 58px; }

.svg-tarjeta-mondragon-unibertsitatea {
  background: url(../../img/sprite.css.svg) 98.10722% 69.5216% no-repeat; }

.svg-tarjeta-mondragon-unibertsitatea-dims {
  width: 58px;
  height: 58px; }

.svg-tarjeta-viat {
  background: url(../../img/sprite.css.svg) 81.6122% 92.21548% no-repeat; }

.svg-tarjeta-viat-dims {
  width: 46px;
  height: 47.4px; }

.svg-tarjetas {
  background: url(../../img/sprite.css.svg) 99.0503% 36.04795% no-repeat; }

.svg-tarjetas-dims {
  width: 30.7px;
  height: 64px; }

.svg-telefonista {
  background: url(../../img/sprite.css.svg) 99.67883% 57.87505% no-repeat; }

.svg-telefonista-dims {
  width: 60px;
  height: 57px; }

.svg-tpv {
  background: url(../../img/sprite.css.svg) 91.76149% 69.5216% no-repeat; }

.svg-tpv-dims {
  width: 58px;
  height: 58px; }

.svg-transferencias {
  background: url(../../img/sprite.css.svg) 19.0372% 92.59259% no-repeat; }

.svg-transferencias-dims {
  width: 58px;
  height: 58px; }

.svg-transferencias-pagos {
  background: url(../../img/sprite.css.svg) 87.57846% 67.44347% no-repeat; }

.svg-transferencias-pagos-dims {
  width: 59.6px;
  height: 45.3px; }

.svg-transmitir-ficheros {
  background: url(../../img/sprite.css.svg) 30.32491% 90.28952% no-repeat; }

.svg-transmitir-ficheros-dims {
  width: 30px;
  height: 25px; }

.svg-transporte-viajes {
  background: url(../../img/sprite.css.svg) 91.75784% 76.23457% no-repeat; }

.svg-transporte-viajes-dims {
  width: 58px;
  height: 58px; }

.svg-traslado-completo {
  background: url(../../img/sprite.css.svg) 89.6426% 76.23457% no-repeat; }

.svg-traslado-completo-dims {
  width: 58px;
  height: 58px; }

.svg-traslado-completo-online {
  background: url(../../img/sprite.css.svg) 87.52735% 76.23457% no-repeat; }

.svg-traslado-completo-online-dims {
  width: 58px;
  height: 58px; }

.svg-triangulo-icon {
  background: url(../../img/sprite.css.svg) 76.40727% 92.2722% no-repeat; }

.svg-triangulo-icon-dims {
  width: 50px;
  height: 49px; }

.svg-triste {
  background: url(../../img/sprite.css.svg) 99.60958% 46.95906% no-repeat; }

.svg-triste-dims {
  width: 85px;
  height: 85px; }

.svg-twitter {
  background: url(../../img/sprite.css.svg) 67.31636% 92.30769% no-repeat; }

.svg-twitter-dims {
  width: 50px;
  height: 50px; }

.svg-vacio {
  background: url(../../img/sprite.css.svg) 5.82971% 93.85262% no-repeat; }

.svg-vacio-dims {
  width: 40px;
  height: 31px; }

.svg-varios {
  background: url(../../img/sprite.css.svg) 99.97817% 84.6918% no-repeat; }

.svg-varios-dims {
  width: 51.4px;
  height: 42.9px; }

.svg-varios2 {
  background: url(../../img/sprite.css.svg) 0 0 no-repeat; }

.svg-varios2-dims {
  width: 800px;
  height: 800px; }

.svg-varios3 {
  background: url(../../img/sprite.css.svg) 52.43982% 66.2037% no-repeat; }

.svg-varios3-dims {
  width: 58px;
  height: 58px; }

.svg-venta {
  background: url(../../img/sprite.css.svg) 7.27371% 93.81679% no-repeat; }

.svg-venta-dims {
  width: 38px;
  height: 30px; }

.svg-ver {
  background: url(../../img/sprite.css.svg) 95.78985% 60.04173% no-repeat; }

.svg-ver-dims {
  width: 21px;
  height: 14px; }

.svg-vivienda {
  background: url(../../img/sprite.css.svg) 99.74619% 65.38609% no-repeat; }

.svg-vivienda-dims {
  width: 42px;
  height: 34px; }

.svg-youtube {
  background: url(../../img/sprite.css.svg) 72.77091% 92.30769% no-repeat; }

.svg-youtube-dims {
  width: 50px;
  height: 50px; }

/* ==  Components  ======================= */
.drop-element {
  position: absolute;
  display: none;
  z-index: 100; }
  .drop-element.drop-open {
    display: block; }

/*doc
---
title: Textos
name: textos
category: Componentes - Textos
---

```html_example
<p>Texto normal</p>
<p class="bold">Texto enfatizado</p>
<p class="semibold">Texto semi-enfatizado</p>
<p class="value--red">-135,32 &euro;</p>
<p class="value--green">1.135,32 &euro;</p>
<p class="value--light-green">1.135,32 &euro;</p>
<p class="value--yellow">1.135,32 &euro;</p>
<p class="value--blue">1.135,32 &euro;</p>
<p class="value--real-red">1.135,32 &euro;</p>
<p class="value--dark-grey">1.135,32 &euro;</p>
```
*/
.value--red {
  color: #A50050; }

.value--green {
  color: #669200; }

.value--light-green {
  color: #84BD00; }

.value--yellow {
  color: #CF9D00; }

.value--blue {
  color: #1a9fca; }

.value--real-red {
  color: #E10000; }

.value--dark-grey {
  color: #666666; }

.bold {
  font-weight: bold !important; }

.semibold {
  font-weight: 600 !important; }

.interlineado {
  line-height: 2em; }

.font-size-small {
  font-size: 10px; }

/*doc
---
title: Icon
name: icon
category: Componentes - Icon
---

###icon--small
#####Estilo para iconos de tamaño pequeño
```html_example
  <div>
    <p class="margin-xsm">icon--small</p>
    <svg class="icon--small">
      <use xlink:href="#ahorro">
    </svg>
  </div>
```

###svg-icon
#####Clase Generica para tratar los iconos svg con diferentes posibilidades de tamaño listadas abajo.
```html_example
  <div class="margin-sm">
    <p class="margin-xsm">svg-icon</p>
    <svg class="svg-icon">
      <use xlink:href="#ahorro">
    </svg>
  </div>
```

Variante               | Descripción
-----------------------|------------------------------------------------
`.svg-icon--md`        | font-size: 1.2em;
`.svg-icon--lg`        | font-size: 1.5em;
`.svg-icon--xl`        | font-size: 2.5em;
`.svg-icon--xxl`       | font-size: 3.5em;
`.svg-icon--xxxl`      | font-size: 4.5em;

##Icono de Ayuda en linea
```html_example
  <div class="margin-sm">
    Aqui va el icono de ayuda
    <a class="inline-help inline-separator">
      <span class="sr-only">Ayuda</span>
    </a>
  </div>
```

##Iconos que podemos meter mediante html
```html_example
  <div class="margin-sm">
    <a href="#" class="link">
      Icono que oculta el contenido
      <span class="icon-hide-element"></span>
    </a>
  </div>

  <div class="margin-sm">
    <a href="#" class="link">
      Icono que muestra el contenido
      <span class="icon-show-element"></span>
    </a>
  </div>

  <div class="margin-sm">
    Icono flecha derecha
    <span class="icon-flecha-der inline-separator"></span>
  </div>

  <div class="margin-sm">
    Icono flecha fina hacia abajo
    <span class="icon-flecha-fina-abajo inline-separator"></span>
  </div>

  <div class="margin-sm">
    Icono lapiz
    <span class="icon-lapiz inline-separator"></span>
  </div>

  <div class="margin-sm">
    Icono ok
    <span class="icon-ok inline-separator"></span>
  </div>

  <div class="margin-sm">
    Icono papelera
    <span class="icon-papelera inline-separator"></span>
  </div>

  <div class="margin-sm">
    Icono reloj
    <span class="icon-reloj inline-separator"></span>
  </div>

  <div class="margin-sm">
    Icono warning
    <span class="icon-warning inline-separator"></span>
  </div>

  <div class="margin-sm">
    Icono info
    <span class="icon-info inline-separator"></span>
  </div>

  <div class="margin-sm">
    Icono alerta 2
    <span class="icon-alerta2 inline-separator"></span>
  </div>

  <div class="margin-sm">
    Icono error
    <span class="icon-error inline-separator"></span>
  </div>

  <div class="margin-sm">
    Icono candado cirulo
    <span class="icon-candado inline-separator"></span>
  </div>

  <div class="margin-sm">
    Icono candado solo
    <span class="icon-lock inline-separator"></span>
  </div>

  <div class="margin-sm">
    Icono casa
    <span class="icon-casa inline-separator"></span>
  </div>

  <div class="margin-sm">
    Icono repetir
    <span class="icon-repetir inline-separator"></span>
  </div>

  <div class="margin-sm">
    Icono Pegar
    <span class="icon-paste inline-separator"></span>
  </div>

  <div class="margin-sm">
    Icono seguro decesos
    <span class="icon-seguro-decesos inline-separator"></span>
  </div>

  <div class="margin-sm">
    Icono seguro accidentes
    <span class="icon-seguro-accidentes inline-separator"></span>
  </div>

  <div class="margin-sm">
    Icono seguro responsabilidad Civil
    <span class="icon-seguro-responsabilidad-civil inline-separator"></span>
  </div>

  <div class="margin-sm">
    Icono seguro otros
    <span class="icon-seguro-otros inline-separator"></span>
  </div>

  <div class="margin-sm">
    Icono seguro comercios
    <span class="icon-seguro-comercios inline-separator"></span>
  </div>

  <div class="margin-sm">
    Icono seguro baja diaria
    <span class="icon-seguro-baja-diaria inline-separator"></span>
  </div>

  <div class="margin-sm">
    Icono seguro hogar
    <span class="icon-seguro-hogar inline-separator"></span>
  </div>

  <div class="margin-sm">
    Icono seguro moto
    <span class="icon-seguro-moto inline-separator"></span>
  </div>

  <div class="margin-sm">
    Icono seguro salud
    <span class="icon-seguro-salud inline-separator"></span>
  </div>

  <div class="margin-sm">
    Icono seguro vida
    <span class="icon-seguro-vida inline-separator"></span>
  </div>

  <div class="margin-sm">
    Icono seguro coche
    <span class="icon-seguro-coche inline-separator"></span>
  </div>

  ```
*/
[class^="icon-"], [class^="icon-"]:before, [class*=" icon-"], [class*=" icon-"]:before {
  font-family: "lk-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon--small {
  width: 22px;
  height: 22px;
  vertical-align: bottom; }

.svg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  margin: 0;
  font-size: 1em; }

.svg-icon--md {
  font-size: 1.2em; }

.svg-icon--lg {
  font-size: 1.5em; }

.svg-icon--xl {
  font-size: 2.5em; }

.svg-icon--xxl {
  font-size: 3.5em; }

.svg-icon--xxxl {
  font-size: 4.5em; }

.icon-show-element:before {
  font-family: "lk-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\E609"; }

.icon-hide-element:before {
  font-family: "lk-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\E609"; }

.icon-hide-element:before {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg); }

.inline-help {
  vertical-align: sub;
  font-size: 1.3em; }
  .inline-help:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E90C";
    color: #C6B5C6;
    transition: color 0.3s; }
  .inline-help:hover:before {
    color: #51284F; }
  .inline-help, .inline-help a {
    color: #EAE7E0;
    text-decoration: none; }
  @media print {
    .inline-help {
      opacity: 0; } }

.inline-help.inline-help-magenta:before {
  color: #A50050; }

.icon-flecha-der:before {
  content: "\E606"; }

.icon-flecha-fina-abajo:before {
  content: "\E609"; }

.icon-copiar:before {
  content: "\E91E"; }

.icon-lapiz:before {
  content: "\E607"; }

.icon-ok:before {
  content: "\E60A"; }

.icon-papelera:before {
  content: "\E909"; }

.icon-reloj:before {
  content: "\E60D"; }

.icon-warning:before {
  content: "\E917";
  color: #E10000; }

.icon-info:before {
  content: "\E90C"; }

.icon-alert2:before {
  content: "\E915"; }

.icon-error:before {
  content: "\E900"; }

.icon-candado:before {
  content: "\E90D"; }

.icon-lock:before {
  content: "\E91B"; }

.icon-casa:before {
  content: "\E90E"; }

.icon-repetir:before {
  content: "\E910"; }

.icon-paste:before {
  content: "\E92D"; }

.icon-seguro-decesos:before {
  content: "\E902"; }

.icon-seguro-accidentes:before {
  content: "\E903"; }

.icon-seguro-responsabilidad-civil:before {
  content: "\E911"; }

.icon-seguro-otros:before {
  content: "\E912"; }

.icon-seguro-comercios:before {
  content: "\E913"; }

.icon-seguro-baja-diaria:before {
  content: "\E914"; }

.icon-seguro-hogar:before {
  content: "\E905"; }

.icon-seguro-moto:before {
  content: "\E906"; }

.icon-seguro-salud:before {
  content: "\E908"; }

.icon-seguro-vida:before {
  content: "\E907"; }

.icon-seguro-coche:before {
  content: "\E904"; }

.icon-pago-movil:before {
  content: "\E91F"; }

/*doc
---
title: Table
name: table
category: Componentes - Table
---

```html_example
  <div class="table-title">Titulo de tabla</div>

  <table class="table">
    <thead>
      <tr class="is-highlighted semibold">
        <th colspan="6">
          <span class="page-title3 semibold">Título integrado en tabla</span>
        </th>
      </tr>
      <tr>
        <th></th>
        <th class="is-sortable">
        Fecha
        <div class="table__sortable-icon"></div>
        </th>
        <th>Cat.</th>
        <th class="is-sortable is-sortable--desc">
        Concepto
        <div class="table__sortable-icon"></div>
        </th>
        <th class="is-sortable is-sortable--asc text-right">
        Importe
        <div class="table__sortable-icon"></div>
        </th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr class="is-checked">
        <td class="table__check-cell">
          <div class="checkbox">
            <input type="checkbox" name="1_1" id="1_1">
            <label for="1_1">
            </label>
          </div>
        </td>
        <td class="text-small">04/04/2015</td>
        <td>
          <svg class="icon--small">
            <use xlink:href="#ahorro">
          </svg>
        </td>
        <td>
          Recibo Movistar Fusión mes de marzo de 2015
        </td>
        <td class="text-right">
          <span class="value--red nowrap">-125,00 &euro;</span>
          <span class="table__value--variant1">Pendiente</span>
          <span class="table__value--variant2">Aplazable</span>
          <span class="table__value--variant3">Anulada</span>
        </td>
        <td class="table__cell--centered table__icon-button-cell nowrap">
            <a href="#" title="Compra" class="btn btn-default table__icon-button">V</a>
        </td>
      </tr>
      <tr class="is-highlighted">
        <td class="table__check-cell">
          <div class="checkbox">
            <input type="checkbox" name="1_1" id="1_1">
            <label for="1_1">
            </label>
          </div>
        </td>
        <td class="text-small">04/04/2015</td>
        <td>
          <svg class="icon--small">
            <use xlink:href="#tarjeta">
          </svg>
        </td>
        <td>
          Recibo Movistar Fusión mes de marzo de 2015
        </td>
        <td class="text-right">
          <span class="value--red nowrap">-125,00 &euro;</span>
        </td>
        <td class="table__cell--centered table__icon-button-cell nowrap">
            <a href="#" title="Compra" class="btn btn-default table__icon-button">C</a>
        </td>
      </tr>

    </tbody>


    <thead>
      <tr>
        <th colspan="6">
          <span class="page-title3 semibold">Título integrado en tabla</span>
        </th>
      </tr>
      <tr>
        <th></th>
        <th class="is-sortable">
        Fecha
        <div class="table__sortable-icon"></div>
        </th>
        <th>Cat.</th>
        <th class="is-sortable is-sortable--desc">
        Concepto
        <div class="table__sortable-icon"></div>
        </th>
        <th class="is-sortable is-sortable--asc text-right">
        Importe
        <div class="table__sortable-icon"></div>
        </th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr class="is-checked">
        <td class="table__check-cell">
          <div class="checkbox">
            <input type="checkbox" name="1_1" id="1_1" checked="checked">
            <label for="1_1">
            </label>
          </div>
        </td>
        <td class="text-small">04/04/2015</td>
        <td>
          <svg class="icon--small">
            <use xlink:href="#ahorro">
          </svg>
        </td>
        <td>
          Recibo Movistar Fusión mes de marzo de 2015
        </td>
        <td class="text-right">
          <span class="value--red nowrap">-125,00 &euro;</span>
          <span class="table__value--variant1">Pendiente</span>
          <span class="table__value--variant2">Aplazable</span>
          <span class="table__value--variant3">Anulada</span>
        </td>
        <td class="table__cell--centered table__icon-button-cell nowrap">
            <a href="#" title="Compra" class="btn btn-default table__icon-button">V</a>
        </td>
      </tr>
      <tr>
        <td class="table__check-cell">
          <div class="checkbox">
            <input type="checkbox" name="1_1" id="1_1">
            <label for="1_1">
            </label>
          </div>
        </td>
        <td class="text-small">04/04/2015</td>
        <td>
          <svg class="icon--small">
            <use xlink:href="#tarjeta">
          </svg>
        </td>
        <td>
          Recibo Movistar Fusión mes de marzo de 2015
        </td>
        <td class="text-right">
          <span class="value--red nowrap">-125,00 &euro;</span>
        </td>
        <td class="table__cell--centered table__icon-button-cell nowrap">
            <a href="#" title="Compra" class="btn btn-default table__icon-button">C</a>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="6" class="table__cell-more">
          <a href="#" class="table__more">Ver 50 más</a>
        </td>
      </tr>
    </tfoot>

  </table>
```

### Estilos para datos especiales
Variante                  | Descripción
--------------------------|------------------------------------------------
`.table__more--to-other-page` | Con flecha hacia la derecha indica que despliegas el contenido en otra página.

## Tabla con filas expandibles
```html_example
<table class="table is-expandable">
    <thead>
      <tr>
        <th class="is-sortable">Fecha</th>
        <th>Concepto</th>
        <th class="is-sortable">Importe</th>
        <th class="table__arrow-header"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>04/04/2015</td>
        <td>
          Recibo Movistar Fusión mes de marzo de 2015
        </td>
        <td class="text-right">
          <span class="value--red nowrap">-125,00 &euro;</span>
        </td>
        <td class="table__arrow-cell">
          <a href="#">
            <i class="table__arrow"></i>
          </a>
        </td>
      </tr>
      <tr>
        <td>04/04/2015</td>
        <td>
          Recibo Movistar Fusión mes de marzo de 2015
        </td>
        <td class="text-right">
          <span class="value--red nowrap">-125,00 &euro;</span>
        </td>
        <td class="table__arrow-cell">
          <a href="#">
            <i class="table__arrow"></i>
          </a>
        </td>
      </tr>
      <tr class="is-expanded">
        <td>04/04/2015</td>
        <td>
          Recibo Movistar Fusión mes de marzo de 2015
        </td>
        <td class="text-right">
          <span class="value--red nowrap">-125,00 &euro;</span>
        </td>
        <td class="table__arrow-cell">
          <a href="#">
            <i class="table__arrow"></i>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
```

### Estilos para datos especiales
Variante                  | Descripción
--------------------------|------------------------------------------------
`.table__value--variant1` | <span class='table__value--variant1'>Pendiente</span>
`.table__value--variant2` | <span class='table__value--variant2'>Aplazable</span>
`.table__value--variant3` | <span class='table__value--variant3'>Anulada</span>

*/
th {
  text-align: left; }

.table-title {
  padding: 5px;
  text-transform: uppercase;
  color: #51284F;
  background: #E5D0DA;
  font-size: 13px; }

.table {
  width: 100%; }
  .table tbody + thead:before {
    display: block;
    content: "";
    height: 13px; }
  .table tbody th {
    vertical-align: top; }
  .table,
  .table > thead {
    border-bottom: 1px solid #E3E1D7; }
  .table tbody > tr:not(.detail-row),
  .table .table__more {
    border-top: 1px solid #E3E1D7; }
  .table .tfoot-border--top {
    border-top: 1px solid #E3E1D7; }
  .table th, .table td {
    padding: 8px 3px;
    vertical-align: middle; }
    @media (min-width: 768px) {
      .table th, .table td {
        padding-left: 8px;
        padding-right: 8px; } }
  @media (min-width: 768px) {
    .table .table__header-fecha {
      width: 100px; } }
  @media (min-width: 768px) {
    .table .table__header-importe {
      width: 310px; } }
  .table .table__cell-max-width {
    word-wrap: break-word;
    max-width: 140px; }
    @media (min-width: 520px) {
      .table .table__cell-max-width {
        max-width: 260px; } }
    @media (min-width: 1024px) {
      .table .table__cell-max-width {
        max-width: none; } }
  .table .table__cell-max-width--large {
    max-width: 140px; }
    @media (min-width: 520px) {
      .table .table__cell-max-width--large {
        max-width: 260px; } }
    @media (min-width: 1024px) {
      .table .table__cell-max-width--large {
        max-width: none; } }
  .table th.is-sortable {
    position: relative;
    white-space: nowrap; }
    .table th.is-sortable:hover {
      cursor: pointer; }
    .table th.is-sortable .table__sortable-icon {
      display: inline-block;
      background-image: url(../../img/sprite.css.svg);
      background-size: 2800px 2650px;
      width: 10px;
      height: 14px;
      background-position: 99.80645% 20.33384%;
      vertical-align: middle;
      margin-left: 5px; }
    .table th.is-sortable.st-sort-ascent .table__sortable-icon {
      background-position: 99.80645% 20.86495%; }
    .table th.is-sortable.st-sort-descent .table__sortable-icon {
      background-position: 99.80645% 21.39605%; }
  .table tr.is-highlighted {
    background-color: #EAE7E0; }
  .table .expandable-row {
    transition: background-color 0.3s; }
    .table .expandable-row:hover, .table .expandable-row.is-expanded {
      cursor: pointer;
      background-color: #EAE7E0; }
      .table .expandable-row:hover .table__arrow:before, .table .expandable-row.is-expanded .table__arrow:before {
        color: #51284F; }
    @media (min-width: 768px) {
      .table .expandable-row.is-expanded + .detail-row {
        display: table-row; } }
    @media (min-width: 768px) {
      .table .expandable-row, .table .expandable-row + .detail-row {
        border-left: 1px solid transparent;
        border-right: 1px solid transparent; }
      .table .expandable-row:hover {
        border-left-color: #EAE7E0;
        border-right-color: #EAE7E0; }
      .table .expandable-row.is-expanded {
        border: 1px solid transparent;
        border-bottom-width: 0;
        border-color: #A50050; }
        .table .expandable-row.is-expanded .table__arrow:before {
          -webkit-transform: rotate(180deg);
              -ms-transform: rotate(180deg);
                  transform: rotate(180deg);
          color: #51284F; }
        .table .expandable-row.is-expanded + .detail-row {
          border: 1px solid transparent;
          border-top-width: 0;
          border-color: #A50050; } }

.detail-row {
  display: none; }

@media (max-width: 767px) {
  .detail-row--mobile {
    display: table-row; }
    .detail-row--mobile:hover {
      cursor: pointer; } }

tr.is-checked {
  background-color: #DAEBB0 !important; }

.table__check-cell {
  width: 30px; }
  @media (min-width: 768px) {
    .table__check-cell {
      width: 60px; } }

.table__cell--centered {
  display: table-cell;
  vertical-align: middle !important; }

@media (max-width: 767px) {
  .table__arrow-cell {
    width: 0;
    position: relative; }
    .table__arrow-cell:before {
      position: absolute;
      content: "";
      bottom: 0;
      right: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 0 16px 16px;
      border-color: transparent transparent #CCCCCC transparent; } }
    @media print and (max-width: 767px) {
      .table__arrow-cell:before {
        display: none; } }

@media (max-width: 767px) {
    .table__arrow-cell:after {
      position: absolute;
      content: "+";
      bottom: -1px;
      right: 2px;
      color: #fff;
      font-size: 9px; } }
    @media print and (max-width: 767px) {
      .table__arrow-cell:after {
        display: none; } }

@media (min-width: 768px) {
  .table__arrow-cell {
    display: none;
    vertical-align: middle !important;
    width: 30px; } }

@media (min-width: 768px) {
  .table__arrow:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E609";
    color: #C6B5C6;
    display: inline-block;
    font-size: 14px; }
  .table.is-expandable tr:hover .table__arrow,
  .table.is-expandable tr.is-expanded .table__arrow,
  .expandable-row:hover .table__arrow,
  .expandable-row.is-expanded .table__arrow {
    display: inline-block; } }

.table__arrow-header {
  display: none;
  width: 15px;
  padding-left: 0 !important; }

@media (min-width: 768px) {
  .table__arrow-cell,
  .table__arrow-header .table__arrow-footer {
    display: table-cell; } }

.table__cell-more {
  padding: 0 !important; }

.table__more {
  display: block;
  padding: 12px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  transition: all 0.3s; }
  .table__more:after {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E603";
    margin-left: 15px;
    font-size: 0.8em; }
  .table__more:hover {
    background-color: #51284F;
    color: #fff; }

.table__more--to-other-page:after {
  font-family: "lk-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\E606";
  margin-left: 15px;
  font-size: 0.8em; }

.table__value--variant1 {
  display: block;
  font-size: 12px;
  color: #CF9D00; }
  @media (min-width: 768px) {
    .table__value--variant1 {
      font-size: 13px;
      white-space: nowrap; } }

.table__value--variant2 {
  display: block;
  color: #A50050;
  font-weight: 600; }
  @media (min-width: 768px) {
    .table__value--variant2 {
      font-size: 13px;
      white-space: nowrap; } }

.table__value--variant3 {
  display: block;
  font-size: 12px;
  white-space: nowrap;
  color: #E10000; }
  @media (min-width: 768px) {
    .table__value--variant3 {
      font-size: 13px; } }

.table__icon-button {
  min-width: 0 !important;
  padding: 0.3em !important;
  width: 30px;
  height: 30px; }

.table__icon-button-cell {
  width: 30px; }

/* original: http://css-tricks.com/responsive-data-tables/ */
/* Solución a no repetir los data-title en código: https://github.com/awerlang/angular-responsive-tables/blob/master/src/directive.js */
.table--responsive {
  width: 100%;
  border-collapse: collapse; }

@media only screen and (max-width: 767px) {
  /* Force table to not be like tables anymore */
  /* table.table--responsive,*/
  .table--responsive thead,
  .table--responsive tbody,
  .table--responsive tr,
  .table--responsive th {
    display: block; }
  /* Hide table headers (but not display: none;, for accessibility) */
  .table--responsive thead tr, .table--responsive th {
    position: absolute;
    top: -9999px;
    left: -9999px; }
  .table--responsive tbody tr {
    border-top: 2px solid #C1BDB3; }
  .table--responsive td:nth-child(odd), .table--responsive td:nth-child(even) {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    white-space: normal;
    text-align: left;
    display: block;
    box-sizing: content-box;
    min-height: 1em; }
  .table--responsive td:nth-child(odd)::before,
  .table--responsive td:nth-child(even)::before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    left: 6px;
    width: 45%;
    padding-right: 10px;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    text-align: left;
    font-weight: bold;
    /*
        Label the data
        */
    content: attr(data-title); }
  .table--responsive td.table--responsive-omit-title:nth-child(odd),
  .table--responsive td.table--responsive-omit-title:nth-child(even) {
    padding-left: 6px; }
  .table--responsive td.table--responsive-omit-title::before {
    display: none; }
  .table--responsive td.table--responsive-omit-if-empty:empty {
    display: none; } }

/*doc
---
title: Inline list
name: inline-list
category: Componentes - Inline list
---

```html_example
<ul class="inline-list">
  <li>Elemento1</li>
  <li>Elemento2</li>
  <li>Elemento3</li>
</ul>
```

### Elementos más juntos
```html_example
<ul class="inline-list inline-list--short">
  <li>Elemento1</li>
  <li>Elemento2</li>
  <li>Elemento3</li>
</ul>
```

Variante                  | Descripción
--------------------------|------------------------------------------------
`.inline-list--mobile-block` | Cambia el display a block en versión mobile.

*/
.inline-list {
  list-style: none;
  display: inline-block; }
  .inline-list > li {
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 8.66667px; }
    .inline-list > li:last-child {
      margin-right: 0; }

.inline-list--short > li {
  margin-right: 7.5px; }

@media (max-width: 767px) {
  .inline-list--mobile-block {
    display: block;
    text-align: center; }
    .inline-list--mobile-block > li {
      display: block;
      margin-right: 0;
      margin-bottom: 8.66667px; } }

/*doc
---
title: Drop editor
name: drop-editor
category: Componentes - Drop editor
---

**Dependencia**: tether.js y drop.js

```html_example

Valor del campo
<a href="#" class="producto-header__editor js-text-field-editor">
  <i class="icon-lapiz"></i>
</a>
<div class="drop-editor">
  <input type="text" class="drop-editor__text-field">
  <button class="drop-editor__button js-ok"><i class="drop-editor__button-icon icon-ok"></i></button>
</div>
```

Podemos añadir un nombre del campo opcional con

`<label class="drop-editor__label">Editar el alias</label>`

*/
.drop-editor {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.23);
  background-color: #EAE7E0;
  padding: 10px;
  border: 1px solid #CCCCCC;
  display: none; }
  .drop-content .drop-editor {
    display: block; }

.drop-editor__label {
  display: block;
  font-size: 12px;
  font-weight: normal;
  margin-bottom: 0; }

.drop-editor__text-field, .drop-editor__button {
  vertical-align: middle;
  height: 30px; }

.drop-editor__text-field {
  width: 230px; }

.drop-editor__button {
  background-color: #A50050;
  color: #fff;
  border: none;
  margin-left: 10px;
  width: 30px; }

.drop-editor__button-icon {
  font-size: 12px;
  line-height: 2.5; }

/*doc
---
title: Tabs
name: tabs
category: Componentes - Tabs
---

###Tabs Estandar
```html_example
  <ul class="tabs">
    <div class="tabs__actions">
      <a href="" class="btn btn-primary">Acción</a>
    </div>

    <li class="tabs__tab">
      <a href="" class="tabs__link">
        Inactiva
      </a>
    </li>
    <li class="tabs__tab  is-active">
      <a href="" class="tabs__link">
        Activa
      </a>
    </li>
  </ul>
```
###Tabs más pequeña
```html_example
  <ul class="tabs tabs--small">
    <li class="tabs__tab">
      <a href="" class="tabs__link">
        Inactiva
      </a>
    </li>
    <li class="tabs__tab  is-active">
      <a href="" class="tabs__link">
        Activa
      </a>
    </li>
  </ul>
```

###Tabs con fondo
```html_example
  <ul class="tabs tabs--dark">
    <li class="tabs__tab">
      <a href="" class="tabs__link">
        Inactiva
      </a>
    </li>
    <li class="tabs__tab  is-active">
      <a href="" class="tabs__link">
        Activa
      </a>
    </li>
  </ul>
```

###Tabs con contenido con fondo
```html_example
  <ul class="tabs">
    <li class="tabs__tab">
      <a href="" class="tabs__link">
        Inactiva
      </a>
    </li>
    <li class="tabs__tab  is-active">
      <a href="" class="tabs__link">
        Activa
      </a>
    </li>
  </ul>
  <div class="tab-content tabs--dark">
    Aqui el contenido del tab.
  </div>
```
*/
.tabs {
  border-bottom: 1px solid #ddd;
  padding-left: 8.66667px; }
  .tabs:before, .tabs:after {
    content: " ";
    display: table; }
  .tabs:after {
    clear: both; }
  .tabs:not(.tabs--small) {
    margin-bottom: 13px; }
    @media (min-width: 625px) {
      .tabs:not(.tabs--small) {
        margin-bottom: 26px; } }

.tabs__tab {
  position: relative;
  display: block;
  float: left;
  margin-bottom: -1px;
  text-transform: uppercase; }
  @media (min-width: 625px) {
    .tabs:not(.tabs--small) .tabs__tab.is-active {
      font-size: 17px; }
    .tabs:not(.tabs--small) .tabs__tab:not(.is-active) {
      top: 6px; }
    .tabs--small .tabs__tab.is-active {
      font-weight: 600; } }

.tabs__link {
  position: relative;
  display: block;
  padding: 6px 8px;
  margin-right: 2px;
  line-height: 1.42857; }
  @media (min-width: 625px) {
    .tabs__link {
      padding: 8px 10px; } }
  .tabs--small .tabs__link {
    padding-left: 5px;
    padding-right: 5px;
    line-height: 1; }
  .tabs__tab:not(.is-active) .tabs__link {
    border: 1px solid transparent; }
    .tabs__tab:not(.is-active) .tabs__link:hover, .tabs__tab:not(.is-active) .tabs__link:focus {
      background-color: #eeeeee; }
    @media print {
      .tabs__tab:not(.is-active) .tabs__link {
        display: none; } }
  .tabs__tab.is-active .tabs__link, .tabs__tab.is-active .tabs__link:hover, .tabs__tab.is-active .tabs__link:focus {
    color: #7B0B56;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
    cursor: default; }
    .tabs--dark .tabs__tab.is-active .tabs__link, .tabs--dark .tabs__tab.is-active .tabs__link:hover, .tabs--dark .tabs__tab.is-active .tabs__link:focus {
      background-color: #EAE7E0; }

.tabs__actions {
  margin-bottom: 26px; }
  @media (min-width: 625px) {
    .tabs__actions {
      margin-bottom: 0;
      float: right; } }

.tab-content {
  padding-top: 13px; }
  .tab-content > *:first-child {
    margin-top: 0; }
  .tab-content.tabs--dark,
  .tabs--dark .tab-content {
    padding: 10px;
    background-color: #EAE7E0; }

/*doc
---
title: Link
name: link
category: Componentes - Link
---

```html_example
  <a href="#" class="link">Enlace estandar</a>
```
*/
.link {
  color: #A50050;
  text-decoration: underline;
  cursor: pointer; }

/*doc
---
title: Title container
name: title-container
category: Componentes - Title container
---

###Title container estandar
```html_example
<div class="title-container">
 <div class="title-container__caption">
   <div class= "page-title1">Titulo</div>
  <div class="title-container__caption-subtitle">
    Item extra dentro del captión
  </div>
 </div>
</div>
```

###Title container con acciones y centradas verticalmente
```html_example
<div class="title-container title-container--center-actions title-container--with-actions1">
  <div class="title-container__caption">
    Titulo
  </div>
  <div class="title-container__actions1">
    <a class="link" href="">Acción una</a>
  </div>
  <div class="title-container__actions2">
    <div>
      <a>
        <svg class="svg-lupa-dims">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#lupa">
        </use>
        </svg>
        Acción2
      </a>
    </div>
  </div>
</div>
```

###Title container con solo acciones en el lateral
```html_example
<div class="title-container title-container--only-actions">
  <div class="title-container__caption">
  </div>
  <div class="title-container__actions2 only-desktop">
    <ul class="actions-bar">
      <li>
        <a href="#" class="actions-bar__action">
          <svg class="icon-action">
            <use xlink:href="#pdf">
          </svg>
          PDF
        </a>
      </li>
      <li>
        <a href="#" class="actions-bar__action">
          <svg class="icon-action">
            <use xlink:href="#print">
          </svg>
          Imprimir
        </a>
      </li>
    </ul>
  </div>
</div>
```
*/
.title-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  margin-bottom: 13px; }
  @media (min-width: 768px) {
    .title-container {
      margin-bottom: 26px; } }

.title-container--center-actions {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.title-container--only-actions {
  margin-bottom: 13px;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end; }

.title-container__caption {
  margin-right: 13px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }
  .title-container--with-actions1 .title-container__caption {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0; }

@media (min-width: 768px) {
  .title-container__caption-subtitle {
    display: inline-block; } }

.title-container__actions1 {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

.title-container__actions2 {
  text-align: right; }

/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
/*doc
---
title: List items
name: list-items
category: Componentes - List items
---
### Listado simple
```html_example
<h4 class="list-title">Titulo listado</h4>
<ul class="list-items">
  <li class="list-items__item">
    item 1
  </li>
  <li class="list-items__item">
    item 2
  </li>
  <li class="list-items__item">
    item 3
  </li>
</ul>
```

### Listado con linea inferior separatoria
```html_example
<ul class="list-items">
  <li class="list-items__item list-items__item--separator">
    item 1
  </li>
  <li class="list-items__item list-items__item--separator">
    item 2
  </li>
  <li class="list-items__item list-items__item--separator">
    item 3
  </li>
</ul>
```

### Listado con items marcados
```html_example
<ul class="list-items">
  <li class="list-items__item list-items__item--marcado">
    item 1
  </li>
  <li class="list-items__item list-items__item--marcado">
    item 2
  </li>
  <li class="list-items__item list-items__item--marcado">
    item 3
  </li>
</ul>
```

Variante                  | Descripción
--------------------------|------------------------------------------------
`.list-items__item--sangrado` | Añadir Sangrado lateral al item.

*/
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
.list-title {
  text-transform: uppercase;
  color: #7B0B56;
  font-size: 15px;
  text-transform: capitalize;
  font-weight: 600; }
  @media (min-width: 625px) {
    .list-title {
      font-size: 17px; } }

.list-items__item {
  padding: 3px; }

.list-items__item--separator {
  position: relative; }
  .list-items__item--separator:not(:last-child):after {
    content: "";
    position: absolute;
    height: 1px;
    background: #EEEEEE;
    left: 13px;
    bottom: 0;
    right: 13px; }

.list-items__item--marcado {
  position: relative;
  padding-left: 20px; }
  .list-items__item--marcado:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E610";
    position: absolute;
    text-align: center;
    color: #669200;
    font-weight: bold;
    font-size: 13px;
    left: 2px;
    top: 5px; }
  .list-items__item--marcado:not(:last-child) {
    margin-bottom: 8.66667px; }

.list-items__item--sangrado {
  margin-left: 10px;
  margin-right: 15px; }
  @media (min-width: 768px) {
    .list-items__item--sangrado {
      margin-left: 50px; } }

.checkbox {
  padding-left: 20px; }
  .checkbox label {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding-left: 5px; }
    .checkbox label::before {
      content: "";
      display: inline-block;
      position: absolute;
      width: 17px;
      height: 17px;
      left: 0;
      margin-left: -20px;
      border: 1px solid #E3E1D7;
      border-radius: 3px;
      background-color: #fff;
      transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
    .checkbox label::after {
      display: inline-block;
      position: absolute;
      width: 16px;
      height: 16px;
      left: 0;
      top: 0;
      margin-left: -20px;
      padding-left: 3px;
      padding-top: 1px;
      font-size: 11px;
      color: #555555; }
  .checkbox input[type="checkbox"],
  .checkbox input[type="radio"] {
    opacity: 0;
    z-index: 1; }
    .checkbox input[type="checkbox"]:focus + label::before,
    .checkbox input[type="radio"]:focus + label::before {
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px; }
    .checkbox input[type="checkbox"]:checked + label::after,
    .checkbox input[type="radio"]:checked + label::after {
      font-family: "lk-icons";
      content: "\E60A"; }
    .checkbox input[type="checkbox"]:indeterminate + label::after,
    .checkbox input[type="radio"]:indeterminate + label::after {
      display: block;
      content: "";
      width: 10px;
      height: 3px;
      background-color: #555555;
      border-radius: 2px;
      margin-left: -16.5px;
      margin-top: 7px; }
    .checkbox input[type="checkbox"]:disabled + label,
    .checkbox input[type="radio"]:disabled + label {
      opacity: 0.65; }
      .checkbox input[type="checkbox"]:disabled + label::before,
      .checkbox input[type="radio"]:disabled + label::before {
        background-color: #eeeeee;
        cursor: not-allowed; }
  .checkbox.checkbox-circle label::before {
    border-radius: 50%; }
  .checkbox.checkbox-inline {
    margin-top: 0; }

.checkbox-primary input[type="checkbox"]:checked + label::before,
.checkbox-primary input[type="radio"]:checked + label::before {
  background-color: #51284F;
  border-color: #51284F; }

.checkbox-primary input[type="checkbox"]:checked + label::after,
.checkbox-primary input[type="radio"]:checked + label::after {
  color: #fff; }

.checkbox-danger input[type="checkbox"]:checked + label::before,
.checkbox-danger input[type="radio"]:checked + label::before {
  background-color: #d9534f;
  border-color: #d9534f; }

.checkbox-danger input[type="checkbox"]:checked + label::after,
.checkbox-danger input[type="radio"]:checked + label::after {
  color: #fff; }

.checkbox-info input[type="checkbox"]:checked + label::before,
.checkbox-info input[type="radio"]:checked + label::before {
  background-color: #5bc0de;
  border-color: #5bc0de; }

.checkbox-info input[type="checkbox"]:checked + label::after,
.checkbox-info input[type="radio"]:checked + label::after {
  color: #fff; }

.checkbox-warning input[type="checkbox"]:checked + label::before,
.checkbox-warning input[type="radio"]:checked + label::before {
  background-color: #f0ad4e;
  border-color: #f0ad4e; }

.checkbox-warning input[type="checkbox"]:checked + label::after,
.checkbox-warning input[type="radio"]:checked + label::after {
  color: #fff; }

.checkbox-success input[type="checkbox"]:checked + label::before,
.checkbox-success input[type="radio"]:checked + label::before {
  background-color: #5cb85c;
  border-color: #5cb85c; }

.checkbox-success input[type="checkbox"]:checked + label::after,
.checkbox-success input[type="radio"]:checked + label::after {
  color: #fff; }

.checkbox-primary input[type="checkbox"]:indeterminate + label::before,
.checkbox-primary input[type="radio"]:indeterminate + label::before {
  background-color: #51284F;
  border-color: #51284F; }

.checkbox-primary input[type="checkbox"]:indeterminate + label::after,
.checkbox-primary input[type="radio"]:indeterminate + label::after {
  background-color: #fff; }

.checkbox-danger input[type="checkbox"]:indeterminate + label::before,
.checkbox-danger input[type="radio"]:indeterminate + label::before {
  background-color: #d9534f;
  border-color: #d9534f; }

.checkbox-danger input[type="checkbox"]:indeterminate + label::after,
.checkbox-danger input[type="radio"]:indeterminate + label::after {
  background-color: #fff; }

.checkbox-info input[type="checkbox"]:indeterminate + label::before,
.checkbox-info input[type="radio"]:indeterminate + label::before {
  background-color: #5bc0de;
  border-color: #5bc0de; }

.checkbox-info input[type="checkbox"]:indeterminate + label::after,
.checkbox-info input[type="radio"]:indeterminate + label::after {
  background-color: #fff; }

.checkbox-warning input[type="checkbox"]:indeterminate + label::before,
.checkbox-warning input[type="radio"]:indeterminate + label::before {
  background-color: #f0ad4e;
  border-color: #f0ad4e; }

.checkbox-warning input[type="checkbox"]:indeterminate + label::after,
.checkbox-warning input[type="radio"]:indeterminate + label::after {
  background-color: #fff; }

.checkbox-success input[type="checkbox"]:indeterminate + label::before,
.checkbox-success input[type="radio"]:indeterminate + label::before {
  background-color: #5cb85c;
  border-color: #5cb85c; }

.checkbox-success input[type="checkbox"]:indeterminate + label::after,
.checkbox-success input[type="radio"]:indeterminate + label::after {
  background-color: #fff; }

.radio {
  padding-left: 20px; }
  .radio label {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding-left: 5px; }
    .radio label::before {
      content: "";
      display: inline-block;
      position: absolute;
      width: 17px;
      height: 17px;
      left: 0;
      margin-left: -20px;
      border: 1px solid #E3E1D7;
      border-radius: 50%;
      background-color: #fff;
      transition: border 0.15s ease-in-out; }
    .radio label::after {
      display: inline-block;
      position: absolute;
      content: " ";
      width: 11px;
      height: 11px;
      left: 3px;
      top: 3px;
      margin-left: -20px;
      border-radius: 50%;
      background-color: #555555;
      -webkit-transform: scale(0, 0);
      -ms-transform: scale(0, 0);
      transform: scale(0, 0);
      transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
      transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
      transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33), -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
  .radio input[type="radio"] {
    opacity: 0;
    z-index: 1; }
    .radio input[type="radio"]:focus + label::before {
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px; }
    .radio input[type="radio"]:checked + label::after {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
    .radio input[type="radio"]:disabled + label {
      opacity: 0.65; }
      .radio input[type="radio"]:disabled + label::before {
        cursor: not-allowed; }
  .radio.radio-inline {
    margin-top: 0; }

.radio-primary input[type="radio"] + label::after {
  background-color: #51284F; }

.radio-primary input[type="radio"]:checked + label::before {
  border-color: #51284F; }

.radio-primary input[type="radio"]:checked + label::after {
  background-color: #51284F; }

.radio-danger input[type="radio"] + label::after {
  background-color: #d9534f; }

.radio-danger input[type="radio"]:checked + label::before {
  border-color: #d9534f; }

.radio-danger input[type="radio"]:checked + label::after {
  background-color: #d9534f; }

.radio-info input[type="radio"] + label::after {
  background-color: #5bc0de; }

.radio-info input[type="radio"]:checked + label::before {
  border-color: #5bc0de; }

.radio-info input[type="radio"]:checked + label::after {
  background-color: #5bc0de; }

.radio-warning input[type="radio"] + label::after {
  background-color: #f0ad4e; }

.radio-warning input[type="radio"]:checked + label::before {
  border-color: #f0ad4e; }

.radio-warning input[type="radio"]:checked + label::after {
  background-color: #f0ad4e; }

.radio-success input[type="radio"] + label::after {
  background-color: #5cb85c; }

.radio-success input[type="radio"]:checked + label::before {
  border-color: #5cb85c; }

.radio-success input[type="radio"]:checked + label::after {
  background-color: #5cb85c; }

input[type="checkbox"].styled:checked + label:after,
input[type="radio"].styled:checked + label:after {
  font-family: "lk-icons";
  content: "\E60A"; }

input[type="checkbox"] .styled:checked + label::before,
input[type="radio"] .styled:checked + label::before {
  color: #fff; }

input[type="checkbox"] .styled:checked + label::after,
input[type="radio"] .styled:checked + label::after {
  color: #fff; }

/*doc
---
title: Form
name: form
category: Formularios - Form
---

Usamos como base los estilos de bootstrap.

###Formulario Estandar.


```html_example
<form class="form-horizontal">

  <div class="form-group">
    <label for="tipo" class="col-sm-3 control-label">Tipo</label>
    <div class="col-sm-9 form__field-col">
      <div class="checkbox checkbox-inline">
        <input type="checkbox" id="inlineCheckbox2" value="option2">
        <label for="inlineCheckbox2">Ingresos</label>
      </div>
      <div class="checkbox checkbox-inline">
        <input type="checkbox" id="inlineCheckbox3" value="option3">
        <label for="inlineCheckbox3">Gastos</label>
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="categoria" class="col-sm-3 control-label">Categoría</label>
    <div class="col-sm-9 form__field-col">
      <div class="select block">
        <select class="form-control" id="categoria">
          <option>Todas</option>
        </select>
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="importe_desde" class="col-sm-3 control-label">Importe</label>
    <div class="col-sm-9 form-inline form__field-col">
      Entre
      <input class="form-control" type="number" id="importe_desde" style="width: 85px">
      y
      <input class="form-control" type="number" style="width: 85px">
    </div>
  </div>

  <div class="form-group">
    <label for="concepto" class="col-sm-3 control-label">Concepto</label>
    <div class="col-sm-9 form__field-col">
      <input type="text" id="concepto" class="form-control">
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-3 control-label">
      <label>Descripción</label>
    </div>
    <div class="col-sm-9">
      <textarea class="form-control" rows="7" name="motivoQueja" placeholder="Escribir mensaje" required></textarea>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-3 col-sm-push-3 form-horizontal__action form-horizontal__action--primary">
      <button class="btn btn-primary">
          Continuar
      </button>
    </div>
    <div class="col-sm-9 col-sm-pull-9 form-horizontal__action form-horizontal__action--secondary">
      <button class="btn btn-secondary">
        Volver
      </button>
    </div>
  </div>
</form>
```

###Formulario a 2 columnas.


```html_example
<form class="form-horizontal">
  <div class="row">

    <div class="col-sm-6">
      <div class="form-group">
        <label for="tipo" class="col-sm-3 control-label">Tipo</label>
        <div class="col-sm-9 form__field-col">
          <div class="checkbox checkbox-inline">
            <input type="checkbox" id="inlineCheckbox2" value="option2">
            <label for="inlineCheckbox2">Ingresos</label>
          </div>
          <div class="checkbox checkbox-inline">
            <input type="checkbox" id="inlineCheckbox3" value="option3">
            <label for="inlineCheckbox3">Gastos</label>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-6">
      <div class="form-group">
        <label for="categoria" class="col-sm-3 control-label">Categoría</label>
        <div class="col-sm-9 form__field-col">
          <div class="select block">
            <select class="form-control" id="categoria">
              <option>Todas</option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-6">
      <div class="form-group">
        <label for="importe_desde" class="col-sm-3 control-label">Importe</label>
        <div class="col-sm-9 form-inline form__field-col">
          Entre
          <input class="form-control" type="number" id="importe_desde" style="width: 85px">
          y
          <input class="form-control" type="number" style="width: 85px">
        </div>
      </div>
    </div>

    <div class="col-sm-6">
      <div class="form-group">
        <label for="concepto" class="col-sm-3 control-label">Concepto</label>
        <div class="col-sm-9 form__field-col">
          <input type="text" id="concepto" class="form-control">
        </div>
      </div>
    </div>
  </div>

  <div class="box__bottom-element">
    <div class="form__button-container--right">
      <button class="btn btn-primary form__button">Buscar</button>
    </div>
  </div>
</form>
```

###Resumen Datos rellenados en el Formulario.

```html_example
<div class="form-horizontal form-horizontal--detail">
<div class="form-group">
  <div class="col-xs-5 control-label">label 1</div>
  <div class="col-xs-7">
    <p class="form-control-static">Dato 1</p>
  </div>
</div>
<div class="form-group">
  <div class="col-xs-5 control-label">label 2</div>
  <div class="col-xs-7">
    <p class="form-control-static">Dato 2</p>
  </div>
</div>

  <div class="margin-sm form-group-separator">
    <div class="margin-sm form-group-title">
    Titulo detalle
    </div>
    <div class="form-group">
      <div class="col-xs-5 control-label">label 1</div>
      <div class="col-xs-7">
        <p class="form-control-static">Dato 1</p>
      </div>
    </div>
    <div class="form-group">
      <div class="col-xs-5 control-label">label 2</div>
      <div class="col-xs-7">
        <p class="form-control-static">Dato 2</p>
      </div>
    </div>
  </div>
</div>
```
*/
.form-control {
  height: 34px;
  padding: 7px 10px; }
  @media (max-width: 767px) {
    .form-control {
      font-size: 12px; } }

@media (max-width: 767px) {
  .form-horizontal .checkbox-inline {
    padding-top: 0; } }

.form-horizontal--detail .form-control-static {
  font-weight: 600;
  min-height: auto;
  padding-bottom: 7px; }

.form-horizontal--detail .form-group {
  margin-bottom: 0; }

.form-horizontal--detail .control-label {
  padding-top: 7px;
  text-align: right; }
  @media (max-width: 767px) {
    .form-horizontal--detail .control-label {
      text-align: left; } }

.form-horizontal--detail .control-label--one-line {
  text-align: left; }

.form-group-separator {
  border-bottom: 1px solid #C1BDB3; }

.form-group-title {
  font-size: 17px;
  font-weight: 600; }

label {
  font-weight: 600; }
  @media (max-width: 767px) {
    label {
      margin-bottom: 2px; } }

@media (max-width: 767px) {
  .form-inline .form-control {
    display: inline-block; } }


.form-group {
  margin-bottom: 8.66667px; }
  @media (min-width: 768px) {
    
    .form-group {
      margin-bottom: 13px; } }

/*
  Estilos propios
*/
.form__field-col {
  font-size: 13px; }
  .form__field-col .form-control {
    font-size: 13px; }

.form__button-container--right {
  text-align: center; }
  @media (min-width: 768px) {
    .form__button-container--right {
      text-align: right; } }

.form__button {
  width: 100%; }
  @media (min-width: 520px) {
    .form__button {
      min-width: 300px;
      width: auto; } }
  @media (min-width: 768px) {
    .form__button {
      min-width: 1px; } }

.help-block {
  font-size: 0.95em;
  color: #666666 !important;
  margin-bottom: 0; }

/*doc
---
title: Select
name: Select
category: Formularios - Select
---

```html_example
<div class="select block">
  <select>
    <option>Opción uno</option>
    <option>Opción dos</option>
  </select>
</div>
```
*/
/*
  Requiere como base usar .reset-select
*/
html.ie9 .select select {
  height: 34px; }

html:not(.ie9) .select {
  position: relative;
  overflow: hidden;
  /* This hides native dropdown button arrow in IE */
  /* Focus style */
  /* This hides focus around selected option in FF */
  display: inline-block;
  height: 34px;
  vertical-align: middle;
  border: 1px solid #E3E1D7;
  background-color: #fff; }
  html:not(.ie9) .select select {
    /* Make sure the select is wider than the container so we can clip the arrow */
    width: 110%;
    max-width: 110%;
    min-width: 110%;
    /* Remove select styling */
    appearance: none;
    -webkit-appearance: none;
    /* Ugly Firefox way of doing it */
    -moz-appearance: window;
    text-indent: 0.01px;
    text-overflow: "";
    /* Magic font size number to prevent iOS text zoom */
    background: none;
    border: none;
    outline: none;
    /* Padding works surpringly well */
    padding: 0 42px 0 12px;
    line-height: 1.2;
    margin: 0;
    height: 34px; }
  html:not(.ie9) .select select::-ms-expand {
    display: none; }
  html:not(.ie9) .select select:focus {
    outline: none; }
  html:not(.ie9) .select select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000; }
  html:not(.ie9) .select:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E604";
    position: absolute;
    right: 0;
    top: 1px;
    bottom: 0;
    width: 35px;
    padding-top: 7px;
    z-index: 1;
    background: none;
    background-color: #fff;
    vertical-align: middle;
    /* This hack makes the select behind the arrow clickable in some browsers */
    pointer-events: none;
    font-size: 18px;
    text-align: center; }

.select.has-error {
  border: 1px solid #a94442 !important; }

/*doc
---
title: Checkboxes y Radio buttons
name: checkbox
category: Formularios - Checkboxes
---

### Checkboxes

**Dependencia:** [Awesome-bootstrap-checkbox](https://github.com/flatlogic/awesome-bootstrap-checkbox)

[Ejemplos](http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/) de todas las variantes posibles.

```html_example
<div class="checkbox checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1">
  <label for="inlineCheckbox1">Ingresos</label>
</div>

<div class="checkbox checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2">
  <label for="inlineCheckbox2">Gastos</label>
</div>
```

### Radio buttons

```html_example
<div class="radio radio-inline">
    <input type="radio" id="inlineRadio1" value="option1" name="radioInline" checked="">
    <label for="inlineRadio1"> Inline One </label>
</div>
<div class="radio radio-inline">
    <input type="radio" id="inlineRadio2" value="option2" name="radioInline">
    <label for="inlineRadio2"> Inline Two </label>
</div>
```

```html_example
<div class="radio radio--top-with-field">
  <input type="radio">
  <label for="tipoFinalizacionFechaConcreta">
    Radio con input y más
    <input type="text" />
    <p class="help-block">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
  </label>
</div>
```
*/
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
  margin-left: 10px; }

.radio input[type="radio"]:focus + label:before,
.checkbox input[type="checkbox"]:focus + label::before,
.checkbox input[type="radio"]:focus + label::before {
  outline: none; }

.radio input[type="radio"]:hover {
  cursor: pointer; }

.radio--with-content + .radio--with-content {
  margin-top: 13px; }

.checkbox,
.radio {
  padding-bottom: 2px;
  margin-top: 5px;
  margin-bottom: 5px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }
  .form-horizontal .checkbox, .form-horizontal
  .radio {
    padding-top: 5px;
    padding-bottom: 5px; }
    @media (min-width: 768px) {
      .form-horizontal .checkbox, .form-horizontal
      .radio {
        padding-top: 4px;
        padding-bottom: 0; } }
  .checkbox label[for=condiciones],
  .radio label[for=condiciones] {
    padding-left: 15px; }
  .checkbox label,
  .radio label {
    padding-left: 0px; }
    .checkbox label + *,
    .radio label + * {
      margin-top: 5px; }
    .checkbox label:before, .checkbox label:after,
    .radio label:before,
    .radio label:after {
      top: -1px;
      bottom: 0;
      margin-top: auto;
      margin-bottom: auto; }
  .checkbox > .tether-target,
  .radio > .tether-target {
    display: inline-block; }

.radio.radio--top-with-field label:before {
  top: 9px;
  margin-top: initial; }

.radio.radio--top-with-field label:after {
  top: 14px;
  margin-top: initial; }

.checkbox {
  padding-left: 24px; }
  .checkbox label:after,
  .checkbox label:before {
    margin-left: -23px; }
  .checkbox label:after {
    font-size: 9px;
    padding-top: 0.3em;
    color: #51284F; }

.checkbox--big {
  min-height: 40px !important; }
  .checkbox--big input[type="checkbox"]:checked + label:after {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E610";
    color: #669200;
    font-weight: bold;
    font-size: 13px;
    left: -2px; }
  .checkbox--big input[type="checkbox"]:checked + label:before {
    border-color: #669200; }
  .checkbox--big label:after {
    top: -0.1em;
    background-color: transparent; }
  .checkbox--big label:before {
    width: 30px;
    height: 30px;
    margin-left: -30px; }

.radio label:after {
  background-color: #51284F; }

.radio label:not(.radio-inline) {
  display: block; }

.radio {
  padding-left: 27px; }
  .radio label {
    padding: 4px 0; }
    .radio label:after {
      top: -0.1em;
      background-color: transparent; }
    .radio label:before {
      width: 22px;
      height: 22px;
      border: 2px solid #CCCCCC;
      margin-left: -27px; }
  .radio input[type="radio"]:checked + label:after {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E610";
    color: #669200;
    font-weight: bold;
    font-size: 13px;
    left: -2px; }
  .radio input[type="radio"]:checked + label:before {
    border-color: #669200; }
  .radio.radio--big {
    padding-left: 40px; }
    .radio.radio--big label {
      padding-top: 7px;
      padding-bottom: 7px; }
      .radio.radio--big label:before {
        width: 30px;
        height: 30px;
        margin-left: -40px; }
      .radio.radio--big label:after {
        top: -0.4em !important;
        font-size: 19px !important; }
    .radio.radio--big input[type="radio"]:checked + label:after {
      font-family: "lk-icons";
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      speak: none;
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      content: "\E610";
      left: -14px; }

.radio__full-width-content {
  margin-left: -27px; }

.icon-checkbox {
  padding-left: 0; }
  .icon-checkbox label:after,
  .icon-checkbox label:before {
    top: 3px;
    left: 6px;
    border: none;
    background-color: transparent;
    margin-left: 0;
    color: #669200;
    font-size: 13px; }

/*doc
---
title: input
name: Input
category: Formularios - Inputs
---

Diferentes tamaños de los inputs en los formularios.

```html_example
<div class="form-horizontal">
  <div class="form-group">
    <div class="col-sm-3 control-label">
      <label for="input--xxsmall">input--xxsmall</label>
    </div>
    <div class="col-sm-9">
      <input
      class="form-control input--xxsmall"
      type="text"
      name="input--xxsmall">
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-3 control-label">
      <label for="input--small">input--small</label>
    </div>
    <div class="col-sm-9">
      <input
      class="form-control input--small"
      type="text"
      name="input--small">
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-3 control-label">
      <label for="input--medium">input--medium</label>
    </div>
    <div class="col-sm-9">
      <input
      class="form-control input--medium"
      type="text"
      name="input--mediuml">
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-3 control-label">
      <label for="input--large">input--large</label>
    </div>
    <div class="col-sm-9">
      <input
      class="form-control input--large"
      type="text"
      name="input--large">
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-3 control-label">
      <label for="input--xlarge">input--xlarge</label>
    </div>
    <div class="col-sm-9">
      <input
      class="form-control input--xlarge"
      type="text"
      name="input--xlarge">
    </div>
  </div>
</div>
```
*/
.input--xxsmall {
  max-width: 35px; }

.input--small {
  max-width: 60px; }

.input--medium {
  max-width: 100px; }

.input--120 {
  max-width: 120px; }

.input--130 {
  max-width: 130px; }

.input--large {
  max-width: 200px; }

.input--xlarge {
  max-width: 300px; }
  @media (min-width: 1024px) {
    .input--xlarge {
      max-width: 260px; } }
  @media (min-width: 1200px) {
    .input--xlarge {
      max-width: 300px; } }

/*doc
---
title: Form Horizontal Actions
name: Form Horizontal Actions
category: Formularios - Form Horizontal Actions
---

Botones de acción en fomularios centrados en su versión movil.

Extendemos el compontente .form-horizontal de bootstrap

```html_example
<div class="row">
  <div class="col-sm-3 col-sm-push-3 form-horizontal__action form-horizontal__action--primary">
    <button class="btn btn-primary">
        Continuar
    </button>
  </div>
  <div class="col-sm-9 col-sm-pull-9 form-horizontal__action form-horizontal__action--secondary">
      <button class="btn btn-secondary">
          Volver atras
      </button>
  </div>

</div>
```
*/
.form-horizontal__action {
  text-align: center; }

.form-horizontal__action--primary {
  margin-top: 13px;
  margin-bottom: 13px; }
  @media (min-width: 768px) {
    .form-horizontal__action--primary {
      margin-top: 0;
      text-align: left; } }

.form-horizontal__action--secondary {
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1; }
  @media (min-width: 768px) {
    .form-horizontal__action--secondary {
      text-align: right; } }

/* ==  Modules  ========================== */
.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 47px;
  width: 100%;
  text-align: right;
  background-color: #A50050;
  border-top: 5px solid #fff;
  z-index: 200; }
  .main-nav:before, .main-nav:after {
    content: " ";
    display: table; }
  .main-nav:after {
    clear: both; }
  @media (min-width: 768px) {
    .main-nav {
      position: relative;
      width: auto;
      margin-left: -10px;
      margin-right: -10px;
      padding-left: 10px;
      padding-right: 10px;
      padding-right: 0;
      background-color: #A50050;
      height: 77px;
      border-top: 24px solid #fff; } }
  @media print {
    .main-nav {
      position: relative; } }

.main-nav__back {
  position: relative;
  float: left;
  width: 42px;
  height: 42px;
  border-right: 1px solid #51284F;
  transition: background-color 0.3s; }
  .main-nav__back:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E600";
    position: absolute;
    text-align: center;
    font-size: 24px;
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
    left: 0;
    right: 0;
    top: 50%;
    margin-top: -0.5em;
    color: #fff; }
  .main-nav__back:hover {
    background-color: #7B0B56; }
  @media (min-width: 768px) {
    .main-nav__back {
      display: none; } }

.main-nav__logo-bk {
  position: absolute;
  display: inline-block;
  background-image: url(../../img/sprite.css.svg);
  background-size: 2800px 2650px;
  width: 104px;
  height: 47px;
  background-position: 96.88427% 62.57011%;
  width: 104px;
  height: 47px;
  top: -5px;
  left: 0; }
  @media (min-width: 768px) {
    .main-nav__logo-bk {
      width: 212px;
      height: 95px;
      background: url(../../img/desktop-logo-bk-f1.svg) no-repeat;
      background-size: 265px 160px;
      background-position: -15px 0px;
      top: -42px;
      left: 0; } }
  @media (max-width: 767px) {
    .main-nav__back:not(.ng-hide) + .main-nav__logo-bk {
      left: 41px; } }

.main-nav__logo-bk-inline {
  position: absolute;
  left: -16px;
  width: 169px;
  top: -45px; }

.main-nav__logo {
  position: relative;
  z-index: 1;
  float: left;
  width: 25px;
  height: 30px;
  top: 11px;
  left: 15px; }
  @media (min-width: 768px) {
    .main-nav__logo {
      width: 125px;
      height: 30px;
      top: 54px;
      left: 44px; } }

.main-nav__user {
  display: inline-block;
  padding: 6px 10px;
  font-weight: 600;
  color: #fff; }
  @media (min-width: 768px) {
    .main-nav__user {
      line-height: 3; } }

.main-nav__buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  float: right; }
  .main-nav__buttons > li {
    display: inline-block; }
  @media (min-width: 768px) {
    .main-nav__buttons {
      position: relative;
      height: 100%;
      z-index: 1;
      display: inline-block;
      float: none; }
      .main-nav__buttons:before, .main-nav__buttons:after {
        content: " ";
        display: table; }
      .main-nav__buttons:after {
        clear: both; }
      .main-nav__buttons > li {
        float: left;
        height: 100%;
        max-width: 75px; } }

.main-nav__button {
  position: relative;
  display: inline-block;
  padding: 6px 10px;
  transition: background-color 0.3s; }
  .main-nav__button:hover, .main-nav__button:active, .main-nav__button:focus, .main-nav__button.tether-enabled {
    background-color: #7B0B56;
    color: #fff; }
  .main-nav__button.tether-enabled:after {
    position: absolute;
    z-index: 2001;
    content: '';
    bottom: -16px;
    left: 50%;
    margin-left: -8px;
    border: inset 8px;
    content: "";
    display: block;
    height: 0;
    width: 0;
    border-color: #7B0B56 transparent transparent transparent;
    border-top-style: solid; }
  @media (min-width: 768px) {
    .main-nav__button {
      height: 100%;
      padding: 6px 13px;
      transition: background-color 0.3s;
      text-align: center;
      color: #fff;
      min-width: 75px; } }

@media (min-width: 768px) {
  .main-nav__button-container {
    max-width: 75px !important; } }

@media (min-width: 768px) {
  .main-nav__button-container--big {
    max-width: 95px !important; } }

.main-nav__button-container--dropdown {
  max-width: 140px !important; }
  @media (min-width: 520px) {
    .main-nav__button-container--dropdown {
      max-width: 230px !important; } }

.main-nav__button--dropdown {
  position: relative;
  padding: 12px 45px 12px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px; }
  @media (min-width: 520px) {
    .main-nav__button--dropdown {
      max-width: 230px; } }
  @media (min-width: 768px) {
    .main-nav__button--dropdown {
      padding: 7px 13px;
      padding-right: 45px; } }
  .main-nav__button--dropdown:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E603";
    position: absolute;
    top: 50%;
    margin-top: -5px;
    right: 13px;
    font-size: 14px; }
  .main-nav__button--dropdown.drop-enabled {
    background-color: #7B0B56; }

.main-nav__button--text {
  position: relative;
  padding-top: 19px;
  max-width: 140px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }
  .main-nav__button--text:hover {
    background-color: inherit; }
  @media (min-width: 520px) {
    .main-nav__button--text {
      max-width: 230px; } }

.main-nav__button--big {
  padding-left: 36.4px;
  padding-right: 36.4px; }

.main-nav__button--dark {
  background-color: #7B0B56;
  border-left: 3px solid #A50050; }
  @media (max-width: 767px) {
    .main-nav__button--dark {
      padding: 9px 10px;
      border-left: 0px; } }
  .main-nav__button--dark:hover {
    background-color: #51284F; }

.main-nav__button--menu {
  padding-right: 10px;
  margin-left: 15px; }
  @media (min-width: 768px) {
    .main-nav__button--menu {
      padding-right: 13px;
      margin-left: 20px; } }

.main-nav__icon {
  width: 30px;
  height: 30px; }
  @media (min-width: 768px) {
    .main-nav__icon {
      width: 25px;
      height: 23px; } }

.main-nav__icon-text {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600; }
  @media screen and (max-width: 767px) {
    .main-nav__icon-text {
      display: none !important; } }

.main-nav__badge {
  position: absolute;
  right: 4px;
  top: 5px;
  padding: 2px 2px;
  min-width: 20px;
  line-height: 13px;
  background-color: #E10000;
  border: 2px solid #fff;
  border-radius: 100%;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center; }
  @media (min-width: 768px) {
    .main-nav__badge {
      right: 15px; } }

.main-nav__badge--contacto {
  background-color: #84BD00; }

.main-nav__desconectar {
  position: relative;
  top: 6px;
  width: 28px;
  height: 31px; }
  @media (max-width: 767px) {
    .main-nav__desconectar {
      top: 0px;
      width: 23px;
      height: 23px; } }

.main-nav__top-bar {
  position: absolute;
  right: 0;
  top: -19px;
  text-align: right;
  font-size: 10px; }

.main-nav__locale {
  position: relative;
  display: inline-block;
  padding-right: 16px;
  font-size: 10px;
  text-transform: uppercase; }
  .main-nav__locale:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E603";
    position: absolute;
    top: 3px;
    right: 0;
    font-size: 0.9em; }

.main-nav__exclamacion {
  position: absolute;
  right: 4px;
  top: 5px;
  min-width: 20px;
  line-height: 13px;
  align: center;
  background-color: #fff;
  background: "\E915";
  border: 2px solid #fff;
  border-radius: 100%;
  font-size: 15px;
  font-weight: bold;
  text-align: center; }
  @media (min-width: 768px) {
    .main-nav__exclamacion {
      right: 15px; } }
  .main-nav__exclamacion:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E915";
    color: #E10000; }

.notificacion_cursiva {
  font-style: italic; }

/* Para poner el triangulico que marca que está activo. sacado de flaps.scss
&.is-active {
  $triangle-size: 10px;

  &:before {
    position: absolute;
    top: -($triangle-size * 2);
    left: 50%;
    margin-left: -$triangle-size;
    @include css-triangle($triangle-size, #fff, bottom);
  }
}
*/
.slideout-menu {
  position: fixed;
  left: auto;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
  width: 256px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: none; }

.slideout-panel {
  position: relative; }

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
  overflow: hidden; }

.slideout-open .slideout-menu {
  display: block; }

.mobile-main-menu {
  padding: 15px; }

/*doc
---
title: Page Title
name: page-title
category: Componentes - Page Title
---

### Títulos de la página
```html_example
  <div class="page-title1 page-title__underline">Page Title 1</div>
  <div class="page-title1 page-title__underline">Page Title underline</div>
  <div class="page-title2">Page Title 2</div>
  <div class="page-title3">Page Title 3</div>
  <div class="page-title-bold">Page Title Bold</div>
```

### Bloque de título de la página con icono
```html_example
<div class="page-title">
  <div class="page-title__text">
    Titulo
  </div>

  <div class="page-title__icon">
    <a>
      <svg class="svg-lupa-dims">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#lupa">
        </use>
      </svg>
      Icono
    </a>
  </div>

</div>
```

Variante               | Descripción
-----------------------|------------------------------------------------
`.page-title + mobile-full-width`   | Permite a un elemento del container ocupar de lado a lado (sin margenes)
`.page-title--only-mobile`   | Que solo se pinte en Versión Móvil
`.page-title__underline`   | Subrayado opcional en titulos

*/
.page-title {
  display: table;
  width: 100%;
  margin-bottom: 8.66667px; }
  .mobile-full-width .page-title {
    margin-left: 10px; }
    @media (min-width: 768px) {
      .mobile-full-width .page-title {
        margin-left: 13px; } }

@media (min-width: 768px) {
  .page-title--only-mobile {
    display: none !important; } }

.page-title__text {
  display: table-cell;
  vertical-align: middle;
  text-transform: uppercase;
  color: #7B0B56;
  font-size: 17px; }

.page-title__icon {
  display: table-cell;
  text-align: right; }

.page-title__underline {
  margin-bottom: 8.66667px;
  padding-bottom: 2px;
  border-bottom: 1px solid #EAE7E0; }

.page-title1 {
  text-transform: uppercase;
  color: #7B0B56;
  font-size: 17px;
  margin-bottom: 13px;
  margin-bottom: 13px; }
  @media (min-width: 625px) {
    .page-title1 {
      font-size: 24px; } }
  @media (min-width: 768px) {
    .page-title1 {
      margin-bottom: 26px; } }
  @media (min-width: 768px) {
    .page-title1 {
      margin-bottom: 26px; } }

.page-title2 {
  text-transform: uppercase;
  color: #7B0B56;
  font-size: 15px; }
  @media (min-width: 625px) {
    .page-title2 {
      font-size: 17px; } }

.page-title3 {
  text-transform: uppercase;
  color: #7B0B56;
  font-size: 13px;
  margin-bottom: 13px; }
  @media (min-width: 625px) {
    .page-title3 {
      font-size: 15px; } }

.page-title-bold {
  margin-bottom: 13px;
  text-transform: uppercase;
  color: #7B0B56;
  font-size: 15px;
  text-transform: none;
  color: #51284F;
  font-weight: 600; }
  @media (min-width: 625px) {
    .page-title-bold {
      font-size: 17px; } }

/*doc
---
title: Desktop Main Menu
name: desktop-main-menu
category: Componentes - Desktop Main Menu
---

```html_example
  <div class="desktop-main-menu">
    <ul class="desktop-main-menu__items">
      <li>
        <a class="desktop-main-menu__item is-active">
          <span class="icon-casa desktop-main-menu__item-icon"></span>
          <span>Posición total</span>
        </a>
      </li>
      <li>
        <a href="" class="desktop-main-menu__item" >
          Financiación
        </a>
      </li>
      <li>
        <a href="" class="desktop-main-menu__item" >
          Ahorro e Inversión
        </a>
      </li>
    </ul>
  </div>
```
*/
.desktop-main-menu {
  margin-left: -10px;
  margin-right: -10px;
  text-align: center;
  border-bottom: 1px solid #CCCCCC;
  background-color: #fff; }
  @media screen and (max-width: 767px) {
    .desktop-main-menu {
      display: none !important; } }

.desktop-main-menu__items {
  position: relative;
  z-index: 180; }
  .desktop-main-menu__items > li {
    display: inline-block; }

.desktop-main-menu__item {
  position: relative;
  display: inline-block;
  padding: 10px;
  font-size: 13px;
  text-transform: uppercase; }
  .desktop-main-menu__item:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #A50050;
    transition: opacity 0.3s;
    opacity: 0; }
  .desktop-main-menu__item:hover:before, .desktop-main-menu__item.is-active:before {
    opacity: 1; }

.desktop-main-menu__item-icon {
  margin-right: 3px; }

/*doc
---
title: Selector Producto
name: selector-producto
category: Componentes - Selector Producto
---

```html_example
<div class="selector-producto js-selector-producto" data-target="#productos" aria-expanded="false">
  <div class="selector-producto__detalle">1234 1234 1234 1234</div>
  <div class="selector-producto__arrow" aria-hidden="true"></div>
</div>

<ul id="productos" class="selector-producto-items" aria-hidden="true" tabindex="-1">
  <li>
    <a href="#" class="selector-producto-items__item">
    <div class="selector-producto-items__nombre">1111 1111 1111 1111</div>
    </a>
  </li>
  <li>
    <a href="#" class="selector-producto-items__item">
      <div class="selector-producto-items__nombre">2222 2222 2222 2222</div>
    </a>
  </li>
  <li>
    <a href="#" class="selector-producto-items__item selector-producto-items__item--secundario">
      <div class="selector-producto-items__nombre">Item secundario</div>
    </a>
  </li>
</ul>
```
*/
.selector-producto-items__nombre {
  text-transform: uppercase;
  color: #51284F;
  font-weight: 600;
  font-size: 13px; }

.selector-producto__detalle, .selector-producto-items__cuenta,
.selector-producto-items__titularidad {
  font-size: 12px;
  color: #999999; }

.selector-producto {
  display: table;
  position: relative;
  min-height: 30px;
  padding-right: 35px;
  max-width: 300px;
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border: 1px solid #CCCCCC; }
  .selector-producto:hover {
    cursor: pointer;
    background-color: #F5F5F1; }

.selector-producto__body {
  display: table-cell;
  vertical-align: middle;
  min-width: 180px; }

.selector-producto__detalle {
  color: #51284F;
  font-size: 11px;
  line-height: 1.4;
  padding: 5px; }
  @media (min-width: 768px) {
    .selector-producto__detalle {
      font-size: 13px; } }

.selector-producto__arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 30px;
  text-align: center;
  border: 1px solid #E3E1D7;
  font-size: 16px;
  background-color: #fff; }
  .selector-producto__arrow:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E604";
    position: absolute;
    left: -2px;
    top: 50%;
    margin-top: -7px; }
  .selector-producto.drop-enabled .selector-producto__arrow:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E605";
    left: 1px; }
  @media print {
    .selector-producto__arrow {
      display: none; } }

.selector-producto-items {
  width: 300px;
  z-index: 10;
  background-color: white;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.23);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  .selector-producto-items > li:not(:last-child) {
    border-bottom: 1px solid #E3E1D7; }

.selector-producto-items__item {
  position: relative;
  display: block;
  padding: 8.66667px;
  background-color: #F5F5F1;
  /*@include icon($icon-flecha-fina-der) {
        position: absolute;
        right: $spacing-xsm;
        top: 50%;
        margin-top: -11px;
        font-size: 22px;
        color: $gris;
      }*/ }
  .selector-producto-items__item:hover, .selector-producto-items__item.is-selected {
    background-color: #E5D0DA;
    cursor: pointer; }

.selector-producto-items__item--grande {
  min-height: 52px; }

.selector-producto-items__item--secundario {
  padding-left: 13px;
  padding-top: 13px;
  padding-bottom: 13px; }
  .selector-producto-items__item--secundario .selector-producto-items__nombre {
    font-weight: normal; }

.selector-producto-items__item--desplegable {
  padding-right: 30px; }
  .selector-producto-items__item--desplegable:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E609";
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -5px;
    font-size: 14px; }
  .selector-producto-items__item--desplegable.is-open:before {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg); }

.selector-producto-items__item--destacado {
  background-color: #51284F;
  padding-left: 13px;
  padding-top: 13px;
  padding-bottom: 13px; }
  .selector-producto-items__item--destacado .selector-producto-items__nombre, .selector-producto-items__item--destacado:before {
    color: #fff; }
  .selector-producto-items__item--destacado:hover {
    background-color: #40203e; }

.selector-producto-items__icono-container {
  float: left;
  display: inline-block; }
  .selector-producto-items__icono-container, .selector-producto-items__icono-container .selector-producto-items__icono {
    max-width: 40px; }
  .selector-producto-items__icono-container + .selector-producto-items__body {
    padding-left: 50px; }

.selector-producto-items__icono-container--big, .selector-producto-items__icono-container--big .selector-producto-items__icono {
  max-width: 60px; }

.selector-producto-items__icono-container--big + .selector-producto-items__body {
  padding-left: 70px; }

.selector-producto-items__icono {
  max-height: 30px;
  margin-right: 13px; }

.selector-producto-items__icono--big {
  max-height: 40px; }

/*doc
---
title: Main Container
name: main-container
category: Componentes - Main container
---

```html_example
  <header class="main-container">
    Contenido del Container
  </header>
```

Variante               | Descripción
-----------------------|------------------------------------------------
`.container__element--full-width`   | Permite a un elemento del container ocupar de lado a lado (sin margenes)
`.main-container__first-element--no-top-margin`  | Permite al primer elemento no dejar margen superior y se superpondrá con la franja verde

*/
@media print {
  .container {
    width: 100% !important; } }

.container__element--full-width {
  margin-left: -10px;
  margin-right: -10px; }

.main-container {
  padding-top: 60px;
  padding-bottom: 26px; }
  @media (min-width: 768px) {
    .main-container {
      padding-top: 13px; } }

.main-container__first-element--no-top-margin {
  margin-top: -13px; }
  @media (min-width: 768px) {
    .main-container__first-element--no-top-margin {
      margin-top: -13px; } }

/*doc
---
title: Main Header
name: main-header
category: Componentes - Main Header
---
Cabecera superior de las páginas que te ubica en el producto que te encuentras

```html_example
<header class="main-header">
  Contenido del Header
</header>
```
*/
.main-header {
  background-color: #EAE7E0;
  margin-left: -10px;
  margin-right: -10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 13px;
  padding-bottom: 13px; }

/*doc
---
title: Main Content
name: main-content
category: Componentes - Main Content
---

**main-content-header**: permite tener un bloque superior con body y aside independiente del principal, utilizado cuando queremos poder ocultar la columna aside principal

**main-content**: Layout principal del contenido central de las páginas

```html_example
  <div class="main-content-header">
    <div class="main-content-body margin">
      Contenido principal del main-content-header
    </div>

    <div class="main-content-aside">
      Contenido lateral del main-content-header
    </div>
  </div>

  <div class="main-content">

    <div class="main-content-body">
      Contenido principal del Main-content
    </div>

    <div class="main-content-aside">
      Contenido lateral del Main-content
    </div>
  </div>
```

Variante               | Descripción
-----------------------|------------------------------------------------
`.main-content-body--full-width`   | Permite que el contenido en mobile vaya de lado a lado y no deje ningún margen lateral.

*/
@media (min-width: 1024px) {
  .main-content-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%; } }

@media print {
  .main-content-header {
    display: none; } }

@media (min-width: 1024px) {
  .main-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%; } }

.main-content-body {
  position: relative; }
  .main-content-header .main-content-body {
    margin-bottom: 13px; }
  @media (min-width: 1024px) {
    .main-content-body {
      width: 1%;
      -webkit-box-flex: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
      margin-right: 0; }
      .main-content-header .main-content-body {
        margin-bottom: 0; } }
  @media (min-width: 1200px) {
    .main-content-body {
      padding-right: 39px; } }
  .main-content-body.is-empty {
    margin-bottom: 0; }

@media (min-width: 768px) {
  .main-content-body--full-width {
    margin-left: -10px;
    margin-right: -10px; } }

.main-content-aside {
  transition: width 0.5s 0s; }
  .main-content-header .main-content-aside {
    margin-bottom: 13px; }
  @media (min-width: 768px) {
    .main-content-aside {
      -webkit-box-flex: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
      margin-left: -10px;
      margin-right: -10px; } }
  @media (min-width: 1024px) {
    .main-content-aside {
      -webkit-box-flex: 0;
          -ms-flex-positive: 0;
              flex-grow: 0;
      width: 290px;
      margin-right: -10px;
      margin-left: 26px; } }
  @media (min-width: 1200px) {
    .main-content-aside {
      width: 370px; } }
  .main-content-aside.is-closed {
    width: 30px;
    transition: width 0.5s 0.2s; }
  @media print {
    .main-content-aside {
      display: none; } }

/*doc
---
title: Producto Header
name: producto-header
category: Componentes - Producto Header
---

Cabecera superior de un producto donde vemos su icono, detalle y datos

##Cabecera de producto con cifra lateral derecha.
```html_example
  <header class="main-header">
    <div class="producto-header-wrapper">
      <div class="producto-header producto-header--datos-small producto-header--no-line">

        <div class="producto-header__producto-container">
          <div class="producto-header__icon-container">
            <svg class="producto-header__icon">
              <use xlink:href="#cuenta-valores">
            </svg>

            <a class="producto-header__detalle">ver detalle</a>
          </div>

          <div class="producto-header__producto">
            <div class="producto-header__alias">
              TODAS MIS CUENTAS DE BOLSA
              <span class="producto-header__desactivado">
                (desactivada)
              </span>

              <a href="#" class="producto-header__editor">
                <i class="icon-lapiz"></i>
              </a>

              <div class="drop-editor">
                <input type="text" class="drop-editor__text-field">
                <button class="drop-editor__button"><i class="drop-editor__button-icon icon-ok"></i></button>
              </div>
            </div>

            <lk-selector-de-cuentas>
            </lk-selector-de-cuentas>
          </div>
        </div>

        <div class="producto-header__datos">
          <div class="producto-header__saldo">
            <span class="nowrap value--green">2000,00 €</span>
          </div>
          <div>
            <a class="producto-header__puntos">
              200 puntos
            </a>
          </div>
        </div>
      </div>
    </div>
  </header>
```
##Cabecera de producto con gráfica importes.
```html_example
<header class="main-header">
  <div class="producto-header-wrapper">
    <div class="producto-header">

      <div class="producto-header__producto-container">
        <div class="producto-header__icon-container js-inner-link">
          <svg class="producto-header__icon">
            <use xlink:href="#prestamo-vivienda"></use>
          </svg>

          <a href="#" class="producto-header__detalle">ver detalle</a>
        </div>

        <div class="producto-header__producto">
          <div class="producto-header__alias">
            Prestamo compra Vivienda
            <a href="#" class="producto-header__editor js-text-field-editor">
              <i class="icon-lapiz"></i>
            </a>
            <div class="drop-editor">
              <input type="text" class="drop-editor__text-field">
              <button class="drop-editor__button js-ok"><i class="drop-editor__button-icon icon-ok"></i></button>
            </div>
          </div>

          <lk-selector-de-cuentas>
          </lk-selector-de-cuentas>

          <div class="producto-header__descripcion">
            Inicio: 12/05/2015
            <span class="inline-separator">Fin: 12/05/2045</span>
          </div>
        </div>
      </div>

      <div class="producto-header__datos producto-header__datos--with-graphic">

        <lk-grafica-importes
          class="margin-sm"
          importe1="200"
          importe2="400"
          importe-limite="600"
          ocultar-limite="true"
          invertir-colores-con-neutro="true"
          importe1-label="Amortizado"
          importe2-label="Pendiente">
        </lk-grafica-importes>

        <div class="text-faded">
          Próxima cuota: 12/02/2016
          <span class="value--red semibold"> 550€ </span>
        </div>

      </div>

    </div>
    </div>
</header>
```

##Cabecera de producto con datos laterales
```html_example
<header class="main-header">
  <div class="producto-header-wrapper">
    <div class="producto-header producto-header--datos-small producto-header--no-line" ng-class="{ 'producto-header--desactivado': vm.cuentaActiva.desactivada }">

      <div class="producto-header__producto-container">
        <div class="producto-header__icon-container">
          <svg class="producto-header__icon">
            <use xlink:href="#fondo-inversion-garantizados">
          </svg>

          <a ui-sref="lknet({page: 'cuenta.detalle', id: id})"
             class="producto-header__detalle"
             ng-hide="vm.cuentaActiva.esAgregada">ver detalle</a>
        </div>

        <div class="producto-header__producto">
          <div class="producto-header__alias">
            TODOS MIS FONDOS DE INVERSIÓN

            <a href="#" class="producto-header__editor">
              <i class="icon-lapiz"></i>
            </a>

            <div class="drop-editor">
              <input type="text" class="drop-editor__text-field">
              <button class="drop-editor__button"><i class="drop-editor__button-icon icon-ok"></i></button>
            </div>
          </div>
          <lk-selector-de-cuentas>
          </lk-selector-de-cuentas>
        </div>
      </div>

      <div class="text-right">
        <span class="nowrap value--green semibold text-xlarge">+4,5%</span>
      </div>

      <div class="producto-header__datos">
        <div class="producto-header__saldo margin-xsm">
          <span class="nowrap value--green inline-separator--bigger">7450,50 €</span>
        </div>
        <div>
          <div class="producto-header__descripcion">
            Valor liquidativo:<span class="value--green semibold"> 2500€ </span>
          </div>
          <div class="producto-header__descripcion">
            Participaciones:<span class="value--red semibold"> 3000€ </span>
          </div>
        </div>
      </div>

    </div>
  </div>
</header>
```

##Cabecera de producto tarjetas de credito (indicando que tiene sticker)
```html_example
<header class="main-header">
  <div class="producto-header-wrapper">
    <div class="producto-header producto-header--bigger" ng-class="{ 'producto-header--datos-small': vm.tarjetaActiva.esDeDebito() }">

      <div class="producto-header__producto-container">
        <div class="producto-header__icon-container">
          <img src="../../img/tarjetas/ani001.jpg" class="producto-header__icon producto-header__icon--shadow"/>
          <img src="../../img/tarjeta-capa-datos.png" class="producto-header__tarjeta-datos-falsos__img" />
          <div class="producto-header__tarjeta-datos-falsos__nombre only-desktop">
            Sandra Perez Martinez
          </div>
          <svg class="producto-header__sticker">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stickerSimple"></use>
          </svg>

          <a href="#" class="producto-header__detalle">ver detalle</a>
        </div>

        <div class="producto-header__producto">
          <div class="producto-header__alias">
            Tarjeta de credito Sandra
            <a href="#" class="producto-header__editor">
              <i class="icon-lapiz"></i>
            </a>
            <div class="drop-editor">
              <input type="text" class="drop-editor__text-field">
              <button class="drop-editor__button js-ok"><i class="drop-editor__button-icon icon-ok"></i></button>
            </div>
          </div>

          <div class="producto-header__descripcion">
            Descripción de la tarjeta
          </div>


          <lk-selector-de-tarjetas tarjeta-activa="vm.tarjetaActiva"
            tarjetas="vm.tarjetas" tarjetas-desactivadas="vm.tarjetasDesactivadas"
            tarjeta-cambiada="vm.tarjetaCambiada(nuevaTarjetaId)">
          </lk-selector-de-tarjetas>

        </div>
      </div>
    </div>
  </div>
</header>
```
*/
.producto-header-line-2 {
  text-align: right; }
  @media (min-width: 768px) {
    .producto-header-line-2 {
      padding-left: 76px;
      text-align: left; } }
  @media print, (min-width: 1024px) {
    .producto-header-line-2 {
      display: none; } }

.producto-header-wrapper {
  width: 100%; }
  @media (min-width: 768px) {
    .producto-header-wrapper {
      padding-left: 50px;
      padding-right: 50px; } }
  @media (min-width: 1024px) {
    .producto-header-wrapper {
      padding-left: 100px;
      padding-right: 100px; } }

@media (min-width: 1024px) {
  .producto-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end; } }

@media (min-width: 768px) {
  .producto-header--datos-small {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; } }

@media (min-width: 768px) {
  .producto-header__producto-container {
    min-width: 400px; } }

.producto-header__icon-container {
  float: left;
  position: relative;
  width: 60px;
  margin-right: 70px;
  text-align: center; }
  @media (min-width: 768px) {
    .producto-header__icon-container {
      margin-right: 20px; } }
  @media print {
    .producto-header__icon-container .producto-header__detalle {
      display: none; } }
  @media (min-width: 768px) {
    .producto-header--bigger .producto-header__icon-container {
      width: 120px; } }

.producto-header__icon {
  max-width: 60px;
  max-height: 43px; }
  @media (min-width: 768px) {
    .producto-header--bigger .producto-header__icon {
      max-width: 110px;
      max-height: 90px; } }

.producto-header__tarjeta-datos-falsos__img {
  position: absolute;
  top: 1px;
  right: 2px;
  width: 90%; }
  @media (min-width: 768px) {
    .producto-header__tarjeta-datos-falsos__img {
      right: 6px; } }

.producto-header__tarjeta-datos-falsos__nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  bottom: 26px;
  left: 16px;
  width: 240px;
  color: #fff;
  text-shadow: 1px 1px 1px #333;
  font-size: 7px;
  text-transform: uppercase;
  text-align: left; }
  @media (min-width: 768px) {
    .producto-header__tarjeta-datos-falsos__nombre {
      width: 100px; } }

.producto-header__icon--shadow {
  border-radius: 5px;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5); }

.producto-header__icon--con-sticker {
  position: relative;
  z-index: 2;
  max-width: 74px !important;
  max-height: 60px !important;
  margin-bottom: 12px;
  margin-top: 18px;
  left: 14px;
  top: -3px; }
  @media (min-width: 768px) {
    .producto-header__icon--con-sticker {
      margin-bottom: 11px;
      margin-top: 17px;
      left: 1px; } }

.producto-header__sticker {
  position: absolute;
  width: 123px;
  height: 136px;
  right: -56px;
  top: -34px; }
  @media (min-width: 768px) {
    .producto-header__sticker {
      right: -6px;
      top: -35px; } }

.producto-header__detalle {
  position: relative;
  display: block;
  font-size: 10px;
  top: 3px; }
  .producto-header__detalle, .producto-header__detalle:hover {
    color: #A50050; }
  .producto-header__detalle:before {
    content: "";
    position: absolute;
    bottom: -3px;
    display: inline-block;
    background-image: url(../../img/sprite.css.svg);
    background-size: 2800px 2650px;
    width: 49px;
    height: 3px;
    background-position: 99.7092% 39.95467%;
    height: 3px; }
  @media (min-width: 768px) {
    .producto-header__detalle {
      font-size: 12px;
      line-height: 1.1;
      top: 5px;
      margin-bottom: 10px; }
      .producto-header__detalle:before {
        display: inline-block;
        background-image: url(../../img/sprite.css.svg);
        background-size: 2800px 2650px;
        width: 67px;
        height: 3px;
        background-position: 98.95353% 49.49377%;
        left: -3px; } }
  @media (min-width: 768px) {
    .producto-header--bigger .producto-header__detalle:before {
      display: inline-block;
      background-image: url(../../img/sprite.css.svg);
      background-size: 2800px 2650px;
      width: 99px;
      height: 3px;
      background-position: 96.79748% 53.8912%;
      left: 11px; } }

.producto-header__producto {
  padding-left: 75px;
  margin-bottom: 10px;
  vertical-align: top; }
  .producto-header--desactivado .producto-header__producto {
    width: auto; }
  @media (min-width: 768px) {
    .producto-header--bigger .producto-header__producto {
      padding-left: 130px; } }

.producto-header__alias {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px; }

.producto-header__editor {
  padding: 5px;
  margin-left: 5px; }
  @media screen and (max-width: 767px) {
    .producto-header__editor {
      display: none !important; } }
  @media print {
    .producto-header__editor {
      display: none !important; } }

.producto-header__datos {
  text-align: left; }
  @media (min-width: 1024px) {
    .producto-header__datos {
      text-align: right;
      margin-left: 30px;
      -webkit-box-flex: 1;
          -ms-flex-positive: 1;
              flex-grow: 1; } }
  @media (min-width: 768px) {
    .producto-header--datos-small .producto-header__datos {
      margin-left: 30px;
      -webkit-box-flex: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
      -ms-flex-item-align: end;
          align-self: flex-end; } }

@media (min-width: 768px) and (max-width: 1023px) {
  .producto-header__datos--with-graphic {
    padding-left: 75px; } }

@media (min-width: 768px) and (max-width: 1023px) {
  .producto-header__datos--bigger {
    margin-left: 130px; } }

.producto-header__saldo {
  text-align: right;
  font-weight: bold;
  font-size: 17px; }
  @media (min-width: 768px) {
    .producto-header__saldo {
      font-size: 24px; } }

.producto-header__nota {
  font-size: 12px;
  font-style: italic;
  font-weight: normal;
  color: #999999; }

.producto-header__puntos {
  font-size: 12px;
  color: #A50050; }

.producto-header__desactivado {
  font-weight: 600;
  color: #E10000; }

.producto-header__descripcion {
  color: #999999; }

/*doc
---
title: Aside
name: aside
category: Componentes - Aside
---

Sistema de columnas para el aside.

```html_example
  <div class="main-content">

    <div class="main-content-body">
      Contenido del Body
    </div>

    <div class="main-content-aside">
      <div class="aside aside--can-close">
        <div class="aside__close">
          <span class="aside__close-label">
            ocultar
          </span>
          <div class="aside__open"></div>
        </div>

        <div class="aside__content">

          <div class="aside__col-one-half">
            <a href="#" class="btn btn-action btn-action--arrow-right">
              Información de mercados
            </a>
          </div>

          <div class="aside__col-one-half">
            <a href="#" class="btn btn-action btn-action--arrow-right">
              Elección de dividendo
            </a>
          </div>

          <div class="aside__col-full">
            <a href="#" class="btn btn-action btn-action--arrow-right">
              Información de mercados
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
```


Podemos hacer que las columnas en versión desktop sea dos por linea:
`<div class="aside__col-one-half">`

o bien que sea una que se centra:
`<div class="aside__col-full">`

**Para ver el resultado reducir la pantalla tamaño tablet.**

*/
.aside {
  position: relative;
  background-color: #F5F5F1;
  overflow: hidden;
  text-align: center; }
  @media (max-width: 767px) {
    .aside {
      margin-left: -10px;
      margin-right: -10px; } }
  @media print {
    .aside {
      display: none; } }

@media (min-width: 1024px) {
  .aside--can-close {
    padding-top: 40px; } }

.aside__content {
  transition: opacity 0.3s 0.5s;
  padding-left: 10px;
  padding-right: 10px; }
  @media (min-width: 1200px) {
    .aside__content {
      padding-left: 20px;
      padding-right: 20px; } }
  @media (min-width: 1024px) {
    .aside__content {
      width: 290px; } }
  @media (min-width: 1200px) {
    .aside__content {
      width: 370px; } }
  .main-content-aside.is-closed .aside__content {
    transition: opacity 0.2s;
    opacity: 0; }
  @media (max-width: 624px) {
    .aside__content {
      max-width: 370px;
      margin: 0 auto; } }
  @media (min-width: 625px) {
    .aside__content:before, .aside__content:after {
      content: " ";
      display: table; }
    .aside__content:after {
      clear: both; } }
  @media (min-width: 1024px) {
    .aside__content {
      display: block; } }

.aside__close {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: none;
  text-align: right;
  font-size: 10px; }
  @media (max-width: 1023px) {
    .aside__close {
      display: none !important; } }
  .aside.aside--can-close .aside__close {
    display: block; }
  .aside__close:hover {
    cursor: pointer; }
  .aside__close:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E600";
    position: absolute;
    padding: 8px;
    top: 0;
    right: 0;
    font-size: 13px;
    color: #fff;
    z-index: 1;
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s; }
    .main-content-aside.is-closed .aside__close:before {
      -webkit-transform: rotate(180deg);
          -ms-transform: rotate(180deg);
              transform: rotate(180deg); }
  .aside__close:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    top: 0;
    right: 0;
    background-color: #51284F; }

.aside__close-label {
  position: relative;
  line-height: 30px;
  right: 35px;
  transition: opacity 0.2s; }
  .main-content-aside.is-closed .aside__close-label {
    opacity: 0; }

.aside__open {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 99999px;
  height: 100vh;
  z-index: 1; }
  .aside__open:hover {
    cursor: pointer; }
  .main-content-aside.is-closed .aside__open {
    display: block; }

.aside__col-one-half {
  width: 100%; }
  @media (min-width: 625px) and (max-width: 1023px) {
    .aside__col-one-half {
      float: left;
      width: 50%; }
      .aside__col-one-half:not(:nth-child(2n)) {
        padding-right: 10px; }
      .aside__col-one-half:nth-child(2n + 1) {
        clear: both; } }

.aside__col-full {
  width: 100%; }

.aside__col-full,
.aside__col-one-half {
  margin-top: 10px;
  margin-bottom: 10px; }
  @media (min-width: 1200px) {
    .aside__col-full,
    .aside__col-one-half {
      margin-top: 20px;
      margin-bottom: 20px; } }

/*doc
---
title: detalle movimiento
name: detalle-movimiento
category: Componentes - Detalle movimiento
---

```html_example

<table class="table is-expandable">
  <thead>
    <tr>
      <th>Valor</th>
      <th>Fecha fin</th>
      <th class="table__arrow-header"></th>
    </tr>
  </thead>

  <tbody>
    <tr class="expandable-row is-expanded">
      <td>
        <div><a class="link" >Lorem Ipsum dolor</a></div>
        <div class="text-faded">ES00112341234</div>
      </td>
      <td>
        20/04/2015
      </td>
      <td class="table__arrow-cell">
        <i class="table__arrow"></i>
      </td>
    </tr>
    <tr class="detail-row">
      <td colspan="3">
        <div class="detalle-movimiento__titulo">Titlo del detalle</div>
        <div class="row detalle-movimiento__grupo">
          <div class="detalle-movimiento__grupo__title col-xs-12 col-sm-6">
            <span class="page-title2">Titulo del grupo</span>
          </div>
          <div class="detalle-movimiento__item col-xs-12">
            <div class="detalle-movimiento__item__title margin-sm">
              Label
            </div>
            <p class="text-faded margin-sm">Lorem ipsum sit amet consecteur adipiscing elit Sed ac tortor malesuada, fementum nisi et, lacinia elit. Ul tincidunt risus quam, vitae cursus odio laoreet. Quisque vehicula libero tortor, at gravida turpis volutpat ut.</p>
          </div>
        </div>
        <div class="row detalle-movimiento__grupo">
          <div class="detalle-movimiento__item col-xs-12 col-sm-6">
            <div class="detalle-movimiento__item__title">Label</div>
            <div class="detalle-movimiento__item__value">Valor</div>
          </div>
          <div class="detalle-movimiento__item col-xs-12 col-sm-6">
            <div class="detalle-movimiento__item__title">Label</div>
            <div class="detalle-movimiento__item__value">Valor</div>
          </div>
          <div class="detalle-movimiento__item col-xs-12 col-sm-3">
            <div class="detalle-movimiento__item__title">Label</div>
            <div class="detalle-movimiento__item__value">Valor</div>
          </div>
          <div class="detalle-movimiento__item col-xs-12 col-sm-3">
            <div class="detalle-movimiento__item__title">Label</div>
            <div class="detalle-movimiento__item__value">Valor</div>
          </div>

          <div class="detalle-movimiento__item col-xs-12 col-sm-3">
            <div class="detalle-movimiento__item__title">Label</div>
            <div class="detalle-movimiento__item__value">Valor</div>
          </div>
        </div>

        <div class="row detalle-movimiento__grupo">
          <div class="detalle-movimiento__item col-xs-12 col-sm-4">
            <div class="detalle-movimiento__item__title">Label</div>
            <div class="detalle-movimiento__item__value">Valor</div>
          </div>

          <div class="detalle-movimiento__item col-xs-12 col-sm-4">
            <div class="detalle-movimiento__item__title">Label</div>
            <div class="detalle-movimiento__item__value">Valor</div>
          </div>

          <div class="detalle-movimiento__item col-xs-12">
            <div class="detalle-movimiento__acciones">
              <a class="btn btn-primary">
                Acción 1
              </a>
              <a class="btn btn-primary" ng-click="$ctrl.irAlStepSiguiente()">
                Acción 2
              </a>
            </div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
```
*/
.detalle-movimiento {
  display: none; }
  .is-expanded + .detalle-movimiento {
    display: table-row; }

.detalle-movimiento__titulo {
  text-transform: uppercase;
  color: #7B0B56;
  font-size: 15px;
  margin-bottom: 13px; }
  @media (min-width: 625px) {
    .detalle-movimiento__titulo {
      font-size: 17px;
      margin-bottom: 26px; } }

.detalle-movimiento__grupo {
  margin-left: -8px;
  margin-right: -8px; }
  .detalle-movimiento__grupo + .detalle-movimiento__grupo {
    padding-top: 8.66667px;
    border-top: 1px solid #E3E1D7; }
    @media (min-width: 768px) {
      .detalle-movimiento__grupo + .detalle-movimiento__grupo {
        padding-top: 13px; } }
  @media print {
    .detalle-movimiento__grupo:last-of-type:not(:first-of-type) {
      page-break-after: always; } }

.detalle-movimiento__grupo__title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8.66667px; }

.detalle-movimiento__item {
  margin-bottom: 8.66667px; }
  .detalle-movimiento__item:before, .detalle-movimiento__item:after {
    content: " ";
    display: table; }
  .detalle-movimiento__item:after {
    clear: both; }
  @media (min-width: 768px) {
    .detalle-movimiento__item {
      margin-bottom: 13px; } }

.detalle-movimiento__item__title {
  font-weight: 600;
  display: block; }
  @media (max-width: 767px) {
    .detalle-movimiento__item__title {
      float: left;
      clear: left;
      padding-right: 8.66667px;
      width: 40%; } }

.detalle-movimiento__item__value {
  display: block; }
  @media (max-width: 767px) {
    .detalle-movimiento__item__value {
      float: left;
      width: 60%; } }

.detalle-movimiento__acciones {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  @media (max-width: 767px) {
    .detalle-movimiento__acciones {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; }
      .detalle-movimiento__acciones > .btn {
        margin-bottom: 8.66667px;
        width: 280px; } }
  @media (min-width: 768px) {
    .detalle-movimiento__acciones {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end; }
      .detalle-movimiento__acciones > .btn {
        margin-right: 8.66667px; } }

/*doc
---
title: Comentario
name: comentario
category: Componentes - Comentario
---

```html_example
<div style="width: 290px">

  <div class="comentario margin">
    ¡Ojo! Que 55 euros son de los pantalones de Marisa y me los debe.
  </div>

  <div class="comentario">
    <div class="media">
      <div class="media-left">
        <svg class="media-object svg-icon svg-icon--xl">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#comentarios">
          </use>
        </svg>
      </div>
      <div class="media-body">
        ¡Ojo! Que 55 euros son de los pantalones de Marisa y me los debe.
      </div>
      <div class="media-right">
        <i class="icon-lapiz svg-icon--lg"></i>
      </div>
    </div>
  </div>
</div>
```
*/
.comentario {
  padding: 13px 13px 32px 13px;
  font-size: 12px;
  position: relative;
  background: #EEEEEE;
  background: linear-gradient(315deg, transparent 22.62763px, #EEEEEE 0) bottom right; }
  .comentario:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 32px 32px 0 0;
    border-color: #A50050 transparent transparent transparent;
    position: absolute;
    right: 0;
    bottom: 0; }

html {
  font-size: 10px;
  -webkit-tap-highlight-color: transparent; }

body {
  font-family: "newjune", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.42857;
  color: #333333; }
/*doc
---
title: Actions bar
name: actions-bar
category: Componentes - Actions bar
---

```html_example
<ul class="actions-bar">
  <li>
    <a href="#" class="actions-bar__action">
      <svg class="icon-action">
        <use xlink:href="#pdf">
      </svg>
      PDF
    </a>
  </li>
  <li>
    <a href="#" class="actions-bar__action">
      <svg class="icon-action">
        <use xlink:href="#print">
      </svg>
      imprimir
    </a>
  </li>
</ul>
```
*/
.actions-bar {
  display: inline-block; }
  .actions-bar > li {
    display: inline-block; }

.actions-bar__action {
  padding: 0.5em;
  margin-right: 5px; }
  .actions-bar__action:hover {
    cursor: pointer; }
  .actions-bar > li:last-child .actions-bar__action {
    margin-right: 0; }

.actions-bar__icon {
  width: 20px;
  height: 20px; }

.actions-bar__icon--bigger {
  width: 25px;
  height: 25px; }

.padding-left-0 {
  padding-left: 0px !important; }
.icon-action {
  width: 20px;
  height: 20px; }

.icon-action--bigger {
  width: 25px;
  height: 25px; }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
/*doc
---
title: List items
name: list-items
category: Componentes - List items
---
### Listado simple
```html_example
<h4 class="list-title">Titulo listado</h4>
<ul class="list-items">
  <li class="list-items__item">
    item 1
  </li>
  <li class="list-items__item">
    item 2
  </li>
  <li class="list-items__item">
    item 3
  </li>
</ul>
```

### Listado con linea inferior separatoria
```html_example
<ul class="list-items">
  <li class="list-items__item list-items__item--separator">
    item 1
  </li>
  <li class="list-items__item list-items__item--separator">
    item 2
  </li>
  <li class="list-items__item list-items__item--separator">
    item 3
  </li>
</ul>
```

### Listado con items marcados
```html_example
<ul class="list-items">
  <li class="list-items__item list-items__item--marcado">
    item 1
  </li>
  <li class="list-items__item list-items__item--marcado">
    item 2
  </li>
  <li class="list-items__item list-items__item--marcado">
    item 3
  </li>
</ul>
```

Variante                  | Descripción
--------------------------|------------------------------------------------
`.list-items__item--sangrado` | Añadir Sangrado lateral al item.

*/
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
.list-title {
  text-transform: uppercase;
  color: #7B0B56;
  font-size: 15px;
  text-transform: capitalize;
  font-weight: 600; }
  @media (min-width: 625px) {
    .list-title {
      font-size: 17px; } }

.list-items__item {
  padding: 3px; }

.list-items__item--separator {
  position: relative; }
  .list-items__item--separator:not(:last-child):after {
    content: "";
    position: absolute;
    height: 1px;
    background: #EEEEEE;
    left: 13px;
    bottom: 0;
    right: 13px; }

.list-items__item--marcado {
  position: relative;
  padding-left: 20px; }
  .list-items__item--marcado:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E610";
    position: absolute;
    text-align: center;
    color: #669200;
    font-weight: bold;
    font-size: 13px;
    left: 2px;
    top: 5px; }
  .list-items__item--marcado:not(:last-child) {
    margin-bottom: 8.66667px; }

.list-items__item--sangrado {
  margin-left: 10px;
  margin-right: 15px; }
  @media (min-width: 768px) {
    .list-items__item--sangrado {
      margin-left: 50px; } }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
/*doc
---
title: Main Content Title
name: main-content-title
category: Componentes - Main Content Title
---

Barra de título para páginas que no tienen cabecera de producto
como transferencias o traspaso a cuenta.


###Titulo con Opción "Volver"
```html_example
<div class="main-content-title">
  <h2 class="main-content-title__caption">
    Título
  </h2>

  <a class="main-content-title__back">
    Volver
  </a>
</div>
```

###Titulo con Botón de acción
```html_example
<div class="main-content-title">
  <h2 class="main-content-title__caption">
    Título
  </h2>

  <a class="main-content-title__action">
    Icono PDF
  </a>
</div>
```

*/
.main-content-title {
  margin-bottom: 13px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 13px; }

.main-content-title__caption {
  text-transform: uppercase;
  color: #7B0B56;
  font-size: 17px;
  margin-bottom: 13px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin: 0; }
  @media (min-width: 625px) {
    .main-content-title__caption {
      font-size: 24px; } }
  @media (min-width: 768px) {
    .main-content-title__caption {
      margin-bottom: 26px; } }

.main-content-title__back {
  display: none;
  font-size: 10px;
  text-transform: uppercase; }
  .main-content-title__back:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E603";
    display: inline-block;
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg); }
  @media (min-width: 768px) {
    .main-content-title__back {
      display: block; } }

.main-content-title__action {
  display: block; }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
/*doc
---
title: Block Info
name: block-info
category: Componentes - Block Info
---

###En Linea
#####Máximo 3 por línea (grupo de elementos)
```html_example
  <ul class="block-info-container block-info-container--inline">
    <li class="block-info-container__item block-info-container__item--inline">
      <div class="block-info__content">
        <h3 class="page-title2">
          Titulo
        </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="block-info__link">
        <a class="link">
          Link
        </a>
      </div>
    </li>
    <li class="block-info-container__item block-info-container__item--inline">
      <div class="block-info__content">
        <h3 class="page-title2">
          Titulo
        </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="block-info__link">
        <a class="link">
          Link
        </a>
      </div>
    </li>
    <li class="block-info-container__item block-info-container__item--inline">
      <div class="block-info__content">
        <h3 class="page-title2">
          Titulo
        </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="block-info__link">
        <ul>
          <li>
            <a href="" class="link">
              Link 1
            </a>
          </li>
          <li>
            <a href="" class="link">
              Link 2
            </a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
```

###En Bloque (y con icono)
```html_example
  <ul class="block-info-container">
    <li class="block-info-container__item">
      <div class="block-info__content block-info__content--with-icon">
        <svg class="block-info__icon">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#norbolsa-sobre">
          </use>
        </svg>
        <h3 class="page-title2">
          Titulo
        </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="block-info__link">
        <a class="link">
          Link
        </a>
      </div>
    </li>
    <li class="block-info-container__item">
      <div class="block-info__content block-info__content--with-icon">
        <svg class="block-info__icon">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#norbolsa-sobre">
          </use>
          Imagen
        </svg>
        <h3 class="page-title2">
          Titulo
        </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="block-info__link">
      <ul>
        <li>
          <a href="" class="link">
            Link 1
          </a>
        </li>
        <li>
          <a href="" class="link">
            Link 2
          </a>
        </li>
        <li>
          <a href="" class="link">
            Link 3
          </a>
        </li>
      </ul>
      </div>
    </li>
  </ul>
```
*/
.block-info-container {
  margin-left: -10px;
  margin-right: -10px; }

@media (min-width: 768px) {
  .block-info-container--inline {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    margin-bottom: 26px; } }

.block-info-container__item {
  display: block;
  box-sizing: border-box;
  padding: 13px;
  width: 100%;
  vertical-align: top;
  border-bottom: 1px solid #EAE7E0; }

.block-info-container__item--inline {
  display: inline-block; }
  @media (min-width: 768px) {
    .block-info-container__item--inline {
      border-bottom: none;
      width: 33%; }
      .block-info-container__item--inline:not(:nth-child(3n)) {
        border-right: 1px solid #EAE7E0; } }

.block-info__content {
  position: relative;
  margin-bottom: 13px; }

.block-info__content--with-icon {
  padding-right: 45px; }
  @media (min-width: 768px) {
    .block-info__content--with-icon {
      padding-right: 55px; } }

.block-info__icon {
  position: absolute;
  top: 0;
  right: 3px;
  max-width: 30px;
  height: 30px; }
  @media (min-width: 768px) {
    .block-info__icon {
      max-width: 40px;
      height: 40px; } }

.block-info__link {
  text-align: right; }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
.producto-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start; }

.producto-item__icono-wrapper {
  width: 35px;
  height: 30px;
  margin-right: 10px;
  margin-top: 3px;
  text-align: center; }

.producto-item__icono {
  max-width: 100%;
  max-height: 100%; }

.producto-item__body {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

.producto-item__nombre {
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.2em; }

.producto-item__cuenta {
  color: #999999; }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*doc
---
title: Loader Mini
name: loader-mini
category: Componentes -  Loader Mini
---

```html_example
  <span class="loader-mini"></span>
```
*/
.loader-mini:before,
.loader-mini:after,
.loader-mini {
  position: relative;
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out; }

.loader-mini {
  position: relative;
  display: inline-block;
  top: -2.3em;
  left: 0;
  margin: auto 5em;
  font-size: 4px;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s; }

.loader-mini:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s; }

.loader-mini:after {
  left: 3.5em; }

.loader-mini:before,
.loader-mini:after {
  content: '';
  position: absolute;
  top: 0; }

@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em #A50050; }
  40% {
    box-shadow: 0 2.5em 0 0 #A50050; } }

@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em #A50050; }
  40% {
    box-shadow: 0 2.5em 0 0 #A50050; } }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
/*doc
---
title: Dialog Help
name: dialog-help
category: Componentes - Dialog Help
---

Bocadillo de ayuda que sale al pulsar en un elemento que usa
el control de dropdown

```html_example
  <lk-dropdown pin="true">
    <lk-dropdown-target>
      <a class="inline-help inline-separator">
        <span class="sr-only">Ayuda</span>
      </a>
    </lk-dropdown-target>
    <lk-dropdown-element class="dialog-help">
      Aquí va el texto de la ayuda.
    </lk-dropdown-element>
  </lk-dropdown>
```
*/
.dialog-help {
  padding: 13px;
  margin-left: -5px;
  margin-right: -5px;
  z-index: 200;
  max-width: 280px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.23);
  background-color: #fff;
  color: #666666;
  font-size: 12px; }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
/*doc
---
title: Steps slide
name: steps-slide
category: Componentes - Steps slide
---

```html_example
<div class="header-step-container">
  <div class="header-step-container__content">
    Ejemplo de Steps Slide con contenido lateral
  </div>
  <div class="header-step-container__steps">
    <ul class="steps-slide">
      <li class="steps-slide__step is-active">
      </li>
      <li class="steps-slide__step">
      </li>
      <li class="steps-slide__step">
      </li>
    </ul>
  </div>
</div>
```

*/
.header-step-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 13px; }

.header-step-container__content {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

.header-step-container__steps {
  display: none; }
  @media (min-width: 768px) {
    .header-step-container__steps {
      display: block;
      width: 350px;
      text-align: right;
      margin-top: 8.66667px; } }

.steps-slide {
  display: inline-block;
  padding-left: 0;
  list-style: none; }
  .steps-slide:before, .steps-slide:after {
    content: " ";
    display: table; }
  .steps-slide:after {
    clear: both; }

.steps-slide__step {
  position: relative;
  display: inline-block;
  float: left;
  width: 35px;
  height: 16px; }
  .steps-slide__step:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    top: 50%;
    margin-top: -2px; }
  .steps-slide__step:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%; }
  .steps-slide__step:before, .steps-slide__step:after {
    background-color: #EAE7E0; }
  .steps-slide__step.is-active:before, .steps-slide__step.is-active:after {
    background-color: #51284F; }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
/*doc
---
title: Separator
name: separator
category: Componentes - Separator
---

### Separador Horizontal

```html_example
  <div class="page-title3 margin">Contenido</div>
  <div class="horizontal-separator margin">Contenido</div>
  <div class="horizontal-separator--smaller margin">Contenido</div>
  <div class="page-title3">Contenido</div>
```
### Otros Separadores
Clase               | Descripción
-----------------------|------------------------------------------------
`.inline-separator`        | Separación para elementos situados a la izquierda
`.inline-separator--bigger `        | Mayor separación para elementos situados a la izquierda
*/
.horizontal-separator {
  display: block;
  margin-top: 26px;
  margin-bottom: 26px;
  height: 2px;
  background-color: #CCCCCC; }

.horizontal-separator--smaller {
  display: block;
  margin-top: 8.66667px;
  margin-bottom: 8.66667px;
  height: 1px;
  background-color: #CCCCCC; }

.inline-separator {
  margin-left: 13px; }

.inline-separator--bigger {
  margin-left: 26px; }

.inline-separator--huge {
  margin-left: 52px; }

.inline-separator-right {
  margin-right: 13px; }

.inline-separator-right-small {
  margin-right: 8.66667px; }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
/*doc
---
title: Options list
name: options-list
category: Componentes - Options list
---

### Titulo del Option list

```html_example
<h2 class="options-list-title">Título Options list</h2>
```


### Option list simple

```html_example
<ul class="options-list">
  <li class="options-list__item">
    Item simple
  </li>
  <li class="options-list__item options-list__item--clickable">
    Item  clicable
  </li>
  <li class="options-list__item options-list__item--clickable--with-color">
    Item  clicable flecha fondo color
  </li>
  <li class="options-list__item options-list__item--sangrado">
    Item  con Sangrado
  </li>
  <li class="options-list__item">
    <a href="#" class="options-list__content">
      <div class="options-list__caption">
        Caption simple
      </div>
      Description
    </a>
    <div class="options-list__status">
      Datos Extra
    </div>
  </li>
  <li class="options-list__item">
    <a href="#" class="options-list__content">
      <div class="options-list__caption-destacado">
        Caption Destacado
      </div>
    </a>
  </li>
</ul>
```


###Option List en marco con color de fondo

```html_example
<div class="background-colored-container">
  <ul class="options-list options-list--in-colored-background">
    <li class="options-list__item options-list__item--in-colored-background">
      Item simple
    </li>
    <li class="options-list__item options-list__item--in-colored-background options-list__item--clickable-in-colored-background">
      Item clicable
    </li>
    <li class="options-list__item options-list__item--in-colored-background options-list__item--sangrado">
      Item  con sangrado
    </li>
  </ul>
</div>
```


###Option List con imagen

```html_example
<ul class="options-list">
  <li class="options-list__item options-list__item--with-img">
    <div class="options-list__content">
      <svg class="options-list__img">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ficheros"></use>
      </svg>
      <div class="options-list__caption">
        Caption simple con imagen
      </div>
    </div>
  </li>
  <li class="options-list__item options-list__item--with-img">
  <div class="options-list__content">
    <svg class="options-list__img">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ficheros"></use>
    </svg>
    <div class="options-list__caption-destacado">
      Caption destacado con imagen
    </div>
  </div>
  </li>
</ul>
```
*/
.options-list-title {
  text-transform: uppercase;
  color: #7B0B56;
  font-size: 15px; }
  @media (min-width: 625px) {
    .options-list-title {
      font-size: 17px; } }

.options-list {
  border-top: 1px solid #EAE7E0; }

.options-list--in-colored-background {
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #CCCCCC; }
  .avisos-box--warning .options-list--in-colored-background {
    border-top: 1px solid #fffdf6;
    border-bottom: 1px solid #CF9D00; }

.options-list__item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px;
  border-bottom: 1px solid #EAE7E0; }
  @media (max-width: 767px) {
    .options-list__item {
      padding: 15px 10px; } }

.options-list__item--sin-borde {
  border-bottom: 0px;
  padding: 0px 10px; }

.options-list__item--sangrado {
  padding-left: 20px; }

.options-list__item--in-colored-background {
  border-bottom: 1px solid #FFF;
  border-top: 1px solid #CCCCCC; }
  .options-list__item--in-colored-background:hover {
    cursor: pointer;
    background: #E3E1D7; }
  .avisos-box--warning .options-list__item--in-colored-background {
    border-bottom: 1px solid #fffdf6;
    border-top: 1px solid #CF9D00; }
    .avisos-box--warning .options-list__item--in-colored-background:hover {
      cursor: pointer;
      background: #fff5c3; }

.options-list__item--with-img {
  padding-left: 45px;
  padding-right: 45px; }
  .options-list__item--with-img:hover, .options-list__item--with-img:active {
    color: #7B0B56; }

.options-list__item--clickable {
  padding-right: 45px; }
  .options-list__item--clickable:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E600";
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -1em;
    padding: 5px;
    background-color: inherit;
    color: #51284F;
    font-size: 10px;
    font-weight: 600; }
    .options-list__item--clickable:before:hover, .options-list__item--clickable:before:active {
      color: #51284F; }
  .options-list__item--clickable:hover {
    cursor: pointer;
    background-color: #EAE7E0; }

.options-list__item--clickable-in-colored-background {
  padding-right: 45px; }
  .options-list__item--clickable-in-colored-background:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E600";
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -1em;
    padding: 5px;
    background-color: #FFF;
    color: #51284F;
    font-size: 10px;
    font-weight: 600; }
    .options-list__item--clickable-in-colored-background:before:hover, .options-list__item--clickable-in-colored-background:before:active {
      color: #51284F; }
  .options-list__item--clickable-in-colored-background:hover {
    cursor: pointer;
    background-color: #EAE7E0; }

.options-list__item--clickable--with-color {
  padding-right: 45px; }
  .options-list__item--clickable--with-color:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E600";
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -1em;
    padding: 5px;
    background-color: #F5F5F1;
    color: #51284F;
    font-size: 10px;
    font-weight: 600; }
    .options-list__item--clickable--with-color:before:hover, .options-list__item--clickable--with-color:before:active {
      color: #51284F; }
  .options-list__item--clickable--with-color:hover {
    cursor: pointer;
    background-color: #EAE7E0; }

.options-list__content {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  color: #666666; }

.options-list__caption {
  font-weight: 600;
  font-size: 13px;
  color: #51284F; }

.options-list__caption-destacado {
  font-weight: 600;
  text-transform: uppercase;
  color: #7B0B56;
  font-size: 15px;
  text-align: center; }
  @media (min-width: 625px) {
    .options-list__caption-destacado {
      font-size: 17px; } }

.options-list__status {
  padding-left: 8.66667px;
  font-size: 13px;
  color: #666666 !important; }

.options-list__img {
  position: absolute;
  left: 10px;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto; }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
/*doc
---
title: Highlight box
name: highlight-box
category: Componentes - Highlight box
---

```html_example
<div class="highlight-box">
  <h3 class="highlight-box__title">
    Título
  </h3>
  <p class="margin">
    Ejemplo de contenido
  </p>
</div>
```
*/
.highlight-box {
  padding: 13px;
  border: 1px solid #A50050; }

.highlight-box__title {
  font-size: 17px;
  line-height: 1.3;
  font-weight: 600;
  margin-bottom: 13px; }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
/*doc
---
title: Containers
name: containers
category: Componentes - Containers
---

```html_example
<div class="bordered-container-soft margin-sm">
  <p class="margin">
    Ejemplo de contenido en caja borde claro
  </p>
</div>

<div class="bordered-container-magenta margin-sm">
  <p class="margin">
    Ejemplo de contenido en caja borde magenta
  </p>
</div>

<div class="bordered-container-dark margin-sm">
  <p class="margin">
    Ejemplo de contenido en caja borde oscuro
  </p>
</div>

<div class="background-colored-dotted">
  <p class="margin">
    Ejemplo de contenido en caja con borde punteado
  </p>
</div>

<div class="background-colored-container">
  <p class="margin">
    Ejemplo de contenido en caja coloreada
  </p>
</div>

<div class="background-colored-container background-colored-container--soft">
  <p class="margin">
    Ejemplo de contenido en caja coloreada más clara.
  </p>
</div>

<div class="form-container">
  <p class="margin">
    Ejemplo de contenido en caja coloreada (especial formularios)
  </p>
</div>
```
*/
.bordered-container-soft {
  padding: 13px;
  border: 1px solid #EAE7E0; }

.bordered-container-dotted {
  padding: 13px;
  border: 1px dotted #51284F; }

.bordered-container-magenta {
  padding: 13px;
  border: 1px solid #A50050; }

.bordered-container-dark {
  padding: 13px;
  border: 1px solid #51284F; }

.background-colored-container {
  display: block;
  padding: 8.66667px;
  margin-bottom: 13px;
  background-color: #EAE7E0; }

.background-colored-container--soft {
  background-color: #F5F5F1; }

.u-inner-padding {
  padding: 13px; }
  @media (min-width: 1024px) {
    .u-inner-padding {
      padding: 26px; } }

.form-container {
  margin-bottom: 13px;
  padding: 13px;
  vertical-align: middle;
  min-height: 240px;
  background-color: #EAE7E0; }
  @media (min-width: 1024px) {
    .form-container {
      padding: 26px; } }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
/*doc
---
title: Page list
name: page-list
category: Componentes - Page list
---

### Titulo del Option list

```html_example
  <div class="text-center">
    <ul class="page-list">
      <li class="page-list__item">
        <span class="page-list__button--back"></span>
        <span class="page-list__button--back"></span>
      </li>
      <li class="page-list__item is-active"> 1 </li>
      <li class="page-list__item"> 2 </li>
      <li class="page-list__item"> 3 </li>
      <li class="page-list__item"> 4 </li>
      <li class="page-list__item"> 5 </li>
      <li class="page-list__item"> .. </li>
      <li class="page-list__item"> 15 </li>
      <li class="page-list__item">
        <span class="page-list__button--next"></span>
        <span class="page-list__button--next"></span>
      </li>
    </ul>
  </div>
```
*/
.page-list {
  list-style: none;
  display: inline-block; }

.page-list__item {
  display: inline-block;
  margin: -2px;
  padding: 5px;
  width: 30px;
  height: 30px;
  vertical-align: middle;
  border: 1px solid #EAE7E0;
  text-align: center;
  color: #A50050;
  font-weight: 600; }
  .page-list__item:hover {
    background-color: #EAE7E0;
    cursor: pointer; }
  .page-list__item.is-active {
    background-color: #EAE7E0; }

.page-list__button--next:before {
  font-family: "lk-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\E60F";
  font-size: 7px; }

.page-list__button--back:before {
  font-family: "lk-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\E60E";
  font-size: 7px; }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
/*doc
---
title: Blog Post
name: blog-post
category: Componentes - Blog Post
---

```html_example
<div class="row margin">
  <div class="col-xs-12 col-sm-6 margin--only-mobile">
    <div class="blog-post__title">Como comprar una casa</div>

    <div class="blog-post__img-wrapper">
      <img src="../../../img/tarjetas/ImagenPersonalizada/ani001.jpg" class="blog-post__img" alt="comprar una casa">
    </div>

    <div class="blog-post__info">
      <div class="blog-post__info-date">
        <svg class="svg-icon svg-icon--lg">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#calendario"></use>
        </svg>
        02/06/2015
      </div>
      <div class="blog-post__info-comments">
        <svg class="svg-icon svg-icon--lg">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#conversacion"></use>
        </svg>
        4
      </div>
    </div>
    <div class="blog-post__text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed excepturi, illum eos.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed excepturi, illum eos. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed excepturi, illum eos.
    </div>
  </div>

  <div class="col-xs-12 col-sm-6">
    <div class="blog-post__title">Como comprar una casa</div>
    <div class="blog-post__img-wrapper">
      <img src="../../../img/tarjetas/ImagenPersonalizada/ani002.jpg" class="blog-post__img" alt="comprar una casa">
    </div>
    <div class="blog-post__info">
      <div class="blog-post__info-date">
        <svg class="svg-icon svg-icon--lg">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#calendario"></use>
        </svg>
        02/06/2015
      </div>
      <div class="blog-post__info-comments">
        <svg class="svg-icon svg-icon--lg">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#conversacion"></use>
        </svg>
        4
      </div>
    </div>
    <div class="blog-post__text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed excepturi, illum eos.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed excepturi, illum eos. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed excepturi, illum eos.
    </div>
  </div>
</div>
```
*/
.blog-post-container {
  padding: 13px; }

.blog-post__title {
  margin-bottom: 8.66667px;
  text-transform: uppercase;
  color: #7B0B56;
  font-size: 15px; }
  @media (min-width: 625px) {
    .blog-post__title {
      font-size: 17px; } }

.blog-post__img-wrapper {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 8.66667px;
  max-width: 275px; }

.blog-post__img {
  width: 100%;
  height: 100%; }

.blog-post__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 8.66667px;
  color: #666666;
  font-size: 12px; }
  .blog-post__info svg {
    -webkit-filter: gray;
            filter: gray;
    /* IE6-9 */
    filter: grayscale(1);
    /* Microsoft Edge and Firefox 35+ */
    -webkit-filter: grayscale(1);
    /* Google Chrome, Safari 6+ & Opera 15+ */ }

.blog-post__info-date {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-right: 8.66667px;
  text-align: left; }

.blog-post__info-comments {
  text-align: right; }

.blog-post__text {
  text-align: justify; }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
/*doc
---
title: Resumen Buscador
name: resumen-buscador
category: Componentes - Resumen Buscador
---
```html_example
<div class="box">
  <div class="resumen-buscador__acciones">
    <a class="btn btn--small btn-primary resumen-buscador__btn">
      <span class="sr-only" translate>Editar</span>
      <i class="icon-lapiz"></i>
    </a>
    <a class="btn btn--small btn-primary resumen-buscador__btn">
      <span class="sr-only" translate>limpiar busqueda</span>
      <i class="icon-papelera"></i>
    </a>
  </div>

  <ul>
    <li class="resumen-buscador__campo">
      <span class="resumen-buscador__label" >Fechas: </span>
        30/10/2014 - 15/07/2015
    </li>

    <li class="resumen-buscador__campo">
      <span class="resumen-buscador__label" >Operaciones: </span>
        Todas
    </li>
    <li class="resumen-buscador__campo">
      <span class="resumen-buscador__label" >Valor: </span>
        ACC. INVERSIONES INMOBILIARIAS BARCINO
    </li>
  </ul>
</div>
```
*/
.resumen-buscador__acciones {
  float: right; }

.resumen-buscador__btn {
  display: block;
  font-size: 16px; }
  .resumen-buscador__btn:not(:last-child) {
    margin-bottom: 13px; }

.resumen-buscador__label {
  font-weight: bold; }

.resumen-buscador__campo {
  display: inline-block;
  margin-right: 13px;
  margin-bottom: 8.66667px; }
  @media (min-width: 520px) {
    .resumen-buscador__campo {
      margin-right: 26px; } }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
/*
  Alinea verticalmente los modales de bootstrap.
  Fuente: http://codepen.io/dimbslmh/full/mKfCc/
*/
.modal {
  text-align: center;
  padding: 0 !important; }

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px; }

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle; }

.modal-close {
  position: absolute;
  padding: 8px 10px;
  top: 0;
  right: 0;
  outline: 0;
  z-index: 1;
  line-height: 1;
  color: #51284F;
  border: none;
  background-color: transparent; }
  .modal-close:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E608";
    font-size: 18px; }

.modal-body.is-closable {
  padding-top: 35px; }

.modal-sm-fixed {
  width: 300px; }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
/*doc
---
title: Modal Content
name: modal-content
category: Componentes -  Modal Content
---

##Modal con fondo gris y contenido con icono (Modal Generico)
```html_example
<div class="modal-body modal-box">

  <div class="modal-content-highlighted">
    <h2 class="page-title2">
      AVISO DE TARJETA IMPAGADA
    </h2>
    <button class="box__close" ng-click="vm.cerrar()" aria-label="Cerrar"></button>

    <div class="page-title-bold">Hola Carmen</div>
    <p>Tu tarjeta <span class="semibold">VISA ORO 0500263</span>, tiene un impago de <span class="importes-credito__importe--impagado semibold">-150,00€</span>.<br/>
    Esto se produce porque, en la cuenta asociada <span class="semibold">0011006930</span> a la tarjeta, no hay saldo. Debes reponer el saldo en la cuenta asociada a la tarjeta y automaticamente en unas horas la situación estará regularizada.</p>

    <ul class="options-list options-list--in-colored-background">
      <li class="options-list__item options-list__item--in-colored-background options-list__item--clickable-in-colored-background">
        <a href="#" class="options-list__content">
          <div class="options-list__caption">
          Ir a consultar la tarjeta
          </div>
        </a>
      </li>
      <li class="options-list__item options-list__item--in-colored-background  options-list__item--clickable-in-colored-background">
        <a href="#" class="options-list__content">
          <div class="options-list__caption">
            Ir a consultar movimiento de la cuenta asociada
          </div>
          Explicación ejemplo del enlace
        </a>
      </li>
    </ul>
  </div>

  <div class= "modal-content-with-icon">
    <svg class="svg-icon modal-content-with-icon__icon">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bombilla"></use>
    </svg>
    <h2 class="page-title2">
      Posibles soluciones
    </h2>
    <p>Para reponer el saldo en la cuenta asociada:</p>
    <ul class="options-list">
      <li class="options-list__item options-list__item--clickable--with-color">
        <a href="#" class="options-list__content">
          <div class="options-list__caption">
            Traspaso entre mis cuentas
          </div>
          Si tienes dinero en alguna otra cuenta, peudes traspasar el saldo a esta cuenta.
        </a>
      </li>
      <li class="options-list__item options-list__item--clickable--with-color">
        <a href="#" class="options-list__content">
          <div class="options-list__caption">
            Traer dinero desde otra entidad
          </div>
          Si dispones de saldo en otra entidad, puedes realizar el traspaso gratis desde aquí y lo tendrás disponible en 3 días.
        </a>
      </li>
      <li class="options-list__item options-list__item--clickable--with-color">
        <a href="#" class="options-list__content">
          <div class="options-list__caption">
          Cancelar Plazonet
          </div>
          Si dispones ahorros en plazonet,puedes disponerlos al momento, parcial o totalmente
        </a>
      </li>
      <li class="options-list__item options-list__item--clickable--with-color">
        <a href="#" class="options-list__content">
          <div class="options-list__caption">
            Contactar con tu gestor
          </div>
          Para buscar otro tipo de soluciones.
        </a>
      </li>
    </ul>
  </div>
</div>
```

##Modal con icono simple (Modal contratación y Modal confirmación)

####Modal contratacion
```html_example
<div class="modal-body modal-box">
  <button class="box__close" ng-click="vm.cerrar()" aria-label="Cerrar"></button>

  <div class= "modal-content-with-icon margin-top">
    <svg class="svg-icon modal-content-with-icon__icon">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#carro"></use>
    </svg>
    <h2 class="page-title2">
      Productos
    </h2>
    <ul class="options-list margin">
      <li class="options-list__item options-list__item--clickable--with-color">
        <a href="/mockups/2-0" ng-click="vm.cerrar()" class="options-list__content">
          <div class="options-list__caption text-large uppercase">
            Tarjetas
          </div>
          Solicita tu tarjeta de crédito, débito, para poder hacer compras haya donde vayas.
        </a>
      </li>
      <li class="options-list__item options-list__item--clickable--with-color">
        <a href="/mockups/solicitar-ahorro" ng-click="vm.cerrar()" class="options-list__content">
          <div class="options-list__caption text-large uppercase">
            Ahorro-e-inversion
          </div>
          Con estos planes de ahorro e inversión podrás guardar tu dinero para los gastos que tengas previsto a futuro.
        </a>
      </li>
      <li class="options-list__item options-list__item--clickable--with-color">
        <a href="/mockups/solicitar-financiacion" ng-click="vm.cerrar()" class="options-list__content">
          <div class="options-list__caption text-large uppercase">
            Financiación
          </div>
          En un click te ofrecemos la financiación que necesites para poder afrontar gastos imprevistos o necesidades.
        </a>
      </li>
      <li class="options-list__item options-list__item--clickable--with-color">
        <a href="/mockups/9-3" ng-click="vm.cerrar()" class="options-list__content">
          <div class="options-list__caption text-large uppercase">
            Seguros
          </div>
          Asegura tu coche, casa, etc. con nuestros fantasticos seguros y sus inmejorables condiciones.
        </a>
      </li>
    </ul>
  </div>
  <p class="text-center text-large">
    ¿O prefieres <a href="/mockups/10-2E-2" ng-click="vm.cerrar()" class="link">contactar con tu gestor
    </a>?
  </p>
</div>
```
####Modal confirmación
```html_example
  <div class="modal-body modal-box">
    <h2 class="page-title1">
      Resolución solicitud prestamo 48 Horas
    </h2>
    <button class="box__close" ng-click="vm.cerrar()" aria-label="Cerrar"></button>

    <div class= "modal-content-with-icon margin">
      <svg class="svg-icon modal-content-with-icon__icon">
          <use xlink:href="#ok">
      </svg>
      <span class="page-title3">Susana Fernandez Lopez</span>
      <div  class="semibold">
        Nos complace notificarle que tu <span class="uppercase">solicitud de prestamo</span> de 23.256,00€ ha sido <span class="page-title3">aprobada</span> y hemos recibido toda la documentación correctamente
      </div >
    </div>

    <div class="margin-sm text-center text-large">
      Firma el préstamo, y te ingresaremos la cantidad solicitada en tu cuenta ahora mismo.
    </div>
    <div class="horizontal-actions">
      <button class="btn btn-primary horizontal-actions__action" ng-click="vm.cerrar()">
        Firmar
      </button>
      <button class="btn btn-secondary horizontal-actions__action  horizontal-actions__action--secondary" ng-click="vm.cerrar()">
        Ya no me interesa
      </button>
    </div>
  </div>
```

##Modal con imagen (Modal generico de producto)
```html_example
  <div class="modal-body modal-box">
    <h2 class="page-title1">
      Contratación Tarjeta Crédito
    </h2>
    <button class="box__close" ng-click="vm.cerrar()" aria-label="Cerrar"></button>

    <div class="modal-content-with-image margin-sm">
      <div class="modal-content-with-image__image">
        <img src="http://lknet-demo.netlify.com/personalizar/tarjeta1.jpg">
      </div>
      <div class="modal-content-with-image__content">
        Tarjeta de Crédito mensual única en sus prestaciones y crédito que aporta a sus titulares un signo de prestigio haciendo de la misma la mejor carta de presentación.
      </div>
    </div>
    <div class="margin">
      <h3  class="page-title3 semibold">Ventajas</h3>
      <ul class="list-items">
        <li class="list-items__item list-items__item--marcado">
          Cuota <span class="semibold">GRATIS</span> el primer año por pedirla por internet.
        </li>
        <li class="list-items__item list-items__item--marcado">
          Posibilidad de hacer compras en más de 12.000 establecimientos repartidos por todo el mundo.
        </li>
        <li class="list-items__item list-items__item--marcado">
          Acceso a una ampliar red de cajeros automáticos las 24 hroas del día.
        </li>
        <li class="list-items__item list-items__item--marcado">
          Puede controlar sus compras en cualquier momento desde Banca Online y cualquiera de nuestros cajeros.
        </li>
        <li class="list-items__item list-items__item--marcado">
          Para comprar con seguridad por internet debe de adherir, sin ningún coste adicional, su tarjeta al servicio de Compra Electrónica Segura desde Banca Online. <a href="#" class="link">Más Información</a>
        </li>
      </ul>
    </div>
    <div>
      <h3 class="page-title3 semibold">Condiciones</h3>
      <ul class="list-items">
        <li class="list-items__item list-items__item--marcado">Costen anual de 62€ a partir del segundo año. El primer año es gratis.
        </li>
      </ul>
    </div>
  </div>
```
*/
.modal-dialog {
  max-width: 598px; }
  .modal-dialog.modal-lg {
    max-width: 900px; }

.modal-box {
  position: relative;
  padding: 30px; }
  .modal-box:before, .modal-box:after {
    content: " ";
    display: table; }
  .modal-box:after {
    clear: both; }
  @media (max-width: 767px) {
    .modal-box {
      padding: 20px; } }

.modal-footer {
  padding-left: 20px;
  padding-right: 20px; }
  @media (min-width: 768px) {
    .modal-footer {
      padding-left: 30px;
      padding-right: 30px; } }

.modal-box--vertical {
  background-size: 0;
  padding-left: 20px; }
  @media (min-width: 768px) {
    .modal-box--vertical {
      padding-left: 280px;
      background-repeat: no-repeat;
      background-size: 250px; } }

.modal__imagen-cabecera {
  margin: -20px -20px auto; }
  @media (min-width: 768px) {
    .modal__imagen-cabecera {
      margin: -30px -30px auto; } }

.modal-content-highlighted {
  background-color: #EAE7E0;
  margin: -30px;
  margin-bottom: 30px;
  padding: 30px; }
  @media (max-width: 767px) {
    .modal-content-highlighted {
      margin: -20px;
      margin-bottom: 20px;
      padding: 20px; } }

.modal-content-with-icon {
  padding-left: 0px; }
  @media (min-width: 426px) {
    .modal-content-with-icon {
      position: relative;
      padding-left: 70px; } }

.modal-content-with-icon__icon {
  display: none; }
  @media (min-width: 426px) {
    .modal-content-with-icon__icon {
      display: block;
      position: absolute;
      width: 60px;
      left: 0px;
      font-size: 4.5em; } }

.modal-content-with-image {
  display: block; }
  @media (min-width: 625px) {
    .modal-content-with-image {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

.modal-content-with-image__image {
  width: 150px;
  padding-bottom: 13px;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto; }
  @media (min-width: 625px) {
    .modal-content-with-image__image {
      width: 200px;
      padding-right: 13px; } }

.modal-content-with-image__content {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
/*doc
---
title: Modal Iconos
name: modal-iconos
category: Componentes - Modal Iconos
---

##Modal selección de iconos
```html_example
  <div style="border: 1px solid grey">
    <div class="modal-body modal-box">
      <h2 class="page-title1">
        Elige un icono o sube el tuyo
      </h2>
      <button class="box__close" ng-click="vm.cerrar()" aria-label="Cerrar"></button>

      <div class= "modal-iconos-content-with-icon">
        <svg class="svg-icon  modal-iconos-content-with-icon__icon">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#varios2"></use>
        </svg>
        <h2 class="modal-iconos-content-with-icon__title">
          Subir mi propio icono
        </h2>
      </div>

      <ul class="modal-iconos-container">
        <li class="modal-iconos-container__item is-selected">
          <svg class="modal-iconos__icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ahorroclick-reforma-negocio">
            </use>
          </svg>
        </li>

        <li class="modal-iconos-container__item">
          <svg class="modal-iconos__icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ahorroclick-nuevo-negocio">
            </use>
          </svg>
        </li>

        <li class="modal-iconos-container__item">
          <svg class="modal-iconos__icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ahorroclick-maquinaria">
            </use>
          </svg>
        </li>

        <li class="modal-iconos-container__item">
          <svg class="modal-iconos__icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ahorroclick-instalaciones">
            </use>
          </svg>
        </li>

        <li class="modal-iconos-container__item">
          <svg class="modal-iconos__icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ahorroclick-vacaciones">
            </use>
          </svg>
        </li>

        <li class="modal-iconos-container__item">
          <svg class="modal-iconos__icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ahorroclick-estudios">
            </use>
          </svg>
        </li>

        <li class="modal-iconos-container__item">
          <svg class="modal-iconos__icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ahorroclick-caprichos">
            </use>
          </svg>
        </li>

        <li class="modal-iconos-container__item">
          <svg class="modal-iconos__icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ahorroclick-coche">
            </use>
          </svg>
        </li>

        <li class="modal-iconos-container__item">
          <svg class="modal-iconos__icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ahorroclick-electronica">
            </use>
          </svg>
        </li>

        <li class="modal-iconos-container__item">
          <svg class="modal-iconos__icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ahorroclick-hijos">
            </use>
          </svg>
        </li>

        <li class="modal-iconos-container__item">
          <svg class="modal-iconos__icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ahorroclick-otros">
            </use>
          </svg>
        </li>
      </ul>
    </div>
  </div>
```
##Modal selección de iconos
```html_example
```

*/
.modal-iconos-container {
  margin-bottom: 26px;
  text-align: center; }
  .modal-iconos-container:before, .modal-iconos-container:after {
    content: " ";
    display: table; }
  .modal-iconos-container:after {
    clear: both; }

.modal-iconos-container__item {
  display: block;
  float: left;
  padding: 8.66667px;
  margin: 0 1% 2%;
  width: 31%;
  border: 2px solid #CCCCCC;
  border-radius: 5px;
  transition: background-color 0.3s; }
  .modal-iconos-container__item:hover, .modal-iconos-container__item.is-hover {
    cursor: pointer;
    background-color: #F5F5F1; }
  @media (min-width: 768px) {
    .modal-iconos-container__item {
      width: 18%; } }
  .modal-iconos-container__item.is-selected {
    border-color: #A50050; }

.modal-iconos__icon {
  max-width: 50px;
  max-height: 50px; }

.modal-iconos-content-with-icon {
  position: relative;
  padding-left: 70px;
  height: 55px;
  margin: 13px;
  border-bottom: 1px solid #CCCCCC; }
  @media (min-width: 768px) {
    .modal-iconos-content-with-icon {
      padding-left: 100px;
      height: 75px; } }

.modal-iconos-content-with-icon__icon {
  position: absolute;
  padding: 3px;
  width: 90px;
  height: 60px;
  left: 0px;
  border: 2px solid #CCCCCC;
  border-radius: 5px;
  font-size: 4.5em;
  transition: background-color 0.3s; }
  .modal-iconos-content-with-icon__icon:hover, .modal-iconos-content-with-icon__icon.is-hover {
    cursor: pointer;
    background-color: #F5F5F1; }
  @media (max-width: 767px) {
    .modal-iconos-content-with-icon__icon {
      width: 60px;
      height: 40px;
      font-size: 3.5em; } }

.modal-iconos-content-with-icon__title {
  font-size: 12px;
  color: #A50050;
  line-height: 4; }
  @media (min-width: 768px) {
    .modal-iconos-content-with-icon__title {
      font-size: 13px; } }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
/*doc
---
title: Modal Select
name: modal-select
category: Componentes - Modal Select
---

```html_example
  <div style="border: 1px solid grey">
    <div class="modal-body modal-box">
      <h2 class="page-title1">
        Personalización
      </h2>
      <button class="box__close" ng-click="vm.cerrar()" aria-label="Cerrar"></button>

      <div class="margin-sm">
        Escoge tus 4 operativas mas frecuente para los iconos de acceso rápido:
      </div>
      <div class="row">

        <form name="seleccionarIconoForm">
          <ul>
            <li class="modal-select-with-image">
              <svg class="modal-select-with-image__image">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cuenta-operativa"></use>
              </svg>
              <div class="modal-select-with-image__content">
                Realizar una transferencia
              </div>
              <div>
                <div class="checkbox checkbox--big">
                  <input type="checkbox" name="trans" id="trans">
                  <label for="trans">
                  </label>
                </div>
              </div>
            </li>
            <li class="modal-select-with-image">
              <svg class="modal-select-with-image__image">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#recibos"></use>
              </svg>
              <div class="modal-select-with-image__content">
                Pagar un recibo
              </div>
              <div>
                <div class="checkbox checkbox--big">
                  <input type="checkbox" name="recibo" id="recibo">
                  <label for="recibo">
                  </label>
                </div>
              </div>
            </li>
          </ul>
        </form>
      </div>
    </div>
  </div>
```

*/
.modal-select-with-image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 13px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.modal-select-with-image__image {
  padding-right: 13px;
  width: 40px;
  height: 40px; }
  @media (min-width: 625px) {
    .modal-select-with-image__image {
      width: 50px;
      height: 50px; } }

.modal-select-with-image__content {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
/*doc
---
title: Form Inline Destacado
name: form-inline-destacado
category: Formularios - Form Inline Destacado
---

Formulario para campos en línea usando cuando hay pocos campos, como
en el formulario de activar tarjetas.

```html_example
<div class="form-inline-destacado">
  <div class="form-inline-destacado__item">
    <label> Número de la tarjeta</label>
    <p class="form-control-static">1234 1234 1234 1234</p>
  </div>
  <div class="form-inline-destacado__item">
    <label>Fecha de caducidad</label>
    <p class="form-control-static">10/11</p>
  </div>
  <div class="form-inline-destacado__item">
    <label>CVV</label>
    <input
    class="form-control input--small"
    type="text"
    name="input--xxsmall">
  </div>
</div>
```
*/
.form-inline-destacado {
  padding: 13px;
  margin-bottom: 26px;
  background-color: #EAE7E0; }

.form-inline-destacado__item {
  margin-bottom: 13px; }
  @media (min-width: 768px) {
    .form-inline-destacado__item {
      margin-bottom: 0;
      display: inline-block;
      padding: 0;
      width: 33%; } }
  .form-inline-destacado__item:last-child {
    margin-bottom: 0; }
@charset "UTF-8";
/*doc
---
title: Horizontal Actions
name: horizontal-actions
category: Formularios - Horizontal Actions
---

Para botones colocados en línea y que en el móvil el botón secundario estará
por debajo del primario.

**Dependencia**: tether.js y drop.js

```html_example
<div class="horizontal-actions">
  <button class="btn btn-primary horizontal-actions__action">Dar orden de compra</button>

  <button class="btn btn-secondary horizontal-actions__action horizontal-actions__action--secondary">Volver</button>
</div>
```
*/
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
.horizontal-actions:before, .horizontal-actions:after {
  content: " ";
  display: table; }

.horizontal-actions:after {
  clear: both; }

@media (min-width: 768px) {
  .horizontal-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; } }

.horizontal-actions__action {
  display: block;
  margin: 0 auto;
  margin-bottom: 10px; }
  @media (min-width: 768px) {
    .horizontal-actions__action {
      text-align: center;
      margin: 0; }
      .horizontal-actions__action + .horizontal-actions__action {
        margin-right: 10px; } }

.horizontal-actions__action--secondary {
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1; }
@charset "UTF-8";
/*doc
---
title: Input Group
name: input-group
category: Formularios - Input Group
---

**Dependencia**: tether.js y drop.js

```html_example
<div class="input-group input-group--euro input--medium">
  <input class="form-control" type="number" id="conLimiteImporte" name="conLimiteImporte">
</div>
<br />
<div class="input-group input-group--porcentaje input--medium">
  <input class="form-control" type="number" id="conLimiteImporte" name="conLimiteImporte">
</div>
```
*/
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
.input-group--euro {
  position: relative; }
  .input-group--euro > input {
    padding-right: 2em; }
  .input-group--euro:after {
    content: "\20AC";
    position: absolute;
    right: 0.8em;
    top: 50%;
    margin-top: -0.6em;
    font-weight: bold;
    font-size: 1.1em; }

.input-group--porcentaje {
  position: relative; }
  .input-group--porcentaje > input {
    padding-right: 2em; }
  .input-group--porcentaje:after {
    content: "%";
    position: absolute;
    right: 0.8em;
    top: 50%;
    margin-top: -0.6em;
    font-weight: bold;
    font-size: 1.1em; }
@charset "UTF-8";
/*doc
---
title: Step Form
name: step-form
category: Formularios - Step Form
---

**Dependencia**: tether.js y drop.js

```html_example
<div class="step-form">
  <div class="step-form__step">
    <h3 class="step-form__title">
      <span class="step-form__number">1</span>
      Paso primero
    </h3>
    <div class="step-form__step__content">
      <div class="margin">
        Aquí va el contenido del primero paso.
      </div>
    </div>
  </div>

  <div class="step-form__step">
    <h3 class="step-form__title">
      <span class="step-form__number">2</span>
      Paso segundo
    </h3>
    <div class="step-form__step__content">
      <div class="margin">
        Aquí va el contenido del segundo paso.
      </div>
    </div>
  </div>

  <div class="step-form__step">
    <h3 class="step-form__title">
      <span class="step-form__number">3</span>
      Paso tercero
    </h3>
    <div class="step-form__step__content">
      <div class="margin">
        Aquí va el contenido del tercer paso.
      </div>
    </div>
  </div>
</div>
```
*/
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
@media (max-width: 767px) {
  .step-form {
    margin-left: -10px;
    margin-right: -10px; } }

@media (min-width: 768px) {
  .step-form--horizontal {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; } }

@media (max-width: 767px) {
  .step-form__step {
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 13px;
    padding-bottom: 13px; }
    .step-form.step-form--highlight-current-step .step-form__step:not(.is-done):not(.is-active) {
      display: none; } }
  @media (max-width: 767px) and (min-width: 768px) {
    .step-form__step {
      padding-left: 13px; } }
  @media (max-width: 767px) and (min-width: 768px) {
    .step-form__step {
      padding-right: 13px; } }

@media (max-width: 767px) {
    .step-form__step > *:last-child {
      margin-bottom: 0; }
    .step-form__step:not(:last-of-type) {
      border-bottom: 1px solid #E3E1D7; }
      .step-form__step:not(:last-of-type):after {
        content: '';
        position: absolute;
        width: 19px;
        height: 19px;
        bottom: -10px;
        left: 50%;
        margin-left: -10px;
        border-right: 1px solid #E3E1D7;
        border-bottom: 1px solid #E3E1D7;
        -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
                transform: rotate(45deg);
        background-color: #fff;
        z-index: 1; }
    .step-form__step:first-child {
      border-top: 1px solid #E3E1D7; }
    .step-form__step.is-done {
      background-color: #F5F5F1; }
      .step-form__step.is-done:after {
        background-color: #F5F5F1; } }

@media (min-width: 768px) {
  .step-form__step {
    width: 100%;
    padding-top: 13px;
    padding-bottom: 13px; }
    .step-form__step:last-of-type {
      margin-bottom: 13px; } }

@media (min-width: 768px) {
  .step-form--horizontal .step-form__step {
    width: 100%;
    padding: 10px;
    border-top: 1px solid #E3E1D7; }
    .step-form--horizontal .step-form__step:not(:last-child) {
      border-right: 1px solid #E3E1D7; } }

@media (min-width: 768px) {
  .step-form__step__content {
    padding-left: 40px; } }

.step-form__actions {
  text-align: center; }
  @media (min-width: 768px) {
    .step-form__actions {
      text-align: right; } }

.step-form__title {
  position: relative;
  margin-bottom: 13px;
  padding-left: 25px;
  font-size: 15px;
  line-height: 1.3;
  color: #7B0B56; }
  @media (min-width: 768px) {
    .step-form__title {
      padding-left: 40px;
      font-size: 17px; } }

.step-form__number {
  position: absolute;
  left: 0;
  display: inline-block;
  width: 20px;
  line-height: 20px;
  margin-right: 5px;
  border-radius: 100%;
  background-color: #7B0B56;
  color: #fff;
  text-align: center;
  font-size: 12px; }
  @media (min-width: 768px) {
    .step-form__number {
      top: -0.3em;
      width: 30px;
      line-height: 30px;
      font-size: 13px; } }
@charset "UTF-8";
/*doc
---
title: Combo Productos
name: combo-productos
category: Formularios - Combo Productos
---

```html_example
<div class="combo-productos">
  <div class="producto-item">
    <div class="producto-item__icono-wrapper">
      <svg class="producto-item__icono">
        <use xlink:href="#ahorro"></use>
      </svg>
    </div>
    <div class="producto-item__body">
      <div class="producto-item__nombre">Cuenta con María y hermanos</div>
      <div class="producto-item__cuenta">...34 12341234</div>
      <div class="producto-item__importe">
        Saldo
      </div>
    </div>
  </div>
</div>
```
*/
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
.combo-productos {
  position: relative;
  padding: 7px 30px 7px 5px;
  min-height: 34px;
  max-width: 285px;
  border: 1px solid #E3E1D7;
  cursor: pointer; }
  .combo-productos:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E604";
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -0.4em;
    font-size: 18px; }
  .combo-productos:hover {
    border-color: #cecbb9; }

.combo-productos-items-wrapper--on-top {
  z-index: 2000; }

.combo-productos-items-wrapper--on-screen {
  max-height: 100%; }

.combo-productos-items {
  width: 285px;
  z-index: 2000;
  background-color: white;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.23);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  .combo-productos-items-wrapper--on-screen .combo-productos-items {
    max-height: 100vh;
    overflow-y: auto; }

.combo-productos-items__item {
  padding: 5px;
  border-bottom: 1px solid #E3E1D7;
  cursor: pointer; }
  .combo-productos-items__item:hover {
    background-color: #E5D0DA; }
@charset "UTF-8";
/*doc
---
title: Main Radios
name: main-radios
category: Formularios - Main Radios
---

Listado de radios que al ser seleccionados contiene un
subformulario en su interior.

**Dependencia**: tether.js y drop.js

```html_example
<ul class="main-radios">
  <li class="main-radios__item">
    <div class="main-radios__radio">
      <div class="radio radio--big">
        <input type="radio" ng-model="vm.adelantarPago" name="adelantarPago" id="TodaDeuda" value="TodaDeuda" checked required>
        <label for="TodaDeuda">Toda la deuda pendiente (800€)</label>
      </div>
    </div>
  </li>

  <li class="main-radios__item">
    <div class="main-radios__radio">
      <div class="radio radio--big">
        <input type="radio" ng-model="vm.adelantarPago" name="adelantarPago" id="cantidadFija" value="cantidadFija" required>
        <label for="cantidadFija">Parte de la deuda</label>
      </div>
    </div>
    <div class="main-radios__value" ng-show="vm.adelantarPago === 'cantidadFija'">
      <label class="label-control" for="cantidadFijaImporte">Cantidad</label>
      <div class="form-group" ng-class="{'has-error': adelantarPagoForm.cantidadFijaImporte.$dirty && adelantarPagoForm.cantidadFijaImporte.$invalid}">
        <div class="input-group input-group--euro input--medium">
          <input class="form-control" type="number" id="cantidadFijaImporte" name="cantidadFijaImporte" ng-required="vm.adelantarPago === 'cantidadFija'" min="300" lk-importe step="0.01" ng-model="vm.cantidadFijaImporte" ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }">
        </div>
      </div>
    </div>
  </li>
</ul>
```
*/
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
.main-radios {
  margin-left: -10px;
  margin-right: -10px;
  margin-bottom: 13px; }

.main-radios__radio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  @media (min-width: 768px) {
    .main-radios__radio {
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start; } }

.main-radios__info {
  font-size: 20px;
  padding-left: 13px; }
  .main-radios__info:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E90C";
    color: #C6B5C6;
    transition: color 0.3s; }
  .main-radios__info:hover:before {
    color: #51284F; }
  .main-radios__info, .main-radios__info a {
    color: #EAE7E0;
    text-decoration: none; }

.main-radios__item {
  padding: 13px 10px;
  border-top: 1px solid #EAE7E0; }
  .main-radios.main-radios--no-first-item-decoration .main-radios__item:first-child {
    border-top: none;
    padding-top: 0; }
  .main-radios__item:last-child {
    border-bottom: 1px solid #EAE7E0; }

.main-radios__value {
  padding-top: 13px; }
  @media (min-width: 768px) {
    .main-radios__value {
      padding-left: 40px; } }
  .main-radios__value > *:last-child {
    margin-bottom: 0; }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
/*doc
---
title: Dialog Alertas
name: dialog-alertas
category: Componentes - Dialog Alertas
---
Menú de alertas de cabecera

```html_example
  <ul class="dialog-alertas">
    <li class="dialog-alertas__item">
      Aquí van los avisos informativos
    </li>
    <li class="dialog-alertas__item dialog-alertas__item--clickable">
      Aquí van los avisos que puedes pulsar y te lleva a donde sea necesario
    </li>
    <li class="dialog-alertas__item dialog-alertas__item--expandible">
      Aquí van contenido con aviso que puede expandirse hacia abajo.
  </ul>
```
*/
.dialog-alertas {
  width: 100%;
  max-width: 400px;
  z-index: 190 !important; }
  @media (max-width: 767px) {
    .dialog-alertas {
      max-height: calc(100% - 47px);
      overflow-y: auto; } }

.dialog-alertas__item {
  display: block;
  position: relative;
  padding: 15px 30px 15px 15px;
  font-size: 13px;
  transition: all 0.2s;
  background-color: #FFF9DC; }

.dialog-alertas_item--notificaciones {
  padding-left: 50px;
  vertical-align: middle;
  min-height: 50px;
  background-color: #FFF !important; }
  .dialog-alertas_item--notificaciones:before, .dialog-alertas_item--notificaciones:after {
    content: " ";
    display: table; }
  .dialog-alertas_item--notificaciones:after {
    clear: both; }
  .dialog-alertas_item--notificaciones:hover {
    background-color: #E5D0DA !important; }

.dialog-alertas_item--notificaciones_img {
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -18px;
  font-size: 2.5em; }

/* .dialog-alertas__item--expandible {
        background-color: #FFF;

        &:hover {
          background-color: $amarillo-claro;
          cursor: pointer;
        }

        @include icon($icon-flecha-fina-abajo) {
          position: absolute;
          right: $mobile-horizontal-margin;
          top: 50%;
          margin-top: -0.5em;
          color: $gris-oscuro2;
          font-size: 15px;
        }

        &.is-expanded:before {
          transform: rotate(180deg);
        }
      } */
.dialog-alertas__item--clickable {
  cursor: pointer; }
  .dialog-alertas__item--clickable:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E600";
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -0.5em;
    color: #555555;
    font-size: 15px; }
  .dialog-alertas__item--clickable:hover {
    background-color: #fff5c3; }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
.ultimo-acceso__fecha {
  margin-left: 3px; }

.ultimo-acceso__icono:before {
  font-family: "lk-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\E90D";
  font-size: 16px;
  vertical-align: middle;
  margin-left: 5px; }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
/*doc
---
title: Result Message
name: result-message
category: Angular Components - Result Message
---

```html_example
  <lk-result-message
    message-ok="'Contenido del mensaje ok'"
    is-ok="true"
    detail="'detalle de mensaje'">
  </lk-result-message>
```

```html_example
  <lk-result-message
    message-error="'Contenido del mensaje error'"
    detail="'detalle de mensaje'">
  </lk-result-message>
```
*/
.result-message {
  padding: 80px 13px 13px 13px;
  margin-bottom: 26px;
  border: 1px solid transparent;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  background-repeat: no-repeat;
  background-position: 50% 13px;
  background-size: 50px 50px; }
  @media (min-width: 768px) {
    .result-message {
      padding: 90px 26px 13px 26px;
      font-size: 24px;
      font-weight: normal;
      background-repeat: no-repeat;
      background-position: 50% 15px;
      background-size: 65px 65px; } }

.result-message--success {
  background-color: #DAEBB0;
  border-color: #84BD00;
  background-image: url(../../img/iconos/sonriente.svg); }

.result-message--error {
  background-color: #FBC6BE;
  border-color: #c7250c;
  background-image: url(../../img/iconos/triste.svg); }

.result-message__detail {
  margin-top: 8.66667px;
  font-weight: normal;
  font-size: 0.7em;
  line-height: 1.3; }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
.mobile-menu {
  position: fixed;
  top: 0;
  right: -280px;
  width: 280px;
  height: 100%;
  max-height: 100%;
  background-color: #FFF;
  z-index: 301;
  overflow: visible;
  overflow-y: auto; }
  .mobile-menu.is-visible {
    right: 0; }
  @media (min-width: 768px) {
    .mobile-menu {
      display: none; } }

.mobile-menu-ofuscator {
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 300;
  visibility: hidden; }
  .mobile-menu-ofuscator.is-visible {
    visibility: visible; }
  @media (min-width: 768px) {
    .mobile-menu-ofuscator {
      display: none; } }

.mobile-menu__header {
  display: table;
  width: 100%;
  height: 53px;
  background-color: #7B0B56; }

.mobile-menu__header-item {
  display: table-cell;
  vertical-align: middle;
  color: #fff;
  text-align: left; }

.mobile-menu__header-item--dark {
  background-color: #7B0B56; }
  .mobile-menu__header-item--dark:hover {
    background-color: #51284F; }

.mobile-menu__header-item--text {
  position: relative;
  padding-right: 10px;
  padding-left: 10px;
  font-weight: 600;
  text-align: left; }

.mobile-menu__header-item--dropdown {
  padding-right: 45px;
  cursor: pointer; }
  .mobile-menu__header-item--dropdown:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E603";
    position: absolute;
    top: 50%;
    margin-top: -7px;
    left: 73px;
    font-size: 14px; }
  .mobile-menu__header-item--dropdown.is-open {
    background-color: #7B0B56; }
    .mobile-menu__header-item--dropdown.is-open:before {
      -webkit-transform: rotate(180deg);
          -ms-transform: rotate(180deg);
              transform: rotate(180deg); }

.mobile-menu__header-item--desconectar {
  width: 70px;
  text-align: center; }

.mobile-menu__desconectar {
  margin-left: 10px;
  margin-top: 3px;
  border: none;
  background-color: transparent; }
  .mobile-menu__desconectar:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E608";
    font-size: 20px; }

.mobile-menu__menu-item {
  display: block;
  padding: 12px 10px;
  border-bottom: 1px solid #E3E1D7;
  border-left: 5px solid transparent;
  text-transform: uppercase;
  font-size: 13px; }
  .mobile-menu__menu-item.is-first {
    border-top: 1px solid #E3E1D7; }
  .mobile-menu__items-group .mobile-menu__menu-item {
    border-bottom: none; }
  .mobile-menu__menu--user .mobile-menu__menu-item {
    text-transform: uppercase; }
  .mobile-menu__menu-item.radio {
    padding-left: 30px;
    margin: 0; }
  .mobile-menu__menu-item:hover, .mobile-menu__menu-item.is-active {
    border-left-color: #51284F; }

.mobile-menu__item--desconectar {
  position: relative;
  padding-right: 45px;
  background-color: #7B0B56;
  color: #fff; }
  .mobile-menu__item--desconectar:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E602";
    position: absolute;
    top: 50%;
    margin-top: -10px;
    right: 13px;
    font-size: 20px; }

.mobile-menu__item--casa {
  position: relative;
  padding-left: 45px; }
  .mobile-menu__item--casa:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E90E";
    position: absolute;
    top: 50%;
    margin-top: -10px;
    left: 13px;
    font-size: 20px; }

.mobile-menu__menu-item--clickable {
  border-right: 5px solid transparent; }
  .mobile-menu__menu-item--clickable:hover, .mobile-menu__menu-item--clickable.is-active {
    border-right-color: #51284F; }

.mobile-menu__menu-item--conexion {
  padding: 15px;
  text-transform: none;
  text-align: right;
  font-size: 10px; }

.mobile-menu__item--inactive {
  background-color: #F5F5F1; }

.mobile-menu__title-group {
  padding: 10px 15px 0 15px;
  color: #A50050;
  font-weight: bold; }

.s-mobile-menu-telebanka {
  padding: 26px;
  text-align: right;
  font-size: 15px; }

.s-mobile-menu-telebanka__telefono {
  font-weight: 600;
  font-size: 1.3em; }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
/*doc
---
title: Box
name: box
category: Angular Components - Box
---

```html_example
<lk-box title="Título del box" hide="vm.isSearchboxHidden">
  Contenido del box
</lk-box>
```

Propiedad                 | Descripción
--------------------------|--------------------------------
`title`                   | Título del box
`hide`                    | TRUE: el box se esconde


Estilos                   | Descripción
--------------------------|------------------------------------------------
`.box--inner-margin`      | Estilo para neutralizar margen interior como los `form-group`de formularios
`.box__bottom-element`    | Estilo para el último elemento del box si usamos `box--inner-margin` y no tiene margen inferior

*/
.box {
  position: relative;
  background-color: #EAE7E0;
  padding: 13px;
  margin-bottom: 13px; }
  .box:before, .box:after {
    content: " ";
    display: table; }
  .box:after {
    clear: both; }
  @media (min-width: 768px) {
    .box {
      padding: 20px;
      padding-right: 45px;
      padding-top: 35px; } }

.box--inner-margin {
  padding-bottom: 6.5px; }
  @media (min-width: 768px) {
    .box--inner-margin {
      padding-bottom: 7px; } }

.box__bottom-element {
  margin-top: 13px; }

.box__close {
  position: absolute;
  padding: 7px 10px;
  top: 0;
  right: 0;
  outline: 0;
  z-index: 1;
  color: #51284F;
  border: none;
  background-color: transparent; }
  @media (min-width: 768px) {
    .box__close {
      top: 10px;
      right: 10px; } }
  .box__close:after {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E608";
    font-size: 10px; }
    @media (min-width: 768px) {
      .box__close:after {
        font-size: 12px; } }

.box__title {
  color: #A50050;
  text-transform: uppercase;
  font-size: 17px;
  margin-bottom: 8.66667px; }
  @media (max-width: 767px) {
    .box__title {
      padding-right: 15px;
      font-size: 13px; } }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
/*doc
---
title: Dropdown
name: dropdown
category: Angular Components - Dropdown
---

**Dependencia:** tether.js y drop.js

```html_example
<lk-dropdown data-position="'bottom right'">

  <lk-dropdown-target>
      Pulsame para abrir el combo
  </lk-dropdown-target>

  <lk-dropdown-element class="dropdown">
    <ul>
      <li><a class="dropdown__item dropdown__link">Enlace 1</a></li>
      <li><a class="dropdown__item dropdown__link">Enlace 2</a></li>
    </ul>
  </lk-dropdown-element>

</lk-dropdown>
```

Propiedad               |  Descripción
------------------------|----------------------------------------------------
`data-position`         | Ubicación de apertura del dropdown respecto a su padre. Por defecto: `bottom left`
*/
.tether-element {
  display: none;
  z-index: 2000; }
  .tether-element.tether-enabled {
    display: block; }

.tether-target {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.dropdown-target {
  display: inline-block; }

.dropdown-target--select {
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 0;
  font-weight: 600;
  min-width: 34px;
  transition: background-color 0.3s;
  color: #51284F;
  color: #333;
  background-color: #fff;
  border-color: #ccc;
  position: relative;
  padding-right: 35px;
  padding-left: 12px;
  padding-right: 12px;
  padding-right: 33px;
  border: 1px solid #E3E1D7;
  color: #555555;
  font-weight: normal; }
  .dropdown-target--select:focus, .dropdown-target--select.focus {
    color: #333;
    background-color: #e6e6e6;
    border-color: #8c8c8c; }
  .dropdown-target--select:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad; }
  .dropdown-target--select:active, .dropdown-target--select.active,
  .open > .dropdown-target--select.dropdown-toggle {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad; }
    .dropdown-target--select:active:hover, .dropdown-target--select:active:focus, .dropdown-target--select:active.focus, .dropdown-target--select.active:hover, .dropdown-target--select.active:focus, .dropdown-target--select.active.focus,
    .open > .dropdown-target--select.dropdown-toggle:hover,
    .open > .dropdown-target--select.dropdown-toggle:focus,
    .open > .dropdown-target--select.dropdown-toggle.focus {
      color: #333;
      background-color: #d4d4d4;
      border-color: #8c8c8c; }
  .dropdown-target--select:active, .dropdown-target--select.active,
  .open > .dropdown-target--select.dropdown-toggle {
    background-image: none; }
  .dropdown-target--select.disabled:hover, .dropdown-target--select.disabled:focus, .dropdown-target--select.disabled.focus, .dropdown-target--select[disabled]:hover, .dropdown-target--select[disabled]:focus, .dropdown-target--select[disabled].focus,
  fieldset[disabled] .dropdown-target--select:hover,
  fieldset[disabled] .dropdown-target--select:focus,
  fieldset[disabled] .dropdown-target--select.focus {
    background-color: #fff;
    border-color: #ccc; }
  .dropdown-target--select .badge {
    color: #fff;
    background-color: #333; }
  .dropdown-target--select:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E604";
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -8px;
    font-size: 18px;
    color: #51284F; }
  .dropdown-target--select:hover, .dropdown-target--select:active {
    background-color: #fff !important;
    border-color: #E3E1D7; }

.dropdown {
  display: none;
  min-width: 200px;
  background-color: #F5F5F1;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.23);
  z-index: 2000; }

.dropdown--on-top {
  z-index: 350 !important; }

.dropdown__item:not(.is-last) {
  border-bottom: 1px solid #E3E1D7; }

.dropdown__link {
  display: block;
  padding: 10px 15px;
  max-width: 250px;
  font-size: 13px;
  transition: all 0.2s;
  color: #51284F; }
  .dropdown__link:hover {
    background-color: #E5D0DA; }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
.backdrop {
  position: fixed;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 210;
  transition: background-color 0.2s; }
  .backdrop.is-visible {
    left: 0;
    background-color: rgba(0, 0, 0, 0.5); }

.float-menu {
  position: relative;
  width: 65px;
  height: 65px;
  overflow: hidden;
  right: 0;
  bottom: 0;
  transition: box-shadow 0s, right 0.3s, bottom 0.3s;
  z-index: 220; }
  .float-menu.is-opened {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.23);
    transition: box-shadow 0.3s 0.3s, right 0.3s, bottom 0.3s; }
    @media (max-width: 767px) {
      .float-menu.is-opened {
        right: 15px;
        bottom: 15px; } }
  @media (min-width: 768px) {
    .float-menu {
      width: 54px;
      height: 54px;
      right: auto;
      bottom: auto; } }

.float-menu__button {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background-color: #84BD00;
  border-radius: 100%;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
  width: 45px;
  height: 45px;
  padding-top: 13px;
  text-align: center;
  color: #fff;
  z-index: 90;
  cursor: pointer;
  transition: right 0.3s, bottom 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, right 0.3s, bottom 0.3s;
  transition: transform 0.3s, right 0.3s, bottom 0.3s, -webkit-transform 0.3s; }
  @media (min-width: 768px) {
    .float-menu__button {
      right: 5px;
      top: 0;
      bottom: auto; } }
  .float-menu__button:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E601";
    display: inline-block;
    font-size: 20px;
    transition: -webkit-transform 0.5s 0.1s;
    transition: transform 0.5s 0.1s;
    transition: transform 0.5s 0.1s, -webkit-transform 0.5s 0.1s; }
  .float-menu.is-opened .float-menu__button {
    -webkit-transform: scale(0.7);
        -ms-transform: scale(0.7);
            transform: scale(0.7);
    box-shadow: none; }
    @media (max-width: 767px) {
      .float-menu.is-opened .float-menu__button {
        right: 5px;
        bottom: 5px; } }
    .float-menu.is-opened .float-menu__button:before {
      -webkit-transform: rotate(135deg);
          -ms-transform: rotate(135deg);
              transform: rotate(135deg); }

.float-menu__background {
  position: absolute;
  border-radius: 100%;
  width: 15px;
  height: 15px;
  bottom: 25px;
  right: 25px;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  background-color: #fff;
  z-index: 1; }
  @media (min-width: 768px) {
    .float-menu__background {
      bottom: auto;
      top: 25px; } }
  .float-menu.is-opened .float-menu__background {
    -webkit-transform: scale(75);
        -ms-transform: scale(75);
            transform: scale(75);
    transition: -webkit-transform 0.6s 0.1s;
    transition: transform 0.6s 0.1s;
    transition: transform 0.6s 0.1s, -webkit-transform 0.6s 0.1s; }

.float-menu__items {
  position: relative;
  z-index: 2;
  margin-bottom: 60px;
  opacity: 0;
  transition: opacity 0.1s; }
  @media (min-width: 768px) {
    .float-menu__items {
      margin-top: 45px;
      margin-bottom: 0; } }
  .float-menu.is-opened .float-menu__items {
    opacity: 1;
    transition: opacity 0.1s 0.4s; }

.float-menu__item {
  display: block;
  padding: 12px 15px;
  border-bottom: 1px solid #E3E1D7;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  color: #51284F;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color 0.3s; }
  .float-menu__item:hover {
    background-color: #E5D0DA; }
  @media (min-width: 768px) {
    .float-menu__item {
      border-bottom: none;
      border-top: 1px solid #E3E1D7; }
      .float-menu__item:not(.is-secondary) {
        display: none; }
        .flaps-container.is-fixed .float-menu__item:not(.is-secondary) {
          display: block; } }

.float-menu__subtitle {
  display: block;
  font-size: 12px;
  color: #666666;
  text-transform: none;
  line-height: 1;
  white-space: normal; }

.float-menu__items .is-hidden {
  display: none !important; }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
/*doc
---
title: Flaps
name: flaps
category: Angular Components - Flaps
---

```html_example
<ul class="flaps">
  <li><a href="#" class="flaps__item is-active">Movimientos</a></li>
  <li><a href="#" class="flaps__item">Transferencias</a></li>
  <li><a href="#" class="flaps__item">Recibos</a></li>
  <li><a href="#" class="flaps__item flaps__item--options">Más opciones</a></li>
</ul>
```
*/
.flaps-container {
  position: relative; }

.flaps {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  margin-left: -10px;
  margin-right: -10px;
  margin-bottom: 20px; }
  @media (max-width: 767px) {
    .flaps:not(.flaps--show-on-mobile) {
      overflow: hidden;
      height: 0;
      margin-bottom: 13px; } }
  .flaps > li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: right;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -ms-flex-preferred-size: 0;
        flex-basis: 0;
    border-top: 2px solid #fff; }
    .flaps > li:not(:last-child):not(.is-last) {
      border-right: 3px solid #fff; }
  @media print {
    .flaps {
      display: none; } }

@media (min-width: 768px) {
  .flaps__float-menu-wrapper {
    position: relative;
    display: inline-block;
    width: 65px;
    height: 0;
    top: 22px;
    right: 60px;
    -ms-flex-preferred-size: 0;
        flex-basis: 0; } }

.flaps__float-menu-container {
  z-index: 220; }
  @media (max-width: 767px) {
    .flaps__float-menu-container {
      position: fixed;
      bottom: 0px;
      right: 0px; } }
  @media (min-width: 768px) {
    .flaps__float-menu-container {
      position: absolute; }
      .flaps-container.is-fixed .flaps__float-menu-container {
        position: fixed;
        top: 26px; } }

.flaps__item:hover, .flaps__item:focus, .flaps__item:active, .flaps__item.is-active {
  background-color: #7B0B56;
  color: #fff; }

.flaps__mas-opciones {
  display: none !important; }

@media (max-width: 767px) {
  .flaps__mas-opciones--visible-movil {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important; } }

@media (min-width: 768px) {
  .flaps__mas-opciones--visible-desktop {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important; } }

.flaps__item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 8px;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  text-transform: uppercase;
  background-color: #EAE7E0;
  transition: background-color 0.3s, color 0.3s; }
  .flaps__item.is-active:before {
    position: absolute;
    bottom: -20px;
    left: 50%;
    margin-left: -10px;
    border: inset 10px;
    content: "";
    display: block;
    height: 0;
    width: 0;
    border-color: #7B0B56 transparent transparent transparent;
    border-top-style: solid; }

.flaps__item--options {
  border: 1px solid #84BD00; }
  .flaps__item--options:hover, .flaps__item--options:focus, .flaps__item--options:active {
    background-color: #84BD00; }

.flaps__mas-opciones--verde {
  background-color: #84BD00;
  color: #fff; }
  .flaps__mas-opciones--verde:hover {
    background-color: #84BD00; }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
/*doc
---
title: Avisos Box
name: avisos-box
category: Angular Components - Avisos Box
---

###Avisos Estandar
```html_example
  <lk-avisos-box
    titulo="'Tus avisos más importantes'"
    avisos='[
      { tipo: "ok", mensaje: "Aviso de tipo ok (ok)" },
      { tipo: "warning", mensaje: "Aviso de tipo aviso warning (warning)" },
      { tipo: "error", mensaje: "Aviso de tipo aviso error (error)" },
      { tipo: "info", mensaje: "Aviso de tipo información (info)" },
      { tipo: "info-critico", mensaje: "Aviso de tipo alerta (info-critico)" },
      { tipo: "firma", mensaje: "Aviso información (firmar)" },
      { tipo: "chat", mensaje: "Aviso información (chat)" },
      { tipo: "calendario", mensaje: "Aviso información (calendario)" },
      { tipo: "docu", mensaje: "Aviso información (documento)" },
      { tipo: "formulario", mensaje: "Aviso información (formulario a rellenar)" },
      { tipo: "movil", mensaje: "Aviso información (notificacion en móvil)" },
    ]'>
  </lk-avisos-box>
```

###Avisos Tipo info
```html_example
<div class="avisos-box avisos-box--info">
  <button type="button" class="avisos-box__close" aria-label="Cerrar"></button>
  <ul class="avisos-box__item-wrapper">
    <li class="avisos-box__item">
      <div class="alert alert--info">
        Aviso tipo información en caja Azul
      </div>
    </li>
  </ul>
</div>
```
Variante               | Descripción
--------------------------|--------------------------------
`avisos-box__close--bigger`   | Botón de cerrar más grande

*/
.avisos-box {
  border: 1px solid transparent;
  position: relative;
  margin-bottom: 13px; }
  .avisos-box.padding10 {
    margin: 10px 0;
    padding: 10px; }

.avisos-box--small {
  padding-top: 8.66667px;
  padding-bottom: 8.66667px; }

.avisos-box__close {
  position: absolute;
  padding: 10px;
  top: 0px;
  right: 0px;
  outline: 0;
  line-height: 1;
  border: none;
  background-color: transparent; }
  .avisos-box__close:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E608";
    font-size: 9px; }

.avisos-box__item {
  position: relative;
  padding: 8.66667px;
  padding-left: 13px;
  font-size: 12px; }
  .avisos-box__item:not(:last-child) {
    border-bottom: 1px solid #CF9D00; }

.avisos-box__item--clickable:hover {
  background-color: #fff5c3;
  cursor: pointer; }

.avisos-box__item--clickable .alert {
  padding-right: 26px; }
  .avisos-box__item--clickable .alert:after {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E600";
    position: absolute;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    right: 0;
    font-size: 1.1em;
    vertical-align: middle;
    font-weight: bold; }

.avisos-box__close-item {
  position: absolute;
  padding: 10px;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0px;
  outline: 0;
  border: none;
  background-color: transparent;
  color: #CF9D00; }
  .avisos-box__close-item:before {
    font-family: "lk-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E608";
    font-size: 9px; }

.avisos-box__close--bigger:before {
  font-family: "lk-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\E608";
  font-size: 10px; }
  @media (min-width: 768px) {
    .avisos-box__close--bigger:before {
      font-size: 12px; } }

.avisos-box--warning {
  background-color: #FFF9DC;
  border-color: #CF9D00; }
  .avisos-box--warning .avisos-box__close {
    color: #CF9D00; }

.avisos-box--info {
  background-color: #D0EFF9;
  border-color: #1a9fca; }
  .avisos-box--info .avisos-box__close {
    color: #1a9fca; }

.avisos-box__title {
  padding: 13px;
  font-size: 13px;
  text-transform: uppercase;
  text-align: center;
  color: #51284F; }

.alert {
  position: relative;
  padding-left: 30px; }
  .alert:before {
    position: absolute;
    left: 0px;
    top: 50%;
    margin-top: -10px;
    font-size: 20px; }
  .alert:not(:last-child) {
    margin-bottom: 13px; }
  .alert a {
    text-decoration: underline; }
    .alert a:hover {
      text-decoration: none; }

.alert--top-icon:before {
  top: 0;
  margin-top: 0; }

.alert--warning:before {
  font-family: "lk-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\E917";
  color: #CF9D00; }

.alert--warning, .alert--warning a {
  color: #CF9D00; }

.alert--ok:before {
  font-family: "lk-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\E916";
  color: #669200; }

.alert--ok, .alert--ok a {
  color: #669200; }

.alert--info:before {
  font-family: "lk-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\E901";
  color: #1a9fca; }

.alert--info, .alert--info a {
  color: #1a9fca; }

.alert--info-critico:before {
  font-family: "lk-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\E915";
  color: #E10000; }

.alert--info-critico, .alert--info-critico a {
  color: #E10000; }

.alert--error:before {
  font-family: "lk-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\E917";
  color: #E10000; }

.alert--error, .alert--error a {
  color: #E10000; }

.alert--docu:before {
  font-family: "lk-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\E918"; }

.alert--chat:before {
  font-family: "lk-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\E91A"; }

.alert--firma:before {
  font-family: "lk-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\E607"; }

.alert--calendario:before {
  font-family: "lk-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\E919"; }

.alert--formulario:before {
  font-family: "lk-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\E91D"; }

.alert__secondary-text {
  position: relative;
  margin-top: 8px;
  padding-left: 15px;
  font-size: 10px;
  color: #51284F; }

.alert__secondary-text--movil:before {
  font-family: "lk-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\E91C";
  position: absolute;
  left: 0px;
  top: 50%;
  margin-top: -7px;
  font-size: 14px; }
@charset "UTF-8";
/*
  Referencia en correcto orden de todas las variables de la aplicación
*/
/* ==  Paleta de colores  ==================== */
/* == Asignación de colores ================== */
/* ==  Tipografía  =========================== */
/* == Márgenes =============================== */
/* == Formularios ============================= */
/* == Botones ================================= */
/* == Otros =================================== */
/*
  Código para facilitar el uso del sprite de svg para fondos
  Ejemplo:

  .class {
      &:before {
          @include svg-sprite(twitter);
          content: '';
          float: left;
          margin-right: 0.5em;
      }

      &:hover {
          &:before {
              @include svg-sprite(twitterHover, bg);
          }
      }
  }
*/
/*
    Basado para ser usado con iconos de Icomoon
*/
/*
  Icono redondo con icono de fuente

  $size: anchura y altura del icono
  $font-size: Tamaño del icono de fuente
*/
/*
  Elimina todo estilo del select box para personalizarlo
  https://gist.github.com/mojaray2k/569305b307ff10f44176
  http://output.jsbin.com/telegu/1
*/
.modal-convivencia-md,
.modal-convivencia-lg {
  width: 93%;
  height: calc(100% - 60px); }
  .modal-convivencia-md .modal-content,
  .modal-convivencia-lg .modal-content {
    height: 100%; }

@media (min-width: 768px) {
  .modal-convivencia-md {
    width: 720px;
    max-width: 720px; } }

@media (min-width: 768px) {
  .modal-convivencia-lg {
    width: 95%; } }

@media (min-width: 910px) {
  .modal-convivencia-lg {
    width: 900px;
    max-width: 900px; } }

.c-convivencia-modal__body {
  height: 100%;
  padding-top: 28px; }
  @media (min-width: 768px) {
    .c-convivencia-modal__body {
      padding-top: 45px; } }

.c-convivencia-modal__iframe-wrapper {
  overflow: auto;
  width: 100%;
  height: 100%;
  border-top: 1px solid #999999;
  -webkit-overflow-scrolling: touch; }

.c-convivencia-modal__iframe {
  width: 100%;
  height: 100%;
  border-top: 1px solid #999999; }

/*# sourceMappingURL=lagunaro.css.map*/