/*
* Scut, a collection of Sass utilities
* to ease and improve our implementations of common style-code patterns.
* v1.4.0
* Docs at http://davidtheclark.github.io/scut
*/
/*
YUI 3.4.1 (build 4118)
Copyright 2011 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html {
  color: #000; }

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0; }

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

fieldset, img {
  border: 0; }

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal; }

ol, ul {
  list-style: none; }

caption, th {
  text-align: left; }

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal; }

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

abbr, acronym {
  border: 0;
  font-variant: normal; }

sup {
  vertical-align: text-top; }

sub {
  vertical-align: text-bottom; }

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit; }

input, textarea, select {
  *font-size: 100%; }

legend {
  color: #000; }

.navLinks.inverted .button:hover, .button, body.archive .button:hover {
  display: inline-block;
  background-color: white;
  letter-spacing: 7px;
  font-family: "Classic Grotesque W01 Ex Md";
  text-transform: uppercase;
  color: black;
  text-decoration: none;
  border: 1px solid black;
  padding: 12px 0px 12px 4px;
  width: 190px;
  text-align: center;
  font-size: 15px;
  line-height: 18px;
  z-index: 1; }

.navLinks.inverted .button, .button:hover, body.archive .button {
  color: white;
  border-color: white;
  background-color: black; }

body, #loadMoreProjects {
  font-family: "GrotesqueMTW01-BoldExte";
  font-size: 22px;
  line-height: 28px; }

@-webkit-keyframes slideRight {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0); }
  100% {
    -webkit-transform: translate3d(0%, 0, 0);
            transform: translate3d(0%, 0, 0); } }

@keyframes slideRight {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0); }
  100% {
    -webkit-transform: translate3d(0%, 0, 0);
            transform: translate3d(0%, 0, 0); } }

@-webkit-keyframes slideLeft {
  0% {
    -webkit-transform: translate3d(0px, 0, 0);
            transform: translate3d(0px, 0, 0); }
  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0); } }

@keyframes slideLeft {
  0% {
    -webkit-transform: translate3d(0px, 0, 0);
            transform: translate3d(0px, 0, 0); }
  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0); } }

@-webkit-keyframes loading {
  from {
    -webkit-filter: invert(0%);
            filter: invert(0%); }
  to {
    -webkit-filter: invert(100%);
            filter: invert(100%); } }

@keyframes loading {
  from {
    -webkit-filter: invert(0%);
            filter: invert(0%); }
  to {
    -webkit-filter: invert(100%);
            filter: invert(100%); } }

*, *:before, *:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

html, body {
  height: 100%; }

body {
  min-width: 766px;
  position: relative;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
  -webkit-transition: -webkit-filter 500ms;
  transition: -webkit-filter 500ms;
  -o-transition: filter 500ms;
  transition: filter 500ms;
  transition: filter 500ms, -webkit-filter 500ms; }

body.inverted {
  -webkit-filter: invert(100%);
          filter: invert(100%);
  background-color: black; }

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer; }

.cn-page-wrap {
  position: absolute;
  overflow: hidden;
  height: 100%;
  -webkit-backface-visibility: hidden; }

.cn-page-shim-outer {
  height: 100%;
  overflow-y: scroll;
  width: 100vw;
  -webkit-overflow-scrolling: touch; }

.cn-page-shim-inner {
  position: relative;
  overflow: hidden;
  min-height: 120%;
  min-width: 766px; }

.navLinks {
  position: absolute;
  top: 20px;
  right: 80px;
  z-index: 2;
  text-align: right; }

.navLinks .button {
  float: right; }

.navLinks .button:first-child {
  border-left: 0px !important; }

.topLink {
  display: none;
  position: fixed;
  right: 73px;
  bottom: 20px;
  width: 20px;
  height: 15px;
  background: url("img/arrow-up.png");
  z-index: 1; }

.topLink.bottom {
  position: absolute;
  bottom: 120px;
  right: 58px;
  z-index: 1000; }

#archiveLink.mti_font_element {
  opacity: 1; }

.navTarget {
  position: absolute;
  cursor: pointer;
  width: 10%;
  height: 100%;
  top: 0px; }

.navTarget.left {
  left: 0px; }

.navTarget.right {
  right: 0px; }

.projectNav {
  position: absolute;
  height: 100%;
  width: 23px;
  background-color: yellow;
  top: 0px;
  -webkit-transition: .25s;
  -moz-transition: .25s; }

.projectNav:hover,
.navTarget:hover .projectNav,
.cn-project-nav:hover .projectNav {
  width: 28px; }

.projectNav.disabled:hover,
.navTarget:hover .projectNav.disabled {
  width: 23px; }

.projectNav.left {
  left: 0px; }

.projectNav.right {
  right: 0px; }

.bottomNavLink {
  width: 50.1%;
  color: black;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 5px;
  padding: 35px 0px;
  position: absolute;
  bottom: 0px;
  z-index: 1; }

.bottomNavLink.left {
  left: 0px;
  float: left; }

.bottomNavLink.right {
  float: right;
  right: 0px; }

#contentWrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 100%; }

#content {
  margin: 0px auto 0px auto;
  position: relative;
  left: 0px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: 1; }

.sectionTitle {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 22px;
  padding: 80px 0px 73px 0; }

.footer {
  font-size: 15px;
  line-height: 20px;
  text-align: center;
  padding: 20px 0px;
  clear: both; }

/* Individual Project */
/* 
==============	
Info page
==============
*/
/* 
==============	
Default page template
==============
*/
/*.page-template-default #content {
	width: auto;
	padding: 0px 15%;
	}

.page-template-default #contentWrapper {
	overflow: auto;
	-webkit-overflow-scrolling:touch;
}

.page-template-default .infoWrapper a {
	border-bottom: 1px solid black;
	}

.page-template-default .infoWrapper a:hover {
	border-bottom: none;
	}	

.page-template-default .projectNav {
	background-color: black;
	-webkit-transform: translate3d(0,0,0);
	}

.page-template-default .infoWrapper {
	margin: 0 auto;
	padding-bottom: 150px;
	overflow: auto;
}*/
/* 
==============	
Archive page
==============
*/
.projectCont {
  display: block;
  float: left;
  margin: 0px 10px; }

#archived-projects {
  padding-bottom: 150px; }

#loadMoreProjectsContainer {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
  z-index: 1; }

#loadMoreProjects {
  margin: 0 auto;
  padding: 35px 0;
  display: block;
  background: #fff;
  color: black;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 5px; }
  #loadMoreProjects.loading-more-projects {
    -webkit-animation: loading 1.5s infinite linear alternate;
            animation: loading 1.5s infinite linear alternate; }

/* 
==============	
Archive Page
==============
*/
body.archive {
  background-color: black; }
  body.archive .project {
    color: white; }
    body.archive .project .description a,
    body.archive .project .caption a {
      border-bottom: 1px solid white; }
  body.archive .arrow.left {
    border-right-color: white; }
  body.archive .arrow.right {
    border-left-color: white; }
  body.archive .topLink {
    background: url("img/arrow-up-white.png"); }

/* 
==============	
Single Page
==============
*/
/* 
==============	
Animations
==============
*/
#content.beforeSlide {
  width: 200%;
  position: relative;
  -webkit-animation-duration: 700ms;
  -webkit-animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-duration: 700ms;
  -moz-animation-fill-mode: both;
  -moz-animation-timing-function: ease-in-out; }

#content.beforeSlide .project {
  width: 50%;
  display: block;
  position: static; }

#content.beforeSlideLeft .project {
  float: left; }

#content.slideLeft {
  -webkit-animation-name: slideLeft;
  /* Safari 5, Chrome */
  -moz-animation-name: slideLeft;
  /* Firefox 5-15 */ }

#content.beforeSlideRight .project {
  float: right; }

#content.slideRight {
  -webkit-animation-name: slideRight;
  -moz-animation-name: slideRight;
  /* Firefox 5-15 */ }

/* 
==============	
iOS Styling
==============
*/
@media screen and (device-width: 480px), screen and (device-width: 320px) {
  body,
  .about .h1 {
    font-size: 36px;
    line-height: 44px; }
  .about .bottomText,
  .about .widget_twitter .time-meta a,
  .footer,
  .button, body.archive .button:hover,
  .index,
  .about .contact {
    font-size: 22px;
    line-height: 30px; }
  .project .caption p,
  .index p {
    font-size: 21px;
    line-height: 28px; }
  .button {
    width: 220px; } }

@media screen and (max-width: 1024px), screen and (max-width: 770px), screen and (max-width: 480px), screen and (max-width: 320px) {
  .projectNav:hover {
    width: 23px !important; } }

/**
 * project module (partials/project.twig)
 */
.project p.client {
  position: relative;
  padding-bottom: 0px; }

.project p.client .year {
  display: block;
  position: absolute;
  top: 0;
  left: 0px; }

.project .title {
  text-transform: uppercase;
  margin-top: 10px; }

.project.project-thumbnail img, .project.project-thumbnail a {
  display: block; }

.project.project-thumbnail a {
  position: relative;
  background: whitesmoke;
  overflow: hidden;
  height: 0;
  padding-top: 66.66%; }

.project.project-thumbnail img {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  -webkit-transition: opacity 200ms;
  -o-transition: opacity 200ms;
  transition: opacity 200ms; }

.project.project-thumbnail img.is-loaded {
  opacity: 1; }

.project.project-view[data-featured="0"] {
  background: black !important; }

.project.project-view.loading {
  display: none; }

.project.project-view.current {
  display: block; }

.project.project-view .inner {
  width: 100%;
  padding: 0 12%;
  padding-top: 37px;
  padding-bottom: 150px;
  position: relative;
  -webkit-transform: translate3d(0, 0, 0); }
  .project.project-view .inner p.image {
    width: 100%; }

.project.project-view .caption {
  padding: 10px 0px 0px 0px;
  margin-bottom: 50px; }

.project.project-view .description a,
.project.project-view .caption a {
  border-bottom: 1px solid black; }

.project.project-view .description a:hover,
.project.project-view .caption a:hover {
  border-bottom: none; }

.project.project-view img:first-child {
  margin-top: 0px; }

.project.project-view .caption p {
  font-family: "Classic Grotesque W01 Ex Md";
  font-size: 18px;
  line-height: 24px;
  margin-bottom: 25px; }

.project.project-view p.image {
  margin-top: 45px;
  margin-bottom: 15px;
  margin-left: 0px;
  padding: 0px;
  padding-bottom: 25px; }

.project.project-view .description {
  padding-top: 20px;
  padding-bottom: 50px; }

.project.project-view .imgSet {
  cursor: pointer;
  cursor: s-resize; }
  .project.project-view .imgSet img {
    display: block;
    height: auto;
    width: 100%;
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 0;
    -webkit-transition: opacity 200ms;
    -o-transition: opacity 200ms;
    transition: opacity 200ms; }
  .project.project-view .imgSet img.is-loaded {
    -webkit-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
    opacity: 1; }

.project.project-view .imgSet:last-child, .project.project-view .imgSet:last-of-type {
  cursor: pointer;
  cursor: n-resize; }

/**
 * arrow prompts
 */
#arrow-prompts {
  position: absolute;
  display: block;
  top: 50%;
  width: 100%;
  height: 40px;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
  z-index: 1; }
  #arrow-prompts .arrow {
    position: absolute;
    top: 0; }
    #arrow-prompts .arrow.left {
      display: inline-block;
      height: 0;
      width: 0;
      -webkit-transform: rotate(360deg);
      border-width: 20px 30px;
      border-style: solid;
      border-color: transparent;
      border-right-color: black;
      border-left-width: 0;
      left: 35px; }
    #arrow-prompts .arrow.right {
      display: inline-block;
      height: 0;
      width: 0;
      -webkit-transform: rotate(360deg);
      border-width: 20px 30px;
      border-style: solid;
      border-color: transparent;
      border-left-color: black;
      border-right-width: 0;
      right: 35px; }

body.archive #arrow-prompts .arrow.left {
  display: inline-block;
  height: 0;
  width: 0;
  -webkit-transform: rotate(360deg);
  border-width: 20px 30px;
  border-style: solid;
  border-color: transparent;
  border-right-color: white;
  border-left-width: 0; }

body.archive #arrow-prompts .arrow.right {
  display: inline-block;
  height: 0;
  width: 0;
  -webkit-transform: rotate(360deg);
  border-width: 20px 30px;
  border-style: solid;
  border-color: transparent;
  border-left-color: white;
  border-right-width: 0; }

/**
 * cnsocial shortcode
 */
.cn-social {
  margin-top: 2.5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* social links */ }
  .cn-social .subscribeSignup {
    display: inline-block;
    -webkit-box-flex: 2;
        -ms-flex-positive: 2;
            flex-grow: 2;
    padding-right: 5%; }
    .cn-social .subscribeSignup .subscribed {
      background-color: white;
      border: 1px solid black;
      color: black;
      display: inline-block;
      text-decoration: none;
      padding: 11px 0px 10px 15px;
      position: relative;
      width: 390px;
      z-index: 1;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      vertical-align: text-top; }
    .cn-social .subscribeSignup #subForm {
      position: relative; }
    .cn-social .subscribeSignup .subscribeEmail {
      background-color: white;
      border: 1px solid black;
      color: black;
      outline: none;
      text-decoration: none;
      padding: 12px 0px 10px 15px;
      position: relative;
      width: 100%;
      z-index: 1;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      vertical-align: text-top; }
    .cn-social .subscribeSignup input:focus {
      outline: none; }
    .cn-social .subscribeSignup .subscribeEmail:focus {
      border: 1px dashed black; }
    .cn-social .subscribeSignup ::-webkit-input-placeholder {
      color: black; }
    .cn-social .subscribeSignup :-moz-placeholder {
      /* Firefox 18- */
      color: black; }
    .cn-social .subscribeSignup ::-moz-placeholder {
      /* Firefox 19+ */
      color: black; }
    .cn-social .subscribeSignup :-ms-input-placeholder {
      color: black; }
    .cn-social .subscribeSignup .subscribeSubmit {
      position: absolute;
      background: url("img/arrow-right.png");
      background-color: white;
      background-repeat: no-repeat;
      background-position: center center;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      color: transparent;
      cursor: pointer;
      overflow: hidden;
      height: 51px;
      width: 51px;
      /*vertical-align: text-top;*/
      top: 1px;
      right: 0;
      z-index: 20;
      border: 1px solid #000;
      -ms-transform: none;
          transform: none;
      -webkit-transform: translate(0, -1px);
      -moz-transform: translate(0, 0); }
    .cn-social .subscribeSignup .subscribeSubmit:hover, .cn-social .subscribeSignup .subscribeSubmit:active, .cn-social .subscribeSignup .subscribeSubmit:focus {
      background: black url("img/arrow-right-white.png");
      background-repeat: no-repeat;
      background-position: center center;
      border: solid 1px black;
      border-left: 0;
      outline: none; }
  .cn-social .socialLink {
    border: solid black 1px;
    height: 51px;
    line-height: 53px;
    margin-right: 1em;
    padding: 0 15px;
    text-align: center;
    vertical-align: text-top;
    -webkit-box-sizing: border-box;
    -mox-box-sizing: border-box;
    -box-sizing: border-box; }
  .cn-social .socialLink:hover {
    border: solid black 1px;
    border-bottom: solid black 1px;
    background-color: black;
    color: white; }
  .cn-social #subForm, .cn-social .socialLink {
    margin-bottom: 0.5em; }
  .cn-social .socialLink.noSignup {
    margin-left: 0;
    margin-right: 1em; }
  @media only screen and (max-width: 960px) {
    .cn-social {
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }
      .cn-social .subscribeSignup {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        width: 100%; }
      .cn-social .socialLink {
        width: 100%; }
      .cn-social .subscribeSignup, .cn-social .socialLink {
        -ms-flex-negative: 0;
            flex-shrink: 0;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%; } }

/**
  * Image loader
  */
.imgLoader {
  -webkit-transform: translate3d(0, 0, 0);
  background-color: whitesmoke;
  -webkit-transition: background-color 133.33333ms;
  -o-transition: background-color 133.33333ms;
  transition: background-color 133.33333ms;
  width: 100%; }

body.archive .imgLoader {
  background: #222222; }

/**
 * project view template (home page, archives)
 *
 * @template project-view.twig
 */
body.tpl-project-view.page-archive {
  background-color: #000;
  color: #fff; }

/**
* project list template (projects index)
*
* @template project-list.twig
*/
body.tpl-project-list {
  font-size: 15px;
  line-height: 20px; }
  body.tpl-project-list img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 12px; }
  body.tpl-project-list p {
    margin: 0px;
    padding: 0px; }
  body.tpl-project-list .project {
    display: block;
    position: static;
    padding: 0 10px; }
  body.tpl-project-list .cn-page-shim-outer {
    position: static; }
  body.tpl-project-list .projectNav {
    background-color: black;
    background-image: url("img/archive-bg.png"); }
    body.tpl-project-list .projectNav:hover {
      width: 23px; }
  body.tpl-project-list .projectNav.right {
    background-image: url("img/archive-bg-small.png"); }
  body.tpl-project-list .project {
    margin-bottom: 45px; }
  body.tpl-project-list .projects-section {
    padding: 0px 125px; }
  body.tpl-project-list .project-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch; }
  body.tpl-project-list #featured-projects {
    padding-top: 37px;
    margin-bottom: 75px; }
    body.tpl-project-list #featured-projects .project {
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%; }
  body.tpl-project-list #archived-projects {
    background-color: black;
    color: white;
    padding-bottom: 150px; }
    body.tpl-project-list #archived-projects h2 {
      padding: 75px 0 73px 0;
      color: white;
      font-size: 22px;
      text-transform: uppercase;
      letter-spacing: 5px;
      text-align: center; }
    body.tpl-project-list #archived-projects .project-thumbnail {
      -ms-flex-preferred-size: 33.3333%;
          flex-basis: 33.3333%; }
      body.tpl-project-list #archived-projects .project-thumbnail a {
        background-color: #222222; }
  body.tpl-project-list .footer {
    color: white;
    background-color: black; }

/**
 * about template
 *
 * @template about.twig
 */
body.tpl-page-about #contentWrapper {
  overflow: auto;
  -webkit-overflow-scrolling: touch; }

body.tpl-page-about #content {
  height: auto; }

body.tpl-page-about .infoWrapper a {
  border-bottom: 1px solid black; }

body.tpl-page-about .infoWrapper a:hover {
  border-bottom: none; }

body.tpl-page-about .projectNav {
  background-color: black;
  -webkit-transform: translate3d(0, 0, 0); }

body.tpl-page-about .contact {
  font-family: "Classic Grotesque W01 Ex Md";
  font-size: 15px;
  line-height: 20px;
  overflow: auto; }

body.tpl-page-about .contact p {
  float: left;
  margin-right: 55px; }

body.tpl-page-about .infoWrapper {
  margin: 0 auto;
  padding-bottom: 150px;
  overflow: auto; }

body.tpl-page-about .about,
body.tpl-page-about .feed,
body.tpl-page-about .secondaryInfo {
  clear: both;
  margin-bottom: 58px; }

body.tpl-page-about .header,
body.tpl-page-about .feed .header {
  margin-left: 36px;
  margin-bottom: 30px; }

body.tpl-page-about .widget_twitter .twitterwidget-title {
  display: none; }

body.tpl-page-about .widget_twitter li {
  position: relative; }

body.tpl-page-about .widget_twitter .from-meta {
  display: none; }

body.tpl-page-about .widget_twitter {
  list-style: none; }

body.tpl-page-about .widget_twitter .time-meta {
  display: block;
  margin-bottom: 5px; }

body.tpl-page-about .widget_twitter li {
  margin-bottom: 10px; }

body.tpl-page-about .bottomText,
body.tpl-page-about .widget_twitter .time-meta a {
  font-family: "Classic Grotesque W01 Ex Md";
  margin-top: 58px;
  font-size: 15px;
  line-height: 20px;
  color: black;
  text-decoration: none; }

body.tpl-page-about .bottomText .header {
  margin-bottom: 10px; }

body.tpl-page-about .selectedClients,
body.tpl-page-about .biographies {
  float: left;
  width: 47%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

body.tpl-page-about .selectedClients {
  margin-right: 6%; }

body.tpl-page-about .biographies div {
  margin-bottom: 15px; }

body.tpl-page-about #content {
  width: auto;
  padding: 0px 15%; }

body.tpl-page-about .projectNav:hover {
  width: 23px; }

#clock-container, #clock-container * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

#clock-container {
  position: fixed;
  z-index: 999;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  padding: 10px;
  top: 25px;
  left: 65px;
  margin: 0 auto; }

#clock-container.inverted .tic-container .tic, #clock-container.inverted .hand-container .hand, #clock-container.inverted .hub-container .hub, body.archive #clock-container .tic-container .tic, body.archive #clock-container .hand-container .hand, body.archive #clock-container .hub-container .hub {
  background-color: white; }

#clock-container.inverted .hub-container .hub, body.archive #clock-container .hub-container .hub {
  -webkit-box-shadow: 0px 0px 1px 0px white;
  box-shadow: 0px 0px 1px 0px white; }

#clock-container.inverted .tic-container.double .tic, body.archive #clock-container .tic-container.double .tic {
  border-color: white !important; }

#clock {
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: calc(100% - 20px);
  height: calc(100% - 20px); }

#clock .tic-container, #clock .hand-container {
  /*background-color: rgba(0,255,0,0.25);*/
  height: 100%;
  width: 3px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto; }

#clock #tic-1 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
  -webkit-transition-delay: 30ms;
       -o-transition-delay: 30ms;
          transition-delay: 30ms; }

#clock #tic-2 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg);
  -webkit-transition-delay: 60ms;
       -o-transition-delay: 60ms;
          transition-delay: 60ms; }

#clock #tic-3 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transition-delay: 90ms;
       -o-transition-delay: 90ms;
          transition-delay: 90ms; }

#clock #tic-4 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg);
  -webkit-transition-delay: 120ms;
       -o-transition-delay: 120ms;
          transition-delay: 120ms; }

#clock #tic-5 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg);
  -webkit-transition-delay: 150ms;
       -o-transition-delay: 150ms;
          transition-delay: 150ms; }

#clock #tic-6 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-transition-delay: 180ms;
       -o-transition-delay: 180ms;
          transition-delay: 180ms; }

#clock #tic-7 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg);
  -webkit-transition-delay: 210ms;
       -o-transition-delay: 210ms;
          transition-delay: 210ms; }

#clock #tic-8 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg);
  -webkit-transition-delay: 240ms;
       -o-transition-delay: 240ms;
          transition-delay: 240ms; }

#clock #tic-9 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
  -webkit-transition-delay: 270ms;
       -o-transition-delay: 270ms;
          transition-delay: 270ms; }

#clock #tic-10 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg);
  -webkit-transition-delay: 300ms;
       -o-transition-delay: 300ms;
          transition-delay: 300ms; }

#clock #tic-11 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg);
  -webkit-transition-delay: 330ms;
       -o-transition-delay: 330ms;
          transition-delay: 330ms; }

#clock .tic-container.double {
  width: 9px; }

#clock .tic-container .tic, #clock .hand-container .hand {
  width: 100%;
  height: 8%;
  background-color: black;
  position: absolute; }

#clock .tic-container.double .tic:first-child {
  border-left: 3px solid black;
  border-right: 3px solid black;
  background-color: transparent; }

#clock .tic-container.double .tic:last-child {
  display: none; }

#clock .hub-container {
  width: 8%;
  height: 8%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto; }

#clock .hub {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: black;
  -webkit-transform: rotate(0) translate(0, 0);
      -ms-transform: rotate(0) translate(0, 0);
          transform: rotate(0) translate(0, 0);
  /* to ease the appearance of straight edges */
  -webkit-box-shadow: 0px 0px 1px 0px black;
  box-shadow: 0px 0px 1px 0px black; }

/*#clock .hand-container { background-color: rgba(255,0,255,0.25); }*/
#clock .hand-container .hand {
  bottom: 50%; }

#clock #hour {
  width: 4px; }

#clock #hour .hand {
  height: 30%;
  width: 4px;
  -webkit-transform: rotate(0) translate(0, 0);
      -ms-transform: rotate(0) translate(0, 0);
          transform: rotate(0) translate(0, 0); }

#clock #minute {
  width: 3px; }

#clock #minute .hand {
  height: 38%;
  width: 3px;
  -webkit-transform: rotate(0) translate(0, 0);
      -ms-transform: rotate(0) translate(0, 0);
          transform: rotate(0) translate(0, 0); }

#clock #second {
  width: 1px; }

#clock #second .hand {
  height: 40%;
  width: 1px;
  -webkit-transform: rotate(0) translate(0, 0);
      -ms-transform: rotate(0) translate(0, 0);
          transform: rotate(0) translate(0, 0); }

#clock.facetime #hub-01 .hub {
  /*left: 22%;
  top: 35%;*/
  -webkit-transform: translate(-40px, -22px);
      -ms-transform: translate(-40px, -22px);
          transform: translate(-40px, -22px); }

#clock.facetime #hub-02 .hub {
  /*top: 28%;
  left: 55%;*/
  -webkit-transform: translate(16px, -30px);
      -ms-transform: translate(16px, -30px);
          transform: translate(16px, -30px); }

#clock.facetime #hour .hand {
  /*top: 34%;
  left: 44px;
  transform: rotate(20deg);*/
  -webkit-transform: rotate(20deg) translate(52px, 10px);
      -ms-transform: rotate(20deg) translate(52px, 10px);
          transform: rotate(20deg) translate(52px, 10px); }

#clock.facetime #minute .hand {
  /*top: 27%;
  left: -12px;
  transform: rotate(5deg);*/
  -webkit-transform: rotate(5deg) translate(-10px, 25px);
      -ms-transform: rotate(5deg) translate(-10px, 25px);
          transform: rotate(5deg) translate(-10px, 25px); }

#clock.facetime #second .hand {
  /*top: 55%;
  left: -5px;
  transform: rotate(85deg);*/
  -webkit-transform: rotate(87deg) translate(79px, 10px);
      -ms-transform: rotate(87deg) translate(79px, 10px);
          transform: rotate(87deg) translate(79px, 10px); }

#clock.facetime .hand, #clock.facetime .hub {
  /*background-color: blue; */
  margin: 0; }

#clock:hover {
  cursor: pointer; }

#clock #second {
  -webkit-transition: -webkit-transform 0.6 ease;
  transition: -webkit-transform 0.6 ease;
  -o-transition: transform 0.6 ease;
  transition: transform 0.6 ease;
  transition: transform 0.6 ease, -webkit-transform 0.6 ease; }

#clock:hover .hand-container, #clock.facetime .hand-container, body.inverted #clock .hand-container {
  -webkit-transform: rotate(360deg) !important;
      -ms-transform: rotate(360deg) !important;
          transform: rotate(360deg) !important; }

#clock .tic-container {
  opacity: 0;
  -webkit-transition: opacity 30ms;
  -o-transition: opacity 30ms;
  transition: opacity 30ms; }

#clock-container.initialized .tic-container {
  opacity: 1; }

#clock-container #clock-parts {
  opacity: 0; }

#clock-container.initialized #clock-parts {
  opacity: 1;
  -webkit-transition: opacity 30ms 360ms;
  -o-transition: opacity 30ms 360ms;
  transition: opacity 30ms 360ms; }

#clock-container:hover {
  /*box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);*/ }

/*#clock.facetime .hand, #clock.facetime .hand-container, #clock.facetime .hub {
  transition: transform 5s ease;
}*/
#clock .hand, #clock .hub {
  -webkit-transition: -webkit-transform 5s ease;
  transition: -webkit-transform 5s ease;
  -o-transition: transform 5s ease;
  transition: transform 5s ease;
  transition: transform 5s ease, -webkit-transform 5s ease; }

/*# sourceMappingURL=../maps/main.css.map */