/* --- 1280px --------------------------------------------- */
/* -- iPad --------------------------------------------- */
@media only screen and (max-width: 1080px) and (min-height: 340px) {
  #claim {
    font-size: 50px;
  }
  #claim2 {
    font-size: 50px;
  }
}
/* --- 980px --------------------------------------------- */
@media only screen and (max-width: 979px) {
  #claim {
    font-size: 50px;
  }
  #claim2 {
    font-size: 50px;
  }
}
/* --- widescreen laptop? --------------------------------------------- */
@media only screen and (max-height: 800px) and (orientation: landscape) {
  #claim {
    font-size: 60px;
    left: 5%;
    top: 40%;
  }
  #claim2 {
    font-size: 60px;
    left: 50%;
  }
}
/* --- 850px --------------------------------------------- */
@media only screen and (max-width: 850px) {
  #content .box {
    padding-bottom: 20px;
    width: 100%;
    height: auto;
    min-height: 0px;
  }
  #content .box .boxcontent {
    position: relative;
  }
}
/* --- 768px --------------------------------------------- */
@media only screen and (max-width: 767px) {
  #claim {
    font-size: 30px;
  }
  #claim2 {
    font-size: 30px;
  }
  #bubble_main {
    width: 26vw;
    height: 26vw;
    font-size: 12px;
    right: 5%;
    bottom: 25%;
  }
  #badge2 {
    bottom: 15%;
  }
}
/* --- 580px --------------------------------------------- */
@media only screen and (max-width: 584px) {
  body {
    background-image: none;
  }
  #background_mobile {
    display: block;
  }
  #badge {
    max-width: 30vw;
  }
  #claim {
    top: 20%;
  }
  #claim2 {
    left: auto;
    top: auto;
    bottom: 30%;
    right: 10%;
  }
}
/* --- 480px --------------------------------------------- */
@media only screen and (max-width: 479px) and (orientation: portrait) {
  body {
    font-size: 16px;
  }
  h1, .h1 {
    font-size: 30px;
  }
  h2, .h2 {
    font-size: 25px;
  }
  #content .boxcontent {
    padding: 15px;
  }
}
/* --- 380px --------------------------------------------- */
/* mobile LANDSCAPE ---------------------------------------------*/
@media only screen and (max-height: 375px) and (orientation: landscape) {
  body {
    font-size: 16px;
  }
  h1, .h1 {
    font-size: 30px;
  }
  h2, .h2 {
    font-size: 25px;
  }
  #content .boxcontent {
    padding: 15px;
  }
  #badge2 {
    max-width: 40vh;
  }
  #bubble_main {
    width: 36vh;
    height: 36vh;
  }
}