/*
Collage maker


 */

.layouts {

}

.chooseThis {
    background-color: #504434;
    color: #f8fff7;
    z-index: 999999 !important;
    position: absolute;
    /*display: none;*/
}
[hidden] {
    display: none !important;
}

.cl-item {
    cursor: pointer;
    border: 1px solid black;
    /*
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    */
    background: #f0f0f0;
    position: absolute;
}

.cl-item canvas {
    max-width: 100% !important;
    max-height: 100% !important;
    width:100% !important;
    height:100% !important;
    left:0;
    top:0;
    margin-left: 0;
    margin-top: 0;
    position: absolute;
}

.relativeDiv {
    position: relative
}

/* Layout 1 */
#layout_1 {
    background: #ffffff;
}

#layout_1 .cl-wrapper {
    margin: auto;
    position: absolute;
    left: 2%;
    top: 5%;
}

#cl-1_1 {
    /*background: cyan;*/
    width: 44%;
    height: 90%;
    top:3%;
}

#cl-1_2 {
    /*background: red;*/
    width: 44%;
    height: 90%;
    margin-left: 48%;
    top: 3%;
}

/* Layout 2 */
#layout_2 {
    background: #ffffff;
}

#layout_2 .cl-wrapper {
    margin: auto;
    position: absolute;
    left: 2%;
    top: 4%;
}

#cl-2_1 {
    /*background: cyan;*/
    width: 92%;
    height: 44%;
    top:2%;
}

#cl-2_2 {
    /*background: red;*/
    width: 92%;
    height: 44%;
    margin-top: 48%
}

/* Layout 3 */
#layout_3 {
    background: #ffffff;
}

#layout_3 .cl-wrapper {
    margin: auto;
    position: absolute;
    left: 1%;
    top: 4%;
}

#cl-3_1 {
    /*background: cyan;*/
    width: 95%;
    height: 46%;
}

#cl-3_2 {
    /*background: red;*/
    width:45%;
    height:45%;
    margin-top:48%;
}

#cl-3_3 {
    /*background: red;*/
    width:45%;
    height:45%;
    margin-top:48%;
    margin-left:50%;
}

/* Layout 4 */
#layout_4 {
    background: #ffffff;
}

#layout_4 .cl-wrapper {
    margin: auto;
    position: absolute;
    left: 1%;
    top: 4%;
}

#cl-4_1 {
    /*background: cyan;*/
    width: 46%;
    height: 46%;
}

#cl-4_2 {
    /*background: red;*/
    width:46%;
    height:46%;
    margin-top:48%;
}

#cl-4_3 {
    /*background: red;*/
    width:46%;
    height:46%;
    /*margin-top:47%;*/
    margin-left:48%;
}

#cl-4_4 {
    /*background: red;*/
    width:46%;
    height:46%;
    margin-top:48%;
    margin-left:48%;
}


/* Layout 5 */
#layout_5 {
    background: #ffffff;
}

#layout_5 .cl-wrapper {
    margin: auto;
    position: absolute;
    left: 1%;
    top: 4%;
}

#cl-5_1 {
    /*background: cyan;*/
    width: 45%;
    height: 45%;
}

#cl-5_2 {
    /*background: red;*/
    width:45%;
    height:45%;
    margin-left:50%;
}

#cl-5_3 {
    /*background: red;*/
    width:95%;
    height:45%;
    margin-top:48%;
    /*margin-left:50%;*/
}


/* Layout 6 */
#layout_6 {
    background: #ffffff;
}

#layout_6 .cl-wrapper {
    margin: auto;
    position: absolute;
    left: 1%;
    top: 4%;
}

#cl-6_1 {
    /*background: cyan;*/
    width: 45%;
    height: 94%;
}

#cl-6_2 {
    /*background: red;*/
    width:45%;
    height:45%;
    margin-left:50%;
}

#cl-6_3 {
    /*background: red;*/
    width:45%;
    height:45%;
    margin-top:48%;
    margin-left:50%;
}

/* Layout 7 */
#layout_7 {
    background: #ffffff;
}

#layout_7 .cl-wrapper {
    margin: auto;
    position: absolute;
    left: 1%;
    top: 4%;
}

#cl-7_1 {
    /*background: cyan;*/
    width: 45%;
    height: 30%;
}

#cl-7_2 {
    /*background: red;*/
    width:45%;
    height:30%;
    margin-top:32%;
}

#cl-7_3 {
    /*background: red;*/
    width:45%;
    height:30%;
    margin-top:64%;
}

#cl-7_4 {
    /*background: red;*/
    width: 45%;
    height: 94%;
    margin-left:49%;
}

/* Layout 8 */
#layout_8 {
    background: #ffffff;
}

#layout_8 .cl-wrapper {
    margin: auto;
    position: absolute;
    left: 1%;
    top: 4%;
}

#cl-8_1 {
    /*background: cyan;*/
    width: 45%;
    height: 94%;
}

#cl-8_2 {
    /*background: red;*/
    width:45%;
    height:30%;
    margin-left:49%;
}

#cl-8_3 {
    /*background: red;*/
    width:45%;
    height:30%;
    margin-top:32%;
    margin-left: 49%;
}

#cl-8_4 {
    /*background: red;*/
    width: 45%;
    height: 30%;
    margin-top: 64%;
    margin-left:49%;
}
#cl-10_1 {
    /*background: cyan;*/
    width: 45%;
    height: 20%;
}
#cl-10_2 {
    /*background: cyan;*/
    width: 45%;
    height: 20%;
    margin-top:22%;
}

#cl-10_3 {
    /*background: red;*/
    width: 23%;
    height: 42%;
    margin-left:47%;
}
#cl-10_4 {
    /*background: red;*/
    width: 23%;
    height: 42%;
    margin-left:72%;
}
#cl-10_5 {
    margin-top: 66%;
    margin-left: 47%;
    width: 48%;
    height: 20%;
}
#cl-10_6 {
    margin-top: 44%;
    margin-left: 47%;
    width: 48%;
    height: 20%;
}
#cl-10_7 {
    margin-top: 44%;
    width: 21.5%;
    height: 42%;
    margin-left: 23.5%;
}
#cl-10_8 {
    margin-top: 44%;
    width: 21.5%;
    height: 42%;
 }