.banner{
    position: relative;
    display: block;
    box-sizing: border-box;
    padding: 80px 40px;
    height: auto;
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #b0bb2e;
    background-image: radial-gradient(circle at 50% 100%, #b0bb2e, #7f8a02 56%);
    color: #fff;
    z-index: 120;
}
    .banner .graphic{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: 50% 0;
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 10;
    }
    .banner .banner-content{
        margin: 0 auto;
        max-width: 770px;
        z-index: 100;
        position: relative;
    }
    .banner-short{
        height: auto;
        padding: 50px 20px 20px;
    }
    .banner.banner-learn{
        background-color: #0092f7;
        background-image: radial-gradient(circle at 50% 100%, #8ae5ff, #0092f7 75%);
    }
    .banner.banner-resources{
        background-color: #423cdd;
        background-image: radial-gradient(circle at 50% 100%, #91b5f0, #423cdd 94%);
    }
    .banner.banner-games{
        background-color: #780000;
        background-image: radial-gradient(circle at 50% 100%, #c42670, #780000 57%);
    }
    .banner.banner-short.banner-lesson{
        background-color: #f8f9fb;
        background-image: none;
        height: auto;
        min-height: 50px;
        padding-top: 50px;
        overflow: hidden;
        position: relative;
    }
        .banner.banner-lesson .cta-btn.arrow-back{
            background-color: #0092f7;
            color: #fff;
        }
    .banner.banner-teachers{
        background-color: #6b1a86;
        background-image: radial-gradient(circle at 50% 100%, #a438bb, #6b1a86 57%);
    }
    .banner.banner-creditunion {
        background-color: #cc4a15;
        background-image: radial-gradient(circle at 50% 100%, #fdae3f, #cc4a15 57%);
    }
    .banner.banner-blog-single{
        background-color: #cf4b00;
        background-image: radial-gradient(circle at 50% 100%, #f78342, #cf4b00 75%);
    }
        .banner.banner-blog-single .cta-btn.arrow-back{
            background-color: #fff;
            background-image: url('../images/icons/arrow-left-resources.svg');
        }
        .banner.banner-blog-single .cta-btn.arrow-back{
            color: #cf4b00;
            background-image: url('../images/icons/arrow-left-blog.svg');
        }
        .banner.banner-blog-single h1{
            padding: 12px 0 2px;
            max-width: 800px;
        }
        .banner.banner-blog-single .byline{
            text-align: left;
        }
        
    .banner .cta-btn.arrow-back{
        display: block;
        float: left;
        margin: 0;
        background: #fff;
        color: #333;
        padding: 8px 20px;
            background-image: url('../images/icons/arrow-left-white.svg');
            background-position: 14px 50%;
            background-repeat: no-repeat;
            background-size: 20px;
            color: #423cdd;
            padding-left: 40px;
    }
    .banner.banner-creditunion .cta-btn.arrow-back {
        color: #cc4a15;
        background-image: url('../images/icons/arrow-left-teachers.svg');
    }
    .banner.banner-teachers .cta-btn.arrow-back{
        color: #9e54b0;
        background-image: url('../images/icons/arrow-left-teachers.svg');
    }
    .banner.banner-learn .cta-btn.arrow-back{
        color: #0092f7;
        background-image: url('../images/icons/arrow-left-learn.svg');
    }
    .banner.banner-resources .cta-btn.arrow-back{
        color: #423cdd;
        background-image: url('../images/icons/arrow-left-resources.svg');
    }
    .banner.banner-games .cta-btn.arrow-back{
        color: #d82a2a;
        background-image: url('../images/icons/arrow-left-games.svg');
    }
    
    .banner .wave{
        display: block;
        box-sizing: border-box;
        position: absolute;
        bottom: 0;
        left: 0;
        background-image: url('../images/global/banner-wave.svg');
        background-position: 50% 100%;
        background-repeat: no-repeat;
        height: 114px;
        width: 100%;
        background-size: cover;
        z-index: 100;
    }
    .banner a{
        color: #fff;
    }
    .banner .arrow-down{
        display: block;
        width: 72px;
        height: 72px;
        background: none;
        border-radius: 35px;
        box-shadow: 0 16px 24px 0 rgba(0, 0, 0, 0.24);
        margin: 30px auto 10px;
        background-image: url('../images/icons/arrow-down-circle-white.svg');
        background-size: 72px;
        background-repeat: no-repeat;
        background-position: 50%;
    }
    .banner h1{
        text-align: center;
    }
    .banner.banner-short h1{
        text-align: left;
        clear: both;
    }
    .banner.banner-short h2{
        text-align: left;
        clear: both;
    }
    .banner.banner-blog{
        text-align: center;
    }
        .banner.banner-blog h1{
            text-shadow: 1px 1px 10px rgba(0,0,0,.2);
        }
        .banner.banner-blog .banner-content div{
            text-shadow: 1px 1px 10px rgba(0,0,0,.2);
        }
        .banner.banner-blog .cta-btn{
            background-color: #cf4b00;
        }
    .banner h2{
        font-size: 40px;
        line-height: 46px;
        margin: 0 auto 16px;
        clear: both;
    }
    .banner h3{
        font-size: 30px;
        line-height: 34px;
        clear: both;
    }
    .banner p{
        font-size: 20px;
        line-height: 32px;
    }

/* banner images */
    .page-slug-learn .banner{
        background-color: #0092f7;
        background-image: radial-gradient(circle at 50% 100%, #8ae5ff, #0092f7 75%);
        background-image: url('../images/banners/learn.jpg');
    }
        .page-slug-learn .current-menu-item,
        .menu-item-learn.current-page-ancestor{
            background: #0092f7;
        }
        .menu-item-learn.current-page-ancestor a:hover,
        .menu-item-learn.current-page-ancestor a:focus{
            color: #fff;
        }
        .menu-item-learn a:hover,
        .menu-item-learn a:focus{
            color: #0092f7;
        }
    .page-slug-resources .banner{
        background-color: #423cdd;
        background-image: radial-gradient(circle at 50% 100%, #91b5f0, #423cdd 94%);
    }
        .page-slug-resources .banner .graphic{
            background-image: url('../images/banners/resources.png');
        }
        .page-slug-resources .current-menu-item,
        .menu-item-resources.current-page-ancestor{
            background: #423cdd;
        }
        .menu-item-resources a:hover,
        .menu-item-resources a:focus{
            color: #91b5f0;
        }
    .page-slug-teachers .banner{
        background-color: #6b1a86;
        background-image: radial-gradient(circle at 50% 100%, #a438bb, #6b1a86 57%);
        background-image: url('../images/banners/teachers.jpg');
    }
        .page-slug-teachers .current-menu-item,
        .menu-item-teachers.current-page-ancestor{
            background: #9e54b0;
        }
        .menu-item-teachers a:hover,
        .menu-item-teachers a:focus{
            color: #9e54b0;
        }
    .page-slug-creditunion .banner {
        background-color: #cc4a15;
        background-image: radial-gradient(circle at 50% 100%, #a438bb, #6b1a86 57%);
        background-image: url('../images/banners/creditunion.jpg');
    }
        .page-slug-creditunion .current-menu-item,
        .menu-item-creditunion.current-page-ancestor {
            background: #fdae3f;
        }
        .menu-item-creditunion a:hover,
        .menu-item-creditunion a:focus {
            color: #cc4a15;
        }
    .page-slug-games .banner{
        background-color: #780000;
        background-image: radial-gradient(circle at 50% 100%, #c42670, #780000 57%);
        background-image: url('../images/banners/games.jpg');
        z-index: 0;
    }
        .page-slug-games .current-menu-item,
        .menu-item-games.current-page-ancestor{
            background: #ac1f1f;
        }
        .menu-item-games a:hover,
        .menu-item-games a:focus{
            color: #d82a2a;
        }
    .page-slug-about .banner{
        background-color: #7f8a02;
        background-image: radial-gradient(circle at 50% 100%, #b0bb2e, #7f8a02 56%);
    }
        .page-slug-about .banner .graphic{
            background-image: url('../images/banners/about.png');
        }
        .page-slug-about .current-menu-item,
        .menu-item-about.current-page-ancestor{
            background: #b0bb2e;
        }
        .menu-item-about a:hover,
        .menu-item-about a:focus{
            color: #b0bb2e;
        }
    .page-slug-blog .banner{
        background-color: #cf4b00;
        background-image: radial-gradient(circle at 50% 100%, #f78342, #cf4b00 75%);
    }
        .page-slug-blog .current-menu-item,
        .menu-item-blog.current-page-ancestor{
            background: #cf4b00;
        }
        .menu-item-blog a:hover,
        .menu-item-blog a:focus{
            color: #cf4b00;
        }
.menu-item-learn.current-menu-item a:hover,
.menu-item-learn.current-menu-item a:focus,
.menu-item-resources.current-menu-item a:hover,
.menu-item-resources.current-menu-item a:focus,
.menu-item-teachers.current-menu-item a:hover,
.menu-item-teachers.current-menu-item a:focus,
.menu-item-creditunion.current-menu-item a:hover,
.menu-item-creditunion.current-menu-item a:focus,
.menu-item-games.current-menu-item a:hover,
.menu-item-games.current-menu-item a:focus,
.menu-item-about.current-menu-item a:hover,
.menu-item-about.current-menu-item a:focus,
.menu-item-blog.current-menu-item a:hover,
.menu-item-blog.current-menu-item a:focus {
    color: #fff;
}