h1.page-title { margin-bottom:-1px; }
h1.page-title:after { display:none; }
.river-map-wrapper {
  position:relative;
  display:block;
  width:100%;
  margin:0 0 41px 0;
  min-height:540px;
}
.river-map-wrapper > .inner {
  display:block;
  position:absolute;
  top:0;
  left:-70px;
  right:calc(-50vw + 590px);
  height:540px;
  clip:rect(0,auto,auto,0);
}
.map-container-wrapper { z-index:1; }
.map-container-wrapper, .map-container-wrapper > .inner {
  display:block;
  height:100%;
  position:absolute;
  top:0;
  left:100%;
  right:0;
  overflow:hidden;
  background-color:#1db8ca;
  -webkit-transition:left 0.5s ease-out 0.3s;
  transition:left 0.5s ease-out 0.3s;
}
.map-container-wrapper > .inner {
  -webkit-transition:left 0.5s ease-out;
  transition:left 0.5s ease-out;
}
.map-opened .map-container-wrapper {
  left:0;
  -webkit-transition:left 0.5s ease-out;
  transition:left 0.5s ease-out;
}
.map-opened .map-container-wrapper > .inner {
  left:0;
  -webkit-transition:left 0.5s ease-out 0.3s;
  transition:left 0.5s ease-out 0.3s;
}
.map-container {
  display:block;
  height:100%;
  width:calc(50vw + 300px);
  position:absolute;
  top:0;
  right:0;
}
button.map-button {
  display:block;
  height:50px;
  position:absolute;
  border-radius:0;
  top:0;
  padding:0;
  font-size:22px;
  font-weight:600;
  color:#ffffff;
  -webkit-transition:color 0.2s ease-out;
  transition:color 0.2s ease-out;
}
button.map-button.map-out {
  right:calc(50vw + 300px - 260px);
  width:260px;
}
button.map-button.map-in {
  right:0;
  width:216px;
}
button.map-button .icon {
  width:11px;
  height:11px;
}
button.map-button .icon > * { fill:#ffffff; }
button.map-button .icon-arrow {
  width:14px;
  height:13px;
  margin-right:10px;
  -webkit-transform:rotate(180deg);
  transform:rotate(180deg);
}
button.map-button .icon-pin {
  width:12px;
  height:18px;
  margin-left:14px;
  position:relative;
  top:1px;
}
button.map-button .cross {
  display:inline-block;
  width:16px;
  height:16px;
  position:relative;
  top:1px;
  margin-right:8px;
  -webkit-transform:rotate(-45deg);
  transform:rotate(-45deg);
}
button.map-button .cross:before, button.map-button .cross:after {
  content:'';
  display:block;
  width:2px;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background-color:#ffffff;
}
button.map-button .cross:before { left:7px; }
button.map-button .cross:after {
  transform-origin:0 0;
  top:9px;
  -webkit-transform:rotate(-90deg);
  transform:rotate(-90deg);
}
.river-image {
  display:block;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
}
.river-map-wrapper > .inner:after, .river-map-wrapper > .inner:before {
  content:'';
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:#ffffff;
  z-index:1;
  -webkit-transition:left 1s ease-out;
  transition:left 1s ease-out;
}
.river-map-wrapper > .inner:after {
  right:100%;
  -webkit-transition:right 0.5s ease-out;
  transition:right 0.5s ease-out;
}
html:not(.wf-loading) .river-map-wrapper.all-image-loaded > .inner:before { left:100%; }
@media only screen and (max-width: 1200px) {
  .river-map-wrapper > .inner {
    left:calc(-50vw + 410px);
    right:calc(-50vw + 410px);
  }
  .map-container { width:100vw; }
  button.map-button.map-out { right:calc(100vw - 260px); }
}
@media only screen and (max-width: 860px) {
  .river-map-wrapper > .inner {
    left:-20px;
    right:-20px;
  }
}