/* [A-Z] */

/* Large devices */
@media (max-width: 1200px) {
  /* <Header> */
  .msg {
    font-size: 25px;
  }
  /* </Header> */
}

/* Medium devices */
@media (max-width: 992px) {
  /* <Header> */
  section.buttons {
    text-align: left;
  }
  /* </Header> */

  /* <Heading> */
  section.game .panel-default > .panel-heading {
    font-size: 24px;
  }
  /* </Heading> */

  /* <Duration> */
  .duration .timer p,
  .bonusPointsTimer p {
    margin-top: 5px !important;
  }
  /* </Duration> */
}

/* Small devices */
@media screen and (max-width: 768px) {
  .main-container section,
  .game-container iframe,
  .game-container {
    height: 1000px;
  }
  /* <Heading> */
  section.game .panel-default > .panel-heading {
    font-size: 16px;
  }
  /* </Heading> */

  /* <Inputs> */
  .inputs li {
    height: 32px;
    font-size: 16px;
    line-height: 32px;
    width: 30px;
  }
  .inputs li input {
    height: 32px;
    font-size: 16px;
    width: 30px;
  }
  #datepicker {
    width: 150px;
  }

  /* </Inputs> */

  /* <Help> */
  .helpContent .heading {
    font-size: 18px;
    font-weight: 700;
  }
  .helpContent p {
    font-size: 12px;
    margin-bottom: 5px;
  }
  /* </Help> */

  /* <Modal> */
  .introModal {
    padding-right: 0 !important;
  }
  .introModal .modal-dialog {
    width: 100% !important;
  }
  .introModal .modal-content {
    background: url("../img/demo_bg.png");
    border-radius: 0;
    height: 620px !important;
    width: 100% !important;
  }
  .modal-size {
    margin: 0;
  }
  .introModal .modal-body h1 {
    transform: rotate(-45deg);
    font-size: 46px;
    position: relative;
    bottom: 20px;
    left: 50px;
  }
  .introModal .modal-body h3 {
    display: none;
  }
  /* </Modal> */
}

/* Extra small devices */
@media (max-width: 480px) {
  /* <Header> */
  .msg {
    font-size: 0.9em;
    line-height: 1em;
    margin: 0 0 5px !important;
  }
  /* </Header> */

  /* <TopButtons> */
  section.buttons button {
    font-size: 14px;
    margin-bottom: 5px;
  }
  /* </TopButtons> */

  /* <Heading> */
  section.game .panel-default > .panel-heading {
    font-size: 16px;
    border-radius: 0;
  }
  /* </Heading> */

  /* <Game> */
  .removeSpace {
    padding: 0;
  }
  /* </Game> */

  /* <Definition> */
  .definition {
    line-height: 30px;
  }
  .definition .root {
    font-size: 18px;
  }
  .definition .meaning {
    font-size: 16px;
  }
  .definition .arrow-left {
    border-width: 5px 7px 5px 0;
    margin: 11px 10px 0;
  }
  /* </Definition> */

  /* <Inputs> */
  .inputs li {
    height: 30px;
    font-size: 14px;
    line-height: 30px;
    width: 25px;
  }
  .inputs li input {
    height: 30px;
    width: 25px;
  }
  #datepicker {
    font-size: 16px;
    padding: 0.3% 1%;
  }
  /* </Inputs> */

  /* <Duration> */
  .duration,
  .timer {
    width: 100%;
  }
  .duration .timer p,
  .bonusPointsTimer p {
    font-size: 14px !important;
    width: 100% !important;
    line-height: 18px !important;
  }

  /* </Duration> */

  /* <BottomButtons> */
  .bottomButtons button {
    font-size: 14px;
    margin-bottom: 5px;
  }
  /* </BottomButtons> */

  /* <Modal> */
  .introModal .modal-body h1 {
    display: none;
  }
  .introModal .modal-content {
    height: 330px !important;
  }
  /* </Modal> */
}