@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'texgyreadventorregular';
    src: url('../font/texgyreadventor-regular-webfont.eot');
    src: url('../font/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/texgyreadventor-regular-webfont.woff') format('woff'),
         url('../font/texgyreadventor-regular-webfont.ttf') format('truetype'),
         url('../font/texgyreadventor-regular-webfont.svg#texgyreadventorregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body{ background:#0F0F0F; font-family: 'texgyreadventorregular'; text-shadow: 1px 1px #000; padding-top:68px !important; overflow-y: scroll; overflow-x: hidden;}

/* SCROLLBAR CHROME*/
::-webkit-scrollbar {width: 5px;}
/* Track */
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);}
 /* Handle */
::-webkit-scrollbar-thumb { background: #FF3300; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
::-webkit-scrollbar-thumb:window-inactive {	background: #999; width:0px; }

/* --------- HEADER ------------*/
#header{ width:100%; height:68px; background:#1E1E1E; position:fixed; top:0px; left:0px; z-index: 3; -moz-box-shadow: 0px 0px 5px #000; -webkit-box-shadow: 0px 0px 5px #000; box-shadow: 0px 0px 5px #000;-webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out;}
#logo{ height:68px; width:265px; float:left; background:url(../img/bg-logo.png) right top no-repeat; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out;}
#header.show #logo{ width:105px;}
#logo:hover{ width:265px;}
#logo a{ width:100%; height:68px; display:block;}

#SocialMidiaTop{ float:right; height:48px; width:90px; padding:20px 18px 0 18px;}
#SocialMidiaTop a{background:url(../img/socialmidiatop.png) no-repeat; -webkit-transition: background 0.3s linear; -moz-transition: background 0.3s linear; transition: background 0.3s linear; width:27px; height:27px; display:block; float:left; margin-left:2px;}
#SocialMidiaTop a:hover{background:url(../img/socialmidiatop.png) no-repeat;}

#SocialMidiaTop .facebook{ background-position:  0px -27px; }
#SocialMidiaTop .facebook:hover{background-position: 0px 0px;}
#SocialMidiaTop .twitter{ background-position: -29px -27px;}
#SocialMidiaTop .twitter:hover{ background-position: -29px 0px; }
#SocialMidiaTop .devianart{ background-position: -58px -27px; }
#SocialMidiaTop .devianart:hover{ background-position: -58px 0px; }
#SocialMidiaTop .linkedin{ background-position: -86px -27px;;}
#SocialMidiaTop .linkedin:hover{ background-position: -86px 0px;}
#SocialMidiaTop .googleplus{ background-position: -114px -27px;}
#SocialMidiaTop .googleplus:hover{ background-position: -114px 0px;}

nav{ width: 90%; max-width: 535px; float:right;}
.toggleMenu { display: none; position: absolute; top: 0px; right: 0px; background: url("../img/nav.png") no-repeat center; padding: 26px 30px; text-indent:-99999px;-webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out;}
.toggleMenu.showNav{background: url("../img/nav-active.png") no-repeat center;}
.contentNav { list-style: none; *zoom: 1; background:#1E1E1E;}
.contentNav:before,
.contentNav:after { content: " "; display: table;}
.contentNav:after { clear: both;}
.contentNav ul { list-style: none; width: 9em;}
.contentNav a { padding: 26px 15px 28px; color:#CCC; font-size:14px;}
.contentNav a:hover{ color:#FFF;}
.contentNav li { position: relative;}
.contentNav > li { float: left;}
.contentNav > li > .parent { background-image: url("../img/downArrow.png");  background-repeat: no-repeat; background-position: right;}
.contentNav > li > a { display: block;}
.contentNav li  ul { position: absolute; left: -9999px; margin-top: -2px;}
.contentNav > li.hover > ul { left: 0;}
.contentNav li li.hover ul { left: 100%; top: 0; }
.contentNav li li a { display: block; background: #383838; position: relative; z-index:100; border-top: 1px solid #000; padding: 15px 15px 15px;}
.contentNav li li li a { background:#249578; z-index:200; border-top: 1px solid #1d7a62; }

@media screen and (max-width: 950px) {
nav{ width:100%; max-width:none;}
.contentNav{ position:absolute; z-index:2; top:68px; left:0px; width:100%; -moz-box-shadow: 0px 0px 5px #000; -webkit-box-shadow: 0px 0px 5px #000; box-shadow: 0px 0px 5px #000;}
.contentNav a { padding: 21px 15px 23px; color:#CCC; font-size:18px;}
.contentNav > li.hover a.parent{background-color: #5A5A5A;}
.showNav {display: block;}
.contentNav > li {float: none;  border-top: 1px solid #000;}
.contentNav > li > .parent { background-position: 95% 50%; }
.contentNav li li .parent { background-image: url("../img/downArrow.png"); background-repeat: no-repeat; background-position: 95% 50%; }
.contentNav ul { display: block; width: 100%; }
.contentNav > li.hover > ul , .contentNav li li.hover ul { position: static; }
#SocialMidiaTop{ display:none;}
}
@media screen and (max-width: 884px) {
#logo{ width:105px;}
#header.show #logo{ width:105px;}


}
@media screen and (max-width: 240px) {#logo{ width:105px;}#logo:hover{ width:105px;}}

/* --------- BANNER ------------*/
@media screen and (max-width: 1000px) {	.bx-wrapper img { margin:auto; width:100%; } }
.bx-wrapper { position: relative; z-index:1; margin: 0 auto 60px; padding: 0; text-align:center; overflow:hidden;  }
.bx-wrapper img { margin:auto;}
.bx-wrapper .bx-viewport { background: #0A0A0A;}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto { position: absolute;	bottom: -30px; width: 100%;}
ul.bxslider{ height:100%; display:block;}
/* LOADER */
.bx-wrapper .bx-loading { min-height: 50px;	background: url(../img/bx_loader.gif) center center no-repeat #fff; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000;}

/* (NEXT / PREV) */
.bx-wrapper .bx-prev{ left: 10px;	background: url(../img/controls.png) no-repeat 0 -51px;}
.bx-wrapper .bx-next{ right: 10px; background: url(../img/controls.png) no-repeat -43px -51px;}
.bx-wrapper .bx-prev:hover {background-position: 0 0;}
.bx-wrapper .bx-next:hover { background-position: -43px 0;}
.bx-wrapper .bx-controls-direction a { position: absolute; top: 48%; margin-top: -16px; outline: 0; width: 32px; height: 51px; text-indent: -9999px; z-index: 9999;}
.bx-wrapper .bx-controls-direction a.disabled { display: none;}
@media screen and (max-width: 360px) {.bx-wrapper{ display:none;}}
/* -- CONTENT -- */
.content{ max-width:1400px; width:100%; margin:auto;}
@media screen and (min-width: 1400px) {.bgblack{background:#0E0E0E; height:68px; width: -webkit-calc(50% - 700px); width: -moz-calc(50% - 700px); width: calc(50% - 700px); float:left;} }
/*@media screen and (max-width: 1399px) {.bgblack{background:#0E0E0E; height:68px; width:0px; float:left;} }*/
/* --------- SOBRE MIM HOME ------------*/
.SobreMimHome{ width:100%; height:auto; overflow:hidden; background:#1E1E1E;}
.SobreMimHome .box{ width:30%; min-height:120px; float:left; padding:30px 1% 15px 2%; color:#CCCCCC;}
@media screen and (max-width: 600px) {.SobreMimHome .box{ width:96%; min-height:82px; float:left; padding:15px 2% 15px 2%; color:#CCCCCC; text-align: justify; border-bottom:1px solid #333; }}
.SobreMimHome .box h1{ font-size:30px; padding-bottom:15px;}
.SobreMimHome .box h2{ font-size:20px; padding:9px 0 15px 0;}
.SobreMimHome .box span{ color:#FF3300;}
.SobreMimHome .box p{ font-size:16px; text-align:justify;}.SobreMimHome .box p.first{ font-size:14px;}
.SobreMimHome .saibaMais{ float:left; width:100%; height:50px;}
.SobreMimHome .saibaMais a{ font-size:22px; float:right; color:#fff; margin-right:4%;}
.SobreMimHome .saibaMais a span{ color:#FF3300; font-size:32px;}

/* --------- FREELANCEER ------------*/
.Freelancer{ width:100%; min-height:230px; padding-top:50px; overflow:hidden;}
.Freelancer header{ width:23%; float:left; padding:35px 0 0 2%;}
.Freelancer header h3{ font-size:30px; color:#FF3300;}
.Freelancer header span{ font-size:22px; color:#FFF; margin-left:45px;}
.Freelancer .solucoes{ width:75%; height:auto; float:left;}
.solucoes .boxSolucoes{ width:19%; float:left; height:auto; text-align:center; padding:0 3% 0 3%;}
.solucoes .boxSolucoes a{ overflow:hidden; display:block;}
.solucoes .boxSolucoes img{ width:90%; padding:0 5% 0 5%; opacity:1; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.solucoes .boxSolucoes img:hover{opacity:0.5;}
.solucoes .boxSolucoes h4{ color:#FFF; font-size:16px; padding-top:10px;}
.Freelancer .entreemcontato{float:left; width:100%; height:50px; padding-top:20px;}
.Freelancer .entreemcontato a{ width:270px; height:35px; display:block; margin:auto; background:#1E1E1E; text-align:center; font-size:26px; color:#FFF; padding-top:5px; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out;}
.Freelancer .entreemcontato a:hover{ background:#666;}
.Freelancer .entreemcontato a span{ color:#FF3300;}
@media screen and (max-width: 884px) {
.Freelancer header h3{ font-size:22px; color:#FF3300;}
.Freelancer header span{ font-size:17px; color:#FFF; margin-left:15px;}
.solucoes .boxSolucoes h4{ font-size:12px;}
}
@media screen and (max-width: 600px) {
.Freelancer{ padding-top:20px;}
.Freelancer header{ width:96%; float:left; padding:0px 2% 20px 2%; text-align:center;}
.Freelancer .solucoes{ width:100%; height:auto; float:left;}
}
@media screen and (max-width: 360px) {
.solucoes .boxSolucoes{ width:38%; float:left; height:auto; text-align:center; padding:0 6% 15px 6%;}
.Freelancer .entreemcontato a{ width:240px; height:25px; font-size:20px; }
}

/*----------- TOOLTIP ---------------*/
#tooltip{ text-align: center; color: #ccc; max-width:350px; background: #333; position: absolute; z-index: 100; padding: 15px; border:1px solid #666; font-size:12px; line-height:14px; -moz-box-shadow: 0px 0px 5px #000; -webkit-box-shadow: 0px 0px 5px #000; box-shadow: 0px 0px 5px #000; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;}
#tooltip:after{ width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #333; content: ''; position: absolute; left: 50%; bottom: -10px; margin-left: -10px;}
#tooltip.top:after{ border-top-color: transparent; border-bottom: 10px solid #666; top: -20px; bottom: auto;}
#tooltip.left:after { left: 10px; margin: 0;}
#tooltip.right:after { right: 10px; left: auto; margin: 0; }

/* --------- FOOTER ------------*/
footer{ width:100%; min-height:80px; background:#FFF; overflow:hidden;}
footer .plus{ float:left; width:47%; height:50px; padding-top:30px; padding-left:3%;}
footer .likebox{ float:left; width:50%; height:75px; padding-top:5px;}
footer .likebox .fb-like-box{ float:right;}
.copyright{ width:100%; background:#0F0F0F; min-height:25px; overflow:hidden;}
.textcopyright{ width:47%; float:left; text-align:left; padding-left:3%; font-size:10px; color:#CCC; padding-top:5px;}
.designby{ width:47%; float:left; text-align:right; padding-right:3%; padding-top:5px;}
@media screen and (max-width: 600px) { 
footer .plus{ float:left; width:100%; padding-top:30px;}
footer .likebox{ float:left; width:100%; padding-top:5px;}
footer .likebox .fb-like-box{ float:left;}
}

.backtotop { -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; position: fixed; right: 20px; bottom: 38px; width: 45px;    height: 45px; display: block; z-index: 9; border: 3px solid #FF3300; background: url(../img/top.png) center no-repeat;}
.backtotop.hidden { bottom: -100px;}

/* --------------- PAGINAS -----------------*
/*--------------------------------------------*/

.TitlePaginas{ width:100%; height:75px; background:#0A0A0A; margin-top:30px;}
.TitlePaginas h1{ font-size:30px; color:#CCCCCC; padding:25px 0 0 40px; background:url(../img/ico-title.png) no-repeat 15px 29px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
.TitlePaginas h1 span{color:#FF3300;}
.TitlePaginas h1:hover{ background:url(../img/ico-title.png) no-repeat 20px 29px;}

.Main{ width:100%; background:#FFF; height:auto; overflow:hidden; text-shadow: 0px 0px #000;}
.Main h2{ font-size:20px; color:#333333;}
.Main h2 span{color:#FF3300;}
.Main h3{ font-size:20px; color:#FF3300; padding-top:20px;}

/* ------- Sobre Mim --------*/
.textSobreMim{ width:50%; padding:5%; float:left;}
.textSobreMim p{ padding:15px 0 20px 0; text-align:justify;}
.skills{ width:30%; padding:5% 5% 1% 5%; float:left;}
.skills h3{ font-size:20px; color:#FF3300;}
.skill{ float:left; padding:1% 2% 1% 0; width:23%; }
.skill img{ width:100%; filter: grayscale(100%) opacity(0.5); -webkit-filter: grayscale(100%) opacity(0.5); -moz-filter: grayscale(100%) opacity(0.5); -o-filter: grayscale(100%) opacity(0.5); -ms-filter: grayscale(100%) opacity(0.5);}
.skill img:hover{ filter: grayscale(0) opacity(1); -webkit-filter: grayscale(0) opacity(1); -moz-filter: grayscale(0) opacity(1); -o-filter: grayscale(0) opacity(1); -ms-filter: grayscale(0) opacity(1);}
.skill a{ display:block;}

.contatoSobreMim{ width:90%; float:left; padding:1% 5% 2% 5%;}
.contatoSobreMim .entreemcontato a{ width:220px; height:30px; display:block; background:#1E1E1E; text-align:center; font-size:20px; color:#FFF; padding-top:5px; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out;}
.contatoSobreMim .entreemcontato a:hover{ background:#666;}
.contatoSobreMim .entreemcontato a span{ color:#FF3300;}

@media screen and (max-width: 884px) { 
.textSobreMim{ width:90%; padding:5%; float:left;}
.skills{ width:90%; padding:0 5% 5%; float:left;}
.skill{ float:left; width:18%; padding:1%; }
}
@media screen and (max-width: 500px) {
.skills{ width:90%; padding:0 5% 5%; float:left;}
.skill{ float:left; width:23%; padding:1%; }	
}

.Certificacoes{ width:100%; min-height:68px; overflow:hidden;}
.titleCertificacoes{ width:25%; padding-left:5%; height:68px; float:left;  background:url(../img/bg-certificacoes.png) no-repeat right;}
.Certificacoes h4{font-size:22px; color:#CCCCCC; padding:22px 0 0 0;}
.Certificacoes a{ width:160px; height:68px; float:right; display:block; background-image: url(../img/certificacoes.png); background-repeat:no-repeat; }
.mestreseo{ background-position: 7px 17px;}
.vtex{ background-position: -156px 17px;}
.forlinux{ background-position: -308px 17px;}
.graphis{ background-position: -454px 17px; margin-right:15px;}
.certificados{ float:left; width:70%;}

/* -------- Contato -------------*/
.textContato{ width:90%; padding:3% 5%; float:left;}
.textContato p{ padding:0 0 20px 0;}

.formContato{ float:left; width:48%; margin:0 5% 0 5%; height:auto;}
.formContato input, .formContato textarea{ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border:1px solid #CCCCCC; padding:5px 3% 5px 3%;}
.formContato label{ font-size:14px; color:#333; font-weight:bold; width:30%; display:inline-block; vertical-align:top; padding-top:5px;}

.campoGrande{ float:left; width:100%; min-height:35px; padding-bottom:5px;}
.campoGrande .inputText{ width:60%; height:24px; background:#333; color:#FFF; font-size:16px;}
.campoGrande .inputMesage{ width:60%; height:90px; background:#333; color:#FFF; font-size:16px;}
.campoGrande span.textfieldRequiredMsg, .campoGrande span.textareaRequiredMsg{ margin-left:32%;}
.FormSubmit{ margin-top:10px; width:158px; height:35px; color:#FFF; background:#FF3300; border:0px; float:right; margin-right:3%; font-size:14px; font-weight:bold; cursor:pointer;-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}

.infoContato{ float:left; width:32%; margin:0 5% 0 5%; height:auto; text-align:right; padding-top:20px;}
.infoContato p{ margin-bottom:5px; line-height:27px;}
.infoContato a{display:block; height:27px; padding-right:33px; color:#333; font-size:16px;}
.infoContato a:hover{ color:#FF3300;}
.contatoFacebook a{ background:url(../img/contatos.png) no-repeat right 0; }
.contatoTwitter a{ background:url(../img/contatos.png) no-repeat right -27px;}
.contatoEmail a{ background:url(../img/contatos.png) no-repeat right -54px;}

@media screen and (max-width: 884px) { 
.formContato{ float:left; width:90%; margin:0 5% 0 5%; height:auto;}
.infoContato{ float:left; width:84%; margin:0 8% 0 8%; height:auto; text-align:right; padding-top:20px;}
}
@media screen and (max-width: 500px) {.infoContato a{font-size:14px;}}
@media screen and (max-width: 360px) {
.infoContato{ display:none;}
.formContato label{ font-size:12px;}
}

/* ---------- Portfolio ---------- */
.grid { margin: 35px 0 0 0; padding: 0; list-style: none; position: relative; width: 100%; }
.grid li { position: relative; float: left; overflow: hidden; width: 25%; /* Fallback */	width: -webkit-calc(100% / 4);	width: calc(100% / 4); -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in; z-index: 1;}
.grid li:hover{-webkit-box-shadow: 0px 0px 25px #000; box-shadow: 0px 0px 25px #000; z-index: 2;}
.grid li img{ width:100%; }
.grid li figcaption{ position:absolute; top:0px; left:0px; height: 100%; width: 100%; background:url(../img/bg-caption.png); opacity: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden;-webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; visibility: hidden;}
.grid li:hover figcaption{opacity: 1; visibility:visible;}
.grid figcaption h2{ color:#FF3300; font-size:20px; padding:4%;}
.grid figcaption p{ font-size:16px; color:#FFF; padding:4%;}
.grid figcaption p.urlSite{color:#FF3300;}
.grid figcaption p a{color:#FF3300;}
.grid figcaption .zoom{width: 40%; display: block; position: absolute; bottom: 15%;left: 30%; opacity: 0.7; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.grid figcaption .zoom:hover{opacity: 1;}

#websites .grid figcaption .zoom{width: 30%; bottom: 10%; left: 35%;}
/*@media screen and (max-width: 1190px) {	.grid li { width: 20%; width: -webkit-calc(100% / 5); width: calc(100% / 5);}}*/
/*@media screen and (max-width: 945px) { .grid li { width: 25%; width: -webkit-calc(100% / 4); width: calc(100% / 4);}}*/
@media screen and (max-width: 1000px) { .grid li { width: 33.3333333%; width: -webkit-calc(100% / 3); width: calc(100% / 3);}}
@media screen and (max-width: 750px) { .grid li { width: 50%; width: -webkit-calc(100% / 2); width: calc(100% / 2);}}
@media screen and (max-width: 450px) { .grid li { width: 100%;}}

/* ------- Freelancer --------*/
.textFreelancer{ width:40%; padding:5%; float:left;}
.textFreelancer p{ padding:10px 0 5px 0;}
@media screen and (max-width: 750px) {.textFreelancer{ width:90%; padding:5%; float:left;}}

.textFreelancer .entreemcontato a{ width:220px; height:30px; display:block; background:#1E1E1E; text-align:center; font-size:20px; color:#FFF; padding-top:5px; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out;}
.textFreelancer .entreemcontato a:hover{ background:#666;}
.textFreelancer .entreemcontato a span{ color:#FF3300;}

/* ------------- PARCEIROS --------------*/
.textParceiro{ width:90%; padding:3% 5% 0px; float:left;}
.bxTextParceiro{ float:left; width:67%; padding-left:5%;}
.bxTextParceiro h2{ color:#FF3300; font-size:30px;}
.bxTextParceiro p{ padding-bottom:10px;}
.imgParceiro{ float:left; width:27%; max-width:250px;}
.imgParceiro img{ width:100%;}