Index: lams_tool_scratchie/web/includes/css/scratchie-learning.scss
===================================================================
diff -u -r29934b375099b67b06d6515d65c7bb3d72ace59e -rdf26095fede71a40145385ab3f73c9d2f981e11b
--- lams_tool_scratchie/web/includes/css/scratchie-learning.scss	(.../scratchie-learning.scss)	(revision 29934b375099b67b06d6515d65c7bb3d72ace59e)
+++ lams_tool_scratchie/web/includes/css/scratchie-learning.scss	(.../scratchie-learning.scss)	(revision df26095fede71a40145385ab3f73c9d2f981e11b)
@@ -9,10 +9,6 @@
 	margin-left: -1rem;
 }
 
-.scartchie-image {
-	border: 0;
-}
-
 /*----------countdown growl----------------*/
 .jGrowl {
   	font-size: 22px;
@@ -105,4 +101,53 @@
 .fake-validation-input {
 	visibility: hidden;
 	height: 0px;	
-}
\ No newline at end of file
+}
+
+/*----------Scratchie SVG----------------*/
+@keyframes reveal-tick {
+	to {
+		stroke-dashoffset: 0;
+	}
+}
+
+.icon-mask,
+.letter-mask {
+	stroke-dasharray: 12296;
+	stroke-dashoffset: 12296;
+}
+
+.scratched {
+
+	.icon-mask,
+	.letter-mask {
+		stroke-dashoffset: 0;
+	}
+}
+
+.show-tick .icon-mask,
+.show-tick .letter-mask,
+.show-cross .icon-mask,
+.show-cross .letter-mask {
+	animation: reveal-tick 2s ease-in-out both;
+}
+
+.show-tick .cross-icon {
+	opacity: 0;
+}
+
+.show-cross .tick-icon {
+	opacity: 0;
+}
+
+.scartchie-image-col {
+	text-align: right;
+	
+	a {
+		padding: 0;
+	}
+	svg {
+		margin: 0 -0.5rem 0 0.5rem;
+		padding: initial;
+	}
+}
+