/* RESET */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }



body {background-color: #EEF4EF; float: left; width: 100%; font-family: 'Open Sans', sans-serif; position: relative; font-weight: 300;}

h1 { font-family: 'Open Sans', sans-serif; font-size: 2em; font-weight: 700; letter-spacing: -1px; color: #36573B; text-align: center; float: left; width: 80%; margin: 0 0 1% 10%; clear: both;}
h2 { font-family: 'Open Sans', sans-serif; font-size: 1em; font-weight: 400; text-transform: uppercase; letter-spacing: 4px; color: #007041; text-align: center; float: left; width: 100%;}
img#logo {float: left; position: relative; left: 50%; width: 400px; margin: 10% 0 3% -200px;}

div.contact {background-color: white; float: left; width: 450px; margin: 6% 0 400px -255px; left:50%;  text-align: centre; position: relative; border-radius: 20px; padding: 30px; }
div ul {float: left; width: 100%; margin: 10% 0 0 0;}
div ul li {float: left; width: 45%; list-style: none; text-align: center; margin: 0 2.5%; }
div ul li a {display: block; width: calc (100% - 20px); font-family: 'Open Sans', sans-serif; font-weight: 400; background-color: #36573B; text-align:center; padding: 10px 10px 13px 10px; ; text-decoration: none; color: white; border-radius: 10px; transition: linear 0.12s; }
div ul li a:hover {background-color: #1c3e21;}

div p a {font-size: 0.8em; width: 80%; margin: 10% 10% 0 10%; float: left; text-align: center; color: #777; text-decoration: none;}
div p a:hover {text-decoration: underline;}

p#egue {position: absolute; bottom: 0; width: 100%; text-align: center; font-size: 0.8em; color: #88A08B;}
p#egue a {text-decoration: none; color: #386343; font-weight: 700; font-size: 0.85em;}
p#egue a:hover {text-decoration: underline;}

@media only screen and (max-width: 900px) {
	
	
	img#logo {float: left; position: relative; left: 50%; width: 250px; margin: 20% 0 6% -125px;}

	h1 { font-size: 1.6em; line-height: 130%; margin-bottom: 5%;}
	h2 { font-size: 0.8em;}

	div.contact { width: 60%; left: 0; margin: 12% 10% 25% 10%; padding: 10%;}
	
	div p {width: 80%; margin: 5% 10% 0 10%; line-height: 150%;}
	div p em {display: none;}
	
	div ul li {width: 80%; margin: 0% 10% 7% 10%; }

	p#egue {position: absolute; bottom: 0; width: 100%; text-align: center; font-size: 0.8em; color: #88A08B;}
	p#egue a {text-decoration: none; color: #386343; font-weight: 700; font-size: 0.85em;}
	p#egue a:hover {text-decoration: underline;}
	
}