body {
    background-color: #F5F5F5;
}

body, h1, h2, h3, h4, p, a, address, ul {
    font-family: 'Roboto', sans-serif !important;
}

.site-green {
    color: #26b67c;
}

span.yellow {
    color: #ffeb7f;
}

span.gold {
    color: #FFD700;
}

span.black {
    color: #000;
}

main {
    display: block;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    text-align: center;
    padding: 40px 0;
}




#splash-label {
    display: inline-block;
    background-color: rgba(169,169,169, 0.5);
}


#enter-button {
    font-size: 1.5em;
    font-weight: 500;
    background-color: rgba(255,255,255, 0.8);
    display: block;
    max-width: 7em;
    margin: 20px auto;
}


h1, h2, h3 {
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 5px;
    font-weight: 500;
}

.sponsor > img {
    display: block;
    max-width: 100%;
}

footer {
    text-align: center;
}

img.sponsor, a.sponsor {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
}


img.sponsor, a.sponsor > img {
    max-height: 200px;
}


@media (min-width: 540px) and (orientation: portrait ), (min-height: 540px) and (orientation: landscape ) {

    h1, h2, h3 {
        margin-top: 20px;
        margin-bottom: 10px;
    }

    h1 {
        font-size: 9em;
    }

    h2 {
        font-size: 2em;
    }

    #enter-button {
        font-size: 2em;
    }
}

@media (min-height: 600px) and (orientation: landscape ), (min-height: 600px) and (orientation: portrait ) {
}

@media (min-height: 768px) and (orientation: landscape ), (min-height: 768px) and (orientation: portrait ) {
    h1 {
        font-size: 12.5em;
    }
}

@media (min-width: 1920px) {
    #enter-button {
        background-color: rgba(255,255,255, 0.7);
    }

    #enter-button:hover {
        background-color: #FFFFFF;
    }  
}