@charset "UTF-8";
/*------------------------------------*\
  Estilos theme: Decameron Webcheckin
  2019
  Autor: Aguayo
\*------------------------------------*/
/**
 * La ruta relativa a la carpeta img desde los css | use background-image
 * @nuclide Root
 * @section Variables Background-image > Config
 */
/**
 * La ruta relativa a la carpeta de fuentes
 * @nuclide Root
 * @section Variables Typo > Config
 */
/**
 * color: $c-primary
 * @color
 * @section Primary
 */
/**
 * color: rgba($c-primary, .5);
 * @color
 * @section Primary
 */
/**
 * color: rgba($c-primary, .5);
 * @color
 * @section Primary
 */
/**
 * $c-primary-over
 * @color
 * @section Primary
 */
/**
 * $c-primary-mild
 * @color
 * @section Primary
 */
/**
 * $c-primary-light
 * @color
 * @section Primary
 */
/**
 * $c-secondary
 * @color
 * @section Secondary
 */
/**
 * $c-secondary-light
 * @color
 * @section Secondary
 */
/**
 * $c-tertiary
 * @color
 * @section Tertiary
 */
/**
 * $c-error
 * @color
 * @section Surface
 */
/**
 * $c-error-light
 * @color
 * @section Surface
 */
/**
 * $c-warning
 * @color
 * @section Surface
 */
/**
 * $c-on
 * @color
 * @section On
 */
/**
 * $c-on-mild
 * @color
 * @section On
 */
/**
 * $c-on-light | $c-border
 * @color
 * @section On
 */
/**
 * $c-
 * @color
 * @section On
 */
/**
 * $c-light-grey
 * @color
 * @section On
 */
/**
 * $c-bg-light
 * @color
 * @section On
 */
/**
 * $c-
 * @color
 * @section On
 */
/**
 * $c-neutro
 * @color
 * @section Neutro
 */
/**
 * Font family: 'Akrobat ExtraBold'
 * @nuclide Font-family
 * @section Variables Typo > Font-family
 */
/**
 * Font family: Akrobat Bold
 * @nuclide Font-family
 * @section Variables Typo > Font-family
 */
/**
 * Font family: Akrobat SemiBold
 * @nuclide Font-family
 * @section Variables Typo > Font-family
 */
/**
 * Font family: Akrobat Black
 * @nuclide Font-family
 * @section Variables Typo > Font-family
 */
/**
 * Font family: Akrobat Regular
 * @nuclide Font-family
 * @section Variables Typo > Font-family
 */
/**
 * Font family: Akrobat Thin
 * @nuclide Font-family
 * @section Variables Typo > Font-family
 */
/**
 * Font family: Akrobat Light
 * @nuclide Font-family
 * @section Variables Typo > Font-family
 */
/**
 * Font family: Akrobat ExtraLight
 * @nuclide Font-family
 * @section Variables Typo > Font-family
 */
/**
 * La ruta relativa a la carpeta de fuentes
 * @nuclide icomoon font-family
 * @section Variables Typo > Config
 */
body,
h1, h2, h3, h4, h5, h6,
dl, dd, ol, ul {
  margin: 0;
  padding: 0; }

html {
  font-size: 16px;
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

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

article,
aside,
footer,
header,
nav,
section {
  display: block; }

h1 {
  font-size: 2em; }

figcaption,
figure,
main {
  display: block; }

figure {
  margin: 0; }

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
  overflow: visible; }

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects; }
  a:active, a:hover {
    outline-width: 0; }

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; }

abbr[title],
dfn[title] {
  cursor: help; }

b,
strong {
  font-weight: inherit;
  font-weight: bolder; }

code,
pre,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

dfn {
  font-style: italic; }

mark {
  background-color: #ff0;
  color: #000; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

blockquote {
  margin: 0; }

audio,
video {
  display: inline-block;
  vertical-align: baseline; }

audio:not([controls]) {
  display: none;
  height: 0; }

img {
  border-style: none; }

svg:not(:root) {
  overflow: hidden; }

input {
  line-height: normal; }

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0; }

button,
input {
  overflow: visible; }

button,
select {
  text-transform: none; }

button {
  background-color: transparent; }

optgroup {
  font-weight: bold; }

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer; }

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

fieldset {
  margin: 0 2px;
  padding: 0.35em 0.75em 0.625em; }

legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
  border: 0; }

progress {
  display: inline-block;
  vertical-align: baseline; }

textarea {
  overflow: auto; }

[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0; }

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px; }

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

td, th {
  padding: 0; }

details,
menu {
  display: block; }

summary {
  display: list-item; }

canvas {
  display: inline-block; }

template {
  display: none; }

[hidden] {
  display: none; }

/*------------------------------------*\
    #font-family Akrobat
\*------------------------------------*/
@font-face {
  font-family: 'akrobat-regular';
  src: local("Akrobat Regular"), local("akrobat-regular"), url("../fonts/akrobat-regular.woff2") format("woff2"), url("../fonts/akrobat-regular.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'akrobat-thin';
  src: local("Akrobat Thin"), local("akrobat-thin"), url("../fonts/akrobat-thin.woff2") format("woff2"), url("../fonts/akrobat-thin.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'akrobat-extrabold';
  src: local("Akrobat ExtraBold"), local("akrobat-extrabold"), url("../fonts/akrobat-extrabold.woff2") format("woff2"), url("../fonts/akrobat-extrabold.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'akrobat-extralight';
  src: local("Akrobat ExtraLight"), local("akrobat-extralight"), url("../fonts/akrobat-extralight.woff2") format("woff2"), url("../fonts/akrobat-extralight.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'akrobat-light';
  src: local("Akrobat Light"), local("akrobat-light"), url("../fonts/akrobat-light.woff2") format("woff2"), url("../fonts/akrobat-light.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'akrobat-bold';
  src: local("Akrobat Bold"), local("akrobat-bold"), url("../fonts/akrobat-bold.woff2") format("woff2"), url("../fonts/akrobat-bold.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'akrobat-black';
  src: local("Akrobat Black"), local("akrobat-black"), url("../fonts/akrobat-black.woff2") format("woff2"), url("../fonts/akrobat-black.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'akrobat-semibold';
  src: local("Akrobat SemiBold"), local("akrobat-semibold"), url("../fonts/akrobat-semibold.woff2") format("woff2"), url("../fonts/akrobat-semibold.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

/*------------------------------------*\
    #font-family Ico: Porvenir
\*------------------------------------*/
@font-face {
  font-family: "decameron-ico";
  src: url("../fonts/decameron-ico.eot?owmbll");
  src: url("../fonts/decameron-ico.eot?owmbll#iefix") format("embedded-opentype"), url("../fonts/decameron-ico.ttf?owmbll") format("truetype"), url("../fonts/decameron-ico.woff?owmbll") format("woff"), url("../fonts/decameron-ico.svg?owmbll#decameron-ico") format("svg");
  font-weight: normal;
  font-style: normal; }

.i-:before,
[class^="i-"]:before,
[class*=" i-"]:before {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "decameron-ico" !important;
  font-style: normal;
  font-weight: normal;
  font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.i-a-:after,
[class^="i-a-"]:after,
[class*="i-a-"]:after {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "decameron-ico" !important;
  font-style: normal;
  font-weight: normal;
  font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/**
 * @icon .i-file-up | .i-a-file-up
 * @markup
 *  <span class="i-file-up"></span>
 */
.i-file-up:before {
  content: ""; }

.i-a-file-up:after {
  content: ""; }

/**
 * @icon .i-file
 * @markup
 *  <span class="i-file"></span>
 */
.i-file:before {
  content: ""; }

.i-a-file:after {
  content: ""; }

/**
 * @icon .i-error
 * @markup
 *  <span class="i-error"></span>
 */
.i-error:before {
  content: ""; }

/**
 * @icon .i-location
 * @markup
 *  <span class="i-location"></span>
 */
.i-location:before {
  content: ""; }

/**
 * @icon .i-avatar
 * @markup
 *  <span class="i-avatar"></span>
 */
.i-avatar:before {
  content: ""; }

/**
 * @icon .i-search
 * @markup
 *  <span class="i-search"></span>
 */
.i-search:before {
  content: ""; }

/**
 * @icon .i-data
 * @markup
 *  <span class="i-data"></span>
 */
.i-data:before {
  content: ""; }

/**
 * @icon .i-edit
 * @markup
 *  <span class="i-edit"></span>
 */
.i-edit:before {
  content: ""; }

/**
 * @icon .i-plus
 * @markup
 *  <span class="i-plus"></span>
 */
.i-plus:before {
  content: ""; }

/**
 * @icon .i-plus-square | .i-a-plus-square
 * @markup
 *  <span class="i-plus-square"></span>
 */
.i-plus-square:before {
  content: ""; }

.i-a-plus-square:after {
  content: ""; }

/**
 * @icon .i-x
 * @markup
 *  <span class="i-x"></span>
 */
.i-x:before {
  content: ""; }

/**
 * @icon .i-check
 * @markup
 *  <span class="i-check"></span>
 */
.i-check:before {
  content: ""; }

/**
 * @icon .i-triangle
 * @markup
 *  <span class="i-triangle"></span>
 */
.i-triangle:before {
  content: ""; }

/**
 * @icon .i-arrow-up
 * @markup
 *  <span class="i-arrow-up"></span>
 */
.i-arrow-up:before {
  content: ""; }

/**
 * @icon .i-arrow-right | .i-a-arrow-right
 * @markup
 *  <span class="i-arrow-right"></span>
 */
.i-arrow-right:before {
  content: ""; }

.i-a-arrow-right:after {
  content: ""; }

/**
 * @icon .i-arrow-left | .i-a-arrow-left
 * @markup
 *  <span class="i-arrow-left"></span>
 */
.i-arrow-left:before {
  content: ""; }

.i-a-arrow-left:after {
  content: ""; }

/**
 * @icon .i-arrow-down
 * @markup
 *  <span class="i-arrow-down"></span>
 */
.i-arrow-down:before {
  content: ""; }

/**
 * @icon .i-arrow-up-down
 * @markup
 *  <span class="i-arrow-up-down"></span>
 */
.i-arrow-up-down:before {
  content: ""; }

/**
 * @icon .i-calendar
 * @markup
 *  <span class="i-calendar"></span>
 */
.i-calendar:before {
  content: ""; }

/**
 * @icon .i-id-card
 * @markup
 *  <span class="i-id-card"></span>
 */
.i-id-card:before {
  content: ""; }

/**
 * @icon .i-notes
 * @markup
 *  <span class="i-notes"></span>
 */
.i-notes:before {
  content: ""; }

/**
 * @icon .i-pdf
 * @markup
 *  <span class="i-pdf"></span>
 */
.i-pdf:before {
  content: ""; }

/*------------------------------------*\
  Transversal Elements
  #Styles for links
\*------------------------------------*/
a {
  text-decoration: none;
  outline-width: 0; }
  a:focus {
    outline-width: 0; }

/**
  * Class: .ay-link
  * @atom Link underline
  * @section Enlaces
  * @markup
  *   <a class="ay-link" href="#"> Link </a>
  */
.ay-link {
  position: relative;
  display: inline-block;
  cursor: pointer;
  text-align: center;
  color: #469EC3;
  font-family: "akrobat-bold", Arial, sans-serif;
  text-decoration: none;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
  padding-bottom: 4px; }
  .ay-link:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 1px;
    background-color: #469EC3; }
  .ay-link:hover, .ay-link:focus, .ay-link:active {
    color: #469EC3; }

/*------------------------------------*\
  Transversal Elements
  #Styles for botones
\*------------------------------------*/
button {
  line-height: inherit;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: none;
  outline: none;
  outline-width: 0;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  button:focus {
    outline-width: 0; }
  button:disabled {
    cursor: default; }

.ay-btn {
  padding: 8px;
  vertical-align: middle;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-size: 16px;
  font-size: 1rem;
  font-family: "akrobat-regular", Arial, sans-serif;
  -webkit-border-radius: 6px;
          border-radius: 6px;
  border: 2px solid transparent;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s; }
  .ay-btn:hover {
    border-color: #57c8f8;
    background-color: #57c8f8; }
  .ay-btn:focus, .ay-btn:active {
    border-color: #57c8f8;
    background-color: #469EC3; }
  .ay-btn:after {
    padding-left: 7%; }

.ay-btn_small {
  min-width: 108px; }

.ay-btn_default {
  width: 100%;
  max-width: 310px; }

.ay-btn-x {
  display: block;
  text-align: center;
  margin: 0 0 0 auto;
  width: 50px;
  padding: 10px; }
  .ay-btn-x:before {
    font-size: 18px;
    font-size: 1.125rem;
    color: #959595;
    line-height: 1.5; }

/**
  * @atom Botón ícono
  * @description
  * Class: .ay-btn + .ay-btn-ico + .ay-btn_default + clases de iconos [i-]
  * @description  Modificador de .ay-btn
  * @section Botones
  * @modifiers
  *  .ay-btn_default Mínimo ancho 372px
  *  Ejemplo-ícono: i-arrow-right
  * @markup
  *  <div class="sg-block">
  *     <button class="ay-btn ay-btn_default ay-btn_ico ay-btn_primary i-a-arrow-right"type="button"><span class="ay-btn__text">Completar siguiente huésped</span></button>
  *  </div>
  *  <div class="sg-block">
  *     <button class="ay-btn ay-btn_default ay-btn_ico ay-btn_primary i-a-plus-square"type="button"><span class="ay-btn__text">Agregar siguiente huésped</span></button>
  *  </div>
  *  <div class="sg-block">
  *     <button class="ay-btn ay-btn_default ay-btn_ico ay-btn_primary i-a-file" type="button"><span class="ay-btn__text">Agregar siguiente huésped</span></button>
  *  </div>
  *  <div class="sg-block">
  *     <button class="ay-btn ay-btn_default ay-btn_ico ay-btn_primary i-a-file-up" type="button"><span class="ay-btn__text">Agregar siguiente huésped</span></button>
  *  </div>
  */
.ay-btn_ico {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  padding: 8px 20px; }
  .ay-btn_ico::after, .ay-btn_ico::before {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: top;
    font-size: 18px;
    font-size: 1.125rem;
    vertical-align: middle; }
  .ay-btn_ico::after {
    padding-left: 0; }
  .ay-btn_ico:hover {
    color: #fff;
    border-color: #08dca5;
    background-color: #08dca5; }
  .ay-btn_ico:focus, .ay-btn_ico:active {
    color: #fff;
    border-color: #059F77;
    background-color: #059F77; }

.ay-btn__text {
  width: 100%;
  text-align: center; }

/**
  * Class: .ay-btn + .ay-btn_default + .ay-btn_outline
  * @atom Botón outline + modificador
  * @description  Modificador de .ay-btn
  * @section Botones
  * @modifiers
  *  .ay-btn_default  Mínimo ancho 372px
  * @markup
  *  <div class="sg-block">
  *     <button class="ay-btn ay-btn_default ay-btn_outline"type="button">Cerrar</button>
  *  </div>
  *  <div class="sg-block">
  *     <button class="ay-btn ay-btn_defaultay-btn_outline ay-btn_ico i-arrow-left"type="button">Devolverse a los Datos Personales</button>
  *  </div>
  */
.ay-btn_outline {
  color: #469EC3;
  border-color: #469EC3;
  background-color: #fff; }
  .ay-btn_outline:hover {
    color: #fff;
    border-color: #57c8f8;
    background-color: #57c8f8; }
  .ay-btn_outline:active, .ay-btn_outline:focus {
    color: #fff;
    border-color: #57c8f8;
    background-color: #469EC3; }

/**
  * Class: .ay-btn + .ay-btn_default + .ay-btn_outline-secondary
  * @atom Botón outline + modificador
  * @description  Modificador de .ay-btn
  * @section Botones
  * @modifiers
  *  .ay-btn_default  Mínimo ancho 372px
  * @markup
  *  <div class="sg-block">
  *     <button class="ay-btn ay-btn_default ay-btn_outline-secondary" type="button">Seleccionar</button>
  *  </div>
  */
.ay-btn_outline-secondary {
  color: #059F77;
  border-color: #059F77;
  background-color: #fff; }
  .ay-btn_outline-secondary:hover, .ay-btn_outline-secondary:active, .ay-btn_outline-secondary:focus {
    color: #fff;
    border-color: #08dca5;
    background-color: #059F77; }

.ay-btn_select::after {
  content: "";
  font-family: "decameron-ico" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 12px;
  font-size: 0.75rem;
  text-align: center; }

/**
  * Class: .ay-btn + .ay-btn_primary
  * @atom Botón color Primario - modificador
  * @description  Modificador de .ay-btn
  * @section Botones
  * @markup
  *  <button class="ay-btn ay-btn_primary" type="button"> Botón </button>
  */
.ay-btn_primary {
  color: #fff;
  border-color: #469EC3;
  background-color: #469EC3; }
  .ay-btn_primary:hover {
    color: #fff;
    border-color: #57c8f8;
    background-color: #57c8f8; }
  .ay-btn_primary:active, .ay-btn_primary:focus {
    color: #fff;
    border-color: #57c8f8;
    background-color: #469EC3; }

/**
  * Class: .ay-btn + .ay-btn_small + .ay-btn_warning
  * @atom Botón color Rojo - modificador
  * @description  Modificador de .ay-btn
  * @section Botones
  * @modifiers
  *  .ay-btn_small  Mínimo ancho 108px
  * @markup
  *  <button class="ay-btn ay-btn_small ay-btn_warning" type="button"> Botón </button>
  */
.ay-btn_warning {
  color: #fff;
  border-color: #DD3247;
  background-color: #DD3247; }
  .ay-btn_warning:hover {
    color: #fff;
    border-color: #FBB14B;
    background-color: #FBB14B; }
  .ay-btn_warning:active, .ay-btn_warning:focus {
    color: #fff;
    border-color: #FBB14B;
    background-color: #DD3247; }

/**
  * Class: .ay-btn, .ay-btn-ico | atributo disabled
  * @atom Botón deshabilitado
  * @section Botones
  * @modifiers
  *  disabled: usar el atributo disabled para deshabilitar el botón
  *  .ay-btn_primary para uso en flujos secundarios.
  *  .ay-btn_outline
  * @markup
  *  <div class="sg-block">
  *   <button class="ay-btn" type="button" disabled> Botón disabled  </button>
  *  </div>
  *  <div class="sg-block">
  *   <button class="ay-btn ay-btn_outline" type="button" disabled> Botón disabled </button>
  *  </div>
  */
.ay-btn:disabled,
.ay-btn-ico:disabled {
  color: #adadad;
  border-color: #adadad;
  background-color: #ececec; }

.ay-btn_outline:disabled,
.ay-btn-ico_outline:disabled {
  color: #adadad;
  border-color: #adadad;
  background-color: #fff; }

/**
  * Class: .ay-btn__file | ay-btn ay-btn_ico ay-btn_primary i-a-file-up
  * @atom Botón de upload
  * @section Botones
  * @markup
  *   <label for="uploadExcel" class="ay-btn ay-btn__file ay-btn_ico ay-btn_primary i-a-file-up">
  *     <span class="ay-btn__text">Cargar el formato con los datos completos</span>
  *     <input class="ay-btn__input-file" id="uploadExcel" type="file">
  *   </label>
  */
.ay-btn__file {
  position: relative;
  max-width: 370px;
  margin: 0 auto; }

.ay-btn__input-file {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0; }

/*------------------------------------*\
  Transversal Elements
  #Styles for Form
  \*------------------------------------*/
input,
select,
textarea {
  outline: none;
  border: none; }

label {
  cursor: default; }

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

fieldset {
  border: none;
  padding: 0;
  margin: 0; }

/**
 * .ay-form__label, {Font-size: 16px, color: $c-on}
 * @atom Label
 * @section Formularios
 * @modifiers
 *  .ay-form__label_require Campo requerido: <sup class="ay-form__label_require">*</sup>
 * @markup
 *   <label class="ay-form__label"> Label de formulario: </label>
 *   <label class="ay-form__label">Label Requerido <sup class="ay-form__label_require">*</sup>:</label>
 */
.ay-form__label {
  display: block;
  padding-bottom: 6px;
  color: #575757;
  font-family: "akrobat-bold", Arial, sans-serif;
  font-size: 16px;
  font-size: 1.16rem; }

.ay-form__label_require {
  position: relative;
  left: 0;
  top: 4px;
  color: #DD3247;
  font-size: 16px;
  font-size: 1rem;
  vertical-align: super; }

/**
 * .ay-is-alert, {border-color: $c-alert}
 * @atom Label [Input] Alerta
 * @section Formularios
 * @modifiers
 *  Alerta <small class="ay-text_error">Mensaje de error</small>
 * @markup
 *   <div class="ay-form__item">
 *    <label class="ay-form__label">Label Requerido<sup class="ay-form__label_require">*</sup>:</label>
 *    <input class="ay-form__control  ay-is-alert" placeholder="placeholder" type="text">
 *    <small class="ay-text_error">Mensaje de error</small>
 *   </div>
 */
.error,
.ay-text_error {
  display: inline;
  color: #DD3247;
  font-size: 16px;
  font-size: 1rem;
  font-family: "akrobat-light", Arial, sans-serif;
  line-height: 2; }

/**
 * .ay-form__control, {font-size: 16px, border-color: $c-on}
 * @atom Campo de formulario
 * @section Formularios
 * @markup
 *  <div class="ay-form__item">
 *    <input class="ay-form__control" placeholder="placeholder" type="text">
 *  </div>
 */
.ay-form__control {
  display: block;
  padding: 12px;
  color: #575757;
  font-size: 16px;
  font-size: 1rem;
  font-family: "akrobat-regular", Arial, sans-serif;
  -webkit-border-radius: 5px;
          border-radius: 5px;
  border: solid 1px #959595;
  background-color: #fff; }
  .ay-form__control::-webkit-input-placeholder {
    color: #575757;
    font-family: "akrobat-light", Arial, sans-serif;
    font-size: 14px;
    font-size: 0.875rem; }
  .ay-form__control::-moz-placeholder {
    color: #575757;
    font-family: "akrobat-light", Arial, sans-serif;
    font-size: 14px;
    font-size: 0.875rem; }
  .ay-form__control::-ms-input-placeholder {
    color: #575757;
    font-family: "akrobat-light", Arial, sans-serif;
    font-size: 14px;
    font-size: 0.875rem; }
  .ay-form__control::placeholder {
    color: #575757;
    font-family: "akrobat-light", Arial, sans-serif;
    font-size: 14px;
    font-size: 0.875rem; }
  .ay-form__control:-webkit-autofill, .ay-form__control:-webkit-autofill:hover, .ay-form__control:-webkit-autofill:focus {
    -webkit-text-fill-color: #575757; }

/**
 * .ay-form__datecontrol, {font-size: 16px, border-color: $c-on}
 * @atom Datepicker
 * @section Formularios
 * @markup
 *   <div class="ay-form__item">
 *     <label for="date" class="ay-form__label">Fecha de Nacimiento</label>
 *     <div class="ay-form__icon-bg i-data">
 *       <input id="date" type="date" class="ay-form__datecontrol">
 *     </div>
 *     <span class="ay-text_error"></span>
 *   </div>
 */
.ay-form__datecontrol {
  padding: 12px;
  width: 100%;
  color: #575757;
  font-family: "akrobat-regular", Arial, sans-serif;
  font-size: 16px;
  font-size: 1rem;
  -webkit-border-radius: 5px;
          border-radius: 5px;
  border: 1px solid #adadad;
  background-color: #fff; }
  .ay-form__datecontrol.vdp-datepicker input[type=text] {
    width: 100%;
    cursor: pointer;
    font-family: "akrobat-regular", Arial, sans-serif;
    color: #575757;
    background-color: transparent; }

.ay-form__icon-bg {
  position: relative;
  -webkit-border-radius: 5px;
          border-radius: 5px;
  width: 100%; }
  .ay-form__icon-bg:before {
    position: absolute;
    min-height: 32px;
    min-width: 30px;
    text-align: center;
    bottom: 1px;
    right: 0;
    padding: 8px;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.7;
    color: #fff;
    pointer-events: none;
    -webkit-border-radius: 0 5px 5px 0;
            border-radius: 0 5px 5px 0;
    background-color: #469EC3;
    z-index: 3; }

/**
 * .ay-form__control-toggle
 * @atom Control Toggle
 * @section Formularios
 * @markup
 *  <div class="ay-form__item">
 *   <div class="ay-form__control_toggle i-arrow-down">
 *    <select class="ay-form__select-no-appearance">
 *      <option value="cedula" selected="">Cédula de ciudadanía</option>
 *      <option value="cedula-ext">Cédula de extranjería</option>
 *      <option value="pasaporte">Pasaporte</option>
 *      <option value="nit">Nit Persona Natural</option>
 *    </select>
 *   </div>
 *  </div>
 */
.ay-form__control_toggle {
  position: relative;
  -webkit-border-radius: 5px;
          border-radius: 5px;
  background-color: #fff; }
  .ay-form__control_toggle:before {
    position: absolute;
    top: 50%;
    right: 16px;
    z-index: 2;
    display: block;
    font-size: 10px;
    font-size: 0.625rem;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none; }
  .ay-form__control_toggle.i-arrow-up-down:before {
    font-size: 10px;
    font-size: 0.625rem; }

.ay-form__select-no-appearance {
  position: relative;
  z-index: 1;
  border: none;
  display: block;
  width: 100%;
  padding: 12px;
  white-space: nowrap;
  color: #575757;
  font-size: 16px;
  font-size: 1rem;
  font-family: "akrobat-regular", Arial, sans-serif;
  outline: none;
  -webkit-border-radius: 5px;
          border-radius: 5px;
  border: solid 1px #adadad;
  background-color: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }
  .ay-form__select-no-appearance::-webkit-inner-spin-button, .ay-form__select-no-appearance::-webkit-outer-spin-button {
    margin: 0;
    position: relative;
    right: 0; }

/**
 * .ay-form__item
 * @atom Item de formulario
 * @section Formularios
 * @markup
 *  <div class="ay-form__item">
 *    <label class="ay-form__label" for="name"> Nombres<sup class="ay-form__label_require">*</sup>: </label>
 *    <input class="ay-form__control"type="text" name="name"id="name">
 *  </div>
 *  <div class="ay-form__item">
 *    <label class="ay-form__label" for="age"> Edad: </label>
 *    <input class="ay-form__control" type="number" name="age" id="age" value="18">
 *  </div>
 */
.ay-form__item {
  padding-bottom: 20px; }
  .ay-form__item .ay-form__control {
    width: 100%; }

.ay-form__inline-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center; }
  .ay-form__inline-row .ay-form__radiobox:first-child {
    padding-right: 20px; }

.ay-form__input-no-appearance {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer; }

/**
 * .ay-form__checkbox, Checkbox personalizado usando el :before del label
 * @atom Checkbox
 * @section Formularios
 * @markup
 *  <div class="ay-form__checkbox">
 *    <input class="ay-form__input-no-appearance" type="checkbox" name="checkbox-custom" value="" id="checkbox-custom">
 *    <label class="ay-form__check i-check" for="checkbox-custom">
 *      <span class="ay-form__check-label"> Label checkbox </span>
 *    </label>
 *  </div>
 */
.ay-form__checkbox {
  position: relative; }

.ay-form__check {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  font-size: 16px;
  font-size: 1rem;
  font-family: "akrobat-light", Arial, sans-serif; }
  .ay-form__check:before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    line-height: 16px;
    text-align: center;
    color: #469EC3;
    font-size: 10px;
    font-size: 0.625rem;
    -webkit-border-radius: 2px;
            border-radius: 2px;
    border: 2px solid #575757;
    background-color: #fff;
    pointer-events: none;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; }

.ay-form__check-label {
  color: #575757; }

.ay-form__check-label a {
  color: #469EC3;
  font-family:'akrobat-bold', Arial, sans-serif;
  text-decoration: underline; }

.ay-form__input-no-appearance:checked + .ay-form__check:before {
  content: "";
  line-height: 16px;
  color: #fff;
  border-color: #469EC3;
  background-color: #469EC3; }

.ay-form__checkbox_block.ay-form__checkbox .ay-form__check {
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  align-items: flex-start; }
  .ay-form__checkbox_block.ay-form__checkbox .ay-form__check::before {
    margin-top: 4px; }

.ay-form__checkbox_block.ay-form__checkbox .ay-form__check-label {
  -webkit-flex-basis: 100%;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  text-align: left; }

/**
 * .ay-form__radiobox, Radio button personalizado usando el :before del label
 * @atom Radio button
 * @section Formularios
 * @markup
 *  <div class="ay-form__radiobox">
 *   <input class="ay-form__input-no-appearance" type="radio" name="radio-custom" value="radio-custom" id="radio-custom">
 *    <label class="ay-form__radio" for="radio-custom">
 *      <span class="ay-form__radio-label"> Label radio button </span>
 *    </label>
 *   </div>
 */
.ay-form__radiobox {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative; }

.ay-form__radio {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  font-size: 16px;
  font-size: 1rem;
  font-family: "akrobat-regular", Arial, sans-serif; }
  .ay-form__radio:before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    line-height: 16px;
    text-align: center;
    color: #469EC3;
    font-size: 16px;
    font-size: 1rem;
    -webkit-border-radius: 50%;
            border-radius: 50%;
    border: 2px solid #575757;
    background-color: #fff;
    pointer-events: none;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; }
  .ay-form__radio:after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    display: block;
    width: 16px;
    height: 16px;
    margin-top: 0;
    -webkit-border-radius: 50%;
            border-radius: 50%;
    background-color: #059F77;
    opacity: 0;
    pointer-events: none;
    -webkit-transform: scale(1.5);
        -ms-transform: scale(1.5);
            transform: scale(1.5);
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; }

.ay-form__radio-label {
  color: #575757;
  line-height: 1; }

.ay-form__input-no-appearance:checked + .ay-form__radio:after {
  width: 12px;
  height: 12px;
  opacity: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1); }

.ay-form__foot {
  text-align: center;
  padding: 40px 0 20px 0; }
  .ay-form__foot .ay-btn {
    margin: 0 auto; }

/* Caja con border */
.ay-form__lead {
  text-align: center;
  padding-bottom: 40px; }
  .ay-form__lead::before {
    content: " ";
    border-top: 1px solid #E0E0E0;
    display: block;
    padding-top: 30px; }
  .ay-form__lead .ay-link {
    padding-top: 20px; }

.ay-form__center {
  text-align: center;
  padding-bottom: 30px; }

.ay-text_block {
  display: block; }

/*------------------------------------*\
  Component
  #Styles for pre register
\*------------------------------------*/
/**
 * @molecule Form 1 Pre register
 * @section C From 1 Pre register
 * @markup
 *   <div class="ay-card ay-card_form">
 *      <form action="#" class="ay-form ay-card__inner">
 *        <fieldset>
 *          <legend class="ay-headline_border">Registro Hotelero Express en línea</legend>
 *        </fieldset>
 *          <!-- Input No. de referencia de la reserva -->
 *          <div class="ay-form__item">
 *            <label class="ay-form__label" for="noreserva">No. de referencia de la reserva<sup class="ay-form__label_require">*</sup></label>
 *            <input class="ay-form__control" placeholder="Ej: 123" type="text" id="noreserva">
 *            <small class="ay-text_error"></small>
 *          </div>
 *        <!-- Input ID del Titular de la reserva -->
 *        <div class="ay-form__item">
 *          <label class="ay-form__label" for="idtitular">ID del Titular de la reserva<sup class="ay-form__label_require">*</sup></label>
 *          <input class="ay-form__control" placeholder=CMD123" type="text" id="idtitular">
 *          <small class="ay-text_error"></small>
 *        </div>
 *        <!-- Datepicker Fecha de Nacimiento -->
 *        <div class="ay-form__item">
 *          <label for="date" class="ay-form__label">Fecha de Nacimiento</label>
 *          <div class="ay-form__icon-bg i-data">
 *            <input id="date" type="date" class="ay-form__datecontrol">
 *          </div>
 *          <span class="ay-text_error"></span>
 *        </div>
 *        <div class="ay-form__foot-high ay-u-center">
 *          <button class="ay-btn ay-btn_default ay-btn_primary" type="submit">Buscar</button>
 *        </div>
 *        <div class="ay-form__lead">
 *          <strong class="ay-text">¿Los datos no corresponden? </strong>
 *          <p class="ay-text"> Llámenos al</p>
 *          <p class="ay-text">Bogotá: +57 (1) 628 0000</p>
 *          <p class="ay-text">Línea Gratuita: +57 (01 800) 051 0765</p>
 *          <a class="ay-link">Olvidé mi reserva</a>
 *        </div>
 *      </form>
 *   </div>
 */
/*------------------------------------*\
  Component
  #Styles for pre register 2
\*------------------------------------*/
/**
 * @molecule Form 2 Pre register
 * @section C From 2 Pre register
 * @markup
 *   <div class="ay-card ay-card_form">
 *      <form action="#" class="ay-form ay-card__inner">
 *         <fieldset>
 *            <legend class="ay-headline_border">Titulo</legend>
 *            <!-- Correo -->
 *            <div class="ay-form__item">
 *              <strong class="ay-u-center ay-text_block">licette.********@deca*****.com</strong>
 *             </div>
 *             <div class="ay-form__center">
 *                  <button class="ay-btn ay-btn_default ay-btn_primary" type="submit">Enviar</button>
 *             </div>
 *             <div class="ay-form__lead">
 *                <strong class="ay-text">¿Los datos no corresponden? </strong>
 *                <p class="ay-text"> Llámenos al</p>
 *                <p class="ay-text">Bogotá: +57 (1) 628 0000</p>
 *               <p class="ay-text">Línea Gratuita: +57 (01 800) 051 0765</p>
 *             </div>
 *            <!-- Correo -->
 *         <!-- Select Indicativo telefónico -->
 *          <div class="ay-form__item">
 *            <label class="ay-form__label" for="indicativotelefonico">Indicativo telefónico<sup class="ay-form__label_require">*</sup></label>
 *            <div class="ay-form__control_toggle i-arrow-down">
 *              <select class="ay-form__select-no-appearance" id="indicativotelefonico" name="select">
 *                <option value="cedula" selected>Seleccione una ocupación</option>
 *                <option value="ocupacion1">Ocupación 1</option>
 *                <option value="ocupacion2">Ocupación 2</option>
 *                <option value="ocupacion3">Ocupación 3</option>
 *              </select>
 *           </div>
 *          </div>
 *           <small class="ay-text_error"></small>
 *        <div class="ay-form__item ay-u-center">
 *          <strong class="ay-text">12****89</strong>
 *        </div>
 *        <div class="ay-form__center">
 *          <button class="ay-btn ay-btn_default ay-btn_primary" type="submit">Enviar</button>
 *        </div>
 *        </fieldset>
 *        <fieldset>
 *        <div class="ay-form__lead">
 *          <strong class="ay-text ay-text_block">¿Necesita ayuda? </strong>
 *          <a class="ay-link">Ingrese aquí</a>
 *        </div>
 *        <div class="ay-form__item-high ay-u-center">
 *          <button class="ay-btn ay-btn_default ay-btn_primary" type="submit">Ya tengo un token</button>
 *        </div>
 *        <div class="ay-form__item-high ay-u-center">
 *          <button class="ay-btn ay-btn_default ay-btn_outline" type="submit">Cancelar</button>
 *        </div>
 *        </fieldset>
 *      </form>
 *   </div>
 */
/*------------------------------------*\
  Component
  #Styles for pre register 3
\*------------------------------------*/
/**
 * @molecule Form 3 Pre register
 * @section C From 3 Pre register
 * @markup
 *   <div class="ay-card ay-card_form">
 *      <form action="#" class="ay-form ay-card__inner">
 *        <fieldset>
 *           <legend class="ay-headline_border">Ingrese el código que fue enviado a su correo electrónico para ingresar al Registro Hotelero Express</legend>
 *        </fieldset>
 *        <div class="ay-form__item">
 *          <label class="ay-form__label" for="codigoreserva">Código de 8 dígitos<sup class="ay-form__label_require">*</sup></label>
 *          <input class="ay-form__control" placeholder="Ej: 12312345" type="text" id="codigoreserva">
 *          <small class="ay-text_error"></small>
 *        </div>
 *        <div class="ay-form__center">
 *          <button class="ay-btn ay-btn_default ay-btn_primary" type="submit">Continuar</button>
 *        </div>
 *        <div class="ay-u-center">
 *          <a class="ay-link">Volver a enviar el código</a>
 *        </div>
 *      </form>
 *   </div>
 */
/*------------------------------------*\
  Component
  #Styles for pre register 4
\*------------------------------------*/
/**
 * @molecule Form 4 Pre register
 * @section C From 4 Pre register
 * @markup
 *   <div class="ay-card ay-card_form">
 *      <form action="#" class="ay-form ay-card__inner">
 *        <fieldset>
 *           <legend class="ay-headline_border">Recordar número de reserva</legend>
 *         </fieldset>
 *         <!-- Select Tipo de documento -->
 *         <div class="ay-form__item">
 *           <label class="ay-form__label" for="tipodocumento">Tipo de documento<sup class="ay-form__label_require">*</sup></label>
 *           <div class="ay-form__control_toggle i-arrow-down">
 *             <select class="ay-form__select-no-appearance" id="tipodocumento" name="select">
 *               <option value="documento" selected>Activo</option>
 *               <option value="ocupacion1">Opcion 1</option>
 *               <option value="ocupacion2">Opcion 2</option>
 *               <option value="ocupacion3">Opcion 3</option>
 *             </select>
 *           </div>
 *           <small class="ay-text_error"></small>
 *         </div>
 *        <!-- Input Identificación -->
 *        <div class="ay-form__item">
 *          <label class="ay-form__label" for="identificacion">Identificación<sup class="ay-form__label_require">*</sup></label>
 *          <input class="ay-form__control" placeholder="Ej: 123" type="text" id="identificacion">
 *          <small class="ay-text_error"></small>
 *        </div>
 *        <div class="ay-form__center ay-u-center">
 *          <button class="ay-btn ay-btn_default ay-btn_primary" type="submit">Buscar</button>
 *        </div>
 *        <div class="ay-form__item-high ay-u-center">
 *          <button class="ay-btn ay-btn_default ay-btn_outline" type="submit">Cancelar</button>
 *        </div>
 *        <div class="ay-form__lead">
 *          <strong class="ay-text">¿Los datos no corresponden? </strong>
 *          <p class="ay-text"> Llámenos al</p>
 *          <p class="ay-text">Bogotá: +57 (1) 628 0000</p>
 *          <p class="ay-text">Línea Gratuita: +57 (01 800) 051 0765</p>
 *        </div>
 *      </form>
 *   </div>
 */
/*------------------------------------*\
  Component
  #Styles for pre register 5
\*------------------------------------*/
/**
 * @molecule Form 5 Pre register
 * @section C From 5 Pre register
 * @markup
 *   <div class="ay-card ay-card_form">
 *      <form action="#" class="ay-form ay-card__inner">
 *        <fieldset>
 *           <legend class="ay-headline_border">Se enviará el número de reserva al siguiente correo:</legend>
 *         </fieldset>
 *        <strong class="ay-u-center ay-text_block">licette.********@deca*****.com</strong>
 *        <div class="ay-form__center">
 *          <button class="ay-btn ay-btn_default ay-btn_primary" type="submit">Enviar</button>
 *        </div>
 *        <div class="ay-form__item-high ay-u-center">
 *          <button class="ay-btn ay-btn_default ay-btn_outline" type="submit">Cancelar</button>
 *        </div>
 *        <div class="ay-form__lead">
 *          <strong class="ay-text">¿Los datos no corresponden? </strong>
 *          <p class="ay-text"> Llámenos al</p>
 *          <p class="ay-text">Bogotá: +57 (1) 628 0000</p>
 *          <p class="ay-text">Línea Gratuita: +57 (01 800) 051 0765</p>
 *        </div>
 *      </form>
 *   </div>
 */
.ay-form__item-high {
  padding-bottom: 40px; }

.ay-form__foot-high {
  padding: 40px 0 60px 0; }

.ay-form__center {
  padding: 30px 0; }

/**
 * .ay-form__error
 * @atom Mensaje de error
 * @section Formularios
 * @markup
 *   <div class="ay-form__error i-error">
 *      <ul>
 *         <li class="ay-form__error-item">Mensaje de error</li>
 *      </ul>
 *   </div>
 */
/*   Estilos mensajes de error */
.ay-form__error,
.ay-form__success,
.ay-form__warning {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  background-color: rgba(170, 170, 170, 0.05);
  border: 1px solid #D8D8D8;
  padding: 20px 30px;
  margin: 10px 10px 0; }

.ay-form__error::before {
  font-size: 24px;
  font-size: 1.5rem;
  color: #D0021B;
  margin-right: 40px; }

.ay-form__error-item {
  color: #D0021B;
  text-align: left; }

/**
 * .ay-form__success
 * @atom Mensaje de confirmación
 * @section Formularios
 * @markup
 *   <div class="ay-form__success i-check">
 *      <ul>
 *        <li class="ay-form__success-item">Mensaje de confirmacion</li>
 *      </ul>
 *   </div>
 */
.ay-form__success::before {
  font-size: 24px;
  font-size: 1.5rem;
  color: #059F77;
  margin-right: 40px; }

.ay-form__success-item {
  color: #059F77;
  text-align: left; }

/**
 * .ay-form__warning
 * @atom Mensaje de advertencia
 * @section Formularios
 * @markup
 *   <div class="ay-form__warning i-error">
 *      <ul class="ay-form_list">
 *        <li class="ay-form__warning-item">Mensaje de advertencia</li>
 *      </ul>
 *   </div>
 */
.ay-form__warning::before {
  font-size: 24px;
  font-size: 1.5rem;
  color: #FBB14B;
  margin-right: 40px; }

.ay-form__warning-item {
  color: #575757;
  text-align: left; }

.ay-form_list {
  list-style: none; }

/*------------------------------------*\
  Transversal Elements
  #Styles for layout theme
\*------------------------------------*/
/**
 * Grid estructura
 *
 * @structure Grid Layout
 * @section Grids
 * @flag full-width
 * @markup
 *   <div class="ay-canvas">
 *    <div class="ay-l-grid">
 *    <!-- //- Structure: Grid | ID:  | Type: Layout -->
 *      <!-- //- Componente: Avatar Card | ID:  | Type: Card | State: Check-->
 *      <div class="ay-l-grid__item ay-card ay-card_canvas ay-card_check">
 *       <div class="ay-card__unfold">
 *         <span class="ay-avatar i-avatar">
 *           <small class="ay-is-visuallyhidden">Avatar</small>
 *         </span>
 *       </div>
 *       <div class="ay-card__twofold ay-card__i">
 *         <h3 class="ay-headline-3">María Ángela Benitez Parra</h3>
 *         <p class="ay-text">Adulto</p>
 *       </div>
 *     </div>
 *     <!-- //- Componente: Avatar Card | ID:  | Type: Card | State: Check-->
 *     <div class="ay-l-grid__item ay-card ay-card_canvas ay-card_check">
 *       <div class="ay-card__unfold">
 *         <span class="ay-avatar i-avatar">
 *           <small class="ay-is-visuallyhidden">Avatar</small>
 *         </span>
 *       </div>
 *       <div class="ay-card__twofold ay-card__i">
 *         <h3 class="ay-headline-3">María Ángela Benitez Parra</h3>
 *         <p class="ay-text">Adulto</p>
 *       </div>
 *     </div>
 *       <!-- //- Componente: Avatar Card | ID:  | Type: Card | State: No Register-->
 *     <div class="ay-l-grid__item ay-card ay-card_canvas ay-card_noregister">
 *       <div class="ay-card__unfold">
 *         <span class="ay-avatar i-avatar">
 *           <small class="ay-is-visuallyhidden">Avatar</small>
 *         </span>
 *       </div>
 *       <div class="ay-card__twofold ay-card__i">
 *         <h3 class="ay-headline-3">María Ángela Benitez Parra</h3>
 *         <p class="ay-text">Adulto</p>
 *       </div>
 *     </div>
 *     <!-- //- Componente: Avatar Card | ID:  | Type: Card | State: Check-->
 *     <div class="ay-l-grid__item ay-card ay-card_canvas ay-card_check">
 *       <div class="ay-card__unfold">
 *         <span class="ay-avatar i-avatar">
 *           <small class="ay-is-visuallyhidden">Avatar</small>
 *         </span>
 *       </div>
 *       <div class="ay-card__twofold ay-card__i">
 *         <h3 class="ay-headline-3">María Ángela Benitez Parra</h3>
 *         <p class="ay-text">Adulto</p>
 *       </div>
 *     </div>
 *     <!-- //- Componente: Avatar Card | ID:  | Type: Card | State: Check-->
 *     <div class="ay-l-grid__item ay-card ay-card_canvas ay-card_check">
 *       <div class="ay-card__unfold">
 *         <span class="ay-avatar i-avatar">
 *           <small class="ay-is-visuallyhidden">Avatar</small>
 *         </span>
 *       </div>
 *       <div class="ay-card__twofold ay-card__i">
 *         <h3 class="ay-headline-3">María Ángela Benitez Parra</h3>
 *         <p class="ay-text">Adulto</p>
 *       </div>
 *      </div>
 *    </div>
 *   </div>
 */
.ay-l-grid {
  width: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.ay-l-grid_box {
  padding-bottom: 180px; }

.ay-l-grid__item {
  -webkit-box-flex: 1;
  -webkit-flex: 1 100%;
  -moz-flex: 1 100%;
  -ms-flex: 1 100%;
  flex: 1 100%;
  margin: 10px 0; }
  .ay-l-grid__item .ay-card {
    min-width: auto; }

.ay-l-grid__btn {
  -webkit-box-flex: 1;
  -webkit-flex: 1 auto;
  -moz-flex: 1 auto;
  -ms-flex: 1 auto;
  flex: 1 auto;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center; }

/**
 * Bloques Estructurales
 *
 * @structure Blocks Layout
 * @section Blocks
 * @flag full-width
 * @markup
 *   <div class="ay-canvas">
 *      <div class="ay-block">
 *        <div class="ay-block__aside">
 *          <section class="ay-masthead">
 *            <div class="ay-masthead__top">
 *              <h2 class="ay-headline-2 ay-headline_uppercase">Datos Personales</h2>
 *              <h3 class="ay-headline-3">Reserva No.<small class="ay-text_alert">134253</small></h3>
 *            </div>
 *            <p class="ay-text">Por favor complete los datos personales de los huéspedes registrados en la reserva. Los huéspedes que han comprado tiquetes aéreos no pueden modificar sus datos, solo pueden completar los datos pendientes.
 *            <p class="ay-text">Si desea hacer un registro masivo de huéspedes, puede
 *              <a href="#" class="ay-link"> subir un archivo Excel (CVS) aquí.</a> </p>
 *          </section>
 *        </div>
 *        <div class="ay-block__main">
 *            <h2 class="ay-headline-2> Datos personales</h2>
 *
 *        </div>
 *      </div>
 *   </div>
 */
.ay-block .ay-headline {
  padding-bottom: 20px; }

.ay-block__head {
  padding-bottom: 20px; }

.ay-block__aside,
.ay-block__underline {
  padding: 20px 0; }

.ay-block__underline {
  border-bottom: 1px solid #E0E0E0; }

.ay-block__title {
  padding-bottom: 10px; }

.ay-block__gutter_bottom {
  padding-bottom: 20px;
  cursor: pointer; }

.ay-block_bg {
  background-color: #f6f6f6; }

.ay-block_white {
  background: #fff; }

.ay-block__grid {
  padding: 10px 0; }

/**
 * Bloques Estructurales
 *
 * @structure Block Masthead
 * @section Blocks
 * @flag full-width
 * @markup
 *   <div class="ay-canvas">
 *      <article class="ay-block ay-masthead">
 *         <h1 class="ay-headline">Registro Hotelero Express</h1>
 *         <p class="ay-text">Haga el Registro Hotelero Express en línea para registrar los huéspedes de su reversa y gane tiempo al momento de ingresar a nuestros hoteles. Si va acompañado puede hacer el registro de sus acompañantes. El horario a nuestros hoteles es a partir de las 15:00 del día de su reserva. Una vez esté en el hotel, por favor informe al hotel el número de confirmación de su Registro Hotelero Express, que recibirá cuando complete este formulario.</p>
 *      </article>
 *   </div>
 */
.ay-canvas {
  width: 92%;
  margin: 0 auto; }

.ay-page__content {
  padding: 50px 0; }

.ay-page__bg {
  padding: 50px 0;
  background-color: #f6f6f6; }

@media only screen and (min-width: 480px) {
  .ay-block__grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }
    .ay-block__grid .ay-counter {
      -webkit-align-self: center;
      -ms-flex-item-align: center;
      align-self: center;
      -webkit-box-flex: 1;
      -webkit-flex: 1 auto;
      -moz-flex: 1 auto;
      -ms-flex: 1 auto;
      flex: 1 auto; } }

/**
 *
 * @structure Prefooters Layout
 * @section Prefooter Paso 1
 * @markup
 *  <div class="ay-canvas">
 *    <div class="ay-prefoot">
 *        <a class="ay-link" href="https://www.decameron.com">Salid del Registro Express</a>
 *        <button class="ay-btn ay-btn_default ay-btn_ico ay-btn_primary i-a-arrow-right"><span class="ay-btn__text">Continuar Registro Express</span></button>
 *   </div>
 * </div>
 */
.ay-prefoot {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 50px 0; }

/**
 *
 * @structure Prefooters Layout
 * @section Prefooter Paso 2
 * @markup
 *  <div class="ay-canvas">
 *    <div class="ay-prefoot">
 *      <div class="ay-prefoot_btn">
 *        <button class="ay-btn ay-btn_default ay-btn_outline ay-btn_ico i-arrow-left"><span class="ay-btn__text">Devolverse a los Datos Personales</span></button>
 *        <button class="ay-btn ay-btn_default ay-btn_ico ay-btn_primary i-a-arrow-right"><span class="ay-btn__text">Continuar registro express</span></button>
 *     </div>
 *      <div class="ay-prefoot_link">
 *        <button class="ay-link">Salir del Registro Express</button>
 *      </div>
 *   </div>
 * </div>
 */
.ay-prefoot_btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  width: 100%; }

.ay-prefoot_link {
  width: 100%;
  padding-top: 20px; }

/**
 *
 * @structure Prefooters Layout
 * @section Prefooter Paso 3
 * @markup
 *  <div class="ay-canvas">
 *    <div class="ay-prefoot">
 *        <a class="ay-link">Salir del Registro Express</a>
 *        <a class="ay-bar__btn ay-btn ay-btn_default ay-btn_ico ay-btn_primary i-a-file"><span class="ay-btn__text">Descargar voucher</span></a>
 *   </div>
 * </div>
 */
@media screen and (max-width: 767px) {
  .ay-prefoot {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column; }
    .ay-prefoot .ay-link {
      margin-bottom: 20px; }
    .ay-prefoot .ay-prefoot_btn {
      -webkit-box-direction: normal;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column; }
      .ay-prefoot .ay-prefoot_btn .ay-btn {
        margin-bottom: 20px; }
    .ay-prefoot .ay-prefoot_link {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      justify-content: center;
      padding-top: 0; } }

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .ay-prefoot_btn .ay-btn {
    max-width: 285px; } }

@media only screen and (min-width: 768px) {
  .ay-l-grid__item {
    -webkit-box-flex: 1;
    -webkit-flex: 1 -webkit-calc(50% - 20px);
    -moz-flex: 1 calc(50% - 20px);
    -ms-flex: 1 calc(50% - 20px);
    flex: 1 calc(50% - 20px);
    max-width: -webkit-calc(50% - 20px);
    max-width: calc(50% - 20px);
    margin: 10px; }
  .ay-l-columns {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
    width: 100%; }
  .ay-l-columns__aside {
    -webkit-box-flex: 1;
    -webkit-flex: 1 38.2%;
    -moz-flex: 1 38.2%;
    -ms-flex: 1 38.2%;
    flex: 1 38.2%;
    padding-right: 10px; }
  .ay-l-columns__main {
    -webkit-box-flex: 1;
    -webkit-flex: 1 61.8%;
    -moz-flex: 1 61.8%;
    -ms-flex: 1 61.8%;
    flex: 1 61.8%;
    padding-left: 10px; }
  .ay-l-grid {
    margin: -10px; }
  .ay-l-grid_box {
    padding-bottom: 140px; }
  .ay-canvas {
    width: 90%;
    max-width: 995px;
    margin: 0 auto; } }

@media only screen and (min-width: 1024px) {
  .ay-canvas {
    width: 100%; }
  .ay-l-columns__aside {
    padding-right: 20px; }
  .ay-l-columns__main {
    padding-left: 20px; } }

@media only screen and (min-width: 1180px) {
  .ay-l-grid__item {
    -webkit-box-flex: 1;
    -webkit-flex: 1 -webkit-calc(33.33% - 20px);
    -moz-flex: 1 calc(33.33% - 20px);
    -ms-flex: 1 calc(33.33% - 20px);
    flex: 1 calc(33.33% - 20px);
    max-width: -webkit-calc(33.33% - 20px);
    max-width: calc(33.33% - 20px); } }

/*------------------------------------*\
  Transversal Patterns
  #Styles List
*------------------------------------*/
/**
 * .ay-list-grid
 * @atom Lista horizontal
 * @section Listas
 * @markup
 *   <dl class="ay-list-grid">
 *     <dt class="ay-list-grid__title">Entrada al hotel</dt>
 *     <dd class="ay-list-grid__definition">Martes 1 de Enero de 2019</dd>
 *     <dt class="ay-list-grid__title">Salida del hotel</dt>
 *     <dd class="ay-list-grid__definition">Jueves 10 de Enero de 2019</dd>
 *     <dt class="ay-list-grid__title">Número de Huéspedes</dt>
 *     <dd class="ay-list-grid__definition">2 Adultos</dd>
 *     <dt class="ay-list-grid__title">Número de Noches</dt>
 *     <dd class="ay-list-grid__definition">9 noches</dd>
 *   </dl>
 */
.ay-list-grid {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.ay-list-grid__title,
.ay-list-grid__definition {
  padding: 4px 0; }

.ay-list-grid__title {
  -webkit-box-flex: 1;
  -webkit-flex: 1 40%;
  -moz-flex: 1 40%;
  -ms-flex: 1 40%;
  flex: 1 40%;
  font-family: "akrobat-bold", Arial, sans-serif;
  font-size: 16px;
  font-size: 1rem; }

.ay-list-grid__definition {
  -webkit-box-flex: 2;
  -webkit-flex: 2 60%;
  -moz-flex: 2 60%;
  -ms-flex: 2 60%;
  flex: 2 60%;
  font-family: "akrobat-regular", Arial, sans-serif; }

/**
 * .ay-list-gral
 * @atom Lista General
 * @section Listas
 * @markup
 *   <ul class="ay-list-gral">
 *     <li class="ay-list-gral__item">Item 1</li>
 *     <li class="ay-list-gral__item">Item 2</li>
 *     <li class="ay-list-gral__item">Item 3</li>
 *     <li class="ay-list-gral__item">Item 4</li>
 *   </ul>
 */
.ay-list-gral {
  width: 100%;
  list-style: disc;
  padding: 30px; }

.ay-list-gral__item {
  padding-bottom: 10px; }

/**
 * .ay-list-grid
 * @atom Lista horizontal
 * @section Listas
 * @markup
 *   <ul class="ay-list">
 *     <li class="ay-list__item"><span class="ay-list__subitem">Entrada al Hotel</span> <span class="ay-list__subitem">2019-03-29</span></li>
 *     <li class="ay-list__item"><span class="ay-list__subitem">Salida del Hotel</span> <span class="ay-list__subitem">2019-03-31</span></li>
 *     <li class="ay-list__item"><span class="ay-list__subitem">Número de Huéspedes</span> <span class="ay-list__subitem">2 Niños</span></li>
 *     <li class="ay-list__item"><span class="ay-list__subitem">Número de Noches</span> <span class="ay-list__subitem">2</span></li>
 *   </ul>
 */
.ay-list {
  width: 100%;
  list-style: none;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  padding: 10px 0; }

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

.ay-list__subitem,
.ay-list__title {
  -webkit-box-flex: 1;
  -webkit-flex: 1 50%;
  -moz-flex: 1 50%;
  -ms-flex: 1 50%;
  flex: 1 50%;
  padding: 2px 0; }

.ay-list__subitem .ay-text:first-child {
  padding-right: 6px; }

.ay-list__title {
  font-family: "akrobat-bold", Arial, sans-serif; }

@media only screen and (min-width: 480px) {
  .ay-list {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center; }
  .ay-list__subitem {
    -webkit-box-flex: 1;
    -webkit-flex: 1 60%;
    -moz-flex: 1 60%;
    -ms-flex: 1 60%;
    flex: 1 60%;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    padding-left: 10px; }
  .ay-list__title {
    -webkit-box-flex: 1;
    -webkit-flex: 1 40%;
    -moz-flex: 1 40%;
    -ms-flex: 1 40%;
    flex: 1 40%; } }

@media only screen and (min-width: 768px) {
  .ay-list-grid__title,
  .ay-list-grid__definition {
    font-size: 18px;
    font-size: 1.125rem; } }

/*------------------------------------*\
	Transversal Elements
    #Styles for multimedia content
    (images, audio and video)
\*------------------------------------*/
.ay-page img {
  width: 100%;
  vertical-align: bottom; }

.ay-img {
  width: 100%;
  vertical-align: bottom; }

/*------------------------------------*\
    Transversal Elements
    #Styles for Titles
\*------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal; }

.ay-headline,
.ay-headline-2,
.ay-headline-3,
.ay-headline_border,
.ay-headline-ico {
  color: #575757;
  font-family: "akrobat-bold", Arial, sans-serif; }

.ay-headline_uppercase {
  text-transform: uppercase; }

/**
  * Class: .ay-headline | Font-family: Akrobat Bold, Font-size: 40px color: $c-default.
  * @atom Headline
  * @section Títulos
  * @markup
  *  <h1 class="ay-headline">Título Principal</h1>
  */
.ay-headline {
  font-size: 30px;
  font-size: 1.875rem; }

/**
 * Class: .ay-headline-2 | Font-family: Akrobat bold, Font-size: 24px color: $c-default.
 * @atom Headline-2
 * @section Títulos
 * @markup
 *  <h2 class="ay-headline-2">Título Sección</h2>
 *  <h2 class="ay-headline-2 ay-headline_uppercase">Título Sección en Mayúscula</h2>
 */
.ay-headline-2 {
  font-size: 18px;
  font-size: 1.125rem; }

/**
 * Class: .ay-headline-3 | Font-family: Akrobat Bold, Font-size: 20px color: $c-default.
 * @atom Headline-3
 * @section Títulos
 * @markup
 *  <h3 class="ay-headline-3">Título Subsección</h3>
 */
.ay-headline-3,
.ay-headline_border,
.ay-headline-ico {
  font-size: 16px;
  font-size: 1rem; }

/**
 * Class: .ay-headline-3 | Font-family: Akrobat Bold, Font-size: 20px color: $c-default.
 * @modifiers
*   .ay-headline_border  |  content: " ", 1px solid $c-border-mild, display: block, padding-top: 10px.
 * @atom Headline Line
 * @section Títulos
 * @markup
 *  <h3 class="ay-headline-3 ay-headline_border">Título Subsección</h3>
 */
.ay-headline_border {
  width: 100%; }
  .ay-headline_border::after {
    content: " ";
    border-bottom: 1px solid #959595;
    display: block;
    padding-top: 10px;
    margin-bottom: 30px; }

/**
 * Class: .ay-headline-ico | Font-family: Akrobat Bold, Font-size: 20px color: $c-default.
 * @atom Headline Ico
 * @section Títulos
 * @markup
 *  <h3 class="ay-headline-ico">Título Con ícono</h3>
 */
.ay-headline-ico::before {
  padding-right: 10px;
  color: #469EC3; }

@media only screen and (min-width: 768px) {
  .ay-headline {
    font-size: 40px;
    font-size: 2.5rem; }
  .ay-headline-2 {
    font-size: 20px;
    font-size: 1.25rem; }
  .ay-headline-3,
  .ay-headline_border,
  .ay-headline-ico {
    font-size: 18px;
    font-size: 1.225rem; } }

/*------------------------------------*\
    Transversal Elements
    #Styles for text
\*------------------------------------*/
.sg-block {
  padding: 12px; }
  .sg-block p {
    padding-bottom: 10px;
    color: #9b9b9b;
    font-family: monospace; }

.sg-bg {
  padding: 12px;
  background-color: #dddddd; }
  .sg-bg-1 {
    background-color: #469EC3; }
  .sg-bg-2 {
    background-color: #059F77; }
  .sg-bg-3 {
    background-color: #702F6D; }

.SG-table__cell,
.SG-component__preview--description {
  font-family: monospace; }

/**
  * Class: .ay-theme, Font-size: 16px base para calcular el tamaño de la fuente en rems
  * @atom Base: HTML
  * @section Textos
  * @markup
  *  <html class="ay-theme">
  *     ...
  *  </html>
  */
.ay-theme {
  font-size: 16px;
  font-size: 1rem; }

/**
 * .ay-text, Font-family: Akrobat Regular, Font-size: 18px, color: $c-on
 * @atom Texto Body
 * @section Textos
 * @markup
 *  <p class="ay-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 *  Pellentesque ac lectus pharetra, consequat dolor eget, vulputate tellus.
 *  Fusce imperdiet aliquet vulputate. Aliquam convallis imperdiet fermentum.
 *  Aliquam ut urna interdum, malesuada.</p>
 */
body,
.ay-text {
  line-height: 1.4;
  color: #575757;
  font-size: 16px;
  font-size: 1.1rem;
  font-family: "akrobat-regular", Arial, sans-serif; }

p {
  margin: 0;
  padding: 0; }

/**
 * .ay-text_strong, Font-family: Akrobat Bold, Font-size: inherit, color: inherit
 * @atom Texto Bold
 * @section Textos
 * @markup
 *  <p class="ay-text">Lorem ipsum dolor sit amet, <strong class="ay-text_strong"> Aliquam convallis </strong>.
 *  Aliquam ut urna interdum, malesuada.</p>
 */
.ay-text_strong {
  font-family: "akrobat-bold", Arial, sans-serif;
  font-weight: normal; }

.ay-text_bottom {
  padding-bottom: 30px; }

/**
 * .ay-text, Font-style: italic; Font-family: inherit, Font-size: inherit, color: inherit
 * @atom Texto Italic
 * @section Textos
 * @markup
 *  <p class="ay-text">Lorem ipsum dolor sit amet, <em class="ay-text_italic"> Aliquam convallis </em>.</p>
 */
.ay-text_italic {
  font-style: italic; }

/**
 * .ay-text_alert, Font-style: inherit, Font-family: inherit, Font-size: inherit, color: $c-alert
 * @atom Texto Alert
 * @section Textos
 * @markup
 *  <p class="ay-text">Lorem ipsum dolor sit amet, <span class="ay-text_alert"> Aliquam convallis </span>.</p>
 */
.ay-text_alert {
  color: #DD3247;
  font-size: inherit; }

/*------------------------------------*\
  Transversal Blocks
  #Styles Avatar
*------------------------------------*/
/**
 * .ay-avatar
 * @atom Avatar
 * @section Avatar
 * @markup
 *   <span class="ay-avatar i-avatar">
 *      <small class="ay-is-visuallyhidden">Avatar</small></span>
 */
.ay-avatar {
  display: block;
  padding-right: 20px;
  font-size: 56px;
  font-size: 3.5rem; }
  .ay-avatar:before {
    color: #059F77; }

/*------------------------------------*\
  Transversal Patterns
  #Styles List
*------------------------------------*/
/**
 * .ay-masthead
 * @atom Masthead
 * @section Header
 * @modifiers
 *  .ay-masthead_title  Modifica el espacio de los títulos del bloque
 * @markup
 *   <section class="ay-masthead">
 *     <div class="ay-masthead__top">
 *       <h2 class="ay-headline-2 ay-headline_uppercase">Datos Personales</h2>
 *       <h3 class="ay-headline-2">Reserva No.<small class="ay-text_alert">134253</small></h3>
 *     </div>

 *     <p class="ay-text">A continuación se presentan todos los detalles por franjas de fechas y hoteles asociados a su reserva. Por favor
 *     registre los huéspedes por franja de fecha, hotel y habitación.</p>
 *   </section>
 */
.ay-masthead {
  padding: 40px 0; }
  .ay-masthead .ay-text {
    padding-bottom: 20px; }

.ay-masthead_title {
  padding-bottom: 10px; }

/**
 * .ay-masthead-inline
 * @atom Masthead
 * @section Header
 * @markup
 *   <header class="ay-masthead-inline">
 *     <h3 class="ay-headline-3">Del 29 de marzo de 2019 </h3>
 *     <h3 class="ay-headline-3">al 31 de marzo de 2019 </h3>
 *   </header>
 */
.ay-masthead-inline {
  width: 100%;
  border-bottom: 1px solid #959595;
  padding-bottom: 10px;
  margin-bottom: 20px; }
  .ay-masthead-inline .ay-headline-3 {
    display: inline-block; }
    .ay-masthead-inline .ay-headline-3:first-child {
      padding-right: 6px; }

.ay-masthead__top {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  padding-bottom: 30px; }

.ay-masthead_end {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  justify-content: flex-end; }

/**
 * .ay-masthead__wrapper
 * @atom Masthead
 * @section Header
 * @markup
 *  <div class="ay-canvas ay-masthead__wrapper">
 *     <article class="ay-masthead__row">
 *       <h2 class="ay-headline-3">Descarga el formato en excel</h2>
 *       <p class="ay-text">Descarga el formato de Excel que encuentras en el sigueinte enlace. Asegúrate de tener instalado Microsoft
 *       Excel 2010 para que el formato funcione correctamente.</p>
 *       <div class="ay-masthead_center">
 *          <button class="ay-btn ay-btn_default ay-btn_ico ay-btn_primary i-a-file" type="button"><span class="ay-btn__text">Descargar formato para registro masivo</span></button>
 *       </div>
 *     </article>
 *     <article class="ay-masthead__row">
 *        <h2 class="ay-headline-3">Llena los datos de los huéspedes en cada pestaña</h2>
 *        <p class="ay-text">El sistema de WebcheckIn de Decameron registra los huéspedes según categorías de edad y algunas condiciones,
 *        con el objetivo de prestar un mejor servicio a nuestros clientes. Para poder hacer esta distinción en el formato, debes llenar los datos de los huéspedes en cada una de las PESTAÑAS ASIGNADAS A CADA TIPO DE HUÉSPED. Hay pestañas para
 *        infantes, niños, adultos y personas mayores.</p>
 *     </article>
 *     <article class="ay-masthead__row">
 *        <h2 class="ay-headline-3">Al cargar el formato se completará la información de los huéspedes. </h2>
 *        <p class="ay-text">Cuando haya terminado de llenar todos los datos de los huéspedes que van a hacer Web CheckIn, puedes cargar el formato en nuestro sistema. La información de los pasajeros se cargará automáticamente en la pantalla
 *        del paso de DATOS PERSONALES. Los datos que no se hayan podido leer correctamente, no se cargaran en el sistema y deberás llenarlos manualmente.</p>
 *        <div class="ay-masthead_center">
 *          <button class="ay-btn ay-btn_default ay-btn_ico ay-btn_primary i-a-file-up" type="button"><span class="ay-btn__text">Cargar el formato con los datos completos</span></button>
 *        </div>
 *     </article>
 *    </div>
 */
.ay-masthead__row {
  padding: 10px 0; }
  .ay-masthead__row .ay-form__warning {
    margin: 0; }

.ay-masthead__wrapper {
  counter-reset: section;
  width: 100%; }
  .ay-masthead__wrapper .ay-headline-3 {
    position: relative; }
    .ay-masthead__wrapper .ay-headline-3:before {
      content: counter(section);
      counter-increment: section;
      font-size: 42px;
      font-size: 2.625rem;
      color: #469EC3;
      font-family: "akrobat-bold", Arial, sans-serif;
      margin-right: 17px;
      position: relative; }
    .ay-masthead__wrapper .ay-headline-3:after {
      content: " ";
      border-bottom: 1px solid #959595;
      padding-bottom: 10px;
      margin-bottom: 20px;
      display: block;
      position: relative;
      left: 30px; }
  .ay-masthead__wrapper .ay-text {
    padding-bottom: 20px; }

.ay-masthead_center {
  text-align: center;
  padding: 20px 0; }
  .ay-masthead_center .ay-btn {
    margin: auto; }

@media screen and (max-width: 767px) {
  .ay-masthead__wrapper .ay-headline-3 {
    text-align: center; }
    .ay-masthead__wrapper .ay-headline-3:before {
      display: block;
      top: 0;
      text-align: center; }
    .ay-masthead__wrapper .ay-headline-3:after {
      left: 0;
      width: 100%; }
  .ay-masthead__wrapper .ay-text {
    padding-left: 0; } }

@media only screen and (min-width: 768px) {
  .ay-masthead__wrapper .ay-headline-3:before {
    top: 10px; }
  .ay-masthead__wrapper .ay-headline-3:after {
    width: -webkit-calc(100% - 30px);
    width: calc(100% - 30px); }
  .ay-masthead__wrapper .ay-text,
  .ay-masthead__wrapper .ay-form__warning,
  .ay-masthead__wrapper .ay-modal__mask {
    margin-left: 30px; } }

/*------------------------------------*\
  Transversal Blocks
  #Styles bar
*------------------------------------*/
/**
 * Class: .ay-bar
 * @atom Barra Fixed
 * @section Barras
 * @markup
 *   <div class="sg-block">
 *    <div class="ay-bar">
 *      <div class="ay-l-canvas ay-bar__canvas">
 *        <button class="ay-bar__btn ay-btn ay-btn_default ay-btn_ico ay-btn_primary i-a-arrow-right" type="button">
 *            <span class="ay-btn__text">Agregar huésped(es)</span>
 *        </button>
 *        <button class="ay-bar__btn ay-btn ay-btn_default ay-btn_outline" type="button">
 *            <span class="ay-btn__text">Cerrar</span>
 *        </button>
 *      </div>
 *     </div>
 *    </div>
 *   <div class="sg-block">
 *    <div class="ay-bar">
 *      <div class="ay-l-canvas">
 *        <div class="ay-bar__canvas">
 *          <button class="ay-bar__btn ay-btn ay-btn_default ay-btn_ico ay-btn_primary i-a-arrow-right" type="button">
 *            <span class="ay-btn__text">Agregar huésped(es)</span>
 *          </button>
 *          <button class="ay-bar__btn ay-btn ay-btn_default ay-btn_outline" type="button">
 *             <span class="ay-btn__text">Cerrar</span>
 *          </button>
 *        </div>
  *       <div class="ay-bar__canvas">
 *          <a class="ay-bar__link ay-link" href="#">Salir del registro express</a>
 *        </div>
 *      </div>
 *     </div>
 *    </div>
 */
.ay-bar {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 2;
  -webkit-box-shadow: 2px -2px 15px 0px rgba(173, 173, 173, 0.24);
          box-shadow: 2px -2px 15px 0px rgba(173, 173, 173, 0.24);
  padding: 14px 0;
  z-index: 5; }

.ay-bar_fixed {
  position: fixed; }

.ay-bar_fixed-bottom {
  position: absolute; }

.ay-bar__btn {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin: 0 auto;
  margin-bottom: 10px; }
  .ay-bar__btn.ay-btn__ico::before {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }

.ay-bar__link {
  text-align: left;
  margin: 8px 0 10px; }

.ay-bar__canvas {
  width: 92%;
  margin: 0 auto; }

.ay-bar__canvas_center {
  text-align: center; }

.ay-bar__canvas_column {
  text-align: center; }

/**
 * Class: .ay-progress
 * @atom Barra de Progreso
 * @section Barras
 * @markup
 *    <div class="sg-block">
 *      <div class="ay-progress">
 *        <div class="ay-progress__box">
 *        <label class="ay-progress__label i-file-up">
 *          70%
 *        </label>
 *        <div class="ay-progress__bar">
 *          <span class="ay-progress__inner-bar ay-progress__bar_color" style="width:70%;"></span>
 *        </div>
 *        </div>
 *      </div>
 *    </div>
 *    <div class="sg-block">
 *      <div class="ay-progress">
 *        <div class="ay-progress__box">
 *        <label class="ay-progress__label i-file-up">
 *          100%
 *        </label>
 *        <div class="ay-progress__bar">
 *          <span class="ay-progress__inner-bar ay-progress__bar_color" style="width:100%;"></span>
 *        </div>
 *        </div>
 *       <button class="ay-progress__btn ay-btn ay-btn_small ay-btn_warning"type="button">Eliminar</button>
 *      </div>
 *    </div>
 */
.ay-progress {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%; }

.ay-progress__box {
  -webkit-box-flex: 1;
  -webkit-flex: 1 100%;
  -moz-flex: 1 100%;
  -ms-flex: 1 100%;
  flex: 1 100%; }

.ay-progress__bar {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  height: 8px;
  -webkit-border-radius: 10px;
          border-radius: 10px;
  background-color: #ececec; }

.ay-progress__inner-bar {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  height: 8px;
  -webkit-border-radius: 10px;
          border-radius: 10px; }

.ay-progress__bar_color {
  background-color: #469EC3; }

.ay-progress__label {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  font-size: 16px;
  font-size: 1rem;
  padding-bottom: 10px;
  color: #575757; }
  .ay-progress__label:before {
    font-size: 20px;
    font-size: 1.25rem; }

.ay-progress__btn {
  margin-left: 14px; }

.ay-progress_row {
  max-width: 90%;
  margin: 0 auto;
  padding: 20px 0; }

@media screen and (min-width: 756px) {
  .ay-bar__btn {
    margin-bottom: 0; } }

@media screen and (max-width: 755px) {
  .ay-bar__canvas {
    text-align: center; } }

@media only screen and (min-width: 768px) {
  .ay-bar {
    padding: 24px 0; }
  .ay-bar__link {
    margin-top: 20px; }
  .ay-bar__canvas {
    width: 90%;
    max-width: 995px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between; }
  .ay-bar__btn {
    margin: 0; }
    .ay-bar__btn:first-child {
      margin-bottom: 0;
      margin-right: 10px; }
  .ay-bar__canvas_center {
    text-align: left; }
  .ay-progress_row {
    max-width: 70%; } }

/*------------------------------------*\
  Transversal Blocks
  #Styles Cards
*------------------------------------*/
/**
 * Class: .ay-card {  padding: 14px; }
 * @atom Card
 * @section Cards
 * @modifiers
 *  .ay-card__inner  Margen de bloque interno
 *  .ay-card_border-box  Margen de bloque externo
 *  .ay-card__head  Espacio inferior de 30px bloque
 *  .ay-card__title  Espacio inferior de 10px para títulos
 * @markup
 *      <div class="ay-card ay-card_canvas">
 *          <h3 class="ay-headline-2">Tarjeta contenedora</h3>
 *      </div>
 */
.ay-card {
  width: 100%;
  background-color: #fff;
  padding: 8px 14px;
  -webkit-border-radius: 5px;
          border-radius: 5px;
  -webkit-box-shadow: 2px -2px 15px 0px rgba(173, 173, 173, 0.24);
          box-shadow: 2px -2px 15px 0px rgba(173, 173, 173, 0.24); }

.ay-card__inner {
  padding: 20px 0; }

.ay-card_border-box {
  margin: 20px 0; }

.ay-form__inner {
  margin: -1rem 0 -3rem 0;
}

/**
 * Class: .ay-card | .ay-card__form {  max-width: 480px,  margin: auto; }
 * @atom Card Form
 * @section Cards
 * @modifiers
 *  .ay-card_canvas  Bloque interno a dos columnas
 * @markup
 *      <div class="ay-card ay-card_form">
 *          <h3 class="ay-headline-2">Contenedor del formulario</h3>
 *      </div>
 */
.ay-card_form {
  max-width: 480px;
  margin: auto; }

.ay-card_canvas {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.ay-card__fold,
.ay-card__unfold,
.ay-card__twofold {
  margin: auto; }

.ay-card__fold {
  -webkit-box-flex: 1;
  -webkit-flex: 1 auto;
  -moz-flex: 1 auto;
  -ms-flex: 1 auto;
  flex: 1 auto; }

.ay-card__unfold {
  -webkit-box-flex: 0;
  -webkit-flex: 0 auto;
  -moz-flex: 0 auto;
  -ms-flex: 0 auto;
  flex: 0 auto; }

.ay-card__twofold {
  -webkit-box-flex: 2;
  -webkit-flex: 2 auto;
  -moz-flex: 2 auto;
  -ms-flex: 2 auto;
  flex: 2 auto; }

/**
 * Class: .ay-card .ay-card_check
 * @atom Card Check
 * @section Cards
 * @modifiers
 *  .ay-card_check  Estado de personas registrada
 * @markup
 *     <div class="ay-card_check">
 *        <div class="ay-card ay-card_canvas">
 *          <div class="ay-card__unfold">
 *             <span class="ay-avatar i-avatar">
 *               <small class="ay-is-visuallyhidden">Avatar</small>
 *             </span>
 *          </div>
 *        <div class="ay-card__twofold ay-card__i">
 *            <h3 class="ay-headline-3">María Ángela Benitez Parra</h3>
 *             <p class="ay-text">Adulto</p>
 *        </div>
 *       </div>
 *     </div>
 */
.ay-card_check {
  cursor: pointer; }
  .ay-card_check .ay-card .ay-card__i {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    height: auto;
    align-items: center; }
    .ay-card_check .ay-card .ay-card__i:before {
      -webkit-box-ordinal-group: 3;
      -webkit-order: 2;
          -ms-flex-order: 2;
              order: 2;
      -webkit-box-flex: 1;
      -webkit-flex: 1 10%;
      -moz-flex: 1 10%;
      -ms-flex: 1 10%;
      flex: 1 10%;
      position: relative;
      /* top: 50%; */
      -webkit-transform: translateY(50%);
          -ms-transform: translateY(50%);
              transform: translateY(50%);
      margin: auto;
      text-align: center;
      content: "";
      font-family: "decameron-ico" !important;
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-feature-settings: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      font-size: 18px;
      font-size: 1.125rem;
      color: #059F77; }
  .ay-card_check .ay-card .ay-headline-3,
  .ay-card_check .ay-card .ay-text {
    -webkit-box-flex: 1;
    -webkit-flex: 1 50%;
    -moz-flex: 1 50%;
    -ms-flex: 1 50%;
    flex: 1 50%; }
  .ay-card_check .ay-card .ay-headline-3 {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -moz-order: 1;
    -ms-flex-order: 1;
    order: 1; }
  .ay-card_check .ay-card .ay-text {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    -moz-order: 3;
    -ms-flex-order: 3;
    order: 3; }

/**
 * Class: .ay-card .ay-card_disabled
 * @atom Card Disabled
 * @section Cards
 * @modifiers
 *  .ay-card_disabled  Estado de personas que no se pueden registrar
 * @markup
 *     <div class="ay-card_disabled">
 *        <div class="ay-card ay-card_canvas">
 *          <div class="ay-card__unfold">
 *            <span class="ay-avatar i-avatar">
 *              <small class="ay-is-visuallyhidden">Avatar</small>
 *            </span>
 *          </div>
 *          <div class="ay-card__twofold ay-card__i">
 *            <h3 class="ay-headline-3">María Ángela Benitez Parra</h3>
 *            <p class="ay-text">Adulto</p>
 *          </div>
 *        </div>
 *     </div>
 */
.ay-card_disabled .ay-card {
  background-color: #ececec;
  border: 1px solid #E0E0E0; }
  .ay-card_disabled .ay-card .ay-avatar:before {
    color: #959595; }

/**
 * Class: .ay-card .ay-card_noregister
 * @atom Card Noregister
 * @section Cards
 * @modifiers
 *  .ay-card_noregister  Estado de personas Sin registrar
 * @markup
 *    <div class="ay-card_noregister">
 *      <div class="ay-card ay-card_canvas">
 *        <div class="ay-card__unfold">
 *          <span class="ay-avatar i-avatar">
 *            <small class="ay-is-visuallyhidden">Avatar</small>
 *          </span>
 *        </div>
 *        <div class="ay-card__twofold ay-card__i">
 *          <h3 class="ay-headline-3">María Ángela Benitez Parra</h3>
 *          <p class="ay-text">Adulto</p>
 *        </div>
 *      </div>
 *    </div>
 */
.ay-card_noregister .ay-card .ay-avatar:before {
  color: #959595; }

/**
 * Class: .ay-card
 * @atom Card Button
 * @section Cards
 * @markup
 *   <div class="ay-card ay-card_canvas">
 *     <div class="ay-card__unfold">
 *       <span class="ay-avatar i-avatar">
 *         <small class="ay-is-visuallyhidden">Avatar</small>
 *       </span>
 *     </div>
 *     <div class="ay-card__twofold">
 *       <h3 class="ay-headline-3">María Ángela Benitez Parra</h3>
 *       <p class="ay-text">Adulto</p>
 *     </div>
 *     <div class="ay-card__fold">
 *       <button class="ay-card__btn ay-btn ay-btn_warning ay-btn_small" type="button">
 *         Eliminar
 *       </button>
 *     </div>
 *   </div>
 */
.ay-card__btn {
  margin: 0 auto;
  display: block; }
  .ay-card__btn.i-a-plus-square {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }

/**
 * Class: .ay-card [.ay-card__head | .ay-card__foot]
 * @atom Content Card
 * @section Cards
 * @markup
 *    <div class="ay-card">
 *      <header class="ay-card__head">
 *        <p class="ay-text"><strong class="ay-text_strong">Habitación: </strong>Estándar Doble (1 Adulto)</p>
 *        <p class="ay-text">Huéspedes que vas a registrar en esta habitación:</p>
 *      </header>
 *      <!-- Maincontent -->
 *      <div class="ay-card__main">
 *      <!-- Card con button -->
 *      <div class="ay-card ay-card_canvas">
 *        <div class="ay-card__unfold">
 *          <span class="ay-avatar i-avatar">
 *            <small class="ay-is-visuallyhidden">Avatar</small>
 *          </span>
 *        </div>
 *        <div class="ay-card__twofold">
 *          <h3 class="ay-headline-3">María Ángela Benitez Parra</h3>
 *          <p class="ay-text">Adulto</p>
 *        </div>
 *        <div class="ay-card__fold">
 *          <button class="ay-card__btn ay-btn ay-btn_warning ay-btn_small" type="button">
 *            Eliminar
 *          </button>
 *        </div>
 *      </div>
 *      </div>
 *      <footer class="ay-card__foot">
 *        <!-- Button -->
 *        <button class="ay-card__btn ay-btn ay-btn_default ay-btn_ico ay-btn_primary i-a-plus-square" type="button">
 *           <span class="ay-btn__text">Agregar siguiente huésped</span>
 *        </button>
 *      </footer>
 *    </div>
 */
.ay-card__head {
  padding-bottom: 30px; }

.ay-card__title {
  padding-bottom: 10px; }

/**
 * Class: .ay-card [.ay-card__head]
 * @atom Content Card + Button
 * @section Cards
 * @markup
 *    <div class="ay-card">
 *      <header class="ay-card__head">
 *        <p class="ay-text"><strong class="ay-text_strong">Habitación: </strong>Estándar Doble (1 Adulto)</p>
 *        <p class="ay-text">Huéspedes que vas a registrar en esta habitación:</p>
 *      </header>
 *      <!-- Maincontent -->
 *      <div class="ay-card__main">
 *        <!-- Button -->
 *        <button class="ay-card__btn ay-btn ay-btn_default ay-btn_ico ay-btn_primary i-a-plus-square" type="button">
 *           <span class="ay-btn__text">Agregar siguiente huésped</span>
 *        </button>
 *      </div>
 *    </div>
 */
.ay-card__foot {
  padding-bottom: 20px; }

/**
 * Class: .ay-card [.ay-card__head | .ay-card__main | .ay-card__foot]
 * @atom List Card
 * @section Cards
 * @markup
 *    <div class="ay-card">
 *      <!-- Header -->
 *      <header class="ay-card__head">
 *        <p class="ay-text"><strong class="ay-text_strong">Habitación: </strong>Estándar Doble (1 Adulto)</p>
 *        <p class="ay-text">Huéspedes que vas a registrar en esta habitación:</p>
 *      </header>
 *      <!-- Maincontent -->
 *      <div class="ay-card__main">
 *        <!-- Card Button -->
 *        <div class="ay-card ay-card_canvas">
 *          <div class="ay-card__unfold">
 *            <span class="ay-avatar i-avatar">
 *              <small class="ay-is-visuallyhidden">Avatar</small>
 *            </span>
 *          </div>
 *          <div class="ay-card__twofold">
 *            <h3 class="ay-headline-3">María Ángela Benitez Parra</h3>
 *            <p class="ay-text">Adulto</p>
 *          </div>
 *          <div class="ay-card__fold">
 *            <button class="ay-card__btn ay-btn ay-btn_warning ay-btn_small" type="button">
 *              Eliminar
 *            </button>
 *          </div>
 *        </div>
 *        <!-- Card Button -->
 *        <div class="ay-card ay-card_canvas">
 *          <div class="ay-card__unfold">
 *            <span class="ay-avatar i-avatar">
 *              <small class="ay-is-visuallyhidden">Avatar</small>
 *            </span>
 *          </div>
 *          <div class="ay-card__twofold">
 *            <h3 class="ay-headline-3">María Ángela Benitez Parra</h3>
 *           <p class="ay-text">Adulto</p>
 *         </div>
 *         <div class="ay-card__fold">
 *           <button class="ay-card__btn ay-btn ay-btn_warning ay-btn_small" type="button"> Eliminar
 *           </button>
 *         </div>
 *       </div>
 *       <!-- Card Button -->
 *       <div class="ay-card ay-card_canvas">
 *         <div class="ay-card__unfold">
 *           <span class="ay-avatar i-avatar">
 *             <small class="ay-is-visuallyhidden">Avatar</small>
 *           </span>
 *         </div>
 *         <div class="ay-card__twofold">
 *           <h3 class="ay-headline-3">María Ángela Benitez Parra</h3>
 *           <p class="ay-text">Adulto</p>
 *         </div>
 *         <div class="ay-card__fold">
 *           <button class="ay-card__btn ay-btn ay-btn_warning ay-btn_small" type="button">
 *             Eliminar
 *           </button>
 *         </div>
 *       </div>
 *       <!-- Card Button -->
 *       <div class="ay-card ay-card_canvas">
 *         <div class="ay-card__unfold">
 *           <span class="ay-avatar i-avatar">
 *             <small class="ay-is-visuallyhidden">Avatar</small>
 *           </span>
 *         </div>
 *         <div class="ay-card__twofold">
 *           <h3 class="ay-headline-3">María Ángela Benitez Parra</h3>
 *           <p class="ay-text">Adulto</p>
 *         </div>
 *         <div class="ay-card__fold">
 *           <button class="ay-card__btn ay-btn ay-btn_warning ay-btn_small" type="button">
 *             Eliminar
 *           </button>
 *         </div>
 *       </div>
 *     </div>
 *     <!-- footer -->
 *     <footer class="ay-card__foot">
 *       <!-- Button -->
 *       <button class="ay-card__btn ay-btn ay-btn_default ay-btn_ico ay-btn_primary i-a-plus-square" type="button">
 *         <span class="ay-btn__text">Agregar siguiente huésped</span>
 *       </button>
 *     </footer>
 *   </div>
*/
.ay-card__main {
  padding-bottom: 20px; }
  .ay-card__main .ay-card {
    margin-bottom: 20px; }

.ay-u-card_no-event .ay-block__gutter_bottom {
  cursor: auto;
  cursor: initial; }

@media only screen and (min-width: 480px) {
  .ay-card {
    min-width: 300px; }
  .ay-card__inner {
    padding: 20px 10px; } }

@media only screen and (min-width: 1024px) {
  .ay-card {
    min-width: 380px; } }

/*------------------------------------*\
  Transversal Blocks
  #Styles for search
*------------------------------------*/
/**
 * .ay-search, {Font-size: 20px, color: $c-on}
 * @atom Label
 * @section Formularios
 * @markup
 *   <form class="ay-search" action="#">
 *     <div class="ay-search__box">
 *       <label for="search" class="ay-search__label i-search">
 *         <small class="ay-is-visuallyhidden">Buscar personas</small>
 *       </label>
 *       <input class="ay-search__control" type="text" id="search" placeholder="Buscar personas">
 *     </div>
 *       <button class="ay-search__btn ay-btn ay-btn_primary" type="button">Buscar</button>
 *   </form>
 */
.ay-search {
  text-align: center; }

.ay-search__box {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  align-items: flex-end;
  border-bottom: 1px solid #575757;
  padding: 10px 0;
  margin-bottom: 20px; }

.ay-search__label {
  position: relative; }
  .ay-search__label:before {
    display: block;
    font-size: 22px;
    font-size: 1.375rem;
    color: #575757;
    padding: 0 10px;
    cursor: pointer; }

.ay-search__control {
  display: block;
  text-align: left;
  font-family: "akrobat-regular", Arial, sans-serif;
  font-size: 18px;
  font-size: 1.125rem; }
  .ay-search__control ::-ms-input-placeholder,
  .ay-search__control :-ms-input-placeholder {
    font-family: "akrobat-regular", Arial, sans-serif;
    font-size: 18px;
    font-size: 1.125rem; }
  .ay-search__control ::placeholder,
  .ay-search__control :-ms-input-placeholder {
    font-family: "akrobat-regular", Arial, sans-serif;
    font-size: 18px;
    font-size: 1.125rem; }

.ay-search__btn {
  display: inline-block;
  min-width: 200px;
  margin: 0 auto; }

@media only screen and (min-width: 768px) {
  .ay-search {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    align-items: flex-end; }
  .ay-search__box {
    -webkit-box-flex: 2;
    -webkit-flex: 2 auto;
    -moz-flex: 2 auto;
    -ms-flex: 2 auto;
    flex: 2 auto;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start;
    margin-bottom: 0; }
  .ay-search__control {
    width: 100%; }
  .ay-search__btn {
    margin: 0 30px auto; } }

/*------------------------------------*\
  Transversal Blocks
  #Styles counter
*------------------------------------*/
/**
 * Class: .ay-counter
 * @atom Contador
 * @section Contador
 * @description  { .ay-is-warning Estado de Alerta }
 * @markup
 *  <div class="sg-block">
 *   <div class="ay-counter">
 *     <strong class="ay-text ay-text_strong">Personas registradas</strong>
 *     <ul class="ay-counter__split">
 *       <li class="ay-counter__number">2</li>
 *       <li class="ay-counter__number">2</li>
 *     </ul>
 *   </div>
 *   </div>
 *   <div class="sg-block">
 *     <div class="ay-counter">
 *        <strong class="ay-text ay-text_strong">Personas registradas</strong>
 *        <ul class="ay-counter__split">
 *          <li class="ay-counter__number ay-is-warning">0</li>
 *          <li class="ay-counter__number ay-is-warning">1</li>
 *        </ul>
 *      </div>
 *   </div>
 */
.ay-counter {
  display: block;
  -webkit-border-radius: 5px;
          border-radius: 5px;
  background-color: #fff;
  -webkit-box-shadow: 2px -2px 15px 0px rgba(173, 173, 173, 0.24);
          box-shadow: 2px -2px 15px 0px rgba(173, 173, 173, 0.24);
  padding: 20px;
  text-align: center; }

.ay-counter__split {
  list-style: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center; }

.ay-counter__number {
  font-family: "akrobat-bold", Arial, sans-serif;
  font-size: 45px;
  font-size: 2.8125rem;
  color: #059F77;
  padding: 0 10px; }
  .ay-counter__number:first-child:after {
    content: '/';
    position: relative;
    display: inline-block;
    width: 10px;
    left: 5px;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%); }

@media screen and (min-width: 0\0) {
  .ay-counter__number:first-child:after {
    -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
            transform: translateY(0%);
    left: 7px; }
  /* IE11 */ }

/*------------------------------------*\
  Transversal Blocks
  #Styles steps
*------------------------------------*/
/**
 * Class: .ay-steps
 * @molecule Steps
 * @section C steps
 * @markup
 *   <ul class="ay-steps">
 *     <li class="ay-steps__node">
 *       <span class="ay-steps__txt">Datos personales</span>
 *     </li>
 *     <li class="ay-steps__node">
 *       <span class="ay-steps__txt">Asignación de Habitaciones</span>
 *     </li>
 *     <li class="ay-steps__node">
 *       <span class="ay-steps__txt">Confirmación</span>
 *     </li>
 *   </ul>
 */
.ay-steps {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  align-items: stretch;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  list-style: none;
  counter-reset: section;
  padding-bottom: 40px; }

.ay-steps__node {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  padding: 0 4px; }
  .ay-steps__node:before {
    content: counter(section);
    counter-increment: section;
    display: block;
    margin: 0 auto 20px;
    width: 40px;
    height: 40px;
    font-size: 30px;
    font-size: 1.875rem;
    font-family: "akrobat-bold", Arial, sans-serif;
    color: #469EC3;
    line-height: 1.2;
    z-index: 4;
    background-color: #fff;
    -webkit-border-radius: 50%;
            border-radius: 50%;
    border: 3px solid #469EC3; }

.ay-steps__node:not(:first-child):after {
  content: '';
  position: absolute;
  display: block;
  right: 50%;
  top: -webkit-calc(50% - 33px);
  top: calc(50% - 33px);
  width: 100%;
  height: 1px;
  z-index: -2;
  background-color: #469EC3; }

.ay-steps__txt {
  width: 100%;
  font-size: 16px;
  font-size: 1rem;
  color: #959595;
  font-family: "akrobat-light", Arial, sans-serif;
  text-align: center; }

/**
 * Class: .ay-steps .ay-steps_active
 * @molecule Steps Active
 * @section C steps
 * @modifiers
 *  .ay-steps_active  Estado Activo
 * @markup
 *   <ul class="ay-steps">
 *     <li class="ay-steps__node ay-steps_active">
 *       <span class="ay-steps__txt">Datos personales</span>
 *     </li>
 *     <li class="ay-steps__node">
 *       <span class="ay-steps__txt">Asignación de Habitaciones</span>
 *     </li>
 *     <li class="ay-steps__node">
 *       <span class="ay-steps__txt">Confirmación</span>
 *     </li>
 *   </ul>
 */
.ay-steps_active.ay-steps__node:before {
  color: #fff;
  background-color: #469EC3;
  -webkit-box-shadow: 0px 0px 0px 14px rgba(70, 158, 195, 0.15);
  box-shadow: 0px 0px 0px 14px rgba(70, 158, 195, 0.15); }

.ay-steps_active .ay-steps__txt {
  font-family: "akrobat-bold", Arial, sans-serif; }

/**
 * Class: .ay-steps .ay-steps_check
 * @molecule Steps Check
 * @section C steps
 * @modifiers
 *  .ay-steps_check  Estado Chequeado
 * @markup
 *   <ul class="ay-steps">
 *     <li class="ay-steps__node ay-steps_check">
 *       <span class="ay-steps__txt">Datos personales</span>
 *     </li>
 *     <li class="ay-steps__node ay-steps_active">
 *       <span class="ay-steps__txt">Asignación de Habitaciones</span>
 *     </li>
 *     <li class="ay-steps__node">
 *       <span class="ay-steps__txt">Confirmación</span>
 *     </li>
 *   </ul>
 */
.ay-steps_check.ay-steps__node:before {
  content: "";
  font-family: "decameron-ico" !important;
  font-style: normal;
  font-weight: normal;
  font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  font-size: 1rem;
  line-height: 2.4;
  color: #fff;
  background-color: #059F77;
  border: 3px solid #059F77; }

@media (min-width: 540px) {
  .ay-steps__node:before {
    width: 60px;
    height: 60px;
    font-size: 36px;
    font-size: 2.25rem;
    line-height: 1.6; }
  .ay-steps__node:not(:first-child):after {
    top: -webkit-calc(50% - 18px);
    top: calc(50% - 18px); }
  .ay-steps_check.ay-steps__node:before {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 2.8; } }

/*------------------------------------*\
    Transversal Elements
    #Styles for tables
\*------------------------------------*/
/**
  * Class: .ay-table
  * @molecule  Block: table
  * @section C14 data-table
  * @markup
  *  <table class="ay-table" sumary="Resumen del contenido de una tabla">
  *   <caption class="ay-legend ay-table__legend"> Historial de pagos pick up </caption>
  *   <thead class="ay-table__head">
  *    <tr class="ay-table__row">
  *      <th class="ay-table__head-cell" id="n-fee"> No. cuota </th>
  *      <th class="ay-table__head-cell" id="n-receipt"> No. recibo </th>
  *      <th class="ay-table__head-cell" id="date">Fecha a pagar</th>
  *      <th class="ay-table__head-cell" id="value">Valor cuota</th>
  *      <th class="ay-table__head-cell" id="balance">Saldo</th>
  *      <th class="ay-table__head-cell" id="balance">% de procesabilidad</th>
  *      <th class="ay-table__head-cell" id="capital">Capital</th>
  *      <th class="ay-table__head-cell" id="interest">Interés</th>
  *    </tr>
  *   </thead>
  *   <tbody class="ay-table__body">
  *      <tr class="ay-table__row ay-table__row_error">
  *          <td class="ay-table__cell" headers="n-fee"> <span class="ay-signal ay-signal_error">335</span> </td>
  *          <td class="ay-table__cell" headers="n-receipt"> T228843 </td>
  *          <td class="ay-table__cell" headers="date"> 03/Ago/2018 </td>
  *          <td class="ay-table__cell" headers="value"> $ 100,00 USD </td>
  *          <td class="ay-table__cell" headers="balance"> $ 100,00 USD </td>
  *          <td class="ay-table__cell" headers="percent"> 10.00 % </td>
  *          <td class="ay-table__cell" headers="capital"> $ 100,00 USD </td>
  *          <td class="ay-table__cell" headers="interest"> $ 0,00 USD </td>
  *      </tr>
  *      <tr class="ay-table__row">
  *          <td class="ay-table__cell" headers="n-fee"> <span class="ay-signal ay-signal_warning"> 3 </span> </td>
  *          <td class="ay-table__cell" headers="n-receipt"> T228845 </td>
  *          <td class="ay-table__cell" headers="date"> 01/Ago/2018 </td>
  *          <td class="ay-table__cell" headers="value"> $ 100,00 USD </td>
  *          <td class="ay-table__cell" headers="balance"> $ 100,00 USD </td>
  *          <td class="ay-table__cell" headers="percent"> 10.00 % </td>
  *          <td class="ay-table__cell" headers="capital"> $ 100,00 USD </td>
  *          <td class="ay-table__cell" headers="interest"> $ 0,00 USD </td>
  *      </tr>
  *      <tr class="ay-table__row">
  *          <td class="ay-table__cell" headers="n-fee"> <span class="ay-signal"> 2 </span> </td>
  *          <td class="ay-table__cell" headers="n-receipt"> T228845 </td>
  *          <td class="ay-table__cell" headers="date"> 01/Ago/2018 </td>
  *          <td class="ay-table__cell" headers="value"> $ 100,00 USD </td>
  *          <td class="ay-table__cell" headers="balance"> $ 100,00 USD </td>
  *          <td class="ay-table__cell" headers="percent"> 10.00 % </td>
  *          <td class="ay-table__cell" headers="capital"> $ 100,00 USD </td>
  *          <td class="ay-table__cell" headers="interest"> $ 0,00 USD </td>
  *      </tr>
  *      <tr class="ay-table__row">
  *          <td class="ay-table__cell" headers="n-fee"> <span class="ay-signal"> 1 </span> </td>
  *          <td class="ay-table__cell" headers="n-receipt"> T228845 </td>
  *          <td class="ay-table__cell" headers="date"> 01/Ago/2018 </td>
  *          <td class="ay-table__cell" headers="value"> $ 100,00 USD </td>
  *          <td class="ay-table__cell" headers="balance"> $ 100,00 USD </td>
  *          <td class="ay-table__cell" headers="percent"> 10.00 % </td>
  *          <td class="ay-table__cell" headers="capital"> $ 100,00 USD </td>
  *          <td class="ay-table__cell" headers="interest"> $ 0,00 USD </td>
  *      </tr>
  *   </tbody>
  *  </table>
  */
.ay-table {
  width: 100%; }

.ay-table__head-cell {
  padding: 10px;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-size: 0.875rem;
  font-family: "akrobat-bold", Arial, sans-serif;
  font-weight: normal;
  background: #469EC3; }
  .ay-table__head-cell:first-child {
    -webkit-border-radius: 5px 0 0 0;
            border-radius: 5px 0 0 0; }
  .ay-table__head-cell:last-child {
    -webkit-border-radius: 0 5px 0 0;
            border-radius: 0 5px 0 0; }

.ay-table__body {
  border: 1px solid #ececec; }

.ay-table__row:nth-of-type(2n+1) {
  background-color: #F8FCFD; }
  .ay-table__row:nth-of-type(2n+1).ay-table__row_error {
    background-color: rgba(208, 2, 27, 0.15); }

.ay-table__row_error {
  background-color: rgba(208, 2, 27, 0.15); }
  .ay-table__row_error .ay-signal:before {
    background-color: #D0021B; }

.ay-table__cell {
  padding: 10px;
  text-align: center;
  vertical-align: middle;
  color: #575757;
  font-family: "akrobat-regular", Arial, sans-serif;
  font-size: 12px;
  font-size: 0.75rem; }

/**
  * Class: .ay-signal | Block: table | C14 data-table
  * @atom  Semáforo de estados
  * @section Estados
  * @modifiers
  *  .ay-signal_error Cambia el color de fondo del estado
  *  .ay-signal_warning Cambia el color de fondo del estado
  * @markup
  *   <p class="sg-block">
  *     <span class="ay-signal"> 2 </span>
  *   </p>
  *   <p class="sg-block">
  *     <span class="ay-signal ay-signal_error">1</span>
  *   </p>
  *   <p class="sg-block">
  *     <span class="ay-signal ay-signal_warning">3</span>
  *   </p>
  */
.ay-signal {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  width: 80%;
  margin: 0 auto; }
  .ay-signal:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 12px;
    height: 12px;
    margin-right: 12px;
    -webkit-border-radius: 50%;
            border-radius: 50%;
    background-color: #059F77; }

.ay-signal_error:before {
  background-color: #D0021B; }

.ay-signal_warning:before {
  background-color: #FBB14B; }

/*------------------------------------*\
  Transversal Block
  #Styles for Modals
\*------------------------------------*/
.ay-modal {
  position: fixed;
  left: 40%;
  top: 20%;
  transform: translate(-34%, -20%);
  max-width: 80%;
  max-height: 80%;
  border: 1px solid #E0E0E0;
  background-color: #fff;
  z-index: 4;
  overflow: auto }

@media (max-width: 1024px) {
  .ay-modal {
    position: absolute;
    top: 40%;
    left: 50%;
    display:block;
    width: 100%;
    max-width: 90%;
    height: auto;
    max-height: 90%;
    border: 1px solid #E0E0E0;
    background-color: #fff;
    z-index: 9;
    overflow-y: scroll;
    margin: 0 auto;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-box-shadow: 2px 2px 8px 3px rgba(173, 173, 173, 0.24);
    box-shadow: 2px 2px 8px 3px rgba(173, 173, 173, 0.24); }
}

.ay-modal_canvas {
  width: 92%;
  margin: 0 auto; }

.ay-modal_top {
  padding-top: 30px; }

.ay-modal__inner {
  padding: 0 20px; }

.ay-modal_inner-back {
  padding: 40px 0 160px; }
  .ay-modal_inner-back .ay-text {
    padding-bottom: 10px; }

.ay-modal__head {
  text-align: center;
  position: relative;
  top: 40%;
  text-align: center; }
  .ay-modal__head .ay-headline-2 {
    color: #D0021B; }

.ay-modal__box {
  position: relative;
  top: 40%;
  max-width: 80%;
  margin: 0 auto;
  padding: 30px;
  text-align: center;
  -webkit-transform: translateY(-40%);
      -ms-transform: translateY(-40%);
          transform: translateY(-40%); }
  .ay-modal__box:before {
    display: inline-block;
    color: #D0021B;
    font-size: 40px;
    font-size: 2.5rem;
    text-align: center;
    padding-bottom: 30px; }
  .ay-modal__box .ay-headline {
    line-height: 1; }
    .ay-modal__box .ay-headline:after {
      content: '';
      display: inline-block;
      width: 100%;
      height: 1px;
      line-height: .8;
      background-color: #E0E0E0; }
  .ay-modal__box .ay-text {
    padding-bottom: 40px; }

.ay-modal__mask {
  display: block;
  width: 100%;
  overflow: hidden; }

.ay-modal__img {
  display: block;
  width: 100%; }

.ay-modal_center {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center; }

.ay-modal__row {
  padding: 20px 0 30px; }

@media only screen and (min-width: 768px) {
  .ay-modal_canvas {
    width: 90%;
    max-width: 995px; }
  .ay-modal__img_small {
    max-width: 95%;
    margin: 0 auto; } }

/*------------------------------------*\
  Transversal Blocks
  #Styles Loader
*------------------------------------*/
/**
 * @atom Spinning Wheel
 * @section Loaders
 *
 * @markup
 *  <div class="ay-spinner">
 *    <span class="ay-spinner__block"></span>
 *    <p class="ay-spinner__text">Gracias por esperar estamos cargando la información</p>
 *  </div>
 */
.ay-spinner {
  position: fixed;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100vh; }

.SG-component .ay-spinner {
  position: relative;
  height: 100%; }

.ay-spinner__block,
.ay-spinner__block:after {
  display: block;
  width: 60px;
  height: 60px;
  -webkit-border-radius: 50%;
          border-radius: 50%; }

.ay-spinner__block {
  background-color: transparent;
  border-top: 5px solid #00a9e3;
  border-right: 5px solid #00a9e3;
  border-bottom: 5px solid #00a9e3;
  border-left: 5px solid rgba(0, 169, 227, 0.2);
  -webkit-animation: lds-ring 1s infinite linear;
          animation: lds-ring 1s infinite linear; }

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

@-webkit-keyframes lds-ring {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes lds-ring {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

.ay-form__datecontrol .vdp-datepicker__calendar {
  -webkit-border-radius: 5px;
          border-radius: 5px;
  border-color: #959595; }
  .ay-form__datecontrol .vdp-datepicker__calendar .cell {
    -webkit-border-radius: 5px;
            border-radius: 5px; }
    .ay-form__datecontrol .vdp-datepicker__calendar .cell.selected {
      background-color: #469EC3;
      color: #fff; }
  .ay-form__datecontrol .vdp-datepicker__calendar .prev::after {
    border-right-color: #469EC3; }
  .ay-form__datecontrol .vdp-datepicker__calendar .next::after {
    border-left-color: #469EC3; }

/*------------------------------------*\
  Component
  #Styles for toggle
\*------------------------------------*/
/**
 * Class: .ay-c-toggle
 * @molecule Toggle
 * @section C Toggle
 * @markup
 *   <div class="ay-c-toggle ay-card">
 *     <!-- Toggle Head -->
 *     <div class="ay-c-toggle__head i-arrow-down">
 *       <h3 class="ay-headline-2">María Ángela Benitez Parra</h3>
 *       <p class="ay-text">Adulto</p>
 *     </div>
 *     <!-- Toggle Canvas -->
 *     <div class="ay-c-toggle__canvas ay-is-hidden">
 *       <form action="#" class="ay-form">
 *         <!-- Input Nombre -->
 *         <div class="ay-form__item">
 *           <label class="ay-form__label" for="nombres">Nombres<sup class="ay-form__label_require">*</sup></label>
 *           <input class="ay-form__control" placeholder="placeholder" type="text" id="nombres">
 *           <small class="ay-text_error"></small>
 *         </div>
 *         <!-- Input Apellidos -->
 *         <div class="ay-form__item">
 *           <label class="ay-form__label" for="apellidos">Apellidos<sup class="ay-form__label_require">*</sup></label>
 *           <input class="ay-form__control" placeholder="placeholder" type="text" id="apellidos">
 *           <small class="ay-text_error"></small>
 *         </div>
 *         <footer class="ay-form__foot">
 *           <button class="ay-btn ay-btn_default ay-btn_ico ay-btn_primary i-a-arrow-right" type="submit"><span class="ay-btn__text">Completar siguiente
 *             huésped</span></button>
 *         </footer>
 *       </form>
 *     </div>
 *   </div>
 */
.ay-c-toggle {
  padding: 20px 30px;
  margin-bottom: 20px; }
  .ay-c-toggle .i-arrow-up {
    padding-bottom: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid #959595; }

/**
 * Class: .ay-c-toggle [i-arrow-up]
 * @molecule Toggle
 * @section C Toggle
 * @modifiers
 *  .ay-c-toggle  Estado desplegado se remueve la clase de estado: ay-is-hiddeninclude
 * @markup
 *   <div class="ay-c-toggle ay-card">
 *     <!-- Toggle Head -->
 *     <div class="ay-c-toggle__head i-arrow-up">
 *       <h3 class="ay-headline-2">María Ángela Benitez Parra</h3>
 *       <p class="ay-text">Adulto</p>
 *     </div>
 *     <!-- Toggle Canvas -->
 *     <div class="ay-c-toggle__canvas">
 *       <form action="#" class="ay-form">
 *         <!-- Input Nombre -->
 *         <div class="ay-form__item">
 *           <label class="ay-form__label" for="nombres">Nombres<sup class="ay-form__label_require">*</sup></label>
 *           <input class="ay-form__control" placeholder="Adulto" type="text" id="nombres">
 *           <small class="ay-text_error"></small>
 *         </div>
 *         <!-- Input Apellidos -->
 *         <div class="ay-form__item">
 *           <label class="ay-form__label" for="apellidos">Apellidos<sup class="ay-form__label_require">*</sup></label>
 *           <input class="ay-form__control" type="text" id="apellidos">
 *           <small class="ay-text_error"></small>
 *         </div>
 *         <div class="ay-form__item">
 *         <!-- Radiobuttons Group -->
 *           <label class="ay-form__label" for="radio-custom">Género<sup class="ay-form__label_require">*</sup></label>
 *            <div class="ay-form__inline-row">
 *              <!-- Radiobutton #1 -->
 *              <div class="ay-form__radiobox">
 *                <input class="ay-form__input-no-appearance" type="radio" name="radio-custom" value="radio-custom" id="radio-custom">
 *                <label class="ay-form__radio" for="radio-custom">
 *                <span class="ay-form__radio-label"> Masculino </span>
 *                </label>
 *              </div>
 *              <!-- Radiobutton #2 -->
 *              <div class="ay-form__radiobox">
 *                <input class="ay-form__input-no-appearance" type="radio" name="radio-custom" value="radio-custom" id="radio-custom2" checked>
 *                <label class="ay-form__radio" for="radio-custom2">
 *                  <span class="ay-form__radio-label"> Femenino </span>
 *                </label>
 *              </div>
 *            </div>
 *           <small class="ay-text_error"></small>
 *         </div>
 *         <!-- Input Tipo de documento -->
 *        <div class="ay-form__item">
 *          <label class="ay-form__label" for="type">Tipo de documento<sup class="ay-form__label_require">*</sup></label>
 *          <input class="ay-form__control" placeholder="Adulto" type="text" id="type">
 *          <small class="ay-text_error"></small>
 *        </div>
 *        <!-- Input Número de identificación -->
 *        <div class="ay-form__item">
 *          <label class="ay-form__label" for="typeNumber">Número de identificación<sup class="ay-form__label_require">*</sup></label>
 *          <input class="ay-form__control" type="text" id="typeNumber">
 *          <small class="ay-text_error"></small>
 *         </div>
 *         <!-- Datepicker -->
 *         <div class="ay-form__item">
 *           <label for="date" class="ay-form__label">Fecha de Nacimiento</label>
 *           <div class="ay-form__icon-bg i-data">
 *             <input id="date" type="date" class="ay-form__datecontrol">
 *           </div>
 *           <span class="ay-text_error"></span>
 *         </div>
 *         <!-- Input Correo Electrónico -->
 *         <div class="ay-form__item">
 *           <label class="ay-form__label" for="email">Correo electrónico</label>
 *           <input class="ay-form__control" type="text" id="email">
 *           <small class="ay-text_error"></small>
 *         </div>
 *         <!-- Input Teléfono -->
 *         <div class="ay-form__item">
 *           <label class="ay-form__label" for="telefono">Teléfono o celular</label>
 *           <input class="ay-form__control" type="text" id="telefono">
 *           <small class="ay-text_error"></small>
 *         </div>
 *         <!-- Input Nacionalidad -->
 *         <div class="ay-form__item">
 *           <label class="ay-form__label" for="nacionalidad">Nacionalidad<sup class="ay-form__label_require">*</sup></label>
 *           <input class="ay-form__control" type="text" id="nacionalidad">
 *           <small class="ay-text_error"></small>
 *         </div>
 *         <!-- Input Ciudad -->
 *         <div class="ay-form__item">
 *           <label class="ay-form__label" for="ciudad">Ciudad de procedencia</label>
 *           <input class="ay-form__control" type="text" id="ciudad">
 *           <small class="ay-text_error"></small>
 *         </div>
 *         <!-- Select Ocupación -->
 *         <div class="ay-form__item">
 *           <label class="ay-form__label" for="ocupacion">Ocupación</label>
 *           <div class="ay-form__control_toggle i-arrow-down">
 *             <select class="ay-form__select-no-appearance" id="ocupacion" name="select">
 *               <option value="cedula" selected>Seleccione una ocupación</option>
 *               <option value="ocupacion1">Ocupación 1</option>
 *               <option value="ocupacion2">Ocupación 2</option>
 *               <option value="ocupacion3">Ocupación 3</option>
 *             </select>
 *           </div>
 *           <small class="ay-text_error"></small>
 *         </div>
 *         <!-- Select Discapacidad -->
 *         <div class="ay-form__item">
 *           <label class="ay-form__label" for="discapacidad">Condición de Discapacidad</label>
 *           <div class="ay-form__control_toggle i-arrow-down">
 *             <select class="ay-form__select-no-appearance" id="discapacidad" name="select">
 *               <option value="cedula" selected>Seleccione una discapacidad</option>
 *               <option value="discapacidad1">Discapacidad 1</option>
 *               <option value="discapacidad2">Discapacidad 2</option>
 *               <option value="discapacidad3">Discapacidad 3</option>
 *             </select>
 *           </div>
 *           <small class="ay-text_error"></small>
 *         </div>
 *         <!-- Foot form -->
 *         <footer class="ay-form__foot">
 *           <button class="ay-btn ay-btn_default ay-btn_ico ay-btn_primary i-a-arrow-right" type="submit"><span class="ay-btn__text">Completar siguiente
 *             huésped</span></button>
 *         </footer>
 *       </form>
 *     </div>
 *   </div>
 */
.ay-c-toggle__head {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  height: auto;
  align-items: center;
  cursor: pointer; }
  .ay-c-toggle__head:before {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
    -webkit-box-flex: 1;
    -webkit-flex: 1 10%;
    -moz-flex: 1 10%;
    -ms-flex: 1 10%;
    flex: 1 10%;
    position: relative;
    /* top: 50%; */
    -webkit-transform: translateY(50%);
        -ms-transform: translateY(50%);
            transform: translateY(50%);
    margin: auto;
    text-align: right;
    line-height: 1;
    font-size: 12px;
    font-size: 0.75rem;
    color: #059F77; }
  .ay-c-toggle__head .ay-headline-2,
  .ay-c-toggle__head .ay-text {
    -webkit-box-flex: 1;
    -webkit-flex: 1 50%;
    -moz-flex: 1 50%;
    -ms-flex: 1 50%;
    flex: 1 50%;
    padding-right: 10px; }
  .ay-c-toggle__head .ay-headline-2 {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -moz-order: 1;
    -ms-flex-order: 1;
    order: 1; }
  .ay-c-toggle__head .ay-text {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    -moz-order: 3;
    -ms-flex-order: 3;
    order: 3; }

.ay-is-toggle_error .ay-headline-2,
.ay-is-toggle_error .ay-text, .ay-is-toggle_error:before {
  color: #D0021B; }

@media only screen and (min-width: 480px) {
  .ay-headline-2,
  .ay-text {
    padding-right: 0; } }

/*------------------------------------*\
    #Print styles
\*------------------------------------*/
@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    text-shadow: none !important; }
  a,
  a:visited {
    text-decoration: underline; }
  a[href]:after {
    content: " (" attr(href) ")"; }
  abbr[title]:after {
    content: " (" attr(title) ")"; }
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: ""; }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }
  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; } }

/*------------------------------------*\
  Transversal Patterns
  #Styles to describe particular states
*------------------------------------*/
.ay-is-visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.ay-is-warning {
  color: #DD3247; }

.ay-is-alert {
  border-color: #DD3247; }

.ay-is-hidden {
  display: none; }

.ay-u-center {
  text-align: center; }