@font-face{

	font-family: "NewTransport-Bold";
	src: url("../fonts/NewTransportAA-Bold.eot?#iefix");
	src: url("../fonts/NewTransportAA-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/NewTransportAA-Bold.woff2") format("woff2"), url("../fonts/NewTransportAA-Bold.woff") format("woff"), url("../fonts/NewTransportAA-Bold.svg") format("svg");
	font-weight: normal;
	font-style: normal;

}


@font-face{

	font-family: "NewTransport-Regular";
	src: url("../fonts/NewTransportAA-Regular.eot?#iefix");
	src: url("../fonts/NewTransportAA-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/NewTransportAA-Regular.woff2") format("woff2"), url("../fonts/NewTransportAA-Regular.woff") format("woff"), url("../fonts/NewTransportAA-Regular.svg") format("svg");
	font-weight: normal;
	font-style: normal;

}



body {

	font-family: 'NewTransport-Bold', Arial, Helvetica, Verdana, Sans-Serif;
	background:#f6f6f6;

	margin: auto;
	padding:0px;
	font-size:20px;
}

a {
	text-decoration: none;
}

.holder {
	max-width:90%;
	margin:auto;
	text-align:center;
}

.subholder {
	width: 100%;
	height: 100%;
	position: relative;
}


.desktop {
	display:block;
 }
.mobile {
	display:none;
}

.mainblocks {
	width: 100%;

	position: absolute;
	top: 0;
	left: 0;
}

#the_form {
	position: absolute;
	top: 25%;
	left: 25%;
	width:50%;
	height:67%;
	text-align:left;
	font-size:1.62vw;
	border:2px solid white;
}


#the_form div {
	color:white;
	height:28%;
	border:0px solid white;
	border-bottom:2px solid white;
	padding-left:3%;
}


@-moz-document url-prefix() {
	#the_form div  {
		height:26%;
	  }
}



#the_form div div {
	border:0px solid white;
	padding-left:0;
}



#the_form :nth-child(4) {
	height:17%;
	padding-left:0%;
	border-bottom:0px solid white;

}

#the_form :nth-child(4) :nth-child(2) {

/*	width:56.5%;*/
	width:41.5%;
	text-align:center;
	color:black;
	display: table-cell;
	vertical-align: bottom;
	overflow:hidden;
	position:relative;
	top:-4px;
	}


#wheel_layer  {
	top: 0;
	position: absolute;
	display:none;
}



#error {
	position: absolute;
	text-align: center;
	display:none;
}

#warning {
	display: inline-block; 
	vertical-align: middle;
	width:30%;
}

#error_msg{
	position: absolute;
	top: 36%;
	left: 29%;
	width:42%;
	text-align:left;
	font-size:2.3vw;
	color:white;
}


#message {
	display: inline-block;
	padding-right:0%;
	width:60%;
}

#error_holder {
	width: 100%; 
	text-align:center;
	margin-top:6.5%;
}
.error_btn {
	font-size: 1.8vw;
	background: #F5D111;
	width: 75%;
	margin-left: 11%;
	padding:2%;
	border: 5px solid white;
	color: black;
	cursor: pointer;

	display: block; 
	vertical-align: middle;
}

#wheel_holder {
	top: 25.5%;
	width: 22%;
	margin-left: 39%;
	position: absolute;
}

#wheel{
	-webkit-transition: -webkit-transform 3s ease-out;
}


.overlay {
	width:80%; 
	margin-left:9.8%;
}


.responsive {
	max-width: 100%;
	height: auto;
}


img.bg {
	width: 100%;
	height: auto;
	max-width:100%;
	z-index:-1;
}

.t_table {
	width:97.3%;
}

.t_cell {
	width:55%;
}

.pre_spin {
	width:23%;
}


@-moz-document url-prefix() {
	#the_form :nth-child(4) {
		height:17%;
	}

	#the_form :nth-child(4) :nth-child(2) {
		width:68%;
	}
	.pre_spin {
		width:19%;
	}
}




#field1{
	margin-top:2%;
	margin-bottom:2%;
	padding:2px;

	text-align: center;
	text-transform: uppercase;

	font-size:1.6vw;
	font-family: 'NewTransport-Bold', Arial, Helvetica, Verdana, Sans-Serif;
	
	border:2px solid #FFDC13;
	outline:2px;

	width: 75%;
	height:56%;

	background: black;
	color: white;

}


input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {

	-webkit-text-fill-color: white;
	-webkit-box-shadow: 0 0 0px 1000px #000 inset;
	transition: background-color 5000s ease-in-out 0s;
}

#loc_pref {

	display: table-cell; 
	vertical-align: middle;
	width:38%;
}

#loc_rad {
	display: table-cell; 
	vertical-align: middle;
}

.container {
	position: relative;

	padding-left: 9%;
	margin-right: 1%;
	margin-left: 2%;

	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	padding-top: 0%;
	padding-top: 1px;
}

/* Hide default radio button */
.container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

/* custom radio button */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: white;
	border-radius: 50%;
}

.container:hover input ~ .checkmark {
	background-color: yellow;
}

/* When checked, add a background */
.container input:checked ~ .checkmark {
	background-color: white;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
	display: block;
}


/* Style the indicator (dot/circle) */
.container .checkmark:after {
 	top: 5px;
	left: 5px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: black;
}


.select-css {
	display: block;
	border:2px solid #FFDC13;
	padding-left: 4%;
	width: 78%;
	height:65%;

	box-sizing: border-box;

	font-family: 'NewTransport-Bold', Arial, Helvetica, Verdana, Sans-Serif;
	font-size:1.3vw;

	margin: 0;
	margin-bottom:2%;

	background: black;
	color: white;

	-webkit-appearance: none;
	background: url(../images/down.png) no-repeat right #000;
	background-position-x: right;
	background-position-x: 96%;
	background-size:10%;
}


@supports (-webkit-overflow-scrolling: touch) {

	.select-css, #field1{
		border-radius:0;
	}
}


.select-css::-ms-expand {
	display: none;
}
.select-css:hover, .select-css:focus, .select-css:selected {
	border-color: #F3D213;
}
.select-css:focus {
	outline: none;
}

#output, .controller  {
	display:none;
}

.social {
	position: absolute;
	width: 6%;
	margin-top: 79.3%;
	MARGIN-LEFT: 46.5%;
}

.controller_btns {

	position: absolute;
	width: 36%;
	margin-top: 70%;
	MARGIN-LEFT: 31.5%;
}

#details {

	position: absolute;
	width: 44%;
	MARGIN-LEFT: 27%;
	margin-top: 35%;
	line-height:1.1em;
	font-size:1.3vw;

}

.footer {
	max-width:100%;
	font-family: Arial, Helvetica, Verdana, Sans-Serif;
}

.footerblock {

	width:45%;
	display:inline-block;
}

.desk_footer {
	-webkit-box-shadow: 4px 6px 11px -1px rgba(0,0,0,0.13), 4px -4px 11px -1px rgba(0,0,0,0.13);
	-moz-box-shadow: 4px 6px 11px -1px rgba(0,0,0,0.13), 4px -4px 11px -1px rgba(0,0,0,0.13);
	box-shadow: 4px 6px 11px -1px rgba(0,0,0,0.13), 4px -4px 11px -1px rgba(0,0,0,0.13);
}

.mob_footer {
	-webkit-box-shadow: 0px 0px 11px 3px rgba(0,0,0,0.13);
	-moz-box-shadow: 0px 0px 11px 3px rgba(0,0,0,0.13);
	box-shadow: 0px 0px 11px 3px rgba(0,0,0,0.13);
}

#aadev {
	background:#3D3D3D;
	color:white;
	padding:18px;
}


@media screen and (max-width: 1293px) { 

	.holder, img.bg, .footer {
		max-width:100%;
	}
}


@media screen and (max-width: 1058px) { 

	.checkmark {
		height: 20px;
		width: 20px;
	}


	.container {
		padding-top:0.6%;
		padding-left:9%;
	}

	.container .checkmark:after {
		top: 4px;
		left: 4px;
		width: 12px;
		height: 12px;
	}
}

@media screen and (max-width: 830px) { 
	.container {
		padding-top:1.6%;
		padding-left:13%;
	}
}

@media screen and (max-width: 640px) { 

	.desktop {
		display:none;
	}
	.mobile {
		display:block;
	}

	.overlay {
		width:96%; 
		margin-left:2%; 
	}

	.holder, .footer {
	}

	.footerblock {
		display:block;
		width:95%;
		margin-left:2.5%;
	}


	#the_form {
		top: 21%;
		left: 9.5%;
		width: 78.8%;
		height: 54%;
		font-size: 3.29vw;
		border:0px solid white;
	}

	#the_form div {
		height: 16%;
		padding-left: 4%;
		border:2px solid white;
	}

	#the_form :nth-child(4) {
		border:0;
		padding-left: 2%;
	}

	#the_form :nth-child(4) :nth-child(2) {
		width:106%;
		margin-left:-2%;
		display:block;
		overflow:unset;
	}

	#wheel_layer {
	}

	.t_table {
		width:96%;
		margin-bottom: 10%;
	}

	.t_table div a img {
		border-top:2px solid white;
		border-bottom:2px solid white;
	}

	.t_cell {
		width: 61%;
	}

	#field1 {
		padding: 2px;

	width: 110%;
	height: 100%;

		max-width: 190px;
/*		font-size: 2.85vw;*/


	border:3px solid #FFDC13;
	font-size: 18px;

	line-height: 26.666666667px;

    /* scale down by 12/16 = 75% */
	transform: scale(0.75);
	transform-origin: left top;

    /* remove extra white space */
	margin-bottom: -10px;
	margin-right: -33.333333333%;

	}

	.locale {
		min-height:22%;
		max-height:22%;

	}



	#loc_pref, #loc_rad {
		display:block;
		width:100%;
	}

	#loc_pref {
		margin-top:2%;
	}

	#loc_rad {
		margin-top:5%;
	}


	.container {
		padding-left: 10%;
		padding-top: 0%;
		margin-left:0;
		margin-right:7%;
	}

	@-moz-document url-prefix() {
		.container {
			padding-top: 1%;
		}
		#loc_rad {
			margin-top:2%;
		}

	}

	@supports (-webkit-overflow-scrolling: touch) {
		.container {
			padding-top: 2%;
		}
	}


	.select-css {
		width: 146%;
/*		font-size: 2.85vw;*/
		height:115%;
		padding-left: 2%;
		background-position-x: 98%;
		background-size: 9%;

	border:3px solid #FFDC13;
	font-size: 16px;

    /* scale down by 12/16 = 75% */
	transform: scale(0.6);
	transform-origin: left top;

    /* remove extra white space */
	margin-bottom: -10px;
	margin-right: -33.333333333%;

	}


	.pre_spin {
		width:0;
	}

	.spinimg{
		border-bottom:2px solid white;
	}

	#warning {
		width:31%;
	}

	#error_msg {
		top: 34%;
		left: 17.5%;
		width: 63.8%;
		font-size: 4vw;
	}

	.error_btn {
		font-size: 4.8vw;
		width: 70%;
		margin-left: 12.8%;
		border: 0.8vw solid white;
	}

	#wheel_holder {
		top: 25%;
		width:50%;
		margin-left:25%;
	}


	.social {
		width: 19%;
		margin-top: 136.4%;
		MARGIN-LEFT: 40.5%;
	}

	@supports (-webkit-overflow-scrolling: touch) {
		.social {
			margin-top: 137%;
		}
	}

	.controller_btns {
		width: 75%;
		margin-top: 118.5%;
		MARGIN-LEFT: 13%;
	}

	#details {
		width: 64%;
		margin-top: 56.5%;
		MARGIN-LEFT: 18%;
		font-size: 2vw;
	}

}


/*fix anything when screen larger than 1293*/

@media only screen and (min-width: 1293px) {

	.holder, img.bg, .footer {
		width:1293px;
		max-width:1293px;
	}

	#details {
		font-size: 16.5px;
	}
	.select-css{
		font-size: 18px;
	}

	#the_form, .error_btn  {
		font-size: 22px;
	}

	#error_msg {
		font-size: 32px;
	}

}