html, body {
	height:100%;
}
body {
	width: 100%;
	overflow: hidden;	
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #F2F2F2 0%, #FDFDFD 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #F2F2F2 0%, #FDFDFD 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #F2F2F2 0%, #FDFDFD 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F2F2F2), color-stop(1, #FDFDFD));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #F2F2F2 0%, #FDFDFD 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #F2F2F2 0%, #FDFDFD 100%);
	
}


.content{
	right: 12%;
	left: 12%;
	top: 30px;
	position: absolute;
}



.panel{
	min-width: 100%;
	height: 98%;
	overflow-y: auto;
	overflow-x: hidden;
	margin-top: -150%;
	position: absolute;
	background: #000;
	box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
	z-index:2;
	-webkit-transition: all .8s ease-in-out;
	-moz-transition: all .8s ease-in-out;
	-o-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}
.panel:target{
	margin-top: 0%;
	background-color: #f2f2f2;

}

#mesa {
	margin:auto;
	margin-top: 10%;
	width:700px;
	
}


.lapis {
	position:absolute;
	margin: 190px 0  0px 300px; 
	display:block;
	z-index:20; 
	width:140px;
	height:600px;
	background:url(../images/lapis.png) left;
	background-position: 0px 0px;
	-webkit-transform:rotate(37deg);
	-moz-transform:rotate(37deg);
	transform: rotate(37deg);
}


#caderno {
	float:left;
	display:inline-block;
	width:300px;
	height:500px;
	margin:30px 0 0 0px ;
	padding:60px 30px 30px 30px;
	z-index:0;
	background-color: #FDFDFD;
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.025);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.025);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.025);
	-webkit-transform:rotate(-10deg);
	-moz-transform:rotate(-10deg);
	transform: rotate(-10deg);
	
	background-image: 
  -webkit-linear-gradient(90deg, transparent 49px, transparent 50px),
  -webkit-radial-gradient(circle, #f5f5f5 14px, transparent 14px),
  -webkit-radial-gradient(circle, rgba(0,0,0,.2) 15px, transparent 15px);
  -webkit-background-size: auto 50px, 50px 50px, 50px 50px;
  background-image: 
  -moz-linear-gradient(90deg, transparent 49px, transparent 50px),
  -moz-radial-gradient(circle, #f5f5f5 14px, transparent 14px),
  -moz-radial-gradient(circle, rgba(0,0,0,.2) 15px, transparent 15px);
  -moz-background-size: auto 50px, 50px 50px, 50px 50px;
   
  background-size: auto 50px, 50px 50px, 50px 50px;
  background-repeat: repeat, repeat-x, repeat-x;
  background-position: 0 -1px, 1px 1px;
  box-shadow: 2px 2px 1px -1px rgba(0,0,0,.2);
  resize: none; 
}

.list {
  color: #555;
  	margin:-10px 0 0 -30px ;
  padding: 0 !important;
  height:540px;
  width: 360px;
  border: 1px solid #dedede;
}
.list li {
  list-style: none;
  border-bottom: 1px dotted #ccc;
  text-indent: 25px;
  height: 25px;
  padding: 2px;
}


.cartao2 {
	float:left;
	position: relative;
	width:150px;
	left:180px;
	top:-250px;
	margin:90px 0px 0 30px;
	padding:30px;
	background-color:#FDFDFD;
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	-webkit-transform:rotate(15deg);
	-moz-transform:rotate(15deg);
	transform: rotate(15deg);
	z-index:0;
}

.cartao
{
	float:left;
	position: relative;
	display:inline-block;
	top:-50px;
	width: 150px;
	padding: 30px;
	margin: 90px 0 0 30px ;
	background-color:#FCFCFC;
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1); 
	}
	


.cartao:before, .cartao:after
{
	position: absolute;
	width: 40%;
	height: 10px;
	content: ' ';
	left: 12px;
	bottom: 6px;
	background: transparent;
	-webkit-transform: skew(-5deg) rotate(-5deg);
	-moz-transform: skew(-5deg) rotate(-5deg);
	-ms-transform: skew(-5deg) rotate(-5deg);
	-o-transform: skew(-5deg) rotate(-5deg);
	transform: skew(-5deg) rotate(-5deg);
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	z-index:-1;
} 

.cartao:after
{
	left: auto;
	right: 12px;
	-webkit-transform: skew(5deg) rotate(5deg);
	-moz-transform: skew(5deg) rotate(5deg);
	-ms-transform: skew(5deg) rotate(5deg);
	-o-transform: skew(5deg) rotate(5deg);
	transform: skew(5deg) rotate(5deg);
} 



.cartoes h1 { font-family: 'Swanky and Moo Moo', serif;  font-size:30px; color:#555;}
.cartoes h1 a { font-family: 'Swanky and Moo Moo', serif;  font-size:30px; color:#555;}
.cartoes h1 a:visited { font-family: 'Swanky and Moo Moo', serif;  font-size:30px; color:#eba938;}
.cartoes h1 a:hover { font-family: 'Swanky and Moo Moo', serif;  font-size:30px; color:#555;}

.link1 { font-family: 'Swanky and Moo Moo', serif; font-weight: 36px; font-size:24px; color:#555;}



#form p{
	color: #000;

}
#form input, #form textarea{
	background: #fff;
	color: #000;
	border: none;
	font-family:"Courier New", Courier, monospace;
	font-size:16px;
	margin:10px 0;
}
#form textarea{
	width: 400px;
	height: 200px;
}
#form label{
	padding-right: 10px;
	float: left;
}
.footnote a{
	color: #ddd;
}



/* top */
#top {height:75px;background-color:#FEFEFE;position:fixed;top:0;left:0;width:100%;z-index:800; box-shadow: 0px 4px 8px rgba(0,0,0,0.2);}
#top .set-size {position:relative;}

#cabecalho {float:left; position:absolute; left:12%; display:block;  width:350px; height:50px; vertical-align:bottom; padding:15px 0 0 0;}

#top #logo {display:block;}
#top #logo li {float:left; display:block; }
#top #logo li a {display:block; width:203px; height:50px; background:url(../images/logos.png) 0 0; text-indent:-9999px; cursor:pointer;}

#home:target ~ #top #logo li a{background-position: 0 0; }
#home:target ~ #top #logo li a:hover {background-position: 0 0; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5; }

#portfolio:target ~ #top #logo li a{background-position: 0 -50px; }
#portfolio:target ~ #top #logo li a:hover {background-position:  0 -50px; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5; }

#about:target ~ #top #logo li a{background-position: 0 -100px; }
#about:target ~ #top #logo li a:hover {background-position:  0 -100px; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5; }

#contact:target ~ #top #logo li a{background-position: 0 -150px; }
#contact:target ~ #top #logo li a:hover {background-position:  0 -150px; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5; }

/* sublogo */
#top #sublogo {float:left; padding:25px 0 10px 0; margin:0 0 0 7px;}
#top #sublogo li { float:left;}
#top #sublogo li a {font-size:18px; color:#ACACAC; text-decoration:none;}

#home:target ~ #top #sublogo li a{ color:#ACACAC;}
#home:target ~ #top #sublogo li a:hover {color:#ACACAC;  text-decoration:none;}

#portfolio:target ~ #top #sublogo li a{color:#00b7ea; }
#portfolio:target ~ #top #sublogo li a:hover{color:#00b7ea; text-decoration:none;}

#about:target ~ #top #sublogo li a{color:#9f5ac7;  }
#about:target~ #top #sublogo li a:hover {color:#9f5ac7; text-decoration:none;}

#contact:target ~ #top #sublogo li a{color:#eba938;}
#contact:target~ #top #sublogo li a:hover {color:#eba938; text-decoration:none;}


/* menu */
#top #menu {float:right; padding:40px 0px 0 0; position:fixed; right:12%;}
#top #menu li {padding:0 10px; float:left;display:block;}
#top #menu li a {font-size:18px;display:block;color:#ACACAC;cursor:pointer;}

#home:target ~ #top #menu #link-home{color:#3F3F3F; }
#home:target ~ #top #menu li a:hover {color:#3F3F3F;  text-decoration:none;}

#portfolio:target ~ #top #menu #link-portfolio{color:#00b7ea; }
#portfolio:target ~ #top #menu li a:hover{color:#00b7ea; text-decoration:none;}

#about:target ~ #top #menu #link-about{color:#9f5ac7;  }
#about:target~ #top #menu li a:hover {color:#9f5ac7; text-decoration:none;}

#contact:target ~ #top #menu #link-contact{color:#eba938;}
#contact:target~ #top #menu li a:hover {color:#eba938; text-decoration:none;}

/* -- */

		
/* - Portfolio- */

/*-------------------------
	General Styles
--------------------------*/



a, a:visited {
	text-decoration:none;
	outline:none;
	color:#54a6de;
}

a:hover{
	text-decoration:underline;
}




/*----------------------------
	Green filter bar
-----------------------------*/


#portfolio {
}

a.image-tooltip[data-tooltip]:link {
     position: relative;
     text-decoration: none;
     font: 15px helvetica; /* Font size and family */
     color: #FFF; /* Font color */
     text-align:center}
a.image-tooltip[data-tooltip]:before {
     content: attr(data-tooltip);
     position: absolute;
     bottom:0px; /* Tooltip position y-axis */
     left: 0px; /* Tooltip position x-axis */
     background: #000000; /* Tooltip background color */
     padding: 5px 0;
     visibility: hidden;
     width:320px} /* Tooltip width */
a.image-tooltip[data-tooltip]:hover:before {
     visibility: visible}







#filter {
	padding:0px 0px 0px 0px; 
	line-height:20px;
	display: block;
	margin:auto;
	margin-top:100px;
	margin-bottom:25px;
	width: 100%;
	text-align:center;
}

#filter a{
	display: inline-block;
	width:105px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #999;
	padding: 3px 2px 3px 2px;
	

	background: -moz-linear-gradient(
		top,
		#f4f5f7 0%,
		#ebebeb);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#F5F5F5),
		to(#ebebeb));
	background: -o-linear-gradient(
		top,
		#f4f5f7 0%,
		#ebebeb);
	background: -ms-linear-gradient(
		top,
		#f4f5f7 0%,
		#ebebeb);	
		
	background:#ebebeb;	
		
	-moz-border-radius:  10px 10px 0px  0px;
	-webkit-border-radius: 10px 10px 0px  0px;
	-o-border-radius: 10px 10px 0px  0px;
	-ms-border-radius: 10px 10px 0px  0px;
	border-radius: 10px 10px 0px  0px;
	
	border: 0px solid #003366;
	-moz-box-shadow:
		0px -2px 2px rgba(000,000,000,0.1),
		inset 0px 0px 0px rgba(255,255,255,0);
	-webkit-box-shadow:
		0px -2px 2px rgba(000,000,000,0.1),
		inset 0px 0px 0px rgba(255,255,255,0);
	-o-box-shadow:
		0px -2px 2px rgba(000,000,000,0.1),
		inset 0px 0px 0px rgba(255,255,255,0);
	-ms-box-shadow:
		0px -2px 2px rgba(000,000,000,0.1),
		inset 0px 0px 0px rgba(255,255,255,0);	
		
	box-shadow:
		0px -2px 2px rgba(000,000,000,0.1),
		inset 0px 0px 0px rgba(255,255,255,0);
	text-shadow:
		0px 0px 0px rgba(000,000,000,0.1),
		0px 0px 0px rgba(255,255,255,0.1);
}

#filter a:hover{

	text-decoration:none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color:#999;
	background: -moz-linear-gradient(
		top,
		#ebebeb 0%,
		#d8d8d8);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#ebebeb),
		to(#d8d8d8));
	background: -o-linear-gradient(
		top,
		#ebebeb 0%,
		#d8d8d8);
	background: -ms-linear-gradient(
		top,
		#ebebeb 0%,
		#d8d8d8);		
		
	-moz-border-radius:  10px 10px 0px  0px;
	-webkit-border-radius: 10px 10px 0px  0px;
	-o-border-radius:  10px 10px 0px  0px;
	-ms-border-radius: 10px 10px 0px  0px;	
	border-radius: 10px 10px 0px  0px;
	border: 0px solid #003366;
	
	-moz-box-shadow:
		0px 0px 2px rgba(000,000,000,0.3),
		inset 0px 0px 0px rgba(255,255,255,0);
	-webkit-box-shadow:
		0px -2px 2px rgba(000,000,000,0.3),
		inset 0px 0px 0px rgba(255,255,255,0);
		
	-o-box-shadow:
		0px 0px 2px rgba(000,000,000,0.3),
		inset 0px 0px 0px rgba(255,255,255,0);
	-ms-box-shadow:
		0px -2px 2px rgba(000,000,000,0.3),
		inset 0px 0px 0px rgba(255,255,255,0);
		
	box-shadow:
		0px -2px 2px rgba(000,000,000,0.3),
		inset 0px 0px 0px rgba(255,255,255,0);
	text-shadow:
		0px 0px 0px rgba(000,000,000,0.3),
		0px 0px 0px rgba(255,255,255,0.3);
}

#filter a.active{

	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ffffff;
	background: -moz-linear-gradient(
		top,
		#00b7ea 0%,
		#009fc3);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#00b7ea),
		to(#009fc3));
	background: -o-linear-gradient(
		top,
		#00b7ea 0%,
		#009fc3);
	background: -ms-linear-gradient(
		top,
		#00b7ea 0%,
		#009fc3);		
		
	-moz-border-radius:  10px 10px 0px  0px;
	-webkit-border-radius: 10px 10px 0px  0px;
	-o-border-radius:  10px 10px 0px  0px;
	-ms-border-radius: 10px 10px 0px  0px;
		
	border-radius: 10px 10px 0px  0px;
	border: 0px solid #003366;
	-moz-box-shadow:
		0px -2px 2px rgba(000,000,000,0.3),
		inset 0px 0px 0px rgba(255,255,255,0);
	-webkit-box-shadow:
		0px -2px 2px rgba(000,000,000,0.3),
		inset 0px 0px 0px rgba(255,255,255,0);
	-o-box-shadow:
		0px -2px 2px rgba(000,000,000,0.3),
		inset 0px 0px 0px rgba(255,255,255,0);
	-ms-box-shadow:
		0px -2px 2px rgba(000,000,000,0.3),
		inset 0px 0px 0px rgba(255,255,255,0);
		
	box-shadow:
		0px -2px 2px rgba(000,000,000,0.3),
		inset 0px 0px 0px rgba(255,255,255,0);
	text-shadow:
		0px 0px 0px rgba(000,000,000,0.3),
		0px 0px 0px rgba(255,255,255,0.3);


	}


#stage{
}

/*----------------------------
	Content area
-----------------------------*/


	
.moldura{display:block; width: 100%; margin: 0px 0 0px 0px;	z-index: 2;}

.moldura li{display: inline;float: left;list-style: none outside none;margin:19px;position:relative; }
	
.moldura a{ 
background: #fff; 
display: inline; 
float: left; 
margin: 0 0 0px 0px; 
padding: 7px 7px 12px; 
width: auto; 
text-align: center;
font-family: sans-serif;
 text-decoration: none; 
 color:#666; 
 font-size: 14px; 
 box-shadow: 0px 3px 6px rgba(0,0,0,.25);
  -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
  -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
  -o-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
  -ms-box-shadow: 0 3px 6px rgba(0,0,0,.25);  
  -webkit-transform: rotate(-2deg);   
  -moz-transform: rotate(-2deg); 
  -o-transform: rotate(-2deg);   
  -ms-transform: rotate(-2deg);   
  -webkit-transition: -webkit-transform .15s linear;
  -moz-transition: -moz-transform .15s linear; 
  -o-transition: -webkit-transform .15s linear;
  -ms-transition: -moz-transform .15s linear;   
}

.moldura ul{}/*overflow:hidden;*/

.moldura ul.hidden{display:none;}

.moldura img { display: block; width: 190px; margin-bottom: 10px;  }

.moldura a:after { content: attr(title); }

.moldura li:nth-child(even) a { -webkit-transform: rotate(2deg);  -moz-transform: rotate(2deg); -o-transform: rotate(2deg);  -ms-transform: rotate(2deg);}
.moldura li:nth-child(3n) a { -webkit-transform: none; position: relative; top: -5px;  -moz-transform: none; -ms-transform: none;-o-transform: none;}
.moldura li:nth-child(5n) a { -webkit-transform: rotate(5deg); position: relative; right: 5px;  -moz-transform: rotate(5deg);  -o-transform: rotate(5deg); -ms-transform: rotate(5deg);}
.moldura li:nth-child(8n) a { position: relative; right: 5px; top: 8px; }
.moldura li:nth-child(11n) a { position: relative; left: -5px; top: 3px; }

.moldura li.messy a {margin-top: -375px; margin-left: 160px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); }
		
.moldura li a:hover {-webkit-transform: scale(1.25); -moz-transform: scale(1.25); -o-transform: scale(1.25); -ms-transform: scale(1.25); transform: scale(1.25); -webkit-box-shadow: 0 2px 40px rgba(0,0,0,0.2); -moz-box-shadow: 0 2px 40px rgba(0,0,0,0.2);-o-box-shadow: 0 2px 40px rgba(0,0,0,0.2); -ms-box-shadow: 0 2px 40px rgba(0,0,0,0.2); box-shadow: 0 2px 40px rgba(0,0,0,0.2);position: relative; z-index: 5; }



/* Modal */
.content_portfolio{
    width: 900px;
    background: #fff;
    position: relative;
    margin: 150px auto;
	box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
}

#voltar {
position:fixed;
width: 80px;
height:15px; 
margin:10px auto;
padding:10px;
text-align:center;

	-moz-border-radius:  0px  10px  10px 0px;
	-webkit-border-radius:0px   10px 10px 0px;
	-o-border-radius:0px 10px  10px  0px;
	-ms-border-radius:0px  10px  10px 0px;
	border-radius:0px  10px 10px  0px;
		
box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
z-index:1000;
font-weight:bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ffffff;
	background: -moz-linear-gradient(
		top,
		#00b7ea 0%,
		#009fc3);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#00b7ea),
		to(#009fc3));
	background: -o-linear-gradient(
		top,
		#00b7ea 0%,
		#009fc3);
	background: -ms-linear-gradient(
		top,
		#00b7ea 0%,
		#009fc3);		
		
	border: 0px solid #003366;
	-moz-box-shadow:
		2px 2px 2px rgba(000,000,000,0.3),
		inset 0px 0px 0px rgba(255,255,255,0);
	-webkit-box-shadow:
		2px 2px 2px rgba(000,000,000,0.3),
		inset 0px 0px 0px rgba(255,255,255,0);
	-o-box-shadow:
		2px 2px 2px rgba(000,000,000,0.3),
		inset 0px 0px 0px rgba(255,255,255,0);
	-ms-box-shadow:
		2px 2px 2px rgba(000,000,000,0.3),
		inset 0px 0px 0px rgba(255,255,255,0);
		
	box-shadow:
		2px 2px 2px rgba(000,000,000,0.3),
		inset 0px 0px 0px rgba(255,255,255,0);
	text-shadow:
		0px 0px 0px rgba(000,000,000,0.3),
		0px 0px 0px rgba(255,255,255,0.3);
	
}
/* Fonts */

.content_portfolio .titulo {font-size:22px; color:#585858; margin-bottom:8px; float:left; text-align:left; line-height:1;}
.content_portfolio .titulo2 {font-size:22px; color:#585858; margin-bottom:8px; float:right; text-align:right; line-height:1;}

.content_portfolio .texto {font-size:14px; color:#ACACAC; float:left; text-align:left; line-height:1,5;}
.content_portfolio .texto2 {font-size:14px; color:#ACACAC; float:right; text-align:right; line-height:1,5;}

.content_portfolio .right {float:right; right:50px; position:absolute;}
.content_portfolio .left {float:left; left:50px; position:absolute;}

.content_portfolio .center {margin:auto; display:block; position:relative}

/* Imagens Home Legenda */

.ttimagens{
	padding: 0;
	width: 960px;
	height: 400px;
	margin: auto;
	margin-top:15%;
}
.ttimagens li{
	float: left;
	margin:auto;
}
.ttimagens li a{
	display: block;
	outline: none;
	text-indent: -9000px;
	position: relative;
}

.ttimagens li .ttportfolio{
	width: 233px;
	height:290px;
	margin:100px 0 0 0;
	background: transparent url(../images/home_image_portfolio.png) no-repeat top left;

}
.ttimagens li .ttabout{
	width: 370px;
	height:299px;
	margin:0 55px 0 75px;
	background-color:#90F;
	background: transparent url(../images/home_image_perfil.png) no-repeat top left;
}
.ttimagens li .ttcontato{
	width: 191px;
	height:245px;;
	margin:140px 0 0 0;
	background-color:#F96;
	background: transparent url(../images/home_image_contato.png) no-repeat top left;
}


.ttimagens li a span{
	width: 100px;
	height: auto;
	line-height: 20px;
	padding: 10px;
	left: 25%;
	margin-bottom: -100px;
	font-style: italic;
	font-size: 24px;
	color: #666;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
	text-align: center;
	text-indent: 0px;
	position: absolute;
	bottom: 150px;
	opacity: 0;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;

}
.ttimagens li a span:before,
.ttimagens li a span:after{
	content: '';
	position: absolute;
	bottom: -15px;
	left: 50%;
	margin-left: -9px;
	width: 0;
	height: 0;	
}
.ttimagens li a span:after{
	bottom: -14px;
	margin-left: -10px;
	border-top: 10px solid #fff;
}
.ttimagens li a:hover span{
	opacity: 0.9;
	bottom: 70px;

}

/* ----- Demo -----*/



/* General Demo Style */

/* Header Style */

.codrops-demos{
    text-align:center;
	display: block;
	line-height: 30px;
	padding: 20px 0px;
}
.codrops-demos a{
    display: inline-block;
	margin: 0px 4px;
	padding: 0px 4px;
	color: #85b9cb;
	text-shadow: none;
	line-height: 20px;	
	font-style: italic;
	font-size: 13px;
	border-radius: 3px;
}
.codrops-demos a:hover{
	color: #699daf;
}
.codrops-demos a.current,
.codrops-demos a.current:hover{
	background: #bdd4dc;
	color: #fff;
}


/* ----- PERFIL -----*/

		#geral {
			margin:0 auto;
			margin-top:100px;
		}
		
		#esquerda {
			width:200px;
			background:purple;
			padding:3px;
			float:left;
			position:relative;
		}
		
		#direita {
			width:240px;
			background:purple;
			padding:3px;
			float:right;
			position:relative;
		}
		
		#conteudo {margin:0 270px 0px 230px;}
		
		#boxcont {margin:0 0 20px 0;}
		
.fontcont{color:#555; font-size:12;margin:0 25px 8px  25px;}
.fontcont li{display:list-item; list-style-type: circle;margin:0 25px 8px  25px; }

.fontsub {color:#999; font-size:10; margin:0 25px 20px  25px;}
		
.box{
	padding:20px; 
	background-color:#FFF;
	border:1px #CCC;
	margin:0 0 10px 0;
}

.linha {
	font-size:16px;
	color:#333;
	background-color:#F7F7F7;
	margin:0 0 10px 0;
	padding:5px;
	border-style:solid;
	border-width:1px;
	border-color:#EBEBEB;
}

.foto {
	display: block;
	width: 200px;
	height: 340px;
	margin:0px 0px 0px 0px;
	background: url(../img/perfil/foto.jpg) left;
	background-position: 0 0;
	text-indent: -99999px;
}
.foto:hover {
	background-position: 0px 340px;
}