@charset "utf-8";
/* CSS Document */

/* global reset */
 
html,body,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,
pre,a,abbr,acronym,address,big,cite,code,del,dfn,img,ins,kbd,
q,samp,small,strike,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,
form,label,legend,caption,tbody,tfoot,thead{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
:focus{outline:0;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,
q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}

html, body {height:100%}
 
/* end of global reset */


/*BUTTON GLOW ANIMATION*/
@-webkit-keyframes LOOPING-BTN {0%,100%{ opacity: 0; } 50% { opacity: 1; }}
@-moz-keyframes LOOPING-BTN {0%,100%{ opacity: 0; } 50% { opacity: 1; }}
@-o-keyframes LOOPING-BTN { 0%,100%{ opacity: 0; } 50% { opacity: 1; }}
@keyframes LOOPING-BTN {0%,100%{ opacity: 0; } 50% { opacity: 1; }}

/*ARROW ANIMATION*/
@-webkit-keyframes ARR-SHAKE {0%,100%{ right: 22px; } 50% { right: 28px; }}
@-moz-keyframes ARR-SHAKE {0%,100%{ right: 22px; } 50% { right: 28px; }}
@-o-keyframes ARR-SHAKE {0%,100%{ right: 22px; } 50% { right: 28px; }}	
@keyframes ARR-SHAKE  {0%,100%{ right: 22px; } 50% { right: 28px; }}

/*SPARK GLOW ANIMATION*/
@-webkit-keyframes SPARK-GLOW {0%,100%{ opacity: 0.4;);} 40%,60% { opacity: 1; }}
@-moz-keyframes SPARK-GLOW{0%,100%{ opacity: 0.4;);} 40%,60% { opacity: 1; }}
@-o-keyframes SPARK-GLOW {0%,100% { opacity: 0.4;);}40%,60% { opacity: 1; }}
@keyframes SPARK-GLOW {0%,100% { opacity: 0.4;);}40%,60% { opacity: 1; }}

/* fonts */
@font-face{
    font-family: ABI;
    src: url(ABI.ttf) ;
}
/* end fonts */

body{background-color:#000000;}

#container{
	position:absolute;
	width:100%; 
	background-image:url(../images/bg.jpg);
	background-repeat:no-repeat;
	background-position:top center;
    font-family: ABI; 
    color:#FFF;
}

#header{
	position:relative;
	background-image:url(../images/header.png);
	background-repeat:no-repeat;
	background-size:1728px auto;
	background-position:center;
	width:100%; height:170px;
	margin:auto;
}

.lable-logo {
    display:none;
    position: absolute;
    background-image: url(../images/lable.png);
    background-size: 250px auto;
    background-repeat: no-repeat;
    background-position: right top;
    width: 80%; height: 105px;
    min-width: 550px;
    z-index: 500;
    left: 0; right: 0;
    margin: auto;
    top: 0;
}

#content{
	position:relative;
	width:100%;
	max-width:670px; 
	margin:auto;
	text-align:center;
}

#bonus{
	max-width:414px; height:auto;
	margin:auto;
}


#bonus img{
	width:100%;	
}

#bonus #bonus_spark{
	position:absolute;
	top:-12%; left:8%; right:0;
	margin:auto;
	max-width:414px; 
	width:100%; height:100%	;
	background-image:url(../images/spark.png);
	background-repeat:no-repeat;
	background-size:40% auto;
	background-position:left top;	
	-webkit-animation: SPARK-GLOW 3s infinite;
	-moz-animation:    SPARK-GLOW 4s infinite; /* Fx 5+ */
	-o-animation:      SPARK-GLOW 4s infinite; /* Opera 12+ */
	animation:         SPARK-GLOW 4s infinite; /* IE 10+, Fx 29+ */
}

#small-text{
	position:relative;
	font-size:23px;
	color:#FFF;
	text-align:center;
	margin:auto;
	margin-top:2%;
	margin-left:15px;
	margin-right:15px;
}

#button_bg {
	position:relative;
	width:100%;	
	max-width:586px; height:174px;
	background-image:url(../images/btn_bg.png);
	background-repeat:no-repeat;
	background-size:579px auto;
	background-position:center -20px;
	margin:auto;
}

#button{
	position: relative;
	left:0; right:0; top:20px;
	margin:auto;
	width:100%; height:94px;
	max-width:293px; 
}

#button img{
	position:absolute;
	left:0;
}
#btn_arr{
    position:absolute;
    right:25px; top:22px;
    width:48px; height:41px;
    background-image:url(../images/btn_arr.png);
    background-repeat:no-repeat;
    z-index:200;
    -webkit-animation: ARR-SHAKE 1s ease-in-out infinite;
    -moz-animation:    ARR-SHAKE 1s ease-in-out infinite; 
    -o-animation:      ARR-SHAKE 1s ease-in-out infinite; 
    animation:         ARR-SHAKE 1s ease-in-out infinite; 
}


#btn_place{
	opacity:1;
	overflow:hidden;
	background: transparent url('../images/btn.png') no-repeat; 
	background-position:0 0;
	width:293px; height:92px;
	margin:auto;
	z-index:2;
	-webkit-animation: LOOPING-BTN 1s infinite; /* Safari 4+ */
	-moz-animation:    LOOPING-BTN 1s infinite; /* Fx 5+ */
	-o-animation:      LOOPING-BTN 1s infinite; /* Opera 12+ */
	animation:         LOOPING-BTN 1s infinite; /* IE 10+, Fx 29+ */
}

#btn_place_below{
	overflow:hidden;
	background: transparent url('../images/btn.png') no-repeat; 
	background-position:-293px 0;
	width:293px; height:92px;
	margin:auto;
	z-index:1
}

/*FOOTER*/
#footer{
	position:relative;
	background-repeat:repeat-x;
	width:100%;
	margin:auto;
	margin-top:50px;
	z-index:100;
	display: table;
}

.ftr_bg{
	position:absolute;
	width:100%;
	background-repeat:repeat-x;
	overflow:hidden;
	z-index:-10;
}

#ftr_bg_top{top:0px; height:10px; background-image:url(../images/footer_strip.jpg); z-index:10}
#ftr_bg_mid{top:0px; height:100%; background-position:0 0; background-size:auto 100%; background-image:url(../images/footer_bg.jpg); }
#ftr_bg_bottom{bottom:0px; height:10px; background-position:bottom;background-image:url(../images/footer_strip.jpg);}

#footer_content{
	position:relative;
	width:90%; height:100%; max-width:1024px; min-height:100px;
	background-position:center;
	margin:auto; 
	top:0;left:0; right:0;
    font-size: 1.2rem;
    text-transform: lowercase;
	}
	
#footer_content .step{
	position:relative;
	width:33%; height:100%;
	min-height:60px;
	background-repeat:no-repeat;
	float:left;
	margin-top:10px;
	display:table-row;
}


.step .text{
	position:relative;
	left:47px; top:37px;
	width:65%;
}

.bonus_row{
    text-transform: lowercase;
    font-size: 1.6rem;
   
}

.bonus_code{
    color:#f5c847;

}



@media only screen and (max-width: 480px) {
	#header{
		background-size:1000px auto;
		height:95px;
	}
    
    .lable-logo {
        position: absolute;
    
        background-size: 140px auto;
        width: 100%; height: 105px;
        min-width: 380px;
    }
	
	#bonus img{
	width:80%;	
	}
	
	#footer {
	 margin-bottom:20px;
	}
	
	#footer_content{
		height:100%;
	}
	
	#footer_content .step{
	width:100%;  height:70px;
	background-position:20% 0px;
	}
	
	.step .text{
	top:40px;left:27%;
	}

}