.accessories {
    max-width: 1400px;    
    max-height: 975px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: 0 auto;
    z-index: 0;
}

.accessories > img {
	position: absolute;
	opacity: 0;
}

.pencil1 {
  -webkit-animation-name: diagonal-slide;
  animation-name: diagonal-slide;
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  top: -260px;
  left: 345px;
}

@-webkit-keyframes diagonal-slide {
    0%		{ opacity: 0; transform: translatex(-50px) translatey(-50px); }
    100%	{ opacity: 1; transform: translatex(0) translatey(0); }
}

@-moz-keyframes diagonal-slide {
    0%		{ opacity: 0; transform: translatex(-50px) translatey(-50px); }
    100%	{ opacity: 1; transform: translatex(0) translatey(0);}
}

@-o-keyframes diagonal-slide {
    0%		{ opacity: 0; transform: translatex(-50px) translatey(-50px); }
    100%	{ opacity: 1; transform: translatex(0) translatey(0); }
}

@keyframes diagonal-slide {
    0%		{ opacity: 0; transform: translatex(-50px) translatey(-50px); }
    100%	{ opacity: 1; transform: translatex(0) translatey(0); }
}

.pencil2 {
  -webkit-animation-name: diagonal-slide;
  animation-name: diagonal-slide;
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  right: 290px;
  bottom: 315px;
}

.pen {
  -webkit-animation-name: pen;
  animation-name: pen;
  -webkit-animation-delay: 7s;
  animation-delay: 7s;
  bottom: 235px;
  right: -335px;
}

@-webkit-keyframes pen {
    0%		{ opacity: 0; transform: translatex(100px) translatey(-35px);}
    100%	{ opacity: 1; transform: translatex(0) translatey(0); }
}

@-moz-keyframes pen {
    0%		{ opacity: 0; transform: translatex(100px) translatey(-35px); }
    100%	{ opacity: 1; transform: translatex(0) translatey(0); }
}

@-o-keyframes pen {
    0%		{ opacity: 0; transform: translatex(100px) translatey(-35px);}
    100%	{ opacity: 1; transform: translatex(0) translatey(0); }
}

@keyframes pen {
    0%		{ opacity: 0; transform: translatex(100px) translatey(-35px); }
    100%	{ opacity: 1; transform: translatex(0) translatey(0); }
}

.paper {
	-webkit-animation-delay: 4s;
	animation-delay: 4s;
  right: 0;
  bottom: 150px;
  z-index: -1;
}

.passed {
	-webkit-animation-name: passed;
	animation-name: passed;
	-webkit-animation-delay: 8s;
	animation-delay: 8s;
  right: 95px;
  bottom: 460px;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

@-webkit-keyframes passed {
    from {
       opacity: 0;
     }

     50% {
       opacity: 0;
       -webkit-transform: scale3d(2, 2, 2);
       transform: scale3d(2, 2, 2);
     }

     to {
       opacity: 1;
     }
}

@-moz-keyframes passed {
    from {
       opacity: 0;
     }

     50% {
       opacity: 0;
       -webkit-transform: scale3d(2, 2, 2);
       transform: scale3d(2, 2, 2);
     }

     to {
       opacity: 1;
     }
}

@-o-keyframes passed {
    from {
       opacity: 0;
     }

     50% {
       opacity: 0;
       -webkit-transform: scale3d(2, 2, 2);
       transform: scale3d(2, 2, 2);
     }

     to {
       opacity: 1;
     }
}

@keyframes passed {
    from {
       opacity: 0;
     }

     50% {
       opacity: 0;
       -webkit-transform: scale3d(2, 2, 2);
       transform: scale3d(2, 2, 2);
     }

     to {
       opacity: 1;
     }
}

.show {
	opacity: 1!important;
}