@charset "UTF-8";
/* CSS Document */

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

}

/***** LOCAL *****/
@import url(http://localhost/somosfreela/estilos/estrutura.css);
/***** /LOCAL *****/

*{margin:0; padding:0}
html, body{margin:0; padding:0; width:100%; height:100%;}
html{background:#FBFBFB; overflow-x:hidden}
#contem{width:100%; height:1050px; background:url(../images/back-site.jpg) no-repeat center top; position:relative; z-index:10; box-shadow:
0 60px 120px 110px #fff;  /*border-top:solid 6px #0cf*/}
#site{width:980px; margin:0 auto; position:relative; height:100%; z-index:100;}

#award {position:fixed; right:0; top:5px; width:69px; z-index:2000;}
.csswinner{
position:fixed;
top:220px;
right:0px;
z-index:999;
}
.csswinner a{
outline:0;
width:81px;
height:59px;
text-indent:-9000px;
display:block;
background:url(../images/winner.png) no-repeat;
}

.um{background:url(../images/azul_um.png) no-repeat 0 0; left:-15px; top:-81px; position:absolute; width:355px; height:355px; display:none; z-index:100;}
.dois{background:url(../images/vermelho_um.png) no-repeat 0 0; left:322px; top:-252px; position:absolute; width:355px; height:355px; display:none; z-index:11;}
.tres{background:url(../images/vermelho_um.png) no-repeat 0 0; left:661px; top:87px; position:absolute; width:355px; height:355px; display:none; z-index:12;}
.quatro{background:url(../images/azul_dois.png) no-repeat 0 0; left:871px; top:87px; position:absolute; width:83px; height:83px; display:none; z-index:13;}
.cinco{background:url(../images/vermelho_dois.png) no-repeat 0 0; left:619px; top:170px; position:absolute; width:84px; height:84px; display:none; z-index:14;}
.seis{background:url(../images/azul_dois.png) no-repeat 0 0; left:829px; top:381px; position:absolute; width:83px; height:83px; display:none; z-index:15;}
.sete{background:url(../images/azul_tres.png) no-repeat 0 0; left:491px; top:340px; position:absolute; width:167px; height:167px; display:none; z-index:16;}
.oito{background:url(../images/vermelho_tres.png) no-repeat 0 0; left:745px; top:424px; position:absolute; width:167px; height:167px; display:none; z-index:17;}
.nove{background:url(../images/vermelho_dois.png) no-repeat 0 0; left:110px; top:337px; position:absolute; width:84px; height:84px; display:none; z-index:18;}
.dez{background:url(../images/azul_dois.png) no-repeat 0 0; left:194px; top:678px; position:absolute; width:83px; height:83px; display:none; z-index:19;}
.onze{background:url(../images/vermelho_quatro.png) no-repeat 0 0; left:283px; top:743px; position:absolute; width:39px; height:39px; display:none; z-index:20;}
.doze{background:url(../images/azul_cinco.png) no-repeat 0 0; left:34px; top:595px; position:absolute; width:915px; height:330px; display:none; z-index:21;}
.treze{background:url(../images/vermelho_quatro.png) no-repeat 0 0; left:828px; top:741px; position:absolute; width:39px; height:39px; display:none; z-index:22;}
.catorze{background:url(../images/vermelho_tres.png) no-repeat 0 0; left:830px; top:848px; position:absolute; width:167px; height:167px; display:none; z-index:23;}
/*.quinze{background:url(../images/vermelho_tres.png) no-repeat 0 0; left:-15px; top:912px; position:absolute; width:167px; height:167px; display:none; z-index:24;}*/
.portifolio{left:595px; top:278px; position:absolute; width:130px; height:130px; z-index:27; display:none;}
a.btn_porti{background:url(../images/btn_port.png) no-repeat 0 0; cursor:pointer; width:49px; height:51px; display:block; text-decoration:none; border:none; margin:100px 0 0 100px}

.sheila{background:url(../images/box_sheila.png) no-repeat 0 0; left:321px; top:81px; position:absolute; width:337px; height:335px; z-index:25; text-align:center}
.marcelo{background:url(../images/box_marcelo.png) no-repeat 0 0; left:492px; top:415px; position:absolute; width:335px; height:335px; z-index:26; text-align:center}

span.titulo_azul, span.titulo_cinza, .titulo_azul_tel{font-family: 'Lato', sans-serif; font-weight:900 !important; font-size:75px; text-transform:uppercase; font-weight:normal; color:#666; margin:0 0 0 0; letter-spacing:-2px; line-height:92%;}
span.titulo_rosa{color:#FF33CC}
span.titulo_cinza{color:#999; font-weight:normal}
span.font_onze{font-size:11px}
span.titulo_azul_maior{font-size:22px; color:#0CF; font-weight:normal; letter-spacing:-2px}
span.titulo_rosa_maior{font-size:30px; color:#FF33CC; font-weight:normal; letter-spacing:-2px}
span.azul{color:#FF33CC; font-size:13px}
span.titulo_azul b, .titulo_azul_tel b{font-weight:100 !important;}
.titulo_azul_tel{font-size:25px !important}

ul#siga{width:82px; height:26px; float:left; margin:10px 0 0 59px}
ul#siga li{list-style:none; float:left; width:27px; height:26px; position:relative; margin:0; padding:0}
ul#siga li a{display:block; text-decoration:none; cursor:pointer; border:none; float:left}

ul#siga li a.face{background:url(../images/midia_social.png) no-repeat 0 0; width:27px; height:26px}
ul#siga li a.face:hover{background:url(../images/midia_social.png) no-repeat 0 -26px;}

ul#siga li a.twitter{background:url(../images/midia_social.png) no-repeat -27px 0; width:27px; height:26px;}
ul#siga li a.twitter:hover{background:url(../images/midia_social.png) no-repeat -27px -26px;}

ul#siga li a.flickr{background:url(../images/midia_social.png) no-repeat -54px 0; width:27px; height:26px}
ul#siga li a.flickr:hover{background:url(../images/midia_social.png) no-repeat -54px -26px;}

h1{font-size:16px; font-family:'DINLight', Arial; color:#333; font-weight:normal; letter-spacing:-1px; margin:195px 0 0 0}
h2{font-family:'DINLight'; font-size:18px; color:#333; font-weight:bold; float:left; width:100%; margin:20px 0 10px 0}
h3 a{font-family:'DINLight'; font-size:11px; color:#333; font-weight:normal; float:left; width:100%; margin:57px 0 0 0; text-align:center; cursor:pointer; text-decoration:none; letter-spacing:-1px}
h3 a:hover{color:#0CF;}

p.end{font-family:'DINLight'; font-size:11px; color:#999; margin:0 0 0 30px; float:left}
span{font-size:11px; color:#999; letter-spacing:normal}
a.btn, a.btn2{background:url(../images/btn.png) no-repeat 0 0; cursor:pointer; width:49px; height:51px; position:absolute; display:block; left:461px; top:335px; z-index:29; text-decoration:none; border:none; display:none}
a.btn2{left:631px; top:675px;}
a.btn:hover, a.btn2:hover{background:url(../images/btn.png) no-repeat 0 -51px;}

a{font-family:'DINLight'; text-decoration:none; color:#999; font-size:11px}
a:hover{color:#0CF}

#oculto{float:right; position:relative; z-index:28; width:1991px; height:820px; display:none; right:-1900px; background:url(../images/fundo_conteudo.png) no-repeat 0 0; min-height:1600px !important}

ul{width:100%; height:auto; float:left; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#999; margin:0 0 30px 0}
ul li{width:100%; height:auto; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#999; margin:0 0 5px 15px}

.navega{cursor:pointer; text-decoration:none; font-family:'DINLight'; font-size:11px; color:#00CCFF; margin:0 0 20px 0; width:100%; float:left;}
.cont_curriculo{width:100%; height:auto; position:relative; top:340px; right:-1100px; display:none; float:left; padding-bottom:80px}
p, #cont_sheila p, #cont_marcelo p{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#999; margin:0 0 0 0; text-align:center; line-height:16px;}
#cont_sheila p, #cont_marcelo p{text-align:justify; width:360px; margin-bottom:15px}

div#habilidades{width:100%; height:auto; position:relative; padding:20px 0 30px 0; float:left}
.linguagem{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#999; width: 100px; float:left; clear:both; position:relative; margin-bottom:5px}
.dominio{ background:#F4F4F4; width:280px; height:20px ; float:left; margin-bottom:5px}
.d10, .d20, .d30, .d40, .d50, .d60, .d70, .d80, .d90, .d100{height:100%; background:url(../images/bg_rosa.png) repeat-x; position:relative}
.d10a, .d20a, .d30a, .d40a, .d50a, .d60a, .d70a, .d80a, .d90a, .d100a{height:100%; background:url(../images/bg_azul.png) repeat-x; position:relative}
.d10, .d10a{ width:10%;}
.d20, .d20a{ width:20%;}
.d30, .d30a{ width:30%;}
.d40, .d40a{ width:40%}
.d50, .d50a{ width:50%}
.d60, .d60a{ width:60%}
.d70, .d70a{ width:70%}
.d80, .d80a{ width:80%}
.d90, .d90a{ width:90%}
.d100, .d100a{ width:100%}

#pos1, #pos2{display:none}
.um h1{text-align:center; font-weight:normal; margin:125px 0 0 95px; width:150px }
.text_azul{color:#0CF; font-size:18px; font-family:Arial, Helvetica, sans-serif; font-weight:normal}
.text_preto{color:#333; font-size:22px; letter-spacing:-1px}
.text_cinza{color:#999; font-size:22px; letter-spacing:-1px}
.text_mini{color:#CCC; font-size:10px; letter-spacing:2px}
.text_mini2{color:#999; font-size:11px;}

.fotos-flickr{ list-style-type:none; width:600px; position:absolute; left:-400px; top:1200px; clear:both}
.imagensFliker{ list-style-type:none; width:200px; height:auto; float:left; margin:2px 2px 2px 2px}
.imagensFliker .rotulo, .imagensFliker .rotulo p{width:160px; font-size:10px; text-align:left; margin:0 0 20px 0}
.imagensFliker .rotulo a{text-decoration:none; color:#999}
.imagensFliker img{width: 200px; height: 150px }

#rodape{position:fixed; width:100%; height:170px; bottom:0; background:#00CCFF; /*background:url(../images/rodape.png) top center;*/ z-index:55;}
.conteudo_rodape{float:left; width:auto; height:auto; margin:65px 0 0 35px}

#facebook{display:block; margin-right:60px; margin-bottom:30px; text-align:left; position:fixed; bottom:0; z-index:1000; right:0}

.topo-site{height:100%; min-height:600px; width:100%; background:#FFF url(../images/back.jpg) no-repeat fixed center -160px; position:relative; z-index:1;}
.topo-site .desc{width:800px; position:absolute; z-index:1; margin-left:-400px; left:50%; height:450px; margin-top:-225px; top:46%; text-align:center}
.contatos{left:210px; position:absolute; width:400px; height:auto; z-index:28; top:435px;}
.contatos p{font-family:'Lato', sans-serif; font-weight:900; font-size:80px; color:#CBF4FE; margin:0 0 0 0; width:auto; text-align:left; line-height:90%}
.contatos p b{font-weight:100; color:#FEC1EE}

ul#menu-footer{width:100%; height:auto; position:fixed; border-bottom:solid 6px #0cf; bottom:0; z-index:200; margin:0; list-style:none; text-align:center}
ul#menu-footer li{display:inline-block; width:120px; margin:0; text-align:center}
ul#menu-footer li a.push{display:block; outline:none; position:relative; bottom:-20px; display:inline-block;
vertical-align: middle; width: 0; height: 0; border-left: 80px solid transparent; border-right: 80px solid transparent; border-bottom: 80px solid #0cf; z-index:100;
transition: all 0.5s ease; }
ul#menu-footer li a.push b{position:absolute; text-align:center; color:#FFF; font-size:11px; line-height:90px; font-weight:600; font-family:'Lato', sans-serif; width:120px; left:50%; transition: all 0.5s ease; margin-left:-60px}
ul#menu-footer li a.push:hover, ul#menu-footer li a.push.ativo{border-bottom: 80px solid #FF33CC; border-left: 80px solid transparent; border-right: 80px solid transparent; bottom:-6px}
ul#menu-footer li a.push:hover b, ul#menu-footer li a.push.ativo b{line-height:110px}
/*ul#menu-footer li a.push::before{content:url(../images/seta-push.png); width:22px; height:11px; left:-9px; top:35px; position:absolute}*/

ul#skil-top{position:relative; width:100%; height:auto; list-style:none; margin:90px 0 0 0}
ul#skil-top li{display:inline-block; width:200px; height:180px; font-family:'Lato', sans-serif; font-weight:300; font-size:15px; line-height:145%; margin:0 0 0 94px;
text-align:center; vertical-align:top}
ul#skil-top li:first-child{margin:0 0 0 0}
ul#skil-top li b{font-size:18px; font-weight:900; display:block; width:100%; padding-bottom:10px; color:#666}

ul#skil-top li::after, ul#skil-top li::before{content:''; background:url(../images/linha-separa.png) no-repeat 0 0; width:103px; height:103px; position:absolute; left:210px; top:-10px; opacity:0.2}
ul#skil-top li::before{left:515px}

.box{position:absolute; width:320px; height:auto; left:335px; top:790px; z-index:20}
.box p{font-size:17px; font-weight:300; line-height:140%; font-family: 'Lato', sans-serif; color:#666; text-align:center; font-style:italic}
.box p b{font-weight:600;}

.pag-contato{height:100%; min-height:620px; width:100%; background:url(../images/back-cidade-2.jpg) no-repeat center center fixed; position:relative; z-index:10; -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}
.pag-contato .desc{width:800px; position:absolute; z-index:1; margin-left:-400px; left:50%; height:230px; margin-top:-115px; top:48%; text-align:center;}

.content-portifa{width: 100%; height:auto; float: left; position: relative; padding-bottom: 6px; z-index: 10; background: #FFF; box-sizing: border-box; border-top: solid 6px #00CCFF}
.content-portifa .portifa{width:100%; height:auto; position: relative; float: left}

.content-portifa .portifa h2{font-size: 60px; text-align: center; color: #00CCFF; font-weight: 100; padding: 50px 0; font-family:'Lato', sans-serif;}

.content-portifa .portifa .itens{position: relative; height: auto; width: 25%; float: left; height: auto; background: #000}
.content-portifa .portifa .itens span{position: absolute; padding: 10px; background:transparent; border: solid 1px #FF33CC; color: #FFF; display: block; font-family:'Lato', sans-serif; height: 80px; width: 80px; transform: rotate(-45deg); font-size: 11px; font-weight: 600; float: left; margin-right: 1px; top: 50%; margin-top: -40px; left: 50%; margin-left: -40px; opacity: 1; text-transform: uppercase; transition: all 0.4s; line-height: 140%}
.content-portifa .portifa .itens span strong{color:#00CCFF }
.content-portifa .portifa .itens a{display: block}
.content-portifa .portifa .itens:hover span{opacity: 0}
.content-portifa .portifa .itens img{width: 100%; height: auto; transition: all 0.4s; opacity: 0.25}
.content-portifa .portifa .itens:hover img{opacity: 1}

.content-portifa .portifa .itens.link-footer-box{background: #FFF; padding: 30px; box-sizing: border-box;}
.content-portifa .portifa .itens.link-footer-box p a{text-align: left; font-size: 16px!important; margin-top: 20px; color: #222; font-weight: 400 }
.content-portifa .portifa .itens.link-footer-box a{display: block; color: #222; font-size: 30px; font-weight: 300; line-height: 100%; font-family: 'Lato', sans-serif; height: 100%}


@media only screen and (max-width: 1000px){
    #site, #contem, ul#menu-footer li:nth-child(3), #facebook{display: none}
    .content-portifa .portifa .itens{position: relative; height: auto; width: 50%;}
    .content-portifa{padding-bottom: 100px}
}
@media only screen and (max-width: 820px){
    .topo-site .desc{width: 600px; margin-left: -300px; height: 700px; margin-top: -350px}
    .content-portifa .portifa .itens{position: relative; height: auto; width: 100%;}
    ul#skil-top li::after, ul#skil-top li::before{left: 270px}
    
    ul#skil-top li{height: auto; margin-bottom: 80px}
    ul#skil-top li:last-child{margin-left: 0}
    ul#skil-top li::before{display: none}
}
@media only screen and (max-width: 769px){
    .content-portifa .portifa .itens{position: relative; height: auto; width: 100%;}
}

@media only screen and (max-width: 600px){
    html, body{overflow-y: none}
    .topo-site{min-height: 820px}
    .topo-site .desc{width:85%; margin-left: 0; height:820px; margin-top:50px; top: 30px; margin: 0 auto; position: relative; left: 0}
    ul#skil-top{margin-top: 50px}
    ul#skil-top li{height: auto; margin-bottom: 50px; margin-left: 0}
    ul#skil-top li:first-child{margin-bottom: 50px}
    ul#skil-top li::after, ul#skil-top li::before{display: none}
    span.titulo_azul{text-align: center; font-size: 55px; line-height: 100%; margin-bottom: 50px}
    
    .content-portifa .portifa .itens img{opacity: 1}
    
}
@media only screen and (max-width: 400px){
    ul#menu-footer li{width: 70px; display: block; float: left; margin-left: 10px}
    span.titulo_azul{text-align: center; font-size: 45px; line-height: 100%; margin-bottom: 50px;}
}