정보실

웹학교

정보실

html 순수 HTML로 화려한 게임창을 구현..

본문

https://codepen.io/reallygoodemails/pen/ZvaWvM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en" xml:lang="en">
<head>
     <title>Super Mail Quest</title>
     
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     
          <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="x-apple-disable-message-reformatting" />
     <meta name="robots" content="noindex,nofollow" />
     <style type="text/css">
.sc{
	display:none;
}
@supports (animation:game){
	#interactive:checked ~ .wrapper [class].fallback{
		display:none;
	}
	#interactive:checked ~ .wrapper .game{
		display:block !important;
		max-height:none !important;
	}
}
#sc0:checked ~ * .sc0,
#sc1:checked ~ * .sc1,
#sc1b:checked ~ * .sc1,
#sc2:checked ~ * .sc2,
#sc2b:checked ~ * .sc2,
#sc2c:checked ~ * .sc2,
#sc2d:checked ~ * .sc2,
#sc3:checked ~ * .sc3,
#sc3b:checked ~ * .sc3,
#sc3c:checked ~ * .sc3,
#sc3d:checked ~ * .sc3,
#sc3e:checked ~ * .sc3,
#sc3f:checked ~ * .sc3,
#sc3g:checked ~ * .sc3,
#sc4:checked ~ * .sc4,
#sc4a1:checked ~ * .sc4,
#sc4a2:checked ~ * .sc4,
#sc4b:checked ~ * .sc4,
#sc4b1:checked ~ * .sc4,
#sc4b2:checked ~ * .sc4,
#sc4b3:checked ~ * .sc4,
#sc4b4:checked ~ * .sc4,
#sc4b5:checked ~ * .sc4,
#sc4b6:checked ~ * .sc4,
#sc4c:checked ~ * .sc4,
#sc4c1:checked ~ * .sc4,
#sc4c2:checked ~ * .sc4,
#sc4d:checked ~ * .sc4,
#sc4d1:checked ~ * .sc4,
#sc4d2:checked ~ * .sc4,
#sc4d3:checked ~ * .sc4,
#sc4d4:checked ~ * .sc4,
#sc4d5:checked ~ * .sc4,
#sc4d6:checked ~ * .sc4,
#sc4e:checked ~ * .sc4,
#sc4e1:checked ~ * .sc4,
#sc4e2:checked ~ * .sc4,
#sc5:checked ~ * .sc5,
#sc5b:checked ~ * .sc5,
#sc5c:checked ~ * .sc5,
#sc5d:checked ~ * .sc5,
#sc5e:checked ~ * .sc5,
#sc5f:checked ~ * .sc5,
#sc6:checked ~ * .sc6,
#sc6b:checked ~ * .sc6,
#sc6c:checked ~ * .sc6,
#sc6d:checked ~ * .sc6,
#sc6e:checked ~ * .sc6,
#sc6f:checked ~ * .sc6,
#sc6g:checked ~ * .sc6,
#sc6h:checked ~ * .sc6,
#sc6i:checked ~ * .sc6,
#sc7:checked ~ * .sc7,
#sc7b:checked ~ * .sc7,
#sc7c:checked ~ * .sc7,
#sc7d:checked ~ * .sc7,
#sc7e:checked ~ * .sc7,
#sc7f:checked ~ * .sc7,
#sc7g:checked ~ * .sc7,
#sc8:checked ~ * .sc8,
#sc8b:checked ~ * .sc8,
#sc8c:checked ~ * .sc8,
#sc8d:checked ~ * .sc8,
#sc8e:checked ~ * .sc8,
#sc8f:checked ~ * .sc8,
#sc8g:checked ~ * .sc8,
#sc8h:checked ~ * .sc8,
#sc8i:checked ~ * .sc8,
#sc8j:checked ~ * .sc8,
#sc8k:checked ~ * .sc8,
#sc8l:checked ~ * .sc8 {
	display: block;
	-webkit-animation: fade-in 1s linear forwards;
	-webkit-animation-iteration-count: 1;
}
/* Sub scs */
#sc1:checked ~ * #ct-1b,
#sc1b:checked ~ * #ct-1a,
#sc2:checked ~ * #ct-2b, #ct-2c, #ct-2d,
#sc2b:checked ~ * #ct-2a, #ct-2c, #ct-2d,
#sc2c:checked ~ * #ct-2a, #ct-2b, #ct-2d,
#sc2d:checked ~ * #ct-2a, #ct-2b, #ct-2c,
#sc3:checked ~ * #ct-3b, #ct-3c, #ct-3d, #ct-3e, #ct-3f, #ct-3g,
#sc3b:checked ~ * #ct-3a, #ct-3c, #ct-3d, #ct-3e, #ct-3f, #ct-3g, 
#sc3c:checked ~ * #ct-3a, #ct-3b, #ct-3d, #ct-3e, #ct-3f, #ct-3g,
#sc3d:checked ~ * #ct-3a, #ct-3b, #ct-3c, #ct-3e, #ct-3f, #ct-3g,
#sc3e:checked ~ * #ct-3a, #ct-3b, #ct-3c, #ct-3d, #ct-3f, #ct-3g,
#sc3f:checked ~ * #ct-3a, #ct-3b, #ct-3c, #ct-3d, #ct-3e, #ct-3g,
#sc3g:checked ~ * #ct-3a, #ct-3b, #ct-3c, #ct-3d, #ct-3e, #ct-3f,
#sc4:checked ~ * #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4a1:checked ~ * #ct-4a, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4a2:checked ~ * #ct-4a, #ct-4a1, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4b:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2, 
#sc4b1:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2, 
#sc4b2:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2, 
#sc4b3:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2, 
#sc4b4:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b2, #ct-4b2, #ct-4b3, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4b5:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b2, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2, 
#sc4b6:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b2, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d,#ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6,  #ct-4e, #ct-4e1, #ct-4e2, 
#sc4c:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4c1:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4c2:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4d:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4d1:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #csont-4d, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4d2:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4d3:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4d4:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4d5:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4d6:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4e, #ct-4e1, #ct-4e2,
#sc4e:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e1, #ct-4e2,
#sc4e1:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6,  #ct-4e, #ct-4e2,
#sc4e2:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1,
#sc5:checked ~ * #ct-5b, #ct-5c, #ct-5d, #ct-5e, #ct-5f,
#sc5b:checked ~ * #ct-5a, #ct-5c, #ct-5d, #ct-5e, #ct-5f,
#sc5c:checked ~ * #ct-5a, #ct-5b, #ct-5d, #ct-5e, #ct-5f,
#sc5d:checked ~ * #ct-5a, #ct-5b, #ct-5c, #ct-5e, #ct-5f,
#sc5e:checked ~ * #ct-5a, #ct-5b, #ct-5c, #ct-5d, #ct-5f,
#sc5f:checked ~ * #ct-5a, #ct-5b, #ct-5c, #ct-5d, #ct-5e,
#sc6:checked ~ * #ct-6b, #ct-6c, #ct-6d, #ct-6e, #ct-6f, #ct-6g, #ct-6h, #ct-6i,
#sc6b:checked ~ * #ct-6a, #ct-6c, #ct-6d, #ct-6e, #ct-6f, #ct-6g, #ct-6h, #ct-6i, 
#sc6c:checked ~ * #ct-6a, #ct-6b, #ct-6d, #ct-6e, #ct-6f, #ct-6g, #ct-6h, #ct-6i,
#sc6d:checked ~ * #ct-6a, #ct-6b, #ct-6c, #ct-6e, #ct-6f, #ct-6g, #ct-6h, #ct-6i,
#sc6e:checked ~ * #ct-6a, #ct-6b, #ct-6c, #ct-6d, #ct-6f, #ct-6g, #ct-6h, #ct-6i,
#sc6f:checked ~ * #ct-6a, #ct-6b, #ct-6c, #ct-6d, #ct-6e, #ct-6g, #ct-6h, #ct-6i,
#sc6g:checked ~ * #ct-6a, #ct-6b, #ct-6c, #ct-6d, #ct-6e, #ct-6f, #ct-6h, #ct-6i,
#sc6h:checked ~ * #ct-6a, #ct-6b, #ct-6c, #ct-6d, #ct-6e, #ct-6f, #ct-6g, #ct-6i,
#sc6i:checked ~ * #ct-6a, #ct-6b, #ct-6c, #ct-6d, #ct-6e, #ct-6f, #ct-6g, #ct-6h,
#sc7:checked ~ * #ct-7b, #ct-7c, #ct-7d, #ct-7e, #ct-7f, #ct-7g,
#sc7b:checked ~ * #ct-7a, #ct-7c, #ct-7d, #ct-7e, #ct-7f, #ct-7g, 
#sc7c:checked ~ * #ct-7a, #ct-7b, #ct-7d, #ct-7e, #ct-7f, #ct-7g,
#sc7d:checked ~ * #ct-7a, #ct-7b, #ct-7c, #ct-7e, #ct-7f, #ct-7g,
#sc7e:checked ~ * #ct-7a, #ct-7b, #ct-7c, #ct-7d, #ct-7f, #ct-7g,
#sc7f:checked ~ * #ct-7a, #ct-7b, #ct-7c, #ct-7d, #ct-7e, #ct-7g,
#sc7g:checked ~ * #ct-7a, #ct-7b, #ct-7c, #ct-7d, #ct-7e, #ct-7f,
#sc8:checked ~ * #ct-8b, #ct-8c, #ct-8d, #ct-8e, #ct-8f, #ct-8g, #ct-8h, #ct-8i, #ct-8j, #ct-8k, #ct-8l,
#sc8b:checked ~ * #ct-8a, #ct-8c, #ct-8d, #ct-8e, #ct-8f, #ct-8g, #ct-8h, #ct-8i, #ct-8j, #ct-8k, #ct-8l, 
#sc8c:checked ~ * #ct-8a, #ct-8b, #ct-8d, #ct-8e, #ct-8f, #ct-8g, #ct-8h, #ct-8i, #ct-8j, #ct-8k, #ct-8l,
#sc8d:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8e, #ct-8f, #ct-8g, #ct-8h, #ct-8i, #ct-8j, #ct-8k, #ct-8l,
#sc8e:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8d, #ct-8f, #ct-8g, #ct-8h, #ct-8i, #ct-8j, #ct-8k, #ct-8l,
#sc8f:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8d, #ct-8e, #ct-8g, #ct-8h, #ct-8i, #ct-8j, #ct-8k, #ct-8l,
#sc8g:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8d, #ct-8e, #ct-8f, #ct-8h, #ct-8i, #ct-8j, #ct-8k, #ct-8l,
#sc8h:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8d, #ct-8e, #ct-8f, #ct-8g, #ct-8i, #ct-8j, #ct-8k, #ct-8l,
#sc8i:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8d, #ct-8e, #ct-8f, #ct-8g, #ct-8h, #ct-8j, #ct-8k, #ct-8l,
#sc8j:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8d, #ct-8e, #ct-8f, #ct-8g, #ct-8h, #ct-8i, #ct-8k, #ct-8l,
#sc8k:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8d, #ct-8e, #ct-8f, #ct-8g, #ct-8h, #ct-8i, #ct-8j, #ct-8l,
#sc8l:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8d, #ct-8e, #ct-8f, #ct-8g, #ct-8h, #ct-8i, #ct-8j, #ct-8k { 
	display: none; 
}
#sc1b:checked ~ * #ct-1b,
#sc2b:checked ~ * #ct-2b,
#sc2c:checked ~ * #ct-2c,
#sc2d:checked ~ * #ct-2d,
#sc3b:checked ~ * #ct-3b,
#sc3c:checked ~ * #ct-3c,
#sc3d:checked ~ * #ct-3d,
#sc3e:checked ~ * #ct-3e,
#sc3f:checked ~ * #ct-3f,
#sc3g:checked ~ * #ct-3g,
#sc4a:checked ~ * #ct-4a,
#sc4a1:checked ~ * #ct-4a1,
#sc4a2:checked ~ * #ct-4a2,
#sc4b:checked ~ * #ct-4b,
#sc4b1:checked ~ * #ct-4b1,
#sc4b2:checked ~ * #ct-4b2,
#sc4b3:checked ~ * #ct-4b3,
#sc4b4:checked ~ * #ct-4b4,
#sc4b5:checked ~ * #ct-4b5,
#sc4b6:checked ~ * #ct-4b6,
#sc4c:checked ~ * #ct-4c,
#sc4c1:checked ~ * #ct-4c1,
#sc4c2:checked ~ * #ct-4c2,
#sc4d:checked ~ * #ct-4d,
#sc4d1:checked ~ * #ct-4d1,
#sc4d2:checked ~ * #ct-4d2,
#sc4d3:checked ~ * #ct-4d3,
#sc4d4:checked ~ * #ct-4d4,
#sc4d5:checked ~ * #ct-4d5,
#sc4d6:checked ~ * #ct-4d6,
#sc4e:checked ~ * #ct-4e,
#sc4e1:checked ~ * #ct-4e1,
#sc4e2:checked ~ * #ct-4e2,
#sc5b:checked ~ * #ct-5b,
#sc5c:checked ~ * #ct-5c,
#sc5d:checked ~ * #ct-5d,
#sc5e:checked ~ * #ct-5e,
#sc5f:checked ~ * #ct-5f,
#sc6b:checked ~ * #ct-6b,
#sc6c:checked ~ * #ct-6c,
#sc6d:checked ~ * #ct-6d,
#sc6e:checked ~ * #ct-6e,
#sc6f:checked ~ * #ct-6f,
#sc6g:checked ~ * #ct-6g,
#sc6h:checked ~ * #ct-6h,
#sc6i:checked ~ * #ct-6i,
#sc7b:checked ~ * #ct-7b,
#sc7c:checked ~ * #ct-7c,
#sc7d:checked ~ * #ct-7d,
#sc7e:checked ~ * #ct-7e,
#sc7f:checked ~ * #ct-7f,
#sc7g:checked ~ * #ct-7g,
#sc8b:checked ~ * #ct-8b,
#sc8c:checked ~ * #ct-8c,
#sc8d:checked ~ * #ct-8d,
#sc8e:checked ~ * #ct-8e,
#sc8f:checked ~ * #ct-8f,
#sc8g:checked ~ * #ct-8g,
#sc8h:checked ~ * #ct-8h,
#sc8i:checked ~ * #ct-8i,
#sc8j:checked ~ * #ct-8j,
#sc8k:checked ~ * #ct-8k,
#sc8l:checked ~ * #ct-8l { 
	display: block;
	-webkit-animation: fade-in 1s;
	-webkit-animation-iteration-count: 1 linear forwards;
}
.bg-sc {
	width: 60em;
	height: 42em;
	position: relative;
	overflow: hidden;
}
.bg-0{background-image: url('http://i1.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-0_1.jpg'); background-position: center bottom;}
.bg-1{background-image: url('http://i2.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-1_2.jpg'); background-position: center bottom;}
.bg-2{background-image: url('http://i3.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-2_3.jpg'); background-position: center bottom;}
.bg-3{background-image: url('http://i4.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-3_4.jpg'); background-position: center bottom;}
.bg-4{background-image: url('http://i5.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-4_5.jpg'); background-position: center bottom;}
.bg-5{background-image: url('http://i6.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-5_6.jpg'); background-position: center bottom;}
.bg-6{background-image: url('http://i7.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-6_7.jpg'); background-position: center bottom;}
.bg-7{background-image: url('http://i8.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-7_8.jpg'); background-position: center bottom;}
.bg-8{background-image: url('http://i9.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-8_9.png'); background-position: center bottom;}
.ui {
	background: #2b2122;
	background: -webkit-linear-gradient(top, #2b2122 0%,#000000 100%);
	background: linear-gradient(top bottom, #2b2122 0%,#000000 100%);
	padding: 2em 3em;
	width: 54em;
}
.panel {
	background: #0d082d;
	background: -webkit-linear-gradient(top, #333861 0%,#0d082d 100%);
	background: linear-gradient(top bottom, #333861 0%,#0d082d 100%);
	border: 5px solid #ffffff;
	mso-border-alt:none;
	-webkit-border-radius: 1em;
	border-radius: 1em;
	width: 53em;
}
.cont {
	width: 90%;
	padding: 5%;
}
/* GENERIC sc STYLES */
.hero-w-t {
	width:6em;
	position: relative;
	height:6.4em;
	background-repeat:no-repeat!important;
	background-image:url('http://i5.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-w-t-sprite_45.png');
	-webkit-animation:sprite .5s steps(3) 7 forwards;
}
.hero-w-r {
	width:6em;
	position: relative;
	height:6.4em;
	background-repeat:no-repeat!important;
	background-image:url('http://i6.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-w-r-sprite_46.png');
	-webkit-animation:sprite .6s steps(3) 6 forwards;
}
.hero-w-b {
	width:6em;
	position: relative;
	height:6.4em;
	background-repeat:no-repeat!important;
	background-image:url('http://i7.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-w-b-sprite_47.png');
	-webkit-animation:sprite .6s steps(5) 7 forwards;
}
.hero-w-l {
	width:6em;
	position: relative;
	height:6.4em;
	background-image:url('http://i8.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-w-l-sprite_48.png');
	-webkit-animation:sprite .6s steps(3) 6 forwards;
}
.hero-e-t {
	margin: 29em 0 0 27em;
	-webkit-animation: entrance-t 4s;
	position: absolute;
	z-index:10;
}
.hero-e-r {
	margin: 25em 0 0 38em;
	-webkit-animation: entrance-r 4s;
	position: absolute;
	z-index:10;
}
.hero-e-b {
	margin: 32em 0 0 27em;
	-webkit-animation: entrance-b 4s;
	position: absolute;
	z-index:10;
}	
.hero-e-l {
	margin: 25em 0 0 18em;
	-webkit-animation: entrance-l 4s;
	position: absolute;
	z-index:10;
}
/* sc 0 STYLES */
.logo{
	padding:3em 0 0 0;
	width: 90%; 
	height: auto; 
	-webkit-animation: logo 3.5s;
}
.hero-container {
	position: relative;
	background-image: url('http://i9.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-anim_49.gif'); background-position: center bottom;
	background-size: cover;
	width: 60em;
	height: 8.3em;
	margin: 16.9em 0 0 0;
}
.sc-0-ui label h2 {
	-webkit-animation: blink 2s linear infinite;
}
/* sc 1 STYLES */	
#sc1:checked ~ * .grandolf,
#sc1:checked ~ * .dmarkster,
#sc1:checked ~ * .obiwon {
	display: none;
}
#sc1b:checked ~ * .grandolf {
	display: block;
	margin: 28em 0 0 40em;
	-webkit-animation:jump-for-joy .6s ease-in infinite;
}
#sc1b:checked ~ * .dmarkster {
	display: block;
	margin: 18em 0 0 27.5em;
	-webkit-animation:jump-for-joy .8s ease-in infinite;
	-webkit-animation-delay: 3.1s;
}
#sc1b:checked ~ * .fade-in {
	display: block;
	opacity: 0;
	-webkit-animation: transport-in 2s forwards;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 2.5s;
}
#sc1b:checked ~ * .obiwon {
	display: block;
	margin: 28em 0 0 15em;
	-webkit-animation:jump-for-joy .7s ease-in infinite;
	-webkit-animation-delay: .3s;
}
#sc1b:checked ~ * .fireworks {
	display: block;
	width: 60em;
	height: 42em; 
	position: absolute;
	background-image: url('http://i10.cmail20.com/ei/j/8A/D18/873/044703/csimport/fireworks_50.gif');
	background-position: center top;
	background-size:60em 42em; 
}
/* sc 2 STYLES */
.cat {
	margin: 22em 0 0 16em;
	position: absolute;
}
#laser {
	margin: 28em 0 0 23em;
	position: absolute;
	z-index: 13;
	display: none;
}
#poof {
	margin: 23em 0 0 18em;
	position: absolute;
	display: none;
	z-index: 5;
}
#spam {
	margin: 27.5em 0 0 38em;
	position: absolute;
	z-index: 12;
	display: none;
}
#sc2c:checked ~ * .hero-e-r{margin: 28em 0 0 38em;}
#sc2c:checked ~ * .hero-w-r{
	background-image:url('http://i1.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-death_51.png');	
	background-size: 7em 4.4em;
	width: 7em;
	height: 4.4em;
}
#sc2d:checked ~ * #laser{
	display: block;
	-webkit-animation: shot-fired .5s forwards;
	-webkit-animation-iteration-count: 1;
}
#sc2c:checked ~ * #laser{
	display: block;
	-webkit-animation: target-accuired .2s forwards;
	-webkit-animation-iteration-count: 1;
}
#sc2d:checked ~ * #spam{
	display: block;
	-webkit-animation: shield-me-up 1s forwards;
	-webkit-animation-iteration-count: 1;
}
#sc2d:checked ~ * #poof{
	display: block;
	width:8.5em;
	height:11.8em;
	background-repeat:no-repeat!important;
	background-image:url('http://i2.cmail20.com/ei/j/8A/D18/873/044703/csimport/smoke_52.png');
	-webkit-animation: sprite 1s steps(6) 1 forwards;
}
#sc2d:checked ~ * .cat{
	-webkit-animation: smoke-the-cat 1.5s forwards;
	-webkit-animation-iteration-count: 1;
}
/* sc 3 STYLES */
.grandolf {
	margin: 22em 0 0 36em;
	position: absolute;
}
#sc3g:checked ~ * .hero-e-l{
	-webkit-animation: body-shot 1s forwards;
	-webkit-animation-iteration-count: 1;
}
/* sc 4 STYLES */
.dmarkster {
	display: none;
	position: absolute;
	margin: 18em 0 0 28em;
	z-index: 10;
}
#sc4:checked ~ * .hero-e-b,
#sc4a1:checked ~ * .hero-e-b,
#sc4a2:checked ~ * .hero-e-b,
#sc4b:checked ~ * .hero-e-b,
#sc4b1:checked ~ * .hero-e-b,
#sc4b2:checked ~ * .hero-e-b,
#sc4b3:checked ~ * .hero-e-b,
#sc4b4:checked ~ * .hero-e-b,
#sc4b5:checked ~ * .hero-e-b,
#sc4b5:checked ~ * .hero-e-b,
#sc4b6:checked ~ * .hero-e-b,
#sc4d:checked ~ * .hero-e-b,
#sc4d1:checked ~ * .hero-e-b,
#sc4d2:checked ~ * .hero-e-b,
#sc4d3:checked ~ * .hero-e-b,
#sc4d4:checked ~ * .hero-e-b,
#sc4d5:checked ~ * .hero-e-b,
#sc4d6:checked ~ * .hero-e-b {
	display: none;
}
#sc4b:checked ~ * .hero-w-l,
#sc4d:checked ~ * .hero-w-l {
	background-position: 100% 0;
	-webkit-animation: sprite-rev .6s steps(3) 6 forwards;
}
#sc4c:checked ~ * .hero-e-b,
#sc4c1:checked ~ * .hero-e-b,
#sc4c2:checked ~ * .hero-e-b,
#sc4e:checked ~ * .hero-e-b,
#sc4e1:checked ~ * .hero-e-b,
#sc4e2:checked ~ * .hero-e-b {
	display: block;
}
#sc4c:checked ~ * .hero-e-l,
#sc4c1:checked ~ * .hero-e-l,
#sc4c2:checked ~ * .hero-e-l,
#sc4e:checked ~ * .hero-e-l,
#sc4e1:checked ~ * .hero-e-l,
#sc4e2:checked ~ * .hero-e-l {
	display: none;
}
.dungeon-ts {
	position: absolute;
	width: 60em;
	height: 9.4em;
	top: 0;
	overflow: hidden;
}
.dungeon-ms {
	position: absolute;
	margin: 11.1em 0 0 0;
	width: 60em;
	height: 13.5em;
	overflow: hidden;
}
.ts-1, .ts-2, .ts-3, .ts-4 {display: none; position: absolute; width: 19.4em; height: auto;}
.ts-5 {display: none; position: absolute; width: 19.4em; height: auto;}
.ms-1, .ms-2, .ms-3, .ms-4, .ms-p1, .ms-p2 {display: none; position: absolute; width: 17.3em; height: auto;}
.lvl-up {
	display: none;
	position: absolute;
	margin: 0 0 0 35%;
	bottom: 0;
	z-index: 6;
}
#sc4c:checked ~ * .lvl-up,
#sc4c1:checked ~ * .lvl-up,
#sc4c2:checked ~ * .lvl-up,
#sc4d:checked ~ * .lvl-up,
#sc4e:checked ~ * .lvl-up,
#sc4e1:checked ~ * .lvl-up,
#sc4e2:checked ~ * .lvl-up {
	display:block;
}
#sc4b:checked ~ * .rh-wall,
#sc4b:checked ~ * .ts-2,
#sc4b:checked ~ * .ms-2,
#sc4b:checked ~ * .ms-4,
#sc4b:checked ~ * .mimic-cont,
#sc4d:checked ~ * .rh-wall,
#sc4d:checked ~ * .lair,
#sc4d:checked ~ * .ts-2,
#sc4d:checked ~ * .ms-2,
#sc4d:checked ~ * .ms-4 {
	-webkit-animation: in-r 4s forwards;
	-webkit-animation-iteration-count: 1;
}
#sc4b:checked ~ * .ts-1,
#sc4b:checked ~ * .ts-4,
#sc4b:checked ~ * .ms-1,
#sc4d:checked ~ * .lh-wall,
#sc4d:checked ~ * .ts-3,
#sc4d:checked ~ * .ms-1,
#sc4d:checked ~ * .ms-3,
#sc4d:checked ~ * .lvl-up {
	-webkit-animation: out-l 4s forwards;
	-webkit-animation-iteration-count: 1;
}
.lh-wall {
	display: none;
	position: absolute;
	margin: 0 0 0 0;
	left: 0;
	z-index: 5;
}
#sc4c:checked ~ * .lh-wall,
#sc4c1:checked ~ * .lh-wall,
#sc4c2:checked ~ * .lh-wall,
#sc4d:checked ~ * .lh-wall,
#sc4e:checked ~ * .lh-wall,
#sc4e1:checked ~ * .lh-wall,
#sc4e2:checked ~ * .lh-wall {
	display:block;
}
.rh-wall {
	display: none;
	position: absolute;
	margin: 0 0 0 0;
	right: 0;
	z-index: 0;
}
#sc4b:checked ~ * .rh-wall,
#sc4b1:checked ~ * .rh-wall,
#sc4b2:checked ~ * .rh-wall,
#sc4b3:checked ~ * .rh-wall,
#sc4b4:checked ~ * .rh-wall,
#sc4b5:checked ~ * .rh-wall,
#sc4b6:checked ~ * .rh-wall,
#sc4d:checked ~ * .rh-wall,
#sc4d1:checked ~ * .rh-wall,
#sc4d2:checked ~ * .rh-wall,
#sc4d3:checked ~ * .rh-wall,
#sc4d4:checked ~ * .rh-wall,
#sc4d5:checked ~ * .rh-wall,
#sc4d6:checked ~ * .rh-wall,
#sc4e:checked ~ * .rh-wall,
#sc4e1:checked ~ * .rh-wall,
#sc4e2:checked ~ * .rh-wall {
	display:block;
}
/* 4a */
#sc4:checked ~ * .dmarkster,
#sc4a1:checked ~ * .dmarkster,
#sc4c:checked ~ * .dmarkster,
#sc4c1:checked ~ * .dmarkster,
#sc4c2:checked ~ * .dmarkster,
#sc4e:checked ~ * .dmarkster,
#sc4e1:checked ~ * .dmarkster{
	display: block;
	-webkit-animation: transport-in 2s forwards;
	-webkit-animation-iteration-count: 1;
}
#sc4a2:checked ~ * .dmarkster,
#sc4c2:checked ~ * .dmarkster,
#sc4e2:checked ~ * .dmarkster {
	display: block;
	-webkit-animation: transport-out 2s forwards;
	-webkit-animation-iteration-count: 1;
}
#sc4:checked ~ * .ts-1,
#sc4a1:checked ~ * .ts-1,
#sc4a2:checked ~ * .ts-1,
#sc4b:checked ~ * .ts-1 {
	display:block;
	padding: 0 0 0 5%;
}
#sc4:checked ~ * .ts-4,
#sc4a1:checked ~ * .ts-4,
#sc4a2:checked ~ * .ts-4,
#sc4b:checked ~ * .ts-4 {
	display:block;
	padding: 0 0 0 60%;
}
#sc4:checked ~ * .ms-1,
#sc4a1:checked ~ * .ms-1,
#sc4a2:checked ~ * .ms-1,
#sc4b:checked ~ * .ms-1 {
	display:block;
	padding: 0 0 0 35%;
}
/* 4b */
.mimic-cont {
	display: none;
	position: absolute;
	width:13em;
	height:9em;
	margin: 23em 0 0 36em;
	z-index: 2;
}
.mimic {
	background-size:129.6em 9em;
	background-image:url('http://i3.cmail20.com/ei/j/8A/D18/873/044703/csimport/char-mimic_53.png')!important;
	background-position: 0 0;
	background-repeat: no-repeat;
}
.twinkie {
	display: none;
	position: absolute;
	width:6em;
	margin: 26em 0 0 20em;
	z-index: 20;
}
#sc4b:checked ~ * .ts-2,
#sc4b1:checked ~ * .ts-2,
#sc4b2:checked ~ * .ts-2,
#sc4b3:checked ~ * .ts-2,
#sc4b4:checked ~ * .ts-2,
#sc4b5:checked ~ * .ts-2,
#sc4b6:checked ~ * .ts-2 {
	display:block;
	padding: 0 0 0 55%;
}
#sc4b:checked ~ * .ms-2,
#sc4b1:checked ~ * .ms-2,
#sc4b2:checked ~ * .ms-2,
#sc4b3:checked ~ * .ms-2,
#sc4b4:checked ~ * .ms-2,
#sc4b5:checked ~ * .ms-2,
#sc4b6:checked ~ * .ms-2 {
	display:block;
}
#sc4b:checked ~ * .ms-4,
#sc4b1:checked ~ * .ms-4,
#sc4b2:checked ~ * .ms-4,
#sc4b3:checked ~ * .ms-4,
#sc4b4:checked ~ * .ms-4,
#sc4b5:checked ~ * .ms-4,
#sc4b6:checked ~ * .ms-4 {
	display:block;
	padding: 0 0 0 35%;
}
#sc4b:checked ~ * .mimic-cont,
#sc4b1:checked ~ * .mimic-cont,
#sc4b2:checked ~ * .mimic-cont,
#sc4b3:checked ~ * .mimic-cont,
#sc4b4:checked ~ * .mimic-cont,
#sc4b5:checked ~ * .mimic-cont,
#sc4b6:checked ~ * .mimic-cont {
	display: block!important;
}
#sc4b:checked ~ * .mimic,
#sc4b1:checked ~ * .mimic {
	display: block!important;
	width:13em;
	height:9.1em;
	background-size:129.6em 9em;
	background-position: 0 0;
	background-image:url('http://i3.cmail20.com/ei/j/8A/D18/873/044703/csimport/char-mimic_53.png')!important;
}
#sc4b2:checked ~ * .mimic,
#sc4b3:checked ~ * .mimic,
#sc4b4:checked ~ * .mimic,
#sc4b5:checked ~ * .mimic,
#sc4b6:checked ~ * .mimic {
	display: block!important;
	width:13em;
	height:9.1em;
	background-size:129.6em 9em;
	background-position: 100% 0;
	background-image:url('http://i3.cmail20.com/ei/j/8A/D18/873/044703/csimport/char-mimic_53.png')!important;
}
#sc4b3:checked ~ * .hero-e-l,
#sc4b4:checked ~ * .hero-e-l  {
	-webkit-animation: none;
}
#sc4b1:checked ~ * .hero-w-l,
#sc4b2:checked ~ * .hero-w-l,
#sc4b3:checked ~ * .hero-w-l,
#sc4b4:checked ~ * .hero-w-l {
	-webkit-animation: none;
}
#sc4b1:checked ~ * .mimic  {
	-webkit-animation: boo .6s steps(9) 1 forwards;
}
#sc4b2:checked ~ * .hero-e-l  {
	-webkit-animation: jump-b .5s steps(9) 1 forwards;
}
#sc4b5:checked ~ * .hero-e-l,
#sc4b6:checked ~ * .hero-e-l {
	-webkit-animation: jump-f .6s steps(9) 1 forwards;
}
#sc4b4:checked ~ * .twinkie  {
	display: block;
	-webkit-animation: twinkie-in-the-hole .5s 1 forwards;
	transition-timing-function: ease-in-out;
}
#sc4b4:checked ~ * .mimic  {
	-webkit-animation: back-up-mofo 1.0s steps(9) 1 forwards;
}
/* 4c */
#sc4c:checked ~ * .ts-3,
#sc4c1:checked ~ * .ts-3,
#sc4c2:checked ~ * .ts-3,
#sc4d:checked ~ * .ts-3 {
	display:block;
	padding: 0 0 0 35%;
}
#sc4c:checked ~ * .ms-1,
#sc4c1:checked ~ * .ms-1,
#sc4c2:checked ~ * .ms-1,
#sc4d:checked ~ * .ms-1 {
	display:block;
	padding: 0 0 0 10%;
}
#sc4c:checked ~ * .ms-3,
#sc4c1:checked ~ * .ms-3,
#sc4c2:checked ~ * .ms-3,
#sc4d:checked ~ * .ms-3 {
	display:block;
	padding: 0 0 0 45%;
}
#sc4c:checked ~ * .hero-e-l {
	margin: 290px 0 0 270px;
	-webkit-animation: entrance-b 4s;
	position: absolute;
}
/* 4d */
#sc4d:checked ~ * .ts-2,
#sc4d1:checked ~ * .ts-2,
#sc4d2:checked ~ * .ts-2,
#sc4d3:checked ~ * .ts-2,
#sc4d4:checked ~ * .ts-2,
#sc4d5:checked ~ * .ts-2,
#sc4d6:checked ~ * .ts-2 {
	display:block;
	padding: 0 0 0 50%;
}
#sc4d:checked ~ * .ms-2,
#sc4d1:checked ~ * .ms-2,
#sc4d2:checked ~ * .ms-2,
#sc4d3:checked ~ * .ms-2,
#sc4d4:checked ~ * .ms-2,
#sc4d5:checked ~ * .ms-2,
#sc4d6:checked ~ * .ms-2 {
	display:block;
	padding: 0 0 0 5%;
}
#sc4d:checked ~ * .ms-4,
#sc4d1:checked ~ * .ms-4,
#sc4d2:checked ~ * .ms-4,
#sc4d3:checked ~ * .ms-4,
#sc4d4:checked ~ * .ms-4,
#sc4d5:checked ~ * .ms-4,
#sc4d6:checked ~ * .ms-4 {
	display:block;
	padding: 0 0 0 35%;
}
#sc4d2:checked ~ * .spidey,
#sc4d3:checked ~ * .spidey,
#sc4d4:checked ~ * .spidey,
#sc4d5:checked ~ * .spidey,
#sc4d6:checked ~ * .spidey {
	display:block;
}
#sc4d:checked ~ * .lair,
#sc4d1:checked ~ * .lair,
#sc4d2:checked ~ * .lair,
#sc4d3:checked ~ * .lair,
#sc4d4:checked ~ * .lair,
#sc4d5:checked ~ * .lair,
#sc4d6:checked ~ * .lair {
	display: block;
}
#sc4d2:checked ~ * .hero-e-l,
#sc4d2:checked ~ * .spidey,
#sc4d3:checked ~ * .hero-e-l,
#sc4d1:checked ~ * .hero-w-l,
#sc4d2:checked ~ * .hero-w-l,
#sc4d3:checked ~ * .hero-w-l,
#sc4d5:checked ~ * .hero-w-l,
#sc4d6:checked ~ * .hero-w-l {
	-webkit-animation: none;
}
.spidey {
	display: none;
	position: absolute;
	margin: 2em 0 0 14em;
	z-index: 11;
}
.lair {
	display: none;
	position: absolute;
	margin: 0;
	z-index: 6;
}
.spidey-sword {
	display: none;
	position: absolute;
	margin: 22.5em 0 0 20.5em;
	z-index: 11;
}
.web {
	display: none;
	position: absolute;
	margin: 26em 0 0 18em;
	z-index: 12;
}
.spidey-shield {
	margin: 28em 0 0 21em;
	position: absolute;
	z-index: 12;
	display: none;
}
#sc4d1:checked ~ * .spidey {
	display: block;
	-webkit-animation: suprise 1.2s linear forwards;
}
#sc4d1:checked ~ * .hero-e-l {
	display: block;
	-webkit-animation: jump-b .5s steps(9) 1 forwards;
}
#sc4d2:checked ~ * .spidey-sword {
	display: block;
	-webkit-transform-origin: 50% 80%;
	-webkit-animation: swing .2s linear forwards;
	-webkit-animation-delay:.2s;
}
#sc4d2:checked ~ * .web {
	display: block;
	-webkit-animation: web-sling .4s linear forwards; 
}
#sc4d3:checked ~ * .spidey-sword2 {
	display: block;
	-webkit-transform-origin: 50% 80%;
	-webkit-animation: swing-two .4s linear forwards;
}
#sc4d3:checked ~ * .spidey {
	display: block;
	-webkit-animation: take-that 1.5s linear forwards;
}
#sc4d4:checked ~ * .spidey {
	display: block;
	-webkit-animation: gotcha 3s linear forwards;
}
#sc4d4:checked ~ * .hero-e-l {
	display: block;
	-webkit-animation: bites-the-dust 3s linear forwards;
}
#sc4d5:checked ~ * .spidey {
	display: block;
	-webkit-animation: gotcha 3s linear forwards;
}
#sc4d5:checked ~ * .hero-e-l {
	display: block;
	-webkit-animation: bites-the-dust 3s linear forwards;
}
#sc4d5:checked ~ * .web {
	display: block;
	-webkit-animation: web-sling-two 3s linear forwards; 
}
#sc4d6:checked ~ * .spidey {
	display: block;
	-webkit-animation: gotcha 3s linear forwards;
}
#sc4d6:checked ~ * .hero-e-l {
	display: block;
	-webkit-animation: bites-the-dust 3s linear forwards;
}
#sc4d6:checked ~ * .spidey-shield {
	display: block;
	-webkit-animation: shield-me-up .6s linear forwards;
}
/* 4e */
#sc4e:checked ~ * .ts-5,
#sc4e1:checked ~ * .ts-5,
#sc4e2:checked ~ * .ts-5 {
	display:block;
	padding: 0 0 0 35%;
}
#sc4e:checked ~ * .ms-p1,
#sc4e1:checked ~ * .ms-p1,
#sc4e2:checked ~ * .ms-p1 {
	display:block;
	padding: 0 0 0 10%;
}
#sc4e:checked ~ * .ms-p2,
#sc4e1:checked ~ * .ms-p2,
#sc4e2:checked ~ * .ms-p2 {
	display:block;
	padding: 0 0 0 55%;
}
#sc4e:checked ~ * .hero-e-l,
#sc4e1:checked ~ * .hero-e-l,
#sc4e2:checked ~ * .hero-e-l {
	margin: 290px 0 0 270px;
	-webkit-animation: entrance-b 5s!important;
	position: absolute;
}
#sc4e1:checked ~ * .hero-e-l,
#sc4e2:checked ~ * .hero-e-l {
	margin: 290px 0 0 270px;
}		
#sc4e:checked ~ * .hero-w-l,
#sc4e1:checked ~ * .hero-w-l,
#sc4e2:checked ~ * .hero-w-l  {
	width:6em;
	position: relative;
	height:6.4em;
	background-repeat:no-repeat!important;
	background-image:url('http://i7.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-w-b-sprite_47.png');
	-webkit-animation:sprite .6s steps(5) 7 forwards; 
}
/* sc 5 STYLES */
.obiwon {
	margin: 235px 0 0 170px;
	width: 60px;
	height: 78px;
	position: absolute;
}
#sc5e:checked ~ * .obiwon{
	-webkit-animation-delay: .2s;
	-webkit-animation: eject 2s forwards;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 1s;
	transform-origin: 50% 50%;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}
#sc5f:checked ~ * .hero-e-r{
	-webkit-animation-delay: .2s;
	-webkit-animation: eject-hero 2s forwards;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 1s;
	transform-origin: 50% 50%;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}
/* sc 6 STYLES */
.boulder {
	margin: 40px 0 0 200px;
	position: absolute;
	z-index: 13;
}
.stone-1 {
	background-image:url('http://i4.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc6-2010-off_54.png');
	margin: 255px 0 0 210px;
	width: 50px;
	height: 50px;
	background-size: 50px 50px;
	position: absolute;
}
.stone-2 {
	background-image:url('http://i5.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc6-2013-off_55.png');
	margin: 255px 0 0 280px;
	width: 50px;
	height: 50px;
	background-size: 50px 50px;
	position: absolute;
}
.stone-3 {
	background-image:url('http://i6.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc6-2007-off_56.png');
	margin: 255px 0 0 350px;
	width: 50px;
	height: 50px;
	background-size: 50px 50px;
	position: absolute;
}
#sc6e:checked ~ * .hero-w-r {
	background-image:url('http://i1.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-death_51.png');	
	background-size: 70px 44px;
	width: 70px;
	height: 44px;
}
#sc6b:checked ~ * .stone-1,
#sc6e:checked ~ * .stone-1,
#sc6g:checked ~ * .stone-1,
#sc6h:checked ~ * .stone-1,
#sc6i:checked ~ * .stone-1{
	background-image:url('http://i7.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc6-2010-on_57.png');
}
#sc6c:checked ~ * .stone-2,
#sc6e:checked ~ * .stone-2,
#sc6f:checked ~ * .stone-2,
#sc6h:checked ~ * .stone-2,
#sc6i:checked ~ * .stone-2 {
	background-image:url('http://i8.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc6-2013-on_58.png');
}
#sc6d:checked ~ * .stone-3,
#sc6f:checked ~ * .stone-3,
#sc6g:checked ~ * .stone-3,
#sc6h:checked ~ * .stone-3,
#sc6i:checked ~ * .stone-3 {
	background-image:url('http://i9.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc6-2007-on_59.png');
}
#sc6i:checked ~ * .boulder {
	-webkit-animation-delay: .2s;
	-webkit-animation: boulder-n-roll 2s forwards;
	-webkit-animation-iteration-count: 1;
	transform-origin: 50% 50%;
}
#sc6h:checked ~ * .boulder {
	-webkit-animation: boulder-n-roll-is-dead 2s forwards;
	-webkit-animation-iteration-count: 1;
	transform-origin: 50% 50%;
}
#sc6h:checked ~ * .hero-w-b {
	background-image:url('http://i1.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-death_51.png');	
	background-size: 70px 44px;
	width: 70px;
	height: 44px;
}
/* sc 7 STYLES */
.toady-tongue{
	margin: 28em 0 0 28em;
	z-index: 11;
	position: absolute;
	display: none;
}
.toady {
	margin: 20em 0 0 33em;
	z-index: 5;
	position: absolute;
}
.sword1 {
	display: none;
	position: absolute;
	z-index: 11;
}
.sword2 {
	display: none;
	position: absolute;
	z-index: 11;
}
.tree {
	margin: 15em 0 0 19em;;
	position: absolute;
}
#sc7:checked ~ * .hero-e-l {
	margin: 28em 0 0 10em;
}
#sc7:checked ~ * .toady,
#sc7c:checked ~ * .toady {
	-webkit-transform: scaleX(-1);
}
#sc7b:checked ~ * .hero-e-l {
	margin: 28em 0 0 10em;
	-webkit-animation:tree .5s linear forwards;
}
#sc7b:checked ~ * .hero-w-l,
#sc7c:checked ~ * .hero-w-l {
	background-position: 100% 0;
	-webkit-animation: sprite-rev .6s steps(3) 2 forwards;
}
#sc7c:checked ~ * .hero-e-l {
	margin: 28em 0 0 10em;
	-webkit-animation:toad .5s linear forwards;
}
#sc7d:checked ~ * .hero-e-l {
	margin: 28em 0 0 10em;
	-webkit-animation:hero-attack .5s linear forwards;
}
#sc7d:checked ~ * .toady-tongue{
	display: block;
	-webkit-animation:toad-attack .4s linear forwards;
	-webkit-transform-origin:100% 50%;
}
#sc7d:checked ~ * .sword1{
	display: block;
	margin: 19.5em 0 0 22.5em;
	-webkit-transform-origin: 50% 80%;
	-webkit-animation:sword-attack .5s linear forwards;
}
#sc7e:checked ~ * .hero-e-l {
	margin: 34em 0 0 20em;
	-webkit-animation:hero-attack-two 1.5s linear forwards;
}
#sc7e:checked ~ * .sword2 {
	display: block;
	margin: 31.7em 0 0 22.3em;
	-webkit-transform-origin: 50% 80%;
	-webkit-animation:sword-attack-two 1.5s linear forwards;
}
#sc7e:checked ~ * .toady {
	-webkit-animation:toad-turn 1.5s linear forwards;
}
#sc7f:checked ~ * .hero-e-l {
	margin: 22em 0 0 20em;
	-webkit-animation:dodge .3s linear forwards;
}
#sc7f:checked ~ * .hero-w-l  {
	-webkit-animation: none;
}
#sc7f:checked ~ * .toady-tongue{
	display: block;
	-webkit-animation:toad-tree 1.5s linear forwards;
	-webkit-transform-origin:100% 50%;
}
#sc7f:checked ~ * .tree{
	-webkit-animation:roll-tree 1.5s linear forwards;
}
#sc7g:checked ~ * .hero-e-l {
	margin: 34em 0 0 20em;
	-webkit-animation:runaway 1.5s linear forwards;
}
#sc7g:checked ~ * .hero-w-l  {
	background-position: 100% 0;
	-webkit-transform: scaleX(-1);
	-webkit-animation: sprite .6s steps(3) 2 forwards;
}
#sc7g:checked ~ * .toady-tongue{
	display: block;
	-webkit-animation:toad-attack-long 1.5s linear forwards;
	-webkit-transform:rotate(30deg);
	-webkit-transform-origin:100% 50%;
}
/* sc 8 STYLES */
.warlock {
	position: absolute;
	margin: 22em 0 0 35em;
}
.warlock img {
	width:15em!important;
	height:auto;
}
.blast-1 { 
	display: none;
	position: absolute;
	margin: 23em 0 0 30em;
	z-index: 2;
}
.blast-2 { 
	display: none;
	position: absolute;
	margin: 28em 0 0 30em;
	z-index: 12;
}
.blast-3 { 
	display: none;
	position: absolute;
	margin: 33em 0 0 30em;
	z-index: 12;
}
.sword {
	display: none;
	position: absolute;
	margin: 25.4em 0 0 12.2em;
	z-index: 11;
}
#shield {
	opacity: 0;
	margin: 31em 0 0 20em;
	position: absolute;
	z-index: 12;
}
#sc8:checked ~ * .hero-e-l,
#sc8b:checked ~ * .hero-e-l,
#sc8c:checked ~ * .hero-e-l,
#sc8d:checked ~ * .hero-e-l,
#sc8e:checked ~ * .hero-e-l,
#sc8f:checked ~ * .hero-e-l,
#sc8g:checked ~ * .hero-e-l,
#sc8i:checked ~ * .hero-e-l,
#sc8j:checked ~ * .hero-e-l,
#sc8l:checked ~ * .hero-e-l {
	margin: 28em 0 0 10em;
}
#sc8:checked ~ * .sc,
#sc8b:checked ~ * .sc,
#sc8c:checked ~ * .sc,
#sc8d:checked ~ * .sc,
#sc8e:checked ~ * .sc,
#sc8f:checked ~ * .sc,
#sc8g:checked ~ * .sc,
#sc8h:checked ~ * .sc,
#sc8i:checked ~ * .sc,
#sc8j:checked ~ * .sc,
#sc8k:checked ~ * .sc {
background: #21022d;
}
#sc8l:checked ~ * .sc {
animation: let-there-be-light 1s linear forwards;
}
#sc8c:checked ~ * .blast-2,
#sc8c:checked ~ * .blast-3,
#sc8f:checked ~ * .blast-4,
#sc8f:checked ~ * .blast-6 {
	display: block;
	-webkit-animation: blast-r-one .8s linear forwards;
}
#sc8c:checked ~ * .hero-e-l,
#sc8f:checked ~ * .hero-e-l,
#sc8j:checked ~ * .hero-e-l {
	-webkit-animation: move-on-up .5s linear forwards;
}
#sc8d:checked ~ * .blast-1,
#sc8d:checked ~ * .blast-5 {
	display: block;
	-webkit-animation: blast-r-two .8s linear forwards;
}
#sc8d:checked ~ * .hero-e-l {
	margin: 28em 0 0 10em;
	-webkit-animation: none;
}
#sc8e:checked ~ * .blast-end {
	display: block!important;
	-webkit-animation: blast-death .3s linear forwards;
}
#sc8e:checked ~ * .hero-e-l{
	-webkit-animation: death .3s linear forwards;
}
#sc8g:checked ~ * .hero-e-l,
#sc8g:checked ~ * .sword {
	-webkit-animation: head-on .5s linear forwards;
}
#sc8g:checked ~ * #shield{
	-webkit-animation: shield-me-up .3s linear forwards;
	-webkit-animation-delay: .2s;
}
#sc8g:checked ~ * .warlock {
	-webkit-animation: lets-fight .5s linear forwards;
}
#sc8h:checked ~ * .warlock {
	-webkit-animation: lets-fight-clash .5s linear forwards;
}
#sc8h:checked ~ * .hero-e-l{
	margin: 28em 0 0 10em;
	display: block;
	-webkit-animation: head-on .5s linear forwards;
}
#sc8h:checked ~ * .sword{
	display: block;
	-webkit-transform-origin: 50% 80%;
	-webkit-animation: head-on-swing .5s linear forwards;
}
#sc8i:checked ~ * .warlock,
#sc8j:checked ~ * .warlock {
	-webkit-animation: doom .5s linear forwards;
	z-index: 11;			
}
#sc8i:checked ~ * .hero-e-l {
	margin: 28em 0 0 5em;
	-webkit-animation: none!important;
}
#sc8i:checked ~ * .sword {
	display:block;
	margin: 25.4em 0 0 7.2em;
	-webkit-transform-origin: 50% 80%;
	-webkit-animation:spin-out .5s linear forwards;
	-webkit-animation-delay:.7s;
}
#sc8i:checked ~ * .hero-w-l{
	-webkit-animation: death linear forwards .5s;
	-webkit-animation-delay:.5s;
}
#sc8j:checked ~ * .hero-e-l {
	margin: 28em 0 0 5em !important;
	-webkit-animation-delay:.5s;
}
#sc8k:checked ~ * .sword {
	display: block;
	margin: 25.4em 0 0 12.2em;
	-webkit-transform-origin: 50% 80%;
	-webkit-animation: caught-it .35s linear forwards;
}
#sc8k:checked ~ * .hero-e-l{
	margin: 28em 0 0 5em !important;
	-webkit-animation: none;
}
#sc8k:checked ~ * .warlock {
	margin:22em 0 0 13em;
}
#sc8k:checked ~ * .final-blast{
	display: block;
	margin: 30em 0 0 13em ;
	-webkit-animation: final-blast .3s linear forwards;
}
#sc8k:checked ~ * .hero-w-l{
	-webkit-animation: poof .3s linear forwards;
}
#sc8l:checked ~ * .hero-e-l {
	margin: 28em 0 0 5em;
	-webkit-animation: none;
}
#sc8l:checked ~ * .warlock {
	margin: 22em 0 0 13em;
	-webkit-animation: final-death .7s linear forwards;			
}
#sc8l:checked ~ * .sword{
	display: block;
	margin: 25.5em 0 0 7.5em !important;
	-webkit-transform-origin: 50% 80%;
	-webkit-animation: final-blow .2s linear forwards;
}
/************* MOBILE CLASSES *************/
@media only screen and (max-width: 550px), only screen and (max-device-width: 550px) {
	
	/* GAME STYLES */
	.bg-sc {
		width: 100vw;
		height: 70vw;
		position: relative;
	}
	.bg-0, .bg-1, .bg-2, .bg-3, .bg-4, .bg-5, .bg-6, .bg-7, .bg-8{background-size: cover;}
	
	.ground {
		width: 100vw!important;
		height: 4.2vw;
	}
	.ui {
		width: 96vw!important;
		padding: 4vw 2vw;		
	}
	.panel {
		width: 90vw;
		height: auto;
	}
	.hero-w-t {
		width:16vw;
		height:17vw;
		background-size:64vw 17vw;
	}
	
	.hero-w-r {
		width:16vw;
		height:17vw;
		background-size: 64vw 17vw;
	}
	.hero-w-b {
		width:16vw;
		height:17vw;
		background-size: 96vw 17vw;
	}
	.hero-w-l {
		width:16vw;
		height:17vw;
		background-size: 64vw 17vw;
	}		
	.hero-e-t {
		margin: 45vw 0 0 43vw;
	}
	.hero-e-r {
		margin: 35vw 0 0 70vw;
	}
	.hero-e-b {
		margin: 45vw 0 0 45vw;
	}	
	.hero-e-l {
		margin: 35vw 0 0 20vw;
	}
	/* sc 0 STYLES */
	.logo{
		padding:10vw 0 0 0;
		width: 90vw; 
		height: auto;
		-webkit-animation: logo 3.5s;
	}
	.hero-container {
		position: absolute;
		width: 100vw;
		height: 20vw;
		bottom: 0!important;
	}
	.hero-container img{
		height: 20vw;
		overflow: hidden
	}
	/* sc 1 STYLES */
	#sc1b:checked ~ * .grandolf {
		margin: 37vw 0 0 67vw;
	}
	#sc1b:checked ~ * .dmarkster {
		margin: 20vw 0 0 44vw !important;
	}
	#sc1b:checked ~ * .obiwon {
		margin: 42vw 0 0 20vw;
	}
	#sc1b:checked ~ * .fireworks {
		width: 100vw;
		height: 70vw; 
		background-size:100vw 70vw; 
	}
	/* sc 2 STYLES */
	
	.cat {
		margin: 25vw 0 0 6vw;
	}
	.cat img {
		width:25vw!important ;
		height:auto;
	}
	#laser {
		margin: 40vw 0 0 23vw;
	}
	#laser img {
		width:15vw!important;
		height:auto;
	}
	#poof {
		margin: 26vw 0 0 8vw;
		width:22vw!important;
		height:auto;
	}
	#spam {
		margin: 37vw 0 0 69vw;
	}
	#spam img {
		width:10vw!important;
		height:auto;
	}
	#sc2c:checked ~ * .hero-w-r {
		background-image:url('http://i1.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-death_51.png');	
		background-size: 20vw 13vw;
		width:20vw;
		height:13vw;
	}
	#sc2c:checked ~ * .hero-e-r {
		margin: 39vw 0 0 70vw!important;
	}
	/* sc 3 STYLES */
	.grandolf {
		margin: 28vw 0 0 60vw;
	}
	.grandolf img {
		width: 15vw!important;
		height: auto;
	}
	/* sc 4 STYLES */
	.dungeon-ts {
		width: 100vw;
		height: 15.5vw;
		top: 0;
	}
	.dungeon-ms {
		margin: 18vw 0 0 0;
		width: 100vw;
		height: 23.2vw;
	}
	.lh-wall {
		width:12vw!important;
	}
	.lh-wall img {
		width:12vw!important;
	}
	.rh-wall {
		width:12vw!important;
	}
	.rh-wall img {
		width:12vw!important;
	}
	.lvl-up {
		width:35vw!important;
	}
	.lvl-up img {
		width:35vw!important;
		height: auto;
	}
	
	.dmarkster {
		margin: 22vw 0 0 46vw;
	}
	.dmarkster img {
		width: 13vw!important;
		height: auto;
	}
	.mimic-cont {
		width:28.9vw!important;
		height:20vw!important;
		margin: 32vw 0 0 55vw!important;
	}
	.mimic {
		width:28.9vw!important;
		height:20vw!important;
		background-size:289vw 20vw!important;
		background-position: 0 0;
	}
	.mimic-cont {
		display: none;
		position: absolute;
		height:90px;
		width:130px;
		margin: 230px 0 0 360px;
		z-index: 2;
	}
	.mimic {
		background-size:1296px 90px;
		background-image:url('http://i3.cmail20.com/ei/j/8A/D18/873/044703/csimport/char-mimic_53.png')!important;
		background-position: 0 0;
		background-repeat: no-repeat;
	}
	.twinkie {
		margin: 40vw 0 0 20vw;
	}
	.twinkie img {
		width: 12vw!important;
		height: auto;
	}
	.spidey {
		margin: -40vw 0 0 15vw;
	}
	.lair img {
		width: 100vw!important;
		height: auto;
	}
	.spidey img {
		width: 35vw!important;
		height: auto;
	}
	.ts-1, .ts-2, .ts-3, .ts-4 {width:31vw!important; height:15.5vw;}
	.ts-5 {width:15.5vw!important; height: 15.5vw;}
	.ms-1, .ms-2, .ms-3, .ms-4, .ms-p1, .ms-p2 {width: 33vw!important;height: 23.2vw;}
	.ts-1 img, .ts-2 img, .ts-3 img, .ts-4 img {width:31vw!important; height:15.5vw;}
	.ts-5 img {width: 15.5vw!important; height: 15.5vw!important;}
	.ms-1 img, .ms-2 img, .ms-3 img, .ms-4 img, .ms-p1 img, .ms-p2 img {width: 33vw!important;height: 23.2vw;}
	#sc4c:checked ~ * .hero-e-l {
		margin: 50vw 0 0 46vw;
	}
	#sc4c:checked ~ * .hero-w-l {
		width:14.1vw;
		height:15vw;
		background-size: 84.6vw 15vw;
	}
	#sc4d:checked ~ * .hero-e-l,
	#sc4d1:checked ~ * .hero-e-l,
	#sc4d2:checked ~ * .hero-e-l,
	#sc4d3:checked ~ * .hero-e-l,
	#sc4d4:checked ~ * .hero-e-l,
	#sc4d5:checked ~ * .hero-e-l,
	#sc4d6:checked ~ * .hero-e-l {
		margin: 35vw 0 0 20vw;
	}
	#sc4e:checked ~ * .hero-e-l {
		margin: 50vw 0 0 46vw;
	}
	#sc4e:checked ~ * .hero-w-l {
		width:14.1vw;
		height:15vw;
		background-size: 84.6vw 15vw;
	}
	.spidey-sword {
		margin: 31vw 0 0 27vw;
	}
	.spidey-sword img {
		width: 6vw !important;
		height: auto!important;
	}
	.web {
		margin: 35vw 0 0 20vw;
	}
	.web img {
		width: 15vw !important;
		height: auto!important;
	}
	.spidey-shield {
		margin: 43vw 0 0 28vw;
		position: absolute;
		z-index: 12;
		display: none;
	}
	.spidey-shield img {
		width: 8vw !important;
		height: auto!important;
	}
	#sc4d4:checked ~ * .spidey {
		display: block;
		-webkit-animation: gotcha-m 3s linear forwards!important;
	}
	#sc4d5:checked ~ * .spidey {
		display: block;
		-webkit-animation: gotcha-m 3s linear forwards!important;
	}
	#sc4d6:checked ~ * .spidey {
		display: block;
		-webkit-animation: gotcha-m 3s linear forwards!important;
	}
	@-webkit-keyframes gotcha-m {
		0%, 100% { transform: translateY(-200vw);}
		20% { transform: translateY(10vw);}
	}
	/* sc 5 STYLES */
	.obiwon {
		margin: 31vw 0 0 10vw;
	}
	.obiwon img {
		width:16vw!important;
		height:auto;
	}
	/* sc 6 STYLES */
	.boulder {
		margin: 8vw 0 0 35vw;
	}
	.boulder img {
		width:30vw!important;
		height:auto;
	}
	.stone-1 {
		margin: 40vw 0 0 32vw;
		width: 10vw;
		height: 10vw;
		background-size: 10vw 10vw;
	}
	.stone-2 {
		margin: 40vw 0 0 47vw;
		width: 10vw;
		height: 10vw;
		background-size: 10vw 10vw;
	}
	.stone-3 {
		margin: 40vw 0 0 62vw;
		width: 10vw;
		height: 10vw;
		background-size: 10vw 10vw;
	}
	/* sc 7 STYLES */
	#sc7:checked ~ * .hero-e-l {
		margin: 40vw 0 0 10vw; 
	}
	.toady-tongue{
		margin: 42vw 0 0 48vw!important;
	}
	.toady-tongue img{
		width:20vw!important;
		height:auto;
	}
	.toady {
		margin: 30vw 0 0 55vw!important;
	}
	.toady img {
		width:45vw!important;
		height:auto;
	}
	.sword1 img {
		width:6vw!important;
		height:auto;
	}
	.sword2 img {
		width:6vw!important;
		height:auto;
	}
	.tree {
		margin: 26.5vw 0 0 32vw!important;
	}
	.tree img {
		width:35vw!important;
		height:auto;
	}
	#sc7b:checked ~ * .hero-e-l {
		margin: 40vw 0 0 10vw; 
		-webkit-animation:tree-m .5s linear forwards!important;
	}
	#sc7c:checked ~ * .hero-e-l {
		margin: 40vw 0 0 10vw; 
		-webkit-animation:toad-m .5s linear forwards!important;
	}
	@-webkit-keyframes tree-m {
		0% {transform: translate(0vw,0vw)}
		100% {transform: translate(15vw,-8vw)}
	}
	@-webkit-keyframes toad-m {
		0% {transform: translate(0vw,0vw)}
		100% {transform: translate(15vw,8vw)}
	}
	#sc7d:checked ~ * .hero-e-l {
		margin: 40vw 0 0 10vw!important;
		-webkit-animation:hero-attack-m .5s linear forwards!important;
	}
	#sc7d:checked ~ * .toady-tongue{
		margin: 42vw 0 0 48vw!important;
		-webkit-animation:toad-attack-m .5s linear forwards!important;
	}
	#sc7d:checked ~ * .sword1{
		margin: 27.5vw 0 0 30vw!important;
		-webkit-animation:sword-attack-m .5s linear forwards!important;
	}
	@-webkit-keyframes hero-attack-m {
		0% {transform: translate(15vw,-8vw);}
		90% {opacity:1;transform: translate(35vw,0px);}
		98% {opacity:.8;}
		100% { opacity:0; transform: translate(40vw,0px);}
	}
	@-webkit-keyframes toad-attack-m {
		0%, 100% {opacity:0; transform: scale(0,1);}
		5%, 90% {opacity:1; transform: scale(.2,1);}
		80% {opacity:1; transform: scale(1,1);}
	}
	@-webkit-keyframes sword-attack-m {
		0% {transform: translate(0,0);}
		90% {opacity:1; transform: translate(19vw,8vw);}
		98% {opacity:.8;}
		100% {opacity:0; transform: translate(25vw,8vw);}
	}
	#sc7e:checked ~ * .hero-e-l {
		margin: 48vw 0 0 25vw!important;
		-webkit-animation:hero-attack-two-m 1.5s linear forwards!important;
	}
	
	#sc7e:checked ~ * .sword2 {
		margin: 43.5vw 0 0 31.5vw!important;
		-webkit-animation:sword-attack-two-m 1.5s linear forwards!important;
	}
	@-webkit-keyframes hero-attack-two-m {
		0% {transform: translate(0,0)}
		10%,90% {opacity:1;transform: translate(18vw,-8vw)}
		100% {opacity:1;transform: translate(-8vw,-18vw)}
	}
	@-webkit-keyframes sword-attack-two-m {
		0% {transform: translate(0,0) rotate(0deg)}
		10% {transform: translate(18vw,-8vw) rotate(0deg)}
		12% {transform: translate(18vw,-8vw) rotate(-60deg)}
		20% {transform: translate(18vw,-8vw) rotate(80deg)}
		30% {transform: translate(18vw,-8vw) rotate(0deg)}
		90% {transform: translate(18vw,-8vw) rotate(0deg)}
		100% {transform: translate(-8vw,-18vw) rotate(0deg)}
	}
	#sc7f:checked ~ * .hero-e-l {
		margin: 32vw 0 0 25vw !important;
		-webkit-animation:dodge .3s linear forwards;
	}
	#sc7f:checked ~ * .toady-tongue{
		-webkit-animation:toad-tree-m 1.5s linear forwards;
		-webkit-transform-origin:100% 50%;
	}
	#sc7f:checked ~ * .tree{
		-webkit-animation:roll-tree-m 1.5s linear forwards;
	}
	@-webkit-keyframes toad-tree-m {
		0% {opacity:0; transform: rotate(20deg) scale(0,1);}
		10% {opacity:1; transform: rotate(20deg) scale(1.5,1);}
		90% {opacity:1; transform: rotate(20deg) scale(1.5,1);}
		100% {opacity:1; transform: rotate(20deg) scale(.8,1);}
	}
	@-webkit-keyframes roll-tree-m {
		0%, 90% {transform: translate(0px,0px)}
		100% {transform: translate(14vw, 3vw)}
	}
	#sc7g:checked ~ * .hero-e-l {
		margin: 48vw 0 0 25vw;
		-webkit-animation:runaway-m 1.5s linear forwards;
	}
	#sc7g:checked ~ * .toady-tongue{
		display: block;
		-webkit-animation:toad-attack-long-m 1.5s linear forwards;
		-webkit-transform:rotate(30deg);
		-webkit-transform-origin:100% 50%;
	}
	@-webkit-keyframes toad-attack-long-m {
		0%, 40% {opacity:0; transform: scale(0,1);}
		50%, 70% {opacity:1; transform: scale(3,1);}
		80% {opacity:1; transform: scale(.5,1);}
		98% {opacity:1; transform: scale(0,1);}
		100% {opacity:0; transform: scale(0,1);}
	}
	@-webkit-keyframes runaway-m {
		0% {transform: translate(0px,0px)}
		50%, 70% {transform: translate(-25vw,-8vw)}
		80% {opacity:1; transform: translate(25vw,-8vw)}
		98% {opacity:.8;}
		100% { opacity:0; transform: translate(40vw,-8vw)}
	}
	/* sc 8 STYLES */
	.warlock {
		margin:32vw 0 0 60vw;
	}
	.warlock img {
		width:30vw!important;
		height:auto;
	}
	.blast {
		width: 10vw!important;
		height: auto;
	}
	.blast-1 {
		margin: 35vw 0 0 50vw;
	}
	.blast-2 {
		margin: 45vw 0 0 50vw;
	}
	.blast-3 {
		margin: 55vw 0 0 50vw;
	}
	.sword {
		margin: 40vw 0 0 15vw!important;
		z-index: 12;
	}
	.sword img {
		width: 6vw!important;
		height: auto!important;
	}
	#shield {
		margin: 52vw 0 0 38vw;
		z-index: 12;
	}
	#sc8:checked ~ * .hero-e-l,
	#sc8b:checked ~ * .hero-e-l,
	#sc8c:checked ~ * .hero-e-l,
	#sc8d:checked ~ * .hero-e-l,
	#sc8e:checked ~ * .hero-e-l,
	#sc8f:checked ~ * .hero-e-l,
	#sc8g:checked ~ * .hero-e-l,
	#sc8i:checked ~ * .hero-e-l,
	#sc8k:checked ~ * .hero-e-l,
	#sc8l:checked ~ * .hero-e-l {
		margin: 45vw 0 0 15vw!important;
	}
	#sc8i:checked ~ * .hero-e-l {
		margin: 35vw 0 0 5vw!important;
		-webkit-animation: none!important;
	}
	#sc8c:checked ~ * .hero-e-l,
	#sc8f:checked ~ * .hero-e-l,
	#sc8j:checked ~ * .hero-e-l {
		-webkit-animation: move-on-up-m .5s linear forwards!important;
	}
	@-webkit-keyframes move-on-up-m {
		0% { transform: translateY(0vw);}
		50% { transform: translateY(-15vw);}
		100% { transform: translateY(0vw);}
	}
	#sc8g:checked ~ * .hero-e-l,
	#sc8g:checked ~ * .sword {
		-webkit-animation: head-on-m .5s linear forwards!important;
	}
	@-webkit-keyframes head-on-m {
		0% { transform: translate(0vw,0vw);}
		40%, 80% { transform: translate(15vw,0vw);}
		100% { transform: translate(-5vw,0vw);}
	}
	#sc8g:checked ~ * .warlock {
		-webkit-animation: lets-fight-m .3s linear forwards!important;
	}
	@-webkit-keyframes lets-fight-m {
		0% { transform: translateX(0vw);}
		100% { transform: translateX(-16vw);}
	}
	#sc8h:checked ~ * .warlock {
		-webkit-animation: lets-fight-clash-m .5s linear forwards!important;
	}
	@-webkit-keyframes lets-fight-clash-m {
		0% { transform: translateX(0vw);}
		40%, 80% { transform: translateX(-16vw);}
		100% { transform: translateX(-40vw);}
	}
	#sc8h:checked ~ * .hero-e-l{
		margin: 45vw 0 0 10vw!important;;
		display: block;
		-webkit-animation: head-on-m .5s linear forwards!important;
	}
	
	@-webkit-keyframes head-on-m {
		0% { transform: translate(0vw,0vw);}
		40%, 80% { transform: translate(20vw,0vw);}
		100% { transform: translate(-5vw,0vw);}
	}
	#sc8h:checked ~ * .sword{
		display: block;
		-webkit-transform-origin: 50% 80%;
		-webkit-animation: head-on-swing-m .5s linear forwards!important;
	}
	@-webkit-keyframes head-on-swing-m {
		0% { transform: translate(0vw,0vw) rotate(0deg);}
		40%, 80% { transform: translate(20vw,0vw) rotate(40deg);}
		100% { transform: translate(-5vw,0vw) rotate(0deg);}
	}
	#sc8i:checked ~ * .sword {
		-webkit-animation-delay:.4s!important;
	}
	@-webkit-keyframes come-get-some-m {
		0% { transform: translateX(0vw);}
		40% { transform: translateX(16vw);}
		80% { transform: translateX(16vw);}
		100% { transform: translateX(-10vw);}
	}
	#sc8i:checked ~ * .hero-e-l {
		margin: 45vw 0 0 10vw!important;
	}
	#sc8i:checked ~ * .warlock,
	#sc8j:checked ~ * .warlock {
		-webkit-animation: doom-m .3s linear forwards!important;
	}
	@-webkit-keyframes doom-m {
		0% { transform: translateX(-16vw);}
		100% { transform: translateX(-40vw);}
	}
	
	#sc8j:checked ~ * .hero-e-l {
		margin: 45vw 0 0 10vw!important;
		-webkit-animation-delay:.5s;
	}
	#sc8k:checked ~ * .sword {
		display: block;
		-webkit-transform-origin: 50% 80%;
		-webkit-animation: caught-it .35s linear forwards;
	}
	#sc8k:checked ~ * .hero-e-l{
		margin: 45vw 0 0 10vw!important;
		-webkit-animation: none;
	}
	#sc8k:checked ~ * .warlock,
	#sc8l:checked ~ * .warlock {
		margin:32vw 0 0 20vw!important;
	}
	#sc8k:checked ~ * .final-blast{
		margin: 50vw 0 0 15vw!important;
	}
	#sc8k:checked ~ * .hero-w-l{
		-webkit-animation: poof .3s linear forwards;
	}
	#sc8l:checked ~ * .hero-e-l {
		margin: 45vw 0 0 10vw!important;
	}
	#sc8l:checked ~ * .sword{
		display: block;
		margin: 40vw 0 0 15vw!important;
	}
}
	/************* -webkit-animations *************/
/* Generic -webkit-animations */
@-webkit-keyframes fade-in {
	0% {opacity: 0; visibility: hidden; overflow: hidden;}
	100% {opacity: 1; visibility: visible; overflow: visible;}
}
@-webkit-keyframes entrance-t {
	0% {opacity: 0; transform: translateY(-15em);}
	10% {opacity: 1; }
	100% {transform: translateY(0)}
}
@-webkit-keyframes entrance-r {
	0% {transform: translateX(260px);}
	100% {transform: translateX(0);}
}
@-webkit-keyframes entrance-b {
	0% {transform: translateY(285px);}
	100% {transform: translateY(0);}
}
@-webkit-keyframes entrance-l {
	0% {transform: translateX(-260px);}
	100% {transform: translateX(0);}
}
@-webkit-keyframes sprite {
	0% {background-position-x: 0%;}
	100% {background-position-x: 100%;}
}
@-webkit-keyframes sprite-rev {
	0% {background-position-x: 1000%;}
	100% {background-position-x: 0%;}
}
/* sc 0 -webkit-animations */
@-webkit-keyframes logo {
	0% {opacity: 0;transform: translateY(-50px);}
	100% {opacity: 1;transform: translateY(0);}
}
@-webkit-keyframes blink {  
	0% {opacity: 1.0;}
	50%	{opacity: 0.0;}
	100% {opacity: 1.0;}
}
/* sc 1 -webkit-animations */
@keyframes snow{
0%{transform:translate(0,0);opacity:0;}
10%, 90% {opacity:1;}
50%{transform:translate(-100px,500px);opacity:.2;}
100%{transform:translate(0,500px);opacity:0;}
}
@-webkit-keyframes jump-for-joy {
	0%,100% {transform: translateY(0px);}
	50% {transform: translateY(-1.5em);}
}
/* sc 2 -webkit-animations */
@-webkit-keyframes shot-fired {
	0%, 100% {opacity:0;}
	5%, 95% {opacity:1;}
	6% {transform:scale(0.2,0.3)}
	10% {transform:scale(1,1);}
	50% {transform:translate(115px,0px);}	
}
@-webkit-keyframes target-accuired {
	0%, 100% {opacity:0;}
	5%, 99% {opacity:1;}
	6% {transform:scale(0.2,0.3);}
	10% {transform:scale(1,1);}
	98% {transform:translate(115px,0px);}	
}
@-webkit-keyframes shield-me-up {
	0%, 100% {opacity:0;}
	1%, 99% {opacity:1;}
	2% {transform:scaleX(0.1);}
	5% {transform:scaleX(1);}
	97% {transform:scaleX(1);}
	98% {transform:scaleX(0.1);}
}
@-webkit-keyframes smoke-the-cat {
	0%, 4%, 8%, 12% {opacity: 1;}
	2%, 6%, 10% {opacity: .7;}
	20%, 100% {opacity: 0;}
}
/* sc 3 -webkit-animations */
@-webkit-keyframes body-shot {
	0% { transform: translateX(0px);}
	100% { transform: translateX(-700px);}
}
/* sc 4 -webkit-animations */
@-webkit-keyframes transport-in {
	0%, 5%, 15%, 25%, 100% {opacity: 1;}
	1%, 10%, 20% {opacity: 0;}
}
@-webkit-keyframes transport-out {
	0%, 10%, 20% {opacity: 1;}
	5%, 15%, 25%, 100% {opacity: 0;}
}
@-webkit-keyframes out-l {
	0% { transform: translateX(0px);}
	100% { transform: translateX(-700px);}
}
@-webkit-keyframes in-r {
	0% { transform: translateX(700px);}
	100% { transform: translateX(0px);}
}
@-webkit-keyframes boo {
	0% {background-position-x: 0%;}
	100% {background-position-x: 100%;}
}
@-webkit-keyframes back-up-mofo {
	0% {background-position-x: 100%;}
	75% {background-position-x: 100%;}
	100% {background-position-x: 0%;}
}
@-webkit-keyframes jump-f {
	0% { opacity:1; transform: translate(0vw, 0vw);}
	45% { opacity:1; transform: translate(70px, -70px);}
	90% { opacity:1; transform: translate(140px, 0vw);}
	100% { opacity:0; transform: translate(140px, 0vw);}
}
@-webkit-keyframes jump-b {
	0%, 100%  { transform: translateX(0px);}
	50% { transform: translateX(-30px);}
}
@-webkit-keyframes twinkie-in-the-hole {
	0% { opacity:1; transform: translate(0px, 0px) rotate(0deg);}
	45% { opacity:1; transform: translate(70px, -70px) rotate(360deg);}
	90% { opacity:1; transform: translate(140px, 0px) rotate(720deg);}
	100% { opacity:0; transform: translate(140px, 0px) rotate(720deg);}
}
@-webkit-keyframes gotcha {
	0%, 100% { transform: translateY(-700px);}
	20% { transform: translateY(100px);}
}
@-webkit-keyframes take-that {
	0% { transform: translateY(0px);}
	15% { transform: translateY(80px);}
	30% { transform: translateY(0px);}
	100% { transform: translateY(-700px);}
}
@-webkit-keyframes suprise {
	0% {-webkit-transform: translateY(-500px);}
	20% {-webkit-transform: translateY(30px);}
	50%, 60%, 80%, 100% {-webkit-transform: translateY(0px);}
	40% {-webkit-transform: translateY(-60px);}
}
@-webkit-keyframes bites-the-dust {
	0%, 20% { transform: translate(0px, 0px);}
	100% { transform: translate(0px, -700px);}
}
@-webkit-keyframes swing {
	0% { transform: rotate(-60deg);}
	100% { transform: rotate(80deg);}
}
@-webkit-keyframes swing-two {
	0% { transform: rotate(-60deg);}
	100% { transform: rotate(80deg);}
}
@-webkit-keyframes web-sling {
	0% { opacity: 1; transform: translate(2em, -8em);}
	75%, 85%, 95% {opacity: 1;}
	80%, 90%, 100% {opacity: 0;}
	100% { opacity: 0; transform: translate(0em, 0em);}
}
@-webkit-keyframes web-sling-two {
	0% { transform: translate(2em, -8em);}
	10%, 20% { transform: translate(0em, 0em);}
	100% { transform: translate(0px, -700px);}
}
/* sc 5 -webkit-animations */
@-webkit-keyframes eject {
	0% {transform: translate(0px,0px) rotate(0deg);}
	30% {transform: translate(60px,-150px) rotate(90deg);}
	100% {transform: translate(120px,300px) rotate(720deg);}
}
@-webkit-keyframes eject-hero {
	0% {transform: translate(0px,0px) rotate(0deg);}
	30% {transform: translate(-60px,-150px) rotate(90deg);}
	100% {transform: translate(-120px,300px) rotate(720deg);}
}
/* sc 6 -webkit-animations */
@-webkit-keyframes boulder-n-roll {
	0%, 10% {transform: translate(0px,0px) rotate(0deg);}
	2%, 6% {transform: translate(5px,0px) rotate(0deg);}
	4%, 8% {transform: translate(-5px,0px) rotate(0deg);}
	12%, 16%, 20%  {transform: translate(10px,0px) rotate(0deg);}
	14%, 18% {transform: translate(-10px,0px) rotate(0deg);}
	100% {transform: translate(480px,400px) rotate(720deg);}
}
@-webkit-keyframes boulder-n-roll-is-dead {
	0%, 10% {transform: translate(0px,0px) rotate(0deg);}
	2%, 6% {transform: translate(5px,0px) rotate(0deg);}
	4%, 8% {transform: translate(-5px,0px) rotate(0deg);}
	12%, 16%, 20%  {transform: translate(10px,0px) rotate(0deg);}
	14%, 18% {transform: translate(-10px,0px) rotate(0deg);}
	100% {transform: translate(0px,400px) rotate(720deg);}
}
/* sc 7 -webkit-animations */
@-webkit-keyframes tree {
	0% {transform: translate(0px,0px)}
	100% {transform: translate(100px,-60px)}
}
@-webkit-keyframes toad {
	0% {transform: translate(0px,0px)}
	100% {transform: translate(100px,60px)}
}
@-webkit-keyframes dodge {
	0% { transform: translateX(0px);}
	100% { transform: translateX(-50px);}
}
@-webkit-keyframes hero-attack {
	0% {transform: translate(100px,-60px)}
	90% {opacity:1;transform: translate(180px,0px)}
	98% {opacity:.8;}
	100% { opacity:0; transform: translate(270px,0px)}
}
@-webkit-keyframes hero-attack-two {
	0% {transform: translate(0px,0px)}
	10% {opacity:1;transform: translate(100px,-60px)}
	90% {opacity:1;transform: translate(100px,-60px)}
	100% {opacity:1;transform: translate(0px,-120px)}
}
@-webkit-keyframes sword-attack {
	0% {transform: translate(0px,0px)}
	90% {opacity:1;transform: translate(80px,60px)}
	98% {opacity:.8;}
	100% { opacity:0; transform: translate(170px,60px)}
}
@-webkit-keyframes sword-attack-two {
	0% {transform: translate(0px,0px) rotate(0deg)}
	10% {transform: translate(100px,-60px) rotate(0deg)}
	12% {transform: translate(100px,-60px) rotate(-60deg)}
	20% {transform: translate(100px,-60px) rotate(80deg)}
	30% {transform: translate(100px,-60px) rotate(0deg)}
	90% {transform: translate(100px,-60px) rotate(0deg)}
	100% {transform: translate(0px,-120px) rotate(0deg)}
}
@-webkit-keyframes toad-turn {
	0%, 44% {transform: scaleX(-1)}
	45%, 100% {transform: scaleX(1)}
}
@-webkit-keyframes toad-attack {
	0% {opacity:0; transform: scale(0,1);}
	5% {opacity:1; transform: scale(.2,1);}
	80% {opacity:1; transform: scale(1.5,1);}
	90% {opacity:1; transform: scale(.5,1);}
	100% {opacity:0; transform: scale(0,1);}
}
@-webkit-keyframes toad-tree {
	0% {opacity:0; transform: rotate(20deg) scale(0,1);}
	10% {opacity:1; transform: rotate(20deg) scale(2,1);}
	90% {opacity:1; transform: rotate(20deg) scale(2,1);}
	100% {opacity:1; transform: rotate(20deg) scale(1,1);}
}
@-webkit-keyframes roll-tree {
	0%, 90% {transform: translate(0px,0px)}
	100% {tr
  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 102회 ]  작성일18-06-13 11:00

웹학교