1 files changed, 64 insertions, 0 deletions
diff --git a/docs/_sass/_training_slideshow.scss b/docs/_sass/_training_slideshow.scss
new file mode 100644
index 000000000..9c1969b7c
--- /dev/null
+++ b/docs/_sass/_training_slideshow.scss
@@ -0,0 +1,64 @@
+.modal-slide {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.8);
+    z-index: 99;
+    width:100%;
+    height:100%;
+    -webkit-transition: opacity 400ms ease-in;
+    -moz-transition: opacity 400ms ease-in;
+    transition: opacity 400ms ease-in;
+}
+.modal-slide:target {
+    opacity:1;
+    pointer-events: auto;
+}
+.modal-slide > div {
+    width: 90%;
+    height: 90%;
+    position: relative;
+    margin: 2em auto;
+    padding: 5px 20px 13px 20px;
+    border-radius: 10px;
+    background: #fff;
+    display: table;
+    .slide-contents {
+        padding: 1em 15%;
+        display:table-cell;
+        vertical-align: middle;
+        text-align: center;
+        height:100%;
+        ul, ol {
+            text-align: left;
+            display: inline-block;
+            margin:1em auto;
+        }
+        img {
+            border:1px solid #aaa;
+        }
+    }
+}
+.modal-slide-close {
+    background: #606061;
+    color: #FFFFFF;
+    line-height: 25px;
+    position: absolute;
+    right: -12px;
+    text-align: center;
+    top: -10px;
+    width: 24px;
+    text-decoration: none;
+    font-weight: bold;
+    -webkit-border-radius: 12px;
+    -moz-border-radius: 12px;
+    border-radius: 12px;
+    -moz-box-shadow: 1px 1px 3px #000;
+    -webkit-box-shadow: 1px 1px 3px #000;
+    box-shadow: 1px 1px 3px #000;
+    &:hover {
+      background: #ff6666;
+    }
+}