/** Hero Item - Overrides *****Start******/
/*****************************************/
@media only screen and (min-width: 768px) and (max-width: 1083px) {
    .m-hero-item {
        height: auto;
        padding: 0;
        text-align: center;
    }

    .m-hero-item > div {
        padding: 12px;
        position: relative;
    }

    .m-hero-item[class*=f-x][class*=f-y] > picture img {
        top: 0;
        left: 0;
        left: calc(50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .m-hero-item[class*=f-x][class*=f-y] > div > div {
        position: relative;
        margin: 0 auto;
        left: 0;
        top: 0;
        top: calc(50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        max-width: 100%;
    }

    .m-hero-item > div > div > div {
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

@media only screen and (max-width: 1083px) {
    .m-hero-item .c-pivot > header {
        display: inline-block;
        margin-top: 20px;
    }

    .m-hero-item[class*=f-x][class*=f-y] > div > div {
        transform: none!important;
        top: 0!important;
    }

    .m-hero-item[class*=f-x][class*=f-y] > div {
        height: auto;
    }

    .m-hero-item > div > div .c-heading-2,
    .m-banner .c-heading-2 {
        padding-top: 0px;
    }
}

@media only screen and (min-width: 1084px) {    
    .m-hero-item > div {
        max-width: 1600px;
    }

    .m-hero-item > div > div {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media only screen and (min-width: 1400px) {
    .m-hero-item > div > div {
        padding-left: 36px;
        padding-right: 36px;
    }
}
/** Hero Item - Overrides *****End*********/
/******************************************/
/** Feature Item - Overrides *****Start*******/
/*********************************************/

@media only screen and (min-width: 540px) and (max-width: 1083px) {
    .c-feature.f-align-left > div,
    .c-feature.f-align-right > div {
        width: 490px;
        margin: 0 auto;
        text-align: center;
        position: relative;
        top: 0;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateY(0);
        margin-top: 20px;
    }
}

@media screen and (max-width: 1083px) {
    /*REMOVING THE LEFT VALUE FOR LEFT AND RIGHT CONTAINERS TO MAKE IT STACKED VERTICALLY ONE BELOW OTHER */

    .c-feature.f-align-right > div,
    .c-feature.f-align-right.f-image-priority > div {
        left: 0;
    }
    
    .c-feature picture {
        display: block;
        width: 100%!important;
        max-width: 100%;
    }

    .c-feature.f-align-left picture,
    .c-feature.f-align-right picture {
        float: none;
    }

    .c-feature.f-align-right > div,
    .c-feature.f-align-right.f-image-priority > div {
        left: 0;
    }

}
/** Feature Item - Overrides *****End*********/