	


	.structure-char {
		  height: 0;
		}

		.body, .head, .eyes, .leftarm, .rightarm, .chair, .leftshoe, .rightshoe, .legs, .laptop {
		  background: url(images/character-new.png) 0 0 no-repeat;
		  width: 200px;
		  height: 200px;
		  // border: 1px dotted red;
		}

		.newcharacter, .torso, .body, .head, .eyes, .leftarm, .rightarm, .rightshoe, .legs, .laptop {
		  background-size: 543px;
		  position: absolute;
		  display: block;
		}

		.newcharacter {
		    width: 314px;
		    height: 285px;
		    left: 18%;
            top: 11.2%;
            margin-left: -212px;
		}

		
		@media screen and (max-width: 737px) {
			.newcharacter {
		        top: 5.5%;
			}
		}
		@media screen and (max-width: 480px) {
		
			.newcharacter{
		    left: 22%;
    		top: 3.5%;
			}
		}

		.chair {
		    position: absolute;
		    background-size: 398px;
		    top: 196px;
		    left: 105px;
		    width: 110px;
		    height: 89px;
		    background-position: -14px -301px;
		}

		.torso {
		    position: absolute;
		    display: block;
		    top: 3px;
		    left: 72px;
		    width: 144px;
		    height: 209px;
		    animation: sway 20s ease infinite;
		    transform-origin: 50% 100%;
		    
		}

		.body {
		    background-position: -38px -51px;
		    position: absolute;
		    display: block;
		    top: 106px;
		    left: 5px;
		    width: 160px;
		    height: 124px;
		}

		.head {
		    position: absolute;
		    top: 13px;
    		left: 44px;
		    width: 83px;
		    height: 103px;
		    background-position: -19px -186px;
		    transform-origin: 50% 70%;
		    animation: headTilt 20s ease infinite;
		}

		.eyes {
		    position: absolute;
		    top: 52px;
		    left: 21px;
		    width: 43px;
		    height: 13px;
		    background-position: 102px 236px;
		    animation: blink 10s steps(1) infinite, pan 10s ease-in-out infinite;
		}

		.leftarm {
		    position: absolute;
	        top: 147px;
    		left: 13px;
		    width: 83px;
		    height: 38px;
		    background-position: -158px -223px;
		    transform-origin: 9% 35%;
		    transform: rotateZ(0deg);
		    animation: typeLeft 0.4s linear infinite;
		}

		.rightarm {
		    position: absolute;
		    top: 161px;
    		left: 82px;
		    width: 71px;
		    height: 27px;
		    background-position: -254px -231px;
		    transform-origin: 90% 25%;
		    animation: typeLeft 0.4s linear infinite;
		}

		

		.legs {
		    position: absolute;
		    top: 212px;
		    left: 128px;
		    width: 62px;
		    height: 73px;
		    background-position: -276px -281px;
		}

		
		.laptop {
		    position: absolute;
		    top: 149px;
		    left: 113px;
		    width: 95px;
		    height: 58px;
		    background-position: -20px -316px;
		    transform-origin: 50% 100%;
		    animation: tapWobble 0.4s linear infinite;
		}

		@keyframes sway {
		  0%   { transform: rotateZ(0deg); }
		  20%  { transform: rotateZ(0deg); }
		  25%  { transform: rotateZ(4deg); }
		  45%  { transform: rotateZ(4deg); }
		  50%  { transform: rotateZ(0deg); }
		  70%  { transform: rotateZ(0deg); }
		  75%  { transform: rotateZ(-4deg); }
		  90%  { transform: rotateZ(-4deg); }
		  100% { transform: rotateZ(0deg); }
		}

		@keyframes headTilt {
		  0%   { transform: rotateZ(0deg); }
		  20%  { transform: rotateZ(0deg); }
		  25%  { transform: rotateZ(-4deg); }
		  35%  { transform: rotateZ(-4deg); }
		  38%  { transform: rotateZ(2deg); }
		  42%  { transform: rotateZ(2deg); }
		  45%  { transform: rotateZ(-4deg); }
		  50%  { transform: rotateZ(0deg); }
		  70%  { transform: rotateZ(0deg); }
		  82%  { transform: rotateZ(0deg); }
		  85%  { transform: rotateZ(4deg); }
		  90%  { transform: rotateZ(4deg); }
		  100% { transform: rotateZ(0deg); }
		}

		@keyframes typeLeft {
		  0%   { transform: rotateZ(0deg); }
		  25%  { transform: rotateZ(7deg); }
		  75%  { transform: rotateZ(-6deg); }
		  100% { transform: rotateZ(0deg); }
		}

		@keyframes typeRight {
		  0%   { transform: rotateZ(0deg); }
		  25%  { transform: rotateZ(-6deg); }
		  75%  { transform: rotateZ(7deg); }
		  100% { transform: rotateZ(0deg); }
		}

		@keyframes tapWobble {
		  0%   { transform: rotateZ(-0.2deg); }
		  50%  { transform: rotateZ(0.2deg); }
		  100% { transform: rotateZ(-0.2deg); }
		}

		@keyframes blink {
		  0%   {background-position: -102px -236px;}
		  94%  {background-position: -102px -237px;}
		  98%  {background-position: -102px -278px;}
		  100% {background-position: -102px -245px;}
		}

		@keyframes pan {
		  0%   {transform: translateX(-1px);}
		  49%   {transform: translateX(-1px);}
		  50%  {transform: translateX(1px);}
		  99%  {transform: translateX(1px);}
		  100% {transform: translateX(-1px);}
		}