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

@import url('https://fonts.googleapis.com/css?family=Muli:400,700');

body {
	font-family: 'Muli', sans-serif;
	margin:0;
	background:#050505 url("images/background.jpg") center top no-repeat;	
	color:#ffffff;
}

.header {
	
}

.header .inner {
	width:960px;
	margin:0 auto;
}

.logo {
	margin:0 auto;
	width:190px;
	padding:44px 0 40px;
}

.headertext img {
    float: left;
    margin: 0 20px 36px 0;
}

.headertext h2 {
    color: #ffffff;
    font-weight: 400;
    font-size: 37px;
    text-transform: uppercase;
    margin: 0;
    line-height: 100%;
    text-align: center;
}

.headertext h3 {
    color: #ffffff;
    font-weight: 700;
    font-size: 64px;
    text-transform: uppercase;
    margin: 10px 0 0;
    line-height: 100%;
    text-align: center;
}

.headertext h4 {
    color: #ffffff;
    font-weight: 700;
    font-size: 30px;
    margin: 30px 0 0;
    line-height: 100%;
    text-align: center;
}

.headertext h5 {
    color: #ffffff;
    font-weight: 400;
    font-size: 22px;
    margin: 15px 0 0;
    line-height: 100%;
    text-align: center;
}
.headertext h6 {
    color: #ffffff;
    font-weight: 400;
    font-size: 19px;
    margin: 10px 0 0;
    line-height: 100%;
    text-align: center;
}

.content .inner {
	width:960px;
	margin:0 auto;
}

.arrow {
    position: absolute;
    left: 50%;
    margin: 5px 0 0 195px;
}

.box h2 {
    color: #fff;
    text-align: center;
    font-size: 18px;
}

.box h2 span {
    color: #ffefa3;
}
.wheel {
    padding: 30px 0;
}
.wheelimage {
    display: block;
    margin: 30px auto;
    -webkit-box-shadow: 0px 0px 30px 5px rgba(255,233,180,0.5);
    -moz-box-shadow: 0px 0px 30px 5px rgba(255,233,180,0.5);
    box-shadow: 0px 0px 30px 5px rgba(255,233,180,0.5);
    border-radius: 230px;
}


#box1, #box2, #box3, #box4, #box5{

display:none;	
}
.box-1 #birth-month a {
display: block;
text-indent: -9999px;
text-decoration: none;
outline: none;
cursor: pointer;
}
.box-1 #birth-month {
	background:url(images/sample-img.png) top no-repeat;
	width:496px;
	height:489px;
	position:relative;
	padding: 0;
	margin:0 auto;
}
.box-1 #birth-month li {
display: block;
position: absolute;
list-style: none;
margin: 0;
padding: 0;
}
.box-1 li#january a:hover {
	background: url(images/sample-img.png) -254px -514px no-repeat;
}
#january a {
width: 80px;
height: 110px;
}

#january {
	left: 255px;
	top: 28px;
}
.box-1 li#february a:hover {
	background: url(images/sample-img.png) -324px -563px no-repeat;
}
#february a {
width: 97px;
height: 96px;
}

#february {
	left:325px;
	top: 77px;
}
.box-1 li#march a:hover {
	background: url(images/sample-img.png) -358px -653px no-repeat;
}
#march a {
width: 94px;
height: 77px;
}

#march {
	left: 359px;
	top: 167px;
}
.box-1 li#april a:hover {
	background: url(images/sample-img.png) -356px -734px no-repeat;
}
#april a {
width: 94px;
height: 77px;
}

#april {
	left: 357px;
top: 248px;
}
.box-1 li#may a:hover {
	background: url(images/sample-img.png) -313px -799px no-repeat;
}
#may  a {
width: 94px;
height: 93px;
}

#may {
	left: 314px;
top: 313px;
}
.box-1 li#june a:hover {
	background: url(images/sample-img.png) -244px -842px no-repeat;
}
#june a {
width: 80px;
height: 93px;
}

#june {
	left: 245px;
	top: 356px;
}
.box-1 li#july a:hover {
	background: url(images/sample-img.png) -165px -840px no-repeat;
}
#july  a {
width: 73px;
height: 93px;
}

#july {
	left: 166px;
top: 354px;
}
.box-1 li#august a:hover {
	background: url(images/sample-img.png) -76px -803px no-repeat;
}
#august  a {
width: 90px;
height: 92px;
}

#august {
	left: 77px;
top: 317px;
}
.box-1 li#september a:hover {
	background: url(images/sample-img.png) -167px -697px no-repeat;

}
#september a {
width: 88px;
height: 102px;
}

#september {
	left: 45px;
top: 239px;
}
.box-1 li#october a:hover {
	background: url(images/sample-img.png) -22px -677px no-repeat;
}
#october a {
width: 92px;
height: 86px;
}

#october {
	left: 46px;
top: 155px;
}
.box-1 li#november a:hover {
	background: url(images/sample-img.png) -19px -545px no-repeat;
}
#november a {
width: 103px;
height: 96px;
}

#november {
	left: 76px;
top: 70px;
}
.box-1 li#december a:hover {
	background: url(images/sample-img.png) -135px -548px no-repeat;
}
#december a {
width: 91px;
height: 96px;
}

#december {
	left: 156px;
top: 37px;
}

.box-1 h2, .box-2 h2, .box-3 h2, .box-4 h2 {
    text-align: center;
}

.box-1 h2 span, .box-2 h2 span, .box-3 h2 span, .box-4 h2 span{
    color:#ffefa3;
}

.reminder {
	text-align:center;
	font-size:14px;
}

select {
    border: none;
    color: #000;
    width: 30%;
    height: 40px;
    margin: 0 5px;
}
input{
    margin: 15px 0;
    height: 40px;
    padding: 0 10px;
    color: #000;
    border: none;
    border-radius: 5px;
    background: rgb(248, 248, 248);
}
.input-form{
	text-align: center;
	margin-top:60px;
}
#birth_name {
    width: 95%;
    margin: 15px 0;
    height: 40px;
    padding: 0 10px;
    color: #000;
    border: none;
    border-radius: 5px;
    background: rgb(248, 248, 248);
}

/*#first_name {*/
/*    width: 29%;*/
/*    margin: 0 5px;*/
/*}*/

/*#middle_name {*/
/*    width: 29%;*/
/*    margin: 0 5px;*/
/*}*/

/*#last_name {*/
/*    width: 29%;*/
/*    margin: 0 5px;*/
/*}*/
/*#email {
    width: 90%;
}*/
#special_number{
	width:90%;
}
#next_btn , #next2_btn{
	margin-bottom:50px;
}
`
.nextbutton {
	
}
.nextbutton:hover {
	
}

.sendmyreading {
    background: url("images/sendmyreading.png") center bottom no-repeat;
    display: block;
    text-indent: -9999px;
    width: 238px;
    height: 56px;
    margin: 60px auto;
}
.sendmyreading:hover {
	background-position:0 0;
}

@media only screen and (max-width:960px) and (min-width: 768px){
	.header .inner {
	width:100%;
	
	}
	.header .inner .wrapper {
	padding:10px;	
	}
	
	.content .inner {
		width:100%;
		margin:0px auto;
		
	}
	
	.content .inner .wrapper {
		padding:10px;
	}
	
	.columnleft {
		float:none;
		margin:0 auto;
	}
	
	.columnright {
		float:none;
		width:100%;
		margin:13px 0 0;
	}
	

	
	.arrow {
		display:none;
		}
		
		.headertext h2 {
			font-size: 32px;	
		}
		
		.headertext h3 {
    font-size: 40px;

}

.logo {
    padding: 10px 0 30px;
}


.box h2 {
    font-size: 24px;
}

}


@media only screen and (max-width: 767px) and (min-width:381px){
	.arrow {
		display:none;
		}
.h1.h1_big{
	font-size: 38px;
}
.h1.h1_small{
	font-size: 26px;
}
.wheelimage {
	width:100%;
}
.box-1 #birth-month {
       /* margin-left: -27px;*/
    background-size: 410px;
    width: 360px;
    height: 430px;
}
.box-1 li#january a:hover {
	background: url(images/sample-img.png) -212px -442px no-repeat;
	background-size: 410px;
}
#january a {
width: 63px;
height: 110px;
}

#january {
	left: 187px;
	top: 39px;
}
.box-1 li#february a:hover {
	background: url(images/sample-img.png) -274px -455px no-repeat;
	background-size: 410px;
}
#february a {
width: 70px;
height: 96px;
}

#february {
	left:249px;
	top: 52px;
}
.box-1 li#march a:hover {
	background: url(images/sample-img.png) -293px -523px no-repeat;
	background-size: 410px;

}
#march a {
width: 94px;
height: 80px;
}

#march {
	left: 268px;
	top: 120px;
}
.box-1 li#april a:hover {
	background: url(images/sample-img.png) -293px -600px no-repeat;
	background-size: 410px;

}
#april a {
width: 94px;
height: 77px;
}

#april {
left: 268px;
top: 197px;
}
.box-1 li#may a:hover {
	background: url(images/sample-img.png) -265px -648px no-repeat;
	background-size: 410px;

}
#may  a {
width: 80px;
height: 123px;
}

#may {
left: 240px;
top: 245px;
}
.box-1 li#june a:hover {
	background: url(images/sample-img.png) -182px -680px no-repeat;
	background-size: 410px;

}
#june a {
width: 80px;
height: 93px;
}

#june {
	left: 157px;
	top: 277px;
}
.box-1 li#july a:hover {
	background: url(images/sample-img.png) -135px -690px no-repeat;
	background-size: 410px;
}
#july  a {
width: 73px;
height: 93px;
}

#july {
	left: 110px;
	top: 287px;
}
.box-1 li#august a:hover {
	background: url(images/sample-img.png) -55px -653px no-repeat;
	background-size: 410px;

}
#august  a {
width: 90px;
height: 92px;
}

#august {
    left: 30px;
    top: 250px;
}
.box-1 li#september a:hover {
	background: url(images/sample-img.png) -138px -557px no-repeat;
	background-size: 410px;

}
#september a {
width: 100px;
height: 105px;
}

#september {
    left: 11px;
    top: 177px;
}
.box-1 li#october a:hover {
	background: url(images/sample-img.png) 5px -550px no-repeat;
	background-size: 410px;
}
#october a {
	width: 92px;
	height: 86px;
}
#october {
    left: -11px;
    top: 117px;
}
.box-1 li#november a:hover {
	background: url(images/sample-img.png) -1px -455px no-repeat;
	background-size: 410px;
}
#november a {
width: 103px;
height: 96px;
}

#november {
    left: 22px;
    top: 61px;
}
.box-1 li#december a:hover {
	background: url(images/sample-img.png) -112px -462px no-repeat;
	background-size: 410px;
}
#december a {
width: 91px;
height: 96px;
}

#december {
    left: 103px;
    top: 38px;

}
.steps_wrapper{
	margin:0;
}
.input-form select{
	width:29%;
	margin:0 3px;
}
.input-form{
	margin-top:20px;
}
}

@media only screen and (max-width: 380px){
	.arrow {
		display:none;
		}
.h1.h1_big{
	font-size: 38px;
}
.h1.h1_small{
	font-size: 26px;
}
.wheelimage {
	width:100%;
}
.box-1 #birth-month {
    /*margin-left: -55px;*/
    background-size: 310px;
    width: 350px;
    height: 327px;
}
.box-1 li#january a:hover {
	background: url(images/sample-img.png) -145px -325px no-repeat;
	background-size: 310px;
}
#january a {
width: 63px;
height: 110px;
}

#january {
	left: 165px;
    top: 20px;
}
.box-1 li#february a:hover {
	background: url(images/sample-img.png) -200px -350px no-repeat;
	background-size: 310px;
}
#february a {
	width: 70px;
	height: 60px;
}

#february {
	left: 220px;
    top: 45px;
}
.box-1 li#march a:hover {
	background: url(images/sample-img.png) -210px -410px no-repeat;
	background-size: 310px;

}
#march a {
width: 94px;
height: 50px;
}

#march {
	left: 230px;
    top: 105px;
}
.box-1 li#april a:hover {
	background: url(images/sample-img.png) -198px -448px no-repeat;
	background-size: 310px;

}
#april a {
width: 94px;
height: 60px;
}

#april {
    left: 218px;
    top: 143px;
}
.box-1 li#may a:hover {
	background: url(images/sample-img.png) -193px -501px no-repeat;
	background-size: 310px;

}
#may  a {
width: 78px;
height: 68px;
}

#may {
    left: 213px;
    top: 196px;
}
.box-1 li#june a:hover {
	background: url(images/sample-img.png) -140px -505px no-repeat;
	background-size: 310px;

}
#june a {
width: 60px;
height: 93px;
}

#june {
	left: 160px;
    top: 200px;
}
.box-1 li#july a:hover {
	background: url(images/sample-img.png) -100px -500px no-repeat;
	background-size: 310px;
}
#july  a {
width: 60px;
height: 93px;
}

#july {
	left: 120px;
    top: 195px;
}
.box-1 li#august a:hover {
	background: url(images/sample-img.png) -35px -490px no-repeat;
	background-size: 310px;

}
#august  a {
width: 70px;
height: 92px;
}

#august {
    left: 55px;
    top: 185px;
}
.box-1 li#september a:hover {
	background: url(images/sample-img.png) -68px -407px no-repeat;
	background-size: 310px;

}
#september a {
width: 100px;
height: 105px;
}

#september {
    left: 11px;
    top: 120px;
}
.box-1 li#october a:hover {
	background: url(images/sample-img.png) 0px -415px no-repeat;
	background-size: 310px;
}
#october a {
	width: 92px;
	height: 60px;
}
#october {
    left: 34px;
    top: 88px;
}
.box-1 li#november a:hover {
	background: url(images/sample-img.png) 5px -340px no-repeat;
	background-size: 310px;
}
#november a {
width: 80px;
height: 65px;
}

#november {
    left: 50px;
    top: 42px;
}
.box-1 li#december a:hover {
	background: url(images/sample-img.png) -71px -330px no-repeat;
	background-size: 310px;
}
#december a {
width: 91px;
height: 96px;
}

#december {
    left: 103px;
    top: 10px;

}
.input-form select{
	width:29%;
	margin:0 3px;
}
}