body {
font-family: 'europa', sans-serif;
font-weight: 300;
font-size: 1.15rem;
line-height: 2rem;
color: rgb(0,0,0);

height: 100%;
width: 100%;
margin: 0;
background: rgb(255,255,255);
}

    ::selection {background: rgba(0,0,0,.5);}
    ::-moz-selection {background: rgba(0,0,0,.5)}

/* 300, 400, 700

div, header, footer, ul, li {border: 1px solid cyan;}
section, figcaption {border: 1px solid red;} */

h1 {text-align: center;}

h1, h2 {
font-weight: 700;
font-size: 2rem;
line-height: 2.5rem;
letter-spacing: -0.02rem;
margin: .5rem 0;
}

h3 {
font-weight: 700;
font-size: 1.5rem;
line-height: 2rem;
letter-spacing: -0.02rem;
margin: .5rem 0;
}

h4, .lead {font-weight: 700;}

    p {
    margin: 0 0 1rem 0;
    }

        .date {margin: 0;}

    a {
    text-decoration: none;
    color: inherit;
    }

    p a {
    border-bottom: 1px solid rgba(0,0,0,.5);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    }

    p a:hover {
    border-bottom: 1px solid rgba(0,0,0,0);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0);
    background: rgba(0,0,0,.5);
    }

/* nav */

header {
float: left;
height: 50vh;
min-height: 378px;
width: 100%;
padding: 2rem 0 0 0;

display: flex;
align-items: stretch;
flex-wrap: wrap;
}

header div {max-width: 500px;}

/* global */

main {
float: left;
width: 100%;
padding: 1rem;
}

    div {float: left;}

    .type {
    max-width: 678px;
    margin: 0 auto;
    padding: 2rem;
    }

section {
float: left;
width: 100%;
padding: 1rem;
}

section img {display: block;}

    .container {width: 100%;}

.padding {padding: 2rem;}
.none {padding: 0;}

.left {float: left;}
.right {float: right;}

.width_25 {width: 25%;}
.width_33 {width: 33.33%;}
.width_50 {width: 50%;}
.width_66 {width: 66.66%;}
.width_75 {width: 75%;}
.width_100 {width: 100%;}


.flex {
display: flex;
align-items: stretch;
flex-wrap: wrap;
}

    .left {display: flex; flex-direction: column; justify-content: center;}
    header, section, .center {display: flex; align-items: center; justify-content: center;}
    .bottom {display: flex; align-items: center; justify-content: flex-end;}

.button {
display: inline-block;
font-weight: 700;
font-size: .8rem;
line-height: 2rem;
text-transform: uppercase;
letter-spacing: 0.05rem;
margin: 0 0 .5rem 0;
padding: 1rem 2rem;
background-color: rgb(0,0,0);
color: rgb(255,255,255);
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
transition: all .4s ease;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
}

    .button:hover {background-color: rgba(0,0,0,.5);}

.grey {background-color: #f6f6f6;}

/* figure */

.flex figure {
position: relative;
}

figure {width: 100%;}
figure img {max-width: 100%; margin: 0 auto;}

    .portrait img {max-height: calc(100vh - 4rem);}

figcaption p {
font-weight: 400;
margin: 0;
}

/* portfolio */

.portfolio {width: 100%; max-width: 1200px;}

.portfolio figure {position: relative; width: 100%; margin: 1rem 0;}

.portfolio figcaption {
float: left;
font-weight: 700;
font-size: .9rem;
padding: .5rem 1rem;
color: rgba(0,0,0,.5);
    
transition: all .4s ease;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
}

.portfolio figcaption:hover {color: rgba(0,0,0,1);}

.portfolio figcaption span {margin: 0 .5rem;}

/* video */

.video {
position: relative;
height: 0;
width: 100%;
max-width: 62.5%;
margin: 1rem 0;
padding-bottom: 35.2%;
overflow: hidden;
}

.video iframe, .video object, .video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* progress */

#progress {
display: none;
position: fixed;
bottom: 0;
width: 100%;
padding: 2rem;
background: #fff;
}

#progress_track {
width: 100%;
height: 8px;
background: #f6f6f6;
}

#progress_bar {
height: 8px;
background: #000;
width: 0%;
}

/* footer */

footer {
float: left;
width: 100%;
padding: 2rem;
    
text-align: center;
}

@media (max-width: 960px) {
.video {
max-width: 100%;
padding-bottom: 56.25%;
margin: 0;
}
}

@media (max-width: 678px) {
h1, h2 {
font-size: 1.75rem;
line-height: 2.25rem;
}
    
    header div {padding: 2rem;}

.type {padding: 0;}
}