* {

}
body {

}
#container {

}
@media () {
#container {
   
}
}
#container .item {
    cursor: pointer;

    position: relative;

    z-index: 0;
}
@media () {
#container .item {
    
}
}
#container .item .content {

}
#container .item .content h2 {

}
#container .item .content::after {

}
#container .item .previews {
    bottom: 0;
    left: 0;
    position: relative;
    z-index: -1;
}
#container .item .previews:nth-child(2) .preview-image {
    right: 0;
}
#container .item .previews .preview-image {
    
    bottom: 10px;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
    height: auto;
    left: 0;
    overflow: hidden;
    position: absolute;
    transition: all 0.2s cubic-bezier(0.28, 0.05, 0.65, 0.97) 0s;
    width: auto;
}
#container .item .previews .preview-image img {
    width: 140%;
}
#container .item:hover {
    z-index: 5;
}
#container .item:hover .content {
    animation: 0.4s ease 0.4s normal none 1 running shake;
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #dddddd;
    
    transform: rotate(0deg) scale(1.4);
    transition: all 0.3s cubic-bezier(0.28, 0.05, 0.65, 0.97) 0s;
	padding: 10px;
}
#container .item:hover .content::after {
    transition: all 0.3s cubic-bezier(0.28, 0.05, 0.65, 0.97) 0s;
    width: 0;
}
#container .item:hover .content h2 {
    color: #e8e8ee;
    transition: all 0.3s cubic-bezier(0.28, 0.05, 0.65, 0.97) 0s;
}
#container .item:hover .previews .preview-image {
    box-shadow: -8px 5px 30px 0 rgba(0, 0, 0, 0.2);
    transition: all 0.2s cubic-bezier(0.28, 0.05, 0.65, 0.97) 0s;
}

/*-----------------------------------------------------------------------*/

#container .item:hover .previews .preview-image:nth-child(1), #container .item:hover .previews .preview-image.last:nth-child(1):hover  {
    transform: rotate(-3deg) translate(-150px, -100px);
    transition-delay: 0.4s;
	z-index: 1;
}
#container .item:hover .previews .preview-image:nth-child(6), #container .item:hover .previews .preview-image.last:nth-child(6):hover  {
    transform: rotate(-4deg) translate(-160px, -90px);
    transition-delay: 0.4s;
	z-index: 1;
}
#container .item:hover .previews .preview-image:nth-child(11), #container .item:hover .previews .preview-image.last:nth-child(11):hover  {
    transform: rotate(-5deg) translate(-170px, -80px);
    transition-delay: 0.4s;
	z-index: 1;
}
#container .item:hover .previews .preview-image:nth-child(16), #container .item:hover .previews .preview-image.last:nth-child(16):hover  {
    transform: rotate(-6deg) translate(-180px, -70px);
    transition-delay: 0.4s;
	z-index: 1;
}
#container .item:hover .previews .preview-image:nth-child(21), #container .item:hover .previews .preview-image.last:nth-child(21):hover  {
    transform: rotate(-7deg) translate(-190px, -60px);
    transition-delay: 0.4s;
	z-index: 1;
}
#container .item:hover .previews .preview-image:nth-child(26), #container .item:hover .previews .preview-image.last:nth-child(26):hover  {
    transform: rotate(-8deg) translate(-200px, -50px);
    transition-delay: 0.4s;
	z-index: 1;
}
#container .item:hover .previews .preview-image:nth-child(31), #container .item:hover .previews .preview-image.last:nth-child(31):hover  {
    transform: rotate(-9deg) translate(-210px, -40px);
    transition-delay: 0.4s;
	z-index: 1;
}
#container .item:hover .previews .preview-image:nth-child(1):hover {
    transform: rotate(-3deg) translate(-150px, -130px);
    transition-delay: 0.4s;
}
#container .item:hover .previews .preview-image:nth-child(6):hover {
    transform: rotate(-3deg) translate(-160px, -120px);
    transition-delay: 0.4s;
}
#container .item:hover .previews .preview-image:nth-child(11):hover {
    transform: rotate(-3deg) translate(-170px, -110px);
    transition-delay: 0.4s;
}
#container .item:hover .previews .preview-image:nth-child(16):hover {
    transform: rotate(-3deg) translate(-180px, -100px);
    transition-delay: 0.4s;
}
#container .item:hover .previews .preview-image:nth-child(21):hover {
    transform: rotate(-3deg) translate(-190px, -90px);
    transition-delay: 0.4s;
}
#container .item:hover .previews .preview-image:nth-child(26):hover {
    transform: rotate(-3deg) translate(-200px, -80px);
    transition-delay: 0.4s;
}
#container .item:hover .previews .preview-image:nth-child(31):hover {
    transform: rotate(-3deg) translate(-210px, -70px);
    transition-delay: 0.4s;
}

/*-----------------------------------------------------------------------*/

#container .item:hover .previews .preview-image:nth-child(2), #container .item:hover .previews .preview-image.last:nth-child(2):hover  {
    transform: rotate(-6deg) translate(-120px, 0px);
    transition-delay: 0.45s;
	z-index: 2;
}
#container .item:hover .previews .preview-image:nth-child(7), #container .item:hover .previews .preview-image.last:nth-child(7):hover  {
    transform: rotate(-7deg) translate(-130px, 10px);
    transition-delay: 0.45s;
	z-index: 2;
}
#container .item:hover .previews .preview-image:nth-child(12), #container .item:hover .previews .preview-image.last:nth-child(12):hover  {
    transform: rotate(-8deg) translate(-140px, 20px);
    transition-delay: 0.45s;
	z-index: 2;
}
#container .item:hover .previews .preview-image:nth-child(17), #container .item:hover .previews .preview-image.last:nth-child(17):hover  {
    transform: rotate(-9deg) translate(-150px, 30px);
    transition-delay: 0.45s;
	z-index: 2;
}
#container .item:hover .previews .preview-image:nth-child(22), #container .item:hover .previews .preview-image.last:nth-child(22):hover  {
    transform: rotate(-10deg) translate(-160px, 40px);
    transition-delay: 0.45s;
	z-index: 2;
}
#container .item:hover .previews .preview-image:nth-child(27), #container .item:hover .previews .preview-image.last:nth-child(27):hover  {
    transform: rotate(-11deg) translate(-170px, 50px);
    transition-delay: 0.45s;
	z-index: 2;
}
#container .item:hover .previews .preview-image:nth-child(32), #container .item:hover .previews .preview-image.last:nth-child(32):hover  {
    transform: rotate(-12deg) translate(-180px, 60px);
    transition-delay: 0.45s;
	z-index: 2;
}
#container .item:hover .previews .preview-image:nth-child(2):hover {
    transform: rotate(-6deg) translate(-120px, -30px);
    transition-delay: 0.45s;

}
#container .item:hover .previews .preview-image:nth-child(7):hover {
    transform: rotate(-7deg) translate(-130px, -20px);
    transition-delay: 0.45s;
	
}
#container .item:hover .previews .preview-image:nth-child(12):hover {
    transform: rotate(-8deg) translate(-140px, -10px);
    transition-delay: 0.45s;
	
}
#container .item:hover .previews .preview-image:nth-child(17):hover {
    transform: rotate(-9deg) translate(-150px, 0px);
    transition-delay: 0.45s;

}
#container .item:hover .previews .preview-image:nth-child(22):hover {
    transform: rotate(-10deg) translate(-160px, 10px);
    transition-delay: 0.45s;

}
#container .item:hover .previews .preview-image:nth-child(27):hover {
    transform: rotate(-11deg) translate(-170px, 20px);
    transition-delay: 0.45s;
	
}
#container .item:hover .previews .preview-image:nth-child(32):hover {
    transform: rotate(-12deg) translate(-180px, 30px);
    transition-delay: 0.45s;

}

/*-----------------------------------------------------------------------*/

#container .item:hover .previews .preview-image:nth-child(3), #container .item:hover .previews .preview-image.last:nth-child(3):hover  {
    transform: rotate(3deg) translate(-40px, 100px);
    transition-delay: 0.55s;
	z-index: 3;
}
#container .item:hover .previews .preview-image:nth-child(8), #container .item:hover .previews .preview-image.last:nth-child(8):hover  {
    transform: rotate(2deg) translate(-30px, 110px);
    transition-delay: 0.55s;
	z-index: 3;
}
#container .item:hover .previews .preview-image:nth-child(13), #container .item:hover .previews .preview-image.last:nth-child(13):hover  {
    transform: rotate(1deg) translate(-20px, 120px);
    transition-delay: 0.55s;
	z-index: 3;
}
#container .item:hover .previews .preview-image:nth-child(18), #container .item:hover .previews .preview-image.last:nth-child(18):hover  {
    transform: rotate(0deg) translate(-10px, 130px);
    transition-delay: 0.55s;
	z-index: 3;
}
#container .item:hover .previews .preview-image:nth-child(23), #container .item:hover .previews .preview-image.last:nth-child(23):hover  {
    transform: rotate(-1deg) translate(-0px, 140px);
    transition-delay: 0.55s;
	z-index: 3;
}
#container .item:hover .previews .preview-image:nth-child(28), #container .item:hover .previews .preview-image.last:nth-child(28):hover  {
    transform: rotate(-2deg) translate(10px, 150px);
    transition-delay: 0.55s;
	z-index: 3;
}
#container .item:hover .previews .preview-image:nth-child(33), #container .item:hover .previews .preview-image.last:nth-child(33):hover  {
    transform: rotate(-3deg) translate(20px, 160px);
    transition-delay: 0.55s;
	z-index: 3;
}
#container .item:hover .previews .preview-image:nth-child(3):hover {
    transform: rotate(3deg) translate(-110px, 100px);
    transition-delay: 0.55s;
}
#container .item:hover .previews .preview-image:nth-child(8):hover {
    transform: rotate(2deg) translate(-100px, 110px);
    transition-delay: 0.55s;
}
#container .item:hover .previews .preview-image:nth-child(13):hover {
    transform: rotate(1deg) translate(-90px, 120px);
    transition-delay: 0.55s;
}
#container .item:hover .previews .preview-image:nth-child(18):hover {
    transform: rotate(0deg) translate(-80px, 130px);
    transition-delay: 0.55s;
}
#container .item:hover .previews .preview-image:nth-child(23):hover {
    transform: rotate(-1deg) translate(-70px, 140px);
    transition-delay: 0.55s;
}
#container .item:hover .previews .preview-image:nth-child(28):hover {
    transform: rotate(-2deg) translate(-60px, 150px);
    transition-delay: 0.55s;
}
#container .item:hover .previews .preview-image:nth-child(33):hover {
    transform: rotate(-3deg) translate(-50px, 160px);
    transition-delay: 0.55s;
}

/*-----------------------------------------------------------------------*/

#container .item:hover .previews .preview-image:nth-child(4), #container .item:hover .previews .preview-image.last:nth-child(4):hover  {
    transform: rotate(-7deg) translate(130px, 70px);
    transition-delay: 0.5s;
	z-index: 4;
}
#container .item:hover .previews .preview-image:nth-child(9), #container .item:hover .previews .preview-image.last:nth-child(9):hover  {
    transform: rotate(-6deg) translate(140px, 80px);
    transition-delay: 0.5s;
	z-index: 4;
}
#container .item:hover .previews .preview-image:nth-child(14), #container .item:hover .previews .preview-image.last:nth-child(14):hover  {
    transform: rotate(-5deg) translate(150px, 90px);
    transition-delay: 0.5s;
	z-index: 4;
}
#container .item:hover .previews .preview-image:nth-child(19), #container .item:hover .previews .preview-image.last:nth-child(19):hover  {
    transform: rotate(-4deg) translate(160px, 100px);
    transition-delay: 0.5s;
	z-index: 4;
}
#container .item:hover .previews .preview-image:nth-child(24), #container .item:hover .previews .preview-image.last:nth-child(24):hover  {
    transform: rotate(-3deg) translate(170px, 110px);
    transition-delay: 0.5s;
	z-index: 4;
}
#container .item:hover .previews .preview-image:nth-child(29), #container .item:hover .previews .preview-image.last:nth-child(29):hover  {
    transform: rotate(-2deg) translate(180px, 120px);
    transition-delay: 0.5s;
	z-index: 4;
}
#container .item:hover .previews .preview-image:nth-child(34), #container .item:hover .previews .preview-image.last:nth-child(34):hover  {
    transform: rotate(-1deg) translate(190px, 130px);
    transition-delay: 0.5s;
	z-index: 4;
}
#container .item:hover .previews .preview-image:nth-child(4):hover {
    transform: rotate(-7deg) translate(130px, 40px);
    transition-delay: 0.5s;
}
#container .item:hover .previews .preview-image:nth-child(9):hover {
    transform: rotate(-6deg) translate(140px, 50px);
    transition-delay: 0.5s;
}
#container .item:hover .previews .preview-image:nth-child(14):hover {
    transform: rotate(-5deg) translate(150px, 60px);
    transition-delay: 0.5s;
}
#container .item:hover .previews .preview-image:nth-child(19):hover {
    transform: rotate(-4deg) translate(160px, 70px);
    transition-delay: 0.5s;
}
#container .item:hover .previews .preview-image:nth-child(24):hover {
    transform: rotate(-3deg) translate(170px, 80px);
    transition-delay: 0.5s;
}
#container .item:hover .previews .preview-image:nth-child(29):hover {
    transform: rotate(-2deg) translate(180px, 90px);
    transition-delay: 0.5s;
}
#container .item:hover .previews .preview-image:nth-child(34):hover {
    transform: rotate(-1deg) translate(190px, 100px);
    transition-delay: 0.5s;
}

/*-----------------------------------------------------------------------*/

#container .item:hover .previews .preview-image:nth-child(5), #container .item:hover .previews .preview-image.last:nth-child(5):hover {
    transform: rotate(-3deg) translate(165px, -40px);
    transition-delay: 0.6s;
}
#container .item:hover .previews .preview-image:nth-child(10), #container .item:hover .previews .preview-image.last:nth-child(10):hover {
    transform: rotate(-2deg) translate(175px, -30px);
    transition-delay: 0.6s;
}
#container .item:hover .previews .preview-image:nth-child(15), #container .item:hover .previews .preview-image.last:nth-child(15):hover {
    transform: rotate(-1deg) translate(185px, -20px);
    transition-delay: 0.6s;
}
#container .item:hover .previews .preview-image:nth-child(20), #container .item:hover .previews .preview-image.last:nth-child(20):hover {
    transform: rotate(-0deg) translate(195px, -10px);
    transition-delay: 0.6s;
}
#container .item:hover .previews .preview-image:nth-child(25), #container .item:hover .previews .preview-image.last:nth-child(25):hover {
    transform: rotate(1deg) translate(205px, -0px);
    transition-delay: 0.6s;
}
#container .item:hover .previews .preview-image:nth-child(30), #container .item:hover .previews .preview-image.last:nth-child(30):hover {
    transform: rotate(2deg) translate(215px, 10px);
    transition-delay: 0.6s;
}
#container .item:hover .previews .preview-image:nth-child(35), #container .item:hover .previews .preview-image.last:nth-child(35):hover {
    transform: rotate(3deg) translate(225px, 20px);
    transition-delay: 0.6s;
}
#container .item:hover .previews .preview-image:nth-child(5):hover {
    transform: rotate(-3deg) translate(165px, -70px);
    transition-delay: 0.6s;
}
#container .item:hover .previews .preview-image:nth-child(10):hover {
    transform: rotate(-2deg) translate(175px, -60px);
    transition-delay: 0.6s;
}
#container .item:hover .previews .preview-image:nth-child(15):hover {
    transform: rotate(-1deg) translate(185px, -50px);
    transition-delay: 0.6s;
}
#container .item:hover .previews .preview-image:nth-child(20):hover {
    transform: rotate(-0deg) translate(195px, -40px);
    transition-delay: 0.6s;
}
#container .item:hover .previews .preview-image:nth-child(25):hover {
    transform: rotate(1deg) translate(205px, -30px);
    transition-delay: 0.6s;
}
#container .item:hover .previews .preview-image:nth-child(30):hover {
    transform: rotate(2deg) translate(215px, -20px);
    transition-delay: 0.6s;
}
#container .item:hover .previews .preview-image:nth-child(35):hover {
    transform: rotate(3deg) translate(225px, -10px);
    transition-delay: 0.6s;
}

/*-----------------------------------------------------------------------*/



/*-----------------------------------------------------------------------*/

@keyframes shake {
0% {
    transform: rotate(3deg) scale(1.4);
}
20% {
    transform: rotate(-3deg) scale(1.4);
}
40% {
    transform: rotate(3deg) scale(1.4);
}
60% {
    transform: rotate(-3deg) scale(1.4);
}
80% {
    transform: rotate(3deg) scale(1.4);
}
100% {
    transform: rotate(0deg) scale(1.4);
}
}