@charset "UTF-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Quattrocento:400,700);

body {background-color:#fff; margin:0; }

#fundo {background:url(/imagens/bg_footer.jpg) repeat-x 0 400px #fff; margin:0; width:100%; height:900px; overflow-y:hidden; }

.panel {width:560px; margin:0 auto; height:650px; padding-top:40px;}

.logo {
    width: 180px;
    height: 151px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/imagens/logo_vazdecarvalho.png);
    background-repeat: no-repeat;
    background-size: 180px;
    background-position: left 21px;
	}
	
.logo p {font-family:Arial, Helvetica, sans-serif; font-size:9px; color:#000; padding-top:140px; text-align:center;}	

#top {	
	margin-top: -10px;
    width: 100%;
    height: 150px;
    background-image: url(/imagens/bg_header.png);
    background-repeat: repeat-x;
    background-position: center -3px;
	}
	
#header {
	margin-top:-40px;
	width:100%;
	height:100%;
	}
	
#header h2 {
	font-family: 'Quattrocento', 'Georgia', serif;
	font-size:30px;
	margin-top:30px;
	text-transform:uppercase;
	font-weight:100;
	text-align:center;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	padding-bottom:20px;
	border-bottom:1px dotted #eee;
	}
	
.font_grey a:link {color:#000;}
.font_grey a:visited {color:#000;}
.font_grey a:hover {color:#C00;}

.active {font-weight:bold;}

.font_grey { width:380px; text-align:center; margin:0 auto; color:#000; font-size:13x; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; padding-top:30px;text-shadow: 0 1px 1px rgba(0, 0, 0, .2); line-height:22px;}

.font_black { width:320px; text-transform:uppercase; text-align:center; margin:0 auto; color:#000; font-size:18px; font-family:'Quattrocento', "Times New Roman", Times, serif; padding-top:90px;text-shadow: 0 1px 1px rgba(0, 0, 0, .2); }

.cx_text { 
	background-color:#FFF;
	color:#000;
	font-family: 'Quattrocento', 'Georgia', serif;
	font-size:20px;
	border:1px solid #ccc;
	margin:0;
	padding:10px 20px 10px 20px;
}

.birthday{width:auto; margin:0 auto; text-align:center; padding-top:30px;}

.button {width:50px; text-align:center; margin-left:10px;margin-right:10px;background-color:#000; color:#fff; font-family: 'Quattrocento', 'Georgia', serif; font-size:18px; text-transform:uppercase; padding:10px 15px 10px 15px; border:none;-webkit-box-shadow: 1px 1px 3px 1px #cccccc;
box-shadow: 1px 1px 3px 1px #cccccc; }

.button a:link {color:#fff; text-decoration:none;}
.button a:visited {color:#fff; text-decoration:none;}
.button a:hover {opacity:0.5;}

.center {margin:80px auto 0 auto; text-align:center;}
.copy {font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; text-align:center; font-size:12px;}


/* 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; } }

.fade-in {
	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:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}

.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}

.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}