/* reset */

html, body, object, img {
    margin: 0;
    padding: 0;
	}
  
a:active, a:hover { outline: 0; }
img { border: 0; }

/* structure */
 
#content{
	width: 970px;
	height: 250px;
	overflow: hidden;
	position: relative;
	background: url(images/bg.jpg) 0px 0px no-repeat;
    background: #ffffff;
	}

#border{
	position: absolute;
    top: 0px;
    left: 0px;
    width: 966px;
    height: 246px;
    overflow: hidden;
    display: block;
    border: 2px solid #000000;
	z-index: 998;
}

/* elements */

#bg, #copy1, #copy2, #copy3a, #copy3b, #cta, #logo, #logoEnd, #endframe, #legal-1, #legal-2, #legal-open, #overlay {
    width: 970px;
	height: 250px;
	display: block;
	opacity: 0;
	position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
	}

#bg{ background: url(images/bg.jpg) 0 0 no-repeat; z-index: 101; opacity: 1;}

#copy1{ background: url(images/copy1.png) 0px 0px no-repeat; top:250px; z-index: 152; opacity: 1;}
#copy2{ background: url(images/copy2.png) 0px 0px no-repeat; top:-250px; z-index: 152; opacity: 1;}
#copy3a{ background: url(images/copy3a.png) 0px 0px no-repeat; left:970px; z-index: 200; opacity: 1;}
#copy3b{ background: url(images/copy3b.png) 0px 0px no-repeat; z-index: 200; opacity: 0;}

#endframe{ background: url(images/endframe.jpg) 0px 0px no-repeat; z-index: 150; opacity: 1;}

#cta{ background: url(images/cta.png) 0px 0px no-repeat; z-index: 200; opacity: 0; }

#logo{ background: url(images/logo.png) 0px 0px no-repeat; z-index: 300; opacity: 1; }
#logoEnd{ background: url(images/logo_end.png) 0px 0px no-repeat; z-index: 300; opacity: 0; }


#endHolder{
	width: 970px;
	height: 250px;
	display: block;
	position: absolute;
	overflow: hidden;
    top: 0px;
    left: 970px;
    opacity: 1;
    z-index: 150;
}

#fig1Holder{
	width: 970px;
	height: 250px;
	display: block;
	position: absolute;
	overflow: hidden;
    top: 0px;
    left: 0px;
    opacity: 1;
    z-index: 140;
}


#fig1{
	width: 970px;
	height: 250px;
	display: block;
	position: absolute;
	overflow: hidden;
	z-index: 110;
	opacity: 1;
	background: url(images/fig1.png) 0 0 no-repeat;
}

#fig2Holder{
	width: 970px;
	height: 250px;
	display: block;
	position: absolute;
	overflow: hidden;
    top: 0px;
    left: 970px;
    opacity: 1;
    z-index: 131;
}


#fig2{
	width: 970px;
	height: 250px;
	display: block;
	position: absolute;
	overflow: hidden;
	z-index: 110;
	opacity: 1;
	background: url(images/fig2.png) 0 0 no-repeat;
}



#overlay{ z-index: 990; opacity: 0; background: #125c7e;}

#legal-1{
	top: 0;
	left: 0;
	z-index: 999;
	opacity: 0;
	background: url(images/legal_1.png) 0px 0px no-repeat;
	}

#legal-2{
	top: 0;
	left: 0;
	z-index: 989;
	opacity: 0;
	background: url(images/legal_2.png) 0 0 no-repeat;
	}

#legal-open{
    position: absolute;
    width: 50px;
    height: 20px;
    top: 0px;
    left: 920px;
    cursor: pointer;
    opacity: 0;
    z-index: 9999;
	display: none;
    }

a.click-through{
    position: absolute;
    width: 970px;
    height: 250px;
    top: 0px;
    left: 0px;
    cursor: pointer;
    z-index: 999;
    }

.show{
	display: block !important;
	}

/* Animations */

.animClass {
	-webkit-transform: translate3d(0, 0, 0); /* Force Hardware Acceleration */
}
	
/* transitions */	

.transition-1{
	-webkit-transition: all 25s ease-out;
	-ms-transition: all 25s ease-out;
	-moz-transition: all 25s ease-out;
	transition: all 25s ease-out;
}

.transition-2{
	-webkit-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	transition: all 0.2s linear;
	
	-webkit-transition: all 0.2s cubic-bezier(.52,.7,.88,1.35);
	-ms-transition: all 0.2s cubic-bezier(.52,.7,.88,1.35);
	-moz-transition: all 0.2s cubic-bezier(.52,.7,.88,1.35);
	transition: all 0.2s cubic-bezier(.52,.7,.88,1.35);
}

.transition-3{
	-webkit-transition: all 0.7s ease-out;
	-ms-transition: all 0.7s ease-out;
	-moz-transition: all 0.7s ease-out;
	transition: all 0.7s ease-out;
}

.transition-4{
	-webkit-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

/* fucntions */

.figSlowScale{
	-webkit-transform: scale(1.2) translate(0px,20px) rotate(0.01deg) !important;
	-moz-transform: scale(1.2) translate(0px,20px) rotate(0.01deg) !important;
	-ms-transform: scale(1.2) translate(0px,20px) rotate(0.01deg) !important;
	-o-transform: scale(1.2) translate(0px,20px) rotate(0.01deg) !important;
	transform: scale(1.2) translate(0px,20px) rotate(0.01deg) !important;
}

.fig2SlowScale{
	-webkit-transform: scale(1.2) translate(-110px,-15px) rotate(0.01deg) !important;
	-moz-transform: scale(1.2) translate(-110px,-15px) rotate(0.01deg) !important;
	-ms-transform: scale(1.2) translate(-110px,-15px) rotate(0.01deg) !important;
	-o-transform: scale(1.2) translate(-110px,-15px) rotate(0.01deg) !important;
	transform: scale(1.2) translate(-110px,-15px) rotate(0.01deg) !important;
}

.figMove{
	-webkit-transform: translate(300px,0px) scale(1) rotate(0.01deg) !important;
	-moz-transform: translate(300px,0px) scale(1) rotate(0.01deg) !important;
	-ms-transform: translate(300px,0px) scale(1) rotate(0.01deg) !important;
	-o-transform: translate(300px,0px) scale(1) rotate(0.01deg) !important;
	transform: translate(300px,0px) scale(1) rotate(0.01deg) !important;
}

.copyUp{
	-webkit-transform: translate(0px,-250px) rotate(0.01deg) !important;
	-moz-transform: translate(0px,-250px) rotate(0.01deg) !important;
	-ms-transform: translate(0px,-250px) rotate(0.01deg) !important;
	-o-transform: translate(0px,-250px) rotate(0.01deg) !important;
	transform: translate(0px,-250px) rotate(0.01deg) !important;
}

.copyDown{
	-webkit-transform: translate(0px,250px) rotate(0.01deg) !important;
	-moz-transform: translate(0px,250px) rotate(0.01deg) !important;
	-ms-transform: translate(0px,250px) rotate(0.01deg) !important;
	-o-transform: translate(0px,250px) rotate(0.01deg) !important;
	transform: translate(0px,250px) rotate(0.01deg) !important;
}

.fig2Left{
	-webkit-transform: translate(-945px, 0px) rotate(0.01deg) !important;
	-moz-transform: translate(-945px, 0px) rotate(0.01deg) !important;
	-ms-transform: translate(-945px, 0px) rotate(0.01deg) !important;
	-o-transform: translate(-945px, 0px) rotate(0.01deg) !important;
	transform: translate(-945px, 0px) rotate(0.01deg) !important;
}

.copyLeft{
	-webkit-transform: translate(-970px, 0px) rotate(0.01deg) !important;
	-moz-transform: translate(-970px, 0px) rotate(0.01deg) !important;
	-ms-transform: translate(-970px, 0px) rotate(0.01deg) !important;
	-o-transform: translate(-970px, 0px) rotate(0.01deg) !important;
	transform: translate(-970px, 0px) rotate(0.01deg) !important;
}

.copyRight{
	-webkit-transform: translate(150px, 0px) rotate(0.01deg) !important;
	-moz-transform: translate(150px, 0px) rotate(0.01deg) !important;
	-ms-transform: translate(150px, 0px) rotate(0.01deg) !important;
	-o-transform: translate(150px, 0px) rotate(0.01deg) !important;
	transform: translate(150px, 0px) rotate(0.01deg) !important;
}

.copyLeft{
	-webkit-transform: translate(-970px, 0px) rotate(0.01deg) !important;
	-moz-transform: translate(-970px, 0px) rotate(0.01deg) !important;
	-ms-transform: translate(-970px, 0px) rotate(0.01deg) !important;
	-o-transform: translate(-970px, 0px) rotate(0.01deg) !important;
	transform: translate(-970px, 0px) rotate(0.01deg) !important;
}

.Right{
	-webkit-transform: translate(970px, 0px) rotate(0.01deg) !important;
	-moz-transform: translate(970px, 0px) rotate(0.01deg) !important;
	-ms-transform: translate(970px, 0px) rotate(0.01deg) !important;
	-o-transform: translate(970px, 0px) rotate(0.01deg) !important;
	transform: translate(970px, 0px) rotate(0.01deg) !important;
}

.Left{
	-webkit-transform: translate(-970px, 0px) rotate(0.01deg) !important;
	-moz-transform: translate(-970px, 0px) rotate(0.01deg) !important;
	-ms-transform: translate(-970px, 0px) rotate(0.01deg) !important;
	-o-transform: translate(-970px, 0px) rotate(0.01deg) !important;
	transform: translate(-970px, 0px) rotate(0.01deg) !important;
}

.logoUp{
	-webkit-transform: translate(0px, -14px) rotate(0.01deg) !important;
	-moz-transform: translate(0px, -14px) rotate(0.01deg) !important;
	-ms-transform: translate(0px, -14px) rotate(0.01deg) !important;
	-o-transform: translate(0px, -14px) rotate(0.01deg) !important;
	transform: translate(0px, -14px) rotate(0.01deg) !important;
}


/* fades */

.fade-in{ opacity: 1 !important; }

.fade-half{ opacity: 0.9 !important; }

.fade-out{ opacity: 0 !important; }

.FloatEffect{
	animation-duration: 4s;
	animation-iteration-count: 10;/*number of loops*/
	animation-timing-function: linear;
	animation-name: floatAnim;
	animation-direction: alternate;
	animation-fill-mode: forwards;

	-webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 10;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: floatAnim;
	-webkit-animation-direction: alternate;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-duration: 4s;
    -moz-animation-iteration-count: 10;
    -moz-animation-timing-function: linear;
    -moz-animation-name: floatAnim;
	-moz-animation-direction: alternate;
    -moz-animation-fill-mode: forwards;
}

@-webkit-keyframes floatAnim {
	0%      { transform: translate(0px, 0px)  rotate(0.01deg) }
	50%      { transform: translate(0px, 6px) rotate(0.01deg) }
	100%      { transform: translate(0px, 0px) rotate(0.01deg) }
}

@keyframes floatAnim {
	0%      { transform: translate(0px, 0px) rotate(0.01deg) }
	50%      { transform: translate(0px, 6px) rotate(0.01deg) }
	100%      { transform: translate(0px, 0px) rotate(0.01deg) }
}

@-moz-keyframes floatAnim {
	0%      { transform: translate(0px, 0px) rotate(0.01deg) }
	50%      { transform: translate(0px, 6px) rotate(0.01deg) }
	100%      { transform: translate(0px, 0px) rotate(0.01deg) }
}


.ShadowEffect{
	animation-duration: 4s;
	animation-iteration-count: 10;/*number of loops*/
	animation-timing-function: linear;
	animation-name: shadowAnim;
	animation-direction: alternate;
	animation-fill-mode: forwards;

	-webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 10;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: shadowAnim;
	-webkit-animation-direction: alternate;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-duration: 4s;
    -moz-animation-iteration-count: 10;
    -moz-animation-timing-function: linear;
    -moz-animation-name: shadowAnim;
	-moz-animation-direction: alternate;
    -moz-animation-fill-mode: forwards;
}

@-webkit-keyframes shadowAnim {
	0%      { opacity: 1; }
	50%     { opacity: 0.6; }
	100%      { opacity: 1; }
}

@keyframes shadowAnim {
	0%      { opacity: 1; }
	50%     { opacity: 0.6; }
	100%      { opacity: 1; }
}

@-moz-keyframes shadowAnim {
	0%      { opacity: 1; }
	50%     { opacity: 0.6; }
	100%      { opacity: 1; }
}

.PulseEffect{
	animation-duration: 8s;
	animation-iteration-count: 1;/*number of loops*/
	animation-timing-function: linear;
	animation-name: pulseAnim;
	animation-direction: alternate;
	animation-fill-mode: forwards;

	-webkit-animation-duration: 8s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: pulseAnim;
	-webkit-animation-direction: alternate;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-duration: 8s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -moz-animation-name: pulseAnim;
	-moz-animation-direction: alternate;
    -moz-animation-fill-mode: forwards;
}

@-webkit-keyframes pulseAnim {
	0%      { opacity: 0; }
	20%      { opacity: 1; }
	40%      { opacity: 0.5; }
	60%      { opacity: 1; }
	80%      { opacity: 0.5; }
	100%      { opacity: 1; }
}

@keyframes pulseAnim {
	0%      { opacity: 0; }
	20%      { opacity: 1; }
	40%      { opacity: 0.5; }
	60%      { opacity: 1; }
	80%      { opacity: 0.5; }
	100%      { opacity: 1; }
}

@-moz-keyframes pulseAnim {
	0%      { opacity: 0; }
	20%      { opacity: 1; }
	40%      { opacity: 0.5; }
	60%      { opacity: 1; }
	80%      { opacity: 0.5; }
	100%      { opacity: 1; }
}