/*
* STYLING FOR BENEFITS TALLY
*/

.benefits-title {
	width: 100%;
}

.benefits-title h1 {
	float: left;
	max-width: 70%;
}

.benefits-title .fb-like {
	top: .4em;
	margin-left: 3%;
	float: left;
	width: 27%;
}

.set-benefit-terms {
	text-align: center;
	border-radius: 5px 5px 0 0;
	border: 1px var(--color-grey-dark) solid;
	margin-top: 40px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-khtml-border-top-left-radius: 5px;
	-khtml-border-top-right-radius: 5px;
	overflow: hidden;
}


.benefits-field {
	float:left;
	width:25%;
	height: 100%;
	color:var(--color-white);
	text-shadow: 1px 1px 0 #aaa;
	/*background: transparent;*/
}

.benefits-field-contents {
	margin: 1em 0;
}

.benefits-field-contents input {
	background: transparent;
	color: var(--color-white);
	text-shadow: 2px 2px 1px #aaa;
	border: 0;
	line-height: 1;
	text-align: center;
	vertical-align: middle;
	font-size: 40px;
	max-width: 85px;
}

.benefits-field-contents input:focus {
	border:0 !important;
}

.benefits-field select {
	vertical-align: middle;
	border:0;
	text-shadow: 1px 1px 0 #aaa;
	color:var(--color-white);
}

.benefits-field.bluedark select.greybg {
	background: var(--color-blue-light);
	text-shadow: 1px 1px 0 #4088ac;
	border:1px var(--color-white) solid;
}

.benefits-field.bluedark option {
	text-shadow: 1px 1px 0 #4088ac;
}

div.benefit-box {
	position:relative;
	cursor:pointer;
	width:33.33333333333333%;
	float:left;
	clear:none;
	padding:0;
	border:0;
	margin:0;
	background:#aaa;
}

div.benefit-box div.benefit-title {
	position: absolute;
	top: 55%;
	width: 80%;
	padding: 10px 10%;
	background: url("/img/semitrans_lighter.png") top right repeat;
	text-align: center;
	font-size: 1.2em;
	line-height: 1.1em;
	color: var(--color-white);
}

div.benefit-box:hover div.benefit-title, div.benefit-box:focus div.benefit-title {
	background: url("/img/semitrans.png") top right repeat;
}

div.benefit-box div.benefit-details {
	width:94%;
	height:94%;
	margin:3%;
	position: absolute;
	top:0;
	left:0;
	display:none;
}

.benefit-details h4 {
	margin:0;
	line-height:1em;
}

.benefit-details .benefit-description {
	position: absolute;
	width:100%;
	height:75%;
	top:0;
}

.benefit-description p {
	text-align: center;
	margin-top:5px;
}

.benefit-description p a {
	margin:0 5%;
	display: inline-block;
}

.benefit-details .benefit-meta-details {
	position: absolute;
	width:100%;
	max-height:25%;
	bottom:0;
}

div.benefit-box img {
	width:100%;
}

div.benefit-box img.benefit-background {
	display:none;
}

div.benefits-results {
	margin-bottom:40px;
	overflow:hidden;
}