CSS help with Pro sites Pricing Table

I need help with the Pro sites Pricing table to make it look alike the Pro sites demo.

Here's the CSS we've added so far:

#prosites-checkout-table .period-selector-container {
width: 100% !important;
text-align: center;
.period-selector-container label > input + .period-option {
padding: 9px;
height: 3em;
font-size: 14px
#prosites-checkout-table .pricing-column .title {
background-color: #3FBCEF;
font-size: 30px;
height: auto !important;
padding-top: 20px;
padding-bottom: 20px;
border: none;
#prosites-checkout-table .pricing-column .price {
color: #ffffff;
background-color: #3fbcef !important;
#prosites-checkout-table .pricing-column li.summary {
height: auto !important;
border-left: 6px solid #3fbcef;
border-right: 6px solid #3fbcef;
#prosites-checkout-table .pricing-column li.summary .plan-price.original-amount {
background-color: white;
color: #3FBCEF;
font-size: 20px;
border-radius: 50% !important;
width: 100px;
margin: 0 auto;
height: 100px;
line-height: 100px;
@media only screen and (max-width: 399px) {
#prosites-checkout-table .pricing-column li.summary .plan-price.original-amount {
width: 70px;
height: 70px;
line-height: 70px;
font-size: 14px;
#prosites-checkout-table .pricing-column .summary .price .period {
padding-top: 18px;
font-size: 16px;
#prosites-checkout-table ul.pricing-column li.button-box {
border: 6px solid #3fbcef;
border-top-width: 0;
#prosites-checkout-table .pricing-column .summary .level-summary {
font-size: 16px;
color: #3fbcef;
font-weight: bold;
#prosites-checkout-table .pricing-column button.choose-plan-button.register-new {
padding: 0;
background-color: #3fbcef;
border-width: 0px 0px 4px 0px;
border-color: #2A86B1;
text-transform: uppercase;
font-size: 18px;
font-weight: bold;