.flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  box-flex: 1;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
}
.flexbox .flex {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  box-flex: 1;
  border: 1px solid #f00;
}
@font-face {
  font-family: 'icon';
  src: url("../fonts/fontawesome-webfont.eot?v=4.3.0");
  src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format('embedded-opentype'), url("../fonts/fontawesome-webfont.woff2?v=4.3.0") format('woff2'), url("../fonts/fontawesome-webfont.woff?v=4.3.0") format('woff'), url("../fonts/fontawesome-webfont.ttf?v=4.3.0") format('truetype'), url("../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format('svg');
  font-weight: normal;
  font-style: normal;
}
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}
*,
*:before,
*:after,
*:hover,
*:before:hover,
*:after:hover,
*:visited,
*:before:visited,
*:after:visited,
*:active,
*:before:active,
*:after:active {
  outline: none !important;
}
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;
  vertical-align: baseline;
  position: relative;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
}
html,
body {
  background: #f1f1f1;
  color: #282828;
  font-family: Helvetica, sans-serif;
  font-size: 16px;
  font-size: 1rem;
  line-height: 200%;
  padding: 0;
  margin: 0;
  height: auto;
  width: auto;
  -webkit-font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-box-align: center;
  box-align: center;
}
a {
  color: #282828;
  text-decoration: none;
}
a:hover,
a:visited,
a:active {
  color: #282828;
}
a:focus,
a:active {
  outline: none;
}
a:active,
a:hover {
  outline: 0;
}
blockquote {
  border-left: 1px solid #eaeaea;
  padding: 12px 0 12px 24px;
  font-style: italic;
  color: #696969;
  font-size: 14px;
  font-size: 0.875rem;
}
blockquote cite {
  display: block;
}
blockquote cite:before {
  content: '~ ';
}
::-moz-selection {
  background: #484848;
  color: #fff;
  text-shadow: none;
}
::selection {
  background: #484848;
  color: #fff;
  text-shadow: none;
}
.ir,
.socialNav li a,
.toggleNavigation {
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}
.vh {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.vh:active,
.vh:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}
.cf:before,
.cf:after {
  content: ' ';
  display: table;
}
.cf:after {
  clear: both;
}
.cf,
.article .content .body .image,
.article .content .body .video {
  *zoom: 1;
}
.scroll-cover {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  pointer-events: auto !important;
  z-index: 100000;
}
.nl {
  clear: both;
  display: block;
}
.verb-click {
  display: inline-block;
}
.touch .verb-click {
  display: none;
}
.verb-tap {
  display: none;
}
.touch .verb-tap {
  display: inline-block;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-bottom: 24px;
}
p {
  font-size: 14px;
  font-size: 0.875rem;
}
.wrapper {
  background: #fff;
  -webkit-transition: margin 0.5s;
  -moz-transition: margin 0.5s;
  -o-transition: margin 0.5s;
  -ms-transition: margin 0.5s;
  transition: margin 0.5s;
  min-height: 100%;
  margin: 60px auto 80px;
  width: 1200px;
  -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.05);
  box-shadow: 0 0 5px rgba(0,0,0,0.05);
}
.header,
.footer,
.main {
  clear: both;
  float: left;
  width: 100%;
  overflow: hidden;
}
.loading *,
.loading *:before,
.loading *:after {
  color: #ccf !important;
  border-color: #ccf !important;
}
.loading h1:after,
.loading h2:after,
.loading h3:after,
.loading p:after,
.loading a:after,
.loading span:after,
.loading li:after {
  content: '' !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  position: absolute !important;
  display: block !important;
  background-color: #ccf !important;
}
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #f0f0f0;
  -webkit-text-size-adjust: none;
}
.hljs,
.hljs-subst,
.hljs-tag .hljs-title,
.nginx .hljs-title {
  color: #000;
}
.hljs-string,
.hljs-title,
.hljs-constant,
.hljs-parent,
.hljs-tag .hljs-value,
.hljs-rule .hljs-value,
.hljs-preprocessor,
.hljs-pragma,
.hljs-name,
.haml .hljs-symbol,
.ruby .hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.hljs-template_tag,
.django .hljs-variable,
.smalltalk .hljs-class,
.hljs-addition,
.hljs-flow,
.hljs-stream,
.bash .hljs-variable,
.pf .hljs-variable,
.apache .hljs-tag,
.apache .hljs-cbracket,
.tex .hljs-command,
.tex .hljs-special,
.erlang_repl .hljs-function_or_atom,
.asciidoc .hljs-header,
.markdown .hljs-header,
.coffeescript .hljs-attribute,
.tp .hljs-variable {
  color: #800;
}
.smartquote,
.hljs-comment,
.hljs-annotation,
.diff .hljs-header,
.hljs-chunk,
.asciidoc .hljs-blockquote,
.markdown .hljs-blockquote {
  color: #888;
}
.hljs-number,
.hljs-date,
.hljs-regexp,
.hljs-literal,
.hljs-hexcolor,
.smalltalk .hljs-symbol,
.smalltalk .hljs-char,
.go .hljs-constant,
.hljs-change,
.lasso .hljs-variable,
.makefile .hljs-variable,
.asciidoc .hljs-bullet,
.markdown .hljs-bullet,
.asciidoc .hljs-link_url,
.markdown .hljs-link_url {
  color: #080;
}
.hljs-label,
.ruby .hljs-string,
.hljs-decorator,
.hljs-filter .hljs-argument,
.hljs-localvars,
.hljs-array,
.hljs-attr_selector,
.hljs-important,
.hljs-pseudo,
.hljs-pi,
.haml .hljs-bullet,
.hljs-doctype,
.hljs-deletion,
.hljs-envvar,
.hljs-shebang,
.apache .hljs-sqbracket,
.nginx .hljs-built_in,
.tex .hljs-formula,
.erlang_repl .hljs-reserved,
.hljs-prompt,
.asciidoc .hljs-link_label,
.markdown .hljs-link_label,
.vhdl .hljs-attribute,
.clojure .hljs-attribute,
.asciidoc .hljs-attribute,
.lasso .hljs-attribute,
.coffeescript .hljs-property,
.hljs-phony {
  color: #88f;
}
.hljs-keyword,
.hljs-id,
.hljs-title,
.hljs-built_in,
.css .hljs-tag,
.hljs-doctag,
.smalltalk .hljs-class,
.hljs-winutils,
.bash .hljs-variable,
.pf .hljs-variable,
.apache .hljs-tag,
.hljs-type,
.hljs-typename,
.tex .hljs-command,
.asciidoc .hljs-strong,
.markdown .hljs-strong,
.hljs-request,
.hljs-status,
.tp .hljs-data,
.tp .hljs-io {
  font-weight: bold;
}
.asciidoc .hljs-emphasis,
.markdown .hljs-emphasis,
.tp .hljs-units {
  font-style: italic;
}
.nginx .hljs-built_in {
  font-weight: normal;
}
.coffeescript .javascript,
.javascript .xml,
.lasso .markup,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata {
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
}
.loader {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -12px 0 0 -12px;
  width: 24px;
  height: 24px;
}
.loader span,
.loader:before,
.loader:after {
  background: #666 !important;
  height: 100%;
  width: 5px;
  display: block;
  position: absolute;
}
.loader span {
  -webkit-animation: pulseOne infinite linear 1.5s;
  -moz-animation: pulseOne infinite linear 1.5s;
  -o-animation: pulseOne infinite linear 1.5s;
  -ms-animation: pulseOne infinite linear 1.5s;
  animation: pulseOne infinite linear 1.5s;
}
.loader:before {
  content: '';
  -webkit-animation: pulseTwo infinite linear 1.5s;
  -moz-animation: pulseTwo infinite linear 1.5s;
  -o-animation: pulseTwo infinite linear 1.5s;
  -ms-animation: pulseTwo infinite linear 1.5s;
  animation: pulseTwo infinite linear 1.5s;
}
.loader:after {
  content: '';
  -webkit-animation: pulseThree infinite linear 1.5s;
  -moz-animation: pulseThree infinite linear 1.5s;
  -o-animation: pulseThree infinite linear 1.5s;
  -ms-animation: pulseThree infinite linear 1.5s;
  animation: pulseThree infinite linear 1.5s;
}
@-moz-keyframes pulseOne {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    -moz-transform: translate3d(0, 0, 0) scale(1);
    -o-transform: translate3d(0, 0, 0) scale(1);
    -ms-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  50% {
    -webkit-transform: translate3d(0, 0, 0) scale(0.75);
    -moz-transform: translate3d(0, 0, 0) scale(0.75);
    -o-transform: translate3d(0, 0, 0) scale(0.75);
    -ms-transform: translate3d(0, 0, 0) scale(0.75);
    transform: translate3d(0, 0, 0) scale(0.75);
    opacity: 0.15;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
    filter: alpha(opacity=15);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    -moz-transform: translate3d(0, 0, 0) scale(1);
    -o-transform: translate3d(0, 0, 0) scale(1);
    -ms-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-webkit-keyframes pulseOne {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    -moz-transform: translate3d(0, 0, 0) scale(1);
    -o-transform: translate3d(0, 0, 0) scale(1);
    -ms-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  50% {
    -webkit-transform: translate3d(0, 0, 0) scale(0.75);
    -moz-transform: translate3d(0, 0, 0) scale(0.75);
    -o-transform: translate3d(0, 0, 0) scale(0.75);
    -ms-transform: translate3d(0, 0, 0) scale(0.75);
    transform: translate3d(0, 0, 0) scale(0.75);
    opacity: 0.15;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
    filter: alpha(opacity=15);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    -moz-transform: translate3d(0, 0, 0) scale(1);
    -o-transform: translate3d(0, 0, 0) scale(1);
    -ms-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-o-keyframes pulseOne {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    -moz-transform: translate3d(0, 0, 0) scale(1);
    -o-transform: translate3d(0, 0, 0) scale(1);
    -ms-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  50% {
    -webkit-transform: translate3d(0, 0, 0) scale(0.75);
    -moz-transform: translate3d(0, 0, 0) scale(0.75);
    -o-transform: translate3d(0, 0, 0) scale(0.75);
    -ms-transform: translate3d(0, 0, 0) scale(0.75);
    transform: translate3d(0, 0, 0) scale(0.75);
    opacity: 0.15;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
    filter: alpha(opacity=15);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    -moz-transform: translate3d(0, 0, 0) scale(1);
    -o-transform: translate3d(0, 0, 0) scale(1);
    -ms-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@keyframes pulseOne {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    -moz-transform: translate3d(0, 0, 0) scale(1);
    -o-transform: translate3d(0, 0, 0) scale(1);
    -ms-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  50% {
    -webkit-transform: translate3d(0, 0, 0) scale(0.75);
    -moz-transform: translate3d(0, 0, 0) scale(0.75);
    -o-transform: translate3d(0, 0, 0) scale(0.75);
    -ms-transform: translate3d(0, 0, 0) scale(0.75);
    transform: translate3d(0, 0, 0) scale(0.75);
    opacity: 0.15;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
    filter: alpha(opacity=15);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    -moz-transform: translate3d(0, 0, 0) scale(1);
    -o-transform: translate3d(0, 0, 0) scale(1);
    -ms-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-moz-keyframes pulseTwo {
  0% {
    -webkit-transform: translate3d(10px, 0, 0) scale(0.75);
    -moz-transform: translate3d(10px, 0, 0) scale(0.75);
    -o-transform: translate3d(10px, 0, 0) scale(0.75);
    -ms-transform: translate3d(10px, 0, 0) scale(0.75);
    transform: translate3d(10px, 0, 0) scale(0.75);
    opacity: 0.15;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
    filter: alpha(opacity=15);
  }
  50% {
    -webkit-transform: translate3d(10px, 0, 0) scale(1);
    -moz-transform: translate3d(10px, 0, 0) scale(1);
    -o-transform: translate3d(10px, 0, 0) scale(1);
    -ms-transform: translate3d(10px, 0, 0) scale(1);
    transform: translate3d(10px, 0, 0) scale(1);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    -webkit-transform: translate3d(10px, 0, 0) scale(0.75);
    -moz-transform: translate3d(10px, 0, 0) scale(0.75);
    -o-transform: translate3d(10px, 0, 0) scale(0.75);
    -ms-transform: translate3d(10px, 0, 0) scale(0.75);
    transform: translate3d(10px, 0, 0) scale(0.75);
    opacity: 0.15;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
    filter: alpha(opacity=15);
  }
}
@-webkit-keyframes pulseTwo {
  0% {
    -webkit-transform: translate3d(10px, 0, 0) scale(0.75);
    -moz-transform: translate3d(10px, 0, 0) scale(0.75);
    -o-transform: translate3d(10px, 0, 0) scale(0.75);
    -ms-transform: translate3d(10px, 0, 0) scale(0.75);
    transform: translate3d(10px, 0, 0) scale(0.75);
    opacity: 0.15;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
    filter: alpha(opacity=15);
  }
  50% {
    -webkit-transform: translate3d(10px, 0, 0) scale(1);
    -moz-transform: translate3d(10px, 0, 0) scale(1);
    -o-transform: translate3d(10px, 0, 0) scale(1);
    -ms-transform: translate3d(10px, 0, 0) scale(1);
    transform: translate3d(10px, 0, 0) scale(1);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    -webkit-transform: translate3d(10px, 0, 0) scale(0.75);
    -moz-transform: translate3d(10px, 0, 0) scale(0.75);
    -o-transform: translate3d(10px, 0, 0) scale(0.75);
    -ms-transform: translate3d(10px, 0, 0) scale(0.75);
    transform: translate3d(10px, 0, 0) scale(0.75);
    opacity: 0.15;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
    filter: alpha(opacity=15);
  }
}
@-o-keyframes pulseTwo {
  0% {
    -webkit-transform: translate3d(10px, 0, 0) scale(0.75);
    -moz-transform: translate3d(10px, 0, 0) scale(0.75);
    -o-transform: translate3d(10px, 0, 0) scale(0.75);
    -ms-transform: translate3d(10px, 0, 0) scale(0.75);
    transform: translate3d(10px, 0, 0) scale(0.75);
    opacity: 0.15;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
    filter: alpha(opacity=15);
  }
  50% {
    -webkit-transform: translate3d(10px, 0, 0) scale(1);
    -moz-transform: translate3d(10px, 0, 0) scale(1);
    -o-transform: translate3d(10px, 0, 0) scale(1);
    -ms-transform: translate3d(10px, 0, 0) scale(1);
    transform: translate3d(10px, 0, 0) scale(1);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    -webkit-transform: translate3d(10px, 0, 0) scale(0.75);
    -moz-transform: translate3d(10px, 0, 0) scale(0.75);
    -o-transform: translate3d(10px, 0, 0) scale(0.75);
    -ms-transform: translate3d(10px, 0, 0) scale(0.75);
    transform: translate3d(10px, 0, 0) scale(0.75);
    opacity: 0.15;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
    filter: alpha(opacity=15);
  }
}
@keyframes pulseTwo {
  0% {
    -webkit-transform: translate3d(10px, 0, 0) scale(0.75);
    -moz-transform: translate3d(10px, 0, 0) scale(0.75);
    -o-transform: translate3d(10px, 0, 0) scale(0.75);
    -ms-transform: translate3d(10px, 0, 0) scale(0.75);
    transform: translate3d(10px, 0, 0) scale(0.75);
    opacity: 0.15;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
    filter: alpha(opacity=15);
  }
  50% {
    -webkit-transform: translate3d(10px, 0, 0) scale(1);
    -moz-transform: translate3d(10px, 0, 0) scale(1);
    -o-transform: translate3d(10px, 0, 0) scale(1);
    -ms-transform: translate3d(10px, 0, 0) scale(1);
    transform: translate3d(10px, 0, 0) scale(1);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    -webkit-transform: translate3d(10px, 0, 0) scale(0.75);
    -moz-transform: translate3d(10px, 0, 0) scale(0.75);
    -o-transform: translate3d(10px, 0, 0) scale(0.75);
    -ms-transform: translate3d(10px, 0, 0) scale(0.75);
    transform: translate3d(10px, 0, 0) scale(0.75);
    opacity: 0.15;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
    filter: alpha(opacity=15);
  }
}
@-moz-keyframes pulseThree {
  0% {
    -webkit-transform: translate3d(20px, 0, 0) scale(1);
    -moz-transform: translate3d(20px, 0, 0) scale(1);
    -o-transform: translate3d(20px, 0, 0) scale(1);
    -ms-transform: translate3d(20px, 0, 0) scale(1);
    transform: translate3d(20px, 0, 0) scale(1);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  50% {
    -webkit-transform: translate3d(20px, 0, 0) scale(0.75);
    -moz-transform: translate3d(20px, 0, 0) scale(0.75);
    -o-transform: translate3d(20px, 0, 0) scale(0.75);
    -ms-transform: translate3d(20px, 0, 0) scale(0.75);
    transform: translate3d(20px, 0, 0) scale(0.75);
    opacity: 0.15;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
    filter: alpha(opacity=15);
  }
  100% {
    -webkit-transform: translate3d(20px, 0, 0) scale(1);
    -moz-transform: translate3d(20px, 0, 0) scale(1);
    -o-transform: translate3d(20px, 0, 0) scale(1);
    -ms-transform: translate3d(20px, 0, 0) scale(1);
    transform: translate3d(20px, 0, 0) scale(1);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-webkit-keyframes pulseThree {
  0% {
    -webkit-transform: translate3d(20px, 0, 0) scale(1);
    -moz-transform: translate3d(20px, 0, 0) scale(1);
    -o-transform: translate3d(20px, 0, 0) scale(1);
    -ms-transform: translate3d(20px, 0, 0) scale(1);
    transform: translate3d(20px, 0, 0) scale(1);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  50% {
    -webkit-transform: translate3d(20px, 0, 0) scale(0.75);
    -moz-transform: translate3d(20px, 0, 0) scale(0.75);
    -o-transform: translate3d(20px, 0, 0) scale(0.75);
    -ms-transform: translate3d(20px, 0, 0) scale(0.75);
    transform: translate3d(20px, 0, 0) scale(0.75);
    opacity: 0.15;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
    filter: alpha(opacity=15);
  }
  100% {
    -webkit-transform: translate3d(20px, 0, 0) scale(1);
    -moz-transform: translate3d(20px, 0, 0) scale(1);
    -o-transform: translate3d(20px, 0, 0) scale(1);
    -ms-transform: translate3d(20px, 0, 0) scale(1);
    transform: translate3d(20px, 0, 0) scale(1);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-o-keyframes pulseThree {
  0% {
    -webkit-transform: translate3d(20px, 0, 0) scale(1);
    -moz-transform: translate3d(20px, 0, 0) scale(1);
    -o-transform: translate3d(20px, 0, 0) scale(1);
    -ms-transform: translate3d(20px, 0, 0) scale(1);
    transform: translate3d(20px, 0, 0) scale(1);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  50% {
    -webkit-transform: translate3d(20px, 0, 0) scale(0.75);
    -moz-transform: translate3d(20px, 0, 0) scale(0.75);
    -o-transform: translate3d(20px, 0, 0) scale(0.75);
    -ms-transform: translate3d(20px, 0, 0) scale(0.75);
    transform: translate3d(20px, 0, 0) scale(0.75);
    opacity: 0.15;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
    filter: alpha(opacity=15);
  }
  100% {
    -webkit-transform: translate3d(20px, 0, 0) scale(1);
    -moz-transform: translate3d(20px, 0, 0) scale(1);
    -o-transform: translate3d(20px, 0, 0) scale(1);
    -ms-transform: translate3d(20px, 0, 0) scale(1);
    transform: translate3d(20px, 0, 0) scale(1);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@keyframes pulseThree {
  0% {
    -webkit-transform: translate3d(20px, 0, 0) scale(1);
    -moz-transform: translate3d(20px, 0, 0) scale(1);
    -o-transform: translate3d(20px, 0, 0) scale(1);
    -ms-transform: translate3d(20px, 0, 0) scale(1);
    transform: translate3d(20px, 0, 0) scale(1);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  50% {
    -webkit-transform: translate3d(20px, 0, 0) scale(0.75);
    -moz-transform: translate3d(20px, 0, 0) scale(0.75);
    -o-transform: translate3d(20px, 0, 0) scale(0.75);
    -ms-transform: translate3d(20px, 0, 0) scale(0.75);
    transform: translate3d(20px, 0, 0) scale(0.75);
    opacity: 0.15;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
    filter: alpha(opacity=15);
  }
  100% {
    -webkit-transform: translate3d(20px, 0, 0) scale(1);
    -moz-transform: translate3d(20px, 0, 0) scale(1);
    -o-transform: translate3d(20px, 0, 0) scale(1);
    -ms-transform: translate3d(20px, 0, 0) scale(1);
    transform: translate3d(20px, 0, 0) scale(1);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
.baseInlineNav,
.primaryNav,
.socialNav {
  display: inline-block;
  margin: auto;
  padding: 0;
}
.baseInlineNav li,
.primaryNav li,
.socialNav li {
  display: inline-block;
  margin: 0;
  margin-right: -5px;
  padding: 0;
}
.baseInlineNav li a,
.primaryNav li a,
.socialNav li a {
  letter-spacing: 1px;
  letter-spacing: 0.0625rem;
}
.navigation-wrapper {
  float: right;
}
.primaryNav {
  text-transform: none;
  float: right;
  padding: 0 12px;
  z-index: 800;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  -ms-transition: -ms-transform 0.5s;
  transition: transform 0.5s;
}
.primaryNav:after {
  content: '';
  position: absolute;
  top: 20%;
  right: 0;
  height: 60%;
  border-right: 1px solid #eaeaea;
}
.primaryNav li a {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 33px;
  line-height: 2.0625rem;
  text-decoration: none;
  padding: 24px 16px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transition-property: height, opacity, border, color, background;
  -moz-transition-property: height, opacity, border, color, background;
  -o-transition-property: height, opacity, border, color, background;
  -ms-transition-property: height, opacity, border, color, background;
  transition-property: height, opacity, border, color, background;
  display: block;
}
.primaryNav li a:before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 0;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  display: block;
  background: #ffd200;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transition-property: height, opacity, border, color, background;
  -moz-transition-property: height, opacity, border, color, background;
  -o-transition-property: height, opacity, border, color, background;
  -ms-transition-property: height, opacity, border, color, background;
  transition-property: height, opacity, border, color, background;
}
.primaryNav li a:after {
  content: attr(data-contents);
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  color: #000;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  z-index: 9999;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transition-property: height, opacity, border, color, background;
  -moz-transition-property: height, opacity, border, color, background;
  -o-transition-property: height, opacity, border, color, background;
  -ms-transition-property: height, opacity, border, color, background;
  transition-property: height, opacity, border, color, background;
}
.primaryNav li a:hover,
.primaryNav li a.active {
  color: #333;
}
.primaryNav li a:hover:before,
.primaryNav li a.active:before {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  height: 5px;
}
.primaryNav li a:active:before {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
.primaryNav li a:active:after {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
.socialNav {
  float: right;
  padding: 0 12px;
  z-index: 900;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
}
.socialNav li a {
  display: block;
  position: relative;
  padding: 24px 0;
}
.socialNav li a:before,
.socialNav li a:after {
  content: '';
  display: block;
}
.socialNav li a:before:hover,
.socialNav li a:after:hover {
  cursor: pointer;
}
.socialNav li a:after {
  font-size: 16px;
  font-size: 1rem;
  line-height: 9px;
  line-height: 0.5625rem;
  font-family: 'icon' !important;
  color: #282828;
  padding: 12px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
}
.socialNav li a:hover:after {
  color: #ffd200;
}
.socialNav li.github a:after {
  content: '\f09b';
}
.socialNav li.twitter a:after {
  content: '\f099';
}
.socialNav li.codepen a:after {
  content: '\f1cb';
}
.socialNav li.dribbble a:after {
  content: '\f17d';
}
.socialNav li.instagram a:after {
  content: '\f16d';
}
.socialNav li.linkedin a:after {
  content: '\f0e1';
}
.socialNav li.plus a:after {
  content: '\f0d5';
}
.socialNav li.rss a:after {
  content: '\f09e';
}
.toggleNavigation {
  width: 80px;
  height: 82px;
  padding: 24px 0 0 0;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  border-left: 1px solid rgba(234,234,234,0);
  border-bottom: 1px solid #eaeaea;
  z-index: 9999;
  background: #fff;
}
.toggleNavigation,
.toggleNavigation:before,
.toggleNavigation:after,
.toggleNavigation span {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.nav.categories,
.about .hero .nav.slideshow {
  font-size: 13px;
  font-size: 0.8125rem;
  width: 100%;
  color: #888;
  padding-left: 24px;
}
.nav.categories .title,
.about .hero .nav.slideshow .title {
  padding: 24px 48px;
  margin: 0 24px 0 0;
}
.nav.categories .title:after,
.about .hero .nav.slideshow .title:after {
  content: '';
  position: absolute;
  top: 15%;
  right: 0;
  height: 70%;
  border-right: 1px solid #eaeaea;
}
.nav.categories .longform,
.about .hero .nav.slideshow .longform {
  display: inline-block;
}
.nav.categories .shortform,
.about .hero .nav.slideshow .shortform {
  display: none;
}
.nav.categories .list li,
.about .hero .nav.slideshow .list li {
  display: inline-block;
  letter-spacing: 1px;
  letter-spacing: 0.0625rem;
}
.nav.categories .sublist li,
.about .hero .nav.slideshow .sublist li {
  display: inline-block;
  margin-right: -5px;
}
.nav.categories .sublist li a,
.about .hero .nav.slideshow .sublist li a {
  display: block;
  padding: 24px;
  text-decoration: none;
  color: #888;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
}
.nav.categories .sublist li a:before,
.about .hero .nav.slideshow .sublist li a:before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 0;
  background: #ffd200;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  display: block;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  z-index: 800;
}
.nav.categories .sublist li a:hover,
.about .hero .nav.slideshow .sublist li a:hover,
.nav.categories .sublist li a.active,
.about .hero .nav.slideshow .sublist li a.active {
  color: #333;
}
.nav.categories .sublist li a:hover:before,
.about .hero .nav.slideshow .sublist li a:hover:before,
.nav.categories .sublist li a.active:before,
.about .hero .nav.slideshow .sublist li a.active:before {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  height: 5px;
}
.nav.categories .sublist li a:active:before,
.about .hero .nav.slideshow .sublist li a:active:before {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
@media screen and (max-width: 880px) {
  .nav.categories,
  .about .hero .nav.slideshow {
    padding: 0 12px;
  }
  .nav.categories .sublist li a,
  .about .hero .nav.slideshow .sublist li a {
    padding: 24px 12px;
  }
  .nav.categories .longform,
  .about .hero .nav.slideshow .longform {
    display: none !important;
  }
  .nav.categories .shortform,
  .about .hero .nav.slideshow .shortform {
    display: inline-block !important;
  }
}
@media screen and (max-width: 500px) {
  .nav.categories,
  .about .hero .nav.slideshow {
    padding: 0 0 0 6px;
  }
  .nav.categories .sublist li a,
  .about .hero .nav.slideshow .sublist li a {
    font-size: 12px;
    font-size: 0.75rem;
    padding: 24px 10px;
  }
}
@-moz-keyframes primaryNavTabletTransitionOut {
  0% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    z-index: 800;
  }
  99% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    z-index: 800;
  }
  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    z-index: -1;
  }
}
@-webkit-keyframes primaryNavTabletTransitionOut {
  0% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    z-index: 800;
  }
  99% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    z-index: 800;
  }
  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    z-index: -1;
  }
}
@-o-keyframes primaryNavTabletTransitionOut {
  0% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    z-index: 800;
  }
  99% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    z-index: 800;
  }
  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    z-index: -1;
  }
}
@keyframes primaryNavTabletTransitionOut {
  0% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    z-index: 800;
  }
  99% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    z-index: 800;
  }
  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    z-index: -1;
  }
}
@-moz-keyframes primaryNavTabletTransitionIn {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    z-index: 800;
  }
  1% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    z-index: 800;
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    z-index: 800;
  }
}
@-webkit-keyframes primaryNavTabletTransitionIn {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    z-index: 800;
  }
  1% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    z-index: 800;
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    z-index: 800;
  }
}
@-o-keyframes primaryNavTabletTransitionIn {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    z-index: 800;
  }
  1% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    z-index: 800;
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    z-index: 800;
  }
}
@keyframes primaryNavTabletTransitionIn {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    z-index: 800;
  }
  1% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    z-index: 800;
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    z-index: 800;
  }
}
.header {
  padding: 0;
  font-family: 'Helvetica Neue', sans-serif;
  text-transform: none;
  border-bottom: 1px solid #eaeaea;
  overflow: visible;
  -webkit-transition: border-color 1s;
  -moz-transition: border-color 1s;
  -o-transition: border-color 1s;
  -ms-transition: border-color 1s;
  transition: border-color 1s;
}
.page-speaking .header,
.page-about .header {
  border-color: transparent;
}
.header:after {
  content: '';
  display: block;
  clear: both;
  width: 100%;
}
.header h1,
.header .primaryNav,
.header .socialNav {
  display: block;
}
.header h1 {
  float: left;
  font-size: 14px;
  font-size: 0.875rem;
  margin-bottom: 0;
  position: relative;
  z-index: 9999;
}
.header h1 a {
  padding: 24px 48px;
  letter-spacing: 0;
  letter-spacing: 0rem;
  text-decoration: none;
  display: inline-block;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
}
.header h1 a:before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 0;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  display: block;
  background: #ffd200;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.header h1 a:hover {
  color: #333;
}
.header h1 a:hover:before {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  height: 5px;
}
.header h1 a:active:before {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
.header h1 a .name {
  margin: 0 16px 0 0;
}
.header h1 a .titles {
  font-size: 11px;
  font-size: 0.6875rem;
  display: inline-block;
  letter-spacing: 1px;
  letter-spacing: 0.0625rem;
  font-weight: normal;
  text-transform: lowercase;
  color: #535353;
  position: relative;
}
.header h1 a .titles:before {
  content: attr(data-shortform);
  display: none;
}
.footer {
  padding: 24px;
  color: #5e5e5e;
  border-top: 1px solid #eaeaea;
}
.footer p {
  font-size: 11px;
  font-size: 0.6875rem;
  line-height: 230%;
  max-width: 700px;
  margin: 0 0 24px;
}
.footer p a {
  color: #5e5e5e;
  line-height: 120%;
  border-bottom: 1px solid #c9c9c9;
}
.footer .license {
  display: block;
  margin: 0;
}
@media screen and (min-width: 900px) {
  .footer {
    padding: 24px 48px;
  }
}
.panels {
  width: 100%;
  min-height: 500px;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.panel {
  display: none;
  padding: 24px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.video {
  width: 100%;
  padding: 0 0 56.26% 0;
  display: block;
  position: relative;
}
.video iframe,
.video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: block;
}
.video .controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.5%;
}
.video .controls .inner {
  background: #fff;
  display: block;
  height: 80px;
  display: block;
}
.video .controls .inner .play {
  font-weight: bold;
}
.video .controls .inner .play:before {
  content: '';
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-left: 24px solid #000;
  border-bottom: 12px solid transparent;
}
.home {
  padding: 0;
}
@media screen and (max-width: 700px) {
  .home .nav li a {
    padding: 24px 16px !important;
  }
}
.home .nav li a .shortform {
  font-family: 'icon';
  font-size: 20px;
  font-size: 1.25rem;
  color: #484848;
}
.home .hero {
  width: 100%;
  font-size: 30px;
  font-size: 1.875rem;
  clear: left;
  padding: 48px;
  border-bottom: 1px solid #eaeaea;
}
.home .hero p {
  display: inline-block;
  max-width: 660px;
  font-size: 30px;
  font-size: 1.875rem;
  margin: 0;
  line-height: 160%;
  font-weight: 100;
  color: #888;
}
.home .live {
  padding: 24px 0 0 0;
}
.home .live h2 {
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: normal;
  color: #888;
  padding: 0 18px 0 72px;
}
.home .live h2:before {
  content: '';
  width: 8px;
  height: 8px;
  display: block;
  position: absolute;
  left: 48px;
  top: 12px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #f00;
  -webkit-animation: pulse 1.5s infinite;
  -moz-animation: pulse 1.5s infinite;
  -o-animation: pulse 1.5s infinite;
  -ms-animation: pulse 1.5s infinite;
  animation: pulse 1.5s infinite;
}
.home .live h2 span {
  display: inline-block;
  margin: 0 4px 0 0;
}
.home .live h2 .alert {
  padding-right: 24px;
  margin-right: 24px;
  border-right: 1px solid #eaeaea;
}
.home .live h2 .time {
  font-weight: bold;
}
.home .live h2 .timezone {
  font-size: 10px;
  font-size: 0.625rem;
  top: -6px;
  letter-spacing: 1px;
  letter-spacing: 0.0625rem;
}
.home .live h2 .hangout {
  display: inline-block;
  padding: 4.8px 24px;
  border: 1px solid #eaeaea;
  font-weight: bold;
  margin: -6px 0 0 0;
  color: #888;
  float: right;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.home .live h2 .hangout:hover {
  border-color: transparent;
  background: #ffd200;
  color: #fff;
}
.home .live h2 .close {
  display: inline-block;
  border: 1px solid #eaeaea;
  margin: -6px 0 0 16px;
  color: #888;
  float: right;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  height: 44px;
  width: 44px;
}
.home .live h2 .close:before,
.home .live h2 .close:after {
  content: '';
  display: block;
  position: absolute;
  background: #eaeaea;
  width: 18px;
  height: 3px;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.home .live h2 .close:before {
  -webkit-transform: translate3d(13px, 20px, 0) rotate(45deg);
  -moz-transform: translate3d(13px, 20px, 0) rotate(45deg);
  -o-transform: translate3d(13px, 20px, 0) rotate(45deg);
  -ms-transform: translate3d(13px, 20px, 0) rotate(45deg);
  transform: translate3d(13px, 20px, 0) rotate(45deg);
}
.home .live h2 .close:after {
  -webkit-transform: translate3d(13px, 20px, 0) rotate(-45deg);
  -moz-transform: translate3d(13px, 20px, 0) rotate(-45deg);
  -o-transform: translate3d(13px, 20px, 0) rotate(-45deg);
  -ms-transform: translate3d(13px, 20px, 0) rotate(-45deg);
  transform: translate3d(13px, 20px, 0) rotate(-45deg);
}
.home .live h2 .close:hover {
  border-color: transparent;
  background: #ffd200;
  color: #fff;
}
.home .live h2 .close:hover:before,
.home .live h2 .close:hover:after {
  background: #fff;
}
@-moz-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 5px #f00;
    box-shadow: 0 0 5px #f00;
  }
  50% {
    -webkit-box-shadow: 0 0 0 #f00;
    box-shadow: 0 0 0 #f00;
  }
  100% {
    -webkit-box-shadow: 0 0 5px #f00;
    box-shadow: 0 0 5px #f00;
  }
}
@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 5px #f00;
    box-shadow: 0 0 5px #f00;
  }
  50% {
    -webkit-box-shadow: 0 0 0 #f00;
    box-shadow: 0 0 0 #f00;
  }
  100% {
    -webkit-box-shadow: 0 0 5px #f00;
    box-shadow: 0 0 5px #f00;
  }
}
@-o-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 5px #f00;
    box-shadow: 0 0 5px #f00;
  }
  50% {
    -webkit-box-shadow: 0 0 0 #f00;
    box-shadow: 0 0 0 #f00;
  }
  100% {
    -webkit-box-shadow: 0 0 5px #f00;
    box-shadow: 0 0 5px #f00;
  }
}
@keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 5px #f00;
    box-shadow: 0 0 5px #f00;
  }
  50% {
    -webkit-box-shadow: 0 0 0 #f00;
    box-shadow: 0 0 0 #f00;
  }
  100% {
    -webkit-box-shadow: 0 0 5px #f00;
    box-shadow: 0 0 5px #f00;
  }
}
.home .live .stream {
  width: 100%;
  height: 0;
  padding: 56.26% 0 0 0;
  background: #000;
  position: relative;
}
.home .live .stream iframe,
.home .live .stream object,
.home .live .stream embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.overlay {
  z-index: 9999;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.overlay .background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  background: #ffd200;
  opacity: 0.75;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
  filter: alpha(opacity=75);
}
.grid {
  width: 100%;
  min-height: 500px;
  background-color: #eaeaea;
}
.grid .svg {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 48px;
  width: 48px;
  margin: -24px 0 0 -24px;
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
}
.grid .svg svg {
  fill: #282828;
  position: absolute;
  width: 100%;
  height: 100%;
}
.grid .grid-sizer,
.grid .item {
  width: 33.325%;
}
@media screen and (max-width: 1000px) {
  .grid .grid-sizer,
  .grid .item {
    width: 50%;
  }
}
@media screen and (max-width: 600px) {
  .grid .grid-sizer,
  .grid .item {
    width: 100%;
  }
}
.grid .item {
  padding: 36px 48px 36px;
  -webkit-box-shadow: inset -1px 1px 0 #eaeaea;
  box-shadow: inset -1px 1px 0 #eaeaea;
  display: block;
  float: left;
  background: #fff;
  overflow: hidden;
}
.grid .item .image,
.grid .item a {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.grid .item:before,
.grid .item:after {
  content: '';
  position: absolute;
  background: #eaeaea;
  z-index: 900;
}
.grid .item:before {
  width: 1px;
  height: 100%;
  top: 0;
  left: 0;
}
.grid .item:after {
  width: 100%;
  height: 1px;
  top: 0;
  right: 0;
}
.grid .item .time {
  position: absolute;
  bottom: 1px;
  right: 1px;
  padding: 6px 12px;
  font-size: 12px;
  font-size: 0.75rem;
  color: #a9a9a9;
}
.grid .item a {
  line-height: 120%;
}
.grid .item .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.25;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
  filter: alpha(opacity=25);
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  -ms-transition: -ms-transform 1s;
  transition: transform 1s;
}
.grid .item:hover .bg {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}
.grid .item p {
  margin: 0;
}
.grid .item.twitter {
  color: #696969;
  font-weight: 100;
  margin: 0;
}
.grid .item.twitter .logo {
  font-family: 'icon';
  font-size: 130px;
  font-size: 8.125rem;
  line-height: 100%;
  position: absolute;
  bottom: -50px;
  right: 10px;
  display: block;
  color: #282828;
  opacity: 0.05;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=5)";
  filter: alpha(opacity=5);
}
.grid .item.twitter a {
  font-weight: 400;
  text-decoration: none;
  display: inline-block;
  color: #282828;
}
.grid .item.twitter a:before {
  content: '';
  position: absolute;
  top: -4px;
  right: 0;
  left: auto;
  overflow: hidden;
  width: 100%;
  max-width: 0%;
  height: 100%;
  display: block;
  background: #ffd200;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  padding: 4px 8px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-transition: opacity 0.3s, max-width 0.3s, left 0.3s, right 0.3s;
  -moz-transition: opacity 0.3s, max-width 0.3s, left 0.3s, right 0.3s;
  -o-transition: opacity 0.3s, max-width 0.3s, left 0.3s, right 0.3s;
  -ms-transition: opacity 0.3s, max-width 0.3s, left 0.3s, right 0.3s;
  transition: opacity 0.3s, max-width 0.3s, left 0.3s, right 0.3s;
}
.grid .item.twitter a:after {
  content: attr(data-contents);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  -ms-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.grid .item.twitter a:hover:before {
  max-width: 100%;
  opacity: 1;
  -ms-filter: none;
  filter: none;
  left: -8px;
  right: auto;
}
.grid .item.twitter a:hover:after {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
.grid .item.twitter p {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 100;
  color: #888;
}
.grid .item.instagram,
.grid .item.dribbble,
.grid .item.codepen {
  padding: 0;
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: #eaeaea;
  -webkit-background-size: 24px 24px;
  -moz-background-size: 24px 24px;
  background-size: 24px 24px;
  background-repeat: no-repeat;
  background-position: center center;
}
.grid .item.instagram:before,
.grid .item.dribbble:before,
.grid .item.codepen:before {
  display: none;
}
.grid .item.instagram .image,
.grid .item.dribbble .image,
.grid .item.codepen .image {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding: 100% 0 0 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-transition: -webkit-transform 3s;
  -moz-transition: -moz-transform 3s;
  -o-transition: -o-transform 3s;
  -ms-transition: -ms-transform 3s;
  transition: transform 3s;
}
.grid .item.instagram .time,
.grid .item.dribbble .time,
.grid .item.codepen .time {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #fff;
}
.grid .item.instagram:hover .image,
.grid .item.dribbble:hover .image,
.grid .item.codepen:hover .image {
  -webkit-transform: scale(1.3) translate3d(0, 0, 0);
  -moz-transform: scale(1.3) translate3d(0, 0, 0);
  -o-transform: scale(1.3) translate3d(0, 0, 0);
  -ms-transform: scale(1.3) translate3d(0, 0, 0);
  transform: scale(1.3) translate3d(0, 0, 0);
}
.grid .item.spotify {
  position: relative;
  font-weight: 100;
  padding: 0;
}
.grid .item.spotify a {
  width: 100%;
  display: block;
  padding: 36px 168px 36px 48px;
}
.grid .item.spotify span {
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
}
.grid .item.spotify .context {
  margin: 0 0 5px 0;
  color: #888;
}
.grid .item.spotify .meta {
  color: #888;
}
.grid .item.spotify .title {
  margin: 0 0 5px 0;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 120%;
}
.grid .item.spotify .image {
  position: absolute;
  top: 0;
  right: 48px;
  width: 100%;
  height: 100%;
  display: block;
  -webkit-background-size: auto 96px;
  -moz-background-size: auto 96px;
  background-size: auto 96px;
  background-repeat: no-repeat;
  background-position: right center;
  opacity: 1;
  -ms-filter: none;
  filter: none;
  -webkit-transition: -webkit-transform 0.3s, right 0.3s, background-size 0.3s;
  -moz-transition: -moz-transform 0.3s, right 0.3s, background-size 0.3s;
  -o-transition: -o-transform 0.3s, right 0.3s, background-size 0.3s;
  -ms-transition: -ms-transform 0.3s, right 0.3s, background-size 0.3s;
  transition: transform 0.3s, right 0.3s, background-size 0.3s;
}
.grid .item.spotify:hover .image {
  -webkit-transform: scale(1.1) translate3d(0, 0, 0);
  -moz-transform: scale(1.1) translate3d(0, 0, 0);
  -o-transform: scale(1.1) translate3d(0, 0, 0);
  -ms-transform: scale(1.1) translate3d(0, 0, 0);
  transform: scale(1.1) translate3d(0, 0, 0);
}
.grid .item.spotify .time {
  background: #fff;
}
.grid .item.github a {
  color: #696969;
}
.grid .item.github .logo {
  font-family: 'icon';
  font-size: 130px;
  font-size: 8.125rem;
  line-height: 100%;
  position: absolute;
  bottom: -50px;
  right: 10px;
  display: block;
  color: #282828;
  opacity: 0.05;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=5)";
  filter: alpha(opacity=5);
}
.grid .item.github .action,
.grid .item.github .text {
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: 100;
  line-height: 100%;
  color: #949494;
}
.grid .item.github .url {
  font-size: 24px;
  font-size: 1.5rem;
  font-weight: 100;
  line-height: 140%;
  display: block;
  margin: 0 0 10px 0;
  color: #282828;
}
.speaking {
  margin: 0 auto;
  padding: 0;
}
.speaking .nav.categories {
  position: relative;
  width: 100%;
}
.speaking .hero {
  color: #fff;
  padding: 0;
  position: relative;
  background: #000;
}
.speaking .hero .background {
  position: relative;
  width: 100%;
  height: 0;
  padding: 56.25% 0 0 0;
}
.speaking .hero .headshot {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.speaking .hero .motto {
  position: absolute;
  max-width: 380px;
  top: 240px;
  left: 48px;
}
.speaking .hero .motto .text {
  font-size: 32px;
  font-size: 2rem;
  line-height: 160%;
  font-weight: 300;
  margin: 0;
  text-shadow: 0 0 15px rgba(0,0,0,0.5);
}
@media screen and (max-width: 1100px) {
  .speaking .hero .motto span {
    display: inline-block;
  }
}
@media screen and (max-width: 900px) {
  .speaking .hero .motto {
    top: auto;
    left: 50%;
    padding: 0 24px;
    text-align: center;
    bottom: 50px;
    max-width: 360px;
    margin: 0 0 0 -180px;
  }
  .speaking .hero .motto .text {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 140%;
    text-shadow: 0 0 15px rgba(0,0,0,0.8);
  }
}
@media screen and (max-width: 600px) {
  .speaking .hero .motto {
    bottom: 20px;
    max-width: 360px;
    margin: 0 0 0 -180px;
  }
  .speaking .hero .motto span {
    display: inline;
  }
}
@media screen and (max-width: 420px) {
  .speaking .hero .motto {
    bottom: 22px;
    max-width: 320px;
    width: 100%;
    margin: 0 0 0 -160px;
  }
  .speaking .hero .motto .text {
    font-size: 18px;
    font-size: 1.125rem;
  }
}
.speaking .hero .motto .button {
  margin: 24px 0 0 0;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  padding: 16px 48px;
  border: 1px solid #fff;
  position: absolute;
}
.speaking .hero .images,
.speaking .hero .image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.speaking .hero .image {
  text-align: center;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  -webkit-transition: opacity 2s;
  -moz-transition: opacity 2s;
  -o-transition: opacity 2s;
  -ms-transition: opacity 2s;
  transition: opacity 2s;
}
.speaking .hero .image.active {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
.speaking .hero .image:before,
.speaking .hero .image:after {
  content: '';
  position: absolute;
  height: 80px;
  width: 100%;
  left: 0;
}
.speaking .hero .image:before {
  top: 0;
  background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.25), rgba(0,0,0,0));
  background-image: -moz-linear-gradient(top, rgba(0,0,0,0.25), rgba(0,0,0,0));
  background-image: -o-linear-gradient(top, rgba(0,0,0,0.25), rgba(0,0,0,0));
  background-image: -ms-linear-gradient(top, rgba(0,0,0,0.25), rgba(0,0,0,0));
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0));
}
.speaking .hero .image:after {
  bottom: 0;
  background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
  background-image: -moz-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
  background-image: -o-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
  background-image: -ms-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
  background-image: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0));
}
.speaking .grid .grid-sizer,
.speaking .grid .item {
  width: 33.3333333%;
}
@media screen and (max-width: 800px) {
  .speaking .grid .grid-sizer,
  .speaking .grid .item {
    width: 50%;
  }
}
@media screen and (max-width: 480px) {
  .speaking .grid .grid-sizer,
  .speaking .grid .item {
    width: 100%;
  }
}
.speaking .grid .item.talk {
  padding: 0;
}
.speaking .grid .item.talk .images {
  width: 100%;
  height: 0;
  padding: 56.25% 0 0 0;
  position: relative;
  background: #000;
}
.speaking .grid .item.talk .images:before {
  content: '';
  width: 100%;
  height: 80px;
  background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.9));
  background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.9));
  background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.9));
  background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.9));
  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.9));
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 600;
}
.speaking .grid .item.talk .images .image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  width: 100%;
  height: 100%;
  z-index: 500;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-transition: opacity 2s;
  -moz-transition: opacity 2s;
  -o-transition: opacity 2s;
  -ms-transition: opacity 2s;
  transition: opacity 2s;
}
.speaking .grid .item.talk .images .image.active {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
.speaking .grid .item.talk .images .location {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 700;
  padding: 16px 16px 12px 14px;
  color: #fff;
  font-size: 13px;
  font-size: 0.8125rem;
}
.speaking .grid .item.talk .images .location:before {
  content: '\f041';
  font-family: 'icon';
  display: inline-block;
  margin: 0 10px 0 0;
}
.speaking .grid .item.talk .images .links {
  position: absolute;
  bottom: 8px;
  right: 14px;
  z-index: 700;
}
.speaking .grid .item.talk .images .links .slides,
.speaking .grid .item.talk .images .links .videos {
  color: #fff;
  padding: 16px 8px 0 32px;
  height: 48px;
  position: relative;
  display: block;
  float: left;
  font-size: 13px;
  font-size: 0.8125rem;
  margin: 0 12px 0 0;
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
  -moz-transition: opacity 0.5s, -moz-transform 0.5s;
  -o-transition: opacity 0.5s, -o-transform 0.5s;
  -ms-transition: opacity 0.5s, -ms-transform 0.5s;
  transition: opacity 0.5s, transform 0.5s;
}
.speaking .grid .item.talk .images .links .slides:before,
.speaking .grid .item.talk .images .links .videos:before {
  font-family: 'icon';
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 100%;
  position: absolute;
  top: 15px;
  left: 8px;
  text-align: center;
  color: #fff;
}
.speaking .grid .item.talk .images .links .slides:after,
.speaking .grid .item.talk .images .links .videos:after {
  content: '';
  width: 100%;
  height: 4px;
  background: #fff;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  -moz-transition: opacity 0.3s, -moz-transform 0.3s;
  -o-transition: opacity 0.3s, -o-transform 0.3s;
  -ms-transition: opacity 0.3s, -ms-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
  -webkit-transform: translate3d(0, 4px, 0);
  -moz-transform: translate3d(0, 4px, 0);
  -o-transform: translate3d(0, 4px, 0);
  -ms-transform: translate3d(0, 4px, 0);
  transform: translate3d(0, 4px, 0);
}
.speaking .grid .item.talk .images .links .slides:hover:after,
.speaking .grid .item.talk .images .links .videos:hover:after {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.speaking .grid .item.talk .images .links .slides:before {
  content: '\f1c5';
}
.speaking .grid .item.talk .images .links .videos:before {
  content: '\f16a';
}
.speaking .grid .item.talk .info {
  height: 175px;
  padding: 24px 24px 24px 24px;
  color: #696969;
}
@media screen and (max-width: 480px) {
  .speaking .grid .item.talk .info {
    height: auto;
  }
}
.speaking .grid .item.talk .info .name,
.speaking .grid .item.talk .info .talk,
.speaking .grid .item.talk .info .date {
  font-weight: 300;
}
.speaking .grid .item.talk .info .name {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 140%;
  margin: 0;
}
.speaking .grid .item.talk .info .date {
  font-size: 14px;
  font-size: 0.875rem;
  color: #949494;
  margin: 0;
}
.speaking .grid .item.talk .info .talk {
  font-size: 16px;
  font-size: 1rem;
  margin: 0;
}
.speaking .grid .item.talk .info .talk:before {
  content: '\f130';
  font-family: 'icon';
  display: inline-block;
  margin: 0 15px 0 0;
  color: #c9c9c9;
}
.work {
  overflow: hidden;
  padding: 0;
}
.work .nav.categories {
  border-bottom: 1px solid #eaeaea;
  position: relative;
  width: 100%;
}
.work .nav.categories .collapse {
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}
.work .nav.categories .collapse a {
  display: block;
  width: 80px;
  height: 80px;
  position: relative;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
  border-left: 1px solid #eaeaea;
}
.work .nav.categories .collapse a:hover {
  cursor: pointer;
}
.work .nav.categories .collapse a:hover span,
.work .nav.categories .collapse a:hover:before,
.work .nav.categories .collapse a:hover:after {
  background: #ffd200;
}
.expand .work .nav.categories .collapse a {
  background: #fbfbfb;
}
.expand .work .nav.categories .collapse a:before {
  -webkit-transform: translate3d(21px, 40px, 0) rotate(45deg);
  -moz-transform: translate3d(21px, 40px, 0) rotate(45deg);
  -o-transform: translate3d(21px, 40px, 0) rotate(45deg);
  -ms-transform: translate3d(21px, 40px, 0) rotate(45deg);
  transform: translate3d(21px, 40px, 0) rotate(45deg);
}
.expand .work .nav.categories .collapse a:after {
  -webkit-transform: translate3d(35px, 40px, 0) rotate(-45deg);
  -moz-transform: translate3d(35px, 40px, 0) rotate(-45deg);
  -o-transform: translate3d(35px, 40px, 0) rotate(-45deg);
  -ms-transform: translate3d(35px, 40px, 0) rotate(-45deg);
  transform: translate3d(35px, 40px, 0) rotate(-45deg);
}
.work .nav.categories .collapse a span,
.work .nav.categories .collapse a:before,
.work .nav.categories .collapse a:after {
  content: '';
  position: absolute;
  display: block;
  width: 24px;
  height: 5px;
  position: absolute;
  background: #eaeaea;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
}
.work .nav.categories .collapse a span {
  display: none;
}
.work .nav.categories .collapse a:before {
  -webkit-transform: translate3d(21px, 37px, 0) rotate(-45deg);
  -moz-transform: translate3d(21px, 37px, 0) rotate(-45deg);
  -o-transform: translate3d(21px, 37px, 0) rotate(-45deg);
  -ms-transform: translate3d(21px, 37px, 0) rotate(-45deg);
  transform: translate3d(21px, 37px, 0) rotate(-45deg);
}
.work .nav.categories .collapse a:after {
  -webkit-transform: translate3d(35px, 37px, 0) rotate(45deg);
  -moz-transform: translate3d(35px, 37px, 0) rotate(45deg);
  -o-transform: translate3d(35px, 37px, 0) rotate(45deg);
  -ms-transform: translate3d(35px, 37px, 0) rotate(45deg);
  transform: translate3d(35px, 37px, 0) rotate(45deg);
}
.work .title {
  margin-bottom: 24px;
}
.work .brands,
.work .casestudies,
.work .agencies,
.work .startups,
.work .enterprises,
.work .opensource {
  border-bottom: none;
  padding: 48px 0 0;
  position: relative;
  display: block;
  clear: both;
  -webkit-transition: padding 0.4s;
  -moz-transition: padding 0.4s;
  -o-transition: padding 0.4s;
  -ms-transition: padding 0.4s;
  transition: padding 0.4s;
}
.work .brands .title,
.work .casestudies .title,
.work .agencies .title,
.work .startups .title,
.work .enterprises .title,
.work .opensource .title {
  padding: 0 48px 4.8px;
  margin: 0 0 4.8px;
  font-weight: 300;
  color: #949494;
}
.work .brands .description,
.work .casestudies .description,
.work .agencies .description,
.work .startups .description,
.work .enterprises .description,
.work .opensource .description {
  padding: 0 48px 24px;
  max-width: 700px;
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 300;
  color: #949494;
}
.work .brands .more,
.work .casestudies .more,
.work .agencies .more,
.work .startups .more,
.work .enterprises .more,
.work .opensource .more {
  color: #d4d4d4;
  font-size: 30px;
  font-size: 1.875rem;
  font-weight: 300;
  line-height: 100%;
  position: absolute;
  width: auto;
  height: auto;
  display: none;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  top: 50%;
  right: 48px;
  margin: -15px 0 0 0;
  -webkit-transform: translate3d(0, -24px, 0);
  -moz-transform: translate3d(0, -24px, 0);
  -o-transform: translate3d(0, -24px, 0);
  -ms-transform: translate3d(0, -24px, 0);
  transform: translate3d(0, -24px, 0);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
}
.work .brands .stats,
.work .casestudies .stats,
.work .agencies .stats,
.work .startups .stats,
.work .enterprises .stats,
.work .opensource .stats {
  position: absolute;
  display: none;
  top: 50%;
  right: 96px;
  margin: -82px 0 0 0;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
}
.work .brands .stats .number,
.work .casestudies .stats .number,
.work .agencies .stats .number,
.work .startups .stats .number,
.work .enterprises .stats .number,
.work .opensource .stats .number {
  color: #f2f2f2;
  font-size: 160px;
  font-size: 10rem;
  letter-spacing: -10px;
  letter-spacing: -0.625rem;
  margin: 0;
  line-height: 100%;
  font-weight: 300;
  width: 100%;
  display: block;
  text-align: center;
}
.work .brands .stats .text,
.work .casestudies .stats .text,
.work .agencies .stats .text,
.work .startups .stats .text,
.work .enterprises .stats .text,
.work .opensource .stats .text {
  color: #d4d4d4;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 100%;
  font-weight: 300;
  margin: -20px 0 0 0;
  width: 100%;
  display: block;
  text-align: center;
}
.expand .work .brands .more,
.expand .work .casestudies .more,
.expand .work .agencies .more,
.expand .work .startups .more,
.expand .work .enterprises .more,
.expand .work .opensource .more,
.work .brands.open .more,
.work .casestudies.open .more,
.work .agencies.open .more,
.work .startups.open .more,
.work .enterprises.open .more,
.work .opensource.open .more,
.expand .work .brands .stats,
.expand .work .casestudies .stats,
.expand .work .agencies .stats,
.expand .work .startups .stats,
.expand .work .enterprises .stats,
.expand .work .opensource .stats,
.work .brands.open .stats,
.work .casestudies.open .stats,
.work .agencies.open .stats,
.work .startups.open .stats,
.work .enterprises.open .stats,
.work .opensource.open .stats {
  display: none;
}
.expand .work .brands,
.expand .work .casestudies,
.expand .work .agencies,
.expand .work .startups,
.expand .work .enterprises,
.expand .work .opensource,
.work .brands.open,
.work .casestudies.open,
.work .agencies.open,
.work .startups.open,
.work .enterprises.open,
.work .opensource.open {
  padding-top: 72px;
  padding-bottom: 24px;
  cursor: pointer;
}
.expand .work .brands .more,
.expand .work .casestudies .more,
.expand .work .agencies .more,
.expand .work .startups .more,
.expand .work .enterprises .more,
.expand .work .opensource .more,
.work .brands.open .more,
.work .casestudies.open .more,
.work .agencies.open .more,
.work .startups.open .more,
.work .enterprises.open .more,
.work .opensource.open .more {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.expand .work .brands .stats,
.expand .work .casestudies .stats,
.expand .work .agencies .stats,
.expand .work .startups .stats,
.expand .work .enterprises .stats,
.expand .work .opensource .stats,
.work .brands.open .stats,
.work .casestudies.open .stats,
.work .agencies.open .stats,
.work .startups.open .stats,
.work .enterprises.open .stats,
.work .opensource.open .stats {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transform: translate3d(0, 24px, 0);
  -moz-transform: translate3d(0, 24px, 0);
  -o-transform: translate3d(0, 24px, 0);
  -ms-transform: translate3d(0, 24px, 0);
  transform: translate3d(0, 24px, 0);
}
.expand .work .brands,
.expand .work .agencies,
.expand .work .startups,
.expand .work .enterprises,
.work .brands.open,
.work .agencies.open,
.work .startups.open,
.work .enterprises.open {
  padding-top: 48px;
  border-bottom: 1px solid #ececec;
}
.expand .work .brands:hover,
.expand .work .agencies:hover,
.expand .work .startups:hover,
.expand .work .enterprises:hover,
.work .brands.open:hover,
.work .agencies.open:hover,
.work .startups.open:hover,
.work .enterprises.open:hover {
  cursor: pointer;
}
.expand .work .brands ul,
.expand .work .agencies ul,
.expand .work .startups ul,
.expand .work .enterprises ul,
.work .brands.open ul,
.work .agencies.open ul,
.work .startups.open ul,
.work .enterprises.open ul {
  display: none;
}
.work .brands ul,
.work .agencies ul,
.work .startups ul,
.work .enterprises ul {
  display: block;
  position: relative;
  border-top: 1px solid #ececec;
}
.work .brands ul li,
.work .agencies ul li,
.work .startups ul li,
.work .enterprises ul li {
  position: relative;
  display: block;
  padding: 0;
  border-collapse: collapse;
  width: 20%;
  float: left;
  margin: 0;
  border-right: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
}
.work .brands ul li:nth-of-type(5n+1),
.work .agencies ul li:nth-of-type(5n+1),
.work .startups ul li:nth-of-type(5n+1),
.work .enterprises ul li:nth-of-type(5n+1) {
  clear: both;
}
.work .brands ul li:nth-of-type(5n),
.work .agencies ul li:nth-of-type(5n),
.work .startups ul li:nth-of-type(5n),
.work .enterprises ul li:nth-of-type(5n) {
  border-right: 1px solid transparent;
}
@media screen and (max-width: 800px) {
  .work .brands ul li,
  .work .agencies ul li,
  .work .startups ul li,
  .work .enterprises ul li {
    width: 33.333335%;
  }
  .work .brands ul li:nth-of-type(5n+1),
  .work .agencies ul li:nth-of-type(5n+1),
  .work .startups ul li:nth-of-type(5n+1),
  .work .enterprises ul li:nth-of-type(5n+1) {
    clear: none;
  }
  .work .brands ul li:nth-of-type(5n),
  .work .agencies ul li:nth-of-type(5n),
  .work .startups ul li:nth-of-type(5n),
  .work .enterprises ul li:nth-of-type(5n) {
    border-right: 1px solid #ececec;
  }
  .work .brands ul li:nth-of-type(3n+1),
  .work .agencies ul li:nth-of-type(3n+1),
  .work .startups ul li:nth-of-type(3n+1),
  .work .enterprises ul li:nth-of-type(3n+1) {
    clear: both;
  }
  .work .brands ul li:nth-of-type(3n),
  .work .agencies ul li:nth-of-type(3n),
  .work .startups ul li:nth-of-type(3n),
  .work .enterprises ul li:nth-of-type(3n) {
    border-right: 1px solid transparent;
  }
}
@media screen and (max-width: 800px) {
  .work .brands ul li,
  .work .agencies ul li,
  .work .startups ul li,
  .work .enterprises ul li {
    width: 50%;
  }
  .work .brands ul li:nth-of-type(5n+1),
  .work .agencies ul li:nth-of-type(5n+1),
  .work .startups ul li:nth-of-type(5n+1),
  .work .enterprises ul li:nth-of-type(5n+1),
  .work .brands ul li:nth-of-type(3n+1),
  .work .agencies ul li:nth-of-type(3n+1),
  .work .startups ul li:nth-of-type(3n+1),
  .work .enterprises ul li:nth-of-type(3n+1) {
    clear: none;
  }
  .work .brands ul li:nth-of-type(5n),
  .work .agencies ul li:nth-of-type(5n),
  .work .startups ul li:nth-of-type(5n),
  .work .enterprises ul li:nth-of-type(5n),
  .work .brands ul li:nth-of-type(3n),
  .work .agencies ul li:nth-of-type(3n),
  .work .startups ul li:nth-of-type(3n),
  .work .enterprises ul li:nth-of-type(3n) {
    border-right: 1px solid #ececec;
  }
  .work .brands ul li:nth-of-type(2n+1),
  .work .agencies ul li:nth-of-type(2n+1),
  .work .startups ul li:nth-of-type(2n+1),
  .work .enterprises ul li:nth-of-type(2n+1) {
    clear: both;
  }
  .work .brands ul li:nth-of-type(2n),
  .work .agencies ul li:nth-of-type(2n),
  .work .startups ul li:nth-of-type(2n),
  .work .enterprises ul li:nth-of-type(2n) {
    border-right: 1px solid transparent;
  }
}
.work .brands ul li:before,
.work .agencies ul li:before,
.work .startups ul li:before,
.work .enterprises ul li:before {
  content: '';
  width: 100%;
  height: 0;
  padding: 0 0 100% 0;
  display: block;
  position: relative;
}
.work .brands ul li a,
.work .agencies ul li a,
.work .startups ul li a,
.work .enterprises ul li a,
.work .brands ul li .block,
.work .agencies ul li .block,
.work .startups ul li .block,
.work .enterprises ul li .block {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
  overflow: hidden;
}
.work .brands ul li a:hover,
.work .agencies ul li a:hover,
.work .startups ul li a:hover,
.work .enterprises ul li a:hover,
.work .brands ul li .block:hover,
.work .agencies ul li .block:hover,
.work .startups ul li .block:hover,
.work .enterprises ul li .block:hover {
  background: #ececec;
}
.work .brands ul li a:hover .image,
.work .agencies ul li a:hover .image,
.work .startups ul li a:hover .image,
.work .enterprises ul li a:hover .image,
.work .brands ul li .block:hover .image,
.work .agencies ul li .block:hover .image,
.work .startups ul li .block:hover .image,
.work .enterprises ul li .block:hover .image {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.work .brands ul li a:hover .logo .svg svg,
.work .agencies ul li a:hover .logo .svg svg,
.work .startups ul li a:hover .logo .svg svg,
.work .enterprises ul li a:hover .logo .svg svg,
.work .brands ul li .block:hover .logo .svg svg,
.work .agencies ul li .block:hover .logo .svg svg,
.work .startups ul li .block:hover .logo .svg svg,
.work .enterprises ul li .block:hover .logo .svg svg {
  width: 55%;
  height: 35%;
  opacity: 1;
  -ms-filter: none;
  filter: none;
  fill: #fff !important;
}
.work .brands ul li a .image,
.work .agencies ul li a .image,
.work .startups ul li a .image,
.work .enterprises ul li a .image,
.work .brands ul li .block .image,
.work .agencies ul li .block .image,
.work .startups ul li .block .image,
.work .enterprises ul li .block .image {
  min-width: 100%;
  min-height: 100%;
  display: block;
  position: absolute;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -o-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}
.work .brands ul li a .image:after,
.work .agencies ul li a .image:after,
.work .startups ul li a .image:after,
.work .enterprises ul li a .image:after,
.work .brands ul li .block .image:after,
.work .agencies ul li .block .image:after,
.work .startups ul li .block .image:after,
.work .enterprises ul li .block .image:after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.4);
}
.work .brands ul li a .image img,
.work .agencies ul li a .image img,
.work .startups ul li a .image img,
.work .enterprises ul li a .image img,
.work .brands ul li .block .image img,
.work .agencies ul li .block .image img,
.work .startups ul li .block .image img,
.work .enterprises ul li .block .image img {
  width: 100%;
  height: 100%;
}
.work .brands ul li a .logo,
.work .agencies ul li a .logo,
.work .startups ul li a .logo,
.work .enterprises ul li a .logo,
.work .brands ul li .block .logo,
.work .agencies ul li .block .logo,
.work .startups ul li .block .logo,
.work .enterprises ul li .block .logo,
.work .brands ul li a .svg,
.work .agencies ul li a .svg,
.work .startups ul li a .svg,
.work .enterprises ul li a .svg,
.work .brands ul li .block .svg,
.work .agencies ul li .block .svg,
.work .startups ul li .block .svg,
.work .enterprises ul li .block .svg {
  width: 100%;
  height: 100%;
}
.work .brands ul li a .logo svg,
.work .agencies ul li a .logo svg,
.work .startups ul li a .logo svg,
.work .enterprises ul li a .logo svg,
.work .brands ul li .block .logo svg,
.work .agencies ul li .block .logo svg,
.work .startups ul li .block .logo svg,
.work .enterprises ul li .block .logo svg,
.work .brands ul li a .svg svg,
.work .agencies ul li a .svg svg,
.work .startups ul li a .svg svg,
.work .enterprises ul li a .svg svg,
.work .brands ul li .block .svg svg,
.work .agencies ul li .block .svg svg,
.work .startups ul li .block .svg svg,
.work .enterprises ul li .block .svg svg {
  position: absolute;
  width: 50%;
  height: 30%;
  display: block;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -ms-transition: all 0.4s;
  transition: all 0.4s;
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  pointer-events: none;
}
.work .brands ul li a .text,
.work .agencies ul li a .text,
.work .startups ul li a .text,
.work .enterprises ul li a .text,
.work .brands ul li .block .text,
.work .agencies ul li .block .text,
.work .startups ul li .block .text,
.work .enterprises ul li .block .text {
  display: none;
}
.work .opensource {
  padding-bottom: 0;
}
.expand .work .opensource,
.work .opensource.open {
  border-bottom: 1px solid #ececec;
}
.work .opensource ul {
  position: relative;
  margin: 0;
  border-top: 1px solid #ececec;
}
.work .opensource ul li {
  position: relative;
  display: block;
  padding: 48px 0;
  border-collapse: collapse;
  width: 50%;
  height: 270px;
  overflow: hidden;
  float: left;
  margin: 0;
  border-right: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
}
.work .opensource ul li:nth-of-type(2n) {
  border-right: 1px solid transparent;
}
.work .opensource ul li .title {
  font-weight: 500;
}
.work .opensource ul li .description {
  font-size: 14px;
  font-size: 0.875rem;
  padding-bottom: 0;
  margin-bottom: 0;
}
.work .opensource ul li .link {
  display: inline-block;
  color: #949494;
  clear: both;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 100%;
  padding-bottom: 1px;
  margin: 0 0 0 48px;
}
.work .opensource ul li .link:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-bottom: 1px solid #eaeaea;
  display: block;
}
.work .casestudies {
  border-bottom: none;
  padding-top: 0;
}
.work .casestudies ul li {
  list-style: none;
}
.work .casestudies .project {
  padding: 48px;
  color: #fff;
  position: relative;
  text-align: center;
  overflow: hidden;
}
.work .casestudies .project.active .background:before {
  opacity: 0 !important;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;
  filter: alpha(opacity=0) !important;
}
.work .casestudies .project.active .logo,
.work .casestudies .project.active .description,
.work .casestudies .project.active .visit,
.work .casestudies .project.active .tags {
  opacity: 0 !important;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;
  filter: alpha(opacity=0) !important;
}
.work .casestudies .project.active .logo {
  -webkit-transform: translate3d(0, -20px, 0);
  -moz-transform: translate3d(0, -20px, 0);
  -o-transform: translate3d(0, -20px, 0);
  -ms-transform: translate3d(0, -20px, 0);
  transform: translate3d(0, -20px, 0);
}
.work .casestudies .project.active .description {
  -webkit-transform: translate3d(0, -20px, 0);
  -moz-transform: translate3d(0, -20px, 0);
  -o-transform: translate3d(0, -20px, 0);
  -ms-transform: translate3d(0, -20px, 0);
  transform: translate3d(0, -20px, 0);
}
.work .casestudies .project.active .visit {
  -webkit-transform: translate3d(0, -15px, 0);
  -moz-transform: translate3d(0, -15px, 0);
  -o-transform: translate3d(0, -15px, 0);
  -ms-transform: translate3d(0, -15px, 0);
  transform: translate3d(0, -15px, 0);
}
.work .casestudies .project.active .tags {
  -webkit-transform: translate3d(0, -10px, 0);
  -moz-transform: translate3d(0, -10px, 0);
  -o-transform: translate3d(0, -10px, 0);
  -ms-transform: translate3d(0, -10px, 0);
  transform: translate3d(0, -10px, 0);
}
.work .casestudies .project .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.work .casestudies .project .overlay img {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
}
.work .casestudies .project .description {
  max-width: 700px;
  margin: -25px auto 0;
  color: #fff;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: 100;
  font-family: 'Merriweather', Georgia, serif;
  -webkit-transition: all 0.75s;
  -moz-transition: all 0.75s;
  -o-transition: all 0.75s;
  -ms-transition: all 0.75s;
  transition: all 0.75s;
}
.work .casestudies .project .tags {
  letter-spacing: 1px;
  letter-spacing: 0.0625rem;
  text-transform: lowercase;
  font-size: 11px;
  font-size: 0.6875rem;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
}
.work .casestudies .project .tags:before {
  content: 'Tags:';
  display: inline-block;
  margin: 0 5px 0 0;
}
.work .casestudies .project .tags li {
  display: inline-block;
  padding: 0 5px;
}
.work .casestudies .project .tags a {
  text-decoration: none;
}
.work .casestudies .project .logo {
  display: block;
  width: 100%;
  margin: 50px auto 100px;
  font-size: 52px;
  font-size: 3.25rem;
  font-weight: 100;
  font-family: 'Merriweather', Georgia, serif;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
}
.work .casestudies .project .logo:after {
  content: '';
  width: 80px;
  height: 1px;
  background: #fff;
  display: block;
  position: absolute;
  left: 50%;
  bottom: -45px;
  margin: 0 0 0 -40px;
}
.work .casestudies .project .background {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  min-height: 100%;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
  background-position: left center;
}
.work .casestudies .project .background:before {
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  display: block;
  opacity: 0.9;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=90);
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
}
.work .casestudies .project .card {
  display: block;
  float: left;
  overflow: hidden;
  margin: 0;
  padding: 0;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  width: 20%;
}
.work .casestudies .project .card:before {
  z-index: -1;
}
.work .casestudies .project .card:after {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  z-index: 800;
}
.work .casestudies .project.torontostar {
  background: #0b70b8;
  min-height: 500px;
}
.work .casestudies .project.torontostar .torontostar-sprite {
  background-image: url("../images/torontostar-sprite.png");
}
.work .casestudies .project.torontostar a {
  color: #93daeb;
}
.work .casestudies .project.torontostar .visit {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 300;
}
.work .casestudies .project.torontostar .visit a {
  color: #6fcee4;
  font-weight: 500;
  border-bottom: 1px solid #6fcee4;
}
.work .casestudies .project.torontostar .view {
  display: block;
  width: 72px;
  height: 72px;
  position: absolute;
  bottom: 48px;
  right: 48px;
  border: 1px solid #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.torontostar .view:before {
  content: '\f06e';
  font-family: 'icon';
  font-size: 24px;
  font-size: 1.5rem;
  width: 100%;
  height: 100%;
  padding: 22px 0 0 0;
  text-align: center;
  line-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  text-shadow: none !important;
}
.work .casestudies .project.torontostar .view:hover {
  background: #fff;
}
.work .casestudies .project.torontostar .view:hover:before {
  color: #0b70b8;
}
.work .casestudies .project.torontostar .card:after {
  background: rgba(11,112,184,0.9);
}
.work .casestudies .project.torontostar .background:before {
  background-color: #0b70b8;
}
.work .casestudies .project.torontostar .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0b70b8;
  border-top: 1px solid #0d82d6;
  border-bottom: 1px solid #0a65a6;
}
.work .casestudies .project.torontostar .card-1:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/torontostar-sprite.png");
  width: 100%;
  height: 0;
  padding: 122.90502793296089% 0 0 0;
}
.work .casestudies .project.torontostar .card-1:after {
  content: '';
  padding-bottom: 122.90502793296089%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.torontostar .card-2:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/torontostar-sprite.png");
  width: 100%;
  height: 0;
  padding: 177.41935483870967% 0 0 0;
}
.work .casestudies .project.torontostar .card-2:after {
  content: '';
  padding-bottom: 177.41935483870967%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.torontostar .card-3:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/torontostar-sprite.png");
  width: 100%;
  height: 0;
  padding: 177.41935483870967% 0 0 0;
}
.work .casestudies .project.torontostar .card-3:after {
  content: '';
  padding-bottom: 177.41935483870967%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.torontostar .card-4:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/torontostar-sprite.png");
  width: 100%;
  height: 0;
  padding: 177.41935483870967% 0 0 0;
}
.work .casestudies .project.torontostar .card-4:after {
  content: '';
  padding-bottom: 177.41935483870967%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.torontostar .card-5:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/torontostar-sprite.png");
  width: 100%;
  height: 0;
  padding: 122.90502793296089% 0 0 0;
}
.work .casestudies .project.torontostar .card-5:after {
  content: '';
  padding-bottom: 122.90502793296089%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.torontostar .card-6:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/torontostar-sprite.png");
  width: 100%;
  height: 0;
  padding: 156.53710247349824% 0 0 0;
}
.work .casestudies .project.torontostar .card-6:after {
  content: '';
  padding-bottom: 156.53710247349824%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.torontostar .card-7:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/torontostar-sprite.png");
  width: 100%;
  height: 0;
  padding: 122.90502793296089% 0 0 0;
}
.work .casestudies .project.torontostar .card-7:after {
  content: '';
  padding-bottom: 122.90502793296089%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.torontostar .card-8:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/torontostar-sprite.png");
  width: 100%;
  height: 0;
  padding: 177.41935483870967% 0 0 0;
}
.work .casestudies .project.torontostar .card-8:after {
  content: '';
  padding-bottom: 177.41935483870967%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.torontostar .card-9:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/torontostar-sprite.png");
  width: 100%;
  height: 0;
  padding: 123.59550561797752% 0 0 0;
}
.work .casestudies .project.torontostar .card-9:after {
  content: '';
  padding-bottom: 123.59550561797752%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.torontostar .card-10:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/torontostar-sprite.png");
  width: 100%;
  height: 0;
  padding: 124.29378531073448% 0 0 0;
}
.work .casestudies .project.torontostar .card-10:after {
  content: '';
  padding-bottom: 124.29378531073448%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.torontostar .card-11:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/torontostar-sprite.png");
  width: 100%;
  height: 0;
  padding: 122.90502793296089% 0 0 0;
}
.work .casestudies .project.torontostar .card-11:after {
  content: '';
  padding-bottom: 122.90502793296089%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.torontostar .card-12:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/torontostar-sprite.png");
  width: 100%;
  height: 0;
  padding: 75% 0 0 0;
}
.work .casestudies .project.torontostar .card-12:after {
  content: '';
  padding-bottom: 75%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.torontostar .card-13:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/torontostar-sprite.png");
  width: 100%;
  height: 0;
  padding: 71.55555555555554% 0 0 0;
}
.work .casestudies .project.torontostar .card-13:after {
  content: '';
  padding-bottom: 71.55555555555554%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.cbs {
  background: #d60005;
  min-height: 500px;
}
.work .casestudies .project.cbs .cbs-sprite {
  background-image: url("../images/cbs-sprite.png");
}
.work .casestudies .project.cbs a {
  color: #ff787b;
}
.work .casestudies .project.cbs .visit {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 300;
}
.work .casestudies .project.cbs .visit a {
  color: #ff4b4f;
  font-weight: 500;
  border-bottom: 1px solid #ff4b4f;
}
.work .casestudies .project.cbs .view {
  display: block;
  width: 72px;
  height: 72px;
  position: absolute;
  bottom: 48px;
  right: 48px;
  border: 1px solid #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.cbs .view:before {
  content: '\f06e';
  font-family: 'icon';
  font-size: 24px;
  font-size: 1.5rem;
  width: 100%;
  height: 100%;
  padding: 22px 0 0 0;
  text-align: center;
  line-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  text-shadow: none !important;
}
.work .casestudies .project.cbs .view:hover {
  background: #fff;
}
.work .casestudies .project.cbs .view:hover:before {
  color: #d60005;
}
.work .casestudies .project.cbs .card:after {
  background: rgba(214,0,5,0.9);
}
.work .casestudies .project.cbs .background:before {
  background-color: #d60005;
}
.work .casestudies .project.cbs .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #d60005;
  border-top: 1px solid #f40006;
  border-bottom: 1px solid #c10004;
}
.work .casestudies .project.cbs .card-1:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/cbs-sprite.png");
  width: 100%;
  height: 0;
  padding: 100% 0 0 0;
}
.work .casestudies .project.cbs .card-1:after {
  content: '';
  padding-bottom: 100%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.cbs .card-2:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/cbs-sprite.png");
  width: 100%;
  height: 0;
  padding: 75.6% 0 0 0;
}
.work .casestudies .project.cbs .card-2:after {
  content: '';
  padding-bottom: 75.6%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.cbs .card-3:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/cbs-sprite.png");
  width: 100%;
  height: 0;
  padding: 167.31843575418995% 0 0 0;
}
.work .casestudies .project.cbs .card-3:after {
  content: '';
  padding-bottom: 167.31843575418995%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.cbs .card-4:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/cbs-sprite.png");
  width: 100%;
  height: 0;
  padding: 75.4% 0 0 0;
}
.work .casestudies .project.cbs .card-4:after {
  content: '';
  padding-bottom: 75.4%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.dailychallenge {
  background: #ff8928;
  min-height: 500px;
}
.work .casestudies .project.dailychallenge .dailychallenge-sprite {
  background-image: url("../images/dailychallenge-sprite.png");
}
.work .casestudies .project.dailychallenge a {
  color: #ffc98a;
}
.work .casestudies .project.dailychallenge .visit {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 300;
}
.work .casestudies .project.dailychallenge .visit a {
  color: #ffb763;
  font-weight: 500;
  border-bottom: 1px solid #ffb763;
}
.work .casestudies .project.dailychallenge .view {
  display: block;
  width: 72px;
  height: 72px;
  position: absolute;
  bottom: 48px;
  right: 48px;
  border: 1px solid #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.dailychallenge .view:before {
  content: '\f06e';
  font-family: 'icon';
  font-size: 24px;
  font-size: 1.5rem;
  width: 100%;
  height: 100%;
  padding: 22px 0 0 0;
  text-align: center;
  line-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  text-shadow: none !important;
}
.work .casestudies .project.dailychallenge .view:hover {
  background: #fff;
}
.work .casestudies .project.dailychallenge .view:hover:before {
  color: #ff8928;
}
.work .casestudies .project.dailychallenge .card:after {
  background: rgba(255,137,40,0.9);
}
.work .casestudies .project.dailychallenge .background:before {
  background-color: #ff8928;
}
.work .casestudies .project.dailychallenge .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ff8928;
  border-top: 1px solid #ff953e;
  border-bottom: 1px solid #ff790a;
}
.work .casestudies .project.dailychallenge .card-1:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/dailychallenge-sprite.png");
  width: 100%;
  height: 0;
  padding: 65.2% 0 0 0;
}
.work .casestudies .project.dailychallenge .card-1:after {
  content: '';
  padding-bottom: 65.2%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.dailychallenge .card-2:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/dailychallenge-sprite.png");
  width: 100%;
  height: 0;
  padding: 75% 0 0 0;
}
.work .casestudies .project.dailychallenge .card-2:after {
  content: '';
  padding-bottom: 75%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.dailychallenge .card-3:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/dailychallenge-sprite.png");
  width: 100%;
  height: 0;
  padding: 75% 0 0 0;
}
.work .casestudies .project.dailychallenge .card-3:after {
  content: '';
  padding-bottom: 75%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.dailychallenge .card-4:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/dailychallenge-sprite.png");
  width: 100%;
  height: 0;
  padding: 75% 0 0 0;
}
.work .casestudies .project.dailychallenge .card-4:after {
  content: '';
  padding-bottom: 75%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.dailychallenge .card-5:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/dailychallenge-sprite.png");
  width: 100%;
  height: 0;
  padding: 75% 0 0 0;
}
.work .casestudies .project.dailychallenge .card-5:after {
  content: '';
  padding-bottom: 75%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.dailychallenge .card-6:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/dailychallenge-sprite.png");
  width: 100%;
  height: 0;
  padding: 75% 0 0 0;
}
.work .casestudies .project.dailychallenge .card-6:after {
  content: '';
  padding-bottom: 75%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.dailychallenge .card-7:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/dailychallenge-sprite.png");
  width: 100%;
  height: 0;
  padding: 75% 0 0 0;
}
.work .casestudies .project.dailychallenge .card-7:after {
  content: '';
  padding-bottom: 75%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.dealpage {
  background: #482d60;
  min-height: 500px;
}
.work .casestudies .project.dealpage .dealpage-sprite {
  background-image: url("../images/dealpage-sprite.png");
}
.work .casestudies .project.dealpage a {
  color: #876da1;
}
.work .casestudies .project.dealpage .visit {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 300;
}
.work .casestudies .project.dealpage .visit a {
  color: #5f4a73;
  font-weight: 500;
  border-bottom: 1px solid #5f4a73;
}
.work .casestudies .project.dealpage .view {
  display: block;
  width: 72px;
  height: 72px;
  position: absolute;
  bottom: 48px;
  right: 48px;
  border: 1px solid #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.dealpage .view:before {
  content: '\f06e';
  font-family: 'icon';
  font-size: 24px;
  font-size: 1.5rem;
  width: 100%;
  height: 100%;
  padding: 22px 0 0 0;
  text-align: center;
  line-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  text-shadow: none !important;
}
.work .casestudies .project.dealpage .view:hover {
  background: #fff;
}
.work .casestudies .project.dealpage .view:hover:before {
  color: #482d60;
}
.work .casestudies .project.dealpage .card:after {
  background: rgba(72,45,96,0.9);
}
.work .casestudies .project.dealpage .background:before {
  background-color: #482d60;
}
.work .casestudies .project.dealpage .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #482d60;
  border-top: 1px solid #5b3979;
  border-bottom: 1px solid #412956;
}
.work .casestudies .project.dealpage .card-1:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/dealpage-sprite.png");
  width: 100%;
  height: 0;
  padding: 58.703071672354945% 0 0 0;
}
.work .casestudies .project.dealpage .card-1:after {
  content: '';
  padding-bottom: 58.703071672354945%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.dealpage .card-2:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/dealpage-sprite.png");
  width: 100%;
  height: 0;
  padding: 55.94886922320551% 0 0 0;
}
.work .casestudies .project.dealpage .card-2:after {
  content: '';
  padding-bottom: 55.94886922320551%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.dealpage .card-3:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/dealpage-sprite.png");
  width: 100%;
  height: 0;
  padding: 72.76119402985076% 0 0 0;
}
.work .casestudies .project.dealpage .card-3:after {
  content: '';
  padding-bottom: 72.76119402985076%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.dealpage .card-4:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/dealpage-sprite.png");
  width: 100%;
  height: 0;
  padding: 69.29057337220603% 0 0 0;
}
.work .casestudies .project.dealpage .card-4:after {
  content: '';
  padding-bottom: 69.29057337220603%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.dealpage .card-5:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/dealpage-sprite.png");
  width: 100%;
  height: 0;
  padding: 67.58620689655173% 0 0 0;
}
.work .casestudies .project.dealpage .card-5:after {
  content: '';
  padding-bottom: 67.58620689655173%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.dealpage .card-6:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/dealpage-sprite.png");
  width: 100%;
  height: 0;
  padding: 135.546875% 0 0 0;
}
.work .casestudies .project.dealpage .card-6:after {
  content: '';
  padding-bottom: 135.546875%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.dealpage .background:before {
  opacity: 0.95;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
  filter: alpha(opacity=95);
}
.work .casestudies .project.ducati {
  background: #df0101;
  min-height: 500px;
}
.work .casestudies .project.ducati .ducati-sprite {
  background-image: url("../images/ducati-sprite.png");
}
.work .casestudies .project.ducati a {
  color: #f9f9f9;
}
.work .casestudies .project.ducati .visit {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 300;
}
.work .casestudies .project.ducati .visit a {
  color: #f7f7f7;
  font-weight: 500;
  border-bottom: 1px solid #f7f7f7;
}
.work .casestudies .project.ducati .view {
  display: block;
  width: 72px;
  height: 72px;
  position: absolute;
  bottom: 48px;
  right: 48px;
  border: 1px solid #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.ducati .view:before {
  content: '\f06e';
  font-family: 'icon';
  font-size: 24px;
  font-size: 1.5rem;
  width: 100%;
  height: 100%;
  padding: 22px 0 0 0;
  text-align: center;
  line-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  text-shadow: none !important;
}
.work .casestudies .project.ducati .view:hover {
  background: #fff;
}
.work .casestudies .project.ducati .view:hover:before {
  color: #df0101;
}
.work .casestudies .project.ducati .card:after {
  background: rgba(223,1,1,0.9);
}
.work .casestudies .project.ducati .background:before {
  background-color: #df0101;
}
.work .casestudies .project.ducati .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #df0101;
  border-top: 1px solid #fb0101;
  border-bottom: 1px solid #c90101;
}
.work .casestudies .project.ducati .card-1:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/ducati-sprite.png");
  width: 100%;
  height: 0;
  padding: 85.60311284046692% 0 0 0;
}
.work .casestudies .project.ducati .card-1:after {
  content: '';
  padding-bottom: 85.60311284046692%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.ducati .card-2:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/ducati-sprite.png");
  width: 100%;
  height: 0;
  padding: 79.55092221331195% 0 0 0;
}
.work .casestudies .project.ducati .card-2:after {
  content: '';
  padding-bottom: 79.55092221331195%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.ducati .card-3:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/ducati-sprite.png");
  width: 100%;
  height: 0;
  padding: 79.55092221331195% 0 0 0;
}
.work .casestudies .project.ducati .card-3:after {
  content: '';
  padding-bottom: 79.55092221331195%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.ducati .card-4:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/ducati-sprite.png");
  width: 100%;
  height: 0;
  padding: 79.55092221331195% 0 0 0;
}
.work .casestudies .project.ducati .card-4:after {
  content: '';
  padding-bottom: 79.55092221331195%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.flixel {
  background: #000;
  min-height: 500px;
}
.work .casestudies .project.flixel .flixel-sprite {
  background-image: url("../images/flixel-sprite.png");
}
.work .casestudies .project.flixel a {
  color: #fff;
}
.work .casestudies .project.flixel .visit {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 300;
}
.work .casestudies .project.flixel .visit a {
  color: #fff;
  font-weight: 500;
  border-bottom: 1px solid #fff;
}
.work .casestudies .project.flixel .view {
  display: block;
  width: 72px;
  height: 72px;
  position: absolute;
  bottom: 48px;
  right: 48px;
  border: 1px solid #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.flixel .view:before {
  content: '\f06e';
  font-family: 'icon';
  font-size: 24px;
  font-size: 1.5rem;
  width: 100%;
  height: 100%;
  padding: 22px 0 0 0;
  text-align: center;
  line-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  text-shadow: none !important;
}
.work .casestudies .project.flixel .view:hover {
  background: #fff;
}
.work .casestudies .project.flixel .view:hover:before {
  color: #000;
}
.work .casestudies .project.flixel .card:after {
  background: rgba(0,0,0,0.9);
}
.work .casestudies .project.flixel .background:before {
  background-color: #000;
}
.work .casestudies .project.flixel .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #000;
}
.work .casestudies .project.flixel .card-1:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/flixel-sprite.png");
  width: 100%;
  height: 0;
  padding: 186.81732580037664% 0 0 0;
}
.work .casestudies .project.flixel .card-1:after {
  content: '';
  padding-bottom: 186.81732580037664%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.flixel .card-2:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/flixel-sprite.png");
  width: 100%;
  height: 0;
  padding: 71.72812725958062% 0 0 0;
}
.work .casestudies .project.flixel .card-2:after {
  content: '';
  padding-bottom: 71.72812725958062%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.flixel .card-3:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/flixel-sprite.png");
  width: 100%;
  height: 0;
  padding: 71.72812725958062% 0 0 0;
}
.work .casestudies .project.flixel .card-3:after {
  content: '';
  padding-bottom: 71.72812725958062%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.flixel .card-4:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/flixel-sprite.png");
  width: 100%;
  height: 0;
  padding: 71.72812725958062% 0 0 0;
}
.work .casestudies .project.flixel .card-4:after {
  content: '';
  padding-bottom: 71.72812725958062%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.flixel .card-5:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/flixel-sprite.png");
  width: 100%;
  height: 0;
  padding: 172.22222222222223% 0 0 0;
}
.work .casestudies .project.flixel .card-5:after {
  content: '';
  padding-bottom: 172.22222222222223%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.flixel .card-6:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/flixel-sprite.png");
  width: 100%;
  height: 0;
  padding: 172.22222222222223% 0 0 0;
}
.work .casestudies .project.flixel .card-6:after {
  content: '';
  padding-bottom: 172.22222222222223%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.flixel .card-7:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/flixel-sprite.png");
  width: 100%;
  height: 0;
  padding: 172.22222222222223% 0 0 0;
}
.work .casestudies .project.flixel .card-7:after {
  content: '';
  padding-bottom: 172.22222222222223%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.flixel .card-8:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/flixel-sprite.png");
  width: 100%;
  height: 0;
  padding: 172.22222222222223% 0 0 0;
}
.work .casestudies .project.flixel .card-8:after {
  content: '';
  padding-bottom: 172.22222222222223%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.flixel .card-9:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/flixel-sprite.png");
  width: 100%;
  height: 0;
  padding: 88.88888888888889% 0 0 0;
}
.work .casestudies .project.flixel .card-9:after {
  content: '';
  padding-bottom: 88.88888888888889%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.flixel .card-10:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/flixel-sprite.png");
  width: 100%;
  height: 0;
  padding: 88.88888888888889% 0 0 0;
}
.work .casestudies .project.flixel .card-10:after {
  content: '';
  padding-bottom: 88.88888888888889%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.flixel .card-11:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/flixel-sprite.png");
  width: 100%;
  height: 0;
  padding: 157.7106518282989% 0 0 0;
}
.work .casestudies .project.flixel .card-11:after {
  content: '';
  padding-bottom: 157.7106518282989%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.flixel .card-12:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/flixel-sprite.png");
  width: 100%;
  height: 0;
  padding: 116.70588235294117% 0 0 0;
}
.work .casestudies .project.flixel .card-12:after {
  content: '';
  padding-bottom: 116.70588235294117%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.flixel .card-13:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/flixel-sprite.png");
  width: 100%;
  height: 0;
  padding: 174.64788732394365% 0 0 0;
}
.work .casestudies .project.flixel .card-13:after {
  content: '';
  padding-bottom: 174.64788732394365%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.flixel .card-14:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/flixel-sprite.png");
  width: 100%;
  height: 0;
  padding: 62.5% 0 0 0;
}
.work .casestudies .project.flixel .card-14:after {
  content: '';
  padding-bottom: 62.5%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.flixel .card-15:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/flixel-sprite.png");
  width: 100%;
  height: 0;
  padding: 83.99661303979678% 0 0 0;
}
.work .casestudies .project.flixel .card-15:after {
  content: '';
  padding-bottom: 83.99661303979678%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.flixel .card-16:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/flixel-sprite.png");
  width: 100%;
  height: 0;
  padding: 83.99661303979678% 0 0 0;
}
.work .casestudies .project.flixel .card-16:after {
  content: '';
  padding-bottom: 83.99661303979678%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.flixel .card-17:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/flixel-sprite.png");
  width: 100%;
  height: 0;
  padding: 83.99661303979678% 0 0 0;
}
.work .casestudies .project.flixel .card-17:after {
  content: '';
  padding-bottom: 83.99661303979678%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.flixel .card-18:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/flixel-sprite.png");
  width: 100%;
  height: 0;
  padding: 83.99661303979678% 0 0 0;
}
.work .casestudies .project.flixel .card-18:after {
  content: '';
  padding-bottom: 83.99661303979678%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.flixel .card-19:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/flixel-sprite.png");
  width: 100%;
  height: 0;
  padding: 186.81732580037664% 0 0 0;
}
.work .casestudies .project.flixel .card-19:after {
  content: '';
  padding-bottom: 186.81732580037664%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.flixel .background:before {
  opacity: 0.9;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=90);
}
.work .casestudies .project.foodtruckmarketing {
  background: #90c627;
  min-height: 500px;
}
.work .casestudies .project.foodtruckmarketing .foodtruckmarketing-sprite {
  background-image: url("../images/foodtruckmarketing-sprite.png");
}
.work .casestudies .project.foodtruckmarketing a {
  color: #d1ee98;
}
.work .casestudies .project.foodtruckmarketing .visit {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 300;
}
.work .casestudies .project.foodtruckmarketing .visit a {
  color: #c1e876;
  font-weight: 500;
  border-bottom: 1px solid #c1e876;
}
.work .casestudies .project.foodtruckmarketing .view {
  display: block;
  width: 72px;
  height: 72px;
  position: absolute;
  bottom: 48px;
  right: 48px;
  border: 1px solid #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.foodtruckmarketing .view:before {
  content: '\f06e';
  font-family: 'icon';
  font-size: 24px;
  font-size: 1.5rem;
  width: 100%;
  height: 100%;
  padding: 22px 0 0 0;
  text-align: center;
  line-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  text-shadow: none !important;
}
.work .casestudies .project.foodtruckmarketing .view:hover {
  background: #fff;
}
.work .casestudies .project.foodtruckmarketing .view:hover:before {
  color: #90c627;
}
.work .casestudies .project.foodtruckmarketing .card:after {
  background: rgba(144,198,39,0.9);
}
.work .casestudies .project.foodtruckmarketing .background:before {
  background-color: #90c627;
}
.work .casestudies .project.foodtruckmarketing .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #90c627;
  border-top: 1px solid #9fd732;
  border-bottom: 1px solid #82b223;
}
.work .casestudies .project.foodtruckmarketing .card-1:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/foodtruckmarketing-sprite.png");
  width: 100%;
  height: 0;
  padding: NaN% 0 0 0;
}
.work .casestudies .project.foodtruckmarketing .card-1:after {
  content: '';
  padding-bottom: NaN%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.foodtruckmarketing .card-2:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/foodtruckmarketing-sprite.png");
  width: 100%;
  height: 0;
  padding: NaN% 0 0 0;
}
.work .casestudies .project.foodtruckmarketing .card-2:after {
  content: '';
  padding-bottom: NaN%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.foodtruckmarketing .card-3:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/foodtruckmarketing-sprite.png");
  width: 100%;
  height: 0;
  padding: NaN% 0 0 0;
}
.work .casestudies .project.foodtruckmarketing .card-3:after {
  content: '';
  padding-bottom: NaN%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.foodtruckmarketing .card-4:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/foodtruckmarketing-sprite.png");
  width: 100%;
  height: 0;
  padding: NaN% 0 0 0;
}
.work .casestudies .project.foodtruckmarketing .card-4:after {
  content: '';
  padding-bottom: NaN%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.foodtruckmarketing .card-5:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/foodtruckmarketing-sprite.png");
  width: 100%;
  height: 0;
  padding: NaN% 0 0 0;
}
.work .casestudies .project.foodtruckmarketing .card-5:after {
  content: '';
  padding-bottom: NaN%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.foodtruckmarketing .card-6:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/foodtruckmarketing-sprite.png");
  width: 100%;
  height: 0;
  padding: NaN% 0 0 0;
}
.work .casestudies .project.foodtruckmarketing .card-6:after {
  content: '';
  padding-bottom: NaN%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.foodtruckmarketing .card-7:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/foodtruckmarketing-sprite.png");
  width: 100%;
  height: 0;
  padding: NaN% 0 0 0;
}
.work .casestudies .project.foodtruckmarketing .card-7:after {
  content: '';
  padding-bottom: NaN%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.foodtruckmarketing .card-8:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/foodtruckmarketing-sprite.png");
  width: 100%;
  height: 0;
  padding: NaN% 0 0 0;
}
.work .casestudies .project.foodtruckmarketing .card-8:after {
  content: '';
  padding-bottom: NaN%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.foodtruckmarketing .card-9:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/foodtruckmarketing-sprite.png");
  width: 100%;
  height: 0;
  padding: NaN% 0 0 0;
}
.work .casestudies .project.foodtruckmarketing .card-9:after {
  content: '';
  padding-bottom: NaN%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.foodtruckmarketing .card-10:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/foodtruckmarketing-sprite.png");
  width: 100%;
  height: 0;
  padding: NaN% 0 0 0;
}
.work .casestudies .project.foodtruckmarketing .card-10:after {
  content: '';
  padding-bottom: NaN%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.foodtruckmarketing .card-11:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/foodtruckmarketing-sprite.png");
  width: 100%;
  height: 0;
  padding: NaN% 0 0 0;
}
.work .casestudies .project.foodtruckmarketing .card-11:after {
  content: '';
  padding-bottom: NaN%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.foodtruckmarketing .card-12:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/foodtruckmarketing-sprite.png");
  width: 100%;
  height: 0;
  padding: NaN% 0 0 0;
}
.work .casestudies .project.foodtruckmarketing .card-12:after {
  content: '';
  padding-bottom: NaN%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.foodtruckmarketing .card-13:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/foodtruckmarketing-sprite.png");
  width: 100%;
  height: 0;
  padding: NaN% 0 0 0;
}
.work .casestudies .project.foodtruckmarketing .card-13:after {
  content: '';
  padding-bottom: NaN%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.foodtruckmarketing .card-14:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/foodtruckmarketing-sprite.png");
  width: 100%;
  height: 0;
  padding: NaN% 0 0 0;
}
.work .casestudies .project.foodtruckmarketing .card-14:after {
  content: '';
  padding-bottom: NaN%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.rebrief {
  background: #292931;
  min-height: 500px;
}
.work .casestudies .project.rebrief .rebrief-sprite {
  background-image: url("../images/rebrief-sprite.png");
}
.work .casestudies .project.rebrief a {
  color: #a3a7b0;
}
.work .casestudies .project.rebrief .visit {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 300;
}
.work .casestudies .project.rebrief .visit a {
  color: #848a96;
  font-weight: 500;
  border-bottom: 1px solid #848a96;
}
.work .casestudies .project.rebrief .view {
  display: block;
  width: 72px;
  height: 72px;
  position: absolute;
  bottom: 48px;
  right: 48px;
  border: 1px solid #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.rebrief .view:before {
  content: '\f06e';
  font-family: 'icon';
  font-size: 24px;
  font-size: 1.5rem;
  width: 100%;
  height: 100%;
  padding: 22px 0 0 0;
  text-align: center;
  line-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  text-shadow: none !important;
}
.work .casestudies .project.rebrief .view:hover {
  background: #fff;
}
.work .casestudies .project.rebrief .view:hover:before {
  color: #292931;
}
.work .casestudies .project.rebrief .card:after {
  background: rgba(41,41,49,0.9);
}
.work .casestudies .project.rebrief .background:before {
  background-color: #292931;
}
.work .casestudies .project.rebrief .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #292931;
  border-top: 1px solid #3c3c48;
  border-bottom: 1px solid #25252c;
}
.work .casestudies .project.rebrief .card-1:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/rebrief-sprite.png");
  width: 100%;
  height: 0;
  padding: 75% 0 0 0;
}
.work .casestudies .project.rebrief .card-1:after {
  content: '';
  padding-bottom: 75%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.rebrief .card-2:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/rebrief-sprite.png");
  width: 100%;
  height: 0;
  padding: 75% 0 0 0;
}
.work .casestudies .project.rebrief .card-2:after {
  content: '';
  padding-bottom: 75%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.rebrief .card-3:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/rebrief-sprite.png");
  width: 100%;
  height: 0;
  padding: 61.041990668740276% 0 0 0;
}
.work .casestudies .project.rebrief .card-3:after {
  content: '';
  padding-bottom: 61.041990668740276%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.rebrief .card-4:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/rebrief-sprite.png");
  width: 100%;
  height: 0;
  padding: 66.44736842105263% 0 0 0;
}
.work .casestudies .project.rebrief .card-4:after {
  content: '';
  padding-bottom: 66.44736842105263%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.rebrief .card-5:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/rebrief-sprite.png");
  width: 100%;
  height: 0;
  padding: 60.458452722063036% 0 0 0;
}
.work .casestudies .project.rebrief .card-5:after {
  content: '';
  padding-bottom: 60.458452722063036%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.rebrief .card-6:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/rebrief-sprite.png");
  width: 100%;
  height: 0;
  padding: 66.60000000000001% 0 0 0;
}
.work .casestudies .project.rebrief .card-6:after {
  content: '';
  padding-bottom: 66.60000000000001%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.rebrief .card-7:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/rebrief-sprite.png");
  width: 100%;
  height: 0;
  padding: 90.38854805725971% 0 0 0;
}
.work .casestudies .project.rebrief .card-7:after {
  content: '';
  padding-bottom: 90.38854805725971%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.rebrief .card-8:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/rebrief-sprite.png");
  width: 100%;
  height: 0;
  padding: 80.14256619144604% 0 0 0;
}
.work .casestudies .project.rebrief .card-8:after {
  content: '';
  padding-bottom: 80.14256619144604%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.thinkquarterly {
  background: #fff;
  min-height: 500px;
}
.work .casestudies .project.thinkquarterly .thinkquarterly-sprite {
  background-image: url("../images/thinkquarterly-sprite.png");
}
.work .casestudies .project.thinkquarterly a {
  color: #d9d9d9;
}
.work .casestudies .project.thinkquarterly .visit {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 300;
}
.work .casestudies .project.thinkquarterly .visit a {
  color: #ccc;
  font-weight: 500;
  border-bottom: 1px solid #ccc;
}
.work .casestudies .project.thinkquarterly .view {
  display: block;
  width: 72px;
  height: 72px;
  position: absolute;
  bottom: 48px;
  right: 48px;
  border: 1px solid #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.thinkquarterly .view:before {
  content: '\f06e';
  font-family: 'icon';
  font-size: 24px;
  font-size: 1.5rem;
  width: 100%;
  height: 100%;
  padding: 22px 0 0 0;
  text-align: center;
  line-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  text-shadow: none !important;
}
.work .casestudies .project.thinkquarterly .view:hover {
  background: #fff;
}
.work .casestudies .project.thinkquarterly .view:hover:before {
  color: #fff;
}
.work .casestudies .project.thinkquarterly .card:after {
  background: rgba(255,255,255,0.9);
}
.work .casestudies .project.thinkquarterly .background:before {
  background-color: #fff;
}
.work .casestudies .project.thinkquarterly .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #e6e6e6;
}
.work .casestudies .project.thinkquarterly .card-1:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/thinkquarterly-sprite.png");
  width: 100%;
  height: 0;
  padding: 54.54545454545454% 0 0 0;
}
.work .casestudies .project.thinkquarterly .card-1:after {
  content: '';
  padding-bottom: 54.54545454545454%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.thinkquarterly .card-2:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/thinkquarterly-sprite.png");
  width: 100%;
  height: 0;
  padding: 77.24137931034483% 0 0 0;
}
.work .casestudies .project.thinkquarterly .card-2:after {
  content: '';
  padding-bottom: 77.24137931034483%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.thinkquarterly .card-3:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/thinkquarterly-sprite.png");
  width: 100%;
  height: 0;
  padding: 55.92105263157895% 0 0 0;
}
.work .casestudies .project.thinkquarterly .card-3:after {
  content: '';
  padding-bottom: 55.92105263157895%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.thinkquarterly .card-4:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/thinkquarterly-sprite.png");
  width: 100%;
  height: 0;
  padding: 49.34210526315789% 0 0 0;
}
.work .casestudies .project.thinkquarterly .card-4:after {
  content: '';
  padding-bottom: 49.34210526315789%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.holtrenfrew {
  background: #fb7fe1;
  min-height: 500px;
}
.work .casestudies .project.holtrenfrew .holtrenfrew-sprite {
  background-image: url("../images/holtrenfrew-sprite.png");
}
.work .casestudies .project.holtrenfrew a {
  color: #a47381;
}
.work .casestudies .project.holtrenfrew .visit {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 300;
}
.work .casestudies .project.holtrenfrew .visit a {
  color: #7a505c;
  font-weight: 500;
  border-bottom: 1px solid #7a505c;
}
.work .casestudies .project.holtrenfrew .view {
  display: block;
  width: 72px;
  height: 72px;
  position: absolute;
  bottom: 48px;
  right: 48px;
  border: 1px solid #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.holtrenfrew .view:before {
  content: '\f06e';
  font-family: 'icon';
  font-size: 24px;
  font-size: 1.5rem;
  width: 100%;
  height: 100%;
  padding: 22px 0 0 0;
  text-align: center;
  line-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  text-shadow: none !important;
}
.work .casestudies .project.holtrenfrew .view:hover {
  background: #fff;
}
.work .casestudies .project.holtrenfrew .view:hover:before {
  color: #fb7fe1;
}
.work .casestudies .project.holtrenfrew .card:after {
  background: rgba(251,127,225,0.9);
}
.work .casestudies .project.holtrenfrew .background:before {
  background-color: #fb7fe1;
}
.work .casestudies .project.holtrenfrew .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fb7fe1;
  border-top: 1px solid #fb8ce4;
  border-bottom: 1px solid #fa5ad8;
}
.work .casestudies .project.holtrenfrew .card-1:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/holtrenfrew-sprite.png");
  width: 100%;
  height: 0;
  padding: 66.55629139072848% 0 0 0;
}
.work .casestudies .project.holtrenfrew .card-1:after {
  content: '';
  padding-bottom: 66.55629139072848%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.holtrenfrew .card-2:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/holtrenfrew-sprite.png");
  width: 100%;
  height: 0;
  padding: 150.24875621890547% 0 0 0;
}
.work .casestudies .project.holtrenfrew .card-2:after {
  content: '';
  padding-bottom: 150.24875621890547%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.holtrenfrew .card-3:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/holtrenfrew-sprite.png");
  width: 100%;
  height: 0;
  padding: 66.66666666666666% 0 0 0;
}
.work .casestudies .project.holtrenfrew .card-3:after {
  content: '';
  padding-bottom: 66.66666666666666%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.holtrenfrew .card-4:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/holtrenfrew-sprite.png");
  width: 100%;
  height: 0;
  padding: 75% 0 0 0;
}
.work .casestudies .project.holtrenfrew .card-4:after {
  content: '';
  padding-bottom: 75%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.holtrenfrew .card-5:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/holtrenfrew-sprite.png");
  width: 100%;
  height: 0;
  padding: 66.55629139072848% 0 0 0;
}
.work .casestudies .project.holtrenfrew .card-5:after {
  content: '';
  padding-bottom: 66.55629139072848%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.holtrenfrew .card-6:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/holtrenfrew-sprite.png");
  width: 100%;
  height: 0;
  padding: 75% 0 0 0;
}
.work .casestudies .project.holtrenfrew .card-6:after {
  content: '';
  padding-bottom: 75%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.jqueryto {
  background: #405262;
  min-height: 500px;
}
.work .casestudies .project.jqueryto .jqueryto-sprite {
  background-image: url("../images/jqueryto-sprite.png");
}
.work .casestudies .project.jqueryto a {
  color: #a5bed3;
}
.work .casestudies .project.jqueryto .visit {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 300;
}
.work .casestudies .project.jqueryto .visit a {
  color: #87a8c4;
  font-weight: 500;
  border-bottom: 1px solid #87a8c4;
}
.work .casestudies .project.jqueryto .view {
  display: block;
  width: 72px;
  height: 72px;
  position: absolute;
  bottom: 48px;
  right: 48px;
  border: 1px solid #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.jqueryto .view:before {
  content: '\f06e';
  font-family: 'icon';
  font-size: 24px;
  font-size: 1.5rem;
  width: 100%;
  height: 100%;
  padding: 22px 0 0 0;
  text-align: center;
  line-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  text-shadow: none !important;
}
.work .casestudies .project.jqueryto .view:hover {
  background: #fff;
}
.work .casestudies .project.jqueryto .view:hover:before {
  color: #405262;
}
.work .casestudies .project.jqueryto .card:after {
  background: rgba(64,82,98,0.9);
}
.work .casestudies .project.jqueryto .background:before {
  background-color: #405262;
}
.work .casestudies .project.jqueryto .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #405262;
  border-top: 1px solid #4e6477;
  border-bottom: 1px solid #3a4a58;
}
.work .casestudies .project.jqueryto .card-1:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/jqueryto-sprite.png");
  width: 100%;
  height: 0;
  padding: 75% 0 0 0;
}
.work .casestudies .project.jqueryto .card-1:after {
  content: '';
  padding-bottom: 75%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.jqueryto .card-2:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/jqueryto-sprite.png");
  width: 100%;
  height: 0;
  padding: 73.26440177252584% 0 0 0;
}
.work .casestudies .project.jqueryto .card-2:after {
  content: '';
  padding-bottom: 73.26440177252584%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.jqueryto .card-3:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/jqueryto-sprite.png");
  width: 100%;
  height: 0;
  padding: 73.26440177252584% 0 0 0;
}
.work .casestudies .project.jqueryto .card-3:after {
  content: '';
  padding-bottom: 73.26440177252584%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.jqueryto .card-4:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/jqueryto-sprite.png");
  width: 100%;
  height: 0;
  padding: 73.26440177252584% 0 0 0;
}
.work .casestudies .project.jqueryto .card-4:after {
  content: '';
  padding-bottom: 73.26440177252584%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.jqueryto .card-5:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/jqueryto-sprite.png");
  width: 100%;
  height: 0;
  padding: 73.26440177252584% 0 0 0;
}
.work .casestudies .project.jqueryto .card-5:after {
  content: '';
  padding-bottom: 73.26440177252584%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.jqueryto .card-6:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/jqueryto-sprite.png");
  width: 100%;
  height: 0;
  padding: 73.26440177252584% 0 0 0;
}
.work .casestudies .project.jqueryto .card-6:after {
  content: '';
  padding-bottom: 73.26440177252584%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.jqueryto .card-7:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/jqueryto-sprite.png");
  width: 100%;
  height: 0;
  padding: 73.26440177252584% 0 0 0;
}
.work .casestudies .project.jqueryto .card-7:after {
  content: '';
  padding-bottom: 73.26440177252584%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.jqueryto .card-8:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/jqueryto-sprite.png");
  width: 100%;
  height: 0;
  padding: 73.26440177252584% 0 0 0;
}
.work .casestudies .project.jqueryto .card-8:after {
  content: '';
  padding-bottom: 73.26440177252584%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.jqueryto .card-9:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/jqueryto-sprite.png");
  width: 100%;
  height: 0;
  padding: 73.26440177252584% 0 0 0;
}
.work .casestudies .project.jqueryto .card-9:after {
  content: '';
  padding-bottom: 73.26440177252584%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.jqueryto .card-10:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/jqueryto-sprite.png");
  width: 100%;
  height: 0;
  padding: 73.26440177252584% 0 0 0;
}
.work .casestudies .project.jqueryto .card-10:after {
  content: '';
  padding-bottom: 73.26440177252584%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.jqueryto .card-11:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/jqueryto-sprite.png");
  width: 100%;
  height: 0;
  padding: 73.26440177252584% 0 0 0;
}
.work .casestudies .project.jqueryto .card-11:after {
  content: '';
  padding-bottom: 73.26440177252584%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.jqueryto .card-12:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/jqueryto-sprite.png");
  width: 100%;
  height: 0;
  padding: 73.26440177252584% 0 0 0;
}
.work .casestudies .project.jqueryto .card-12:after {
  content: '';
  padding-bottom: 73.26440177252584%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.jqueryto .card-13:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/jqueryto-sprite.png");
  width: 100%;
  height: 0;
  padding: 73.26440177252584% 0 0 0;
}
.work .casestudies .project.jqueryto .card-13:after {
  content: '';
  padding-bottom: 73.26440177252584%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.jqueryto .card-14:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/jqueryto-sprite.png");
  width: 100%;
  height: 0;
  padding: 73.26440177252584% 0 0 0;
}
.work .casestudies .project.jqueryto .card-14:after {
  content: '';
  padding-bottom: 73.26440177252584%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.jqueryto .card-15:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/jqueryto-sprite.png");
  width: 100%;
  height: 0;
  padding: 73.26440177252584% 0 0 0;
}
.work .casestudies .project.jqueryto .card-15:after {
  content: '';
  padding-bottom: 73.26440177252584%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.jqueryto .background:before {
  opacity: 0.95;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
  filter: alpha(opacity=95);
}
.work .casestudies .project.mycitylives {
  background: #ed087c;
  min-height: 500px;
}
.work .casestudies .project.mycitylives .mycitylives-sprite {
  background-image: url("../images/mycitylives-sprite.png");
}
.work .casestudies .project.mycitylives a {
  color: #ffa2d1;
}
.work .casestudies .project.mycitylives .visit {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 300;
}
.work .casestudies .project.mycitylives .visit a {
  color: #ff83c2;
  font-weight: 500;
  border-bottom: 1px solid #ff83c2;
}
.work .casestudies .project.mycitylives .view {
  display: block;
  width: 72px;
  height: 72px;
  position: absolute;
  bottom: 48px;
  right: 48px;
  border: 1px solid #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.mycitylives .view:before {
  content: '\f06e';
  font-family: 'icon';
  font-size: 24px;
  font-size: 1.5rem;
  width: 100%;
  height: 100%;
  padding: 22px 0 0 0;
  text-align: center;
  line-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  text-shadow: none !important;
}
.work .casestudies .project.mycitylives .view:hover {
  background: #fff;
}
.work .casestudies .project.mycitylives .view:hover:before {
  color: #ed087c;
}
.work .casestudies .project.mycitylives .card:after {
  background: rgba(237,8,124,0.9);
}
.work .casestudies .project.mycitylives .background:before {
  background-color: #ed087c;
}
.work .casestudies .project.mycitylives .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ed087c;
  border-top: 1px solid #f71889;
  border-bottom: 1px solid #d50770;
}
.work .casestudies .project.mycitylives .card-1:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/mycitylives-sprite.png");
  width: 100%;
  height: 0;
  padding: 70.50847457627118% 0 0 0;
}
.work .casestudies .project.mycitylives .card-1:after {
  content: '';
  padding-bottom: 70.50847457627118%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.nike {
  background: #000;
  min-height: 500px;
}
.work .casestudies .project.nike .nike-sprite {
  background-image: url("../images/nike-sprite.png");
}
.work .casestudies .project.nike a {
  color: #fff;
}
.work .casestudies .project.nike .visit {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 300;
}
.work .casestudies .project.nike .visit a {
  color: #fff;
  font-weight: 500;
  border-bottom: 1px solid #fff;
}
.work .casestudies .project.nike .view {
  display: block;
  width: 72px;
  height: 72px;
  position: absolute;
  bottom: 48px;
  right: 48px;
  border: 1px solid #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.nike .view:before {
  content: '\f06e';
  font-family: 'icon';
  font-size: 24px;
  font-size: 1.5rem;
  width: 100%;
  height: 100%;
  padding: 22px 0 0 0;
  text-align: center;
  line-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  text-shadow: none !important;
}
.work .casestudies .project.nike .view:hover {
  background: #fff;
}
.work .casestudies .project.nike .view:hover:before {
  color: #000;
}
.work .casestudies .project.nike .card:after {
  background: rgba(0,0,0,0.9);
}
.work .casestudies .project.nike .background:before {
  background-color: #000;
}
.work .casestudies .project.nike .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #000;
}
.work .casestudies .project.nike .card-1:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/nike-sprite.png");
  width: 100%;
  height: 0;
  padding: 71.72812725958062% 0 0 0;
}
.work .casestudies .project.nike .card-1:after {
  content: '';
  padding-bottom: 71.72812725958062%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.nike .card-2:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/nike-sprite.png");
  width: 100%;
  height: 0;
  padding: 71.72812725958062% 0 0 0;
}
.work .casestudies .project.nike .card-2:after {
  content: '';
  padding-bottom: 71.72812725958062%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.nike .card-3:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/nike-sprite.png");
  width: 100%;
  height: 0;
  padding: 71.72812725958062% 0 0 0;
}
.work .casestudies .project.nike .card-3:after {
  content: '';
  padding-bottom: 71.72812725958062%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.redbull {
  background: #062250;
  min-height: 500px;
}
.work .casestudies .project.redbull .redbull-sprite {
  background-image: url("../images/redbull-sprite.png");
}
.work .casestudies .project.redbull a {
  color: #4e99e3;
}
.work .casestudies .project.redbull .visit {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 300;
}
.work .casestudies .project.redbull .visit a {
  color: #2077cd;
  font-weight: 500;
  border-bottom: 1px solid #2077cd;
}
.work .casestudies .project.redbull .view {
  display: block;
  width: 72px;
  height: 72px;
  position: absolute;
  bottom: 48px;
  right: 48px;
  border: 1px solid #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.redbull .view:before {
  content: '\f06e';
  font-family: 'icon';
  font-size: 24px;
  font-size: 1.5rem;
  width: 100%;
  height: 100%;
  padding: 22px 0 0 0;
  text-align: center;
  line-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  text-shadow: none !important;
}
.work .casestudies .project.redbull .view:hover {
  background: #fff;
}
.work .casestudies .project.redbull .view:hover:before {
  color: #062250;
}
.work .casestudies .project.redbull .card:after {
  background: rgba(6,34,80,0.9);
}
.work .casestudies .project.redbull .background:before {
  background-color: #062250;
}
.work .casestudies .project.redbull .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #062250;
  border-top: 1px solid #093377;
  border-bottom: 1px solid #051f48;
}
.work .casestudies .project.redbull .card-1:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/redbull-sprite.png");
  width: 100%;
  height: 0;
  padding: 48.811410459587954% 0 0 0;
}
.work .casestudies .project.redbull .card-1:after {
  content: '';
  padding-bottom: 48.811410459587954%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.redbull .card-2:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/redbull-sprite.png");
  width: 100%;
  height: 0;
  padding: 61.70382165605095% 0 0 0;
}
.work .casestudies .project.redbull .card-2:after {
  content: '';
  padding-bottom: 61.70382165605095%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.redbull .card-3:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/redbull-sprite.png");
  width: 100%;
  height: 0;
  padding: 61.780929866036246% 0 0 0;
}
.work .casestudies .project.redbull .card-3:after {
  content: '';
  padding-bottom: 61.780929866036246%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.redbull .card-4:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/redbull-sprite.png");
  width: 100%;
  height: 0;
  padding: 71.72812725958062% 0 0 0;
}
.work .casestudies .project.redbull .card-4:after {
  content: '';
  padding-bottom: 71.72812725958062%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.redbull .card-5:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/redbull-sprite.png");
  width: 100%;
  height: 0;
  padding: 71.72812725958062% 0 0 0;
}
.work .casestudies .project.redbull .card-5:after {
  content: '';
  padding-bottom: 71.72812725958062%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.redbull .card-6:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/redbull-sprite.png");
  width: 100%;
  height: 0;
  padding: 71.72812725958062% 0 0 0;
}
.work .casestudies .project.redbull .card-6:after {
  content: '';
  padding-bottom: 71.72812725958062%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.redbull .card-7:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/redbull-sprite.png");
  width: 100%;
  height: 0;
  padding: 71.72812725958062% 0 0 0;
}
.work .casestudies .project.redbull .card-7:after {
  content: '';
  padding-bottom: 71.72812725958062%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.themify {
  background: #ffca08;
  min-height: 500px;
}
.work .casestudies .project.themify .themify-sprite {
  background-image: url("../images/themify-sprite.png");
}
.work .casestudies .project.themify a {
  color: #404040;
}
.work .casestudies .project.themify .visit {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 300;
}
.work .casestudies .project.themify .visit a {
  color: #000;
  font-weight: 500;
  border-bottom: 1px solid #000;
}
.work .casestudies .project.themify .view {
  display: block;
  width: 72px;
  height: 72px;
  position: absolute;
  bottom: 48px;
  right: 48px;
  border: 1px solid #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.themify .view:before {
  content: '\f06e';
  font-family: 'icon';
  font-size: 24px;
  font-size: 1.5rem;
  width: 100%;
  height: 100%;
  padding: 22px 0 0 0;
  text-align: center;
  line-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  text-shadow: none !important;
}
.work .casestudies .project.themify .view:hover {
  background: #fff;
}
.work .casestudies .project.themify .view:hover:before {
  color: #ffca08;
}
.work .casestudies .project.themify .card:after {
  background: rgba(255,202,8,0.9);
}
.work .casestudies .project.themify .background:before {
  background-color: #ffca08;
}
.work .casestudies .project.themify .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffca08;
  border-top: 1px solid #ffcf21;
  border-bottom: 1px solid #edba00;
}
.work .casestudies .project.themify .card-1:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/themify-sprite.png");
  width: 100%;
  height: 0;
  padding: 59% 0 0 0;
}
.work .casestudies .project.themify .card-1:after {
  content: '';
  padding-bottom: 59%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.themify .card-2:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/themify-sprite.png");
  width: 100%;
  height: 0;
  padding: 100% 0 0 0;
}
.work .casestudies .project.themify .card-2:after {
  content: '';
  padding-bottom: 100%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.themify .card-3:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/themify-sprite.png");
  width: 100%;
  height: 0;
  padding: 60% 0 0 0;
}
.work .casestudies .project.themify .card-3:after {
  content: '';
  padding-bottom: 60%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.themify .card-4:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/themify-sprite.png");
  width: 100%;
  height: 0;
  padding: 286.55172413793105% 0 0 0;
}
.work .casestudies .project.themify .card-4:after {
  content: '';
  padding-bottom: 286.55172413793105%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.themify .card-5:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/themify-sprite.png");
  width: 100%;
  height: 0;
  padding: 84.98942917547568% 0 0 0;
}
.work .casestudies .project.themify .card-5:after {
  content: '';
  padding-bottom: 84.98942917547568%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.themify .card-6:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/themify-sprite.png");
  width: 100%;
  height: 0;
  padding: 73.26440177252584% 0 0 0;
}
.work .casestudies .project.themify .card-6:after {
  content: '';
  padding-bottom: 73.26440177252584%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.themify .card-7:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/themify-sprite.png");
  width: 100%;
  height: 0;
  padding: 68.9367616400278% 0 0 0;
}
.work .casestudies .project.themify .card-7:after {
  content: '';
  padding-bottom: 68.9367616400278%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.themify .card-8:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/themify-sprite.png");
  width: 100%;
  height: 0;
  padding: 73.26440177252584% 0 0 0;
}
.work .casestudies .project.themify .card-8:after {
  content: '';
  padding-bottom: 73.26440177252584%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.themify .card-9:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/themify-sprite.png");
  width: 100%;
  height: 0;
  padding: 55.62130177514793% 0 0 0;
}
.work .casestudies .project.themify .card-9:after {
  content: '';
  padding-bottom: 55.62130177514793%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.themify .card-10:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/themify-sprite.png");
  width: 100%;
  height: 0;
  padding: 61.40215716486903% 0 0 0;
}
.work .casestudies .project.themify .card-10:after {
  content: '';
  padding-bottom: 61.40215716486903%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.themify .card-11:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/themify-sprite.png");
  width: 100%;
  height: 0;
  padding: 100% 0 0 0;
}
.work .casestudies .project.themify .card-11:after {
  content: '';
  padding-bottom: 100%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.themify .card-12:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/themify-sprite.png");
  width: 100%;
  height: 0;
  padding: 207.09812108559498% 0 0 0;
}
.work .casestudies .project.themify .card-12:after {
  content: '';
  padding-bottom: 207.09812108559498%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.themify .card-13:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/themify-sprite.png");
  width: 100%;
  height: 0;
  padding: 79.44954128440367% 0 0 0;
}
.work .casestudies .project.themify .card-13:after {
  content: '';
  padding-bottom: 79.44954128440367%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.themify .card-14:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/themify-sprite.png");
  width: 100%;
  height: 0;
  padding: 45.83333333333333% 0 0 0;
}
.work .casestudies .project.themify .card-14:after {
  content: '';
  padding-bottom: 45.83333333333333%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.themify .card-15:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/themify-sprite.png");
  width: 100%;
  height: 0;
  padding: 150.72164948453607% 0 0 0;
}
.work .casestudies .project.themify .card-15:after {
  content: '';
  padding-bottom: 150.72164948453607%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.themify .card-16:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/themify-sprite.png");
  width: 100%;
  height: 0;
  padding: 46.15384615384615% 0 0 0;
}
.work .casestudies .project.themify .card-16:after {
  content: '';
  padding-bottom: 46.15384615384615%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.themify .card-17:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/themify-sprite.png");
  width: 100%;
  height: 0;
  padding: 76.66666666666667% 0 0 0;
}
.work .casestudies .project.themify .card-17:after {
  content: '';
  padding-bottom: 76.66666666666667%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.themify .card-18:before {
  content: '';
  position: absolute;
  background-image: url("../images/work/themify-sprite.png");
  width: 100%;
  height: 0;
  padding: 100% 0 0 0;
}
.work .casestudies .project.themify .card-18:after {
  content: '';
  padding-bottom: 100%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.work .casestudies .project.themify * {
  color: #000 !important;
}
.work .casestudies .project.themify .logo {
  font-weight: 500;
}
.work .casestudies .project.themify .logo:after {
  background: #000;
}
.work .casestudies .project.themify .view {
  border-color: #000;
}
.work .casestudies .project.themify .view:before {
  color: #000;
}
.work .casestudies .project.themify .view:hover {
  background: #000;
}
.articles {
  margin: 0 auto;
  padding: 0;
}
.articles .nav.categories {
  border-bottom: 1px solid #eaeaea;
  position: relative;
  width: 100%;
}
.articles .hero {
  border-bottom: 1px solid #eaeaea;
  padding: 48px;
  color: #949494;
}
@media screen and (max-width: 700px) {
  .articles .hero {
    padding: 48px 24px;
  }
}
@media screen and (max-width: 500px) {
  .articles .hero {
    padding: 24px;
  }
  .articles .hero .title {
    color: #333;
    font-size: 20px;
    font-size: 1.25rem;
  }
}
.articles .title {
  padding: 0;
  margin: 0;
  font-weight: 300;
}
.articles .listing {
  width: 100%;
}
.articles .listing .item {
  width: 33.3333333%;
  float: left;
  display: block;
  border: 1px solid #eaeaea;
  border-left: none;
  border-top: none;
  position: relative;
  overflow: hidden;
  -webkit-transition: border 0.3s;
  -moz-transition: border 0.3s;
  -o-transition: border 0.3s;
  -ms-transition: border 0.3s;
  transition: border 0.3s;
}
.articles .listing .item:hover {
  border-bottom-color: #ffd200;
}
.articles .listing .item:hover .more {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.articles .listing .item:hover .inner .center .date,
.articles .listing .item:hover .inner .center .title {
  color: #282828;
}
.articles .listing .item .more {
  padding: 6px 24px 6px 24px;
  border-bottom: 4px solid #ffd200;
  font-family: 'Merriweather', Georgia, serif;
  font-size: 11px;
  font-size: 0.6875rem;
  position: absolute;
  display: block;
  width: 100%;
  text-align: right;
  bottom: -24px;
  right: 0;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transform: translate3d(0, 24px, 0);
  -moz-transform: translate3d(0, 24px, 0);
  -o-transform: translate3d(0, 24px, 0);
  -ms-transform: translate3d(0, 24px, 0);
  transform: translate3d(0, 24px, 0);
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  -ms-transition: color 0.3s;
  transition: color 0.3s;
}
.articles .listing .item .background {
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 0;
  padding: 0 0 56.25% 0;
  position: relative;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.articles .listing .item .inner {
  position: absolute;
  width: 90%;
  height: 60%;
  top: 20%;
  left: 5%;
}
.articles .listing .item .inner .center {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  padding: 24px;
}
.articles .listing .item .inner .center .date {
  color: #999;
  font-size: 12px;
  font-size: 0.75rem;
  margin: 0;
  line-height: 100%;
  -webkit-transition: font-size 0.5s;
  -moz-transition: font-size 0.5s;
  -o-transition: font-size 0.5s;
  -ms-transition: font-size 0.5s;
  transition: font-size 0.5s;
}
.articles .listing .item .inner .center .title {
  margin-bottom: 12px;
  font-size: 24px;
  font-size: 1.5rem;
  font-weight: 300;
  color: #949494;
  -webkit-transition: font-size 0.5s, line-height 0.5s;
  -moz-transition: font-size 0.5s, line-height 0.5s;
  -o-transition: font-size 0.5s, line-height 0.5s;
  -ms-transition: font-size 0.5s, line-height 0.5s;
  transition: font-size 0.5s, line-height 0.5s;
  font-family: 'Merriweather', Georgia, serif;
}
@media screen and (max-width: 1000px) {
  .articles .listing .item {
    width: 50%;
  }
}
@media screen and (max-width: 700px) {
  .articles .listing .item .more {
    color: transparent;
  }
  .articles .listing .item .inner .center .date {
    font-size: 11px;
    font-size: 0.6875rem;
  }
  .articles .listing .item .inner .center .title {
    font-size: 16px;
    font-size: 1rem;
    line-height: 160%;
  }
}
@media screen and (max-width: 500px) {
  .articles .listing .item {
    width: 100%;
    height: auto;
  }
  .articles .listing .item .background {
    display: none;
  }
  .articles .listing .item .inner {
    position: relative;
    width: 100%;
    left: 0;
  }
  .articles .listing .item .inner .center {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.articles .pagination {
  clear: both;
}
.article {
  margin: 0 auto;
  padding: 0;
}
.article .content {
  padding: 48px;
  font-family: 'Merriweather', Georgia, serif;
}
.article .content .title {
  font-size: 42px;
  font-size: 2.625rem;
  font-weight: 400;
  line-height: 130%;
  text-shadow: 0 0 1px rgba(0,0,0,0.01);
  max-width: 700px;
  margin: 0 auto 12px;
  width: 100%;
}
.article .content .date {
  max-width: 700px;
  margin: 0 auto 6px;
  color: #999;
  font-size: 12px;
  font-size: 0.75rem;
  font-family: 'Helvetica Neue', sans-serif;
}
.article .content .category {
  color: #999;
  max-width: 700px;
  margin: 0 auto 24px;
}
.article .content .category .name {
  font-style: italic;
}
.article .content hr {
  background: #eaeaea;
  border: 0;
  outline: none;
  height: 1px;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
.article .content .body {
  padding-top: 24px;
  margin: 0 auto;
  text-wrap: balanced;
}
.article .content .body > * {
  margin: 0 auto 24px;
  max-width: 700px;
}
.article .content .body blockquote {
  font-size: 24px;
  font-size: 1.5rem;
  color: #c9c9c9;
}
.article .content .body blockquote:before,
.article .content .body blockquote:after {
  margin: 0 4px;
}
.article .content .body blockquote:before {
  content: '“';
}
.article .content .body blockquote:after {
  content: '”';
}
.article .content .body i {
  font-style: italic;
}
.article .content .body hr {
  margin: 0 auto 24px;
}
.article .content .body a {
  text-decoration: underline;
  color: #000;
  text-decoration: none;
  text-shadow: 0.03em 0 #fff, -0.03em 0 #fff, 0 0.03em #fff, 0 -0.03em #fff, 0.06em 0 #fff, -0.06em 0 #fff, 0.09em 0 #fff, -0.09em 0 #fff, 0.12em 0 #fff, -0.12em 0 #fff, 0.15em 0 #fff, -0.15em 0 #fff;
  background-image: -webkit-linear-gradient(#fff, #fff), -webkit-linear-gradient(#fff, #fff), -webkit-linear-gradient(#000, #000);
  background-image: -moz-linear-gradient(#fff, #fff), -moz-linear-gradient(#fff, #fff), -moz-linear-gradient(#000, #000);
  background-image: -o-linear-gradient(#fff, #fff), -o-linear-gradient(#fff, #fff), -o-linear-gradient(#000, #000);
  background-image: -ms-linear-gradient(#fff, #fff), -ms-linear-gradient(#fff, #fff), -ms-linear-gradient(#000, #000);
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#000, #000);
  -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: 0% 90%, 100% 90%, 0% 90%;
}
.article .content .body a::selection {
  text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
  background: #b4d5fe;
}
.article .content .body a::-moz-selection {
  text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
  background: #b4d5fe;
}
.article .content .body a:before,
.article .content .body a:after,
.article .content .body a *,
.article .content .body a *:before,
.article .content .body a *:after {
  text-shadow: none;
}
.article .content .body a:visited {
  color: #000;
}
.article .content .body ul li {
  margin: 0 0 0 24px;
}
.article .content .body h1,
.article .content .body h2,
.article .content .body h3,
.article .content .body h4,
.article .content .body h5 {
  font-weight: 100;
  max-width: 700px;
  margin: 0 auto 12px;
}
.article .content .body h3 {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 auto 5px;
}
.article .content .body .image,
.article .content .body .video {
  width: calc(100% + 96px);
  max-width: calc(100% + 96px);
  margin: 48px 0 48px -48px;
  height: 0;
  padding: 33.333333% 0 0 0;
  background-color: #282828;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
}
.article .content .body .image iframe,
.article .content .body .video iframe,
.article .content .body .image object,
.article .content .body .video object {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
}
.article .content .body .image:after,
.article .content .body .video:after {
  content: '';
  width: 100%;
  height: 5px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.15), rgba(0,0,0,0));
  background: -moz-linear-gradient(bottom, rgba(0,0,0,0.15), rgba(0,0,0,0));
  background: -o-linear-gradient(bottom, rgba(0,0,0,0.15), rgba(0,0,0,0));
  background: -ms-linear-gradient(bottom, rgba(0,0,0,0.15), rgba(0,0,0,0));
  background: linear-gradient(to top, rgba(0,0,0,0.15), rgba(0,0,0,0));
}
.article .content .body .image .text,
.article .content .body .video .text {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #fff;
  text-align: right;
  font-size: 12px;
  font-size: 0.75rem;
  font-family: Helvetica, sans-serif;
  padding: 5px 24px;
  margin: 0 48px;
  background: rgba(0,0,0,0.8);
}
.article .content .body .video {
  padding: calc(56.25% + 54px) 0 0 0;
}
@media screen and (max-width: 600px) {
  .article .content .title {
    font-size: 30px;
    font-size: 1.875rem;
  }
}
@media screen and (max-width: 420px) {
  .article .content {
    padding: 24px;
  }
  .article .content .title {
    font-size: 24px;
    font-size: 1.5rem;
  }
}
.about {
  padding: 0;
}
.about section {
  padding: 24px;
}
.about .nav.categories {
  border-bottom: 1px solid #eaeaea;
}
.about .nav.categories li a {
  padding: 24px 16px;
}
@media screen and (max-width: 600px) {
  .about .nav.categories {
    padding: 0;
    text-align: center;
  }
  .about .nav.categories .sublist li a {
    font-size: 12px;
    font-size: 0.75rem;
    padding: 24px 10px;
  }
}
.about .hero .nav.slideshow {
  position: absolute;
  padding-right: 48px;
  bottom: 0;
  left: 0;
  text-align: right;
}
.about .hero .nav.slideshow .list li a,
.about .hero .nav.slideshow .list .sublist li a {
  padding: 24px 16px;
  color: #fff;
}
@media screen and (max-width: 600px) {
  .about .hero .nav.slideshow {
    padding: 0;
  }
  .about .hero .nav.slideshow .list {
    text-align: center;
  }
  .about .hero .nav.slideshow .list .sublist {
    display: block;
    margin: 0 auto;
  }
}
@media screen and (max-width: 420px) {
  .about .hero .nav.slideshow {
    display: none;
  }
}
.about .hero {
  color: #fff;
  padding: 0;
  position: relative;
  background: #000;
}
.about .hero .background {
  position: relative;
  width: 100%;
  height: 0;
  padding: 56.25% 0 0 0;
}
.about .hero .headshot {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.about .hero .motto {
  position: absolute;
  max-width: 380px;
  top: 240px;
  left: 48px;
}
.about .hero .motto .text {
  font-size: 32px;
  font-size: 2rem;
  line-height: 160%;
  font-weight: 300;
  margin: 0;
}
@media screen and (max-width: 1100px) {
  .about .hero .motto span {
    display: inline-block;
  }
}
@media screen and (max-width: 900px) {
  .about .hero .motto {
    top: 200px;
  }
  .about .hero .motto .text {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 140%;
  }
}
@media screen and (max-width: 600px) {
  .about .hero .motto {
    top: auto;
    left: 50%;
    padding: 0 24px;
    text-align: center;
    bottom: 60px;
    max-width: 360px;
    margin: 0 0 0 -180px;
  }
  .about .hero .motto span {
    display: inline;
  }
}
@media screen and (max-width: 420px) {
  .about .hero .motto {
    bottom: 22px;
    max-width: 320px;
    width: 100%;
    margin: 0 0 0 -160px;
  }
  .about .hero .motto .text {
    font-size: 18px;
    font-size: 1.125rem;
  }
}
.about .hero .motto .button {
  margin: 24px 0 0 0;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  padding: 16px 48px;
  border: 1px solid #fff;
  position: absolute;
}
.about .hero .images,
.about .hero .image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.about .hero .image {
  text-align: center;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  -webkit-transition: opacity 2s;
  -moz-transition: opacity 2s;
  -o-transition: opacity 2s;
  -ms-transition: opacity 2s;
  transition: opacity 2s;
}
.about .hero .image.active {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
.about .hero .image:before,
.about .hero .image:after {
  content: '';
  position: absolute;
  height: 80px;
  width: 100%;
  left: 0;
}
.about .hero .image:before {
  top: 0;
  background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.25), rgba(0,0,0,0));
  background-image: -moz-linear-gradient(top, rgba(0,0,0,0.25), rgba(0,0,0,0));
  background-image: -o-linear-gradient(top, rgba(0,0,0,0.25), rgba(0,0,0,0));
  background-image: -ms-linear-gradient(top, rgba(0,0,0,0.25), rgba(0,0,0,0));
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0));
}
.about .hero .image:after {
  bottom: 0;
  background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
  background-image: -moz-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
  background-image: -o-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
  background-image: -ms-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
  background-image: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0));
}
.about .title {
  margin-bottom: 24px;
}
.about .biography,
.about .technologies,
.about .awards,
.about .charities,
.about .publications {
  padding: 48px;
  position: relative;
  border-bottom: 1px solid #eaeaea;
}
@media screen and (max-width: 600px) {
  .about .biography,
  .about .technologies,
  .about .awards,
  .about .charities,
  .about .publications {
    padding: 48px 24px;
  }
}
.about .biography .title,
.about .technologies .title,
.about .awards .title,
.about .charities .title,
.about .publications .title {
  margin: 0 0 24px;
  font-weight: 300;
  color: #949494;
}
@media screen and (max-width: 600px) {
  .about .biography .title,
  .about .technologies .title,
  .about .awards .title,
  .about .charities .title,
  .about .publications .title {
    font-size: 18px;
    font-size: 1.125rem;
    margin: 0 0 12px;
  }
}
.about .biography .description,
.about .technologies .description,
.about .awards .description,
.about .charities .description,
.about .publications .description {
  max-width: 700px;
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 300;
  color: #949494;
}
@media screen and (max-width: 600px) {
  .about .biography .description,
  .about .technologies .description,
  .about .awards .description,
  .about .charities .description,
  .about .publications .description {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 220%;
    margin-bottom: 0;
  }
}
.about .biography .list,
.about .technologies .list,
.about .awards .list,
.about .charities .list,
.about .publications .list {
  width: 100%;
  margin: 24px 0 0 0;
}
.about .technologies,
.about .awards,
.about .publications,
.about .charities {
  padding: 48px 0 0;
  border-bottom: none;
}
.about .technologies .title,
.about .awards .title,
.about .publications .title,
.about .charities .title {
  padding: 0 48px 4.8px;
  margin: 0 0 4.8px;
}
@media screen and (max-width: 600px) {
  .about .technologies .title,
  .about .awards .title,
  .about .publications .title,
  .about .charities .title {
    padding: 0 24px 4.8px;
  }
}
.about .technologies .description,
.about .awards .description,
.about .publications .description,
.about .charities .description {
  padding: 0 48px 24px;
}
@media screen and (max-width: 600px) {
  .about .technologies .description,
  .about .awards .description,
  .about .publications .description,
  .about .charities .description {
    padding: 0 24px 24px;
  }
}
.about .technologies .list,
.about .awards .list,
.about .publications .list,
.about .charities .list {
  padding: 0;
  border-left: 1px solid #eaeaea;
  border-top: 1px solid #eaeaea;
}
.about .technologies .list li,
.about .awards .list li,
.about .publications .list li,
.about .charities .list li {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 20%;
  display: block;
  float: left;
  border-right: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
}
@media screen and (max-width: 600px) {
  .about .technologies .list li,
  .about .awards .list li,
  .about .publications .list li,
  .about .charities .list li {
    width: 50%;
  }
}
.about .technologies .list li .svg,
.about .awards .list li .svg,
.about .publications .list li .svg,
.about .charities .list li .svg {
  content: '';
  width: 100%;
  height: 0;
  padding: 100% 0 0 0;
  display: block;
}
.about .technologies .list li .svg svg,
.about .awards .list li .svg svg,
.about .publications .list li .svg svg,
.about .charities .list li .svg svg {
  position: absolute;
  top: 33%;
  left: 20%;
  width: 60%;
  height: 34%;
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.about .technologies .list li .svg:hover svg,
.about .awards .list li .svg:hover svg,
.about .publications .list li .svg:hover svg,
.about .charities .list li .svg:hover svg {
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  -ms-transform: scale(1.25);
  transform: scale(1.25);
}
.about .publications .list li {
  width: 20%;
}
@media screen and (max-width: 600px) {
  .about .publications .list li {
    width: 50%;
  }
}
.about .awards .list li {
  width: 25%;
}
@media screen and (max-width: 600px) {
  .about .awards .list li {
    width: 50%;
  }
}
.about .awards .list li .svg svg {
  position: absolute;
  top: 33%;
  left: 25%;
  width: 50%;
  height: 34%;
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.about .awards .list li .svg:hover svg {
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  -ms-transform: scale(1.25);
  transform: scale(1.25);
}
.about .technologies .list li {
  width: 10%;
}
@media screen and (max-width: 800px) {
  .about .technologies .list li {
    width: 12.5%;
  }
}
@media screen and (max-width: 600px) {
  .about .technologies .list li {
    width: 25%;
  }
}
.about .technologies .list li .svg svg {
  position: absolute;
  top: 35%;
  left: 25%;
  width: 50%;
  height: 30%;
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.about .technologies .list li .svg:hover svg {
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  -ms-transform: scale(1.25);
  transform: scale(1.25);
}
.contact {
  margin: 0 auto;
  padding: 0;
}
.contact .hero {
  padding: 48px 48px 24px 48px;
}
.contact .hero .title {
  font-weight: 300;
  color: #949494;
}
.contact .hero .description {
  max-width: 700px;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 300;
  color: #949494;
}
.contact .hero .description a {
  border-bottom: 1px solid #eaeaea;
}
.contact .hero hr {
  border: none;
  height: 1px;
  display: block;
  clear: both;
  margin: 24px 0;
  background: #efefef;
  width: 700px;
}
.contact .hero .btn {
  border: 1px solid #eaeaea;
  padding: 24px 60px;
  font-weight: 600;
  line-height: 100%;
  position: absolute;
  right: 96px;
  top: 96px;
  -webkit-transition: background 0.5s, border-color 0.5s, color 0.5s;
  -moz-transition: background 0.5s, border-color 0.5s, color 0.5s;
  -o-transition: background 0.5s, border-color 0.5s, color 0.5s;
  -ms-transition: background 0.5s, border-color 0.5s, color 0.5s;
  transition: background 0.5s, border-color 0.5s, color 0.5s;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  color: #696969;
}
.contact .hero .btn:hover {
  background: #ffd200;
  border-color: #ffd200;
  color: #fff;
}
@media screen and (max-width: 1100px) {
  .contact .hero .btn {
    top: 0;
    left: 0;
    margin-bottom: 24px;
    text-align: center;
    position: relative;
    clear: both;
  }
}
@media screen and (max-width: 700px) {
  .contact .hero {
    padding: 48px 24px;
  }
}
@media screen and (max-width: 500px) {
  .contact .hero {
    padding: 24px;
  }
  .contact .hero .title {
    color: #333;
    font-size: 20px;
    font-size: 1.25rem;
    margin-bottom: 12px;
  }
  .contact .hero .description {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 220%;
  }
  .contact .hero .btn {
    margin-bottom: 12px;
  }
}
.contact .map {
  width: 100%;
  height: 400px;
  display: block;
  position: relative;
  background: #282828;
  overflow: hidden;
  text-align: center;
}
.contact .map .text {
  font-size: 16px;
  font-size: 1rem;
  line-height: 100%;
  position: absolute;
  top: 48px;
  right: 48px;
  padding: 24px 48px;
  display: inline-block;
  color: #fff;
}
.contact .map .background {
  width: 100%;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  background: url("../images/contact/toronto-5.jpg");
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-position: center center;
}
.contact .map .background:before,
.contact .map .background:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 80px;
}
.contact .map .background:before {
  top: 0;
  left: 0;
  background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0), rgba(0,0,0,0.15));
  background-image: -moz-linear-gradient(bottom, rgba(0,0,0,0), rgba(0,0,0,0.15));
  background-image: -o-linear-gradient(bottom, rgba(0,0,0,0), rgba(0,0,0,0.15));
  background-image: -ms-linear-gradient(bottom, rgba(0,0,0,0), rgba(0,0,0,0.15));
  background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.15));
}
.contact .map .background:after {
  bottom: 0;
  left: 0;
  background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.25));
  background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.25));
  background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.25));
  background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.25));
  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
}
.contact .form {
  padding: 48px;
  -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}
.contact .form .background {
  background: #ffd200;
  overflow: hidden;
}
.contact .form .background,
.contact .form .background:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.contact .form .background:before {
  width: 200%;
  height: 200%;
  opacity: 0.03;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=3)";
  filter: alpha(opacity=3);
  -webkit-transform: rotate(-15deg) translate3d(0, -25%, 0);
  -moz-transform: rotate(-15deg) translate3d(0, -25%, 0);
  -o-transform: rotate(-15deg) translate3d(0, -25%, 0);
  -ms-transform: rotate(-15deg) translate3d(0, -25%, 0);
  transform: rotate(-15deg) translate3d(0, -25%, 0);
  background: url("../images/contact/mail.svg");
  -webkit-background-size: 48px auto;
  -moz-background-size: 48px auto;
  background-size: 48px auto;
}
.contact .form .memo {
  width: 80%;
  min-height: 600px;
  max-width: 700px;
  margin: 0 auto;
  padding: 72px 48px 72px 108px;
  border: 1px solid #f4f4f4;
  background: #fff;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.1);
  box-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
.contact .form .memo:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding-bottom: 2px;
  margin-top: -1px;
  opacity: 0.25;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
  filter: alpha(opacity=25);
  background-image: -webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -webkit-linear-gradient(#eee 0.1em, transparent 0.1em);
  background-image: -moz-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -moz-linear-gradient(#eee 0.1em, transparent 0.1em);
  background-image: -o-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -o-linear-gradient(#eee 0.1em, transparent 0.1em);
  background-image: -ms-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -ms-linear-gradient(#eee 0.1em, transparent 0.1em);
  background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), linear-gradient(#eee 0.1em, transparent 0.1em);
  -webkit-background-size: 100% 1.2em;
  -moz-background-size: 100% 1.2em;
  background-size: 100% 1.2em;
}
.contact .form .memo p {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 200%;
  font-family: 'Open Sans';
  color: #696969;
}
.contact .form .memo .hey {
  font-size: 22px;
  font-size: 1.375rem;
}
.contact .form .memo .text {
  margin: 8px 0;
}
.contact .form .memo .select {
  border: none;
  border-bottom: 1px solid #ffe980;
  -webkit-border-radius: 0;
  border-radius: 0;
  margin: 0 4px;
  padding: 0 16px 0 4px;
  text-align: center;
  display: inline;
  position: relative;
  background: #fffbe5;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  -o-transition: background 0.5s;
  -ms-transition: background 0.5s;
  transition: background 0.5s;
}
.contact .form .memo .select:after {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #949494;
  display: block;
  position: absolute;
  right: 4px;
  top: 12px;
}
.contact .form .memo .select .dropdown {
  position: absolute;
  width: 100%;
  height: 32px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  top: 0;
  left: 0;
  display: block;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.contact .form .memo .select:hover {
  cursor: pointer;
  background: #fff6cc;
}
.contact .form .memo .body {
  display: inline;
  background: #fffbe5;
  border-bottom: 1px solid #ffe980;
}
.contact .form .memo .body:hover {
  cursor: pointer;
  background: #fff6cc;
}
.error .title {
  text-align: center;
  font-size: 100px;
  font-size: 6.25rem;
  line-height: 100%;
  margin: 100px auto 40px;
}
.error .description {
  text-align: center;
  font-size: 40px;
  font-size: 2.5rem;
  line-height: 140%;
  font-weight: 100;
  color: #949494;
  margin: 0 auto 50px;
}
.error .back {
  font-size: 20px;
  font-size: 1.25rem;
  font-weight: bold;
  color: #535353;
  margin: 0 auto 100px;
  display: block;
  width: 300px;
  text-align: center;
  border: 1px solid #d4d4d4;
  padding: 24px;
}
.licenses {
  padding: 48px;
}
.licenses .title {
  font-size: 32px;
  font-size: 2rem;
  font-weight: 100;
}
.licenses .description {
  font-size: 14px;
  font-size: 0.875rem;
}
.licenses h2 {
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 100;
  width: 700px;
  max-width: 100%;
  padding: 0 0 12px;
  border-bottom: 1px solid #eaeaea;
}
.licenses pre {
  color: #535353;
  max-width: 700px;
  line-height: 160%;
  margin: 0 0 24px;
}
@media only screen and (max-width: 1300px) {
  .wrapper {
    margin: 0;
    height: auto;
    width: 100%;
  }
}
@media only screen and (max-width: 1120px) {
  .navigation-wrapper {
    float: none;
  }
  .primaryNav {
    position: absolute;
    top: 0;
    right: 80px;
  }
  .primaryNav:after {
    display: none;
  }
  .transitionOut .primaryNav {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-animation: primaryNavTabletTransitionIn 0.3s 1 normal forwards;
    -moz-animation: primaryNavTabletTransitionIn 0.3s 1 normal forwards;
    -o-animation: primaryNavTabletTransitionIn 0.3s 1 normal forwards;
    -ms-animation: primaryNavTabletTransitionIn 0.3s 1 normal forwards;
    animation: primaryNavTabletTransitionIn 0.3s 1 normal forwards;
  }
  .transitionIn .primaryNav {
    -webkit-transform: translate3d(100px, 0, 0);
    -moz-transform: translate3d(100px, 0, 0);
    -o-transform: translate3d(100px, 0, 0);
    -ms-transform: translate3d(100px, 0, 0);
    transform: translate3d(100px, 0, 0);
    -webkit-animation: primaryNavTabletTransitionOut 0.3s 1 normal forwards;
    -moz-animation: primaryNavTabletTransitionOut 0.3s 1 normal forwards;
    -o-animation: primaryNavTabletTransitionOut 0.3s 1 normal forwards;
    -ms-animation: primaryNavTabletTransitionOut 0.3s 1 normal forwards;
    animation: primaryNavTabletTransitionOut 0.3s 1 normal forwards;
  }
  .socialNav {
    position: absolute;
    top: 0;
    right: 80px;
    display: block;
    z-index: 9999;
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -o-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    background: transparent;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  .socialNav li a {
    padding: 24px 6px;
  }
  .navigation-open .socialNav {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    background: #fff;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .toggleNavigation {
    display: inline-block;
    padding: 38px 0 0 26px;
    border-left: 1px solid #eaeaea;
  }
  .toggleNavigation:before,
  .toggleNavigation:after,
  .toggleNavigation span {
    content: '';
    width: 5px;
    height: 5px;
    display: block;
    float: left;
    margin: 0 2px;
    background: #5e5e5e;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  .toggleNavigation:hover:before,
  .toggleNavigation:hover:after,
  .toggleNavigation:hover span {
    background: #ffd200;
  }
  .toggleNavigation:hover:before {
    -webkit-transform: translate3d(-2px, 0, 0);
    -moz-transform: translate3d(-2px, 0, 0);
    -o-transform: translate3d(-2px, 0, 0);
    -ms-transform: translate3d(-2px, 0, 0);
    transform: translate3d(-2px, 0, 0);
  }
  .toggleNavigation:hover:after {
    -webkit-transform: translate3d(2px, 0, 0);
    -moz-transform: translate3d(2px, 0, 0);
    -o-transform: translate3d(2px, 0, 0);
    -ms-transform: translate3d(2px, 0, 0);
    transform: translate3d(2px, 0, 0);
  }
  .navigation-open .toggleNavigation {
    border-left: 1px solid #eaeaea;
    background: #fbfbfb;
  }
  .navigation-open .toggleNavigation:before,
  .navigation-open .toggleNavigation:after,
  .navigation-open .toggleNavigation span {
    width: 22px;
    height: 4px;
  }
  .navigation-open .toggleNavigation:before {
    -webkit-transform: translate3d(-1px, 0, 0);
    -moz-transform: translate3d(-1px, 0, 0);
    -o-transform: translate3d(-1px, 0, 0);
    -ms-transform: translate3d(-1px, 0, 0);
    transform: translate3d(-1px, 0, 0);
  }
  .navigation-open .toggleNavigation:after {
    -webkit-transform: translate3d(6px, -11px, 0) rotate(45deg);
    -moz-transform: translate3d(6px, -11px, 0) rotate(45deg);
    -o-transform: translate3d(6px, -11px, 0) rotate(45deg);
    -ms-transform: translate3d(6px, -11px, 0) rotate(45deg);
    transform: translate3d(6px, -11px, 0) rotate(45deg);
  }
  .navigation-open .toggleNavigation span {
    -webkit-transform: translate3d(-20px, 7px, 0) rotate(-45deg);
    -moz-transform: translate3d(-20px, 7px, 0) rotate(-45deg);
    -o-transform: translate3d(-20px, 7px, 0) rotate(-45deg);
    -ms-transform: translate3d(-20px, 7px, 0) rotate(-45deg);
    transform: translate3d(-20px, 7px, 0) rotate(-45deg);
  }
}
@media only screen and (max-width: 880px) {
  .navigation-wrapper {
    float: left !important;
    width: 100%;
    top: 0;
    left: 0;
    display: none;
    padding-bottom: 81px;
    z-index: 8000;
  }
  .navigation-open .navigation-wrapper {
    display: inline-block;
  }
  .primaryNav {
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    position: relative;
    opacity: 1 !important;
    -ms-filter: none !important;
    filter: none !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    -moz-transform: translate3d(0, 0, 0) !important;
    -o-transform: translate3d(0, 0, 0) !important;
    -ms-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    background: #fbfbfb;
    border-bottom: 1px solid #eaeaea !important;
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
  }
  .primaryNav li {
    width: 100%;
    height: auto;
    clear: both;
    border-top: 1px solid #eaeaea;
  }
  .primaryNav li a {
    text-align: center;
    font-size: 24px;
    font-size: 1.5rem;
    letter-spacing: -1px;
    letter-spacing: -0.0625rem;
    font-weight: bold;
  }
  .primaryNav li a:before,
  .primaryNav li a:after {
    display: none;
  }
  .socialNav {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    opacity: 1 !important;
    -ms-filter: none !important;
    filter: none !important;
    display: inline-block !important;
    z-index: 99999999 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    background: #fbfbfb !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -o-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
    text-align: center !important;
    padding: 0 !important;
  }
  .socialNav li {
    display: inline-block !important;
  }
  .socialNav li a {
    padding: 24px 4 !important;
  }
  .socialNav li a:before,
  .socialNav li a:after {
    color: #282828 !important;
  }
  .socialNav li.rss {
    display: none !important;
  }
  .toggleNavigation {
    padding: 24px 0 0 26px;
  }
  .toggleNavigation:before,
  .toggleNavigation:after,
  .toggleNavigation span {
    content: '';
    width: 32px;
    height: 3px;
    display: block;
    margin: 0 auto;
    background: #5e5e5e;
    margin-top: 6px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  .toggleNavigation:hover:before,
  .toggleNavigation:hover:after,
  .toggleNavigation:hover span {
    background: #ffd200;
  }
  .toggleNavigation:hover:before {
    -webkit-transform: translate3d(0, -2px, 0);
    -moz-transform: translate3d(0, -2px, 0);
    -o-transform: translate3d(0, -2px, 0);
    -ms-transform: translate3d(0, -2px, 0);
    transform: translate3d(0, -2px, 0);
  }
  .toggleNavigation:hover:after {
    -webkit-transform: translate3d(0, 2px, 0);
    -moz-transform: translate3d(0, 2px, 0);
    -o-transform: translate3d(0, 2px, 0);
    -ms-transform: translate3d(0, 2px, 0);
    transform: translate3d(0, 2px, 0);
  }
  .navigation-open .toggleNavigation {
    border-left: 1px solid #eaeaea;
    background: #fbfbfb;
  }
  .navigation-open .toggleNavigation:before,
  .navigation-open .toggleNavigation:after,
  .navigation-open .toggleNavigation span {
    width: 28px;
  }
  .navigation-open .toggleNavigation:before {
    -webkit-transform: translate3d(0, 8px, 0) rotate(45deg);
    -moz-transform: translate3d(0, 8px, 0) rotate(45deg);
    -o-transform: translate3d(0, 8px, 0) rotate(45deg);
    -ms-transform: translate3d(0, 8px, 0) rotate(45deg);
    transform: translate3d(0, 8px, 0) rotate(45deg);
  }
  .navigation-open .toggleNavigation:after {
    -webkit-transform: translate3d(0, -12px, 0) rotate(-45deg);
    -moz-transform: translate3d(0, -12px, 0) rotate(-45deg);
    -o-transform: translate3d(0, -12px, 0) rotate(-45deg);
    -ms-transform: translate3d(0, -12px, 0) rotate(-45deg);
    transform: translate3d(0, -12px, 0) rotate(-45deg);
  }
  .navigation-open .toggleNavigation span {
    -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
    -moz-transform: translate3d(0, 0, 0) rotate(45deg);
    -o-transform: translate3d(0, 0, 0) rotate(45deg);
    -ms-transform: translate3d(0, 0, 0) rotate(45deg);
    transform: translate3d(0, 0, 0) rotate(45deg);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  .header h1 {
    width: 100%;
    z-index: 9000;
  }
  .header h1 a {
    padding: 24px 24px;
    width: 100%;
  }
  .header h1 a .titles {
    color: transparent;
  }
  .header h1 a .titles:before {
    pointer-events: none;
    display: inline-block;
    width: 100%;
    position: absolute;
    color: #535353;
  }
  .panels {
    min-height: 100px;
  }
  .grid {
    min-height: 200px;
  }
  .grid .item.twitter {
    padding: 24px;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 180%;
  }
  .grid .item.spotify a {
    padding: 24px 120px 24px 24px;
  }
  .grid .item.spotify .title {
    font-size: 18px;
    font-size: 1.125rem;
  }
  .grid .item.spotify .image {
    right: 36px;
    -webkit-background-size: auto 72px;
    -moz-background-size: auto 72px;
    background-size: auto 72px;
  }
  .grid .item.spotify .time {
    padding: 2px 10px;
  }
  .grid .item.github {
    padding: 24px;
  }
  .grid .item.github .url {
    font-size: 18px;
    font-size: 1.125rem;
  }
  .work .casestudies .project {
    padding: 24px 12px 160px 12px;
  }
  .work .casestudies .project .description {
    padding: 0;
    margin-bottom: 20px;
  }
  .work .casestudies .project .logo {
    font-size: 30px;
    font-size: 1.875rem;
    margin: 40px auto 80px;
  }
  .work .casestudies .project .logo:after {
    bottom: -30px;
  }
  .work .casestudies .project .background {
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    background-size: auto 100%;
    background-position: center center;
  }
  .work .casestudies .project.torontostar .view {
    right: auto;
    left: 50%;
    margin: 0 0 0 -36px;
  }
  .work .casestudies .project.cbs .view {
    right: auto;
    left: 50%;
    margin: 0 0 0 -36px;
  }
  .work .casestudies .project.dailychallenge .view {
    right: auto;
    left: 50%;
    margin: 0 0 0 -36px;
  }
  .work .casestudies .project.dealpage .view {
    right: auto;
    left: 50%;
    margin: 0 0 0 -36px;
  }
  .work .casestudies .project.ducati .view {
    right: auto;
    left: 50%;
    margin: 0 0 0 -36px;
  }
  .work .casestudies .project.flixel .view {
    right: auto;
    left: 50%;
    margin: 0 0 0 -36px;
  }
  .work .casestudies .project.foodtruckmarketing .view {
    right: auto;
    left: 50%;
    margin: 0 0 0 -36px;
  }
  .work .casestudies .project.rebrief .view {
    right: auto;
    left: 50%;
    margin: 0 0 0 -36px;
  }
  .work .casestudies .project.thinkquarterly .view {
    right: auto;
    left: 50%;
    margin: 0 0 0 -36px;
  }
  .work .casestudies .project.holtrenfrew .view {
    right: auto;
    left: 50%;
    margin: 0 0 0 -36px;
  }
  .work .casestudies .project.jqueryto .view {
    right: auto;
    left: 50%;
    margin: 0 0 0 -36px;
  }
  .work .casestudies .project.mycitylives .view {
    right: auto;
    left: 50%;
    margin: 0 0 0 -36px;
  }
  .work .casestudies .project.nike .view {
    right: auto;
    left: 50%;
    margin: 0 0 0 -36px;
  }
  .work .casestudies .project.redbull .view {
    right: auto;
    left: 50%;
    margin: 0 0 0 -36px;
  }
  .work .casestudies .project.themify .view {
    right: auto;
    left: 50%;
    margin: 0 0 0 -36px;
  }
  .contact .map .text {
    display: none;
  }
  .error .title {
    font-size: 40px;
    font-size: 2.5rem;
    margin: 30px auto 30px;
  }
  .error .description {
    font-size: 24px;
    font-size: 1.5rem;
    margin: 0 auto 30px;
  }
  .error .back {
    font-size: 14px;
    font-size: 0.875rem;
    width: 200px;
    margin: 0 auto 40px;
    padding: 12px;
  }
  .licenses {
    padding: 24px;
  }
  .licenses .title {
    font-size: 24px;
    font-size: 1.5rem;
  }
  .licenses .description {
    font-size: 12px;
    font-size: 0.75rem;
  }
  .licenses pre {
    max-width: 100%;
    overflow: scroll;
  }
}