<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Revive Our Hearts</title>
		<style type="text/css">
		 * {
			 box-sizing: border-box;
			 transition: all 0.25s linear;
		 }
		 
		 body {
			 margin: 0;
			 background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url('https://reviveourhearts.s3.us-east-1.amazonaws.com/images/maintenance/bench-back-soon.jpg');
			 background-size: cover;
			 background-position: center center;
			 color: white;
			 font-family: 'brandon-grotesque', sans-serif;
			 font-size: 1.2rem;
		 }
		 #maintenance {
			 max-width: 550px;
			 max-width: 100%;
			 margin: 3rem auto 0;
			 text-align: center;
			 /*font-size: 1.2rem;*/
			 font-weight: 400;
		 }
		 #maintenance .worker {
			 width: 130px;
			 height: auto;
			 display: block;
			 margin: 7rem auto 5rem;
		 }
		 #maintenance h1 {
			 margin: 4rem auto 1.4rem;
			 font-weight: 700;
			 font-size: 2.5rem;
			 font-family: 'playfair-display', georgia, serif;

		 }
		 p {
			 font-size: 1.65rem;
			 line-height: 1.7;
			 opacity: .85;
		 }
		 @supports (display:flex) {
			 body {
				 height: 100vh;
				 display: flex;
				 align-items: center;
				 justify-content: center;
			 }
         #maintenance {
             margin-top: 0;
         }
		 }
		 @media (max-width: 460px) {
			 body {
				 padding: 1rem;
			 }
			 
         #maintenance .worker {
             width: 100px;
         }
		 }
		</style>
		<link rel="stylesheet" href="https://use.typekit.net/jsh0ewx.css"> 
	</head>
	<body>
		<div id="maintenance">
							<img src="https://reviveourhearts.s3.us-east-1.amazonaws.com/images/revive-our-hearts-logo.svg" alt="Revive Our Hearts" width="300">
			<h1>We'll be back in just a moment</h1>
			<p>The site is undergoing some quick maintenance.<br>Thanks for your patience!</p>
					</div>
	</body>
</html>
