* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

body {
  overflow: hidden;
  margin: 0; }

#webcam, #canvas-blended {
  display: none; }

#my-video {
  display: none; }

.w {
  width: 1000px;
  margin: 0 auto;
  height: 750px;
  top: 50%;
  margin-top: -375px;
  position: absolute;
  left: 50%;
  margin-left: -500px;
  overflow: hidden; }

.title {
  cursor: pointer;
  z-index: 1;
  width: 1000px;
  height: 750px;
  background: white;
  position: absolute;
  top: 0;
  padding-top: 80px;
  left: 0;
  text-align: center;
  background: url(../assets/bg.jpg) 0 0; }
  .title h1 {
    -webkit-transform: translateZ(0);
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    /* Other transform properties here */
    position: absolute;
    top: 40px;
    left: 320px;
    font-family: 'Londrina Shadow', cursive;
    text-transform: uppercase;
    line-height: 0.8;
    -webkit-animation: scaleMe 1s ease 0 1 normal;
    -webkit-animation-fill-mode: forwards;
    color: #424242; }
    .title h1:hover {
      display: none; }
  .title img {
    -webkit-transform: translateZ(0);
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    /* Other transform properties here */
    -webkit-animation: rotateMe 1s ease 0 1 normal; }
    .title img:hover {
      display: none;
      -webkit-animation: rotateMe 1s ease 0 1 normal; }

@-webkit-keyframes rotateMe {
  0% {
    -webkit-transform: rotate(0); }

  100% {
    -webkit-transform: rotate(360deg); } }

@-webkit-keyframes scaleMe {
  0% {
    font-size: 10px; }

  100% {
    font-size: 43px; } }

.intro {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden; }
  .intro .left-diag {
    position: absolute;
    background: blue;
    width: 1000px;
    height: 750px; }
  .intro .right-diag {
    position: absolute;
    background: red;
    width: 1300px;
    height: 750px;
    -webkit-transform: rotate(0);
    -webkit-transform-origin: 0% 0%; }

#canvas-source {
  width: 1000px;
  height: 750px;
  outline: 10px solid black; }

#my-video {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5; }

.pattern-overlay {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHklEQVQIW2NkQAX/GZH4/4FsRpgAmAOSBBFwDkgAAIKuBATRTAAZAAAAAElFTkSuQmCC) repeat;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

#grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px; }

#grid div {
  width: 100px;
  height: 100px;
  float: left;
  -webkit-transform: translateZ(0);
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  /* Other transform properties here */ }
  #grid div span {
    width: 0;
    height: 0;
    border-radius: 0;
    background: white;
    display: inline-block;
    -webkit-transition: width 1s;
    margin: 0 auto; }
  #grid div:nth-child(even) span.active {
    -webkit-animation: colorMeEven 1s ease 0 1 normal; }
  #grid div:nth-child(odd) span.active {
    -webkit-animation: colorMeOdd 1s ease 0 1 normal; }

#note0, #note20, #note40, #note60 {
  font-size: 17px;
  text-align: center;
  color: #000;
  padding-top: 35px;
  background: white;
  font-family: Helvetica;
  text-transform: uppercase; }

@-webkit-keyframes colorMeEven {
  from {
    background: white;
    width: 0;
    height: 0;
    border-radius: 0; }

  to {
    background: grey;
    width: 80px;
    height: 80px;
    border-radius: 80px; } }

@-webkit-keyframes colorMeOdd {
  from {
    background: white;
    width: 0;
    height: 0;
    border-radius: 0; }

  to {
    background: black;
    width: 50px;
    height: 50px;
    border-radius: 50px; } }

/* css filters applied on video element */
.grayscale {
  -webkit-filter: grayscale(1); }

.sepia {
  -webkit-filter: sepia(1); }

.blur {
  -webkit-filter: blur(3px); }

.brightness {
  -webkit-filter: brightness(4); }

.contrast {
  -webkit-filter: contrast(4); }

.hue-rotate {
  -webkit-filter: hue-rotate(150deg); }

.saturate {
  -webkit-filter: saturate(4); }

.invert {
  -webkit-filter: invert(1); }