  ﻿#nextStep-outer {
    background-color: #E6B217;
    min-height: 200px;
    position: relative;
}
#nextStep-beads {    
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url('/img/home/beads_1920.png');
    background-size:cover;
}
#nextStep-content {
    padding: 1rem;
}


#nextStep-imageContainer {
    margin: 50px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 400px;
    height: 400px;   
    border-radius: 50%;
    border: #fff solid 1.5rem;
    position: relative;
    /* non-essential styling */
    -webkit-box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, .15);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, .15);
}

    #nextStep-imageContainer img {
        flex-shrink: 0;
        object-fit: cover;
        min-width: 100%;
        min-height: 100%
    }
    #nextStep-action {
        position:relative;
    }
    #nextStep-actionContainer {       
        width:100%;
        margin: 0;
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    #nextStep-action h2 {
        color: #FFF;
        font-size: 4.25rem;
        font-family: 'Roboto Slab', serif;
        font-weight: bold;    
        text-shadow: 2px 4px 3px rgba(0, 0, 0, .15);
    }

    #nextStep-action ul {
        list-style:none;
        display:inline-block;
        margin-left:0;
    }

    #nextStep-action ul li {
        display:inline-block;
        margin:1rem;
        width:250px;
    }
    #nextStep-action ul div {
        width: 100%;
        background: #0060AA;
        border:1px solid #FFF;
        padding: 1rem;
        transition:all .25s ease-in-out
    }
    #nextStep-action ul div:hover {
        background:#E6B217;
    }
    #nextStep-action a {
        color: #FFF;
        font-family: 'Roboto Slab', serif;
        font-weight: bold;
        font-size: 2rem;
    }


/*#region media breaks*/
    @media(max-width:1500px) {        
    }

    /*Laptop*/
    @media(max-width:1366px) {
        #nextStep-action h2 {
            font-size: 3.5rem;
        }
        #nextStep-action a {           
            font-size: 1.8rem;
        }
        #nextStep-imageContainer {           
            width: 350px;
            height: 350px;
            border: #fff solid 1.25rem;            
        }
    }

    @media(max-width:1220px) {
       
    }

    /* founddation large break point*/
    @media(max-width:1023px) {
        #nextStep-action h2 {
            font-size: 3rem;
        }
        #nextStep-action a {
            font-size: 1.7rem;
        }
        #nextStep-imageContainer {
            width: 300px;
            height: 300px;
            border: #fff solid .75rem;
        }
        #nextStep-outer {
            min-height: 250px;            
        }
        #nextStep-imageContainer {           
            margin-top: 3rem;
        }
        #nextStep-actionContainer {            
            position: relative;
            top: auto;
            -ms-transform: translateY(-50%);
            transform: none;
            padding: 0 0 3rem 0;
        }
    }

    @media(max-width:920px) {
    }

    /*flip to mobile nav*/
    @media(max-width:820px) {
    }

    /*tablet*/
    @media(max-width:768px) {
    }


    /*flip to one column*/
    @media(max-width:639px) {    
    }

    @media(max-width:450px) {
        #nextStep-imageContainer {
            width: 300px;
            height: 300px;
            border: #fff solid 1rem;
        }
    }
/*#endregion*/

