responive header and footer ready (remains centering entree block

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -102,6 +102,8 @@ header[role="banner"]{
 #block-mainnavigation{
   float:right;
   margin-top: 25px;
+  z-index: 21;
+  position: relative;
   ul{
     margin:0; padding: 0;
     white-space: nowrap;
@@ -135,6 +137,20 @@ header[role="banner"]{
       }
     }
   }
+  @media only screen and (max-width: 1280px) {
+    margin-top: 15px;
+    ul{
+      li{
+        display: block;
+        a{
+          @include content_petit;
+        }
+      }
+      li:first-of-type{
+        display:none;
+      }
+    }
+  }
 }
 
 .block-language{
@@ -171,6 +187,20 @@ header[role="banner"]{
       }
     }
   }
+
+  @media only screen and (max-width: 1280px) {
+    margin-top: 15px;
+    margin-left: 0.5em;
+    border-left: 1px solid red;
+    ul{
+      li{
+        display: block;
+        a{
+          @include content_petit;
+        }
+      }
+    }
+  }
 }
 
 
@@ -530,14 +560,17 @@ main[role="main"]{
   }
 }
 #audio-player{
+  // outline: 1px solid blue;
   position: absolute;
+  box-sizing: border-box;
+  // overflow: hidden;
   top:0; left:0;
   padding-left:0.7em;
   // background-color: white;
-  height:100%; min-width:300px;
+  height:100%;
+  min-width:700px;
   z-index: 20;
   opacity: 0;
-  // outline: 1px solid blue;
   pointer-events: none;
   transition: opacity 0.7s ease-in-out;
   &.visible{
@@ -551,7 +584,6 @@ main[role="main"]{
     // word-break:keep-all;
     padding:0;
     max-height: 100%;
-    // outline: 1px solid green;
     white-space: normal;
     @include btn;
   }
@@ -598,9 +630,10 @@ main[role="main"]{
     height:100%;
   }
   .cartel{
-    // TODO: set max-width regarding responsive
     position: relative;
-    // max-width: 350px;
+    // min-width: 200px;
+    width: calc(100% - 260px);
+    // outline: 1px solid orange;
     margin-left: 1em;
     background-color: white;
     opacity: 1;
@@ -617,6 +650,8 @@ main[role="main"]{
       width:1.5em;
     }
     .cartels{
+      width:calc(100% - 1.5em);
+      // outline: 1px solid green;
       .first-cartel{
         // visibility: hidden;
         .entrees{
@@ -1437,8 +1472,23 @@ footer{
       // min-width: 50px;
       text-align: right;
     }
+    @media only screen and (max-width: 1280px) {
+      .region-footer-left{
+        width:9%;
+      }
+      .region-footer-center{
+        width: 80%;
+        overflow:hidden;
+        text-align: center;
+      }
+      .region-footer-right{
+        box-sizing: content-box;
+        min-width:5%;
+      }
+    }
   }
 
+
   #block-footer{
     display: inline-block;
     margin-bottom: 1em;
@@ -1474,6 +1524,22 @@ footer{
         }
       }
     }
+
+    @media only screen and (max-width: 1280px) {
+      margin-top: 15px;
+      ul{
+        li{
+          display: block;
+          margin-left: 0!important;
+          padding:0;
+          line-height: 0.6;
+          a{
+            @include content_petit;
+            padding:0;
+          }
+        }
+      }
+    }
   }
 
   // remove #block-productions from selector