.Cover {
    transition-property: opacity;
    -moz-transition-property: opacity;
    -webkit-transition-property: opacity;
    -o-transition-property: opacity;
    -ms-transition-property: opacity;
    transition-duration: 0.25s;
    -moz-transition-duration: 0.25s;
    -webkit-transition-duration: 0.25s;
    -o-transition-duration: 0.25s;
    -ms-transition-duration: 0.25s;
    opacity: 0;
    -webkit-font-smoothing: antialiased;
}

.Cover[data-state~="loaded"] {
    opacity: 1;
}

.Cover .Cover-header {
    position: relative;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    padding: 36px;
    padding-bottom: 12px;
    color: #FFFFFF;
    background-color: transparent;
    background-image: url('/3m_theme_assets/web_apps/apps/mmmSOSI-2020Overview/lib/images/SOSI-Hero-New-v2.jpg');
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 550px;
    padding-top: 50px;
}

.Cover-header-logo {
    fill: #FFFFFF;
    color: #FFFFFF;
}

.Cover .Cover-header-logo-image {
    position: absolute;
    top: 40px;
    left: 60px;
}

.Cover-header-title {
    transition-property: opacity, transform;
    -moz-transition-property: opacity, transform;
    -webkit-transition-property: opacity, transform;
    -o-transition-property: opacity, transform;
    -ms-transition-property: opacity, transform;
    transition-duration: 1s;
    -moz-transition-duration: 1s;
    -webkit-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
}

.Cover-header-title {
    opacity: 0;
    transform: translateY(50%);
    -moz-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -o-transform: translateY(50%);
    -ms-transform: translateY(50%);
}

.Cover[data-state~="loaded"] .Cover-header-title {
    opacity: 1;
    transform: translateY(0%);
    -moz-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    -o-transform: translateY(0%);
    -ms-transform: translateY(0%);
}

.Cover .Cover-header-title {
    font-family: "3MCircularTT", sans;
    font-weight: 700;
    font-size: 42px;
    line-height: 48px;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.50);
    position: absolute;
    left: 125px;
    right: 32px;
    bottom: 175px;
    max-width: 315px;
}


@media screen and (max-width: 769px) {
    .Cover .Cover-header {
        background: #FFFFFF;
        padding: 0px;
        height: 400px;
    }

    .Cover .Cover-header-logo {
        position: relative;
        background-color: #FFFFFF;
        background-image: url('/3m_theme_assets/web_apps/apps/mmmSOSI-2020Overview/lib/images/header-mobile.jpg');
        background-size: 100% auto;
        -moz-background-size: 100% auto;
        -webkit-background-size: 100% auto;
        -o-background-size: 100% auto;
        -ms-background-size: 100% auto;
        background-repeat: no-repeat;
        min-height: 400px;
    }

    .Cover .Cover-header-logo-image {
        position: absolute;
        top: 20px;
        left: 10px;
    }

    .Cover .Cover-header-title {
        font-family: "3MCircularTT", sans;
        font-weight: 700;
        font-size: 36px;
        line-height: 46px;
        color: #ffffff;
        padding: 5px;
        left: 10px;
        bottom: 45px;
        max-width: 270px;
    }
}