@font-face {
    font-family: 'comic_zine_otregular';
    src: url('../font/comiczineot_regular_macroman/comic_zine_ot-webfont.eot');
    src: url('../font/comiczineot_regular_macroman/comic_zine_ot-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/comiczineot_regular_macroman/comic_zine_ot-webfont.woff') format('woff'),
         url('../font/comiczineot_regular_macroman/comic_zine_ot-webfont.ttf') format('truetype'),
         url('../font/comiczineot_regular_macroman/comic_zine_ot-webfont.svg#comic_zine_otregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.clear {
	clear: both;
}

.topo-tablet {
	display: none;
}

/*========================= TOPO ==========================*/
.btcadastro {
	width: 105px;
	height: 30px;
	float: left;
	background-color: #a4bd27;
	text-align: center;
	border-radius: 6px;
	margin-right: 10px;
	color: #FFFFFF!important;
	padding-top: 3px;
}

.btlogin {
	width: 77px;
	height: 30px;
	float: left;
	background-color: #064676;
	text-align: center;
	border-radius: 6px;
	color: #FFFFFF!important;
	padding-top: 3px;
}

.redes-sociais {
	margin-top: 4px;
	float: right;
}

.redes-sociais .item-rede-social {
	float: left;
}

.btcadastro:hover, .btlogin:hover {
	text-decoration: none !important;
}


/*======================== SEÇÃO 1 ===========================*/

#sec-1 {
	width: 100%;
}

.box-titulos {
	margin: 0px 0 0 0px;
	z-index: 100;
}

.h1 {
	font-family: 'comic_zine_otregular';
	font-size: 55px;
	font-weight: normal;
	color: #458797;
	line-height: 50px;
}

.h5 {
	font-size: 14px;
	color: #458797;
	margin-top: -15px;
}


#sec-1 .dir {
	width: 300px;
	height: 550px;
	float: right;
	margin-top:75px;
	background: url("../images/new/linhaverdetopo.png") center;
	background-repeat: no-repeat;
}

/*=============================================================================== CELULAR =========================================================================*/
@media screen and (max-width: 500px ) {

	#rtopo {
		min-width: 0 !important; 
		width: 100% !important; 
		height:60px;
	}
	
	.hidden-phone {	display: none !important; }
	.visible-phone { display: block; }

	.sec1-cel {
		text-align: center;
	}

	.sec1-cel div {
		width: 90%;
		margin: 10px auto;
	}

	.h1 {
		font-size: 40px;
		line-height: normal;
	}

	.estudantes {
		width: 100%;
		margin-top: -50px;
	}

	.banner {
		width: 90%;
		margin: 10px auto;
	}
	.banner img {
		width: 90%;
	}

	.gestor-apoios {
		margin: 20px auto;
		float: left;
		width: 100%;
		line-height: 14px;
	}
	.gestor-apoios span {
		display: block;
		margin-bottom: 10px;
		font-size: 8px;
		text-align: left;
	}
	.gestor-apoios div {
		/*float: left;*/
		display: inline-block;
		width: 18%;
		height: 60px;
		font-size: 10px;
		margin-right: 1%;
	}
	.gestor-apoios div a {
		color: #000 !important;
	}
	.gestor-apoios div a:hover {
		text-decoration: none !important;
	}
	.barra-formometro {
		width: 100%;
		height: auto;
		display: table;
		background-color: #f2f2f2;
		position: relative;
		z-index: 1000;
	}

	.barra-formometro .count {
		width: 90%;
		height: 120px;
		float: none;
		margin: 10px auto;
		text-align: center;
		color: #a4bd27;
		font-weight: bold;
	}

	.barra-formometro .count .num {
		color:#FFF;
		background-color: #6db32a;
		width: 30px;
		height: 40px;
		text-align: center;
		padding-top: 14px;
		font-size: 35px;
		border-radius: 5px;
		display: inline-block;
		margin: 0 1px 0 1px;
	}

	.parallax_binario{
		display: none;
	}

	.linha-fundo {
		width: 335px;
		height: 963px;
		background: url("../images/new/fundo-cel.png") no-repeat;
		background-size: 230px;
		position: absolute;
		margin-top: 30px;
		display: none;
		z-index: 100;
	}

	#sec-2 {
		padding-top: 1px;
		width: 100%;
		height: 440px;
		position: relative;
	}

	.fundo-sec-2 {
		display: none;
	}

	.fundo-sec-2-cel {
		width: 100%;
		height: 440px;
		background-size: 100% 100%;
		background-position: center center;
		background-repeat: no-repeat;
		background-image: url("../images/new/fundotudonovo-cel.png");
		position: absolute;
	}

	.area-comece {
		width: 60%;
		margin-top: 170px;
		right: 10px;
		position: absolute;
		z-index: 999;
		float: right;
	}

	.area-comece p {
		font-family: 'comic_zine_otregular';
		color: #FFF;
		font-size: 50px;
		line-height: 45px;
		display: none;
		text-align: right;
	}

	.botao-comece {
		width: 99%;
		height: 25px;
		border: solid 2px #FFF;
		margin-top: 15px;
		border-radius: 40px;
		text-align: center;
		padding-top: 2px;
		font-size: 14px;
	}
	.botao-comece.btlogin {
		margin-top: 20px;
		background-color: #a4bd27;
	}
	.area-engrenagens {
		width: 70px;
		height: 80px;
		float: right;
		margin:10px 0 0 50px;
	}

	.area-engrenagens .engr1 {
		float: left;
		width: 30px;
		height: 31px;
		background: url("../images/new/engrenagem1.png") no-repeat center center;
		background-size: 30px 31px;
	}
	.area-engrenagens .engr2 {
		float: right;
		margin:25px 10px 0 0;
		width: 25px;
		height: 25px;	
		background: url("../images/new/engrenagem2.png") no-repeat center center;
		background-size: 25px 25px;
	}


	/* =============== AREA VOCAÇÃO =================== */
	#sec-3 {
		padding-top: 1px;
		width: 100%;
		height: 480px;
		transition: all 2s;
	}

	.area-vocacao {
		display: table;
		width: 100%;
		height: auto;
		/*margin-left: 50px;*/
		font-size: 11px;
		text-align: center;
		font-weight: bold;
		position: relative;
		z-index: 999;
	}
	.area-vocacao:hover a{
		text-decoration: none!important;
	}

	.area-vocacao p {
		font-family: 'comic_zine_otregular';
		color: #FFF;
		font-size: 32px;
		width: 100px;
		line-height: 40px;
		margin: 40px 8% 0 0;
		float: right;
		font-weight: normal;
		display: none;
	}

	.area-vocacao div {
		display: none;
	}

	.area-vocacao img {
		width: 40px;
	}

	/*======= curriculos =======*/
	.area-vocacao .curriculos {
		width: 30%;
		height: 130px;
		float: left;
		margin-top: 50px;
		margin-left: 20px;
	}
	.area-vocacao .curriculos span {
		display: block;
		/*float: right;*/
		margin-top: 3px;
		color: #a4bd27 !important;
	}
	/*======= carreira =======*/
	.area-vocacao .carreira {
		width: 30%;
		height: 130px;
		float: left;
		margin-top: 50px;
	}
	.area-vocacao .carreira span {
		display: block;
		margin-top: 10px;
		color: #a4bd27 !important;
	}
	/*======= simulador =======*/
	.area-vocacao .simulador {
		width: 30%;
		height: 130px;
		float: left;
		margin-top: 50px;
	}
	.area-vocacao .simulador span {
		display: block;
		margin-top: 10px;
		margin-right: 20px;
		color: #a4bd27 !important;
	}
	.area-vocacao .simulador img {
		width: 70px;
	}

	/*======= tutor/bussola =======*/
	.area-vocacao .tutor {
		width: 30%;
		height: 130px;
		float: left;
		margin-top: 20px;
		margin-left: 20px;
	}
	.area-vocacao .tutor span {
		display: block;
		margin-top: 10px;
		color: #a4bd27 !important;
	}
	/*======= vagas =======*/
	.area-vocacao .vagas {
		width: 30%;
		height: 130px;
		float: left;
		margin-top: 20px;
	}
	.area-vocacao .vagas span {
		display: block;
		margin-top: 10px;
		color: #a4bd27 !important;
	}
	.area-vocacao .vagas img {
		width: 60px;
	}
	/*======= robo de vagas =======*/
	.area-vocacao .robo {
		width: 30%;
		height: 130px;
		float: left;
		margin-top: 20px;
	}
	.area-vocacao .robo span {
		display: block;
		margin-top: 10px;
		text-indent: 20px;
		color: #a4bd27 !important;
	}
	.area-vocacao .robo img {
		width: 55px;
	}
	
	/*======= teste de perfil =======*/
	.area-vocacao .testeperfil, .area-vocacao .testeperfil span, .area-vocacao .testeperfil img {
		display: none;
	}

	/*=================================== AREA JOGOS ==============================*/

	.titulo-jogos {
		width: 40%;
		float: left;
		margin: 30px 0 0 20px;
		font-family: 'comic_zine_otregular';
		color: #2a636f;
		font-size: 30px;
		line-height: 30px;
		position: absolute;
		z-index: 999;
	}

	.controle {
		width: 250px;
		height: 180px;
		background-image: url('../images/new/controle.png');
		background-repeat: no-repeat;
		background-size: 250px;
		position: absolute;
		float: left;
		margin: 100px auto;
		z-index: 5;
		clear: both;
	}

	.mesa {
		width: 250px;
		height: 200px;
		background-image: url('../images/new/mesa-jogos.png');
		background-repeat: no-repeat;
		background-size: 250px;
		position: absolute;	
		margin: 250px 0 0 0;
		z-index: 4;
		clear: both;
	}

	.quadrados {
		width: 92%;
		height: 217px;
		background-image: url('../images/new/quadrados-jogos.png');
		background-repeat: no-repeat;
		background-size: 400px;
		position: absolute;
		float: left;
		z-index: 3;
		margin: 370px 0 0 0;
	}

	.jogo1, .jogo2, .jogo3, .jogo4 {
		position: relative;
		z-index: 999;	
		font-size: 25px;
		float: right;
		clear: right;
		font-family: 'comic_zine_otregular';
	}

	.jogo1 {
		margin: -25px 0 0 0;
		color: #6b5d13 !important;
	}

	.jogo2 {
		margin: 0 -70px 0 0;
		color: #d3383b !important;
	}

	.jogo3 {
		margin: 10px -110px 0 0;
		color: #2e47d3 !important;
	}

	.jogo4 {
		margin: 22px -30px 0 0;
		color: #67d55a !important;
	}

	.jogo1:hover, .jogo2:hover, .jogo3:hover, .jogo4:hover {
		text-decoration: none!important;
		text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);
	}

	#sec-4 {
		padding-top: 1px;
		width: 100%;
		height: 530px;
		transition: all 2s;
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url("../images/new/sombra-jogos.png");
	}

	/*============ RODAPE =============*/
	#menu-rodape {
		background-color: #074776!important;
		height: 100px!important;
		position: relative;
		z-index: 10;
	}

	#menu-rodape li {
		margin: 40px 1px 0 1px !important;
	}
	#menu-rodape li a {
		color: #FFF !important;
		font-size: 10px !important;	
	}

	#social {
		display: none!important;
	}

	.img-rodape {
		float: none !important;
		margin: 20px auto !important;
		display: block !important;
	}
	
	#navbar-wrap {
		float: right !important;
		margin-top: 15px !important;
		width: 100% !important;
	}
 

}







/*======================================================================== TABLET ============================================================================*/
@media screen and (min-width: 501px) and (max-width: 999px ) {
	
	.hidden-tablet { display: none !important; }
	.visible-tablet { display: block; }

	#navbar-wrap {
		width: 100% !important;
	}
	#rtopo {
		float: right !important;
	}
	#logo {
		margin-top: 5px !important;
	}

	.estudantes {
		width: 95%;
		margin-top: -100px;
		position: relative;
		z-index: 100;
	}

	.topo-tablet {
		display: block;
	}

	.box-titulos {
		width: 40%;
		float: left;
		margin-top: 70px;
		margin-left: 5%;
	}

	#sec-1 .dir {
		height: 350px;
		width: 40%;
		margin-right: 5%;
		float: right;
		background: url("../images/new/linhaverdetopo-tablet.png") left;
		background-repeat: no-repeat;
		margin-top: 0px;
		position: relative;
		z-index: 101;
	}

	.box-titulos .h5 {
		text-align: center;
	}

	.parallax_binario {
		display: none;
	}
	.banner {
		width: 95%;
		height: 83px;
		margin: 10px auto;
	}
	.banner img {
		width: 90%;
	}
	.gestor-apoios {
		margin: 40px auto;
		float: left;
		width: 100%;
		line-height: 14px;
	}
	.gestor-apoios span {
		display: block;
		margin-bottom: 10px;
		font-size: 13px;
		text-align: left;
	}
	.gestor-apoios div {
		float: left;
		/*display: inline-block;*/
		width: 18%;
		height: 60px;
		font-size: 10px;
		margin-right: 1%;
	}
	.gestor-apoios div a {
		color: #000 !important;
	}
	.gestor-apoios div a:hover {
		text-decoration: none !important;
	}
	.barra-formometro {
		width: 100%;
		height: auto;
		display: table;
		background-color: #f2f2f2;
		position: relative;
		z-index: 1000;
	}

	.barra-formometro .count {
		width: 32%;
		height: 80px;
		display: inline-block;
		margin: 10px auto;
		text-align: center;
		color: #a4bd27;
		font-weight: bold;
	}

	.barra-formometro .count p {
		font-size: 11px;
	}
	.barra-formometro .count .num {
		color:#FFF;
		background-color: #6db32a;
		width: 20px;
		height: 30px;
		text-align: center;
		padding-top: 4px;
		font-size: 20px;
		border-radius: 5px;
		display: inline-block;
		margin: 0 1px 0 1px;
	}

	.linha-fundo {
		width: 335px;
		height: 963px;
		background: url("../images/new/fundo-cel.png") no-repeat;
		background-size: 100%;
		position: absolute;
		margin-top: 120px;
		display: none;
		z-index: 100;
		/*margin-left: 5%;*/
	}

	#sec-2 {
		padding-top: 1px;
		width: 100%;
		height: 650px;
		position: relative;
	}

	.fundo-sec-2 {
		display: none;
	}

	.fundo-sec-2-cel {
		width: 100%;
		height: 650px;
		background-size: auto 100%;
		background-position: center center;
		background-repeat: no-repeat;
		background-image: url("../images/new/fundotudonovo.png");
		position: absolute;
	}

	.area-comece {
		width: 40%;
		margin-top: 220px;
		right: 8%;
		position: absolute;
		z-index: 999;
		float: right;
	}

	.area-comece p {
		font-family: 'comic_zine_otregular';
		color: #FFF;
		font-size: 50px;
		line-height: 45px;
		display: none;
		text-align: center;
	}

	.botao-comece {
		width: 99%;
		height: 25px;
		border: solid 2px #FFF;
		margin-top: 15px;
		border-radius: 40px;
		text-align: center;
		padding-top: 2px;
		font-size: 14px;
	}
	.botao-comece.btlogin {
		margin-top: 20px;
		background-color: #a4bd27;
	}
	.area-engrenagens {
		width: 110px;
		height: 80px;
		float: right;
		margin:50px 20% 0 0;
	}

	.area-engrenagens .engr1 {
		float: left;
		width: 50px;
		height: 50px;
		background: url("../images/new/engrenagem1.png") no-repeat center center;
		/*background-size: 30px 31px;*/
	}
	.area-engrenagens .engr2 {
		float: right;
		margin:25px 10px 0 0;
		width: 50px;
		height: 50px;	
		background: url("../images/new/engrenagem2.png") no-repeat center center;
		/*background-size: 25px 25px;*/
	}


	/* =============== AREA VOCAÇÃO =================== */
	#sec-3 {
		padding-top: 1px;
		width: 100%;
		height: 750px;
		transition: all 2s;
	}

	.area-vocacao {
		display: table;
		width: 100%;
		height: auto;
		/*margin-left: 50px;*/
		font-size: 11px;
		text-align: center;
		font-weight: bold;
		position: relative;
		z-index: 999;
	}
	.area-vocacao:hover a{
		text-decoration: none!important;
	}

	.area-vocacao p {
		font-family: 'comic_zine_otregular';
		color: #FFF;
		font-size: 45px;
		width: 60%;
		height: 40px;
		line-height: 40px;
		margin: 180px 1% 0 0;
		float: right;
		font-weight: normal;
		display: none;
	}

	.area-vocacao div {
		display: none;
	}

	.area-vocacao img {
		width: 60px;
	}

	/*======= curriculos =======*/
	.area-vocacao .curriculos {
		width: 30%;
		height: 130px;
		float: left;
		margin-top: 150px;
		margin-left: 20px;
	}
	.area-vocacao .curriculos span {
		display: block;
		/*float: right;*/
		margin-top: 3px;
		color: #a4bd27 !important;
	}
	/*======= carreira =======*/
	.area-vocacao .carreira {
		width: 30%;
		height: 130px;
		float: left;
		margin-top: 150px;
	}
	.area-vocacao .carreira span {
		display: block;
		margin-top: 10px;
		color: #a4bd27 !important;
	}
	/*======= simulador =======*/
	.area-vocacao .simulador {
		width: 30%;
		height: 130px;
		float: left;
		margin-top: 150px;
	}
	.area-vocacao .simulador span {
		display: block;
		margin-top: 10px;
		margin-right: 20px;
		color: #a4bd27 !important;
	}
	.area-vocacao .simulador img {
		width: 100px;
	}

	/*======= tutor/bussola =======*/
	.area-vocacao .tutor {
		width: 30%;
		height: 130px;
		float: left;
		margin-top: 20px;
		margin-left: 20px;
	}
	.area-vocacao .tutor span {
		display: block;
		margin-top: 10px;
		color: #a4bd27 !important;
	}
	/*======= vagas =======*/
	.area-vocacao .vagas {
		width: 30%;
		height: 130px;
		float: left;
		margin-top: 20px;
	}
	.area-vocacao .vagas span {
		display: block;
		margin-top: 10px;
		color: #a4bd27 !important;
	}
	.area-vocacao .vagas img {
		width: 100px;
	}
	/*======= robo de vagas =======*/
	.area-vocacao .robo {
		width: 30%;
		height: 130px;
		float: left;
		margin-top: 20px;
	}
	.area-vocacao .robo span {
		display: block;
		margin-top: 10px;
		text-indent: 20px;
		color: #a4bd27 !important;
	}
	.area-vocacao .robo img {
		width: 75px;
	}
	
	/*======= teste de perfil =======*/
	.area-vocacao .testeperfil, .area-vocacao .testeperfil span, .area-vocacao .testeperfil img {
		display: none;
	}

	/*=================================== AREA JOGOS ==============================*/

	.titulo-jogos {
		width: 230px;
		float: left;
		margin: -80px 0 0 50px;
		font-family: 'comic_zine_otregular';
		color: #2a636f;
		font-size: 50px;
		line-height: 40px;
		position: absolute;
		z-index: 999;
	}

	.controle {
		width: 70%;
		height: 428px;
		background-image: url('../images/new/controle.png');
		background-repeat: no-repeat;
		background-size: 100%;
		position: relative;
		margin: 150px auto;
		z-index: 5;
	}

	.mesa {
		width: 500px;
		height: 453px;
		background-image: url('../images/new/mesa-jogos.png');
		background-repeat: no-repeat;
		background-size: 100%;
		position: relative;
		margin: -250px auto;
		z-index: 4;
	}

	.quadrados {
		width: 736px;
		height: 217px;
		background-image: url('../images/new/quadrados-jogos.png');
		background-repeat: no-repeat;
		position: relative;
		float: left;
		z-index: 3;
		margin: 0px 0 0 0;
	}

	.jogo1, .jogo2, .jogo3, .jogo4 {
		position: relative;
		z-index: 999;
		clear: right;
	}

	.jogo1 {
		float: right;
		margin: -20px 6% 0 0;
		font-family: 'comic_zine_otregular';
		color: #6b5d13 !important;
		font-size: 40px;
		clear: right;
	}

	.jogo2 {
		float: right;
		margin: 5% -60px 0 0;
		font-family: 'comic_zine_otregular';
		color: #d3383b !important;
		font-size: 40px;
		clear: right;
	}

	.jogo3 {
		float: right;
		margin: 8% -40px 0 0;
		font-family: 'comic_zine_otregular';
		color: #2e47d3 !important;
		font-size: 40px;
		clear: right;
	}

	.jogo4 {
		float: right;
		margin: 16% -30px 0 0;
		font-family: 'comic_zine_otregular';
		color: #67d55a !important;
		font-size: 40px;
		clear: right;
	}

	.jogo1:hover, .jogo2:hover, .jogo3:hover, .jogo4:hover {
		text-decoration: none!important;
		text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);
	}
	#sec-4 {
		padding-top: 1px;
		width: 100%;
		height: 950px;
		transition: all 2s;
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url("../images/new/sombra-jogos.png");
	}
	/*============ RODAPE =============*/
	#menu-rodape {
		background-color: #074776!important;
		height: 100px!important;
		/*margin:  -40px 0 0 0!important;*/
		position: relative;
		z-index: 10;
	}

	#menu-rodape li {
		margin-top: 40px !important;
	}
	#menu-rodape li a {
		color: #FFF !important;
		font-size: 16px !important;	
	}

	#social {
		display: none!important;
	}

	.img-rodape {
		display: inline-block;
		margin-bottom: 30px;
	}
}














/*================================================================================ DESKTOP =======================================================================*/
@media screen and (min-width: 1000px) {

	.hidden-desktop { display: none !important; }
	.visible-desktop { display: block; }

	#rtopo {
		min-width: 0 !important; 
		width: 300px !important; 
		margin:0 0 0 700px; 
		height:40px;
	}
	
	#sec-1 .esq {
		width: 700px;
		float: left;
	}

	.estudantes {
		width: 670px;
		float: left;
		margin-top: -50px;
	}	
	
	.banner {
		width: 635px;
		float: left;
		height: 83px;
		margin: 10px 0 0 70px;
	}

	.banner img {
		width: 565px;
	}

	.gestor-apoios {
		margin: 20px 0 0 60px;
		float: left;
		width: 615px;
		line-height: 14px;
	}

	.gestor-apoios span {
		display: block;
		margin-bottom: 10px;
		font-size: 10px;
		text-align: left;
	}
	.gestor-apoios div {
		float: left;
	}
	.gestor-apoios div a {
		color: #000 !important;
	}
	.gestor-apoios div a:hover {
		text-decoration: none !important;
	}
	.gestor-apoios .gestor {
		width: 120px;
	}
	.gestor-apoios .apoio {
		width: 80px;
		margin-left: 20px;
	}
	.gestor-apoios .apoio img {
		height: 35px;
	}
	.gestor-apoios .mec {
		width: 120px;
		text-align: center;
		font-size: 12px;
	}
	.gestor-apoios .iniciativa {
		width: 140px;
		text-align: center;
		font-size: 12px;
	}
	.gestor-apoios .gov img {
		width: 110px;
	}

	/*================================= BARRA CONTADORES ===============================*/
	.barra-formometro {
		width: 100%;
		height: 150px;
		display: block;
		background-color: #f2f2f2;
		position: relative;
		z-index: 1000;
	}

	.barra-formometro .count {
		width: 300px;
		height: 120px;
		float: left;
		margin: 20px 16px 0 16px;
		text-align: center;
		color: #a4bd27;
		font-weight: bold;
	}

	.barra-formometro .count .num {
		color:#FFF;
		background-color: #6db32a;
		width: 37px;
		height: 40px;
		text-align: center;
		padding-top: 14px;
		font-size: 35px;
		border-radius: 5px;
		display: inline-block;
		margin: 0 2px 0 2px;
	}
	
	.parallax_binario{
		position:absolute;
		top:700px;
		right: 50px;
		background:url('../images/new/binariogrande.png')no-repeat center center;
		width:801px;
		height:441px;
	}

	.linha-fundo {
		width: 801px;
		height: 1999px;
		background: url("../images/new/teste.png") center center no-repeat;
		position: absolute;
		left: 50%;
		margin-left: -360px;
		display: none;
		z-index: 100;
	}

	#sec-2 {
		padding-top: 1px;
		width: 100%;
		height: 825px;
		/*margin-top: -50px;*/
		position: relative;
		/*background-color: #007FC2;*/
	}

	.fundo-sec-2 {
		width: 100%;
		height: 875px;
		background-size: 100% 100%;
		background-position: center center;
		background-repeat: no-repeat;
		background-image: url("../images/new/fundotudonovo.png");
		position: absolute;
		display: none;
	}

	.area-comece {
		width: 360px;
		height: 290px;
		margin: 150px 0 0 585px;
		position: relative;
		z-index: 999;
		float: right;
	}

	.area-comece p {
		font-family: 'comic_zine_otregular';
		color: #FFF;
		font-size: 60px;
		display: none;
	}

	.botao-comece {
		width: 250px;
		height: 34px;
		border: solid 2px #FFF;
		margin-top: 15px;
		border-radius: 40px;
		text-align: center;
		margin-left: 30px;
		padding-top: 7px;
		font-size: 14px;
	}

	.area-engrenagens {
		width: 110px;
		height: 100px;
		float: left;
		margin:50px 0 0 50px;
	}

	.area-engrenagens .engr1 {
		float: left;
		width: 49px;
		height: 50px;
		background: url("../images/new/engrenagem1.png") no-repeat center center;
	}
	.area-engrenagens .engr2 {
		float: right;
		margin:40px 10px 0 0;
		width: 44px;
		height: 44px;	
		background: url("../images/new/engrenagem2.png") no-repeat center center;
	}
	.botao-comece.btlogin {
		margin-top: 40px;
		background-color: #a4bd27;
	}

	#sec-3 {
		padding-top: 1px;
		width: 100%;
		height: 975px;
		transition: all 2s;
		margin-top: -50px;
	}
	/* ==================================== AREA VOCAÇÃO ================================ */

	.area-vocacao {
		display: table;
		width: 900px;
		height: auto;
		margin-left: 50px;
		font-size: 15px;
		text-align: center;
		font-weight: bold;
		position: relative;
		z-index: 999;
	}
	.area-vocacao:hover a{
		text-decoration: none!important;
	}

	.area-vocacao p {
		font-family: 'comic_zine_otregular';
		color: #FFF;
		font-size: 45px;
		width: 270px;
		line-height: 40px;
		margin: 240px 0 0 300px;
		font-weight: normal;
		display: none;
	}

	.area-vocacao div {
		display: none;
	}

	/*======= curriculos =======*/
	.area-vocacao .curriculos {
		width: 180px;
		height: 170px;
		float: left;
		margin-top: -130px;
		margin-left: 0px;
	}
	.area-vocacao .curriculos span {
		display: block;
		/*float: right;*/
		margin-top: 3px;
		color: #a4bd27 !important;
	}
	.area-vocacao .curriculos img {
		margin-top: 40px;
	}
	.area-vocacao .curriculos:hover {
		background-image: url("../images/new/mouseover.png");
		background-position: center center;
		background-repeat: no-repeat;
		transition: background-image 0.5s;
		-moz-transition: background-image 0.5s;
		-webkit-transition: background-image 0.5s;
	}

	/*======= carreira =======*/
	.area-vocacao .carreira {
		width: 180px;
		height: 170px;
		float: right;
		margin-top: -100px;
		margin-right: 90px;
	}
	.area-vocacao .carreira span {
		display: block;
		margin-top: 10px;
		color: #a4bd27 !important;
	}
	.area-vocacao .carreira img {
		margin-top: 40px;
	}
	.area-vocacao .carreira:hover {
		background-image: url("../images/new/mouseover.png");
		background-position: center center;
		background-repeat: no-repeat;
		transition: background-image 0.5s;
		-moz-transition: background-image 0.5s;
		-webkit-transition: background-image 0.5s;
	}




	/*======= simulador =======*/
	.area-vocacao .simulador {
		width: 220px;
		height: 200px;
		float: left;
		margin-top: 60px;
		margin-left: -80px;
		clear: left;
	}
	.area-vocacao .simulador span {
		display: block;
		margin-top: 10px;
		margin-right: 20px;
		color: #a4bd27 !important;
	}
	.area-vocacao .simulador img {
		margin-top: 35px;
		margin-left: -10px;
		width: 150px;
	}
	.area-vocacao .simulador:hover {
		background-image: url("../images/new/mouseover-g.png");
		background-position: center center;
		background-repeat: no-repeat;
		transition: background-image 0.5s;
		-moz-transition: background-image 0.5s;
		-webkit-transition: background-image 0.5s;
	}


	/*======= tutor/bussola =======*/
	.area-vocacao .tutor {
		width: 180px;
		height: 170px;
		float: right;
		margin-top: 40px;
		clear: right;
		margin-right: 0px;
	}
	.area-vocacao .tutor span {
		display: block;
		margin-top: 10px;
		margin-left: 10px;
		color: #a4bd27 !important;
	}
	.area-vocacao .tutor img {
		margin-top: 35px;
	}
	.area-vocacao .tutor:hover {
		background-image: url("../images/new/mouseover.png");
		background-position: center center;
		background-repeat: no-repeat;
		transition: background-image 0.5s;
		-moz-transition: background-image 0.5s;
		-webkit-transition: background-image 0.5s;
	}

	/*======= vagas =======*/
	.area-vocacao .vagas {
		width: 220px;
		height: 200px;
		float: left;
		margin-top: 40px;
		margin-left: 20px;
		clear: left;
	}
	.area-vocacao .vagas span {
		display: block;
		margin-top: 10px;
		margin-right: 20px;
		color: #a4bd27 !important;
	}
	.area-vocacao .vagas img {
		margin-top: 35px;
		margin-left: -10px;
		width: 150px;
	}
	.area-vocacao .vagas:hover {
		background-image: url("../images/new/mouseover-g.png");
		background-position: center center;
		background-repeat: no-repeat;
		transition: background-image 0.5s;
		-moz-transition: background-image 0.5s;
		-webkit-transition: background-image 0.5s;
	}


	/*======= robo de vagas =======*/
	.area-vocacao .robo {
		width: 220px;
		height: 200px;
		float: right;
		margin-top: -20px;
		margin-right: 80px;
		clear: right;
	}
	.area-vocacao .robo span {
		display: block;
		margin-top: 10px;
		margin-right: 20px;
		text-indent: 20px;
		color: #a4bd27 !important;
	}
	.area-vocacao .robo img {
		margin-top: 35px;
	}
	.area-vocacao .robo:hover {
		background-image: url("../images/new/mouseover-g.png");
		background-position: center center;
		background-repeat: no-repeat;
		transition: background-image 0.5s;
		-moz-transition: background-image 0.5s;
		-webkit-transition: background-image 0.5s;
	}

	/*======= teste de perfil =======*/
	.area-vocacao .testeperfil {
		width: 220px;
		height: 200px;
		float: left;
		margin-top: -120px;
		clear: left;
		margin-left: 250px;
	}
	.area-vocacao .testeperfil span {
		display: block;
		margin-top: 5px;
		text-align: center;
		color: #a4bd27 !important;
	}
	.area-vocacao .testeperfil img {
		margin-top: 35px;
		width: 150px;
	}
	.area-vocacao .testeperfil:hover {
		background-image: url("../images/new/mouseover-g.png");
		background-position: center center;
		background-repeat: no-repeat;
		transition: background-image 0.5s;
		-moz-transition: background-image 0.5s;
		-webkit-transition: background-image 0.5s;
	}

	/*efeito zoom em todos icones*/
	.area-vocacao div a img {
		transition: all 0.3s;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;	
	}
	.area-vocacao div:hover a img {
		transform: scale(1.1);
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		transition: all 0.4s;
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
	}

	/*=================================== AREA JOGOS ==============================*/

	.titulo-jogos {
		width: 230px;
		float: left;
		margin: 130px 0 0 145px;
		font-family: 'comic_zine_otregular';
		color: #2a636f;
		font-size: 50px;
		line-height: 40px;
		position: absolute;
		z-index: 999;
	}

	.parallax-controle {
		width: 1000px;
		height: 600px;
		margin: 230px auto;
		position: absolute;
		z-index: 1001;
	}
	.parallax-controle div {
		/*display: none;*/
	}

	.parallax-controle .controle {
		width: 660px;
		height: 428px;
		background-image: url('../images/new/controle.png');
		background-repeat: no-repeat;
		position: relative;
		float: right;
		margin: -200px 217px 0 0;
		z-index: 5;
	}

	.parallax-controle .mesa {
		width: 653px;
		height: 453px;
		background-image: url('../images/new/mesa-jogos.png');
		background-repeat: no-repeat;
		position: relative;
		float: left;
		margin: -170px 0 0 -300px;
		z-index: 4;
	}

	.parallax-controle .quadrados {
		width: 736px;
		height: 217px;
		background-image: url('../images/new/quadrados-jogos.png');
		background-repeat: no-repeat;
		position: relative;
		float: left;
		z-index: 3;
		margin: -340px 0 0 0;
	}

	.jogo1, .jogo2, .jogo3, .jogo4 {
		position: relative;
		z-index: 999;	
	}

	.jogo1 {
		float: right;
		margin: -20px 60px 0 0;
		font-family: 'comic_zine_otregular';
		color: #6b5d13 !important;
		font-size: 40px;
		clear: right;
	}

	.jogo2 {
		float: right;
		margin: 25px -200px 0 0;
		font-family: 'comic_zine_otregular';
		color: #d3383b !important;
		font-size: 40px;
		clear: right;
	}

	.jogo3 {
		float: right;
		margin: 85px -220px 0 0;
		font-family: 'comic_zine_otregular';
		color: #2e47d3 !important;
		font-size: 40px;
		clear: right;
	}

	.jogo4 {
		float: right;
		margin: 90px -30px 0 0;
		font-family: 'comic_zine_otregular';
		color: #67d55a !important;
		font-size: 40px;
		clear: right;
	}

	.jogo1:hover, .jogo2:hover, .jogo3:hover, .jogo4:hover {
		text-decoration: none!important;
		text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);
	}
	#sec-4 {
		padding-top: 1px;
		width: 100%;
		height: 875px;
		transition: all 2s;
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url("../images/new/sombra-jogos.png");
	}
	/*============ RODAPE =============*/
	#menu-rodape {
		background-color: #074776!important;
		height: 100px!important;
		/*margin:  -40px 0 0 0!important;*/
		position: relative;
		z-index: 10;
	}

	#menu-rodape li {
		margin-top: 40px !important;
	}
	#menu-rodape li a {
		color: #FFF !important;
		font-size: 16px !important;	
	}

	#social {
		display: none!important;
	}

}



/*=========================================================================== ELEMENTOS GERAIS ==================================================================*/


/* texto patrocinadores não mais usado
.banner .box-texto {
	font-size: 9px;
	color: #458797;
	float: left;
	width: 20px;
	height: 83px;
}
.banner .box-texto .texto {
	-webkit-transform:rotate(270deg);
	-moz-transform:rotate(270deg);
	-o-transform: rotate(270deg);
	text-indent: -58px;
}
fim texto patrocinadores não mais usado */

/* setas do banner
.banner .setaesq {
	float: right;
	margin: 10px 10px 0 0;
	display: none;
}
.banner .setadir {
	float: right;
	margin: -30px 10px 0 0;
	display: none;
}
fim setas do banner */


.botao-sec1 {
	width: 255px;
	height: 31px;
	border-radius: 50px;
	border: solid 2px #eaeaea;
	color: #FFFFFF;
	margin: 15px 0 0 25px;
	text-align: center;
	font-size: 14px;
	padding-top: 4px;
	transition: background-color 0.5s;
	-moz-transition: background-color 0.5s;
	-webkit-transition: background-color 0.5s;
}

.botao-sec1 a {
	color: #FFFFFF!important;
}

.botao-sec1.btestudantes {
	margin-top: 36px;
	background-color: #4ab9d5;
}
.botao-sec1.btprofessores {
	background-color: #458797;
}
.botao-sec1.btempresas {
	background-color: #a4bd27;
}

.botao-sec1:hover {
	background-color: #164465;
	transition: background-color 0.5s;
	-moz-transition: background-color 0.5s;
	-webkit-transition: background-color 0.5s;
}
.botao-sec1:hover a {
	text-decoration: none !important;
}

.botao-comece-login, .botao-comece-cadastre, .botao-comece-saiba {
	display: none;
}

.botao-comece:hover {
	background-color: #164465;
	transition: background-color 0.3s;
}

.botao-comece.btlogin:hover {
	background-color: #88a204;
	transition: background-color 0.3s;
}

.botao-comece a {
	color: #FFF!important;
}

.botao-comece:hover a {
	text-decoration: none !important;
}

.girar-h {
	transform: rotate(720deg);
	transition: all 2s;
}
.girar-ah {
	transform: rotate(-720deg);
	transition: all 2s;
}


/*================== parallax ===============*/



.bandeiras {
	width: 90px;
	float: right;
	height: 30px;
	margin-top: 5px;
}

.bandeiras img {
	width: 25px;
	margin: 7px 3px 0 0;
	cursor: pointer;
}

#navbar-wrap > #menu-icon:first-of-type  {
	display: none !important;
}