/* =========================================
   JOIN HEROIC 5 - MOBILE
   ========================================= */

@media (max-width:600px){

    /* PAGE */

    .hg-heroic5-background{
        position:relative;

        width:100%;
        min-height:100px;
        height:400px;

        margin:0;
        padding:0;

        overflow:hidden;
        box-sizing:border-box;
    }


    /* BACKGROUND IMAGE */

    .hg-heroic5-image{
        display:block;

        width:100%;
        height:100%;

        max-width:none;

        object-fit:fill;
        object-position:center center;

        margin:0;
        padding:0;
    }


    /* BUTTON CONTAINER */

    .hg-join5-button{
        position:absolute;

        top:30%;
        left:50%;

        transform:translate(-50%,-50%);

        margin:0;
        padding:0;

        z-index:10;
    }


    /* BUTTON IMAGE */

    .hg-join5-button img{
        display:block;

        width:180px;
        max-width:none;
        height:auto;

        margin:0;
        padding:0;

        transition:none;
    }

}

/* =========================================
   JOIN HEROIC 5 - HORIZONTAL
   ========================================= */

@media (orientation:landscape) and (max-width:600px){

    .hg-heroic5-background{
        width:100%;
        min-height:640px;
        height:640px;
    }

    .hg-heroic5-image{
        width:100%;
        height:100%;
        object-fit:fill;
    }

    .hg-join5-button{
        transform:translate(-50%, -50%) translate(0, 0);
    }
    
    .hg-join5-button img{
    width:260px;
    height:auto;
}

}