@charset "UTF-8";
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
@import url("https://fonts.googleapis.com/css?family=Covered+By+Your+Grace");
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0; }

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto; }

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal; }

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box; }

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto; }

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold; }

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

@font-face {
  font-family: "alda";
  src: url("font/AldaOT-Regular.eot");
  src: local("☺"), url("font/AldaOT-Regular.woff") format("woff"), url("font/AldaOT-Regular.ttf") format("truetype"), url("font/AldaOT-Regular.svg") format("svg");
  font-weight: 100;
  font-style: normal; }

@font-face {
  font-family: "nylice";
  src: url("font/NYLICEffra-Regular.eot");
  src: local("☺"), url("font/NYLICEffra-Regular.woff") format("woff"), url("font/NYLICEffra-Regular.ttf") format("truetype"), url("font/NYLICEffra-Regular.svg") format("svg");
  font-weight: "normal";
  font-style: normal; }

/* ejemplo:
        body {
          @include background-image('pattern');
        }
*/
/* ejemplo:
        .foo {
            @include transition(transform 0.2s ease-in 0.2s, opacity 0.2s ease);
        }
*/
/* ejemplo:
        @include keyframes(slide-down) {
          0% { opacity: 1; }
          90% { opacity: 0; }
        }
        .element {
          @include animation('slide-down 5s 3');
        }
*/
/* ejemplo:
        .container-with-floated-children {
          @extend %clearfix;
        }
*/
.group::after {
  clear: both;
  content: "";
  display: table; }

.clearfix {
  clear: both; }

.transparente {
  pointer-events: none; }

.invisible {
  opacity: 0; }

.visible {
  opacity: 1 !important; }

/* ejemplo:
        body {
          @include background-image('pattern');
        }
*/
/* ejemplo:
        .foo {
            @include transition(transform 0.2s ease-in 0.2s, opacity 0.2s ease);
        }
*/
/* ejemplo:
        @include keyframes(slide-down) {
          0% { opacity: 1; }
          90% { opacity: 0; }
        }
        .element {
          @include animation('slide-down 5s 3');
        }
*/
/* ejemplo:
        .container-with-floated-children {
          @extend %clearfix;
        }
*/
.group::after {
  clear: both;
  content: "";
  display: table; }

.clearfix {
  clear: both; }

.transparente {
  pointer-events: none; }

.invisible {
  opacity: 0; }

.visible {
  opacity: 1 !important; }

/*@mixin transition ($transition) {
  -webkit-transition: $transition;
  -moz-transition:    $transition;
  -ms-transition:     $transition;
  -o-transition:      $transition;
  transition:         $transition;
}*/
.slideshow > .viewport {
  overflow: hidden; }
  .slideshow > .viewport > .slides {
    font-size: 0;
    -webkit-transition: margin-left 0.5s linear;
    -moz-transition: margin-left 0.5s linear;
    -o-transition: margin-left 0.5s linear;
    transition: margin-left 0.5s linear; }
    .slideshow > .viewport > .slides > * {
      display: inline-block;
      margin-right: 20px; }

.slideshow .pager {
  position: relative;
  margin: 50px auto 0px;
  text-align: center;
  /*

  a {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin: 0 6px;
    //-webkit-border-radius:50%;
    //-moz-border-radius:50%;
    //border-radius:50%;
    background: $color-item;
    vertical-align: top;

    &:hover,
    &:active {
      text-decoration: none;
    }
    &.selected {
      background: $color-item-selected;
    }
    &.anterior,
    &.siguiente {
      display: inline-block;
      @media (min-width: $media-sm) {
        display: inline-block;
        width: 0.5em;
        height: 35px;
        line-height: 35px;
        font-size: 30px;
        background:transparent;
        color:$color-item;
        opacity:0.5;
      }
    }
  }
  */ }
  @media (min-width: 768px) {
    .slideshow .pager {
      margin-top: 0px;
      text-align: right;
      z-index: 1; } }
  .slideshow .pager.estilo-prev-next a {
    display: none; }
    .slideshow .pager.estilo-prev-next a.anterior, .slideshow .pager.estilo-prev-next a.siguiente {
      display: inline-block; }

.slideshow .pager {
  margin-top: 0;
  margin-bottom: 25px;
  text-align: right;
  font-size: 200%; }
  .slideshow .pager a {
    background: #0000ff;
    color: #00ff00; }

.visible-xs {
  display: none; }
  @media (max-width: 768px) {
    .visible-xs {
      display: inline; } }

.visible-sm {
  display: none; }
  @media (min-width: 768px) {
    .visible-sm {
      display: inline; } }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%; }

body {
  font-size: 14px;
  line-height: 1.428;
  color: #51545c;
  font-family: 'nylice',sans-serif;
  background: none repeat-y center #ffffff;
  background-size: 100% auto; }

a {
  color: #51545c;
  text-decoration: none; }

a:hover,
a:active,
a.selected {
  text-decoration: none; }

svg {
  pointer-events: none !important; }

svg.boxed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

h2 {
  padding: 0;
  margin: 0; }

.v-align {
  display: table;
  width: 100%;
  height: 100%; }
  .v-align .txt {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center; }
    .v-align .txt > strong {
      font-size: 120%; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

#simbolos {
  display: none; }

.circulo {
  display: table;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-family: 'alda',sans-serif;
  font-weight: 200; }
  .circulo > .texto {
    display: table-cell;
    width: 100%;
    height: 100%;
    padding: 1rem;
    vertical-align: middle;
    text-align: center; }

#menu {
  position: relative; }
  @media (min-width: 768px) {
    #menu {
      position: fixed;
      width: 24%; } }
  #menu > .logo {
    position: relative;
    display: block;
    padding: 15% 16% 5% 20%;
    text-align: center; }
    #menu > .logo:before {
      content: '';
      display: block;
      padding-bottom: 29.72%; }
    #menu > .logo svg {
      position: absolute;
      display: block;
      top: 40%;
      left: 20%;
      width: 64%;
      height: 40%; }
  #menu nav {
    background: #ffffff; }
    @media (max-width: 768px) {
      #menu nav {
        position: absolute;
        z-index: 100;
        overflow: hidden;
        max-height: 0;
        -webkit-transition: max-height 0.3s linear;
        -moz-transition: max-height 0.3s linear;
        -o-transition: max-height 0.3s linear;
        transition: max-height 0.3s linear; }
        #menu nav.visible {
          max-height: 45em;
          overflow: auto; } }
    #menu nav a {
      position: relative;
      display: block;
      padding: 1.5em 16% 1.5em 20%;
      font-size: 0.9em; }
      #menu nav a:before {
        content: '';
        position: absolute;
        height: 1px;
        width: 84%;
        top: 0;
        left: 0;
        background: #51545c; }
      #menu nav a:hover, #menu nav a:active, #menu nav a.selected {
        background: #009ec0;
        color: #b6e1f5; }
        #menu nav a:hover:before, #menu nav a:hover:after, #menu nav a:active:before, #menu nav a:active:after, #menu nav a.selected:before, #menu nav a.selected:after {
          content: none !important; }
      #menu nav a:first-child:before, #menu nav a:first-child:after {
        content: none; }
      #menu nav a.selected + a:before,
      #menu nav a:hover + a:before {
        content: none; }
      #menu nav a:last-child:after {
        content: '';
        position: absolute;
        height: 1px;
        width: 84%;
        bottom: 0;
        left: 0;
        background: #51545c; }
      @media (min-width: 992px) {
        #menu nav a {
          padding: 1.25em 16% 1.25em 20%; } }

@media (min-width: 768px) {
  #contenido {
    width: 76%;
    margin-left: 24%; } }

#contenido > h2 {
  font-family: 'alda';
  font-weight: 200;
  font-size: 1.4rem;
  padding: 1.5rem 1rem;
  line-height: 1.1; }
  @media (min-width: 768px) {
    #contenido > h2 {
      font-size: 1.8rem; } }

.sig-pag {
  position: absolute;
  width: 50px;
  height: 30px;
  padding: 10px 10px 10px 10px;
  bottom: -15px;
  left: 50%;
  margin-left: -25px;
  z-index: 99; }
  @media (min-width: 768px) {
    .sig-pag {
      width: 60px;
      height: 36px;
      padding: 10px 10px 10px 10px; } }
  .sig-pag svg {
    width: 100%; }

.seccion {
  position: relative;
  background: none center;
  background-size: cover; }

.slideshow {
  position: relative; }
  .slideshow .pager {
    position: static; }
    .slideshow .pager > a {
      position: absolute;
      top: 50%;
      width: 18px;
      height: 42px;
      margin-top: -21px;
      background: none no-repeat center;
      background-size: auto 100%; }
      .slideshow .pager > a.anterior {
        left: -27px; }
      .slideshow .pager > a.siguiente {
        right: -27px; }

.footnote {
  font-size: 0.6rem;
  position: absolute;
  bottom: 0.25rem;
  left: 0.5rem; }
  @media (min-width: 768px) {
    .footnote {
      font-size: 0.8rem;
      bottom: 0.5rem;
      left: 2rem; } }

#s1 {
  background-image: url("../img/s1.jpg");
  background-position: top left; }
  #s1:before {
    content: '';
    display: block;
    padding-bottom: 105%; }
    @media (min-width: 768px) {
      #s1:before {
        padding-bottom: 73.05%; } }
  #s1 h1 {
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    width: 60%;
    margin: 0;
    padding: 0;
    font-size: 3em;
    font-family: 'alda';
    font-weight: 300;
    color: #007090;
    line-height: 1; }
    @media (min-width: 768px) {
      #s1 h1 {
        width: 42%;
        left: 2rem;
        top: 2rem;
        font-size: 6em; } }
  #s1 .subtitulo {
    width: 85%;
    font-size: 1.3rem;
    font-family: 'nylice';
    color: #51545c;
    line-height: 1.2; }
    @media (min-width: 768px) {
      #s1 .subtitulo {
        width: 80%;
        margin-top: 0.5em;
        font-size: 1.6rem; } }
  #s1 .sig-pag {
    background: #004a61; }
    #s1 .sig-pag:hover {
      background: #009ec0; }

#s2 {
  background-image: url("../img/s2.jpg");
  background-position: top right; }
  #s2:before {
    content: '';
    display: block;
    padding-bottom: 95%; }
    @media (min-width: 768px) {
      #s2:before {
        padding-bottom: 36%; } }
  #s2 .circulo {
    width: 14rem;
    height: 14rem;
    background: rgba(81, 84, 92, 0.4);
    font-size: 0.9rem;
    position: absolute;
    right: 1.5rem;
    top: 1.5rem; }
    @media (min-width: 768px) {
      #s2 .circulo {
        width: 15rem;
        height: 15rem;
        font-size: 1rem; } }
    @media (min-width: 768px) {
      #s2 .circulo {
        right: 3rem; } }

#s3 {
  background-image: url("../img/s3.jpg");
  background-position: top right; }
  #s3:before {
    content: '';
    display: block;
    padding-bottom: 225%; }
    @media (min-width: 768px) {
      #s3:before {
        padding-bottom: 125%; } }
    @media (min-width: 992px) {
      #s3:before {
        padding-bottom: 90%; } }
    @media (min-width: 1200px) {
      #s3:before {
        padding-bottom: 79.81%; } }
  @media (min-width: 992px) {
    #s3 {
      background-position: top left 5%; } }
  @media (min-width: 1200px) {
    #s3 {
      background-position: top right; } }
  #s3 .carta {
    margin: 1rem auto;
    position: absolute;
    width: calc(100% - 2rem);
    top: 1rem;
    left: 1rem;
    line-height: 1.2; }
    @media (min-width: 992px) {
      #s3 .carta {
        width: 50%;
        margin-left: 45%;
        margin-right: 0; } }
    #s3 .carta .cabecera {
      padding: 2rem 2rem 0.5rem;
      background: #ccd4e3; }
      @media (min-width: 768px) {
        #s3 .carta .cabecera {
          padding: 2rem; } }
      #s3 .carta .cabecera .titulo {
        font-family: 'alda',sans-serif;
        font-weight: 200;
        font-size: 2rem;
        color: #004a61;
        line-height: 0.8;
        margin-bottom: 1rem; }
      #s3 .carta .cabecera .subtitulo {
        font-size: 1.2em;
        color: #009ec0;
        margin-bottom: 1rem; }
    #s3 .carta .tabs {
      font-size: 0.1px;
      margin: 0 -1rem; }
      @media (min-width: 768px) {
        #s3 .carta .tabs {
          margin: 0; } }
      #s3 .carta .tabs a {
        display: inline-block;
        height: 3rem;
        margin-right: 0.5rem;
        background: none no-repeat center;
        background-size: auto 100%; }
        @media (min-width: 768px) {
          #s3 .carta .tabs a {
            margin-right: 1rem; } }
        #s3 .carta .tabs a:last-child {
          margin-right: 0; }
        #s3 .carta .tabs a.grafica {
          width: 3rem;
          background-image: url("../img/carta-grafica.png"); }
          #s3 .carta .tabs a.grafica:hover, #s3 .carta .tabs a.grafica.selected {
            background-image: url("../img/carta-grafica-h.png"); }
        #s3 .carta .tabs a.mundo {
          width: 3rem;
          background-image: url("../img/carta-mundo.png"); }
          #s3 .carta .tabs a.mundo:hover, #s3 .carta .tabs a.mundo.selected {
            background-image: url("../img/carta-mundo-h.png"); }
        #s3 .carta .tabs a.pais {
          width: 4.48rem;
          background-image: url("../img/carta-pais.png"); }
          #s3 .carta .tabs a.pais:hover, #s3 .carta .tabs a.pais.selected {
            background-image: url("../img/carta-pais-h.png"); }
        #s3 .carta .tabs a.gente {
          width: 3rem;
          background-image: url("../img/carta-gente.png"); }
          #s3 .carta .tabs a.gente:hover, #s3 .carta .tabs a.gente.selected {
            background-image: url("../img/carta-gente-h.png"); }
    #s3 .carta .cuerpo {
      padding: 2rem;
      background: #ffffff; }
      @media (min-width: 768px) {
        #s3 .carta .cuerpo {
          font-size: 1.2em; } }
      #s3 .carta .cuerpo .parte {
        height: 13rem;
        display: none; }
        #s3 .carta .cuerpo .parte.selected {
          display: block; }
        @media (min-width: 768px) {
          #s3 .carta .cuerpo .parte {
            height: 14.5rem; } }
      #s3 .carta .cuerpo .pie .firma {
        width: 25%;
        margin-bottom: 1rem;
        position: relative; }
        #s3 .carta .cuerpo .pie .firma:before {
          content: '';
          display: block;
          padding-bottom: 37.25%; }
      #s3 .carta .cuerpo .pie .logo {
        width: 35%;
        position: relative; }
        #s3 .carta .cuerpo .pie .logo:before {
          content: '';
          display: block;
          padding-bottom: 29.72%; }

#s4 {
  background-image: url("../img/s4.jpg");
  background-position: top right; }
  #s4:before {
    content: '';
    display: block;
    padding-bottom: 95%; }
    @media (min-width: 768px) {
      #s4:before {
        padding-bottom: 36%; } }
  #s4 .circulo {
    width: 13rem;
    height: 13rem;
    background: rgba(81, 84, 92, 0.4);
    font-size: 1.5rem;
    position: absolute;
    right: 1.5rem;
    bottom: 1rem; }
    @media (min-width: 768px) {
      #s4 .circulo {
        width: 12rem;
        height: 12rem;
        font-size: 1.2rem; } }
    @media (min-width: 992px) {
      #s4 .circulo {
        width: 15rem;
        height: 15rem;
        font-size: 1.5rem; } }
    @media (min-width: 768px) {
      #s4 .circulo {
        top: 1.5rem;
        right: 3rem;
        bottom: auto; } }

h2#pre-s5 {
  background: #deeef8;
  color: #009ec0; }

#s5 {
  background-image: url("../img/s5.jpg");
  background-position: top left; }
  #s5:before {
    content: '';
    display: block;
    padding-bottom: 170%; }
    @media (min-width: 768px) {
      #s5:before {
        padding-bottom: 63.85%; } }
  @media (min-width: 768px) {
    #s5 {
      background-position: bottom left; } }
  #s5 #s5-slideshow {
    position: absolute;
    top: 25%;
    left: 10%;
    width: 80%; }
    @media (min-width: 768px) {
      #s5 #s5-slideshow {
        top: 20%;
        width: 30%;
        left: 2rem; } }
  #s5 .slide {
    height: 12rem;
    vertical-align: top; }
    #s5 .slide figure {
      height: 4rem;
      margin: 0;
      background: none no-repeat center left 2rem;
      background-size: auto 100%; }
      @media (min-width: 768px) {
        #s5 .slide figure {
          height: 6rem; } }
      #s5 .slide figure.operaciones {
        background-image: url("../img/ico-6-operaciones.png"); }
      #s5 .slide figure.lineas-negocio {
        background-image: url("../img/ico-5-lineas.png"); }
      #s5 .slide figure.solidez-financiera {
        background-image: url("../img/ico-4-solidez.png"); }
      #s5 .slide figure.colaboradores {
        background-image: url("../img/ico-3-colaboradores.png"); }
      #s5 .slide figure.promotores {
        background-image: url("../img/ico-2-promotores.png"); }
      #s5 .slide figure.asesores {
        background-image: url("../img/ico-1-asesores.png"); }
    #s5 .slide h3 {
      margin: 0;
      padding: 1rem 1rem 0;
      font-family: 'alda',sans-serif;
      font-weight: 200;
      font-size: 1.4rem;
      color: #009ec0; }
    #s5 .slide div {
      padding: 0 1rem;
      font-size: 1rem; }
  #s5 .sig-pag {
    background: #a5a000; }
    #s5 .sig-pag:hover {
      background: #009ec0; }

#s6 {
  background-image: url("../img/s6.jpg");
  background-position: top right; }
  #s6:before {
    content: '';
    display: block;
    padding-bottom: 95%; }
    @media (min-width: 768px) {
      #s6:before {
        padding-bottom: 36%; } }
  #s6 .circulo {
    width: 13rem;
    height: 13rem;
    background: rgba(81, 84, 92, 0.4);
    font-size: 1.5rem;
    position: absolute;
    right: 1.5rem;
    bottom: 1rem; }
    @media (min-width: 768px) {
      #s6 .circulo {
        width: 12rem;
        height: 12rem;
        font-size: 1.2rem; } }
    @media (min-width: 992px) {
      #s6 .circulo {
        width: 15rem;
        height: 15rem;
        font-size: 1.5rem; } }
    @media (min-width: 768px) {
      #s6 .circulo {
        top: 1.5rem;
        right: 3rem;
        bottom: auto; } }

h2#pre-s7 {
  background: #e3e7e0;
  color: #a5a000; }

#s7 {
  background-image: none;
  background: #ffffff; }
  #s7:before {
    content: '';
    display: block;
    padding-bottom: 110%; }
    @media (min-width: 768px) {
      #s7:before {
        padding-bottom: 75%; } }
    @media (min-width: 992px) {
      #s7:before {
        padding-bottom: 61%; } }
  #s7 .columnas {
    position: absolute;
    top: 1rem;
    left: 1rem;
    bottom: 1rem;
    right: 1rem;
    font-size: 0;
    vertical-align: top; }
    @media (min-width: 768px) {
      #s7 .columnas {
        left: 0;
        right: 0; } }
    #s7 .columnas .columna {
      position: absolute;
      height: 100%;
      width: 25%;
      padding: 0 0.25rem; }
      @media (min-width: 768px) {
        #s7 .columnas .columna {
          padding: 0 1rem; } }
      #s7 .columnas .columna .barra-box {
        position: relative;
        height: 60%; }
        @media (min-width: 768px) {
          #s7 .columnas .columna .barra-box {
            height: 60%; } }
        #s7 .columnas .columna .barra-box .barra {
          position: absolute;
          bottom: 0;
          width: 5rem;
          background: none no-repeat center;
          background-size: auto 100%;
          left: 50%;
          margin-left: -2.5rem;
          z-index: 2; }
          #s7 .columnas .columna .barra-box .barra .monto {
            position: relative;
            top: -2rem;
            color: #a5a000;
            font-size: 0.9rem;
            text-align: center; }
            @media (min-width: 768px) {
              #s7 .columnas .columna .barra-box .barra .monto {
                font-size: 1.2rem; } }
        @media (min-width: 768px) {
          #s7 .columnas .columna .barra-box:before {
            content: '';
            display: block;
            position: absolute;
            z-index: 0;
            width: 6rem;
            height: 5rem;
            bottom: 0px;
            left: 50%;
            background: url("../img/bar-sombra.png") no-repeat bottom left;
            background-size: 100% auto; } }
      #s7 .columnas .columna .descripcion {
        height: 30%;
        font-size: 0.6rem; }
        @media (min-width: 768px) {
          #s7 .columnas .columna .descripcion {
            height: 20%;
            padding: 1rem 0;
            font-size: 0.8rem; } }
        @media (min-width: 992px) {
          #s7 .columnas .columna .descripcion {
            padding: 1rem; } }
      #s7 .columnas .columna:nth-child(1) {
        left: 0; }
        #s7 .columnas .columna:nth-child(1) .barra {
          height: 80%;
          background-image: url("../img/bar-primas-emitidas.png"); }
      #s7 .columnas .columna:nth-child(2) {
        left: 25%; }
        #s7 .columnas .columna:nth-child(2) .barra {
          height: 50%;
          background-image: url("../img/bar-capital-contable.png"); }
      #s7 .columnas .columna:nth-child(3) {
        left: 50%; }
        #s7 .columnas .columna:nth-child(3) .barra {
          height: 75%;
          background-image: url("../img/bar-primas-emitidas.png"); }
      #s7 .columnas .columna:nth-child(4) {
        left: 75%; }
        #s7 .columnas .columna:nth-child(4) .barra {
          height: 60%;
          background-image: url("../img/bar-reservas.png"); }
      #s7 .columnas .columna .titulo {
        height: 10%;
        color: #0079c1;
        font-size: 0.95rem;
        font-family: 'alda',sans-serif;
        font-weight: 200;
        text-align: center;
        line-height: 1; }
        @media (min-width: 768px) {
          #s7 .columnas .columna .titulo {
            height: 10%;
            font-size: 1.6rem; } }

#s8 {
  background-image: url("../img/s8.jpg");
  background-position: top 18% right; }
  #s8:before {
    content: '';
    display: block;
    padding-bottom: 95%; }
    @media (min-width: 768px) {
      #s8:before {
        padding-bottom: 36%; } }
  #s8 .circulo {
    width: 11rem;
    height: 11rem;
    background: rgba(81, 84, 92, 0.4);
    font-size: 1.4rem;
    position: absolute;
    right: 1.5rem;
    bottom: 1rem; }
    @media (min-width: 768px) {
      #s8 .circulo {
        width: 12rem;
        height: 12rem;
        font-size: 1.3rem; } }
    @media (min-width: 992px) {
      #s8 .circulo {
        width: 15rem;
        height: 15rem;
        font-size: 1.5rem; } }
    @media (min-width: 768px) {
      #s8 .circulo {
        top: 1rem;
        right: 1rem;
        bottom: auto; } }
    @media (min-width: 992px) {
      #s8 .circulo {
        right: 3rem; } }

h2#pre-s9 {
  background: #FCEFED;
  color: #EBAEAA; }
  h2#pre-s9 .subtitulo {
    margin-top: 0.5rem;
    color: #0079c1;
    font-family: 'nylice',sans-serif;
    font-size: 1.2rem; }
    @media (min-width: 768px) {
      h2#pre-s9 .subtitulo {
        font-size: 1.35rem; } }

#s9 {
  background-image: url("../img/s9.jpg");
  background-position: bottom 10% right; }
  #s9:before {
    content: '';
    display: block;
    padding-bottom: 130%; }
    @media (min-width: 768px) {
      #s9:before {
        padding-bottom: 85%; } }
    @media (min-width: 992px) {
      #s9:before {
        padding-bottom: 75%; } }
    @media (min-width: 1200px) {
      #s9:before {
        padding-bottom: 58%; } }
  #s9 p {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 1rem;
    left: 2rem;
    font-size: 1.2em; }
  #s9 #s9-slideshow {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%; }
    @media (min-width: 768px) {
      #s9 #s9-slideshow {
        top: 10%;
        width: 19rem;
        left: 50%;
        margin-left: -9.5rem; } }
  #s9 .slide {
    vertical-align: top; }
    #s9 .slide figure {
      height: 4rem;
      margin: 1rem 0 0;
      background: none no-repeat center;
      background-size: auto 100%; }
      @media (min-width: 768px) {
        #s9 .slide figure {
          height: 5rem; } }
    #s9 .slide h3 {
      margin: 0 0 1rem;
      padding: 0rem 1rem 0;
      font-family: 'alda',sans-serif;
      font-weight: 200;
      font-size: 1.4rem;
      height: 2.5rem;
      text-align: center;
      line-height: 1.1; }
    #s9 .slide.great-place-work h3 {
      color: #d33146; }
    #s9 .slide.great-place-work > div {
      width: 13rem;
      height: 13rem;
      background: rgba(254, 209, 205, 0.4);
      font-size: 0.6rem; }
      @media (min-width: 768px) {
        #s9 .slide.great-place-work > div {
          width: 19rem;
          height: 19rem;
          font-size: 0.8rem; } }
    #s9 .slide.great-place-work figure {
      background-image: url("../img/ico-greatplacework.png"); }
    #s9 .slide.buro h3 {
      color: #007090; }
    #s9 .slide.buro > div {
      width: 13rem;
      height: 13rem;
      background: rgba(222, 238, 248, 0.4);
      font-size: 0.6rem; }
      @media (min-width: 768px) {
        #s9 .slide.buro > div {
          width: 19rem;
          height: 19rem;
          font-size: 1.1rem; } }
    #s9 .slide.buro figure {
      background-image: url("../img/ico-buro.png"); }
    #s9 .slide.gdl h3 {
      color: #94D2A9; }
    #s9 .slide.gdl > div {
      width: 13rem;
      height: 13rem;
      background: rgba(234, 239, 233, 0.4);
      font-size: 0.6rem; }
      @media (min-width: 768px) {
        #s9 .slide.gdl > div {
          width: 19rem;
          height: 19rem;
          font-size: 1.1rem; } }
    #s9 .slide.gdl figure {
      background-image: url("../img/ico-gdl.png"); }
    #s9 .slide.world-finance h3 {
      color: #004a61; }
    #s9 .slide.world-finance > div {
      width: 13rem;
      height: 13rem;
      background: rgba(204, 212, 227, 0.4);
      font-size: 0.6rem; }
      @media (min-width: 768px) {
        #s9 .slide.world-finance > div {
          width: 19rem;
          height: 19rem;
          font-size: 1.1rem; } }
    #s9 .slide.world-finance figure {
      background-image: url("../img/ico-world-finance.png"); }
    #s9 .slide > div {
      margin: auto;
      color: #51545c; }
  @media (min-width: 768px) {
    #s9 .pager {
      margin-top: -4rem; } }
  #s9 .sig-pag {
    background: #00b0b5; }
    #s9 .sig-pag:hover {
      background: #009ec0; }

#s10 {
  background-image: url("../img/s10.jpg");
  background-position: top right; }
  #s10:before {
    content: '';
    display: block;
    padding-bottom: 95%; }
    @media (min-width: 768px) {
      #s10:before {
        padding-bottom: 36%; } }
  #s10 .circulo {
    width: 12.5rem;
    height: 12.5rem;
    background: rgba(81, 84, 92, 0.4);
    font-size: 1.5rem;
    position: absolute;
    right: 1.5rem;
    bottom: 1rem; }
    @media (min-width: 768px) {
      #s10 .circulo {
        width: 12rem;
        height: 12rem;
        font-size: 1.2rem; } }
    @media (min-width: 992px) {
      #s10 .circulo {
        width: 15rem;
        height: 15rem;
        font-size: 1.5rem; } }
    @media (min-width: 768px) {
      #s10 .circulo {
        bottom: 1rem;
        right: 3rem; } }

@media (min-width: 768px) {
  #s11:before {
    content: '';
    display: block;
    padding-bottom: 85%; } }

@media (min-width: 992px) {
  #s11:before {
    content: '';
    display: block;
    padding-bottom: 50%; } }

#s11 > .texto {
  background: #E6F4F4;
  padding: 2rem 1rem 1rem; }
  @media (min-width: 768px) {
    #s11 > .texto {
      position: absolute;
      width: 40%;
      top: 0;
      bottom: 0; } }
  #s11 > .texto .titulo {
    color: #00b0b5;
    font-size: 2em;
    font-family: 'alda';
    font-weight: 200; }
  #s11 > .texto p {
    margin: 1em 0;
    font-size: 0.9em; }
    @media (min-width: 768px) {
      #s11 > .texto p {
        line-height: 1.4;
        font-size: 1em; } }
    @media (min-width: 1200px) {
      #s11 > .texto p {
        font-size: 1.2rem; } }

#s11 > .grafico {
  position: relative;
  background-image: url("../img/s11.jpg");
  background-position: bottom center;
  background-size: 100% auto; }
  #s11 > .grafico:before {
    content: '';
    display: block;
    padding-bottom: 70%; }
    @media (min-width: 768px) {
      #s11 > .grafico:before {
        padding-bottom: 70.36%; } }
  @media (min-width: 768px) {
    #s11 > .grafico {
      position: absolute;
      width: 60%;
      top: 0;
      bottom: 0;
      right: 0;
      background-image: url("../img/s11-sm.jpg");
      background-size: auto 100%; } }
  @media (min-width: 992px) {
    #s11 > .grafico {
      background-position: top 40% center;
      background-size: 100% auto; } }
  #s11 > .grafico .wrap {
    width: 48%;
    position: absolute;
    top: 0.25rem;
    left: 50%;
    margin-left: -24%; }
    @media (min-width: 375px) {
      #s11 > .grafico .wrap {
        top: 1rem; } }
    @media (min-width: 768px) {
      #s11 > .grafico .wrap {
        top: 22%;
        width: 50%;
        left: 0rem;
        margin-left: 0; } }
    @media (min-width: 992px) {
      #s11 > .grafico .wrap {
        top: 25%;
        left: 1rem; } }
    #s11 > .grafico .wrap:before {
      content: '';
      display: block;
      padding-bottom: 100%; }
    #s11 > .grafico .wrap .circulo {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: transparent;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;
      font-size: 0.6rem;
      font-family: 'alda',sans-serif;
      font-weight: 200;
      color: #51545c;
      border: 0 none; }
      @media (min-width: 768px) {
        #s11 > .grafico .wrap .circulo {
          font-size: 1.4rem; } }
      #s11 > .grafico .wrap .circulo .texto {
        text-align: center; }
        @media (min-width: 768px) {
          #s11 > .grafico .wrap .circulo .texto {
            text-align: left;
            font-size: 1.2rem; } }
        @media (min-width: 1200px) {
          #s11 > .grafico .wrap .circulo .texto {
            font-size: 1.3rem; } }
        #s11 > .grafico .wrap .circulo .texto .mdrt {
          width: 3rem;
          height: 3rem;
          position: relative;
          margin: -1rem auto 0.3rem; }
          @media (min-width: 768px) {
            #s11 > .grafico .wrap .circulo .texto .mdrt {
              width: 3.5rem;
              height: 3.5rem;
              margin: -1rem 0 1rem 2rem; } }
          @media (min-width: 992px) {
            #s11 > .grafico .wrap .circulo .texto .mdrt {
              width: 5rem;
              height: 5rem; } }

#post-s11 {
  position: relative;
  color: #00b0b5; }
  #post-s11 table {
    width: 100%;
    table-layout: fixed; }
  #post-s11 .box-monitos {
    width: 40%;
    padding: 0.75rem;
    background: url("../img/monitos.png") no-repeat center;
    background-size: 80% auto; }
  #post-s11 .texto {
    width: 60%;
    padding: 1.5rem 1rem;
    border-left: 2px solid #00b0b5;
    font-size: 1rem;
    font-family: alda;
    font-weight: 200;
    line-height: 1.1; }
    @media (min-width: 768px) {
      #post-s11 .texto {
        padding: 1.5rem 2rem;
        font-size: 1.8rem; } }
    #post-s11 .texto .big {
      font-size: 1.8rem; }
      @media (min-width: 768px) {
        #post-s11 .texto .big {
          font-size: 4.2rem; } }
    #post-s11 .texto .median {
      font-size: 1.4rem; }
      @media (min-width: 768px) {
        #post-s11 .texto .median {
          font-size: 2.5rem; } }
  #post-s11 .sig-pag {
    background: #f89a53; }
    #post-s11 .sig-pag:hover {
      background: #009ec0; }

#s12 {
  background-image: url("../img/s12.jpg");
  background-size: auto 100%;
  background-position: top right; }
  #s12:before {
    content: '';
    display: block;
    padding-bottom: 95%; }
    @media (min-width: 768px) {
      #s12:before {
        padding-bottom: 36%; } }
  @media (min-width: 768px) {
    #s12 {
      background-size: 100% auto;
      background-position: top 25% right; } }
  #s12 .circulo {
    width: 8rem;
    height: 8rem;
    background: rgba(81, 84, 92, 0.4);
    font-size: 0.9rem;
    position: absolute;
    right: 1.5rem;
    top: 1rem; }
    @media (min-width: 768px) {
      #s12 .circulo {
        width: 12rem;
        height: 12rem;
        font-size: 1.2rem; } }
    @media (min-width: 992px) {
      #s12 .circulo {
        width: 14rem;
        height: 14rem;
        font-size: 1.4rem; } }
    @media (min-width: 768px) {
      #s12 .circulo {
        top: 1rem;
        right: 1.5rem; } }

@media (min-width: 768px) {
  #s13:before {
    content: '';
    display: block;
    padding-bottom: 100%; } }

@media (min-width: 992px) {
  #s13:before {
    content: '';
    display: block;
    padding-bottom: 75%; } }

@media (min-width: 1200px) {
  #s13:before {
    content: '';
    display: block;
    padding-bottom: 58%; } }

#s13 > .texto {
  background: #FFF2E5;
  padding: 2rem 1rem 1rem; }
  @media (min-width: 768px) {
    #s13 > .texto {
      position: absolute;
      width: 40%;
      top: 0;
      bottom: 0;
      padding: 2rem 2rem 1rem; } }
  #s13 > .texto .titulo {
    color: #f89a53;
    font-size: 2em;
    font-family: 'alda';
    font-weight: 200;
    line-height: 1.2; }
    @media (min-width: 768px) {
      #s13 > .texto .titulo {
        font-size: 2.2em; } }
    @media (min-width: 992px) {
      #s13 > .texto .titulo {
        font-size: 2.4em; } }
  #s13 > .texto p {
    margin: 1em 0;
    font-size: 0.9rem; }
    @media (min-width: 768px) {
      #s13 > .texto p {
        font-size: 0.95rem; } }
    #s13 > .texto p.primero {
      color: #0079c1;
      font-size: 1.2rem; }
      @media (min-width: 768px) {
        #s13 > .texto p.primero {
          font-size: 1.1rem; } }
      @media (min-width: 992px) {
        #s13 > .texto p.primero {
          font-size: 1.4rem; } }

#s13 > .panel {
  position: relative; }
  @media (min-width: 768px) {
    #s13 > .panel {
      position: absolute;
      width: 60%;
      top: 0;
      bottom: 0;
      right: 0; } }
  #s13 > .panel .tabs {
    font-size: 0;
    vertical-align: top; }
    #s13 > .panel .tabs > a {
      position: relative;
      display: inline-block;
      width: 33.33%;
      padding: 1rem 0.5rem 3.1rem;
      font-size: 1rem;
      vertical-align: bottom; }
      #s13 > .panel .tabs > a:hover, #s13 > .panel .tabs > a.selected {
        background: #e5e7e7; }
      #s13 > .panel .tabs > a:after {
        content: '';
        position: absolute;
        width: 1px;
        height: 100%;
        top: 0;
        right: 0;
        background: #51545c; }
      #s13 > .panel .tabs > a:last-child:after {
        content: none; }
      #s13 > .panel .tabs > a .ico {
        display: none; }
        @media (min-width: 768px) {
          #s13 > .panel .tabs > a .ico {
            display: block;
            position: absolute;
            bottom: 3.1rem;
            right: 0.5rem;
            width: 15%;
            height: 3rem; } }
      #s13 > .panel .tabs > a .txt {
        display: inline-block;
        line-height: 1;
        font-size: 1.2em;
        font-family: 'alda';
        font-weight: 200;
        vertical-align: sub;
        min-height: 2rem; }
        @media (min-width: 768px) {
          #s13 > .panel .tabs > a .txt {
            width: 80%; } }
      #s13 > .panel .tabs > a figure {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3.1rem;
        margin: 0;
        background: none no-repeat center bottom;
        background-size: cover; }
        #s13 > .panel .tabs > a figure:before {
          content: '';
          display: block;
          padding-bottom: 25%; }
      #s13 > .panel .tabs > a.vida-ahorro figure {
        background-image: url("../img/tab-vidaahorro.jpg"); }
      #s13 > .panel .tabs > a.gastos-medicos figure {
        background-image: url("../img/tab-gm.jpg"); }
      #s13 > .panel .tabs > a.grupo-colectivo figure {
        background-image: url("../img/tab-grupocolectivo.jpg"); }
  #s13 > .panel .tabs-content > .panel {
    display: none; }
    #s13 > .panel .tabs-content > .panel.selected {
      display: block; }
    #s13 > .panel .tabs-content > .panel.vida-ahorro a:nth-child(1) {
      color: #dfc13b; }
    #s13 > .panel .tabs-content > .panel.vida-ahorro a:nth-child(2) {
      color: #a5a000; }
    #s13 > .panel .tabs-content > .panel.vida-ahorro a:nth-child(3) {
      color: #007090; }
    #s13 > .panel .tabs-content > .panel.vida-ahorro a:nth-child(4) {
      color: #f89a53; }
    #s13 > .panel .tabs-content > .panel.vida-ahorro a:nth-child(5) {
      color: #009ec0; }
    #s13 > .panel .tabs-content > .panel.gastos-medicos a:nth-child(1) {
      color: #00b0b5; }
    #s13 > .panel .tabs-content > .panel.gastos-medicos a:nth-child(2) {
      color: #00b0b5; }
    #s13 > .panel .tabs-content > .panel.gastos-medicos a:nth-child(3) {
      color: #004a61; }
    #s13 > .panel .tabs-content > .panel.grupo-colectivo a:nth-child(1) {
      color: #ccd4e3; }
    #s13 > .panel .tabs-content > .panel.grupo-colectivo a:nth-child(2) {
      color: #009ec0; }
    #s13 > .panel .tabs-content > .panel.grupo-colectivo a:nth-child(3) {
      color: #00b0b5; }
  #s13 > .panel .subtabs {
    font-size: 0;
    vertical-align: top;
    width: 35%;
    float: left; }
    #s13 > .panel .subtabs > a {
      position: relative;
      display: block;
      padding: 1em 0.5em;
      font-size: 1rem;
      vertical-align: bottom; }
      @media (min-width: 768px) {
        #s13 > .panel .subtabs > a {
          font-size: 1.1rem; }
          #s13 > .panel .subtabs > a:before {
            content: '\0000B7';
            display: inline-block;
            color: #0079c1;
            line-height: 0;
            position: relative;
            top: 0.25rem;
            margin-right: 0.5rem; } }
      @media (min-width: 992px) {
        #s13 > .panel .subtabs > a {
          font-size: 1.3rem; } }
      #s13 > .panel .subtabs > a:hover, #s13 > .panel .subtabs > a.selected {
        color: #51545c !important; }
  #s13 > .panel .subtabs-content {
    width: 65%;
    float: left; }
    #s13 > .panel .subtabs-content > .subpanel {
      display: none;
      padding: 1rem;
      font-size: 0.8rem; }
      @media (min-width: 768px) {
        #s13 > .panel .subtabs-content > .subpanel {
          font-size: 0.95rem; } }
      #s13 > .panel .subtabs-content > .subpanel figure {
        position: relative;
        margin: 0 0 1rem;
        padding: 0;
        background: none no-repeat center top;
        background-size: 100% auto; }
        #s13 > .panel .subtabs-content > .subpanel figure:before {
          content: '';
          display: block;
          padding-bottom: 38.30%; }
      #s13 > .panel .subtabs-content > .subpanel.selected {
        display: block; }
      #s13 > .panel .subtabs-content > .subpanel.segubeca figure {
        background-image: url("../img/vidaahorro-1-segubeca.jpg"); }
      #s13 > .panel .subtabs-content > .subpanel.imaginaser figure {
        background-image: url("../img/vidaahorro-2-imaginaser.jpg"); }
      #s13 > .panel .subtabs-content > .subpanel.realiza figure {
        background-image: url("../img/vidaahorro-3-realiza.jpg"); }
      #s13 > .panel .subtabs-content > .subpanel.vidamujer figure {
        background-image: url("../img/vidaahorro-4-vidamujer.jpg"); }
      #s13 > .panel .subtabs-content > .subpanel.orvi figure {
        background-image: url("../img/vidaahorro-5-orvi.jpg"); }
      #s13 > .panel .subtabs-content > .subpanel.am figure {
        background-image: url("../img/gm-1-am.jpg"); }
      #s13 > .panel .subtabs-content > .subpanel.amf figure {
        background-image: url("../img/gm-2-amf.jpg"); }
      #s13 > .panel .subtabs-content > .subpanel.ami figure {
        background-image: url("../img/gm-3-ami.jpg"); }
      #s13 > .panel .subtabs-content > .subpanel.visualiza figure {
        background-image: url("../img/grupocolectivo-1-visualiza.jpg"); }
      #s13 > .panel .subtabs-content > .subpanel.svg figure {
        background-image: url("../img/grupocolectivo-2-segurovidagrupo.jpg"); }
      #s13 > .panel .subtabs-content > .subpanel.sgmmc figure {
        background-image: url("../img/grupocolectivo-3-sgmmc.jpg"); }

#s13 .sig-pag {
  background: #9894c9; }
  #s13 .sig-pag:hover {
    background: #009ec0; }

#s14 {
  background-image: url("../img/s14.jpg");
  background-position: top 12% right; }
  #s14:before {
    content: '';
    display: block;
    padding-bottom: 95%; }
    @media (min-width: 768px) {
      #s14:before {
        padding-bottom: 36%; } }
  #s14 .circulo {
    width: 10rem;
    height: 10rem;
    background: rgba(81, 84, 92, 0.4);
    font-size: 1.2rem;
    position: absolute;
    right: 1.5rem;
    bottom: 1rem; }
    @media (min-width: 768px) {
      #s14 .circulo {
        width: 12rem;
        height: 12rem;
        font-size: 1.3rem; } }
    @media (min-width: 992px) {
      #s14 .circulo {
        width: 14rem;
        height: 14rem;
        font-size: 1.5rem; } }
    @media (min-width: 768px) {
      #s14 .circulo {
        bottom: 1rem;
        right: 3rem; } }

#pre-s15,
.estilo-titulo-s15,
#post-s15 {
  padding: 1.5rem 1rem;
  color: #9894c9;
  background: #ececf6;
  font-size: 1.8em;
  font-family: 'alda',sans-serif;
  font-weight: 200; }
  @media (min-width: 768px) {
    #pre-s15,
    .estilo-titulo-s15,
    #post-s15 {
      font-size: 2.4em; } }
  #pre-s15 .subtitulo,
  .estilo-titulo-s15 .subtitulo,
  #post-s15 .subtitulo {
    font-family: 'nylice',sans-serif;
    font-size: 0.6em;
    color: #0079c1; }

#s15,
#s15a {
  background-image: url("../img/s15.jpg");
  background-size: 100% auto;
  background-position: top left; }
  #s15:before,
  #s15a:before {
    content: '';
    display: block;
    padding-bottom: 70%; }
  #s15 .mitad,
  #s15a .mitad {
    position: absolute;
    width: calc(100% - 2px);
    height: 50%;
    top: 0;
    left: 0;
    pointer-events: none; }
    #s15 .mitad.final,
    #s15a .mitad.final {
      top: 50%; }
  #s15 .tele,
  #s15a .tele {
    position: absolute;
    top: 25%;
    left: 50%;
    width: 50%;
    margin-left: -25%;
    background: url("../img/tele.png");
    background-size: 100% auto; }
    #s15 .tele:before,
    #s15a .tele:before {
      content: '';
      display: block;
      padding-bottom: 61.21%; }
    #s15 .tele .wrap,
    #s15a .tele .wrap {
      margin: auto;
      position: absolute;
      top: 4%;
      left: 3%;
      width: 90.5%;
      /*&:after {
        content:'';
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -2.5rem;
        margin-top: -1.5rem;
        width: 5rem;
        height: 3rem;
        z-index: 99;
        background:url('../img/play.svg') no-repeat center rgba($blanco,0.7);
        background-size: auto 50%;
      }*/ }
      #s15 .tele .wrap:before,
      #s15a .tele .wrap:before {
        content: '';
        display: block;
        padding-bottom: 56.25%; }
      #s15 .tele .wrap video,
      #s15a .tele .wrap video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: none no-repeat center;
        background-size: 100% auto; }
        #s15 .tele .wrap video.v1,
        #s15a .tele .wrap video.v1 {
          background-image: url("../img/video1.jpg"); }
        #s15 .tele .wrap video.v2,
        #s15a .tele .wrap video.v2 {
          background-image: url("../img/video2.jpg"); }
  #s15 .sig-pag,
  #s15a .sig-pag {
    background: transparent; }
    #s15 .sig-pag:hover,
    #s15a .sig-pag:hover {
      background: #009ec0; }
  #s15 .sig-pag,
  #s15a .sig-pag {
    bottom: 0; }

#s16 {
  background-image: url("../img/s16.jpg");
  background-size: 100% auto;
  background-position: top left; }
  #s16:before {
    content: '';
    display: block;
    padding-bottom: 54.16%; }
  #s16 #tag-nl,
  #s16 #tag-jal,
  #s16 #tag-cdmx {
    position: absolute;
    font-size: 0.8rem;
    line-height: 0.8; }
    @media (min-width: 768px) {
      #s16 #tag-nl,
      #s16 #tag-jal,
      #s16 #tag-cdmx {
        font-size: 1.2rem; } }
    @media (min-width: 992px) {
      #s16 #tag-nl,
      #s16 #tag-jal,
      #s16 #tag-cdmx {
        font-size: 1.8rem; } }
  #s16 #line-nl,
  #s16 #line-jal,
  #s16 #line-cdmx {
    margin: 0;
    padding: 0;
    position: absolute;
    background: none no-repeat center;
    background-size: auto 100%; }
  #s16 #tag-nl {
    left: 5%;
    top: 32%; }
    #s16 #tag-nl .monto {
      color: #dfc13b; }
  #s16 #line-nl {
    left: 28%;
    top: 40%;
    height: 5px;
    width: 40%;
    padding: 0;
    margin: 0;
    background-image: url("../img/linea-nl.png");
    background-size: auto 100%;
    background-position: left center; }
    @media (min-width: 768px) {
      #s16 #line-nl {
        left: 20%;
        height: 10px;
        width: 50%; } }
  #s16 #tag-jal {
    left: 9.6%;
    top: 54.32%; }
    #s16 #tag-jal .monto {
      color: #00b0b5; }
  #s16 #line-jal {
    left: 35%;
    top: 60%;
    height: 5px;
    width: 20%;
    padding: 0;
    margin: 0;
    background-image: url("../img/linea-jal.png");
    background-size: auto 100%;
    background-position: left center; }
    @media (min-width: 768px) {
      #s16 #line-jal {
        left: 29%;
        height: 10px;
        width: 30%; } }
    @media (min-width: 992px) {
      #s16 #line-jal {
        left: 25%;
        width: 32%; } }
  #s16 #tag-cdmx {
    left: 76%;
    top: 20%; }
    #s16 #tag-cdmx .monto {
      color: #f89a53; }
    @media (min-width: 768px) {
      #s16 #tag-cdmx {
        left: 79%;
        top: 24%; } }
  #s16 #line-cdmx {
    left: 65%;
    top: 32%;
    height: 30%;
    width: 26%;
    background-image: url("../img/linea-cdmx.png"); }
    @media (min-width: 768px) {
      #s16 #line-cdmx {
        top: 35%;
        height: 25%; } }

#s17,
#s18 {
  background-image: url("../img/s17.jpg");
  background-size: auto 100%;
  background-position: top center; }
  #s17:before,
  #s18:before {
    content: '';
    display: block;
    padding-bottom: 180%; }
    @media (min-width: 375px) {
      #s17:before,
      #s18:before {
        padding-bottom: 140%; } }
    @media (min-width: 768px) {
      #s17:before,
      #s18:before {
        padding-bottom: 120%; } }
    @media (min-width: 992px) {
      #s17:before,
      #s18:before {
        padding-bottom: 80%; } }
    @media (min-width: 1200px) {
      #s17:before,
      #s18:before {
        padding-bottom: 58.68%; } }
  @media (min-width: 1200px) {
    #s17,
    #s18 {
      background-size: 100% auto; } }
  #s17 .leyendas,
  #s18 .leyendas {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 0.5rem 1rem; }
  #s17 .titulo,
  #s18 .titulo {
    font-size: 1.7rem;
    color: #9894c9;
    font-family: 'alda',sans-serif;
    font-weight: 200; }
    @media (min-width: 768px) {
      #s17 .titulo,
      #s18 .titulo {
        font-size: 2.4rem; } }
  #s17 .subtitulo,
  #s18 .subtitulo {
    color: #0079c1; }
  #s17 .subtitulo,
  #s17 .subtitulo + div,
  #s18 .subtitulo,
  #s18 .subtitulo + div {
    font-family: nylice,sans-serif;
    font-size: 1rem; }
    @media (min-width: 768px) {
      #s17 .subtitulo,
      #s17 .subtitulo + div,
      #s18 .subtitulo,
      #s18 .subtitulo + div {
        font-size: 1.2rem; } }
  #s17 .footnote,
  #s18 .footnote {
    font-family: nylice,sans-serif;
    position: static;
    margin-top: 1rem; }
  #s17 .globos,
  #s18 .globos {
    position: absolute;
    bottom: 0;
    width: 100%; }
    @media (min-width: 768px) {
      #s17 .globos,
      #s18 .globos {
        height: 25rem;
        text-align: center;
        margin-bottom: 0;
        opacity: 1;
        -webkit-transition: margin-bottom 1s, opacity 1s;
        -moz-transition: margin-bottom 1s, opacity 1s;
        -o-transition: margin-bottom 1s, opacity 1s;
        transition: margin-bottom 1s, opacity 1s; }
        #s17 .globos.locked,
        #s18 .globos.locked {
          margin-bottom: -7rem;
          opacity: 0.5; } }
    @media (min-width: 992px) {
      #s17 .globos,
      #s18 .globos {
        height: 20rem; } }
    @media (min-width: 992px) {
      #s17 .globos,
      #s18 .globos {
        height: 18rem; } }
    #s17 .globos .globo,
    #s18 .globos .globo {
      position: absolute;
      display: table;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      width: 8rem;
      height: 8rem;
      left: 50%;
      background: rgba(81, 84, 92, 0.4);
      font-size: 0.6rem; }
      #s17 .globos .globo:nth-child(1), #s17 .globos .globo:nth-child(2),
      #s18 .globos .globo:nth-child(1),
      #s18 .globos .globo:nth-child(2) {
        bottom: 12rem; }
      #s17 .globos .globo:nth-child(3), #s17 .globos .globo:nth-child(4),
      #s18 .globos .globo:nth-child(3),
      #s18 .globos .globo:nth-child(4) {
        bottom: 2rem; }
      #s17 .globos .globo:nth-child(2n+1),
      #s18 .globos .globo:nth-child(2n+1) {
        margin-left: -10rem; }
      #s17 .globos .globo:nth-child(2n),
      #s18 .globos .globo:nth-child(2n) {
        margin-left: 2rem; }
      #s17 .globos .globo:nth-child(1),
      #s18 .globos .globo:nth-child(1) {
        background: #FFF2E5; }
        #s17 .globos .globo:nth-child(1) .monto,
        #s18 .globos .globo:nth-child(1) .monto {
          color: #f89a53; }
      #s17 .globos .globo:nth-child(2),
      #s18 .globos .globo:nth-child(2) {
        background: #E6F4F4; }
        #s17 .globos .globo:nth-child(2) .monto,
        #s18 .globos .globo:nth-child(2) .monto {
          color: #00b0b5; }
      #s17 .globos .globo:nth-child(3),
      #s18 .globos .globo:nth-child(3) {
        background: #FBF6E5; }
        #s17 .globos .globo:nth-child(3) .monto,
        #s18 .globos .globo:nth-child(3) .monto {
          color: #dfc13b; }
      #s17 .globos .globo:nth-child(4),
      #s18 .globos .globo:nth-child(4) {
        background: #FCEFED; }
        #s17 .globos .globo:nth-child(4) .monto,
        #s18 .globos .globo:nth-child(4) .monto {
          color: #EBAEAA; }
      @media (min-width: 768px) {
        #s17 .globos .globo,
        #s18 .globos .globo {
          width: 12rem;
          height: 12rem;
          font-size: 1rem;
          position: static;
          display: inline-block;
          margin: 0 1rem !important; } }
      @media (min-width: 992px) {
        #s17 .globos .globo,
        #s18 .globos .globo {
          width: 10.5rem;
          height: 10.5rem;
          font-size: 0.85rem;
          margin: 0 0.5rem !important; } }
      #s17 .globos .globo > .texto,
      #s18 .globos .globo > .texto {
        display: table-cell;
        width: 100%;
        height: 100%;
        padding: 1rem;
        vertical-align: middle;
        text-align: center; }
        @media (min-width: 768px) {
          #s17 .globos .globo > .texto,
          #s18 .globos .globo > .texto {
            padding: 2.5rem 1.2rem 1.2rem; } }
        #s17 .globos .globo > .texto .monto,
        #s18 .globos .globo > .texto .monto {
          font-size: 1.1em; }

#s18 {
  background-image: url("../img/s18.jpg"); }
  #s18:before {
    content: '';
    display: block;
    padding-bottom: 180%; }
    @media (min-width: 375px) {
      #s18:before {
        padding-bottom: 140%; } }
    @media (min-width: 768px) {
      #s18:before {
        padding-bottom: 120%; } }
    @media (min-width: 992px) {
      #s18:before {
        padding-bottom: 80%; } }
    @media (min-width: 1200px) {
      #s18:before {
        padding-bottom: 58.68%; } }
  @media (min-width: 768px) {
    #s18 .globos {
      height: 32rem; } }
  @media (min-width: 992px) {
    #s18 .globos {
      height: 24rem; } }
  #s18 .globos .globo {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    height: 8rem; }
    @media (min-width: 768px) {
      #s18 .globos .globo {
        height: 14rem; } }
    #s18 .globos .globo .texto {
      padding: 1rem;
      text-align: left; }

#s19 {
  background-image: url("../img/s19.jpg");
  background-size: auto 100%;
  background-position: bottom right; }
  #s19:before {
    content: '';
    display: block;
    padding-bottom: 112%; }
    @media (min-width: 768px) {
      #s19:before {
        padding-bottom: 85%; } }
    @media (min-width: 992px) {
      #s19:before {
        padding-bottom: 54%; } }
  @media (min-width: 992px) {
    #s19 {
      background-size: 100% auto; } }
  #s19 .circulo {
    width: 10rem;
    height: 10rem;
    background: rgba(81, 84, 92, 0.4);
    font-size: 1.2rem;
    position: absolute;
    right: 1.5rem;
    top: 1rem; }
    @media (min-width: 768px) {
      #s19 .circulo {
        width: 10rem;
        height: 10rem;
        font-size: 1.2rem; } }
    @media (min-width: 992px) {
      #s19 .circulo {
        width: 10rem;
        height: 10rem;
        font-size: 1.3rem; } }
    @media (min-width: 1200px) {
      #s19 .circulo {
        width: 12rem;
        height: 12rem;
        font-size: 1.4rem; } }
    @media (min-width: 768px) {
      #s19 .circulo {
        top: 3rem;
        right: 5rem; } }
    @media (min-width: 992px) {
      #s19 .circulo {
        top: 1.5rem; } }
  #s19 .contacto {
    position: absolute;
    width: 10em;
    bottom: 1rem;
    right: 3rem;
    font-size: 1rem; }
    @media (min-width: 768px) {
      #s19 .contacto {
        font-size: 1.2rem;
        bottom: 3rem;
        right: 5rem; } }
    @media (min-width: 992px) {
      #s19 .contacto {
        bottom: 1.5rem; } }
    #s19 .contacto a {
      display: block;
      position: relative;
      height: 1.6em;
      line-height: 1.6em;
      padding-left: 2em;
      color: #ffffff; }
      #s19 .contacto a .svgbox {
        position: absolute;
        left: 0;
        top: 0.25em;
        height: 1.2em;
        width: 1.2em; }

#pre-s19a {
  padding: 1.5rem 1rem;
  color: #9894c9;
  background: #ececf6;
  font-size: 1.8em;
  font-family: 'alda',sans-serif;
  font-weight: 200; }
  @media (min-width: 768px) {
    #pre-s19a {
      font-size: 2.4em; } }
  #pre-s19a .subtitulo {
    font-family: 'nylice',sans-serif;
    font-size: 0.6em;
    color: #0079c1; }

#s19a {
  background-image: url("../img/s19a.jpg");
  background-size: 100% auto; }
  #s19a:before {
    content: '';
    display: block;
    padding-bottom: 60.88%; }
  #s19a .wrap {
    margin: auto;
    position: absolute;
    top: 22%;
    left: 22.41%;
    width: 56.66%; }
    #s19a .wrap:before {
      content: '';
      display: block;
      padding-bottom: 56.25%; }
    #s19a .wrap video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url("../img/video3.jpg") no-repeat center;
      background-size: 100% auto; }

#s20 {
  background-image: none; }
  #s20:before {
    content: '';
    display: block;
    padding-bottom: 54%; }
    @media (min-width: 768px) {
      #s20:before {
        padding-bottom: 54%; } }
  #s20 .logo {
    position: absolute;
    width: 12rem;
    top: 40%;
    left: 50%;
    margin-left: -6rem; }
    @media (min-width: 768px) {
      #s20 .logo {
        width: 24rem;
        margin-left: -12rem; } }
    #s20 .logo:before {
      content: '';
      display: block;
      padding-bottom: 29.5%; }

.parallax {
  -webkit-transition: background-position 0.25s;
  -moz-transition: background-position 0.25s;
  -ms-transition: background-position 0.25s;
  -o-transition: background-position 0.25s;
  transition: background-position 0.25s; }

.y-offset-top {
  opacity: 1;
  margin-top: 0;
  -webkit-transition: margin-top 1s, opacity 0.5s;
  -moz-transition: margin-top 1s, opacity 0.5s;
  -o-transition: margin-top 1s, opacity 0.5s;
  transition: margin-top 1s, opacity 0.5s; }
  .y-offset-top.locked {
    opacity: 0.5;
    margin-top: 4rem; }

.y-offset-bottom {
  opacity: 1;
  margin-bottom: 0;
  -webkit-transition: margin-bottom 1s, opacity 0.5s;
  -moz-transition: margin-bottom 1s, opacity 0.5s;
  -o-transition: margin-bottom 1s, opacity 0.5s;
  transition: margin-bottom 1s, opacity 0.5s; }
  .y-offset-bottom.locked {
    opacity: 0.5;
    margin-bottom: 4rem; }

#ir-top {
  position: fixed;
  top: 2rem;
  right: 2rem;
  color: #004a61;
  padding-top: 35px;
  background: url("../img/flecha-arriba.png") no-repeat top center;
  font-size: 0.8rem; }

/*# sourceMappingURL=estilo.css.map */