﻿#divBefore {
	position: relative;
  display: block;
  margin: auto;
  width: 960px;
  height: 250px;
  border: 1px solid black;
  z-Index: -1;
}

#divAfter {
	position: relative;
  display: block;
  margin: auto;
  width: 960px;
  height: 250px;
  border: 1px solid black;
  z-Index: -1;
}

#divOutcomeBefore {
	background-image: url("HoldingHands-147x221.jpg");
	position: absolute;
  display: block;
	left: 640px;
	top: 14px;
	width: 147px;
	height: 221px;
	z-index: 20;
	border: 1px solid black;
}	

#divOutcomeAfter {
	background-image: url("after-cropped-300x221.jpg");
	position: absolute;
  display: block;
	left: 640px;
	top: 15px;
	width: 300px;
	height: 221px;
	z-index: 20;
	border: 1px solid black;
}

#divFaceBefore {
	// background-image: url("man-100x133.jpg");
	background-image: url("V-man-100x133.jpg");
	position: absolute;
  display: block;
	left: 540px;
	top: 59px;
	width: 100px;
	height: 133px;
	z-index: 20;
	border: 1px solid black;
}
#divFaceAfter {
	// background-image: url("man-100x133.jpg");
	background-image: url("V-man-100x133.jpg");
	position: absolute;
  display: block;
	left: 540px;
	top: 59px;
	width: 100px;
	height: 133px;
	z-index: 20;
	border: 1px solid black;
}

#divMoneyPump {
	// background-image: url("you-120x120.jpg");
	position: absolute;
  display: block;
	left: 335px;
	top: 80px;
	width: 90px;
	height: 90px;
	z-index: 20;
	border: 1px solid black;
}

#animPumpBefore {
  position: absolute;
  left: -354px;
  top: -304px;
  transform: scale(0.14);
	border: 50px solid #993300;
}

#animPumpAfter {
  position: absolute;
  left: -354px;
  top: -304px;
  transform: scale(0.14);
	border: 50px solid #993300;
}

#divEconomyBefore {
	background-color: #e6f5ff;
	position: absolute;
  display: block;
	left: 20px;
	top: 35px;
	width: 180px;
	height: 180px;
	z-index: 20;
	border: 5px solid #0099ff;
}

#divEconomyAfter {
	background-color: #ffe6e6;
	position: absolute;
  display: block;
	left: 20px;
	top: 71px;
	width: 180px;
	height: 100px;
	z-index: 20;
	border: 5px solid #ff5050;
}

#divButtons {
	position: absolute;
  display: block;
  width: 220px;
  height: 300px;
	border: 1px solid black;
	left: 10px;
	top: 10px;
}



#divWallet {
	background-image: url("wallet-80x78.png");
	position: absolute;
  display: block;
	left: 195px;
	top: 201px;
	width: 80px;
	height: 78px;
	z-index: 20;
	// border: 1px solid black;
}	

#divCashier {
	background-image: url("cashier-80x100.jpg");
	position: absolute;
  display: block;
	left: 685px;
	top: 10px;
	width: 80px;
	height: 100px;
	z-index: 20;
	// border: 1px solid black;
}	

#divYou {
	background-image: url("you-120x120.jpg");
	position: absolute;
  display: block;
	left: 420px;
	top: 90px;
	width: 120px;
	height: 120px;
	z-index: 20;
	border: 3px solid #bfbfbf;
}

#animPumpGroceryONLY {
  position: absolute;
  left: -308px;
  top: -257px;
  transform: scale(0.1);
	border: 20px solid red;
}

#divLabelPurpose {
	position: absolute;
  display: block;
	left: 320px;
	top: 10px;
	width: 300px;
	// height: 18px;
	background: white;
	// border: 1px solid black;
	font-family: "Bree Serif";
	font-weight: 100;
	color: black;
	font-size: 20px;
}

#divLabelWallet {
	position: absolute;
  display: block;
	left: 85px;
	top: 260px;
	width: 110px;
	height: 18px;
	background: white;
	// border: 1px solid black;
	font-family: "Arial";
  font-weight:bold;
  color: black;
  font-size: 15px;
}

#divLabelCashier{
	position: absolute;
  display: block;
	left: 770px;
	top: 90px;
	width: 110px;
	height: 18px;
	background: white;
	// border: 1px solid black;
	font-family: "Arial";
  font-weight:bold;
  color: black;
  font-size: 15px;
}

#divLabelYou{
	position: absolute;
  display: block;
	left: 560px;
	top: 197px;
	width: 80px;
	height: 18px;
	background: white;
	// border: 1px solid black;
	font-family: "Arial";
  font-weight:bold;
  color: black;
  font-size: 15px;
}




