/* @media (max-width: 1200px) {
}
@media (max-width: 1024px) {
} */

/* Tablet  */
@media (max-width: 768px) {
  .wrapper {
    width: 190;
  }

  /* Header */
  header {
    margin-bottom: 100px;
  }

  .logo {
    width: 50%;
    margin: 0px auto 100px;
  }

  .header__triangle {
    top: -35%;
  }
  .header-puff {
    right: 5%;
    top: 23%;
    width: 35%;
  }
  .header__grid-squares {
    right: -8%;
    top: -30%;
  }
  .header-puff2 {
    top: 32%;
    left: -7%;
    width: 35%;
  }

  .header__heading {
    margin-left: 0;
  }

  /* Mission section  */
  .mission__flex-container {
    flex-direction: column;
  }

  .mission__text-container {
    width: 100%;
    order: 1;
  }

  .mission__image-container {
    width: 100%;
    height: 500px;
    margin: 0 auto 100px;
  }

  .circle-1 {
    width: 25%;
    bottom: 5%;
    left: 50%;
  }
  /* Tagline */
  .tag-line:before {
    width: 40%;
  }

  .tag-line-container .tag-cheddar-puff-1,
  .tag-line-container .tag-cheddar-puff-2 {
    width: 35%;
  }

  .tag-line-container .tag-cheddar-puff-1 {
    left: -16%;
  }

  .tag-line-container .tag-cheddar-puff-2 {
    right: -14%;
  }

  /* Benefits  */
  .benefits {
    margin-bottom: 150px;
  }

  .benefits__flex-container {
    flex-direction: column;
  }

  .benefits__image-container {
    width: 95%;
  }

  .benefits__text-container {
    width: 100%;
  }

  /* Introducing  */
  .introducing__flex-container {
    flex-direction: column;
  }

  .introducing__text-container {
    width: 100%;
    order: 1;
  }

  .introducing__image-container {
    width: 100%;
    margin-bottom: 600px;
  }

  .introducing__grid-circles {
    width: 65%;
    top: 100px;
    right: -25%;
  }

  .introducing__puff-shape {
    width: 40%;
    top: -100px;
    right: 20%;
  }

  #box {
    left: 30%;
    top: 50px;
  }

  /* Sign up  */
  .sign-up__flex-container {
    flex-direction: column;
  }

  .sign-up__image-container {
    width: 100%;
  }

  .sign-up__text-container {
    width: 100%;
  }
  /* Footer  */
  footer {
    padding: 25px 0 0 0;
  }

  .footer__flex-container {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }

  .logo-container {
    width: 100%;
    margin-bottom: 50px;
  }

  .footer__contact-container {
    width: 100%;
  }

  .footer__socials {
    flex-direction: column;
    margin-bottom: 25px;
  }

  .footer__socials a {
    font-size: 2.6rem;
  }
}

@media (max-width: 480px) {
  /* General */
  .mobile-only {
    display: inline-block;
    visibility: visible;
    opacity: 1;
  }

  /* Header  */

  header {
    margin-bottom: 0;
  }
  .logo {
    width: 50%;
    margin: 0px auto 100px;
  }

  .header__triangle {
    top: -9%;
    right: -30%;
    width: 60%;
  }
  .header-puff {
    right: -4%;
    top: 15%;
    width: 35%;
  }
  .header__grid-squares {
    right: -20%;
    top: -8%;
  }
  .header-puff2 {
    top: 0;
    left: -18%;
    width: 40%;
  }

  /* Mission  */
  .mission {
    padding-top: 0;
  }
  .mission__svg {
    left: 10%;
  }

  .mission__image-container {
    margin-bottom: 0;
  }

  .grid-rectangles {
    width: 45%;
    right: -7%;
    top: -50px;
  }

  .rectangle {
    width: 15%;
    right: 5%;
    top: -5%;
  }

  .cheddar-puff-1,
  .cheddar-puff-2,
  .cheddar-puff-3 {
    width: 60%;
  }

  .circle-1 {
    bottom: 30%;
  }

  /* tagline  */

  .tag-line-container {
    margin-bottom: 150px;
  }
  .tag-line__text::before {
    width: 40%;
  }

  .tag-line-container .tag-cheddar-puff-1,
  .tag-line-container .tag-cheddar-puff-2 {
    width: 40%;
    z-index: -1;
  }

  .tag-line-container .tag-cheddar-puff-1 {
    top: 0;
    left: -12%;
  }
  .tag-line-container .tag-cheddar-puff-2 {
    top: 100%;
  }

  /* Benefits  */

  .benefits {
    margin-bottom: 50px;
  }
  .benefits__grid-squares {
    width: 90%;
    top: -10%;
  }

  .benefits__circle {
    width: 60%;
    right: -5%;
  }

  .benefits__puff {
    width: 60%;
    bottom: -20%;
  }

  .benefits__image-container {
    margin-bottom: 50px;
  }

  .benefits__text {
    padding: 0;
  }
  .benefits__text p {
    width: 95%;
    padding-left: 50px;
  }
  .benefits__text .heading {
    padding-right: 100px;
  }

  .benefits__text::after {
    width: 100px;
    top: 20px;
  }

  /* Introducing  */

  .introducing {
    margin-bottom: 150px;
  }

  .line-break {
    display: block;
  }
  .line-break::before {
    content: '-';
  }

  .introducing__text-container h3 {
    font-weight: 400;
  }

  #box {
    left: 30%;
    top: 50px;
  }

  /* Change size of box  */
  .box .side3 div,
  .box .side4 div,
  .box div {
    width: 200px;
    height: 200px;
  }

  .introducing__puff-shape {
    top: 0px;
  }

  .introducing__image-container {
    margin-bottom: 400px;
  }

  .introducing__puff-1 {
    width: 70%;
  }
  .introducing__puff-2 {
    width: 40%;
  }
  .introducing__puff-3 {
    width: 30%;
  }

  /* sign up  */

  .section__heading span {
    margin-bottom: 0;
  }

  .sign-up__image-container {
    margin-bottom: 100px;
  }

  .sign-up__text-container p {
    margin-bottom: 50px;
  }

  /* .sign-up__rectangle {
    bottom: -10%;
  } */

  .input-container {
    display: flex;
    flex-direction: column;
  }

  input[type='email'] {
    width: 252px;
    margin-bottom: 10px;
  }
  .legal-wrap {
    max-width: 300px;
  }

  .btn-submit {
    padding: 10px 16px 0px 17px;
    height: 36px;
    width: 252px;
    margin-left: 0;
  }

  .btn-submit::before {
    height: 36px;
    width: 255px;
  }

  .btn-submit::after {
    top: 7px;
    left: 0;
    height: 36px;
    width: 252px;
  }

  .btn-wrap:hover .btn-submit::before {
    width: 265px;
  }
  .btn-wrap:hover .btn-submit {
    width: 200px;
  }
}