Added the css Files to VCS

TODO Selector configuration for easier implementation

slider.css

@@ -0,0 +1,281 @@
+/* Simons SCSS Framework */
+@CHARSET "ISO-8859-1";
+/* RESET
+
+  SOURCE:
+   http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline; }
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block; }
+
+ol, ul {
+  list-style: none; }
+
+blockquote, q {
+  quotes: none; }
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none; }
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0 !important; }
+
+/* Slider */
+body {
+  font-family: Calibri, sans-serif; }
+
+header {
+  /* Absolute Positioning */
+  position: absolute;
+  top: 0;
+  right: 12.5%;
+  bottom: auto;
+  left: 12.5%;
+  position: fixed;
+  height: 200px;
+  background-color: #333333;
+  z-index: 1000; }
+  header .brand {
+    display: block;
+    font-size: 100px;
+    font-weight: 700;
+    padding: 25px 50px !important;
+    color: #ffffff;
+    text-transform: uppercase; }
+
+div#content {
+  width: 75%;
+  margin: 200px auto 0 auto;
+  background-color: #ffffff;
+  border-left: solid 1px #eeeeee;
+  border-right: solid 1px #eeeeee;
+  box-sizing: border-box;
+  padding-bottom: 120px; }
+  div#content .text {
+    max-width: 50%;
+    margin: 20px auto; }
+
+footer {
+  display: table;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100px;
+  width: 100%;
+  background-color: #eeeeee;
+  text-align: center; }
+  footer span {
+    display: table-cell;
+    vertical-align: middle;
+    margin: 0 auto; }
+
+div.bannergroup {
+  width: 100%;
+  position: relative;
+  z-index: 0;
+  margin: 0 auto;
+  padding: 0 !important;
+  overflow: hidden;
+  background-color: #ffffff; }
+  div.bannergroup .banneritem {
+    position: absolute;
+    overflow: hidden;
+    width: 61.8%;
+    padding: 0 !important;
+    -webkit-transition: all 1s ease 0s;
+    transition: all 1s ease 0s; }
+    div.bannergroup .banneritem.active {
+      z-index: 100;
+      opacity: 1; }
+      div.bannergroup .banneritem.active img {
+        -ms-filter: none;
+        -webkit-filter: none;
+                filter: none;
+        -webkit-transform: scale(1);
+                transform: scale(1); }
+    div.bannergroup .banneritem.inactive {
+      z-index: 90;
+      opacity: 1; }
+      div.bannergroup .banneritem.inactive.visible {
+        z-index: 95; }
+      div.bannergroup .banneritem.inactive img {
+        -webkit-filter: blur(1px);
+        -ms-filter: blur(1px);
+        filter: blur(1px) !important;
+        -webkit-transform: scale(1.1);
+        transform: scale(1.1); }
+    div.bannergroup .banneritem img {
+      vertical-align: middle !important;
+      width: 100%;
+      -webkit-transition: all 0.2s ease 0s;
+      transition: all 0.2s ease 0s; }
+      div.bannergroup .banneritem img.portrait {
+        width: 100%;
+        height: auto; }
+      div.bannergroup .banneritem img:before {
+        content: "";
+        display: block;
+        padding-top: 42.5532%;
+        /* initial ratio of 47:20*/ }
+    div.bannergroup .banneritem a {
+      position: absolute;
+      display: table !important;
+      top: 0;
+      left: 0;
+      margin: 0 !important;
+      text-decoration: none; }
+      div.bannergroup .banneritem a .bannertext {
+        display: table-cell;
+        text-align: center;
+        vertical-align: middle;
+        line-height: 56px;
+        font-family: Calibri, sans-serif;
+        font-size: 42px;
+        color: #ffffff;
+        text-shadow: 0px 0px 4.62px #000;
+        background: transparent !important; }
+  div.bannergroup .banneritem
+  .banneritem img, div.bannergroup .banneritem iframe {
+    position: absolute;
+    top: 0;
+    left: 0 !important;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: auto; }
+  div.bannergroup .bannerautoplay {
+    position: absolute;
+    bottom: 0 !important;
+    left: 0;
+    margin: 0;
+    padding: 14px;
+    z-index: 200000;
+    width: auto; }
+    div.bannergroup .bannerautoplay .play {
+      display: inline-block;
+      width: 7.77778px !important;
+      height: 7.77778px;
+      margin: 0 9.24px -2px 0;
+      border-top: solid 4.62px #eeeeee;
+      border-right: solid 4.62px #eeeeee;
+      border-bottom-left-radius: 7.77778px;
+      background: #333333;
+      -webkit-transform: rotate(45deg);
+              transform: rotate(45deg);
+      box-shadow: 0 0 4.62px #333333; }
+      div.bannergroup .bannerautoplay .play:first-of-type {
+        margin-left: 0; }
+      div.bannergroup .bannerautoplay .play:last-of-type {
+        margin-right: 0; }
+    div.bannergroup .bannerautoplay .pause {
+      display: inline-block;
+      height: 14px;
+      width: 4.62px !important;
+      margin: 0 9.24px -4px 0;
+      border-left: solid 4.62px #eeeeee;
+      border-right: solid 4.62px #eeeeee;
+      background: #333333;
+      box-shadow: 0 0 4.62px #333333; }
+      div.bannergroup .bannerautoplay .pause:first-of-type {
+        margin-left: 0; }
+      div.bannergroup .bannerautoplay .pause:last-of-type {
+        margin-right: 0; }
+  div.bannergroup .bannerjump-wrapper {
+    position: absolute;
+    bottom: 0 !important;
+    right: 0;
+    margin: 0;
+    padding: 14px;
+    z-index: 200000;
+    width: auto; }
+    div.bannergroup .bannerjump-wrapper .bannerjump {
+      display: inline-block;
+      width: 4.62px !important;
+      height: 4.62px;
+      margin: 0 9.24px -4px 0;
+      border-radius: 9.24px;
+      border: solid 4.62px #333333;
+      background: #eeeeee; }
+      div.bannergroup .bannerjump-wrapper .bannerjump.active {
+        background: #333333;
+        border-color: #eeeeee; }
+      div.bannergroup .bannerjump-wrapper .bannerjump:first-of-type {
+        margin-left: 0; }
+      div.bannergroup .bannerjump-wrapper .bannerjump:last-of-type {
+        margin-right: 0; }
+  div.bannergroup .bannercontrols {
+    position: absolute; }
+    div.bannergroup .bannercontrols .left {
+      display: table;
+      position: absolute;
+      top: 0;
+      right: 100%;
+      min-width: 98px;
+      margin: 0 !important; }
+      div.bannergroup .bannercontrols .left .circle {
+        -webkit-transform: rotate(180deg);
+                transform: rotate(180deg); }
+    div.bannergroup .bannercontrols .right {
+      display: table;
+      position: absolute;
+      top: 0;
+      left: 0;
+      min-width: 98px;
+      margin: 0 !important; }
+    div.bannergroup .bannercontrols .iconwrapper {
+      display: table-cell;
+      vertical-align: middle; }
+      div.bannergroup .bannercontrols .iconwrapper .circle {
+        display: block;
+        overflow: hidden !important;
+        position: relative;
+        width: 46.62px;
+        height: 46.62px;
+        margin: 0 auto;
+        border-radius: 46.62px;
+        border: solid 4.62px #eeeeee;
+        background-color: #333333;
+        opacity: 1;
+        box-shadow: 0 0 4.62px #333333; }
+        div.bannergroup .bannercontrols .iconwrapper .circle .arrow {
+          display: block;
+          position: absolute;
+          right: 20%;
+          top: 30%;
+          width: 15.54px;
+          height: 15.54px;
+          border-left: solid 4.62px #eeeeee;
+          border-top: solid 4.62px #eeeeee;
+          -webkit-transform: rotate(-45deg);
+                  transform: rotate(-45deg); }
+
+/*# sourceMappingURL=slider.css.map */

slider.html

@@ -53,12 +53,27 @@
         </div>
     </div>
     <div class="text">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
             dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
             clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
-        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+            consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+            sed
             diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
-        takimata sanctus est Lorem ipsum dolor sit amet.
+            takimata sanctus est Lorem ipsum dolor sit amet.</p>
+        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+            consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+            sed
+            diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
+            takimata sanctus est Lorem ipsum dolor sit amet.</p>
+        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+            consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+            sed
+            diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
+            takimata sanctus est Lorem ipsum dolor sit amet.</p>
     </div>
 </div>
 <footer>

slider.scss

@@ -104,7 +104,7 @@ div.bannergroup {
     width: $slider_item_width;
 
     padding: 0 !important;
-    transition: all 2s ease 0s;
+    transition: all 1s ease 0s;
 
     &.active {
       z-index: 100;