@charset "utf-8";
/* CSS Document */

.pics {
    margin:auto;
    margin:0px auto;
    position:relative;
    height:500px;
    width:800px;
}
.pics a {
    background:#fff;
    display:inline;
    float:left;
    width:auto;
    padding:10px 10px 30px 10px;
    text-align:center;
    text-decoration:none;
    color:#333;
    font-size:28px;
    font-weight:bold;
    -webkit-box-shadow:0px 0px 10px rgba(0,0,0,1);
    -moz-box-shadow:0px 0px 10px rgba(0,0,0,1);
    box-shadow:0px 0px 10px rgba(0,0,0,1);
    -webkit-transition:all .30s;
    -moz-transition:all .30s;
    -o-transition:all .30s;
    transition:all .30s;
    position:absolute;
}
.pics img {
    display:block;
    padding-bottom:20px;
}
.pics a:hover {
    z-index:100;
}
.pics a:after {
    content:attr(title);
	font-size:20px;
	color:#C10D4D;
}

/* Pictures placement, scaling and rotation */

.pics li:nth-child(1n) a {
    -webkit-transform:rotate(30deg) scale(0.7,0.7);
    -moz-transform:rotate(30deg) scale(0.7,0.7);
    transform:rotate(30deg) scale(0.7,0.7);
    top:0%;
    left:60%;
}
.pics li:nth-child(2n) a {
    -webkit-transform:rotate(-30deg) scale(0.7,0.7);
    -moz-transform:rotate(-30deg) scale(0.7,0.7);
    transform:rotate(-30deg) scale(0.7,0.7);
    top:40%;
    left:80%;
}
.pics li:nth-child(3n) a {
    -webkit-transform:rotate(40deg) scale(0.7,0.7);
    -moz-transform:rotate(40deg) scale(0.7,0.7);
    transform:rotate(40deg) scale(0.7,0.7);
    top:50%;
    left:-10%;
}
.pics li:nth-child(4n) a {
    -webkit-transform:rotate(-30deg) scale(0.7,0.7);
    -moz-transform:rotate(-30deg) scale(0.7,0.7);
    transform:rotate(-30deg) scale(0.7,0.7);
    top:0%;
    left:-10%;
}
.pics li:nth-child(5n) a {
    -webkit-transform:rotate(-20deg) scale(0.8,0.8);
    -moz-transform:rotate(-20deg) scale(0.8,0.8);
    transform:rotate(-20deg) scale(0.8,0.8);
    top:50%;
    left:20%;
    z-index:3;
}
.pics li:nth-child(6n) a {
    -webkit-transform:rotate(30deg) scale(0.7,0.7);
    -moz-transform:rotate(30deg) scale(0.7,0.7);
    transform:rotate(30deg) scale(0.7,0.7);
    top:60%;
    left:55%;
}
.pics li:nth-child(7n) a {
    -webkit-transform:rotate(10deg) scale(0.7,0.7);
    -moz-transform:rotate(10deg) scale(0.7,0.7);
    transform:rotate(10deg) scale(0.7,0.7);
    top:0%;
    left:25%;
}

/* Pictures rotation and scaling on hover */

.pics li:nth-child(n) a:hover {
    -webkit-transform:rotate(0deg) scale(1,1);
    -moz-transform:rotate(0deg) scale(1,1);
    transform:rotate(0deg) scale(1,1);
	top:11%;
}
@media only screen and (min-width: 960px) and (max-width: 1199px) and (orientation:landscape){
	.pics li:nth-child(n) a:hover {    
		top:11%;
		left:10%;
	}
	/* Pictures placement, scaling and rotation */

	.pics li:nth-child(1n) a {	    
    	top:10%;
	    left:50%;
	}
	.pics li:nth-child(2n) a {    	
	    top:40%;
	    left:70%;
	}
	.pics li:nth-child(3n) a {
	    top:40%;
	    left:-20%;
	}
	.pics li:nth-child(4n) a {
	    top:0%;
    	left:0%;
	}
	.pics li:nth-child(5n) a { 
    	left:10%;
	    z-index:3;
	}
	.pics li:nth-child(6n) a {
    	top:60%;
	    left:45%;
	}
	.pics li:nth-child(7n) a {
	    top:0%;
	    left:15%;
	}
}