/*--------------------------------------------------*/
/*	ROUNDED THEME
/*--------------------------------------------------*/

.card {
	border-radius: 5px;
}

/*--------------------------------------------------*/
/*	GENERAL
/*--------------------------------------------------*/

.card {
	background-color: var(--background);

	border: 1px solid #40404020;
	-webkit-box-shadow: 9px 9px 10px #40404010, 0px 0px 5px 1px #40404020;
       -moz-box-shadow: 9px 9px 10px #40404010, 0px 0px 5px 1px #40404020;
        -ms-box-shadow: 9px 9px 10px #40404010, 0px 0px 5px 1px #40404020;
         -o-box-shadow: 9px 9px 10px #40404010, 0px 0px 5px 1px #40404020;
            box-shadow: 9px 9px 10px #40404010, 0px 0px 5px 1px #40404020;

/*
	-webkit-box-shadow:  9px  9px 10px #a3b1c680, -9px -9px 10px #a3b1c633;
	   -moz-box-shadow:  9px  9px 10px #a3b1c680, -9px -9px 10px #a3b1c633;
	    -ms-box-shadow:  9px  9px 10px #a3b1c680, -9px -9px 10px #a3b1c633;
	     -o-box-shadow:  9px  9px 10px #a3b1c680, -9px -9px 10px #a3b1c633;
	        box-shadow:  9px  9px 10px #a3b1c680, -9px -9px 10px #a3b1c633;
*/
}

/*--------------------------------------------------*/
/*	PLANS
/*--------------------------------------------------*/

.plan-card {
	display: inline-block;
	position: relative;

	width: 280px;

	margin-bottom: 35px; /* bottom tip height */
}

@media screen and (max-width: 1100px) {
	.plan-card {
		width: 100%;
	}
}

.plan-card .head {
	position: relative;
	padding: 20px;

	color: #FFFFFF;
}

.plan-card .head:after {
	position: absolute;
	content: " ";

	left: calc(50% - 20px);
	bottom: -35px;

	border: 20px solid transparent;
	border-top-color: inherit;
}

.plan-card.orange .head {
	background: #FFB335;
	border-top-color: #FFB335;
}

.plan-card.red .head {
	background: #F64D4D;
	border-top-color: #F64D4D;
}

.plan-card.green .head  {
	background: #30DBB5;
	border-top-color: #30DBB5;
}

.plan-card .price {
	display: block;

	width: 100%;

	font-size: 15px;
	font-weight: 300;
	text-align: center;
}

.plan-card .name {
	display: block;

	width: 100%;

	font-size: 25px;
	font-weight: 700;
	text-align: center;
}

.plan-card .features {
	margin: 0;
	padding: 0;

	list-style: none;
	text-align: center;
}

.plan-card .features li {
	width: calc(100% - 70px);
	margin: 0 35px;
	padding: 20px 15px;
}

.plan-card .features li:not(:last-child) {
	border: 0;
	border-bottom: 1px solid #F2F2F2;
}

.plan-card .button {
	width: 200px;
	margin: 15px calc(50% - 100px);
}

.plan-card .tip {
	position: absolute;
	bottom: -35px;
	left: 0;

	margin: 10px 5px;

	color: #757575;
	font-size: 0.75em
}