.clear, .clearfix { clear: both; }
.clear:after, .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
div, span, ul, li, img, header, nav, footer, main, article, aside, section { position: relative; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }


html, body { position: relative; width: 100%; height: 100%; padding: 0 0; margin: 0 0; }
body { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; background: url(images/bg-water.jpg) no-repeat 50% 50%; background-size: cover; -webkit-background-size: cover; font-size: 1.1rem; line-height: 1.7rem; font-weight: 400; font-family: 'Figtree', sans-serif; color: #f6f3e9; text-shadow: 1px 1px 0 rgba(0,0,0,0.1); }

	a, a:visited { text-decoration: none; color: #fff; }
	a:active, a:hover { text-decoration: none; color: #fff; }
	
	
	h1, h2, h3, h4, h5, h6 { margin: 0 0 40px; color: #f6f3e9; letter-spacing: 0px; line-height: 1em; font-weight: 400; font-family: 'Libre Baskerville', serif; text-shadow: 2px 2px 0 rgba(0,0,0,0.2); }



#container { width: 90%; max-width: 700px; margin: 0 auto; text-align: center; }

	#container img { display: block; margin: 0 auto 15px; max-width: 300px; height: auto; }
	#container .intro-text { display: block; margin-bottom: 20px; text-transform: uppercase; font-size: 1rem; font-weight: 400; color: #60a0a4; }
	#container h1 { font-size: 4rem; line-height: 4.5rem; }
		#container h1 span { color: #bbe2d5; }
	#container h2 { font-size: 2.4rem; line-height: 2rem; }
	#container .hr { display: block; margin: 30px auto; width: 100px; height: 1px; background: #f6f3e9; }
	
	
	
@media only screen and ( max-width: 479px ) {
	body { font-size: 1rem; }
	#container { width: 90%; }
		#container img { max-width: 170px; }
		#container h1 { font-size: 2rem; line-height: 2.4rem; }
		#container .intro-text { font-size: 0.8rem; }
		#container .hr { margin: 15px auto; }
		h1, h2, h3, h4, h5, h6 { margin: 0 0 20px; }
}