#steps { margin-bottom: 40px; }
    #steps > h2 { font-size: 32px; text-align: center; margin: 36px 0 45px; }
    #steps > .steps { display: flex; justify-content: center; }
        #steps > .steps > .step { width: 200px; margin: 0 14px; text-decoration: none; color: inherit; }
            #steps > .steps > .step > .circle { width: 84px; height: 84px; background: #FCBEAD; display: flex; justify-content: center; align-items: center; border-radius: 100px; margin: 0 auto 40px; position: relative; box-sizing: border-box; border: solid 5px #FCBEAD; }
                #steps > .steps > .step > .circle > .num { position: absolute; top: -20px; left: -13px; color: #14313B; font-size: 24px; border: solid 1px #F05125; border-radius: 50px; width: 36px; height: 36px; font-weight: bold; display: flex; justify-content: center; align-items: center; background: white; box-sizing: border-box; }
            #steps > .steps > .step > .t { text-align: center; display: block; }
                #steps > .steps > .step > .t > .title { font-size: 24px; font-weight: bold; margin-bottom: 18px; }
                #steps > .steps > .step > .t > .caption { font-size: 16px; }
            #steps > .steps > .step.active { cursor: default; }
                #steps > .steps > .step.active > .circle { background: #F05125; border-color: #F05125 }
                #steps > .steps > .step.active > .t { cursor: default }
            #steps > .steps > .step:not(.active):hover { opacity: .8 }
            #steps > .steps > .step:not(:last-child) > .circle:after { content: ''; height: 7px; background: #FCBEAD; width: 144px; position: absolute; left: 79px; }
            #steps > .steps > .step:hover:not(.active) > .circle { background: none; }

#main-h { text-align: center; margin-top: 0; }
.ethnicity { color: white; }
    .ethnicity > .c > h2 { color: white; text-align: center; font-size: 32px; margin: 40px 15px 60px; }

@media(max-width:1023px) {
    #steps > h2 { font-size: 25px; }
    #steps > .steps > .step { width: 105px; margin: 0 10px; }
        #steps > .steps > .step > .circle { width: 74px; height: 74px; }
            #steps > .steps > .step > .circle > .num { font-size: 17px; width: 32px; height: 32px; }
        #steps > .steps > .step > .t > .title { font-size: 16px; }
        #steps > .steps > .step > .t > .caption { font-size: 14px; }
        #steps > .steps > .step:not(:last-child) > .circle:after { height: 5px; left: 74px; width: 51px; }

    #main-h { font-size: 28px; }
    .ethnicity > .c > h2 { font-size: 24px; }
}

@media(max-width:767px) {
    #steps { margin-bottom: 0; }
        #steps > .steps { flex-direction: column; margin: 0 16px; }
            #steps > .steps > .step { display: flex; width: auto; height: 120px; }
                #steps > .steps > .step > .circle { flex: none; width: 60px; height: 60px; margin-right: 24px; }
                    #steps > .steps > .step > .circle > .num { font-size: 13px; width: 25px; height: 25px; top: -10px; left: 0px; }
                #steps > .steps > .step > .t { text-align: left; flex: 1; }
                    #steps > .steps > .step > .t > .title { margin-bottom: 5px; }
                    #steps > .steps > .step > .t > .caption { font-size: 13px; }
                #steps > .steps > .step:not(:last-child) { margin-bottom: 30px; }
                    #steps > .steps > .step:not(:last-child) > .circle:after { width: 4px; height: 90px; left: auto; top: 60px; }
}