#loca-finder { margin-bottom: 10em; }

/*
   Llamame
   ========================================================================== */

#llamame {
  cursor:pointer;
  min-width: 210px;
  width: 100%;
  box-shadow: 0 0 5px 1px #999;
  position: relative;
}

#llamame-head {
  color: #eb690a;
  font-size: 1.125em;
  text-align: center;
  background-color: #fff;
  margin: 0;
  padding: 4px 0;
}

#llamame-body {
  color: #fff;
  font-size: 0.75em;
  background-color: #e66611;
  padding: 1em 4px 0 4px;
  margin: 0;
  min-width: 139px;
  height: 77px;
}

#llamame-img {
  float: right;
  background-color: #e6e6e6;
  width: 59px;
  padding-top: 3px;
}

#llamame-hide {
  color: #fff;
  font-size: 2em;
  line-height: 1;
  background-color: #00b0ef;
  display: none;
  padding: 0 4px;
  position: absolute;
  bottom: -32px;
  right: 0;
  box-shadow: 0 8px 20px 6px #666;
}

#llamame.isSticky {
  box-shadow: 0 8px 20px 6px #666;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

.isSticky #llamame-hide { display: block; }

/*
   TOC - Table of contents
   ========================================================================== */

/*Tabla de contenidos con acceso directo para navegación*/
.loca-toc {
  color: #fff;
  list-style-type: none;
  list-style-position: inside;
  margin: 0;
  padding: 0;
}

.loca-toc li {
  margin-bottom: 1em;
}

.loca-toc__item {
  color: #fff;
  font-family: FuturaHeavy, sans-serif;
  font-weight: 800;
  text-align: left;
  text-decoration: none;
  background: #01c7f8 url("../images/ui/indentedbg.png") repeat-x 0px 0px;
  display: block;
  padding: 0.5em;
  border: 0;
  margin: 0;
  border-radius: 0;
  position: relative;

  -webkit-appearance: none;
     -moz-appearance: none;

  -webkit-transition: background-color 0.3s ease 0s;
     -moz-transition: background-color 0.3s ease 0s;
      -ms-transition: background-color 0.3s ease 0s;
       -o-transition: background-color 0.3s ease 0s;
          transition: background-color 0.3s ease 0s;
}

.loca-toc__item:link,
.loca-toc__item:visited {
  color: #fff;
  background: #01c7f8 url("../images/ui/indentedbg.png") repeat-x 0px 0px;
}
.loca-toc__item:focus,
.loca-toc__item:hover {
  color: #fff;
  background: #eb690a url("../images/ui/indentedbg.png") repeat-x 0px 100%;
}
.loca-toc__item:active {
  color: #fff;
  background-color: #ffa63f;
}

.loca-toc__item img {
    width: 32px;
    height: 32px;
    position: absolute;
    right: 0.5em;
    top: 0.3em;
}

.loca-toc__title {
    display: none;
    padding: 8px;
}

/*#toc { background-color: #fff; }

#toc.isSticky {
  width: 100%;
  height: 46px;
  overflow: hidden;
  position: fixed;
  top: 52px;
  left: 0;
  z-index: 10;
  box-shadow: 0 8px 20px 6px #666;
}

.isSticky .loca-toc__title { display: block; }
#toc.isSticky:hover {
  height: auto;
  transition: height 0.25s ease-in-out;
}*/

/*
   Notificaciones; mensajes que piden al usuario tomar una acción
   ========================================================================== */

.loca-notification {
  color: #333;
  background-color: #f1f1f1;
  border: 1px solid #ddd;
  padding: 0 8px 8px 8px;
  margin-bottom: 1.5em;
  position: relative;
}

.loca-notification:before,
.loca-notification:after {
    content: " ";
    display: table;
}
.loca-notification:after {
    clear: both;
}

.loca-notification-topbar {
  background-color: #f17300;
  width: auto;
  height: 20px;
  margin: -1px -9px 8px -9px;
}
.loca-notification p,
.loca-notification form { margin: 0; }


.loca-notification-icon { float: left; margin: 0 8px 8px 0; }

.loca-notification-action {
  text-align: right;
  font-family: FuturaHeavy;
  font-weight: bold;
}

.loca-notification-action .btn { margin: 0; padding: 8px 2em; }

/*
   Main: Cuerpo principal
   ========================================================================== */

/*Cuerpo principal donde se contiene la información de la reserva*/
#main-reserva {
  color: #666;
  background-color: #f6f6f6;
}

.loca-reserva-img img { width: 100%; }

/*
Para agregar margen/espacio alrededor del contenido de las secciones en la
información de la reserva.
1) Agregar el espaciado para el contenido
2) Extender laterales para dividir las seccointes removiendo el espaciado.
El margin-top es para cuando una sección termina con un elemento que no tiene
margin-bottom. Así el margin-top hace el espacio y en caso de que el elemnto que
le preceda sí tenga margin bottom, va a colpasar con este.
*/

/*1*/
#main-reserva { padding: 8px; }
/*2*/
.loca-section-title {
  margin-top: 8px;
  margin-left: -8px;
  margin-right: -8px;
}

.loca-section-title {
  color: #eb690a;
  background-color: #eee;
  padding: 0.25em;
}

.comentario {
  background-color: #f1f1f1;
  padding: 4px;
  margin-bottom: 1.5em;
}

table {
  margin: 0 auto 1.5em auto;
  border: 1px solid #efefef;
  text-align:left;
}

th {
  background-color: #efefef;
  font-weight: bold;
  border-bottom:0;
  padding: 4px 6px;
}

td {
  padding: 6px;
  border: 1px solid #efefef;
}

/* ==========================================================================
   Media Queries for Responsive Design.
   These override the primary ('mobile first') styles.
   ========================================================================== */

/*@media only screen and (width: 320px) {
  .isSticky #llamame-img { display: none; }
}

@media only screen and (width: 384px) {
  .isSticky #llamame-img { display: none; }
}
*/
/*
  Small screens
*/
@media only screen and (max-width: 40em) {
  /* max-width 640px, mobile-only styles, use when QAing mobile issues */

  /*Puesto aquí para que no se herede cuando sea en pantallas medianas.
  Por eso no está arriba.*/
  .isSticky #llamame-head {
      color: #fff;
      background-color: #e66611;
      text-align: left; /*temp*/
  }
  .isSticky #llamame-body {
    /*text-align: center;*/
    text-align: left;
    height: auto;
    /*padding: 4px 0;*/
    padding: 4px 54px 4px 4px; /*temp*/
  }

  .isSticky #llamame-img {
    display: block;
    /*width: 39px;*/
    width: 54px; /*temp*/
    position: absolute;
    right: 0;
    top: 0;
  }
}

/*
  Medium screens
*/
@media only screen and (min-width: 40.063em) {
  /* min-width 641px, medium screens */

  /*
  	Localiza tu reserva
  */
  .loca-hero-bg {
    background-image: url(../images/ui/herovc2.jpg);
    background-repeat: no-repeat;
    background-position: top left;
    height: 221px;
  }

  .loca-hero-inner {
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2)
  }

	/*!important porque en foundation hay una regla con mayor especificidad.*/
	.loca-input-row { margin-top: 3em !important; }

  /*override foundation*/
  button.loca-toc__item {
    display: block;
  }


  #llamame.isSticky {
    box-shadow: 0 0 5px 1px #999;
    width: 220px;
    position: fixed;
    top: 30px;
    left: auto;
  }

  #llamame-body {
    padding: 4px;
  }

  .isSticky #llamame-hide { display: none; }
}
#flymoney {
	float: left;
	position: relative;
	min-height: 200px;
	margin-right: 10px;
	overflow: hidden;
	margin-top: 22px;
}
