body  p , a, hr{
     -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadein 1s; /* Firefox < 16 */
     -ms-animation: fadein 1s; /* Internet Explorer */
     -o-animation: fadein 1s; /* Opera < 12.1 */
     animation: fadein 1s;
}

@keyframes fadein {	
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/*-----------------------------------------*/
body  #nav{
     -webkit-animation: slidein 3s; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: slidein 3s; /* Firefox < 16 */
     -ms-animation: slidein 3s; /* Internet Explorer */
     -o-animation: slidein 3s; /* Opera < 12.1 */
     animation: slidein 3s;
}

@keyframes slidein {	
    from { left: 900px; }
    to   { left: 0; }
}

/* Firefox < 16 */
@-moz-keyframes slidein {
    from { left: 900px; }
    to   { left: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes slidein {
    from { left: 900px; }
    to   { left: 0; }
}

/* Internet Explorer */
@-ms-keyframes slidein {
    from { left: 900px; }
    to   { left: 0; }
}

/* Opera < 12.1 */
@-o-keyframes slidein {
    from { left: 900px; }
    to   { left: 0; }
}
/*-----------------------------------------*/
body {
	margin: auto;
}

body #logo{
	width: 10%;
	height: auto;
	display: block;
	margin: 0 auto;
	margin-top: 1%;
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
}

body #logo:hover{
	opacity: 0.6;
}

body hr{
	position: relative;
	display: block;
	width: 580px;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 1px;
	border-color: #26966D;
	z-index: 3;
	-webkit-transition: width 3s;
	transition: width 2s;
}

------------------------------------------------------------------------
/* header */
.header{
	position: relative;
	height: 50px;
	width: 100%;
}

.header #nav{
	position: relative;
	padding-top:;
	width: 100%;
	text-align: center;
}

.header #nav a{
	font-family: century gothic;
	font-size: 100%;
	color: black;
	opacity: 0.9;
	text-decoration: none;
	margin-left: 2%;
	margin-right: 2%;
	-webkit-transition: color 0.5s;
	transition: color 0.5s;
}

.header #nav a:hover{
	color: #26966D;
	border-top: solid;
	padding-bottom: 10px;
}



/* Footer */
.footer{
	position: fixed;
	height: 4%;
	width: 100%;
	background: #245241;
	top: 96%;
	opacity: 0.5;
	z-index: 1;
}

.footer p{
	font-family: century gothic;
	font-size: 80%;
	color: white;
	opacity: 0.9;
	line-height: 2px;
}

/* Footer resource */
.footer #copyrightresource a{
	font-family: century gothic;
	font-size: 100%;
	color: white;
	opacity: 0.9;
	text-decoration: none;
	line-height: 2px;
}