responsive: burger menu ok, started generale layout

sites/all/themes/gui/perfarttimeline/less/styles.less

@@ -21,7 +21,11 @@ html, body{
 #container{
   width:100%; height:100%;
   //width:1000px; height:700px;
-  min-width:1020px; min-height:700px;
+  // todo media query for mobile phone
+
+  // min-width:1020px;
+  min-width: none;
+  min-height:700px;
   .m(0 auto); background-color: #FFF;
   &>.inner{width:96%; height:94%; .p(1.5%);}
 }
@@ -32,7 +36,8 @@ html, body{
   border-bottom:2px solid #000; //.pb(5px); 
   
   .logo{ 
-    width:35%; height:27px; position:relative; bottom:0; left:0;
+    // width:35%; 
+    height:27px; position:relative; bottom:0; left:0;
     html.oldie &{width:49%;}
     h1{
       .fs-header;
@@ -41,25 +46,7 @@ html, body{
   }
   
   #header-blocks{
-    width:63%; position:absolute; bottom:0; right:0; text-align: right; height:27px;
     html.oldie &{width:62%;}
-    // >.wrapper{position:relative; width:100%; height:100%;}
-    .region{
-      .inlineblock;
-      &:not(:first-child){ margin-left:1.1em; }
-      // don't know why but here display:inline; deosn't work on ie8 …
-      html.oldie &{float:left; margin-left:10px;}
-    }
-  }
-
-  ul.menu{
-    padding:0; margin:0;
-    li{
-      .inlineblock; margin:0;
-      &:not(.last){.p(0 6px 0 0);}
-      &.last{.p(0);}
-      a{.fs-header;}
-    }
   } 
   
   ul.language-switcher-locale-url{
@@ -92,6 +79,135 @@ html, body{
   }
   
 }
+/** RESPONSIVE */
+@media (min-width:799px) {
+  #header .logo {
+    width:35%;
+  }
+  #header-blocks{
+    // background-color: blue;
+    width:63%; position:absolute; bottom:0; right:0; text-align: right; height:27px;
+    .region{
+      .inlineblock;
+      &:not(:first-child){ margin-left:1.1em; }
+      // don't know why but here display:inline; deosn't work on ie8 …
+      html.oldie &{float:left; margin-left:10px;}
+    }
+    ul.menu{
+      padding:0; margin:0;
+      li{
+        .inlineblock; margin:0;
+        &:not(.last){.p(0 6px 0 0);}
+        &.last{.p(0);}
+        a{.fs-header;}
+      }
+    }
+  }
+}
+@media (max-width:799px) {
+  #header .logo {
+    width:auto;
+    z-index: 11;
+  }
+  #header-blocks{
+    background-color:white;
+    position:absolute;
+    z-index: 10;
+    bottom:0;
+    right:0;
+    // width:63%;
+    height:27px;
+    text-align: right;
+    .region{
+      background-color: white;
+      padding:0 1em 0 1em;
+      &:first-child{padding-top:2em;}
+      &:last-child{padding-bottom:1em;}
+    }
+    ul{
+      padding:0; margin:0;
+      text-align: right;
+      li{
+        list-style: none;
+        margin:0;
+        padding: 0!important;
+        // &:not(.last){.p(0 6px 0 0);}
+        // &.last{.p(0);}
+        a{.fs-header;}
+      }
+    }
+
+    transition: transform 0.5s ease-in-out;
+    transform: translateX(150%);
+    body.burger-shown &{
+      transform: translateX(0);
+    }
+  }
+  
+  .burger-icon {
+    height: 15px;
+    width: 20px;
+    // margin: 3%;
+    position: absolute;
+    top: 0.5em;
+    right: 0.5em;
+    display: inline-block;
+    vertical-align: middle;
+    z-index: 20;
+    cursor: pointer;
+    span {
+      display: block;
+      background: #000;
+      width: 100%;
+      height: 2px;
+      margin-top: -2px;
+      position: absolute;
+      left: 0;
+      top: 50%;
+    }
+
+    &:before,
+    &:after {
+      content: "";
+      display: block;
+      background: #000;
+      width: 100%;
+      height: 2px;
+      position: absolute;
+      left: 0;
+      transform-origin: center center;
+      transform: rotate(0deg);
+      transition: all 0.3s ease;
+    }
+    &:before {
+      top: 2px;
+      margin-top: -2px;
+    }
+    
+    &:after {
+      bottom: 2px;
+      margin-bottom: -2px;
+    }
+
+    body.burger-shown & {
+      span {
+        background: transparent;
+      }
+      
+      &:before {
+        top: 55%;
+        transform: rotate(45deg);
+      }
+      
+      &:after {
+        bottom: 55%;
+        transform: rotate(-45deg);
+      }
+      
+    }
+  }
+}
+
 
 /** INTRO-MODAL */
 #intro-wrapper{