/*  about | tomozy | icon */

.about,
.tomozy {
	display: none;
	opacity: 0;
}

.about {	
	flex-flow: column wrap;
	position: absolute;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	-ms-overflow-style: none;/* Hide scrollbar for IE and Edge */
}

.about::-webkit-scrollbar {
  display: none;/* Hide scrollbar for Chrome, Safari and Opera */
}

.tomozy {	
	cursor: pointer;
	position: fixed;
	z-index: 10;
	width: 5em;
	height: 5em;
}

.tl.icon,
.tr.icon,
.bl.icon,
.br.icon {
	position: absolute;
	width: 50%;
	height: 50%;
	overflow: hidden;
}

.tl.icon {
	bottom: 50%;
	right: 50%;
	-webkit-animation: tlstrobe 2s infinite;
	-moz-animation: tlstrobe 2s infinite;
	-ms-animation: tlstrobe 2s infinite;
	-o-animation: tlstrobe 2s infinite;
	animation: tlstrobe 2s infinite;
}	  

.tr.icon {
	bottom: 50%;
	left: 50%;
	-webkit-animation: trstrobe 2s infinite;
	-moz-animation: trstrobe 2s infinite;
	-ms-animation: trstrobe 2s infinite;
	-o-animation: trstrobe 2s infinite;
	animation: trstrobe 2s infinite;
}

.bl.icon {
	top: 50%;
	right: 50%;
	-webkit-animation: blstrobe 2s infinite;
	-moz-animation: blstrobe 2s infinite;
	-ms-animation: blstrobe 2s infinite;
	-o-animation: blstrobe 2s infinite;
	animation: blstrobe 2s infinite;
}

.br.icon {
	top: 50%;
	left: 50%;
	-webkit-animation: brstrobe 2s infinite;
	-moz-animation: brstrobe 2s infinite;
	-ms-animation: brstrobe 2s infinite;
	-o-animation: brstrobe 2s infinite;
	animation: brstrobe 2s infinite;
}

@-webkit-keyframes tlstrobe {
	0%   { background-color: rgba(7,7,7,1); }
	20%  { background-color: rgba(15,15,15,1); }
	100% { background-color: rgba(7,7,7,1); }
}

@-webkit-keyframes trstrobe {
	0%   { background-color: rgba(15,15,15,1); }
	40%  { background-color: rgba(22,22,22,1); }
	100% { background-color: rgba(15,15,15,1); }
}

@-webkit-keyframes blstrobe {
	0%   { background-color: rgba(22,22,22,1); }
	60%  { background-color: rgba(30,30,30,1); }
	100% { background-color: rgba(22,22,22,1); }
}

@-webkit-keyframes brstrobe {
	0%   { background-color: rgba(30,30,30,1); }
	80%  { background-color: rgba(38,38,38,1); }
	100% { background-color: rgba(30,30,30,1); }
}

@-moz-keyframes tlstrobe {
	0%   { background-color: rgba(7,7,7,1); }
	20%  { background-color: rgba(15,15,15,1); }
	100% { background-color: rgba(7,7,7,1); }
}

@-moz-keyframes trstrobe {
	0%   { background-color: rgba(15,15,15,1); }
	40%  { background-color: rgba(22,22,22,1); }
	100% { background-color: rgba(15,15,15,1); }
}

@-moz-keyframes blstrobe {
	0%		{ background-color: rgba(22,22,22,1); }
	60%		{ background-color: rgba(30,30,30,1); }
	100%	{ background-color: rgba(22,22,22,1); }
}

@-moz-keyframes brstrobe {
	0%   { background-color: rgba(30,30,30,1); }
	80%  { background-color: rgba(38,38,38,1); }
	100% { background-color: rgba(30,30,30,1);	}
}

@-o-keyframes tlstrobe {
	0%		{ background-color: rgba(7,7,7,1); }
	20%		{ background-color: rgba(15,15,15,1); }
	100%	{ background-color: rgba(7,7,7,1); }
}

@-o-keyframes trstrobe {
	0%   { background-color: rgba(15,15,15,1); }
	40%  { background-color: rgba(22,22,22,1); }
	100% { background-color: rgba(15,15,15,1); }
}

@-o-keyframes blstrobe {
	0%   { background-color: rgba(22,22,22,1); }
	60%  { background-color: rgba(30,30,30,1);	}
	100% { background-color: rgba(22,22,22,1); }
}

@-o-keyframes brstrobe {
	0%   { background-color: rgba(30,30,30,1);	}
	80%  { background-color: rgba(38,38,38,1);	}
	100% { background-color: rgba(30,30,30,1);	}
}

@keyframes tlstrobe {
	0%   { background-color: rgba(7,7,7,1); }
	20%  { background-color: rgba(15,15,15,1); }
	100% { background-color: rgba(7,7,7,1); }
}

@keyframes trstrobe {
	0%   { background-color: rgba(15,15,15,1); }
	40%  { background-color: rgba(22,22,22,1); }
	100% { background-color: rgba(15,15,15,1); }
}

@keyframes blstrobe {
	0%   { background-color: rgba(22,22,22,1); }
	60%  { background-color: rgba(30,30,30,1);	}
	100% { background-color: rgba(22,22,22,1); }
}

@keyframes brstrobe {
	0%   { background-color: rgba(30,30,30,1);	}
	80%  { background-color: rgba(38,38,38,1);	}
	100% { background-color: rgba(30,30,30,1);	}
}

/* item */

.item-1,
.item-2,
.item-3 {
	height: 30%;
	padding: 5%;
}

.item-1 {
	width: 37%;
}

.item-2 {
	width: 21%;
}

.item-3 {
	width: 11%;
}

.item-1 > .intro {
	text-align: justify;
}

.item-2 > .intro, .line {
	clear: both;
}

.item-3 > .intro {
	white-space: nowrap;
}

/* works | thumbs */

.works,
.thumbs {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	-ms-overflow-style: none;/* Hide scrollbar for IE and Edge */
}

.works {
	z-index: 3;
}

.thumbs {	
	opacity: 0;
	z-index: 1;
}

.works::-webkit-scrollbar,
.thumbs::-webkit-scrollbar {
  display: none;/* Hide scrollbar for Chrome, Safari and Opera */
}

/* work | thumb */

.work,
.thumb {
	position: relative;
	float: left;
	overflow: hidden;	
}

.work {
	display: none;
}

.thumb {
	cursor: pointer;
}

.tr.quad > .works > .work,
.tr.quad > .thumbs > .thumb,
.bl.quad > .works > .work,
.bl.quad > .thumbs > .thumb,
.br.quad > .works > .work,
.br.quad > .thumbs > .thumb {
	width: 50%;
}

/* img | svg */

img,
.svg,
.img {
	display: block;
	width: 100%;
	overflow: hidden;
}

.svg {
	opacity: 0;
	position: absolute;
	z-index: 2;
	width: 0%;
	top: 50%;
	left: 50%;
	margin: -50%;
	padding: 50%;	
	-webkit-transition: all 0.8s cubic-bezier(0.5,0,0,1);
	-moz-transition: all 0.8s cubic-bezier(0.5,0,0,1);
	-ms-transition: all 0.8s cubic-bezier(0.5,0,0,1);
	-o-transition: all 0.8s cubic-bezier(0.5,0,0,1);
	transition: all 0.8s cubic-bezier(0.5,0,0,1);
}

.work > .svg {
	opacity: 1;
	width: 100%;
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;	
}

.thumb:hover > .svg {
	opacity: 1;
	width: 100%;
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;	
}

/* @media */

@media only screen and (max-width: 1200px){

/* about | works | thumbs */
	
	.about {
		flex-flow: row wrap;
	}
	
	.tomozy {	
		width: 3em;
		height: 3em;
	}

/* item */

	.item-1,
	.item-2,
	.item-3 {
		width: 80%;
		height: auto;
		padding: 10% 10% 0px;
	}
	
/* work | thumb */
	
	.tr.quad > .works > .work,
	.tr.quad > .thumbs > .thumb,
	.bl.quad > .works > .work,
	.bl.quad > .thumbs > .thumb,
	.br.quad > .works > .work,
	.br.quad > .thumbs > .thumb {
		width: 100%;
	}

}