//== Color definitions // //## General rule at hand is, that no colors shall be defined other than here. @brandColor: #21759B; @brandLighter: #EAF2FA; @brandRed: #D54E21; @brandYellow: #ffffe0; // Social Media Colors @facebookColor: #3b5998; @twitterColor: #00aced; @linkedinColor: #007bb6; @xingColor: #126567; // Grey values @grayDark: #636363; @gray: #DFDFDF; @grayLight: #e5e5e5; @grayLighter: #F2F2F2; //== Media queries breakpoints - Thanks to Bootstrap // //## Define the breakpoints at which your layout will change, adapting to different screen sizes. // Small screen / tablet @screen-sm-min: 768px; // Medium screen / desktop @screen-md-min: 992px; // Large screen / wide desktop @screen-lg-min: 1200px; // So media queries don't overlap when required, provide a maximum @screen-xs-max: (@screen-sm-min - 1); @screen-sm-max: (@screen-md-min - 1); @screen-md-max: (@screen-lg-min - 1); //== Grid system // //## Define your custom responsive grid. //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px; // Navbar collapse //** Point at which the navbar becomes uncollapsed. @grid-float-breakpoint: @screen-sm-min; //** Point at which the navbar begins collapsing. @grid-float-breakpoint-max: (@grid-float-breakpoint - 1); //== Container sizes // //## Define the maximum width of `.container` for different screen sizes. // Small screen / tablet @container-tablet: (720px + @grid-gutter-width); //** For `@screen-sm-min` and up. @container-sm: @container-tablet; // Medium screen / desktop @container-desktop: (940px + @grid-gutter-width); //** For `@screen-sm-min` and up. @container-md: @container-desktop; // Large screen / wide desktop @container-large-desktop: (1140px + @grid-gutter-width); //** For `@screen-lg-min` and up. @container-lg: @container-desktop;