diff --git a/www/css/htc.css b/www/css/htc.css
new file mode 100644
index 0000000..e8f9be7
--- /dev/null
+++ b/www/css/htc.css
@@ -0,0 +1,30 @@
+
+
+/* ----------- HTC One ----------- */
+
+/* Portrait and Landscape */
+@media screen 
+  and (device-width: 360px) 
+  and (device-height: 640px) 
+  and (-webkit-device-pixel-ratio: 3) {
+
+}
+
+/* Portrait */
+@media screen 
+  and (device-width: 360px) 
+  and (device-height: 640px) 
+  and (-webkit-device-pixel-ratio: 3) 
+  and (orientation: portrait) {
+
+}
+
+/* Landscape */
+@media screen 
+  and (device-width: 360px) 
+  and (device-height: 640px) 
+  and (-webkit-device-pixel-ratio: 3) 
+  and (orientation: landscape) {
+
+}
+
diff --git a/www/css/ipads.css b/www/css/ipads.css
new file mode 100644
index 0000000..b2b3475
--- /dev/null
+++ b/www/css/ipads.css
@@ -0,0 +1,84 @@
+
+
+/* ----------- iPad mini ----------- */
+
+/* Portrait and Landscape */
+@media only screen 
+  and (min-device-width: 768px) 
+  and (max-device-width: 1024px) 
+  and (-webkit-min-device-pixel-ratio: 1) {
+
+}
+
+/* Portrait */
+@media only screen 
+  and (min-device-width: 768px) 
+  and (max-device-width: 1024px) 
+  and (orientation: portrait) 
+  and (-webkit-min-device-pixel-ratio: 1) {
+
+}
+
+/* Landscape */
+@media only screen 
+  and (min-device-width: 768px) 
+  and (max-device-width: 1024px) 
+  and (orientation: landscape) 
+  and (-webkit-min-device-pixel-ratio: 1) {
+
+}
+
+/* ----------- iPad 1 and 2 ----------- */
+/* Portrait and Landscape */
+@media only screen 
+  and (min-device-width: 768px) 
+  and (max-device-width: 1024px) 
+  and (-webkit-min-device-pixel-ratio: 1) {
+
+}
+
+/* Portrait */
+@media only screen 
+  and (min-device-width: 768px) 
+  and (max-device-width: 1024px) 
+  and (orientation: portrait) 
+  and (-webkit-min-device-pixel-ratio: 1) {
+
+}
+
+/* Landscape */
+@media only screen 
+  and (min-device-width: 768px) 
+  and (max-device-width: 1024px) 
+  and (orientation: landscape) 
+  and (-webkit-min-device-pixel-ratio: 1) {
+
+}
+
+/* ----------- iPad 3 and 4 ----------- */
+/* Portrait and Landscape */
+@media only screen 
+  and (min-device-width: 768px) 
+  and (max-device-width: 1024px) 
+  and (-webkit-min-device-pixel-ratio: 2) {
+
+}
+
+/* Portrait */
+@media only screen 
+  and (min-device-width: 768px) 
+  and (max-device-width: 1024px) 
+  and (orientation: portrait) 
+  and (-webkit-min-device-pixel-ratio: 2) {
+
+}
+
+/* Landscape */
+@media only screen 
+  and (min-device-width: 768px) 
+  and (max-device-width: 1024px) 
+  and (orientation: landscape) 
+  and (-webkit-min-device-pixel-ratio: 2) {
+
+}
+
diff --git a/www/css/iphones.css b/www/css/iphones.css
new file mode 100644
index 0000000..cf79df2
--- /dev/null
+++ b/www/css/iphones.css
@@ -0,0 +1,112 @@
+
+
+/* ----------- iPhone 4 and 4S ----------- */
+
+/* Portrait and Landscape */
+@media only screen 
+  and (min-device-width: 320px) 
+  and (max-device-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2) {
+
+}
+
+/* Portrait */
+@media only screen 
+  and (min-device-width: 320px) 
+  and (max-device-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2)
+  and (orientation: portrait) {
+}
+
+/* Landscape */
+@media only screen 
+  and (min-device-width: 320px) 
+  and (max-device-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2)
+  and (orientation: landscape) {
+
+}
+
+/* ----------- iPhone 5 and 5S ----------- */
+
+/* Portrait and Landscape */
+@media only screen 
+  and (min-device-width: 320px) 
+  and (max-device-width: 568px)
+  and (-webkit-min-device-pixel-ratio: 2) {
+
+}
+
+/* Portrait */
+@media only screen 
+  and (min-device-width: 320px) 
+  and (max-device-width: 568px)
+  and (-webkit-min-device-pixel-ratio: 2)
+  and (orientation: portrait) {
+}
+
+/* Landscape */
+@media only screen 
+  and (min-device-width: 320px) 
+  and (max-device-width: 568px)
+  and (-webkit-min-device-pixel-ratio: 2)
+  and (orientation: landscape) {
+
+}
+
+/* ----------- iPhone 6 ----------- */
+
+/* Portrait and Landscape */
+@media only screen 
+  and (min-device-width: 375px) 
+  and (max-device-width: 667px) 
+  and (-webkit-min-device-pixel-ratio: 2) { 
+
+}
+
+/* Portrait */
+@media only screen 
+  and (min-device-width: 375px) 
+  and (max-device-width: 667px) 
+  and (-webkit-min-device-pixel-ratio: 2)
+  and (orientation: portrait) { 
+
+}
+
+/* Landscape */
+@media only screen 
+  and (min-device-width: 375px) 
+  and (max-device-width: 667px) 
+  and (-webkit-min-device-pixel-ratio: 2)
+  and (orientation: landscape) { 
+
+}
+
+/* ----------- iPhone 6+ ----------- */
+
+/* Portrait and Landscape */
+@media only screen 
+  and (min-device-width: 414px) 
+  and (max-device-width: 736px) 
+  and (-webkit-min-device-pixel-ratio: 3) { 
+
+}
+
+/* Portrait */
+@media only screen 
+  and (min-device-width: 414px) 
+  and (max-device-width: 736px) 
+  and (-webkit-min-device-pixel-ratio: 3)
+  and (orientation: portrait) { 
+
+}
+
+/* Landscape */
+@media only screen 
+  and (min-device-width: 414px) 
+  and (max-device-width: 736px) 
+  and (-webkit-min-device-pixel-ratio: 3)
+  and (orientation: landscape) { 
+
+}
+
diff --git a/www/css/kindle_tablet.css b/www/css/kindle_tablet.css
new file mode 100644
index 0000000..07c58c9
--- /dev/null
+++ b/www/css/kindle_tablet.css
@@ -0,0 +1,56 @@
+
+
+/* ----------- Kindle Fire HD 7" ----------- */
+
+/* Portrait and Landscape */
+@media only screen 
+  and (min-device-width: 800px) 
+  and (max-device-width: 1280px) 
+  and (-webkit-min-device-pixel-ratio: 1.5) {
+
+}
+
+/* Portrait */
+@media only screen 
+  and (min-device-width: 800px) 
+  and (max-device-width: 1280px) 
+  and (-webkit-min-device-pixel-ratio: 1.5) 
+  and (orientation: portrait) {
+}
+
+/* Landscape */
+@media only screen 
+  and (min-device-width: 800px) 
+  and (max-device-width: 1280px) 
+  and (-webkit-min-device-pixel-ratio: 1.5) 
+  and (orientation: landscape) {
+
+}
+
+/* ----------- Kindle Fire HD 8.9" ----------- */
+
+/* Portrait and Landscape */
+@media only screen 
+  and (min-device-width: 1200px) 
+  and (max-device-width: 1600px) 
+  and (-webkit-min-device-pixel-ratio: 1.5) {
+
+}
+
+/* Portrait */
+@media only screen 
+  and (min-device-width: 1200px) 
+  and (max-device-width: 1600px) 
+  and (-webkit-min-device-pixel-ratio: 1.5) 
+  and (orientation: portrait) {
+}
+
+/* Landscape */
+@media only screen 
+  and (min-device-width: 1200px) 
+  and (max-device-width: 1600px) 
+  and (-webkit-min-device-pixel-ratio: 1.5) 
+  and (orientation: landscape) {
+
+}
+
diff --git a/www/css/nexus_tablet.css b/www/css/nexus_tablet.css
new file mode 100644
index 0000000..2c11091
--- /dev/null
+++ b/www/css/nexus_tablet.css
@@ -0,0 +1,33 @@
+
+
+/* ----------- Asus Nexus 7 ----------- */
+
+/* Portrait and Landscape */
+@media screen 
+  and (device-width: 601px) 
+  and (device-height: 906px) 
+  and (-webkit-min-device-pixel-ratio: 1.331) 
+  and (-webkit-max-device-pixel-ratio: 1.332) {
+
+}
+
+/* Portrait */
+@media screen 
+  and (device-width: 601px) 
+  and (device-height: 906px) 
+  and (-webkit-min-device-pixel-ratio: 1.331) 
+  and (-webkit-max-device-pixel-ratio: 1.332) 
+  and (orientation: portrait) {
+
+}
+
+/* Landscape */
+@media screen 
+  and (device-width: 601px) 
+  and (device-height: 906px) 
+  and (-webkit-min-device-pixel-ratio: 1.331) 
+  and (-webkit-max-device-pixel-ratio: 1.332) 
+  and (orientation: landscape) {
+
+}
+
diff --git a/www/css/samsung.css b/www/css/samsung.css
new file mode 100644
index 0000000..151c9bb
--- /dev/null
+++ b/www/css/samsung.css
@@ -0,0 +1,86 @@
+
+
+/* ----------- Galaxy S3 ----------- */
+
+/* Portrait and Landscape */
+@media screen 
+  and (device-width: 320px) 
+  and (device-height: 640px) 
+  and (-webkit-device-pixel-ratio: 2) {
+
+}
+
+/* Portrait */
+@media screen 
+  and (device-width: 320px) 
+  and (device-height: 640px) 
+  and (-webkit-device-pixel-ratio: 2) 
+  and (orientation: portrait) {
+
+}
+
+/* Landscape */
+@media screen 
+  and (device-width: 320px) 
+  and (device-height: 640px) 
+  and (-webkit-device-pixel-ratio: 2) 
+  and (orientation: landscape) {
+
+}
+
+/* ----------- Galaxy S4 ----------- */
+
+/* Portrait and Landscape */
+@media screen 
+  and (device-width: 320px) 
+  and (device-height: 640px) 
+  and (-webkit-device-pixel-ratio: 3) {
+
+}
+
+/* Portrait */
+@media screen 
+  and (device-width: 320px) 
+  and (device-height: 640px) 
+  and (-webkit-device-pixel-ratio: 3) 
+  and (orientation: portrait) {
+
+}
+
+/* Landscape */
+@media screen 
+  and (device-width: 320px) 
+  and (device-height: 640px) 
+  and (-webkit-device-pixel-ratio: 3) 
+  and (orientation: landscape) {
+
+}
+
+/* ----------- Galaxy S5 ----------- */
+
+/* Portrait and Landscape */
+@media screen 
+  and (device-width: 360px) 
+  and (device-height: 640px) 
+  and (-webkit-device-pixel-ratio: 3) {
+
+}
+
+/* Portrait */
+@media screen 
+  and (device-width: 360px) 
+  and (device-height: 640px) 
+  and (-webkit-device-pixel-ratio: 3) 
+  and (orientation: portrait) {
+
+}
+
+/* Landscape */
+@media screen 
+  and (device-width: 360px) 
+  and (device-height: 640px) 
+  and (-webkit-device-pixel-ratio: 3) 
+  and (orientation: landscape) {
+
+}
+
diff --git a/www/css/samsung_tablet.css b/www/css/samsung_tablet.css
new file mode 100644
index 0000000..87ff85d
--- /dev/null
+++ b/www/css/samsung_tablet.css
@@ -0,0 +1,25 @@
+
+
+/* ----------- Galaxy Tab 10.1 ----------- */
+
+/* Portrait and Landscape */
+@media 
+  (min-device-width: 800px) 
+  and (max-device-width: 1280px) {
+
+}
+
+/* Portrait */
+@media 
+  (max-device-width: 800px) 
+  and (orientation: portrait) { 
+
+}
+
+/* Landscape */
+@media 
+  (max-device-width: 1280px) 
+  and (orientation: landscape) { 
+
+}
+
diff --git a/www/css/style.css b/www/css/style.css
index 56c9559..3529eb6 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -7,8 +7,10 @@
 
 }
 */
+
 .scroll-content {
 
+
 background: url("../img/background.svg");
 -webkit-animation: backgroundScroll 50s linear infinite;
  -webkit-background-size: cover;
@@ -21,12 +23,7 @@ animation: backgroundScroll 50s linear infinite;
 from {background-position: 0 0;}
 to {background-position: -2000px 0;}
 }
-        
-@keyframes backgroundScroll {
-from {background-position: 0 0;}
-to {background-position: -2000px 0;}
-}
-
+     
  .myborder{
     display: inline-block;
     border-radius: 6px;
@@ -40,4 +37,46 @@ to {background-position: -2000px 0;}
   background-color: #3e8e41;
   box-shadow: 0 5px #666;
   transform: translateY(4px);
-}
\ No newline at end of file
+}
+
+.mentorborder {
+  position:fixed;
+  bottom:0;
+  left:0;  
+  width: 256px;
+  height: 256px;
+  overflow: hidden;
+}
+
+.mentor {
+  width: 256px;
+  height: 2560px;
+  background:  url('../img/mentor.png') left center;
+  -webkit-animation: mentorsprite 4.5s steps(10) infinite;
+}
+
+@-webkit-keyframes mentorsprite {
+    100% { background-position: 0 -2560px; }
+}
+
+
+.mentorborderbravo {
+  position:fixed;
+  bottom:0;
+  right:0;  
+  width: 256px;
+  height: 256px;
+  overflow: hidden;
+}
+
+.mentorbravo {
+  width: 256px;
+  height: 1024px;
+  background:  url('../img/mentor_bravo.png') left center;
+  -webkit-animation: mentorspritebravo 2.5s steps(4) infinite;
+}
+
+@-webkit-keyframes mentorspritebravo {
+    100% { background-position: 0 -1024px; }
+}
+
diff --git a/www/img/mentor.png b/www/img/mentor.png
new file mode 100644
index 0000000..98554ad
Binary files /dev/null and b/www/img/mentor.png differ
diff --git a/www/img/mentor.psd b/www/img/mentor.psd
new file mode 100644
index 0000000..4c41d99
Binary files /dev/null and b/www/img/mentor.psd differ
diff --git a/www/img/mentor_bravo.png b/www/img/mentor_bravo.png
new file mode 100644
index 0000000..16d2e75
Binary files /dev/null and b/www/img/mentor_bravo.png differ
diff --git a/www/img/mentor_bravo.psd b/www/img/mentor_bravo.psd
new file mode 100644
index 0000000..957d154
Binary files /dev/null and b/www/img/mentor_bravo.psd differ
diff --git a/www/img/mentorhelp.png b/www/img/mentorhelp.png
new file mode 100644
index 0000000..6402b6a
Binary files /dev/null and b/www/img/mentorhelp.png differ
diff --git a/www/js/app.js b/www/js/app.js
index ebfec9e..4f8b5e4 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -3,7 +3,7 @@
 // angular.module is a global place for creating, registering and retrieving Angular modules
 // 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
 // the 2nd parameter is an array of 'requires'
-angular.module('kinderspiel', ['ionic', 'ngCordova', 'ngDraggable', 'kinderspiel.controllers', 'kinderspiel.services'])
+angular.module('kinderspiel', ['ionic', 'ngCordova','ngAnimate', 'ngDraggable', 'kinderspiel.controllers', 'kinderspiel.services'])
 
 .run(function($ionicPlatform) {
   $ionicPlatform.ready(function() {
diff --git a/www/js/controllers.js b/www/js/controllers.js
index b62d3f8..3f7bc8c 100644
--- a/www/js/controllers.js
+++ b/www/js/controllers.js
@@ -2,8 +2,11 @@ angular.module('kinderspiel.controllers', [])
 
 .controller('home', function($scope, $ionicPlatform, $cordovaMedia, $state ) {
 
+$scope.showmentor=false;
+
 $ionicPlatform.ready(function() {
-var media = new Media('/android_asset/www/sounds/hintergrundmusik1.mp3', fertig,null);
+var media = new Media('/android_asset/www/sounds/TORN.MID', fertig,null);
+//var media = new Media('/android_asset/www/sounds/hintergrundmusik1.mp3', fertig,null);
 var media1 = new Media('/android_asset/www/sounds/bravo.mp3', null,null);
 var mediastartespiel1 = new Media('/android_asset/www/sounds/spiel1.mp3', goto_spiel1,null);
 $scope.mymedia=media;
@@ -11,7 +14,7 @@ $scope.mymedia1=media1;
 $scope.mediastartespiel1=mediastartespiel1;
 
 $scope.mymedia.play();
-$scope.mymedia.setVolume('0.1');
+$scope.mymedia.setVolume('0.3');
 });
 
     $scope.play = function(src) {
@@ -26,28 +29,32 @@ $scope.mymedia.setVolume('0.1');
 
     $scope.starte_spiel2 = function(){
       $scope.mymedia1.play();
-      $scope.mymedia1.setVolume('0.6');
+      $scope.mymedia1.setVolume('1.0');
     }
 
     function fertig(){
       $scope.mymedia.play();
-      $scope.mymedia.setVolume('0.1');
+      $scope.mymedia.setVolume('0.3');
     }
 
 
     $scope.starte_spiel1 = function(){
+      $scope.showmentor=true;
       $scope.mediastartespiel1.play();
-      $scope.mediastartespiel1.setVolume('0.6');
+      $scope.mediastartespiel1.setVolume('1.0');
     }
 
     function goto_spiel1() {
       $scope.mediastartespiel1.release();
+      $scope.showmentor=false;
       $state.go('spiel1');
     }
 
 })
 .controller('Spiel1Ctrl', function($scope,  $ionicPlatform, $cordovaMedia, $state, $timeout) {
 
+$scope.showmentor=false;
+$scope.showmentorbravo=false;
 $scope.spiele=[];
 $scope.spieleview=[];
 $scope.tierfinden='';
@@ -171,6 +178,13 @@ var tier7 = {
 $scope.spiele.push(tier7);
 
 
+$scope.hilfe = function() {
+  $scope.showmentor=true;
+  $timeout(function () {
+      $scope.showmentor=false;
+    }, 3500);
+  $scope.sounds[$scope.randomid].play();
+}
 
 $scope.answer = function(src) {
 
@@ -188,7 +202,11 @@ $scope.answer = function(src) {
               }, 500);
             }, 500);
     }, 500);
-
+    $scope.showmentorbravo=true;
+    $timeout(function () {
+        $scope.showmentorbravo=false;
+        $timeout(function () {$scope.showmentor=true;}, 1200);
+      }, 2400);
     $scope.bravosound.play();
   }
   else{
@@ -222,8 +240,14 @@ var shuffleArray = function(array) {
 }
 
 function goto_newspiel() {
+
+  $scope.showmentor=true;
+
   $scope.randomid = getRandomInt(1, 8);
   //$scope.play('/android_asset/www/sounds/' + $scope.sounds[$scope.randomid]);
+  $timeout(function () {
+      $scope.showmentor=false;
+    }, 3500);
   $scope.sounds[$scope.randomid].play();
 }
 
diff --git a/www/sounds/TORN.MID b/www/sounds/TORN.MID
new file mode 100644
index 0000000..742933d
Binary files /dev/null and b/www/sounds/TORN.MID differ
diff --git a/www/templates/home.html b/www/templates/home.html
index 7b333e1..e90b8cc 100644
--- a/www/templates/home.html
+++ b/www/templates/home.html
@@ -6,6 +6,8 @@
         <img class="myborder" src="img/elefant.jpg" height="128" width="128" ng-click="starte_spiel1()">
       </div>
     </div>
-
+    <div class="mentorborder" ng-show="showmentor">
+        <div class="mentor"></div>
+    </div>
   </ion-content>
 </ion-view>
diff --git a/www/templates/spiel1.html b/www/templates/spiel1.html
index e25e88a..1703a4d 100644
--- a/www/templates/spiel1.html
+++ b/www/templates/spiel1.html
@@ -8,6 +8,16 @@
                 <br>
             </div>
     </div>
-
+    <div class="row" style="font-size: 12px;" >
+        <div style="width: 100%;  text-align: center;" class="col">
+                <img class="myborder animated" src="img/mentorhelp.png" width="64" height="64" alig="center" ng-click="hilfe()">
+        </div>
+    </div>
+    <div class="mentorborder" ng-show="showmentor">
+        <div class="mentor"></div>
+    </div>
+    <div class="mentorborderbravo" ng-show="showmentorbravo">
+        <div class="mentorbravo"></div>
+    </div>
   </ion-content>
 </ion-view>