diff --git a/assets/css/main.css b/assets/css/main.css
index 13ed05a..e03d9df 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -195,4 +195,28 @@ html {
   .visible-xxs {
     display: block !important; } }
 
+/*
+ * KIRBYTAGS
+ */
+.html5player {
+  width: 100%;
+  height: auto;
+  background-color: black; }
+
+div.video-container {
+  position: relative;
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+  padding-bottom: 53%;
+  padding-top: 30px;
+  overflow: hidden; }
+
+.video-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%; }
+
 /*# sourceMappingURL=main.css.map */
\ No newline at end of file
diff --git a/assets/css/main.css.map b/assets/css/main.css.map
index dc91362..469b046 100644
Binary files a/assets/css/main.css.map and b/assets/css/main.css.map differ
diff --git a/assets/css/templates/home.css b/assets/css/templates/home.css
index 99e81b4..8695aec 100644
--- a/assets/css/templates/home.css
+++ b/assets/css/templates/home.css
@@ -1,12 +1,10 @@
 /* STYLE for jannikbeyerstedt.de
  * for specific template
  */
-/* line 6, /Users/jannik/Sites/aquila-jannik4/assets/scss/templates/home.scss */
 main div.home {
   text-align: center;
   margin-top: 20%;
   margin-bottom: 20%; }
-  /* line 10, /Users/jannik/Sites/aquila-jannik4/assets/scss/templates/home.scss */
   main div.home h1 {
     margin: 0;
     font-family: 'Alegreya Sans', "Verdana", "Arial", sans-serif;
@@ -14,7 +12,6 @@ main div.home {
     font-size: 60px;
     margin-top: 15px;
     margin-bottom: 15px; }
-  /* line 18, /Users/jannik/Sites/aquila-jannik4/assets/scss/templates/home.scss */
   main div.home p {
     margin: 0;
     font-size: 20px; }
diff --git a/assets/css/templates/home.css.map b/assets/css/templates/home.css.map
index 03a99e3..25b92f0 100644
Binary files a/assets/css/templates/home.css.map and b/assets/css/templates/home.css.map differ
diff --git a/assets/css/templates/photo.css b/assets/css/templates/photo.css
index e3518cf..977269d 100644
--- a/assets/css/templates/photo.css
+++ b/assets/css/templates/photo.css
@@ -5,10 +5,19 @@ body {
   background-color: #424242;
   color: #fff; }
 
+a {
+  color: #108ffd; }
+  a:active, a:hover {
+    color: #75bffe; }
+
 @media (min-width: 544px) {
   nav ul.nav.main {
     color: #fff; } }
 
+footer {
+  background-color: #303030;
+  color: #e6e6e6; }
+
 div.carousel {
   max-width: 1300px;
   margin: 0 auto; }
diff --git a/assets/css/templates/photo.css.map b/assets/css/templates/photo.css.map
index fd8341f..d60cf23 100644
Binary files a/assets/css/templates/photo.css.map and b/assets/css/templates/photo.css.map differ
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index c8953a5..f4f43cd 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -270,3 +270,29 @@ html {
     display: block!important;
   }
 }
+
+
+
+/*
+ * KIRBYTAGS
+ */
+.html5player {
+  width: 100%;
+  height: auto;
+  background-color: black;
+}
+
+div.video-container {
+  position: relative;
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+  padding-bottom: 53%;
+  padding-top: 30px;
+  overflow: hidden;
+}
+.video-container iframe {
+  position: absolute; top: 0; left: 0;
+  width: 100%; height: 100%;
+}
+
diff --git a/assets/scss/templates/photo.scss b/assets/scss/templates/photo.scss
index b6e5ba4..37b5ded 100644
--- a/assets/scss/templates/photo.scss
+++ b/assets/scss/templates/photo.scss
@@ -7,10 +7,20 @@
 
 @import "../mainvariables";
 
-// change main.scss behavior
+
+$inv_bgColor: #424242;
+$inv_fontcolor: #fff;
+
+// change main.scss behavior - inverted color style
 body {
-  background-color: #424242;
-  color: #fff;
+  background-color: $inv_bgColor;
+  color: $inv_fontcolor;
+}
+a {
+  color: lighten($link-color, 10%);
+  &:active, &:hover {
+    color: lighten($link-color, 30%);
+  }
 }
 @include media-breakpoint-up(sm) {
   nav {
@@ -19,12 +29,16 @@ body {
     }
   }
 }
+footer {
+  background-color: darken($inv_bgColor, 7%);
+  color: darken($inv_fontcolor, 10%);
+}
 
 
 // additional css
 main.photo {
   .container {
-    
+
   }
 }
 
@@ -36,7 +50,7 @@ div.carousel {
 
 
 // ---- from boostrap ----
-// @requires animation.scss (already in main.scss) and carousel.js, util.js
 @import "images";
 
+// @requires animation.scss (already in main.scss) and carousel.js, util.js
 @import "carousel";
diff --git a/site/templates/photo.php b/site/templates/photo.php
index 26637ca..020c2f5 100644
--- a/site/templates/photo.php
+++ b/site/templates/photo.php
@@ -11,7 +11,6 @@ snippet('base/cont-header');
 ?>
 
 <main class="section photo">
-
   <?php echo snippet('plg-carousel', array('currentPage'=>$page,
                                            'preNormal'=>'',
                                            'preAlt'=>'')); ?>