/*==================================================
    TIPA MART
    HORIZONTAL PROMOTIONAL BANNER
==================================================*/


/*==================================================
    SECTION
==================================================*/

.promo-banner{

    padding:0 0 45px;

    background:#ffffff;

}


/*==================================================
    PROMOTIONAL BOX
==================================================*/

.promo-banner__box{

    position:relative;

    display:flex;

    align-items:center;

    width:100%;

    height:120px;

    padding:0 25px;

    overflow:hidden;

    background:#FCEDEF;

}


/*==================================================
    TEXT CONTENT
==================================================*/

.promo-banner__content{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    width:65%;

    height:100%;

    padding:0 20px;

    text-align:left;

}


/*==================================================
    FIRST LINE
==================================================*/

.promo-banner__title{

    margin:0 0 8px;

    color:#222222;

    font-size:22px;

    font-weight:700;

    line-height:1.25;

    text-align:left;

}


/*==================================================
    SECOND LINE
==================================================*/

.promo-banner__description{

    margin:0;

    color:#555555;

    font-size:13px;

    font-weight:400;

    line-height:1.4;

    text-align:left;

}


/*==================================================
    PROMOTIONAL IMAGE AREA
==================================================*/

.promo-banner__image{

    position:absolute;

    top:0;

    right:15px;

    bottom:0;

    z-index:1;

    width:32%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:flex-end;

    pointer-events:none;

}


/*==================================================
    PROMOTIONAL IMAGE
==================================================*/

.promo-banner__image img{

    display:block;

    width:auto;

    height:100%;

    max-width:100%;

    object-fit:contain;

    object-position:right center;

}


/*==================================================
    LARGE TABLET
==================================================*/

@media (max-width:1200px){

    .promo-banner__box{

        height:110px;

        padding:0 20px;

    }


    .promo-banner__content{

        width:68%;

        padding:0 15px;

    }


    .promo-banner__title{

        font-size:20px;

    }


    .promo-banner__description{

        font-size:12px;

    }


    .promo-banner__image{

        right:12px;

        width:30%;

    }

}


/*==================================================
    TABLET
==================================================*/

@media (max-width:992px){

    .promo-banner__box{

        height:100px;

        padding:0 18px;

    }


    .promo-banner__content{

        width:70%;

        padding:0 12px;

    }


    .promo-banner__title{

        font-size:18px;

    }


    .promo-banner__description{

        font-size:11px;

    }


    .promo-banner__image{

        right:10px;

        width:28%;

    }

}


/*==================================================
    MOBILE
==================================================*/

@media (max-width:768px){

    .promo-banner{

        padding-bottom:30px;

    }


    .promo-banner__box{

        height:95px;

        padding:0 14px;

    }


    .promo-banner__content{

        width:72%;

        padding:0 8px;

    }


    .promo-banner__title{

        font-size:15px;

        line-height:1.2;

    }


    .promo-banner__description{

        font-size:10px;

        line-height:1.3;

    }


    .promo-banner__image{

        right:7px;

        width:27%;

    }

}


/*==================================================
    SMALL MOBILE
==================================================*/

@media (max-width:576px){

    .promo-banner__box{

        height:82px;

        padding:0 10px;

    }


    .promo-banner__content{

        width:74%;

        padding:0 6px;

    }


    .promo-banner__title{

        font-size:12px;

    }


    .promo-banner__description{

        font-size:9px;

    }


    .promo-banner__image{

        right:5px;

        width:25%;

    }

}