body {
  background-color: #EBE8E4;
  color: #222;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  font-size: 15px;
  margin-top: 60px;
}
.text{
	text-align: justify;
}
body, nav, ul, li, a  {margin: 0; padding: 0;}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
a {text-decoration: none;}
.container {
    width: 90%;
    max-width: 900px;
    margin: 10px auto;
}
.toggleMenu {
    display:  none;
    background: #666;
    padding: 10px 15px;
    color: #fff;
}
.nav {
    list-style: none;
     *zoom: 1;
     background:#175e4c;
     position: relative;
}
.nav:before,
.nav:after {
    content: " ";
    display: table;
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
    width: 9em;
}
.nav a {
    padding: 10px 15px;
    color:#fff;
    *zoom: 1;
}
.nav > li {
    float: left;
    border-top: 1px solid #104336;
    z-index: 200;
}
.nav > li > a {
    display: block;
}
.nav li ul {
    position: absolute;
    left: -9999px;
    z-index: 100;
}
.nav li li a {
    display: block;
    background: #1d7a62;
    position: relative;
    z-index:100;
    border-top: 1px solid #175e4c;
}
.nav li li li a {
    background:#249578;
    z-index:200;
    border-top: 1px solid #1d7a62;
}
@media screen and (min-width: 800px) {
	.nav > li {
		display: none;
	}
	.nav > ul {
		display: none;
	}
}
@media screen and (max-width: 800px) {
    .nav > li {
        float: none;
        text-align: center;
    }
    .nav ul {
        display: block;
        width: 100%;
        text-align: center;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
        text-align: center;
    }
}

@media screen and (min-width: 500px) {
	.people {
	float: left;
	margin: 5px;
	padding: 15px;
	width: 20%;
	height: 600px;
	}
}
@media screen and (max-width: 500px) {
	.people {
	float: left;
	margin: 5px;
	padding: 15px;
	width: 150px;
	height: 600px;
	}
}
#paper{
  padding-top: 60px;
  margin-top: 5%;
  margin-left: 10%;
  margin-right: 10%;
}
#about{
  padding-top: 60px;
  margin-top: 5%;
  margin-left: 10%;
  margin-right: 10%;
}
#now{
  padding-top: 60px;
  margin-top: 5%;
  margin-left: 10%;
  margin-right: 10%;
}
#goals{
  padding-top: 60px;
  margin-top: 5%;
  margin-left: 10%;
  margin-right: 10%;
}
#me{
  padding-top: 60px;
  margin-top: 5%;
  margin-left: 10%;
  margin-right: 10%;
}
#contact{
  padding-top: 60px;
  margin-top: 5%;
  margin-left: 10%;
  margin-right: 10%;
}
#social2{
	background-color: #5aa0cb;
}

.social {
	background-image: url(../images/mache_b.jpg);
	background-repeat:repeat;
	width:100%;
}

.social header {
	height:30%;
	margin:5%;
}
.social footer {
	height:30%;
	margin:5%;
}

.social_icons {
	background-repeat:repeat;
	width:100%;
	/*margin: 0 auto;
	width:1000px;*/
}
.social_icons img {
	width:50%;
	height:50%;
}

.social_icons img:hover {
	width:70%;
	height:70%;
}
.social_icons table {
	margin: 0 auto;
	text-align:center;
}
.social_icons a {
	color: #222;
	font-weight: 300;
	text-decoration: none;
	-o-transition: .3s;
 	-ms-transition: .3s;
 	-moz-transition: .3s;
  	-webkit-transition: .3s;
  	transition: .3s;
}
.social_icons a:hover {
	color: #AAA;
}
.sito img{
/* Adds shadow to the bottom of the bar */
	-webkit-box-shadow: 0px 0px 8px 0px #000000;
	-moz-box-shadow: 0px 0px 8px 0px #000000;
	box-shadow: 0px 0px 8px 0px #000000;
}
.sito img:hover{
	width: 200px;
	transform: rotate(-3deg);
	/* Adds shadow to the bottom of the bar */
	-webkit-box-shadow: 0px 0px 14px 0px #000000;
	-moz-box-shadow: 0px 0px 14px 0px #000000;
	box-shadow: 0px 0px 14px 0px #000000;
}
@media screen and (min-width: 500px) {
	.sito img{
		width: 100%;
	}
	.sito img:hover{
		width: 100%;
	}
	.portrait img{
		width: 100%;
	}
}
@media screen and (max-width: 500px) {
	.sito img{
		width: 140px;
	}
	.sito img:hover{
		width: 150px;		
	}
	.portrait img{
		width: 100px;
	}
}
.portrait img{
	margin: 0px auto;
	display:block;
	/* Adds shadow to the bottom of the bar */
	-webkit-box-shadow: 0px 0px 8px 0px #000000;
	-moz-box-shadow: 0px 0px 8px 0px #000000;
	box-shadow: 0px 0px 8px 0px #000000;
}
.portrait img:hover{
	margin: 0px auto;
	display:block;
	transform: rotate(3deg);
	/* Adds shadow to the bottom of the bar */
	-webkit-box-shadow: 0px 0px 20px 0px #000000;
	-moz-box-shadow: 0px 0px 14px 0px #000000;
	box-shadow: 0px 0px 20px 0px #000000;
}