@charset "UTF-8";
/***** SASS *****/
/***** FONTS *****/
@font-face {
  font-family: 'lcdmono2bold';
  src: url("../font/lcdm2b__-webfont.eot");
  src: url("../font/lcdm2b__-webfont.eot?#iefix") format("embedded-opentype"), url("../font/lcdm2b__-webfont.woff2") format("woff2"), url("../font/lcdm2b__-webfont.woff") format("woff"), url("../font/lcdm2b__-webfont.ttf") format("truetype"), url("../font/lcdm2b__-webfont.svg#lcdmono2bold") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'microgramma_d_otMdEx';
  src: url("../font/microgramma-d-ot-medium-extended_30404-webfont.eot");
  src: url("../font/microgramma-d-ot-medium-extended_30404-webfont.eot?#iefix") format("embedded-opentype"), url("../font/microgramma-d-ot-medium-extended_30404-webfont.woff") format("woff"), url("../font/microgramma-d-ot-medium-extended_30404-webfont.ttf") format("truetype"), url("../font/microgramma-d-ot-medium-extended_30404-webfont.svg#microgramma_d_otMdEx") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'digital-7_monoitalic';
  src: url("../font/digital-7_mono_italic-webfont.eot");
  src: url("../font/digital-7_mono_italic-webfont.eot?#iefix") format("embedded-opentype"), url("../font/digital-7_mono_italic-webfont.woff2") format("woff2"), url("../font/digital-7_mono_italic-webfont.woff") format("woff"), url("../font/digital-7_mono_italic-webfont.ttf") format("truetype"), url("../font/digital-7_mono_italic-webfont.svg#digital-7_monoitalic") format("svg");
  font-weight: normal;
  font-style: normal; }

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

/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?94494243#fontello') format('svg');
  }
}
*/
/* line 72, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }

/* line 107, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.icon-light-up:before {
  content: '\e800'; }

/* '' */
/***** *****/
/* line 112, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
*, *:before, *:after {
  box-sizing: border-box; }

/* line 116, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
body, html {
  background-color: black;
  height: 100%;
  width: 100%; }

/* line 121, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
body {
  display: table; }

/* line 125, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.overall-container {
  display: table-cell;
  vertical-align: middle; }

/* line 132, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.individual-time-circuit-wrapper-area {
  margin-left: auto;
  margin-right: auto;
  height: 195px;
  width: 960px;
  position: relative;
  box-sizing: content-box;
  /** border stuff **/
  border-top-style: solid;
  border-top-width: 3px;
  border-top-color: #CCC;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border-bottom-style: groove;
  border-bottom-width: 2px;
  border-bottom-color: #323232;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px; }

/* line 157, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.individual-time-circuit-wrapper-area:after {
  content: "";
  display: block;
  padding-top: 21%; }

/* line 162, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.destination {
  background-image: url("../img/mottled_metal_1.jpg"); }

/* line 165, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.present {
  background-image: url("../img/mottled_metal_2.jpg"); }

/* line 168, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.last-time-departed {
  background-image: url("../img/mottled_metal_3.jpg"); }

/* line 172, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.individual-time-circuit-content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0; }

/* line 180, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.console-display {
  display: inline-block; }

/* line 184, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.sticker-label, .footer-label, .am-label, .pm-label {
  font-family: 'microgramma_d_otMdEx';
  font-weight: 600;
  letter-spacing: 2px; }

/* line 190, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.footer-label {
  letter-spacing: 3px; }

/* line 194, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.sticker-label {
  display: inline-block;
  background-color: #8e1a0a;
  color: white;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 1.3em;
  margin-top: 17px; }

/* line 206, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.footer-label {
  background-color: black;
  color: white;
  margin-top: 10px;
  text-align: center;
  font-size: 1.5em; }

/* line 216, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.destination .month, .present .month, .last-time-departed .month {
  margin-left: 50px; }

/* line 217, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.destination .day, .present .day, .last-time-departed .day {
  margin-left: 65px; }

/* line 218, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.destination .year, .present .year, .last-time-departed .year {
  margin-left: 125px; }

/* line 219, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.destination .hour, .present .hour, .last-time-departed .hour {
  margin-left: 145px; }

/* line 220, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.destination .min, .present .min, .last-time-departed .min {
  margin-left: 65px; }

/* line 221, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.destination .footer-label {
  margin-left: 300px;
  width: 350px; }

/* line 225, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.present .footer-label {
  margin-left: 300px;
  width: 290px; }

/* line 230, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.last-time-departed .footer-label {
  margin-left: 250px;
  width: 400px; }

/* line 235, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.console-month {
  margin-left: 23px;
  text-align: center;
  width: 186px; }

/* line 240, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.console-month .faded-eights {
  width: 170px;
  text-align: center; }

/* line 246, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.console-day, .console-hour, .console-min {
  width: 115px; }

/* line 247, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.console-day {
  margin-left: 14px; }

/* line 248, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.console-year {
  margin-left: 25px; }

/***** AM PM stuff *****/
/* line 251, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.console-am-pm {
  position: relative;
  width: 49px;
  margin-right: -5px; }

/* line 257, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.am-label, .pm-label {
  position: absolute;
  left: -8px;
  background-color: #8e1a0a;
  color: white;
  font-size: 1.5em;
  line-height: 24px; }

/* line 265, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.am-label {
  bottom: 75px; }

/* line 268, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.pm-label {
  bottom: 24px; }

/***** Indicator light (LED style) stuff ****/
/* line 274, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.indicator-light {
  height: 17px;
  width: 17px;
  border-radius: 50%;
  margin-right: 3px; }

/* line 281, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.indicator-light.am {
  position: absolute;
  bottom: 55px;
  left: 5px; }

/* line 286, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.indicator-light.pm {
  position: absolute;
  bottom: 5px;
  left: 5px; }

/* line 292, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.console-colon-lights {
  position: relative;
  width: 19px; }

/* line 296, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.console-colon-lights .top {
  position: absolute;
  bottom: 45px;
  right: 3px; }

/* line 301, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.console-colon-lights .bottom {
  position: absolute;
  right: 3px;
  bottom: 20px; }

/***** mixin animation for blinking hh:mm lights *****/
/***** destination am pm dot lights *****/
/* line 329, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.destination .indicator-light.am.light-on,
.destination .indicator-light.pm.light-on,
.destination .console-colon-lights .top,
.destination .console-colon-lights .bottom {
  background-color: #FF6410;
  box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 7px 1px, inset #304701 0 -1px 4.5px, #FF6410 0 2px 12px; }

/* line 334, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.destination .indicator-light.am.light-off,
.destination .indicator-light.pm.light-off {
  background-color: #3E2917;
  box-shadow: inset -1px 2px 3px #ababab; }

/***** destination hh:mm lights *****/
/* line 341, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.destination .console-colon-lights .top,
.destination .console-colon-lights .bottom {
  -webkit-animation: blink-destination-lights 1s step-start infinite;
  animation: blink-destination-lights 1s step-start infinite; }

@-webkit-keyframes blink-destination-lights {
  0% {
    background-color: #3E2917;
    box-shadow: inset -1px 2px 3px #ababab; }
  50% {
    background-color: #FF6410;
    box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 7px 1px, inset #304701 0 -1px 4.5px, #FF6410 0 2px 12px; }
  100% {
    background-color: #3E2917;
    box-shadow: inset -1px 2px 3px #ababab; } }

@keyframes blink-destination-lights {
  0% {
    background-color: #3E2917;
    box-shadow: inset -1px 2px 3px #ababab; }
  50% {
    background-color: #FF6410;
    box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 7px 1px, inset #304701 0 -1px 4.5px, #FF6410 0 2px 12px; }
  100% {
    background-color: #3E2917;
    box-shadow: inset -1px 2px 3px #ababab; } }

/***** present am pm dot lights *****/
/* line 360, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.present .indicator-light.am.light-on,
.present .indicator-light.pm.light-on,
.present .console-colon-lights .top,
.present .console-colon-lights .bottom {
  background-color: #8AF250;
  box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 7px 1px, inset #304701 0 -1px 4.5px, #8AF250 0 2px 12px; }

/* line 365, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.present .indicator-light.am.light-off,
.present .indicator-light.pm.light-off {
  background-color: #0E1510;
  background-color: #330;
  box-shadow: inset -1px 2px 3px #ababab; }

/***** present hh:mm lights *****/
/* line 373, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.present .console-colon-lights .top,
.present .console-colon-lights .bottom {
  -webkit-animation: blink-present-lights 1s step-start infinite;
  animation: blink-present-lights 1s step-start infinite; }

@-webkit-keyframes blink-present-lights {
  0% {
    background-color: #0E1510;
    box-shadow: inset -1px 2px 3px #ababab; }
  50% {
    background-color: #8AF250;
    box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 7px 1px, inset #304701 0 -1px 4.5px, #8AF250 0 2px 12px; }
  100% {
    background-color: #0E1510;
    box-shadow: inset -1px 2px 3px #ababab; } }

@keyframes blink-present-lights {
  0% {
    background-color: #0E1510;
    box-shadow: inset -1px 2px 3px #ababab; }
  50% {
    background-color: #8AF250;
    box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 7px 1px, inset #304701 0 -1px 4.5px, #8AF250 0 2px 12px; }
  100% {
    background-color: #0E1510;
    box-shadow: inset -1px 2px 3px #ababab; } }

/***** last-time-departed am pm dot lights *****/
/* line 393, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.last-time-departed .indicator-light.am.light-on,
.last-time-departed .indicator-light.pm.light-on,
.last-time-departed .console-colon-lights .top,
.last-time-departed .console-colon-lights .bottom {
  background-color: #F4DF5C;
  box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 7px 1px, inset #304701 0 -1px 4.5px, #F4DF5C 0 2px 12px; }

/* line 398, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.last-time-departed .indicator-light.am.light-off,
.last-time-departed .indicator-light.pm.light-off {
  background-color: #330;
  box-shadow: inset -1px 2px 3px #ababab; }

/***** last-time-departed hh:mm lights *****/
/* line 405, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.last-time-departed .console-colon-lights .top,
.last-time-departed .console-colon-lights .bottom {
  -webkit-animation: blink-last-lights 1s step-start infinite;
  animation: blink-last-lights 1s step-start infinite; }

@-webkit-keyframes blink-last-lights {
  0% {
    background-color: #330;
    box-shadow: inset -1px 2px 3px #ababab; }
  50% {
    background-color: #F4DF5C;
    box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 7px 1px, inset #304701 0 -1px 4.5px, #F4DF5C 0 2px 12px; }
  100% {
    background-color: #330;
    box-shadow: inset -1px 2px 3px #ababab; } }

@keyframes blink-last-lights {
  0% {
    background-color: #330;
    box-shadow: inset -1px 2px 3px #ababab; }
  50% {
    background-color: #F4DF5C;
    box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 7px 1px, inset #304701 0 -1px 4.5px, #F4DF5C 0 2px 12px; }
  100% {
    background-color: #330;
    box-shadow: inset -1px 2px 3px #ababab; } }

/* line 421, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.lcd {
  background-color: black;
  border-radius: 4px;
  color: red;
  font-family: 'digital-7_monoitalic';
  font-size: 6.7em;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 5px;
  padding-left: 5px;
  margin-top: 11px;
  margin-right: 10px;
  line-height: 73px; }

/* line 442, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.destination .lcd {
  color: #FF6410; }

/* line 443, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.present .lcd {
  color: #67FC42; }

/* line 444, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.last-time-departed .lcd {
  color: #F4CE26; }

/* line 446, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.over {
  z-index: 101;
  position: absolute;
  top: 0px;
  height: 100%;
  width: 100%;
  background-color: transparent;
  pointer-events: none;
  -webkit-animation-name: lightUp;
  animation-name: lightUp;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s; }

@keyframes lightUp {
  0% {
    background: #000000; }
  30% {
    background: #000000; }
  60% {
    background: #000000; }
  100% {
    background: transparent; } }

@-webkit-keyframes lightUp {
  0% {
    background: #000000; }
  30% {
    background: #000000; }
  60% {
    background: #000000; }
  100% {
    background: transparent; } }

/* line 500, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.faded-eights {
  position: absolute;
  opacity: .15; }

/* line 504, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.destination .console-day .faded-eights {
  opacity: .25; }

/* line 507, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.destination .console-year .faded-eights {
  opacity: .3; }

/* line 510, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.destination .console-hour .faded-eights {
  opacity: .25; }

/* line 513, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.present .console-year .faded-eights {
  opacity: .2; }

/* line 516, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.last-time-departed .console-year .faded-eights {
  opacity: .2; }

/* line 519, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.last-time-departed .console-hour .faded-eights {
  opacity: .2; }

/* line 522, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.last-time-departed .console-min .faded-eights {
  opacity: .25; }

/* line 526, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.last-time-departed .footer-label {
  display: inline-block; }

/* line 530, /Users/lawrenceabaeo/code/back-to-the-future-time-circuits-using-front-end-tech/css/my-styles.scss */
.brightness {
  display: inline-block;
  float: right;
  margin-top: 15px;
  margin-right: 50px;
  background-color: #aaa;
  color: white; }

/*# sourceMappingURL=my-styles.css.map */