@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'archer';
    src: url('../fonts/head/sf_archery_black-webfont.eot');
    src: url('../fonts/head/sf_archery_black-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/head/sf_archery_black-webfont.woff') format('woff'),
         url('../fonts/head/sf_archery_black-webfont.ttf') format('truetype'),
         url('../fonts/head/sf_archery_black-webfont.svg#sf_archery_blackregular') format('svg');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'millen';
    src: url('../fonts/body/millennia-webfont.eot');
    src: url('../fonts/body/millennia-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/body/millennia-webfont.woff') format('woff'),
         url('../fonts/body/millennia-webfont.ttf') format('truetype'),
         url('../fonts/body/millennia-webfont.svg#millenniaregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
	font-family: archer, Arial, sans-serif; 
	background-image:url(../images/body.jpg); 
	background-color:#999; 
	height:auto;
	font-size:0;
	color:#CCC;
	width:912px;
	margin-left:auto; 
	margin-right:auto;
	margin-top:0;
	margin-bottom:0;
}



.img {
	float:left; 
	display:inline; 
	width:84px; 
	height:112px; 
	padding:0;
 }
 
.li { 
	float:left;
	position:fixed;
	display:inline-block;
	text-align:center;  
	text-decoration:none; 
	border:solid #000 11px;
	background-color:#000;
	padding:0;
	z-index:2;
	font-size:16px;
	}
.li:before {
    content: none;
	}
.navpassive {
	display:inline-block; 
	width:150px; 
	height:35px; 
	text-align:center; 
	padding-top:15px; 
	text-decoration:none; 
	color:#F00;  
	border: solid #F00 2px; 
	background-color:#000;
	cursor: pointer;
	border-radius:5px;

	transition-property: border, color, border-radius;
	transition-duration: 2s;
	-moz-transition-property: border, color, border-radius; /* Firefox 4 */
	-moz-transition-duration: 2s; /* Firefox 4 */
	-webkit-transition-property: border, color, border-radius; /* Safari and Chrome */
	-webkit-transition-duration: 2s; /* Safari and Chrome */
	-o-transition-property: border, color, border-radius; /* Opera */
	-o-transition-duration: 2s; /* Opera */
	}


.navpassive:hover{ 
	border:solid #090 2px; 
	color:#090;
	border-radius:25px;
}

.navactive {
	display:inline-block; 
	width:150px; 
	height:35px; 
	text-align:center; 
	padding-top:15px; 
	text-decoration:none; 
	color:#090;  
	border: solid #090 2px; 
	background-color:#000;
	cursor: pointer;
	border-radius:5px;

	transition-property: border, color, border-radius;
	transition-duration: 2s;
	-moz-transition-property: border, color, border-radius; /* Firefox 4 */
	-moz-transition-duration: 2s; /* Firefox 4 */
	-webkit-transition-property: border, color, border-radius; /* Safari and Chrome */
	-webkit-transition-duration: 2s; /* Safari and Chrome */
	-o-transition-property: border, color, border-radius; /* Opera */
	-o-transition-duration: 2s; /* Opera */
	}


.navactive:hover{ 
	border:solid #F00 2px; 
	color:#F00;
	border-radius:25px;}

.larrowpoint{
	border-top: 40px solid transparent;
	border-bottom: 40px solid transparent; 
	border-right:40px solid #ccc;
	top:50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
 float:left;
 font-size:0;
 position:relative;
display:inline-block;
}
.rarrowpoint{
	border-top: 40px solid transparent;
	border-bottom: 40px solid transparent; 
	border-left:40px solid #ccc;
	top:50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size:0;
 float:left;
 
 position:relative;
display:inline-block;
}
.arrowbase{
height:40px;
width:44px;
background-color:#ccc;
display:inline-block;
 top:50%;
 font-size:0;
 float:left;
 position:relative;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.arrowfix{
height:112px;
width:84px;
background-color:#000;
position:fixed; 
z-index:2; 
font-size:0;
border:solid #000 10px;
display:inline-block;
  }

.header {
	font-family: archer, Arial, sans-serif;
	text-align:center;
	margin-top:40px;
}

.secret {
	display:inline; 
	text-decoration:none; 
	color:#CCC;
	}

#content {
	font-family: millen, Arial, sans-serif;
	height:inherit; width:654px; 
	background-image:url(../images/content.jpg); 
	padding:25px;
	border:solid 5px #000;
	right: 0;
    left: 0;
    margin: auto;
	font-size:24px;
	position:absolute;
	padding-top:41px;

	overflow: hidden;
	transform: translate(0px,-100%); /* Standard syntax */
	transition-property: transform;
	transition-duration: 1s;}

	
h2 {
	text-align:center; 
	font-family: archer, Arial, sans-serif;
}

.arrow{
	opacity:100;
	cursor: pointer;

	transition-property: opacity;
	transition-duration: 1s;
	-moz-transition-property: opacity; /* Firefox 4 */
	-moz-transition-duration: 1s; /* Firefox 4 */
	-webkit-transition-property: opacity; /* Safari and Chrome */
	-webkit-transition-duration: 1s; /* Safari and Chrome */
	-o-transition-property: opacity; /* Opera */
	-o-transition-duration: 1s; /* Opera */	
}

.arrow:hover{

	opacity:0;
}
#preview{
text-align:center;
height:100px;
margin-bottom:40px;
}
#imga{
display:inline;
margin-left:40px;
margin-right:40px;
height:100px;
cursor: pointer;
}
#imgb{
display:inline;
margin-left:40px;
margin-right:40px;
height:100px;
cursor: pointer;
}
#imgc{
display:inline;
margin-left:40px;
margin-right:40px;
height:100px;
cursor: pointer;
}
#gallery{
 margin-left:auto;
 margin-right:auto;
 width:500px; 
 text-align:center; 
 position:relative;
}
#workimg {
text-align:center;
position:relative;
width:500px;
}
.workarrow {
opacity:0.1;
z-index:1;
cursor: pointer;
display:inline-block;
height:112px;
width:84px;
background-color:#000;

	transition-property: opacity;
	transition-duration: .5s;
	-moz-transition-property: opacity; /* Firefox 4 */
	-moz-transition-duration: .5s; /* Firefox 4 */
	-webkit-transition-property: opacity; /* Safari and Chrome */
	-webkit-transition-duration: .5s; /* Safari and Chrome */
	-o-transition-property: opacity; /* Opera */
	-o-transition-duration: .5s; /* Opera */	
}

.workarrow:hover{

	opacity:1;
}
.workfix{
font-size:0;
position:absolute;
 top:50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
#workfixmid{
display:inline-block;
width:332px;
height:112px;
}