404 Not Found

PATH: root / mbmscss

/* FONTAWESOME */
@import "../assets/vendor/fontawesome-free-5.12.1-web/scss/fontawesome";
@import "../assets/vendor/fontawesome-free-5.12.1-web/scss/brands";
@import "../assets/vendor/fontawesome-free-5.12.1-web/scss/solid";

/* BOOTSTRAP */
/* @import "../assets/vendor/bootstrap-4.4.1/scss/bootstrap"; */

/* HAMBURGERS */
@import "../assets/vendor/hamburgers/hamburgers";

/* ANIMATE.CSS */
@import "../assets/vendor/animate.css/animate";

/* FUNCTIONS */
@function strip-units($value) {
    @return ($value / ($value * 0 + 1));
}

@function rem-size($size: 16px, $base: 16px, $em: false) {
    $unit: 1rem;
    @if $em {
        $unit: 1em;
    }
    @return $size / $base * $unit;
}

@function percent($width, $full-width: 1920px) {
    @return $width * 100% / $full-width;
}

@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);
    
    @if $index {
      @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }
    
    @return $string;
}
@function rgba-to-rgb($rgba, $background: #fff) {
  @return mix(rgb(red($rgba), green($rgba), blue($rgba)), $background, alpha($rgba) * 100%);
}

/* MIXINS */
@mixin clearfix {
    content: "";
    display: block;
    clear: both;
    float: none;
}

@mixin responsive($properties, $font-sizes: (8px, 16px), $widths: (960px, 1920px), $base-font: 16px, $no-smaller: true, $no-bigger: false) {
    @if length($font-sizes) != length($widths) {
        @error "List lengths not equal!";
    }
    @for $i from 1 to length($font-sizes) - 1 {
        $font-1: nth($font-sizes, $i);
        $width-1: nth($widths, $i);
        $font-2: nth($font-sizes, $i + 1);
        $width-2: nth($widths, $i + 1);
        $min-font: min($font-1, $font-2);
        $min-width: min($width-1, $width-2);
        $max-font: max($font-1, $font-2);
        $max-width: max($width-1, $width-2); 
        @media (min-width: $min-width) and (max-width: $max-width) {
            @each $prop in $properties {
                #{$prop}: calc(#{strip-units($min-font)} / #{strip-units($base-font)} * 1em + (#{strip-units($max-font)} - #{strip-units($min-font)}) * (100vw - #{$min-width}) / (#{strip-units($max-width)} - #{strip-units($min-width)}));
                #{$prop}: -webkit-calc(#{strip-units($min-font)} / #{strip-units($base-font)} * 100% + (#{strip-units($max-font)} - #{strip-units($min-font)}) * (100vw - #{$min-width}) / (#{strip-units($max-width)} - #{strip-units($min-width)}));
                #{$prop}: -ms-calc(#{strip-units($min-font)} / #{strip-units($base-font)} * 1em + (#{strip-units($max-font)} - #{strip-units($min-font)}) * (100vw - #{$min-width}) / (#{strip-units($max-width)} - #{strip-units($min-width)}));
            }
        }
    }
    $i: length($font-sizes) - 1;
    $font-1: nth($font-sizes, $i);
    $width-1: nth($widths, $i);
    $font-2: nth($font-sizes, $i + 1);
    $width-2: nth($widths, $i + 1);
    $min-font: min($font-1, $font-2);
    $min-width: min($width-1, $width-2);
    $max-font: max($font-1, $font-2);
    $max-width: max($width-1, $width-2);
    $media: "(min-width: #{$min-width})";
    @if $no-bigger {
        $media: "#{$media} and (max-width: #{$max-width})";
    }
    @if length($font-sizes) > 2 {
        @media #{$media} {
            @each $prop in $properties {
                #{$prop}: calc(#{strip-units($min-font)} / #{strip-units($base-font)} * 1em + (#{strip-units($max-font)} - #{strip-units($min-font)}) * (100vw - #{$min-width}) / (#{strip-units($max-width)} - #{strip-units($min-width)}));
                #{$prop}: -webkit-calc(#{strip-units($min-font)} / #{strip-units($base-font)} * 100% + (#{strip-units($max-font)} - #{strip-units($min-font)}) * (100vw - #{$min-width}) / (#{strip-units($max-width)} - #{strip-units($min-width)}));
                #{$prop}: -ms-calc(#{strip-units($min-font)} / #{strip-units($base-font)} * 1em + (#{strip-units($max-font)} - #{strip-units($min-font)}) * (100vw - #{$min-width}) / (#{strip-units($max-width)} - #{strip-units($min-width)}));
            }
        }
    } @else {
        @each $prop in $properties {
            #{$prop}: calc(#{strip-units($min-font)} / #{strip-units($base-font)} * 1em + (#{strip-units($max-font)} - #{strip-units($min-font)}) * (100vw - #{$min-width}) / (#{strip-units($max-width)} - #{strip-units($min-width)}));
            #{$prop}: -webkit-calc(#{strip-units($min-font)} / #{strip-units($base-font)} * 100% + (#{strip-units($max-font)} - #{strip-units($min-font)}) * (100vw - #{$min-width}) / (#{strip-units($max-width)} - #{strip-units($min-width)}));
            #{$prop}: -ms-calc(#{strip-units($min-font)} / #{strip-units($base-font)} * 1em + (#{strip-units($max-font)} - #{strip-units($min-font)}) * (100vw - #{$min-width}) / (#{strip-units($max-width)} - #{strip-units($min-width)}));
        }
    }
    @if $no-smaller {
        @media (max-width: #{min($widths...)}) {
            @each $prop in $properties {
                #{$prop}: #{min($font-sizes...)};
            }
        }
    }
    @if $no-bigger {
        @media (min-width: #{max($widths...)}) {
            @each $prop in $properties {
                #{$prop}: #{max($font-sizes...)};
            }
        }
    }
}

@mixin generateResponsiveFonts($selector: ":root", $min-font-size: 16px, $min-width: 480px, $max-font-size: 32px, $max-width: 1920px, $base-font-size: 16px) {
    :root {
        --responsive-font-min-width: #{$min-width};
        --responsive-font-max-width: #{$max-width};
        --responsive-font-min-size: #{$min-font-size};
        --responsive-font-max-size: #{$max-font-size};
        --xx: calc(var(--responsive-font-min-width) / 100);
        --yy: calc(100 * (var(--responsive-font-max-size) - var(--responsive-font-min-size)) / (var(--responsive-font-max-width) - var(--responsive-font-min-width)));
        --zz: calc(var(--responsive-font-min-size) / var(--font-size) * 1rem);
    }
    _:default:not(:root:root),
    html {
        animation: webkitfix 1s forwards infinite;
    }
    @-webkit-keyframes webkitfix {
        100% {
            z-index: auto;
        }
    }
    @media (max-width: $min-width) {
        #{$selector} {
            /* --font-size: #{$min-font-size}; */
            font-size: $min-font-size;
        }
    }
    @media (min-width: $min-width) {
        #{$selector} {
            $XX: $min-width / 100;
            $YY: 100 * ($max-font-size - $min-font-size) / ($max-width - $min-width);
            $ZZ: ($min-font-size / $base-font-size) * 1rem;
            /* --font-size: calc(#{$ZZ} + ((1vw - #{$XX}) * #{$YY})); */
            font-size: calc(#{$ZZ} + ((1vw - #{$XX}) * #{$YY})) !important;
            /*font-size: calc(var(--zz) + ((1vw - var(--xx)) * var(--yy)));*/
        }
    }
}

@mixin generateResponsiveFontsMax($selector: ":root", $min-font-size: 16px, $min-width: 480px, $max-font-size: 32px, $max-width: 1920px, $base-font-size: 16px) {
    @include generateResponsiveFonts($selector, $min-font-size, $min-width, $max-font-size, $max-width, $base-font-size);
    @media (min-width: $max-width) {
        #{$selector} {
            /* --font-size: #{$max-font-size}; */
            font-size: $max-font-size;
        }
    }
};

@mixin useColor($properties, $name) {
    @each $property in $properties {
        #{$property}: map-get($colors, #{$name});
        #{$property}: var(--color-#{$name});
        // @if alpha(map-get($colors, #{$name})) < 1 {
        //     #{$property}: var(--color-#{$name}-hsl);
        //     #{$property}: var(--color-#{$name}-hsla);
        // } @else {
        //     #{$property}: var(--color-#{$name}-hsl);
        // }
    }
}

@mixin remSize($properties: font-size, $size: $font-size-base, $customSize: false) {
    @each $property in $properties {
        #{$property}: $size;
        @if $customSize {
            #{$property}: rem-size($size, $customSize);
        } @else {
            #{$property}: rem-size($size, $font-size-base);
        }
    } 
}

@mixin emSize($properties: font-size, $size: $font-size-base, $customSize: false) {
    @each $property in $properties {
        #{$property}: $size;
        @if $customSize {
            #{$property}: rem-size($size, $customSize, true);
        } @else {
            #{$property}: rem-size($size, $font-size-base, true);
        }
    } 
}

@mixin useRemSize($properties: font-size, $name: 'default', $customSize: false) {
    @include remSize($properties, map-get($font-sizes, #{$name}), $customSize);
}

@mixin useEmSize($properties: font-size, $name: 'default', $customSize: false) {
    @include emSize($properties, map-get($font-sizes, #{$name}), $customSize);
}

/* OUR CONFIG */
@import "_config";

/* THIS MAP IS FOR REPLACING RGBA WITH RGB EQUIVALENT */
$theme-colors-merge: (
);

@each $name, $value in $theme-colors {
    @if alpha($value) < 1 {
        $theme-colors-merge: map-merge($theme-colors-merge, ("#{$name}-no-alpha-white": rgba-to-rgb($value)));
        $theme-colors-merge: map-merge($theme-colors-merge, ("#{$name}-no-alpha-black": rgba-to-rgb($value, #000)));
    }
    $theme-colors-merge: map-merge($theme-colors-merge, ("#{$name}-10-darker": darken($value, 10)));
    $theme-colors-merge: map-merge($theme-colors-merge, ("#{$name}-10-lighter": lighten($value, 10)));
}

$theme-mod-colors: (
);

$colors: map-merge($theme-colors, $theme-colors-merge);
$colors: map-merge($colors, $theme-mod-colors);

/* GOOGLE FONTS */
$googleFontsUrl: "//fonts.googleapis.com/css?family=";

@each $font-key, $font-name in $fonts {
    @if (not(str-index($font-key, '-fallback'))) {
        $googleFontsUrl: $googleFontsUrl + str-replace($font-name, " ", "+") + "|";
    }
}

$googleFontsUrl: str-slice($googleFontsUrl, 0, -2) + ":100,200,300,400,500,600,700,800,900&display=swap&subset=latin-ext";
$googleFontsUrl: quote($googleFontsUrl);

@import url($googleFontsUrl);

@font-face {
    font-family: 'icomoon';
    src:  url('../font/icomoon.eot?l6d9bl');
    src:  url('../font/icomoon.eot?l6d9bl#iefix') format('embedded-opentype'),
      url('../font/icomoon.ttf?l6d9bl') format('truetype'),
      url('../font/icomoon.woff?l6d9bl') format('woff'),
      url('../font/icomoon.svg?l6d9bl#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  
  [class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-triangle-right:before {
    content: "\e923";
  }
  .icon-Armatura-instalacyjna .path1:before {
    content: "\e900";
    color: rgb(43, 42, 41);
  }
  .icon-Armatura-instalacyjna .path2:before {
    content: "\e901";
    margin-left: -1.0517578125em;
    color: rgb(213, 66, 69);
  }
  .icon-Automatyka .path1:before {
    content: "\e902";
    color: rgb(43, 42, 41);
  }
  .icon-Automatyka .path2:before {
    content: "\e903";
    margin-left: -1.0322265625em;
    color: rgb(213, 66, 69);
  }
  .icon-Automatyka .path3:before {
    content: "\e904";
    margin-left: -1.0322265625em;
    color: rgb(43, 42, 41);
  }
  .icon-Automatyka .path4:before {
    content: "\e905";
    margin-left: -1.0322265625em;
    color: rgb(43, 42, 41);
  }
  .icon-Doradztwo-techniczne .path1:before {
    content: "\e906";
    color: rgb(43, 42, 41);
  }
  .icon-Doradztwo-techniczne .path2:before {
    content: "\e907";
    margin-left: -1.12109375em;
    color: rgb(213, 66, 69);
  }
  .icon-Facebook .path1:before {
    content: "\e908";
    color: rgb(43, 42, 41);
  }
  .icon-Facebook .path2:before {
    content: "\e909";
    margin-left: -1.1064453125em;
    color: rgb(213, 66, 69);
  }
  .icon-Grzejniki .path1:before {
    content: "\e90a";
    color: rgb(43, 42, 41);
  }
  .icon-Grzejniki .path2:before {
    content: "\e90b";
    margin-left: -0.91796875em;
    color: rgb(213, 66, 69);
  }
  .icon-Koty-elektryczne .path1:before {
    content: "\e90c";
    color: rgb(43, 42, 41);
  }
  .icon-Koty-elektryczne .path2:before {
    content: "\e90d";
    margin-left: -0.734375em;
    color: rgb(213, 66, 69);
  }
  .icon-Koty-gazowe .path1:before {
    content: "\e90e";
    color: rgb(43, 42, 41);
  }
  .icon-Koty-gazowe .path2:before {
    content: "\e90f";
    margin-left: -0.734375em;
    color: rgb(213, 66, 69);
  }
  .icon-Koty-na-paliwa-stae .path1:before {
    content: "\e910";
    color: rgb(43, 42, 41);
  }
  .icon-Koty-na-paliwa-stae .path2:before {
    content: "\e911";
    margin-left: -0.734375em;
    color: rgb(213, 66, 69);
  }
  .icon-Montaz-urzdze-i-instalacji .path1:before {
    content: "\e912";
    color: rgb(43, 42, 41);
  }
  .icon-Montaz-urzdze-i-instalacji .path2:before {
    content: "\e913";
    margin-left: -0.916015625em;
    color: rgb(213, 66, 69);
  }
  .icon-Odkurzacze-centralne .path1:before {
    content: "\e914";
    color: rgb(43, 42, 41);
  }
  .icon-Odkurzacze-centralne .path2:before {
    content: "\e915";
    margin-left: -0.9345703125em;
    color: rgb(213, 66, 69);
  }
  .icon-Podgrzewacze .path1:before {
    content: "\e916";
    color: rgb(213, 66, 69);
  }
  .icon-Podgrzewacze .path2:before {
    content: "\e917";
    margin-left: -0.734375em;
    color: rgb(43, 42, 41);
  }
  .icon-Pompy-ciepa .path1:before {
    content: "\e918";
    color: rgb(213, 66, 69);
  }
  .icon-Pompy-ciepa .path2:before {
    content: "\e919";
    margin-left: -0.91796875em;
    color: rgb(43, 42, 41);
  }
  .icon-Sprzeda-detaliczna-i-hurtowa .path1:before {
    content: "\e91a";
    color: rgb(213, 66, 69);
  }
  .icon-Sprzeda-detaliczna-i-hurtowa .path2:before {
    content: "\e91b";
    margin-left: -0.9189453125em;
    color: rgb(43, 42, 41);
  }
  .icon-Systemy-instalacyjne .path1:before {
    content: "\e91c";
    color: rgb(43, 42, 41);
  }
  .icon-Systemy-instalacyjne .path2:before {
    content: "\e91d";
    margin-left: -0.734375em;
    color: rgb(213, 66, 69);
  }
  .icon-Uzdatnianie-wody .path1:before {
    content: "\e91e";
    color: rgb(43, 42, 41);
  }
  .icon-Uzdatnianie-wody .path2:before {
    content: "\e91f";
    margin-left: -0.921875em;
    color: rgb(213, 66, 69);
  }
  .icon-Zasobniki .path1:before {
    content: "\e920";
    color: rgb(43, 42, 41);
  }
  .icon-Zasobniki .path2:before {
    content: "\e921";
    margin-left: -0.7509765625em;
    color: rgb(213, 66, 69);
  }
  .icon-Zasobniki .path3:before {
    content: "\e922";
    margin-left: -0.7509765625em;
    color: rgb(43, 42, 41);
  }

// KACZKA LOGO FONT

@font-face {
    font-family: 'kaczka-studio';
    src: url('../font/kaczka-studio.eot?60950098');
    src: url('../font/kaczka-studio.eot?60950098#iefix') format('embedded-opentype'),
         url('../font/kaczka-studio.woff2?60950098') format('woff2'),
         url('../font/kaczka-studio.woff?60950098') format('woff'),
         url('../font/kaczka-studio.ttf?60950098') format('truetype'),
         url('../font/kaczka-studio.svg?60950098#kaczka-studio') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  // Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. 
  // Note, that will break hinting! In other OS-es font will be not as sharp as it could be 
  /*
  @media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
      font-family: 'kaczka-studio';
      src: url('../font/kaczka-studio.svg?60950098#kaczka-studio') format('svg');
    }
  }
  */
   
   [class^="kaczka-studio-"]:before, [class*=" kaczka-studio-"]:before {
    font-family: "kaczka-studio";
    font-style: normal;
    font-weight: normal;
    speak: never;
   
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    // opacity: .8; 
   
    // For safety - reset parent styles, that can break glyph codes
    font-variant: normal;
    text-transform: none;
   
    // fix buttons height, for twitter bootstrap 
    line-height: 1em;
   
    // Animation center compensation - margins should be symmetric 
    // remove if not needed 
    margin-left: .2em;
   
    // you can be more comfortable with increased icons size 
    // font-size: 120%; 
   
    // Font smoothing. That was taken from TWBS 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
   
    // Uncomment for 3D effect 
    // text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); 
  }
   
  .kaczka-studio-standard:before { content: '\e800'; } // '' 
  .kaczka-studio-squared:before { content: '\e801'; } // '' 
  .kaczka-studio-circled:before { content: '\e802'; } // '' 
  .kaczka-studio-name:before { content: '\e803'; width: 4.3em; } // '' 
  .kaczka-studio-name-rectangled:before { content: '\e804'; } // ''

// PROCESSING LISTS OF STANDARD BASIC STYLES

// FONT SIZES

@each $font-size-name, $font-size in $font-sizes {
    .font-#{$font-size} {
        font-size: $font-size;
        font-size: rem-size($font-size);
    }
}

// FONT FAMILIES

@each $font-name, $font-family in $fonts {
    .font-#{$font-name} {
        font-family: $font-family;
    }
}

// // FONT WEIGHTS

// @each $font-weight, $weight in $font-weights {
//     .font-#{$font-weight} {
//         font-weight: $weight;
//     }
//     .font-#{$weight} {
//         font-weight: $weight;
//     }
// }

// COLORS

@each $class, $color in $colors {
    .font-#{$class} {
        color: $color;
    }
    .bg-#{$class} {
        background-color: $color;
    }
    // .border-l-#{$class} {
    //     border-left-color: $color;
    // }
    // .border-r-#{$class} {
    //     border-right-color: $color;
    // }
    // .border-t-#{$class} {
    //     border-top-color: $color;
    // }
    // .border-b-#{$class} {
    //     border-bottom-color: $color;
    // }
    // .border-#{$class} {
    //     border-color: $color;
    // }
}

// // MARGINS

// @each $name, $amount in $margins-sides {
//     .margin-sides-#{$name} {
//         margin-left: rem-size($amount);
//         margin-right: rem-size($amount);
//     }
//     .margin-sides-auto-#{$name} {
//         width: rem-size($width-original - $amount * 2);
//         margin-left: auto;
//         margin-right: auto;
//     }
//     .margin-sides-percent-#{$name} {
//         margin-left: percent(strip-units($amount), strip-units($width-original));
//         margin-right: percent(strip-units($amount), strip-units($width-original));
//     }
//     .margin-sides-percent-width-#{$name} {
//         width: percent(strip-units($width-original - $amount * 2), strip-units($width-original));
//         margin-left: auto;
//         margin-right: auto;
//     }
// }

// // PADDINGS

// @each $name, $amount in $paddings-sides {
//     .padding-sides-#{$name} {
//         padding-left: rem-size($amount);
//         padding-right: rem-size($amount);        
//     }
//     .padding-sides-width-#{$name} {
//         box-sizing: border-box;
//         width: rem-size($width-original);
//         padding-left: rem-size($amount);
//         padding-right: rem-size($amount);      
//     }
//     .padding-sides-width-100-#{$name} {
//         width: 100%;
//         padding-left: rem-size($amount);
//         padding-right: rem-size($amount);      
//     }
//     .padding-sides-percent-#{$name} {
//         padding-left: percent(strip-units($amount), strip-units($width-original));
//         padding-right: percent(strip-units($amount), strip-units($width-original));
//     }
// }

// .text-left {
//     text-align: left;
// }

// .text-center {
//     text-align: center;
// }

// .text-right {
//     text-align: right;
// }

// .heading-line {
//     width: 100%;
//     margin: rem-size(0.7 * 16px) auto;
//     overflow: hidden;
//     text-align: center;
//     color: map-get($colors, copyright-bg);
// }
// .heading-line:before, .heading-line:after {
//     content: "";
//     display: inline-block;
//     width: 50%;
//     margin: 0 rem-size(12px) 0 -55%;
//     vertical-align: middle;
//     border-bottom: rem-size(12px) solid;
// }
// .heading-line:after {
//     margin: 0 -55% 0 rem-size(12px);
// }
// .heading-line span {
//     display: inline-block;
//     vertical-align: middle;
// }

/* DEFAULT SETTINGS */
* {
    position: relative;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
}

header, main, footer, section, article {
    display: block;
}

/* PROJECT SPECIFIC SETTINGS */
:root {
    // GENERATE CSS VARIABLES

// COLORS

// var(--color-colorName-rgba) - to use rgba color

@each $name, $value in $colors {
        --color-#{$name}: #{$value};
        // --color-#{$name}-r: #{red($value)};
        // --color-#{$name}-g: #{green($value)};
        // --color-#{$name}-b: #{blue($value)};
        // --color-#{$name}-a: #{alpha($value)};
        // --color-#{$name}-rgb: var(--color-#{$name}-r, #{red($value)}), var(--color-#{$name}-g, #{green($value)}), var(--color-#{$name}-b, #{blue($value)});
        // --color-#{$name}-rgba: rgba(var(--color-#{$name}-rgb, #{red($value), green($value), blue($value)}), var(--color-#{$name}-a, #{alpha($value)}));
    }

@each $name, $file in $files {
        --file-#{$name}: url("#{$file}");
        --file-#{$name}-edge: url("#{str-slice($file, 4)}");
    }

@each $name, $font in $fonts {
        --font-#{$name}: #{$font};
    }

--font: var(--font-main), var(--font-main-fallback);
    --font-special: var(--font-special-1), var(--font-special-1-fallback);
    --font-size: #{$font-size-base};
    --font-size: #{rem-size($font-size-base)};

--transitions-duration: #{$transitions-duration};
}

@import "responsive";

body {
    font-size: 1rem;
}

// UTILITIES

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.float-none {
    float: none;
}

.clear-left {
    clear: left;
}

.clear-right {
    clear: right;
}

.clear-both {
    clear: both;
}

.clearfix {
    &-before, &-after {
        void: null;
    }
    &-before {
        &:before {
            @include clearfix;
        }
    }
    &-after {
        &:after {
            @include clearfix;
        }
    }
}

.text-lowercase {
    text-transform: lowercase;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-capitalize {
    text-transform: capitalize;
}

.margin-l-auto {
    margin-left: auto;
}

.margin-r-auto {
    margin-right: auto;
}

// $margins: (
//     'quarter': 0.25,
//     'half': 0.5,
//     '1': 1,
//     '1-and-half': 1.5,
//     'double': 2,
//     'triple': 3
// );

// @each $name, $value in $margins {
//     .margin {
//         &-b-#{$name} {
//             margin-bottom: $value * $font-size-base;
//             margin-bottom: rem-size($value * $font-size-base);
//         }
//         &-t-#{$name} {
//             margin-top: $value * $font-size-base;
//             margin-top: rem-size($value * $font-size-base);
//         }
//         &-l-#{$name} {
//             margin-left: $value * $font-size-base;
//             margin-left: rem-size($value * $font-size-base);
//         }
//         &-r-#{$name} {
//             margin-right: $value * $font-size-base;
//             margin-right: rem-size($value * $font-size-base);
//         }
//     }
// }

.margin-center {
    margin-left: auto;
    margin-right: auto;
}

.display-table {
    display: table;
}

.display-block {
    display: block;
}

.display-inline-block {
    display: inline-block;
}

.display-flex {
    display: flex;
}

.display-inline-flex {
    display: inline-flex;
}

.display-flex, .display-inline-flex {
    &.align-items-center {
        align-items: center;
    }
    &.justify-content-center {
        justify-content: center;
    }
    &.flex-flow-column {
        flex-flow: column;
    }
}

@for $i from 1 through 4 {
    .columns-#{$i} {
        column-count: $i;
    }
}

div.grid {
    &-wrapper {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        &:after {
            @include clearfix;
        }
        *[class*="grid-cell"] {
            float: left;
            flex-shrink: 0;
            flex-grow: 0;
        }
    }
    @for $j from 2 through 5 {
        @for $i from 1 through $j {
            &-cell-#{$i}-of-#{$j} {
                width: (100% / $j) * $i;
                width: calc(100% / #{$j} * #{$i});
            }
        }
    }
}

.container {
    display: block;
    padding-left: $padding-container-default-sides / 2;
    padding-left: rem-size($padding-container-default-sides / 2);
    padding-right: $padding-container-default-sides / 2;
    padding-right: rem-size($padding-container-default-sides / 2);
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    @each $name, $width in $containers {
        &--#{$name} {
            width: $width + 2 * $padding-container-default-sides;
            width: rem-size($width + 2 * $padding-container-default-sides);
        }
    }
    @media (min-width: rem-size(640px * $mod, $font-size-base, true)) {
        padding-left: $padding-container-default-sides;
        padding-left: rem-size($padding-container-default-sides);
        padding-right: $padding-container-default-sides;
        padding-right: rem-size($padding-container-default-sides);
        padding: 0 30px;
    }
}
@media (max-width: rem-size(480px * $mod, $font-size-base, true)) {
    :root {
        font-size: 14px;
    }
}

[+] ..
[-] _style-ie9.scss [edit]
[-] _config.scss [edit]
[-] style.scss [edit]
[-] _responsive.scss [edit]
[-] _init.scss [edit]
[-] style-ie.scss [edit]