/* TGDB CSS for the Survival Kids (Nintendo) takeover in Autumn 2025 */
/* (c) Flipside Web Design Limited 2025 */
/* Author: Richard Adams - r.adams@flipside.co.uk */

@charset "utf-8";

body {
  /* Surround on DESKTOP - header & footer on TABLET & MOBILE */
  background-image: url('../takeover/survivalkids/background.jpg');
  background-size: 2297px auto;
  background-position: center top;
  background-color: #1F2A08;
  background-repeat: no-repeat;
  cursor: pointer;
}
body.body24 {
  background-color: #1F2A08;
}

.takeOverMainBanner {
  /* The 'banner' is actually part of the background image, we're just making space for it here */
  height: 240px;
}

.wrapper {
  /* We don't want to see the main wrapper, but will be showing its contents... */
  background: none;
  cursor: default;
  box-shadow: none;
}

.secondWrapper {
  /* ...allow splitting content onto second wrapper */
  padding: 15px 40px 0 40px;
  margin: 8px auto 20px auto;
  background: rgba(29, 37, 85, 1);
  height: inherit;
  cursor: default;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.content, .content.newGamePage {
  /* Reduce top padding as we're split to the second wrapper */
  padding: 20px 0 20px 0;
}

#takeOverMobileBanner {
  display: none;
}

/* --- TABLET -(portrait)------------------------------------------------------------------ */
@media screen and (max-width: 1080px) {
  /* Changes for takeover */
  body {
    /* Show banner on tablet */
    background: #0060AE;
  }
  .takeOverMainBanner {
    /* Not showing the page-top banner on tablet or mobile */
    display: none;
  }
  #takeOverMobileBanner {
    /* raxx - tablet as well.. */
    position: relative;
    top: 55px;
    display: block;
    min-width: 100vw;
    box-sizing: border-box;
    margin: -30px 0 20px -40px;
  }
}

/* --- MOBILE ---------------------------------------------------------------------------- */
@media screen and (max-width: 700px) {
  /* Changes for takeover */
  body {
  }
  .wrapper {
    /* Match the height of the header on mobile */
    height: 0px;
  }
  .secondWrapper {
    height: inherit;
    margin: -20px 0 0 0;
    padding: 30px 40px 0 40px;
  }
  #takeOverMobileBanner {
    /* raxx - tablet as well.. */
    top: 32px;
    margin: -30px 0 -5px -40px;
  }
}