div.drum-wrapper {
	position: relative;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	width: 30px;
}
div.drum-wrapper .inner {
	position: relative;
	overflow: hidden;
}
div.drum-wrapper div.container {
	position: absolute;
	width: 100%;
	top: 48px;
	left: 0px;
	-webkit-perspective: 1100px;
	-moz-perspective: 1100px;
	-o-perspective: 1100px;
	perspective: 1100px;
}

div.drum-wrapper,
div.drum-wrapper .inner {
	height: 120px;
}

.outside div.drum-wrapper {
	height: 140px;
}
.outside div.drum-wrapper .inner {
	top: 12px;
}
.outside div.drum-wrapper .container {
	top: 46px;
}

/* dail styles for mouse controls */
div.drum-wrapper .dial {
	position: absolute;
	width: 100%;
	left: 0px;
	height: 48px;
	background-color: rgba(255, 255, 255, 0.7);
	display: block;
}

.outside div.drum-wrapper .dial {
	height: 58px;
}

div.drum-wrapper .dial div {
	width: 20px;
	height: 10px;
	margin: 0 auto;
}
div.drum-wrapper .dial svg {
	position: absolute;
}
div.drum-wrapper .up {
	top: 0px;
}
div.drum-wrapper .up svg {
	top: 2px
}
div.drum-wrapper .down {
	bottom: 0px;
}
div.drum-wrapper .down svg {
	bottom: 2px;
}

/* actual drum styles */
div.drum {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
div.drum figure {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	line-height: 20px;
	color: black;
	margin: 0px;
	padding: 0px 3px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	width: 100%;
	text-align: left;
}

div.drum-wrapper div.container, div.drum-wrapper figure {
	height: 25px;
	line-height: 25px;
}


/***** CUSTOMS *****/

.dial{
	background-color: rgba(190, 190, 190, 0.1) !important;
}
div.inside, div.outside {
	width:100%;
	border: solid 1px #0080d0;
	float:left;

}
div.drum-wrapper {
	margin-right: 20px;
}
#drum_country {
	width: 100%;
	text-align:center;
}
#drum_country .container {
	top: 60px;
	text-align:center;
}
#drum_country, #drum_country .inner {
	height: 150px;
	text-align:center;
}
#drum_country .container, #drum_country figure {
	height: 30px;
	text-align:center;
}
#drum_country figure {
	text-align: left;
	font-size: 1em;
	line-height: 30px;
	text-align:center;
}
#drum_country .dial {
	height: 85px;
}
#drum_country .dial div {
	width: 75px;
}

.selectedDrum {color:#0080d0 !important; font-weight:bold;}
.drumseltitle {padding-top:50px; left:80px; position:absolute}
.drumseltitle span {font-size:20px; font-weight:bold; color:#0080d0}

.drumselframe {width:49%; height:25px; position:absolute; left:310px; top:63px; }
.drumselframe .boxing {border:1px solid #0080d0; width:100%; height:25px; position:absolute;  }
.drumselframe .drumselbtn {position:relative;right:0px; float:right; right:-240px;top:-1px;z-index:1000;}
.goselect {padding-top:2px;padding-bottom:2px;z-index:1000;background:#0080d0; color:#fff;}



.dialarr {position:absolute;z-index:9999;width:30px;height:10px;left:48%;}
#downarrow{bottom:0px;}
#toparrow{top:10px;}

@media screen and (max-width:960px)
{
	.inside {margin-top:20px;width:95% !important;margin-left:10px;}
	.drumseltitle {top:-60px}
	.drumselframe{left:inherit; top:82px; margin-left:5px;width:85%;}
	.dial svg {left:170px;}
	.drumselframe .drumselbtn {right:inherit;float:left;left:75px;top:100px;}
	.goselect {padding-top:4px;padding-bottom:4px;z-index:1000; font-size:16px;background:#0080d0; color:#fff;position: relative; top: -20px; margin: 0 auto;}
}

@media screen and (min-width:370px) and (max-width:960px)
{
	.inside {margin: 40px 0px;}
	.drumseltitle {left:8%; padding-top: 0px !important; top:0px;}
	.drumselframe .drumselbtn {/*display:none !important;*/  float:none; width: 50%; margin: 0 auto; left: inherit;}
	.drumselframe{left: inherit; width:87% !important; margin: 0 auto; top: 44% !important;}
	.druminside {margin: 15px 0px;}
	.goselect {width:100%; top:0px !important}

}
@media screen and (min-width:960px) and (max-width:1024px)
{
	.drumselframe{left:25%;}
}
