framework.css

/*************************** BEGIN NORMALIZE ***************************/

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
========================================================================== */
*{
	margin:0;
	padding:0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

 html {
 	line-height: 1.15; /* 1 */
 	-mstext-size-adjust: 100%; /* 2 */
 	-webkit-text-size-adjust: 100%; /* 2 */
 }

/* Sections
========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

 body {
 	margin: 0;
 }

/**
 * Add the correct display in IE 9-.
 */

 article,
 aside,
 footer,
 header,
 nav,
 section {
 	display: block;
 }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

 h1 {
 	font-size: 2em;
 	margin: 0.67em 0;
 }

/* Grouping content
========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

 figcaption,
 figure,
 main { /* 1 */
 	display: block;
 }

/**
 * Add the correct margin in IE 8.
 */

 figure {
 	margin: 1em 40px;
 }

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

 hr {
 	box-sizing: content-box; /* 1 */
 	height: 0; /* 1 */
 	overflow: visible; /* 2 */
 }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

 pre {
 	font-family: monospace, monospace; /* 1 */
 	font-size: 1em; /* 2 */
 }

/* Text-level semantics
========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

 a {
 	background-color: transparent; /* 1 */
 	-webkit-text-decoration-skip: objects; /* 2 */
 }

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

 abbr[title] {
 	border-bottom: none; /* 1 */
 	text-decoration: underline; /* 2 */
 	text-decoration: underline dotted; /* 2 */
 }

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

 b,
 strong {
 	font-weight: inherit;
 }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

 b,
 strong {
 	font-weight: bolder;
 }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

 code,
 kbd,
 samp {
 	font-family: monospace, monospace; /* 1 */
 	font-size: 1em; /* 2 */
 }

/**
 * Add the correct font style in Android 4.3-.
 */

 dfn {
 	font-style: italic;
 }

/**
 * Add the correct background and color in IE 9-.
 */

 mark {
 	background-color: #ff0;
 	color: #000;
 }

/**
 * Add the correct font size in all browsers.
 */

 small {
 	font-size: 80%;
 }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

 sub,
 sup {
 	font-size: 75%;
 	line-height: 0;
 	position: relative;
 	verticalalign: baseline;
 }

 sub {
 	bottom: -0.25em;
 }

 sup {
 	top: -0.5em;
 }

/* Embedded content
========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

 audio,
 video {
 	display: inline-block;
 }

/**
 * Add the correct display in iOS 4-7.
 */

 audio:not([controls]) {
 	display: none;
 	height: 0;
 }

/**
 * Remove the border on images inside links in IE 10-.
 */

 img {
 	border-style: none;
 }

/**
 * Hide the overflow in IE.
 */

 svg:not(:root) {
 	overflow: hidden;
 }

/* Forms
========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

 button,
 input,
 optgroup,
 select,
 textarea {
 	font-family: sansserif; /* 1 */
 	font-size: 100%; /* 1 */
 	line-height: 1.15; /* 1 */
 	margin: 0; /* 2 */
 }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

 button,
 input { /* 1 */
 	overflow: visible;
 }

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

 button,
 select { /* 1 */
 	text-transform: none;
 }

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

 button,
 html [type="button"], /* 1 */
 [type="reset"],
 [type="submit"] {
 	-webkit-appearance: button; /* 2 */
 }

/**
 * Remove the inner border and padding in Firefox.
 */

 button::-moz-focusinner,
 [type="button"]::-moz-focusinner,
 [type="reset"]::-moz-focusinner,
 [type="submit"]::-moz-focusinner {
 	border-style: none;
 	padding: 0;
 }

/**
 * Restore the focus styles unset by the previous rule.
 */

 button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
 	outline: 1px dotted ButtonText;
 }

/**
 * Correct the padding in Firefox.
 */

 fieldset {
 	padding: 0.35em 0.75em 0.625em;
 }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

 legend {
 	box-sizing: border-box; /* 1 */
 	color: inherit; /* 2 */
 	display: table; /* 1 */
 	max-width: 100%; /* 1 */
 	padding: 0; /* 3 */
 	white-space: normal; /* 1 */
 }

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

 progress {
 	display: inline-block; /* 1 */
 	verticalalign: baseline; /* 2 */
 }

/**
 * Remove the default vertical scrollbar in IE.
 */

 textarea {
 	overflow: auto;
 }

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

 [type="checkbox"],
 [type="radio"] {
 	box-sizing: border-box; /* 1 */
 	padding: 0; /* 2 */
 }

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

 [type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button {
 	height: auto;
 }

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

 [type="search"] {
 	-webkit-appearance: textfield; /* 1 */
 	outline-offset: -2px; /* 2 */
 }

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

 [type="search"]::-webkit-search-cancelbutton,
 [type="search"]::-webkit-search-decoration {
 	-webkit-appearance: none;
 }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

 ::-webkit-file-upload-button {
 	-webkit-appearance: button; /* 1 */
 	font: inherit; /* 2 */
 }

/* Interactive
========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

 details, /* 1 */
 menu {
 	display: block;
 }

/*
 * Add the correct display in all browsers.
 */

 summary {
 	display: list-item;
 }

/* Scripting
========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

 canvas {
 	display: inline-block;
 }

/**
 * Add the correct display in IE.
 */

 template {
 	display: none;
 }

/* Hidden
========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

 [hidden] {
 	display: none;
 }

 /*************************** END NORMALIZE ***************************/

 /*************************** BEGIN COLUMNS ***************************/

 .row-flex{
 	display: flex;
 	flex-wrap: wrap;
 }

 .row-flex .s1{
 	flex-basis: 8.33333333333%;
 }
 .row-flex .s2{
 	flex-basis: 16.6666666667%;
 }
 .row-flex .s3{
 	flex-basis: 25%;
 }
 .row-flex .s4{
 	flex-basis: 33.3333333333%;
 }
 .row-flex .s5{
 	flex-basis: 41.6666666667%;
 }
 .row-flex .s6{
 	flex-basis: 50%;
 }
 .row-flex .s7{
 	flex-basis: 58.3333333333%;
 }
 .row-flex .s8{
 	flex-basis: 66.6666666667%;
 }
 .row-flex .s9{
 	flex-basis: 75%;
 }
 .row-flex .s10{
 	flex-basis: 83.3333333333%;
 }
 .row-flex .s11{
 	flex-basis: 91.6666666667%;
 }
 .row-flex .s12{
 	flex-basis: 100%;
 }

 /** OFFSETS **/

 .row-flex .offset-s1{
 	flex-basis: 8.33333333333%;
 }
 .row-flex .offset-s2{
 	flex-basis: 16.6666666667%;
 }
 .row-flex .offset-s3{
 	flex-basis: 25%;
 }
 .row-flex .offset-s4{
 	flex-basis: 33.3333333333%;
 }
 .row-flex .offset-s5{
 	flex-basis: 41.6666666667%;
 }
 .row-flex .offset-s6{
 	flex-basis: 50%;
 }
 .row-flex .offset-s7{
 	flex-basis: 58.3333333333%;
 }
 .row-flex .offset-s8{
 	flex-basis: 66.6666666667%;
 }
 .row-flex .offset-s9{
 	flex-basis: 75%;
 }
 .row-flex .offset-s10{
 	flex-basis: 83.3333333333%;
 }
 .row-flex .offset-s11{
 	flex-basis: 91.6666666667%;
 }
 .row-flex .offset-s12{
 	flex-basis: 100%;
 }

 @media screen and (min-width: 601px) {
 .row-flex .m1{
 	flex-basis: 8.33333333333%;
 }
 .row-flex .m2{
 	flex-basis: 16.6666666667%;
 }
 .row-flex .m3{
 	flex-basis: 25%;
 }
 .row-flex .m4{
 	flex-basis: 33.3333333333%;
 }
 .row-flex .m5{
 	flex-basis: 41.6666666667%;
 }
 .row-flex .m6{
 	flex-basis: 50%;
 }
 .row-flex .m7{
 	flex-basis: 58.3333333333%;
 }
 .row-flex .m8{
 	flex-basis: 66.6666666667%;
 }
 .row-flex .m9{
 	flex-basis: 75%;
 }
 .row-flex .m10{
 	flex-basis: 83.3333333333%;
 }
 .row-flex .m11{
 	flex-basis: 91.6666666667%;
 }
 .row-flex .m12{
 	flex-basis: 100%;
 }

 	/** OFFSETS **/

 .row-flex .offset-m1{
 	flex-basis: 8.33333333333%;
 }
 .row-flex .offset-m2{
 	flex-basis: 16.6666666667%;
 }
 .row-flex .offset-m3{
 	flex-basis: 25%;
 }
 .row-flex .offset-m4{
 	flex-basis: 33.3333333333%;
 }
 .row-flex .offset-m5{
 	flex-basis: 41.6666666667%;
 }
 .row-flex .offset-m6{
 	flex-basis: 50%;
 }
 .row-flex .offset-m7{
 	flex-basis: 58.3333333333%;
 }
 .row-flex .offset-m8{
 	flex-basis: 66.6666666667%;
 }
 .row-flex .offset-m9{
 	flex-basis: 75%;
 }
 .row-flex .offset-m10{
 	flex-basis: 83.3333333333%;
 }
 .row-flex .offset-m11{
 	flex-basis: 91.6666666667%;
 }
 .row-flex .offset-m12{
 	flex-basis: 100%;
 }
 }
 @media screen and (min-width: 992px) {
 .row-flex .l1{
 	flex-basis: 8.33333333333%;
 }
 .row-flex .l2{
 	flex-basis: 16.6666666667%;
 }
 .row-flex .l3{
 	flex-basis: 25%;
 }
 .row-flex .l4{
 	flex-basis: 33.3333333333%;
 }
 .row-flex .l5{
 	flex-basis: 41.6666666667%;
 }
 .row-flex .l6{
 	flex-basis: 50%;
 }
 .row-flex .l7{
 	flex-basis: 58.3333333333%;
 }
 .row-flex .l8{
 	flex-basis: 66.6666666667%;
 }
 .row-flex .l9{
 	flex-basis: 75%;
 }
 .row-flex .l10{
 	flex-basis: 83.3333333333%;
 }
 .row-flex .l11{
 	flex-basis: 91.6666666667%;
 }
 .row-flex .l12{
 	flex-basis: 100%;
 }

 	/** OFFSETS **/

 .row-flex .offset-l1{
 	flex-basis: 8.33333333333%;
 }
 .row-flex .offset-l2{
 	flex-basis: 16.6666666667%;
 }
 .row-flex .offset-l3{
 	flex-basis: 25%;
 }
 .row-flex .offset-l4{
 	flex-basis: 33.3333333333%;
 }
 .row-flex .offset-l5{
 	flex-basis: 41.6666666667%;
 }
 .row-flex .offset-l6{
 	flex-basis: 50%;
 }
 .row-flex .offset-l7{
 	flex-basis: 58.3333333333%;
 }
 .row-flex .offset-l8{
 	flex-basis: 66.6666666667%;
 }
 .row-flex .offset-l9{
 	flex-basis: 75%;
 }
 .row-flex .offset-l10{
 	flex-basis: 83.3333333333%;
 }
 .row-flex .offset-l11{
 	flex-basis: 91.6666666667%;
 }
 .row-flex .offset-l12{
 	flex-basis: 100%;
 }
 }
 @media screen and (min-width: 1600px) {

 .row-flex .xl1{
 	flex-basis: 8.33333333333%;
 }
 .row-flex .xl2{
 	flex-basis: 16.6666666667%;
 }
 .row-flex .xl3{
 	flex-basis: 25%;
 }
 .row-flex .xl4{
 	flex-basis: 33.3333333333%;
 }
 .row-flex .xl5{
 	flex-basis: 41.6666666667%;
 }
 .row-flex .xl6{
 	flex-basis: 50%;
 }
 .row-flex .xl7{
 	flex-basis: 58.3333333333%;
 }
 .row-flex .xl8{
 	flex-basis: 66.6666666667%;
 }
 .row-flex .xl9{
 	flex-basis: 75%;
 }
 .row-flex .xl10{
 	flex-basis: 83.3333333333%;
 }
 .row-flex .xl11{
 	flex-basis: 91.6666666667%;
 }
 .row-flex .xl12{
 	flex-basis: 100%;
 }

 	/** OFFSETS **/

  .row-flex .offset-xl1{
 	flex-basis: 8.33333333333%;
 }
 .row-flex .offset-xl2{
 	flex-basis: 16.6666666667%;
 }
 .row-flex .offset-xl3{
 	flex-basis: 25%;
 }
 .row-flex .offset-xl4{
 	flex-basis: 33.3333333333%;
 }
 .row-flex .offset-xl5{
 	flex-basis: 41.6666666667%;
 }
 .row-flex .offset-xl6{
 	flex-basis: 50%;
 }
 .row-flex .offset-xl7{
 	flex-basis: 58.3333333333%;
 }
 .row-flex .offset-xl8{
 	flex-basis: 66.6666666667%;
 }
 .row-flex .offset-xl9{
 	flex-basis: 75%;
 }
 .row-flex .offset-xl10{
 	flex-basis: 83.3333333333%;
 }
 .row-flex .offset-xl11{
 	flex-basis: 91.6666666667%;
 }
 .row-flex .offset-xl12{
 	flex-basis: 100%;
 }
 }

 /*************************** END COLUMNS ***************************/

 /*************************** BEGIN ALIGNMENT ***************************/

 .align-between {
 	justify-content: space-between;
 }
 .align-start {
 	justify-content: flex-start;
 }
 .align-end {
 	justify-content: flex-end;
 }
 .align-center {
 	justify-content: center;
 }

 .xleft-ytop{
 	justify-content: flex-start;
 	align-items: flex-start;
 }

 .xcenter-ytop{
 	justify-content: center;
 	align-items: flex-start;
 }

 .xright-ytop{
 	justify-content: flex-end;
 	align-items: flex-start;
 }

 .xleft-ycenter{
 	justify-content: flex-start;
 	align-items: center;
 }

 .xcenter-ycenter{
 	justify-content: center;
 	align-items: center;
 }

 .xright-ycenter{
 	justify-content: flex-end;
 	align-items: center;
 }

 .xleft-ybottom{
 	justify-content: flex-start;
 	align-items: flex-end;
 }

 .xcenter-ybottom{
 	justify-content: center;
 	align-items: flex-end;
 }

 .xright-ybottom{
 	justify-content: flex-end;
 	align-items: flex-end;
 }
  /*************************** END ALIGNMENT ***************************/

  .direction-column{
 	flex-direction:column;
 }