/* css/style.css */

	* {
		margin: 0;
		padding: 0;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;
	}
	hrml, body, button, input {
		font-family: "Varela Round", sans-serif;
	}
	#wrapper {
		margin: 0px auto;
		width: 480px;
	}
	#logo {
		display: inline-block;
		margin: 0px auto;
		width: 256px;
	}
	#login {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		width: 424px;
		padding: 40px 0px 40px 0px;
		text-align: center;
		border: 5px solid #3b6786;
		border-radius: 25px;
	}
	#login form {
		padding-top: 20px;
		margin-top: 20px;
		border-top: 5px dashed #b7d3e5;
	}
	#login form fieldset {
		border: none;
	}
	#login form input {
		margin: 10px 0px 10px 0px;
		height: 60px;
		line-height: 60px;
		width: 320px;
		font-size: 24px;
		font-weight: bold;
		border: 5px solid #3b6786;
		padding: 0px 10px 0px 10px;
		-webkit-border-radius: 10px;
		   -moz-border-radius: 10px;
				border-radius: 10px;
	}
	#login form div {
		margin: 10px 0px;
		font-size: 24px;
		font-weight: bold;
	}
	#login-button {
		margin-top: 20px;
		height: 60px;
		line-height: 60px;
		width: 320px;
		font-size: 20px;
		font-weight: bold;
		background: #3b6786;
		color: #ffffff;
		border: none;
		-webkit-border-radius: 10px;
		   -moz-border-radius: 10px;
				border-radius: 10px;
	}
	#result {
		margin-top: 10px;
		color: #ff0000;
		font-size: 24px;
		font-weight: bold;
	}
	#select-capsule-mxp {
		width: 210px;
	}
	#select-capsule-bgy {
		width: 310px;
	}
	.vending-container {
		position: relative;
		margin: 0px auto 40px auto;
		text-align: center;
		overflow: hidden;
		width: 310px;
	}
	.title {
		margin-top: 10px;
		height: 50px;
		line-height: 50px;
		color: #3b6786;
		font-size: 18px;
		font-weight: bold;
		width: 100%;
		text-align: center;
		text-transform: uppercase;
	}
	#vending-list {
		margin-bottom: 20px;
	}
	#vending-list .row {
		height: 40px;
		line-height: 40px;
		padding-left: 10px;
		margin: 0px 10px 0px 0px;
		text-align: left;
		font-size: 18px;
		font-weight: bold;
	}
	#vending-list .row span {
		display: inline-block;
		width: 40px;
	}
	#vending-list .alternate {
		background: #eee;
		border-radius: 5px;
	}
	.page-title {
		height: 80px;
		line-height: 80px;
		text-align: center;
		font-size: 22px;
		font-weight: bold;
		color: #ffffff;
		background: #3b6786;
		text-transform: uppercase;
	}
	.select-capsule {
		position: absolute;
		top: calc(50% + 40px);
		left: 50%;
		transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		overflow: hidden;
	}
	.capsule-buttons {
		border: 5px dashed #ccc;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		overflow: hidden;
	}
	.select-capsule .capsule-buttons a {
		margin: 10px;
		float: left;
		background: #3b6786;
		color: #ffffff;
		width: 80px;
		height: 80px;
		line-height: 80px;
		text-align: center;
		font-size: 24px;
		font-weight: bold;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}
	.divisor {
		text-align: center;
	}
	.top-divisor {
		border-top: 5px dashed #ccc;
		text-align: center;
	}
	.button-container {
		position: absolute;
		top: calc(50% + 40px);
		left: 50%;
		text-align: center;
		transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		overflow: hidden;
	}
	.button-label {
		margin-top: 10px;
		height: 30px;
		line-height: 30px;
		color: #3b6786;
		font-size: 18px;
		font-weight: bold;
		width: 100%;
		text-transform: uppercase;
	}
	.single-button {
		margin: 10px 0px;
		width: 286px;
		height: 60px;
		line-height: 60px;
		font-size: 16px;
		font-weight: bold;
		color: #ffffff;
		border: none;
		text-transform: uppercase;
		-webkit-border-radius: 5px;
		   -moz-border-radius: 5px;
				border-radius: 5px;
	}
	.double-button-container {
		margin: 10px 0px;
		width: 286px;
		overflow: hidden;
	}
	.double-button {
		float: left;
		width: 128px;
		height: 60px;
		line-height: 60px;
		font-size: 18px;
		font-weight: bold;
		color: #ffffff;
		border: none;
		text-transform: uppercase;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}
	.mgl30 {
		margin-left: 30px;
	}
	.mgt50 {
		margin-top: 50px;
	}
	.green {
		background: #00b700;
	}
	.red {
		background: #ff4c4c;
	}
	.orange {
		background: #ffa500;
	}
	.blue {
		background: #3b6786;
	}
	.center {
		overflow: hidden;
		width: 210px;
		margin: 0px auto;
	}
	.indietro {
		position: absolute;
		bottom: 0px;
		left: 50%;
		transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
	}
	
	.phase2 {
		display: none;
	}

	.location-button {
		padding: 50px 0px;
	}
	
	/***** Modal *****/
	
	.wrapper-modal {
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		display: none;
		z-index: 100;
	}

	#modal-open-slot {
		position: absolute;
		height: 256px;
		width: 384px;
		top: 50%;
		left: 50%;
		margin-top: -128px;
		margin-left: -192px;
		font-size: 20px;
		font-weight: bold;
		line-height: 25px;
		text-align: center;
		background: #ff4c4c;
		color: #fff;
		-webkit-border-radius: 20px;
		   -moz-border-radius: 20px;
				border-radius: 20px;
	}
	
	#modal-open-slot button {
		margin: 40px 20px 0px 20px;
		height: 50px;
		width: 128px;
		background: #fff;
		font-size: 18px;
		font-weight: bold;
		color: #ff4c4c;
		border: none;
		-webkit-border-radius: 5px;
		   -moz-border-radius: 5px;
				border-radius: 5px;
	}

	#modal-open-slot .container {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		padding: 20px;
		transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
	}





	#modal-button-click {
		position: absolute;
		height: 256px;
		width: 384px;
		top: 50%;
		left: 50%;
		margin-top: -128px;
		margin-left: -192px;
		padding: 30px;
		font-size: 20px;
		font-weight: bold;
		line-height: 25px;
		text-align: center;
		background: #ff4c4c;
		color: #fff;
		-webkit-border-radius: 20px;
		   -moz-border-radius: 20px;
				border-radius: 20px;
	}
	
	#modal-button-click button {
		margin: 40px 20px 0px 20px;
		height: 50px;
		width: 128px;
		background: #fff;
		font-size: 18px;
		font-weight: bold;
		color: #ff4c4c;
		border: none;
		-webkit-border-radius: 5px;
		   -moz-border-radius: 5px;
				border-radius: 5px;
	}

	#modal-button-click .container {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		padding: 20px;
		transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
	}