/* Reset */
* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
html {margin:0;padding:0;width:100%;height:100%;font-family:'Inter', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto', Helvetica, Arial, sans-serif;font-size:16px;line-height:1.5rem;scroll-behavior:smooth;}
body {margin:0;padding:0;width:100%;height:auto;background-color:#252520;}

/* //////////// */

/* User focus & user selection */
:focus {outline:0;}
::selection {background:#EEC226;color:#353530;}
::-moz-selection {background:#EEC226;color:#353530;}
a::selection {background:#EEC226;color:#353530;}
a::-moz-selection {background:#EEC226;color:#353530;}
/* Touch-friendly scroll bar */
::-webkit-scrollbar {width:16px;background-color:#353530;}
::-webkit-scrollbar-track {background-color:#353530;}
::-webkit-scrollbar-thumb {background-color:#252520;}

/* //////////// */

/* Containers */
main {clear:both;margin:0 auto;padding:0;width:100%;height:auto;}
header {clear:both;margin:0;padding:40px 0 0 0;width:100%;height:auto;background-color:#FAF9F7;background-image:url('https://www.jonathang.design/images/svgs/horizon.svg');background-repeat:repeat-x;overflow:hidden;}
nav {clear:both;margin:2rem 0 0 0;padding:0;mwidth:100%;height:auto;overflow:hidden;}
article {clear:both;margin:0;padding:0;width:100%;height:auto;overflow:hidden;}
section {clear:both;margin:0;padding:0;width:100%;height:auto;overflow:hidden;}
footer {clear:both;margin:0;padding:40px 0;width:100%;height:auto;overflow:hidden;}

/* Custom containers */
.section-c {clear:both;margin:0 auto;padding:0;width:100%;height:auto;overflow:hidden;}
.section-c-nav {clear:both;margin:0 auto;padding:0;max-width:60em;height:64px;overflow:hidden;}
.section-c-header {clear:both;margin:0 auto;padding:0;max-width:60em;height:auto;overflow:hidden;}
.left-c {display:block;float:left;margin:0;padding:48px 0 0 0;max-width:50%;height:auto;overflow:hidden;}
.right-c {display:block;float:right;margin:0;padding:0;max-width:50%;height:auto;overflow:hidden;}
.left-c-m {display:none;}
.right-c-m {display:none;}
.section-c-resume {clear:both;margin:40px auto;padding:0;max-width:60em;height:auto;overflow:hidden;}
.logos {display:block;float:left;}
.logo-group {display:block;float:left;}
.mark-group {display:none;float:left;}
.resume-button {display:block;float:right;margin:0;padding:0;width:auto;height:auto;overflow:hidden;}
.section-c-quote {clear:both;margin:40px auto;padding:0;max-width:60em;height:auto;overflow:hidden;}
.section-image {display:block;clear:both;margin:0 0 8px 0;padding:0;width:100%;height:auto;background-color:#FAF9F7;border-radius:0px;border:1px solid #EAEAE5;}

/* Case study card */
.case-study-card {clear:both;display:block;margin:0;padding:0;width:100%;height:auto;overflow:hidden;}
.article-image {display:block;float:left;margin:0;padding:0;width:50%;height:auto;background-color:transparent;}
.cs-bigspring {display:block;clear:both;margin:0 0 20px 0;padding:0;width:120px;height:24px;}
.cs-expedia {display:block;clear:both;margin:0 0 20px 0;padding:0;width:112px;height:32px;}
.article-details {display:block;float:right;margin:0;padding:40px;width:50%;height:auto;}
.view-case-study {clear:both;display:block;position:absolute;bottom:32px;margin:16px 0 0 0;padding:0;width:100%;height:auto;font-size:1.25em;line-height:1.8;text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:#CACAC5;overflow:hidden;}
.cs-image {display:block;float:left;margin:0;padding:0;width:100%;height:auto;background-image:cover;}
.coming-soon {clear:both;display:block;position:absolute;bottom:32px;margin:16px 0 0 0;padding:0;width:100%;height:auto;font-size:1.25em;line-height:1.8;overflow:hidden;}

.clickable-card {display:block;position:relative;margin:0 auto 40px auto;padding:0;max-width:960px;height:auto;color:#858580;background-color:#FAF9F7;
  border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;transform-origin: center center;transition: all 0.3s ease-in-out;text-decoration:none;overflow:hidden;}
.clickable-card h4,
.clickable-card .view-case-study {
  transition:color 0.3s ease-in-out;
}
.clickable-card img.cs-image {
  transform-origin: center;
  transition:transform 0.3s ease-in-out;
}
.clickable-card:hover h4, 
.clickable-card:focus h4 {
  color:#252520;
}
.clickable-card:hover .view-case-study, 
.clickable-card:focus .view-case-study {
  color:#252520;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-decoration-color: #EEC226;
}
.clickable-card:hover .coming-soon, 
.clickable-card:focus .coming-soon {
  color:#EE3E26;
  text-decoration:none;
}
.clickable-card:hover img.cs-image,
.clickable-card:focus img.cs-image {
  transform:scale(1.1);
}
.article-body {
  padding:40px;
}
figure {
  margin:0;
  padding:0;
  aspect-ratio:1 / 1;
  overflow:hidden;
}

/* Contact card */
.section-c-contact {clear:both;margin:40px auto;padding:0;max-width:60em;height:auto;overflow:hidden;}
.section-c-contact-card {clear:both;margin:40px auto;padding:0;max-width:60em;height:auto;overflow:hidden;}

/* Footer */
.section-slim-footer {clear:both;display:block;margin:0 auto;padding:0;max-width:60em;height:auto;overflow:hidden;}
.section-c-footer {clear:both;display:none;margin:0 auto;padding:0;max-width:60em;height:auto;overflow:hidden;}

/* Images */
.me {display:block;margin:0;padding:0;width:100%;height:320px;}
.logo-bigspring {display:block;float:left;margin:8px 40px 0 0;padding:0;width:144px;height:28px;}
.logo-expedia {display:block;float:left;margin:8px 40px 0 0;padding:0;width:98px;height:28px;}
.logo-newegg {display:block;float:left;margin:8px 40px 0 0;padding:0;width:84px;height:28px;}
.logo-microsoft {display:block;float:left;margin:8px;padding:0;width:131px;height:28px;}
.mark-bigspring {display:block;float:left;margin:8px 40px 0 0;padding:0;width:22px;height:28px;}
.mark-expedia {display:block;float:left;margin:8px 40px 0 0;padding:0;width:28px;height:28px;}
.mark-newegg {display:block;float:left;margin:8px 40px 0 0;padding:0;width:24px;height:28px;}
.mark-microsoft {display:block;float:left;margin:8px;padding:0;width:28px;height:28px;}
.m-resume-button {clear:both;display:none;margin:0 auto;padding:0;width:100%;height:auto;overflow:hidden;}

/* //////////// */

/* Spacing */
.mt8 {margin-top:8px;}
.mb20 {margin-bottom:20px;}
.mb36 {margin-bottom:36px;}
.mr60 {margin-right:60px;}
.p20 {padding:0 20px;}
.p40 {padding:40px 0;}

.dark-border {border-top:1px solid #353530;}
.light-border {
  display:block;
  padding:0 0 0 0;
  width:100%;
  height:1px;
  background-image: linear-gradient(to right, #252520, #353530, #353530, #858580, #353530, #353530, #252520);
  background-repeat: no-repeat;
}
/* //////////// */

/* Typography */
.merriweather{font-family:'Merriweather', Georgria, 'Times New roman', serif;}
.roboto-slab {font-family:'Roboto Slab', Georgria, 'Times New roman', serif;}
.inter {font-family:'Inter', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto', Helvetica, Arial, sans-serif !important;}

h1 {margin:0;padding:0;font-size:inherit;line-height:inherit;}
h2 {margin:0;padding:0;font-size:inherit;line-height:inherit;}
h3 {margin:0;padding:0;font-size:inherit;line-height:inherit;}
h4 {margin:0;padding:0;font-size:inherit;line-height:inherit;}
h5 {margin:0;padding:0;font-size:inherit;line-height:inherit;}
p {margin:0;padding:0;font-size:inherit;line-height:inherit;}
code {margin:0;padding:0;font-family:Courier, Monaco, monospace;}
sup {vertical-align:baseline;position:relative;top:-4px;line-height:0;}
ul {margin:0 0 0 2rem;padding:0;list-style:disc outside;}
ul li {margin:12px 0 0 0;padding:0 0 0 12px;line-height:1.5em;}
ul.navigation {clear:both;margin:0;padding:0;list-style:none;}
ul.navigation li {display:inline-block;float:left;margin:0 1em 0 0;padding:0;font-size:1rem;line-height:1.5em;}

/* Size */
.type-64 {font-size:4em;line-height:1.25;}
.type-48 {font-size:3em;line-height:1.25;}
.type-36 {font-size:2.25em;line-height:1.25;}
.type-28 {font-size:1.75em;line-height:1.5;}
.type-24 {font-size:1.5em;line-height:1.5;}
.type-20 {font-size:1.25em;line-height:1.8;}
.type-16 {font-size:1em;line-height:1.5;}
.type-14 {font-size:.875em;line-height:1.375;}
.type-12 {font-size:.75em;line-height:1.5;}
.type-10 {font-size:.625em;line-height:1.5;}

/* Custom */
.type-c-64 {font-size:4em;line-height:1;}
.type-c-28 {margin-top:20px;font-size:1.75em;line-height:1.5;}
.type-c-16 {margin-top:4px;font-size:1em;line-height:1.5;}
.type-c-12 {font-size:.75em;line-height:1;}
.thequote {font-size:1.75em;line-height:1.5;}
.case-study-title {font-size:1.75em;line-height:1.5;}

/* Weight */
.weight-thin {font-weight:200;}
.weight-regular {font-weight:400;}
.weight-medium {font-weight:600;}
.weight-bold {font-weight:800;}
.weight-xbold {font-weight:900;}

/* Color: white and black; */
.color-white {color:#FFF;}
.color-black {color:#252520;}

/* Text colors */
.tint-200 {color:#F5F5F0;}
.tint-400 {color:#EAEAE5;}
.tint-600 {color:#DADAD5;}
.tint-800 {color:#CACAC5;}
.shade-200 {color:#858580;}
.shade-400 {color:#656560;}
.shade-600 {color:#454540;}
.shade-800 {color:#252520;}

/* Colors */
.color-yellow {color:#EEC226;}

/* Background colors */
.bg-t-100 {background-color:#FAF9F7;}

/* Color: Primary Color */
.color-primary {color:;}

/* Color: Secondary Color */
.color-secondary {color:;}

/* Text */
.type-uppercase {text-transform:uppercase;}
.type-left {text-align:left;}
.type-right {text-align:right;}
.type-center {text-align:center;}
.type-justify {text-align:justify;}

/* Linebreak */
hr {margin:3rem 0;padding:0;width:100%;height:1px;border:0;background:#EFEFEF;}

/* //////////// */

/* Links */
a:link {text-decoration:none;}
a:hover {text-decoration:none;}
a:visited, a:active {text-decoration:none;}

a.cards:link {text-decoration:none;}
a.cards:hover {text-decoration:none;}
a.cards:visited, a.cards:active {text-decoration:none;}

a.basiclink:link {text-decoration:underline;color:#F5F5F0;}
a.basiclink:hover {text-decoration:underline;color:#EEC226;}
a.basiclink:visited, a:active {text-decoration:underline;color:#F5F5F0;}

a.yellowlink:link {text-decoration:underline;color:#EEC226;}
a.yellowlink:hover {text-decoration:underline;color:#FFEA9E;}
a.yellowlink:visited, a:active {text-decoration:underline;color:#EEC226;}

a.underline {
  margin:0;
  padding:0 0 2px 0;
  color: #858580;
  text-decoration: none;
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 1)
    ),
    linear-gradient(
      to right,
      rgba(238, 194, 38, 1),
      rgba(255, 224, 111, 1)
  );
  background-size: 100% 2px, 0 2px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 300ms;
}
a.underline:hover {
  margin:0;
  padding:0 0 2px 0;
  color: #252520;
  background-size: 0 2px, 100% 2px;
}

a.neon-button:link {
  display:inline-block;
  padding:10px 16px;
  font-size:1em;
  line-height:1.5;
  text-decoration:none;
  color:#252706;
  background: linear-gradient(0deg, rgba(238,194,38,1) 30%, rgba(255,223,112,1) 100%);
  border:1px solid #EEC226;
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  border-radius:8px;
  cursor:pointer;
}
a.neon-button:hover {
  display:inline-block;
  padding:10px 16px;
  font-size:1em;
  line-height:1.5;
  text-decoration:none;
  color:#252706;
  background: linear-gradient(0deg, rgba(255,223,112,1) 0%, rgba(255,223,112,1) 100%);
  border:1px solid #FFDF70;
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  border-radius:8px;
  cursor:pointer;
}
a.neon-button:visited, a.neon-button:active {
  display:inline-block;
  padding:10px 16px;
  font-size:1em;
  line-height:1.5;
  text-decoration:none;
  color:#252706;
  background: linear-gradient(0deg, rgba(238,194,38,1) 30%, rgba(255,223,112,1) 100%);
  border:1px solid #EEC226;
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  border-radius:8px;
  cursor:pointer;
}
/* //////////// */

/* Graphics and Textures */

/* Animations */
.fade-home {opacity:0;animation: fadein-home 1s ease-in-out 1 forwards;animation-delay:.5s;}
@keyframes fadein-home {
  0% {
  	opacity:0;
    filter: blur(16px);
  }
  100% {
  	opacity:1;
    filter: blur(0);
  }
}

.fade-case-study {opacity:0;animation: fadein-case-study .3s ease-in-out forwards;animation-delay:.1s;}
@keyframes fadein-case-study {
  0% {
    opacity:0;
    filter: blur(16px);
    position: relative;
    top:40px;
    background-color:#252525;
  }
  100% {
    opacity:1;
    filter: blur(0);
    position: relative;
    top:0px;
    background-color:#252525;
  }
}

.move-me {opacity:0;animation: move-me 1s ease-in-out 1s forwards 1;}
@keyframes move-me {
  0% {
    opacity:0;
    filter: blur(16px);
    position: relative;
    right:40px;
  }
  100% {
    opacity:1;
    filter: blur(0);
    position: relative;
    right:0px;
  }
}

#particles-js {z-index:0;position:fixed;width:100%;height:100%;background-color:#FFF;background-repeat:no-repeat;background-size:cover;background-position:50% 50%;opacity:0;animation:fadein 1s ease-in forwards;animation-delay:.5s;}

/* //////////// */

/* Media queries */
@media only screen and (min-width:848px) and (max-width:1019px) {
	/* Containers */
  main {clear:both;margin:0 auto;padding:0;width:100%;height:auto;}
  header {clear:both;margin:0;padding:40px 0 0 0;width:100%;height:auto;background-color:#FAF9F7;background-image:url('https://www.jonathang.design/images/svgs/horizon.svg');background-size:contain;background-repeat:repeat-x;overflow:hidden;}
  nav {clear:both;margin:2rem 0 0 0;padding:0;width:100%;height:auto;overflow:hidden;}
  article {clear:both;margin:0;padding:0;width:100%;height:auto;overflow:hidden;}
  section {clear:both;margin:0;padding:0 20px;width:100%;height:auto;overflow:hidden;}
  footer {clear:both;margin:0;padding:40px 20px;width:100%;height:auto;overflow:hidden;}
  /* Custom containers */
  .section-c {clear:both;margin:0 auto;padding:0;width:100%;height:auto;overflow:hidden;}
  .section-c-nav {clear:both;margin:0 auto;padding:0;max-width:600px;height:64px;overflow:hidden;}
  .section-c-header {clear:both;margin:0 auto;padding:0;max-width:600px;height:auto;overflow:hidden;}
  .left-c {display:none;}
  .right-c {display:none;}
  .left-c-m {display:block;clear:both;margin:0;padding:0;width:100%;height:auto;text-align:center;overflow:hidden;}
  .right-c-m {display:block;clear:both;margin:40px 0 0 0;padding:0 20px;width:100%;height:auto;overflow:hidden;}
  .section-c-resume {clear:both;margin:40px auto;padding:0 20px;max-width:60em;height:auto;overflow:hidden;}
  .logos {display:block;float:left;}
  .logo-group {display:block;float:left;}
  .mark-group {display:none;float:left;}
  .resume-button {display:block;float:right;margin:0;padding:0;width:auto;height:auto;overflow:hidden;}
  .section-c-quote {clear:both;margin:40px auto;padding:0;max-width:60em;height:auto;overflow:hidden;}
  .section-image {display:block;clear:both;margin:0 0 8px 0;padding:0;width:100%;height:auto;background-color:#FAF9F7;border-radius:0px;border:1px solid #EAEAE5;}

  /* Custom */
  .type-c-64 {font-size:4em;line-height:1;}
  .type-c-28 {margin-top:20px;font-size:1.75em;line-height:1.5;}
  .type-c-16 {margin-top:4px;font-size:1em;line-height:1.5;}

  /* Images */
  .me {display:block;margin:0;padding:0;width:100%;height:auto;}
  .logo-bigspring {display:block;float:left;margin:8px 40px 0 0;padding:0;width:144px;height:28px;}
  .logo-expedia {display:block;float:left;margin:8px 40px 0 0;padding:0;width:98px;height:28px;}
  .logo-newegg {display:block;float:left;margin:8px 40px 0 0;padding:0;width:84px;height:28px;}
  .logo-microsoft {display:block;float:left;margin:8px;padding:0;width:131px;height:28px;}
  .m-resume-button {clear:both;display:none;margin:0 auto;padding:0;width:100%;height:auto;overflow:hidden;}

  /* Case study card */
  .clickable-card {display:block;position:relative;margin:0 auto 40px auto;padding:0;max-width:960px;height:auto;color:#858580;background-color:#FAF9F7;
    border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;transform-origin: center center;transition: all 0.3s ease-in-out;text-decoration:none;overflow:hidden;}
  .case-study-card {clear:both;display:block;margin:0;padding:0;width:100%;height:auto;overflow:hidden;}
  .article-image {display:block;float:left;margin:0;padding:0;width:50%;height:auto;background-color:#FAF9F7;}
  .cs-bigspring {display:block;clear:both;margin:0 0 20px 0;padding:0;width:120px;height:24px;}
  .article-details {display:block;float:right;margin:0;padding:40px;width:50%;height:auto;}
  .view-case-study {clear:both;display:block;position:absolute;bottom:32px;margin:16px 0 0 0;padding:0;width:100%;height:auto;font-size:1.25em;line-height:1.8;overflow:hidden;}
  .coming-soon {clear:both;display:block;position:absolute;bottom:32px;margin:16px 0 0 0;padding:0;width:100%;height:auto;font-size:1.25em;line-height:1.8;overflow:hidden;}

  /* Footer */
  .section-slim-footer {clear:both;display:block;margin:0 auto;padding:0;max-width:60em;height:auto;overflow:hidden;}
  .section-c-footer {clear:both;display:none;margin:0 auto;padding:0;max-width:60em;height:auto;overflow:hidden;}

  .clickable-card h4,
  .clickable-card .view-case-study {
    transition:color 0.3s ease-in-out;
  }
  .clickable-card img.cs-image {
    transform-origin: center;
    transition:transform 0.3s ease-in-out;
  }
  .clickable-card:hover h4, 
  .clickable-card:focus h4 {
    color:#252520;
  }
  .clickable-card:hover .view-case-study, 
  .clickable-card:focus .view-case-study {
    color:#252520;
    text-decoration:underline;
    text-decoration-thickness:2px;
    text-decoration-color: #EEC226;
  }
  .clickable-card:hover img.cs-image,
  .clickable-card:focus img.cs-image {
    transform:scale(1.1);
  }
  .article-body {
    padding:40px;
  }
  figure {
    margin:0;
    padding:0;
    aspect-ratio:1 / 1;
    overflow:hidden;
  }
}

@media only screen and (min-width:480px) and (max-width:847px) {
  /* Containers */
  main {clear:both;margin:0 auto;padding:0;width:100%;height:auto;}
  header {clear:both;margin:0;padding:40px 0 0 0;width:100%;height:auto;background-color:#FAF9F7;background-image:url('https://www.jonathang.design/images/svgs/horizon.svg');background-size:cover;background-repeat:repeat-x;overflow:hidden;}
  nav {clear:both;margin:2rem 0 0 0;padding:0;width:100%;height:auto;overflow:hidden;}
  article {clear:both;margin:0;padding:0;width:100%;height:auto;overflow:hidden;}
  section {clear:both;margin:0;padding:0 20px;width:100%;height:auto;overflow:hidden;}
  footer {clear:both;margin:0;padding:40px 20px;width:100%;height:auto;overflow:hidden;}
  /* Custom containers */
  .section-c {clear:both;margin:0 auto;padding:0;width:100%;height:auto;overflow:hidden;}
  .section-c-nav {clear:both;margin:0 auto;padding:0;max-width:600px;height:64px;overflow:hidden;}
  .section-c-header {clear:both;margin:0 auto;padding:0;max-width:600px;height:auto;overflow:hidden;}
  .left-c {display:none;}
  .right-c {display:none;}
  .left-c-m {display:block;clear:both;margin:0;padding:0;width:100%;height:auto;text-align:center;overflow:hidden;}
  .right-c-m {display:block;clear:both;margin:40px 0 0 0;padding:0 40px;width:100%;height:auto;overflow:hidden;}
  .section-c-resume {clear:both;margin:40px auto;padding:0 20px;width:100%;height:auto;overflow:hidden;}
  .logos {display:block;float:left;}
  .logo-group {display:none;float:left;}
  .mark-group {display:block;float:left;}
  .resume-button {display:block;float:right;margin:0;padding:0;width:auto;height:auto;overflow:hidden;}
  .section-c-quote {clear:both;margin:40px auto;padding:0;max-width:60em;height:auto;overflow:hidden;}
  .section-image {display:block;clear:both;margin:0 0 8px 0;padding:0;width:100%;height:auto;background-color:#FAF9F7;border-radius:0px;border:1px solid #EAEAE5;}

  .case-study-title {font-size:1.5em;line-height:1.5;}
  .thequote {font-size:1.5em;line-height:1.5;}

  /* Custom */
  .type-c-64 {font-size:4em;line-height:1;}
  .type-c-28 {margin-top:20px;font-size:1.75em;line-height:1.5;}
  .type-c-16 {margin-top:4px;font-size:1em;line-height:1.5;}

  /* Images */
  .me {display:block;margin:0;padding:0;width:100%;height:auto;}
  .logo-bigspring {display:block;float:left;margin:8px 20px 0 0;padding:0;width:144px;height:28px;}
  .logo-expedia {display:block;float:left;margin:8px 20px 0 0;padding:0;width:98px;height:28px;}
  .logo-newegg {display:block;float:left;margin:8px 20px 0 0;padding:0;width:84px;height:28px;}
  .logo-microsoft {display:block;float:left;margin:8px;padding:0;width:131px;height:28px;}
  .m-resume-button {clear:both;display:none;margin:0 auto;padding:0;width:100%;height:auto;overflow:hidden;}

  /* Case study card */
  .clickable-card {display:block;position:relative;margin:0 auto 40px auto;padding:0;max-width:100%;height:auto;color:#858580;background-color:#FAF9F7;
    border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;transform-origin:center center;transition:all 0.3s ease-in-out;text-decoration:none;overflow:hidden;}
  .case-study-card {clear:both;display:block;margin:0;padding:0;width:100%;height:auto;overflow:hidden;}
  .article-image {display:block;float:left;margin:0;padding:0;width:100%;height:auto;background-color:#FAF9F7;}
  .cs-bigspring {display:block;clear:both;margin:0 0 20px 0;padding:0;width:120px;height:24px;}
  .article-details {display:block;float:left;margin:0;padding:20px;width:100%;height:auto;}
  .view-case-study {clear:both;display:block;position:relative !important;bottom:auto;margin:16px 0 0 0;padding:0;width:100%;height:auto;font-size:1.25em;line-height:1.8;overflow:hidden;}
  .coming-soon {clear:both;display:block;position:relative !important;bottom:auto;margin:16px 0 0 0;padding:0;width:100%;height:auto;font-size:1.25em;line-height:1.8;overflow:hidden;}

  /* Footer */
  .section-slim-footer {clear:both;display:none;margin:0 auto;padding:0;max-width:60em;height:auto;overflow:hidden;}
  .section-c-footer {clear:both;display:block;margin:0 auto;padding:0;max-width:60em;height:auto;overflow:hidden;}

  .clickable-card h4,
  .clickable-card .view-case-study {
    clear:both;
    transition:color 0.3s ease-in-out;
  }
  .clickable-card img.cs-image {
    transform-origin: center;
    transition:transform 0.3s ease-in-out;
  }
  .clickable-card:hover h4, 
  .clickable-card:focus h4 {
    clear:both;
    color:#252520;
  }
  .clickable-card:hover .view-case-study, 
  .clickable-card:focus .view-case-study {
    color:#252520;
    text-decoration:underline;
    text-decoration-thickness:2px;
    text-decoration-color: #EEC226;
  }
  .clickable-card:hover img.cs-image,
  .clickable-card:focus img.cs-image {
    transform:scale(1.1);
  }
  .article-body {
    padding:40px;
  }
  figure {
    margin:0;
    padding:0;
    aspect-ratio:21 / 9;
    overflow:hidden;
  }

}

@media only screen and (min-width:320px) and (max-width:479px) {
  /* Containers */
  main {clear:both;margin:0 auto;padding:0;width:100%;height:auto;}
  header {clear:both;margin:0;padding:40px 0 0 0;width:100%;height:auto;background-color:#FAF9F7;background-image:url('https://www.jonathang.design/images/svgs/horizon.svg');background-size:cover;background-repeat:repeat-x;overflow:hidden;}
  nav {clear:both;margin:2rem 0 0 0;padding:0;width:100%;height:auto;overflow:hidden;}
  article {clear:both;margin:0;padding:0;width:100%;height:auto;overflow:hidden;}
  section {clear:both;margin:0;padding:0 20px;width:100%;height:auto;overflow:hidden;}
  footer {clear:both;margin:0;padding:40px 20px;width:100%;height:auto;overflow:hidden;}
  /* Custom containers */
  .section-c {clear:both;margin:0 auto;padding:0;width:100%;height:auto;overflow:hidden;}
  .section-c-nav {clear:both;margin:0 auto;padding:0;max-width:600px;height:64px;overflow:hidden;}
  .section-c-header {clear:both;margin:0 auto;padding:0;max-width:600px;height:auto;overflow:hidden;}
  .left-c {display:none;}
  .right-c {display:none;}
  .left-c-m {display:block;clear:both;margin:0;padding:0;width:100%;height:auto;text-align:center;overflow:hidden;}
  .right-c-m {display:block;clear:both;margin:40px 0 0 0;padding:0 40px;width:100%;height:auto;overflow:hidden;}
  .section-c-quote {clear:both;margin:40px auto;padding:0;max-width:60em;height:auto;overflow:hidden;}
  .section-image {display:block;clear:both;margin:0 0 8px 0;padding:0;width:100%;height:auto;background-color:#FAF9F7;border-radius:0px;border:1px solid #EAEAE5;}

  .case-study-title {font-size:1.25em;line-height:1.4;}
  .thequote {font-size:1.5em;line-height:1.5;}

  .logos {display:block;float:left;}
  .logo-group {display:none;float:left;}
  .mark-group {display:none;float:left;margin:0;padding:0;width:100%;height:auto;}
  .logo-bigspring {display:block;float:left;margin:8px 20px 0 0;padding:0;width:144px;height:28px;}
  .logo-expedia {display:block;float:left;margin:8px 20px 0 0;padding:0;width:98px;height:28px;}
  .logo-newegg {display:block;float:left;margin:8px 20px 0 0;padding:0;width:84px;height:28px;}
  .logo-microsoft {display:block;float:left;margin:8px;padding:0;width:131px;height:28px;}
  .mark-bigspring {display:block;float:left;margin:8px 40px 20px 0;padding:0;width:22px;height:28px;}
  .mark-expedia {display:block;float:left;margin:8px 40px 20px 0;padding:0;width:28px;height:28px;}
  .mark-newegg {display:block;float:left;margin:8px 40px 20px 0;padding:0;width:24px;height:28px;}
  .mark-microsoft {display:block;float:left;margin:8px 0 20px 0;padding:0;width:28px;height:28px;}

  .section-c-resume {clear:both;margin:40px auto;padding:0 20px;width:100%;height:auto;overflow:hidden;}
  .resume-button {clear:both;display:block;float:right;margin:0;padding:0;width:100%;height:auto;overflow:hidden;}
  .m-resume-button {clear:both;display:block;margin:0;padding:0;width:100%;height:auto;overflow:hidden;}

  /* Footer */
  .section-slim-footer {clear:both;display:none;margin:0 auto;padding:0;max-width:60em;height:auto;overflow:hidden;}
  .section-c-footer {clear:both;display:block;margin:0 auto;padding:0;max-width:60em;height:auto;overflow:hidden;}

  /* Custom */
  .type-c-64 {font-size:3em;line-height:1;}
  .type-c-28 {margin-top:20px;font-size:1.5em;line-height:1.5;}
  .type-c-16 {margin-top:4px;font-size:.875em;line-height:1.3;}

  /* Images */
  .me {display:block;margin:0;padding:0;width:100%;height:auto;}

  a.neon-button:link {
    display:inline-block;
    margin:0 auto;
    padding:10px 0;
    width:100%;
    height:auto;
    font-size:1em;
    line-height:1.5;
    text-align:center;
    text-decoration:none;
    color:#252706;
    background: linear-gradient(0deg, rgba(238,194,38,1) 30%, rgba(255,223,112,1) 100%);
    border:1px solid #EEC226;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    cursor:pointer;
  }
  a.neon-button:hover {
    display:inline-block;
    margin:0 auto;
    padding:10px 0;
    width:100%;
    height:auto;
    font-size:1em;
    line-height:1.5;
    text-align:center;
    text-decoration:none;
    color:#252706;
    background: linear-gradient(0deg, rgba(255,223,112,1) 0%, rgba(255,223,112,1) 100%);
    border:1px solid #FFDF70;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    cursor:pointer;
  }
  a.neon-button:visited, a.neon-button:active {
    display:inline-block;
    margin:0 auto;
    padding:10px 0;
    width:100%;
    height:auto;
    font-size:1em;
    line-height:1.5;
    text-align:center;
    text-decoration:none;
    color:#252706;
    background: linear-gradient(0deg, rgba(238,194,38,1) 30%, rgba(255,223,112,1) 100%);
    border:1px solid #EEC226;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    cursor:pointer;
  }
  
  /* Case study card */
  .clickable-card {display:block;position:relative;margin:0 auto 40px auto;padding:0;max-width:100%;height:auto;color:#252520;background-color:#FAF9F7;
    border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;transform-origin:center center;transition:all 0.3s ease-in-out;text-decoration:none;overflow:hidden;}
  .case-study-card {clear:both;display:block;margin:0;padding:0;width:100%;height:auto;overflow:hidden;}
  .article-image {display:block;float:left;margin:0;padding:0;width:100%;height:auto;background-color:#FAF9F7;}
  .cs-bigspring {display:block;clear:both;margin:0 0 20px 0;padding:0;width:90px;height:18px;}
  .article-details {display:block;float:left;margin:0;padding:20px;width:100%;height:auto;}
  .view-case-study {clear:both;display:none;position:relative !important;bottom:auto;margin:16px 0 0 0;padding:0;width:100%;height:auto;font-size:1em;line-height:1.5;text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:#EEC226;overflow:hidden;}
  .coming-soon {clear:both;display:block;position:relative !important;bottom:auto;margin:16px 0 0 0;padding:0;width:100%;height:auto;font-size:1em;line-height:1.5;color:#858585;overflow:hidden;}

  .clickable-card h4,
  .clickable-card .view-case-study {
    clear:both;
    transition:color 0.3s ease-in-out;
  }
  .clickable-card img.cs-image {
    transform-origin: center;
    transition:transform 0.3s ease-in-out;
  }
  .clickable-card:hover h4, 
  .clickable-card:focus h4 {
    clear:both;
    color:#252520;
  }
  .clickable-card:hover .view-case-study, 
  .clickable-card:focus .view-case-study {
    color:#252520;
    text-decoration:underline;
    text-decoration-thickness:2px;
    text-decoration-color: #EEC226;
  }
  .clickable-card:hover .coming-soon, 
  .clickable-card:focus .coming-soon {
    color:#858585;
    text-decoration:none;
  }
  .clickable-card:hover img.cs-image,
  .clickable-card:focus img.cs-image {
    transform:scale(1.1);
  }
  .article-body {
    padding:40px;
  }
  figure {
    margin:0;
    padding:0;
    aspect-ratio:21 / 9;
    overflow:hidden;
  }
}

@media (hover: none) {
  /* Animations */
  .fade-home {opacity:0;animation: fadein-home 0s ease-in-out 1 forwards;animation-delay:0s;}
  @keyframes fadein-home {
    0% {
      opacity:1;
      filter: blur(16px);
    }
    100% {
      opacity:1;
      filter: blur(0);
  }
}

}