@import (reference) "global";

@base-flex: 0 1 auto;
@center-flex: 1 1 auto;
.mobile {
	.v-box, .h-box, v-box, h-box {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		> .flex-box {
			display: -webkit-box;
			display: -moz-box;
		}
	}
}

.desktop {
	.v-box, .h-box, v-box, h-box {
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		box-sizing: border-box;
		> box, > flex-box {
			display: block;
		}

	}
}

.v-box, .h-box, v-box, h-box {
	position: relative;
	box-sizing: border-box;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;

	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;

	-webkit-align-content: stretch;
	-ms-flex-line-pack: stretch;
	align-content: stretch;

	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
	> .box, > box {
		overflow: visible;
	}
	> .flex-box, > flex-box {
		overflow: auto;
	}
	.box, box {
		-webkit-flex: @base-flex;
		-ms-flex: @base-flex;
		flex: @base-flex;

		-webkit-align-self: auto;
		-ms-flex-item-align: auto;
		align-self: auto;
	}
	> .flex-box, > flex-box {
		-webkit-box-flex: 1;
		-moz-box-flex: 1;

		-webkit-flex: @center-flex;
		-ms-flex: @center-flex;
		flex: @center-flex;

		-webkit-align-self: auto;
		-ms-flex-item-align: auto;
		align-self: auto;
		> * {
			position: absolute !important;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}
	}
}

.v-box, v-box {
	height: 100%;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;

	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	> * {
		position: relative;
		width: 100%;
	}
}

.h-box, h-box {
	width: 100%;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;

	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	> * {
		position: relative;
		height: 100%;
	}
}

.v-box.center, .h-box.center, v-box.center, h-box.center {
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.v-box.end, .h-box.end, v-box.end, h-box.end {
	-webkit-justify-content: flex-end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}





