/*
colors:

lighter #e1e1e1
light	#a5a5a5;
base	gray
dark	#5b5b5b;
darker	#1f1f1f;

blue	#3b5998
bright	#0072BB

highlight #ffffe0
*/

* {
    margin: 0;
    padding: 0;
}
@font-face {
    font-family: 'sc';
    src: url('type/linux-libertine-small-caps-webfont.eot');
    src: local('☺'), url('type/linux-libertine-small-caps-webfont.woff') format('woff'), url('type/linux-libertine-small-caps-webfont.ttf') format('truetype'), url('type/linux-libertine-small-caps-webfont.svg#webfont3Oj2PNhK') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
    /* ==================================================================  making it texty */
    
    font: 15px/1.25 "Adobe Caslon Pro", "adobe-caslon-pro",  "Hoefler Text", Georgia, Garamond, Times, serif;
    text-rendering: optimizeLegibility;
    -webkit-font-variant-ligatures: common-ligatures;
    font-variant-ligatures: common-ligatures;
    -moz-font-feature-settings: "kern=1";
    -webkit-font-feature-settings: "kern";
    font-feature-settings: "kern";
    font-kerning: normal;
    color: #1f1f1f;
    /* ===================================================================== da box */
    
    min-width: 450px;
    margin: 2em auto;
    min-height: 91vh;
}
/* ===================================================================== header */

@media screen and (min-width : 984px ){
    body {
        width: 43em;
        -webkit-box-shadow: 3px 3px 5px #999;
        -moz-box-shadow: 3px 3px 5px #999;
        box-shadow: 3px 3px 5px #999;
    }
}


header {
    padding: 2em 3em 4em 2em;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
header h1 {
  	font-family: sc;
    font-size: 1em;
    letter-spacing: 1px;
	text-align: center;
	margin: 0;
    padding: 0;
    color: gray;
    text-transform: capitalize;
    }
@media screen and (min-width: 750px) {
header h1 {
  
    text-align: right;
    
}}
header img{display:inline; float:right; padding-left:10px;}

@media screen and (min-width: 750px) {
    header .full {
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s linear 0.5s, opacity 0.5s linear;
    }
    header:hover .full {
        display: inline;
        visibility: visible;
        opacity: 1;
        transition-delay: 0s;
    }
    header:hover .short {
        display: none;
    }
}
/* ===================================================================== navigation */

@media screen and (min-width: 750px) {

nav {float: right;}
}


nav{     
	color: #5b5b5b;
    font-weight: 100;
    line-height: 1.25em;
    letter-spacing: 1px;
    font-size: 12px;
    font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
}
nav ul {
text-align: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
nav ul li {
    font-size: .95em;
    display: inline-block;
 }
    

nav ul li+li::before {
    content: "\0000a0·";
    padding-right: .5em;
}

#right {
    float: right;
    padding-right: 10.4em;
    text-align: right;
}
@media screen and (max-width: 730px) {
    subnav {
        display: none;
    }
}
@media screen and (min-width: 580px) {
    subnav {
        position: fixed;
        font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
        font-weight: 100;
        line-height: 1.25em;
        letter-spacing: 1px;
        font-size: 11px;
        width: 15em;
    }
    subnav ul li {
        padding: 5px;
				margin-right:-1.92em;

    }
    subnav.top ul li {
        display: inline-block;
        -webkit-transition: all .2s ease;
        -moz-transition: all .2s ease;
        -ms-transition: all .2s ease;
        -o-transition: all .2s ease;
        transition: all .2s ease;
    }
    subnav.side ul li {
        text-align: right;
        display: block;
    }
    subnav.side ul li+li {
        margin-top: 3px;
    }
    subnav.side ul li+li::before {
        content: "";
        padding-right: 10px;
    }
}
/* ===================================================================== main */

h1,
h2,
h3 {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 400;
    color: #1f1f1f;
}
h1 {
    font-size: 1.5em;
    padding: 1.51786em 0;
    text-align: left;
}
h2 {
    font-size: 1.5em;
    padding:  1.25em 0 .5em;
}
h3 {
    font-family: sc;
    font-size: .75;
    text-align: center;
    letter-spacing: 1px;
    padding-top: 1.5em;
    padding-bottom: 1.25852em;
}
h2.title {
    font-famiy: "adobe-caslon-pro", "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
    font-weight: 400;
    font-size: 1.5em;
    padding: 1.25em 0;
    text-align: center;
}
h2.title:first-child{padding-top:0; margin-top:-1em}

h4 {
    line-height: 1.25em;
    letter-spacing: 1px;
    color: #a5a5a5;
    margin-top: -1em;
    font-size: 10px;
    font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
    font-weight: 100;
    text-align: left;
}
p {
    color: #5b5b5b;
}
em {
    font-family: itl;
    font-style: normal;
}
b {
    color: #1f1f1f;
}
article {
	min-height: 75vh;
    font-weight: 400;
    font-famiy: "adobe-caslon-pro", "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
    width: 25em;
    position: relative;
    margin: 0 3.5em 1em;
    -webkit-animation: fadein 1.5s;
    -moz-animation: fadein 1.5s;
    ms-animation: fadein 1.5s;
    -o-animation: fadein 1.5s;
    animation: fadein 1.5s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@media screen and (min-width: 580px) {
    article {
	    
        width: 29em;
        opacity: 0;
        margin: 0 1em 0 3.5em;
        font-family: inherit;
    }
    article .pub {
        width: 31em;
    }
}
article p,
.city p {
    font-size: 1em;
    line-height: 1.5em;
    color: #1f1f1f;
}
article p+p,
.city p+p {
    margin-top: 1;
}
.city {
    padding-top: 3em;
}
@media screen and (min-width: 580px) {
    .city {
        margin-bottom: 0;
    }
    .city+.city {
        padding-top: 20vh;
    }
}
article p:last-child{padding-bottom: 2em;}

.center{text-align:center;font-size:10px; font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif; letter-spacing:1px;
}
.aboutme { 
    min-height: 300px;
    display: block;
}
p.poem {
    margin-top: 0;
    margin-left: 1em;
    text-indent: -1em;
}
.subtitle,
.subtitle a {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: .9em;
    font-weight: 200;
    color: #666;
    line-height: .5em;
    text-align: center;
}
.subtitle+.subtitle {
    margin-top: 0
}
blockquote {
    line-height: 16px;
    width: 80%;
    padding: 4px 0 4px 0;
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    margin: 1em auto;
    color: #666;
}
blockquote p+p,
.aboutme p:last-child {
    text-align: right;
}
.sidenote {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-weight: 200;
    position: absolute;
    padding-left: 41em;
    display: block;
    font-size: .75em;
    text-align: left;
    width: 10em;
    z-index: -1;
}
.sidenote:first-line {
    font-weight: 400;
}
.sidenote img {
    display: inline-block;
    vertical-align: text-bottom;
    padding: 0;
    margin-bottom: 2px;
}
blockquote p+p {
    text-align: right;
}
article img {
    display: block;
    margin: 10px auto;
    border: 0;
    padding-bottom: .5em;
}
article a img{text-align:center;}
em {
    font-style: italic;
}
/* ===================================================================== publications */
@media screen and (min-width: 580px) {

.gallery {
    width: 800px;
	margin-left:-3em;
}}
figure.covers {
    float: left;
    width: 300px;
    text-align: center;
    display: inline-block;
    height: 300px;
}
figure.covers {
    font-family: sc;
    letter-spacing: 1px;
}
figure img,
img.sshow:hover,
.sshow img {
    -webkit-transform: scale(1);
    transform: scale(1) ease-in-out;
    -webkit-transition: .5s;
    transition: .5s;
    padding: 0;
}
figure img:hover,
img.sshow:hover,
.sshow img:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1) ease-in-out;
    -webkit-box-shadow: 3px 3px 5px #999;
    -moz-box-shadow: 3px 3px 5px #999;
    box-shadow: 3px 3px 5px #999;
}

img.sshow:hover,
.sshow img:hover{
    position:relative;
	-webkit-transform: scale(2);
    transform: scale(2) ease-in-out;
	z-index: 1;
}
figure img:hover{
	position:relative;
	-webkit-transform: scale(1.2);
    transform: scale(1.2) ease-in-out;
	z-index: 1;
}
.hang p {
    margin-left: 1em;
    text-indent: -1em;
}
ul.toc {
    padding-left: 0px;
    text-align: left;
    list-style: none;
    line-height: 1.25;
    font-size: .95em;
}
ul.toc li {
    margin-left: 1em;
    text-indent: -1em;
    line-height: 1.5;
}
ul.toc li+li {
    margin-top: 1em;
}
ul.toc ul {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-weight: 200;
    padding-left: 10px;
    color: #666;
    list-style: none;
    font-size: .9em;
    margin: .5em 0 1em;
}
ul.toc ul li {
    text-indent: 0;
    margin-left: .5em;
}
/* ===================================================================== footer */


footer {
    margin: 4em 2em 2em 3.5em;
    border-top: 1px solid #666;
}
footer h1,
p {
    font-size: 0.85em;
    color: #6E6E6E;
    margin-top: 10px;
    padding: 0;
}
.ft {
    color: #3b5998;
    font-size: 1.25em;
    margin-left: -10px;
}
.ftimg{ 
	text-align: center;}

@media screen and (min-width: 580px) {
    footer {
        margin: 0 2em 2em 3.5em;
        padding-bottom: 2em;
        width: 30em;
    }
}
/* ===================================================================== bits */

::selection {
    background: #ffffad;
}
::-moz-selection {
    background: #ffffad;
}

.right {
    margin-left: 400px;
}
.rightup {
    margin-left: 400px;
    margin-top: -35px;
}
.def {
    font-family: sc;
    font-size: .75;
    letter-spacing: 1px;
}
.amp {
    font-family: "adobe-caslon-pro", "Adobe Caslon Pro";
}
img.cover {
    float: left;
    padding-top: 12px;
    padding-right: 10px;
    padding-botttom: 10px;
}
.box {
    padding: 10px;
    border: 1px solid #ddd;
    margin: 0 auto;
    max-width: 340px;
}
.box img {
    max-width: 100%;
    border: 1px inset #999;
    padding: 0;
}
.hidden {
    display: none;
    z-index: 100;
    animation: fadein 2s;
    -moz-animation: fadein 2s;
    -webkit-animation: fadein 2s;
    -o-animation: fadein 2s;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 2s, opacity 2s linear;
}
.unhidden {
    display: block;
    z-index: 100;
    animation: fadein 2s;
    -moz-animation: fadein 2s;
    -webkit-animation: fadein 2s;
    -o-animation: fadein 2s;
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}
.bye,.hello{
	display: none;
}
#clue,.unhidden{
	display:inline;
	transition-delay: .5s
}
#clue.hidden{
	display:none; 
	transition-delay: .5s
}
.highlight {
    background-color: #FFFF66;
    top: 1px;
    color: #000;
    border-radius: 10px;
    margin: 10px;
    padding: 10px;
    text-align: left
}
label {
    float: left;
    text-align: right;
    margin-right: 15px;
    width: 100px;
}
label+label {
    margin-top: 1em;
}
input {
    border: 0;
    border-bottom: 1px dashed #666;
    paddding-bottom: 0;
    font: 16px/1.5 itl;
    color: #0072BB;
    text-rendering: optimizeLegibility;
}
input:hover {
    color: #0072BB;
    cursor: auto;
    border-color: #0072BB;
    outline: 0;
}
input:focus {
    border-color: #0072BB;
    outline: 0;
}
.submit {
    color: #666;
    background-color: #fff;
    margin-top: 2em;
    border: 1px solid #333;
    border-radius: 5px;
    float: right;
}
.submit:focus {
    color: #0072BB;
}
.seb_pay {
    text-align: right;
}
.seb_submit {
    float: right;
    background-color: #fff;
    border: 0;
}
.wordfoot {
    text-align: center;
    font-size: .75em;
}
.footnote {} #arrows img.left {
    float: left;
    padding: 20px;
    margin-left: -20px;
    margin-top: -45px;
}
#arrows img.right {
    float: right;
    padding: 20px;
    padding-left: -20px;
    margin-top: -58px;
}
.center img {
    display: inline;
    text-align: center;
}
.clear {
    clear: both;
}
/* =====================================================================  apf */

#apf {
    height: 1100px;
}
.scroll {
    top: 950px;
}
.apftitle {
    position: fixed;
    top: 70em;
}

.p0{
 	position: absolute;
    width: 25em;
    margin: -80px auto;
}
.p1 {
    position: absolute;
    opacity: 1;
    border: 1px solid #999;
    width: 33em;
    margin: 0 auto;
}
.p2,
.p3 {
    position: absolute;
    opacity: 0;
    border: 1px solid #999;
    width: 33em;
    margin: 0 auto;
}
.pin {
    position: fixed;
    top: 100px;
}
/* =====================================================================  sebastian */

.sshow {
    width: 35em;
    margin-left: -2em;
}
.sshow img {
    float: left;
    display: inline-block;
}
.sshow img+img {
    margin-left: 2em;
}
#sebpics img {
    margin-left: -5px;
    padding: 0;
}
.clearfix:after {
    content: '';
    display: block;
    clear: both;
}

/* =====================================================================  magic */

.trick{
	border:1px solid #eee;
	padding:2em;
}

/* =====================================================================  doors */

#door1 {
    color: #fff;
    font-size: 1em;
    cursor: default;
	padding-top: 25vh;
  
}
#door1::selection {
    background: #fff;
    color: #000;
    cursor: default;
}
#door1::-moz-selection {
    background: #fff;
    color: #000;
    cursor: default;
}
.here{
	display:inline-block;
	animation: fadein .5s;
    -moz-animation: fadein .5s;
    -webkit-animation: fadein .5s;
    -o-animation: fadein .5s;
 	}
.gone{display: none;}

#clue,.unhidden{display:inline; transition-delay: .5s}
		#clue.hidden{display:none; transition-delay: .5s}
		#clue a{text-decoration: none;}



/* .high::after{content:'hello world'; color:red;} */

.erase h2::selection{color: #fff; background: #fff;}
.erase h2::-moz-selection {color: #fff; background: #fff;}
.erase p::selection{color: #fff; background: #fff;}
.erase p::-moz-selection {color: #fff; background: #fff;}
.red::selection {background:#fff;color:red;}
.red::-moz-selection  {background:#fff;color:red;}

/* =====================================================================  cut 
.corner{margin-left:-3em;}

.small{
	font-size:.85em;}
	
.shade{background-color:#ddd; padding:1em;}


.temp{
    -webkit-transition:all 1s ease-out;  
   	-moz-transition:delay 1s ease-out;  
   	-o-transition:all 1s ease-out;  
   	transition:all 1s ease-out;  }
.temp2
{
	opacity: 1;
-transition-property: opacity;
-webkit-transition-duration: 4s;
	position:relative;
	top:-275px;
	margin-left:3px;
}

*/
/* =====================================================================  links  */


a,
.subtitle a {
    color: #3b5998;
    text-decoration: none;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    background-image: none;
}
p a {
    color: inherit;
    background-image: linear-gradient(to top, #fff 0%, #fff 49%, #000 50%, #000 100%);
    background-size: 2px 2px;
    background-repeat: repeat-x;
    background-position: 0 97.5%;
    text-shadow: 0.03em 0 #fff, -0.03em 0 #fff, 0.05em 0 #fff, -0.05em 0 #fff, 0.09em 0 #fff, -0.075em 0 #fff;
}

img a {
    border: 0
}
#arrow img a {
    opacity: .5;
}
#arrow img a:hover {
    opacity: 1;
}
header h1 a {
    color: #1f1f1f;
}
nav a {
    color: #3b5998;
    padding: 3px;
    display: inline-block;
}
nav a:last-child {
    padding-right: 0;
}
subnav.side ul li a {
    color: #e1e1e1;
    padding: 5px 10px 5px 5px;
    margin-right: -7px;
}
subnav.side ul li a:hover {
    color: #1f1f1f;
}
subnav.side ul li a.active {
    background-color: #e50000;
    padding-right: 15px;
    transition: all .1s linear 0s;
}
p.quiet a{text-decoration: none;
	    background-image: none;
}

a:hover,
.center a,
.center a:hover,
.subtitle a:hover,
.ftimg a,
.ftimage a:hover,
a.footnote {
    color: #0072BB;
    text-decoration: none;
    background-image: none;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
}

p a:hover {
    color: inherit;
    background-image: linear-gradient(to top, #fff 0%, #fff 49%, #39b5de 50%, #39b5de 100%);
    background-size: 2px 2px;
    background-repeat: repeat-x;
    background-position: 0 97.5%;
    text-shadow: 0.03em 0 #fff, -0.03em 0 #fff, 0.05em 0 #fff, -0.05em 0 #fff, 0.09em 0 #fff, -0.075em 0 #fff
}

#button1,
#button2,
#button3 {
    background-color: #fff;
    background-image: none;
    cursor: pointer;
}
/* ===================================================================== animation */

.enter {
    animation: fadein 2s;
    -moz-animation: fadein 2s;
    /* Firefox */
    
    -webkit-animation: fadein 2s;
    /* Safari and Chrome */
    
    -o-animation: fadein 2s;
    /* Opera */
}
.enter.one {
    -webkit-animation-delay: 0, .3s;
}
.enter.two {
    -webkit-animation-delay: 0, 1s;
}
.enter.three {
    -webkit-animation-delay: 0, 1.5s;
}
.enter.four {
    -webkit-animation-delay: 0, 2s;
}
.enter.five {
    -webkit-animation-delay: 0, 3s;
}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Firefox */

@-moz-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Safari and Chrome */

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Internet Explorer */

@-ms-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
​
/* Opera */

@-o-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
​