/* WEB */
* {margin:0; padding:0}
body {margin:0; text-align:center; background:url("bg.gif") no-repeat center center #030303; allowtransparency:true}

/* Fade-In Animations */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
	 
.fade { opacity:0;  /* make things invisible upon start */ -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;animation:fadeIn ease-in 1;
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;	animation-fill-mode:forwards;-webkit-animation-duration:1s;-moz-animation-duration:1s;animation-duration:1s;}
	 
.fade:first-child {-webkit-animation-delay: 1s;-moz-animation-delay: 1s;animation-delay: 1s;}
.fade:nth-child(2n) {-webkit-animation-delay: 1.6s;-moz-animation-delay:1.6s;animation-delay: 1.6s;}

/* Font Faces */
@font-face {
    font-family: 'Museo300Regular';
    src: url('fonts/Museo300-Regular-webfont.eot');
    src: url('fonts/Museo300-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Museo300-Regular-webfont.woff') format('woff'),
         url('fonts/Museo300-Regular-webfont.ttf') format('truetype'),
         url('fonts/Museo300-Regular-webfont.svg#Museo300Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* 01 START */
.logo { position: absolute; height: 214px; width:248px; top: 50%; left: 50%; margin-top: -107px; /* height / 2 */ margin-left: -124px; /* width / 2 */}
.logo { -webkit-transition:opacity 0.2s linear, visibility 0.2s linear; -moz-transition:opacity 0.2s linear, visibility 0.2s linear; -o-transition:opacity 0.2s linear, visibility 0.2s linear; transition:opacity 0.2s linear, visibility 0.2s linear}
.logo:hover {zoom:1; filter:alpha(opacity=40); opacity:0.4;}

.menu { position: fixed; width:100%; background:url("../img/arrow.png") no-repeat bottom center; top:0; padding:120px 0 20px 0; overflow:hidden;	position: fixed; display: table; table-layout: fixed;}
.menu_left {display: table-cell; padding:8px 0; text-align:right}
.menu_left a {padding-right:25px;}
.menu_left a {-webkit-transition:opacity 0.2s linear, visibility 0.2s linear; -moz-transition:opacity 0.2s linear, visibility 0.2s linear; -o-transition:opacity 0.2s linear, visibility 0.2s linear; transition:opacity 0.2s linear, visibility 0.2s linear}
.menu_left a:hover {zoom:1; filter:alpha(opacity=60); opacity:0.6;}
.menu_logo {width: 60px; display: table-cell;  z-index:0;}
.menu_right {display: table-cell; padding:8px 0; text-align:left; font: 18px 'Museo300Regular', 'Lucida Sans', 'Lucida Grande', Tahoma, sans-serif; color:#fff; letter-spacing:0.1em;}
.menu_right a {padding-left:25px; top:-13px; position:relative; color:#fff; text-decoration:none}
.menu_right a {-webkit-transition:opacity 0.2s linear, visibility 0.2s linear; -moz-transition:opacity 0.2s linear, visibility 0.2s linear; -o-transition:opacity 0.2s linear, visibility 0.2s linear; transition:opacity 0.2s linear, visibility 0.2s linear}
.menu_right a:hover {zoom:1; filter:alpha(opacity=60); opacity:0.6;}

.bottom { position: fixed; width:100%; background:#000; bottom:50px; padding:20px; color:#fff; font: 21px 'Museo300Regular', 'Lucida Sans', 'Lucida Grande', Tahoma, sans-serif; letter-spacing:0.1em; text-transform:uppercase; cursor:default}
.bottom {-webkit-transition:opacity 0.2s linear, visibility 0.2s linear; -moz-transition:opacity 0.2s linear, visibility 0.2s linear; -o-transition:opacity 0.2s linear, visibility 0.2s linear; transition:opacity 0.2s linear, visibility 0.2s linear}
.bottom:hover {zoom:1; filter:alpha(opacity=70); opacity:0.7;}