body{
    background-color: #000;
}

.container{
    margin:0 auto;
}

#progress {
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    display: block;
    width: 100%;
    height: 8px;
    background-color:#00ff00;
    overflow: hidden; }

.reel-container {
	background: url(/assets/images/reel.png);
	background-repeat: no-repeat;
	height: 530px;
	margin: 0 auto;
	width: 750px;
}

.spin-container {
	width: 222px;
	border: 5px solid #333;
	height: 94px;
	box-shadow: 1px 1px 2px #000;
	overflow: hidden;
	background-color: #000;
	position: relative;
	top: 236px;
	left: 248px;
}

.overlay {
	height: 100%;
        line-height: 100px;
        height: inherit;
        position: relative;
        width: inherit;
        background-color: #000;
	text-align: center;
        cursor:pointer;
        z-index:1000;
        opacity:1.0;
}
.overlay:hover .spin-container{
    border-color:#aaa;
}
#clicktospin {
	color: #fff;
	font-size: 26px;
	font-weight: bold;
	text-shadow: 1px 1px 2px #000;
	opacity: 1.0;
	width: 250px;
	line-height: 120%;
}

#clicktospin::before {
	content: "Click to Spin an Exclusive Offer !";
	display: block;
	-webkit-animation: pulse 100s ease-in-out;
	-webkit-animation-iteration-count: infinite;
	top: 13px;
	position: relative;
}

.spin-inner{
    position:relative;
    top:0px;
    opacity: 0.6;
}
.spin-inner img{
    width: 100%;
    height:100px;
    border:1px solid #000;
}

.chosen{
    cursor: pointer;
}