/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
  height: 170px;
  width: 100%; }

/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0; }

html {
  font-size: 62.5%;
  letter-spacing: 0.068rem; }

body {
  background: #1B0043 url("../img/background.svg") no-repeat bottom;
  font-family: 'Raleway', sans-serif;
  font-size: 1.6rem;
  background-size: cover; }

.all-done {
  display: none; }

.container {
  color: #FFFFFF;
  max-width: 360px; }
  .container a {
    color: #64CDF2; }
  .container a:hover {
    color: #0283cd; }
  .container h1 {
    font-size: 2.2rem;
    line-height: 2.8rem;
    font-weight: 500;
    letter-spacing: 0.068rem;
    margin: 0; }
    .container h1.title {
      margin-bottom: 35px; }
    .container h1 a {
      font-weight: bolder;
      color: #FFFFFF; }
  .container .form-wrap h1 {
    font-size: 3rem;
    line-height: 3.9rem; }
  .container .no-results h1 {
    margin-bottom: 30px;
    font-size: 3rem; }
  .container .no-results p {
    font-size: 2.2rem;
    margin-bottom: 30px; }
  .container h2 {
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.8rem;
    text-transform: uppercase;
    color: #5F5F87;
    font-weight: 800; }
  .container button#breakfast, .container button#cumberland {
    margin-top: 1.6rem; }
  .container .form-wrap, .container .results-wrap {
    height: 90vh;
    position: relative;
    width: 100%; }
  .container .form-wrap-inner {
    position: absolute;
    top: 35%;
    transform: translateY(-35%);
    width: 100%;
    text-align: center; }
  .container .results-wrap-inner {
    position: absolute;
    top: 32%;
    transform: translateY(-32%);
    width: 100%; }
  .container .btn {
    height: 4.5rem;
    width: 16rem;
    color: #07B1C8;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    line-height: 1.8rem;
    text-align: center;
    border-radius: 2rem;
    border: 0;
    background-color: #FFFFFF;
    box-shadow: inset -2px -3px 0 0 rgba(0, 0, 0, 0.16), 2px 2px 0 0 rgba(0, 0, 0, 0.16);
    margin-top: 2.8rem;
    transition: 0.25s;
    -webkit-transition-property: background-color; }
    .container .btn.btn-primary {
      color: #FFFFFF;
      background: #FF4A7F;
      border: 0;
      margin-top: 30px; }
    .container .btn.btn-primary:hover {
      background: #f02d66; }
    .container .btn span {
      display: inline-block;
      position: relative;
      transition: 0.25s; }
    .container .btn:hover {
      transition: 0.25s;
      background-color: #07B1C8;
      color: #FFFFFF;
      -webkit-transition-property: background-color; }
    .container .btn.active {
      transition: all 0.25s;
      background-color: #07B1C8;
      box-shadow: inset 2px 3px 0 0 rgba(0, 0, 0, 0.16), 0 2px 6px 0 rgba(0, 0, 0, 0.16);
      color: #FFFFFF; }
      .container .btn.active span {
        left: -8px; }
      .container .btn.active span:after {
        font-family: 'FontAwesome';
        content: '\f00c';
        position: absolute;
        top: 0;
        right: -20px;
        transition: 0.5s; }
    .container .btn .photo {
      padding-left: 20px;
      padding-right: 20px; }
  .container .who {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 330px;
    font-size: 1.4rem; }
    .container .who a:hover {
      text-decoration: none; }
  .container #photo {
    width: 110px;
    height: 110px;
    background-size: cover;
    border-radius: 100%;
    background-color: #5F5F87;
    border: 4px #5F5F87 solid;
    margin-left: -20px; }
  .container .stars-outer {
    display: inline-block;
    position: relative;
    font-family: FontAwesome;
    font-size: 2.7rem;
    color: #FFCF12; }
    .container .stars-outer::before {
      content: "\f006 \0020 \f006 \0020 \f006 \0020 \f006 \0020 \f006"; }
  .container .stars-inner {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    overflow: hidden;
    width: 0; }
    .container .stars-inner::before {
      content: "\f005 \0020 \f005 \0020 \f005 \0020 \f005 \0020 \f005";
      color: #FFCF12; }
  .container .go-back-wrap {
    margin-top: 15px;
    color: #64CDF2;
    font-size: 1.4rem; }
  .container #details-link {
    color: #64CDF2;
    font-size: 1.4rem; }

.results #title {
  max-height: 28px;
  overflow: hidden; }
.results .results-info {
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 12px;
  margin-bottom: 18px; }

.no-results {
  display: none; }

@media (min-width: 992px) {
  .container h1.title {
    margin-bottom: 50px; } }

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