@charset "UTF-8";
* {
    margin:0px; 
    -webkit-transform:translateZ(0);
    -moz-transform:translateZ(0);
    -O-transform:translateZ(0);
    -ms-transform:translateZ(0); 
    transform:translateZ(0);
}
 
.fadeIn,
.fadeOut {
	-webkit-transition: opacity .5s; 
	-moz-transition: opacity .5s;
	-ms-transition: opacity .5s;
	transition: opacity .5s;
}
.fadeIn{
    opacity: 1 !important;
}
.fadeOut{
    opacity: 0 !important;
}
.fadeOut_1{
    opacity: 0 !important;
    -webkit-transition: opacity 1s !important;
	-moz-transition: opacity 1s !important;
	-ms-transition: opacity 1s !important;
	transition: opacity 1s !important;
}
.on{
    display:block !important;
}

.hide{
    visibility: hidden !important;
}

.show{
    visibility: visible !important;
}

/*
#dummy{
	position:absolute;
    width: 300px;
    height: 250px;
    top: -1px;
    left: -1px;
	opacity:0.5;
    background-size: 100%;
	background-image: url(../images/dummy.png);
    background-repeat: no-repeat;
}
*/

.init{
    opacity:0 !important;
    -webkit-transition: opacity .5s;
	-moz-transition: opacity .5s;
	-ms-transition: opacity .5s;
	transition: opacity .5s;
}
#container{
    width:298px;
    height:248px;   
    background:#FFF;
    border:#8e98aa solid 1px;
    margin:auto;
    position: relative;
    overflow:hidden;
    -ms-scroll-limit: 0 0 0 0;
    -ms-overflow-style: none;

}
 
#section-1{
    position: relative;
    top: 0;
    left: 0;
    width: 298px;
    height: 248px;
    overflow: hidden;;
}

#bg{
    position:absolute;
    left: -1px;
    top: -1px;
    width: 300px;
    height: 250px;
    background-size: 100%;
	background-image: url(../images/bg.jpg);
    background-repeat: no-repeat;
    opacity:1;
}
#eye_brow{
    position:absolute;
    left: 0px;
    top: 0px;
    width: 300px;
    height: 112px;
    background-size: 100%;
	background-image: url(../images/eye_brow.png);
    background-repeat: no-repeat;
    opacity:1;
}
#logo{
    position:absolute;
    left: 64px;
    top: 7px;
    width: 171px;
    height: 37px;
    background-size: 100%;
	background-image: url(../images/logo.png);
    background-repeat: no-repeat;
}
#copy_5{
    position:absolute;
    left: 61px;
    top: 72px;
    width: 175px;
    height: 37px;
    background-size: 100%;
	background-image: url(../images/copy_5.png);
    background-repeat: no-repeat;
}
#cta{
   position:absolute;
    left: 58px;
    top: 128px;
    width: 190px;
    height: 42px;
    background-size: 100%;
	background-image: url(../images/cta_btn.png);
    background-repeat: no-repeat;
}
#copyright{
    position:absolute;
    left: 31px;
    top: 185px;
    width: 235px;
    height: 32px;
    background-size: 100%;
	background-image: url(../images/copyright.png);
    background-repeat: no-repeat;
}
#mercury{
    position:absolute;
    left: 93px;
    top: 233px;
    width: 113px;
    height: 8px;
    background-size: 100%;
	background-image: url(../images/mercury_no.png);
    background-repeat: no-repeat;
}

/*frame1 starts here*/
#blue_bg{
    position: absolute;
    left: 0px;
    top: 59px;
    width: 300px;
    height: 191px;
    background-size: 100%;
	background-image: url(../images/blue_bg.png);
    background-repeat: no-repeat;
    z-index: 0;
}
.blue_bg_anim{
    top: 252px !important;
     -webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
/*********Hand Animation************/
#hand{
    position: absolute;
    left: 130px;
    top: 300px;
    width: 81px;
    height: 164px;
    background-size: 100%;
	background-image: url(../images/hand.png);
    background-repeat: no-repeat; 
    z-index:100 !important;

}
#hand_shadow{
    position: absolute;
    left: 160px;
    top: 146px;
    width: 123px;
    height: 102px;
    background-size: 100%;
	background-image: url(../images/hand_shadow.png);
    background-repeat: no-repeat; 
}
.hand_shadow_anim{
     left: 110px !important;
     top: 146px !important;
    -webkit-transition: all 0.5s linear; 
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	transition: all 0.5s linear;
}
#hand.hand_animate{
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -ms-transition: all 0.7s ease;
    transition: all 0.7s ease;
    z-index: 9999 !important;
}
.hand_anim_1{
    -webkit-transform: translate(3px,-155px) rotate(0deg);
    -moz-transform: translate(3px,-155px) rotate(0deg);
    -ms-transform: translate(3px,-155px) rotate(0deg);
    transform: translate(3px,-155px) rotate(0deg);
    -webkit-transition: all 0.7s ease;
	-moz-transition: all 0.7s ease;
	-ms-transition: all 0.7s ease;
	transition: all 0.7s ease; 
}
.hand_anim_2{
    animation: hand_click 0.7s ease;
    -webkit-animation: hand_click 0.7s ease;
    -moz-animation: hand_click 0.7s ease;
    -o-animation: hand_click 0.7s ease;
}
@keyframes hand_click {
  0%{transform: translate(3px,-155px) rotate(0deg) scale(1);}
  50%{transform: translate(3px,-155px) rotate(0deg) scale(0.93);}
  100%{transform: translate(3px,-155px) rotate(0deg) scale(1);}
}
@-webkit-keyframes hand_click {
  0%{transform: translate(3px,-155px) rotate(0deg) scale(1);}
  50%{transform: translate(3px,-155px) rotate(0deg) scale(0.93);}
  100%{transform: translate(3px,-155px) rotate(0deg) scale(1);}
}
@-moz-keyframes hand_click {
  0%{transform: translate(3px,-155px) rotate(0deg) scale(1);}
  50%{transform: translate(3px,-155px) rotate(0deg) scale(0.93);}
  100%{transform: translate(3px,-155px) rotate(0deg) scale(1);}
}
@-o-keyframes hand_click {
  0%{transform: translate(3px,-155px) rotate(0deg) scale(1);}
  50%{transform: translate(3px,-155px) rotate(0deg) scale(0.93);}
  100%{transform: translate(3px,-155px) rotate(0deg) scale(1);}
}
.hand_anim_3{
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -ms-transition: all 0.7s ease;
    transition: all 0.7s ease;
   -webkit-transform: translate(101px,-122px);
    -moz-transform: translate(101px,-122px);
    -ms-transform: translate(101px,-122px);
    transform: translate(101px,-122px);
}
.hand_anim_4{
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: translate(75px,-165px) rotate(33deg);
    -moz-transform: translate(75px,-165px) rotate(33deg);
    -ms-transform: translate(75px,-165px) rotate(33deg);
    transform: translate(75px,-165px) rotate(33deg);
}
.hand_anim_5{
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: translate(-6px,-153px) rotate(-11deg);
    -moz-transform: translate(-6px,-153px) rotate(-11deg);
    -ms-transform: translate(-6px,-153px) rotate(-11deg);
    transform: translate(-6px,-153px) rotate(-11deg);
    -webkit-transition: all 0.7s ease; 
	-moz-transition: all 0.7s ease;
	-ms-transition: all 0.7s ease;
	transition: all 0.7s ease;
}
.hand_anim_6{
   -webkit-transform: translate(134px,-153px) rotate(0deg);
   -moz-transform: translate(134px,-153px) rotate(0deg);
   -ms-transform: translate(134px,-153px) rotate(0deg);
   transform: translate(134px,-153px) rotate(0deg);
}
.hand_anim_7{
   -webkit-transform: translate(135px,-185px) rotate(-4deg);
   -moz-transform: translate(135px,-185px) rotate(-4deg);
   -ms-transform: translate(135px,-185px) rotate(-4deg);
   transform: translate(135px,-185px) rotate(-4deg);
}
.hand_animate_click{
    animation: hand_click_2 0.3s ease;
    -webkit-animation: hand_click_2 0.3s ease;
    -moz-animation: hand_click_2 0.3s ease;
    -o-animation: hand_click_2 0.3s ease;
}
@keyframes hand_click_2 {
  0%{transform: translate(135px,-185px) rotate(-4deg) scale(1);}
  50%{transform: translate(135px,-185px) rotate(-4deg) scale(0.9);}
  100%{transform: translate(135px,-185px) rotate(-4deg) scale(1);}
}
@-webkit-keyframes hand_click_2 {
  0%{transform: translate(135px,-185px) rotate(-4deg) scale(1);}
  50%{transform: translate(135px,-185px) rotate(-4deg) scale(0.9);}
  100%{transform: translate(135px,-185px) rotate(-4deg) scale(1);}
}
@-moz-keyframes hand_click_2 {
  0%{transform: translate(135px,-185px) rotate(-4deg) scale(1);}
  50%{transform: translate(135px,-185px) rotate(-4deg) scale(0.9);}
  100%{transform: translate(135px,-185px) rotate(-4deg) scale(1);}
}
@-o-keyframes hand_click_2 {
  0%{transform: translate(135px,-185px) rotate(-4deg) scale(1);}
  50%{transform: translate(135px,-185px) rotate(-4deg) scale(0.9);}
  100%{transform: translate(135px,-185px) rotate(-4deg) scale(1);}
}
.hand_anim_9{
   -webkit-transform: translate(108px,-125px) rotate(0deg);
   -moz-transform: translate(108px,-125px) rotate(0deg);
   -ms-transform: translate(108px,-125px) rotate(0deg);
   transform: translate(108px,-125px) rotate(0deg);
}

.hand_anim_10{
   -webkit-transform: translate(71px,-215px) rotate(0deg);
   -moz-transform: translate(71px,-215px) rotate(0deg);
   -ms-transform: translate(71px,-215px) rotate(0deg);
   transform: translate(71px,-215px) rotate(0deg);
   z-index: 1 !important;
}
.hand_anim_11{
   -webkit-transform: translate(71px,70px) rotate(0deg);
   -moz-transform: translate(71px,70px) rotate(0deg);
   -ms-transform: translate(71px,70px) rotate(0deg);
   transform: translate(71px,70px) rotate(0deg);
  /*`*/
}

/*********Circle Animation************/
#circle_1{
    position: absolute;
    border: 1px solid #d9ba51;
    width: 32px;
    height: 32px;
    left: 135px;
    top: 130px;
    border-radius: 18px;
    
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
/*    background-color: #d9ba51;*/
}
#circle_1.circ_1_scale{
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
     -webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
/*     background-color: none !important;*/
}
#circle_2{
    position: absolute;
    border: 1px solid #d9ba51;
    width: 32px;
    height: 32px;
    left: 135px;
    top: 130px;
    border-radius: 18px;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    
}
#circle_2.circ_2_scale{
    -webkit-transform: scale(4);
    -moz-transform: scale(4);
    -ms-transform: scale(4);
    transform: scale(4);
     -webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}



/*****circle 2****/
@keyframes bubble_circle_1 {
    0%{opacity: 1;  transform: scale(0);}
    30%{opacity: 1;}
    50%{transform: scale(1.2); opacity: 0.25;}    
    100%{ transform: scale(1.2); opacity: 0;}
}
/*
@-webkit-keyframes bubble_circle_1 {
    0%{opacity: 1;  -webkit-transform: scale(0);}
    30%{opacity: 1;}
    50%{-webkit-transform: scale(1);}    
    100%{opacity: 0; -webkit-transform: scale(1);}
}
@-moz-keyframes bubble_circle_1 {
    0%{opacity: 1;  -moz-transform: scale(0);}
    30%{opacity: 1;}
    50%{-moz-transform: scale(1);}    
    100%{opacity: 0; -moz-transform: scale(1);}
}
@-o-keyframes bubble_circle_1 {
    0%{opacity: 1;  -o-transform: scale(0);}
    30%{opacity: 1;}
    50%{-o-transform: scale(1);}    
    100%{opacity: 0; -o-transform: scale(1);}
}
*/

#copy_1{
    position: absolute;
    left: 41px;
    top: 122px;
    width: 215px;
    height: 60px;
    background-size: 100%;
	background-image: url(../images/copy_1.png);
    background-repeat: no-repeat;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
     -webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#copy_1.copy_animate_1{
    animation: bubble_zoom 0.8s ease forwards;
    -webkit-animation: bubble_zoom 0.8s ease forwards;
    -moz-animation: bubble_zoom 0.8s ease forwards;
    -o-animation: bubble_zoom 0.8s ease forwards;
}
@keyframes bubble_zoom {
  0%{transform: scale(0);}
  50%{transform: scale(1.3);}
/*  75%{transform: scale(0.9);}*/
  100%{transform: scale(1);}
}
@-webkit-keyframes bubble_zoom {
  0%{-webkit-transform: scale(0);}
  60%{-webkit-transform: scale(1.3);}
/*  80%{-webkit-transform: scale(0.9);}*/
  100%{-webkit-transform: scale(1);}
}
@-moz-keyframes bubble_zoom {
  0%{-moz-transform: scale(0);}
  50%{-moz-transform: scale(1.3);}
/*  75%{-moz-transform: scale(0.9);}*/
  100%{-moz-transform: scale(1);}
}
@-o-keyframes bubble_zoom {
  0%{-o-transform: scale(0);}
  50%{-o-transform: scale(1.3);}
/*  75%{-o-transform: scale(0.9);}*/
  100%{-o-transform: scale(1);}
}
#copy_1.copy_animate_2{
    -webkit-transform: scale(1) !important;
    -moz-transform: scale(1) !important;
    -ms-transform: scale(1) !important;
    transform: scale(1) !important;
}

.copy_anim{
    -webkit-transform: scale(1.3) !important;
    -moz-transform: scale(1.3) !important;
    -ms-transform: scale(1.3) !important;
    transform: scale(1.3) !important;
}
.copy_anim_1{
    -webkit-transform: scale(1) !important;
    -moz-transform: scale(1) !important;
    -ms-transform: scale(1) !important;
    transform: scale(1) !important;
}
.copy_anim_2{
    left: -230px !important;
    -webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

/**********Frame-3 wrapper***********/
#frame3_wrap{
    position: absolute;
    width:300px;
    height:191px;
    left:280px;
    top:59px;
}
.frame3_anim{
    left:0px !important;
     -webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.frame3_anim_1{
    left:-300px !important;
     -webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#video_layer{
    position: absolute;
    width:199px;
    height:72px;
    left: 49px;
    top: 25px;
    background-size: 100%;
	background-image: url(../images/vid_layer.png);
    background-repeat: no-repeat;
}
#copy_2{
    position: absolute;
    width:177px;
    height:41px;
    left: 60px;
    top: 113px;
    background-size: 100%;
	background-image: url(../images/copy_2.png);
    background-repeat: no-repeat;
}
/*********arrow animation*******/
#arrow{
    position: absolute;
    width: 21px;
    height: 36px;
    left: 600px;
    top: 108px;
    background-size: 100%;
	background-image: url(../images/white_arrow.png);
    background-repeat: no-repeat;
    z-index: 0;
    
}
#arrow-yellow{
    position: absolute;
    width: 21px;
    height: 36px;
    left: 600px;
    top: 108px;
    opacity: 0;
    background-size: 100%;
    background-image: url(../images/yellow_arrow.png) !important;
    -webkit-transition: all 0.5s ease, opacity 0.2s ease;
    -moz-transition: all 0.5s ease, opacity 0.2s ease;
    -ms-transition: all 0.5s ease, opacity 0.2s ease;
    transition: all 0.5s ease, opacity 0.2s ease;
    z-index: 1;
}
#arrow-yellow.show{
    opacity: 1;
}
.arrow_anim{
    left: 268px !important;
    top: 108px !important;
     -webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

/*********Frame4 wrapper*******/
#mask{
    position: absolute;
    width: 300px;
    height: 188px;
    left: 0px;
    top: 62px;
    background-size: 100%;
	background-image: url(../images/mask.png);
    background-repeat: no-repeat;
}

#frame4_wrap{
    position: absolute;
    width:300px;
    height:191px;
    left:280px;
    top:59px;
}
.frame4_anim{
    left:0px !important;
    -webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.frame4_anim_1{
    left:-300px !important;
     -webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#search_icon{
    position: absolute;
    width:75px;
    height:74px;
    left: 110px;
    top: 24px;
    background-size: 100%;
	background-image: url(../images/search_icon.png);
    background-repeat: no-repeat;
}
#copy_3{
    position: absolute;
    width:136px;
    height:37px;
    left: 81px;
    top: 113px;
    background-size: 100%;
	background-image: url(../images/copy_3.png);
    background-repeat: no-repeat;
}

/*********Frame5 wrapper*******/

#frame5_wrap{
    position: absolute;
    width:300px;
    height:191px;
    left:280px;
    top:59px;
}
.frame5_anim{
    left:0px !important;
    -webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.frame5_anim_1{
    top:269px !important;
     -webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#doc_icon{
    position: absolute;
    width:81px;
    height:84px;
    left: 117px;
    top: 16px;
    background-size: 100%;
	background-image: url(../images/doc_icon.png);
    background-repeat: no-repeat;
}
#copy_4{
    position: absolute;
    width:198px;
    height:37px;
    left: 50px;
    top: 113px;
    background-size: 100%;
	background-image: url(../images/copy_4.png);
    background-repeat: no-repeat;
}

#clickTag{
    position: absolute;
    width:298px;
    height:248px;
    top:0px;
    left:0px;
}
#cta_btn{
    position:absolute;
    left: 58px;
    top: 128px;
    width: 190px;
    height: 42px;
}