.sans-serif {
    font-family: "ff-basic-gothic-web-pro", "ff-basic-gothic-web-pro", Arial, Verdana, sans-serif
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}
body {
    line-height: 1
}
ol,
ul {
    list-style: none
}
blockquote,
q {
    quotes: none
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
body {
    background: #fbfbfb;
    font: 16px/24px "lapture", Georgia, "Times new Roman", serif;
    color: #333130;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%
}
#title {
    width: 100%;
    text-align: center;
    position: fixed;
    background: #fbfbfb;
    z-index: 50;
    top: 0;
    padding-bottom: 1em
}
#title h1 {
    margin-bottom: 0;
    text-transform: uppercase;
    font-size: 2em;
    letter-spacing: .25em
}
#title h1 a {
    border-bottom: 0!important;
    color: #333130!important;
    padding-bottom: 0!important
}
#title h1 a:hover {
    color: #222!important
}
.intro {
    overflow: hidden;
    margin-bottom: 2em;
    background: url(../images/blood-still01.jpg) no-repeat;
    background: url(../images/blood-still02.png) no-repeat fixed 93% 30%, url(../images/blood-still01.jpg) no-repeat;
    background-color: #000;
    color: #fbfbfb;
    height: 440px
}
.intro div.columns {
    background-color: rgba(0, 0, 0, 0.6);
    padding: 20px;
    margin-left: -10px;
    padding-top: 150px;
    height: 330px;
    overflow: hidden
}
.bio {
    padding-top: 140px;
    margin-bottom: 2em
}
#about {
    margin-top: 2em;
    padding: 1em 0;
    background: #333130;
    color: #fbfbfb
}
.colophon {
    margin: 3em 0 1em 0
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "ff-basic-gothic-web-pro", "ff-basic-gothic-web-pro", Arial, Verdana, sans-serif;
    font-weight: normal
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    font-weight: inherit
}
h1 {
    font-size: 2.5em;
    line-height: 2em;
    margin-bottom: 1em
}
h2 {
    font-size: 1.75em;
    line-height: 1.5em;
    margin-bottom: 1em;
    text-align: center
}
h3 {
    font-size: 1.125em;
    line-height: 1.5em;
    margin-top: 1em;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .125em;
    color: #111;
    -webkit-transition: .3s color ease-in-out
}
h4 {
    font-size: 21px;
    line-height: 30px;
    margin-bottom: 4px
}
h5 {
    font-size: 17px;
    line-height: 24px
}
h6 {
    font-size: 14px;
    line-height: 21px
}
.subheader {
    color: #777
}
p {
    margin: 0;
    text-indent: 1.5em
}
h3+p,
h2+p,
p.first,
hgroup+p {
    text-indent: 0
}
p img {
    margin: 0
}
p.lead {
    font-style: italic;
    text-indent: 0;
    font-size: 1.25em;
    line-height: 28px
}
em {
    font-style: italic;
    color: #111
}
strong {
    font-weight: bold;
    color: #2
}
small,
.small {
    font-size: .875em;
    font-style: italic
}
blockquote,
blockquote p {
    font-size: 17px;
    line-height: 24px;
    color: #777;
    font-style: italic
}
blockquote {
    margin: 0 0 20px;
    padding: 9px 20px 0 19px;
    border-left: 1px solid #ddd
}
blockquote cite {
    display: block;
    font-size: 12px;
    color: #555
}
blockquote cite:before {
    content: "\2014 \0020"
}
blockquote cite a,
blockquote cite a:visited,
blockquote cite a:visited {
    color: #555
}
hr {
    border: solid #ddd;
    border-width: 1px 0 0;
    clear: both;
    margin: 2.5em 0 1.5em;
    height: 0
}
#about h3 {
    color: #fbfbfb
}
a,
a:visited {
    color: #509ba4;
    text-decoration: none;
    outline: 0;
    padding-bottom: .125em;
    -webkit-transition: .3s color linear;
    -moz-transition: .3s color linear;
    -o-transition: .3s color linear;
    transition: .3s color linear
}
a:hover,
a:focus {
    color: #a2d1cc;
    border-bottom: 1px solid #a2d1cc
}
a.img {
    border: 0
}
p a,
p a:visited {
    line-height: inherit
}
a>div {
    color: #333130;
    cursor: pointer
}
ul,
ol {
    margin-bottom: 20px
}
ul {
    list-style: none outside
}
ol {
    list-style: decimal
}
ol,
ul.square,
ul.circle,
ul.disc {
    margin-left: 30px
}
ul.square {
    list-style: square outside
}
ul.circle {
    list-style: circle outside
}
ul.disc {
    list-style: disc outside
}
ul ul,
ul ol,
ol ol,
ol ul {
    margin: 4px 0 5px 30px;
    font-size: 90%
}
ul ul li,
ul ol li,
ol ol li,
ol ul li {
    margin-bottom: 6px
}
li {
    line-height: 18px;
    margin-bottom: 12px
}
ul.large li {
    line-height: 21px
}
li p {
    line-height: 21px
}
img.scale-with-grid {
    max-width: 100%;
    height: auto
}
img.align-left {
    padding: 0 1em 0 0;
    float: left
}
.logo img {
    opacity: .4;
    -webkit-transition: .3s opacity ease-in-out
}
.logo img:hover {
    opacity: 1
}
.logo a:hover {
    border: 0
}
.remove-bottom {
    margin-bottom: 0!important
}
.half-bottom {
    margin-bottom: 10px!important
}
.add-bottom {
    margin-bottom: 2em!important
}
.center {
    text-align: center;
    text-indent: 0
}
section#projects {
    margin-bottom: 2em
}
section#projects div.container {
    padding: 1em 0 2em
}
section#projects hgroup {
    margin-bottom: 1em
}
.project {
    height: 310px;
    overflow: hidden
}
.description {
    opacity: .3;
    -webkit-transition: .3s opacity ease-in-out
}
.description p {
    font-size: .875em
}
.project:hover .description {
    opacity: 1
}
.circus:hover h3 {
    color: #509ba4
}

.hamlet:hover h3,
.witchcraft:hover h3,
.cymbeline:hover h3 {
    color: #ad963a
}
.dialogues:hover h3 {
    color: #fbfbfb
}

.hamlet {
    background: #000 url(../images/francois-bw.png) no-repeat 10% 10%
}
.hamlet a,
.hamlet p {
    color: #fbfbfb
}
.hamlet h3 {
    color: #fbfbfb
}
.circus {
    background: #fbfbfb url(../images/resonance-circus.png) no-repeat 76% 50%;
    background: url(../images/resonance-circus.png) no-repeat 76% 50%, url(../images/resonance-circus-acrobat2.png) no-repeat 80% 10%, url(../images/circus_pattern.png)
}
.witchcraft {
    background: #333130 url(../images/resonance-witchcraft.png) no-repeat 10% 10%
}
.witchcraft a,
.witchcraft p {
    color: #fbfbfb
}
.witchcraft h3 {
    color: #fbfbfb
}
.dialogues {
    background: #ad963a url(../images/dialogues-fantasques.png) no-repeat 9% -5%
}
.dialogues h3,
.dialogues p {
    color: #fbfbfb
}
.cymbeline {
    background: #d1c8a2 url(../images/cymbeline-materials.png) no-repeat 95% 0
}