/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden; }

#cboxWrapper {
  max-width: none; }

#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%; }

#cboxMiddleLeft, #cboxBottomLeft {
  clear: left; }

#cboxContent {
  position: relative; }

#cboxLoadedContent {
  overflow: auto;
  -webkit-overflow-scrolling: touch; }

#cboxTitle {
  margin: 0; }

#cboxLoadingOverlay, #cboxLoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
  cursor: pointer; }

.cboxPhoto {
  float: left;
  margin: auto;
  border: 0;
  display: block;
  max-width: none;
  -ms-interpolation-mode: bicubic; }

.cboxIframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  padding: 0;
  margin: 0; }

#colorbox, #cboxContent, #cboxLoadedContent {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/ }

#cboxOverlay {
  background-color: rgba(0, 0, 0, 0.9); }

#colorbox {
  outline: 0; }

#cboxTopLeft, #cboxTopRight, #cboxBottomLeft, #cboxBottomRight, #cboxMiddleLeft, #cboxMiddleRight, #cboxTopCenter, #cboxBottomCenter {
  display: none; }

#cboxBottomCenter {
  height: 10px;
  background-color: #333; }

#cboxContent {
  overflow: hidden; }

.cboxIframe {
  background: rgba(0, 0, 0, 0.1); }

#cboxError {
  padding: 50px;
  border: 1px solid #ccc; }

#cboxLoadedContent {
  background: rgba(0, 0, 0, 0.1);
  margin-top: 28px; }

#cboxTitle {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
  color: #fff; }

#cboxCurrent {
  position: absolute;
  top: 0;
  left: 0;
  color: #808080; }

#cboxLoadingOverlay {
  background-color: #333; }

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg); }

  100% {
    -webkit-transform: rotate(360deg); } }

@keyframes rotate {
  0% {
    transform: rotate(0deg); }

  100% {
    transform: rotate(360deg); } }

#cboxLoadingGraphic {
  -webkit-animation: rotate 1s infinite linear;
  animation: rotate 1s infinite linear;
  background: url(/img/icon-loading-inv.svg) no-repeat center center;
  height: 24px;
  left: calc(50% - 12px);
  top: calc(50% - 12px);
  width: 24px;
  /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ }

#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  width: auto;
  background: none;
  outline: 0;
  /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ }

#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
  outline: 0; }

#cboxSlideshow {
  position: absolute;
  top: 0;
  right: 30px;
  color: #0092ef; }

#cboxPrevious {
  position: absolute;
  top: 50%;
  left: 5px;
  background: url(/img/icon-previous.svg) no-repeat 0 0;
  width: 16px;
  height: 16px;
  text-indent: -9999px;
  z-index: 9999; }

#cboxPrevious:hover {
  background-position: 0 -16px; }

#cboxNext {
  position: absolute;
  top: 50%;
  right: 5px;
  background: url(/img/icon-next.svg) no-repeat 0 0;
  width: 16px;
  height: 16px;
  text-indent: -9999px;
  z-index: 9999; }

#cboxNext:hover {
  background-position: 0 -16px; }

#cboxClose {
  position: absolute;
  top: 0;
  right: 0;
  background: url(/img/icon-close.svg) no-repeat 0 0;
  width: 16px;
  height: 16px;
  text-indent: -9999px; }

#cboxClose:hover {
  background-position: 0 -16px;
  /*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/ }

.cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); }

* {
  box-sizing: border-box; }

body {
  background-color: #fff;
  color: #333;
  font-family: 'Barlow', 'Inter', Arial, 'ヒラギノ丸ゴ Pro W4', 'ヒラギノ丸ゴ Pro', 'Hiragino Maru Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 26px;
  margin: 0; }

img {
  border: 0; }

h1 {
  font-family: 'Barlow', 'Inter', Arial, 'ヒラギノ丸ゴ Pro W4', 'ヒラギノ丸ゴ Pro', 'Hiragino Maru Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
  font-size: 41px;
  line-height: 58px;
  margin: 0 0 10px; }

h2 {
  font-family: 'Barlow', 'Inter', Arial, 'ヒラギノ丸ゴ Pro W4', 'ヒラギノ丸ゴ Pro', 'Hiragino Maru Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
  font-size: 33px;
  line-height: 47px;
  margin: 0 0 10px; }

h3 {
  font-family: 'Barlow', 'Inter', Arial, 'ヒラギノ丸ゴ Pro W4', 'ヒラギノ丸ゴ Pro', 'Hiragino Maru Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
  font-size: 27px;
  line-height: 38px;
  margin: 0 0 10px; }

h4 {
  font-family: 'Barlow', 'Inter', Arial, 'ヒラギノ丸ゴ Pro W4', 'ヒラギノ丸ゴ Pro', 'Hiragino Maru Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
  font-size: 21px;
  line-height: 30px;
  margin: 0 0 10px; }

h5 {
  font-family: 'Barlow', 'Inter', Arial, 'ヒラギノ丸ゴ Pro W4', 'ヒラギノ丸ゴ Pro', 'Hiragino Maru Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 26px;
  margin: 0 0 10px; }

h6 {
  font-family: 'Barlow', 'Inter', Arial, 'ヒラギノ丸ゴ Pro W4', 'ヒラギノ丸ゴ Pro', 'Hiragino Maru Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
  font-size: 15px;
  line-height: 21px;
  margin: 0 0 5px; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 600; }

p {
  margin: 0 0 10px; }

a, a:link, a:visited, a:hover, a:active, a:focus {
  color: #008cc9;
  text-decoration: none; }

a:hover, a:active, a:focus {
  color: #33a3d4; }

ul {
  margin: 0 0 10px;
  padding: 0; }

ul > li > ul {
  margin: 0; }

li {
  margin: 0 0 0 20px; }

a.cl-wiki-link, a.cl-wiki-link:link, a.cl-wiki-link:visited, a.cl-wiki-link:hover, a.cl-wiki-link:active, a.cl-wiki-link:focus {
  color: #0a7aab;
  text-decoration: none; }

a.cl-wiki-link:hover, a.cl-wiki-link:active, a.cl-wiki-link:focus {
  border-bottom: 1px dotted #008cc9; }

b, strong {
  font-weight: 400; }

.hidden {
  display: none;
  /* begin horizontal centering */ }

.cl-header, .cl-banner, .cl-banner-about, .cl-banner-colophon, .cl-work-heading, .cl-work-featured-heading, .cl-about-heading, .cl-colophon-heading, .cl-section-separator, .cl-section-work-content, .cl-section-work-featured-content, .cl-footer {
  margin: 0 auto;
  max-width: 1260px;
  padding: 0 30px;
  /* end horizontal centering */
  /* begin header */ }

.cl-header-content {
  padding: 30px 0; }
  .cl-header-content::after {
    content: "";
    display: table;
    clear: both; }

.cl-nametag {
  float: left;
  width: 70%; }
  .cl-nametag::after {
    content: "";
    display: table;
    clear: both; }

.cl-avatar {
  background: #fff;
  background: transparent -webkit-radial-gradient(#fff, #cce8f4);
  background: transparent radial-gradient(#fff, #cce8f4);
  border-radius: 100%;
  box-shadow: 0px 1px 0 rgba(255, 255, 255, 0.8), 0px -1px 0 rgba(51, 51, 51, 0.1);
  float: left;
  margin: 0 20px 0 0;
  max-height: 100px; }

.cl-name, .cl-nametag-title {
  line-height: 1;
  margin: 0; }

.cl-name {
  font-weight: 300;
  padding: 20.5px 0 0;
  text-transform: uppercase; }

.cl-nametag-title {
  font-family: 'Barlow', 'Inter', Arial, 'ヒラギノ丸ゴ Pro W4', 'ヒラギノ丸ゴ Pro', 'Hiragino Maru Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 26px;
  font-size: 18.7992px;
  line-height: 18px;
  font-weight: 300; }

.cl-nav-main {
  float: right;
  text-transform: uppercase; }

.cl-nav-main ul {
  margin: 0 0 10px;
  padding: 0; }
  .cl-nav-main ul::after {
    content: "";
    display: table;
    clear: both; }

.cl-nav-main li {
  font-family: 'Barlow', 'Inter', Arial, 'ヒラギノ丸ゴ Pro W4', 'ヒラギノ丸ゴ Pro', 'Hiragino Maru Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
  font-size: 27px;
  line-height: 38px;
  float: left;
  list-style: none;
  margin: 0 30px 0 0;
  padding: 20.5px 0 0; }

.cl-nav-main li:last-of-type {
  margin: 0;
  /* end header */
  /* begin footer */ }

.cl-footer {
  font-family: 'Barlow', 'Inter', Arial, 'ヒラギノ丸ゴ Pro W4', 'ヒラギノ丸ゴ Pro', 'Hiragino Maru Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
  font-size: 15px;
  line-height: 21px;
  margin-top: 50px;
  min-height: 100px; }

a.cl-colophon-toggle {
  color: #333; }

.cl-colophon-wrapper {
  display: none; }

.cl-back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px; }

.cl-back-to-top-link {
  background: transparent url(img/icon-back-to-008CC9.svg) no-repeat 50% 50%;
  background-size: cover;
  display: block;
  height: 32px;
  width: 32px;
  /* end footer */
  /* begin banner */ }

.cl-banner-wrapper, .cl-banner-about-wrapper {
  background-image: url(/img/cranepattern.png);
  background-color: #e6f4fa;
  background-attachment: fixed;
  background-repeat: repeat;
  background-position: 50% 0;
  box-shadow: inset 0 0 10px rgba(51, 51, 51, 0.2); }

.cl-banner-content {
  background-attachment: fixed; }

.cl-banner-content, .cl-banner-about-content {
  background-image: url(/img/bg-banner.jpg);
  background-position: 50% 0;
  background-repeat: no-repeat;
  height: 300px;
  padding: 0 30px;
  position: relative;
  margin: 0 auto 30px; }

.cl-banner-about-content {
  background-image: url(/img/bg-banner-about.jpg);
  background-size: cover; }

.cl-banner-content::after, .cl-banner-about-content::after {
  background: -webkit-linear-gradient(left top, rgba(0, 140, 201, 0.5), rgba(127, 26, 77, 0.5));
  background: linear-gradient(to bottom right, rgba(0, 140, 201, 0.5), rgba(127, 26, 77, 0.5));
  content: " ";
  height: 300px;
  left: 0;
  max-width: 1200px;
  position: absolute;
  top: 0;
  width: 100%; }

.cl-banner-about-content, .cl-banner-about-content::after {
  height: auto; }

.cl-banner-about-content {
  overflow: hidden; }

.cl-banner-about-content::after {
  background-color: rgba(0, 140, 201, 0.5);
  bottom: 0; }

.cl-banner-message {
  left: 50%;
  padding: 0 10%;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  top: 50%;
  width: 100%;
  z-index: 2; }
  .cl-banner-message::after {
    content: "";
    display: table;
    clear: both; }

.cl-banner-about-message {
  background-color: rgba(255, 255, 255, 0.9);
  float: right;
  margin: 30px 0;
  padding: 30px;
  /* text-shadow: 0 0 #{$dim-px-padding-xsmall}px $color-negative,
		0 0 #{$dim-px-padding-xsmall}px $color-negative; */
  position: relative;
  width: 60%;
  z-index: 2; }
  .cl-banner-about-message::after {
    content: "";
    display: table;
    clear: both; }

.cl-banner-tagline, .cl-banner-bio {
  font-family: 'Barlow', 'Inter', Arial, 'ヒラギノ丸ゴ Pro W4', 'ヒラギノ丸ゴ Pro', 'Hiragino Maru Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
  font-size: 27px;
  line-height: 38px;
  text-align: center; }

.cl-banner-tagline {
  margin: 0 0 20px; }

.cl-banner-tagline span {
  color: #fff;
  text-shadow: 0 0 5px #008cc9, 0 0 5px #008cc9;
  /* end banner */
  /* begin work */ }

.cl-work-heading-content {
  margin: 0 0 30px;
  text-transform: uppercase; }

.cl-section-work:last-of-type {
  margin: 0 0 30px; }

.cl-section-work.collapsed {
  position: relative; }

.cl-section-work-content {
  padding: 0 30px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease; }

.cl-section-work-collapse {
  background: transparent url(/img/icon-collapse.svg) no-repeat 50% 50%;
  background-size: cover;
  bottom: -32px;
  display: none;
  height: 32px;
  position: absolute;
  right: 0;
  width: 32px; }

.cl-section-work.collapsed .cl-section-work-collapse {
  display: block; }

.cl-work-preview {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 0 10px rgba(51, 51, 51, 0.2); }

.cl-section-work.collapsed .cl-work-preview {
  margin: 0 0 10px; }

.cl-section-work-01 .cl-work-preview {
  background-image: url(/img/work-fantalk-app-01.jpg); }

.cl-section-work-02 .cl-work-preview {
  background-image: url(/img/work-fantalk-01.jpg); }

.cl-section-work-03 .cl-work-preview {
  background-image: url(/img/work-profile-page-01.jpg); }

.cl-section-work-04 .cl-work-preview {
  background-image: url(img/work-image-gallery-01.jpg); }

.cl-section-work-05 .cl-work-preview {
  background-image: url(/img/work-visual-system-01.jpg); }

.cl-section-work-07 .cl-work-preview {
  background-image: url(/img/work-tshirt-design-04.jpg); }

.cl-section-work-08 .cl-work-preview {
  background-image: url(/img/work-print-design-01.jpg); }

.cl-section-work-10 .cl-work-preview {
  background-image: url(/img/work-engagio-brand-03.jpg); }

.cl-section-work-11 .cl-work-preview {
  background-image: url(/img/work-engagio-app-01.jpg); }

.cl-section-work-12 .cl-work-preview {
  background-image: url(/img/work-engagio-app-01.jpg); }

.cl-work-preview-toggle {
  cursor: pointer;
  display: block;
  position: relative;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  .cl-work-preview-toggle::after {
    content: "";
    display: table;
    clear: both; }

.cl-section-work .cl-work-preview-toggle::before {
  background: -webkit-linear-gradient(left top, rgba(0, 140, 201, 0.2), rgba(127, 26, 77, 0.2));
  background: linear-gradient(to bottom right, rgba(0, 140, 201, 0.2), rgba(127, 26, 77, 0.2));
  content: " ";
  height: 100%;
  left: 0;
  max-width: 1200px;
  opacity: 0;
  position: absolute;
  top: 0;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  width: 100%; }

.cl-section-work .cl-work-preview:hover .cl-work-preview-toggle::before {
  opacity: 1; }

.cl-section-work.collapsed .cl-work-preview .cl-work-preview-toggle::before {
  background: -webkit-linear-gradient(left top, rgba(41, 69, 81, 0.8), rgba(66, 46, 56, 0.8));
  background: linear-gradient(to bottom right, rgba(41, 69, 81, 0.8), rgba(66, 46, 56, 0.8));
  cursor: pointer;
  opacity: 1; }

.cl-section-work.collapsed .cl-work-preview:hover .cl-work-preview-toggle::before {
  background: -webkit-linear-gradient(left top, rgba(41, 69, 81, 0.8), rgba(66, 46, 56, 0.8));
  background: linear-gradient(to bottom right, rgba(41, 69, 81, 0.8), rgba(66, 46, 56, 0.8));
  cursor: default;
  opacity: 1; }

.cl-work-preview-heading {
  background-color: rgba(51, 51, 51, 0.9);
  color: #fff;
  float: left;
  font-weight: 300;
  margin: 10px;
  padding: 0 10px;
  position: relative;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  text-transform: uppercase; }

.cl-section-work.collapsed .cl-work-preview-heading {
  background-color: rgba(0, 140, 201, 0.9);
  left: 10px;
  margin: 10px 10px 10px 50%; }

.cl-work-spacer {
  float: left;
  height: 300px; }

.cl-work-preview:hover .cl-work-preview-heading, .cl-section-work.collapsed .cl-work-preview:hover .cl-work-preview-heading {
  background-color: rgba(0, 140, 201, 0.9); }

.cl-work-display {
  position: relative; }
  .cl-work-display::after {
    content: "";
    display: table;
    clear: both; }

.cl-work-gallery-primary {
  float: left;
  padding: 0 10px 0 0;
  width: 50%; }

.cl-work-gallery-photo img {
  border: 1px solid rgba(0, 140, 201, 0.3); }

.cl-work-gallery-photo .cl-work-photo {
  display: block;
  position: relative; }

.cl-work-gallery-photo-more {
  position: relative; }

.cl-work-gallery-photo-more-count {
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  background-color: rgba(51, 51, 51, 0.5);
  bottom: 0;
  color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  font-family: 'Barlow', 'Inter', Arial, 'ヒラギノ丸ゴ Pro W4', 'ヒラギノ丸ゴ Pro', 'Hiragino Maru Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
  font-size: 41px;
  line-height: 58px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  left: 0;
  margin: 0 5px;
  position: absolute;
  right: 0;
  top: 0;
  vertical-align: middle; }

.cl-work-gallery-secondary {
  margin: 0 -5px 20px; }
  .cl-work-gallery-secondary::after {
    content: "";
    display: table;
    clear: both; }

.cl-work-gallery-primary .cl-work-photo, .cl-work-gallery-secondary .cl-work-photo {
  max-width: 100%; }

.cl-work-gallery-secondary .cl-work-gallery-photo {
  float: left;
  padding: 0 5px;
  width: 25%; }

.cl-work-info {
  float: right;
  padding: 0 0 0 10px;
  width: 50%; }

.cl-work-description {
  clear: both; }

.cl-work-featured-heading-content {
  margin: 0 0 30px;
  text-transform: uppercase; }

.cl-section-work-featured-content {
  padding: 0 30px; }
  .cl-section-work-featured-content::after {
    content: "";
    display: table;
    clear: both; }

.cl-work-featured-preview {
  color: #7f1a4d;
  text-transform: uppercase;
  font-weight: 300; }

.cl-work-featured-preview-heading {
  background-color: rgba(51, 51, 51, 0.9);
  color: #fff;
  display: inline-block;
  font-weight: 300;
  padding: 0 10px;
  text-transform: uppercase; }
  .cl-work-featured-preview-heading a {
    color: #fff; }
  .cl-work-featured-preview-heading:hover {
    background-color: rgba(0, 140, 201, 0.9);
    color: #fff; }
    .cl-work-featured-preview-heading:hover a {
      color: #fff; }

.cl-work-featured-snippet {
  float: left;
  padding: 0 15px 0 0;
  width: 40%; }

.cl-work-featured-thumbnail {
  float: right;
  padding: 0 0 0 15px;
  width: 60%; }

.cl-work-featured-thumbnail-image {
  max-width: 100%; }

.cl-work-featured-thumbnail-content {
  box-shadow: inset 0 0 10px rgba(51, 51, 51, 0.2); }

.cl-section-separator .cl-section-separator-fill {
  background: rgba(0, 140, 201, 0.3);
  background: transparent -webkit-linear-gradient(0deg, rgba(0, 140, 201, 0), rgba(0, 140, 201, 0.3), rgba(0, 140, 201, 0));
  background: transparent linear-gradient(90deg, rgba(0, 140, 201, 0), rgba(0, 140, 201, 0.3), rgba(0, 140, 201, 0));
  height: 1px;
  margin: 50px 0; }

.cl-section-separator .cl-section-separator-fill::after {
  color: #b3ddef;
  content: "\00A7";
  display: block;
  position: relative;
  text-align: center;
  text-shadow: -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 3px 3px 0 #fff;
  top: -0.8em;
  /* end work */
  /* begin about */ }

.cl-about-heading-content, .cl-colophon-heading-content {
  margin: 0 0 30px;
  text-transform: uppercase; }

.cl-about, .cl-colophon {
  margin: 0 0 30px; }

.cl-about-muted {
  color: #c2c2c2; }

.cl-profile-social::after {
  content: "";
  display: table;
  clear: both; }

.cl-profile-social-links {
  display: block;
  float: left;
  margin: 0 10px 20px 0;
  /* end about */
  /*** begin width based adjustments ***/ }

@media only screen and (max-width: 1400px) {
  .cl-back-to-top {
    display: none; } }

@media only screen and (max-width: 1200px) {
  .cl-banner-message {
    padding: 0 10%; } }

@media only screen and (max-width: 1000px) {
  body {
    font-size: 14px;
    line-height: 20px; }

  h1 {
    font-size: 31px;
    line-height: 44px; }

  h2 {
    font-size: 25px;
    line-height: 36px; }

  h3 {
    font-size: 20px;
    line-height: 29px; }

  h4 {
    font-size: 16px;
    line-height: 23px; }

  h5 {
    font-size: 14px;
    line-height: 20px; }

  h6 {
    font-size: 11px;
    line-height: 16px; }

  .cl-header, .cl-banner, .cl-banner-about, .cl-banner-colophon, .cl-work-heading, .cl-work-featured-heading, .cl-about-heading, .cl-colophon-heading, .cl-section-separator, .cl-section-work-content, .cl-section-work-featured-content, .cl-footer {
    padding: 0 10px; }

  .cl-section-separator .cl-section-separator-fill {
    margin: 20px 0; }

  .cl-name {
    padding: 27.875px 0 0; }

  .cl-nametag-title {
    font-size: 14px;
    line-height: 20px;
    font-size: 14.46429px;
    line-height: 13.5px; }

  .cl-nav-main li {
    font-size: 20px;
    line-height: 29px;
    padding: 27.875px 0 0; }

  .cl-footer {
    margin-top: 20px; }

  .cl-banner-tagline, .cl-banner-bio {
    font-size: 20px;
    line-height: 29px; }

  .cl-banner-tagline-diagram-1 {
    font-size: 20px;
    line-height: 29px;
    height: 90px;
    line-height: 90px;
    margin: -0.375px 10px 0 0;
    width: 90px; }

  .cl-banner-tagline-diagram-2 {
    font-size: 20px;
    line-height: 29px;
    height: 37.5px;
    line-height: 37.5px;
    margin: 25.875px 10px 0 0;
    width: 37.5px; }

  .cl-banner-tagline-list li {
    border-radius: 19.5px; }

  .cl-work-gallery-photo-more-count {
    font-size: 31px;
    line-height: 44px; }

  .cl-section-work-collapse {
    bottom: 0;
    height: 16px;
    width: 16px; } }

@media only screen and (max-width: 800px) {
  .cl-banner-message {
    padding: 0 10px; }

  .cl-work-featured-snippet, .cl-work-featured-thumbnail {
    float: none;
    padding: 0;
    width: auto; }

  .cl-banner-about-message {
    width: auto;
    margin: 0;
    padding: 10px; } }

@media only screen and (max-width: 600px) {
  /*** end width based adjustments ***/
    .cl-avatar {
      max-height: 75px; }
    .cl-nametag {
      float: none;
      width: auto; }
    .cl-name {
      padding: 15.375px 0 0; }
    .cl-nav-main {
      float: left; }
    .cl-nav-main ul {
      margin: 0; }
    .cl-work-gallery-primary, .cl-work-info {
      float: none;
      padding: 0 0 10px;
      width: auto; }
    .cl-section-work.collapsed .cl-work-preview-heading {
      margin: 10px;
      left: auto; }
    .cl-banner-about-content {
      padding: 0; } }
/* begin horizontal centering */
.cl-process-heading, .cl-section-process-content {
  margin: 0 auto;
  max-width: 1260px;
  padding: 0 30px;
  /* end horizontal centering */
  /* begin process */ }

.cl-process-heading-content {
  margin: 0 0 30px;
  text-transform: uppercase; }

.cl-section-process:last-of-type {
  margin: 0 0 30px; }

.cl-section-process-content {
  padding: 0 30px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease; }

.cl-process-display::after {
  content: "";
  display: table;
  clear: both; }

.cl-process-display + .cl-section-process-gallery {
  margin: 20px 0 0; }

.cl-process-content-primary {
  float: left;
  padding: 0 20px 0 0;
  width: 50%; }

.cl-process-info {
  float: right;
  padding: 0 0 0 20px;
  width: 50%; }

.cl-process-description {
  clear: both; }

.cl-process-info .cl-process-blurb {
  font-family: 'Barlow', 'Inter', Arial, 'ヒラギノ丸ゴ Pro W4', 'ヒラギノ丸ゴ Pro', 'Hiragino Maru Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
  font-size: 15px;
  line-height: 21px; }

.cl-process-info .cl-process-blurb strong {
  font-family: 'Barlow', 'Inter', Arial, 'ヒラギノ丸ゴ Pro W4', 'ヒラギノ丸ゴ Pro', 'Hiragino Maru Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 26px;
  font-weight: 600; }

.cl-process-photo {
  border: 1px solid #f3f3f3;
  max-width: 100%; }

.cl-process-photo-caption {
  color: #808080;
  margin: 0;
  font-family: 'Barlow', 'Inter', Arial, 'ヒラギノ丸ゴ Pro W4', 'ヒラギノ丸ゴ Pro', 'Hiragino Maru Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
  font-size: 15px;
  line-height: 21px;
  text-align: right;
  /* end process */
  /*** begin width based adjustments ***/ }

@media only screen and (max-width: 1000px) {
  .cl-process-heading, .cl-section-process-content {
    padding: 0 10px; }

  .cl-process-photo-caption {
    margin: 0;
    font-size: 11px;
    line-height: 16px; } }

@media only screen and (max-width: 600px) {
  /*** end width based adjustments ***/
    .cl-process-content-primary, .cl-process-info {
      float: none;
      padding: 0 0 10px;
      width: auto; } }