@import url(arimo700.css);
@font-face {
  font-family: HelveticaLight;
  src: local("Helvetica Neue Light"),
       local("HelveticaNeue-Light");
}

/* Turn on border-box for all elements. */
* { 
    -moz-flex-sizing: border-box; 
    -webkit-flex-sizing: border-box; 
    box-sizing: border-box;
}

body {
    background:white;
    color:#111111;
    margin: 0 auto;
    font-family: HelveticaLight, sans-serif;
    max-width: 50em;
    min-height: 25em;
    overflow: hidden;
}

body, html { width: 100%; height: 100%; }

a:link, a:visited, a:hover, a:active { color: #222; }

.content { 
    height: 100%;
    width: 100%;
    padding: 0 1rem; 
}
.content > div { margin-bottom: 1em; }

body, .content {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}

body, .content {
    -webkit-flex-direction: column;
    -moz-flex-direction: column;   
    flex-direction: column;
}

.hbox {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;

    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
}
.vbox {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;

    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
}
.stretch {
    -webkit-align-items: stretch;
    -moz-align-items: stretch;
    align-items: stretch;
}
.hbox.left {
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start;
}
.hbox.baseline {
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
}
.center { text-align: center; }
.right { text-align: right; }
.left { text-align: left; }
.flex {
    -webkit-flex: 1;
    -moz-flex: 1;
    flex: 1;
}
.title { 
    font-family: Arimo, sans-serif;
    font-size: 400%; 
}
.first { color: rgb(120, 120, 120); }

.navigation a { text-decoration:none; color: rgb(120, 120, 120); }
.navigation a:before { content: "["; }
.navigation a:after { content: "]"; }

.navigation .current { color: black; }

.viewport { 
    position: relative; 
    white-space: nowrap;
    vertical-align: top;
    overflow-x: scroll;
    overflow-y: hidden;
}

.snap-x {
    scroll-snap-type: x mandatory;
}

.snap-start {
    scroll-snap-align: start;
}

.page {
    position: relative;
    min-width: 100%;
    white-space: normal;
    font-size: 150%;
    padding: 0.5em 0.5em;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    flex: 0 0 100%;
    overflow: scroll;
}

.page > div {
    overflow-y: auto;
}

/* Firefox does not allow children of flex-boxes to specify
   percentage widths.  For Firefox only, specify a fixed width
   for each page. */
@-moz-document url-prefix() {
/*    .page { width: 800px; max-width: 800px; min-width: 800px; } */
}

#who p {
    margin: 1em 1em;
}

#where dd { 
    -webkit-margin-start: auto; 
    margin-left: auto;
    margin-bottom: 1em;
}

.red { background-color: #FF5B3F; }
.green { background-color: #33CC66; }
.blue { background-color: #6699CC; }
.orange { background-color: #FF9933; }

.email {
    display: inline-flex;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;

    flex-direction: horizontal;
    -webkit-flex-direction: horizontal;
    -moz-flex-direction: horizontal;

    text-decoration: underline;
}
.email > .one {
    order:3;
    -moz-order:3;
    -webkit-order:3; 
}
.email > .two { 
    order:2;
    -moz-order:2;
    -webkit-order:2; 
}
.email > .three {
    order:1;
    -moz-order:1;
    -webkit-order:1; 
}
.email > .three:after { content: "@"; }

#flickr {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
    max-width: 35rem;
    margin: 0 auto;
}

#flickr a {
    display: inline-block;
    width: 7rem;
    height: 7rem;
    border: 0.3rem transparent;
    position: relative;
    -webkit-transform: scale(0.66);
    -webkit-transform-origin: 0 0;
    -webkit-transition: -webkit-transform 0.25s;
}
#flickr a:hover,
#flickr a:active {
    -webkit-transform: translate(-1.6rem, -1.6rem);
    z-index: 1;
}

@media screen and (max-width: 200px)

@media screen and (max-device-width: 480px) {
    .page {
        font-size: 100%;
    }
}