@charset "UTF-8";
/* --------------------------------------------------------------

Theme Name: ych
Author: 317.ch
Author URI: http://317.ch
Description: _chm portfolio website for Kirby CMS

-------------------------------------------------------------- */
/*--------------------------------------------------------------
1.0 Base Styles, Crow Grid, Lightbox
--------------------------------------------------------------*/
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/* Sections
	 ========================================================================== */
/**
   * Remove the margin in all browsers.
   */
body {
  margin: 0;
}
/**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/* Grouping content
	 ========================================================================== */
/**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}
/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}
/* Text-level semantics
	 ========================================================================== */
/**
   * Remove the gray background on active links in IE 10.
   */
a {
  background-color: transparent;
}
/**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}
/**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
b,
strong {
  font-weight: bolder;
}
/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}
/**
   * Add the correct font size in all browsers.
   */
small {
  font-size: 80%;
}
/**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/* Embedded content
	 ========================================================================== */
/**
   * Remove the border on images inside links in IE 10.
   */
img {
  border-style: none;
}
/* Forms
	 ========================================================================== */
/**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}
/**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
button,
input {
  /* 1 */
  overflow: visible;
}
/**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
button,
select {
  /* 1 */
  text-transform: none;
}
/**
   * Correct the inability to style clickable types in iOS and Safari.
   */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
/**
   * Remove the inner border and padding in Firefox.
   */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/**
   * Restore the focus styles unset by the previous rule.
   */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
/**
   * Correct the padding in Firefox.
   */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
/**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}
/**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
progress {
  vertical-align: baseline;
}
/**
   * Remove the default vertical scrollbar in IE 10+.
   */
textarea {
  overflow: auto;
}
/**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}
/**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}
/* Interactive
	 ========================================================================== */
/*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
details {
  display: block;
}
/*
   * Add the correct display in all browsers.
   */
summary {
  display: list-item;
}
/* Misc
	 ========================================================================== */
/**
   * Add the correct display in IE 10+.
   */
template {
  display: none;
}
/**
   * Add the correct display in IE 10.
   */
[hidden] {
  display: none;
}
/* Set to how many columns you want enable for auto fly operation */
/* Set to percentages, defaults to 1,2,3,4,5 till 100 */
/* Set to the number of spans you want, default 12 */
/* Set to what gutter you want crow to use, to remove gutter use class "no-gutter", don't set this value to 0 */
*,
*:before,
*:after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}
.crow {
  text-align: center;
  font-size: 0 !important;
}
.crow:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.crow > * {
  vertical-align: middle;
  display: inline-block;
  font-size: medium;
  /* IE */
  font-size: initial;
  text-align: left;
  margin: 0;
  padding: 0;
}
.crow.fly > *:first-child:nth-last-child(12),
.crow.fly > *:first-child:nth-last-child(12) ~ * {
  width: 8.333333333333334%;
}
.crow.fly > *:first-child:nth-last-child(11),
.crow.fly > *:first-child:nth-last-child(11) ~ * {
  width: 9.090909090909092%;
}
.crow.fly > *:first-child:nth-last-child(10),
.crow.fly > *:first-child:nth-last-child(10) ~ * {
  width: 10%;
}
.crow.fly > *:first-child:nth-last-child(9),
.crow.fly > *:first-child:nth-last-child(9) ~ * {
  width: 11.11111111111111%;
}
.crow.fly > *:first-child:nth-last-child(8),
.crow.fly > *:first-child:nth-last-child(8) ~ * {
  width: 12.5%;
}
.crow.fly > *:first-child:nth-last-child(7),
.crow.fly > *:first-child:nth-last-child(7) ~ * {
  width: 14.285714285714286%;
}
.crow.fly > *:first-child:nth-last-child(6),
.crow.fly > *:first-child:nth-last-child(6) ~ * {
  width: 16.666666666666668%;
}
.crow.fly > *:first-child:nth-last-child(5),
.crow.fly > *:first-child:nth-last-child(5) ~ * {
  width: 20%;
}
.crow.fly > *:first-child:nth-last-child(4),
.crow.fly > *:first-child:nth-last-child(4) ~ * {
  width: 25%;
}
.crow.fly > *:first-child:nth-last-child(3),
.crow.fly > *:first-child:nth-last-child(3) ~ * {
  width: 33.333333333333336%;
}
.crow.fly > *:first-child:nth-last-child(2),
.crow.fly > *:first-child:nth-last-child(2) ~ * {
  width: 50%;
}
.crow.fly > *:first-child:nth-last-child(1),
.crow.fly > *:first-child:nth-last-child(1) ~ * {
  width: 100%;
}
.crow.up > * {
  vertical-align: top;
}
.crow.down > * {
  vertical-align: bottom;
}
.crow > *.up {
  vertical-align: top;
}
.crow > *.down {
  vertical-align: bottom;
}
.crow .w-100 {
  width: 100%;
}
.crow .w-99 {
  width: 99%;
}
.crow .w-98 {
  width: 98%;
}
.crow .w-97 {
  width: 97%;
}
.crow .w-96 {
  width: 96%;
}
.crow .w-95 {
  width: 95%;
}
.crow .w-94 {
  width: 94%;
}
.crow .w-93 {
  width: 93%;
}
.crow .w-92 {
  width: 92%;
}
.crow .w-91 {
  width: 91%;
}
.crow .w-90 {
  width: 90%;
}
.crow .w-89 {
  width: 89%;
}
.crow .w-88 {
  width: 88%;
}
.crow .w-87 {
  width: 87%;
}
.crow .w-86 {
  width: 86%;
}
.crow .w-85 {
  width: 85%;
}
.crow .w-84 {
  width: 84%;
}
.crow .w-83 {
  width: 83%;
}
.crow .w-82 {
  width: 82%;
}
.crow .w-81 {
  width: 81%;
}
.crow .w-80 {
  width: 80%;
}
.crow .w-79 {
  width: 79%;
}
.crow .w-78 {
  width: 78%;
}
.crow .w-77 {
  width: 77%;
}
.crow .w-76 {
  width: 76%;
}
.crow .w-75 {
  width: 75%;
}
.crow .w-74 {
  width: 74%;
}
.crow .w-73 {
  width: 73%;
}
.crow .w-72 {
  width: 72%;
}
.crow .w-71 {
  width: 71%;
}
.crow .w-70 {
  width: 70%;
}
.crow .w-69 {
  width: 69%;
}
.crow .w-68 {
  width: 68%;
}
.crow .w-67 {
  width: 67%;
}
.crow .w-66 {
  width: 66%;
}
.crow .w-65 {
  width: 65%;
}
.crow .w-64 {
  width: 64%;
}
.crow .w-63 {
  width: 63%;
}
.crow .w-62 {
  width: 62%;
}
.crow .w-61 {
  width: 61%;
}
.crow .w-60 {
  width: 60%;
}
.crow .w-59 {
  width: 59%;
}
.crow .w-58 {
  width: 58%;
}
.crow .w-57 {
  width: 57%;
}
.crow .w-56 {
  width: 56%;
}
.crow .w-55 {
  width: 55%;
}
.crow .w-54 {
  width: 54%;
}
.crow .w-53 {
  width: 53%;
}
.crow .w-52 {
  width: 52%;
}
.crow .w-51 {
  width: 51%;
}
.crow .w-50 {
  width: 50%;
}
.crow .w-49 {
  width: 49%;
}
.crow .w-48 {
  width: 48%;
}
.crow .w-47 {
  width: 47%;
}
.crow .w-46 {
  width: 46%;
}
.crow .w-45 {
  width: 45%;
}
.crow .w-44 {
  width: 44%;
}
.crow .w-43 {
  width: 43%;
}
.crow .w-42 {
  width: 42%;
}
.crow .w-41 {
  width: 41%;
}
.crow .w-40 {
  width: 40%;
}
.crow .w-39 {
  width: 39%;
}
.crow .w-38 {
  width: 38%;
}
.crow .w-37 {
  width: 37%;
}
.crow .w-36 {
  width: 36%;
}
.crow .w-35 {
  width: 35%;
}
.crow .w-34 {
  width: 34%;
}
.crow .w-33 {
  width: 33%;
}
.crow .w-32 {
  width: 32%;
}
.crow .w-31 {
  width: 31%;
}
.crow .w-30 {
  width: 30%;
}
.crow .w-29 {
  width: 29%;
}
.crow .w-28 {
  width: 28%;
}
.crow .w-27 {
  width: 27%;
}
.crow .w-26 {
  width: 26%;
}
.crow .w-25 {
  width: 25%;
}
.crow .w-24 {
  width: 24%;
}
.crow .w-23 {
  width: 23%;
}
.crow .w-22 {
  width: 22%;
}
.crow .w-21 {
  width: 21%;
}
.crow .w-20 {
  width: 20%;
}
.crow .w-19 {
  width: 19%;
}
.crow .w-18 {
  width: 18%;
}
.crow .w-17 {
  width: 17%;
}
.crow .w-16 {
  width: 16%;
}
.crow .w-15 {
  width: 15%;
}
.crow .w-14 {
  width: 14%;
}
.crow .w-13 {
  width: 13%;
}
.crow .w-12 {
  width: 12%;
}
.crow .w-11 {
  width: 11%;
}
.crow .w-10 {
  width: 10%;
}
.crow .w-9 {
  width: 9%;
}
.crow .w-8 {
  width: 8%;
}
.crow .w-7 {
  width: 7%;
}
.crow .w-6 {
  width: 6%;
}
.crow .w-5 {
  width: 5%;
}
.crow .w-4 {
  width: 4%;
}
.crow .w-3 {
  width: 3%;
}
.crow .w-2 {
  width: 2%;
}
.crow .w-1 {
  width: 1%;
}
.crow .ws-12 {
  width: 100%;
}
.crow .ws-11 {
  width: 91.66666666666667%;
}
.crow .ws-10 {
  width: 83.33333333333333%;
}
.crow .ws-9 {
  width: 75%;
}
.crow .ws-8 {
  width: 66.66666666666667%;
}
.crow .ws-7 {
  width: 58.333333333333336%;
}
.crow .ws-6 {
  width: 50%;
}
.crow .ws-5 {
  width: 41.666666666666664%;
}
.crow .ws-4 {
  width: 33.333333333333336%;
}
.crow .ws-3 {
  width: 25%;
}
.crow .ws-2 {
  width: 16.666666666666668%;
}
.crow .ws-1 {
  width: 8.333333333333334%;
}
.crow.gutter {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: -15px;
  margin-left: -15px;
}
.crow.gutter > * {
  padding-right: 15px;
  padding-left: 15px;
}
.nest {
  width: 960px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.embed,
.embed iframe,
.embed img,
.embed object {
  max-width: 100%;
}
.embed {
  position: relative;
  margin: 0;
  padding: 0;
}
.embed img {
  display: block;
  height: auto;
}
.embed--video iframe,
.embed--video object,
.embed__thumb {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
.embed--video {
  background-color: #ddd;
  overflow: hidden;
}
.embed--error {
  font-size: 0.8em;
}
.embed__thumb {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  cursor: pointer;
}
.embed__thumb > img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25%;
  min-width: 75px;
  max-width: 175px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  opacity: 0.65;
}
.embed__thumb:hover > img {
  opacity: 1;
}
/*--------------------------------------------------------------
2.0 Typography
--------------------------------------------------------------*/
@font-face {
  font-family: 'Brown Bold';
  src: url('../fonts/brown-bold-webfont.eot');
  /* IE9 Compat Modes */
  src: url('../fonts/brown-bold-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/brown-bold-webfont.woff') format('woff'), /* Modern Browsers */ url('../fonts/brown-bold-webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/brown-bold-webfont.svg#bc16b9b0db9ef0f1430dd17d45a4b42f') format('svg');
  /* Legacy iOS */
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: 'Brown';
  src: url('../fonts/brown-regular-webfont.eot');
  /* IE9 Compat Modes */
  src: url('../fonts/brown-regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/brown-regular-webfont.woff') format('woff'), /* Modern Browsers */ url('../fonts/brown-regular-webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/brown-regular-webfont.svg#e8bb100efb3d47ffea678fdff45642f8') format('svg');
  /* Legacy iOS */
  font-style: normal;
  font-weight: 400;
}
body {
  font-family: 'Brown';
  font-weight: 400;
  font-style: normal;
  -moz-osx-font-smoothing: grayscale;
  /* optimize font in firefox */
  -webkit-font-smoothing: antialiased;
  /* apply font anti-aliasing */
  text-rendering: optimizeLegibility;
  /* firefox counts readability more than display speed */
}
body b,
body strong {
  font-family: 'Brown Bold';
  font-weight: 700;
  font-style: normal;
  -moz-osx-font-smoothing: grayscale;
  /* optimize font in firefox */
  -webkit-font-smoothing: antialiased;
  /* apply font anti-aliasing */
  text-rendering: optimizeLegibility;
  /* firefox counts readability more than display speed */
}
body p,
h1,
h2,
h3,
body a,
.open-label {
  font-size: 18px;
  line-height: 24px;
  font-weight: normal;
}
@media (max-width: 420px) {
  body p,
  h1,
  h2,
  h3,
  body a,
  .open-label {
    font-size: 15px;
    line-height: 21px;
  }
}
body a:hover,
.open-label:hover,
body a:focus,
.open-label:focus,
body a:active,
.open-label:active {
  text-decoration: none;
  box-shadow: inset 0 -2px 0 0 #000;
}
li {
  font-size: 18px;
  line-height: 24px;
}
body .sitecontent p,
.hyphenate {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
ul,
ol {
  padding: 0 0 24px 19px;
  margin: 0;
}
ul {
  list-style: none;
  position: relative;
}
ul li:before {
  content: "–";
  position: absolute;
  left: 0;
}
body .header p,
body .header h1,
body .header a {
  margin: 0;
  padding: 0;
}
@media (max-width: 420px) {
  body .header p,
  body .header h1,
  body .header a {
    font-size: 15px;
    line-height: 21px;
  }
}
/*--------------------------------------------------------------
3.0 Slider
--------------------------------------------------------------*/
/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before,
.slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}
.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir="rtl"] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
  display: none;
}
@font-face {
  font-family: 'slick';
  font-weight: normal;
  font-style: normal;
  src: url('../fonts/slick.eot');
  src: url('../fonts/slick.eot?#iefix') format('embedded-opentype'), url('../fonts/slick.woff') format('woff'), url('../fonts/slick.ttf') format('truetype'), url('../fonts/slick.svg#slick') format('svg');
}
/* Slider */
.slick-loading .slick-list {
  background: #fff url('../images/ajax-loader.gif') center center no-repeat;
}
/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none;
}
.slick-prev:hover,
.slick-next:hover,
.slick-prev:focus,
.slick-next:focus {
  outline: none;
  background: transparent;
  color: transparent;
}
.slick-prev:hover:before,
.slick-next:hover:before,
.slick-prev:focus:before,
.slick-next:focus:before {
  opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}
.slick-prev:before,
.slick-next:before {
  font-family: "slick";
  font-size: 20px;
  line-height: 1;
  color: white;
  opacity: 0.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-prev {
  left: -25px;
}
[dir="rtl"] .slick-prev {
  left: auto;
  right: -25px;
}
.slick-prev:before {
  content: "←";
}
[dir="rtl"] .slick-prev:before {
  content: "→";
}
.slick-next {
  right: -25px;
}
[dir="rtl"] .slick-next {
  left: -25px;
  right: auto;
}
.slick-next:before {
  content: "→";
}
[dir="rtl"] .slick-next:before {
  content: "←";
}
/* Dots */
.slick-dotted .slick-slider {
  margin-bottom: 30px;
}
.slick-dots {
  position: absolute;
  bottom: 20px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
  z-index: 999;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0 5px;
  padding: 0;
  font-size: 30px;
  cursor: pointer;
}
.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 20px;
  width: 20px;
  outline: none;
  line-height: 0px;
  font-size: 0px;
  color: transparent;
  padding: 5px;
  cursor: pointer;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1;
}
.slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "•";
  width: 20px;
  height: 20px;
  font-family: "slick";
  font-size: 10px;
  line-height: 20px;
  text-align: center;
  color: white;
  opacity: 0.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  color: white;
  opacity: 0.75;
}
/*--------------------------------------------------------------
4.0 General Styles + Header & Footer
--------------------------------------------------------------*/
html {
  overflow: hidden;
}
body {
  background-color: rgba(175, 166, 157, 0.5);
  overflow-y: hidden;
  width: 100vw;
  min-height: 100vh;
}
body a {
  color: inherit;
  text-decoration: none;
}
body.noscroll {
  overflow: hidden;
  max-height: 100vh;
}
img,
iframe {
  max-width: 100%;
  max-height: 100%;
}
header {
  position: fixed;
  top: 0;
  width: 100vw;
  padding: 30px 30px 0 30px;
  z-index: 500;
  min-height: 88px;
  pointer-events: none;
}
header .title {
  position: static;
  pointer-events: all;
  display: inline-block;
}
header .title:hover .linkstyle,
header .title:focus .linkstyle,
header .title:active .linkstyle {
  text-decoration: none;
  box-shadow: inset 0 -2px 0 0 #000;
}
header .ych-menu {
  cursor: pointer;
}
header .contact {
  position: absolute;
  pointer-events: all;
  display: inline-block;
  text-align: right;
  right: 30px;
}
header .contact a:hover,
header .contact a:focus,
header .contact a:active {
  text-decoration: none;
  box-shadow: inset 0 -2px 0 0 #000;
}
@media (max-width: 420px) {
  header {
    padding: 20px 15px 0 15px;
  }
  header .contact {
    right: 15px;
  }
}
.ych,
.details {
  padding: 15px 15vw 0 15vw;
  position: fixed;
  background: #fff;
  opacity: 0;
}
.ych .sitecontent,
.details .sitecontent {
  padding-bottom: 30px;
}
.ych .ych-close-button,
.details .ych-close-button {
  position: absolute;
  right: 15vw;
  top: 30px;
  cursor: pointer;
  font-family: none;
  font-size: 38px;
  line-height: 1;
}
@media (max-width: 420px) {
  .ych,
  .details {
    padding: 15px 0 0 0;
  }
  .ych .ych-close,
  .details .ych-close {
    right: 15px;
    top: 15px;
  }
}
.ych-close-blocker,
.footer-close-blocker {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 400;
  display: none;
  cursor: pointer;
  /*background: rgba(0, 0, 0, 0.5);*/
}
.project-grid {
  position: absolute;
}
.project-grid .project-wrapper {
  width: 50vw;
  height: 50vh;
  max-width: 100vw;
  max-height: 100vh;
  position: relative;
  float: left;
}
.project-grid .project-wrapper .project {
  background: #fff;
  min-width: 50vw;
  min-height: 50vh;
  width: 100vw;
  height: 100vh;
  position: absolute;
  transform: scale(0.5);
  -webkit-transition: transform 0.3s linear;
  -moz-transition: transform 0.3s linear;
  transition: transform 0.3s linear;
  /* expanded */
}
.project-grid .project-wrapper .project .project-header,
.project-grid .project-wrapper .project .project-footer {
  position: absolute;
  margin: auto;
  text-align: center;
  width: 100%;
}
.project-grid .project-wrapper .project .project-header {
  top: 0;
}
.project-grid .project-wrapper .project .project-footer {
  bottom: 0;
  width: 100vw;
  text-align: center;
  position: absolute;
}
.project-grid .project-wrapper .project .project-footer .footer-open {
  text-align: center;
  padding-bottom: 35px;
  opacity: 0;
}
.project-grid .project-wrapper .project .project-footer .footer-open .open-label {
  cursor: pointer;
  display: inline-block;
}
.project-grid .project-wrapper .project .project-footer .details {
  display: none;
  opacity: 0;
  width: 100%;
}
.project-grid .project-wrapper .project .project-footer .details.details-visible {
  opacity: 1;
  display: block;
}
.project-grid .project-wrapper .project .project-footer .details .detail-label {
  display: inline-block;
  font-style: italic;
  width: 100%;
}
.project-grid .project-wrapper .project .project-footer .details .detail-content {
  display: inline-block;
  padding-bottom: 15px;
}
@media (min-width: 1023px) {
  .project-grid .project-wrapper .project .project-footer .details .detail-label {
    min-width: 95px;
    width: 39%;
  }
  .project-grid .project-wrapper .project .project-footer .details .detail-content {
    padding-bottom: 0;
    width: 60%;
  }
}
.project-grid .project-wrapper .project .slider {
  max-width: 95vw;
  max-height: 85vh;
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.project-grid .project-wrapper .project .slider .slick-slide img {
  margin: auto;
}
@media (max-width: 800px) {
  .project-grid .project-wrapper .project .slider {
    max-width: 88vw;
  }
}
@media (max-width: 400px) {
  .project-grid .project-wrapper .project .slider {
    max-width: 90vw;
  }
}
.project-grid .project-wrapper .project .project-open {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  /*background: rgba(255, 0, 0, 0.37);*/
}
.project-grid .project-wrapper .project .project-close {
  position: absolute;
  display: block;
  cursor: pointer;
  top: 65px;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-left: -15px;
  text-align: center;
  -webkit-transition: visibility 0.25s ease-out;
  -moz-transition: visibility 0.25s ease-out;
  transition: visibility 0.25s ease-out;
  visibility: hidden;
  font-family: none;
  font-size: 38px;
  line-height: 1;
  /*background: rgba(0, 0, 0, 0.17);*/
  opacity: 0;
}
@media (min-width: 500px) {
  .project-grid .project-wrapper .project .project-close {
    top: 35px;
  }
}
.project-grid .project-wrapper .project.expanded {
  z-index: 501;
  transform: scale(1);
  max-width: 100vw;
  max-height: 100vh;
  -webkit-transition: transform 0.3s linear;
  -moz-transition: transform 0.3s linear;
  transition: transform 0.3s linear;
}
.project-grid .project-wrapper .project.expanded .project-open {
  display: none;
}
.project-grid .project-wrapper .project.expanded .project-close {
  -webkit-transition: visibility 0.7s ease-out;
  -moz-transition: visibility 0.7s ease-out;
  transition: visibility 0.7s ease-out;
  visibility: visible;
}
.project-grid :nth-child(n) .project {
  top: 0;
  left: 0;
  right: unset;
  bottom: unset;
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  transform-origin: top left;
}
.project-grid :nth-child(2n+4) .project,
.project-grid :nth-child(2) .project {
  top: 0;
  left: unset;
  right: 0;
  bottom: unset;
  -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  transform-origin: top right;
}
.project-grid :nth-child(3n+4) .project,
.project-grid :nth-child(3) .project {
  top: unset;
  left: 0;
  right: unset;
  bottom: 0;
  -webkit-transform-origin: bottom left;
  -moz-transform-origin: bottom left;
  transform-origin: bottom left;
}
.project-grid :nth-child(4n) .project {
  top: unset;
  left: unset;
  right: 0;
  bottom: 0;
  -webkit-transform-origin: bottom right;
  -moz-transform-origin: bottom right;
  transform-origin: bottom right;
}
@media (max-width: 768px) {
  .crow .ws-5 {
    width: 100%;
  }
  .project-grid .project-wrapper {
    width: 100vw;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
  }
  .project-grid .project-wrapper .project {
    transform: scale(1, 0.5);
  }
  .project-grid .project-wrapper .project .slider .item {
    transform: scale(0.5, 1);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;
    -webkit-transition: transform 0.3s linear;
    -moz-transition: transform 0.3s linear;
    transition: transform 0.3s linear;
  }
  .project-grid .project-wrapper .project.expanded .slider .item {
    transform: scale(1, 1);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;
    -webkit-transition: transform 0.3s linear;
    -moz-transition: transform 0.3s linear;
    transition: transform 0.3s linear;
  }
  .project-grid :nth-child(1n) .project {
    top: 0;
    left: unset;
    right: unset;
    bottom: unset;
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    transform-origin: top center;
  }
  .project-grid :nth-child(2n) .project {
    top: unset;
    left: unset;
    right: unset;
    bottom: 0;
    -webkit-transform-origin: bottom center;
    -moz-transform-origin: bottom center;
    transform-origin: bottom center;
  }
}
@media (min-width: 769px) {
  .project-grid .project-wrapper .project .slider img {
    max-height: 70vh;
  }
}