@charset "UTF-8";

body {
	font-family: "source-sans-pro", "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

#wrapper {
	width: 100%;
	text-align: center;
	margin: 40px 0;
    min-width: 300px;
}

header {
	font-weight: 300;
	font-size: .95em;
	text-transform: uppercase;
	line-height: 1.5;
	margin-bottom: 3em;
}

header.large {
    display: none;
}

header em {
	font-weight: 500;
	font-style: normal;
    font-size: .97em;
}

.redtype {
	color: #c00;
}

.numbers {
	margin: 0 auto .25em auto;
	width: 85px;
}

.numbers h1 {
    font-size: 10em;
	font-weight: 200;
}

.numbers p {
    display: none;
}

a:visited {
    color: inherit;
}

/* MEDIA QUERIES */

@media (min-width: 1000px){
    
    #wrapper {
        position: relative;
    }
    
    header.small {
        display: none;
    }

    header.large {
        display: block;
        letter-spacing: .02em;
    }
    
    nav {
        width: 80%;
        position: absolute;
        top: 199px;
        left:10%;
        z-index: -10;
    }
    
    .numbers {
        text-align: center;
        width: 12%;
        float: left;
        margin: 0 2%;
        color: #999;
    }
    
    .numbers h1 {     
	    font-size: 7em;
        position: relative;
        top: 0;
        transition: all 1s ease-out;
    }
    
    .numbers p {
        display: block;
        font-size: .75em;
        line-height: 1.3;
        text-align: left;
        color: #999;
        position: relative;
        top: 0;
        opacity: 0;
        transition: opacity 1s ease-out;
        transition-delay: .75s;
        margin-bottom: 3em;
    }
    
    .numbers span {
        font-weight: 600;
        text-transform: uppercase;
        font-size: .95em;
        color: black;
    }
    
    .numbers .redtype {
        font-size: inherit;
        color: #c00;
    }
    
    .numbers p em {
        font-style: normal;
        font-weight: 600;
        display: inline-block;
        margin-top: .5em;
    }
    
    .numbers:hover h1 {
        top: -32px;
        color: #c00;
    }
    
    .numbers:hover p {
        opacity: 1;
    }
    
    #bottom-box {
        width: 100%;
        padding: 25px 0 20px 0;
        background-color: white;
        border-top: solid 1px #999;
        position: absolute;
        top: 265px;
        z-index: 10;        
    }
    
}