@charset "UTF-8";
/*
Theme Name: Studio Sans
Author: Sun Law
Author URI: https://www.sans.hk/
Description:;
Version: 1.0
License: GNU General Public License v2 or later
*/
/*--------------------------------------------------------------
Normalize
--------------------------------------------------------------*/
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
html {
  font-family: sans-serif;
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }

article,
aside,
footer,
header,
nav,
section {
  display: block; }

h1 {
  font-size: 2em;
  margin: 0.67em 0; }

figcaption,
figure,
main {
  display: block; }

figure {
  margin: 1em 0; }

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible; }

pre {
  font-family: monospace, monospace;
  font-size: 1em; }

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects; }

a:active,
a:hover {
  outline-width: 0; }

abbr[title] {
  border-bottom: 1px #767676 dotted;
  text-decoration: none; }

b,
strong {
  font-weight: inherit; }

b,
strong {
  font-weight: 700; }

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

dfn {
  font-style: italic; }

mark {
  background-color: #eee;
  color: #222; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

audio,
video {
  display: inline-block; }

audio:not([controls]) {
  display: none;
  height: 0; }

img {
  border-style: none; }

svg:not(:root) {
  overflow: hidden; }

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0; }

button,
input {
  overflow: visible; }

button,
select {
  text-transform: none; }

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; }

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

fieldset {
  border: 1px solid #bbb;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal; }

progress {
  display: inline-block;
  vertical-align: baseline; }

textarea {
  overflow: auto; }

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px; }

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit; }

details,
menu {
  display: block; }

summary {
  display: list-item; }

canvas {
  display: inline-block; }

template {
  display: none; }

[hidden] {
  display: none; }

ul,
ol {
  margin: 0 0 1.5em;
  padding: 0; }

ul {
  list-style: disc; }

ol {
  list-style: decimal; }

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 1.5em; }

dt {
  font-weight: 700; }

dd {
  margin: 0 1.5em 1.5em; }

/*--------------------------------------------------------------
 Formatting
--------------------------------------------------------------*/
hr {
  background-color: #bbb;
  border: 0;
  height: 1px;
  margin-bottom: 1.5em; }

/*--------------------------------------------------------------
 Lists
--------------------------------------------------------------*/
ul,
ol {
  margin: 0 0 1.5em;
  padding: 0; }

ul {
  list-style: disc; }

ol {
  list-style: decimal; }

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 1.5em; }

dt {
  font-weight: 700; }

dd {
  margin: 0 1.5em 1.5em; }

/*--------------------------------------------------------------
 Tables
--------------------------------------------------------------*/
table {
  border-collapse: collapse;
  margin: 0 0 1.5em;
  width: 100%; }

thead th {
  border-bottom: 2px solid #bbb;
  padding-bottom: 0.5em; }

th {
  padding: 0.4em;
  text-align: left; }

tr {
  border-bottom: 1px solid #eee; }

td {
  padding: 0.4em; }

th:first-child,
td:first-child {
  padding-left: 0; }

th:last-child,
td:last-child {
  padding-right: 0; }

/*--------------------------------------------------------------
Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.entry-footer:before,
.entry-footer:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after,
.nav-links:before,
.nav-links:after,
.pagination:before,
.pagination:after,
.comment-author:before,
.comment-author:after,
.widget-area:before,
.widget-area:after,
.widget:before,
.widget:after,
.comment-meta:before,
.comment-meta:after {
  content: "";
  display: table;
  table-layout: fixed; }

.clear:after,
.entry-content:after,
.entry-footer:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after,
.nav-links:after,
.pagination:after,
.comment-author:after,
.widget-area:after,
.widget:after,
.comment-meta:after {
  clear: both; }

.bg-l-grey {
  background: #dbdad9;
  color: #FFF; }

.bg-m-grey {
  background: #666666;
  color: #FFF; }

.bg-m-grey-i {
  background: #666666 !important;
  color: #FFF; }

.bg-d-grey {
  background: #333333;
  color: #FFF; }

.bg-d-grey-i {
  background: #333333 !important;
  color: #FFF; }

.bg-creamy {
  background: #faf5f0;
  color: #FFF; }

.bg-white {
  background: #FFF;
  color: #333; }

.bg-l-grey a,
.bg-m-grey a,
.bg-d-grey a,
.bg-creamy a {
  color: #FFF; }

.text-m-grey {
  color: #666666; }

.text-d-grey {
  color: #333333; }

.text-black {
  color: #000; }

.text-creamy {
  color: #faf5f0; }

/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/
head {
  z-index: 10000 !important; }

body,
button,
input,
select,
textarea {
  color: #333333;
  font-family: 'Julius Sans One', sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5; }

.site-content.arsenal {
  font-family: 'Arsenal', sans-serif; }
  .site-content.arsenal h1, .site-content.arsenal h2, .site-content.arsenal h3 {
    text-transform: capitalize;
    letter-spacing: 2px; }

.site-content.asap {
  font-family: 'Asap Condensed', sans-serif; }
  .site-content.asap h1, .site-content.asap h2, .site-content.asap h3 {
    text-transform: uppercase;
    letter-spacing: 4px; }

.site-content.julius {
  font-family: 'Julius Sans One', sans-serif; }
  .site-content.julius h1, .site-content.julius h2, .site-content.julius h3 {
    text-transform: uppercase; }

.site-content.lato {
  font-family: 'Lato', sans-serif; }
  .site-content.lato h1, .site-content.lato h2, .site-content.lato h3 {
    text-transform: capitalize; }

.site-content.open-sans {
  font-family: 'Open Sans', sans-serif; }
  .site-content.open-sans h1, .site-content.open-sans h2, .site-content.open-sans h3 {
    text-transform: capitalize; }

.site-content.noto {
  font-family: 'Noto Sans', sans-serif; }
  .site-content.noto h1, .site-content.noto h2, .site-content.noto h3 {
    text-transform: capitalize; }

.site-content.tinos {
  font-family: 'Tinos', serif; }
  .site-content.tinos h1, .site-content.tinos h2, .site-content.tinos h3 {
    text-transform: capitalize;
    letter-spacing: 1px; }

.site-content.uppercase h1, .site-content.uppercase h2, .site-content.uppercase h3 {
  text-transform: uppercase !important; }

.site-content.sentence h1, .site-content.sentence h2, .site-content.sentence h3 {
  text-transform: capitalize !important; }

.zh-hant {
  font-family: "Noto Sans TC", "PingFang TC", "Helvetica Neue", Helvetica, STHeitiTC-Light, Arial, serif !important; }

.zh-hant.noto-cjk {
  font-family: "Noto Sans TC", "PingFang TC", "Helvetica Neue", Helvetica, STHeitiTC-Light, Arial, serif !important; }

.zh-hant.pingfang {
  font-family: "PingFang TC", "HanHei TC", "Microsoft Yahei", "Helvetica Neue", Helvetica, STHeitiTC-Light, Arial, serif !important; }

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  line-height: 1.4;
  margin: 0 0 1.2em;
  padding: 0; }

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  padding-top: 0; }

h1 {
  font-size: 64px;
  font-size: 4rem;
  font-weight: 300;
  text-transform: uppercase; }

h2 {
  font-size: 38px;
  font-size: 2.375rem;
  font-weight: 300;
  letter-spacing: 1.5px;
  text-transform: uppercase; }

h3 {
  font-size: 28px;
  font-size: 1.75rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1.2px; }

h4 {
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 900; }

h5 {
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: 900; }

h6 {
  font-size: 12px;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: .6px;
  font-family: "Raleway", sans-serif !important; }

@media (max-width: 768px) {
  h1 {
    font-size: 38px;
    font-size: 2.375rem; }
  h2, h3 {
    font-size: 24px;
    font-size: 1.375rem; }
  h4 {
    font-size: 17px; } }

p {
  margin: 0 0 1.8em;
  font-size: 17px;
  padding: 0;
  font-family: "Raleway", sans-serif !important;
  line-height: 1.6; }

p.no-margin {
  margin: 0; }

b, strong {
  font-weight: 600;
  font-size: 18px; }

dfn,
cite,
em,
i {
  font-style: italic; }

blockquote {
  padding-left: 2rem;
  margin-bottom: 2rem; }

blockquote cite {
  display: block;
  font-style: normal;
  font-weight: 600;
  margin-top: 0.5em; }

address {
  margin: 0 0 1.5em; }

pre {
  background: #eee;
  font-family: "Courier 10 Pitch", Courier, monospace;
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em; }

code,
kbd,
tt,
var {
  font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
  font-size: 15px;
  font-size: 0.9375rem; }

abbr,
acronym {
  border-bottom: 1px dotted #666;
  cursor: help; }

mark,
ins {
  background: #eee;
  text-decoration: none; }

big {
  font-size: 125%; }

blockquote {
  quotes: "" ""; }

q {
  quotes: "“" "”" "‘" "’"; }

blockquote:before,
blockquote:after {
  content: ""; }

:focus {
  outline: none; }

@media (max-width: 768px) {
  p {
    font-size: 16px;
    font-size: 1rem; } }

/* Typography for Arabic Font */
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea,
html[lang="ary"] body,
html[lang="ary"] button,
html[lang="ary"] input,
html[lang="ary"] select,
html[lang="ary"] textarea,
html[lang="azb"] body,
html[lang="azb"] button,
html[lang="azb"] input,
html[lang="azb"] select,
html[lang="azb"] textarea,
html[lang="fa-IR"] body,
html[lang="fa-IR"] button,
html[lang="fa-IR"] input,
html[lang="fa-IR"] select,
html[lang="fa-IR"] textarea,
html[lang="haz"] body,
html[lang="haz"] button,
html[lang="haz"] input,
html[lang="haz"] select,
html[lang="haz"] textarea,
html[lang="ps"] body,
html[lang="ps"] button,
html[lang="ps"] input,
html[lang="ps"] select,
html[lang="ps"] textarea,
html[lang="ur"] body,
html[lang="ur"] button,
html[lang="ur"] input,
html[lang="ur"] select,
html[lang="ur"] textarea {
  font-family: Tahoma, Arial, sans-serif; }

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ary"] h1,
html[lang="ary"] h2,
html[lang="ary"] h3,
html[lang="ary"] h4,
html[lang="ary"] h5,
html[lang="ary"] h6,
html[lang="azb"] h1,
html[lang="azb"] h2,
html[lang="azb"] h3,
html[lang="azb"] h4,
html[lang="azb"] h5,
html[lang="azb"] h6,
html[lang="fa-IR"] h1,
html[lang="fa-IR"] h2,
html[lang="fa-IR"] h3,
html[lang="fa-IR"] h4,
html[lang="fa-IR"] h5,
html[lang="fa-IR"] h6,
html[lang="haz"] h1,
html[lang="haz"] h2,
html[lang="haz"] h3,
html[lang="haz"] h4,
html[lang="haz"] h5,
html[lang="haz"] h6,
html[lang="ps"] h1,
html[lang="ps"] h2,
html[lang="ps"] h3,
html[lang="ps"] h4,
html[lang="ps"] h5,
html[lang="ps"] h6,
html[lang="ur"] h1,
html[lang="ur"] h2,
html[lang="ur"] h3,
html[lang="ur"] h4,
html[lang="ur"] h5,
html[lang="ur"] h6 {
  font-weight: 700; }

/* Typography for Chinese Font */
html[lang^="zh-"] body,
html[lang^="zh-"] button,
html[lang^="zh-"] input,
html[lang^="zh-"] select,
html[lang^="zh-"] textarea {
  font-family: "PingFang TC", "Helvetica Neue", Helvetica, STHeitiTC-Light, Arial, sans-serif; }

html[lang="zh-CN"] body,
html[lang="zh-CN"] button,
html[lang="zh-CN"] input,
html[lang="zh-CN"] select,
html[lang="zh-CN"] textarea {
  font-family: "PingFang SC", "Helvetica Neue", Helvetica, STHeitiSC-Light, Arial, sans-serif; }

html[lang^="zh-"] h1,
html[lang^="zh-"] h2 {
  font-weight: 500; }

html[lang^="zh-"] h3,
html[lang^="zh-"] h4,
html[lang^="zh-"] h5,
html[lang^="zh-"] h6 {
  font-weight: 300; }

/* Typography for Cyrillic Font */
html[lang="bg-BG"] body,
html[lang="bg-BG"] button,
html[lang="bg-BG"] input,
html[lang="bg-BG"] select,
html[lang="bg-BG"] textarea,
html[lang="ru-RU"] body,
html[lang="ru-RU"] button,
html[lang="ru-RU"] input,
html[lang="ru-RU"] select,
html[lang="ru-RU"] textarea,
html[lang="uk"] body,
html[lang="uk"] button,
html[lang="uk"] input,
html[lang="uk"] select,
html[lang="uk"] textarea {
  font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif; }

html[lang="bg-BG"] h1,
html[lang="bg-BG"] h2,
html[lang="bg-BG"] h3,
html[lang="bg-BG"] h4,
html[lang="bg-BG"] h5,
html[lang="bg-BG"] h6,
html[lang="ru-RU"] h1,
html[lang="ru-RU"] h2,
html[lang="ru-RU"] h3,
html[lang="ru-RU"] h4,
html[lang="ru-RU"] h5,
html[lang="ru-RU"] h6,
html[lang="uk"] h1,
html[lang="uk"] h2,
html[lang="uk"] h3,
html[lang="uk"] h4,
html[lang="uk"] h5,
html[lang="uk"] h6 {
  font-weight: 700;
  line-height: 1.2; }

/* Typography for Devanagari Font */
html[lang="bn-BD"] body,
html[lang="bn-BD"] button,
html[lang="bn-BD"] input,
html[lang="bn-BD"] select,
html[lang="bn-BD"] textarea,
html[lang="hi-IN"] body,
html[lang="hi-IN"] button,
html[lang="hi-IN"] input,
html[lang="hi-IN"] select,
html[lang="hi-IN"] textarea,
html[lang="mr-IN"] body,
html[lang="mr-IN"] button,
html[lang="mr-IN"] input,
html[lang="mr-IN"] select,
html[lang="mr-IN"] textarea {
  font-family: Arial, sans-serif; }

html[lang="bn-BD"] h1,
html[lang="bn-BD"] h2,
html[lang="bn-BD"] h3,
html[lang="bn-BD"] h4,
html[lang="bn-BD"] h5,
html[lang="bn-BD"] h6,
html[lang="hi-IN"] h1,
html[lang="hi-IN"] h2,
html[lang="hi-IN"] h3,
html[lang="hi-IN"] h4,
html[lang="hi-IN"] h5,
html[lang="hi-IN"] h6,
html[lang="mr-IN"] h1,
html[lang="mr-IN"] h2,
html[lang="mr-IN"] h3,
html[lang="mr-IN"] h4,
html[lang="mr-IN"] h5,
html[lang="mr-IN"] h6 {
  font-weight: 700; }

/* Typography for Greek Font */
html[lang="el"] body,
html[lang="el"] button,
html[lang="el"] input,
html[lang="el"] select,
html[lang="el"] textarea {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

html[lang="el"] h1,
html[lang="el"] h2,
html[lang="el"] h3,
html[lang="el"] h4,
html[lang="el"] h5,
html[lang="el"] h6 {
  font-weight: 700;
  line-height: 1.3; }

/* Typography for Gujarati Font */
html[lang="gu-IN"] body,
html[lang="gu-IN"] button,
html[lang="gu-IN"] input,
html[lang="gu-IN"] select,
html[lang="gu-IN"] textarea {
  font-family: Arial, sans-serif; }

html[lang="gu-IN"] h1,
html[lang="gu-IN"] h2,
html[lang="gu-IN"] h3,
html[lang="gu-IN"] h4,
html[lang="gu-IN"] h5,
html[lang="gu-IN"] h6 {
  font-weight: 700; }

/* Typography for Hebrew Font */
html[lang="he-IL"] body,
html[lang="he-IL"] button,
html[lang="he-IL"] input,
html[lang="he-IL"] select,
html[lang="he-IL"] textarea {
  font-family: "Arial Hebrew", Arial, sans-serif; }

html[lang="he-IL"] h1,
html[lang="he-IL"] h2,
html[lang="he-IL"] h3,
html[lang="he-IL"] h4,
html[lang="he-IL"] h5,
html[lang="he-IL"] h6 {
  font-weight: 700; }

/* Typography for Japanese Font */
html[lang="ja"] body,
html[lang="ja"] button,
html[lang="ja"] input,
html[lang="ja"] select,
html[lang="ja"] textarea {
  font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif; }

html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3,
html[lang="ja"] h4,
html[lang="ja"] h5,
html[lang="ja"] h6 {
  font-weight: 700; }

/* Typography for Korean font */
html[lang="ko-KR"] body,
html[lang="ko-KR"] button,
html[lang="ko-KR"] input,
html[lang="ko-KR"] select,
html[lang="ko-KR"] textarea {
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", Dotum, sans-serif; }

html[lang="ko-KR"] h1,
html[lang="ko-KR"] h2,
html[lang="ko-KR"] h3,
html[lang="ko-KR"] h4,
html[lang="ko-KR"] h5,
html[lang="ko-KR"] h6 {
  font-weight: 600; }

/* Typography for Thai Font */
html[lang="th"] h1,
html[lang="th"] h2,
html[lang="th"] h3,
html[lang="th"] h4,
html[lang="th"] h5,
html[lang="th"] h6 {
  line-height: 1.65;
  font-family: "Sukhumvit Set", "Helvetica Neue", Helvetica, Arial, sans-serif; }

html[lang="th"] body,
html[lang="th"] button,
html[lang="th"] input,
html[lang="th"] select,
html[lang="th"] textarea {
  line-height: 1.8;
  font-family: "Sukhumvit Set", "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* Remove letter-spacing for all non-latin alphabets */
html[lang="ar"] *,
html[lang="ary"] *,
html[lang="azb"] *,
html[lang="haz"] *,
html[lang="ps"] *,
html[lang^="zh-"] *,
html[lang="bg-BG"] *,
html[lang="ru-RU"] *,
html[lang="uk"] *,
html[lang="bn-BD"] *,
html[lang="hi-IN"] *,
html[lang="mr-IN"] *,
html[lang="el"] *,
html[lang="gu-IN"] *,
html[lang="he-IL"] *,
html[lang="ja"] *,
html[lang="ko-KR"] *,
html[lang="th"] * {
  letter-spacing: 0 !important; }

/*--------------------------------------------------------------
Links
--------------------------------------------------------------*/
a {
  color: #222;
  text-decoration: none;
  transition: all .1s linear; }

a:focus {
  outline: 0; }

a:hover,
a:active {
  color: #000;
  outline: 0;
  text-decoration: none; }

a.t-white:hover,
a.t-white:active {
  color: #FFF; }

a.button {
  margin: 2rem auto;
  padding: 15px 25px;
  font-family: 'Brown', Helvetica, sans-serif;
  font-weight: 700;
  display: inline-block;
  text-align: center; }
  a.button:hover {
    color: #FFF; }

/* Fixes linked images */
.entry-content a img,
.widget a img {
  box-shadow: 0 0 0 8px #fff; }

.post-navigation a:focus .icon,
.post-navigation a:hover .icon {
  color: #222; }

/*--------------------------------------------------------------
Forms
--------------------------------------------------------------*/
label {
  color: #333;
  display: block;
  font-weight: 800;
  margin-bottom: 0.5em; }

fieldset {
  margin-bottom: 1em; }

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
  color: #666;
  background: #fff;
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
  border: 1px solid #bbb;
  border-radius: 3px;
  display: block;
  padding: 0.7em;
  width: 100%; }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
  color: #222;
  border-color: #333; }

select {
  border: 1px solid #bbb;
  border-radius: 3px;
  height: 3em;
  max-width: 100%; }

input[type="radio"],
input[type="checkbox"] {
  margin-right: 0.5em; }

input[type="radio"] + label,
input[type="checkbox"] + label {
  font-weight: 400; }

button,
input[type="button"],
input[type="submit"] {
  background-color: #222;
  border: 0;
  border-radius: 2px;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1;
  padding: 1em 2em;
  text-shadow: none;
  transition: background 0.2s; }

input + button,
input + input[type="button"],
input + input[type="submit"] {
  padding: 0.75em 2em; }

button.secondary,
input[type="reset"],
input[type="button"].secondary,
input[type="reset"].secondary,
input[type="submit"].secondary {
  background-color: #ddd;
  color: #222; }

button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  background: #767676; }

button.secondary:hover,
button.secondary:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="button"].secondary:hover,
input[type="button"].secondary:focus,
input[type="reset"].secondary:hover,
input[type="reset"].secondary:focus,
input[type="submit"].secondary:hover,
input[type="submit"].secondary:focus {
  background: #bbb; }

/* Placeholder text color -- selectors need to be separate to work. */
::-webkit-input-placeholder {
  color: #000; }

:-moz-placeholder {
  color: #000; }

::-moz-placeholder {
  color: #333;
  opacity: 1;
  /* Since FF19 lowers the opacity of the placeholder by default */ }

:-ms-input-placeholder {
  color: #000; }

/*--------------------------------------------------------------
Layout
--------------------------------------------------------------*/
html {
  box-sizing: border-box; }

*,
*:before,
*:after {
  /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
  box-sizing: inherit; }

body {
  background: #fff;
  /* Fallback for when there is no custom background color defined. */ }

.trans {
  transition: all .4s linear; }

.vh-center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto auto; }

.v-center {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  height: 100%; }

.v-line {
  width: 1px;
  margin-left: 49%;
  height: 20vh;
  background: #ccc;
  display: block; }

.h-line {
  width: 100%;
  height: 1px;
  background: #ccc;
  display: block;
  margin: 2rem 0 1rem; }

#page {
  position: relative;
  word-wrap: break-word; }

.wrap {
  margin-left: auto;
  margin-right: auto;
  max-width: 2400px;
  padding-left: 0;
  padding-right: 0; }

.wrap:after {
  clear: both;
  content: "";
  display: block; }

.container-fluid {
  padding-left: 0;
  padding-right: 0; }

.row {
  margin-left: 0;
  margin-right: 0; }

.cols-1 {
  width: calc( 100% / 9); }

.cols-2 {
  width: calc( 100% / 9 * 2); }

.cols-3 {
  width: calc( 100% / 9 * 3);
  max-width: calc( 100% / 9 * 3); }

.cols-4 {
  width: calc( 100% / 9 * 4); }

.cols-5 {
  width: calc( 100% / 9 * 5); }

.cols-6 {
  width: calc( 100% / 9 * 6); }

.cols-7 {
  width: calc( 100% / 9 * 7); }

.cols-8 {
  width: calc( 100% / 9 * 8); }

.cols-9 {
  width: 100%; }

.pt-6 {
  padding-top: 4rem; }

.pb-6 {
  padding-bottom: 4rem; }

.ml-h {
  margin-left: calc( 100% / 9 / 2); }

.mr-h {
  margin-right: calc( 100% / 9 / 2); }

.row-1 {
  height: calc( 100vw / 9 * 1); }

.grid-base {
  position: fixed;
  display: block;
  height: 100%;
  width: 100%;
  z-index: 1;
  top: 0;
  left: 0;
  opacity: .3; }
  .grid-base .row {
    height: 100%;
    width: 100%; }
    .grid-base .row .cols-1 {
      border-right: 1px solid #FFF; }

.font-swither {
  position: fixed;
  width: 100%;
  height: auto;
  z-index: 999;
  transition: all .4s;
  margin-top: -120px;
  opacity: 0; }
  .font-swither ul {
    padding: 2rem;
    color: #FFF;
    margin-bottom: 0;
    text-align: center;
    background: #aaa;
    box-shadow: 0px 0px 3px #555; }
    .font-swither ul li {
      -ms-flex: 1;
          flex: 1;
      border: 1px solid #FFF;
      padding: 1rem;
      list-style: none;
      -ms-flex-pack: justify;
          justify-content: space-between;
      transition: all .4s;
      cursor: pointer;
      margin-left: 2px;
      margin-right: 2px;
      font-size: 13px;
      border-radius: 4px; }
      .font-swither ul li:hover {
        background: #FFF;
        color: #555;
        margin-right: 15px;
        margin-left: 15px; }
      .font-swither ul li.caps {
        background: #FFF;
        color: #555; }
        .font-swither ul li.caps:hover {
          background: #666;
          color: #FFF;
          border: 1px solid #666; }
      .font-swither ul li.active {
        position: relative; }
        .font-swither ul li.active:after {
          content: "●";
          display: block;
          position: absolute;
          bottom: 2px;
          left: 49%;
          color: blue; }
  .font-swither .hover-area {
    height: 40px;
    width: 100%; }
  .font-swither:hover {
    margin-top: 0;
    opacity: 1; }

main {
  position: relative;
  z-index: 2; }

footer {
  position: relative;
  z-index: 2; }

/*--------------------------------------------------------------
Image
--------------------------------------------------------------*/
img {
  width: 100%;
  height: auto; }

.img-v-center img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: auto auto;
  width: 100%;
  height: auto; }

/*--------------------------------------------------------------
Video
--------------------------------------------------------------*/
/*--------------------------------------------------------------
Global
--------------------------------------------------------------*/
.master-logo {
  margin-top: 3rem; }

.site-logo {
  position: absolute;
  width: 100%;
  z-index: 999;
  text-align: center; }

.pagination {
  text-align: center;
  display: inline-block;
  margin: 0 auto; }
  .pagination a {
    padding: 1rem;
    text-decoration: none; }

@media (max-width: 768px) {
  .master-logo {
    margin-top: 2rem; }
  .pagination a {
    padding: .7rem; } }

/*--------------------------------------------------------------
Header
--------------------------------------------------------------*/
#full-screen-menu {
  position: fixed;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  background: #fff;
  margin-top: -100%;
  opacity: 0;
  transition: 1s opacity; }
  #full-screen-menu .menu-containner {
    width: 100%;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    z-index: 12;
    position: relative;
    color: #FFF; }
    #full-screen-menu .menu-containner ul {
      display: -ms-flexbox;
      display: flex;
      margin: auto auto;
      width: 80%; }
      #full-screen-menu .menu-containner ul li {
        list-style: none;
        -ms-flex: 1;
            flex: 1;
        text-align: center;
        transition: all .5s ease;
        z-index: 1;
        margin-top: 30px; }
        #full-screen-menu .menu-containner ul li a {
          color: #FFF; }
        #full-screen-menu .menu-containner ul li h4 {
          padding: 1.6rem 3rem;
          margin: 20px auto 0;
          opacity: 0;
          text-transform: uppercase;
          cursor: pointer;
          letter-spacing: 1.4px;
          display: inline-block;
          transition: all .5s ease; }
        #full-screen-menu .menu-containner ul li .subhead {
          opacity: 0;
          white-space: nowrap; }
          #full-screen-menu .menu-containner ul li .subhead p {
            margin: 0 auto;
            width: 100%; }
        #full-screen-menu .menu-containner ul li:hover {
          -ms-flex: 2;
              flex: 2;
          opacity: 1; }
        #full-screen-menu .menu-containner ul li:hover .subhead {
          opacity: 1;
          transition: 2s all;
          transition-delay: .3s; }
        #full-screen-menu .menu-containner ul li .active {
          z-index: 2; }
  #full-screen-menu .background-containner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
    -webkit-filter: blur(10px);
            filter: blur(10px);
    transition: all 2s;
    background: #000; }
    #full-screen-menu .background-containner ul {
      width: 100%;
      height: 100%;
      display: block;
      opacity: .8; }
      #full-screen-menu .background-containner ul li {
        position: absolute;
        width: 120%;
        height: 120%;
        left: -10%;
        top: -10%;
        z-index: 1; }
        #full-screen-menu .background-containner ul li video {
          min-width: 110%;
          min-height: 110%;
          height: auto; }
    #full-screen-menu .background-containner.hovered {
      -webkit-filter: blur(0);
              filter: blur(0); }
  #full-screen-menu[aria-expanded="true"] {
    margin-top: 0;
    opacity: 1; }
    #full-screen-menu[aria-expanded="true"] .menu-containner ul li h4 {
      opacity: .6;
      margin-top: 0; }
      #full-screen-menu[aria-expanded="true"] .menu-containner ul li h4:nth-child(1) {
        transition-delay: 1.01s; }
      #full-screen-menu[aria-expanded="true"] .menu-containner ul li h4:nth-child(2) {
        transition-delay: 1.02s; }
      #full-screen-menu[aria-expanded="true"] .menu-containner ul li h4:nth-child(3) {
        transition-delay: 1.03s; }
      #full-screen-menu[aria-expanded="true"] .menu-containner ul li h4:nth-child(4) {
        transition-delay: 1.04s; }
      #full-screen-menu[aria-expanded="true"] .menu-containner ul li h4:nth-child(5) {
        transition-delay: 1.05s; }

@media (max-width: 768px) {
  #full-screen-menu .menu-containner {
    background: #dbdad9; }
    #full-screen-menu .menu-containner ul {
      -ms-flex-direction: column;
          flex-direction: column; }
      #full-screen-menu .menu-containner ul li a {
        color: #333333; }
      #full-screen-menu .menu-containner ul li .subhead {
        display: none; }
  #full-screen-menu .background-containner {
    display: none; }
  #full-screen-menu[aria-expanded="true"] {
    margin-left: 0;
    display: block; }
  #full-screen-menu[aria-expanded="false"] {
    margin-left: 100vw;
    display: none; } }

.wrapper-menu {
  width: auto;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  color: #FFF;
  position: absolute;
  z-index: 100;
  left: 2.5rem;
  top: 3rem;
  text-transform: uppercase; }
  .wrapper-menu:hover .toggle .underline {
    width: 100%; }
  .wrapper-menu .toggle .toggle-label {
    cursor: pointer;
    display: inline-block; }
  .wrapper-menu .toggle .underline {
    height: 1px;
    width: 50%;
    background: #FFF;
    transition: all .3s ease;
    margin-top: .3rem; }
  .wrapper-menu[aria-expanded="true"] {
    color: #FFF !important; }
    .wrapper-menu[aria-expanded="true"] .toggle .underline {
      width: 100%;
      background: #FFF !important; }
  .wrapper-menu.reverse {
    color: #333333; }
    .wrapper-menu.reverse .toggle .underline {
      background: #333333; }

@media (max-width: 768px) {
  .wrapper-menu {
    top: 2rem;
    left: 1.5rem; } }

.close-menu,
.category-menu {
  position: absolute;
  z-index: 1000;
  top: 0;
  right: 0;
  margin-right: 3rem;
  margin-top: 2rem;
  width: 12rem;
  background: #e2e2e2; }
  .close-menu:hover .toggle .underline,
  .category-menu:hover .toggle .underline {
    width: 100%; }
  .close-menu:hover ul,
  .category-menu:hover ul {
    height: auto;
    margin-top: 0rem; }
    .close-menu:hover ul li,
    .category-menu:hover ul li {
      width: 100%;
      opacity: 1; }
  .close-menu .toggle,
  .category-menu .toggle {
    padding: 1rem 2rem 4.5rem 2rem; }
    .close-menu .toggle .toggle-label,
    .category-menu .toggle .toggle-label {
      cursor: pointer;
      display: inline-block; }
    .close-menu .toggle .underline,
    .category-menu .toggle .underline {
      height: 1px;
      width: 48px;
      background: #000;
      transition: all .3s ease;
      margin-top: .3rem; }
  .close-menu ul,
  .category-menu ul {
    height: 0;
    margin-top: -2.5rem;
    transition: all .2s ease; }
    .close-menu ul li,
    .category-menu ul li {
      list-style: none;
      transition: all .2s ease;
      transition-delay: .2s;
      width: 0;
      overflow: hidden;
      opacity: 0;
      background: #e2e2e2; }
      .close-menu ul li h5,
      .category-menu ul li h5 {
        margin-bottom: 0;
        padding: .4rem 2rem; }

@media (max-width: 768px) {
  .category-menu {
    width: 8rem;
    margin-right: 0rem;
    margin-top: 1rem; }
    .category-menu .toggle {
      padding: 1rem; }
    .category-menu ul li h5 {
      padding: .4rem 1rem; } }

.close-menu {
  background: none !important;
  width: auto;
  margin-top: 2rem;
  margin-right: 2rem; }
  .close-menu .toggle {
    padding: 1rem 2rem 1rem 2rem; }
    .close-menu .toggle .underline {
      width: 50%; }

/*--------------------------------------------------------------
Footer
--------------------------------------------------------------*/
footer {
  text-align: center;
  padding: 3rem 0;
  background: #FFF;
  font-size: 12px; }

@media (max-width: 768px) {
  footer {
    padding: 2rem 0; } }

/*--------------------------------------------------------------
Global
--------------------------------------------------------------*/
.full {
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden; }

.side-by-side {
  width: calc(100vw - 10rem);
  margin: auto;
  display: -ms-flexbox;
  display: flex; }
  .side-by-side .large {
    width: 91.663%;
    margin: 8.333% 4.1665% 0; }
  .side-by-side .narrow {
    width: 33.332%;
    margin: 8.333% 4.1665%; }
  .side-by-side .wide {
    width: 49.998%;
    margin: 8.333% 4.1665%; }
  .side-by-side .half {
    width: 41.665%;
    height: auto;
    margin: 8.333% 4.1665% 0; }
  .side-by-side .margin-top {
    margin-top: 16.666%; }

/*--------------------------------------------------------------
contact
--------------------------------------------------------------*/
.contact {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  z-index: 9999;
  transition: all .4s ease; }
  .contact[aria-expanded="true"] {
    margin-left: 0; }
  .contact[aria-expanded="false"] {
    margin-left: 120vw; }
  .contact .d-flex {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    height: 100%; }
    .contact .d-flex .col-l {
      width: 49%; }
      .contact .d-flex .col-l .img-v-center {
        position: relative;
        width: calc(100% - 4rem);
        height: calc(100% - 4rem);
        margin: 2rem;
        overflow: hidden;
        background: url("../images/contact.png") center center;
        background-size: cover; }
    .contact .d-flex .col-r {
      width: 51%; }
      .contact .d-flex .col-r .v-center {
        -ms-flex-direction: column;
            flex-direction: column; }
        .contact .d-flex .col-r .v-center .ss-icons {
          margin-top: 1.5rem;
          margin-bottom: 3.5rem; }
          .contact .d-flex .col-r .v-center .ss-icons a {
            margin: 1rem; }
        .contact .d-flex .col-r .v-center .newsletter p {
          margin-bottom: 0; }
        .contact .d-flex .col-r .v-center .newsletter .subscription-box {
          border-bottom: 1px solid #666666;
          display: -ms-flexbox;
          display: flex;
          transition: .3s all ease; }
          .contact .d-flex .col-r .v-center .newsletter .subscription-box input {
            background: none;
            border: 0px solid #000;
            font-family: "Raleway";
            font-size: 16px;
            width: calc(100% - 90px + 1rem); }
          .contact .d-flex .col-r .v-center .newsletter .subscription-box button {
            background: none;
            color: #000;
            text-transform: uppercase;
            font-weight: 700;
            padding: 1rem;
            margin-right: -1rem;
            width: 90px; }
          .contact .d-flex .col-r .v-center .newsletter .subscription-box[aria-expanded="true"] {
            height: 30px;
            opacity: 1; }
          .contact .d-flex .col-r .v-center .newsletter .subscription-box[aria-expanded="false"] {
            height: 0;
            opacity: 0; }

@media (max-width: 768px) {
  .contact .d-flex {
    -ms-flex-direction: column;
        flex-direction: column; }
    .contact .d-flex .col-l {
      width: 100%;
      height: 50vh;
      -ms-flex-order: 2;
          order: 2; }
    .contact .d-flex .col-r {
      width: 100%;
      height: 50vh;
      -ms-flex-order: 1;
          order: 1; }
      .contact .d-flex .col-r .master-logo {
        display: none; }
      .contact .d-flex .col-r .v-center {
        margin-top: 9rem; }
        .contact .d-flex .col-r .v-center .ss-icons {
          margin-top: 0;
          margin-bottom: 1rem; } }

/*--------------------------------------------------------------
Landing
--------------------------------------------------------------*/
.landing .video-container {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0; }
  .landing .video-container #hero-video {
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    position: fixed; }
  .landing .video-container .overlap-bg {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .8;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    transition: all 10s; }
    .landing .video-container .overlap-bg.loaded {
      opacity: .1; }

.landing .full-height {
  position: relative;
  height: 100vh;
  width: 100%;
  z-index: 1;
  text-align: center;
  color: #FFF; }
  .landing .full-height .v-line {
    position: absolute;
    left: 0;
    height: 30vh;
    opacity: .7; }
    .landing .full-height .v-line.bottom {
      bottom: 0;
      height: 30vh;
      opacity: 0;
      transition: all 5s ease;
      transition-delay: .4s; }
      .landing .full-height .v-line.bottom.loaded {
        opacity: 1; }
    .landing .full-height .v-line.top {
      top: 0;
      height: 10vh;
      transition: all 2s ease; }
      .landing .full-height .v-line.top.loaded {
        height: 35vh; }
  .landing .full-height h1, .landing .full-height h2 {
    margin: 0 auto;
    -webkit-filter: blur(5px);
            filter: blur(5px);
    opacity: 0;
    transition: all 6s; }
    .landing .full-height h1.loaded, .landing .full-height h2.loaded {
      -webkit-filter: blur(0.3px);
              filter: blur(0.3px);
      opacity: 1; }
  .landing .full-height h1 {
    margin-top: -12rem; }
    .landing .full-height h1.loaded {
      transition: all 0s !important; }
  .landing .full-height h2 {
    transition: all 2s; }
  .landing .full-height h3 {
    margin: 0 auto; }
  .landing .full-height .button-wrapper {
    margin: 0 auto;
    display: inline-block; }
    .landing .full-height .button-wrapper h4 {
      margin: 3rem 1.5rem;
      text-transform: uppercase; }

.landing .contact {
  position: relative;
  z-index: 1;
  background: #FFF;
  padding: 5rem 0 3rem; }

@media (max-width: 768px) {
  .landing .video-container .overlap-bg {
    opacity: .2; }
  .landing .full-height h1 {
    width: 80%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1; }
  .landing .full-height h2 {
    opacity: 1;
    width: 80%;
    -webkit-filter: blur(0);
            filter: blur(0);
    font-size: 28px;
    font-size: 1.75rem;
    line-height: 1.6; }
  .landing .full-height h3 {
    width: 80%;
    margin-bottom: 3rem; }
  .landing .full-height .v-line.bottom {
    opacity: 1; }
  .landing .full-height .v-line.top {
    height: 30vh; }
  .landing .feature-projects {
    height: auto !important; } }

/*--------------------------------------------------------------
Feature
--------------------------------------------------------------*/
.feature-projects {
  display: block;
  padding: 4rem;
  overflow: hidden; }
  .feature-projects.fix {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 4;
    width: 100%; }
  .feature-projects.fixMargin .onWheelRescaleContaiiner {
    margin-top: 100vh; }
  .feature-projects ul {
    padding-top: 3rem;
    width: 120%;
    transition: all .6s; }
    .feature-projects ul .item {
      -ms-flex-preferred-size: 21%;
          flex-basis: 21%;
      margin-right: 5%;
      position: relative;
      list-style: none;
      transition: all .6s; }
      .feature-projects ul .item.active .thumbnail img {
        transition: all 1s ease;
        transform: scale(1.3); }
      .feature-projects ul .item a {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 2; }
      .feature-projects ul .item .title {
        margin-top: 1.5rem; }
        .feature-projects ul .item .title a {
          position: relative;
          height: auto;
          color: #FFF; }
        .feature-projects ul .item .title h5 {
          margin-bottom: .5rem;
          margin-left: auto;
          margin-right: auto;
          letter-spacing: 1px;
          color: #555;
          width: 80%; }
      .feature-projects ul .item .thumbnail {
        background: #000;
        position: relative;
        z-index: 1;
        width: 100%;
        overflow: hidden; }
        .feature-projects ul .item .thumbnail img {
          position: absolute;
          top: 0;
          bottom: 0;
          left: -50%;
          right: 0;
          margin: auto auto;
          height: 100%;
          width: auto;
          transition: all 1s; }
        .feature-projects ul .item .thumbnail:hover img {
          transform: scale(1.2); }
        .feature-projects ul .item .thumbnail:after {
          display: block;
          content: "";
          padding-top: 150%; }
    .feature-projects ul .item-insipiration {
      position: relative; }
      .feature-projects ul .item-insipiration .thumbnail {
        z-index: 1; }
        .feature-projects ul .item-insipiration .thumbnail img {
          left: -100%;
          z-index: 1; }
      .feature-projects ul .item-insipiration .overlay {
        position: absolute;
        z-index: 3;
        top: 0;
        left: -50%;
        width: 100%;
        height: 100%;
        background: url("../images/ui/shadow-overlay.png") center center repeat-x;
        background-size: 100% 100%; }
      .feature-projects ul .item-insipiration .overlay-content {
        position: absolute;
        color: #FFF;
        bottom: 1.5rem;
        width: 80%;
        left: 10%;
        z-index: 3; }
        .feature-projects ul .item-insipiration .overlay-content .dash {
          height: 1px;
          width: 40px;
          border-bottom: 1px solid #FFF;
          margin: 0 auto; }
        .feature-projects ul .item-insipiration .overlay-content .title {
          margin-top: 1rem;
          margin-bottom: 1.2rem;
          min-height: 78px; }

@media (max-width: 768px) {
  .feature-projects {
    padding: 2rem; }
    .feature-projects ul {
      width: 100%;
      -ms-flex-direction: column;
          flex-direction: column; }
      .feature-projects ul .item {
        -ms-flex-preferred-size: 100% !important;
            flex-basis: 100% !important;
        width: 100%;
        margin-bottom: 2rem !important;
        margin-right: 0 !important;
        margin-top: 0; } }

.landing .replacement,
.landing .feature-projects {
  height: 200vh;
  background: #faf5f0;
  position: relative;
  z-index: 2; }

.replacement {
  display: none; }
  .replacement.active {
    display: block; }

.project-single .feature-projects,
.inspiration-single .feature-projects,
.project-index .feature-projects {
  width: 90%;
  max-width: 1440px;
  margin: 0 auto;
  overflow: hidden; }
  .project-single .feature-projects ul,
  .inspiration-single .feature-projects ul,
  .project-index .feature-projects ul {
    width: 100%;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: justify;
        justify-content: space-between;
    -ms-flex-align: center;
        align-items: center; }
    .project-single .feature-projects ul .item,
    .inspiration-single .feature-projects ul .item,
    .project-index .feature-projects ul .item {
      -ms-flex-preferred-size: 29%;
          flex-basis: 29%;
      margin-right: 1rem; }
      .project-single .feature-projects ul .item:nth-child(3n),
      .inspiration-single .feature-projects ul .item:nth-child(3n),
      .project-index .feature-projects ul .item:nth-child(3n) {
        margin-right: 0 !important; }

.project-index {
  margin-top: 5rem; }
  .project-index .feature-projects {
    height: auto;
    overflow: hidden; }
    .project-index .feature-projects ul .item {
      margin-bottom: 4rem; }

@media (max-width: 768px) {
  .project-single .feature-projects,
  .inspiration-single .feature-projects,
  .project-index .feature-projects {
    width: 100%; }
    .project-single .feature-projects ul .item:nth-child(2n),
    .inspiration-single .feature-projects ul .item:nth-child(2n),
    .project-index .feature-projects ul .item:nth-child(2n) {
      margin-right: 0% !important; }
    .project-single .feature-projects ul .item:nth-child(3n),
    .inspiration-single .feature-projects ul .item:nth-child(3n),
    .project-index .feature-projects ul .item:nth-child(3n) {
      margin-right: 0% !important; } }

/*--------------------------------------------------------------
project single
--------------------------------------------------------------*/
.project-1 {
  background: #faf5f0; }

.project-single {
  background: #faf5f0;
  margin: 0;
  padding: 0; }
  .project-single .banner {
    height: 100vh;
    width: 49.998%;
    background: #faf5f0;
    position: absolute;
    top: 0;
    z-index: 4;
    transition: transform 1200ms ease;
    transform: translateX(-50vw); }
    .project-single .banner .info-containner {
      transition: transform 600ms ease;
      transform: translateX(-100px);
      width: 80%;
      margin: 0 auto; }
      .project-single .banner .info-containner .logo {
        margin-top: 8%;
        margin-bottom: 8%; }
      .project-single .banner .info-containner h2 {
        padding-top: 2%; }
      .project-single .banner .info-containner h5 {
        padding: 6% 0 1%; }
    .project-single .banner.open {
      transform: translateX(0); }
      .project-single .banner.open .info-containner {
        transition: transform 1400ms ease;
        transform: translateX(0); }
    .project-single .banner.collapsed {
      transform: translateX(-50vw); }
  .project-single .banner-image {
    height: calc(100vh - 4rem) !important;
    width: calc(100vw - 4rem) !important;
    margin: 2rem;
    position: relative;
    z-index: 2;
    overflow: hidden;
    opacity: 1;
    transition: all 1.2s; }
    .project-single .banner-image .bcg {
      background: url("../images/amber_1.jpg");
      width: 100%;
      height: 100%;
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover; }
    .project-single .banner-image.zoom {
      height: calc(100vh - 4rem) !important;
      width: calc(100vw - 4rem) !important;
      top: 0 !important;
      left: 0 !important; }
    .project-single .banner-image img.zoom {
      left: 0 !important;
      width: 100% !important;
      height: auto !important; }
    .project-single .banner-image.no-border {
      margin: 0;
      height: calc(100vh) !important;
      width: calc(100vw) !important; }
  .project-single .clone-banner-image {
    opacity: 0; }
  .project-single .end-padding {
    padding-bottom: 4rem; }
  .project-single .content-body {
    width: 50vw;
    margin: 5rem auto 4rem; }
  .project-single .content-meta {
    -ms-flex-pack: justify;
        justify-content: space-between; }
    .project-single .content-meta p, .project-single .content-meta h5 {
      margin-bottom: 0; }
    .project-single .content-meta .wide {
      margin-right: 10%; }
  .project-single .proejct-dna {
    width: calc(100vw - 10rem);
    margin: 0 auto;
    padding: 4rem 4rem 0; }
    .project-single .proejct-dna ul {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: justify;
          justify-content: space-between; }
      .project-single .proejct-dna ul li {
        width: 33%;
        list-style: none;
        text-align: center; }
        .project-single .proejct-dna ul li h4 {
          margin-top: 1rem;
          margin-bottom: .5rem; }
        .project-single .proejct-dna ul li p {
          opacity: .6;
          display: none; }
        .project-single .proejct-dna ul li .thumbnail {
          position: relative;
          overflow: hidden; }
          .project-single .proejct-dna ul li .thumbnail img {
            height: 200%;
            width: auto;
            margin-left: -50%;
            opacity: .85; }
          .project-single .proejct-dna ul li .thumbnail:after {
            content: "";
            display: block;
            padding-top: 100%; }
  .project-single footer {
    padding: 3rem 0; }

@media (max-width: 768px) {
  .project-single .banner {
    width: 100%;
    height: 50vh; }
    .project-single .banner .v-line {
      height: 7vh; }
    .project-single .banner .v-center {
      -ms-flex-align: start;
          align-items: flex-start;
      margin-top: 1.5rem; }
    .project-single .banner .info-containner h5 {
      margin-top: 1.5rem; }
  .project-single .content-body {
    width: calc(100vw - 4rem); }
  .project-single .proejct-dna {
    width: calc(100vw - 4rem);
    padding: 0; }
    .project-single .proejct-dna ul li h4 {
      font-size: 14px; }
  .project-single .side-by-side {
    width: calc(100vw - 4rem);
    -ms-flex-direction: column;
        flex-direction: column; }
    .project-single .side-by-side .half,
    .project-single .side-by-side .wide,
    .project-single .side-by-side .narrow,
    .project-single .side-by-side .large {
      width: 100% !important;
      margin: 1rem 0; }
  .project-single .content-body {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .project-single .content-body .wide {
      width: 100%;
      margin-right: 0;
      margin-bottom: 1.5rem; }
  .project-single .end-padding {
    padding: 0; } }

/*--------------------------------------------------------------
inspiration single
--------------------------------------------------------------*/
.inspiration-single {
  padding-top: 5rem;
  background: #faf5f0;
  overflow: hidden; }
  .inspiration-single .header {
    margin-top: 4rem;
    text-align: center; }
    .inspiration-single .header .hero-image {
      width: calc(100vw - 20rem);
      max-width: 1440px;
      margin: 0 auto; }
    .inspiration-single .header .dash {
      height: 3rem;
      width: 1px;
      background: #333333;
      margin-left: 50%;
      margin-bottom: 3rem;
      margin-top: 2rem; }
    .inspiration-single .header .title {
      max-width: 756px;
      margin: 0 auto; }
    .inspiration-single .header .category {
      margin-bottom: 3rem; }
  .inspiration-single .section-content {
    width: calc(100vw - 20rem);
    max-width: 1140px;
    margin: 0 auto;
    overflow: visible; }
    .inspiration-single .section-content .content-body {
      margin: 4rem 0;
      overflow: visible; }
      .inspiration-single .section-content .content-body .subheader {
        text-align: center;
        margin: 4rem auto;
        width: 60%; }
      .inspiration-single .section-content .content-body .gallery {
        margin-top: 4rem; }
      .inspiration-single .section-content .content-body .swiper-gallery {
        margin-top: 4rem;
        margin-bottom: 6rem;
        margin-left: -10rem;
        margin-right: -10rem;
        width: calc(100% + 20rem);
        display: block; }
        .inspiration-single .section-content .content-body .swiper-gallery .swiper-container {
          overflow: visible; }
        .inspiration-single .section-content .content-body .swiper-gallery .swiper-slide {
          list-style: none;
          width: 50%;
          overflow: hidden; }
          .inspiration-single .section-content .content-body .swiper-gallery .swiper-slide.narrow {
            width: 33.8%; }
          .inspiration-single .section-content .content-body .swiper-gallery .swiper-slide.wide {
            width: 60%; }
          .inspiration-single .section-content .content-body .swiper-gallery .swiper-slide.square {
            width: 45.3%; }
      .inspiration-single .section-content .content-body blockquote {
        width: 40%;
        display: inline;
        float: right;
        margin-top: 3rem;
        margin-bottom: 3rem;
        margin-left: 3rem;
        padding-left: 2rem;
        border-left: 1px #333333 solid; }
        .inspiration-single .section-content .content-body blockquote h3 {
          margin-bottom: 0; }

@media (max-width: 768px) {
  .inspiration-single .header .hero-image {
    width: 100%; }
  .inspiration-single .header .title {
    width: 90%; }
  .inspiration-single .header .dash {
    margin-top: 1rem;
    margin-bottom: 2rem; }
  .inspiration-single .header .category {
    margin-bottom: 1rem; }
  .inspiration-single .section-content {
    width: calc(100vw - 4rem); }
    .inspiration-single .section-content .content-body .subheader {
      width: 100%; }
    .inspiration-single .section-content .content-body blockquote {
      width: 100%;
      margin-top: 0; } }

/*--------------------------------------------------------------
inspiration
--------------------------------------------------------------*/
.inspiration {
  background: #e2e2e2; }

/*--------------------------------------------------------------
Studio
--------------------------------------------------------------*/
.studio .page-content {
  position: relative;
  z-index: 2; }
  .studio .page-content .bg-containner {
    width: 100%;
    height: 100vh;
    display: block;
    overflow: hidden; }
    .studio .page-content .bg-containner ul {
      position: relative;
      width: 100%;
      height: 100%; }
      .studio .page-content .bg-containner ul li.item {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0; }
        .studio .page-content .bg-containner ul li.item .containner {
          position: relative;
          width: 100%;
          height: 100%; }
        .studio .page-content .bg-containner ul li.item .slogan {
          position: absolute;
          width: 70%;
          height: 100%;
          top: 0;
          left: 15%;
          z-index: 4;
          color: #FFF;
          transition: all .4s; }
          .studio .page-content .bg-containner ul li.item .slogan ul {
            overflow: visible;
            height: auto; }
            .studio .page-content .bg-containner ul li.item .slogan ul li {
              float: left;
              width: 50%;
              text-align: center;
              list-style: none; }
              .studio .page-content .bg-containner ul li.item .slogan ul li .left {
                transition: all 1.2s;
                margin-top: -10px;
                opacity: 0;
                transform: rotate(-1deg); }
              .studio .page-content .bg-containner ul li.item .slogan ul li .right {
                transition: all 1.2s;
                margin-top: 10px;
                opacity: 0;
                transition-delay: .1s;
                transform: rotate(-1deg); }
        .studio .page-content .bg-containner ul li.item .rounded-background,
        .studio .page-content .bg-containner ul li.item .rounded-background-overlay {
          position: absolute;
          width: 60vh;
          height: 60vh;
          top: calc((85vh - 60vh)/2);
          left: calc((100vw - 60vh)/2);
          z-index: 3;
          border-radius: 35vh;
          overflow: hidden;
          background-size: auto 100%;
          background-position: center center;
          opacity: 0;
          transform: scale(0.9);
          transition: all .1s;
          display: none; }
        .studio .page-content .bg-containner ul li.item .rounded-background-overlay {
          z-index: 2;
          background: #000; }
        .studio .page-content .bg-containner ul li.item .moving-background {
          opacity: .6;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto auto;
          transition: all 30s; }
        .studio .page-content .bg-containner ul li.item.active {
          opacity: 1; }
          .studio .page-content .bg-containner ul li.item.active .slogan .left {
            margin-top: 0;
            opacity: 1;
            transform: rotate(0deg); }
          .studio .page-content .bg-containner ul li.item.active .slogan .right {
            margin-top: 0;
            opacity: 1;
            transform: rotate(0deg); }
          .studio .page-content .bg-containner ul li.item.active .rounded-background,
          .studio .page-content .bg-containner ul li.item.active .rounded-background-overlay {
            opacity: .9;
            transform: scale(1); }
          .studio .page-content .bg-containner ul li.item.active .moving-background {
            transform: scale(1.2); }
  .studio .page-content .our-feel {
    width: 100%;
    height: 100vh;
    background: #faf5f0; }
  .studio .page-content .large h3, .studio .page-content .large h4 {
    width: 60%; }
  .studio .page-content .large h3 {
    margin: 0 auto; }
  .studio .page-content h4, .studio .page-content h5, .studio .page-content p {
    margin-left: auto;
    margin-right: auto;
    padding-left: 10%;
    padding-right: 10%; }
  .studio .page-content h5 {
    font-family: "Julius Sans One", sans-serif !important; }
  .studio .page-content .side-by-side {
    width: 100%;
    padding-left: 5rem;
    padding-right: 5rem;
    background: #faf5f0; }
  .studio .page-content .member {
    width: calc(100vw - 10rem);
    margin: 0 auto;
    position: relative; }
    .studio .page-content .member h4 {
      background: #cbcdce;
      margin: 0 auto;
      padding-top: 4rem;
      padding-bottom: 4rem; }
    .studio .page-content .member .portrait-containner {
      width: 45%; }
      .studio .page-content .member .portrait-containner:after {
        content: "";
        display: block;
        padding-top: 66%;
        margin-bottom: 2rem; }
    .studio .page-content .member .member-loop {
      padding: 2rem 0 4rem;
      display: -ms-flexbox;
      display: flex;
      background: #cbcdce;
      margin-bottom: 0; }
      .studio .page-content .member .member-loop li {
        width: 49.998%;
        list-style: none; }
        .studio .page-content .member .member-loop li .portrait {
          display: none; }
        .studio .page-content .member .member-loop li:nth-child(1) {
          margin-left: 4.1665%;
          margin-right: 2.08325%; }
        .studio .page-content .member .member-loop li:nth-child(2) {
          margin-left: 2.08325%;
          margin-right: 4.1665%; }
    .studio .page-content .member .link-to-interview {
      margin-bottom: 6rem;
      padding-bottom: 2rem; }
      .studio .page-content .member .link-to-interview a {
        border-bottom: 1px solid #000;
        padding-bottom: .5rem; }

.studio .member-video-bg {
  left: 0%;
  top: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #cbcdce; }
  .studio .member-video-bg ul {
    overflow: hidden;
    display: -ms-flexbox;
    display: flex; }
    .studio .member-video-bg ul li {
      list-style: none;
      overflow: hidden; }
      .studio .member-video-bg ul li:nth-child(1) {
        margin-left: 5rem;
        margin-right: 2.5rem; }
      .studio .member-video-bg ul li:nth-child(2) {
        margin-right: 5rem;
        margin-left: 2.5rem; }

@media (max-width: 768px) {
  .studio .member-video-bg ul {
    display: none; }
  .studio .page-content .bg-containner ul li.item .moving-background {
    height: 100%;
    width: auto;
    transform: scale(1.1); }
  .studio .page-content .bg-containner ul li.item .slogan {
    width: 100%;
    margin: 0 auto;
    left: 0; }
    .studio .page-content .bg-containner ul li.item .slogan ul li {
      width: 100%;
      margin: 1rem 0; }
  .studio .page-content .bg-containner ul li.item.active .moving-background {
    transform: scale(1.4); }
  .studio .page-content p {
    padding-left: 0;
    padding-right: 0; }
  .studio .page-content h4 {
    padding-left: 0;
    padding-right: 0;
    margin: 2rem 0; }
  .studio .page-content h5 {
    padding-left: 0;
    padding-right: 0; }
  .studio .page-content .side-by-side {
    padding-left: 2rem;
    padding-right: 2rem;
    -ms-flex-direction: column;
        flex-direction: column;
    padding-top: 2rem; }
    .studio .page-content .side-by-side .narrow,
    .studio .page-content .side-by-side .wide,
    .studio .page-content .side-by-side .large {
      width: 100%;
      margin: 1rem 0; }
    .studio .page-content .side-by-side .large {
      margin-left: -2rem;
      margin-right: 2rem;
      width: calc(100% + 4rem); }
      .studio .page-content .side-by-side .large h3 {
        width: calc(100% - 4rem);
        margin-left: 2rem;
        margin-right: 2rem; }
  .studio .page-content .member {
    width: calc(100vw - 4rem); }
    .studio .page-content .member .portrait-containner {
      display: none; }
    .studio .page-content .member .member-loop {
      padding: 0 0 2rem;
      -ms-flex-direction: column;
          flex-direction: column; }
      .studio .page-content .member .member-loop li {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 1rem; }
        .studio .page-content .member .member-loop li h4 {
          padding-top: 2rem;
          padding-bottom: 2rem; }
        .studio .page-content .member .member-loop li .portrait {
          display: block; } }

/*--------------------------------------------------------------
Manifesto
--------------------------------------------------------------*/
.manifesto .page-content {
  background: #cbcdce;
  transition: 2s all; }
  .manifesto .page-content.color1 {
    background: #c4baa8; }
  .manifesto .page-content.color2 {
    background: #425f5c;
    color: #FFF; }
  .manifesto .page-content .number,
  .manifesto .page-content .number-shadow {
    position: fixed;
    width: 97%;
    height: 100%;
    display: none; }
    .manifesto .page-content .number .svgContanner,
    .manifesto .page-content .number-shadow .svgContanner {
      width: 20%;
      height: auto;
      -webkit-filter: blur(4px);
              filter: blur(4px);
      opacity: .5;
      margin: 12% auto; }
      .manifesto .page-content .number .svgContanner svg #mid,
      .manifesto .page-content .number-shadow .svgContanner svg #mid {
        display: none; }
      .manifesto .page-content .number .svgContanner svg #end,
      .manifesto .page-content .number-shadow .svgContanner svg #end {
        display: none; }
  .manifesto .page-content .number-shadow .svgContanner {
    opacity: .05;
    margin-left: 29%;
    margin-top: 23%;
    -webkit-filter: blur(10px);
            filter: blur(10px); }
    .manifesto .page-content .number-shadow .svgContanner svg #mid {
      display: none; }
    .manifesto .page-content .number-shadow .svgContanner svg #end {
      display: none; }
  .manifesto .page-content .page-body {
    width: calc(60vw);
    margin: 0 auto; }
    .manifesto .page-content .page-body .full {
      width: 100%;
      height: 100vh; }
      .manifesto .page-content .page-body .full:nth-child(2) {
        height: 50vh; }

@media (max-width: 768px) {
  .manifesto .page-content .page-body {
    width: calc(100% - 4rem); } }

/*--------------------------------------------------------------
Plugin
--------------------------------------------------------------*/
/*--------------------------------------------------------------
SVG
--------------------------------------------------------------*/
.svg {
  position: relative;
  display: inline-block; }
  .svg:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; }

.ss-icon svg {
  width: 20px; }

/*--------------------------------------------------------------
SVGs Fallbacks
--------------------------------------------------------------*/
.svg-fallback {
  display: none; }

.no-svg .svg-fallback {
  display: inline-block; }

.no-svg .dropdown-toggle {
  padding: 0.5em 0 0;
  right: 0;
  text-align: center;
  width: 2em; }

.no-svg .dropdown-toggle .svg-fallback.icon-angle-down {
  font-size: 20px;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  /* Chrome, Safari, Opera */
  /* IE 9 */
  transform: rotate(180deg); }

.no-svg .dropdown-toggle.toggled-on .svg-fallback.icon-angle-down {
  /* Chrome, Safari, Opera */
  /* IE 9 */
  transform: rotate(0); }

.no-svg .dropdown-toggle .svg-fallback.icon-angle-down:before {
  content: "\005E"; }

/* Social Menu fallbacks */
.no-svg .social-navigation a {
  background: transparent;
  color: #222;
  height: auto;
  width: auto; }

/* Show screen reader text in some cases */
.no-svg .next.page-numbers .screen-reader-text,
.no-svg .prev.page-numbers .screen-reader-text,
.no-svg .social-navigation li a .screen-reader-text,
.no-svg .search-submit .screen-reader-text {
  clip: auto;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
  height: auto;
  position: relative !important;
  /* overrides previous !important styles */
  width: auto; }

/*--------------------------------------------------------------
Print
--------------------------------------------------------------*/
@media print {
  /* Hide elements */
  form,
  button,
  input,
  select,
  textarea,
  .navigation-top,
  .social-navigation,
  #secondary,
  .content-bottom-widgets,
  .header-image,
  .panel-image-prop,
  .icon-thumb-tack,
  .page-links,
  .edit-link,
  .post-navigation,
  .pagination.navigation,
  .comments-pagination,
  .comment-respond,
  .comment-edit-link,
  .comment-reply-link,
  .comment-metadata .edit-link,
  .pingback .edit-link,
  .site-footer aside.widget-area,
  .site-info {
    display: none !important; }
  .entry-footer,
  #comments,
  .site-footer,
  .single-featured-image-header {
    border: 0; }
  /* Font sizes */
  body {
    font-size: 12pt; }
  h1 {
    font-size: 24pt; }
  h2 {
    font-size: 22pt; }
  h3 {
    font-size: 17pt; }
  h4 {
    font-size: 12pt; }
  h5 {
    font-size: 11pt; }
  h6 {
    font-size: 12pt; }
  .page .panel-content .entry-title,
  .page-title,
  body.page:not(.twentyseventeen-front-page) .entry-title {
    font-size: 10pt; }
  /* Layout */
  .wrap {
    padding-left: 5% !important;
    padding-right: 5% !important;
    max-width: none; }
  /* Site Branding */
  .site-header {
    background: transparent;
    padding: 0; }
  .custom-header-media {
    padding: 0; }
  .twentyseventeen-front-page.has-header-image .site-branding,
  .twentyseventeen-front-page.has-header-video .site-branding,
  .home.blog.has-header-image .site-branding,
  .home.blog.has-header-video .site-branding {
    position: relative; }
  .site-branding {
    margin-top: 0;
    margin-bottom: 1.75em !important;
    /* override styles added by JavaScript */ }
  .site-title {
    font-size: 25pt; }
  .site-description {
    font-size: 12pt;
    opacity: 1; }
  /* Posts */
  .single-featured-image-header {
    background: transparent; }
  .entry-meta {
    font-size: 9pt; }
  /* Colors */
  body,
  .site {
    background: none !important;
    /* Brute force since user agents all print differently. */ }
  body,
  a,
  .site-title a,
  .twentyseventeen-front-page.has-header-image .site-title,
  .twentyseventeen-front-page.has-header-video .site-title,
  .twentyseventeen-front-page.has-header-image .site-title a,
  .twentyseventeen-front-page.has-header-video .site-title a {
    color: #222 !important;
    /* Make sure color schemes don't affect to print */ }
  h2,
  h5,
  blockquote,
  .site-description,
  .twentyseventeen-front-page.has-header-image .site-description,
  .twentyseventeen-front-page.has-header-video .site-description,
  .entry-meta,
  .entry-meta a {
    color: #777 !important;
    /* Make sure color schemes don't affect to print */ }
  .entry-content blockquote.alignleft,
  .entry-content blockquote.alignright {
    font-size: 11pt;
    width: 34%; }
  .site-footer {
    padding: 0; } }