@import url(https://fonts.googleapis.com/css?family=Anton);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,600,800);
@import "reset.css";

body{
	position: absolute;
	width: 100%;
	height: 100%;
	min-width: 950px;
	min-height: 900px;
	background:#000000;
	color: #6b6a6a;
	text-transform: none;
	font: 10px "Open Sans", sans-serif;
	font-weight: 600;	
}
#wrapper{
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
#spinner{
	position: fixed;
	z-index: 9999;
	width: 100%;
	height: 100%;
	background:#000000 url("../images/webSiteLoader.gif") center no-repeat;
}
/*-------------Slideshow------------*/
#topGradient{
	position: absolute;
	top: 0;
	z-index: 3;
	width: 100%;
	height: 236px;
	background: url(../images/top-gradient.png) 0 repeat-x;
}
#imgSpinner{
	position: absolute;
	bottom: 8px;
	left: 50%;
	z-index: 9000;
	margin-left: 380px;
	width: 32px;
	height: 32px;
	background: url("../images/contentLoader.gif") center right no-repeat;
}
.topImg{
	position: absolute;
	z-index: 1;
	background: #000;
}
.bottomImg{
	position: absolute;
	z-index: 0;
	background: #000;
}
/*-------------header------------*/
header{
	position: absolute;
	top: 0;
	z-index: 5;
	width: 100%;
}
header>div{
	margin: 25px auto 0;
	width: 940px;
	position: relative;
}
header2 {width:360px;height:100;float:left}
/*-------------logo------------*/
h1 {
	float: left;
}
h1 > a{
	display: block;
	margin: -25px 0px 0 -132px;
	width: 503px;
	height: 137px;
	background:url("../images/metal-logo.png") no-repeat;
	text-indent: -9999px;
}
/*-------------Menu------------*/
#menu > ul{	
	display: inline-block;
	
		margin-top: 9px;
		float: right;
}
#menu > ul > li{
	display: inline-block;
	margin-left: 9px;
}
#menu > ul > li>a{
	position: relative;
	z-index: 2;
	display: block;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 16px;
}
#menu > ul ul{
	position: absolute;
	z-index: 0;
	margin: -10px 0 0 -18px;
	padding: 20px 65px 70px 20px;
	background: #000;
	background: url(../images/sub-menu-part.png) 0 repeat-x;
}
#menu > ul ul>li>a{
	display: inline-block;
	margin: 4px 0 2px 0;
	padding-right: 5px;
	color: #6b6a6a;
	text-decoration: none;
	white-space: nowrap;
	font-weight: 600;
	font-size: 10px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
#menu > ul ul>li>a:hover{
	color: #ffd700;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
/*-----------Content-----------*/
section> ul{
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 4;
	margin: -340px -470px;
	width: 100%;
}
section> ul>li{
	position: absolute;
	width: 960px;
	height: 600px;
}
section> ul>li>img{
	float: left;
	padding-right: 29px;
}
.box_1{
	position: relative;
	float: left;
	margin: -14px 1px 0 -25px;
	padding: 26px 40px 0 45px;
	width: 259px;
	height: 620px;
}
.box_2{
	position: relative;
	margin: -14px 1px -11px -25px;
	padding: 26px 50px 0 45px;
	width: 569px;
	height: 347px;
}
.box_3{
	position: relative;
	display: inline-block;
	margin: -14px 0px 0px -25px;
	padding: 26px 38px 0 45px;
	width: 259px;
	height: 270px;
}
.box_4{
	position: relative;
	float: left;
	margin: -14px 1px 0 -25px;
	padding: 25px 40px 0 45px;
	width: 920px;
	height: 620px;
}
.box_6{
	position: relative;
	float: left;
	margin: -14px 1px 0 -25px;
	padding: 26px 40px 0 45px;
	width: 339px;
	height: 620px;
	background: url(../images/page-7-part-1.png) 0 0 no-repeat;
}
.box_7{
	position: relative;
	float: left;
	margin: -14px 1px 0 -25px;
	padding: 26px 40px 0 45px;
	width: 499px;
	height: 620px;
	background: url(../images/page-7-part-2.png) 0 0 no-repeat;
}
.box_8{
	position: relative;
	float: left;
	margin: -14px 1px 0 -25px;
	padding: 27px 330px 0 45px;
	width: 852px;
	height: 620px;
}
.b4_bg_1{
	background: url(../images/page-6-part-1.png) 0 0 no-repeat;
}
.b8_bg_1{
	background: url(../images/page-8-part-2.png) 0 0 no-repeat;
}
h2{
	padding: 14px 0 10px 0;
	color: #fff;
	letter-spacing: -2px;
	font-weight: 800;
	font-size: 30px;
	line-height: 31px;
}
h3 {
	padding-bottom: 10px;
	word-spacing: 3px;
	letter-spacing: -1px;
	font-weight: 600;
	font-size: 12px;
	line-height: 20px;
}
h4{
	padding: 14px 0 10px 0;
	color: #fff;
	letter-spacing: -2px;
	font-weight: 800;
	font-size: 22px;
	line-height: 31px;
}
.buybutton {
	display: inline-block;
	padding: 2px 6px;
	background: url(../images/page-1-text-part-1.jpg) 0 0 repeat-x;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 18px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
h5{
	padding: 2px 0 10px 0;
	color: #fff;
	letter-spacing: -2px;
	font-weight: 200;
	font-size: 20px;
	line-height: 31px;
}
h6{
	padding: 14px 0 10px 0;
	color: #fff;
	letter-spacing: -2px;
	font-weight: 800;
	font-size: 22px;
	line-height: 31px;
}
p {
	padding-bottom: 19px;
	font-size: 12px;
	line-height: 16px;
}
p>a{
	color: #ffffff;
	text-decoration: none;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
p>a:hover{
	color: #FFD700;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.moreButton{
	display: inline-block;
	padding: 4px 6px;
	background: url(../images/page-1-text-part-1.jpg) 0 0 repeat-x;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 12px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;	
}
.moreButton:hover{
	color: #ffd700;	
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.aLink{
	display: inline-block;
	padding: 0px 4px;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 12px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;	
}
.aLink:hover{
	color: #ffd700;	
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.moreButton2{
	display: inline-block;
	padding: 4px 6px;
	background: url(../images/page-1-text-part-1.jpg) 0 0 repeat-x;
	color: #fff;
	text-decoration: none;
	float: right;
	font-weight: 700;
	font-size: 12px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;	
}
.moreButton2:hover{
	color: #ffd700;	
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.floatit {
    float: right;
}
.viewport{
	position: relative;
	overflow: hidden;
}
.viewport > .overview{
    position: relative;
}
.viewport2{
	position: relative;
	overflow: hidden;
}
.viewport2 > .overview{
    position: relative;
}
.scrollbar{
	position: relative;
}
.thumb{
	position: absolute;
}
.Hviewport{
	top: 10px;
	float: left;
	width: 267px;
	height: 579px;
}
.Hscrollbar{
	margin: 10px 0 0 261px;
	padding: 2px;
	width: 10px;
	height: 580px;
	background: url(../images/scroll-part-1.png) left top no-repeat;
}
.HTrack{
	margin: 2px 0;
	width: 6px;
	height: 59px;
	background: url(../images/scroll-part-3.jpg) left 0px no-repeat;
	cursor: pointer;
}
.Vviewport{
	top: 10px;
	float: left;
	margin: -10px 0 0 -20px;
	width: 620px;
	height: 601px;
}
.Vscrollbar{
	top: 574px;
	padding: 2px;
	width: 580px;
	height: 10px;
	background: url(../images/scroll-part-2.png) left top no-repeat;
}
.VTrack{
	margin: 0 2px;
	width: 59px;
	height: 6px;
	background: url(../images/scroll-part-4.jpg) left 0px no-repeat;
	cursor: pointer;
}
.Voverview{
	white-space: nowrap;
	width: 3720px;
}
.Voverview>img{
	/*display: inline-block;
	float: left;*/
}
.lSpacing{
	letter-spacing: -4px;
}
.floatR{
	top: -349px;
	float: right;
}
.vHeight{
	height: 569px;
}
/*---------Splash Page--------*/
#home{
    padding-top: 326px;
    height: 317px;
}
.banner{
	position: relative;
	float: left;	
	margin: -14px -5px -20px -25px;
	padding: 27px 44px;
	width: 182px;
	height: 306px;
	color: #fff;
	text-decoration: none;
}
.banner>.bannerBG{
	position: absolute;
	top: 25px;
	left: 25px;
	z-index: 0;	
	width: 208px;
	height: 294px;
	border: 6px solid white;
	background: #ff7e00;
}
.banner>img{
	position: absolute;
	top: 0;
	z-index: 0;
	margin: 31px -13px;
}
.banner>h2{
	position: relative;
	padding: 0;
	color: #fff;
	font:47px "Anton", sans-serif;
}
.banner>h2>span{
	color: #D7209D;
	font: 38px "Open Sans", sans-serif;
	font-weight: 400;
	line-height: 80px;
}
.txt_H2{
	position: absolute !important;
	bottom: 57px;
}
.txt_H3{
	position: absolute !important;
	bottom: 67px;
}
.b_txt_3{
	display: inline-block;
	margin-top: -17px;
	padding: 4px 1px;
	font: 12px "Open Sans", sans-serif;
	font-weight: 600;
	position: absolute;
	bottom: 49px;
}
.b_txt_2{
	display: inline-block;
	margin-top: -17px;
	padding: 4px 9px;
	background: url(../images/page-1-text-part-1.jpg);
	font: 12px "Open Sans", sans-serif;
	font-weight: 600;
	position: absolute;
	bottom: 49px;
}
.b_txt_1{
	position: relative;
	margin: -9px 0 113px 0;
	padding: 1px 5px;
	width: 89px;
	font: 10px "Open Sans", sans-serif;
	font-weight: 600;
}
.bg_txt_1{
	background: #d7209d;
}
.bg_txt_2{
	background: #323bf1;
}
.bg_txt_3{
	background: #ff7e00;
}
.bg_txt_4{
	background: #d7209d;
}
.bg_txt_rateu{
	background: green;
}
.bg_txt_rate7{
	background: #FC9141;
}
.bg_txt_rate13{
	background: blue;
}
.bg_txt_rate16{
	background: white;
}
.bg_txt_rate18{
	background: red;
}
.bg_1{
    background: url(../images/page-1-part-1.png) 0 0 no-repeat;
}
.bg_2{
	background: url(../images/page-1-part-2.png) 0 0 no-repeat;
}
.bg_3{
	background: url(../images/page-1-part-3.png) 0 0 no-repeat;
}
/*--------Club Page--------*/
.b_1bg_1{
	background: url(../images/page-2-part-1.png) 0 0 no-repeat;
}
.b_1bg_2{
	background: url(../images/page-2-part-2.png) 0 0 no-repeat;
}
.b_1bg_3{
	background: url(../images/page-2-part-3.png) 0 0 no-repeat;
}
.color_1{
	color: #FFD700;
}
.color_2{
	color: #323bf1;
}
.color_3{
	color: #ff7e00;
}
.box_1>img{
	margin: -1px -20px;
}
.box_1>.Hviewport ul{
	margin-top: 6px;
}
.box_1>.Hviewport ul>li{
	margin-bottom: -3px;
}
.Hviewport h2{
	padding: 4px 0 10px;
}
.box_1>.Hviewport ul>li>h3{
	padding-bottom: 1px;
}
.box_1>.Hviewport ul>li>img{
	float: left;
	padding-right: 11px;
}
.box_1>.Hviewport ul>li>div{
	display: inline-block;
	margin-bottom: 5px;
	padding: 0px 4px;
	background: url(../images/page-2-text-part-2.jpg) 0 0 repeat-x;
	font-size: 14px;
	color: #fff;
}
.buttonLink{
	display: inline-block;
	margin-top: -5px;
	margin-bottom: 20px;
	color: #fff;
	text-decoration: none;
	letter-spacing: -1px;
	font-weight: 600;
	font-size: 12px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.buttonLink:hover{
	color: #ffd700;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
/*--------Parties Page--------*/
.b_2bg_1{
	background: url(../images/page-5-part-1.png) 0 0 no-repeat;
}
.box_2>img{
	margin: 6px 17px 19px 0;
}
h3>a{
	text-decoration: none;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
h3>a:hover{
	color: #fff;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
/*--------Events Page--------*/
.b_3bg_1{
	background: url(../images/page-5-part-2.png) 0 0 no-repeat;
}
.b_3bg_2{
	background: url(../images/page-5-part-3.png) 0 0 no-repeat;
}
.box_3>img{
	float: left;
	margin: 6px 12px 0px 0;
}
.box_3>h3{
	padding-bottom: 1px;
}
.box_3>p{
	padding-bottom: 15px;
}
#residents>.box_1>.Hviewport>.overview> p{
	padding-bottom: 25px;
	width: 251px;
}
#residents>.box_1>.Hviewport>.overview> ul>li>h3{
	padding-bottom: 0px;
}
#residents>.box_1>.Hviewport>.overview> ul>li>p{
	padding-bottom: 22px;
}
/*--------Gallery Page--------*/
.margin{
	margin: -39px  0 0 40px;
	padding: 26px 0 0 0;
}
/*--------Contacts Page--------*/
.google_map{
	margin: -1px 0 9px -20px;
	width: 380px;
	height: 332px;
	border-radius:0px;
	background: #000000;
}
.col{
	float: left;
	display: inline-block;
	width: 90px;
}
#form1 {
    margin-top: 6px;
    width: 480px;
}
#form1 > .success{
	color: #b5b5b5;
	line-height: 18px;
}
#form1 input {
	margin: 0 0 0px 0;
	padding: 13px 15px;
	width: 328px;
	outline: none;
	border: 1px solid #4e4e4e;
	background: none;
	box-shadow: none;
	color: #ff7e00;
	text-transform: uppercase;	
	font: 12px "Open Sans", sans-serif;
	font-weight: 600;
}
#form1 textarea {
	overflow: auto;
	padding: 14px 16px;
	width: 446px;
	height: 160px;
	outline: none;
	border: 1px solid #4e4e4e;
	background: none;
	box-shadow: none;
	color: #ff7e00;
	text-transform: uppercase;
	font: 12px "Open Sans", sans-serif;
	font-weight: 600;
	resize: none;
}
#form1 label {
	position: relative;
	display: inline-block;
	margin-bottom: 2px;
	min-height: 58px;
}
#form1 .error, #form1 .empty {
	display:none;
	margin: 0 0 0px 0;
	color: #b5b5b5;
}
.btns {
    float: right;
    clear: both;
    margin-top: 4px;
}
.btns a{
	margin-left: 18px;
}
/*----------Footer---------*/
footer{
	position: absolute;
	bottom: 0px;
	z-index: 3;
	width: 100%;
	height: 424px;
	background: url(../images/bottom-gradient.png) 0 repeat-x;
}
footer>div{
	margin: 310px auto 0;
	width: 940px;
}
footer>div>span{
	white-space: pre;
}
footer>div>nav>ul {
    float: left;
    margin-top: 6px;
    width: 640px;
}
footer>div>nav>ul>li {
	display: inline-block;
	margin-bottom: 6px;
	width: 157px;
}
footer a{
	color: #776e6e;	
	text-decoration: none;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
footer a:hover{
	color: #ffd700;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
#footerBox{
	display: inline-block;
	margin-bottom: 22px;
	width: 300px;
}
#footerBox>a{
	display: inline-block;
	margin-bottom: 5px;
	height: 27px;
	text-transform: none;
	font-size: 12px;
	line-height: 26px;
}
#footerBox>a:hover{
	color: #fff;
}
#footerBox>a>img{
	float: left;
	margin-right: 6px;
}
/*------audioPlayer-------*/
#audioPlayer{
	display: inline-block;
	margin: -82px 0 0 120px;
	width: 140px;
	height: 44px;
}
#prevSound{
	position: relative;
	float: left;
	overflow: hidden;
	width: 35px;
	height: 28px;
}
#prevSound>img{
	position: absolute;
}
#playSound{
	position: relative;
	float: left;
	overflow: hidden;
	width: 35px;
	height: 28px;
}
#playSound>img{
	position: absolute;
	top: 0;
	background: #000;
}
#stopSound{
	position: relative;
	float: left;
	overflow: hidden;
	width: 35px;
	height: 28px;
}
#stopSound>img{
	position: absolute;
}
#nextSound{
	position: relative;
	float: left;
	overflow: hidden;
	width: 35px;
	height: 28px;
}
#nextSound>img{
	position: absolute;
}
#progressBar{
	display: inline-block;
	width: 140px;
	height: 15px;
	background: url(../images/player-part.png) 0 0 no-repeat;
}
#timeBar{
	float: left;
	margin: 6px 3px;
	padding: 1px 1px;
	width: 100px;
	height: 2px;
	background: #000;
	cursor: pointer;
}
#timeLine{
	width: 0%;
	height: 2px;
	background: #fff;
}
#tracerLine{
	position: relative;	
	top:-4px;
	width: 100%;
	height: 6px;
	background: red;
	opacity:0;
}
#volumeInd{
	position: relative;
	top: 4px;
	left: 13px;	
	float: left;
	width: 15px;
	height: 7px;
	cursor: pointer;
}
#volume{
	width: 13px;
	height: 7px;
	background: url(../images/player-volume.png) 0 0 no-repeat;
}