@import "reset.css";
@import "bg-anim.css";

/* Global Styling */

html{
	background: #034c6c;
	overflow: -moz-scrollbars-vertical;
	overflow-x: hidden;
}

body{
	font-family: "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 300;
	font-size: 14px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
    -webkit-text-size-adjust: none;
}

img{
	border:0;
	-ms-interpolation-mode:bicubic;
	position:absolute;
}

a {
	color:rgba(0, 0, 0, 0.3);
	text-decoration:none;
	-webkit-transition: color 0.2s ease-out;
	-moz-transition: color 0.2s ease-out;
	-o-transition: color 0.2s ease-out;
	-ms-transition: color 0.2s ease-out;
	transition: color 0.2s ease-out;
}

a:hover {
	color:rgba(255, 255, 255, 1);
}

@-webkit-keyframes reset{
	0%{opacity:0}
	100%{opacity:0}
}

@-moz-keyframes reset{
	0%{opacity:0}
	100%{opacity:0}
}

@-ms-keyframes reset{
	0%{opacity:0}
	100%{opacity:0}
}

@keyframes reset{
	0%{opacity:0}
	100%{opacity:0}
}

@-webkit-keyframes fade-in{
	0%{opacity:0}
	100%{opacity:1}
}

@-webkit-keyframes slide-in{
	0%{opacity:0;-webkit-transform:perspective(2000px) translate3d(0,0,450px)}
	80%{-webkit-transform:translate3d(0,0,0)}
	100%{opacity:1;-webkit-transform:translate3d(0,0,0)}
}

@-moz-keyframes fade-in{
	0%{opacity:0}
	100%{opacity:1}
}

@-ms-keyframes fade-in{
	0%{opacity:0}
	100%{opacity:1}
}

@keyframes fade-in{
	0%{opacity:0}
	100%{opacity:1}
}

.img-replace{height: 100%; text-indent: -9999em;}

.left{float:left;}
.right{float:right;}



/* Piitri Content */

.logo{
	background: url(../img/logos/piitri-logo.png) 0 0 no-repeat;
	width:658px;
	height:278px;
	position: relative;
	margin:180px auto;
	-webkit-animation-name:reset,slide-in;
	-webkit-animation-duration:1.2s;
	-webkit-animation-timing-function:ease-in;
	-webkit-animation-iteration-count:1;
	-webkit-animation-delay:0,1s
}

.logo span{display:none;}

#twitter a, #facebook a, #contact a{
	width:48px;
	height:48px;
	display:block;
	background-color:rgba(255, 255, 255, 0.2);
	border:2px solid rgba(255, 255, 255, 0.2);
	-moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
	position: fixed;
	cursor:pointer;
}


#contact a{
	background: url(../img/social/contact.png) no-repeat center center;
	right:12px;
	top:12px;
}

#twitter a{
	background: url(../img/social/twitter.png) no-repeat center center;
	left:12px;
	top:12px;
}

#facebook a{
	background: url(../img/social/facebook.png) no-repeat center center;
	left:60px;
	top:12px;
}

#contact a:hover, #twitter a:hover, #facebook a:hover{
	background-color:rgba(0, 0, 0, 0.1);
	border:2px solid rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}



/* Footer Content */

.credits{
	width:180px;
	position:absolute;
	bottom:24px;
	left:50%;
	margin-left:-90px;
	text-align:center;
	color:rgba(255, 255, 255, 0.8);
	text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.4);
}