/* Media Query
--------------------*/
@media screen {

    .arrow-box {
        position: relative;
		width: 100%;
		padding-bottom: 2rem;
    }

    .arrow-box .content-div {
        background: #fff;
        box-sizing: border-box;
        padding: 2rem 1.5rem;
        display: flex;
        flex: 1 1;
        flex-direction: column;
		justify-content: center;
		z-index: 1;
    }
    
    .arrow-box .image_container {
		position: relative;
        padding: 0;
        margin: 0;
		padding-top: 100%;
		width: 100%;
    }    

    .arrow-box img {
        margin: 0 auto;
		display: inherit;
		position: absolute;
		top: 0;
		object-fit: cover;
		width: 100%;
		height: 100%;		
    }

    .arrow-box.float_below_box .image_container:after,
    .arrow-box.float_right_box .image_container:after,
    .arrow-box.float_left_box .image_container:after{
        content: "";
        display: block;
        background: #fff;
        position: absolute;
        top: -1.5rem;
        right: 0;
        left: 0;
        margin: auto;
        width: 3rem;
        height: 3rem;
        transform: rotate(45deg);
    }
    /* arrow-box ends */

}

/* Mobile-landscape (and larger) lansacape */
@media only screen and (min-width: 480px) {
}


/* min-width:768px Tablet-portrait (and larger) */
@media only screen and (min-width: 768px) {
    .arrow-box {
		padding: 0 !important;
	}

    .arrow-box .inside_ce {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .arrow-box.float_left_box .inside_ce,
    .arrow-box.float_below_box .inside_ce {
        flex-direction: row-reverse;
    }

    .arrow-box .image_container {
        flex-basis: 50%;
		padding-top: 50%;
    }

    .arrow-box .content-div {
        background: #fff;
        box-sizing: border-box;
        padding: 2rem 3rem;
        flex-basis: 50%;
        display: flex;
        flex: 1 1;
        flex-direction: column;
        justify-content: center;
    }

    
    .arrow-box.float_left_box .content-div {
        float: right;
        width: 50%;
    }

    .arrow-box.float_right_box .content-div {
        float: left;
        width: 50%;
    }    

    .arrow-box.float_below_box .image_container:after,
    .arrow-box.float_right_box .image_container:after,
    .arrow-box.float_left_box .image_container:after{
        content: "";
        display: block;
        background: #fff;
        position: absolute;
        bottom: auto;
        top: 50%;
        right: -1.5rem;
        left: auto;
        margin-top: -1.5rem;
        width: 3rem;
        height: 3rem;
        transform: rotate(45deg);
    }

    .arrow-box.float_right_box .image_container:after {
        right: auto;
        left: -1.5rem;
    }

}


/* Tablet-landscape (and larger) for width 992px */
@media only screen and (min-width: 992px) {
}

/* min-width:1100 */
@media only screen and (min-width:1100px) {

    /* arrow-box. */

    .arrow-box .content-div {
        padding: 2rem;
    }

    .arrow-box.float_below_box .image_container:after,
    .arrow-box.float_right_box .image_container:after,
    .arrow-box.float_left_box .image_container:after{
        right: -2rem;
        margin-top: -2rem;
        width: 4rem;
        height: 4rem;
    }

    .arrow-box.float_right_box .image_container:after {
        right: auto;
        left: -2rem;
    }
    /* arrow-box. ends */	
}

/* min-width:1300 Laptops (and larger) for width 1300px */
@media only screen and (min-width:1300px) {
}
/* Media ends
--------------------*/