@charset "utf-8";

*{
	margin:0;
	padding:0;
	border:0;
	box-sizing:border-box;
	-moz-box-sizing: border-box;
}

@font-face
{
	font-family: 'Yanone';
	src: url('../fonts/yanone_kaffeesatz_light-webfont.eot'); /* IE9 Compat Modes */
	src: url('../fonts/yanone_kaffeesatz_light-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('../fonts/yanone_kaffeesatz_light-webfont.woff') format('woff'), /* Modern Browsers */
	     url('../fonts/yanone_kaffeesatz_light-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('../fonts/YanoneKaffeesatz-Light.otf')  format('opentype'), 
	     url('../fonts/yanone_kaffeesatz_light-webfont.svg#svgYanone') format('svg'); /* Legacy iOS */
}

body{
	background-color:#192834;
}

h1{
	opacity:0;
}

h2, footer{
	display:block;
	float:left;
	width:100%;
	text-align:center;
	padding:20px 0;
	color:#4D6472;
	background-color:#192834;
	font-family:Yanone;
	font-size:2em;
	font-weight:normal;
	box-shadow:0 -5px 20px #222;
}

footer{
	box-shadow:none;
	font-size:1em;
}



/* Menu */

nav#menu{
	display:block;
	position:fixed;
	right:0;
	top:0;
	z-index:10;
	width:100%;
	padding:30px 0 0 0;
	transition:all ease-in-out 0.6s;
}

nav#menu *{
	list-style:none;
}

nav#menu ul{
	margin:0 auto;
	width:770px;
}

nav#menu ul li:last-child div.itemMenuCircular{
	margin:0;
}

nav#menu ul li:last-child div.itemMenuCircular2{
	margin:0;
}

nav#menu div.itemMenuCircular{
	display:block;
	float:left;
	margin: 0 30px 0 0;
	width:130px;
	height:130px;
	border-radius:65px;
	background-color:#243642;
	box-shadow: 0 0 10px 0 #000;
	padding:5px;
}

nav#menu div#menuWebdesign{
	display:block;
	float:left;
	border:1px solid #FFF;
	width:200px;
	height:500px;
}

nav#menu div.itemMenuCircular div.sombraMenu{
	display:block;
	position:relative;
	width:90px;
	height:125px;
	overflow:hidden;
	z-index:3;
	left:30px;
	top:-2px;
	border-radius:0 60px 60px 0;
}

nav#menu div.itemMenuCircular div.sombraMenu div{
	display:block;
	margin:2px 0 0 12px;
	width:79px;
	height:120px;
	box-shadow: 0 0 6px 2px #243642;
}

div#logoWebdesign{
	background:#243642 url(../images/logo-webdesign.svg) -50px center;
}

div#logoGraphicDesign{
	background:#243642 url(../images/logo-graphic-design.svg) -50px center;
}

div#logoLogos{
	background:#243642 url(../images/logo-logos.svg) -50px center;
}

div#logoPhotos{
	background:#243642 url(../images/logo-photos.svg) -50px center;
}

div#logoAll{
	background:#243642 url(../images/logo-all-jobs.svg) -50px center;
}

div#logoMe{
	background:#243642 url(../images/logo-me.svg) -50px center;
}

nav#menu div.itemMenuCircular div.mascaraMenu{
	display:block;
	position:relative;
	top:-125px;
	width:55px;
	height:120px;
	border-radius:60px 0 0 60px;
	overflow:hidden;
}

div#conjuntoMenuSites, div#conjuntoMenuGraficos, div#conjuntoMenuLogos, div#conjuntoMenuFotos, div#conjuntoMenuTodos, div#conjuntoMenuMe{
	display:block;
	position:relative;
	width:120px;
	height:120px;
	border-radius:60px;
	transform:rotate(270deg);
	-webkit-transform:rotate(270deg);
	transition:all ease-in-out 0.3s;
}

nav#menu div.itemMenuCircular img{
	margin:40px 0 -5px 0;
}

nav#menu div.itemMenuCircular a{
	display:block;
	position:relative;
	top:-30px;
	left:30px;
	width:60px;
	height:120px;
	padding:7px 17px 0 0;
	border-radius:60px 0 0 60px;
	text-align:center;
	transition:all ease-in-out 0.3s;
	font-family:yanone;
	text-decoration:none;
	font-size:0.7em;
}

a#abrirSites, a#abrirGraficos, a#abrirLogos, a#abrirFotos, a#abrirTodos, a#abrirMe{
	color:#FFF;
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
}

a#abrirSites{
	background-color:#DC9B7C;
}

a#abrirGraficos{
	background-color:#E2A900;
}

a#abrirLogos{
	background-color:#B7C72C;
}

a#abrirFotos{
	background-color:#A2CFF0;
}

a#abrirTodos{
	background-color:#8F88BA;
}

a#abrirMe{
	background-color:#717175;
}


a#fecharSites, a#fecharGraficos, a#fecharLogos, a#fecharFotos, a#fecharTodos, a#fecharMe{
	background-color:#FFF;
	transform:rotate(270deg);
	-webkit-transform:rotate(270deg);
	margin-top:-60px;
}

a#fecharSites{
	color:#DC9B7C;
}

a#fecharGraficos{
	color:#E2A900;
}

a#fecharLogos{
	color:#B7C72C;
}

a#fecharFotos{
	color:#A2CFF0;
}

a#fecharTodos{
	color:#8F88BA;
}

a#fecharMe{
	color:#717175;
}

a#esconderOMenu, a#mostrarOMenu{
	display:block;
	float:none;
	position:absolute;
	top:0;
	left:50%;
	width:100px;
	margin-left:-50px;
	text-align:center;
	color:#CCC;
	background-color:#243642;
	padding:5px 7px;
	font-size:0.8em;
	font-family:yanone;
	border-radius:0 0 5px 5px;
	cursor:pointer;
	transition:color 0.3s, background-color 0.3s, margin 0.6s;
	transition-timing-function:ease-in-out;
	box-shadow: 0 0 10px 0 #000;
}

a#mostrarOMenu{
	margin: -140px 0 0 -50px;
}

a#esconderOMenu:hover, a#mostrarOMenu:hover{
	color:#FFF;
	background-color:#435f72;
}


/* ---------- Fim do Menu ---------- */



/* Trabalhos ---------- */

section{
	display:block;
	position:relative;
	left:22.5px;
	width:1050px;
	margin:0 auto;
}

article.portfolioFechado{
	display:block;
	position:relative;
	left:0;
	float:left;
	width:300px;
	height:300px;
	margin:0 50px 50px 0;
	border-radius:150px;
	transition:all 0.3s;
	box-shadow: 0 0 20px 0 #000;
}

article.portfolioFechado div{
	display:block;
	position:relative;
	margin:0;
	width:280px;
	height:280px;
	border-radius:140px;
	overflow:hidden;
	transition:all 0.3s;
}

article.portfolioFechado div img{
	display:block;
	position:static;
	top:50%;
	left:50%;
	margin:0 0 0 -70px;
	border-radius:140px;
	width:150%;
	transition:all 0.3s;
}

article.portfolioFechado h3{
	display:block;
	position:absolute;
	top:-65px;
	left:215px;
	z-index:0;
	width:150px;
	height:150px;
	border-radius:75px;
	padding:30px 0 0 7px;
	opacity:0;
	transition:all 0.3s;
}

article.portfolioFechado h3 img{
	display:block;
	margin:0 auto;
}

article.portfolioFechado div.legenda{
	display:block;
	position:absolute;
	top:-1px;
	left:-1px;
	width:282px;
	height:282px;
	transition:all 0.3s;
}

article.portfolioFechado div.legenda p{
	display:block;
	position:static;
	margin-top:290px;
	width:330px;
	height:300px;
	padding:10px 40px;
	color:#FFF;
	font-family:yanone;
	font-size:1em;
	text-align:center;
	transition:all 0.3s;
}

article.portfolioFechado:hover{
	width:350px;
	height:350px;
	border-radius:175px;
	margin:-25px 25px 25px -25px;
}

article.portfolioFechado:hover div{
	width:330px;
	height:330px;
	margin:0;
	border-radius:165px;
}

article.portfolioFechado:hover div img{
	top:50%;
	left:50%;
	margin:0 0 0 -75px;
	border-radius:140px;
}

article.portfolioFechado:hover h3{
	top:-85px;
	left:235px;
	opacity:1;
}

article.portfolioFechado:hover div.legenda{
	top:-1px;
	left:-1px;
	width:332px;
	height:332px;
}

article.portfolioFechado:hover div.legenda p{
	margin-top:250px;
}

article.portfolioAberto{
	display:block;
	position:relative;
	left:0;
	z-index:0;
	float:left;
	width:950px;
	height:750px;
	margin:0 0 25px 25px;
	border-radius:85px;
	transition:all 0.3s;
	box-shadow:0 0 20px #111;
	background-color:#FFF;
}

article.portfolioAberto div{
	display:block;
	position:relative;
	margin:0;
	width:930px;
	height:740px;
	border-radius:75px 75px 85px 85px;
	overflow:hidden;
	transition:all 0.3s;
}

article.portfolioAberto div img{
	display:block;
	position:static;
	top:50%;
	left:50%;
	margin:0 0 0 0;
	transition:all 0.3s;
}

article.portfolioAberto h3{
	display:block;
	position:absolute;
	top:590px;
	left:790px;
	z-index:1;
	width:150px;
	height:150px;
	border-radius:75px;
	padding:30px 0 0 7px;
	opacity:1;
	transition:all 0.3s;
}

article.portfolioAberto h3 img{
	display:block;
	margin:0 auto;
}

article.portfolioAberto div.legenda{
	display:block;
	position:absolute;
	top:580px;
	left:0;
	width:930px;
	height:155px;
	transition:all 0.3s;
	border-radius:0 0 50px 70px;
}

article.portfolioAberto div.legenda p{
	display:block;
	position:static;
	margin-top:110px;
	width:950px;
	height:150px;
	padding:13px;
	color:#FFF;
	font-family:yanone;
	font-size:1em;
	text-align:center;
	transition:all 0.3s;
}

article a{
	color:#FFF;
	transition:all 0.2s;
}

article a:hover{
	color:#000;
}

article.grafico{border:10px solid #E2A900;}
article.grafico h3, article.grafico div.legenda p{background-color:#E2A900;}

article.foto{border:10px solid #A2CFF0;}
article.foto h3, article.foto div.legenda p{background-color:#A2CFF0;}

article.web{border:10px solid #DC9B7C;}
article.web h3, article.web div.legenda p{background-color:#DC9B7C;}

article.logo{border:10px solid #B7C72C;}
article.logo h3, article.logo div.legenda p{background-color:#B7C72C;}


/* --------------- Fim de Trabalhos ----------- */



/* Me ---------- */

article#me{
	background-color:#717175;
}

article#me div img{
	display:block;
	position:static;
	top:0;
	left:0;
	margin:0;
	border-radius:140px;
	transition:all 0.3s;
	width:350px;
}

article#me.portfolioFechado:hover div.legenda p{
	background-color:#717175;
	margin-top:280px;
}

article#me.portfolioAberto{
	height:1030px;
}

article#me.portfolioAberto div img{
	border-radius:65px;
	border:5px solid #FFF;
	margin:10px;
}

article#me.portfolioAberto div.legenda{
	display:none;
}

article#me h3, article.me div.legenda p{
	background-color:#717175;
}

article#me h3 img{
	margin-top:20px;
}

article#me.portfolioAberto h3{
	margin-top:280px;
}

article#me.portfolioFechado div#textoMe, article#me.portfolioFechado form{
	display:block;
	overflow:hidden;
	position:absolute;
	border-radius:0;
	top:20px;
	left:400px;
	width:1px;
	opacity:0;
	transition:all 0.5s;
}

article#me.portfolioAberto div#textoMe, article#me.portfolioAberto form{
	display:block;
	overflow:hidden;
	position:absolute;
	border-radius:0;
	top:20px;
	left:400px;
	width:500px;
	opacity:1;
	transition:all 0.5s;
}

article#me.portfolioAberto form{
	top:420px;
}

article#me.portfolioAberto form div{
	border-radius:0;
	height:35px;
}

div#textoMe p{
	font-family:yanone;
	font-size:1.4em;
	line-height:140%;
	margin-bottom:20px;
	color:#FFF;
}

div#textoMe a{
	color:#000;
}

div#textoMe a:hover{
	color:#FC0;
}

article#me.portfolioFechado div#textoMe, article#me.portfolioFechado article#me form *{
	opacity:0;
	transition:all 0.3s;
}

article#me.portfolioAberto div#textoMe, article#me.portfolioAberto article#me form *{
	opacity:1;
}

article#me form label, article form div#mensagem_counter, article form input[type="radio"], p#submit{
	display:block;
	float:left;
	clear:both;
	font-family:yanone;
	color:#000;
	font-size:1.4em;
}

article#me form label.error{
	display:block;
	float:left;
	margin:-45px 0 0 320px;
	color:#FFF;
	text-align:right;
	background-color:#900;
	padding:7px 14px;
	box-shadow:0 2px 5px #222;
}

article#me form label[for="opiniao"].error{
	margin:-45px 0 0 60px;
}


article#me form input[type="text"], article#me form input[type="email"], article form textarea{
	display:block;
	float:left;
	clear:both;
	font-family:yanone;
	color:#666;
	font-size:1.2em;
	margin-bottom:20px;
	padding:5px;
	width:500px;
	border-radius:5px;
}

article#me form textarea{
	height:130px;
}

article#me form select#opiniao{
	display:block;
	float:left;
	clear:both;
	font-family:yanone;
	color:#666;
	font-size:1.4em;
	border-radius:5px;
	margin:5px 0 10px 0;
}

article#me p#submit input{
	display:block;
	padding:5px 10px;
	background-color:#000;
	color:#FFF;
	font-size:1em;
	font-family:yanone;
	margin-top:20px;
	transition:all 0.3s;
	border-radius:5px;
}

article#me p#submit input:hover{
	background-color:#FC0;
	color:#000;
}

article.me{
	border:10px solid #717175;
}

a.botaoFecharMeEscondido{
	display:block;
	overflow:hidden;
	position:absolute;
	z-index:2;
	top:-20px;
	right:500px;
	color:#000;
	font-family:yanone;
	font-size:3em;
	text-align:center;
	text-decoration:none;
	width:0.5px;
	height:0.5px;
	border-radius:35px;
	background-color:#717175;
	transition:all 0.3s;
}

a.botaoFecharMeAparecendo{
	display:block;
	overflow:hidden;
	position:absolute;
	z-index:2;
	top:-20px;
	right:60px;
	color:#000;
	font-family:yanone;
	font-size:3em;
	text-align:center;
	text-decoration:none;
	line-height:0.9em;
	width:65px;
	height:65px;
	border:5px solid #717175;
	border-radius:35px;
	background-color:#717175;
	transition:all 0.3s;
}

a#botaoFecharMe:hover{
	color:#FC0;
	background-color:#000;
}

div#backgroundMensagemPosContato{
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:11;
	width:100%;
	height:2000px;
	background: rgba(25, 40, 52, .8);
}

p#mensagemPosContato{
	display:block;
	position:fixed;
	top:50%;
	left:50%;
	z-index:12;
	margin:-40px 0 0 -200px;
	width:400px;
	padding:10px 20px;
	box-shadow:0 2px 10px #111;
	font-size:2em;
	font-family:yanone;
	text-align:center;
	color:#FFF;
	background-color:#717175;
	border-radius:35px;
}

a#botaoFecharMensagemPosContato{
	display:block;
	position:fixed;
	top:50%;
	left:50%;
	z-index:13;
	margin:-70px 0 0 170px;
	width:70px;
	height:70px;
	border-radius:35px;
	background-color:#717175;
	color:#000;
	font-family:yanone;
	font-size:3em;
	text-align:center;
	text-decoration:none;
	transition:all 0.3s;
}

/* ---- Fim do Me ----- */


/* Home -------------------- */

article#primeiraPagina{
	display:block;
	position:relative;
	top:-40px;
	transition:all 0.6s;
	width:100%;
	height:940px;
	background:#192834 url(../images/bg-me.png);
	background-repeat:no-repeat;
	background-position:center bottom;
	overflow:hidden;
}

/* ------------------- helicóptero ------------------- */

article#primeiraPagina div#helicoptero{
	display:block;
	position:absolute;
	top:780px;
	left:2000px;
	animation:helicoptero 30s infinite linear;
	-webkit-animation:helicoptero 30s infinite linear;
}

@keyframes helicoptero {0%{left:2000px; transform:rotateY(0); -webkit-transform:rotateY(0);} 50%{left:-600px; transform:rotateY(0); -webkit-transform:rotateY(0);} 50.1%{left:-600px; transform:rotateY(180deg); -webkit-transform:rotateY(180deg);} 100%{left:2000px; transform:rotateY(180deg); -webkit-transform:rotateY(180deg);}}
@-webkit-keyframes helicoptero {0%{left:2000px; transform:rotateY(0); -webkit-transform:rotateY(0);} 50%{left:-600px; transform:rotateY(0); -webkit-transform:rotateY(0);} 50.1%{left:-600px; transform:rotateY(180deg); -webkit-transform:rotateY(180deg);} 100%{left:2000px; transform:rotateY(180deg); -webkit-transform:rotateY(180deg);}}


article#primeiraPagina div#helicoptero div#semHelice{
	display:block;
	position:absolute;
	width:76px;
	height:26px;
	opacity:0;
	background:url(../images/helicoptero-sem-helice.svg) no-repeat;
	animation:semHelice 0.1s infinite;
	-webkit-animation:semHelice 0.1s infinite;
}

@keyframes semHelice {0%{opacity:0;}50%{opacity:1;}}
@-webkit-keyframes semHelice {0%{opacity:0;}50%{opacity:1;}}

article#primeiraPagina div#helicoptero div#comHelice{
	display:block;
	position:absolute;
	width:76px;
	height:26px;
	opacity:1;
	background:url(../images/helicoptero-com-helice.svg) no-repeat;
	animation:comHelice 0.1s infinite;
	-webkit-animation:comHelice 0.1s infinite;
}

@keyframes comHelice {0%{opacity:1;}50%{opacity:0;}}
@-webkit-keyframes comHelice {0%{opacity:1;}50%{opacity:0;}}


article#primeiraPagina div#helicoptero div#luzParada, article#primeiraPagina div#aviao div#luzParadaAviao{
	display:block;
	position:absolute;
	top:13px;
	left:57px;
	width:5px;
	height:5px;
	background-color:#B7C72C;
	border-radius:2.5px;
	animation:luzParada 2s infinite;
	-webkit-animation:luzParada 2s infinite;
}

@keyframes luzParada {0%{opacity:0;} 5%{opacity:1;} 90%{opacity:1;} 95%{opacity:0;} 100%{opacity:0;}}
@-webkit-keyframes luzParada {0%{opacity:0;} 5%{opacity:1;} 90%{opacity:1;} 95%{opacity:0;} 100%{opacity:0;}}


article#primeiraPagina div#helicoptero div#luzPiscante, article#primeiraPagina div#aviao div#luzPiscanteAviao{
	display:block;
	position:absolute;
	top:3px;
	left:72px;
	width:5px;
	height:5px;
	background-color:#F30;
	border-radius:2.5px;
	animation:luzPiscante 1.5s infinite;
	-webkit-animation:luzPiscante 1.5s infinite;
}

@keyframes luzPiscante {0%{opacity:0;} 0.1%{opacity:1;} 7%{opacity:1;} 7.1%{opacity:0;} 14%{opacity:0;} 14.1%{opacity:1;} 21%{opacity:1;} 21.1%{opacity:0;} 100%{opacity:0;}}
@-webkit-keyframes luzPiscante {0%{opacity:0;} 0.1%{opacity:1;} 7%{opacity:1;} 7.1%{opacity:0;} 14%{opacity:0;} 14.1%{opacity:1;} 21%{opacity:1;} 21.1%{opacity:0;} 100%{opacity:0;}}


/* ----------------- Fim do Helicóptero ---------------------- */

article#primeiraPagina div#aviao{
	display:block;
	position:absolute;
	width:61px;
	height:21px;
	top:600px;
	left:-50px;
	background:url(../images/aviao.svg) no-repeat;
	animation:aviao 45s infinite linear;
	-webkit-animation:aviao 45s infinite linear;
}

@keyframes aviao{0%{left:-450px; top:600px;} 100%{left:2500px; top:700px;}}
@-webkit-keyframes aviao {0%{left:-450px; top:600px;} 100%{left:2500px; top:700px;}}

article#primeiraPagina div#aviao div#luzPiscanteAviao{
	top:0;
	left:5px;
	animation-delay:3s;
	-webkit-animation-delay:3s;
}

article#primeiraPagina div#aviao div#luzParadaAviao{
	top:15px;
	left:17px;
	animation-delay:3s;
	-webkit-animation-delay:3s;
}

article#primeiraPagina div#parapente{
	display:block;
	position:absolute;
	width:56px;
	height:89px;
	top:400px;
	left:-550px;
	background:url(../images/parapente.svg) no-repeat;
	animation:parapente 120s infinite ease-in-out;
	-webkit-animation:parapente 120s infinite ease-in-out;
}

@keyframes parapente{0%{left:-550px; top:400px; transform:rotateY(0); -webkit-transform:rotateY(0);} 20%{left:500px; top:300px; transform:rotateY(0); -webkit-transform:rotateY(0);} 35%{left:1000px; top:350px; transform:rotateY(0); -webkit-transform:rotateY(0);} 50%{left:2000px; top:400px; transform:rotateY(0); -webkit-transform:rotateY(0);} 50.1%{left:2000px; top:400px; transform:rotateY(180deg); -webkit-transform:rotateY(180deg);} 70%{left:1000px; top:350px; transform:rotateY(180deg); -webkit-transform:rotateY(180deg);} 85%{left:500px; top:300px; transform:rotateY(180deg); -webkit-transform:rotateY(180deg);} 100%{left:-550px; top:200px; transform:rotateY(180deg); -webkit-transform:rotateY(180deg);}}
@-webkit-keyframes parapente {0%{left:-550px; top:400px; transform:rotateY(0); -webkit-transform:rotateY(0);} 20%{left:500px; top:300px; transform:rotateY(0); -webkit-transform:rotateY(0);} 35%{left:1000px; top:350px; transform:rotateY(0); -webkit-transform:rotateY(0);} 50%{left:2000px; top:400px; transform:rotateY(0); -webkit-transform:rotateY(0);} 50.1%{left:2000px; top:400px; transform:rotateY(180deg); -webkit-transform:rotateY(180deg);} 70%{left:1000px; top:350px; transform:rotateY(180deg); -webkit-transform:rotateY(180deg);} 85%{left:500px; top:300px; transform:rotateY(180deg); -webkit-transform:rotateY(180deg);} 100%{left:-550px; top:200px; transform:rotateY(180deg); -webkit-transform:rotateY(180deg);}}


article#primeiraPagina div#gaivotas{
	display:block;
	position:absolute;
	width:110px;
	height:95px;
	top:600px;
	left:2500px;
	background:url(../images/gaivotas.svg) no-repeat;
	animation:gaivotas 30s infinite linear;
	-webkit-animation:gaivotas 30s infinite linear;
	animation-delay:10s;
	-webkit-animation-delay:10s;
}

@keyframes gaivotas{
	0%{left:2500px; top:600px; transform: scale(1,1) rotateY(0); -webkit-transform: scale(1,1) rotateY(0);}
	50%{left:-1000px; top:-300px; transform: scale(2,2) rotateY(0); -webkit-transform: scale(2,2) rotateY(0);}
	51%{left:-1000px; top:500px; transform: scale(1,1) rotateY(180deg); -webkit-transform: scale(1,1) rotateY(180deg);}
	99%{left:2500px; top:0; transform: scale(2,2) rotateY(180deg); -webkit-transform: scale(1,1) rotateY(180deg);}
	100%{left:2500px; top:0; transform: scale(2,2) rotateY(0); -webkit-transform: scale(1,1) rotateY(0);}
}

@-webkit-keyframes gaivotas{
	0%{left:2500px; top:600px; transform: scale(1,1) rotateY(0); -webkit-transform: scale(1,1) rotateY(0);}
	50%{left:-1000px; top:-300px; transform: scale(2,2) rotateY(0); -webkit-transform: scale(2,2) rotateY(0);}
	51%{left:-1000px; top:500px; transform: scale(1,1) rotateY(180deg); -webkit-transform: scale(1,1) rotateY(180deg);}
	99%{left:2500px; top:0; transform: scale(2,2) rotateY(180deg); -webkit-transform: scale(1,1) rotateY(180deg);}
	100%{left:2500px; top:0; transform: scale(2,2) rotateY(0); -webkit-transform: scale(1,1) rotateY(0);}
}

/* ----------------- Fim da Home ---------------------- */



@media screen and (max-width: 1165px) {

section{
	display:block;
	position:relative;
	left:22px;
	width:700px;
	margin:0 auto;
}

article.portfolioAberto{
	left:-172px;
	margin:0 0 25px 25px;
	border-radius:85px;
	transition:all 0.3s;
	box-shadow:0 0 20px #111;
	background-color:#FFF;
}

a.botaoFecharMeAparecendo{
	top:-5px;
	right:-108px;
}
}


/* ----------------- page de portfólio ---------------------- */

body#pageDePortfolio > div a{
	display:block;
	position:fixed;
	width:100%;
	text-align:center;
	background-color:#E2A900;
	padding:5px 0;
	font-size:1em;
	font-family:Yanone;
	color:#192834;
	box-shadow:0 -5px 20px #222;
	transition:all 0.3s;
}

body#pageDePortfolio > div a:hover{
	background-color:#FFF;
}

body#pageDePortfolio h1{
	display:block;
	float:left;
	width:100%;
	text-align:center;
	padding:40px 0 20px 0;
	color:#E2A900;
	font-family:Yanone;
	font-size:3em;
	font-weight:normal;
	opacity:1;
}

body#pageDePortfolio article h2{
	box-shadow:none;
	border-top:1px solid #4D6472;
	padding:10px 0 15px 0;
}

body#pageDePortfolio article div{
	display:block;
	float:left;
	width:100%;
	text-align:center;
	margin-bottom:5px;
}

body#pageDePortfolio article div:last-child{
	margin-bottom:60px;
}

body#pageDePortfolio article div img{
	box-shadow:0 5px 10px #222;
}