.box {
  /* The box that will responsively resize */
  position: relative;
}



.box #mag {
  /* The static image helps responsively resizing the bounding box correctly */ 
  width: 100%;
  height: auto;
}

.box #imgI {
  /* Placing the cat absolutely and with percentage values makes it responsive within the bounding box */
  position: absolute;
  top: 15%;
  width: 8.5%;
  height: auto;
  z-index: 2;
}


.box #imgT {
  /* Placing the cat absolutely and with percentage values makes it responsive within the bounding box */
  position: absolute;
  top: 15%;
  width: 15.6%;
  height: auto;
  z-index: 1;
}

.box #imgMe {
  /* Placing the cat absolutely and with percentage values makes it responsive within the bounding box */
  position: absolute;
  top: 15%;
  width: 40%;
  height: auto;
  z-index: 3;
}
.box #imgG {
	width:20%; height: auto; position:absolute;
	z-index: 6;

}

.box #but {
   width:20%; height: auto; position:absolute;
  left: 42%;
  top: 35%;
    z-index: 5;
  
}

.box #imgP {
	width:80%; height: auto; position:absolute;
	    left: 12%;
		z-index: 5;
}


.box #imgM {
	width:80%; height: auto; position:absolute;
      left: 25%;
    bottom: 34.5%;
    z-index: 5;
          /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 0.5s; 
    /* When the animation is finished, start again */
    animation-iteration-count: infinite; 
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

#l1{
    top: 15%;
    left: 5%;
}

#l2{
    top: 15%;
    right: 5%;
}

.light
{
  position: absolute;
  z-index: 3;
-webkit-animation: spin1 2s infinite linear;
-moz-animation: spin1 2s infinite linear;
-o-animation: spin1 2s infinite linear;
-ms-animation: spin1 2s infinite linear;
animation: spin1 2s infinite linear;
    
}
 
@-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin1 {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin1 {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes spin1 {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}
@-keyframes spin1 {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}