@font-face {
	font-family: 'SancoaleSoftenedLight';
	src: url('../SancoaleSoftenedLight.otf') format('truetype'),
	url('../SancoaleSoftenedLight.eot') format('eot'),
	url('../SancoaleSoftenedLight.woff') format('woff'),
	url('../SancoaleSoftenedLight.svg') format('svg');
}

html { font-family: 'SancoaleSoftenedLight'; color: #5B6064; text-align: center; font-size: 1em; }
body { margin: 0; background-color: rgba(0,0,0,.1); }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: normal; }

h2, h3 { font-size: 200%; }
h2, h3, h4 { float: left; width: 100%; background-color: rgba(255,255,255,.75); }

h1 { color: #fff; font-size: 300%; text-shadow: 5px 5px 5px #333; }
h2 { margin-bottom: 20px; }
h3 { position: relative; margin: 0 0 50px; padding: 50px 0 50px; border-bottom: 2.5px solid rgba(0,0,0,.175); z-index: -1; }
h5 {  }
h6 { display: inline-block; font-size: 75%; margin: 0 10px; }

a { text-transform: uppercase; text-decoration: none; color: #333; }

p { float: left; width: 80%; margin: 50px 0 0; padding: 30px 10% 30px; border-top: 2.5px solid rgba(0,0,0,.175); background-color: rgba(255,255,255,.75); font-style: italic; }

header, section, footer { width: 100%; }
header, article { box-shadow: 0 0 20px rgba(0,0,0,.5); }
section, div { background-size: cover; background-position: center center; background-repeat: no-repeat; }

header { position: fixed; top: 0; left: 0; width: 100%; background-color: rgba(255,255,255,.8); border-bottom: 2.5px solid rgba(0,0,0,.1); z-index: 1; }
header a { display: inline-block; margin: 0; padding: 15px 20px; font-size: 2em; }
header a:nth-of-type(3) { font-size: 3em; }

section { padding: 20% 0; background-attachment: fixed; }

article { float: left; width: 80%; padding: 5% 10%; background-color: #fff; border-top: 2.5px solid rgba(0,0,0,.175); border-bottom: 2.5px solid rgba(0,0,0,.1); }
article p { margin: 0; padding: 25px 10% 0; border-top: 2.5px solid rgba(0,0,0,.1); }

article p, div p { font-style: normal; }

div { position: relative; float: left; width: 20%; margin-left: 3.33%; padding: 150px 0; outline: 2.5px solid rgba(0,0,0,.1); overflow: hidden; }
div p, div h4 { position: absolute; width: 90%; margin: 0; padding: 10px 5%; }
div h4 { top: 0; border-bottom: 2.5px solid rgba(0,0,0,.175); } div p { bottom: 0; border-top: 2.5px solid rgba(0,0,0,.175); font-size: 85%; }

div:first-of-type, div:nth-of-type(5), div:nth-of-type(9), div:nth-of-type(13) { margin-left: 5%; }

footer { float: left; width: 80%; padding: 25px 10%; border-top: 2.5px solid rgba(0,0,0,.1); background-color: #ccc; z-index: 2; }
footer:first-of-type { box-shadow: 0 0 20px rgba(0,0,0,.5); z-index: 1; } footer div { display: none; }
footer a { float: left; margin-right: 20px; text-transform: none; } footer a:last-of-type { float: right; margin-right: 0; }
footer p { width: 33%; margin: 0; padding: 0; background: none; border: none; font-style: normal; }

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation: landscape)
{ section { background-size: 100% 15%; background-position: top left; } }
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation: portrait)
{ section { background-size: 100% 15%; background-position: top left; } }