@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);

/* GLOBAL STYLES
================================*/

.pricingcontent {width: auto; margin: auto; height: auto;}

/* PRICING TABLE
================================*/

.pricing-table {width: 100%; margin-top: 2em; margin-bottom: 2em; padding: 0; list-style: none;	float: left; position: relative; background: #036; position: relative; -o-transition: all .3s linear; -moz-transition: all .3s linear;	-webkit-transition: all .3s linear; transition: all .3s linear;}

.pricing-table li {width: 100%;	float: left; color: #EEE; font-family: 'Lato', Calibri, Arial, sans-serif; text-align: center; box-sizing:border-box; -moz-box-sizing:border-box;  -webkit-box-sizing:border-box;}

/* PLAN
================================*/
.pricing-table .plan {padding: 1em; height: 4em; color: #f0f0f0; font-size: 1em; font-weight: 400; font-family: 'Open Sans', sans-serif; background: #333;}

/* PRICE
================================*/

.pricing-table .table-price {padding: 1em; font-size: 1.25em; color: #f0f0f0; background: #09F;}
.pricing-table .table-price .month {font-size: 1em;}
.pricing-table .table-price .dollar {font-size: 1em;}

/* DETAILS
================================*/

.pricing-table .detail {padding: 1em 1.5em; font-size: 0.7em; font-weight: 300; position: relative; border-top: solid 1px #09F; }
.pricing-table .detail strong {font-weight: 700;}

/* SIGN UP BUTTON
================================*/

.pricing-table .sign-up {font-size: 1.2em; text-decoration: none;}

.pricing-table .sign-up a {width: 100%;	padding: 1em 0; display: inline-block;	font-size: 1em; text-decoration: none; text-transform: uppercase; color: #222; background: #555; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}

/* HOVER EFFECT
================================*/

.pricing-table:hover,
.pricing-table.active {-ms-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05); z-index: 10; box-shadow: 0 1px 10px #333;}

/* STYLES
================================*/

/* colour */
.blue .plan{ border-bottom-color: #09F; background: #036; }
.blue .sign-up a { background: #09F; color: #FFF; }


/* RESPONSIVE DESIGN
================================ */

@media (min-width: 1px) and (max-width: 799px){.pricing-table {max-width: 100%;}}

@media (min-width: 800px) and (max-width: 1199px){.pricing-table {max-width: 50%;}}
@media (min-width: 1200px) and (max-width: 1920px){.pricing-table {max-width: 33%;}}