/* BASICS */

body, h1, h2, h3, h4, h5, h6, p, small {
    font-family : Helvetica, Arial, sans-serif;
    line-height : 1.25em;
    color       : #000;
    font-weight : 300;
    margin: 0px;
}

h1,h2 {
    font-weight : bold;
    font-size   : 22px;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

h2 {
    font-weight : bold;
    font-size   : 20px;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

h3 {
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

p {
    font-size   : 16px;
    margin-bottom : 2px;
}

small {
    font-size   : 14px;
}

image {
    align-content: center;
}


.sect-odd {
    background-color: auto;
    width: auto;
}

.sect-even {
    background-color: #f2f3f4;
    width: auto;
}

.top-img {
    border-radius: 8%;
}

#headshot {
    border-radius: 10%;
    opacity: .95;
}

/* LINKS */

a {
    color              : black;
    text-decoration    : underline;
    -webkit-transition : all 0.3s ease 0s;
    -moz-transition    : all 0.3s ease 0s;
    -o-transition      : all 0.3s ease 0s;
    transition         : all 0.3s ease 0s;
}



ul {
    padding: 2px;
    margin: 2px;
    list-style: none;
}

/* LAYOUT */

header {
    vertical-align: top;
    padding : 10px;
    margin: 10px;
}

section {
    vertical-align: top;
    padding : 10px;
    margin: 10px;
    padding-bottom: 20px;
}

.wrapper {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.nav-column {
    background-color: white;
    order: 1;
    flex: 1 1;
    align-self: flex-start;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
  
.main-column {
    background-color: white;
    order: 2;
    flex: 2 2;
    align-self: flex-start;
    right: 0px;
}


/* ADJUST */

@media (max-width : 600px) {
    .wrapper {
        flex-wrap: wrap;
    }
    .nav-column {
        width    : 100%;
        flex: auto;
        position : relative;
    }

    .main-column {
        width      : 100%;
        flex: auto;
        position   : relative;
        box-shadow : none;
    }
}