diff --git a/_config.scss b/_config.scss
index a052187..6fd0fa1 100644
--- a/_config.scss
+++ b/_config.scss
@@ -30,12 +30,13 @@ $head_line_2: $text_line_1;
 $head_line_3: $text_line_1;
 $head_line_4: $text_line_1;
 
-$default_font_family: #{'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default;
+$default_font_family: #{'Roboto', 'Trebuchet MS', Helvetica, 'Source Sans', Arial, sans-serif, sans} !default;
 $print_font_family: #{'Times New Roman', times};
+$monospace_font_family: #{'Courier New', monospace};
 
 $primary_font_family: $default_font_family;
-$secondary_font_family: #{'Roboto', sans-serif};
-$third_font_family: #{'Courier New', monospace};
+$secondary_font_family: $default_font_family;
+$third_font_family: $monospace_font_family;
 $fourth_font_family: $print_font_family;
 
 $basic_indent: 2em;
@@ -51,9 +52,9 @@ $delta_color: #b7e0f0;
 $echo_color: #52bed1;
 $foxtrot_color: #0c85ff;
 
-$black: black;
-$white: white;
-$medium_gray: lighten($black, 50%);
+$black: black !default;
+$white: white !default;
+$medium_gray: lighten($black, 50%) !default;
 
 
 $basic_font_color: $black;
@@ -90,11 +91,12 @@ $space_2: $basic_space * 2;
 $space_3: $basic_space * 4;
 $space_4: $basic_space * 8;
 $space_5: $basic_space * 16;
-$tiny_space: 1px;
+$tiny_space: 1px !default;
 
 $basic_corner: 4px;
 
-$basic_border_width: $tiny_space;
+$default_border_width: $tiny_space !default;
+$basic_border_width: $default_border_width;
 $border_width_4: $tiny_space * 4;
 $border_width_8: $tiny_space * 8;
 $basic_border: $tiny_space solid $basic_border_color;
diff --git a/_default.scss b/_default.scss
index 50e2346..a7c793c 100644
--- a/_default.scss
+++ b/_default.scss
@@ -1,9 +1,21 @@
 // Main configuration
 // ------------------------------------------------------------------------------
 
-$default_font_size: 15px;
-$default_line_height: 1.5;
+//$default_font_size: 15px;
+//$default_print_font_size: 10pt;
 
-$default_font_family: #{'Trebuchet MS', Helvetica, Arial, sans-serif, sans};
+//$default_line_height: 1.5;
 
-$default_space: 8px;
+//$default_font_family: #{'Roboto', 'Trebuchet MS', Helvetica, 'Source Sans', Arial, sans-serif, sans};
+
+//$black: black !default;
+//$white: white !default;
+//$medium_gray: lighten($black, 50%) !default;
+
+//$default_background_color: lighten(black, 50%);
+
+//$default_space: 8px;
+
+//$tiny_space: 1px;
+
+//$default_border_width: $tiny_space;
\ No newline at end of file
diff --git a/_hippie.scss b/_hippie.scss
index 036bdd8..8aab431 100644
--- a/_hippie.scss
+++ b/_hippie.scss
@@ -46,7 +46,6 @@
 // Modules and variables
 // Additional modules can be defined here
 // -----------------------------------------------------------------------------
-@import "modules/flexbox";
 @import "modules/vendor";
 //@import modules/all deprecated because of the new vendor mixin
 //@import modules/*/* needs sass-glob
@@ -57,7 +56,7 @@
 // -----------------------------------------------------------------------------
 @import "basic/common";
 @import "basic/typography";
-// Following the w3c document element structure 
+// Following the w3c document element structure
 // https://w3c.github.io/html/index.html#contents
 @import "basic/sections";
 @import "basic/grouping";
diff --git a/basic/_common.scss b/basic/_common.scss
index 3d2ced8..c53db7d 100644
--- a/basic/_common.scss
+++ b/basic/_common.scss
@@ -44,7 +44,7 @@
 
 %size_content_solo {
 	@extend %size_content;
-	
+
 	*,
 	::before,
 	::after {
@@ -94,6 +94,17 @@
 	bottom: 0;
 }
 
+// Absolute elements
+.fullscreen_body {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+		background-color: transparentize($alpha_color, .5);;
+}
+
+
 // Space and placeholders
 .space_box {
 	float: left;
diff --git a/example.css b/example.css
index 4b2e9e6..bd54738 100644
--- a/example.css
+++ b/example.css
@@ -19,98 +19,6 @@
  *
  */
 @import url(other/normalize.css);
-/**
- * @description
- * Generates flexbox properties for a given element
- *
- * @author romamatusevich
- *
- * @link MDN https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
- * @link css-tricks http://css-tricks.com/snippets/css/a-guide-to-flexbox/
- * @link spec http://www.w3.org/TR/css3-flexbox/
- */
-/**
- * @returns
- *   display: -webkit-box;
- *   display: -moz-box;
- *   display: -ms-flexbox;
- *   display: -webkit-flex;
- *   display: flex;
- *
- * @example
- *   .selector {
- *     @include x-display-flex;
- *   }
- */
-/**
- * @param values
- * @returns
- *   -webkit-box-flex: <values>;
- *      -moz-box-flex: <values>;
- *       -webkit-flex: <values>;
- *           -ms-flex: <values>;
- *               flex: <values>;
- *
- * @example
- *   .selector {
- *     @include x-flex(1 1 auto);
- *   }
- */
-/**
- * @param value
- * @returns
- *   -webkit-box-ordinal-group: <value>;
- *      -moz-box-ordinal-group: <value>;
- *              -ms-flex-order: <value>;
- *               -webkit-order: <value>;
- *                       order: <value>;
- *
- * @example
- *   .selector {
- *     @include x-order(1);
- *   }
- */
-/**
- * @param value
- * @returns
- *    -webkit-flex-wrap: <value>;
- *        -ms-flex-wrap: <value>;
- *            flex-wrap: <value>;
- *
- * @example
- *   .selector {
- *     @include x-flex-wrap(wrap);
- *   }
- */
-/**
- * @param value
- * @returns
- *   -webkit-align-content: <value>;
- *      -moz-align-content: <value>;
- *      -ms-flex-line-pack: <value>;
- *           align-content: <value>;
- * @example
- *   .selector {
- *     @include x-align-content(center);
- *   }
- */
-/**
- * @param value
- * @returns
- *	  -webkit-box-direction: <value>;
- *		 -moz-box-direction: <value>;
- *       -webkit-box-orient: <value>;
- *		    -moz-box-orient: <value>;
- *   -webkit-flex-direction: <value>;
- *      -moz-flex-direction: <value>;
- *       -ms-flex-direction: <value>;
- *           flex-direction: <value>;
- * @example
- *   .selector {
- *     @include x-flex-direction(row-reverse);
- *   }
- */
-/* ToDo: add flex-grow, flex-shrink, flex-basis, flex-flow, align-items, align-self, justify-content mixins */
 /**
  * @description
  * Generates cross-browser-compatible output for a given element with its value.
@@ -181,6 +89,14 @@
 .bottom {
   bottom: 0; }
 
+.fullscreen_body {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(250, 216, 3, 0.5); }
+
 .space_box {
   float: left;
   display: table;
@@ -216,7 +132,7 @@
   background-color: rgba(82, 190, 209, 0.1) !important; }
 
 .span_solo, h6, p, .p_col_2, .p_col_3, caption, li, dt, dd, figcaption, th, td, legend, label {
-  font-family: Trebuchet MS, Helvetica, Arial, sans-serif, sans;
+  font-family: Roboto, Trebuchet MS, Helvetica, Source Sans, Arial, sans-serif, sans;
   font-size: 1em;
   line-height: 1.5; }
 
@@ -231,25 +147,25 @@ pre, code, .code_solo {
   line-height: 1.5; }
 
 h1, .exp_help_btn .span_solo, .print_body .page_date, .print_body .page_no {
-  font-family: Roboto, sans-serif;
+  font-family: Roboto, Trebuchet MS, Helvetica, Source Sans, Arial, sans-serif, sans;
   font-size: 3.1em;
   font-weight: 300;
   line-height: 1.5; }
 
 h2 {
-  font-family: Roboto, sans-serif;
+  font-family: Roboto, Trebuchet MS, Helvetica, Source Sans, Arial, sans-serif, sans;
   font-size: 2.5em;
   font-weight: 300;
   line-height: 1.5; }
 
 h3, h4 {
-  font-family: Roboto, sans-serif;
+  font-family: Roboto, Trebuchet MS, Helvetica, Source Sans, Arial, sans-serif, sans;
   font-size: 1.8em;
   font-weight: 300;
   line-height: 1.5; }
 
 h5 {
-  font-family: Roboto, sans-serif;
+  font-family: Roboto, Trebuchet MS, Helvetica, Source Sans, Arial, sans-serif, sans;
   font-size: 1.35em;
   font-weight: 300;
   line-height: 1.5; }
@@ -276,7 +192,7 @@ html {
 
 body {
   box-sizing: border-box;
-  font-family: Trebuchet MS, Helvetica, Arial, sans-serif, sans;
+  font-family: Roboto, Trebuchet MS, Helvetica, Source Sans, Arial, sans-serif, sans;
   font-size: 15px;
   line-height: 1;
   color: black;
@@ -576,20 +492,19 @@ legend {
 .card_body {
   height: 100%;
   /*  .full {
-        position: absolute;
-        width: 128px;
-        height: 128px;
-        top: 16px;
-        left: 16px;
-        background-color: #fff;
-    }
-  
-     .mark {
-        float: left;
-        width: 32px;
-        height: 32px;
-        margin-top: 16px;
-    }
+  			position: absolute;
+  			width: 128px;
+  			height: 128px;
+  			top: 16px;
+  			left: 16px;
+  			background-color: #fff;
+  	}
+  		.mark {
+  			float: left;
+  			width: 32px;
+  			height: 32px;
+  			margin-top: 16px;
+  	}
    */ }
   .card_body .bkg_box {
     transition-duration: 800ms;
diff --git a/modules/_flexbox.scss b/modules/_flexbox.scss
deleted file mode 100644
index 3524b24..0000000
--- a/modules/_flexbox.scss
+++ /dev/null
@@ -1,175 +0,0 @@
-/**
- * @description
- * Generates flexbox properties for a given element
- *
- * @author romamatusevich
- *
- * @link MDN https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
- * @link css-tricks http://css-tricks.com/snippets/css/a-guide-to-flexbox/
- * @link spec http://www.w3.org/TR/css3-flexbox/
- */
-
-/**
- * @returns
- *   display: -webkit-box;
- *   display: -moz-box;
- *   display: -ms-flexbox;
- *   display: -webkit-flex;
- *   display: flex;
- *
- * @example
- *   .selector {
- *     @include x-display-flex;
- *   }
- */
-@mixin x-display-flex {
-	display: -webkit-box;  // Chrome 20-, iOS 6-, Safari 3.1  -6
-	display: -moz-box;     // FF 19-
-	display: -webkit-flex; // Chrome 21 - 28
-	display: -ms-flexbox;  // IE 10
-	display: flex;         // FF 20+, Chrome 29+, Opera 12.1, 17+
-}
-
-/**
- * @param values
- * @returns
- *   -webkit-box-flex: <values>;
- *      -moz-box-flex: <values>;
- *       -webkit-flex: <values>;
- *           -ms-flex: <values>;
- *               flex: <values>;
- *
- * @example
- *   .selector {
- *     @include x-flex(1 1 auto);
- *   }
- */
-@mixin x-flex ($values...) {
-	-webkit-box-flex: $values; // Chrome 20-, iOS 6-, Safari 3.1 - 6
-	   -moz-box-flex: $values; // FF 19-
-	    -webkit-flex: $values; // Chrome 21 - 28
-	        -ms-flex: $values; // IE 10
-	            flex: $values; // FF 20+, Chrome 29+, Opera 12.1, 17+
-}
-
-/**
- * @param value
- * @returns
- *   -webkit-box-ordinal-group: <value>;
- *      -moz-box-ordinal-group: <value>;
- *              -ms-flex-order: <value>;
- *               -webkit-order: <value>;
- *                       order: <value>;
- *
- * @example
- *   .selector {
- *     @include x-order(1);
- *   }
- */
-@mixin x-order ($value) {
-	-webkit-box-ordinal-group: $value; // Chrome 20-, iOS 6-, Safari 3.1 - 6
-	   -moz-box-ordinal-group: $value; // FF 19-
-	           -ms-flex-order: $value; // IE 10
-	            -webkit-order: $value; // Chrome 21 - 28
-	                    order: $value; // FF 20+, Chrome 29+, Opera 12.1, 17+
-}
-
-/**
- * @param value
- * @returns
- *    -webkit-flex-wrap: <value>;
- *        -ms-flex-wrap: <value>;
- *            flex-wrap: <value>;
- *
- * @example
- *   .selector {
- *     @include x-flex-wrap(wrap);
- *   }
- */
-@mixin x-flex-wrap ($value) {
-	// IE 10
-	@if $value == nowrap {
-		-ms-flex-wrap: none;
-	} @else {
-		-ms-flex-wrap: $value;
-	}
-	-webkit-flex-wrap: $value; // Chrome 20-, iOS 6-, Safari 3.1 - 6
-	        flex-wrap: $value; // FF 28+, Chrome 21+, Opera 12.1, 17+, IE 11
-}
-
-/**
- * @param value
- * @returns
- *   -webkit-align-content: <value>;
- *      -moz-align-content: <value>;
- *      -ms-flex-line-pack: <value>;
- *           align-content: <value>;
- * @example
- *   .selector {
- *     @include x-align-content(center);
- *   }
- */
- @mixin x-align-content ($value) {
- 	// IE 10
- 	@if $value == flex-start {
- 		-ms-flex-line-pack: start;
- 	} @else if $value == flex-end {
- 		-ms-flex-line-pack: end;
- 	} @else if $value == space-between {
- 		-ms-flex-line-pack: justify;
- 	} @else if $value == space-around {
- 		-ms-flex-line-pack: distribute;
- 	} @else {
- 		-ms-flex-line-pack: $value;
- 	}
-	-webkit-align-content: $value; // Chrome 20-, iOS 6-, Safari 3.1 - 6
-	   -moz-align-content: $value; // FF 19-
-	        align-content: $value; // FF 20+, Chrome 21+, Opera 12.1, 17+, IE 11
- }
-
-/**
- * @param value
- * @returns
- *	  -webkit-box-direction: <value>;
- *		 -moz-box-direction: <value>;
- *       -webkit-box-orient: <value>;
- *		    -moz-box-orient: <value>;
- *   -webkit-flex-direction: <value>;
- *      -moz-flex-direction: <value>;
- *       -ms-flex-direction: <value>;
- *           flex-direction: <value>;
- * @example
- *   .selector {
- *     @include x-flex-direction(row-reverse);
- *   }
- */
- @mixin x-flex-direction ($value) {
-	@if $value == row {
-		-webkit-box-direction: normal;
-		   -moz-box-direction: normal;
-		   -webkit-box-orient: horizontal;
-		      -moz-box-orient: horizontal;
-	} @elseif $value == row-reverse {
-		-webkit-box-direction: reverse;
-		   -moz-box-direction: reverse;
-		   -webkit-box-orient: horizontal;
-		      -moz-box-orient: horizontal;
-	} @elseif $value == column {
-		-webkit-box-direction: normal;
-		   -moz-box-direction: normal;
-		   -webkit-box-orient: vertical;
-		      -moz-box-orient: vertical;
-	} @elseif $value == column-reverse {
-		-webkit-box-direction: reverse;
-		   -moz-box-direction: reverse;
-		   -webkit-box-orient: vertical;
-		      -moz-box-orient: vertical;
-	}
-
- 	-webkit-flex-direction: $value;
- 	   -moz-flex-direction: $value;
- 	    -ms-flex-direction: $value;
- 	        flex-direction: $value;
- }
-
-/* ToDo: add flex-grow, flex-shrink, flex-basis, flex-flow, align-items, align-self, justify-content mixins */
diff --git a/modules/_vendor.scss b/modules/_vendor.scss
index 5d1ef73..2a48b79 100644
--- a/modules/_vendor.scss
+++ b/modules/_vendor.scss
@@ -14,10 +14,10 @@
  *     @include vendor-prefix(hyphens, auto)
  */
 @mixin vendor-prefix($name, $argument) {
-  -webkit-#{$name}: #{$argument};
-  -ms-#{$name}: #{$argument};
-  -moz-#{$name}: #{$argument};
-  -o-#{$name}: #{$argument};
-  #{$name}: #{$argument};
+	-webkit-#{$name}: #{$argument};
+	-ms-#{$name}: #{$argument};
+	-moz-#{$name}: #{$argument};
+	-o-#{$name}: #{$argument};
+	#{$name}: #{$argument};
 }
 
diff --git a/modules/card/_card_module.scss b/modules/card/_card_module.scss
index 3b8e23d..92643ea 100644
--- a/modules/card/_card_module.scss
+++ b/modules/card/_card_module.scss
@@ -7,102 +7,93 @@
 // ------------------------------------------------------------------------------
 
 %absolute_full {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
 }
 
 .card_body {
-  height: 100%;
-  .bkg_box {
-    @extend %absolute_full;
-      transition-duration: 800ms;
-      overflow: hidden;
-      vertical-align: top;
-      z-index: -1;
-  }
+	height: 100%;
+	.bkg_box {
+		@extend %absolute_full;
+		transition-duration: 800ms;
+		overflow: hidden;
+		vertical-align: top;
+		z-index: -1;
+	}
+	.bkg_box > svg {
+		position: relative;
+	}
+	.flex_wrap_center {
+		display: -webkit-box;
+		display: -webkit-flex;
+		display: -moz-box;
+		display: -ms-flexbox;
+		display: flex;
+		-webkit-box-align: center;
+		-webkit-align-items: center;
+		-moz-box-align: center;
+		-ms-flex-align: center;
+		align-items: center;
+		-webkit-box-pack: center;
+		-webkit-justify-content: center;
+		-moz-box-pack: center;
+		-ms-flex-pack: center;
+		justify-content: center;
+		height: 100%;
+	}
+	.flex_content {
+		position: relative;
+		padding: 64px 64px 24px 64px;
+		border: 1px solid #FFF;
+		background-color: #F5F5F5;
+		z-index: 40;
+	}
+	h1 {
+		margin: 16px 0;
+		color: #1E1E1E;
+		font-size: 24px;
+		line-height: 1.4em;
+		font-weight: normal;
+	}
+	p {
+		margin-top: 0;
+		margin-bottom: 16px;
+		font-size: 12px;
+		line-height: 1.4em;
+	}
 
-  .bkg_box > svg {
-      position: relative;
-  }
-
-  .flex_wrap_center {
-      display: -webkit-box;
-      display: -webkit-flex;
-      display: -moz-box;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-box-align: center;
-      -webkit-align-items: center;
-      -moz-box-align: center;
-      -ms-flex-align: center;
-      align-items: center;
-      -webkit-box-pack: center;
-      -webkit-justify-content: center;
-      -moz-box-pack: center;
-      -ms-flex-pack: center;
-      justify-content: center;
-      height: 100%;
-  }
-
-  .flex_content {
-      position: relative;
-      padding: 64px 64px 24px 64px;
-      border: 1px solid #FFF;
-      background-color: #F5F5F5;
-      z-index: 40;
-  }
-
-  h1 {
-      margin: 16px 0;
-      color: #1E1E1E;
-      font-size: 24px;
-      line-height: 1.4em;
-      font-weight: normal;
-  }
-
-  p {
-      margin-top: 0;
-      margin-bottom: 16px;
-      font-size: 12px;
-      line-height: 1.4em;
-  }
-
-/*  .full {
-      position: absolute;
-      width: 128px;
-      height: 128px;
-      top: 16px;
-      left: 16px;
-      background-color: #fff;
-  }
-
-   .mark {
-      float: left;
-      width: 32px;
-      height: 32px;
-      margin-top: 16px;
-  }
- */
-  .marked {
-      padding-left: 1em;
-      text-indent: -1em;
-      text-align: center;
-  }
-
-  .marked:before { content: "*\0000a0" }
-
-  .decent { color: #666 }
-
-  a {
-      color: #000;
-      text-decoration: none;
-  }
-      a:hover {
-          color: #F4F9FA;
-          background-color: #0C85FF;
-          text-decoration: none;
-      }
+	/*  .full {
+	position: absolute;
+	width: 128px;
+	height: 128px;
+	top: 16px;
+	left: 16px;
+	background-color: #fff;
+}
+.mark {
+float: left;
+width: 32px;
+height: 32px;
+margin-top: 16px;
+}
+*/
+.marked {
+	padding-left: 1em;
+	text-indent: -1em;
+	text-align: center;
+}
+.marked:before { content: "*\0000a0" }
+.decent { color: #666 }
+a {
+	color: #000;
+	text-decoration: none;
+}
+a:hover {
+	color: #F4F9FA;
+	background-color: #0C85FF;
+	text-decoration: none;
+}
 }