@charset "UTF-8";

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

}

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

}

@font-face {
    font-family: 'din-light';
    src: url('DIN-Light.eot');
    src: url('DIN-Light.eot?#iefix') format('embedded-opentype'),
         url('DIN-Light.woff') format('woff'),
         url('DIN-Light.ttf') format('truetype'),
         url('DIN-Light.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'din-bold';
    src: url('DIN-Bold.eot');
    src: url('DIN-Bold.eot?#iefix') format('embedded-opentype'),
         url('DIN-Bold.woff') format('woff'),
         url('DIN-Bold.ttf') format('truetype'),
         url('DIN-Bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: "rani-singam";
  src:url("rani-singam.eot");
  src:url("rani-singam.eot?#iefix") format("embedded-opentype"),
    url("rani-singam.woff") format("woff"),
    url("rani-singam.ttf") format("truetype"),
    url("rani-singam.svg#rani-singam") format("svg");
  font-weight: normal;
  font-style: normal;

}

[data-icon]:before {
  font-family: "rani-singam" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "rani-singam" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-youtube:before {
  content: "\61";
}
.icon-facebook:before {
  content: "\62";
}
.icon-caret-right:before {
  content: "\63";
}


body {
 background-color: black;
 margin: 0;
 padding: 0;
 border: 0;
 font-family:  'din-light', Arial, Helvetica, sans-serif;
 color: white;
 font-size: 1em;
 text-align: center;
 position: absolute; width: 100%; height: 100%; overflow: scroll;
 }

strong {
 font-family: 'din-bold', Arial, Helvetica, sans-serif;
 font-weight: normal;
}

a {text-decoration: none; color: white;}


body img.bg1 {
 height: 100%;
 position: fixed;
 top: 0px;
 right: 0px;
 margin-right: 50%;
}

body img.bg2 {
 height: 100%;
 position: fixed;
 top: 0px;
 left: 0px;
 margin-left: 49.9%;
}
h6 {
	font-size: 0.8rem;
	color: #ca00ff;
	margin-bottom: 0;
}
button, input[type=button] {
	border: none;
	border-radius: 20px;
	background-color: #743b80;
	color: #fff;
	padding: 5px 10px;
	margin: 5px 0;
	min-width: 150px;
	font-size: 12px;
	letter-spacing: 0.05rem;
	font-family: 'FuturaHeavy', sans-serif;
	cursor: pointer;
}
button:hover, input[type=button]:hover {background-color: #ca00ff;}

hr {border-bottom: 1px solid #6f6f6f; margin: 15px 0;}

#container-shade {width: 32%; position: fixed; left: 14%; height: 100%; text-align: left; overflow: visible; background-color: black;}

#centralise-container {width: 32%; position: absolute; left: 14%; min-height: 500px; text-align: left; overflow: visible;}
#main-content {padding: 30px 20px; overflow: visible;}

#header {
	border-bottom: 1px solid #6f6f6f; 
	margin-bottom: 30px;
	max-width: 80%;
}
#header h1 {
	text-transform: uppercase;
	font-size: 3.0em;
	font-weight: normal;
	margin: 0px;
	margin-bottom: 20px;
	font-family: 'FuturaBook', Arial, Helvetica, sans-serif;
	line-height: 1.0em;
}
#header .menu-social {
	padding: 5px 0;
	position: absolute;
	right: 20px;
	top: 28px;
	color: #bebebe;
}
#header .menu-social a:hover, .home-social a:hover {color: #8b2ca3;}

#navigation {margin-bottom: 20px; font-family: 'FuturaHeavy', Arial, Helvetica, sans-serif; font-weight: normal;}
#navigation ul {list-style: none; padding: 0px;}
#navigation ul li {font-size: 1.2em; letter-spacing: 0.02rem;}
#navigation ul li a {color: #8b2ca3;}
#navigation ul li a:hover {color: #DFDFDF;}

#main {position: relative; }
#main #home-spacer {margin: 20px 0px; border-bottom: 1px solid #1e1e1e; }
#main-center h1 {text-transform: uppercase; font-size: 2.5em; margin: 0px; padding: 0px; border-bottom: 1px solid white; margin-bottom: 30px; font-weight: normal;}

div.biography-box {
 position: absolute;
 background: url('../images/biography-box.png') no-repeat;
 width: 112px;
 height: 381px;
 margin-left: -111px;
 border-right: 1px solid #222222;
 top: 50px;
 left: -20px;
 padding: 24px 0px;
 }
div.biography-box img {float: right; padding: 0px 0px 15px 0px;}
div.biography-main {min-height: 420px; }
div.biography-main p {line-height: 1.6em;}
div.biography-main .bio-page {display: block; float: right; font-size: 10px; line-height: 5.0em;}
div.biography-main ul {padding-left: 15px; line-height: 1.5em;}
div.biography-main .bio-em {color: #8b2ca3;}
div#bio-nav {margin: 20px 0px 20px; font-family: 'FuturaHeavy'; }
div#bio-nav .bio-prev {float: left;}
div#bio-nav .bio-next {float: right;}
div#bio-nav a {text-decoration: underline;}
div#bio-nav a:hover {color: #DFDFDF;}
div#bio-nav .end {color: #ACACAC; }

div#biography1-box {margin-top: 0px;}
div#biography2-box {margin-top: 0px;}
div#biography3-box {margin-top: 0px;}
div#biography4-box {margin-top: 0px;}
div#biography5-box {margin-top: 0px;}

div.sounds-main {min-height: 420px;}
div.sounds-main p {clear: both; margin-top: 20px;}
div.sounds-main .highlight {color: #b5b5b5; }
div#album {display: inline-block;}
div#album-cover {width: 224px; height: 187px; float: left; margin-bottom: 15px;}
div#album-desc {width: 155px; height: auto; float: left; position: relative; overflow: visible;  }
div#album-desc h2 {margin: 0px;}
div#album-desc p {margin: 10px 0px; color: #b5b5b5; font-size: 0.9em;}
div#album-desc .purchase-link {position: relative; display: block; }
div.sounds-main p a {color: #88d3c5; text-decoration: underline; }
div.sounds-main p a.sound-clip {color: #FFFFFF; text-decoration: none;}
div.sounds-main p a:hover {color: #DFDFDF;}

div#sound-box { position: fixed; left: 46%; bottom: 0px;}
div#sound-box-inner {position: relative; background-color: black; padding: 20px; font-size: 0.9em; }
p.sound-box-text { text-align: center; margin-bottom: 50px; }
p.sound-box-text a {text-decoration: underline; }
p.sound-box-text a:hover {color: #DFDFDF; }
span.sound-title { color: #b7b7b7; font-family: 'din-bold'; }
span.sound-text { color: #b7b7b7; }

div.updates-main a {text-decoration: underline;}
div.updates-main a:hover {color: #DFDFDF;}

div.gallery-main h1
div.gallery-main {min-height: 380px; overflow: visible; }
div.gallery-main p {line-height: 1.8em;}
div.gallery-main .gallery-page {display: block; float: right; font-size: 10px; line-height: 5.0em; }
div.gallery-main ul {padding-left: 15px;}
div#gallery-nav {margin: 20px; font-family: 'FuturaHeavy'; position: absolute; bottom: 0px; width: 350px;}
div#gallery-nav .bio-prev {float: left;}
div#gallery-nav .bio-next {float: right;}
div#gallery-nav a {text-decoration: underline;}
div#gallery-nav a:hover {color: #DFDFDF;}
div#gallery-nav .end {color: #ACACAC; }

div#gallery-list {position: relative; height: 440px; overflow: visible; background-color: black; }
div#gallery-list-inner {position: absolute; left: 0px; top: 0px; width: 390px; height: 430px; background-color: black;}


a.gallery-select {display: block; width: 120px; height: 185px; float: left; padding: 0px 10px 10px 0px; position: relative;}
a.gallery-select:hover { background: url('../images/gallery-selected-bg.jpg') no-repeat bottom center; color: black;}
a.gallery-select img {padding: 10px;}
div#gallery-select-caption {padding: 10px; font-size: 0.8em;}
div#gallery-select-caption .title {font-family: 'din-bold'; display: block;}


div.gallery-images{
 position: absolute;
 top: 0px;
 left: 100%;
 width: 395px;
 height: 408px;
 background: url('../images/gallery-extension.png') no-repeat top left;
}
div#gallery-images-container {padding: 10px 15px; width: 365px; height: 388px;}

.gallery-images {display: none;}

a.media-link {display: block; width: 280px; padding: 10px; margin-left: -10px; font-family: 'din-bold'; background: black; height: 40px;}
a.media-link:hover {background: url('../images/media-selected.jpg') no-repeat center center; color: black;}
a.media-link span.media-date {float: right; font-family: 'din-light'; margin-left: 20px; text-align: right; }

a.email {font-family: 'FuturaHeavy'; font-size: 1.6em; letter-spacing: 0.05rem; text-align: center; text-decoration: none !important; }
a.email:hover {color: #919191;}
p.contact-right {float: left; display: block; font-size: 0.9em; color: #fff; }
div.contact-main a {text-decoration: underline; color: #919191;} 
div.contact-main a:hover {color: #DFDFDF; }

.home #footer {display: block;}
#footer {position: relative; bottom: 0px; padding: 5px; font-size: 0.9em; width: 100%; }
#footer a {text-decoration: underline; }
#footer a:hover {color: #DFDFDF; }


.home-links {color: #bebebe; border-bottom: 1px solid #6f6f6f; padding-bottom: 20px; margin-bottom: 30px;}
.wide-border .highslide-caption {font-family: 'din-light'; color: black; text-align: left; }

.home-social {
	display: inline-block; 
	vertical-align: middle; 
	color: #fff; 
	padding: 0 8px;
}

.home-social img, .menu-social img {
	height: 14px; 
	width: 14px;
	display: inline-block;
	margin-top: 10px;
	margin-right: 4px;
}

@media only screen and ( max-width: 1060px )  {
	body {
		font-size: 2em;
	}
	body p {
		font-size: 1.25em;
	}
	#centralise-container {
		width: 100%;
		left: 0%;
	}
	#container-shade {
		width: 100%;
		left: 0%;
	}
	#main-content {
		padding: 2em 1.5em;
	}
	h2 {
		font-size: 60px;
	}
	h6 {
		font-size: 1.25em;
	}
	blockquote {
		font-size: 1.25em;
		line-height: 1.25em;
	}
	#header .menu-social {
		right: 2em;
		top: 2em;
	}
	.home img {
		width: 100%;
	}
	.home-social {
		margin: 15px 0;
	}
	.home-social img, .menu-social img {
		width: 50px;
		height: 50px;
		display: inline-block;
	}
	div#album-cover, div#album-cover img {
		width: 100%;
		height: auto;
		float: none;
	}
	div#album-desc {
		width: auto;
	}
	div#album-desc p {
		margin: 1em 0;
	}
	button, input[type=button] {
		font-size: 1.25em;
		padding: 0.5em 1em;
	}
	select {
		height: 2em;
		font-size: 1.25em;
	}
	input[type="image"] {
		min-width: 50%;
	}
	.updates iframe, .biography iframe, .home iframe:not(.spotify) {
		min-height: 20em !important;
	}
	div.gallery-main .gallery-page {
		font-size: 0.5em;
		line-height: 2em;
	}
	div#gallery-list {
		height: 35em;
	}
	div#gallery-list-inner {
		width: 100%;
		height: 35em;
	}
	a.gallery-select {
		width: 30%;
		height: auto;
	}
	a.gallery-select img {
		width: 100%;
	}
	div#gallery-nav {
		width: 95%;
	}
	div#bio-nav {
		margin: 2em 0 6em 0;
	}
}