From 457ded116422aafa0aef82a55e37d879fb1ffd51 Mon Sep 17 00:00:00 2001
From: simongehrig <mail@simongehrig.de>
Date: Thu, 23 Feb 2017 12:30:27 +0100
Subject: [PATCH] Added the css Files to VCS

TODO Selector configuration for easier implementation
---
 slider.css  | 281 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 slider.html |  27 +++--
 slider.scss |   2 +-
 3 files changed, 303 insertions(+), 7 deletions(-)
 create mode 100644 slider.css

diff --git a/slider.css b/slider.css
new file mode 100644
index 0000000..d7ab02c
--- /dev/null
+++ b/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 */
\ No newline at end of file
diff --git a/slider.html b/slider.html
index 707155e..d6311c4 100644
--- a/slider.html
+++ b/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
-        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>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>
+        <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>
diff --git a/slider.scss b/slider.scss
index c83a6e3..a593d04 100644
--- a/slider.scss
+++ b/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;