| 
						
						
							
								
							
						
						
					 | 
					 | 
					@ -60,6 +60,14 @@
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
						.action:hover { background-color:#4682b4; color:white}
 | 
					 | 
					 | 
					 | 
						.action:hover { background-color:#4682b4; color:white}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
						tr {font-family:sans-serif; font-size:14px;}
 | 
					 | 
					 | 
					 | 
						tr {font-family:sans-serif; font-size:14px;}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
						td {padding:4px; font-weight:lighter; padding:4px;}
 | 
					 | 
					 | 
					 | 
						td {padding:4px; font-weight:lighter; padding:4px;}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
						.gradient{
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							background-image: -ms-linear-gradient(top, #008080 -120%, #FFFFFF 50%, #005757 120%);
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							background-image: -moz-linear-gradient(top, #008080 -120%, #FFFFFF 50%, #005757 120%);
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							background-image: -o-linear-gradient(top, #008080 -120%, #FFFFFF 50%, #005757 120%);
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							background-image: -webkit-gradient(linear, left top, left bottom, color-stop(-120, #008080), color-stop(50, #FFFFFF), color-stop(120, #005757));
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							background-image: -webkit-linear-gradient(top, #008080 -120%, #FFFFFF 50%, #005757 120%);
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							background-image: linear-gradient(to bottom, #008080 -120%, #FFFFFF 50%, #005757 120%);
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
						}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
						@media only screen and (min-device-width: 320px){
 | 
					 | 
					 | 
					 | 
						@media only screen and (min-device-width: 320px){
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							table {width:99%}
 | 
					 | 
					 | 
					 | 
							table {width:99%}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							.medium-caption {font-size:14px}
 | 
					 | 
					 | 
					 | 
							.medium-caption {font-size:14px}
 | 
				
			
			
		
	
	
		
		
			
				
					| 
						
							
								
							
						
						
							
								
							
						
						
					 | 
					 | 
					@ -86,7 +94,7 @@
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					<div id="grid">
 | 
					 | 
					 | 
					 | 
					<div id="grid">
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
						<table align="center" style="border-color:transparent">
 | 
					 | 
					 | 
					 | 
						<table align="center" style="border-color:transparent">
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							<tr>
 | 
					 | 
					 | 
					 | 
							<tr>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
								<td style="width:50%">
 | 
					 | 
					 | 
					 | 
								<td style="width:60%">
 | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
									<div align="left" class="default"> 
 | 
					 | 
					 | 
					 | 
									<div align="left" class="default"> 
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
										<img src="{{context}}/static/img/logo-0.png" style="width:48px; margin:4px" class="left" style="margin:4px"> 
 | 
					 | 
					 | 
					 | 
										<img src="{{context}}/static/img/logo-0.png" style="width:48px; margin:4px" class="left" style="margin:4px"> 
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
										<div style="padding:8px">The Phi Technology
 | 
					 | 
					 | 
					 | 
										<div style="padding:8px">The Phi Technology
 | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					 | 
					@ -103,7 +111,9 @@
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
								</td>
 | 
					 | 
					 | 
					 | 
								</td>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							</tr>
 | 
					 | 
					 | 
					 | 
							</tr>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
						</table>
 | 
					 | 
					 | 
					 | 
						</table>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
						<table align="center" style="background-image:url(https://az616578.vo.msecnd.net/files/responsive/cover/main/desktop/2016/05/09/635983505329496433385654456_concert-audience.jpg)">
 | 
					 | 
					 | 
					 | 
						<table align="center">
 | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							<!-- style="background-image:url(https://az616578.vo.msecnd.net/files/responsive/cover/main/desktop/2016/05/09/635983505329496433385654456_concert-audience.jpg)"> -->
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							<tr >
 | 
					 | 
					 | 
					 | 
							<tr >
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
								<td colspan="{{ plans|length}}" align="center" class="border-bottom">
 | 
					 | 
					 | 
					 | 
								<td colspan="{{ plans|length}}" align="center" class="border-bottom">
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
									<div class="caption">{{app_name.replace('-',' ') }}</div>
 | 
					 | 
					 | 
					 | 
									<div class="caption">{{app_name.replace('-',' ') }}</div>
 | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					 | 
					@ -116,6 +126,9 @@
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
									{% for item in plans%}
 | 
					 | 
					 | 
					 | 
									{% for item in plans%}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
										<div class="left width-50 height-48 border-right border-bottom" style="margin:4px">
 | 
					 | 
					 | 
					 | 
										<div class="left width-50 height-48 border-right border-bottom" style="margin:4px">
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
											<div class="bold medium-caption">{{ item.metadata.info|safe }}</div>
 | 
					 | 
					 | 
					 | 
											<div class="bold medium-caption">{{ item.metadata.info|safe }}</div>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
											{% if 'note' in item.metadata %}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
												<div class="small" style="text-transform:capitalize; color:gray">{{item.metadata.note|safe}}</div>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
											{% endif %}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
											
 | 
					 | 
					 | 
					 | 
											
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
										</div>
 | 
					 | 
					 | 
					 | 
										</div>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
										<div class="left width-25 height-48 border-bottom" style="margin:4px">
 | 
					 | 
					 | 
					 | 
										<div class="left width-25 height-48 border-bottom" style="margin:4px">
 | 
				
			
			
		
	
	
		
		
			
				
					| 
						
							
								
							
						
						
						
					 | 
					 | 
					
 
 |