/* screen - q4 */

.q4 {
  align-items: center;
  /*background-color: var(--white);*/
  display: flex;
  flex-direction: column;
  height: 926px;
  overflow: hidden;
  /*width: 428px;*/
}

.q4 .hdc-logo_-colour-portrait-01 {
  height: 88px;
  margin-left: 1.0px;
  margin-top: 28px;
  object-fit: cover;
  width: 143px;
}

.q4 .what-track-would-you-choose {
  letter-spacing: 0;
  line-height: 20px;
  margin-left: 2.0px;
  margin-top: 50px;
  min-height: 50px;
  text-align: center;
  /*width: 212px;*/
}

.q4 .group-27 {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  margin-top: 59px;
  min-height: 412px;
  width: 428px;
}

.q4 .overlap-group1 {
  background-image: url(../../images/hauraki/track-1---short-lq@1x.png);
  background-position: 50% 50%;
  background-size: cover;
  height: 137px;
  position: relative;
  width: 428px;
}

.q4 .rectangle {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  height: 49px;
  left: 0;
  position: absolute;
  top: 88px;
  width: 428px;
}

.q4 .waihi-walkway {
  left: 33px;
  letter-spacing: 0;
  line-height: 18px;
  position: absolute;
  text-align: center;
  top: 107px;
  width: 364px;
}

.q4 .overlap-group2 {
  background-image: url(../../images/hauraki/track-2---medium-lq@1x.png);
  background-position: 50% 50%;
  background-size: cover;
  height: 137px;
  position: relative;
  width: 428px;
}

.q4 .karangahake-mountain {
  left: 10px;
  letter-spacing: 0;
  line-height: 18px;
  position: absolute;
  text-align: center;
  top: 106px;
  width: 411px;
}

.q4 .overlap-group {
  background-image: url(../../images/hauraki/waitawheta-tramway-2006-credit-k-knill-doc-77--scaleheightwzc1mf@1x.png);
  background-position: 50% 50%;
  background-size: cover;
  height: 138px;
  position: relative;
  width: 428px;
}

.q4 .rectangle-5 {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  height: 49px;
  left: 0;
  position: absolute;
  top: 89px;
  width: 428px;
}

.q4 .waitawheta-tramway {
  left: 40px;
  letter-spacing: 0;
  line-height: 18px;
  position: absolute;
  text-align: center;
  top: 105px;
  width: 350px;
}

.q4 .lower-banner-01 {
  height: 252px;
  margin-left: 1.0px;
  margin-top: 11px;
  object-fit: cover;
  width: 429px;
}