/* =============================================================================
 * ce_image_collage_2pics
 * ========================================================================== */
 
 .ce_image_collage_2pics .ce_image {
	overflow: visible;
}

.ce_image_collage_2pics.style1 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    position: relative;
}

.ce_image_collage_2pics.style1 .image_1 {
	grid-column: 1 / span 9;
    grid-row: 1;
    padding-top: 20%;
    z-index: 1;   
}

.ce_image_collage_2pics.style1 .image_2 {
    grid-column: 4 / span 9;
    grid-row: 1;
}

.ce_image_collage_2pics.style2 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    position: relative;
}

.ce_image_collage_2pics.style2 .image_1 {
	grid-column: 4 / span 9;
    grid-row: 1;
    padding-top: 20%;
    z-index: 1;  
}

.ce_image_collage_2pics.style2 .image_1 img {
	transform: translateX(0) translateY(0) rotate(7deg);
	box-shadow: 0 0 20px 10px rgba(0,0,0,0.1);
}

.ce_image_collage_2pics.style2 .image_2 {
    grid-column: 1 / span 9;
    grid-row: 1;
}

.ce_image_collage_2pics.style2 .image_2 img {
	transform: translateX(0) translateY(0) rotate(-7deg);
	box-shadow: 0 0 20px 10px rgba(0,0,0,0.1);
}

.ce_image_collage_2pics.style3 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    position: relative;
}

.ce_image_collage_2pics.style3 .image_1 {
	grid-column: 1 / span 9;
    grid-row: 1;
    z-index: 1;     
}

.ce_image_collage_2pics.style3 .image_2 {
    grid-column: 4 / span 9;
    grid-row: 1;
    padding-top: 20%;
}

.ce_image_collage_2pics.style4 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    position: relative;
}

.ce_image_collage_2pics.style4 .image_1 {
	grid-column: 4 / span 9;
    grid-row: 1;
    z-index: 1;  
}

.ce_image_collage_2pics.style4 .image_2 {
    grid-column: 1 / span 9;
    grid-row: 1;
    padding-top: 20%;
}

/* animation */
.ce_image_collage_2pics[data-animation="on"] figure {
	opacity: 0;
	transform: scale(0.8);
    transition: all 0.5s ease-in-out;
}

.ce_image_collage_2pics[data-animation="on"].in-viewport figure {
	opacity: 1;
	transform: scale(1);
}

.ce_image_collage_2pics[data-animation="on"].in-viewport .image_1 figure {
	transition-delay: 0.2s;
}

.ce_image_collage_2pics[data-animation="on"].in-viewport .image_2 figure {
	transition-delay: 0.4s;
}