/***************************************
*** CSS parameters for Promos Banner ***
***************************************/

/*******************************************
*** Required to allow banner adjustments ***
*******************************************/
.body {
    height: 100%;
}

/*********************************************
*** Insures banner is located below navbar ***
*********************************************/
.promosBannerDiv {
    padding-top: 48px;
    position: relative;
    width: 100%;
}

.promosBannerMepDiv {
    padding-top: 0;
}

/**************************************
*** Allows components to be resized ***
**************************************/
.promosbanner {
    position: relative;
}

/**************************************
*** Sets the blurred image to cover ***
*** the entire contetn area during  ***
***resizing                         ***
**************************************/
.blurred-background-banner {
    background-size: cover !important;
}

.promosbanner.promosbanner-right {
    background-color: #253e58;
}

/*****************************************
*** Banner rendering for desktop views ***
*****************************************/
@media only screen and (min-width: 1000px) {
    .promosbanner {
        height: 23vmax;
    }



    .banner-talent img {
        width: 55%;
        left: 17%;
    }

    .promo-text img {
        width: 65%;
        left: 17%;

        /*width: 55%;
        left: 21%;*/
    }

    .promosbanner.promosbanner-left {
        display: inline-block;
        width: 50%;
    }

    .promosbanner.promosbanner-right {
        float: right;
        width: 50%;
        background-size: 92%;
        background-position-y: 44%;
        background-position-x: 68%;
    }
}

/****************************************************************
*** Banner rendering for medium size device in portrait views ***
****************************************************************/
@media only screen and (min-width: 1000px)
and (orientation: portrait) {
    .promosbanner {
        height: 18vmax;
    }

    .promosbanner-right:before {
        border-top: 18vmax solid transparent;
    }

    .featured-and-acq-row {
    margin-top: -1% !important;
    }
}

/****************************************************
*** Banner rendering for medium size device views ***
****************************************************/
@media only screen and (min-width: 767px) and (max-width: 999px) {
    .promosbanner {
        height: 26vmax;
    }

    .promosbanner-right:before {
        left: -100px;
        border-right: 100px solid #38ab50;
        border-top: 26vmax solid transparent;
    }

    .banner-talent img {
        width: 55%;
        left: 15%;
    }

    .promo-text img {
        width: 73%;
        left: 7%;
    }

    .promosbanner.promosbanner-left {
        display: inline-block;
        width: 58%;
    }

    .promosbanner.promosbanner-right {
        float: right;
        width: 42%;
        background-size: 92%;
        background-position-y: 44%;
    }
}

@media only screen and (min-device-width: 767px)
and (max-device-width: 999px)
and (orientation: portrait) {
    .promosbanner {
        height:21vmax;
    }

    .promosbanner-right:before {
        left: -100px;
        border-right: 100px solid #38ab50;
        border-top: 21vmax solid transparent;
    }

    .promosbanner.promosbanner-right {
        background-size: 100%;
        background-position-y: 44%;
    }
}

/*************************************************************
*** Banner rendering for small size device landscape views ***
*************************************************************/
@media only screen and (min-width: 500px) and (max-width: 767px) {
    .promosbanner {
        height: 30vmax;
    }

    .promosbanner-right:before {
        left: -100px;
        border-right: 100px solid #38ab50;
        border-top: 30vmax solid transparent;
    }

    .banner-talent img {
        width: 55%;
    }

    .promosbanner.promosbanner-left {
        display: inline-block;
        width: 65%;
    }

    .promosbanner.promosbanner-right {
        /*float: right;*/
        display: inline-block;
        width: 35%;
        background-size: 100%;
        background-position-y: 44%;
    }

    .banner-talent img {
        width: 55%;
        min-width: 170px;
        left: 12%;
    }

    .promo-text img {
        width: 88%;
        left: 2%;
    }
}

/************************************************************
*** Banner rendering for small size device portrait views ***
************************************************************/
@media
only screen and (max-width: 499px)
    and (orientation: portrait) {

    .promosbanner-right:before {
        left: -50px;
        border-right: 50px solid #38ab50;
    }

    .banner-talent img {
        width: 55%;
        min-width: 170px;
        left: 16%;
    }

    .promo-text img {
        width: 80%;
        left: 10%;
    }

    .promosbanner.promosbanner-right {
        float: right;
        width: 100%;
        background-size: 120%;
        background-position-y: 44%;
        background-position-x: 50%;
        height: 56vmin;
    }

    .promosbanner.promosbanner-left {
        width: 100%;
        height: 45vmin;
    }
}

@media only screen and (max-width: 499px)
and (orientation: landscape) {
    .promosbanner {
        height: 45vmin;
    }

    .promosbanner-right:before {
        left: -50px;
        border-right: 50px solid #38ab50;
        border-top: 45vmin solid transparent;
    }

    .banner-talent img {
        width: 55%;
        min-width: 170px;
        left: 16%;
    }

    .promo-text img {
        width: 70%;
        left: 24%;
    }

    .promosbanner.promosbanner-right {
        float: right;
        width: 45%;
        background-size: 100%;
        background-position-y: 44%;
    }

    .promosbanner.promosbanner-left {
        display: inline-block;
        width: 55%;
    }
}

.promosbanner:after,
.promosbanner:before {
    content: "";
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
}

.promo-text img {
    position: absolute;
    height: auto;

}

.banner-talent img {
    position: absolute;
    z-index: 1;
    height: auto;
}

/*****************************************************************************
*** Allows for the banner height to render correctly in MS IE 10+ Browsers ***
*****************************************************************************/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .promosbanner-right:before {
        border-top: 45vh solid transparent;
    }

    .promosbanner {
        height: 45vh;
        max-height: 45vh;
    }
}

/**************************************************************************
*** Allows for the banner height to render correctly in MS Edge Browser ***
**************************************************************************/
@supports (-ms-ime-align:auto) {
    .promosbanner-right:before {
        border-top: 45vh solid transparent;
    }

    .promosbanner {
        height: 45vh;
        max-height: 45vh;
    }
}

@media only screen
and (max-width: 767px)
and (orientation: portrait) {
    .promosBannerDiv {
        padding-top: 0;
    }

    .promosBannerDivMobileApp {
        padding-top: 48px;
    }
}

@media only screen 
and (max-width: 812px)
and (min-width: 768px) {
    .mobileAppBody .promosBannerDiv {
        padding-top: 0;
    }
}

@media only screen and (max-width: 812px)
and (orientation: landscape) {
    .promosBannerDivMobileApp {
        padding-top: 48px;
    }
}