  ﻿/*#region at a glance*/
#atAGlance-outer {
    background-image: linear-gradient(to bottom, #0060aa, #00599d, #005291, #004b84, #004478);
    min-height: 700px;
    position: relative;
}

#atAGlance-arrows {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url('/img/home/down-arrows.png');
    background-repeat: repeat;
    background-attachment: fixed;
}

#atAGlance-inner {
    padding: 4rem 1rem;
}

#atAGlanceHeader {
    text-align: center;
    width: 100%;
}

#atAGlanceHeader h2 {
    color: #FFF;
    font-weight: bold;
    font-size: 3.875rem;
    padding-bottom:2rem;
}

.glanceCard {
    margin:0 auto;
    filter: drop-shadow(0px 3px 36px rgba(0, 0, 0, 0.361));
    background-color: rgba(0,96,170,1);
    background-image: url('/img/at-a-glance-arrows.png');
    background-repeat:no-repeat;
    background-position:center center;
    overflow: visible;
    /*width:300px;*/
    width:400px;
    height:400px;
}
.numbersHeadline {
    padding-top: 4rem;
    font-family: 'Roboto Slab', serif;
    font-weight:bold;
    color: #FFF;
    font-size: 6.5rem;
}
.numbers-copy {
    color: #FFF;
    font-family: 'Roboto', sans-serif;
    font-size: 1.375rem;
    padding: 0 .5rem;
}
/*#endregion*/


/*#region media breaks*/
    @media(max-width:1500px) {
        .numbersHeadline {
            font-size: 5.5rem;
        }
    }

    /*Laptop*/
    @media(max-width:1366px) {
        #atAGlanceHeader h2 {
            font-size: 3.5rem;
        }
    
        .glanceCard {
            background-image: url('/img/at-a-glance-arrows270.png');
            /*width: 270px;*/
            width:360px;
            height: 360px;
        }
    }

    @media(max-width:1220px) {
        #atAGlance-outer {       
            min-height: 1025px;        
        }
        #numbersOne, #numbersTwo, #numbersThree, #numbersFour {
            width:50%;
        }
        .glanceCard {
            width: 90%;
            margin-bottom: 2rem;
        }
        .numbersHeadline {
            font-size: 6.5rem;
        }
    }

    /* founddation large break point*/
    @media(max-width:1023px) {
        #atAGlanceHeader h2 {
            font-size: 3rem;
        }
        .numbersHeadline {
            font-size: 5.5rem;
        }
    }

    /*flip to one column*/
    @media(max-width:639px) {
        #atAGlance-outer {
            min-height: 1900px;
        }       
        #numbersOne, #numbersTwo, #numbersThree, #numbersFour {
            width: 100%;
        }
        .numbersHeadline {
            font-size: 4rem;
            padding-top: 6.5rem;
        }        
    }   
/*#endregion*/