@charset "UTF-8";
/* COLORS */
.tan {
  color: #efece8;
}

.blue {
  color: #182f35;
}

.blue {
  color: #182f35;
}

.red {
  color: #ec3b24;
}

.green {
  color: #39b54a;
}

.yellow {
  color: #fbb03b;
}

.bronze {
  color: #8e7a5a;
}

.gray {
  color: #d6d6d6;
}

.white {
  color: white;
}

/**
 * @license
 * MyFonts Webfont Build ID 3867246, 2020-12-16T11:57:38-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: HelveticaLTWXX-Roman by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/helvetica/pro-regular/
 * Copyright: Copyright © 2014 Monotype Imaging Inc. All rights reserved.
 * 
 * 
 * 
 * © 2020 MyFonts Inc*/
@font-face {
  font-family: "CreativeVintage";
  src: url("./fonts/CreativeVintageRegular/font.woff2") format("woff2"), url("./fonts/CreativeVintageRegular/font.woff") format("woff");
}
* {
  box-sizing: border-box;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  font-size: 62.5%;
  font-family: "futura-pt";
  font-weight: normal;
}

body {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
p,
blockquote,
figure,
ol,
ul {
  margin: 0;
  padding: 0;
}

section,
main,
li {
  display: block;
}

h1,
h2,
h3,
h4 {
  font-size: inherit;
  font-weight: normal;
}

p {
  font-family: "linotype-sabon";
  font-weight: normal;
}

a,
button {
  color: inherit;
  transition: 0.3s;
}

a {
  text-decoration: none;
}
a:hover, a:focus {
  text-decoration: none;
}

button {
  overflow: visible;
  border: 0;
  font: inherit;
  -webkit-font-smoothing: inherit;
  letter-spacing: inherit;
  background: none;
  cursor: pointer;
}

::-moz-focus-inner {
  padding: 0;
  border: 0;
}

:focus {
  outline: 0;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

main {
  position: relative;
  background: white;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}
.fixed {
  position: fixed;
  overflow: hidden;
}

.body-fixed {
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
@media (min-width: 641px) {
  .body-fixed {
    position: relative;
  }
}

.fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.cover {
  -o-object-fit: cover;
     object-fit: cover;
  max-width: none;
  display: flex;
  height: 100%;
  width: 100%;
}

.container, .video-container {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1024px) {
  .container, .video-container {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
  }
}

.label.style-one {
  padding: 8px 12px;
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 700;
  color: white;
}
.label.style-one.small {
  font-size: 1.2rem;
}
.label.style-two {
  font-family: "linotype-sabon";
  font-size: 1.1rem;
  font-weight: 700;
}

.breadcrumbs {
  padding: 1.25vh 2.5vw;
  color: #ec3b24;
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
}
.breadcrumbs a {
  font-size: 1.4rem;
  font-weight: 700;
  font-family: "futura-pt";
  color: #ec3b24;
  transition: 0.3s;
}
.breadcrumbs a:hover {
  color: #182f35;
}
.breadcrumbs span {
  padding: 0 3px;
}

.bg-green {
  background-color: #39b54a;
}

.bg-red {
  background-color: #ec3b24;
}

.bg-gray {
  background-color: #d6d6d6;
}

.bg-texture-green {
  background-color: #39b54a;
  border: 4px solid transparent;
  border-image-source: url(https://traveldubuque.com/images/travel-dubuque/global/background-green.svg);
  border-image-slice: 3;
  border-image-outset: 3px;
  padding: 0 5px;
}

.bg-texture-red {
  background-color: #ec3b24;
  border: 4px solid transparent;
  border-image-source: url(https://traveldubuque.com/images/travel-dubuque/global/background-red.svg);
  border-image-slice: 3;
  border-image-outset: 3px;
  padding: 0 5px;
}

.bg-unknown {
  color: #808080;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  padding: 9px 9px;
}

.rough-top:before {
  content: "";
  background-image: url(https://traveldubuque.com/images/travel-dubuque/global/roughen.svg);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
}

.rough-bottom:after {
  content: "";
  background-image: url(https://traveldubuque.com/images/travel-dubuque/global/roughen.svg);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  transform: rotate(180deg);
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
  /* The slider */
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
}
.switch .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
}
.switch input:checked + .slider {
  background-color: #ec3b24;
}
.switch input:focus + .slider {
  box-shadow: 0 0 1px #ec3b24;
}
.switch input:checked + .slider:before {
  transform: translateX(16px);
}
.switch .slider.round {
  border-radius: 24px;
}
.switch .slider.round:before {
  border-radius: 50%;
}

.cr__gallery .loadMore {
  width: auto !important;
  margin: 10px auto auto auto !important;
  display: block !important;
  height: 50px !important;
  line-height: 50px !important;
  padding: 0 50px !important;
  background: none !important;
}
.cr__gallery .loadMore:hover:after {
  background: none !important;
}
.cr__gallery .loadMore span {
  font-family: "futura-pt" !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #ec3b24;
}
.cr__gallery .loadMore span:hover {
  color: rgb(226.8214285714, 43.5, 19.6785714286);
}

[v-cloak] {
  display: none;
}

.v-lazy-image {
  opacity: 0.5;
  transition: opacity 1.3s;
}

.v-lazy-image-loaded {
  opacity: 1;
}

.add-it {
  position: absolute;
  top: 45vw;
  right: 20px;
  background: #ec3b24;
  color: white;
  font-weight: 700;
  font-size: 1.6em;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
  transform: translateY(-50%);
  transition: 0.3s;
  cursor: pointer;
}
@media (min-width: 640px) {
  .add-it {
    transform: translateX(20px);
    right: initial;
    top: 60px;
    margin-top: 0;
  }
}
.add-it:hover {
  background: rgb(226.8214285714, 43.5, 19.6785714286);
}
.add-it:hover .heart {
  transform: scale(1.1);
}
.add-it .heart {
  position: relative;
  top: initial;
  width: 60px;
  height: 60px;
}
.add-it .line {
  width: 1px;
  height: 20px;
  display: block;
  background: white;
  margin: auto;
}
.add-it .add-text {
  width: 100px;
  text-align: center;
}

.loader-contain {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px 0;
}
.loading .loader-contain {
  display: flex;
}

.loading-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ec3b24;
}

.loader-inner {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader-icon {
  margin: 0 auto 0;
  width: 100px;
  text-align: center;
}

.loader-icon > div {
  width: 10px;
  height: 10px;
  background-color: #ec3b24;
  border-radius: 100%;
  display: inline-block;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.loader-icon .bounce1 {
  animation-delay: -0.32s;
}

.loader-icon .bounce2 {
  animation-delay: -0.16s;
}
@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
.text--red {
  color: #ec3b24;
}

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

.image-credit {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
}
.image-credit.bottom-left {
  left: 1rem;
  bottom: 1rem;
}
.image-credit.bottom-right {
  right: 1rem;
  bottom: 1rem;
}
.image-credit span {
  display: block;
}
.image-credit .name {
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 700;
  color: white;
}

.btn {
  color: white;
  padding: 6px 12px;
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: 0.3s;
  border-radius: 4px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
}
.btn.red {
  background: #ec3b24;
}
.btn.red:hover {
  background: rgb(203.3571428571, 39, 17.6428571429);
}
.btn.white {
  background: white;
  color: #ec3b24;
}
.btn.white:hover {
  background: rgb(247.35, 247.35, 247.35);
}
.btn.large {
  padding: 14px 20px;
  font-size: 1.6rem;
}
.btn.small {
  padding: 15px 20px;
  font-size: 1.4rem;
}
.btn.icon {
  display: flex;
  align-items: center;
  padding: 20px 30px;
}
.btn.icon img {
  display: inline-block;
  margin-left: 30px;
  width: 20px;
  height: 23px;
}

.link {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: #ec3b24;
  transform: translateX(0px);
}
.link.pad {
  margin-top: 5vh;
}
.link:hover {
  transform: translateX(5px);
}
.link:hover img {
  transform: translateX(10px);
}
.link img {
  transform: translateX(8px);
  transition: 0.3s;
}

.hide-overflow {
  overflow: hidden;
  display: block;
}

.appear {
  transition: 0.6s;
  display: block;
}
.appear.down {
  transform: translateY(-100%);
}
.appear.up {
  transform: translateY(100%);
}
.appear.in-view {
  transform: translateY(0%);
}

@media (min-width: 641px) {
  .delay-25 {
    transition-delay: 0.25s;
  }
}

@media (min-width: 641px) {
  .delay-50 {
    transition-delay: 0.5s;
  }
}

@media (min-width: 641px) {
  .delay-75 {
    transition-delay: 0.75s;
  }
}

@media (min-width: 641px) {
  .delay-100 {
    transition-delay: 1s;
  }
}

.fadeup {
  opacity: 0;
  transition-duration: 1s;
  transform: translate3d(0, 8%, 0);
}
.fadeup.in-view {
  transition-timing-function: cubic-bezier(0, 0, 0.37, 1);
  opacity: 1;
  transform: none;
}

.slidedown {
  opacity: 0;
  transition-duration: 1s;
  transform: translate3d(0, -8%, 0);
}
.slidedown.in-view {
  transition-timing-function: cubic-bezier(0, 0, 0.37, 1);
  opacity: 1;
  transform: none;
}

.slideleft {
  opacity: 0;
  transition-duration: 1s;
  transform: translate3d(-20px, 0, 0);
}
.slideleft.in-view {
  transition-timing-function: cubic-bezier(0, 0, 0.37, 1);
  opacity: 1;
  transform: none;
}

.fadein {
  opacity: 0;
  transition-duration: 1s;
}
.fadein.in-view {
  transition-timing-function: linear;
  opacity: 1;
  transform: none;
}

.body-fixed {
  overflow: hidden;
}

main {
  margin-top: 100px;
  transition: 0.6s ease-in-out;
}
.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: white;
  background: white;
  transition: 0.3s ease-in-out;
  z-index: 100;
  height: 87px;
}
.main-nav .nav-container {
  position: relative;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  height: 100%;
}
.short-nav .main-nav {
  height: 57px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.06), 0 2px 16px rgba(0, 0, 0, 0.12);
}
.short-nav .main-nav #logo img {
  height: 35px;
}
.filter-attached .main-nav {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.main-nav #logo {
  position: absolute;
  left: 20px;
}
.main-nav #logo img {
  height: 50px;
  display: block;
  transition: 0.3s ease-in-out;
}
.main-nav .links {
  position: relative;
  margin: auto;
  display: none;
}
@media (min-width: 850px) {
  .main-nav .links {
    display: block;
  }
}
.main-nav .links a {
  font-weight: 700;
  font-size: 2.1em;
  color: #182f35;
  margin: 0 20px;
}
.main-nav #search-icon {
  position: absolute;
  right: 120px;
  cursor: pointer;
}
.main-nav #search-icon path {
  transition: 0.3s;
  cursor: pointer;
}
.main-nav #search-icon:hover path {
  fill: #182f35;
}

.heart-count {
  position: absolute;
  right: 80px;
  cursor: pointer;
  transition: 0.6s;
}
.favorites-open .heart-count {
  z-index: 100;
}
.heart-count img {
  width: 30px;
  height: 29px;
}
.heart-count .count {
  position: absolute;
  top: 9px;
  right: -10px;
  height: 22px;
  width: 22px;
  border-radius: 11px;
  background: #182f35;
  border: 2px solid white;
  color: white;
  font-size: 1rem;
  line-height: 18px;
  letter-spacing: 0.05rem;
  font-weight: 700;
  text-align: center;
}

.full-nav {
  position: relative;
  background: #efece8;
  background-image: url(https://traveldubuque.com/images/travel-dubuque/global/background-texture.png);
  background-size: 40%;
  box-shadow: 10px 0 20px rgba(0, 0, 0, 0);
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  padding: 110px 24px 100px 24px;
  z-index: 101;
  overflow: scroll;
  transition: 0.3s;
  min-width: 300px;
  transform: translateX(105%);
  transition: all 0.6s ease-in-out;
  box-shadow: -3px 0px 26px rgba(0, 0, 0, 0.16), -3px 0px 30px rgba(0, 0, 0, 0.23);
  width: 100%;
}
@media (min-width: 641px) {
  .full-nav {
    width: auto;
    padding: 110px 34px 100px 34px;
  }
}
.short-nav .full-nav {
  padding-top: 57px;
}
.short-nav .full-nav .close-icon {
  top: 16px;
}
.full-nav .close-icon {
  position: absolute;
  right: 25px;
  top: 33px;
}
.nav-open .full-nav {
  opacity: 1;
  transform: translateX(0);
}
.nav-open .full-nav .links-contain {
  transform: none;
  opacity: 1;
}
.nav-open .full-nav .links-contain .main-link span {
  transform: none;
  opacity: 1;
}
.full-nav .links-contain {
  padding: 15px 0 14px 0;
  transition: 0.3s;
  opacity: 0;
}
.nav-open .full-nav .links-contain {
  transform: translateY(-20px);
}
.nav-open .full-nav .links-contain:nth-of-type(1) {
  transition-delay: 0s;
}
.nav-open .full-nav .links-contain:nth-of-type(2) {
  transition-delay: 0.06s;
}
.nav-open .full-nav .links-contain:nth-of-type(3) {
  transition-delay: 0.12s;
}
.nav-open .full-nav .links-contain:nth-of-type(4) {
  transition-delay: 0.18s;
}
.nav-open .full-nav .links-contain:nth-of-type(5) {
  transition-delay: 0.24s;
}
.nav-open .full-nav .links-contain:nth-of-type(6) {
  transition-delay: 0.3s;
}
.nav-open .full-nav .links-contain:nth-of-type(7) {
  transition-delay: 0.36s;
}
.nav-open .full-nav .links-contain:nth-of-type(8) {
  transition-delay: 0.42s;
}
.nav-open .full-nav .links-contain:hover .main-link span {
  color: #ec3b24;
}
.full-nav .main-link {
  font-family: "futura-pt";
  font-weight: 700;
  color: #182f35;
  font-size: 2.5rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: 0.3s;
  overflow: hidden;
}
.full-nav .main-link.toggled img {
  transform: rotate(-225deg);
}
.full-nav .main-link span {
  margin-right: 25px;
  transform: translateY(100%);
  opacity: 0;
  transition-duration: 0.3s;
}
.full-nav .main-link img {
  margin-left: auto;
  display: inline-block;
  height: 12px;
  transition: 0.6s;
  transform: none;
}
.full-nav .links {
  display: none;
}
.full-nav .links.active a {
  opacity: 1;
  transition: 1.3s;
}
.full-nav .links a {
  font-size: 1.8rem;
  font-weight: 700;
  color: #8e7a5a;
  display: block;
  margin: 10px 0;
  margin-left: 5px;
  transition: 0.3s;
}
.full-nav .links a:hover {
  color: #ec3b24;
}
.full-nav .links a:first-child {
  margin-top: 20px;
}
.full-nav .links a.inset {
  margin-left: 20px;
  color: rgb(47.8441558442, 93.6948051948, 105.6558441558);
}

.full-nav .close-icon, .your-favorites .close-icon {
  position: absolute;
  top: 33px;
  right: 30px;
  transition: 0.3s;
  transform-origin: center;
  cursor: pointer;
  width: 20px;
  height: 20px;
}
.full-nav .close-icon:hover, .your-favorites .close-icon:hover {
  transform: scale(1.2);
}

.your-favorites {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #efece8;
  background-image: url(https://traveldubuque.com/images/travel-dubuque/global/background-texture.png);
  background-size: 40%;
  z-index: 103;
  padding: 0 34px 2vw;
  overflow-y: scroll;
  transform: translateX(100%);
  transition: 0.6s;
  opacity: 0;
  visibility: hidden;
  box-shadow: -3px 0px 26px rgba(0, 0, 0, 0.16), -3px 0px 30px rgba(0, 0, 0, 0.23);
}
@media (min-width: 641px) {
  .your-favorites {
    width: 400px;
  }
}
.favorites-open .your-favorites {
  transform: none;
  opacity: 1;
  visibility: visible;
}
.your-favorites .headline {
  font-size: 4rem;
  line-height: 0.8;
  font-weight: 700;
  color: #182f35;
  margin: 60px 0 40px;
}
.your-favorites .favorite {
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
  background: white;
  margin-bottom: 1.5vw;
  transition: 0.3s;
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 0 0 1.5vw 0;
  padding: 0;
}
.your-favorites .favorite .category {
  font-size: 1.3rem;
  font-weight: 700;
  color: #ec3b24;
  margin-bottom: 5px;
  display: block;
}
.your-favorites .favorite .title {
  font-family: "futura-pt";
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: #182f35;
  padding: 20px;
}
.your-favorites .favorite .copy {
  width: 60%;
}
.your-favorites .favorite .image {
  position: relative;
  width: 35%;
  background: white;
  margin-left: auto;
}
.your-favorites .favorite .heart {
  position: absolute;
  top: 0;
  right: 0;
}
.your-favorites .favorite .heart input:checked ~ label svg path {
  fill: #ec3b24;
}
.your-favorites .bottom-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  padding: 20px 34px;
  display: flex;
  justify-content: space-between;
  background: #efece8;
  width: 100%;
}
@media (min-width: 641px) {
  .your-favorites .bottom-bar {
    width: 400px;
  }
}
.your-favorites .bottom-bar .btn {
  width: 31%;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
.your-favorites .bottom-bar .btn:first-child {
  width: 67%;
}

.nav-icon {
  position: absolute;
  top: 50%;
  right: 25px;
  width: 30px;
  height: 19px;
  transform: rotate(0deg) translateY(-50%);
  transition: 0.5s ease-in-out;
  cursor: pointer;
  z-index: 1000000;
}
.nav-icon:hover:nth-child(1) {
  top: -1px;
}
.nav-icon span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #ec3b24;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}
.nav-icon span:nth-child(1) {
  top: 0px;
}
.nav-icon span:nth-child(2), .nav-icon span:nth-child(3) {
  top: 8px;
}
.nav-icon span:nth-child(4) {
  top: 16px;
}
.nav-open .nav-icon {
  z-index: 20001;
}
.nav-open .nav-icon span {
  transition: 0;
  background: #ec3b24;
}

.sticky-filter {
  flex-basis: 100%;
  width: 100%;
  z-index: 2;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: 0.15s ease-in-out;
}

.stuck {
  position: fixed !important;
}

.filter-attr-active .categories.filter-attr {
  min-height: 400px;
  overflow-y: scroll;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px 10px 0 10px;
}
.filter-details-active .categories.filter-details {
  min-height: 400px;
  overflow-y: scroll;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px 10px 0 10px;
}
.filter-locations-active .categories.filter-locations {
  min-height: 400px;
  overflow-y: scroll;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px 10px 0 10px;
}
.filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px 3vw;
  border-top: 1px solid #d6d6d6;
  transition: 0.3s;
  width: 100%;
}
@media (min-width: 641px) {
  .filter {
    padding: 20px 1.5vw;
  }
}
.filter .filters {
  display: block;
}
@media (min-width: 641px) {
  .filter .filters {
    display: flex;
  }
}
.filter .filter-container {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
@media (min-width: 1024px) {
  .filter .filter-container {
    flex-direction: row;
  }
}
.filter.stuck {
  width: 100%;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-top: 1px solid white;
  padding: 15px 1.5vw;
  left: 0;
  top: 57px;
}
.filter.stuck .filter-container {
  padding: 0 1.5vw;
}
.filter.stuck a {
  font-size: 1.2rem;
}
.filter .categories-contain {
  position: relative;
  margin-right: 10px;
  width: 200px;
}
.filter .categories {
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 0;
  height: 0px;
  min-height: 0px;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
  padding: 0 10px 0;
  overflow: hidden;
  width: 100%;
}
.filter .categories button, .filter .categories .btn {
  font-size: 1.2rem;
  font-weight: 700;
  color: #182f35;
  padding: 7px 12px;
  border: 1px solid #d6d6d6;
  margin-right: 8px;
  transition: 0.3s;
  display: inline-block;
  margin-bottom: 10px;
  width: 100%;
}
.filter .categories button:hover, .filter .categories .btn:hover {
  background: #ec3b24;
  border-color: rgb(203.3571428571, 39, 17.6428571429);
  color: white;
}
.filter .categories label {
  position: relative;
  cursor: pointer;
}
.filter .categories label input {
  position: absolute;
  visibility: hidden;
}
.filter .categories label input:checked ~ span {
  background: #ec3b24;
  border-color: rgb(203.3571428571, 39, 17.6428571429);
  color: white;
}
.filter .categories label input:disabled ~ span {
  opacity: 0.25;
  cursor: progress;
}
.filter .categories label input:disabled ~ span:hover {
  background: white;
  border-color: #d6d6d6;
  color: #182f35;
}
.filter .filter-icon-contain {
  display: flex;
  align-items: center;
  color: white;
  margin-right: auto;
  background: red;
  border-radius: 5px;
  overflow: hidden;
  transition: 0.3s;
  cursor: pointer;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
  margin-bottom: 1.6rem;
}
@media (min-width: 641px) {
  .filter .filter-icon-contain {
    margin-bottom: 0;
  }
}
.filter .filter-icon-contain:hover {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
}
.filter-active .filter .filter-icon-contain {
  background: rgb(222.1285714286, 42.6, 19.2714285714);
}
.filter .filter-icon-contain span {
  font-weight: 700;
  font-size: 1.2em;
  padding: 0 15px;
  text-transform: uppercase;
  text-overflow: ellipsis;
  max-width: 150px;
  overflow: hidden;
  white-space: nowrap;
}
.filter .filter-icon-contain img {
  width: 18px;
  display: flex;
}
.filter .filter-icon-contain .filter-icon {
  background: rgb(222.1285714286, 42.6, 19.2714285714);
  padding: 13px 10px;
}
.filter .link.clear-filters {
  text-transform: uppercase;
  font-size: 14px;
}
.filter .map-toggle {
  display: flex;
  align-items: center;
  color: #ec3b24;
  font-size: 1.2em;
  font-weight: 700;
  margin-left: auto;
}
.filter .map-toggle .switch {
  margin-left: 10px;
}

footer {
  position: relative;
  background: white;
  overflow: hidden;
  margin-top: 10vw;
}
footer .logo {
  position: relative;
  text-align: center;
  top: -50px;
}
footer .logo:before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 1px;
  background: #d6d6d6;
  transform: translate(-50%, -50%);
}
footer .logo img {
  position: relative;
  width: 300px;
  padding: 0 20px;
}
footer .request-travel-guide-footer {
  text-align: center;
  padding: 10vh 10vw 160px 10vw;
  background-color: #efece8;
  background-image: url(https://traveldubuque.com/images/travel-dubuque/global/background-texture.png);
  background-size: 40%;
  border-radius: 4px;
}
@media (min-width: 641px) {
  footer .request-travel-guide-footer {
    padding: 6vw 5vw 14rem 5vw;
  }
}
footer .request-travel-guide-footer h4 {
  font-family: "futura-pt";
  font-size: 10vw;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: center;
  color: #ec3b24;
}
@media (min-width: 640px) {
  footer .request-travel-guide-footer h4 {
    font-size: 6rem;
  }
}
footer .request-travel-guide-footer p {
  font-size: 1.8rem;
  color: #8e7a5a;
  margin-top: 3vh;
  margin-bottom: 4vh;
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 760px) {
  footer .request-travel-guide-footer p {
    font-size: 2.2rem;
    margin-top: 1vw;
    margin-bottom: 2vw;
  }
}
footer .request-travel-guide-footer .ctas a {
  margin: 0 0 20px 0;
}
@media (min-width: 640px) {
  footer .request-travel-guide-footer .ctas a {
    margin: 0 10px;
  }
}
footer .links-contain {
  padding: 2vw 0 6vw 0;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 640px) {
  footer .links-contain {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 768px) {
  footer .links-contain {
    max-width: 96%;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
}
@media (min-width: 1024px) {
  footer .links-contain {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1440px) {
  footer .links-contain {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}
footer .links-contain .links {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: #182f35;
  padding: 5%;
  width: 50%;
}
@media (min-width: 768px) {
  footer .links-contain .links {
    width: 25%;
    padding: 0 2%;
  }
}
@media (min-width: 1200px) {
  footer .links-contain .links {
    width: auto;
  }
}
footer .links-contain .links ul:nth-of-type(2) {
  margin-top: 40px;
}
footer .links-contain .links a {
  transition: 0.3s;
}
footer .links-contain .links a:hover {
  color: #ec3b24;
}
footer .links-contain li {
  display: block;
  margin-bottom: 10px;
}
footer .links-contain li:first-child {
  display: block;
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 10px;
  font-weight: 700;
  color: #ec3b24;
}
@media (min-width: 640px) {
  footer .links-contain li:first-child {
    font-size: 3rem;
  }
}
footer .contact-info-contain {
  display: flex;
  flex-direction: row;
  margin: 5%;
  width: 100%;
}
@media (min-width: 768px) {
  footer .contact-info-contain {
    margin: 5% auto 0 2%;
  }
}
@media (min-width: 1200px) {
  footer .contact-info-contain {
    width: auto;
    margin: 0 0 0 auto;
    flex-direction: column;
  }
}
footer address {
  font-style: normal;
  width: 50%;
}
@media (min-width: 768px) {
  footer address {
    width: auto;
  }
}
footer address.office {
  margin-left: 10%;
}
@media (min-width: 768px) {
  footer address.office {
    margin: 0 0 0 30px;
  }
}
@media (min-width: 1200px) {
  footer address.office {
    margin: 30px 0 0 0;
  }
}
footer address span {
  display: block;
  font-size: 1.6rem;
  line-height: 1.25;
}
footer address .title {
  font-size: 2rem;
  font-weight: 700;
  color: #ec3b24;
  margin-bottom: 5px;
}
footer .utopia {
  position: relative;
  height: 200px;
}
footer .utopia > div {
  position: absolute;
  bottom: 0;
  left: 0;
  background-size: cover;
  width: 100%;
}
footer .utopia > div.front {
  background-position: 20%;
  height: 175px;
}
footer .utopia > div.middle {
  background-position: right bottom;
  height: 200px;
}
footer .utopia > div.back {
  background-position: left bottom;
  height: 125px;
}
footer .welcome-statement {
  background-color: rgb(228.5384615385, 223.5769230769, 216.9615384615);
  padding: 20px 5% 60px 5%;
  color: rgb(155.3076923077, 136.6153846154, 111.6923076923);
  text-align: center;
}
footer .welcome-statement img {
  margin-bottom: 40px;
}
footer .welcome-statement p {
  font-size: 1.6rem;
  color: #8e7a5a;
}
footer .welcome-statement .headline {
  font-family: "futura-pt";
  text-transform: uppercase;
  font-weight: 700;
  font-size: 2rem;
  color: rgb(142.4230769231, 123.8461538462, 99.0769230769);
  margin-bottom: 10px;
}
footer .welcome-statement .cite {
  font-family: "futura-pt";
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 5px;
  font-size: 1.2rem;
}
footer .welcome-statement .copy {
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
}

.has-photo {
  position: relative;
}

.heart {
  display: flex;
  justify-content: center;
  height: 40px;
  width: 50px;
  position: relative;
  transition: 0.3s;
  transform-origin: center;
  position: absolute;
  top: 5px;
  right: 0;
}
.heart:hover {
  transform: scale(1.25);
}
.has-photo .heart svg path {
  fill: rgba(0, 0, 0, 0.35);
  stroke: #ffffff;
}
.add-it .heart svg path {
  fill: rgba(0, 0, 0, 0) !important;
  stroke: #ffffff !important;
}
.add-it .heart input {
  position: absolute;
  left: -100vw;
}
.add-it .heart input:checked ~ label svg path {
  fill: white !important;
  stroke: rgba(0, 0, 0, 0) !important;
}
.main-category .heart, .heart .top-right {
  position: absolute;
  top: 5px;
  right: 0;
}
.heart svg {
  display: block;
  width: 55px;
  height: 55px;
  transform: scale(1);
}
.heart svg line {
  stroke-dashoffset: 10px;
  transform-origin: center;
}
.heart svg path {
  transition: 0.3s;
  stroke: rgba(0, 0, 0, 0.35);
}
.has-photo .heart svg path {
  position: relative;
  fill: rgba(0, 0, 0, 0.35);
  stroke: #ffffff;
}
.heart svg .heart-lines line {
  stroke: #f2f2f2;
  opacity: 0;
}
.heart input {
  position: absolute;
  left: -100vw;
}
.heart input:checked ~ label svg path {
  fill: #ec3b24;
  stroke: #ffffff;
}
.heart label {
  align-self: center;
  position: relative;
  color: #888;
  font-size: 2em;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
}
.heart label .bubble {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  content: "";
}
.heart label .bubble {
  box-sizing: border-box;
  margin: -2.25rem;
  border: solid 2.25rem rgba(236, 59, 36, 0.5);
  width: 4.5rem;
  height: 4.5rem;
  transform: scale(0);
}
.heart label.checked {
  color: #e2264d;
  filter: none;
}

@keyframes heart {
  0%, 17.5% {
    transform: scale(0);
  }
}
@keyframes bubble {
  15% {
    border-color: rgba(236, 59, 36, 0.5);
    border-width: 2.25rem;
  }
  30%, 100% {
    transform: scale(1);
    border-color: rgba(236, 59, 36, 0.75);
    border-width: 0;
  }
}
.search-bg {
  content: "";
  transform-origin: center center;
  position: fixed;
  height: 10px;
  width: 10px;
  background-color: #ec3b24;
  border-radius: 50%;
  transform: scale(1) translate3d(0, 0, 0);
  z-index: 1;
  opacity: 0;
}

#search {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  padding: 5vw;
  opacity: 0;
  z-index: 10000000000000000;
  visibility: hidden;
}
#search form {
  position: relative;
  margin-bottom: 10vw;
  display: flex;
  flex-direction: column-reverse;
  flex-grow: 1;
  width: 100%;
}
#search input {
  background-color: #ec3b24;
  outline: none;
  border: 0;
  padding: 0;
  font-family: "futura-pt", sans-serif;
  color: white;
  font-weight: 700;
  font-size: 12vw;
}
@media (min-width: 768px) {
  #search input {
    font-size: 80px;
    font-size: 8rem;
  }
}
#search input.placeholder {
  transition: all 0.25s ease-in-out;
  color: rgb(180.7317073171, 34.0853658537, 14.2682926829);
}
#search input:-moz-placeholder {
  -moz-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  color: rgb(180.7317073171, 34.0853658537, 14.2682926829);
}
#search input::-moz-placeholder {
  -moz-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  color: rgb(180.7317073171, 34.0853658537, 14.2682926829);
}
#search input:-ms-input-placeholder {
  -ms-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  color: rgb(180.7317073171, 34.0853658537, 14.2682926829);
}
#search input::-webkit-input-placeholder {
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  color: rgb(180.7317073171, 34.0853658537, 14.2682926829);
}
#search input ~ label {
  opacity: 1;
  font-family: "futura-pt", sans-serif;
  font-size: 20px;
  font-size: 2rem;
  color: white;
  font-weight: 700;
  transition: all 0.25s ease-in-out;
  margin-left: 5px;
}
@media (min-width: 641px) {
  #search input ~ label {
    margin-left: 0;
  }
}
#search input:focus.placeholder, #search input.dirty.placeholder {
  color: rgb(180.7317073171, 34.0853658537, 14.2682926829);
  opacity: 0.85;
}
#search input:focus:-moz-placeholder, #search input.dirty:-moz-placeholder {
  color: rgb(180.7317073171, 34.0853658537, 14.2682926829);
  opacity: 0.85;
}
#search input:focus::-moz-placeholder, #search input.dirty::-moz-placeholder {
  color: rgb(180.7317073171, 34.0853658537, 14.2682926829);
  opacity: 0.85;
}
#search input:focus:-ms-input-placeholder, #search input.dirty:-ms-input-placeholder {
  color: rgb(180.7317073171, 34.0853658537, 14.2682926829);
  opacity: 0.85;
}
#search input:focus::-webkit-input-placeholder, #search input.dirty::-webkit-input-placeholder {
  color: rgb(180.7317073171, 34.0853658537, 14.2682926829);
  opacity: 0.85;
}
#search input.dirty ~ label {
  color: rgb(180.7317073171, 34.0853658537, 14.2682926829);
}
#search .close {
  cursor: pointer;
  position: absolute;
  bottom: 15vh;
  right: 5vw;
  color: rgb(180.7317073171, 34.0853658537, 14.2682926829);
  background-color: rgb(180.7317073171, 34.0853658537, 14.2682926829);
  height: 40px;
  width: 40px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#search .close svg {
  width: 50%;
}
@media (min-width: 641px) {
  #search .close {
    transform: translateX(0);
    top: 5vw;
    bottom: auto;
  }
}

.search-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

h1.sub {
  position: relative;
  color: #ec3b24;
  font-size: 12vw;
  letter-spacing: -0.05em;
  line-height: 0.8;
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 5vw 2.5vw 2.5vw 2.5vw;
  max-width: 80%;
}
@media (min-width: 640px) {
  h1.sub {
    font-size: 10.2rem;
  }
}
.mast h1 {
  position: relative;
  color: white;
  font-size: clamp(6rem, 15vw, 10.2rem);
  line-height: 0.9;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 900px;
  font-family: "CreativeVintage";
  font-variant-ligatures: contextual;
  font-feature-settings: "liga" 0;
}
.mast h1 span {
  position: relative;
  font-size: 2rem;
  color: white;
  font-weight: 700;
  text-align: center;
  background: #ec3b24;
  padding: 0 15px;
  border: 5px solid transparent;
  border-image-source: url(https://traveldubuque.com/images/travel-dubuque/global/background-red.svg);
  border-image-slice: 3;
  border-image-outset: 3px;
  margin-bottom: 3vh;
  font-family: "futura-pt";
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}
.mast h1 span.small {
  padding: 0 15px;
  border: 5px solid transparent;
  font-size: 2rem;
}
.mast h1 span span {
  position: relative;
}

.article h2 {
  line-height: 0.8;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  margin-top: 15px;
  font-size: 5vw;
}
@media (min-width: 1024px) {
  .article h2 {
    font-size: 4rem;
    max-width: 280px;
  }
}
.attractions h2 {
  font-size: 5vw;
  font-weight: 700;
  line-height: 1;
  color: #182f35;
  margin-bottom: 10px;
}
@media (min-width: 640px) {
  .attractions h2 {
    margin-bottom: 20px;
    font-size: 2.6rem;
  }
}

.mast {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10% 5vw 5% 3vw;
  min-height: 40vh;
  background: #182f35;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.mast video {
  opacity: 0.8;
}
.mast .vimeo-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.mast .vimeo-wrapper iframe {
  width: 100vw;
  height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
  min-height: 100vh;
  min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.directory-title {
  font-weight: 700;
  color: #182f35;
  font-size: 2.6rem;
  text-transform: uppercase;
  transition: 0.3s;
}
@media (min-width: 641px) {
  .directory-title {
    font-size: 3.2rem;
  }
}
.stuck .directory-title {
  font-size: 1.8rem;
}

#more-articles {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
#more-articles .article {
  width: auto;
  flex: 1 1 auto;
}

.load-more {
  margin: 20px auto;
}

.articles {
  display: flex;
  flex-wrap: wrap;
  padding: 0.5vw;
  margin: 0 0 0 -0.5vw;
}
.articles .article {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1 1 auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #182f35;
  margin-left: 0.5vw;
  margin-bottom: 0.5vw;
  padding: 10vh 3vw 4vw 3vw;
  width: calc(50% - 0.5vw);
  overflow: hidden;
  transform-origin: center center;
}
@media (min-width: 1024px) {
  .articles .article {
    width: calc(33.33% - 0.5vw);
    padding: 20vh 3vw 4vw 3vw;
  }
  .articles .article:nth-of-type(2) {
    width: calc(66.67% - 0.5vw);
  }
}
.articles .article:hover figure img {
  transform: scale(1.05);
}
.articles .article:hover .gradient {
  opacity: 0.25;
}
.articles .article figure {
  overflow: hidden;
}
.articles .article figure img {
  transition: 0.6s;
  transform-origin: top center;
}
.articles .article .gradient {
  content: "";
  background: linear-gradient(20deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 17%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.8;
  transition: 0.6s;
}
.articles .article .content-contain {
  position: relative;
}
.articles .article .category {
  font-size: 1.3rem;
  font-weight: 700;
  color: #ec3b24;
  text-transform: uppercase;
  margin-top: 10px;
}

.attractions-contain {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.attractions-contain .active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  flex-basis: 100%;
  margin-top: 1.5rem;
}
.attractions-contain .active-filters button {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: black;
  color: white;
  padding: 0.8rem 1rem;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: 700;
}
.attractions-contain .active-filters button .icon {
  position: relative;
  top: -3px;
  height: 0.9rem;
  width: 0.9rem;
}
.attractions-contain .active-filters button .icon svg {
  height: 100%;
  width: 100%;
}
.attractions-contain .active-filters button .icon svg polygon {
  fill: white;
}

.attractions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 1.5vw;
  transition: 0.6s;
  width: 100%;
}
.map-active .attractions {
  display: none;
}
@media (min-width: 641px) {
  .map-active .attractions {
    display: flex;
    width: 55%;
  }
}
@media (min-width: 1280px) {
  .map-active .attractions {
    width: 50%;
  }
}
.attractions .attraction {
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
  background: white;
  margin-bottom: 1.5vw;
  transition: 0.3s;
  width: 100%;
  display: flex;
  flex-direction: column;
}
@media (min-width: 640px) {
  .attractions .attraction {
    width: calc(50% - 0.75vw);
  }
}
@media (min-width: 900px) {
  .attractions .attraction {
    width: calc(33.33% - 0.75vw);
  }
}
@media (min-width: 1280px) {
  .attractions .attraction {
    width: calc(25% - 0.75vw);
  }
}
.attractions .attraction.has-photo {
  flex-direction: row-reverse;
}
@media (min-width: 641px) {
  .attractions .attraction.has-photo {
    width: calc(50% - 0.75vw);
  }
}
.map-active .attractions .attraction.has-photo {
  width: 100%;
}
.attractions .attraction.has-photo .content {
  width: 60%;
  padding: 20px 5vw 30px 5vw;
}
@media (min-width: 641px) {
  .attractions .attraction.has-photo .content {
    padding: 60px 2vw 30px 2vw;
  }
}
.attractions .attraction:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
}
.map-active .attractions .attraction {
  width: calc(50% - 0.75vw);
}
.attractions .attraction .heart {
  position: absolute;
  top: 5px;
  right: 5px;
}
.attractions .attraction .image {
  position: relative;
  height: 100%;
  width: 40%;
  background: white;
  overflow: hidden;
  transform-origin: center center;
}
.attractions .attraction .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  width: 100%;
  padding: 60px 5vw 30px 5vw;
}
@media (min-width: 641px) {
  .attractions .attraction .content {
    padding: 60px 2vw 30px 2vw;
  }
}
.attractions .attraction .content p {
  font-size: 1.6rem;
  line-height: 1.4;
  font-family: "futura-pt";
  color: #6b6b6b;
  display: none;
}
@media (min-width: 640px) {
  .attractions .attraction .content p {
    display: block;
  }
}
.attractions .attraction .featured-attraction-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ec3b24;
  margin-bottom: 5px;
}
.attractions .attraction .rating-price {
  display: flex;
}
.attractions .attraction .price-level {
  position: relative;
  top: -1px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #c1c1c1;
}
.attractions .attraction .price-level span {
  position: relative;
  top: -1px;
  margin: 0 5px 0 7px;
}
.attractions .attraction .rating {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}
@media (min-width: 640px) {
  .attractions .attraction .rating {
    margin-bottom: 20px;
  }
}
.attractions .attraction .rating .rating-stars {
  position: relative;
  height: 18px;
  width: 102px;
  background-color: rgba(0, 0, 0, 0.15);
}
.attractions .attraction .rating .rating-number {
  font-size: 1.6em;
  font-weight: 700;
  color: #c1c1c1;
  margin-right: 5px;
}
.attractions .attraction .rating img {
  height: 18px;
  width: 102px;
  display: block;
}
.attractions .attraction .rating .bar {
  background: #fbb03b;
  height: 18px;
  width: 100%;
}
.attractions .attraction .open-closed {
  display: flex;
  align-items: center;
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 10px;
  text-transform: uppercase;
}
@media (min-width: 640px) {
  .attractions .attraction .open-closed {
    margin-top: 20px;
  }
}
.attractions .attraction .open-closed .seasonal {
  font-size: 1.3rem;
  margin: 0;
}
.attractions .attraction .open-closed .seasonal strong {
  font-weight: 700;
}
.attractions #no-results {
  padding: 2rem;
  width: 100%;
  max-width: 550px;
}

.map-wrapper {
  transition: 0.6s;
  width: 100%;
  overflow: hidden;
  visibility: hidden;
}
@media (min-width: 641px) {
  .map-wrapper {
    width: 0%;
  }
}
.map-active .map-wrapper {
  visibility: visible;
  overflow: visible;
  width: 100%;
}
@media (min-width: 641px) {
  .map-active .map-wrapper {
    width: 45%;
  }
}
@media (min-width: 1280px) {
  .map-active .map-wrapper {
    width: 50%;
  }
}

#map {
  background: #efece8;
  height: calc(100vh - 80px);
}
#map.stuck {
  top: 120px;
  z-index: 1;
  width: 50%;
}
#map .title {
  font-size: 2rem;
  font-weight: 700;
  max-width: 34rem;
}
#map .address {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}