html {
	font-size: 100%;
}

body {
    color: #FFF;
    font-size: 1rem;
    background: url(content/background.jpg) no-repeat;
    background-size: cover;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Lato, Arial;
    font-weight: 300;
}

h1 {}
h2 {font-size: 2.0em;}

a,
a:hover,
a:active {
    text-decoration: none;
}

a {
    color: #666;
    transition: all .2s;
}

a:hover {
    color: #FFF;
}

.container {
    width: 100%;
    max-width: 1400px;
    margin: auto;
}

.hero {
    padding: 15vh 0 10vh;
    text-align: center;
}

.hero h2 {margin: 8vh 0 0;}

.grid .col {
    float: left;
    text-align: center;
}

.grid .col-half,
.grid .col-third {
    width: 100%;
}

@media screen and (min-width: 900px) {
    .grid .col-half {
        width: 50%;
    }
    .grid .col-third {
        width: 33.333%;
    }
}

.grid:hover .col {
    opacity: .5;
    
    transition: all .2s;
}
.grid:hover .col:hover {
    opacity: 1;
}

.panel {
    background: rgba( 255, 255, 255, .05 );
    transition: all .2s;
}

.panel:hover {
    background: rgba( 255, 255, 255, .10 );
}

.panel a {
    display: block;
}

.credit {width: 100%; float: left; padding: 5vh 0; text-align: center; font-size: .8em;}
.credit a {display: inline-block; text-align: center; text-transform: uppercase;}
.credit img {margin: 0 0 1em 0;}
.credit span {display: block;}