@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Lato:700');

	.columns {
		width: 223px;
	}

	.package {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	.package .header-price {
		background-color: #009c00;
		color: white;
		font-size: 20px;
		text-shadow: 1px 1px rgba(0,0,0,0.3);
	}

	.package li {
		font-size: 14px;
		border-left: 1px solid #e9eaed;
		border-bottom: 1px solid #e9eaed;
		border-right: 1px solid #e9eaed;
		padding: 20px;
		text-align: center;
	}

	.package .grey {
		background-color: #e9eaed;
	}

	.package .price, .package .new-price {
		font-size: 38px;
		color: #333;
	}

	.package .price .decimal, .package .new-price .decimal {
		font-size: 14px;
		color: #000;
	}

	.package .old-price {
		position: absolute;
		text-decoration: line-through;
		font-size: 14px;
		right: 0;
		bottom: 100%;
		margin-bottom: 10px;
		display: none;
	}

	.package .new-price {
		display: none;
	}

	.package .icon-checkmark {
		color: #009c00;
		margin-right:7px;
	}

	.package .icon-close {
		color: #ff0000;
		margin-right:7px;
	}

	.package .recurrence {
		font-size: 15px;
		line-height: 30px;
	}

	.package .dollar-sign {
		position: relative;
		font-size: 14px;
		margin-right: 3px;
	}

	.package .select {
		appearance: none;
		background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23333' d='M7 10l5 5 5-5z'/></svg>") no-repeat right 5px center;
		background-size: 12px;
		width: 100%;
		text-align: center;
		text-align-last: center; /* Manter centralizado o texto do select no Sarafi */
		height: 30px;
		cursor: pointer;
		border: 1px solid #ccc;
		color: #000;
	}

	.package .select:focus {
		outline: none;
	}

	.btn-pagseguro {
		background-color: #009c00;
		color: #fff;
		padding: 10px 25px;
		text-align: center;
		font-size: 18px;
		border-radius: 5px;
		text-shadow: 1px 1px rgba(0,0,0,0.3);
		transition: 0.3s;
	}

	.btn-pagseguro:hover {
		box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);
	}

	.info {
		color: rgb(109, 109, 109);
		font-size: 14px;
		background-color: rgb(246, 246, 246);
		border: 1px solid #e9eaed;
		padding: 10px;
		border-radius: 5px;
		margin-bottom: 10px;
	}

	.info-pagseguro {
		color: rgb(109, 109, 109);
		font-size: 14px;
		background-color: rgb(246, 246, 246);
		border: 1px solid #e9eaed;
		padding: 10px;
		border-radius: 5px;
	}

	.info-pagseguro img {
		margin-left: 10px;
		width: 230px;
		float: right;
	}

	.list-unordered {
		list-style-type: none;
		padding: 10px;
		margin: 0 0 10px 0;
		color: rgb(109, 109, 109);
		font-size: 14px;
		background-color: rgb(246, 246, 246);
		border: 1px solid #e9eaed;
		border-radius: 5px;
	}

	.list-unordered li {
		margin: 0 0 20px 0;
		padding-left: 30px;
		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iIzRBOTBFMiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTkuNjY3IDIuNDc1TDE3LjU0Ny4zMzZhMS4xMjkgMS4xMjkgMCAwIDAtMS42MDcgMEw3LjUyIDguODM4IDQuMDYyIDUuMzQ2YTEuMTMgMS4xMyAwIDAgMC0xLjYwOSAwbC0yLjEyIDIuMTRhMS4xNTcgMS4xNTcgMCAwIDAgMCAxLjYyNWw1Ljg1MSA1LjkwOGExLjg0IDEuODQgMCAwIDAgMi42MTYuMDA1YzIuNjc1LTIuNjgzIDguNjg3LTguNzMxIDEwLjg2Ni0xMC45MjNhMS4xNTQgMS4xNTQgMCAwIDAgLjAwMS0xLjYyNnoiLz48L3N2Zz4=");
		background-repeat: no-repeat;
		background-position: 0 3px;
	}

	.list-unordered li:last-child {
		margin: 0;
	}

	.ribbon {
		width: 130px;
		height: 130px;
		//background-color: #eac;
		position: absolute;
		top: -4px;
		left: -4px;
		overflow: hidden;
		z-index: 1;
	}

	.ribbon span {
		width: 183.85px;
		height: 30px;
		line-height: 30px;
		background-color: darkred;
		display: block;
		text-align: center;
		position: absolute;
		top: 100px;
		transform-origin: left bottom;
		transform:rotate(-45deg);
		color: #fff;
		text-transform: uppercase;
		box-shadow: 0 5px 10px rgba(0,0,0,.1);
		font-family: 'Lato', sans-serif;
		font-size: 16px;
		text-shadow: 0 1px 1px rgba(0,0,0,.2);
	}

	.ribbon:after, .ribbon:before {
		content:'';
		border-top: 2.5px solid transparent;
		border-right: 2.5px solid #999;
		border-bottom: 2.5px solid #999;
		border-left: 2.5px solid transparent;
		position: absolute;
	}

	.ribbon:before {
		bottom: 0;
		left: 0;
	}

	.ribbon:after {
		top: 0;
		right: 0;
	}

	.cupom {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 30px;
		width: 100%;
		color: green;
		border: 1px dashed green;
		margin-top: 10px;
		border-radius: 10px;
	}

	.cupom-input {
		border: 1px dashed green;
		padding: 5px;
		background-color: transparent;
		text-align: center;
		color: green;
		margin-top: 10px;
		display: none;
		height: 30px;
		border-radius: 10px;
	}

	.cupom-input:focus {
		outline: none;
	}