html{
 text-rendering: optimizelegibility;
 }
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {

	border: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;

}
body{
	text-align: center;
	background : #f9f9f9;
	margin : auto;
	width: 100%;
	font-family: 'Lato';
}


h1{

	font-weight: bold;
}
h2{

	font-weight: normal;
}
img{
	border : 0px;
}

a, a:link {
color:#5c5c5c;
	display:block;
	}


#wrap{
	max-width:950px;
	margin:40px auto 50px auto; 
	background: #f9f9f9;
}
#wrap p{font-size:1.2em;line-height:1.5; padding:0 60px;}




hr {
opacity:0.2; width:80%;
margin: 50px auto 50px auto;
}


#info{
  max-width: 85%;
  margin: 0 auto;
}


#nav {
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    align-content: stretch;
    justify-content: center;
    -ms-flex-direction: column;
    -webkit-align-content: center;
    overflow: hidden;
}


/*-----NAV----*/
#navQ{  
	max-width:75%;
	margin:0 auto; 
	background: #f9f9f9;

	display: -webkit-flex; /* Safari */
    -webkit-justify-content: space-between; /* Safari 6.1+ */
     display: flex;
  justify-content: space-between;

	}
#nav .fbut{
background: #fff;
text-align:center;
padding-bottom:10px;
 
 display: inline-block;
 	margin:  20px ;
 	border: 5px #fff solid;
 	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0), 0 6px 20px 0 rgba(0, 0, 0, 0);
}
#nav .fbut:hover{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	
}
#nav hr{margin:10px auto 10px auto; width:50%;;}

@media only screen and (max-width: 800px){

	#nav{
		margin: auto;
		display: block;

	}

	#nav .fbut{
		margin-bottom:50px;
	}
}