* {margin:0; padding:0}
html {font-size:100.01%}
body {background:#00121e url(../img/bg.jpg) no-repeat center top; color:#FFF; font:.625em arial, verdana, sans-serif; text-align:center}
a {color:#FFF; text-decoration:underline}
a:link, a:hover, a:focus, a:active {outline:none; text-decoration:none}
a img {border:0}
:focus {outline:0}
hr {display:none}
table {font-size:1em}
textarea {overflow:auto}
ol, ul {list-style:none}
blockquote:before, blockquote:after, q:before, q:after {content: ""}
blockquote, q {quotes: "" ""}
.replace, .navi li a, .navi li strong {overflow:hidden; padding:0; position:relative}
.replace a span, a.replace span, .navi li a span {cursor:pointer}
.replace span, .navi li span {background-position:0 0; background-repeat:no-repeat; left:0; position:absolute; top:0}
.clear {clear:both}
* html .clearfix, * html .section, * html .navi {display:inline-block}
.clearfix:after, .section:after, .navi:after {clear:both; content:''; display:block; height:0; visibility:hidden}
#container {margin:0 auto; text-align:left; width:970px}
#header {padding:43px 31px 24px 31px}
#header h1, #header h1 span {font-size:4em; font-weight:normal; height:65px; width:334px}
#header h1 span {background-image:url(../img/header-mediadev.jpg)}
#header h1 strong {color:#f34900; font-weight:normal}
h2, h3 {font-size:1.6em}
h4 {font-size:1.4em}
p {font-size:1.2em}
.section {margin-left:31px; position:relative; width:908px}
* html .section {height:399px}
.section h2 {left:0; position:absolute; top:98px}
.section .content {float:right; padding:10px 0 30px 0; width:708px}
.section .brutalisk {border:8px #000a11 solid; display:inline; float:left; height:124px; margin:30px 0 0 30px; overflow:hidden; position:relative; width: 185px}
.section .brutalisk span {display:none}
.section .brutalisk:hover span {background: #000a11; bottom:0; display:block; filter:alpha(opacity = 75); font-size:1.2em; padding:8px; position:absolute; opacity:0.75; width:169px}
* html .section .brutalisk:hover span {width:185px}
.section .brutalisk:hover span strong {display:block}
.section h2, .section h2 span {height:20px}
#home h2, #home h2 span {width:53px}
#portfolio h2, #portfolio h2 span {width:70px}
#portfolio h2 span {background-image:url(../img/replace-portfolio.gif)}
#contato h2, #contato h2 span {width:70px}
#contato h2 span {background-image:url(../img/replace-contato.gif)}
#icons h2, #icons h2 span {width:47px}
#icons h2 span {background-image:url(../img/replace-icons.gif)}
#home {margin-top:-141px; min-height:479px; padding-top:48px}
* html #home {height:529px}
#home h2 {top:183px}
#home .navi {padding-bottom:53px}
#home .content {padding:43px 0 0 28px; width:680px}
#home h3 {margin-bottom:16px}
#home h3 strong {color:#e63d00}
#home h3, #home h3 span {height:21px; width:239px}
#home h3 span {background-image:url(../img/replace-graphic-designer.gif)}
#home p.adobePhotoshop {color:#677177; font-size:1.4em; margin-bottom:66px; width:550px}
#home .contactBox {float:left; height:46px; margin:0 28px 13px 0; padding:4px 0 0 47px; width:178px}
* html #home .contactBox {height:50px; width:225px}
#home .contactBox h4 {color:#e63d00}
#home .contactEmail {background:url(../img/contact-email.gif) no-repeat left top}
#home .contactMobile {background:url(../img/contact-mobile.gif) no-repeat left top}
#home .contactBox h4 {margin-bottom:7px}
#home .contactBox h4, #home .contactBox h4 span {height:17px}
#home .contactEmail h4, #home .contactEmail h4 span {width:53px}
#home .contactEmail h4 span {background-image:url(../img/replace-email.gif)}
#home .contactMobile h4, #home .contactMobile h4 span {width:60px}
#home .contactMobile h4 span {background-image:url(../img/replace-mobile.gif)}
.navi {border-bottom:1px #1e2a32 solid; padding:13px 0 19px 493px; width:415px}
.navi li {font-size:1.5em; margin-left:17px}
.navi li, .navi li a, .navi li strong, .navi li span {display:inline; float:left; height:27px; line-height:27px; text-align:center; text-decoration:none}
.navi li a:hover span, .navi li strong span {background-position:left bottom}
.navi li strong, .navi li a:hover {background:#e20041; font-weight:normal}
.navi li.home a, .navi li.home strong, .navi li.home span {width:60px}
.navi li.home span {background-image:url(../img/navi-home.gif)}
.navi li.portfolio a, .navi li.portfolio strong, .navi li.portfolio span {width:74px}
.navi li.portfolio span {background-image:url(../img/navi-portfolio.gif)}
.navi li.contato a, .navi li.contato strong, .navi li.contato span {width:74px}
.navi li.contato span {background-image:url(../img/navi-contato.gif)}
.navi li.icons a, .navi li.icons strong, .navi li.icons span {width:54px}
.navi li.icons span {background-image:url(../img/navi-icons.gif)}
#form-contact {clear:both; margin:50px auto 0; width:300px}
#form-contact fieldset {border:0 none}
#form-contact input, textarea {background-color:#00121E; border:1px solid #FFF; color:#FFF; width:300px}
#form-contact label {color:#E20041; display:block; font-size:1.3em; font-weight:bold; margin:5px 0}
#form-contact textarea {font-family:Arial, Helvetica, sans-serif; font-size:1.2em; height:100px}
#form-contact .submit {border:0 none; cursor:pointer; float:right; width:50px}
#footer {border-top:1px #1e2a32 solid; clear:both; margin-left:31px; padding:25px 0; width:908px}
#footer p {float:left}
#footer p img {float:left; margin-right:455px}
#footer ul {float:right}
#footer ul li {border-left:1px #FFF solid; font-size:1.2em; display:inline; margin-left:4px; padding-left:6px}
#footer ul li.first {border:0}
#footer ul li a {color:#e20041}