/*------------------------------------*\
		$SUMMARY
\*------------------------------------*/

/**
 * SUMMARY.................It's me !
 * RESET...................Same render for all browser.
 * IMPORT..................CSS from Framework.
 * TESTS....................Some activable or desactivable CSS rules for debug.
 * GRID....................Grid base 12 columns.
 */





/*------------------------------------*\
		$RESET
\*------------------------------------*/

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
}





/*------------------------------------*\
	$IMPORT
\*------------------------------------*/

@import (reference) 'bootstrap/bootstrap';





/*------------------------------------*\
	$TESTS
\*------------------------------------*/

.brand:before,
.slogan:before,
.title:before,
.main-nav:before,
.overview:before,
.anchor-nav:before,
.main:before,
.call-to-action:before,
.secondary-nav:before,
.legals:before,
.utils:before {
	width: 100%;
	display: inline-block;
}

.brand:before {
	content: "Brand";
	background-color: rgba(0, 0, 150, 0.5);
}
.slogan:before {
	content: "Slogan";
	background-color: rgba(150, 150, 0, 0.5);
}
.title:before {
	content: "Title";
	background-color: rgba(255, 0, 0, 0.2);
}
.main-nav:before {
	content: "Nav";
	background-color: rgba(0, 255, 0, 0.2);
}
.overview:before {
	content: "Overview";
	background-color: rgba(150, 0, 0, 0.5);
}
.anchor-nav:before {
	content: "Anchor nav";
	background-color: rgba(0, 0, 255, 0.2);
}
.main:before {
	content: "Main";
	background-color: rgba(255, 255, 0, 0.2);
}
.call-to-action:before {
	content: "Call to action";
	background-color: rgba(255, 0, 255, 0.2);
}
.secondary-nav:before {
	content: "Secondary nav";
	background-color: rgba(0, 150, 0, 0.5);
}
.legals:before {
	content: "Legals";
	background-color: rgba(0, 255, 255, 0.2);
}
.utils:before {
	content: "Utils";
	background-color: rgba(150, 0, 150, 0.5);
}
.main:before {
	content: none;
}
.article:before {
	content: "Article";
	background-color: rgba(255, 255, 0, 0.2);
	width: 100%;
	display: inline-block;
}
.step:before {
	content: "Step";
	background-color: rgba(0, 255, 0, 0.2);
	width: 100%;
	display: inline-block;
}




/*------------------------------------*\
		$GRID
\*------------------------------------*/

.padding-reset {
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
}
.clear-left {
	clear: left;
}
.ul-reset {
	padding: 0;
	margin: 0;
	list-style: none;
}
.text-right {
	text-align: right;
}
.text-left {
	text-align: left;
}
.text-center {
	text-align: center;
}

body > header,
.content,
body > footer {
	&:extend(.container, .padding-reset);
}

.brand {
	.make-sm-column(2);
	.make-sm-column-push(10);
}
.slogan {
	.make-sm-column(10);
	.make-sm-column-pull(2);
}
.title {
	&:extend(.clear-left);
	.make-sm-column(2);
}
.main-nav {
	.make-sm-column(10);
}
.overview {
	.make-sm-column(12);
}
.anchor-nav {
	.make-sm-column(3);
}
.main {
	.make-sm-column(9);
}
.call-to-action-list {
	&:extend(.ul-reset);
}
.call-to-action {
	.make-sm-column(6);
	.make-md-column(4);
}
.call-to-action:nth-child(1) {
	.make-lg-column-offset(2);
}
@media (min-width: @screen-sm-min) {
	.call-to-action:nth-child(n+3) {
		display: none;
	}
}
@media (min-width: @screen-md-min) {
	.call-to-action:nth-child(n+3) {
		display: block;
	}
}
@media (min-width: @screen-lg-min) {
	.call-to-action:nth-child(n+3) {
		display: none;
	}
}
.secondary-nav {
	.make-sm-column(12);
}
.utils {
	.make-sm-column(3);
	.make-sm-column-push(9);
}
.legals {
	.make-sm-column(9);
	.make-sm-column-pull(3);
}
.step-list {
	&:extend(.ul-reset);
	.row;
}
.step {
	.hidden-xs;
	.make-sm-column(4);
}
.legals,
.brand {
	.text-left;
}
.utils {
	.text-center;
}
@media (min-width: @screen-sm-min) {
	.utils,
	.brand {
		.text-right;
	}
	.legals {
		.text-left
	}
}