/* Basic Starter */
body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}
section, .container {
    width: 100%;
}
.full-height {
    height: 100%;
}
.full-width {
    width: 100%;
}
.centered {
    text-align: center;
}
.tabled {
    display: table;
}
.tabled-cell {
    display: table-cell;
    vertical-align: middle;
}
.white {
    background: #ffffff;
}
a {
    /* First we need to help some browsers along for this to work.
       Just because a vendor prefix is there, doesn't mean it will
       work in a browser made by that vendor either, it's just for
       future-proofing purposes I guess. */
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    /* ...and now for the proper property */
    transition:.5s;
    outline: 0;
    color: #666;
    text-decoration: underline;
}
a:hover, a:active, a:focus {
    outline: 0;
    text-decoration: none;
    opacity: 0.7;
}
/* */

.banner {
    background-position: bottom center;
    background-size: cover;
}

.overlay {
    background: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.banner h2 {
    color: #fff;
    font-size: 50px;
    margin-top: -20px;
    font-family: 'Raleway', sans-serif;
}

.banner p {
    color: #fff;
    font-family: 'Raleway', sans-serif;
}

.banner a {
    background: none repeat scroll 0 0 #3777bf;
    border-radius: 20px;
    display: inline-block;
    margin: 10px -5px;
    padding: 7px 15px;
    color: #fff;
    text-decoration: none;
}

.row {
    max-width: 1024px;
    margin: 0 auto;
}