@charset "utf-8";
/* CSS Document */

.square .top, 
.square .bottom
{

    display:none;

}

.square .image-block {

    left:0;
    top:0;

}

.square .left {
 
    width:22.5%;
    height:100%;

}

.square .centre {
 
    width:calc(77.5% - 40px);
    height:100%;

}

.square .image-con {

    height:100%;
    width:73%;

}

.square .text-con {

    height:100%;
    width:27%;
    
}

.square .text-block {
    
    bottom:140px;
    left:20px;
    
}

.square .right {
 
    width:40px;
    height:100%;

}

.square.inset .top, 
.square.inset .bottom
{

    display:block;
    width:100%;
    height:120px;

}

.square.inset .left, .square.inset .right, .square.inset .centre {
 
    height:calc(100% - 240px);

}


.square.inset .text-block {

    bottom:0;
    left:20px;
    
}


@media only screen and (max-width: 1439px), screen and (max-height: 767px) {
 
    .square .top, .square .bottom {

        height:90px!important;
        display: block!important;
        width:100%!important;

    }
    
    .square .left, .square .right {

        display:none!important;

    } 
    
    .square .centre {

        width:100%!important;
        height:calc(100% - 180px)!important;

    }
    
    .square .image-con {

        width:100%!important;

    }
    
    .square .top.full-screen-mobile, 
    .square .bottom.full-screen-mobile,
    .square .left.full-screen-mobile, 
    .square .right.full-screen-mobile
    {

        display:none!important;

    }
    
    .square .centre.full-screen-mobile {
        
        width:100%!important;
        height:100%!important;

    }

    .square.inset-on-mobile .left, .square.inset-on-mobile .right {

        height:calc(100% - 180px)!important;
        display: block!important;
        width:20px!important;

    }
    
    .square.inset-on-mobile .centre {
        
        width:calc(100% - 40px)!important;
        height:calc(100% - 180px)!important;

    }

}

@media only screen and (max-width: 767px), screen and (max-height: 767px) {
    
    .square .top, .square .bottom {

        display:block!important;
        height:70px!important;

    }
    
    .square .centre {

        height:calc(100% - 140px)!important;

    }  
    
    .square.inset-on-mobile .left, .square.inset-on-mobile .right {

        display:block!important;
        height:calc(100% - 140px)!important;
        width:20px!important;

    }
    
    .square.inset-on-mobile .centre {
        
        height:calc(100% - 140px)!important;

    }

}