*,
*::after,
*::before {
	box-sizing: border-box;
}

body {
	/* Grid gap */
	--gap: 10px;
	/* Color scheme */
	--body-text: #333;
	--body-bg: #000;
	--link-text: #ef3b3b;
	--link-text-hover: #333;
	--grid-name-text: #ef3b3b;
	--grid-title-text: #ef3b3b;
	--grid-nav-text: #fff;
	--grid-nav-bg: #a30000;
	--grid-nav-text-hover: #fff;
	--grid-nav-bg-hover: #4c4b4b;
	--grid-text: #333;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	min-height: 100vh;
	color: #333;
	color: var(--body-text);
	background: #ccd8e4;
	background: var(--body-bg);
	margin: 0;
}

a {
	text-decoration: none;
	color: #ef3b3b;
	color: var(--link-text);
	outline: none;
}

a:hover,
a:focus {
	color: #333;
	color: var(--link-text-hover);
}

.hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* Icons */
.icon {
	display: block;
	width: 1.5em;
	height: 1.5em;
	margin: 0 auto;
	fill: currentColor;
}

/* Frame */
.frame {
	top: 0;
	left: 0;
	position: fixed;
	display: grid;
	width: 100%;
	height: 100vh;
	z-index: 100;
	pointer-events: none;
	padding: 2em;
	grid-template-columns: 50% 50%;
	grid-template-rows: auto auto 4em;
	grid-template-areas: 	"header header"
							"... ..."
							"... demos";
}

.no-js .frame {
	position: relative;
	display: block;
	height: auto;
}

.frame a {
	pointer-events: auto;
}

.message {
	background: #333;
	background: var(--body-text);
	color: #ccd8e4;
	color: var(--body-bg);
	text-align: center;
	padding: 1em;
	display: none;
}

main.like_banner {
	height: calc(100vh);
}

/* Grid */
main.like_banner .banner_grid {
	display: grid;
	width: calc(100% - 6em);
	height: calc(100vh - 6em);
	grid-auto-rows: calc((calc(100vh - 6em) / 30) - var(--gap));
	grid-auto-columns: calc((calc(100% - 6em) / 30) - var(--gap));
	justify-content: center;
	align-content: center;
	grid-gap: var(--gap);
	pointer-events: none;
}

.no-js main.like_banner .banner_grid {
	margin: 0 0 15vh;
}

.js main.like_banner .banner_grid {
	/***********position: absolute;*/
	position: absolute;
	top: 3em;
	left: 3em;
	opacity: 0;
}

.js main.like_banner .grid--current {
	opacity: 1;
	pointer-events: auto;
}

main.like_banner .grid__itemss {
	position: relative;
	padding: 1em;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	transition: transform 0.2s ease-out;
}

main.like_banner .grid__itemss--name,
main.like_banner .grid__itemss--title,
main.like_banner .grid__itemss--text {
	pointer-events: none;
	padding: 0;
	margin: 0;
}

main.like_banner .grid__itemss--name,
main.like_banner .grid__itemss--title {
	text-transform: uppercase;
	line-height: 0.8;
	font-family: 'Kanit', sans-serif;
}

main.like_banner .grid__itemss--name {
	font-size: 7vw;
	color: #ef3b3b;
	color: var(--grid-name-text);
}

main.like_banner .grid__itemss--title {
	font-size: 3.5vh;
	text-transform: uppercase;	
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
	text-align: right;
	display: flex;
	justify-content: flex-end;
	color: #ef3b3b;
	color: var(--grid-title-text);
}

main.like_banner .grid__itemss--text {
	font-size: 0.85em;
	line-height: 1.2;
	display: flex;
	color: inherit;
	color: var(--grid-text);
}

main.like_banner .grid__itemss--nav {
	background: #442ef4;
	background: var(--grid-nav-bg);
	color: #fff;
	color: var(--grid-nav-text);
	display: flex;
	align-items: center;
	cursor: pointer;
}

main.like_banner .grid__itemss--nav:hover {
	background: #1f1f1f;
	background: var(--grid-nav-bg-hover);
	color: #fff;
	color: var(--grid-nav-text-hover);
}

main.like_banner .grid__itemss--nav-next .icon--nav-arrow {
	margin: 0 0 0 auto;
}

main.like_banner .grid__itemss--nav-prev .icon--nav-arrow {
	transform: rotate(180deg);
	margin: 0;
}

.no-js main.like_banner .grid__itemss--nav {
	display: none;
}

main.like_banner .grid__itemss--animateOut {
	animation: animateOut 0.8s cubic-bezier(0.7,0,0.3,1) forwards;
}

@keyframes animateOut {
	to {
		opacity: 0;
	}
}

main.like_banner .grid__itemss--animateIn {
	animation: animateIn 0.8s cubic-bezier(0.7,0,0.3,1) forwards;
}

@keyframes animateIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Layout 1 */
main.like_banner .grid--layout-1 .grid__itemss:first-child { grid-area: 11 / 1 / 17 / 5; background-image: url(../img/banner/2.png); background-position: 50% 100%; }
main.like_banner .grid--layout-1 .grid__itemss:nth-child(2) { grid-area: 22 / 6 / 28 / 10; background-image: url(../img/banner/4.png); }
main.like_banner .grid--layout-1 .grid__itemss:nth-child(3) { grid-area: 8 / 5 / 22 / 15; background-image: url(../img/banner/6.png); }
main.like_banner .grid--layout-1 .grid__itemss:nth-child(4) { grid-area: 22 / 10 / 29 / 15; background-image: url(../img/banner/8.png); }
main.like_banner .grid--layout-1 .grid__itemss:nth-child(5) { grid-area: 1 / 11 / 8 / 15; background-image: url(../img/banner/10.png); }
main.like_banner .grid--layout-1 .grid__itemss:nth-child(6) { grid-area: 17 / 15 / 24 / 20; background-image: url(../img/banner/12.png); }
main.like_banner .grid--layout-1 .grid__itemss:nth-child(7) { grid-area: 9 / 15 / 17 / 23; background-image: url(../img/banner/14.png); }
main.like_banner .grid--layout-1 .grid__itemss:nth-child(8) { grid-area: 2 / 18 / 9 / 23; background-image: url(../img/banner/16.png); }
main.like_banner .grid--layout-1 .grid__itemss:nth-child(9) { grid-area: 17 / 20 / 22 / 26; background-image: url(../img/banner/18.png);background-position: 50% 25%; }
main.like_banner .grid--layout-1 .grid__itemss:nth-child(10) { grid-area: 22 / 20 / 28 / 23; background-image: url(../img/banner/20.png); }
main.like_banner .grid--layout-1 .grid__itemss:nth-child(11) { grid-area: 4 / 23 / 11 / 27; background-image: url(../img/banner/22.png); }
main.like_banner .grid--layout-1 .grid__itemss:nth-child(12) { grid-area: 11 / 23 / 17	/ 30; background-image: url(../img/banner/3.png); }
main.like_banner .grid--layout-1 .grid__itemss:nth-child(13) { grid-area: 17 / 26 / 22 / 28; background-image: url(../img/banner/5.png); }
main.like_banner .grid--layout-1 .grid__itemss--name { grid-area: 5 / 12 / 30 / 25; }
main.like_banner .grid--layout-1 .grid__itemss--title { grid-area: 1 / 27 / 11 / 29; }
main.like_banner .grid--layout-1 .grid__itemss--text { grid-area: 22 / 23 / 30 / 26; }
main.like_banner .grid--layout-1 .grid__itemss--nav-prev { grid-area: 3 / 6 / 8 / 11; }
main.like_banner .grid--layout-1 .grid__itemss--nav-next { grid-area: 24 / 15 / 29 / 20; }

main.like_banner .grid--layout-1 .grid__itemss--name img {
	opacity: 0.9;
	width: 19vw;
}

/* Layout 2 */
main.like_banner .grid--layout-2 .grid__itemss:first-child { grid-area: 17 / 1 / 24 / 5; background-image: url(../img/banner/7.jpg); }
main.like_banner .grid--layout-2 .grid__itemss:nth-child(2) { grid-area: 22 / 6 / 28 / 10; background-image: url(../img/banner/9.jpg); }
main.like_banner .grid--layout-2 .grid__itemss:nth-child(3) { grid-area: 14 / 5 / 22 / 10; background-image: url(../img/banner/11.jpg); }
main.like_banner .grid--layout-2 .grid__itemss:nth-child(4) { grid-area: 17 / 10 / 26 / 15; background-image: url(../img/banner/13.jpg); }
main.like_banner .grid--layout-2 .grid__itemss:nth-child(5) { grid-area: 1 / 10 / 17 / 15; background-image: url(../img/banner/15.jpg); }
main.like_banner .grid--layout-2 .grid__itemss:nth-child(6) { grid-area: 11 / 15 / 24 / 20; background-image: url(../img/banner/17.jpg); }
main.like_banner .grid--layout-2 .grid__itemss:nth-child(7) { grid-area: 5 / 15 / 11 / 18; background-image: url(../img/banner/19.jpg); }
main.like_banner .grid--layout-2 .grid__itemss:nth-child(8) { grid-area: 1 / 18 / 11 / 23; background-image: url(../img/banner/21.jpg); }
main.like_banner .grid--layout-2 .grid__itemss:nth-child(9) { grid-area: 20 / 20 / 27 / 24; background-image: url(../img/banner/23.jpg); }
main.like_banner .grid--layout-2 .grid__itemss:nth-child(10) { grid-area: 24 / 15 / 29 / 20; background-image: url(../img/banner/2.jpg); }
main.like_banner .grid--layout-2 .grid__itemss:nth-child(11) { grid-area: 4 / 23 / 11 / 27; background-image: url(../img/banner/4.jpg); }
main.like_banner .grid--layout-2 .grid__itemss:nth-child(12) { grid-area: 11 / 20 / 20	/ 30; background-image: url(../img/banner/6.jpg); }
main.like_banner .grid--layout-2 .grid__itemss:nth-child(13) { grid-area: 25 / 24 / 29 / 28; background-image: url(../img/banner/8.jpg); }
main.like_banner .grid--layout-2 .grid__itemss--name { grid-area: 5 / 12 / 30 / 25; }
main.like_banner .grid--layout-2 .grid__itemss--title { grid-area: 1 / 27 / 11 / 29; }
main.like_banner .grid--layout-2 .grid__itemss--text { grid-area: 1 / 5 / 9 / 10; align-items: flex-end; text-align: right;}
main.like_banner .grid--layout-2 .grid__itemss--nav-prev { grid-area: 9 / 5 / 14 / 10; }
main.like_banner .grid--layout-2 .grid__itemss--nav-next { grid-area: 20 / 24 / 25 / 30; }

main.like_banner .grid--layout-2 .grid__itemss--name img {
	opacity: 0.9;
	width: 19vw;
}

/* Layout 3 */
main.like_banner .grid--layout-3 .grid__itemss:first-child { grid-area: 6 / 1 / 14 / 5; background-image: url(../img/banner/1.jpg); }
main.like_banner .grid--layout-3 .grid__itemss:nth-child(2) { grid-area: 3 / 5 / 14 / 10; background-image: url(../img/banner/2.jpg); }
main.like_banner .grid--layout-3 .grid__itemss:nth-child(3) { grid-area: 14 / 1 / 21 / 5; background-image: url(../img/banner/3.jpg); }
main.like_banner .grid--layout-3 .grid__itemss:nth-child(4) { grid-area: 19 / 10 / 28 / 20; background-image: url(../img/banner/4.jpg); }
main.like_banner .grid--layout-3 .grid__itemss:nth-child(5) { grid-area: 1 / 10 / 11 / 18; background-image: url(../img/banner/5.jpg); }
main.like_banner .grid--layout-3 .grid__itemss:nth-child(6) { grid-area: 11 / 10 / 19 / 15; background-image: url(../img/banner/6.jpg); }
main.like_banner .grid--layout-3 .grid__itemss:nth-child(7) { grid-area: 11 / 15 / 19 / 20; background-image: url(../img/banner/7.jpg); }
main.like_banner .grid--layout-3 .grid__itemss:nth-child(8) { grid-area: 1 / 18 / 6 / 23; background-image: url(../img/banner/8.jpg); }
main.like_banner .grid--layout-3 .grid__itemss:nth-child(9) { grid-area: 20 / 20 / 27 / 24; background-image: url(../img/banner/9.jpg); }
main.like_banner .grid--layout-3 .grid__itemss:nth-child(10) { grid-area: 20 / 28 / 25 / 30; background-image: url(../img/banner/10.jpg); }
main.like_banner .grid--layout-3 .grid__itemss:nth-child(11) { grid-area: 4 / 23 / 11 / 27; background-image: url(../img/banner/11.jpg); }
main.like_banner .grid--layout-3 .grid__itemss:nth-child(12) { grid-area: 11 / 20 / 20	/ 30; background-image: url(../img/banner/12.jpg); }
main.like_banner .grid--layout-3 .grid__itemss:nth-child(13) { grid-area: 20 / 24 / 26 / 28; background-image: url(../img/banner/13.jpg); }
main.like_banner .grid--layout-3 .grid__itemss--name { grid-area: 5 / 12 / 30 / 25; }
main.like_banner .grid--layout-3 .grid__itemss--title { grid-area: 1 / 27 / 11 / 29; }
main.like_banner .grid--layout-3 .grid__itemss--text { grid-area: 19 / 5 / 30 / 10; text-align: right;}
main.like_banner .grid--layout-3 .grid__itemss--nav-prev { grid-area: 14 / 5 / 19 / 10; }
main.like_banner .grid--layout-3 .grid__itemss--nav-next { grid-area: 6 / 18 / 11 / 23; }

main.like_banner .grid--layout-3 .grid__itemss--name img {
	opacity: 0.9;
	width: 19vw;
}

main.like_banner div.grid__itemss:not(.grid__itemss--nav)::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #0013ff;
	mix-blend-mode: exclusion;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
}

main.like_banner .banner_grid:not(.grid--animating) div.grid__itemss:not(.grid__itemss--nav):hover::after {
	opacity: 1;
}

@media screen and (max-width: 60em) {
	.message {
		display: block;
	}
	.frame {
		display: block;
		height: auto;
		position: relative;
		text-align: center;
	}
	.demo {
		margin: 0 0.5em;
	}
	main.like_banner .banner_grid {
		height: auto;
		top: auto !important;
		width: 100%;
		left: auto !important;
		padding: 0 2em;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		grid-auto-rows: auto !important;
		grid-auto-columns: auto !important;
		grid-gap: 2vw;
		margin: 0 0 5em;
	}

	main.like_banner .grid__itemss {
		min-height: 70px;
		grid-area: auto !important;
	}

	main.like_banner .grid__itemss br {
		content: '';
		display: none;
	}

	main.like_banner .grid__itemss--name,
	main.like_banner .grid__itemss--title,
	main.like_banner .grid__itemss--text {
		grid-column: 1 / -1 !important;
		justify-content: flex-start;
		min-height: 0;
		padding: 1vh 0;
		text-align: left !important;
	}	

	main.like_banner .grid__itemss--name {
		grid-row: 1 / -1 !important;
	}

	main.like_banner .banner_grid .grid__itemss--title {
		-webkit-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
	}

	main.like_banner .grid--layout-1 .grid__itemss:nth-child(12) {
		display: none;
	}

	main.like_banner .grid--layout-1 .grid__itemss--name img,
	main.like_banner .grid--layout-2 .grid__itemss--name img,
	main.like_banner .grid--layout-3 .grid__itemss--name img {
		opacity: 1;
		width: 14vw;
	}
}



.revealer {
	position: absolute;
	width: calc(100% + 4px);
	height: calc(100% + 4px); /* Firefox and Safari gap hack */
	background: #fff;
	top: -2px;
	left: -2px;
	opacity: 0;
	pointer-events: none;
}

/* Direction control */
.revealer--right {
	transform-origin: 100% 50%;
}

.revealer--left {
	transform-origin: 0% 50%;
}

.revealer--top {
	transform-origin: 50% 0%;
}

.revealer--bottom {
	transform-origin: 50% 100%;
}

.revealer--showX,
.revealer--hideX,
.revealer--showY,
.revealer--hideY,
.revealer--visible {
	opacity: 1;
}

/* Hide from left/right */
.revealer--hideX {
	animation: hideX 0.8s cubic-bezier(0.7,0,0.3,1) forwards;
}

@keyframes hideX {
	from {
		transform: scale3d(0,1,1);
	}
	to {
		transform: scale3d(1,1,1);
	}
}

/* Show from left/right */
.revealer--showX {
	animation: showX 0.8s cubic-bezier(0.7,0,0.3,1) forwards;
}

@keyframes showX {
	to {
		opacity: 1;
		transform: scale3d(0,1,1);
	}
}

/* Hide from top/bottom */
.revealer--hideY {
	animation: hideY 0.8s cubic-bezier(0.7,0,0.3,1) forwards;
}

@keyframes hideY {
	from {
		transform: scale3d(1,0,1);
	}
	to {
		transform: scale3d(1,1,1);
	}
}

/* Show from top/bottom */
.revealer--showY {
	animation: showY 0.8s cubic-bezier(0.7,0,0.3,1) forwards;
}

@keyframes showY {
	to {
		opacity: 1;
		transform: scale3d(1,0,1);
	}
}