/* 
* Project Name: Responsive Pricing Table - Pure CSS
* Author: Shy Design
* Version: 1.4
*/

/* Basic Styles -------------------------------------------- */
	body {
		background: url(../img/pt_8.png);
  }
  
/* Header ---------------------------------------------------- */	
	header {
		text-align: center;
		background: url(../img/pt_8.png) 39px 0px;
		border: 1px solid #ccc;
		float: left;
		position: relative;
		top: -2px;
		float: left;
		
		/* cross browser transition */
		transition: all 500ms;
		-webkit-transition: all 500ms;
		-moz-transition: all 500ms;
		-ms-transition: all 500ms;
		-o-transition: all 500ms;
	}
	header:hover {
		background: url(../img/pt_8.png) 39px -50px;	
	}
	header::before,
	header::after {
		content:'';
		position: absolute;
		left: 4px;
		right: 4px;
		bottom: 35px;
		top: 0;
		z-index: -2;
		border: 1px solid #ccc;
		
		/* cross browser box-shadow */
		box-shadow: 0 12px 10px rgba(0, 0, 0, .3);
		-webkit-box-shadow: 0 12px 5px rgba(0, 0, 0, .3);   
		-moz-box-shadow: 0 12px 5px rgba(0, 0, 0, .3);
		-ms-box-shadow: 0 12px 5px rgba(0, 0, 0, .3);
		-o-box-shadow: 0 12px 5px rgba(0, 0, 0, .3);
		
		/* cross browser transition */
		transition: all 500ms;
		-webkit-transition: all 500ms;
		-moz-transition: all 500ms;
		-ms-transition: all 500ms;
		-o-transition: all 500ms;
	}
	header:hover::before,
	header:hover::after{
		top: 0;
		left: 12px;
		right: 12px;
		bottom: 35px;
		
		/* cross browser box-shadow */
		box-shadow: 0 20px 10px rgba(0, 0, 0, .3);	
		-webkit-box-shadow: 0 20px 10px rgba(0, 0, 0, .3);
		-moz-box-shadow: 0 20px 10px rgba(0, 0, 0, .3);
		-ms-box-shadow: 0 20px 10px rgba(0, 0, 0, .3);
		-o-box-shadow: 0 20px 10px rgba(0, 0, 0, .3);
		
	}
	header::after {
		/* cross browser transform */ 
		-webkit-transform: rotate(3deg);    
		-moz-transform: rotate(3deg);   
		-o-transform: rotate(3deg);
		-ms-transform: rotate(3deg);
		transform: rotate(3deg);	
	}
	header::before {
		/* cross browser transform */
		-webkit-transform: rotate(-3deg);    
		-moz-transform: rotate(-3deg);   
		-o-transform: rotate(-3deg);
		-ms-transform: rotate(-3deg);
		transform: rotate(-3deg);	
	}
	header h1 {
		padding: 30px 0;
		font-size: 30px;
		font-weight: bolder;
		text-shadow: 0 2px 1px rgba(180,180,180,.5);
	}
/* Pricing Table ---------------------------------------------------- */	
	#pricing_table_1 {
		margin: 100px 0;
		text-align: center;
	}
	#pricing_table_1 .plan {
		text-align: center;
		position: relative;
		margin: 10px;
		
		/* cross browser border-radius */
		border-radius: 3px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		-ms-border-radius: 3px;
		-0-border-radius: 3px;
	}
	#pricing_table_1 .plan:after {
		content: "";
		position: absolute;
		z-index: -1;
		top: 91%;
		right: 6px;
		left: -6px;
		bottom: 22px;
		width: 90%;
		
		/* cross browser box-shadow */
		box-shadow: 11px 27px 5px rgba(141, 139, 139, 0.37);
		-webkit-box-shadow: 11px 27px 5px rgba(141, 139, 139, 0.37);
		-moz-box-shadow: 11px 27px 5px rgba(141, 139, 139, 0.37);
		-ms-box-shadow: 11px 27px 5px rgba(141, 139, 139, 0.37);
		-o-box-shadow: 11px 27px 5px rgba(141, 139, 139, 0.37);
		
		/* cross browser transform */
		transform: rotate(3deg);
		-webkit-transform: rotate(3deg);
		-moz-transform: rotate(3deg);
		-ms-transform: rotate(3deg);
		-o-transform: rotate(3deg);	
	}
	#pricing_table_1 .most_popular {
		top: -13px;
		margin: -10px;
		z-index: 2;
		
		/* cross browser border-radius */
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-ms-border-radius: 5px;
		-o-border-radius: 5px;
		
		/* cross browser box-shadow */
		box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
		-webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
		-moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
		-ms-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
		-o-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
		
		/* cross browser transition */
		transition: all .5s;
		-webkit-transition: all .5s;
		-moz-transition: all .5s;
		-ms-transition: all .5s;
		-o-transition: all .5s;
	}
/* Top Section ----------------------------------------------- */
	#pricing_table_1 .header {
		padding: 30px 0;
		border: 1px solid #ccc;
		
		/* cross browser linear-gradient */
		background-image: -webkit-linear-gradient(top, rgba(255,255,255,.8) 40%, rgba(255,255,255,.5) 60%);
		background-image:    -moz-linear-gradient(top, rgba(255,255,255,.8) 40%, rgba(255,255,255,.5) 60%); /* For Fx 3.6 to Fx 15 */
		background-image:     -ms-linear-gradient(top, rgba(255,255,255,.8) 40%, rgba(255,255,255,.5) 60%); /* For IE 10 Platform Previews and Consumer Preview */
		background-image:      -o-linear-gradient(top, rgba(255,255,255,.8) 40%, rgba(255,255,255,.5) 60%); /* For Opera 11.1 to 12.0 */ 
		background-image:         linear-gradient(top, rgba(255,255,255,.8) 40%, rgba(255,255,255,.5) 60%); /* Standard syntax; must be the last statement */
	}
	#pricing_table_1 .header p{
		font-size: 30px;
		line-height: 50px;
		font-weight: bold;
	}
	#pricing_table_1 .header span{
		font-style: italic;
		color: rgb(153, 153,153);
		line-height: -100px;
	}
	#pricing_table_1 .header span + span{
		position: absolute;
		top: -50px;
		left: 0;
		font-style: italic;
		font-size: 35px;
		font-style: normal;
		color: rgb(165, 165, 165);
		text-shadow: 0px -1px 0px rgba(0, 0, 0, .5);
		
		/* cross browser transition */
		transition: all .5s;
		-webkit-transition: all .5s;
		-moz-transition: all .5s;
		-ms-transition: all .5s;
		-o-transition: all .5s;
	}
/* Middle Section ----------------------------------------------- */
	#pricing_table_1 .duration {
		padding: 50px 0;
		position: relative;
		z-index: 1;
	}
	#pricing_table_1 .duration::before,
	#pricing_table_1 .duration::after {
		position: absolute;
		content: '';
		top: -3px;
		left: -7px;
		right: -7px;
		bottom: -1px;
		z-index: -1;
		-webkit-backface-visibility: hidden; /* webkit fix for rough lines while rotate */
		
		/* cross browser linear-gradient */
		background-image: -webkit-linear-gradient(top, rgba(240, 240, 0, .5) 40%, rgba(240, 240, 0, .3) 60%);
		background-image:    -moz-linear-gradient(top, rgba(240, 240, 0, .5) 40%, rgba(240, 240, 0, .3) 60%); /* For Fx 3.6 to Fx 15 */
		background-image:     -ms-linear-gradient(top, rgba(240, 240, 0, .5) 40%, rgba(240, 240, 0, .3) 60%); /* For IE 10 Platform Previews and Consumer Preview */
		background-image:      -o-linear-gradient(top, rgba(240, 240, 0, .5) 40%, rgba(240, 240, 0, .3) 60%); /* For Opera 11.1 to 12.0 */ 
		background-image:         linear-gradient(top, rgba(240, 240, 0, .5) 40%, rgba(240, 240, 0, .3) 60%); /* Standard syntax; must be the last statement */
	
		/* cross browser box-shadow */
		box-shadow: 0px 0px 5px rgb(139, 145, 0);
		-webkit-box-shadow: 0px 0px 5px rgb(139, 145, 0);
		-moz-box-shadow: 0px 0px 5px rgb(139, 145, 0);
		-ms-box-shadow: 0px 0px 5px rgb(139, 145, 0);
		-o-box-shadow: 0px 0px 5px rgb(139, 145, 0);
	}
	#pricing_table_1 .duration::before {
		/* cross browser transform */
		-webkit-transform: rotate(-3deg);    
		-moz-transform: rotate(-3deg);   
		-o-transform: rotate(-3deg);
		-ms-transform: rotate(-3deg);
		transform: rotate(-3deg);	
	}
	#pricing_table_1 .duration::after {
		/* cross browser transform */
		-webkit-transform: rotate(-1deg);    
		-moz-transform: rotate(-1deg);   
		-o-transform: rotate(-1deg);
		-ms-transform: rotate(-1deg);
		transform: rotate(-1deg);	
	}
	#pricing_table_1 .duration .price  {
		font-size: 50px;
		font-weight: bolder;
		color: rgb(255,255,255);
	}
	#pricing_table_1 .duration .price span {
		font-size: 20px;
	}
/* Bottom Section ----------------------------------------------- */
	#pricing_table_1 .speci {
		background: rgb(255,255,255);
		border: 1px solid #ccc;
	}
  #pricing_table_1 ul.unstyled {
		margin-bottom: -1px;
	}
	#pricing_table_1 .speci li {
		padding: 10px 10px;
		font-size: 13px;
		border-bottom: 1px solid #ccc;
		text-align: left;
		
		/* cross-browser animation */
		-webkit-animation-name: fadeInDown;
		-moz-animation-name: fadeInDown;
		-o-animation-name: fadeInDown;
		animation-name: fadeInDown;
	}
	/* animation on every li start from here --------------------------------------------------------- */
	#pricing_table_1 .speci li:nth-child(1) {
		-webkit-animation-duration: 1s;
	    -moz-animation-duration: 1s;
	    -ms-animation-duration: 1s;
	    -o-animation-duration: 1s;
	    animation-duration: 1s;
	}
	#pricing_table_1 .speci li:nth-child(2) {
		-webkit-animation-duration: 2s;
	    -moz-animation-duration: 2s;
	    -ms-animation-duration: 2s;
	    -o-animation-duration: 2s;
	    animation-duration: 2s;
	}
	#pricing_table_1 .speci li:nth-child(3) {
		-webkit-animation-duration: 3s;
	    -moz-animation-duration: 3s;
	    -ms-animation-duration: 3s;
	    -o-animation-duration: 3s;
	    animation-duration: 3s;
	}
	#pricing_table_1 .speci li:nth-child(4) {
		-webkit-animation-duration: 4s;
	    -moz-animation-duration: 4s;
	    -ms-animation-duration: 4s;
	    -o-animation-duration: 4s;
	    animation-duration: 4s;
	}
	#pricing_table_1 .speci li:nth-child(5) {
		-webkit-animation-duration: 5s;
	    -moz-animation-duration: 5s;
	    -ms-animation-duration: 5s;
	    -o-animation-duration: 5s;
	    animation-duration: 5s;
	}
	#pricing_table_1 .speci li:nth-child(6) {
		-webkit-animation-duration: 6s;
	    -moz-animation-duration: 6s;
	    -ms-animation-duration: 6s;
	    -o-animation-duration: 6s;
	    animation-duration: 6s;
	}
	#pricing_table_1 .speci li:nth-child(7) {
		-webkit-animation-duration: 7s;
	    -moz-animation-duration: 7s;
	    -ms-animation-duration: 7s;
	    -o-animation-duration: 7s;
	    animation-duration: 7s;
	}
	#pricing_table_1 .speci li:nth-child(8) {
		-webkit-animation-duration: 8s;
	    -moz-animation-duration: 8s;
	    -ms-animation-duration: 8s;
	    -o-animation-duration: 8s;
	    animation-duration: 8s;
	}
	#pricing_table_1 .speci li:nth-child(9) {
		-webkit-animation-duration: 9s;
	    -moz-animation-duration: 9s;
	    -ms-animation-duration: 9s;
	    -o-animation-duration: 9s;
	    animation-duration: 9s;
	}
	#pricing_table_1 .speci li:nth-child(10) {
		-webkit-animation-duration: 10s;
	    -moz-animation-duration: 10s;
	    -ms-animation-duration: 10s;
	    -o-animation-duration: 10s;
	    animation-duration: 10s;
	}

/* icon font usage ------------------------------------------------------*/
	#pricing_table_1 .speci li::before {
		font-family: 'ModernPictogramsNormal';
		content: '';
		font-size: 30px;
		padding: 5px;
		vertical-align: -20%;
	}
	#pricing_table_1 .speci li:nth-child(1)::before {
		content: '}';
	}
	#pricing_table_1 .speci li:nth-child(2)::before {
		content: '(';
	}
	#pricing_table_1 .speci li:nth-child(3)::before {
		content: '3';
	}
	#pricing_table_1 .speci li:nth-child(4)::before {
		content: '4';
	}
	#pricing_table_1 .speci li:nth-child(5)::before {
		content: '@';
	}
	#pricing_table_1 .speci li:nth-child(6)::before {
		content: '6';
	}
	#pricing_table_1 .signup_1 {
		position: absolute;
		right: 0;
		top: 10px;
		color: rgb(100,100,100);
		font-size: 21px;
		font-weight: bold;
		border: 1px solid rgb(221, 221, 221);
		padding: 10px;
		z-index: 10px;
		background: rgb(255,255,255);
	}
	#pricing_table_1 .signup_1:hover {
		color: rgb(0,0,0);
	}
	#pricing_table_1 .signup_1::before {
		position: absolute;
		content: '';
		top:3px;
		left: 3px;
		right: 3px;
		bottom: 3px;
		z-index: 1;
		border: 1px solid #ddd;
		
		/* cross browser box-shadow */
		box-shadow: 0px 1px 5px rgba(0,0,0,.5);
		-webkit-box-shadow: 0px 1px 5px rgba(0,0,0,.5);
		-moz-box-shadow: 0px 1px 5px rgba(0,0,0,.5);
		-ms-box-shadow: 0px 1px 5px rgba(0,0,0,.5);
		-o-box-shadow: 0px 1px 5px rgba(0,0,0,.5);
	}
/* Footer ----------------------------------------------- */
	footer{
		background: url(../img/pt_8.png) 39px -50px;
		border: 1px solid #ccc;
		text-align: center;
		float: left;
		position: relative;
		bottom: 0px;
		height: 80px;
		
		/* cross browser transition */
		transition: all 500ms;
		-webkit-transition: all 500ms;
		-moz-transition: all 500ms;
		-ms-transition: all 500ms;
		-o-transition: all 500ms;
	}
	footer:hover {
		background: url(../img/pt_8.png) 39px 0px;
	}
	footer::before,
	footer::after {
		content:'';
		position: absolute;
		background: #fff;
		bottom: 0px;
		top: 0px;
		z-index: -2;
		border: 1px solid #ccc;
		
		/* cross browser transition */
		transition: all 500ms;
		-webkit-transition: all 500ms;
		-moz-transition: all 500ms;
		-ms-transition: all 500ms;
		-o-transition: all 500ms;
	}
	footer::after {
		left: 4px;
		right: 4px;
		top: -3px;	
	}
	footer::before {
		left: 8px;
		right: 8px;
		top: -5px;
		
		/* cross browser box-shadow */
		box-shadow: 0 -2px 10px rgba(0,0,0,.2);
		-webkit-box-shadow: 0 -2px 10px rgba(0,0,0,.2);
		-moz-box-shadow: 0 -2px 10px rgba(0,0,0,.2);
		-ms-box-shadow: 0 -2px 10px rgba(0,0,0,.2);
		-o-box-shadow: 0 -2px 10px rgba(0,0,0,.2);
	}
	footer:hover::before {
		/* cross browser box-shadow */
		box-shadow: 0 -5px 10px rgba(0,0,0,.2);
		-webkit-box-shadow: 0 -5px 10px rgba(0,0,0,.2);
		-moz-box-shadow: 0 -5px 10px rgba(0,0,0,.2);
		-ms-box-shadow: 0 -5px 10px rgba(0,0,0,.2);
		-o-box-shadow: 0 -5px 10px rgba(0,0,0,.2);
	}
	footer p {
		padding: 30px 0;
		font-size: 20px;
		font-weight: bolder;
		text-shadow: 0 2px 1px rgba(180,180,180,.5);
	}

/* Media Queries ----------------------------------------------------------------- */

/* Large desktop */
@media (min-width: 1200px) { 
  #pricing_table_1 .header span + span {
    margin: 0 0 0 31px;
  }
}
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 
  #pricing_table_1 .header span + span {
    margin: 0 0 0 5px;
    font-size: 25px;
  }
}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
  #pricing_table_1 .header span + span {
    margin: 0 0 0 85px;
    font-size: 75px;
  }
  #pricing_table_1 .plan {
    margin-bottom: 130px;
  }
}
 
/* Landscape phones and down */
@media (max-width: 480px) {
  #pricing_table_1 .header span + span {
    margin: 0 0 0 40px;
    font-size: 35px;
  }
}
	
/* Font Face ----------------------------------------------------------------- */
	.font_face {
		font-family: 'ModernPictogramsNormal';
	}
	@font-face {
		font-family: 'ModernPictogramsNormal';
		src: url('font/modernpics-webfont.eot');
		src: url('font/modernpics-webfont.eot?#iefix') format('embedded-opentype'),
			 url('font/modernpics-webfont.woff') format('woff'),
			 url('font/modernpics-webfont.ttf') format('truetype'),
			 url('font/modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
		font-weight: normal;
		font-style: normal;
	}