* {
	box-sizing: border-box;
}

html {
	min-height: 100%;
	height: 100%;
}

body {
	margin: 0;
	min-height: 100%;
}

ol, ul {
	list-style: none;
	padding: 0;
}

[data-view-controller] {
	position: relative;
}

[data-view] {
	position: relative;
}

[data-view]:after {
	content: " ";
	display: block;
	clear: both;
}

.column {
	float: left;
}

.wrapper {
	position: relative;
	margin: 0 auto;
	max-width: 1280px;
}

.wrapper-inner {
	position: relative;
	padding: 20px;
}

/* Span */

[data-span] {

}

[data-span="50"] {
	width: 50%;
}

/* 16 * 9 */
[data-span="56"] {
	width: 56.25%;
}

[data-span="33"] {
	width: 33.333333%;
}

[data-span="25"] {
	width: 25%;
}

[data-span="20"] {
	width: 20%;
}

/* Ratio */

[data-ratio] {
	position: relative;
	height: 0px;
	width: 100%;
}

[data-ratio-inner] {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

[data-ratio="25"] {
	padding-bottom: 25%;
}

[data-ratio="30"] {
	padding-bottom: 30%;
}

[data-ratio="40"] {
	padding-bottom: 40%;
}

[data-ratio="45"] {
	padding-bottom: 45%;
}


[data-ratio="50"] {
	padding-bottom: 50%;
}

[data-ratio="56"] {
	padding-bottom: 56.25%;
}

[data-ratio="75"] {
	padding-bottom: 75%;
}

/* --- Component --- */

[data-component] {

}

[data-component-inner] {
    position: relative;
    margin: 0px 20px;
}


[data-component-inner]:after {
	content: " ";
	display: block;
	clear: both;
}