/* reset */

html, body, object, img {
    margin: 0;
    padding: 0;
	}

a:active, a:hover { outline: 0; }
img { border: 0; }
 
/* structure */

#content{
	width: 300px;
	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: 296px;
    height: 246px;
    overflow: hidden;
    display: block;
    border: 2px solid #000000;
	z-index: 998;
}

/* elements */

#bg, #copy1, #copy2, #copy3a, #copy3b, #cta, #logo, #logoEnd, #endframe {
    width: 300px;
	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; left:-300px; z-index: 132; opacity: 1;}
#copy2{ background: url(images/copy2.png) 0px 0px no-repeat; width: 310px; left:300px; z-index: 132; opacity: 1;}
#copy3a{ background: url(images/copy3a.png) 0px 0px no-repeat; left:-300px; z-index: 132; opacity: 1;}
#copy3b{ background: url(images/copy3b.png) 0px 0px no-repeat; z-index: 132; opacity: 0;}

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

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

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

#endHolder{
	width: 300px;
	height: 185px;
	display: block;
	position: absolute;
	overflow: hidden;
    top: 65px;
    left: -300px;
    opacity: 1;
    z-index: 120;
}

#figHolder{
	width: 450px;
	height: 450px;
	display: block;
	position: absolute;
	/*overflow: hidden;*/
    top: 0px;
    left: 0px;
    opacity: 1;
    z-index: 121;
	-webkit-transform: scale(0.6) translate(-130px,-155px);
	-moz-transform:  scale(0.6) translate(-130px,-155px);
	-ms-transform:  scale(0.6) translate(-130px,-155px);
	-o-transform:  scale(0.6) translate(-130px,-155px);
	transform:  scale(0.6) translate(-130px,-155px);
}

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

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

a.click-through{
    position: absolute;
    width: 300px;
    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 35s ease-out;
	-ms-transition: all 35s ease-out;
	-moz-transition: all 35s ease-out;
	transition: all 35s 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,.77,1.21);
	-ms-transition: all 0.2s cubic-bezier(.52,.7,.77,1.21);
	-moz-transition: all 0.2s cubic-bezier(.52,.7,.77,1.21);
	transition: all 0.2s cubic-bezier(.52,.7,.77,1.21);
}

.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;
}

/* fucntions */

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

.figScale{
	-webkit-transform: scale(0.65) translate(-160px,-115px)rotate(0.01deg) !important;
	-moz-transform: scale(0.65) translate(-160px,-115px)rotate(0.01deg) !important;
	-ms-transform:  scale(0.65) translate(-160px,-115px)rotate(0.01deg) !important;
	-o-transform:  scale(0.65) translate(-160px,-115px)rotate(0.01deg) !important;
	transform:  scale(0.65) translate(-160px,-115px)rotate(0.01deg) !important;
}

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

.copyLeft{
	-webkit-transform: translate(-300px, 0px) rotate(0.01deg) !important;
	-moz-transform: translate(-300px, 0px) rotate(0.01deg) !important;
	-ms-transform: translate(-300px, 0px) rotate(0.01deg) !important;
	-o-transform: translate(-300px, 0px) rotate(0.01deg) !important;
	transform: translate(-300px, 0px) 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: 6s;
	animation-iteration-count: 1;/*number of loops*/
	animation-timing-function: linear;
	animation-name: pulseAnim;
	animation-direction: alternate;
	animation-fill-mode: forwards;

	-webkit-animation-duration: 6s;
    -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: 6s;
    -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; }
	60%      { opacity: 1; }
	80%      { opacity: 0; }
	100%      { opacity: 1; }
}

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

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