/* Layout helpers used by public templates. */

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

header,
main,
section {
  display: block;
}

header {
  margin: 0;
}

.section-bg-clouds {
  background: linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0.66)), url("/assets/img/1614569860_21-p-oblaka-na-belom-fone-34.jpg") center / cover no-repeat;
}

.section-bg-tour-clouds {
  background: url("/assets/img/1614569940_40-p-oblaka-na-belom-fone-61.png") center / contain no-repeat;
}

.section-bg-directions {
  background: url("/images/fon3.jpg") center / cover;
}

.hero-banner {
  height: 300px;
  background-position: center;
  background-size: cover;
}

.hero-banner--direction {
  background-image: linear-gradient(-90deg, rgba(0,0,0,0) 41%, rgba(104,125,92,0.5) 68%), var(--hero-image);
}

.hero-banner--image {
  background-image: var(--hero-image);
}

.hero-copy {
  max-width: 350px;
}

.hero-title {
  font-size: 40px;
  text-shadow: 3px 3px 2px rgba(4,4,4,0.8);
}

.hero-title-sm {
  font-size: 32px;
  text-shadow: 3px 3px 2px rgba(4,4,4,0.8);
}

.hero-lead {
  font-size: 22px;
  text-shadow: 2px 2px 2px rgba(0,0,0,0.8);
}

.hero-lead-lg {
  font-size: 26px;
}

.content-panel-bg {
  background: linear-gradient(rgba(255,255,255,0.4), white), url("/assets/img/IMG_0498.jpg") center / cover no-repeat;
  border-radius: 12px;
}

.feature-banner {
  height: 420px;
  background-image: linear-gradient(0deg, rgba(0,0,0,0.51), rgba(0,0,0,0.12)), var(--feature-image);
  background-position: center;
  background-size: cover;
}

.mobile-bottom-nav {
  box-shadow: 0 -3px 6px rgba(84, 62, 4, 0.45);
}

.offcanvas-menu {
  width: 75%;
}