.vote-container {
	width: 100%;
	position: relative;
	overflow: hidden;
}

.vote-container .vote-data {
	position: absolute;
	top: 20%;
	box-sizing: border-box;
	z-index: 9;
	color:white;
}
.vote-option.left .vote-data {
	left:20%;
}
.vote-option.right .vote-data {
	right:20%;
	text-align: right;
}

.vote-container .vote-data .submit, .enter-button {
	font-size: 30px;
	box-sizing: border-box;
	background-color:#f37b19;
	border:0;
	color:white;
	padding:6px 25px;
	z-index: 11;
}

.vote-container .vote-option.vote-chosen .submit {
	display: block;
}

.vote-option {
	position: relative;
	width: 49.9%;
	float: left;
	background-size: 100% 100%;
	box-sizing: content-box;
	height:840px;
}

.vote-option-left-hover, .vote-option-right-hover {
	height:840px;
	width: 49.9%;
	position: absolute;
	z-index: 10;
	cursor:pointer;
}
.vote-option-right-hover {
	right:0;
}

.vote-option-left-hover:hover ~ .vote-option.left .vote-option-bg,
.vote-option-right-hover:hover ~ .vote-option.right .vote-option-bg,
.vote-option.vote-chosen .vote-option-bg {
	opacity: 0.8;
}
.vote-option img {
	opacity: 1 !important;
}
.vote-option-bg {
	height: 100%;
	width: 100%;
	transition: opacity 0.3s;
	opacity: 1.0;
}
.vote-option.left .vote-option-bg {
	background-image: url('..//img/purple_bg.jpg');
}

.vote-option.right .vote-option-bg {
	background-image: url('..//img/pink_bg.jpg');
	float:right;
}

.vote-success {
	width: 100%;
	height: 100%;
}

/* Vote success view */

.vote-success .progress {
	width: 30px;
	height: 0;
	transition: height 2s;
	position: absolute;
	display: none;
	opacity: .8;
}

.vote-success .left-progress {
	left: 5%;
	bottom: 0;
	background-color: white;
}

.vote-success .right-progress {
	right: 5%;
	bottom: 0;
	background-color: white;
}

.vote-option .total-votes {
	font-size: 105px;
	font-weight: bold;
	color: white;
	text-align: center;
	height: 130px;
	font-family: sans-serif;
}
.vote-option .names,
.vote-option .total-votes {
	visibility: hidden;
	opacity:0;
	-webkit-transition: opacity 0.5s;
	-moz-transition: opacity 0.5s;
	-ms-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;
	transition: opacity 0.5s;

}

.vote-option .total-votes:after {
	content: "%";
}

.vote-container.vote-results .progress {
	display: block;
}

.vote-container.vote-results .vote-option .total-votes,
.vote-container.vote-results .vote-option .names {
	visibility: visible;
	opacity: 1;
}

/* Entry form */
.vote-container .enter-button {
	opacity: 0;
	display: none;
	bottom: 10%;
	margin:0 auto;
	width:16%;
	height:10%;
}
.absolute-holder {
	position: absolute;
	z-index: 11;
	width:100%;
	bottom:5%;
}
.absolute-holder-2 {
	/* position: absolute; */
	z-index: 8;
	width:100%;
	bottom:0;
	/* height:100%; */
}
.vote-container.vote-results .enter-button {
	opacity: 1;

}

.vote-container iframe,
.vote-container.enter .vote-success,
.vote-container.enter .vote-option,
.vote-container.enter .enter-button,
.vote-container.enter #gauge, .enter .holdmetight
{
	display: none;
}

.vote-container.enter iframe {
	display: block;
}

/* Gauge container */
#gauge {
	position: absolute;
	bottom: 6px;
	width: 45%;
	left: 27.5%;
	display: none;
	z-index: 10;
}
.enter #gauge .enter #vote-black-circle {
	display:none !important;
}
.vote-results .vote-option-left-hover, .vote-results .vote-option-right-hover {
	/* cursor: default; */
}

#gauge tspan {
	display: none;
}

#gauge path {
	stroke: white;
}
#vote-black-circle {
	border-radius: 200px 200px 0 0;
	width: 22%;
	background: black;
	margin: 0 auto;
	position: absolute;
	left: 39%;
	bottom: 11px;
	height: 34%;
	display: none;
}
/*
@media screen and (max-device-width: 700px), screen and (max-width: 700px) {
	#gauge {
		width: 100%;
		height: 200px;
		left: 0;
		margin: 0 auto;
		position: absolute;
		bottom: 11px;
	}
	#vote-black-circle {
		width: 100%;
		left:0;
	}
	.absolute-holder-2 {
		position: relative;
		z-index: 8;
		bottom: 0;
		height: 100%;
		width: 190px;
		margin: 0 auto;
	}
}
*/
img.melvin {
	right:-55px;
}
img.rickie {
	left:-105px;
}
img.rickie, img.melvin {
	position:absolute;
	bottom:0;
}
#vote-gauge-holder {
	width: 100%;
	position: absolute;
	height: 100%;
	bottom: 0;
}
.holdmetight {
	position: absolute;
	bottom: 0;
	width: 100%;
}

.vote-container.enter {
	height:804px;
}






@media screen and (max-device-width: 1300px), screen and (max-width: 1300px) {
	.vote-container .vote-data {top: 5%;}
	.vote-option.left .vote-data {left:5%;}
	.vote-option.right .vote-data {right:5%;}
	.enter-button{font-size:21px;}
}
@media screen and (max-device-width: 1050px), screen and (max-width: 1050px) {
	.rickie{width:94%;}
	.melvin{width:79%;}
	.enter-button{font-size:18px;}
}
@media screen and (max-device-width: 850px), screen and (max-width: 850px) {
	.rickie{width:100%;}
	.melvin{width:85%;}
}
@media screen and (max-device-width: 700px), screen and (max-width: 700px) {
	.rickie{width:120%;}
	.melvin{width:100%;}
}
@media screen and (max-device-width: 600px), screen and (max-width: 600px) {
	.vote-percent-data{text-align:center;}
	.vote-option .total-votes{font-size:240%;}
	.rickie{width:145%;}
	.melvin{width:123%;}
	.enter-button{font-size:12px;padding:4px;}
	.vote-option {
		height:640px;
	}
	.enter .vote-option {

	}
}
@media screen and (max-device-width: 480px), screen and (max-width: 480px) {
	/*
	.rickie{width:170%;bottom:-120px !important;}
	*/
	.melvin{width:140%;/* bottom:-120px !important; */}
	.rickie{margin-left:15%;}
	.melvin{margin-right:15%;}

	img.melvin, img.rickie {
		bottom: 0 !important;
		height: auto;
	}
	.rickie{width:170%;left:-70px;}
	.melvin{width:140%;}

	.enter-button{font-size:18px;padding:2px !important;}
	.submit{font-size:14px !important;}
	.vote-option-left-hover, .vote-option-right-hover {height:480px;}
	.vote-option{/* height:480px; */}
	.vote-percent-data{height:90px;}
}
@media screen and (max-device-width: 400px), screen and (max-width: 400px) {

		img.rickie{width:170%;left:-70px;}
		img.melvin{width:140%;right:-45px;}

}



