/*CSS for ES Promo Banners
10.5.21
Developed by Alyssa Laygan*/


#fafsa-101-promo {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: space-between;
    }
    
    .promo-title {
        flex-basis: 15%;
        order: 1;
    }
    
    .promo-title p {
        text-align: center;
        font-size: 60px;
        font-family: 'League Gothic';
        padding: 0px 5px;
        margin: 0px;
        line-height: 1;
    }
    .promo-image {
        flex-basis: 15%;
        order: 2;
        text-align: center;
        padding-top: 0px;
        transition: transform .2s; /* Animation */
    }
    
    .promo-image:hover {
        transform: scale(1.2);
    
    }
    .promo-description {
        flex-basis: 80%;
        order: 3;
    }
    
    .promo-cta {
        flex-basis: 10%;
        order: 4;
        text-align:center;
    }
    
    .promo-cta-links {
        order: 5;
        flex-basis: 100%;
    }
    
    #promo-hr {
        background-color: #eee;
    }
    
@media only screen and (max-width:769px) {
    .promo-title {
        flex-basis: 50%
    }
    
    .promo-image {
        flex-basis: 50%
    }
    
    .promo-description {
        flex-basis: 100%
    }
    
    .promo-cta {
        flex-basis: 100%
    }
}