/* 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: #000000;
	}

#border{
	position: absolute;
    top: 0px;
    left: 0px;
    width: 298px;
    height: 248px;
    overflow: hidden;
    display: block;
    border: 1px solid #000000;
	z-index: 200;
}

/* elements */

#imgholder, #bg, #logo, #logo_bg, #copy1, #copy2, #copy3, #cta, #device, #device_glow, #cta{
    width: 300px;
	height: 250px;
	display: block;
	opacity: 0;
	position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
	}

/*#btn:hover #cta{
	background-color:#4a97f9;
}*/

#bg{ background: url(images/bg.jpg) 0 0 no-repeat; z-index: 100; opacity: 1;}
#logo{ background: url(images/logo.png) 0 0 no-repeat; z-index: 200; opacity: 0;}
#logo_bg{ background: url(images/logo_bg.png) 0 0 no-repeat; z-index: 198; opacity: 0;}

#device{ background: url(images/device.png) 0 0 no-repeat; width: 330px; left: 300px; z-index: 130; opacity: 0;}
#device_glow{ background: url(images/device_glow.png) 0 0 no-repeat; z-index: 129; opacity: 1;}

#copy1{ background: url(images/copy_1.png) 0px 0px no-repeat; left:-300px; z-index: 132; }
#copy2{ background: url(images/copy_2.png) 0px 0px no-repeat; left:300px; z-index: 129; }
#copy3{ background: url(images/copy_3.png) 0px 0px no-repeat; left:0px; z-index: 132;}
#cta{ background: url(images/cta.png) 0px 0px no-repeat; left:0px; z-index: 128; }

#imgholder{
    width: 300px;
	height: 250px;
	display: block;
	opacity: 1;
	position: absolute;
    top: 0px;
    left: 0px;
    z-index: 131;
	-webkit-transform:  scale(1) translate(0px,0px);
	-moz-transform: scale(1) translate(0px,0px);
	-ms-transform: scale(1) translate(0px,0px);
	-o-transform: scale(1) translate(0px,0px);
	transform: scale(1) translate(0px,0px);
	}

#img1{
    width: 80px;
	height: 80px;
	display: block;
	opacity: 0;
	position: absolute;
    top: 0;
    left: 0;
    z-index: 139;
	background: url(images/img1.png) 0 0 no-repeat;
	-webkit-transform:  scale(0.3) translate(700px,300px);
	-moz-transform: scale(0.3) translate(700px,300px);
	-ms-transform: scale(0.3) translate(700px,300px);
	-o-transform: scale(0.3) translate(700px,300px);
	transform: scale(0.3) translate(700px,300px);
	}

#img2{
    width: 80px;
	height: 80px;
	display: block;
	opacity: 0;
	position: absolute;
    top: 0;
    left: 0;
    z-index: 138;
	background: url(images/img2.png) 0 0 no-repeat;
	-webkit-transform:  scale(0.3) translate(700px,300px);
	-moz-transform: scale(0.3) translate(700px,300px);
	-ms-transform: scale(0.3) translate(700px,300px);
	-o-transform: scale(0.3) translate(700px,300px);
	transform: scale(0.3) translate(700px,300px);
	}

#img3{
    width: 80px;
	height: 80px;
	display: block;
	opacity: 0;
	position: absolute;
    top: 0;
    left: 0;
    z-index: 137;
	background: url(images/img3.png) 0 0 no-repeat;
	-webkit-transform:  scale(0.3) translate(700px,300px);
	-moz-transform: scale(0.3) translate(700px,300px);
	-ms-transform: scale(0.3) translate(700px,300px);
	-o-transform: scale(0.3) translate(700px,300px);
	transform: scale(0.3) translate(700px,300px);
	}

#img4{
    width: 80px;
	height: 80px;
	display: block;
	opacity: 0;
	position: absolute;
    top: 0;
    left: 0;
    z-index: 136;
	background: url(images/img4.png) 0 0 no-repeat;
	-webkit-transform:  scale(0.3) translate(700px,300px);
	-moz-transform: scale(0.3) translate(700px,300px);
	-ms-transform: scale(0.3) translate(700px,300px);
	-o-transform: scale(0.3) translate(700px,300px);
	transform: scale(0.3) translate(700px,300px);
	}

#img5{
    width: 80px;
	height: 80px;
	display: block;
	opacity: 0;
	position: absolute;
    top: 0;
    left: 0;
    z-index: 135;
	background: url(images/img5.png) 0 0 no-repeat;
	-webkit-transform:  scale(0.3) translate(700px,300px);
	-moz-transform: scale(0.3) translate(700px,300px);
	-ms-transform: scale(0.3) translate(700px,300px);
	-o-transform: scale(0.3) translate(700px,300px);
	transform: scale(0.3) translate(700px,300px);
	}

#img6{
    width: 80px;
	height: 80px;
	display: block;
	opacity: 0;
	position: absolute;
    top: 0;
    left: 0;
    z-index: 134;
	background: url(images/img6.png) 0 0 no-repeat;
	-webkit-transform:  scale(0.3) translate(700px,300px);
	-moz-transform: scale(0.3) translate(700px,300px);
	-ms-transform: scale(0.3) translate(700px,300px);
	-o-transform: scale(0.3) translate(700px,300px);
	transform: scale(0.3) translate(700px,300px);
	}

#img7{
    width: 80px;
	height: 80px;
	display: block;
	opacity: 0;
	position: absolute;
    top: 0;
    left: 0;
    z-index: 133;
	background: url(images/img7.png) 0 0 no-repeat;
	-webkit-transform:  scale(0.3) translate(700px,300px);
	-moz-transform: scale(0.3) translate(700px,300px);
	-ms-transform: scale(0.3) translate(700px,300px);
	-o-transform: scale(0.3) translate(700px,300px);
	transform: scale(0.3) translate(700px,300px);
	}

#img8{
    width: 80px;
	height: 80px;
	display: block;
	opacity: 0;
	position: absolute;
    top: 0;
    left: 0;
    z-index: 132;
	background: url(images/img8.png) 0 0 no-repeat;
	-webkit-transform:  scale(0.3) translate(700px,300px);
	-moz-transform: scale(0.3) translate(700px,300px);
	-ms-transform: scale(0.3) translate(700px,300px);
	-o-transform: scale(0.3) translate(700px,300px);
	transform: scale(0.3) translate(700px,300px);
	}

#img9{
    width: 80px;
	height: 80px;
	display: block;
	opacity: 0;
	position: absolute;
    top: 0;
    left: 0;
    z-index: 131;
	background: url(images/img9.png) 0 0 no-repeat;
	-webkit-transform:  scale(0.3) translate(700px,300px);
	-moz-transform: scale(0.3) translate(700px,300px);
	-ms-transform: scale(0.3) translate(700px,300px);
	-o-transform: scale(0.3) translate(700px,300px);
	transform: scale(0.3) translate(700px,300px);
	}

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

/* Animations */

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

.transition-1{
	-webkit-transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
	
	-webkit-transition: all 0.3s cubic-bezier(.16,.49,.09,1.45);
	-ms-transition: all 0.3s cubic-bezier(.16,.49,.09,1.45);
	-moz-transition: all 0.3s cubic-bezier(.16,.49,.09,1.45);
	transition: all 0.3s cubic-bezier(.16,.49,.09,1.45);
}

.transition-2{
	-webkit-transition: all 0.5s ease-in;
	-ms-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out ;
	transition: all 0.5s ease-out ;
		
	-webkit-transition: all 0.5s cubic-bezier(.35,.91,.92,1.03);
	-ms-transition: all 0.5s cubic-bezier(.35,.91,.92,1.03);
	-moz-transition: all 0.5s cubic-bezier(.35,.91,.92,1.03);
	transition: all 0.5s cubic-bezier(.35,.91,.92,1.03);
}

.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.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	-moz-transition: all 0.4s ease-out;
	transition: all 0.2s ease-out;
	
	-webkit-transition: all 0.2s cubic-bezier(.35,.91,.48,1.41);
	-ms-transition: all 0.2s cubic-bezier(.35,.91,.48,1.41);
	-moz-transition: all 0.2s cubic-bezier(.35,.91,.48,1.41);
	transition: all 0.2s cubic-bezier(.35,.91,.48,1.41);
}

.transition-5{
	-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;
	
	-webkit-transition: all 0.4s cubic-bezier(.44,-0.47,.81,.75);
	-ms-transition: all 0.4s cubic-bezier(.44,-0.47,.81,.75);
	-moz-transition: all 0.4s cubic-bezier(.44,-0.47,.81,.75);
	transition: all 0.4s cubic-bezier(.44,-0.47,.81,.75);
}

/* fucntions */

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

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

.img1Anim{
	-webkit-transform: scale(1) translate(242px,56px) rotate(0.01deg) !important;
	-moz-transform: scale(1) translate(242px,56px) rotate(0.01deg) !important;
	-ms-transform: scale(1) translate(242px,56px) rotate(0.01deg) !important;
	-o-transform: scale(1) translate(242px,56px) rotate(0.01deg) !important;
	transform: scale(1) translate(242px,56px) rotate(0.01deg) !important;
}

.img2Anim{
	-webkit-transform: scale(1) translate(213px,43px) rotate(0.01deg) !important;
	-moz-transform: scale(1) translate(213px,43px) rotate(0.01deg) !important;
	-ms-transform: scale(1) translate(213px,43px) rotate(0.01deg) !important;
	-o-transform: scale(1) translate(213px,43px) rotate(0.01deg) !important;
	transform: scale(1) translate(213px,43px) rotate(0.01deg) !important;
}

.img3Anim{
	-webkit-transform: scale(1) translate(246px,89px) rotate(0.01deg) !important;
	-moz-transform: scale(1) translate(246px,89px) rotate(0.01deg) !important;
	-ms-transform: scale(1) translate(246px,89px) rotate(0.01deg) !important;
	-o-transform: scale(1) translate(246px,89px) rotate(0.01deg) !important;
	transform: scale(1) translate(246px,89px) rotate(0.01deg) !important;
}

.img4Anim{
	-webkit-transform: scale(1) translate(138px,106px) rotate(0.01deg) !important;
	-moz-transform: scale(1) translate(138px,106px) rotate(0.01deg) !important;
	-ms-transform: scale(1) translate(138px,106px) rotate(0.01deg) !important;
	-o-transform: scale(1) translate(138px,106px) rotate(0.01deg) !important;
	transform: scale(1) translate(138px,106px) rotate(0.01deg) !important;
}

.img5Anim{
	-webkit-transform: scale(1) translate(161px,125px) rotate(0.01deg) !important;
	-moz-transform: scale(1) translate(161px,125px) rotate(0.01deg) !important;
	-ms-transform: scale(1) translate(161px,125px) rotate(0.01deg) !important;
	-o-transform: scale(1) translate(161px,125px) rotate(0.01deg) !important;
	transform: scale(1) translate(161px,125px) rotate(0.01deg) !important;
}

.img6Anim{
	-webkit-transform: scale(1) translate(196px,122px) rotate(0.01deg) !important;
	-moz-transform: scale(1) translate(196px,122px) rotate(0.01deg) !important;
	-ms-transform: scale(1) translate(196px,122px) rotate(0.01deg) !important;
	-o-transform: scale(1) translate(196px,122px) rotate(0.01deg) !important;
	transform: scale(1) translate(196px,122px) rotate(0.01deg) !important;
}

.img7Anim{
	-webkit-transform: scale(1) translate(177px,94px) rotate(0.01deg) !important;
	-moz-transform: scale(1) translate(177px,94px) rotate(0.01deg) !important;
	-ms-transform: scale(1) translate(177px,94px) rotate(0.01deg) !important;
	-o-transform: scale(1) translate(177px,94px) rotate(0.01deg) !important;
	transform: scale(1) translate(177px,94px) rotate(0.01deg) !important;
}

.img8Anim{
	-webkit-transform: scale(1) translate(219px,139px) rotate(0.01deg) !important;
	-moz-transform: scale(1) translate(219px,139px) rotate(0.01deg) !important;
	-ms-transform: scale(1) translate(219px,139px) rotate(0.01deg) !important;
	-o-transform: scale(1) translate(219px,139px) rotate(0.01deg) !important;
	transform: scale(1) translate(219px,139px) rotate(0.01deg) !important;
}

.img9Anim{
	-webkit-transform: scale(1) translate(190px,61px) rotate(0.01deg) !important;
	-moz-transform: scale(1) translate(190px,61px) rotate(0.01deg) !important;
	-ms-transform: scale(1) translate(190px,61px) rotate(0.01deg) !important;
	-o-transform: scale(1) translate(190px,61px) rotate(0.01deg) !important;
	transform: scale(1) translate(190px,61px) rotate(0.01deg) !important;
}

/* fades */

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

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

/* keyframes */

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

	-webkit-animation-duration: 12s;
    -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: 12s;
    -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; }
}