/*for > 800px width*/

body {padding: 0;
margin: 0;
}

body header {margin-bottom: 1em;
}

header, main, footer {}

header a.register:link {width: 15%;
position: absolute;
top: 2em;
right: 15%
}

header h1 {
width: 30%;
}

/*blocks*/

#intro {
font-size: 1.3em;
position: relative;
background-image: url('../images/workshop1.jpg'); 
background-repeat: no-repeat; 
}

#intro {
font-size: 1.3em;
position: relative;
background-repeat: repeat;
background-image: url('assets/congruent_outline.png'); }


#workshops {
background: #fff;
 }

.workshopdetail {width: 45%;
float: left}

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

.description dt, .description dd {padding: 0; margin: 0; display: inline-block}

.description dl {overflow: hidden}

h2 {
font-size: 2em; }

h2, h3 {clear: both}

.description  h3 {margin-top: 1em;
margin-bottom: .2em}

.description  h2 {margin-bottom: 0;
font-size: 2em; }

.description  dl {margin: 0}

.description  + p {clear: both}

.description dt {
margin-right: 0em;
font-weight: bold; }

.description dd {
margin-right: .4em}

.description ul {
margin: 0 0 1.5em 0;
padding: 0;
}

.description + .description h3 {
	margin-top: 2em
}

#johnallsopp {
background-repeat: repeat;
background-image: url('assets/congruent_outline.png'); }

#intro:befores {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: " ";
z-index: -1;
background-color: rgba(255, 0,0, .6)
}

#intro div, #workshops div, #johnallsopp div, #pricing div, #dates div, #fineprint div {padding: 2.5em ;
background: rgba(255, 255, 255, .8);
border: thin solid #ddd;
border-top: none;

}

#workshops div, #pricing div, #fineprint div {padding: 2.5em ;
background: rgb(255, 255, 255);
}

#intro p, #intro h2 {z-index: 2}

header, #intro, #workshops, #pricing, #fineprint, #johnallsopp, #dates, footer {
padding: 0 15%;
/*position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
top: 0*/
/*margin-bottom: .6em;*/
}

#intro, #johnallsopp, #dates {
/*border-bottom: thin #ddd solid ;
border-top: thin #ddd solid 
*/
}

#dates {background-repeat: repeat;
background-image: url('assets/congruent_outline.png');
overflow: hidden}

#dates div {overflow: hidden}

.description {
/*width: 45%;
float: left*/}

section.description:first-of-type {/*margin-right: 4.5%*/}

.bio {clear: both}

.bio figure {float: right;
margin: 0 0 1em 1em;
width: 33%;
border: solid thin #39c;
padding: 3px;
position: relative}

.bio figure img {display: block;
width: 100%;
}

.bio figure figcaption {display: block;
left: 3px;
width: 100%;
width: calc(100% - 6px);
background-color: rgba(255, 255, 255, .7);
position: absolute;
bottom: 3px;
font-size: 1.3em;
text-align: center; }

.city {width: 45%;
float: left;
}

.city h3 {margin-bottom: 0}

.city h3 + p {margin-top: .3em}

.city dd, .city dt {
display: block;
float: left;
font-weight: 400; }

.city dt {clear: left}

.city dd {margin-left: .6em;}

.city p {clear: both}

.city p:last-child {
padding-top: 1em;
padding-bottom: 1em}

#pricing, #fineprint {clear: both}


/*forms*/


aside#branding {
	position: fixed;
	width: 8%;
max-width: 120px;
left: 0;
top: 9em;
}


aside#branding li {
	list-style-type: none;
	opacity: .4;
text-align: center;
margin-bottom: 20% }

aside#branding li:first-of-type {
}

aside#branding li:first-of-type{
	width: 150%;
	opacity: 1;
margin-left: -25%;
	margin-bottom: 33%
}

aside#branding li {
	width: 100%
}

aside#branding li img {
display: block;
width: 100%}

footer {

margin-top: 2em}