@charset utf-8;

body {
min-height:100%;
width:100%;
height:auto;
background-color:#FFF;
background-image:url url(../img/backgrd.gif);
background-position:top center;
background-repeat:repeat-y;
font-size:12px;
font-family: 'Lato', sans-serif;
margin:0 auto
}


a {
color:#999;
text-decoration:none
}

header {
position:fixed;
z-index:20;
width:100%;
height:100px;
border-bottom:1px solid #EDEDED;
background-color:#FFF
}

#logointro {
color: #333;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 28px;
}

#logo {
display:inline;
float:left;
padding-top:25px;
padding-left:20px;
width:440px;
height:75px;
color:#333;
text-transform:uppercase;
letter-spacing:5px;
font-size:28px
}

#logo a {
color:#333;
text-decoration:none
}

.trade {
vertical-align:super;
font-size:18px
}

nav ul {
display:inline-block;
float:right;
margin-top:0;
list-style:none
}

nav ul li {
display:inline-block;
float:left;
padding-top:43px;
padding-left:20px;
height:57px;
text-align:center
}

nav ul li a {
color:#999;
text-decoration:none;
text-transform:uppercase;
letter-spacing:2px;
font-size:12px;
}

#navsocial {
display:inline-block;
float:right;
width:50px;
height:100px;
margin:0
}

#navsocial ul {
display:inline-block;
float:right;
list-style:none;
margin:0
}

#navsocial ul li {
display:inline-block;
float:right;
padding-top:15px;
width:49px;
height:35px;
margin:0
}

#navsocial ul li.top {
height:34px
}

#navsocial ul li a {
background-image:url(img/email.gif);
background-position:top left;
background-repeat:no-repeat;
text-indent:900px;
padding:16px 25px 22px
}

#navsocial ul li.top a {
background-image:url(img/twitter.gif);
background-position:top left;
background-repeat:no-repeat;
text-indent:900px;
padding:16px 25px 22px
}

footer {
display:block;
float:left;
width:100%;
height:30px;
border-top:1px solid #EDEDED;
background-color:#FFF;
text-align:center
}

.copy {
color:#000;
text-transform:uppercase;
background-color:#FFF;
font-size:11px;
line-height:16px;
margin:0px;
padding:15px 10px 10px
}

#topbanner {
padding-top:100px;
width:100%;
height:auto
}

#topleftban {
display:inline-block;
float:left;
padding-top:160px;
width:65%;
height:240px;
background-image: url(../img/topleft.jpg);
background-position:top right;
color:#FFF;
text-align:center;
text-decoration:none;
text-transform:uppercase;
letter-spacing:5px;
font-size:40px;
font-weight:bold;
line-height:42px
}

#toprightban1 {
display:inline-block;
float:right;
width:35%;
height:110px;
background-image: url(../img/ImmagineCARNE.jpg);
background-position:top center;
color:#FFF;
text-align:center;
text-decoration:none;
text-transform:uppercase;
letter-spacing:5px;
font-size:20px;
line-height:22px;
opacity:1px;
-webkit-transition:opacity .25s ease-in-out;
-moz-transition:opacity .25s ease-in-out;
transition:opacity .25s ease-in-out;
padding:90px 0 0
}

#toprightban2 {
display:inline-block;
float:right;
width:35%;
height:110px;
background-image: url(../img/pitturaHOME.jpg);
background-position:top center;
color:#FFF;
text-align:center;
text-decoration:none;
text-transform:uppercase;
letter-spacing:5px;
font-size:20px;
line-height:22px;
opacity:1px;
-webkit-transition:opacity .25s ease-in-out;
-moz-transition:opacity .25s ease-in-out;
transition:opacity .25s ease-in-out;
padding:90px 0 0
}




.largebox {
display:inline-block;
float:left;
width:40%;
border:none;
opacity:1px;
-webkit-transition:opacity .25s ease-in-out;
-moz-transition:opacity .25s ease-in-out;
transition:opacity .25s ease-in-out;
margin:0;
padding:0
}

.largebox img {
width:100%;
height:auto;
border:none;
vertical-align:top
}

.largeboxinner {
position:relative;
right:0;
bottom:0;
display:block;
float:right;
margin-top:-50%;
width:50%
}

.innertext {
font-size:12px;
line-height:18px;
padding:15% 15% 10%
}

.widebox {
display:inline-block;
float:left;
overflow:hidden;
width:30%;
border:none;
background-image: url(../img/DigitaleHome.jpg);
background-position:top right;
opacity:1px;
-webkit-transition:opacity .25s ease-in-out;
-moz-transition:opacity .25s ease-in-out;
transition:opacity .25s ease-in-out;
padding:0
}

.widebox img {
width:50%;
height:auto;
border:none;
vertical-align:top
}

.widebox2 {
display:inline-block;
float:left;
overflow:hidden;
width:30%;
border:none;
background-image: url(../img/DigitaleHome2.jpg);
background-position:top right;
opacity:1px;
-webkit-transition:opacity .25s ease-in-out;
-moz-transition:opacity .25s ease-in-out;
transition:opacity .25s ease-in-out;
padding:0
}

.widebox2 img {
width:50%;
height:auto;
border:none;
vertical-align:top
}




.widetext {
position:relative;
right:0;
bottom:0;
display:block;
float:right;
width:49%
}

.arrow {
position:relative;
float:left;
margin-top:60px;
margin-left:-14px;
width:15px;
height:20px;
background-image:url(img/arrow.png);
display:block
}

.arrowwide {
position:relative;
float:left;
margin-top:60px;
margin-left:-18px;
width:15px;
height:20px;
background-image:url(img/arrow.png);
display:block
}

.tallbox {
display:inline-block;
float:right;
width:40%;
height:auto
}

.tallboxinner a,.smallboxsocial a,.worktextinner a {
color:#FFFFFF !important
}

.tallboxinner h2,.smallboxsocial h2,.innertext h2,.smallboxtwitter h2,#abouttextinner h2,#contactinner h2,#skillswrap h2,.skillinner h2,.worktextinner h2 {
margin-top:0;
letter-spacing:2px;
font-weight:lighter;
font-size:12px;
}

.smallbox {
border-top:1px solid #EDEDED;
display:inline-block;
float:right;
width:20%;
height:auto
}

.smallboxsocial {
position:relative;
bottom:0;
color:#333;
font-size:12px;
line-height:18px;
padding:15% 15% 0
}

.tweet_list {
overflow-y:hidden;
list-style:none;
margin:0;
padding:0
}

.tweet_list li {
overflow-x:hidden;
overflow-y:auto;
list-style-type:none
}

.tweet_list li a {
color:#999
}

.tweet_list .tweet_avatar {
display:none
}

.tweet_list .tweet_avatar img {
vertical-align:middle
}

#ticker ul.tweet_list {
overflow-y:hidden;
height:75px
}

#ticker .tweet_list li {
overflow:hidden;
height:75px
}

#aboutbanner {
padding-top:200px;
width:100%;
height:340px;
background-image:url(img/aboutbanner.jpg);
background-position:bottom center;
color:#333;
text-align:left;
text-indent:3%;
text-transform:uppercase;
letter-spacing:3px;
font-size:18px;
line-height:20px
}

#aboutbanner h1 {
margin-top:55px;
text-transform:uppercase;
letter-spacing:2px;
font-weight:lighter;
font-size:35px
}

.quote {
margin-left:3%;
text-indent:0
}

.quotea {
font-style:italic;
font-size:12px
}

#abouttext {
display:inline-block;
float:left;
width:60%
}

#abouttextinner {
color:#333;
font-size:12px;
line-height:18px;
padding:130px 5% 10px
}

#contactbox {
display:inline-block;
float:left;
padding-top:120px;
padding-bottom:10px;
width:40%;
background-position:left -1px;
background-repeat:repeat-y
}

#contactinner {
color:#333;
font-size:12px;
line-height:18px;
padding:20px 5% 100%
}

.contactformleft {
display:inline-block;
float:left;
width:50%
}

.contactformright {
display:inline-block;
float:right;
width:50%
}

input {
margin-bottom:10px;
width:92%;
height:25px;
border:none;
background-color:#EEE;
font-weight:400;
font-style:normal;
font-size:12px;
font-family:'MuseoSans500Regular';
padding:10px
}

textarea {
margin-left:10px;
width:80%;
height:135px;
border:none;
background-color:#EEE;
font-weight:400;
font-style:normal;
font-size:12px;
font-family:'MuseoSans500Regular';
resize:vertical;
padding:10px
}

textarea:focus,input:focus {
background-color:#F6F6F6;
color:#333
}

.formbutton {
width:100%;
height:45px;
background-color:#F60;
text-transform:uppercase;
font-weight:400;
font-style:normal;
font-size:12px;
font-family:'MuseoSans500Regular';
padding:10px
}

.formbutton:hover {
background-color:#333;
color:#FFF
}

form {
display:block;
clear:both
}

#skillswrap {
display:inline-block;
float:left;
width:94%;
padding:20px 3% 0
}

.skillblock {
display:inline-block;
float:left;
width:20%;
text-align:center
}

.skillinner {
color:#333;
text-align:center;
font-size:12px;
line-height:18px;
padding:5% 20%
}

.percentage {
margin-top:-138px;
font-size:18px;
line-height:105px
}

.workanchor {
margin-top:-91px;
padding-top:91px;
background-clip:content-box;
-webkit-background-clip:content-box
}

.worksortbar {
display:block;
width:100%;
height:45px;
border-bottom:1px solid #EDEDED;
border-left:1px solid #EDEDED;
color:#FFF;
text-align:center;
text-transform:uppercase;
letter-spacing:2px;
font-size:12px;
line-height:20px
}

.worksortbar ul {
display:inline;
list-style:none;
padding:0
}

.worksortbar ul li {
display:inline;
float:left;
width:20%
}

.worksortbar ul li a {
display:block;
border-right:1px solid #EDEDED;
background-color:#FFF;
color:#333;
text-decoration:none;
padding:20px 0
}

.worksortbar ul li a.active {
display:block;
background-color:#333;
color:#FFF !important;
padding:20px 0
}

#graphic,#web,#brand,#all,#illus {
padding-top:125px
}

body#blog a#blognav {
background-position:0 -100px
}

.worktext {
display:inline-block;
float:left;
width:100%;
border-top:1px solid #EDEDED
}

.worktextinner {
font-size:14px;
line-height:18px;
padding:5%
}

.arrow2 {
position:relative;
float:right;
margin-top:60px;
margin-right:-15px;
width:15px;
height:20px
}

.workimgs {
display:inline-block;
float:right;
width:60%
}

.worklarge {
display:inline-block;
float:left;
}

.worksec ul li {
display:inline;
float:left;
padding-top:0;
width:44.45%;
border:none
}

.worksecsingle ul li {
display:inline;
float:left;
padding-top:0;
width:88.9%;
border:none;
margin-left:-10px;
}

h2.soon {
margin-top:0;
margin-bottom:200px;
padding-top:250px;
width:100%;
color:#F60;
text-align:center;
text-transform:uppercase;
letter-spacing:4px;
font-weight:lighter;
font-size:30px
}

a:hover,nav ul li a:hover,.tweet_list li a:hover {
color:#39F;
}

::selection,::-moz-selection {
background:#39F;
}

#headerwrap,#wrapper {
min-width:960px;
max-width:1440px;
width:100%;
margin:0 auto
}

#navsocial ul li a:hover,#navsocial ul li.top a:hover {
background-position:0 -50px
}

#wrapper a,.tweet,.query,body#home a#homenav2,body#about a#aboutnav,body#blog a#blognav,body#work a#worknav {
color:#333
}

#toprightban1:hover,#toprightban2:hover,.largebox:hover,.widebox:hover {
opacity:0.5px
}

.tallboxinner,.smallboxtwitter {
color:#333;
font-size:12px;
line-height:18px;
padding:5%
}

.tallboxinner a:hover,.smallboxsocial a:hover,#contactinner a:hover,.worktextinner a:hover,.orange {
color:#39F !important
}

.hwrap,.workwrap {
clear:both;
width:100%
}

.worksortbar ul li a:hover,.worksec ul li a:hover,.worksecsingle ul li a:hover {
background-color:#FAFAFA;
color:#39F !important
}

.worklarge img,.worksmall img {
width:100%;
height:auto;
vertical-align:top
}

.worksec,.worksecsingle {
position:relative;
bottom:0;
display:block;
float:left;
margin-top:-60px;
width:44%;
height:45px;
text-align:center;
text-transform:uppercase;
letter-spacing:2px;
font-size:12px;
line-height:20px
}

.worksec,.worksecsingle2 {
position:relative;
bottom:0;
display:block;
float:left;
margin-top:-60px;
width:44%;
height:45px;
text-align:center;
text-transform:uppercase;
letter-spacing:2px;
font-size:12px;
line-height:20px
}

.worksecsingle2 ul li {
display:inline;
float:left;
padding-top:0;
width:88.9%;
border:none
}




.worksec ul,.worksecsingle ul {
display:inline;
float:none;
list-style:none;
padding:0
}

.worksec ul li a,.worksecsingle ul li a {
display:block;
margin-top:-1px;
border-top:1px solid #EDEDED;
border-left:1px solid #EDEDED;
color:#333;
text-decoration:none;
padding:20px 0;
} 

#topSection {
	width:440px;
	margin:400px auto;
}


h2 {
margin-top:0;
letter-spacing:2px;
font-weight:lighter;
font-size:12px;
}

.introindex{
	display: block;
	width: 432px;
	height: 42px;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 99999
}
	

a.introindex{
	display: block;
	width: 432px;
	height: 23px;
	background: url(../img/logo.png) top left no-repeat;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -59.5px;
	z-index: 99999
}
	
@media (max-width: 1100px) {
a.introindex{
	left: -1px
}
	}
	
.topSection {
	width:440px;
	margin:300px auto;
	color:#FFF;
}


#one {
  position:relative;
  background: #000;
  border:1px solid #000;
  padding:9px;
  margin-top:3px;
  font-size:0.9em;
  color:white;
  text-transform:uppercase;
  border-radius: 5px;
  letter-spacing:3px;
  
}

#one:hover {
	background:#FAFAFA;
	color:#3399FF;
	border:1px solid #EDEDED;

}

#one:active {
	background:#3399FF;
  
  /*bottom:0px;
   box-shadow:0px 0px 0px 0px #055388;
  transition: all .01s ease-in-out;
  -moz-transition: all .01s ease-in-out;
  -webkit-transition: all .01s ease-in-out;*/
  
}