/* body */
/* a */
/**
 * Box-sizing
 */
/**
 * clearfix
 */
/**
 * border-radius
 */
/**
 * box-shadow
 */
/**
 * background-gradient
 */
/**
 * columns
 */
/**
 * Opacity
 */
@media only screen and (min-width: 900px) {
  .grid-box {
    position: absolute;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 0; }
    .grid-box > div {
      position: absolute;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0; }
      .grid-box > div > div {
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        height: 100%; }

  .grid-flowbox {
    float: left;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 0; }
    .grid-flowbox > div {
      position: absolute;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0; }
      .grid-flowbox > div > div {
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        height: 100%; }

  .grid-wrapper-static {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 0;
    overflow: visible; }
    .grid-wrapper-static > div {
      position: absolute;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0; }

  .grid-wrapper-absolute {
    position: absolute;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 0;
    overflow: visible; }
    .grid-wrapper-absolute > div {
      position: absolute;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0; } }
@media only screen and (min-width: 1150px) {
  .cz-w1.cz-h1 {
    width: 16.66665%;
    padding-top: 16.66665%; }
    .cz-w1.cz-h1.grid-cell > div {
      padding: 2.5%; }

  .cz-w2.cz-h1 {
    width: 33.3333%;
    padding-top: 16.66665%; }
    .cz-w2.cz-h1.grid-cell > div {
      padding: 1.25%; }

  .cz-w3.cz-h1 {
    width: 49.99995%;
    padding-top: 16.66665%; }
    .cz-w3.cz-h1.grid-cell > div {
      padding: 0.83333%; }

  .cz-w4.cz-h1 {
    width: 66.6666%;
    padding-top: 16.66665%; }
    .cz-w4.cz-h1.grid-cell > div {
      padding: 0.625%; }

  .cz-w5.cz-h1 {
    width: 83.33325%;
    padding-top: 16.66665%; }
    .cz-w5.cz-h1.grid-cell > div {
      padding: 0.5%; }

  .cz-w6.cz-h1 {
    width: 99.9999%;
    padding-top: 16.66665%; }
    .cz-w6.cz-h1.grid-cell > div {
      padding: 0.41667%; }

  .cz-w1.cz-h2 {
    width: 16.66665%;
    padding-top: 33.3333%; }
    .cz-w1.cz-h2.grid-cell > div {
      padding: 2.5%; }

  .cz-w2.cz-h2 {
    width: 33.3333%;
    padding-top: 33.3333%; }
    .cz-w2.cz-h2.grid-cell > div {
      padding: 1.25%; }

  .cz-w3.cz-h2 {
    width: 49.99995%;
    padding-top: 33.3333%; }
    .cz-w3.cz-h2.grid-cell > div {
      padding: 0.83333%; }

  .cz-w4.cz-h2 {
    width: 66.6666%;
    padding-top: 33.3333%; }
    .cz-w4.cz-h2.grid-cell > div {
      padding: 0.625%; }

  .cz-w5.cz-h2 {
    width: 83.33325%;
    padding-top: 33.3333%; }
    .cz-w5.cz-h2.grid-cell > div {
      padding: 0.5%; }

  .cz-w6.cz-h2 {
    width: 99.9999%;
    padding-top: 33.3333%; }
    .cz-w6.cz-h2.grid-cell > div {
      padding: 0.41667%; }

  .cz-w1.cz-h3 {
    width: 16.66665%;
    padding-top: 49.99995%; }
    .cz-w1.cz-h3.grid-cell > div {
      padding: 2.5%; }

  .cz-w2.cz-h3 {
    width: 33.3333%;
    padding-top: 49.99995%; }
    .cz-w2.cz-h3.grid-cell > div {
      padding: 1.25%; }

  .cz-w3.cz-h3 {
    width: 49.99995%;
    padding-top: 49.99995%; }
    .cz-w3.cz-h3.grid-cell > div {
      padding: 0.83333%; }

  .cz-w4.cz-h3 {
    width: 66.6666%;
    padding-top: 49.99995%; }
    .cz-w4.cz-h3.grid-cell > div {
      padding: 0.625%; }

  .cz-w5.cz-h3 {
    width: 83.33325%;
    padding-top: 49.99995%; }
    .cz-w5.cz-h3.grid-cell > div {
      padding: 0.5%; }

  .cz-w6.cz-h3 {
    width: 99.9999%;
    padding-top: 49.99995%; }
    .cz-w6.cz-h3.grid-cell > div {
      padding: 0.41667%; }

  .cz-w1.cz-h4 {
    width: 16.66665%;
    padding-top: 66.6666%; }
    .cz-w1.cz-h4.grid-cell > div {
      padding: 2.5%; }

  .cz-w2.cz-h4 {
    width: 33.3333%;
    padding-top: 66.6666%; }
    .cz-w2.cz-h4.grid-cell > div {
      padding: 1.25%; }

  .cz-w3.cz-h4 {
    width: 49.99995%;
    padding-top: 66.6666%; }
    .cz-w3.cz-h4.grid-cell > div {
      padding: 0.83333%; }

  .cz-w4.cz-h4 {
    width: 66.6666%;
    padding-top: 66.6666%; }
    .cz-w4.cz-h4.grid-cell > div {
      padding: 0.625%; }

  .cz-w5.cz-h4 {
    width: 83.33325%;
    padding-top: 66.6666%; }
    .cz-w5.cz-h4.grid-cell > div {
      padding: 0.5%; }

  .cz-w6.cz-h4 {
    width: 99.9999%;
    padding-top: 66.6666%; }
    .cz-w6.cz-h4.grid-cell > div {
      padding: 0.41667%; }

  .cz-w1.cz-h5 {
    width: 16.66665%;
    padding-top: 83.33325%; }
    .cz-w1.cz-h5.grid-cell > div {
      padding: 2.5%; }

  .cz-w2.cz-h5 {
    width: 33.3333%;
    padding-top: 83.33325%; }
    .cz-w2.cz-h5.grid-cell > div {
      padding: 1.25%; }

  .cz-w3.cz-h5 {
    width: 49.99995%;
    padding-top: 83.33325%; }
    .cz-w3.cz-h5.grid-cell > div {
      padding: 0.83333%; }

  .cz-w4.cz-h5 {
    width: 66.6666%;
    padding-top: 83.33325%; }
    .cz-w4.cz-h5.grid-cell > div {
      padding: 0.625%; }

  .cz-w5.cz-h5 {
    width: 83.33325%;
    padding-top: 83.33325%; }
    .cz-w5.cz-h5.grid-cell > div {
      padding: 0.5%; }

  .cz-w6.cz-h5 {
    width: 99.9999%;
    padding-top: 83.33325%; }
    .cz-w6.cz-h5.grid-cell > div {
      padding: 0.41667%; }

  .cz-w1.cz-h6 {
    width: 16.66665%;
    padding-top: 99.9999%; }
    .cz-w1.cz-h6.grid-cell > div {
      padding: 2.5%; }

  .cz-w2.cz-h6 {
    width: 33.3333%;
    padding-top: 99.9999%; }
    .cz-w2.cz-h6.grid-cell > div {
      padding: 1.25%; }

  .cz-w3.cz-h6 {
    width: 49.99995%;
    padding-top: 99.9999%; }
    .cz-w3.cz-h6.grid-cell > div {
      padding: 0.83333%; }

  .cz-w4.cz-h6 {
    width: 66.6666%;
    padding-top: 99.9999%; }
    .cz-w4.cz-h6.grid-cell > div {
      padding: 0.625%; }

  .cz-w5.cz-h6 {
    width: 83.33325%;
    padding-top: 99.9999%; }
    .cz-w5.cz-h6.grid-cell > div {
      padding: 0.5%; }

  .cz-w6.cz-h6 {
    width: 99.9999%;
    padding-top: 99.9999%; }
    .cz-w6.cz-h6.grid-cell > div {
      padding: 0.41667%; }

  .cz-x0 {
    left: 0%; }

  .cz-x1 {
    left: 16.66665%; }

  .cz-x2 {
    left: 33.3333%; }

  .cz-x3 {
    left: 49.99995%; }

  .cz-x4 {
    left: 66.6666%; }

  .cz-x5 {
    left: 83.33325%; }

  .cz-y0 {
    top: 0%; }

  .cz-y1 {
    top: 16.66665%; }

  .cz-y2 {
    top: 33.3333%; }

  .cz-y3 {
    top: 49.99995%; }

  .cz-y4 {
    top: 66.6666%; }

  .cz-y5 {
    top: 83.33325%; } }
@media only screen and (min-width: 900px) and (max-width: 1150px) {
  .cp-w1.cp-h1 {
    width: 20%;
    padding-top: 20%; }
    .cp-w1.cp-h1.grid-cell > div {
      padding: 2.5%; }

  .cp-w2.cp-h1 {
    width: 40%;
    padding-top: 20%; }
    .cp-w2.cp-h1.grid-cell > div {
      padding: 1.25%; }

  .cp-w3.cp-h1 {
    width: 60%;
    padding-top: 20%; }
    .cp-w3.cp-h1.grid-cell > div {
      padding: 0.83333%; }

  .cp-w4.cp-h1 {
    width: 80%;
    padding-top: 20%; }
    .cp-w4.cp-h1.grid-cell > div {
      padding: 0.625%; }

  .cp-w5.cp-h1 {
    width: 100%;
    padding-top: 20%; }
    .cp-w5.cp-h1.grid-cell > div {
      padding: 0.5%; }

  .cp-w6.cp-h1 {
    width: 120%;
    padding-top: 20%; }
    .cp-w6.cp-h1.grid-cell > div {
      padding: 0.41667%; }

  .cp-w1.cp-h2 {
    width: 20%;
    padding-top: 40%; }
    .cp-w1.cp-h2.grid-cell > div {
      padding: 2.5%; }

  .cp-w2.cp-h2 {
    width: 40%;
    padding-top: 40%; }
    .cp-w2.cp-h2.grid-cell > div {
      padding: 1.25%; }

  .cp-w3.cp-h2 {
    width: 60%;
    padding-top: 40%; }
    .cp-w3.cp-h2.grid-cell > div {
      padding: 0.83333%; }

  .cp-w4.cp-h2 {
    width: 80%;
    padding-top: 40%; }
    .cp-w4.cp-h2.grid-cell > div {
      padding: 0.625%; }

  .cp-w5.cp-h2 {
    width: 100%;
    padding-top: 40%; }
    .cp-w5.cp-h2.grid-cell > div {
      padding: 0.5%; }

  .cp-w6.cp-h2 {
    width: 120%;
    padding-top: 40%; }
    .cp-w6.cp-h2.grid-cell > div {
      padding: 0.41667%; }

  .cp-w1.cp-h3 {
    width: 20%;
    padding-top: 60%; }
    .cp-w1.cp-h3.grid-cell > div {
      padding: 2.5%; }

  .cp-w2.cp-h3 {
    width: 40%;
    padding-top: 60%; }
    .cp-w2.cp-h3.grid-cell > div {
      padding: 1.25%; }

  .cp-w3.cp-h3 {
    width: 60%;
    padding-top: 60%; }
    .cp-w3.cp-h3.grid-cell > div {
      padding: 0.83333%; }

  .cp-w4.cp-h3 {
    width: 80%;
    padding-top: 60%; }
    .cp-w4.cp-h3.grid-cell > div {
      padding: 0.625%; }

  .cp-w5.cp-h3 {
    width: 100%;
    padding-top: 60%; }
    .cp-w5.cp-h3.grid-cell > div {
      padding: 0.5%; }

  .cp-w6.cp-h3 {
    width: 120%;
    padding-top: 60%; }
    .cp-w6.cp-h3.grid-cell > div {
      padding: 0.41667%; }

  .cp-w1.cp-h4 {
    width: 20%;
    padding-top: 80%; }
    .cp-w1.cp-h4.grid-cell > div {
      padding: 2.5%; }

  .cp-w2.cp-h4 {
    width: 40%;
    padding-top: 80%; }
    .cp-w2.cp-h4.grid-cell > div {
      padding: 1.25%; }

  .cp-w3.cp-h4 {
    width: 60%;
    padding-top: 80%; }
    .cp-w3.cp-h4.grid-cell > div {
      padding: 0.83333%; }

  .cp-w4.cp-h4 {
    width: 80%;
    padding-top: 80%; }
    .cp-w4.cp-h4.grid-cell > div {
      padding: 0.625%; }

  .cp-w5.cp-h4 {
    width: 100%;
    padding-top: 80%; }
    .cp-w5.cp-h4.grid-cell > div {
      padding: 0.5%; }

  .cp-w6.cp-h4 {
    width: 120%;
    padding-top: 80%; }
    .cp-w6.cp-h4.grid-cell > div {
      padding: 0.41667%; }

  .cp-w1.cp-h5 {
    width: 20%;
    padding-top: 100%; }
    .cp-w1.cp-h5.grid-cell > div {
      padding: 2.5%; }

  .cp-w2.cp-h5 {
    width: 40%;
    padding-top: 100%; }
    .cp-w2.cp-h5.grid-cell > div {
      padding: 1.25%; }

  .cp-w3.cp-h5 {
    width: 60%;
    padding-top: 100%; }
    .cp-w3.cp-h5.grid-cell > div {
      padding: 0.83333%; }

  .cp-w4.cp-h5 {
    width: 80%;
    padding-top: 100%; }
    .cp-w4.cp-h5.grid-cell > div {
      padding: 0.625%; }

  .cp-w5.cp-h5 {
    width: 100%;
    padding-top: 100%; }
    .cp-w5.cp-h5.grid-cell > div {
      padding: 0.5%; }

  .cp-w6.cp-h5 {
    width: 120%;
    padding-top: 100%; }
    .cp-w6.cp-h5.grid-cell > div {
      padding: 0.41667%; }

  .cp-w1.cp-h6 {
    width: 20%;
    padding-top: 120%; }
    .cp-w1.cp-h6.grid-cell > div {
      padding: 2.5%; }

  .cp-w2.cp-h6 {
    width: 40%;
    padding-top: 120%; }
    .cp-w2.cp-h6.grid-cell > div {
      padding: 1.25%; }

  .cp-w3.cp-h6 {
    width: 60%;
    padding-top: 120%; }
    .cp-w3.cp-h6.grid-cell > div {
      padding: 0.83333%; }

  .cp-w4.cp-h6 {
    width: 80%;
    padding-top: 120%; }
    .cp-w4.cp-h6.grid-cell > div {
      padding: 0.625%; }

  .cp-w5.cp-h6 {
    width: 100%;
    padding-top: 120%; }
    .cp-w5.cp-h6.grid-cell > div {
      padding: 0.5%; }

  .cp-w6.cp-h6 {
    width: 120%;
    padding-top: 120%; }
    .cp-w6.cp-h6.grid-cell > div {
      padding: 0.41667%; }

  .cp-x0 {
    left: 0%; }

  .cp-x1 {
    left: 20%; }

  .cp-x2 {
    left: 40%; }

  .cp-x3 {
    left: 60%; }

  .cp-x4 {
    left: 80%; }

  .cp-x5 {
    left: 100%; }

  .cp-y0 {
    top: 0%; }

  .cp-y1 {
    top: 20%; }

  .cp-y2 {
    top: 40%; }

  .cp-y3 {
    top: 60%; }

  .cp-y4 {
    top: 80%; }

  .cp-y5 {
    top: 100%; } }
@font-face {
  font-family: "DinLight";
  src: url("../font/DinLight.eot");
  src: url("../font/DinLight.eot?#iefix") format("embedded-opentype"), url("../font/DinLight.woff") format("woff"), url("../font/DinLight.ttf") format("truetype"), url("../font/DinLight.svg#DinLight") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: "DinRegular";
  src: url("../font/DinRegular.eot");
  src: url("../font/DinRegular.eot?#iefix") format("embedded-opentype"), url("../font/DinRegular.woff") format("woff"), url("../font/DinRegular.ttf") format("truetype"), url("../font/DinRegular.svg#DinRegular") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: "DinMedium";
  src: url("../font/DinMedium.eot");
  src: url("../font/DinMedium.eot?#iefix") format("embedded-opentype"), url("../font/DinMedium.woff") format("woff"), url("../font/DinMedium.ttf") format("truetype"), url("../font/DinMedium.svg#DinMedium") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: "DinBold";
  src: url("../font/DinBold.eot");
  src: url("../font/DinBold.eot?#iefix") format("embedded-opentype"), url("../font/DinBold.woff") format("woff"), url("../font/DinBold.ttf") format("truetype"), url("../font/DinBold.svg#DinBold") format("svg");
  font-weight: normal;
  font-style: normal; }

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/**
 * Add from html5doctor.com Reset Stylesheet
 */
del {
  text-decoration: line-through; }

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

body {
  background: white;
  color: black;
  line-height: 170%;
  font-size: .8em;
  font-family: "DinRegular", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei", "Apple LiGothic Medium", "SimHei", "ST Heiti", "WenQuanYi Zen Hei Sharp", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: none; }

.safari body,
.chrome body {
  -webkit-text-size-adjust: auto; }

/**
 * Hyperlinks
 */
a {
  color: black;
  text-decoration: none; }

a:hover {
  text-decoration: underline; }

a img {
  border: none; }

/**
 * Common Class Names
 */
.hide {
  display: none; }

.invisible {
  visibility: hidden; }

.disappear {
  position: absolute;
  left: -99999px;
  top: -99999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: .01; }

.clearfix {
  zoom: 1; }
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden; }

.clearself {
  overflow: hidden; }

.center {
  text-align: center; }

/**
 * layouts
 */
ul.dash {
  list-style: none;
  margin-left: 10px; }
ul.dash li:before {
  content: "-";
  float: left;
  width: 10px;
  margin-left: -10px; }

/**
 * .content re-reset
 */
.content p {
  margin: 1.2em 0; }
.content strong {
  font-weight: bold; }
.content em {
  font-style: italic; }

#activate-javascript {
  position: fixed;
  background: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  right: 0;
  color: #e6cb05;
  text-align: center;
  font-size: 15px;
  padding-top: 10px; }
  #activate-javascript a {
    color: #e6cb05;
    border-bottom: 2px solid; }
    #activate-javascript a:hover {
      text-decoration: none; }

div.success {
  padding: 1em 2em;
  margin-bottom: 1em;
  background: #eee;
  color: black; }
  div.success i {
    font-style: italic;
    margin-right: .5em; }

.width-100-percent {
  width: 100%; }

.text-align-right {
  text-align: right; }

.text-align-center {
  text-align: center; }

.padding-bottom-50-px {
  padding-bottom: 50px; }

.padding-bottom-30-px {
  padding-bottom: 30px; }

/**
 * 404 Not Found
 */
#error-404 {
  padding: 23% 0;
  text-align: center; }
  #error-404 .h1 {
    font-size: 52px; }
  #error-404 p {
    padding: 10px 0 20%; }

/**
 * Warning
 */
div.warning {
  margin-bottom: 1em;
  color: #c23418; }

/**
 * Input
 */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }

textarea,
input[type=text],
input[type=password],
input[type=search],
input[type=number],
input[type=email] {
  border: 0;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 15px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid transparent;
  background: #888;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px; }

textarea:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=email]:focus {
  border-color: #acd3d6;
  outline: none;
  background: #ccc; }

input[type=submit] {
  -webkit-appearance: none;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  border: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #acd3d6;
  color: black;
  font-size: 22px;
  line-height: 100%;
  cursor: pointer;
  text-transform: uppercase; }

/**
 * form
 */
.form-row {
  padding: 2px 0; }
.form-row .content .note {
  margin: 0;
  color: #888; }

.submit-row input[type=submit] {
  padding: 10px 35px 8px;
  margin-top: 1em; }
.submit-row.right {
  text-align: right; }

/**
 * radio-list
 */
.radio-list.inline {
  list-style: none; }
.radio-list.inline li {
  display: inline;
  margin-right: 2em; }

input[type=text].error,
input[type=email].error,
input[type=number].error,
input[type=password].error {
  background: #f0e781; }

/**
 * cozy-form & simple form
 */
.cozy-form {
  width: 500px;
  margin: 0 auto; }
.cozy-form form {
  padding: 10% 0; }

form.simple {
  margin: 0 auto; }
form.simple input[type=text],
form.simple input[type=email],
form.simple input[type=number],
form.simple input[type=password],
form.simple textarea {
  width: 100%; }

/** ==================== Responsive ==================== **/
/** easy **/
@media only screen and (min-width: 600px) {
  .form-row {
    overflow: hidden;
    margin-bottom: 1.2em; }

  .form-row .head {
    float: left;
    width: 100px; }

  .form-row .head + .content {
    margin-left: 100px; }

  form.simple .submit-row .content {
    margin-left: 100px; } }
/** thick **/
@media only screen and (max-width: 599px) {
  .form-row {
    margin-bottom: .7em; }

  div.cozy-form form {
    width: 90%; }

  form.simple .submit-row .content {
    margin-left: 0; }

  form.simple .submit-row .content input[type=submit] {
    width: 100%; } }
.button {
  background: #acd3d6;
  color: black;
  cursor: pointer;
  font-size: 20px;
  text-transform: uppercase; }
  .button:hover {
    background: white; }

a.button,
a.button:hover {
  text-decoration: none !important; }

.button.block {
  display: block;
  text-align: center;
  padding: 8px 0;
  width: 100%; }

@media only screen and (min-width: 1150px) {
  #wrap {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px; } }
@media only screen and (min-width: 900px) and (max-width: 1150px) {
  #wrap {
    padding: 0 1.5%; } }
@media only screen and (max-width: 899px) {
  #wrap {
    padding-top: 44px;
    width: 100%;
    overflow: hidden; } }

@media only screen and (max-width: 899px) {
  #main {
    padding: 2.5%;
    max-width: 600px;
    margin: 0 auto; } }
.lte-ie8 #byebye {
  width: 300px;
  margin: 0 auto;
  text-align: center;
  padding: 10%; }
  .lte-ie8 #byebye h1 {
    font-family: "DinBold", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei", "Apple LiGothic Medium", "SimHei", "ST Heiti", "WenQuanYi Zen Hei Sharp", sans-serif;
    color: white;
    font-size: 26px; }
  .lte-ie8 #byebye p {
    margin: 2em 0; }
  .lte-ie8 #byebye .button {
    padding: 10px 20px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1em; }
.lte-ie8 #wrap {
  display: none; }

/**
 * Header
 */
@media only screen and (min-width: 900px) {
  #header #logo {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0; }
    #header #logo svg {
      width: 100%;
      height: 100%; } }
@media only screen and (max-width: 899px) {
  #header .header {
    z-index: 999;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background: black;
    display: block;
    height: 44px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    padding-top: 5px;
    font-size: 20px;
    font-family: "DinMedium", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei", "Apple LiGothic Medium", "SimHei", "ST Heiti", "WenQuanYi Zen Hei Sharp", sans-serif; }
  #header h1 {
    display: none; }
  #header .apo-logo svg {
    fill: white; }
  #header .tap-button {
    position: absolute;
    left: 0;
    top: 0;
    height: 44px;
    width: 44px;
    cursor: pointer; }
    #header .tap-button b {
      display: block;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 13px; }
    #header .tap-button i {
      display: block;
      height: 3px;
      margin-bottom: 5px;
      background: white;
      -webkit-background-clip: padding-box;
      -moz-background-clip: padding;
      background-clip: padding-box;
      -webkit-border-radius: 1px;
      -moz-border-radius: 1px;
      border-radius: 1px; }
    #header .tap-button.active i {
      background: #aaa; }
  #header #logo {
    display: none; }
  #header nav {
    display: none; } }

/**
 * Nav
 */
nav {
  font-family: "DinMedium", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei", "Apple LiGothic Medium", "SimHei", "ST Heiti", "WenQuanYi Zen Hei Sharp", sans-serif;
  font-size: 15px; }
  @media only screen and (min-width: 900px) {
    nav li a:hover {
      text-decoration: none;
      border-bottom-width: 2px;
      border-bottom-style: solid; }
    nav #main-nav ul {
      padding-top: 5%;
      padding-left: 2.5%;
      line-height: 160%; }
    nav #main-nav li.active a {
      border-bottom: 2px solid; }
    nav #main-nav li#link-portfolio.active a,
    nav #main-nav li#link-portfolio a:hover {
      color: black; }
    nav #main-nav li#link-design-lab.active a,
    nav #main-nav li#link-design-lab a:hover {
      color: #83cba6; }
    nav #main-nav li#link-about {
      margin-bottom: 1.5em; }
      nav #main-nav li#link-about.active a,
      nav #main-nav li#link-about a:hover {
        color: #f7a291; }
    nav #external-nav {
      padding-top: 5%;
      padding-left: 2.5%; }
      nav #external-nav a:hover {
        color: #f7a291; }
    nav #contact {
      line-height: 140%;
      font-family: "DinRegular", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei", "Apple LiGothic Medium", "SimHei", "ST Heiti", "WenQuanYi Zen Hei Sharp", sans-serif;
      font-size: 12.8px;
      position: absolute;
      left: 0;
      bottom: 0;
      padding-left: 2.5%; } }

#mobile-nav {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  background: #333;
  font-size: 15px;
  width: 0;
  padding-top: 20px; }
  #mobile-nav ul {
    width: 250px;
    text-transform: uppercase; }
    #mobile-nav ul li.hide {
      display: block; }
    #mobile-nav ul li {
      border-bottom: 1px solid #222; }
      #mobile-nav ul li a {
        display: block;
        padding: .6em 2em;
        color: #ddd; }
        #mobile-nav ul li a:hover {
          text-decoration: none;
          color: white; }
      #mobile-nav ul li.active a {
        background: black; }

/**
 * Footer
 */
#footer {
  line-height: 140%; }
  @media only screen and (min-width: 900px) {
    #footer #site-credit {
      position: absolute;
      bottom: 0;
      left: 0;
      padding-left: 1.25%; }
    #footer #site-owner {
      margin-bottom: 1em; }
      #footer #site-owner a:hover {
        text-decoration: none; }
      #footer #site-owner span:lang(en) {
        font-family: "DinMedium", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei", "Apple LiGothic Medium", "SimHei", "ST Heiti", "WenQuanYi Zen Hei Sharp", sans-serif; }
      #footer #site-owner span:lang(zh) {
        font-weight: bold; }
    #footer #copyright {
      font-family: "DinLight", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei", "Apple LiGothic Medium", "SimHei", "ST Heiti", "WenQuanYi Zen Hei Sharp", sans-serif; }
    #footer #contact {
      position: absolute;
      bottom: 0;
      left: 0;
      padding-left: 2.5%; } }
  @media only screen and (min-width: 400px) and (max-width: 899px) {
    #footer {
      clear: both;
      max-width: 600px;
      margin: 0 auto;
      overflow: hidden;
      padding: 5% 2.5%; }
      #footer #contact {
        float: left; }
      #footer #site-credit {
        float: right;
        text-align: right; } }
  @media only screen and (max-width: 399px) {
    #footer {
      clear: both;
      text-align: center;
      background: black;
      color: white;
      padding: 5% 0; }
      #footer a {
        color: white;
        text-decoration: underline; }
      #footer #contact {
        padding-bottom: 3%; } }

#home-index-page .project-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; }
  #home-index-page .project-box img {
    width: 100%;
    height: 100%; }
  #home-index-page .project-box p {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 3px 8px;
    line-height: 140%; }
  #home-index-page .project-box.portfolio p {
    background: black;
    color: white; }
  #home-index-page .project-box.architecture p {
    background: white;
    color: black; }
  #home-index-page .project-box.design-lab p {
    background: #83cba6;
    color: black; }
@media only screen and (min-width: 1150px) {
  #home-index-page #concept,
  #home-index-page #blog {
    padding-left: 2.5%; } }
@media only screen and (min-width: 900px) {
  #home-index-page #concept {
    padding-top: 10px;
    border-top: 4px solid black; }
  #home-index-page #blog {
    padding-top: 10px;
    border-top: 4px solid black; }
    #home-index-page #blog a {
      border-bottom: 1px solid; }
      #home-index-page #blog a:hover {
        text-decoration: none;
        border-bottom-width: 2px; }
    #home-index-page #blog p {
      padding-top: 1em; }
  #home-index-page #motto,
  #home-index-page #about {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
    #home-index-page #motto img,
    #home-index-page #about img {
      width: 100%;
      height: 100%; }
  #home-index-page #main-project li {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none; }
    #home-index-page #main-project li img {
      width: 100%;
      height: 100%; }
  #home-index-page #main-project p {
    right: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  #home-index-page .project-box#board2 p {
    right: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; } }
@media only screen and (max-width: 899px) {
  #home-index-page #main-project {
    width: 100%;
    padding-top: 100%;
    height: 0;
    overflow: hidden;
    position: relative;
    margin-bottom: 3%; }
    #home-index-page #main-project li {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0; }
      #home-index-page #main-project li img {
        width: 100%;
        height: 100%; }
  #home-index-page #about img {
    width: 100%;
    height: 100%; }
  #home-index-page #box-8, #home-index-page #box-9, #home-index-page #box-10, #home-index-page #box-11, #home-index-page #box-12, #home-index-page #box-13, #home-index-page #box-14, #home-index-page #box-15 {
    float: left;
    width: 48.5%;
    margin-bottom: 3%; }
    #home-index-page #box-8 > div, #home-index-page #box-9 > div, #home-index-page #box-10 > div, #home-index-page #box-11 > div, #home-index-page #box-12 > div, #home-index-page #box-13 > div, #home-index-page #box-14 > div, #home-index-page #box-15 > div {
      width: 100%;
      padding-top: 100%;
      height: 0;
      overflow: hidden;
      position: relative; }
      #home-index-page #box-8 > div > div, #home-index-page #box-9 > div > div, #home-index-page #box-10 > div > div, #home-index-page #box-11 > div > div, #home-index-page #box-12 > div > div, #home-index-page #box-13 > div > div, #home-index-page #box-14 > div > div, #home-index-page #box-15 > div > div {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; }
  #home-index-page #box-8, #home-index-page #box-10, #home-index-page #box-12, #home-index-page #box-14 {
    margin-right: 3%; }
  #home-index-page .project-box img {
    width: 100%;
    height: 100%; }
  #home-index-page #motto,
  #home-index-page #blog {
    display: none; }
  #home-index-page #concept {
    clear: both;
    border-top: 4px solid black;
    padding-top: 10px;
    margin-bottom: 3%; } }

@media only screen and (min-width: 1150px) {
  #about-article #concept,
  #about-article #blog {
    padding-left: 2.5%; } }
@media only screen and (min-width: 900px) and (max-width: 1150px) {
  #about-article #concept {
    display: none; } }
@media only screen and (min-width: 900px) {
  #about-article #concept {
    padding-top: 10px;
    border-top: 4px solid black; }
  #about-article #blog {
    padding-top: 10px;
    border-top: 4px solid black; }
    #about-article #blog a {
      border-bottom: 1px solid; }
      #about-article #blog a:hover {
        text-decoration: none;
        border-bottom-width: 2px; }
    #about-article #blog p {
      padding-top: 1em; }
  #about-article #motto {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
    #about-article #motto img {
      width: 100%;
      height: 100%; }
  #about-article .title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f7a291;
    color: white;
    padding-left: 7%;
    padding-top: 5%; }
  #about-article .content {
    padding: 5%;
    background: black;
    color: white;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
    #about-article .content p:first-child {
      margin-top: 0; }
  #about-article .cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
    #about-article .cover img {
      width: 100%;
      height: 100%; }
  #about-article .v {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-family: "DinMedium", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei", "Apple LiGothic Medium", "SimHei", "ST Heiti", "WenQuanYi Zen Hei Sharp", sans-serif;
    font-size: 18px; }
    #about-article .v > span {
      display: table;
      width: 100%;
      height: 100%; }
      #about-article .v > span > span {
        display: table-cell;
        text-align: center;
        vertical-align: middle; }
  #about-article #q {
    background: #dddddd;
    color: black; }
  #about-article #we, #about-article #they {
    background: #dddddd;
    color: white; }
  #about-article #x {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../images/x1.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; }
  #about-article .info {
    background: #dddddd;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: white; }
    #about-article .info > * {
      position: absolute;
      left: 5%;
      bottom: 5%;
      width: 90%; } }
@media only screen and (max-width: 899px) {
  #about-article .title {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 40px; }
  #about-article .content {
    border-top: 4px solid black;
    padding-top: 10px; }
    #about-article .content p:first-child {
      margin-top: 0; }
  #about-article .cover img {
    width: 100%;
    height: auto; }
  #about-article #info-2 {
    padding-bottom: 10px; }
  #about-article .v,
  #about-article #info-1,
  #about-article #concept,
  #about-article #blog,
  #about-article #motto {
    display: none; } }

@media only screen and (min-width: 1150px) {
  #project-section #box-title {
    padding-top: 33.26%; } }
@media only screen and (min-width: 900px) and (max-width: 1150px) {
  #project-section #box-title {
    padding-top: 39.9%; } }
@media only screen and (min-width: 900px) {
  #project-section .project-list {
    zoom: 1; }
  #project-section .project-list:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
    visibility: hidden; }
  #project-section #box-title h1 {
    font-style: italic;
    position: absolute;
    left: 5%;
    bottom: 5%;
    text-transform: uppercase;
    font-family: "DinBold", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei", "Apple LiGothic Medium", "SimHei", "ST Heiti", "WenQuanYi Zen Hei Sharp", sans-serif;
    font-size: 60px;
    line-height: 110%; }
  #project-section div.item {
    background: #dddddd;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
    #project-section div.item a {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0; }
    #project-section div.item a:hover p {
      display: block; }
    #project-section div.item img {
      width: 100%;
      height: 100%; }
    #project-section div.item p {
      display: none;
      border: 3px solid;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      text-transform: uppercase;
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat; }
      #project-section div.item p > i {
        display: table;
        width: 100%;
        height: 100%; }
        #project-section div.item p > i > i {
          display: table-cell;
          text-align: center;
          vertical-align: middle; }
          #project-section div.item p > i > i > i {
            padding: 2px 10px; }
    #project-section div.item.architecture p, #project-section div.item.portfolio p {
      border-color: black;
      background-image: url(../images/x1.png); }
    #project-section div.item.architecture p > i > i > i, #project-section div.item.portfolio p > i > i > i {
      background: black;
      color: white; }
    #project-section div.item.design-lab p {
      border-color: #83cba6;
      background-image: url(../images/x2.png); }
    #project-section div.item.design-lab p > i > i > i {
      background: #83cba6;
      color: black; } }
@media only screen and (max-width: 899px) {
  #project-section h1 {
    line-height: 120%;
    text-align: center;
    font-family: "DinBold", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei", "Apple LiGothic Medium", "SimHei", "ST Heiti", "WenQuanYi Zen Hei Sharp", sans-serif;
    font-style: italic;
    padding: 50px 0 70px;
    font-size: 30px; }
    #project-section h1 br {
      display: none; }
    #project-section h1 span.dash {
      display: none; }
  #project-section .project-list {
    overflow: hidden; }
    #project-section .project-list .grid-flowbox {
      float: left;
      width: 48.5%;
      margin-bottom: 3%; }
      #project-section .project-list .grid-flowbox.empty {
        display: none; }
      #project-section .project-list .grid-flowbox:nth-child(odd) {
        margin-right: 3%; }
      #project-section .project-list .grid-flowbox > div {
        width: 100%;
        padding-top: 100%;
        height: 0;
        overflow: hidden;
        position: relative; }
        #project-section .project-list .grid-flowbox > div > div {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0; }
    #project-section .project-list .item {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #dddddd; }
      #project-section .project-list .item a {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; }
      #project-section .project-list .item p {
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 3px 8px;
        line-height: 140%; }
      #project-section .project-list .item.portfolio p {
        background: black;
        color: white; }
      #project-section .project-list .item.design-lab p {
        background: #83cba6;
        color: black; }
      #project-section .project-list .item img {
        width: 100%;
        height: 100%; } }

@media only screen and (min-width: 900px) {
  #project-article .category {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: 4px solid black;
    padding-top: 10px;
    text-transform: uppercase;
    font-style: italic; }
    #project-article .category span {
      float: left;
      font-style: normal;
      font-size: 9px;
      padding-bottom: 10px;
      margin-right: 5px; }
  #project-article .title {
    position: absolute;
    bottom: 10px;
    left: 0;
    font-size: 18px;
    font-weight: bold; }
    #project-article .title span:lang(en) {
      font-weight: normal;
      font-family: "DinMedium", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei", "Apple LiGothic Medium", "SimHei", "ST Heiti", "WenQuanYi Zen Hei Sharp", sans-serif; }
  #project-article .scene {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
    #project-article .scene li {
      display: none; }
    #project-article .scene img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%; }
  #project-article .content p:first-child {
    margin-top: 0; }
  #project-article .credit {
    margin-top: 4em;
    font-style: italic; }
  #project-article .thumbs {
    overflow: hidden; }
    #project-article .thumbs li {
      height: 0;
      overflow: hidden;
      float: left;
      position: relative;
      background: #dddddd; }
      #project-article .thumbs li span {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: none;
        border-width: 2px;
        border-style: solid;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat; }
      #project-article .thumbs li.active span,
      #project-article .thumbs li a:hover span {
        display: block; }
      #project-article .thumbs li img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%; }
  #project-article.portfolio .thumbs span {
    border-color: black;
    background-image: url(../images/x1.png); }
  #project-article.design-lab .thumbs span {
    border-color: #83cba6;
    background-image: url(../images/x2.png); } }
    @media only screen and (min-width: 900px) and (min-width: 1150px) {
      #project-article .thumbs li {
        width: 47.5%;
        padding-top: 47.5%;
        margin-right: 5%;
        margin-bottom: 5%; }
        #project-article .thumbs li.even {
          margin-right: 0; } }
    @media only screen and (min-width: 900px) and (min-width: 900px) and (max-width: 1150px) {
      #project-article .thumbs li {
        width: 15.22%;
        padding-top: 15.22%;
        margin-right: 1.72%;
        margin-bottom: 1.72%; }
        #project-article .thumbs li.last {
          margin-right: 0; } }
@media only screen and (max-width: 899px) {
  #project-article .category {
    text-transform: uppercase;
    font-style: italic; }
    #project-article .category span {
      float: left;
      font-style: normal;
      font-size: 9px;
      padding-bottom: 10px;
      margin-right: 5px; }
  #project-article .title {
    font-size: 18px;
    font-weight: bold;
    clear: both; }
    #project-article .title span:lang(en) {
      font-weight: normal;
      font-family: "DinMedium", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei", "Apple LiGothic Medium", "SimHei", "ST Heiti", "WenQuanYi Zen Hei Sharp", sans-serif; }
  #project-article .credit {
    margin-top: 4em;
    font-style: italic;
    margin-bottom: 4em; }
  #project-article .scene img {
    width: 100%;
    height: auto; }
  #project-article .thumbs {
    display: none; } }

@media only screen and (min-width: 900px) {
  #Layout-device {
    font-family: "desktop"; } }
@media only screen and (max-width: 899px) {
  #Layout-device {
    font-family: "craft"; } }
@media only screen and (min-width: 1150px) {
  #Layout-view {
    font-family: "cozy"; } }
@media only screen and (min-width: 900px) and (max-width: 1150px) {
  #Layout-view {
    font-family: "compact"; } }
@media only screen and (min-width: 600px) and (max-width: 899px) {
  #Layout-view {
    font-family: "tablet"; } }
@media only screen and (max-width: 599px) {
  #Layout-view {
    font-family: "mobile"; } }