.diamonds {
    text-align: center;
    overflow: visible;
    white-space: nowrap;
    display: inline-block;
}
#flickrItems{
	padding-bottom: 100px;	
}
.diamond-row-wrap {
    text-align: center;
    position: relative;
    float: left;
    clear: both;
}
.diamond-row-upper, .diamond-row-lower {
    overflow: visible;
    clear: both;
    width: 100%;
}
.diamond-row-lower {
    position: absolute;
    bottom: 0;
}
    .diamond-row-lower .diamond-box {
        margin-left: 64.644660941%; /* 1 - 1 / sqrt(2) / 2 */
        margin-top: 64.644660941%;
    }

.diamond-box-wrap {
    float: left;
    width: 250px; /* Size of diamonds */
    height: 250px;
}

.diamond-box {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;

    overflow: hidden;
    
    position: relative;
    z-index: 1;
    
    width: 70.710678118%; /* x = sqrt(x^2 / 2) = 1 / sqrt(2) = 0.70710678118 */
    height: 70.710678118%;
    margin: 14.644660941%;
    
    border: 1px solid transparent;
}

.diamond-box-inner {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);

    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    
    width: 141.421356237%; /* sqrt(2) */
    height: 141.421356237%;
    margin: -20.7106781185% 0 0 -20.7106781185%; /* (1 - sqrt(2)) / 2 */
}
/* CSS for demo */
body, html {
	padding: 0;
	margin: 0;
	font-family: Arial, sans-serif;
	background-color: #e0e0e0;
}
.diamond-box-wrap a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(150, 150, 150, 0.7);
    line-height: 50px;
}
.diamond-box-wrap a:hover {
	color: rgb(150, 150, 250);
	border-bottom: 1px solid rgba(100, 100, 100, 1);
}

.item {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 40% 0;

	background-color: #666;
    color: white;
    background-position: center center;
    background-size: cover;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
    cursor: pointer;    
}
.item .ttl {
    display: none;
    position: absolute;
    z-index: 2000;
    left: 0;
    /* transform: translateX(-50%); */
    /* -webkit-transform: translateX(-50%); */
    -moz-transform: translateX(-50%);
    /* top: -20%; */
    /* transition: top 0.5s ease; */
    /* -webkit-transition: top 0.5s ease; */
    -moz-transition: top 1s ease;
    font-size: 12px;
    width: 50%;
    margin: auto;
    top: 45% !important;
    right: 0;
    width: 100%;
}

.item:hover > .ttl{
    
    display:block; 
}
	.item:hover:after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.7);
	}
.diamondswrap {
	text-align: center;
	padding: 50px 20px 100px 20px;
}

.controls {
	background-color: #272822;
	padding: 20px;
}
	.code {
		line-height: 1.5em;
		background-color: #272822;
		color: #F8F8F2;
	}
		.code * {
			font-family: monospace;
		}
	/* HTML */
	.code .tag {

	}
	.code .tagname {
		color: #F92672;
	}
	.code .attrname {
		color: #A6E22E; /* CSS propname: #66D9EF;*/
	}
	.code .attrval {
		color: #E6DB74;
	}

	/* JS */
	.code .int {
		color: #AE81FF;
	}
	.code .bool {
		color: #AE81FF;
	}
	.code .string {
		color: #E6DB74;
	}
	.code .var {
		color: #F92672;
	}
	.code .comment {
		color: #75715E;
	}
	.code input, .code select {
		background-color: transparent;
		border: 1px dotted #555;
		padding: 2px 5px;
		text-align: center;
	}
	.code input {
		width: 50px;
	}
	.code select {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}
.diamond-box-wrap img{
	position: absolute;
	top:0;
	left:0;	
	width: 100%;
}
.link{
	width: 50%;
	margin: 30px auto;	
}
.link-gallery a, .link p{
	text-decoration: none;
	color: #732d2c;
	overflow: hidden;
}
.link-gallery a{margin:  0 10px;}
.link-gallery{padding: 10px 5px 0;}
.link{overflow: hidden;}
.item{color: #fff !important;}
.active_gal{color: #333 !important;}
@media only screen and (max-width: 600px) {
	.diamonds{
		min-width: 300px !important;	
	}
	.diamond-box-wrap {
		width: 140px !important;
		height: 140px !important;
	}
    .diamond-box-wrap a{
        line-height: 30px;
    }
	.link{width: 70%;}
    .item .ttl{
      top:auto; 
     }
}
@media only screen and (max-width: 480px) {
	.link{width: 100%;}
}