/* Eric Meyer's Reset CSS v2.0 */

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 {border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
margin:0;
padding:0 }

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block }

body {line-height:1;
/*max-width: 1200px;
margin: 0 auto*/ }

ol,ul {list-style:none }

blockquote,q {quotes:none }

blockquote:before,blockquote:after,q:before,q:after {content:none }

table {border-collapse:collapse;
border-spacing:0 }

body {background: #fff;
font: 16px/1.5em "Helvetica Neue", Helvetica, Arial,  san-serif ;
font-weight: 200;
color: #222;
padding-top: 4em; }

a {text-decoration: none;
color: #ce0d14;
padding-bottom: 1px; }

a:hover, a:focus {border-bottom: 2px solid #ce0d14; }

sup {vertical-align: super;
font-size: .625em;
line-height: 2.4em; }

em, strong {font-weight: bold; }

header {position: fixed;
top: 0;
background: transparent;
width: 100%;
padding-top: .5em;
z-index: 501;
text-align: center;
text-overflow: ellipsis-word; 
display: block}

header {text-align: left;
padding-top: 1.5em; 
margin: 0 auto}


#logo {
height: 53px;
margin: 0 auto;
display: block;
position: relative;
top: -14px; 
width: 80%;
padding: 0}


#logo:hover, #logo:focus {border-bottom: none; }

#logo img {float: left;
margin-right: .2em;
width: auto;
height: 45px; }


#logo:hover:after, #logo:focus:after {background: none; }

#logo .logotype {font-family: futura-pt, futura, san-serif;
word-spacing: -.2em;
color: #000;
font-size: 1.1em}

nav {width: 100%;
padding-left: 0;
margin: 0 0 2em 0;
text-align: right;
background-color: #000; font-family: futura-pt, futura, san-serif}

nav ol {
width:80%;
margin: 0 auto}

.dates {position: absolute;
top: 12px;
text-align: right;
color: #000;
width: 90%;
margin: 0 auto;
padding-left: 0;
font-size: 1em; }


nav li {font-size: 1.125em;
line-height: 1.333em;
display: inline-block;
margin-right: 1.1em; }

nav li:last-of-type  {
	margin-right: 0
}

nav a {color: #fff; }

nav .active {border-bottom: 2px solid #ce0d14; }

nav .active:focus, nav .active:hover {border-bottom-color: #bbb; }

nav a[href='#register'] { }

.ie7 {position: absolute;
top: 0;
right: 0;
width: 28%;
padding: .75em 1%;
background: #fff;
border-left: 2px solid #ce0d14;
border-bottom: 2px solid #ce0d14; }

/* Generic content styles */

#schedule, #workshops, #venue, #sponsors, #proposition, #howitworks, #about, #respond, #spiel, #fineprint {width: 80%;
margin-left: auto;
margin-right: auto; }

#schedule, #workshops, #venue, #sponsors, #register, #footer, #howitworks, #about {padding-top: 1em;

/*top: -100px;
padding-top: 100px */}

#schedule, #workshops, #venue, #sponsors, #about, #howitworks {overflow: auto; }

#schedule {padding-top: 8em;
margin-top: -8em;
overflow: auto
}

p+p {margin-top: .75em; }

h1 {font-size: 2.4em;
line-height: 1.125em;
clear: both;
margin-bottom: .281em;
font-family: futura-pt, futura, san-serif;
font-weight: 900;
color: #000;
text-transform: uppercase;
margin-top: 2em;
color: #fff;
background: #000;
padding: 0 .2em;
width: intrinsic;			/* Safari/WebKit uses a non-standard name */
width: -moz-max-content;	/* Firefox/Gecko */
width: max-content;	/* Firefox/Gecko */
}

h2 {font-style: italic;
color: #ce0d14;
margin-top: 1.5em;
margin-bottom: .325em;
font-family: futura-pt, futura, san-serif;
color: #ffffff;
background-color: #ce0d14; 
font-weight: 600;
font-size: 1.1em;
padding: .2em ;
display: block;
text-transform: uppercase;
clear: both;
width: intrinsic;			/* Safari/WebKit uses a non-standard name */
width: -moz-max-content;	/* Firefox/Gecko */
width: max-content;	/* Firefox/Gecko */
 }

h3, h4, .dates, footer #copyright, .button, #register th, .sessiontitles {font-family: futura-pt, futura, sans-serif;
text-transform: uppercase;
letter-spacing: .1em; }

h1, h2, h3, h4 {
letter-spacing: -.05em;
word-spacing: .05em}

h3 {padding: 0 .2em}

p {line-height: 1.3}

#spiel {
font-size: 2.2em;
font-weight: 300;
line-height: 1.5;
margin-bottom: 1em;}

#spiel p:first-of-type {
	font-size: 1.2em;
	display: block
}

#spiel p {display: none}

#spiel .button {
	display: none;
}

#respond {
position:-webkit-sticky;
position: sticky;
/*position: relative;*/
top: 0;
z-index: 500;
width: 100%
}

#respond h1 {
text-align: center;
font-size: 10em;
font-weight: 900;
text-transform: uppercase;
font-style: italic; 
font-family: futura-pt, futura, san-serif;
color: #ffffff;
background-color: #ce0d14; 
width: 100%;
padding: 0;
height: auto;
margin: 0 auto;
line-height: .95;
-webkit-transition: max-height .4s cubic-bezier(.74,0,.51,1), -webkit-transform .5s;
transition: font-size .5s cubic-bezier(1,-0.08,1,.8), -webkit-transform .5s;
min-height: 60px;
text-rendering: optimizeLegibility;
/*max-height: 1.5em
*/}

#respond.stickerStuck h1 {
font-size: 3em;
/*-webkit-transform: translateX(-.6em)*/
/*-webkit-animation: poptext .4s ease-in;*/
/*max-height: 90px;*/
/*max-height: 75px*/
}

#respond.stickerStuck h1 abbr {display: inline-block;
}

#respond h1 abbr {-webkit-transition: left .4s}

#respond h1 span#char2 {padding-right: .02em}

#respond h1 span#char4 {padding-right: .04em}

/*#respond.stickerStuck h1 span{
	display: inline-block;
	-webkit-transform-origin: 50% 0;
	-webkit-transform: scale(.5)
}*/
 

/* Intro */

#intro {padding-top: 50px;
height: 200px;
margin-top: -10px;
background: url(images/operahouse.jpg) center center no-repeat;
background-size: cover }

#intro h1 span {display: block }

#intro h1 span:last-of-type {font-size: .9em;
font-weight: 200 }


#intro {padding-top: 170px;
height: 200px; }


#intro h1 {background: #fff;
background: rgba(255,255,255,.85);
padding: 1px 15%;
position: relative; }

#intro p {float: left;
margin: 1em 13% 0 13%;
padding: 0 2%;
font-size: 1.25em;
line-height: 1.5em;
color: #555; }

#intro p:first-of-type {margin-top: 5em }

#intro p:last-of-type {padding-top: 1.5em;
padding-bottom: 1.5em;
margin-top: 0;
margin-bottom: 0;
position: relative;
z-index: 100 }

/* Schedule, Workshops */

#schedule h2, #workshops h2, #proposition h2 {clear: both;
margin-bottom: .6em;
font-size: 1.6em;
margin: 1em 0
}

#schedule .vevent, #workshops .vevent {position: relative;
padding-left: 25.71%;
clear: both;
border-top: 1px solid #ddd; }

#schedule .session, #workshops .session {border-top: 1px solid #ccc;
margin-top: 3em; }

#schedule h3, #workshops h3 {position: relative;
top: -.8em; }

#schedule .name, #workshops .name {display: inline-block;
padding: 0 .5em;
margin: -.7em 0 0 -.5em;
font-style: italic;
/*text-transform: none;*/
letter-spacing: 0;
background-color: #ce0d14;
font-weight: bold;
color: #fff }

#schedule .session .title, .day-overview .title {display: block;
margin-bottom: 0;
font-weight: bold;
color: #fff;
background-color: #000;
display: block;
width: auto;
font-style: italic;
padding: 0 .3em;
width: intrinsic;			/* Safari/WebKit uses a non-standard name */
width: -moz-max-content;	/* Firefox/Gecko */
width: max-content;	/* Firefox/Gecko */
}

.session .description, .session .bio, .session .links {
width: 80%;
float: left}

#schedule .summary .name {
display: block;
width: intrinsic;			/* Safari/WebKit uses a non-standard name */
width: -moz-max-content;	/* Firefox/Gecko */
width: max-content;	/* Firefox/Gecko */
display: none
}

.summary p:first-of-type {
position: absolute;
bottom: 0;
right: 5%;
background-color: #000;
color: #fff;
font-size: .9em;
font-weight: 300}

#schedule .break {color: #999;
margin-top: 1.5em}

#schedule .break .title {background: #fff;
padding: 0 .5em;
margin-left: -.5em; }

#schedule .break a {border-bottom: 2px solid #bbb;
color: #999; }

#schedule .break a:focus, #schedule .break a:hover {color: #ce0d14;
border-bottom-color: #999; }

#schedule .bio, #workshops .bio {font-style: italic;
color: #444; }

#schedule .description + .bio, #workshops .description + .bio {margin-top: 1em; }

#schedule figure, #workshops figure {float: left;
margin: 4.5em 1.5em 1.5em -34.7%;
width: 32.22%;
height: auto;
border: solid 5px #ce0d14 }

#BradFrost {
	display: none
}

#workshops img {margin-bottom: 21em; }


#schedule figure {
width: 170px;
margin-top: 1em;
position: relative; /*create positioning context*/ 
padding: 0;
height: 170px}

figure img {width: 100%;
}

#schedule figcaption {position: absolute;
bottom: 10%;
left: 5%;
display: block;
font-family: futura-pt, futura, san-serif;
font-weight: 500;
color: #fff;
background-color: #ce0d14;
font-size: 1.1em;
padding: .2em;
line-height: 1.2
}

#schedule .links, #workshops .links {margin-top: 1em;
padding-bottom: 2em; }

#schedule .links li, #workshops .links li {display: none;
margin-right: 1.5em; }

#schedule .links li:nth-of-type(2) {
display: inline-block}

#schedule .links a:focus, #schedule .links a:hover, #workshops .links a:focus, #workshops .links a:hover {border-bottom-color: #ccc; }

#schedule .links a:first-of-type, #workshops .links a:first-of-type {background: url(../images/sprite-links.png) 0 2px no-repeat;
padding-left: 20px; }

#schedule .links a[href*="twitter.com"], #workshops .links a[href*="twitter.com"] {background: url(../images/sprite-links.png) 0 -36px no-repeat;
padding-left: 20px; }

#schedule .links a[href*="github.com"], #workshops .links a[href*="github.com"] {background: url(../images/sprite-links.png) 0 -70px no-repeat;
padding-left: 20px; }

#schedule .time, #workshops .time {position: absolute;
top: -.9em;
left: 0;
background: #fff;
padding: 0 .5em;
margin-left: 1.5em;
font-size: 1em; }

.dtend, .ndash {display: none}

#workshops .info {background: #eee;
padding: .75em; }

#workshops .info .button {padding: .75em 1em }

#workshops .info h4 {margin: 0; }

#workshops .info p {font-size: .875em;
line-height: 1.4em;
margin-bottom: .6em; }

/* Venue */

#venue  {
overflow: hidden
}


#venue h2 {width: 30%;
padding-left: 0; }

#venue h2 img {position: relative;
top: 12px;
left: 1.5em; }


.venue-details, .registration-details {
float: left;
width: 49%;
margin-bottom: 1em}

.venue-details:nth-of-type(1), .venue-details:nth-of-type(4) {
margin-left: 0%;
margin-right: 2%}

 .registration-details:first-of-type {
margin-right: 5%}

#venue .venue-details h2 {
width: 100%;
display: block;
background: transparent;
}

#venue .venue-details h2 span {background: #ce0d14; padding: 0 .2em; line-height: 1}

#venue .venue-details p {margin-left: 0	}

#venue-map {width: 100%;
height: 400px;
margin-top: 2.5em; }


/* Register / pricing */

#register {width: 100%;
clear: both;
padding-top: 2em;
margin-top: -2em}

.registerItem {width: 49%;
float: left;
height: 9em;
border: none thin black;
position: relative; /*creates positioning context*/
background-color: #000;
margin-top: 1em;
background-size: cover}

#festival.registerItem {float: right;
height: 19em;
}

.registerItem:last-of-type {
margin-bottom: 3em}

#masterclass {
background-image: url('../images/masterclass.jpg');
background-repeat: no-repeat;
background-position: center center; }

#conference {
background-image: url('../images/conference.jpg');
background-repeat: no-repeat;
background-position: center center; }

#festival {
background-image: url('../images/festival.jpg');
background-repeat: no-repeat;
background-position: center center; 
overflow: hidden
}

#register > p {clear: both}

#register .registerItem h2, #register .registerItem h3, #register .registerItem h4 {
margin: .2em 0 0 0;
position: static;
color: #fff;
background-color: #000;
display: block;
width: intrinsic;			/* Safari/WebKit uses a non-standard name */
width: -moz-max-content;	/* Firefox/Gecko */
width: max-content;	/* Firefox/Gecko */
margin-left: 2%;
}

#register .registerItem h2, #register .registerItem h3 {
background-color: #ce0d14}

#register .registerItem h2 {
background-color: #ce0d14}

#register .registerItem h2 span {
display: block;
font-size: .8em}

#register .registerItem h3 {
font-size: 1.4em;
}

#register .registerItem h5 {
position: absolute;
bottom: 2em;
background-color: #ce0d14;
color: #fff;
-webkit-transform: rotate(45deg) translateX(0em) translateY(0%);
-webkit-transform-origin: 0% 0%;
padding: .5em 3.5em 4em 3.5em;
font-weight: bold; }

.registerItem p {
width: intrinsic;			/* Safari/WebKit uses a non-standard name */
width: -moz-max-content;	/* Firefox/Gecko */
width: max-content;	/* Firefox/Gecko */
margin-left: 2%;
max-width: 90%;
color: #fff;
background-color: #000;
padding: 1px;
margin-top: .2em;
display: none}

.registerItem p:last-of-type {
	position: absolute;
	bottom: 0;
	text-align: right;
width: 100%;
max-width: 100%;
color: #fff;
background: transparent;
margin: 0;
padding: 0;
display: block
}

.registerItem p:last-of-type .button {
display: }

#register h4 {margin-top: 2em }

#register table {margin: 1.5em 0 3em 0;
border-bottom: 2px solid #bbb; }

#register th:first-of-type {width: 40% }


#register table {width: 100%;
margin: 1em auto 0 auto; }


#register th {padding: .5em .75em .25em 2.86%;
text-align: left;
border-bottom: 2px solid #ddd;
font-size: .9em; }

#register td {padding: .75em .75em .25em 2.86%;
color: #555;
font-size: 1em;
line-height: 1.714em;
width: 30%;
font-weight: 300; }

#register td:first-of-type {width: 50% }

#register td:nth-of-type(2) {width: 15% }

#register td:nth-of-type(3) {width: 35% }

#register td[rowspan] {font-style: normal;
color: #222;
font-size: 1em;
line-height: 1.5em; }

#register td:last-of-type {/*padding-top: 3em;*/ }

#register td:last-of-type {text-align: left; }

#register .recommended {
color: #ce0d14}

#register .recommended td {color: #ce0d14; }

#register table + p {margin-top: 1.5em; }

#register li {list-style: outside circle; }

.button {background: #ce0d14 url(../images/dots.png);
color: #fff;
display: inline-block;
padding: .4em 1em; }

nav .button, button {background: #ce0d14 url(../images/dots.png);
color: #fff;
display: inline-block;
padding: .3em 1em;
margin-top: .6em }

button {-webkit-appearance: none;
appearance: none;
border:none;
font-size: 1em; }

.button:focus, .button:hover, button:focus, button:hover {border-bottom: none;
background-image: none; }

#workshops .button {margin-top: 1.5em;
text-align: center;
width: 80% }

#register .button {margin-top: 0;
text-align: center; }

#fineprint {font-size: .8em; 
display: none}

#fineprint li {margin-left: 2em; }

/* Sponsors */

#sponsors {display: block}

#sponsors li {display: block;
margin: .75em 0 1.5em 0;
padding: 0 3% 0 0;
float: left;
width: 45%; }


#sponsors li {width: 30%; }


/*#sponsors a {display: block;
position: relative; }*/

#sponsors a:hover, #sponsors a:focus {border-bottom: none; }

#sponsors img {margin-top: .75em;
display: block;
max-width: 80%;
height: auto;
/*max-height: 70px;*/
/*	filter: url(../images/filters.svg#grayscale);
*/	/* Firefox 3.5+ */
    	filter: gray;
/* IE6-9 */
    -webkit-filter: grayscale(1);
/* Google Chrome & Webkit Nightlies */
	-o-filter: grayscale(1); }

#sponsors a:hover img, #sponsors a:focus img {filter: none;
-webkit-filter: grayscale(0);
-o-filter: grayscale(0); }

#sponsors h4 {color: #fff;
background-color: #ce0d14;
position: relative;
z-index: 9;
font-family: futura-pt, futura, sans-serif;
padding: 0em .2em;
font-weight: bold
 }


#sponsors a:hover h4, #sponsors a:focus h4 {color: #ce0d14; }


#sponsors a.plain:after {display: none }

#sponsors a.plain {display: inline; }

/* Footer */

footer {background: #eee;
padding-bottom: 1.5em;
position: relative;
margin-top: 3em; 
overflow: auto;
padding-top: 1em}

footer #contact {width: 38%;
float: left;
margin-right: 5%;
margin-left: 10%}

footer #links {width: 38%;
float: left}

footer #copyright {width: 80%;
margin: 1.846em auto 0 auto;
font-size: .8125em;
line-height: 1.846em; 
clear: both}

footer ul, footer a, footer p {color: #777; }

footer a {border-bottom: 2px solid #bbb; }

footer a:hover, footer a:focus {color: #555; }

/*day details*/

.day-overview {width: 48%;
float: left;
margin-bottom: 0em
}



.day-overview:first-of-type {
margin-right: 4%}

#schedule .day-overview h2 {text-align: left;
font-size: 1.8em;
margin: 0;
padding: .2em;
display: inline-block;
 }

#schedule .day-overview h3 {
margin-top: 1em;
/*height: 130px;*/
}

#schedule .day-overview .title {
margin-top: 1em;
height: 120px;
width: 60%;
width: calc(100% - 140px);
margin-left: 40%;
margin-left: calc(125px)
}

#schedule .day-overview figure {
width: 110px;
margin: 0 1em 0 0;
position: absolute; /*create positioning context*/ 
top: 0;
padding: 0;
height: 110px;
background: transparent
}

#feb5 figcaption {display: nne} /*debug*/

#schedule #feb5 img, #schedule #feb5 figcaption  {
-webkit-animation: crossfade 24s infinite ;
animation: crossfade 24s infinite;
opacity: 0
}

#schedule #feb5 figure:nth-of-type(2) img, #schedule #feb5 figure:nth-of-type(2) figcaption {
-webkit-animation-delay: 8s;
animation-delay: 8s
}

#schedule #feb5 figure:nth-of-type(1) img, #schedule #feb5 figure:nth-of-type(1) figcaption {
-webkit-animation-delay: 16s;
animation-delay: 16s
}

#schedule .day-overview figure {float: left;
border: solid 5px #ce0d14 }



#schedule .day-overview figcaption {position: absolute;
bottom: 10%;
left: 5%;
display: block;
font-family: futura-pt, futura, san-serif;
font-weight: 500;
color: #fff;
background-color: #ce0d14;
font-size: 1.1em;
padding: 0 .2em;
width: 90%;
font-size: .9em;
text-transform: lowercase
}

#schedule .day-overview .name {display: none}

#schedule .day-overview li {
margin-top: .3em}

#schedule .day-overview ul {
margin-left: 1em;
margin-bottom: .6em}

.day-overview dl {
	text-transform: capitalize
}

dt {font-weight: bold;
line-height: 1.2}

dd {padding-bottom: .5em}

.day-overview table {width: 100% }


/*schedule table */

.bio h3, .day-overview h4 {margin-top: .3em;
font-family: futura-pt, futura, san-serif;
background-color: #000;
color: #fff;
display: block;
padding: .2em;
width: intrinsic;			/* Safari/WebKit uses a non-standard name */
width: -moz-max-content;	/* Firefox/Gecko */
width: max-content;	/* Firefox/Gecko */
font-style: italic;
font-weight: 500; }

#schedule h4 {margin-top: 1.4em }

#schedule table {width: 100%;
float: left;
font-size: .8em;
margin: 1em 0 }

#schedule table:first-of-type {border-right: solid thin white }

#schedule table:nth-of-type(2) {width: 44% }

#schedule tr:first-of-type {height: 2em;
vertical-align: middle;
/*border-bottom: solid thin #ccc*/
	font-weight: bold; }

#schedule th {text-align: left;
padding-left: 1em }

#schedule tr {/*height: 4em;
*/
	vertical-align: middle;
/*border-bottom: solid thin #ccc*/
min-height: 2.6em;
min-height: 25px }

#schedule tr:nth-of-type(odd) {background-color: #efefef }

#schedule table .sessiontime, #schedule table .speaker, #schedule table .sessiontitle {display: block;
line-height: 1 }

#schedule table .sessiontime {font-size: .8em;
padding: 0 1em;
vertical-align: middle; 
display: none}

#schedule table .speaker, #schedule table .sessiontitle {padding: 0 1em;
vertical-align: middle; }

#schedule table .speaker {font-style: italic;
color: #ce0d14; }

#schedule table .sessiontitle {font-weight: bold; }

/*pricing*/

.priceOption {width: 30%;
padding: 0 1%;
margin-bottom: 1em;
background-color: #ebebeb; }

.priceOption.recommended {width: 60%;
font-size: 1.1em;
float: right; }

#schedule #register {position: static} 

#register .priceOption p {width: 100% }

#register>p {clear: both }


/*base*/

li {line-height: 1.3}


/*animations*/

@-webkit-keyframes poptext {

	from {
		font-size: 10em
	}

	60% {
		font-size: 13em
	}

	to {
		font-size: 3em
	}

}

@-webkit-keyframes crossfade {
  0% {
    opacity:0;
  }
  16% {
    opacity:1;
  }
  33% {
    opacity:1;
  }

  50% {
	opacity: 0
  }

  100% {
    opacity:0
  }
}