@charset "UTF-8";

@media screen and (min-width: 900px)
{
	#gallery
	{
		width: calc(100% - 10rem);
		margin-left: 10rem;
		position: relative;
		box-sizing:border-box;
	}
}

#gallery
{
/*	max-width: calc(900px + 15rem);*/
	min-height: 100vh;
}

/**************************************************************************/
/****************************** MainContents ******************************/
/**************************************************************************/

.linkBlock
{
	text-decoration: none;
	display: none;
	position: absolute;
	box-sizing:border-box;
	
	width: 250px;
	color: black;
	
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	
	-moz-transition: left .3s ease, top .3s ease, -moz-opacity 0s ease;
	-ms-transition: left .3s ease, top .3s ease, opacity 0s ease;
	-o-transition:  left .3s ease, top .3s ease, opacity 0s ease;
	transition:  left .3s ease, top .3s ease, opacity 0s ease;
}

.linkBlock.noimage
{
	padding-top: 3em;
	padding-bottom: 3em;
}

.linkBlock._w
{
/*	width: 610px;*/
}
.linkBlock .sumnail
{
	cursor: pointer;
	position:relative;
	overflow: hidden;
	box-sizing:border-box;
	
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;

	-webkit-align-items: center;
	align-items: center;
	
	-webkit-justify-content: center;
	justify-content: center;
	
	background-color: rgb(0, 0, 0);
}

.linkBlock .sumnail > div.noImg
{
	background-image: url(../img/logo.svg);
}

.linkBlock .sumnail > div
{
	position: relaitve;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}
.linkBlock .sumnail > div:before
{
	content:"";
	display:block;
	position:relative;
	padding-top: 60%;
}

.linkBlock .sumnail > div.noSum
{
	background-color: rgba(255, 255, 255, .7);
	background-size: 50% 50%;
}
.svg .linkBlock .sumnail > div.noSum{background-image: url(../_img/logo.svg);}
.no-svg .linkBlock .sumnail > div.noSum{background-image: url(../_img/logo.png);}

.linkBlock:hover .sumnail > div
{
/*	filter:alpha(opacity=50);
	-moz-opacity: .5;
	opacity: .5;*/
	
	transform: scale(1.1);
}

/*//////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA SCREEN /////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/