<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<title>Mensaje desde DeMente Games</title>
		
		
		<style>
			.logo, .titleblock, .linkbelow, .box, .footer, .space_footer{width:auto!important;display: block!important;}
			.giftcard{width: 572px; height: 365px; background-size: contain; background-repeat: no-repeat; color: #000; text-align: left; font-weight: 700;}

			.giftcard-20{background-image: url('https://dementegames.cl/img/giftcard-20-n.png');}
			.giftcard-30{background-image: url('https://dementegames.cl/img/giftcard-30-n.png');}
			.giftcard-50{background-image: url('https://dementegames.cl/img/giftcard-50-n.png');}
			.giftcard-80{background-image: url('https://dementegames.cl/img/giftcard-80-n.png');}
			.giftcard-100{background-image: url('https://dementegames.cl/img/giftcard-100-n.png');}


			.giftcard span{display: table-cell; width: 260px; text-align: center; vertical-align: middle;}
			.codigo-giftcard{padding-top: 154px; padding-left: 36px; height: 74px;}
			.codigo-giftcard span{font-size: 40px; height: 74px;}
			.monto-giftcard{padding-top: 46px; padding-left: 36px;}
			.monto-giftcard span{font-size: 58px; height: 80px;}

			@media only screen and (max-width: 300px){ 
				body {width:240px !important; margin:auto !important;}
				.table {width:225px !important; margin:auto !important;}
				span.title{font-size:16px !important; line-height: 23px !important}
				span.subtitle{font-size: 14px !important; line-height: 18px !important; padding-top:10px !important; display:block !important;}
				td.box p{font-size: 12px !important; font-weight: bold !important;}
				.logo a img{width: 200px;}
				.giftcard{width: 200px; height: 122px;}
				.giftcard span {width: 84px; margin-left: 12px;}
				.codigo-giftcard {padding-top: 52px; padding-left:12px; height: 24px;}
				.codigo-giftcard span {font-size: 14px; height: 21px;}
				.monto-giftcard { padding-top: 16px; padding-left: 12px; height:24px;}
				.monto-giftcard span {font-size: 20px; height: 22px;}
			}
			@media only screen and (min-width: 301px) and (max-width: 500px) {
				body {width:308px!important;margin:auto!important;}
				.table {width:285px!important;margin:auto!important;}
				span.title{font-size:22px !important;line-height: 28px !important}
				.logo a img{width: 280px;}
				.giftcard{width: 290px; height: 177px}
				.giftcard span {width: 125px; margin-left: 20px;}
				.codigo-giftcard {padding-top: 76px;padding-left: 18px;height:36px;}
				.codigo-giftcard span {font-size: 20px; height: 30px;}
				.monto-giftcard { padding-top: 20px;padding-left: 18px;}
				.monto-giftcard span {font-size: 32px; height: 40px;}
			}
			@media only screen and (min-width: 501px) and (max-width: 768px) {
				body {width:478px!important;margin:auto!important;}
				.table {width:450px!important;margin:auto!important;}
				span.title{font-size:26px !important;line-height: 30px !important}
				.giftcard{width: 452px; height: 276px}
				.giftcard span {width: 194px;}
				.codigo-giftcard {padding-top: 118px;padding-left: 28px;height: 56px}
				.codigo-giftcard span {font-size: 32px; height: 50px;}
				.monto-giftcard { padding-top: 32px; height: 62px;}
				.monto-giftcard span {font-size: 46px; height: 60px;}
			}
		</style>

	</head>
		<body style="-webkit-text-size-adjust:none;background-color:#fff;width:650px;font-family:Open-sans, sans-serif;color:#555454;font-size:13px;line-height:18px;margin:auto" >
			<table class="table table-mail" style="width: 100%; margin-top: 10px; -moz-box-shadow: 0 0 5px #afafaf; -webkit-box-shadow: 0 0 5px #afafaf; -o-box-shadow: 0 0 5px #afafaf; box-shadow: 0 0 5px #afafaf; filter: progid:DXImageTransform.Microsoft.Shadow(color=#afafaf,Direction=134,Strength=5);">
			<tbody>
				<tr>
					<td class="space" style="width: 20px; padding: 7px 0;"> </td>
					<td align="center" style="padding: 7px 0;">
					<table class="table" bgcolor="#ffffff" style="width: 100%;">
						<tbody>
							<tr>
								<td align="center" class="logo" style="border-bottom: 4px solid #333333; padding: 7px 0;">
									<a title="{shop_name}" href="https://dementegames.cl" style="color: #337ff1;"> 
										<img src="https://dementegames.cl/img/demente-games-logo_mail-1671638719.jpg" alt="DeMente Games" />
									</a>
								</td>
							</tr>
							<tr>
								<td align="center" class="titleblock" style="padding: 7px 0;">
									<span size="2" face="Open-sans, sans-serif" color="#555454" style="color: #555454; font-family: Open-sans, sans-serif; font-size: small;"> 
										<span class="title" style="font-weight: 500; font-size: 28px; text-transform: uppercase; line-height: 33px;">
											¡Feliz Navidad <?php echo $g['nombre_destinatario']; ?>!<br /><?php echo $g['nombre_remitente']; ?> te ha regalado una Giftcard!
										</span> 
									</span>
								</td>
							</tr>
							<tr>
								<td class="space_footer" style="padding: 0!important;"> </td>
							</tr>
							<tr>
								<td align="center" class="logo" style="padding: 7px 0;">
									<div class="giftcard <?php echo $gcClass; ?>">
									</div>
								</td>
							</tr>
							<tr>
								<td class="space_footer" style="padding: 0!important;"> </td>
							</tr>

							<tr>
								<td class="box" style="border: 1px solid #D6D4D4; background-color: #f8f8f8; padding: 20px 30px;">
									<p data-html-only="1" style="color: #337ff1; border-bottom: 1px solid #D6D4D4; margin: 3px 0 7px; text-transform: uppercase; font-weight: 500; font-size: 18px; padding-bottom: 10px;">
										Te han dejado el siguiente mensaje:
									</p>
									<span size="2" face="Open-sans, sans-serif" color="#777777" style="color: #555454; font-family: Open-sans, sans-serif; font-size: small;">
										<?php echo $g['mensaje']; ?>
									</span>
								</td>
							</tr>
							<tr>
								<td class="space_footer" style="padding: 0!important;"> </td>
							</tr>
							<tr>
								<td class="linkbelow" style="padding: 7px 10px;">
									<span size="2" face="Open-sans, sans-serif" color="#555454" style="color: #555454; font-family: Open-sans, sans-serif; font-size: small;"> 
										<span> 
											Puedes canjear esta tarjeta en <a href="https://dementegames.cl/" style="color: #337ff1; text-decoration: none;">www.dementegames.cl</a> o en una de nuestras tiendas presentando tu c&oacute;digo de descuento.<br/>
											Puedes ver la ubicaci&oacute;n y horario de nuestras tiendas en <a href="https://dementegames.cl/tiendas" style="color: #337ff1; text-decoration: none;">https://dementegames.cl/tiendas</a>
										</span> 
									</span>
								</td>
							</tr>
							<tr>
								<td class="linkbelow" style="padding: 7px 10px;">
									<span size="2" face="Open-sans, sans-serif" color="#555454" style="color: #555454; font-family: Open-sans, sans-serif;"> 
										C&oacute;digo de descuento: <strong><?php echo $g['codigo']?></strong><br />
										Monto de descuento: <strong><?php echo '$' . clp($g['monto']); ?></strong><br />
										Validez: <strong>1 a&ntilde;o</srtrong><br />
										<strong>No incluye despacho a domicilio</srtrong><br />
									</span>
								</td>
							</tr>
							<tr>
								<td class="space_footer" style="padding: 0!important;"> </td>
							</tr>
							<tr>
								<td class="footer" style="border-top: 4px solid #333333; padding: 7px 0;">
									<span>
										<a href="https://dementegames.cl" style="color: #337ff1;">DeMente Games</a>
									</span>
								</td>
							</tr>
						</tbody>
					</table>
				</td>
				<td class="space" style="width: 20px; padding: 7px 0;"> </td>
				</tr>
			</tbody>
		</table>
	</body>
</html>