* {margin:0;padding:0}
body {background:url(images/fundo3.jpg) top center repeat #EDEDED;font-family:Arial, Helvetica, sans-serif;font-size:12px}
a {text-decoration:none}
a img {border:none}
li {list-style:none}

/*
### CORES ###

rosa: #FB1263
preto: #333339
cinza-escuro: #767A8D
cinza: #D8D8D8
cinza-claro: #E4E4E4
branco: #EDEDED
*/

#global {position:relative;margin:0 auto;width:880px;padding:0 50px}
.mais, .maisinfo, #enviar {padding:5px 8px;background:#FFF;color:#767A8D;margin-left:15px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;font-size:11px}
.maisinfo {background:#FB1263!important;color:#FFF}
.mais img {margin:0 4px -1px 0}
.mais:hover {background:#FB1263;color:#FFF}
.e-mail {padding-left:30px;background:url(images/mail.gif) 8px 7px no-repeat #FFF;border:1px solid #E4E4E4}
.e-mail:hover {background:url(images/mail.gif) 8px 7px no-repeat #FB1263;border:none}


/* h 1,2,3,4,5,6 padrões */
h2 {font-family: 'PT Sans', serif;font-size:24px;color:#767A8D;font-weight:normal;text-align:center;clear:both;margin:30px 0;text-shadow:0 1px #FFF}
h3 {font-family: 'PT Sans', serif;font-size:18px;color:#333339; text-transform:uppercase;font-weight:normal;margin:50px 0 5px 0}
p {color:#767A8D;line-height:20px}
/* ##################### */


/* TOPO */
#top {padding-top:18px;border-bottom:1px dotted #D8D8D8;height:140px;background:url(images/fundotopo.jpg) repeat;}
#topo {position:relative;margin:0 auto;width:880px}

#bottom {height:158px;background:url(images/fundorodape.jpg) repeat;clear:both;border-top:1px dotted #D8D8D8;margin-top:45px}
#rodape {position:relative;margin:0 auto;width:880px;font-size:11px;padding-top:30px}
#simbolo {background:url(images/logorodape.png) no-repeat;padding-left:80px;height:38px}
#rodape p {float:left;margin-right:30px}
#rodape div {float:right;text-align:right;line-height:40px}
#rodape div p {margin-right:3px;float:right}

.logo {font-family: 'PT Sans', serif;font-size:20px;color:#767A8D;padding:3px 0 10px 0;float:left;margin-top:45px;text-align:center;text-shadow:0 1px #FFF;width:295px}
.logo a {background:url(images/logo.png) no-repeat left;width:100px;height:65px;margin-right:20px;display:block;float:left}
.logo a:hover {background-position:right}
.logo strong {color:#333339}
.logo h1 {font-weight:normal;color:#000;font-family:Arial, Helvetica, sans-serif;font-size:11px;background:#F5F5F5;padding:6px 8px;margin-top:4px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;float:right}

.local {position:absolute;right:0;color:#767A8D;font-size:11px;}
.local h1 {color:#767A8D;float:left;margin:0;font-size:11px;font-weight:normal}
.local span {margin:0 4px 0 20px}

#menu {float:right;margin-top:65px;font-family: 'PT Sans', serif;text-transform:uppercase;font-size:16px;width:386px;height:75px;border-bottom:1px solid #D8D8D8}
#menu a {color:#000;margin-left:16px;text-align:right;text-shadow:0 1px #FFF}
#menu a:hover {color:#FB1263}
#menu #home {width:15px;height:22px;background:url(images/home.gif) no-repeat left;display:block;float:left;margin-right:10px}
#menu #home:hover {background-position:right}
.actived {background-position:right!important;color:#FB1263!important}
/* /TOPO */


/*home*/
	/* APRESENTACAO */
#slider, #slideshow {float:left;position:relative;overflow:auto;width:876px;height:381px;background:#000;border:2px solid #FFF;margin-bottom:400px}
#slider ul, #slideshow ul {position:absolute;top:0;left:0}
#slider li, #slideshow li {float:left;width:876px;height:381px;position:relative}
#slider li:hover .maisinfo, #slider li .maisinfo {top:175px!important;left:379px!important}
.sliright {position:absolute;right:0;top:249px}
.slileft {position:absolute;left:0;top:249px}


	/* TRABALHOS SELECIONADOS */
#trabalhos, #portfolio {position:absolute;top:452px;left:36px}
#trabalhos h3 {margin-left:14px}
#trabalhos h4 {float:left;margin-left:14px;font-weight:normal;color:#767A8D;font-size:12px}
#selecionados {float:left;position:relative;overflow:auto;width:909px;height:300px}
#selecionados ul {position:absolute;top:0;left:0}
#selecionados li, #portfolio {float:left;width:909px;height:270px;margin-top:20px}
#selecionados li div, #portfolio li {background:#FFF;width:274px;float:left;margin:0 15px 0 14px;border-bottom:2px solid #DFDFDF;position:relative}
#selecionados li div h2, #servicos ul li h1, #portfolio li h2 {font-family: 'PT Sans', serif;font-size:20px;color:#000;text-align:left;margin:0}
#selecionados li div h2 a, #portfolio li h2 a {color:#333339;padding:12px;display:block}
#selecionados li div img, #portfolio li img {margin:2px;position:absolute;z-index:1} 
#selecionados li div p a, #portfolio li p a {padding:0 12px 12px 12px;color:#767A8D;display:block}
#selecionados li div:hover, #portfolio li:hover {-webkit-box-shadow: 0px 0px 15px rgba(0,0,0, .15);-moz-box-shadow: 0px 0px 15px rgba(0,0,0, .15);box-shadow: 0px 0px 15px rgba(0,0,0, .15);}
.maisinfo {display:none;position:absolute;font-size:12px;margin:2px}
#selecionados div:hover .maisinfo, #slider li:hover .maisinfo, #portfolio li:hover .maisinfo {position:absolute;z-index:10;top:68px;left:78px}
.bg {background:#000;width:270px;height:160px;position:relative;display:block;margin:2px}
#selecionados li div:hover h2 a, #portfolio li:hover h2 a {color:#FB1263}
.selright {position:absolute;right:0;top:692px}
.selleft {position:absolute;left:0;top:692px}

	/* DIRECIONADORES */
.next {background:url(images/setas.png) top right;cursor:pointer;width:25px;height:25px;display:block}
.next:hover, .next2:hover {background-position:bottom right}
.next:active, .prev:active, .next2:active, .prev2:active {margin-top:1px}
.prev {background:url(images/setas.png) top left;cursor:pointer;width:25px;height:25px;display:block}
.prev:hover, .prev2:hover {background-position:bottom left}
.next2 {background:url(images/setas2.png) top right;cursor:pointer;width:20px;height:20px;display:block}
.prev2 {background:url(images/setas2.png) top left;cursor:pointer;width:20px;height:20px;display:block}
/**/

.resumos {width:267px;float:left;margin:0 40px 50px 0;position:relative}
#resumo {margin-right:0px;width:266px}
.resumos h3 {float:left;margin-bottom:10px}
.resumos .mais {float:left;margin-top:49px}
.clear {background:url(images/sep.gif) repeat-x;height:5px;clear:both;margin-bottom:25px}
#twitter {background:url(images/twitter2.png) left;height:58px;width:145px;display:block;color:#767A8D;float:right;margin-top:25px;line-height:58px;font-size:11px}
.twit {background:url(images/cleartwit.png);clear:both;height:9px;margin-bottom:21px}
#twitter span {padding-left:9px}
#twitter:hover {background-position:right;color:#FFF}

#servicos {position:relative;overflow:auto;width:267px;height:230px}
#servicos ul {position:absolute;top:0;left:0}
#servicos li {float:left;width:267px;height:230px}
#servicos ul li h1 {color:#333339;font-weight:normal}
#servicos ul li p {margin:10px 0;width:260px}
#servicos ul li a {color:#FB1263;line-height:25px}
#servicos ul li a:hover, #twitter_update_list li a:hover, .depoimento a:hover, #rodape p a:hover, .sobre p a:hover, #sobre p a:hover {color:#FFF;background:#FB1263;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#setas {float:right;margin-top:51px}
.serright {float:right;margin-left:10px}
.serleft {float:right}

.depoimento p {font-style:italic;font-size:14px;line-height:22px}
.depoimento span {float:right;font-size:12px;font-style:normal}

#resumo p {position:absolute}
#twitter_update_list {position:absolute}
#twitter_update_list li {color:#767A8D;line-height:20px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px dotted #D8D8D8;background:url(images/twitfundo.png) no-repeat}
#twitter_update_list li a, .depoimento a, #rodape p a, .sobre p a, #sobre p a {color:#FB1263}


.twitter, .facebook, .linkedin {height:16px;width:16px;display:block;float:right;margin:3px 0 0 5px}
.twitter {background:url(images/icontwitter.png) left;}
.twitter:hover, .facebook:hover, .linkedin:hover {background-position:right}
.facebook {background:url(images/iconfacebook.png) left}
.linkedin {background:url(images/iconlinkedin.png) left}





/* PORTFOLIO */
#filter {margin:40px 0;height:950px}
#filter li {float:left;font-size:12px;color:#767A8D}
#filter li a {font-size:12px}
.current {background:#FB1263;color:#FFF}
#portfolio {top:50px!important}
#portfolio li {margin-bottom:30px}
.clearfix {clear:both!important}




/* MAIS */
#serv, #sobre, #url {margin:30px 0}
#serv {width:120px;margin-right:45px;float:left;color:#767A8D}
#serv a {margin:0;font-size:12px}
#sobre {width:410px;margin-right:45px;float:left}
#sobre p {margin:0 0 20px 0}
#url {width:260px;float:left}
#url a {display:block;margin:0;text-align:center}
#navegacao {position:absolute;top:0;left:50px;width:880px}
.anterior {float:left;background:url(images/anterior.png) top left no-repeat;padding:1px 0 0 40px}
.anterior:hover {background-position:bottom left}
.anterior, .proximo {color:#333339;font-family: 'PT Sans';text-transform:uppercase;font-size:14px;line-height:15px}
.anterior span, .proximo span {color:#767A8D;font-size:11px;font-family:Arial, Helvetica, sans-serif;text-transform:none}
.anterior:hover, .proximo:hover, .anterior:hover span, .proximo:hover span {color:#FB1263}
.proximo {float:right;text-align:right;background:url(images/proximo.png) top right no-repeat;padding:1px 40px 0 0}
.proximo:hover {background-position:bottom right}
#slideshow {height:596px!important;margin-bottom:0}
.showright {position:absolute;right:0;top:348px}
.showleft {position:absolute;left:0;top:348px}



/* SOBRE */
#foto {width:274px;float:left}
#foto h3, .sobre h3 {margin-bottom:20px}
#foto p {float:left;font-weight:bold;margin:25px 10px 0 0}
.sobre {float:left;width:260px;margin:0 0 100px 45px;}
.sobre p {margin-bottom:10px}
.sobre .mais {margin-left:70px;font-size:12px}
.sobre ul {background:url(images/fundohabilidades.png) repeat}
.sobre ul li a {font-size:11px;color:#FFF;background:#767A8D;height:14px;padding:7px;margin-bottom:1px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;display:block}
.sobre ul li a:hover {background:#FB1263}
.sobre span {margin:10px 61px}
.htm {width:92%}
.fw {width:93%}
.ps {width:82%}
.js {width:25%}
.php {width:30%}
.as {width:28%}
.seo {width:57%}
.us {width:68%}
.wp {width:57%}
.mim {margin:90px 0 0 31px!important}
#conhecimento {background:url(images/conhecimento.gif) no-repeat;width:260px;height:7px;margin:10px 0}
#fb, #tw, #in, #em {width:30px;height:32px;display:block;background:url(images/icones.png);float:left;margin:20px 0 0 12px}
#fb {background-position:top left}
#fb:hover {background-position:left bottom}
#tw {background-position:60px top}
#tw:hover {background-position:60px bottom}
#em {background-position:30px top}
#em:hover {background-position:30px bottom}
#in {background-position:90px top}
#in:hover {background-position:90px bottom}


/* SERVICOS */
.categorias {width:260px;text-align:right;float:left;margin:40px 39px 0 0}
.categorias h1 {font-family: 'PT Sans', serif;font-size:24px;text-transform:uppercase;font-weight:normal;color:#333339}
.servicos {width:260px;padding:0 14px;margin:0 0 4px 2px;text-align:center;float:left;height:277px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
.servicos h2, .servicos p {width:260px}
.servicos h2 {font-size:20px;margin:15px 0;color:#333339}
#design, #redesign, #funcional, #cms, #social, #seo {background:url(images/icon.png) no-repeat;width:50px;height:41px;margin:26px 104px 0 104px}
#design {background-position:top left}
#redesign {background-position:top right}
#funcional {background-position:center left}
#cms {background-position:center right}
#social {background-position:bottom left}
#seo {background-position:bottom right}
#cleardesign {background:url(images/sep.gif) repeat-x;height:5px;margin:22px 0 24px 0}
#cleardesenv {background:url(images/sep.gif) repeat-x;height:5px;margin:35px 0 37px 0}
#clearoutros {background:url(images/sep.gif) repeat-x;height:5px;margin:35px 0 37px 0}
#espaco {padding:40px 0;height:800px}
.border {border-top:1px dotted #D8D8D8;height:5px;clear:both}




#facebox {position: absolute;top: 0;left: 0;z-index: 100;text-align: left;}
#facebox .popup{position:relative;border:5px solid rgba(0,0,0,0.2);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 0 18px rgba(0,0,0,0.2);-moz-box-shadow:0 0 18px rgba(0,0,0,0.2);  box-shadow:0 0 18px rgba(0,0,0,0.2);}
#facebox .content {display:table;width: 370px;padding: 10px;background: #fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#facebox .content > p:first-child{margin-top:0;}
#facebox .content > p:last-child{margin-bottom:0;}
#facebox .close{position:absolute;top:5px;right:5px;padding:2px;background:#fff;}
#facebox .close img{opacity:0.3;}
#facebox .close:hover img{opacity:1.0;}
#facebox .loading {text-align: center;}
#facebox .image {text-align: center;}
#facebox img {border: 0;margin: 0;}
#facebox_overlay {position: fixed;top: 0px;left: 0px;height:100%;width:100%;}
.facebox_hide {z-index:-100;}
.facebox_overlayBG {background-color: #000;z-index: 99;}
#facebox h3 {font-size:14px;margin-top:0!important;color:#000}
#facebox p {text-transform:none;font-size:12px}
.acr {color:#767A8D!important;border-bottom:1px dotted #767A8D}
.acr:hover {border-bottom:none;color:#FFF!important}
form textarea, form input {-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:5px;border:1px solid #CCC;margin:5px 0}
form label {font-size:12px;color:#767A8D;line-height:22px}
#enviar {background:#FB1263!important;color:#FFF!important;border:none!important;width:100px;margin:10px 0 0 76px;margin-bottom:35px;clear:both;width:100px!important;font-size:14px}
#enviar:hover {cursor:pointer;background:#DC034F!important}
#nomel {float:left;width:178px;margin-right:15px}




/*CONTATO*/
.label {width:66px;text-align:right!important;display:block;float:left;padding:10px 10px 0 0!important;color:#767A8D!important}
.label span {color:#F00}
#contact-wrapper {margin:20px 0}
#contact-wrapper label {text-align:left;color:#F00;padding:10px 0 0 10px;float:left}
#contact-wrapper div {clear:both;margin:1em 0;float:left}
form#contactform input {border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;border-style:solid;border-width:1px;padding:5px;font-size:14px;color:#333;width:200px;float:left}
form#contactform textarea {font-family:Arial, Tahoma, Helvetica, sans-serif;font-size:100%;padding:0.6em 0.5em 0.7em;border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;border-style:solid;border-width:1px;width:350px;float:left}
#contact-wrapper p {margin-left:76px}
.error {color:#F00}