html {
	font-size: 62.5%;
}
#topSec {
	padding: 3rem 0rem 2rem;
	background: url(bg.jpg) top center / cover no-repeat fixed;
}
h1 {
	color: #fff;
	font-family: Merriweather, Garamond, Georgia, serif;
	font-size: 7em;
	text-align: center;
	padding-bottom:20px;
}
h1 span {
	display: block;
	margin-bottom: 2rem;
	font-size: 0.5em;
}
#meterContainer {
	padding: 0 6rem;
	text-align: center;
}
.meterSet {
	width: 280px;
	display: inline-block;
	vertical-align: top;
	padding-left: 20px;
}
.meterWrapper, .glass {
	width: 6.72rem;
	height: 41.92rem;
	display: inline-block;
	position: relative;
}
.glass {
	display: block;
	z-index: 10;
	background: url(meter.png) center top no-repeat;
}
.bulb, .verticalWrap {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
}
.bulb {
	width: 5.12rem;
	height: 5.04rem;
	bottom: 1.04rem;
	left: 0.64rem;
	z-index: 2;
	background: rgb(99,186,27);
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iNDclIiBzdG9wLWNvbG9yPSIjNjNiYTFiIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM5ODIzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
	background: -moz-radial-gradient(center, ellipse cover,  rgba(99,186,27,1) 47%, rgba(57,130,53,1) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(47%,rgba(99,186,27,1)), color-stop(100%,rgba(57,130,53,1)));
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(99,186,27,1) 47%,rgba(57,130,53,1) 100%);
	background: -o-radial-gradient(center, ellipse cover,  rgba(99,186,27,1) 47%,rgba(57,130,53,1) 100%);
	background: -ms-radial-gradient(center, ellipse cover,  rgba(99,186,27,1) 47%,rgba(57,130,53,1) 100%);
	background: radial-gradient(ellipse at center,  rgba(99,186,27,1) 47%,rgba(57,130,53,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63ba1b', endColorstr='#398235',GradientType=1 );
	border-radius: 100%;
}
.verticalWrap, .verticalPreFill, .verticalPostFill {
	width: 2.88rem;
	height: 32.16rem;
	bottom: 7.52rem;
	left: 1.84rem;
	overflow: hidden;
}

.verticalWrap {
	bottom: 75px;
}

.verticalMeter, .verticalPreFill, .verticalPostFill {
	background: rgb(99,186,27);
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIyMSUiIHN0b3AtY29sb3I9IiM2M2JhMWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIzMiUiIHN0b3AtY29sb3I9IiM2M2JhMWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MiUiIHN0b3AtY29sb3I9IiMzOTgyMzUiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI4NSUiIHN0b3AtY29sb3I9IiM0M2E1NDgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5MyUiIHN0b3AtY29sb3I9IiM0M2E1NDgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMzk4MjM1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
	background: -moz-linear-gradient(left,  rgba(99,186,27,1) 21%, rgba(99,186,27,1) 32%, rgba(57,130,53,1) 62%, rgba(67,165,72,1) 85%, rgba(67,165,72,1) 93%, rgba(57,130,53,1) 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(21%,rgba(99,186,27,1)), color-stop(32%,rgba(99,186,27,1)), color-stop(62%,rgba(57,130,53,1)), color-stop(85%,rgba(67,165,72,1)), color-stop(93%,rgba(67,165,72,1)), color-stop(100%,rgba(57,130,53,1)));
	background: -webkit-linear-gradient(left,  rgba(99,186,27,1) 21%,rgba(99,186,27,1) 32%,rgba(57,130,53,1) 62%,rgba(67,165,72,1) 85%,rgba(67,165,72,1) 93%,rgba(57,130,53,1) 100%);
	background: -o-linear-gradient(left,  rgba(99,186,27,1) 21%,rgba(99,186,27,1) 32%,rgba(57,130,53,1) 62%,rgba(67,165,72,1) 85%,rgba(67,165,72,1) 93%,rgba(57,130,53,1) 100%);
	background: -ms-linear-gradient(left,  rgba(99,186,27,1) 21%,rgba(99,186,27,1) 32%,rgba(57,130,53,1) 62%,rgba(67,165,72,1) 85%,rgba(67,165,72,1) 93%,rgba(57,130,53,1) 100%);
	background: linear-gradient(to right,  rgba(99,186,27,1) 21%,rgba(99,186,27,1) 32%,rgba(57,130,53,1) 62%,rgba(67,165,72,1) 85%,rgba(67,165,72,1) 93%,rgba(57,130,53,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63ba1b', endColorstr='#398235',GradientType=1 );
}
.verticalMeter, .verticalPreFill, .verticalPostFill {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
.verticalMeter {
	height: 5%; /*meter growth*/
}
.verticalPreFill, .verticalPostFill {
	height: 10%;
	display: block;
	bottom: 3.36rem;
	left: 1.84rem;
}
.verticalPostFill {
	height: 1.7rem;
	top: 0.64rem;
	bottom: auto;
	border-top-left-radius: 45%;
	border-top-right-radius: 45%;
}
.tickMarks {
	width: 100%;
	position: absolute;
	top: 0;
	text-align: left;
}
.tickMarks span {
	position: absolute;
	right: 110%;
	color: #fff;
	font-family: helvetica, arial, sans-serif;
	font-size: 2.08em;
	font-weight: bold;
	text-shadow: 0px 3px 0px rgba(0,0,0,0.5);
	opacity: 0.6;
}
.tickMarks .tick0 {
	top: 33.36rem;
}
.tickMarks .tick100 {
	top: 26.8rem;
}
.tickMarks .tick200 {
	top: 20.32rem;
}
.tickMarks .tick500 {
	top: 14.08rem;
}
.tickMarks .tick600 {
	top: 7.6rem;
}
.tickMarks .tick733 {
	top: 1.12rem;
}
.scoreChartWrap {
	position:relative;
	margin-top: 2rem;
	font-family: avenir, helvetica, arial, sans-serif;
	font-weight: bold;
}
.chartTitle, .chartTitle span {
	display: block;
	color: #fff;
	font-size: 2.6em;
	padding-right:20px;
	height:60px
}
.chartTitle span {
	font-size: 0.6em;
	padding-top:4px
}
.scoreChart {
	margin-top: 1rem;
	background: #fff;
	border-radius: 0.5rem;
}
.scoreRow {
	padding: 1rem 0;
}
.scoreRow:first-child {
	color: #fff;
	background: #70b8e5;
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
}
.scoreRow:last-child {
	border-bottom-left-radius: 1rem;
	border-bottom-right-radius: 1rem;
}
.scoreFamily, .scorePoints {
	width: 50%;
	float: left;
	font-size: 1.4em;
}
.scorePoints {
	width: 50%;
	float: right;
}
.recordDeed {
	width: 100%;
	display: block;
	margin-top: 2rem;
	padding: 1rem 0;
	color: #fff;
	font-size: 1.8em;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	background: #54ae45;
	border: none;
	border-radius: 0.5rem;
	box-shadow: none;
	cursor: pointer;
}
.recordDeed:hover {
	background: #48983b;
}
#pageDesc {
	padding: 6rem 2rem;
	color: #545454;
	font-family: avenir, helvetica, arial, sans-serif;
	text-align: center;
	background: #fff;
}
h2 {
	font-size: 7.2em;
}
#pageDesc p {
	font-size: 3em;
	line-height: 1.6em;
}
#modalOverlay {
	display: none;
	position: fixed;
	z-index: 19;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0.5);
}
#modalOverlay.showOverlay {
	display: block;
}
#modal {
	width: 56.8rem;
	color: #545454;
	position: fixed;
	top: 10rem;
	left: 50%;
	margin-left: -28.4rem;
	z-index: 20;
	padding: 4rem 2rem;
	font-family: avenir, helvetica, arial, sans-serif;
	text-align: center;
	background: #fff;
	border-radius: 0.5rem;
	border: 1px solid #ccc;
}
#modalClose {
	width: 15px;
	height: 15px;
	display: block;
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: url(sprite-icons.png) 0 0 no-repeat;
	cursor: pointer;
}
#modalClose:hover {
	background-position: 0rem -3.5rem;
}
.modalTitle {
	font-size: 2.4em;
	font-weight: bold;
}
#modal p {
	margin: 1rem 0;
	font-size: 2em;
	line-height: 1.25em;
}
.deedContainer {
	width: 340px;
	display: inline-block;
	position: relative;
	padding: 1rem 0;
	color: #fff;
	font-size: 4.8em;
	border: 0.1rem solid #ccc;
	border-radius: 0.5rem;
	background: #54ae45;
	cursor: pointer;
}
#deedMinus, #deedPlus {
	width: 70px;
	display: table-cell;
	vertical-align: middle;
	color: #54ae45;
	background: #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	line-height: 1.4em;
	text-align: center;
}
#deedMinus {
	left: 0;
	border-top-left-radius: 0.5rem;
	border-bottom-left-radius: 0.5rem;
}
#deedPlus {
	right: 0;
	border-top-right-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
}
#deedPlus.null, #deedMinus.null {
	color: #ccc;
}
#modal .recordDeed {
	width: 18.0rem;
	margin: 0 auto;
}
.selectFamily {
	margin: 2rem 0;
	padding: 2rem 0;
	color: #545454;
	font-size: 1.8em;
	background: #fff;
	text-align: center;
}
#selectDropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: -0.1rem;
	right: -0.1rem;
	margin-top: -0.1rem;	
	text-align: center;
	background: #fff;
	border: 0.1rem solid #ccc;
	border-top: none;
	border-bottom-left-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
	overflow-y: scroll;
	height: 500px;
}
#selectDropdown li span {
	display: block;
	padding: 2rem 0;
	text-align: center;
	border-top: 0.1rem solid #ccc;
}
#deedPlus:hover, #deedMinus:hover, #selectDropdown li span:hover {
	background: #f2f2f2;
}
#deedPlus.null:hover, #deedMinus.null:hover {
	background: #fff;
}
.deedContainer.active {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.deedContainer.active #selectDropdown {
	display: block;
}
.dropIcon {
	width: 2rem;
	height: 1.3rem;
	display: block;
	position: absolute;
	top: 2rem;
	right: 2rem;
	background: url(sprite-icons.png) 0 -7rem no-repeat;
}
.deedContainer.active .dropIcon {
	background-position: 0 -10.3rem;
}

.recordDeedModal {
	width: 100%;
	display: block;
	margin-top: 2rem;
	padding: 1rem 0;
	color: #fff;
	font-size: 1.8em;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	background: #54ae45;
	border: none;
	border-radius: 0.5rem;
	box-shadow: none;
	cursor: pointer;
	width: 18.0rem;
	margin: 0 auto;
}
.recordDeedModal:hover {
	background: #48983b;
}

.verticalWrap {
    overflow: visible;
}
.verticalMeter {
    max-height: 100%;
}
.bulb {
    color: #fff;
    font-family: avenir, helvetica, arial, sans-serif;
    font-size: 1.8em;
    font-weight: bold;
    line-height: 2.88em;
    text-shadow: 0 0.3rem 0 rgba(0,0,0,0.5);
}
.hovertip {
    display: inline-block;
    position: absolute;
    top: -2.2rem;
    left: 150%;
    padding: 1rem 2rem;
    color: #fff;
    font-family: avenir, helvetica, arial, sans-serif;
    font-size: 2.5em;
    font-weight: bold;
    letter-spacing: 0.1rem; 
    background: rgba(255,255,255,0.25);
    border-radius: 0.5rem;
    box-shadow: inset 0rem 1rem 1rem rgba(255,255,255,0.25);
}
.hovertip:after {
    height:0;
    width:0;
    display: block;
    position:absolute;
    right: 100%;
    top: 50%;
    margin-top: -1rem;
    content: "";  
    border-color: transparent rgba(255,255,255,0.35) transparent transparent;
    border-style: solid;
    border-width: 1rem;
}
.glass:hover .hovertip {
    display: inline-block;
}
.round2 {
    display: block; 
    position: absolute;
    background: #54ae45;
    top: 100%; 
    left: 0; 
    right: 0; 
    padding: 0.5rem 0rem;
    font-size: 0.5em;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius:  0.5rem;
    margin-top: -0.7rem;
}