﻿.collage-container {
    width: 100%;
    height: 500px;
    position: relative;
    overflow: hidden;
    display: block;
}

.collage-01, .collage-02, .collage-03, .collage-04,
.collage-05, .collage-06, .collage-07, .collage-08, .collage-09, .collage-10, .collage-11 {
    width: 224px;
    height: 168px;
    /*   padding: 10px;*/
    background: #eee;
    border-radius: 20px;
    border-color: #EFEAD7;
    border-style: solid;
    border-width: 8px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    position: absolute;
}

.collage-01 {
    z-index: 1;
    top: 5%;
    left: 10%;
    transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
}

.collage-02 {
    z-index: 2;
    top: 10%;
    right: 30%;
    transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
}

.collage-03 {
    z-index: 3;
    top: 15%;
    right: 45%;
    transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
}

.collage-04 {
    z-index: 4;
    top: 40%;
    right: 10%;
    transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
}

.collage-05 {
    z-index: 5;
    top: 40%;
    right: 30%;
    transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
}

.collage-06 {
    z-index: 6;
    top: 30%;
    right: 40%;
    transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
}

.collage-07 {
    z-index: 7;
    top: 40%;
    right: 50%;
    transform: rotate(-25deg);
    -o-transform: rotate(-25deg);
    -moz-transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
}

.collage-08 {
    z-index: 8;
    top: 30%;
    right: 25%;
    transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
}

.collage-09 {
    z-index: 9;
    top: 20%;
    right: 15%;
    transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
}

.collage-10 {
    z-index: 10;
    top: 18%;
    right: 25%;
    transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
}

.collage-11 {
    z-index: 11;
    top: 45%;
    right: 54%;
    transform: rotate(25deg);
    -o-transform: rotate(25deg);
    -moz-transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
}
