#topbanner {
	padding:	35% 0 0 0;
}


#intro {
    padding-top:    2em;
}
#intro p {
    padding-bottom: .5em;
    font-size:      1em;
}

#intro ul {
    padding:        1em 0;
    margin:         0 auto;
    width:          90%;
}
#intro li {
    display:        inline-block;
    padding-bottom: 2em;
    width:          33%;
    font-size:      .7em;
    line-height:    1.2em;
}
#intro li::before {
    content:        '';
    display:        block;
    margin:         0 auto .5em auto;
    width:          5em;
    height:         5em;
    background:     url(../images/intro-icons.svg) no-repeat 0 0;
    background-size: auto 100%;
    border-radius:  3.5em;
    border:         .1em solid #ddd;
}
#intro li.icon2::before { background-position: 20% 0 }
#intro li.icon3::before { background-position: 40% 0 }
#intro li.icon4::before { background-position: 60% 0 }
#intro li.icon5::before { background-position: 80% 0 }
#intro li.icon6::before { background-position: 100% 0 }

#intro .button {
    padding-top:    1em;
    padding-bottom: 1em;
    width:          80%;
}



#projects {
    color:          #fff;
    background:     #373737;
}
#projects .grid {
    margin:         0 auto;
    width:          90%;
}
#projects .grid-item {
    display:        inline-block;
    padding-bottom: 2em;
    width:          100%;
    font-size:      .8em;
}
#projects .grid-item figure {
    position:       relative;
    display:        block;
    padding-top:    75%;
    overflow:       hidden;
}
#projects .grid-item figure img,
#projects .grid-item figure figcaption {
    position:       absolute;
    top:            0;
    left:           0;
    width:          100%;
}
#projects .grid-item figure figcaption {
    top:            auto;
    bottom:         0;
    padding:        1em .5em;
    color:          #fff;
    background:     rgba(0,0,0,.8);
}

#projects .button {
    padding-top:    1em;
    padding-bottom: 1em;
    width:          80%;
}



@media (min-width: 25em) {
    #intro .button {
        width:      auto;
        padding:    1em 3em;
    }

    #projects .grid-item figure figcaption {
        font-size:  1.5em;
    }
    #projects .button {
        width:      auto;
        padding:    1em 2em;
    }
}
@media (min-width: 40em){

    #projects .grid-item {
        width:      48%;
        margin:     auto 1%;
    }
    #projects .grid-item figure figcaption {
        font-size:  1em;
    }
}
@media (min-width: 45em){
    #topbanner {
        padding-top:    40%;
    }
    #topbanner img {
        position:   absolute;
        top:        0;
        left:       0;
    }
    #intro li {
        width:      16.66%;
    }
}
@media (min-width: 50em){
    #intro ul {
        margin:     1em auto .5em auto;
        width:      35em;
    }
}
@media (min-width: 63em){
    #intro ul {
        font-size:  1.4em;
    }
    #projects .grid {
        width:      100%;
    }
    #projects .grid-item {
        width:      24%;
        margin:     auto 0.5%;
    }
}
@media (min-width: 80em){
    #topbanner {
        padding-top:    35%;
    }
}