/* CSS Document *//* make keyframes that tell the start state and the end state of our object */@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }@-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }@-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }@font-face { font-family: bentonsansthin; src: url('bentonsans-thin.eot'); src: url('bentonsans-thin.ttf') format('truetype'), url('bentonsans-thin.eot?#iefix') format('embedded-opentype'), url('bentonsans-thin.woff') format('woff'), url('bentonsans-thin.svg#svgFontName') format('svg'); } html, body {      height:100%;	  width: 100%;      margin: 0px;      padding: 0px;      border: none;      text-align: center;	  background:#ffffff;	  color:#8b8c8f;	  font-family: bentonsansthin;	  font-weight:lighter;	  font-size:11px;	  letter-spacing:1px;	  border-collapse: collapse;   }body a, body a:visited {		color: #8b8c8f;	text-decoration:none;	font-weight:lighter;}a:active, submit:active, form textarea {  outline: none;  font-weight:lighter;}body a:hover {	color:#d8bfcd;	font-weight:lighter;	text-decoration:none;}	img, img a, img a:hover, img a:visited {	border:none;}/*Conteudo 100% e centralizado*/#site {      height:80%;	  width: 100%;      margin: 0px;      padding: 0px;      border: none;      text-align: center;	  vertical-align: middle;	  /*fadein*/	  opacity:0;  /* make things invisible upon start */	  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */      -moz-animation:fadeIn ease-in 1;	  animation:fadeIn ease-in 1;         -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/      -moz-animation-fill-mode:forwards;      animation-fill-mode:forwards;       -webkit-animation-duration:4s;      -moz-animation-duration:4s;      animation-duration:4s;  }#conteudo {		height:100%;	background:#ffffff;    margin: auto;    padding: 0px;    border: none;    text-align: center;	vertical-align: middle;}	#menu {	/*fadein*/	opacity:0;  /* make things invisible upon start */	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */    -moz-animation:fadeIn ease-in 1;	animation:fadeIn ease-in 1;       -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/    -moz-animation-fill-mode:forwards;    animation-fill-mode:forwards;     -webkit-animation-duration:10s;    -moz-animation-duration:8s;    animation-duration:10s;}#menu.out {	/*fadein*/	opacity:1;  /* make things invisible upon start */	-webkit-animation:fadeOut ease-in 1;  /* call our keyframe named fadeOut, use animattion ease-in and repeat it only 1 time */    -moz-animation:fadeOut ease-in 1;	animation:fadeOut ease-in 1;       -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 0)*/    -moz-animation-fill-mode:forwards;    animation-fill-mode:forwards;     -webkit-animation-duration:2s;    -moz-animation-duration:1s;    animation-duration:2s;}#texto {	width:700px;	margin:auto;	text-align:center;	}#texto p {	margin-bottom:5px;}#logoHolder{	width:300px;	margin:auto;}#logoHolder img{		width:100%;	height:auto;	opacity:0;}#logoHolder.startAnim {	background:url(http://fernandamota.com/animations/FM-Logo-Anim-Start.gif) center center no-repeat;	background-size:100%;	line-height: 0;}#logoHolder.startAnimReverse {	background:url(http://fernandamota.com/animations/FM-Logo-Anim-Start-Reverse.gif) center center no-repeat;	background-size:100%;	line-height: 0;}#logoHolder.loopAnim {	background:url(http://fernandamota.com/animations/FM-Logo-Anim-Loop.gif) center top no-repeat;	background-size:100% auto;	line-height: 0;		};