* {
box-sizing: border-box;
}

body {
margin: 0;
background-color: white;
font-family: 'Sorts Mill Goudy', serif;
}
a {
color: black;
}
h1,h2,h3 {
font-weight: lighter;
letter-spacing: .2rem;
}
#top h3 {
text-transform: uppercase;
}
#top {
padding-top: 17vh;
text-align: center;
background-color: black;
color: white;
height: 100vh;
}
.portrait {
height: 40vh;
border-radius: 50%;
margin-top: 8vh;
}
.container {
max-width: 1200px;
margin: 50px auto;
padding: 0 2%;
}
.col div {
width: 100%;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 80px 0;
margin: 50px 0;
}
.col img {
width: 100%;
margin: 50px 0;
box-shadow: 10px 10px 30px rgba(0,0,0,.4);
}
.col {
width: 50%;
padding: 0 5%;
float: left;
}
footer {
text-align: center;
clear: both;
border-top: 1px solid black;
padding: 15px;
}
nav {
position: fixed;
top: 0;
text-align: center;
border-bottom: 1px solid black;
padding: 15px;
margin: 0 auto;
}
nav, footer {
width: 100%;
background: black;
color: white;
box-shadow: 0 0 20px rgba(0,0,0,.6);
}
nav a {
color: white;
display: inline-block;
border-bottom: 1px solid;
margin: 0 10px;
padding: 10px;
text-decoration: none;
}

@media (max-width: 768px) {
html {
-webkit-text-size-adjust: 100%; /* Prevent landscape font scaling iOS */
}
.portrait {
height: 37vh;
border-radius: 50%;
margin-top: 5vh;
}
.col {
float: none;
width: 100%;
padding: 0 5%;
}
nav {
padding: 15px 0;        
}
nav a {
padding: 10px 0;
margin: 0 1px;
}
}