body{
	background: #494A5F;
	color: #D5D6E2;
	font-weight: 500;
	font-size: 1.05em;
	font-family: "Microsoft YaHei","ËÎÌå","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
}

/**
 * Display the picture if it's hidden
 */

.visibleImage {
  display: block;
  visibility: visible;
}

/**
 * Setting up image background above the picture
 * to make it disapere while image is drawing
 */

@-webkit-keyframes imgBackground {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes imgBackground {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.imgBackground {
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: imgBackground;
  animation-name: imgBackground;
  position: absolute;
  height: inherit;
  width: inherit;
  z-index: 1000;
}

/**
 * 1st step: drawing borders with a pencil
 */

@-webkit-keyframes borderPencil {
  from {
    -webkit-filter: brightness(10) contrast(10) grayscale(1);
    opacity: 0;
  }

  15% {
    -webkit-filter: brightness(5) contrast(10) grayscale(1);
    opacity: .5;
  }

  to {
    -webkit-filter: brightness(3) contrast(10) grayscale(1);
    opacity: 1;
  }
}

@keyframes borderPencil {
  from {
    -webkit-filter: brightness(10) contrast(10) grayscale(1);
    filter: brightness(10) contrast(10) grayscale(1);
    opacity: 0;
  }

  15% {
    -webkit-filter: brightness(5) contrast(10) grayscale(1);
    filter: brightness(5) contrast(10) grayscale(1);
    opacity: .5;
  }

  to {
    -webkit-filter: brightness(3) contrast(10) grayscale(1);
    filter: brightness(3) contrast(10) grayscale(1);
    opacity: 1;
  }
}

.borderPencil {
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: borderPencil;
  animation-name: borderPencil;
}

/**
 * 2nd step: define better outlines and shades with a pencil
 */

@-webkit-keyframes pencilShades {
  from {
    -webkit-filter: brightness(3) contrast(10) grayscale(1);
  }

  to {
    -webkit-filter: brightness(2) contrast(2) grayscale(1);
  }
}

@keyframes pencilShades {
  from {
    -webkit-filter: brightness(3) contrast(10) grayscale(1);
    filter: brightness(3) contrast(10) grayscale(1);
  }

  to {
    -webkit-filter: brightness(2) contrast(2) grayscale(1);
    filter: brightness(2) contrast(2) grayscale(1);
  }
}

.pencilShades {
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: pencilShades;
  animation-name: pencilShades;
}

/**
 * 3nd step: give it some basic, very vanish colors
 */

@-webkit-keyframes colorShades {
  from {
    -webkit-filter: brightness(2) contrast(2) grayscale(1);
  }

  to {
    -webkit-filter: brightness(1.5) contrast(1) grayscale(0.4) saturate(0.8);
  }
}

@keyframes colorShades {
  from {
    -webkit-filter: brightness(2) contrast(2) grayscale(1);
    filter: brightness(2) contrast(2) grayscale(1);
  }

  to {
    -webkit-filter: brightness(1.5) contrast(1) grayscale(0.4) saturate(0.8);
    filter: brightness(1.5) contrast(1) grayscale(0.4) saturate(0.8);
  }
}

.colorShades {
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: colorShades;
  animation-name: colorShades;
}

/**
 * 4nd step: compleate the picture with all its colors (a bit more bright and alive)
 */

@-webkit-keyframes fullColors {
  from {
    -webkit-filter: brightness(1.5) contrast(1) grayscale(0.4) saturate(0.8);
  }

  to {
    -webkit-filter: brightness(1.05) contrast(1) grayscale(0) saturate(1.05);
  }
}

@keyframes fullColors {
  from {
    -webkit-filter: brightness(1.5) contrast(1) grayscale(0.4) saturate(0.8);
    filter: brightness(1.5) contrast(1) grayscale(0.4) saturate(0.8);
  }

  to {
    -webkit-filter: brightness(1.05) contrast(1) grayscale(0) saturate(1.05);
    filter: brightness(1.05) contrast(1) grayscale(0) saturate(1.05);
  }
}

.fullColors {
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: fullColors;
  animation-name: fullColors;
}