/* Title:       Grig system stylesheet
	 Theme URI:   http://www.casio.com
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */


/* Grid box sizing
─────────────────────────────────────────────────────────────────────────────────── */

[class*="grid-"],
.column {
	-webkit-box-sizing: border-box;
		 -moz-box-sizing: border-box;
					box-sizing: border-box;
}


/* Reset lists styles
─────────────────────────────────────────────────────────────────────────────────── */

ul[class*="grid-"],
ol[class*="grid-"] {
	list-style-type: none;
	padding-left: 0;
}


/* Clearfix
─────────────────────────────────────────────────────────────────────────────────── */

[class*="grid-"]:before,
[class*="grid-"]:after {
	content: '';
	display: block;
	height: 0;
	overflow: hidden;
}
[class*="grid-"]:after {
	clear: both;
}

/* Grid system
─────────────────────────────────────────────────────────────────────────────────── */
[class*="grid-"] {
	padding: 0 2%;
	margin: 0 auto;
}

[class*="grid-"] > .column {
	float: left;
	margin: 0 1.5%;
	padding: 0 3%;
}

[class*="grid-w-"] > .column {
	margin: 0;
	padding: 0 1.5%;
}


/* PC > 768px */
@media print, screen and (min-width: 48em) {
	[class*="grid-"] {
		max-width: 97%;
		padding: 0;
	}
	.grid-full-width {
		max-width: 100%;
		max-width: initial;
	}

	[class*="grid-"] > .column {
		margin: 0;
		padding: 0;
	}
	[class*="grid-w-"] > .column {
		margin: 0;
		padding: 0;
	}
}


/* ----- PC columns ----- */
/* PC > 768px */
@media print, screen and (min-width: 48em) {

	/* Separete */
	.grid--1 > .column {
		width: 98%;
	}
	.grid--2 > .column {
		width: 48%;
	}
	.grid--3 > .column {
		width: 31.333%;
	}
	.grid--4 > .column {
		width: 23%;
	}
	.grid--6 > .column {
		width: 14.666%;
	}
	.grid--12 > .column {
		width: 6.333%;
	}

	/* Double column */
	.grid--3 > .column-main {
		width: 64.666%;
	}
	.grid--4 > .column-main {
		width: 48.0%;
	}
	.grid--6 > .column-main {
		width: 81.33%;
	}
	.grid--12 > .column-main {
		width: 89.667%;
	}

	/* triple column */
	.grid--4 > .main-column-large {
		width: 69%;
	}

	/* Collapse */
	.grid-w--1 > .column {
		width: 100%;
	}
	.grid-w--2 > .column {
		width: 50%;
	}
	.grid-w--3 > .column {
		width: 33.333%;
	}
	.grid-w--4 > .column {
		width: 25%;
	}
	.grid-w--6 > .column {
		width: 16.666%;
	}

	/* reset */
	.grid-1 > .column,
	.grid-2 > .column:nth-child(2n+1),
	.grid-3 > .column:nth-child(3n+1),
	.grid-w-1 > .column,
	.grid-w-2 > .column:nth-child(2n+1),
	.grid-w-3 > .column:nth-child(3n+1),
	.grid-mix.grid-2 > .column:nth-child(2n+1) {
		clear: none;
	}

	.grid--1 > .column,
	.grid--2 > .column:nth-child(2n+1),
	.grid--3 > .column:nth-child(3n+1),
	.grid-mix.grid--3 > .column:nth-child(2n+1),
	.grid--4 > .column:nth-child(4n+1),
	.grid--5 > .column:nth-child(5n+1),
	.grid--6 > .column:nth-child(6n+1),
	.grid-mix.grid--6 > .column:nth-child(2n+1),
	.grid-mix.grid--12 > .column:nth-child(2n+1),
	.grid-w--1 > .column,
	.grid-w--2 > .column:nth-child(2n+1),
	.grid-w--3 > .column:nth-child(3n+1),
	.grid-w--4 > .column:nth-child(4n+1),
	.grid-w--6 > .column:nth-child(6n+1) {
		clear: both;
	}
	.grid-mix.grid--3 > .column:nth-child(3n+1),
	.grid-mix.grid--4 > .column:nth-child(4n+1) {
		clear: none;
	}

}

/* ----- Titles & images ----- */

.column .figure img {
	margin: auto;
	max-width: 100%;
}
.grid-full-width [class*="title"],
.grid-full-width [class*="panel-"],
.grid-full-width > .figure {
	margin: 0;
}
.grid-1 > .column [class*="title"],
.grid-1 > .column [class*="panel-"],
.grid-1 > .column .figure {
	margin-left: -3.25%;
	margin-right: -3.25%;
	max-width: 106.5%;
}
.grid-2 > .column [class*="title"],
.grid-2 > .column [class*="panel-"],
.grid-2 > .column .figure {
	margin-left: -7.25%;
	margin-right: -7.25%;
	max-width: 114.5%;
}
.grid-3 > .column [class*="title"],
.grid-3 > .column [class*="panel-"],
.grid-3 > .column .figure {
	margin-left: -12.5%;
	margin-right: -12.5%;
	max-width: 124.8%;
}
.grid-w-1 > .column [class*="title"],
.grid-w-1 > .column [class*="panel-"],
.grid-w-1 > .column .figure {
	margin-left: -1.5%;
	margin-right: -1.5%;
	max-width: 103%;
}
.grid-w-2 > .column [class*="title"],
.grid-w-2 > .column [class*="panel-"],
.grid-w-2 > .column .figure {
	margin-left: -3.125%;
	margin-right: -3.125%;
	max-width: 106.25%;
}
.grid-w-3 > .column [class*="title"],
.grid-w-3 > .column [class*="panel-"],
.grid-w-3 > .column .figure {
	margin-left: -5%;
	margin-right: -5%;
	max-width: 110%;
}

.grid-2 > .column-main [class*="title"],
.grid-2 > .column-main [class*="panel-"],
.grid-2 > .column-main > .figure {
	margin-left: -3.25%;
	margin-right: -3.25%;
	max-width: 106.5%;
}

/* inner .frame layout */
.frame > .column [class*="title"],
.frame > .column [class*="panel-"],
.frame > .column .figure,
.frame > .column > .movie iframe {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
}