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

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
/* Basic Styles -------------------------------------------- */
	body {
		background: url(../img/pt_8.png);
		font: 16px/21px 'Trebuchet MS', Helvetica, sans-serif;
		color: #333333;
		-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
		-webkit-text-size-adjust: 100%;
	}
/* Links ------------------------------------------------- */
	a, a:visited { 
		color: #646464; 
		text-decoration: none; 
		outline: 0; 
	}
	a:hover, a:focus { 
		color: #000; 
	}
	p a, p a:visited { 
		line-height: inherit; 
	}

/* Misc ---------------------------------------------------- */
	/* > Utility */
	.remove-bottom { margin-bottom: 0 !important;}
	.half-bottom { margin-bottom: 10px !important;}
	.add-bottom { margin-bottom: 20px !important;}
	.center{text-align:center;}
	.left{text-align:left;}
	.right{text-align:right;}
	/* > Helpers */
	.hidden { display: none !important;}
	.show { display: block !important;}
	.border { border: 1px solid black !important;}
	.highlight { background: yellow !important; color: red !important;}

/* 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: 25px;
		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: 25px;
		
		/* 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;
		-o-border-radius: 3px;
	}
	#pricing_table_1 .plan:after {
		position: absolute;
		content: "";
		top: 91%;
		right: 4px;
		left: 4px;
		bottom: -3px;
		background: #fff;
		border: 1px solid #ddd;
		z-index: -1;	
	}
	#pricing_table_1 .plan:before {
		position: absolute;
		content: "";
		top: 80%;
		right: 6px;
		left: 6px;
		bottom: -5px;
		background: #fff;
		border: 1px solid #ddd;
		z-index: -2;
	}
	#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{
		background: rgb(110,110,110);
		position: absolute;
		top: -15px;
		left: 20%;
		font-style: italic;
		font-size: 20px;
		font-style: normal;
		padding: 3px;
		border: 1px solid #ddd;
		color: #fff;
		
		/* cross-browser transition */
		transition: 500ms all;
		-webkit-transition: 500ms all;
		-moz-transition: 500ms all;
		-ms-transition: 500ms all;
		-o-transition: 500ms all;
	}
	#pricing_table_1 .header span + span::before {
		position: absolute;
		content: "";
		bottom: -5px;
		right: -5px;
		left: -5px;
		top: -5px;
		z-index: 2;
		background: rgba(0,0,0,.1);
		border: 1px solid #ddd;
	}
/* 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(100, 100, 100, .5) 40%, rgba(100, 100, 100, .3) 60%);
		background-image:    -moz-linear-gradient(top, rgba(100, 100, 100, .5) 40%, rgba(100, 100, 100, .3) 60%); /* For Fx 3.6 to Fx 15 */
		background-image:     -ms-linear-gradient(top, rgba(100, 100, 100, .5) 40%, rgba(100, 100, 100, .3) 60%); /* For IE 10 Platform Previews and Consumer Preview */
		background-image:      -o-linear-gradient(top, rgba(100, 100, 100, .5) 40%, rgba(100, 100, 100, .3) 60%); /* For Opera 11.1 to 12.0 */ 
		background-image:         linear-gradient(top, rgba(100, 100, 100, .5) 40%, rgba(100, 100, 100, .3) 60%); /* Standard syntax; must be the last statement */
	
		/* cross browser box-shadow */
		box-shadow: 0px 0px 5px rgb(0, 0, 0);
		-webkit-box-shadow: 0px 0px 5px rgb(0, 0, 0);
		-moz-box-shadow: 0px 0px 5px rgb(0, 0, 0);
		-ms-box-shadow: 0px 0px 5px rgb(0, 0, 0);
		-o-box-shadow: 0px 0px 5px rgb(0, 0, 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 .speci li {
		padding: 10px 10px;
		font-size: 13px;
		border-bottom: 1px solid #ccc;
		text-align: left;
		
		/* cross-browser animation */
		-webkit-backface-visibility: visible !important;
		-webkit-animation-name: flipInY;
		-moz-backface-visibility: visible !important;
		-moz-animation-name: flipInY;
		-ms-backface-visibility: visible !important;
		-ms-animation-name: flipInY;
		-o-backface-visibility: visible !important;
		-o-animation-name: flipInY;
		backface-visibility: visible !important;
		animation-name: flipInY;
		
		-webkit-animation-fill-mode: both;
		-moz-animation-fill-mode: both;
		-ms-animation-fill-mode: both;
	    -o-animation-fill-mode: both;
	    animation-fill-mode: both;	
	}
	/* 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;
	}
	
	@-webkit-keyframes flipInY {
		0% {
			-webkit-transform: perspective(400px) rotateY(90deg);
			opacity: 0;
			background: rgba(100, 100, 100, .5)
		}
		
		40% {
			-webkit-transform: perspective(400px) rotateY(-10deg);
		}
		
		70% {
			-webkit-transform: perspective(400px) rotateY(10deg);
		}
		
		100% {
			-webkit-transform: perspective(400px) rotateY(0deg);
			opacity: 1;
		}
	}
	@-moz-keyframes flipInY {
		0% {
			-moz-transform: perspective(400px) rotateY(90deg);
			opacity: 0;
			background: rgba(100, 100, 100, .5)
		}
		
		40% {
			-moz-transform: perspective(400px) rotateY(-10deg);
		}
		
		70% {
			-moz-transform: perspective(400px) rotateY(10deg);
		}
		
		100% {
			-moz-transform: perspective(400px) rotateY(0deg);
			opacity: 1;
		}
	}
	@-ms-keyframes flipInY {
		0% {
			-ms-transform: perspective(400px) rotateY(90deg);
			opacity: 0;
			background: rgba(100, 100, 100, .5)
		}
		
		40% {
			-ms-transform: perspective(400px) rotateY(-10deg);
		}
		
		70% {
			-ms-transform: perspective(400px) rotateY(10deg);
		}
		
		100% {
			-ms-transform: perspective(400px) rotateY(0deg);
			opacity: 1;
		}
	}
	@-o-keyframes flipInY {
		0% {
			-o-transform: perspective(400px) rotateY(90deg);
			opacity: 0;
			background: rgba(100, 100, 100, .5)
		}
		
		40% {
			-o-transform: perspective(400px) rotateY(-10deg);
		}
		
		70% {
			-o-transform: perspective(400px) rotateY(10deg);
		}
		
		100% {
			-o-transform: perspective(400px) rotateY(0deg);
			opacity: 1;
		}
	}
	@keyframes flipInY {
		0% {
			transform: perspective(400px) rotateY(90deg);
			opacity: 0;
			background: rgba(100, 100, 100, .5)
		}
		
		40% {
			transform: perspective(400px) rotateY(-10deg);
		}
		
		70% {
			transform: perspective(400px) rotateY(10deg);
		}
		
		100% {
			transform: perspective(400px) rotateY(0deg);
			opacity: 1;
		}
	}
/* 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(2)::before {
		content: '}';
	}
	#pricing_table_1 .speci li:nth-child(3)::before {
		content: '(';
	}
	#pricing_table_1 .speci li:nth-child(4)::before {
		content: '3';
	}
	#pricing_table_1 .speci li:nth-child(5)::before {
		content: '4';
	}
	#pricing_table_1 .speci li:nth-child(6)::before {
		content: '@';
	}
	#pricing_table_1 .speci li:nth-child(7)::before {
		content: '6';
	}
	#pricing_table_1 li:first-child {
		text-align: center;
		font-size: 20px;
		
		/* cross browser linear-gradient */
		background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .15) 50%, rgba(0, 0, 0, .1) 70%);
		background-image:    -moz-linear-gradient(top, rgba(0, 0, 0, .15) 50%, rgba(0, 0, 0, .1) 70%); /* For Fx 3.6 to Fx 15 */
		background-image:     -ms-linear-gradient(top, rgba(0, 0, 0, .15) 50%, rgba(0, 0, 0, .1) 70%); /* For IE 10 Platform Previews and Consumer Preview */
		background-image:      -o-linear-gradient(top, rgba(0, 0, 0, .15) 50%, rgba(0, 0, 0, .1) 70%); /* For Opera 11.1 to 12.0 */ 
		background-image:         linear-gradient(top, rgba(0, 0, 0, .15) 50%, rgba(0, 0, 0, .1) 70%); /* Standard syntax; must be the last statement */
	}
/* 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 ----------------------------------------------------------------- */

	
/* => Smaller than standard 960 (devices and browsers) ------- */
	@media only screen and (max-width: 959px) {
		
	}

/* => Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		#pricing_table_1 .header span + span {
			left: 14%;
		}
	}

/* => All Mobile Sizes (devices and browser) ---------------- */
	@media only screen and (max-width: 767px) { 
		header::before,
		header::after {
			content:'';
			position: absolute;
			left: 4px;
			right: 4px;
			bottom: 40px;
			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 10px rgba(0, 0, 0, .3);   
			-moz-box-shadow: 0 12px 10px rgba(0, 0, 0, .3);
			-ms-box-shadow: 0 12px 10px rgba(0, 0, 0, .3);
			-o-box-shadow: 0 12px 10px 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{	
			left: 12px;
			right: 12px;
			bottom: 25px;
			top: 0;
			
			/* 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);
		}
	}	

/* => Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		header::before,
		header::after {
			border: 1px solid #ccc;
			
			/* cross browser box-shadow */
			box-shadow: 0 40px 10px rgba(0, 0, 0, .3);   
			-webkit-box-shadow: 0 40px 10px rgba(0, 0, 0, .3);    
			-moz-box-shadow: 0 40px 10px rgba(0, 0, 0, .3); 
			-ms-box-shadow: 0 40px 10px rgba(0, 0, 0, .3); 
			-o-box-shadow: 0 40px 10px rgba(0, 0, 0, .3); 
			
			/* cross browser transition */
			-webkit-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{
			/* cross browser box-shadow */
			box-shadow: 0 25px 10px rgba(0, 0, 0, .3);   
			-webkit-box-shadow: 0 25px 10px rgba(0, 0, 0, .3);   
			-moz-box-shadow: 0 25px 10px rgba(0, 0, 0, .3);
			-ms-box-shadow: 0 25px 10px rgba(0, 0, 0, .3);
			-o-box-shadow: 0 25px 10px rgba(0, 0, 0, .3);
						
		}
		header h1 {
			font-size: 22px;
		}
		footer::before,
		footer::after {
			box-shadow: 0 -10px 10px rgba(0, 0, 0, .3);
			-webkit-box-shadow: 0 -10px 10px rgba(0, 0, 0, .3);
			-moz-box-shadow: 0 -10px 10px rgba(0, 0, 0, .3);
			-ms-box-shadow: 0 -10px 10px rgba(0, 0, 0, .3);
			-o-box-shadow: 0 -10px 10px rgba(0, 0, 0, .3);
		}
		#pricing_table_1 .plan {
			margin: 50px 0;
		}
		#pricing_table_1 .header span + span {
			left: 33%;
		}
	}

/* => Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		header::before,
		header::after {
			border: 1px solid #ccc;
			
			/* cross browser box-shadow */
			box-shadow: 0 40px 10px rgba(0, 0, 0, .3);
			-webkit-box-shadow: 0 40px 10px rgba(0, 0, 0, .3);  
			-moz-box-shadow: 0 40px 10px rgba(0, 0, 0, .3);
			-ms-box-shadow: 0 40px 10px rgba(0, 0, 0, .3);
			-o-box-shadow: 0 40px 10px rgba(0, 0, 0, .3);
			
			/* cross browser transition */
			-webkit-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{
			/* cross browser box-shadow */
			box-shadow: 0 28px 10px rgba(0, 0, 0, .3);	
			-webkit-box-shadow: 0 28px 10px rgba(0, 0, 0, .3);	
			-moz-box-shadow: 0 28px 10px rgba(0, 0, 0, .3);	
			-ms-box-shadow: 0 28px 10px rgba(0, 0, 0, .3);	
			-o-box-shadow: 0 28px 10px rgba(0, 0, 0, .3);	
		}
		header h1 {
			font-size: 17px;
		}
		#pricing_table_1 .plan {
			margin: 50px 0;
		}
		#pricing_table_1 .header span + span {
			left: 27%;
		}
	}
	
/* 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;
	}