/*
 * Footer matched to the reference store (superchillstore.com). Every value was measured on the reference at 1920px:
 * band #16819f / 272px, headings 15px weight 900, links 13px / 34px rows, social icons 36px cells, payment cards 24px
 * high, legal block 13px centered. Columns are five equal 368px cells inside a 40px page gutter.
 */
footer.sc-footer.sc-footer-ref { margin: 0; padding: 0; background: #f8f8f8; font-family: 'Spartan', Arial, sans-serif; color: #202020; }

/* ---- newsletter band ---- */
.sc-ft-top { background: #16819f; padding: 50px 0 60px; }
.sc-ft-wrap { max-width: 1840px; margin: 0 auto; padding: 0 40px; text-align: center; box-sizing: border-box; }
.sc-nl-title { margin: 0 0 30px; font-size: 24px; line-height: 30px; font-weight: 400; color: #202020; text-transform: none; letter-spacing: 0; }
.sc-nl-des { margin: 0 auto 30px; max-width: 700px; font-size: 14px; line-height: 22px; font-weight: 400; color: #f8f8f8; }
.sc-nl-form { display: flex; justify-content: center; width: 550px; max-width: 100%; margin: 0 auto; height: 50px; }
.sc-nl-form input[type=email] { flex: 0 0 400px; width: 400px; min-width: 0; height: 50px; box-sizing: border-box; border: 1px solid #fff; border-radius: 0; background: #fff; padding: 0 15px; font: 400 14px 'Spartan', Arial, sans-serif; color: #505050; outline: 0; }
.sc-nl-form input[type=email]::placeholder { color: #a3a3a3; opacity: 1; }
.sc-nl-form button { flex: 0 0 140px; height: 50px; border: 0; border-radius: 0; background: #293355; color: #fff; font: 500 13px 'Spartan', Arial, sans-serif; letter-spacing: .65px; text-transform: uppercase; cursor: pointer; }
.sc-nl-form button:hover { background: #1e2644; }

/* ---- columns ---- */
.sc-ft-mid { padding: 75px 0 20px; }
.sc-ft-row { max-width: 1920px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; }
.sc-ft-col { padding: 0 10px; min-width: 0; }
.sc-ft-title { margin: 0; padding-bottom: 20px; font-size: 15px; line-height: 18.75px; font-weight: 900; letter-spacing: .75px; text-transform: uppercase; color: #141414; }
.sc-ft-links { list-style: none; margin: 0; padding: 0; }
.sc-ft-links li { margin: 0; padding: 0; }
.sc-ft-links a { display: block; padding: 6px 0; font-size: 13px; line-height: 22px; font-weight: 400; color: #202020; text-transform: capitalize; text-decoration: none; }
.sc-ft-links a:hover { color: var(--purple, #5f3b97); }

/* social icons: Font Awesome 4 glyphs in 36px cells, like the reference */
.social-icons { list-style: none; margin: 0; padding: 0; }
.social-icons li { display: inline-block; width: 37px; height: 37px; margin: 0; }
.social-icons li + li { margin-right: 10px; }
.social-icons a { display: block; width: 36px; height: 36px; line-height: 38px; text-align: left; font-size: 13.5px; color: #202020; border-radius: 50%; text-decoration: none; }
.social-icons a:hover { color: var(--purple, #5f3b97); }
.social-icons .fa-lg { font-size: 18px; }

/* payment cards: the real card images, 24px high, 15px apart */
.sc-ft-pay { margin-top: 45px; }
.sc-ft-pay .sc-ft-title { padding-bottom: 35px; }
.payment-methods { list-style: none; margin: 0; padding: 0; }
.payment-methods li { display: inline-block; margin-right: 15px; height: 24px; }
.payment-methods img { display: block; height: 24px; width: auto; }

/* ---- legal block ---- */
.sc-ft-bottom { background: #fff; padding: 20px 50px 70px; }
.sc-ft-bottom address { max-width: 1820px; margin: 0 auto; font-style: normal; font-size: 13px; line-height: 24px; font-weight: 400; color: #505050; text-align: center; }
.sc-ft-bottom address b { font-weight: 700; }

/* ---- smaller screens ---- */
@media (max-width: 1100px) {
  .sc-ft-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
  .sc-ft-mid { padding-top: 50px; }
}
@media (max-width: 700px) {
  .sc-ft-top { padding: 36px 0 40px; }
  .sc-ft-wrap { padding: 0 20px; }
  .sc-nl-title { font-size: 20px; }
  .sc-nl-form { width: 100%; }
  .sc-nl-form input[type=email] { flex: 1 1 auto; width: auto; }
  .sc-nl-form button { flex: 0 0 110px; }
  .sc-ft-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 16px; }
  .sc-ft-bottom { padding: 20px 20px 50px; }
}
@media (max-width: 480px) {
  .sc-ft-row { grid-template-columns: 1fr; }
}

/* ---- fine-tuning after measuring both footers side by side ---- */
.sc-ft-wrap { max-width: 1920px; }                                           /* ref: container is the full 1840px inside a 40px gutter */
.sc-nl-form { justify-content: space-between; }                              /* ref: 400px input at the left, 140px button at the right, 10px apart */
.social-icons { font-size: 0; }                                              /* ref has no whitespace between the icon cells */
.social-icons a { position: relative; top: 1px; font-size: 13.5px; }
.payment-methods { font-size: 13px; }                                        /* whitespace between cards is as wide as a 13px space */
.sc-ft-row { padding-bottom: 15px; }                                         /* ref: 15px below the tallest column */