--- a/sat_templates/templates/default/static/styles.css	Fri Jan 25 11:28:41 2019 +0100
+++ b/sat_templates/templates/default/static/styles.css	Sat Jan 26 20:22:18 2019 +0100
@@ -7,6 +7,7 @@
   --box--expand_limit: 20rem;
   --box--expand_height-min: 9rem;
   --select-bg-color: #ddd;
+  --size-small: 1.5rem;
   --size-medium: 3rem;
   --color-prim: #fafafa;
   --color-prim--light: #ffffff;
@@ -33,10 +34,6 @@
     box-sizing: border-box;
 }
 
-ul {
-    padding: 0;
-}
-
 p {
     margin: 0;
 }
@@ -157,6 +154,8 @@
  * Generic *
  ***********/
 
+/** Common Sizes **/
+
 /** Buttons **/
 
 .btn {
@@ -217,6 +216,12 @@
     box-shadow: 0px 0px 6px 1px #000;
 }
 
+/** heading **/
+.heading__subtitle {
+    font-size: 2em;
+    text-align: center;
+}
+
 /** instructions **/
 
 .instructions--head {
@@ -233,6 +238,18 @@
     font-style: italic;
 }
 
+/** descriptions **/
+
+.description {
+    padding: 1em;
+    text-align: center;
+    font-size: 1.2em;
+}
+
+.description--emphasis {
+    font-weight: bold;
+}
+
 /** images **/
 
 .img--center{
@@ -241,10 +258,38 @@
     max-width: 100%;
 }
 
+.img--float-left {
+    float: left;
+}
+
+.img--float-right {
+    float: right;
+}
+
+.img--inline {
+    vertical-align: middle;
+}
+
+.img--inline-bottom {
+    vertical-align: bottom;
+}
+
+.img--very-small {
+    height: 2em;
+}
+
 .img--small {
     height: 100px;
 }
 
+.img--medium {
+    height: 10rem;
+}
+
+.img--large {
+    width: 40rem;
+}
+
 /** other language **/
 
 .other_lang.state_init>div.info>p {
@@ -293,8 +338,8 @@
 }
 
 .box__content img {
+    margin: 0;
     max-width: 100%;
-    margin: 0;
 }
 
 .box__content video {
@@ -306,9 +351,8 @@
     white-space: pre-wrap;
 }
 
-
 .box--large {
-    max-width: 80rem;
+    max-width: 60rem;
 }
 
 .box--plain {
@@ -342,10 +386,16 @@
     background: var(--color-prim);
 }
 
+.box--middle {
+    margin-left: auto;
+    margin-right: auto;
+}
+
 .box--center {
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-direction: column;
 }
 
 .box--zero {
@@ -361,6 +411,23 @@
     transition: max-height 0.5s;
 }
 
+.box--quarter-screen{
+    min-height: 25vh;
+}
+
+.box--third-screen{
+    min-height: 33vh;
+}
+
+.box--half-screen{
+    min-height: 50vh;
+}
+
+.box--screen{
+    /* box taking a whole screen */
+    min-height: 100vho
+}
+
 .box__expand_zone {
     /* zone to click to expand/fold the box */
     cursor: pointer;
@@ -515,9 +582,28 @@
  *********/
 
 .list {
+    padding: 0;
     list-style: none;
     display: flex;
     flex-direction: column;
+    margin: 0;
+}
+
+.list--features {
+    font-variant: small-caps;
+}
+
+.list--features svg {
+    margin-right: 0.5em;
+}
+
+.list--inline {
+    flex-direction: row;
+    margin: 0;
+}
+
+.list__item {
+    margin: 0.5em;
 }
 
 .list__item>a {
@@ -525,6 +611,11 @@
     color: inherit;
 }
 
+.list__item--selected {
+    font-weight: bold;
+    text-decoration: underline;
+}
+
 /*********
  * Grids *
  *********/
@@ -630,17 +721,24 @@
  * icons *
  *********/
 
-.icon--medium {
-    height: var(--size-medium);
+.icon--block {
     display: block;
     margin: 0 auto;
 }
 
-.icon--small {
+.icon--text {
     height: 1em;
     vertical-align: middle;
 }
 
+.icon--small {
+    height: var(--size-small);
+}
+
+.icon--medium {
+    height: var(--size-medium);
+}
+
 .icon--soft {
     fill: #777;
 }
@@ -934,6 +1032,23 @@
     text-align: center;
 }
 
+/*****************
+ * paired slides *
+ ****************/
+
+ .paired-slides {
+     display: flex;
+     flex-direction: row;
+     flex-wrap: wrap;
+ }
+
+ div.paired-slides:nth-child(odd) {
+     flex-direction: row-reverse;
+ }
+
+ .paires-slides
+
+
 /**************
  * Navigation *
  **************/
@@ -1110,7 +1225,7 @@
     }
 
     .box--medium {
-        width: 33rem;
+        width: 43rem;
         max-width: 100%;
     }
 
@@ -1120,6 +1235,11 @@
         margin: 0.5em;
     }
 
+    .box--extra-margin {
+        margin-top: 5rem;
+        margin-bottom: 5rem;
+    }
+
     .box--zero {
         box-shadow: none;
         border: none;
@@ -1163,6 +1283,18 @@
         flex-direction: row;
     }
 
+    /*****************
+     * paired slides *
+     ****************/
+
+     .paired-slides {
+         flex-wrap: nowrap;
+     }
+
+     .paired-slides>*:last-child {
+         margin-left: 1em;
+     }
+
     /*********
      * Menus *
      *********/