#characters
{
  display: flex;
  position: relative; 
  margin:  0 auto;
  top: 10px;
  overflow: hidden;

  justify-content: center;
}

#rope
{
  position: relative;
  background:  url('/images/game/rope-middle.png') 18px -1px no-repeat;
  height: 18px;
  width: 46%;
  background-size: 90%;
  top: 115px;
}

#playerleft
{
 position: relative;
 ' background-image: url('/images/game/char1_l_c.png');
  background-repeat: no-repeat;
  width: 200px;
  height: 206px;
  left: 0;

  background-size: 800%;
  z-index: 1000;
  margin-right: -20px;

}



.characterset1
{
  background-image: url('/images/game/char1_l_c.png') ;
    background-repeat: no-repeat;
}

.characterset2
{

  background-image: url('/images/game/char2_l_c.png')  ;
    background-repeat: no-repeat;
	top: 4px;
}

.characterset3
{
  background-image: url('/images/game/char3_l_c.png') ;
  background-repeat: no-repeat;
  top: 8px;
}

.characterset4
{
  background-image: url('/images/game/char4_l_c.png') ;
    background-repeat: no-repeat;
	  top: 2px;
}
	
#playerright
{
  position: relative;
  background-image: url('/images/game/char3_l_c.png');

  background-repeat: no-repeat;
  width: 200px;
  height: 206px;

  left: 0;
  top: 8px;
  background-size: 800%;
  z-index: 1000;
  
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);	
  margin-left: -34px;	  
}

.sweat, .sweat2
{
 position: absolute;
  background-image: url('/images/game/sw.png');
  background-repeat: no-repeat;
  width: 250px;
  height: 206px;

  left: -20px;
  top: -30px;
  background-position: -0 -990px  ;
  background-size: 760%;
  z-index: 1000;
}	

#grid
{
	position: relative;
    margin:  0 auto;
	top: -61px;
	width: 100%;

	text-align: center;
}

#gridpointer
{
	position: relative;
	left: 418px;
	top: 115px;
}

.playerleftframe1, .playerrightframe1
{   background-position: 0 0px !important;   }	

.playerleftframe2, .playerrightframe2
{   background-position: 14.2857% 0px !important;   }		

.playerleftframe3, .playerrightframe3
{   background-position: calc(14.2857% * 2) 0px !important;   }		

.playerleftframe4, .playerrightframe4
{   background-position: calc(14.2857% * 3) 0px !important;   }		

.playerleftframe5, .playerrightframe5
{   background-position: calc(14.2857% * 4) 0px !important;   }		

.playerleftframe6, .playerrightframe6
{   background-position: calc(14.2857% * 5) 0px !important;   }		

.playerleftframe7, .playerrightframe7
{   background-position: calc(14.2857% * 6) 0px !important;   }		

.playerleftframe8, .playerrightframe8
{   background-position: calc(14.2857% * 7) 0px !important;   }		


.sweatframe0
{   background-position:  -0 -990px  !important;   }	

.sweatframe1
{   background-position: -0 0px !important;   }	

.sweatframe2
{   background-position: -267.1px 0px !important;   }		

.sweatframe3
{   background-position: calc(-267.1px * 2) 0px !important;   }		

.sweatframe4
{   background-position: calc(-267.1px * 3) 0px !important;   }		

.sweatframe5
{   background-position: calc(-267.1px * 4) 0px !important;   }		

.sweatframe6
{   background-position: calc(-267.1px * 5) 0px !important;   }		

.sweatframe7
{   background-position: calc(-267.1px * 6) 0px !important;   }		

/* ************** */
/* Mobile Version */
/* ************** */

@media (max-width: 1100px)  and (min-width: 128px)
{
	
#characters
{

  display: flex;
  position: relative; 

  top: 0px;
  overflow: hidden;
  min-height: 170px;
  margin-right: 15px;
}


#playerleft
{
	height: auto;
  width: 19%;

}
#playerright
{
  height: auto;
  width: 19%;
  top: 5.1px;
  margin-left: -0px;	

}

#rope
{
	margin-top: 11.0%;
	top: auto;
	  background-size: 100%;
}


#grid
{
	position: relative;
    margin:  0 auto;

	width: 100%;
	border: 1px solid #555;
	text-align: center;
	padding-right: 26%;
	padding-left: 26%;
	margin-bottom: -95px;
}

.sweat, .sweat2
{
	height: 50px;
	width: auto;
}


	
}

@media (max-width: 800px)  and (min-width: 700px)
{
#grid
{

	top: -81px;

}
}

@media (max-width: 700px)  and (min-width: 600px)
{
#grid
{

	top: -95px;

}
}

@media (max-width: 600px)  and (min-width: 500px)
{
#grid
{

	top: -105px;

}
}

@media (max-width: 500px)  and (min-width: 128px)
{
#grid
{

	top: -120px;

}
}