From 31c7e9ec9ac438701844a833ff2b669d54948953 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=2E=20Fernando=20S=C3=A1nchez?= <balkian@gmail.com>
Date: Sun, 11 Jan 2015 21:47:17 +0100
Subject: [PATCH] Fixed avatar

---
 _layouts/default.html |  6 +++---
 css/main-desktop.css  | 21 ++++++++++++---------
 css/main-medium.css   | 10 +++++-----
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/_layouts/default.html b/_layouts/default.html
index da2d196..4d1c78c 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -55,12 +55,12 @@
       <div id="contentwrapper">
         <div id="sidebar" >
           <div id="badge" class="flip-container" ontouchstart="this.classList.toggle('hover');">
-              <div class="flipper">
-                <div class="front sticky">
+              <div class="flipper sticky">
+                <div class="front">
                   <!-- front content -->
                   <img id="avatar" width=100% src="/img/me.png">
                 </div>
-                <div class="back stickyback">
+                <div class="back">
                   <!-- back content -->
                   <img id="picture" width=100% src="/img/me.jpg">
                 </div>
diff --git a/css/main-desktop.css b/css/main-desktop.css
index c58333d..a884142 100755
--- a/css/main-desktop.css
+++ b/css/main-desktop.css
@@ -54,6 +54,7 @@
 .front, .back {
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
   position: absolute;
   top: 0;
   left: 0;
@@ -67,14 +68,16 @@
 
 /* front pane, placed above back */
 .front {
-  z-index: 4;
+  z-index: 3;
 }
 
 /* back, initially hidden pane */
 .back {
   transform: rotateY(180deg);
   -webkit-transform: rotateY(180deg);
-  z-index: 3;
+  -moz-transform: rotateY(180deg);
+  transform: rotateY(180deg);
+  z-index: 4;
 }
 
 .sticky:after {
@@ -92,15 +95,15 @@
   z-index: 1000;
   -webkit-transform:rotate(43deg);
   -moz-transform:rotate(43deg);
-  backface-visibility: visible;
-  -moz-backface-visibility: visible;
-  -webkit-backface-visibility: visible;
+  backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
 }
 
-.sticky:hover:after {
-  content: "";
-  visibility: hidden;
-}
+/*.flip-container:hover .sticky:after {*/
+  /*content: "";*/
+  /*visibility: hidden;*/
+/*}*/
 
 #container {
   min-height: 100%;
diff --git a/css/main-medium.css b/css/main-medium.css
index a5939f3..073d374 100644
--- a/css/main-medium.css
+++ b/css/main-medium.css
@@ -66,14 +66,14 @@
 
 /* front pane, placed above back */
 .front {
-  z-index: 4;
+  z-index: 3;
 }
 
 /* back, initially hidden pane */
 .back {
   transform: rotateY(180deg);
   -webkit-transform: rotateY(180deg);
-  z-index: 3;
+  z-index: 4;
 }
 
 .sticky:after {
@@ -91,9 +91,9 @@
   z-index: 1000;
   -webkit-transform:rotate(43deg);
   -moz-transform:rotate(43deg);
-  backface-visibility: visible;
-  -moz-backface-visibility: visible;
-  -webkit-backface-visibility: visible;
+  backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
 }
 
 .sticky:hover:after {