/* Fonts */
/* Variables */
/* Colours */
/* Mixins */
.progressbar {
  background-color: #25292B;
  display: inline-block;
  height: 2px;
  width: 0;
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
}

.lead-image,
.portrait,
.landscape,
.gallery-scroller,
.quote,
.video,
.sidebyside,
.textarea,
.ad-desktop,
.ad-mobile,
.introblock,
.read-more {
  margin: 0 auto 90px auto;
}
@media (max-width: 991.98px) {
  .lead-image,
  .portrait,
  .landscape,
  .gallery-scroller,
  .quote,
  .video,
  .sidebyside,
  .textarea,
  .ad-desktop,
  .ad-mobile,
  .introblock,
  .read-more {
    margin: 0 auto 30px auto;
  }
}

.introblock {
  margin-bottom: 70px;
}
@media (max-width: 991.98px) {
  .introblock {
    margin-bottom: 35px;
  }
}

.aff-links {
  text-align: left;
}
.aff-links a.aff-link.btn {
  background: #25292B;
  color: white;
  height: 40px;
  align-items: center;
  justify-content: center;
  display: inline-flex;
  padding: 5px 21px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.lead-image {
  height: auto;
}
@media (max-width: 991.98px) {
  .lead-image {
    padding: 0;
  }
}
.lead-image.addtint .image-wrap {
  background: #000;
}
.lead-image.addtint img {
  opacity: 0.8;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

p.number-one,
p.number-two,
p.number-three,
p.number-four,
p.number-five,
p.number-six,
p.number-seven,
p.number-eight,
p.number-nine,
p.number-ten {
  background-size: 70px;
  background-repeat: no-repeat;
  padding-top: 95px;
}

p.number-one {
  background-image: url(assets/images/NUMBER-1.svg);
  background-size: 78px;
}

p.number-two {
  background-image: url(assets/images/NUMBER-2.svg);
}

p.number-three {
  background-image: url(assets/images/NUMBER-3.svg);
}

p.number-four {
  background-image: url(assets/images/NUMBER-4.svg);
}

p.number-five {
  background-image: url(assets/images/NUMBER-5.svg);
  background-size: 80px;
}

p.number-six {
  background-image: url(assets/images/NUMBER-6.svg);
  background-size: 70px;
}

p.number-seven {
  background-image: url(assets/images/NUMBER-7.svg);
  background-size: 77px;
}

p.number-eight {
  background-image: url(assets/images/NUMBER-8.svg);
}

p.number-nine {
  background-image: url(assets/images/NUMBER-9.svg);
  background-size: 75px;
}

p.number-ten {
  background-image: url(assets/images/NUMBER-10.svg);
  background-size: 95px;
  background-position-x: -8px;
  padding-top: 100px;
}

.date-time {
  font-family: "ff-nexus-typewriter";
  display: flex;
  justify-content: center;
  text-transform: uppercase;
  font-size: 10px;
}
@media (max-width: 991.98px) {
  .date-time {
    flex-direction: column;
  }
}
.date-time > div {
  margin: 0 10px;
}
.date-time .category a {
  color: #25292B;
}

.video {
  width: 800px;
  max-width: 100%;
}

.portrait img {
  width: 800px;
}

.introblock {
  width: 800px;
  max-width: 100%;
}
.introblock p {
  text-align: left;
  font-family: "moret";
  font-weight: 300;
  font-size: 32px;
  line-height: 1.3;
}
.introblock.introblockheader {
  margin-bottom: 0;
  width: 100%;
  margin: 20px auto;
}
.introblock.introblockheader p {
  text-align: center;
  width: 100%;
  font-size: 1.5rem;
}

.quote {
  width: 950px;
  margin-bottom: 135px;
  max-width: 100%;
}
@media (max-width: 991.98px) {
  .quote {
    margin: 90px auto;
  }
  .quote h1, .quote .h1 {
    font-size: 46px;
    line-height: 50px;
  }
}
.quote .quote-name {
  margin-top: 20px;
  font-family: "ff-nexus-typewriter";
  text-transform: uppercase;
  text-align: center;
}

.ad-desktop {
  width: 800px;
  max-width: 100%;
}
@media (min-width: 768px) {
  .ad-desktop {
    margin-bottom: 5.5rem;
  }
}

.roadb-above-subscribe-box-2:nth-child(2) {
  display: none !important;
}

.textarea {
  width: 800px;
  max-width: 100%;
}
@media (min-width: 768px) {
  .textarea {
    margin-bottom: 5.5rem;
  }
}
.textarea p {
  text-align: left;
  max-width: 100%;
  margin-bottom: 30px;
}
.textarea p img {
  margin-bottom: 0;
}
.textarea p:last-child {
  margin-bottom: 0;
}
.textarea h2 {
  margin-top: 4rem;
  font-size: 3.3rem;
  margin-bottom: 3rem;
}
.textarea h3 {
  text-align: left;
  font-size: 2rem;
}

.read-more {
  border: 1px solid #25292B;
  padding: 20px;
  width: 800px;
  max-width: 100%;
}
@media (max-width: 991.98px) {
  .read-more {
    margin: 0 15px;
    max-width: calc(100% - 30px);
    margin-bottom: 5.5rem;
  }
}
.read-more .read-more-title {
  margin-bottom: 20px;
  border-bottom: 1px solid #25292B;
  padding-bottom: 20px;
}
.read-more .related-posts {
  display: flex;
}
@media (max-width: 991.98px) {
  .read-more .related-posts {
    flex-direction: column;
  }
}
.read-more .related-post a {
  color: #25292B;
  display: flex;
  text-align: left;
}
.read-more .related-post {
  flex: 1;
}
@media (max-width: 991.98px) {
  .read-more .related-post:first-of-type a {
    margin-bottom: 20px;
  }
}
.read-more .related-post img {
  width: 85px;
  height: auto;
  align-self: flex-start;
}
.read-more h3 {
  font-size: 1.3rem;
  font-weight: 300;
  margin-left: 20px;
  padding-right: 10%;
  padding-top: 10px;
}
@media (max-width: 991.98px) {
  .read-more h3 {
    padding-right: 0;
  }
}
.read-more h2 {
  font-size: 1.4rem;
  font-weight: 300;
}

.gallery-scroller-title {
  font-family: "ff-nexus-typewriter";
  text-transform: uppercase;
  font-size: 20px;
  margin-bottom: 20px;
  margin-left: 12px;
}

.gallery-scroller {
  display: flex;
  overflow: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  cursor: none;
}
.gallery-scroller::-webkit-scrollbar {
  display: none;
}
.gallery-scroller img {
  height: 750px;
  width: auto;
  max-width: unset;
}
@media (max-width: 767.98px) {
  .gallery-scroller img {
    height: 60vh;
  }
}

.gallery-scroller-wrapper {
  height: 750px;
  position: relative;
}

.sidebyside .sidebyside-inner {
  display: flex;
  justify-content: center;
}
@media (max-width: 767.98px) {
  .sidebyside .sidebyside-inner {
    flex-direction: column;
  }
}
.sidebyside img {
  width: 650px;
  max-width: 50%;
  align-self: center;
  margin: 0 4px;
}
@media (max-width: 991.98px) {
  .sidebyside img:first-child {
    margin-bottom: 30px;
  }
}
@media (max-width: 767.98px) {
  .sidebyside img {
    max-width: 100%;
    margin: 0;
  }
}

.sign-up {
  margin: 100px auto;
}
.sign-up.text {
  max-width: 800px;
}
.sign-up.text h1 {
  font-size: 45px;
  line-height: 1.3;
}
.sign-up.text h2 {
  font-size: 1.5rem;
}
.sign-up.image {
  text-align: left;
  color: white;
  max-width: 800px;
  display: flex;
  background: #25292B;
}
@media (max-width: 991.98px) {
  .sign-up.image {
    flex-direction: column;
    margin-left: 12px;
    margin-right: 12px;
  }
}
.sign-up.image .h2 {
  text-align: left;
  font-size: 24px;
  font-style: italic;
  width: 90%;
  margin-top: 47px;
}
@media (max-width: 991.98px) {
  .sign-up.image .h2 {
    font-size: 18px;
    margin-top: 25px;
  }
}
@media (max-width: 991.98px) {
  .sign-up.image svg {
    height: 27px;
    width: fit-content;
  }
}
.sign-up.image .signup-img, .sign-up.image .signup-text {
  flex: 1;
}
@media (max-width: 991.98px) {
  .sign-up.image .signup-img {
    order: 2;
  }
}
.sign-up.image .signup-text {
  display: flex;
}
.sign-up.image .signup-text-inner {
  display: flex;
  flex-direction: column;
  padding: 50px 35px 35px 34px;
  position: relative;
}
@media (max-width: 991.98px) {
  .sign-up.image .signup-text-inner {
    padding: 35px 25px;
  }
}
.sign-up.image .signup-form {
  position: absolute;
  bottom: 50px;
  left: 35px;
}
@media (max-width: 991.98px) {
  .sign-up.image .signup-form {
    position: unset;
  }
}
.sign-up.image .button {
  height: 25px;
}
.sign-up.image input#mce-EMAIL {
  height: 40px;
  width: 300px;
  text-align: left;
  padding-left: 25px;
  font-size: 12px;
}
@media (max-width: 991.98px) {
  .sign-up.image .signup-group .btn {
    margin-left: 0;
    margin-top: 20px;
  }
}
@media (max-width: 991.98px) {
  .sign-up.image input.mc-embedded-subscribe.button.btn {
    margin: 0;
    height: 27px;
    left: 260px;
    margin-top: 19px;
    width: 27px;
  }
}
@media (max-width: 767.98px) {
  .sign-up.image input.mc-embedded-subscribe.button.btn {
    height: 36px;
    left: 250px;
  }
}

.subscribe {
  position: relative;
  margin: 240px -20px 280px -20px;
  overflow: hidden;
  max-width: calc(100% + 20px);
  width: unset;
  z-index: 100;
}
@media (max-width: 991.98px) {
  .subscribe {
    margin: 180px 12px 250px 12px;
    max-width: 100%;
  }
}

.color-orange {
  background-color: #E8561B;
}

.layout-one {
  margin-top: -50px;
}
@media (max-width: 991.98px) {
  .layout-one .portrait,
  .layout-one .landscape,
  .layout-one .gallery-scroller,
  .layout-one .quote,
  .layout-one .video,
  .layout-one .sidebyside,
  .layout-one .textarea,
  .layout-one .ad-mobile,
  .layout-one .introblock {
    padding-right: 12px;
    padding-left: 12px;
  }
}
.layout-one .lead-image {
  height: 130vh;
  width: 100%;
  position: absolute;
  z-index: 1;
  overflow: hidden;
}
@media (max-width: 991.98px) {
  .layout-one .lead-image {
    margin-bottom: 0;
    height: 110vh;
  }
}
.layout-one .lead-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.layout-one .lead-image .image-wrap {
  height: 120vh;
}
.layout-one .lead-image .image-wrap .mobile {
  display: none;
}
@media (max-width: 991.98px) {
  .layout-one .lead-image .image-wrap {
    height: 100vh;
  }
  .layout-one .lead-image .image-wrap .mobile {
    display: block;
  }
}
.layout-one ul.tags {
  width: 800px;
  max-width: 100%;
}
.layout-one .grid ul.tags {
  width: 100%;
}
.layout-one header {
  position: relative;
  height: 120vh;
  margin-bottom: 90px;
}
@media (max-width: 991.98px) {
  .layout-one header {
    height: 100vh;
    margin-bottom: 110px;
  }
  .layout-one header h1 {
    font-size: 3rem;
  }
  .layout-one header .date-time {
    flex-direction: column;
  }
}
.layout-one header ul.tags {
  display: inline-block;
}
.layout-one header ul.tags a {
  color: #25292B !important;
}
.layout-one .header-info,
.layout-one .title-block {
  position: sticky;
  top: 34%;
  z-index: 10;
  font-size: 10px;
  width: 925px;
  margin-bottom: 30px;
  display: inline-block;
}
@media (max-width: 991.98px) {
  .layout-one .header-info,
  .layout-one .title-block {
    position: sticky;
    top: 25%;
    z-index: 10;
    font-size: 10px;
    max-width: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 90px 20px 75px 20px;
    transform: none;
  }
}
.layout-one .header-info h1,
.layout-one .title-block h1 {
  color: white;
}
.layout-one .header-info.Light,
.layout-one .title-block.Light {
  color: white;
}
.layout-one .header-info.Light a,
.layout-one .title-block.Light a {
  color: white;
}
.layout-one .header-info.Dark a,
.layout-one .title-block.Dark a {
  color: #25292B;
}
@media (max-width: 991.98px) {
  .layout-one .header-info.Dark a,
  .layout-one .title-block.Dark a {
    color: #25292B;
  }
}
.layout-one .image-box a {
  color: #25292B;
}

@media (max-width: 991.98px) {
  .layout-two .portrait,
  .layout-two .landscape,
  .layout-two .gallery-scroller,
  .layout-two .quote,
  .layout-two .video,
  .layout-two .sidebyside,
  .layout-two .textarea,
  .layout-two .ad-mobile,
  .layout-two .introblock {
    padding-right: 12px;
    padding-left: 12px;
  }
}
.layout-two .image-box a {
  color: #25292B;
}
.layout-two header {
  display: flex;
  margin: 0 auto;
}
.layout-two header a {
  color: #25292B;
}
@media (max-width: 991.98px) {
  .layout-two header {
    flex-direction: column;
  }
}
.layout-two header > div {
  flex: 1;
  max-width: 50%;
}
@media (max-width: 991.98px) {
  .layout-two header > div {
    margin-top: 0;
    max-width: 100%;
  }
}
@media (max-width: 767.98px) {
  .layout-two header > div {
    margin-top: -11px;
  }
}
.layout-two header .title-block {
  text-align: left;
  top: 180px;
  margin-bottom: 180px;
  position: sticky;
}
@media (max-width: 991.98px) {
  .layout-two header .title-block {
    max-width: 100%;
  }
}
.layout-two header .title-block h1 {
  margin-right: 30px;
  margin-left: 20px;
}
@media (max-width: 991.98px) {
  .layout-two header .title-block {
    text-align: unset;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: unset;
    margin-bottom: 60px;
  }
}
.layout-two header ul.tags {
  max-width: 100%;
  margin-top: 20px;
  padding-left: 20px;
}
@media (max-width: 991.98px) {
  .layout-two header ul.tags {
    margin-bottom: 20px;
    padding-left: 0;
    justify-content: center;
  }
}
.layout-two .lead-image {
  max-width: 50%;
}
@media (max-width: 991.98px) {
  .layout-two .lead-image {
    order: 2;
    max-width: 100%;
  }
  .layout-two .lead-image .caption {
    margin: 12px;
    max-width: calc(100% - 24px);
  }
}
.layout-two .date-time {
  font-family: "ff-nexus-typewriter";
  display: flex;
  justify-content: left;
  text-transform: uppercase;
  font-size: 10px;
  margin-left: 10px;
}
@media (max-width: 991.98px) {
  .layout-two .date-time {
    justify-content: center;
  }
}
.layout-two ul.tags {
  width: 800px;
  max-width: 100%;
}
.layout-two .first-published {
  padding-right: 12px;
  padding-left: 12px;
}
.layout-two .grid ul.tags {
  width: 100%;
}
.layout-two section.full-article {
  margin-top: 0;
}
.layout-two .lead-image .caption {
  margin: 15px auto 15px 20px;
}
@media (max-width: 991.98px) {
  .layout-two .lead-image .caption {
    margin: 12px;
    max-width: calc(100% - 24px);
  }
}
@media (max-width: 991.98px) {
  .layout-two .header-info {
    margin-top: 110px;
  }
}

.image-box-marker {
  flex: 0 !important;
}

.layout-three {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 767.98px) {
  .layout-three {
    padding-top: 50px;
    padding-left: 0;
    padding-right: 0;
  }
}
.layout-three .layout-three-row {
  margin: 0 auto;
}
@media (max-width: 991.98px) {
  .layout-three .layout-three-row {
    flex-direction: column;
  }
}
.layout-three .full-article {
  margin-top: 0;
}
.layout-three header {
  margin-top: 145px;
  margin-bottom: 90px;
}
@media (max-width: 767.98px) {
  .layout-three header {
    margin-top: 90px;
  }
}
.layout-three header a {
  color: #25292B;
}
.layout-three .quote {
  margin-top: 90px;
  margin-bottom: 90px;
}
.layout-three .quote .h1 {
  font-size: 2.3rem;
}
.layout-three .quote .quote-name {
  font-family: "ff-nexus-typewriter";
  text-transform: uppercase;
}
.layout-three .post-content {
  position: relative;
  padding-right: 100px;
  padding-left: 45px;
  width: 800px;
  max-width: 100%;
  margin-left: auto;
}
@media (max-width: 991.98px) {
  .layout-three .post-content {
    padding-right: 0;
    padding-left: 0;
    width: 100%;
  }
}
.layout-three .image-box {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 50vw;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  flex-direction: column;
}
@media (max-width: 991.98px) {
  .layout-three .image-box {
    position: relative;
    right: unset;
    top: unset;
    width: 100%;
    padding: 0;
    display: block;
    height: auto;
  }
}
.layout-three .image-box-image {
  max-height: 100%;
  text-align: left;
}
.layout-three .image-box img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 98.5%;
  opacity: 0;
  z-index: 100;
}
.layout-three .image-box img ~ .caption {
  opacity: 0;
}
@media (max-width: 991.98px) {
  .layout-three .image-box img {
    max-width: 100%;
    opacity: 1;
    position: static;
    right: unset;
    transform: unset;
    top: unset;
    width: 100%;
  }
  .layout-three .image-box img ~ .caption {
    opacity: 1;
  }
}
.layout-three .image-box.image-box--last {
  position: absolute;
  right: calc(-50vw - 15px);
  height: auto;
}
.layout-three .image-box.image-box--last.unpin {
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0 !important;
  width: 50vw;
}
@media (max-width: 991.98px) {
  .layout-three .image-box.image-box--last.unpin {
    height: auto;
    position: relative;
    right: auto;
    top: 0 !important;
    width: 100%;
  }
}
@media (max-width: 991.98px) {
  .layout-three .image-box.image-box--last {
    position: relative;
    right: auto;
    top: 0 !important;
  }
}
@media (max-width: 991.98px) {
  .layout-three .image-box.image-box--last.pinned img {
    opacity: 1;
    position: static;
    right: unset;
    transform: unset;
    top: unset !important;
    width: 100%;
  }
}
.layout-three .image-box.active img {
  opacity: 1;
}
.layout-three .image-box.active img ~ .caption {
  opacity: 1;
}
.layout-three .image-box.active img.unfix {
  opacity: 0;
}
.layout-three .zoomimage {
  cursor: pointer;
}
.layout-three .col.second-col {
  background: #CDD8D4;
}
.layout-three .post-footer .last-updated,
.layout-three .post-footer .tags,
.layout-three .post-footer .author {
  padding-right: 100px;
  width: 800px;
  max-width: 100%;
  margin-left: auto;
}
@media (max-width: 991.98px) {
  .layout-three .post-footer .last-updated,
  .layout-three .post-footer .tags,
  .layout-three .post-footer .author {
    padding-left: 0;
    margin: 0 auto 30px auto;
  }
}
.layout-three h3 {
  text-align: left;
}
.layout-three .caption {
  width: 100%;
  max-width: 100%;
}
@media (max-width: 767.98px) {
  .layout-three .caption {
    max-width: 100%;
  }
}
@media (max-width: 991.98px) {
  .layout-three .lead-image .caption {
    margin: 15px auto 15px 0;
  }
}
.layout-three .title-block ul.tags {
  display: inline-block;
}
@media (max-width: 991.98px) {
  .layout-three .title-block ul.tags {
    margin-top: 10px;
  }
}
@media (max-width: 1580px) {
  .layout-three .sign-up.image {
    flex-direction: column;
    margin-left: 12px;
    margin-right: 12px;
  }
}
@media (max-width: 1580px) {
  .layout-three .sign-up.image .h2 {
    font-size: 18px;
    margin-top: 25px;
  }
}
@media (max-width: 1580px) {
  .layout-three .sign-up.image svg {
    height: 27px;
    width: fit-content;
  }
}
@media (max-width: 1580px) {
  .layout-three .sign-up.image .signup-img {
    order: 2;
  }
}
@media (max-width: 1580px) {
  .layout-three .sign-up.image .signup-text-inner {
    padding: 35px 25px;
  }
}
@media (max-width: 1580px) {
  .layout-three .sign-up.image .signup-form {
    position: unset;
  }
}
@media (max-width: 1580px) {
  .layout-three .sign-up.image .signup-group .btn {
    margin-left: 0;
    margin-top: 20px;
  }
}
@media (max-width: 1580px) {
  .layout-three .sign-up.image input.mc-embedded-subscribe.button.btn {
    margin: 0;
    height: 28px;
    left: 215px;
    margin-top: 19px;
    width: 27px;
  }
}
@media (max-width: 990px) {
  .layout-three .sign-up.image input.mc-embedded-subscribe.button.btn {
    height: 28px;
    left: 215px;
  }
}
@media (max-width: 767.98px) {
  .layout-three .sign-up.image input.mc-embedded-subscribe.button.btn {
    height: 36px;
    left: 255px;
  }
}

.first-published,
.last-updated {
  margin-bottom: 90px;
}
.first-published p,
.last-updated p {
  font-family: "ff-nexus-typewriter";
  font-size: 10px;
  text-transform: uppercase;
}

.ad-image {
  margin-bottom: 5.5rem;
}
.ad-image .ad-image-mobile {
  display: none;
}
@media (max-width: 991.98px) {
  .ad-image .ad-image-mobile {
    display: block;
  }
}
@media (max-width: 991.98px) {
  .ad-image .ad-image-desktop {
    display: none;
  }
}

.suggested {
  max-width: 800px;
  margin: 50px auto 90px;
  text-align: left;
  border: 1px solid #000;
  padding: 20px;
}
@media (max-width: 991.98px) {
  .suggested {
    padding-right: 12px;
    padding-left: 12px;
    margin-left: 15px;
    margin-right: 15px;
  }
}
.suggested h3 {
  margin-bottom: 20px;
  border-bottom: 1px solid #25292B;
  padding-bottom: 18px;
  font-size: 1.3rem;
  line-height: 1;
}
.suggested .suggested-links {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 991.98px) {
  .suggested .suggested-links {
    flex-direction: column;
  }
}
.suggested .suggested-links a {
  flex: 1;
}
@media (max-width: 991.98px) {
  .suggested .suggested-links a:first-child {
    margin-bottom: 20px;
  }
}
.suggested .suggested-link {
  display: flex;
  flex-direction: row;
}
.suggested .suggested-link img {
  align-self: flex-start;
  padding-right: 20px;
  width: 120px;
}
.suggested .suggested-link span {
  display: flex;
  color: #25292B;
  font-size: 1.2rem;
  line-height: 1.2;
  margin-top: auto;
  margin-bottom: auto;
  padding-right: 10%;
}

.centre-title {
  text-align: center;
  margin-bottom: 3rem;
}

/* Container for the map with a 16:9 aspect ratio */
.map-container {
  position: relative;
  width: 1340px;
  max-width: 100%;
  margin: auto;
  margin-bottom: 5rem;
}

.map-wrapper {
  padding-bottom: 60%; /* 16:9 aspect ratio (9/16 = 0.5625 = 56.25%) */
  height: 0;
  overflow: hidden;
}

.maps-infobar {
  background: white;
  padding: 20px 50px;
  border-radius: 20px;
  display: flex;
  z-index: 100;
  height: 90px;
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
}

.maps-infobar h3 {
  margin: auto 50px auto 0;
  margin-left: 0;
  text-wrap: nowrap;
}

/* Map element positioned absolutely within the container */
#map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.map-controls {
  position: absolute;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: fit-content;
  z-index: 100;
  bottom: 20px;
  margin: auto;
}

.route-btn {
  padding: 10px 30px;
  margin: 5px;
  background-color: white;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
}

.route-btn.active {
  background-color: black;
  color: white;
}

.map-controls h3 {
  display: none;
}

.information,
.clock {
  display: flex;
  text-wrap: nowrap;
  margin-right: 32px;
}

.clock {
  padding-top: 5px;
  font-size: 1.5rem;
  color: #969696;
}

.clock svg,
.clock #time {
  display: inline-block;
}

.clock svg {
  margin-right: 6px;
}

.information svg {
  height: 20px;
  width: 20px;
}

.stars {
  display: flex;
  width: auto;
  padding-top: 10px;
}

.stars.one svg:first-of-type path {
  fill: black;
}

.stars.one svg:nth-of-type(2) path {
  fill: #F3F3F3;
}

.stars.one svg:nth-of-type(3) path {
  fill: #F3F3F3;
}

.stars.two svg:first-of-type path {
  fill: black;
}

.stars.two svg:nth-of-type(2) path {
  fill: black;
}

.stars.two svg:nth-of-type(3) path {
  fill: #F3F3F3;
}

.stars.three svg:first-of-type path {
  fill: black;
}

.stars.three svg:nth-of-type(2) path {
  fill: black;
}

.stars.three svg:nth-of-type(3) path {
  fill: black;
}

button:focus {
  outline: none;
}

@media (max-width: 767.98px) {
  .map-wrapper {
    padding-bottom: 0;
    height: 525px;
  }
  .map-controls {
    background: white;
    padding: 10px 40px;
    border-radius: 20px;
    left: 10px;
    right: 10px;
    bottom: 10px;
  }
  .maps-infobar {
    padding: 10px 32px;
    height: 45px;
  }
  .maps-infobar h3 {
    font-size: 1.2rem;
    margin-right: 30px;
  }
  .route-btn span {
    display: none;
  }
  .map-controls h3 {
    font-size: 1.2rem;
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 0;
  }
  .route-btn {
    padding: 0;
    margin: 0;
    font-size: 1.2rem;
    height: 30px;
    width: 30px;
    margin: auto;
  }
  .gm-bundled-control {
    display: none;
  }
  .information,
  .clock {
    margin-right: 20px;
  }
  .information svg {
    height: 15px;
    width: 15px;
  }
  .clock {
    font-size: 1rem;
    padding-top: 0;
  }
  .stars {
    padding-top: 0;
  }
}