/* 

hypermarché, 2011. a simple website by we are fellows. no shadows, no transitions, no shit.
http://wearefellows.com 


*/

/* css reset, based on html5reset.org by eric meyer http://html5reset.org */

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 24pt;
   vertical-align: baseline;
   background: transparent;
   font-weight:normal;
}                                    

article, aside, figure, footer, header, hgroup, nav, section {display: block;}
button, input, select, textarea {margin: 0;}
img, object, embed {max-width: 100%;}
html {overflow-y: scroll;}
ul {list-style: none;}

blockquote, q {quotes: none;}

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

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; color: #fff;}
del {text-decoration: line-through;}
a:hover, a:active {outline: none;}
strong, th {font-weight: bold;}
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

.clickable,label, input[type=button], input[type=submit], button {cursor: pointer;}

button .p
button, input, select, textarea {margin: 0;}

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }

/* layout */

body {
	background-color: #f8f8f6;
	color: #000;
	font-family: 'FuturaW01-ExtraBoldCond 774896', 'Futura-CondensedExtraBold', 'Futura', sans-serif;
	font-weight: normal;
	text-transform: lowercase;
	/* text-shadow: 1px 1px #fff; */
	font-size: inherit;
}

body.em {
	background-color: #ff0000;
	/* text-shadow: 1px 1px #e12f2f; */
}

body.blk {
	background-color: #222;
	color: #fff;
	text-shadow: none;
}

header {
	margin-bottom: 3%;
}

h1, h3 {
	font-size: inherit;
}

h1 {
	margin: 18% 0 10px 0;
}

h1 + h3 {
	margin-top: 18%;
}

.hidden {
	display: none;
}

.tag {
	margin-left: 10px;	
}

a {
	text-decoration: none;
	color: #000;
}

a:hover {
	text-decoration: none;
	color: #ff0000;
}

body.em a {
	color: #000;
}

body.em a:hover {
	color: #fff;
}

body.blk a {
	color: #fff;
}

body.blk a:hover {
	color: #ff0000;
}

body.infos > .content > p > a {
	color: #ff0000;
}

body.infos > .content > p > a:hover {
	color: #000;
}


.rl a {
	color: #000;
}

.rl a:hover {
	color: #ff0000;
}

body.em .rl a:hover {
	color: #fff;
}

em {
	font-style: normal;
	color: #ff0000;
}

.col {
	float: left;
	width: 30%;	
	height: 100%;
	text-align: center;
}

body.start .left, body.start .right {
	padding-top: 26%;
}

.breadcrumb {
	padding-top: 10%;
}

.left {
	margin-left: 5%;
}

.right {
	margin-right: 5%;
}

.main {
	margin: 0 auto;
	width: 22%;
	padding: 5% 4% 2% 4%;
}

ul > li {
	margin-bottom: 10px;
}

.featured span {
	display: block;
	margin-top: -8%;
	z-index: 10;
	position: relative;
}

body.em a.featurelink:hover {
	color: #000;
}


 p, .col h3 {
	padding: 0 15% 0 15%;
	position: relative;
	z-index: 10;
	margin-bottom: 10px;
}

.featured img {
	position: absolute;
	z-index: 1;
	margin: -4em 0 0 -0.25em;
	width: 8em;
}

.frame {
	margin: 0 auto;
	width: 50%;
	padding: 15% 0 15% 0;
	border: 4px solid #000;
}

.dates {
	margin: -2% auto;
	width: 100%;
	text-align: center;
}

.termine .col {
	height: auto;
}

.dates img {
	margin-bottom: -4em;
	max-width: 13em;
}

.dates img:first-child {
	margin-bottom: -3.5em;
}

.dates img.pull-img {
	margin-left: -20%;
}

.dates img.right-img {
	margin: -3em 0 0 12em;
}

.dates > p > a {
	color: #ff0000;
}

.dates > p > a:hover {
	color: #000;
}

.dates > ul {
	margin-top: 3em;
}

.dates > ul > li {
	margin-bottom: 3em;
}

.dates > ul > li > a {
	display: block;
}

.date {
	width: 2.5em;
	height: 2.5em;
	border: 4px solid;
	padding: 1%;
	margin: 0 2% 0 2%;
	float: left;
}

a:hover .date {
	border-color: #ff0000;
}

.inactive {
	color: #000;
	cursor: default;
}

.inactive:hover {
	color: #000;
}

.inactive:hover .date {
	border-color: #000;
}

.dateinfo  {
	text-align: right;
	float: left;
	height: 2.5em;
	padding-top: 0.5em;
	width: 38%;
}

.date + .dateinfo {
	text-align: left;
}

.datecopy {
	padding: 1% 0 1% 0;
	display: block;
}

.datecopy > p {
	z-index: 10;
	position: relative;
	width: 55%;
	margin: 0 auto 1% auto;
	text-align: left;
}

.blankinfo {
	font-size: 1.5em;
	padding-top: 0.5;
}

.open {
	margin-bottom: 1.5em;
	color: #ff0000;
}

.open .blankinfo {
	width: 16%;
}

.open .rightblank {
	width: 0;
}

.open .date {
	border-color: #ff0000;
}

.open > .leftinfocontent {
	margin-left: 28%;
}

.datecopy > a {
	color: #ff0000;
}

.datecopy > a:hover {
	color: #fff;
}

.content {
	padding-bottom: 10%;
}

.content * {
	position: relative;
	z-index: 2;
}

.content > img {
	max-height: 10.5em;
	position: absolute;	
	z-index: 1;
}

.content > h3, .content > p, .dates > p {
	margin: 0 auto;
	width: 55%;
}

.content > p {
	margin-top: 2%;
}

.content > .cropped {
	width: 35%;
	padding-right: 20%;
}

.second {
	top: 73%;
	left: 10%;
}

.first {
	top: 34%;
	left: 43%
}

.brands {
	margin: 5% auto 3% auto;
	width: 55%;
}

.brands > li {
	margin: 0 0.75em 0 0;
	width: 3.5em;
	float: left;
}

.brands > li > img {
	width: 100%;
}

.build {
	top: 63%;
	left: 6%;
}

.team {
	top: 140%;
	left: 48%;
}

.center {
	text-align: center;
}

img.imprint-img {
	position: relative;
	margin: 0;
	padding: 0;
}

/* corners */

.lu, .ru, .ll, .rl {
	position: fixed;
	z-index: 10;
	padding: 10px;
	height: 35px;
}

.lu { top:0; left: 0; }
.ru { top:0; right: 0; } 
.ll { bottom: 0; left: 0; }
.rl { bottom: 0; right: 0; }

/* adjust font size */

@media screen and (max-width: 1200px) {
	html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
		font-size: 22pt;
	}                                    		
}

@media screen and (max-width: 1100px) {
	html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
		font-size: 20pt;
	}                                    		
}

@media screen and (max-width: 1024px) {
	html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
		font-size: 18pt;
	}                                    		
}

/* iphone */

@media screen and (orientation:landscape) and (max-device-width: 480px) {
	img.team {
		top: 190%;
	}
	
	img.build {
		top: 100%;
	}

	img.first {
		top: 52%;
	}
	
	img.second {
		top: 100%;
	}
}

@media screen and (orientation:portrait) and (max-device-width: 480px) {

	.team {
		top: 80%;
	}	
	
	.build {
		top: 40%;
	}
	
	img.first {
		top: 20%;
	}
	
	img.second {
		top: 38%;
	}
	
	body.em .main, body.em .left, body.em .right {
		margin-top: 20%;
	}
}