materio-base-d7/sites/all/themes/gui/materiobasetheme/scss/layout.scss

/** RESPONSIVE break points */

// @max-480  : ~"screen and (max-width: 479px)";
// @min-480  : ~"screen and (min-width: 480px)";

// @480-768  : ~"screen and (min-width: 480px) and (max-width: 767px)";

// @max-768  : ~"screen and (max-width: 767px)";
// @min-768  : ~"screen and (min-width: 768px)";

// @768-980  : ~"screen and (min-width: 768px) and (max-width: 979px)";

// @max-980  : ~"screen and (max-width: 979px)";
// @min-980  : ~"screen and (min-width: 980px)";

// @980-1200  : ~"screen and (min-width: 980px) and (max-width: 1199px)";

// @max-1200 : ~"screen and (max-width: 1199px)";
// @min-1200 : ~"screen and (min-width: 1200px)";
// change this

// Here we define the breakpoints which will become the upper border for each media size.
// The function em-calc() calculates the em-value from a px-value.
/*
$small-breakpoint:  em-calc(480)  !default;
$medium-breakpoint: em-calc(768) !default;
$large-breakpoint:  em-calc(980) !default;
$xlarge-breakpoint: em-calc(1200) !default;

$small-range:   (0, $small-breakpoint) !default; // 0, 480px
$medium-range:  ($small-breakpoint  + em-calc(1), $medium-breakpoint) !default; 481px, 768px //
$large-range:   ($medium-breakpoint + em-calc(1), $large-breakpoint)  !default; // 769px, 980px
$xlarge-range:  ($large-breakpoint  + em-calc(1), $xlarge-breakpoint) !default; // 981px, 1200px
$xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999)) !default; // 1201px, ...

// Media Queries
$screen: "only screen" !default;

$landscape: "#{$screen} and (orientation: landscape)" !default;
$portrait: "#{$screen} and (orientation: portrait)" !default;

$small-up: $screen !default;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})" !default;

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;

$retina: (
  "#{$screen} and (-webkit-min-device-pixel-ratio: 2)",
  "#{$screen} and (min--moz-device-pixel-ratio: 2)",
  "#{$screen} and (-o-min-device-pixel-ratio: 2/1)",
  "#{$screen} and (min-device-pixel-ratio: 2)",
  "#{$screen} and (min-resolution: 192dpi)",
  "#{$screen} and (min-resolution: 2dppx)"
);
*/

$row-width: rem-calc(1280);

*{
 box-sizing: content-box;
 &:before, &:after{
   box-sizing: content-box;
 }
}

html, body{
  // position:relative;
  // overflow:hidden;
  // width:100%;
  // height:100%;
}
body{
  overflow-y:scroll; top:0;
}

h1, h2, h3, h4, h5, h6{
  font-family: inherit;
}

h1{
  font-weight: bold;
}

figure {
  margin: 0;
}

input[type="checkbox"] + label{
  margin:0;
}

p{
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  margin-bottom: inherit;
}

a{
  font-size: inherit;
}

.column, .columns {
  padding: inherit;
  float: inherit;
}

$rootminwidth : 320px;

/** NIVEAU 0 */
#root{
  min-width:$rootminwidth;
  .ie8 &{min-width:1024px;}
}

/** NIVEAU 1 */
#container{
  margin:0 auto; position:relative;
  @include transition(padding-top 0.5s ease-out); // change this
  // padding:0 1em;
}

/** NIVEAU 2 */
@mixin padded(){ $p:2%; width:96%; padding-left:$p; padding-right:$p; }
// @mixin padded(){width:100%;}

$header-z-index:1000;
#header{
  @media #{$medium-up}{
    position:fixed; top:0; margin:0 auto; background-color: #fff; min-width:$rootminwidth*0.97;
  } //change this
  z-index:$header-z-index;
  @include padded;
  .admin-menu &{ margin-top:35px; }
}

#utilities{
  @media #{$medium-up}{
    html.no-touch &{
      position:fixed; top:0; margin:0 auto; min-width:$rootminwidth*0.97;
      margin-top:60px;
    }
    html.no-touch .admin-menu &{ margin-top:85px; }
  }
  @media #{$small-only}{
    >.region{padding-top:5px; padding-bottom:5px;}
  } //change this
  z-index:999;
  @include bgc(#fff);
  @include padded;

}

#main{
  @include padded;
  overflow-x:hidden;
}

#footer{
  @include padded;
  padding-top: 2em;
}

/** NIVEAU 3 */

.js #content-top{}

// .js #content{ overflow-y:hidden; }


// #container, #header-blocks, #center{.transition(width, 0.5s, ease-out); }

// .footer-block .region, .header-block{ @include inlineblock();} change this

/** NIVEAU 4 */
#center{
//padding:5px;
}

/** Z-INDEX */
#block-feedback-form{z-index:1001;}
#admin-menu{z-index:1002;}
#admin-toolbar{z-index:1003;}

/*
    __  __                             ___
   / / / /___  ____ ___  ___     _   _|__ \
  / /_/ / __ \/ __ `__ \/ _ \   | | / /_/ /
 / __  / /_/ / / / / / /  __/   | |/ / __/
/_/ /_/\____/_/ /_/ /_/\___/    |___/____/

*/
body.home-v2,
body.page-whoweare,
body.node-type-page,
body.node-type-webform,
body.page-cart-checkout{
  #header>.inner, #utilities>.inner, #center, #footer{
    @include grid-row();
  }
  // #header,#utilities{
  //   position:relative;
  // }
}