@font-face {
    font-family: 'Mecha';
    src: url('mecha-webfont.eot');
    src: url('mecha-webfont.eot?#iefix') format('embedded-opentype'),
         url('mecha-webfont.woff') format('woff'),
         url('mecha-webfont.ttf') format('truetype'),
         url('mecha-webfont.svg#mecharegular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'Squared Display';
    src: url('squared_display-webfont.eot');
    src: url('squared_display-webfont.eot?#iefix') format('embedded-opentype'),
         url('squared_display-webfont.woff') format('woff'),
         url('squared_display-webfont.ttf') format('truetype'),
         url('squared_display-webfont.svg#squared_displayregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


* {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-weight: inherit;
	font-style: normal;
	vertical-align: baseline;
	background: transparent;
	border: 0;
	outline: 0
}

  
/* Preloader */
#preloader {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff; /* change if the mask should have another color then white */
	z-index: 104; /* makes sure it stays on top */
}
#status {
	width: 200px;
	height: 200px;
	position: absolute;
	left: 50%; /* centers the loading animation horizontally one the screen */
	top: 50%; /* centers the loading animation vertically one the screen */
	background-image: url(status.gif); /* path to your loading animation */
	background-repeat: no-repeat;
	background-position: center;
	margin: -100px 0 0 -100px; /* is width and height divided by two */
}

article, aside, figure, figure img, hgroup, footer, header, nav, section {
	display: block
}
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
}
input, select {
	vertical-align: middle
}
a img {
	border: 0
}
:focus {
	outline: 0
}
a:hover, a:active {
	outline: none
}
.clearfix:before, .clearfix:after {
	content: " ";
	display: table
}
.clearfix:after {
	clear: both
}
.clearfix {
*zoom:1
}
.clear:before, .clear:after {
	content: " ";
	display: table
}
.clear:after {
	clear: both
}
.clear {
*zoom:1
}
a { outline: none;   
-webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;} 
  
  /* Gets rid of Firefox's dotted borders */
a img  { border: none; } /* Gets rid of IE's blue borders */
a:hover {
	  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;}

html {
	overflow: hidden
}
body {
	font: 12px/18px "Mecha", sans-serif;
	text-align: left;
	background: #fff;
	color: #000;
	-webkit-tap-highlight-color: #ddd;
	-webkit-text-size-adjust: none;
	overflow: hidden
}
body#home {
	overflow: hidden;
	
}


.home #sbc-logo {
	position: absolute;
	left:30px;
	bottom:42px;
	width: 200px;
	height: 84px;
	margin: 0;
	z-index: 5
}

#enter-site{
	position: absolute;
	left:30px;
	bottom:24px;
	width: 180px;
	height: 25px;
	margin: 0;
	z-index: 5;
	background-color:#000;
}

  
#enter-site a {
	width: 180px;
	height: 25px;
	cursor: pointer;
	-webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;
}
#enter-site:hover {
	background: #c83058;
	-webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;
}


.enter a{cursor:pointer;-moz-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}

.enter a:hover{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=/'')";filter:alpha(opacity=0);-moz-opacity:.0;-khtml-opacity:.0;opacity:.0}

#anime{
	position:absolute;
	height:100%;
	width:100%;
	top:0;
	left:0;
		
	}
	
#anime .center{
	position:absolute;
	top:50%;
	left:50%;
	margin:-115px 0 0 -300px;
	height:300px;
	width:600px;	
	}
	
#anime .centre{
	position:absolute;
	top:50%;
	left:50%;
	margin:-115px 0 0 -165px;
	height:230px;
	width:330px;	
	}


#facebook{position:fixed;width:36px;height:36px;right:30px;bottom:24px;z-index:80}

#facebook a{cursor:pointer;-moz-transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}

#facebook a:hover{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=/'')";filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7;opacity:.7}

#twitter{position:fixed;width:36px;height:36px;right:80px;bottom:24px;z-index:80}

#twitter a{cursor:pointer;-moz-transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}

#twitter a:hover{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=/'')";filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7;opacity:.7}
	
#img1, #img2, #img3, #img4, #img5, #img6{
/*	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	-moz-opacity: .8;
	-khtml-opacity: .8;
	-webkit-opacity: .8;
	opacity: .8
*/	}

a:link, a:visited {
	color: #999;
	text-decoration: none;
	-webkit-transition: all .3 ease-in-out;
	-moz-transition: all .3 ease-in-out;
	-webkit-transition: all .3 ease-in-out;
	-o-transition: all .3 ease-in-out;
	transition: all .3 ease-in-out
}
a:hover, a:focus {
	color: #c83058
}
h1, h2, h3, h4, h5, h6 {
	-webkit-font-smoothing: antialiased
}
h1 {
	font-size: 20px;
	line-height: 19.5px
}
h2 {
	font-size: 15px;
	line-height: 18px
}
h3 {
	font-size: 13px;
	line-height: 16.5px
}
h4 {
	font-size: 13px;
	line-height: 16.5px
}
h5 {
	font-size: 13px;
	line-height: 16.5px
}
h1 {
	font-family: Mecha, 'Squared Display', Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: normal;
	color: #c83058;
	text-transform: lowercase
}
h2, h3, h4, h5 {
	font-family: 'Mecha', Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: normal;
	color: white;
	text-transform: lowercase
}
p {
	font-family: 'Mecha', Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: normal;
	color: white;
	line-height: 18px;
	font-size: 16px;
	margin-bottom: 18px
}
em {
	font-family: 'Mecha', Arial, Helvetica, sans-serif;
	font-style: italic;
	font-weight: normal;
	font-size: 14px
}
strong {
	font-family: 'Mecha', Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: bold;
	font-size: 14px
}
::selection {
	background: #3f0055
}
::-moz-selection {
background:#3f0055
}
img::selection {
	background: transparent
}
img::-moz-selection {
background:transparent
}
body {
	-webkit-tap-highlight-color: #c83058
}
.selected, .current {
	color: #c83058
}

.artists #sbc-logo {
	position: fixed;
	left:278px;
	bottom:10px;
	width: 220px;
	height: 84px;
	margin: 0;
	z-index: 5

}

.artists #sbc-design {
	position: fixed;
	right:20px;
	bottom:10px;
	width: 48px;
	height: 84px;
	margin: 0;
	z-index: 5

}



#exhibition{
	height: 915px; 
	left: 172px;
	}
.menu {
	z-index: 5;
	width: 200px;
	background:#FFF;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	text-align: left;
}
.content {
	width: 808px;
	min-height: 500px;
	margin: 0 0 0 240px;
	position: relative
}
.content img {
	-ms-interpolation-mode: bicubic
}
.fixed-content {
	width: 808px;
	margin: 110px 0 0 206px;
	position: absolute
}

/*@-moz-document url-prefix() {

#frame {
	background: #fff;
	overflow: hidden;
	margin-left:172px;
}

}*/

#frame {
	background: #fff;
	overflow: hidden;
}
.c1, .c2, .c3, .c4 {
	margin-right: 34px;
	float: left;
	position: relative
}
.c1 {
	width: 168px
}
.c2 {
	width: 370px
}
.c3 {
	width: 572px
}
.c4 {
	width: 774px
}
.menu ul.artists-menu {
	display: block;
	padding: 0;
	text-transform: lowercase
}
.menu ul.artists-menu li.current a {
	color: #000
}
.menu li {
	font-family: Mecha, Arial, Helvetica, sans-serif;
	display: block;
	padding: 0;
	margin: 0 0 0 20px
}
.menu li.last-child {
	padding: 0;
	background: transparent
}
.menu li a, .menu li a:visited {
	display: block;
	font-size: 18px;
	line-height: 22px
}
.menu li a, .menu li a:visited {
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out
}
.menu li a.selected, .menu li a.selected:visited {
	color: #000
}
.menu div.home {
	width: 162px;
	height:120px;
	padding: 0;
	margin: 20px;
	background: transparent;
	overflow: hidden
}
.menu div.home a, .menu div.home a:visited {
	display: block;
	position: relative;
	height: 80px;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out
}

.menu ul.site-nav {
	position: absolute;
	bottom: 15px;
	text-transform: lowercase
}
.menu ul.site-nav .artists {
	display: none
}
body.home a#nav-home, body.exhibition a#nav-exhibition, body.av a#nav-av, body.events a#nav-events, body.visit a#nav-visit, body.artists a#nav-artists, body.reviews a#nav-reviews, body.twitter a#nav-twitter {
	color: #c83058
}

div.sponsors{
	height:40px;
	width:1024px;
	margin-bottom:50px;
	padding:0px 0px 0 0 ;
	
	}
div.sponsors a{
	height:40px;
	width:200px;
	padding:10px 158px 50px 0;
	margin:0 10px 10px 0;
	display: inline;
	}
#home-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: -1
}
#home-bg img.title {
	display: none
}
#overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 1
}
#pixel {
	background-image:url(pixel.png);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 4
}



.artist-bg {
	position: relative;
	z-index: 3
}
.artist-bg img {
	z-index: 3;
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 50px;
}
.artist-profile header {
	/*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=20);
	-moz-opacity: .2;
	-khtml-opacity: .2;
	-webkit-opacity: .2;
	opacity: .2;*/
	z-index: 100
	}
.overlay {
	display: none;
	z-index: 4;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	-moz-opacity: .7;
	-khtml-opacity: .7;
	-webkit-opacity: .7;
	opacity: .7;
	width: 100%;
	height: 100%
}
.exh-profile {
	position: absolute;
	top: 50%;
	left: 108px;
	z-index: 6;
	margin-top:-300px;
}
.exh-profile h1 {
	font-size: 36px;
	line-height: 24px;
	margin-bottom: 7px
}
.exh-profile h2 {
	margin-bottom: 10px
}
.exh-profile #expand {
	display: block
}
.exh-profile p.text_exh {
	width: 640px;
	
}

.artist-profile {
	position: absolute;
	top: 100px;
	left: 108px;
	z-index: 6
}
.artist-profile h1 {
	font-size: 36px;
	line-height: 24px;
	margin-bottom: 7px
}
.artist-profile h2 {
	margin-bottom: 10px
}
.artist-profile h2.special {
	color: #000
}
.artist-profile #expand {
	display: block
}
.artist-profile .biography {
	display: none;
	width: 572px;
	margin-top: 22px
}
.artist-profile p {
	width: 572px;
	
}
.artist-profile p.text_exh {
	width: 640px;
	
}

.artist-profile a.btn_biography {
	background: #fff;
	color:  #c83058;
	padding: 2px 5px;
	font-family: 'Mecha', Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: lighter;
	text-transform: lowercase;
	font-size: 16px;
	cursor: pointer;
	display: inline-block;
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	-khtml-border-radius: 1px;
	border-radius: 1px;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out
}
.artist-profile a.btn_biography:after {
	content: "\203A";
	font-size: 14px;
	padding-left: 6px
}
.artist-profile a.btn_biography:hover {
	background: #c83058;
	color: #fff;
}
.artist-profile a.next-artist {
	margin-left: 13px;
	background: #fff;
	color: #c83058;
	padding: 2px 5px;
	font-family: 'Mecha', Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: lighter;
	text-transform: lowercase;
	font-size: 16px;
	cursor: pointer;
	display: inline-block;
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	-khtml-border-radius: 1px;
	border-radius: 1px;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out
}
.artist-profile a.next-artist:after {
	content: "\203A";
	font-size: 14px;
	padding-left: 6px
}
.artist-profile a.next-artist:hover {
	background: #c83058;
	color: #fff;
}
.object-list {
	margin: 110px 22px 22px 206px
}


@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	
.artist-profile a.next-artist {
	display:none;
}
	
html {
	overflow-x: hidden
}
body.home {
	overflow-y: hidden
}
body {
	background:#000;
	width: 1024px;
	position: absolute;
/*	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;*/
	padding: 0;
	margin: 0;
	overflow-x: hidden
}



#frame {
	background:#000;
}

.artist-bg {
	position: relative;
	height: 914px;
}
.artist-bg img {
	position: relative;
	max-width: 100%;
	height: auto;
	margin-left:312px !important; margin-left:352px;
}

.menu {
	z-index: 5;
	width: 220px;
	background:#FFF;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	text-align: left;
	margin-right:20px;
}
.menu ul.artists-menu {
	display: block;
	padding: 0;
	text-transform: lowercase;
	margin-right:20px;
}
.menu ul.site-nav {
	position: relative;
	margin-top:50px;
	text-transform: lowercase
}

.artist-profile {
	position: absolute;
	top: 20px;
	left: 108px;
	z-index: 6
}

.artist-profile h1 {
	font-size: 26px;
	line-height: 18px;
	margin-bottom: 7px;
	z-index: 5;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	-webkit-opacity: 1;
	opacity: 1;
}
.artist-profile h2 {
	margin-bottom: 10px
}
.artist-profile h2.special {
	color: #000
}
.artist-profile #expand {
	display: block
}
.artist-profile .biography {
	display: none;
	width: 640px;
	margin-top: 22px
}
.artist-profile p {
	width: 640px;
}
.artist-profile p.text_exh {
	width: 640px;
}

.exh-profile {
	position: absolute;
	top: 40px;
	left: 108px;
	z-index: 6;
	margin-top:0px;
}
.exh-profile h1 {
	font-size: 28px !important; font-size: 18px;
	line-height: 16px;
	margin-bottom: 7px
}
.exh-profile h2 {
	margin-bottom: 10px
}
.exh-profile #expand {
	display: block
}
.exh-profile p.text_exh {
	width: 640px;
	font-size: 14px;
	line-height:14px;
}

.artist-profile .biography {
	display: block;
	width: 572px;
	margin-top: 22px
}
.overlay {
	display: block;
	z-index: 4;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	-moz-opacity: .5;
	-khtml-opacity: .5;
	-webkit-opacity: .5;
	opacity: .5;
	width: 100%;
	height: 100%
}

.artists #sbc-logo {
	position: absolute;
	left:278px;
	bottom:10px;
	width: 220px;
	height: 84px;
	margin: 0;
	z-index: 5

}

}