/* ================================================================================== */
/* == Normalize.css v7.0.0 ========================================================== */
/* ================================================================================== */

html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:0.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}

*,*:before,*:after { box-sizing: border-box; margin: 0; padding: 0; list-style: none; }

*,*:before,*:after { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /*Disable cursor highlighting on everything.*/

/* Viewport Sizing */
@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}



:root { 
	--text-darkest: #444A53;
	--text-default: #ABB2BC;
	--text-lightest: #9EA4AE;

	--color-red: #DC5F68;
	--color-blue: #5889D6;
	--color-yellow: #EDBC59;
	--color-green: #97BF61;
	--color-gray: #666D77;
	
	--color-border: #E7E9ED;
	
	--bg-gray: #F5F7FA;
}


/* ================================================================================== */
/* == General Styles ================================================================ */
/* ================================================================================== */

html,body { background: #E7E9ED; font-family: "proxima-nova", proxima nova, sans-serif; color: #ABB2BC; }
.container { max-width: 500px; margin: 0 auto; background: #fff; box-shadow: 0 1px 10px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1); }
.container:after { content: ""; display: table; clear: both; }

a { text-decoration: none; color: var(--color-blue);
-webkit-transition: all 0.218s;
-moz-transition: all 0.218s;
-ms-transition: all 0.218s;
-o-transition: all 0.218s;
transition: all 0.218s; }
a:hover { color: var(--color-green); }



/* ================================================================================== */
/* == Header ======================================================================== */
/* ================================================================================== */

#header { text-align: center; text-transform: uppercase; border-bottom: 1px solid var(--color-border); padding: 15px 0; position: relative; }
#header h1 { margin: 0; }
#header h1 a { font-weight: 400; font-size: 30px; color: var(--text-darkest); }
#header h1 a span { font-weight: 700; color: var(--color-blue); }

#header .info { background: url(img/icon-info.svg) no-repeat center left; background-size: 20px; text-indent: -9999px; position: absolute; top: 0px; left: 20px; width: 40px; height: 66px; opacity: 0.75;}
#header .settings { background: url(img/icon-settings.svg) no-repeat center left; background-size: 20px; text-indent: -9999px; position: absolute; top: 0px; right: 0px; width: 40px; height: 66px; opacity: 0.75;}



/* ================================================================================== */
/* == Content ======================================================================= */
/* ================================================================================== */

h2 { text-transform: uppercase; font-size: 17px; font-weight: 600; text-align: center; color: var(--text-darkest); }

#main-info { overflow: hidden; padding: 30px 0; font-size: 20px;}

#totals { width: calc(100% - 160px); float: right; padding: 2px 00px; color: var(--text-darkest); text-align: center; }
#totals #weight-total { font-size: 36px; font-weight: 700; }
#totals #weight-total:after { color: var(--text-default); font-weight: 400; font-size: 0.75em; margin-left: 0.15em; }
	.pounds #totals #weight-total:after { content: "lbs"; }
	.kilograms #totals #weight-total:after { content: "kg"; }
/*#totals #max:before { content: "1 rep max = "; }*/
#totals #max { font-weight: 600; font-size: 1.25em;}
#totals #max:after { color: var(--text-default); font-weight: 400; font-size: 0.75em; margin-left: 0.15em; }
	.pounds #totals #max:after { content: "lbs 1RM"; }
	.kilograms #totals #max:after { content: "kg 1RM"; }

#reps-counter { text-transform: uppercase; padding: 15px 0; overflow: hidden; line-height: 30px; }
#reps-counter div { display: inline-block; }
#reps-counter #reps { width: 90px; }
#reps-counter #add,
#reps-counter #subtract { color: var(--color-red); font-weight: 700; cursor: pointer; width: 30px; height: 30px; border: 1px solid var(--color-border); background: var(--bg-gray) url(img/icon-add.svg) no-repeat center; background-size: 16px; border-radius: 50%; text-indent: -9999px; }
#reps-counter #subtract { background: var(--bg-gray) url(img/icon-minus.svg) no-repeat center; background-size: 16px; }

#barbell { height: 130px; width: 160px; background: url(img/barbell.png) no-repeat right; background-size: auto 23px; float: left; padding-left: 38px; }

@media only screen and (max-width: 350px) {
	#reps-counter { font-size: 0.8em; }
	#reps-counter #reps { width: 62px; }
	#reps-counter #add,
	#reps-counter #subtract { width: 26px; height: 26px; line-height: 26px; }
	#totals { width: calc(100% - 145px); }
	#barbell { width: 145px; padding-left: 23px; }
}


/*#bars { clear: both; overflow: hidden; border: 1px solid var(--color-border); padding: 5px; margin-top: 15px; border-radius: 7px; background: #fff; }
#bars div { float: left; width: 50%; padding: 15px;  text-align: center; cursor: pointer; }
#bars .active { background: var(--color-blue); color: #fff; border-radius: 5px; }*/
#bars { clear: both; overflow: hidden; border: 1px solid var(--color-border); margin-top: 15px; border-radius: 7px; background: #fff; }
#bars div { float: left; width: 50%; padding: 15px;  text-align: center; cursor: pointer; }
#bars #bar-women { border-radius: 5px 0 0 5px; }
#bars #bar-men { border-radius: 0 5px 5px 0; }
#bars .active { background: var(--color-blue); color: #fff; border-radius: 5px; }

#scale { clear: both; overflow: hidden; border: 1px solid var(--color-border); margin: 15px; border-radius: 7px; background: #fff; }
#scale div { float: left; width: 50%; padding: 15px;  text-align: center; cursor: pointer; }
#scale #scale-pounds { border-radius: 5px 0 0 5px; }
#scale #scale-kilograms { border-radius: 0 5px 5px 0; }
#scale .active { background: var(--color-blue); color: #fff; border-radius: 5px; }


.plate { width: .5em; height: 6em; margin-top: 3.5em; border-radius: 0.3em; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); float: left; color: #fff; font-size: 10px; text-align: center; position: relative; }
.pounds .plate55, .pounds .plate45, .pounds .plate35, .pounds .plate25, .pounds .plate15, .pounds .plate10,
.kilograms .plate25, .kilograms .plate20, .kilograms .plate15, .kilograms .plate10, .kilograms .plate5 { height: 13em; margin: 0; }
.pounds .plate55,
.kilograms .plate25 { width: 2.5em; }
.pounds .plate45,
.kilograms .plate20 { width: 2.1em; }
.pounds .plate35,
.kilograms .plate15 { width: 1.9em; }
.pounds .plate25,
.kilograms .plate10 { width: 1.3em; }
.pounds .plate15,
.kilograms .plate5 { width: 1em; }
.pounds .plate10 { width: .8em; }
.pounds .plate5 { width: .8em; }
.plate span { position: absolute; top: 50%; left: 0; margin-top: -0.6em; width: 100%; opacity: 0.95; display: none; }


 
#barbell .plate { background: url(img/plate-gray.png); background-size: 100% 100%;}
.pounds #barbell .plate55 { background: url(img/plate-red.png); background-size: 100% 100%; }
.pounds #barbell .plate45 { background: url(img/plate-blue.png); background-size: 100% 100%; }
.pounds #barbell .plate35 { background: url(img/plate-yellow.png); background-size: 100% 100%; }
.pounds #barbell .plate25 { background: url(img/plate-green.png); background-size: 100% 100%; }
.pounds #barbell .plate15 { background: url(img/plate-black.png); background-size: 100% 100%; }
.pounds #barbell .plate10 { background: url(img/plate-black.png); background-size: 100% 100%; }
.kilograms #barbell .plate25 { background: url(img/plate-red.png); background-size: 100% 100%; }
.kilograms #barbell .plate20 { background: url(img/plate-blue.png); background-size: 100% 100%; }
.kilograms #barbell .plate15 { background: url(img/plate-yellow.png); background-size: 100% 100%; }
.kilograms #barbell .plate10 { background: url(img/plate-green.png); background-size: 100% 100%; }
.kilograms #barbell .plate5 { background: url(img/plate-black.png); background-size: 100% 100%; }



.plate-selector { background: var(--bg-gray); overflow: hidden; padding: 20px 15px; font-weight: 600; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.plate-selector h2 { margin-bottom: 10px; }
.plate-selector ul { overflow: hidden; }
.plate-selector li { background: var(--text-darkest); float: left; width: calc((100% - 50px) / 5); padding-top: calc((100% - 50px) / 5); text-align: center; color: #fff; border-radius: 50%; margin: 5px; position: relative; cursor: pointer; }
.plate-selector li span { position: absolute; top: 50%; margin-top: -9px; left: 0; width: 100%; text-align: center; }
.pounds .plate-selector li[data-weight="10"],
.pounds .plate-selector li[data-weight="5"],
.pounds .plate-selector li[data-weight="2.5"],
.pounds .plate-selector li[data-weight="1.25"],
.kilograms .plate-selector li[data-weight="2.5"],
.kilograms .plate-selector li[data-weight="2"],
.kilograms .plate-selector li[data-weight="1.5"],
.kilograms .plate-selector li[data-weight="1"],
.plate { background: var(--color-gray); }
.pounds .plate-selector li[data-weight="55"],
.kilograms .plate-selector li[data-weight="25"],
.pounds .plate55,
.kilograms .plate25 { background: var(--color-red); }
.pounds .plate-selector li[data-weight="45"],
.kilograms .plate-selector li[data-weight="20"],
.pounds .plate45,
.kilograms .plate20 { background: var(--color-blue); }
.pounds .plate-selector li[data-weight="35"],
.kilograms .plate-selector li[data-weight="15"],
.pounds .plate35,
.kilograms .plate15 { background: var(--color-yellow); }
.pounds .plate-selector li[data-weight="25"],
.kilograms .plate-selector li[data-weight="10"],
.pounds .plate25,
.kilograms .plate10 { background: var(--color-green); }
.pounds .plate-selector li[data-weight="15"],
.kilograms .plate-selector li[data-weight="5"],
.pounds .plate15,
.kilograms .plate5 { background: var(--text-darkest); }
.plate-selector li.clear { background: var(--color-gray); }
.plate-selector li.clear:hover { background: #ABB2BC; }
.plate-selector li.inactive { border: 2px solid var(--color-gray); background: none !important; color: var(--color-gray); padding-top: calc((100% - 70px) / 5); }



.percentages { padding: 20px; }
.percentages h2 { margin: 10px 0 24px 0; }
.percentages ul { border-top: 1px dotted var(--color-border); }
.percentages li { overflow: hidden; margin: 10px 0; line-height: 30px; border-bottom: 1px dotted var(--color-border); margin: 0; padding: 10px 0; }
.percentages .label { float: left; font-weight: 600; color: var(--text-darkest); width: 50px; }
.percentages .weight { float: left; color: var(--text-darkest); }
.percentages .weight:after { font-size: 0.75em; color: var(--text-default); }
	.pounds .percentages .weight:after { content: "lbs"; }
	.kilograms .percentages .weight:after { content: "kg"; }

.percentages .plates {  overflow: hidden; }
.percentages .plates .plate { float: right; height: 20px; width: 20px; line-height: 20px; border-radius: 50%; margin: 5px 0 4px 5px; box-shadow: none;  }
.percentages .plates .plate55,
.percentages .plates .plate45,
.percentages .plates .plate35,
.percentages .plates .plate25,
.percentages .plates .plate15,
.percentages .plates .plate10 { height: 30px; width: 30px; line-height: 30px; margin: 0 0 0 4px; }


#thanks { padding: 30px 20px; text-align: center; height: calc(100vh - 122px); display: flex; flex-direction: column; justify-content: center; }
#thanks p { margin: 1em 0 0 0; }

#contact { padding: 30px 20px; min-height: calc(100vh - 122px); }
#contact p { margin: 1em 0 2em 0; line-height: normal; }
#contact label { display: block; text-transform: uppercase; font-size: 14px; font-weight: 600; color: var(--color-blue); margin-bottom: 0.5em; }
#contact input,
#contact textarea { margin: 0 0 1rem 0; width: 100%; border: 1px solid var(--color-border); border-radius: 3px; padding: 10px; font-family: "proxima-nova", proxima nova, sans-serif; }
#contact .submit { background: var(--color-blue); color: #fff; border: none; cursor: pointer; margin-top: -0.5rem; font-weight: 600; text-transform: uppercase; font-size: 14px;}


/* ================================================================================== */
/* == Footer ======================================================================== */
/* ================================================================================== */

#footer { clear: both; padding: 20px; border-top: 1px solid var(--color-border); font-size: 13px; }



/* ================================================================================== */
/* == Media Queries ================================================================= */
/* ================================================================================== */

/*@media only screen and (min-width: 1024px) {
.container { max-width: none; }
#main-section { float: left; width: 50%; padding: 100px; min-height: 100vh; }
#percentages { float: right; width: 50%; }
}*/