/*

ABOUT

	Grille - CSS mini framework (based on flexbox technology), which provides an adaptive/responsive grid system.

VERSION

	1.1.1 (201702102103)

AUTHOR

	azbitnev@gmail.com

LICENSE

	The MIT License (MIT)

DESCRIPTION

	Breakpoints for media queries:

		NAME		SHORT NAME 	SCREEN WIDTH
		Small		sm		0px .. 600px
		Medium		md		601px .. 992px
		Large		lg		993px .. 1440px
		Extra Large	xl		1441px .. Infinity

	Containers:

		Any class of this section can be wrote with a prefix - short name of breakpoint.
		This is to ensure that the rules in force, when activating a breakpoint.
		Any class without prefix will work for any breakpoint.

		.container

			A simple container to center a content horizontally. On small and medium screens
			container will have a fixed margin of 1rem on both the left and right sides. On
			other screens the container will have a maximum width is 80% of parent's width.

		.fullwidth

			Stretch the container to 100% of width.

		.fullscreen-width

			Stretch the container to 100vw (full width of screen).

		.fullscreen-height

			Stretch the container to 100vh (full height of screen).

		.fullscreen

			Stretch the container to full size of screen.

	Defind a grids and a columns:

		.grid

			Define a layout based on grid. The items are displayed horizontally, as a row.
		

		.grid > .col-N-M

			Define a columns inside a grid. N - width of column (in columns). M - number of columns per row.
			You can use a short name of breakpoint to define a width of columns for selected breakpoint.
			For example, .md-4-12 - width of column is 4 of 12, if "md" breakpoint is activated (medium screens).

		.grid.gaps

			Same as .grid, but with gaps between items.

		.grid.columns

			The items are displayed vertically, as a column.

	Displaing modes:

		Any class of this section can be wrote with a prefix - short name of breakpoint.
		This is to ensure that the rules in force, when activating a breakpoint.
		Any class without prefix will work for any breakpoint.

		.block

			Display an element as block.

		.inline-block

			Display an element as inline-block.

		.hidden

			Do not display an element.

		.flex

			Use flexbox to display an element and his subelements.


	Align items inside a grid:

		Any class of this section can be wrote with a prefix - short name of breakpoint.
		This is to ensure that the rules in force, when activating a breakpoint.
		Any class without prefix will work for any breakpoint.

		.left
			Align grid's items horizontally by left side of grid.

		.right
			Align grid's items horizontally by right side of grid.

		.center
			Align grid's items horizontally by center of grid.

		.middle
			Align grid's items vertically by center of grid.

		.bottom
			Align grid's items vertically by bottom side of grid.

		.top
			Align grid's items vertically by top side of grid.

		.h-space-between
			Align grid's items horizontally using free space between them.

		.v-space-between
			Align grid's items vertically using free space between them.

		.space-between
			Align grid's items horizontally and vertically using free space between them.

		.h-space-around
			Align grid's items horizontally by distributing free space around them.

		.v-space-around
			Align grid's items vertically by distributing free space around them.

		.space-around
			Align grid's items horizontally and vertically by distributing free space around them.

*/

/* Containers */

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

.full-width { min-width: 100%; }
.fullscreen, .fullscreen-width { min-width: 100vw; }
.fullscreen, .fullscreen-height { min-height: 100vh; }

/* Grids */

.grid {
	display: flex;
	display: -webkit-flex;
	box-sizing: border-box;
	box-sizing: border-box;
	flex-flow: row wrap;
}

.grid > * { box-sizing: border-box; }

.grid.columns {	flex-flow: column wrap; }

/* Displaing modes */

.flex { display: flex; display: -webkit-flex; }
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }

/* Alignment */

.grid.left { justify-content: flex-start; }
.grid.right { justify-content: flex-end; }
.grid.center { justify-content: center; }
.grid.top { align-items: flex-start; }
.grid.bottom { align-items: flex-end; }
.grid.middle { align-items: center; }
.grid.space-between, .grid.h-space-between { justify-content: space-between; }
.grid.space-around, .grid.h-space-around { justify-content: space-around; }
.grid.space-between, .grid.v-space-between { align-items: space-between; }
.grid.space-around, .grid.v-space-around { align-items: space-around; }

.grid.columns.left { align-items: flex-start; }
.grid.columns.right { align-items: flex-end; }
.grid.columns.center { align-items: center; }
.grid.columns.top { justify-content: flex-start; }
.grid.columns.bottom { justify-content: flex-end; }
.grid.columns.middle { justify-content: center; }
.grid.columns.space-between, .grid.columns.h-space-between { align-items: space-between; }
.grid.columns.space-around, .grid.columns.h-space-around { align-items: space-around; }
.grid.columns.space-between, .grid.columns.v-space-between { justify-content: space-between; }
.grid.columns.space-around, .grid.columns.v-space-around { justify-content: space-around; }

/* Proportions */

.grid > .col-1-12 { width: calc(1/12 * 100%); }
.grid > .col-2-12 { width: calc(2/12 * 100%); }
.grid > .col-3-12 { width: calc(3/12 * 100%); }
.grid > .col-4-12 { width: calc(4/12 * 100%); }
.grid > .col-5-12 { width: calc(5/12 * 100%); }
.grid > .col-6-12 { width: calc(6/12 * 100%); }
.grid > .col-7-12 { width: calc(7/12 * 100%); }
.grid > .col-8-12 { width: calc(8/12 * 100%); }
.grid > .col-9-12 { width: calc(9/12 * 100%); }
.grid > .col-10-12 { width: calc(10/12 * 100%); }
.grid > .col-11-12 { width: calc(11/12 * 100%); }
.grid > .col-12-12 { width: 100%; }

/* Gaps */

.grid.gaps { justify-content: space-between; }
.grid.gaps > * { margin-bottom: 1rem; }

.grid.gaps > .col-1-12 { width: calc(1/12 * 100% - 11/12 * 1rem); }
.grid.gaps > .col-2-12 { width: calc(2/12 * 100% - 10/12 * 1rem); }
.grid.gaps > .col-3-12 { width: calc(3/12 * 100% - 9/12 * 1rem); }
.grid.gaps > .col-4-12 { width: calc(4/12 * 100% - 8/12 * 1rem); }
.grid.gaps > .col-5-12 { width: calc(5/12 * 100% - 7/12 * 1rem); }
.grid.gaps > .col-6-12 { width: calc(6/12 * 100% - 6/12 * 1rem); }
.grid.gaps > .col-7-12 { width: calc(7/12 * 100% - 5/12 * 1rem); }
.grid.gaps > .col-8-12 { width: calc(8/12 * 100% - 4/12 * 1rem); }
.grid.gaps > .col-9-12 { width: calc(9/12 * 100% - 3/12 * 1rem); }
.grid.gaps > .col-10-12 { width: calc(10/12 * 100% - 2/12 * 1rem); }
.grid.gaps > .col-11-12 { width: calc(11/12 * 100% - 1/12 * 1rem); }

/* Screen size depended classes. */

@media (max-width: 600px) {

	/* Continers */

	.container, .sm-container { width: calc(100% - 2 * 1rem); }

	.sm-full-width { min-width: 100%; }
	.sm-fullscreen, .sm-fullscreen-width { min-width: 100vw; }
	.sm-fullscreen, .sm-fullscreen-height { min-height: 100vh; }

	/* Displaing modes */

	.sm-flex { display: flex; display: -webkit-flex; }
	.sm-block { display: block; }
	.sm-inline-block { display: inline-block; }
	.sm-hidden { display: none; }

	/* Alignment */

	.grid.sm-left { justify-content: flex-start; }
	.grid.sm-right { justify-content: flex-end; }
	.grid.sm-center { justify-content: center; }
	.grid.sm-top { align-items: flex-start; }
	.grid.sm-bottom { align-items: flex-end; }
	.grid.sm-middle { align-items: center; }
	.grid.sm-space-between, .grid.sm-h-space-between { justify-content: space-between; }
	.grid.sm-space-around, .grid.sm-h-space-around { justify-content: space-around; }
	.grid.sm-space-between, .grid.sm-v-space-between { align-items: space-between; }
	.grid.sm-space-around, .grid.sm-v-space-around { align-items: space-around; }

	.grid.columns.sm-start { align-items: flex-start; }
	.grid.columns.sm-end { align-items: flex-end; }
	.grid.columns.sm-center { align-items: center; }
	.grid.columns.sm-top { justify-content: flex-start; }
	.grid.columns.sm-bottom { justify-content: flex-end; }
	.grid.columns.sm-middle { justify-content: center; }
	.grid.columns.sm-space-between, .grid.columns.h-space-between { align-items: space-between; }
	.grid.columns.sm-space-around, .grid.columns.h-space-around { align-items: space-around; }
	.grid.columns.sm-space-between, .grid.columns.v-space-between { justify-content: space-between; }
	.grid.columns.sm-space-around, .grid.columns.v-space-around { justify-content: space-around; }

	/* Proportions */

	.grid > .sm-1-12 { width: calc(1/12 * 100%); }
	.grid > .sm-2-12 { width: calc(2/12 * 100%); }
	.grid > .sm-3-12 { width: calc(3/12 * 100%); }
	.grid > .sm-4-12 { width: calc(4/12 * 100%); }
	.grid > .sm-5-12 { width: calc(5/12 * 100%); }
	.grid > .sm-6-12 { width: calc(6/12 * 100%); }
	.grid > .sm-7-12 { width: calc(7/12 * 100%); }
	.grid > .sm-8-12 { width: calc(8/12 * 100%); }
	.grid > .sm-9-12 { width: calc(9/12 * 100%); }
	.grid > .sm-10-12 { width: calc(10/12 * 100%); }
	.grid > .sm-11-12 { width: calc(11/12 * 100%); }
	.grid > .sm-12-12 { width: 100%; }

	/* Gaps */

	.grid.gaps > .sm-1-12 { width: calc(1/12 * 100% - 11/12 * 1rem); }
	.grid.gaps > .sm-2-12 { width: calc(2/12 * 100% - 10/12 * 1rem); }
	.grid.gaps > .sm-3-12 { width: calc(3/12 * 100% - 9/12 * 1rem); }
	.grid.gaps > .sm-4-12 { width: calc(4/12 * 100% - 8/12 * 1rem); }
	.grid.gaps > .sm-5-12 { width: calc(5/12 * 100% - 7/12 * 1rem); }
	.grid.gaps > .sm-6-12 { width: calc(6/12 * 100% - 6/12 * 1rem); }
	.grid.gaps > .sm-7-12 { width: calc(7/12 * 100% - 5/12 * 1rem); }
	.grid.gaps > .sm-8-12 { width: calc(8/12 * 100% - 4/12 * 1rem); }
	.grid.gaps > .sm-9-12 { width: calc(9/12 * 100% - 3/12 * 1rem); }
	.grid.gaps > .sm-10-12 { width: calc(10/12 * 100% - 2/12 * 1rem); }
	.grid.gaps > .sm-11-12 { width: calc(11/12 * 100% - 1/12 * 1rem); }
}

@media (min-width: 601px) and (max-width: 992px) {

	/* Continers */

	.container, .md-container { width: calc(100% - 2 * 1rem); }

	.md-full-width { min-width: 100%; }
	.md-fullscreen, .md-fullscreen-width { min-width: 100vw; }
	.md-fullscreen, .md-fullscreen-height { min-height: 100vh; }

	/* Displaing modes */

	.md-flex { display: flex; display: -webkit-flex; }
	.md-block { display: block; }
	.md-inline-block { display: inline-block; }
	.md-hidden { display: none; }

	/* Alignment */

	.grid.md-left { justify-content: flex-start; }
	.grid.md-right { justify-content: flex-end; }
	.grid.md-center { justify-content: center; }
	.grid.md-top { align-items: flex-start; }
	.grid.md-bottom { align-items: flex-end; }
	.grid.md-middle { align-items: center; }
	.grid.md-space-between, .grid.md-h-space-between { justify-content: space-between; }
	.grid.md-space-around, .grid.md-h-space-around { justify-content: space-around; }
	.grid.md-space-between, .grid.md-v-space-between { align-items: space-between; }
	.grid.md-space-around, .grid.md-v-space-around { align-items: space-around; }

	.grid.columns.md-start { align-items: flex-start; }
	.grid.columns.md-end { align-items: flex-end; }
	.grid.columns.md-center { align-items: center; }
	.grid.columns.md-top { justify-content: flex-start; }
	.grid.columns.md-bottom { justify-content: flex-end; }
	.grid.columns.md-middle { justify-content: center; }
	.grid.columns.md-space-between, .grid.columns.h-space-between { align-items: space-between; }
	.grid.columns.md-space-around, .grid.columns.h-space-around { align-items: space-around; }
	.grid.columns.md-space-between, .grid.columns.v-space-between { justify-content: space-between; }
	.grid.columns.md-space-around, .grid.columns.v-space-around { justify-content: space-around; }

	/* Proportions */

	.grid > .md-1-12 { width: calc(1/12 * 100%); }
	.grid > .md-2-12 { width: calc(2/12 * 100%); }
	.grid > .md-3-12 { width: calc(3/12 * 100%); }
	.grid > .md-4-12 { width: calc(4/12 * 100%); }
	.grid > .md-5-12 { width: calc(5/12 * 100%); }
	.grid > .md-6-12 { width: calc(6/12 * 100%); }
	.grid > .md-7-12 { width: calc(7/12 * 100%); }
	.grid > .md-8-12 { width: calc(8/12 * 100%); }
	.grid > .md-9-12 { width: calc(9/12 * 100%); }
	.grid > .md-10-12 { width: calc(10/12 * 100%); }
	.grid > .md-11-12 { width: calc(11/12 * 100%); }
	.grid > .md-12-12 { width: 100%; }

	/* Gaps */

	.grid.gaps > .md-1-12 { width: calc(1/12 * 100% - 11/12 * 1rem); }
	.grid.gaps > .md-2-12 { width: calc(2/12 * 100% - 10/12 * 1rem); }
	.grid.gaps > .md-3-12 { width: calc(3/12 * 100% - 9/12 * 1rem); }
	.grid.gaps > .md-4-12 { width: calc(4/12 * 100% - 8/12 * 1rem); }
	.grid.gaps > .md-5-12 { width: calc(5/12 * 100% - 7/12 * 1rem); }
	.grid.gaps > .md-6-12 { width: calc(6/12 * 100% - 6/12 * 1rem); }
	.grid.gaps > .md-7-12 { width: calc(7/12 * 100% - 5/12 * 1rem); }
	.grid.gaps > .md-8-12 { width: calc(8/12 * 100% - 4/12 * 1rem); }
	.grid.gaps > .md-9-12 { width: calc(9/12 * 100% - 3/12 * 1rem); }
	.grid.gaps > .md-10-12 { width: calc(10/12 * 100% - 2/12 * 1rem); }
	.grid.gaps > .md-11-12 { width: calc(11/12 * 100% - 1/12 * 1rem); }
}

@media (min-width: 993px) and (max-width: 1440px) {

	/* Continers */

	.container, .lg-container { width: 80%; }

	.lg-full-width { min-width: 100%; }
	.lg-fullscreen, .lg-fullscreen-width { min-width: 100vw; }
	.lg-fullscreen, .lg-fullscreen-height { min-height: 100vh; }

	/* Displaing modes */

	.lg-flex { display: flex; display: -webkit-flex; }
	.lg-block { display: block; }
	.lg-inline-block { display: inline-block; }
	.lg-hidden { display: none; }

	/* Alignment */

	.grid.lg-left { justify-content: flex-start; }
	.grid.lg-right { justify-content: flex-end; }
	.grid.lg-center { justify-content: center; }
	.grid.lg-top { align-items: flex-start; }
	.grid.lg-bottom { align-items: flex-end; }
	.grid.lg-middle { align-items: center; }
	.grid.lg-space-between, .grid.lg-h-space-between { justify-content: space-between; }
	.grid.lg-space-around, .grid.lg-h-space-around { justify-content: space-around; }
	.grid.lg-space-between, .grid.lg-v-space-between { align-items: space-between; }
	.grid.lg-space-around, .grid.lg-v-space-around { align-items: space-around; }

	.grid.columns.lg-start { align-items: flex-start; }
	.grid.columns.lg-end { align-items: flex-end; }
	.grid.columns.lg-center { align-items: center; }
	.grid.columns.lg-top { justify-content: flex-start; }
	.grid.columns.lg-bottom { justify-content: flex-end; }
	.grid.columns.lg-middle { justify-content: center; }
	.grid.columns.lg-space-between, .grid.columns.h-space-between { align-items: space-between; }
	.grid.columns.lg-space-around, .grid.columns.h-space-around { align-items: space-around; }
	.grid.columns.lg-space-between, .grid.columns.v-space-between { justify-content: space-between; }
	.grid.columns.lg-space-around, .grid.columns.v-space-around { justify-content: space-around; }

	/* Proportions */

	.grid > .lg-1-12 { width: calc(1/12 * 100%); }
	.grid > .lg-2-12 { width: calc(2/12 * 100%); }
	.grid > .lg-3-12 { width: calc(3/12 * 100%); }
	.grid > .lg-4-12 { width: calc(4/12 * 100%); }
	.grid > .lg-5-12 { width: calc(5/12 * 100%); }
	.grid > .lg-6-12 { width: calc(6/12 * 100%); }
	.grid > .lg-7-12 { width: calc(7/12 * 100%); }
	.grid > .lg-8-12 { width: calc(8/12 * 100%); }
	.grid > .lg-9-12 { width: calc(9/12 * 100%); }
	.grid > .lg-10-12 { width: calc(10/12 * 100%); }
	.grid > .lg-11-12 { width: calc(11/12 * 100%); }
	.grid > .lg-12-12 { width: 100%; }

	/* Gaps */

	.grid.gaps > .lg-1-12 { width: calc(1/12 * 100% - 11/12 * 1rem); }
	.grid.gaps > .lg-2-12 { width: calc(2/12 * 100% - 10/12 * 1rem); }
	.grid.gaps > .lg-3-12 { width: calc(3/12 * 100% - 9/12 * 1rem); }
	.grid.gaps > .lg-4-12 { width: calc(4/12 * 100% - 8/12 * 1rem); }
	.grid.gaps > .lg-5-12 { width: calc(5/12 * 100% - 7/12 * 1rem); }
	.grid.gaps > .lg-6-12 { width: calc(6/12 * 100% - 6/12 * 1rem); }
	.grid.gaps > .lg-7-12 { width: calc(7/12 * 100% - 5/12 * 1rem); }
	.grid.gaps > .lg-8-12 { width: calc(8/12 * 100% - 4/12 * 1rem); }
	.grid.gaps > .lg-9-12 { width: calc(9/12 * 100% - 3/12 * 1rem); }
	.grid.gaps > .lg-10-12 { width: calc(10/12 * 100% - 2/12 * 1rem); }
	.grid.gaps > .lg-11-12 { width: calc(11/12 * 100% - 1/12 * 1rem); }
}

@media (min-width: 1441px) {

	/* Continers */

	.container, .xl-container { width: 80%; }

	.xl-full-width { min-width: 100%; }
	.xl-fullscreen, .xl-fullscreen-width { min-width: 100vw; }
	.xl-fullscreen, .xl-fullscreen-height { min-height: 100vh; }

	/* Displaing modes */

	.xl-flex { display: flex; display: -webkit-flex; }
	.xl-block { display: block; }
	.xl-inline-block { display: inline-block; }
	.xl-hidden { display: none; }

	/* Alignment */

	.grid.xl-left { justify-content: flex-start; }
	.grid.xl-right { justify-content: flex-end; }
	.grid.xl-center { justify-content: center; }
	.grid.xl-top { align-items: flex-start; }
	.grid.xl-bottom { align-items: flex-end; }
	.grid.xl-middle { align-items: center; }
	.grid.xl-space-between, .grid.xl-h-space-between { justify-content: space-between; }
	.grid.xl-space-around, .grid.xl-h-space-around { justify-content: space-around; }
	.grid.xl-space-between, .grid.xl-v-space-between { align-items: space-between; }
	.grid.xl-space-around, .grid.xl-v-space-around { align-items: space-around; }

	.grid.columns.xl-start { align-items: flex-start; }
	.grid.columns.xl-end { align-items: flex-end; }
	.grid.columns.xl-center { align-items: center; }
	.grid.columns.xl-top { justify-content: flex-start; }
	.grid.columns.xl-bottom { justify-content: flex-end; }
	.grid.columns.xl-middle { justify-content: center; }
	.grid.columns.xl-space-between, .grid.columns.h-space-between { align-items: space-between; }
	.grid.columns.xl-space-around, .grid.columns.h-space-around { align-items: space-around; }
	.grid.columns.xl-space-between, .grid.columns.v-space-between { justify-content: space-between; }
	.grid.columns.xl-space-around, .grid.columns.v-space-around { justify-content: space-around; }

	/* Proportions */

	.grid > .xl-1-12 { width: calc(1/12 * 100%); }
	.grid > .xl-2-12 { width: calc(2/12 * 100%); }
	.grid > .xl-3-12 { width: calc(3/12 * 100%); }
	.grid > .xl-4-12 { width: calc(4/12 * 100%); }
	.grid > .xl-5-12 { width: calc(5/12 * 100%); }
	.grid > .xl-6-12 { width: calc(6/12 * 100%); }
	.grid > .xl-7-12 { width: calc(7/12 * 100%); }
	.grid > .xl-8-12 { width: calc(8/12 * 100%); }
	.grid > .xl-9-12 { width: calc(9/12 * 100%); }
	.grid > .xl-10-12 { width: calc(10/12 * 100%); }
	.grid > .xl-11-12 { width: calc(11/12 * 100%); }
	.grid > .xl-12-12 { width: 100%; }

	/* Gaps */

	.grid.gaps > .xl-1-12 { width: calc(1/12 * 100% - 11/12 * 1rem); }
	.grid.gaps > .xl-2-12 { width: calc(2/12 * 100% - 10/12 * 1rem); }
	.grid.gaps > .xl-3-12 { width: calc(3/12 * 100% - 9/12 * 1rem); }
	.grid.gaps > .xl-4-12 { width: calc(4/12 * 100% - 8/12 * 1rem); }
	.grid.gaps > .xl-5-12 { width: calc(5/12 * 100% - 7/12 * 1rem); }
	.grid.gaps > .xl-6-12 { width: calc(6/12 * 100% - 6/12 * 1rem); }
	.grid.gaps > .xl-7-12 { width: calc(7/12 * 100% - 5/12 * 1rem); }
	.grid.gaps > .xl-8-12 { width: calc(8/12 * 100% - 4/12 * 1rem); }
	.grid.gaps > .xl-9-12 { width: calc(9/12 * 100% - 3/12 * 1rem); }
	.grid.gaps > .xl-10-12 { width: calc(10/12 * 100% - 2/12 * 1rem); }
	.grid.gaps > .xl-11-12 { width: calc(11/12 * 100% - 1/12 * 1rem); }
}