<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<title>Waters Corporation</title>
	
<link rel="preload" href="https://use.typekit.net/fko8taa.css" as="style" onload="this.onload=null;this.rel=&#39;stylesheet&#39;"/>
	<style>

		body { 
			font-family: acumin-pro,arial,sans-serif;
			font-weight: 300;
			display: grid;
			justify-self: center;
			color: #2d3439;
			padding: 0;
			margin: 0;
		}
		h1 {
			font-weight: 300;
			color: #2d3439;
		}
		header {
			border-bottom: 1px solid #c6cdd2;
			padding: 1rem 1rem;
			display: grid;
			grid-template-columns: minmax(auto, 900px);
			justify-content: center;
		}
		header .container {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0;
			margin: 0;
		}
		
		footer {
			background: #515b63;
			color: #fff;
			padding: 2rem 1rem;
			display: grid;
			grid-template-columns: minmax(auto, 900px);
			justify-content: center;
		}
				.main-head {
		grid-area: header;
		}
		main {
		grid-area: main;
		}
		aside {
			grid-area: side;
			 display: flex;
  align-items: center;
  justify-content: center;
		}
		article {
			grid-area: content;
			padding: 2rem;
		}
		.main-footer {
		grid-area: footer;
		}

		body {
  display: grid;
  gap: 20px;
  grid-template-areas:
    "header"
	"main"
    "footer";
}

@media (min-width: 600px) {
  body {
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
      "header  header"
      "main main"
      "footer  footer";
  }
  main {
		
			padding: 1rem 1rem;
			display: grid;
			grid-template-columns: minmax(auto, 900px);
			justify-content: center;
		}
		main .container {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0;
			margin: 0;
		}
		
 
}



	</style>
  </head>

  <body>
		
  <header class="main-head">
	<div class="container">
			  	<div class="waters-logo">
					<img src="/waters-logo-black.svg" width="127" alt="Waters Corporation" />
				</div>
				<div class="ta-logo">
					  <img src="/waters-ta.svg" width="220" alt="TA Instruments" />
				</div>
				
			  	
			  </div></header>
			<main>
				<div class="container">
					<aside class="side"><img src="/splash-icon.jpg" alt="science icon" style="max-width: 300px;" /></aside>
					<article class="content">
						<h1>We're sorry, this will require some analysis.</h1>
						<p>Waters is currently experiencing technical issues, and our website is temporarily unavailable. Our dedicated team is actively working to resolve the situation as quickly as possible. We apologize for any inconvenience this may cause and appreciate your patience and understanding. </p>
								<p>We will post any necessary updates here.</p>
					</article>
				</div>
			</main>
 
			 
  
  <footer class="main-footer">© 2024 Waters Corporation. All Rights Reserved.</footer>


	  
	
	

	
  </body>
</html>
