/* Reset */
* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
html {margin:0;padding:0;width:100%;height:100%;background-color:#FAF9F7;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:#FAF9F7;
background: -moz-linear-gradient(90deg, rgba(248,215,102,1) 0%, rgba(255,172,86,1) 50%, rgba(195,126,111,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(248,215,102,1) 0%, rgba(255,172,86,1) 50%, rgba(195,126,111,1) 100%);
background: linear-gradient(90deg, rgba(248,215,102,1) 0%, rgba(255,172,86,1) 50%, rgba(195,126,111,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f8d766",endColorstr="#c37e6f",GradientType=1);}

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

/* 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:#EAEAE5;}
::-webkit-scrollbar-track {background-color:#EAEAE5;}
::-webkit-scrollbar-thumb {background-color:#FAF9F7;}

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

/* Containers */
main {clear:both;margin:0 auto;padding:0;width:100%;height:auto;}
header {position:relative;clear:both;margin:0;padding:0;width:100%;height:360px;background-color:#FAF9F7;background-image:url('https://www.jonathang.design/images/case-studies/5/header.jpg');background-size:cover;background-repeat:no-repeat;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;}
hr {background-color:#EAEAE5;}

/* Custom containers */
.section-header {position:absolute;bottom:0;clear:both;margin:0 auto;padding:40px;max-width:860px;height:40px;overflow:hidden;}
.section-case-study {clear:both;margin:0 auto;padding:80px;max-width:860px;height:auto;overflow:hidden;}
.case-study-header-image {clear:both;display:block;margin:0;padding:0;width:100%;height:auto;aspect-ratio:21 / 9;background-position:center center;background-attachment:fixed;background-size:cover;}
.case-study-image-col {position:absolute;display:block;margin:0;padding:0;width:360px;height:100%;background-image:url('https://www.jonathang.design/images/case-studies/5/header.jpg');background-size:cover;background-repeat:no-repeat;overflow:hidden;}
.case-study {margin:0 auto;padding:0;max-width:860px;height:auto;background-color:#FAF9F7;border:1px solid #FAF9F7;overflow:hidden;}
.case-study-image {display:block;margin:0;padding:0;width:100%;height:auto;border:1px solid #EAEAE5;}

/* 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;}
.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:auto;height:36px;}
.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;}

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

/* Spacing */
.m-b-8 {margin-bottom:8px;}
.m-b-12 {margin-bottom:12px;}
.m-b-20 {margin-bottom:20px;}
.m-b-40 {margin-bottom:40px;}
.m-t-40 {margin-top:40px;}
.m-t-40 {margin-top:40px;}

.light-border {border-top:1px solid #EAEAE5;}

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

/* 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;}

.type-shadow {text-shadow: 0px 1px 12px #252520;}

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-family:'Roboto Slab', Georgria, 'Times New roman', serif;font-size:1.25em;line-height:1.8;font-weight:300;color:#656560;}
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 28px;padding:0;list-style:disc outside;font-family:'Roboto Slab', Georgria, 'Times New roman', serif;font-size:1.25em;line-height:1.8;font-weight:300;color:#656560;}
ul li {margin:0 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:8px;font-size:1em;line-height:1.5;}
.type-c-12 {font-size:.75em;line-height:1;}
.case-study-title {font-size:1.75em;line-height:1.5;}
.thequote {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:inherit;}
a.basiclink:hover {text-decoration:underline;color:#252520;}
a.basiclink:visited, a:active {text-decoration:underline;color:inherit;}

a.textlink:link {text-decoration:underline;color:#656560;}
a.textlink:hover {text-decoration:underline;color:#252520;}
a.textlink:visited, a:active {text-decoration:underline;color:#656560;}

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(238,194,38,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(238,194,38,1) 100%);
  border:1px solid #EEC226;
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  border-radius:8px;
  cursor:pointer;
}

/* Scroll to top */
.scrolltop {
  display:none;
  width:100%;
  margin:0 auto;
  position:fixed;
  bottom:20px;
  right:10px; 
}
.scroll {
  position:absolute;
  right:20px;
  bottom:20px;
  background:#b2b2b2;
  background:rgba(178,178,178,0.7);
  padding:20px;
  text-align: center;
  margin: 0 0 0 0;
  cursor:pointer;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;    
}
.scroll:hover {
  background:rgba(178,178,178,1.0);
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;    
}
.scroll:hover .fa {
  padding-top:-10px;
}
.scroll .fa {
  font-size:30px;
  margin-top:-5px;
  margin-left:1px;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;  
}

.arrow-upward {
  display:block;
  margin:0;
  padding:0;
  height:24px;
  width:24px;
}

#back-to-top {
  display:none;
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:99;
  margin:0;
  padding:12px;
  color:#252520;
  background-color: #FAF9F7;
  border-radius:80px;
  border:none;
  outline:none;
  opacity:.4;
  cursor:pointer;
}

#back-to-top:hover {
  background-color: #FAF9F7;
  opacity: 1;
}

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

/* Graphics and Textures */

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

.fade-main {opacity:0;animation: fadein-main 1s ease-in-out 1 forwards;animation-delay:.15s;}
@keyframes fadein-main {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

.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;
  }
}

.slide-main {animation: slide-in-main 1s ease-in-out 1 forwards;animation-delay:.3s;}
@keyframes slide-in-main {
  0% {
    width:100%;
    background-color:#FAF9F7;
  }
  100% {
    width:860px;
    background-color:#FAF9F7;
  }
}

.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;
  }
}

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

/* Media queries */
@media only screen and (min-width:600px) and (max-width:859px) {
  body {margin:0;padding:0;width:100%;height:100%;background-color:#FAF9F7;background-image:url('https://www.jonathang.design/images/case-studies/5/background.jpg');
  background-repeat:no-repeat;background-position:center center;background-attachment:fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;}
  .case-study-header-image {clear:both;display:block;margin:0;padding:0;width:100%;height:auto;aspect-ratio:21 / 9;background-position:center center;background-attachment:fixed;background-size:cover;}
  .section-case-study {clear:both;margin:0 auto;padding:80px;width:100%;height:auto;overflow:hidden;}
  .case-study {margin:0 auto;padding:0;width:100%;height:100%;background-color:#FAF9F7;overflow:hidden;}
  .case-study-image {display:block;margin:0;padding:0;width:100%;height:auto;border:1px solid #EAEAE5;}
  /* 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;}
  /* Spacing */
  .m-b-20 {margin-bottom:20px;}
  .m-b-40 {margin-bottom:40px;}
  /* Back to top */
  .arrow-upward {
    display:block;
    margin:0;
    padding:0;
    height:24px;
    width:24px;
  }
  #back-to-top {
    display:none;
    position:fixed;
    bottom:20px;
    right:16px;
    z-index:99;
    margin:0;
    padding:12px;
    color:#252520;
    background-color: #FAF9F7;
    border-radius:80px;
    border:1px solid #CACAC5;
    outline:none;
    opacity:.4;
    cursor:pointer;
  }
  #back-to-top:hover {
    background-color: #FAF9F7;
    opacity: 1;
  }
}

@media only screen and (min-width:320px) and (max-width:599px) {
  body {margin:0;padding:0;width:100%;height:100%;background-color:#FAF9F7;background-image:url('https://www.jonathang.design/images/case-studies/5/background.jpg');
  background-repeat:no-repeat;background-position:center center;background-attachment:fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;}
  .case-study-header-image {clear:both;display:block;margin:0;padding:0;width:100%;height:auto;aspect-ratio:21 / 9;background-position:center center;background-attachment:fixed;background-size:cover;}
  .section-case-study {clear:both;margin:0 auto;padding:40px;width:100%;height:auto;overflow:hidden;}
  .case-study {margin:0 auto;padding:0;width:100%;height:100%;background-color:#FAF9F7;overflow:hidden;}
  .case-study-image {display:block;margin:0;padding:0;width:100%;height:auto;border:1px solid #EAEAE5;}
  /* 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;}
  /* Spacing */
  .m-b-20 {margin-bottom:20px;}
  .m-b-40 {margin-bottom:40px;}
  /* Back to top */
  .arrow-upward {
    display:block;
    margin:0;
    padding:0;
    height:24px;
    width:24px;
  }
  #back-to-top {
    display:none;
    position:fixed;
    bottom:76px;
    right:20px;
    z-index:99;
    margin:0;
    padding:12px;
    color:#252520;
    background-color: #FAF9F7;
    border-radius:80px;
    border:1px solid #CACAC5;
    outline:none;
    opacity:.4;
    cursor:pointer;
  }
  #back-to-top:hover {
    background-color: #FAF9F7;
    opacity: 1;
  }
}