<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width"/>

    <style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font-size: 100%;
			font-family: 'Avenir Next', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
			line-height: 1.65;
		}
		img {
			max-width: 100%;
			margin: 0 auto;
			display: block;
		}
		body,
		.body-wrap {
			width: 100% !important;
			height: 100%;
			-webkit-font-smoothing: antialiased;
			-webkit-text-size-adjust: none;
		}
		a {
			text-decoration: none;
		}
		.text-center {
			text-align: center;
		}
		.text-right {
			text-align: right;
		}
		.text-left {
			text-align: left;
		}
		.button {
			display: inline-block;
			color: white;
			background: #71bc37;
			padding: 5px 10px;
			font-weight: bold;
			border-radius: 4px;
		}
		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			margin-bottom: 20px;
			line-height: 1.25;
		}
		h1 {
			font-size: 32px;
		}
		h2 {
			font-size: 28px;
		}
		h3 {
			font-size: 24px;
		}
		h4 {
			font-size: 20px;
		}
		h5 {
			font-size: 16px;
		}
		p,
		ul,
		ol {
			font-size: 16px;
			font-weight: normal;
			margin-bottom: 20px;
		}
		.container {
			display: block !important;
			clear: both !important;
		}
		.container table {
			width: 100% !important;
			border-collapse: collapse;
		}
		.container .masthead {
			padding: 50px 0;
			background: #2c3e50;
			color: white;
		}
		.container .masthead h1 {
			margin: 0 auto !important;
			max-width: 90%;
			text-transform: uppercase;
		}
		.container .content {
			background: white;
			padding: 30px 35px;
		}
		.container .content.footer {
			background: none;
		}
		.container .content.footer p {
			margin-bottom: 0;
			color: #888;
			text-align: center;
			font-size: 14px;
		}
		.container .content.footer a {
			color: #888;
			text-decoration: none;
			font-weight: bold;
		}
		.alert {
			display: inline-block;
			margin: 20px auto;
			background: #fff;
			color: #EB2D30;
			padding: 10px 20px;
			border-radius: 4px;
		}
		.button.fb {
			background: #0066aa;
		}
		.button.tw {
			background: #4099FF;
		}
		.button.yt {
			background: #EB2D30;
		}
		.button-action {
			background: #2c3e50;
			display: block;
			color: white;
			padding: 10px;
			font-size: 20px;
			width: 200px;
			margin: 5px auto;
			font-weight: bold;
			border-radius: 4px;
			text-align: center;
			text-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
		}
		.button-action:hover{
			background: #71bc37;
		}
    </style>
</head>
<body>
	<table class="body-wrap">
		<tr>
			<td class="container">
				<table>
					<tr>
						<td align="center" class="masthead">
							<h1>Password Reset</h1>
						</td>
					</tr>
					<tr>
						<td class="content">
							<h2>Hi {{username}},</h2>
							<p>You recently request for password reset</p>
							<p>Please follow the link to reset your password.</p>
							<a href="{{link}}" class="button-action">Reset Password</a>
							<br />
							<p>	
								You can reach us via our support email at <a href="mailto:support@{{sitename}}.com">support@{{sitename}}.com</a> and our social platform
							</p>
							<hr />
							<br />
							<p>Thank you for Reaching us.</p>
							<div>Sent by <a href="http://{{sitename}}.com">{{sitename}} Support Team</a></div>
							<div><a href="mailto:support@{{sitename}}.com">support@{{sitename}}.com</a></div>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</body>
</html>