/* Hand-written styles that sit on top of the Webflow stylesheets.
 *
 * These were inlined in a <style> block on every page of the Webflow export.
 * Loaded last, after kimbishop.webflow.css, so they win.
 */

/* Photos carry their real pixel dimensions so lazy-loaded galleries reserve
 * the right space instead of jumping. A width/height attribute acts as a CSS
 * presentational hint, so it only stays harmless where a stylesheet already
 * sets the width: these two set width but not height, so pin height to auto.
 * `.fullwidthimage` already does both in kimbishop.webflow.css.
 *
 * Images with no CSS width of their own — .collageimage, .constrainimage, the
 * drawing thumbnails — size themselves from their srcset, and an attribute
 * would resize them. Those deliberately carry no dimensions. */
.reviewphoto,
.aboutheroimage {
  height: auto;
}

/* Collage columns start hidden and are faded in by the Webflow interaction. */
.collagecol {
  opacity: 0;
}

/* Text link with an arrow that slides right on hover. `.hover` is added by
 * site.js so hovering a whole work card animates the arrow inside it too. */
.arrowbutton:after {
  content: '';
  background-image: url(/images/arrow-button-icon.svg);
  background-size: 19px 12px;
  width: 19px;
  height: 12px;
  position: absolute;
  top: 50%;
  margin-top: -6px;
  right: 0;
  margin-right: 5px;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  transition: 0.3s ease;
}

.arrowbutton:hover:after,
.arrowbutton.hover:after {
  margin-right: 0;
}

/* Cross-fade between pages: site.js drops opacity before navigating. */
body {
  -webkit-transition: 0.7s;
  -moz-transition: 0.7s;
  transition: 0.7s;
}

/* Reading-progress bar pinned to the bottom of case-study pages. */
#scrollProgress {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
}

#scrollProgressFill {
  background: #fff;
  width: 0px;
  height: 3px;
}

/* The bar hides on scroll down, returns on scroll up. */
.header {
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  transition: 0.4s;
}

.header.hide {
  -webkit-transform: translateY(-20px);
  -moz-transform: translateY(-20px);
  transform: translateY(-20px);
  opacity: 0;
}

.menutoggle.open {
  background-position: right;
}

.photocaptionwrap:hover .photocaption {
  opacity: 1;
}

/* Collage photos on the home page: the link tint deepens as you approach it. */
.collagelink {
  opacity: 0;
}

.collageblock:hover .collagelink {
  opacity: 0.2;
}

.collageblock:hover .collagelink:hover,
.collagelink:hover {
  opacity: 0.4;
}