/* CSS Document */

body {overflow:hidden; /* needed to eliminate scrollbars caused by the background image */ padding:0; margin:0; /* necesarry for the raster to fill the screen */ height:100%; width:100%; font: 14px 'OpenSansCondensedLight', Arial, sans-serif; font-weight:400; color:#000; background:#F6F6F6;}
a{outline:none;}
strong{font-weight:bolder;}

/* background image */
#bgimg {position:absolute; z-index: -1; background-image: url(img/bkgrdformacao.jpg);}
#realBody{position:absolute; z-index: 5; /* Place the new body above the background image */ overflow:auto; /* restore scrollbars for the content */ height:100%; width:100%;/* Make the new body fill the screen */
	left:0px; top:0px; background-image: url(../img/raster.png);}

/* generic use */

/*GO BACK AND TOP */
.goback{
	background: url(../img/arrows-black.png) top left;
	height: 64px;
	width: 64px;
	display: block;
	cursor: pointer;
}
.goback:hover{
	background: url(../img/arrows-black.png) top right;
}
.gotop{
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: url(../img/arrows-black.png) bottom left;
	height: 64px;
	width: 64px;
	display: block;
	cursor: pointer;
}
.gotop:hover{
	background: url(../img/arrows-black.png) bottom right;
}

#credits{position:absolute; top:15px; right:0; width:160px; padding:2px 5px; background-color:#000; color:#fff; text-transform: uppercase;}
#credits a{text-decoration:none; color:#09c;}
.facebook {color:#09c;}
.wrap{width:850px; margin:0 0 0 100px;}
.wrap h2{margin:0; padding:5px; font-size:24px; font-weight:400; color:#09c;}
.wrap h2 a{text-decoration:none; color:#09c;}
.wrap h2 a:hover{color:black;}
.wrap h3{margin:0; padding:5px; font-size:24px; font-weight:400; color:#09c;}
.wrap h3 a{text-decoration:none; color:#09c;}
.clear{clear:both;}

#home{position:absolute; width:100%; bottom:50px; left:0; }
#home h1{
	margin:0; 
	padding:5px 0 5px 20px; 
	font-size:30px; 
	color:#FFF; 
	background:url(../img/opacity.png) repeat; 
	font-weight: normal;
}
#home h2{margin:0; padding:0; font-size:20px; background-color:#fff;}

.top{ width:100%; margin-top:50px;  }
.top h1{
	margin:0; 
	padding:5px 0 5px 20px; 
	font-size:25px; 
	color:#FFF; 
	background-color:#000; 
	font-weight:normal;
}
.top h2{margin:0; padding:0; font-size:20px; background-color:#fff;}
.top h3{
	width:790px; 
	margin:5px 0; 
	padding:0 20px 0; 
	font-size:50px; 
	font-weight:normal; 
	color:#09C; 
	background:#fff;
}

.main{
	margin:5px 0 0 100px; 
	padding:5px; 
	background-color:#fff;
}
.main li{
	padding:5px; 
	display:inline; 
	font-size:28px; 
	color:#09C; 
}
.main li a{text-decoration:none; color:#000;}
.main li a:hover{color:#09C;}
#active{color:#09c;}
.subnav {
	margin:5px 0 0 100px; 
	padding:5px; 
	/*width:830px;*/
	background-color:#fff;
}
.subnav li {
	color:#09C; 
	margin:0; 
	padding:5px; 
	display:inline; 
	font-size:20px; 
}
.subnav li a{text-decoration:none; color:#000;}
.subnav li a:hover{color:#09C;}

/*****************************************/
/* CINECLUBE */
/*****************************************/
h1.cine{
	margin:0; 
	padding:0; 
	font-size:40px; 
	font-weight:normal; 
	text-transform: uppercase; 
	color:#000;
}
h2.cine{
	margin:0; 
	padding:0; 
	font-weight:400; 
	text-transform: uppercase; 
	color:#777; 
	font-size:25px;
}
ul.cine{/*width:602px;*/ margin:0 0 10px 0; padding:0; list-style:none;}
ul.cine li{height:250px; position:relative; margin:10px 0 0 0; padding:0; text-align:left; }
ul.cine li .info {position:absolute; bottom:0; left:0; padding: 10px; text-align: left; font-size:14px; background:url(../img/opacity.png) repeat; color:white;}  
ul.cine li .info h1 {font-size: 26px; font-weight: normal; text-transform: uppercase; margin: 0; padding:5px 10px 0;}
ul.cine li .info p {font-size: 16px; font-weight: normal; text-transform: uppercase; margin: 0; padding:0 10px;}
ul.cine li .info p a{text-decoration:none; color:#fff;}
ul.cine li .info p a:hover{color:#09c;}

/*****************************************/
/* CINECLUBE ARQUIVO */
/*****************************************/
h1.cinearquivo{margin:0; padding:0; font-size:34px; font-weight:400; text-transform: uppercase; color:#09c;}
ul.cinearquivo{margin:0; padding:3px 0;}
ul.cinearquivo li{list-style:none; font-size:22px; font-weight:normal; text-transform:uppercase; margin:0; padding:0;}
ul.cinearquivo ul{margin:0; padding:0;}
ul.cinearquivo li li{margin:0; padding:0; font-size:16px;}

/*****************************************/
/* PRODU�AO */
/*****************************************/
.docwrapnew{/*width:730px;*/ margin:0 0 0 100px;}
.docwrapnew h2{margin:0; padding:0 0 0 5px; background-color:#FFF; width:600px; font-weight:400;}
.docwrapnew h3 a{text-decoration:none; color:#fff; padding:5px; font-size:24px; font-weight:400;}
.new{color:#09c;}
ul.docs li .movie{position:absolute; bottom:0; width:100%; border-top:0px solid #fff; background:#09c; text-align:right;}
ul.docs li .movie p{padding:10px; font-size:20px; color:#fff;}
ul.docs li .movie p a{text-decoration:none; color:#fff;}
ul.docs li .movie p a:hover{color:#000;}

ul.docs{ margin:0; padding:0; color:#fff; list-style: none;}
ul.docs li{position:relative; margin:10px 10px 0 0; padding:0; width:360px; height:840px; background: url(../img/opacity.png) repeat; float:left;}
ul.docs li h1{font-weight:normal; text-transform:uppercase; margin:0; padding:10px; font-size:21px;}
ul.docs li p {font-weight:normal; margin:0; padding:10px; font-size:16px;}
ul.docs li img{width:100%}

.docwrap{width:700px; margin:0 0 0 100px;}
.docwrap h2 {margin:0; padding:0 0 0 5px; background-color:#FFF; width:600px; font-weight:400;}
.docwrap h3{margin:0; padding:5px; font-size:24px; font-weight:400; color:#09c;}
.docwrap h3 a{text-decoration:none; color:#fff;}
ul.animated {width: 602px; list-style: none; margin:0; padding: 0;}
ul.animated li {position: relative; margin:10px 0 0 0; padding: 0; text-align: center; border: 1px solid #fff;}
ul.animated li .thumb {width: 600px; /*--Width of image--*/ height: 250px; /*--Height of image--*/ position: relative; background-color:#CCC;}
ul.animated li h1 {font-weight: normal; text-transform: uppercase; margin: 0; padding: 10px; font-size:22px; }
ul.animated li a {text-decoration:  none; color: #09c; display: block;}
ul.animated li .description {  /*--Style the caption box--*/
	position:absolute; bottom:0px; left:0px; width:100%; height:100%; background:url(../img/opacity.png) repeat; text-align: left; font-size:14px;  color:white;
	display: none; /*This is important since we want to hide the image caption and display it only on hover*/
}  
ul.animated li:hover .description {display: block; /*This is important since we want to show the image caption on hover*/}  
ul.animated li .description p {padding:10px; margin:0px;}  

/*****************************************/
/* FORMACAO 017 */
/*****************************************/
.formacaowrap{
	margin:50px 100px;
}
.formacaowrap hr{
	border-top: 1px dotted #fff;
	border-bottom: 1px dotted #333;
}
.fromacaoIntro{
	font-size: 25px;
	padding: 100px 100px;
	background: #a3c0a7 url(../img/formacao/formacao-bkgrd.png) left center no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}
.formacaoJumbo{
	width: 50%;
	color: #fff;
	margin-left: 45%;
}
.formacaoJumbo .button{
	text-decoration: none;
	border: 1px solid #fff;
	padding: 10px;
	color: #fff;
	display: inline-block;
	margin-top: 5px;
}
.formacaoJumbo .button:hover{
	background-color: #ff4300;
}
.formacaoSubTitle{
	margin: 0;
	padding: 0;
	font-size: 45px;
	font-weight: normal;
	text-transform: uppercase;
	color: #fff;
}
.formacaoColor{
	color: #000;
}
ul.formacao{
	margin:0; 
	padding:0; 
	list-style: none;
	display: flex;
	flex-direction: row;
  /*justify-content: space-between;*/
}
ul.formacao li{
	position:relative; 
	margin:10px 10px 20px 0; 
	padding:0; 
	width: 33.3%;
	/*width:410px;*/
	height:800px;
	border-left:1px solid #a3c0a7;
	display: inline;
	/*float:left;*/
	color: #000
}
ul.formacao li:first-child {
}
ul.formacao li:last-child {
	margin-right: 0px;
}
ul.formacao li h1{
	font-weight:normal; 
	text-transform:uppercase; 
	margin:0; 
	padding:10px 25px 10px 10px;  
	font-size:25px;
	background-color:#a3c0a7;
	color: #fff;
	display: inline-block;
}
ul.formacao li h1:before{
	content: "\2022";
	padding-right: 15px;
}
ul.formacao li img{
	width:100%;
	height: auto;
}
ul.formacao li p {
	font-weight:normal; 
	margin:0; 
	padding:13px; 
	font-size:20px;
}
ul.formacao li b{
	font-weight:600;
}
ul.formacao li .link a{
	position:absolute; bottom:0; 
	/*width:100%;*/ 
	border-top:2px solid #ff4300; /*#9a9*/ 
	text-align:left; 
	padding:10px; 
	color:#000; 
	font-size:20px; 
	text-decoration:none;
}
ul.formacao li .link a:hover{
	background: #ff4300; 
	color: #fff;
}


/*****************************************/
/* FORMA�AO */
/*****************************************/
.collapse{width:600px; margin-bottom:5px; background-color:#fff; font-size:30px;}
.collapse a{text-decoration:none; color:#000; padding:5px; display:block;}
.collapse a:hover{color:#09c;}
.expand{width:580px; margin-bottom:5px; padding:10px; background-color:#fff;}
.expand h2{margin:0; padding:5px; font-size:22px; font-weight:400;}
.expand p{margin:0; padding:2px 5px; font-size:18px;}
.expand ul{list-style-type:none; margin:0; padding:5px;}
.expand ul.pagina{ font-size:18px;}
.expand ul.pagina li, ul.pagina li a{padding:2px 0; text-decoration:none; color:#000;}
.expand ul.pagina li a:hover{color:#09c;}

/*****************************************/
/* FORMA�AO . OLHAR O REAL . VIDEO NA ESCOLA */
/*****************************************/
.pic{width:320px; height:250px; padding:5px; margin:0 5px 15px; border:1px solid #999; float:left;} /* used in olhar o real, video na escola */
.work{margin:0 5px;  width:490px; float:left; }
.work p{margin:0; padding:0; font-size:17px; text-transform:uppercase;}
.work ul{margin:10px 0; padding:0; list-style:none;}
.work ul li{padding-bottom:2px; font-size:17px; text-transform:uppercase;}
.work h1{margin:0; padding:0; font-size:40px; text-transform:uppercase; font-weight:400;}
.work h2{margin:0; padding:0; font-size:30px; color:#666; text-transform:uppercase;}
.work ul li a{text-decoration:none; color:#555;}
.work ul li a:hover{text-decoration:none; color:#09c;}
hr.work{margin:10px 0; padding:0; width:730px; clear:both;}

/*****************************************/
/* ENCONTROS */
/*****************************************/
.encontros{width:192px; height:295px; margin:0 5px 5px 0; border:1px solid #999; float:left;}
.encontros ul{width:180px; margin:2px auto; padding:0; list-style:none; border-top:1px solid #ccc;}
.encontros li{float:left; padding:5px 5px 0 0;}

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 6, 2012 01:32:51 PM America/New_York */
@font-face {
	font-family: 'OpenSansCondensedLight';
	src: url('OpenSans-CondLight-webfont.eot');
	src: url('OpenSans-CondLight-webfont.eot?#iefix') format('embedded-opentype'),
		 url('OpenSans-CondLight-webfont.woff') format('woff'),
		 url('OpenSans-CondLight-webfont.ttf') format('truetype'),
		 url('OpenSans-CondLight-webfont.svg#OpenSansCondensedLight') format('svg');
	font-weight: normal;
	font-style: normal;

}

@font-face {
	font-family: 'OpenSansCondensedLightItalic';
	src: url('OpenSans-CondLightItalic-webfont.eot');
	src: url('OpenSans-CondLightItalic-webfont.eot?#iefix') format('embedded-opentype'),
		 url('OpenSans-CondLightItalic-webfont.woff') format('woff'),
		 url('OpenSans-CondLightItalic-webfont.ttf') format('truetype'),
		 url('OpenSans-CondLightItalic-webfont.svg#OpenSansCondensedLightItalic') format('svg');
	font-weight: normal;
	font-style: normal;

}

@font-face {
	font-family: 'OpenSansCondensedBold';
	src: url('OpenSans-CondBold-webfont.eot');
	src: url('OpenSans-CondBold-webfont.eot?#iefix') format('embedded-opentype'),
		 url('OpenSans-CondBold-webfont.woff') format('woff'),
		 url('OpenSans-CondBold-webfont.ttf') format('truetype'),
		 url('OpenSans-CondBold-webfont.svg#OpenSansCondensedBold') format('svg');
	font-weight: normal;
	font-style: normal;

}