:root {
  color-scheme: light;

  --bg: #ffffff;
  --bg-elevated: #fbfbfb;
  --bg-elevated-hover: #ffffff;
  --text: #000000;
  --text-secondary: #666666;
  --text-tertiary: #888888;
  --text-muted: #9b9b9b;
  --text-pill: #555555;
  --border: #e3e3e6;
  --border-strong: #000000;
  --border-subtle: rgba(0, 0, 0, 0.2);
  --shadow-sm: rgba(0, 0, 0, 0.03);
  --shadow-md: rgba(0, 0, 0, 0.08);
  --accent: #10b981;
  --card-shadow: rgba(0, 0, 0, 0.12);
  --device-bezel: #e6e6e9;
  --device-base-1: #f2f2f4;
  --device-border: rgba(0, 0, 0, 0.08);
}

/* Auto: follow the OS/browser preference unless the visitor picked a theme explicitly */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #121214;
    --bg-elevated: #1c1c1f;
    --bg-elevated-hover: #232327;
    --text: #f0f0ee;
    --text-secondary: #a5a5a8;
    --text-tertiary: #909094;
    --text-muted: #85858a;
    --text-pill: #b8b8bc;
    --border: #2c2c30;
    --border-strong: #f0f0ee;
    --border-subtle: rgba(255, 255, 255, 0.22);
    --shadow-sm: rgba(0, 0, 0, 0.4);
    --shadow-md: rgba(0, 0, 0, 0.55);
    --card-shadow: rgba(0, 0, 0, 0.5);
    --device-bezel: #1d1d1f;
    --device-base-1: #3a3a3c;
    --device-border: rgba(255, 255, 255, 0.08);
  }
}

/* Explicit choice, stored in localStorage and applied by static/js/theme-toggle.js */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #121214;
  --bg-elevated: #1c1c1f;
  --bg-elevated-hover: #232327;
  --text: #f0f0ee;
  --text-secondary: #a5a5a8;
  --text-tertiary: #909094;
  --text-muted: #85858a;
  --text-pill: #b8b8bc;
  --border: #2c2c30;
  --border-strong: #f0f0ee;
  --border-subtle: rgba(255, 255, 255, 0.22);
  --shadow-sm: rgba(0, 0, 0, 0.4);
  --shadow-md: rgba(0, 0, 0, 0.55);
  --card-shadow: rgba(0, 0, 0, 0.5);
  --device-bezel: #1d1d1f;
  --device-base-1: #3a3a3c;
  --device-border: rgba(255, 255, 255, 0.08);
}

/* Suppresses every transition until static/js/theme-toggle.js lifts it on
   window "load" — without this, a slow-loading render-blocking resource
   (e.g. the Google Fonts stylesheet) can delay first paint long enough that
   the eventual paint animates through the color transitions below instead
   of snapping straight to the right theme. */
.no-transition,
.no-transition * {
  transition: none !important;
}

body {
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.2s ease, color 0.2s ease;
}

body, h4 small, .email, .hero h1 {
  font-family: "Roboto Slab", Lora, Georgia, serif;
  font-weight: 300;
}

.hero h1 {
  display: block;
  font-size: 30px;
}

body {
  overflow-x: hidden;
  font-size: 18px;
  line-height: 1.6;
}

i {
  font-family: Garamond, serif;
  margin-right: 4px;
  font-weight: bolder;
}

i.playfair {
  font-family: "Playfair Display", Georgia, "Times New Roman", Times, serif;
  margin-right: 4px;
  font-weight: 400;
  font-size: 12px;
}

.fluid {
  width: 96%;
  clear: both;
  display: inline-block;
  padding-left: 2%;
  padding-right: 2%;
}

.clearfix {
  clear: both;
}

.left {
  float: left;
}

.right {
  float: right;
}

a {
  color: var(--text);
}

.text-center {
  text-align: center;
}

p {
  margin: 0 0 4px 0;
}

.name, h1, h3, h4, h5, h6 {
  font-family: "Playfair Display", Georgia, "Times New Roman", Times, serif;
}

h1 {
  font-size: 36px;
  font-weight: 900;
}

h2 {
  font-size: 30px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 65px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 12px;
}

/* Site logo — a <p>, not a heading, since it repeats on every page and
   isn't any single page's actual topic (only one real h1 per page). */
.name {
  font-size: 36px;
  font-weight: 900;
  display: inline-block;
  /* Matches normalize.css's default h1 margin exactly, since this element
     used to be an <h1> — normalize resets h1's margin to .67em 0 but never
     touches <p>'s (browser default ~1em 0), so leaving this unset would
     silently add vertical space around the logo that wasn't there before. */
  margin: 0.67em 0;
}

.name small {
  font-size: 27%;
  font-weight: 400;
}

h3 {
  font-weight: 700;
}

h4 {
  font-weight: 700;
}

h4 small {
  font-size: 36px;
  color: var(--text-muted);
  margin-top: 25px;
  display: block;
}

h4 a {
  color: var(--text-muted);
}

.email {
  font-size: 18px;
  display: inline-block;
  color: var(--text);
  text-decoration: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 9999px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.theme-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.theme-option:hover {
  color: var(--text);
}

.theme-option[aria-pressed="true"] {
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 1px 3px var(--shadow-sm);
}

.theme-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.theme-option svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* CSS-drawn MacBook frame around the work-grid screenshots. Colors come from the
   --device-* tokens so the frame switches between light silver and dark space-grey
   along with the rest of the page. */
.mockup {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.mockup-screen {
  background: var(--device-bezel);
  border: 1px solid var(--device-border);
  border-radius: 10px 10px 2px 2px;
  padding: 8px;
  box-shadow: 0 16px 36px var(--card-shadow);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.mockup-screen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.mockup-base {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  /* A real laptop base flares a little past the display above it — a fixed
     pixel amount, not a percentage, so the effect is consistent at every
     screen size without ever risking horizontal overflow on narrow ones
     (a percentage overshoot did exactly that at the 320px breakpoint). */
  width: calc(100% + 10px);
  height: 8px;
  background: var(--device-base-1);
  border: 1px solid var(--device-border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.subject {
  position: relative;
}

.content {
  margin: 0 auto;
  max-width: 600px;
}

.content p {
  font-size: 22px;
}

.hero {
  margin: clamp(110px, 16vh, 170px) auto 0;
  line-height: 1.8;
  text-align: center;
  max-width: 500px;
}

.hero .amp {
  font-family: "Playfair Display", Garamond, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.25em;
  margin: 0 0.06em 0 0.02em;
  vertical-align: -0.02em;
}

.hero .grey {
  color: var(--text-tertiary);
  margin-top: 10px;
  display: inline-block;
}

.hero-notice {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

.notice-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 18px 7px 13px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-size: 13.5px;
  color: var(--text-pill);
  text-decoration: none;
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 300;
  letter-spacing: -0.01em;
  transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px var(--shadow-sm);
}

.notice-pill:hover {
  background: var(--bg-elevated-hover);
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: 0 4px 14px var(--shadow-md);
  transform: translateY(-1px);
}

.notice-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

.notice-pill strong {
  font-weight: 500;
  color: var(--text);
}

.notice-arrow {
  color: var(--text-tertiary);
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition: transform 0.2s ease, color 0.2s ease;
}

.notice-pill:hover .notice-arrow {
  transform: translateX(3px);
  color: var(--text);
}

.description {
  width: 40%;
}

.our-work {
  margin-top: 200px;
}

/* Homepage nearshore teaser — one quiet line pointing at the dedicated page */
.nearshore-line {
  text-align: center;
  max-width: 480px;
  margin: 40px auto 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-tertiary);
}

.nearshore-line a {
  color: var(--text-secondary);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--border-subtle);
}

/* Dedicated landing-page layout (nearshore-development-chile.html) */
.page-hero {
  max-width: 720px;
  margin: 0 auto;
  padding-top: 100px;
  text-align: center;
}

.page-title {
  font-family: "Playfair Display", Georgia, "Times New Roman", Times, serif;
  font-weight: 700;
  font-size: 52px;
  margin: 0 0 20px;
  line-height: 1.15;
}

.page-subtitle {
  font-size: 20px;
  line-height: 1.6;
  color: var(--text-secondary);
  font-family: "Roboto Slab", Lora, Georgia, serif;
  font-weight: 300;
  margin: 0;
}

.page-content {
  max-width: 680px;
  margin: 90px auto 0;
}

.page-content h2 {
  font-size: 26px;
  margin: 0 0 20px;
}

.page-content p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 16px;
}

.page-content section + section {
  margin-top: 70px;
}

.tz-table {
  width: 100%;
  border-collapse: collapse;
  margin: 25px 0 10px;
  font-size: 15px;
}

.tz-table th, .tz-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.tz-table th {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  color: var(--text);
}

.tz-table td {
  color: var(--text-secondary);
}

.tz-table tr.tz-highlight td {
  color: var(--text);
  font-weight: 500;
}

.faq-item {
  margin-bottom: 28px;
}

.faq-item h3 {
  font-size: 19px;
  margin: 0 0 8px;
}

.faq-item p {
  margin: 0;
}

.page-cta {
  text-align: center;
  margin: 90px auto 0;
  padding-top: 70px;
  border-top: 1px solid var(--border);
}

/* Comparisons hub (compare/index.html) */
.compare-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.compare-card {
  display: block;
  padding: 28px 30px;
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.compare-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 8px 24px var(--card-shadow);
}

.compare-card h2 {
  margin: 0 0 8px;
  color: var(--text);
}

.compare-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 16px;
}

.services-holder {
  width: 50%;
}

.services {
  position: relative;
  font-size: 20px;
  padding-left: 20px;
  padding-right: 80px;
}

.items {
  padding-top: 70px;
}

.services:before {
  content: "{";
  font-size: 100px;
  font-family: "Roboto Slab", "Playfair Display", Georgia, "Times New Roman", Times, serif;
  position: absolute;
  font-weight: 400;
  left: -25px;
}

.services:after {
  content: "}";
  font-size: 100px;
  font-family: "Roboto Slab", "Playfair Display", Georgia, "Times New Roman", Times, serif;
  font-weight: 400;
  position: absolute;
  top: 0;
  right: 39px;
}

.frame-spacing {
  margin-top: 80px;
}

.work {
  margin-bottom: 150px;
}

.central-perk {
  position: relative;
}

.side {
  position: absolute;
  right: 152px;
  bottom: 0;
  width: 200px;
}

.side p {
  font-size: 13px;
  font-family: "Courier New", Courier, monospace;
  padding-bottom: 50px;
  line-height: 1.4;
}

.jack {
  margin-bottom: -80px;
}

.tags {
  font-family: "Courier New", Courier, monospace;
  transform: rotate(-90deg);
  position: absolute;
  left: -120px;
  font-size: 18px;
}

a.project {
  font-weight: bold;
  text-align: center !important;
  display: block;
}

.cta-line {
  font-size: 22px;
  font-family: "Roboto Slab", Lora, Georgia, serif;
  color: var(--text-secondary);
  margin-top: 20px;
}

.cta-line a {
  color: var(--text);
  font-weight: 500;
  text-decoration: underline;
}

.footer-note {
  font-size: 13px;
  color: var(--text-secondary);
}

.footer-note a {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--border-subtle);
}

.tags.tags-short {
  left: -39px;
}

.cta {
  margin-top: 100px;
  margin-bottom: 150px;
}

.cta a, .name a {
  text-decoration: none;
}

.cta a:hover, .email:hover, footer a:hover {
  text-decoration: underline;
}

footer {
  bottom: 50px;
  position: relative;
  font-family: "Courier New", Courier, monospace;
  margin-top: 100px;
}

footer a {
  text-decoration: none;
}

.colophon, .magento {
  width: 76%;
  padding-left: 13%;
  padding-right: 13%;
  padding-top: 100px;
}

.highlight {
  border-radius: 1em 0 1em 0;
  background: linear-gradient(-100deg, rgba(250, 247, 133, 0.3), rgba(250, 247, 133, 0.7) 95%, rgba(250, 247, 133, 0.1));
  display: inline;
}

#magento .colophon, #laravel .colophon {
  padding-top: 0px;
}

#magento h2 {
  color: #f46f25;
}

#magento .content p, #laravel .content p {
  text-align: justify;
  font-size: 18px;
  margin-bottom: 10px;
}

#magento blockquote, #laravel blockquote {
  background: #eee;
  padding: 25px 25px 120px 25px;
  margin: 15px 0;
  font-family: Georgia, serif;
  font-size: 21px;
  border-radius: 2px;
  position: relative;
}

form {
  background: #f7f7f7;
  padding: 25px;
  margin-top: 15px;
  margin-bottom: 15px;
  max-width: 600px;
  margin: 0 auto;
}

#magento blockquote small, #laravel blockquote small {
  font-family: "Roboto Slab", Lora, Georgia, serif;
  font-size: 14px;
  display: inline-block;
  width: 60%;
  float: right;
  text-align: right;
  margin-top: 22px;
}

#laravel h2 {
  color: #f4645f;
}

form input, form select, form textarea {
  display: block;
  width: -webkit-fill-available;
  margin-bottom: 10px;
  padding: 10px 0 10px 10px;
  border: 1px solid #ccc;
}

.select {
  border: 1px solid #ccc;
  overflow: hidden;
  margin-bottom: 0px;
}

form select {
  padding: 10px 10px;
  border: none;
  box-shadow: none;
  background: #fff;
  background-image: none;
  -webkit-appearance: none;
  margin-bottom: 0;
}

form .btn-cta {
  width: 100%;
  border: none;
  background: #2196F3;
  border-radius: 3px;
  color: #fff;
  padding: 11px 0;
  margin-top: 15px;
}

.message {
  margin-top: 10px;
  display: inline-block;
}

blockquote img {
  display: inline-block;
  position: absolute;
  bottom: 10px;
  right: 24px;
}

.japan h1 {
  font-size: 100px;
  font-weight: 900;
  display: block;
  /* Matches the browser's default h4 margin exactly (measured: 1.33em),
     since this element used to be an <h4> before being promoted to the
     page's one real h1. */
  margin: 1.33em 0;
}

.src {
  padding-top: 150px;
  padding-left: 80px;
}

ul.list {
  margin-bottom: 50px;
  margin-left: 0px;
  width: 315px;
  padding-left: 0;
}

ul.list b {
  margin-bottom: 15px;
  display: inline-block;
}

ul.list li {
  list-style: none;
  font-family: "Courier New", Courier, monospace;
  line-height: 1.7;
}

.asterisk:after {
  content: "*";
  margin-left: 5px;
  color: red;
}

/* Media queries */

/* Large Devices, Wide Screens + Desktops */
@media only screen and (max-width : 1200px) {
  .hero {
    margin-top: 100px;
    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
  }

  .right.items {
    float: left;
    padding-top: 0;
  }

  .items {
    padding-top: 47px;
    padding-left: 25px;
    width: 300px;
  }

  .services-holder {
    width: 50%;
  }

  .services:before {
    font-size: 156px;
    top: -41px;
  }

  .services:after {
    font-size: 156px;
    right: 6px;
    top: -41px;
  }

  .side {
    right: 0;
  }
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
  .hero {
    margin-top: 100px;
    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
  }

  .tags {
    position: static;
    transform: none;
    left: auto;
    font-size: 14px;
    text-align: center;
    margin-bottom: 30px;
  }

  .side {
    position: static;
    right: auto;
    bottom: auto;
    width: auto;
    max-width: 460px;
    margin: 30px auto 0;
    text-align: center;
  }

  .side p {
    padding-bottom: 0;
    font-size: 14px;
  }

  /* pasta / zebra / jack are decorative companions to the screenshot */
  .side img {
    display: none;
  }

  .right.items {
    float: left;
    padding-top: 0;
  }

  .items {
    padding-top: 89px;
    padding-left: 25px;
    width: 300px;
  }

  .services:before {
    font-size: 156px;
    top: 0;
  }

  .services:after {
    font-size: 156px;
    right: 6px;
    top: 0px;
  }

  h4, .japan h1 {
    margin: 0;
  }

  .frame-spacing {
    margin-top: 50px;
  }

  .work {
    margin-bottom: 200px;
  }

  .japan h1 {
    font-size: 125px;
  }

  .nearshore-line {
    max-width: 80%;
  }

  .page-title {
    font-size: 38px;
  }

  .page-subtitle {
    font-size: 18px;
  }

  .page-content {
    margin-top: 60px;
  }

  .page-content section + section {
    margin-top: 50px;
  }

  .tz-table {
    font-size: 13px;
  }

  .tz-table th, .tz-table td {
    padding: 8px 6px;
  }
}

@media screen and (min-width: 481px) and (max-width: 767px) {
  .hero .description {
    width: 100%;
  }

  .hero .services-holder {
    width: 80%;
    text-align: left;
    float: none;
    margin: 0 auto;
  }

  .services:before {
    font-size: 156px;
    top: 0;
    left: -46px;
  }

  .services:after {
    font-size: 156px;
    right: -17px;
    top: 0px;
  }

  .items {
    padding-left: 0;
  }

}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
  .hero-notice {
    margin-top: 24px;
  }

  .notice-pill {
    font-size: 12px;
    padding: 6px 14px 6px 10px;
    gap: 7px;
    max-width: 100%;
    box-sizing: border-box;
  }

  .header h1.name {
    font-size: 24px;
  }

  .header .email {
    font-size: 13px;
  }

  .header .header-actions {
    margin-top: 25px;
    gap: 10px;
  }

  .theme-option {
    width: 22px;
    height: 22px;
  }

  .hero {
    margin-top: 80px;
    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
  }

  .hero .description {
    width: 100%;
  }

  .hero .services-holder {
    width: 100%;
  }

  .page-hero {
    padding-top: 70px;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
  }

  .page-title {
    font-size: 30px;
  }

  .page-cta {
    margin-top: 60px;
    padding-top: 50px;
  }

  .services {
    width: 388px;
    padding-left: 0;
  }

  .services:before {
    top: 0;
    left: -29px;
  }

  .services:after {
    right: 58px;
    top: 0px;
  }

  .items {
    padding-left: 11px;
  }

  .items.right {
    padding-right: 6px;
  }

  .tags {
    font-size: 12px;
    margin-bottom: 24px;
  }

  .side {
    padding: 0 10px;
    box-sizing: border-box;
  }

  .side p {
    font-size: 13px;
  }

  .our-work {
    margin-top: 100px;
  }

  .text-center img, .laravel-project img {
    width: 100%;
    height: auto;
  }

  h4, .japan h1 {
    font-size: 40px;
    margin: 0;
  }

  h4 small {
    font-size: 24px;
    margin-top: 8px;
  }

  .frame-spacing {
    margin-top: 30px;
  }

  .colophon {
    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 100px;
  }

  .japan h1 {
    font-size: 82px;
  }

  .src {
    padding-top: 50px;
  }

  ul.list {
    margin-left: 0px;
    width: 249px;
    padding-left: 0;
  }

}

@media screen and (min-width: 425px) and (max-width: 480px) {
  .items {
    padding-left: 36px;
  }

  .services:after {
    right: 100px;
    top: 0px;
  }

}

@media only screen and (max-width : 425px) {
  .items {
    padding-left: 54px;
  }

  .services:after {
    right: 131px;
  }
}


@media only screen and (max-width : 375px) {
  .items {
    padding-left: 54px;
  }

  .services:after {
    right: 141px;
  }
}

@media screen and (min-width: 321px) and (max-width: 358px) {
  .items {
    padding-left: 40px;
  }

  .services:after {
    right: 171px;
  }
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
  .header h1.name {
    font-size: 24px;
  }

  .header .email {
    font-size: 13px;
  }

  .header .header-actions {
    margin-top: 30px;
    gap: 10px;
  }

  .hero {
    margin-top: 50px;
    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
  }

  .hero .description {
    width: 100%;
  }

  .hero .services-holder {
    width: 100%;
  }

  .services {
    width: 231px;
    padding-left: 0;
  }

  .services:before {
    top: 0px;
    font-size: 156px;
    left: -29px;
  }

  .services:after {
    font-size: 156px;
    right: 25px;
  }

  .items {
    padding-top: 88px;
    padding-left: 34px;
  }

  .right.items {
    padding-top: 0;
  }

  .our-work {
    margin-top: 100px;
  }

  .tags {
    font-size: 12px;
    margin-bottom: 24px;
  }

  .side {
    padding: 0 10px;
    box-sizing: border-box;
  }

  .side p {
    font-size: 13px;
  }

  .text-center img {
    width: 100%;
    height: auto;
  }

  h4, .japan h1 {
    font-size: 40px;
    margin: 0;
  }

  h4 small {
    font-size: 24px;
    margin-top: 8px;
  }

  .frame-spacing {
    margin-top: 30px;
  }

  .colophon {
    width: 96%;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 100px;
  }

  .japan h1 {
    font-size: 66px;
  }

  .src {
    padding-top: 50px;
  }

  ul.list {
    margin-left: 0px;
    width: 249px;
    padding-left: 0;
  }
}