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 @@
- 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.
+
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.
+
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.
+
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.
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;