Customizations

<div class="hide">
    <a href="#/articles/savingsRates">This is the default 'Save More' article</a>
    <a href="#/articles/rolloverOptions">This is the default 'Rollover Options' article</a>
    <a href="#/articles/Sony/enhancedSecurity">This is the Sony custom 'Enhanced Registration' article</a>
    <a href="#/articles/Bechtel/wellnessCenter">This is the Bechtel custom 'Me & My Money' article</a>
    <a href="#/articles/privacy">This is the default 'Privacy Policy' disclosure document</a>
</div>

<style>
    img.site-logo {
        background: url("../images/empower.svg") no-repeat 0 40%;
        height: 52px;
        max-width: 101px;
        width: 101px;
    }

    img.gc-150022 {
        background: url("../images/logoCustomization/150022.svg") no-repeat 0 40%;
        max-width: 125px;
        width: 125px;
    }

    img.gc-150024 {
        background: url("../images/logoCustomization/150024.svg") no-repeat 0 40%;
        height: 60px;
        margin: -4px auto;
        max-height: 60px;
        max-width: 61px;
        width: 61px;
    }

    img.gc-150044 {
        background: url("../images/logoCustomization/150044.svg") no-repeat 0 40%;
        height: 70px;
        margin: -9px auto;
        max-height: 70px;
        max-width: 47px;
        width: 47px;
    }
</style>

<!-- IMPORTANT NOTE: The <img> paths for src and srcset defined in this example should not be used and are for illustrative purposes only. -->
<!-- Please refer to the template in customizations for correct paths. -->

<div id="hero-carousel" class="hero shadowify">
    <div class="item">
        <div class="banner-wrapper">
            <img src="../../ui/customization-ui/customizations/Default/images/magic-login/hero_secure-accout-access.jpg" srcset="../../ui/customization-ui/customizations/Default/images/magic-login/hero_secure-accout-access@2x.jpg 2x">
        </div>
        <div class="overlay">
            <h2>Your new account login page is here.</h2>
            <a class="text-normal" href="#/articles/enhancedSecurity">Learn how the enhanced security works &raquo;</a>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4 col-sm-6">
        <a class="prelogin-pod" href="#/articles/savingsRates">
            <img src="../../ui/customization-ui/customizations/Default/images/magic-login/Small-Changes-Can-Have-Dramatic-Effects.jpg" srcset="../../ui/customization-ui/customizations/Default/images/magic-login/Small-Changes-Can-Have-Dramatic-Effects@2x.jpg 2x">
            <h3 class="text-red">Saving more can be key to retirement success.</h3>
            <p class="subhead">Small changes can have dramatic effects.</p>
        </a>
    </div>
    <div class="col-md-4 col-sm-6">
        <a class="prelogin-pod" href="#/articles/rolloverOptions">
            <img src="../../ui/customization-ui/customizations/Default/images/magic-login/rollover.jpg" srcset="../../ui/customization-ui/customizations/Default/images/magic-login/rollover@2x.jpg 2x">
            <h3 class="text-red">Changing jobs? Retiring? You have options.</h3>
            <p class="subhead">Speak to an Empower Retirement Consultant today.</p>
        </a>
    </div>
    <div class="col-md-4 col-sm-6">
        <a class="prelogin-pod" href="#/articles/browserSupport">
            <img src="../../ui/customization-ui/customizations/Default/images/magic-login/having-browser-issues-accessing-site.jpg" srcset="../../ui/customization-ui/customizations/Default/images/magic-login/having-browser-issues-accessing-site@2x.jpg 2x">
            <h3 class="text-red">Having browser issues accessing the website?</h3>
            <p class="subhead">Make sure you have the latest browser version.</p>
        </a>
    </div>
</div>