.mpp-interactive{
    margin:1em auto;
}

.mpp-interactive div{
    box-sizing: border-box;
}

.mpp-interactive .mpp2020-header{
    background-size:100% auto;
    background-position: 50% 50%;
    background-attachment:fixed;
    background-repeat: no-repeat;
    width:100%;
    max-width:1920px;
    margin:5em auto 3em auto;
    height:300px;
    height:40vh;
    padding:50px 25px;
    position:relative;
}

.mpp-interactive .mpp2020-header#mpp2020-1{
    background-image:url("https://c24215cec6c97b637db6-9c0895f07c3474f6636f95b6bf3db172.ssl.cf1.rackcdn.com/interactives/2020/devaluation-black-business/assets/banners/mpp-2020-feb-1.jpg");
}

.mpp-interactive .mpp2020-header#mpp2020-2{
    background-image:url("https://c24215cec6c97b637db6-9c0895f07c3474f6636f95b6bf3db172.ssl.cf1.rackcdn.com/interactives/2020/devaluation-black-business/assets/banners/mpp-2020-feb-2.jpg");
}

.mpp-interactive .mpp2020-header#mpp2020-3{
    background-image:url("https://c24215cec6c97b637db6-9c0895f07c3474f6636f95b6bf3db172.ssl.cf1.rackcdn.com/interactives/2020/devaluation-black-business/assets/banners/mpp-2020-feb-3.jpg");
}

.mpp-interactive .mpp2020-header#mpp2020-4{
    background-image:url("https://c24215cec6c97b637db6-9c0895f07c3474f6636f95b6bf3db172.ssl.cf1.rackcdn.com/interactives/2020/devaluation-black-business/assets/banners/mpp-2020-feb-4.jpg");
}

.mpp-interactive .mpp2020-header#mpp2020-5{
    background-image:url("https://c24215cec6c97b637db6-9c0895f07c3474f6636f95b6bf3db172.ssl.cf1.rackcdn.com/interactives/2020/devaluation-black-business/assets/banners/mpp-2020-feb-5.jpg");
}

.mpp-interactive .mpp2020-header > *{
    max-width:900px;
    min-width:280px;
    width:40%;
    background-color:#000000;
    background-color:rgba(0,0,0,0.7);
    margin:0px;
    padding:25px;
    position:absolute;
    bottom:20px;
    left:27.5%;
    border:1px solid #ffffff;
    border-width:1px 1px 1px 1px;
    border-width:0px;

    will-change: transform;
    transform: translateZ(0);
}

.mpp-interactive .mpp2020-header > * *{
    margin:0px 0px 18px 0px;
    color:#ffffff;

    will-change: transform;
    transform: translateZ(0);
}

.chart-title{
    font-size:18px;
    font-weight:bold;
}

.title-border{
    margin-bottom:10px;
    padding-bottom:5px;
    border-bottom:1px solid #999999;
}

.chart-source{
    border-top:1px solid #999999;
    padding-top:5px;
    margin-top:10px;
    font-size:15px;
    font-style:italic;
}

.mpp-interactive .flex-container{
    margin:0px auto;
    display:flex;
    flex-direction:row;
    justify-content: flex-start;
    align-content: flex-start;
}

.mpp-interactive .flex-container > div{
    width:80%;
    width:calc(80% - 1rem);
    display:flex;
    flex-direction:row;
    justify-content: flex-start;
    align-content: flex-start;
}

.mpp-interactive .flex-container > div > div{
    width:50%;
}

.mpp-interactive .flex-container > div > div > img{
    width:100%;
    height:auto;
}

.mpp-interactive .mpp2020-header p.mpp-header-quote{
    visibility:hidden;
}


@media screen and (min-width:0px){
    .mpp-interactive .mpp2020-header{
        height:85vh;
        background-size:auto 100%;
    }

    .mpp-interactive .mpp2020-header#mpp2020-3,
    .mpp-interactive .mpp2020-header#mpp2020-4{background-position:25% 50%;}
    .mpp-interactive .mpp2020-header#mpp2020-5{background-position:75% 50%;}
    
    .mpp-interactive .mpp2020-header h2{
        font-size:22px;
        font-weight:bold;
    }
    
    .mpp-interactive .mpp2020-header p.mpp-header-quote{
        font-size:16px;
        font-weight:bold;
    }

    .mpp-interactive .mpp2020-header > *{
        padding:10px 30px;
        width:100%;
        bottom:0px;
        left:0%;
    }
}

@media screen and (min-width:480px){

}


@media screen and (min-width:1024px){

    .mpp-interactive .mpp2020-header#mpp2020-3,
    .mpp-interactive .mpp2020-header#mpp2020-4,
    .mpp-interactive .mpp2020-header#mpp2020-5{background-position:50% 50%;}

    .mpp-interactive .mpp2020-header h2{
        font-size:24px;
    }
    
    .mpp-interactive .mpp2020-header p.mpp-header-quote{
        font-size:18px;
    }

    .mpp-interactive .mpp2020-header > *{
        padding:15px;
        width:70%;
        bottom:30px;
        left:26.25%;
    }
}

@media screen and (min-width:1280px){
    .mpp-interactive .mpp2020-header{
        height:65vh;
        background-size:100% auto;
    }

    .mpp-interactive .mpp2020-header#mpp2020-5{
        background-position: 50% 50% !important;
    }

    .mpp-interactive .mpp2020-header{
        background-position: 50% 0% !important;
    }

    .mpp-interactive .mpp2020-header h2{
        font-size:28px;
    }
    
    .mpp-interactive .mpp2020-header p.mpp-header-quote{
        font-size:20px;
    }

    .mpp-interactive .mpp2020-header > *{
        width:60%;
        left:27.5%;
    }
}

@media screen and (min-width:1600px){

}

@media screen and (min-width:1920px){
    .mpp-interactive .mpp2020-header{
        background-attachment:scroll;
        background-position: 50% 10% !important;
    }
}