diff --git a/blog-post.html b/blog-post.html
index 8e35ced..0f901e5 100755
--- a/blog-post.html
+++ b/blog-post.html
@@ -12,11 +12,37 @@
     
 	<!-- CSS -->
 	<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
-	<link href="css/flexslider.css" rel="stylesheet" type="text/css" />
+	<script>
+    function isMobile() {
+    const regex = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
+    return regex.test(navigator.userAgent);
+  }
+
+  if (isMobile()) {
+    console.log("Detekováno mobilní zařízení");
+      document.write("<style>");
+      document.write(".sloupce{column-count:1;column-width:100px;column-rule-width:10px;}");
+      document.write(".menu a span {padding-left: 5px;}");
+      document.write(".menu a:hover span {padding-left: 10px;}");
+      document.write("</style>");
+      document.write("<link href='css/flexslider-mobil.css' rel='stylesheet' type='text/css' />");
+  } else {
+    console.log("Detekován počítač");
+      document.write("<style>");
+      document.write(".sloupce{column-count:2;column-width:100px;column-rule-width:10px;}");
+      document.write(".menu a span {display:none;}");
+      document.write(".menu a:hover span {display:block;}");
+      document.write("</style>");
+      document.write("<link href='css/flexslider.css' rel='stylesheet' type='text/css' />");
+  }
+  </script>
+	<!--<link href="css/flexslider.css" rel="stylesheet" type="text/css" />-->
+	<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" />
 	<link href="css/animate.css" rel="stylesheet" type="text/css" media="all" />
-    <link href="css/owl.carousel.css" rel="stylesheet">
+	<link href="css/animate1.css" rel="stylesheet" type="text/css" media="all" />
+	<link href="css/animate2.css" rel="stylesheet" type="text/css" media="all" />
+  <link href="css/owl.carousel.css" rel="stylesheet">
 	<link href="css/style.css" rel="stylesheet" type="text/css" />
-	<link href="css/colors/" rel="stylesheet" type="text/css" id="colors" />
     
 	<!-- FONTS -->
 	<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500italic,700,500,700italic,900,900italic' rel='stylesheet' type='text/css'>
@@ -34,7 +60,13 @@
 	<script src="js/owl.carousel.js"></script>
 	<script src="js/animate.js" type="text/javascript"></script>
 	<script src="js/myscript.js" type="text/javascript"></script>
-	
+	<script>
+	$(function() {
+	setTimeout(function() { $("#showDiv").fadeOut(0); }, 0);
+	setTimeout(function() { $("#hideDiv").fadeOut(1500); }, 5000);
+	setTimeout(function() { $("#showDiv").fadeIn(1500); }, 5000);
+	})
+	</script>
 </head>
 <body>
 
diff --git a/blog.html b/blog.html
index 8c0bcfb..a4a6f21 100755
--- a/blog.html
+++ b/blog.html
@@ -12,10 +12,36 @@
     
 	<!-- CSS -->
 	<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
-	<link href="css/flexslider.css" rel="stylesheet" type="text/css" />
+	<script>
+    function isMobile() {
+    const regex = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
+    return regex.test(navigator.userAgent);
+  }
+
+  if (isMobile()) {
+    console.log("Detekováno mobilní zařízení");
+      document.write("<style>");
+      document.write(".sloupce{column-count:1;column-width:100px;column-rule-width:10px;}");
+      document.write(".menu a span {padding-left: 5px;}");
+      document.write(".menu a:hover span {padding-left: 10px;}");
+      document.write("</style>");
+      document.write("<link href='css/flexslider-mobil.css' rel='stylesheet' type='text/css' />");
+  } else {
+    console.log("Detekován počítač");
+      document.write("<style>");
+      document.write(".sloupce{column-count:2;column-width:100px;column-rule-width:10px;}");
+      document.write(".menu a span {display:none;}");
+      document.write(".menu a:hover span {display:block;}");
+      document.write("</style>");
+      document.write("<link href='css/flexslider.css' rel='stylesheet' type='text/css' />");
+  }
+  </script>
+	<!--<link href="css/flexslider.css" rel="stylesheet" type="text/css" />-->
 	<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" />
 	<link href="css/animate.css" rel="stylesheet" type="text/css" media="all" />
-    <link href="css/owl.carousel.css" rel="stylesheet">
+	<link href="css/animate1.css" rel="stylesheet" type="text/css" media="all" />
+	<link href="css/animate2.css" rel="stylesheet" type="text/css" media="all" />
+  <link href="css/owl.carousel.css" rel="stylesheet">
 	<link href="css/style.css" rel="stylesheet" type="text/css" />
     
 	<!-- FONTS -->
@@ -69,11 +95,13 @@
 		});
 		
 	</script>
-	<style>
-	.menu a span {display:none;}
-	.menu a:hover span {display:block;}
-	</style>
-	
+	<script>
+	$(function() {
+	setTimeout(function() { $("#showDiv").fadeOut(0); }, 0);
+	setTimeout(function() { $("#hideDiv").fadeOut(1500); }, 5000);
+	setTimeout(function() { $("#showDiv").fadeIn(1500); }, 5000);
+	})
+	</script>
 </head>
 <body>
 
diff --git a/portfolio-post.html b/portfolio-post.html
index 36ba6c9..c95aa6a 100755
--- a/portfolio-post.html
+++ b/portfolio-post.html
@@ -12,11 +12,37 @@
     
 	<!-- CSS -->
 	<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
-	<link href="css/flexslider.css" rel="stylesheet" type="text/css" />
+	<script>
+    function isMobile() {
+    const regex = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
+    return regex.test(navigator.userAgent);
+  }
+
+  if (isMobile()) {
+    console.log("Detekováno mobilní zařízení");
+      document.write("<style>");
+      document.write(".sloupce{column-count:1;column-width:100px;column-rule-width:10px;}");
+      document.write(".menu a span {padding-left: 5px;}");
+      document.write(".menu a:hover span {padding-left: 10px;}");
+      document.write("</style>");
+      document.write("<link href='css/flexslider-mobil.css' rel='stylesheet' type='text/css' />");
+  } else {
+    console.log("Detekován počítač");
+      document.write("<style>");
+      document.write(".sloupce{column-count:2;column-width:100px;column-rule-width:10px;}");
+      document.write(".menu a span {display:none;}");
+      document.write(".menu a:hover span {display:block;}");
+      document.write("</style>");
+      document.write("<link href='css/flexslider.css' rel='stylesheet' type='text/css' />");
+  }
+  </script>
+	<!--<link href="css/flexslider.css" rel="stylesheet" type="text/css" />-->
+	<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" />
 	<link href="css/animate.css" rel="stylesheet" type="text/css" media="all" />
-    <link href="css/owl.carousel.css" rel="stylesheet">
+	<link href="css/animate1.css" rel="stylesheet" type="text/css" media="all" />
+	<link href="css/animate2.css" rel="stylesheet" type="text/css" media="all" />
+  <link href="css/owl.carousel.css" rel="stylesheet">
 	<link href="css/style.css" rel="stylesheet" type="text/css" />
-	<link href="css/colors/" rel="stylesheet" type="text/css" id="colors" />
     
 	<!-- FONTS -->
 	<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500italic,700,500,700italic,900,900italic' rel='stylesheet' type='text/css'>
@@ -34,7 +60,13 @@
 	<script src="js/owl.carousel.js"></script>
 	<script src="js/animate.js" type="text/javascript"></script>
 	<script src="js/myscript.js" type="text/javascript"></script>
-	
+	<script>
+	$(function() {
+	setTimeout(function() { $("#showDiv").fadeOut(0); }, 0);
+	setTimeout(function() { $("#hideDiv").fadeOut(1500); }, 5000);
+	setTimeout(function() { $("#showDiv").fadeIn(1500); }, 5000);
+	})
+	</script>
 </head>
 <body>
 
