/*
 * Посадочная Гномограда — вёрстка оригинала (landings/1424fbff…/style.css)
 * с сохранением координат всех трёх брейкпоинтов конструктора: 960 / 764 /
 * 320. ID-селекторы конструктора переименованы в говорящие классы, мёртвые
 * виджеты (соцсети, сторы, счётчики) не переносились.
 */

* { margin: 0; padding: 0; box-sizing: content-box; }
html { font-size: 16px; }
body {
  background-color: #413e3f;
  font-family: 'Roboto', 'Arial', sans-serif;
  line-height: 1.2;
}
img { border: 0; display: block; }
a { text-decoration: none; }

.section { position: relative; display: block; }
.section > .container {
  height: 100%;
  margin: 0 auto;
  position: relative;
  width: 960px;
}

/* Кнопки конструктора: белая вуаль при наведении. */
.but { position: absolute; display: block; overflow: hidden; }
.but .overlay {
  width: 100%; height: 100%;
  background-color: #fff;
  position: absolute; top: 0; left: 0;
  opacity: 0;
}
.but:hover .overlay { opacity: .2; transition-duration: .3s; }

/* --- Верхняя полоса ----------------------------------------------------- */
.topbar { background: #fff url(topbar-bg.jpg) center / cover no-repeat; }
.topbar > .container { height: 80px; }
.topbar__logo { position: absolute; width: 73px; height: 74px; top: -4px; left: 130px; z-index: 2; }
.topbar__text {
  position: absolute; width: 392px; height: 46px; top: 17px; left: 216px;
  font-size: 18px; color: #fff; font-weight: bold; line-height: 1.3; z-index: 2;
}
.topbar__play {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .33);
  box-sizing: border-box;
  color: #a26baf;
  font-family: 'Open Sans', 'Arial', sans-serif;
  font-size: 14px; font-weight: 700; line-height: 1.3;
  padding: 8px;
  width: 139px; height: 36px; top: 21px; left: 675px;
  text-align: center; z-index: 3;
}
.topbar__play span { display: block; position: relative; top: 50%; transform: translateY(-50%); white-space: nowrap; }
.topbar__lang {
  position: absolute; top: 30px; right: 10px; z-index: 3;
  font-size: 14px; color: #fff;
}
.topbar__lang a { color: #fff; opacity: .7; }
.topbar__lang a:hover, .topbar__lang .active { opacity: 1; font-weight: bold; }

/* --- Герой -------------------------------------------------------------- */
.hero > .container {
  background: #000 url(hero-bg.jpg) center / contain no-repeat;
  height: 469px;
}
.hero__title { position: absolute; width: 299px; height: 82px; top: 36px; left: 352.5px; z-index: 2; }
.hero__play,
.finale__play {
  background: transparent url(btn-play.png) top left / contain no-repeat;
  border-radius: 10px;
  width: 173px; height: 89px;
  z-index: 4;
}
.hero__play { top: 359px; left: 404px; }

/* --- О игре ------------------------------------------------------------- */
.about > .container {
  background: #413e3f url(ribbon.png) top center / contain no-repeat;
  height: 298px;
}
.about__name {
  position: absolute; width: 955px; height: 41px; top: 80px; left: 3.5px;
  font-size: 32px; color: #fff; font-weight: bold; text-align: center;
}
.about__gnome-left { position: absolute; width: 118px; height: 119px; top: 109px; left: 36px; }
.about__gnome-right { position: absolute; width: 140px; height: 140px; top: 127px; left: 820px; }
.about__descr {
  position: absolute; width: 635px; height: 92px; top: 133px; left: 165px;
  font-size: 18px; color: #fff; text-align: center; line-height: 1.3; z-index: 2;
}
.about__descr p + p { margin-top: 1em; }

/* --- Скриншоты ---------------------------------------------------------- */
.shots > .container { height: 259px; }
.shots__col { position: relative; float: left; width: 33.3333%; height: 100%; }
.shots__col img { position: absolute; width: 300px; height: 258px; top: 0; left: 10px; }

/* --- Финал -------------------------------------------------------------- */
.finale > .container {
  background: #413e3f url(ribbon-bottom.png) bottom center / contain no-repeat;
  height: 473px;
}
.finale__text {
  position: absolute; width: 626px; height: 46px; top: 0; left: 165.5px;
  font-size: 18px; color: #fff; text-align: center; line-height: 1.3;
}
.finale__gnome-cart { position: absolute; width: 120px; height: 95px; top: 84px; left: 255.5px; }
.finale__gnome-round { position: absolute; width: 116px; height: 116px; top: 41px; left: 574.5px; }
.finale__play { top: 85px; left: 391px; }
.finale__copyright {
  position: absolute; width: 400px; top: 363px; left: 280px;
  font-size: 12px; color: #ccc; text-align: center;
}

.finale__support { color: #ffd27a; text-decoration: underline; }
.finale__support:hover { color: #fff; }

/* --- 764 ---------------------------------------------------------------- */
@media only screen and (max-width: 959px) {
  html { font-size: 14px; }
  .section > .container { width: 764px; }

  .topbar__logo { left: 45px; }
  .topbar__text { left: 135px; top: 18px; height: 47px; }
  .topbar__play { left: 567px; }

  .hero > .container {
    background: #000 url(hero-bg.jpg) top center / cover no-repeat;
    height: 373px;
  }
  .hero__title { width: 260px; height: 74px; top: 39px; left: 262px; }
  .hero__play { top: 255px; left: 303px; }

  .about > .container {
    background: #413e3f url(ribbon-764.png) top center / contain no-repeat;
    height: 281px;
  }
  .about__name { width: 764px; top: 50px; left: 0; }
  .about__gnome-left { left: 0; }
  .about__gnome-right { left: 624px; }
  .about__descr { width: 526px; height: 110px; top: 105px; left: 120px; font-size: 17px; }

  .shots__col img { width: 255px; height: 219.3px; left: 0; }
  .shots > .container { height: 220px; }

  .finale__text { top: 38px; left: 75px; }
  .finale__gnome-cart { top: 111px; left: 159px; }
  .finale__gnome-round { top: 68px; left: 474px; }
  .finale__play { top: 110px; left: 289px; }
  .finale__copyright { top: 404px; left: 182px; }
}

/* --- 320 ---------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  html { font-size: 12px; }
  .section > .container { width: 320px; }

  .topbar__logo { top: -5px; left: 10px; }
  .topbar__text { width: 228px; height: 55px; top: 10px; left: 92px; font-size: 14px; }
  .topbar__play { display: none; }
  .topbar__lang { top: 58px; right: 6px; }

  .hero > .container { height: 373px; }
  .hero__title { width: 221px; height: 60px; top: 16px; left: 49.5px; }
  .hero__play { top: 255px; left: 73px; display: block; }

  .about > .container { height: 320px; }
  .about__name { width: 320px; top: 40px; left: 0; }
  .about__gnome-left, .about__gnome-right { display: none; }
  .about__descr { width: 320px; height: 177px; top: 100px; left: 0; }

  .shots > .container { height: auto; overflow: hidden; }
  .shots__col { float: none; width: 100%; height: 258px; }
  .shots__col img { width: 300px; height: 258px; left: 10px; }

  .finale__text { width: 315px; height: 62px; top: 13px; left: 3px; font-size: 16px; }
  .finale__gnome-cart { width: 105px; height: 83px; top: 79px; left: 0.5px; }
  .finale__gnome-round { width: 85px; height: 85px; top: 103px; left: 235.5px; }
  .finale__play { top: 103px; left: 77px; }
  .finale__copyright { top: 356px; left: 0; width: 100%; }
}