.main { font-family:'Source Sans Pro';  }

nav {  padding-bottom: 7px; box-shadow: 2px 2px 4px #aaa; width:100%; }

h1 { font-family: 'Arvo'; float:left; font-size:3.5em; }

h2 {font-size:2.25em; }

nav ul {float:right; line-height:3; margin-bottom:0;}

nav ul li { list-style:none; display:block; float:left;  border-right:1px solid #eee;}

nav ul li a { color:#454545; font-family:'Cabin'; padding:0px 15px;}

.colors { margin-top:60px; }

.colors div {
    height: 200px;
    color: #fff;
    text-align: center;
    font-size: 1.5em;
    line-height: 8em;
    width:23%;
    margin:1%;
    box-shadow: 2px 2px 4px #aaa;
}

.colors div:first-child { background-color:#205251; }

.colors div:nth-child(2) { background-color:#454545; }

.colors div:nth-child(3) { background-color:#8c8c8c; }

.colors div:nth-child(4) { background-color:#344152; }



.sizes { line-height:1.4em; margin-top: 60px; }

.body_text div {font-size:1.1em; line-height:1.3em; }

.typefaces { margin-top:60px; }

.typefaces div div{ font-size:2em; line-height:1.8em; }

.typefaces .row:first-of-type { font-family:'Arvo'; }

.typefaces .row:nth-of-type(2) { font-family:'Source Sans Pro'; }

.typefaces .row:nth-of-type(3) span:first-child{ font-family:'Nobile'; }

.typefaces .row:nth-of-type(3) span:nth-child(2){ font-family:'Montserrat'; }

.typefaces .row:nth-of-type(3) span:nth-child(3){ font-family:'Cabin'; }

button {margin-top:60px; box-shadow: 2px 2px 4px #aaa;}

form { margin-top:50px; }

input{
    -webkit-appearance: none;
    background-color: white;
    font-family: inherit;
    border: 1px solid #8c8c8c;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.75);
    display: block;
    font-size: 1.2em;
    margin: 0 0 1rem 0;
    padding: 0.5rem;
    height: 2.8rem;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: -webkit-box-shadow 0.45s, border-color 0.45s ease-in-out;
    -moz-transition: -moz-box-shadow 0.45s, border-color 0.45s ease-in-out;
    transition: box-shadow 0.45s, border-color 0.45s ease-in-out;
}

.buttons { margin-bottom:40px; }

.buttons button {margin-right:10px; }

.buttons button:hover, button:focus, .button:hover, .button:focus  {background-color:#fff; }

.buttons button:nth-child(2):hover { background-color:#fff; color: #205251;  border:2px solid #205251;}

.buttons button:nth-child(2){ background-color:#454545;  border:2px solid #454545;  }

.buttons button:nth-child(2):hover{ background-color:#fff; color: #454545;  border:2px solid #454545; }

.buttons button:nth-child(3){ background-color:#8c8c8c; border:2px solid #8c8c8c; }

.buttons button:nth-child(3):hover{ background-color:#fff; color: #8c8c8c;  border:2px solid #8c8c8c;  }

.buttons button:nth-child(4){ background-color:#205251; border:2px solid #205251; }

.buttons button:nth-child(4):hover { background-color:#fff; color: #205251;  border:2px solid #205251;}